/* 바다거북 스프 호러 — DESIGN_BRIEF.md (스며드는 불안 · slow · 밤 바닷가 식당과 35mm 필름)
   시안 design/mockup_v2.html 에서 옮겼다. 박스·알약·대문자 라벨·번호 없음. 움직이는 건 한 화면에 하나. */
:root{
  color-scheme:dark;
  --night:#0c1012; --deep:#070a0b;
  --salt:#d8d3c6; --salt-dim:#8b938c; --salt-faint:#5d6660;
  --lamp:#d9c27c; --oxblood:#b4675c; --print:#cfc7b4;
  --rule:rgba(216,211,198,.13);
  --f-display:"Song Myung","Noto Serif KR",serif;
  --f-body:"Noto Serif KR","Apple SD Gothic Neo",serif;
  --f-ui:"IBM Plex Sans KR","Apple SD Gothic Neo",system-ui,sans-serif;
  --slow:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html,body{background:var(--night);color:var(--salt);margin:0}
body{font-family:var(--f-ui);font-size:15px;line-height:1.6;word-break:keep-all;overflow-wrap:break-word;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-bottom:48px}
body::after{content:"";position:fixed;inset:0;pointer-events:none;background-image:var(--grain);opacity:.09;mix-blend-mode:screen;z-index:50}
.wrap{max-width:1080px;margin:0 auto}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
button:disabled{cursor:default;opacity:.45}
:focus-visible{outline:1px solid var(--lamp);outline-offset:4px}
.tl{text-decoration:underline;text-decoration-color:var(--salt-faint);text-underline-offset:5px;transition:text-decoration-color .6s var(--slow),color .6s var(--slow)}
.tl:hover{text-decoration-color:var(--salt);color:var(--salt)}
[hidden]{display:none!important}

.top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-block:22px 18px}
.brand{font-family:var(--f-display);font-size:19px}
.lang{display:flex;gap:14px;font-size:14px;color:var(--salt-faint)}
.lang button{min-height:32px}
.lang button[aria-pressed="true"]{color:var(--salt);text-decoration:underline;text-underline-offset:5px}

/* 로비 */
.feature{position:relative;display:block;width:100%;text-align:left;--mx:62%;--my:40%}
.feature img{display:block;width:100%;aspect-ratio:21/9;object-fit:cover;object-position:50% 72%;filter:grayscale(.5) brightness(.38) contrast(1.08);transition:filter 2.4s var(--slow)}
.feature::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(220px circle at var(--mx) var(--my),rgba(217,194,124,.18),transparent 70%);opacity:0;transition:opacity 1.2s var(--slow)}
.feature:hover::before,.feature:focus-visible::before{opacity:1}
.feature:hover img{filter:grayscale(.35) brightness(.5) contrast(1.05)}
.hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:32px;padding-block:28px 8px;align-items:end}
.hero h1{font-family:var(--f-display);font-weight:400;font-size:clamp(38px,6.4vw,70px);line-height:1.08;margin:0;text-wrap:balance}
.hero p{margin:0;color:var(--salt-dim);font-family:var(--f-body);max-width:40ch;line-height:1.85}
.menu{margin-top:48px}
.menu h2{font-family:var(--f-display);font-weight:400;font-size:26px;margin:0 0 6px}
.menu .sub{color:var(--salt-faint);font-size:14px;margin:0 0 18px}
.menu ol{list-style:none;margin:0;padding:0}
.dish{display:grid;grid-template-columns:72px minmax(0,auto) minmax(24px,1fr) auto;gap:16px;align-items:center;width:100%;text-align:left;padding-block:12px}
.dish img{width:72px;height:54px;object-fit:cover;filter:grayscale(.6) brightness(.45);transition:filter 1.2s var(--slow)}
.dish:hover img,.dish:focus-visible img{filter:grayscale(.3) brightness(.7)}
.dish .nm{font-family:var(--f-display);font-size:21px;line-height:1.3;min-width:0}
.dish .nm small{display:block;font-family:var(--f-body);font-size:13px;color:var(--salt-faint);line-height:1.5}
.dish .dots{border-bottom:1px dotted var(--salt-faint);height:1px;align-self:center;transform:translateY(4px)}
.dish .st{font-size:13px;color:var(--salt-faint);white-space:nowrap}
.dish .st.done{color:var(--oxblood)}
.dish .st.mid{color:var(--lamp)}

