@import url('https://fonts.googleapis.com/css2?family=Jua&family=Gowun+Dodum&family=Gaegu:wght@700&family=Noto+Sans+KR:wght@400;500;700;900&display=swap');

/* ============================================================
   뜬다키즈 — 디자인 토큰
   시안의 색·간격을 그대로 변수로 옮겼습니다.
   토큰만 바꾸면 전 페이지 톤이 함께 바뀝니다.
   ============================================================ */
:root{
  --paper:#FFFDF7; --paper2:#FFF6E6; --surface:#fff; --soft:#FDF6EA;
  --ink:#3E2E22; --ink2:#5A463A; --muted:#7A6555; --muted2:#8A7565;
  --line:#F2E6D2; --line2:#F0E2CC;
  --orange:#EE7A22; --orange2:#FBA23C; --orange-d:#C9640D;
  --pink:#E0457E;
  --r-s:12px; --r-m:16px; --r-l:20px; --r-xl:22px; --r-pill:999px;
  --shell:1240px; --pad-x:20px;
  --sh-card:0 8px 22px rgba(120,86,44,.10);
  --sh-lift:0 14px 28px rgba(120,86,44,.14);
  --sh-big:0 18px 40px rgba(120,86,44,.16);
  --font-ko:'Noto Sans KR',sans-serif;
  --font-title:'Jua',sans-serif;
  --font-serif:'Gowun Dodum',serif;
  --font-hand:'Gaegu',cursive;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);font-family:var(--font-ko);color:var(--ink);
     -webkit-font-smoothing:antialiased;word-break:keep-all;overflow-x:hidden}
img{max-width:100%}
a{color:var(--orange);text-decoration:none}
a:hover{color:var(--orange-d)}
button{font-family:inherit}
.shell{max-width:var(--shell);margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x)}

/* ── 애니메이션 ───────────────────────────────────────── */
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes floatY2{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-22px) rotate(6deg)}}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.8) rotate(0)}50%{opacity:1;transform:scale(1.2) rotate(25deg)}}
@keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(245,136,60,.45)}70%{box-shadow:0 0 0 22px rgba(245,136,60,0)}100%{box-shadow:0 0 0 0 rgba(245,136,60,0)}}
@keyframes rise{from{opacity:0;transform:translateY(48px) scale(.97)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:scale(.85) translateY(24px)}to{opacity:1;transform:none}}
@keyframes bounceArrow{0%,100%{transform:translateX(0)}50%{transform:translateX(8px)}}
@keyframes pulseDot{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.reveal{opacity:0;transform:translateY(36px);transition:opacity .7s ease,transform .7s ease}
.reveal.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

/* ── 헤더 ─────────────────────────────────────────────── */
.hd{position:sticky;top:0;z-index:60;backdrop-filter:blur(10px);
    background:rgba(255,253,247,.88);border-bottom:1px solid var(--line)}
.hd-in{display:flex;align-items:center;gap:28px;padding-top:12px;padding-bottom:12px}
/* 로고 — 시안 기준 높이 28px */
.hd-logo{height:28px;width:auto;display:block}
.hd-brand:hover .hd-logo{opacity:.85}
.age-tab{display:flex;gap:4px;background:#F6EEE0;border-radius:var(--r-pill);padding:3px}
.age-tab a{font-size:13px;font-weight:700;padding:6px 14px;border-radius:var(--r-pill);color:var(--muted)}
.age-tab a.on{background:#fff;color:var(--orange);box-shadow:0 2px 6px rgba(120,86,44,.12)}
.theme-btn{border:1.5px solid #E2D4BE;background:transparent;border-radius:var(--r-pill);
           width:38px;height:38px;font-size:15px;cursor:pointer;line-height:1}
.theme-btn:hover{border-color:var(--orange2)}
.hd-nav{display:flex;gap:4px;flex:1;white-space:nowrap;font-size:15px;font-weight:500}
.hd-nav>a,.hd-item>a{display:block;padding:9px 13px;border-radius:var(--r-pill);color:var(--ink2)}
.hd-nav>a:hover,.hd-item:hover>a{color:var(--orange);background:var(--soft)}

/* 서브메뉴 — 큰 갈래 3개 아래로 펼칩니다 */
.hd-item{position:relative}
.hd-item>a::after{content:'⌄';margin-left:5px;font-size:11px;opacity:.55}
.hd-sub{position:absolute;left:0;top:100%;z-index:60;min-width:250px;padding-top:8px;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.22s ease}
.hd-item:hover .hd-sub,.hd-item:focus-within .hd-sub{opacity:1;visibility:visible;transform:none}
.hd-sub a{display:block;background:var(--surface);padding:12px 16px;color:var(--ink);
  border-left:1px solid var(--line2);border-right:1px solid var(--line2)}
.hd-sub a:first-child{border-top:1px solid var(--line2);
  border-radius:var(--r-m) var(--r-m) 0 0;padding-top:14px}
.hd-sub a:last-child{border-bottom:1px solid var(--line2);
  border-radius:0 0 var(--r-m) var(--r-m);padding-bottom:14px;box-shadow:var(--sh-lift)}
.hd-sub a:hover{background:var(--soft)}
.hd-sub b{display:block;font-size:14.5px;font-weight:700}
.hd-sub i{display:block;font-style:normal;font-size:12px;color:var(--muted2);margin-top:3px;
  white-space:normal;line-height:1.6}
.hd-act{display:flex;align-items:center;gap:12px}
.hd-act .lg{font-size:14px;color:var(--ink2)}
.btn-ghost{font-size:14px;padding:9px 18px;border:1.5px solid #E2D4BE;border-radius:var(--r-pill);
           color:var(--ink2);white-space:nowrap;display:inline-block;transition:.25s}
.btn-ghost:hover{border-color:var(--orange2);color:var(--orange)}
.btn-cta{font-size:15px;font-weight:700;padding:11px 22px;border-radius:var(--r-pill);color:#fff!important;
         white-space:nowrap;display:inline-block;background:linear-gradient(135deg,var(--orange2),var(--orange));
         box-shadow:0 8px 20px rgba(238,122,34,.35);animation:pulseRing 3.2s ease-out infinite;
         border:none;cursor:pointer;transition:transform .25s}
.btn-cta:hover{transform:translateY(-2px)}
.btn-cta.lg{font-size:18px;padding:16px 34px}

/* 모바일 하단 고정 CTA */
.mcta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
      background:rgba(255,253,247,.96);border-top:1px solid var(--line)}
.mcta a{display:block;text-align:center}

/* ── 히어로 ───────────────────────────────────────────── */
.hero{position:relative;padding:56px var(--pad-x) 40px;overflow:hidden;
      background:linear-gradient(180deg,var(--paper2) 0%,var(--paper) 100%)}

/* 배경 슬라이드 방식 */
.hero.bg{padding:0;min-height:min(78vh,660px);display:flex;align-items:center}
.hero-bg{position:absolute;inset:0;overflow:hidden}
.hero-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.4s ease;transform:scale(1.04)}
.hero-slide.on{opacity:1;animation:heroPan 12s ease-out forwards}
@keyframes heroPan{from{transform:scale(1.04)}to{transform:scale(1.11)}}
/* 왼쪽에서 오른쪽으로 옅어지는 가림막 — 글이 읽히게 */
.hero-veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(255,253,247,.96) 0%, rgba(255,253,247,.94) 32%,
    rgba(255,253,247,.72) 46%, rgba(255,253,247,.22) 62%,
    rgba(255,253,247,0) 78%)}
.hero-in.over{position:relative;z-index:2;display:block;
  width:100%;max-width:var(--shell);margin:0 auto;
  padding:56px var(--pad-x)}
.hero-in.over .hero-txt{width:100%;max-width:540px}
/* 배경 위에서는 글이 더 또렷해야 합니다 */
.hero-in.over h1{text-shadow:0 1px 0 rgba(255,253,247,.9)}
.hero-in.over .hero-price,
.hero-in.over .hero-free{white-space:nowrap}
.hero-dots{position:absolute;left:0;right:0;bottom:18px;z-index:3;display:flex;gap:7px;
  justify-content:center}
.hero-dots button{width:26px;height:5px;border:none;border-radius:99px;cursor:pointer;
  background:rgba(120,86,44,.28);transition:.3s;padding:0}
.hero-dots button.on{background:var(--orange);width:40px}
.hero-in{max-width:var(--shell);margin:0 auto;display:grid;grid-template-columns:1fr 1.05fr;gap:28px;align-items:center}
.hero h1{font-family:var(--font-title);font-size:clamp(28px,4.2vw,52px);line-height:1.3;margin:0 0 18px}
.hero h1 .o{color:var(--orange)}
.hero p{margin:0 0 12px;font-size:clamp(14px,1.3vw,17px);line-height:1.8;color:var(--muted)}
.hero-price{display:inline-block;margin:0 0 14px;padding:7px 15px;border-radius:var(--r-pill);
            background:#FFF1DC;color:var(--orange-d);font-size:13.5px;font-weight:700;
            border:1px solid #F3DFC2}
.hero-btns{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.hero-sub{font-size:15px;color:var(--ink2)}
.hero-sub:hover span{animation:bounceArrow .7s ease infinite}
.hero-art{position:relative;display:flex;justify-content:center}
.hero-art img{width:100%;height:auto;max-height:min(48vh,420px);object-fit:contain;border-radius:var(--r-xl)}
.star{position:absolute;pointer-events:none;animation:twinkle 3.6s ease-in-out infinite}

/* ── 3입력 카드 ───────────────────────────────────────── */
.three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.three-card{background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-l);
            padding:26px 22px;box-shadow:var(--sh-card);transition:.35s;position:relative}
.three-card:hover{transform:translateY(-6px);box-shadow:var(--sh-lift)}
.three-card i{display:grid;place-items:center;width:56px;height:56px;border-radius:18px;
  background:var(--soft);font-style:normal;font-size:27px;margin-bottom:14px}
.three-card b{display:block;font-size:17px;font-family:var(--font-title)}
.three-card span{display:block;font-size:13px;color:var(--muted);margin-top:7px;line-height:1.75}

/* ── 큰 카드 2장 (원작 / 직접 만들기) ────────────────── */
.two{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.two a{display:block;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-big);transition:transform .35s}
.two a:hover{transform:translateY(-6px)}
.two img{width:100%;display:block;transition:transform .6s ease}
.two a:hover img{transform:scale(1.05)}

/* ── 섹션 공통 ───────────────────────────────────────── */
.sec{padding:50px var(--pad-x) 60px}
.sec.tight{padding-top:0}
.sec h2{font-family:var(--font-title);font-size:clamp(22px,2.8vw,32px);margin:0 0 8px}
.sec .lead{margin:0 0 26px;color:var(--muted)}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}

/* ── Before / After ──────────────────────────────────── */
.ba{display:grid;grid-template-columns:1fr 1.4fr;gap:20px;align-items:center}
.ba-pair{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}
.ba-shot{position:relative;border-radius:var(--r-m);overflow:hidden;box-shadow:var(--sh-card)}
.ba-shot span{position:absolute;left:8px;bottom:8px;background:rgba(255,255,255,.92);
              border-radius:8px;padding:3px 8px;font-size:11.5px;font-weight:700}
.ba-arrow{font-size:26px;color:var(--orange2)}
.ba-scenes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ba-scenes figure{margin:0}
.ba-scenes img{border-radius:var(--r-m);display:block;box-shadow:var(--sh-card)}
.ba-scenes figcaption{margin-top:8px;text-align:center;font-size:12.5px;color:var(--muted2)}

/* ── 완성작 ──────────────────────────────────────────── */
.works{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.work{display:block;text-align:left;color:inherit}
.work-img{display:block;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sh-card);
          aspect-ratio:3/2;background:var(--soft)}
.work-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.work:hover .work-img img{transform:scale(1.05)}
.work b{display:block;margin:10px 2px 2px;font-size:15px;color:var(--ink)}
.work span:last-child{display:block;margin:0 2px;font-size:12.5px;color:var(--muted2)}

/* ── 부모 목소리 ─────────────────────────────────────── */
.voice{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;
       background:var(--soft);border:1px solid var(--line2);border-radius:var(--r-xl);
       padding:22px;overflow:hidden}
.voice-bg{width:100%;display:block;border-radius:var(--r-l)}
/* parent-bed.png 오른쪽에 문구가 이미 그려져 있다. 사진 부분만 보이게 잘라 쓴다.
   글자 없는 사진으로 교체되면 .voice-cut 을 지우면 된다. */
.voice-cut{border-radius:var(--r-l);overflow:hidden;aspect-ratio:4/3}
.voice-cut .voice-bg{width:181.8%;max-width:none;height:100%;object-fit:cover;
  object-position:left center;border-radius:0}
.voice-txt{min-width:0;padding:6px 8px}
.voice-txt h2{color:var(--ink);margin-bottom:10px;text-align:left}
.voice-txt .lead{margin-bottom:18px}
.voice-steps{list-style:none;margin:0 0 16px;padding:0}
.voice-steps li{display:flex;align-items:center;gap:11px;padding:9px 0;font-size:14px;color:var(--ink2)}
.voice-steps li+li{border-top:1px solid var(--line)}
.voice-steps i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;flex:none;
  background:var(--orange);color:#fff;font-style:normal;font-size:12px;font-weight:700}
.voice-note{margin:0;font-size:12.5px;color:#3F5A38;background:#F1F8EE;border-radius:11px;padding:10px 13px}

/* ── 기다리는 시간 ───────────────────────────────────── */
.wait{display:grid;grid-template-columns:1.1fr 1fr;gap:26px;align-items:stretch}
.wait-img{margin:0;display:flex;flex-direction:column}
.wait-img img{width:100%;flex:1;object-fit:cover;border-radius:var(--r-xl);box-shadow:var(--sh-card);
  aspect-ratio:3/2}
.wait-img figcaption{margin-top:10px;font-size:12.5px;color:var(--muted2);text-align:center}
.wait .prog{display:flex;flex-direction:column;justify-content:center}
.prog{background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-l);padding:16px;box-shadow:var(--sh-card)}
.prog-row{display:flex;align-items:center;gap:12px;padding:10px 4px}
.prog-row + .prog-row{border-top:1px solid var(--line)}
.prog-row b{flex:1;font-size:14px;font-weight:500}
.chip-ok{background:#E8F7E4;color:#3B7A2A;border-radius:var(--r-pill);padding:4px 12px;font-size:12.5px;font-weight:700}
.bar{flex:2;height:10px;border-radius:var(--r-pill);background:#F0E7DA;overflow:hidden}
.bar i{display:block;height:100%;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--orange2),var(--orange))}

/* ── 결과물 3종 ──────────────────────────────────────── */
.res{display:grid;grid-template-columns:repeat(3,1fr) 1.1fr;gap:18px;align-items:stretch}
.res-card{background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-l);
  padding:16px;transition:.35s;box-shadow:var(--sh-card);text-align:left}
.res-card:hover{transform:translateY(-8px);box-shadow:var(--sh-lift)}
.res-badge{display:inline-block;background:var(--soft);border-radius:var(--r-pill);
  padding:5px 13px;font-size:12px;font-weight:700;color:var(--orange-d);margin-bottom:12px}
.res-shot{display:block;position:relative;border-radius:var(--r-m);overflow:hidden;
  aspect-ratio:3/2;background:var(--soft);margin-bottom:12px}
