/* ===========================================================
   그로위 (Growith) — 로봇 몸체 UI 음성 데모
   =========================================================== */

:root{
  /* 기본 대기 (코랄 핑크) */
  --c1:#ff9a86;   /* 상단 */
  --c2:#f8544c;   /* 중앙 코어 */
  --c3:#ff7fd0;   /* 하단 */
  --core-y: 44%;
  --glow: rgba(255,120,120,.55);

  --ink:#ffffff;
  --bg-dark:#08070b;

  --font: "Pretendard", "Pretendard Variable", -apple-system, BlinkMacSystemFont,
          "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }

/* hidden 속성이 아래쪽 display 규칙에 덮이지 않게 합니다.
   (이게 없으면 .manual{display:flex} 같은 규칙이 hidden을 무시해 계속 보입니다) */
[hidden]{ display:none !important; }

html, body{
  height:100%;
  overflow:hidden;
  background:#000;
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}

#app{
  position:fixed; inset:0;
  width:100%; height:100dvh;
  overflow:hidden;
}

/* ---------- 화면 전환 ---------- */
.screen{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transition:opacity .7s ease, visibility .7s;
}
.screen.is-active{ opacity:1; visibility:visible; }

/* ===========================================================
   1. 얼굴 화면
   =========================================================== */
#faceScreen{
  background:#f8544c;
  display:grid; place-items:center;
}

.face-bg{
  position:absolute; inset:-2%;
  background:
    radial-gradient(120% 78% at 50% var(--core-y),
        var(--c2) 0%,
        color-mix(in srgb, var(--c2) 78%, var(--c1)) 34%,
        transparent 72%),
    linear-gradient(178deg, var(--c1) 0%, var(--c2) 42%, var(--c3) 100%);
  filter:saturate(1.05);
  transition:background 1.1s ease;
  animation:breathe 6.5s ease-in-out infinite;
}

@keyframes breathe{
  0%,100%{ transform:scale(1);      filter:saturate(1.02) brightness(1);   }
  50%    { transform:scale(1.035);  filter:saturate(1.10) brightness(1.06);}
}

/* LED 도트 매트릭스 질감 */
.face-dots{
  position:absolute; inset:0;
  background-image:
    radial-gradient(rgba(255,255,255,.30) 1.5px, transparent 1.6px);
  background-size:15px 15px;
  mix-blend-mode:soft-light;
  opacity:.85;
  pointer-events:none;
}

.face-vignette{
  position:absolute; inset:0;
  background:radial-gradient(130% 92% at 50% 46%, transparent 52%, rgba(0,0,0,.16) 100%);
  pointer-events:none;
}

.face-glow{
  position:absolute; inset:0;
  background:radial-gradient(60% 44% at 50% 42%, rgba(255,255,255,.20), transparent 70%);
  opacity:0; transition:opacity .5s ease;
  pointer-events:none;
}
#faceScreen.is-listening .face-glow{ opacity:1; }

/* --- 얼굴 SVG --- */
.face{
  position:relative; z-index:2;
  width:min(76vw, 82vh);
  aspect-ratio:900 / 620;
  height:auto;
  filter:drop-shadow(0 0 30px rgba(255,255,255,.42));
  overflow:visible;
}
.eye, .mouth{
  fill:none;
  stroke:#fff;
  stroke-width:41;
  stroke-linecap:round;
}
.mouth{ stroke-width:39; }

#eyes{ transform-origin:450px 246px; animation:blink 5.4s infinite; }
@keyframes blink{
  0%,92%,100%{ transform:scaleY(1); }
  95%        { transform:scaleY(.14); }
}

#mouthGroup{ transform-origin:450px 424px; }
#faceScreen.is-talking .face{ animation:none; }
#faceScreen.is-talking #mouthGroup{ animation:talk .34s ease-in-out infinite alternate; }
@keyframes talk{
  from{ transform:scaleY(.75) scaleX(.97); }
  to  { transform:scaleY(1.5)  scaleX(1.06); }
}
#faceScreen.is-talking #eyes{ animation-duration:3.2s; }

/* 상태별 컬러 */
#faceScreen.state-greeting{ --c1:#ffd27a; --c2:#ff9a3c; --c3:#ff6fa8; }
#faceScreen.state-thinking{ --c1:#a8f0d8; --c2:#38c9a3; --c3:#5ec8ff; }
#faceScreen.state-report  { --c1:#c7b4ff; --c2:#7c5cff; --c3:#4fc3ff; }

/* ===========================================================
   2. 리포트 화면 — Figma 768 × 1024 프레임을 그대로 재현하고
      뷰포트에 맞춰 통째로 확대/축소합니다. (node 173:4932)
   =========================================================== */
#reportScreen{
  background:#000;
  color:#fff;
  display:flex; flex-direction:column;
}