/* 플레이 */
.play{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:0 40px;padding-top:6px}
.back{font-size:14px;color:var(--salt-dim);margin-bottom:14px;min-height:32px}
.scene img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;filter:grayscale(.35) brightness(.62)}
.scene h2{font-family:var(--f-display);font-weight:400;font-size:34px;margin:22px 0 10px}
.surface{font-family:var(--f-body);font-size:17px;line-height:1.9;margin:0;max-width:60ch}
.strip-h{display:flex;justify-content:space-between;align-items:baseline;margin:34px 0 10px;font-size:14px;color:var(--salt-dim)}
.strip-h b{font-weight:400;color:var(--salt);font-variant-numeric:tabular-nums}
.strip{display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x proximity;padding:16px 8px;background-color:var(--deep);
  background-image:repeating-linear-gradient(90deg,transparent 0 9px,#2a2f2c 9px 17px),repeating-linear-gradient(90deg,transparent 0 9px,#2a2f2c 9px 17px);
  background-size:100% 6px;background-position:0 4px,0 calc(100% - 4px);background-repeat:repeat-x}
.frame{flex:1 0 96px;aspect-ratio:3/4;scroll-snap-align:start;position:relative;overflow:hidden;background:#151311}
.frame .neg{position:absolute;inset:0;background-size:cover;filter:invert(1) grayscale(1) sepia(.6) brightness(.32) contrast(1.2);opacity:.85}
.frame .print{position:absolute;inset:0;background:var(--print);color:#1c1b17;padding:12px 10px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px}
.frame .print b{font-family:var(--f-display);font-weight:400;font-size:20px;line-height:1.15}
.frame .print span{font-family:var(--f-body);font-size:12.5px;line-height:1.5}

.talk{border-left:1px solid var(--rule);padding-left:32px;display:flex;flex-direction:column;min-width:0}
.log{list-style:none;margin:0;padding:0 0 8px;display:flex;flex-direction:column;gap:18px;max-height:460px;overflow:auto;min-height:120px}
.log li{display:flex;flex-direction:column;gap:2px}
.log .q{font-family:var(--f-body);font-size:16px}
.log .a{font-family:var(--f-display);font-size:19px}
.log .say{font-family:var(--f-body);font-size:14.5px;color:var(--salt-dim);line-height:1.7}
.a.yes{color:var(--lamp)} .a.no{color:#a9bcc2} .a.partly{color:#c9b98f} .a.irrelevant,.a.invalid,.a.wait{color:var(--salt-faint)}
.hint{color:var(--salt-faint);font-family:var(--f-body);font-size:15px;margin:0}
.ask{margin-top:18px;display:flex;gap:14px;align-items:flex-end}
.ask label{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--salt-dim)}
.ask input,.solve textarea{font:inherit;font-family:var(--f-body);font-size:17px;background:none;color:var(--salt);border:0;border-bottom:1px solid var(--salt-faint);padding:8px 0;border-radius:0;min-width:0;width:100%}
.ask input:focus,.solve textarea:focus{outline:none;border-bottom-color:var(--lamp)}
.ask .go{font-size:16px;padding-bottom:9px;white-space:nowrap;min-height:40px}
.tips{margin:22px 0 0;font-size:13px;color:var(--salt-faint);line-height:1.8}
.ex{margin-top:18px}
.ex p{margin:0 0 6px;font-size:13px;color:var(--salt-faint)}
.ex ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.ex button{font-family:var(--f-body);font-size:15px;color:var(--salt-dim);text-align:left;min-height:32px}
.acts{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px 26px;align-items:baseline}
.acts .solve-b{color:var(--lamp);font-size:15px;min-height:36px}
.acts .giveup{color:var(--salt-faint);font-size:14px;min-height:36px}
.solve{margin-top:22px;display:flex;flex-direction:column;gap:10px}
.solve label{font-size:13px;color:var(--salt-dim)}
.solve textarea{resize:vertical;min-height:110px;line-height:1.8}
.solve .row{display:flex;gap:22px;align-items:baseline}
.solve .row button{min-height:36px}
.note{margin:14px 0 0;font-size:13.5px;color:var(--salt-faint);font-family:var(--f-body)}

.truth{margin-top:56px;max-width:66ch}
.truth h3{font-family:var(--f-display);font-weight:400;font-size:28px;color:var(--oxblood);margin:0 0 14px}
.truth p{font-family:var(--f-body);font-size:18px;line-height:1.95;margin:0}
.ending{margin-top:40px;max-width:640px}
.ending img{display:block;width:100%;aspect-ratio:1;object-fit:cover;filter:grayscale(.25) brightness(.8)}
.ending p{margin:12px 0 0;font-size:14px;color:var(--salt-dim);font-family:var(--f-body)}
.ending .dark{aspect-ratio:1;background:var(--deep)}

footer{margin-top:72px;padding-top:18px;border-top:1px solid var(--rule);display:grid;gap:10px;font-size:13px;color:var(--salt-faint)}
footer p{margin:0}
footer a{color:var(--salt-dim)}

@media (max-width:860px){
  .hero{grid-template-columns:minmax(0,1fr);gap:14px}
  .play{grid-template-columns:minmax(0,1fr)}
  .talk{border-left:0;padding-left:0;border-top:1px solid var(--rule);padding-top:26px;margin-top:34px}
  .feature img{aspect-ratio:4/3}
  .log{max-height:none}
}
@media (max-width:640px){
  .dish{grid-template-columns:56px minmax(0,1fr) auto;gap:12px}
  .dish img{width:56px;height:44px}
  .dish .dots{display:none}
  .frame{flex:0 0 132px}
  .scene h2{font-size:28px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}