.res-shot img{width:100%;height:100%;object-fit:cover;display:block}
.res-shot.video i{position:absolute;inset:0;margin:auto;width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--orange);font-style:normal;font-size:17px;
  display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.res-shot.wave{display:flex;align-items:center;gap:12px;padding:0 16px;
  background:linear-gradient(135deg,#FFF1DC,#FDE8D2)}
.res-wave{flex:1;display:flex;align-items:center;gap:4px;height:44px}
.res-wave i{flex:1;background:var(--orange2);border-radius:2px;
  animation:wv 1.3s ease-in-out infinite}
.res-wave i:nth-child(2n){animation-delay:.15s} .res-wave i:nth-child(3n){animation-delay:.3s}
.res-wave i:nth-child(5n){animation-delay:.45s}
@keyframes wv{0%,100%{height:22%}50%{height:100%}}
.res-play{flex:none;width:38px;height:38px;border-radius:50%;color:#fff;font-size:13px;
  display:grid;place-items:center;background:linear-gradient(135deg,#FB8C2A,#F2620D)}
.res-card b{display:block;font-size:15.5px}
.res-card p{margin:5px 0 0;font-size:12.5px;color:var(--muted);line-height:1.75}
.res-print{background:linear-gradient(160deg,#FFF1DC,#FDE8D2);border:1px solid #F2DDBF;
           border-radius:var(--r-l);padding:18px;display:flex;gap:14px;align-items:center}
.res-print img{width:44%;border-radius:10px;animation:floatY 6s ease-in-out infinite;
               filter:drop-shadow(0 12px 22px rgba(120,86,44,.2))}
.hand{font-family:var(--font-serif);color:#6B5647;line-height:1.7}

/* ── 안심 배지 ───────────────────────────────────────── */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
       background:#F6FBF4;border:1px solid #DCEFD6;border-radius:var(--r-l);padding:18px}
.trust div{display:flex;gap:9px;align-items:flex-start;font-size:13px;line-height:1.5;color:#3F5A38}
.trust i{font-style:normal;font-size:16px;flex:none}

/* ── 후기 ────────────────────────────────────────────── */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rev{background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-l);padding:18px;box-shadow:var(--sh-card)}
.rev .stars{color:#F5A623;font-size:14px;letter-spacing:1px}
.rev p{margin:10px 0 12px;font-size:14px;line-height:1.75;color:var(--ink2)}
.rev cite{font-style:normal;font-size:12.5px;color:var(--muted2)}

/* ── FAQ ─────────────────────────────────────────────── */
.faq{max-width:820px;margin:0 auto}
.faq details{background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-m);
             padding:16px 18px;margin-bottom:10px}
.faq summary{cursor:pointer;font-weight:700;font-size:15px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';float:right;color:var(--orange);font-weight:900}
.faq details[open] summary::after{content:'−'}
.faq p{margin:12px 0 0;font-size:14px;line-height:1.8;color:var(--muted)}

/* ── 트렌드 ──────────────────────────────────────────── */
.tr-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tr-card{background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-l);
         padding:14px;box-shadow:var(--sh-card)}
.tr-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.tr-mark{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;color:#fff;font-weight:900;font-size:13px}
.tr-src{margin-left:auto;font-size:11px;border-radius:var(--r-pill);padding:3px 9px}
.tr-cap{font-size:11.5px;color:var(--muted2);margin:0 0 10px}
.tr-item{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:12.5px}
.tr-item + .tr-item{border-top:1px solid var(--line)}
.tr-item img{width:38px;height:38px;object-fit:cover;border-radius:8px;flex:none}
.tr-item b{flex:1;min-width:0;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr-foot{margin:10px 0 0;font-size:10.5px;color:#A2907F}
.tr-cross{margin-top:18px;background:var(--soft);border:1px solid var(--line2);border-radius:var(--r-l);padding:18px}
.tr-cross-row{display:flex;align-items:center;gap:14px;padding:9px 0;font-size:13.5px}
.tr-cross-row + .tr-cross-row{border-top:1px solid var(--line)}
.demo-note{margin:14px 0 0;font-size:12px;color:#A2907F}

/* ── 하단 CTA ────────────────────────────────────────── */
.final{text-align:center;padding:64px var(--pad-x) 72px;
       background:linear-gradient(180deg,var(--paper) 0%,var(--paper2) 100%)}
.final h2{font-family:var(--font-title);font-size:clamp(24px,3.4vw,38px);margin:0 0 12px}
.final p{margin:0 0 26px;color:var(--muted)}

/* ── 푸터 ────────────────────────────────────────────── */
.ft{padding:28px var(--pad-x) 40px;text-align:center;border-top:1px solid var(--line);background:var(--paper)}
.ft .hand{font-family:var(--font-serif);font-size:15px;margin:0 0 8px}
.ft small{color:var(--muted2);font-size:12px}
.ft nav{margin:12px 0 10px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;font-size:12.5px}
.ft nav a{color:var(--muted)}

/* 시안 단계 표시 */
.demo-badge{position:fixed;right:12px;bottom:12px;z-index:80;background:#3E2E22;color:#FFD9A8;
            border-radius:var(--r-pill);padding:7px 14px;font-size:11.5px;font-weight:700;opacity:.85}

/* ============================================================
   반응형 — 시안에는 없던 부분. 1440 / 980 / 700 / 390
   ============================================================ */
@media (max-width:1100px){
  .res{grid-template-columns:repeat(2,1fr)}
  .trust{grid-template-columns:repeat(2,1fr)}
  .tr-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:980px){
  :root{--pad-x:18px}
  /* 메뉴가 7개라 태블릿 폭에서 이미 넘칩니다 — 여기서부터 접습니다 */
  .hd-nav{display:none}
  .hd-in{gap:10px;justify-content:space-between;flex-wrap:nowrap;min-width:0}
  .hd-act{gap:9px;flex:none;min-width:0}
  .hd-act .btn-cta{font-size:13.5px;padding:9px 16px}
  .voice-txt h2{text-align:center}
  .three-card{padding:20px 18px}
  /* 모바일은 세로라 왼쪽 가림막이 안 통합니다 — 아래에서 위로 덮습니다 */
  .hero.bg{min-height:auto}
  /* 가로 그림을 세로 화면에 넣으면 주인공(대개 오른쪽)이 잘립니다 */
  .hero-slide{object-position:72% center}
  .hero-veil{background:linear-gradient(180deg,
    rgba(255,253,247,0) 0%, rgba(255,253,247,.10) 34%,
    rgba(255,253,247,.72) 50%, rgba(255,253,247,.96) 62%, rgba(255,253,247,1) 72%)}
  .hero-in.over{display:flex;align-items:flex-end;padding:0 var(--pad-x) 30px;min-height:78vh}
  .hero-in.over .hero-txt{max-width:none;text-align:center}
  .hero-in.over .hero-btns{justify-content:center}
  .hero-dots{bottom:auto;top:14px}
  .hero-in{grid-template-columns:1fr;gap:18px}
  .hero{padding-top:36px}
  .hero h1{text-align:center}
  .hero p,.hero-price{text-align:center}
  .hero-btns{justify-content:center}
  .hero-art{order:-1}
  .ba{grid-template-columns:1fr}
  .wait{grid-template-columns:1fr}
  .revs{grid-template-columns:1fr}
  .works{grid-template-columns:1fr 1fr}
  .voice{grid-template-columns:1fr}
}
@media (max-width:700px){
  .three{grid-template-columns:1fr}
  .two{grid-template-columns:1fr}
  .res{grid-template-columns:1fr}
  .tr-grid{grid-template-columns:1fr}
  .ba-scenes{grid-template-columns:1fr}
  .works{grid-template-columns:1fr}
}
@media (max-width:640px){
  :root{--pad-x:16px}
  .hd-nav{display:none}
  .hd-in{gap:10px;justify-content:space-between;flex-wrap:nowrap;min-width:0}
  .hd-act{gap:8px;flex:none;min-width:0}
  .hd-act .btn-cta{display:none}   /* 하단 고정 CTA 가 대신한다 */
  .hd-act .lg{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:88px}
  .hd-act .btn-ghost{padding:7px 12px;font-size:13px;white-space:nowrap}
  .age-tab{flex:none}
  .age-tab a{padding:6px 10px;font-size:12.5px}
  .hd-logo{height:24px}
  .theme-btn{width:32px;height:32px;font-size:14px;flex:none}
  .mcta{display:block}
  body{padding-bottom:70px}
  .sec{padding:36px var(--pad-x) 40px}
  .ba-pair{grid-template-columns:1fr auto 1fr;gap:6px}
  .ba-arrow{font-size:20px}
  .res-print{flex-direction:column;text-align:center}
  .res-print img{width:70%}
  .star{display:none}              /* 모바일에서는 장식 제거 — 가볍게 */
}


/* ============================================================
   다크 모드 — html[data-theme="dark"] 토큰 전환만.
   페이지를 두 벌 만들지 않고, 그림도 한 벌만 쓴다.
   (다크용 그림을 따로 생성하면 장면 원가가 정확히 2배가 된다)
   ============================================================ */
html[data-theme="dark"]{
  --paper:#0C1430; --paper2:#122048; --surface:#16224A; --soft:#111C3E;
  --ink:#EAF1FF; --ink2:#C3CFEA; --muted:#9FB0D4; --muted2:#8496BC;
  --line:#25335C; --line2:#2A3A66;
  --orange:#FFA351; --orange2:#FFC078; --orange-d:#FFD3A3;
  --sh-card:0 8px 22px rgba(0,0,0,.35);
  --sh-lift:0 14px 28px rgba(0,0,0,.45);
  --sh-big:0 18px 40px rgba(0,0,0,.5);
}
html[data-theme="dark"] .hd{background:rgba(12,20,48,.9)}
html[data-theme="dark"] .age-tab{background:#1A2648}
html[data-theme="dark"] .age-tab a.on{background:#243356}
html[data-theme="dark"] .btn-ghost,html[data-theme="dark"] .theme-btn{border-color:#33436F;color:var(--ink2)}
html[data-theme="dark"] .trust{background:#132B22;border-color:#1E4638}
html[data-theme="dark"] .trust div{color:#B7E6CE}
html[data-theme="dark"] .res-print{background:linear-gradient(160deg,#1E2A55,#182349);border-color:#2C3C68}
html[data-theme="dark"] .chip-ok{background:#14432E;color:#7BE0A8}
html[data-theme="dark"] .bar{background:#22304F}
html[data-theme="dark"] .mcta{background:rgba(12,20,48,.96)}

/* ── 로그인 / 회원가입 ───────────────────────────────── */
.auth{padding:44px var(--pad-x) 70px;background:linear-gradient(180deg,var(--paper2),var(--paper))}
.auth-in{display:grid;grid-template-columns:1fr 420px;gap:36px;align-items:center}
.auth-art{text-align:center}
.auth-art img{width:100%;max-width:430px;border-radius:var(--r-xl);box-shadow:var(--sh-big)}
.auth-art .hand{font-family:var(--font-serif);font-size:16px;color:var(--muted);margin:16px 0 0;line-height:1.7}
.auth-card{background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-xl);
  padding:30px 28px;box-shadow:var(--sh-card)}
.auth-card h1{font-family:var(--font-title);font-size:22px;margin:0 0 6px}
.auth-sub{margin:0 0 20px;font-size:13.5px;color:var(--muted)}
.auth-card label{display:block;font-size:12.5px;color:var(--muted);margin:14px 0 6px;font-weight:500}
.auth-card label .mut{color:#B4A392;font-weight:400}
.auth-card input[type=text],.auth-card input[type=email],
.auth-card input[type=password],.auth-card input[type=tel]{
  width:100%;border:1.5px solid var(--line2);border-radius:12px;padding:12px 14px;
  font:15px 'Noto Sans KR';background:var(--paper);color:var(--ink)}
.auth-card input:focus{outline:2px solid #FFD9B0;border-color:var(--orange2)}
.auth-err{background:#FDECEC;border:1px solid #F6C9C9;color:#A33;border-radius:11px;
  padding:10px 13px;font-size:13px;margin-top:12px}
.auth-guest{display:block;text-align:center;margin-top:12px;padding:12px;border-radius:12px;
  border:1.5px dashed var(--orange2);color:var(--orange);font-size:14px;font-weight:700}
.auth-guest:hover{background:#FFF3E6}
.auth-note{margin:8px 0 0;font-size:11.5px;color:#A2907F;line-height:1.6}
.auth-foot{margin:18px 0 0;text-align:center;font-size:13.5px;color:var(--muted)}
.auth-agree{margin-top:20px;background:var(--soft);border:1px solid var(--line2);
  border-radius:14px;padding:14px}
.auth-agree label{display:flex;gap:8px;align-items:flex-start;margin:0 0 9px;
  font-size:12.5px;color:var(--ink2);line-height:1.5}
.auth-agree label b{color:var(--orange);font-weight:700}
.auth-agree input{margin-top:2px;flex:none}
@media(max-width:900px){
  .auth-in{grid-template-columns:1fr}
  .auth-art{order:-1} .auth-art img{max-width:300px}
}

/* ── 회원 영역 ───────────────────────────────────────── */
.my-nav{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:69px;z-index:40}
.my-nav-in{display:flex;gap:4px;align-items:center;padding-top:8px;padding-bottom:8px;
  overflow-x:auto;white-space:nowrap}
.my-nav a{font-size:14px;font-weight:500;color:var(--muted);padding:8px 13px;border-radius:var(--r-pill)}
.my-nav a.on{background:var(--soft);color:var(--orange);font-weight:700}
.my-nav .btn-cta{flex:none;font-size:13.5px;padding:9px 16px;animation:none}
.my-msg{margin-top:14px;background:#EAF7E6;border:1px solid #CBE9C2;color:#356B28;
  border-radius:12px;padding:10px 14px;font-size:13.5px}

.my-h3{font-family:var(--font-title);font-size:19px;margin:30px 0 12px}
.my-h3:first-of-type{margin-top:6px}
.my-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.my-card{background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-l);
  overflow:hidden;box-shadow:var(--sh-card);display:flex;flex-direction:column;transition:.3s}
.my-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lift)}
.my-cover{display:block;aspect-ratio:3/2;background:var(--soft);overflow:hidden}
.my-cover img{width:100%;height:100%;object-fit:cover;display:block}
.my-cover.face{aspect-ratio:1/1;display:grid;place-items:center}
.my-noface{font-size:52px}
.my-body{padding:14px 15px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.my-body>b{font-size:15.5px}
.my-cast{font-size:12.5px;color:var(--orange)}
.my-meta{font-size:12px;color:var(--muted2)}
.my-btns{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-top:auto;padding-top:10px}
.my-btns .btn-cta{font-size:13px;padding:9px 15px;animation:none}
.my-btns .btn-ghost{font-size:12.5px;padding:7px 12px}
.my-del{border:none;background:none;color:#B0A091;font-size:12px;cursor:pointer;padding:6px 4px}
.my-del:hover{color:#C0392B;text-decoration:underline}

.my-empty{text-align:center;background:var(--soft);border:1px dashed var(--line2);
  border-radius:var(--r-xl);padding:42px 20px}
.my-empty img{width:120px;border-radius:14px;margin-bottom:14px}
.my-empty b{display:block;font-size:17px;font-family:var(--font-title)}
.my-empty p{margin:8px 0 18px;color:var(--muted);font-size:14px}
.my-none{color:var(--muted2);font-size:13.5px;margin:6px 0 0}

.my-welcome{background:linear-gradient(135deg,#FFF1DC,#FDE8D2);border:1px solid #F2DDBF;
  border-radius:var(--r-xl);padding:22px;margin-bottom:22px;text-align:center}
.my-welcome b{display:block;font-family:var(--font-title);font-size:19px}
.my-welcome p{margin:6px 0 14px;color:var(--muted)}

.my-two{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:30px}
.my-box{background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-l);padding:16px 18px}
.my-box-hd{display:flex;align-items:center;margin-bottom:12px}
.my-box-hd b{font-size:15px}
.my-box-hd a{margin-left:auto;font-size:12.5px}
.my-row{display:flex;align-items:center;gap:9px;padding:9px 0;font-size:13.5px}
.my-row+.my-row{border-top:1px solid var(--line)}
.my-row .btn-ghost{padding:5px 11px;font-size:12px}
.my-kids{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.my-kid{text-align:center;color:inherit}
.my-face{display:grid;place-items:center;width:100%;aspect-ratio:1/1;border-radius:14px;
  background:var(--soft);overflow:hidden;font-size:30px}
.my-face img{width:100%;height:100%;object-fit:cover}
.my-kid b{display:block;font-size:12.5px;margin-top:6px}
.my-kid span{display:block;font-size:11px;color:var(--muted2)}

.tag{display:inline-block;border-radius:999px;padding:2px 9px;font-size:11.5px;font-weight:700}
.tag.ok{background:#E8F7E4;color:#3B7A2A}
.tag.wait{background:#FFF1DC;color:#B4720F}
.tag.err{background:#FDECEC;color:#A33}

.my-table{overflow-x:auto;background:var(--surface);border:1px solid var(--line2);
  border-radius:var(--r-l);padding:4px 12px}
.my-table table{width:100%;border-collapse:collapse;font-size:13.5px}
.my-table th,.my-table td{padding:11px 8px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.my-table th{font-size:12px;color:var(--muted2);font-weight:600}
.my-table .r{text-align:right}
.my-table .mono{font-family:ui-monospace,Menlo,monospace;font-size:12px}
.my-table .mut{color:var(--muted2);font-size:12.5px}

.my-note{margin-top:26px;background:#F6FBF4;border:1px solid #DCEFD6;border-radius:var(--r-l);padding:16px 18px}
.my-note b{display:block;font-size:14px;color:#3F5A38;margin-bottom:8px}
.my-note ul{margin:0;padding-left:18px;color:#4A6642;font-size:13px;line-height:1.9}

@media(max-width:1000px){ .my-grid{grid-template-columns:1fr 1fr} .my-two{grid-template-columns:1fr} }
@media(max-width:640px){
  .my-grid{grid-template-columns:1fr}
  .my-nav{top:57px}
  .my-nav .btn-cta{display:none}
  .my-kids{grid-template-columns:repeat(3,1fr)}
}

/* ── 제작 위저드 ─────────────────────────────────────── */
.wz{padding:26px var(--pad-x) 70px;background:linear-gradient(180deg,var(--paper2),var(--paper))}
.wz-top{background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-l);
  padding:14px 18px;margin-bottom:22px;box-shadow:var(--sh-card)}
.wz-steps{display:flex;gap:6px;overflow-x:auto;white-space:nowrap;padding-bottom:4px}
.wz-steps span{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted2);
  padding:5px 11px;border-radius:var(--r-pill);flex:none}
.wz-steps span i{display:grid;place-items:center;width:19px;height:19px;border-radius:50%;
  background:var(--line);color:var(--muted);font-style:normal;font-size:11px;font-weight:700}
.wz-steps span.on{background:var(--soft);color:var(--orange);font-weight:700}
.wz-steps span.on i{background:var(--orange);color:#fff}
.wz-steps span.done{color:#3B7A2A}
.wz-steps span.done i{background:#CDEFC2;color:#2E6320}
.wz-bar{height:8px;border-radius:999px;background:#F0E7DA;overflow:hidden;margin-top:10px}
.wz-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--orange2),var(--orange));
  border-radius:999px;transition:width .5s}
.wz-save{text-align:right;font-size:11.5px;color:#7FA872;margin-top:6px}

.wz-head{text-align:center;margin-bottom:22px}
.wz-head h1{font-family:var(--font-title);font-size:clamp(21px,3vw,29px);margin:0 0 8px}
.wz-head p{margin:0;color:var(--muted);font-size:14.5px}

.wz-card{background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-xl);
  padding:26px 24px;box-shadow:var(--sh-card);max-width:880px;margin:0 auto}
.wz-label{display:block;font-size:13.5px;font-weight:700;margin:22px 0 10px}
.wz-label:first-child{margin-top:0}
.wz-label .mut{font-weight:400;color:var(--muted2);font-size:12px}
.wz-input{width:100%;border:1.5px solid var(--line2);border-radius:12px;padding:12px 14px;
  font:15px 'Noto Sans KR';background:var(--paper);color:var(--ink)}
.wz-input:focus{outline:2px solid #FFD9B0;border-color:var(--orange2)}
.wz-input.big{font-size:20px;text-align:center;padding:16px}
.wz-input.mono{font-family:ui-monospace,Menlo,monospace;font-size:12px}
textarea.wz-input{resize:vertical;line-height:1.7}
.wz-hr{border:none;border-top:1px solid var(--line);margin:24px 0}
.wz-next{width:100%;margin-top:26px}
.wz-next:disabled{opacity:.45;cursor:default;animation:none}
.wz-note{margin:10px 0 0;font-size:12.5px;color:var(--muted2);line-height:1.7}
.wz-note.test{background:#FFF6E4;border:1px solid #F3E0BC;color:#8A6A22;
  border-radius:11px;padding:11px 13px;margin-top:16px}
.wz-err{max-width:880px;margin:0 auto 16px;background:#FDECEC;border:1px solid #F6C9C9;
  color:#A33;border-radius:12px;padding:12px 15px;font-size:13.5px}
.wz-foot{max-width:880px;margin:20px auto 0;display:flex;align-items:center;gap:14px}
.wz-back{font-size:13.5px;color:var(--muted)}
.wz-exit{margin-left:auto;font-size:13px;color:var(--muted2)}

.wz-chips{display:flex;flex-wrap:wrap;gap:8px}
.wz-chip{position:relative;cursor:pointer}
.wz-chip input{position:absolute;opacity:0;pointer-events:none}
.wz-chip span{display:inline-block;border:1.5px solid var(--line2);background:var(--paper);
  border-radius:var(--r-pill);padding:9px 15px;font-size:13.5px;transition:.2s}
.wz-chip:hover span{border-color:var(--orange2)}
.wz-chip input:checked + span{background:var(--orange);border-color:transparent;color:#fff;font-weight:700}
.wz-chip.as-btn{border:none;background:none;padding:0;font:inherit}

/* 시작 · 아이 고르기 */
.mk-pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;
  max-width:880px;margin:0 auto}
.mk-kid{width:100%;cursor:pointer;background:var(--surface);border:2px solid var(--line2);
  border-radius:var(--r-xl);padding:22px 16px;text-align:center;transition:.25s}
.mk-kid:hover,.mk-kid.on{border-color:var(--orange2);transform:translateY(-4px);box-shadow:var(--sh-lift)}
.mk-kid .my-face{width:86px;margin:0 auto 12px;font-size:34px}
.mk-kid b{display:block;font-size:16px}
.mk-kid>span{display:block;font-size:12.5px;color:var(--muted2);margin-top:3px}
.mk-kid-go{display:block;margin-top:12px;font-size:13px;color:var(--orange);font-weight:700}
.mk-kid.new{border-style:dashed}

/* 등장인물 */
.mk-cast{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.mk-cast-item{position:relative;background:var(--soft);border:1.5px solid var(--line2);
  border-radius:14px;padding:12px 34px 12px 14px;min-width:130px}
.mk-cast-item.hero{border-color:var(--orange2);background:#FFF6EC}
.mk-cast-item b{display:block;font-size:14.5px}
.mk-cast-item span{font-size:12px;color:var(--muted2)}
.mk-x{position:absolute;right:8px;top:8px;border:none;background:none;color:var(--muted2);
  cursor:pointer;font-size:13px}
.mk-add-row{display:flex;gap:8px;flex-wrap:wrap}
.mk-add-row .wz-input{flex:1;min-width:110px}

/* 이야기 방식 */
.mk-two{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:8px}
.mk-big{cursor:pointer;border:2px solid var(--line2);border-radius:var(--r-l);overflow:hidden;
  display:block;transition:.25s;background:var(--paper)}
.mk-big input{position:absolute;opacity:0;pointer-events:none}
.mk-big img{width:100%;aspect-ratio:16/7;object-fit:cover;display:block}
.mk-big b{display:block;padding:12px 14px 2px;font-size:15.5px}
.mk-big span{display:block;padding:0 14px 14px;font-size:12.5px;color:var(--muted2)}
.mk-big.on{border-color:var(--orange);box-shadow:var(--sh-lift)}
.mk-pane{margin-top:18px}
.mk-src{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:9px}
.mk-src-item{cursor:pointer}
.mk-src-item input{position:absolute;opacity:0;pointer-events:none}
.mk-src-in{display:block;border:1.5px solid var(--line2);border-radius:12px;padding:11px 13px;background:var(--paper)}
.mk-src-in b{display:block;font-size:14px}
.mk-src-in i{font-style:normal;font-size:11.5px;color:var(--muted2)}
.mk-src-item input:checked + .mk-src-in{border-color:var(--orange);background:#FFF6EC}

/* 사진 */
.mk-photo-top{display:grid;grid-template-columns:280px 1fr;gap:22px;align-items:start}
.mk-qr{text-align:center;background:var(--soft);border:1px solid var(--line2);border-radius:var(--r-l);padding:16px}
.mk-qr b{display:block;font-size:14.5px;margin-bottom:4px}
.mk-qr p{margin:0 0 12px;font-size:12.5px;color:var(--muted2)}
.mk-qrimg{width:170px;height:170px;background:#fff;border-radius:12px;padding:8px}
.mk-qr .wz-input{margin-top:10px;font-size:11px;padding:8px 10px}
.mk-guide b{display:block;font-size:14px;margin:0 0 6px;color:#3B7A2A}
.mk-guide b.bad{color:#B3574A;margin-top:14px}
.mk-guide ul{margin:0;padding-left:18px;font-size:13px;color:var(--ink2);line-height:1.9}
.mk-guide ul.bad{color:#8A6058}
.mk-up{margin-top:18px;border:1px solid var(--line2);border-radius:var(--r-l);padding:14px}
.mk-up-hd{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.mk-up-hd b{font-size:15px}
.mk-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:12px}
.mk-slot{cursor:pointer;aspect-ratio:3/4;border:2px dashed var(--line2);border-radius:12px;
  display:grid;place-items:center;background-size:cover;background-position:center;transition:.2s}
.mk-slot:hover{border-color:var(--orange2)}
.mk-slot.has{border-style:solid;border-color:var(--orange2)}
.mk-slot.has .mk-slot-in{background:rgba(255,255,255,.82);border-radius:8px;padding:4px 8px}
.mk-slot-in{text-align:center}
.mk-slot-in i{display:block;font-style:normal;font-size:22px;color:var(--muted2)}
.mk-slot-in b{font-size:11.5px;color:var(--muted)}

/* 캐릭터 */
.mk-char{border:1px solid var(--line2);border-radius:var(--r-l);padding:16px;margin-bottom:16px}
.mk-char-hd{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.mk-char-hd b{font-size:16px}
.mk-cuts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.mk-cuts figure{margin:0}
.mk-cuts img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;display:block;background:var(--soft)}
.mk-cuts figcaption{text-align:center;font-size:11.5px;color:var(--muted2);margin-top:5px}
.mk-loading{text-align:center;padding:34px 10px}
.mk-loading b{display:block;font-size:15.5px;margin-top:14px}
.mk-loading p{margin:6px 0 0;font-size:13px;color:var(--muted2)}
.mk-dots{display:flex;gap:7px;justify-content:center}
.mk-dots i{width:11px;height:11px;border-radius:50%;background:var(--orange2);
  animation:pulseDot 1.2s ease-in-out infinite}
.mk-dots i:nth-child(2){animation-delay:.2s} .mk-dots i:nth-child(3){animation-delay:.4s}
.mk-fail{background:#FFF6E4;border:1px solid #F3E0BC;border-radius:14px;padding:16px}
.mk-fail b{display:block;font-size:14.5px;color:#8A6A22}
.mk-fail p{margin:6px 0 10px;font-size:13px;color:#8A7550}

/* 대본 */
.mk-scenes{display:flex;flex-direction:column;gap:8px}
.mk-scene{border:1px solid var(--line2);border-radius:14px;background:var(--paper);overflow:hidden}
.mk-scene.off{opacity:.5}
.mk-scene summary{cursor:pointer;display:flex;align-items:center;gap:11px;padding:13px 15px;list-style:none}
.mk-scene summary::-webkit-details-marker{display:none}
.mk-scene summary i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:var(--soft);color:var(--orange);font-style:normal;font-size:12px;font-weight:700;flex:none}
.mk-scene summary b{font-size:14px;flex:none}
.mk-scene summary span{flex:1;min-width:0;font-size:12.5px;color:var(--muted2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-scene-edit{padding:0 15px 12px}
.mk-redo{margin-top:6px}

/* 주문 */
.mk-sum{background:var(--soft);border:1px solid var(--line2);border-radius:var(--r-l);padding:16px 18px;margin-bottom:8px}
.mk-sum-t{display:block;font-family:var(--font-title);font-size:19px;margin-bottom:10px}
.mk-sum-row{display:flex;padding:7px 0;font-size:13.5px}
.mk-sum-row+.mk-sum-row{border-top:1px solid var(--line)}
.mk-sum-row span{width:110px;color:var(--muted2)}
.mk-prod{display:flex;flex-direction:column;gap:9px}
.mk-prod-item{cursor:pointer}
.mk-prod-item input{position:absolute;opacity:0;pointer-events:none}
.mk-prod-in{display:block;border:2px solid var(--line2);border-radius:14px;padding:14px 16px;background:var(--paper)}
.mk-prod-in b{display:block;font-size:15px}
.mk-prod-in i{display:block;font-style:normal;font-size:12.5px;color:var(--muted2);margin:3px 0 6px}
.mk-prod-in em{font-style:normal;font-weight:700;color:var(--orange);font-size:15px}
.mk-prod-item.on .mk-prod-in{border-color:var(--orange);background:#FFF6EC}
.mk-prod-item.must{cursor:default}
.mk-total{display:flex;align-items:center;margin-top:20px;padding-top:16px;border-top:2px solid var(--line)}
.mk-total span{font-size:14px;color:var(--muted)}
.mk-total b{margin-left:auto;font-size:26px;font-family:var(--font-title);color:var(--orange)}
.mk-pg{background:var(--soft);border-radius:14px;padding:40px;color:var(--muted2);margin-bottom:16px}

/* 제작 대시보드 */
.pg-list{display:flex;flex-direction:column}
.pg-row{display:flex;align-items:center;gap:12px;padding:14px 4px;font-size:14.5px}
.pg-row+.pg-row{border-top:1px solid var(--line)}
.pg-row b{flex:none;width:88px;font-weight:500}
.pg-row .bar{flex:1;min-width:80px}
.pg-row em{font-style:normal;font-size:13px;color:var(--muted);flex:none;min-width:56px;text-align:right}
.pg-row .btn-ghost{padding:6px 12px;font-size:12px}
.pg-done{margin-top:20px;text-align:center;background:linear-gradient(135deg,#FFF1DC,#FDE8D2);
  border:1px solid #F2DDBF;border-radius:var(--r-xl);padding:24px}
.pg-done b{display:block;font-family:var(--font-title);font-size:19px}
.pg-done p{margin:6px 0 16px;color:var(--muted);font-size:13.5px}

@media(max-width:760px){
  .mk-two{grid-template-columns:1fr}
  .mk-photo-top{grid-template-columns:1fr}
  .mk-cuts{grid-template-columns:repeat(2,1fr)}
  .mk-slots{grid-template-columns:repeat(2,1fr)}
  .wz-card{padding:20px 16px}
}

.ft-biz{max-width:760px;margin:14px auto 10px;display:flex;flex-wrap:wrap;gap:4px 14px;
  justify-content:center;font-size:11.5px;color:#A2907F;line-height:1.9}

/* ── 약관 · 실물책 ───────────────────────────────────── */
.lg-wrap{max-width:760px}
.lg-wrap h1{font-family:var(--font-title);font-size:26px;margin:0 0 6px}
.lg-date{color:var(--muted2);font-size:12.5px;margin:0 0 24px}
.lg-wrap h2{font-size:16px;margin:26px 0 8px;color:var(--ink)}
.lg-wrap p{font-size:14px;line-height:1.9;color:var(--ink2);margin:0 0 10px}
.lg-wrap ul{margin:0 0 12px;padding-left:20px;font-size:14px;line-height:1.95;color:var(--ink2)}
.lg-note{margin-top:26px;padding:12px 14px;background:var(--soft);border-radius:12px;
  font-size:12.5px;color:var(--muted2)}

.pr-hero{display:grid;grid-template-columns:300px 1fr;gap:28px;align-items:center}
.pr-hero img{width:100%;border-radius:var(--r-xl);box-shadow:var(--sh-big);
  animation:floatY 6s ease-in-out infinite}
.pr-hero h1{font-family:var(--font-title);font-size:clamp(21px,3vw,30px);margin:0 0 10px;line-height:1.4}
.pr-spec{margin:16px 0 0;padding-left:18px;font-size:14px;line-height:2;color:var(--ink2)}
.pr-wrap{display:grid;grid-template-columns:300px 1fr;gap:26px;align-items:start}
.pr-preview{text-align:center;background:var(--soft);border:1px solid var(--line2);
  border-radius:var(--r-xl);padding:20px;position:sticky;top:90px}
.pr-preview img{width:100%;border-radius:14px;box-shadow:var(--sh-card)}
.pr-preview b{display:block;margin-top:12px;font-size:15px}
.pr-preview span{font-size:12.5px;color:var(--muted2)}
@media(max-width:820px){ .pr-hero,.pr-wrap{grid-template-columns:1fr} .pr-preview{position:static} }

/* ── 모바일 전용 (QR 로 들어오는 화면) ───────────────── */
.mo{max-width:520px;margin:0 auto;padding:16px 14px 40px;min-height:100vh}
.mo-hd{display:flex;align-items:baseline;gap:10px;padding:6px 4px 14px}
.mo-hd b{font-family:var(--font-title);font-size:19px}
.mo-hd span{margin-left:auto;font-size:13px;color:var(--muted2)}
.mo-box{background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-xl);
  padding:20px 18px;box-shadow:var(--sh-card)}
.mo-box.center{text-align:center;padding:44px 22px;margin-top:14vh}
.mo-box.center h1{font-family:var(--font-title);font-size:21px;margin:12px 0 8px}
.mo-box.center p{color:var(--muted);font-size:14px;line-height:1.8;margin:0 0 20px}
.mo-emo{font-size:52px}
.mo-label{display:block;font-size:13px;font-weight:700;margin:0 0 10px}
.mo-slots{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}
.mo-slot{cursor:pointer;aspect-ratio:3/4;border:2px dashed var(--line2);border-radius:16px;
  display:grid;place-items:center;background-size:cover;background-position:center;transition:.2s}
.mo-slot.has{border-style:solid;border-color:var(--orange)}
.mo-slot.has .mo-slot-in{background:rgba(255,255,255,.88);border-radius:10px;padding:6px 10px}
.mo-slot-in{text-align:center}
.mo-slot-in i{display:block;font-style:normal;font-size:26px;color:var(--muted2)}
.mo-slot-in b{display:block;font-size:13px;color:var(--ink2);margin-top:2px}
.mo-slot-in em{font-style:normal;font-size:10.5px;color:var(--muted2)}
.mo-tip{background:var(--soft);border-radius:14px;padding:13px 15px;margin:14px 0}
.mo-tip b{display:block;font-size:13px;margin-bottom:5px}
.mo-tip span{display:block;font-size:12.5px;color:var(--muted);line-height:1.7}
.mo-tip span.bad{color:#A8695E;margin-top:3px}
.mo-tip.deny{background:#FFF0EE;border:1px solid #F5D2CC}
.mo-submit{width:100%;margin-top:6px}
.mo-submit:disabled{opacity:.4;animation:none}
.mo-note{margin:12px 0 0;font-size:11.5px;color:#A2907F;line-height:1.7;text-align:center}

/* 녹음 */
.vc-script{max-height:190px;overflow:auto;background:var(--soft);border-radius:14px;
  padding:16px 15px;margin:16px 0 12px}
.vc-guide{margin:0 0 10px;font-size:12px;color:var(--muted2)}
.vc-line{margin:0 0 12px;font-size:16px;line-height:1.85;color:#B3A395;transition:.3s}
.vc-line.on{color:var(--ink);font-weight:700;font-size:17.5px}
.vc-wave{background:var(--soft);border-radius:12px;overflow:hidden;height:72px}
.vc-wave canvas{width:100%;height:72px;display:block}
.vc-bar{height:8px;border-radius:999px;background:#F0E7DA;overflow:hidden;margin:10px 0 8px}
.vc-bar i{display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--orange2),var(--orange));transition:width .2s}
.vc-hint{margin:0 0 16px;font-size:12.5px;color:var(--muted2);text-align:center}
.vc-hint.ok{color:#3B7A2A;font-weight:700}
.vc-ctrl{display:grid;place-items:center}
.vc-rec,.vc-stop{display:grid;place-items:center;gap:3px;width:104px;height:104px;border:none;
  border-radius:50%;color:#fff;font-size:26px;cursor:pointer;
  background:linear-gradient(135deg,#FB8C2A,#F2620D);box-shadow:0 10px 24px rgba(238,122,34,.4);
  animation:pulseRing 2.6s ease-out infinite}
.vc-stop{background:linear-gradient(135deg,#7D8AA8,#5A6B8C);font-size:22px}
.vc-rec span,.vc-stop span{font-size:12.5px;font-weight:700}
.vc-consent{display:flex;gap:9px;align-items:flex-start;background:var(--soft);border-radius:12px;
  padding:13px 14px;font-size:12.5px;line-height:1.65;color:var(--ink2);margin-bottom:14px}
.vc-consent input{margin-top:2px;flex:none;width:18px;height:18px}
.vc-after-btns{display:flex;gap:9px}
.vc-after-btns button{flex:1;padding:13px;font-size:14px}
.vc-after-btns .btn-cta{animation:none}
.vc-after-btns .btn-cta:disabled{opacity:.4}

/* ── 공개 페이지 ─────────────────────────────────────── */
.st-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.st-card{color:inherit}
.st-cover{display:block;aspect-ratio:3/4;border-radius:var(--r-l);overflow:hidden;
  background:var(--soft);box-shadow:var(--sh-card)}
.st-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.st-card:hover .st-cover img{transform:scale(1.06)}
.st-card b{display:block;margin:10px 2px 2px;font-size:14.5px;color:var(--ink)}
.st-meta{display:block;margin:0 2px;font-size:12px;color:var(--muted2)}
.st-topics{display:grid;grid-template-columns:repeat(6,1fr);gap:11px}
.st-topic{background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-l);
  padding:18px 10px;text-align:center;color:inherit;transition:.25s}
.st-topic:hover{transform:translateY(-4px);border-color:var(--orange2);box-shadow:var(--sh-lift)}
.st-topic i{display:block;font-style:normal;font-size:28px}
.st-topic b{display:block;margin-top:7px;font-size:13px}
.st-detail{display:grid;grid-template-columns:300px 1fr;gap:34px;align-items:start}
.st-d-cover img{width:100%;border-radius:var(--r-xl);box-shadow:var(--sh-big)}
.st-detail h1{font-family:var(--font-title);font-size:clamp(23px,3vw,32px);margin:0 0 6px}
.st-author{margin:0 0 14px;color:var(--muted2);font-size:13px}
.st-badges{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
.st-badges span{background:var(--soft);border-radius:var(--r-pill);padding:5px 13px;
  font-size:12.5px;color:var(--muted)}
.st-outline{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.st-out{background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-l);padding:16px}
.st-out i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--soft);color:var(--orange);font-style:normal;font-size:12px;font-weight:700;margin-bottom:8px}
.st-out p{margin:0;font-size:13.5px;line-height:1.8;color:var(--ink2)}

/* 만드는 방법 */
.hw{display:flex;flex-direction:column;gap:22px}
.hw-row{display:grid;grid-template-columns:280px 1fr;gap:26px;align-items:center;
  background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-xl);
  padding:20px;box-shadow:var(--sh-card)}
.hw-row:nth-child(even){grid-template-columns:1fr 280px}
.hw-row:nth-child(even) .hw-img{order:2}
.hw-img img{width:100%;border-radius:var(--r-l);display:block;background:var(--soft)}
.hw-txt i{display:inline-block;font-style:normal;font-family:var(--font-title);
  font-size:26px;color:var(--orange2);line-height:1}
.hw-txt b{display:block;font-family:var(--font-title);font-size:20px;margin:6px 0 8px}
.hw-txt p{margin:0;font-size:14.5px;line-height:1.9;color:var(--muted)}

/* 가격 */
.pc-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:20px;align-items:start}
.pc-card{background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-xl);
  padding:26px 24px;box-shadow:var(--sh-card);position:relative}
.pc-card.main{border:2px solid var(--orange2);box-shadow:var(--sh-big)}
.pc-side{display:flex;flex-direction:column;gap:16px}
.pc-tag{position:absolute;top:-11px;left:24px;background:var(--orange);color:#fff;
  border-radius:var(--r-pill);padding:4px 13px;font-size:11.5px;font-weight:700}
.pc-tag.up{background:#8A7565}
.pc-name{display:block;font-family:var(--font-title);font-size:19px;margin:6px 0 10px}
.pc-price{font-family:var(--font-title);font-size:40px;color:var(--orange);line-height:1.1}
.pc-price em{font-style:normal;font-size:18px;margin-left:2px}
.pc-price.sm{font-size:26px}
.pc-card p{margin:8px 0 0;font-size:13px;color:var(--muted2)}
.pc-list{margin:18px 0 22px;padding-left:0;list-style:none}
.pc-list li{position:relative;padding-left:24px;font-size:14px;line-height:2.1;color:var(--ink2)}
.pc-list li::before{content:'✓';position:absolute;left:2px;color:#5CAE47;font-weight:900}
.pc-list.sm li{font-size:13px;line-height:1.95}
.pc-note{margin-top:26px;background:var(--soft);border:1px solid var(--line2);
  border-radius:var(--r-l);padding:18px 20px}
.pc-note b{display:block;font-size:14px;margin-bottom:8px}
.pc-note ul{margin:0;padding-left:18px;font-size:13.5px;line-height:2;color:var(--ink2)}

.faq-help{margin-top:30px;text-align:center;background:var(--soft);border-radius:var(--r-l);padding:22px}
.faq-help b{display:block;font-size:15px}
.faq-help p{margin:8px 0 0;font-size:13.5px;color:var(--muted);line-height:1.8}

@media(max-width:1000px){
  .st-grid{grid-template-columns:repeat(3,1fr)}
  .st-topics{grid-template-columns:repeat(4,1fr)}
  .pc-grid{grid-template-columns:1fr}
  .st-detail{grid-template-columns:1fr}
  .st-outline{grid-template-columns:1fr}
}
@media(max-width:640px){
  .st-grid{grid-template-columns:repeat(2,1fr)}
  .st-topics{grid-template-columns:repeat(3,1fr)}
  .hw-row,.hw-row:nth-child(even){grid-template-columns:1fr}
  .hw-row:nth-child(even) .hw-img{order:0}
}
.works-row{width:100%;border-radius:var(--r-xl);display:block;margin:0 0 22px;box-shadow:var(--sh-card)}

/* ── 히어로 무료 안내 ────────────────────────────────── */
.hero-free{margin:-10px 0 18px;font-size:13.5px;color:#3B7A2A}
.hero-free b{color:#2E6320}

/* ── 왜 뜬다키즈인가 ─────────────────────────────────── */
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.why-item{background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-l);
  padding:20px 18px;box-shadow:var(--sh-card);transition:.3s}
.why-item:hover{transform:translateY(-5px);box-shadow:var(--sh-lift)}
.why-item i{display:block;font-style:normal;font-size:26px;margin-bottom:8px}
.why-item b{display:block;font-size:15px;margin-bottom:5px}
.why-item span{display:block;font-size:12.5px;line-height:1.7;color:var(--muted)}

/* ── Before / After 4명 ──────────────────────────────── */
.ba2{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;margin-bottom:30px}
.ba2-item{margin:0}
.ba2-pair{display:grid;grid-template-columns:1fr auto 1fr;gap:6px;align-items:center}
.ba2-pair em{font-style:normal;font-size:20px;color:var(--orange2);font-weight:700}
.ba2-shot{position:relative;display:block;border-radius:var(--r-m);overflow:hidden;
  box-shadow:var(--sh-card);aspect-ratio:1/1;background:var(--soft)}
.ba2-shot img{width:100%;height:100%;object-fit:cover;display:block}
.ba2-shot i{position:absolute;left:5px;bottom:5px;font-style:normal;background:rgba(255,255,255,.92);
  border-radius:6px;padding:2px 7px;font-size:10.5px;font-weight:700;color:var(--muted)}
.ba2-shot.on{box-shadow:0 0 0 2.5px var(--orange2),var(--sh-lift)}
.ba2-shot.on i{background:var(--orange);color:#fff}
.ba2-item figcaption{margin-top:9px;font-size:13.5px;font-weight:700;color:var(--ink)}

.ba2-scenes{background:var(--soft);border:1px solid var(--line2);border-radius:var(--r-xl);
  padding:22px;margin-bottom:26px}
.ba2-scenes b{display:block;font-family:var(--font-title);font-size:18px}
.ba2-scenes p{margin:6px 0 16px;font-size:13.5px;color:var(--muted)}
.ba2-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ba2-row img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-m);
  display:block;box-shadow:var(--sh-card)}

.ba2-cta{background:linear-gradient(135deg,#FFF1DC,#FDE8D2);border:1px solid #F2DDBF;
  border-radius:var(--r-xl);padding:26px}
.ba2-cta b{display:block;font-family:var(--font-title);font-size:19px}
.ba2-cta p{margin:6px 0 16px;font-size:13.5px;color:var(--muted)}

@media(max-width:1000px){ .why{grid-template-columns:1fr 1fr} .ba2{grid-template-columns:1fr 1fr} }
@media(max-width:600px){ .ba2{grid-template-columns:1fr} .ba2-row{grid-template-columns:1fr} }

/* ── 영상동화 ────────────────────────────────────────── */
.wt{padding:26px var(--pad-x) 60px;background:linear-gradient(180deg,var(--paper2),var(--paper))}
.wt-head{text-align:center;margin-bottom:20px}
.wt-head h1{font-family:var(--font-title);font-size:clamp(21px,3vw,29px);margin:0 0 6px}
.wt-head p{margin:0;color:var(--muted);font-size:13.5px}
.wt-stage{position:relative;max-width:960px;margin:0 auto;border-radius:var(--r-xl);
  overflow:hidden;background:#1B1410;box-shadow:var(--sh-big)}
.wt-video{width:100%;aspect-ratio:16/9;display:block;background:#1B1410}
.wt-cap{position:absolute;left:0;right:0;bottom:52px;padding:0 8%;text-align:center;
  font-size:clamp(14px,1.6vw,19px);line-height:1.6;color:#fff;pointer-events:none;
  text-shadow:0 2px 10px rgba(0,0,0,.85)}
.wt-bar{max-width:960px;margin:18px auto 0;display:flex;align-items:center;gap:9px;
  justify-content:center;flex-wrap:wrap;position:relative;z-index:2}
.wt-btn{border:1.5px solid var(--line2);background:var(--surface);color:var(--ink);
  border-radius:var(--r-pill);padding:10px 18px;font:14px/1 'Noto Sans KR';font-weight:700;cursor:pointer}
.wt-btn.p{border:none;color:#fff;background:linear-gradient(135deg,var(--orange2),var(--orange))}
.wt-no{margin-left:8px;font-size:13px;color:var(--muted2)}
.wt-thumbs{max-width:960px;margin:16px auto 0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.wt-thumbs button{position:relative;width:100%;border:2.5px solid transparent;border-radius:12px;
  overflow:hidden;padding:0;background:none;cursor:pointer;aspect-ratio:16/9}
.wt-thumbs button.on{border-color:var(--orange)}
.wt-thumbs button.off{opacity:.4;cursor:default}
.wt-thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.wt-thumbs i{position:absolute;left:5px;top:4px;font-style:normal;background:rgba(0,0,0,.6);
  color:#fff;border-radius:5px;padding:1px 6px;font-size:10.5px;font-weight:700}
.wt-thumbs em{position:absolute;left:0;right:0;bottom:0;font-style:normal;background:rgba(0,0,0,.6);
  color:#fff;font-size:10px;text-align:center;padding:2px}
.wt-empty{max-width:640px;margin:0 auto;text-align:center;background:var(--surface);
  border:1px solid var(--line2);border-radius:var(--r-xl);padding:44px 24px;box-shadow:var(--sh-card)}
.wt-empty b{display:block;font-family:var(--font-title);font-size:19px;margin-top:16px}
.wt-empty p{margin:8px 0 20px;color:var(--muted);font-size:14px;line-height:1.8}
.wt-cta{max-width:960px;margin:26px auto 0;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.wt-cta .btn-cta{animation:none}
@media(max-width:640px){ .wt-cap{bottom:44px} .wt-thumbs button{flex:0 0 96px} }
.works-cap{margin:-10px 0 22px;font-size:13px;color:var(--muted2)}

/* ── 소셜 로그인 ─────────────────────────────────────── */
.sns{margin-top:20px}
.sns-or{display:block;position:relative;text-align:center;margin-bottom:14px}
.sns-or::before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line)}
.sns-or i{position:relative;background:var(--surface);padding:0 12px;font-style:normal;
  font-size:12px;color:var(--muted2)}
.sns-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  border-radius:12px;padding:13px;font-size:14.5px;font-weight:700;margin-bottom:8px;
  border:1.5px solid var(--line2);color:var(--ink);background:var(--paper);transition:.2s}
.sns-btn:hover{transform:translateY(-2px);box-shadow:var(--sh-card)}
.sns-btn b{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;
  font-size:12px;color:#fff}
.sns-btn.naver{background:#03C75A;border-color:#03C75A;color:#fff}
.sns-btn.naver b{background:rgba(255,255,255,.25)}
.sns-btn.naver:hover{color:#fff}
.sns-btn.kakao{background:#FEE500;border-color:#FEE500;color:#191600}
.sns-btn.kakao b{background:rgba(0,0,0,.15);color:#191600}
.sns-btn.google b{background:#4285F4}

/* ── 후기 ────────────────────────────────────────────── */
.rv-wrap{max-width:860px}
.rv-avg{color:var(--orange);font-size:16px}
.rv-strip{background:var(--soft);border:1px solid var(--line2);border-radius:var(--r-l);
  padding:14px 16px;margin-bottom:20px}
.rv-strip>b{display:block;font-size:13.5px;margin-bottom:10px}
.rv-strip-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.rv-strip-row a{flex:0 0 108px;aspect-ratio:1/1;border-radius:12px;overflow:hidden;
  box-shadow:var(--sh-card);transition:.25s}
.rv-strip-row a:hover{transform:translateY(-4px)}
.rv-strip-row img{width:100%;height:100%;object-fit:cover;display:block}

.rv-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.rv-tabs a{font-size:13.5px;padding:9px 15px;border-radius:var(--r-pill);
  border:1.5px solid var(--line2);color:var(--muted);background:var(--paper)}
.rv-tabs a.on{background:var(--orange);border-color:transparent;color:#fff;font-weight:700}
.rv-tabs a i{font-style:normal;opacity:.7;font-size:12px}

.rv-list{display:flex;flex-direction:column;gap:16px}
.rv-card{background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-l);
  padding:18px 20px;box-shadow:var(--sh-card);scroll-margin-top:90px}
.rv-hd{display:flex;align-items:center;gap:9px;margin-bottom:4px}
.rv-hd b{font-size:14.5px}
.rv-stars{color:#F5A623;font-size:13px;letter-spacing:1px}
.rv-tag{background:#FFF1DC;color:#B4720F;border-radius:999px;padding:2px 9px;font-size:11px;font-weight:700}
.rv-date{margin-left:auto;font-size:12px;color:var(--muted2)}
.rv-sub{margin:0 0 12px;font-size:12.5px;color:var(--orange)}
.rv-photos{display:grid;gap:8px;margin-bottom:13px}
.rv-photos.n1{grid-template-columns:minmax(0,340px)}
.rv-photos.n2{grid-template-columns:1fr 1fr}
.rv-photos.n3{grid-template-columns:repeat(3,1fr)}
.rv-photos figure{margin:0;position:relative}
.rv-photos img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;display:block;background:var(--soft)}
.rv-photos figcaption{position:absolute;left:6px;bottom:6px;background:rgba(255,255,255,.92);
  border-radius:7px;padding:2px 8px;font-size:11px;color:var(--muted);font-weight:700}
.rv-title{display:block;font-size:15.5px;margin-bottom:5px}
.rv-body{margin:0;font-size:14px;line-height:1.85;color:var(--ink2)}
.rv-foot{display:flex;align-items:center;gap:12px;margin-top:13px;padding-top:11px;
  border-top:1px solid var(--line);font-size:12.5px;color:var(--muted2)}
.rv-foot a{margin-left:auto;font-weight:700}
.rv-page{display:flex;gap:5px;justify-content:center;margin-top:24px;flex-wrap:wrap}
.rv-page a{min-width:32px;text-align:center;padding:7px 9px;border-radius:9px;
  border:1px solid var(--line2);font-size:13px;color:var(--muted)}
.rv-page a.on{background:var(--orange);border-color:transparent;color:#fff;font-weight:700}
.rv-note{margin-top:20px;font-size:12px;color:var(--muted2);text-align:center;
  background:var(--soft);border-radius:11px;padding:11px}

/* 메인에 얹는 후기 */
.rvm{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.rvm-card{background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-l);
  overflow:hidden;box-shadow:var(--sh-card);transition:.3s;color:inherit;display:block}
.rvm-card:hover{transform:translateY(-5px);box-shadow:var(--sh-lift)}
.rvm-img{display:block;aspect-ratio:4/3;background:var(--soft)}
.rvm-img img{width:100%;height:100%;object-fit:cover;display:block}
.rvm-in{padding:13px 14px 15px}
.rvm-in .rv-stars{font-size:12px}
.rvm-in b{display:block;font-size:14px;margin:5px 0 4px}
.rvm-in p{margin:0;font-size:12.5px;line-height:1.7;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rvm-in span{display:block;margin-top:8px;font-size:11.5px;color:var(--muted2)}
@media(max-width:900px){ .rvm{grid-template-columns:1fr 1fr} .rv-photos.n3{grid-template-columns:1fr 1fr} }
@media(max-width:560px){ .rvm{grid-template-columns:1fr} .rv-photos.n2,.rv-photos.n3{grid-template-columns:1fr} }
/* 제목은 지정한 자리에서만 줄바꿈합니다 */
.hero h1 .nb{display:inline-block;white-space:nowrap}
@media(max-width:420px){ .hero h1 .nb{white-space:normal} }

/* ── 주제 카드 (그림) ─────────────────────────────────── */
.st-topic.pic{padding:0;overflow:hidden}
.st-topic-img{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--soft)}
.st-topic-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.st-topic.pic:hover .st-topic-img img{transform:scale(1.07)}
.st-topic.pic b{display:block;padding:10px 6px 12px;margin:0;font-size:13.5px}

.mk-topics{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}
.mk-topic{cursor:pointer}
.mk-topic input{position:absolute;opacity:0;pointer-events:none}
.mk-topic-in{display:block;border:2.5px solid var(--line2);border-radius:14px;overflow:hidden;
  background:var(--paper);transition:.25s;text-align:center}
.mk-topic-in img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.mk-topic-in i{display:block;font-style:normal;font-size:28px;padding:16px 0 4px}
.mk-topic-in b{display:block;padding:8px 4px 10px;font-size:12.5px}
.mk-topic:hover .mk-topic-in{border-color:var(--orange2);transform:translateY(-3px)}
.mk-topic input:checked + .mk-topic-in{border-color:var(--orange);
  box-shadow:0 6px 18px rgba(238,122,34,.28)}
.mk-topic input:checked + .mk-topic-in b{background:var(--orange);color:#fff}
@media(max-width:820px){ .mk-topics{grid-template-columns:repeat(4,1fr)} }
@media(max-width:520px){ .mk-topics{grid-template-columns:repeat(3,1fr)} }

/* ── 원작 동화 목록 ──────────────────────────────────── */
.og-search{display:flex;align-items:center;gap:10px;background:var(--surface);
  border:1.5px solid var(--line2);border-radius:var(--r-pill);padding:8px 10px 8px 20px;margin-bottom:16px}
.og-search span{font-size:15px;opacity:.5}
.og-search input{flex:1;border:none;outline:none;background:transparent;color:var(--ink);font:15px 'Noto Sans KR'}
.og-search .btn-ghost{flex:none;padding:9px 18px}
.og-filters{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:20px}
.og-filters a{font-size:13.5px;padding:9px 17px;border-radius:var(--r-pill);
  border:1.5px solid var(--line2);color:var(--muted);background:var(--paper)}
.og-filters a.on{background:var(--orange);border-color:transparent;color:#fff;font-weight:700}
.og-wrap{display:grid;grid-template-columns:1fr 340px;gap:22px;align-items:start}
.og-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.og-card{color:inherit;text-align:center}
.og-cover{position:relative;display:block;aspect-ratio:16/10;border-radius:var(--r-l);
  overflow:hidden;background:var(--soft);box-shadow:var(--sh-card);border:2.5px solid transparent}
.og-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.og-card:hover .og-cover img{transform:scale(1.07)}
.og-card.on .og-cover{border-color:var(--orange)}
.og-cover i{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;
  background:var(--orange);color:#fff;font-style:normal;font-size:13px;display:grid;place-items:center}
.og-card b{display:block;margin:9px 2px 1px;font-size:14px}
.og-card>span{display:block;font-size:12px;color:var(--muted2)}
.og-detail{position:sticky;top:96px;background:var(--surface);border:1px solid var(--line2);
  border-radius:var(--r-xl);padding:18px;box-shadow:var(--sh-card)}
.og-detail-img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r-l);display:block}
.og-detail h2{font-family:var(--font-title);font-size:21px;margin:14px 0 3px}
.og-author{margin:0 0 12px;font-size:12.5px;color:var(--muted2)}
.og-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:13px}
.og-tags span{background:var(--soft);border-radius:var(--r-pill);padding:5px 12px;
  font-size:12px;color:var(--muted)}
.og-desc{margin:0 0 14px;font-size:13.5px;line-height:1.85;color:var(--ink2)}
.og-meta{display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--line);padding-top:12px}
.og-meta div{display:flex;align-items:center;gap:9px;padding:7px 0;font-size:13px}
.og-meta div span:nth-child(2){flex:1;color:var(--muted2)}
.og-rights{margin:10px 0 0;font-size:11.5px;color:var(--muted2);line-height:1.6}
.mk-src-in img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:9px;
  display:block;margin-bottom:8px;background:var(--soft)}
@media(max-width:900px){
  .og-wrap{grid-template-columns:1fr}
  .og-detail{position:static;order:-1}
}

/* ── 사진 품질검사 ───────────────────────────────────── */
.qc-top{display:grid;grid-template-columns:260px 1fr;gap:22px;align-items:start}
.qc-main{position:relative}
.qc-main img{width:100%;border-radius:var(--r-l);display:block;box-shadow:var(--sh-card)}
.qc-crown{position:absolute;left:8px;top:8px;background:rgba(255,255,255,.94);border-radius:999px;
  padding:4px 11px;font-size:11.5px;font-weight:700;color:var(--orange-d)}
.qc-scores>b{display:block;font-size:15px;margin-bottom:12px}
.qc-row{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:13.5px}
.qc-ic{width:22px;text-align:center}
.qc-lb{width:52px;color:var(--muted)}
.qc-bar{flex:1;height:9px;border-radius:999px;background:#F0E7DA;overflow:hidden}
.qc-bar i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--orange2),var(--orange));transition:width .6s}
.qc-row b{width:44px;text-align:right;font-size:13px}
.qc-verdict{display:flex;gap:11px;align-items:flex-start;margin-top:14px;padding:13px 15px;border-radius:14px}
.qc-verdict>span:first-child{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  color:#fff;font-size:13px;font-weight:900;flex:none}
.qc-verdict b{display:block;font-size:14px}
.qc-verdict span span{display:block;font-size:12px;color:var(--muted2);margin-top:3px}
.qc-verdict.good{background:#EEF9EA;border:1px solid #CFE9C4}
.qc-verdict.good>span:first-child{background:#5CAE47}
.qc-verdict.ok{background:#FFF6E4;border:1px solid #F3E0BC}
.qc-verdict.ok>span:first-child{background:#E9A62B}
.qc-verdict.low{background:#FDECEC;border:1px solid #F6C9C9}
.qc-verdict.low>span:first-child{background:#D9645A}
.qc-tips{margin-top:16px;background:var(--soft);border-radius:14px;padding:14px 16px}
.qc-tips b{display:block;font-size:13.5px;margin-bottom:7px}
.qc-tips span{display:block;font-size:13px;color:var(--ink2);line-height:1.8}
.qc-h{display:block;font-size:14.5px;margin-bottom:11px}
.qc-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:11px}
.qc-item{margin:0}
.qc-item img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:12px;display:block;
  border:2.5px solid var(--line2)}
.qc-item.good img{border-color:#5CAE47}
.qc-item.low img{border-color:#E5B0AA}
.qc-item figcaption{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:12px}
.qc-pill{margin-left:auto;border-radius:999px;padding:1px 8px;font-size:11px;font-weight:700}
.qc-pill.good{background:#EEF9EA;color:#3B7A2A}
.qc-pill.ok{background:#FFF1DC;color:#B4720F}
.qc-pill.low{background:#FDECEC;color:#A33}

/* ── 다시 만들기 ─────────────────────────────────────── */
.rt-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}
.rt-sum div{background:var(--soft);border-radius:14px;padding:16px;text-align:center}
.rt-sum div.err{background:#FDECEC}
.rt-sum b{display:block;font-family:var(--font-title);font-size:26px}
.rt-sum div.err b{color:#C0392B}
.rt-sum span{font-size:12.5px;color:var(--muted2)}
.rt-list{display:flex;flex-direction:column;gap:9px}
.rt-item{display:flex;align-items:center;gap:12px;background:#FFF6E4;border:1px solid #F3E0BC;
  border-radius:14px;padding:13px 15px}
.rt-ic{font-size:19px}
.rt-body{flex:1;min-width:0}
.rt-body b{display:block;font-size:14px}
.rt-body b em{font-style:normal;font-weight:400;color:var(--muted2);font-size:12.5px}
.rt-body>span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.rt-try{font-size:11.5px;color:#B4720F}
.rt-engine{margin-top:20px;background:var(--soft);border-radius:14px;padding:15px 17px;text-align:center}
.rt-engine b{display:block;font-size:14px}
.rt-engine span{display:block;font-size:12.5px;color:var(--muted);margin:5px 0 12px}

/* ── 온보딩 ──────────────────────────────────────────── */
.wc{max-width:760px}
.wc-steps{display:flex;flex-direction:column;gap:10px;margin-bottom:26px}
.wc-step{display:flex;align-items:center;gap:14px;background:var(--surface);
  border:1.5px solid var(--line2);border-radius:var(--r-l);padding:16px 18px;
  color:inherit;transition:.25s}
.wc-step:hover{transform:translateX(4px);border-color:var(--orange2)}
.wc-step.done{background:var(--soft);border-color:#CFE9C4}
.wc-n{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;flex:none;
  background:var(--orange);color:#fff;font-weight:700}
.wc-step.done .wc-n{background:#5CAE47}
.wc-b{flex:1;min-width:0}
.wc-b b{display:block;font-size:15.5px}
.wc-b span{display:block;font-size:12.5px;color:var(--muted);margin-top:3px}
.wc-go{font-size:13px;color:var(--orange);font-weight:700;flex:none}
.wc-step.done .wc-go{color:#3B7A2A}
.wc-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ── 공유뷰 ──────────────────────────────────────────── */
.sh-wrap{max-width:880px}
.sh-head{text-align:center;margin-bottom:24px}
.sh-head h1{font-family:var(--font-title);font-size:clamp(21px,3vw,29px);margin:0 0 8px}
.sh-pill{display:inline-block;background:var(--soft);border-radius:999px;padding:5px 14px;
  font-size:12.5px;color:var(--muted)}
.sh-msg{margin:14px auto 0;max-width:520px;background:#FFF6E4;border:1px solid #F3E0BC;
  border-radius:14px;padding:13px 16px;font-size:14px;line-height:1.8;color:#7A6224}
.sh-body{display:grid;grid-template-columns:1fr 300px;gap:24px;align-items:start}
.sh-book img{width:100%;border-radius:var(--r-xl);box-shadow:var(--sh-big);display:block;margin-bottom:16px}

/* ── 초등부 ──────────────────────────────────────────── */
.el-badge{display:inline-block;background:#EAF1FF;color:#3F6FD8;border-radius:999px;
  padding:5px 14px;font-size:12.5px;font-weight:700;margin-bottom:10px}
.el-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.el-card{background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-xl);
  overflow:hidden;box-shadow:var(--sh-card);transition:.3s;color:inherit;display:block}
.el-card:hover{transform:translateY(-6px);box-shadow:var(--sh-lift)}
.el-img{display:block;aspect-ratio:16/10;background:var(--soft)}
.el-img img{width:100%;height:100%;object-fit:cover;display:block}
.el-in{display:block;padding:16px 18px 18px}
.el-in i{display:block;font-style:normal;font-size:24px;margin-bottom:5px}
.el-in b{display:block;font-family:var(--font-title);font-size:17px}
.el-in>span{display:block;font-size:12.5px;color:var(--muted);margin:5px 0 10px;line-height:1.7}
.el-in em{font-style:normal;font-size:12.5px;color:var(--orange);font-weight:700}
.el-note{margin-top:26px;background:var(--soft);border:1px solid var(--line2);
  border-radius:var(--r-l);padding:18px 20px}
.el-note b{display:block;font-size:14.5px;margin-bottom:6px}
.el-note p{margin:0;font-size:13.5px;line-height:1.85;color:var(--ink2)}
.el-wrap{max-width:900px}
.el-hero{display:grid;grid-template-columns:1fr 300px;gap:28px;align-items:center;margin-bottom:34px}
.el-hero h1{font-family:var(--font-title);font-size:clamp(22px,3vw,30px);margin:0 0 8px}
.el-sub{margin:0 0 20px;font-size:13.5px;color:var(--muted2)}
.el-hero-img img{width:100%;border-radius:var(--r-xl);box-shadow:var(--sh-card)}
.el-form{background:var(--soft);border-radius:var(--r-l);padding:16px 18px}
.el-mini{display:flex;gap:9px;flex-wrap:wrap}
.el-mini a{display:flex;align-items:center;gap:7px;background:var(--surface);
  border:1px solid var(--line2);border-radius:var(--r-pill);padding:9px 15px;color:inherit;font-size:13.5px}
.el-mini a:hover{border-color:var(--orange2)}
.el-mini i{font-style:normal}
.mk-inc{background:#EEF9EA;color:#3B7A2A;border-radius:999px;padding:2px 9px;font-size:11.5px}
.mk-add{background:#FFF1DC;color:#B4720F;border-radius:999px;padding:2px 9px;font-size:11.5px}

@media(max-width:900px){
  .qc-top{grid-template-columns:1fr}
  .wc-two,.sh-body,.el-hero{grid-template-columns:1fr}
  .el-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){ .el-grid{grid-template-columns:1fr} .rt-sum{grid-template-columns:1fr} }

/* ── 단체주문 ────────────────────────────────────────── */
.gp-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:center;margin-bottom:32px}
.gp-hero h1{font-family:var(--font-title);font-size:clamp(24px,3.3vw,36px);line-height:1.35;margin:0 0 12px}
.gp-hero h1 .o{color:var(--orange)}
.gp-hero-img img{width:100%;border-radius:var(--r-xl);box-shadow:var(--sh-big);display:block}
.gp-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:40px;
  background:var(--soft);border-radius:var(--r-xl);padding:20px}
.gp-stats div{text-align:center}
.gp-stats b{display:block;font-family:var(--font-title);font-size:22px;color:var(--orange-d)}
.gp-stats span{font-size:12px;color:var(--muted2)}
.gp-why{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.gp-w{display:flex;gap:14px;background:var(--surface);border:1px solid var(--line2);
  border-radius:var(--r-l);padding:18px 20px;box-shadow:var(--sh-card)}
.gp-w>b{font-family:var(--font-title);font-size:19px;color:var(--orange2);flex:none}
.gp-w span b{display:block;font-size:15.5px;margin-bottom:5px}
.gp-w span span{display:block;font-size:13px;line-height:1.8;color:var(--muted)}
.gp-quote{display:grid;grid-template-columns:1.15fr 1fr;gap:20px;align-items:stretch}
.gp-q-left{background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-xl);padding:20px}
.gp-tiers{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.gp-tiers span{border:1.5px solid var(--line2);border-radius:var(--r-pill);padding:8px 14px;
  font-size:12.5px;color:var(--muted);transition:.25s}
.gp-tiers span.on{border-color:var(--orange);background:#FFF1DC;color:var(--orange-d);font-weight:700}
.gp-tiers b{color:var(--orange)}
.gp-q-right{background:linear-gradient(150deg,#2E2118,#4A3527);color:#fff;border-radius:var(--r-xl);
  padding:24px;display:flex;flex-direction:column;justify-content:center}
.gp-q-right>span{font-size:13px;opacity:.75}
.gp-q-right>b{display:block;font-family:var(--font-title);font-size:38px;margin:4px 0 18px}
.gp-q-row{display:flex;justify-content:space-between;padding:8px 0;font-size:14px;
  border-bottom:1px solid rgba(255,255,255,.14)}
.gp-q-row span{opacity:.75}
.gp-q-total{display:flex;justify-content:space-between;align-items:center;margin-top:14px}
.gp-q-total span{font-size:14px;opacity:.75}
.gp-q-total b{font-family:var(--font-title);font-size:26px;color:#FFB65C}
.gp-save{margin:10px 0 0;font-size:12.5px;color:#FFD9A6}
.gp-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gp-step{background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-l);padding:18px}
.gp-step>b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--orange);color:#fff;font-size:14px;margin-bottom:11px}
.gp-step span b{display:block;font-size:14.5px;margin-bottom:5px}
.gp-step span span{display:block;font-size:12.5px;line-height:1.8;color:var(--muted)}
.gp-apply{display:grid;grid-template-columns:1fr 1.15fr;gap:26px;margin-top:40px;
  background:var(--soft);border:1px solid var(--line2);border-radius:var(--r-xl);padding:26px}
.gp-apply h2{font-family:var(--font-title);font-size:23px;margin:0 0 8px}
.gp-apply p{font-size:14px;line-height:1.85;color:var(--muted)}
.gp-tel{font-family:var(--font-title);font-size:19px;color:var(--orange-d)}
.gp-tel span{display:block;font-family:var(--font-body);font-size:12.5px;color:var(--muted2)}
.gp-form{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:12px}
.gp-form label span{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px}
@media(max-width:900px){
  .gp-hero,.gp-quote,.gp-apply,.gp-why{grid-template-columns:1fr}
  .gp-stats{grid-template-columns:repeat(3,1fr)}
  .gp-steps{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .gp-stats,.gp-steps,.gp-form{grid-template-columns:1fr}
}
.el-cta{background:var(--soft);border-radius:var(--r-l);padding:18px;text-align:center;margin-bottom:16px}
.el-cta span{display:block;margin-top:9px;font-size:12.5px;color:var(--muted2)}
.og-filters.sub{margin-top:-8px}
.og-filters.sub a{font-size:12.5px;padding:7px 13px}
.og-filters a i{font-style:normal;opacity:.6;font-size:11px}
.og-tags .hot{background:#FFF1DC;color:var(--orange-d);font-weight:700}
.og-beats{border-top:1px solid var(--line);padding-top:13px;margin-bottom:13px}
.og-beats b{display:block;font-size:13.5px;margin-bottom:8px}
.og-beats ol{margin:0;padding-left:18px}
.og-beats li{font-size:12.5px;line-height:1.75;color:var(--ink2);margin-bottom:4px}
.og-beats>span{display:block;margin-top:9px;font-size:11.5px;color:var(--muted2)}

/* ── Before / After — 한 명을 크게, 나머지는 작게 ────── */
.ba3{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;
  max-width:760px;margin:0 auto 30px}
.ba3-shot{margin:0}
.ba3-shot img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-xl);
  display:block;box-shadow:var(--sh-card);background:var(--soft)}
.ba3-shot.on img{box-shadow:0 0 0 3px var(--orange2),var(--sh-lift)}
.ba3-shot figcaption{margin-top:11px;font-size:14px;font-weight:700;color:var(--ink)}
.ba3-shot.on figcaption{color:var(--orange-d)}
.ba3-mid{text-align:center;color:var(--orange2)}
.ba3-mid span{display:block;font-size:30px;font-weight:700}
.ba3-mid b{display:block;font-size:12px;color:var(--muted2);margin-top:4px;white-space:nowrap}

.ba4{margin-bottom:26px}
.ba4-h{display:block;font-size:14px;color:var(--muted);margin-bottom:13px}
.ba4-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.ba4-item{margin:0;width:112px}
.ba4-pair{display:grid;grid-template-columns:1fr 1fr;gap:3px;border-radius:12px;overflow:hidden;
  box-shadow:var(--sh-card)}
.ba4-pair img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:var(--soft)}
.ba4-pair img.on{outline:2px solid var(--orange2);outline-offset:-2px}
.ba4-item figcaption{margin-top:7px;font-size:12.5px;color:var(--muted)}

@media(max-width:640px){
  .ba3{grid-template-columns:1fr 1fr;gap:10px}
  .ba3-mid{grid-column:1/-1;order:-1}
  .ba3-mid span{font-size:20px;transform:rotate(90deg);display:inline-block}
  .ba4-item{width:88px}
}

/* ── 고객센터 ────────────────────────────────────────── */
.hp{max-width:960px}
.hp-quick{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:26px}
.hp-quick a{background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-l);
  padding:20px;text-align:center;color:inherit;box-shadow:var(--sh-card);transition:.25s}
.hp-quick a:hover{transform:translateY(-4px);border-color:var(--orange2)}
.hp-quick i{display:block;font-style:normal;font-size:24px;margin-bottom:8px}
.hp-quick b{display:block;font-size:15px}
.hp-quick span{display:block;font-size:12.5px;color:var(--muted2);margin-top:4px}
.hp-two{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;align-items:start}
.hp-row{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:14px}
.hp-row label span{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px}
.hp-item{padding:13px 16px;border-bottom:1px solid var(--line)}
.hp-item b{display:block;font-size:14px}
.hp-item>span{font-size:12px;color:var(--muted2);margin-right:7px}
.hp-ans{margin:9px 0 0;background:var(--soft);border-radius:10px;padding:11px 13px;
  font-size:13px;line-height:1.8;color:var(--ink2)}

/* ── 공지사항 ────────────────────────────────────────── */
.nt-list{display:flex;flex-direction:column;gap:9px}
.nt-item{display:flex;align-items:center;gap:12px;background:var(--surface);
  border:1px solid var(--line2);border-radius:var(--r-l);padding:15px 18px;color:inherit;transition:.2s}
.nt-item:hover{border-color:var(--orange2);transform:translateX(3px)}
.nt-item.pin{background:var(--soft)}
.nt-item b{flex:1;min-width:0;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nt-date{font-size:12.5px;color:var(--muted2);flex:none}
.nt-head{border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:22px}
.nt-head h1{font-family:var(--font-title);font-size:clamp(20px,2.8vw,27px);margin:10px 0 6px}
.nt-head p{margin:0;font-size:12.5px;color:var(--muted2)}
.nt-body{font-size:14.5px;line-height:2;color:var(--ink2);min-height:200px}
.nt-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:32px;padding-top:18px;border-top:1px solid var(--line);font-size:13px}
@media(max-width:820px){
  .hp-two{grid-template-columns:1fr}
  .hp-quick{grid-template-columns:1fr}
  .hp-row{grid-template-columns:1fr}
}

/* ── 우리 아이 관리 ──────────────────────────────────── */
.kd-hero{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;margin-bottom:24px}
.kd-hero h1{font-family:var(--font-title);font-size:clamp(22px,3vw,30px);margin:0 0 8px}
.kd-hero-r{text-align:right}
.kd-hand{font-family:var(--font-hand);font-size:16px;line-height:1.7;color:var(--pink);margin:0 0 12px}

.kd-tabs{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 12px;margin-bottom:20px}
.kd-tab{position:relative;flex:0 0 96px;text-align:center;color:inherit;
  background:var(--surface);border:2px solid var(--line2);border-radius:var(--r-l);
  padding:14px 8px 12px;transition:.25s}
.kd-tab:hover{transform:translateY(-4px);border-color:var(--orange2)}
.kd-tab.on{border-color:var(--orange);background:#FFF8F0}
.kd-tab i{position:absolute;top:-9px;left:50%;transform:translateX(-50%);font-style:normal;font-size:17px}
.kd-tab b{display:block;font-size:13.5px;margin-top:8px}
.kd-tab>span:last-child{display:block;font-size:11.5px;color:var(--muted2)}
.kd-tab.add{border-style:dashed}
.kd-av{display:grid;place-items:center;width:56px;height:56px;margin:0 auto;border-radius:50%;
  overflow:hidden;background:var(--soft)}
.kd-av img{width:100%;height:100%;object-fit:cover}
.kd-av em{font-style:normal;font-size:22px;color:var(--muted2)}

.kd-two{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.kd-prof{display:grid;grid-template-columns:132px 1fr;gap:16px;padding:16px}
.kd-prof-img{text-align:center}
.kd-prof-img img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r-l);display:block;
  margin-bottom:9px;box-shadow:var(--sh-card)}
.kd-prof-img span{display:grid;place-items:center;aspect-ratio:3/4;background:var(--soft);
  border-radius:var(--r-l);font-size:34px;margin-bottom:9px}
.kd-prof-rows div{display:flex;align-items:baseline;gap:10px;padding:8px 0;
  border-bottom:1px solid var(--line);font-size:13.5px}
.kd-prof-rows div:last-child{border-bottom:none}
.kd-prof-rows span{width:74px;flex:none;color:var(--muted2);font-size:12.5px}
.kd-prof-rows b{flex:1;min-width:0;word-break:keep-all}

.kd-photos{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:16px}
.kd-photos figure{margin:0}
.kd-photos img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:10px;display:block}
.kd-photos figcaption{font-size:10.5px;color:var(--muted2);text-align:center;margin-top:4px}
.kd-add{display:grid;place-content:center;aspect-ratio:3/4;border:1.5px dashed var(--line2);
  border-radius:10px;font-size:11.5px;color:var(--muted);text-align:center;gap:3px}
.kd-add:hover{border-color:var(--orange2);color:var(--orange)}
.kd-add span{font-size:20px}
.kd-note{margin:0;padding:0 16px 16px;font-size:12px;line-height:1.75;color:var(--muted2)}

.kd-main{padding:16px}
.kd-cuts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.kd-cuts figure{margin:0}
.kd-cuts img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px;display:block;
  box-shadow:var(--sh-card)}
.kd-cuts figcaption{font-size:10.5px;color:var(--muted2);text-align:center;margin-top:4px}
.kd-styles{padding:16px}

.kd-works{display:grid;grid-template-columns:1fr 1fr;gap:11px;padding:16px}
.kd-works a{color:inherit}
.kd-works span{display:grid;place-items:center;aspect-ratio:4/3;border-radius:11px;overflow:hidden;
  background:var(--soft)}
.kd-works img{width:100%;height:100%;object-fit:cover}
.kd-works em{font-style:normal;font-size:22px}
.kd-works b{display:block;font-size:13px;margin-top:7px}
.kd-works i{display:block;font-style:normal;font-size:11.5px;color:var(--muted2)}

.kd-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:16px}
.kd-stats div{background:var(--soft);border-radius:12px;padding:14px;text-align:center}
.kd-stats span{display:block;font-size:12px;color:var(--muted2)}
.kd-stats b{display:block;font-family:var(--font-title);font-size:21px;margin-top:3px;color:var(--orange-d)}

.kd-sibs{display:flex;gap:12px;flex-wrap:wrap;padding:16px}
.kd-sibs a{width:98px;text-align:center;color:inherit;background:var(--paper);
  border:1.5px solid var(--line2);border-radius:var(--r-l);padding:13px 8px;transition:.25s}
.kd-sibs a:hover{transform:translateY(-4px);border-color:var(--orange2)}
.kd-sibs a.add{border-style:dashed}
.kd-sibs b{display:block;font-size:13px;margin-top:7px}
.kd-sibs i{display:block;font-style:normal;font-size:11px;color:var(--muted2)}

/* 아이 상세 (사진·캐릭터 손보는 화면) */
.ch{max-width:900px}
.ch-head{display:flex;gap:20px;align-items:center;margin:16px 0 28px}
.ch-face{display:grid;place-items:center;width:96px;height:96px;flex:none;border-radius:50%;
  overflow:hidden;background:var(--soft);box-shadow:var(--sh-card)}
.ch-face img{width:100%;height:100%;object-fit:cover}
.ch-face span{font-size:38px}
.ch-head h1{font-family:var(--font-title);font-size:26px;margin:0 0 4px}
.ch-head p{margin:0 0 12px;font-size:13.5px;color:var(--muted)}
.ch-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:12px;margin-bottom:16px}
.ch-photo{margin:0;position:relative}
.ch-photo img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:12px;display:block;
  box-shadow:var(--sh-card)}
.ch-photo figcaption{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:12px}
.ch-photo figcaption form{margin-left:auto}
.ch-photo button{border:none;background:none;color:var(--muted2);cursor:pointer;font-size:13px;padding:0 2px}
.ch-photo button:hover{color:#C0392B}
.ch-up{background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-l);
  padding:18px;margin-bottom:30px}
.ch-drop{display:block;border:2px dashed var(--line2);border-radius:var(--r-m);padding:26px 18px;
  text-align:center;cursor:pointer;transition:.25s}
.ch-drop:hover{border-color:var(--orange2);background:var(--soft)}
.ch-drop input{display:block;margin:0 auto 10px;font-size:12.5px}
.ch-drop b{display:block;font-size:15px}
.ch-drop span{display:block;font-size:12.5px;color:var(--muted2);margin-top:4px}
.ch-up-row{display:flex;gap:10px;justify-content:flex-end;margin-top:13px;flex-wrap:wrap}
.ch-chars{display:flex;flex-direction:column;gap:14px;margin-bottom:18px}
.ch-char{background:var(--surface);border:2px solid var(--line2);border-radius:var(--r-l);padding:16px}
.ch-char.on{border-color:var(--orange);background:#FFFDF7}
.ch-char-hd{display:flex;align-items:center;gap:9px;margin-bottom:12px;font-size:14px}
.ch-char-hd .mut{margin-left:auto;font-size:12px;color:var(--muted2)}
.ch-cuts{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:13px}
.ch-cuts figure{margin:0}
.ch-cuts img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:11px;display:block}
.ch-cuts figcaption{font-size:11px;color:var(--muted2);text-align:center;margin-top:4px}
.ch-make{background:var(--soft);border-radius:var(--r-l);padding:20px;margin-bottom:30px}
.ch-make>b{display:block;font-size:16px}
.ch-make>p{margin:5px 0 14px;font-size:13px;color:var(--muted)}
.ch-danger{margin-top:34px;padding-top:20px;border-top:1px solid var(--line)}
.ch-danger b{display:block;font-size:14.5px}
.ch-danger p{margin:5px 0 12px;font-size:13px;color:var(--muted)}

.mk-styles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.mk-style{cursor:pointer}
.mk-style input{position:absolute;opacity:0;pointer-events:none}
.mk-style-in{display:block;border:2.5px solid var(--line2);border-radius:13px;overflow:hidden;
  background:var(--paper);text-align:center;transition:.25s}
.mk-style-in img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.mk-style-in b{display:block;padding:8px 4px 9px;font-size:12.5px}
.mk-style:hover .mk-style-in{border-color:var(--orange2);transform:translateY(-3px)}
.mk-style input:checked + .mk-style-in{border-color:var(--orange);box-shadow:0 6px 16px rgba(238,122,34,.25)}
.mk-style input:checked + .mk-style-in b{background:var(--orange);color:#fff}

@media(max-width:900px){
  .kd-two{grid-template-columns:1fr}
  .kd-hero{grid-template-columns:1fr}
  .kd-hero-r{text-align:left}
  .kd-prof{grid-template-columns:110px 1fr}
}
@media(max-width:560px){
  .kd-photos,.kd-cuts,.ch-cuts,.mk-styles{grid-template-columns:repeat(2,1fr)}
  .kd-works,.kd-stats{grid-template-columns:1fr}
  .ch-head{flex-direction:column;text-align:center}
}

/* ── 저장된 캐릭터 그대로 쓰기 ───────────────────────── */
.wz-card.sv{border:2px solid var(--orange);background:#FFFDF7}
.sv-h{display:block;font-family:var(--font-title);font-size:19px;color:var(--orange-d)}
.sv-p{margin:6px 0 16px;font-size:14px;line-height:1.8;color:var(--ink2)}
.sv-list{display:flex;flex-direction:column;gap:14px;margin-bottom:18px}
.sv-item b{display:block;font-size:14px;margin-bottom:8px}
.sv-cuts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.sv-cuts img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;display:block;
  box-shadow:var(--sh-card)}
.sv-note{margin:12px 0 0;font-size:12.5px;color:var(--muted2);text-align:center}

/* 지금 고른 화풍을 제목 옆에 달아 둡니다 — 어느 화풍 캐릭터인지 바로 보이게 */
.sv-st{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:999px;
  background:var(--soft);color:var(--ink2);font-size:12px;font-style:normal;
  font-family:var(--font-body);vertical-align:middle;white-space:nowrap}

/* 다른 화풍으로 만들어 두셨을 때 — 「없다」가 아니라 「무엇을 갖고 계신지」를 말합니다 */
.wz-card.sv.alt{border-color:var(--line2);background:var(--soft)}
.wz-card.sv.alt .sv-h{color:var(--ink)}
.wz-card.sv.alt .sv-p{margin-bottom:0}
@media(max-width:480px){
  .sv-st{display:block;margin:6px 0 0;width:fit-content}
}
.wz-sep{display:flex;align-items:center;gap:14px;margin:22px 0;color:var(--muted2);font-size:13px}
.wz-sep::before,.wz-sep::after{content:'';flex:1;height:1px;background:var(--line)}
@media(max-width:560px){ .sv-cuts{grid-template-columns:repeat(2,1fr)} }
.mk-slot.done{margin:0;position:relative}
.mk-slot.done img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r-m);
  display:block;box-shadow:var(--sh-card)}
.mk-slot.done figcaption{position:absolute;left:6px;bottom:6px;background:rgba(255,255,255,.92);
  border-radius:7px;padding:2px 8px;font-size:11px;font-weight:700;color:var(--muted)}
.mk-slot-in em{display:block;font-style:normal;font-size:11px;color:var(--muted2);margin-top:3px}
.wz-note.ok{background:#EEF9EA;border:1px solid #CFE9C4;border-radius:11px;padding:11px 14px;color:#3B7A2A}

/* ── 등장인물 등록 ───────────────────────────────────── */
.ct-hd{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.ct-hd b{font-family:var(--font-title);font-size:19px}
.ct-cnt{margin-left:auto;font-size:12.5px;color:var(--muted2)}
.ct-main{display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:start}
.ct-main-img{text-align:center}
.ct-main-img img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r-l);
  display:block;margin-bottom:9px;box-shadow:var(--sh-card)}
.ct-main-img span{display:grid;place-items:center;aspect-ratio:3/4;background:var(--soft);
  border-radius:var(--r-l);font-size:38px;margin-bottom:9px}
.ct-row{display:flex;align-items:center;gap:12px;margin-bottom:9px}
.ct-row>span:first-child{width:46px;flex:none;font-size:13px;color:var(--muted)}
.ct-row .wz-input{flex:1;margin:0}
.ct-sex{display:flex;gap:7px}
.ct-sex label{cursor:pointer}
.ct-sex input{position:absolute;opacity:0}
.ct-sex span{display:block;border:1.5px solid var(--line2);border-radius:var(--r-pill);
  padding:8px 18px;font-size:13.5px;background:var(--paper)}
.ct-sex input:checked + span{background:var(--orange);border-color:transparent;color:#fff;font-weight:700}
.ct-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.ct-item{position:relative;background:var(--paper);border:1.5px solid var(--line2);
  border-radius:var(--r-l);padding:15px 12px;text-align:center}
.ct-del{position:absolute;top:6px;right:6px}
.ct-del button{border:none;background:none;color:var(--muted2);cursor:pointer;font-size:13px}
.ct-del button:hover{color:#C0392B}
.ct-av{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 8px;border-radius:50%;
  overflow:hidden;background:var(--soft)}
.ct-av img{width:100%;height:100%;object-fit:cover}
.ct-av em{font-style:normal;font-size:24px}
.ct-item b{display:block;font-size:13.5px}
.ct-nm{display:block;font-size:12px;color:var(--muted2);margin-top:2px}
.ct-edit{display:inline-block;margin-top:8px;font-size:12px}
.ct-add{display:grid;place-content:center;gap:5px;min-height:150px;cursor:pointer;
  border:2px dashed var(--line2);border-radius:var(--r-l);background:none;color:var(--muted);
  font:13px/1.5 'Noto Sans KR';text-align:center}
.ct-add:hover{border-color:var(--orange2);color:var(--orange)}
.ct-add span{font-size:24px}
.ct-new{margin-top:16px;background:var(--soft);border-radius:var(--r-l);padding:18px}
.ct-new-row{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:10px;margin-bottom:6px}
.ct-new-row label span{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px}
.ct-new-btns{display:flex;gap:9px;margin-top:14px}
.ct-tip{background:#FFF6E4;border:1px solid #F3E0BC;border-radius:var(--r-l);padding:18px 20px;margin-bottom:18px}
.ct-tip b{display:block;font-size:14.5px;margin-bottom:8px}
.ct-tip ul{margin:0;padding-left:18px}
.ct-tip li{font-size:13px;line-height:1.9;color:var(--ink2)}
@media(max-width:700px){
  .ct-main{grid-template-columns:1fr}
  .ct-new-row{grid-template-columns:1fr}
}

/* ── 캐릭터 Studio ───────────────────────────────────── */
.st-wait{text-align:center;padding:44px 20px}
.st-wait b{display:block;font-size:17px;margin:16px 0 5px}
.st-wait p{margin:0;font-size:13.5px;color:var(--muted)}
.st-bar{max-width:340px;margin:18px auto 0;height:9px;border-radius:999px;background:#F0E7DA;overflow:hidden}
.st-bar i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--orange2),var(--orange));transition:width .6s}
.st-top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.st-src{font-size:13px;color:var(--muted)}
.st-src b{color:var(--ink)}
.st-wrap{display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:start}
.st-h{display:block;font-family:var(--font-title);font-size:17px}
.st-p{margin:5px 0 14px;font-size:13px;color:var(--muted)}
.st-cands{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:11px}
.st-cand{margin:0}
.st-cand button{position:relative;width:100%;border:2.5px solid var(--line2);border-radius:14px;
  background:var(--paper);padding:0 0 10px;cursor:pointer;overflow:hidden;transition:.25s;
  font:13px/1.4 'Noto Sans KR';color:inherit;text-align:center}
.st-cand button:hover{transform:translateY(-4px);border-color:var(--orange2)}
.st-cand.on button{border-color:var(--orange);box-shadow:0 6px 18px rgba(238,122,34,.25)}
.st-cand-img{display:block}
.st-cand-img img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.st-cand b{display:block;margin-top:8px;font-size:12.5px}
.st-cand span:last-child{display:block;font-size:11px;color:var(--muted2)}
.st-check{position:absolute;top:7px;right:7px;z-index:2;display:grid;place-items:center;
  width:23px;height:23px;border-radius:50%;background:var(--orange);color:#fff;font-style:normal;font-size:12px}
.st-side{position:sticky;top:84px}
.st-cuts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.st-cuts figure{margin:0}
.st-cuts img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:11px;display:block}
.st-cuts figcaption{font-size:10.5px;color:var(--muted2);text-align:center;margin-top:4px}

/* ── Character Lock ──────────────────────────────────── */
.lk-band{display:flex;align-items:center;gap:14px;background:#2E2118;color:#fff;
  border-radius:var(--r-xl);padding:16px 20px;margin-bottom:16px}
.lk-band>span:first-child{font-size:24px}
.lk-band b{display:block;font-size:15px}
.lk-band span span{display:block;font-size:12.5px;opacity:.8;margin-top:3px}
.lk-cnt{margin-left:auto;flex:none;color:#FFB65C;font-family:var(--font-title);font-size:16px}
.lk-wrap{display:grid;grid-template-columns:1fr 320px;gap:16px;align-items:start}
.lk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.lk-item{position:relative;background:var(--paper);border:2px solid var(--line2);
  border-radius:var(--r-l);padding:16px 12px;text-align:center}
.lk-item.on{border-color:#5CAE47;background:#F7FCF4}
.lk-role{position:absolute;top:8px;left:8px;font-size:10.5px;color:var(--muted2)}
.lk-ic{position:absolute;top:7px;right:8px;font-size:14px}
.lk-img{display:grid;place-items:center;width:66px;height:66px;margin:8px auto;border-radius:50%;
  overflow:hidden;background:var(--soft)}
.lk-img img{width:100%;height:100%;object-fit:cover}
.lk-img em{font-style:normal;font-size:26px}
.lk-item b{display:block;font-size:14px}
.lk-desc{display:block;font-size:11.5px;color:var(--muted2);margin:3px 0 10px;min-height:15px}
.lk-prev{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.lk-prev img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:9px;display:block}
.lk-notes{display:flex;flex-direction:column;gap:7px}
.lk-notes span{font-size:13px;color:var(--ink2)}
.lk-agree{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;line-height:1.7;color:var(--ink2)}
.lk-agree input{margin-top:3px;flex:none}
@media(max-width:900px){ .st-wrap,.lk-wrap{grid-template-columns:1fr} .st-side{position:static} }

/* ── 부모 목소리 ─────────────────────────────────────── */
.vc-badges{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:26px}
.vc-badges div{background:var(--soft);border-radius:var(--r-l);padding:15px;text-align:center}
.vc-badges span{display:block;font-size:22px;margin-bottom:5px}
.vc-badges b{font-size:13px}
.vc-list{display:flex;flex-direction:column;gap:11px}
.vc-item{display:grid;grid-template-columns:180px 1fr auto auto;gap:16px;align-items:center;
  background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-l);
  padding:15px 18px;box-shadow:var(--sh-card)}
.vc-who{display:flex;align-items:center;gap:11px}
.vc-face{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--soft);font-size:22px;flex:none}
.vc-who b{display:block;font-size:14.5px}
.vc-who span span{display:block;font-size:12px;color:var(--muted2)}
.vc-play{display:flex;align-items:center;gap:11px;min-width:0}
.vc-btn{flex:none;width:34px;height:34px;border-radius:50%;border:none;cursor:pointer;
  background:var(--orange);color:#fff;font-size:12px}
.vc-btn:hover{background:var(--orange-d)}
.vc-wave{flex:1;display:flex;align-items:center;gap:2px;height:30px;min-width:0}
.vc-wave i{flex:1;background:var(--orange2);border-radius:2px;opacity:.55;min-width:2px}
.vc-nowave{font-size:12px;color:var(--muted2)}
.vc-act{display:flex;gap:7px}
.vc-add{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.vc-rec,.vc-preset{display:block;text-align:center;color:inherit;border-radius:var(--r-l);
  padding:18px 12px;transition:.25s;border:1.5px solid var(--line2);background:var(--surface)}
.vc-rec{border:2px solid var(--orange);background:#FFF8F0}
.vc-rec:hover,.vc-preset:hover{transform:translateY(-4px);border-color:var(--orange2)}
.vc-rec span,.vc-preset span{display:block;font-size:26px;margin-bottom:7px}
.vc-rec b,.vc-preset b{display:block;font-size:13.5px}
.vc-rec em,.vc-preset em{display:block;font-style:normal;font-size:11.5px;color:var(--muted2);margin-top:3px}
@media(max-width:900px){
  .vc-badges{grid-template-columns:1fr 1fr}
  .vc-add{grid-template-columns:1fr 1fr}
  .vc-item{grid-template-columns:1fr;gap:11px}
}
.vc-rec img,.vc-preset img{width:54px;height:54px;border-radius:14px;object-fit:cover;
  display:block;margin:0 auto 8px}
.mk-ico{width:52px;height:52px;border-radius:13px;object-fit:cover;display:block;margin:0 auto 10px}
.st-ico{width:38px;height:38px;border-radius:10px;object-fit:cover;display:block}

/* ── 부모님 목소리 ───────────────────────────────────── */
.voice-sec{background:var(--soft)}
.vs-in{display:grid;grid-template-columns:1fr 1.1fr 240px;gap:28px;align-items:center}
.vs-img img{width:100%;border-radius:var(--r-xl);box-shadow:var(--sh-big);display:block}
.vs-body h2{font-family:var(--font-title);font-size:clamp(21px,2.9vw,29px);line-height:1.4;margin:0 0 10px}
.vs-list{margin:16px 0 20px;padding:0;list-style:none}
.vs-list li{position:relative;padding-left:22px;font-size:14px;line-height:2.1;color:var(--ink2)}
.vs-list li::before{content:'✓';position:absolute;left:0;color:var(--orange);font-weight:700}
.vs-quote{margin:18px 0 0;font-family:var(--font-hand);font-size:17px;line-height:1.7;color:var(--pink)}
.vs-phone img{width:100%;border-radius:var(--r-l);box-shadow:var(--sh-card);display:block}

/* ── 기다리는 시간 ───────────────────────────────────── */
.wt-in{display:grid;grid-template-columns:1.1fr 1fr 200px;gap:26px;align-items:center;
  background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-xl);
  padding:26px;box-shadow:var(--sh-card);text-align:left}
.wt-book img{width:100%;border-radius:var(--r-l);box-shadow:var(--sh-big);display:block}
.wt-steps{display:flex;flex-direction:column;gap:11px}
.wt-step{display:flex;align-items:center;gap:11px;background:var(--paper);
  border:1.5px solid var(--line2);border-radius:14px;padding:14px 16px;font-size:14px}
.wt-step.done{background:#EEF9EA;border-color:#CFE9C4}
.wt-ic{font-size:19px}
.wt-step b{flex:none}
.wt-bar{flex:1;height:8px;border-radius:999px;background:#F0E7DA;overflow:hidden;min-width:50px}
.wt-bar i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--orange2),var(--orange))}
.wt-st{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--muted)}
.wt-step.done .wt-st{color:#3B7A2A}
.wt-side{text-align:center}
.wt-film{display:block;font-size:38px;margin-top:10px}
.wt-note{margin:18px 0 0;font-size:13.5px;color:var(--muted)}

/* ── 세 가지 추억 ────────────────────────────────────── */
.three3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:24px}
.t3{background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-xl);
  overflow:hidden;box-shadow:var(--sh-card);transition:.3s;padding-bottom:18px}
.t3:hover{transform:translateY(-6px);box-shadow:var(--sh-lift)}
.t3 img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;margin-bottom:14px}
.t3 b{display:block;font-family:var(--font-title);font-size:17px}
.t3 span{display:block;font-size:13px;color:var(--muted);margin-top:5px;padding:0 14px}
.print-band{display:grid;grid-template-columns:240px 1fr;gap:24px;align-items:center;
  background:var(--soft);border:1px solid var(--line2);border-radius:var(--r-xl);padding:22px;text-align:left}
.print-band img{width:100%;border-radius:var(--r-l);box-shadow:var(--sh-card);display:block}
.print-band p{margin:0 0 10px;font-size:15px;line-height:1.8}
.pb-price{display:block;font-family:var(--font-title);font-size:20px;margin-bottom:14px}
.pb-price span{color:var(--orange-d)}
@media(max-width:900px){
  .vs-in,.wt-in,.print-band{grid-template-columns:1fr}
  .three3{grid-template-columns:1fr}
  .vs-phone{max-width:220px;margin:0 auto}
}

/* ── 완성작 ──────────────────────────────────────────── */
.wk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.wk-card{background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-xl);
  overflow:hidden;box-shadow:var(--sh-card);color:inherit;transition:.3s;display:block}
.wk-card:hover{transform:translateY(-6px);box-shadow:var(--sh-lift)}
.wk-cover{position:relative;display:grid;place-items:center;aspect-ratio:4/3;background:var(--soft)}
.wk-cover img{width:100%;height:100%;object-fit:cover;display:block}
.wk-cover em{font-style:normal;font-size:34px}
.wk-badges{position:absolute;left:8px;bottom:8px;display:flex;gap:4px}
.wk-badges i{display:grid;place-items:center;width:25px;height:25px;border-radius:8px;
  background:rgba(255,255,255,.93);font-style:normal;font-size:13px}
.wk-body{display:block;padding:14px 16px 16px}
.wk-body b{display:block;font-size:15px;line-height:1.5}
.wk-kid{display:block;font-size:12.5px;color:var(--orange-d);margin-top:4px}
.wk-meta{display:block;font-size:12px;color:var(--muted2);margin-top:3px}
.wk-wrap{max-width:960px}
.wk-head{display:grid;grid-template-columns:300px 1fr;gap:28px;align-items:start;margin:16px 0 34px}
.wk-hero{display:grid;place-items:center;aspect-ratio:4/3;border-radius:var(--r-xl);
  overflow:hidden;background:var(--soft);box-shadow:var(--sh-big)}
.wk-hero img{width:100%;height:100%;object-fit:cover}
.wk-hero span{font-size:44px}
.wk-head h1{font-family:var(--font-title);font-size:clamp(21px,3vw,28px);margin:0 0 7px}
.wk-sub{margin:0 0 20px;font-size:13.5px;color:var(--muted)}
.wk-h{font-size:14.5px;margin:0 0 11px}
.wk-gets{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wk-get{display:flex;align-items:center;gap:12px;background:var(--surface);
  border:1.5px solid var(--line2);border-radius:14px;padding:14px 16px;color:inherit;transition:.25s}
.wk-get:hover{border-color:var(--orange2);transform:translateX(3px)}
.wk-get>span:first-child{font-size:21px}
.wk-get b{flex:1;min-width:0;font-size:14px}
.wk-get em{display:block;font-style:normal;font-size:11.5px;color:var(--muted2);font-weight:400;margin-top:2px}
.wk-go{font-size:12px;color:var(--orange);font-weight:700;white-space:nowrap}
.wk-get.off{opacity:.5;border-style:dashed}
.wk-get.off .wk-go{color:var(--muted2)}
.wk-get.buy{background:#FFF8F0;border-color:var(--orange2)}
.wk-scenes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.wk-scenes figure{margin:0}
.wk-scenes img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;display:block;
  box-shadow:var(--sh-card)}
.wk-scenes figcaption{font-size:11.5px;color:var(--muted2);margin-top:5px}
.wk-note{margin:14px 0 0;font-size:13px;color:var(--muted)}
@media(max-width:760px){ .wk-head{grid-template-columns:1fr} .wk-gets{grid-template-columns:1fr} }

/* ══════════════════════════════════════════════════════
   다크 모드 — 나중에 추가한 화면들
   (밝은 배경에 밝은 글씨가 되어 안 보이는 곳을 잡습니다)
   ══════════════════════════════════════════════════════ */
html[data-theme="dark"]{
  /* 새 화면에서 자주 쓰는 밝은색 조합 */
  --ok-bg:#14332A;  --ok-line:#1F5240;  --ok-ink:#8EE0B4;
  --wn-bg:#3A2E14;  --wn-line:#5C4820;  --wn-ink:#F2CE7E;
  --er-bg:#3A1C1C;  --er-line:#5C2A2A;  --er-ink:#F0A5A0;
}
html[data-theme="dark"] .qc-verdict.good,
html[data-theme="dark"] .wt-step.done,
html[data-theme="dark"] .lk-item.on,
html[data-theme="dark"] .my-msg,
html[data-theme="dark"] .wz-note.ok{
  background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok-ink)}
html[data-theme="dark"] .qc-verdict.ok,
html[data-theme="dark"] .rt-item,
html[data-theme="dark"] .ct-tip,
html[data-theme="dark"] .sh-msg,
html[data-theme="dark"] .warn{
  background:var(--wn-bg);border-color:var(--wn-line);color:var(--wn-ink)}
html[data-theme="dark"] .qc-verdict.low,
html[data-theme="dark"] .auth-err{
  background:var(--er-bg);border-color:var(--er-line);color:var(--er-ink)}
html[data-theme="dark"] .ct-tip b,
html[data-theme="dark"] .ct-tip li,
html[data-theme="dark"] .rt-body b,
html[data-theme="dark"] .rt-body span{color:var(--wn-ink)}

html[data-theme="dark"] .qc-pill.good,
html[data-theme="dark"] .tag.t-ok{background:var(--ok-bg);color:var(--ok-ink)}
html[data-theme="dark"] .qc-pill.ok,
html[data-theme="dark"] .tag.t-warn{background:var(--wn-bg);color:var(--wn-ink)}
html[data-theme="dark"] .qc-pill.low,
html[data-theme="dark"] .tag.t-err{background:var(--er-bg);color:var(--er-ink)}

/* 밝은 크림 배경을 어둡게 */
html[data-theme="dark"] .wz-card.sv,
html[data-theme="dark"] .kd-tab.on,
html[data-theme="dark"] .ch-char.on,
html[data-theme="dark"] .wk-get.buy,
html[data-theme="dark"] .vc-rec,
html[data-theme="dark"] .og-filters a.on,
html[data-theme="dark"] .gp-tiers span.on,
html[data-theme="dark"] .mk-inc,
html[data-theme="dark"] .mk-add{background:#2A2038;border-color:var(--orange2)}

/* 흰 바탕 조각들 */
html[data-theme="dark"] .qc-crown,
html[data-theme="dark"] .wk-badges i,
html[data-theme="dark"] .mk-slot.done figcaption,
html[data-theme="dark"] .ba-shot span{background:rgba(20,28,58,.92);color:var(--ink)}

/* 막대·바탕 */
html[data-theme="dark"] .qc-bar,
html[data-theme="dark"] .st-bar,
html[data-theme="dark"] .wt-bar{background:#22304F}

/* 어두운 띠는 그대로 두되 글자만 */
html[data-theme="dark"] .lk-band{background:#161F3E}
html[data-theme="dark"] .gp-q-right{background:linear-gradient(150deg,#161F3E,#22304F)}

/* 옅은 회색 글씨가 안 보이는 곳 */
html[data-theme="dark"] .auth-note,
html[data-theme="dark"] .demo-note,
html[data-theme="dark"] .tr-foot,
html[data-theme="dark"] .auth-card label .mut,
html[data-theme="dark"] .my-del{color:var(--muted2)}
html[data-theme="dark"] .voice-note{background:var(--ok-bg);color:var(--ok-ink)}
html[data-theme="dark"] .auth-guest:hover{background:#2A2038}
html[data-theme="dark"] .wt-st{color:var(--ink2)}
html[data-theme="dark"] .wt-step.done .wt-st{color:var(--ok-ink)}
html[data-theme="dark"] .wt-step b{color:var(--ink)}
html[data-theme="dark"] .btn-ghost{background:#1A2648;border-color:#2A3A62;color:var(--ink)}
html[data-theme="dark"] .btn-ghost:hover{background:#22304F;border-color:var(--orange2)}
html[data-theme="dark"] .og-tags .hot{background:#3A2E14;color:#F2CE7E}
html[data-theme="dark"] .print-band{background:#1A2648;border-color:#2A3A62}
html[data-theme="dark"] .voice-sec{background:#131C3A}
.tr-metric{color:var(--m,var(--muted))}
html[data-theme="dark"] .tr-metric{color:var(--ink2);filter:brightness(1.5)}
html[data-theme="dark"] .hero-free{color:#8EE0B4}
html[data-theme="dark"] .hero-free b{color:#A8ECC6}

/* ── 회원 홈 ─────────────────────────────────────────── */
.mh-hero{display:flex;align-items:center;gap:20px;margin-bottom:22px;flex-wrap:wrap}
.mh-hero h1{font-family:var(--font-title);font-size:clamp(20px,2.8vw,27px);margin:0 0 6px}
.mh-hero .kd-hand{margin-left:auto;text-align:right;font-size:15px}
.mh-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:28px}
.mh-stats a{display:block;background:var(--soft);border-radius:var(--r-l);padding:16px 12px;
  text-align:center;color:inherit;transition:.2s}
.mh-stats a:hover{background:var(--paper2);transform:translateY(-3px)}
.mh-stats div{background:var(--soft);border-radius:var(--r-l);padding:16px 12px;text-align:center}
.mh-stats span{display:block;font-size:20px;margin-bottom:4px}
.mh-stats a b{display:block;font-family:var(--font-title);font-size:22px;color:var(--orange-d)}
.mh-stats a em{display:block;font-style:normal;font-size:11.5px;color:var(--muted2);margin-top:2px}
.mh-stats b{display:block;font-family:var(--font-title);font-size:22px;color:var(--orange-d)}
.mh-stats em{display:block;font-style:normal;font-size:11.5px;color:var(--muted2);margin-top:2px}
.mh-hd{display:flex;align-items:center;gap:12px;margin:26px 0 13px;flex-wrap:wrap}
.mh-hd h3{font-family:var(--font-title);font-size:18px;margin:0}
.mh-hd>a{margin-left:auto;font-size:13px}
.mh-tabs{display:flex;gap:6px}
.mh-tabs a{border:1.5px solid var(--line2);border-radius:var(--r-pill);padding:6px 13px;
  font-size:12.5px;color:var(--muted)}
.mh-tabs a.on{background:var(--orange);border-color:transparent;color:#fff;font-weight:700}
.mh-making{display:flex;flex-direction:column;gap:11px}
.mh-card{display:grid;grid-template-columns:104px 1fr auto;gap:15px;align-items:center;
  background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-l);
  padding:14px;box-shadow:var(--sh-card)}
.mh-thumb img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:11px;display:block}
.mh-body b{display:block;font-size:15px}
.mh-tag{display:block;font-size:12px;color:var(--muted2);margin:3px 0 8px}
.mh-bar{display:block;height:8px;border-radius:999px;background:#F0E7DA;overflow:hidden}
.mh-bar i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--orange2),var(--orange));transition:width .6s}
.mh-eta{display:block;font-size:12px;color:var(--muted);margin-top:5px}
.mh-act{display:flex;flex-direction:column;gap:7px;align-items:center}
.mh-three{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
.mh-kids{display:flex;gap:10px;flex-wrap:wrap;padding:14px 16px}
.mh-kids a{width:76px;text-align:center;color:inherit}
.mh-kids a:hover b{color:var(--orange)}
.mh-kids b{display:block;font-size:12.5px;margin-top:6px}
.mh-kids i{display:block;font-style:normal;font-size:11px;color:var(--muted2)}
.mh-kids .kd-av{width:48px;height:48px}
html[data-theme="dark"] .mh-bar{background:#22304F}
@media(max-width:900px){
  .mh-stats{grid-template-columns:repeat(3,1fr)}
  .mh-three{grid-template-columns:1fr}
  .mh-card{grid-template-columns:80px 1fr}
  .mh-act{grid-column:1/-1;flex-direction:row;justify-content:flex-end}
}
@media(max-width:560px){ .mh-stats{grid-template-columns:1fr 1fr} }

/* ── 초등부 상세 ─────────────────────────────────────── */
.eh{position:relative;padding:52px 0 46px;overflow:hidden;background:var(--soft)}
.eh::before{content:'';position:absolute;inset:0;background:var(--eh-img) center/cover;
  opacity:.10;filter:blur(2px)}
.eh-in{position:relative;display:grid;grid-template-columns:1.15fr 300px;gap:32px;align-items:center}
.eh-body h1{font-family:var(--font-title);font-size:clamp(25px,4vw,40px);line-height:1.32;margin:0 0 12px}
.eh-body h1 .o{color:var(--orange)}
.eh-img img{width:100%;border-radius:var(--r-xl);box-shadow:var(--sh-big);display:block}
.ef-sec{padding:0}
.ef-band{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-xl);
  padding:22px;margin-top:-28px;position:relative;z-index:2;box-shadow:var(--sh-card)}
.ef-band div{text-align:center}
.ef-band span{display:block;font-size:24px;margin-bottom:6px}
.ef-band b{display:block;font-size:14px}
.ef-band em{display:block;font-style:normal;font-size:12px;color:var(--muted2);margin-top:3px}
.ep-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
.ep-card{background:var(--surface);border:1.5px solid var(--line2);border-radius:var(--r-xl);
  padding:22px 20px;color:inherit;transition:.28s;box-shadow:var(--sh-card);display:block}
.ep-card:hover{transform:translateY(-6px);border-color:var(--orange2);box-shadow:var(--sh-lift)}
.ep-ic{display:block;font-size:30px;margin-bottom:10px}
.ep-card b{display:block;font-family:var(--font-title);font-size:17px}
.ep-card>span:last-child{display:block;font-size:13px;color:var(--muted);margin-top:6px;line-height:1.7}
.ec-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:24px}
.ec-card{background:var(--surface);border:1.5px solid var(--line2);border-radius:var(--r-l);
  padding:20px;text-align:center}
.ec-card b{display:block;font-family:var(--font-title);font-size:20px;color:var(--orange-d)}
.ec-card span{display:block;font-size:12.5px;color:var(--muted);margin-top:7px;line-height:1.7}
.soft-sec{background:var(--soft)}
.ef-notify{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:20px;
  align-items:center;font-size:12.5px}
.ef-notify input{border:1.5px solid var(--line2);border-radius:var(--r-pill);
  padding:10px 16px;font-size:13px;min-width:230px;background:var(--paper);color:var(--ink)}
.ef-notify span{color:var(--muted2)}
.center{text-align:center}
@media(max-width:900px){
  .eh-in{grid-template-columns:1fr}
  .ef-band{grid-template-columns:1fr 1fr}
  .ep-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){ .ep-grid{grid-template-columns:1fr} }

/* ── 제작 진행 ───────────────────────────────────────── */
.pg-hero{display:flex;align-items:center;gap:24px;background:var(--surface);
  border:1px solid var(--line2);border-radius:var(--r-xl);padding:24px 26px;
  margin-bottom:16px;box-shadow:var(--sh-card);flex-wrap:wrap}
.pg-hero-l{flex:1;min-width:240px}
.pg-pct{display:block;font-family:var(--font-title);font-size:42px;color:var(--orange-d);line-height:1}
.pg-hero-l>span{display:block;font-size:13.5px;color:var(--muted);margin-top:4px}
.pg-ring{display:block!important;height:11px;border-radius:999px;background:#F0E7DA;
  overflow:hidden;margin:12px 0 10px}
.pg-ring i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--orange2),var(--orange));transition:width .8s}
.pg-eta{font-size:13px;color:var(--muted)}
.pg-eta b{color:var(--ink)}
.pg-hero .kd-hand{margin:0;text-align:right;font-size:16px;line-height:1.7}
.pg-shots{margin-bottom:16px}
.pg-shot-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}
.pg-shot-row figure{margin:0}
.pg-shot-row img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;display:block;
  box-shadow:var(--sh-card)}
.pg-shot-row figcaption{font-size:11.5px;color:var(--muted2);margin-top:5px;text-align:center}
.pg-points{margin-top:16px}
.pg-pt{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:12px}
.pg-pt span{display:flex;gap:9px;align-items:flex-start;background:var(--soft);
  border-radius:12px;padding:12px 14px}
.pg-pt i{font-style:normal;color:#5CAE47;font-weight:700;flex:none}
.pg-pt b{display:block;font-size:13.5px}
.pg-pt em{display:block;font-style:normal;font-size:12px;color:var(--muted2);margin-top:2px;line-height:1.6}
html[data-theme="dark"] .pg-ring{background:#22304F}
@media(max-width:760px){
  .pg-shot-row{grid-template-columns:1fr 1fr}
  .pg-pt{grid-template-columns:1fr}
  .pg-hero .kd-hand{text-align:left}
}

/* ── 주문 · 배송 ─────────────────────────────────────── */
.od-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:26px}
.od-stats div{background:var(--soft);border-radius:var(--r-l);padding:18px;text-align:center}
.od-stats span{display:block;font-size:22px;margin-bottom:5px}
.od-stats b{display:block;font-family:var(--font-title);font-size:24px;color:var(--orange-d)}
.od-stats em{display:block;font-style:normal;font-size:12px;color:var(--muted2);margin-top:2px}
.panel-like{background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-l);
  overflow:hidden;box-shadow:var(--sh-card)}
.od-tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.od-tbl th{background:var(--soft);padding:12px 14px;text-align:left;font-size:12.5px;
  color:var(--muted);font-weight:700;white-space:nowrap}
.od-tbl td{padding:14px;border-top:1px solid var(--line);vertical-align:middle}
.od-tbl .mut{color:var(--muted2)}
.od-item{display:flex;align-items:center;gap:11px}
.od-item img{width:46px;height:60px;object-fit:cover;border-radius:8px;flex:none}
.od-item b{display:block;font-size:14px}
.od-item em{display:block;font-style:normal;font-size:12px;color:var(--muted2);margin-top:2px}
.od-detail{display:grid;grid-template-columns:200px 1fr 1fr;gap:16px;align-items:start}
.od-book{text-align:center}
.od-book img{width:100%;border-radius:var(--r-l);box-shadow:var(--sh-big);display:block;margin-bottom:10px}
.od-time{padding:6px 16px 16px}
.od-t{display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:start;
  padding:10px 0;position:relative}
.od-t::before{content:'';position:absolute;left:12px;top:28px;bottom:-10px;width:2px;background:var(--line)}
.od-t:last-child::before{display:none}
.od-dot{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:var(--line2);color:#fff;font-size:11px;z-index:1}
.od-t.on .od-dot{background:#5CAE47}
.od-t.on::before{background:#5CAE47}
.od-t b{display:block;font-size:13.5px;color:var(--muted2)}
.od-t.on b{color:var(--ink)}
.od-t em{display:block;font-style:normal;font-size:12px;color:var(--muted2);margin-top:2px}
.od-addr{display:grid;gap:9px;padding:14px 16px}
.od-addr label span{display:block;font-size:12.5px;color:var(--muted);margin-bottom:4px}
.od-acts{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
@media(max-width:1000px){ .od-detail{grid-template-columns:1fr} .od-book{max-width:200px} }
@media(max-width:600px){ .od-stats{grid-template-columns:1fr 1fr} }

/* ── 최종 결제 ───────────────────────────────────────── */
.od-err{display:flex;gap:14px;align-items:flex-start;background:#FDECEC;border:1px solid #F6C9C9;
  border-radius:var(--r-l);padding:18px 20px;margin-bottom:16px}
.od-err>span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:#D9645A;color:#fff;font-weight:900;flex:none}
.od-err b{display:block;font-size:15px;color:#A33}
.od-err p{margin:5px 0 12px;font-size:13.5px;line-height:1.75;color:#8B4A44}
.od-err em{font-style:normal;font-size:12px;opacity:.8}
html[data-theme="dark"] .od-err{background:var(--er-bg);border-color:var(--er-line)}
html[data-theme="dark"] .od-err b,html[data-theme="dark"] .od-err p{color:var(--er-ink)}
.od-adds{display:flex;flex-direction:column;gap:9px}
.od-add{cursor:pointer}
.od-add input{position:absolute;opacity:0}
.od-add-in{display:block;border:1.5px solid var(--line2);border-radius:14px;padding:14px 16px;
  transition:.22s;position:relative;background:var(--paper)}
.od-add-in b{display:block;font-size:14px}
.od-add-in em{display:block;font-style:normal;font-size:12.5px;color:var(--muted2);margin-top:3px}
.od-add-in i{position:absolute;right:16px;top:14px;font-style:normal;font-size:13.5px;
  font-weight:700;color:var(--orange-d)}
.od-add:hover .od-add-in{border-color:var(--orange2)}
.od-add input:checked + .od-add-in{border-color:var(--orange);background:#FFF8F0}
html[data-theme="dark"] .od-add input:checked + .od-add-in{background:#2A2038}
.od-lines{background:var(--soft);border-radius:14px;padding:16px 18px}
.od-line{display:flex;justify-content:space-between;padding:7px 0;font-size:13.5px}
.od-line span{color:var(--muted)}
.od-line.minus b{color:#3B7A2A}
html[data-theme="dark"] .od-line.minus b{color:var(--ok-ink)}
.od-total{display:flex;justify-content:space-between;align-items:center;
  margin-top:10px;padding-top:12px;border-top:1px solid var(--line)}
.od-total span{font-size:14px}
.od-total b{font-family:var(--font-title);font-size:26px;color:var(--orange-d)}
.od-checks{margin-top:16px;background:#FFF6E4;border:1px solid #F3E0BC;border-radius:14px;padding:14px 16px}
.od-checks b{display:block;font-size:13.5px;margin-bottom:7px}
.od-checks span{display:block;font-size:12.5px;line-height:1.9;color:var(--ink2)}
html[data-theme="dark"] .od-checks{background:var(--wn-bg);border-color:var(--wn-line)}
html[data-theme="dark"] .od-checks b,html[data-theme="dark"] .od-checks span{color:var(--wn-ink)}
.ef-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}
.ef-card{background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-l);
  padding:20px;box-shadow:var(--sh-card)}
.ef-card b{display:block;font-size:15px}
.ef-card span{display:block;font-size:13px;color:var(--muted);margin-top:6px;line-height:1.7}
.ec-card.lv em{display:block;font-style:normal;font-size:12.5px;color:var(--muted2);margin-bottom:5px}
.ec-card{color:inherit}
.ec-card:hover{border-color:var(--orange2)}
.el-mini i{font-style:normal;font-size:11.5px;color:var(--muted2);margin-left:5px}
@media(max-width:900px){ .ef-grid{grid-template-columns:1fr 1fr} }
@media(max-width:600px){ .ef-grid{grid-template-columns:1fr} }
.em-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.em-opt{cursor:pointer}
.em-opt input{position:absolute;opacity:0}
.em-opt-in{display:block;border:1.5px solid var(--line2);border-radius:12px;padding:12px 14px;
  background:var(--paper);transition:.2s;text-align:center}
.em-opt-in b{display:block;font-size:13.5px}
.em-opt-in em{display:block;font-style:normal;font-size:11.5px;color:var(--muted2);margin-top:3px;line-height:1.5}
.em-opt:hover .em-opt-in{border-color:var(--orange2)}
.em-opt input:checked + .em-opt-in{border-color:var(--orange);background:#FFF8F0}
html[data-theme="dark"] .em-opt input:checked + .em-opt-in{background:#2A2038}
@media(max-width:600px){ .em-opts{grid-template-columns:1fr 1fr} }
.wt-one{max-width:960px;margin:14px auto 0;text-align:center;font-size:13.5px;color:var(--muted)}
.wt-more{max-width:960px;margin:18px auto 0}
.wt-more summary{cursor:pointer;font-size:13.5px;color:var(--muted);text-align:center;
  padding:9px;border:1px solid var(--line2);border-radius:var(--r-pill);list-style:none}
.wt-more summary::-webkit-details-marker{display:none}
.wt-more summary:hover{border-color:var(--orange2);color:var(--orange)}





/* ── 모바일 음성녹음 ─────────────────────────────────── */
.mv-h{display:block;font-size:15px;margin-bottom:12px}
.mv-script{background:var(--soft);border-radius:var(--r-l);padding:16px}
.mv-nav{display:flex;align-items:center;justify-content:center;gap:14px;
  font-size:12.5px;color:var(--muted);margin-bottom:10px}
.mv-nav button{border:1px solid var(--line2);background:var(--paper);color:var(--ink);
  border-radius:50%;width:28px;height:28px;cursor:pointer;font-size:14px}
.mv-nav button:hover{border-color:var(--orange2);color:var(--orange)}
.mv-script p{margin:0;font-size:16px;line-height:1.9;text-align:center;color:var(--ink)}
.mv-rec{text-align:center;padding:8px 0}
.mv-time{font-family:var(--font-title);font-size:22px;color:var(--muted)}
.mv-time b{color:var(--orange-d)}
.mv-wave{display:flex;align-items:center;justify-content:center;gap:3px;height:56px;margin:14px 0}
.mv-wave i{width:4px;height:12%;background:var(--line2);border-radius:2px;transition:height .2s}
.mv-wave.on i{background:var(--orange2);animation:mvb .9s ease-in-out infinite}
.mv-wave.on i:nth-child(3n){animation-delay:.15s}
.mv-wave.on i:nth-child(3n+1){animation-delay:.3s}
@keyframes mvb{0%,100%{height:14%}50%{height:82%}}
.mv-mic{width:76px;height:76px;border-radius:50%;border:none;cursor:pointer;font-size:30px;
  background:var(--orange);color:#fff;box-shadow:0 8px 20px rgba(238,122,34,.35);transition:.2s}
.mv-mic:hover{transform:scale(1.05)}
.mv-mic.on{background:#D9645A;animation:mvp 1.2s ease-in-out infinite}
@keyframes mvp{0%,100%{box-shadow:0 0 0 0 rgba(217,100,90,.5)}50%{box-shadow:0 0 0 16px rgba(217,100,90,0)}}
.mv-tip{margin:14px 0 0;font-size:13px;color:var(--muted);line-height:1.7}
.mv-btns{display:flex;gap:8px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.mv-play{display:flex;align-items:center;gap:12px}
.mv-play span:last-child{font-size:13px;color:var(--muted);flex:none}
.mv-checks{display:flex;flex-direction:column;gap:9px;margin-bottom:16px}
.mv-checks label{display:flex;gap:10px;align-items:flex-start;background:var(--soft);
  border-radius:12px;padding:12px 14px;cursor:pointer}
.mv-checks input{margin-top:3px;flex:none}
.mv-checks b{display:block;font-size:13.5px}
.mv-checks em{display:block;font-style:normal;font-size:12px;color:var(--muted2);margin-top:2px}
.mv-quote{text-align:center;margin-top:24px;font-family:var(--font-hand);
  font-size:16px;line-height:1.9;color:var(--pink)}

/* ── 모바일 사진 촬영 ────────────────────────────────── */
.mp-cam{position:relative;aspect-ratio:3/4;border-radius:var(--r-xl);overflow:hidden;
  background:#1B1410;margin-bottom:14px}
.mp-cam video{width:100%;height:100%;object-fit:cover;display:block}
.mp-off{position:absolute;inset:0;display:grid;place-content:center;gap:9px;
  text-align:center;color:rgba(255,255,255,.75)}
.mp-off span{font-size:40px}
.mp-off b{font-size:14px;font-weight:400}
.mp-guide{position:absolute;inset:0;pointer-events:none;opacity:0;transition:.4s}
.mp-guide.on{opacity:1}
.mp-guide span{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  width:58%;aspect-ratio:3/4;border:2.5px dashed rgba(255,255,255,.6);border-radius:50%/40%}
.mp-flip{position:absolute;right:12px;top:12px;width:40px;height:40px;border-radius:50%;
  border:none;background:rgba(0,0,0,.45);color:#fff;font-size:17px;cursor:pointer}
.mp-btns{display:grid;grid-template-columns:1.4fr 1fr;gap:9px;margin-bottom:14px}
.mp-album{text-align:center;cursor:pointer;display:flex;align-items:center;justify-content:center}
.mp-shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:9px;margin-bottom:16px}
.mp-shots figure{margin:0;position:relative}
.mp-shots img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:11px;display:block}
.mp-shots button{position:absolute;right:4px;top:4px;width:22px;height:22px;border-radius:50%;
  border:none;background:rgba(0,0,0,.55);color:#fff;font-size:11px;cursor:pointer}
.mp-tiptip{margin:11px 0 0;padding-top:11px;border-top:1px solid rgba(0,0,0,.06);
  font-size:12.5px;line-height:1.75}
@media(max-width:420px){ .mp-btns{grid-template-columns:1fr} }

/* ── 대본 Studio ─────────────────────────────────────── */
.sc-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.sc-top>div:first-child{display:flex;align-items:center;gap:9px}
.sc-top b{font-family:var(--font-title);font-size:18px}
.sc-meta{margin-left:auto;display:flex;gap:16px;font-size:12.5px;color:var(--muted2)}
.sc-meta b{font-family:var(--font-body);font-size:13.5px;color:var(--ink)}
.sc-wrap{display:grid;grid-template-columns:250px 1fr;gap:16px;align-items:start}
.sc-list{position:sticky;top:84px}
.sc-items{display:flex;flex-direction:column;gap:5px;margin:12px 0;max-height:52vh;overflow:auto}
.sc-item{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:11px;
  color:inherit;border:1.5px solid transparent;transition:.18s}
.sc-item:hover{background:var(--soft)}
.sc-item.on{border-color:var(--orange);background:#FFF8F0}
html[data-theme="dark"] .sc-item.on{background:#2A2038}
.sc-item.off{opacity:.45}
.sc-no{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;flex:none;
  background:var(--soft);font-size:12px;font-weight:700}
.sc-item.on .sc-no{background:var(--orange);color:#fff}
.sc-t{flex:1;min-width:0}
.sc-t b{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-t em{display:block;font-style:normal;font-size:11px;color:var(--muted2)}
.sc-hd{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.sc-thumb{width:72px;aspect-ratio:4/3;object-fit:cover;border-radius:10px;margin-left:auto}
.sc-body{font-size:15px;line-height:1.9;resize:vertical}
.sc-count{margin:7px 0 14px;font-size:12.5px;color:var(--muted2)}
.sc-count b{color:var(--ink)}
.sc-lines{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.sc-line{display:grid;grid-template-columns:110px 1fr 32px;gap:7px;align-items:center}
.sc-line .wz-input{margin:0}
.sc-del{border:1px solid var(--line2);background:var(--paper);color:var(--muted2);
  border-radius:9px;height:38px;cursor:pointer;font-size:12px}
.sc-del:hover{border-color:#D9645A;color:#D9645A}
.sc-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sc-ex{display:flex;gap:8px;align-items:center;font-size:13.5px;cursor:pointer}
@media(max-width:900px){
  .sc-wrap{grid-template-columns:1fr}
  .sc-list{position:static}
  .sc-items{max-height:200px}
  .sc-line{grid-template-columns:1fr}
}

/* 장면별 보기 — 10개씩 묶어 크게 */
.wt-grp{display:block;max-width:960px;margin:18px auto 9px;font-size:13px;color:var(--muted)}
.wt-grid{max-width:960px;margin:0 auto 6px;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}
.wt-grid a{color:inherit;display:block}
.wt-g-img{position:relative;display:block;aspect-ratio:16/9;border-radius:12px;overflow:hidden;
  background:#1B1410;box-shadow:var(--sh-card);transition:.22s}
.wt-grid a:hover .wt-g-img{transform:translateY(-3px);box-shadow:var(--sh-lift)}
.wt-g-img img{width:100%;height:100%;object-fit:cover;display:block}
.wt-g-no{position:absolute;left:7px;top:7px;font-style:normal;background:rgba(0,0,0,.62);
  color:#fff;border-radius:7px;padding:2px 9px;font-size:12px;font-weight:700}
.wt-g-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-style:normal;
  width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.9);color:#1B1410;
  display:grid;place-items:center;font-size:14px;opacity:0;transition:.22s}
.wt-grid a:hover .wt-g-play{opacity:1}
.wt-grid b{display:block;margin-top:7px;font-size:12.5px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:600px){
  .wt-grid{grid-template-columns:1fr 1fr;gap:9px}
  .wt-thumbs{grid-template-columns:1fr 1fr}
}

/* ── 이야기 설정 ─────────────────────────────────────── */
.st-step{display:flex;align-items:center;gap:9px;font-family:var(--font-title);
  font-size:16px;margin:22px 0 12px}
.st-step:first-of-type{margin-top:0}
.st-step i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;flex:none;
  background:var(--orange);color:#fff;font-style:normal;font-size:12.5px}
.st-step em{font-style:normal;font-size:12px;color:var(--muted2);font-family:var(--font-body)}
.sy-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}
.sy-chip{cursor:pointer}
.sy-chip input{position:absolute;opacity:0}
.sy-chip span{display:block;border:1.5px solid var(--line2);border-radius:13px;padding:13px 6px;
  text-align:center;background:var(--paper);transition:.2s}
.sy-chip i{display:block;font-style:normal;font-size:22px;margin-bottom:4px}
.sy-chip b{font-size:12.5px;font-weight:500}
.sy-chip:hover span{border-color:var(--orange2);transform:translateY(-3px)}
.sy-chip input:checked + span{border-color:var(--orange);background:#FFF8F0;font-weight:700}
html[data-theme="dark"] .sy-chip input:checked + span{background:#2A2038}
.sy-cards{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.sy-card{cursor:pointer}
.sy-card input{position:absolute;opacity:0}
.sy-card-in{display:block;border:2.5px solid var(--line2);border-radius:13px;overflow:hidden;
  background:var(--paper);transition:.2s}
.sy-card-in img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.sy-card-in b{display:block;padding:8px 4px;font-size:12.5px;text-align:center}
.sy-card:hover .sy-card-in{border-color:var(--orange2);transform:translateY(-3px)}
.sy-card input:checked + .sy-card-in{border-color:var(--orange)}
.sy-card input:checked + .sy-card-in b{background:var(--orange);color:#fff}
.sy-scene{cursor:pointer}
.sy-scene input{position:absolute;opacity:0}
.sy-scene-in{display:block;border:1.5px solid var(--line2);border-radius:13px;padding:15px 12px;
  text-align:center;background:var(--paper);transition:.2s}
.sy-scene-in b{display:block;font-family:var(--font-title);font-size:18px}
.sy-scene-in em{display:block;font-style:normal;font-size:12.5px;color:var(--orange-d);margin-top:3px}
.sy-scene-in i{display:block;font-style:normal;font-size:11.5px;color:var(--muted2);margin-top:3px}
.sy-scene:hover .sy-scene-in{border-color:var(--orange2)}
.sy-scene input:checked + .sy-scene-in{border-color:var(--orange);background:#FFF8F0}
html[data-theme="dark"] .sy-scene input:checked + .sy-scene-in{background:#2A2038}
.st-src-box{display:flex;align-items:center;gap:14px;background:var(--soft);
  border-radius:var(--r-l);padding:14px;margin-bottom:12px}
.st-src-box img{width:88px;aspect-ratio:16/10;object-fit:cover;border-radius:10px;flex:none}
.st-src-box b{display:block;font-size:15.5px;margin-top:4px}
.st-src-box p{margin:4px 0 0;font-size:12.5px;color:var(--muted);line-height:1.6}
@media(max-width:900px){ .sy-grid,.sy-cards{grid-template-columns:repeat(3,1fr)} }
@media(max-width:520px){ .sy-grid,.sy-cards{grid-template-columns:repeat(2,1fr)} }

/* ── 새 동화 만들기 ──────────────────────────────────── */
.ch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.ch-pick{cursor:pointer}
.ch-pick input{position:absolute;opacity:0}
.ch-pick-in{display:block;position:relative;border:2.5px solid var(--line2);border-radius:var(--r-l);
  padding:16px 10px;text-align:center;background:var(--paper);transition:.22s}
.ch-pick:hover .ch-pick-in{border-color:var(--orange2);transform:translateY(-4px)}
.ch-pick input:checked + .ch-pick-in{border-color:var(--orange);background:#FFF8F0}
html[data-theme="dark"] .ch-pick input:checked + .ch-pick-in{background:#2A2038}
.ch-tick{position:absolute;top:7px;right:7px;display:grid;place-items:center;width:22px;height:22px;
  border-radius:50%;background:var(--orange);color:#fff;font-style:normal;font-size:11px;opacity:0;transition:.2s}
.ch-pick input:checked + .ch-pick-in .ch-tick{opacity:1}
.ch-av{display:grid;place-items:center;width:62px;height:62px;margin:0 auto 9px;border-radius:50%;
  overflow:hidden;background:var(--soft)}
.ch-av img{width:100%;height:100%;object-fit:cover}
.ch-av em{font-style:normal;font-size:26px}
.ch-pick-in b{display:block;font-size:14.5px}
.ch-pick-in em{display:block;font-style:normal;font-size:12px;color:var(--muted2)}
.ch-desc{display:block;font-size:11px;color:var(--muted2);margin-top:5px}
.ch-add{display:grid;place-content:center;gap:5px;min-height:150px;text-align:center;
  border:2px dashed var(--line2);border-radius:var(--r-l);color:var(--muted);font-size:13px}
.ch-add:hover{border-color:var(--orange2);color:var(--orange)}
.ch-add span{font-size:24px}
.ch-new{background:var(--soft);border-radius:var(--r-l);padding:16px 18px}
.ch-new summary{cursor:pointer;font-size:14px;font-weight:700;list-style:none}
.ch-new summary::-webkit-details-marker{display:none}
.ch-ready{margin-top:20px;background:var(--soft);border-radius:var(--r-xl);padding:22px}
.ch-ready>b{display:block;text-align:center;font-size:15.5px;margin-bottom:16px}

/* ── 캐릭터 확인 ─────────────────────────────────────── */
.cf-wrap{display:grid;grid-template-columns:1fr 320px;gap:16px;align-items:start}
.cf-main{position:relative;text-align:center}
.cf-crown{position:absolute;left:50%;top:-11px;transform:translateX(-50%);z-index:2;
  background:var(--orange);color:#fff;border-radius:999px;padding:5px 16px;
  font-size:12.5px;font-weight:700;white-space:nowrap}
.cf-stage{position:relative;margin:14px auto 0;max-width:400px}
.cf-stage img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-xl);
  display:block;box-shadow:var(--sh-big)}
.cf-arrow{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;
  border-radius:50%;border:none;cursor:pointer;background:rgba(255,255,255,.92);
  color:var(--ink);font-size:19px;box-shadow:var(--sh-card)}
.cf-arrow.l{left:-14px}
.cf-arrow.r{right:-14px}
.cf-label{display:block;margin-top:12px;font-family:var(--font-title);font-size:16px}
.cf-faces{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}
.cf-faces button{border:2.5px solid var(--line2);border-radius:13px;overflow:hidden;padding:0;
  background:var(--paper);cursor:pointer;transition:.2s}
.cf-faces button:hover{border-color:var(--orange2);transform:translateY(-3px)}
.cf-faces button.on{border-color:var(--orange)}
.cf-faces img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.cf-faces span{display:block;padding:6px 3px;font-size:11.5px;color:var(--muted)}
.cf-faces button.on span{background:var(--orange);color:#fff}
.cf-cmp{position:relative;margin-top:12px;border-radius:var(--r-l);overflow:hidden;
  cursor:ew-resize;user-select:none;aspect-ratio:1/1;max-width:420px}
.cf-cmp img{width:100%;height:100%;object-fit:cover;display:block}
.cf-cmp-a{position:absolute;inset:0}
.cf-cmp-b{position:absolute;inset:0;width:50%;overflow:hidden}
.cf-cmp-b img{width:100vw;max-width:420px;height:100%}
.cf-handle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;
  box-shadow:0 0 8px rgba(0,0,0,.35);pointer-events:none}
.cf-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:34px;height:34px;border-radius:50%;background:#fff;color:var(--ink);
  display:grid;place-items:center;font-size:13px;box-shadow:var(--sh-card)}
.cf-tag{position:absolute;bottom:9px;background:rgba(0,0,0,.55);color:#fff;
  border-radius:7px;padding:3px 10px;font-size:11.5px;pointer-events:none}
.cf-tag.l{left:9px}
.cf-tag.r{right:9px}
@media(max-width:900px){
  .cf-wrap{grid-template-columns:1fr}
  .cf-arrow.l{left:4px}
  .cf-arrow.r{right:4px}
}

/* ── 작업 이어하기 ───────────────────────────────────── */
.rs-main{display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:start;
  background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-xl);
  padding:24px;box-shadow:var(--sh-card);margin-bottom:26px}
.rs-cover img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-l);
  display:block;box-shadow:var(--sh-big)}
.rs-saved{font-size:12.5px;color:var(--muted2)}
.rs-body h2{font-family:var(--font-title);font-size:22px;margin:7px 0 5px}
.rs-who{margin:0 0 16px;font-size:13.5px;color:var(--muted)}
.rs-steps{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.rs-step{display:flex;align-items:center;gap:5px;border:1.5px solid var(--line2);
  border-radius:var(--r-pill);padding:5px 12px;font-size:12px;color:var(--muted2)}
.rs-step i{font-style:normal;font-size:10px}
.rs-step.done{background:#EEF9EA;border-color:#CFE9C4;color:#3B7A2A}
.rs-step.cur{border-color:var(--orange);background:#FFF1DC;color:var(--orange-d);font-weight:700}
html[data-theme="dark"] .rs-step.done{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok-ink)}
html[data-theme="dark"] .rs-step.cur{background:#2A2038}
.rs-where{display:flex;gap:12px;align-items:flex-start;background:#FFF6E4;
  border:1px solid #F3E0BC;border-radius:14px;padding:14px 16px;margin-bottom:16px}
.rs-where>span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:#E9A62B;color:#fff;font-weight:900;flex:none;font-size:13px}
.rs-where b{display:block;font-size:14px}
.rs-where p{margin:4px 0 0;font-size:13px;color:var(--ink2);line-height:1.7}
html[data-theme="dark"] .rs-where{background:var(--wn-bg);border-color:var(--wn-line)}
html[data-theme="dark"] .rs-where b,html[data-theme="dark"] .rs-where p{color:var(--wn-ink)}
.rs-note{display:flex;gap:14px;align-items:center;background:var(--soft);
  border-radius:var(--r-xl);padding:20px 22px;margin:26px 0;flex-wrap:wrap}
.rs-note>span{font-size:26px}
.rs-note b{display:block;font-size:15px}
.rs-note p{margin:4px 0 0;font-size:13px;color:var(--muted);line-height:1.7}
.rs-note>a{margin-left:auto}
@media(max-width:820px){ .rs-main{grid-template-columns:1fr} }

/* ── 결제 완료 ───────────────────────────────────────── */
.pd-top{text-align:center;margin-bottom:24px}
.pd-mark{display:grid;place-items:center;width:72px;height:72px;margin:0 auto 16px;
  border-radius:50%;background:#5CAE47;color:#fff;font-size:34px;
  box-shadow:0 10px 26px rgba(92,174,71,.32)}
.pd-top h1{font-family:var(--font-title);font-size:clamp(22px,3vw,29px);margin:0 0 8px}
.pd-top .kd-hand{margin-top:12px;font-size:16px}
.pd-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}
.pd-step{background:var(--soft);border-radius:14px;padding:15px 11px;text-align:center}
.pd-step.on{background:#FFF1DC;border:1.5px solid var(--orange2)}
html[data-theme="dark"] .pd-step.on{background:#2A2038}
.pd-step span{display:block;font-size:22px;margin-bottom:6px}
.pd-step b{display:block;font-size:13.5px}
.pd-step em{display:block;font-style:normal;font-size:11.5px;color:var(--muted2);margin-top:3px;line-height:1.5}
.pd-step i{display:block;font-style:normal;font-size:11px;color:var(--orange-d);margin-top:6px;font-weight:700}
.pc-h{font-family:var(--font-title);font-size:16px;margin:22px 0 7px}
@media(max-width:700px){ .pd-steps{grid-template-columns:1fr 1fr} }

/* ── 완성작 분류 ─────────────────────────────────────── */
.wk-n{display:inline-block;background:var(--soft);border-radius:999px;padding:3px 13px;
  font-size:15px;color:var(--muted);vertical-align:middle;margin-left:6px}
.wf{background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-xl);
  padding:16px 18px;margin-bottom:22px;box-shadow:var(--sh-card)}
.wf-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:7px 0}
.wf-row + .wf-row{border-top:1px solid var(--line)}
.wf-row > b{width:74px;flex:none;font-size:12.5px;color:var(--muted2)}
.wf-row a{border:1.5px solid var(--line2);border-radius:var(--r-pill);padding:6px 13px;
  font-size:13px;color:var(--ink2);transition:.18s;white-space:nowrap}
.wf-row a:hover{border-color:var(--orange2);color:var(--orange)}
.wf-row a.on{background:var(--orange);border-color:transparent;color:#fff;font-weight:700}
.wf-row a i{font-style:normal;font-size:11px;opacity:.6;margin-left:3px}
.wf-row a.on i{opacity:.85}
.wf-res{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.wf-res b{font-family:var(--font-title);font-size:19px}
.wf-res span{font-size:13.5px;color:var(--muted)}
.wf-res a{margin-left:auto;font-size:12.5px;color:var(--muted2)}
.wf-res a:hover{color:var(--orange)}
.wf-sec{margin-bottom:34px}
.wf-sec .mh-hd{align-items:baseline}
.wf-cnt{font-family:var(--font-body);font-size:13px;color:var(--muted2);font-weight:400;margin-left:5px}
.wf-desc{font-size:12.5px;color:var(--muted2)}
@media(max-width:640px){
  .wf-row > b{width:100%;margin-bottom:2px}
  .wf-desc{display:none}
}

/* ── 따라 만들기 · 포인트 ────────────────────────────── */
.wk-get.rmx{padding:0;border:none;background:none}
.wk-get.rmx button{display:flex;align-items:center;gap:12px;width:100%;cursor:pointer;
  border:1.5px solid var(--orange);border-radius:14px;padding:14px 16px;
  background:linear-gradient(135deg,#FFF3E6,#FFF8F0);color:inherit;font:inherit;text-align:left;
  transition:.22s}
.wk-get.rmx button:hover{transform:translateX(3px);box-shadow:var(--sh-card)}
.wk-get.rmx b{flex:1;font-size:14px}
.wk-get.rmx em{display:block;font-style:normal;font-size:11.5px;color:var(--muted2);
  font-weight:400;margin-top:2px}
html[data-theme="dark"] .wk-get.rmx button{background:#2A2038}
.rmx-set{display:flex;align-items:center;gap:14px;margin-top:14px;
  background:var(--soft);border:1.5px solid var(--line2);border-radius:14px;padding:14px 16px}
.rmx-set.on{border-color:var(--orange);background:#FFF8F0}
html[data-theme="dark"] .rmx-set.on{background:#2A2038}
.rmx-set b{display:block;font-size:13.5px}
.rmx-set p{margin:5px 0 0;font-size:12.5px;line-height:1.7;color:var(--muted)}
.rmx-set .tag{margin-top:8px;display:inline-block}
.rmx-btn{flex:none;border:none;cursor:pointer;border-radius:999px;padding:8px 18px;
  font-size:13px;font-weight:700;background:var(--line2);color:var(--muted)}
.rmx-set.on .rmx-btn{background:var(--orange);color:#fff}
.pt-box{display:flex;align-items:center;gap:18px;background:linear-gradient(135deg,#FFF3E6,#FFF8F0);
  border:1.5px solid var(--orange2);border-radius:var(--r-xl);padding:24px 26px;margin-bottom:22px;
  flex-wrap:wrap}
html[data-theme="dark"] .pt-box{background:#2A2038}
.pt-ic{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;flex:none;
  background:rgba(255,255,255,.75);font-size:30px}
html[data-theme="dark"] .pt-ic{background:rgba(255,255,255,.08)}
.pt-main{flex:1;min-width:180px}
.pt-n{display:block;font-family:var(--font-title);font-size:40px;line-height:1.1;color:var(--orange-d)}
.pt-n em{font-style:normal;font-size:22px;margin-left:2px}
.pt-box p{margin:6px 0 0;font-size:13px;line-height:1.7;color:var(--muted)}
.pt-box > a{flex:none}
@media(max-width:560px){
  .pt-box{gap:14px;padding:20px}
  .pt-n{font-size:32px}
  .pt-box > a{width:100%;text-align:center}
}
.pt-list{display:flex;flex-direction:column;gap:2px}
.pt-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.pt-row b{flex:none;width:82px;text-align:right;font-family:var(--font-title);font-size:15px}
.pt-row b.plus{color:#3B7A2A}
.pt-row b.minus{color:var(--muted)}
html[data-theme="dark"] .pt-row b.plus{color:var(--ok-ink)}
.pt-row span{flex:1;min-width:0;font-size:13.5px}
.pt-row em{font-style:normal;font-size:11.5px;color:var(--muted2)}
@media(max-width:600px){ .rmx-set{flex-direction:column;align-items:stretch} }

/* ── 다시 만들기 ─────────────────────────────────────── */
.rt-err{display:flex;gap:14px;align-items:flex-start;background:#FDECEC;border:1px solid #F6C9C9;
  border-radius:var(--r-l);padding:18px 20px;margin-bottom:16px}
.rt-err>span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;flex:none;
  background:#D9645A;color:#fff;font-weight:900}
.rt-err b{display:block;font-size:15.5px;color:#A33}
.rt-err p{margin:5px 0 0;font-size:13.5px;line-height:1.75;color:#8B4A44}
html[data-theme="dark"] .rt-err{background:var(--er-bg);border-color:var(--er-line)}
html[data-theme="dark"] .rt-err b,html[data-theme="dark"] .rt-err p{color:var(--er-ink)}
.rt-raw{margin-top:10px}
.rt-raw summary{cursor:pointer;font-size:12px;opacity:.75}
.rt-raw code{display:block;margin-top:7px;font-size:11px;background:rgba(0,0,0,.06);
  border-radius:8px;padding:9px 11px;word-break:break-all;line-height:1.6}
.rt-steps{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.rt-step{display:flex;align-items:center;gap:6px;border:1.5px solid var(--line2);
  border-radius:var(--r-pill);padding:7px 14px;font-size:12.5px;color:var(--muted2)}
.rt-step i{font-style:normal;font-size:11px}
.rt-step.ok{background:#EEF9EA;border-color:#CFE9C4;color:#3B7A2A}
.rt-step.bad{background:#FDECEC;border-color:#F6C9C9;color:#A33;font-weight:700}
html[data-theme="dark"] .rt-step.ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok-ink)}
html[data-theme="dark"] .rt-step.bad{background:var(--er-bg);border-color:var(--er-line);color:var(--er-ink)}
.rt-step em{font-style:normal;opacity:.7;font-size:11px}
.rt-scenes{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:9px;margin-top:12px}
.rt-scene{position:relative;text-align:center}
.rt-scene img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;display:block}
.rt-blank{display:grid;place-items:center;aspect-ratio:4/3;background:var(--soft);
  border-radius:10px;color:var(--muted2)}
.rt-no{position:absolute;left:5px;top:5px;z-index:1;background:rgba(0,0,0,.55);color:#fff;
  border-radius:6px;padding:1px 7px;font-size:11px}
.rt-scene .tag{display:block;margin-top:5px;font-size:10.5px}
.rt-opts{display:flex;flex-direction:column;gap:9px;margin:12px 0 18px}
.rt-opt{cursor:pointer}
.rt-opt input{position:absolute;opacity:0}
.rt-opt-in{display:block;border:1.5px solid var(--line2);border-radius:14px;padding:14px 16px;
  background:var(--paper);transition:.2s}
.rt-opt-in b{display:block;font-size:14px}
.rt-opt-in span{display:block;font-size:12.5px;color:var(--muted2);margin-top:3px;line-height:1.6}
.rt-opt:hover .rt-opt-in{border-color:var(--orange2)}
.rt-opt input:checked + .rt-opt-in{border-color:var(--orange);background:#FFF8F0}
html[data-theme="dark"] .rt-opt input:checked + .rt-opt-in{background:#2A2038}
.rt-rec{font-style:normal;font-size:11px;background:var(--orange);color:#fff;
  border-radius:999px;padding:2px 9px;margin-left:5px;vertical-align:middle}

/* ── 사진 품질검사 ───────────────────────────────────── */
.qc-avg{font-family:var(--font-title);font-size:24px;color:var(--orange-d)}
.qc-wrap{display:grid;grid-template-columns:1fr 300px;gap:20px;align-items:start;margin-top:14px}
.qc-shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.qc-shot{margin:0;position:relative}
.qc-shot img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:12px;display:block;
  box-shadow:var(--sh-card)}
.qc-shot figcaption{display:flex;align-items:center;gap:6px;margin-top:6px}
.qc-shot figcaption span{font-size:11.5px;color:var(--muted2)}
.qc-pill{display:grid;place-items:center;min-width:30px;height:22px;border-radius:999px;
  font-size:12px;font-weight:700;padding:0 7px}
.qc-pill.good{background:#EEF9EA;color:#3B7A2A}
.qc-pill.ok{background:#FFF6E4;color:#8A5A16}
.qc-pill.low{background:#FDECEC;color:#A33}
html[data-theme="dark"] .qc-pill.good{background:var(--ok-bg);color:var(--ok-ink)}
html[data-theme="dark"] .qc-pill.ok{background:var(--wn-bg);color:var(--wn-ink)}
html[data-theme="dark"] .qc-pill.low{background:var(--er-bg);color:var(--er-ink)}
.qc-crown{position:absolute;left:6px;top:6px;font-style:normal;background:rgba(255,255,255,.93);
  border-radius:7px;padding:2px 8px;font-size:10.5px;font-weight:700}
.qc-scores{display:flex;flex-direction:column;gap:11px;background:var(--soft);
  border-radius:var(--r-l);padding:16px}
.qc-m{display:flex;align-items:center;gap:10px;font-size:12.5px}
.qc-m>span:first-child{width:52px;flex:none;color:var(--muted)}
.qc-bar{flex:1;height:8px;border-radius:999px;background:#EDE4D6;overflow:hidden}
html[data-theme="dark"] .qc-bar{background:#22304F}
.qc-bar i{display:block;height:100%;border-radius:999px;transition:width .5s}
.qc-m b{width:36px;text-align:right;flex:none;font-variant-numeric:tabular-nums}
.qc-warn{margin-top:14px;background:#FFF6E4;border:1px solid #F3E0BC;border-radius:12px;padding:13px 16px}
.qc-warn b{display:block;font-size:13.5px;margin-bottom:6px}
.qc-warn span{display:block;font-size:12.5px;line-height:1.9;color:var(--ink2)}
html[data-theme="dark"] .qc-warn{background:var(--wn-bg);border-color:var(--wn-line)}
html[data-theme="dark"] .qc-warn b,html[data-theme="dark"] .qc-warn span{color:var(--wn-ink)}
.qc-tips{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-top:12px}
.qc-tips div{text-align:center}
.qc-tips i{display:block;font-style:normal;font-size:22px;margin-bottom:5px}
.qc-tips b{display:block;font-size:12.5px}
.qc-tips span{display:block;font-size:11px;color:var(--muted2);margin-top:2px;line-height:1.5}
@media(max-width:820px){ .qc-wrap{grid-template-columns:1fr} .qc-tips{grid-template-columns:1fr 1fr} }

/* ── 원작 동화 목록 ──────────────────────────────────── */
.og-cats{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.og-cats a{border:1.5px solid var(--line2);border-radius:var(--r-pill);padding:8px 16px;
  font-size:13.5px;color:var(--ink2);transition:.18s;white-space:nowrap}
.og-cats a:hover{border-color:var(--orange2);color:var(--orange)}
.og-cats a.on{background:var(--orange);border-color:transparent;color:#fff;font-weight:700}
.og-cats a i{font-style:normal;font-size:11px;opacity:.6;margin-left:3px}
.og-cats.sub a{padding:6px 13px;font-size:12.5px}
.og-search{display:flex;gap:8px;margin:14px 0 20px;align-items:center}
.og-search input{flex:1;max-width:360px;border:1.5px solid var(--line2);border-radius:var(--r-pill);
  padding:10px 18px;font-size:13.5px;background:var(--paper);color:var(--ink)}
.og-search button{border:none;border-radius:var(--r-pill);padding:10px 20px;cursor:pointer;
  background:var(--orange);color:#fff;font-size:13.5px;font-weight:700}
.og-search a{font-size:12.5px;color:var(--muted2)}
.og-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px}
.og-book{background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-xl);
  overflow:hidden;box-shadow:var(--sh-card);transition:.28s;display:flex;flex-direction:column}
.og-book:hover{transform:translateY(-5px);box-shadow:var(--sh-lift)}
.og-cover{position:relative;display:block}
.og-cover img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.og-cat{position:absolute;left:8px;top:8px;font-style:normal;background:rgba(0,0,0,.55);
  color:#fff;border-radius:7px;padding:2px 9px;font-size:10.5px}
.og-body{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1}
.og-body b{display:block;font-family:var(--font-title);font-size:15.5px;line-height:1.45}
.og-body p{margin:6px 0 10px;font-size:12.5px;color:var(--muted);line-height:1.65;flex:1}
.og-meta{display:flex;gap:9px;flex-wrap:wrap;font-size:11.5px;color:var(--muted2);margin-bottom:12px}
.og-tag{background:var(--soft);border-radius:6px;padding:1px 8px}
.og-body .btn-ghost{width:100%;text-align:center}
@media(max-width:560px){ .og-grid{grid-template-columns:1fr 1fr;gap:12px} }

/* ── 최종 확인 결제 ──────────────────────────────────── */
.od-sum{display:flex;gap:16px;align-items:flex-start;background:var(--soft);
  border-radius:var(--r-l);padding:16px;margin-bottom:6px}
.od-sum img{width:92px;aspect-ratio:1/1;object-fit:cover;border-radius:12px;flex:none}
.od-sum b{display:block;font-family:var(--font-title);font-size:17px}
.od-sum p{margin:5px 0 10px;font-size:12.5px;color:var(--muted);line-height:1.6}
.od-facts{display:flex;gap:16px;flex-wrap:wrap}
.od-facts span{font-size:11.5px;color:var(--muted2)}
.od-facts em{display:block;font-style:normal;font-size:13.5px;color:var(--ink);font-weight:700}
.od-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.od-plan{cursor:pointer}
.od-plan input{position:absolute;opacity:0}
.od-plan-in{display:block;position:relative;border:2px solid var(--line2);border-radius:var(--r-l);
  padding:20px 16px 18px;background:var(--paper);transition:.22s;height:100%}
.od-plan:hover .od-plan-in{border-color:var(--orange2);transform:translateY(-3px)}
.od-plan input:checked + .od-plan-in{border-color:var(--orange);background:#FFF8F0}
html[data-theme="dark"] .od-plan input:checked + .od-plan-in{background:#2A2038}
.od-badge{position:absolute;left:50%;top:-11px;transform:translateX(-50%);font-style:normal;
  background:var(--orange);color:#fff;border-radius:999px;padding:3px 13px;
  font-size:11px;font-weight:700;white-space:nowrap}
.od-plan-in b{display:block;font-size:15px;line-height:1.45}
.od-desc{display:block;font-size:12px;color:var(--muted);margin:6px 0 12px;line-height:1.6;min-height:34px}
.od-price{display:block;font-family:var(--font-title);font-size:22px;color:var(--orange-d)}
.od-price em{font-style:normal;font-size:14px;margin-left:1px}
@media(max-width:760px){ .od-plans{grid-template-columns:1fr} .od-desc{min-height:0} }
.st-sim{display:block;font-size:11px;color:var(--muted2);margin-top:2px}
.st-sim em{font-style:normal;font-weight:700;color:var(--orange-d)}
.cf-faces{grid-template-columns:repeat(4,1fr)}
.cf-make{margin:0}
.cf-make button{width:100%;aspect-ratio:1/1;border:2px dashed var(--line2);border-radius:13px;
  background:var(--soft);cursor:pointer;display:grid;place-content:center;gap:4px;
  color:var(--muted2);font:12px/1.4 'Noto Sans KR';transition:.2s}
.cf-make button:hover{border-color:var(--orange2);color:var(--orange)}
.cf-make i{font-style:normal;font-size:20px}
.cf-acts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px}
.cf-act{display:block;border:1.5px solid var(--line2);border-radius:13px;padding:14px;
  color:inherit;transition:.2s;text-align:center}
.cf-act:hover{border-color:var(--orange2);transform:translateY(-3px)}
.cf-act i{display:block;font-style:normal;font-size:20px;margin-bottom:6px}
.cf-act b{display:block;font-size:13.5px}
.cf-act span{display:block;font-size:11.5px;color:var(--muted2);margin-top:3px}
@media(max-width:600px){ .cf-faces{grid-template-columns:repeat(2,1fr)} }

/* ── 내 동화 ─────────────────────────────────────────── */
.mb-tabs{display:flex;gap:7px;flex-wrap:wrap;margin:18px 0}
.mb-tabs a{border:1.5px solid var(--line2);border-radius:var(--r-pill);padding:8px 16px;
  font-size:13.5px;color:var(--ink2);transition:.18s;white-space:nowrap}
.mb-tabs a:hover{border-color:var(--orange2);color:var(--orange)}
.mb-tabs a.on{background:var(--orange);border-color:transparent;color:#fff;font-weight:700}
.mb-tabs a i{font-style:normal;font-size:11px;opacity:.6;margin-left:3px}
.mb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.mb-card{background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-xl);
  overflow:hidden;box-shadow:var(--sh-card);transition:.28s}
.mb-card:hover{transform:translateY(-5px);box-shadow:var(--sh-lift)}
.mb-cover{position:relative;display:block}
.mb-cover img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.mb-prog{position:absolute;left:0;right:0;bottom:0;height:5px;background:rgba(0,0,0,.3)}
.mb-prog i{display:block;height:100%;background:linear-gradient(90deg,var(--orange2),var(--orange))}
.mb-state{position:absolute;left:8px;bottom:12px;background:rgba(0,0,0,.6);color:#fff;
  border-radius:7px;padding:2px 9px;font-size:11px}
.mb-body{padding:14px 16px 16px}
.mb-body b{display:block;font-size:15px;line-height:1.45}
.mb-meta{display:block;font-size:12px;color:var(--muted2);margin:4px 0 12px}
.mb-acts{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.mb-acts a{border:1.5px solid var(--line2);border-radius:var(--r-pill);padding:5px 11px;
  font-size:12px;color:var(--ink2);transition:.18s}
.mb-acts a:hover{border-color:var(--orange2);color:var(--orange)}
.mb-acts a.off{opacity:.35;pointer-events:none;border-style:dashed}
.mb-acts a.buy{border-color:var(--orange2);color:var(--orange-d)}
.mb-acts a.go{background:var(--orange);border-color:transparent;color:#fff;font-weight:700;
  padding:7px 14px}
@media(max-width:560px){ .mb-grid{grid-template-columns:1fr} }
.od-stats{grid-template-columns:repeat(5,1fr)}
.od-stats a{display:block;background:var(--soft);border:2px solid transparent;
  border-radius:var(--r-l);padding:16px 10px;text-align:center;color:inherit;transition:.2s}
.od-stats a:hover{transform:translateY(-3px)}
.od-stats a.on{border-color:var(--c);background:var(--paper)}
.od-stats a span{display:block;font-size:20px;margin-bottom:5px}
.od-stats a b{display:block;font-family:var(--font-title);font-size:23px;color:var(--c)}
.od-stats a em{display:block;font-style:normal;font-size:11.5px;color:var(--muted2);margin-top:2px}
.od-track{display:flex;padding:16px}
.od-tk{flex:1;text-align:center;position:relative}
.od-tk::before{content:'';position:absolute;left:-50%;top:13px;width:100%;height:2px;
  background:var(--line);z-index:0}
.od-tk:first-child::before{display:none}
.od-tk.on::before{background:#5CAE47}
.od-tk-dot{position:relative;z-index:1;display:grid;place-items:center;width:26px;height:26px;
  margin:0 auto 7px;border-radius:50%;background:var(--line2);color:#fff;font-size:11px}
.od-tk.on .od-tk-dot{background:#5CAE47}
.od-tk b{display:block;font-size:12px;color:var(--muted2)}
.od-tk.on b{color:var(--ink)}
.od-tk em{display:block;font-style:normal;font-size:10.5px;color:var(--muted2);margin-top:2px}
@media(max-width:700px){
  .od-stats{grid-template-columns:repeat(3,1fr)}
  .od-track{flex-direction:column;gap:12px}
  .od-tk{display:flex;align-items:center;gap:10px;text-align:left}
  .od-tk::before{display:none}
  .od-tk-dot{margin:0}
}
/* 위쪽 2035줄의 600px 규칙(1fr 1fr)은 여기 2659줄 규칙에 덮여 죽어 있었습니다.
   휴대폰에서 칸 다섯 개가 3줄로 붙어 숫자가 눌렸습니다. 다시 살립니다. (2026-09-13) */
@media(max-width:480px){ .od-stats{grid-template-columns:1fr 1fr} }

/* ── 공유뷰 ──────────────────────────────────────────── */
.sh-from{display:flex;gap:14px;align-items:flex-start;background:linear-gradient(135deg,#FFF3E6,#FFF8F0);
  border:1.5px solid var(--orange2);border-radius:var(--r-xl);padding:20px 22px;margin-bottom:22px}
html[data-theme="dark"] .sh-from{background:#2A2038}
.sh-from>span{font-size:28px}
.sh-from b{display:block;font-size:16px}
.sh-from p{margin:6px 0 0;font-size:13.5px;color:var(--muted);line-height:1.75}
.sh-msg{font-family:var(--font-hand);font-size:17px!important;color:var(--pink)!important}
.sh-hero{display:grid;grid-template-columns:260px 1fr;gap:26px;align-items:start;margin-bottom:28px}
.sh-cover{display:grid;place-items:center;aspect-ratio:4/3;border-radius:var(--r-xl);
  overflow:hidden;background:var(--soft);box-shadow:var(--sh-big)}
.sh-cover img{width:100%;height:100%;object-fit:cover}
.sh-cover span{font-size:44px}
.sh-hero h1{font-family:var(--font-title);font-size:clamp(20px,3vw,27px);margin:0 0 6px}
.sh-sub{margin:0 0 18px;font-size:13.5px;color:var(--muted)}
.sh-meta{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:18px}
.sh-meta div{display:flex;align-items:center;gap:8px;background:var(--soft);
  border-radius:11px;padding:10px 13px;font-size:12.5px}
.sh-meta i{font-style:normal}
.sh-meta span{color:var(--muted2);flex:none}
.sh-meta b{margin-left:auto;font-size:12.5px}
.sh-read{background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-xl);
  padding:20px;box-shadow:var(--sh-card)}
.sh-page{background:var(--paper);border-radius:var(--r-l);overflow:hidden}
.sh-page img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.sh-page p{margin:0;padding:20px 24px;font-size:16px;line-height:2;color:var(--ink)}
.sh-nav{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:14px;flex-wrap:wrap}
.sh-nav button{border:1.5px solid var(--line2);background:var(--paper);color:var(--ink2);
  border-radius:var(--r-pill);padding:8px 16px;font-size:13px;cursor:pointer;transition:.18s}
.sh-nav button:hover{border-color:var(--orange2);color:var(--orange)}
.sh-nav span{font-size:13px;color:var(--muted);padding:0 6px}
.sh-thumbs{display:flex;gap:7px;overflow-x:auto;margin-top:14px;padding-bottom:5px}
.sh-thumbs button{position:relative;flex:0 0 74px;border:2.5px solid transparent;border-radius:9px;
  overflow:hidden;padding:0;background:none;cursor:pointer}
.sh-thumbs button.on{border-color:var(--orange)}
.sh-thumbs img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.sh-thumbs b{position:absolute;left:3px;top:3px;background:rgba(0,0,0,.55);color:#fff;
  border-radius:5px;padding:0 5px;font-size:10px}
.sh-watch{margin-top:26px}
.sh-watch video{width:100%;border-radius:var(--r-xl);display:block;background:#1B1410}
.sh-note{text-align:center;margin-top:20px;font-size:12.5px;color:var(--muted2)}
@media(max-width:760px){ .sh-hero{grid-template-columns:1fr} .sh-meta{grid-template-columns:1fr} }

/* ── 사진 등록 ───────────────────────────────────────── */
.ph-people{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:12px}
.ph-p{background:var(--soft);border:1.5px solid transparent;border-radius:13px;padding:14px;text-align:center}
.ph-p.on{border-color:#CFE9C4;background:#F7FCF4}
html[data-theme="dark"] .ph-p.on{background:var(--ok-bg);border-color:var(--ok-line)}
.ph-role{display:block;font-size:11px;color:var(--muted2)}
.ph-p b{display:block;font-size:14px;margin:4px 0 5px}
.ph-p em{font-style:normal;font-size:11.5px;color:var(--muted2);font-weight:400}
.ph-n{display:block;font-size:11.5px;color:var(--muted)}
.ph-p.on .ph-n{color:#3B7A2A;font-weight:700}
html[data-theme="dark"] .ph-p.on .ph-n{color:var(--ok-ink)}
.ph-angles{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:12px}
.ph-ang{background:var(--paper);border:1.5px solid var(--line2);border-radius:13px;
  padding:14px 10px;text-align:center}
.ph-ang.must{border-color:var(--orange);background:#FFF8F0}
html[data-theme="dark"] .ph-ang.must{background:#2A2038}
.ph-ang i{display:grid;place-items:center;width:24px;height:24px;margin:0 auto 7px;
  border-radius:50%;background:var(--line2);color:#fff;font-style:normal;font-size:12px}
.ph-ang.must i{background:var(--orange)}
.ph-ang b{display:block;font-size:13px}
.ph-ang em{font-style:normal;font-size:10.5px;color:var(--orange-d);margin-left:3px}
.ph-ang span{display:block;font-size:11px;color:var(--muted2);margin-top:4px;line-height:1.5}
@media(max-width:820px){ .ph-angles{grid-template-columns:repeat(2,1fr)} }
.pg-tasks{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.pg-task{display:flex;align-items:center;gap:11px;background:var(--soft);
  border-radius:12px;padding:13px 16px;font-size:13.5px;position:relative;overflow:hidden}
.pg-task.done{background:#EEF9EA}
.pg-task.doing{background:#FFF6E4}
html[data-theme="dark"] .pg-task.done{background:var(--ok-bg)}
html[data-theme="dark"] .pg-task.doing{background:var(--wn-bg)}
.pg-tk-ic{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;flex:none;
  background:var(--line2);color:#fff;font-size:11px}
.pg-task.done .pg-tk-ic{background:#5CAE47}
.pg-task.doing .pg-tk-ic{background:var(--orange)}
.pg-task b{flex:1;min-width:0}
.pg-tk-n{font-size:12.5px;color:var(--muted);flex:none}
.pg-task.done .pg-tk-n{color:#3B7A2A}
.pg-task.doing .pg-tk-n{color:var(--orange-d);font-weight:700}
html[data-theme="dark"] .pg-task.done .pg-tk-n{color:var(--ok-ink)}
html[data-theme="dark"] .pg-task.doing .pg-tk-n{color:var(--wn-ink)}
.pg-tk-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:rgba(0,0,0,.06)}
.pg-tk-bar i{display:block;height:100%;background:var(--orange);transition:width .5s}

/* ── 영상 방식 고르기 ────────────────────────────────── */
.vd-modes{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:12px 0}
.vd-mode{cursor:pointer}
.vd-mode input{position:absolute;opacity:0}
.vd-mode-in{display:block;position:relative;border:2px solid var(--line2);border-radius:var(--r-l);
  padding:20px 16px 18px;background:var(--paper);transition:.22s;height:100%}
.vd-mode:hover .vd-mode-in{border-color:var(--orange2);transform:translateY(-3px)}
.vd-mode input:checked + .vd-mode-in{border-color:var(--orange);background:#FFF8F0}
html[data-theme="dark"] .vd-mode input:checked + .vd-mode-in{background:#2A2038}
.vd-badge{position:absolute;left:50%;top:-11px;transform:translateX(-50%);font-style:normal;
  background:var(--orange);color:#fff;border-radius:999px;padding:3px 13px;
  font-size:11px;font-weight:700;white-space:nowrap}
.vd-mode-in b{display:block;font-family:var(--font-title);font-size:16px}
.vd-mode-in > span{display:block;font-size:12.5px;color:var(--muted);margin-top:7px;line-height:1.75}
@media(max-width:640px){ .vd-modes{grid-template-columns:1fr} }
.hd-me{display:flex;flex-direction:column;line-height:1.25;text-align:right}
.hd-me b{font-size:13.5px;font-weight:700}
.hd-me em{font-style:normal;font-size:10.5px;color:var(--muted2)}
/* 화풍 견본 그림이 아직 없을 때 */
.mk-style-in.no-img{display:grid;place-items:center;min-height:96px;
  background:linear-gradient(135deg,var(--soft),var(--paper2))}
.mk-style-in.no-img b{padding:0}

/* ── 초등부 만들기 — 아이 고르기 ─────────────────────── */
.mk-kids{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:9px;margin:10px 0 4px}
.mk-kids .mk-kid{width:auto;background:none;border:none;transform:none;box-shadow:none;
  padding:0;margin:0}
.mk-kids .mk-kid:hover{transform:none;box-shadow:none}
.mk-kids .mk-kid input{position:absolute;opacity:0}
.mk-kid-in{display:block;border:1.5px solid var(--line2);border-radius:13px;
  padding:13px 10px;text-align:center;background:var(--paper);transition:.2s}
.mk-kid-in b{display:block;font-size:14px;font-weight:700}
.mk-kid-in i{display:block;font-style:normal;font-size:11.5px;color:var(--muted2);margin-top:3px}
.mk-kids .mk-kid:hover .mk-kid-in{border-color:var(--orange2);transform:translateY(-3px)}
.mk-kids .mk-kid input:checked + .mk-kid-in{border-color:var(--orange);background:#FFF8F0}
html[data-theme="dark"] .mk-kids .mk-kid input:checked + .mk-kid-in{background:#2A2038}
@media(max-width:480px){ .mk-kids{grid-template-columns:1fr 1fr} }

/* ── 메인 트렌드 구역 ────────────────────────────────── */
.tr-kicker{display:inline-block;background:var(--soft);border-radius:999px;
  padding:5px 15px;font-size:12.5px;color:var(--muted);margin-bottom:10px}
.tr-card-hd{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.tr-card-hd img{width:22px;height:22px;border-radius:6px;object-fit:contain}
.tr-card-hd b{font-size:15px}
.tr-card-hd span{margin-left:auto;font-size:11.5px;color:var(--muted2)}
.tr-when{font-size:11.5px;color:var(--muted2)}
.tr-list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.tr-list li{display:flex;align-items:center;gap:10px}
.tr-rank{display:grid;place-items:center;width:20px;height:20px;border-radius:6px;flex:none;
  background:var(--soft);font-size:11.5px;font-weight:700;color:var(--muted)}
.tr-list img{width:44px;aspect-ratio:16/10;object-fit:cover;border-radius:7px;flex:none}
.tr-tit{flex:1;min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr-cta{display:block;margin-top:14px;text-align:center;border:1.5px solid var(--line2);
  border-radius:var(--r-pill);padding:9px;font-size:13px;color:var(--ink2);transition:.18s}
.tr-cta:hover{border-color:var(--orange2);color:var(--orange)}
.tr-cross-hd{margin-bottom:14px}
.tr-cross-hd b{display:block;font-family:var(--font-title);font-size:17px;line-height:1.5}
.tr-cross-hd span{display:block;font-size:12px;color:var(--muted2);margin-top:5px}
.tr-cross-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.tr-cross-item{background:var(--paper);border:1px solid var(--line2);
  border-radius:13px;padding:14px 16px}
.tr-cross-item b{display:block;font-size:14.5px}
.tr-up{display:inline-block;margin-top:4px;font-size:12.5px;color:#3B7A2A;font-weight:700}
html[data-theme="dark"] .tr-up{color:var(--ok-ink)}
.tr-bar{display:block;height:6px;border-radius:999px;background:var(--soft);
  overflow:hidden;margin:8px 0 6px}
.tr-bar i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--orange2),var(--orange))}
.tr-note{display:block;font-size:11.5px;color:var(--muted2);line-height:1.6}
.tr-disc{margin-top:18px;font-size:11.5px;color:var(--muted2);line-height:1.8;text-align:center}
/* 그 밖에 빠져 있던 것 */
.ct-main-form{margin:0}
.hd-plain{font-size:14px;color:var(--ink2)}
.sc-who{text-align:center}
.scrollx{overflow-x:auto}
.tag.t-no{background:var(--soft);color:var(--muted2)}
/* 다른 갈래로 가는 링크 */
.hd-cross{font-size:12.5px;color:var(--muted2);white-space:nowrap;
  border:1px solid var(--line2);border-radius:var(--r-pill);padding:5px 12px;transition:.18s}
.hd-cross:hover{border-color:var(--orange2);color:var(--orange)}
.hd-logotext{font-family:var(--font-title);font-size:19px;color:var(--orange-d)}
@media(max-width:900px){ .hd-cross{display:none} }

/* ── 뜬다스토리 (가족) ───────────────────────────────── */
.fm-hero{background:linear-gradient(180deg,#FBF6F0 0%,var(--paper) 100%)}
.fm-kinds{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:22px}
.fm-kind{display:block;background:var(--surface);border:1px solid var(--line2);
  border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-card);
  transition:.28s;color:inherit;text-align:center;padding-bottom:18px}
.fm-kind:hover{transform:translateY(-5px);box-shadow:var(--sh-lift)}
.fm-kind-img{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--soft)}
.fm-kind-img img{width:100%;height:100%;object-fit:cover;display:block}
.fm-kind-img i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-style:normal;font-size:34px;opacity:0}
.fm-kind-img.no-img i{opacity:1}
.fm-kind b{display:block;font-family:var(--font-title);font-size:16px;margin:14px 14px 5px}
.fm-kind-d{display:block;font-size:12.5px;color:var(--muted);line-height:1.65;margin:0 14px}
.fm-kind em{display:block;font-style:normal;font-size:13px;color:var(--orange-d);
  font-weight:700;margin-top:9px}
.fm-beats{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.fm-beat{display:flex;align-items:center;gap:11px;background:var(--soft);
  border-radius:11px;padding:11px 15px;font-size:13.5px}
.fm-beat i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;flex:none;
  background:var(--orange);color:#fff;font-style:normal;font-size:11.5px}
@media(max-width:900px){ .fm-kinds{grid-template-columns:1fr 1fr} }
@media(max-width:520px){ .fm-kinds{grid-template-columns:1fr} }

/* ── 토큰 ────────────────────────────────────────────── */
.tk-rate{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:14px}
.tk-r{display:flex;align-items:center;gap:10px;background:var(--soft);
  border-radius:11px;padding:11px 15px;font-size:13.5px}
.tk-r b{margin-left:auto;font-weight:700}
.tk-r.free{background:#F7FCF4}
.tk-r.free b{color:#3B7A2A}
html[data-theme="dark"] .tk-r.free{background:var(--ok-bg)}
html[data-theme="dark"] .tk-r.free b{color:var(--ok-ink)}
.tk-ex{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;padding:14px}
.tk-e{background:var(--soft);border-radius:12px;padding:14px;text-align:center}
.tk-e b{display:block;font-size:14px}
.tk-e span{display:block;font-size:11.5px;color:var(--muted2);margin:4px 0 8px;line-height:1.5}
.tk-e em{font-style:normal;font-size:15px;font-weight:700;color:var(--orange-d)}
.tk-packs{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:16px 0 10px}
.tk-pack{position:relative;background:var(--surface);border:2px solid var(--line2);
  border-radius:var(--r-xl);padding:22px 16px 18px;text-align:center;
  box-shadow:var(--sh-card);transition:.28s;margin:0}
.tk-pack:hover{transform:translateY(-5px);box-shadow:var(--sh-lift)}
.tk-pack.hot{border-color:var(--orange)}
.tk-badge{position:absolute;left:50%;top:-11px;transform:translateX(-50%);font-style:normal;
  background:var(--orange);color:#fff;border-radius:999px;padding:3px 14px;
  font-size:11px;font-weight:700;white-space:nowrap}
.tk-name{display:block;font-size:13.5px;color:var(--muted);margin-bottom:8px}
.tk-amt{display:block;font-family:var(--font-title);font-size:26px;color:var(--ink)}
.tk-amt em{font-style:normal;font-size:13px;margin-left:2px;color:var(--muted2)}
.tk-bonus{display:inline-block;background:#EEF9EA;color:#3B7A2A;border-radius:999px;
  padding:2px 10px;font-size:11px;font-weight:700;margin-top:6px}
html[data-theme="dark"] .tk-bonus{background:var(--ok-bg);color:var(--ok-ink)}
.tk-desc{display:block;font-size:11.5px;color:var(--muted2);margin:9px 0 12px;line-height:1.6;
  min-height:34px}
.tk-price{display:block;font-size:19px;font-weight:700;color:var(--orange-d)}
.tk-price em{font-style:normal;font-size:13px;margin-left:1px}
.tk-per{display:block;font-size:11px;color:var(--muted2);margin:3px 0 13px}
.tk-pack .btn-cta{width:100%}
@media(max-width:1100px){ .tk-packs{grid-template-columns:repeat(3,1fr)} .tk-ex{grid-template-columns:1fr 1fr} }
@media(max-width:640px){ .tk-packs{grid-template-columns:1fr} .tk-rate{grid-template-columns:1fr} }

/* ── 읽어주는 목소리 고르기 ─────────────────────────── */
.vo-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0 4px}
.vo{cursor:pointer;margin:0}
.vo input{position:absolute;opacity:0}
.vo-in{display:flex;align-items:center;gap:11px;border:1.5px solid var(--line2);
  border-radius:13px;padding:13px 14px;background:var(--paper);transition:.2s;height:100%}
.vo:hover .vo-in{border-color:var(--orange2);transform:translateY(-2px)}
.vo input:checked + .vo-in{border-color:var(--orange);background:#FFF8F0}
html[data-theme="dark"] .vo input:checked + .vo-in{background:#2A2038}
.vo-in i{font-style:normal;font-size:22px;flex:none}
.vo-in b{display:block;font-size:14px}
.vo-in > span{display:block;font-size:11.5px;color:var(--muted2);margin-top:2px;line-height:1.5}
.vo--parent .vo-in{border-style:dashed;border-color:var(--orange2)}
@media(max-width:820px){ .vo-list{grid-template-columns:1fr 1fr} }
@media(max-width:520px){ .vo-list{grid-template-columns:1fr} }
.vo-in b em{font-style:normal;font-size:11.5px;color:var(--muted2);font-weight:400;margin-left:5px}
/* 여기에 있던 .vo-list{grid-template-columns:repeat(3,1fr)} 한 줄을 뺐습니다.
   바로 위 두 줄의 화면폭 규칙(820px·520px)보다 뒤에 있어서, 폭이 같은
   힘이면 뒤가 이깁니다. 그래서 휴대폰에서도 목소리 칸이 3줄로 붙어
   글자가 다 깨졌습니다. 같은 값이라 지워도 넓은 화면은 그대로입니다. (2026-09-13) */
.vo-group{margin:16px 0 8px;font-size:12.5px;font-weight:700;color:var(--muted2)}
.vo-group:first-of-type{margin-top:12px}
.vo-in b em{display:block;font-style:normal;font-size:11px;color:var(--muted2);
  font-weight:400;margin:2px 0 0}
.vo--mine .vo-in{border-style:dashed;border-color:var(--orange2)}
.vo-in{position:relative}
.vo-play{position:absolute;right:10px;top:50%;transform:translateY(-50%);
  display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--soft);color:var(--ink2);font-size:10px;cursor:pointer;transition:.18s}
.vo-play:hover{background:var(--orange);color:#fff}
.vo-in b{padding-right:26px}

/* ── 마지막 검수 ─────────────────────────────────────── */
.rv-issues{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.rv-issue{display:flex;align-items:flex-start;gap:13px;border-radius:14px;
  padding:15px 17px;border:1.5px solid}
.rv-issue i{font-style:normal;font-size:20px;flex:none;line-height:1.3}
.rv-issue b{display:block;font-size:14.5px}
.rv-issue p{margin-top:4px;font-size:13px;line-height:1.75;color:var(--muted)}
.rv-issue .btn-ghost{margin-left:auto;flex:none;align-self:center;white-space:nowrap}
.rv-stop{background:#FEF3F2;border-color:#F9C9C4}
.rv-stop b{color:#B3261E}
.rv-warn{background:#FFF8EC;border-color:#FBDFA8}
.rv-warn b{color:#9A6400}
.rv-tip{background:#F4F8FE;border-color:#CFE0F7}
.rv-tip b{color:#1F5FAD}
html[data-theme="dark"] .rv-stop{background:#3A1F1E;border-color:#5E2E2B}
html[data-theme="dark"] .rv-warn{background:#3A2F1A;border-color:#5E4A22}
html[data-theme="dark"] .rv-tip{background:#1D2A3C;border-color:#2C4260}

.rv-ok{display:flex;align-items:center;gap:14px;background:#F2FAF3;
  border:1.5px solid #BFE5C4;border-radius:14px;padding:16px 18px;margin-bottom:18px}
.rv-ok i{display:grid;place-items:center;width:32px;height:32px;flex:none;
  border-radius:50%;background:#3AA76D;color:#fff;font-style:normal;font-size:15px}
.rv-ok b{display:block;font-size:15px;color:#2B7A4B}
.rv-ok p{margin-top:3px;font-size:13px;color:var(--muted)}
html[data-theme="dark"] .rv-ok{background:#18301F;border-color:#2B5238}

.rv-list{display:flex;flex-direction:column;padding:6px 0}
.rv-row{display:flex;align-items:center;gap:12px;padding:13px 16px;
  border-bottom:1px solid var(--line)}
.rv-row:last-child{border-bottom:0}
.rv-row i{font-style:normal;font-size:17px;flex:none;width:22px;text-align:center}
.rv-name{font-size:13px;color:var(--muted);flex:none;width:104px}
.rv-val{flex:1;font-size:14px;font-weight:700;min-width:0}
.rv-row a{font-size:12.5px;color:var(--orange-d);flex:none;white-space:nowrap}
.rv-row a:hover{text-decoration:underline}

.rv-board{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:14px}
.rv-scene{position:relative;background:var(--soft);border:1.5px solid transparent;
  border-radius:12px;overflow:hidden}
.rv-scene.on{border-color:var(--orange2)}
.rv-scene img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.rv-blank{display:grid;place-items:center;aspect-ratio:3/2;font-size:11px;
  color:var(--muted2);text-align:center;padding:8px}
.rv-no{position:absolute;left:7px;top:7px;z-index:2;display:grid;place-items:center;
  width:20px;height:20px;border-radius:50%;background:rgba(35,27,22,.68);
  color:#fff;font-size:11px;font-weight:700}
.rv-tx{display:block;padding:9px 11px 11px;font-size:11.5px;line-height:1.55;
  color:var(--ink2)}
.rv-move{position:absolute;right:7px;top:7px;z-index:2;font-style:normal;
  background:var(--orange);color:#fff;border-radius:999px;padding:2px 8px;
  font-size:10px;font-weight:700}

.rv-bal{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--soft);border-radius:12px;padding:14px 16px;margin:0 14px 14px;
  font-size:13.5px}
.rv-bal b{font-weight:700}
.rv-bal .btn-cta{margin-left:auto}

.rv-agree{background:#FFF8F0;border:1.5px solid var(--orange2);border-radius:16px;
  padding:20px 22px;margin:18px 0}
html[data-theme="dark"] .rv-agree{background:#2A2038}
.rv-agree>b{display:block;font-size:15px;margin-bottom:11px}
.rv-agree ul{display:flex;flex-direction:column;gap:7px;margin:0 0 16px;padding:0;
  list-style:none}
.rv-agree li{position:relative;padding-left:16px;font-size:13px;line-height:1.8;
  color:var(--ink2)}
.rv-agree li::before{content:'·';position:absolute;left:5px;color:var(--orange)}
.rv-chk{display:flex;align-items:flex-start;gap:10px;background:var(--paper);
  border-radius:12px;padding:14px 16px;cursor:pointer;font-size:13.5px;line-height:1.7}
.rv-chk input{margin-top:2px;width:18px;height:18px;accent-color:var(--orange);flex:none}

@media(max-width:820px){ .rv-board{grid-template-columns:repeat(3,1fr)} }
@media(max-width:560px){
  .rv-board{grid-template-columns:1fr 1fr}
  .rv-row{flex-wrap:wrap;gap:8px}
  .rv-name{width:auto}
  .rv-val{flex:1 1 100%;order:3}
  .rv-issue{flex-wrap:wrap}
  .rv-issue .btn-ghost{margin-left:0;width:100%}
  .rv-bal{flex-direction:column;align-items:stretch}
  .rv-bal .btn-cta{margin-left:0}
}
/* 이야기 전체 다시 쓰기 */
.sc-all{background:var(--soft);border-radius:12px;padding:13px 15px;margin:4px 0}
.sc-all>summary{cursor:pointer;font-size:13.5px;font-weight:700;list-style:none}
.sc-all>summary::-webkit-details-marker{display:none}
.sc-all>summary::after{content:'⌄';float:right;color:var(--muted2);transition:transform .2s}
.sc-all[open]>summary::after{transform:rotate(180deg)}
.sc-all .wz-note{margin-top:8px}

/* ── 「하는 중」 표시 ─────────────────────────────────── */
.bz-dot{display:inline-block;width:13px;height:13px;margin-right:8px;
  vertical-align:-2px;border:2px solid rgba(255,255,255,.45);
  border-top-color:#fff;border-radius:50%;animation:bzspin .7s linear infinite}
.btn-ghost .bz-dot,.btn-plain .bz-dot{border-color:var(--line2);border-top-color:var(--orange)}
@keyframes bzspin{to{transform:rotate(360deg)}}

.bz-veil{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;
  background:rgba(35,27,22,.42);backdrop-filter:blur(3px);
  animation:bzfade .2s ease}
@keyframes bzfade{from{opacity:0}to{opacity:1}}
.bz-box{background:var(--paper);border-radius:20px;padding:34px 40px;text-align:center;
  box-shadow:0 20px 50px rgba(0,0,0,.22);max-width:88vw}
.bz-spin{width:46px;height:46px;margin:0 auto 18px;border:4px solid var(--line2);
  border-top-color:var(--orange);border-radius:50%;animation:bzspin .8s linear infinite}
.bz-msg{display:block;font-size:16px;font-weight:700;line-height:1.6}
.bz-sub{display:block;margin-top:8px;font-size:13px;color:var(--muted)}
.bz-sec{display:inline-block;margin-top:14px;background:var(--soft);
  border-radius:999px;padding:4px 14px;font-size:12.5px;color:var(--muted2)}
@media(max-width:480px){ .bz-box{padding:28px 26px} }

/* ── 계정 고치기 ─────────────────────────────────────── */
.ac-form{padding:4px 16px 16px}
.ac-lb{display:block;margin:12px 0 6px;font-size:13px;font-weight:700}
.ac-lb em{font-style:normal;font-weight:400;font-size:11.5px;color:var(--muted2);margin-left:5px}
.ac-quit{margin-top:18px;background:#FEF3F2;border:1px solid #F9C9C4;
  border-radius:13px;padding:14px 16px}
html[data-theme="dark"] .ac-quit{background:#3A1F1E;border-color:#5E2E2B}
.ac-quit>summary{cursor:pointer;font-size:13.5px;font-weight:700;color:#B3261E;list-style:none}
.ac-quit>summary::-webkit-details-marker{display:none}
.ac-quit>summary::after{content:'⌄';float:right;transition:transform .2s}
.ac-quit[open]>summary::after{transform:rotate(180deg)}
.ac-quit p{margin-top:10px;font-size:12.5px;line-height:1.8;color:var(--ink2)}
.btn-ghost.danger{border-color:#F0A9A2;color:#B3261E}
.btn-ghost.danger:hover{background:#FDECEA;border-color:#B3261E}
.my-msg{margin:0 16px 4px;background:#EDF8F1;border-radius:10px;padding:11px 14px;
  font-size:13px;color:#2B7A4B}
html[data-theme="dark"] .my-msg{background:var(--ok-bg);color:var(--ok-ink)}

/* ── 장면 고치기 ─────────────────────────────────────── */
.fx-bal{display:flex;align-items:center;gap:12px;background:var(--soft);
  border-radius:13px;padding:14px 17px;margin-bottom:16px;font-size:14px}
.fx-bal .btn-ghost{margin-left:auto}
.fx-work{display:flex;align-items:center;gap:14px;background:#FFF8F0;
  border:1.5px solid var(--orange2);border-radius:14px;padding:15px 18px;margin-bottom:16px}
html[data-theme="dark"] .fx-work{background:#2A2038}
.fx-work b{display:block;font-size:14.5px}
.fx-work p{margin-top:3px;font-size:12.5px;color:var(--muted)}
.fx-work .btn-ghost{margin-left:auto;flex:none}

.fx-list{display:flex;flex-direction:column;gap:12px}
.fx-card{display:grid;grid-template-columns:190px minmax(0,1fr);gap:16px;
  background:var(--paper);border:1px solid var(--line);border-radius:16px;
  padding:14px;box-shadow:var(--sh-card);scroll-margin-top:80px}
.fx-card.out{opacity:.55}
.fx-left{position:relative}
.fx-left img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:11px;display:block}
.fx-blank{display:grid;place-items:center;aspect-ratio:3/2;border-radius:11px;
  background:var(--soft);font-size:11.5px;color:var(--muted2)}
.fx-no{position:absolute;left:8px;top:8px;z-index:2;display:grid;place-items:center;
  width:24px;height:24px;border-radius:50%;background:rgba(35,27,22,.7);
  color:#fff;font-size:12px;font-weight:700}
.fx-badge{position:absolute;right:8px;top:8px;z-index:2;font-style:normal;
  background:var(--orange);color:#fff;border-radius:999px;padding:2px 9px;
  font-size:10.5px;font-weight:700}
.fx-tx{font-size:14px;line-height:1.85;color:var(--ink2)}

.fx-back{display:flex;align-items:center;gap:10px;margin-top:12px;
  background:var(--soft);border-radius:11px;padding:11px 14px;font-size:13px}
.fx-back .btn-ghost{margin-left:auto}

.fx-open{margin-top:12px}
.fx-open>summary{cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  background:var(--soft);border-radius:999px;padding:8px 16px;
  font-size:13px;font-weight:700;list-style:none}
.fx-open>summary::-webkit-details-marker{display:none}
.fx-open>summary::after{content:'⌄';color:var(--muted2);transition:transform .2s}
.fx-open[open]>summary::after{transform:rotate(180deg)}

.fx-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.fx-opt{margin:0}
.fx-opt button{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  background:var(--paper);border:1.5px solid var(--line2);border-radius:12px;
  padding:12px 13px;transition:.18s}
.fx-opt button:hover:not(:disabled){border-color:var(--orange2);transform:translateY(-2px)}
.fx-opt button:disabled{opacity:.4;cursor:not-allowed}
.fx-opt i{font-style:normal;font-size:19px;flex:none}
.fx-opt b{display:block;font-size:13.5px}
.fx-opt small{display:block;margin-top:2px;font-size:11px;color:var(--muted2);line-height:1.5}
.fx-opt em{margin-left:auto;flex:none;font-style:normal;font-size:12px;font-weight:700;
  color:var(--orange-d);white-space:nowrap}

.fx-text{margin-top:12px}
.fx-text label{display:block;margin-bottom:7px;font-size:13px;font-weight:700}
.fx-text textarea{width:100%;border:1px solid var(--line2);border-radius:11px;
  padding:12px 14px;font-size:13.5px;line-height:1.8;background:var(--soft);resize:vertical}
.fx-text textarea:focus{outline:none;border-color:var(--orange2);background:var(--paper)}
.fx-text .btn-ghost{width:100%;margin-top:9px}

.fx-deep{margin-top:12px;background:var(--soft);border-radius:11px;padding:12px 14px}
.fx-deep>summary{cursor:pointer;font-size:12.5px;color:var(--muted);list-style:none}
.fx-deep>summary::-webkit-details-marker{display:none}
.fx-deep>summary::after{content:'⌄';float:right;transition:transform .2s}
.fx-deep[open]>summary::after{transform:rotate(180deg)}
.fx-deep label{display:block;margin:10px 0 6px;font-size:12.5px;font-weight:700}
.fx-deep .btn-ghost{width:100%;margin-top:9px}

.fx-foot{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:26px}

@media(max-width:700px){
  .fx-card{grid-template-columns:1fr}
  .fx-opts{grid-template-columns:1fr}
  .fx-bal{flex-wrap:wrap}
  .fx-work{flex-wrap:wrap}
  .fx-work .btn-ghost{margin-left:0;width:100%}
  .fx-foot .btn-ghost,.fx-foot .btn-cta{flex:1 1 100%}
}

/* ── 시리즈 목록 ─────────────────────────────────────── */
.sl-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.sl-tab{display:inline-flex;align-items:center;gap:6px;background:var(--soft);
  border-radius:999px;padding:9px 17px;font-size:13.5px;font-weight:700;color:var(--ink2)}
.sl-tab.on{background:var(--orange);color:#fff}
.sl-tab em{font-style:normal;font-size:11.5px;opacity:.7}
.sl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:12px}
.sl-card{display:flex;flex-direction:column;gap:5px;background:var(--paper);
  border:1px solid var(--line);border-radius:15px;padding:18px;box-shadow:var(--sh);
  transition:.2s}
.sl-card:hover{transform:translateY(-3px);box-shadow:var(--sh-card);border-color:var(--orange2)}
.sl-ic{font-size:26px}
.sl-card b{font-size:15.5px}
.sl-card small{font-size:12px;color:var(--muted);line-height:1.6}
.sl-n{margin-top:6px;align-self:flex-start;background:var(--orange-soft);
  color:var(--orange-d);border-radius:999px;padding:3px 11px;font-size:11.5px;font-weight:700}

/* ── 부 고르기 ───────────────────────────────────────── */
.sr-head{margin-bottom:22px}
.sr-head h1{margin-top:9px;font-size:clamp(23px,3.4vw,31px);letter-spacing:-.03em}
.sr-head>p{margin-top:9px;font-size:15px;line-height:1.85;color:var(--ink2)}
.sr-meta{display:flex;gap:16px;flex-wrap:wrap;margin-top:13px;font-size:13.5px;color:var(--muted)}
.sr-note{margin-top:14px;background:var(--soft);border-radius:12px;padding:13px 16px;
  font-size:13.5px;line-height:1.8}
.sr-parts{display:flex;flex-direction:column;gap:11px}
.sr-part{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;
  background:var(--paper);border:1px solid var(--line);border-radius:15px;
  padding:16px 18px;box-shadow:var(--sh);transition:.2s}
.sr-part:hover{border-color:var(--orange2);box-shadow:var(--sh-card)}
.sr-part.done{background:var(--soft)}
.sr-no{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:var(--orange-soft);color:var(--orange-d);font-size:14px;font-weight:800}
.sr-part.done .sr-no{background:#DFF3E6;color:#2B7A4B}
/* 위인전 — 이 부가 생애의 어느 대목이고, 기록에 있는 날인지 (2026-09-13) */
.sr-stage{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:5px}
.sr-stage b{font-size:12.5px;color:var(--orange-d);letter-spacing:-.01em}
.sr-stage span{font-size:12.5px;color:var(--muted)}
.sr-imag,.sr-real{font-style:normal;font-size:11.5px;padding:2px 8px;border-radius:999px;
  white-space:nowrap;cursor:help}
.sr-imag{background:#FFF4E5;color:#9A5B12;border:1px solid #F3D9B3}
.sr-real{background:#E9F7F0;color:#1E7A53;border:1px solid #C7E9D9}
.sr-note.sr-honest{background:transparent;border:1px dashed var(--line2);
  color:var(--muted);font-size:12.5px;margin-top:8px}
@media(max-width:480px){
  .sr-stage{gap:5px}
  .sr-stage b,.sr-stage span{font-size:12px}
}

.sr-body h2{font-size:17px;letter-spacing:-.02em}
.sr-body p{margin-top:4px;font-size:13px;line-height:1.7;color:var(--muted)}
.sr-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}
.sr-tags span{background:var(--soft);border-radius:999px;padding:3px 11px;
  font-size:11.5px;color:var(--ink2)}
.sr-act{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.sr-done{font-size:12.5px;font-weight:700;color:#2B7A4B;white-space:nowrap}
.sr-book{display:flex;align-items:center;gap:20px;margin-top:22px;
  background:var(--grad-soft,#FFF6EE);border:1.5px solid var(--orange2);
  border-radius:16px;padding:20px 24px}
html[data-theme="dark"] .sr-book{background:#2A2038}
.sr-book b{font-size:16px}
.sr-book p{margin-top:7px;font-size:13px;color:var(--ink2)}
.sr-book .btn-cta{margin-left:auto;flex:none}
.sr-bar{height:9px;border-radius:999px;background:#F1E2D2;overflow:hidden;margin-top:9px;
  max-width:320px}
.sr-bar i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,#FF8A3D,#FD6A1F)}

/* ── 미리보기 ────────────────────────────────────────── */
.pv-back{display:inline-block;margin-bottom:12px;font-size:13.5px;color:var(--muted)}
.pv-back:hover{color:var(--orange)}
.pv-head h1{margin-top:8px;font-size:clamp(21px,3vw,28px);letter-spacing:-.03em}
.pv-head>p{margin-top:8px;font-size:14.5px;color:var(--ink2)}
.pv-tip{display:flex;align-items:flex-start;gap:14px;margin:18px 0;
  background:#FFF8F0;border:1.5px solid var(--orange2);border-radius:14px;padding:16px 18px}
html[data-theme="dark"] .pv-tip{background:#2A2038}
.pv-tip i{font-style:normal;font-size:24px;flex:none}
/* 제목 줄만 블록입니다.
 * 예전에는 .pv-tip 안의 b 를 전부 블록으로 잡아서, 설명 문장 안의 굵은 글씨마다
 * 줄이 끊겼습니다. 「아래는 / 견본 / 이에요. 실제로는 / 우리 아이 얼굴 / 로
 * 그려집니다」 처럼 읽혀서 무슨 말인지 알 수 없었습니다.  (2026-09-13) */
.pv-tip > div > b{display:block;font-size:15px}
.pv-tip p{margin-top:5px;font-size:13px;line-height:1.8;color:var(--ink2)}
.pv-tip p b{display:inline;font-size:inherit}
.pv-list{display:flex;flex-direction:column;gap:12px}
.pv-scene{display:grid;grid-template-columns:210px minmax(0,1fr);gap:16px;
  background:var(--paper);border:1px solid var(--line);border-radius:15px;
  padding:14px;box-shadow:var(--sh)}
.pv-img{position:relative;aspect-ratio:3/2;border-radius:11px;overflow:hidden;
  background:var(--soft)}
.pv-img img{width:100%;height:100%;object-fit:cover;display:block}
.pv-blank{display:grid;place-items:center;height:100%;font-size:11.5px;color:var(--muted2)}
.pv-no{position:absolute;left:8px;top:8px;z-index:2;display:grid;place-items:center;
  width:23px;height:23px;border-radius:50%;background:rgba(35,27,22,.7);
  color:#fff;font-size:11.5px;font-weight:700}
.pv-face{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:2;
  display:grid;place-items:center;width:66px;height:66px;border-radius:50%;
  border:2.5px dashed rgba(253,106,31,.85);background:rgba(255,255,255,.82);
  color:var(--orange-d);font-size:10.5px;font-weight:700;line-height:1.35;text-align:center}
.pv-move{position:absolute;right:8px;top:8px;z-index:2;font-style:normal;
  background:var(--orange);color:#fff;border-radius:999px;padding:2px 9px;
  font-size:10px;font-weight:700}
.pv-tx b{font-size:15px}
.pv-tx>p{margin-top:6px;font-size:14px;line-height:1.85;color:var(--ink2)}
.pv-say{display:flex;flex-direction:column;gap:4px;margin-top:9px;
  background:var(--soft);border-radius:10px;padding:10px 13px}
.pv-say span{font-size:12.5px;line-height:1.7}
.pv-say b{font-size:12.5px;color:var(--orange-d)}
.pv-role{display:block;margin-top:9px;font-size:12px;color:var(--muted)}
.pv-foot{display:flex;align-items:center;gap:20px;margin-top:22px;
  background:var(--soft);border-radius:16px;padding:20px 24px;flex-wrap:wrap}
.pv-cost span{font-size:13px;color:var(--muted)}
.pv-cost b{display:block;font-size:27px;font-weight:800;letter-spacing:-.02em}
.pv-cost b em{font-style:normal;font-size:14px;margin-left:3px}
.pv-cost small{display:block;margin-top:3px;font-size:11.5px;color:var(--muted2)}
.pv-foot form{margin-left:auto}
.pv-note{margin-top:11px;font-size:12.5px;color:var(--muted);text-align:center}

@media(max-width:720px){
  .sr-part{grid-template-columns:auto minmax(0,1fr);gap:12px}
  .sr-cover{width:74px;height:48px}
  .sr-act{grid-column:1/-1;flex-direction:row;align-items:center}
  .sr-act .btn-ghost{flex:1}
  .sr-book{flex-direction:column;align-items:stretch}
  .sr-book .btn-cta{margin-left:0}
  .pv-scene{grid-template-columns:1fr}
  .pv-foot{flex-direction:column;align-items:stretch}
  .pv-foot form{margin-left:0}
  .pv-foot .btn-cta{width:100%}
}
.sr-making{font-size:12.5px;font-weight:700;color:var(--orange-d);white-space:nowrap}
.sr-part.making{border-color:var(--orange2)}
.sr-part.making .sr-no{background:var(--orange);color:#fff}

/* ── 시리즈 묶음 ─────────────────────────────────────── */
.sr-pick{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:12px;
  color:var(--muted);white-space:nowrap}
.sr-pick input{width:16px;height:16px;accent-color:var(--orange)}
.sr-bundle{display:flex;align-items:center;gap:18px;margin-top:14px;flex-wrap:wrap;
  background:#FFF8F0;border:1.5px solid var(--orange2);border-radius:15px;padding:18px 22px}
html[data-theme="dark"] .sr-bundle{background:#2A2038}
.sr-bundle b{font-size:15.5px}
.sr-bundle p{margin-top:4px;font-size:13px;color:var(--ink2)}
.sr-sum{margin-left:auto;text-align:right}
.sr-sum s{display:block;font-size:13px;color:var(--muted2)}
.sr-sum b{font-size:25px;font-weight:800;letter-spacing:-.02em}
.sr-sum em{font-style:normal;font-size:13px;margin-left:3px}
.sr-hint{margin-top:11px;font-size:12.5px;color:var(--muted);text-align:center}

/* ── 책으로 묶기 ─────────────────────────────────────── */
.sb-list{display:flex;flex-direction:column;gap:9px;margin-top:6px}
.sb-row{display:flex;align-items:center;gap:13px;cursor:pointer;
  background:var(--paper);border:1px solid var(--line);border-radius:13px;
  padding:14px 16px;box-shadow:var(--sh)}
.sb-row:hover{border-color:var(--orange2)}
.sb-row input{width:18px;height:18px;accent-color:var(--orange);flex:none}
.sb-no{display:grid;place-items:center;width:42px;height:42px;flex:none;
  border-radius:50%;background:var(--orange-soft);color:var(--orange-d);
  font-size:12.5px;font-weight:800}
.sb-tx{flex:1;min-width:0}
.sb-tx b{display:block;font-size:14.5px}
.sb-tx small{font-size:11.5px;color:var(--muted2)}
.sb-see{font-size:12.5px;color:var(--orange-d);white-space:nowrap}
.sb-sum{margin-top:13px;background:var(--soft);border-radius:12px;padding:13px 16px;
  font-size:14px;text-align:center}
.sb-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:13px}
.sb-opt{background:var(--paper);border:1px solid var(--line);border-radius:13px;
  padding:16px;text-align:center;box-shadow:var(--sh)}
.sb-opt b{display:block;font-size:14.5px}
.sb-opt em{display:block;margin-top:5px;font-style:normal;font-size:19px;font-weight:800;
  color:var(--orange-d)}
.sb-opt small{display:block;margin-top:5px;font-size:11.5px;color:var(--muted)}
@media(max-width:620px){ .sb-opts{grid-template-columns:1fr} .sr-sum{margin-left:0} }
.sr-cover{position:relative;display:block;width:92px;height:58px;border-radius:10px;
  overflow:hidden;flex:none}
.sr-cover img{width:100%;height:100%;object-fit:cover;display:block}
.sr-cover em{position:absolute;left:5px;bottom:5px;font-style:normal;
  background:rgba(35,27,22,.72);color:#fff;border-radius:999px;padding:2px 8px;
  font-size:10.5px;font-weight:700}

/* ── 로고 ────────────────────────────────────────────── */
.hd-brand{display:inline-flex;align-items:center;gap:8px;flex:none}
.hd-brand img+.hd-logotext{display:none}
.hd-brand.no-img .hd-logotext{display:inline}
.hd-logotext{font-family:var(--font-title);font-size:21px;font-weight:800;
  letter-spacing:-.03em;color:var(--ink);white-space:nowrap}
.hd-logotext em{font-style:normal;color:var(--orange)}
@media(max-width:820px){ .hd-logotext{font-size:18px} }

/* ── 머리말 — 좁은 화면에서 덜 붐비게 ─────────────────── */
.hd-in{gap:20px}
.hd-act{gap:9px}
.hd-cross{font-size:12.5px;color:var(--muted);border:1px solid var(--line2);
  border-radius:999px;padding:6px 12px;white-space:nowrap;transition:.2s}
.hd-cross:hover{border-color:var(--orange2);color:var(--orange)}
@media(max-width:1180px){
  .hd-in{gap:14px}
  .hd-nav{gap:0;font-size:14px}
  .hd-nav>a,.hd-item>a{padding:9px 10px}
  .hd-cross{display:none}
}
@media(max-width:980px){
  .age-tab a{padding:6px 10px;font-size:12px}
  .hd-act .theme-btn{display:none}
}

/* ── 가족 등장인물 ───────────────────────────────────── */
.fc-need{background:var(--soft);border-radius:14px;padding:16px 18px;margin-bottom:18px}
.fc-need>b{display:block;font-size:14px;margin-bottom:11px}
.fc-need>div{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.fc-need span{display:flex;align-items:flex-start;gap:9px}
.fc-need i{font-style:normal;font-size:17px;flex:none}
.fc-need b{display:block;font-size:13px}
.fc-need em{display:block;font-style:normal;font-size:11.5px;color:var(--muted);
  line-height:1.6;margin-top:2px}
.fc-form{display:flex;flex-direction:column;gap:11px}
.fc-row{background:var(--paper);border:1px solid var(--line);border-radius:15px;
  padding:17px 19px;box-shadow:var(--sh)}
.fc-row.req{border-color:var(--orange2)}
.fc-hd{display:flex;align-items:center;gap:9px}
.fc-hd b{font-size:16px}
.fc-hd em{font-style:normal;font-size:11.5px;font-weight:700;color:var(--orange-d);
  background:var(--orange-soft);border-radius:999px;padding:3px 10px}
.fc-hd em.opt{color:var(--muted2);background:var(--soft);font-weight:400}
.fc-hint{margin-top:5px;font-size:12.5px;color:var(--muted)}
.fc-in{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}
.fc-in .wz-input{flex:1;min-width:160px}
.fc-ph{display:flex;align-items:center;gap:6px;margin-top:11px;flex-wrap:wrap}
.fc-ph img{width:44px;height:44px;object-fit:cover;border-radius:9px}
.fc-ok{font-size:12px;font-weight:700;color:#2B7A4B;margin-left:4px}
@media(max-width:560px){ .fc-in .wz-input{min-width:100%} }


/* ══════════════════════════════════════════════════════
   뜬다스토리 — 시안 기준
   ══════════════════════════════════════════════════════ */
.sv{padding:26px 0 60px}
.sv .shell{max-width:1120px}

/* ── 단계 ─────────────────────────────────────────── */
.sv-steps{margin-bottom:34px}
.sv-steps ol{display:flex;list-style:none;margin:0;padding:0}
.sv-steps li{position:relative;flex:1;text-align:center}
.sv-line{position:absolute;left:calc(-50% + 19px);right:calc(50% + 19px);top:19px;
  height:2px;background:var(--line2)}
.sv-steps li.done .sv-line,.sv-steps li.now .sv-line{background:var(--orange)}
.sv-steps li b{position:relative;z-index:2;display:grid;place-items:center;
  width:38px;height:38px;margin:0 auto 9px;border-radius:50%;
  background:var(--paper);border:2px solid var(--line2);
  color:var(--muted2);font-size:14px;font-weight:800}
.sv-steps li em{font-style:normal;font-size:13px;color:var(--muted2)}
.sv-steps li.done b{background:var(--line2);border-color:var(--line2);color:var(--paper)}
.sv-steps li.done em{color:var(--ink2)}
.sv-steps li.now b{background:var(--orange);border-color:var(--orange);color:#fff;
  box-shadow:0 0 0 5px rgba(253,106,31,.14)}
.sv-steps li.now em{color:var(--orange-d);font-weight:800}

/* ── 머리말 ───────────────────────────────────────── */
.sv-head{position:relative;text-align:center;margin-bottom:34px}
.sv-step{display:inline-block;font-size:13px;font-weight:800;letter-spacing:.2em;
  color:var(--orange2);margin-bottom:10px}
.sv-step.done{color:var(--orange)}
.sv-head h1{font-size:clamp(26px,4vw,38px);letter-spacing:-.035em;line-height:1.32}
.sv-head h1 em{font-style:normal;color:var(--orange)}
.sv-head>p{margin-top:13px;font-size:15px;line-height:1.85;color:var(--muted)}
.sv-memo{position:absolute;right:0;top:-6px;font-family:var(--font-hand,inherit);
  font-size:13px;line-height:1.9;color:#8B6F4E;transform:rotate(-4deg);text-align:left;
  white-space:nowrap}
.sv-memo i{font-style:normal;color:#C4694A;margin-left:4px}
@media(max-width:900px){ .sv-memo{display:none} }

/* ── 카드 ─────────────────────────────────────────── */
.sv-card{background:var(--paper);border:1px solid var(--line);border-radius:20px;
  padding:26px 28px;margin-bottom:16px;box-shadow:var(--sh)}
.sv-ttl{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px}
.sv-num{display:grid;place-items:center;width:30px;height:30px;flex:none;
  border-radius:50%;background:var(--orange);color:#fff;font-size:14px;font-weight:800}
.sv-ic{display:grid;place-items:center;width:44px;height:44px;flex:none;
  border-radius:50%;background:var(--orange-soft);font-size:20px}
.sv-ttl h2{font-size:18px;letter-spacing:-.02em}
.sv-ttl h2 em{font-style:normal;font-size:13px;font-weight:400;color:var(--muted2)}
.sv-ttl p{margin-top:5px;font-size:13.5px;line-height:1.75;color:var(--muted)}
.sv-more{margin-left:auto;flex:none;align-self:center;font-size:13px;color:var(--ink2);
  border:1px solid var(--line2);border-radius:999px;padding:8px 15px;white-space:nowrap}
.sv-more:hover{border-color:var(--orange2);color:var(--orange)}

/* ── 사진 ─────────────────────────────────────────── */
.sv-ups{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.sv-up{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--soft)}
.sv-up img{width:100%;height:100%;object-fit:cover;display:block}
.sv-x{position:absolute;right:8px;top:8px;width:26px;height:26px;border:0;border-radius:50%;
  background:rgba(35,27,22,.62);color:#fff;font-size:12px;cursor:pointer;line-height:1}
.sv-x:hover{background:#B3261E}
.sv-ups.view .sv-up{aspect-ratio:1}
.sv-add{display:grid;place-items:center;gap:5px;aspect-ratio:1;cursor:pointer;
  border:2px dashed var(--line2);border-radius:14px;transition:.2s;text-align:center}
.sv-add:hover,.sv-add.over{border-color:var(--orange);background:#FFF8F0}
html[data-theme="dark"] .sv-add:hover{background:#2A2038}
.sv-add i{font-style:normal;font-size:26px}
.sv-add b{font-size:13px}
.sv-add small{font-size:11.5px;color:var(--muted2)}
.sv-ok{margin-top:13px;font-size:13px;font-weight:700;color:#2B7A4B}

/* ── 캐릭터 ───────────────────────────────────────── */
.sv-wait{display:grid;place-items:center;gap:8px;padding:40px 20px;text-align:center;
  background:var(--soft);border-radius:16px}
.sv-wait i{font-style:normal;font-size:32px}
.sv-wait b{font-size:15.5px}
.sv-wait p{font-size:13px;color:var(--muted);line-height:1.8}
.sv-wait .btn-cta{margin-top:10px}
.sv-chars{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:13px}
.sv-char{display:block;cursor:pointer;text-align:center}
.sv-char input{position:absolute;opacity:0}
.sv-char-img{position:relative;display:block;aspect-ratio:1;border-radius:16px;
  overflow:hidden;border:3px solid transparent;transition:.2s;background:var(--soft)}
.sv-char-img img{width:100%;height:100%;object-fit:cover;display:block}
.sv-char input:checked+.sv-char-img{border-color:var(--orange)}
.sv-check{position:absolute;right:9px;top:9px;display:none;place-items:center;
  width:25px;height:25px;border-radius:50%;background:var(--orange);color:#fff;
  font-size:13px;font-style:normal;font-weight:700}
.sv-char input:checked+.sv-char-img .sv-check{display:grid}
.sv-char b{display:block;margin-top:9px;font-size:13.5px}
.sv-again{display:flex;align-items:center;gap:14px;margin-top:14px;
  background:#FFF8F0;border-radius:14px;padding:16px 18px}
html[data-theme="dark"] .sv-again{background:#2A2038}
.sv-again i{font-style:normal;font-size:24px;flex:none}
.sv-again b{display:block;font-size:14.5px}
.sv-again p{margin-top:3px;font-size:12.5px;color:var(--muted)}
.sv-again form{margin-left:auto;flex:none}

/* ── 함께 나올 사람 ───────────────────────────────── */
.sv-mates{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.sv-mate{display:grid;place-items:center;gap:5px;padding:22px 14px;cursor:pointer;
  border:1.5px solid var(--line2);border-radius:16px;text-align:center;transition:.2s}
.sv-mate:hover{border-color:var(--orange2)}
.sv-mate i{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:var(--orange-soft);font-style:normal;font-size:21px}
.sv-mate b{font-size:13.5px}
.sv-mate small{font-size:11px;color:var(--muted2)}
.sv-mate.has{cursor:default;padding:0;overflow:hidden;border-color:var(--line)}
.sv-mate.has img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.sv-mate.has b{padding:9px 0}

/* ── 두 칸 ────────────────────────────────────────── */
.sv-two{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
.sv-two .sv-nav{grid-column:1/-1}
.sv-side{display:flex;flex-direction:column;gap:13px}
.sv-box{background:var(--paper);border:1px solid var(--line);border-radius:18px;
  padding:18px;box-shadow:var(--sh)}
.sv-box.sticky{position:sticky;top:84px}
.sv-box-t{display:block;font-size:14px;font-weight:800;margin-bottom:12px}
.sv-box-img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:13px;display:block}
.sv-box-n{margin-top:10px;font-size:15px;font-weight:700}
.sv-box-a{display:inline-block;margin-top:7px;font-size:12px;color:var(--orange-d);
  background:var(--orange-soft);border-radius:999px;padding:5px 12px}
.sv-box-ch{display:flex;align-items:center;gap:11px}
.sv-box-ch img{width:66px;height:66px;object-fit:cover;border-radius:12px;flex:none}
.sv-box-q{margin-top:9px;background:var(--soft);border-radius:11px;padding:12px 14px;
  font-size:12.5px;line-height:1.8;color:var(--ink2)}
.sv-box-m{margin-top:12px;background:#FFF8F0;border-radius:11px;padding:13px;
  font-size:12.5px;line-height:1.8;text-align:center;color:var(--muted)}
html[data-theme="dark"] .sv-box-m{background:#2A2038}
.sv-sum{display:flex;flex-direction:column;gap:2px;margin-top:12px}
.sv-sum>div{display:flex;align-items:center;gap:9px;padding:11px 0;
  border-bottom:1px solid var(--line)}
.sv-sum>div:last-child{border-bottom:0}
.sv-sum i{font-style:normal;font-size:15px;flex:none;width:20px;text-align:center}
.sv-sum span{font-size:12.5px;color:var(--muted)}
.sv-sum b{margin-left:auto;font-size:13px;text-align:right}
.sv-sum .tot b{font-size:16px;color:var(--orange-d)}

/* ── 사연 ─────────────────────────────────────────── */
.sv-ta{position:relative}
.sv-ta textarea{width:100%;border:1.5px solid var(--line2);border-radius:14px;
  padding:18px 20px 34px;font-size:14.5px;line-height:1.95;background:var(--soft);
  resize:vertical;font-family:inherit}
.sv-ta textarea:focus{outline:none;border-color:var(--orange2);background:var(--paper)}
.sv-cnt{position:absolute;right:16px;bottom:12px;font-size:12px;color:var(--muted2)}
.sv-sub{display:block;margin:22px 0 12px;font-size:14.5px;font-weight:800}
.sv-sub em{font-style:normal;font-size:12.5px;font-weight:400;color:var(--muted2)}
.sv-asks{display:grid;grid-template-columns:repeat(auto-fit,minmax(216px,1fr));gap:10px}
.sv-ask{display:flex;flex-direction:column;gap:7px;border:1px solid var(--line2);
  border-radius:13px;padding:14px 16px;cursor:text;transition:.2s}
.sv-ask:focus-within{border-color:var(--orange2)}
.sv-ask>i{font-style:normal;font-size:17px}
.sv-ask span{display:block}
.sv-ask b{display:block;font-size:13px}
.sv-ask small{display:block;margin-top:2px;font-size:11px;color:var(--muted2)}
.sv-ask input{margin-top:4px;width:100%;border:0;border-bottom:1px solid var(--line2);
  background:transparent;padding:6px 0;font-size:13px;font-family:inherit}
.sv-ask input:focus{outline:none;border-bottom-color:var(--orange)}
.sv-tip{margin-top:20px;background:#FFF8F0;border-radius:16px;padding:20px 22px}
html[data-theme="dark"] .sv-tip{background:#2A2038}
.sv-tip>b{display:block;font-size:14.5px;margin-bottom:11px}
.sv-tip ul{display:flex;flex-direction:column;gap:7px;margin:0;padding:0;list-style:none}
.sv-tip li{position:relative;padding-left:20px;font-size:13px;line-height:1.8;color:var(--ink2)}
.sv-tip li::before{content:'✓';position:absolute;left:0;color:var(--orange);font-weight:800}

/* ── 고르기 ───────────────────────────────────────── */
.sv-picks{display:grid;gap:11px}
.sv-picks.c5{grid-template-columns:repeat(auto-fit,minmax(148px,1fr))}
.sv-picks.c3{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.sv-pick{position:relative;display:block;cursor:pointer;border:2px solid var(--line2);
  border-radius:16px;padding:12px;text-align:center;transition:.2s}
.sv-pick:hover{border-color:var(--orange2)}
.sv-pick.on{border-color:var(--orange);background:#FFF8F0}
html[data-theme="dark"] .sv-pick.on{background:#2A2038}
.sv-pick input{position:absolute;opacity:0}
.sv-pick-img{position:relative;display:block;aspect-ratio:1;border-radius:11px;
  overflow:hidden;background:var(--soft);margin-bottom:9px}
.sv-pick-img img{width:100%;height:100%;object-fit:cover;display:block}
.sv-pick-img.no{display:grid;place-items:center}
.sv-pick-img.no::after{content:'🎨';font-size:26px}
.sv-pick>.sv-check,.sv-pick-img .sv-check{position:absolute;right:9px;top:9px;display:none}
.sv-pick.on>.sv-check,.sv-pick.on .sv-pick-img .sv-check{display:grid}
.sv-pick b{display:block;font-size:13.5px}
.sv-pick u{display:block;margin-top:2px;text-decoration:none;font-size:12px;color:var(--muted)}
.sv-pick small{display:block;margin-top:4px;font-size:11.5px;line-height:1.65;color:var(--muted2)}
.sv-pick.sm{padding:18px 12px}
.sv-bic{display:grid;place-items:center;width:44px;height:44px;margin:0 auto 9px;
  border-radius:50%;background:var(--orange-soft);font-style:normal;font-size:19px}
.sv-pick.len{padding:20px 16px}
.sv-pick.len b{font-size:17px}
.sv-tk{display:inline-block;margin-top:9px;background:var(--orange-soft);
  color:var(--orange-d);border-radius:999px;padding:4px 12px;font-size:12px;font-weight:700}

/* ── 종류 고르기 ──────────────────────────────────── */
.sv-kinds{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:13px}
.sv-kinds.big{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.sv-kind{position:relative;display:block;width:100%;text-align:left;background:var(--paper);
  border:1px solid var(--line);border-radius:18px;padding:0 0 18px;overflow:hidden;
  box-shadow:var(--sh);transition:.2s}
.sv-kind:hover{transform:translateY(-4px);box-shadow:var(--sh-card);border-color:var(--orange2)}
.sv-kind.on{border-color:var(--orange)}
.sv-kind-img{position:relative;display:block;aspect-ratio:4/3;background:var(--soft)}
.sv-kind-img img{width:100%;height:100%;object-fit:cover;display:block}
.sv-kind-img em{position:absolute;left:13px;bottom:-14px;display:grid;place-items:center;
  width:38px;height:38px;border-radius:50%;background:var(--paper);
  box-shadow:0 3px 10px rgba(0,0,0,.12);font-style:normal;font-size:18px}
.sv-kind-img.no{display:grid;place-items:center}
.sv-kind-img.no img{display:none}
.sv-kind-img.no em{position:static;width:54px;height:54px;font-size:26px;box-shadow:none;
  background:var(--orange-soft)}
.sv-kind b{display:block;margin:22px 18px 0;font-size:15.5px}
.sv-kind small{display:block;margin:5px 18px 0;font-size:12.5px;line-height:1.7;color:var(--muted)}
.sv-kind u{position:absolute;right:16px;bottom:14px;display:grid;place-items:center;
  width:28px;height:28px;border-radius:50%;background:var(--orange-soft);
  color:var(--orange-d);text-decoration:none;font-size:13px}

/* ── 결과 ─────────────────────────────────────────── */
.sv-res{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start;
  margin-bottom:16px}
.sv-video{width:100%;aspect-ratio:16/10;border-radius:18px;background:#1A1512;display:block}
.sv-noneyet{display:grid;place-items:center;color:#fff;text-align:center}
.sv-noneyet b{font-size:16px}
.sv-noneyet p{margin-top:6px;font-size:13px;opacity:.7}
.sv-res-h{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.sv-res-h i{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  background:var(--orange-soft);font-style:normal;font-size:19px}
.sv-res-h b{display:block;font-size:16px}
.sv-res-h small{font-size:12px;color:var(--muted2)}
.sv-res-d{font-size:13.5px;line-height:1.9;color:var(--ink2)}
.sv-acts{display:flex;gap:11px;margin-bottom:18px;flex-wrap:wrap}
.sv-acts>*{flex:1;min-width:160px;text-align:center}
.sv-praise{display:flex;align-items:center;gap:16px;position:relative;
  background:#FFF8F0;border-radius:18px;padding:22px 26px;margin-bottom:18px}
html[data-theme="dark"] .sv-praise{background:#2A2038}
.sv-praise>i{display:grid;place-items:center;width:52px;height:52px;flex:none;
  border-radius:50%;background:var(--paper);font-style:normal;font-size:24px}
.sv-praise b{display:block;font-size:15.5px}
.sv-praise p{margin-top:6px;font-size:13px;line-height:1.85;color:var(--muted)}
.sv-praise .sv-memo{position:static;margin-left:auto}
.sv-last{display:flex;align-items:center;gap:22px;background:#FFF8F0;border-radius:20px;
  padding:32px 36px;margin-top:22px;flex-wrap:wrap}
html[data-theme="dark"] .sv-last{background:#2A2038}
.sv-quote{font-size:19px;line-height:1.75;letter-spacing:-.02em}
.sv-quote b{color:var(--orange)}
.sv-last small{display:block;margin-top:9px;font-size:13px;color:var(--muted)}
.sv-last form{margin-left:auto}

/* ── 아래 단추 ────────────────────────────────────── */
.sv-nav{display:flex;gap:13px;justify-content:center;margin-top:24px;align-items:center}
.sv-nav .btn-ghost.lg{min-width:170px;text-align:center}
.sv-nav .btn-cta.lg{min-width:250px}

@media(max-width:940px){
  .sv-two,.sv-res{grid-template-columns:1fr}
  .sv-box.sticky{position:static}
}
@media(max-width:640px){
  .sv-steps li em{font-size:10.5px}
  .sv-steps li b{width:32px;height:32px;font-size:13px}
  .sv-line{left:calc(-50% + 16px);right:calc(50% + 16px);top:16px}
  .sv-card{padding:20px 18px}
  .sv-nav{flex-direction:column}
  .sv-nav>*{width:100%}
  .sv-last form{margin-left:0;width:100%}
  .sv-last .btn-cta{width:100%}
}
.pv-flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;
  margin-bottom:18px}
.pv-node{text-align:center;padding:16px 10px;border-radius:14px;background:var(--soft)}
.pv-node i{display:grid;place-items:center;width:34px;height:34px;margin:0 auto 8px;
  border-radius:50%;background:var(--paper);color:var(--muted2);font-style:normal;font-size:14px}
.pv-node b{display:block;font-size:13px}
.pv-node small{display:block;margin-top:3px;font-size:11px;color:var(--muted2)}
.pv-node.done i{background:#DFF3E6;color:#2B7A4B}
.pv-node.doing{background:#FFF8F0}
.pv-node.doing i{background:var(--orange);color:#fff;animation:bzspin 1.4s linear infinite}
html[data-theme="dark"] .pv-node.doing{background:#2A2038}
.pv-pct{margin-top:11px;text-align:center;font-size:13.5px;color:var(--muted)}
.pv-pct b{font-size:20px;color:var(--orange-d)}

/* ── 휴대폰 서랍 메뉴 ─────────────────────────────────── */
.hd-burger{display:none;flex-direction:column;gap:4px;width:40px;height:40px;
  align-items:center;justify-content:center;border:1.5px solid var(--line2);
  border-radius:12px;background:transparent;cursor:pointer;flex:none}
.hd-burger span{display:block;width:17px;height:2px;background:var(--ink2);border-radius:2px}
.mdrawer{position:fixed;inset:0;z-index:9500}
.mdrawer-bg{position:absolute;inset:0;background:rgba(35,27,22,.45);opacity:0;transition:.22s}
.mdrawer.on .mdrawer-bg{opacity:1}
.mdrawer-in{position:absolute;right:0;top:0;bottom:0;width:min(86vw,340px);
  background:var(--paper);overflow-y:auto;transform:translateX(100%);transition:.22s ease;
  box-shadow:-6px 0 30px rgba(0,0,0,.16);display:flex;flex-direction:column}
.mdrawer.on .mdrawer-in{transform:translateX(0)}
.mdrawer-top{display:flex;align-items:center;padding:18px 20px;border-bottom:1px solid var(--line)}
.mdrawer-x{margin-left:auto;width:34px;height:34px;border:0;background:var(--soft);
  border-radius:50%;font-size:14px;cursor:pointer;color:var(--ink2)}
.mdrawer-age{display:flex;gap:6px;margin:14px 20px 4px;background:var(--soft);
  border-radius:999px;padding:4px}
.mdrawer-age a{flex:1;text-align:center;padding:8px;border-radius:999px;
  font-size:13px;font-weight:700;color:var(--muted)}
.mdrawer-age a.on{background:var(--paper);color:var(--orange)}
.mdrawer-grp{padding:14px 20px 4px;border-bottom:1px solid var(--line)}
.mdrawer-top-a{display:block;font-size:15.5px;font-weight:800;margin-bottom:8px}
.mdrawer-sub{display:block;padding:8px 0 8px 12px;font-size:13.5px;color:var(--muted)}
.mdrawer-sub:active{color:var(--orange)}
.mdrawer-btm{display:flex;flex-wrap:wrap;gap:8px;padding:16px 20px}
.mdrawer-btm a{background:var(--soft);border-radius:999px;padding:9px 16px;
  font-size:13px;color:var(--ink2)}

@media(max-width:920px){
  .hd-burger{display:flex}
  .hd-nav{display:none}
  .hd-act .lg,.hd-act .btn-ghost,.hd-act .hd-me,.hd-act .theme-btn,.hd-cross{display:none}
  .hd-act .btn-cta{padding:9px 15px;font-size:13.5px}
  .hd-in{gap:10px}
}
@media(max-width:560px){
  .hd-act .btn-cta{display:none}
  .age-tab{display:none}
}

/* ── 가로 넘침 막기 ───────────────────────────────────── */
html,body{max-width:100%;overflow-x:hidden}
/* .shell 은 여기서 건드리지 않습니다 — max-width:var(--shell) 을 덮어써서
   모든 화면이 가로로 100% 늘어났습니다 (kids112 에서 제거) */
.shell{width:100%}
img,video,iframe,table{max-width:100%}
pre,code{white-space:pre-wrap;word-break:break-word}
.hd-in{flex-wrap:nowrap}
.og-parts{color:var(--orange-d);font-weight:700}
.og-cover{display:block}

/* ── 히어로 (랜딩·요금제·고객센터·마이페이지) ─────────── */
.sv-hero{position:relative;border-radius:24px;overflow:hidden;margin-bottom:30px;
  background:linear-gradient(120deg,#FFF3E6,#FFE8D6)}
html[data-theme="dark"] .sv-hero{background:#2A2038}
.sv-hero-img{position:absolute;right:0;top:0;height:100%;width:58%;object-fit:cover;
  object-position:center top}
.sv-hero-in{position:relative;z-index:2;padding:52px 44px;max-width:56%}
.sv-hero-in.right{margin-left:auto;text-align:right}
.sv-hero.has-img .sv-hero-in{background:linear-gradient(90deg,
  rgba(255,243,230,.96) 55%, rgba(255,243,230,0))}
html[data-theme="dark"] .sv-hero.has-img .sv-hero-in{background:linear-gradient(90deg,
  rgba(42,32,56,.96) 55%, rgba(42,32,56,0))}
.sv-hero-tag{display:block;font-size:12.5px;font-weight:800;letter-spacing:.2em;
  color:var(--orange2);margin-bottom:10px}
.sv-hero h1{font-size:clamp(26px,3.8vw,40px);line-height:1.3;letter-spacing:-.035em}
.sv-hero h1 em{display:block;font-style:normal;color:var(--orange)}
.sv-hero>.sv-hero-in>p{margin-top:14px;font-size:15px;line-height:1.9;color:var(--muted)}
.sv-chips{display:flex;gap:18px;margin-top:22px;flex-wrap:wrap}
.sv-chips span{display:flex;align-items:center;gap:9px}
.sv-chips i{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:var(--paper);font-style:normal;font-size:15px}
.sv-chips b{display:block;font-size:13px}
.sv-chips small{display:block;font-size:11.5px;color:var(--muted2)}
.sv-memo.hero{right:auto;left:0;top:-4px;position:absolute}
@media(max-width:860px){
  .sv-hero-img{width:100%;opacity:.22}
  .sv-hero-in,.sv-hero-in.right{max-width:100%;padding:34px 24px;text-align:left;background:none}
  .sv-hero.has-img .sv-hero-in{background:none}
}

/* ── 이야기 찾기 (줄 카드) ────────────────────────────── */
.sv-rows{display:flex;flex-direction:column;gap:12px}
.sv-row{display:grid;grid-template-columns:220px 64px minmax(0,1fr) 44px;gap:18px;
  align-items:center;width:100%;text-align:left;background:var(--paper);
  border:1px solid var(--line);border-radius:20px;padding:16px;box-shadow:var(--sh);
  transition:.2s}
.sv-row:hover{transform:translateY(-2px);box-shadow:var(--sh-card);border-color:var(--orange2)}
.sv-row-img{display:block;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:var(--soft)}
.sv-row-img img{width:100%;height:100%;object-fit:cover;display:block}
.sv-row-img.no{display:grid;place-items:center}
.sv-row-img.no img{display:none}
.sv-row-ic{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;
  background:var(--orange-soft);font-size:24px}
.sv-row-tx b{display:block;font-size:18px;letter-spacing:-.02em}
.sv-row-tx small{display:block;margin-top:5px;font-size:13.5px;line-height:1.75;color:var(--muted)}
.sv-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:11px}
.sv-tags em{font-style:normal;background:var(--soft);border-radius:999px;padding:4px 11px;
  font-size:11.5px;color:var(--ink2)}
.sv-row-go{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--orange-soft);color:var(--orange-d);font-size:17px}
@media(max-width:760px){
  .sv-row{grid-template-columns:1fr;gap:12px}
  .sv-row-ic{width:44px;height:44px;font-size:20px}
  .sv-row-go{display:none}
}

/* ── STEP 1 그리드 6칸 ────────────────────────────────── */
.sv-grid6{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.sv-g{display:block;cursor:pointer;background:var(--paper);border:2px solid var(--line);
  border-radius:20px;padding:0 0 20px;overflow:hidden;box-shadow:var(--sh);transition:.2s}
.sv-g:hover{border-color:var(--orange2)}
.sv-g.on{border-color:var(--orange)}
.sv-g input{position:absolute;opacity:0}
.sv-g-img{display:block;aspect-ratio:16/10;background:var(--soft)}
.sv-g-img img{width:100%;height:100%;object-fit:cover;display:block}
.sv-g-img.no{display:grid;place-items:center}
.sv-g-img.no img{display:none}
.sv-g-row{display:flex;align-items:center;margin:-22px 20px 0;position:relative;z-index:2}
.sv-g-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;
  background:var(--paper);box-shadow:0 3px 10px rgba(0,0,0,.1);font-style:normal;font-size:21px}
.sv-g-dot{margin-left:auto;width:22px;height:22px;border-radius:50%;
  border:2px solid var(--line2);background:var(--paper)}
.sv-g.on .sv-g-dot{border-color:var(--orange);background:var(--orange);
  box-shadow:inset 0 0 0 3px var(--paper)}
.sv-g b{display:block;margin:16px 20px 0;font-size:17px}
.sv-g small{display:block;margin:6px 20px 0;font-size:13px;line-height:1.75;color:var(--muted)}
.sv-quote-box{display:flex;align-items:center;gap:24px;background:#FFF8F0;border-radius:20px;
  padding:30px 34px;margin-top:20px}
html[data-theme="dark"] .sv-quote-box{background:#2A2038}

/* ── 상세 ─────────────────────────────────────────────── */
.sv-bread{font-size:13px;color:var(--muted2);margin-bottom:16px}
.sv-bread a{color:var(--muted)}
.sv-bread a:hover{color:var(--orange)}
.sv-shots{display:flex;gap:9px;margin-top:12px;overflow-x:auto;padding-bottom:4px}
.sv-shot{flex:0 0 130px;aspect-ratio:16/10;border-radius:11px;overflow:hidden;
  border:2px solid transparent;background:var(--soft)}
.sv-shot.on{border-color:var(--orange)}
.sv-shot img{width:100%;height:100%;object-fit:cover;display:block}
.sv-kchip{background:var(--orange-soft);color:var(--orange-d);border-radius:999px;
  padding:5px 13px;font-size:12.5px;font-weight:700}
.sv-det-t{margin-top:12px;font-size:23px;line-height:1.4;letter-spacing:-.03em}
.sv-stars{margin-top:9px;color:#F5A623;font-size:15px;letter-spacing:2px}
.sv-feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.sv-feats.c5{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.sv-feat{background:var(--paper);border:1px solid var(--line);border-radius:16px;
  padding:20px 18px;text-align:center}
.sv-feat i{display:grid;place-items:center;width:48px;height:48px;margin:0 auto 11px;
  border-radius:16px;background:var(--orange-soft);font-style:normal;font-size:21px}
.sv-feat b{display:block;font-size:14.5px}
.sv-feat small{display:block;margin-top:6px;font-size:12.5px;line-height:1.75;color:var(--muted)}
.sv-feat .btn-ghost{margin-top:12px}
.sv-mores{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.sv-more-c{display:block}
.sv-more-c span{display:block;aspect-ratio:16/10;border-radius:13px;overflow:hidden;
  background:var(--soft)}
.sv-more-c span.no img{display:none}
.sv-more-c img{width:100%;height:100%;object-fit:cover;display:block}
.sv-more-c b{display:block;margin-top:9px;font-size:13.5px}
.sv-more-c em{display:inline-block;margin-top:5px;font-style:normal;background:var(--soft);
  border-radius:999px;padding:3px 10px;font-size:11px;color:var(--muted)}

/* ── 아래 큰 부르기 ───────────────────────────────────── */
.sv-bottom{display:flex;align-items:center;gap:24px;background:#FFF8F0;border-radius:22px;
  padding:34px 38px;margin-top:26px;flex-wrap:wrap}
html[data-theme="dark"] .sv-bottom{background:#2A2038}
.sv-bottom.mid{justify-content:space-between}
.sv-bottom .btn-cta{margin-left:auto;flex:none}
.sv-bottom .sv-memo{position:static}

/* ── 요금제 ───────────────────────────────────────────── */
.sv-have{display:flex;align-items:center;gap:12px;background:var(--soft);border-radius:14px;
  padding:16px 20px;margin-bottom:16px;font-size:14px}
.sv-have b{font-size:24px;font-weight:800;color:var(--orange-d)}
.sv-have small{color:var(--muted2)}
.sv-packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.sv-pack{position:relative;background:var(--paper);border:1.5px solid var(--line);
  border-radius:18px;padding:24px 16px;text-align:center;transition:.2s}
.sv-pack:hover{border-color:var(--orange2)}
.sv-pack.best{border:2px solid var(--orange);box-shadow:var(--sh-card)}
.sv-best{position:absolute;right:-1px;top:-1px;background:var(--orange);color:#fff;
  border-radius:0 17px 0 12px;padding:5px 13px;font-size:11px;font-weight:800}
.sv-coin{display:block;font-style:normal;font-size:26px;margin-bottom:10px}
.sv-pack b{display:block;font-size:18px}
.sv-pack u{display:block;margin-top:7px;text-decoration:none;font-size:21px;font-weight:800;
  color:var(--orange-d)}
.sv-pack small{display:block;margin-top:3px;font-size:11.5px;color:var(--muted2)}
.sv-bonus{display:inline-block;margin-top:9px;font-style:normal;background:var(--orange-soft);
  color:var(--orange-d);border-radius:999px;padding:4px 12px;font-size:12px;font-weight:700}
.sv-pack-n{display:block;margin:11px 0 12px;font-size:12px;color:var(--muted)}
.sv-pack .btn-cta,.sv-pack .btn-ghost{width:100%}
.sv-what{display:flex;align-items:center;gap:16px;background:#FFF8F0;border-radius:18px;
  padding:22px 26px;margin-top:18px}
html[data-theme="dark"] .sv-what{background:#2A2038}
.sv-what>i{display:grid;place-items:center;width:52px;height:52px;flex:none;border-radius:50%;
  background:var(--paper);font-style:normal;font-size:24px}
.sv-what b{display:block;font-size:15.5px}
.sv-what p{margin-top:6px;font-size:13px;line-height:1.85;color:var(--muted)}
.sv-what .sv-memo{position:static;margin-left:auto}
.sv-h2{display:flex;align-items:center;gap:10px;margin:30px 0 13px;font-size:17px;font-weight:800}
.sv-h2>i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:var(--orange);color:#fff;font-style:normal;font-size:13px}
.sv-h2s{margin-left:auto;font-size:12.5px;font-weight:400;color:var(--muted2)}
.sv-h2b{margin:0 0 18px;font-size:19px;font-weight:800}
.sv-h2b b{color:var(--orange)}
.sv-uses{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.sv-use{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:16px}
.sv-use b{display:block;font-size:13.5px}
.sv-use b em{font-style:normal;font-size:11.5px;color:var(--muted2)}
.sv-use small{display:block;margin-top:5px;font-size:12px;color:var(--muted)}
.sv-use span{display:block;margin-top:7px;font-size:15px;font-weight:800;color:var(--orange-d)}
.sv-pays{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.sv-pay{background:var(--paper);border:1px solid var(--line2);border-radius:13px;
  padding:16px;text-align:center}
.sv-pay.off{opacity:.45}
.sv-pay b{display:block;font-size:13.5px}
.sv-pay small{display:block;margin-top:3px;font-size:11.5px;color:var(--muted2)}
.sv-faq2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.sv-faq2.num{grid-template-columns:1fr}
.sv-faq2 details{background:var(--paper);border:1px solid var(--line);border-radius:13px;
  padding:15px 18px}
.sv-faq2 summary{cursor:pointer;font-size:13.5px;font-weight:600;list-style:none;
  display:flex;align-items:center;gap:11px}
.sv-faq2 summary::-webkit-details-marker{display:none}
.sv-faq2 summary::after{content:'⌄';margin-left:auto;color:var(--muted2);transition:.2s}
.sv-faq2 details[open] summary::after{transform:rotate(180deg)}
.sv-faq2 summary em{display:grid;place-items:center;width:26px;height:26px;flex:none;
  border-radius:50%;background:var(--orange-soft);color:var(--orange-d);
  font-style:normal;font-size:11.5px;font-weight:800}
.sv-faq2 p{margin-top:11px;padding-left:37px;font-size:13px;line-height:1.9;color:var(--muted)}
.sv-faq2.num p{padding-left:37px}
@media(max-width:760px){ .sv-faq2{grid-template-columns:1fr} }

/* ── 마이페이지 ───────────────────────────────────────── */
.sv-my{display:grid;grid-template-columns:216px minmax(0,1fr);gap:18px;align-items:start}
.sv-mynav{background:var(--paper);border:1px solid var(--line);border-radius:18px;
  padding:12px;box-shadow:var(--sh);position:sticky;top:84px}
.sv-mynav a{display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:12px;
  font-size:13.5px;color:var(--ink2)}
.sv-mynav a.on{background:var(--orange);color:#fff;font-weight:700}
.sv-mynav a:hover:not(.on){background:var(--soft)}
.sv-mynav i{font-style:normal;font-size:15px}
.sv-mynav hr{border:0;border-top:1px solid var(--line);margin:8px 12px}
.sv-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;
  margin-bottom:16px}
.sv-stats>div{background:var(--paper);border:1px solid var(--line);border-radius:16px;
  padding:20px;box-shadow:var(--sh)}
.sv-stats i{display:grid;place-items:center;width:42px;height:42px;margin-bottom:12px;
  border-radius:50%;background:var(--orange-soft);font-style:normal;font-size:18px}
.sv-stats span{display:block;font-size:12.5px;color:var(--muted)}
.sv-stats b{display:block;margin-top:5px;font-size:25px;font-weight:800}
.sv-stats b.sm{font-size:19px}
.sv-stats b em{font-style:normal;font-size:14px;font-weight:400;color:var(--muted)}
.sv-stats .btn-cta{margin-top:10px;width:100%}
.sv-search input{border:1px solid var(--line2);border-radius:999px;padding:9px 16px;
  font-size:13px;min-width:220px;background:var(--soft)}
.sv-filters{display:flex;gap:7px;flex-wrap:wrap;padding:0 2px 16px}
.sv-filters a{background:var(--soft);border-radius:999px;padding:8px 15px;font-size:12.5px;
  color:var(--ink2)}
.sv-filters a.on{background:var(--orange);color:#fff;font-weight:700}
.sv-works{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.sv-work{display:block}
.sv-work-img{position:relative;display:block;aspect-ratio:16/10;border-radius:14px;
  overflow:hidden;background:var(--soft)}
.sv-work-img img{width:100%;height:100%;object-fit:cover;display:block}
.sv-work-no{display:grid;place-items:center;height:100%;font-style:normal;font-size:12px;
  color:var(--muted2)}
.sv-work-img u{position:absolute;right:8px;bottom:8px;background:rgba(35,27,22,.72);
  color:#fff;border-radius:6px;padding:2px 8px;font-size:11.5px;text-decoration:none}
.sv-work-st{position:absolute;left:8px;top:8px;background:var(--orange);color:#fff;
  border-radius:999px;padding:3px 10px;font-size:11px}
.sv-work>b{display:block;margin-top:10px;font-size:14px}
.sv-work>small{display:block;margin-top:3px;font-size:11.5px;color:var(--muted2)}
.sv-pages{display:flex;gap:6px;justify-content:center;margin-top:20px}
.sv-pages a{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:var(--soft);font-size:13px}
.sv-pages a.on{background:var(--orange);color:#fff;font-weight:700}
@media(max-width:820px){
  .sv-my{grid-template-columns:1fr}
  .sv-mynav{position:static;display:flex;gap:4px;overflow-x:auto}
  .sv-mynav a{white-space:nowrap}
  .sv-mynav hr{display:none}
}

/* ── 고객센터 ─────────────────────────────────────────── */
.sv-fsearch{display:flex;gap:9px;margin-bottom:11px}
.sv-fsearch input{flex:1;border:1.5px solid var(--line2);border-radius:999px;
  padding:14px 22px;font-size:14px;background:var(--paper)}
.sv-fsearch input:focus{outline:none;border-color:var(--orange2)}
.sv-fsearch .btn-cta{padding:14px 30px}
.sv-keys{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:24px;
  font-size:12.5px;color:var(--muted2)}
.sv-keys a{background:var(--soft);border-radius:999px;padding:5px 12px;color:var(--ink2)}
.sv-cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:9px;
  margin-bottom:26px}
.sv-cats a{background:var(--paper);border:1.5px solid var(--line);border-radius:16px;
  padding:18px 10px;text-align:center;transition:.2s}
.sv-cats a.on{border-color:var(--orange);background:#FFF8F0}
html[data-theme="dark"] .sv-cats a.on{background:#2A2038}
.sv-cats i{display:grid;place-items:center;width:44px;height:44px;margin:0 auto 9px;
  border-radius:50%;background:var(--orange-soft);font-style:normal;font-size:19px}
.sv-cats b{display:block;font-size:13px}
.sv-cats small{display:block;margin-top:2px;font-size:11.5px;color:var(--muted2)}
.sv-cc{background:#FFF8F0;border-radius:14px;padding:20px;text-align:center;margin-bottom:12px}
html[data-theme="dark"] .sv-cc{background:#2A2038}
.sv-cc b{display:block;font-size:16px}
.sv-cc p{margin-top:7px;font-size:13px;color:var(--muted)}
.sv-cc-row{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:13px;
  background:var(--soft);margin-bottom:8px}
.sv-cc-row i{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:50%;
  font-style:normal;font-size:17px;color:#fff}
.sv-cc-row.g i{background:#3AA76D} .sv-cc-row.p i{background:#7C6BD4}
.sv-cc-row.r i{background:#E0574F}
.sv-cc-row b{display:block;font-size:13.5px}
.sv-cc-row small{display:block;margin-top:2px;font-size:11.5px;color:var(--muted2)}
.sv-cc-row u{margin-left:auto;text-decoration:none;color:var(--muted2)}
.sv-cc-note{margin-top:12px;font-size:11.5px;line-height:1.8;color:var(--muted2)}

/* ── 로그인·회원가입 ──────────────────────────────────── */
.sv-auth{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sv-acard{background:var(--paper);border:1px solid var(--line);border-radius:22px;
  padding:30px 32px;box-shadow:var(--sh-card)}
.sv-ah{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.sv-ah i{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;
  font-style:normal;font-size:22px}
.sv-ah i.lock{background:#FFE9D9} .sv-ah i.user{background:#FFE3D0}
.sv-ah b{display:block;font-size:21px}
.sv-ah small{display:block;margin-top:3px;font-size:12.5px;color:var(--muted)}
.sv-in{display:flex;align-items:center;gap:11px;border:1.5px solid var(--line2);
  border-radius:13px;padding:14px 16px;margin-bottom:10px;background:var(--soft)}
.sv-in:focus-within{border-color:var(--orange2);background:var(--paper)}
.sv-in i{font-style:normal;font-size:15px;flex:none;opacity:.55}
.sv-in input{flex:1;border:0;background:transparent;font-size:14px;font-family:inherit}
.sv-in input:focus{outline:none}
.sv-arow{display:flex;align-items:center;margin:4px 0 16px;font-size:13px}
.sv-arow a{margin-left:auto;color:var(--muted)}
.sv-chk2{display:flex;align-items:center;gap:7px;cursor:pointer;color:var(--ink2)}
.sv-chk2 input{width:17px;height:17px;accent-color:var(--orange)}
.sv-or{display:flex;align-items:center;gap:12px;margin:22px 0 14px;font-size:12.5px;
  color:var(--muted2)}
.sv-or::before,.sv-or::after{content:'';flex:1;height:1px;background:var(--line)}
.sv-socials{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.sv-social{display:grid;place-items:center;padding:16px 6px;border:1.5px solid var(--line2);
  border-radius:13px;font-size:12.5px;font-weight:600;color:var(--ink2)}
.sv-social:hover{border-color:var(--orange2)}
.sv-social.off{opacity:.4;pointer-events:none}
.sv-join-box{margin-top:22px;background:#FFF8F0;border-radius:16px;padding:22px;text-align:center}
html[data-theme="dark"] .sv-join-box{background:#2A2038}
.sv-join-box b{display:block;font-size:14.5px}
.sv-join-box small{display:block;margin-top:5px;font-size:12.5px;color:var(--muted)}
.sv-join-box .btn-ghost{margin-top:14px}
.sv-agree{display:flex;align-items:center;gap:9px;margin-bottom:9px;font-size:12.5px;
  cursor:pointer}
.sv-agree input{width:17px;height:17px;accent-color:var(--orange);flex:none}
.sv-agree em{font-style:normal;color:var(--muted2)}
.sv-agree a{margin-left:auto;font-size:11.5px;color:var(--muted);text-decoration:underline}
@media(max-width:820px){ .sv-auth{grid-template-columns:1fr} }

/* ── 제작 중 ──────────────────────────────────────────── */
.sv-mk{display:grid;grid-template-columns:300px minmax(0,1fr);gap:18px;align-items:start;
  background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:26px;
  box-shadow:var(--sh)}
.sv-mk-steps{list-style:none;margin:0;padding:0;position:relative}
.sv-mk-steps::before{content:'';position:absolute;left:15px;top:20px;bottom:20px;width:2px;
  background:var(--line2)}
.sv-mk-steps li{position:relative;display:flex;align-items:center;gap:13px;padding:13px 0}
.sv-mk-dot{position:relative;z-index:2;display:grid;place-items:center;width:32px;height:32px;
  flex:none;border-radius:50%;background:var(--line2);color:#fff;font-size:13px}
.sv-mk-steps li.done .sv-mk-dot{background:var(--orange)}
.sv-mk-steps li.doing .sv-mk-dot{background:var(--paper);border:2px solid var(--orange);
  color:var(--orange);animation:bzspin 1.6s linear infinite}
.sv-mk-ic{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:13px;
  background:var(--soft);font-size:17px}
.sv-mk-steps li.doing .sv-mk-ic{background:var(--orange-soft)}
.sv-mk-tx b{display:block;font-size:14px}
.sv-mk-tx small{display:block;margin-top:2px;font-size:12px;color:var(--muted2)}
.sv-mk-img{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;
  background:var(--soft)}
.sv-mk-img img{width:100%;height:100%;object-fit:cover;display:block}
.sv-mk-img.wait{display:grid;place-items:center;color:var(--muted2);font-size:13px}
.sv-mk-img .sv-memo{position:absolute;right:16px;top:20px;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.sv-mk-bar{position:relative;height:12px;border-radius:999px;background:var(--soft);
  margin-top:16px;overflow:visible}
.sv-mk-bar i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,#FF8A3D,#FD6A1F);transition:width .5s}
.sv-mk-bar b{position:absolute;right:0;top:-26px;font-size:18px;font-weight:800;
  color:var(--orange-d)}
.sv-mk-now{margin-top:14px;text-align:center;font-size:14.5px;font-weight:700}
.sv-mk-eta{display:block;margin-top:4px;text-align:center;font-size:12.5px;color:var(--muted2)}
.sv-mk-say{display:flex;align-items:center;gap:14px;margin-top:18px;background:#FFF8F0;
  border-radius:14px;padding:18px 20px}
html[data-theme="dark"] .sv-mk-say{background:#2A2038}
.sv-mk-say i{display:grid;place-items:center;width:46px;height:46px;flex:none;border-radius:50%;
  background:var(--paper);font-style:normal;font-size:21px}
.sv-mk-say b{display:block;font-size:14.5px}
.sv-mk-say p{margin-top:5px;font-size:12.5px;color:var(--muted)}
.sv-mk-note{margin-top:18px;text-align:center;font-size:13px;color:var(--muted)}
@media(max-width:820px){ .sv-mk{grid-template-columns:1fr} }

/* ── 그림이 아직 없을 때 (뽑기 전) ────────────────────── */
.sv-row-img.no,.sv-g-img.no,.sv-more-c span.no,.sv-pick-img.no,.sv-kind-img.no{
  background:linear-gradient(135deg,#FFE8D6,#FFF3E6)}
html[data-theme="dark"] .sv-row-img.no,html[data-theme="dark"] .sv-g-img.no,
html[data-theme="dark"] .sv-more-c span.no,html[data-theme="dark"] .sv-pick-img.no{
  background:linear-gradient(135deg,#3A2E4A,#2A2038)}
.sv-row-img.no::after{content:'🎬';font-size:34px;display:grid;place-items:center;height:100%}
.sv-g-img.no::after{content:'🎬';font-size:34px;display:grid;place-items:center;height:100%}
.sv-more-c span.no::after{content:'🎬';font-size:26px;display:grid;place-items:center;height:100%}
.sv-hero:not(.has-img) .sv-hero-in{max-width:100%}
.sv-work-img:empty::after{content:'🎬';font-size:26px}

/* ══ 뜬다스토리 랜딩 ══════════════════════════════════ */
.lp-hero{position:relative;min-height:520px;display:flex;align-items:center;
  background:linear-gradient(120deg,#FFF3E6,#FFE8D6);overflow:hidden}
html[data-theme="dark"] .lp-hero{background:#2A2038}
.lp-hero-bg{position:absolute;right:0;top:0;height:100%;width:60%;object-fit:cover}
.lp-hero-in{position:relative;z-index:2;padding:60px 0}
.lp-hero-in::before{content:'';position:absolute;inset:-60px -40px;z-index:-1;
  background:linear-gradient(90deg,rgba(255,243,230,.97) 52%,rgba(255,243,230,0))}
html[data-theme="dark"] .lp-hero-in::before{
  background:linear-gradient(90deg,rgba(42,32,56,.97) 52%,rgba(42,32,56,0))}
.lp-hero h1{font-size:clamp(30px,4.6vw,50px);line-height:1.28;letter-spacing:-.04em;
  max-width:600px}
.lp-hero h1 em{font-style:normal;color:var(--orange)}
.lp-hero>.shell>p{margin-top:20px;font-size:15px;line-height:2;color:var(--muted)}
.lp-btns{display:flex;gap:11px;margin-top:26px;flex-wrap:wrap}
.lp-steps4{display:flex;gap:10px;margin-top:30px;flex-wrap:wrap}
.lp-steps4 span{display:flex;flex-direction:column;align-items:center;gap:7px;
  background:var(--paper);border-radius:14px;padding:15px 18px;min-width:104px;
  box-shadow:var(--sh)}
.lp-steps4 i{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:#2B2118;color:#fff;font-style:normal;font-size:15px}
.lp-steps4 b{font-size:12px;white-space:nowrap}
.lp-hero .sv-memo{right:8%;top:70px}

.lp-sec{padding:52px 0}
.lp-h{display:flex;align-items:flex-end;gap:16px;margin-bottom:22px}
.lp-h h2{font-size:clamp(21px,2.6vw,27px);letter-spacing:-.03em}
.lp-h p{margin-top:8px;font-size:14px;color:var(--muted)}
.lp-more{margin-left:auto;flex:none;font-size:13.5px;color:var(--ink2)}
.lp-more:hover{color:var(--orange)}

.lp-kinds{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.lp-kind{position:relative;display:block;background:var(--paper);border:1px solid var(--line);
  border-radius:18px;overflow:hidden;padding-bottom:44px;box-shadow:var(--sh);transition:.2s}
.lp-kind:hover{transform:translateY(-4px);box-shadow:var(--sh-card);border-color:var(--orange2)}
.lp-kind-img{display:block;aspect-ratio:4/3;background:var(--soft)}
.lp-kind-img img{width:100%;height:100%;object-fit:cover;display:block}
.lp-kind-img.no{display:grid;place-items:center}
.lp-kind-img.no::after{content:'🎬';font-size:30px}
.lp-kind-img.no img{display:none}
.lp-kind b{display:block;margin:14px 16px 0;font-size:15px}
.lp-kind small{display:block;margin:6px 16px 0;font-size:12px;line-height:1.7;color:var(--muted)}
.lp-kind u{position:absolute;right:14px;bottom:14px;display:grid;place-items:center;
  width:26px;height:26px;border-radius:50%;background:var(--orange-soft);
  color:var(--orange-d);text-decoration:none;font-size:12px}

.lp-flow{display:flex;align-items:center;gap:10px;overflow-x:auto;padding-bottom:6px}
.lp-step{flex:0 0 210px;text-align:center}
.lp-step>span{display:block;aspect-ratio:4/3;border-radius:14px;overflow:hidden;
  background:var(--soft)}
.lp-step img{width:100%;height:100%;object-fit:cover;display:block}
.lp-step>span.no{display:grid;place-items:center}
.lp-step>span.no::after{content:'🎬';font-size:26px}
.lp-step>span.no img{display:none}
.lp-step b{display:block;margin-top:10px;font-size:13.5px}
.lp-step small{display:block;margin-top:3px;font-size:11.5px;color:var(--muted2)}
.lp-arrow{flex:none;color:var(--muted2);font-size:18px}

.lp-how{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.lp-howc{position:relative;background:var(--paper);border:1px solid var(--line);
  border-radius:18px;padding:26px 22px}
.lp-howc em{position:absolute;right:20px;top:18px;font-style:normal;font-size:22px;
  font-weight:800;color:var(--orange2);opacity:.5}
.lp-howc i{display:grid;place-items:center;width:46px;height:46px;margin-bottom:14px;
  border-radius:14px;background:var(--orange-soft);font-style:normal;font-size:20px}
.lp-howc b{display:block;font-size:15px}
.lp-howc small{display:block;margin-top:7px;font-size:12.5px;line-height:1.8;color:var(--muted)}

.lp-dark{position:relative;padding:70px 0;background:#241B14;color:#F5EDE4;overflow:hidden}
.lp-dark img{position:absolute;right:0;top:0;height:100%;width:52%;object-fit:cover;opacity:.42}
.lp-dark .shell{position:relative;z-index:2;max-width:1120px}
.lp-dq{font-size:clamp(22px,3.2vw,34px);line-height:1.5;letter-spacing:-.03em;max-width:620px}
.lp-dq em{font-style:normal;color:#FFA45C}
.lp-dark small{display:block;margin-top:18px;font-size:14px;line-height:2;opacity:.72}
.lp-dark .btn-cta{margin-top:28px}

.lp-shows{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:12px}
.lp-show span{position:relative;display:block;aspect-ratio:16/10;border-radius:13px;
  overflow:hidden;background:var(--soft)}
.lp-show img{width:100%;height:100%;object-fit:cover;display:block}
.lp-show span.no{display:grid;place-items:center}
.lp-show span.no::after{content:'▶';font-size:22px;color:var(--muted2)}
.lp-show span.no img{display:none}
.lp-show u{position:absolute;right:7px;bottom:7px;background:rgba(35,27,22,.72);color:#fff;
  border-radius:5px;padding:2px 7px;font-size:11px;text-decoration:none}
.lp-show b{display:block;margin-top:9px;font-size:13.5px}
.lp-show em{display:inline-block;margin-top:4px;font-style:normal;background:var(--soft);
  border-radius:999px;padding:3px 10px;font-size:11px;color:var(--muted)}

.lp-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:13px}
.lp-plan{position:relative;background:var(--paper);border:1.5px solid var(--line);
  border-radius:20px;padding:30px 24px;text-align:center}
.lp-plan.best{border:2px solid var(--orange);box-shadow:var(--sh-card)}
.lp-best{position:absolute;right:-2px;top:-2px;background:var(--orange);color:#fff;
  border-radius:0 19px 0 14px;padding:6px 15px;font-size:11px;font-weight:800}
.lp-plan>b{display:block;font-size:20px;letter-spacing:.02em}
.lp-plan>small{display:block;margin-top:5px;font-size:12.5px;color:var(--muted)}
.lp-plan ul{list-style:none;margin:20px 0;padding:0;text-align:left}
.lp-plan li{font-size:13px;line-height:2.1;color:var(--ink2)}
.lp-plan u{display:block;text-decoration:none;font-size:27px;font-weight:800;
  letter-spacing:-.03em}
.lp-plan em{display:block;margin-top:3px;font-style:normal;font-size:12px;color:var(--muted2)}
.lp-plan .btn-cta,.lp-plan .btn-ghost{margin-top:16px;width:100%}
.lp-note{margin-top:14px;text-align:center;font-size:13px;color:var(--muted)}
.lp-note a{color:var(--orange-d)}

.lp-revs{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.lp-rev{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:24px}
.lp-rev p{font-size:13.5px;line-height:1.95;color:var(--ink2)}
.lp-rev small{display:block;margin-top:8px;font-size:12px;color:var(--muted2)}

.lp-last{position:relative;padding:80px 0;text-align:center;overflow:hidden;
  background:linear-gradient(180deg,#FFF3E6,#FFE8D6)}
html[data-theme="dark"] .lp-last{background:#2A2038}
.lp-last img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.2}
.lp-last .shell{position:relative;z-index:2}
.lp-last h2{font-size:clamp(21px,3vw,30px);letter-spacing:-.03em}
.lp-last p{margin-top:12px;font-size:14.5px;color:var(--muted)}
.lp-last .btn-cta{margin-top:26px}

@media(max-width:900px){
  .lp-hero{min-height:auto}
  .lp-hero-bg{width:100%;opacity:.2}
  .lp-hero-in::before{background:none}
  .lp-hero .sv-memo{display:none}
  .lp-dark img{width:100%;opacity:.2}
  .lp-h{flex-direction:column;align-items:flex-start;gap:8px}
  .lp-more{margin-left:0}
}

/* ══ 좋아요 · 내 후기 (kids113) ═══════════════════════════ */
.og-book{position:relative}
.og-like{position:absolute;top:10px;right:10px;z-index:2;margin:0;line-height:1}
.og-like button,a.og-like{display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:999px;border:0;cursor:pointer;
  background:rgba(255,255,255,.92);box-shadow:var(--sh-card);
  color:var(--muted);font-size:17px;text-decoration:none;padding:0}
.og-like.on button{color:var(--pink)}
.og-like button:hover,a.og-like:hover{color:var(--pink);transform:scale(1.08)}

.my-sec{font-family:var(--font-title);font-size:19px;color:var(--ink);
  margin:28px 0 12px;display:flex;align-items:center;gap:8px}
.my-sec i{font-style:normal;font-size:13px;color:var(--muted);
  background:var(--soft);border-radius:999px;padding:2px 9px}

.lk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
.lk-card{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-m);overflow:hidden;box-shadow:var(--sh-card)}
.lk-img{display:block;aspect-ratio:3/2;background:var(--soft);
  display:flex;align-items:center;justify-content:center}
.lk-img img{width:100%;height:100%;object-fit:cover}
.lk-noimg{font-size:34px;opacity:.5}
.lk-body{padding:12px 13px 14px}
.lk-body b{display:block;font-size:15px;color:var(--ink);margin-bottom:4px;
  word-break:keep-all;line-height:1.4}
.lk-body small{display:block;font-size:12.5px;color:var(--muted);line-height:1.5}
.lk-tag{display:inline-block;margin-top:7px;font-size:12px;font-weight:700;
  color:var(--orange-d);background:var(--paper2);border-radius:999px;padding:3px 9px}
.lk-off{position:absolute;top:9px;right:9px;margin:0}
.lk-off button{width:32px;height:32px;border-radius:999px;border:0;cursor:pointer;
  background:rgba(255,255,255,.94);box-shadow:var(--sh-card);color:var(--pink);font-size:16px}

.rv-mine{display:grid;gap:14px}
.rv-mine-card{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-m);padding:16px 18px;box-shadow:var(--sh-card)}
.rv-mine-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:8px}
.rv-mine-kind{font-size:12px;font-weight:700;color:var(--orange-d);
  background:var(--paper2);border-radius:999px;padding:3px 10px}
.rv-mine-star{color:var(--orange2);font-size:14px;letter-spacing:1px}
.rv-mine-at{font-size:12px;color:var(--muted2)}
.rv-mine-hide{font-size:12px;color:var(--muted);border:1px solid var(--line);
  border-radius:999px;padding:2px 9px}
.rv-mine-sub{font-size:13px;color:var(--muted);margin:0 0 8px}
.rv-mine-form textarea{width:100%;border:1px solid var(--line);border-radius:var(--r-s);
  padding:11px 12px;font:inherit;font-size:14.5px;line-height:1.65;color:var(--ink);
  background:var(--paper);resize:vertical}
.rv-mine-btns{display:flex;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap}
.rv-mine-pub{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);cursor:pointer}
.rv-mine-del{position:absolute;top:14px;right:16px;margin:0}
.rv-mine-del button{border:0;background:none;cursor:pointer;font-size:12.5px;
  color:var(--muted2);text-decoration:underline;padding:0}
.rv-mine-del button:hover{color:var(--pink)}

@media(max-width:560px){
  .lk-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .rv-mine-card{padding:14px 14px 16px}
  .rv-mine-del{top:12px;right:12px}
}

/* 딸린 보기 숨김 (kids117) */
.em-opt.em-off{display:none}
.em-none{margin:6px 2px 0;font-size:13px;color:var(--muted)}

/* ── 화풍 고르는 칸 (kids117) ────────────────────────────
   설명 한 줄과 「이 화풍 캐릭터가 있나」 표시가 붙었습니다.
   같은 아이라도 화풍이 다르면 캐릭터를 새로 그려야 하므로,
   고르기 전에 알려 줘야 30초를 기다려도 고장으로 오해하지 않습니다.

   예전 규칙은 그림 카드용이라 고르면 이름칸에 주황 배경을 깔았는데,
   설명 줄이 생기면서 주황 위 주황 글씨가 되어 안 보였습니다.
   여기서 다시 잡습니다. */
.mk-styles{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.mk-style-in{position:relative;text-align:left;padding-bottom:2px}
.mk-style-in b{padding:10px 12px 3px;font-size:13.5px;background:none;color:var(--ink)}
.mk-style-d{display:block;padding:0 12px 10px;
  font-size:11.5px;line-height:1.5;color:var(--muted);font-style:normal;
  word-break:keep-all}

/* 고른 칸 — 테두리와 옅은 바탕으로 표시합니다 (글자색은 그대로) */
.mk-style input:checked + .mk-style-in,
.mk-style.on .mk-style-in{background:#FFF8F0}
.mk-style input:checked + .mk-style-in b,
.mk-style.on .mk-style-in b{background:none;color:var(--orange-d)}

.mk-style-b{position:absolute;top:8px;right:8px;
  padding:3px 8px;border-radius:999px;font-size:10.5px;font-weight:700;
  font-style:normal;line-height:1.35;letter-spacing:-.2px;
  background:rgba(255,255,255,.95);box-shadow:0 1px 4px rgba(0,0,0,.14)}
.mk-style-b.ok {color:#0a7d43}
.mk-style-b.mid{color:#9a6400}
.mk-style-b.new{color:#b2400f}
/* 견본 그림이 없는 칸은 딱지를 글 아래에 둡니다 (겹치지 않게) */
.mk-style-in.no-img{display:block;min-height:0;padding-bottom:10px}
.mk-style-in.no-img b{padding:12px 12px 3px}
.mk-style-in.no-img .mk-style-b{position:static;display:inline-block;
  margin:2px 0 0 12px;box-shadow:none;background:rgba(0,0,0,.05)}

/* 없는 화풍을 골랐을 때 나오는 안내 */
.mk-style-msg{margin-top:12px;padding:12px 14px;border-radius:12px;
  background:#fff7ef;border:1px solid #ffd9b8;color:#7a4212;
  font-size:13px;line-height:1.65;word-break:keep-all}
.mk-style-msg b{color:#b2400f}

/* 좁은 화면에서는 설명이 길어지므로 두 칸으로 (1520줄 규칙과 같은 폭) */
@media (max-width:640px){
  .mk-style-d{font-size:11px;padding:0 6px 8px}
  .mk-style-b{font-size:10px;padding:2px 6px}
}

/* ══ CSS 가 아예 없던 곳들 (kids117) ═══════════════════════
   화면은 만들어 두고 CSS 를 안 붙인 자리가 열일곱 군데 있었습니다.
   결제 화면이 대표입니다 — 체크 항목 넷이 한 줄로 뭉개지고,
   토큰 값이 항목 이름에 들러붙어 「캐릭터 4컷무료」로 보였습니다. */

/* ── 결제: 무엇을 만드나요 ─────────────────────────── */
.ord-opt{display:grid;gap:10px;margin-top:12px}
.ord-o{display:block;cursor:pointer;position:relative}
.ord-o input{position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;accent-color:var(--orange);cursor:pointer;margin:0;z-index:1}
.ord-o-in{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;
  gap:4px 11px;padding:14px 16px 14px 46px;
  border:2px solid var(--line2);border-radius:var(--r-m);background:var(--surface);
  transition:border-color .15s,background .15s,box-shadow .15s}
.ord-o-in i{font-size:19px;font-style:normal;line-height:1;grid-row:1/3}
.ord-o-in b{font-size:14.5px;line-height:1.4}
.ord-o-in > span{grid-column:3;font-size:12.5px;color:var(--muted);line-height:1.5}
.ord-o-in em{grid-column:4;grid-row:1/3;justify-self:end;white-space:nowrap;
  font-style:normal;font-weight:700;font-size:14px;color:var(--orange-d)}
.ord-o:hover .ord-o-in{border-color:var(--orange2)}
.ord-o.on .ord-o-in,
.ord-o input:checked ~ .ord-o-in{border-color:var(--orange);background:#FFF9F2;
  box-shadow:0 4px 14px rgba(238,122,34,.14)}
.ord-o input:disabled ~ .ord-o-in{opacity:.72}
.ord-o input:disabled ~ .ord-o-in em{color:var(--muted)}

/* 좁은 화면 — 설명을 아래로 내리고 값을 오른쪽 위에 */
@media (max-width:560px){
  .ord-o-in{grid-template-columns:auto 1fr auto;gap:3px 9px;padding:13px 13px 13px 42px}
  .ord-o-in i{grid-row:1/3}
  .ord-o-in > span{grid-column:2/-1;grid-row:2}
  .ord-o-in em{grid-column:3;grid-row:1;align-self:start}
}

/* ── 결제·마지막 확인: 드는 토큰 ───────────────────── */
.ord-sum{margin-top:12px;border:1px solid var(--line);border-radius:var(--r-m);
  background:var(--surface);overflow:hidden}
.ord-line{display:flex;align-items:baseline;gap:12px;
  padding:11px 15px;border-bottom:1px solid var(--line);font-size:14px}
.ord-line > span{flex:1 1 auto;min-width:0}
.ord-line em{margin-left:7px;font-style:normal;font-size:12px;color:var(--muted2);
  white-space:nowrap}
.ord-line > b{flex:0 0 auto;margin-left:auto;font-variant-numeric:tabular-nums;
  font-size:14.5px;white-space:nowrap}
.ord-line.free > span,.ord-line.free > b{color:var(--muted)}
.ord-line.free > b{font-weight:600}
.ord-total{display:flex;align-items:center;gap:12px;padding:14px 15px;
  background:var(--soft);font-size:15px}
.ord-total > span{font-weight:700}
.ord-total > b{margin-left:auto;font-family:var(--font-title);font-size:23px;
  color:var(--orange-d);font-variant-numeric:tabular-nums;white-space:nowrap}
.ord-total > b em{margin-left:4px;font-family:var(--font-ko);font-size:14px;
  font-style:normal;font-weight:700}

/* ── 결제: 가지고 계신 토큰 ────────────────────────── */
.ord-bal{border-color:#D8EEDD;background:#F6FCF7}
.ord-bal.short{border-color:#FFD9B8;background:#FFF7EF}
.ord-bal-in{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ord-bal-in > .pt-ic{flex:0 0 auto;display:grid;place-items:center;
  width:44px;height:44px;border-radius:50%;background:#fff;
  border:1px solid var(--line);font-size:21px;line-height:1}
.ord-bal-in > div{flex:1 1 200px;min-width:0}
.ord-bal-in b{display:block;font-size:15.5px;margin-bottom:3px}
.ord-bal-in p{margin:0;font-size:13px;color:var(--muted);line-height:1.6}
.ord-bal-in .btn-cta{flex:0 0 auto}
.ord-bal.short .ord-bal-in p{color:var(--orange-d);font-weight:600}
@media (max-width:480px){
  .ord-bal-in .btn-cta{width:100%}
}

/* ── 동의 체크 한 줄 (탈퇴·후기) ────────────────────── */
.chk{display:flex;align-items:flex-start;gap:9px;cursor:pointer;
  font-size:13.5px;line-height:1.65;color:var(--ink2)}
.chk input{flex:0 0 auto;width:18px;height:18px;margin:2px 0 0;
  accent-color:var(--orange);cursor:pointer}
.chk > span{flex:1 1 auto;min-width:0}

/* ── 장면 고치기 오른쪽 칸 ──────────────────────────
   부모가 그리드라 min-width:0 이 없으면 긴 나레이션이 칸을 밀어냅니다 */
.fx-right{min-width:0;display:flex;flex-direction:column;gap:9px}
.fx-right .fx-tx{margin:0;font-size:14px;line-height:1.8;color:var(--ink2);
  word-break:keep-all}

/* ── 목록이 비었을 때 ──────────────────────────────── */
.wz-empty{padding:44px 22px;text-align:center;
  border:1.5px dashed var(--line2);border-radius:var(--r-l);background:var(--surface)}
.wz-empty b{display:block;font-family:var(--font-title);font-size:18px;margin-bottom:7px}
.wz-empty p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.7}

/* ── 비밀번호 재설정 폼 ────────────────────────────── */
.auth-form{display:flex;flex-direction:column;gap:13px;margin-top:16px}
.auth-form label{display:block}
.auth-form label > span{display:block;margin-bottom:6px;
  font-size:13px;font-weight:700;color:var(--ink2)}
.auth-form input{width:100%;padding:13px 14px;font-size:15px;font-family:inherit;
  color:var(--ink);background:var(--surface);
  border:1.5px solid var(--line2);border-radius:var(--r-s);outline:none}
.auth-form input:focus{border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(238,122,34,.14)}
.auth-form button{width:100%;margin-top:3px}

/* ── 뜬다스토리: 그리드 안쪽 칸들 ───────────────────
   .sv-two / .sv-res 가 grid 인데 자식에 min-width:0 이 없어
   영상·긴 글이 들어가면 칸이 화면 밖으로 밀려 나갔습니다. */
.sv-main,.sv-mymain,.sv-mk-view{min-width:0}
.sv-main{display:flex;flex-direction:column;gap:15px}
.sv-mymain{display:flex;flex-direction:column;gap:15px}
.sv-mk-view{display:flex;flex-direction:column;gap:13px}
.sv-res-v{min-width:0;display:flex;flex-direction:column;gap:12px}
.sv-res-i{min-width:0;display:flex;flex-direction:column;gap:13px}
@media (max-width:900px){
  .sv-res-i{order:2}
  .sv-res-v{order:1}
}

/* ── 머리글이 1100~1280px 에서 화면 밖으로 나가던 것 (kids117) ──
   로그인하면 오른쪽에 [가족 이야기][이름][로그아웃][테마][동화 만들기]
   다섯이 붙는데, 가운데 메뉴가 flex:1 에 white-space:nowrap 이라
   줄지 않고 오른쪽을 밀어냈습니다. 980px 아래로는 메뉴가 접혀 괜찮았고
   1280px 위로는 자리가 남아, 딱 노트북 폭에서만 잘렸습니다. */
.hd-in{min-width:0}
.hd-nav{min-width:0}          /* 줄어들 수 있어야 오른쪽을 안 밉니다 */
.hd-act{flex:0 0 auto}        /* 오른쪽은 절대 줄지 않습니다 */

@media (min-width:981px) and (max-width:1320px){
  .hd-in{gap:12px}
  .hd-nav{gap:0;font-size:13.5px}
  .hd-nav>a,.hd-item>a{padding:8px 8px}
  .hd-cross{display:none}                 /* 「가족 이야기 ↗」 */
  .hd-act{gap:8px}
  .hd-act .lg{font-size:12.5px;max-width:96px;
              white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hd-act .btn-cta{font-size:13.5px;padding:9px 15px}
  .hd-act .btn-ghost{padding:8px 12px;font-size:13px}
  .age-tab a{padding:6px 11px;font-size:12.5px}
}
/* 그래도 모자라면 테마 단추부터 버립니다 (없어도 되는 것) */
@media (min-width:981px) and (max-width:1120px){
  .hd-act .theme-btn{display:none}
}
.ord-bal-in > .pt-ic svg{display:block}

/* ── 진행 막대가 모바일에서 잘리던 것 (kids117) ──────────
   단계가 7칸이 되면서 390px 에서 「4 캐릭터」까지만 보이고
   나머지는 오른쪽으로 잘렸습니다. 가로로 밀 수는 있었지만
   그런 줄 알 수가 없습니다.
   좁은 화면에서는 이름을 접고 번호만 두되, 지금 있는 단계만
   이름을 보여 줍니다. 일곱 칸이 넉넉히 들어갑니다. */
@media (max-width:560px){
  .wz-steps{gap:4px;justify-content:space-between;padding-bottom:2px}
  .wz-steps span{font-size:0;padding:5px 6px;gap:0}
  .wz-steps span i{font-size:11px;width:20px;height:20px}
  .wz-steps span.on{font-size:12px;padding:5px 10px;gap:6px}
}
@media (max-width:360px){
  .wz-steps span{padding:4px}
  .wz-steps span i{width:18px;height:18px;font-size:10.5px}
  .wz-steps span.on{font-size:11.5px;padding:4px 8px}
}

/* 개인정보 수집·이용 동의 칸 (2026-09-13) */
.pv-agree{margin-top:14px;padding:13px 15px;border-radius:12px;
  background:var(--soft);border:1px solid var(--line)}
.pv-agree b{font-size:13.5px}
.pv-agree em{display:block;margin-top:5px;font-style:normal;
  font-size:11.5px;line-height:1.75;color:var(--muted)}
.pv-agree a{color:var(--orange-d);text-decoration:underline}

/* 다크모드에서 화풍 카드 글자가 안 보이던 것 (2026-09-13)
   고른 칸이 옅은 주황 바탕인데 글자도 주황이라 흐렸습니다.
   어두운 화면에서는 바탕을 어둡게 두고 글자를 밝게 씁니다. */
html[data-theme="dark"] .mk-style input:checked + .mk-style-in,
html[data-theme="dark"] .mk-style.on .mk-style-in{background:rgba(238,122,34,.16)}
html[data-theme="dark"] .mk-style input:checked + .mk-style-in b,
html[data-theme="dark"] .mk-style.on .mk-style-in b{color:#FFC98A}
html[data-theme="dark"] .mk-style-in b{color:#F2E9DC}
html[data-theme="dark"] .mk-style-d{color:#B9AC9C}
html[data-theme="dark"] .mk-style-b{background:rgba(20,26,44,.92)}
html[data-theme="dark"] .mk-style-b.ok {color:#6DDCA0}
html[data-theme="dark"] .mk-style-b.mid{color:#FFD277}
html[data-theme="dark"] .mk-style-b.new{color:#FFAE85}
html[data-theme="dark"] .mk-style-msg{background:rgba(238,122,34,.12);
  border-color:rgba(238,122,34,.35);color:#F0DCC8}
html[data-theme="dark"] .mk-style-msg b{color:#FFB27A}

/* 제작이 밀려 있을 때 — 막대가 멈춘 채 아무 말이 없으면 손님은 떠납니다 (2026-09-13) */
.pg-stall{display:flex;flex-direction:column;gap:4px;background:#FFF8E6;
  border:1.5px solid #F5D68A;border-radius:14px;padding:14px 18px;margin:0 0 16px}
.pg-stall b{font-size:14.5px;color:#8A6A12}
.pg-stall span{font-size:13px;color:var(--muted2);line-height:1.7;word-break:keep-all}
html[data-theme="dark"] .pg-stall{background:#332B14;border-color:#6A5520}

/* 홈 히어로 값 문구가 휴대폰에서 잘리던 것 (2026-09-13)
   배경 사진이 깔린 히어로(.hero-in.over)에 white-space:nowrap 이 걸려 있어
   「7,200원부터 · 동화책 영상동화까지 16,200원 (12장면 기준)」이 한 줄로
   강제되고, 390px 화면에서 뒷부분이 화면 밖으로 나갔습니다.
   좁은 화면에서는 줄바꿈을 허용합니다 — 넓은 화면은 그대로 한 줄입니다. */
@media (max-width:640px){
  .hero-in.over .hero-price,
  .hero-in.over .hero-free{white-space:normal}
  .hero-price{display:block;max-width:100%;word-break:keep-all;line-height:1.7}
  .hero-price span{display:block}
}

/* 약관·방침 안의 표 (국외 이전 고지 등) — 휴대폰에서 가로로 밀립니다 (2026-09-13) */
.lg-tbl{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:14px 0;
  border:1px solid var(--line2);border-radius:12px}
.lg-tbl table{width:100%;min-width:620px;border-collapse:collapse;font-size:13px}
.lg-tbl th,.lg-tbl td{padding:9px 12px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line2);word-break:keep-all;line-height:1.6}
.lg-tbl th{background:var(--soft);font-size:12.5px;font-weight:700;white-space:nowrap}
.lg-tbl tr:last-child td{border-bottom:none}