.stage-wrap{
  flex:1 1 auto; min-height:0;
  position:relative;
  overflow:hidden;      /* 비율 계산이 한 박자 늦어도 다른 UI를 침범하지 않게 */
}

/* Figma 원본 크기. --s 는 JS가 화면에 맞춰 계산합니다.
   absolute + translate(-50%,-50%) 로 두면 축소된 뒤에도 정확히 가운데에 옵니다.
   (grid 가운데 정렬은 원본 1024px 기준으로 잡혀 몇 px 어긋납니다) */
.stage{
  width:768px; height:1024px;
  position:absolute; left:50%; top:50%;
  transform:translate(-50%, -50%) scale(var(--s, 1));
  transform-origin:center center;
  background:#000;
}
.stage-inner{
  position:absolute; inset:32px;      /* Figma 패딩 32 */
  display:flex; flex-direction:column;
}

/* ---------- 헤더 ---------- */
.rpt-head{ flex:0 0 auto; }
.rpt-bar{
  height:35px;
  display:flex; align-items:center; justify-content:space-between;
}
.rpt-logo{ width:99px; height:35px; object-fit:contain; object-position:left center; }
.rpt-time{ font-size:18px; color:#bcbcbc; font-weight:400; }

.rpt-progress{
  margin-top:24px;
  display:flex; gap:9px; align-items:center;
}
.rpt-progress span{
  flex:1; height:4px; border-radius:2px;
  background:rgba(217,217,217,.20);
  overflow:hidden;
}
.rpt-progress span i{
  display:block; height:100%; width:0;
  background:#d9d9d9; border-radius:2px;
}
.rpt-progress span.done i{ width:100%; }
.rpt-progress span.now i{ width:100%; transition:width var(--dur,6s) linear; }

/* ---------- 슬라이드 공통 ---------- */
.slides{
  position:relative;
  flex:1 1 auto;
  margin-top:52px;                    /* Figma: 진행바 아래 여백 */
  min-height:0;
}
.slide{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transform:translateY(16px);
  transition:opacity .5s ease, transform .5s ease, visibility .5s;
}
.slide.is-active{ opacity:1; visibility:visible; transform:none; }

/* ---------- 시작 화면 (Figma 그대로) ---------- */
.rpt-title{
  font-size:40px; font-weight:600; line-height:1.4;
  text-align:center; color:#fff; letter-spacing:-0.02em;
}
.rpt-title em{
  font-style:normal;
  background:linear-gradient(90deg,#d27efc 0%,#ff66b1 60.096%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.rpt-sub{
  margin-top:16px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:18px; color:rgba(255,255,255,.75);
}
.rpt-sub b{ width:2px; height:15px; background:rgba(255,255,255,.18); }

.card-grid{
  margin-top:40px;
  display:grid;
  grid-template-columns:344px 344px;
  grid-template-rows:320px 320px;
  gap:16px;
  justify-content:space-between;
}
.card{
  position:relative;
  border-radius:24px;
  background:rgba(255,255,255,.10);
  overflow:hidden;
}
.card h3{
  position:absolute; left:34px; top:34px;
  font-size:28px; font-weight:600; letter-spacing:-0.06em;
  white-space:nowrap;
}
.card h3 span{ font-weight:400; }        /* 가운뎃점 ・ 은 Regular */
.card p{
  position:absolute; left:34px; top:81px;   /* 제목(39.2px) + 간격 8px */
  width:276px;                              /* 카드 안쪽 폭 (344 - 34*2) */
  font-size:14px; line-height:1.6; color:#909090;
}
.card .mini{ position:absolute; left:34px; width:276px; }

/* ---------- 지표 상세 화면 ---------- */
.detail{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:100%;
  padding-bottom:40px;
  text-align:center;                    /* 상단·하단 모두 가운데 정렬 */
}
.detail-eyebrow{
  font-size:15px; font-weight:600; letter-spacing:.18em;
  color:var(--m); margin-bottom:14px;
}
.detail h2{
  font-size:40px; font-weight:600; letter-spacing:-0.05em; line-height:1.35;
}
.detail h2 span{ font-weight:400; }
.detail > p.lead{
  margin-top:12px;
  font-size:16px; line-height:1.6; color:#909090;
  max-width:520px;
}

.chart-card{
  margin-top:34px;
  width:704px; height:404px;
  border-radius:24px;
  background:rgba(255,255,255,.10);
  overflow:hidden;
  flex:0 0 auto;
  display:flex;
}
.chart-card svg{ width:100%; height:100%; display:block; }

.detail > p.verdict{
  margin-top:42px;
  font-size:21px; line-height:1.65; letter-spacing:-0.02em;
  color:rgba(255,255,255,.80);
  max-width:600px;
}
.detail > p.verdict b{ color:#fff; font-weight:600; }
.detail > p.verdict em{ font-style:normal; color:var(--m); font-weight:600; }

/* 차트 애니메이션 */
.avg-line{ stroke:#fff; stroke-opacity:.30; stroke-width:1.6; }
.grid-line{ stroke:#fff; stroke-opacity:.06; stroke-width:1.4; }
.avg-tag{ font-size:15px; fill:rgba(255,255,255,.45); }
.day-label{ font-size:16px; fill:rgba(255,255,255,.34); }

.line-path{
  fill:none; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:var(--len); stroke-dashoffset:var(--len);
}
.is-active .line-path{ animation:draw 1.7s cubic-bezier(.33,.68,.3,1) forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }

.area-path{ opacity:0; }
.is-active .area-path{ animation:fadeArea 1.4s .45s ease forwards; }
@keyframes fadeArea{ to{ opacity:1; } }

.pt{ opacity:0; transform-box:fill-box; transform-origin:center; }
.is-active .pt{ animation:pop .45s ease forwards; }
@keyframes pop{ from{ opacity:0; transform:scale(.2);} to{ opacity:1; transform:scale(1);} }

/* 시작 화면의 미니 차트는 조금 더 빠르게 */
.slide--intro .line-path{ animation-duration:1.2s; }

/* ---------- 마무리 화면 ---------- */
.wrapup{
  display:flex; flex-direction:column; align-items:center;
  height:100%; text-align:center;
}
.wrapup h2{
  font-size:40px; font-weight:600; line-height:1.4; letter-spacing:-0.03em;
}
.wrapup h2 em{
  font-style:normal;
  background:linear-gradient(90deg,#d27efc 0%,#ff66b1 60.096%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.rows{
  margin-top:44px; width:704px;
  display:flex; flex-direction:column; gap:12px;
}
.row{
  display:flex; align-items:center; gap:16px;
  padding:22px 30px;
  border-radius:20px;
  background:rgba(255,255,255,.10);
  text-align:left;
}
.row i{ width:12px; height:12px; border-radius:50%; flex:0 0 auto; }
.row .rname{ font-size:20px; font-weight:600; letter-spacing:-0.04em; }
.row .rname span{ font-weight:400; }
.row .rverdict{ margin-left:auto; font-size:18px; font-weight:600; }
.wrapup{ justify-content:center; padding-bottom:40px; }
.wrapup > p.closing{
  margin-top:44px;
  font-size:21px; line-height:1.65; letter-spacing:-0.02em;
  color:rgba(255,255,255,.80); max-width:620px;
}
.wrapup > p.closing b{ color:#fff; font-weight:600; }

/* ---------- 하단 조작 영역 (스테이지 바깥, 확대되지 않음) ---------- */
.rpt-footer{
  flex:0 0 auto; height:92px;
  position:relative;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(16px,2vw,28px);
}
.rpt-back{
  background:none; border:0; cursor:pointer;
  color:rgba(255,255,255,.5); font-family:inherit; font-size:15px;
  padding:8px 4px; letter-spacing:-.01em;
}
.rpt-back:hover{ color:#fff; }
.rpt-nav{ display:flex; gap:10px; }
.navbtn{
  width:44px; height:44px;
  border-radius:50%; border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.05); color:#fff; cursor:pointer;
  font-size:21px; line-height:1;
  display:grid; place-items:center;
  transition:background .2s, opacity .2s;
}
.navbtn:hover{ background:rgba(255,255,255,.13); }
.navbtn:disabled{ opacity:.25; cursor:default; }

/* ===========================================================
   3. 알파벳 놀이 — Figma 768 × 1024 (node 173:4481 외 4장)
   =========================================================== */
#playScreen{
  background:linear-gradient(180deg,
    rgb(253,185,197) 0%,
    rgb(251,200,245) 27.885%,
    rgb(184,176,246) 71.154%,
    rgb(139,213,249) 100%);
  display:flex; flex-direction:column;
}
.play-stage{
  background:linear-gradient(180deg,
    rgb(253,185,197) 0%,
    rgb(251,200,245) 27.885%,
    rgb(184,176,246) 71.154%,
    rgb(139,213,249) 100%);
}
.play-inner{
  position:absolute; left:50%; top:calc(50% + 0.5px);
  transform:translate(-50%, -50%);
  width:656px;
  display:flex; flex-direction:column; align-items:center; gap:32px;
}
/* 자막이 들어갈 자리. 리포트의 .rpt-footer(92px)와 높이를 맞춥니다. */
.play-foot{ flex:0 0 auto; height:92px; }

/* ---------- 헤더 ---------- */
.ab-head{
  position:relative;
  width:100%; height:80px;
  display:flex; align-items:center; justify-content:space-between;
}
.ab-home{
  width:80px; height:80px; flex:0 0 auto;
  border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.18);
  display:grid; place-items:center;
  transition:background .2s, transform .2s;
}
.ab-home:hover{ background:rgba(255,255,255,.30); transform:scale(1.05); }
.ab-home img{ width:36px; height:39.7px; }

.ab-title{
  position:absolute; left:50%; top:16px; transform:translateX(-50%);
  font-size:40px; font-weight:900; color:#fff; white-space:nowrap;
  text-shadow:0 0 7px rgba(0,0,0,.14);
}

.ab-star{
  width:118px; flex:0 0 auto;
  display:flex; align-items:center; gap:4px;
  padding:8px 16px; border-radius:1000px;
  background:rgba(255,255,255,.24);
  transition:transform .3s ease;
}
.ab-star img{ width:48px; height:48px; }
.ab-star span{ font-size:32px; font-weight:500; color:#fff; }
.ab-star.pop{ animation:starPop .55s ease; }
@keyframes starPop{
  0%{ transform:scale(1); }
  40%{ transform:scale(1.16); }
  100%{ transform:scale(1); }
}

/* ---------- 글자 카드 ---------- */
.ab-card{
  width:100%; height:433px;
  border-radius:40px;
  background:linear-gradient(180deg, rgba(147,108,159,.26), rgba(58,120,177,.26));
  padding:40px 60px;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
}
.ab-card-inner{ width:540px; display:flex; flex-direction:column; align-items:center; }

.ab-row{
  width:100%; padding:0 10px;
  display:flex; align-items:center; justify-content:space-between;
}
.ab-letter{
  font-size:300px; font-weight:800; line-height:.7;
  background:linear-gradient(161.23deg, rgb(186,87,252) 26.364%, rgb(101,81,251) 82.417%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  white-space:nowrap;
  /* Figma의 흰 글로우. text-shadow를 쓰면 투명한 글자 속으로 비쳐서
     글자가 하얗게 뜨므로, 렌더된 글자 뒤에 깔리는 drop-shadow로 넣습니다. */
  filter:drop-shadow(0 1px 5px rgba(255,255,255,.95))
         drop-shadow(0 0 15px rgba(255,255,255,.75));
}
.ab-pic{
  width:281px; height:281px; flex:0 0 auto;
  position:relative; overflow:hidden;
}
.ab-pic-box{ position:absolute; overflow:hidden; }
.ab-pic-box img{ position:absolute; max-width:none; display:block; }

.ab-caption{
  width:100%; margin-top:0;
  font-size:60px; font-weight:600; text-align:center; color:#fff;
  text-shadow:0 4px 4px rgba(0,0,0,.25);
}
.ab-caption i{ font-style:normal; color:#ffdb00; }

/* 글자 전환 */
.ab-card.swap .ab-card-inner{ animation:cardSwap .5s ease; }
@keyframes cardSwap{
  0%  { opacity:0; transform:translateX(46px) scale(.96); }
  100%{ opacity:1; transform:none; }
}

/* ---------- 따라 말하기 카드 ---------- */
.ab-say{
  position:relative;
  width:100%;
  border-radius:40px;
  background:rgba(255,255,255,.15);
  padding:40px 56px;
  display:flex; flex-direction:column; align-items:center; gap:24px;
  transition:background .3s ease, box-shadow .3s ease;
}
.ab-say.listening{
  background:rgba(255,255,255,.26);
  box-shadow:0 0 0 3px rgba(255,255,255,.55), 0 0 44px rgba(255,255,255,.35);
}
.ab-say.correct{
  background:rgba(255,219,0,.28);
  box-shadow:0 0 0 3px rgba(255,219,0,.8), 0 0 54px rgba(255,219,0,.5);
}
.ab-say-title{
  width:100%; font-size:40px; font-weight:500; text-align:center; color:#fff;
  text-shadow:0 4px 4px rgba(0,0,0,.25);
}
.ab-say-row{
  display:flex; align-items:center; gap:32px;
}
.ab-speaker{ width:100px; height:100px; flex:0 0 auto; }
.ab-say.speaking .ab-speaker{ animation:spk .7s ease-in-out infinite; }
@keyframes spk{
  0%,100%{ transform:scale(1); }
  50%    { transform:scale(1.12); }
}
.ab-phrase{
  font-size:70px; font-weight:500; color:#fff; white-space:nowrap;
  text-shadow:0 4px 4px rgba(0,0,0,.25);
}

/* “따라 말해보세요” 안내 */
.ab-listen{
  position:absolute; left:50%; bottom:-2px; transform:translateX(-50%) translateY(8px);
  display:flex; align-items:center; gap:10px;
  font-size:22px; font-weight:600; color:#fff;
  text-shadow:0 2px 4px rgba(0,0,0,.25);
  opacity:0; transition:opacity .3s ease, transform .3s ease;
  pointer-events:none;
}
.ab-say.listening .ab-listen{ opacity:1; transform:translateX(-50%) translateY(0); }
.ab-listen i{
  width:12px; height:12px; border-radius:50%; background:#fff;
  box-shadow:0 0 12px #fff;
  animation:micPulse 1.2s ease-in-out infinite;
}

/* ---------- 하단 ---------- */
.ab-foot{
  width:100%; height:80px;
  display:flex; align-items:center; justify-content:space-between;
}
.ab-nav{
  width:80px; height:80px; flex:0 0 auto;
  border:0; background:none; padding:0; cursor:pointer;
  transition:transform .2s, opacity .2s;
}
.ab-nav img{ width:80px; height:80px; display:block; }
.ab-nav:hover{ transform:scale(1.06); }
.ab-nav:disabled{ opacity:.35; cursor:default; transform:none; }

.ab-dots{
  position:relative;
  width:240px; height:24px;
  display:flex; align-items:center; justify-content:space-between;
}
.ab-dots::before{
  content:""; position:absolute; left:12px; right:11px; top:10.2px;
  height:4.79px; background:#fff;
}
.ab-dots span{
  position:relative;
  width:24px; height:24px; border-radius:50%;
  background:#fff;
  transition:background .3s ease, transform .3s ease;
}
.ab-dots span.on{ background:#FFDB00; transform:scale(1.05); }

/* ===========================================================
   완료 화면 + 폭죽
   =========================================================== */
.ab-done{
  position:absolute; inset:0; z-index:50;
  display:grid; place-items:center;
  background:rgba(30,10,50,.45);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  opacity:0; visibility:hidden;
  transition:opacity .5s ease, visibility .5s;
}
.ab-done.show{ opacity:1; visibility:visible; }
#confetti{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

.done-card{
  position:relative;
  text-align:center; color:#fff;
  min-width:min(72%, 560px);
  padding:clamp(36px,4.6vw,60px) clamp(40px,5.5vw,80px);
  border-radius:44px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 24px 80px rgba(0,0,0,.28);
  transform:scale(.82);
  transition:transform .6s cubic-bezier(.2,1.5,.4,1);
}
.ab-done.show .done-card{ transform:scale(1); }

.done-badge{
  width:clamp(96px,12vw,140px); height:clamp(96px,12vw,140px);
  margin:0 auto clamp(14px,2vw,22px);
  border-radius:50%;
  background:rgba(255,255,255,.24);
  display:grid; place-items:center;
  animation:badgeSpin 1.1s cubic-bezier(.2,1.4,.4,1) .25s both;
}
.done-badge img{ width:62%; height:62%; }
@keyframes badgeSpin{
  0%  { transform:scale(0) rotate(-140deg); opacity:0; }
  100%{ transform:scale(1) rotate(0);       opacity:1; }
}

.done-card h2{
  font-size:clamp(36px,5vw,60px); font-weight:800; letter-spacing:-.03em;
  text-shadow:0 4px 12px rgba(0,0,0,.25);
}
.done-card p{
  margin-top:clamp(8px,1.2vw,14px);
  font-size:clamp(16px,2.1vw,26px); font-weight:500;
  color:rgba(255,255,255,.9);
}
.done-stars{
  margin-top:clamp(16px,2.2vw,28px);
  display:flex; justify-content:center; gap:clamp(6px,1vw,12px);
}
.done-stars img{
  width:clamp(34px,4.4vw,54px); height:clamp(34px,4.4vw,54px);
  opacity:0;
  animation:starIn .5s cubic-bezier(.2,1.5,.4,1) forwards;
}
@keyframes starIn{
  from{ opacity:0; transform:scale(.2) translateY(14px); }
  to  { opacity:1; transform:none; }
}

/* 놀이 화면의 자막 위치 */
#app.in-play .caption{
  max-width:min(72%, 740px);
  font-size:17px; padding:11px 24px;
  background:rgba(40,20,60,.34);
  border-color:rgba(255,255,255,.28);
}
#app.in-play .mic{ bottom:auto; top:16px; left:16px; }
#app.in-play .manual{ top:auto; bottom:18px; width:min(46%, 420px); }

/* ===========================================================
   4. 낭독 동화 — growwith_storybook.html 디자인을 그대로 옮김
      모든 규칙을 #storyScreen 안으로 한정해 다른 화면과 섞이지 않게 했습니다.
   =========================================================== */
#storyScreen{
  background:#050608;
  display:flex; flex-direction:column;
  --navy-deep:#0B1330; --gold:#F6C86B; --gold-soft:#FBE3AE;
  --cream:#FDF6E9;
}

#storyScreen .sb-device{
  position:absolute; inset:0;
  background:linear-gradient(180deg,#0E1636,#070A18 70%);
  overflow:hidden;
  display:flex; flex-direction:column;
  color:var(--cream);
  font-size:16px;              /* 스테이지가 항상 768px이므로 고정 */
  font-family:var(--font);
}

/* ---------- 상단 바 ---------- */
#storyScreen .topbar{
  flex-shrink:0; display:flex; align-items:center; justify-content:space-between;
  padding:1.5em 1.7em 0;
}
#storyScreen .iconbtn{
  width:2.6em; height:2.6em; border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:.2s; padding:0;
}
#storyScreen .iconbtn:hover{ background:rgba(255,255,255,.09); }
#storyScreen .iconbtn svg{
  width:1.05em; height:1.05em; stroke:var(--cream); fill:none;
  stroke-width:2; stroke-linecap:round;
}
#storyScreen .brandmini{
  display:flex; align-items:center; gap:.55em;
  font-size:.85em; color:rgba(253,246,233,.5); letter-spacing:.5px;
}
#storyScreen .orb{
  width:.85em; height:.85em; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FFF6DD,var(--gold) 55%,#C99A46);
  box-shadow:0 0 .7em rgba(246,200,107,.65);
  animation:sbBreathe 4s ease-in-out infinite; flex-shrink:0;
}
@keyframes sbBreathe{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.12)} }
#storyScreen .pagecount{
  font-size:.92em; color:rgba(253,246,233,.45); font-weight:700; letter-spacing:.5px;
}

