:root{--bg0: #0e0c09;--panel: rgba(24, 20, 15, .82);--line: rgba(217, 164, 65, .22);--gold: #d9a441;--gold-hi: #f0c46a;--text: #ece3d0;--dim: #9a8f7a;--cho: #2f6fbe;--han: #cf4a3a}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{background:#0e0c09;color:var(--text);font-family:Pretendard Variable,Pretendard,Noto Sans KR,Apple SD Gothic Neo,Malgun Gothic,sans-serif;overflow:hidden;-webkit-font-smoothing:antialiased}.app{position:fixed;top:0;right:0;bottom:0;left:0}canvas{display:block;touch-action:none}.hud{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;-webkit-user-select:none;user-select:none}.vignette{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(120% 95% at 50% 32%,transparent 52%,rgba(5,4,3,.5) 100%);pointer-events:none}.top{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;gap:12px;position:relative;z-index:2}.brand{display:flex;align-items:center;gap:10px;pointer-events:auto}.brand .seal{width:38px;height:38px;border-radius:9px;background:linear-gradient(160deg,#c8402f,#9c2d20);color:#fdf3e3;display:grid;place-items:center;font-family:Batang,"Noto Serif KR",serif;font-size:24px;font-weight:700;box-shadow:0 4px 14px #a0321e59}.brand-text{display:flex;flex-direction:column;line-height:1.05}.brand-text strong{font-size:16px;letter-spacing:.02em}.brand-text em{font-style:normal;font-size:10px;letter-spacing:.34em;color:var(--dim)}.turn-chip{display:flex;align-items:center;gap:10px;padding:8px 18px 8px 10px;border-radius:999px;background:var(--panel);border:1px solid var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:15px;font-weight:600;letter-spacing:.02em}.turn-chip .t-seal{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-family:Batang,"Noto Serif KR",serif;font-size:18px;color:#fff}.turn-chip.cho .t-seal{background:var(--cho)}.turn-chip.han .t-seal{background:var(--han)}.check-badge{color:#ffb347;font-weight:800;font-size:13px;padding:3px 9px;border-radius:999px;background:#ffb3471f;border:1px solid rgba(255,179,71,.4);animation:pulse 1.2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.55}}.top-right{display:flex;align-items:center;gap:8px}.badge{font-size:11px;letter-spacing:.08em;padding:5px 10px;border-radius:999px;border:1px solid rgba(154,143,122,.4);color:var(--dim);background:#14110d99}.badge.ok{color:#9ecf8f;border-color:#9ecf8f73}.badge.warn{color:#e0b45f;border-color:#e0b45f73}.btn{pointer-events:auto;background:#262018e6;border:1px solid rgba(217,164,65,.28);color:var(--text);padding:8px 15px;border-radius:10px;font-size:13px;letter-spacing:.02em;cursor:pointer;transition:border-color .15s,color .15s,background .15s,transform .1s;font-family:inherit}.btn:hover:not(:disabled){border-color:var(--gold);color:var(--gold-hi);background:#382d1ef2}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.38;cursor:default}.btn.icon{padding:7px 11px;font-size:14px;line-height:1}.btn.primary{background:linear-gradient(160deg,#d9a441,#b07f2a);border-color:transparent;color:#241a09;font-weight:700}.btn.primary:hover:not(:disabled){color:#171004;background:linear-gradient(160deg,#f0c46a,#c8923a)}.btn.ghost{background:transparent}.trays{position:absolute;right:18px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px;z-index:2}.tray{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 13px;min-width:122px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.tray h4{font-size:11px;color:var(--dim);margin-bottom:6px;font-weight:600;letter-spacing:.05em}.tray .chars{display:flex;flex-wrap:wrap;gap:5px;font-family:Batang,"Noto Serif KR",serif;font-size:18px;min-height:24px;line-height:1}.tray .chars .none{color:#9a8f7a80;font-size:14px}.tray .chars span.cho{color:#6ea3e0}.tray .chars span.han{color:#e0796a}.bottom{display:flex;flex-direction:column;align-items:center;gap:9px;padding:0 16px 18px;position:relative;z-index:2}.hint{font-size:11.5px;color:#9a8f7ad9;letter-spacing:.04em}.actions{display:flex;gap:8px;align-items:center;background:var(--panel);border:1px solid var(--line);padding:8px 10px;border-radius:14px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);pointer-events:auto}.mode-label{font-size:12px;color:var(--dim);padding:0 8px 0 4px;border-right:1px solid rgba(154,143,122,.25);margin-right:2px;white-space:nowrap}.thinking{position:absolute;left:50%;bottom:92px;transform:translate(-50%);display:flex;align-items:center;gap:9px;font-size:13px;color:var(--gold-hi);background:var(--panel);border:1px solid var(--line);padding:8px 16px;border-radius:999px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:3}.thinking .dots{display:inline-flex;gap:4px}.thinking .dots i{width:5px;height:5px;border-radius:50%;background:var(--gold);animation:blink 1s ease-in-out infinite}.thinking .dots i:nth-child(2){animation-delay:.18s}.thinking .dots i:nth-child(3){animation-delay:.36s}@keyframes blink{0%,to{opacity:.25}40%{opacity:1}}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#0806048c;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);pointer-events:auto;z-index:10}.card{background:linear-gradient(165deg,#30271bf7,#1b160ff7);border:1px solid rgba(217,164,65,.3);border-radius:18px;padding:34px 44px;text-align:center;box-shadow:0 30px 80px #0000008c;min-width:330px;max-width:min(92vw,460px)}.card .big{font-family:Batang,"Noto Serif KR",serif;font-size:33px;color:var(--gold-hi);margin-bottom:10px}.card .detail{color:var(--dim);margin-bottom:10px;font-size:14px;line-height:1.5}.card .score-line{font-size:15px;color:var(--text);margin-bottom:8px;font-weight:600}.card-actions{display:flex;gap:10px;justify-content:center;margin-top:22px}.card-actions.center{margin-top:18px}.card.panel{text-align:left;padding:28px 32px}.card.panel h3{font-family:Batang,"Noto Serif KR",serif;font-size:21px;color:var(--gold-hi);margin-bottom:20px}.row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}.row label{font-size:13px;color:var(--dim);white-space:nowrap}.row.col{flex-direction:column;align-items:stretch;gap:8px}.row.col label{white-space:normal}.seg{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.seg.grid4{display:grid;grid-template-columns:1fr 1fr}.seg button{background:#262018e6;border:1px solid rgba(154,143,122,.3);color:var(--text);padding:7px 12px;border-radius:8px;font-size:12.5px;cursor:pointer;transition:all .15s;font-family:inherit;white-space:nowrap}.seg button:hover{border-color:var(--gold)}.seg button.on{background:#d9a44129;border-color:var(--gold);color:var(--gold-hi);font-weight:600}.note{font-size:11.5px;color:#9a8f7acc;margin-top:4px;line-height:1.5}@media (max-width: 760px){.char-grid{grid-template-columns:1fr}}@media (max-width: 760px){.trays{top:auto;bottom:108px;right:10px;transform:none;gap:8px}.tray{min-width:96px;padding:7px 10px}.tray .chars{font-size:15px}.hint,.brand-text em{display:none}.turn-chip{font-size:13px;padding:6px 12px 6px 8px}.card{padding:26px 22px;min-width:0}}.bubble{position:absolute;top:74px;left:50%;transform:translate(-50%);max-width:min(92vw,560px);background:#18140feb;border:1.5px solid;border-radius:14px;padding:10px 16px 12px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:6;animation:bubble-in .25s ease-out;pointer-events:none}@keyframes bubble-in{0%{opacity:0;transform:translate(-50%) translateY(-6px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.bubble-name{font-size:12px;font-weight:800;letter-spacing:.06em}.bubble p{margin:4px 0 0;font-size:14.5px;line-height:1.5;color:var(--text)}.overlay.story{background:linear-gradient(180deg,#0a0907c7,#0a0907e6)}.story-card{text-align:center;max-width:min(92vw,520px);padding:30px}.story-kicker{font-style:normal;font-size:12px;letter-spacing:.4em;color:var(--gold)}.story-text{font-family:Batang,"Noto Serif KR",serif;font-size:21px;line-height:1.7;color:var(--text);margin:22px 0 26px;word-break:keep-all}.story-dots{display:flex;gap:7px;justify-content:center;margin-bottom:22px}.story-dots i{width:7px;height:7px;border-radius:50%;background:#9a8f7a66}.story-dots i.on{background:var(--gold)}.select-card{text-align:center;max-width:min(94vw,860px);padding:26px}.select-card h3{font-family:Batang,"Noto Serif KR",serif;font-size:24px;color:var(--gold-hi)}.select-sub{color:var(--dim);font-size:13px;margin:6px 0 18px}.char-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}.char-card{background:#262018e6;border:1.5px solid rgba(154,143,122,.3);border-radius:14px;padding:14px 12px;cursor:pointer;color:var(--text);font-family:inherit;transition:all .15s;display:flex;flex-direction:column;align-items:center;gap:5px}.char-card:hover{border-color:var(--acc, var(--gold))}.char-card.on{border-color:var(--acc, var(--gold));background:#d9a4411a;box-shadow:0 0 0 3px #d9a44126}.char-card img{width:92px;height:92px;border-radius:50%;object-fit:cover;border:2px solid var(--acc, var(--gold));background:#2c2418}.char-card strong{font-size:15px}.char-card em{font-style:normal;font-size:11px;color:var(--dim)}.char-card .stars{color:var(--acc, var(--gold));font-size:13px;letter-spacing:.15em}.char-card p{font-size:11.5px;line-height:1.5;color:#ece3d0bf;word-break:keep-all}.coin-chip{position:absolute;top:62px;right:18px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:6px 13px;font-size:13px;font-weight:700;color:var(--gold-hi);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:5}.coin-ico{color:var(--gold)}.ad-card{display:flex;flex-direction:column;align-items:center;gap:14px}.ad-creative{width:260px;padding:26px 18px;border-radius:12px;background:linear-gradient(160deg,#2e5d3a,#1d3a26);border:1px solid rgba(143,191,111,.4);display:flex;flex-direction:column;align-items:center;gap:6px}.ad-creative span{font-size:40px}.ad-creative strong{font-size:16px;color:#d8ecd0}.ad-creative em{font-style:normal;font-size:11px;color:#d8ecd0b3}.ad-bar{width:260px;height:6px;border-radius:999px;background:#9a8f7a40;overflow:hidden}.ad-bar i{display:block;height:100%;background:var(--gold);transition:width 1s linear}.ad-left{color:var(--dim);font-size:12.5px}.ad-close{position:absolute;top:10px;right:12px}.rank-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;margin:14px 0 16px}.rank-chip{background:#262018e6;border:1.5px solid rgba(154,143,122,.3);color:var(--text);border-radius:8px;padding:7px 0;font-size:12px;cursor:pointer;font-family:inherit;transition:all .12s}.rank-chip:hover{border-color:var(--gold)}.rank-chip.on{background:#d9a4412e;border-color:var(--gold);color:var(--gold-hi);font-weight:800}.rank-chip.mine{box-shadow:inset 0 -3px 0 var(--cho)}.opp-preview{display:flex;gap:14px;align-items:center;text-align:left;background:#262018d9;border:1.5px solid var(--acc, var(--gold));border-radius:14px;padding:12px 16px;margin-bottom:18px}.opp-preview img{width:72px;height:72px;border-radius:50%;object-fit:cover;border:2px solid var(--acc, var(--gold));background:#2c2418}.opp-preview strong{font-size:16px;display:block}.opp-preview em{font-style:normal;font-size:11.5px;color:var(--dim);display:block;margin:2px 0 4px}.opp-preview p{font-size:11.5px;color:#ece3d0bf;line-height:1.45;word-break:keep-all}.profile-chip{display:flex;align-items:center;gap:7px;padding:0 10px 0 4px;border-right:1px solid rgba(154,143,122,.25);margin-right:2px}.pc-rank{font-size:12.5px;font-weight:800;color:#6ea3e0}.pc-lv{font-size:11px;color:var(--gold-hi);font-weight:700}.pc-bar{width:52px;height:5px;border-radius:999px;background:#9a8f7a40;overflow:hidden}.pc-bar i{display:block;height:100%;background:var(--gold)}.overlay.cine{background:transparent;pointer-events:none}.letterbox{position:absolute;left:0;right:0;height:11vh;background:#050403}.letterbox.top{top:0}.letterbox.bottom{bottom:0}.subtitle{position:absolute;left:50%;bottom:13vh;transform:translate(-50%);text-align:center;max-width:min(92vw,720px);text-shadow:0 2px 12px rgba(0,0,0,.8)}.subtitle em{font-style:normal;font-size:11px;letter-spacing:.42em;color:var(--gold)}.subtitle p{margin:8px 0 0;font-family:Batang,"Noto Serif KR",serif;font-size:20px;line-height:1.6;color:#f4efe4;word-break:keep-all}.cine-dots{position:absolute;bottom:12vh;left:50%;transform:translate(-50%)}.cine-actions{position:absolute;right:4vw;bottom:12.5vh;display:flex;gap:8px;pointer-events:auto}.coin-chip.warn{border-color:#e0554099;color:#e0796a;animation:pulse 1.4s ease-in-out infinite}