:root { --bg:#f3e6d3; --ink:#3b2a1e; --soft:#7a6252; --card:#fffaf2; --accent:#e9a15a; --accent2:#7fb07a; --bad:#d9735b; --line:#e7d4bb; --touch:48px; --choice:56px; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; height:100%; background:var(--bg); color:var(--ink); font-family:"Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif; overscroll-behavior:none; }
body { user-select:none; -webkit-user-select:none; touch-action:manipulation; overflow:hidden; }
#gl { position:fixed; inset:0; width:100vw; height:100dvh; display:block; touch-action:none; }
#ui { position:fixed; inset:0; pointer-events:none; display:flex; flex-direction:column; }
/* #ui 의 자식(.screen)은 pointer-events:none — 캔버스 입력을 막지 않게(.screen > * 만 auto) */
.screen { position:absolute; inset:0; display:flex; flex-direction:column; pointer-events:none; padding:max(12px, env(safe-area-inset-top)) 16px max(12px, env(safe-area-inset-bottom)); }
.screen > * { pointer-events:auto; }
.panel { background:var(--card); border-radius:22px; padding:18px; box-shadow:0 6px 24px rgba(80,50,20,.15); }
.center { margin:auto; max-width:560px; width:100%; }
h1 { font-size:34px; margin:0 0 6px; } h2 { font-size:22px; margin:0 0 10px; } p { margin:6px 0; line-height:1.5; }
button { font:inherit; min-height:var(--touch); min-width:var(--touch); border:0; border-radius:16px; padding:10px 16px; background:var(--card); color:var(--ink); box-shadow:0 3px 0 var(--line); cursor:pointer; }
button:active, button.pressed { transform:translateY(2px); box-shadow:0 1px 0 var(--line); }
button.big { font-size:22px; font-weight:700; background:var(--accent); color:#fff; box-shadow:0 4px 0 #b9773a; width:100%; min-height:64px; }
button[disabled], button.dim { opacity:.45; }
.hud { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.chip { background:rgba(255,250,242,.92); border-radius:999px; padding:6px 12px; font-weight:700; box-shadow:0 2px 8px rgba(80,50,20,.12); }
.bars { display:flex; gap:8px; font-size:13px; flex-wrap:wrap; }
.bar { background:rgba(255,250,242,.92); border-radius:10px; padding:4px 8px; }
.bar i { display:block; height:6px; border-radius:3px; background:var(--line); margin-top:3px; overflow:hidden; } .bar i b { display:block; height:100%; background:var(--accent2); }
.spacer { flex:1; pointer-events:none; }
.cares { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:8px; }
.cares button { display:flex; flex-direction:column; align-items:center; font-size:15px; padding:8px 4px; }
.cares button small { font-size:12px; color:var(--soft); }
.row { display:flex; gap:8px; justify-content:space-between; margin-top:8px; }
.quiz-card { margin-top:auto; }
.q { font-size:24px; font-weight:700; margin:6px 0 14px; word-break:keep-all; }
.choices { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.choices button { min-height:var(--choice); font-size:20px; }
.choices button.right { background:var(--accent2); color:#fff; } .choices button.wrong { background:var(--bad); color:#fff; }
.keypad { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; } .keypad button { min-height:var(--choice); font-size:22px; }
.inputbox { font-size:28px; text-align:center; min-height:48px; border-bottom:3px solid var(--line); margin-bottom:10px; }
.dots { display:flex; gap:6px; justify-content:center; margin-bottom:8px; } .dots span { width:10px; height:10px; border-radius:50%; background:var(--line); } .dots .on { background:var(--accent); }
.wrongcard { background:#fff1ec; border-left:6px solid var(--bad); padding:12px; border-radius:12px; margin:10px 0; font-size:18px; }
.okmark::before { content:"✓ "; color:var(--accent2); } .nomark::before { content:"✗ "; color:var(--bad); }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; }
.catcard { text-align:left; } .catcard b { display:block; font-size:18px; }
.names { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; max-height:40vh; overflow:auto; }
.names button { min-height:44px; padding:6px; }
.names button.sel { background:var(--accent); color:#fff; }
.sub { position:absolute; left:16px; right:16px; bottom:22vh; text-align:center; font-size:18px; background:rgba(255,250,242,.94); border-radius:14px; padding:10px 14px; pointer-events:none; }
.gauge { position:absolute; top:22%; left:50%; transform:translateX(-50%); background:rgba(255,250,242,.95); padding:6px 14px; border-radius:999px; font-weight:700; pointer-events:none; }
.hint { position:absolute; top:30%; left:50%; transform:translateX(-50%); background:#fff1d6; padding:8px 14px; border-radius:12px; font-size:17px; pointer-events:none; white-space:nowrap; }
.ai-badge { position:fixed; top:max(8px, env(safe-area-inset-top)); right:10px; z-index:5; background:rgba(40,30,20,.72); color:#fff; font-size:12px; padding:4px 8px; border-radius:8px; pointer-events:none; }
.toast { position:fixed; left:50%; bottom:28%; transform:translateX(-50%); background:rgba(40,30,20,.85); color:#fff; padding:10px 16px; border-radius:12px; font-size:17px; z-index:6; pointer-events:none; }
.hearts { position:absolute; pointer-events:none; font-size:26px; animation:rise 900ms ease-out forwards; }
@keyframes rise { from { transform:translateY(0); opacity:1 } to { transform:translateY(-70px); opacity:0 } }
.tiny { font-size:13px; color:var(--soft); }
.album-cell { aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:14px; }
.album-cell.locked { opacity:.4; }
select { font:inherit; min-height:var(--touch); border-radius:12px; padding:6px; }
label { display:flex; justify-content:space-between; align-items:center; gap:10px; margin:8px 0; }
@media (prefers-reduced-motion: reduce) { .hearts { animation-duration:1ms; } }
.ico { font-size:24px; } .quizgap { height:34vh; pointer-events:none; } .mt { margin-top:12px; } .mta { margin-top:auto; } .mb6 { margin-bottom:6vh; }
.my8 { margin:8px 0; } .faded { opacity:.5; } .scroll80 { max-height:80vh; overflow:auto; } .scroll86 { max-height:86vh; overflow:auto; }
.float20, .float40 { position:absolute; left:16px; right:16px; } .float20 { top:20%; } .float40 { top:40%; } .full { width:100%; } .sel { background:var(--accent) !important; color:#fff; }