/* ★★★ kids560 — **글꼴 @import 를 여기서 뺐습니다.** (사장님 2026-09-23)
 *
 *   「첫화면 로딩이 너무 오래걸린다」
 *
 * 여기 첫 줄에 구글 글꼴 @import 가 있었습니다. @import 는 **이 파일을
 * 다 받은 뒤에야** 다음 요청을 시작합니다 — 나란히 못 받고 줄을 섭니다.
 * 이 파일이 485KB 이고 글꼴 CSS 가 528KB 라, 글자 한 자 뜨기 전에
 * 1MB 짜리 CSS 두 개를 줄줄이 받았습니다.
 *
 * 이제 app/views/partials/_fonts.php 의 <link> 로 옮겼습니다.
 * kids.css 와 **나란히** 받습니다. 글꼴은 그대로 넷입니다.
 *
 * ※ 여기에 @import 를 다시 넣지 마세요. 넣는 순간 같은 일이 납니다. */


/* ★★ kids232 — hidden 은 언제나 숨깁니다.
 *
 * 브라우저 기본 [hidden]{display:none} 은 class 규칙보다 약합니다.
 * 그래서 .ag-guard{display:flex} 같은 줄이 하나 있으면, HTML 에
 * hidden 이라고 적어 놔도 그대로 보입니다. /consent 에서 만 14세
 * 이상을 켜 뒀는데 보호자 입력 칸이 열려 있던 이유입니다.
 *
 * 전수로 훑어보니 같은 자리가 일곱 군데였습니다 —
 *   .ag-guard .pg-stall .cut-ai .mp-shots .mv-btns .sr-bundle .el-drawer
 *
 * 한 군데씩 막으면 새로 만들 때 또 빠뜨립니다. 여기서 한 번에 막습니다.
 * 보였다 숨겼다 하는 칸은 el.hidden = true/false 로만 다루면 됩니다. */
[hidden]{display:none!important}

/* ============================================================
   뜬다키즈 — 디자인 토큰
   시안의 색·간격을 그대로 변수로 옮겼습니다.
   토큰만 바꾸면 전 페이지 톤이 함께 바뀝니다.
   ============================================================ */
/* ★★★ kids594 — **두 브랜드 색을 갈랐습니다.** (사장님 지시 2026-09-26)
 *
 *     3~7세 뜬다키즈   스카이블루  #3B8FD4
 *     뜬다스토리        민트       #2FA68C
 *     8~12세            그대로 (elem.css 가 제 색을 씁니다)
 *
 * 전에는 둘 다 크림 바탕에 주황이라 거의 같았습니다 —
 * 뜬다키즈 #EE7A22 / 뜬다스토리 #FF6B2C, 주황 차이 17.
 *
 * ★ 변수 **이름은 그대로** 둡니다.
 *   `--orange` 는 이 파일에서 294번, `--orange2` 167번, `--orange-d` 112번
 *   불립니다. 이름을 `--brand` 로 바꾸면 그 자리를 전부 고쳐야 하고,
 *   하나라도 빠지면 **그 칸만 옛 주황으로 남습니다.** 500KB 짜리 파일에서
 *   그것을 눈으로 찾는 것은 못 할 일입니다. 값만 바꿉니다.
 *   (이름이 색을 가리키게 둔 것이 애초에 흠입니다 — 나중에 화면을 한 벌
 *    정리할 때 --brand 로 옮기는 것이 맞습니다.)
 *
 * ★ `--pink` 는 그대로 둡니다. 포인트 색이라 파랑·민트 어느 쪽에서도
 *   눈에 띕니다. 여덟 자리에서만 쓰입니다.
 *
 * 어느 브랜드인지는 <html data-track="..."> 에 적혀 옵니다
 * (partials/layout.php). 화면 파일은 한 줄도 안 건드렸습니다.
 */
:root{
  /* ★ 2026-09-26 — 처음 값은 너무 옅었습니다. 사장님 —
     「저건 블루도 아니고 흰색도 아니고 좀 모호해」. 맞습니다.
     바탕을 한 단계 진하게, 파랑도 더 또렷하게 올렸습니다. */
  --paper:#DDEDFB; --paper2:#BFD9F2; --surface:#fff; --soft:#CFE4F8;
  --ink:#102B45; --ink2:#264463; --muted:#4A6787; --muted2:#56708E;
  --line:#B2D1EE; --line2:#9AC0E5;
  --orange:#1268B4; --orange2:#4C9BDB; --orange-d:#0B4F8D;
  --pink:#E0457E;
  --r-s:12px; --r-m:16px; --r-l:20px; --r-xl:22px; --r-pill:999px;
  --shell:1240px; --pad-x:20px;
  /* 그림자도 바탕색 쪽으로 기울입니다 — 갈색 그림자를 파란 바탕에 얹으면
     탁해 보입니다 (kids594) */
  --sh-card:0 8px 22px rgba(30,70,110,.10);
  --sh-lift:0 14px 28px rgba(30,70,110,.14);
  --sh-big:0 18px 40px rgba(30,70,110,.16);
  --font-ko:'Noto Sans KR',sans-serif;
  --font-title:'Jua',sans-serif;
  --font-serif:'Gowun Dodum',serif;
  --font-hand:'Gaegu',cursive;
  /* ★ kids432 — 머리띠 높이를 한 곳에서 정합니다.
   *
   * 무엇이 잘못됐나: 붙박이 칸(sticky)마다 머리띠 높이를 손으로 적어
   * 놨습니다 — 69px · 57px · 84px · 88px · 90px · 96px 가 제각각이라
   * 어느 하나가 틀려도 알 길이 없었습니다. 폰에서 마이페이지 탭 줄이
   * top:57px 인데 실제 머리띠는 65px 이라 8px 이 늘 가려졌습니다.
   *
   * 어떻게 고쳤나: 머리띠 실측값을 변수 하나로 두고 전부 그것을 쓰게
   * 했습니다. 아래 붙박이 칸들은 지금 보이는 자리를 그대로 지키려고
   * 「머리띠 + 여백」 꼴로 적습니다. 머리띠 높이가 바뀌면 전부 따라옵니다.
   *
   *   PC(641px~)  : .hd-in 위아래 12px + 가장 큰 칸(.btn-cta ≈ 44.5px)
   *                 + 아래 테두리 1px ≈ 69px
   *   폰(~640px)  : .btn-cta 를 숨기고 햄버거(40px)가 가장 큽니다
   *                 12 + 40 + 12 + 1 = 65px
   *
   * 값을 고칠 일이 생기면 **여기만** 고치십시오. */
  --hd-h:69px;
  /* 머리띠 아래에 붙는 칸들이 쓰던 84px = 머리띠 69px + 숨 쉴 틈 15px */
  --stick:calc(var(--hd-h) + 15px);
}
/* ★ kids432 — 폰에서는 머리띠가 65px 입니다 (위 주석의 계산). */
@media(max-width:640px){
  :root{--hd-h:65px}
}

/* ★ kids432 — 화면 안 링크(#아이디)로 뛰면 머리띠에 가리던 자리.
 *
 * 무엇이 잘못됐나: 머리띠가 화면에 붙박여 있는데(.hd position:sticky)
 * 브라우저는 목표를 화면 맨 위에 붙입니다. 그래서 뛰어간 자리의 첫
 * 줄이 늘 머리띠 뒤로 들어갔습니다. scroll-margin-top 이 적힌 곳은
 * 네 군데뿐이라 나머지 앵커는 전부 가려졌습니다.
 *
 * 어떻게 고쳤나: id 가 붙은 것은 모두 머리띠만큼 아래에서 멈추게
 * 합니다. 규칙 세기가 class 와 같으므로(0,1,0) **이 줄보다 뒤에**
 * 적힌 개별 scroll-margin-top 은 그대로 이깁니다 — 기존 네 군데는
 * 자기 값을 지킵니다. */
[id]{scroll-margin-top:calc(var(--hd-h) + 12px)}

*{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;color:inherit}
/* ★ kids598 — 단추는 글자색을 물려받지 않습니다(브라우저 기본이 검정). 카드처럼 쓴 단추
     (스토리 「이야기 찾기」 목록 등)가 어두운 화면에서 검정 글자가 됐습니다(대비 1.2:1).
     색을 따로 정한 단추는 그 값이 이깁니다 — 이 줄은 정하지 않은 것만 받습니다.
     입력칸은 건드리지 않습니다(바탕이 브라우저 흰색인 칸에 밝은 글자가 되면 안 보입니다). */
.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);
    /* kids594 — 박아 둔 크림을 토큰으로. 브랜드마다 따라갑니다. */
    background:var(--surface);border-bottom:1px solid var(--line)}
.hd-in{display:flex;align-items:center;gap:28px;padding-top:12px;padding-bottom:12px}
/* ★ 머리글만 화면 폭을 다 씁니다. (kids303 · 사장님 지적 2026-09-16 「헤드 보고 수정」)
 *
 * 본문은 1,240px 안에 모아야 읽기 좋습니다. 그런데 머리글까지 같은 틀을
 * 쓰니, 화면이 1,500px 이어도 머리글이 쓸 수 있는 자리는 1,200px 뿐이었습니다.
 * 메뉴 일곱 개에 나이 탭·토큰·계정·단추까지 그 안에 들어가지 못해
 * **글자끼리 겹쳐 뭉개졌습니다.**
 *
 * 화면이 넓으면 넓은 대로 씁니다. 그래도 모자라면 메뉴를 빼지 않고
 * 잘라서 겹치지만 않게 합니다. */
.hd .shell{max-width:1640px}
/* ★ 잘라내기를 뺐습니다. (kids313 · 사장님 지적 2026-09-16 「펼침 메뉴가 하나도 없네」)
 *
 * 메뉴 칸에 「넘치면 자른다(overflow:hidden)」를 걸었는데, **펼침 메뉴는
 * 그 칸 아래로 나오는 것**이라 통째로 잘려 안 보였습니다. 겹침을 막으려다
 * 메뉴를 없앤 셈입니다.
 *
 * 겹침은 바로 위에서 머리글이 화면 폭을 다 쓰게 해서 이미 풀었습니다.
 * 그래도 모자라면 글자와 여백이 줄어들 뿐, 자르지는 않습니다. */
/* 로고 — 시안 기준 높이 28px */
.hd-logo{height:28px;width:auto;display:block}
.hd-brand:hover .hd-logo{opacity:.85}
.age-tab{display:flex;gap:4px;background:var(--soft);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 var(--line2);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 var(--line2);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}
/* ★ 이미 만들어 둔 화풍은 우리 아이 얼굴이 걸립니다 (kids382).
     견본 그림과 헷갈리지 않게 테두리로 구별합니다. */
.mk-style-in.mine img{outline:2px solid var(--orange);outline-offset:-2px}
/* ★ 단추가 화면 아래를 덮어 마지막 줄을 가리던 자리 (kids381).
     단추가 있는 화면에서만 그 높이만큼 아래를 비웁니다. */
/* ★★ kids432 — 두 가지를 바로잡았습니다.
 *
 * 1) 기준 폭이 서로 달랐습니다.
 *    아래 단추(.mcta)는 640px 이하에서만 나타나는데(:.mcta{display:block}),
 *    이 비우기는 760px 이하에 걸려 있었습니다. 그래서 **641~760px
 *    (가로로 돌린 폰·작은 태블릿)에서는 단추가 없는데도 바닥글 아래
 *    84px 이 이유 없이 비어 있었습니다.** 단추가 나오는 폭과 같게 맞춥니다.
 *
 * 2) 아이폰 홈바 높이를 안 더했습니다.
 *    .mcta 는 스스로 padding 에 env(safe-area-inset-bottom) 을 더해
 *    홈바를 피하는데, 비워 주는 쪽은 84px 로 고정이었습니다. 홈바가
 *    있는 기기(아이폰 X 이후 ≈ 34px)에서는 그 차이만큼 바닥글 끝줄이
 *    영구히 단추에 가렸습니다. 같은 값을 더해 줍니다. */
@media(max-width:640px){
  body:has(.mcta) footer{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
}

/* ── 히어로 ───────────────────────────────────────────── */
.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}
/* ★ 가운데가 아니라 위쪽을 남깁니다. (kids274 · 사장님 지적 2026-09-16)
   「히어로에 아이들 머리가 전부 얼굴 절반은 잘려 있다」
   가로로 긴 그림을 넓적한 칸에 cover 로 넣으면 위아래가 같이 잘립니다.
   아이는 대개 위쪽에 서 있으니 머리부터 날아갑니다. 32% 자리를 잡아
   위쪽을 더 남깁니다. 그림 자체도 머리 위에 여백을 두고 그립니다
   (cron/kids_home_images.php 의 $HEAD). */
.hero-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  /* ★ 그림을 4분의 1쯤 위로 올립니다. (kids410 · 사장님 지적 2026-09-19)
   *   「3세7세 첫화면을 4분의 1만큼 위로 좀 올려야 됨. 잘렸음」
   *
   * kids409 에서 제가 거꾸로 했습니다. **그림을 위로 올린다**는 것은
   * 보는 창이 아래로 내려간다는 뜻입니다 — 값을 키워야 합니다.
   * 32% → 57% (그림 높이의 4분의 1만큼). 아래쪽을 더 보여 줍니다. */
  object-position:center 57%;
  opacity:0;transition:opacity 1.4s ease;transform:scale(1.04);
  /* ★ 그림도 떨렸습니다. (kids297 · 사장님 지적 2026-09-16)
   *
   * 천천히 키우는 동안 브라우저가 **매 프레임 그림을 다시 그립니다**.
   * 1600×700짜리를 12초에 걸쳐 다시 그리니 가장자리가 자글거립니다.
   * 아래 세 줄이 「이 칸은 그래픽 카드가 맡아라」는 뜻입니다 — 한 번
   * 올려 두고 옮기기만 하니 다시 안 그립니다.
   * 키우는 폭도 7%에서 4%로 줄입니다. 덜 움직일수록 덜 떱니다. */
  will-change:transform,opacity;
  transform-origin:center 40%;
  backface-visibility:hidden}
.hero-slide.on{opacity:1;animation:heroPan 12s ease-out forwards}

/* ★ 영상에는 확대 효과를 안 겁니다. (kids292 · 사장님 지적 2026-09-16)
 *
 *   「히어로에 영상이 천천히 확대되면서 덜덜덜 떤다. 영상들이 없느니만 못해」
 *
 * heroPan 은 **멈춘 그림**을 살아 있어 보이게 하려고 천천히 키우는
 * 효과입니다. 그런데 영상에까지 걸려 있었습니다. 영상은 이미 스스로
 * 움직이는데 그 위에 확대가 겹치니, 화면이 매 프레임 다시 그려지면서
 * 떱니다. 큰 영상일수록 심합니다.
 *
 * 영상은 그냥 둡니다 — 움직이는 것이 이미 그 자리의 몫입니다. */
video.hero-slide,video.hero-slide.on{animation:none;transform:none}
/* ★ 영상만 조금 내립니다. (kids412 · 사장님 지적 2026-09-19)
 *   「동영상 화면은 머리부분이 조금 짤리네. 동영상 라인만 조금 아래로」
 *
 * 그림은 넓적하게 그려 두어 57% 에서 잘 맞는데, 영상은 장면 그림을
 * 그대로 이어 붙인 것이라 인물이 더 위에 있습니다. 같은 값으로 자르면
 * 머리가 날아갑니다. 영상에만 다른 값을 줍니다 — 그림은 안 건드립니다. */
video.hero-slide{object-position:center 38%}
@keyframes heroPan{from{transform:scale(1.04) translateZ(0)}
                     to{transform:scale(1.08) translateZ(0)}}
/* 왼쪽에서 오른쪽으로 옅어지는 가림막 — 글이 읽히게 */
.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:var(--soft);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}
/* 아이콘 자리에 우리가 만든 그림 (kids303) */
.three-im{display:block;width:100%;aspect-ratio:16/10;border-radius:14px;overflow:hidden;
  background:var(--soft);margin-bottom:14px}
.three-im img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.three-card:hover .three-im img{transform:scale(1.04)}
.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)}

/* ── kids484 — 큰 그림 둘에 제목·설명·화살표를 얹습니다 ─────────
   여태 그림만 있어서 무엇인지·어디로 가는지 알 수 없었습니다. */
.st-big{position:relative;text-decoration:none;color:inherit}
.st-big img{aspect-ratio:4/3;object-fit:cover}
.st-big-tx{position:absolute;left:0;right:0;bottom:0;padding:44px 20px 18px;
  background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.55) 45%,rgba(0,0,0,0) 100%);
  color:#fff;text-align:left}
.st-big-tx b{display:block;font-family:var(--font-title);font-size:19px;line-height:1.3}
.st-big-tx em{display:block;font-style:normal;font-size:12.5px;line-height:1.6;
  margin-top:6px;color:rgba(255,255,255,.9)}
.st-big-tx em b{display:inline;font-family:inherit;font-size:inherit}
.st-big-tx i{display:inline-block;font-style:normal;font-size:12.5px;font-weight:700;
  margin-top:10px;padding:6px 13px;border-radius:999px;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.45)}
.st-big:hover .st-big-tx i{background:rgba(255,255,255,.3)}

@media (max-width:720px){
  .st-two{grid-template-columns:1fr}
  .st-big-tx{padding:36px 16px 15px}
  .st-big-tx b{font-size:17px}
}
/* ── 섹션 공통 ───────────────────────────────────────── */
.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:var(--on-orange,#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,var(--soft),var(--line2))}
.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,var(--soft),var(--line2));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}
html[data-theme="dark"] .hand{color:#CDB8A4}   /* kids598 — 어두운 바탕에서 갈색 손글씨가 묻혔습니다(2.5:1) */

/* ── 안심 배지 ───────────────────────────────────────── */
.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}
/* kids634 — 「+」를 float 로 띄워 두어 긴 질문이면 다음 줄로 밀렸습니다. 한 줄 칸(flex)으로: 글은 줄을 바꾸고 +는 오른쪽 위에 */
.faq summary{cursor:pointer;font-weight:700;font-size:15px;list-style:none;
  display:flex;align-items:flex-start;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';margin-left:auto;flex:none;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:var(--muted)}
.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:var(--muted)}

/* ── 하단 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(--muted);font-size:12px}   /* kids598 — 2.9:1 → 읽히게 */
.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;
            pointer-events:none}
/* ★ 휴대폰에서는 아래 고정 단추(.mcta) 위로 올립니다. (kids261)
   둘 다 bottom:12px/0 에 붙어 있고 이 딱지가 위(z-index 80 > 70)라서,
   「시안 · DEMO」 가 **만들기 단추의 오른쪽을 덮고 있었습니다.**
   눌러야 할 자리를 딱지가 먹으면 안 됩니다. 클릭도 안 먹게 했습니다. */
/* ★ kids432 — 기준 폭을 단추와 맞췄습니다.
   아래 고정 단추(.mcta)는 640px 이하에만 나옵니다. 그런데 이 딱지는
   700px 이하에서 「단추 위로」 올라가 있었습니다. 641~700px 에서는
   단추가 없는데 딱지만 혼자 64px 떠 있었습니다. 640px 으로 맞춥니다. */
@media (max-width:640px){
  .demo-badge{bottom:calc(64px + env(safe-area-inset-bottom));right:10px;
              padding:5px 11px;font-size:10.5px;opacity:.8}
}

/* ============================================================
   반응형 — 시안에는 없던 부분. 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}
  /* 가로 그림을 세로 화면에 넣으면 주인공(대개 오른쪽)이 잘립니다.
     세로 화면도 같이 올립니다 (kids410) — 휴대폰이 더 많이 잘립니다. */
  .hero-slide{object-position:72% 55%}
  /* 영상은 세로 화면에서도 조금 내립니다 (kids412) */
  video.hero-slide{object-position:72% 36%}
  .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}
  /* ★★ kids432 — 아래를 비우는 규칙이 두 가지로 틀렸습니다.
   *
   * 1) 아이폰 홈바를 안 더했습니다.
   *    .mcta 띠의 실제 높이는 「위아래 여백 20px + 단추(.btn-cta.lg ≈ 59px)
   *    + 홈바(env(safe-area-inset-bottom) ≈ 34px)」 ≈ 99px 입니다.
   *    비워 둔 값은 70px 뿐이라 **15~29px 이 영구히 가려졌습니다.**
   *    홈바 높이를 같이 더합니다.
   *
   * 2) 단추가 있는지 안 봤습니다.
   *    .mcta 는 화면마다 있기도 하고 없기도 한데 이 비우기는 폰이면
   *    무조건 걸렸습니다. 8~12세 전 화면·마이페이지·만들기처럼 단추가
   *    없는 화면은 아래 70px 이 그냥 빈 채로 남았습니다.
   *
   *    :has() 를 모르는 낡은 브라우저에서 비우기가 통째로 사라지면
   *    단추가 본문을 덮습니다 — 그쪽이 더 나쁩니다. 그래서 기본값은
   *    그대로 두고, :has() 를 아는 브라우저에서만 「단추가 없으면 0」
   *    으로 지웁니다. 낡은 브라우저는 예전처럼 조금 비는 쪽으로 남습니다. */
  body{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
  @supports selector(:has(*)){
    body:not(:has(.mcta)){padding-bottom:0}
  }
  .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배가 된다)
   ============================================================ */
/* ── 뜬다스토리(FAMILY) — 민트 ─────────────────────────────
   같은 토큰 이름에 값만 덮습니다. 아래 수천 줄은 그대로 씁니다. (kids594) */
html[data-track="FAMILY"]{
  --paper:#DFF3EC; --paper2:#C2E7DA; --surface:#fff; --soft:#D2EDE3;
  --ink:#0F2B25; --ink2:#264840; --muted:#4E736B; --muted2:#547870;
  --line:#B4DED0; --line2:#9CD2C1;
  --orange:#1F8E77; --orange2:#4CBCA2; --orange-d:#126A57;
  --sh-card:0 8px 22px rgba(31,90,80,.11);
  --sh-lift:0 14px 28px rgba(31,90,80,.15);
  --sh-big:0 18px 40px rgba(31,90,80,.17);
}

html[data-theme="dark"]{
  --paper:#0C1430; --paper2:#122048; --surface:#16224A; --soft:#111C3E;
  --ink:#EAF1FF; --ink2:#C3CFEA; --muted:#9FB0D4; --muted2:#8496BC;
  --line:#25335C; --line2:#2A3A66;
  /* ★ kids594 — 어두운 화면에서는 **더 밝게** 씁니다. 밝은 화면의 파랑을
     그대로 쓰면 어두운 바탕에서 글씨가 안 읽힙니다. */
  --orange:#6FB6EE; --orange2:#9ED0F5; --orange-d:#C3E2FA;
  --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);
}
/* 스토리의 어두운 화면 — 민트도 밝게 (kids594) */
html[data-theme="dark"][data-track="FAMILY"]{
  --paper:#09201C; --paper2:#0E2D27; --surface:#123A33; --soft:#0D2A25;
  --ink:#E6F6F2; --ink2:#C2E0D9; --muted:#96BDB4; --muted2:#7FA9A0;
  --line:#1E463D; --line2:#245349;
  --orange:#5FD3B6; --orange2:#8FE4CE; --orange-d:#B9F0E2;
}
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:var(--muted);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:var(--soft)}
.auth-note{margin:8px 0 0;font-size:11.5px;color:var(--muted);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}
}

/* ── 회원 영역 ───────────────────────────────────────── */
/* ★ kids432 — 머리띠 실제 높이를 쓰게 했습니다 (69px 손으로 적던 자리).
     폰에서는 아래 640px 규칙이 57px 로 덮고 있었는데, 폰 머리띠는 65px
     이라 탭 줄이 머리띠 뒤로 8px 파고들어 글자가 잘렸습니다. */
.my-nav{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:var(--hd-h);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}
/* kids634 — 「.sec h2{margin:0 0 8px}」가 이겨서 단체주문 등에서 제목이 위 칸에 붙었습니다. 제목(my-h3) 위 여백을 되살립니다 */
.sec h2.my-h3{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:var(--muted2);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)}  /* kids639 — 설명 속 굵은 글씨 줄 안 끊음 */
.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,var(--soft),var(--line2));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;gap:8px;flex-wrap:wrap;margin-bottom:12px}
/* ★ gap 이 없어서 「캐릭터 화풍화풍마다 그림을 따로 그립니다」로 붙어
     나왔습니다. (kids380 · 사장님 화면 확인 2026-09-18) */
.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:var(--soft);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}
  /* ★ kids432 — 57px 은 실제 머리띠(65px)보다 8px 낮아 겹쳤습니다.
       변수로 바꿔 머리띠 바로 아래에 정확히 붙게 합니다. */
  .my-nav{top:var(--hd-h)}
  .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:var(--on-orange,#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}
/* kids643 — 지금 할 일 · 다음 */
.wz-todo{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;align-content:center;gap:4px 12px;
  width:fit-content;max-width:100%;margin:10px auto 0;padding:7px 16px;border-radius:18px;background:var(--soft);font-size:13px;line-height:1.5}
.wz-todo b{color:var(--orange);margin-right:4px}
.wz-todo-nx{color:var(--muted)}

.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:var(--soft);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:var(--on-orange,#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:var(--soft)}
.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:var(--soft)}

/* 사진 */
.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:var(--soft);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:var(--soft)}
.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,var(--soft),var(--line2));
  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:var(--muted);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%;height:auto;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}
/* ★ kids432 — 붙박이 자리를 머리띠 변수 기준으로 (전에는 90px 고정).
     지금 보이는 자리(PC 90px)는 그대로 두고, 폰에서만 머리띠(65px)에
     맞춰 86px 로 따라 내려옵니다. */
.pr-preview{text-align:center;background:var(--soft);border:1px solid var(--line2);
  border-radius:var(--r-xl);padding:20px;position:sticky;top:calc(var(--hd-h) + 21px)}
.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:var(--muted);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}
/* ★ 녹음 단추 — 이름을 .vcb- 로 갈랐습니다. (kids261)
   .vc-rec 라는 같은 이름을 「내 목소리」 화면의 카드(1719줄)도 쓰고 있어서,
   여기 적힌 104px 동그라미·맥박 애니메이션이 그 카드에 그대로 먹었습니다.
   카드가 104px 로 찌그러지고 테두리가 뛰었습니다. 지우지 않고 이름만 갈랐습니다. */
.vc-ctrl{display:grid;place-items:center}
.vcb-rec,.vcb-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}
.vcb-stop{background:linear-gradient(135deg,#7D8AA8,#5A6B8C);font-size:22px}
.vcb-rec span,.vcb-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:var(--on-orange,#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}  /* kids634 — 제목 b 만. 「.pc-note b」가 목록 속 굵은 글씨까지 줄을 끊었습니다 */
.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:var(--on-orange,#fff)}
/* ★ kids604 — 어두운 화면에서 「사진」 딱지가 흰 바탕 위 밝은 회색(대비 2.2). 바탕이 늘 흰색이라 글자도 밝을 때 색으로 (390px 전수 검사) */
html[data-theme="dark"] .ba2-shot:not(.on) i{color:#4A6787}
/* 같은 모양(흰 바탕 딱지·단추 위 테마 글자색) 두 곳 더 — 후기 사진 딱지, 넘기기 화살표 */
html[data-theme="dark"] .rv-photos figcaption{color:#4A6787}
html[data-theme="dark"] .cf-arrow{color:#16223A}
.ba2-item figcaption{margin-top:9px;font-size:13.5px;font-weight:700;color:var(--ink)}

/* 같은 아이 · 화풍 여러 벌 (kids281) */
.ba2-styles{background:var(--soft);border:1px solid var(--line2);border-radius:var(--r-xl);
  padding:22px;margin-bottom:22px;text-align:center}
.ba2-styles b{display:block;font-family:var(--font-title);font-size:18px}
.ba2-styles p{margin:6px 0 16px;font-size:13.5px;color:var(--muted)}
.ba2-strow{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px}
.ba2-strow figure{margin:0}
.ba2-strow img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-m);
  border:1px solid var(--line2);display:block;background:#fff}
.ba2-strow figcaption{margin-top:8px;font-size:12.5px;font-weight:700;color:var(--ink2)}
@media(max-width:600px){ .ba2-strow{grid-template-columns:1fr 1fr} }

.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,var(--soft),var(--line2));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:var(--on-orange,#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);
  /* ★ kids432 — 머리띠 변수 기준으로 (전 90px 고정). 폰에서 86px 로 따라옵니다. */
  scroll-margin-top:calc(var(--hd-h) + 21px)}
.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:var(--soft);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:var(--on-orange,#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:var(--on-orange,#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:var(--on-orange,#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:var(--on-orange,#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)}
/* ★ kids432 — 붙박이 자리를 머리띠 변수 기준으로 (전 96px 고정). */
.og-detail{position:sticky;top:calc(var(--hd-h) + 27px);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:var(--soft);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:var(--soft);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:var(--soft);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:var(--on-orange,#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}  /* kids639 — 설명 속 「결제 전」 굵은 글씨가 줄을 끊었습니다 */
.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}
/* kids643 — 튜토리얼 입구 카드 */
.wc-h{font-size:18px;margin:6px 0 10px}
.wc-hs{font-size:13px;color:var(--muted);margin:-4px 0 12px}
.wc-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin-bottom:28px}
.wc-card{display:flex;flex-direction:column;gap:5px;min-width:0;background:var(--surface);border:1.5px solid var(--line2);
  border-radius:var(--r-l);padding:16px;color:inherit;text-decoration:none;transition:.15s}
.wc-card:hover{border-color:var(--orange2);transform:translateY(-2px)}
.wc-card>b{display:block;font-size:15.5px}
.wc-card>span{font-size:12.5px;color:var(--muted);line-height:1.5}
.wc-card>i{font-style:normal;font-size:13px;color:var(--orange);font-weight:700;margin-top:auto;padding-top:4px}
.wc-ic{font-size:24px;line-height:1}

/* ── 공유뷰 ──────────────────────────────────────────── */
.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:var(--soft);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}
/* 3칸 고정이었습니다. 갈래가 넷이 되면서 3+1 로 떨어져 한 장이 외로웠습니다.
 * 폭에 맞춰 채웁니다 — 넓으면 넷, 좁으면 셋·둘·하나. (kids147) */
.el-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,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}
/* 8~12세 첫 화면 — 「이야기 고르기 / 직접 만들기」 두 줄 나누기 (kids147) */
.el-sec{margin:34px 0 16px}
.el-sec:first-of-type{margin-top:8px}
.el-sec h2{margin:0;font-family:var(--font-title);font-size:20px;letter-spacing:-.01em}
.el-sec p{margin:6px 0 0;font-size:13.5px;color:var(--muted);line-height:1.75}
/* 카드 그림 위 편수 — 몇 편 있는지가 고르는 가장 큰 이유입니다 */
.el-img{position:relative}
.el-n{position:absolute;left:10px;bottom:10px;background:rgba(17,17,17,.72);
      color:#fff;font-size:11.5px;font-weight:700;line-height:1;
      padding:6px 9px;border-radius:999px;backdrop-filter:blur(3px)}
.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:var(--soft);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:var(--soft);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:var(--on-orange,#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:var(--soft);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}

/* ★ 성 · 이름 · 나이 석 줄. (kids261 — kids255 에서 제가 낸 흠입니다)
 *
 * kids255 에서 성 칸을 새로 만들면서 .hp-row 안에 칸을 셋 넣고,
 * 너비는 style="flex:0 0 96px" 로 줬습니다. 그런데 .hp-row 는 flex 가
 * 아니라 **grid** 입니다 — flex 속성은 grid 부모 안에서 아무 일도
 * 안 합니다. 두 칸짜리 바둑판에 셋을 넣었으니 **나이가 다음 줄로**
 * 떨어졌습니다. 너비는 바둑판 칸 수로 정해야 합니다. */
.hp-row.hp-3{grid-template-columns:96px minmax(0,1fr) 110px}
@media(max-width:560px){
  .hp-row.hp-3{grid-template-columns:82px minmax(0,1fr);}
  .hp-row.hp-3>label:last-child{grid-column:1 / -1}
}
.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}

/* ★★ kids439 — 인물이 늘면 옆으로 흐르던 줄. (사장님 지시 2026-09-20)
     「인물 많아지면 저렇게 스크롤 되는 건 좀 별로네」

   아홉 명이 되니 화살표를 눌러 가며 찾아야 했고, 오른쪽 끝에 있는
   「인물 추가」는 밀려나 보이지도 않았습니다. 가로로 흐르지 않고
   **줄을 바꿔 쌓습니다.** 한눈에 다 보이고 화살표가 필요 없습니다. */
.kd-tabs{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
  gap:10px;padding:4px 2px 12px;margin-bottom:20px}
.kd-tab{position:relative;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:var(--paper)}
.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)}
/* 마이페이지 「인물 추가」도 같이 눈에 띄게 (kids343) */
.kd-tab.add{border-style:dashed;border-color:var(--orange2);background:var(--soft);
  color:var(--orange-d);font-weight:700}
.kd-tab.add:hover{border-color:var(--orange);background:var(--paper2)}
.kd-tab.add .kd-av{background:var(--orange)}
.kd-tab.add .kd-av em{color:#fff;font-weight:700}
html[data-theme="dark"] .kd-tab.add{background:#33241B}
/* ★ kids439 — 좁은 화면에서는 한 줄에 셋씩 */
@media (max-width:640px){
  .kd-tabs{grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:8px}
  .kd-tab{padding:11px 6px 10px}
  .kd-tab b{font-size:12.5px;margin-top:6px}
}
.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}
/* 만들어 둔 화풍 전부 보여주기 (kids335 · 테스터 「확정 캐릭터도 화풍 4가지」) */
.kd-styled{margin-top:16px;padding-top:14px;border-top:1px solid var(--line2)}
.kd-styled-h{display:block;font-size:13.5px;margin-bottom:9px}
.kd-styled-row{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:8px}
.kd-styled-one{text-align:center;padding:8px 6px;border:1.5px solid var(--line2);
  border-radius:var(--r-s);background:var(--soft)}
.kd-styled-one.on{border-color:var(--orange2);background:var(--paper)}
.kd-styled-one img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:9px;display:block}
.kd-styled-one b{display:block;margin:6px 0 5px;font-size:12.5px}
.kd-styled-one .btn-ghost{width:100%;padding:5px 0;font-size:12px}
@media(max-width:560px){ .kd-styled-row{grid-template-columns:repeat(2,1fr)} }
.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}

/* kids348·352 — 대표 사진 고르기
   ★ 고르는 칸은 사진 **밖**에 둡니다. 사진 위에 글씨를 얹으면
     밝은 사진에서 글자가 묻혀 안 보입니다 (사장님 지적 2026-09-17). */
.ch-photo.main img{outline:3px solid var(--orange);outline-offset:-3px}
.ch-main-tag{position:absolute;top:7px;left:7px;background:var(--orange);color:var(--on-orange,#fff);
  font-size:10.5px;font-weight:800;border-radius:999px;padding:3px 9px;
  box-shadow:0 1px 4px rgba(0,0,0,.25)}
/* ★★ kids432 — `.ch-pick` 이라는 이름을 **셋이 나눠 쓰고 있었습니다.**
 *
 *   ① 여기(:1640)      — 대표 사진 고르는 작은 단추   my/child.php
 *   ② 아래(:1679)      — 고른 사진 미리보기 상자       my/child.php
 *   ③ 더 아래(:2558)   — 아이 고르는 큰 카드           make/child.php
 *
 * CSS 는 나중에 적힌 것이 이깁니다. 그래서 ①의 여백·테두리·바탕을
 * ②가 덮어써 대표 단추가 커다란 상자처럼 되고, ②·③은 ①의
 * display:flex / font-size:12px / font-weight:700 을 물려받아
 * **미리보기 상자가 가로 한 줄로 눌리고, 아이 카드에는 쓸데없는
 * 테두리·바탕·여백이 붙었습니다.**
 *
 * HTML 은 못 고치는 자리라(PHP 는 읽기 전용) 이름을 바꾸는 대신
 * **태그로 갈랐습니다.** 셋이 마침 다른 태그를 씁니다 —
 *   ① <span>/<button>   ② <div id="chPreview">   ③ <label>
 * 이제 셋은 서로 닿지 않습니다. 보이는 모양은 ①이 원래 노리던 그대로입니다. */
span.ch-pick,button.ch-pick{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;
  margin-top:6px;padding:7px 8px;border-radius:10px;border:1px solid var(--line2);
  background:var(--surface);color:var(--ink2);font-family:inherit;font-size:12px;
  font-weight:700;cursor:pointer;line-height:1}
span.ch-pick i,button.ch-pick i{font-style:normal;font-size:13px;color:var(--muted2)}
button.ch-pick:hover{border-color:var(--orange2);color:var(--orange)}
button.ch-pick:hover i{color:var(--orange)}
span.ch-pick.on,button.ch-pick.on{background:var(--paper2);border-color:var(--orange);color:var(--orange);
  cursor:default}
span.ch-pick.on i,button.ch-pick.on i{color:var(--orange)}
.ch-pick-f{margin:0}

/* kids353 — 한 벌 안에서 그림체가 섞인 판 */
.ch-mix{background:#FFF6E8;border:1px solid var(--orange2);border-radius:12px;
  padding:10px 13px;margin:0 0 10px}
.ch-mix b{display:block;font-size:13px;margin-bottom:3px;color:var(--orange-d)}
.ch-mix span{font-size:12px;line-height:1.7;color:var(--ink2)}

/* kids348 — 캐릭터를 지금 만들고 있나 */
.kd-prog{border:2px solid var(--orange2);background:var(--soft)}
.kd-prog.bad{border-color:#E5484D;background:#FFF5F5}
.kd-prog-hd{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.kd-prog-hd b{font-size:15px}
.kd-prog-hd em{margin-left:auto;font-style:normal;font-size:12.5px;font-weight:700;color:var(--orange)}
.kd-prog p{margin:0 0 8px;font-size:13px;line-height:1.7;color:var(--ink2)}
.kd-prog-bar{height:8px;border-radius:999px;background:var(--line2);overflow:hidden;margin-bottom:9px}
.kd-prog-bar i{display:block;height:100%;background:var(--orange);border-radius:999px;
  transition:width .4s}
.kd-prog-note{font-size:12px;color:var(--muted)}
.kd-prog-warn{font-size:12.5px;color:#C0392B}
.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}
/* ★ kids432 — 이 규칙은 사진 지우기 ✕ 한 개를 위한 것인데, 범위가
   figure 전체(.ch-photo button)였습니다. 사진 **아래**에 있는
   「대표로 하기」 단추(button.ch-pick)까지 같이 맞아서, 테두리·바탕·
   안쪽 여백이 전부 지워졌습니다. 그 결과 옆의 「대표 사진」 표시는
   <span> 이라 테두리 있는 알약인데, 바로 아래 「대표로 하기」는
   맨 글씨로 나와 **같은 줄의 두 칸이 서로 다른 모양**이었습니다.
   ✕ 가 들어 있는 figcaption 안으로 범위를 좁힙니다. */
.ch-photo figcaption button{border:none;background:none;color:var(--muted2);cursor:pointer;font-size:13px;padding:0 2px}
.ch-photo figcaption button:hover{color:#C0392B}
.ch-up{background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-l);
  padding:18px;margin-bottom:30px}
/* ── 아이 화면: 고른 사진 미리보기 · 그리는 중 표시 (kids322·kids323) ── */
/* ★★ kids432 — 이름 겹침 ② (위 kids432 주석 참고).
 * 이 상자는 <div id="chPreview"> 입니다. 위의 대표 사진 단추(span·button)가
 * 쓰던 display:flex·font-size:12px·font-weight:700 을 그대로 물려받아
 * **제목과 사진 줄과 안내문이 가로 한 줄로 눌려 있었습니다.**
 * div 로 갈라 내고, 새어 들어오던 값들을 여기서 분명히 되돌립니다. */
div.ch-pick{display:block;width:auto;font-size:inherit;font-weight:400;
  font-family:inherit;color:inherit;line-height:1.6;cursor:auto;
  margin:12px 0 4px;padding:12px 14px;border:1px solid var(--line2);
  border-radius:var(--r-m);background:var(--soft)}
div.ch-pick>b{display:block;font-size:13.5px;font-weight:700;margin-bottom:8px}
div.ch-pick .mut{display:block;margin-top:8px;font-size:12.5px}
.ch-pick-row{display:flex;flex-wrap:wrap;gap:8px}
.ch-pick-row img{width:74px;height:74px;object-fit:cover;border-radius:10px;
  border:1px solid var(--line2);background:#fff}

.ch-work{display:flex;flex-direction:column;gap:8px;margin:0 0 16px;padding:16px 18px;
  border:1px solid var(--orange2);border-radius:var(--r-m);background:var(--soft)}
.ch-work>b{display:flex;flex-direction:column;gap:3px;font-size:15px}
.ch-work>b em{font-style:normal;font-weight:400;font-size:13px;color:var(--muted)}
.ch-work .mut{font-size:12.5px}
.ch-work.bad{border-color:#e4b4ac;background:#fdf3f1}
.ch-work-dot{width:12px;height:12px;border-radius:50%;background:var(--orange);
  animation:chBlink 1s ease-in-out infinite}
@keyframes chBlink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}
.ch-work-bar{display:block;height:7px;border-radius:999px;background:var(--line2);overflow:hidden}
.ch-work-bar i{display:block;height:100%;border-radius:999px;background:var(--orange);
  transition:width .9s linear}
@media (prefers-reduced-motion:reduce){
  .ch-work-dot{animation:none}
  .ch-work-bar i{transition:none}
}

.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:var(--paper)}
.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}
/* ★★ kids439 — 「정보 고치기」를 접어 둡니다. (사장님 지시 2026-09-20)
   이 화면은 사진·캐릭터·인사영상을 보러 오는 자리이고, 고치는 일은
   가끔입니다. 접힌 줄 하나만 남기고 나머지는 눌러야 펴집니다. */
.ch-edit{margin:26px 0 0;border:1px solid var(--line);border-radius:var(--r-l);
  background:var(--surface,#fff);overflow:hidden}
.ch-edit>summary{cursor:pointer;list-style:none;padding:15px 18px;font-weight:800;
  font-size:15px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ch-edit>summary::-webkit-details-marker{display:none}
.ch-edit>summary::after{content:'▾';margin-left:auto;font-size:13px;color:var(--muted)}
.ch-edit[open]>summary::after{content:'▴'}
.ch-edit>summary span{font-weight:400;font-size:12.5px;color:var(--muted)}
.ch-edit>summary:hover{background:var(--soft)}
.ch-edit>form,.ch-edit>.ch-danger{margin:0 18px 18px}
.ch-edit>form{box-shadow:none}
@media (max-width:640px){
  .ch-edit>summary{padding:13px 14px;font-size:14px}
  .ch-edit>form,.ch-edit>.ch-danger{margin:0 12px 14px}
}

/* ★★ kids443 — 기본 화풍 셋을 한 번에. (사장님 계획 2026-09-20)
     세 칸을 나란히 보여 주고 「새로 그림 / 있음」을 적습니다. */
/* ★ kids579 — 캐릭터 만들기 탭. 처음 만들기와 하나씩 만들기를 가릅니다.
   자바스크립트가 꺼져 있으면 .ch-tabbar 가 hidden 인 채라 예전처럼 둘 다 보입니다. */
/* ★ kids587 — 동화책에서 「나레이션 만들기」로 가는 작은 단추 */
.bk-more{display:inline-block;font-size:12.5px;font-weight:700;white-space:nowrap;
 padding:7px 12px;border-radius:99px;text-decoration:none;
 background:var(--orange2);color:#fff}
.bk-more:hover{filter:brightness(1.06)}
@media(max-width:420px){.bk-more{font-size:12px;padding:6px 10px}}
/* ★ kids602 — 다시 그린 캐릭터 고르기 (my/_charpick.php) · 3가지 한꺼번에 다시 그리기(접힘) */
.cp-wrap{margin:0 0 18px;padding:18px;border:2px solid var(--orange2);border-radius:var(--r-xl,18px);
  background:var(--surface);box-shadow:var(--sh-card)}
.cp-h{display:block;font-size:16px;font-weight:800;color:var(--ink)}
.cp-p{margin:6px 0 14px;font-size:13px;line-height:1.7;color:var(--muted)}
.cp-row{padding:14px 0;border-top:1px solid var(--line)}
.cp-row:first-of-type{border-top:0;padding-top:4px}
.cp-st{display:block;font-size:14px;font-weight:800;margin-bottom:10px;color:var(--ink)}
.cp-pair{display:flex;align-items:center;gap:10px}
.cp-c{flex:1;min-width:0;margin:0;text-align:center}
.cp-c img,.cp-none{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:14px;
  border:2px solid var(--line2);background:var(--soft)}
.cp-none{display:flex;align-items:center;justify-content:center;font-size:28px;color:var(--muted)}
.cp-new img{border-color:var(--orange)}
.cp-c figcaption{margin-top:6px;font-size:12.5px;font-weight:700;color:var(--muted)}
.cp-new figcaption{color:var(--orange)}
.cp-vs{flex:none;font-size:20px;color:var(--muted)}
.cp-btns{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.cp-btns form{flex:1;min-width:140px;margin:0}
.cp-btns button{width:100%}
.ch-tabbar{display:flex;gap:8px;margin:0 0 14px}
.ch-tab{flex:1;min-width:0;cursor:pointer;font:inherit;font-size:14px;font-weight:700;
 padding:11px 10px;border-radius:11px;border:1.5px solid var(--line);
 background:var(--surface);color:var(--muted2);transition:.12s}
.ch-tab:hover{border-color:var(--orange2)}
.ch-tab[aria-selected="true"]{background:var(--orange2);border-color:var(--orange2);color:#fff}
html[data-theme="dark"] .ch-tab[aria-selected="true"]{color:#1B140F}
@media(max-width:420px){.ch-tab{font-size:13px;padding:10px 6px}}
.ch-trio{background:linear-gradient(180deg,var(--soft),var(--paper));border:1.5px solid var(--orange2)}
html[data-theme="dark"] .ch-trio{background:#33241B;border-color:#5A3F2A}
.ch-trio-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}
.ch-trio-c{text-align:center;background:var(--surface);border:1.5px solid var(--line2);
  border-radius:var(--r-l);padding:10px 6px}
.ch-trio-c.on{border-color:var(--orange);background:var(--paper)}
html[data-theme="dark"] .ch-trio-c.on{background:#3A2A1E}
.ch-trio-c img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px;background:var(--soft)}
.ch-trio-c span{display:grid;place-items:center;width:100%;aspect-ratio:1/1;border-radius:10px;
  background:var(--soft);color:var(--muted2);font-size:22px;font-weight:800}
.ch-trio-c b{display:block;margin-top:7px;font-size:13px}
.ch-trio-c em{display:block;font-style:normal;font-size:11.5px;color:var(--muted2)}
.ch-trio-c.on em{color:var(--orange-d);font-weight:700}
@media (max-width:640px){
  .ch-trio-row{gap:7px}
  .ch-trio-c{padding:8px 4px}
  .ch-trio-c b{font-size:12px}
}

/* ★★ kids443 — 사진 찍는 법 안내. (사장님 지시 2026-09-20)
     「사진은 아이 하나당 2장 기본 정면 옆면이고 사진의 가이드 안내가 없다」
     글은 app/views/_photoguide.php 한 곳에서만 적습니다. */
.pg-guide{background:var(--soft);border:1px solid var(--line2);border-radius:var(--r-l);
  padding:18px;margin-bottom:18px}
.pg-guide.fold{padding:0}
.pg-guide.fold > summary{cursor:pointer;list-style:none;padding:13px 16px;font-weight:800;
  font-size:14.5px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.pg-guide.fold > summary::-webkit-details-marker{display:none}
.pg-guide.fold > summary::after{content:'▾';margin-left:auto;font-size:12px;color:var(--muted2)}
.pg-guide.fold[open] > summary::after{content:'▴'}
.pg-guide.fold > summary span{font-weight:400;font-size:12px;color:var(--muted2)}
.pg-guide.fold > .pg-g-two,.pg-guide.fold > .pg-g-foot{margin-inline:16px}
.pg-guide.fold > .pg-g-foot{padding-bottom:14px}
.pg-g-hd{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
.pg-g-hd i{font-size:26px;font-style:normal;line-height:1}
.pg-g-hd b{display:block;font-size:16px;line-height:1.45}
.pg-g-hd p{margin:4px 0 0;font-size:13px;color:var(--muted)}
.pg-g-two{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.pg-g-two > *{min-width:0}
.pg-g-shot{background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-l);
  padding:12px 13px}
.pg-g-no{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--orange);color:var(--on-orange,#fff);font-size:12px;font-weight:800;margin-bottom:7px}
.pg-g-shot b{display:block;font-size:14px}
.pg-g-shot b em{font-style:normal;font-size:11.5px;color:var(--orange-d);margin-left:5px}
/* ★ kids557 — 「올리는 차례가 곧 각도」 한 줄.
   두 칸(pg-g-two) 바로 밑에 붙습니다. 접힌 상태에서는 좌우 여백을
   두 칸과 같게 맞춥니다. 좁은 화면에서도 줄만 늘어납니다. */
.pg-g-order{margin:0 0 10px;padding:9px 12px;border-radius:var(--r-l);
  background:var(--surface);border:1px solid var(--line2);
  font-size:12.5px;line-height:1.6;color:var(--muted)}
.pg-g-order b{color:var(--ink)}
.pg-guide.fold > .pg-g-order{margin-inline:16px}
.pg-g-shot p{margin:4px 0 0;font-size:12.5px;line-height:1.65;color:var(--muted)}
.pg-g-do{background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-l);
  padding:12px 13px}
.pg-g-do>b{display:block;font-size:13.5px;margin-bottom:7px}
.pg-g-do b.ok{color:#22A06B}
.pg-g-do b.no{color:#E5484D}
.pg-g-do ul{margin:0;padding-left:16px}
.pg-g-do li{font-size:12.5px;line-height:1.75;color:var(--ink2)}
.pg-g-foot{margin:0;font-size:12px;line-height:1.7;color:var(--muted)}
@media (max-width:640px){
  .pg-guide{padding:14px}
  .pg-g-two{grid-template-columns:1fr;gap:8px}
}

.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:var(--on-orange,#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:var(--paper)}
.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:var(--on-orange,#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:var(--soft);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}  /* kids634 — 제목 b 만 */
.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:var(--on-orange,#fff);font-style:normal;font-size:12px}
/* ★ kids432 — 84px = 머리띠 69px + 틈 15px. 변수(--stick)로 묶었습니다. */
.st-side{position:sticky;top:var(--stick)}
.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}
/* ★ figure 는 브라우저가 제멋대로 좌우 40px 여백을 줍니다. (kids261)
   이 가게에는 그것을 한 번에 없애는 규칙이 없고 칸마다 따로 적어 두는데,
   여기만 빠져 있었습니다. 넉 칸이 40px 씩 밀려 미리보기가 삐져나갔습니다. */
.lk-prev figure{margin:0}
.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}

/* kids347 — 왜 확정을 못 하는지 그 칸 안에 적습니다 */
.lk-why{display:block;font-size:11.5px;line-height:1.6;color:var(--muted);
  margin:0 0 8px;text-align:left;word-break:keep-all}
.lk-why b{display:inline;font-size:11.5px;color:var(--ink2)}
.lk-why a{color:var(--orange);font-weight:700}
.lk-wait{display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:12px;font-weight:700;color:var(--orange);margin-bottom:6px}
.lk-item form button em{display:block;font-style:normal;font-size:10.5px;
  font-weight:700;color:var(--orange);margin-top:2px}
.lk-item form button{width:100%}

@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:var(--on-orange,#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:var(--paper)}
.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}
/* ★ 두 옆그림의 비율을 못박습니다. (kids274 · 사장님 지적 2026-09-16)
   전에는 그림이 들고 오는 비율 그대로였습니다. 그래서 가로로 긴 그림이
   걸리면 왼쪽 칸만 납작해지고 오른쪽 세로 그림과 따로 놀았습니다.
   잘라서라도 3:2 · 3:4 로 맞추면 무슨 그림이 와도 짜임새가 안 흐트러집니다. */
.vs-img img{width:100%;aspect-ratio:3/2;object-fit:cover;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%;aspect-ratio:3/4;object-fit:cover;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%;height:auto;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:var(--paper);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:var(--paper2);background:color-mix(in srgb,var(--orange) 22%,var(--surface));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:var(--paper2);background:color-mix(in srgb,var(--orange) 22%,var(--surface))}
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))}
.tr-metric{color:color-mix(in srgb,var(--m,var(--muted)) 72%,#000)}   /* kids598 — 갈래 색(주황 등)이 흰 바탕 작은 글자에 2.8:1 — 조금 눌러 씁니다 */
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}
/* ★ kids603 — 어두운 화면에서 첫 화면 가림막이 **흰색 그대로**라 밝아진 제목(우리 아이가·세상에)이 흰 바탕 흰 글자였습니다.
     (GPT 화면 검수 2026-09-27 · 직접 확인) 가림막도 어두운 색으로 — 모양·위치는 그대로 */
html[data-theme="dark"] .hero-veil{background:linear-gradient(90deg,
    rgba(12,20,48,.94) 0%, rgba(12,20,48,.90) 32%,
    rgba(12,20,48,.66) 46%, rgba(12,20,48,.20) 62%,
    rgba(12,20,48,0) 78%)}
@media (max-width:980px){
  html[data-theme="dark"] .hero-veil{background:linear-gradient(180deg,
    rgba(12,20,48,0) 0%, rgba(12,20,48,.10) 34%,
    rgba(12,20,48,.72) 50%, rgba(12,20,48,.96) 62%, rgba(12,20,48,1) 72%)}
}

/* ── 회원 홈 ─────────────────────────────────────────── */
.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:var(--on-orange,#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}
}
/* ★ 석 칸짜리는 class 로 받습니다. (kids261)
   포인트 화면이 style="grid-template-columns:repeat(3,1fr)" 를 태그에
   박아 두었습니다. 태그에 박힌 값은 아래 좁은 화면 규칙보다 세서,
   360px 짜리 휴대폰에서도 석 칸이 그대로 버티며 숫자가 잘렸습니다. */
.mh-stats.mh-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:560px){
  .mh-stats{grid-template-columns:1fr 1fr}
  .mh-stats.mh-3{grid-template-columns:1fr 1fr}
  .mh-stats.mh-3>:last-child{grid-column:1 / -1}
}

/* ── 초등부 상세 ─────────────────────────────────────── */
.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:var(--paper)}
html[data-theme="dark"] .od-add input:checked + .od-add-in{background:var(--paper2);background:color-mix(in srgb,var(--orange) 22%,var(--surface))}
.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:var(--soft);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:var(--paper)}
html[data-theme="dark"] .em-opt input:checked + .em-opt-in{background:var(--paper2);background:color-mix(in srgb,var(--orange) 22%,var(--surface))}
@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:var(--on-orange,#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}
/* 목소리 사용 동의 — 미리 켜지 않습니다 (kids261) */
.mv-agree{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;margin-bottom:14px;
  border:1px solid var(--line2);border-radius:12px;background:#FFF9F2;cursor:pointer}
.mv-agree input{margin-top:3px;flex:none}
.mv-agree b{display:block;font-size:13.5px;color:var(--ink)}
.mv-agree em{display:block;font-style:normal;font-size:12px;color:var(--muted2);
  margin-top:3px;line-height:1.6}

.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}
/* ★ 여권 사진처럼 테두리를 또렷하게. (kids391 · 사장님 지시 2026-09-18)
     바깥을 어둡게 덮어야 저절로 그 안에 얼굴을 넣게 됩니다.
     흐린 점선만으로는 「어디에 맞추라는 건지」 모릅니다. */
.mp-guide span{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  width:62%;aspect-ratio:3/4;border:3px dashed rgba(255,255,255,.92);border-radius:50%/42%;
  box-shadow:0 0 0 100vmax rgba(0,0,0,.5)}
.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}
/* ★ kids432 — 84px 고정을 머리띠 변수 기준(--stick)으로 바꿨습니다. */
.sc-list{position:sticky;top:var(--stick)}
.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:var(--paper)}
html[data-theme="dark"] .sc-item.on{background:var(--paper2);background:color-mix(in srgb,var(--orange) 22%,var(--surface))}
.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:var(--on-orange,#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:var(--on-orange,#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:var(--paper);font-weight:700}
html[data-theme="dark"] .sy-chip input:checked + span{background:var(--paper2);background:color-mix(in srgb,var(--orange) 22%,var(--surface))}
.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:var(--on-orange,#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:var(--paper)}
html[data-theme="dark"] .sy-scene input:checked + .sy-scene-in{background:var(--paper2);background:color-mix(in srgb,var(--orange) 22%,var(--surface))}

/* ── kids484 — 장면 수 칸에 영상 길이·값을 적습니다 ───────────── */
.sy-scene-c{display:block;text-decoration:none;margin-top:9px;padding-top:8px;
  border-top:1px dashed var(--line2);font-size:11.5px;line-height:1.55;color:var(--muted)}
.sy-scene-c s{display:block;text-decoration:none;font-size:11px;color:var(--muted2)}
.sy-scene input:checked + .sy-scene-in .sy-scene-c{color:var(--orange-d)}

/* 자유 칸이 무엇에 쓰이는지 */
.st-freehint{margin:0 0 9px;font-size:13px;line-height:1.7;color:var(--muted);
  background:var(--soft);border-radius:10px;padding:10px 13px}

/* 다른 AI 에게 부탁할 글 */
.st-aiask{margin-top:16px;border:1.5px solid var(--line2);border-radius:var(--r-l);
  padding:14px 15px;background:var(--surface)}
.st-aiask>b{display:block;font-size:14px}
.st-aiask>p{margin:6px 0 10px;font-size:12.5px;color:var(--muted);line-height:1.65}
.st-aiask-tx{width:100%;box-sizing:border-box;border:1px solid var(--line2);border-radius:10px;
  padding:11px 12px;font:12.5px/1.7 inherit;color:var(--muted);background:var(--soft);
  resize:vertical;margin-bottom:10px}
.st-aiask .btn-ghost{width:100%}

/* 직접 쓸 때 지킬 것 */
.st-rules{margin-top:12px;border:1px solid var(--line2);border-radius:12px;background:var(--surface)}
.st-rules>summary{cursor:pointer;padding:11px 14px;font-size:13px;font-weight:700}
.st-rules ul{margin:0;padding:0 18px 14px 32px;font-size:12.5px;color:var(--muted);line-height:1.85}

@media (max-width:560px){
  .sy-scene-c{font-size:11px}
  .st-aiask-tx{font-size:12px}
}
.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}
/* ★★ kids432 — 이름 겹침 ③ (위 kids432 주석 참고).
 * 아이 고르는 카드는 <label class="ch-pick"> 입니다. 위 두 규칙이
 * 먼저 적혀 있어서 **카드마다 테두리·연한 바탕·12px 굵은 글씨·
 * 안쪽 여백 12/14px 이 덧붙어** 있었습니다. 실제 카드 모양은 안쪽의
 * .ch-pick-in 이 그리므로 바깥 label 은 아무 모양도 없어야 합니다.
 * label 로 갈라 내고, 새어 들어온 값들을 여기서 전부 되돌립니다. */
label.ch-pick{display:block;width:auto;margin:0;padding:0;border:0;border-radius:0;
  background:none;font-size:inherit;font-weight:400;font-family:inherit;
  color:inherit;line-height:normal;cursor:pointer}
label.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:var(--paper)}
html[data-theme="dark"] .ch-pick input:checked + .ch-pick-in{background:var(--paper2);background:color-mix(in srgb,var(--orange) 22%,var(--surface))}
.ch-tick{position:absolute;top:7px;right:7px;display:grid;place-items:center;width:22px;height:22px;
  border-radius:50%;background:var(--orange);color:var(--on-orange,#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}
/* ★ 눈에 안 띄었습니다 (kids343 · 사장님 지적 2026-09-17)
 *   회색 점선이라 옆의 아이 카드들에 묻혔습니다. 등록할 아이가 없는
 *   분에게는 이 칸이 **다음으로 가는 유일한 길**인데 안 보였습니다.
 *   주황 점선 + 연한 주황 바탕 + ＋ 를 동그라미에 넣어 키웁니다. */
.ch-add{display:grid;place-content:center;gap:7px;min-height:150px;text-align:center;
  border:2px dashed var(--orange2);border-radius:var(--r-l);background:var(--soft);
  color:var(--orange-d);font-size:13.5px;font-weight:700;
  transition:transform .15s ease, box-shadow .15s ease}
.ch-add:hover{border-color:var(--orange);background:var(--paper2);
  transform:translateY(-2px);box-shadow:0 6px 16px rgba(240,140,60,.18)}
.ch-add span{display:grid;place-content:center;justify-self:center;
  width:42px;height:42px;border-radius:50%;background:var(--orange);color:var(--on-orange,#fff);
  font-size:24px;line-height:1}
html[data-theme="dark"] .ch-add{background:#33241B}
html[data-theme="dark"] .ch-add:hover{background:#3D2A1E}
@media (prefers-reduced-motion:reduce){ .ch-add,.ch-add:hover{transition:none;transform:none} }
/* 「＋ 새 아이 등록하기」가 여기로 내려옵니다 — 머리글에 안 가리게 (kids342) */
/* ★ kids432 — 84px 고정을 머리띠 변수 기준(--stick)으로 바꿨습니다. */
.ch-new{background:var(--soft);border-radius:var(--r-l);padding:16px 18px;scroll-margin-top:var(--stick)}
.ch-new summary{cursor:pointer;font-size:14.5px;font-weight:800;list-style:none;
  color:var(--orange-d);padding:4px 2px}
.ch-new summary:hover{color:var(--orange)}
.ch-new summary::-webkit-details-marker{display:none}
/* 펴져 있을 때는 지금 여기를 쓰고 있다는 게 보이게 */
.ch-new[open]{background:var(--soft);box-shadow:inset 0 0 0 2px var(--orange2)}
html[data-theme="dark"] .ch-new[open]{background:#33241B}
.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:var(--on-orange,#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:var(--on-orange,#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:var(--soft);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:var(--paper2);background:color-mix(in srgb,var(--orange) 22%,var(--surface))}
.rs-where{display:flex;gap:12px;align-items:flex-start;background:var(--soft);
  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:var(--soft);border:1.5px solid var(--orange2)}
html[data-theme="dark"] .pd-step.on{background:var(--paper2);background:color-mix(in srgb,var(--orange) 22%,var(--surface))}
.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:var(--on-orange,#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,var(--soft),var(--paper));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:var(--paper2);background:color-mix(in srgb,var(--orange) 22%,var(--surface))}
.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:var(--paper)}
html[data-theme="dark"] .rmx-set.on{background:var(--paper2);background:color-mix(in srgb,var(--orange) 22%,var(--surface))}
.rmx-set b{display:block;font-size:13.5px}
.rmx-set p b{display:inline;font-size:inherit}  /* kids634 — 설명 문장 속 굵은 글씨는 줄을 끊지 않습니다 */
.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:var(--on-orange,#fff)}
.pt-box{display:flex;align-items:center;gap:18px;background:linear-gradient(135deg,var(--soft),var(--paper));
  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:var(--paper2);background:color-mix(in srgb,var(--orange) 22%,var(--surface))}
.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:var(--paper)}
html[data-theme="dark"] .rt-opt input:checked + .rt-opt-in{background:var(--paper2);background:color-mix(in srgb,var(--orange) 22%,var(--surface))}
.rt-rec{font-style:normal;font-size:11px;background:var(--orange);color:var(--on-orange,#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)}
/* ★★ kids432 — `.qc-*` 이름이 위(:1241 옛 「사진 품질검사」)와 겹쳐
 * 있었습니다. 지금 화면(app/views/make/quality.php)이 쓰는 것은 여기
 * 아래쪽이고, 위쪽은 쓰는 화면이 없습니다. 그래도 먼저 적혀 있어서
 * 여기서 다시 적지 않은 값이 새어 나왔습니다.
 *
 * .qc-pill : 위(:1276)의 margin-left:auto 가 남아 **점수 딱지가
 *            사진 이름 옆이 아니라 줄 오른쪽 끝으로 밀려났습니다.** */
.qc-pill{display:grid;place-items:center;min-width:30px;height:22px;border-radius:999px;
  font-size:12px;font-weight:700;padding:0 7px;margin-left:0}
.qc-pill.good{background:#EEF9EA;color:#3B7A2A}
.qc-pill.ok{background:var(--soft);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)}
/* ★ kids432 — 위(:1244)의 옛 .qc-crown 이 color:var(--orange-d) 를
   남겼습니다. 바탕은 여기서 **늘 흰색**으로 고정인데 글자색만 토큰이라,
   밤 모드에서 --orange-d 가 연한 살구색(#FFD3A3)으로 바뀌어 흰 알약 위
   흰 글씨가 됐습니다 — 「👑 대표」가 안 보였습니다. 낮 모드에서 보이던
   그 색(#C9640D)을 고정값으로 못 박아 밤에도 같게 보이게 합니다. */
.qc-crown{position:absolute;left:6px;top:6px;font-style:normal;background:rgba(255,255,255,.93);
  /* kids594 — 밤에도 같게 보이라고 박아 둔 값입니다. 브랜드 색을 따르되
     밝은 화면 기준으로 고정합니다 — 어두운 화면 규칙이 따로 있습니다. */
  border-radius:7px;padding:2px 8px;font-size:10.5px;font-weight:700;color:#2A6FA8}
.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}
/* ★ kids432 — 위(:1251)의 옛 .qc-bar i 가 주황 그라데이션 바탕을
   남겼습니다. 지금 막대는 칸마다 색을 style="" 로 직접 넣으므로
   평소에는 안 보이지만, 색이 비면 엉뚱한 주황 막대가 나왔습니다.
   기본값을 지워 「색을 안 주면 아무것도 안 칠한다」로 되돌립니다. */
.qc-bar i{display:block;height:100%;border-radius:999px;transition:width .5s;background:none}
.qc-m b{width:36px;text-align:right;flex:none;font-variant-numeric:tabular-nums}
.qc-warn{margin-top:14px;background:var(--soft);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)}
/* ★ kids432 — 위(:1265)의 옛 .qc-tips 에서 크림색 바탕·둥근 모서리·
   안쪽 여백 14/16px 이 새어 들어왔습니다. 요령 4칸은 격자일 뿐인데
   **격자 전체에 크림 상자가 덧씌워져** 바깥 .ct-tip 상자와 이중으로
   보였습니다. 바탕과 여백을 지웁니다. */
.qc-tips{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-top:12px;
  background:none;border-radius:0;padding:0}
.qc-tips div{text-align:center}
.qc-tips i{display:block;font-style:normal;font-size:22px;margin-bottom:5px}
/* ★ kids432 — 옛 .qc-tips b 의 margin-bottom:7px 이 남아 제목 아래만
   벌어져 있었습니다. */
.qc-tips b{display:block;font-size:12.5px;margin-bottom:0}
.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:var(--on-orange,#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}
/* ★★ kids432 — `.og-*` 이름이 위(:1199 「원작 동화 목록」 옛 규칙)와
 * 겹쳐 있었습니다. 지금 화면(app/views/pages/originals.php)이 쓰는 것은
 * **여기 아래쪽 규칙**이고, 위쪽 규칙은 쓰는 화면이 없습니다.
 * 그런데 위쪽이 먼저 적혀 있어서, 여기서 다시 적지 않은 값들이
 * 그대로 새어 나왔습니다. 새는 값을 하나하나 되돌립니다.
 *
 * .og-search : 위에서 알약 모양 테두리·바탕·안쪽 여백이 새어 들어와
 *              **알약 안에 알약이 또 든 모양**이 됐습니다. */
.og-search{display:flex;gap:8px;margin:14px 0 20px;align-items:center;
  background:none;border:0;border-radius:0;padding:0}
.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);outline:revert}
.og-search button{border:none;border-radius:var(--r-pill);padding:10px 20px;cursor:pointer;
  background:var(--orange);color:var(--on-orange,#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)}
/* ★ kids432 — 위(:1211)의 옛 .og-cover 에서 테두리 2.5px·모서리 둥글기·
   그림자·바탕이 새어 들어왔습니다. 카드(.og-book)가 이미 테두리와
   둥근 모서리를 그리고 있어 **표지에 테두리가 두 겹**으로 보였습니다. */
.og-cover{position:relative;display:block;border:0;border-radius:0;
  box-shadow:none;aspect-ratio:auto;overflow:visible;
  /* 그림이 늦게 뜨는 동안 칸이 비어 보이지 않게 연한 바탕만 남깁니다.
     (위에서 새어 오던 값이지만 이건 쓸모가 있어 일부러 다시 적습니다) */
  background:var(--soft)}
.og-cover img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
/* ★★ kids432 — 사장님이 보신 「딱지가 주황 동그라미로 찌그러진」 자리.
 *
 * 갈래 딱지는 <i class="og-cat"> 인데, 이 <i> 는 .og-cover 안에 있습니다.
 * 위(:1216)에 `.og-cover i{ …24px 동그라미 주황 바탕… }` 이 있고,
 * 그 규칙의 세기(0,1,1)가 `.og-cat`(0,1,0)보다 **셉니다.** 그래서 뒤에
 * 적힌 검은 알약 딱지가 지고, 글자가 24×24 주황 원 안에 갇혀
 * 찌그러졌습니다. 세기를 맞추려고 `.og-cover` 를 앞에 붙여 이깁니다
 * (0,2,0). 새어 들어온 크기·격자 값도 함께 되돌립니다. */
.og-cover .og-cat,.og-cat{position:absolute;left:8px;top:8px;right:auto;font-style:normal;
  display:inline-block;width:auto;height:auto;place-items: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}
/* ★ kids432 — 위(:1229)의 옛 .og-meta 가 flex-direction:column 과
   윗줄 테두리(border-top)·위 여백을 남겨 놨습니다. 여기서 그 둘을 다시
   적지 않아 **정보 줄이 가로로 안 붙고 세로로 쌓이며, 위에 줄이 하나
   그어져** 있었습니다. 가로 배열로 되돌리고 줄을 지웁니다. */
.og-meta{display:flex;flex-direction:row;gap:9px;flex-wrap:wrap;font-size:11.5px;
  color:var(--muted2);margin-bottom:12px;border-top:0;padding-top:0}
.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:var(--paper)}
html[data-theme="dark"] .od-plan input:checked + .od-plan-in{background:var(--paper2);background:color-mix(in srgb,var(--orange) 22%,var(--surface))}
.od-badge{position:absolute;left:50%;top:-11px;transform:translateX(-50%);font-style:normal;
  background:var(--orange);color:var(--on-orange,#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:var(--on-orange,#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:var(--on-orange,#fff);font-weight:700;
  padding:7px 14px}
/* 다른 아이로 다시 만들기 — 완성작 칸 아래 한 줄 (kids359) */
.mb-again{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line2)}
.mb-again button{width:100%;background:var(--soft);border:1.5px solid var(--line2);
  border-radius:var(--r-pill);padding:8px 12px;font-size:12.5px;font-weight:700;
  color:var(--ink2);cursor:pointer;transition:.18s}
.mb-again button:hover{border-color:var(--orange2);color:var(--orange-d);background:var(--paper2)}
.mb-again em{display:block;margin-top:5px;font-style:normal;font-size:11px;
  color:var(--muted2);line-height:1.5}
@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,var(--soft),var(--paper));
  border:1.5px solid var(--orange2);border-radius:var(--r-xl);padding:20px 22px;margin-bottom:22px}
html[data-theme="dark"] .sh-from{background:var(--paper2);background:color-mix(in srgb,var(--orange) 22%,var(--surface))}
.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:var(--paper)}
html[data-theme="dark"] .ph-ang.must{background:var(--paper2);background:color-mix(in srgb,var(--orange) 22%,var(--surface))}
.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:var(--soft)}
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:var(--paper)}
html[data-theme="dark"] .vd-mode input:checked + .vd-mode-in{background:var(--paper2);background:color-mix(in srgb,var(--orange) 22%,var(--surface))}
.vd-badge{position:absolute;left:50%;top:-11px;transform:translateX(-50%);font-style:normal;
  background:var(--orange);color:var(--on-orange,#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} }
/* 옛 이름 표시(이름 위에 「마이페이지」 두 줄)는 kids164 에서 이름 칩으로
   바뀌었습니다. flex-direction:column 이 남아 있어 새 칩의 동그라미와
   이름이 위아래로 쌓였습니다. 아래쪽 .hd-me 한 벌만 씁니다. */
/* 화풍 견본 그림이 아직 없을 때 */
.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:var(--paper)}
html[data-theme="dark"] .mk-kids .mk-kid input:checked + .mk-kid-in{background:var(--paper2);background:color-mix(in srgb,var(--orange) 22%,var(--surface))}
@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:var(--on-orange,#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:var(--on-orange,#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:var(--paper)}
html[data-theme="dark"] .vo input:checked + .vo-in{background:var(--paper2);background:color-mix(in srgb,var(--orange) 22%,var(--surface))}
.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:var(--on-orange,#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}

/* ★ 이름을 .rvc-list 로 갈랐습니다. (kids267)
   후기 화면(/reviews)이 쓰는 .rv-list 와 이름이 같았고, 이 줄이 뒤에 있어
   이겼습니다. 그래서 후기 칸 사이 gap:16px 이 사라져 **카드가 서로 붙어**
   있었습니다. .lk-img · .vc-rec · .sb-row 와 같은 병입니다. */
.rvc-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:var(--on-orange,#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:var(--paper);border:1.5px solid var(--orange2);border-radius:16px;
  padding:20px 22px;margin:18px 0}
html[data-theme="dark"] .rv-agree{background:var(--paper2);background:color-mix(in srgb,var(--orange) 22%,var(--surface))}
.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}
html[data-theme="dark"] .ac-quit>summary{color:#FF9A9A}   /* kids602 — 어두운 빨강 바탕에 빨강 글자 2.3:1 */
.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:var(--paper);
  border:1.5px solid var(--orange2);border-radius:14px;padding:15px 18px;margin-bottom:16px}
html[data-theme="dark"] .fx-work{background:var(--paper2);background:color-mix(in srgb,var(--orange) 22%,var(--surface))}
.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);
  /* ★ kids432 — 머리띠 변수 기준으로 (전 80px 고정). */
  scroll-margin-top:calc(var(--hd-h) + 11px)}
.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:var(--on-orange,#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:var(--on-orange,#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(--soft,#FFF6EE);border:1.5px solid var(--orange2);
  border-radius:16px;padding:20px 24px}
html[data-theme="dark"] .sr-book{background:var(--paper2);background:color-mix(in srgb,var(--orange) 22%,var(--surface))}
.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;
  /* kids594 — 박아 둔 주황을 토큰으로 (브랜드마다 따라갑니다) */
  background:linear-gradient(90deg,var(--orange2),var(--orange))}

/* ── 미리보기 ────────────────────────────────────────── */
.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:var(--paper);border:1.5px solid var(--orange2);border-radius:14px;padding:16px 18px}
html[data-theme="dark"] .pv-tip{background:var(--paper2);background:color-mix(in srgb,var(--orange) 22%,var(--surface))}
.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:var(--on-orange,#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;flex-wrap:wrap}
  .sr-act .btn-ghost{flex:1}
  .sr-again{flex:1 1 100%}
  .sr-again button{width:100%}
  .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%}
}
/* 만든 부를 다른 아이로 다시 (kids360) */
.sr-again button{background:none;border:1.5px dashed var(--line2);border-radius:var(--r-pill);
  padding:5px 11px;font-size:12px;font-weight:700;color:var(--muted);
  cursor:pointer;white-space:nowrap;transition:.18s}
.sr-again button:hover{border-style:solid;border-color:var(--orange2);color:var(--orange-d)}
.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:var(--on-orange,#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:var(--paper);border:1.5px solid var(--orange2);border-radius:15px;padding:18px 22px}
html[data-theme="dark"] .sr-bundle{background:var(--paper2);background:color-mix(in srgb,var(--orange) 22%,var(--surface))}
.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}
/* ★ kids435 — 「부마다 따로 결제합니다」 한 줄. 띠가 가로로 눕는 배치라
     이 줄만 아래로 통째 내려 붙입니다(flex-basis:100%). */
.sr-onebyone{flex:1 1 100%;order:9;margin:10px 0 0;font-size:12.5px;line-height:1.65;
  color:var(--ink2)}
.sr-onebyone b{font-size:inherit}

/* ── 책으로 묶기 ─────────────────────────────────────── */
.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)}
/* ★ 메뉴가 일곱이라 1400px 에서도 넘칩니다. (kids291 · 사장님 화면 2026-09-16)
 *
 * 「무료 동화책」과 「완성작 먼저보기」, 「책으로 주문」이 서로 포개져
 * 글자가 뭉개져 나왔습니다. kids252·255·256 에서 윗줄로 꺼낸 메뉴가
 * 늘면서 폭이 모자라졌는데, 좁아지는 규칙이 1180px 부터라 그 사이
 * (1180~1500px)가 비어 있었습니다. 데스크톱 대부분이 그 폭입니다.
 *
 * 줄이는 자리를 앞당기고, 그래도 모자라면 이름을 줄바꿈 없이 흐르게
 * 두는 대신 **겹치지 않게** 넘침을 막습니다. 메뉴를 빼지 않습니다. */
/* ★★ 여기 남아 있던 overflow:hidden 이 펼침 메뉴를 다 잡아먹었습니다.
 *    (kids314 · 사장님 확인 2026-09-16 — 「헤드가 날아갔네 펼침 메뉴가
 *     하나도 없네」)
 *
 * kids313 에서 지웠다고 했는데 지운 것은 kids303 이 넣은 다른 줄이었고,
 * kids291 이 넣은 **이 줄**이 그대로 남아 있었습니다. 1500px 이하면
 * 걸리므로 1366·1440 짜리 보통 화면이 전부 여기 들어옵니다. 펼침 메뉴는
 * 메뉴 줄 **아래**로 열리는데, 그 줄에 넘침을 막아 두면 열려도 안
 * 보입니다 — 화면에는 「메뉴가 아예 없는」 것으로 보입니다.
 *
 * 글자가 겹치던 것은 넘침을 가려서가 아니라 **자리를 만들어** 막습니다.
 * 좁히는 차례를 앞당기고, 나이 띠(hd-cross)를 먼저 접습니다.
 * 메뉴는 하나도 안 뺍니다. */
@media(max-width:1500px){
  .hd-in{gap:14px}
  .hd-nav{gap:0;font-size:13.5px;min-width:0}
  .hd-nav>a,.hd-item>a{padding:9px 7px}
  .hd-cross{display:none}
}
@media(max-width:1320px){
  .hd-nav{font-size:13px}
  .hd-nav>a,.hd-item>a{padding:9px 6px}
}
@media(max-width:1180px){
  .hd-in{gap:14px}
  .hd-nav{gap:0;font-size:13px}
  .hd-nav>a,.hd-item>a{padding:9px 6px}
  .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}
/* ★ kids602 — 만들기 사진 단계의 「캐릭터가 준비됐어요」 카드도 class 가 sv 라(.wz-card.sv) 바로 위
     뜬다스토리 구역 규칙이 좌우 여백을 0 으로 덮었습니다(GPT 실화면 — 이름·단추가 테두리에 붙음).
     카드는 카드 여백으로 되돌립니다. 밝은·어두운 화면 둘 다였습니다. */
.wz-card.sv{padding:26px 24px}
@media (max-width:760px){.wz-card.sv{padding:20px 16px}}

/* ── 단계 ─────────────────────────────────────────── */
.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:var(--on-orange,#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:var(--on-orange,#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:var(--paper)}
html[data-theme="dark"] .sv-add:hover{background:var(--paper2);background:color-mix(in srgb,var(--orange) 22%,var(--surface))}
.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:var(--on-orange,#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:var(--paper);border-radius:14px;padding:16px 18px}
html[data-theme="dark"] .sv-again{background:var(--paper2);background:color-mix(in srgb,var(--orange) 22%,var(--surface))}
.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)}
/* ★ kids432 — 84px 고정을 머리띠 변수 기준(--stick)으로 바꿨습니다. */
.sv-box.sticky{position:sticky;top:var(--stick)}
.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:var(--paper);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:var(--paper2);background:color-mix(in srgb,var(--orange) 22%,var(--surface))}
.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:var(--paper);border-radius:16px;padding:20px 22px}
html[data-theme="dark"] .sv-tip{background:var(--paper2);background:color-mix(in srgb,var(--orange) 22%,var(--surface))}
.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:var(--paper)}
html[data-theme="dark"] .sv-pick.on{background:var(--paper2);background:color-mix(in srgb,var(--orange) 22%,var(--surface))}
.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}
/* 공유 링크 — 30일짜리 (kids334) */
.sv-sharelink{margin:-8px 0 18px;font-size:13px;color:var(--muted);line-height:1.7}
.sv-shurl{width:100%;margin-top:7px;padding:11px 13px;font-size:13px;font-family:inherit;
  border:1.5px solid var(--line2);border-radius:11px;background:var(--soft);color:var(--ink)}
.sv-shurl:focus{outline:none;border-color:var(--orange2);background:var(--paper)}
.sv-praise{display:flex;align-items:center;gap:16px;position:relative;
  background:var(--paper);border-radius:18px;padding:22px 26px;margin-bottom:18px}
html[data-theme="dark"] .sv-praise{background:var(--paper2);background:color-mix(in srgb,var(--orange) 22%,var(--surface))}
.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:var(--paper);border-radius:20px;
  padding:32px 36px;margin-top:22px;flex-wrap:wrap}
html[data-theme="dark"] .sv-last{background:var(--paper2);background:color-mix(in srgb,var(--orange) 22%,var(--surface))}
.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:var(--paper)}
.pv-node.doing i{background:var(--orange);color:var(--on-orange,#fff);animation:bzspin 1.4s linear infinite}
html[data-theme="dark"] .pv-node.doing{background:var(--paper2);background:color-mix(in srgb,var(--orange) 22%,var(--surface))}
.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)}

/* ★★ kids432 — 921~980px 에서 **메뉴가 통째로 사라지던 자리.**
 *
 * 가로 메뉴(.hd-nav)는 980px 부터 접히는데(:422), 햄버거는 920px 부터
 * 나타났습니다. 그 사이 60px 구간에서는 **메뉴도 햄버거도 없어**
 * 첫 화면 말고는 갈 수 있는 곳이 없었습니다. 밤낮 전환 단추도
 * 980px 에서 숨는데(:3712) 대신 서랍 안에 있으니 같은 구간에서
 * 함께 사라졌습니다.
 *
 * 아래 920px 덩어리는 이름 칩·로그인 단추까지 같이 숨기므로 그대로
 * 두고, **햄버거만 980px 부터 보이게** 한 줄 먼저 깝니다.
 * 이제 메뉴가 접히는 순간 곧바로 햄버거가 대신합니다. */
@media(max-width:980px){
  .hd-burger{display:flex}
}
@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,
  .hd-act .hd-mewrap{display:none}   /* 이름 칩은 서랍 메뉴가 대신합니다 (kids164) */
  .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,var(--soft),var(--line2))}
html[data-theme="dark"] .sv-hero{background:var(--paper2);background:color-mix(in srgb,var(--orange) 22%,var(--surface))}
.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,var(--paper2) 55%,transparent);
  background:linear-gradient(90deg,color-mix(in srgb,var(--paper2) 96%,transparent) 55%, transparent)}   /* kids598 — 옛 보라 → 브랜드 색 */
.sv-hero-tag{display:block;font-size:12.5px;font-weight:800;letter-spacing:.2em;
  color:var(--orange-d);margin-bottom:10px}   /* kids598 — 연한 강조색은 작은 글자에 2.0:1 이었습니다 */
.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)}
/* ★ kids598 — 손글씨 쪽지가 제목 첫 줄(「어떤 이야기를」)과 영문 꼬리표를 덮고 있었습니다.
     글 칸 오른쪽 아래 빈자리로 옮깁니다. (라이브 화면 점검 2026-09-27) */
.sv-memo.hero{position:absolute;left:auto;right:28px;top:auto;bottom:20px}
/* ★ kids604 — 글을 오른쪽에 둔 히어로(뜬다스토리 로그인)도 사진이 오른쪽에 깔려 **글이 사진 위에 얹히고 왼쪽 절반이 비어** 있었습니다.
     쪽지(상상하는 모든 이야기가…)도 사진 밝은 곳에 겹쳐 안 읽혔습니다. (GPT 화면 검수 · PC 화면 직접 확인)
     글이 오른쪽이면 사진은 왼쪽, 가림막도 반대 방향으로 — 860px 이하는 원래대로(사진 전체 옅게) */
@media(min-width:861px){
  .sv-hero.has-img.img-left .sv-hero-img{right:auto;left:0}   /* :has() 대신 클래스 — 옛 사파리·크롬에서도 (교차검수 GPT) */
  .sv-hero.has-img .sv-hero-in.right{background:linear-gradient(270deg,rgba(255,243,230,.96) 55%,rgba(255,243,230,0))}
  html[data-theme="dark"] .sv-hero.has-img .sv-hero-in.right{background:linear-gradient(270deg,color-mix(in srgb,var(--paper2) 96%,transparent) 55%,transparent)}
  .sv-hero-in.right .sv-memo{top:8px;right:24px}   /* 윗줄이 둥근 모서리에 잘리던 것 */
}
@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:var(--paper);border-radius:20px;
  padding:30px 34px;margin-top:20px}
html[data-theme="dark"] .sv-quote-box{background:var(--paper2);background:color-mix(in srgb,var(--orange) 22%,var(--surface))}

/* ── 상세 ─────────────────────────────────────────────── */
.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:var(--paper);border-radius:22px;
  padding:34px 38px;margin-top:26px;flex-wrap:wrap}
html[data-theme="dark"] .sv-bottom{background:var(--paper2);background:color-mix(in srgb,var(--orange) 22%,var(--surface))}
.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:var(--on-orange,#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:var(--paper);border-radius:18px;
  padding:22px 26px;margin-top:18px}
html[data-theme="dark"] .sv-what{background:var(--paper2);background:color-mix(in srgb,var(--orange) 22%,var(--surface))}
.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:var(--on-orange,#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;
  /* ★ kids432 — 84px 고정을 머리띠 변수 기준(--stick)으로 바꿨습니다. */
  padding:12px;box-shadow:var(--sh);position:sticky;top:var(--stick)}
.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:var(--on-orange,#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)}
/* ★ kids606 — 휴대폰에서 「내 작품 보관함」이 한 글자 줄로 찌그러지고 검색칸이 화면 밖으로 나갔습니다(로컬 390px 기능 점검).
     제목 줄을 감싸게 하고, 좁으면 검색칸을 아래 줄 전체 폭으로 */
.sv-ttl{flex-wrap:wrap}
.sv-ttl>div{flex:1 1 auto;min-width:0}
@media(max-width:560px){
  .sv-ttl .sv-search{flex:1 1 100%}
  .sv-ttl .sv-search input{min-width:0;width:100%}
}
.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:var(--on-orange,#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:var(--on-orange,#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:var(--on-orange,#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:var(--paper)}
html[data-theme="dark"] .sv-cats a.on{background:var(--paper2);background:color-mix(in srgb,var(--orange) 22%,var(--surface))}
.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:var(--paper);border-radius:14px;padding:20px;text-align:center;margin-bottom:12px}
html[data-theme="dark"] .sv-cc{background:var(--paper2);background:color-mix(in srgb,var(--orange) 22%,var(--surface))}
.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)}
/* ★ kids432 — 간편 로그인 단추가 4칸으로 되어 있었습니다.
   실제로 나오는 것은 네이버·카카오·구글 **셋**뿐이라(StoryFill.php),
   넷째 칸이 늘 비어 단추들이 줄의 4분의 3만 채우고 오른쪽이 휑했습니다.
   셋으로 맞춥니다. 폰에서는 세 칸이 좁아지므로 안쪽 여백만 줄입니다 —
   줄을 나누면 혼자 남는 단추가 생기므로 세 칸은 그대로 둡니다. */
.sv-socials{display:grid;grid-template-columns:repeat(3,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)}
@media(max-width:420px){
  .sv-socials{gap:6px}
  .sv-social{padding:14px 4px;font-size:12px}
}
.sv-social:hover{border-color:var(--orange2)}
.sv-social.off{opacity:.4;pointer-events:none}
.sv-join-box{margin-top:22px;background:var(--paper);border-radius:16px;padding:22px;text-align:center}
html[data-theme="dark"] .sv-join-box{background:var(--soft)}   /* kids598 — 옛 보라 바탕이 민트 사이트에 남아 있었습니다 */
.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} }
/* ★ kids598 — 휴대폰에서 로그인·가입 카드가 화면 오른쪽으로 삐져나가 「비밀번호 찾기」·
     「로그인하기」·동의 글줄이 잘렸습니다(390px 폭에서 496px). 격자 칸과 입력칸이 제 글자
     폭보다 작아지지 못해서입니다(min-width:auto). 줄어들 수 있게 하고 폰 여백을 줄입니다. */
.sv-auth>*{min-width:0}
.sv-in input{min-width:0;width:100%}
.sv-agree{flex-wrap:wrap}
.sv-agree span,.sv-agree label{min-width:0}
@media(max-width:480px){ .sv-acard{padding:22px 18px} }

/* ── 제작 중 ──────────────────────────────────────────── */
.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;
  /* kids594 — 박아 둔 주황을 토큰으로 */
  background:linear-gradient(90deg,var(--orange2),var(--orange));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:var(--paper);
  border-radius:14px;padding:18px 20px}
html[data-theme="dark"] .sv-mk-say{background:var(--paper2);background:color-mix(in srgb,var(--orange) 22%,var(--surface))}
.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,var(--line2),var(--soft))}
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,var(--line2),var(--soft))}   /* kids598 — 옛 보라 → 브랜드 색 */
.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,var(--soft),var(--line2));overflow:hidden}
html[data-theme="dark"] .lp-hero{background:var(--paper2);background:color-mix(in srgb,var(--orange) 22%,var(--surface))}
.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:var(--on-orange,#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,var(--soft),var(--line2))}
html[data-theme="dark"] .lp-last{background:var(--paper2);background:color-mix(in srgb,var(--orange) 22%,var(--surface))}
.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)}
/* ★ kids604 — 어두운 화면에서 ♡ 가 흰 동그라미 위 밝은 회색(대비 2.1)이라 안 보였습니다. 바탕은 늘 흰색이니 글자도 밝을 때 색 그대로 (390px 전수 검사) */
html[data-theme="dark"] .og-like button,html[data-theme="dark"] a.og-like{color:#4A6787}
html[data-theme="dark"] .og-like.on button,html[data-theme="dark"] .og-like button:hover,html[data-theme="dark"] a.og-like:hover{color:var(--pink)}

.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}

.lq-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
.lq-card{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-m);overflow:hidden;box-shadow:var(--sh-card)}
.lq-img{display:block;aspect-ratio:3/2;background:var(--soft);
  display:flex;align-items:center;justify-content:center}
.lq-img img{width:100%;height:100%;object-fit:cover}
.lq-noimg{font-size:34px;opacity:.5}
.lq-body{padding:12px 13px 14px}
.lq-body b{display:block;font-size:15px;color:var(--ink);margin-bottom:4px;
  word-break:keep-all;line-height:1.4}
.lq-body small{display:block;font-size:12.5px;color:var(--muted);line-height:1.5}
.lq-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}
.lq-off{position:absolute;top:9px;right:9px;margin:0}
.lq-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){
  .lq-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:var(--paper)}
.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}
/* 깎아 드리는 줄 — 눈에 보여야 「깎았구나」 합니다 (kids262) */
.ord-line.cut > span,.ord-line.cut > b{color:#2F7A1E}
.ord-line.cut > b{font-weight:800}
.ord-line.cut em{color:#57945F}
/* 아직 못 받는 묶음 할인 — 안내 글이라 길어서 줄을 바꿔야 합니다.
   (kids550) 위의 .ord-line em 은 nowrap 이라 휴대폰에서 넘칩니다. */
.ord-line.wait > span,.ord-line.wait > b{color:var(--muted)}
.ord-line.wait em{display:block;margin-left:0;margin-top:3px;white-space:normal;
  line-height:1.45}
.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}
/* 토큰 옆 한화 — 「토큰이 한화로 얼마인지 모르겠다」 (kids329) */
.ord-krw{display:block;margin-top:2px;font-family:var(--font-ko);font-size:13px;
  font-weight:600;color:var(--muted);text-align:right}
.rv-bal .ord-krw{display:inline;margin:0 0 0 5px;font-size:12px}

/* ── 결제: 가지고 계신 토큰 ────────────────────────── */
.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}        /* 오른쪽은 절대 줄지 않습니다 */

/* ★★ 1320px 위에서 다시 넘치던 까닭 (kids162 · 2026-09-13)
 *
 * 아래 규칙에 max-width:1320px 이 붙어 있었습니다. 그래서 화면이 넓어지면
 * 줄이기가 꺼졌습니다 — 그런데 머리글은 .shell 안에 있고 .shell 은
 * max-width:1240px 입니다. 양옆 여백 20px 을 빼면 안쪽은 1,200px 입니다.
 *
 * 즉 화면이 1280px 이든 2560px 이든 머리글이 쓸 수 있는 폭은 똑같이
 * 1,200px 입니다. 넓어져도 자리는 한 치도 안 늘어납니다. 그런데 딱
 * 1320px 에서 줄이기만 꺼지니, 넓은 화면에서 오히려 메뉴가 오른쪽
 * 단추들을 밀어냈습니다. 1440px 에서 103px 이 밖으로 나갔습니다.
 *
 * 위 한계를 없앱니다. 981px 부터는 폭이 어떻든 같은 줄이기를 씁니다.
 * 뜬다스토리 메뉴가 다섯으로 늘어난 뒤(kids159) 특히 빠듯합니다. */
@media (min-width:981px){
  .hd-in{gap:12px}
  .hd-nav{gap:0;font-size:13.5px}
  .hd-nav>a,.hd-item>a{padding:8px 8px}
  .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}


/* 장면을 견본 그대로 만들지, 새로 그릴지 고르는 칸 (kids157) */
.sb-pick{margin-top:16px;padding-top:14px;border-top:1px solid var(--line2)}
.sb-pick .st-h{display:block;margin-bottom:10px}
/* ★ 이름이 같은 칸이 둘입니다. (kids300 · 사장님 지적 2026-09-16 「글이 깨져있지」)
   뜬다스토리 요금 칸(.sb-opts .sb-opt)이 가운데 정렬이라, 만들기 화면의
   「미리보기 그대로 만들기」 글까지 가운데로 끌려가 깨져 보였습니다. */
.sb-pick .sb-opt{text-align:left}
.sb-pick .sb-opt > span{flex:1 1 auto;min-width:0}
.sb-opt{display:flex;gap:10px;align-items:flex-start;padding:13px 14px;margin-top:8px;
  border:1px solid var(--line2);border-radius:var(--r-l);background:var(--surface);cursor:pointer}
.sb-opt.on,.sb-opt:has(input:checked){border-color:var(--orange);background:var(--soft)}
.sb-opt input{margin-top:3px;flex:none;accent-color:var(--orange)}
.sb-opt b{display:block;font-size:14.5px;font-weight:700}
.sb-opt i{display:block;font-style:normal;font-size:12.5px;color:var(--muted);
  line-height:1.65;margin-top:3px;word-break:keep-all}
@media(max-width:560px){.sb-opt{padding:11px 12px}.sb-opt b{font-size:13.5px}.sb-opt i{font-size:12px}}

/* 화풍 칸에 「얼굴 그대로 / 얼굴은 느낌만」 (kids157) */
.mk-style-f{display:block;font-style:normal;font-size:11px;font-weight:700;
  margin:2px 12px 0;color:var(--muted2)}
.mk-style-f.on{color:#0a7d43}
/* 아직 견본을 못 그린 화풍 (kids300) */
.mk-style-soon{display:block;font-style:normal;font-size:11px;font-weight:600;
  margin:3px 12px 0;color:var(--muted2)}
@media(max-width:560px){.mk-style-f{font-size:10px;margin:2px 6px 0}}

/* 뜬다스토리 첫 화면 — 시안 맞추기 (kids159)
   ① 제작 사례 분류 칩   ② 토큰 표는 접어 두기 */
.lp-chips{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.lp-chips a{font-size:13px;font-weight:600;padding:7px 14px;border-radius:var(--r-pill);
  background:var(--surface);border:1px solid var(--line2);color:var(--muted);white-space:nowrap}
.lp-chips a:hover{border-color:var(--orange2);color:var(--orange)}
.lp-chips a.on{background:var(--orange);border-color:transparent;color:var(--on-orange,#fff)}
details.tkt > summary.tkt__h{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;
  font-size:14px;font-weight:700;color:var(--ink2);padding:11px 18px;border-radius:var(--r-pill);
  border:1px solid var(--line2);background:var(--surface)}
details.tkt > summary.tkt__h::-webkit-details-marker{display:none}
details.tkt > summary.tkt__h::after{content:"▾";color:var(--orange);font-size:12px}
details.tkt[open] > summary.tkt__h::after{content:"▴"}
details.tkt > summary.tkt__h:hover{border-color:var(--orange2);color:var(--orange)}
@media(max-width:560px){.lp-chips{gap:6px}.lp-chips a{font-size:12px;padding:6px 11px}}

/* ── QR 칸 — 「내 폰으로 보면 QR 을 못 찍는다」 (kids163 · 2026-09-13) ──
   손님이 PC 로 보면 휴대폰으로 QR 을 찍으면 됩니다. 그런데 처음부터
   휴대폰으로 들어오신 분은 자기 화면을 자기 카메라로 찍을 수가 없습니다.
   그대로 막힙니다.
   그래서 QR 아래에 그냥 눌러 들어가는 단추를 답니다. 그래도 QR 로
   하시려는 분을 위해 캡처 → 사진첩 → 인식 순서를 접어서 둡니다. */
.qr-box{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
.mk-qrimg{width:180px;height:180px;image-rendering:pixelated;border-radius:10px;
  background:#fff;padding:6px;border:1px solid var(--line2)}
.qr-how{margin:0;font-size:13.5px;color:var(--muted);text-align:center}
.qr-go{width:100%;text-align:center;padding:13px 16px;font-size:15px}
.qr-help{width:100%;border:1px solid var(--line2);border-radius:12px;
  background:var(--soft);overflow:hidden}
.qr-help>summary{cursor:pointer;list-style:none;padding:11px 14px;
  font-size:13px;font-weight:600;color:var(--ink2)}
.qr-help>summary::-webkit-details-marker{display:none}
.qr-help>summary::after{content:'⌄';float:right;opacity:.6}
.qr-help[open]>summary::after{content:'⌃'}
.qr-help ol{margin:0;padding:0 16px 12px 32px;font-size:12.5px;line-height:1.85;color:var(--ink2)}
.qr-help li{margin-bottom:4px}
.qr-help p{margin:0;padding:0 14px 12px;font-size:12px}
.qr-dim{color:var(--muted2);font-size:12px}

/* 휴대폰에서는 단추를 먼저, QR 은 작게 뒤로 — 어차피 못 찍습니다 */
@media (max-width:700px){
  .qr-box{gap:12px}
  .qr-go{order:-1}
  .qr-how{order:-2;font-size:12.5px}
  .mk-qrimg{width:150px;height:150px}
}

/* 휴대폰 업로드 화면에서 「왜 안 올라갔나」 (kids163) */
.mp-warn{background:#FFF4E5;border:1px solid #F5C77E;color:#8A5A00;
  border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.7;margin:10px 0}
:root[data-theme="dark"] .mp-warn{background:#3A2A10;border-color:#6B4E14;color:#F3D9A4}

/* 펼친 메뉴 안의 머리글 — 누르는 것이 아닙니다 (kids164) */
.hd-sub-hd{display:block;background:var(--soft);padding:9px 16px;
  font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.02em;
  border:1px solid var(--line2);border-bottom:0;
  border-radius:12px 12px 0 0}
.hd-sub-hd + a{border-top:1px solid var(--line2)}
.mdrawer-hd{font-size:12px;font-weight:700;color:var(--muted);opacity:.85}

/* ══════════════════════════════════════════════════════════
   마이페이지 — 시안 10_마이페이지.png (kids164 · 2026-09-14)

   왼쪽 세로 메뉴 + 오른쪽 본문. 뜬다스토리(.sv-my)가 이미 이 모양이라
   키즈를 거기에 맞춥니다. 클래스는 .myp- 로 따로 둡니다 — .sv- 는
   스토리 시안 전용이라 섞으면 한쪽을 고칠 때 다른 쪽이 깨집니다.
   ══════════════════════════════════════════════════════════ */

/* 인사 — 전체 폭 */
.myp-hero{padding:26px 0 0}
.myp-hero-in{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  background:var(--soft);border-radius:var(--r-xl);padding:26px 30px}
.myp-hero-in em{display:block;font-style:normal;font-size:12px;font-weight:800;
  letter-spacing:.12em;color:var(--orange);margin-bottom:8px}
.myp-hero-in h1{margin:0 0 10px;font-size:29px;line-height:1.28}
.myp-hero-in p{margin:0;font-size:14.5px;line-height:1.8;color:var(--ink2)}
.myp-hero-in p b{color:var(--orange)}
.myp-hero-in .kd-hand{flex:none;text-align:right;font-size:14px;line-height:1.9}

/* ★★ kids438 — 이름 옆 캐릭터 자리. (사장님 지시 2026-09-20)
   캐릭터가 없으면 「캐릭터부터 만들기」, 있으면 대표 얼굴과
   「이 캐릭터로 동화 만들기」가 여기에 섭니다. */
.myp-hero-act{flex:none;display:flex;flex-direction:column;align-items:stretch;
  gap:9px;min-width:236px;max-width:300px}
/* ★ kids602 — 없는 토큰(--card·--sub·--grad-soft·--k-card·--k-mut)이 늘 대체값(흰색·회색)으로 떨어져 어두운 화면에서
     흰 바탕에 밝은 글자가 됐습니다(GPT 실화면: 마이페이지 대표 캐릭터 카드). 있는 토큰으로 바꿨습니다(8곳). */
.myp-heroc{display:flex;align-items:center;gap:11px;background:var(--surface,#fff);
  border:1px solid var(--line);border-radius:var(--r-lg,15px);padding:9px 12px}
.myp-heroc img{width:52px;height:52px;flex:none;border-radius:50%;object-fit:cover;
  background:var(--soft)}
.myp-heroc.noimg img{display:none}
.myp-heroc em{width:52px;height:52px;flex:none;border-radius:50%;background:var(--soft);
  display:flex;align-items:center;justify-content:center;font-style:normal;font-size:24px}
.myp-heroc b{display:block;font-size:15px;line-height:1.35}
.myp-heroc span{display:block;margin-top:2px;font-size:12px;color:var(--muted)}
.myp-heroc.empty b{font-size:14.5px}
.myp-hero-act .btn-cta{width:100%;text-align:center}
.myp-hero-sub{font-size:12.5px;color:var(--muted);text-align:center}
.myp-hand{margin:14px 0 0;text-align:right;font-size:14px;line-height:1.9}

/* 두 칸 */
.myp{padding:18px 0 34px}
.myp-in{display:grid;grid-template-columns:230px 1fr;gap:22px;align-items:start}

/* 왼쪽 세로 메뉴 */
/* ★ kids432 — 붙박이 자리를 머리띠 변수 기준으로 (전 88px 고정). */
.myp-side{position:sticky;top:calc(var(--hd-h) + 19px);background:var(--surface);
  border:1px solid var(--line2);border-radius:var(--r-xl);padding:10px;overflow:hidden}
.myp-side nav{display:flex;flex-direction:column;gap:2px}
.myp-side a{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:12px;
  font-size:14px;font-weight:600;color:var(--ink2);line-height:1.3}
.myp-side a i{font-style:normal;font-size:15px;width:20px;text-align:center;flex:none}
.myp-side a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.myp-side a:hover{background:var(--soft);color:var(--orange)}
.myp-side a.on{background:var(--orange);color:var(--on-orange,#fff)}
.myp-side a.on:hover{background:var(--orange);color:var(--on-orange,#fff)}
.myp-side hr{border:0;border-top:1px solid var(--line2);margin:9px 6px}
.myp-new{display:block;text-align:center;margin:12px 3px 3px;padding:12px;font-size:14px}

/* 본문 */
.myp-main{min-width:0;display:flex;flex-direction:column;gap:18px}
.myp-main > .sec{padding:0}
.myp-main .shell{max-width:none;padding-left:0;padding-right:0}

/* 숫자 넉 장 */
.myp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.myp-stats > div{background:var(--surface);border:1px solid var(--line2);
  border-radius:var(--r-xl);padding:18px 16px;text-align:center}
.myp-stats i{display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin:0 auto 10px;border-radius:50%;
  background:var(--soft);font-style:normal;font-size:20px}
.myp-stats span{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px}
.myp-stats b{display:block;font-size:24px;line-height:1.2}
.myp-stats b.sm{font-size:17px;padding-top:4px}
.myp-stats b em{font-style:normal;font-size:13px;font-weight:600;color:var(--muted2)}
.myp-stats .btn-cta.sm{margin-top:10px;display:inline-block;font-size:12.5px;padding:7px 13px}

/* 상자 */
.myp-card{background:var(--surface);border:1px solid var(--line2);
  border-radius:var(--r-xl);padding:18px 20px 20px}
.myp-ttl{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.myp-ttl h2{margin:0;font-size:18px}
.myp-ttl > div{flex:1;min-width:0}
.myp-ttl > a{font-size:13px;color:var(--muted);flex:none}
.myp-ttl > a:hover{color:var(--orange)}
.myp-ic{display:flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:50%;background:var(--orange);color:var(--on-orange,#fff);font-size:13px;flex:none}

/* 갈래 칩 */
.myp-filters{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.myp-filters a{padding:7px 14px;border-radius:var(--r-pill);border:1px solid var(--line2);
  font-size:13px;font-weight:600;color:var(--ink2);background:var(--surface)}
.myp-filters a:hover{border-color:var(--orange2);color:var(--orange)}
.myp-filters a.on{background:var(--orange);border-color:var(--orange);color:var(--on-orange,#fff)}

/* 한 줄 요약 넉 장 */
.myp-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.myp-quick a{display:flex;align-items:center;gap:10px;background:var(--surface);
  border:1px solid var(--line2);border-radius:16px;padding:14px 16px}
.myp-quick a:hover{border-color:var(--orange2)}
.myp-quick i{font-style:normal;font-size:19px;flex:none}
.myp-quick b{flex:1;font-size:13.5px;font-weight:700;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.myp-quick em{font-style:normal;font-size:13px;font-weight:700;color:var(--orange);flex:none}

.myp-final{border-radius:var(--r-xl);margin-top:4px}
.myp-final p{margin-top:14px;font-size:13px;opacity:.85}

/* 태블릿 — 메뉴를 위로 눕힙니다 */
@media (max-width:1000px){
  .myp-in{grid-template-columns:1fr}
  .myp-side{position:static}
  .myp-side nav{flex-direction:row;flex-wrap:wrap}
  .myp-side a{flex:0 0 auto}
  .myp-side hr{display:none}
  .myp-new{margin-top:10px}
  .myp-stats{grid-template-columns:repeat(2,1fr)}
  .myp-quick{grid-template-columns:repeat(2,1fr)}
}

/* 휴대폰 */
@media (max-width:640px){
  .myp-hero{padding-top:16px}
  .myp-hero-in{flex-direction:column;padding:20px 18px;gap:14px}
  .myp-hero-in h1{font-size:23px}
  .myp-hero-in .kd-hand{text-align:left;font-size:13px}
  /* ★ kids438 — 좁은 화면에서는 캐릭터 칸이 한 줄을 다 씁니다 */
  .myp-hero-act{min-width:0;max-width:none;width:100%}
  .myp-hand{display:none}
  .myp-side a{font-size:13px;padding:9px 11px}
  .myp-stats{gap:10px}
  .myp-stats > div{padding:14px 10px}
  .myp-stats i{width:38px;height:38px;font-size:17px;margin-bottom:8px}
  .myp-stats b{font-size:20px}
  .myp-stats b.sm{font-size:15px}
  .myp-card{padding:15px 14px 16px}
  .myp-quick{grid-template-columns:1fr}
}

/* ══ 머리글 이름 칩 (시안 10_마이페이지.png) ══════════════
   ★ .hd-item 을 쓰지 않습니다. (kids165 · 2026-09-14)

   처음에는 메뉴와 같은 .hd-item 으로 감쌌습니다. 그런데 .hd-item>a 는
   메뉴 링크 모양(display:block · padding 9/13 · ⌄ 붙이기)을 강제하고,
   좁은 화면 줄이기 규칙까지 이 칩에 걸립니다. 칩이 메뉴처럼 늘어나고
   ⌄ 가 두 번 붙었습니다.

   펼치는 일만 여기서 따로 합니다 — 모양은 칩, 동작은 메뉴. */
.hd-mewrap{position:relative;flex:none}
.hd-me{display:flex !important;flex-direction:row !important;align-items:center;gap:8px;
  padding:5px 11px 5px 5px !important;border:1px solid var(--line2);
  border-radius:var(--r-pill) !important;background:var(--surface);
  text-align:left;line-height:1.2}
.hd-me:hover{border-color:var(--orange2);background:var(--surface)}
.hd-me b{font-size:13.5px;font-weight:700;color:var(--ink2);white-space:nowrap;
  max-width:88px;overflow:hidden;text-overflow:ellipsis}
.hd-me::after{content:'⌄';font-size:11px;opacity:.55;margin-left:1px}
.hd-av{display:flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:50%;background:var(--orange);color:var(--on-orange,#fff);font-size:13px;font-weight:800;flex:none}

.hd-mewrap .hd-sub{left:auto;right:0;min-width:238px}
.hd-mewrap:hover .hd-sub,
.hd-mewrap:focus-within .hd-sub{opacity:1;visibility:visible;transform:none}

/* ══ 머리글 이름 펼침 — 사장님 시안 (kids167 · 2026-09-14) ═══════
   줄만 늘어놓던 것을 「아이콘 · 제목 · 설명 · 화살표」로 바꿉니다.   */
.hdm{position:absolute;right:0;top:100%;z-index:70;width:322px;margin-top:10px;
  background:var(--surface);border:1px solid var(--line2);border-radius:20px;
  box-shadow:0 18px 46px rgba(0,0,0,.14);overflow:hidden;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s,transform .16s,visibility .16s}
.hd-mewrap:hover .hdm,
.hd-mewrap:focus-within .hdm{opacity:1;visibility:visible;transform:none}
/* 칩과 펼침 사이 빈틈에서 마우스가 빠지지 않게 */
.hd-mewrap::after{content:'';position:absolute;right:0;top:100%;width:100%;height:12px}

.hdm-top{display:flex;align-items:center;gap:13px;padding:18px 18px 16px;
  background:linear-gradient(180deg,#FDEEE2,#FDF6F0)}
:root[data-theme="dark"] .hdm-top{background:linear-gradient(180deg,#3A2A1E,#2B2320)}
.hdm-av,.hd-av{display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none}
.hdm-av{width:52px;height:52px;border-radius:50%;background:#fff;
  border:2px solid var(--orange2)}
.hdm-av img,.hd-av img{width:100%;height:100%;object-fit:cover}
.hdm-av em,.hd-av em{font-style:normal;font-weight:800;color:var(--orange)}
.hdm-av em{font-size:21px}
.hdm-top b{display:block;font-size:17px;line-height:1.3}
.hdm-top i{display:block;font-style:normal;font-size:12.5px;color:var(--muted);margin-top:3px}

.hdm hr{border:0;border-top:1px solid var(--line2);margin:6px 16px}
.hdm-row{display:flex;align-items:center;gap:13px;padding:11px 16px}
.hdm-row:hover{background:var(--soft)}
.hdm-ic{display:flex;align-items:center;justify-content:center;flex:none;
  width:40px;height:40px;border-radius:13px;background:var(--soft);
  font-style:normal;font-size:19px}
.hdm-row > span{flex:1;min-width:0}
.hdm-row b{display:block;font-size:14.5px;font-weight:700;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hdm-row em{display:block;font-style:normal;font-size:12px;color:var(--muted);
  margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hdm-row u{text-decoration:none;font-size:17px;color:var(--muted2);flex:none}
.hdm-out b{color:var(--orange)}
.hdm-out u{color:var(--orange)}
.hdm-out .hdm-ic{background:#FDEDE4;color:var(--orange)}
:root[data-theme="dark"] .hdm-out .hdm-ic{background:#3A2A1E}

/* ══ 두 브랜드 오가는 띠 — 히어로 아래 (kids167 · 사장님 시안) ══ */
.bswap{background:var(--soft);padding:26px 0}
.bswap-in{display:flex;align-items:center;justify-content:center;gap:26px}
.bswap-note{margin:0;flex:1;font-family:var(--font-title),inherit;
  font-size:15px;line-height:1.75;color:var(--orange-d);white-space:nowrap}
.bswap-l{text-align:right}
.bswap-r{text-align:left}
.bswap-l::after{content:'↘';display:block;font-size:17px;opacity:.7;margin-top:2px}
.bswap-r::before{content:'↙';display:block;font-size:17px;opacity:.7;margin-bottom:2px;
  transform:scaleX(-1)}

.bswap-pill{display:flex;align-items:center;flex:none;background:var(--surface);
  border:1px solid var(--line2);border-radius:var(--r-pill);
  box-shadow:0 6px 20px rgba(0,0,0,.06);padding:8px}
.bswap-side{display:flex;align-items:center;gap:11px;padding:10px 20px;
  border-radius:var(--r-pill)}
.bswap-side:hover{background:var(--soft)}
.bswap-side.on{background:transparent}
.bswap-side.on b{color:var(--orange)}
.bswap-mk{display:flex;align-items:center;justify-content:center;flex:none;
  width:34px;height:34px;border-radius:11px;font-size:18px;background:var(--soft)}
.bswap-side b{display:block;font-size:17px;font-weight:800;color:var(--ink);
  white-space:nowrap;line-height:1.25}
.bswap-side b em{font-style:normal;color:var(--orange)}
.bswap-side.on b em{color:var(--orange-d)}
.bswap-side i{display:block;font-style:normal;font-size:11.5px;color:var(--muted);
  margin-top:2px;white-space:nowrap}
.bswap-x{display:flex;align-items:center;justify-content:center;flex:none;
  width:34px;height:34px;border-radius:50%;border:1px solid var(--line2);
  color:var(--muted2);font-size:15px}

@media (max-width:1100px){
  .bswap-note{font-size:13.5px}
}
@media (max-width:900px){
  .bswap-in{gap:14px}
  .bswap-note{display:none}          /* 손글씨는 자리가 없으면 뺍니다 */
  .bswap-pill{margin:0 auto}
}
@media (max-width:560px){
  .bswap{padding:18px 0}
  .bswap-pill{width:100%;padding:6px}
  .bswap-side{flex:1;min-width:0;padding:9px 10px;gap:8px}
  .bswap-side b{font-size:14.5px}
  .bswap-side i{font-size:10.5px;white-space:normal;word-break:keep-all;line-height:1.35}
  /* kids634 — 「중·고등 · 어른 · 가족 이야기」가 길어 ⇄ 밑으로 파고들었습니다. 글자 칸이 줄어들고 줄을 바꿉니다 */
  .bswap-side>span:last-child{min-width:0}
  .bswap-mk{width:28px;height:28px;font-size:15px;border-radius:9px}
  .bswap-x{width:26px;height:26px;font-size:13px}
}

/* ══ 대본 컷 리스트 (kids171 · 사장님 지시 2026-09-14) ═══════════
   한 화면에 장면이 쭉. 왼쪽 그림, 오른쪽 글.
   예전에는 한 장면씩만 열려서 흐름이 안 보였습니다.            */
.cut-list{display:flex;flex-direction:column;gap:14px;margin-top:6px}

.cut{display:grid;grid-template-columns:232px 1fr;gap:16px;
  background:var(--surface);border:1px solid var(--line2);
  border-radius:var(--r-xl);padding:14px}
.cut:focus-within{border-color:var(--orange2)}
.cut--off{opacity:.55}

/* 그림 */
.cut-img{position:relative;border-radius:14px;overflow:hidden;background:var(--soft);
  aspect-ratio:3/2;display:flex;align-items:center;justify-content:center}
.cut-img img{width:100%;height:100%;object-fit:cover;display:block}
.cut-no{position:absolute;left:8px;top:8px;z-index:2;
  display:flex;align-items:center;justify-content:center;min-width:26px;height:26px;
  padding:0 8px;border-radius:999px;background:rgba(0,0,0,.62);color:#fff;
  font-size:13px;font-weight:800}
.cut-no-img{font-style:normal;font-size:12px;color:var(--muted2);text-align:center;
  line-height:1.7}
.cut-off-tag{position:absolute;right:8px;top:8px;z-index:2;background:var(--ink);
  color:#fff;font-size:11px;padding:4px 9px;border-radius:999px}
/* 고른 화풍 견본이 없어 다른 화풍 그림을 건 자리 (kids300) */
.cut-other-tag{position:absolute;left:8px;bottom:8px;z-index:2;
  background:rgba(20,20,22,.72);color:#fff;font-size:10.5px;font-weight:600;
  padding:3px 8px;border-radius:999px;letter-spacing:-.2px}

/* 글 */
.cut-body{display:flex;flex-direction:column;gap:8px;min-width:0}
.cut-title{border:0;border-bottom:1px dashed var(--line2);background:transparent;
  font-size:15.5px;font-weight:700;color:var(--ink);padding:4px 2px;width:100%}
.cut-title:focus{outline:none;border-bottom-color:var(--orange)}
.cut-narr{border:1px solid var(--line2);border-radius:12px;background:var(--paper2);
  padding:10px 12px;font-size:14.5px;line-height:1.85;color:var(--ink);
  resize:vertical;min-height:74px;width:100%;font-family:inherit}
.cut-narr:focus{outline:none;border-color:var(--orange2);background:var(--surface)}

/* 대사 — 누가 / 무슨 말 */
.cut-lines{display:flex;flex-direction:column;gap:6px}
.cut-line{display:grid;grid-template-columns:104px 1fr 30px;gap:6px;align-items:center}
.cut-who,.cut-say{border:1px solid var(--line2);border-radius:10px;background:var(--surface);
  padding:8px 10px;font-size:13.5px;color:var(--ink);min-width:0;font-family:inherit}
.cut-who{font-weight:700;color:var(--orange-d);background:var(--soft)}
.cut-who:focus,.cut-say:focus{outline:none;border-color:var(--orange2)}
.cut-del{border:0;background:transparent;color:var(--muted2);font-size:14px;cursor:pointer;
  padding:6px;border-radius:8px;line-height:1}
.cut-del:hover{background:var(--soft);color:var(--orange)}

/* 아래 단추 줄 */
.cut-foot{display:flex;align-items:center;flex-wrap:wrap;gap:7px;padding-top:2px}
.cut-count{font-size:12px;color:var(--muted);margin-right:auto;white-space:nowrap}
.cut-count b{color:var(--ink2)}
.cut-mini{border:1px solid var(--line2);background:var(--surface);color:var(--ink2);
  border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:600;cursor:pointer;
  white-space:nowrap;font-family:inherit}
.cut-mini:hover{border-color:var(--orange2);color:var(--orange)}
.cut-ex{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--muted);
  white-space:nowrap;cursor:pointer}
.cut-save{border:0;background:var(--orange);color:var(--on-orange,#fff);border-radius:999px;
  padding:7px 17px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}
.cut-save:hover{background:var(--orange-d)}

/* 이 장면만 AI 에게 */
.cut-ai{border-top:1px dashed var(--line2);padding-top:10px;margin-top:2px;
  display:flex;flex-direction:column;gap:9px}
.cut-ask{display:grid;grid-template-columns:1fr auto;gap:8px}
.cut-ask .btn-ghost{white-space:nowrap;padding:9px 14px;font-size:13px}

.cut-tools{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.cut-tools > form > .btn-ghost{width:100%}

@media (max-width:900px){
  .cut{grid-template-columns:180px 1fr;gap:12px}
}
@media (max-width:640px){
  .cut{grid-template-columns:1fr;padding:12px}
  .cut-img{aspect-ratio:16/9}
  .cut-line{grid-template-columns:88px 1fr 28px}
  .cut-count{width:100%;margin-right:0;order:-1}
  .cut-ask{grid-template-columns:1fr}
  .cut-ask .btn-ghost{width:100%}
}

/* 목소리 고르는 칸 정리 (kids172 · 2026-09-14)
   「가족 / 성우」로 나눠 놓아 AI 목소리를 부모가 녹음한 것으로 오해했습니다.
   큰 제목은 둘뿐입니다 — AI 목소리 · 우리가 녹음한 목소리. */
.vo-group em{display:block;font-style:normal;font-size:11.5px;font-weight:500;
  color:var(--muted2);margin-top:3px;letter-spacing:0}
.vo-sub{font-size:12px;font-weight:700;color:var(--muted2);margin:10px 0 6px 2px}
.vo-play{border:1px solid var(--line2);background:var(--surface);color:var(--ink2);
  border-radius:999px;padding:5px 11px;font-size:12px;font-weight:700;cursor:pointer;
  white-space:nowrap;flex:none;font-family:inherit}
.vo-play:hover{border-color:var(--orange2);color:var(--orange)}
.vo-noprev{font-size:11.5px;color:var(--muted2);white-space:nowrap;flex:none}
.vo--mine .vo-in{border-color:var(--orange2);background:#FFF8F2}
:root[data-theme="dark"] .vo--mine .vo-in{background:#30261E}

/* 제작 중 — 살아 있다는 표시 (kids172 · 2026-09-14)
   5초마다 묻고는 있었는데 화면이 가만히 있어서 멈춘 줄 아셨습니다. */
.pg-live{display:flex;align-items:center;gap:8px;margin-top:10px;
  font-size:12.5px;color:var(--muted)}
.pg-dot{width:8px;height:8px;border-radius:50%;background:var(--orange);flex:none;
  animation:pgPulse 1.4s ease-in-out infinite}
@keyframes pgPulse{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}

/* 아직 0% 일 때 — 줄무늬가 흐릅니다 */
.pg-waiting .pg-bar > i,
.pg-waiting #pgRing{
  background-image:linear-gradient(115deg,
    rgba(255,255,255,.55) 25%, transparent 25%, transparent 50%,
    rgba(255,255,255,.55) 50%, rgba(255,255,255,.55) 75%, transparent 75%);
  background-size:22px 22px;
  animation:pgFlow 1s linear infinite}
.pg-waiting #pgRing{min-width:16%}
@keyframes pgFlow{from{background-position:0 0}to{background-position:22px 0}}

@media (prefers-reduced-motion:reduce){
  .pg-dot{animation:none;opacity:.8}
  .pg-waiting .pg-bar > i,.pg-waiting #pgRing{animation:none}
}

/* 결제 화면 — 아직 준비 안 된 선택 (kids172) */
.ord-o--lock{opacity:.72}
.ord-o--lock .ord-o-in{border-style:dashed}
.ord-o--lock:hover .ord-o-in{border-color:var(--orange2);opacity:1}
.ord-o-lockem{color:var(--muted2) !important;font-weight:700}

/* 대본 화면에서 화풍 바꾸러 가기 (kids173) */
.sc-style{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;
  border:1px solid var(--line2);border-radius:999px;background:var(--surface);
  font-size:12.5px;color:var(--muted);white-space:nowrap}
.sc-style b{color:var(--orange-d);font-weight:700}
.sc-style:hover{border-color:var(--orange2);color:var(--orange)}

/* 영상 화면 — 접어 둔 세부 설정 (kids173) */
.vd-more{border:1px solid var(--line2);border-radius:14px;background:var(--soft);
  overflow:hidden;margin-top:2px}
.vd-more > summary{cursor:pointer;list-style:none;display:flex;align-items:center;
  gap:10px;padding:13px 16px;flex-wrap:wrap}
.vd-more > summary::-webkit-details-marker{display:none}
.vd-more > summary > b{font-size:14px;flex:none}
.vd-more > summary > span{flex:1;min-width:0;font-size:12.5px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vd-more > summary > em{font-style:normal;font-size:12.5px;font-weight:700;
  color:var(--orange);flex:none}
.vd-more[open] > summary > em::after{content:''}
.vd-more[open] > summary{border-bottom:1px solid var(--line2);background:var(--surface)}
.vd-more > :not(summary){padding-left:16px;padding-right:16px}
.vd-more > :last-child{padding-bottom:14px}

/* 한 장 먼저 그려보기 (kids174) */
.try1{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:linear-gradient(180deg,#FFF6EE,var(--surface));
  border:1px solid var(--orange2);border-radius:var(--r-xl);padding:15px 18px;margin:10px 0 4px}
:root[data-theme="dark"] .try1{background:linear-gradient(180deg,#3A2A1E,var(--surface))}
.try1-tx{flex:1;min-width:220px}
.try1-tx b{display:block;font-size:15px;margin-bottom:4px}
.try1-tx span{display:block;font-size:12.5px;color:var(--muted);line-height:1.75}
.try1 .btn-cta{flex:none;white-space:nowrap}

/* 장면 고치기 — 글만 고칠 때 (kids174) */
.fx-hint{font-size:11.5px;font-weight:500;color:var(--muted2);margin-left:5px}
.fx-redraw{display:flex;align-items:center;gap:7px;margin:8px 0;font-size:12.5px;
  color:var(--ink2);cursor:pointer}
.fx-redraw em{font-style:normal;color:var(--orange);font-weight:700}
.fx-text button small{font-weight:500;opacity:.75;margin-left:3px}

@media (max-width:560px){
  .try1{flex-direction:column;align-items:stretch}
  .try1 .btn-cta{width:100%;text-align:center}
}

/* 로고를 키웁니다 (kids175 · 사장님 지적 2026-09-14)
   머리글 오른쪽을 정리해 자리가 남았습니다. 로고가 28px 이라 작았습니다. */
.hd-logo{height:36px}
.hd-logotext{font-size:22px}
@media (max-width:920px){ .hd-logo{height:30px} .hd-logotext{font-size:19px} }
@media (max-width:560px){ .hd-logo{height:34px} .hd-logotext{font-size:18px} }  /* kids634 — 폰 로고가 너무 작다(그림 둘레 빈칸 포함 26px → 글자가 16px). 키웁니다 */

/* ══════════════════════════════════════════════════════════════
   사이트가 셋입니다 — 3~7세 · 8~12세 · 뜬다스토리 (kids183)

   로그인·토큰·데이터베이스만 같이 쓰고, 보이는 것은 다른 사이트입니다.
   그런데 3~7세와 8~12세가 같은 색·같은 머리글을 쓰고 있었습니다.
   8~12세에서 「이야기 고르기」를 누르면 그 순간 크림색 3~7세 화면이
   나왔습니다 — 열 살 아이가 아기 사이트로 떨어집니다.

   여기서 몸통에 b-elem 이 붙으면 색을 통째로 갈아 끼웁니다.
   화면을 두 벌 만들지 않습니다 — 빛깔만 바꿉니다.
     3~7세  크림 바탕 · 갈색 글 · 주황
     8~12세 흰 바탕  · 남색 글 · 파랑 (부르는 단추는 주황 그대로)

   ★ 8~12세 첫 화면·갈래 화면은 elem.css 를 씁니다 — 이 파일을 안 읽습니다.
   ══════════════════════════════════════════════════════════════ */
body.b-elem{
  --paper:#F7FAFF; --paper2:#EDF4FF; --surface:#fff; --soft:#F2F7FF;
  --ink:#1B2A4A; --ink2:#2C3E60; --muted:#5B6B85; --muted2:#6B7B95;
  --line:#E3ECF8; --line2:#DCE7F6;
  --pink:#2F7BF6;
  --sh-card:0 2px 10px rgba(30,60,120,.08);
  --sh-lift:0 10px 24px rgba(30,60,120,.14);
  --sh-big:0 18px 40px rgba(30,60,120,.16);
}
body.b-elem a{color:#2F7BF6}
body.b-elem a:hover{color:#1B5CD0}
/* 부르는 단추(만들기·결제)는 주황 그대로 둡니다 — 시안도 주황입니다 */
body.b-elem .btn-cta,body.b-elem .btn-cta:hover{color:#fff}
body.b-elem .hd{background:rgba(247,250,255,.9);border-bottom-color:#E3ECF8}
body.b-elem .hd-nav>.hd-item>a.on{color:#2F7BF6}
/* ★ kids598 — elem.css 를 안 싣는 8~12세 속 화면(후기·단체·도움말 등)에는 달 단추가 있습니다.
     그걸 켜면 위 body.b-elem 이 밝은 글자·바탕 토큰을 다시 깔고(몸통이 더 가까움) 강조색만
     어두운 값이 되어, 흰 글자+연한 강조(2.2:1), 밝은 바닥글 위 밝은 글자(2.0:1)가 섞였습니다.
     어두운 화면이면 여기서도 한 벌을 통째로 어둡게 둡니다. (전체 캡처 점검) */
html[data-theme="dark"] body.b-elem{
  --paper:#0C1430; --paper2:#122048; --surface:#16224A; --soft:#111C3E;
  --ink:#EAF1FF;   --ink2:#C3CFEA;   --muted:#9FB0D4;  --muted2:#8496BC;
  --line:#25335C;  --line2:#2A3A66;
  --orange:#6FB6EE; --orange2:#9ED0F5; --orange-d:#C3E2FA;
}
html[data-theme="dark"] body.b-elem .hd a:not(.btn-cta),html[data-theme="dark"] body.b-elem .ft a,
html[data-theme="dark"] body.b-elem p a{color:#8FC6F3}   /* 몸통 전체에 걸면 탭·단추 글자색을 이깁니다 */

html[data-theme="dark"] body.b-elem .hd{background:rgba(12,20,48,.9);border-bottom-color:var(--line)}
html[data-theme="dark"] body.b-elem .ft{background:var(--paper);border-top-color:var(--line)}
html[data-theme="dark"] body.b-elem .hand{color:var(--ink2)}
html[data-theme="dark"] body.b-elem .hd-nav>.hd-item>a.on{color:var(--orange)}
body.b-elem .ft{background:#EEF4FD;border-top-color:#DCE7F6}
body.b-elem .hand{color:#2C3E60}
/* ★ kids598 — 8~12세 자체 어두운 모드(data-dark)에서 머리글·바닥글·링크 색이 위처럼 밝은 값으로
     박혀 있어, 어두운 토큰과 섞이며 바닥글 사업자 정보가 1.8:1 이 됐습니다(전체 캡처 점검). */
html[data-dark] body.b-elem .hd{background:rgba(12,10,36,.9);border-bottom-color:var(--line)}
html[data-dark] body.b-elem .ft{background:var(--paper);border-top-color:var(--line)}
html[data-dark] body.b-elem .hd a:not(.btn-cta),html[data-dark] body.b-elem .ft a{color:#B9A2FF}
html[data-dark] body.b-elem .hd a:not(.btn-cta):hover,html[data-dark] body.b-elem .ft a:hover{color:#D8CBFF}
/* 링크 색을 몸통 전체에 걸면 어두운 모드에서도 밝게 두는 파스텔 카드(k8-card) 글자가 연보라가 됩니다 — 머리글·바닥글만 */
html[data-dark] body.b-elem .hand{color:var(--ink2)}


/* ══ kids195 · 2026-09-14 ══════════════════════════════════
   ① 원작 주인공 성별 안내 (.wz-sex · .ch-sexnote · .ch-sex)
   ② 이미 등록해 둔 등장인물 바로 넣기 (.ct-saved)
   사장님 신고 2026-09-14 — 빨간모자에 남자아이, 등록된 아이 안 뜸
   ─────────────────────────────────────────────────────── */
.wz-sex{display:flex;gap:12px;align-items:flex-start;max-width:720px;margin:0 auto 20px;
  background:var(--soft);border:1px solid #F3E0BC;border-radius:var(--r-l);padding:14px 16px;text-align:left}
.wz-sex>i{flex:none;width:22px;height:22px;border-radius:50%;background:var(--orange);color:var(--on-orange,#fff);
  font-style:normal;font-weight:800;font-size:14px;display:grid;place-content:center;margin-top:1px}
.wz-sex b{display:block;font-size:14.5px;margin-bottom:4px}
.wz-sex p{margin:0 0 6px;font-size:13px;color:var(--muted);line-height:1.6}
.wz-sex span{font-size:12.5px;color:var(--muted2)}
.wz-sex a{color:var(--orange);font-weight:700;text-decoration:underline}

/* 「함께 만들기」 안내 띠 (kids262)
   여러 부를 고르면 동화가 부마다 하나씩 생깁니다. 지금 보는 것이
   그중 몇 번째인지 적어 두지 않아 「셋 골랐는데 왜 6컷이냐」가 됐습니다. */
.wz-bundle{position:relative;max-width:720px;margin:0 auto 20px;text-align:left;
  background:#F2F8FF;border:1px solid #CFE2F7;border-radius:var(--r-l);padding:13px 16px}
.wz-bundle b{display:block;font-size:14.5px;color:#1C4E88;margin-bottom:4px}
.wz-bundle span{display:block;font-size:12.5px;color:var(--muted);line-height:1.7}
.wz-bundle em{font-style:normal;font-weight:700;color:#2F7A1E}
.wz-bundle i{position:absolute;top:12px;right:14px;font-style:normal;white-space:nowrap;
  font-size:11.5px;font-weight:800;color:#1C4E88;background:#DCEBFB;
  border-radius:999px;padding:3px 10px}
@media(max-width:560px){
  .wz-bundle{margin-left:0;margin-right:0;padding:12px 13px}
  .wz-bundle i{position:static;display:inline-block;margin-top:7px}
}

.ch-sexnote{margin:0 0 14px;padding:10px 13px;background:var(--soft);border-radius:10px;
  font-size:13px;color:var(--muted);line-height:1.6}
.ch-sexnote b{color:var(--ink)}
.ch-sex{display:inline-block;margin-top:6px;padding:2px 7px;border-radius:6px;
  background:#FFF0E0;color:#C2701A;font-size:10.5px;font-weight:700}

.ct-saved{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.ct-saved>b{font-size:14px}
.ct-saved-row{display:flex;flex-wrap:wrap;gap:9px}
.ct-saved-row form{margin:0}
.ct-sv{display:flex;align-items:center;gap:9px;cursor:pointer;text-align:left;
  border:1px solid var(--line2);border-radius:999px;background:#fff;padding:6px 14px 6px 6px;
  font:13px/1.4 'Noto Sans KR';color:var(--ink)}
.ct-sv:hover{border-color:var(--orange2);background:#FFF8F1}
.ct-sv-av{flex:none;width:34px;height:34px;border-radius:50%;overflow:hidden;background:var(--soft);
  display:grid;place-content:center}
.ct-sv-av img{width:100%;height:100%;object-fit:cover}
.ct-sv-av em{font-style:normal;font-size:17px}
.ct-sv b{font-size:13.5px}
.ct-sv>span:not(.ct-sv-av){font-size:11.5px;color:var(--muted2)}
.ct-sv i{font-style:normal;font-size:12px;font-weight:700;color:var(--orange);margin-left:4px}

@media(max-width:620px){
  body.b-story .hd-logo{height:32px}
  body.b-story .hd-in{padding-top:10px;padding-bottom:10px}
}

@media(max-width:520px){
  .wz-sex{margin-left:0;margin-right:0;padding:12px 13px}
  .ct-sv{width:100%;border-radius:12px}
  .ct-saved-row form{width:100%}
}

/* kids197 — 「한 장 먼저 그려보기」 결과를 그 자리에서 크게 (사장님 신고) */
.try-shot{text-align:center}
.try-shot>b{display:block;font-size:15.5px;margin-bottom:10px}
.try-shot img{display:block;width:100%;max-width:640px;margin:0 auto;border-radius:var(--r-l)}
.try-shot p{margin:10px auto 12px;max-width:560px;font-size:13px;color:var(--muted);line-height:1.6}
.try-shot .my-btns{justify-content:center}

/* kids200 — 주인공 성별 잠금 (사장님 결정 2026-09-14) */
.ch-sexnote.lock{background:var(--soft);border:1px solid #F3E0BC;color:var(--ink)}
.ch-sexnote.lock a{color:var(--orange);font-weight:700;text-decoration:underline;white-space:nowrap}
.ch-pick.ch-no{opacity:.45;cursor:not-allowed}
.ch-pick.ch-no .ch-pick-in{background:var(--soft);border-style:dashed}
.ch-pick.ch-no .ch-tick{display:none}
.ch-sex.no{background:#FDECEC;color:#B4404A}
.ct-sex.locked{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ct-sex.locked b{font-size:14px}
.ct-sex.locked em{font-style:normal;font-size:11.5px;color:var(--muted2)}

/* ══ kids205 · 2026-09-14 ══════════════════════════════════
   뜬다스토리 옷 — 사장님 지적 「뜬다스토리의 헤드도 디자인이 정리가 좀 필요해」

   사이트는 셋인데 색은 두 벌뿐이었습니다. 8~12세는 kids183 에서
   b-elem 을 받았는데 스토리만 빈손이라, 어른이 보는 사이트가
   3~7세 크림·주황·둥근 글꼴(Jua)을 그대로 쓰고 있었습니다.

   아래 값은 전부 사장님이 주신 시안(assets/story-lp.css 의 --td-*)에
   이미 적혀 있던 것입니다. 제가 새로 고른 색은 하나도 없습니다.
     바탕 흰색 #FFFFFF · 글자 남색 #1E2635 · 강조 주황 #FF6B2C
     선 var(--line) · 머리글 64px(모바일 56) · 로고 28px · 시스템 글꼴
   ─────────────────────────────────────────────────────── */
body.b-story{
  /* ★★★ kids594 — **여기가 아직 주황이었습니다.** (사장님 지시 2026-09-26)
   *   위 html[data-track="FAMILY"] 로 민트를 깔아 놓고 이 블록을 못 봤습니다.
   *   몸통 class 가 더 세서(우선순위) 스토리만 그대로 주황으로 남습니다.
   *   **색을 바꿀 때는 같은 토큰을 다시 정하는 자리를 전부 찾습니다.**
   *   그리고 `--paper2:var(--paper)` 라는 자기참조도 제 바꾸기가 만든
   *   것이라 값으로 되돌립니다. */
  /* ★★ kids595 — **바탕을 흰색으로 덮고 있었습니다.** (사장님 2026-09-26)
   *   「히어로쪽은 괜찮은데 페이지에는 민트가 들어간건지 안간건지 잘 모를
   *   정도다」 — 맞습니다. 히어로는 자기 민트 그림을 깔지만 그 아래 본문은
   *   여기서 바탕을 흰색으로 덮고 있어서 흰 종이였습니다. 위 FAMILY 블록
   *   에 민트를 깔아 놓고 이 줄이 그걸 덮고 있었습니다(몸통 class 가 더 셉니다).
   *   ※ 값 글자는 주석에 안 적습니다 — 검사기가 제 주석을 보고 헛경고를
   *      냅니다. 2026-09-26 하루에 열 번 났습니다. (규칙 11.1)
   *
   *   흰색은 원래 시안(story-lp.css) 값이라 일부러 둔 것이었는데, 브랜드 색을
   *   민트로 가른 뒤에는 색이 안 보이는 게 됩니다. 바탕은 민트로 넘기고
   *   **카드·상자는 흰색(--surface)** 으로 둡니다 — 흰 카드가 민트 위에
   *   놓이면서 색이 분명히 읽힙니다. 3~7세를 스카이블루로 바꾼 것과 같은 꼴입니다.
   *
   *   --paper·--paper2·--surface·--soft 는 위 FAMILY 블록에 이미 있는 값과
   *   같으므로 여기서 다시 안 정합니다. 같은 토큰을 두 곳에서 정하면 또
   *   한쪽만 고치게 됩니다. */
  /* ★★ kids597 — 글자·선·강조 색도 여기서 **안 정합니다.** (교차검수 2026-09-27)
   *   kids595 는 바탕 넷만 지우고 글자 색(밝은 화면 값)을 남겼습니다.
   *   몸통에서 다시 정하면 어두운 화면 블록(html[data-theme=dark][data-track=FAMILY])
   *   의 밝은 글자를 이겨서, 어두운 바탕 위에 어두운 글자가 됐습니다
   *   (대비 약 1.2:1 — 글이 안 보임). 값은 위 FAMILY 블록 두 곳에만 둡니다(19.9). */
  --r-s:10px; --r-m:14px; --r-l:16px; --r-xl:18px;
  --sh-card:0 1px 2px rgba(30,38,53,.04), 0 2px 8px rgba(30,38,53,.05);
  --sh-lift:0 4px 12px rgba(30,38,53,.07), 0 12px 32px rgba(30,38,53,.08);
  --sh-big:0 8px 20px rgba(30,38,53,.08), 0 20px 48px rgba(30,38,53,.10);
  /* 어른이 보는 사이트입니다 — 둥근 아동용 글꼴을 쓰지 않습니다 */
  --font-ko:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,
            "Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;
  --font-title:var(--font-ko);
  --font-serif:var(--font-ko);
}

/* 머리글 — 시안은 흰 바탕에 64px 입니다 (키즈는 크림 바탕) */
body.b-story .hd{background:var(--surface);background:color-mix(in srgb,var(--surface) 92%,transparent)}
body.b-story .hd-in{padding-top:18px;padding-bottom:18px}
body.b-story .hd-logotext{font-family:var(--font-ko);font-weight:800;letter-spacing:-.01em}
body.b-story .hd-item>a{font-weight:600}
body.b-story .btn-cta{border-radius:999px;font-weight:700}

/* ★ 메뉴 글씨가 작습니다. (kids215 · 사장님 지적 2026-09-14 「아직 헤더 메뉴가 작은데」)
 *
 * 3~7세는 15px 로 충분합니다 — 부모가 아이 옆에서 잠깐 보는 화면이고
 * 메뉴도 다섯뿐입니다. 뜬다스토리는 어른이 오래 보는 화면인데 같은
 * 15px 를 쓰니 넓은 머리글 안에서 글씨만 작아 보입니다.
 *
 * 시안(story-lp.css)이 정한 본문 크기가 16px 입니다. 그 값을 씁니다 —
 * 로고 높이 28px, 머리글 64px 도 같은 표에서 나온 값입니다. */
body.b-story .hd-nav{font-size:16px;font-weight:600;gap:6px}
body.b-story .hd-nav>a,
body.b-story .hd-item>a{padding:10px 15px;color:var(--ink)}
body.b-story .hd-item>a::after{font-size:12px;opacity:.5;margin-left:6px}
body.b-story .hd-in{gap:32px}
/* ★ 로고를 키웁니다. (kids215b · 사장님 지적 「아직도 로고가 작아」)
 *
 * 원본은 1200×380 (가로 3.16배)인데 높이를 28px 로 두니 두 줄짜리
 * 글자(뜬다스토리 + TTEUNDA STORY)에서 아래 영문이 뭉개집니다.
 * 시안의 --td-logo-h 28px 는 한 줄짜리 기호형 로고를 전제한 값이라
 * 이 그림에는 안 맞습니다. 44px 로 올리고 머리글도 그만큼 띄웁니다.
 *
 * 3~7세·8~12세 로고는 그대로입니다 — b-story 안에서만 바뀝니다. */
body.b-story .hd-logo{height:44px}
body.b-story .hd-in{padding-top:14px;padding-bottom:14px}
body.b-story .hd-logotext{font-size:20px}
body.b-story .hd-act .lg{font-size:15px;font-weight:600}
body.b-story .hd-sub a b{font-size:14.5px}
body.b-story .hd-sub a i{font-size:12.5px}
body.b-story .hd-act .btn-cta{font-size:15px;padding:11px 20px}

@media(max-width:1100px){
  body.b-story .hd-logo{height:38px}
  body.b-story .hd-nav{font-size:15px;gap:2px}
  body.b-story .hd-nav>a,
  body.b-story .hd-item>a{padding:10px 11px}
  body.b-story .hd-in{gap:20px}
}

/* 로그인한 자리 — 이름 칩과 펼침도 같은 옷으로 */
body.b-story .hd-me{border-color:var(--line);background:var(--surface)}
body.b-story .hd-av,
body.b-story .hdm-av{background:var(--soft);color:var(--orange-d)}
body.b-story .hdm{border-radius:var(--r-l);box-shadow:var(--sh-lift);border-color:var(--line)}
body.b-story .hdm-top{background:var(--soft)}
body.b-story .hdm-row b{font-weight:600}
body.b-story .hdm-ic{background:var(--surface);border:1px solid var(--line)}

/* 마이페이지·로그인 — story/mypage.php · story/login.php 가 쓰는 .sv 규칙 */
body.b-story .sv-hero h1,
body.b-story .sv-box-t{font-family:var(--font-ko);font-weight:800}

@media(max-width:820px){
  body.b-story .hd-in{padding-top:14px;padding-bottom:14px}
}

/* kids212 — 캐릭터 만드는 동안 어디까지 왔는지 (사장님 신고 2026-09-14) */
.cw{text-align:center;padding:26px 20px}
.cw-steps{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:18px;flex-wrap:wrap}
.cw-st{display:grid;justify-items:center;gap:5px;min-width:76px}
.cw-st i{width:28px;height:28px;border-radius:50%;display:grid;place-content:center;
  font-style:normal;font-size:13px;font-weight:800;background:var(--soft);color:var(--muted2)}
.cw-st b{font-size:11.5px;font-weight:600;color:var(--muted2)}
.cw-st.done i{background:#DFF5E8;color:#22A06B}
.cw-st.done b{color:var(--muted)}
.cw-st.on i{background:var(--orange);color:var(--on-orange,#fff);animation:cwp 1.1s ease-in-out infinite}
.cw-st.on b{color:var(--orange-d);font-weight:800}
@keyframes cwp{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
.cw-bar{flex:0 1 46px;height:3px;border-radius:999px;background:var(--line);overflow:hidden}
.cw-bar span{display:block;height:100%;background:#22A06B;transition:width .4s}
.cw-t{display:block;font-size:17px;margin-bottom:6px}
.cw p{margin:0 auto 8px;max-width:460px;font-size:13.5px;color:var(--muted);line-height:1.65}
.cw-cuts{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:12px 0 6px}
.cw-cuts span{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:999px;
  background:var(--soft);color:var(--muted2);font-size:12px}
.cw-cuts span i{font-style:normal}
.cw-cuts span.ok{background:#DFF5E8;color:#1C8B5A;font-weight:700}
.cw-age{font-size:12.5px!important;color:var(--muted2)!important}
/* 남은 시간 시계 — 멈춘 화면처럼 보이지 않게 (kids329) */
.cw-left{display:block;margin:12px auto 4px;max-width:340px}
.cw-left-t{display:block;margin-bottom:6px;font-size:14px;font-weight:700;color:var(--orange-d)}
.cw-left-bar{display:block;height:7px;border-radius:999px;background:var(--line2);overflow:hidden}
.cw-left-bar i{display:block;height:100%;border-radius:999px;background:var(--orange);
  transition:width .9s linear}
@media (prefers-reduced-motion:reduce){.cw-left-bar i{transition:none}}
@media(max-width:520px){
  .cw-steps{gap:3px}
  .cw-st{min-width:62px}
  .cw-bar{flex-basis:20px}
}

/* kids213 — 남은 시간 옆 근거 한 줄 */
.pg-eta i{display:block;font-style:normal;font-size:11px;opacity:.75;margin-top:2px}

/* kids219 — 영상 선택지 (그림만 / 알아서 / 전부)
   칸이 셋일 때는 .mk-three, 둘일 때는 원래 쓰던 .mk-two 를 씁니다.
   두 경우에 공통으로 붙는 모양만 .mk-motion 에 모읍니다. */
.mk-three{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:8px}
.mk-motion .mk-big img{aspect-ratio:16/9}
.mk-motion .mk-big b{display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding:12px 14px 2px;font-size:15px}
.mk-cut{display:block;padding:2px 14px 0;font-size:12px;font-weight:700;
  color:var(--orange);font-style:normal;text-decoration:none}
@media(max-width:900px){
  .mk-three{grid-template-columns:1fr 1fr}
  .mk-three .mk-big:last-child{grid-column:1/-1}      /* 빈 칸이 남지 않게 */
  .mk-three .mk-big:last-child img{aspect-ratio:16/6}
}
@media(max-width:560px){
  .mk-three{grid-template-columns:1fr}
  .mk-three .mk-big img,
  .mk-three .mk-big:last-child img{aspect-ratio:16/7}
}

/* kids220 — 영상일기 사진 올리기 */
.dy-drop{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  border:2px dashed var(--line2);border-radius:var(--r-l);padding:18px 16px;
  background:var(--soft)}
.dy-pick{border:0;background:var(--orange);color:var(--on-orange,#fff);font-weight:800;font-size:14px;
  border-radius:999px;padding:11px 18px;cursor:pointer}
.dy-pick:hover{filter:brightness(1.05)}
.dy-drop span{font-size:13px;color:var(--muted2)}
.dy-thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:10px}
.dy-th{position:relative;display:block}
.dy-th img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px;display:block;
  background:var(--soft)}
.dy-th i{position:absolute;left:5px;top:5px;font-style:normal;font-size:11px;font-weight:800;
  background:rgba(20,20,26,.72);color:#fff;border-radius:999px;padding:1px 7px}
@media(max-width:640px){
  .dy-thumbs{grid-template-columns:repeat(4,1fr)}
}

/* kids220 — 동의 칸 (가입 · /consent 공용) */
.auth-agree .ag-all{border-bottom:1px solid var(--line2);padding-bottom:10px;margin-bottom:8px}
.auth-agree .ag-all b{font-size:14.5px;font-weight:800}
.auth-agree .ag-opt{color:var(--muted2);font-weight:700}
.ag-guard{margin-top:10px;padding:14px;border:1px solid var(--line2);
  border-radius:var(--r-m);background:var(--soft);display:flex;flex-direction:column;gap:8px}
/* ★ kids232 — hidden 이 위 display:flex 에 밀리고 있었습니다.
   만 14세 이상을 켜 둬도 보호자 칸이 그대로 열려 있었습니다.
   브라우저 기본 [hidden]{display:none} 은 class 규칙보다 약합니다. */
.ag-guard[hidden]{display:none}

/* 나이 고르기 — 미리 켜 두지 않고 둘 중 하나를 고르게 합니다 (kids261) */
.ag-age{margin:2px 0 4px;font-size:13.5px;color:var(--ink)}
.ag-age>b{color:var(--orange);font-weight:700;display:block;margin-bottom:7px}
.auth-agree .ag-age label{margin:0 0 7px;align-items:center}

/* ★ kids232 — 동의만 받는 화면(/consent)은 한 칸입니다.
   .auth-in 은 로그인·가입용으로 「그림 | 카드 420px」 두 칸입니다.
   /consent 에는 그림이 없어서 카드가 남은 1fr 로 밀렸고,
   640px 에서 420px 과 여백을 뺀 184px 짜리 좁은 칸이 됐습니다.
   글자가 한 줄에 두세 자씩 떨어진 이유입니다. */
.auth-in.one{grid-template-columns:1fr}
.auth-in.one .auth-card{max-width:560px;margin:0 auto}
.ag-line{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.ag-line input,.ag-line select{flex:1;min-width:0;border:1px solid var(--line2);
  border-radius:10px;padding:9px 11px;font-size:14px;background:var(--surface);color:inherit}
@media(max-width:420px){
  .ag-line{flex-direction:column;align-items:stretch;gap:4px}
  .dy-drop{flex-direction:column;align-items:stretch;text-align:center}
}

/* ============================================================
   화풍 고르는 띠 (kids233)
   /series/<slug> · /series/<slug>/<부> 에 붙습니다.

   사장님 말씀 — 「화풍을 선택하거나 바꿀 수 있다고 좀 넣고 싶은데
   화풍을 설명하는 곳이 없어서」 / 「셈플보기하면 셈플 사진 하나
   띄워주는 거지」. 한 칸에 견본 한 장 · 이름 · 설명 · 얼굴 닮음.
   ============================================================ */
.sb{margin:18px 0 20px;padding:16px 16px 14px;background:var(--soft);
  border:1px solid var(--line2);border-radius:var(--r-xl)}
.sb-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-bottom:12px}
.sb-top b{font-family:var(--font-title);font-size:16px;color:var(--ink)}
.sb-top span{font-size:12.5px;color:var(--muted)}

/* 넉 장이 한 줄. 좁아지면 두 줄 → 한 줄로 알아서 접힙니다 */
/* ★ 이름을 .sb-grid 로 갈랐습니다. (kids261)
   「책으로 묶기」 화면(3364줄)이 .sb-row 를 세로 줄 하나로 쓰고 있는데,
   뒤에 오는 이 규칙이 이겨서 그 줄들이 넉 칸 바둑판으로 흩어졌습니다.
   같은 이름 두 벌이 서로 다른 부품이었습니다. */
.sb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.sb-i{display:block;padding:8px;border:2px solid transparent;border-radius:var(--r-m);
  background:var(--surface);text-decoration:none;color:inherit;transition:border-color .15s}
.sb-i:hover{border-color:var(--line)}
.sb-i.on{border-color:var(--orange);background:var(--soft)}

.sb-img{position:relative;display:block;aspect-ratio:4/3;border-radius:10px;overflow:hidden;
  background:var(--line);max-width:100%}
.sb-img img{width:100%;height:100%;object-fit:cover;display:block}
.sb-img.none{background:var(--line)}
.sb-none{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;font-size:11px;line-height:1.4;color:var(--muted2);font-style:normal}
.sb-on{position:absolute;left:6px;bottom:6px;background:var(--orange);color:var(--on-orange,#fff);
  font-size:10.5px;font-weight:700;font-style:normal;padding:3px 7px;border-radius:999px}

.sb-n{display:block;margin:8px 0 2px;font-size:13.5px;font-weight:700;color:var(--ink)}
.sb-d{display:block;font-size:11.5px;line-height:1.5;color:var(--muted);font-style:normal}
.sb-f{display:inline-block;margin-top:6px;font-size:10.5px;font-weight:700;font-style:normal;
  padding:2px 7px;border-radius:999px;background:#F3EADF;color:var(--muted)}
.sb-f.ok{background:#E8F6EC;color:#2E7D46}

.sb-foot{margin:12px 0 0;font-size:11.5px;line-height:1.6;color:var(--muted)}
.sb-foot b{color:var(--ink2)}

@media(max-width:720px){
  .sb-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:380px){
  .sb{padding:12px}
  .sb-grid{grid-template-columns:1fr}
}

html[data-theme="dark"] .sb-i.on{background:#3A2A1A}
html[data-theme="dark"] .sb-f{background:#3A3040;color:#C8BCD4}
html[data-theme="dark"] .sb-f.ok{background:#20402A;color:#9FD9B0}

/* 만들기 안(대본 단계)의 화풍 띠 — 단추로 바꿉니다 (kids233) */
.sb-form{margin:0}
button.sb-i{font:inherit;text-align:left;cursor:pointer;width:100%}
button.sb-i:focus-visible{outline:2px solid var(--orange2);outline-offset:2px}

/* ============================================================
   위저드 진행 바 — 숫자 칸과 길이를 맞춥니다 (kids235)

   사장님 지시 —
     「위에 1 2 3 … 7 제작 저거 있고 아래 바가 있잖아.
      한 칸 넘어갈 때마다 바 진행도랑 저 숫자랑 길이가 같아야지」

   .wz-steps 의 칸이 flex:none 이라 글자 길이만큼만 차지했습니다.
   일곱 칸이 왼쪽 절반에만 몰려 있고, 바는 카드 전체 너비였습니다.
   그래서 ② 에 서 있는데 바는 엉뚱한 자리에 찼습니다.

   일곱 칸을 같은 너비로 펴면, 바가 cur/7 만큼 찰 때 그 끝이
   지금 서 있는 칸의 오른쪽 끝과 정확히 맞습니다.
   ============================================================ */
@media(min-width:620px){
  .wz-steps{gap:0}
  .wz-steps span{flex:1 1 0;min-width:0;justify-content:center;
    padding-left:4px;padding-right:4px;overflow:hidden;text-overflow:ellipsis}
}
/* 좁은 화면에서는 예전처럼 옆으로 밀어 봅니다 — 일곱 칸을 억지로
   구겨 넣으면 글자가 뭉개집니다. 대신 바도 같은 칸으로 계산되므로
   숫자와 어긋나 보이지 않게 바를 칸 줄 바로 아래 붙여 둡니다. */

/* ============================================================
   화풍 화면 보강 (kids236)

   ① 견본 그림이 없는 화풍 카드가 다른 칸보다 작아 줄이 어긋났습니다
      — 네 칸의 그림 자리를 같은 크기로 잡아 둡니다.
      견본이 채워지면 그림이 그 자리에 그대로 들어옵니다.
   ② 견본이 없으면 「미리보기 그대로」를 고를 수 없습니다 — 왜 못 고르는지
      보이게 흐려 둡니다.
   ③ 두 갈래를 그림으로 견주는 칸 — 파일이 생기면 저절로 뜹니다.
   ============================================================ */
.mk-style-in.no-img{display:block;min-height:0;place-items:initial}
/* 카드 그림이 없는 화풍 자리 (kids302 — 「견본 준비 중」은 틀린 말이었습니다) */
.mk-style-in.no-img::before{content:"고르시면 새로 그려요";display:grid;place-items:center;
  width:100%;aspect-ratio:1/1;background:var(--line);color:var(--muted2);font-size:11.5px}
.mk-style-in.no-img b{padding:8px 4px 9px}

.sb-opt.off{opacity:.55}
.sb-opt.off b{color:var(--muted)}
.sb-opt.off input{cursor:not-allowed}

.sb-cmp{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.sb-cmp figure{margin:0}
.sb-cmp img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  border-radius:11px;border:1px solid var(--line2)}
.sb-cmp figcaption{margin-top:6px;font-size:11.5px;color:var(--muted);text-align:center}
@media(max-width:480px){ .sb-cmp{grid-template-columns:1fr} }

/* ============================================================
   우리 아이 관리 — 흰 구멍과 길이 잡기 (kids237)

   사장님 지적 — 「아래로 너무 길고 구조도 엉망이고, 쓸데없는 이미지는 크고」

   ① .kd-two 가 두 칸을 **같은 높이로 늘이고** 있었습니다.
      왼쪽 「확정 캐릭터」는 넉 장짜리인데 오른쪽 「캐릭터 화풍」이
      여섯 장이라 훨씬 깁니다. 그래서 왼쪽에 1,000px 가까운 흰 구멍이
      났습니다. 위쪽 정렬로 바꾸면 그 구멍이 사라집니다.
   ② 좁은 옆칸에 든 화풍 카드의 그림이 정사각이라 세로로 길었습니다.
      옆칸에서는 조금 납작하게 — 고르는 데는 지장이 없습니다.
   ③ 표지가 없는 동화의 📖 자리가 표지만큼 컸습니다. 없는 그림에
      자리를 크게 줄 이유가 없습니다.
   ============================================================ */
.kd-two{align-items:start}

.kd-styles .mk-style-in img,
.kd-styles .mk-style-in.no-img::before{aspect-ratio:5/4}
.kd-styles .mk-style-in b{padding:6px 4px 7px;font-size:12px}
.kd-styles .mk-style-d{display:none}          /* 옆칸에서는 설명 한 줄까지는 과합니다 */

.kd-works span:has(em){aspect-ratio:16/9;background:var(--soft)}
.kd-works em{font-size:17px;opacity:.5}

/* ============================================================
   사진 단계 — 세로 길이 줄이기 (kids239)

   사장님 지적 — 「화면이 세로로 너무 길다. 그리고 아래에 사진이 이미
   있는데 저걸 쓰는 건지 새로 등록을 하란 건지」

   ① 올려 두신 사진을 맨 위에 작게 한 줄로 먼저 보여 줍니다.
      「이 사진으로 캐릭터 만들기」가 그 자리에 있어야 더 안 내려갑니다.
   ② 사진이 있으면 「이런 사진이 좋아요」 칸은 접습니다 — 처음 올리는
      분께만 필요한 이야기입니다.
   ③ 등록된 사진 칸이 3:4 로 컸습니다. 확인용이니 작아도 됩니다.
   ============================================================ */
.ph-mini{display:grid;gap:10px;margin:10px 0 12px}
.ph-mini-p b{display:block;font-size:13px;margin-bottom:6px}
.ph-mini-p b em{font-style:normal;font-weight:600;font-size:11.5px;color:var(--muted);
  margin-left:5px}
.ph-mini-row{display:flex;gap:6px;flex-wrap:wrap}
.ph-mini-row img{width:62px;height:62px;object-fit:cover;border-radius:9px;
  border:1px solid var(--line2);display:block}

/* 접은 안내 — 제목만 보이고 내용은 숨깁니다 */
.ph-tip.fold .ph-angles,
.ph-tip.fold .wz-note{display:none}
.ph-tip.fold{padding-top:12px;padding-bottom:12px}
.ph-tip.fold .st-h{margin:0;font-size:13.5px;color:var(--muted);font-weight:600}
.ph-tip.fold .st-h::after{content:" — 이미 사진이 있어 접어 두었어요";
  font-size:11.5px;font-weight:400}

/* 이미 올린 사진 칸은 작게 (＋ 올리기 칸은 그대로 큽니다) */
.mk-slot.done{aspect-ratio:1/1}
.mk-slots{grid-template-columns:repeat(5,1fr)}
@media(max-width:560px){ .mk-slots{grid-template-columns:repeat(3,1fr)} }

/* 고른 사진 미리보기 — 올리기 전에 눈으로 봅니다 (kids329) */
.mk-pre{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin:0 0 12px}
.mk-pre figure{position:relative;margin:0;aspect-ratio:3/4;border-radius:var(--r-s);
  overflow:hidden;background:var(--soft);border:1px solid var(--line2)}
.mk-pre img{width:100%;height:100%;object-fit:cover;display:block}
.mk-pre-x{position:absolute;top:4px;right:4px;width:24px;height:24px;padding:0;
  border:0;border-radius:50%;background:rgba(0,0,0,.58);color:#fff;font-size:13px;
  line-height:24px;cursor:pointer}
.mk-pre-x:hover{background:rgba(0,0,0,.78)}
@media(max-width:560px){ .mk-pre{grid-template-columns:repeat(3,1fr)} }

/* ============================================================
   대본 + 영상 한 화면 (kids240)

   사장님 지시 —
     「대본이랑 영상을 어떻게 만들까요, 이게 2섹션보다는 하나로
      합쳐진 화면이면 좋겠는데 안 복잡하게」
     「각 장면에 어떻게 할지 고객이 체크박스 체크체크하면 안 될까」

   장면 줄의 🎬 는 대본 폼이 아니라 아래 영상 폼에 들어갑니다
   (form="vidForm"). 그래서 대본을 저장하지 않아도 살아 있습니다.
   ============================================================ */

/* 장면마다 붙는 움직임 체크 */
.sc-mot{display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  align-self:start;margin:6px 0 0;padding:5px 10px;border-radius:999px;
  border:1.5px solid var(--line2);background:var(--surface);
  font-size:12px;color:var(--muted);white-space:nowrap;transition:.15s}
.sc-mot:hover{border-color:var(--orange2)}
.sc-mot.on{border-color:var(--orange);background:var(--soft);color:var(--orange-d);font-weight:700}
.sc-mot input{accent-color:var(--orange);margin:0}
/* 전부 움직이는 때 — 고를 수 없으니 딱지로만 보여 줍니다 (kids479) */
.sc-mot--fixed{cursor:default;font-style:normal}
.sc-mot--fixed:hover{border-color:var(--orange)}

/* 간단히 / 자세히 */
.vd-mode{display:inline-flex;gap:4px;padding:4px;margin-bottom:14px;
  background:var(--soft);border:1px solid var(--line2);border-radius:999px}
.vd-m{border:0;background:transparent;font:inherit;font-size:13px;color:var(--muted);
  padding:7px 16px;border-radius:999px;cursor:pointer}
.vd-m.on{background:var(--orange);color:var(--on-orange,#fff);font-weight:700}

/* 움직임 합계 — 돈이 걸린 숫자라 눈에 띄어야 합니다 */
.vd-sum{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;
  margin-bottom:16px;padding:12px 14px;border-radius:var(--r-m);
  background:var(--soft);border:1px solid #F6D9B8}
.vd-sum b{font-size:14.5px;color:var(--ink)}
.vd-sum > span{font-size:14.5px;font-weight:800;color:var(--orange-d)}
.vd-sum em{font-style:normal;font-size:12px;font-weight:600;color:var(--muted)}
.vd-sum i{flex-basis:100%;font-style:normal;font-size:11.5px;color:var(--muted)}

@media(max-width:560px){
  .vd-mode{width:100%;justify-content:stretch}
  .vd-m{flex:1}
}

/* 알려 드릴 것이 있는 안내 줄 (kids242) */
.wz-note.wz-warn{background:var(--soft);border:1px solid #F6D9B8;border-radius:var(--r-m);
  padding:11px 13px;color:var(--ink2);line-height:1.65}
.wz-note.wz-warn b{color:var(--orange-d)}

/* 대사 목소리 고르는 칸 (kids242 · kids338 에서 「자세히」 밖으로 꺼냄) */
.vd-say-box{margin-top:2px}
.vd-say{display:grid;gap:8px;margin:10px 0 4px}
.vd-say-r{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.vd-say-r b{min-width:86px;font-size:13.5px;color:var(--ink)}
.vd-say-r select{flex:1;min-width:0;border:1px solid var(--line2);border-radius:10px;
  padding:9px 11px;font-size:14px;font-family:inherit;background:var(--surface);color:inherit}
/* 대사 목소리 미리듣기 (kids337) — 나레이터 칸에는 있고 여기엔 없었습니다 */
.vd-say-play{flex:none;border:1px solid var(--line2);background:var(--surface);
  color:var(--ink2);border-radius:999px;padding:7px 13px;font-size:12.5px;
  font-family:inherit;font-weight:700;cursor:pointer;white-space:nowrap}
.vd-say-play:hover{border-color:var(--orange2);color:var(--orange)}
/* 대본 줄의 「누가」 칸 안내 (kids337) */
.cut-hint{margin:2px 0 7px;font-size:12.5px;line-height:1.65;color:var(--muted)}
@media(max-width:480px){
  .vd-say-r b{min-width:0;flex-basis:100%}
  .vd-say-r select{flex:1 1 auto}
  .vd-say-play{padding:7px 11px}
}

/* ============================================================
   kids346 — 목소리 한 표 · 자막 미리보기 · 장면 하나만 고치기
   ============================================================ */

/* 나레이션 줄은 한눈에 구분되게 (대사 줄과 같은 표 안에 있습니다) */
.vd-say-narr{background:var(--soft);border:1px solid var(--line2);
  border-radius:12px;padding:10px 12px}
.vd-say-narr b{color:var(--orange)}

/* 자막 미리보기 — 값이 안 드는 그림입니다 */
.cap-prev{margin:12px 0 4px}
.cap-prev>b{display:flex;align-items:center;gap:8px;font-size:13.5px;margin-bottom:7px}
.cap-prev>b em{font-style:normal;font-size:11.5px;font-weight:700;color:var(--orange);
  background:var(--paper2);border-radius:999px;padding:3px 9px}
.cap-prev img{display:block;width:100%;border-radius:12px;background:#111;
  border:1px solid var(--line2)}
.cap-prev i{display:block;margin-top:6px;font-style:normal;font-size:12px;color:var(--muted)}

/* 영상 화면에서 장면 하나만 고치기 */
.wt-fixall{margin:20px 0 8px;border:1px solid var(--line2);border-radius:16px;
  padding:16px 16px 10px;background:var(--surface)}
.wt-fixall>b{display:block;font-size:15px;margin-bottom:4px}
.wt-fixall>p{margin:0 0 12px;font-size:12.8px;line-height:1.7;color:var(--muted)}
.wt-fixrow{display:flex;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.wt-fixrow img{width:96px;height:64px;object-fit:cover;border-radius:10px;flex:none}
.wt-fixrow>div{flex:1;min-width:0}
.wt-fixrow s{display:block;text-decoration:none;font-size:12.5px;font-weight:800;color:var(--orange)}
.wt-fixrow p{margin:2px 0 6px;font-size:13px;line-height:1.6;color:var(--ink2);
  overflow:hidden;text-overflow:ellipsis}
.wt-fix summary{cursor:pointer;font-size:12.8px;font-weight:700;color:var(--ink2)}
.wt-fix-n{margin:8px 0 6px;font-size:12px;color:var(--muted)}
.wt-fix-f textarea{width:100%;border:1px solid var(--line2);border-radius:10px;
  padding:9px 11px;font-family:inherit;font-size:13.5px;line-height:1.7;resize:vertical}
.wt-fix-r{display:flex;align-items:center;gap:7px;margin:7px 0;font-size:12.5px}
.wt-fix-r em{font-style:normal;color:var(--orange);font-weight:700}
.wt-fix-b{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
.wt-remerge{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  border-top:1px solid var(--line);margin-top:8px;padding-top:12px}
.wt-remerge em{font-style:normal;font-size:11.5px;color:var(--orange);font-weight:800}
.wt-remerge span{font-size:12px;color:var(--muted);flex:1;min-width:180px}
@media(max-width:560px){
  .wt-fixrow img{width:72px;height:52px}
  .wt-fix-b button{flex:1 1 auto}
}

/* ============================================================
   우리 아이 관리 — 화풍 칸을 넓게 폅니다 (kids243)

   사장님 지적 — 「지금 이 화면 너무 복잡하다」

   「확정 캐릭터 | 캐릭터 화풍」을 반반으로 두니 오른쪽이 280px 짜리
   좁은 통이 되어 여섯 화풍이 세로로 길게 늘어섰습니다. 그것 하나가
   페이지 길이의 절반이었습니다. 위아래로 풀고 한 줄에 여섯을 폅니다.
   ============================================================ */
.kd-one{margin-bottom:16px}

.kd-styles-wide .mk-styles{grid-template-columns:repeat(6,1fr);gap:9px}
.kd-styles-wide .mk-style-in img,
.kd-styles-wide .mk-style-in.no-img::before{aspect-ratio:1/1}
.kd-styles-wide .mk-style-d{display:block;font-size:11px}
.kd-styles-wide .mk-style-f{font-size:10px}

@media(max-width:900px){ .kd-styles-wide .mk-styles{grid-template-columns:repeat(3,1fr)} }
@media(max-width:520px){ .kd-styles-wide .mk-styles{grid-template-columns:repeat(2,1fr)}
                         .kd-styles-wide .mk-style-d{display:none} }

/* ══ 남은 토큰 칩 — 머리띠 (kids252 · 2026-09-15 · 사장님 지시) ═══
 *
 * 왜 여기 있나
 * ────────────
 * 영상을 만들려고 눌렀을 때에야 「토큰이 모자라요」를 보면, 그때는
 * 이미 이야기를 다 짓고 그림까지 고른 뒤입니다. 하던 일을 놓고
 * 충전하러 갔다가 돌아와야 합니다. 얼마 남았는지 늘 보이게 둡니다.
 *
 * ★ 이름 칩과 달리 **휴대폰에서도 숨기지 않습니다.**
 *   아래 920px 규칙이 .hd-me·.hd-mewrap 을 숨기는데, 여기는
 *   그 목록에 안 들어갑니다. 「따라다녀야」 하는 것이 이것입니다.  */
.hd-tk{display:inline-flex;align-items:center;gap:5px;flex:none;
  padding:5px 12px;border:1px solid var(--line2);border-radius:var(--r-pill);
  background:var(--surface);line-height:1.2;white-space:nowrap}
.hd-tk:hover{border-color:var(--orange2)}
.hd-tk i{font-style:normal;font-size:13px}
.hd-tk b{font-size:13.5px;font-weight:800;color:var(--ink)}
.hd-tk em{font-style:normal;font-size:11.5px;color:var(--ink2);opacity:.8}
/* 0 이면 눈에 띄게 — 지금 뭔가 만들려던 참일 가능성이 높습니다 */
.hd-tk.zero{border-color:var(--orange2);background:var(--soft)}
.hd-tk.zero b{color:var(--orange)}

@media(max-width:560px){
  /* 좁으면 「토큰」 글자는 버리고 숫자만 남깁니다 */
  .hd-tk{padding:5px 9px;gap:4px}
  .hd-tk em{display:none}
}

/* ══ 자랑하기 · 초대하기 · 작가 딱지 (kids253 · 2026-09-15) ═══
 *
 * 사장님 지시 — 「만든 작품 친구한테 자랑하기, 그다음에 초대하기.
 *   그 사람이 만든 이야기 따라 만드는 경우 딱지 표시되면 좋겠다.
 *   누구 엄마 작품 이런 식으로」                                  */

/* ── 원작자 딱지 — 「소율이 엄마 작품」 ───────────────── */
.wk-from{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:2px 0 10px;padding:7px 13px;border-radius:var(--r-pill);
  background:var(--soft);border:1px solid var(--line2);line-height:1.3}
a.wk-from:hover{border-color:var(--orange2)}
.wk-from i{font-style:normal;font-size:13px}
.wk-from b{font-size:13.5px;font-weight:800;color:var(--ink)}
.wk-from em{font-style:normal;font-size:12.5px;color:var(--ink2)}
/* 내 작품이 따라 만들어지고 있을 때 — 자랑스러운 자리라 색을 줍니다 */
.wk-from.mine{background:var(--ok-bg,#EDF8F1);border-color:#CBE9C2}

/* ── 자랑하기 ─────────────────────────────────────── */
.wk-brag{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-top:14px;padding:16px 18px;border-radius:16px;
  background:var(--soft);border:1px solid var(--line2)}
.wk-brag b{display:block;font-size:15px;font-weight:800;margin-bottom:4px}
.wk-brag p{margin:0;font-size:13.5px;color:var(--ink2);line-height:1.55;max-width:46ch}
.wk-brag-b{display:flex;gap:8px;flex-wrap:wrap;flex:none}

/* 다음 부 이어 만들기 (kids262) */
.wk-next{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-top:14px;padding:16px 18px;border-radius:16px;
  background:#F2F8FF;border:1px solid #CFE2F7}
.wk-next b{display:block;font-size:15px;font-weight:800;margin-bottom:4px;color:#1C4E88}
.wk-next p{margin:0;font-size:13.5px;color:var(--ink2);line-height:1.6;max-width:46ch}
.wk-next p b{display:inline;font-size:inherit;margin:0;color:inherit}
.wk-next .btn-cta{flex:none}
@media(max-width:560px){
  .wk-next{padding:14px 15px}
  .wk-next .btn-cta{width:100%;text-align:center}
}

/* ── 초대 화면 ────────────────────────────────────── */
.iv-box{margin-bottom:16px;padding:18px;border-radius:16px;
  background:var(--surface);border:1px solid var(--line2)}
.iv-h{display:block;font-size:15px;font-weight:800;margin-bottom:10px}
.iv-link{display:flex;gap:8px;flex-wrap:wrap}
.iv-link input{flex:1;min-width:0;padding:10px 13px;font-size:13.5px;
  border:1px solid var(--line2);border-radius:10px;background:var(--bg);color:var(--ink)}
.iv-link button,.iv-link .btn-cta{flex:none}
.iv-note{margin:9px 0 0;font-size:12.5px;color:var(--ink2);line-height:1.6}

.iv-rates{display:flex;gap:10px;flex-wrap:wrap}
.iv-rate{flex:1 1 150px;padding:12px 14px;border-radius:12px;
  background:var(--soft);border:1px solid var(--line2)}
.iv-rate span{display:block;font-size:12.5px;color:var(--ink2)}
.iv-rate b{display:block;font-size:19px;font-weight:800;color:var(--orange);margin-top:3px}
.iv-rate em{font-style:normal;font-size:12px;color:var(--ink2);opacity:.85}

.iv-stats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.iv-stats>div{flex:1 1 120px;padding:14px;border-radius:12px;text-align:center;
  background:var(--surface);border:1px solid var(--line2)}
.iv-stats span{display:block;font-size:12.5px;color:var(--ink2)}
.iv-stats b{display:block;font-size:22px;font-weight:800;margin-top:4px}

.iv-tb{width:100%;border-collapse:collapse;font-size:13.5px}
.iv-tb th,.iv-tb td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--line2)}
.iv-tb th{font-size:12.5px;color:var(--ink2);font-weight:600}

@media(max-width:560px){
  .wk-brag{flex-direction:column;align-items:stretch}
  .wk-brag-b{width:100%}
  .wk-brag-b>*{flex:1;text-align:center}
  .iv-rate{flex:1 1 100%}
}

/* ══ 대본 화면 — 오른쪽이 통째로 비던 것 (kids254 · 2026-09-15) ═══
 *
 * 사장님 지적 — 「저 페이지는 좀 심각하네」
 *
 * 무슨 일이 있었나
 * ────────────────
 * .cut 은 칸이 둘인 격자입니다 (그림 232px · 글 나머지).
 * 그런데 kids240 에서 「🎬 움직임」 딱지를 그 사이에 끼워 넣으면서
 * 자식이 셋이 됐습니다. 격자는 순서대로 칸을 채우니까 —
 *
 *   1번 그림  → 1행 1칸 (232px)
 *   2번 움직임 → 1행 2칸 (나머지 전부)   ← 딱지가 큰 칸을 먹고
 *   3번 글칸  → 2행 1칸 (232px)         ← 글이 좁은 칸으로 밀림
 *
 * 그래서 화면 오른쪽 3분의 2가 비고, 대본은 세 줄짜리 스크롤 상자에
 * 갇혔습니다. 손님이 자기 동화를 읽을 수가 없습니다.
 *
 * 딱지를 아래 단추줄로 옮겨(script.php) 자식을 둘로 되돌렸습니다.
 * 여기서는 글칸이 실제로 넓게 쓰이도록 마무리만 합니다.            */

/* 그림은 제 높이만 차지합니다 — 글이 길어져도 같이 늘어나지 않게 */
.cut{align-items:start}
.cut-img{align-self:start}

/* 대본 칸 — 세 줄 스크롤 상자를 없앱니다.
   읽으면서 고치는 곳이라 한눈에 다 보여야 합니다. */
.cut-narr{min-height:132px;line-height:1.9}
/* 글이 길면 칸도 같이 큽니다 (직접 끌어서 더 키울 수도 있습니다) */
.cut-body{gap:10px}

/* 움직임 딱지가 단추줄에 들어왔습니다 — 저장 단추 왼쪽에 붙습니다 */
.cut-foot .sc-mot{margin:0}

/* 넓은 화면에서는 그림을 조금 더 크게. 232px 는 대본을 좁히려고
   잡았던 값인데, 이제 글칸이 제자리를 찾았으니 그림을 키웁니다. */
@media (min-width:1100px){
  .cut{grid-template-columns:288px 1fr;gap:20px;padding:18px}
  .cut-narr{min-height:150px}
}

/* 입력 칸 아래 한 줄 도움말 (kids255)
   — 「성은 빼고 이름만」 같은 말을 칸 바로 밑에 붙입니다.
     빈칸 힌트(placeholder)로는 안 읽힙니다. 적고 나면 사라지니까요. */
.wz-hint{display:block;margin-top:5px;font-style:normal;
  font-size:12px;color:var(--muted);line-height:1.5}

/* ══ 무료 동화책 (kids256 · 2026-09-15 · 사장님 아이디어) ═══════
 *
 * 「아이한테 무료 동화책 읽어주다가 하나 만들어볼까 하게 되는 거지」
 *
 * 아이와 같이 보는 화면입니다. 그림을 크게, 글을 큼직하게 둡니다.
 * 어른용 촘촘한 화면과 다릅니다 — 다섯 살이 옆에서 같이 봅니다.       */

.fb-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin-bottom:18px;padding:22px 24px;border-radius:20px;
  background:var(--soft);border:1px solid var(--line2)}
.fb-hero h1{margin:0 0 6px;font-size:28px}
.fb-hero .lead{margin:0;max-width:52ch}
.fb-hero-ic{font-size:56px;flex:none;line-height:1}

.fb-kinds{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
.fb-kind{padding:8px 15px;border-radius:var(--r-pill);font-size:13.5px;
  border:1px solid var(--line2);background:var(--surface);color:var(--ink2)}
.fb-kind:hover{border-color:var(--orange2)}
.fb-kind.on{background:var(--orange);border-color:var(--orange);color:var(--on-orange,#fff);font-weight:700}

.fb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
.fb-card{display:block;border-radius:16px;overflow:hidden;background:var(--surface);
  border:1px solid var(--line2);padding-bottom:12px}
.fb-card:hover{border-color:var(--orange2)}
.fb-img{display:block;aspect-ratio:16/10;background:var(--soft)}
.fb-img img{width:100%;height:100%;object-fit:cover;display:block}
.fb-card b{display:block;margin:11px 13px 3px;font-size:15px;font-weight:700;color:var(--ink)}
.fb-card i{display:block;margin:0 13px;font-style:normal;font-size:12.5px;color:var(--ink2)}
.fb-tag{display:inline-block;margin:8px 13px 0;padding:3px 9px;border-radius:999px;
  font-style:normal;font-size:11.5px;background:var(--soft);color:var(--orange-d)}
.fb-tag.off{color:var(--muted)}

.fb-cta{margin-top:26px;padding:22px;border-radius:18px;text-align:center;
  background:var(--soft);border:1px solid var(--line2)}
.fb-cta>b{display:block;font-size:17px;margin-bottom:6px}  /* kids634 — 제목 b 만 (문장 속 굵은 글씨가 줄을 끊었습니다: fb-cta·pg-g-do·mk-qr·my-note·gv-txt) */
.fb-cta p{margin:0 0 14px;font-size:14px;color:var(--ink2);line-height:1.6}
.fb-cta.big{margin-top:34px;padding:30px 22px}
.fb-cta.big>b{font-size:20px}

/* ── 읽는 화면 ────────────────────────────────────── */
.fb-read{max-width:760px}
.fb-rhead{margin:12px 0 16px}
.fb-rhead h1{margin:0 0 4px;font-size:26px}
.fb-rhead p{margin:0;font-size:13.5px;color:var(--ink2)}

.fb-bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;
  flex-wrap:wrap;padding:11px 0;margin-bottom:10px;background:var(--bg)}

.fb-page{position:relative;margin-bottom:26px;padding-bottom:22px;
  border-bottom:1px dashed var(--line2)}
.fb-page.on figure{outline:3px solid var(--orange);outline-offset:3px}
.fb-page figure{margin:0 0 14px;border-radius:16px;overflow:hidden;background:var(--soft)}
.fb-page figure img{width:100%;display:block}
.fb-pno{position:absolute;left:10px;top:10px;z-index:2;min-width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;padding:0 9px;border-radius:999px;
  background:rgba(0,0,0,.6);color:#fff;font-size:13px;font-weight:800}
.fb-page h2{margin:0 0 8px;font-size:19px}
/* 글은 큼직하게 — 아이와 같이 읽습니다 */
.fb-text{margin:0;font-size:18px;line-height:1.95;color:var(--ink)}
.fb-lines{margin-top:12px;padding:12px 14px;border-radius:12px;background:var(--soft)}
.fb-lines p{margin:0 0 6px;font-size:16px;line-height:1.8}
.fb-lines p:last-child{margin-bottom:0}
.fb-lines b{color:var(--orange-d)}
.fb-one{margin-top:12px;padding:8px 14px;border-radius:var(--r-pill);cursor:pointer;
  border:1px solid var(--line2);background:var(--surface);color:var(--ink2);font:inherit;font-size:13.5px}
.fb-one:hover{border-color:var(--orange2);color:var(--orange)}

.fb-note{margin:18px 0 0;font-size:12.5px;color:var(--muted);line-height:1.6}
.fb-next{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:18px;padding:16px 18px;border-radius:14px;
  background:var(--surface);border:1px solid var(--line2)}
.fb-next:hover{border-color:var(--orange2)}
.fb-next span{font-size:12.5px;color:var(--ink2)}
.fb-next b{font-size:15.5px}

@media(max-width:560px){
  .fb-hero{padding:18px}
  .fb-hero h1{font-size:23px}
  .fb-hero-ic{display:none}
  .fb-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .fb-text{font-size:17px}
}

/* ============================================================
   가족 영상 — 얼마나 드나요 (kids261)

   /family/{갈래} 화면이 .sm-plans · .sm-plan · .sm-hot 을 쓰는데
   **이 이름들에 규칙이 한 줄도 없었습니다.** 그래서 요금 칸이
   민무늬 div 로 세로로 쌓이고, <i> 는 기울고 <u> 는 밑줄이 그어진
   브라우저 기본 모습 그대로 나갔습니다. 돈 이야기를 하는 자리입니다.
   ============================================================ */
.sm-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.sm-plan{position:relative;background:var(--soft);border:1.5px solid var(--line2);
  border-radius:var(--r-m);padding:16px 13px 14px;text-align:center}
.sm-plan.hot{border-color:var(--orange);background:var(--paper)}
.sm-plan b{display:block;font-size:14.5px;color:var(--ink);margin-bottom:6px}
.sm-plan i{display:block;font-style:normal;font-size:12.5px;color:var(--muted)}
.sm-plan em{display:block;font-style:normal;font-size:12px;color:var(--muted2);margin-top:2px}
.sm-plan u{display:block;text-decoration:none;margin-top:9px;
  font-family:var(--font-title);font-size:19px;color:var(--orange-d)}
.sm-hot{position:absolute;top:-9px;left:50%;transform:translateX(-50%);white-space:nowrap;
  background:var(--orange);color:var(--on-orange,#fff);border-radius:999px;
  padding:3px 10px;font-size:10.5px;font-weight:800}
@media(max-width:560px){
  .sm-plans{grid-template-columns:1fr 1fr;gap:9px}
  .sm-plan{padding:14px 9px 12px}
  .sm-plan u{font-size:17px}
}

/* ============================================================
   가격 안내 화면 — 없던 규칙을 채웁니다 (kids261)

   /price 가 쓰는 이름 여덟 개에 규칙이 **한 줄도 없었습니다.**

     .pc-grid3  세 벌 나란히   → 세로로 쌓였습니다
     .pc-free   가입 선물 안내 → 그냥 본문 글
     .pc-tok    토큰 수        → 값이 안 보임
     .pc-sub .pc-cta .pc-mini .pc-rate .pc-print

   돈을 보여 주는 화면입니다. 여기가 어설프면 결제로 안 넘어갑니다.
   ============================================================ */
.pc-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
.pc-grid3>.pc-card{position:relative}

.pc-free{margin:0 0 20px;text-align:center;background:#F3FAEF;border:1px solid #CFE7C2;
  border-radius:var(--r-l);padding:13px 16px;font-size:13.5px;color:#2F5A22;line-height:1.75}
.pc-free b{color:#245018}

.pc-tok{display:inline-block;margin-top:6px;background:var(--orange-soft);color:var(--orange-d);
  border-radius:999px;padding:3px 11px;font-size:12.5px;font-weight:800}
.pc-sub{margin:9px 0 0;font-size:12.5px;color:var(--muted2);line-height:1.7;word-break:keep-all}

.pc-cta{display:block;max-width:360px;margin:26px auto 0;text-align:center}
.pc-mini{margin:11px 0 0;text-align:center;font-size:12.5px;color:var(--muted2);
  line-height:1.8;word-break:keep-all}

.pc-rate{margin:0;padding-left:0;list-style:none;font-size:13.5px;color:var(--ink2)}
.pc-rate li{display:flex;align-items:baseline;gap:10px;padding:7px 0;
  border-bottom:1px dashed var(--line2)}
.pc-rate li:last-child{border-bottom:0}
.pc-rate li b{margin-left:auto;font-size:14px;color:var(--ink);white-space:nowrap}
.pc-rate li.free b{color:#3B7A2A}
.pc-rate .mut{font-size:11.5px;color:var(--muted2)}

.pc-print{position:relative;margin-top:26px}

@media(max-width:900px){
  .pc-grid3{grid-template-columns:1fr;gap:14px}
  .pc-grid3>.pc-card.main{order:-1}
}
@media(max-width:560px){
  .pc-cta{max-width:none}
  .pc-rate li{gap:7px;font-size:13px}
}

/* ============================================================
   아주 좁은 휴대폰 (≤400px) 머리말 (kids261)

   360px 짜리 화면(갤럭시 보급형·아이폰 SE)에서 머리말 속이
   쓸 수 있는 폭보다 넓어 오른쪽이 잘렸습니다. 로그인하신 분은
   로고 + 나이 띠 + 토큰 칩 + 얼굴이 한 줄에 다 들어가야 합니다.

   지우지 않고 **줄입니다** — 토큰 칩은 사장님이 「따라다녀야
   된다」고 하신 것이라 여기서도 남깁니다.
   ============================================================ */
@media (max-width:400px){
  :root{--pad-x:12px}
  .hd-in{gap:7px}
  .hd-act{gap:6px}
  .hd-logo{height:30px}              /* kids634 — 나이 띠가 없어져 자리가 났습니다 (21 → 30) */
  .hd-logotext{font-size:17px}
  .age-tab{padding:2px}
  .age-tab a{padding:5px 7px;font-size:11.5px}
  .hd-tk{padding:4px 8px;gap:3px}
  .hd-tk b{font-size:12.5px}
  .hd-act .lg{max-width:64px;font-size:12.5px}
  .hd-act .btn-ghost{padding:6px 9px;font-size:12px}
  .hd-av{width:24px;height:24px}
}

/* ── 책 뷰어: 지금 읽고 있는 쪽 (kids327) ──────────────
   아이와 같이 보는 화면입니다. 어느 쪽을 읽는 중인지 눈에 보여야
   따라옵니다. 소리만 나고 화면에 표시가 없으면 어디를 읽는지 모릅니다. */
.bk-page.reading{position:relative}
.bk-page.reading::after{content:'';position:absolute;inset:-6px;border-radius:14px;
  border:2px solid var(--orange);pointer-events:none;
  animation:bkRead 1.6s ease-in-out infinite}
@keyframes bkRead{0%,100%{opacity:.85}50%{opacity:.3}}
/* kids624 — 문단 통째가 아니라 **지금 읽는 문장·대사 줄만** 칠합니다 */
.bk-s,.bk-l{transition:background .25s}
.bk-page.reading .bk-s.on,.bk-page.reading .bk-l.on{background:linear-gradient(transparent 55%,rgba(255,168,74,.42) 0);border-radius:2px}
html[data-theme="dark"] .bk-page.reading .bk-s.on,html[data-theme="dark"] .bk-page.reading .bk-l.on{background:linear-gradient(transparent 55%,rgba(255,168,74,.35) 0)}
@media (prefers-reduced-motion:reduce){ .bk-page.reading::after{animation:none} }



/* ============================================================
   kids354 — 첫 장면 그림 위에서 자막을 정하고, 그 아래에서 목소리를
   ============================================================ */
.cv-card{margin-bottom:16px}
.cv-prev{position:relative;margin:10px 0 14px}
.cv-prev img{display:block;width:100%;border-radius:14px;background:#111;
  border:1px solid var(--line2)}
.cv-prev-off{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(20,16,12,.62);color:#fff;border-radius:14px;font-size:14px;font-weight:700}
.cv-rows{display:grid;gap:10px}
.cv-row{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.cv-row>b{flex:none;width:82px;padding-top:7px;font-size:13px;color:var(--ink2)}
.cv-row .wz-chips{flex:1;min-width:0;margin:0}
.cv-col span{display:inline-flex;align-items:center;gap:6px}
.cv-col i{width:12px;height:12px;border-radius:50%;border:1px solid var(--line2);
  display:inline-block;flex:none}
@media(max-width:560px){
  .cv-row{flex-direction:column;gap:4px}
  .cv-row>b{width:auto;padding-top:0}
}

/* 장면 목록 머리 — 움직임을 고르는 자리는 여기 하나입니다 */
.cut-bulk{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--soft);border:1px solid var(--line2);border-radius:14px;
  padding:12px 15px;margin:0 0 12px}
.cut-bulk>b{font-size:14px}
.cut-bulk>span{flex:1;min-width:180px;font-size:12.5px;color:var(--muted);line-height:1.6}
.cut-bulk a{flex:none;border:1px solid var(--line2);background:var(--surface);
  border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:700;
  color:var(--ink2);text-decoration:none}
.cut-bulk a:hover{border-color:var(--orange2);color:var(--orange)}
/* 전부 움직이는 때 — 드는 값을 여기서 미리 적습니다 (kids479) */
.cut-bulk-cost{flex:none;font-style:normal;font-size:12.5px;color:var(--orange-d);
  background:var(--soft);border:1.5px solid var(--orange);border-radius:999px;
  padding:6px 13px;white-space:nowrap}
.cut-bulk-cost em{font-style:normal;color:var(--muted);font-weight:400;margin-left:4px}
@media (max-width:560px){.cut-bulk-cost{width:100%;text-align:center}}

/* 확정 화면 — 이 인물이 이야기에서 무엇을 하나 */
.lk-part{width:100%;margin:0 0 8px;border:1px solid var(--line2);border-radius:9px;
  padding:6px 8px;font-family:inherit;font-size:11.5px;background:var(--surface);
  color:var(--ink2)}


/* kids356 — 확정했는데 대본에서 말하지 않는 사람 */
.cv-miss{border:1px solid var(--orange2);background:var(--soft);border-radius:14px;
  padding:13px 16px;margin:12px 0 4px}
.cv-miss>b{display:block;font-size:13.5px;margin-bottom:7px;color:var(--orange-d)}
.cv-miss-list{display:grid;gap:10px}
.cv-miss-r{display:grid;gap:5px;padding:9px 0;border-top:1px solid var(--line)}
.cv-miss-r>b{font-size:13px}
.cv-miss-r>b s{text-decoration:none;font-size:10.5px;font-weight:800;color:#fff;
  background:var(--orange);border-radius:999px;padding:2px 8px;margin-left:6px}
.cv-miss-r select{border:1px solid var(--line2);border-radius:9px;padding:7px 10px;
  font-family:inherit;font-size:13px;background:var(--surface);color:var(--ink);max-width:340px}
.cv-miss-r span{font-size:12px;line-height:1.7;color:var(--muted)}
.cv-miss-btn{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:11px}
.cv-miss-btn em{font-style:normal;font-size:11px;color:#fff;opacity:.85;font-weight:800}
.cv-miss-btn span{font-size:11.5px;color:var(--muted)}

/* kids359 — AI 가 안 넣어 줄 때 직접 넣는 길 */
.cv-miss-hand{margin:9px 0 0;font-size:12px;line-height:1.75;color:var(--muted);
  border-top:1px dashed var(--line2);padding-top:9px}

/* ── 영상 화면: 지금 만드는 중 · 언제 이어붙였나 (kids365) ──
 *
 *   「2장면 고치기 했는데 진행바가 안 보임」
 *   「90토큰을 쓰고 15분 가량 지났는데 아직 그대로」
 *
 * 값은 나갔는데 화면이 조용하면 고장으로 보입니다. 눈에 띄게 둡니다. */
.wt-work{display:block;background:var(--paper);border:1.5px solid var(--orange2);
  border-radius:15px;padding:15px 18px;margin:0 0 16px}
.wt-work > b{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--orange-d)}
.wt-work > span{display:block;margin-top:6px;font-size:13px;color:var(--ink2);line-height:1.65}
.wt-work-n{color:var(--muted) !important;font-size:12.5px !important}
.wt-work.bad{background:#FFF5F5;border-color:#F3B4B4}
.wt-work.bad > b{color:#B3261E}
.wt-when{display:inline-block;margin-left:8px;background:var(--soft);
  border:1px solid var(--line2);border-radius:var(--r-pill);
  padding:2px 10px;font-size:12px;color:var(--ink2);font-weight:700}
.wt-one2{margin:6px 0 0;font-size:12.5px;color:var(--muted);line-height:1.65;text-align:center}
@media(max-width:560px){
  .wt-when{display:block;margin:6px auto 0;width:max-content}
}

/* 따라 만들기 — 무엇이 넘어가는지 (kids372) */
.rmx-what{margin:8px 0 0;font-size:12.5px;line-height:1.7;color:var(--muted);
  background:var(--soft);border:1px dashed var(--line2);border-radius:11px;padding:10px 12px}

/* ══ 완성작 랭킹 — 일간·주간·월간 (kids373) ═══════════
 *
 *   「일간 주간 월간 영상들 랭킹도 나오면 좋겠다」
 *
 * 1~3등은 눈에 띄게, 나머지는 조용하게. 순위가 없을 때는
 * 빈 표 대신 「왜 비었는지」가 이 자리에 앉습니다. */
.rk{background:var(--surface);border:1.5px solid var(--line2);border-radius:var(--r-l);
  padding:16px 18px;margin:0 0 18px}
.rk-hd{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.rk-hd > b{font-size:16px}
.rk-tabs{display:flex;gap:6px;margin-left:auto}
.rk-tabs a{border:1.5px solid var(--line2);border-radius:var(--r-pill);
  padding:5px 13px;font-size:12.5px;color:var(--ink2);transition:.18s}
.rk-tabs a:hover{border-color:var(--orange2);color:var(--orange-d)}
.rk-tabs a.on{background:var(--orange);border-color:transparent;color:var(--on-orange,#fff);font-weight:700}

.rk-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.rk-row{display:flex;align-items:center;gap:12px;padding:8px 6px;border-radius:12px}
.rk-row:hover{background:var(--soft)}
.rk-row.top .rk-no{background:var(--orange);color:var(--on-orange,#fff);border-color:transparent}
.rk-no{flex:none;width:26px;height:26px;display:grid;place-items:center;
  border:1.5px solid var(--line2);border-radius:50%;
  font-size:12.5px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.rk-img{flex:none;width:58px;height:40px;border-radius:9px;overflow:hidden;
  background:var(--soft);display:grid;place-items:center}
.rk-img img{width:100%;height:100%;object-fit:cover}
.rk-img em{font-style:normal;font-size:17px}
.rk-tx{flex:1;min-width:0;color:inherit}
.rk-tx b{display:block;font-size:13.5px;line-height:1.45;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk-tx span{display:block;font-size:11.5px;color:var(--muted2);margin-top:2px}
.rk-n{flex:none;font-size:11.5px;color:var(--muted);text-align:right;white-space:nowrap}
.rk-n b{display:block;font-size:14px;color:var(--ink2);font-variant-numeric:tabular-nums}
.rk-n em{font-style:normal;color:var(--orange-d)}

.rk-none{margin:4px 0 0;font-size:13px;color:var(--muted);line-height:1.7}
.rk-note{margin:10px 0 0;font-size:11.5px;color:var(--muted2);line-height:1.6}

@media(max-width:560px){
  .rk{padding:14px}
  .rk-hd > b{width:100%}
  .rk-tabs{margin-left:0}
  .rk-img{width:46px;height:34px}
  .rk-n{font-size:11px}
  .rk-n b{font-size:12.5px}
}

/* ══ 어떤 이야기로 만들까요 — 만들기 갈림길 (kids382) ═══
 *
 *   「우리 아이 동화 만들기 눌러서 들어갔으면 직접 동화 만들 건지
 *     전래동화인지 이런 거 선택」
 *
 * 여태 묻지도 않고 직접 만들기로 갔습니다. 둘을 나란히 놓고
 * 고르시게 합니다. 휴대폰에서는 위아래로 놓습니다. */
.mk-pick{margin-bottom:16px}
.mk-pick2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.mk-pick-one{display:block;width:100%;text-align:left;color:inherit;
  background:var(--surface);border:1.5px solid var(--line2);border-radius:var(--r-l);
  padding:16px 16px 14px;cursor:pointer;transition:.18s;font:inherit}
.mk-pick-one:hover{border-color:var(--orange2);transform:translateY(-1px)}
.mk-pick-one.on{border-color:var(--orange);background:var(--soft)}
.mk-pick-one em{font-style:normal;font-size:26px;display:block;margin-bottom:6px}
.mk-pick-one b{display:block;font-size:15px;margin-bottom:5px}
.mk-pick-one span{display:block;font-size:12.5px;color:var(--muted);line-height:1.6}
.mk-pick-one i{display:block;margin-top:9px;font-style:normal;font-size:12.5px;
  font-weight:700;color:var(--orange-d)}
@media(max-width:560px){
  .mk-pick2{grid-template-columns:1fr}
}

/* 배경·분위기를 직접 적는 칸 (kids387)
 *   「배경이 너무 한정적이라서」 — 카드로만 고르게 두면 우리 아이가
 *   아는 곳을 못 적습니다. */
.sy-own{display:block;margin:10px 0 4px}
.sy-own > span{display:block;font-size:13px;font-weight:700;color:var(--ink2);margin-bottom:6px}
.sy-own em{display:block;margin-top:5px;font-style:normal;font-size:12px;color:var(--muted2)}

/* ── 얼굴 사진 찍기 (kids391) ─────────────────────────
 *
 *   「카메라에 가이드가 있으면 좋겠다. 여권 사진 찍듯이 정확히
 *     얼굴 테두리 있고 그 안에 들어오게 찍게」
 *
 * 타원 바깥은 어둡게 덮습니다. 밝은 데를 보게 되니 저절로 그 안에
 * 얼굴을 넣게 됩니다. 눈높이 줄과 턱 줄을 같이 그어, 위아래도
 * 맞출 수 있게 합니다. */
html.cam-open, html.cam-open body { overflow:hidden }

.cam{position:fixed;inset:0;z-index:9000;background:#0b0b0d;display:none;
  flex-direction:column}
.cam.on{display:flex}
.cam.flash .cam-stage::after{content:'';position:absolute;inset:0;background:#fff;
  animation:camFlash .18s ease-out}
@keyframes camFlash{from{opacity:.85}to{opacity:0}}

.cam-stage{position:relative;flex:1;min-height:0;overflow:hidden;background:#000}
.cam-v{width:100%;height:100%;object-fit:cover;display:block}
.cam-v.mirror{transform:scaleX(-1)}

/* 타원 바깥을 덮는 어둠 — 가운데만 뚫어 놓습니다 */
.cam-mask{position:absolute;inset:0;pointer-events:none}
.cam-oval{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  width:min(68vw,330px);aspect-ratio:3/4;border-radius:50%/42%;
  border:3px dashed rgba(255,255,255,.92);
  box-shadow:0 0 0 100vmax rgba(0,0,0,.55)}
/* 눈높이 줄 — 타원 위에서 4할쯤 */
.cam-eye{position:absolute;left:50%;top:calc(46% - min(68vw,330px)*4/3*0.5 + min(68vw,330px)*4/3*0.40);
  transform:translate(-50%,-50%);width:min(52vw,250px);height:0;
  border-top:2px solid rgba(255,214,102,.95)}
/* 턱 줄 — 타원 아래쪽 */
.cam-chin{position:absolute;left:50%;top:calc(46% + min(68vw,330px)*4/3*0.5 - min(68vw,330px)*4/3*0.10);
  transform:translate(-50%,-50%);width:min(40vw,190px);height:0;
  border-top:2px dotted rgba(255,255,255,.7)}

.cam-hint{position:absolute;left:0;right:0;bottom:16px;margin:0;text-align:center;
  color:#fff;font-size:15px;line-height:1.5;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.cam-hint b{display:block;font-weight:500;font-size:12.5px;opacity:.82;margin-top:3px}

.cam-x,.cam-flip{position:absolute;top:14px;width:42px;height:42px;border-radius:50%;
  border:none;background:rgba(0,0,0,.5);color:#fff;font-size:17px;cursor:pointer}
.cam-x{left:14px}
.cam-flip{right:14px}

.cam-strip{display:flex;gap:8px;padding:10px 14px;overflow-x:auto;background:#141416}
.cam-strip figure{margin:0;position:relative;flex:0 0 auto}
.cam-strip img{width:64px;aspect-ratio:3/4;object-fit:cover;border-radius:9px;display:block}
.cam-strip button{position:absolute;right:3px;top:3px;width:20px;height:20px;border-radius:50%;
  border:none;background:rgba(0,0,0,.65);color:#fff;font-size:10px;cursor:pointer;line-height:1}

.cam-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;
  padding:16px 16px calc(16px + env(safe-area-inset-bottom));background:#141416}
.cam-bar button{border:none;cursor:pointer;font-family:inherit}
.cam-album,.cam-done{height:44px;border-radius:12px;font-size:14px;font-weight:600;
  background:rgba(255,255,255,.12);color:#fff}
.cam-done{background:var(--orange,#ff7a2f)}
.cam-done:disabled{background:rgba(255,255,255,.12);color:rgba(255,255,255,.4);cursor:default}
.cam-shot{width:70px;height:70px;border-radius:50%;background:transparent;
  border:4px solid rgba(255,255,255,.9) !important;display:grid;place-items:center;padding:0}
.cam-shot i{width:52px;height:52px;border-radius:50%;background:#fff;display:block}
.cam-shot:active i{transform:scale(.9)}

/* 사진 칸 옆의 찍기 단추 */
.ph-cam{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.ph-cam .btn-ghost{flex:1;min-width:150px;text-align:center}
.cam.waiting .cam-shot{opacity:.45}
.cam-shot:disabled{cursor:default}

/* 장면마다 넘김 고르기 (kids392) */
.xf-each{margin:2px 0 10px}
.xf-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.xf-row>b{flex:0 0 118px;font-size:13px;font-weight:600;color:var(--muted,#6b6b74)}
.xf-row>b span{opacity:.55;margin:0 2px}
.xf-row select{flex:1;min-width:0}
@media(max-width:420px){
  .xf-row{flex-direction:column;align-items:stretch;gap:4px}
  .xf-row>b{flex:none}
}

/* 관리자가 회원 눈으로 보는 중 (kids393) */
.impbar{position:sticky;top:0;z-index:8000;display:flex;align-items:center;gap:12px;
  flex-wrap:wrap;justify-content:center;padding:9px 14px;
  background:#B42318;color:#fff;font-size:13px;line-height:1.5}
.impbar b{font-weight:700}
.impbar a{color:#fff;text-decoration:underline;white-space:nowrap}

/* 얼굴 짚기 (kids394) —
 *   「카메라 얼굴 인식 페이스 마킹 달고 싶다. 필수」
 * 찾은 얼굴을 네모로 짚고, 타원에 알맞게 들어오면 초록으로 바뀝니다. */
.cam-mark{position:absolute;border:2.5px solid rgba(255,214,102,.95);border-radius:10px;
  box-shadow:0 0 0 1px rgba(0,0,0,.35);pointer-events:none;transition:.12s linear;z-index:2}
.cam-mark.ok{border-color:#3ddc84;box-shadow:0 0 12px rgba(61,220,132,.6)}
.cam-fit{position:absolute;left:0;right:0;bottom:56px;margin:0;text-align:center;
  font-size:14px;font-weight:700;pointer-events:none;z-index:3;
  text-shadow:0 1px 6px rgba(0,0,0,.8)}
.cam-fit.ok{color:#3ddc84}
.cam-fit.warn{color:#ffd666}

/* 동화책 화면의 화풍 갈아 보기 · 부 목록의 화풍 줄 (kids394) */
.bk-sts,.sr-sts{display:inline-flex;gap:6px;flex-wrap:wrap;align-items:center}
.bk-sts a,.sr-sts a{font-size:12px;padding:4px 10px;border-radius:999px;
  border:1px solid rgba(0,0,0,.14);color:inherit;text-decoration:none;white-space:nowrap}
.bk-sts a{border-color:rgba(255,255,255,.28)}
.bk-sts a.on,.sr-sts a.on{background:var(--orange,#ff7a2f);border-color:transparent;color:#fff;font-weight:600}
.sr-sts{margin-top:6px}
@media(max-width:600px){ .bk-hd-in b{display:none} }

/* 후기 남기는 칸 (kids394) */
.rv-new{background:var(--surface,#fff);border:1px solid rgba(0,0,0,.08);border-radius:var(--r-xl,18px);
  padding:18px;margin-bottom:20px}
.rv-new>b{display:block;font-family:var(--font-title);font-size:17px;margin-bottom:4px}
.rv-new>p{margin:0 0 12px;font-size:13px;line-height:1.7}
.rv-new-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.rv-new-row label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted,#6b6b74);flex:1;min-width:150px}
.rv-new-row select{padding:9px 10px;border-radius:10px;border:1px solid rgba(0,0,0,.14);
  font-family:inherit;font-size:14px;background:#fff}
.rv-new textarea{width:100%;padding:11px 12px;border-radius:12px;border:1px solid rgba(0,0,0,.14);
  font-family:inherit;font-size:14.5px;line-height:1.7;resize:vertical}
.rv-new-btns{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px}
.rv-new-btns .btn-cta{margin-left:auto}

/* 엔진 견주기 — 링크로 들어오신 분 화면 (kids396) */
.et-up .ch-drop{margin-bottom:10px}
.et-pre{margin:10px 0 0}
.et-pre img{width:170px;aspect-ratio:3/4;object-fit:cover;border-radius:12px;display:block}
.et-agree{display:flex;gap:10px;align-items:flex-start;margin:16px 0 14px;
  padding:13px 14px;border-radius:12px;background:rgba(0,0,0,.03);
  border:1px solid rgba(0,0,0,.08);font-size:13px;line-height:1.75}
.et-agree input{margin-top:3px;flex:none;width:18px;height:18px}

.et-how{font-size:14px;line-height:1.8;margin:6px 0 14px}
.et-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.et-p{position:relative;padding:0;border:3px solid transparent;border-radius:14px;
  background:none;cursor:pointer;font-family:inherit;text-align:center}
.et-p img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:11px;display:block}
.et-p s{display:block;text-decoration:none;font-size:12px;color:var(--muted,#6b6b74);padding:5px 0 2px}
.et-p.on{border-color:var(--orange,#ff7a2f)}
.et-p.r1{border-color:#E8A317}
.et-p.r2{border-color:#9AA4B2}
.et-p.r3{border-color:#B07A4B}
.et-p-no{position:absolute;left:8px;top:8px;min-width:30px;padding:3px 8px;border-radius:999px;
  background:rgba(0,0,0,.62);color:#fff;font-size:12px;font-weight:700;font-style:normal}
.et-p.on .et-p-no{background:var(--orange,#ff7a2f)}
.et-p.r1 .et-p-no{background:#E8A317}
.et-p.r2 .et-p-no{background:#9AA4B2}
.et-p.r3 .et-p-no{background:#B07A4B}
.et-vote-btn{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px}
.et-vote-btn .mut{font-size:12.5px}

/* ── 뜬다 랭킹 (첫 화면) ─────────────────────────────── */
/* kids404 · 사장님 지시 2026-09-19 —
   「첫화면에 영상랭킹 컨덴츠 들어갓음좋겠네 뜬다 랭킹 이라고해서?」
   바로 위 트렌드 카드와 같은 결로 맞춥니다. 다섯 칸이 한 줄, 좁아지면
   둘씩 내려갑니다. 휴대폰에서도 가로 스크롤이 안 생기게 둡니다. */
.rk-home{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:6px}
.rk-home .rkh{display:block;color:inherit;text-decoration:none}
.rkh-im{position:relative;display:block;border-radius:var(--r-card,14px);overflow:hidden;
  aspect-ratio:3/4;background:var(--soft)}
.rkh-im img{width:100%;height:100%;object-fit:cover;display:block;transition:.2s}
.rk-home .rkh:hover .rkh-im img{transform:scale(1.04)}
.rkh-no{position:absolute;top:8px;left:8px;min-width:26px;height:26px;padding:0 7px;
  border-radius:9px;background:rgba(255,255,255,.94);color:var(--ink2);
  display:grid;place-items:center;font-size:14px;font-weight:800;line-height:1}
.rkh-no.top{background:var(--orange);color:var(--on-orange,#fff)}
.rkh-t{display:block;margin-top:9px;font-size:14px;line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical}
.rkh-s{display:block;margin-top:3px;font-size:11.5px;color:var(--muted2)}
html[data-theme="dark"] .rkh-no{background:rgba(255,255,255,.9);color:#111}
@media(max-width:900px){ .rk-home{grid-template-columns:repeat(3,1fr)} }
@media(max-width:560px){ .rk-home{grid-template-columns:repeat(2,1fr);gap:11px} }
/* 「매일 새벽에 다시 셉니다」는 오른쪽 끝으로 — 랭킹 칸에서만.
   위 트렌드 칸은 지금 모양 그대로 둡니다 (메인은 시안 없이 안 건드립니다). */
#rank .tr-head{align-items:flex-end}
#rank .tr-when{margin-left:auto;white-space:nowrap}
@media(max-width:560px){ #rank .tr-head{display:block} #rank .tr-when{margin-top:8px;display:block} }
/* 갈래별 랭킹 카드 묶음 (kids406) — 머리글은 기존 랭킹과 같은 모양 */
.rk-cards{margin:22px 0 6px}
.rk-cards .rk-hd{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.rk-cards .rk-hd b{font-family:var(--font-title);font-size:17px}
.rk-cards .rk-tabs{margin-left:auto;display:flex;gap:6px}
.rk-cards .rk-note{margin-top:12px;font-size:11.5px;color:var(--muted2);text-align:center}

/* ══════════════════════════════════════════════════════════════
   ★★★ kids432 — 휴대폰에서만 걸리는 고침 두 묶음
        (2026-09-19 · 손님 대부분이 휴대폰을 씁니다)

   이 덩어리는 **파일 맨 끝**에 있어야 합니다. 위에 흩어져 있는
   같은 이름의 규칙들을 나중에 적힌 힘으로 덮는 방식이라,
   가운데로 옮기면 그대로 다시 깨집니다.
   ══════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────
   ① 입력칸 글자를 16px 로 — 아이폰 화면 확대 막기
   ──────────────────────────────────────────────────────────────
   무엇이 잘못됐나:
     iOS 사파리는 **16px 보다 작은 글씨의 입력칸을 누르면 화면을
     제멋대로 확대합니다.** 그리고 확대된 채로 남습니다. 그러면
     다음 칸과 「다음」 단추가 화면 밖으로 밀려 나가, 손님은 두 손가락으로
     화면을 도로 줄여 가며 가입을 해야 했습니다. **가입 첫 화면부터**
     걸렸습니다 (.auth-card input 이 15px).

     이 사이트에는 15px·14px·13.5px·12px·11px 짜리 입력칸이
     스물여섯 군데 있었습니다. 만들기 마법사, 동의 화면, 검색칸,
     장면 대사칸, 초대 링크칸, 후기 쓰는 칸이 전부 해당됩니다.

   어떻게 고쳤나:
     **폰 폭(640px 이하)에서만** 16px 로 올립니다. PC·태블릿 디자인은
     한 픽셀도 안 바뀝니다. 확대를 막는 최소값이 정확히 16px 이므로
     더 키우지 않았습니다.

     일부러 크게 만든 칸(.wz-input.big 20px)은 규칙 세기가 더 세서
     (0,2,0 > 0,1,0) 그대로 20px 로 남습니다. 파일 고르는 칸
     (input[type=file])은 글자 크기가 곧 단추 크기라 건드리지 않았습니다.

   어느 기계에서 달라지나:
     아이폰·아이패드 사파리(폭 640px 이하) — 입력칸을 눌러도 화면이
     확대되지 않습니다. 안드로이드는 원래 확대를 안 하므로 글자만
     1~5px 커집니다(읽기 더 쉬워집니다). PC 는 그대로입니다. */
@media(max-width:640px){
  /* 이름이 붙은 칸들 — 위에 적힌 각 규칙과 세기를 맞춰 적었습니다 */
  .auth-card input[type=text],.auth-card input[type=email],
  .auth-card input[type=password],.auth-card input[type=tel],
  .auth-form input,
  .wz-input,
  .wz-input.mono,
  .mk-qr .wz-input,
  .og-search input,
  .ef-notify input,
  .fx-text textarea,
  .sv-ta textarea,
  .sv-ask input,
  .sv-in input,
  .sv-search input,
  .sv-fsearch input,
  .rv-mine-form textarea,
  .rv-new-row select,
  .rv-new textarea,
  .cut-title,
  .cut-narr,
  .cut-who,.cut-say,
  .ag-line input,.ag-line select,
  .vd-say-r select,
  .wt-fix-f textarea,
  .iv-link input,
  .cv-miss-r select{font-size:16px}

  /* 이름 없이 맨몸으로 쓰인 칸들도 함께 막습니다. 세기가 가장 약하므로
     (0,0,1) 위의 어떤 규칙도 밀어내지 않습니다 — 새 칸을 만들 때
     깜빡해도 여기서 한 번 걸러집니다. */
  input[type=text],input[type=email],input[type=password],input[type=tel],
  input[type=search],input[type=url],input[type=number],input:not([type]),
  select,textarea{font-size:16px}
}

/* ──────────────────────────────────────────────────────────────
   ② 눌러야 할 것을 최소 44×44px 로
   ──────────────────────────────────────────────────────────────
   무엇이 잘못됐나:
     손끝이 닿는 자리는 44×44px 이 최소입니다(애플·구글 둘 다 같은 값).
     그런데 사진 지우기 ✕ 는 17px, 등장인물 빼기 ✕ 도 17px, 찍은 사진
     지우기는 22px, 장면 대사 지우기는 26px, 좋아요 하트는 34px,
     **폰에서 유일한 메뉴인 서랍 항목**도 34px 이었습니다.
     가입 동의 체크상자는 브라우저 기본 13px 이고, 바닥글 링크 열두 개는
     위아래 여백이 아예 없어 서로 붙어 있었습니다.

   어떻게 고쳤나:
     **보이는 크기는 그대로 두고 누르는 범위만 넓혔습니다.**
     작은 단추에는 눈에 안 보이는 44×44 가상요소(::after)를 가운데
     맞춰 덮어씌웠습니다 — 그림도 색도 그대로고, 손끝만 편해집니다.
     여백으로 늘려도 모양이 안 깨지는 곳(서랍 메뉴·바닥글)은 여백을 씁니다.

     손가락으로 쓰는 기계에서만 겁니다(pointer:coarse). 마우스 쓰는
     PC 화면은 한 픽셀도 안 바뀝니다.

   어느 기계에서 달라지나:
     휴대폰·태블릿 전부(폭 무관). PC 는 그대로입니다. */
@media (pointer:coarse){

  /* 사진 지우기 ✕ (마이페이지 > 아이 > 사진) — 17px → 44px.
     넓힌 자리를 **위쪽(사진 쪽)으로만** 냅니다. 아래로 늘리면 바로 밑의
     「대표로 하기」 단추 윗부분을 덮어 그 단추를 못 누르게 됩니다.
     위쪽은 사진이라 누를 것이 없습니다. */
  .ch-photo figcaption button{position:relative}
  .ch-photo figcaption button::after{content:'';position:absolute;left:50%;bottom:0;
    width:44px;height:44px;transform:translateX(-50%)}

  /* 등장인물 빼기 ✕ (만들기 마법사) — 17px → 44px.
     .mk-cast-item 은 오른쪽 여백이 34px 이라 ✕ 가 글자 위로 넘치지 않습니다. */
  .mk-x::after{content:'';position:absolute;left:50%;top:50%;
    width:44px;height:44px;transform:translate(-50%,-50%)}

  /* 폰으로 찍은 사진 지우기 (QR 촬영 화면) — 22px → 44px */
  .mp-shots button::after{content:'';position:absolute;left:50%;top:50%;
    width:44px;height:44px;transform:translate(-50%,-50%)}

  /* 장면 대사 한 줄 지우기 (대본 studio) — 26px → 44px.
     칸 너비(30px)는 그대로 둡니다 — 넓히면 대사칸이 좁아집니다. */
  .cut-del{position:relative}
  .cut-del::after{content:'';position:absolute;left:50%;top:50%;
    width:44px;height:44px;transform:translate(-50%,-50%)}

  /* 좋아요 하트 (원작 동화 목록) — 34px → 44px */
  .og-like button{position:relative}
  .og-like button::after,a.og-like::after{content:'';position:absolute;left:50%;top:50%;
    width:44px;height:44px;transform:translate(-50%,-50%)}

  /* 서랍 메뉴 항목 — 폰에서 다른 데로 갈 수 있는 **유일한 길**입니다.
     34px 밖에 안 되어 옆 항목을 잘못 누르기 쉬웠습니다. 여백으로 44px.
     제목 줄(.mdrawer-hd 는 <span>)은 누르는 것이 아니므로 그대로 둡니다. */
  a.mdrawer-sub{padding:12px 0 12px 12px}

  /* 가입 동의 체크상자 — 상자 자체는 13px 그대로 두고,
     상자를 감싼 <label> 줄 전체를 44px 높이로 만들어 어디를 눌러도
     체크되게 합니다. (체크상자가 label 안에 있으므로 줄 아무 데나
     누르면 켜집니다.) */
  .auth-agree label{min-height:44px;align-items:center;margin-bottom:3px}

  /* 바닥글 링크 열두 개 — 위아래 여백이 0 이라 줄끼리 붙어 있었습니다.
     글자 크기는 그대로, 누르는 높이만 44px 로. 줄 사이 간격은 여백이
     대신하므로 nav 의 벌어짐을 줄여 전체 길이는 거의 그대로입니다. */
  .ft nav{gap:0 10px;margin:4px 0 2px}
  .ft nav a{display:inline-block;padding:13px 6px}
}

/* ═══════════════════════════════════════════════════════════════
   kids444 · 인물 등록 · 우리 아이 화면 간소화   (사장님 지시 2026-09-20)

     「저기서 아래 사진 바로 붙이고 다음 하면 캐릭 생성으로 가던지
       해야 하는 거 아니가?」
     「하여튼 뭘 좀 간소화 해봐라」

   적는 칸은 한 줄로, 안내는 제목 옆으로, 사진과 올리는 칸은 나란히.
   화면을 짧게 만들어 **캐릭터 만들기 단추가 한 화면 안에** 들어오게
   하는 것이 목적입니다.
   ═══════════════════════════════════════════════════════════════ */

/* ── 적는 칸 한 줄 (인물 등록 · 이름 옆 고치기) ───────────────── */
.nc-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin-top:4px}
.nc-f{min-width:0}
.nc-f>span{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px;
  white-space:nowrap}
.nc-f>span em{font-style:normal;font-size:11.5px}
.nc-f .wz-input{width:100%}
.nc-fam{width:86px;flex:none}
.nc-age{width:92px;flex:none}
.nc-name{flex:1 1 150px;min-width:130px}
.nc-row .wz-chips{gap:6px}
.nc-row .wz-chip span{padding:9px 13px;font-size:13.5px}

/* ── 제목 줄에 안내를 같이 적습니다 ───────────────────────────── */
.my-h3.ic{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:26px 0 12px}
.my-h3.ic>i{font-style:normal;font-size:16px;line-height:1}
.my-h3.ic>span{font-family:var(--font-body);font-size:12.5px;font-weight:400;
  line-height:1.6;color:var(--muted);flex:1 1 260px;min-width:0}

/* ── 이름 옆 한 줄 고치기 ─────────────────────────────────────── */
.ch-head{align-items:flex-start;flex-wrap:wrap}
.ch-head-i{flex:1 1 260px;min-width:0}
.ch-quick{flex:1 1 100%;order:9;background:var(--surface);border:1px solid var(--line2);
  border-radius:var(--r-l);padding:16px 18px;box-shadow:var(--sh-card)}
.ch-quick[hidden]{display:none}
.ch-quick-go{display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:10px;margin-top:14px}
.ch-quick-go .wz-hint{flex:1 1 220px;min-width:0}

/* ── 사진과 올리는 칸을 나란히 ────────────────────────────────── */
.ph-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:14px;align-items:start;margin-bottom:12px}
.ph-two>*{min-width:0}
.ph-two-l .ch-photos{margin-bottom:0}
.ph-two-l .my-empty{margin:0;padding:26px 18px}
.ph-two-l .my-empty p{margin-bottom:0}
.ph-two-r{margin:0}
.ph-two .ch-drop{padding:20px 16px}

/* ── 사진 찍는 법 한 줄 띠 ────────────────────────────────────── */
.pg-slim{display:flex;flex-wrap:wrap;align-items:center;gap:7px 12px;
  background:var(--soft);border:1px solid var(--line2);border-radius:var(--r-m);
  padding:11px 14px;margin:0 0 10px;font-size:12.5px;line-height:1.5}
.pg-slim b{font-size:13px;white-space:nowrap}
.pg-slim>span{color:var(--ink2);white-space:nowrap}
.pg-slim>span::before{content:'✓ ';color:var(--orange-d);font-weight:800}
.pg-slim>span em{font-style:normal;font-size:11.5px;color:var(--muted2)}
.pg-slim>span.no{color:var(--muted);white-space:normal}
.pg-slim>span.no::before{content:''}

/* ── 새 캐릭터 만들기 — 제목과 안내를 한 줄로 ─────────────────── */
.ch-make-h{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-bottom:12px}
.ch-make>b.ch-make-h{font-size:16px}
.ch-make-h>span{font-size:12.5px;font-weight:400;line-height:1.6;color:var(--muted);
  flex:1 1 260px;min-width:0}

/* ── 폰·태블릿 ────────────────────────────────────────────────── */
@media(max-width:760px){
  .ph-two{grid-template-columns:1fr;gap:12px}
}
@media(max-width:560px){
  /* 적는 칸 — 성·이름·나이는 한 줄에 그대로 두고(셋 다 짧습니다)
     고르는 칸(성별·이 인물은)만 아래로 내려 보냅니다. */
  .nc-row{gap:10px}
  .nc-fam{width:64px}
  .nc-age{width:72px}
  .nc-name{flex:1 1 110px;min-width:100px}
  .nc-row>.nc-f:nth-child(n+4){flex:1 1 100%}
  .nc-row .wz-chip span{padding:8px 12px;font-size:13px}
  .ch-quick{padding:14px}
  .my-h3.ic{margin:22px 0 10px}
  .my-h3.ic>span{flex:1 1 100%}
  .ch-make-h>span{flex:1 1 100%}
  /* 띠는 폰에서 두 줄이 되어도 좋습니다 — 가로로 밀리지만 않으면 됩니다 */
  .pg-slim{gap:6px 10px;font-size:12px}
}

/* ── 만들어진 캐릭터 — 화풍(작가)별로 묶어서 (kids444) ──────────
     사장님 — 「실제 만들어진 캐릭터 보는 것도 없고, 그 작가별 캐릭터
     들어가서 만들어진 목록 중에 바꿀 수도 있어야 되고」
     「견주기 결과지 화면처럼 모바일에서 캐릭터가 바로 뜨면 되지」 */
.ch-by{display:grid;gap:16px;margin-bottom:18px}
.ch-by-s{border:1px solid var(--line2);border-radius:var(--r-l);padding:14px;
  background:var(--surface)}
.ch-by-s.on{border-color:var(--orange);background:#FFFDF9}
.ch-by-hd{display:flex;align-items:center;flex-wrap:wrap;gap:6px 9px;margin-bottom:11px}
.ch-by-hd b{font-size:15.5px}
.ch-by-hd .mut{font-size:12.5px}

.ch-vers{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}
.ch-vers>*{min-width:0}
.ch-ver{position:relative;border:1.5px solid var(--line2);border-radius:var(--r-m);
  padding:9px;background:var(--paper)}
.ch-ver.on{border-color:var(--orange);background:var(--paper)}
.ch-ver-big{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;
  border-radius:10px;background:var(--soft)}
.ch-ver-tag{position:absolute;top:15px;left:15px;background:var(--orange);color:var(--on-orange,#fff);
  font-size:10.5px;font-weight:800;border-radius:999px;padding:3px 9px;
  box-shadow:0 1px 4px rgba(0,0,0,.25)}
.ch-ver-thumbs{display:flex;gap:5px;margin-top:6px}
.ch-ver-thumbs figure{margin:0;flex:1 1 0;min-width:0;text-align:center}
.ch-ver-thumbs img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:7px;
  background:var(--soft)}
.ch-ver-thumbs figcaption{font-size:10px;color:var(--muted2);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-ver-hd{display:flex;align-items:center;justify-content:space-between;gap:6px;
  margin-top:8px;font-size:12px;font-weight:700}
.ch-ver-hd .mut{font-weight:400}
.ch-ver-mix{margin:7px 0 0;font-size:11.5px;line-height:1.55;color:var(--muted);
  background:var(--soft);border-radius:8px;padding:7px 9px}
.ch-ver-go{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.ch-ver-go form{margin:0;flex:1 1 auto}
.ch-ver-go .btn-cta,.ch-ver-go .btn-ghost{width:100%;font-size:12.5px;padding:8px 10px}

@media(max-width:560px){
  /* 폰에서는 두 줄로 — 견주기 결과지처럼 그림이 바로 눈에 들어옵니다 */
  .ch-vers{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ch-by-s{padding:11px}
  .ch-ver{padding:7px}
  .ch-ver-thumbs figcaption{display:none}
}

/* ── 사진이 갖춰졌을 때 (kids445) ──────────────────────────────
     사장님 — 「캐릭이 정면 측면 올리고 나면 사진을 더 올릴 필요가 있나?
     다른 아이 등록을 하겠지」 */
.ph-done{background:var(--soft);border:1px solid var(--line2);border-radius:var(--r-l);
  padding:18px}
.ph-done>b{display:block;font-size:15px;color:#22A06B}
.ph-done>p{margin:6px 0 14px;font-size:13px;color:var(--muted);line-height:1.65}
.ph-done>.btn-cta{display:inline-block;text-align:center}
.ph-more{margin-top:14px;border-top:1px solid var(--line2);padding-top:12px}
.ph-more>summary{cursor:pointer;list-style:none;font-size:13px;font-weight:700;
  color:var(--muted);display:flex;align-items:center;gap:8px}
.ph-more>summary::-webkit-details-marker{display:none}
.ph-more>summary::after{content:'▾';margin-left:auto;font-size:12px}
.ph-more[open]>summary::after{content:'▴'}
.ph-more>summary span{font-weight:400;font-size:12px;color:var(--muted2)}
.ph-more .ch-up{margin:12px 0 0;box-shadow:none;background:transparent;border:0;padding:0}

/* ── 인사 영상 — 눈에 띄게 (kids445) ───────────────────────────
     사장님 — 「움직이는 인사 영상 만들기는 좀 더 눈에 보여야 하는데」 */
.gv-big{display:flex;align-items:center;flex-wrap:wrap;gap:14px;
  background:linear-gradient(180deg,var(--soft),var(--paper));
  border:1.5px solid var(--orange2);border-radius:var(--r-l);padding:16px}
.gv-face{position:relative;flex:none;width:96px;height:96px;border-radius:14px;
  overflow:hidden;background:var(--soft);box-shadow:var(--sh-card)}
.gv-face img{width:100%;height:100%;object-fit:cover}
.gv-face i{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;
  font-size:26px;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.gv-txt{flex:1 1 200px;min-width:0}
.gv-txt>b{display:block;font-size:16px}
.gv-txt p{margin:5px 0 0;font-size:13px;line-height:1.65;color:var(--muted)}
.gv-big>.btn-cta{flex:none}

@media(max-width:560px){
  .gv-big{gap:11px;padding:13px}
  .gv-face{width:72px;height:72px}
  .gv-big>.btn-cta{flex:1 1 100%;text-align:center}
  .ph-done{padding:14px}
  .ph-done>.btn-cta{display:block}
}

/* ── 사진 옆자리 = 인사 영상 (kids446) ─────────────────────────
     사장님 — 「올린 사진 3장 옆에는 6초 인사영상 만들어보기가 있고,
     만들고 난 뒤면 만들어진 영상 떠 있는 게 좋겠구만」 */
.ph-side{display:grid;gap:12px;align-content:start}
.ph-side-row{margin:0 0 12px}
.ph-newkid{text-align:center}
.gv-done{background:var(--surface);border:1px solid var(--line2);
  border-radius:var(--r-l);padding:14px}
.gv-done>b{display:block;font-size:15px;margin-bottom:10px}
.gv-done video{display:block;width:100%;border-radius:12px;background:#000}
.gv-done>p{margin:8px 0 0;font-size:12.5px;color:var(--muted)}
.gv-wait{background:var(--soft);border:1px dashed var(--line2);
  border-radius:var(--r-l);padding:16px}
.gv-wait>b{display:block;font-size:14.5px}
.gv-wait>p{margin:6px 0 0;font-size:12.5px;line-height:1.65;color:var(--muted)}
.gv-wait .ch-work-dot{margin-bottom:8px}
.ph-side .gv-big{flex-direction:column;align-items:stretch;text-align:center}
.ph-side .gv-face{width:110px;height:110px;margin:0 auto}
.ph-side .gv-big>.btn-cta{width:100%;text-align:center}
/* ★ kids606 — 휴대폰(560px 이하)에서 인사 영상 단추가 **세로 388px 짜리 반쪽 원**으로 오른쪽에 삐져나갔습니다(로컬 기능 점검).
     세로로 쌓는 칸(column)인데 휴대폰 규칙 flex:1 1 100% 가 「높이 100%」로 먹고 wrap 이 옆 줄로 밀었습니다. */
.ph-side .gv-big{flex-wrap:nowrap}
.ph-side .gv-big>.btn-cta{flex:none}

/* ── 지우기를 손 닿는 곳에 (kids447) ───────────────────────────
     사장님 — 「기존에 만든 아이 삭제가 너무 불편하다 그냥 캐릭 관리에서」
     「삭제 누르고 삭제하시겠습니까 이런 거 뜨고 쉽게 좀 돼야 되는데」 */
.ch-del-f{margin:0;display:inline-block}
.btn-ghost.ch-del{color:#E5484D;border-color:rgba(229,72,77,.35)}
.btn-ghost.ch-del:hover{background:rgba(229,72,77,.07);border-color:#E5484D}
.kd-del{margin:14px 0 0;text-align:right}
.kd-del .btn-ghost{font-size:12.5px;padding:8px 13px}

/* ── 카카오톡·네이버 앱 안에서는 카메라가 안 열립니다 (kids447) ── */
.ph-inapp{margin:10px 0 0;background:var(--soft);border:1px solid var(--line2);
  border-radius:var(--r-m);padding:11px 13px;font-size:12.5px;line-height:1.7;
  color:var(--ink2)}

/* ── 만드는 중 — 화면을 덮는 창 (kids448) ──────────────────────
     사장님 — 「생성하기 누르면 제일 위로 페이지 올라가고 몇 초 남았습니다
     뜨는데, 사람들은 이게 오류로 안 된 줄 안다. 배경 흐려지고 팝업 하나
     떠서 몇 초 생성 중입니다 이런 거 뜬다든지」 */
.mkwait{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  padding:20px;background:rgba(32,22,14,.55);backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px)}
.mkwait[hidden]{display:none}
/* ★ kids645 — 처음 오신 분 안내 창(_tutor.php) · 「제작 중」 창과 같은 결 */
.tu{position:fixed;inset:0;z-index:9400;display:grid;place-items:center;padding:16px;
  background:rgba(32,22,14,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.tu[hidden]{display:none}
body.tu-on{overflow:hidden}
.tu-box{text-align:left;width:100%;max-width:460px;max-height:calc(100vh - 32px);overflow:auto;background:var(--surface);
  border-radius:20px;padding:22px 20px 16px;box-shadow:0 18px 50px rgba(0,0,0,.3)}
.tu-h{display:block;font-family:var(--font-title);font-size:19px;margin-bottom:4px}
.tu-lead{margin:0 0 12px;font-size:13.5px;color:var(--muted)}
.tu-bar{height:6px;border-radius:9px;background:var(--soft);overflow:hidden}
.tu-bar i{display:block;height:100%;background:var(--orange);border-radius:9px}
.tu-cnt{display:block;font-size:12px;color:var(--muted);margin:4px 0 10px;text-align:right}
.tu-steps{display:flex;flex-direction:column;gap:8px}
.tu-step{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border-radius:14px;
  border:1.5px solid var(--line2);background:var(--surface)}
.tu-step.now{border-color:var(--orange);background:var(--soft)}
.tu-step.ok{opacity:.72}
.tu-n{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;flex:none;
  background:var(--line2);color:#fff;font-weight:800;font-size:13px}
.tu-step.now .tu-n{background:var(--orange)}
.tu-step.ok .tu-n{background:#5CAE47}
.tu-tx{flex:1;min-width:0}
.tu-tx>b{display:block;font-size:14.5px}
.tu-tx>span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.45}
.tu-step .btn-cta{flex:1 0 100%;text-align:center;padding:10px 14px}
.tu-step .tu-optgo{flex:1 0 100%;text-align:center;padding:8px 14px;font-size:13px}
.tu-back{flex:none;padding:5px 12px;font-size:12.5px}
.kd-make{margin:14px 0 0}
.myp-stat-sub{display:block;font-size:12px;color:var(--muted);margin-top:4px}
.rsm-note{display:block;font-size:12px;color:var(--muted);margin-top:6px}
.kd-make .btn-cta{display:block;text-align:center}
.tu-ok{font-style:normal;font-size:12px;color:#3B7A2A;font-weight:700;flex:none}
.tu-opt{font-style:normal;font-size:11px;color:var(--muted);border:1px solid var(--line2);border-radius:99px;padding:1px 7px;flex:none}
.tu-fin{margin:12px 0 0;font-size:14px}
.tu-go{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}
.tu-go .btn-ghost{padding:8px 14px;font-size:13px}
.tu-open{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--orange);
  background:none;border:0;padding:4px 0;cursor:pointer;text-decoration:underline}
.mkwait-box{width:100%;max-width:340px;text-align:center;background:var(--surface);
  border-radius:20px;padding:28px 22px;box-shadow:0 18px 50px rgba(0,0,0,.3)}
.mkwait-spin{display:block;width:46px;height:46px;margin:0 auto 16px;border-radius:50%;
  border:4px solid var(--line2);border-top-color:var(--orange);
  animation:mkspin .9s linear infinite}
@keyframes mkspin{to{transform:rotate(360deg)}}
.mkwait-box b{display:block;font-family:var(--font-title);font-size:19px}
.mkwait-box p{margin:7px 0 0;font-size:15px;font-weight:700;color:var(--orange-d)}
.mkwait-bar{display:block;height:8px;margin:16px 0 12px;border-radius:999px;
  background:var(--line2);overflow:hidden}
.mkwait-bar i{display:block;height:100%;border-radius:999px;background:var(--orange);
  transition:width .9s linear}
.mkwait-box em{font-style:normal;font-size:12px;line-height:1.7;color:var(--muted)}
@media (prefers-reduced-motion:reduce){ .mkwait-spin{animation-duration:2.4s} }
@media(max-width:560px){ .mkwait-box{padding:24px 18px} }

/* 삐져나오던 프로필 칸 (kids448) */
.kd-prof>*{min-width:0}
.kd-prof-img .btn-ghost{display:block;width:100%;font-size:12px;padding:8px 6px;
  white-space:normal;margin-top:8px}

/* 닫기 — 덮은 창에 나갈 길 (kids451)
   사장님 — 「시간 지나도 계속 이렇고, 새로고침해도 계속 이렇고,
   그렇다고 닫기도 없고」 */
.mkwait-x{display:block;width:100%;margin-top:14px;border:1.5px solid var(--line2);
  background:var(--paper);color:var(--muted);border-radius:999px;
  padding:11px 14px;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer}
.mkwait-x:hover{background:var(--soft);color:var(--ink2);border-color:var(--muted2)}

/* 나이가 비어 있으면 (kids452)
   사장님 — 「아니 나이가 모름으로 뜨잖아. 캐릭 생성을 그럼 왜 하고
   아이 등록을 왜 하냐??」 */
.ct-noage{margin:10px 0 0;background:#FFF4E8;border:1px solid var(--orange2);
  border-radius:var(--r-m);padding:11px 13px;font-size:12.5px;line-height:1.7;
  color:var(--ink2)}

/* ── 「다음 →」이 둘로 보이던 자리 (kids452) ────────────────────
     사장님 — 「저 다음은 왜 두 개가 뜨노? 어느 거 눌러야 되는데」

   화면 아래 「다음 →」과, 폰에서 바닥에 붙는 같은 단추입니다.
   붙는 단추가 있으면 본문 것은 감춥니다 — 같은 일을 하는 단추가
   한 화면에 둘이면 어느 것을 눌러야 하는지 고민하게 됩니다. */
@media(max-width:760px){ body.wz-has-stick .wz-next{display:none} }
/* PC 에서는 바닥에 붙는 단추가 아예 안 나옵니다(_wiz.php 760px) —
   그래서 이 규칙도 같은 폭 안에서만 돕니다. 안 그러면 PC 에서
   「다음 →」이 하나도 없어집니다. */

/* ── 자막 고르기 — 펼침목록 두 줄 (kids453) ────────────────────
     사장님 — 「이 화면 너무 길어서 위에 적용된 예제도 못 보겠다.
     그냥 전부 다 펼침목록으로 하고 자막/자리/크기, 글자색/글꼴/배경색
     이렇게 2줄로」 */
.cv-sels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;margin-top:12px}
.cv-sel{min-width:0}
.cv-sel[hidden]{display:none}
/* 자막을 「맨 위」로 두면 얼굴을 가릴 수 있다는 알림 (kids533) */
.cv-warn{margin:10px 0 0;font-size:13px;line-height:1.6;
         color:#8a6206;background:#fffaf0;border:1px solid #efe0c2;
         border-radius:9px;padding:9px 11px}
.cv-sel>span{display:block;font-size:12.5px;font-weight:700;color:var(--muted);
  margin-bottom:5px;white-space:nowrap}
.cv-sel>select{width:100%;border:1.5px solid var(--line2);background:var(--paper);
  border-radius:12px;padding:11px 10px;font:inherit;font-size:14px;color:var(--ink)}
.cv-sel>select:focus{outline:none;border-color:var(--orange)}
@media(max-width:560px){
  .cv-sels{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .cv-sel>span{font-size:11.5px}
  .cv-sel>select{padding:10px 7px;font-size:13px}
}

/* 덮은 창 안의 진행 줄 (kids454)
   사장님 — 「거기서 뭐가 이루어지고 있는지 글자가 다 보이게 해주라니까」 */
.mkwait-list{display:grid;gap:6px;margin:12px 0 4px;text-align:left}
.mkwait-li{display:flex;align-items:baseline;gap:8px;font-size:12.5px;
  background:var(--soft);border-radius:9px;padding:7px 10px;min-width:0}
.mkwait-li>i{font-style:normal;width:14px;flex:none;text-align:center;color:var(--muted2)}
.mkwait-li>b{font-weight:700;flex:none}
.mkwait-li>em{font-style:normal;color:var(--muted);margin-left:auto;
  font-size:11.5px;text-align:right;min-width:0}
.mkwait-li.ok{background:#EAF7F0}
.mkwait-li.ok>i{color:#22A06B}
.mkwait-li.go{background:#FFF4E8}
.mkwait-li.go>i{color:var(--orange)}
.mkwait-box{max-width:380px}

/* ── 오른쪽 아래 동그란 단추 (kids455) ─────────────────────────
     사장님 — 「우측 하단에 조그마한 카카오 채널 아이콘 같은 게 있어서
     거기에 퍼센티지가 표시되고, 클릭하면 언제든지 저 페이지로」 */
.kfab{position:fixed;right:14px;bottom:16px;z-index:70;
  display:grid;place-items:center;width:62px;height:62px;border-radius:50%;
  background:var(--surface);border:1.5px solid var(--line2);
  box-shadow:0 6px 18px rgba(0,0,0,.18);text-decoration:none;color:var(--ink);
  transition:transform .15s}
.kfab:hover{transform:translateY(-2px)}
.kfab>b{font-family:var(--font-title);font-size:17px;line-height:1}
.kfab>b>i{font-style:normal;font-size:11px;margin-left:1px}
.kfab>em{font-style:normal;font-size:9.5px;color:var(--muted2);margin-top:2px}
.kfab-plus{font-size:22px}
.kfab.on{background:linear-gradient(180deg,var(--soft),var(--paper));border-color:var(--orange);
  color:var(--orange-d)}
.kfab.on>em{color:var(--orange-d);font-weight:700}
/* 돌아가는 테두리 — 만드는 중이라는 것이 멀리서도 보입니다 */
.kfab-ring{position:absolute;inset:-1.5px;border-radius:50%;
  border:2.5px solid transparent;border-top-color:var(--orange);
  animation:kfabspin 1.4s linear infinite}
@keyframes kfabspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .kfab-ring{animation-duration:4s} }
/* 아래 붙는 큰 단추들과 안 겹치게 — 마법사의 붙는 단추(760px 이하),
   그리고 화면 바닥의 「동화 만들기」 띠(.mcta, 640px 이하) 위로 띄웁니다 */
body.wz-has-stick .kfab{bottom:86px}
@media(max-width:640px){ .kfab{bottom:82px} }
@media(max-width:560px){
  .kfab{right:11px;bottom:13px;width:56px;height:56px}
  .kfab>b{font-size:15.5px}
}

/* ═══════════════════════════════════════════════════════════════
   kids461 · 모바일에서 가로로 밀려나는 것 막기
   사장님 지시 2026-09-20 — 「캐릭터 제작이랑 생성 모바일 화면 깨짐
   이런 거 더 확인해봐라」

   까닭은 하나입니다. CSS grid 에서 `1fr` 짜리 칸은 기본이
   min-width:auto 라, 안에 든 글이나 그림이 칸보다 넓으면 **칸을
   밀어서 늘립니다.** 그러면 줄 전체가 화면 밖으로 삐져나갑니다.
   글자가 안 잘리려고 버티는 것이라 눈에는 「깨짐」으로 보입니다.

   칸마다 min-width:0 을 주고, 긴 낱말은 줄을 바꾸게 합니다.
   화면이 좁아도 안쪽에서 접히지 밖으로 밀지 않습니다.
   ═══════════════════════════════════════════════════════════════ */
.three>*,.wait>*,.my-two>*,.mk-pick>*,.mk-photo-top>*,.mk-slots>*,
.hp-row>*,.kd-hero>*,.kd-tabs>*,.kd-two>*,.kd-photos>*,.kd-cuts>*,
.kd-styled-row>*,.kd-works>*,.kd-stats>*,.ch-photos>*,.ch-trio-row>*,
.ch-chars>*,.ch-cuts>*,.pg-tasks>*,.st-grid>*,.vc-grid>*{min-width:0}

/* 긴 제목·이메일·파일 이름이 칸을 밀지 않게 */
.kd-works b,.kd-stats b,.kd-prof-rows b,.my-two b,.mk-pick b,
.ch-char-hd b,.kd-styled-one b,.ch-trio-c b{overflow-wrap:anywhere;word-break:break-word}

/* 가로 스크롤 자체를 막습니다 — 안에서 접히게 (kids461) */
body.b-kids,.shell{overflow-x:clip}

@media(max-width:560px){
  /* 네 칸짜리는 폰에서 둘로 — 네 개는 한 칸이 70px 도 안 됩니다 */
  .kd-photos,.kd-cuts,.mk-slots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kd-works,.kd-stats,.kd-two,.my-two,.three{grid-template-columns:minmax(0,1fr)}
  .kd-hero{grid-template-columns:minmax(0,1fr)}
  .mk-photo-top{grid-template-columns:minmax(0,1fr)}
  /* 프로필 표 — 이름 칸이 좁아 값이 밀려 나오던 자리 */
  .kd-prof{grid-template-columns:104px minmax(0,1fr);gap:12px;padding:13px}
  .kd-prof-rows span{width:62px;font-size:11.5px}
  .kd-prof-rows b{font-size:13px}
}

/* 만드는 중에는 동그라미가 퍼센트를 물고 있습니다 (kids464)
   사장님 — 「우측 하단에 동그라미 하나, 카카오톡 그 아이콘 따라다니듯이」 */
.kfab[data-mk="1"]{cursor:pointer}
.kfab[data-mk="1"] .kfab-ring{display:block}
.kfab.on .kfab-ring{display:block}

/* ── 사진 고른 뒤 한 줄 안내 (kids467) ─────────────────────
   「사진을 줄이는 중이에요」 · 「3장만 올립니다」가 나오는 자리입니다.
   아무 말 없이 멈춰 있으면 손님은 또 누릅니다 — 그래서 답니다. */
.ph-shrink{display:block;margin-top:8px;font-size:12.5px;font-style:normal;
  font-weight:700;color:var(--k-green,#2e7d54);line-height:1.5}
.ph-shrink.warn{color:var(--k-orange,#c8641a)}
.ph-shrink[hidden]{display:none}

/* 한 줄 띠 안내의 마지막 칸 — 「많이 올려도 더 닮게 나오지 않아요」 */
.pg-slim .tip{background:var(--soft);border-color:#f0d3b4;color:#8a5a22}
.pg-slim>span.tip{white-space:normal}   /* kids606 — 휴대폰에서 긴 안내 한 줄이 화면 밖으로 삐져나갔습니다(390px 기능 점검) */
.pg-slim .tip b{color:#7a4a15}

/* 동그라미에 붙는 개수 표 — 두 가지 이상이 같이 돌 때만 (kids467) */
.kfab-n{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;
  display:flex;align-items:center;justify-content:center;
  background:#d94f2b;color:#fff;font-size:11.5px;font-weight:800;
  border-radius:11px;padding:0 5px;border:2px solid #fff;line-height:1}

/* 얼굴 기준으로 쓰는 사진 표시 (kids467) — 틀린 자리 이름 대신 이것만 적습니다 */
.ch-photo figcaption .ph-face{color:var(--k-orange,#c8641a);font-weight:800}

/* 화풍 견본이라는 표 — 우리 아이 얼굴이 아니라 견본임을 갈라 줍니다 (kids468) */
.ch-trio-c{position:relative}
.ch-trio-samp{position:absolute;left:6px;top:6px;background:rgba(0,0,0,.55);color:#fff;
  font-size:10.5px;font-style:normal;font-weight:700;padding:2px 6px;border-radius:6px;
  letter-spacing:.02em}

/* ── 사진 범위 조정 창 (kids468) ───────────────────────────
   「사진 등록 시에 사진 범위 조정해서 등록되게 안 될까?」
   손님이 올리는 사진은 거실에서 찍은 전신 사진입니다. 얼굴이 화면의
   10분의 1이면 그만큼만 보고 그립니다 — 안 닮게 나옵니다.
   고르는 즉시 네모를 띄워 얼굴에 맞추게 합니다. */
.kcrop{position:fixed;inset:0;z-index:9000;background:rgba(30,24,18,.72);
  display:flex;align-items:center;justify-content:center;padding:16px;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.kcrop[hidden]{display:none}
.kcrop-box{background:var(--surface,#fffdf8);border-radius:20px;padding:20px;
  width:100%;max-width:460px;box-shadow:0 24px 60px rgba(0,0,0,.3)}
.kcrop-h{display:block;font-size:18px;font-weight:800;margin-bottom:4px}
.kcrop-p{margin:0 0 14px;font-size:13px;line-height:1.6;color:var(--muted,#8a7f72)}
.kcrop-stage{position:relative;width:100%;height:min(56vh,380px);
  background:#26201a;border-radius:14px;overflow:hidden;touch-action:none}
.kcrop-stage img{position:absolute;user-select:none;-webkit-user-drag:none}
.kcrop-sel{position:absolute;border:2px solid #fff;border-radius:6px;cursor:move;
  box-shadow:0 0 0 9999px rgba(0,0,0,.45);touch-action:none}
.kcrop-sel i{position:absolute;right:-11px;bottom:-11px;width:26px;height:26px;
  background:#fff;border-radius:50%;cursor:nwse-resize;
  box-shadow:0 2px 8px rgba(0,0,0,.35)}
.kcrop-sel i::after{content:'';position:absolute;inset:7px;border-right:2px solid #c8641a;
  border-bottom:2px solid #c8641a}
.kcrop-go{display:flex;gap:10px;margin-top:16px}
.kcrop-go button{flex:1}
@media (max-width:560px){
  .kcrop-box{padding:16px;border-radius:16px}
  .kcrop-stage{height:52vh}
}

/* 옛 「하는 중」 창의 닫기 — 20초가 넘으면 나타납니다 (kids468) */
.bz-x{margin-top:14px;background:transparent;border:1px solid rgba(255,255,255,.35);
  color:#fff;border-radius:999px;padding:9px 18px;font-size:13px;font-weight:700;
  cursor:pointer;opacity:.9}
.bz-x:hover{opacity:1;border-color:rgba(255,255,255,.6)}
.bz-x[hidden]{display:none}

/* 표지가 없는 줄도 자리를 잡습니다 (kids468) — 안 그러면 제목이 들쭉날쭉합니다 */
.tr-noimg{width:44px;aspect-ratio:16/10;border-radius:7px;flex:none;
  background:var(--soft);border:1px dashed var(--line2);display:block}

/* 옛 표정컷 접어 두기 (kids478) — 아무것도 안 버립니다, 누르면 다 보입니다 */
.kd-old,.ch-ver-old{margin-top:8px}
.kd-old summary,.ch-ver-old summary{cursor:pointer;font-size:12px;color:var(--muted,#8a7f72);
  list-style:none;display:inline-flex;align-items:center;gap:5px;
  border:1px solid var(--line2,#e6e1d8);border-radius:999px;padding:5px 12px}
.kd-old summary::-webkit-details-marker,
.ch-ver-old summary::-webkit-details-marker{display:none}
.kd-old summary::after,.ch-ver-old summary::after{content:'▾';font-size:10px}
.kd-old[open] summary::after,.ch-ver-old[open] summary::after{content:'▴'}
.kd-old summary:hover,.ch-ver-old summary:hover{border-color:var(--orange2,#f0c9a4)}

/* ══════════════════════════════════════════════════════════════
   kids485 — 대본에 나오는 사람 ↔ 등장인물 맞추기
   (사장님 지시 2026-09-20 「이거를 확인을 하는 장면을 한번 거쳐야」)
   값이 나가기 전, 대본 목록 위에 뜹니다.
   ══════════════════════════════════════════════════════════════ */
.cm-box{border:1px solid var(--line);border-radius:var(--r-l);
        background:var(--surface);margin:0 0 18px;overflow:hidden}
.cm-box.warn{border-color:#f0b429;background:#fffbf0}
.cm-box>summary{list-style:none;cursor:pointer;padding:14px 16px;
        display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cm-box>summary::-webkit-details-marker{display:none}
.cm-box>summary::after{content:'▾';margin-left:auto;opacity:.5;font-size:14px}
.cm-box[open]>summary::after{content:'▴'}
.cm-box>summary b{font-size:15px}
.cm-box>summary em{font-style:normal;font-size:13px;color:var(--muted)}
.cm-box>summary em.cm-warn{color:#a5620a;font-weight:700}
.cm-lead{margin:0 16px 14px;font-size:13.5px;line-height:1.75;color:var(--muted)}
.cm-lead b{color:var(--ink)}
.cm-form{padding:0 16px 16px}
.cm-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
        padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-m);
        background:#fff;margin-bottom:8px}
.cm-row.bad{border-color:#f0b429;background:#fffdf6}
.cm-who{font-size:15px;min-width:76px}
.cm-n{font-size:12.5px;color:var(--muted)}
.cm-sel{margin-left:auto;min-width:200px;padding:8px 10px;
        border:1px solid var(--line);border-radius:var(--r-s);background:#fff;font-size:14px}
.cm-msg{flex-basis:100%;font-size:12.5px;line-height:1.7;color:#a5620a}
.cm-msg b{color:#8a4f06}
.cm-btn{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.cm-btn span{font-size:12.5px;line-height:1.7;color:var(--muted);flex:1;min-width:220px}
.cm-btn span b{color:var(--ink)}
/* 목소리 표의 본디 이름 — 「💬 삼촌 찬양」 */
.vd-say-r>b>s{text-decoration:none;font-weight:500;font-size:12.5px;
        color:var(--muted);margin-left:4px}
.vd-say-r>b>s::before{content:'('}
.vd-say-r>b>s::after{content:')'}

@media (max-width:560px){
  .cm-box>summary{padding:12px 13px}
  .cm-lead{margin:0 13px 12px;font-size:13px}
  .cm-form{padding:0 13px 13px}
  .cm-row{gap:7px}
  .cm-who{min-width:0}
  .cm-sel{margin-left:0;flex-basis:100%;min-width:0;width:100%}
  .cm-btn span{min-width:0}
}

/* ══════════════════════════════════════════════════════════════
   kids486 — 세 갈래(원작 · 뜬다가 만들어 줘요 · 직접 만들기)
   (사장님 지시 2026-09-20)
   ══════════════════════════════════════════════════════════════ */
/* 만들기 안의 갈림길 — 두 칸에서 세 칸으로 */
.mk-pick3{grid-template-columns:repeat(3,1fr)}
@media (max-width:880px){ .mk-pick3{grid-template-columns:1fr} }

/* 둘러보기 큰 카드 — 두 장에서 세 장으로 */
.st-three{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:900px){ .st-three{grid-template-columns:1fr} }
/* ★ kids488 — 셋째 칸(직접 만들기)에는 깔 그림이 없습니다.
   글자 칸은 그림 **위에** 덮는 자리라, 깔개가 없으면 흰 글씨가
   흰 바탕에 놓여 빈 칸처럼 보입니다. 앞의 두 칸과 같은 모양이
   되도록 그림 자리에 색을 깔고 연필을 크게 놓습니다. */
.st-big--pro{display:block;border-radius:var(--r-xl);overflow:hidden}
.st-big-bg{display:flex;width:100%;aspect-ratio:4/3;
  align-items:center;justify-content:center;font-size:64px;line-height:1;
  background:linear-gradient(140deg,#f6b17a 0%,#e07a3f 55%,#c85f2c 100%)}

/* 고르고 들어오신 주제 띠 */
.st-carry{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 14px;margin:0 0 16px;border-radius:var(--r-m);
  background:var(--soft);border:1px solid var(--orange2)}
.st-carry b{font-size:15px;white-space:nowrap}
.st-carry span{font-size:12.5px;color:var(--muted);line-height:1.65}
.st-carry span b{color:var(--ink);font-size:inherit}

/* 이 이야기에 나올 사람 */
.st-cast{padding:12px 14px;margin:0 0 16px;border:1px solid var(--line);
  border-radius:var(--r-m);background:var(--surface)}
.st-cast>b{display:block;font-size:13.5px;margin-bottom:9px}
.st-cast-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.st-cast-one{display:inline-flex;align-items:baseline;gap:5px;
  padding:6px 11px;border-radius:var(--r-pill);background:var(--soft);
  border:1px solid var(--line)}
.st-cast-one b{font-size:14px}
.st-cast-one s{text-decoration:none;font-size:11.5px;color:var(--muted)}
.st-cast-one em{font-style:normal;font-size:11.5px;color:var(--orange-d)}
.st-cast-row .btn-ghost{margin-left:auto}

/* 대본이 영상을 결정합니다 (직접 만들기 맨 위) */
.st-warn{padding:15px 17px;margin:0 0 18px;border-radius:var(--r-m);
  background:#fffbf0;border:1px solid #f0b429}
.st-warn b{display:block;font-size:15px;margin-bottom:7px;color:#8a4f06}
.st-warn p{margin:0;font-size:13px;line-height:1.8;color:#6b4a1e}
.st-warn p b{display:inline;font-size:inherit;color:#8a4f06;margin:0}

/* 뜬다가 만들어 줘요 — 펼침 목록 넷 */
.sy-sels{display:grid;gap:12px;margin-bottom:6px}
.sy-sel{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:11px 13px;border:1px solid var(--line);border-radius:var(--r-m);
  background:var(--surface)}
.sy-sel>span{font-size:14px;min-width:86px}
.sy-sel select{margin-left:auto;flex:1;min-width:190px;padding:10px 11px;
  border:1px solid var(--line);border-radius:var(--r-s);background:#fff;
  font-size:14px;font-family:inherit;color:inherit}

/* 「기타」를 고르셔야 나타나는 칸 */
.sy-own{display:none}
.sy-own.on{display:block}
.sy-etc input:checked + span,
.sy-etc input:checked ~ .sy-card-in{border-color:var(--orange)}

/* 그림이 아직 없는 배경 카드 — 그림글자를 뒤에 깝니다.
   그림글자가 네모(1:1)를 차지하고, 그림은 그 위에 얹습니다.
   그림이 없거나 못 불러오면(onerror 로 display:none) 글자가 그대로 보입니다. */
.sy-card-in{position:relative}
.sy-card-emo{display:flex;width:100%;aspect-ratio:1/1;
  align-items:center;justify-content:center;
  font-size:34px;text-decoration:none;background:var(--soft)}
.sy-card-in img{position:absolute;left:0;top:0;width:100%;height:auto;z-index:1}
.sy-card-in b{position:relative;z-index:2}
/* 「기타」 카드는 그림이 없으니 네모를 낮춥니다 */
.sy-card.sy-etc .sy-card-emo{aspect-ratio:auto;height:74px}

/* 뜬다가 만들어 주는 쪽 마무리 글 */
.st-easyend{margin:18px 0 0;padding:13px 15px;border-radius:var(--r-m);
  background:var(--soft);font-size:13px;line-height:1.8;color:var(--muted)}
.st-easyend b{color:var(--ink)}

@media (max-width:560px){
  .st-carry{padding:11px 12px;gap:8px}
  .st-carry b{white-space:normal}
  .st-cast-row .btn-ghost{margin-left:0}
  .sy-sel{gap:8px}
  .sy-sel>span{min-width:0;flex-basis:100%}
  .sy-sel select{margin-left:0;flex-basis:100%;min-width:0;width:100%}
  .st-warn{padding:13px 14px}
  .st-big-bg{font-size:48px}
}

/* ★★ kids487 — **갈림길 칸이 깨져 있었습니다.** (사장님 화면 2026-09-20)
 *
 * 제목 「어떤 이야기로 만들까요」가 왼쪽에 따로 서고, 카드 셋이
 * 오른쪽 구석에 좁게 몰려 글자가 줄줄이 끊어졌습니다.
 *
 * 까닭 — 789줄에 **아이 고르기 화면**의 옛 규칙이 있습니다.
 *   .mk-pick{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
 * 이야기 화면도 같은 이름(.wz-card.mk-pick)을 쓰는 바람에, 제목과
 * 카드 묶음이 **각각 한 칸씩** 차지하는 두 칸 표가 됐습니다.
 * 카드가 둘일 때도 이미 좁았는데 셋이 되며 드러났습니다.
 *
 * 아이 고르기 화면(start.php)은 .wz-card 없이 .mk-pick 만 씁니다.
 * 그래서 .wz-card 가 붙은 이야기 화면 쪽만 되돌립니다 — 저쪽은
 * 그대로 둡니다. */
.wz-card.mk-pick{display:block;max-width:none;margin:0 0 16px}

/* kids490 — 대본 칸 위 「이 이야기에는 하루·찬양이 들어갑니다」 */
.st-castnote{margin:0 0 10px;padding:11px 13px;border-radius:var(--r-m);
  background:var(--soft);border:1px solid var(--line);
  font-size:12.5px;line-height:1.8;color:var(--muted)}
.st-castnote b{color:var(--ink)}

/* kids492 — 대본에서 부를 이름 (찬양 → 삼촌) */
.st-callname{margin-top:10px;border-top:1px dashed var(--line);padding-top:10px}
.st-callname>summary{list-style:none;cursor:pointer;font-size:13px;font-weight:700}
.st-callname>summary::-webkit-details-marker{display:none}
.st-callname>summary::before{content:'✏️ ';}
.st-callname>summary::after{content:' ▾';opacity:.5;font-weight:400}
.st-callname[open]>summary::after{content:' ▴'}
.st-callname>summary em{font-style:normal;font-weight:400;color:var(--muted);font-size:12px}
.st-callname>p{margin:8px 0 10px;font-size:12.5px;line-height:1.75;color:var(--muted)}
.st-callname>p b{color:var(--ink)}
.st-call-r{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.st-call-r>b{font-size:14px;min-width:66px}
.st-call-r>span{color:var(--muted)}
.st-call-r>input{flex:1;min-width:0;padding:8px 10px;font-size:14px}
@media (max-width:560px){ .st-call-r>b{min-width:52px;font-size:13px} }

/* ★★ kids493 — **PC 에서는 동그라미가 너무 작습니다.** (사장님 지시 2026-09-20)
 *
 *   「모바일에서는 우측 밑에 따라다니는 걸 알겠는데, PC에서는 저 동그라미가
 *     너무 작게 보인다. 조금 시인성이 있었으면 좋겠다」
 *
 * 이 단추는 손가락으로 누르는 크기(62px)로 만들었습니다. 폰에서는 화면
 * 폭의 6분의 1이라 눈에 들어오는데, 24인치 화면에서는 60분의 1입니다.
 * **만드는 중일 때만** PC 에서 옆으로 길게 펴서 글자를 함께 보여 줍니다.
 * 평소(마이페이지)에는 그대로 동그라미입니다 — 늘 크면 화면을 가립니다. */
@media (min-width:900px){
  .kfab.on{
    width:auto;min-width:190px;height:68px;border-radius:999px;
    grid-template-columns:auto 1fr;grid-template-rows:auto auto;
    column-gap:12px;padding:0 22px 0 20px;place-items:center start;
    box-shadow:0 10px 26px rgba(224,122,63,.28);border-width:2px}
  .kfab.on>b{grid-row:1/3;font-size:27px}
  .kfab.on>b>i{font-size:15px}
  .kfab.on>em{grid-column:2;grid-row:1;font-size:13px;margin:0;align-self:end}
  /* ★★ kids573 — 「대신」이라 적어 놓고 **회전을 안 껐습니다.**
   *              (사장님 신고 2026-09-25)
   *
   *   「버튼 테두리 라인이 빙글빙글 도는 거 같은데 … 원이 아닌데
   *     중심축으로 돌아서 깨지나보다」
   *
   * 그대로입니다. .kfab-ring 은 테두리 한 겹을 통째로 rotate 합니다.
   * 62×62 정원일 때는 돌아도 제자리라 안 보이는데, 여기서 190×68
   * 알약으로 펴지니 세로로 설 때 단추 밖으로 훌쩍 삐져나갑니다.
   *
   * 색만 바꾸고 animation 을 그대로 두었습니다 — 주석은 고치고 코드를
   * 안 고친 것입니다. (DEVELOPMENT_RULES.md 3.6)
   *
   * 알약에서는 돌리지 않고, 테두리가 은은히 밝아졌다 어두워집니다.
   * 「만드는 중」이라는 것은 그대로 보입니다. */
  .kfab.on .kfab-ring{inset:-2px;border-radius:999px;
    border-color:rgba(224,122,63,.55);
    animation:kfabpulse 1.6s ease-in-out infinite}
  @keyframes kfabpulse{0%,100%{opacity:.35}50%{opacity:1}}
  @media (prefers-reduced-motion:reduce){ .kfab.on .kfab-ring{animation:none;opacity:.6} }
  .kfab.on::after{content:'누르면 만드는 화면으로 →';
    grid-column:2;grid-row:2;font-size:11px;color:var(--muted2);
    align-self:start;white-space:nowrap}
  .kfab.on .kfab-n{top:-6px;right:-6px}
}

/* kids493 — 남은 시간 밑줄이 두 줄로 내려오게 */
.pg-eta>i{display:block;font-style:normal;font-size:11.5px;line-height:1.6;
  color:var(--muted2);margin-top:3px}

/* kids496 — 관계 칩이 열여섯 개라 줄이 길어집니다 */
.ct-rels{gap:6px}
.ct-rels .wz-chip span{font-size:13px;padding:7px 11px}

/* kids497 — 「얼굴이 고정되는 사람은 등록한 분뿐」 룰 */
.ct-rule{padding:13px 15px;margin:0 0 14px;border-radius:var(--r-m);
  background:var(--soft);border:1px solid var(--line)}
.ct-rule>b{display:block;font-size:14px;margin-bottom:7px}
.ct-rule>p{margin:0;font-size:12.5px;line-height:1.85;color:var(--muted)}
.ct-rule>p b{color:var(--ink)}

/* kids498 — 등록된 분의 관계 바꾸는 칸 */
.ct-rel1{margin-top:6px}
.ct-rel1 select{width:100%;padding:6px 8px;font-size:12.5px;font-family:inherit;
  border:1px solid var(--line);border-radius:var(--r-s);background:#fff;color:inherit}

/* kids499 — 부르는 이름 + 맡을 역할 두 칸 */
.st-call-h{display:flex;gap:9px;margin:0 0 5px;padding-left:76px;
  font-size:11.5px;color:var(--muted2)}
.st-call-h>span{flex:1;min-width:0}
.st-call-r>.st-call-play{flex:1;min-width:0}
.st-call-note{margin:8px 0 0;font-size:12px;line-height:1.75;color:var(--muted)}
.st-call-note b{color:var(--ink)}
@media (max-width:560px){
  .st-call-h{display:none}
  .st-call-r{flex-wrap:wrap}
  .st-call-r>input{flex-basis:100%}
  .st-call-r>.st-call-play{margin-left:61px;flex-basis:auto;width:calc(100% - 61px)}
}

/* kids500 — 「말하지 않아요」 칸 안의 부를 이름 · 맡을 역할 */
.cv-miss-more{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 6px;flex-basis:100%}
.cv-miss-more label{flex:1;min-width:150px;display:block}
.cv-miss-more label>span{display:block;font-size:11.5px;color:var(--muted2);margin-bottom:3px}
.cv-miss-more input{width:100%;padding:8px 10px;font-size:13.5px;font-family:inherit;
  border:1px solid var(--line);border-radius:var(--r-s);background:#fff;color:inherit}
/* 이야기 화면의 한 줄 안내 */
.st-cast-later{margin:10px 0 0;padding-top:9px;border-top:1px dashed var(--line);
  font-size:12.5px;line-height:1.75;color:var(--muted)}
.st-cast-later b{color:var(--ink)}

/* kids506 — 글자 수에 맞는 장면 수 안내 · 줄이기 · 나누기 */
.sy-scene-ch{display:block;font-size:10.5px;color:var(--muted2);
  text-decoration:none;margin-top:3px}
#stFit{font-size:12px;color:var(--muted2);margin-left:6px}
.st-fit{margin:10px 0 0;padding:13px 15px;border-radius:var(--r-m);
  background:#fffbf0;border:1px solid #f0b429}
.st-fit>b{display:block;font-size:14px;color:#8a4f06;margin-bottom:6px}
.st-fit>p{margin:0 0 10px;font-size:12.5px;line-height:1.8;color:#6b4a1e}
.st-fit>p b{color:#8a4f06}
.st-fit-btns{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.st-fit-btns .btn-ghost em{font-style:normal;font-weight:700;color:var(--orange-d);
  margin-left:5px;font-size:11.5px}
.st-fit-note{margin:8px 0 0;font-size:11.5px;line-height:1.7;color:#6b4a1e}
.st-fit-note b{color:#8a4f06}
@media (max-width:560px){
  .st-fit-btns{flex-direction:column;align-items:stretch}
  .st-fit-btns>*{width:100%;text-align:center}
}

/* kids507 — 1부·2부로 나눈 결과 */
.st-parts{margin:14px 0 0;padding:14px 15px;border-radius:var(--r-m);
  background:var(--soft);border:1px solid var(--orange2)}
.st-parts>b{display:block;font-size:14.5px;margin-bottom:6px}
.st-parts>p{margin:0 0 12px;font-size:12.5px;line-height:1.8;color:var(--muted)}
.st-parts>p b{color:var(--ink)}
.st-part-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.st-part{padding:12px 13px;border:1.5px solid var(--line2);border-radius:var(--r-m);
  background:#fff;display:flex;flex-direction:column;gap:6px}
.st-part.on{border-color:var(--orange);background:var(--paper)}
.st-part>b{font-size:14px;line-height:1.4}
.st-part-n{font-size:11.5px;color:var(--orange-d);font-weight:700}
.st-part>p{margin:0;font-size:12px;line-height:1.7;color:var(--muted);flex:1}
.st-part>button{margin-top:4px;width:100%}

/* ── kids516 — 자막 미리보기: 견본 도장 · 바로 그려보기 · 움직임 알림 ── */
.cv-sample{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%) rotate(-12deg);
  padding:.18em .7em;border:4px solid rgba(255,255,255,.92);border-radius:var(--r-m);
  color:#fff;background:rgba(242,98,13,.55);font-weight:900;letter-spacing:.35em;
  font-size:clamp(28px,7vw,64px);line-height:1.1;text-shadow:0 2px 8px rgba(0,0,0,.35);
  pointer-events:none;white-space:nowrap}
.cv-sample-tx{position:absolute;left:10px;top:10px;padding:5px 10px;border-radius:var(--r-pill);
  background:rgba(20,16,12,.72);color:#fff;font-size:12px;font-weight:700;pointer-events:none;
  max-width:calc(100% - 20px)}
.cv-sample-go{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin:-4px 0 14px;padding:12px 14px;border:1.5px dashed var(--orange);border-radius:var(--r-l);
  background:var(--soft)}
.cv-sample-go span{font-size:13.5px;color:var(--ink)}
.cv-sample-go .btn-cta{flex:none}
@media (max-width:600px){
  .cv-sample-go{flex-direction:column;align-items:stretch;text-align:center}
  .cv-sample-go .btn-cta{width:100%}
  .cv-sample{border-width:3px}
}
.sc-mot-note{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;
  color:var(--orange-d);font-weight:700;padding:0 4px;cursor:default;user-select:none}

/* ── kids517 — 뜬다스토리: 주인공이 누구인지 받는 칸 ── */
.sv-who{margin:0 0 16px;padding:14px 16px;border:1.5px dashed var(--orange);
  border-radius:var(--r-l);background:var(--soft)}
.sv-who.ok{border-style:solid;border-color:var(--line2);background:var(--surface)}
.sv-who-t{display:block;font-size:15px;color:var(--ink)}
.sv-who-p{margin:4px 0 10px;font-size:12.5px;color:var(--muted);line-height:1.55}
.sv-who-r{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.sv-who-r label{display:grid;gap:4px;font-size:12px;color:var(--ink2);font-weight:700}
.sv-who-r input,.sv-who-r select{height:40px;padding:0 11px;font-size:14px;
  border:1.5px solid var(--line2);border-radius:var(--r-s);background:var(--surface);
  color:var(--ink)}
.sv-who-r input[type="text"]{width:150px}
.sv-who-r input[type="number"]{width:92px}
.sv-who-r select{width:110px}
.sv-mate-f{display:grid;grid-template-columns:1fr 64px 70px;gap:5px;padding:0 8px 9px}
.sv-mate-f input,.sv-mate-f select{height:32px;min-width:0;padding:0 7px;font-size:12px;
  border:1px solid var(--line2);border-radius:10px;background:var(--surface);color:var(--ink)}
.sv-mate-f button{grid-column:1/-1;height:30px;font-size:12px;font-weight:700;
  border:1px solid var(--orange);border-radius:10px;background:var(--surface);
  color:var(--orange-d);cursor:pointer}
@media (max-width:600px){
  .sv-who-r{display:grid;grid-template-columns:1fr 1fr}
  .sv-who-r input[type="text"],.sv-who-r input[type="number"],.sv-who-r select{width:100%}
  .sv-who-r label:first-child{grid-column:1/-1}
  .sv-who-r>button{grid-column:1/-1;width:100%}
}
.sv-pick{margin:0 0 12px;padding:14px 16px;border:1.5px solid var(--line2);
  border-radius:var(--r-l);background:var(--surface)}
.sv-pick .sv-who-r select{min-width:260px;max-width:100%}
@media (max-width:600px){ .sv-pick .sv-who-r select{min-width:0;width:100%} }

/* ── kids525 — 대본 화면: 견본과 우리 아이 그림 가르기 ── */
.cut-img{position:relative}
.cut-sample{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-12deg);
  padding:.1em .45em;border:3px solid rgba(255,255,255,.92);border-radius:var(--r-s);
  background:rgba(242,98,13,.58);color:#fff;font-weight:900;letter-spacing:.25em;
  font-size:clamp(15px,3.4vw,24px);line-height:1.15;white-space:nowrap;pointer-events:none;
  text-shadow:0 2px 6px rgba(0,0,0,.35)}
.cut-mine{position:absolute;left:6px;top:6px;padding:3px 7px;border-radius:var(--r-pill);
  background:rgba(5,150,105,.92);color:#fff;font-size:11px;font-weight:800;pointer-events:none}
.cut-samnote{margin:0 0 12px;padding:12px 14px;border:1.5px dashed var(--orange);
  border-radius:var(--r-l);background:var(--soft)}
.cut-samnote b{display:block;font-size:14px;color:var(--ink);margin-bottom:4px}
.cut-samnote span{display:block;font-size:12.5px;color:var(--muted);line-height:1.6}
.cut-old{position:absolute;left:6px;top:6px;padding:3px 7px;border-radius:var(--r-pill);
  background:rgba(217,119,6,.94);color:#fff;font-size:10.5px;font-weight:800;pointer-events:none}

/* 옆 사진 권하는 띠 (kids531) — 정면만 있으면 돌아본 얼굴을 AI가 지어냅니다 */
.ph-need{background:#fff8e8;border:1px solid #f0dfb4;border-left:5px solid #d99b1c;
         border-radius:10px;padding:12px 15px;margin:10px 0 14px}
.ph-need b{display:block;font-size:15px;color:#7a5400;margin-bottom:4px}
.ph-need p{margin:0;font-size:13.5px;color:#6b6152;line-height:1.7}

/* ══════════════════════════════════════════════════════════════
   휴대폰에서 입력칸을 눌러도 화면이 확대되지 않게 — 빠진 것 메우기
   (kids542 · 전수검사 2026-09-23 · 실제 화면을 390px 로 재어서 잡음)
   ══════════════════════════════════════════════════════════════
   무엇이 잘못됐나
     kids(위쪽 640px 규칙)에서 「이름 없는 칸」까지 16px 로 올려 두었는데,
     그 규칙은 세기가 가장 약합니다(0,0,1). 뒤에 오는
     .cv-sel>select(0,1,1) · .sy-sel>select · .ct-rel1>select · .cm-sel ·
     .lk-part 가 그걸 밀어내고 11.5~14px 로 돌려놨습니다.

     아이폰 사파리는 글자가 16px 보다 작은 칸을 누르면 **화면을 확대**하고
     되돌리지 않습니다. 손님은 자막 고르기·등장인물 관계·이야기 고르기에서
     칸을 누를 때마다 두 손가락으로 화면을 줄여야 합니다.

   재어 보니 (390px)
     .cv-sel>select   13px    36곳   자막 고르기
     .sy-sel>select   14px    12곳   이야기 고르기
     .ct-rel1>select  12.5px   5곳   등장인물 관계
     .cm-sel          14px     4곳   목록 정렬
     .lk-part         11.5px   3곳   확정 화면 배역

   이름을 그대로 적어 세기를 맞춥니다. 파일 맨 끝이라 뒤에서 밀 것도
   없습니다. 폭이 넓은 화면은 한 글자도 안 달라집니다. */
@media(max-width:640px){
  .cv-sel>select,
  .sy-sel>select,
  .ct-rel1>select,
  .cm-sel,
  .cv-miss-more input,
  .lk-part{font-size:16px}
}

/* 끝내 못 만든 것 — 「기다려 주세요」가 아니라 「못 만들었고 돌려드렸다」
   (kids547 · 전수검사 2026-09-23) */
.mk-fail-done{background:#FDECEA;border-color:#F3C6C0}
.mk-fail-done b{color:#A23B2D}
.mk-fail-done p{color:#8C5348}
.mk-fail-done .mk-fail-do{margin-top:8px}
.mk-fail-done .btn{margin-top:4px}

/* 이야기를 끝내 못 만들었을 때 (kids550)
   0%에서 영원히 도는 화면 대신, 무슨 일인지 적고 길을 내 줍니다. */
.sv-mk-fail{background:#fff4f2;border:1px solid #f0cfc8;border-radius:16px;
  padding:20px 22px;margin:0 0 18px}
.sv-mk-fail>b{display:block;font-size:17px;color:#a3372a;margin-bottom:6px}
.sv-mk-fail>p{margin:0 0 14px;font-size:14.5px;line-height:1.7;color:#6b5f5c}
.sv-mk-fail>a{margin-right:8px}
@media(max-width:640px){
  .sv-mk-fail{padding:16px 16px;border-radius:14px}
  .sv-mk-fail>a{display:block;margin:0 0 8px}
}

/* ══ 동화 크게 보기 (kids561 · 사장님 지시 2026-09-24) ══════════════
 *
 *   「동화보는게 좀 불편한데 확대 뷰어 같은게 없나 폰에서 가로로
 *     바꾸세요하고 풀화면이 된다던지 … 클릭하면 한장씩 풀화면 확대가
 *     되던지」
 *
 *   여태 확대도 전체화면도 **아예 없었습니다.** 폰에서는 그림이 글과
 *   한 칸에 들어가 손톱만 했습니다.
 *
 *   ★ 이 덮개는 낮/밤 모드를 안 따릅니다 — 늘 까만 바탕입니다.
 *     그림만 보는 자리라 둘레가 밝으면 눈이 그림에서 떠납니다.
 *   ★ 100svh 를 씁니다 — 폰 주소창이 들락거려도 아래가 안 잘립니다.
 */
.bk-zoom{
  position:fixed; inset:0; z-index:9000;
  background:#000;
  display:flex; align-items:center; justify-content:center;
  overscroll-behavior:contain;           /* 밀어도 뒤 화면이 안 따라 움직입니다 */
  -webkit-user-select:none; user-select:none;
}
.bk-zoom[hidden]{ display:none }
body.bk-zoomed{ overflow:hidden }        /* 뒤에서 같이 스크롤되지 않게 */

.bk-zoom-stage{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; touch-action:none;    /* 늘리기·끌기를 우리가 셉니다 */
  cursor:zoom-in;
}
.bk-zoom-stage img{
  max-width:100%; max-height:100%;
  width:auto; height:auto; display:block;
  transform-origin:center center;
  -webkit-user-drag:none;
}

/* 위 줄 — 쪽 번호와 단추. 아이폰 노치 아래로 내려 둡니다. */
.bk-zoom-top{
  position:absolute; top:0; left:0; right:0; z-index:2;
  display:flex; align-items:center; gap:8px;
  padding:calc(env(safe-area-inset-top,0px) + 10px) 12px 24px;
  background:linear-gradient(#000c,#0000);
  pointer-events:none;
}
.bk-zoom-top b{
  color:#fff; font-size:14px; font-weight:700; letter-spacing:.02em;
  margin-right:auto; opacity:.92;
  text-shadow:0 1px 3px #000a;
}
.bk-zoom-b{
  pointer-events:auto;
  width:38px; height:38px; flex:none;
  border:0; border-radius:50%;
  background:#ffffff26; color:#fff; font-size:17px; line-height:1;
  cursor:pointer;
}
.bk-zoom-b:hover{ background:#ffffff40 }

/* 좌우 화살표 — 폰에서는 안 보입니다 (밀어서 넘기니까요) */
.bk-zoom-a{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:46px; height:64px; border:0; border-radius:10px;
  background:#ffffff1f; color:#fff; font-size:30px; line-height:1;
  cursor:pointer;
}
.bk-zoom-a:hover{ background:#ffffff38 }
.bk-zoom-a:disabled{ opacity:.18; cursor:default }
.bk-zoom-a.l{ left:10px }
.bk-zoom-a.r{ right:10px }

/* 글 — 그림 아래에 겹칩니다. 한 번 누르면 숨습니다. */
.bk-zoom-cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  max-height:38vh; overflow-y:auto;
  padding:34px 18px calc(env(safe-area-inset-bottom,0px) + 16px);
  background:linear-gradient(#0000,#000c 34%,#000e);
  color:#f4f0ea; font-size:15.5px; line-height:1.7;
  transition:opacity .2s, transform .2s;
}
.bk-zoom-cap p{ margin:0 0 6px; max-width:760px; margin-inline:auto }
.bk-zoom-cap p.s{ color:#ffd9a8 }
.bk-zoom-cap p.s b{ margin-right:6px; color:#ffb860 }
.bk-zoom.nocap .bk-zoom-cap{ opacity:0; transform:translateY(12px); pointer-events:none }

/* 처음 열 때 한 번 알려 드리는 줄 */
.bk-zoom-tip{
  position:absolute; left:50%; bottom:calc(env(safe-area-inset-bottom,0px) + 56px);
  transform:translateX(-50%); z-index:3;
  max-width:88vw; padding:9px 15px; border-radius:999px;
  background:#000000b8; color:#fff; font-size:13px; white-space:nowrap;
  opacity:0; transition:opacity .25s; pointer-events:none;
}
.bk-zoom-tip.on{ opacity:1 }

@media (max-width:720px){
  .bk-zoom-a{ display:none }
  .bk-zoom-cap{ font-size:15px; max-height:34vh }
  .bk-zoom-tip{ white-space:normal; text-align:center }
}
/* 가로로 돌린 폰 — 글을 더 얇게 두고 그림에 자리를 줍니다 */
@media (orientation:landscape) and (max-height:560px){
  .bk-zoom-cap{ max-height:30vh; padding:22px 16px 12px; font-size:14px }
  .bk-zoom-top{ padding-top:calc(env(safe-area-inset-top,0px) + 6px); padding-bottom:16px }
}

/* 본 화면에서 「그림을 누르면 커진다」는 것이 보이게 */
.bk-page figure{ cursor:zoom-in }

/* ── 동화책 자랑하기 단추 (kids593) ────────────────────────
   링크 칸만 있던 자리에 공유하기·카카오톡·링크복사를 놓았습니다.
   휴대폰에서 주소를 손으로 끌어 복사하는 것이 제일 어렵습니다. */
.bk-share-btns{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.bk-share-btns button{flex:1 1 auto;min-width:120px}
@media(max-width:420px){.bk-share-btns button{flex:1 1 100%}}
/* 공유 화면 초대 혜택 한 줄 (kids593) */
.sh-ref{margin:10px 0 14px;padding:10px 14px;border-radius:12px;
        background:rgba(253,106,31,.10);font-size:14px;line-height:1.5}

/* ★ kids598 — 메뉴가 안 들어가면(kids.js 가 재어 봄) 햄버거로 접습니다. 겹쳐 그리지 않습니다. */
.hd.hd-tight .hd-nav{display:none}
.hd.hd-tight .hd-burger{display:flex}
.hd.hd-tight .hd-act{margin-left:auto}
/* ★ kids598 — 8~12세 머리글에 화면 모드 단추가 둘이었습니다(「☀️일반/🌙다크」 + 달 단추).
     둘이 서로 다른 어둡게(data-dark · data-theme)를 켜서, 하나를 켜고 다른 하나를 누르면
     반쯤 어두운 화면이 됐습니다. 8~12세 전용 단추가 있으면 달 단추를 숨깁니다. */
.hd:has(#elDark) .theme-btn{display:none}

/* ★ kids598 — 어두운 화면의 「고른 칸」 바탕이 옛 크림 테마 때의 보라로 박혀 있어 파랑(키즈)·민트(스토리)
     사이트에서 따로 놀았습니다. 브랜드 강조색을 표면색에 22% 섞은 값으로 바꿨습니다(두 브랜드가 알아서 따라감). */

/* ★ kids598 — 강조색 바탕 위 글자. 밝은 화면은 흰색, 어두운 화면은 짙은 색.
     어두운 화면에서는 강조색 자체가 밝아져서(키즈 #6FB6EE · 스토리 #5FD3B6) 흰 글자가 2.2:1 이
     됐습니다(고른 탭·단계 번호·「많이 고르세요」 딱지 등 73곳). 한 토큰으로 맞춥니다. */
html[data-theme="dark"]{--on-orange:#0C1430}
html[data-theme="dark"][data-track="FAMILY"]{--on-orange:#07201B}
html[data-theme="dark"] body.b-elem{--on-orange:#0C1430}

/* ★ kids598 — 작은 보조 글자(--muted2)가 민트 바탕에서 2.9:1, 파랑 바탕에서 3.3:1 이었습니다. 두 브랜드 밝은 값만 조금 진하게
     (4.2~4.3:1). 가입 화면 「8자 이상」의 옛 크림색도 토큰으로. (전체 캡처 점검) */
/* ★ kids598 — 휴대폰에서 원작 동화 찾기 칸의 「찾기」 단추가 화면 밖(390폭에서 456px)으로 밀렸습니다.
     입력칸이 긴 안내 글 폭보다 작아지지 못해서입니다. */
.og-search input{min-width:0}
.og-search button{flex:none}

/* ★ kids598 — 어두운 화면에서 강조색(주요 단추 바탕)이 밝아지는데 글자는 흰색(!important)이라
     「동화 만들기」·「내 이야기 만들기」 같은 제일 중요한 단추가 1.9:1 이었습니다(교차검수 GPT).
     어두운 화면에서만 짙은 글자로. 8~12세 자체 어두운 모드(data-dark)는 보라 단추라 흰 글자 그대로입니다.
   ★ color-mix 를 모르는 브라우저(iOS 15 등)를 위해 바로 앞 줄에 대체 바탕을 둡니다(교차검수 GPT). */
html[data-theme="dark"] .btn-cta,html[data-theme="dark"] .btn-cta:hover{color:var(--on-orange)!important}

/* ★ kids601 — 어두운 화면에서 밝은 바탕이 박힌 알림·상자 글자가 안 보이던 것 (GPT 실화면: 등장인물 화면의
     「나이를 정해 주세요」). 글자는 어두운 화면 값(밝은 색)을 받는데 바탕만 밝게 박혀 있었습니다.
     같은 꼴 43곳을 한 번에 — 뜻대로 셋으로 나눕니다. QR·사진·카메라 칸처럼 흰 바탕이어야 하는 것은 뺍니다.
     :is() 로 묶었다가 풀었습니다(교차검수 Gemini) — :is() 는 안의 가장 센 선택자(…:hover·:checked) 세기를
     모두에게 빌려 줘 뒤의 예외 규칙까지 누릅니다. 하나씩 적으면 각자 제 세기입니다. */
/* 경고(주황 계열) */
html[data-theme="dark"] .ct-noage,html[data-theme="dark"] .mkwait-li.go,html[data-theme="dark"] .ch-mix,html[data-theme="dark"] .mv-agree,html[data-theme="dark"] .ord-bal.short,html[data-theme="dark"] .cm-box.warn,html[data-theme="dark"] .cm-row.bad,html[data-theme="dark"] .st-warn,html[data-theme="dark"] .st-fit,html[data-theme="dark"] .ph-need,html[data-theme="dark"] .vo--mine .vo-in,html[data-theme="dark"] .ord-o.on .ord-o-in,html[data-theme="dark"] .ord-o input:checked ~ .ord-o-in,html[data-theme="dark"] .ct-sv:hover,html[data-theme="dark"] .ch-by-s.on{
  background:var(--soft);background:color-mix(in srgb,var(--orange) 16%,var(--surface));color:var(--ink)}
/* 실패·거절(빨강 계열) */
html[data-theme="dark"] .mo-tip.deny,html[data-theme="dark"] .rt-sum div.err,html[data-theme="dark"] .kd-prog.bad,html[data-theme="dark"] .ch-work.bad,html[data-theme="dark"] .wt-work.bad,html[data-theme="dark"] .mk-fail-done,html[data-theme="dark"] .sv-mk-fail,html[data-theme="dark"] .btn-ghost.danger:hover{
  background:var(--soft);background:color-mix(in srgb,#E0457E 18%,var(--surface));color:var(--ink)}
/* 보통 상자·띠 */
html[data-theme="dark"] .my-note,html[data-theme="dark"] .wz-bar,html[data-theme="dark"] .vc-bar,html[data-theme="dark"] .sr-bar,html[data-theme="dark"] .ord-bal,html[data-theme="dark"] .wz-bundle,html[data-theme="dark"] .wk-next,html[data-theme="dark"] .mkwait-li.ok,html[data-theme="dark"] .cm-row,html[data-theme="dark"] .cm-sel,html[data-theme="dark"] .st-part,html[data-theme="dark"] .ct-sv,html[data-theme="dark"] .cf-handle span{
  background:var(--soft);color:var(--ink)}
/* 흰 바탕 고르기·입력칸 — 어두운 화면 글자(밝은 색)가 흰 칸에 묻혔습니다 */
html[data-theme="dark"] .rv-new-row select,html[data-theme="dark"] .sy-sel select,html[data-theme="dark"] .ct-rel1 select,html[data-theme="dark"] .cv-miss-more input{
  background:var(--surface);color:var(--ink);border-color:var(--line2)}
html[data-theme="dark"] .sv-ah i.lock,html[data-theme="dark"] .sv-ah i.user,html[data-theme="dark"] .hdm-out .hdm-ic{background:var(--soft)}

/* ★ kids601 — 위 상자들 **안쪽 글자**가 밝은 화면용 갈색·초록·남색으로 따로 박혀 있었습니다(교차검수 GPT).
     상자 바탕만 어둡게 바꾸면 부모의 color:var(--ink) 가 그 글자에는 안 닿아 어두운 바탕에 어두운 글자가 됩니다.
     제목(b·em)은 그 뜻의 밝은 색으로, 본문(p·ul)은 본문 색으로. */
html[data-theme="dark"] .ph-need b,html[data-theme="dark"] .st-fit>b,html[data-theme="dark"] .st-fit>p b,html[data-theme="dark"] .st-warn b,html[data-theme="dark"] .st-warn p b,html[data-theme="dark"] .st-fit .st-fit-note b,html[data-theme="dark"] .cm-box.warn>summary em.cm-warn{color:var(--orange)}
html[data-theme="dark"] .ph-need p,html[data-theme="dark"] .st-fit>p,html[data-theme="dark"] .st-warn p,html[data-theme="dark"] .st-fit .st-fit-note{color:var(--ink)}
html[data-theme="dark"] .mk-fail-done b,html[data-theme="dark"] .rt-sum div.err b,html[data-theme="dark"] .sv-mk-fail>b,html[data-theme="dark"] .wt-work.bad > b,html[data-theme="dark"] .mo-tip.deny span.bad{color:#FF9A9A}
html[data-theme="dark"] .mk-fail-done p,html[data-theme="dark"] .sv-mk-fail>p{color:var(--ink)}
html[data-theme="dark"] .mkwait-li.ok>i,html[data-theme="dark"] .my-note b,html[data-theme="dark"] .my-note ul,html[data-theme="dark"] .wk-next b,html[data-theme="dark"] .wz-bundle b,html[data-theme="dark"] .wz-bundle em,html[data-theme="dark"] .wz-bundle i{color:var(--ink)}

/* ★ kids611 — 뜬다스토리 인기작의 뜬다키즈 작품 딱지 · 인사 영상 「친구 초대하면 무료」 안내 */
.tr-brand{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;font-size:11px;font-style:normal;
  font-weight:700;background:#FFF1E6;color:#C2571B;vertical-align:1px;white-space:nowrap}
html[data-theme="dark"] .tr-brand{background:#3A2A1F;color:#FFB27A}
.gv-inv{margin:0 0 6px;padding:8px 11px;border-radius:10px;background:#FFF6EC;color:#7A4A1F;font-size:13.5px;line-height:1.5}
.gv-inv a{color:#E0559A;font-weight:700;white-space:nowrap}
html[data-theme="dark"] .gv-inv{background:#33261B;color:#F3D9C2}
html[data-theme="dark"] .gv-inv a{color:#FF8CC0}
/* kids613 — 인사 영상 「카카오톡으로 소개하기」 단추 */
.gv-inv .gv-kk{display:block;margin-top:8px;width:100%;padding:10px 12px;border:0;border-radius:10px;
  background:#FEE500;color:#191600;font-weight:800;font-size:14.5px;cursor:pointer}
.gv-inv .gv-kk:disabled{opacity:.6}
.gv-inv small{display:block;margin-top:6px;font-size:12.5px}

/* kids615 — 밤 모드 로고: 글자가 남색이라 어두운 바탕에서 사라져 밝은 글자 판으로 바꿉니다 */
.hd-logo--dark{display:none !important}
html[data-theme="dark"] .hd-brand:not(.no-dark) .hd-logo:not(.hd-logo--dark){display:none !important}
html[data-theme="dark"] .hd-brand .hd-logo--dark{display:block !important}

/* kids621 (사장님 화면 2026-09-28) — 휴대폰에서 단추가 칸·화면 밖으로 삐져나갔습니다.
   ① 캐릭터 만들기 칸의 「이 화풍 다시 그리기 (약 1분) →」: 큰 단추(lg)가 한 줄 고정이라 360px 에서 +9px 넘침
   ② 뜬다스토리 자주 묻는 질문 「검색」: 입력칸에 min-width 가 없어(flex 기본 auto) 단추를 밀어냄
   큰 단추는 휴대폰에서 칸을 넘지 않게 하고, 글이 길면 두 줄로 내립니다. */
.ch-make .btn-cta{max-width:100%;white-space:normal;text-align:center}
.sv-fsearch input{min-width:0}
.sv-fsearch .btn-cta{flex:none}
@media (max-width:560px){
  .btn-cta.lg{max-width:100%;white-space:normal;text-align:center}
  .ch-make .btn-cta.lg{width:100%;padding:14px 18px;font-size:16.5px}
  .sv-fsearch .btn-cta{padding:12px 18px}
}

/* kids624 — 진행표 「못 만듦」 줄 (더 돌 일이 없는데 모자란 것) */
.pg-task.fail{background:#FDECEC}
.pg-task.fail .pg-tk-ic{background:#C24A3A}
.pg-task.fail .pg-tk-n{color:#A33A2C;font-weight:700;white-space:normal;text-align:right;flex:0 1 auto;min-width:0}
html[data-theme="dark"] .pg-task.fail{background:rgba(194,74,58,.18)}
html[data-theme="dark"] .pg-task.fail .pg-tk-n{color:#F2A597}

/* kids624 — 완성본에 빠진 장면 수 */
.wt-one .wt-miss{color:#B23B2E;font-weight:700}
html[data-theme="dark"] .wt-one .wt-miss{color:#F2A597}
/* kids624 — 대본 화면: 장면마다 그림에 나올 사람 · 그림 묘사 */
.cut-cast{margin:8px 0 0;font-size:12.5px;color:var(--ink2,#444);line-height:1.5;word-break:keep-all}
.cut-cast span{color:var(--muted);margin-left:4px}
.cut-vis{margin:6px 0 0;font-size:12.5px}
.cut-vis summary{cursor:pointer;color:var(--muted)}
.cut-vis p{margin:6px 0 0;padding:8px 10px;background:var(--soft);border-radius:8px;line-height:1.55;word-break:keep-all}
/* kids624 — 고른 사진 비우기 */
.ph-shrink .ph-clear{margin-left:6px;padding:2px 8px;border:1px solid var(--line2,#ccc);border-radius:999px;background:#fff;font-size:11.5px;cursor:pointer;color:inherit}
html[data-theme="dark"] .ph-shrink .ph-clear{background:transparent}
/* kids624 — 주인공 목록에서 빠진 분 안내 */
.mk-skip{margin:10px 0 0;font-size:12.5px;color:var(--muted);line-height:1.55;word-break:keep-all}
/* kids624 — 만들던 동화로 돌아가기 띠 */
.my-makeback{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;max-width:1100px;margin:12px auto 0;padding:10px 16px;border-radius:12px;background:#FFF4E5;font-size:13px;box-sizing:border-box}
.my-makeback a{font-weight:700;color:var(--orange-d,#C25A00)}
.my-makeback span{color:var(--muted)}
html[data-theme="dark"] .my-makeback{background:var(--wn-bg)}
@media (max-width:640px){.my-makeback{margin:10px 16px 0}}
/* kids624 — 인물 목소리 */
.nc-voice{margin-top:12px}
.nc-voice .nc-f>span em{font-style:normal;color:var(--muted);font-size:12px}
.nc-voice select{max-width:100%}
/* kids625 — 고른 목소리 들어 보기 단추 */
.nc-voice .pv-play{margin-top:8px;border:1px solid var(--line,#e2e2e2);background:#fff;border-radius:999px;padding:7px 14px;font-size:13px;font-weight:700;cursor:pointer;min-height:36px;max-width:100%}
.nc-voice .pv-play:hover{background:#f7f5ff}
.ch-voice{margin:8px 0 0;font-size:13px;line-height:1.5;word-break:keep-all}
.ch-voice span{color:var(--muted);font-size:12px}
/* kids624 — 인물에 정해 둔 목소리 표시 */
.vd-dflt{font-style:normal;font-weight:500;font-size:11px;color:var(--muted);margin-left:4px}
/* kids624 — 만화 말풍선은 테두리로 읽는 자리 표시 */
.bk-page.reading.bk-toon .bk-bub .bk-l.on{background:#fff;box-shadow:0 0 0 4px rgba(255,168,74,.9),2px 3px 0 rgba(20,20,26,.85)}

/* ★★ kids625 — 함께 등장할 인물 고르기 (등록된 인물 중에서 · 최대 2명) */
.ct-pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.ct-pick{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  background:var(--paper);border:1.5px solid var(--line2);border-radius:var(--r-l);padding:12px 10px 10px;
  transition:border-color .15s,box-shadow .15s,background .15s;min-width:0}
.ct-pick.on{border-color:var(--orange);background:#FFF8F1;box-shadow:0 0 0 3px rgba(255,140,60,.14)}
.ct-pick-f{margin:0;width:100%}
.ct-pick-b{display:flex;flex-direction:column;align-items:center;width:100%;border:none;background:none;
  cursor:pointer;padding:0;font:inherit;color:inherit;min-height:44px}
.ct-pick-b b{display:block;font-size:14px;margin-top:2px;word-break:keep-all;overflow-wrap:anywhere}
.ct-pick-st{display:inline-block;margin-top:8px;padding:4px 10px;border-radius:999px;font-style:normal;
  font-size:12px;font-weight:700;background:var(--soft);color:var(--muted)}
.ct-pick.on .ct-pick-st{background:var(--orange);color:#fff}
.ct-pick-b:hover .ct-pick-st{color:var(--orange)}
.ct-pick.on .ct-pick-b:hover .ct-pick-st{color:#fff;opacity:.9}
.ct-pick .ct-rel1{width:100%}
.ct-pick .ct-rel1 select{width:100%;max-width:100%;font-size:12.5px}
.ct-limit{margin:0 0 12px;padding:11px 14px;border-radius:var(--r-m);background:#FFF1EC;
  border:1px solid #F5B8A6;color:#A63A1C;font-size:13.5px;font-weight:700;line-height:1.55;word-break:keep-all}
.ct-limit.shake{animation:ctShake .35s}
@keyframes ctShake{0%,100%{transform:none}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.ct-newban{display:block;margin-top:16px;padding:14px 16px;border-radius:var(--r-l);text-decoration:none;
  background:linear-gradient(135deg,#FFF6EC,#FFEFE2);border:1.5px dashed var(--orange2);color:var(--ink)}
.ct-newban b{display:block;font-size:14.5px}
.ct-newban span{display:block;margin-top:3px;font-size:13px;color:var(--orange);font-weight:700;word-break:keep-all}
.ct-newban:hover{border-style:solid}
@media (max-width:560px){
  .ct-pick-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
}
/* kids625 — 장면 지우기 */
.cut-mini.cut-sdel{color:#B03A2E;border-color:#F1C4BD}
.cut-mini.cut-sdel:hover{background:#FFF1EE}
/* ★★ kids625 — 대본 화면: 바로 빼기 단추 · 뺀 장면 모음 */
.cut-mini.cut-exb{color:var(--muted)}
.cut-offlist{margin:16px 0 4px;padding:14px 14px 8px;border:1.5px dashed var(--line2);border-radius:var(--r-l);background:var(--soft)}
.cut-off-h{display:block;font-size:14.5px}
.cut-off-p{margin:3px 0 10px;font-size:12.5px;color:var(--muted);word-break:keep-all}
.cut-off-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line);margin:0}
.cut-off-no{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--paper);
  border:1px solid var(--line2);font-size:12.5px;font-weight:700;color:var(--muted)}
.cut-off-tx{flex:1;min-width:0}
.cut-off-tx b{display:block;font-size:13.5px;word-break:keep-all;overflow-wrap:anywhere}
.cut-off-tx em{display:block;font-style:normal;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cut-off-btns{flex:none;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:560px){
  .cut-off-row{flex-wrap:wrap}
  .cut-off-btns{width:100%;justify-content:flex-start;padding-left:38px}
}

/* ★ kids629 — 아이 고르기: 여럿이면 「누구를 주인공으로?」를 묻고, 앞에서 고른 아이는 표만 답니다 */
.ch-ask{margin:0 0 12px;padding:10px 14px;border-radius:12px;background:#fff7ec;color:#7a4a12;font-size:14px;line-height:1.5}
.ch-prev{display:inline-block;margin-top:4px;padding:2px 8px;border-radius:999px;background:#eef4ff;color:#2f5bb7;font-size:11px;font-weight:700}
/* ★ kids629 — 결제 전 만들던 작품이 있을 때 동그라미: 「✏️ 이어서 만들기」 */
.kfab.draft{border-color:var(--orange2);background:var(--soft)}
.kfab.draft>em{color:var(--orange-d);font-weight:700;font-size:8.5px;letter-spacing:-.3px;white-space:nowrap}
.kfab.draft>b.kfab-plus{font-size:19px}
/* ★ kids629 — 만들던 작품 이어하기 칸 (make/_resume.php) */
.rsm{margin:0 auto 26px;max-width:760px;padding:18px;border:2px solid var(--orange2);border-radius:var(--r-l);background:var(--soft)}
.rsm-hd b{display:block;font-family:var(--font-title);font-size:19px;color:var(--orange-d)}
.rsm-hd span{display:block;margin-top:4px;font-size:13.5px;color:var(--muted2)}
.rsm-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.rsm-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:var(--surface);
  border:1.5px solid var(--line2);text-decoration:none;color:var(--ink)}
.rsm-item:hover{border-color:var(--orange)}
.rsm-t{flex:1;min-width:0}
.rsm-t b{display:block;font-size:15.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rsm-t em{display:block;font-style:normal;font-size:12.5px;color:var(--muted2);margin-top:2px}
.rsm-go{flex:none;padding:8px 14px;border-radius:999px;background:var(--orange);color:#fff;font-weight:700;font-size:14px}
.rsm-more{display:inline-block;margin-top:10px;font-size:13px}
.rsm-new{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px dashed var(--line2)}
.rsm-new span{font-size:13px;color:var(--muted2)}
.rsm-sub{max-width:760px;margin:0 auto 12px;font-size:17px}
@media(max-width:520px){ .rsm{padding:14px} .rsm-go{padding:7px 11px;font-size:13px} }
/* ★ kids630 — 한자·일본어 섞인 장면 알림 (make/script.php) */
.cut-cjk{margin:6px 0;padding:6px 10px;border-radius:8px;background:#fdecea;color:#a1271b;font-size:12.5px;line-height:1.45}

/* ★ kids632 — 무료 동화책 연속 듣기: 목록 체크 · 아래 선택 막대 · 연속 듣기 화면 */
.fb-playbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.fb-playbar .mut{font-size:13px;color:var(--muted2)}
.fb-cell{position:relative}
.fb-cell.on .fb-card{border-color:var(--orange);box-shadow:0 0 0 2px var(--orange2)}
.fb-chk{position:absolute;left:8px;top:8px;z-index:2;width:34px;height:34px;display:grid;place-items:center;cursor:pointer}
.fb-chk input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.fb-chk span{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;border:2.5px solid #fff;
  background:rgba(0,0,0,.35);color:#fff;font-weight:800;font-size:15px;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.fb-cell.on .fb-chk span{background:var(--orange);border-color:#fff}
.fb-chk input:focus-visible + span{outline:3px solid var(--orange2);outline-offset:2px}
.fb-chk.off{cursor:help;width:30px;height:30px;border-radius:8px;background:rgba(0,0,0,.35);color:#fff;font-size:15px}
.fb-cell.nov .fb-card{opacity:.8}
.fb-series{display:block;width:100%;margin-top:6px;padding:7px 10px;border-radius:10px;border:1.5px dashed var(--orange2);
  background:var(--soft);color:var(--orange-d);font-size:12.5px;font-weight:700;cursor:pointer}
.fb-sel{position:fixed;left:50%;transform:translateX(-50%);bottom:14px;z-index:65;width:min(560px,calc(100% - 24px));
  background:var(--surface);border:2px solid var(--orange);border-radius:16px;box-shadow:0 8px 26px rgba(0,0,0,.2);padding:10px 12px;box-sizing:border-box}
.fb-sel-row{display:flex;align-items:center;gap:8px}
.fb-sel-open{flex:1;min-width:0;text-align:left;background:none;border:0;color:var(--ink);font-size:14px;cursor:pointer;padding:6px 2px}
.fb-sel-list{list-style:none;margin:0 0 8px;padding:0 0 8px;max-height:42vh;overflow:auto;border-bottom:1px dashed var(--line2)}
.fb-sel-list li{display:flex;align-items:center;gap:6px;padding:6px 2px;font-size:13.5px}
.fb-sel-list .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.fb-sel-list .s{flex:none;font-size:11.5px;color:var(--muted2);max-width:32%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-sel-list button{flex:none;width:30px;height:30px;border-radius:8px;border:1px solid var(--line2);background:var(--paper);color:var(--ink);cursor:pointer}
.fb-sel-list button:disabled{opacity:.35;cursor:default}
body.fb-has-sel{padding-bottom:calc(var(--fbselh,80px) + 24px)}
/* 오른쪽 아래 동그라미가 막대(순서 목록을 펴면 더 높아짐) 위로 비켜 섭니다 */
body.fb-has-sel .kfab{bottom:calc(var(--fbselh,80px) + 26px)}
@media(max-width:520px){ .fb-sel-row .btn-ghost{padding:6px 8px;font-size:12px} .fb-sel-open{font-size:13px} }

.fp-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.fp-back{font-size:14px}
.fp-count{font-size:14px;color:var(--muted2)}
.fp-wrap{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:18px;align-items:start}
.fp-stage{background:var(--surface);border:1.5px solid var(--line2);border-radius:var(--r-l);padding:16px;text-align:center}
.fp-img{aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:var(--paper)}
.fp-img img{width:100%;height:100%;object-fit:cover;display:block}
.fp-title{margin:14px 0 2px;font-size:22px}
.fp-sub{margin:0;font-size:13px;color:var(--muted2)}
.fp-text{margin:12px auto 6px;max-width:640px;font-size:18px;line-height:1.7;min-height:3.4em}
.fp-dots{display:flex;justify-content:center;gap:6px;margin:6px 0 10px}
.fp-dots i{width:8px;height:8px;border-radius:50%;background:var(--line2)}
.fp-dots i.on{background:var(--orange)}
.fp-ctl{display:flex;justify-content:center;align-items:center;gap:14px;margin:8px 0}
.fp-ctl button{display:grid;place-items:center;gap:2px;min-width:74px;padding:10px 12px;border-radius:14px;border:1.5px solid var(--line2);
  background:var(--paper);color:var(--ink);font-size:22px;cursor:pointer}
.fp-ctl button em{font-style:normal;font-size:11.5px;color:var(--muted2)}
.fp-ctl button.big{min-width:130px;background:var(--orange);border-color:var(--orange);color:#fff;font-size:26px}
.fp-ctl button.big em{color:#fff;font-weight:700}
.fp-ctl button:disabled{opacity:.35;cursor:default}
.fp-msg{margin:6px 0;font-size:13px;color:#a1271b}
.fp-end{margin:10px auto;padding:14px;border-radius:14px;background:var(--soft);max-width:520px}
.fp-end b{display:block;font-size:17px;margin-bottom:10px}
.fp-end-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.fp-make{display:inline-block;margin-top:12px;font-size:14px;font-weight:700}
.fp-list{background:var(--surface);border:1.5px solid var(--line2);border-radius:var(--r-l);padding:12px;position:sticky;top:80px}
.fp-list-h{display:block;font-size:14px;margin-bottom:8px}
.fp-list ol{list-style:none;margin:0;padding:0;display:grid;gap:4px;max-height:60vh;overflow:auto}
.fp-list button{width:100%;text-align:left;padding:8px 10px;border-radius:10px;border:0;background:none;color:var(--ink);font-size:13.5px;cursor:pointer}
.fp-list li.on button{background:var(--orange);color:#fff;font-weight:700}
.fp-list li.done button{color:var(--muted2)}
@media(max-width:860px){ .fp-wrap{grid-template-columns:1fr} .fp-list{position:static} .fp-text{font-size:16.5px} }
@media(max-width:420px){ .fp-ctl{gap:8px} .fp-ctl button{min-width:64px;padding:8px} .fp-ctl button.big{min-width:110px} }
/* kids632 — 휴대폰 바닥 「동화 만들기」 띠와 선택 막대가 겹쳐 막대를 못 눌렀습니다(로컬 390 시험). 고르는 동안은 띠를 감춥니다 */
body.fb-has-sel .mcta{display:none !important}
body.fp-page .mcta{display:none !important}


/* ★ kids633 — 유치부·초등부 합친 첫 화면: 두 시작 카드 아래 한 줄 · 여섯 갈래 위 여백 */
.mg-start .two a{display:block}
.mg-cap{display:block;margin-top:8px;font-size:14px;color:var(--ink2);text-align:center;line-height:1.5}
.mg-cap b{color:var(--ink);margin-right:6px}
.eb-six .k8-six{margin-top:14px}
/* (특별 기능 제목 색은 elem.css 그대로 — 남색 판 위 흰 글자 · GPT 검수) */
/* kids633 — 이야기 목록 종류·나이 칩 */
.mg-ages{align-items:center}
.mg-lb{font-size:12.5px;color:var(--muted2);margin-right:4px}
/* kids633 — 14~17세 뜬다스토리 안내 */
.nc-teen{margin:6px 0 10px;padding:9px 12px;border-radius:10px;background:#F4EEFF;color:#5B21B6;font-size:13px;line-height:1.5}
.nc-teen a{font-weight:700}
.ch-teen{display:inline-block;margin-top:4px;padding:2px 8px;border-radius:999px;background:#F4EEFF;color:#5B21B6;font-size:11px;font-weight:700}

/* kids642 — 휴대폰 메뉴: 대분류만 보이고 누르면 그 묶음만 펼침 */
.mdrawer-acc>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  margin-bottom:0;padding:4px 0 10px}
.mdrawer-acc>summary::-webkit-details-marker{display:none}
.mdrawer-acc>summary::after{content:'›';font-size:20px;line-height:1;color:var(--muted);transition:transform .15s;margin-left:8px}
.mdrawer-acc[open]>summary::after{transform:rotate(90deg)}
.mdrawer-acc[open]>summary{margin-bottom:2px}
.mdrawer-first{font-weight:700;color:var(--ink2)}

/* ════════════════════════════════════════════════════════
 * ★ kids653 — 3단 머리글 (사장님 2026-09-30 「전부다 개편」)
 *   1단 로고 · 로그인/회원가입(로그인 뒤: 남은 토큰 · 마이페이지 · 밤/낮)
 *   2단 메뉴 + 「동화 만들기」     3단 2단에서 고른 메뉴의 하위(알약 단추)
 *   내려 읽을 때는 1단만 위로 올라가고 2·3단이 붙어 있습니다.
 *   붙박이 칸들이 쓰는 --hd-h 는 「붙어 있는 높이」 = 2단 52 + 3단 48 + 아래 테두리 1 = 101px.
 * ════════════════════════════════════════════════════════ */
:root{--hd-h:101px}
html body.b-elem{--hd-h:101px}
.hd.hd3{top:-60px}
.hd3 .hd-r1{height:60px}
.hd3 .hd-in{height:100%;padding-top:0;padding-bottom:0;gap:14px}
.hd3 .hd-sp{flex:1}
.hd3 .hd-join{font-size:14px;font-weight:700;padding:8px 15px;border-radius:var(--r-pill);
  border:1.5px solid var(--orange);color:var(--orange);white-space:nowrap}
.hd3 .hd-join:hover{background:var(--soft)}
.hd3 .hd-cta-t{display:none}
.hd3 .hd-r2{height:52px;border-top:1px solid var(--line)}
.hd3 .hd-r2in{display:flex;align-items:stretch;gap:12px;height:100%}
.hd3 .hd-nav{display:flex;align-items:stretch;gap:2px;flex:1;min-width:0;font-size:16px}
.hd3 .hd-nav>a{display:flex;align-items:center;padding:0 16px;border-radius:0;background:none;
  border-bottom:3px solid transparent;color:var(--ink2);font-weight:600}
.hd3 .hd-nav>a:hover{color:var(--orange);background:none}
.hd3 .hd-nav>a.on{color:var(--orange-d);font-weight:800;border-bottom-color:var(--orange)}
.hd3 .hd-r2in>.btn-cta{align-self:center;flex:none}
.hd3 .hd-r3{height:48px;border-top:1px solid var(--line);background:var(--soft)}
.hd3 .hd-r3in{display:flex;align-items:center;height:100%}
.hd3 .hd-r3g{display:flex;align-items:center;gap:6px;min-width:0;overflow-x:auto;
  scrollbar-width:none;white-space:nowrap}
.hd3 .hd-r3g::-webkit-scrollbar{display:none}
.hd3 .hd-r3g[hidden]{display:none!important}
.hd3 .hd-r3g a{flex:none;padding:7px 15px;border-radius:var(--r-pill);font-size:14px;font-weight:700;color:var(--ink2)}
.hd3 .hd-r3g a:hover{background:var(--surface);color:var(--orange)}
.hd3 .hd-r3g a.on{background:var(--surface);color:var(--orange-d);box-shadow:0 1px 5px rgba(60,40,20,.12)}
.hd3 .hd-r3sep{flex:none;width:1px;height:20px;background:var(--line2);margin:0 6px}
.hd3 .hd-r3hd{flex:none;font-size:12.5px;font-weight:700;color:var(--muted);padding:0 6px}
/* ★ kids653 2차 — 휴대폰·태블릿도 3단 (사장님 「이제 햄버거 필요 없잖아」)
 *   1단 로고 · 토큰/로그인 · 계정   2단 메뉴(옆으로 밀기)   3단 하위(옆으로 밀기) — 햄버거·서랍 안 씀 */
@media(max-width:980px){
  :root,html body.b-elem{--hd-h:93px}
  .hd.hd3{top:-56px}
  .hd3 .hd-r1{height:56px}
  .hd3 .hd-in{gap:8px}
  .hd3 .hd-burger,.hd.hd3.hd-tight .hd-burger{display:none!important}
  .hd3 .hd-r2{height:46px}
  .hd3 .hd-r2in{padding-left:0;padding-right:0;gap:0}
  .hd3 .hd-nav,.hd.hd3.hd-tight .hd-nav{display:flex!important;overflow-x:auto;scrollbar-width:none;
    padding:0 var(--pad-x);-webkit-overflow-scrolling:touch;font-size:15px;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .hd3 .hd-nav::-webkit-scrollbar{display:none}
  .hd3 .hd-nav>a{flex:none;padding:0 12px;white-space:nowrap}
  .hd3 .hd-r2in>.btn-cta{display:none}
  .hd3 .hd-r3{height:46px}
  .hd3 .hd-r3in{padding-left:0;padding-right:0}
  .hd3 .hd-r3g{padding:0 var(--pad-x);-webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .hd3 .hd-r3g a{padding:6px 13px;font-size:13.5px}
  .hd3 .hd-r3g a:last-child{margin-right:28px}
  .hd3 .hd-cta-t{display:inline-block;font-size:13.5px;padding:9px 16px}
  /* 1단 계정 칸 — 서랍이 없으니 이름 칩(동그란 얼굴)·로그인·회원가입·밤낮을 1단에 둡니다 */
  .hd3 .hd-act .hd-mewrap,.hd3 .hd-act .hd-me{display:flex!important}
  .hd3 .hd-act .lg,.hd3 .hd-act .theme-btn{display:inline-flex!important}
  .hd3 .hd-act .theme-btn{align-items:center;justify-content:center}
  .hd3 .hd-me b{display:none}
  .hd3 .hd-me{padding:3px!important}
  .hd3 .hdm{display:none}
}
@media(max-width:560px){
  .hd3 .hd-cta-t{display:none}
  .hd3 .hd-act{gap:6px}
  .hd3 .hd-act .hd-join{display:inline-block!important;padding:6px 11px;font-size:12.5px}
  .hd3 .hd-act .lg{font-size:12.5px}
  .hd3 .hd-tk em{display:none}
}

/* 휴대폰 서랍 — 하위 항목을 두 줄 칸으로 (시안 MobileMenu) */
.mdrawer-acc[open]{background:var(--soft)}
.mdrawer-acc .mdrawer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:2px 0 12px}
.mdrawer-acc .mdrawer-grid .mdrawer-hd{grid-column:1/-1;padding:4px 2px 0}
.mdrawer-acc .mdrawer-grid a{display:block;padding:11px 12px;border-radius:12px;background:var(--surface);
  border:1px solid var(--line2);font-size:14px;font-weight:600;color:var(--ink2);line-height:1.35}
.mdrawer-acc .mdrawer-grid a.on{border-color:var(--orange);color:var(--orange-d)}
.mdrawer-acc .mdrawer-grid .mdrawer-first{grid-column:1/-1}

/* ════════════════════════════════════════════════════════
 * ★ kids653 — 이야기 고르기 = 동화책 (사장님 2026-09-30)
 *   나라 칸(전체·전래·세계 명작·이솝) → 위에서 늘어진 책갈피
 *   목록 칸 → 펼친 책(가운데 접힌 자국 · 아래 겹친 종이)
 *   카드 → 세로 책 표지(왼쪽 책등 · 갈래 색 · 제목 · 동그란 그림)
 * ════════════════════════════════════════════════════════ */
.ogb-ttl{display:none}
.ogb{--bk-desk:#EFE4CF;--bk-paper:#FFFDF7;--bk-paper2:#FBF5E8;--bk-fold:#EADBBE;--bk-line:#CDB88F;
  --bk-edge:#D8C7A6;--bk-ink:#3B2B12;--bk-ink2:#5B4520;--bk-sheet1:#E4D4B2;--bk-sheet2:#DCC9A3;
  background:var(--bk-desk)}
html[data-theme="dark"] .ogb{--bk-desk:#1C1712;--bk-paper:#2A231B;--bk-paper2:#2F271E;--bk-fold:#3B3024;
  --bk-line:#5A4A33;--bk-edge:#15110C;--bk-ink:#F3E6CC;--bk-ink2:#D9C6A2;--bk-sheet1:#241E17;--bk-sheet2:#1F1A14}
.ogb .wz-head h1{color:var(--bk-ink)}
.ogb .wz-head p{color:var(--bk-ink2)}
/* 책갈피 */
.ogb-rib{display:flex;gap:12px;align-items:flex-end;padding:18px 30px 0;position:relative;z-index:2;margin-bottom:-14px;
  overflow-x:auto;scrollbar-width:none}
.ogb-rib::-webkit-scrollbar{display:none}
.ogb-rib a{flex:none;min-width:110px;height:62px;padding:0 14px 22px;display:flex;align-items:flex-end;justify-content:center;
  color:#fff;font-weight:700;font-size:15px;white-space:nowrap;background:#8F6424;opacity:.8;
  clip-path:polygon(0 0,50% 14%,100% 0,100% 100%,0 100%);transition:height .18s,opacity .18s}
.ogb-rib a:hover{color:#fff;opacity:1;height:70px}
.ogb-rib a.on{height:78px;opacity:1}
.ogb-rib a[data-c="ALL"]{background:#A8423A}
.ogb-rib a[data-c="KOREA"]{background:#2F6D93}
.ogb-rib a[data-c="FABLE"]{background:#357A6C}
.ogb-rib a[data-c="WORLD"]{background:#8F6424}
/* 펼친 책 */
.ogb-book{position:relative;padding:36px 36px 38px;border-radius:20px;border:1.5px solid var(--bk-line);
  background:linear-gradient(90deg,var(--bk-paper) 0%,var(--bk-paper2) 48.5%,var(--bk-fold) 50%,var(--bk-paper2) 51.5%,var(--bk-paper) 100%);
  box-shadow:0 8px 0 -3px var(--bk-sheet1),0 15px 0 -6px var(--bk-sheet2),0 22px 30px rgba(90,70,40,.18);margin-bottom:10px}
.ogb-book.has-rib{padding-top:40px}
.ogb .og-search{margin:0 0 16px}
.ogb .og-search input{max-width:none;background:#fff;border-color:var(--bk-line);color:#3B2B12}
html[data-theme="dark"] .ogb .og-search input{background:var(--bk-paper2);color:var(--bk-ink)}
.ogb .og-cats a{border-color:var(--bk-line);background:var(--bk-paper);color:var(--bk-ink2)}
.ogb .og-cats a:hover{border-color:#A8423A;color:#A8423A}
.ogb .og-cats a.on{background:var(--bk-fold);color:var(--bk-ink);border-color:var(--bk-line)}
.ogb .og-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:30px 26px;padding-top:8px}
/* 책 표지 카드 */
.ogb .og-book{--bkc:#8F6424;background:none;border:0;border-radius:0;box-shadow:none;overflow:visible;position:relative}
.ogb .og-book:hover{transform:none;box-shadow:none}
.ogb .og-book[data-k="KOREA"]{--bkc:#2F6D93}
.ogb .og-book[data-k="FABLE"]{--bkc:#357A6C}
.ogb .og-book[data-k="WORLD"]{--bkc:#A8423A}
.ogb .og-book[data-k="HISTORY"]{--bkc:#8F6424}
.ogb .og-book[data-k="CAREER"]{--bkc:#5B4A9A}
.ogb .og-book[data-k="SUBJECT"]{--bkc:#3E7B3A}
.ogb .og-cover{aspect-ratio:3/4;border-radius:4px 14px 14px 4px;overflow:hidden;background:var(--bkc);
  box-shadow:5px 7px 0 var(--bk-edge);transition:transform .25s}
.ogb .og-book:hover .og-cover{transform:translateY(-4px) rotate(-1deg)}
.ogb .og-cover::before{content:'';position:absolute;left:0;top:0;bottom:0;width:12px;background:rgba(0,0,0,.22);z-index:2}
.ogb .og-cover::after{content:'';position:absolute;left:12px;top:0;bottom:0;width:2px;background:rgba(255,255,255,.25);z-index:2}
.ogb .ogb-ttl{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  position:absolute;left:24px;right:14px;top:36px;z-index:2;font-family:var(--font-title);font-weight:400;
  font-size:19px;line-height:1.3;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.ogb .og-cover .og-cat{left:24px;top:14px;background:none;padding:0;font-size:11.5px;font-weight:600;color:rgba(255,255,255,.9);box-shadow:none}
.ogb .og-cover img{position:absolute;left:14%;bottom:8%;width:72%;aspect-ratio:1/1;height:auto;border-radius:50%;
  object-fit:cover;border:4px solid rgba(255,255,255,.32);background:rgba(255,255,255,.18);transition:transform .4s}
.ogb .og-book:hover .og-cover img{transform:scale(1.04)}
.ogb .og-like{top:8px;right:8px}
.ogb .og-body{padding:14px 2px 0}
.ogb .og-body b{color:var(--bk-ink)}
.ogb .og-body p{color:var(--bk-ink2)}
.ogb .og-body .btn-ghost{background:var(--bk-paper);border-color:var(--bk-line);color:var(--bk-ink2);font-weight:700}
.ogb .og-body .btn-ghost:hover{border-color:#A8423A;color:#A8423A}
.ogb .my-empty{background:transparent}
@media(max-width:900px){
  .ogb-book{padding:26px 16px 24px;background:var(--bk-paper)}   /* 좁으면 가운데 접힌 자국은 뺍니다 */
  .ogb-book.has-rib{padding-top:30px}
  .ogb-rib{padding:14px 12px 0;gap:8px;margin-bottom:-10px}
  .ogb-rib a{min-width:74px;height:50px;padding:0 10px 16px;font-size:13px}
  .ogb-rib a:hover{height:54px}.ogb-rib a.on{height:62px}
}
@media(max-width:640px){
  .ogb .og-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
  .ogb .ogb-ttl{font-size:16px;left:20px;top:32px}
  .ogb .og-cover .og-cat{left:20px}
  .ogb .og-body p{display:none}   /* 휴대폰 두 줄 칸에서는 줄거리 대신 표지·제목·부 수만 (줄거리는 부 고르기 화면에 그대로) */
}
.ogb .ct-tip{background:var(--bk-paper);border:1.5px solid var(--bk-line);color:var(--bk-ink2)}
.ogb .ct-tip b{color:var(--bk-ink)}
.ogb .final{background:linear-gradient(180deg,var(--bk-paper),var(--bk-fold));border:1.5px solid var(--bk-line)}
.ogb .final h2{color:var(--bk-ink)}.ogb .final p{color:var(--bk-ink2)}

/* ════════════════════════════════════════════════════════
 * ★ kids653 — 새 첫 화면 칸 (① 사진 한 장 · 띠 · ② 세 가지 추억 · ③ 책 여덟 권 · ④ 기다리는 시간)
 * ════════════════════════════════════════════════════════ */
.hs-h{display:flex;align-items:center;justify-content:center;gap:12px;text-align:center}
.hs-num{flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
  background:var(--orange);color:var(--on-orange,#fff);font-style:normal;font-family:var(--font-ko);font-weight:800;font-size:19px}
.hs-kids .lead{max-width:640px;margin-left:auto;margin-right:auto}
.hs-rows{display:flex;flex-direction:column;gap:18px;margin-top:26px}
.hs-row{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:center;background:var(--surface);
  border:1px solid var(--line2);border-radius:var(--r-xl);padding:18px 22px;box-shadow:var(--sh-card)}
.hs-rowlb{font-size:18px;font-weight:800;color:var(--ink)}
.hs-rowlb em{display:block;font-style:normal;font-size:13px;font-weight:500;color:var(--muted);margin-top:4px}
.hs-cells{display:grid;grid-template-columns:1fr auto 1fr 1fr;gap:14px;align-items:center}
.hs-arrow{font-style:normal;font-size:24px;color:var(--orange);font-weight:800}
.hs-cell{margin:0;position:relative;border-radius:var(--r-l);overflow:hidden;aspect-ratio:1/1;background:var(--soft)}
.hs-cell img{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block}
.hs-cell figcaption{position:absolute;left:10px;bottom:10px;padding:5px 12px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.94);color:#102B45;font-size:13px;font-weight:700}
.hs-cell.ph{outline:3px dashed var(--line2);outline-offset:-3px}
.hs-vids{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}
.hs-vid{position:relative;aspect-ratio:16/9;border-radius:var(--r-xl);overflow:hidden;background:#0F1B3D;cursor:pointer}
.hs-vid img,.hs-vid video{width:100%;height:100%;object-fit:cover;display:block}
.hs-vid video{object-fit:contain;background:#000}
.hs-vtag{position:absolute;left:14px;top:14px;padding:6px 13px;border-radius:var(--r-pill);background:rgba(0,0,0,.55);
  color:#fff;font-size:13px;font-weight:700}
.hs-play{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;border:0;
  background:rgba(255,255,255,.94);color:var(--orange);display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 10px 30px rgba(0,0,0,.3);transition:transform .2s}
.hs-vid:hover .hs-play{transform:scale(1.08)}
.hs-note{text-align:center;font-size:12.5px;color:var(--muted);margin:14px 0 0}
/* 띠 */
.hs-strip{padding:26px 0 30px;background:var(--soft)}
.hs-strip-hd{display:block;text-align:center;font-size:17px;font-weight:800;margin-bottom:14px;color:var(--ink)}
.hs-strip-mask{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.hs-strip-in{display:flex;gap:16px;width:max-content;animation:hsFlow 60s linear infinite}
.hs-strip:hover .hs-strip-in{animation-play-state:paused}
@keyframes hsFlow{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.hs-pair{flex:none;display:flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--line2);
  border-radius:18px;padding:8px}
.hs-pair img{width:92px;height:92px;border-radius:12px;object-fit:cover;object-position:center 22%;display:block}
.hs-pair i{font-style:normal;color:var(--orange);font-weight:800}
/* ③ 책 여덟 권 */
.hs-books{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px 28px;margin-top:28px}
.hs-book{--bkc:#8F6424;display:flex;flex-direction:column;gap:6px;color:var(--ink)}
.hs-book:hover{color:var(--ink)}
.hs-book[data-k="TALE"]{--bkc:#A8423A}.hs-book[data-k="HISTORY"]{--bkc:#8F6424}
.hs-book[data-k="CAREER"]{--bkc:#5B4A9A}.hs-book[data-k="SUBJECT"]{--bkc:#3E7B3A}
.hs-book[data-k="WORLD"]{--bkc:#2F6D93}.hs-book[data-k="COMIC"]{--bkc:#C0567A}
.hs-book[data-k="DIARY"]{--bkc:#B7791F}.hs-book[data-k="CUSTOM"]{--bkc:#357A6C}
.hs-cover{position:relative;display:block;aspect-ratio:3/4;border-radius:4px 16px 16px 4px;overflow:hidden;background:var(--bkc);
  box-shadow:6px 8px 0 rgba(120,100,70,.28);transition:transform .25s}
.hs-book:hover .hs-cover{transform:translateY(-6px) rotate(-1.5deg)}
.hs-cover::before{content:'';position:absolute;left:0;top:0;bottom:0;width:14px;background:rgba(0,0,0,.22);z-index:2}
.hs-cover::after{content:'';position:absolute;left:14px;top:0;bottom:0;width:2px;background:rgba(255,255,255,.25);z-index:2}
.hs-brand{position:absolute;left:28px;top:18px;z-index:2;font-size:11.5px;color:rgba(255,255,255,.85);font-weight:600}
.hs-ttl{position:absolute;left:28px;right:16px;top:38px;z-index:2;font-family:var(--font-title);font-weight:400;
  font-size:24px;line-height:1.25;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.hs-cover img{position:absolute;left:15%;bottom:8%;width:70%;aspect-ratio:1/1;height:auto;border-radius:50%;object-fit:cover;
  border:5px solid rgba(255,255,255,.32);background:rgba(255,255,255,.18)}
.hs-bn{font-size:16.5px;font-weight:800;margin-top:10px}
.hs-bd{font-size:13.5px;color:var(--muted)}
@media(max-width:980px){
  .hs-row{grid-template-columns:1fr;gap:10px;padding:14px}
  .hs-books{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 16px}
  .hs-ttl{font-size:19px}
}
@media(max-width:640px){
  .hs-h{gap:9px}.hs-num{width:32px;height:32px;font-size:16px}
  .hs-cells{grid-template-columns:1fr auto 1fr 1fr;gap:6px}
  .hs-arrow{font-size:16px}
  .hs-cell{border-radius:12px}
  .hs-cell figcaption{left:4px;right:4px;bottom:5px;padding:3px 4px;font-size:11px;text-align:center}
  .hs-vids{grid-template-columns:1fr;gap:12px}
  .hs-play{width:60px;height:60px;margin:-30px 0 0 -30px}
  .hs-books{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px}
  .hs-ttl{font-size:18px;left:24px;top:32px}.hs-brand{left:24px;top:14px}
  .hs-pair img{width:72px;height:72px}
}
@media (prefers-reduced-motion:reduce){ .hs-strip-in{animation:none} .hs-strip-mask{overflow-x:auto} }

/* ★ kids653 2차 — 표지는 **진짜 그림책처럼** (사장님 「누가 동그라미 안에 넣으라 했너」)
 *   그림이 표지 전체를 덮고, 위에 제목, 왼쪽 책등(접힌 자국), 오른쪽에 종이 두께, 아래 갈래 띠.
 *   동그라미 틀은 걷어냈습니다. 위 규칙보다 뒤에 적어 이깁니다. */
.ogb .og-cover,.hs-cover{border-radius:3px 10px 10px 3px;
  box-shadow:1px 0 0 #fff,3px 1px 0 #E9E2D4,4px 1px 0 #fff,6px 2px 0 #DDD4C2,7px 2px 0 #fff,9px 3px 0 #D2C7B2,
             12px 12px 20px rgba(60,40,20,.28)}
.ogb .og-cover img,.hs-cover img{position:absolute;inset:0;left:0;bottom:auto;width:100%;height:100%;aspect-ratio:auto;
  border:0;border-radius:0;object-fit:cover;object-position:center 30%;background:var(--bkc)}
.ogb .og-book:hover .og-cover img{transform:none}
/* 제목이 읽히게 위쪽만 어둡게 · 아래는 갈래 색 띠 */
.ogb .og-cover::after,.hs-cover::after{content:'';position:absolute;inset:0;left:0;width:auto;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,.18) 30%,rgba(0,0,0,0) 46%),
             linear-gradient(90deg,rgba(0,0,0,.28) 0,rgba(255,255,255,.28) 12px,rgba(0,0,0,.12) 15px,rgba(0,0,0,0) 26px)}
.ogb .og-cover::before,.hs-cover::before{width:7px;background:var(--bkc);opacity:.95;z-index:2}
.ogb .ogb-ttl,.hs-ttl{left:22px;right:14px;top:30px;font-size:21px;text-shadow:0 2px 6px rgba(0,0,0,.45)}
.hs-ttl{font-size:25px;top:36px}
.ogb .og-cover .og-cat,.hs-brand{z-index:2;left:22px;top:12px}
.ogb .og-cover .og-cat{top:12px}
/* 아래 갈래 띠 */
.ogb .og-book .og-cover,.hs-book .hs-cover{border-bottom:10px solid var(--bkc)}
@media(max-width:640px){
  .ogb .ogb-ttl{font-size:17px;left:16px;top:28px}.hs-ttl{font-size:19px;left:16px;top:30px}
  .ogb .og-cover .og-cat,.hs-brand{left:16px;top:10px}
  .ogb .og-cover,.hs-cover{border-bottom-width:7px}
}

/* ★ kids653 — 갈래 히어로 롤링 · 구분 탭 + 전체 목록 */
.kh-bg{position:absolute;inset:0;overflow:hidden;background:#0F1B3D}
.kh-sl{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 32%;opacity:0;transition:opacity 1s ease}
.kh-sl.on{opacity:1}
.el-hero__im.kh-wrap img.kh-sl{width:100%;height:100%}
.kl-tabs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.kl-tabs button{border:1.5px solid var(--line2);background:var(--surface);color:var(--ink2);border-radius:var(--r-pill);
  padding:9px 18px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit}
.kl-tabs button:hover{border-color:var(--orange2);color:var(--orange)}
.kl-tabs button.on{background:var(--orange);border-color:transparent;color:var(--on-orange,#fff)}
.kl-n{margin-left:auto;font-size:13px;color:var(--muted)}
.kl-n b{color:var(--ink)}
.kl-it[hidden]{display:none!important}
.kl-it>.wk-card{height:100%}
@media(max-width:640px){
  .kl-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:calc(-1 * var(--pad-x,16px));margin-right:calc(-1 * var(--pad-x,16px));padding:0 var(--pad-x,16px)}
  .kl-tabs::-webkit-scrollbar{display:none}
  .kl-tabs button{flex:none;padding:8px 14px;font-size:13px}
  .kl-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}
/* kids653 — 원작 동화 화면 히어로 (최근 견본 영상 롤링) */
.og-hero{position:relative;min-height:380px;overflow:hidden;display:flex;align-items:center}
.og-hero-veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,253,247,.95) 0%,rgba(255,253,247,.78) 36%,rgba(255,253,247,0) 64%)}
html[data-theme="dark"] .og-hero-veil{background:linear-gradient(90deg,rgba(20,16,12,.94) 0%,rgba(20,16,12,.7) 38%,rgba(20,16,12,0) 66%)}
.og-hero-in{position:relative;z-index:2;width:100%;padding-top:48px;padding-bottom:48px}
.og-hero-kick{margin:0 0 8px;font-weight:700;color:var(--ink2)}
.og-hero h1{margin:0 0 20px;font-family:var(--font-title);font-weight:400;font-size:48px;color:var(--ink);line-height:1.15}
.ogb .og-start{font-family:var(--font-title);font-weight:400;font-size:34px;color:var(--bk-ink);margin:0 0 8px}
@media(max-width:640px){
  .og-hero{min-height:300px;align-items:flex-end}
  .og-hero-veil{background:linear-gradient(180deg,rgba(255,253,247,0) 0%,rgba(255,253,247,.8) 55%,rgba(255,253,247,.97) 100%)}
  html[data-theme="dark"] .og-hero-veil{background:linear-gradient(180deg,rgba(20,16,12,0) 0%,rgba(20,16,12,.8) 55%,rgba(20,16,12,.97) 100%)}
  .og-hero h1{font-size:34px}.ogb .og-start{font-size:26px}
}
/* kids653 — 이야기 목록 거르기: 찾기 한 줄 + 펼침 목록 한 줄 */
.ogf-row{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}
.ogf{position:relative}
.ogf>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;padding:9px 16px;border-radius:var(--r-pill);
  border:1.5px solid var(--bk-line,var(--line2));background:var(--bk-paper,var(--surface));font-size:13.5px;color:var(--bk-ink2,var(--ink2));white-space:nowrap}
.ogf>summary::-webkit-details-marker{display:none}
.ogf>summary::after{content:'▾';font-size:11px;opacity:.7}
.ogf[open]>summary{border-color:#A8423A}
.ogf>summary b{color:var(--bk-ink,var(--ink))}
.ogf>.og-cats{position:absolute;left:0;top:calc(100% + 6px);z-index:30;display:flex;flex-direction:column;align-items:stretch;gap:4px;
  min-width:210px;max-height:340px;overflow:auto;margin:0;padding:8px;border-radius:14px;background:var(--surface);
  border:1px solid var(--line2);box-shadow:var(--sh-lift)}
.ogb .ogf>.og-cats a{border:0;border-radius:10px;padding:9px 12px;background:transparent;text-align:left}
.ogb .ogf>.og-cats a:hover{background:var(--soft)}
.ogb .ogf>.og-cats a.on{background:var(--bk-fold)}
@media(max-width:640px){ .ogf>.og-cats{min-width:180px} .ogf-row .ogf:last-child>.og-cats{left:auto;right:0} }
/* kids653 — 무료 이야기: 동화 하나 = 카드 하나 */
.fb-acts{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.fb-acts .fb-make{text-align:center;font-weight:700}
.fb-parts{font-size:12px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.fb-parts a{color:var(--ink2);text-decoration:underline;text-underline-offset:2px}
/* kids653 — 갈래 화면 「만들다 만 작품 · 이어 만들기」 */
.rb{margin:22px 0 6px}
.rb-in{background:var(--surface);border:1.5px solid var(--orange2);border-radius:var(--r-xl);padding:16px 18px;box-shadow:var(--sh-card)}
.rb-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.rb-hd b{font-size:16px;color:var(--ink)}
.rb-hd b em{font-style:normal;display:inline-block;min-width:22px;padding:1px 7px;margin-left:4px;border-radius:999px;background:var(--orange);color:var(--on-orange,#fff);font-size:12.5px;text-align:center}
.rb-hd a{font-size:13px;font-weight:700;color:var(--orange-d)}
.rb-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.rb-it{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:14px;background:var(--soft);color:var(--ink)}
.rb-it:hover{color:var(--ink);outline:2px solid var(--orange2)}
.rb-t{min-width:0}
.rb-t b{display:block;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rb-t i{display:block;font-style:normal;font-size:12.5px;color:var(--muted);margin-top:2px}
.rb-go{flex:none;font-size:13px;font-weight:800;color:var(--orange-d)}
.rb-more{align-self:center;font-size:13px;font-weight:700;color:var(--orange-d);padding:8px}
.rb-other{margin:10px 0 0;font-size:13px;color:var(--muted)}
.rb-other b{color:var(--ink)}
.rb-other a{margin-left:6px;font-weight:700;color:var(--orange-d)}
.ogb .rb-in{border-color:var(--bk-line);background:var(--bk-paper)}
@media(max-width:640px){ .rb-list{grid-template-columns:1fr} }

/* ★ kids653 2차 — 3단은 펼칠 때만 (2단에 마우스 · 휴대폰은 누름) — 머리글 아래로 덮어 펼쳐서 본문을 밀지 않습니다 */
:root,html body.b-elem{--hd-h:53px}
.hd.hd3{top:-60px}
.hd3 .hd-r3{display:none;position:absolute;left:0;right:0;top:100%;z-index:59;box-shadow:0 10px 22px rgba(20,40,80,.14)}
.hd3.r3-on .hd-r3{display:block}
.hd3 .hd-nav>a.peek{color:var(--orange)}
.hd3 .hd-nav>a.peek:not(.on){border-bottom-color:var(--line2)}
.hd3 .hd-r3all{display:none}
@media(max-width:980px){
  :root,html body.b-elem{--hd-h:47px}
  .hd.hd3{top:-56px}
  .hd3 .hd-r3all{display:inline-block;background:var(--surface);color:var(--orange-d)!important;border:1px solid var(--line2)}
}
.hd3 .hd-nav>a,.hd3 .hd-r3g a{-webkit-tap-highlight-color:transparent}
/* kids653 2차 — ① 이름표가 얼굴을 가리지 않게 그림 아래로 · 한 줄 */
.hs-cell{aspect-ratio:auto;background:none;overflow:visible;border-radius:0;display:flex;flex-direction:column;gap:8px}
.hs-cell img{aspect-ratio:1/1;height:auto;border-radius:var(--r-l);background:var(--soft)}
.hs-cell.ph{outline:0}
.hs-cell.ph img{outline:3px dashed var(--line2);outline-offset:-3px}
.hs-cell figcaption{position:static;background:none;padding:0;text-align:center;color:var(--ink);font-size:14px;font-weight:800}
.hs-rowlb{font-size:20px}
.hs-rowlb em{display:inline;margin-left:8px;margin-top:0}
@media(max-width:640px){
  .hs-cell figcaption{position:static;left:auto;right:auto;bottom:auto;padding:0;font-size:12.5px}
  .hs-rowlb{font-size:17px}
}
/* ② 세 가지 추억 — 영상 · 휴대폰·태블릿은 두 칸 + 한 칸 */
.t3 video.t3-v{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;margin-bottom:14px;background:#0F1B3D}
@media(max-width:980px){
  .hs-three{grid-template-columns:1fr 1fr!important;gap:12px}
  .hs-three .t3:nth-child(3){grid-column:1/-1}
  .hs-three .t3:nth-child(3) video,.hs-three .t3:nth-child(3) img{aspect-ratio:16/9}
  .hs-three .t3 span{padding:0 8px}
}
/* kids653 2차 — 책 네 권 · 표지에 갈래 + 이야기 제목 */
.hs-books{grid-template-columns:repeat(4,minmax(0,1fr))}
.hs-brand{font-size:12.5px;font-weight:800;color:#fff;background:var(--bkc);padding:3px 9px;border-radius:999px;left:22px}
@media(max-width:640px){ .hs-books{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* ★ kids653 3차 — 1단 아이콘(뜬다샵 · 고객센터) · 2단 네 메뉴 한 화면 */
.hd3 .hd-ic{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px;border-radius:var(--r-pill);
  color:var(--ink2);font-size:13.5px;font-weight:700;white-space:nowrap;border:1.5px solid transparent}
.hd3 .hd-ic:hover{background:var(--soft);color:var(--orange)}
.hd3 .hd-ic.on{border-color:var(--orange2);color:var(--orange-d)}
.hd3 .hd-ic svg{flex:none}
@media(max-width:1100px){ .hd3 .hd-ic span{display:none} .hd3 .hd-ic{width:38px;padding:0;justify-content:center} }
@media(max-width:980px){
  .hd3 .hd-nav,.hd.hd3.hd-tight .hd-nav{overflow:visible;padding:0 6px;-webkit-mask-image:none;mask-image:none;gap:0}
  .hd3 .hd-nav>a{flex:1 1 0;justify-content:center;padding:0 2px;font-size:14.5px;min-width:0}
}
@media(max-width:560px){
  .hd3 .hd-ic{width:34px;height:34px}
  .hd3 .hd-act{gap:4px}
  .hd3 .hd-nav>a{font-size:13.5px;letter-spacing:-.2px}
}
@media(max-width:360px){ .hd3 .hd-nav>a{font-size:12.5px} .hd3 .hd-ic{width:30px} }
/* kids653 3차 — ① 아래 영상 둘은 휴대폰에서도 한 줄 (② 첫 줄처럼) */
@media(max-width:640px){
  .hs-vids{grid-template-columns:1fr 1fr;gap:10px}
  .hs-vid{aspect-ratio:4/3;border-radius:16px}
  .hs-vtag{left:8px;top:8px;padding:4px 9px;font-size:11px}
  .hs-play{width:48px;height:48px;margin:-24px 0 0 -24px}
  .hs-play svg{width:22px;height:22px}
}
/* ★ kids653 4차 — 3단은 지금 화면이 든 메뉴의 하위를 늘 펼쳐 둠 · 고른 2단 메뉴에 색 → 그 아래로 3단이 이어짐 */
.hd3.r3-fix .hd-r3{position:static;display:block;box-shadow:none}
.hd.hd3.r3-fix{--hd-h:101px}
.hd3 .hd-nav>a.on{background:var(--soft);color:var(--orange-d);font-weight:800;border-radius:14px 14px 0 0;border-bottom-color:var(--orange)}
.hd3 .hd-nav>a.peek{background:color-mix(in srgb,var(--soft) 70%,transparent);color:var(--orange);border-radius:14px 14px 0 0}
.hd3 .hd-r3{background:var(--soft)}
@media(max-width:980px){ .hd.hd3.r3-fix{--hd-h:93px} }
/* 고른 메뉴와 3단을 같은 색 한 덩어리로 (조금 더 진하게) */
.hd3{--r3bg:color-mix(in srgb,var(--orange) 14%,var(--surface))}
.hd3 .hd-r3,.hd3 .hd-nav>a.on{background:var(--r3bg)}
.hd3 .hd-nav>a.peek{background:color-mix(in srgb,var(--orange) 8%,var(--surface))}
.hd3 .hd-r3{border-top-color:transparent}
.hd3 .hd-nav>a.on{border-bottom-color:transparent}
/* kids653 5차 — 3단을 늘 펼친 화면은 머리띠 높이(--hd-h)를 본문 붙박이 칸(마이페이지 옆 메뉴 등)도 같이 쓰게 (교차검수: 헤더에만 걸려 있었음) */
:root:has(.hd.hd3.r3-fix),html:has(.hd.hd3.r3-fix) body.b-elem{--hd-h:101px}
@media(max-width:980px){ :root:has(.hd.hd3.r3-fix),html:has(.hd.hd3.r3-fix) body.b-elem{--hd-h:93px} }
/* ★ kids653 6차 — 1단 「주간 · 야간」 두 칸 단추 (달 단추·초등 전용 단추 대신 한 가지) */
.hd3 .hd-act .el-dark{display:none!important}   /* 초등 화면의 옛 단추는 숨기고 기능만 이어 씀 */
.hd3 .theme-btn{display:none!important}
.hd-dn{display:inline-flex;align-items:center;padding:3px;border-radius:999px;border:1px solid var(--line2);background:var(--soft);cursor:pointer;flex:none;font-family:inherit}
.hd-dn i{font-style:normal;font-size:12.5px;font-weight:700;padding:5px 11px;border-radius:999px;color:var(--muted);white-space:nowrap}
.hd-dn .dn-d{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(30,60,120,.16)}
.hd-dn.night .dn-d{background:transparent;color:var(--muted);box-shadow:none}
.hd-dn.night .dn-n{background:var(--orange);color:var(--on-orange,#fff)}
@media(max-width:980px){ .hd3 .hd-act .hd-dn{display:inline-flex!important} }
@media(max-width:560px){ .hd-dn span{display:none} .hd-dn i{padding:4px 8px;font-size:13px} }
/* kids661 — 좁은 휴대폰(390px)에 로그인하면 주간·야간 단추가 오른쪽 밖으로 11~23px 밀려났습니다.
   간격·아이콘·단추 안쪽 여백만 줄여 한 줄에 들어가게 합니다(아무것도 숨기지 않음). */
@media(max-width:430px){
  .hd3 .hd-r1 .hd-in{gap:6px}
  .hd3 .hd-r1 .hd-act{gap:4px}
  .hd3 .hd-r1 .hd-ic{width:30px;min-width:30px}
  .hd3 .hd-r1 .hd-tk{padding:4px 7px;gap:3px}
  .hd3 .hd-dn{padding:2px}
  .hd3 .hd-dn i{padding:4px 6px;font-size:12px}
}
@media(max-width:360px){
  .hd3 .hd-r1 .hd-brand{max-width:96px;overflow:hidden} .hd3 .hd-r1 .hd-brand img{max-width:96px;height:auto}
}
/* kids661 — 뜬다샵 · 고객센터 하위 = 화면 맨 위 책갈피 탭 (머리글 아래로 늘어진 책갈피 끈) */
.hd-rib{position:relative;z-index:5;background:transparent;pointer-events:none}
.hd-rib-in{display:flex;gap:10px;align-items:flex-start;overflow-x:auto;scrollbar-width:none;padding:0 4px;pointer-events:auto}
.hd-rib-in::-webkit-scrollbar{display:none}
.hd-rib a{flex:none;min-width:112px;height:54px;padding:12px 16px 0;display:flex;align-items:flex-start;justify-content:center;
  color:#fff;font-weight:700;font-size:15px;white-space:nowrap;background:#8F6424;opacity:.78;text-decoration:none;
  clip-path:polygon(0 0,100% 0,100% 100%,50% 84%,0 100%);transition:height .18s,opacity .18s;box-shadow:none}
.hd-rib a:hover{color:#fff;opacity:1;height:60px}
.hd-rib a.on{height:68px;opacity:1}
.hd-rib a[data-i="0"]{background:#A8423A}
.hd-rib a[data-i="1"]{background:#2F6D93}
.hd-rib a[data-i="2"]{background:#357A6C}
.hd-rib a[data-i="3"]{background:#8F6424}
.hd-rib a[data-i="4"]{background:#5B4A9A}
.hd-rib a[data-i="5"]{background:#3E7B3A}
.hd-rib + .mdrawer + *, .hd-rib ~ main{margin-top:-6px}
@media(max-width:640px){
  .hd-rib-in{gap:6px;padding:0}
  .hd-rib a{min-width:0;flex:1 1 0;height:46px;padding:10px 8px 0;font-size:13px}
  .hd-rib a:hover{height:50px}.hd-rib a.on{height:56px}
}
/* kids661 — 첫 화면 맨 아래 실물 동화책 배너 (④와 같은 폭) */
.hs-shop{padding-top:10px}
.hs-shopban{position:relative;display:block;border-radius:24px;overflow:hidden;aspect-ratio:1600/680;min-height:300px;
  box-shadow:0 18px 40px rgba(30,60,120,.18);color:#fff;text-decoration:none;background:#23324F}
.hs-shopban img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;transition:transform .5s}
.hs-shopban:hover img{transform:scale(1.03)}
.hs-shopban::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,24,48,.82) 0%,rgba(14,24,48,.55) 36%,rgba(14,24,48,0) 62%)}
.hs-shoptx{position:absolute;left:0;top:0;bottom:0;z-index:2;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:0 56px;max-width:560px}
.hs-shopk{font-style:normal;font-size:14px;font-weight:700;letter-spacing:.02em;color:#FFD89A}
.hs-shoptx b{font-family:var(--font-title);font-weight:400;font-size:40px;line-height:1.25;color:#fff}
.hs-shopp{font-size:17px;color:rgba(255,255,255,.9)}
.hs-shopp strong{color:#FFB35C;font-size:22px}
.hs-shopbtn .btn-cta{font-style:normal;display:inline-flex;margin-top:6px}
.hs-shopgrp{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;justify-content:space-between;margin-top:14px;padding:18px 24px;
  border-radius:18px;background:var(--surface);border:1.5px solid var(--line2);text-decoration:none;color:var(--ink)}
.hs-shopgrp b{font-size:17px}
.hs-shopgrp span{font-size:14px;color:var(--muted)}
.hs-shopgrp:hover{border-color:var(--blue,#2B6CD4)}
@media(max-width:760px){
  .hs-shopban{aspect-ratio:auto;min-height:0;display:flex;flex-direction:column}
  .hs-shopban img{position:relative;inset:auto;height:auto;aspect-ratio:16/9}
  .hs-shopban::after{display:none}
  .hs-shoptx{position:relative;padding:20px 20px 22px;max-width:none;background:#1B2A4A;gap:8px}
  .hs-shoptx b{font-size:25px}
  .hs-shopp{font-size:15px}.hs-shopp strong{font-size:18px}
  .hs-shopgrp{padding:14px 16px}.hs-shopgrp b{font-size:15px}.hs-shopgrp span{font-size:13px}
}

/* ═══ kids661 갈래 책 — 전체 목록을 그 갈래 모양의 책 위에 책 표지로 (사장님 2026-09-30)
 *   공통: .bkl(책갈피 탭 .bkl-rib + 펼친 책 .bkl-book) · 카드(.wk-card)는 책 표지로
 *   갈래별: tale(그림책) · history(한지 선장본·훈민정음) · career(직업 수첩) · world(여행 엽서) · subject(공책)
 *           comic(만화 칸) · diary(그림일기) · free(잠자리 밤하늘) · works(책장)
 * ════════════════════════════════════════════════════════════════════ */
.bkl{--bk-pg:#FFFBF1;--bk-pg2:#F6EEDC;--bk-ln:#E2D4B5;--bk-ink:#3B2B12;--bk-ink2:#6B5638;--bk-edge:#D8CBB0;
  --bk-c0:#A8423A;--bk-c1:#2F6D93;--bk-c2:#357A6C;--bk-c3:#8F6424;--bk-c4:#5B4A9A;--bk-c5:#3E7B3A;--bkc:#8F6424}
/* 책갈피 탭 */
.bkl .bkl-rib{display:flex;gap:10px;align-items:flex-end;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
  padding:0 26px;margin:0 0 -12px;position:relative;z-index:2}
.bkl .bkl-rib::-webkit-scrollbar{display:none}
.bkl .bkl-rib button,.bkl .bkl-rib a{flex:none;min-width:104px;height:56px;padding:0 14px 20px;border:0;border-radius:0;display:flex;align-items:flex-end;
  justify-content:center;color:#fff;font-weight:700;font-size:15px;white-space:nowrap;background:var(--bk-c3);opacity:.8;cursor:pointer;
  font-family:inherit;clip-path:polygon(0 0,50% 14%,100% 0,100% 100%,0 100%);transition:height .18s,opacity .18s}
.bkl .bkl-rib button:hover,.bkl .bkl-rib a:hover{opacity:1;height:62px;color:#fff}
.bkl .bkl-rib button.on,.bkl .bkl-rib a.on{height:72px;opacity:1;background:var(--bk-c3);color:#fff;border:0}
.bkl .bkl-rib [data-i="0"]{background:var(--bk-c0)}.bkl .bkl-rib [data-i="1"]{background:var(--bk-c1)}
.bkl .bkl-rib [data-i="2"]{background:var(--bk-c2)}.bkl .bkl-rib [data-i="3"]{background:var(--bk-c3)}
.bkl .bkl-rib [data-i="4"]{background:var(--bk-c4)}.bkl .bkl-rib [data-i="5"]{background:var(--bk-c5)}
/* 펼친 책 */
.bkl .bkl-book{position:relative;padding:40px 34px 36px;border-radius:20px;border:1.5px solid var(--bk-ln);
  background:linear-gradient(90deg,var(--bk-pg) 0%,var(--bk-pg2) 48.6%,#E9DCC0 50%,var(--bk-pg2) 51.4%,var(--bk-pg) 100%);
  box-shadow:0 8px 0 -3px #EFE5D0,0 15px 0 -6px #E6DAC0,0 22px 30px rgba(90,70,40,.16)}
.bkl .bkl-n{position:absolute;right:26px;top:12px;font-size:13px;color:var(--bk-ink2)}
.bkl .bkl-n b{color:var(--bk-ink)}
.bkl .wk-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:30px 24px}
/* 책 표지 카드 */
.bkl .wk-card{background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}
.bkl .wk-card:hover{transform:none;box-shadow:none}
.bkl .wk-cover{aspect-ratio:3/4;display:block;overflow:hidden;background:var(--bkc);border-radius:3px 10px 10px 3px;border-bottom:10px solid var(--bkc);
  box-shadow:1px 0 0 #fff,3px 1px 0 #E9E2D4,4px 1px 0 #fff,6px 2px 0 #DDD4C2,7px 2px 0 #fff,9px 3px 0 #D2C7B2,12px 12px 20px rgba(60,40,20,.26);
  transition:transform .25s}
.bkl .wk-card:hover .wk-cover{transform:translateY(-4px) rotate(-1deg)}
.bkl .wk-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.bkl .wk-cover em{position:absolute;inset:0;display:grid;place-items:center}
.bkl .wk-cover::before{content:'';position:absolute;left:0;top:0;bottom:0;width:7px;background:var(--bkc);z-index:2}
.bkl .wk-cover::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,.16) 32%,rgba(0,0,0,0) 48%),
             linear-gradient(90deg,rgba(0,0,0,.28) 0,rgba(255,255,255,.26) 12px,rgba(0,0,0,.1) 15px,rgba(0,0,0,0) 26px)}
.wk-ttl{display:none}
.bkl .wk-ttl{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;position:absolute;left:20px;right:12px;top:16px;z-index:3;
  font-family:var(--font-title);font-weight:400;font-size:19px;line-height:1.3;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.45)}
.bkl .wk-badges{z-index:3;left:14px}
.bkl .wk-body{padding:14px 2px 0}
.bkl .wk-body b{color:var(--bk-ink);font-size:14.5px}
.bkl .wk-kid{color:var(--bk-c0)}
.bkl .wk-meta{color:var(--bk-ink2)}
.bkl .wk-grid>:nth-child(6n+1),.bkl .fb-grid>:nth-child(6n+1){--bkc:var(--bk-c0)}.bkl .wk-grid>:nth-child(6n+2),.bkl .fb-grid>:nth-child(6n+2){--bkc:var(--bk-c1)}
.bkl .wk-grid>:nth-child(6n+3),.bkl .fb-grid>:nth-child(6n+3){--bkc:var(--bk-c2)}.bkl .wk-grid>:nth-child(6n+4),.bkl .fb-grid>:nth-child(6n+4){--bkc:var(--bk-c3)}
.bkl .wk-grid>:nth-child(6n+5),.bkl .fb-grid>:nth-child(6n+5){--bkc:var(--bk-c4)}.bkl .wk-grid>:nth-child(6n+6),.bkl .fb-grid>:nth-child(6n+6){--bkc:var(--bk-c5)}
html[data-theme="dark"] .bkl{--bk-pg:#2A231B;--bk-pg2:#2F271E;--bk-ln:#5A4A33;--bk-ink:#F3E6CC;--bk-ink2:#D9C6A2}
html[data-theme="dark"] .bkl .bkl-book{background:var(--bk-pg);box-shadow:0 22px 30px rgba(0,0,0,.4)}

/* ── 역사 속으로 : 한지 선장본 · 훈민정음 판식 ── */
.bkl-history{--bk-pg:#F4EAD2;--bk-pg2:#EFE2C4;--bk-ln:#B79C6B;--bk-ink:#2A1C0C;--bk-ink2:#5E4724;
  --bk-c0:#1F3550;--bk-c1:#6B2A22;--bk-c2:#3B4A2E;--bk-c3:#5A3E1E;--bk-c4:#2C2C3A;--bk-c5:#7A5A1E}
.bkl-history .bkl-book{border-radius:4px;border:0;padding:52px 44px 44px;
  background:
    repeating-linear-gradient(90deg,transparent 0 calc(12.5% - 1px),rgba(140,40,30,.13) calc(12.5% - 1px) 12.5%),   /* 계선 */
    radial-gradient(ellipse at 20% 10%,rgba(160,120,60,.14),transparent 55%),
    radial-gradient(ellipse at 80% 90%,rgba(140,100,50,.16),transparent 50%),
    linear-gradient(180deg,#F6EDD7,#EFE1C1);
  box-shadow:inset 0 0 0 10px #F2E6CB,inset 0 0 0 12px #8B2A1E,inset 0 0 0 16px #F2E6CB,inset 0 0 0 17px #8B2A1E,   /* 사주쌍변 */
             0 18px 30px rgba(70,45,15,.22)}
.bkl-history .bkl-book::before{content:'訓民正音';position:absolute;right:30px;top:24px;writing-mode:vertical-rl;font-family:serif;
  font-size:13px;letter-spacing:.35em;color:rgba(139,42,30,.55)}
.bkl-history .bkl-n{right:auto;left:34px;top:22px;font-family:serif}
.bkl-history .bkl-rib button{clip-path:none;height:50px;min-width:84px;border-radius:3px 3px 0 0;padding:0 16px 14px;font-family:serif;
  background:#6B2A22;box-shadow:inset 0 -3px 0 rgba(0,0,0,.2)}
.bkl-history .bkl-rib button::after{content:'';position:absolute;left:50%;bottom:-16px;width:2px;height:18px;background:#C9A24A;transform:translateX(-50%)}
.bkl-history .bkl-rib button{position:relative;overflow:visible}
.bkl-history .bkl-rib button.on{height:60px}
.bkl-history .wk-cover{border-radius:2px;border-bottom:0;
  box-shadow:2px 0 0 #E8DCC0,4px 1px 0 #D6C7A5,6px 2px 0 #C7B690,10px 12px 18px rgba(50,30,10,.3)}
.bkl-history .wk-cover::before{width:18px;background:
    repeating-linear-gradient(180deg,transparent 0 16%,rgba(255,250,235,.9) 16% calc(16% + 2px),transparent calc(16% + 2px) 33.4%),
    linear-gradient(90deg,var(--bkc) 0 100%);opacity:1}   /* 오침 실매기 */
.bkl-history .wk-cover::after{background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,0) 40%),
    linear-gradient(90deg,rgba(0,0,0,.35) 0,rgba(0,0,0,0) 30px)}
.bkl-history .wk-ttl{-webkit-line-clamp:unset;display:block;writing-mode:vertical-rl;left:28px;right:auto;top:12px;max-height:74%;
  padding:12px 7px;background:#F5ECD6;color:#2A1C0C;text-shadow:none;border:1px solid #9C7E4E;font-family:serif;font-weight:700;
  font-size:15px;line-height:1.35;letter-spacing:.06em;box-shadow:2px 2px 0 rgba(0,0,0,.18)}   /* 제첨 */
.bkl-history .wk-body b{font-family:serif}
.bkl-history .wk-badges{left:auto;right:8px}

/* ── 미래의 나 : 직업 체험 수첩(스프링 · 모눈) ── */
.bkl-career{--bk-pg:#F4F8FF;--bk-pg2:#EEF4FF;--bk-ln:#BCD0F0;--bk-ink:#16305A;--bk-ink2:#4A6490;
  --bk-c0:#2B6CD4;--bk-c1:#E0663A;--bk-c2:#1F9E8C;--bk-c3:#7A57D1;--bk-c4:#D8A31A;--bk-c5:#D1467A}
.bkl-career .bkl-book{border-radius:16px;padding-left:64px;
  background:linear-gradient(rgba(43,108,212,.08) 1px,transparent 1px) 0 0/22px 22px,
             linear-gradient(90deg,rgba(43,108,212,.08) 1px,transparent 1px) 0 0/22px 22px,#F7FAFF}
.bkl-career .bkl-book::before{content:'';position:absolute;left:-12px;top:30px;bottom:30px;width:44px;
  background:radial-gradient(circle at 30px 17px,#fff 5px,#8FA6C8 6px 8px,transparent 9px) 0 0/44px 34px repeat-y,
             linear-gradient(90deg,transparent 0 10px,#8FA6C8 10px 13px,transparent 13px) 0 0/44px 34px repeat-y;opacity:.9}   /* 수첩 스프링 */
.bkl-career .bkl-rib{padding-left:70px}
.bkl-career .bkl-rib button{clip-path:none;border-radius:12px 12px 0 0;height:46px;padding:0 18px 12px}
.bkl-career .bkl-rib button.on{height:56px}
.bkl-career .wk-cover{border-radius:12px;border-bottom:0;box-shadow:0 10px 22px rgba(22,48,90,.22)}
.bkl-career .wk-cover::before{top:-2px;left:50%;width:44px;height:14px;bottom:auto;transform:translateX(-50%);border-radius:0 0 8px 8px;
  background:#E7ECF4;box-shadow:inset 0 -3px 0 #B6C2D6}   /* 사원증 고리 */
.bkl-career .wk-ttl{top:22px}

/* ── 세계여행 : 여행 엽서(항공 우편 띠 · 우표) ── */
.bkl-world{--bk-pg:#FDF9F0;--bk-pg2:#F8F1E0;--bk-ln:#D9C9A5;--bk-ink:#1D3348;--bk-ink2:#56708A;
  --bk-c0:#C7432F;--bk-c1:#1F5F99;--bk-c2:#2F8A6B;--bk-c3:#C98A1E;--bk-c4:#7B4FA8;--bk-c5:#1F8AA6}
.bkl-world .bkl-book{border-radius:16px;border:10px solid transparent;
  background:radial-gradient(circle,rgba(31,95,153,.16) 1.4px,transparent 1.8px) 0 0/18px 18px padding-box,
             linear-gradient(#FBF6EA,#FBF6EA) padding-box,
             repeating-linear-gradient(135deg,#C7432F 0 16px,#FBF6EA 16px 24px,#1F5F99 24px 40px,#FBF6EA 40px 48px) border-box;
  box-shadow:0 18px 30px rgba(29,51,72,.16)}   /* 항공 우편 띠 */
.bkl-world .bkl-book::before{content:'✈ AIR MAIL · 항공 우편';position:absolute;right:22px;top:12px;font-size:11px;font-weight:800;letter-spacing:.12em;color:#1F5F99;opacity:.7}
.bkl-world .bkl-n{right:auto;left:26px}
.bkl-world .wk-badges{display:none}
.bkl-world .bkl-rib button{clip-path:polygon(12px 0,100% 0,100% 100%,12px 100%,0 50%);border-radius:0 6px 6px 0;height:44px;padding:0 16px 0 22px;align-items:center}
.bkl-world .bkl-rib{align-items:center;margin-bottom:10px}
.bkl-world .bkl-rib button.on{height:44px;transform:translateY(-3px)}
.bkl-world .wk-cover{aspect-ratio:4/3.3;border-radius:4px;border:6px solid #fff;border-bottom:26px solid #fff;box-shadow:0 10px 20px rgba(29,51,72,.2);transform:rotate(-1deg)}
.bkl-world .wk-grid>:nth-child(even) .wk-cover{transform:rotate(1.2deg)}
.bkl-world .wk-cover::before{left:auto;right:8px;top:8px;bottom:auto;width:38px;height:46px;background:#fff;
  border:2px dashed var(--bkc);box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 20px var(--bkc)}   /* 우표 */
.bkl-world .wk-cover::after{background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,0) 45%)}
.bkl-world .wk-ttl{right:56px;left:12px;top:10px;font-size:17px}
.bkl-world .wk-badges{bottom:-20px;left:4px}

/* ── 교과 탐험 : 공책(줄 · 빨간 여백선) ── */
.bkl-subject{--bk-pg:#FFFFFF;--bk-ln:#CFE0C8;--bk-ink:#203A1E;--bk-ink2:#4F6B4A;
  --bk-c0:#3E7B3A;--bk-c1:#2B6CD4;--bk-c2:#E07A1F;--bk-c3:#9C3FB0;--bk-c4:#D23F3F;--bk-c5:#1F8A99}
.bkl-subject .bkl-book{border-radius:10px;padding-left:64px;
  background:linear-gradient(90deg,transparent 44px,rgba(220,60,60,.45) 44px 46px,transparent 46px),
             repeating-linear-gradient(180deg,#fff 0 31px,#D9E6F2 31px 32px);}
.bkl-subject .bkl-rib button{clip-path:none;border-radius:4px 4px 0 0;height:40px;padding:0 14px 10px;transform:rotate(-2deg);box-shadow:0 2px 0 rgba(0,0,0,.1)}
.bkl-subject .bkl-rib button:nth-child(even){transform:rotate(2deg)}
.bkl-subject .bkl-rib button.on{height:52px}
.bkl-subject .wk-cover{border-radius:4px 12px 12px 4px}
.bkl-subject .wk-cover::after{background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.5))}
.bkl-subject .wk-ttl{top:auto;bottom:12px;left:12px;right:12px;padding:6px 10px;background:#fff;color:#203A1E;text-shadow:none;border-radius:6px;
  font-size:15px;border-left:5px solid var(--bkc)}   /* 과목 이름표 */

/* ── AI 만화 : 만화 칸(굵은 선 · 망점) ── */
.bkl-comic{--bk-ink:#111;--bk-ink2:#444;--bk-c0:#E8352B;--bk-c1:#1E63D6;--bk-c2:#F2B90F;--bk-c3:#111;--bk-c4:#8C3FD1;--bk-c5:#12A36B}
.bkl-comic .bkl-book{border-radius:6px;border:4px solid #111;
  background:radial-gradient(rgba(0,0,0,.12) 1.2px,transparent 1.6px) 0 0/10px 10px,#FFFDF5;box-shadow:8px 8px 0 #111}
.bkl-comic .bkl-rib button{clip-path:none;border:3px solid #111;border-bottom:0;border-radius:10px 10px 0 0;height:42px;padding:0 14px 8px;color:#111;background:#fff!important}
.bkl-comic .bkl-rib button.on{background:#F2B90F!important;height:52px}
.bkl-comic .wk-cover{border-radius:4px;border:4px solid #111;box-shadow:6px 6px 0 #111}
.bkl-comic .wk-cover::before{display:none}
.bkl-comic .wk-cover::after{background:none}
.bkl-comic .wk-ttl{top:10px;left:10px;right:auto;max-width:82%;padding:8px 12px;background:#fff;color:#111;text-shadow:none;border:3px solid #111;border-radius:18px;font-size:15px}
.bkl-comic .wk-ttl::after{content:'';position:absolute;left:18px;bottom:-12px;border:6px solid transparent;border-top:8px solid #111}

/* ── 영상일기 : 그림일기(폴라로이드 · 마스킹테이프) ── */
.bkl-diary{--bk-pg:#FFF8EC;--bk-ink:#4A3522;--bk-ink2:#7A6048;--bk-c0:#F49AA8;--bk-c1:#8FC8E8;--bk-c2:#A8D89A;--bk-c3:#F4C86B;--bk-c4:#C7A8E8;--bk-c5:#F4A86B}
.bkl-diary .bkl-book{border-radius:10px;background:repeating-linear-gradient(180deg,#FFF8EC 0 35px,#F1DFC4 35px 36px);border-color:#E8D3B0}
.bkl-diary .bkl-rib button{clip-path:polygon(4% 0,100% 6%,96% 100%,0 94%);height:38px;padding:0 16px;align-items:center;color:#4A3522}
.bkl-diary .bkl-rib button.on{height:38px;transform:translateY(-4px) rotate(-2deg)}
.bkl-diary .wk-cover{aspect-ratio:1/1;border-radius:2px;border:10px solid #fff;border-bottom:34px solid #fff;box-shadow:0 8px 18px rgba(74,53,34,.2);transform:rotate(-1.5deg)}
.bkl-diary .wk-grid>:nth-child(even) .wk-cover{transform:rotate(1.5deg)}
.bkl-diary .wk-cover::before{left:50%;top:-16px;bottom:auto;width:70px;height:22px;transform:translateX(-50%) rotate(-3deg);background:var(--bkc);opacity:.75}
.bkl-diary .wk-cover{overflow:visible}
.bkl-diary .wk-cover img{border-radius:0}
.bkl-diary .wk-cover::after{display:none}
.bkl-diary .wk-ttl{top:auto;bottom:-30px;left:4px;right:4px;color:#4A3522;text-shadow:none;font-family:var(--font-hand,var(--font-title));font-size:15px;-webkit-line-clamp:1}
.bkl-diary .wk-badges{display:none}

/* ── 무료 이야기 : 잠자리 밤하늘 ── */
.bkl-free{--bk-ink:#F3EEDB;--bk-ink2:#C9C3E8;--bk-c0:#E7B94F;--bk-c1:#6E8CE8;--bk-c2:#E88FB0;--bk-c3:#5FC7B8;--bk-c4:#B28CE8;--bk-c5:#E8A15F}
.bkl-free .bkl-book{border:0;border-radius:24px;color:var(--bk-ink);
  background:radial-gradient(circle at calc(100% - 34px) 30px,#FFF6C9 0 14px,rgba(255,246,201,.22) 15px 26px,transparent 27px),
             radial-gradient(#fff 1px,transparent 1.5px) 0 0/46px 46px,radial-gradient(rgba(255,255,255,.6) 1px,transparent 1.5px) 23px 23px/46px 46px,
             linear-gradient(180deg,#141C44,#23306A 60%,#2E3B7A);box-shadow:0 22px 40px rgba(20,28,68,.35)}

/* ── 모바일 : 두 권씩 ── */
@media(max-width:900px){
  .bkl .bkl-book{padding:30px 14px 22px;background-size:auto}
  .bkl .bkl-rib{padding:0 10px;gap:6px;margin-bottom:-8px}
  .bkl .bkl-rib button{min-width:66px;height:46px;padding:0 10px 14px;font-size:13px}
  .bkl .bkl-rib button:hover{height:48px}.bkl .bkl-rib button.on{height:56px}
  .bkl-history .bkl-book{padding:40px 22px 26px}
  .bkl-career .bkl-book{padding-left:36px}
  .bkl-career .bkl-rib{padding-left:40px}
  .bkl-subject .bkl-book{padding-left:36px;background:linear-gradient(90deg,transparent 22px,rgba(220,60,60,.45) 22px 24px,transparent 24px),repeating-linear-gradient(180deg,#fff 0 31px,#D9E6F2 31px 32px)}
}
@media(max-width:640px){
  .bkl .wk-grid{grid-template-columns:1fr 1fr;gap:22px 14px}
  .bkl .wk-ttl{font-size:15px;left:14px;top:12px}
  .bkl-history .wk-ttl{font-size:13px;left:22px;padding:8px 5px}
  .bkl-history .wk-cover::before{width:13px}
  .bkl .wk-body b{font-size:13.5px}
}
/* kids661 — 첫 화면 ② 아래 후기 띠 (작게 · 옆으로 흐름) */
.hs-rv{padding:6px 0 30px}
.hs-rv-hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.hs-rv-hd b{font-family:var(--font-title);font-weight:400;font-size:20px}
.hs-rv-hd a{font-size:13.5px;color:var(--muted);white-space:nowrap}
.hs-rv-mask{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.hs-rv-in{display:flex;gap:14px;width:max-content;animation:hsRv 60s linear infinite;padding:4px 0 10px}
.hs-rv-mask:hover .hs-rv-in{animation-play-state:paused}
.hs-rv-mask.still{-webkit-mask-image:none;mask-image:none}
.hs-rv-mask.still .hs-rv-in{animation:none;width:auto;justify-content:center;flex-wrap:wrap;padding:4px 16px 10px}
@keyframes hsRv{to{transform:translateX(-50%)}}
.hs-rvc{flex:none;width:300px;display:flex;flex-direction:column;gap:6px;padding:16px 18px;border-radius:16px;background:var(--surface);
  border:1px solid var(--line2);box-shadow:0 6px 16px rgba(30,60,120,.08);color:var(--ink);text-decoration:none}
.hs-rvc:hover{border-color:var(--orange2,#F2A65A)}
.hs-rvc .rv-stars{font-size:13px;color:#F2B01E;letter-spacing:1px}
.hs-rvc b{font-size:14.5px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hs-rvc p{margin:0;font-size:13px;line-height:1.55;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hs-rva{margin-top:auto;font-size:12px;color:var(--muted2)}
@media(max-width:640px){ .hs-rvc{width:240px;padding:13px 14px} .hs-rv-hd b{font-size:17px} .hs-rv-in{animation-duration:45s} }
@media (prefers-reduced-motion:reduce){ .hs-rv-in{animation:none} .hs-rv-mask{overflow-x:auto} }
/* kids661 — ④ 동화 읽어주기 배너 (아래 실물 동화책 배너와 같은 폭) */
.hs-readban{display:grid;grid-template-columns:1.05fr 1fr;border-radius:24px;overflow:hidden;min-height:360px;text-align:left;
  background:linear-gradient(135deg,#17224A,#243A78);box-shadow:0 18px 40px rgba(30,60,120,.2);color:#fff}
.hs-rdimg{position:relative;display:block;min-height:260px}
.hs-rdimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%}
.hs-rdimg::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(23,34,74,0) 60%,rgba(23,34,74,.9))}
.hs-rdtx{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:34px 44px 34px 26px;
  background:radial-gradient(circle at 90% 12%,rgba(255,240,190,.9) 0 16px,rgba(255,240,190,.18) 17px 32px,transparent 33px),
             radial-gradient(rgba(255,255,255,.55) 1px,transparent 1.5px) 0 0/40px 40px}
.hs-rdk{font-style:normal;font-size:14px;font-weight:700;color:#FFD89A}
.hs-rdtx>b{font-family:var(--font-title);font-weight:400;font-size:32px;line-height:1.3}
.hs-rdplay{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.12);width:max-content;max-width:100%}
.hs-rdbtn{font-style:normal;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#FFB35C;color:#17224A;font-size:14px}
.hs-rdwave{display:flex;align-items:center;gap:3px;height:26px}
.hs-rdwave i{width:4px;border-radius:2px;background:#FFD89A;height:30%;animation:hsWave 1.1s ease-in-out infinite}
.hs-rdwave i:nth-child(3n){animation-delay:.2s}.hs-rdwave i:nth-child(3n+1){animation-delay:.45s}.hs-rdwave i:nth-child(4n){animation-delay:.7s}
@keyframes hsWave{0%,100%{height:25%}50%{height:100%}}
.hs-rdtime{font-size:13px;color:rgba(255,255,255,.85)}
.hs-rdsteps{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.hs-rdsteps li{display:flex;align-items:center;gap:8px;font-size:14.5px;color:rgba(255,255,255,.9)}
.hs-rdsteps li>span{width:24px;text-align:center}
.hs-rdsteps li b{margin-left:auto;font-size:13px;color:#9EE6A8}
.hs-rdsteps li:not(.ok) b{color:#FFD89A}
.hs-rdbar{flex:1;height:7px;border-radius:9px;background:rgba(255,255,255,.18);overflow:hidden;margin-left:6px}
.hs-rdbar i{display:block;height:100%;background:linear-gradient(90deg,#FFB35C,#FFD89A);border-radius:9px}
.hs-readban .btn-cta{align-self:flex-start;margin-top:4px}
@media(max-width:760px){
  .hs-readban{grid-template-columns:1fr;min-height:0}
  .hs-rdimg{aspect-ratio:16/10;min-height:0}
  .hs-rdimg::after{background:linear-gradient(180deg,rgba(23,34,74,0) 55%,rgba(23,34,74,.95))}
  .hs-rdtx{padding:18px 20px 24px;background:radial-gradient(rgba(255,255,255,.45) 1px,transparent 1.5px) 0 0/40px 40px}
  .hs-rdtx>b{font-size:23px}
}
@media (prefers-reduced-motion:reduce){ .hs-rdwave i{animation:none;height:60%} }
/* kids661 — 완성작 「갈래별 많이 본 작품」이 휴대폰에서 오른쪽으로 삐져나갔습니다(카드 436px / 화면 390px).
   한 줄로 자르는 제목(nowrap)의 길이가 칸 폭을 밀었습니다. 칸이 제목 길이에 안 밀리게 합니다. */
.tr-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.tr-card{min-width:0}
@media(max-width:1100px){ .tr-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:700px){ .tr-grid{grid-template-columns:minmax(0,1fr)} }
.bkl-subject .wk-badges{bottom:auto;top:8px;left:auto;right:8px}

/* ── 완성작 : 나무 책장 ── */
.bkl-works{margin-top:6px}
.bkl-works .bkl-book{border:0;border-radius:14px;padding:30px 28px 26px;
  background:linear-gradient(180deg,rgba(0,0,0,0) calc(100% - 16px),#8A5A2B calc(100% - 16px),#6E4520) ,
             linear-gradient(180deg,#F7EAD3,#EFDDBD);
  box-shadow:inset 0 0 0 8px #A9713C,inset 0 0 0 10px #6E4520,0 16px 28px rgba(80,50,20,.2)}
.bkl-works .wk-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
@media(max-width:640px){ .bkl-works .bkl-book{padding:22px 14px 22px} .bkl-works .wk-grid{grid-template-columns:1fr 1fr} }
/* ── 무료 이야기 : 책 표지 (밤하늘 책 위) ── */
.bkl-free .fb-kinds.bkl-rib{flex-wrap:nowrap;margin-bottom:-12px}
.bkl-free .fb-kind{border:0;border-radius:0;color:#fff}
.bkl-free .bkl-book{padding-top:38px}
.bkl-free .fb-playbar .mut{color:#D9D5F2}
.bkl-free .fb-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:30px 24px}
.bkl-free .fb-cell{--bkc:#E7B94F}
.bkl-free .fb-card{background:none;border:0;box-shadow:none;overflow:visible;border-radius:0}
.bkl-free .fb-cell.on .fb-card{box-shadow:none}
.bkl-free .fb-cell.on .fb-img{outline:3px solid #FFD89A;outline-offset:3px}
.bkl-free .fb-img{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--bkc);border-radius:3px 10px 10px 3px;border-bottom:10px solid var(--bkc);
  box-shadow:1px 0 0 #fff,3px 1px 0 #D9D4EE,4px 1px 0 #fff,6px 2px 0 #C9C2E4,8px 3px 0 #B8B0DA,12px 14px 22px rgba(0,0,0,.4);transition:transform .25s}
.bkl-free .fb-card:hover .fb-img{transform:translateY(-4px) rotate(-1deg)}
.bkl-free .fb-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bkl-free .fb-img::before{content:'';position:absolute;left:0;top:0;bottom:0;width:7px;background:var(--bkc);z-index:2}
.bkl-free .fb-img::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.62)),
  linear-gradient(90deg,rgba(0,0,0,.28) 0,rgba(255,255,255,.26) 12px,rgba(0,0,0,.1) 15px,rgba(0,0,0,0) 26px)}
.bkl-free .wk-ttl{top:auto;bottom:12px;left:18px}
.bkl-free .fb-card b{color:#F3EEDB;margin:12px 2px 3px}
.bkl-free .fb-card i{color:#C9C3E8;margin:0 2px}
.bkl-free .fb-tag{margin:8px 2px 0;background:rgba(255,255,255,.12);color:#FFE7B0}
.bkl-free .fb-tag.off{color:#C9C3E8}
.bkl-free .fb-acts{padding:8px 2px 0}
.bkl-free .fb-acts .btn-ghost{background:rgba(255,255,255,.1);color:#F3EEDB;border-color:rgba(255,255,255,.25)}
.bkl-free .fb-parts,.bkl-free .fb-parts a{color:#C9C3E8}
.bkl-free .fb-chk{z-index:4}
@media(max-width:640px){ .bkl-free .fb-grid{grid-template-columns:1fr 1fr;gap:22px 14px} }
/* kids661 — 잠자기 모드 (까만 화면 + 아주 어두운 달 · 소리는 그대로) */
.kslp-btn{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px) + var(--fbselh,0px));z-index:900;display:none;align-items:center;gap:6px;
  padding:11px 16px;border-radius:999px;border:0;background:#1B2450;color:#FFE7B0;font:700 14px/1 inherit;font-family:inherit;cursor:pointer;
  box-shadow:0 8px 22px rgba(20,28,68,.35)}
.kslp-btn.show{display:inline-flex}
.kslp-btn:hover{background:#26336B}
.kslp{position:fixed;inset:0;z-index:2147483000;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.kslp[hidden]{display:none}
.kslp-moon{width:64px;height:64px;border-radius:50%;box-shadow:inset -16px -6px 0 0 #6B5E3A;opacity:.55;transition:opacity 1.5s}
.kslp-tx{margin:0;text-align:center;color:#8C8468;font-size:14px;line-height:1.8;transition:opacity 1.5s;padding:0 24px}
.kslp-h{display:block;font-size:17px;font-weight:700;color:#A89C74;margin-bottom:4px}
.kslp-tx span:not(.kslp-h){font-size:12.5px;color:#6E6752}
.kslp.dim .kslp-tx{opacity:0}
.kslp.dim .kslp-moon{opacity:.16}
html.kslp-on,html.kslp-on body{overflow:hidden}
@media(max-width:640px){ .kslp-btn span{display:none} .kslp-btn{padding:12px 14px;font-size:17px} }
/* kids661 — 캐릭터 화면의 6초 인사 영상 칸 */
.kd-greet{display:flex;align-items:center;gap:14px;margin-top:12px;padding:14px 16px;border-radius:16px;background:var(--soft);border:1.5px dashed var(--line2)}
.kd-greet video{width:120px;aspect-ratio:9/16;max-height:170px;object-fit:cover;border-radius:12px;background:#000;flex:none}
.kd-greet-ic{font-size:30px;flex:none}
.kd-greet>div{display:flex;flex-direction:column;gap:4px;min-width:0}
.kd-greet b{font-size:15px}
.kd-greet span{font-size:13px;color:var(--muted)}
.kd-greet a{font-size:13.5px;font-weight:700;align-self:flex-start}
/* kids661 — 처음 안내: 무료 딱지 · 가입하면 무료로 */
.tu-free{font-style:normal;display:inline-block;margin-left:4px;padding:2px 8px;border-radius:999px;background:#E3F5DD;color:#2F7A22;font-size:11.5px;font-weight:800;vertical-align:2px}
.tu-freebox{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:4px 0 12px;padding:10px 12px;border-radius:12px;background:#FFF4E0;border:1px solid #F5DDA8}
.tu-freebox b{font-size:13px;color:#A15C0B;margin-right:2px}
.tu-freebox span{font-size:12.5px;padding:3px 9px;border-radius:999px;background:#fff;border:1px solid #F0D69C;color:#6B4A12}

/* ★ kids661 — 휴대폰에서 한 줄에 사진 한 장씩 내려가던 화면을 두 장씩 (사장님 「한 줄에 하나의 사진만 뜨는 화면이 있으면 2개씩 ·
 *   3개여서 2줄이 된다면 3개가 한 줄로 · 이런 화면이 너무 많아서 말도 못 하겠다」).
 *   390px 화면을 다 돌려 찾은 곳: 화풍 고르기 · 내 작품 · 이어 만들기 · 완성작 · 갈래 화면(주제·영상·활동) · 만드는 방법 ·
 *   부 미리보기 장면 · 스토리 등장인물 · 실물책 고르기 · 이야기 고르기 셋.
 *   사진이 작아지는 곳은 누르면 크게 봅니다(아래 kzoom). */
@media(max-width:640px){
  .mk-styles,.mb-grid,.wk-grid,.el-grid,.el-vids,.el-acts,.sv-chars,.my-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
  /* 딱 셋이면 한 줄에 셋 */
  .mk-styles:has(> :nth-child(3):last-child),.el-vids:has(> :nth-child(3):last-child),.el-acts:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
  .pv-list{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  /* 좁아진 카드 안 글자 */
  .mk-styles b,.mb-grid b,.el-grid b,.el-acts b,.sv-chars b{font-size:13.5px}
  .el-hero__in:not(:has(.el-cta)){padding-bottom:18px}   /* kids663 — 단추를 뺀 갈래 히어로 아래가 비어 보였음 */
  .mk-styles p,.mk-styles span,.mb-grid p,.el-grid p,.el-acts p{font-size:12px;line-height:1.45}
}
/* 누르면 크게 보기 (kzoom) — 작아진 사진 · 캐릭터 · 화풍 견본 */
.kzoom-btn{position:absolute;right:6px;bottom:6px;z-index:5;width:30px;height:30px;border-radius:50%;border:0;display:grid;place-items:center;
  background:rgba(0,0,0,.55);color:#fff;font-size:14px;cursor:zoom-in;padding:0;line-height:1}
.kzoom{position:fixed;inset:0;z-index:2147482000;background:rgba(8,12,24,.92);display:flex;align-items:center;justify-content:center;padding:18px;cursor:zoom-out}
.kzoom[hidden]{display:none}
.kzoom img,.kzoom video{max-width:100%;max-height:calc(100vh - 90px);border-radius:12px;box-shadow:0 20px 50px rgba(0,0,0,.5);object-fit:contain;background:#000}
.kzoom-x{position:absolute;top:14px;right:14px;min-width:44px;height:44px;padding:0 16px;border-radius:999px;border:0;background:#fff;color:#111;font:700 15px/1 inherit;font-family:inherit;cursor:pointer}
/* kids661 — 내 캐릭터: 고른 하위 메뉴 칸만 · 마이페이지 메뉴 칸 없음 */
.kd-secs.go-photo .kd-sec:not([data-sec="photo"]),
.kd-secs.go-char  .kd-sec:not([data-sec="char"]),
.kd-secs.go-greet .kd-sec:not([data-sec="greet"]){display:none}
.kd-greetbox .kd-greet{margin-top:4px;border-style:solid}
.myp-noside .myp-in{grid-template-columns:1fr}
/* ── kids661 원작·갈래 고르기 책장(ogb)도 갈래 모양 ── */
.ogt-history{--bk-desk:#EDE3CC}
.ogt-history .ogb-book{border-radius:4px;border:0;padding:52px 44px 44px;
  background:repeating-linear-gradient(90deg,transparent 0 calc(12.5% - 1px),rgba(140,40,30,.12) calc(12.5% - 1px) 12.5%),
             radial-gradient(ellipse at 20% 10%,rgba(160,120,60,.14),transparent 55%),linear-gradient(180deg,#F6EDD7,#EFE1C1);
  box-shadow:inset 0 0 0 10px #F2E6CB,inset 0 0 0 12px #8B2A1E,inset 0 0 0 16px #F2E6CB,inset 0 0 0 17px #8B2A1E,0 18px 30px rgba(70,45,15,.22)}
.ogt-history .ogb-book::before{content:'訓民正音';position:absolute;right:30px;top:24px;writing-mode:vertical-rl;font-family:serif;font-size:13px;letter-spacing:.35em;color:rgba(139,42,30,.55)}
.ogt-history .og-book{--bkc:#1F3550}
.ogt-history .og-grid>:nth-child(4n+2) .og-book,.ogt-history .og-grid>.og-book:nth-child(4n+2){--bkc:#6B2A22}
.ogt-history .og-grid>.og-book:nth-child(4n+3){--bkc:#3B4A2E}
.ogt-history .og-grid>.og-book:nth-child(4n+4){--bkc:#5A3E1E}
.ogt-history .og-cover{border-radius:2px!important;border-bottom:0!important;box-shadow:2px 0 0 #E8DCC0,4px 1px 0 #D6C7A5,6px 2px 0 #C7B690,10px 12px 18px rgba(50,30,10,.3)!important}
.ogt-history .og-cover::before{width:18px!important;opacity:1!important;background:
  repeating-linear-gradient(180deg,transparent 0 16%,rgba(255,250,235,.9) 16% calc(16% + 2px),transparent calc(16% + 2px) 33.4%),var(--bkc)!important}
.ogt-history .og-cover::after{background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,0) 40%),linear-gradient(90deg,rgba(0,0,0,.35) 0,rgba(0,0,0,0) 30px)!important}
.ogt-history .ogb-ttl{-webkit-line-clamp:unset!important;display:block!important;writing-mode:vertical-rl;left:28px!important;right:auto!important;top:12px!important;max-height:74%;
  padding:12px 7px;background:#F5ECD6;color:#2A1C0C!important;text-shadow:none!important;border:1px solid #9C7E4E;font-family:serif!important;font-weight:700!important;
  font-size:15px!important;line-height:1.35!important;letter-spacing:.06em;box-shadow:2px 2px 0 rgba(0,0,0,.18)}
.ogt-history .og-cover .og-cat{display:none}
.ogt-history .og-body b{font-family:serif}
.ogt-career .ogb-book{background:linear-gradient(rgba(43,108,212,.08) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(90deg,rgba(43,108,212,.08) 1px,transparent 1px) 0 0/22px 22px,#F7FAFF;border-color:#BCD0F0}
.ogt-career .og-cover{border-radius:12px!important;border-bottom:0!important;box-shadow:0 10px 22px rgba(22,48,90,.22)!important}
.ogt-subject .ogb-book{background:linear-gradient(90deg,transparent 44px,rgba(220,60,60,.45) 44px 46px,transparent 46px),repeating-linear-gradient(180deg,#fff 0 31px,#D9E6F2 31px 32px);padding-left:64px;border-color:#CFE0C8}
.ogt-world .ogb-book{border:10px solid transparent;border-radius:16px;
  background:radial-gradient(circle,rgba(31,95,153,.16) 1.4px,transparent 1.8px) 0 0/18px 18px padding-box,linear-gradient(#FBF6EA,#FBF6EA) padding-box,
             repeating-linear-gradient(135deg,#C7432F 0 16px,#FBF6EA 16px 24px,#1F5F99 24px 40px,#FBF6EA 40px 48px) border-box}
@media(max-width:900px){ .ogt-history .ogb-book{padding:40px 20px 26px} .ogt-subject .ogb-book{padding-left:30px;background:linear-gradient(90deg,transparent 18px,rgba(220,60,60,.45) 18px 20px,transparent 20px),repeating-linear-gradient(180deg,#fff 0 31px,#D9E6F2 31px 32px)} }
@media(max-width:640px){ .ogt-history .ogb-ttl{font-size:13px!important;left:22px!important;padding:8px 5px} .ogt-history .og-cover::before{width:13px!important} }
.ogt-history .ogb-book::before{top:auto;bottom:22px}
@media(max-width:640px){ .ogt-history .ogb-book::before{display:none} }
/* kids661 — 인사 영상 칸: 세 걸음 · 바로 만들기 */
.kd-gsteps{list-style:none;margin:6px 0 10px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.kd-gsteps li{padding:9px 10px;border-radius:12px;background:var(--surface);border:1.5px solid var(--line2);display:flex;flex-direction:column;gap:2px}
.kd-gsteps b{font-size:13px}.kd-gsteps span{font-size:11.5px;color:var(--muted)}
.kd-gsteps li.ok{background:#EAF7E6;border-color:#B9E0AE}.kd-gsteps li.ok b::after{content:' ✓';color:#2F7A22}
.kd-gsteps li.now{border-color:var(--orange,#F07A2A);box-shadow:0 0 0 2px rgba(240,122,42,.18)}
.kd-free{display:inline-block;padding:1px 8px;border-radius:999px;background:#E3F5DD;color:#2F7A22;font-size:12px}
.kd-gform{margin-top:6px}
/* kids661 — 인사 영상 칸: 세 걸음 · 바로 만들기 */
.kd-gsteps{list-style:none;margin:6px 0 10px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.kd-gsteps li{padding:9px 10px;border-radius:12px;background:var(--surface);border:1.5px solid var(--line2);display:flex;flex-direction:column;gap:2px}
.kd-gsteps b{font-size:13px}.kd-gsteps span{font-size:11.5px;color:var(--muted)}
.kd-gsteps li.ok{background:#EAF7E6;border-color:#B9E0AE}.kd-gsteps li.ok b::after{content:' ✓';color:#2F7A22}
.kd-gsteps li.now{border-color:var(--orange,#F07A2A);box-shadow:0 0 0 2px rgba(240,122,42,.18)}
.kd-free{display:inline-block;padding:1px 8px;border-radius:999px;background:#E3F5DD;color:#2F7A22;font-size:12px}
.kd-gform{margin-top:6px}
.how-wkhd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.how-wkhd a{font-weight:700;font-size:14px;white-space:nowrap}
/* kids663 — 무료 이야기 휴대폰: 오른쪽 책이 화면 밖으로 잘렸습니다(단추·딱지 글자가 칸 폭을 밀었음). 칸이 글자에 안 밀리게 */
@media(max-width:640px){
  .bkl-free .fb-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .bkl-free .fb-cell,.bkl-free .fb-card{min-width:0}
  .bkl-free .fb-card b{font-size:15px;overflow-wrap:anywhere}
  .bkl-free .fb-card i{font-size:12px}
  .bkl-free .fb-tag{display:block;white-space:normal;font-size:11.5px;line-height:1.4;padding:4px 8px}
  .bkl-free .fb-acts .btn-ghost{display:block;width:100%;white-space:normal;text-align:center;padding:9px 6px;font-size:12.5px}
  .bkl-free .fb-parts{display:block;font-size:12px;overflow-wrap:anywhere}
  .bkl-free .fb-playbar .btn-cta{width:100%}
  .bkl-free .fb-playbar .mut{font-size:12px}
}
@media(max-width:640px){
  .bkl-free .bkl-book{background:radial-gradient(#fff 1px,transparent 1.5px) 0 0/46px 46px,radial-gradient(rgba(255,255,255,.6) 1px,transparent 1.5px) 23px 23px/46px 46px,linear-gradient(180deg,#141C44,#23306A 60%,#2E3B7A)}  /* 달이 단추를 가려서 휴대폰에서는 뺌 */
  .bkl-free .fb-parts a{margin-left:6px}
}

/* kids663 — 갈래 히어로: 단추를 뺀 자리만큼 아래를 줄임 (PC) */
.el-hero__in:not(:has(.el-cta)){padding-bottom:34px}
/* kids663 — 휴대폰: 후기 사진 셋이 한 장씩 세로로 쌓였습니다 → 한 줄에 셋(둘이면 둘) */
@media(max-width:560px){ .rv-photos.n2{grid-template-columns:repeat(2,minmax(0,1fr))} .rv-photos.n3{grid-template-columns:repeat(3,minmax(0,1fr))} }
/* kids663 — 휴대폰: 이야기 고르기 세 칸(원작 · 뜬다가 만들어 줘요 · 직접 쓰기)을 한 줄에 셋. 글은 그림 아래로 짧게 */
@media(max-width:640px){
  .st-three{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
  .st-three .st-big{display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:var(--surface);border:1px solid var(--line2)}
  .st-three .st-big img,.st-three .st-big-bg{aspect-ratio:1/1;width:100%;height:auto;object-fit:cover;font-size:34px}
  .st-three .st-big-tx{position:static;padding:8px 8px 10px;background:none!important;color:var(--ink)!important}
  .st-three .st-big-tx b{font-size:12.5px;line-height:1.35;color:var(--ink)!important;display:block}
  .st-three .st-big-tx em{display:none}
  .st-three .st-big-tx i{font-size:11px;line-height:1.35;color:var(--blue,#2B6CD4)!important;display:block;margin-top:4px}
}
/* kids663 — 휴대폰 만드는 방법: 단계 그림이 화면 가득 한 장씩 → 그림은 왼쪽 작게, 글은 오른쪽 */
@media(max-width:640px){
  .hw-row,.hw-row:nth-child(even){grid-template-columns:110px minmax(0,1fr)!important;gap:14px!important;align-items:start}
  .hw-row:nth-child(even) .hw-img{order:0}
  .hw-img img{aspect-ratio:1/1;object-fit:cover}
  .hw-txt>b{font-size:17px;margin:2px 0 6px}
  .hw-txt p{font-size:13.5px;line-height:1.7}
}
/* kids664 — 스크롤해도 머리글은 늘 두 줄 (사장님 「2줄이 맞지 않을까」).
   하위 메뉴(3단)가 붙박인 화면은 [큰 메뉴 + 하위 메뉴], 하위 메뉴가 없는 화면(첫 화면 · 무료 이야기 등)은 [로고 줄 + 큰 메뉴]가 남습니다. */
.hd.hd3:not(.r3-fix){top:0}
/* ★ kids664 — 머리글이 스크롤하면 통째로 사라지던 화면이 있었습니다(첫 화면 · 무료 이야기 · 완성작 등).
 *   몸통(body)에 overflow-x:hidden 이 걸려 있으면 몸통이 「스크롤 상자」가 되어 붙박이(sticky)가 몸통 기준으로 잡힙니다 —
 *   몸통은 스크롤되지 않으니 머리글도 안 붙습니다. 옆으로 넘치는 것만 자르는 clip 으로 바꿉니다(모르는 옛 브라우저는 hidden 그대로).
 *   (예전 규칙 body.b-kids 는 실제 이름 b-kid 와 달라 안 먹고 있었습니다) */
@supports (overflow-x:clip){ html,body{overflow-x:clip} }
/* kids664 — 하위 메뉴가 없는 화면은 [로고 줄 + 큰 메뉴] 두 줄이 붙으므로, 그 아래 붙는 칸(--hd-h)도 두 줄 높이로 */
:root:not(:has(.hd.hd3.r3-fix)){--hd-h:113px}
@media(max-width:980px){ :root:not(:has(.hd.hd3.r3-fix)){--hd-h:103px} }
/* ★ kids665 — 세계여행: 우표 자리에 국기 · 표지 글은 장소만 (나라는 국기로) */
.wk-flag{display:none}
.bkl-world .wk-flag{display:block;position:absolute;right:8px;top:8px;z-index:3;width:46px;padding:4px;background:#fff;
  border:2px dashed #C9B48A;box-shadow:0 2px 4px rgba(0,0,0,.25);transform:rotate(3deg)}
.bkl-world .wk-flag img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.bkl-world .wk-cover:has(.wk-flag)::before{display:none}
.bkl-world .wk-cover:has(.wk-flag) .wk-cty{display:none}
.bkl-world .wk-ttl{right:64px;-webkit-line-clamp:2}
/* ★ kids665 — 교과 탐험: 휴대폰에서 이름표가 위·아래 둘 다 잡혀 표지 전체를 흰 칸으로 덮고, 책 딱지(📖)가 글자를 가렸습니다 */
.bkl-subject .wk-ttl{top:auto!important;bottom:10px!important;-webkit-line-clamp:2;max-height:3.1em}
.bkl-subject .wk-badges{top:8px!important;bottom:auto!important;left:auto!important;right:8px!important}
@media(max-width:640px){
  .bkl-subject .wk-ttl{left:10px!important;right:10px!important;font-size:13.5px;padding:5px 8px}
  .bkl-world .wk-flag{width:38px;right:6px;top:6px}
  .bkl-world .wk-ttl{right:50px;left:10px;top:8px;font-size:14px}
}
/* ★ kids667 — 국기가 찌그러졌습니다: 표지 그림 규칙(.bkl .wk-cover img — 표지 전체를 덮는 절대 위치)이 국기 그림에도 걸려 높이가 0이 됐음 */
.bkl .wk-cover .wk-flag img{position:static!important;inset:auto!important;width:100%!important;height:auto!important;aspect-ratio:4/3;object-fit:cover}
/* ★ kids668 — 초등 갈래 화면(역사 속으로 · 미래의 나 · 교과 탐험 · 세계여행 · AI 만화 · 영상일기)만 바탕이 흰색이라
 *   다른 화면(연한 하늘색)과 따로 놀았습니다 (사장님 「백그라운드 배경색이 없어진 곳이 많네」). 한 사이트로 합쳤으니 같은 바탕으로. 카드는 흰색 그대로. */
html:not([data-dark]) body.b-elem{--bg:#DDEDFB;--band:#EAF3FC;background:#DDEDFB}
@media(max-width:760px){
  html:not([data-dark]) body.b-elem .el-hero__im::after{background:linear-gradient(180deg,rgba(221,237,251,.5) 0%,rgba(221,237,251,.93) 46%,#DDEDFB 100%)}
}
html:not([data-dark]) body.b-elem .el-hero__im::after{background:linear-gradient(90deg,rgba(221,237,251,.95) 0%,rgba(221,237,251,.78) 64%,rgba(221,237,251,0) 100%)}
@media(max-width:760px){
  html:not([data-dark]) body.b-elem .el-hero__im::after{background:linear-gradient(180deg,rgba(221,237,251,.5) 0%,rgba(221,237,251,.93) 46%,#DDEDFB 100%)}
}
/* ★ kids669 — 갈래 화면 「이렇게 만들어요」 네 걸음 (partials/_howto.php) · 모양 공통 · 바탕만 갈래별 */
.hwt{padding:34px 16px 30px}
.hwt-in{max-width:1180px;margin:0 auto;border-radius:24px;padding:26px 26px 28px;position:relative;
  background:#FBF4E4;border:1px solid #E9D9B8;box-shadow:0 10px 26px rgba(80,60,30,.10)}
.hwt-h{margin:0;text-align:center;font-family:var(--font-title);font-weight:400;font-size:28px;color:#3B2B12}
.hwt-h::before,.hwt-h::after{content:'✦';display:inline-block;margin:0 12px;font-size:14px;color:#C9A45A;vertical-align:4px}
.hwt-sub{margin:4px 0 18px;text-align:center;font-size:14px;color:#6B5638}
.hwt-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.hwt-st{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 12px 16px;border-radius:18px;background:rgba(255,255,255,.88);
  border:1px solid rgba(160,130,80,.22);box-shadow:0 4px 12px rgba(80,60,30,.08);text-align:center}
.hwt-t{display:flex;align-items:center;gap:8px;font-size:16.5px;color:#3B2B12}
.hwt-t i{font-style:normal;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;color:#fff;font-size:15px;background:#C0392B}
.hwt-st:nth-child(2) .hwt-t i{background:#2E6DB4}.hwt-st:nth-child(3) .hwt-t i{background:#D9981A}.hwt-st:nth-child(4) .hwt-t i{background:#3A8A55}
.hwt-img{display:block;width:100%;aspect-ratio:2/1;border-radius:12px;overflow:hidden}
.hwt-img img{width:100%;height:100%;object-fit:cover;display:block}
.hwt-d{font-size:13.5px;line-height:1.55;color:#5B4A30;word-break:keep-all}
/* 원작 동화 — 동화책 양피지 */
.hwt-tale .hwt-in{background:radial-gradient(ellipse at 15% 0%,rgba(255,220,230,.5),transparent 45%),radial-gradient(ellipse at 90% 100%,rgba(210,230,255,.5),transparent 45%),#FBF4E4}
/* 역사 속으로 — 한지 + 단청 띠 */
.hwt-history .hwt-in{background:linear-gradient(180deg,#F6EDD7,#EFE1C1);border:0;padding-bottom:36px;
  box-shadow:inset 0 -8px 0 0 transparent,0 10px 26px rgba(70,45,15,.14)}
.hwt-history .hwt-in::after{content:'';position:absolute;left:0;right:0;bottom:0;height:8px;border-radius:0 0 24px 24px;
  background:repeating-linear-gradient(90deg,#C0392B 0 22px,#2E6DB4 22px 44px,#D9981A 44px 66px,#3A8A55 66px 88px)}
.hwt-history .hwt-h{font-family:serif;font-weight:700}
/* 미래의 나 — 밤하늘 · 미래 도시 */
.hwt-career .hwt-in{background:radial-gradient(#fff 1px,transparent 1.5px) 0 0/44px 44px,linear-gradient(180deg,#14205A,#1E3A8A 60%,#2A4DA8);border-color:#5E8BFF;
  box-shadow:0 0 0 2px rgba(120,170,255,.35),0 12px 30px rgba(20,40,120,.3)}
.hwt-career .hwt-h{color:#fff}.hwt-career .hwt-sub{color:#C9D8FF}.hwt-career .hwt-h::before,.hwt-career .hwt-h::after{color:#8FB4FF}
.hwt-career .hwt-st{background:rgba(240,246,255,.94);border-color:rgba(140,180,255,.6)}
.hwt-career .hwt-t{color:#14205A}.hwt-career .hwt-d{color:#3A4A78}
/* 교과 탐험 — 모눈 공책 */
.hwt-subject .hwt-in{background:linear-gradient(rgba(60,120,200,.09) 1px,transparent 1px) 0 0/20px 20px,linear-gradient(90deg,rgba(60,120,200,.09) 1px,transparent 1px) 0 0/20px 20px,#FDFBF3;border-color:#D8E2EC}
.hwt-subject .hwt-st{background:#fff}
/* 세계여행 — 항공 우편 */
.hwt-world .hwt-in{border:8px solid transparent;
  background:linear-gradient(#FBF6EA,#FBF6EA) padding-box,repeating-linear-gradient(135deg,#C7432F 0 16px,#FBF6EA 16px 24px,#1F5F99 24px 40px,#FBF6EA 40px 48px) border-box}
html[data-theme="dark"] .hwt-in{filter:brightness(.92)}
@media(max-width:900px){ .hwt-steps{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:640px){
  .hwt{padding:22px 12px 18px}
  .hwt-in{padding:18px 12px 20px;border-radius:18px}
  .hwt-h{font-size:22px}.hwt-sub{font-size:13px;margin-bottom:12px}
  .hwt-steps{gap:10px}
  .hwt-st{padding:10px 8px 12px;gap:6px}
  .hwt-t{font-size:14px;gap:6px}.hwt-t i{width:22px;height:22px;font-size:12.5px}
  .hwt-d{font-size:12px}
}
/* ★ kids670 — 캐릭터 · 화풍 한 줄 (my/_charrow.php) */
.crow-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.crow-hd b{font-size:17px}
.crow-hd .btn-cta{padding:11px 18px;font-size:14px}
.crow-note{margin:6px 0 14px;font-size:13px;color:var(--muted)}
.crow-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.crow-c{display:flex;flex-direction:column;border:1.5px solid var(--line2);border-radius:16px;overflow:hidden;background:var(--soft)}
.crow-c.on{border:3px solid #2F6BF0;box-shadow:0 0 0 3px rgba(47,107,240,.15)}
.crow-im{position:relative;display:block;aspect-ratio:1/1;background:#EAF1FB}
.crow-im img{width:100%;height:100%;object-fit:cover;display:block}
.crow-c.none .crow-im img{opacity:.55;filter:grayscale(.3)}
.crow-tag{position:absolute;left:8px;top:8px;font-style:normal;background:#2F6BF0;color:#fff;font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px}
.crow-tag.s{background:rgba(0,0,0,.55)}
.crow-nm{text-align:center;font-size:14.5px;padding:9px 6px 6px}
.crow-bt{display:flex;flex-direction:column;gap:6px;padding:0 10px 12px}
.crow-bt form{margin:0}
.crow-b1,.crow-b2{display:block;width:100%;border-radius:999px;font:700 13px/1.2 inherit;font-family:inherit;padding:8px 6px;cursor:pointer;text-align:center;white-space:nowrap;text-decoration:none}
.crow-b1{border:0;background:#2F6BF0;color:#fff}
.crow-b1[disabled]{opacity:.55;cursor:default}
.crow-b1.g{background:#fff;color:#2F6BF0;border:1.5px solid #2F6BF0}
.crow-b1.mk{background:#FF8A34}
.crow-b2{border:1px solid var(--line2);background:#fff;color:#3B4A63;font-size:12px;font-weight:600}
.crow-b2[disabled]{opacity:.6}
.crow-fn{margin:14px 0 0;font-size:12.5px;color:var(--muted)}
@media(max-width:640px){
  .crow-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .crow-hd .btn-cta,.crow-all{width:100%}
  .crow-all .btn-cta{width:100%}
}
.crow-allbar{margin-top:14px;display:flex;justify-content:center}
.crow-allbar .btn-cta,.crow-allbar form{width:100%;max-width:520px}
.crow-allbar .btn-cta{padding:13px 18px;font-size:15px}
/* kids671 — 내 캐릭터 한 화면: 칸 사이 간격 · 머리글 아래로 멈추게 */
#kdPhoto,#kdChar,#kdGreet{scroll-margin-top:calc(var(--hd-h,100px) + 12px)}
.kd-secs.go-all .kd-sec + .kd-sec{margin-top:4px}
/* ★ kids672 — 내 캐릭터 한 화면 줄이기 (사장님 시안): 왼쪽 확정 캐릭터 · 오른쪽 화풍 줄 · 인사 영상은 사진 칸 아래 */
.crow-wrap{display:grid;grid-template-columns:220px minmax(0,1fr);gap:18px;align-items:start}
.crow-wrap.nomain{grid-template-columns:minmax(0,1fr)}
.crow-main{margin:0;text-align:center}
.crow-main img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:16px;border:3px solid #2F6BF0;display:block}
.crow-main figcaption{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.4}
.crow-main figcaption b{display:block;font-size:14px;color:var(--ink)}
.crow-wrap .crow-row{grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px}
.crow-wrap .crow-nm{font-size:13.5px;padding:7px 4px 5px}
.crow-wrap .crow-bt{padding:0 8px 10px;gap:5px}
.crow-wrap .crow-b1,.crow-wrap .crow-b2{padding:6px 4px;font-size:12px}
.crow-wrap .crow-allbar{margin-top:10px}
.crow-wrap .crow-allbar .btn-cta{padding:10px 16px;font-size:14px}
.crow .crow-note{margin:4px 0 10px}
/* 인사 영상 — 사진 칸 안 작은 칸 */
.kd-gmini{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line2)}
.kd-gmini .my-box-hd{margin-bottom:6px}
.kd-gmini .kd-gsteps{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:4px 0 8px}
.kd-gmini .kd-gsteps li{padding:6px 7px}
.kd-gmini .kd-gsteps b{font-size:11.5px}.kd-gmini .kd-gsteps span{font-size:10.5px}
.kd-gmini .kd-greet{margin-top:0;padding:10px 12px;gap:10px}
.kd-gmini .kd-greet video{width:84px;max-height:130px}
.kd-gmini .kd-greet b{font-size:13.5px}.kd-gmini .kd-greet span{font-size:12px}
.kd-gmini .kd-gform .btn-cta{padding:8px 14px;font-size:13px}
@media(max-width:760px){
  .crow-wrap{grid-template-columns:minmax(0,1fr)}
  .crow-main{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center;text-align:left}
  .crow-main figcaption{margin-top:0}
  .crow-wrap .crow-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .crow-wrap .crow-im{aspect-ratio:4/3}
  .crow-wrap .crow-im img{object-position:center 25%}
  .kd-gmini .kd-gsteps span{display:none}
  .kd-gmini .kd-greet>div>b{font-size:13px}
}
.kd-gmini .kd-greet-ic{display:none}
/* ★ kids673 — 인사 영상을 캐릭터 칸 오른쪽 빈자리로 · 칸 사이 간격 하나로 맞춤 */
.crow-wrap.hasg{grid-template-columns:200px minmax(0,1fr) 300px}
.crow-wrap.hasg.nomain{grid-template-columns:minmax(0,1fr) 300px}
.crow-greet{border-left:1px dashed var(--line2);padding-left:16px;align-self:stretch}
.crow-greet .kd-gmini{margin-top:0;padding-top:0;border-top:0}
.crow-greet .kd-gsteps{grid-template-columns:minmax(0,1fr);gap:4px}
.crow-greet .kd-gsteps li{flex-direction:row;align-items:center;gap:6px;padding:5px 8px}
.crow-greet .kd-gsteps span{font-size:10.5px}
.crow-greet .kd-greet{flex-direction:column;align-items:stretch;text-align:left}
.crow-greet .kd-greet video{width:100%;max-height:220px;aspect-ratio:9/16;object-fit:contain}
.crow-greet .kd-gform .btn-cta{width:100%}
.kd-secs .kd-two{gap:16px;margin-bottom:16px}
.kd-secs .kd-one{margin-bottom:16px}
.kd-secs .kd-two>.my-box{height:auto;align-self:stretch}
@media(max-width:1100px){
  .crow-wrap.hasg{grid-template-columns:200px minmax(0,1fr)}
  .crow-greet{grid-column:1/-1;border-left:0;padding-left:0;border-top:1px dashed var(--line2);padding-top:12px}
  .crow-greet .kd-gsteps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .crow-greet .kd-greet{flex-direction:row;align-items:center}
  .crow-greet .kd-greet video{width:90px}
  .crow-greet .kd-gform .btn-cta{width:auto}
}
@media(max-width:760px){ .crow-wrap.hasg,.crow-wrap.hasg.nomain{grid-template-columns:minmax(0,1fr)} }
.og-hero-lead{margin:8px 0 0;font-size:15px;line-height:1.7;color:var(--ink2);max-width:560px}
/* ★ kids674 — 머리글 좌우가 너무 벌어졌습니다(사장님 「메뉴가 이렇게 멀리 떨어질 필요 있나 · 좌우 간격」).
   머리글 폭을 본문 폭(1240)에 맞춰 로고·메뉴·오른쪽 단추가 본문 양끝에 맞게 놓입니다. */
.hd .shell{max-width:var(--shell,1240px)}
/* ★ kids675 — 사장님: 「한꺼번에」는 화풍 줄 바로 아래 왼쪽으로 · 오른쪽 6초 인사는 남는 자리를 다 쓰게 크게 */
@media(min-width:1280px){   /* kids678 — 1101~1279 폭에서 넘쳤음(교차검수) → 1280 이상에서만 한 줄 */
  .crow-wrap.hasg{grid-template-columns:200px max-content minmax(340px,1fr)}
  .crow-wrap.hasg .crow-row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:136px}
  .crow-wrap.hasg .crow-allbar{justify-content:flex-start}
  .crow-wrap.hasg .crow-allbar .btn-cta,.crow-wrap.hasg .crow-allbar form{width:100%;max-width:none}
  .crow-greet{padding-left:22px}
  .crow-greet .my-box-hd b{font-size:17px}
  .crow-greet .kd-gsteps{gap:6px;margin:6px 0 12px}
  .crow-greet .kd-gsteps li{padding:9px 12px}
  .crow-greet .kd-gsteps b{font-size:14px}
  .crow-greet .kd-gsteps span{font-size:12.5px}
  .crow-greet .kd-greet{padding:16px 18px;gap:10px}
  .crow-greet .kd-greet b{font-size:16px}
  .crow-greet .kd-greet span{font-size:13.5px}
  .crow-greet .kd-greet video{max-height:300px}
  .crow-greet .kd-gform .btn-cta{padding:13px 16px;font-size:15px}
}
/* ★ kids675 — 기록 · 출연한 동화 한 칸 */
.kd-stats.kd-stats-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}
.kd-works.kd-works-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
@media(max-width:900px){ .kd-works.kd-works-row{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media(max-width:640px){
  .kd-stats.kd-stats-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .kd-stats.kd-stats-row>div{padding:8px 4px}
  .kd-stats.kd-stats-row span{font-size:11px}.kd-stats.kd-stats-row b{font-size:15px}
  .kd-works.kd-works-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
}
/* kids675 — 시안: 기록 네 칸 → 「출연한 동화 · 전체 보기」 → 네 편 크게 */
.kd-rec .kd-stats.kd-stats-row{margin-bottom:4px}
.kd-rec-note{margin:0 16px 10px;text-align:right}
.kd-rec-hd{display:flex;align-items:baseline;justify-content:space-between;padding:4px 16px 0}
.kd-rec-hd b{font-size:16px}.kd-rec-hd a{font-size:13.5px}
.kd-works.kd-works-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.kd-works.kd-works-row span{aspect-ratio:4/3}
.kd-works.kd-works-row span img{width:100%;height:100%;object-fit:cover}
@media(max-width:900px){ .kd-works.kd-works-row{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:640px){ .kd-works.kd-works-row{grid-template-columns:repeat(2,minmax(0,1fr))} .kd-rec-note{text-align:left} }
/* ★ kids676 — 사장님 시안: 「이 아이 지우기」는 사진 아래 왼쪽 · 「이 아이로 동화 만들기」는 칸 맨 아래 · 사진 칸 안내 글도 맨 아래 (두 칸 바닥선 맞춤) */
.kd-secs .kd-two>.my-box{display:flex;flex-direction:column}
.kd-secs .kd-two>.my-box .kd-prof{order:1}
.kd-secs .kd-two>.my-box .kd-del{order:2;margin:-8px 0 0 16px;width:132px;text-align:center}
.kd-secs .kd-two>.my-box .kd-make{order:3;margin:auto 16px 16px;padding-top:14px}
.kd-secs .kd-two>.my-box .kd-make .btn-cta{display:block;width:100%;text-align:center}
.kd-secs .kd-two>.my-box .kd-photos{order:1}
.kd-secs .kd-two>.my-box > .kd-note{order:2;margin-top:auto;padding-bottom:16px}
@media(max-width:1100px){ .kd-secs .kd-two>.my-box .kd-del{width:110px} }
@media(max-width:640px){ .kd-secs .kd-two>.my-box .kd-del{width:104px;margin-left:13px} }
/* ★ kids675 — 무료 이야기 히어로 세 가지 안내 */
.fb-h2k{font-size:.55em;font-weight:700;opacity:.75}
.fb-feat{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.fb-feat li{display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.88);box-shadow:0 4px 12px rgba(20,40,80,.12);min-width:180px}
.fb-feat b{font-size:15px;color:var(--ink)}
.fb-feat span{font-size:12.5px;color:var(--muted)}
@media(max-width:640px){ .fb-feat{gap:6px} .fb-feat li{min-width:0;flex:1 1 100%;padding:8px 12px} .fb-feat b{font-size:14px} }
@media(max-width:640px){ .fb-feat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px} .fb-feat li{flex:none;padding:8px 8px;text-align:center} .fb-feat b{font-size:12.5px} .fb-feat span{font-size:11px;line-height:1.35} }
/* ★ kids676 — 갈래 화면 구분 탭은 「전체」+넷 · 휴대폰에서 옆으로 안 밀고 한 줄에 다 보이게 */
@media(max-width:640px){
  .bkl .bkl-rib{overflow:visible;gap:4px;padding:0 6px}
  .bkl .bkl-rib button,.bkl .bkl-rib a{flex:1 1 0;min-width:0;padding:0 4px 14px;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
/* ★ kids678 교차검수 — 무료 이야기 탭(여섯 칸)은 휴대폰에서 줄여 넣지 않고 예전처럼 옆으로 밀어 봅니다(글자 잘림 방지) */
@media(max-width:640px){
  .bkl-free .bkl-rib{overflow-x:auto;padding:0 10px;gap:6px}
  .bkl-free .bkl-rib a{flex:none;min-width:72px;padding:0 10px 14px;overflow:visible;text-overflow:clip}
}

/* ★★ kids679 — 자막 간단히 · 목소리 한 곳에서 (사장님 결정 2026-10-02) */
.cv-simple{margin-top:12px}
.cv-onoff{display:inline-flex;border:1.5px solid var(--line2);border-radius:999px;padding:3px;background:var(--paper);gap:2px}
.cv-oo{position:relative;cursor:pointer}
.cv-oo input{position:absolute;opacity:0;pointer-events:none}
.cv-oo span{display:block;padding:9px 18px;border-radius:999px;font-weight:800;font-size:14px;color:var(--muted)}
.cv-oo input:checked+span{background:var(--orange);color:#fff}
.cv-oo input:focus-visible+span{outline:2px solid var(--orange2);outline-offset:2px}
.cv-more{margin-top:10px}
.cv-more[hidden]{display:none}
.cv-more-b{border:1px solid var(--line2);background:var(--surface);border-radius:999px;padding:7px 14px;
  font:inherit;font-size:13px;font-weight:700;color:var(--ink2);cursor:pointer}
.cv-more-b i{font-style:normal;display:inline-block;transition:transform .15s}
.cv-more-b.on i{transform:rotate(180deg)}
.cv-detail{margin-top:4px;padding:2px 0 0}
.cv-detail[hidden]{display:none}
.cv-sels.cv-sels3{margin-top:10px}
.cv-reset{margin-top:10px;border:0;background:none;padding:4px 0;font:inherit;font-size:13px;font-weight:700;
  color:var(--orange-d);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cv-fn{margin:6px 0 0;font-size:12.5px;line-height:1.6;color:var(--muted)}
.vd-hero{border:1px solid var(--line2);border-radius:12px;padding:11px 13px;background:var(--surface)}
.vd-hero-hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.vd-hero-hd>b{font-size:13.5px;color:var(--ink)}
.vd-hero-hd .vd-dflt{margin-left:0}
.vd-dflt.ed{color:var(--orange-d);font-weight:700}
.vd-hero-chg{margin-left:auto;flex:none;border:1px solid var(--line2);background:var(--paper);border-radius:999px;
  padding:6px 13px;font:inherit;font-size:12.5px;font-weight:700;color:var(--ink2);cursor:pointer}
.vd-hero-chg:hover{border-color:var(--orange2);color:var(--orange)}
.vd-hero-pick{margin-top:10px}
.vd-hero-pick[hidden]{display:none}
.vd-hero-note{flex-basis:100%;font-size:12px;color:var(--muted)}
.vd-story-note{margin:2px 0 0;font-size:12.5px;line-height:1.6;color:var(--muted)}
.ac-voice{display:flex;gap:8px;align-items:center}
.ac-voice select{flex:1;min-width:0}
.ac-voice .pv-play{flex:none;border:1px solid var(--line2);background:var(--surface);border-radius:999px;
  padding:8px 12px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap}
@media(max-width:480px){
  .cv-oo span{padding:8px 15px;font-size:13.5px}
  .vd-hero-pick b{display:none}
}
/* kids679 — 정해진 이야기: 장면 목록 대신 한 줄 */
.cut-fixednote{margin:12px 0 4px;padding:11px 14px;border:1px solid var(--line2);border-radius:12px;
  background:var(--surface);font-size:13.5px;line-height:1.6;color:var(--ink2)}
/* kids681 — 정해진 이야기 목소리(보기만) */
.vd-ro{padding:9px 12px;border:1px solid var(--line2);border-radius:12px;background:var(--surface)}
.vd-ro-v{flex:1;min-width:0;font-weight:700;font-size:14px;color:var(--ink)}
/* kids683 — 정해진 이야기에서 감춘 칸은 확실히 감춥니다(제 display 가 hidden 을 이기지 않게) */
.cut-bulk[hidden],form.try1[hidden],details.vd-more[hidden],.cut-fixednote[hidden]{display:none!important}
/* kids684 — 자막 넣기·빼기와 상세 설정 한 줄 */
.cv-ooline{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cv-ooline .cv-more-b[hidden]{display:none}
.cv-more{margin-top:0}
.cv-detail{margin-top:10px}
@media(max-width:480px){
  .cv-ooline{flex-wrap:nowrap;gap:6px}
  .cv-ooline .cv-oo span{padding:7px 11px;font-size:13px;white-space:nowrap}
  .cv-ooline .cv-more-b{padding:6px 10px;font-size:12.5px;white-space:nowrap;flex:none}
}
/* kids684 — 아이가 있으면 「새 아이 등록」 칸 감춤 */
.mk-kid[hidden],details.ch-new[hidden]{display:none!important}
.mk-pick form:has(> .mk-kid.new[hidden]){display:none}
/* kids684 — 대본 화면 안 「만들기」 칸 */
.mk-ord{margin-top:18px;padding-top:16px;border-top:1px dashed var(--line2);display:grid;gap:12px;scroll-margin-top:var(--stick,90px)}
.mk-ord .rv-issues{margin:0}
.mk-ord .ord-sum,.mk-ord .rv-bal,.mk-ord .rv-agree{margin:0}
/* kids687 — 장면 미리보기 (PC 한 줄 6칸 · 휴대폰 3칸) + 크게 보기 */
.sp-card .st-step em.sp-n{font-style:normal;font-weight:600;font-size:12.5px;color:var(--muted);margin-left:6px}
.sp-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-top:10px}
.sp-it{position:relative;display:block;padding:0;border:1px solid var(--line2);border-radius:10px;overflow:hidden;background:var(--soft);aspect-ratio:1/1;cursor:zoom-in}
.sp-it img{width:100%;height:100%;object-fit:cover;display:block}
.sp-it em{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;font-style:normal;font-size:11px;color:var(--muted)}
.sp-no{position:absolute;left:5px;top:5px;z-index:1;min-width:20px;height:20px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 5px}
.sp-tag{position:absolute;right:5px;top:5px;z-index:1;font-style:normal;font-size:10.5px;font-weight:800;color:#fff;background:#E1552D;border-radius:6px;padding:1px 6px}
.sp-note{margin:8px 0 0;font-size:12.5px;line-height:1.6;color:var(--muted)}
.sp-zoom{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;padding:16px}
.sp-zoom[hidden]{display:none}
.sp-zoom-in{position:relative;max-width:min(720px,100%);width:100%;background:var(--surface);border-radius:14px;padding:12px;max-height:92vh;overflow:auto}
.sp-zoom-img{position:relative}
.sp-zoom-img img{width:100%;height:auto;border-radius:10px;display:block}
.sp-zoom-img .sp-tag{font-size:13px;padding:3px 9px;right:10px;top:10px}
.sp-zoom-tx{margin:10px 2px 2px;font-size:14px;line-height:1.7;color:var(--ink)}
.sp-x{position:absolute;right:8px;top:8px;z-index:2;width:34px;height:34px;border-radius:999px;border:0;background:rgba(0,0,0,.6);color:#fff;font-size:16px;cursor:pointer}
html.sp-open{overflow:hidden}
@media(max-width:640px){ .sp-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px} }
/* kids733 — 첫 칸 겉표지: 6장면 이야기는 PC 한 줄 7칸(표지 + 6), 휴대폰은 그대로 3칸(표지 · 1 · 2 / 3 · 4 · 5 / 6) */
.sp-grid.has-cover{grid-template-columns:repeat(7,minmax(0,1fr))}
.sp-it.sp-cover{border-color:var(--orange);box-shadow:0 0 0 2px var(--orange) inset}
.sp-it.sp-cover .sp-no{background:var(--orange)}
.sp-ctitle{position:absolute;left:4px;right:4px;top:28%;z-index:1;text-align:center;font-size:12px;line-height:1.25;font-weight:900;color:#E86C22;
  text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 2px #fff;word-break:keep-all;overflow-wrap:anywhere}
@media(max-width:640px){ .sp-grid.has-cover{grid-template-columns:repeat(3,minmax(0,1fr))} .sp-ctitle{font-size:11px} }
/* ★ kids688 — 이야기 화면 「그림 화풍 고르기」: 화풍 셋을 **한 줄에 가로로** (폰에서도 한 번에 · 사장님 2026-10-02) */
.sb-grid:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:720px){
  .sb-grid:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .sb-grid:has(> :nth-child(3):last-child) .sb-i{padding:4px}
  .sb-grid:has(> :nth-child(3):last-child) .sb-img{aspect-ratio:1/1;border-radius:8px}
  .sb-grid:has(> :nth-child(3):last-child) .sb-n{font-size:12.5px;margin:6px 0 2px;line-height:1.3}
  .sb-grid:has(> :nth-child(3):last-child) .sb-d{display:none}
  .sb-grid:has(> :nth-child(3):last-child) .sb-f{font-size:10px;padding:2px 5px;margin-top:3px;line-height:1.3}
  .sb-grid:has(> :nth-child(3):last-child) .sb-on{font-size:10px;padding:2px 5px;left:4px;bottom:4px}
}
/* kids690 — 옛 초안(여러 인물) 안내 */
.mk-oldcast{margin:0 0 12px;padding:10px 13px;border:1px solid #F6D9B8;border-radius:10px;background:#FFF8EE;color:var(--ink2)}

/* ★ kids698 — 마이페이지 묶음 안 탭 (PC 가로 · 휴대폰은 옆으로 밀어 보기) */
.myp-tabs{display:flex;gap:6px;background:var(--surface);border:1px solid var(--line2);
  border-radius:14px;padding:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.myp-tabs::-webkit-scrollbar{display:none}
.myp-tabs a{flex:0 0 auto;text-align:center;padding:10px 16px;border-radius:10px;font-weight:700;
  font-size:14px;color:var(--muted2);text-decoration:none;white-space:nowrap}
.myp-tabs a:hover{background:var(--soft);color:var(--orange)}
.myp-tabs a.on{background:var(--orange);color:var(--on-orange,#fff)}
.myp-tabs a.out{margin-left:auto;font-weight:500}
@media (max-width:640px){ .myp-tabs a{font-size:13px;padding:9px 12px} }
/* 휴대폰·태블릿 — 큰 메뉴 다섯 칸을 한 줄로 */
@media (max-width:1000px){
  .myp-side nav.myp-g{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
  .myp-side nav.myp-g a{justify-content:center;flex-direction:column;gap:3px;text-align:center;padding:9px 2px}
  .myp-side nav.myp-g a span{white-space:normal;font-size:12px;line-height:1.25}
}

/* ★ kids699 — 마이페이지 왼쪽 큰 메뉴: 배너처럼 크게 (아이콘 동그라미 · 굵은 이름 · 든 것 한 줄) */
.myp-side nav.myp-g{gap:8px}
.myp-side nav.myp-g a.myp-gi{padding:14px 14px;gap:12px;border-radius:16px;border:1px solid var(--line2);
  background:var(--surface);align-items:center}
.myp-side nav.myp-g a.myp-gi i{width:40px;height:40px;border-radius:12px;background:var(--soft);
  display:flex;align-items:center;justify-content:center;font-size:20px;flex:none}
.myp-side nav.myp-g a.myp-gi span{display:flex;flex-direction:column;gap:2px;min-width:0;white-space:normal}
.myp-side nav.myp-g a.myp-gi b{font-size:17px;font-weight:800;line-height:1.25;color:var(--ink,inherit)}
.myp-side nav.myp-g a.myp-gi em{font-style:normal;font-size:12px;font-weight:500;color:var(--muted2);line-height:1.35}
.myp-side nav.myp-g a.myp-gi:hover{border-color:var(--orange);background:var(--soft)}
.myp-side nav.myp-g a.myp-gi.on{background:var(--orange);border-color:var(--orange)}
.myp-side nav.myp-g a.myp-gi.on i{background:rgba(255,255,255,.22)}
.myp-side nav.myp-g a.myp-gi.on b,.myp-side nav.myp-g a.myp-gi.on em{color:var(--on-orange,#fff)}
@media (max-width:1000px){
  .myp-side nav.myp-g a.myp-gi{flex-direction:column;padding:10px 2px;gap:5px;border-radius:14px}
  .myp-side nav.myp-g a.myp-gi i{width:36px;height:36px;font-size:18px}
  .myp-side nav.myp-g a.myp-gi b{font-size:13.5px;text-align:center}
  .myp-side nav.myp-g a.myp-gi em{display:none}
}

/* ★ kids700 — 캐릭터 다듬기 칸 바로 가기(#face 등) */
.st-anchor{scroll-margin-top:calc(var(--hd-h, 120px) + 20px)}
.st-hit{outline:3px solid var(--orange);outline-offset:4px;border-radius:12px;transition:outline-color .4s}

/* ★ kids700 — 실물책 주문서 돌아가기 */
.pr-back{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:14px;font-size:14px;font-weight:700}
.pr-back a{color:var(--ink2);text-decoration:none}
.pr-back a:hover{color:var(--orange)}
.pr-back .pr-cancel{font-weight:500;color:var(--muted2)}

/* ★ kids700 — 초안 정리 · 휴지통 */
.dr-full{background:var(--surface);border:2px solid var(--orange);border-radius:16px;padding:16px 18px;margin-bottom:14px}
.dr-full b{font-size:17px}
.dr-full p{margin:6px 0 12px;color:var(--muted)}
.dr-count{font-size:14px;margin:6px 0 10px}
.dr-count b{font-size:18px;color:var(--orange)}
.dr-count span{color:var(--muted2)}
.dr-list{display:flex;flex-direction:column;gap:8px}
.dr-row{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line2);border-radius:14px;padding:12px 14px;cursor:pointer}
.dr-row input[type=checkbox]{width:20px;height:20px;flex:none;accent-color:var(--orange)}
.dr-row.is-trash{cursor:default;opacity:.92}
.dr-in{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.dr-in b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dr-in em{font-style:normal;font-size:12.5px;color:var(--muted2)}
.dr-row .btn-ghost.sm{flex:none;white-space:nowrap}
.dr-h{font-size:18px;margin:26px 0 10px}
.dr-h span{font-size:13px;font-weight:500;color:var(--muted2)}
@media (max-width:640px){ .dr-row{flex-wrap:wrap} .dr-row .btn-ghost.sm{margin-left:32px} }

/* ★ kids700 — 가장 좁은 폰(320~400px)에서 로그인하면 머리글 오른쪽(주간·야간 단추)이 화면 밖으로 밀려 났습니다(전수 검수: 316~376px).
     ① 주간·야간은 지금 켜진 것 하나만 동그라미로(눌러서 바꾸기는 그대로) ② 로그인했으면 고객센터 아이콘은 계정 메뉴에 있으니 감춤 ③ 간격 좁힘 */
@media (max-width:400px){
  .hd3 .hd-act{gap:5px}
  .hd3 .hd-dn{padding:2px}
  .hd3 .hd-dn i{padding:4px 6px}
  .hd3 .hd-dn .dn-n{display:none}
  .hd3 .hd-dn.night .dn-d{display:none}
  .hd3 .hd-dn.night .dn-n{display:inline}
  .hd3 .hd-act:has(.hd-mewrap) .hd-ic-help{display:none}
  .hd-tk{padding:5px 7px}
}

/* ★ kids700 — 8~12세 갈래 책갈피 탭: 좁은 폰(320px)에서 「크리에이터」 글자가 단추 밖으로 7px 잘렸습니다(전수 검수).
     탭은 옆으로 밀리는 줄이라 줄일 필요가 없습니다 — 글자 길이만큼은 늘 차지하게 합니다. */
.bkl .bkl-rib button,.bkl .bkl-rib a{flex-shrink:0;white-space:nowrap}
@media (max-width:640px){ .bkl .bkl-rib button,.bkl .bkl-rib a{min-width:max-content;padding-left:12px;padding-right:12px} }

/* ★ kids700 — 내 작품 카드: 없는 것은 눌리지 않는 글자, 영상 없음은 작품 화면으로 가는 점선 단추 */
.mb-acts span.off{border:1.5px dashed var(--line2);border-radius:var(--r-pill);padding:5px 11px;font-size:12.5px;opacity:.4;white-space:nowrap}
.mb-acts a.nov{border-style:dashed;opacity:.8}

/* ★ kids706 — 가족에게 보내기 칸 · 작품 카드 공유하기 */
.sf{margin:18px 0 6px;background:var(--surface);border:2px solid var(--orange);border-radius:18px;padding:16px 18px;scroll-margin-top:calc(var(--hd-h,120px) + 16px)}
.sf-h{display:block;font-size:17px;margin-bottom:12px}
.sf-pre{display:flex;gap:12px;align-items:center;background:var(--soft);border-radius:14px;padding:10px;margin-bottom:12px}
.sf-cov{width:64px;height:64px;border-radius:10px;overflow:hidden;flex:none;display:flex;align-items:center;justify-content:center;background:var(--surface);font-size:28px}
.sf-cov img{width:100%;height:100%;object-fit:cover}
.sf-what{display:flex;flex-direction:column;gap:3px;min-width:0}
.sf-what b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sf-what em{font-style:normal;font-size:12.5px;color:var(--muted2)}
.sf-kind{display:flex;gap:6px;margin-top:4px}
.sf-kind button{border:1.5px solid var(--line2);background:var(--surface);border-radius:999px;padding:4px 11px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit;color:var(--ink2)}
.sf-kind button.on{background:var(--orange);border-color:var(--orange);color:var(--on-orange,#fff)}
.sf-btns{display:flex;flex-wrap:wrap;gap:8px}
.sf-btns>*{flex:1 1 140px;justify-content:center;text-align:center}
.sf-url{width:100%;margin-top:10px;font-size:12px;padding:8px 10px;border:1px solid var(--line2);border-radius:10px;background:var(--soft);color:var(--ink2)}
.sf-note{font-size:12.5px;color:var(--muted);margin:10px 0 0;line-height:1.55}
.sf-stop{margin-top:6px}
.sf-stop-b{border:0;background:none;color:var(--muted2);text-decoration:underline;font-size:12.5px;cursor:pointer;padding:0;font-family:inherit}
.mb-acts a.send{border-color:var(--orange2);color:var(--orange-d,var(--orange));font-weight:700}

/* ★★ kids707 — 내 캐릭터 「새 캐릭터 만들기」 큰 카드 (테스터 시안) · 예전 크기는 설정 kd_char_big=0 */
.crow-wrap.big .crow-row{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.crow-wrap.big .crow-nm{font-size:15.5px;padding:10px 6px 6px}
.crow-wrap.big .crow-bt{padding:0 12px 14px;gap:7px}
.crow-wrap.big .crow-b1,.crow-wrap.big .crow-b2{padding:10px 6px;font-size:13.5px}
.crow-wrap.big .crow-im{aspect-ratio:1/1}
@media (max-width:640px){
  .crow-wrap.big .crow-row{grid-template-columns:minmax(0,1fr);gap:10px}
  .crow-wrap.big .crow-c{display:grid;grid-template-columns:112px minmax(0,1fr);grid-template-rows:auto 1fr;align-items:center}
  .crow-wrap.big .crow-c .crow-im{grid-column:1;grid-row:1/3;width:112px;aspect-ratio:1/1;height:auto;align-self:stretch}
  .crow-wrap.big .crow-c .crow-im img{object-position:center 25%}
  .crow-wrap.big .crow-c .crow-nm{grid-column:2;text-align:left;padding:10px 12px 4px}
  .crow-wrap.big .crow-c .crow-bt{grid-column:2;padding:0 12px 10px}
}
/* 프로필 바로 고치기 칸 (kids707) */
.kd-qk .ch-quick{margin:0;padding:12px;order:0;flex:none}
.kd-qk .kd-prof{grid-template-columns:120px minmax(0,1fr);align-items:start}
.kd-qk .kd-prof-mini{margin-top:8px}
.kd-qk .kd-prof-mini div{padding:5px 0;font-size:13px}
.kd-qk .nc-f{min-width:0}
.kd-qk .nc-voice{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.kd-qk .nc-voice .nc-f{flex:1 1 220px}
@media (max-width:640px){.kd-qk .kd-prof{grid-template-columns:minmax(0,1fr)}.kd-qk .kd-prof-img{max-width:120px;margin:0 auto}}
.kd-qk .nc-row{gap:10px}
.kd-qk .ch-quick-go{flex-wrap:wrap;gap:8px}
.kd-qk .ch-quick-go .btn-cta{min-width:140px}
.my-box-hd .kd-del{margin:0}
.my-box-hd .kd-del .ch-del{padding:5px 12px;font-size:12.5px}
.kd-narr .my-box-hd{margin-top:0!important}
.kd-narr .ac-form{max-width:640px}
.kd-qk .nc-f>span{white-space:normal;word-break:keep-all;overflow-wrap:anywhere}
.kd-qk .nc-voice .wz-input{max-width:100%;min-width:0}
@media (max-width:640px){.kd-qk .kd-prof-img{max-width:96px}.kd-qk .ch-quick-go .btn-cta{width:100%}}
/* ★★ kids707 — 이야기 화면 주인공 고르기 */
.sr-hero{margin:18px 0 6px;padding:14px 16px;border:1px solid var(--line2);border-radius:16px;background:var(--surface)}
.sr-hero-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-bottom:10px}
.sr-hero-top b{font-size:15.5px}
.sr-hero-top span{font-size:12.5px;color:var(--muted)}
.sr-heros{display:flex;flex-wrap:wrap;gap:10px}
.sr-h{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;width:84px;padding:8px 4px 8px;border:1.5px solid var(--line2);border-radius:14px;background:#fff;cursor:pointer;text-decoration:none;color:inherit}
.sr-h input{position:absolute;opacity:0;pointer-events:none}
.sr-h-av{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;overflow:hidden;background:var(--soft);font-size:22px}
.sr-h-av img{width:100%;height:100%;object-fit:cover}
.sr-h b{font-size:13px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-h em{font-style:normal;font-size:11.5px;color:var(--muted2);min-height:14px}
.sr-h.on{border:2.5px solid #2F6BF0;box-shadow:0 0 0 3px rgba(47,107,240,.15)}
.sr-h.on::after{content:'✓';position:absolute;right:6px;top:4px;font-size:12px;font-weight:800;color:#2F6BF0}
.sr-h:focus-within{outline:2px solid #2F6BF0;outline-offset:2px}
.sr-h.add{border-style:dashed;color:var(--muted)}
.sr-h.add .sr-h-av{background:transparent;border:1.5px dashed var(--line2);color:#2F6BF0}
@media (max-width:420px){.sr-heros{gap:8px}.sr-h{width:calc((100% - 24px)/4);min-width:68px}.sr-h-av{width:44px;height:44px}}
.sc-top[hidden]{display:none}
/* ★ kids707 — 첫 장면 무료 · 자동 그리는 중 덮개 */
.cv-auto{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:14px;text-align:center;background:rgba(15,30,60,.62);color:#fff;border-radius:inherit}
.cv-auto b{font-size:15px}
.cv-auto em{font-style:normal;font-size:12.5px;opacity:.9;max-width:300px;line-height:1.45}
.cv-auto.bad{background:rgba(60,30,15,.62)}
.cv-spin{width:28px;height:28px;border-radius:50%;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;animation:cvspin 1s linear infinite}
@keyframes cvspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.cv-spin{animation:none}}
.wt-back{display:inline-block;margin-bottom:8px;font-size:13px;font-weight:600;color:var(--muted);text-decoration:none}
.wt-back:hover{color:var(--ink)}
.wt .sf{margin:14px 0 18px}
@media (max-width:360px){.crow-wrap.big .crow-c{grid-template-columns:92px minmax(0,1fr)}.crow-wrap.big .crow-c .crow-im{width:92px}.crow-wrap.big .crow-b1,.crow-wrap.big .crow-b2{font-size:12.5px;padding:9px 4px}}
/* ★★ kids708 — 만들 것 세 칸 (ebook / +나레이션 / +영상제작) */
.ord-tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:10px 0 12px}
.ord-t{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;aspect-ratio:1/1;min-height:150px;padding:28px 8px 10px;border:1.5px solid var(--line2);border-radius:16px;background:#fff;cursor:pointer;text-align:center}
.ord-t input{position:absolute;opacity:0;pointer-events:none}
.ord-t-dot{position:absolute;left:10px;top:10px;width:18px;height:18px;border-radius:50%;border:2px solid var(--line2);background:#fff}
.ord-t.on{border:2.5px solid #2F6BF0;box-shadow:0 0 0 3px rgba(47,107,240,.14);background:#F5F9FF}
.ord-t.on .ord-t-dot{border-color:#2F6BF0;background:radial-gradient(circle,#2F6BF0 0 45%,#fff 50%)}
.ord-t:focus-within{outline:2px solid #2F6BF0;outline-offset:2px}
.ord-t-ic{font-size:22px;line-height:1}
.ord-t-h{font-size:17px;letter-spacing:.2px}
.ord-t-plus{font-size:13px;font-weight:700;color:#3B4A63;line-height:1.35}
.ord-t-ds{font-size:11.5px;color:var(--muted);line-height:1.35}
.ord-t-p{margin-top:auto;font-style:normal;font-weight:800;font-size:16px;color:var(--ink)}
.ord-t-p small{font-size:11px;font-weight:600;margin-left:2px;color:var(--muted)}
.ord-t-w{font-size:11px;color:var(--muted2)}
@media (max-width:480px){
  .ord-tiers{gap:6px}
  .ord-t{min-height:0;aspect-ratio:auto;padding:26px 4px 8px}
  .ord-t-h{font-size:15px}.ord-t-plus{font-size:11.5px}.ord-t-ds{display:none}.ord-t-p{font-size:14px}
  .ord-t-dot{left:7px;top:7px;width:15px;height:15px}
}
/* kids708 — 이어 만들기 보관 안내 · 카드 지우기 */
.rs-cap{margin:8px 0 0;padding:9px 12px;border-radius:12px;background:var(--soft);font-size:13px;color:var(--muted);line-height:1.5}
.rs-cap.full{background:#FFF4E5;color:#8A4B00}
.rs-cardw{position:relative}
.rs-del{position:absolute;right:8px;top:8px;z-index:2;margin:0}
.rs-del button{border:1px solid var(--line2);background:rgba(255,255,255,.92);color:#8A3B3B;font:600 12px/1 inherit;font-family:inherit;padding:6px 10px;border-radius:999px;cursor:pointer}
.sr-hero.need{border-color:#E8833A;box-shadow:0 0 0 3px rgba(232,131,58,.2)}
.sr-hero-guest{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.sr-hero-guest .sr-hero-top{margin:0}
@media (min-width:641px){.crow-wrap.big .crow-row{grid-template-columns:repeat(auto-fill,minmax(180px,240px))}}
/* kids709 — 이어 만들기: 삭제한 이야기 복구(접힘) */
.rs-trash{margin:18px 0 6px;border:1px solid var(--line2);border-radius:14px;background:var(--surface);padding:0 14px}
.rs-trash summary{cursor:pointer;padding:12px 0;font-weight:700;font-size:14px}
.rs-trash summary span{font-weight:400;font-size:12.5px;color:var(--muted)}
.rs-trash-list{padding:0 0 12px}
.rs-trash-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px dashed var(--line2)}
.rs-trash-row span{min-width:0;display:flex;flex-direction:column}
.rs-trash-row b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs-trash-row em{font-style:normal;font-size:11.5px;color:var(--muted2)}
.rs-trash-row form{margin:0;flex:none}
/* kids710 — 이어 만들기: 만들던 이야기 전체 정리(개수에 드는 초안 전부) */
.rs-all{margin:18px 0 6px;border:1px solid var(--line2);border-radius:14px;background:var(--surface);padding:0 14px}
.rs-all summary{cursor:pointer;padding:12px 0;font-weight:700;font-size:14px}
.rs-all summary span{font-weight:400;font-size:12.5px;color:var(--muted)}
.rs-all-n{margin:0 0 8px;font-size:12.5px;color:var(--muted);line-height:1.5}
.rs-all-f{padding-bottom:12px}
.rs-all-sel{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;margin-bottom:6px;cursor:pointer}
.rs-all-list{max-height:420px;overflow:auto;border-top:1px dashed var(--line2);margin-bottom:10px}
.rs-all-row{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px dashed var(--line2);cursor:pointer}
.rs-all-row input{flex:none;width:18px;height:18px}
.rs-all-row span{flex:1;min-width:0;display:flex;flex-direction:column}
.rs-all-row b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs-all-row em{font-style:normal;font-size:11.5px;color:var(--muted2)}
.rs-all-go{flex:none;font-size:12px;font-weight:600;color:#2F6BF0;text-decoration:none;padding:5px 8px}
/* ★ kids711 — 내 캐릭터 사진 칸에서 바로 올리기·지우기·얼굴 기준 */
.kd-phin{grid-template-columns:repeat(4,minmax(0,1fr))}
.kd-upf{margin:0;position:relative}
.kd-upl{display:grid;place-content:center;text-align:center;width:100%;height:100%;cursor:pointer;gap:2px;font-size:12.5px}
.kd-upl span{font-size:20px}
.kd-upl em{font-style:normal;font-size:11px;color:var(--muted2)}
.kd-upgo{position:absolute;left:6px;right:6px;bottom:6px}
.kd-ph{position:relative}
.kd-ph.main img{outline:3px solid #2F6BF0;outline-offset:-3px}
.kd-ph-tag{position:absolute;left:6px;top:6px;background:#2F6BF0;color:#fff;font-size:11px;font-weight:700;padding:2px 7px;border-radius:999px}
.kd-ph-del{position:absolute;right:4px;top:4px;margin:0}
.kd-ph-del button{width:24px;height:24px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;font-size:12px;line-height:24px;cursor:pointer;padding:0}
.kd-ph figcaption form{margin:0}
.kd-ph-pick{border:1px solid var(--line2);background:#fff;border-radius:999px;font:600 11px/1.2 inherit;font-family:inherit;padding:4px 6px;cursor:pointer;width:100%;color:#3B4A63}
.kd-ph-on{font-size:11px;font-weight:700;color:#2F6BF0}
@media (max-width:640px){.kd-phin{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* kids711 — 직접 만들기: 원작 칸을 뺀 두 칸 (휴대폰도 한 줄에 둘) */
@media(max-width:640px){
  .st-pair{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .st-pair .st-big{display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:var(--surface);border:1px solid var(--line2)}
  .st-pair .st-big img,.st-pair .st-big-bg{aspect-ratio:1/1;width:100%;height:auto;object-fit:cover;font-size:34px}
  .st-pair .st-big-tx{position:static;padding:8px 8px 10px;background:none!important;color:var(--ink)!important}
  .st-pair .st-big-tx b{font-size:12.5px;line-height:1.35;color:var(--ink)!important;display:block}
  .st-pair .st-big-tx em{display:none}
  .st-pair .st-big-tx i{font-size:11px;line-height:1.35;color:var(--blue,#2B6CD4)!important;display:block;margin-top:4px}
}
/* kids711 — 테스터 「ebook 만 굵게가 아니라 + 나레이션 · + 영상제작도 메인 — 같은 크기로」 */
.ord-t-plus{font-size:17px;font-weight:800;color:var(--ink);letter-spacing:.2px;line-height:1.3}
@media (max-width:480px){.ord-t-plus{font-size:14px}}
/* kids711 — 첫 장면 그리는 동안 미리보기 칸이 얇게 잘려 보였습니다(그림이 아직 안 열려 높이 0) → 칸을 늘 네모로 */
.cv-prev.auto{aspect-ratio:16/9;min-height:190px;background:#1E2A44;border-radius:12px;overflow:hidden}
.cv-prev.auto img{width:100%;height:100%;object-fit:cover;display:block}
/* kids711 — 이야기 화면 STEP 1·2·3 */
.sr-stepn{display:inline-block;font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:.4px;color:#fff;background:#2F6BF0;border-radius:999px;padding:3px 9px;margin-right:4px;vertical-align:2px}
.sr-hero{border:2px solid #2F6BF0;background:#F5F9FF}
.sr-hero-top b{font-size:17px}
.sr-steph{font-size:17px;margin:22px 0 10px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 8px}
.sr-steph span{font-size:12.5px;font-weight:400;color:var(--muted)}
/* kids711 — 보관함 꽉 참 작은 창 */
.kf-pop{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(15,25,45,.45)}
.kf-box{width:100%;max-width:400px;background:var(--surface,#fff);border-radius:18px;padding:22px 20px 18px;box-shadow:0 18px 50px rgba(0,0,0,.25);text-align:center}
.kf-box>b{display:block;font-size:17px;margin-bottom:8px}
.kf-box p{font-size:13.5px;line-height:1.6;color:var(--muted);margin:0 0 14px}
.kf-btns{display:flex;flex-direction:column;gap:8px}
.kf-btns .btn-cta,.kf-btns .btn-ghost{width:100%;justify-content:center}
.kd-ph-tag{top:auto;bottom:40px}
/* ★★ kids712 — 휴대폰 아래 메뉴줄 (앱처럼 고정) */
.tabbar{display:none}
@media (max-width:640px){
  .tabbar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;position:fixed;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:80;
    padding:6px;background:rgba(255,255,255,.97);border:1px solid var(--line2);border-radius:22px;box-shadow:0 8px 28px rgba(20,40,90,.16);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  .tb-i{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:54px;padding:6px 2px;border-radius:16px;
    color:#7A8499;text-decoration:none;font-size:11px;font-weight:600;line-height:1.15;text-align:center;-webkit-tap-highlight-color:transparent}
  .tb-i span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tb-i svg{flex:none}
  .tb-i.on{color:#2F6BF0;background:#EAF1FF}
  .tb-i:active{transform:scale(.96)}
  html.has-tabbar body{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  html.has-tabbar .kfab{bottom:calc(92px + env(safe-area-inset-bottom,0px))}
  html.has-tabbar .mcta{display:none!important}
}
@media (max-width:340px){ .tb-i{font-size:10px} .tb-i svg{width:22px;height:22px} }
html[data-theme="dark"] .tabbar{background:rgba(14,22,44,.96);border-color:rgba(255,255,255,.08)}
html[data-theme="dark"] .tb-i{color:#9AA6C2}
html[data-theme="dark"] .tb-i.on{color:#9CC0FF;background:rgba(80,130,255,.16)}
@media (max-width:640px){
  html.has-tabbar .fb-sel{bottom:calc(90px + env(safe-area-inset-bottom,0px))}
  html.has-tabbar .demo-badge{bottom:calc(150px + env(safe-area-inset-bottom,0px))}
}
/* ★★ kids712 2차 — 사장님 시안: 뜬다샵 · 고객센터 · (가운데 동그라미) 동화 만들기 · 토큰 · 내 계정 */
@media (max-width:640px){
  .tabbar{left:0;right:0;bottom:0;border-radius:22px 22px 0 0;border-width:1px 0 0;padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));
    grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;overflow:visible;box-shadow:0 -6px 22px rgba(20,40,90,.10)}
  .tb-i{min-height:56px}
  .tb-mk{position:relative;display:flex;justify-content:center;align-items:flex-end;min-height:56px;text-decoration:none}
  .tb-mk-c{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:76px;height:76px;border-radius:50%;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#fff;
    background:linear-gradient(160deg,#3B8BFF,#1F5FE0);border:5px solid #fff;box-shadow:0 8px 20px rgba(31,95,224,.35)}
  .tb-mk-c svg{width:26px;height:26px}
  .tb-mk-c b{font-size:11px;font-weight:800;line-height:1.1;white-space:nowrap}
  .tb-mk:active .tb-mk-c{transform:translateX(-50%) scale(.95)}
  .tb-tk{gap:1px}
  .tb-coin{font-style:normal;font-size:19px;line-height:1}
  .tb-tkn{font-size:12.5px;font-weight:800;color:var(--ink);line-height:1.1}
  .tb-tk.zero .tb-tkn{color:#D2552B}
  .tb-tk span{font-size:10.5px}
  html.has-tabbar body{padding-bottom:calc(90px + env(safe-area-inset-bottom,0px))}
  html.has-tabbar .kfab{bottom:calc(104px + env(safe-area-inset-bottom,0px))}
  html.has-tabbar .fb-sel{bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  /* 머리글 오른쪽 아이콘은 아래 줄로 옮겼습니다(주간·야간 단추는 머리글에 그대로) */
  html.has-tabbar .hd-act .hd-ic,html.has-tabbar .hd-act .hd-tk,html.has-tabbar .hd-act .hd-mewrap,html.has-tabbar .hd-act a.lg{display:none!important}
}
@media (max-width:360px){ .tb-mk-c{width:68px;height:68px} .tb-mk-c b{font-size:10px} }
html[data-theme="dark"] .tb-mk-c{border-color:#0E162C}
html[data-theme="dark"] .tb-tkn{color:#E8EEFF}
/* ★ kids712 — 휴대폰 아래 메뉴줄 화면: 머리글은 [큰 메뉴 + 하위 메뉴] 두 줄 (로고 줄 감춤 · 사장님 시안) */
.thm-slot{display:none}
@media (max-width:640px){
  html.has-tabbar .hd3 .hd-r1{display:none}
  html.has-tabbar .hd.hd3{top:0!important}
  html.has-tabbar .hd3 .hd-r2{border-top:0}
  html.has-tabbar{--hd-h:92px!important}
  html.has-tabbar body{--hd-h:92px!important}
  html.has-tabbar .thm-slot{display:flex;justify-content:flex-end;margin:0 0 6px}
  html.has-tabbar .thm-slot:empty{display:none}
  html.has-tabbar .myp-hero .thm-slot{padding-top:8px}
}
/* kids712 — 휴대폰 큰 메뉴 줄 맨 앞 집 단추 (로고 줄을 감춘 대신) */
.hd-homem{display:none}
@media (max-width:640px){
  html.has-tabbar .hd3 .hd-homem{display:flex;align-items:center;justify-content:center;flex:none;width:44px;margin-left:6px;color:var(--ink2);border-radius:12px}
  html.has-tabbar .hd3 .hd-homem:active{background:var(--soft)}
  html.has-tabbar .hd3 .hd-nav{padding-left:2px}
}
/* ★ kids714 — 휴대폰 첫 화면: 만드는 것 세 가지를 그림 바로 아래에 */
.hero-what{display:none}
@media (max-width:640px){
  .hero-what{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 14px}
  .hero-what a{display:flex;flex-direction:column;align-items:center;text-decoration:none;background:var(--surface);border:1px solid var(--line2);border-radius:14px;overflow:hidden;padding-bottom:7px;box-shadow:0 2px 8px rgba(30,60,120,.06)}
  .hero-what img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;margin-bottom:5px}
  .hero-what b{font-size:12.5px;color:var(--ink);line-height:1.2}
  .hero-what em{font-style:normal;font-size:10.5px;color:var(--muted2);line-height:1.2;margin-top:1px}
}
/* kids715 — 휴대폰 큰 메뉴 줄: 집 · 메뉴 넷 · 주간/야간(동그란 단추 하나) */
.hd-thm-m{display:none}
@media (max-width:640px){
  html.has-tabbar .hd3 .hd-thm-m{display:flex;align-items:center;flex:none;padding:0 6px 0 2px}
  html.has-tabbar .hd3 .hd-thm-m .hd-dn{padding:3px;gap:0;border-radius:999px;min-width:0}
  html.has-tabbar .hd3 .hd-thm-m .hd-dn i span{display:none}
  html.has-tabbar .hd3 .hd-thm-m .hd-dn i{width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:14px}
  html.has-tabbar .hd3 .hd-thm-m .hd-dn:not(.night) .dn-n,html.has-tabbar .hd3 .hd-thm-m .hd-dn.night .dn-d{display:none}
  html.has-tabbar .hd3 .hd-nav>a{padding:0 10px;font-size:14.5px}
  html.has-tabbar .hd3 .hd-homem{width:38px;margin-left:4px}
}
/* kids716 — 휴대폰 큰 메뉴 줄: 「이야기 만들기」 → 「만들기」 */
.nv-s{display:none}
@media (max-width:640px){
  html.has-tabbar .hd3 .hd-nav .nv-l{display:none}
  html.has-tabbar .hd3 .hd-nav .nv-s{display:inline}
  html.has-tabbar .hd3 .hd-nav>a{padding:0 12px;font-size:15px}
}
@media (max-width:640px){
  html.has-tabbar .hd3 .hd-nav{flex:1;-webkit-mask-image:none;mask-image:none;padding:0}
  html.has-tabbar .hd3 .hd-nav>a{flex:1 1 auto;justify-content:center;padding:0 6px}
}
@media (max-width:350px){ html.has-tabbar .hd3 .hd-nav>a{font-size:13.5px;padding:0 4px} html.has-tabbar .hd3 .hd-homem{width:32px} }

/* ★ kids721 — 하위 메뉴(3단) 옆으로 밀기 표시 ‹ › (사장님 「서브메뉴의 > 슬라이딩 표시가 없네」)
 *   더 밀 칸이 있을 때만 끝에 동그란 화살표가 뜹니다. 누르면 그쪽으로 밀립니다. */
.hd3 .hd-r3in{position:relative}
.hd3 .hd-r3ar{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:28px;height:28px;padding:0;
  display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--line2);
  background:var(--surface);color:var(--orange-d);font-size:20px;line-height:1;font-weight:800;cursor:pointer;
  box-shadow:0 2px 8px rgba(60,40,20,.18);-webkit-tap-highlight-color:transparent}
.hd3 .hd-r3ar[hidden]{display:none!important}
.hd3 .hd-r3ar.r{right:6px}
.hd3 .hd-r3ar.l{left:6px}
.hd3 .hd-r3ar.r::before,.hd3 .hd-r3ar.l::before{content:"";position:absolute;top:-10px;bottom:-10px;width:30px;z-index:-1;pointer-events:none}
.hd3 .hd-r3ar.r::before{right:100%;background:linear-gradient(90deg,transparent,var(--r3bg,var(--soft)))}
.hd3 .hd-r3ar.l::before{left:100%;background:linear-gradient(270deg,transparent,var(--r3bg,var(--soft)))}
.hd3 .hd-r3ar.r{animation:r3nudge 1.6s ease-in-out 3}
@keyframes r3nudge{0%,100%{transform:translateY(-50%)}50%{transform:translate(3px,-50%)}}
@media(prefers-reduced-motion:reduce){.hd3 .hd-r3ar.r{animation:none}}

/* ★ kids724 — 무료 첫 장면 하루 수를 다 썼을 때 안내 (테스터 4-1) */
.cv-cap{margin:12px 0 0;padding:14px 16px;border-radius:14px;border:1.5px solid #F4B740;
  background:color-mix(in srgb,#F4B740 14%,var(--surface));display:flex;flex-direction:column;gap:4px}
.cv-cap>b{font-size:15px;color:var(--ink)}
.cv-cap>span{font-size:13.5px;line-height:1.6;color:var(--ink2)}
/* ★ kids724 — 초등부 갈래 책 목록: 카드는 「이 이야기로 만들기」, 아래 작은 글은 「완성작 보기」 (테스터 5-1) */
.kl-it .kl-make{display:block;margin:6px 2px 0;font-size:12.5px;font-weight:700;color:var(--orange-d);text-align:center}
.kl-it .kl-watch{display:block;margin:4px 2px 0;font-size:12px;color:var(--muted);text-align:center;text-decoration:underline}
.cv-tiernote{margin:10px 0 4px;padding:10px 12px;border-radius:12px;background:var(--soft);font-size:13px;line-height:1.6;color:var(--ink2)}
.kl-it:has(.kl-make){display:flex;flex-direction:column}
.kl-it:has(.kl-make)>.wk-card{height:auto;flex:1}
/* kids726 — 자막 미리보기 그림이 늦게 오는 동안 칸이 0 높이라 「견 본」 도장이 아래 글을 덮었습니다(실사이트 확인). 16:9 자리를 먼저 잡아 둡니다 */
.cv-prev #capPrevImg{aspect-ratio:16/9;object-fit:contain}

/* kids729 — 좋아요 카드 글 칸도 눌림 */
a.lq-body{display:block;text-decoration:none;color:inherit}
a.lq-body:hover b{text-decoration:underline}
.iv-pts{display:inline-block;margin-top:8px;font-size:13px;font-weight:700;color:var(--brand,#2a7de1);text-decoration:none}
.iv-pts:hover{text-decoration:underline}
/* kids729 — 손글씨 메모가 기울어(-4deg) 넓은 화면 오른쪽으로 2px 삐져나가 가로 스크롤이 생겼습니다 */
.sv-memo{right:6px}
/* kids729 (검수 · 태블릿 768) — 완성작 화면 오른쪽 칸(받은 것·가족에게 보내기)이 화면 밖으로 50px 넘었습니다.
   그리드 칸이 안 줄어드는(min-width:auto) 탓 — 줄어들게 하고, 좁으면 받은 것 칸을 한 줄씩 */
.wk-head>*{min-width:0}
@media(min-width:761px) and (max-width:1000px){ .wk-head{grid-template-columns:240px 1fr;gap:22px} .wk-gets{grid-template-columns:1fr} }
/* kids729 (검수 · 휴대폰 320) — 영상 화면 「장면만 고치기」 단추가 칸보다 넓어 밖으로 나갔습니다 */
.wt-fix-f .btn-ghost,.wt-fix-b .btn-ghost{white-space:normal;max-width:100%;text-align:center}
@media(max-width:380px){ .wt-fixrow{flex-direction:column} .wt-fixrow img{width:100%;height:auto;aspect-ratio:3/2} }
/* kids730 — 실물책 차례 */
.pr-preview .pr-toc{display:block;margin-top:6px;font-size:12px;color:var(--muted);line-height:1.6}

/* kids736 — 장면 크게 보기: 확대한 채로 앞·뒤 넘기기 */
.sp-zv{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:44px;border-radius:999px;border:0;background:rgba(0,0,0,.55);color:#fff;font-size:26px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.sp-zv.l{left:8px}.sp-zv.r{right:8px}
.sp-zv:hover{background:rgba(0,0,0,.75)}
.sp-zoom-none{display:flex;align-items:center;justify-content:center;aspect-ratio:3/2;border-radius:10px;background:var(--soft);color:var(--muted);font-style:normal;font-size:14px}
.sp-zoom-none[hidden]{display:none}
.sp-zoom-in{padding-top:52px}   /* kids736 — 닫기 단추 자리를 그림 위로 비워 화살표와 안 겹치게 */
/* ★ kids747 (테스터 1-1~1-6) — 원작 이야기 화면 */
.sr-head .tag.sr-kind{font-size:clamp(16px,2.3vw,21px);padding:5px 14px;letter-spacing:-.01em}
.sr-hero{padding:16px 16px 14px}
.sr-hero-top b,.sb-top b{font-family:var(--font-title);font-size:18px}
.sr-heros{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.sr-h{width:auto;padding:14px 6px 12px;gap:4px}
.sr-h-av{width:clamp(64px,11vw,96px);height:clamp(64px,11vw,96px);font-size:30px}
.sr-h b{font-size:15px}
.sr-h em{font-size:12.5px}
@media (max-width:420px){.sr-heros{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.sr-h{width:auto;min-width:0}.sr-h-av{width:64px;height:64px}}
.sr-bundle.plain{justify-content:space-between;align-items:center;gap:14px;padding:18px 22px}
.sr-plain-t{display:flex;flex-direction:column;gap:4px;min-width:0}
.sr-plain-t b{font-size:18px}
.sr-plain-t span{font-size:13.5px;color:var(--ink2)}
.sr-bundle.plain .btn-cta{min-width:180px;justify-content:center;font-size:17px;padding:14px 34px}
@media (max-width:560px){.sr-bundle.plain{flex-direction:column;align-items:stretch;text-align:center}.sr-bundle.plain .btn-cta{width:100%}}
/* ★ kids747 (테스터 3-1) — 필수 셋 + 실물동화책 */
.ord-tiers:has(.ord-print){grid-template-columns:repeat(3,minmax(0,1fr)) auto minmax(0,1fr);align-items:stretch}
.ord-plus{display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:800;color:#3B4A63;padding:0 2px}
.ord-print{border-style:dashed}
.ord-print.on{border-style:solid}
.ord-t-dot.sq{border-radius:5px}
.ord-print.on .ord-t-dot.sq{background:#2F6BF0;border-color:#2F6BF0}
.ord-print.on .ord-t-dot.sq::after{content:'✓';position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:800;line-height:1}
.ord-total-s{margin:6px 0 10px;border-radius:14px;background:var(--soft)}
.ord-total-s .ord-krw{display:block;margin-top:4px;font-family:var(--font-ko);font-size:12px;font-weight:600;color:var(--muted)}
@media (max-width:640px){
  .ord-tiers:has(.ord-print){grid-template-columns:repeat(3,minmax(0,1fr))}
  .ord-tiers:has(.ord-print) .ord-plus{grid-column:1/-1;padding:0;font-size:20px;line-height:1}
  .ord-tiers:has(.ord-print) .ord-print{grid-column:1/-1;aspect-ratio:auto;min-height:0;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:4px 8px;padding:12px 12px 12px 36px}
  .ord-tiers:has(.ord-print) .ord-print .ord-t-dot{top:50%;transform:translateY(-50%)}
  .ord-tiers:has(.ord-print) .ord-print .ord-t-ds{flex-basis:100%}
  .ord-tiers:has(.ord-print) .ord-print .ord-t-p{margin-top:0}
}
.pg-print{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border:1.5px dashed #2F6BF0;background:#F5F9FF}
.pg-print.ready{border-style:solid;box-shadow:0 0 0 3px rgba(47,107,240,.12)}
.pg-print-ic{font-size:28px}
.pg-print>div{flex:1;min-width:180px;display:flex;flex-direction:column;gap:3px}
.pg-print>div b{font-size:16px}
.pg-print>div span{font-size:13px;color:var(--muted)}
.pg-print-wait{font-size:12.5px;font-weight:700;color:#2F6BF0;background:#EAF1FF;border-radius:999px;padding:5px 12px}
/* ★ kids747 (테스터 5-2) — 휴대폰 목소리 고르기: 펼친 목록에서 바로 듣기 */
.vp-hide{position:absolute!important;opacity:0;pointer-events:none;width:1px!important;height:1px!important;overflow:hidden}
.vp-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;cursor:pointer}
.vp-btn span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vp-btn i{font-style:normal;color:var(--muted)}
.vp-ov{position:fixed;inset:0;z-index:9500;background:rgba(15,25,45,.45);display:flex;align-items:flex-end;justify-content:center}
.vp-sheet{width:100%;max-width:560px;max-height:78vh;display:flex;flex-direction:column;background:var(--surface,#fff);border-radius:20px 20px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.2);padding-bottom:env(safe-area-inset-bottom,0px)}
.vp-top{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line2)}
.vp-top b{font-size:16px}
.vp-x{width:34px;height:34px;border-radius:50%;border:0;background:var(--soft);font-size:15px;cursor:pointer}
.vp-list{overflow-y:auto;padding:4px 8px 12px;-webkit-overflow-scrolling:touch}
.vp-g{padding:12px 8px 4px;font-size:12px;font-weight:800;color:var(--muted)}
.vp-row{display:flex;align-items:center;gap:10px;padding:8px;border-radius:12px;cursor:pointer;min-height:48px}
.vp-row:active{background:var(--soft)}
.vp-row.on{background:#EAF1FF}
.vp-pl{flex:none;width:40px;height:40px;border-radius:50%;border:1.5px solid #2F6BF0;background:#fff;color:#2F6BF0;font-size:14px;font-weight:800;cursor:pointer}
.vp-pl.on{background:#2F6BF0;color:#fff}
.vp-l{flex:1;min-width:0;font-size:14.5px}
.vp-ck{font-style:normal;color:#2F6BF0;font-weight:800;visibility:hidden}
.vp-row.on .vp-ck{visibility:visible}
html.vp-open,html.vp-open body{overflow:hidden}
html[data-theme="dark"] .vp-pl{background:transparent}
/* ★ kids750 (테스터 10-15 1-2) — 대본 화면 장면 크게 보기: 대본을 그림 안 아래 한쪽에 번지는 흰 판으로(실물 동화책처럼) */
.sp-zoom-img{container-type:inline-size}
.sp-zoom-in-tx{position:absolute;bottom:5%;width:46%;max-height:70%;overflow-y:auto;scrollbar-width:none;padding:2.6cqw 3cqw;
  font-size:clamp(12px,2.3cqw,17px);line-height:1.75;color:#30281f;background:rgba(255,255,255,.88);border-radius:24px;
  box-shadow:0 0 16px 10px rgba(255,255,255,.85);word-break:keep-all;z-index:1}
.sp-zoom-in-tx::-webkit-scrollbar{display:none}
.sp-zoom-in-tx.R{right:4%}.sp-zoom-in-tx.L{left:4%}
.sp-zoom-in-tx[hidden]{display:none}
/* ★ kids750 (테스터 2-1) — PC 에서도 목소리 목록을 펼쳐 ▶ 로 바로 듣기: 가운데 창 */
@media (min-width:821px) and (pointer:fine){
  .vp-ov{align-items:center}
  .vp-sheet{border-radius:18px;max-height:80vh;max-width:520px}
  .vp-row:hover{background:var(--soft)}
  .vp-row.on:hover{background:#EAF1FF}
}
/* kids752 — 휴대폰 장면 크게 보기: 판을 넓히고 글씨를 줄여 긴 대본도 덜 잘리게 */
@container (max-width:520px){ .sp-zoom-in-tx{width:62%;max-height:82%;padding:2.2cqw 2.8cqw;font-size:11px;line-height:1.6;bottom:4%} }

/* ★★ kids756 — 휴대폰 글줄 다듬기 (사장님 2026-10-16 「글자가 밀려서 두 번째 줄로 안 가도 될 게 밀려 … 정확하게 체크」)
 *   전부 body.kx756 아래에만 겁니다 → 설정 mobile_756=0 이면 몸통에 kx756 이 안 붙어 예전 그대로.
 *   ① 글 끝 한두 글자만 다음 줄로 넘어가는 것(「날.」「✨」「→」) — 브라우저가 줄을 고르게 나누게 합니다(글자는 그대로).
 *   ② 진행 창(이야기를 만들고 있어요) — 360px 폰에서 오른쪽이 잘리던 것: 창 안의 긴 단추가 창을 밀어내던 것.
 *   ③ 마이페이지 다섯 칸 「결제·주문」 한 줄.
 *   ④ 가격표 무료 줄 — 글 조각마다 칸이 되던 것을 한 칸으로.
 *   ⑤ 옆으로 미는 표 — 「옆으로 밀어 보세요」 한 줄 + 오른쪽 끝 그림자.
 *   ⑥ 만드는 중 동그라미 — 화면을 내리는 동안만 흐리게. */
body.kx756 :is(p, li, dd, td, th, figcaption, blockquote, .lead, .desc, .st-meta, em, small){text-wrap:pretty}
body.kx756 :is(h1, h2, h3, h4, h5, .wk-ttl, .pc-name, .st-ttl, [class*="-ttl"], [class*="-title"], .btn-cta, .btn-ghost, .btn, button){text-wrap:balance}

body.kx756 .mkwait{grid-template-columns:minmax(0,1fr)}
body.kx756 .mkwait-box{min-width:0;justify-self:center}
body.kx756 #mkWaitBook{white-space:normal;line-height:1.35;padding-left:14px;padding-right:14px}
body.kx756 .mkwait-li>em{white-space:nowrap}
@media(max-width:380px){ body.kx756 .mkwait{padding:14px} body.kx756 .mkwait-box{padding:22px 14px} }

@media (max-width:1000px){
  body.kx756 .myp-side nav.myp-g a.myp-gi b{white-space:nowrap;letter-spacing:-.04em}
}
@media (max-width:370px){
  body.kx756 .myp-side nav.myp-g a.myp-gi b{font-size:12.5px}
}

body.kx756 .pc-rate li .pc-rate-l{min-width:0}
body.kx756 .nw{white-space:nowrap}

body.kx756 .kx-tblhint{margin:0 0 6px;font-size:12px;font-weight:700;color:var(--muted);text-align:right;transition:opacity .3s}
body.kx756 .kx-tblhint.gone{opacity:0}
body.kx756 .kx-tblsc{box-shadow:inset -14px 0 12px -12px rgba(0,0,0,.28)}
body.kx756 .kx-tblsc.kx-end{box-shadow:none}
@media (min-width:1001px){ body.kx756 .kx-tblhint{display:none} }

body.kx756 .kfab{transition:opacity .25s, transform .2s}
body.kx756 .kfab.kx-dim{opacity:.28}
body.kx756 .kx-tblsc th{white-space:nowrap}
/* kids757 — kids756 에서 b·strong·label 에도 줄 고르기를 걸었더니, 폭이 내용만큼인 칸(동화책 목차 「아름다운 숲」)이
 *   좁아지며 두 줄로 접혔습니다(실서버 확인). 그 줄은 뺍니다 — 제목·문단 줄 고르기는 그대로. */