/* ---------- 제목 ---------- */
#storyScreen .titleblock{ flex-shrink:0; text-align:center; padding:.6em 1.5em 0; }
#storyScreen .storytitle{
  font-weight:700; font-size:2.75em; line-height:1.12;
  color:var(--cream); letter-spacing:-.02em;
  text-shadow:0 2px 18px rgba(0,0,0,.35);
}
#storyScreen .storysub{
  margin-top:.55em; font-size:.95em; color:var(--gold-soft); font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase; opacity:.85;
  display:flex; align-items:center; justify-content:center; gap:.5em;
}
#storyScreen .wave{ display:flex; align-items:flex-end; gap:2px; height:.9em; }
#storyScreen .wave i{
  display:block; width:2.5px; border-radius:2px; background:var(--gold);
  animation:sbWv 1.1s ease-in-out infinite;
}
#storyScreen .wave i:nth-child(1){ height:35%; animation-delay:0s; }
#storyScreen .wave i:nth-child(2){ height:75%; animation-delay:.15s; }
#storyScreen .wave i:nth-child(3){ height:50%; animation-delay:.3s; }
#storyScreen .wave i:nth-child(4){ height:90%; animation-delay:.45s; }
@keyframes sbWv{ 0%,100%{transform:scaleY(.4)} 50%{transform:scaleY(1)} }
#storyScreen:not(.is-playing) .wave i{ animation-play-state:paused; }

