:root{
    color-scheme:light;
    --bg:#FFFFFF; --alt:#F4F5F7; --ink:#15171C; --ink70:#4A4F58; --ink45:#868C96;
    --line:#E5E8ED; --acc:#F0422A; --accDp:#C2301B; --tint:#FFF2EF; --chipHover:#FAFBFC;
  }
  html,body{height:100%}
  body{margin:0;background:var(--bg);color:var(--ink);font-family:'Noto Sans KR',-apple-system,'Apple SD Gothic Neo',sans-serif;font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
  .app{max-width:430px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;padding-inline:20px;padding-block:0 24px;box-sizing:border-box}
  .top{position:sticky;top:0;z-index:5;background:var(--bg);margin-inline:-20px;padding-inline:20px;padding-top:env(safe-area-inset-top,0px);border-bottom:1px solid var(--line);box-shadow:0 6px 18px -12px rgba(0,0,0,.25)}
  .thread{display:flex;flex-direction:column;gap:14px;padding-block:20px 12px;flex:1}
  .row{display:flex;flex-direction:column;gap:6px;max-width:88%}
  .row.me{align-self:flex-end;align-items:flex-end}
  .who{font-size:11px;color:var(--ink45);padding-inline:4px}
  .bubble{padding:13px 15px;border-radius:16px;font-size:15px;line-height:1.65}
  .row.bot .bubble{background:var(--alt);color:var(--ink);border-bottom-left-radius:5px}
  .row.me .bubble{background:var(--acc);color:#fff;border-bottom-right-radius:5px;font-weight:500}
  .bubble b{font-weight:700}
  .chips{display:flex;flex-direction:column;gap:8px;padding-block:4px 6px}
  .chip{appearance:none;text-align:left;background:var(--bg);color:var(--ink);border:1.5px solid var(--line);border-radius:14px;padding:13px 15px;font:inherit;font-size:14.5px;line-height:1.5;cursor:pointer;display:flex;gap:10px;align-items:flex-start;transition:border-color .12s,background .12s,transform .06s}
  .chip .k{font-weight:900;color:var(--acc);flex:none;min-width:2.6em}
  .chip:hover{background:var(--chipHover);border-color:var(--ink45)}
  .chip:active{transform:scale(.99)}
  .chip:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
  .chips[data-done] .chip{opacity:.35;pointer-events:none}
  .result{display:flex;flex-direction:column;gap:12px;padding:18px;border-radius:16px;background:var(--tint);border:1px solid var(--line)}
  .result .quote{font-weight:900;font-size:17px;letter-spacing:-.01em;line-height:1.4;text-wrap:balance}
  .result .lead{color:var(--ink70);font-size:14px}
  .result .go{display:block;text-align:center;text-decoration:none;appearance:none;border:0;background:var(--acc);color:#fff;font:inherit;font-weight:900;font-size:16px;padding:16px;border-radius:10px;cursor:pointer}
  .result .go:hover{background:var(--accDp)}
  .result .go:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  .result .dest{font-size:12px;color:var(--ink45);word-break:break-all}
  .typing{display:inline-flex;gap:4px;align-items:center;height:14px}
  .typing i{width:6px;height:6px;border-radius:50%;background:var(--ink45);animation:blink 1s infinite}
  .typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
  @keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
  .restart{appearance:none;background:none;border:0;color:var(--ink45);font:inherit;font-size:12px;cursor:pointer;text-decoration:underline}
  .nameform{display:flex;gap:8px;padding-block:4px 6px;align-items:stretch}
  .nameform input{flex:1;min-width:0;font:inherit;font-size:15px;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink)}
  .nameform input:focus{outline:2px solid var(--acc);outline-offset:1px;border-color:var(--acc)}
  .nameform button{font:inherit;font-weight:900;font-size:14px;padding:0 16px;border:0;border-radius:12px;background:var(--acc);color:#fff;cursor:pointer}
  .nameform .skip{background:none;color:var(--ink45);font-weight:500;padding:0 6px;text-decoration:underline}
  .nameform[data-done]{opacity:.35;pointer-events:none}
  /* ── 루리 씬 (배경 + 루리 컷아웃 레이어) ──
     body[data-mood]: idle(대기) / wait(입력 대기) / think(생각 중) / happy(찾았어요) */
  /* 장면 높이 줄이기: 폭은 화면 끝까지, 원본 비율(1024×650) 레이어는 그대로 두고 위 --scene-cut-top 만큼·아래 나머지를 살짝 잘라 보여줌.
     --scene-h = 1024 폭 기준 보이는 높이(원본 650). 예: 580이면 총 11%를 잘라내고, cut-top 5%면 위 5%·아래 6% */
  .scene-crop{--scene-h:580;--scene-cut-top:5%;position:relative;overflow:hidden;margin-inline:-20px;width:calc(100% + 40px);aspect-ratio:1024/var(--scene-h);background:#f3e6d6}
  .scene{position:absolute;left:0;top:0;width:100%;aspect-ratio:1024/650;overflow:hidden;transform:translateY(calc(-1 * var(--scene-cut-top)));background:#f3e6d6}
  .scene .cam{position:absolute;inset:0;animation:cam 26s ease-in-out infinite alternate;transform-origin:50% 60%}
  .scene .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  .scene .light{position:absolute;inset:0;background:radial-gradient(60% 70% at 8% 10%,rgba(255,220,150,.45),rgba(255,220,150,0) 70%);mix-blend-mode:soft-light;animation:light 7s ease-in-out infinite alternate;pointer-events:none}
  .scene .ruri-fit{position:absolute;inset:0}
  /* 루리 레이어: 원본 픽셀 위치 기준 (x 364/1024, y 61/650, w 476/1024) */
  .scene .ruri{position:absolute;left:35.74%;top:9.69%;width:46.09%;transform-origin:50% 92%;animation:breathe 4.2s ease-in-out infinite;will-change:transform}
  .scene .ruri img{width:100%;height:auto;display:block}
  .scene .ruri .blink{position:absolute;left:24.79%;top:51.92%;width:9.32%;opacity:0;transition:opacity .06s}
  .scene .ruri.blinking .blink{opacity:1}
  body[data-mood=happy] .scene .ruri{animation:breathe 4.2s ease-in-out infinite}
  .scene .sparks{position:absolute;inset:0;pointer-events:none;overflow:visible}
  .scene .spark{position:absolute;height:auto;fill:url(#sparkGrad);filter:drop-shadow(0 0 2px rgba(255,236,150,1)) drop-shadow(0 0 9px rgba(255,180,40,.75));opacity:0;transform:scale(.2) rotate(0deg);transform-origin:50% 50%;pointer-events:none}
  body[data-mood=happy] .scene .spark{animation-name:twinkle;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
  /* 표정 전환은 페이드 없이 즉시 교체 (교차 페이드 시 입 두 개가 겹쳐 보임)
     입력 대기 중 표정: 피그마 type03 infj (두 눈 뜨고 듣는 얼굴). 원래 얼굴은 털 패치로 덮음 */
  .scene .say{position:absolute;left:5%;top:14%;max-width:32%;background:rgba(255,255,255,.92);color:#3A3128;font-size:12.5px;line-height:1.45;padding:8px 11px;border-radius:14px;border-bottom-right-radius:3px;box-shadow:0 4px 14px rgba(80,50,20,.15);opacity:0;transform:translateY(4px);transition:opacity .5s,transform .5s;pointer-events:none}
  .scene .say.on{opacity:1;transform:translateY(0)}
  .scene .say::after{content:"";position:absolute;right:-7px;bottom:8px;border:6px solid transparent;border-left-color:rgba(255,255,255,.92);border-bottom:0}
  .scene .dots{position:absolute;left:-1000px}
  @keyframes cam{0%{transform:scale(1) translate(0,0)}100%{transform:scale(1.045) translate(-0.6%,0.4%)}}
  @keyframes light{0%{opacity:.55}100%{opacity:1}}
  @keyframes breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(0.994,1.014) translateY(-1.5px)}}
  @keyframes twinkle{0%{opacity:0;transform:scale(.2) rotate(-20deg)}35%{opacity:1;transform:scale(1) rotate(0deg)}65%{opacity:.85;transform:scale(.8) rotate(12deg)}100%{opacity:0;transform:scale(.15) rotate(30deg)}}
  @media (prefers-reduced-motion:reduce){.scene .cam,.scene .light,.scene .ruri,body[data-mood] .scene .ruri,.scene .spark{animation:none}}
  @media (prefers-reduced-motion:reduce){.chip{transition:none}.typing i{animation:none;opacity:.6}}

  /* 얼굴 스프라이트: 기본/대기/말하기 3프레임을 한 장에 → 배경 위치만 바꿔 한 번에 교체 (입이 겹쳐 보이지 않음) */
  .scene .ruri .face{position:absolute;left:23.3%;top:51.1%;width:25.4%;aspect-ratio:200/144;background:url(/assets/ruri-face.webp) 0 0/100% 300% no-repeat;pointer-events:none}
  body[data-mood=wait] .scene .ruri .face{background-position:0 50%}
  .scene .ruri.talking .face{background-position:0 100%}

  html[lang="ja"] body{font-family:'Noto Sans JP','Noto Sans KR',-apple-system,sans-serif}