/* 《미현상》 — HUD·패널. 글자·버튼은 전부 DOM(3D 는 캔버스만). 터치 타깃 ≥ 44px · 100dvh · safe-area (I-7). */ :root{ --ink:#e9e0cc; --ink-dim:#b3a88f; --ink-faint:#7d7460; --paper:#efe6d2; --bg:#0a0908; --panel:#16130f; --panel-2:#1f1a14; --line:#3a3226; --accent:#c9a227; --accent-2:#a8331f; --ok:#5a9e5f; --bad:#b3452f; --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px); --safe-l:env(safe-area-inset-left,0px); --safe-r:env(safe-area-inset-right,0px); --fs: clamp(14px, 1.6vw, 17px); --font: system-ui, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', 'Nanum Gothic', sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, 'DejaVu Sans Mono', monospace; } *{box-sizing:border-box} html,body{margin:0;padding:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink); font-family:var(--font);font-size:var(--fs);-webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent;overscroll-behavior:none} body{height:100dvh} #view{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none} #ui{position:fixed;inset:0;pointer-events:none;z-index:10} #ui > *{pointer-events:auto} /* 🔴 화면 전체를 덮는 층(HUD)은 «통과»여야 한다. #ui > * 는 id 특이성이라 .hud{pointer-events:none} 을 이긴다 — 그래서 투명한 HUD 가 캔버스 위 모든 터치·클릭을 삼켰고, 모바일에서 이동·시점이 통째로 죽었다(실측 2026-09-14). 헤드리스 검수는 캔버스에 «직접» 이벤트를 쏘느라 히트테스트를 건너뛰어 초록이었다. */ /* 🔴 같은 함정을 두 번째로 밟았다(2026-09-17). 구역 표시(.zoneguide)도 inset:0 짜리 전면 층인데 제 규칙에 pointer-events:none 을 적어 두고도 #ui > * 에 져서 **걷기·둘러보기가 둘 다 죽었다** — 세로·가로 모두. 그때 게이트는 컨트롤러 API 를 직접 불러 초록이었다(히트테스트 건너뜀). 🔵 «전면을 덮되 통과해야 하는 층»은 전부 여기 적는다. 새 층을 #ui 바로 아래 붙일 거면 이 줄에 같이 적거나, 덮지 않도록 크기를 줄여라. mobile-guide 게이트가 실제 히트테스트로 잰다. */ /* 🔴 세 번째(2026-10-22, 선행쌤 링크 실측): .gbj-layer(주스 반응 — host:#ui) 도 같은 함정을 빠졌다 — 자기 규칙에 pointer-events:none 을 적어 뒀는데도 #ui > * 에 져서 타이틀 화면의 링크·단추를 전부 삼켰다(elementFromPoint 가 투명한 gbj-layer 를 맞혔다). */ #ui > .hud, #ui > .zoneguide, #ui > .gbj-layer{pointer-events:none} button{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer} img{max-width:100%} /* ───────── 이동 스틱(터치) ───────── */ .stick{position:absolute;width:0;height:0;z-index:2} /* 🔴 HUD 때와 «똑같은» 특이성 함정 — .hud > * 가 id 없이도 클래스 수에서 이긴다. 스틱은 장식이다: 손가락 밑에 132px 원이 입력을 가로채면 이동이 또 죽는다(실측 확인). */ #ui .hud .stick, #ui .hud .stick *{pointer-events:none} .stick[hidden]{display:none} .stick-base{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:132px;height:132px;border-radius:50%;border:2px solid rgba(233,224,204,.28); background:radial-gradient(circle,rgba(233,224,204,.10),rgba(10,9,8,.18) 70%)} .stick-knob{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:56px;height:56px;border-radius:50%;border:2px solid rgba(201,162,39,.75); background:rgba(201,162,39,.22)} /* ───────── HUD ───────── */ .hud{position:absolute;inset:0;pointer-events:none} .hud > *{pointer-events:auto} .hud[hidden]{display:none} .crosshair{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:.5rem} .ch-dot{display:block;width:10px;height:10px;border-radius:50%; border:2px solid rgba(233,224,204,.5);transition:all .12s} .crosshair[data-kind="eye"] .ch-dot{width:20px;height:20px;border-color:var(--accent);border-radius:50% 4px} .crosshair[data-kind="hand"] .ch-dot{width:16px;height:16px;border-color:var(--accent);border-radius:3px; box-shadow:0 0 0 4px rgba(201,162,39,.16)} .crosshair[data-kind="lock"] .ch-dot{width:16px;height:20px;border-color:var(--accent-2);border-radius:8px 8px 3px 3px} .crosshair[data-kind="open"] .ch-dot{border-color:var(--ok);opacity:.6} .ch-label{font-size:.82rem;color:var(--ink-dim);text-shadow:0 1px 3px #000; background:rgba(10,9,8,.55);padding:.15rem .5rem;border-radius:4px;white-space:nowrap;max-width:60vw; overflow:hidden;text-overflow:ellipsis} .crosshair[data-kind="none"] .ch-label{opacity:0} .timer{position:absolute;top:calc(.9rem + var(--safe-t));right:calc(1rem + var(--safe-r)); text-align:right;background:rgba(10,9,8,.55);padding:.5rem .8rem;border-radius:8px; border:1px solid var(--line);backdrop-filter:blur(3px)} .t-val{display:block;font-family:var(--mono);font-size:1.7rem;font-weight:700;letter-spacing:.04em;line-height:1} .t-sub{display:block;font-size:.72rem;color:var(--ink-faint);margin-top:.15rem} .timer[data-level="notice"] .t-val{color:#e0c15a} .timer[data-level="warn"] .t-val{color:#e09a4a} .timer[data-level="critical"] .t-val{color:#e2593f;animation:pulse 1s infinite} @keyframes pulse{50%{opacity:.45}} .place{position:absolute;top:calc(.9rem + var(--safe-t));left:calc(1rem + var(--safe-l)); font-size:.95rem;color:var(--ink-dim);background:rgba(10,9,8,.55);padding:.4rem .75rem; border-radius:8px;border:1px solid var(--line)} .caption{position:absolute;left:50%;bottom:calc(8.5rem + var(--safe-b));transform:translateX(-50%); max-width:min(90vw,640px);text-align:center;background:rgba(8,7,6,.86);color:var(--paper); padding:.6rem 1rem;border-radius:8px;border:1px solid var(--line);font-size:1rem;line-height:1.5} .toast{position:absolute;left:50%;bottom:calc(6rem + var(--safe-b));transform:translateX(-50%); background:rgba(8,7,6,.82);padding:.5rem .9rem;border-radius:20px;border:1px solid var(--line); color:var(--ink);font-size:.92rem;max-width:88vw;text-align:center} .inventory{position:absolute;left:50%;bottom:calc(.7rem + var(--safe-b));transform:translateX(-50%); display:flex;gap:.4rem;padding:.35rem;background:rgba(10,9,8,.5);border-radius:12px; border:1px solid var(--line);max-width:calc(100vw - 2rem);overflow-x:auto;scrollbar-width:none} .inventory::-webkit-scrollbar{display:none} .slot{position:relative;width:60px;height:60px;min-width:60px;border-radius:8px; border:1px solid var(--line);background:rgba(30,26,20,.7);display:flex;flex-direction:column; align-items:center;justify-content:center;gap:2px;padding:.2rem;transition:all .12s} .slot[data-filled="1"]{background:rgba(60,48,30,.85);border-color:#5a4a2c} .slot[data-selected="1"]{border-color:var(--accent);box-shadow:0 0 0 2px rgba(201,162,39,.3)} .slot-num{position:absolute;top:2px;left:5px;font-size:.62rem;color:var(--ink-faint);font-family:var(--mono)} .slot-name{font-size:.6rem;line-height:1.15;text-align:center;color:var(--ink-dim); overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;word-break:keep-all} .buttonbar{position:absolute;left:calc(1rem + var(--safe-l));bottom:calc(1rem + var(--safe-b)); display:flex;flex-direction:column;gap:.5rem} .btn{min-height:44px;min-width:44px;padding:.55rem 1rem;border-radius:10px;border:1px solid var(--line); background:rgba(31,26,20,.88);color:var(--ink);display:inline-flex;align-items:center; justify-content:center;gap:.45rem;transition:all .12s;word-break:keep-all;line-height:1.35} .btn:hover:not(:disabled){background:rgba(50,42,30,.95);border-color:#5a4a2c} .btn:active:not(:disabled){transform:scale(.97)} .btn:disabled{opacity:.42;cursor:default} .btn .ic{font-size:1.05rem} .btn .lb{font-size:.85rem} .btn.primary{background:linear-gradient(180deg,#6b5420,#4a3a16);border-color:var(--accent);color:#f6ecd2} .btn.wide{width:100%} a.btn[data-gb="site-link"]{text-decoration:none;font-size:.78rem;color:var(--ink-dim);background:transparent;border-color:var(--line)} .btn-hint[data-pulse="1"]{animation:hintpulse 1.4s infinite;border-color:var(--accent)} @keyframes hintpulse{50%{box-shadow:0 0 0 6px rgba(201,162,39,.18)}} .btn-act{position:absolute;right:calc(1.1rem + var(--safe-r));bottom:calc(5.6rem + var(--safe-b)); width:74px;height:74px;border-radius:50%;font-size:1.7rem;display:none} /* 🔴 터치 기기에서는 인벤토리 바가 화면 아래를 먹는다 — 버튼바를 그 «위»로 올린다. 안 올리면 힌트·일지·메뉴가 1·2번 칸을 덮어 둘 다 못 누른다(사용자 실측 2026-09-14). */ @media (pointer:coarse){ .btn-act{display:inline-flex} .buttonbar{gap:.45rem;bottom:calc(6.4rem + var(--safe-b))} } /* ───────── 모달 ───────── */ .modal{position:fixed;inset:0;display:grid;place-items:center;padding:1rem; background:rgba(6,5,4,.78);backdrop-filter:blur(6px);z-index:30;overflow-y:auto} .modal[hidden]{display:none} .modal-body{width:min(94vw,760px);max-height:calc(100dvh - 2rem);overflow-y:auto; background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:1.2rem; box-shadow:0 24px 70px rgba(0,0,0,.6);padding-bottom:calc(1.2rem + var(--safe-b))} .insp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:.8rem} .insp-head h2{margin:0;font-size:1.25rem;font-weight:600;word-break:keep-all} .x{width:44px;height:44px;min-width:44px;border-radius:8px;border:1px solid var(--line); background:rgba(40,34,26,.8);font-size:1.1rem} .insp-note{margin:.5rem 0;color:var(--ink-dim);font-size:.92rem;line-height:1.65;word-break:keep-all} .insp-note.tiny{font-size:.8rem;color:var(--ink-faint);font-family:var(--mono)} .insp-stage{display:grid;place-items:center;background:#0d0b09;border-radius:10px; padding:1rem;overflow:hidden;touch-action:none;min-height:200px;border:1px solid #241f18} .insp-img{max-height:min(56dvh,520px);max-width:100%;transition:transform .06s linear; filter:drop-shadow(0 10px 26px rgba(0,0,0,.5));user-select:none;-webkit-user-drag:none} .insp-actions{display:flex;flex-direction:column;gap:.5rem;margin-top:.8rem} /* 자물쇠 */ .lock-display{display:flex;gap:.5rem;justify-content:center;margin:1rem 0} .lock-display .cell{width:clamp(42px,11vw,58px);height:clamp(54px,14vw,72px);display:grid;place-items:center; border-radius:8px;border:2px solid var(--line);background:#0e0c0a;font-family:var(--mono); font-size:clamp(1.5rem,5vw,2.1rem);color:var(--ink-faint)} .lock-display .cell.on{border-color:var(--accent);color:var(--paper);background:#1a1510} .lock-display.shake{animation:shake .34s} @keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}40%{transform:translateX(9px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}} .lock-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;max-width:340px;margin:0 auto} .lock-pad.dirpad{max-width:300px} .key{min-height:52px;border-radius:10px;border:1px solid var(--line);background:rgba(38,32,24,.9); font-size:1.25rem;font-family:var(--mono);display:grid;place-items:center} .key:active{background:rgba(62,52,38,.95);transform:scale(.96)} .key.small{min-height:44px;font-size:1rem} .key.wide{grid-column:span 3} .lock-pad:not(.dirpad):has(.key.small){grid-template-columns:repeat(7,1fr);max-width:460px} .lock-status{text-align:center;margin:.9rem 0;min-height:1.5rem;font-size:.95rem;color:var(--ink-dim)} .lock-status[data-state="ok"]{color:var(--ok)} .lock-status[data-state="bad"]{color:var(--bad)} .lock-status[data-state="trying"]{color:var(--accent)} /* 일지 */ .jgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.7rem;margin-top:.6rem} .jcard{padding:.4rem;border-radius:10px;border:1px solid var(--line);background:rgba(28,24,18,.8); display:flex;flex-direction:column;gap:.4rem;min-height:150px} .jcard img{width:100%;height:104px;object-fit:cover;border-radius:6px;background:#0d0b09} .jtext{font-size:.78rem;color:var(--ink-dim);padding:.5rem;background:#0d0b09;border-radius:6px; min-height:104px;display:grid;place-items:center;text-align:center;font-family:var(--mono)} .jtext.big{font-size:1.6rem;min-height:200px} .jtitle{font-size:.72rem;color:var(--ink-dim);line-height:1.3;word-break:keep-all} .jbig{position:fixed;inset:0;background:rgba(5,4,3,.94);display:grid;place-items:center;padding:1.5rem;z-index:40} .jbig img{max-width:94vw;max-height:88dvh;object-fit:contain} /* 힌트 */ .hlist{display:flex;flex-direction:column;gap:.5rem;margin-top:.6rem} .hrow{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:52px; padding:.6rem 1rem;border-radius:10px;border:1px solid var(--line);background:rgba(30,26,20,.85);text-align:left} .hrow:disabled{opacity:.45} .hname{font-size:.98rem;word-break:keep-all} .htier{font-size:.78rem;color:var(--ink-faint);font-family:var(--mono);white-space:nowrap} .quizprog{font-family:var(--mono);color:var(--accent);font-size:.85rem;margin:.2rem 0} .quizq{font-size:1.12rem;line-height:1.6;margin:.7rem 0 1rem;word-break:keep-all} .quizopts{display:flex;flex-direction:column;gap:.5rem} .quizopt{min-height:52px;padding:.6rem 1rem;border-radius:10px;border:1px solid var(--line); background:rgba(30,26,20,.85);text-align:left;line-height:1.5;word-break:keep-all} .quizopt:hover:not(:disabled){background:rgba(48,40,28,.95)} .quizopt[data-state="ok"]{border-color:var(--ok);background:rgba(40,80,44,.5)} .quizopt[data-state="bad"]{border-color:var(--bad);background:rgba(90,36,26,.45)} .hinttext{font-size:1.08rem;line-height:1.75;color:var(--paper);background:rgba(40,34,24,.55); padding:1rem;border-radius:10px;border-left:3px solid var(--accent);word-break:keep-all;margin:.6rem 0 1rem} /* 화면 */ .screen .modal-body{max-width:560px;text-align:center} .title-wrap{display:flex;flex-direction:column;gap:.7rem;align-items:center;padding:.6rem 0} .game-title{font-size:clamp(2.6rem,9vw,3.8rem);margin:0;letter-spacing:.14em;font-weight:300;color:var(--paper)} .game-title.small{font-size:clamp(1.5rem,5vw,2rem);letter-spacing:.06em} .game-sub{margin:0;color:var(--accent);letter-spacing:.22em;font-size:.86rem} .game-ep{margin:0 0 .5rem;color:var(--ink-faint);font-size:.92rem} .title-menu{display:flex;flex-direction:column;gap:.5rem;width:100%;max-width:380px;margin-top:.6rem} .title-hint{margin-top:1rem;color:var(--ink-faint);font-size:.86rem;line-height:1.7;word-break:keep-all;max-width:400px} .stats{width:100%;max-width:380px;display:flex;flex-direction:column;gap:.35rem;margin:.8rem 0} .statrow{display:flex;justify-content:space-between;padding:.5rem .8rem;border-radius:8px; background:rgba(28,24,18,.7);border:1px solid var(--line)} .statrow .k{color:var(--ink-dim);font-size:.9rem} .statrow .v{font-family:var(--mono);font-size:.95rem} .sol-head{font-size:1rem;color:var(--accent);margin:.8rem 0 .3rem} .solutions{width:100%;max-width:420px;display:flex;flex-direction:column;gap:.3rem; max-height:30dvh;overflow-y:auto} .solrow{display:flex;justify-content:space-between;gap:1rem;padding:.45rem .7rem;border-radius:6px; background:rgba(24,20,16,.7);font-size:.82rem;text-align:left} .sname{color:var(--ink-dim);word-break:keep-all} .sans{font-family:var(--mono);color:var(--accent);white-space:nowrap} .settings-form{width:100%;max-width:420px;display:flex;flex-direction:column;gap:.5rem;margin:.6rem 0} .setrow{display:grid;grid-template-columns:1fr auto auto;gap:.7rem;align-items:center; padding:.5rem .7rem;border-radius:8px;background:rgba(28,24,18,.7);border:1px solid var(--line)} .setrow label{font-size:.9rem;text-align:left;color:var(--ink-dim)} .setrow input[type=range]{width:clamp(100px,30vw,170px);accent-color:var(--accent)} .setrow input[type=checkbox]{width:24px;height:24px;accent-color:var(--accent)} .setrow select{min-height:36px;padding:.25rem .5rem;border-radius:6px;background:#241f18; color:var(--ink);border:1px solid var(--line)} .setval{font-family:var(--mono);font-size:.82rem;color:var(--ink-faint);min-width:44px;text-align:right} .credits-list{width:100%;display:flex;flex-direction:column;gap:.35rem;margin:.6rem 0; max-height:50dvh;overflow-y:auto} .credrow{display:flex;flex-direction:column;gap:.15rem;padding:.5rem .7rem;border-radius:8px; background:rgba(28,24,18,.7);text-align:left} .ck{font-size:.88rem;color:var(--ink)} .cv{font-size:.78rem;color:var(--ink-faint);word-break:keep-all} /* 장치 */ .device h2{margin:0 0 .3rem;font-size:1.2rem} .phone-display{font-family:var(--mono);font-size:1.9rem;text-align:center;padding:.7rem; background:#0e0c0a;border-radius:8px;border:1px solid var(--line);margin:.7rem 0;letter-spacing:.1em} .phone-dial{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;max-width:320px;margin:0 auto 1rem} .clock-face{position:relative;width:min(58vw,220px);height:min(58vw,220px);margin:1rem auto; border-radius:50%;background:radial-gradient(circle,#f0e8d4,#cfc4a8);border:8px solid #43301c} .clock-face .hand{position:absolute;left:50%;bottom:50%;transform-origin:bottom center;background:#1a1a18;border-radius:2px} .clock-face .hour{width:6px;height:28%;margin-left:-3px} .clock-face .min{width:4px;height:40%;margin-left:-2px} .clock-face .pin{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px; border-radius:50%;background:#b08d48} .clock-ctl{display:flex;gap:.5rem;justify-content:center;align-items:center;margin:.5rem 0} .clock-read{font-family:var(--mono);font-size:1.6rem;min-width:110px;text-align:center} .gelrow{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin:1rem 0} .gelslot{display:flex;flex-direction:column;gap:.4rem;align-items:center;padding:.6rem; border-radius:10px;background:rgba(24,20,16,.7);border:1px solid var(--line)} .gelname{font-size:.85rem;color:var(--ink-dim)} .gelbtn{width:48px;height:48px;border-radius:8px;border:2px solid transparent;font-size:1.2rem;color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.6)} .gelbtn.on{border-color:var(--paper);box-shadow:0 0 0 3px rgba(239,230,210,.25)} .gelbtn.clear{background:#2a241c;color:var(--ink-dim)} .wave{display:flex;align-items:center;gap:3px;min-height:48px;padding:.6rem;background:#0b0f0c; border-radius:8px;border:1px solid var(--line);margin:.7rem 0;flex-wrap:wrap} .wv{display:block;height:26px;border-radius:2px;background:#5ae08a;box-shadow:0 0 8px rgba(90,224,138,.5)} .wv.short{width:8px} .wv.long{width:26px} .wv.gap{width:14px;background:transparent;box-shadow:none} .morse-read{font-family:var(--mono);font-size:1.3rem;text-align:center;color:var(--accent); letter-spacing:.16em;min-height:1.6rem} .trayrow{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin:.9rem 0} .traybtn{min-height:76px;border-radius:10px;border:1px solid var(--line);background:rgba(30,26,20,.85); display:flex;flex-direction:column;gap:.2rem;align-items:center;justify-content:center} .traybtn.done{border-color:var(--ok);background:rgba(40,72,44,.5)} .tchem{font-size:1rem} .ttime{font-family:var(--mono);font-size:.85rem;color:var(--ink-faint)} .enl-stage{display:grid;place-items:center;background:#07100b;border-radius:10px;padding:1rem; min-height:220px;overflow:hidden;border:1px solid #1b2a1f} .enl-stage img{max-height:40dvh;transition:filter .1s,transform .1s} /* 색약 모드 — 모양 라벨을 키운다(K.a11y.color_lock_has_shape) */ body[data-cb="1"] .gelbtn{font-size:1.7rem;font-weight:700} body[data-cb="1"] .gelbtn.on{border-width:4px} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important} } @media (max-width:420px){ .modal-body{padding:.9rem} .slot{width:48px;height:48px;min-width:48px} .slot-name{font-size:.52rem;-webkit-line-clamp:2} .trayrow{grid-template-columns:1fr} .gelrow{gap:.4rem} .gelbtn{width:42px;height:42px} } /* ───────── 에피소드 탭(타이틀) ───────── */ .eptabs{display:flex;gap:.4rem;justify-content:center;flex-wrap:wrap;margin:.2rem 0 .6rem} .eptab{padding:.45rem .8rem;min-height:44px;border-radius:999px;border:1px solid var(--line); background:rgba(31,26,20,.8);color:var(--ink-dim);font-size:.82rem;white-space:nowrap} .eptab.on{border-color:var(--accent);color:#f6ecd2;background:rgba(80,62,26,.9)} .eptab:not(.on):hover{background:rgba(50,42,30,.95)} /* ───────── 모바일 안내 — 가로 권장 · 좌우 구역 ───────── */ /* 🔴 «표시»지 «벽»이 아니다 — 위쪽 배너로만 띄우고, 화면은 그대로 만질 수 있다. 전체를 덮었더니 e2e-nav 가 «캔버스가 맨 위가 아니다 · 스틱이 입력을 삼킨다»로 잡았다 (세로로도 그냥 하고 싶은 사람을 막아서는 안 된다). */ .rotate-hint{position:fixed;top:calc(.6rem + var(--safe-t));left:0;right:0;z-index:45; display:flex;justify-content:center;padding:0 .8rem;pointer-events:none} .rotate-hint[hidden]{display:none} .rotate-card{width:min(94vw,420px);text-align:center;background:rgba(26,22,18,.96); border:1px solid var(--line);border-radius:12px;padding:.7rem .8rem; box-shadow:0 14px 40px rgba(0,0,0,.6);pointer-events:auto; display:grid;grid-template-columns:auto 1fr;gap:.2rem .6rem;align-items:center} .rotate-card h2{margin:0;font-size:.98rem;color:#f2e7cd;text-align:left;grid-column:2} .rotate-card p{margin:.1rem 0 .5rem;font-size:.72rem;line-height:1.45;color:var(--ink-dim); text-align:left;grid-column:2} .rotate-card .btn{margin:0;min-height:38px;font-size:.78rem;grid-column:2} .rotate-card .btn+.btn{margin-top:.3rem} .rotate-icon{grid-row:1 / span 4;font-size:1.9rem;color:var(--accent); animation:rotatenudge 2.4s ease-in-out infinite;display:inline-block} @keyframes rotatenudge{0%,55%,100%{transform:rotate(0)}30%{transform:rotate(-90deg)}} /* 좌/우 구역 — 어느 쪽이 무엇을 하는지 «화면 위에» 그린다 */ .zoneguide{position:absolute;inset:0;z-index:3;pointer-events:none;display:flex} .zoneguide[hidden]{display:none} .zone{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:.3rem;text-align:center;transition:opacity .5s ease,transform .5s ease} .zone-ic{font-size:2rem;line-height:1} .zone-name{font-size:.95rem;font-weight:700;color:#f2e7cd; text-shadow:0 2px 8px rgba(0,0,0,.9)} .zone-how{font-size:.72rem;color:var(--ink-dim);max-width:9.5rem;line-height:1.4; text-shadow:0 2px 8px rgba(0,0,0,.9)} .zoneguide[data-state="intro"] .zone{opacity:.92} .zoneguide[data-state="intro"] .zone.left{background: linear-gradient(90deg,rgba(201,162,39,.16),transparent 72%)} .zoneguide[data-state="intro"] .zone.right{background: linear-gradient(270deg,rgba(124,166,201,.16),transparent 72%)} /* 써 본 쪽은 먼저 가라앉는다 — «반응했다»가 보여야 한다 */ .zoneguide[data-state="intro"] .zone[data-done="1"]{opacity:.42;background:none} /* 자리만 남긴다 — 늘 «왼쪽은 걷기, 오른쪽은 둘러보기»를 알 수 있게 */ .zoneguide[data-state="idle"] .zone{opacity:.2;transform:scale(.62)} .zoneguide[data-state="idle"] .zone-how{display:none} /* 전체화면 토글 — 손가락 기기에서만 보인다 */ .btn-full{display:none} @media (pointer:coarse){ .btn-full{display:inline-flex} } /* 장치 패널의 «카드 줄» — 2·3·4편이 같이 쓴다(테이프·상자·분동). 🔴 4편 저울은 «지금 저울에 올라간 둘»이 보여야 한다 — 안 보이면 비교가 손끝에서만 일어난다. */ .device.boxes{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:10px 0} .boxcard{min-width:96px;padding:10px 12px;border:2px solid var(--line,#5a4d38);border-radius:8px; background:#1c1712;color:var(--paper,#efe6d2);font:inherit;cursor:pointer;text-align:center} .boxcard:hover{background:#262019} .boxcard.on{border-color:var(--accent,#c8a45a);background:#2e2416;box-shadow:0 0 0 3px rgba(200,164,90,.25)} body[data-cb="1"] .boxcard.on{border-width:4px} /* 시즌 2 — 인터폰 통화 기록. 저쪽의 답은 K.relay.reply_ms 만큼 뜸을 들이며 떠오른다 */ .relayline { margin: 6px 0; padding: 8px 10px; border-left: 3px solid rgba(255, 216, 154, 0.55); background: rgba(255, 255, 255, 0.04); border-radius: 4px; line-height: 1.5; transition: opacity 420ms ease; } /* @gb-juice-css v1 — kit/juice/juice.css. 게임 스타일시트 끝에 그대로 붙인다(CSP style-src 'self' 라 JS 가