/* 오늘만 산다 — 클로드 디자인 v1 (검은 바탕 · 라임 · 신문 헤드라인)
 * 디자인 원본: https://claude.ai/artifact/57HBg7sqt2Fg6ZzGnRjFD4
 */
:root {
  --gold: #F5D27A; --gold-bg: #1E1A0E; --gold-line: #4A3E1A; --gold-mid: #C9B98A;
  --pink: #FF7AB6; --pink-bg: #2A1422;
  --bg: #0D0E11; --panel: #111216; --card: #16181D; --card2: #1A1C22; --card3: #1E2128;
  --line: #22252C; --line2: #2A2E37; --line3: #3B3F49;
  --text: #F3F0E8; --sub: #A7A9B0; --mute: #8A8D95; --dim: #6E7179;
  --accent: #C6F432; --accent2: #E2FF7A; --ink: #0D0E11;
  --up: #FF4B55; --up-soft: #FF9AA0; --up-bg: #2A1416; --up-line: #5A2228;
  --down: #3E86FF; --down-soft: #8DB6FF; --down-bg: #101B2E; --down-line: #1F3A66;
  --debt: #FFB224; --debt-soft: #FFCB6B; --debt-mid: #C9A45A; --debt-bg: #2A2110; --debt-deep: #1E1708; --debt-line: #4A3610;
  --display: 'Black Han Sans', 'Apple SD Gothic Neo', sans-serif;
  --sans: 'IBM Plex Sans KR', -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { height: 100%; background: #060608; }
body { font-family: var(--sans); color: var(--text); -webkit-font-smoothing: antialiased; word-break: keep-all; overflow: hidden; overflow-x: hidden; }
html { overflow-x: hidden; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
button:disabled { opacity: 0.35; cursor: default; }
.mono, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.up { color: var(--up); } .down { color: var(--down); } .debtc { color: var(--debt); }
.hint { font-size: 13px; color: var(--mute); line-height: 1.5; }
.center { text-align: center; } .small { font-size: 11px; }

/* ── 틀 ── */
.app { max-width: 440px; margin: 0 auto; height: 100vh; height: 100dvh; display: flex; flex-direction: column; background: var(--bg); position: relative; }
@media (min-width: 480px) { .app { border-left: 1px solid var(--line); border-right: 1px solid var(--line); } }
.view { flex: 1; overflow-y: auto; padding: 10px 14px 18px; display: flex; flex-direction: column; gap: 8px; -webkit-overflow-scrolling: touch; }

/* ── 위 막대 ── */
.hud { padding: calc(14px + env(safe-area-inset-top)) 18px 12px; /* 안드로이드 새 판은 화면이 상태 표시줄 밑까지 — 아이폰·웹은 0(10-21) */ border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 9px; }
.hud-row { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; }
.hud-row > * { flex: none; white-space: nowrap; }
.hud-date { font-family: var(--mono); font-size: 16px; font-weight: 600; }
.chip-d { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ink); background: var(--accent); padding: 2px 7px; border-radius: 5px; }
.chip-pause { font-family: var(--mono); font-size: 11px; color: var(--sub); border: 1px solid var(--line2); padding: 1px 7px; border-radius: 5px; }
.chip-mk { flex: 0 1 auto !important; min-width: 0; overflow: hidden; text-overflow: ellipsis; margin-left: auto; font-size: 12px; color: var(--sub); border: 1px solid var(--line2); padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.hud-nw { display: flex; align-items: baseline; gap: 10px; }
.hud-nw .lbl { font-size: 12px; color: var(--mute); }
.hud-nw .num { font-size: 30px; font-weight: 600; }
.hud-nw .num.neg { color: #FF7A82; }
.hud-nw .chg { font-family: var(--mono); font-size: 14px; font-weight: 600; }
.hud-nw .who { margin-left: auto; font-size: 12px; color: var(--mute); white-space: nowrap; }
.meter-top { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 5px; }
.meter-top b { color: var(--debt); }
.meter-top span { color: var(--sub); }
.meter { height: 8px; border-radius: 4px; background: var(--line); display: flex; overflow: hidden; }
.meter i { display: block; background: var(--debt); }
.meter.free i { background: var(--accent); }
.hud-alert { font-size: 11px; font-weight: 700; color: var(--ink); background: var(--up); padding: 2px 8px; border-radius: 5px; animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: 0.55; } }

/* ── 홈 ── */
.countdown { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; background: var(--debt-bg); color: var(--debt-soft); font-size: 13px; }
.countdown b { font-family: var(--mono); }
.countdown .amt { margin-left: auto; font-family: var(--mono); font-weight: 600; }
.countdown.ok { background: var(--card); color: var(--sub); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.news { display: flex; flex-direction: column; gap: 7px; }
.news-top { display: flex; align-items: center; gap: 8px; }
.tag { font-size: 11px; font-weight: 700; color: var(--ink); background: var(--accent); padding: 2px 7px; border-radius: 4px; }
.tag.old { background: var(--line2); color: var(--sub); }
.news-top time { font-family: var(--mono); font-size: 12px; color: var(--mute); }
.news h2 { font-family: var(--display); font-weight: 400; font-size: 21px; line-height: 1.25; }
.news-old { display: flex; gap: 8px; font-size: 12px; color: var(--mute); line-height: 1.45; }
.news-old time { font-family: var(--mono); flex: none; }
.goal { display: flex; flex-direction: column; gap: 7px; padding: 11px 14px; }
.goal-h { display: flex; align-items: baseline; gap: 8px; }
.goal-h span { font-size: 12px; color: var(--mute); }
.goal-h b { font-size: 15px; }
.goal-h em { margin-left: auto; font-style: normal; font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--accent); }
.goal-s { font-size: 12px; color: var(--mute); }
.bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 3px; background: var(--accent); transition: width 0.3s; }
.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.st-top span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st { background: var(--card); border-radius: 10px; padding: 8px 9px; display: flex; flex-direction: column; gap: 5px; }
.st-top { display: flex; justify-content: space-between; font-size: 11px; color: var(--sub); }
.st-top b { color: var(--text); font-family: var(--mono); }
.st .bar { height: 4px; background: var(--line2); }
.st .bar i { background: var(--text); }
.st.bad { background: var(--up-bg); }
.st.bad .st-top, .st.bad .st-top b { color: var(--up-soft); }
.st.bad .bar { background: #3A2226; }
.st.bad .bar i { background: var(--up); }
.sec-h { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }
.sec-h h3 { font-size: 14px; font-weight: 700; }
.sec-h .link { color: var(--accent); font-size: 12px; font-weight: 700; }
.ap { display: flex; gap: 4px; }
.ap i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--accent); }
.ap i.on { background: var(--accent); }
.acts { display: flex; flex-wrap: wrap; gap: 6px; }
.act { flex: 1 1 22%; min-height: 46px; border: 1px solid var(--line2); border-radius: 10px; background: var(--card); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 4px; }
.act b { font-size: 13px; }
.act small { font-size: 10px; color: var(--mute); text-align: center; }
.act:active:not(:disabled) { border-color: var(--accent); }
.money { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.money div { background: var(--card2); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.money span { font-size: 11px; color: var(--mute); }
.money b { font-family: var(--mono); font-size: 14px; font-weight: 600; }
.holds { display: flex; flex-direction: column; margin-top: 6px; }
.flow { margin-top: 8px; font-size: 12px; line-height: 1.6; color: var(--mute); }
.flow b { font-family: var(--mono); }

/* ── 투자 ── */
.page-h { font-family: var(--display); font-weight: 400; font-size: 26px; }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; height: 32px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line2); color: var(--sub); font-size: 13px; }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--ink); font-weight: 700; }
.cashline { display: flex; gap: 14px; font-size: 12px; color: var(--mute); }
.cashline b { color: var(--text); font-family: var(--mono); }
.row { display: grid; grid-template-columns: 38px minmax(0, 1fr) 56px 96px; gap: 10px; align-items: center; padding: 11px 4px; border-bottom: 1px solid #1C1E24; text-align: left; width: 100%; }
.row.held { background: #161A0E; border-radius: 10px; border-bottom-color: transparent; }
.row:active { background: var(--card2); }
.mono-tile { width: 38px; height: 38px; border-radius: 10px; background: var(--line); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; letter-spacing: -0.03em; }
.row.held .mono-tile { background: #2E3618; color: var(--accent); }
.rn { display: flex; flex-direction: column; min-width: 0; }
.rn b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rn small { font-size: 11px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rn small em { font-style: normal; color: var(--accent); }
.hot { font-size: 10px; font-weight: 700; color: var(--ink); background: var(--accent); padding: 1px 5px; border-radius: 3px; margin-left: 4px; vertical-align: 1px; }
.rp { display: flex; flex-direction: column; align-items: flex-end; }
.rp b { font-family: var(--mono); font-size: 14px; font-weight: 600; white-space: nowrap; }
.rp small { font-family: var(--mono); font-size: 12px; }
.spark { display: block; width: 56px; height: 24px; }

/* ── 아래에서 올라오는 판 ── */
.sheet { position: fixed; inset: 0; z-index: 30; }
.sheet-back { position: absolute; inset: 0; background: rgba(6, 6, 8, 0.82); opacity: 0; transition: opacity 0.2s; }
.sheet-card { position: absolute; left: 50%; bottom: 0; width: 100%; max-width: 440px; max-height: 92dvh; overflow-y: auto; transform: translate(-50%, 100%); transition: transform 0.22s ease;
  background: #121317; border: 1px solid var(--line2); border-bottom: 0; border-radius: 24px 24px 0 0; padding: 10px 18px 24px; display: flex; flex-direction: column; gap: 12px; }
.sheet.open .sheet-back { opacity: 1; }
.sheet.open .sheet-card { transform: translate(-50%, 0); }
.pause-pill { position: absolute; left: 50%; top: 64px; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--sub); background: var(--card); border: 1px solid var(--line2); padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.grip { width: 40px; height: 4px; border-radius: 2px; background: var(--line3); align-self: center; }
.sheet-h { display: flex; align-items: center; gap: 12px; }
.sheet-h .mono-tile { width: 46px; height: 46px; font-size: 14px; background: #2E3618; color: var(--accent); }
.sheet-h b { display: block; font-size: 18px; }
.sheet-h small { font-size: 12px; color: var(--mute); }
.x { margin-left: auto; width: 40px; height: 40px; border-radius: 50%; background: var(--card3); color: var(--sub); display: flex; align-items: center; justify-content: center; }
.sheet-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sheet-price .big { font-family: var(--mono); font-size: 32px; font-weight: 600; letter-spacing: -0.02em; }
.pchip { font-family: var(--mono); font-size: 13px; padding: 2px 7px; border-radius: 5px; background: var(--card2); }
.pchip.up { background: var(--up-bg); } .pchip.down { background: var(--down-bg); }
.ranges { display: flex; gap: 6px; }
.ranges .chip { height: 30px; font-size: 12px; padding: 0 12px; }
.chart { width: 100%; height: 150px; display: block; }
.axis { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--dim); margin-top: -6px; }
.holdbox { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.holdbox div { background: var(--card2); border-radius: 10px; padding: 9px 10px; display: flex; flex-direction: column; gap: 2px; }
.holdbox span { font-size: 11px; color: var(--mute); }
.holdbox b { font-family: var(--mono); font-size: 14px; }
.trade-h { display: flex; justify-content: space-between; align-items: baseline; }
.trade-h b { font-size: 14px; }
.trade-h small { font-size: 12px; color: var(--mute); }
.trade-h small span { font-family: var(--mono); color: var(--text); }
.btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; }
.tb { height: 46px; border-radius: 12px; font-family: var(--mono); font-size: 14px; font-weight: 600; }
.tb.buy { border: 1px solid var(--up-line); background: var(--up-bg); color: var(--up-soft); }
.tb.buy.all { border: 0; background: var(--up); color: #fff; font-family: var(--sans); font-weight: 700; }
.tb.sell { border: 1px solid var(--down-line); background: var(--down-bg); color: var(--down-soft); }
.tb.sell.all { border: 0; background: #2F6FE0; color: #fff; font-family: var(--sans); font-weight: 700; }
.tb.wide { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 56px; font-family: var(--sans); }
.tb.wide small { font-size: 11px; font-weight: 500; opacity: 0.8; }

/* ── 빚 ── */
.debt-sum { background: var(--debt-deep); border: 1px solid var(--debt-line); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.debt-sum .top { display: flex; justify-content: space-between; font-size: 12px; color: var(--debt-soft); }
.debt-sum .top b { font-family: var(--mono); }
.debt-sum .big { font-family: var(--mono); font-size: 36px; font-weight: 600; color: var(--debt); letter-spacing: -0.02em; }
.debt-sum .two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.debt-sum .two div { background: var(--debt-bg); border-radius: 10px; padding: 9px 11px; display: flex; flex-direction: column; gap: 2px; }
.debt-sum .two span { font-size: 11px; color: var(--debt-mid); }
.debt-sum .two b { font-family: var(--mono); font-size: 16px; }
.debt-sum p { font-size: 12px; line-height: 1.5; color: var(--debt-mid); }
.sub-h { font-size: 13px; font-weight: 700; color: var(--sub); margin-top: 4px; }
.loan { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.loan-h { display: flex; align-items: center; gap: 10px; }
.loan-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--line); display: flex; align-items: center; justify-content: center; color: var(--sub); flex: none; }
.loan-ic.hot { background: var(--debt-bg); color: var(--debt); margin: 0; padding: 0; }
.loan-h b { display: block; font-size: 15px; }
.loan-h small { font-size: 11px; color: var(--mute); }
.loan-amt { margin-left: auto; font-family: var(--mono); font-size: 16px; font-weight: 600; white-space: nowrap; }
.lb { height: 40px; border-radius: 10px; border: 1px solid var(--line2); font-size: 13px; }
.lb.main { border: 0; background: var(--accent); color: var(--ink); font-weight: 700; }
.borrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.bw { border-radius: 12px; border: 1px solid var(--line2); background: var(--card); padding: 9px 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bw.lender { border-color: var(--debt-line); background: var(--debt-deep); color: var(--debt-soft); }
.bw b { font-size: 13px; }
.bw span { font-size: 11px; color: var(--mute); }
.bw.lender span { color: var(--debt-mid); }
.bw .lim { font-family: var(--mono); color: var(--sub); }
.bw-btns { display: flex; gap: 4px; margin-top: 6px; width: 100%; }
.bw-btns button { flex: 1; height: 32px; border-radius: 8px; border: 1px solid var(--up-line); background: var(--up-bg); color: var(--up-soft); font-size: 11px; font-weight: 700; }

/* ── 나 ── */
.profile { display: flex; gap: 14px; align-items: center; }
.avatar { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #2E3618; color: var(--accent); flex: none; }
.profile b { display: block; font-size: 16px; }
.profile small { display: block; font-size: 12px; color: var(--mute); margin-top: 2px; }
.gl { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--mute); }
.gl:last-child { border: 0; }
.gl.done { color: var(--text); }
.gl.done small { color: var(--accent); }
.gl small { font-family: var(--mono); font-size: 12px; }
.recrow { display: grid; grid-template-columns: 34px auto 1fr; gap: 8px; align-items: baseline; font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.recrow:last-child { border: 0; }
.recrow span { color: var(--accent); font-weight: 700; }
.recrow b { font-family: var(--mono); }
.recrow small { color: var(--mute); text-align: right; }
.help summary { font-weight: 700; font-size: 14px; cursor: pointer; }
.help p { font-size: 13px; color: var(--sub); line-height: 1.6; margin-top: 8px; }
.big-btn { min-height: 56px; border-radius: 14px; background: var(--accent); color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-weight: 700; font-size: 16px; width: 100%; }
.big-btn small { font-size: 12px; font-weight: 500; }
.ghost-btn { min-height: 46px; border-radius: 14px; border: 1px solid var(--line2); font-size: 14px; width: 100%; }
.two-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }

/* ── 시간 막대 · 아래 탭 ── */
.timebar { padding: 8px 14px 10px; border-top: 1px solid var(--line); background: var(--panel); }
.seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; background: var(--card2); border-radius: 14px; padding: 4px; }
.seg button { height: 48px; border-radius: 11px; color: var(--sub); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.seg button span { font-size: 10px; }
.seg button.on { background: var(--accent); color: var(--ink); }
.seg button.on span { font-weight: 700; }
.seg button[data-speed="0"].on { background: var(--card3); color: var(--text); }
.tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: 58px; border-top: 1px solid var(--line); background: #0B0C0F; padding-bottom: env(safe-area-inset-bottom); box-sizing: content-box; }
.tabs button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--mute); font-size: 11px; }
.tabs button.on { color: var(--accent); font-weight: 700; }

/* ── 사건 창 ── */
.modal { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; }
.modal-back { position: absolute; inset: 0; background: rgba(5, 5, 6, 0.86); }
.modal-card { position: relative; width: 100%; max-width: 440px; max-height: 94dvh; overflow-y: auto; background: #121317; border: 1px solid var(--line2); border-bottom: 0; border-radius: 24px 24px 0 0; animation: rise 0.24s ease; }
@keyframes rise { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.ev-art { position: relative; height: 232px; background: var(--card2); }
.ev-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ev-art .when { position: absolute; left: 16px; top: 14px; font-family: var(--mono); font-size: 12px; background: var(--bg); padding: 4px 9px; border-radius: 6px; }
.ev-body { padding: 16px 18px calc(22px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; }
.ev-body .when { font-family: var(--mono); font-size: 12px; color: var(--mute); }
.modal h2 { font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1.2; }
.modal.danger h2 { color: #FF7A82; }
.modal.gold h2 { color: var(--accent); }
.ev-text { white-space: pre-line; font-size: 15px; line-height: 1.6; color: #D9D6CF; }
.bubble { align-self: flex-start; max-width: 320px; background: var(--card3); border-radius: 4px 16px 16px 16px; padding: 11px 13px; font-size: 15px; line-height: 1.5; }
.ev-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ev-chips span { font-size: 12px; color: var(--sub); background: var(--card2); padding: 5px 9px; border-radius: 6px; }
.choices { display: flex; flex-direction: column; gap: 7px; margin-top: 2px; }
.choice { min-height: 52px; border-radius: 14px; border: 1px solid var(--line2); background: var(--card2); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: 9px 16px; text-align: left; }
.choice b { font-size: 15px; }
.choice small { font-size: 12px; color: var(--mute); }
.choice.main { border: 0; background: var(--accent); color: var(--ink); min-height: 56px; }
.choice.main b { font-size: 16px; }
.choice.main small { color: var(--ink); font-family: var(--mono); font-weight: 600; }
.choice.ghost { background: transparent; color: var(--sub); align-items: center; }
.ev-result { white-space: pre-line; font-size: 16px; line-height: 1.6; text-align: center; padding: 26px 18px 8px; }
.result-btn { margin: 8px 18px calc(22px + env(safe-area-inset-bottom)); width: calc(100% - 36px); }

/* ── 결산 ── */
.modal.ending { align-items: stretch; }
.modal.ending .modal-card { max-height: 100dvh; height: 100%; border-radius: 0; border: 0; display: flex; flex-direction: column; }
.end-art { position: relative; height: 300px; flex: none; background: var(--card2); }
.end-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.end-badge { position: absolute; left: 18px; bottom: 16px; font-size: 12px; font-weight: 700; color: var(--ink); background: var(--accent); padding: 3px 9px; border-radius: 5px; }
.end-badge.bankrupt { background: var(--up); }
.end-body { padding: 18px 18px calc(20px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; flex: 1; }
.end-k { font-family: var(--mono); font-size: 12px; color: var(--mute); }
.end-title { font-family: var(--display); font-size: 34px; line-height: 1.1; }
.end-nw { font-family: var(--mono); font-size: 34px; font-weight: 600; letter-spacing: -0.02em; color: var(--accent); }
.end-nw.neg { color: #FF7A82; }
.end-mult { font-size: 14px; color: var(--sub); }
.end-mult b { color: var(--text); }
.end-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.end-grid div { background: var(--card); border-radius: 10px; padding: 9px 11px; display: flex; flex-direction: column; gap: 2px; }
.end-grid .span2 { grid-column: span 2; }
.end-grid span { font-size: 11px; color: var(--mute); }
.end-grid b { font-size: 14px; }
.end-btns { display: flex; flex-direction: column; gap: 7px; margin-top: auto; }
.linkish { color: var(--mute); font-size: 13px; padding: 6px; }

/* ── 시작 화면 ── */
.intro { position: fixed; inset: 0; z-index: 50; background: var(--bg); overflow-y: auto; }
.intro-in { max-width: 440px; margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; }
.intro-art { position: relative; height: 51vh; min-height: 300px; max-height: 460px; flex: none; background: var(--card2); }
.intro-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
.intro-art .when { position: absolute; left: 24px; top: calc(24px + env(safe-area-inset-top)); font-family: var(--mono); font-size: 13px; color: var(--sub); background: var(--bg); padding: 6px 10px; border-radius: 6px; }
.intro-body { flex: 1; display: flex; flex-direction: column; gap: 18px; padding: 24px 24px 22px; }
.intro .l { opacity: 0; animation: fadeup 0.8s ease forwards; }
.intro .l1 { animation-delay: 0.2s; } .intro .l2 { animation-delay: 1s; } .intro .l3 { animation-delay: 1.8s; }
.intro .l4 { animation-delay: 2.4s; } .intro .l5 { animation-delay: 3s; }
.intro.skip .l { animation-delay: 0s !important; animation-duration: 0.2s; }
@keyframes fadeup { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.narr { display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 1.6; color: #C9C7C0; }
.kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.3em; color: var(--accent); }
.intro h1 { font-family: var(--display); font-weight: 400; font-size: 58px; line-height: 1; margin-top: 6px; }
.intro h1 em { font-style: normal; color: var(--accent); }
.tagline { margin-top: 8px; font-size: 14px; color: var(--sub); }
.intro-btns { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; } /* 10-13 진님 「글씨와 버튼 사이가 너무 넓다」 — 맨 아래로 밀지 않고 바로 아래에 */
#intro-real:empty { display: none; }
.intro-btns .ghost-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; }
.intro-btns .ghost-btn small { display: block; font-size: 12px; color: var(--sub); }
.disclaimer { font-size: 11px; color: var(--mute); text-align: center; margin-top: 6px; }

/* ── 알림 ── */
.toast { position: fixed; left: 50%; bottom: 150px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 60;
  max-width: min(400px, calc(100% - 32px)); width: max-content; padding: 11px 16px; border-radius: 12px; font-size: 14px; line-height: 1.45;
  background: var(--card3); border: 1px solid var(--line2); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); transition: all 0.2s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.gold { border-color: var(--accent); color: var(--accent2); }
.toast.red { border-color: var(--up-line); }
.toast.blue { border-color: var(--down-line); }
.toast.bad { border-color: var(--debt-line); color: var(--debt-soft); }
.ev-art.noimg, .end-art.noimg, .intro-art.noimg { display: none; }

/* ── 픽션 표시 · 주의사항 ── */
.fic { margin-left: auto; font-size: 10px; color: var(--mute); border: 1px solid var(--line2); padding: 1px 6px; border-radius: 4px; }
.fic-badge { position: absolute; right: 14px; top: 14px; font-size: 11px; color: var(--sub); background: var(--bg); padding: 4px 8px; border-radius: 6px; }
.end-note { font-size: 11px; color: var(--mute); text-align: center; }
.modal.notice { align-items: stretch; }
.modal.notice .modal-card { height: 100%; max-height: 100dvh; border: 0; border-radius: 0; background: var(--bg); }
.notice-in { min-height: 100%; display: flex; flex-direction: column; gap: 20px; padding: 48px 24px calc(24px + env(safe-area-inset-bottom)); max-width: 440px; margin: 0 auto; }
.notice-tag { align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--ink); background: var(--accent); padding: 3px 9px; border-radius: 5px; }
.notice-in h1 { font-family: var(--display); font-weight: 400; font-size: 40px; line-height: 1.1; }
.notice-in .lead { font-size: 15px; line-height: 1.6; color: #C9C7C0; }
.notice-in ol { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.notice-in li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 13px 14px; }
.notice-in li > span { font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--accent); }
.notice-in li b { font-size: 15px; }
.notice-in li p { font-size: 13px; line-height: 1.5; color: var(--sub); margin-top: 3px; }
.notice-in li.warn { background: var(--debt-deep); border-color: var(--debt-line); }
.notice-in li.warn > span { color: var(--debt); }
.notice-in li.warn b { color: var(--debt-soft); }
.notice-in li.warn p { color: var(--debt-mid); }
.notice-in li.warn p b { font-family: var(--mono); font-size: 13px; }
.notice-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.notice-foot p { font-size: 12px; color: var(--mute); text-align: center; }

/* ── 캐릭터 · 연애 · 집 · 여행 ── */
img.face { object-position: center 18%; }
.st { padding: 8px 7px; }
.avatar { overflow: hidden; border: 2px solid var(--accent); }
.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.pf { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: var(--line); border: 2px solid var(--pink); flex: none; display: block; }
.pf img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; display: block; }
.pf.big { width: 112px; height: 112px; border: 0; }
.love { display: flex; flex-direction: column; gap: 12px; }
.love-h { display: flex; gap: 12px; align-items: center; }
.love-h > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.love-h .stage { font-size: 11px; font-weight: 700; color: var(--pink); }
.love-h b { font-size: 18px; }
.love-h b small { font-size: 13px; font-weight: 500; color: var(--mute); }
.love-h .blurb { font-size: 12px; color: var(--sub); }
.love-bar > div:first-child { display: flex; justify-content: space-between; font-size: 12px; color: var(--sub); margin-bottom: 5px; }
.love-bar b { font-family: var(--mono); color: var(--pink); }
.bar.pink i { background: var(--pink); }
.love.empty b { font-size: 15px; }
.love.empty p { font-size: 13px; color: var(--sub); line-height: 1.55; }
.lb { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 48px; }
.lb small { font-size: 10px; color: var(--mute); }
.lb.pinkb { border: 0; background: var(--pink); color: var(--ink); font-weight: 700; }
.lb.pinkb small { color: var(--ink); }
.row-h { display: flex; justify-content: space-between; align-items: baseline; }
.row-h b { font-size: 15px; }
.row-h span { font-size: 12px; color: var(--mute); }
.home-c, .trip-c { display: flex; flex-direction: column; gap: 10px; }
.ladder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.ladder i { height: 6px; border-radius: 3px; background: var(--line2); }
.ladder i.on { background: var(--accent); }
.ladder-l { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); font-size: 12px; color: var(--sub); }
.ladder-l span:nth-child(2) { text-align: center; } .ladder-l span:nth-child(3) { text-align: right; }
.ladder-l span.on { color: var(--accent); font-weight: 700; }
.trips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.trip { border-radius: 12px; border: 1px solid var(--line2); background: var(--card2); overflow: hidden; display: flex; flex-direction: column; gap: 3px; padding-bottom: 7px; }
.trip.been { border-color: var(--accent); }
.trip .tp { position: relative; height: 58px; background: var(--line); display: block; }
.trip .tp img { width: 100%; height: 100%; object-fit: cover; display: block; }
.trip .tp em { position: absolute; right: 5px; top: 5px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: var(--ink); font-size: 11px; font-style: normal; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.trip b { font-size: 12px; }
.trip small { font-family: var(--mono); font-size: 10px; color: var(--mute); }
.mira { font-size: 12px; color: var(--accent); text-decoration: none; }
.modal.love h2 { color: var(--pink); }
.cs-in { min-height: 100%; display: flex; flex-direction: column; gap: 14px; padding: 44px 22px calc(22px + env(safe-area-inset-bottom)); max-width: 440px; margin: 0 auto; }
.cs-in h1 { font-family: var(--display); font-weight: 400; font-size: 34px; line-height: 1.15; }
.cs-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cs-card { position: relative; border: 1px solid var(--line2); border-radius: 18px; background: var(--card); padding: 14px 10px 12px; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--sub); }
.cs-card.on { border: 2px solid var(--accent); color: var(--text); padding: 13px 9px 11px; }
.cs-card b { font-size: 16px; }
.cs-card em { position: absolute; right: 10px; top: 10px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--ink); font-style: normal; font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.cs-l { font-size: 13px; font-weight: 700; color: var(--sub); margin-bottom: -6px; }
.cs-name { display: flex; gap: 8px; }
.cs-name input { flex: 1; min-width: 0; height: 50px; border-radius: 12px; border: 1px solid var(--line2); background: var(--card); color: var(--text); font: inherit; font-size: 17px; font-weight: 700; padding: 0 14px; }
.cs-name input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.dice { width: 50px; height: 50px; border-radius: 12px; border: 1px solid var(--line2); background: var(--card); color: var(--sub); display: flex; align-items: center; justify-content: center; flex: none; }
.seg.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.seg.two button { height: 42px; font-size: 14px; }
.cs-go { margin-top: auto; }
.pf.noimg img, .avatar.noimg img { visibility: hidden; }
.tp.noimg img { visibility: hidden; }

/* ── 예언판 ── */
.oracle-btn { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; padding: 12px 14px; border-radius: 14px; background: var(--gold-bg); border: 1px solid var(--gold-line); color: var(--gold-mid); }
.oracle-btn b { font-family: var(--display); font-weight: 400; font-size: 18px; color: var(--gold); flex: none; }
.oracle-btn span { font-size: 12px; }
.oracle-btn.slim { padding: 9px 12px; }
.oracle-btn.slim b { font-size: 15px; }
.oracle { position: fixed; inset: 0; z-index: 55; background: var(--bg); }
.or-in-wrap { max-width: 440px; margin: 0 auto; height: 100%; display: flex; flex-direction: column; }
.or-h { padding: 14px 16px 10px; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--line); }
.or-top { display: flex; align-items: center; gap: 8px; }
.or-back { font-size: 13px; color: var(--sub); padding: 6px 4px; }
.or-top h1 { font-family: var(--display); font-weight: 400; font-size: 22px; margin-right: auto; }
.or-top > span { font-size: 11px; color: var(--mute); }
.or-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.or-tabs button { height: 38px; font-size: 13px; }
.or-body { flex: 1; overflow-y: auto; padding: 12px 16px calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; }
.or-hero { display: flex; flex-direction: column; gap: 6px; }
.or-tag { align-self: flex-start; font-size: 11px; font-weight: 700; color: var(--ink); background: var(--gold); padding: 3px 8px; border-radius: 5px; }
.or-hero h2 { font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1.15; }
.or-hero p { font-size: 13px; color: var(--sub); }
.or-l { font-size: 12px; font-weight: 700; color: var(--sub); margin-top: 4px; }
.or-in { height: 46px; border-radius: 12px; border: 1px solid var(--line2); background: var(--card); color: var(--text); font: inherit; font-size: 14px; padding: 0 12px; width: 100%; }
.or-in:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.or-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.or-chips .chip { height: 34px; }
.or-dir { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.or-dir button { height: 52px; border-radius: 12px; border: 1px solid var(--line2); font-size: 16px; font-weight: 700; color: var(--sub); }
.or-dir button.on.up { background: var(--up); border-color: var(--up); color: #fff; }
.or-dir button.on.down { background: #2F6FE0; border-color: #2F6FE0; color: #fff; }
.or-mag { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.or-mag button { height: 40px; border-radius: 10px; border: 1px solid var(--line2); font-family: var(--mono); font-size: 14px; color: var(--sub); }
.or-mag button.on { background: var(--text); color: var(--ink); border-color: var(--text); font-weight: 600; }
.or-per { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.or-per button { height: 38px; font-size: 13px; }
.or-sum { background: var(--gold-bg); border: 1px solid var(--gold-line); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.or-sum > div { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.or-sum b { font-size: 15px; }
.or-sum .mono { font-size: 14px; font-weight: 600; color: var(--gold); white-space: nowrap; }
.or-sum p { font-size: 12px; line-height: 1.5; color: var(--gold-mid); }
.or-err { font-size: 12px; color: var(--debt-soft); margin-top: 6px; }
.or-foot { font-size: 11px; color: var(--mute); text-align: center; line-height: 1.5; }
.or-mine { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.or-mine b { font-size: 14px; }
.or-mine > span { font-family: var(--mono); font-size: 12px; color: var(--accent); }
.or-mine em { font-style: normal; font-family: var(--sans); color: var(--mute); margin-left: 4px; }
.or-note { font-size: 12px; color: var(--sub); background: var(--card2); border-radius: 10px; padding: 8px 10px; }
.or-note b { color: var(--gold); }
.or-card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 13px; display: flex; flex-direction: column; gap: 9px; }
.or-card.hit, .or-card.half { background: var(--gold-bg); border: 1.5px solid var(--gold); }
.or-card.half { border-style: dashed; }
.or-card.miss { opacity: 0.78; }
.or-ch { display: flex; align-items: center; gap: 9px; }
.or-ch > div { display: flex; flex-direction: column; min-width: 0; }
.or-ch b { font-size: 14px; }
.or-ch > div > span { font-size: 11px; color: var(--mute); }
.or-av { width: 34px; height: 34px; border-radius: 50%; background: var(--line); color: var(--sub); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex: none; }
.or-card.hit .or-av, .or-card.half .or-av { background: #3A3218; color: var(--gold); }
.or-title { font-size: 10px; font-weight: 700; color: var(--ink); background: var(--gold); padding: 1px 5px; border-radius: 3px; vertical-align: 1px; }
.or-stamp { margin-left: auto; font-family: var(--display); font-size: 18px; color: var(--gold); border: 2px solid var(--gold); border-radius: 6px; padding: 0 6px; transform: rotate(-6deg); white-space: nowrap; }
.or-stamp.half { font-size: 14px; }
.or-miss { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--dim); }
.or-dday { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--accent); border: 1px solid var(--accent); border-radius: 6px; padding: 2px 7px; }
.or-pred { font-size: 16px; }
.or-why { font-size: 13px; color: var(--gold-mid); }
.or-card.pending .or-why, .or-card.miss .or-why { color: var(--mute); }
.or-prog > div:first-child { display: flex; justify-content: space-between; font-size: 12px; color: var(--sub); margin-bottom: 5px; }
.or-prog b { font-family: var(--mono); }
.or-prog .bar i { background: var(--up); }
.or-sts { display: flex; gap: 6px; flex-wrap: wrap; }
.or-st { height: 34px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line2); font-size: 12px; color: var(--sub); }
.or-st.hit { border-color: var(--gold-line); color: var(--gold); }
.or-st.on { background: var(--gold); border-color: var(--gold); color: var(--ink); font-weight: 700; }
.or-st.pending.on, .or-st.miss.on { background: var(--accent); border-color: var(--accent); }
.or-demo { position: absolute; right: 12px; bottom: 12px; font-size: 10px; color: var(--mute); border: 1px solid var(--line2); padding: 1px 6px; border-radius: 4px; }
.or-king { background: var(--gold-bg); border: 1.5px solid var(--gold); border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 7px; align-items: center; text-align: center; color: var(--gold); }
.or-king .k { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; }
.or-king > b { font-family: var(--display); font-weight: 400; font-size: 26px; color: var(--text); }
.or-king > span { font-size: 13px; color: var(--gold-mid); }
.or-king .cnt { color: var(--text); }
.or-king button { height: 40px; padding: 0 16px; border-radius: 999px; background: var(--gold); color: var(--ink); font-size: 13px; font-weight: 700; }
.or-king button.on { background: transparent; border: 1px solid var(--gold); color: var(--gold); }
.or-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; align-items: end; }
.or-podium > div { background: var(--card); border-radius: 14px 14px 6px 6px; padding: 10px 6px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; text-align: center; }
.or-podium .p1 { height: 140px; background: #2A2410; border: 1px solid var(--gold); }
.or-podium .p2 { height: 112px; } .or-podium .p3 { height: 96px; }
.or-podium span { font-size: 18px; font-weight: 600; color: var(--sub); }
.or-podium .p1 span { font-size: 22px; color: var(--gold); }
.or-podium b { font-size: 13px; }
.or-podium small { font-size: 10px; color: var(--sub); }
.or-podium .p1 small { color: var(--gold); }
.or-rank > div { display: grid; grid-template-columns: 26px minmax(0, 1fr) 70px 64px; gap: 8px; align-items: center; padding: 9px 4px; border-bottom: 1px solid #1C1E24; font-size: 13px; }
.or-rank small { font-size: 11px; color: var(--mute); }
.or-rank em { font-style: normal; text-align: right; }
.or-rank span { color: var(--mute); }
.or-rank .me { background: #1A1F10; border-radius: 10px; padding: 9px 8px; border: 0; color: var(--accent); }
.or-ladder { display: flex; flex-wrap: wrap; gap: 4px; font-size: 11px; color: var(--mute); }
.or-ladder span { padding: 3px 7px; border-radius: 5px; background: var(--card); }

/* ── 촉 코인 · 상점 ── */
.or-coin { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--gold); background: var(--gold-bg); border: 1px solid var(--gold-line); padding: 4px 10px; border-radius: 999px; }
.or-earn { background: var(--gold-bg); border: 1px solid var(--gold-line); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.or-earn > div:first-child { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.or-earn > div:first-child b { font-size: 15px; color: var(--gold); }
.or-earn > div:first-child span { font-size: 11px; color: var(--gold-mid); }
.or-earn .g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.or-earn .g3 span { background: #2A2410; border-radius: 8px; padding: 7px 8px; font-size: 12px; color: var(--gold-mid); display: flex; flex-direction: column; gap: 2px; }
.or-earn .g3 b { font-family: var(--mono); color: var(--gold); }
.or-frames { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.or-fr { border-radius: 12px; border: 1px solid var(--line2); background: var(--card); padding: 9px 2px 7px; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.or-fr.on { border-color: var(--accent); }
.or-fr b { font-size: 11px; }
.or-fr small { font-size: 10px; color: var(--mute); }
.or-fr.on small { color: var(--accent); }
.or-av.lg { width: 40px; height: 40px; font-size: 15px; }
.or-av.sm { display: inline-flex; width: 22px; height: 22px; font-size: 11px; font-style: normal; vertical-align: -5px; margin-right: 4px; }
.or-av.f-gold { box-shadow: 0 0 0 3px var(--gold); }
.or-av.f-neon { box-shadow: 0 0 0 3px var(--accent), 0 0 12px var(--accent); }
.or-av.f-sakura { outline: 3px dashed var(--pink); outline-offset: 1px; }
.or-av.f-crystal { box-shadow: 0 0 0 2px #7CC4FF, 0 0 0 5px #0D0E11, 0 0 0 7px #7CC4FF; }
.or-perk { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.or-perk > div { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.or-perk b { font-size: 14px; }
.or-perk b em { font-style: normal; font-size: 11px; color: var(--accent); margin-left: 4px; }
.or-perk span { font-size: 11px; color: var(--mute); }
.or-perk button { height: 36px; padding: 0 12px; border-radius: 10px; background: var(--accent); color: var(--ink); font-size: 13px; font-weight: 600; }
.or-cardsec { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px; display: flex; gap: 12px; align-items: center; }
.or-mini { width: 96px; height: 120px; border-radius: 10px; background: var(--gold-bg); border: 1px solid var(--gold); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; flex: none; color: var(--gold); }
.or-mini b { font-family: var(--display); font-weight: 400; font-size: 13px; text-align: center; }
.or-mini span { font-size: 9px; color: var(--gold-mid); }
.or-cardsec > div:last-child { display: flex; flex-direction: column; gap: 6px; }
.or-cardsec > div:last-child b { font-size: 14px; }
.or-cardsec p { font-size: 12px; color: var(--sub); line-height: 1.5; }
.or-cardsec button { align-self: flex-start; height: 36px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--gold-line); background: var(--gold-bg); color: var(--gold); font-size: 13px; font-weight: 700; }
.or-log > div { display: flex; justify-content: space-between; padding: 7px 2px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--sub); }
.or-log b { color: var(--mute); }
.or-log b.plus { color: var(--gold); }
.or-report { position: absolute; right: 12px; bottom: 10px; font-size: 11px; color: var(--dim); padding: 4px; }
.or-mine.hit, .or-mine.half { border-color: var(--gold); background: var(--gold-bg); }
.or-mine.hit > span, .or-mine.half > span { color: var(--gold); }
.or-mine.miss > span { color: var(--mute); }
.or-king em { font-style: normal; font-size: 10px; color: var(--mute); }

.or-agree { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--sub); line-height: 1.5; }
.or-agree input { width: 20px; height: 20px; accent-color: var(--accent); flex: none; margin-top: 1px; }
.or-agree a, .or-foot a, .disclaimer a, .notice-foot a { color: var(--accent); }
.or-leave { align-self: center; font-size: 12px; color: var(--dim); text-decoration: underline; padding: 8px; }

/* ── 역사 재구성 사건 (클로드 디자인 HistEvent · HistResult) ── */
.ev-art.short { height: 168px; }
.ev-art.short::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,5,6,0) 45%, #121317 100%); pointer-events: none; }
.fic-badge.hist { color: var(--ink); background: var(--gold); font-weight: 700; }
.pick-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pick-head b { font-size: 15px; }
.pick-head span { font-family: var(--mono); font-size: 11px; color: var(--mute); white-space: nowrap; }
.picks { display: flex; flex-direction: column; gap: 7px; }
.pick { text-align: left; border-radius: 14px; border: 1px solid var(--line2); background: var(--card2); padding: 10px 12px; display: flex; gap: 11px; align-items: flex-start; }
.pick .yr { font-family: var(--mono); font-weight: 600; font-size: 13px; background: var(--line2); border-radius: 6px; padding: 3px 6px; flex: none; }
.pick .pk { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.pick .pk b { font-size: 14px; }
.pick .pk small { font-size: 12px; color: var(--sub); line-height: 1.45; }
.pick .pk-ok { flex: none; margin-top: 2px; color: var(--accent); visibility: hidden; }
.pick.on { border: 1.5px solid var(--accent); background: #1A1F10; }
.pick.on .yr { background: var(--accent); color: var(--ink); }
.pick.on .pk-ok { visibility: visible; }
.choice.main.row { flex-direction: row; align-items: center; justify-content: space-between; }
.choice.main.center { align-items: center; }
.choice.main:disabled { opacity: 0.35; }
.ev-note { margin: 0; font-size: 11px; line-height: 1.5; color: #6E717A; text-align: center; }
.he-hero { position: relative; height: 170px; overflow: hidden; background: radial-gradient(120% 90% at 20% 0%, #2B2A12 0%, #121317 70%); }
.he-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.32; }
.he-hero.noimg img { display: none; }
.he-in { position: absolute; left: 18px; right: 18px; bottom: 14px; }
.he-k { font-size: 12px; color: var(--sub); }
.he-year { display: flex; align-items: flex-end; gap: 10px; margin-top: 4px; }
.he-year b { font-family: var(--display); font-weight: 400; font-size: 64px; line-height: 0.95; color: var(--gold); }
.he-year span { font-family: var(--display); font-size: 22px; line-height: 1.2; padding-bottom: 6px; }
.he-res { position: absolute; right: 16px; top: 16px; display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; padding: 6px 10px; border-radius: 999px; }
.he-res svg { width: 13px; height: 13px; }
.he-res.hit { color: var(--ink); background: var(--accent); }
.he-res.miss { color: #fff; background: #3A3D46; }
.he-res.skip { color: var(--sub); background: var(--bg); }
.he-pred { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: var(--card2); border: 1px solid var(--line2); border-radius: 12px; padding: 10px 12px; font-size: 13px; color: var(--sub); }
.he-pred b { color: var(--text); }
.he-pred em { font-style: normal; font-family: var(--mono); font-weight: 600; white-space: nowrap; }
.he-pred.hit { background: #1A1F10; border-color: #3A4A12; }
.he-pred.hit em { color: var(--accent); }
.he-sub { font-size: 14px; }
.he-moves { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 7px; }
.he-moves span { display: flex; justify-content: space-between; gap: 6px; font-size: 13px; color: var(--sub); background: var(--card2); padding: 8px 10px; border-radius: 8px; }
.he-line { border-left: 3px solid var(--gold); padding: 2px 0 2px 12px; }
.he-line span { font-size: 12px; color: var(--gold); font-weight: 700; }
.he-line p { margin: 4px 0 0; font-size: 14px; line-height: 1.55; }
.he-others { display: flex; flex-direction: column; gap: 5px; }
.he-others span { font-size: 12px; color: var(--mute); }
.he-others p { margin: 0; font-size: 13px; color: #6E717A; }
.he-others p b { color: var(--mute); }

/* ── 그림 많은 판 v2 (클로드 디자인 HomeV2 · MarketV2 · DebtV2) ── */
.scene { position: relative; height: 196px; border-radius: 16px; overflow: hidden; background: var(--card2); flex: none; }
.scene img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scene::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,5,6,0.55) 0%, rgba(5,5,6,0) 32%, rgba(5,5,6,0) 52%, rgba(5,5,6,0.88) 100%); pointer-events: none; }
.scene > div { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 10px 12px 12px; }
.scene-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.scene-chips span { font-size: 11px; color: #D9D6CF; background: rgba(13,14,17,0.72); padding: 3px 7px; border-radius: 6px; }
.scene-chips b { font-family: var(--mono); color: var(--text); }
.scene-chips span.bad { background: rgba(42,20,22,0.9); color: var(--up-soft); }
.scene-chips span.bad b { color: var(--up); }
.scene-cap { display: flex; flex-direction: column; gap: 2px; }
.scene-cap span { font-size: 12px; color: var(--sub); }
.scene-cap b { font-family: var(--display); font-weight: 400; font-size: 22px; line-height: 1.2; }
.scene.noimg { height: auto; min-height: 96px; }
.scene.noimg img { display: none; }
.news-main { display: flex; gap: 12px; align-items: stretch; }
.news-art { width: 92px; height: 92px; flex: none; border-radius: 10px; overflow: hidden; background: var(--card2); }
.news-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-art.noimg { display: none; }
.news-in { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.acts.pics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.acts.pics .act { padding: 0 0 6px; overflow: hidden; justify-content: flex-start; gap: 2px; min-height: 0; }
.act-art { display: block; width: 100%; height: 58px; overflow: hidden; background: var(--card2); margin-bottom: 3px; }
.act-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.act-art.noimg { display: none; }
.acts.pics .act small { padding: 0 3px; line-height: 1.3; }
.acts.pics .act:disabled .act-art img { filter: grayscale(0.7); }
.thumb { width: 42px; height: 42px; border-radius: 10px; overflow: hidden; background: var(--line); flex: none; display: block; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb.big { width: 46px; height: 46px; }
.row { grid-template-columns: 42px minmax(0, 1fr) 56px 96px; }
.row.held .thumb { box-shadow: 0 0 0 2px var(--accent); }
.hot-banner { flex: none; position: relative; display: flex; align-items: flex-end; width: 100%; height: 120px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line2); background: var(--card2); text-align: left; padding: 0; }
.hb-art { position: absolute; inset: 0; }
.hb-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hot-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,5,6,0.9) 0%, rgba(5,5,6,0.4) 60%, rgba(5,5,6,0.1) 100%); }
.hb-in { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; }
.hb-in .hot { align-self: flex-start; margin: 0; }
.hb-in b { font-family: var(--display); font-weight: 400; font-size: 22px; }
.hb-in small { font-size: 12px; color: var(--sub); }
.hb-in em { font-style: normal; font-family: var(--mono); font-weight: 600; }
.sheet-art { height: 128px; margin: 0 -18px 4px; overflow: hidden; background: var(--card2); }
.sheet-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sheet-art.noimg { display: none; }
.debt-sum.pic { position: relative; overflow: hidden; flex: none; }
.ds-art { display: block; height: 120px; margin: -14px -16px 2px; overflow: hidden; }
.ds-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ds-art.noimg { display: none; }
.bw { padding-top: 0; overflow: hidden; }
.bw-art { display: block; width: calc(100% + 12px); height: 56px; margin: 0 -6px 6px; overflow: hidden; }
.bw-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bw-art.noimg { display: none; }
.home-art { height: 130px; margin: -12px -14px 0; border-radius: 14px 14px 0 0; overflow: hidden; background: var(--card2); }
.home-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-art.noimg { display: none; }

/* ── 아이폰 앱(html.app): 예언판은 서버가 열리기 전까지 숨긴다 ── */
html.app [data-oracle] { display: none !important; }
html.app body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
html.app input, html.app textarea { -webkit-user-select: text; user-select: text; }

/* ── 방이 자란다(홈 맨 위 도트 방) · 내 방 꾸미기 ── */
.scene.room { height: 224px; background: #0D0E11; }
.scene.room > .room-in { display: block; padding: 0; z-index: 0; }
.room-base { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.scene.room .spr { position: absolute; height: auto; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35)); pointer-events: none; }
.scene.room.noimg { height: 224px; background: radial-gradient(120% 90% at 50% 100%, #1E2128 0%, #0D0E11 70%); }
.room-deco { position: absolute; right: 10px; bottom: 12px; z-index: 2; font-size: 12px; font-weight: 700; color: var(--accent); background: rgba(13, 14, 17, 0.82); border: 1px solid #3A4A12; padding: 5px 10px; border-radius: 999px; }
.room-shop { display: flex; flex-direction: column; gap: 10px; }
.ri-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ri { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 9px; border-radius: 12px; border: 1px solid var(--line2); background: var(--card2); text-align: center; }
.ri-art { width: 56px; height: 56px; display: block; }
.ri-art img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.ri b { font-size: 12px; }
.ri small { font-family: var(--mono); font-size: 11px; color: var(--sub); }
.ri em { font-style: normal; font-size: 10px; line-height: 1.3; color: var(--mute); }
.ri.own { border-color: #3A4A12; background: #161A0E; }
.ri.own small { color: var(--accent); }
.ri:disabled:not(.own) { opacity: 0.45; }

/* ── 엔딩 도감 · 결산의 대표 엔딩 ── */
.end-new { position: absolute; left: 16px; top: 14px; font-size: 12px; font-weight: 700; color: var(--ink); background: var(--gold); padding: 4px 9px; border-radius: 999px; }
.end-ending { font-size: 13px; font-weight: 700; color: var(--gold); }
.end-line { margin: 2px 0 6px; font-size: 14px; color: var(--sub); line-height: 1.5; }
.end-ends .ghost-btn { width: 100%; }
.modal.endbook .modal-card { max-height: 94dvh; }
.eb-in { padding: 18px 16px calc(20px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; }
.eb-h { display: flex; justify-content: space-between; align-items: center; }
.eb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.eb { display: flex; flex-direction: column; gap: 3px; background: var(--card2); border: 1px solid var(--line2); border-radius: 12px; padding: 0 0 9px; overflow: hidden; }
.eb-art { display: block; aspect-ratio: 16 / 10; background: var(--line); overflow: hidden; }
.eb-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eb-art.lock { display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 32px; color: var(--line3); }
.eb b { font-size: 13px; padding: 0 9px; }
.eb small { font-size: 11px; color: var(--mute); padding: 0 9px; line-height: 1.4; }
.eb:not(.on) b { color: var(--mute); }

/* ── 시즌 순위 (2026-10-13) ── */
.season-cond { display: flex; flex-direction: column; gap: 4px; background: #161A0E; border: 1px solid #3A4A12; border-radius: 14px; padding: 12px 14px; margin: 8px 0 4px; }
.season-cond .real-tag { align-self: flex-start; }
.season-cond > b { font-size: 16px; color: var(--accent); }
.season-cond span { font-size: 13px; }
.season-cond small { font-size: 12px; color: var(--mute); line-height: 1.5; }
.rank-form .big-btn small { display: block; font-size: 11px; font-weight: 500; opacity: .8; }
.rankbox:empty { display: none; }
.rank-form { display: flex; flex-direction: column; gap: 6px; }
.rank-form input { height: 44px; border-radius: 12px; border: 1px solid var(--line2); background: var(--card2); color: var(--text); padding: 0 12px; font-size: 15px; }
.rank-done { display: flex; align-items: center; gap: 8px; font-size: 14px; background: #161A0E; border: 1px solid #3A4A12; border-radius: 12px; padding: 10px 12px; }
.rank-done b { color: var(--accent); }
.rank-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.rank-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; background: var(--card2); border-radius: 10px; padding: 8px 10px; }
.rank-list li > span { grid-row: span 2; color: var(--gold); font-weight: 700; }
.rank-list li em { grid-row: span 2; font-style: normal; font-weight: 600; }
.rank-list li small { font-size: 11px; color: var(--mute); }
html.app [data-rank], html.app [data-rankbox] { display: none !important; }

/* ── 결과 창 링크 · 광고 ── */
.result-link { display: block; margin: 4px 18px 0; text-align: center; font-size: 14px; font-weight: 700; color: var(--accent); text-decoration: none; padding: 10px; border: 1px solid #3A4A12; border-radius: 12px; background: #161A0E; }
.ad-btn { width: 100%; }

.ri.own:disabled { opacity: 1; }
.eb-art.noimg img { display: none; }
.rank-list li > b { grid-column: 2; grid-row: 1; }
.rank-list li > small { grid-column: 2; grid-row: 2; }
.rank-list li > em { grid-column: 3; grid-row: 1 / span 2; }

/* ── 버그 신고 (bug.js) ── */
.bug-foot { display: flex; justify-content: center; padding: 18px 0 6px; }
.bug-foot.open { display: block; }
.bug-link { font-size: 12px; color: var(--mute); background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; }
.bug-card { display: flex; flex-direction: column; gap: 6px; border-color: #3A4A12; background: #141810; }
.bug-card b { font-size: 15px; }
.bug-card p { font-size: 13px; color: var(--sub); line-height: 1.5; }
.bug-form { display: flex; flex-direction: column; gap: 8px; }
.bug-form label { font-size: 14px; font-weight: 700; }
.bug-form textarea { width: 100%; box-sizing: border-box; border-radius: 12px; border: 1px solid var(--line2); background: var(--card2); color: var(--text); padding: 10px 12px; font: inherit; font-size: 15px; resize: vertical; }
.bug-row { display: flex; align-items: center; gap: 10px; }
.bug-row .big-btn { flex: 1; }
.bug-done { font-size: 14px; color: var(--accent); text-align: center; }
/* 10-13 진님 「아이폰에도 버그 신고 켜」 — 앱 개인정보에 「기타 사용자 콘텐츠·기타 진단(앱 기능)」을 넣고 켰다 */

/* ── 투자 탭 넓히기: 찾기 · 업종 · 정렬 · 한 달 급등 ── */
.page-h small { font-family: var(--mono); font-size: 13px; color: var(--mute); margin-left: 6px; }
.mk-search input { width: 100%; box-sizing: border-box; height: 42px; border-radius: 12px; border: 1px solid var(--line2); background: var(--card2); color: var(--text); padding: 0 14px; font-size: 15px; }
.chips.scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.chips.scroll::-webkit-scrollbar { display: none; }
.chip.sm { font-size: 12px; padding: 5px 10px; flex: none; }
.chips.sorts { margin-top: 2px; }
.movers { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.movers::-webkit-scrollbar { display: none; }
.mv { flex: none; width: 104px; display: flex; flex-direction: column; gap: 3px; background: var(--card2); border: 1px solid var(--line2); border-radius: 12px; padding: 0 0 8px; overflow: hidden; text-align: left; }
.mv-art { display: block; height: 60px; overflow: hidden; background: var(--line); }
.mv-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mv b { font-size: 12px; padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv em { font-style: normal; font-size: 13px; font-weight: 600; padding: 0 8px; }

/* ── 살아 있는 방: 가까이 · 큰 주인공 · 걷기 · 혼잣말 (10-12 진님 「사람이 너무 작고 볼 게 없다」) ── */
.scene.room > .room-in { transform: scale(1.16); transform-origin: 50% 64%; }
.me-wrap { position: absolute; transition: left 2.6s linear, bottom 2.6s linear; z-index: 2; pointer-events: none; }
.me-wrap .spr.me { position: relative; width: 100%; height: auto; display: block; animation: bob 0.9s ease-in-out infinite; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.45)); }
.me-wrap.flip .spr.me { transform: scaleX(-1); }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2px; } }
.me-bubble { position: absolute; left: 50%; bottom: 96%; transform: translateX(-50%); white-space: nowrap; font-size: 10px; font-weight: 700; color: #0D0E11; background: #F3F0E8; padding: 4px 8px; border-radius: 10px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); opacity: 0; transition: opacity 0.3s; }
.me-bubble.show, .me-bubble:not(:empty) { opacity: 1; }
.me-bubble::after { content: ''; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #F3F0E8; }

/* ── 이대로 살면 ── */
.proj { display: flex; flex-direction: column; gap: 4px; border-color: #3A3256; background: #15131E; }
.proj-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.proj-h span { font-size: 12px; color: #B9A8F0; font-weight: 700; }
.proj-h b { font-size: 16px; }
.proj-h i { font-style: normal; }
.proj-h em { font-style: normal; font-size: 12px; color: var(--gold); margin-left: auto; }
.proj-s { font-size: 12px; color: var(--sub); line-height: 1.5; }
.proj-n { font-size: 10px; color: var(--dim); }

/* ── 캐릭터 고르기 8명 ── */
.cs-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.cs-grid .cs-card { padding: 6px 4px 8px; gap: 2px; position: relative; }
.cs-grid .cs-card .pf { width: 100%; aspect-ratio: 3 / 4; height: auto; border-radius: 10px; overflow: hidden; display: block; }
.cs-grid .cs-card .pf img { width: 100%; height: 100%; object-fit: cover; }
.cs-grid .cs-card b { font-size: 13px; }
.cs-grid .cs-card small { font-size: 10px; color: var(--mute); line-height: 1.3; text-align: center; }
.cs-who { background: var(--card2); border-radius: 12px; padding: 10px 12px; }
.cs-who b { font-size: 14px; }
.cs-who p { font-size: 13px; color: var(--sub); margin-top: 2px; }
.seg.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cs-preview { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--sub); background: #15131E; border: 1px solid #3A3256; border-radius: 12px; padding: 9px 12px; line-height: 1.5; }
.cs-preview b { color: var(--text); }
.cs-grid .cs-card .pf { border: 0; }
.cs-grid .cs-card.on { padding: 5px 3px 7px; }
.cs-grid .cs-card em { right: 6px; top: 6px; width: 18px; height: 18px; font-size: 11px; }
.movers, .chips.scroll, .mk-search { flex: none; }

/* ── 2026-10-13 예측 쪽지 · 시간 보내기(내일·일주일·1년) · 진짜 시장 · 되감기 ── */
.kicker { letter-spacing: 0.14em; }
.timebar { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 6px; align-items: stretch; }
.tb-slip { border-radius: 14px; background: var(--accent); color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-weight: 700; min-height: 56px; }
.tb-slip span { font-size: 11px; }
.seg.jumps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seg.jumps button { position: relative; overflow: hidden; color: var(--text); }
.seg.jumps button span { font-size: 12px; font-weight: 700; }
.seg.jumps button.on { background: var(--card3); color: var(--accent); }
.seg.jumps .jp { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--accent); transition: width 0.12s linear; }
.timebar.running .tb-slip { opacity: 0.35; }
@keyframes pulse-ring { 0%, 100% { box-shadow: inset 0 0 0 0 rgba(198, 244, 50, 0); } 50% { box-shadow: inset 0 0 0 2px rgba(198, 244, 50, 0.9); } }
.seg.jumps button.pulse { animation: pulse-ring 1s ease-in-out infinite; color: var(--accent); }

.sec-h h3 small { font-family: var(--mono); font-size: 11px; color: var(--mute); font-weight: 500; margin-left: 4px; }
.card.slips, .card.real, .card.coach { display: flex; flex-direction: column; gap: 6px; flex: none; }
.slip-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 2px; border-bottom: 1px solid #1C1E24; text-align: left; width: 100%; }
.slip-row:last-of-type { border-bottom: 0; }
.sr-dir { font-size: 13px; text-align: center; }
.sr-n { display: flex; flex-direction: column; min-width: 0; }
.sr-n b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-n small { font-size: 11px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-r { display: flex; flex-direction: column; align-items: flex-end; }
.sr-r b { font-family: var(--mono); font-size: 14px; font-weight: 600; white-space: nowrap; }
.sr-r small { font-size: 11px; color: var(--sub); white-space: nowrap; }
.ghost-btn.slip-new { min-height: 40px; font-weight: 700; color: var(--accent); border-color: #3A4A12; }
.memo { display: flex; flex-direction: column; gap: 2px; background: #1A1F10; border: 1px dashed #4A5E18; border-radius: 10px; padding: 8px 10px; }
.memo span { font-size: 11px; color: var(--accent); font-weight: 700; }
.memo b { font-size: 13px; font-weight: 500; }
.memo i { font-style: normal; font-weight: 600; }
.memo-in { font-size: 12px; color: var(--sub); background: #1A1F10; border-radius: 8px; padding: 6px 10px; margin-top: -4px; }

.card.coach { gap: 10px; background: linear-gradient(160deg, #1A1F10 0%, var(--card) 62%); border-color: #3A4A12; }
/* 첫 투자(10-22) — 홈 맨 위 많이 찾는 6종목, 누르면 바로 구매 */
.first-buy { display: flex; flex-direction: column; gap: 10px; border-color: var(--accent); }
.fb-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.fb-h b { font-family: var(--display); font-size: 19px; }
.fb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fb { display: flex; flex-direction: column; gap: 3px; background: var(--card2); border: 1px solid var(--line2); border-radius: 12px; padding: 0 0 8px; overflow: hidden; text-align: left; }
.fb:active { border-color: var(--accent); }
.fb-art { display: block; height: 58px; overflow: hidden; background: var(--line); }
.fb-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fb b { font-size: 13px; padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb em { font-style: normal; font-size: 12px; font-weight: 600; padding: 0 8px; }
.fb-me { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--sub); text-align: left; padding: 2px 0; }
.fb-me b { color: var(--text); }
.fb-me em { font-style: normal; color: var(--accent); white-space: nowrap; }
.fb-fic { font-size: 11px; color: var(--mute); line-height: 1.5; }
.fb-fic .linkish { font-size: 11px; padding: 0 2px; text-decoration: underline; }
.coach-steps { list-style: none; counter-reset: c; display: flex; flex-direction: column; gap: 8px; }
.coach-steps li { counter-increment: c; display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 8px; }
.coach-steps li::before { content: counter(c); grid-row: span 2; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--ink); font-family: var(--mono); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.coach-steps li:last-child::before { background: var(--gold); }
.coach-steps b { font-size: 14px; }
.coach-steps span { font-size: 12px; color: var(--sub); line-height: 1.45; }

.card.real { border-color: var(--gold-line); background: linear-gradient(160deg, var(--gold-bg) 0%, var(--card) 70%); }
.real-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.real-tag { font-size: 11px; font-weight: 700; color: var(--ink); background: var(--gold); padding: 2px 8px; border-radius: 5px; white-space: nowrap; }
.real-tag.sm { font-size: 10px; padding: 1px 6px; margin-right: 3px; vertical-align: 1px; }
.real-lead { font-size: 13px; line-height: 1.55; }
.real-new { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--gold); color: var(--ink); border-radius: 12px; padding: 11px 14px; font-weight: 700; font-size: 14px; text-align: left; animation: glow 1.6s ease-in-out infinite; }
.real-new.big { width: 100%; font-size: 15px; }
.real-new .real-tag { background: var(--ink); color: var(--gold); }
@keyframes glow { 50% { box-shadow: 0 0 0 4px rgba(245, 210, 122, 0.25); } }
.real-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.real-f .link { color: var(--gold); font-size: 13px; font-weight: 700; white-space: nowrap; }
.intro-real { font-size: 13px; color: var(--sub); }

.sheet-card.slip { gap: 12px; }
.slip-w button { height: 54px; }
.slip-w button b { font-size: 14px; }
.slip-w button small { font-size: 10px; opacity: 0.8; }
.slip-w button.on small { opacity: 0.75; }
.seg.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seg.three button { height: 42px; font-size: 14px; }
.cs-l small { font-weight: 500; font-size: 11px; color: var(--mute); margin-left: 6px; }
.slip-asset { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 10px; align-items: center; background: var(--card2); border: 1px solid var(--line2); border-radius: 12px; padding: 8px 10px; text-align: left; width: 100%; }
.slip-asset em { font-style: normal; }
.sa-x { font-size: 12px; color: var(--accent); font-weight: 700; white-space: nowrap; }
.slip-list { max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; border: 1px solid var(--line2); border-radius: 12px; flex: none; }
.srow { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-bottom: 1px solid #1C1E24; text-align: left; }
.srow:last-child { border-bottom: 0; }
.srow .mono { font-size: 13px; }
.real-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ra { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 9px 10px; border-radius: 12px; border: 1px solid var(--line2); background: var(--card2); text-align: left; min-width: 0; }
.ra b { font-size: 13px; white-space: nowrap; }
.ra small { font-size: 11px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ra.on { border-color: var(--gold); background: var(--gold-bg); }
.ra.on small { color: var(--gold-mid); }
.slip-dir { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.slip-dir button { height: 54px; border-radius: 14px; font-size: 16px; font-weight: 700; border: 1px solid var(--line2); background: var(--card2); color: var(--sub); }
.slip-dir .up.on { background: var(--up); border-color: var(--up); color: #fff; }
.slip-dir .down.on { background: #2F6FE0; border-color: #2F6FE0; color: #fff; }
.slip-link { display: flex; gap: 10px; align-items: flex-start; text-align: left; background: var(--gold-bg); border: 1px solid var(--gold-line); border-radius: 12px; padding: 10px 12px; }
.slip-link .box { flex: none; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--gold); color: var(--ink); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; margin-top: 1px; }
.slip-link.on .box { background: var(--gold); }
.slip-link b { display: block; font-size: 14px; }
.slip-link small { font-size: 11px; color: var(--gold-mid); line-height: 1.45; }
.slip-from { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 52px; border-radius: 14px; border: 1px solid #3A4A12; background: #1A1F10; color: var(--accent); width: 100%; flex: none; }
.slip-from b { font-size: 15px; }
.slip-from small { font-size: 11px; color: var(--sub); }

.pr-hero { position: relative; min-height: 226px; overflow: hidden; display: flex; align-items: flex-end; background: radial-gradient(120% 90% at 80% 0%, #2B3312 0%, #121317 70%); }
.pr-hero.miss { background: radial-gradient(120% 90% at 80% 0%, #17223A 0%, #121317 70%); }
.pr-hero.real.hit { background: radial-gradient(120% 90% at 80% 0%, #3A2E10 0%, #121317 70%); }
.pr-art { position: absolute; inset: 0; }
.pr-art img { width: 100%; height: 100%; object-fit: cover; opacity: 0.26; display: block; }
.pr-art.noimg { display: none; }
.pr-in { position: relative; padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 4px; width: 100%; }
.pr-k { font-size: 12px; color: var(--sub); }
.pr-name { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pr-name b { font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1.15; }
.pr-name span { font-size: 14px; font-weight: 700; }
.pr-big { font-size: 56px; font-weight: 600; line-height: 1; letter-spacing: -0.03em; margin-top: 2px; }
.pr-px { font-size: 13px; color: var(--sub); }
.pr-px span { color: var(--dim); }
.pr-dates { font-size: 11px; color: var(--mute); }
.pr-stamp { position: absolute; right: 16px; top: 18px; z-index: 1; font-family: var(--display); font-size: 26px; padding: 5px 14px; border: 3px solid currentColor; border-radius: 10px; transform: rotate(-8deg); animation: stamp 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.pr-hero.hit .pr-stamp { color: var(--accent); }
.pr-hero.miss .pr-stamp { color: var(--down-soft); }
.pr-hero.real.hit .pr-stamp { color: var(--gold); }
@keyframes stamp { 0% { transform: rotate(-8deg) scale(2.2); opacity: 0; } 100% { transform: rotate(-8deg) scale(1); opacity: 1; } }
.pr-meta { font-size: 12px; color: var(--sub); line-height: 1.5; }
.pr-meta b { color: var(--accent); }
.pr-twin { display: flex; align-items: center; gap: 6px; font-size: 13px; background: var(--gold-bg); border: 1px solid var(--gold-line); border-radius: 10px; padding: 9px 11px; line-height: 1.45; }
.choice.rewind { border-color: #3A4A12; background: #1A1F10; }
.choice.rewind b { color: var(--accent); }

.pst-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.pst-grid div { background: var(--card2); border-radius: 10px; padding: 9px 11px; display: flex; flex-direction: column; gap: 1px; }
.pst-grid span { font-size: 11px; color: var(--mute); }
.pst-grid b { font-size: 20px; }
.pst-grid small { font-size: 11px; color: var(--sub); }
.pst-by { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--sub); margin-top: 8px; }
.pst-row { display: flex; gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px solid #1C1E24; font-size: 13px; }
.pst-row:last-child { border-bottom: 0; }
.pst-row b { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.pst-row small { color: var(--mute); font-size: 11px; }
.pst-row i { font-style: normal; font-size: 11px; color: var(--mute); width: 34px; text-align: right; }
.pst-row i.hit { color: var(--accent); }
.pst-row .rw { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #3A4A12; color: var(--accent); flex: none; }

/* ── 2026-10-13 모은 돈 1·2·3천 시작 배지 · 오늘의 한 표 · 쪽지 탭 · 집 대출 ── */
.badge { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font-size: 10px; font-weight: 700; color: var(--ink); flex: none; vertical-align: -3px; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18); }
.badge.gold { background: radial-gradient(circle at 35% 30%, #FFF1B8 0%, #F5D27A 45%, #C99A2E 100%); }
.badge.silver { background: radial-gradient(circle at 35% 30%, #FFFFFF 0%, #CDD2DB 45%, #8E95A3 100%); }
.badge.bronze { background: radial-gradient(circle at 35% 30%, #F6CFA8 0%, #C98A5A 45%, #8A5530 100%); }
.hud-seed { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--sub); min-width: 0; }
.hud-seed b { font-size: 15px; }
.hud-seed .hs-loan { margin-left: auto; color: var(--debt-soft); white-space: nowrap; }
.hud-seed .hs-have { margin-left: auto; color: var(--mute); white-space: nowrap; }
.seg.seeds button { height: 46px; flex-direction: row; gap: 7px; }
.seg.seeds button b { font-size: 14px; }
.seg.seeds button.on { background: var(--card3); color: var(--text); box-shadow: inset 0 0 0 1.5px var(--accent); }
.end-seed { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; color: var(--sub); margin-top: 4px; }
.end-seed b { color: var(--accent); font-size: 16px; }
.profile b .badge { margin-left: 4px; }
.rank-list b .badge { width: 17px; height: 17px; font-size: 9px; margin-right: 2px; }

.card.vote .vote-q { font-family: var(--display); font-weight: 400; font-size: 22px; line-height: 1.25; margin-top: 2px; }
.vote-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--line); margin-top: 4px; }
.vote-bar i { display: block; height: 100%; }
.vote-bar .u { background: var(--up); }
.vote-bar .d { background: #2F6FE0; }
.vote-n { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 700; }
.vote-n .mono { color: var(--mute); font-weight: 500; }
.vote-prev { display: flex; flex-direction: column; gap: 2px; background: rgba(13, 14, 17, 0.5); border: 1px solid var(--line2); border-radius: 10px; padding: 8px 10px; }
.vote-prev span { font-size: 11px; color: var(--mute); }
.vote-prev b { font-size: 13px; font-weight: 500; }
.vote-prev i { font-style: normal; font-weight: 700; }
.vote-verdict { font-size: 13px; color: var(--sub); }
.vote-verdict b { color: var(--text); }
.card.real.vote { border-color: var(--gold-line); }

.home-c .loans { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }

/* 2026-10-13 이름 고르기 — 후보 칩은 여러 줄로 */
.chips.wrap { flex-wrap: wrap; overflow: visible; }
.name-chips .chip { height: 34px; }
.cs-name input::placeholder { color: var(--mute); font-weight: 500; font-size: 15px; }

/* ── 2026-10-13 돈 중심: 한 번만 가는 버튼 · 뭐 하면서 보낼까 · 기간 결산 · 진짜 시세 계좌 · 한 표 「어디에」 ── */
.tb-invest { border-radius: 14px; background: var(--accent); color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-weight: 700; min-height: 56px; }
.tb-invest span { font-size: 11px; }
.timebar.running .tb-invest { opacity: 0.35; }
.seg.jumps button { gap: 1px; }
.seg.jumps button b { font-size: 15px; font-weight: 700; }
.seg.jumps button small { font-family: var(--mono); font-size: 10px; color: var(--mute); }
.seg.jumps button.on small { color: var(--accent); }
.seg.jumps button:disabled { opacity: 0.4; }
.seg.jumps button.on:disabled { opacity: 1; }

.plan-sheet { gap: 10px; }
.plans { display: flex; flex-direction: column; gap: 7px; }
.plan { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 11px; align-items: center; text-align: left; border-radius: 14px; border: 1px solid var(--line2); background: var(--card2); padding: 8px 10px; }
.plan.main { grid-template-columns: minmax(0, 1fr); background: #1A1F10; border-color: #3A4A12; padding: 12px 14px; }
.plan-art { width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: var(--line); display: block; }
.plan-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.plan-in { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.plan-in b { font-size: 15px; }
.plan-in small { font-size: 12px; color: var(--mute); }
.plan-fx { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.plan-fx i { font-style: normal; font-size: 11px; font-family: var(--mono); padding: 2px 6px; border-radius: 5px; background: var(--card3); color: var(--sub); }
.plan-fx i.good { color: var(--accent); background: #1A1F10; }
.plan-fx i.bad { color: #FF9AA0; background: var(--up-bg); }
.plan .warn { font-style: normal; font-size: 11px; color: var(--debt-soft); }
.plan:disabled { opacity: 0.4; }

.pd-hero { position: relative; padding: 22px 18px 16px; display: flex; flex-direction: column; gap: 4px; background: radial-gradient(120% 90% at 85% 0%, #3A1A1E 0%, #121317 70%); }
.pd-hero.down { background: radial-gradient(120% 90% at 85% 0%, #14233F 0%, #121317 70%); }
.pd-k { font-size: 12px; color: var(--sub); }
.pd-l { font-size: 15px; font-weight: 700; margin-top: 6px; }
.pd-big { font-size: 52px; font-weight: 600; line-height: 1.05; letter-spacing: -0.03em; }
.pd-s { font-size: 13px; color: var(--sub); }
.pd-hero .pr-stamp { top: 16px; }
.pd-hero .pr-stamp.miss { color: var(--down-soft); }
.pd-hero.up .pr-stamp { color: var(--accent); }
.pd-sec { display: flex; flex-direction: column; background: var(--card2); border: 1px solid var(--line2); border-radius: 12px; padding: 4px 12px; }
.pd-h { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0 4px; border-bottom: 1px solid var(--line); }
.pd-h em { font-style: normal; font-weight: 700; }
.pd-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid #1C1E24; font-size: 14px; }
.pd-row:last-child { border-bottom: 0; }
.pd-row span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-row small { font-size: 12px; color: var(--mute); }
.pd-row em { font-style: normal; font-weight: 700; min-width: 64px; text-align: right; }
.pd-row.me span { color: var(--gold); font-weight: 700; }
.pd-flow { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--sub); }
.last-period { display: flex; align-items: baseline; gap: 10px; text-align: left; width: 100%; flex: none; }
.last-period span { font-size: 13px; color: var(--sub); }
.last-period b { font-size: 20px; }
.last-period em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--accent); font-weight: 700; }
.memo.card { flex: none; }

.acct-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.acct-top b { font-size: 28px; font-weight: 600; }
.acct-top em { font-style: normal; font-size: 15px; font-weight: 700; }
.acct-day { font-size: 12px; color: var(--sub); margin-left: auto; }
.acct-day i { font-style: normal; font-weight: 700; }
.acct-closed { display: flex; flex-direction: column; border-top: 1px solid var(--line); padding-top: 6px; }
.mini { font-size: 12px; font-weight: 700; color: var(--sub); border: 1px solid var(--line2); border-radius: 8px; padding: 3px 9px; margin-top: 2px; }
.real-f b, .real-f i { font-style: normal; color: var(--text); }

.vote-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.vopt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--gold-line); background: rgba(13, 14, 17, 0.5); text-align: left; }
.vopt b { font-size: 15px; }
.vopt small { font-size: 11px; color: var(--mute); }
.vopt:active { background: var(--gold-bg); }
.vote-list { display: flex; flex-direction: column; gap: 5px; }
.vrow { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 7px 10px; border-radius: 9px; background: var(--card2); overflow: hidden; font-size: 13px; }
.vrow i { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(245, 210, 122, 0.16); }
.vrow span, .vrow b { position: relative; }
.vrow.me { box-shadow: inset 0 0 0 1.5px var(--gold); }
.vrow.me span { color: var(--gold); font-weight: 700; }

/* ── 2026-10-13 번 돈으로: 집·땅·맛집·데이트 코스·차 ── */
.page-h small { font-family: var(--sans); }
.spend-c { display: flex; flex-direction: column; gap: 8px; flex: none; }
.sp-list { display: flex; flex-direction: column; gap: 6px; }
.sp-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 11px; align-items: center; text-align: left; border-radius: 12px; border: 1px solid var(--line2); background: var(--card2); padding: 6px; }
.sp-row.own { border-color: #3A4A12; background: #1A1F10; }
.sp-row .sp-art { height: 64px; }
.sp-in { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sp-in b { font-size: 14px; }
.sp-in small { font-size: 11px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-in .mono { font-size: 12px; }
.sp-in i { font-style: normal; }
.sp-art { position: relative; display: block; border-radius: 9px; overflow: hidden; background: var(--line); }
.sp-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-art em { position: absolute; left: 5px; top: 5px; font-style: normal; font-size: 10px; font-weight: 700; color: var(--ink); background: var(--accent); padding: 1px 6px; border-radius: 5px; }
.sp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.sp-card { display: flex; flex-direction: column; gap: 2px; text-align: left; border-radius: 12px; border: 1px solid var(--line2); background: var(--card2); padding: 6px 6px 8px; min-width: 0; }
.sp-card .sp-art { height: 84px; margin-bottom: 3px; }
.sp-card b { font-size: 13px; padding: 0 2px; }
.sp-card small { font-size: 12px; color: var(--sub); padding: 0 2px; }
.sp-card i { font-style: normal; font-size: 11px; color: var(--accent); padding: 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-card.been { border-color: #3A4A12; }
.sp-card:disabled { opacity: 0.45; }

/* ── 2026-10-13 시작 두 갈래 · 내 지금 상황 입력 · 내 진짜 투자 넣기 ── */
.start-mode button { height: 58px; }
.start-mode button b { font-size: 14px; }
.start-mode button small { font-size: 10px; opacity: 0.8; }
.mine-form { display: flex; flex-direction: column; gap: 10px; }
.mi-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mi-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mi { display: flex; flex-direction: column; gap: 4px; position: relative; min-width: 0; }
.mi span { font-size: 11px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mi input, .mi-h input, .mi-h select { height: 44px; border-radius: 10px; border: 1px solid var(--line2); background: var(--card); color: var(--text); font: inherit; font-size: 15px; padding: 0 40px 0 12px; width: 100%; min-width: 0; }
.mi.wide input { padding-right: 12px; }
.mi em, .mi-h em { position: absolute; right: 10px; bottom: 13px; font-style: normal; font-size: 12px; color: var(--mute); pointer-events: none; }
.mi-hold { display: flex; flex-direction: column; gap: 6px; }
.mi-h { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 36px; gap: 6px; align-items: center; }
.mi-h select { padding-right: 8px; font-size: 13px; }
.mi-h em { right: 48px; }
.mi-x { width: 36px; height: 44px; border-radius: 10px; border: 1px solid var(--line2); color: var(--mute); }
.ghost-btn.slim { min-height: 40px; font-size: 13px; }
.ghost-btn.slim small { display: block; font-size: 11px; color: var(--mute); }
.badge.mine { background: radial-gradient(circle at 35% 30%, #E9FFB0 0%, var(--accent) 50%, #7E9A1E 100%); }
.mine-form .cs-preview small { color: var(--mute); }
/* 아이폰 앱: 오늘의 한 표는 기기 구분 값을 보내므로 개인정보 라벨(수집 안 함)을 바꾸기 전까지 숨긴다(10-13) */
html.app .card.vote { display: none !important; }

/* ── 토스처럼 사고팔기 · 갈아타기 (2026-10-13) ── */
.ord-bar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; margin-top: 4px; }
.ob { height: 56px; border-radius: 14px; border: 0; font-size: 17px; font-weight: 700; color: #fff; }
.ob.buy { background: var(--up); } .ob.sell { background: #2F6FE0; }
.holdbox.tossy { display: flex; flex-direction: column; gap: 8px; background: var(--card2); border-radius: 14px; padding: 12px 14px; }
.holdbox.tossy div { background: none; padding: 0; }
.holdbox.tossy .hb-main { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 8px; }
.holdbox.tossy .hb-main span { grid-column: 1 / -1; }
.holdbox.tossy .hb-main b { font-size: 22px; }
.holdbox.tossy .hb-main em { font-style: normal; font-family: var(--mono); font-size: 13px; font-weight: 600; justify-self: end; }
.holdbox.tossy .hb-sub { display: flex; gap: 14px; flex-direction: row; font-size: 12px; color: var(--mute); }
.holdbox.tossy .hb-sub b { font-size: 12px; color: var(--sub); }
.sw-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; border: 1px dashed var(--line3); background: transparent; color: var(--accent); border-radius: 12px; padding: 9px 12px; font-size: 14px; font-weight: 600; text-align: left; }
.sw-btn small { color: var(--mute); font-weight: 400; font-size: 11px; }
.ord { display: flex; flex-direction: column; gap: 10px; }
.ord-top { display: flex; align-items: center; justify-content: space-between; }
.ord-tag { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.ord-tag.buy { background: var(--up-bg); color: var(--up-soft); } .ord-tag.sell { background: var(--down-bg); color: var(--down-soft); } .ord-tag.switch { background: #161A0E; color: var(--accent); }
.ord-amt { display: flex; flex-direction: column; gap: 4px; padding: 6px 2px; }
.ord-amt > span { font-size: 15px; color: var(--sub); }
.ord-amt > b { font-size: 30px; font-weight: 700; letter-spacing: -0.5px; }
.ord-amt > b.ph { color: var(--dim); font-size: 22px; font-family: var(--sans); }
.ord-amt > small { font-size: 12px; color: var(--mute); } .ord-amt > small.warn { color: var(--up); }
.ord-est { margin: 0; font-size: 13px; color: var(--sub); min-height: 18px; }
.ord-est i { font-style: normal; }
.ord-pct { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: 6px; }
.ord-pct button { height: 38px; border-radius: 10px; border: 1px solid var(--line2); background: var(--card2); color: var(--text); font-size: 13px; font-weight: 600; }
.ord-pct button.on { border-color: var(--accent); color: var(--accent); }
.kp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.kp button { height: 52px; border: 0; background: transparent; color: var(--text); font-family: var(--mono); font-size: 22px; font-weight: 500; border-radius: 12px; }
.kp button:active { background: var(--card3); }
.ord-go { height: 56px; border-radius: 14px; border: 0; font-size: 17px; font-weight: 700; color: #fff; width: 100%; }
.ord-go.buy { background: var(--up); } .ord-go.sell { background: #2F6FE0; } .ord-go.sw { background: var(--accent); color: var(--ink); }
.ord-go:disabled { opacity: .35; }
.sw-list { display: flex; flex-direction: column; gap: 4px; }
.sw-pick { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; background: var(--card2); border: 1px solid transparent; border-radius: 12px; padding: 6px 10px; color: var(--text); text-align: left; }
.sw-pick .thumb { width: 36px; height: 36px; border-radius: 10px; overflow: hidden; }
.sw-pick .thumb img { width: 100%; height: 100%; object-fit: cover; }
.sw-pick b { font-size: 14px; } .sw-pick small { font-size: 12px; color: var(--mute); } .sw-pick i { font-style: normal; }
.sw-pick.on { border-color: var(--accent); }
.swc .sw-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.swc .sw-row:first-of-type { border-top: 0; }
.swc .sw-n, .swc .sw-v { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.swc .sw-v { align-items: flex-end; text-align: right; }
.swc small { font-size: 11px; color: var(--mute); } .swc b { font-size: 14px; }
.rn .gn { font-style: normal; font-family: var(--mono); font-size: 11px; }
.pos-row { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-top: 1px solid var(--line); }
.pos-row .pr-top { display: flex; justify-content: space-between; gap: 10px; }
.pos-row .sr-n { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pos-row .sr-n small { font-size: 11px; color: var(--mute); }
.pos-row .pr-v { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.pos-row .pr-v b { font-size: 16px; } .pos-row .pr-v em { font-style: normal; font-size: 12px; font-weight: 600; }
.pos-row .pr-from { font-size: 12px; color: var(--sub); background: #161A0E; border-radius: 10px; padding: 6px 10px; }
.pos-row .pr-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pos-row .mini.sell { color: var(--down-soft); border-color: var(--down-line); } .pos-row .mini.sw { color: var(--accent); }
.share-btn { width: 100%; margin-top: 8px; }
.pos-row .pr-btns .mini { height: 36px; margin: 0; background: var(--card2); font-size: 13px; }
.ad-btn small { display: block; font-size: 11px; font-weight: 400; opacity: .7; margin-top: 2px; }
/* 매수하시겠습니까? — 한 번 묻는 칸 (10-13) */
.ord-confirm { display: flex; flex-direction: column; gap: 12px; background: var(--card2); border: 1px solid var(--line2); border-radius: 16px; padding: 16px; }
.ord-confirm > b { font-size: 17px; line-height: 1.4; }
.ord-confirm .oc-rows { display: flex; flex-direction: column; gap: 8px; }
.ord-confirm .oc-rows div { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.ord-confirm .oc-rows span { color: var(--mute); }
.ord-confirm .oc-rows em { font-style: normal; text-align: right; }
.ord-confirm .oc-btns { display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; }
.ord-confirm .oc-btns .ghost-btn { min-height: 56px; }
/* 종목 정보 — 회사 숫자·실적·소식 (10-13) */
.co-info, .co-news { display: flex; flex-direction: column; gap: 8px; background: var(--card2); border-radius: 14px; padding: 12px 14px; margin-top: 4px; }
.co-info .row-h, .co-news .row-h { display: flex; justify-content: space-between; align-items: baseline; }
.co-info .row-h .mono, .co-news .row-h .mono { font-size: 11px; color: var(--mute); }
.co-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.co-kpi div { display: flex; flex-direction: column; gap: 2px; }
.co-kpi span { font-size: 10px; color: var(--mute); } .co-kpi b { font-family: var(--mono); font-size: 13px; }
.co-fin { width: 100%; border-collapse: collapse; font-size: 12px; font-family: var(--mono); }
.co-fin th { font-weight: 500; color: var(--mute); text-align: right; padding: 3px 0; } .co-fin th:first-child { text-align: left; }
.co-fin td { text-align: right; padding: 3px 0; border-top: 1px solid var(--line); } .co-fin td:first-child { text-align: left; color: var(--sub); font-family: var(--sans); }
.co-fin tr.bars td { border: 0; vertical-align: bottom; height: 40px; } .co-fin tr.bars i { display: inline-block; width: 18px; background: var(--accent); opacity: .55; border-radius: 3px 3px 0 0; }
.cn-row { display: flex; flex-direction: column; gap: 1px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.4; }
.cn-row:first-of-type { border-top: 0; }
.cn-row small { font-size: 10px; color: var(--mute); }
.cn-row.earn span::before { content: '실적 '; color: var(--accent); font-size: 11px; font-weight: 700; }
.cn-row.rumor span { color: var(--debt-soft); }
/* 두 번 눌러도 화면이 커졌다 작아지지 않게 (10-13 진님) — 핀치 확대도 막는다 */
html, body, button, a, input, select, textarea, [data-tab], .row, .sp-card { touch-action: manipulation; }
.my-holds { display: flex; flex-direction: column; gap: 4px; background: var(--card); border: 1px solid var(--line2); border-radius: 16px; padding: 10px 10px 6px; margin-bottom: 10px; }
.my-holds .row-h { display: flex; justify-content: space-between; align-items: baseline; padding: 0 4px 4px; }
.my-holds .row-h .mono { font-size: 13px; } .my-holds .row-h i { font-style: normal; font-size: 12px; }
.co-like { margin: 0; font-size: 12px; color: var(--accent); }
/* 새 화풍(3D 인형 같은 방) — 도트가 아니라 부드럽게. 옛 도트로 돌아가면 .pix */
.scene.room .spr { image-rendering: auto; }
.scene.room .spr.pix { image-rendering: pixelated; }
.scene.room .room-base { image-rendering: auto; }
.scene.room .room-base.pix { image-rendering: pixelated; }
/* 표정(10-14 시안 2) — 말풍선 앞 작은 얼굴 · 결산 창 얼굴 */
.me-bubble { display: flex; align-items: center; gap: 4px; }
.me-bubble i { font-style: normal; }
.me-bubble .mb-face { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex: none; margin-left: -4px; }
.pd-l { display: flex; align-items: center; gap: 10px; }
.pd-face { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12); }
/* 새 방(10-14) — 앞쪽 바닥(강아지·고양이·주인공 자리)을 가리지 않게 글씨는 위(벽 쪽)에 작은 알약 하나로, 아래 그늘은 없앤다 */
.scene.room::after { background: linear-gradient(180deg, rgba(5, 5, 6, 0.45) 0%, rgba(5, 5, 6, 0) 30%); }
.scene.room > [data-box='scenecap'] { justify-content: flex-start; gap: 5px; }
.scene.room .scene-cap { flex-direction: row; align-items: baseline; gap: 6px; align-self: flex-start; max-width: calc(100% - 110px); background: rgba(13, 14, 17, 0.72); padding: 5px 9px; border-radius: 8px; }
.scene.room .scene-cap span { font-size: 11px; white-space: nowrap; }
.scene.room .scene-cap b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ri-art img { image-rendering: auto; }
.ri-art img.pix { image-rendering: pixelated; }
/* 어른 체형은 키가 커서 머리 위 말풍선이 위 글씨와 겹친다 — 머리 오른쪽 옆으로 */
.scene.room .me-bubble { left: 58%; bottom: 80%; transform: none; }
.scene.room .me-bubble::after { left: 9px; transform: none; }
.scene.room .me-wrap.flip .me-bubble { left: auto; right: 58%; }
.scene.room .me-wrap.flip .me-bubble::after { left: auto; right: 9px; }
/* 걷는 동안은 장난감 인형처럼 뒤뚱, 강아지는 총총 — 10-14 진님 「강아지랑 사람은 움직이면 좋겠는데」 */
@keyframes waddle { 0%, 100% { translate: 0 0; rotate: -2deg; } 50% { translate: 0 -3px; rotate: 2deg; } }
@keyframes hop { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
.me-wrap.walk .spr.me { animation: waddle 0.36s ease-in-out infinite; }
.pet-wrap { position: absolute; transition: left 2s ease-in-out, bottom 2s ease-in-out; pointer-events: none; }
.scene.room .pet-wrap .spr.pet { position: relative; width: 100%; height: auto; display: block; animation: bob 1.4s ease-in-out infinite; }
.pet-wrap.walk .spr.pet { animation: hop 0.26s ease-in-out infinite; }
.pet-wrap.flip .spr.pet { transform: scaleX(-1); }
/* 10-14 점검 — 캐릭터 고르기에 「방에서는 이 모습」(꼬마 인형) · 첫 화면 버튼이 한 화면에 · 내 투자 줄은 작은 차트 빼고 손익을 끝까지 */
.cs-who { display: flex; align-items: center; gap: 8px; }
.cs-who > div { flex: 1; min-width: 0; }
.cs-mini-l { order: 1; flex: none; font-size: 10px; line-height: 1.25; color: var(--sub); text-align: right; }
.cs-mini { order: 2; flex: none; width: 46px; height: 70px; object-fit: contain; }
@media (max-height: 880px) { .intro-art { height: 40vh; min-height: 240px; } }
.my-holds [data-box^='spark'] { display: none; }
.my-holds .row { grid-template-columns: 42px minmax(0, 1fr) auto; } /* 작은 차트를 숨긴 만큼 칸도 줄여 가격을 오른쪽 끝에(10-21 — 가운데 떠 있고 오른쪽이 비던 것) */

/* 증권사 느낌(10-14 진님 「주식 볼 때 리얼함」) — 지수 띠 · 전일 대비 · 봉 차트 · 시세표 · 호가창 · 잔고 */
.idx-strip { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 2px 0 10px; }
.idx-strip::-webkit-scrollbar { display: none; }
.idx { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; background: var(--card2); border-radius: 10px; padding: 7px 10px; min-width: 92px; }
.idx span { font-size: 11px; color: var(--mute); }
.idx b { font-size: 13px; }
.idx em { font-style: normal; font-size: 11px; }
.dline { font-size: 13px; }
.chart.candle { width: 100%; display: block; }
.ma-l { display: flex; align-items: center; gap: 3px; }
.ma-l i { display: inline-block; width: 10px; height: 2px; border-radius: 1px; }
.ma-l i.m5 { background: var(--accent); } .ma-l i.m20 { background: #E8A33D; }
.qstats, .book { background: var(--card2); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.qstats .row-h, .book .row-h { display: flex; justify-content: space-between; align-items: baseline; }
.qgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
.qgrid span { display: flex; justify-content: space-between; font-size: 12px; color: var(--mute); gap: 6px; }
.qgrid b { font-size: 13px; color: var(--text); font-weight: 600; }
.qgrid b.up { color: var(--up); } .qgrid b.down { color: var(--down); }
.bk { display: grid; grid-template-columns: 1fr 112px 1fr; align-items: center; height: 26px; font-size: 12px; }
.bk.ask { background: rgba(70, 120, 230, 0.07); } .bk.bid { background: rgba(230, 70, 70, 0.07); }
.bk.now b { outline: 1px solid var(--text); outline-offset: -1px; border-radius: 4px; }
.bk b { text-align: center; font-size: 13px; display: flex; justify-content: center; align-items: baseline; gap: 4px; height: 100%; align-items: center; }
.bk b small { font-size: 10px; color: var(--mute); }
.bk b.up { color: var(--up); } .bk b.down { color: var(--down); }
.bq { position: relative; height: 100%; display: flex; align-items: center; }
.bk.ask .bq:first-child { justify-content: flex-end; } .bk.bid .bq:last-child { justify-content: flex-start; }
.bq i { position: absolute; top: 4px; bottom: 4px; opacity: 0.28; border-radius: 2px; }
.bk.ask .bq i { right: 0; background: var(--down); } .bk.bid .bq i { left: 0; background: var(--up); }
.bq em { position: relative; font-style: normal; font-family: var(--mono); padding: 0 6px; color: var(--sub); }
.holdbox .hb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; background: none; padding: 0; border-radius: 0; }
.holdbox .hb-grid span { display: flex; justify-content: space-between; font-size: 12px; color: var(--mute); }
.holdbox .hb-grid b { font-family: var(--mono); font-size: 13px; color: var(--text); }
.idx-strip, .qstats, .book, .chart.candle { flex: none; } /* 세로로 쌓는 칸 안에서 줄어들어 높이 0 이 되던 것 */
.my-holds .rn small { white-space: normal; overflow: visible; text-overflow: clip; } /* 내 투자 줄 손익이 「-2,…」로 잘리던 것 */
.cs-grid .cs-card b.vibe { font-family: var(--display); font-weight: 400; font-size: 15px; letter-spacing: 0.06em; color: var(--accent); } /* 이름 대신 매력 한 단어(10-15) */

/* 게임 vs 실제(10-15) — 진짜 시세 탭 맨 위 카드 · 홈 한 줄 · 잔고 칸 */
.card.vs { display: flex; flex-direction: column; gap: 8px; }
.vs-l { font-size: 13px; color: var(--sub); margin: 2px 0 0; }
.vs-big { font-size: 30px; line-height: 1.1; }
.vs-p { font-size: 13px; margin: 0; }
.vs-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.vs-row b { grid-column: 1 / -1; font-size: 14px; }
.vs-row .vs-g, .vs-row .vs-r { color: var(--mute); }
.vs-row .vs-r { text-align: right; }
.vs-row em { font-style: normal; }
.vs-row small { grid-column: 1 / -1; font-size: 11px; }
.vs-in .vs-row { border-top: 1px dashed var(--line); padding-bottom: 0; }
.card.vs-home { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font-size: 13px; }
.card.vs-home span { color: var(--accent); font-weight: 700; flex: none; }
.card.vs-home b { flex: 1; font-weight: 500; }
.card.vs-home i { font-style: normal; }
.card.vs-home em { font-style: normal; color: var(--mute); }
.gn.rv { margin-left: 2px; }

/* 미국 주식 달러 값(10-15) — 원화 값 옆 작은 글씨 */
.sheet-price .usdp { font-size: 15px; color: var(--sub); }

/* 오늘 할 일(10-15 밤) — 사기 → 시간 보내기 → 번 돈 쓰기, 아래 진짜 버튼이 반짝 */
.timebar { grid-template-columns: minmax(0, 1fr); }
.card.guide { display: flex; flex-direction: column; gap: 8px; border-color: #3A4A12; background: #151A0C; }
.g-steps { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mute); flex-wrap: wrap; }
.g-steps span { padding: 3px 9px; border-radius: 999px; background: var(--card2); }
.g-steps span.on { background: var(--accent); color: var(--ink); font-weight: 700; }
.g-steps span.done { color: var(--accent); }
.g-steps i { font-style: normal; }
.g-now { font-size: 17px; line-height: 1.35; }
.g-now em { font-style: normal; color: var(--accent); animation: g-bob 1s ease-in-out infinite; display: inline-block; }
@keyframes g-bob { 50% { transform: translateY(3px); } }
#app[data-guide="buy"] #tabs [data-tab="market"], #app[data-guide="spend"] #tabs [data-tab="life"] { color: var(--accent); animation: pulse-ring 1s ease-in-out infinite; border-radius: 12px; }
#app[data-guide="jump"] .seg.jumps button:not(:disabled) { animation: pulse-ring 1s ease-in-out infinite; color: var(--accent); }

/* 광장(10-16) — 진짜 시세 띠 · 게시판 · 글/댓글 창 */
.px-strip { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: none; }
.px-strip .px { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 7px 10px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); }
.px-strip .px span { font-size: 11px; color: var(--sub); }
.px-strip .px b { font-size: 13px; }
.vote-cm { align-self: flex-end; margin-top: -4px; }
.bd-bar { display: flex; align-items: center; gap: 8px; flex: none; margin-top: 4px; }
.bd-bar .chips { flex: 1; }
.bd-write { flex: none; padding: 8px 14px; border-radius: 999px; background: var(--accent); color: var(--ink); font-weight: 700; font-size: 13px; }
.bd-list { display: flex; flex-direction: column; gap: 8px; flex: none; }
.bd-post { display: flex; flex-direction: column; gap: 6px; text-align: left; width: 100%; padding: 12px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.bd-h { display: flex; align-items: center; gap: 6px; font-size: 12px; min-width: 0; }
.bd-h b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-h b i { font-style: normal; color: var(--accent); }
.bd-h time { margin-left: auto; color: var(--mute); font-size: 11px; flex: none; }
.bd-k { flex: none; font-size: 11px; padding: 2px 7px; border-radius: 6px; background: var(--card2); color: var(--sub); }
.bd-k.k-brag { background: #3A2F0E; color: var(--gold); }
.bd-k.k-stock { background: #12283A; color: #7FB8F0; }
.bd-k.k-vote { background: #1E2A0C; color: var(--accent); }
.bd-t { font-size: 14px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; white-space: pre-wrap; }
.bd-t.full { display: block; -webkit-line-clamp: unset; }
.bd-tag { align-self: flex-start; font-size: 12px; color: #7FB8F0; }
.bd-f { display: flex; gap: 12px; font-size: 12px; color: var(--mute); }
.bd-card { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: #1F1A0B; border: 1px solid #4A3B12; }
.bd-card .bd-ck { font-size: 11px; color: var(--gold); }
.bd-card b { font-size: 20px; }
.bd-card em { font-style: normal; font-size: 13px; color: var(--text); }
.bd-card small { font-size: 11px; color: var(--sub); }
.acct-fold { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; font-size: 13px; }
.acct-fold span { flex: 1; }
.acct-fold span small { color: var(--mute); margin-left: 4px; }
.acct-fold i { font-style: normal; color: var(--mute); font-size: 12px; }
.modal.bd-modal .modal-card { max-height: 86vh; overflow-y: auto; }
.bd-d { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.bd-wt { font-size: 17px; }
.bd-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.bd-acts .mini.on { color: var(--accent); border-color: var(--accent); }
.bd-cms { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
.bd-cm { display: flex; flex-direction: column; gap: 3px; }
.bd-cm p { font-size: 13px; line-height: 1.45; word-break: break-all; }
.bd-x { font-size: 11px; color: var(--mute); padding: 0 2px; }
.bd-in { display: flex; gap: 6px; }
.bd-in input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 10px; background: var(--card2); border: 1px solid var(--line); color: var(--text); font-size: 14px; }
.bd-d textarea { width: 100%; padding: 10px 12px; border-radius: 10px; background: var(--card2); border: 1px solid var(--line); color: var(--text); font-size: 14px; line-height: 1.5; resize: none; font-family: inherit; }
.bd-d .chips.wrap { flex-wrap: wrap; }
.bd-rules { padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.5; color: var(--sub); }

/* 엔딩 도감·순위 창 위 ✕(10-16 진님 「누르니 사라지고 뒤로 가기가 안 돼」) — 머리를 위에 붙여 둔다 */
.modal.endbook .eb-h { position: sticky; top: -18px; z-index: 2; background: #121317; padding: 12px 0 8px; margin-top: -12px; gap: 8px; }
.modal.endbook .eb-h b { margin-left: auto; }
.eb-x { width: 34px; height: 34px; border-radius: 50%; background: var(--card2); color: var(--text); display: flex; align-items: center; justify-content: center; flex: none; }

/* 전 종목(10-16) — 고르면 진짜 지난 시세를 받아 판에 넣는다 */
.uni-h { margin-top: 10px; }
.uni-h h3 small { font-family: var(--mono); font-size: 11px; color: var(--mute); margin-left: 4px; }
.thumb.th-txt { display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--sub); background: var(--card2); }
.row.uni.busy { opacity: 0.5; }
.row.uni .rp small.hint { font-size: 11px; }

/* 10-16 1차 정리 — 머리 두 줄 · 삶 타일 */
.hud-nw .lbl { align-self: center; }
.hud-pill { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: 999px; background: var(--card2); font-size: 13px; }
.page-h small b { font-weight: 600; color: var(--text); }
.life-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lt { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 0 0 12px; border-radius: 16px; overflow: hidden; background: var(--card); border: 1px solid var(--line); }
.lt-art { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--card2); margin-bottom: 6px; }
.lt-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lt b { font-size: 17px; padding: 0 12px; }
.lt small { font-size: 12px; color: var(--sub); padding: 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.life-back { align-self: flex-start; font-size: 15px; font-weight: 700; color: var(--accent); padding: 4px 2px 8px; }
.life-tiles .lt:last-child:nth-child(odd) { grid-column: span 2; }
.life-tiles .lt:last-child:nth-child(odd) .lt-art { aspect-ratio: 16 / 7; }
/* 10-16 정리 — 「뭐 하면서 보낼까」를 그림 타일로(프린세스 메이커 일정표처럼) */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.plan { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 0 0 10px; overflow: hidden; align-items: start; }
.plan .plan-art { width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: 0; }
.plan .plan-in { padding: 0 10px; }
.plan .plan-in b { font-size: 16px; }
.plan.main { grid-column: span 2; padding: 12px 14px; }
.plan:disabled { opacity: 0.45; }

/* 오프닝(10-16 진님 「게임 시작할 때 임팩트 — 영상이나 나레이션」) — 12초, 화면 움직임만 */
.opening { position: fixed; inset: 0; z-index: 60; background: #000; overflow: hidden; color: #fff; transition: opacity 0.45s ease; }
.opening.out { opacity: 0; }
.op-scene { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; display: flex; align-items: center; justify-content: center; }
.op-scene img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); }
.opening::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.75) 100%); pointer-events: none; z-index: 2; }
.opening.at1 .s1, .opening.at2 .s2, .opening.at3 .s3 { opacity: 1; }
.opening.at2 .s2 img { transform: scale(1.16) translate(-2%, 1%); transition: transform 5s ease-out; }
.opening.at3 .s3 img { transform: scale(1.2) translate(1%, -2%); transition: transform 5s ease-out; }
.s1 { background: radial-gradient(circle at 50% 45%, #1a1f10 0%, #000 65%); }
.op-bank { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 30px; border-radius: 22px; background: rgba(255,255,255,0.05); border: 1px solid rgba(198,244,50,0.25); transform: translateY(10px); transition: transform 1s ease; }
.opening.at1 .op-bank { transform: none; }
.op-bank small { font-size: 13px; color: #9ea1a8; letter-spacing: 0.1em; }
.op-bank b { font-family: var(--mono); font-size: 38px; font-weight: 600; color: var(--accent); }
.op-bank b i { font-style: normal; font-size: 24px; margin-right: 4px; color: #cfd2d8; }
.op-bank em { font-style: normal; font-size: 12px; color: #6f727a; }
.op-line { position: absolute; left: 24px; right: 24px; bottom: calc(110px + env(safe-area-inset-bottom)); z-index: 3; text-align: center; font-size: 25px; line-height: 1.45; font-weight: 800; letter-spacing: -0.01em; text-shadow: 0 2px 12px rgba(0,0,0,0.8); opacity: 0; transform: translateY(12px); }
.op-line.on { opacity: 1; transform: none; transition: opacity 0.2s ease, transform 0.3s ease; }
.op-line.off { opacity: 0; transition: opacity 0.5s ease; }
.op-line em { font-style: normal; color: var(--accent); }
.op-caret { display: inline-block; width: 3px; height: 1.05em; margin-left: 3px; vertical-align: -0.12em; background: var(--accent); animation: op-blink 0.7s steps(1) infinite; }
@keyframes op-blink { 50% { opacity: 0; } }
@keyframes op-line { 0% { opacity: 0; transform: translateY(12px); } 14% { opacity: 1; transform: none; } 82% { opacity: 1; } 100% { opacity: 0; } }
.opening.at4 .op-line { display: none; }
.op-title { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; opacity: 0; pointer-events: none; background: rgba(0,0,0,0.55); }
.op-title h1 { font-family: var(--display); font-weight: 400; font-size: 64px; letter-spacing: -0.02em; line-height: 1; }
.op-title h1 em { font-style: normal; color: var(--accent); }
.op-title small { font-size: 14px; color: #cfd2d8; letter-spacing: 0.04em; }
.opening.at4 .op-title { animation: op-slam 0.55s cubic-bezier(.2,1.4,.4,1) forwards; }
@keyframes op-slam { 0% { opacity: 0; transform: scale(1.7); filter: blur(6px); } 60% { opacity: 1; filter: blur(0); } 100% { opacity: 1; transform: scale(1); } }
.opening.at4::before { content: ''; position: absolute; inset: 0; z-index: 5; background: var(--accent); opacity: 0; animation: op-flash 0.5s ease-out; pointer-events: none; }
@keyframes op-flash { 0% { opacity: 0.55; } 100% { opacity: 0; } }
.op-skip { position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 14px; z-index: 6; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,0.12); color: #e6e7ea; font-size: 13px; font-weight: 600; }
.op-gate { position: absolute; inset: 0; z-index: 7; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; width: 100%; background: radial-gradient(circle at 50% 40%, #151a0c 0%, #000 70%); color: #fff; }
.op-gate b { font-family: var(--display); font-weight: 400; font-size: 52px; }
.op-gate b em { font-style: normal; color: var(--accent); }
.op-gate span { font-size: 14px; color: #b9bcc3; animation: op-pulse 1.4s ease-in-out infinite; }
@keyframes op-pulse { 50% { opacity: 0.35; } }

/* ── 두 갈래 길 — 게임 vs 진짜 (10-19) · 점선 보라 = 게임이 지어낸 시세, 실선 = 진짜 종가 ── */
:root { --vsg: #A99CFF; }
.card.vs2 { display: flex; flex-direction: column; gap: 6px; width: 100%; text-align: left; }
.card.vs2.in { background: var(--card2); }
.vs2-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12px; color: var(--mute); }
.vs2-h b { color: var(--accent); font-size: 13px; flex: none; }
.vs2-h span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs2-n { display: flex; gap: 22px; }
.vs2-n small { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--sub); }
.vs2-n b { font-family: var(--mono); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.vs2-n .g b { color: var(--vsg); }
.sw { display: inline-block; width: 16px; border-top: 2px solid var(--text); }
.sw.g { border-top: 2px dashed var(--vsg); }
.vs2 svg { width: 100%; height: auto; display: block; overflow: visible; }
.vs-g { fill: none; stroke: var(--vsg); stroke-width: 2.4; stroke-dasharray: 5 3; stroke-linejoin: round; }
.vs-g.far { opacity: 0.32; }
.vs-r { fill: none; stroke: var(--text); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.vs-o { fill: var(--text); }
.vs-zero { stroke: var(--line2); stroke-dasharray: 2 3; }
.vs-now { stroke: var(--line3); stroke-dasharray: 2 3; }
.vs-ax { stroke: var(--line2); }
.vs-gap { stroke: var(--accent); stroke-width: 2; }
.vs-dot { fill: var(--bg); stroke: var(--dim); stroke-width: 1.4; }
.vs-dot.on { fill: var(--text); stroke: var(--text); }
.vs-t { font-size: 11px; fill: var(--mute); font-family: var(--sans); }
.vs-t.on { fill: var(--text); }
.vs-t.g { fill: var(--vsg); }
.vs2-f { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--sub); border-top: 1px solid var(--line); padding-top: 8px; margin: 0; }
.vs2-f b { color: var(--text); font-weight: 600; }
.vs2-f em { margin-left: auto; font-style: normal; color: var(--mute); }
.vsm-h { display: flex; justify-content: space-between; align-items: center; }
.vsm-h b { font-size: 18px; }
.vsm-cp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.vsm-cp > div { border: 1px solid var(--line2); border-radius: 12px; padding: 8px 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.vsm-cp > div.on { border-color: var(--accent); }
.vsm-cp span { font-size: 12px; color: var(--sub); }
.vsm-cp b { font-size: 15px; }
.vsm-cp b.dim { color: var(--mute); }
.vsm-cp small { font-size: 11px; color: var(--mute); }
.vsm-rows { display: flex; flex-direction: column; }
.vsm-row { display: grid; grid-template-columns: 1fr auto auto; gap: 2px 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; align-items: baseline; }
.vsm-row b { font-size: 14px; }
.vsm-row small { grid-column: 1; grid-row: 2; font-size: 11px; color: var(--mute); }
.vsm-row span { grid-row: 1 / span 2; color: var(--mute); font-size: 12px; }
.vsm-row span i { font-style: normal; font-size: 14px; }
/* 10-19 직접 플레이 손질 — 같은 날 표시 · 결산 속 두 갈래 길 · 말풍선은 방 가운데 쪽으로 */
.vs2-n { align-items: flex-end; }
.vs2-at { margin-left: auto; text-align: right; font-size: 11px; line-height: 1.35; color: var(--mute); font-family: var(--mono); }
.pd-vs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 12px; background: var(--card2); border: 1px solid var(--line2); font-size: 13px; color: var(--sub); }
.pd-vs span { display: flex; align-items: center; gap: 6px; }
.pd-vs b { color: var(--text); }
.pd-vs span:first-child b { color: var(--vsg); }
.pd-vs em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--mute); }
.pd-vs.wait b { color: var(--accent); }
.scene.room .me-wrap.bl .me-bubble { left: auto; right: 58%; }
.scene.room .me-wrap.bl .me-bubble::after { left: auto; right: 9px; }
.scene.room .me-wrap.flip:not(.bl) .me-bubble { left: 58%; right: auto; }
.scene.room .me-wrap.flip:not(.bl) .me-bubble::after { left: 9px; right: auto; }

/* 10-19 월급이 끊기는 선택 — 버틸 기간이 10년이 안 되면 노란 경고 */
.choice.warn small { color: var(--debt-soft); }
.choice.main.warn small { color: #6B4A00; }
/* 소개 페이지 링크(10-22 체크리스트 11) — 나 탭 */
.ghost-btn.link-btn { display: flex; align-items: center; justify-content: center; margin-top: 8px; color: var(--text); text-decoration: none; }
.bug-done a { color: var(--accent); }
/* 첫 1분 완주(10-23 시안 A) — 산 직후 「1년 뒤엔?」, 보낸 뒤 결과가 같은 칸에 */
.fm-card { border: 1.5px solid var(--accent); border-radius: 16px; overflow: hidden; background: var(--card); flex: none; }
.fm-art { position: relative; height: 130px; background: var(--line); }
.fm-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fm-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,14,17,0) 30%, rgba(13,14,17,0.95)); pointer-events: none; }
.fm-chip { position: absolute; left: 10px; top: 10px; z-index: 1; background: rgba(13,14,17,0.82); border: 1px solid var(--line3); border-radius: 999px; padding: 3px 10px; font-size: 12px; }
.fm-chip b { color: var(--accent); }
.fm-nm { position: absolute; left: 12px; bottom: 8px; z-index: 1; font-weight: 700; font-size: 16px; }
.fm-nm span { margin-left: 6px; color: var(--sub); font-weight: 500; font-size: 13px; }
.fm-in { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.fm-q { font-family: var(--display); font-size: 30px; line-height: 1.15; }
.fm-q em { font-style: normal; color: var(--accent); }
.fm-go { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 56px; border-radius: 14px; background: var(--accent); color: var(--ink); font-weight: 700; font-size: 18px; }
.fm-go small { font-weight: 500; font-size: 12px; opacity: 0.7; }
.fm-mini { display: flex; gap: 6px; }
.fm-mini button { flex: 1; min-height: 40px; border: 1px solid var(--line2); border-radius: 12px; font-size: 13px; color: var(--sub); }
.fm-card.res .fm-in { gap: 8px; }
.fm-l { font-size: 13px; color: var(--sub); }
.fm-n { font-size: 40px; font-weight: 600; line-height: 1; }
.fm-spark { width: 100%; height: 48px; display: block; }
.fm-flow { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 13px; background: var(--card2); border-radius: 10px; padding: 8px 10px; color: var(--sub); }
.fm-flow b { color: var(--text); }
.fm-face { display: flex; align-items: center; gap: 8px; }
.fm-face-img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--accent); }
.fm-face p { background: var(--text); color: var(--ink); border-radius: 12px; padding: 5px 10px; font-size: 13px; font-weight: 700; }
.fm-face .linkish { margin-left: auto; font-size: 12px; }
.fm-all { font-size: 12px; color: var(--sub); }
.fm-all small { color: var(--mute); }
.fm-two { display: flex; gap: 6px; }
.fm-two .fm-go { flex: 1.4; min-height: 50px; font-size: 16px; }
.fm-ghost { flex: 1; min-height: 50px; border: 1px solid var(--line3); border-radius: 14px; font-weight: 700; font-size: 15px; }
/* 창 묶기(10-23) — 결산 「이번 1년 있었던 일」 */
.pd-happen .pd-h em { font-style: normal; color: var(--accent); font-size: 12px; }
.pd-hp { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.pd-hp:last-child { border-bottom: 0; }
.pd-hp i { font-style: normal; width: 18px; flex: none; text-align: center; }
.pd-hp span { min-width: 0; }
.pd-hp em { font-style: normal; color: var(--sub); font-size: 12px; margin-left: 2px; }
/* 내 삶이 바뀌는 모습(10-23 시안 A+C) — 홈 맨 위 큰 그림 · 다음 삶 · 앨범 · 삶이 바뀐 순간 · 번 돈으로 뭐 할까 */
.life-hero { position: relative; display: block; width: 100%; height: 230px; border-radius: 18px; overflow: hidden; background: var(--card2); flex: none; text-align: left; padding: 0; }
.life-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.life-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,14,17,0) 40%, rgba(13,14,17,0.92) 100%); pointer-events: none; }
.lh-cap { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1; display: flex; flex-direction: column; gap: 2px; }
.lh-k { font-size: 12px; color: var(--accent); font-weight: 700; }
.lh-cap b { font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 1.15; color: var(--text); }
.lh-cap small { font-size: 12px; color: var(--sub); }
.next-life { display: flex; gap: 10px; align-items: center; width: 100%; background: var(--card); border: 1px solid var(--line2); border-radius: 14px; padding: 8px; text-align: left; flex: none; }
.nl-img { width: 72px; height: 54px; border-radius: 10px; overflow: hidden; flex: none; filter: grayscale(0.55) brightness(0.75); }
.nl-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nl-in { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.nl-in > span:first-child { font-size: 14px; font-weight: 700; }
.nl-bar { display: block; height: 6px; border-radius: 3px; background: var(--line2); overflow: hidden; }
.nl-bar i { display: block; height: 100%; background: var(--accent); }
.nl-in small { font-size: 12px; color: var(--sub); }
.nl-in small b { color: var(--accent); }
.album { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: none; }
.album::-webkit-scrollbar { display: none; }
.album .al { position: relative; flex: none; width: 74px; height: 74px; border-radius: 12px; overflow: hidden; background: var(--card2); }
.album .al img { width: 100%; height: 100%; object-fit: cover; display: block; }
.album .al::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,14,17,0) 45%, rgba(13,14,17,0.9)); }
.album .al i { position: absolute; left: 6px; bottom: 4px; z-index: 1; font-style: normal; font-size: 11px; font-weight: 700; }
.album .al:last-child { outline: 2px solid var(--accent); outline-offset: -2px; }
.modal.moment .modal-card { padding: 0; background: #000; }
.lm { position: relative; min-height: min(78dvh, 620px); background-size: cover; background-position: center; display: flex; }
.lm::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,14,17,0.15) 0%, rgba(13,14,17,0.5) 48%, rgba(13,14,17,0.97) 76%); }
.lm-in { position: relative; z-index: 1; margin-top: auto; width: 100%; padding: 18px 18px calc(22px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; }
.lm-k { font-size: 13px; font-weight: 700; color: var(--accent); }
.lm-h { font-family: var(--display); font-size: 36px; line-height: 1.12; }
.lm-h em { font-style: normal; color: var(--accent); }
.lm-s { font-size: 13px; color: var(--sub); line-height: 1.5; }
.spend-ideas h2 { font-family: var(--display); font-weight: 400; font-size: 26px; }
.si { display: flex; gap: 10px; align-items: center; width: 100%; border: 1px solid var(--line2); border-radius: 14px; padding: 7px; background: var(--card2); text-align: left; }
.si-img { width: 74px; height: 54px; border-radius: 10px; overflow: hidden; flex: none; }
.si-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.si b { display: block; font-size: 15px; }
.si small { font-size: 12px; color: var(--sub); }
/* 아래 탭 넷(내 판·투자·삶·광장) + 위 오른쪽 「나」 얼굴(10-26 설계 0절) */
.tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hud-row .hud-me { margin-left: auto; display: flex; align-items: center; gap: 5px; padding: 2px 9px 2px 2px; border: 1px solid var(--line2); border-radius: 999px; font-size: 12px; color: var(--sub); flex: none; }
.hud-row .hud-me.on { border-color: var(--accent); color: var(--accent); }
.hm-face { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; display: block; }
.hud-row .chip-mk + .hud-me { margin-left: 6px; }
/* 투자 탭 첫 화면 — 주식만이 아니라 전부(10-26 진님 「미리 살아 보기 안에 모든 게」) */
.kinds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; flex: none; }
.kinds .kd { position: relative; height: 64px; border-radius: 12px; overflow: hidden; background: var(--card2); border: 1px solid var(--line2); text-align: left; padding: 0; }
.kinds .kd img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kinds .kd::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,14,17,0.1) 20%, rgba(13,14,17,0.9)); }
.kinds .kd b { position: absolute; left: 7px; bottom: 5px; z-index: 1; font-size: 12px; }
/* 이번 주 대회(10-26) — 광장 맨 위 */
.card.contest { display: flex; flex-direction: column; gap: 8px; border-color: var(--gold-line); background: linear-gradient(180deg, var(--gold-bg), var(--card) 70%); flex: none; }
.ct-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ct-h b { font-family: var(--display); font-weight: 400; font-size: 20px; }
.ct-h span { font-size: 12px; color: var(--gold); }
.ct-rules { font-size: 12px; color: var(--sub); line-height: 1.5; }
.ct-row { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; padding: 3px 0; border-bottom: 1px solid var(--line); }
.ct-row span { color: var(--sub); }
.rank-tabs { margin: 4px 0 6px; }
.rank-tabs button small { display: block; font-size: 10px; color: var(--mute); font-weight: 500; }
/* 시즌 끝 가져가기 · 시즌 기념품(10-27) */
.claim h2 { font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 1.2; }
.cl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cl { position: relative; display: flex; flex-direction: column; gap: 3px; border: 1px solid var(--line2); border-radius: 12px; padding: 0 0 6px; overflow: hidden; background: var(--card2); text-align: left; }
.cl.on { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(198,244,50,0.25); }
.cl-img { display: block; height: 62px; background: var(--line); overflow: hidden; }
.cl-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cl b { font-size: 11px; padding: 0 6px; line-height: 1.3; }
.cl em { position: absolute; right: 6px; top: 6px; font-style: normal; background: var(--accent); color: var(--ink); border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.card.keeps { display: flex; flex-direction: column; gap: 8px; }
.kp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.kp-it { display: flex; flex-direction: column; gap: 2px; }
.kp-it img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; display: block; }
.kp-it small { font-size: 10px; color: var(--sub); line-height: 1.3; }