/* ---------- 본문 ---------- */
#storyScreen .textwrap{ flex-shrink:0; padding:1.1em 1.7em 0; }
#storyScreen .textpanel{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.09);
  border-radius:1.6em; padding:1.4em 1.6em 1.25em;
  backdrop-filter:blur(6px);
  min-height:9.4em;
  display:flex; flex-direction:column; justify-content:center;
}
#storyScreen .storytext{
  font-size:1.62em; line-height:1.6; font-weight:600;
  color:rgba(253,246,233,.42); letter-spacing:.1px;
  transition:opacity .25s ease;
}
#storyScreen .storytext .w{
  display:inline-block;
  transition:color .35s cubic-bezier(.25,.7,.3,1),
             text-shadow .35s ease,
             transform .35s cubic-bezier(.25,.7,.3,1);
}
#storyScreen .storytext .w.said{ color:rgba(253,246,233,.92); }
#storyScreen .storytext .w.active{
  color:var(--gold); text-shadow:0 0 .6em rgba(246,200,107,.6);
  transform:translateY(-0.02em);
}
#storyScreen .progressbar{
  height:5px; border-radius:5px; background:rgba(255,255,255,.08);
  margin-top:1em; overflow:hidden;
}
#storyScreen .progressbar i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--gold),#fff2cf);
  border-radius:5px; transition:width .12s linear;
}

