:root{--ink: #0a0708;--ink-card: #1a1218;--gold: #c9a84c;--gold-glow: #e8c96b;--neon: #00f5ff;--seal: #cc2200;--hanji: #f5e6c8;--smoke: #3d3540;--serif: "Noto Serif KR", serif;--batang: "Gowun Batang", serif;--mono: "Roboto Mono", monospace}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;background:var(--ink);color:var(--hanji);font-family:var(--serif);overflow:hidden;-webkit-font-smoothing:antialiased}#app{position:relative;width:100vw;height:100dvh}body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.05;mix-blend-mode:soft-light}.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:32px;text-align:center}.hidden{display:none!important}.hanja-mark{font-family:var(--batang);font-size:92px;font-weight:700;color:transparent;background:linear-gradient(180deg,var(--gold-glow),var(--gold));-webkit-background-clip:text;background-clip:text;letter-spacing:6px;text-shadow:0 0 28px rgba(201,168,76,.25);animation:floatIn .9s ease both}#intro h1{font-size:26px;font-weight:700;letter-spacing:2px;color:var(--hanji);opacity:.92}.sub{font-size:15px;line-height:1.7;color:#c8b8a0;opacity:.8}.privacy{font-size:12px;color:var(--smoke);margin-top:4px}.btn-primary{font-family:var(--serif);font-size:17px;font-weight:700;letter-spacing:2px;color:var(--gold-glow);padding:14px 40px;cursor:pointer;background:transparent;border:1px solid var(--gold);border-radius:2px;box-shadow:0 0 8px #c9a84c4d,inset 0 0 10px #c9a84c0d;transition:all .25s}.btn-primary:hover{background:#c9a84c14;box-shadow:0 0 18px #c9a84c73}.name-input{font-family:var(--serif);font-size:15px;text-align:center;color:var(--hanji);background:#f5e6c80a;border:1px solid var(--smoke);border-radius:2px;padding:10px 16px;width:180px;outline:none;transition:border-color .2s}.name-input:focus{border-color:var(--gold)}.name-input::placeholder{color:#6a6070}.btn-ghost{font-family:var(--serif);font-size:15px;color:#9a8e7a;padding:12px 28px;cursor:pointer;background:transparent;border:1px solid var(--smoke);border-radius:2px;transition:all .2s}.btn-ghost:hover{color:var(--hanji);border-color:#6a6070}#scan{justify-content:center}.scan-stage{position:relative;width:min(86vw,380px);aspect-ratio:3 / 4;border-radius:4px;overflow:hidden;box-shadow:0 0 40px #0009}#cam,#overlay{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}#cam.mirror,#overlay.mirror{transform:scaleX(-1)}.cam-select{display:inline-flex;margin:2px 0;border:1px solid var(--gold);border-radius:999px;overflow:hidden}.cam-opt{padding:8px 22px;background:transparent;color:var(--gold);border:0;font-family:inherit;font-size:14px;letter-spacing:1px;cursor:pointer;transition:background .15s,color .15s}.cam-opt.active{background:var(--gold);color:#1a1206}.corner{position:absolute;width:26px;height:26px;border:2px solid var(--gold);filter:drop-shadow(0 0 6px var(--gold));z-index:3}.corner.tl{top:10px;left:10px;border-right:0;border-bottom:0}.corner.tr{top:10px;right:10px;border-left:0;border-bottom:0}.corner.bl{bottom:10px;left:10px;border-right:0;border-top:0}.corner.br{bottom:10px;right:10px;border-left:0;border-top:0}.scan-status{margin-top:22px;font-size:15px;letter-spacing:1px;color:var(--hanji);min-height:22px}.scan-status.warn{color:var(--gold-glow)}.scan-progress{margin-top:14px;width:min(86vw,380px);height:3px;background:#ffffff14;border-radius:2px;overflow:hidden}#scanBar{height:100%;width:0%;background:linear-gradient(90deg,transparent,var(--neon));box-shadow:0 0 10px var(--neon);transition:width .2s linear}#result{justify-content:flex-start;padding-top:28px;gap:16px;overflow-y:auto}.result-card{width:min(90vw,400px);background:linear-gradient(160deg,var(--ink-card),#120d12);border:1px solid rgba(201,168,76,.4);border-radius:6px;padding:26px 24px 30px;position:relative;box-shadow:0 0 30px #0009,inset 0 0 30px #c9a84c08}.card-title{font-family:var(--batang);font-size:15px;letter-spacing:4px;color:var(--gold);opacity:.85}.card-king-q{margin-top:10px;font-family:var(--batang);font-size:13px;letter-spacing:1px;color:#9a8e7a}.card-king-a{font-family:var(--batang);font-weight:700;font-size:40px;line-height:1.2;color:var(--gold-glow);margin:4px 0 2px;text-shadow:0 0 20px rgba(201,168,76,.35)}.card-king-line{font-size:13.5px;line-height:1.6;color:#c8b8a0;margin-bottom:8px}.card-grade{font-family:var(--batang);font-weight:700;font-size:78px;line-height:1.1;color:var(--gold-glow);margin:6px 0 2px;text-shadow:0 0 24px rgba(201,168,76,.35)}.card-archetype{font-size:19px;font-weight:700;color:var(--hanji);letter-spacing:1px}.card-total{font-family:var(--mono);font-size:13px;color:#9a8e7a;margin-top:4px}.card-animal{margin:12px auto 2px;display:block;width:fit-content;font-size:21px;font-weight:700;color:var(--gold-glow);padding:6px 20px;border:1px solid rgba(201,168,76,.5);border-radius:999px;box-shadow:0 0 12px #c9a84c33}.card-animal-read{margin-top:12px;font-size:14px;line-height:1.65;color:#c8b8a0;background:#f5e6c80a;border-left:2px solid var(--gold-glow);padding:9px 12px;text-align:left}.card-face{width:92px;height:92px;margin:18px auto 6px;border-radius:50%;object-fit:cover;border:2px solid var(--gold);box-shadow:0 0 14px #c9a84c66}.card-rows{margin:16px 2px;display:flex;flex-direction:column;gap:9px}.row{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:10px;font-size:14px;opacity:0;animation:fadeUp .4s ease forwards}.row .rname{color:#c8b8a0}.row .rstars{color:var(--gold);letter-spacing:2px}.row .rscore{font-family:var(--mono);font-size:13px;color:var(--hanji)}.card-divider{height:1px;background:#c9a84c40;margin:14px 0}.card-drip{font-size:15px;line-height:1.7;color:var(--hanji)}.card-fortune{margin-top:12px;font-size:13.5px;line-height:1.6;color:#c8b8a0;background:#f5e6c80a;border-left:2px solid var(--gold);padding:9px 12px;text-align:left}.card-seal{position:absolute;right:18px;bottom:16px;width:52px;height:52px;display:flex;align-items:center;justify-content:center;border:2px solid var(--seal);border-radius:4px;color:var(--seal);font-family:var(--batang);font-weight:700;font-size:13px;line-height:1.1;transform:rotate(-6deg);text-align:center;box-shadow:0 0 8px #cc22004d}.why-wrap{width:min(90vw,400px)}.card-why{background:#f5e6c808;border:1px solid rgba(201,168,76,.25);border-radius:6px}.card-why summary{cursor:pointer;list-style:none;text-align:center;font-size:14px;letter-spacing:1px;color:var(--gold);padding:13px;user-select:none}.card-why summary::-webkit-details-marker{display:none}.card-why[open] summary{border-bottom:1px solid rgba(201,168,76,.2)}.why-list{padding:14px 16px 16px;display:flex;flex-direction:column;gap:12px}.why-row{text-align:left}.why-head{display:flex;justify-content:space-between;align-items:baseline}.why-name{font-size:14px;color:var(--hanji);font-weight:700}.why-score{font-family:var(--mono);font-size:13px;color:var(--gold)}.why-text{font-size:13px;line-height:1.6;color:#c8b8a0;margin-top:3px}.why-foot{font-size:11.5px;color:var(--smoke);line-height:1.5;margin-top:4px}.result-actions{display:flex;gap:12px;padding-bottom:24px}.reveal-overlay{position:absolute;inset:0;z-index:80;background:var(--ink);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .16s ease}.reveal-overlay.on{opacity:1;pointer-events:auto}.reveal-pulse{font-family:var(--batang);font-weight:700;font-size:64px;color:var(--gold);text-shadow:0 0 28px rgba(201,168,76,.55)}.reveal-overlay.on .reveal-pulse{animation:heartbeat .62s ease both}@keyframes heartbeat{0%{transform:scale(.86);opacity:.25}20%{transform:scale(1.2);opacity:1}36%{transform:scale(.98)}56%{transform:scale(1.16)}74%{transform:scale(1)}to{transform:scale(1.03);opacity:1}}.error-overlay{position:absolute;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:40px;background:#0a0708f0;text-align:center}.error-overlay p{font-size:16px;line-height:1.7;color:var(--hanji);white-space:pre-line}@keyframes floatIn{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@keyframes fadeUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes sealStamp{0%{transform:rotate(-6deg) scale(1.4);opacity:0}60%{transform:rotate(-6deg) scale(.92);opacity:1}to{transform:rotate(-6deg) scale(1)}}.card-seal.stamp{animation:sealStamp .4s ease both}.card-grade.reveal{animation:floatIn .6s ease both}