/* 릴리랑 엔진 공통 스타일. 편 HTML은 이 파일과 src/shared/ui/tokens.css(화면 토큰)를 불러오고 장면 마크업만 둔다.
   화면 장치(종이 띠, 찢은 종이, 리본, 서랍)는 토큰만 쓴다. 무대 위 노란색(--touch)은 아이가 누를 수 있는 것에만 쓴다 */
:root {
  /* 편 그림(장면 svg) 색. 그림 레이어만 쓴다 */
  --t-wash-1: #bfe0f2; --t-wash-2: #ffd6c2; --t-wash-3: #fff0a8;
  --skin: #ffe1c9; --cheek: #ffb3a7; --hair: #6b4226; --dog: #f3d1a2; --art-ink: #191f28;
  /* 예전 이름을 화면 토큰에 잇는다(그림 레이어와 부모님 화면이 쓴다) */
  --t-bg: var(--paper); --t-surface: var(--card); --t-ink: var(--ink); --t-sub: var(--ink-2); --t-accent: var(--teal); --t-soft: var(--teal-soft);
  --kr: var(--font-kr); --en: var(--font-en);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
.sprite { position: absolute; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-kr);
  font-size: 16px; line-height: 1.6; word-break: keep-all; overflow-wrap: anywhere;
}
button { font-family: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.en { font-family: var(--font-en); }

/* ===== 아이 화면 ===== */
/* 아이 영역: 누르고 문지르다 글자나 그림이 파랗게 선택되거나, 길게 눌러 메뉴가 뜨거나, 그림이 끌려 나오지 않게 한다(부모님 영역은 그대로 선택 가능) */
.kid, .kid * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.kid img, .kid image { -webkit-user-drag: none; user-drag: none; }
.kid {
  position: relative; max-width: 480px; margin: 0 auto; height: 100vh; height: 100dvh; min-height: 520px;
  display: flex; flex-direction: column; background: var(--paper);
}
/* 무대는 그림 비율(2:3)보다 길어지지 않게: 더 길면 slice로 양옆이 잘려 가장자리의 누를 것(램프 같은)이 가려진다. 남는 높이는 본문 줄이 받는다 */
.stage { position: relative; overflow: hidden; flex: 100 1 0; min-height: 240px; max-height: calc(min(100vw, 480px) * 1.5); background: var(--sky); }
/* 무대와 본문 줄 경계: 크레용 칸 줄(R72) */
.stage::after {
  content: ""; position: absolute; left: 10%; right: 10%; bottom: -1px; height: 14px; pointer-events: none;
  background: url(../../../brand/crayon/divider.webp) center / 100% 100% no-repeat;
}
/* 화면 둘레 크레용 겹줄 액자(R72~R75, 랜딩과 같은 frame9). 그림 위에 얹기만 하고 누르기는 그대로 통과 */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 99; pointer-events: none;
  border: 26px solid transparent; border-image: url(../../../brand/crayon/frame9.webp) 50 round;
}
.stage > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stage svg { stroke-linecap: round; stroke-linejoin: round; }
.stage text { font-family: var(--en); font-weight: 700; }
.stage text.kr { font-family: var(--kr); font-weight: 400; }
/* 그림 색: 토큰만 */
.fS { fill: var(--t-surface); } .fI { fill: var(--art-ink); } .fK { fill: var(--skin); } .fC { fill: var(--cheek); }
.fH { fill: var(--hair); } .fD { fill: var(--dog); } .fA { fill: var(--t-accent); } .f1 { fill: var(--t-wash-1); }
.f2 { fill: var(--t-wash-2); } .fO { fill: var(--t-soft); } .fU { fill: var(--t-sub); } .fT { fill: var(--touch); } .fN { fill: none; }
.sI { stroke: var(--art-ink); } .sO { stroke: var(--t-soft); } .sA { stroke: var(--t-accent); } .sS { stroke: var(--t-surface); }
.sU { stroke: var(--t-sub); } .sT { stroke: var(--touch); } .sE { stroke: var(--touch-edge); }
.hit { fill: transparent; }

/* 누를 수 있는 것: 노랑 + 천천히 숨쉬기 */
.tgt { cursor: pointer; outline: none; }
.tgt .halo { fill: var(--touch); opacity: .3; transform-box: fill-box; transform-origin: center; animation: halo 1.8s ease-in-out infinite; }
.tgt .pulse { transform-box: fill-box; transform-origin: center; animation: pulse 1.8s ease-in-out infinite; }
.waiting .tgt .halo, .waiting .tgt .pulse { animation-duration: 1s; }
.tgt:focus-visible .halo { opacity: .75; animation: none; stroke: var(--t-accent); stroke-width: 4; }
.tgt.done .halo { display: none; }
.tgt.done .pulse { animation: none; }
@keyframes halo { 50% { opacity: .08; transform: scale(1.18); } }
@keyframes pulse { 50% { transform: scale(1.06); } }
.hand { opacity: 0; transition: opacity .3s; pointer-events: none; }
.waiting .hand { opacity: 1; }
.hand > g { transform-box: fill-box; animation: tapHint 1s ease-in-out infinite; }
@keyframes tapHint { 50% { transform: translateY(-8px); } }
/* scrub: 문지르기 안내 손은 기다림과 상관없이 그 장면에서 아직 안 문질렀을 때 보이고, 좌우로 움직인다 */
.hand.rub { opacity: 1; }
.hand.rub.off { opacity: 0; }
.hand.rub > g { animation-name: rubHint; }
@keyframes rubHint { 50% { transform: translateX(-10px); } }