/* ---------- 그림 ---------- */
#storyScreen .scenewrap{ flex:1; position:relative; margin:1.1em 0 0; overflow:hidden; }
#storyScreen .picstack{ position:absolute; inset:0; width:100%; height:100%; }
#storyScreen .scene-page{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; transition:opacity .7s ease; overflow:hidden;
}
#storyScreen .scene-page.active{ opacity:1; }
#storyScreen .pageimg{
  width:100%; height:100%; object-fit:cover; object-position:center top;
  display:block; animation:sbKb 16s ease-in-out infinite alternate;
}
@keyframes sbKb{
  0%  { transform:scale(1.02) translate(0,0); }
  100%{ transform:scale(1.09) translate(-1%,-1%); }
}

#storyScreen .navarrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:2.7em; height:2.7em; border-radius:50%;
  background:rgba(8,12,24,.4); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:.2s; z-index:5; padding:0; line-height:0;
}
#storyScreen .navarrow:hover{ background:rgba(8,12,24,.6); }
#storyScreen .navarrow svg{
  display:block; width:1.1em; height:1.1em; margin:auto;
  stroke:#fff; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
}
#storyScreen .navarrow.prev{ left:1em; }
#storyScreen .navarrow.next{ right:1em; }

#storyScreen .bottombar{
  position:absolute; left:0; right:0; bottom:1.1em;
  display:flex; align-items:center; justify-content:center;
  gap:1.1em; z-index:5;
}
#storyScreen .dots{
  display:flex; gap:.5em; padding:.5em .8em; border-radius:2em;
  background:rgba(8,12,24,.42); backdrop-filter:blur(3px);
  border:1px solid rgba(255,255,255,.1);
}
#storyScreen .dot{
  width:.55em; height:.55em; border-radius:50%;
  background:rgba(255,255,255,.35); cursor:pointer; transition:.25s;
}
#storyScreen .dot.on{
  background:var(--gold); box-shadow:0 0 .6em rgba(246,200,107,.7);
  width:1.5em; border-radius:1em;
}

#storyScreen .playbtn{
  width:2.9em; height:2.9em; border-radius:50%;
  background:var(--gold); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 .3em 1em rgba(246,200,107,.35);
  flex-shrink:0; transition:transform .15s ease;
}
#storyScreen .playbtn:active{ transform:scale(.93); }
#storyScreen .playbtn svg{ width:1.15em; height:1.15em; fill:#1c1608; }
#storyScreen .playbtn .pauseicon{ display:none; }
#storyScreen.is-playing .playbtn .playicon{ display:none; }
#storyScreen.is-playing .playbtn .pauseicon{ display:block; }

/* 낭독 화면의 HUD 위치 */
#app.in-story .caption{
  max-width:min(70%, 720px);
  font-size:16px; padding:11px 22px;
  background:rgba(10,14,32,.6); border-color:rgba(255,255,255,.16);
}
#app.in-story .mic{ bottom:auto; top:16px; left:16px; }
#app.in-story .manual{ top:auto; bottom:20px; width:min(46%, 420px); }

/* ===========================================================
   HUD (자막 / 마이크 / 수동 입력)
   =========================================================== */
/* 자막 위치 규칙
   · 리포트 · 알파벳 · 동화 → 화면 맨 아래(홈 화면 버튼과 같은 자리).
     각 화면의 조작 영역 안에 들어가므로 콘텐츠를 가리지 않습니다.
   · 홈(얼굴) 화면 → 아래는 버튼이 차지하므로 자막은 위로 올립니다. */
.caption{
  position:absolute; left:50%; bottom:clamp(16px,2vw,26px);
  transform:translateX(-50%) translateY(10px);
  max-width:min(84%, 900px);
  padding:clamp(12px,1.5vw,18px) clamp(20px,2.4vw,32px);
  border-radius:999px;
  background:rgba(10,8,14,.42);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.16);
  color:#fff; text-align:center;
  font-size:clamp(15px,1.85vw,24px); font-weight:500; letter-spacing:-.02em;
  line-height:1.45;
  opacity:0; visibility:hidden;
  transition:opacity .35s ease, transform .35s ease, visibility .35s;
  pointer-events:none; z-index:40;
}
.caption.show{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }

/* 홈(얼굴) 화면에서만 자막을 위로. 아래쪽은 실행 버튼 자리입니다. */
#app:not(.in-report):not(.in-play):not(.in-story) .caption{
  top:clamp(16px,2vw,26px); bottom:auto;
  transform:translateX(-50%) translateY(-10px);
}
#app:not(.in-report):not(.in-play):not(.in-story) .caption.show{
  transform:translateX(-50%) translateY(0);
}

/* 리포트 화면 자막 (위치는 공통, 크기·색만 화면에 맞춤) */
#app.in-report .caption{
  max-width:min(70%, 720px);
  font-size:16px; padding:11px 22px;
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.12);
}
#app.in-report .mic{ bottom:auto; top:16px; left:16px; }
#app.in-report .manual{
  top:auto; bottom:22px;
  width:min(46%, 420px);
}
#app.in-report .manual input{ padding:10px 16px; font-size:14px; }
#app.in-report .manual button{ padding:10px 18px; font-size:14px; }

