/* ═══════════════════════════════════════════════════════════════
   카탈로그 만들기 — 화면(편집기) + 카탈로그 페이지 디자인 24가지
   디자인 = 색(data-pal 24) × 표지(data-cv 12) × 품목 제목(data-hd 6) × 상품 카드(data-cd 7) × 글꼴(data-ft 6) (+ data-big 큰 글씨)
   페이지는 실제 픽셀 크기(A4 1240×1754 · 휴대폰용 1080×1350)로 그리고 화면에서는 축소해 보여 줍니다.
   PNG 저장(html2canvas)과 똑같이 나오도록 사진은 배경 그림(.ph), clip-path · text-stroke 같은 효과는 쓰지 않습니다.
   ═══════════════════════════════════════════════════════════════ */

/* ── 편집기 ── */
.maker { display: grid; gap: 22px; padding: 10px 0 40px; }
@media (min-width: 1000px) { .maker { grid-template-columns: 420px 1fr; align-items: start; } }
.maker__side { display: grid; gap: 14px; min-width: 0; }
@media (min-width: 1000px) { .maker__side { position: sticky; top: 140px; max-height: calc(100vh - 160px); overflow-y: auto; padding-right: 4px; } }
.mstep { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; min-width: 0; }
.mstep > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 1.08rem; }
.mstep > summary::-webkit-details-marker { display: none; }
.mstep > summary::after { content: '+'; margin-left: auto; color: var(--sub); font-weight: 400; font-size: 1.4rem; }
.mstep[open] > summary::after { content: '−'; }
.mstep > summary small { font-weight: 600; color: var(--sub); font-size: .85rem; }
.mstep__no { font-family: var(--serif); color: var(--coral); font-size: 1rem; }
.mstep--more > summary .mstep__no { color: var(--green); font-size: 1.3rem; }
.mstep__body { padding-top: 14px; display: grid; gap: 12px; min-width: 0; }
.mstep__hint { color: var(--sub); font-size: .9rem; margin: 0; }
.opt { display: grid; gap: 6px; min-width: 0; }
.opt__label { font-weight: 800; font-size: .95rem; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .9em; border: 2px solid var(--line); border-radius: 10px; font-weight: 700; font-size: .92rem; background: #fff; cursor: pointer; }
.seg input:checked + span { background: var(--green); border-color: var(--green); color: #fff; }
.seg input:focus-visible + span { outline: 3px solid var(--coral); }
.minput { width: 100%; min-height: 48px; font: inherit; font-size: 1rem; padding: .4em .8em; border: 2px solid var(--line); border-radius: 10px; background: #fff; }
.minput:focus { border-color: var(--green); outline: none; }
textarea.minput { min-height: 84px; resize: vertical; }

/* 디자인 고르기 — 실제 표지를 작게 */
.dgroups { display: flex; flex-wrap: wrap; gap: 6px; }
.dgroups button { min-height: 38px; padding: 0 .85em; border: 2px solid var(--line); border-radius: 999px; background: #fff; font: inherit; font-weight: 800; font-size: .86rem; color: var(--ink); cursor: pointer; }
.dgroups button.on { background: var(--green); border-color: var(--green); color: #fff; }
.dgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 8px; }
.dmini { position: relative; display: block; cursor: pointer; min-width: 0; }
.dmini input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dmini__frame { display: block; position: relative; overflow: hidden; border: 2px solid var(--line); border-radius: 8px; background: #fff; aspect-ratio: var(--ar, 1240 / 1754); }
.dmini__frame .page { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; }
.dmini:hover .dmini__frame { border-color: var(--mute); }
.dmini input:checked + .dmini__frame { border-color: var(--coral); box-shadow: 0 0 0 3px var(--coral-l); }
.dmini input:focus-visible + .dmini__frame { outline: 3px solid var(--coral); }
.dmini__name { display: block; margin-top: 5px; font-size: .8rem; font-weight: 800; text-align: center; line-height: 1.25; }
.dsel { margin: 0; font-size: .88rem; color: var(--sub); line-height: 1.5; }
.dsel b { color: var(--ink); }
.dsel em { font-style: normal; color: var(--coral-d); }

/* 제품 고르기 */
.cats { display: flex; flex-wrap: wrap; gap: 6px; }
.cat { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 .85em; border: 2px solid var(--line); border-radius: 999px; background: #fff; font: inherit; font-weight: 800; font-size: .9rem; color: var(--ink); cursor: pointer; }
.cat b { min-width: 1.55em; height: 1.55em; padding: 0 .35em; border-radius: 999px; background: var(--coral); color: #fff; font-size: .74rem; display: inline-flex; align-items: center; justify-content: center; }
.cat b:empty { display: none; }
.cat.on { background: var(--green); border-color: var(--green); color: #fff; }
.picker { display: grid; gap: 12px; min-width: 0; }
.bigbtn { width: 100%; }
@media (max-width: 999px) { .bigbtn { display: none !important; } }
.picker-away { padding: 14px 16px; border: 2px dashed var(--coral); border-radius: 12px; background: #fff; font-weight: 700; color: var(--sub); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.picker-away[hidden] { display: none; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; max-height: 640px; overflow-y: auto; padding: 2px; }
.pcard { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 8px 8px 10px; border: 2px solid var(--line); border-radius: 12px; background: #fff; font: inherit; color: var(--ink); text-align: left; cursor: pointer; min-width: 0; }
.pcard:hover { border-color: var(--mute); }
.pcard__img { display: block; aspect-ratio: 1 / 1; background: #fff; border-radius: 6px; overflow: hidden; }
.pcard__img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pcard__m { font-size: .98rem; font-weight: 800; line-height: 1.25; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; }
.pcard__s { font-size: .76rem; color: var(--sub); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard__p { font-size: .86rem; font-weight: 800; color: var(--coral-d); line-height: 1.3; }
.pcard__ck { position: absolute; right: 8px; top: 8px; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--line); background: #fff; }
.pcard.on { border-color: var(--coral); box-shadow: 0 0 0 2px var(--coral-l); }
.pcard.on .pcard__ck { background: var(--coral); border-color: var(--coral); }
.pcard.on .pcard__ck::after { content: ''; position: absolute; left: 9px; top: 4px; width: 7px; height: 13px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); }
/* 큰 화면 고르기 (오른쪽 넓은 칸) */
.bigpick { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px 26px; display: grid; gap: 16px; min-width: 0; }
.bigpick[hidden], .pv-list[hidden] { display: none; }
.bigpick__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.bigpick__h { margin: 0; font-size: 1.6rem; font-weight: 900; }
.bigpick__top p { margin: 4px 0 0; color: var(--sub); }
.bigpick__top b { color: var(--coral-d); font-size: 1.1em; }
.bigpick .minput { max-width: 460px; min-height: 52px; font-size: 1.05rem; }
.bigpick .cat { min-height: 48px; font-size: 1rem; padding: 0 1em; }
.bigpick .cat b { font-size: .8rem; }
.bigpick .ptools .btn { min-height: 46px; font-size: .95rem; }
.bigpick .pgrid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; max-height: calc(100vh - 320px); min-height: 460px; }
.bigpick .pcard { padding: 10px 10px 12px; border-radius: 14px; }
.bigpick .pcard__m { font-size: 1.1rem; }
.bigpick .pcard__s { font-size: .86rem; }
.bigpick .pcard__p { font-size: 1rem; }
.bigpick .pcard__ck { width: 34px; height: 34px; }
.bigpick .pcard.on .pcard__ck::after { left: 11px; top: 5px; width: 8px; height: 15px; }
.pv-list { display: grid; gap: 22px; min-width: 0; }
@media (min-width: 1000px) { .maker.is-big { grid-template-columns: 1fr; } .maker.is-big .maker__side { display: none; } .maker.is-big .bigpick .pgrid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } }
.ptools { display: flex; flex-wrap: wrap; gap: 6px; }
.ptools .btn { min-height: 40px; font-size: .86rem; padding: 0 .8em; }
.ptools [hidden] { display: none; }
.pick__cnt { margin-left: auto; font-size: .82rem; color: var(--sub); font-weight: 700; white-space: nowrap; }

/* 더 꾸미기 */
.covers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.covers label { position: relative; cursor: pointer; }
.covers input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.covers span { aspect-ratio: 3 / 2; border-radius: 8px; overflow: hidden; border: 2px solid var(--line); background: var(--paper-2); display: flex; align-items: center; justify-content: center; text-align: center; font-size: .72rem; line-height: 1.2; color: var(--sub); font-weight: 800; }
.covers img { width: 100%; height: 100%; object-fit: cover; }
.covers input:checked + span { border-color: var(--coral); box-shadow: 0 0 0 3px var(--coral-l); }
.logo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.logo-row img { height: 44px; max-width: 160px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 2px; }
.upl { position: relative; overflow: hidden; cursor: pointer; }
.upl input { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.mix__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mix__grid label { display: grid; gap: 4px; font-size: .82rem; font-weight: 700; color: var(--sub); min-width: 0; }
.mix__grid select { min-height: 42px; border: 2px solid var(--line); border-radius: 10px; font: inherit; font-size: .9rem; padding: 0 .5em; background: #fff; color: var(--ink); min-width: 0; }
.opt > .btn--sm { justify-self: start; }
.mcheck { display: flex; gap: 8px; align-items: flex-start; font-size: .88rem; font-weight: 700; color: var(--sub); line-height: 1.45; cursor: pointer; }
.mcheck input { width: 20px; height: 20px; accent-color: var(--green); flex: 0 0 auto; margin-top: 1px; }
.mstep__body > .btn--sm { justify-self: start; }
.mstat { background: var(--green); color: #fff; border-radius: 12px; padding: 12px 16px; font-weight: 700; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .95rem; }
.mstat b { font-family: var(--serif); font-size: 1.25rem; }
.macts { display: grid; gap: 8px; }
.mprog { font-size: .9rem; color: var(--sub); min-height: 1.4em; margin: 0; }
.mprog.err { color: #c0392b; font-weight: 700; }
/* 저장 칸 (실버케어 홈페이지 사본) */
.uapply { position: relative; display: grid; gap: 9px; margin-top: 10px; }
.uapply__price { margin: 0; padding: 10px 12px; background: var(--paper); border-radius: 10px; font-size: .92rem; line-height: 1.5; }
.uapply .f { display: grid; gap: 4px; font-size: .86rem; font-weight: 800; }
.uapply .f i { color: var(--coral); font-style: normal; }
.uapply .f small { font-weight: 600; color: var(--sub); }
.uapply .minput { min-height: 44px; }
.uapply .mcheck a { color: var(--coral-d); }
.ua-payer[hidden] { display: none; }
.uapply__done { margin-top: 10px; background: var(--paper); border: 1px dashed var(--coral); border-radius: 10px; padding: 12px 14px; font-size: .92rem; line-height: 1.65; }
.unlock__ok { margin: 0; padding: 10px 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; font-size: .9rem; font-weight: 700; color: var(--green); }

/* 미리보기 */
.maker__preview { display: grid; gap: 22px; min-width: 0; }
.pv { display: grid; gap: 8px; }
.pv__bar { display: flex; align-items: center; gap: 10px; }
.pv__bar b { font-size: .95rem; }
.pv__bar .btn { min-height: 40px; font-size: .86rem; padding: 0 .8em; margin-left: auto; }
.pv__frame { position: relative; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 10px 28px rgba(60, 40, 20, .12); background: #fff; }
.pv__frame .page { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.pv__hint { margin: 0; padding: 14px 16px; background: var(--paper); border: 2px dashed var(--coral); border-radius: 12px; font-size: .95rem; color: var(--sub); }
.pv__hint b { color: var(--ink); }
#stage { position: absolute; left: -30000px; top: 0; }
#printStage { display: none; }

/* ═══ 카탈로그 페이지 공통 ═══ */
.page {
  --pad: 64px; --padb: 110px; --pg-r: 18px; --pg-on: #fff;
  --pg-h: 'Noto Sans KR', 'Malgun Gothic', sans-serif; --pg-hw: 900; --pg-hs: 1; --pg-ls: -.03em;
  --pg-num: 'Noto Serif KR', serif;
  --pg-band: var(--pg-primary); --pg-band-ink: var(--pg-on);
  position: relative; overflow: hidden; box-sizing: border-box; background: var(--pg-bg); color: var(--pg-ink);
  font-family: 'Noto Sans KR', 'Malgun Gothic', sans-serif; line-height: 1.4; word-break: keep-all;
}
.page * { box-sizing: border-box; }
.page small { color: inherit; } /* 사이트 공통 small 색(회색)이 카탈로그 안까지 들어오지 않게 */
.page img { display: block; }
.page--a4 { width: 1240px; height: 1754px; padding: 64px 64px 110px; font-size: 19px; }
.page--sns { --pad: 54px; --padb: 100px; width: 1080px; height: 1350px; padding: 54px 54px 100px; font-size: 18px; }
.pg-foot { position: absolute; left: var(--pad); right: var(--pad); bottom: 44px; display: flex; justify-content: space-between; align-items: center; font-size: 15px; color: var(--pg-sub); border-top: 1px solid var(--pg-line); padding-top: 12px; }
.page--sns .pg-foot { bottom: 38px; }
.pg-foot b { color: var(--pg-ink); }
.pg-foot .pg-no { font-family: var(--pg-num); font-weight: 900; font-size: 18px; color: var(--pg-accent); }
.pg-hand { font-family: 'Nanum Pen Script', cursive; font-weight: 400; color: var(--pg-accent); font-size: 1.9em; line-height: 1.1; display: inline-block; transform: rotate(-2deg); letter-spacing: 0; }
.pg-num, .pg-serif { font-family: var(--pg-num); font-weight: 900; }
.ph { background-color: var(--pg-paper); background-size: cover; background-position: center; background-repeat: no-repeat; }
.ph--contain { background-size: contain; background-color: #fff; }
.ph--none { display: flex; align-items: center; justify-content: center; background-color: var(--pg-tint); }
.ph--none .pg-hand { font-size: 56px; }

/* 글꼴 6가지 — 제목(--pg-h) · 숫자(--pg-num) */
.page[data-ft="gothic"] { --pg-h: 'Gothic A1', 'Noto Sans KR', sans-serif; --pg-num: 'Noto Sans KR', sans-serif; } /* 숫자는 본고딕 — Gothic A1 숫자는 PNG 저장에서 아래로 밀림 */
.page[data-ft="serif"] { --pg-h: 'Noto Serif KR', serif; --pg-ls: -.04em; }
.page[data-ft="hand"] { --pg-h: 'Nanum Pen Script', cursive; --pg-hw: 400; --pg-hs: 1.42; --pg-ls: 0; }
.page[data-ft="round"] { --pg-h: 'Jua', 'Noto Sans KR', sans-serif; --pg-hw: 400; --pg-num: 'Jua', 'Noto Sans KR', sans-serif; --pg-ls: -.02em; }
.page[data-ft="black"] { --pg-h: 'Black Han Sans', 'Noto Sans KR', sans-serif; --pg-hw: 400; --pg-num: 'Black Han Sans', 'Noto Sans KR', sans-serif; --pg-ls: -.01em; }

/* ── 품목 페이지 머리 (기본 = 밑줄) ── */
.pg-head { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: end; padding-bottom: 18px; border-bottom: 3px solid var(--pg-ink); margin-bottom: 28px; position: relative; }
.pg-head__no { font-family: var(--pg-num); font-weight: 900; font-size: 50px; line-height: 1; color: var(--pg-accent); }
.pg-head__title { font-family: var(--pg-h); font-weight: var(--pg-hw); font-size: calc(40px * var(--pg-hs)); line-height: 1.1; letter-spacing: var(--pg-ls); }
.pg-head__sub { font-size: 16px; color: var(--pg-sub); margin-top: 6px; }
.pg-head__chip { background: var(--pg-primary); color: var(--pg-on); border-radius: 999px; padding: 7px 16px; font-size: 15px; font-weight: 800; white-space: nowrap; }
.pg-head__chip.is-rent { background: var(--pg-accent); color: #fff; }
.page--sns .pg-head__title { font-size: calc(38px * var(--pg-hs)); }
.page--sns .pg-head__no { font-size: 46px; }
/* 색 띠 */
.page[data-hd="band"] .pg-head { margin: calc(var(--pad) * -1) calc(var(--pad) * -1) 30px; padding: 46px var(--pad) 26px; background: var(--pg-primary); color: var(--pg-on); border-bottom: 0; }
.page[data-hd="band"] .pg-head__no { color: var(--pg-hl); }
.page[data-hd="band"] .pg-head__sub { color: inherit; opacity: .82; }
.page[data-hd="band"] .pg-head__chip { background: var(--pg-paper); color: var(--pg-ink); }
.page[data-hd="band"] .pg-head__chip.is-rent { background: var(--pg-accent); color: #fff; }
/* 동그라미 번호 */
.page[data-hd="tab"] .pg-head { align-items: center; border-bottom: 3px dashed var(--pg-dash); }
.page[data-hd="tab"] .pg-head__no { width: 88px; height: 88px; border-radius: 50%; background: var(--pg-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 36px; }
/* 옆 막대 */
.page[data-hd="side"] .pg-head { grid-template-columns: 1fr auto; gap: 4px 18px; align-items: center; border-bottom: 0; border-left: 14px solid var(--pg-accent); background: var(--pg-paper); border-radius: 0 var(--pg-r) var(--pg-r) 0; padding: 18px 26px 18px 26px; }
.page[data-hd="side"] .pg-head__no { grid-column: 1; grid-row: 1; font-size: 20px; letter-spacing: .2em; color: var(--pg-sub); }
.page[data-hd="side"] .pg-head > div:nth-child(2) { grid-column: 1; grid-row: 2; }
.page[data-hd="side"] .pg-head__chip { grid-column: 2; grid-row: 1 / span 2; }
/* 리본 */
.page[data-hd="ribbon"] .pg-head { align-items: center; border-bottom: 0; padding-bottom: 6px; }
.page[data-hd="ribbon"] .pg-head__no { font-size: 92px; color: var(--pg-line); line-height: .8; }
.page[data-hd="ribbon"] .pg-head__title { display: inline-block; background: var(--pg-accent); color: #fff; padding: 8px 30px 10px; border-radius: 999px; }
.page[data-hd="ribbon"] .pg-head__sub { margin-left: 20px; }
/* 잡지형 */
.page[data-hd="mag"] .pg-head { grid-template-columns: 1fr auto; gap: 6px 18px; border-bottom: 6px double var(--pg-ink); }
.page[data-hd="mag"] .pg-head__no { grid-column: 1; grid-row: 1; font-size: 20px; letter-spacing: .18em; color: var(--pg-accent); }
.page[data-hd="mag"] .pg-head > div:nth-child(2) { grid-column: 1; grid-row: 2; }
.page[data-hd="mag"] .pg-head__chip { grid-column: 2; grid-row: 1 / span 2; background: transparent; color: var(--pg-ink); border: 2px solid var(--pg-ink); }
.page[data-hd="mag"] .pg-head__title { font-size: calc(48px * var(--pg-hs)); }

/* ── 상품 배치 A 격자형 ── */
.pg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.page--sns .pg-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
.pc2 { background: var(--pg-paper); border: 1px solid var(--pg-line); border-radius: var(--pg-r); padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 8px; position: relative; min-width: 0; }
.pc2__img { aspect-ratio: 1 / 1; background: #fff; border-radius: calc(var(--pg-r) - 6px); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.pc2__img img { width: 100%; height: 100%; object-fit: contain; }
.page--sns .pc2__img { width: 56%; margin: 0 auto; }
.pc2__badge { position: absolute; left: 14px; top: 14px; z-index: 2; background: var(--pg-accent); color: #fff; font-size: 14px; font-weight: 800; padding: 3px 10px; border-radius: 999px; }
.pc2__badge--2 { left: auto; right: 14px; background: var(--pg-primary); color: var(--pg-on); }
.pc2__model { font-size: 22px; font-weight: 900; letter-spacing: -.02em; line-height: 1.2; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc2__spec { font-size: 13px; color: var(--pg-sub); line-height: 1.4; min-height: 1.4em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc2__price { border-top: 1px dashed var(--pg-dash); padding-top: 8px; margin-top: auto; display: grid; grid-template-columns: 1fr auto; align-items: end; position: relative; }
.pc2__label { font-size: 12px; color: var(--pg-sub); font-weight: 700; letter-spacing: .02em; }
.pc2__mine { font-family: var(--pg-num); font-weight: 900; font-size: 28px; color: var(--pg-accent); line-height: 1.05; }
.pc2__mine small { font-family: 'Noto Sans KR', sans-serif; font-size: 14px; color: var(--pg-ink); font-weight: 800; }
.pc2__list { font-size: 12px; color: var(--pg-sub); text-align: right; line-height: 1.35; }
.pc2__list s { display: block; font-size: 14px; }
.pc2__rates { display: flex; gap: 6px; }
.pc2__rates span { flex: 1; background: var(--pg-bg); border-radius: 6px; padding: 4px 6px; font-size: 12px; text-align: center; color: var(--pg-sub); }
.pc2__rates b { display: block; font-size: 14px; color: var(--pg-ink); }

/* ── B 큰 사진형 ── */
.pg-big { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.page--sns .pg-big { grid-template-columns: 1fr; gap: 18px; }
.pb { background: var(--pg-paper); border: 1px solid var(--pg-line); border-radius: var(--pg-r); padding: 20px; display: grid; grid-template-columns: 220px 1fr; gap: 18px; position: relative; min-width: 0; }
.page--sns .pb { grid-template-columns: 240px 1fr; }
.pb__img { aspect-ratio: 1 / 1; background: #fff; border-radius: calc(var(--pg-r) - 6px); overflow: hidden; display: flex; align-items: center; justify-content: center; align-self: start; }
.pb__img img { width: 100%; height: 100%; object-fit: contain; }
.pb__info { min-width: 0; }
.pb__model { font-size: 26px; font-weight: 900; letter-spacing: -.02em; line-height: 1.15; overflow-wrap: anywhere; }
.pb__kind { font-size: 14px; color: var(--pg-sub); font-weight: 700; margin-bottom: 4px; }
.pb__spec { list-style: none; padding: 0; margin: 8px 0 0; font-size: 13px; }
.pb__spec li { display: grid; grid-template-columns: 54px 1fr; gap: 8px; padding: 4px 0; border-top: 1px dashed var(--pg-dash); color: var(--pg-sub); line-height: 1.35; }
.pb__spec b { color: var(--pg-ink); }
.pb__price { margin-top: 10px; display: grid; grid-template-columns: 1fr auto; align-items: end; border-top: 2px solid var(--pg-ink); padding-top: 8px; position: relative; }
.pb__mine { font-family: var(--pg-num); font-weight: 900; font-size: 32px; color: var(--pg-accent); line-height: 1; }
.pb__mine small { font-family: 'Noto Sans KR', sans-serif; font-size: 16px; color: var(--pg-ink); font-weight: 800; }
.pb__list { font-size: 14px; color: var(--pg-sub); text-align: right; }
.pb__rates { display: flex; gap: 6px; margin-top: 8px; }
.pb__rates span { flex: 1; background: var(--pg-bg); border-radius: 6px; padding: 5px 6px; font-size: 13px; text-align: center; color: var(--pg-sub); }
.pb__rates b { display: block; font-size: 17px; color: var(--pg-ink); }

/* ── C 가격표형 ── */
.pg-table { width: 100%; border-collapse: collapse; background: var(--pg-paper); border-radius: var(--pg-r); overflow: hidden; font-size: 16px; }
.pg-table th { background: var(--pg-primary); color: var(--pg-on); font-size: 15px; padding: 12px 10px; text-align: left; }
.pg-table td { padding: 8px 10px; border-bottom: 1px solid var(--pg-line); vertical-align: middle; }
.pg-table td img { width: 72px; height: 72px; object-fit: contain; background: #fff; border-radius: 8px; border: 1px solid var(--pg-line); }
.pg-table .r { text-align: right; white-space: nowrap; }
.pg-table .mine { font-family: var(--pg-num); font-weight: 900; color: var(--pg-accent); font-size: 20px; }
.pg-table small { color: var(--pg-sub); display: block; font-size: 13px; line-height: 1.3; }
.pg-table b.model { font-size: 18px; }

/* ── 상품 카드 7가지 (기본 = soft) ── */
/* 그림자 */
.page[data-cd="shadow"] .pc2, .page[data-cd="shadow"] .pb { border: 1px solid var(--pg-line); border-bottom: 6px solid var(--pg-line); }
.page[data-cd="shadow"] .pc2__img, .page[data-cd="shadow"] .pb__img { padding: 9%; background: var(--pg-tint); }
.page[data-cd="shadow"] .pg-table { border-bottom: 6px solid var(--pg-line); }
/* 티켓 — 가격 칸에 점선 절취선과 반원 홈 */
.page[data-cd="ticket"] .pc2 { overflow: hidden; }
.page[data-cd="ticket"] .pc2__price { margin: 8px -16px 0; padding: 12px 16px 10px; background: var(--pg-tint); border-top: 2px dashed var(--pg-dash); }
.page[data-cd="ticket"] .pc2__price:last-child { margin-bottom: -14px; padding-bottom: 14px; }
.page[data-cd="ticket"] .pc2__price::before, .page[data-cd="ticket"] .pc2__price::after { content: ''; position: absolute; top: -13px; width: 24px; height: 24px; border-radius: 50%; background: var(--pg-bg); }
.page[data-cd="ticket"] .pc2__price::before { left: -12px; }
.page[data-cd="ticket"] .pc2__price::after { right: -12px; }
.page[data-cd="ticket"] .pc2__rates { margin: 0 -16px -14px; padding: 2px 16px 14px; background: var(--pg-tint); }
.page[data-cd="ticket"] .pc2__rates span { background: var(--pg-paper); }
.page[data-cd="ticket"] .pb__price { background: var(--pg-tint); border-top: 2px dashed var(--pg-dash); padding: 10px 12px; border-radius: 0 0 10px 10px; }
/* 가격 꼬리표 */
.page[data-cd="tag"] .pc2__price, .page[data-cd="tag"] .pb__price { border: 0; background: var(--pg-accent); color: #fff; border-radius: 12px 40px 40px 12px; padding: 10px 22px 10px 30px; }
.page[data-cd="tag"] .pc2__price::before, .page[data-cd="tag"] .pb__price::before { content: ''; position: absolute; left: 11px; top: 50%; width: 11px; height: 11px; margin-top: -6px; border-radius: 50%; background: var(--pg-paper); }
.page[data-cd="tag"] .pc2__mine, .page[data-cd="tag"] .pc2__mine small, .page[data-cd="tag"] .pb__mine, .page[data-cd="tag"] .pb__mine small { color: #fff; }
.page[data-cd="tag"] .pc2__label, .page[data-cd="tag"] .pc2__list, .page[data-cd="tag"] .pb__list { color: rgba(255, 255, 255, .88); }
/* 굵은 선 */
.page[data-cd="bold"] .pc2, .page[data-cd="bold"] .pb { border: 3px solid var(--pg-ink); border-right-width: 9px; border-bottom-width: 9px; border-radius: 8px; overflow: hidden; } /* 그림자 대신 굵은 오른쪽 · 아래 선 — PNG 저장(html2canvas)에서 그림자가 카드 안을 검게 칠하던 문제 */
.page[data-cd="bold"] .pg-grid, .page[data-cd="bold"] .pg-big { gap: 26px; }
.page[data-cd="bold"] .pc2__price { margin: 8px -16px 0; padding: 12px 16px; background: var(--pg-primary); color: var(--pg-on); border-top: 3px solid var(--pg-ink); }
.page[data-cd="bold"] .pc2__price:last-child { margin-bottom: -14px; }
.page[data-cd="bold"] .pc2__mine, .page[data-cd="bold"] .pc2__mine small { color: var(--pg-on); }
.page[data-cd="bold"] .pc2__label, .page[data-cd="bold"] .pc2__list { color: var(--pg-on); opacity: .82; }
.page[data-cd="bold"] .pb__price { border-top: 3px solid var(--pg-ink); }
.page[data-cd="bold"] .pg-table { border: 3px solid var(--pg-ink); border-radius: 8px; }
/* 사진 강조 — 사진이 카드 끝까지 */
.page[data-cd="photo"] .pc2 { padding: 0; overflow: hidden; border: 1px solid var(--pg-line); }
.page[data-cd="photo"] .pc2__img { border-radius: 0; }
.page[data-cd="photo"] .pc2 > .pc2__model, .page[data-cd="photo"] .pc2 > .pc2__spec, .page[data-cd="photo"] .pc2 > .pc2__price, .page[data-cd="photo"] .pc2 > .pc2__rates { margin-left: 16px; margin-right: 16px; }
.page[data-cd="photo"] .pc2 > :last-child { margin-bottom: 14px; }
.page[data-cd="photo"] .pc2__price { border-top: 2px solid var(--pg-ink); }
.page[data-cd="photo"] .pc2__model { margin-top: 2px; }
.page[data-cd="photo"] .pb { padding: 0; overflow: hidden; border: 1px solid var(--pg-line); grid-template-columns: 240px 1fr; }
.page[data-cd="photo"] .pb__img { border-radius: 0; align-self: stretch; aspect-ratio: auto; }
.page[data-cd="photo"] .pb__info { padding: 18px 18px 16px 0; }
/* 동그란 사진 */
.page[data-cd="circle"] .pc2 { text-align: center; }
.page[data-cd="circle"] .pc2__img { width: 76%; margin: 4px auto 0; border-radius: 50%; border: 8px solid var(--pg-tint); }
.page--sns[data-cd="circle"] .pc2__img { width: 54%; }
.page[data-cd="circle"] .pc2__price { grid-template-columns: 1fr; justify-items: center; gap: 2px; }
.page[data-cd="circle"] .pc2__list { text-align: center; }
.page[data-cd="circle"] .pc2__list s { display: inline; margin-left: 4px; }
.page[data-cd="circle"] .pb__img { border-radius: 50%; border: 8px solid var(--pg-tint); }

/* ── 큰 글씨 ── */
.page[data-big="1"] .pg-grid { grid-template-columns: repeat(2, 1fr); gap: 26px; }
.page[data-big="1"] .pc2__model { font-size: 30px; }
.page[data-big="1"] .pc2__spec { font-size: 17px; }
.page[data-big="1"] .pc2__label { font-size: 15px; }
.page[data-big="1"] .pc2__mine { font-size: 42px; }
.page[data-big="1"] .pc2__mine small { font-size: 19px; }
.page[data-big="1"] .pc2__list { font-size: 15px; }
.page[data-big="1"] .pc2__list s { font-size: 18px; }
.page[data-big="1"] .pc2__rates span { font-size: 15px; padding: 6px; }
.page[data-big="1"] .pc2__rates b { font-size: 19px; }
.page[data-big="1"] .pc2__img { width: 74%; margin-left: auto; margin-right: auto; }
.page--sns[data-big="1"] .pc2__img { width: 70%; }
.page[data-big="1"] .pb__model { font-size: 34px; }
.page[data-big="1"] .pb__kind, .page[data-big="1"] .pb__spec { font-size: 17px; }
.page[data-big="1"] .pb__mine { font-size: 44px; }
.page[data-big="1"] .pb__mine small { font-size: 20px; }
.page[data-big="1"] .pb__list { font-size: 17px; }
.page[data-big="1"] .pb__rates span { font-size: 16px; }
.page[data-big="1"] .pb__rates b { font-size: 21px; }
.page[data-big="1"] .pg-big { grid-template-columns: 1fr; }
.page[data-big="1"] .pb { grid-template-columns: 300px 1fr; }
.page--sns[data-big="1"] .pb { grid-template-columns: 280px 1fr; }
.page[data-big="1"] .pg-table { font-size: 21px; }
.page[data-big="1"] .pg-table th { font-size: 18px; }
.page[data-big="1"] .pg-table td img { width: 92px; height: 92px; }
.page[data-big="1"] .pg-table .mine { font-size: 28px; }
.page[data-big="1"] .pg-table small { font-size: 16px; }
.page[data-big="1"] .pg-table b.model { font-size: 23px; }
.page[data-big="1"] .pg-head__title { font-size: calc(50px * var(--pg-hs)); }
.page[data-big="1"] .pg-head__sub { font-size: 19px; }
.page[data-big="1"] .pg-head__chip { font-size: 18px; }
.page[data-big="1"] .pg-foot { font-size: 18px; }

/* ═══ 표지 12가지 (기본 = classic) ═══ */
.cv { display: flex; flex-direction: column; height: 100%; position: relative; }
.cv__brand { font-size: 24px; font-weight: 900; letter-spacing: -.02em; display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.cv__brand::before { content: ''; width: 16px; height: 16px; border-radius: 50%; background: var(--pg-accent); flex: 0 0 auto; }
.cv__brand--logo::before { display: none; }
.cv__brand img, .cv__chip img, .cv__mast img { max-height: 56px; max-width: 260px; width: auto; height: auto; }
.cv__photo { margin: 30px 0 34px; border-radius: calc(var(--pg-r) + 10px); aspect-ratio: 16 / 10; flex: 0 0 auto; }
.cv__hand { margin-bottom: 8px; align-self: flex-start; }
.cv__title { font-family: var(--pg-h); font-weight: var(--pg-hw); font-size: calc(72px * var(--pg-hs) * var(--tk, 1)); line-height: 1.12; letter-spacing: calc(var(--pg-ls) - .01em); }
.cv__title em { font-style: normal; color: var(--pg-accent); }
.cv__year { font-family: var(--pg-num); font-weight: 900; font-size: 22px; color: var(--pg-sub); margin-top: 8px; }
.cv__lead { font-size: 21px; color: var(--pg-sub); margin-top: 22px; max-width: 30em; line-height: 1.5; }
.cv__tel { margin-top: auto; display: flex; align-items: center; gap: 22px; background: var(--pg-primary); color: var(--pg-on); border-radius: var(--pg-r); padding: 22px 30px; flex: 0 0 auto; }
.cv__tel small { font-size: 18px; font-weight: 700; white-space: nowrap; } /* 투명도(opacity)는 PNG 저장에서 흐리게 나와 쓰지 않음 */
.cv__tel b { font-family: var(--pg-num); font-weight: 900; font-size: 44px; line-height: 1; white-space: nowrap; }
.cv__tel span { margin-left: auto; font-size: 16px; text-align: right; line-height: 1.4; max-width: 34%; }
.page--sns .cv__tel { flex-wrap: wrap; gap: 8px 18px; }
.page--sns .cv__tel span { margin-left: 0; max-width: none; text-align: left; flex-basis: 100%; }
.page--sns .cv__title { font-size: calc(64px * var(--pg-hs) * var(--tk, 1)); }
.page--sns .cv__photo { margin: 22px 0 24px; }
.cv__tile { background: var(--pg-paper); border: 1px solid var(--pg-line); border-radius: var(--pg-r); padding: 14px 14px 10px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cv__tile .ph { flex: 1 1 auto; min-height: 0; border-radius: calc(var(--pg-r) - 6px); }
.cv__tile span { font-size: 17px; font-weight: 800; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 표지 제품 사진 띠 */
.cv__strip { flex: 1 1 0; min-height: 0; max-height: 300px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 26px; }
.cv__strip .cv__tile { min-height: 0; }
.cv__strip + .cv__tel { margin-top: 24px; }
.page--sns .cv__strip { max-height: 230px; gap: 10px; margin-top: 18px; }
.page--sns .cv__strip + .cv__tel { margin-top: 18px; }
.page--sns .cv__strip .cv__tile { padding: 8px 8px 6px; }
.page--sns .cv__strip .cv__tile span { font-size: 14px; }
.cv--circle .cv__strip { align-self: stretch; }

/* 사진 가득 */
.cv--bleed .cv__hero { position: relative; margin: calc(var(--pad) * -1) calc(var(--pad) * -1) 36px; height: 52%; flex: 0 0 auto; }
.cv--bleed .cv__hero .ph { position: absolute; left: 0; top: 0; right: 0; bottom: 0; }
.cv__chip { position: absolute; left: var(--pad); top: calc(var(--pad) - 8px); background: var(--pg-paper); color: var(--pg-ink); border-radius: 999px; padding: 12px 26px; font-weight: 900; font-size: 24px; display: flex; align-items: center; gap: 10px; }
.cv__chip img { max-height: 46px; }
.page--sns .cv--bleed .cv__hero { height: 46%; margin-bottom: 26px; }

/* 색 띠 제목 */
.cv--band .cv__band { margin: calc(var(--pad) * -1) calc(var(--pad) * -1) 0; padding: var(--pad) var(--pad) 170px; background: var(--pg-band); color: var(--pg-band-ink); flex: 0 0 auto; }
.cv--band .cv__band .cv__hand { color: inherit; opacity: .9; margin-top: 34px; }
.cv--band .cv__band .cv__year { color: inherit; opacity: .78; }
.cv--band .cv__photo { margin: -130px 0 0; aspect-ratio: 16 / 9; border: 8px solid var(--pg-paper); border-radius: calc(var(--pg-r) + 6px); }
.cv--band .cv__lead { margin-top: 26px; }
.page--sns .cv--band .cv__band { padding-bottom: 150px; }
.page--sns .cv--band .cv__band .cv__hand { margin-top: 20px; }
.page--sns .cv--band .cv__photo { margin-top: -115px; }

/* 동그란 사진 */
.cv--circle { align-items: center; text-align: center; }
.cv--circle .cv__brand { justify-content: center; }
.cv__ring { position: relative; width: 700px; height: 700px; border-radius: 50%; padding: 18px; border: 4px solid var(--pg-accent); margin: 28px 0 30px; flex: 0 0 auto; }
.cv__ring .ph { width: 100%; height: 100%; border-radius: 50%; }
.cv__dot { position: absolute; border-radius: 50%; background: var(--pg-hl); }
.cv__dot--1 { width: 96px; height: 96px; right: -14px; top: 46px; }
.cv__dot--2 { width: 42px; height: 42px; left: 26px; bottom: 86px; background: var(--pg-accent); }
.cv__dot--3 { width: 24px; height: 24px; right: 70px; bottom: 12px; background: var(--pg-primary); }
.cv--circle .cv__hand { align-self: center; }
.cv--circle .cv__lead { margin-left: auto; margin-right: auto; }
.cv--circle .cv__tel { align-self: stretch; text-align: left; }
.page--sns .cv__ring { width: 470px; height: 470px; padding: 14px; margin: 18px 0 18px; }
.page--sns .cv__dot--1 { width: 70px; height: 70px; top: 26px; }

/* 아치 창 */
.cv--arch .cv__top { display: flex; justify-content: space-between; align-items: center; flex: 0 0 auto; }
.cv--arch .cv__top .cv__year { margin: 0; }
.cv__archwrap { position: relative; margin: 30px auto 34px; width: 84%; flex: 0 0 auto; }
.cv__arch { width: 100%; height: 820px; border-radius: 470px 470px 26px 26px; }
.cv__sticker { position: absolute; right: -34px; bottom: 64px; width: 190px; height: 190px; border-radius: 50%; background: var(--pg-accent); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; transform: rotate(-8deg); border: 5px solid #fff; }
.cv__sticker small { display: block; font-size: 21px; font-weight: 800; line-height: 1.3; }
.cv__sticker b { font-family: var(--pg-num); font-weight: 900; font-size: 56px; line-height: 1.25; }
.page--sns .cv__archwrap { margin: 20px auto 22px; width: 80%; }
.page--sns .cv__arch { height: 540px; }
.page--sns .cv__sticker { width: 150px; height: 150px; right: -26px; }
.page--sns .cv__sticker b { font-size: 44px; }
.page--sns .cv__sticker small { font-size: 18px; }

/* 폴라로이드 */
.cv--polaroid::before { content: ''; position: absolute; left: calc(var(--pad) * -1); right: calc(var(--pad) * -1); top: calc(var(--pad) * -1); bottom: calc(var(--padb) * -1); background-image: radial-gradient(var(--pg-line) 2.5px, transparent 3px); background-size: 34px 34px; }
.cv--polaroid > * { position: relative; }
.cv__pola { background: #fff; padding: 26px 26px 0; width: 86%; margin: 34px auto 40px; transform: rotate(-2.5deg); border: 1px solid var(--pg-line); flex: 0 0 auto; }
.cv__pola .ph { width: 100%; aspect-ratio: 4 / 3; }
.cv__cap { display: block; text-align: center; padding: 12px 0 18px; font-size: 52px; transform: none; }
.cv__tape { position: absolute; left: 50%; top: -22px; width: 200px; height: 46px; margin-left: -100px; background: var(--pg-hl); opacity: .8; transform: rotate(3deg); z-index: 2; }
.page--sns .cv__pola { width: 76%; margin: 22px auto 26px; padding: 20px 20px 0; }
.page--sns .cv__cap { font-size: 40px; padding: 6px 0 10px; }

/* 상품 모음 */
.cv__mosaic { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 300px; gap: 16px; margin: 28px 0 26px; flex: 0 0 auto; }
.cv__mo-main { grid-column: span 2; grid-row: span 2; border-radius: var(--pg-r); }
.page--sns .cv__mosaic { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 225px; gap: 12px; margin: 20px 0 20px; }
.page--sns .cv__tile { padding: 10px 10px 8px; }
.page--sns .cv__tile span { font-size: 15px; }

/* 잡지 표지 */
.cv--magazine .cv__mast { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--pg-ink); padding-bottom: 12px; font-weight: 900; font-size: 22px; letter-spacing: .04em; flex: 0 0 auto; }
.cv--magazine .cv__mast img { max-height: 44px; }
.cv--magazine .cv__title { font-size: calc(118px * var(--pg-hs) * var(--tk, 1)); line-height: 1.02; margin: 24px 0 26px; letter-spacing: calc(var(--pg-ls) - .02em); }
.cv--magazine .cv__title em { display: block; }
.cv__magph { position: relative; margin: 0 calc(var(--pad) * -1); flex: 1 1 auto; min-height: 300px; }
.cv__magph .ph { position: absolute; left: 0; top: 0; right: 0; bottom: 0; }
.cv__shade { position: absolute; left: 0; right: 0; bottom: 0; height: 62%; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .64)); }
.cv__lines { position: absolute; left: var(--pad); bottom: 34px; list-style: none; margin: 0; padding: 0; color: #fff; font-size: 24px; line-height: 1.5; }
.cv__lines b { font-weight: 900; }
.cv__lines-k { display: inline-block; font-size: 16px; letter-spacing: .12em; opacity: .9; margin-bottom: 8px; border-bottom: 3px solid var(--pg-accent); padding-bottom: 4px; }
.cv--magazine .cv__lead { margin-top: 24px; }
.cv--magazine .cv__tel { margin-top: 24px; }
.page--sns .cv--magazine .cv__title { font-size: calc(92px * var(--pg-hs) * var(--tk, 1)); margin: 18px 0 18px; }
.page--sns .cv__lines { font-size: 21px; bottom: 24px; }
.page--sns .cv--magazine .cv__lead { margin-top: 18px; }
.page--sns .cv--magazine .cv__tel { margin-top: 18px; }

/* 전단 포스터 */
.cv__poster { position: relative; margin: 30px 0 32px; flex: 0 0 auto; }
.cv--poster .cv__title { font-size: calc(150px * var(--pg-hs) * var(--tk, 1)); line-height: 1; letter-spacing: calc(var(--pg-ls) - .03em); max-width: 76%; }
.cv--poster .cv__title em { display: block; }
.cv__burst { position: absolute; right: 0; top: 0; width: 250px; height: 250px; border-radius: 50%; background: var(--pg-hl); color: var(--pg-ink); border: 5px solid var(--pg-ink); display: flex; flex-direction: column; align-items: center; justify-content: center; transform: rotate(10deg); }
.cv__burst small { display: block; font-size: 22px; font-weight: 800; line-height: 1.3; }
.cv__burst b { font-family: var(--pg-num); font-weight: 900; font-size: 74px; line-height: 1.25; color: var(--pg-accent); }
.cv__chips { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; flex: 0 0 auto; }
.cv__chips li { background: var(--pg-primary); color: var(--pg-on); border-radius: 999px; padding: 8px 18px; font-size: 20px; font-weight: 800; }
.cv__inset { flex: 1 1 auto; min-height: 240px; border-radius: var(--pg-r); border: 4px solid var(--pg-ink); }
.cv--poster .cv__lead { margin-top: 22px; }
.cv--poster .cv__tel { margin-top: 22px; }
.page--sns .cv__poster { margin: 20px 0 16px; }
.page--sns .cv--poster .cv__title { font-size: calc(116px * var(--pg-hs) * var(--tk, 1)); }
.page--sns .cv__burst { width: 196px; height: 196px; }
.page--sns .cv__burst b { font-size: 58px; }
.page--sns .cv__burst small { font-size: 18px; }
.page--sns .cv__chips { margin-bottom: 16px; gap: 8px; }
.page--sns .cv__chips li { font-size: 17px; padding: 6px 14px; }
.page--sns .cv--poster .cv__lead { margin-top: 16px; }
.page--sns .cv--poster .cv__tel { margin-top: 16px; }

/* 액자 · 낙관 */
.cv__frame { flex: 1 1 auto; margin: -16px; border: 7px double var(--pg-primary); padding: 44px 54px 34px; display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--pg-paper); }
.cv__frame .cv__brand { justify-content: center; }
.cv__frame .cv__year { margin: 8px 0 20px; }
.cv__frame .cv__hand { align-self: center; margin: 10px 0 0; }
.cv__frame .cv__photo { width: 100%; margin: 26px 0 22px; border-radius: var(--pg-r); }
.cv__frame .cv__lead { margin: 0 auto; }
.cv__foot { margin-top: auto; width: 100%; display: flex; align-items: center; gap: 24px; }
.cv__foot .cv__tel { flex: 1 1 auto; margin-top: 0; text-align: left; }
.cv__seal { flex: 0 0 auto; width: 120px; height: 120px; background: var(--pg-accent); color: #fff; border-radius: 12px; display: flex; align-items: center; justify-content: center; padding: 10px; text-align: center; font-family: 'Noto Serif KR', serif; font-weight: 900; font-size: 46px; line-height: 1.02; letter-spacing: 0; word-break: break-all; transform: rotate(-4deg); }
.cv__seal--4 { font-size: 40px; }
.page--sns .cv__frame { padding: 30px 34px 26px; }
.page--sns .cv__frame .cv__photo { aspect-ratio: 16 / 9; margin: 16px 0 14px; }
.page--sns .cv__frame .cv__year { margin: 6px 0 12px; }
.page--sns .cv__seal { width: 100px; height: 100px; font-size: 38px; }
.page--sns .cv__seal--4 { font-size: 34px; }

/* 소식지 */
.cv--news .cv__mast { text-align: center; border-top: 3px solid var(--pg-ink); border-bottom: 1px solid var(--pg-ink); padding: 12px 0 8px; flex: 0 0 auto; }
.cv--news .cv__mast b { font-family: 'Noto Serif KR', serif; font-weight: 900; line-height: 1.12; letter-spacing: -.03em; white-space: nowrap; }
.cv__dateline { display: flex; justify-content: space-between; gap: 12px; border-bottom: 4px double var(--pg-ink); padding: 8px 2px; font-size: 17px; font-weight: 700; color: var(--pg-sub); flex: 0 0 auto; }
.cv__headline { font-family: var(--pg-h); font-weight: var(--pg-hw); font-size: calc(66px * var(--pg-hs) * var(--tk, 1)); line-height: 1.12; letter-spacing: var(--pg-ls); margin: 26px 0 22px; flex: 0 0 auto; }
.cv__news { display: grid; grid-template-columns: 1.55fr 1fr; gap: 28px; flex: 1 1 auto; min-height: 0; }
.cv__newsph { margin: 0; display: flex; flex-direction: column; min-height: 0; }
.cv__newsph .ph { flex: 1 1 auto; min-height: 280px; }
.cv__newsph figcaption { font-size: 14px; color: var(--pg-sub); padding: 6px 0; border-bottom: 1px solid var(--pg-line); }
.cv__newscol { border-left: 1px solid var(--pg-line); padding-left: 24px; font-size: 19px; line-height: 1.65; min-width: 0; }
.cv__newscol p { margin: 0 0 16px; }
.cv__newscol ul { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--pg-ink); }
.cv__newscol li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--pg-dash); font-size: 18px; }
.cv__newscol li span { color: var(--pg-accent); font-weight: 800; }
.cv--news .cv__tel { margin-top: 24px; }
.page--sns .cv__headline { font-size: calc(52px * var(--pg-hs) * var(--tk, 1)); margin: 18px 0 16px; }
.page--sns .cv__news { grid-template-columns: 1.3fr 1fr; gap: 20px; }
.page--sns .cv__newscol { font-size: 16px; padding-left: 18px; }
.page--sns .cv__newscol li { font-size: 15px; padding: 5px 0; }
.page--sns .cv__dateline { font-size: 15px; }
.page--sns .cv--news .cv__tel { margin-top: 18px; }

/* 좌우 나눔 */
.cv--split { position: absolute; left: 0; top: 0; right: 0; bottom: 0; height: auto; display: grid; grid-template-columns: 44% 56%; }
.cv__col { background: var(--pg-primary); color: var(--pg-on); padding: var(--pad) 46px var(--pad) var(--pad); display: flex; flex-direction: column; min-width: 0; }
.cv__col .cv__brand::before { background: var(--pg-hl); }
.cv__col .cv__hand { color: inherit; opacity: .9; margin-top: 70px; }
.cv__col .cv__title { font-size: calc(70px * var(--pg-hs) * var(--tk, 1)); }
.cv__col .cv__title em { display: block; color: var(--pg-hl); }
.cv__col .cv__year, .cv__col .cv__lead { color: inherit; opacity: .86; }
.cv__col .cv__tel { background: var(--pg-paper); color: var(--pg-ink); flex-direction: column; align-items: flex-start; gap: 6px; padding: 22px 24px; }
.cv__col .cv__tel b { font-size: 40px; color: var(--pg-accent); }
.cv__col .cv__tel span { margin-left: 0; max-width: none; text-align: left; }
.cv__side { display: flex; flex-direction: column; background: var(--pg-bg); min-width: 0; }
.cv__sideph { flex: 1 1 auto; }
.cv__minis { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 22px; flex: 0 0 auto; }
.cv__minis .cv__tile { height: 300px; }
.page--sns .cv__col { padding: var(--pad) 36px var(--pad) var(--pad); }
.page--sns .cv__col .cv__hand { margin-top: 40px; }
.page--sns .cv__col .cv__title { font-size: calc(60px * var(--pg-hs) * var(--tk, 1)); }
.page--sns .cv__col .cv__tel b { font-size: 34px; }
.page--sns .cv__minis { gap: 14px; padding: 16px; }
.page--sns .cv__minis .cv__tile { height: 230px; }
.page--sns .cv__col .cv__lead { font-size: 18px; }

/* ── 안내 페이지 ── */
.gd { display: grid; gap: 26px; }
.gd__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.gd__box { background: var(--pg-paper); border: 1px solid var(--pg-line); border-radius: var(--pg-r); padding: 22px 24px; }
.gd__box h3 { margin: 0 0 12px; font-family: var(--pg-h); font-weight: var(--pg-hw); font-size: calc(22px * var(--pg-hs)); }
.gd__box h3 .pg-num { color: var(--pg-accent); margin-right: 8px; font-size: 22px; }
.gd__p { margin: 10px 0 0; font-size: 15px; color: var(--pg-sub); line-height: 1.5; }
.gd__rates { width: 100%; border-collapse: collapse; font-size: 17px; }
.gd__rates td { padding: 8px 4px; border-top: 1px dashed var(--pg-dash); }
.gd__rates td:last-child { text-align: right; font-family: var(--pg-num); font-weight: 900; font-size: 22px; color: var(--pg-accent); }
.gd__limits { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 24px; font-size: 16px; }
.gd__limits li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px dashed var(--pg-dash); break-inside: avoid; }
.gd__limits li span:last-child { color: var(--pg-sub); white-space: nowrap; }
.gd__steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gd__steps li { background: var(--pg-paper); border: 1px solid var(--pg-line); border-radius: var(--pg-r); padding: 18px 20px; }
.gd__steps b { display: block; font-family: var(--pg-num); font-weight: 900; font-size: 34px; color: var(--pg-accent); line-height: 1; margin-bottom: 8px; }
.gd__steps strong { display: block; font-size: 19px; margin-bottom: 4px; }
.gd__steps p { margin: 0; font-size: 15px; color: var(--pg-sub); line-height: 1.45; }
.gd__big { display: flex; align-items: baseline; gap: 14px; }
.gd__big b { font-family: var(--pg-num); font-weight: 900; font-size: 58px; color: var(--pg-accent); line-height: 1; }
.gd__big span { font-size: 18px; color: var(--pg-sub); }
.gd__note { background: var(--pg-primary); color: var(--pg-on); border-radius: var(--pg-r); padding: 20px 28px; display: flex; align-items: center; gap: 22px; }
.gd__ph { width: 96px; height: 96px; border-radius: 50%; flex: 0 0 auto; border: 3px solid rgba(255, 255, 255, .7); }
.gd__note .pg-hand { color: var(--pg-on); opacity: .92; font-size: 34px; }
.gd__note b { font-family: var(--pg-num); font-weight: 900; font-size: 40px; margin-left: auto; white-space: nowrap; }
.page--sns .gd { gap: 14px; }
.page--sns .gd__cols { gap: 14px; }
.page--sns .gd__box { padding: 14px 16px; }
.page--sns .gd__box h3 { font-size: calc(19px * var(--pg-hs)); margin-bottom: 8px; }
.page--sns .gd__p { font-size: 13.5px; margin-top: 8px; }
.page--sns .gd__rates { font-size: 15px; }
.page--sns .gd__rates td { padding: 5px 2px; }
.page--sns .gd__rates td:last-child { font-size: 18px; }
.page--sns .gd__big b { font-size: 44px; }
.page--sns .gd__limits { font-size: 14px; }
.page--sns .gd__limits li { padding: 4px 0; }
.page--sns .gd__steps { gap: 10px; }
.page--sns .gd__steps li { padding: 12px 14px; }
.page--sns .gd__steps b { font-size: 26px; margin-bottom: 4px; }
.page--sns .gd__steps strong { font-size: 17px; }
.page--sns .gd__steps p { font-size: 13px; }
.page--sns .gd__note { padding: 12px 20px; gap: 16px; }
.page--sns .gd__ph { width: 70px; height: 70px; }
.page--sns .gd__note .pg-hand { font-size: 26px; }
.page--sns .gd__note b { font-size: 30px; }

/* ── 뒷표지 ── */
.bk { display: flex; flex-direction: column; height: 100%; }
.bk__photo { height: 440px; border-radius: var(--pg-r); margin-bottom: 30px; flex: 0 0 auto; }
.bk__hand { font-size: 52px; margin-bottom: 10px; align-self: flex-start; }
.bk__msg { font-size: 24px; line-height: 1.55; margin: 6px 0 28px; max-width: 32em; }
.bk__box { background: var(--pg-paper); border: 1px solid var(--pg-line); border-radius: var(--pg-r); padding: 34px 38px; display: grid; gap: 10px; }
.bk__name { font-family: var(--pg-h); font-weight: var(--pg-hw); font-size: calc(36px * var(--pg-hs)); letter-spacing: var(--pg-ls); }
.bk__tel { font-family: var(--pg-num); font-weight: 900; font-size: 58px; color: var(--pg-accent); line-height: 1.1; }
.bk__row { display: grid; grid-template-columns: 110px 1fr; gap: 12px; font-size: 19px; padding: 8px 0; border-top: 1px dashed var(--pg-dash); }
.bk__row b { color: var(--pg-sub); font-weight: 700; }
.bk__note { margin: auto 0 0; font-size: 16px; color: var(--pg-sub); line-height: 1.5; }
.bk__credit { margin: 10px 0 0; font-size: 14px; color: var(--pg-sub); opacity: .8; }
.page--sns .bk__photo { height: 300px; margin-bottom: 22px; }
.page--sns .bk__hand { font-size: 44px; }
.page--sns .bk__msg { font-size: 21px; margin-bottom: 22px; }
.page--sns .bk__box { padding: 26px 30px; }
.page--sns .bk__tel { font-size: 50px; }
.page--sns .bk__note { font-size: 14.5px; }
.page[data-cd="bold"] .bk__box, .page[data-cd="bold"] .gd__box, .page[data-cd="bold"] .gd__steps li { border: 3px solid var(--pg-ink); border-radius: 8px; }
.page[data-cd="shadow"] .bk__box, .page[data-cd="shadow"] .gd__box, .page[data-cd="shadow"] .gd__steps li { border: 1px solid var(--pg-line); border-bottom: 6px solid var(--pg-line); }

/* ═══ 색 조합 24가지 ═══ */
.page[data-pal="sc-coral"] { --pg-bg: #FDF5F0; --pg-paper: #FFFFFF; --pg-primary: #2B2724; --pg-accent: #E2502E; --pg-ink: #231F1C; --pg-sub: #6E625A; --pg-line: #F0E1D8; --pg-dash: #F2B9A5; --pg-hl: #FFC53D; --pg-tint: #FDEDE7; --pg-r: 18px; }
.page[data-pal="sc-sun"] { --pg-bg: #FFF7E0; --pg-paper: #FFFFFF; --pg-primary: #2B2724; --pg-accent: #E2502E; --pg-ink: #2B2724; --pg-sub: #6B5F4F; --pg-line: #F5E3B3; --pg-dash: #F2C76B; --pg-hl: #FFC53D; --pg-tint: #FFF0C2; --pg-r: 22px; --pg-band: #FFC53D; --pg-band-ink: #2B2724; }
.page[data-pal="sc-split"] { --pg-bg: #FBF3EE; --pg-paper: #FFFFFF; --pg-primary: #E2502E; --pg-accent: #C33F20; --pg-ink: #2B2724; --pg-sub: #75675E; --pg-line: #EFDCD1; --pg-dash: #EDB49F; --pg-hl: #2B2724; --pg-tint: #FCE9E1; --pg-r: 6px; }
.page[data-pal="beige"] { --pg-bg: #efe8df; --pg-paper: #fffdf8; --pg-primary: #1f3a33; --pg-accent: #d9553a; --pg-ink: #1d1d1b; --pg-sub: #5c5750; --pg-line: #dfd4c5; --pg-dash: #e9a898; --pg-hl: #f2c14e; --pg-tint: #f6e6dc; --pg-r: 18px; }
.page[data-pal="apricot"] { --pg-bg: #fdeee3; --pg-paper: #ffffff; --pg-primary: #7a4a2a; --pg-accent: #e5704a; --pg-ink: #3b2a20; --pg-sub: #7d6658; --pg-line: #f1d9c8; --pg-dash: #f0b79c; --pg-hl: #ffd27a; --pg-tint: #fde3d6; --pg-r: 26px; }
.page[data-pal="sc-cream"] { --pg-bg: #FBF4E9; --pg-paper: #FFFDF9; --pg-primary: #5A3E2B; --pg-accent: #E2502E; --pg-ink: #2E2620; --pg-sub: #7A6A5C; --pg-line: #EADFCF; --pg-dash: #E6B9A0; --pg-hl: #F6C87A; --pg-tint: #F6E9DA; --pg-r: 28px; }
.page[data-pal="navy"] { --pg-bg: #f1f3f7; --pg-paper: #ffffff; --pg-primary: #1c2f5a; --pg-accent: #c9962f; --pg-ink: #1a2238; --pg-sub: #5d6478; --pg-line: #d6dbe6; --pg-dash: #c7cfe0; --pg-hl: #e6c27a; --pg-tint: #e9edf5; --pg-r: 10px; }
.page[data-pal="hanji"] { --pg-bg: #f4efe6; --pg-paper: #fbf8f2; --pg-primary: #2b2b2b; --pg-accent: #b4472e; --pg-ink: #262320; --pg-sub: #6a635a; --pg-line: #ddd3c4; --pg-dash: #d3b9a4; --pg-hl: #d9b46a; --pg-tint: #efe6d8; --pg-r: 6px; }
.page[data-pal="forest"] { --pg-bg: #EEF3EC; --pg-paper: #FFFFFF; --pg-primary: #1F4D3A; --pg-accent: #D9772E; --pg-ink: #1B2A22; --pg-sub: #5A6B60; --pg-line: #D3E0D5; --pg-dash: #B7CFBE; --pg-hl: #F4D58D; --pg-tint: #E3EDE5; --pg-r: 14px; }
.page[data-pal="celadon"] { --pg-bg: #E9F2EF; --pg-paper: #FFFFFF; --pg-primary: #2F6B66; --pg-accent: #B4553B; --pg-ink: #1F2D2B; --pg-sub: #5D716D; --pg-line: #CFE1DC; --pg-dash: #A9CBC3; --pg-hl: #E8C88A; --pg-tint: #DCEBE6; --pg-r: 20px; }
.page[data-pal="charcoal"] { --pg-bg: #F2F1EF; --pg-paper: #FFFFFF; --pg-primary: #2E3133; --pg-accent: #E2502E; --pg-ink: #1C1E20; --pg-sub: #64686B; --pg-line: #DDDCD8; --pg-dash: #C9C7C2; --pg-hl: #FF8A6B; --pg-tint: #ECEBE8; --pg-r: 4px; }
.page[data-pal="burgundy"] { --pg-bg: #F6EFEA; --pg-paper: #FFFCFA; --pg-primary: #6B2232; --pg-accent: #B0802F; --pg-ink: #2A1C1F; --pg-sub: #75625F; --pg-line: #E7D8D0; --pg-dash: #D9BFA8; --pg-hl: #E2C17E; --pg-tint: #F1E6DE; --pg-r: 10px; }
.page[data-pal="mint"] { --pg-bg: #e6f2ec; --pg-paper: #ffffff; --pg-primary: #1b5e4a; --pg-accent: #ef7d4f; --pg-ink: #1e2a26; --pg-sub: #5b6e67; --pg-line: #cfe2d8; --pg-dash: #a9d2bf; --pg-hl: #ffd97a; --pg-tint: #dcefe6; --pg-r: 22px; }
.page[data-pal="lavender"] { --pg-bg: #efeaf7; --pg-paper: #ffffff; --pg-primary: #3f2d6b; --pg-accent: #e06c8a; --pg-ink: #27203a; --pg-sub: #6b6380; --pg-line: #dcd4ea; --pg-dash: #cdbfe6; --pg-hl: #ffd1dc; --pg-tint: #ece5f6; --pg-r: 20px; }
.page[data-pal="sky"] { --pg-bg: #EAF4FB; --pg-paper: #FFFFFF; --pg-primary: #1E5B8C; --pg-accent: #EE7B30; --pg-ink: #17283A; --pg-sub: #5A6B7D; --pg-line: #D1E3F0; --pg-dash: #A9CAE3; --pg-hl: #FFE08A; --pg-tint: #DDEDF8; --pg-r: 20px; }
.page[data-pal="peach"] { --pg-bg: #FFEFEB; --pg-paper: #FFFFFF; --pg-primary: #8C3B4A; --pg-accent: #EC6262; --pg-ink: #3A2328; --pg-sub: #85666B; --pg-line: #F6D8D2; --pg-dash: #F2B2AA; --pg-hl: #FFC2B5; --pg-tint: #FFE4DE; --pg-r: 24px; }
.page[data-pal="lemon"] { --pg-bg: #FFFBE5; --pg-paper: #FFFFFF; --pg-primary: #4B5A1F; --pg-accent: #E8920F; --pg-ink: #2C3112; --pg-sub: #6D704F; --pg-line: #F1EBC0; --pg-dash: #E9D77E; --pg-hl: #FFE45C; --pg-tint: #FFF5C2; --pg-r: 22px; }
.page[data-pal="garden"] { --pg-bg: #F8EFF1; --pg-paper: #FFFFFF; --pg-primary: #3E5F4B; --pg-accent: #D2577A; --pg-ink: #2A2427; --pg-sub: #7A6870; --pg-line: #EBDCE0; --pg-dash: #E3B4C3; --pg-hl: #F7C6D3; --pg-tint: #F3E3E7; --pg-r: 20px; }
.page[data-pal="magazine"] { --pg-bg: #FFFFFF; --pg-paper: #F7F5F2; --pg-primary: #111111; --pg-accent: #E2502E; --pg-ink: #111111; --pg-sub: #5E5E5E; --pg-line: #E4E1DC; --pg-dash: #CFCAC2; --pg-hl: #FF8A6B; --pg-tint: #F3F0EC; --pg-r: 0px; }
.page[data-pal="bigprint"] { --pg-bg: #FFFDF4; --pg-paper: #FFFFFF; --pg-primary: #1A1A1A; --pg-accent: #C8102E; --pg-ink: #111111; --pg-sub: #3D3D3D; --pg-line: #CFCAB8; --pg-dash: #9C9684; --pg-hl: #FFD84D; --pg-tint: #FFF4CC; --pg-r: 8px; }
.page[data-pal="flyer"] { --pg-bg: #FFF3C4; --pg-paper: #FFFFFF; --pg-primary: #D7261E; --pg-accent: #D7261E; --pg-ink: #1A1A1A; --pg-sub: #5A4B2B; --pg-line: #F0D97A; --pg-dash: #E8B84A; --pg-hl: #FFD400; --pg-tint: #FFE98A; --pg-r: 12px; }
.page[data-pal="newspaper"] { --pg-bg: #F6F2E8; --pg-paper: #FBF9F3; --pg-primary: #1C1C1C; --pg-accent: #A3262A; --pg-ink: #1C1C1C; --pg-sub: #57534A; --pg-line: #D6D0C2; --pg-dash: #B9B1A0; --pg-hl: #E8C26A; --pg-tint: #EDE7D9; --pg-r: 0px; }
.page[data-pal="collage"] { --pg-bg: #F5F0E8; --pg-paper: #FFFFFF; --pg-primary: #2B2724; --pg-accent: #E2502E; --pg-ink: #231F1C; --pg-sub: #6E625A; --pg-line: #E6DDD1; --pg-dash: #E3B9A5; --pg-hl: #FFC53D; --pg-tint: #F9E6DC; --pg-r: 16px; }
.page[data-pal="kraft"] { --pg-bg: #EADFC9; --pg-paper: #FBF6EC; --pg-primary: #3B2F25; --pg-accent: #B8412C; --pg-ink: #2B231B; --pg-sub: #6B5B48; --pg-line: #D6C7AA; --pg-dash: #BFA77F; --pg-hl: #F3D9A0; --pg-tint: #F3EADB; --pg-r: 6px; }

/* ── 인쇄 ── */
@media print {
  @page { size: A4 portrait; margin: 0; }
  body * { visibility: hidden; }
  #printStage, #printStage * { visibility: visible; }
  #printStage { display: block !important; position: absolute; left: 0; top: 0; width: 210mm; }
  .print-page { width: 210mm; height: 297mm; overflow: hidden; page-break-after: always; break-after: page; position: relative; }
  .print-page .page { transform: scale(0.64); transform-origin: 0 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.cv__frame .cv__strip { align-self: stretch; }
.cv__strip + .cv__foot { margin-top: 24px; }
/* html2canvas 가 글자 기준선을 재려고 잠깐 넣는 1px 그림 — 사이트 공통 img{display:block} 때문에 큰 글자가 아래로 밀려 그려지던 문제 */
img[src^="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP"] { display: inline !important; width: 1px !important; height: 1px !important; max-width: none !important; aspect-ratio: auto !important; }

/* 회원 전용 덮개 (2026-10-29) — 비회원이면 편집기를 흐리게 덮고 가입 · 로그인 안내 */
.maker { position: relative; }
.maker.is-locked > .maker__side, .maker.is-locked > .maker__preview { filter: blur(3px) saturate(.7); opacity: .55; pointer-events: none; user-select: none; }
.mgate { position: absolute; inset: 0; z-index: 30; display: flex; justify-content: center; align-items: flex-start; padding: 56px 16px 24px; background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.2)); }
.mgate__wait { position: sticky; top: 40vh; margin: 0; padding: 12px 18px; background: #fff; border: 1px solid var(--line); border-radius: 12px; font-weight: 700; color: var(--sub); box-shadow: 0 6px 20px rgba(0,0,0,.08); }
.mgate__card { position: sticky; top: 24px; width: min(100%, 520px); display: grid; gap: 12px; padding: 26px 26px 22px; background: #fff; border: 2px solid var(--coral); border-radius: 18px; box-shadow: 0 2px 6px rgba(0,0,0,.06), 0 18px 44px rgba(0,0,0,.14); text-align: center; }
.mgate__tag { justify-self: center; padding: 4px 12px; border-radius: 999px; background: var(--paper); color: var(--coral-d); font-size: .85rem; font-weight: 800; }
.mgate__h { margin: 0; font-size: 1.35rem; line-height: 1.35; letter-spacing: -.02em; word-break: keep-all; }
.mgate__p { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--sub); word-break: keep-all; }
.mgate__p b { color: var(--coral-d); }
.mgate__btns { display: grid; gap: 8px; margin-top: 4px; }
.mgate__btns .btn { width: 100%; justify-content: center; text-align: center; }
@media (max-width: 640px) { .mgate { padding-top: 28px; } .mgate__card { padding: 22px 18px 18px; } .mgate__h { font-size: 1.2rem; } }