/* find: 찾은 것은 흐리게, 누르면 통통 */
.tgt.done .art { filter: grayscale(1) brightness(1.08); }
.bounce { transform-box: fill-box; transform-origin: center; animation: bounce .7s ease-out; }
@keyframes bounce { 30% { transform: translateY(-28px) rotate(-10deg) scale(1.12); } 60% { transform: translateY(0) rotate(0) scale(1); } 80% { transform: translateY(-7px); } }
/* scrub: 문지르면 세균이 사라짐 */
.scrub { touch-action: none; }
.germ > g { transform-box: fill-box; transform-origin: center; transition: opacity .35s, transform .35s; }
.germ.gone > g { opacity: 0; transform: scale(.3); }
.floaty { animation: floatUp .9s ease-out forwards; }
@keyframes floatUp { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-46px); } }
/* pop: 거품 터뜨리기 */
.bob { transform-box: fill-box; transform-origin: center; animation: bob 3.2s ease-in-out infinite; transition: opacity .25s; }
@keyframes bob { 50% { transform: translateY(-8px) scale(1.04); } }
.bub.popped .bob { animation: none; opacity: 0; }
.bub.popped { pointer-events: none; }
.burst { opacity: 0; transform-box: fill-box; transform-origin: center; }
.bub.popped .burst { animation: burst .7s ease-out forwards; }
@keyframes burst { 0% { opacity: 1; transform: scale(.6); } 60% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: scale(1.2); } }
/* tap-sparkle: 누른 곳에 반짝 */
.spark { transform-box: fill-box; transform-origin: center; animation: spark .8s ease-out forwards; }
@keyframes spark { 0% { opacity: 0; transform: scale(.2) rotate(0); } 40% { opacity: 1; transform: scale(1.15) rotate(20deg); } 100% { opacity: 0; transform: scale(.6) rotate(45deg); } }
/* say-sticker: 말했어요 스티커 */
.fly { animation: fly .6s cubic-bezier(.3,1.3,.5,1) both; }
@keyframes fly { from { transform: translate(var(--dx), var(--dy)) scale(.4); opacity: .4; } to { transform: none; opacity: 1; } }
.nope { transform-box: fill-box; transform-origin: center; animation: nope .4s; }
@keyframes nope { 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
/* lamp-end: 불 끄기 */
.dim { opacity: 0; transition: opacity .8s; pointer-events: none; }
.lamp-off .dim { opacity: .55; }
/* .vanish-on-done: 누르는 대상 안의 그림 레이어. 노란 빛을 두르고, 다 하면(.tgt.done) 흐려져 사라짐(커튼, 그릇, 문, 마개 같은 것) */
.lamp-on-img, .vanish-on-done { filter: drop-shadow(0 0 10px var(--touch)); transition: opacity .4s; }
.lamp-off-img { opacity: 0; transition: opacity .4s; }
.tgt.done .lamp-on-img, .tgt.done .vanish-on-done { opacity: 0; }
.tgt.done .lamp-off-img { opacity: 1; }


/* 아이 차례의 "말했어요"(HTML 단추, 본문 줄 아래) */
.saybtn {
  position: relative; width: 128px; height: 128px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 0; background: none; box-shadow: 0 5px 20px var(--shadow);
}
.saybtn::before {
  content: ""; position: absolute; z-index: 1; left: -19%; top: -31%; width: 138%; height: 131%; pointer-events: none;
  background: url(ui/btn-said.webp) 0 0 / 100% 100% no-repeat;
}
.saybtn .halo { position: absolute; inset: -14px; border-radius: 50%; background: var(--touch); opacity: .3; animation: halo 1.8s ease-in-out infinite; }
.saybtn .pulse { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; padding-bottom: 26%; }
.saybtn .ic { display: none; }   /* 말풍선은 단추 그림에 들어 있음 */
.saybtn b { font-family: var(--font-title); font-weight: 700; letter-spacing: -0.06em; font-size: 23px; line-height: 1; color: var(--touch-edge); }
.saybtn:active { transform: scale(.96); }
.rib { font-family: var(--font-logo); font-weight: 400; fill: var(--brown); font-size: 14px; }

/* 엔진이 만들기 전에는 무대를 숨긴다(셸이 붙기 전 한 프레임 깜빡임 방지) */
body > .stage { visibility: hidden; }

/* 무대 위 조각: 엠블럼(처음으로), 제목 종이 띠, 진행 점, 칩 */
.logo { position: absolute; z-index: 5; top: 2px; left: 8px; width: 48px; height: 48px; display: grid; place-items: center; }
.logo img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px var(--paper); }
/* 제목 띠: 시작 전(R51)에는 종이 띠, 서랍을 열면 어두운 막 위 글(R56), 그 밖에는 화면 읽기에만 */
.eplabel { position: absolute; z-index: 5; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.eplabel h1 { margin: 0; font: inherit; }
.eplabel .epn { display: block; font-family: var(--font-en); font-size: 10px; line-height: 1.3; color: var(--ink-2); }
.fresh .eplabel {
  width: auto; height: auto; overflow: visible; top: 12px; left: 52px; max-width: calc(100% - 140px); padding: 0 6px 1px;
  background: var(--paper) padding-box; border: 9px solid transparent; border-image: url(../../../brand/crayon/picframe9.webp) 20 round; transform: rotate(-1.5deg); clip-path: none;
}
.fresh .eplabel h1, .drawer-open .eplabel h1 { font-family: var(--font-logo); font-size: 14px; line-height: 1.3; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.drawer-open .eplabel { z-index: 22; width: auto; height: auto; top: 10px; left: 56px; overflow: visible; clip-path: none; transform: none; border: 0; border-image: none; background: none; box-shadow: none; padding: 0; }
.drawer-open .eplabel h1 { font-size: 13px; color: var(--night-ink); }
.drawer-open .eplabel .epn { color: var(--night-ink-2); }
.drawer-open .logo { z-index: 22; opacity: .7; }
.dots { position: absolute; z-index: 5; top: 14px; right: 16px; display: flex; align-items: center; gap: 5px; height: 20px; }
.dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--line); transition: width .25s, background-color .25s; }
.dots i.past { background: var(--brown); opacity: .4; }
.dots i.now { width: 14px; background: var(--brown); }
.chip {
  position: absolute; z-index: 5; left: 16px; top: 52px; padding: 3px 12px; border-radius: var(--r-pill);
  background: var(--paper); color: var(--teal); font-size: 13px; border: 1px solid var(--line); pointer-events: none;
}
/* 8초 고리: 기다리는 대상 둘레(엔진이 자리를 잰다). 대상이 여럿이면 오른쪽 위 작은 고리 */
.ring { position: absolute; z-index: 6; pointer-events: none; }
.ring svg { display: block; width: 100%; height: 100%; }
.ring circle { fill: none; stroke-width: 3.5; }
.ring .trk { stroke: var(--line); opacity: .7; }
.ring .cnt { stroke: var(--touch); stroke-linecap: round; stroke-dasharray: 377; transform: rotate(-90deg); transform-origin: center; animation: drain 8s linear forwards; }
.ring.corner { top: 44px; right: 16px; width: 40px; height: 40px; }
.ring.corner .cnt { stroke: var(--teal); }   /* 누를 수 없는 구석 고리는 노랑이 아님(P2) */
@keyframes drain { to { stroke-dashoffset: 377; } }
/* 처음 재생 단추: 노란 동그라미 + 갈색 손그림 빛살(움직이지 않음) */
.big-play {
  position: absolute; z-index: 4; right: 71px; bottom: 97px; width: 96px; height: 96px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 0; background: none; color: var(--touch-edge); display: grid; place-items: center; box-shadow: 0 4px 20px var(--shadow);
}
.big-play::before {
  content: ""; position: absolute; left: -19%; top: -31%; width: 138%; height: 131%; pointer-events: none;
  background: url(ui/btn-play.webp) 0 0 / 100% 100% no-repeat;
}
.big-play svg { display: none; }   /* 삼각형은 단추 그림에 들어 있음 */
.big-play:active { transform: scale(.95); }