.mic{
  position:absolute; bottom:clamp(16px,2vw,26px); left:clamp(16px,2vw,26px);
  display:flex; align-items:center; gap:9px;
  padding:8px 15px 8px 12px; border-radius:999px;
  background:rgba(10,8,14,.34);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.88);
  font-size:clamp(11px,1.1vw,13px); font-weight:600; letter-spacing:-.01em;
  opacity:0; transition:opacity .4s ease; z-index:41;
}
.mic.show{ opacity:1; }
.mic-dot{
  width:8px; height:8px; border-radius:50%; background:#4ade80;
  box-shadow:0 0 10px #4ade80; animation:micPulse 1.5s ease-in-out infinite;
}
@keyframes micPulse{ 0%,100%{opacity:1;} 50%{opacity:.25;} }
.mic.off   .mic-dot{ background:#94a3b8; box-shadow:none; animation:none; }
.mic.error .mic-dot{ background:#f87171; box-shadow:0 0 10px #f87171; animation:none; }
.mic.speak .mic-dot{ background:#60a5fa; box-shadow:0 0 10px #60a5fa; }

/* ---------- 마이크 없이 쓰는 실행 버튼 ---------- */
.quick{
  position:absolute; left:50%; bottom:clamp(16px,2vw,26px);
  transform:translateX(-50%);
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
  z-index:43; max-width:92%;
}
.quick button{
  padding:13px 22px; border-radius:999px; cursor:pointer;
  border:1px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.18);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  color:#fff; font-family:inherit; font-weight:700;
  font-size:clamp(14px,1.5vw,17px); letter-spacing:-.02em;
  white-space:nowrap;
  transition:background .2s, transform .15s;
}
.quick button:hover{ background:rgba(255,255,255,.32); transform:translateY(-2px); }
.quick button:active{ transform:scale(.96); }


/* 리포트·놀이·동화 화면에서는 각 화면의 조작 UI를 쓰므로 숨깁니다 */
#app.in-report .quick,
#app.in-play .quick,
#app.in-story .quick{ display:none; }

.manual{
  position:absolute; top:clamp(14px,1.8vw,22px); left:50%;
  transform:translateX(-50%);
  display:flex; gap:8px; z-index:42;
  width:min(62%, 460px);
}
.manual input{
  flex:1; padding:12px 18px; border-radius:999px;
  border:1px solid rgba(255,255,255,.24);
  background:rgba(10,8,14,.42);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  color:#fff; font-family:inherit; font-size:15px; outline:none;
}
.manual input::placeholder{ color:rgba(255,255,255,.42); }
.manual button{
  padding:12px 22px; border-radius:999px; border:0; cursor:pointer;
  background:#fff; color:#111; font-family:inherit; font-weight:700; font-size:15px;
}

/* ===========================================================
   시작 오버레이
   =========================================================== */
.start-overlay{
  position:absolute; inset:0; z-index:60;
  display:grid; place-items:center;
  background:rgba(6,5,9,.55);
  backdrop-filter:blur(26px); -webkit-backdrop-filter:blur(26px);
  transition:opacity .6s ease, visibility .6s;
}
.start-overlay.hide{ opacity:0; visibility:hidden; pointer-events:none; }

.start-card{
  text-align:center; color:#fff; max-width:min(86%, 560px); padding:24px;
}
.start-title{
  font-size:clamp(34px,5vw,58px); font-weight:700; letter-spacing:-.04em;
  background:linear-gradient(100deg,#ff9a86,#f8544c 45%,#ff7fd0);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:18px;
}
.start-desc{
  font-size:clamp(15px,1.8vw,20px); line-height:1.7;
  color:rgba(255,255,255,.74); letter-spacing:-.02em; margin-bottom:30px;
}
.start-desc b{ color:#fff; font-weight:600; }
.start-btn{
  padding:16px 44px; border-radius:999px; border:0; cursor:pointer;
  background:#fff; color:#111;
  font-family:inherit; font-size:clamp(15px,1.7vw,19px); font-weight:700;
  letter-spacing:-.02em;
  transition:transform .2s ease;
}
.start-btn:hover{ transform:scale(1.04); }
.start-note{
  margin-top:22px; font-size:clamp(12px,1.25vw,14px); line-height:1.6;
  color:rgba(255,220,150,.78); letter-spacing:-.01em;
}

/* ===========================================================
   좁은 화면 보정
   리포트는 768×1024 스테이지를 통째로 축소하므로 별도 대응이 필요 없습니다.
   =========================================================== */
@media (max-height:620px){
  .rpt-footer{ height:72px; }
  #app.in-report .caption{ font-size:14px; }
}