:root{--bg: #ffffff;--panel: #f4f4f5;--surface: #fafafa;--border: #e4e4e7;--ink: #09090b;--muted: #71717b;--muted-2: #9f9fa9;--brand: #019d91;--brand-hover: #017f76;--chip-cream: #fdeac8;--r-chip: 8px;--r-btn: 12px;--r-card: 16px;--r-panel: 24px;--r-pill: 9999px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-float: 0 2px 10px rgba(0, 0, 0, .14);--font: "Inter", "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Segoe UI", system-ui, sans-serif;--display: "DM Sans", var(--font)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);font-family:var(--font);font-weight:400;color:var(--ink);overscroll-behavior:none}h1,h2{font-family:var(--display);font-weight:500;letter-spacing:-.04em;margin:0}p{margin:0}h1,h2,p,#cheer-title,#cheer-sub{word-break:keep-all}button{font-family:inherit;cursor:pointer;border:none;color:inherit}:focus-visible{outline:2px solid var(--brand);outline-offset:2px}.hidden{opacity:0!important;pointer-events:none!important}#stage{position:fixed;inset:0}#cam{width:100%;height:100%;object-fit:cover;transform:scaleX(-1);background:var(--panel);opacity:0;transition:opacity .6s ease}#cam.ready{opacity:1}#overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#hud{position:fixed;top:max(10px,env(safe-area-inset-top));left:10px;right:10px;display:flex;gap:6px;align-items:center;flex-wrap:wrap;transition:opacity .35s ease;z-index:20}#hud button,#score{height:36px;padding:0 14px;border-radius:var(--r-chip);background:var(--bg);border:1px solid var(--border);box-shadow:var(--shadow-float);font-size:14px;font-weight:500;color:var(--ink);white-space:nowrap;display:inline-flex;align-items:center}.pack-btn-icon{width:20px;height:20px;border-radius:5px;background:var(--chip-cream);margin-right:7px;vertical-align:-4px}#score{margin-left:auto;color:var(--brand);font-variant-numeric:tabular-nums}#modes{display:flex;gap:3px;background:var(--bg);border:1px solid var(--border);box-shadow:var(--shadow-float);border-radius:var(--r-chip);padding:3px;height:36px}#modes button{height:28px;padding:0 12px;border-radius:6px;background:transparent;border:none;box-shadow:none;font-size:13px;font-weight:500;color:var(--muted)}#modes button.on{background:var(--brand);color:#fafafa}#prompt{position:fixed;top:max(58px,calc(env(safe-area-inset-top) + 58px));left:50%;transform:translate(-50%);background:var(--bg);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--shadow-float);padding:14px 28px 18px;text-align:center;z-index:15;transition:opacity .25s ease;pointer-events:none;max-width:min(92vw,460px)}#prompt .q-label{font-size:14px;font-weight:400;color:var(--muted)}#prompt .q-word{font-family:var(--display);font-size:clamp(40px,10vw,64px);font-weight:500;line-height:1.15;letter-spacing:-.04em;margin-top:2px}#prompt .q-hint{margin-top:8px;font-size:13px;color:var(--muted)}#card{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translate(-50%);background:var(--bg);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--shadow-float);padding:16px 30px 18px;text-align:center;min-width:208px;z-index:18;transition:opacity .18s ease,transform .2s cubic-bezier(.2,1.4,.4,1)}#card.hidden{transform:translate(-50%) translateY(14px) scale(.96)}#card .c-emoji{display:block;width:36px;height:36px;margin:0 auto}#card .c-en{font-family:var(--display);font-size:34px;font-weight:500;letter-spacing:-.03em;line-height:1.15;margin-top:6px}#card .c-ko{font-size:15px;color:var(--muted);margin-top:1px}#card .c-tag{font-size:14px;font-weight:500;margin-top:8px;color:var(--brand)}#card.bad{animation:shake .4s}#card.bad .c-tag{color:var(--muted)}@keyframes shake{0%,to{transform:translate(-50%)}25%{transform:translate(calc(-50% - 9px))}75%{transform:translate(calc(-50% + 9px))}}#note{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translate(-50%);background:var(--bg);border:1px solid var(--border);box-shadow:var(--shadow-float);padding:9px 16px;border-radius:var(--r-chip);font-size:13px;font-weight:500;color:var(--ink);opacity:0;transition:opacity .3s ease;z-index:25;text-align:center;max-width:min(92vw,460px)}#note.show{opacity:1}#toast{position:fixed;top:max(58px,calc(env(safe-area-inset-top) + 58px));left:50%;transform:translate(-50%);background:var(--brand);color:#fafafa;border-radius:var(--r-btn);box-shadow:var(--shadow-float);padding:12px 22px;font-size:16px;font-weight:500;z-index:26;pointer-events:none;white-space:nowrap;transition:opacity .25s ease,transform .25s cubic-bezier(.2,1.4,.4,1)}#toast.hidden{transform:translate(-50%) translateY(-10px)}#cheer{position:fixed;inset:0;display:grid;place-items:center;background:#f4f4f5d1;backdrop-filter:blur(6px);z-index:40;transition:opacity .3s ease;padding:20px}#cheer-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-panel);padding:34px 34px 28px;text-align:center;width:min(88vw,340px);animation:rise .45s cubic-bezier(.2,1.2,.35,1)}@keyframes rise{0%{transform:translateY(16px);opacity:0}}#cheer-title{font-family:var(--display);font-size:40px;font-weight:500;letter-spacing:-.04em;line-height:1.15}#cheer-sub{font-size:16px;color:var(--muted);margin-top:8px}#cheer-actions{display:flex;gap:8px;margin-top:24px}#cheer-actions button{flex:1;height:48px;white-space:nowrap;border-radius:var(--r-btn);font-size:16px;font-weight:500;background:var(--bg);border:1px solid var(--border);color:var(--ink)}#cheer-again{background:var(--brand)!important;border-color:var(--brand)!important;color:#fafafa!important}#gate{position:fixed;inset:0;z-index:50;background:var(--bg);display:grid;place-items:center;overflow-y:auto;transition:opacity .45s ease}#gate-inner{width:min(100%,1080px);padding:20px 24px max(28px,env(safe-area-inset-bottom))}#brand{display:flex;align-items:center;gap:10px;height:56px}.mark-sq{display:block;width:30px;height:30px}.mark-name{font-family:var(--display);font-size:19px;font-weight:500;letter-spacing:-.02em}#gate-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;padding:32px 0 8px}#gate h1{font-size:clamp(38px,5.4vw,64px);line-height:1.15}.gate-lead{font-size:clamp(17px,2vw,24px);line-height:1.35;color:var(--muted);margin-top:20px}#start{margin-top:28px;height:48px;padding:0 24px;border-radius:var(--r-btn);background:var(--brand);color:#fafafa;font-size:16px;font-weight:500;transition:background-color .16s ease}#start:hover{background:var(--brand-hover)}.gate-foot{font-size:13px;color:var(--muted-2);margin-top:20px;line-height:1.6;max-width:34em}#hero{position:relative;width:100%;aspect-ratio:1 / 1;max-width:420px;margin-inline:auto}#mascot{display:block;width:84%;height:auto;margin-left:0}#hero-tags{position:absolute;inset:0;pointer-events:none}.hero-tag{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:0;height:34px;padding:0 6px;border-radius:var(--r-pill);background:var(--bg);border:1px solid var(--border);box-shadow:var(--shadow-sm);font-size:15px;font-weight:500;color:var(--ink);white-space:nowrap;opacity:0;transition:opacity .18s ease,gap .4s ease,padding .4s ease,transform .4s ease,border-color .35s ease,box-shadow .35s ease}.hero-tag .t-chip{width:20px;height:20px;border-radius:6px;background:var(--tint);flex:none}.hero-tag .t-word{max-width:0;opacity:0;overflow:hidden;transition:max-width .4s cubic-bezier(.2,.9,.3,1),opacity .3s ease}.hero-tag .t-word small{font-weight:400;font-size:13px;color:var(--muted);margin-left:6px}.hero-tag[data-finger=index]{left:72%;top:12%}.hero-tag[data-finger=middle]{left:86%;top:30%}.hero-tag[data-finger=ring]{left:84%;top:50%}.hero-tag[data-finger=pinky]{left:70%;top:68%}#hero[data-active=index] .hero-tag[data-finger=index],#hero[data-active=middle] .hero-tag[data-finger=middle],#hero[data-active=ring] .hero-tag[data-finger=ring],#hero[data-active=pinky] .hero-tag[data-finger=pinky]{z-index:2;opacity:1;transition-delay:.2s;transform:translate(-50%,-50%) scale(1.04);gap:8px;padding:0 14px 0 6px;border-color:var(--muted-2);box-shadow:var(--shadow-float)}#hero[data-active=index] .hero-tag[data-finger=index] .t-word,#hero[data-active=middle] .hero-tag[data-finger=middle] .t-word,#hero[data-active=ring] .hero-tag[data-finger=ring] .t-word,#hero[data-active=pinky] .hero-tag[data-finger=pinky] .t-word{max-width:200px;opacity:1}.pack-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.pack-grid button{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:14px 6px 12px;font-size:13px;font-weight:500;color:var(--ink);display:grid;gap:4px;justify-items:center;transition:transform .14s ease,border-color .18s ease,background-color .18s ease}.pack-grid button .p-emoji{font-size:24px;line-height:1}.pack-grid button .p-icon{display:block;width:40px;height:40px;border-radius:var(--r-chip);background:var(--chip-cream)}.pack-grid button .p-stars{font-size:11px;font-weight:400;color:var(--muted);font-variant-numeric:tabular-nums}.pack-grid button:active{transform:scale(.96)}.pack-grid button.on{background:var(--bg);border-color:var(--brand)}.pack-grid button.on .p-stars{color:var(--brand)}#pack-modal{position:fixed;inset:0;background:#f4f4f5d1;backdrop-filter:blur(6px);display:grid;place-items:center;z-index:45;transition:opacity .25s ease;padding:20px}#pack-card{position:relative;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-panel);padding:24px 22px;width:min(94vw,420px)}#pack-card h2{margin:0 0 16px;font-size:24px;letter-spacing:-.03em}#pack-close{position:absolute;top:10px;right:14px;background:transparent;color:var(--muted);font-size:26px;line-height:1;padding:4px 8px}@media (max-width: 860px){#gate-hero{grid-template-columns:1fr;gap:8px;padding:16px 0 36px}#hero{width:min(320px,82%);margin:0 auto;order:-1}#gate h1{font-size:clamp(32px,8vw,44px)}.gate-lead{font-size:17px;margin-top:14px}#start{width:100%;display:flex;align-items:center;justify-content:center;margin-top:20px}.hero-tag[data-finger=index],.hero-tag[data-finger=middle],.hero-tag[data-finger=ring],.hero-tag[data-finger=pinky]{left:50%;top:4%}}@media (max-width: 380px){.pack-grid{grid-template-columns:repeat(3,1fr)}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}