/* 본문 줄: 한국어는 책 글씨(Gowun Batang), 영어는 그 아래 */
.cap {
  position: relative; flex: 1 0 152px; padding: 20px 32px 10px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--paper);
}
.cap p { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.cap .kr, .cap .en { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.cap .kr { font-family: var(--font-book); font-size: 19px; line-height: 1.6; color: var(--ink); -webkit-line-clamp: 3; }
.cap .en { font-size: 17px; line-height: 1.4; color: var(--ink-2); -webkit-line-clamp: 2; }
.expr { display: none; }
/* 기다림 표시는 화면 읽기에만(보이는 신호는 대상 둘레의 고리와 숨쉬는 빛) */
.wtag { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* 아이 차례 장면: 무대를 줄이고 본문 줄은 영어 먼저, 아래에 큰 "말했어요" */
.said { display: none; }
.turn .cap { flex: 1 0 80px; padding: 0 32px; }
.turn .cap p { flex-direction: column-reverse; gap: 4px; }
.turn .cap .en { font-weight: 700; font-size: 20px; color: var(--ink); -webkit-line-clamp: 1; }
.turn .cap .kr { font-size: 14px; line-height: 1.5; color: var(--ink-2); -webkit-line-clamp: 2; }
.turn .said { display: flex; flex: none; height: 180px; align-items: center; justify-content: center; border-top: 1px solid var(--line); background: var(--paper); }

/* 접힌 부모 서랍 손잡이 */
.hintrow {
  position: relative; flex: none; width: 100%; height: 56px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0;
  border: 0; background: var(--paper); color: var(--teal); font-size: 13px; cursor: pointer;
}
.hintrow::before { content: ""; position: absolute; top: -2px; left: 22%; right: 22%; height: 10px; background: url(../../../brand/crayon/divider.webp) center / 100% 100% no-repeat; opacity: .7; pointer-events: none; }
.hintrow::after { content: ""; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 20px 20px 0; border-color: transparent var(--paper) transparent transparent; }
.hintrow .bar { width: 32px; height: 3px; border-radius: 2px; background: var(--line); }
.hintrow .chev { width: 8px; height: 8px; margin-top: 4px; border-left: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); }

/* 부모 서랍(종이 시트): 휴대폰, 태블릿 세로에서는 아래에서 올라온다 */
.scrim { position: fixed; inset: 0; z-index: 20; background: var(--shade); }
.drawer {
  position: fixed; z-index: 21; left: 0; right: 0; bottom: 0; max-width: 480px; margin: 0 auto;
  padding: 0 20px calc(16px + env(safe-area-inset-bottom, 0px)); border-radius: 22px 22px 0 0; background: var(--paper); box-shadow: 0 -6px 24px var(--shadow);
  transform: translateY(100%); visibility: hidden; transition: transform .28s ease, visibility 0s linear .28s;
}
.drawer-open .drawer { transform: none; visibility: visible; transition: transform .28s ease; }
.grab { display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; padding: 0; border: 0; background: none; cursor: pointer; }
.grab i { width: 40px; height: 4px; border-radius: 2px; background: var(--line); }
.prow { display: flex; align-items: center; gap: 14px; padding: 2px 0 16px; border-bottom: 1px solid var(--line); }
.pp { flex: none; width: 64px; height: 64px; border-radius: 50%; border: 0; background: var(--teal); color: var(--paper); display: grid; place-items: center; cursor: pointer; box-shadow: 0 3px 10px var(--shadow); }
.pp svg { width: 26px; height: 26px; }
.prog { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.times { display: flex; justify-content: space-between; }
.time { font-family: var(--font-en); font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
#seek { --p: 0%; -webkit-appearance: none; appearance: none; width: 100%; height: 32px; margin: 0; background: none; cursor: pointer; }
#seek::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(var(--teal), var(--teal)) 0 0 / var(--p) 100% no-repeat, var(--line); }
#seek::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: var(--teal); border: 2px solid var(--paper); }
#seek::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line); }
#seek::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--teal); }
#seek::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--teal); border: 2px solid var(--paper); }
.opts { border-bottom: 1px solid var(--line); }
.opt {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 0; border: 0; background: none;
  text-align: left; color: var(--ink); text-decoration: none; cursor: pointer;
}
.opt img { flex: none; width: 32px; height: 32px; object-fit: contain; }
.opt .lab { flex: 1; min-width: 0; line-height: 1.35; }
.opt .lab b { display: block; font-weight: 400; font-size: 15px; }
.opt .lab .short { display: none; }
.opt .lab small { display: block; margin-top: 1px; font-size: 12px; color: var(--ink-2); }
.tog { position: relative; flex: none; width: 44px; height: 26px; border-radius: 13px; background: var(--line); transition: background-color .2s; }
.tog::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--paper); box-shadow: 0 1px 3px var(--shadow); transition: transform .2s; }
.opt[aria-pressed="true"] .tog, .opt[aria-checked="true"] .tog { background: var(--teal); }
.opt[aria-pressed="true"] .tog::after, .opt[aria-checked="true"] .tog::after { transform: translateX(18px); }
.opt.link { min-height: 52px; margin-top: 4px; }
.opt.link img { opacity: .7; }
.opt.link b { color: var(--teal); }
.opt .chev { width: 8px; height: 8px; margin-right: 4px; border-right: 1.5px solid var(--teal); border-top: 1.5px solid var(--teal); transform: rotate(45deg); opacity: .5; }

/* 끝 카드: 종이 한 장 위 찢은 액자, 오늘의 스티커, 한 번 더 */
/* 아래 서랍 손잡이는 남긴다(끝 카드에서도 부모가 재생, 그냥 듣기를 바꿀 수 있게) */
.endcard { position: absolute; inset: 0 0 56px; z-index: 10; display: flex; flex-direction: column; background: var(--paper) center / cover no-repeat; animation: rise .4s ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
/* .eleft(액자, 제목), .eright(스티커, 단추) 묶음은 태블릿 가로의 펼친 책에서만 상자가 된다. 그 밖에는 없는 것처럼 */
.eleft, .eright { display: contents; }
.ebody { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 28px 24px 16px; }
/* R74 승인 보드대로 끝 카드 그림은 둥근 찢은 종이 그대로 둔다 */
.eframe { flex: none; width: 170px; height: 170px; -webkit-mask: url(ui/torn-round.svg) center / 100% 100% no-repeat; mask: url(ui/torn-round.svg) center / 100% 100% no-repeat; }
.eframe img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.ehead { text-align: center; }
.ehead p { margin: 0; }
.ehead .epn { font-family: var(--font-en); font-size: 11px; color: var(--ink-2); margin-bottom: 3px; }
.etitle { font-family: var(--font-title); font-weight: 700; letter-spacing: -0.06em; font-size: 23px; color: var(--ink); line-height: 1.3; margin-bottom: 8px !important; }
.emsg { font-family: var(--font-book); font-size: 15px; line-height: 1.65; color: var(--ink); }
.ribbon {
  flex: none; display: grid; place-items: center; width: 220px; height: 38px; margin: 0; padding-bottom: 4px;
  background: url(ui/ribbon.webp) 0 0 / 100% 100% no-repeat; font-family: var(--font-logo); font-size: 14px; color: var(--brown);
}
.estk { display: flex; justify-content: center; align-items: flex-start; gap: 14px; margin-top: -4px; }
.estk span { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 78px; font-family: var(--font-en); font-size: 10px; line-height: 1.2; color: var(--ink-2); text-align: center; }
.spot { display: grid; place-items: center; width: 78px; height: 78px; background: url(ui/sticker-spot.webp) center / contain no-repeat; }
.spot img { display: block; width: 66px; height: 66px; object-fit: contain; }
.again {
  position: relative; flex: none; width: 160px; height: 67px; margin-top: 36px; padding: 0 0 0 40px; border-radius: 34px; cursor: pointer;
  border: 0; background: none; color: var(--touch-edge); font-family: var(--font-title); font-weight: 700; letter-spacing: -0.06em; font-size: 23px; box-shadow: 0 4px 14px var(--shadow);
}
/* 단추 그림(빛살 세 줄과 다시 듣기 화살표 포함). 글자는 HTML */
.again::before {
  content: ""; position: absolute; z-index: -1; left: 0; top: -65%; width: 100%; height: 168%; pointer-events: none;
  background: url(ui/btn-again.webp) 0 0 / 100% 100% no-repeat;
}
.again { isolation: isolate; }
.again:active { transform: scale(.96); }
.toparent { flex: none; min-height: 48px; padding: 0 12px; border: 0; background: none; cursor: pointer; font-size: 15px; color: var(--teal); text-decoration: underline; text-decoration-color: var(--teal-soft); text-underline-offset: 4px; }
.etip { flex: none; margin: 0; padding: 14px 28px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1.5px solid var(--line); background: var(--paper-2); text-align: center; font-size: 13px; line-height: 1.65; color: var(--ink-2); }

/* ===== 부모님 화면 ===== */
.parent {
  max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px;
  padding: 16px max(16px, env(safe-area-inset-right, 0px)) calc(40px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}
.card { background: var(--t-surface); border-radius: 20px; padding: 22px 20px; }
h2 { font-size: 20px; font-weight: 400; margin: 0 0 14px; color: var(--t-ink); }
.hint { font-size: 13px; color: var(--t-sub); margin: 12px 0 0; }
.words { display: grid; gap: 10px; }
.word {
  display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 12px; width: 100%;
  padding: 12px; border-radius: 16px; background: var(--t-bg); border: 0; text-align: left; cursor: pointer;
}
.word > svg, .word > img { width: 64px; height: 54px; }
.word > img { object-fit: contain; }
.word b { display: block; font-family: var(--en); font-weight: 700; font-size: 21px; line-height: 1.2; white-space: nowrap; color: var(--t-ink); }
.word span span { font-size: 14px; color: var(--t-sub); }
.word .say { width: 40px; height: 40px; border-radius: 50%; background: var(--t-surface); color: var(--t-accent); display: grid; place-items: center; }
.word .say svg { width: 18px; height: 18px; }
.word.on { background: var(--t-soft); }
.word.on b { color: var(--t-accent); }
.sheet { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: center; }
.sheet img { width: 112px; height: auto; border-radius: 8px; border: 1.5px solid var(--t-soft); display: block; }
.sheet ul { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 14px; color: var(--t-sub); }
.sheet li b { color: var(--t-accent); font-family: var(--en); }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 16px; border-radius: 12px; background: var(--t-accent); color: var(--t-surface); font-size: 15px; text-decoration: none; }
.tips p { margin: 0 0 10px; font-size: 15px; color: var(--t-sub); }
.tips p:last-child { margin: 0; }
.tips b { color: var(--t-ink); font-weight: 400; }
details.card { padding: 0; overflow: hidden; }
summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px; min-height: 64px; }
summary::-webkit-details-marker { display: none; }
summary .t { font-size: 17px; }
summary .s { display: block; font-size: 13px; color: var(--t-sub); }
summary > svg { flex: none; width: 20px; height: 20px; color: var(--t-sub); transition: transform .2s; }
details[open] summary > svg { transform: rotate(180deg); }
.script { padding: 0 20px 20px; display: grid; gap: 2px; }
.line { display: flex; gap: 10px; padding: 7px 8px; border-radius: 10px; border: 0; background: none; text-align: left; cursor: pointer; font-size: 15px; line-height: 1.55; width: 100%; }
.line .n { flex: none; width: 22px; font-size: 12px; color: var(--t-sub); padding-top: 2px; font-family: var(--en); }
.line mark { background: none; color: var(--t-accent); font-family: var(--en); font-weight: 700; }
.line.now { background: var(--t-soft); }
.site-footer { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 8px 4px 0; font-size: 13px; }
.site-footer a { color: var(--t-sub); text-decoration: none; }
.maker { margin: 4px 4px 0; font-size: 13px; }
.maker a { color: var(--t-accent); }

/* ===== 밤 편, 밤 장면(R55): 화면 장치도 어둡고 낮게 ===== */
.night { background: var(--night); }
.night .stage { background: var(--night); }
.night .cap, .night.turn .said { background: var(--night-2); }
.night .cap .kr { color: var(--night-ink); }
.night .cap .en { color: var(--night-ink-2); }
.night .dots i { background: var(--night-ink-2); opacity: .5; }
.night .dots i.past { background: var(--night-ink); opacity: .5; }
.night .dots i.now { background: var(--night-ink); opacity: 1; }
.night .ring .trk { stroke: var(--night-2); opacity: 1; }
.night .ring .cnt { stroke: var(--lamp); }
.night .ring.corner .cnt { stroke: var(--night-ink-2); }
.night .tgt .halo { fill: var(--lamp); }
.night .hintrow { background: var(--night); color: var(--lamp); }
.night .hintrow .bar { background: var(--night-2); }
.night .hintrow::after { border-color: transparent var(--night-2) transparent transparent; }
.night .logo { opacity: .85; }
.night .chip { background: var(--night-2); border-color: var(--night-2); color: var(--night-ink); }
.night.fresh .eplabel { background: var(--night-2) padding-box; }
.night.fresh .eplabel h1 { color: var(--night-ink); }
.night.fresh .eplabel .epn { color: var(--night-ink-2); }
.nightpage { background: linear-gradient(var(--night), var(--night)) 0 0 / 100% 100dvh no-repeat, var(--paper); }
/* 밤 끝 카드: 설정 bg 그림 위에 밤 종이를 덮는다 */
.night .endcard { background-color: var(--night); }
.night .endcard::before { content: ""; position: absolute; inset: 0; background: var(--night); opacity: .9; pointer-events: none; }
.night .ebody, .night .etip { position: relative; }
.night .etitle, .night .emsg { color: var(--night-ink); }
.night .ehead .epn, .night .estk span { color: var(--night-ink-2); }
.night .toparent { color: var(--lamp); text-decoration-color: var(--night-2); }
.night .etip { background: var(--night-2); border-color: var(--night-2); color: var(--night-ink-2); }
.night .again::before { background-image: url(ui/btn-again-night.webp); }
.night .saybtn::before { background-image: url(ui/btn-said-night.webp); }
.night .big-play::before { background-image: url(ui/btn-play-night.webp); }

/* ===== 태블릿 세로: 휴대폰 배치 그대로, 화면 높이에 맞춰 무대를 크게(그림이 덜 잘리는 비율) ===== */
@media (min-width: 700px) and (orientation: portrait) {
  .kid { max-width: min(100%, calc((100dvh - 224px) * .7)); }
  .stage { max-height: none; }
  .cap { flex-basis: 168px; padding: 20px 40px 12px; }
  .cap .kr { font-size: 22px; line-height: 1.8; }
  .cap .en { font-size: 18px; line-height: 1.5; }
  .turn .cap { flex-basis: 96px; }
  .turn .cap .en { font-size: 18px; }
  .turn .cap .kr { font-size: 22px; }
  .big-play { width: 120px; height: 120px; }
  .saybtn { width: 150px; height: 150px; }
  .drawer { max-width: 560px; padding: 0 28px calc(20px + env(safe-area-inset-bottom, 0px)); }
  .opt .lab b { font-size: 17px; }
  .opt .lab small { font-size: 13px; }
  .hintrow { font-size: 16px; }
  /* 끝 카드(R66): 크게, 세로 가운데. 넘치면 위부터 스크롤되게 가운데 맞춤은 앞뒤 auto 여백으로 */
  .ebody { gap: 16px; padding: 32px 28px 16px; }
  .eframe { width: 260px; height: 260px; margin-top: auto; }
  .ehead .epn { font-size: 14px; margin-bottom: 4px; }
  .etitle { font-size: 35px; margin-bottom: 10px !important; }
  .emsg { font-size: 18px; line-height: 1.7; }
  .ribbon { width: 340px; height: 56px; font-size: 18px; }
  .estk { gap: 20px; margin-top: -2px; }
  .estk span { width: 120px; gap: 7px; font-size: 14px; }
  .spot { width: 120px; height: 120px; }
  .spot img { width: 100px; height: 100px; }
  .again { width: 200px; height: 84px; margin-top: 40px; padding-left: 48px; border-radius: 42px; font-size: 28px; }
  .toparent { margin: -6px 0 auto; font-size: 18px; }
  .etip { padding: 16px 36px calc(16px + env(safe-area-inset-bottom, 0px)); font-size: 16px; line-height: 1.7; }
}

/* ===== 태블릿 가로(R57): 펼친 그림책. 왼쪽 쪽은 그림(아이), 오른쪽 쪽은 본문과 부모 조작 줄 =====
   서랍은 늘 펼친 채 오른쪽 아래 줄이 된다. 같은 요소를 격자 칸으로 옮길 뿐 동작은 그대로 */
@media (min-width: 900px) and (min-height: 600px) and (orientation: landscape) {
  .kid {
    --pw: calc((100dvh - 20px) * .674);
    max-width: none; height: 100vh; height: 100dvh; min-height: 0; padding-bottom: 20px;
    display: grid; grid-template-columns: var(--pw) 10px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "stage spine dots" "stage spine cap" "stage spine ctl";
    /* 아래 겹친 종이 장 두 겹과 책상 */
    background: linear-gradient(var(--leaf-1), var(--leaf-1)) 0 calc(100% - 6px) / 100% 14px no-repeat,
      linear-gradient(var(--leaf-2), var(--leaf-2)) 18px 100% / calc(100% - 36px) 12px no-repeat, var(--desk);
  }
  /* 오른쪽 쪽 종이와 책 등 */
  .kid::before { content: ""; grid-row: 1 / 4; grid-column: 3; background: var(--paper); border-radius: 0 3px 3px 0; }
  .kid::after { content: ""; grid-row: 1 / 4; grid-column: 2; background: linear-gradient(to right, color-mix(in srgb, var(--brown) 70%, var(--ink)), color-mix(in srgb, var(--brown) 32%, transparent) 40%, color-mix(in srgb, var(--brown) 6%, transparent)); }
  .stage { grid-area: stage; min-height: 0; max-height: none; border-radius: 3px 0 0 3px; }
  .stage::after { display: none; }
  .dots { grid-area: dots; position: static; padding: 22px 56px 14px; height: auto; gap: 8px; }
  .dots i { width: 7px; height: 7px; }
  .dots i.now { width: 22px; background: var(--teal); }
  .dots i.past { background: var(--teal); opacity: .38; }
  .cap { grid-area: cap; min-height: 0; padding: 28px 52px 28px 64px; align-items: stretch; background: none; }
  .cap p { align-items: stretch; gap: 0; text-align: left; }
  .cap .kr { font-size: 30px; line-height: 2; -webkit-line-clamp: 4; padding-bottom: 22px; margin-bottom: 18px; border-bottom: 1.5px solid var(--line); }
  .cap .en { font-size: 22px; line-height: 1.7; -webkit-line-clamp: 3; margin-bottom: 36px; }
  .expr { display: block; padding-top: 24px; border-top: 1.5px solid var(--line); }
  .expr p { margin: 0; }
  .xlab { font-size: 11px; color: var(--ink-2); margin-bottom: 9px !important; }
  .xword { display: inline-block; font-family: var(--font-en); font-size: 42px; font-weight: 700; line-height: 1.3; color: var(--ink); text-decoration: underline 2.5px var(--brown); text-underline-offset: 7px; }
  .turn .cap { padding: 28px 52px 28px 64px; }
  .turn .cap p { flex-direction: column; }
  .turn .cap .kr { font-size: 26px; -webkit-line-clamp: 3; }
  .turn .cap .en { font-size: 30px; -webkit-line-clamp: 2; }
  /* 아이 차례 단추는 휴대폰처럼 본문 줄 아래(오른쪽 쪽). 왼쪽 그림 아래에는 스티커판이 있어 가리면 안 됨. 오늘의 표현은 본문 줄과 겹치니 숨김 */
  .turn .said { grid-area: cap; z-index: 4; align-self: end; justify-self: center; height: auto; margin-bottom: 48px; border: 0; background: none; }
  .turn .expr { display: none; }
  .night.turn .said { background: none; }
  .hintrow, .scrim, .grab, .opt.link { display: none !important; }
  .drawer {
    grid-area: ctl; position: static; z-index: auto; max-width: none; margin: 0; transform: none; visibility: visible; transition: none;
    border-radius: 0 0 3px 0; box-shadow: none; border-top: 1.5px solid var(--line); background: var(--paper-2);
    display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "seek seek" "play opts"; align-items: center; column-gap: 16px;
    padding: 4px 24px 12px;
  }
  .prow { display: contents; }
  .prog { grid-area: seek; flex-direction: row-reverse; align-items: center; gap: 12px; }
  .times { flex: none; gap: 6px; }
  .times .time + .time::before { content: "/ "; }
  #seek { height: 28px; }
  .pp { grid-area: play; width: 48px; height: 48px; box-shadow: 0 2px 8px var(--shadow); }
  .pp svg { width: 20px; height: 20px; }
  .opts { grid-area: opts; display: flex; gap: 12px; align-items: center; border: 0; padding-left: 16px; border-left: 1px solid var(--line); }
  .opt { width: auto; min-height: 48px; gap: 7px; padding: 0 8px; border-radius: var(--r-btn); }
  .opt img { opacity: .72; }
  .opt .lab .long, .opt .lab small, .opt .tog { display: none; }
  .opt .lab .short { display: block; font-size: 12px; color: var(--ink-2); white-space: nowrap; }
  .opt[aria-pressed="true"], .opt[aria-checked="true"] { background: var(--teal-soft); }
  .opt[aria-pressed="true"] img, .opt[aria-checked="true"] img { opacity: 1; }
  .opt[aria-pressed="true"] .short, .opt[aria-checked="true"] .short { color: var(--teal); }
  /* 끝 카드(R70): 펼친 책. 왼쪽 쪽은 액자, 제목, 부모 팁 / 오른쪽 쪽은 리본, 스티커, 한 번 더, 부모님께. 아래 부모 조작 줄은 서랍이 그대로 위에 뜬다 */
  .ended > .stage { visibility: hidden; }
  .endcard {
    grid-row: 1 / 4; grid-column: 1 / 4; inset: 0; border-radius: 3px;
    display: grid; grid-template-columns: var(--pw) 10px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1fr);
  }
  .ended .drawer { position: relative; z-index: 11; }
  .ebody { display: contents; }
  .eleft, .eright { position: relative; display: flex; flex-direction: column; align-items: center; }
  .eleft { grid-column: 1; grid-row: 2; padding: 0 40px; }
  .eframe { width: 300px; height: 300px; margin-bottom: 24px; }
  .ehead .epn { font-size: 13px; margin-bottom: 4px; }
  .etitle { font-size: 28px; margin-bottom: 8px !important; }
  .emsg { font-size: 17px; line-height: 1.55; }
  .etip {
    position: relative; grid-column: 1; grid-row: 3; justify-self: center; width: calc(var(--pw) * .8 - 64px); margin: 18px 0 0; padding: 18px 0 0;
    border: 0; border-top: 1px solid var(--line); background: none; font-size: 15px; line-height: 1.7;
  }
  /* 오른쪽 쪽: 아래 부모 조작 줄(서랍) 높이만큼 비워 그 위에서 가운데 */
  .eright { grid-column: 3; grid-row: 1 / 5; justify-content: center; padding: 28px 32px 112px; background: color-mix(in srgb, var(--paper) 55%, transparent); }
  .eright::before { content: ""; position: absolute; top: 0; bottom: 0; left: -10px; width: 10px; background: linear-gradient(to right, color-mix(in srgb, var(--brown) 70%, var(--ink)), color-mix(in srgb, var(--brown) 32%, transparent) 40%, color-mix(in srgb, var(--brown) 6%, transparent)); }
  .ribbon { width: 240px; height: 40px; margin-bottom: 20px; }
  .estk { gap: 20px; margin: 0 0 28px; }
  .estk span { width: 110px; gap: 6px; font-size: 11px; }
  .spot { width: 110px; height: 110px; }
  .spot img { width: 90px; height: 90px; }
  .again { width: 200px; height: 84px; margin: 50px 0 8px; border-radius: 42px; font-size: 28px; }
  .parent { max-width: 760px; }
  /* 밤 편: 오른쪽 쪽도 밤 종이 */
  .night.kid::before { background: var(--night-2); }
  .night .cap { background: none; }
  .night .cap .kr { border-color: var(--night); }
  .night .expr { border-color: var(--night); }
  .night .xlab { color: var(--night-ink-2); }
  .night .xword { color: var(--night-ink); text-decoration-color: var(--lamp); }
  .night .drawer { background: var(--night); border-color: var(--night-2); color: var(--night-ink); }
  .night .opt { color: var(--night-ink); }
  .night .opt .lab .short, .night .time { color: var(--night-ink-2); }
  .night .opts { border-color: var(--night-2); }
  .night .eright { background: var(--night-2); }
  .night .eright::before { background: linear-gradient(to right, color-mix(in srgb, var(--night) 30%, black), color-mix(in srgb, var(--night-2) 50%, transparent) 40%, color-mix(in srgb, var(--night-2) 10%, transparent)); }
  .night .etip { background: none; border-color: color-mix(in srgb, var(--night-ink) 12%, transparent); }
}

/* ===== 낮은 휴대폰(높이 720px 이하): 끝 카드가 팁 띠에 가리지 않게, 아이 차례 무대가 스티커판까지 보이게 줄인다 ===== */
@media (max-width: 699px) and (max-height: 720px) {
  .ebody { gap: 8px; padding: 16px 24px 12px; }
  .eframe { width: 110px; height: 110px; }
  .turn .cap { flex-basis: 64px; }
  .turn .said { height: 118px; }
  .saybtn { width: 96px; height: 96px; }
  .saybtn b { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .tgt .halo, .tgt .pulse, .bob, .hand > g, .saybtn .halo { animation: none !important; }
  .bounce, .nope { animation: none; }
  .floaty, .spark, .bub.popped .burst { animation-name: fadeOut; }
  .fly, .endcard { animation-name: fadeIn; }
  .germ > g { transition: opacity .3s; }
  .germ.gone > g { transform: none; }
  .tog, .tog::after, .dots i, summary > svg, .drawer { transition: none; }
}
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }