:root {
 --gold: #f59e0b;
 --gold-deep: #4338ca;
 --brand: #6366f1;
 --brand-deep: #4338ca;
 --amber: #f59e0b;
 --ink: #14141c;
 --bg: #efece6;
 --surface: rgba(255, 255, 255, 0.82);
 --text: #14141c;
 --muted: #6b7280;
 --line: rgba(20, 20, 28, 0.08);
 --up: #f43f5e;
 --down: #0ea5e9;
 --header-h: 56px;
 --page-pad-x: 14px;
 --touch: 44px;
 --gold-soft: #fbbf24;
 --display: "Cormorant Garamond", "Noto Serif KR", "Batang", serif;
 --fs-title: clamp(1.5rem, 1.15rem + 2.6vw, 2.125rem);
 --fs-display: clamp(1.35rem, 1.05rem + 2.2vw, 2rem);
 --fs-price: clamp(1.75rem, 1.2rem + 4vw, 2.45rem);
 --fs-hero: clamp(1.25rem, 1.05rem + 1.8vw, 1.75rem);
 --fs-body: 1rem;
 --fs-muted: 0.9375rem;
}

html.dark {
 --bg: #0a0b12;
 --surface: rgba(18, 20, 32, 0.78);
 --text: #f4f1ea;
 --muted: #9aa3b5;
 --line: rgba(244, 241, 234, 0.08);
}

* { box-sizing: border-box; }
html {
 min-height: 100%;
 overflow-x: clip;
}
html, body { margin: 0; }
body {
 min-height: 100%;
 max-width: 100%;
 overflow-x: clip;
 background: var(--bg);
 color: var(--text);
 font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
 font-size: 16px;
 letter-spacing: -0.02em;
}
img, video, canvas {
 max-width: 100%;
 height: auto;
}
body::before {
 content: "";
 position: fixed;
 inset: 0;
 z-index: -1;
 pointer-events: none;
 background:
 radial-gradient(900px 420px at 8% -10%, rgba(99, 102, 241, 0.22), transparent 55%),
 radial-gradient(700px 380px at 100% 0%, rgba(245, 158, 11, 0.14), transparent 50%),
 radial-gradient(640px 480px at 80% 110%, rgba(67, 56, 202, 0.12), transparent 55%);
}
body::after {
 content: "";
 position: fixed;
 inset: 0;
 z-index: -1;
 pointer-events: none;
 opacity: 0.045;
 background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; border: none; background: none; color: inherit; }
b, h1, h2, h3 { letter-spacing: -0.03em; }
h1, .logo, .brand-copy, .page-head h1, .quote-name {
 font-family: var(--display);
 font-weight: 600;
}

.pressable { transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease; }
.pressable:active { transform: scale(0.98); }

.app-frame { min-height: 100vh; }

#app {
 transition: opacity 0.2s ease;
}
#app.is-page-out {
 opacity: 0;
 pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
 #app { transition: none; }
}

.header {
 position: sticky;
 top: 0;
 z-index: 40;
 height: var(--header-h);
 color: #f8f5ef;
 background: rgba(10, 11, 18, 0.78);
 backdrop-filter: blur(22px) saturate(1.4);
 border-bottom: 1px solid rgba(245, 158, 11, 0.28);
}
.header-inner {
 max-width: 1056px;
 width: 100%;
 height: 100%;
 margin: 0 auto;
 padding: 0 var(--page-pad-x);
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 6px;
 min-width: 0;
}
.header-left {
 display: flex;
 align-items: center;
 gap: 8px;
 min-width: 0;
 flex: 1 1 0;
 overflow: hidden;
}
.brand {
 display: flex;
 align-items: flex-end;
 gap: 8px;
 min-width: 0;
 max-width: 100%;
 overflow: hidden;
 font-size: clamp(1.05rem, 0.9rem + 1.2vw, 1.375rem);
 font-weight: 600;
}
.logo {
 width: 34px;
 height: 34px;
 border-radius: 50%;
 display: grid;
 place-items: center;
 font-size: 15px;
 font-weight: 700;
 color: #fff;
 background: linear-gradient(145deg, #818cf8, #4f46e5);
 box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.45), 0 10px 24px rgba(79, 70, 229, 0.35);
}
.title-clock {
 position: relative;
 display: block;
 width: 45.6px;
 height: 33.6px;
 flex-shrink: 0;
 align-self: flex-end;
 top: 3px;
}
.title-clock-lid {
 position: absolute;
 left: 4.8px;
 top: -9.6px;
 width: 36px;
 height: 9.6px;
 box-sizing: border-box;
 background: linear-gradient(180deg, #fcd34d, #d97706);
 border: 1.2px solid rgba(251, 191, 36, 0.95);
 transform: skewX(-28deg);
}
.title-clock-side {
 position: absolute;
 left: 36px;
 bottom: 0;
 width: 9.6px;
 height: 33.6px;
 box-sizing: border-box;
 background: linear-gradient(90deg, #2a2c3a, #12131c);
 border: 1.2px solid rgba(245, 158, 11, 0.35);
 border-left: none;
 transform: skewY(-28deg);
 transform-origin: bottom left;
}
.title-clock-face {
 position: absolute;
 left: 0;
 bottom: 0;
 width: 36px;
 height: 33.6px;
 box-sizing: border-box;
 border: 1.8px solid rgba(245, 158, 11, 0.75);
 background: #0c0d16;
 box-shadow: inset 0 0 0 1.2px rgba(255, 255, 255, 0.06);
}
.title-clock-hour,
.title-clock-minute,
.title-clock-second {
 position: absolute;
 left: 50%;
 bottom: 50%;
 transform-origin: 50% 100%;
 border-radius: 1.2px;
}
.title-clock-hour {
 width: 2.4px;
 height: 10.8px;
 margin-left: -1.2px;
 background: #f8f5ef;
}
.title-clock-minute {
 width: 1.8px;
 height: 14.4px;
 margin-left: -0.9px;
 background: #f59e0b;
}
.title-clock-second {
 width: 1.2px;
 height: 15.6px;
 margin-left: -0.6px;
 background: #f43f5e;
}
.title-clock-pivot {
 position: absolute;
 left: 50%;
 top: 50%;
 width: 4.8px;
 height: 4.8px;
 margin: -2.4px 0 0 -2.4px;
 border-radius: 50%;
 background: #f59e0b;
}
.brand-copy {
 display: block;
 min-width: 0;
 line-height: 1;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 position: relative;
 top: -3px;
 font-size: 130%;
}
.brand-en { display: none; }
.lounge {
 display: none;
 align-items: center;
 gap: 4px;
 min-width: 0;
}
.lounge-link {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 padding: 6px 10px;
 border-radius: 10px;
 font-size: 17px;
 font-weight: 650;
 color: rgba(248, 245, 239, 0.72);
 white-space: nowrap;
}
.lounge-link svg {
 width: 16px;
 height: 16px;
}
.lounge-link:hover,
.lounge-link.active {
 color: #fff;
 background: rgba(255, 255, 255, 0.08);
}
.sub {
 margin: 5px 0 0;
 font-family: Pretendard, sans-serif;
 font-size: 12px;
 font-weight: 600;
 letter-spacing: 0.12em;
 color: #fbbf24;
}
.header-actions {
 display: flex;
 align-items: center;
 gap: 4px;
 flex: 0 1 auto;
 min-width: 0;
}
.header-actions .icon-btn,
.header-actions .notice-wrap {
 flex-shrink: 0;
}
.points {
 display: flex;
 align-items: center;
 gap: 4px;
 min-width: 0;
 max-width: 7.25rem;
 padding: 5px 8px;
 border-radius: 999px;
 font-size: 13px;
 font-weight: 800;
 font-variant-numeric: tabular-nums;
 letter-spacing: -0.04em;
 white-space: nowrap;
 background: rgba(255, 255, 255, 0.06);
 border: 1px solid rgba(245, 158, 11, 0.28);
 overflow: hidden;
}
.points svg {
 width: 16px;
 height: 16px;
 flex-shrink: 0;
}
.points #point-num {
 min-width: 0;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
.points .remain { font-size: 12px; font-weight: 500; color: #c9bfae; letter-spacing: 0.04em; }
.icon-btn {
 position: relative;
 width: var(--touch);
 height: var(--touch);
 min-width: var(--touch);
 border-radius: 999px;
 color: #d6d3cb;
 border: 1px solid rgba(255, 255, 255, 0.08);
}
.icon-btn:hover { background: rgba(255, 255, 255, 0.08); color: var(--amber); }
.login-chip {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-height: var(--touch);
 background: linear-gradient(180deg, #818cf8, var(--brand));
 color: #fff;
 border-radius: 999px;
 padding: 8px 14px;
 font-size: 15px;
 font-weight: 700;
 box-shadow: 0 8px 20px rgba(99, 102, 241, 0.28);
}

.layout {
 max-width: 1056px;
 width: 100%;
 margin: 0 auto;
 display: grid;
 min-width: 0;
}

.main {
 min-width: 0;
 min-height: calc(100vh - var(--header-h));
 padding: 16px var(--page-pad-x) calc(108px + env(safe-area-inset-bottom, 0px));
}
.side, .rail { display: none; }

.page-head { margin-bottom: 8px; }
.page-head .kicker,
.kicker {
 margin: 0;
 font-size: 11px;
 font-weight: 700;
 letter-spacing: 0.16em;
 text-transform: uppercase;
 color: var(--gold-deep);
}
html.dark .page-head .kicker,
html.dark .kicker { color: var(--gold); }
.page-head h1 {
 margin: 8px 0 10px;
 font-size: var(--fs-title);
 line-height: 1.2;
 overflow-wrap: anywhere;
}
.page-head h1::after {
 content: "";
 display: block;
 width: 42px;
 height: 1px;
 background: var(--brand);
}
.page-head .lede,
.lede {
 margin: 0;
 max-width: 42em;
 font-size: var(--fs-muted);
 line-height: 1.65;
 color: var(--muted);
}

.bottom-nav {
 position: fixed;
 left: 10px;
 right: 10px;
 bottom: calc(10px + env(safe-area-inset-bottom, 0px));
 z-index: 40;
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 2px;
 padding: 4px;
 background: rgba(255, 255, 255, 0.78);
 backdrop-filter: blur(24px) saturate(1.5);
 border: 1px solid rgba(255, 255, 255, 0.7);
 border-radius: 20px;
 box-shadow: 0 18px 50px rgba(20, 20, 28, 0.14);
}
html.dark .bottom-nav {
 background: rgba(16, 18, 28, 0.82);
 border-color: rgba(255, 255, 255, 0.08);
}
.nav-item {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 2px;
 min-height: 48px;
 padding: 8px 2px 7px;
 font-size: 12px;
 font-weight: 600;
 color: #8a8378;
 border-radius: 14px;
}
.nav-item.active {
 color: var(--brand);
 background: rgba(99, 102, 241, 0.1);
}
html.dark .nav-item.active { color: var(--brand); }

.card {
 background: var(--surface);
 backdrop-filter: blur(16px);
 border-radius: 18px;
 border: 1px solid var(--line);
 box-shadow: 0 18px 48px -32px rgba(20, 16, 10, 0.4);
}
.hero {
 position: relative;
 overflow: hidden;
 border-radius: 22px;
 padding: 20px 16px 18px;
 color: #f3eadc;
 border: 1px solid rgba(99, 102, 241, 0.22);
 background:
 radial-gradient(720px 260px at 100% -20%, rgba(99, 102, 241, 0.22), transparent 55%),
 linear-gradient(160deg, #16130f 0%, #241c14 100%);
}
.hero p.kicker { color: var(--gold); }
.hero h1 { margin: 10px 0 8px; font-size: var(--fs-hero); line-height: 1.25; }
.hero .desc { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: rgba(243, 234, 220, 0.7); }
.row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.pill {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-height: 40px;
 border-radius: 999px;
 padding: 10px 16px;
 font-size: 15px;
 font-weight: 700;
}
.pill.white { background: #f7f1e6; color: #1c1408; }
.pill.amber { background: var(--amber); color: #14141c; }

.ticker {
 overflow: hidden;
 border-radius: 0;
 margin: 18px 0 16px;
 color: #efece6;
 background: #0c0e16;
 border: 1px solid rgba(245, 158, 11, 0.2);
 position: relative;
}
.ticker::before,
.ticker::after {
 content: "";
 position: absolute;
 top: 0;
 bottom: 0;
 width: 24px;
 z-index: 1;
 pointer-events: none;
}
.ticker::before { left: 0; background: linear-gradient(90deg, #0c0e16, transparent); }
.ticker::after { right: 0; background: linear-gradient(270deg, #0c0e16, transparent); }
.ticker-track {
 display: flex;
 gap: 36px;
 width: max-content;
 padding: 11px 20px;
 animation: ticker 45.7s linear infinite;
}
.ticker-item {
 display: flex;
 flex-shrink: 0;
 gap: 10px;
 align-items: center;
 white-space: nowrap;
 color: inherit;
 text-decoration: none;
 letter-spacing: 0.04em;
 font-size: 14px;
}
.ticker-item:hover { color: inherit; }
.ticker-item b { font-weight: 700; color: var(--gold-soft, #e4d2a6); }
.ticker-item b .listing-chip { margin-left: 6px; }
.ticker-meta { color: #9aa3b5; font-size: 13px; }
.ticker-item strong { font-weight: 700; color: #efece6; }
.up { color: var(--up); }
.down { color: var(--down); }

.info { padding: 12px 14px; font-size: 0.9375rem; margin: 14px 0; }
.section-title {
 display: flex;
 flex-wrap: wrap;
 align-items: baseline;
 justify-content: space-between;
 gap: 6px 10px;
 margin: 18px 0 10px;
}
.section-title h2 { margin: 0; font-family: var(--display); font-size: clamp(1.125rem, 1rem + 1.2vw, 1.375rem); font-weight: 600; }
.muted { color: var(--muted); font-size: var(--fs-muted); }

.grid-3 { display: grid; gap: 12px; min-width: 0; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.board-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.board-tile {
 position: relative;
 isolation: isolate;
 overflow: hidden;
 display: flex;
 align-items: flex-end;
 min-width: 0;
 min-height: 112px;
 padding: 16px 14px 14px;
 border-radius: 18px;
 color: #fff8ee;
 background:
  linear-gradient(180deg, #3a342c 0%, #1c1814 100%);
 border: 1px solid rgba(255, 248, 236, 0.38);
 border-top-color: rgba(255, 255, 255, 0.55);
 border-bottom-color: rgba(28, 22, 16, 0.62);
 box-shadow:
  0 1.5px 0 rgba(255, 255, 255, 0.62) inset,
  0 12px 22px rgba(255, 244, 228, 0.2) inset,
  0 -16px 26px rgba(12, 10, 8, 0.42) inset,
  0 2px 0 rgba(255, 255, 255, 0.22),
  0 10px 10px -5px rgba(20, 16, 10, 0.34),
  0 24px 38px -16px rgba(20, 16, 10, 0.52);
 transform: translateY(0);
}
.board-tile-photo {
 position: absolute;
 inset: 0;
 z-index: 0;
 background-size: cover;
 background-position: center;
 opacity: 0.8;
 filter: saturate(1.08) brightness(1.16) contrast(0.88);
}
.board-tile-mist {
 position: absolute;
 inset: 0;
 z-index: 1;
 pointer-events: none;
 background:
  radial-gradient(95% 80% at 12% -8%, rgba(255, 255, 255, 0.42), transparent 56%),
  linear-gradient(165deg, rgba(255, 248, 236, 0.22) 0%, rgba(255, 244, 228, 0.05) 48%, rgba(22, 16, 12, 0.32) 100%);
}
.board-tile-body {
 position: relative;
 z-index: 2;
 min-width: 0;
}
.board-tile h3 {
 margin: 0;
 font-size: 19.5px;
 font-weight: 800;
 letter-spacing: -0.02em;
 overflow-wrap: anywhere;
 color: #fffef9;
 text-shadow:
  -1px -1px 0 rgba(12, 10, 8, 0.88),
  1px -1px 0 rgba(12, 10, 8, 0.88),
  -1px 1px 0 rgba(12, 10, 8, 0.88),
  1px 1px 0 rgba(12, 10, 8, 0.88),
  0 2px 3px rgba(12, 10, 8, 0.7),
  0 6px 16px rgba(12, 10, 8, 0.55);
}
.board-tile.pressable:hover {
 transform: translateY(-3px);
 box-shadow:
  0 1px 0 rgba(255, 255, 255, 0.58) inset,
  0 12px 20px rgba(255, 244, 228, 0.16) inset,
  0 -12px 20px rgba(12, 10, 8, 0.32) inset,
  0 12px 10px -6px rgba(20, 16, 10, 0.3),
  0 26px 40px -18px rgba(20, 16, 10, 0.55);
}
.board-tile.pressable:active {
 transform: translateY(2px) scale(0.995);
 box-shadow:
  0 1px 0 rgba(255, 255, 255, 0.28) inset,
  0 8px 16px rgba(12, 10, 8, 0.28) inset,
  0 6px 10px -8px rgba(20, 16, 10, 0.4);
}
html.dark .board-tile {
 border-color: rgba(255, 248, 236, 0.22);
}
.board-body {
 width: 100%;
 max-width: 100%;
 margin: 12px 0;
 padding: 12px;
 min-height: 96px;
 border-radius: 12px;
 border: 1px solid var(--line);
 background: transparent;
 color: var(--text);
 font-size: 16px;
 resize: vertical;
 outline: none;
}
.board-body:focus { border-color: var(--brand); }
.board-file { display: block; margin: 4px 0 8px; font-size: 16px; font-weight: 650; }
.board-file input { display: block; margin-top: 8px; width: 100%; }
.board-thumbs, .board-images { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.board-thumbs img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; }
.board-images img { width: 100%; max-width: 100%; border-radius: 16px; }
.archive-cover {
 height: 132px;
 color: #fff;
 display: flex;
 align-items: end;
 padding: 14px 16px;
 position: relative;
}
.hall {
 position: absolute;
 left: 12px;
 top: 12px;
 background: var(--gold);
 color: #1c1408;
 border-radius: 999px;
 padding: 3px 9px;
 font-size: 13px;
 font-weight: 800;
 letter-spacing: 0.08em;
}
.kind { background: rgba(255,255,255,0.18); border-radius: 999px; padding: 3px 9px; font-size: 13px; font-weight: 700; }
.pad { padding: 16px; }
.pad h3 { margin: 0 0 8px; font-size: 15px; font-weight: 720; overflow-wrap: anywhere; }
.board-guide-text {
 margin: 0;
 white-space: pre-wrap;
}
.meta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; font-size: 13px; color: #8b909c; }

.stock-mini { padding: 16px; }
.stock-mini .code { font-size: 13px; letter-spacing: 0.12em; color: #8b909c; margin: 0 0 4px; }
.stock-mini h3 { margin: 0; }
.price { font-size: var(--fs-price); font-weight: 900; margin: 10px 0 4px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.price-gold { color: var(--gold-deep); }
.quote-name { font-size: var(--fs-display); margin: 4px 0 0; overflow-wrap: anywhere; }
.quote-name .quote-search {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.quote-name .quote-search:hover {
  color: var(--brand);
  border-bottom-color: rgba(99, 102, 241, 0.45);
}
.cta { padding: 18px; color: #fff; }
.cta.amber { background: linear-gradient(160deg, #fbbf24, var(--amber)); color: #14141c; }
.cta.brand { background: linear-gradient(160deg, #818cf8, var(--brand-deep)); }

.filters {
 display: flex;
 gap: 8px;
 overflow-x: auto;
 max-width: 100%;
 padding-bottom: 4px;
 -webkit-overflow-scrolling: touch;
 scrollbar-width: none;
}
.filters::-webkit-scrollbar { display: none; }
.chip {
 white-space: nowrap;
 flex-shrink: 0;
 min-height: 40px;
 border-radius: 999px;
 padding: 8px 14px;
 font-size: 15px;
 font-weight: 650;
 background: transparent;
 color: var(--muted);
 border: 1px solid var(--line);
}
.chip.on {
 background: var(--ink);
 color: #f3eadc;
 border-color: transparent;
}
html.dark .chip.on { background: var(--gold); color: #1c1408; }
.sort { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 14px; align-items: center; }
.sort button { border-radius: 999px; min-height: 40px; padding: 8px 14px; font-size: 14px; font-weight: 650; color: #8b909c; }
.sort button.on { background: var(--ink); color: #f3eadc; }
html.dark .sort button.on { background: var(--gold); color: #1c1408; }
.search-input {
 width: 100%;
 max-width: 100%;
 height: 48px;
 margin: 4px 0 12px;
 padding: 0 4px 0 2px;
 border-radius: 0;
 border: none;
 border-bottom: 1px solid var(--line);
 background: transparent;
 color: var(--text);
 font-size: 16px;
 outline: none;
}
.search-input:focus { border-bottom-color: var(--gold); }
.search-input::placeholder { color: #a39a8c; }
.more-btn {
 width: 100%;
 min-height: var(--touch);
 margin-top: 2px;
 border-radius: 0 0 18px 18px;
 padding: 14px;
 border: none;
 border-top: 1px solid var(--line);
 font-weight: 650;
 color: var(--muted);
 background: transparent;
}
.more-btn:hover { color: var(--gold-deep); }
.card .ledger-more {
 margin-top: 10px;
 border-radius: 12px;
 border: 1px solid var(--line);
}

.empty-board {
 text-align: center;
 padding: 40px 16px;
 border: 1px dashed var(--line);
 color: var(--muted);
 font-size: 17px;
}

.list {
 display: flex;
 flex-direction: column;
 list-style: none;
 margin: 0;
 padding: 0;
 background: var(--surface);
 border: 1px solid var(--line);
 border-top: 2px solid var(--brand);
 border-radius: 2px 2px 18px 18px;
 overflow: hidden;
 box-shadow: 0 22px 50px -34px rgba(20, 16, 10, 0.45);
}
.stock-row, .rank-item {
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 12px 14px;
 min-width: 0;
}
.list .stock-row {
 border-radius: 0;
 border-bottom: 1px solid var(--line);
 background: transparent;
 box-shadow: none;
}
#kosdaq-list .stock-row {
 padding-top: calc(12px * 1.2);
 padding-bottom: calc(12px * 1.2);
 min-height: calc(64px * 1.2);
 gap: 8px;
}
#kosdaq-list .stock-row .grow,
#kosdaq-list .spark,
#kosdaq-list .stock-row .right {
 flex: 1 1 0;
 min-width: 0;
}
#kosdaq-list .spark {
 height: 40px;
 display: flex;
 align-items: center;
 justify-content: center;
 pointer-events: none;
}
#kosdaq-list .spark svg {
 width: 100%;
 height: 36px;
 display: block;
}
#kosdaq-list .stock-row .right {
 white-space: nowrap;
}
.list li:last-child .stock-row { border-bottom: none; }
.board-item {
 border-bottom: 1px solid var(--line);
}
.board-item:last-child { border-bottom: none; }
.board-item.is-hidden { opacity: 0.62; }
.board-item.is-hidden .stock-row b { color: var(--muted); }
.board-item.is-current .stock-row { background: rgba(99, 102, 241, 0.07); }
.board-item-head {
 display: flex;
 align-items: center;
 gap: 8px;
 min-width: 0;
}
.board-item-head .stock-row {
 flex: 1;
 min-width: 0;
}
.list .board-item .vote-bar {
 flex: 0 0 auto;
 justify-content: flex-end;
 margin-left: auto;
 padding: 8px 14px 8px 0;
}
.list .board-item .vote-btn {
 min-width: 68px;
 justify-content: center;
}
.board-more { margin-top: 8px; }
.admin-bar {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 8px;
 padding: 0 16px 12px;
}
.admin-bar .chip,
.admin-bar .submit {
 width: auto;
 margin: 0;
 padding: 10px 12px;
 min-height: 40px;
 font-size: 15px;
}
.admin-move {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 font-size: 16px;
 font-weight: 650;
 color: var(--muted);
}
.admin-move select {
 border: 1px solid var(--line);
 border-radius: 10px;
 background: var(--surface);
 color: var(--text);
 padding: 8px 10px;
 min-height: 40px;
 font-size: 16px;
 max-width: 100%;
}
.admin-board { margin-bottom: 10px; }
article .admin-bar { padding: 14px 0 0; }
article .vote-bar { padding: 14px 0 0; }
.vote-bar {
 display: flex;
 align-items: center;
 gap: 8px;
 padding: 0 16px 12px;
}
.vote-btn {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 min-height: 40px;
 border: 1px solid var(--line);
 border-radius: 999px;
 padding: 8px 12px;
 background: transparent;
 color: var(--text);
 font-size: 15px;
 font-weight: 700;
}
.vote-btn img {
 width: 18px;
 height: 18px;
 display: block;
}
.vote-btn.on {
 border-color: #e11d48;
 background: rgba(225, 29, 72, 0.1);
}
.vote-btn.is-down.on {
 border-color: #64748b;
 background: rgba(100, 116, 139, 0.12);
}
.vote-btn.is-guest { opacity: 0.72; }
.comment-box { margin-top: 18px; padding-top: 8px; }
.comment-box h3 { margin: 0 0 10px; font-size: 16px; font-weight: 720; }
.comment-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.comment-item {
 padding: 12px;
 border-radius: 12px;
 border: 1px solid var(--line);
 background: rgba(20, 18, 14, 0.03);
}
html.dark .comment-item { background: rgba(243, 234, 220, 0.04); }
.comment-item p { margin: 6px 0 0; font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.comment-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.comment-meta b { color: var(--text); font-size: 14px; }
.comment-heart {
 margin-left: auto;
 min-height: 36px;
 padding: 6px 10px;
 font-size: 13px;
}
.comment-del {
 margin-left: auto;
 min-height: 36px;
 padding: 6px 10px;
 border-radius: 999px;
 font-size: 13px;
 font-weight: 650;
 color: var(--muted);
}
.author-alias {
 display: block;
 margin: 0 0 10px;
 font-size: 14px;
 font-weight: 700;
 color: var(--muted);
}
.author-alias .search-input { margin-top: 6px; font-weight: 650; }
.author-alias-hint { margin: 0 0 10px; font-size: 13px; }
.bottom-nav.nav-4 {
 grid-template-columns: repeat(4, minmax(0, 1fr));
}
.bottom-nav.nav-4 .nav-item,
.bottom-nav.nav-5 .nav-item {
 font-size: 11px;
 padding: 6px 0;
 letter-spacing: -0.04em;
}
.bottom-nav.nav-5 {
 grid-template-columns: repeat(5, minmax(0, 1fr));
}
.bottom-nav.nav-5 .nav-item { font-size: 10px; }
.stock-row:hover, .rank-item:hover { background: rgba(99, 102, 241, 0.07); }
.rank-item { border-radius: 10px; }
.grow { flex: 1; min-width: 0; }
.grow b {
 display: block;
 font-size: 16px;
 font-weight: 700;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
.right { text-align: right; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.right b { font-size: 16px; font-weight: 900; }
.right b { font-size: 18px; font-weight: 900; }

.login-page {
 min-height: 100vh;
 background:
 radial-gradient(800px 400px at 50% -10%, rgba(99, 102, 241, 0.22), transparent 55%),
 #0a0b12;
 color: #f8f5ef;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 24px 16px;
}
.login-box { width: 100%; max-width: 360px; text-align: center; }
.login-logo {
 width: 56px;
 height: 56px;
 margin: 0 auto 16px;
 border-radius: 50%;
 background: linear-gradient(145deg, #818cf8, #4f46e5);
 color: #fff;
 display: grid;
 place-items: center;
 font-family: var(--display);
 font-size: 24px;
 font-weight: 700;
 box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.4), 0 16px 40px rgba(79, 70, 229, 0.4);
}
.login-box h1 { font-size: clamp(1.75rem, 1.3rem + 3vw, 2.5rem); margin: 0; overflow-wrap: anywhere; }
.social { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.social button {
 min-height: 50px;
 height: auto;
 padding: 12px 16px;
 border-radius: 14px;
 font-size: 17px;
 font-weight: 750;
}
.kakao { background: #fee500; color: #14141c; }
.google { background: #fff; color: #14141c; }

.cover-lg { height: 148px; border-radius: 20px; color: #fff; display: flex; align-items: end; padding: 16px; }
.cover-lg h1 { font-size: var(--fs-hero); overflow-wrap: anywhere; }
article h1,
.card > h1,
.pad > h1 {
 font-size: var(--fs-title);
 line-height: 1.25;
 overflow-wrap: anywhere;
}
.body { font-size: var(--fs-body); line-height: 1.7; color: #5c564c; }
html.dark .body { color: #d4cbbd; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { background: rgba(99, 102, 241, 0.12); color: var(--gold-deep); border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 700; }
html.dark .tag { color: var(--gold); }
.statbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 14px; font-size: 15px; }
.reco { background: var(--amber); color: #14141c; border-radius: 999px; min-height: 40px; padding: 8px 12px; font-size: 15px; font-weight: 800; }

.dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; text-align: center; font-size: 13px; }
.dl div { background: rgba(20, 18, 14, 0.04); border-radius: 14px; padding: 12px 8px; min-width: 0; }
html.dark .dl div { background: rgba(243, 234, 220, 0.05); }
.dl dt { color: var(--muted); letter-spacing: 0.02em; overflow-wrap: anywhere; }
.dl dd { margin: 6px 0 0; font-weight: 750; overflow-wrap: anywhere; }
.dl > div:last-child:nth-child(odd) { grid-column: 1 / -1; }

.price-chart h3 { margin: 0; font-size: 13px; letter-spacing: 0.08em; }
.chart-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.chart-live { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; letter-spacing: 0.16em; color: var(--gold); }
.chart-live i {
 width: 6px; height: 6px; border-radius: 999px; background: var(--gold);
 box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7); animation: pulseDot 1.8s infinite; display: block;
}
@keyframes pulseDot {
 70% { box-shadow: 0 0 0 8px rgba(99, 102, 241, 0); }
 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}
.chart-wrap { height: 148px; }
.chart-wrap svg { width: 100%; height: 100%; display: block; }
.chart-now { animation: chartNow 1.4s ease-in-out infinite; }
@keyframes chartNow {
 0%, 100% { opacity: 1; }
 50% { opacity: 0.35; }
}
.chart-axis { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); margin-top: 4px; letter-spacing: 0.12em; }

.order { padding: 16px; }
.order h3 { margin: 0 0 12px; font-size: 13px; letter-spacing: 0.08em; }
.ob { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 4px 0; font-size: 14px; align-items: center; min-width: 0; }
.mid { grid-column: 1 / -1; background: rgba(99, 102, 241, 0.12); color: var(--gold-deep); text-align: center; border-radius: 10px; padding: 9px; font-weight: 800; margin: 4px 0; letter-spacing: 0.04em; }
html.dark .mid { color: var(--gold); }
.bar { height: 28px; position: relative; overflow: hidden; }
.bar span.fill { position: absolute; inset: 0 auto 0 0; }
.bar.ask span.fill { right: 0; left: auto; background: rgba(14, 165, 233, 0.22); }
.bar.bid span.fill { background: rgba(244, 63, 94, 0.2); }
.ask-p { color: var(--down); font-weight: 800; padding: 0 8px; }
.bid-p { color: var(--up); font-weight: 800; padding: 0 8px; }
.qty { position: relative; z-index: 1; padding: 0 8px; line-height: 28px; color: #64748b; }

.tabs { display: grid; grid-template-columns: 1fr 1fr; background: rgba(20,18,14,0.05); border-radius: 14px; padding: 4px; margin-bottom: 12px; }
html.dark .tabs { background: rgba(243,234,220,0.05); }
.tabs button { border-radius: 10px; min-height: var(--touch); padding: 10px; font-size: 16px; font-weight: 750; color: #64748b; }
.tabs button.buy.on { background: var(--up); color: #fff; }
.tabs button.sell.on { background: var(--down); color: #fff; }
.qty-row { display: flex; gap: 8px; margin: 12px 0; align-items: center; }
.qty-row input {
 flex: 1; min-width: 0; height: var(--touch); border-radius: 12px; border: 1px solid var(--line);
 background: transparent; color: var(--text); text-align: center; font-weight: 750; font-size: 16px;
}
.step {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: var(--touch);
 min-height: var(--touch);
 background: rgba(20,18,14,0.05);
 border-radius: 12px;
 padding: 8px 12px;
}
html.dark .step { background: rgba(243,234,220,0.08); }
.submit { width: 100%; min-height: 48px; border-radius: 14px; padding: 13px; font-size: 17px; font-weight: 800; color: #fff; }
.submit.buy { background: var(--up); }
.submit.sell { background: var(--down); }
.submit:disabled { opacity: 0.4; cursor: not-allowed; }

.notice-wrap { position: relative; }
@media (max-width: 639px) {
 .notice-panel {
  position: fixed;
  top: calc(var(--header-h) + 8px);
  right: 10px;
  left: 10px;
  width: auto;
  max-width: none;
 }
}
.notice-dot {
 position: absolute;
 top: -2px;
 right: -2px;
 min-width: 16px;
 height: 16px;
 padding: 0 4px;
 border-radius: 999px;
 background: var(--gold);
 color: #1c1408;
 font-size: 12px;
 font-weight: 800;
 display: grid;
 place-items: center;
}
.notice-panel {
 position: absolute;
 right: 0;
 top: calc(var(--header-h) - 12px);
 z-index: 50;
 width: min(calc(100vw - 20px), 20rem);
 max-width: calc(100vw - 20px);
 overflow: hidden;
 border-radius: 14px;
 background: #12141f;
 color: #f8f5ef;
 border: 1px solid rgba(255, 255, 255, 0.1);
 box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}
.notice-head {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 10px 12px;
 border-bottom: 1px solid rgba(243, 234, 220, 0.08);
 font-size: 16px;
}
.notice-all { color: var(--gold); font-size: 13px; font-weight: 700; }
.notice-panel ul { max-height: 18rem; overflow-y: auto; }
.notice-panel li { border-bottom: 1px solid rgba(243, 234, 220, 0.06); }
.notice-panel li a { display: block; padding: 12px; min-height: 44px; }
.notice-panel li b { display: block; font-size: 14px; color: var(--gold); }
.notice-panel li span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.45; color: #d4cbbd; }
.notice-panel li em { display: block; margin-top: 4px; font-size: 13px; font-style: normal; color: #7a7368; }
.notice-panel li.read { opacity: 0.6; }
.notice-empty { padding: 16px 12px; font-size: 16px; color: #a89f90; }
.listing-chip {
 color: var(--gold-deep);
 font-size: 13px;
 font-weight: 800;
 font-style: normal;
}
html.dark .listing-chip { color: var(--gold); }
.listing-banner { border-color: rgba(99, 102, 241, 0.4); background: rgba(99, 102, 241, 0.1); }
.notice-item { margin-top: 8px; }
.notice-item b { display: block; font-size: 16px; color: var(--gold-deep); }
.notice-item.read { opacity: 0.6; }

.avatar {
 width: 56px; height: 56px; border-radius: 50%; color: #fff;
 display: grid; place-items: center; font-size: 23px; font-weight: 800;
 overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.nick-hint { margin: 8px 0 12px; font-size: 16px; }
.nick-warn { color: #f43f5e; font-weight: 650; }
.logout {
 width: 100%; border-radius: 14px; padding: 13px; min-height: 48px; font-size: 17px; font-weight: 650;
 color: #6b7280; border: 1px solid var(--line);
}

.autosell-modal {
 position: fixed;
 inset: 0;
 z-index: 80;
 display: grid;
 place-items: center;
 padding: 16px;
}
.autosell-modal[hidden] { display: none !important; }
.autosell-backdrop {
 position: absolute;
 inset: 0;
 background: rgba(10, 11, 18, 0.62);
}
.autosell-dialog {
 position: relative;
 width: min(92vw, 22rem);
 max-width: 100%;
 border-radius: 18px;
 background: var(--surface);
 border: 1px solid var(--line);
 box-shadow: 0 24px 60px rgba(10, 11, 18, 0.35);
 padding: 20px 16px 16px;
 animation: toastIn 0.3s ease-out;
 backdrop-filter: blur(12px);
}
.autosell-kicker {
 margin: 0;
 font-size: 12px;
 font-weight: 700;
 letter-spacing: 0.16em;
 color: var(--gold);
 text-transform: uppercase;
}
.autosell-dialog h2 {
 margin: 6px 0 0;
 font-size: clamp(1.2rem, 1rem + 1.5vw, 1.375rem);
 font-weight: 800;
}
.autosell-lede { margin: 8px 0 0; }
.autosell-body { margin-top: 14px; display: grid; gap: 10px; }
.autosell-item {
 padding: 12px 12px;
 border-radius: 12px;
 border: 1px solid var(--line);
 background: rgba(99, 102, 241, 0.04);
}
.autosell-item b { display: block; font-size: 17px; }
.autosell-item p { margin: 4px 0 0; font-size: 15px; }
.autosell-dialog .submit { margin-top: 16px; width: 100%; }
.nick-link {
 display: inline;
 padding: 0;
 border: 0;
 background: none;
 color: var(--brand);
 font: inherit;
 font-weight: 800;
 cursor: pointer;
 text-decoration: underline;
 text-underline-offset: 2px;
}
.list li.board-item .stock-row { border-bottom: none; padding-bottom: 4px; }
.board-item-by { margin: 0; padding: 0 14px 12px; font-size: 13px; }
.comment-meta .nick-link {
 color: var(--text);
 font-size: 14px;
 font-weight: 800;
}
.mail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mail-item {
 border: 1px solid var(--line);
 border-radius: 12px;
 padding: 12px;
 background: transparent;
}
.mail-item.is-unread { border-color: rgba(99, 102, 241, 0.45); background: rgba(99, 102, 241, 0.06); }
.mail-item-head {
 width: 100%;
 text-align: left;
 border: 0;
 padding: 0;
 background: none;
 color: inherit;
}
.mail-item b { display: block; font-size: 15px; }
.mail-item .muted { margin: 4px 0 0; }
.mail-item .mail-body { margin: 8px 0 0; font-size: 15px; line-height: 1.5; white-space: pre-wrap; }
.admin-tabs { margin: 0 0 16px; }
.admin-stats {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 8px;
 margin: 0 0 10px;
}
.admin-stats div {
 padding: 12px;
 border-radius: 12px;
 background: rgba(20, 18, 14, 0.05);
}
html.dark .admin-stats div { background: rgba(243, 234, 220, 0.06); }
.admin-stats span { display: block; color: var(--muted); font-size: 13px; font-weight: 700; }
.admin-stats b { display: block; margin-top: 4px; font-size: 22px; font-weight: 800; }
.admin-members {
 list-style: none;
 margin: 8px 0 0;
 padding: 0;
}
.admin-members .admin-member {
 display: flex;
 flex-direction: column;
 align-items: stretch;
 padding: 12px 0;
 border-bottom: 1px solid var(--line);
}
.admin-members .admin-member:last-child { border-bottom: 0; }
.admin-member.is-online { background: rgba(16, 185, 129, 0.08); margin: 0 -12px; padding-left: 12px; padding-right: 12px; border-radius: 10px; }
.admin-member-main {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 gap: 10px;
 width: 100%;
}
.admin-member-side {
 display: flex;
 flex-direction: column;
 align-items: flex-end;
 gap: 6px;
 flex-shrink: 0;
}
.admin-toolbar { margin: 10px 0 4px; }
.admin-filters { margin: 10px 0 0; }
.admin-member-detail {
 margin: 10px 0 4px;
 padding: 12px;
 border-radius: 12px;
 background: rgba(20, 18, 14, 0.05);
}
html.dark .admin-member-detail { background: rgba(243, 234, 220, 0.06); }
.admin-member-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.admin-memo { margin-top: 12px; }
.admin-memo label { display: block; margin-bottom: 6px; font-weight: 700; }
.admin-memo .submit { margin-top: 8px; }
@media (min-width: 640px) {
 .admin-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.mail-receipt {
  display: inline;
  font-weight: 800;
}
.mail-receipt.is-read { color: var(--muted); }
.mail-receipt.is-unread { color: var(--brand); }
.user-modal-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.user-modal-actions .submit { margin-top: 0; }
.user-modal-actions .submit:not(.buy) {
 background: var(--gold);
 color: #1c1408;
}
.user-modal-field { margin-top: 12px; width: 100%; }
.user-profile-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}
.user-profile-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.user-profile-list li span { color: var(--muted); font-weight: 650; }
.user-profile-list li b { font-weight: 800; text-align: right; }

#toast {
 position: fixed; left: 50%; top: calc(12px + env(safe-area-inset-top, 0px)); transform: translateX(-50%);
 z-index: 70; width: min(92vw, 24rem); display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.toast {
 display: flex; align-items: center; gap: 12px; border-radius: 16px;
 background: rgba(12, 14, 22, 0.95); color: #f8f5ef; padding: 12px 16px;
 animation: toastIn 0.35s ease-out;
 border: 1px solid rgba(245, 158, 11, 0.3);
 box-shadow: 0 18px 40px rgba(10, 11, 18, 0.35);
}
.toast-ico {
 width: 40px; height: 40px; border-radius: 12px; background: var(--amber); color: #14141c;
 display: grid; place-items: center; flex-shrink: 0; font-weight: 800;
}
.toast b { display: block; font-size: 16px; }
.toast span { font-size: 14px; color: #c9bfae; }
.pop { animation: countPop 0.45s ease-out; }

.live {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 font-size: 13px;
 font-weight: 700;
 letter-spacing: 0.18em;
 color: var(--gold);
}
.live i {
 width: 6px;
 height: 6px;
 border-radius: 50%;
 background: var(--gold);
 box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7);
 animation: pulse 1.8s infinite;
}

@keyframes ticker {
 from { transform: translateX(0); }
 to { transform: translateX(-50%); }
}
@keyframes toastIn {
 from { opacity: 0; transform: translateY(-16px) scale(0.96); }
 to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes countPop {
 0% { transform: scale(1); }
 40% { transform: scale(1.12); }
 100% { transform: scale(1); }
}
@keyframes pulse {
 70% { box-shadow: 0 0 0 8px rgba(99, 102, 241, 0); }
 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}

.game-grid {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 8px;
}
.game-tile {
 position: relative;
 display: flex;
 flex-direction: column;
 justify-content: flex-end;
 min-height: 118px;
 padding: 12px 10px 10px;
 border-radius: 16px;
 color: #fff8ee;
 background:
  radial-gradient(120px 80px at 20% 0%, rgba(251, 191, 36, 0.28), transparent 60%),
  linear-gradient(180deg, #3a342c 0%, #1c1814 100%);
 border: 1px solid rgba(255, 248, 236, 0.38);
 box-shadow: 0 14px 28px -18px rgba(20, 16, 10, 0.55);
}
.game-tile h3 {
 margin: 0;
 font-family: var(--display);
 font-size: clamp(0.95rem, 0.8rem + 1.4vw, 1.25rem);
 line-height: 1.25;
}
.game-tile p {
 margin: 4px 0 0;
 font-size: 11px;
 color: rgba(255, 248, 236, 0.72);
}
.game-tile.is-soon {
 opacity: 0.5;
 filter: grayscale(0.25);
}
.game-tile .game-ico {
 position: absolute;
 top: 10px;
 right: 10px;
 font-size: 22px;
 opacity: 0.85;
}
.dice-notice {
 margin: 0 0 14px;
 padding: 12px 14px;
 border-radius: 14px;
 background: rgba(245, 158, 11, 0.12);
 border: 1px solid rgba(245, 158, 11, 0.28);
 font-size: 14px;
 line-height: 1.55;
}
.dice-stake {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 8px;
 margin: 0 0 8px;
 color: #000;
}
.dice-stake p {
 margin: 0;
 display: flex;
 flex-direction: column;
 gap: 4px;
 min-width: 0;
 padding: 10px 12px;
 border-radius: 12px;
 background: rgba(20, 18, 14, 0.06);
}
.dice-stake span {
 display: block;
 color: #000;
 font-size: 13px;
 font-weight: 800;
 line-height: 1.3;
}
.dice-stake b {
 display: block;
 color: #000;
 font-size: 16px;
 font-weight: 800;
 line-height: 1.25;
 letter-spacing: -0.04em;
 font-variant-numeric: tabular-nums;
 word-break: break-all;
}
html.dark .dice-stake,
html.dark .dice-stake span,
html.dark .dice-stake b {
 color: #fff;
}
html.dark .dice-stake p {
 background: rgba(255, 255, 255, 0.1);
}
.dice-arena {
 position: relative;
 height: min(72vw, 340px);
 margin: 8px 0 16px;
 perspective: 720px;
 overflow: hidden;
 border-radius: 24px;
 background: radial-gradient(circle at 50% 30%, #2a2118, #120e0b 72%);
}
.dice-cutscene {
 position: absolute;
 inset: 0;
 z-index: 8;
 background: #0c0907;
}
.dice-cutscene-kicker {
 position: absolute;
 top: 10px;
 left: 12px;
 z-index: 2;
 margin: 0;
 font-size: 12px;
 font-weight: 800;
 letter-spacing: 0.18em;
 color: #fbbf24;
}
.dice-cutscene-shot {
 position: absolute;
 inset: 0;
 margin: 0;
 opacity: 0;
 pointer-events: none;
}
.dice-cutscene-shot.is-on {
 opacity: 1;
}
.dice-cutscene-shot img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: center 18%;
 transform: scale(1.12);
}
.dice-cutscene-shot.is-on img {
 animation: diceCrowdZoom 1s ease-out forwards;
}
.dice-sweat {
 position: absolute;
 top: 16%;
 left: 54%;
 width: 9px;
 height: 13px;
 border-radius: 45% 45% 55% 55%;
 background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(186, 214, 230, 0.55));
 box-shadow: 0 0 6px rgba(255, 255, 255, 0.45);
 opacity: 0;
}
.dice-cutscene-shot[data-shot="1"] .dice-sweat { top: 18%; left: 48%; }
.dice-cutscene-shot[data-shot="2"] .dice-sweat { top: 14%; left: 57%; }
.dice-cutscene-shot.is-on .dice-sweat {
 animation: diceSweat 0.95s ease-in 0.12s forwards;
}
@keyframes diceCrowdZoom {
 from { transform: scale(1.18); }
 to { transform: scale(1.04); }
}
@keyframes diceSweat {
 0% { opacity: 0; transform: translateY(0) scale(0.55); }
 18% { opacity: 1; }
 100% { opacity: 0.8; transform: translateY(26px) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
 .dice-cutscene-shot.is-on img,
 .dice-cutscene-shot.is-on .dice-sweat { animation: none; }
 .dice-cutscene-shot.is-on img { transform: scale(1.04); }
 .dice-cutscene-shot.is-on .dice-sweat { opacity: 0.85; transform: translateY(12px); }
}
.dice-plate {
 position: absolute;
 left: 50%;
 top: 50%;
 width: min(86%, 300px);
 aspect-ratio: 1;
 transform: translate(-50%, -50%);
 border-radius: 50%;
 background:
  radial-gradient(circle at 38% 32%, #3d9a5f, #166534 58%, #0b3b22 78%);
 box-shadow:
  0 0 0 12px #7a4a24,
  0 0 0 16px #3f2a14,
  inset 0 18px 28px rgba(255, 255, 255, 0.12),
  inset 0 -22px 30px rgba(0, 0, 0, 0.35);
}
.die {
 position: absolute;
 width: 56px;
 height: 56px;
 left: 50%;
 top: 50%;
 margin: -28px 0 0 -28px;
 transform-style: preserve-3d;
 transform: rotateX(-18deg) rotateY(22deg);
 transition: transform 1.35s cubic-bezier(0.22, 0.7, 0.28, 1);
}
.die-a { margin-left: -62px; }
.die-b { margin-left: 6px; }
.die.is-out-left {
 transform: translate3d(-138%, 92%, 40px) rotateX(420deg) rotateY(-260deg) !important;
}
.die.is-out-right {
 transform: translate3d(142%, 98%, 40px) rotateX(-380deg) rotateY(310deg) !important;
}
.die-face {
 position: absolute;
 inset: 0;
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-template-rows: repeat(3, 1fr);
 padding: 8px;
 background: #f8f4ea;
 border: 1px solid rgba(20, 20, 28, 0.12);
 border-radius: 10px;
 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
 backface-visibility: hidden;
}
.die-face i {
 width: 8px;
 height: 8px;
 margin: auto;
 border-radius: 50%;
 background: #1c1408;
}
.die-face.f1 { transform: rotateY(0deg) translateZ(28px); }
.die-face.f6 { transform: rotateY(180deg) translateZ(28px); }
.die-face.f3 { transform: rotateY(90deg) translateZ(28px); }
.die-face.f4 { transform: rotateY(-90deg) translateZ(28px); }
.die-face.f2 { transform: rotateX(90deg) translateZ(28px); }
.die-face.f5 { transform: rotateX(-90deg) translateZ(28px); }
.die-face.f1 i:nth-child(5),
.die-face.f3 i:nth-child(1),
.die-face.f3 i:nth-child(5),
.die-face.f3 i:nth-child(9),
.die-face.f5 i:nth-child(1),
.die-face.f5 i:nth-child(3),
.die-face.f5 i:nth-child(5),
.die-face.f5 i:nth-child(7),
.die-face.f5 i:nth-child(9) { background: #b91c1c; }
.dice-bets { display: grid; gap: 10px; }
.dice-nums {
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 8px;
}
.dice-side {
 display: grid;
 grid-template-columns: repeat(5, minmax(0, 1fr));
 gap: 8px;
}
.dice-spot {
 position: relative;
 isolation: isolate;
 overflow: hidden;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 min-height: 92px;
 padding: 8px 5px 9px;
 border-radius: 14px;
 font-weight: 750;
 text-align: center;
 color: #3a3228;
 border: 1px solid rgba(255, 255, 255, 0.62);
 border-top-color: rgba(255, 255, 255, 0.88);
 border-bottom-color: rgba(28, 22, 16, 0.18);
 box-shadow:
  0 1.5px 0 rgba(255, 255, 255, 0.78) inset,
  0 12px 18px rgba(255, 255, 255, 0.38) inset,
  0 -14px 20px rgba(20, 16, 10, 0.12) inset,
  0 1px 0 rgba(255, 255, 255, 0.35),
  0 5px 0 rgba(20, 16, 10, 0.1),
  0 12px 18px -10px rgba(20, 16, 10, 0.32);
}
.dice-spot::before {
 content: "";
 position: absolute;
 left: 12%;
 right: 12%;
 top: 0;
 height: 42%;
 border-radius: 12px 12px 40% 40%;
 background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
 pointer-events: none;
}
.dice-spot span,
.dice-spot small,
.dice-spot .chip-amt {
 position: relative;
 z-index: 1;
}
.dice-spot span {
 font-size: 19.5px;
 line-height: 1.15;
 font-weight: 800;
}
.dice-spot small {
 font-size: 16.5px;
 font-weight: 700;
 opacity: 0.72;
}
.dice-spot .chip-amt {
 display: block;
 box-sizing: border-box;
 width: calc(100% + 2px);
 margin-top: 5px;
 padding: 4px 4px 3px;
 border-radius: 8px;
 background: rgba(20, 16, 10, 0.16);
 color: #141414;
 font-size: 12px;
 font-weight: 800;
 line-height: 1.2;
 letter-spacing: -0.05em;
 font-variant-numeric: tabular-nums;
 word-break: break-all;
}
.dice-spot.is-sum .chip-amt { background: rgba(22, 101, 52, 0.18); color: #14532d; }
.dice-spot.is-parity .chip-amt { background: rgba(88, 28, 135, 0.16); color: #3b0764; }
.dice-spot.is-range .chip-amt { background: rgba(154, 52, 18, 0.18); color: #7c2d12; }
.dice-spot.is-out .chip-amt { background: rgba(159, 18, 57, 0.16); color: #881337; }
html.dark .dice-spot .chip-amt {
 background: rgba(0, 0, 0, 0.45);
 color: #fff;
}
html.dark .dice-spot.is-sum .chip-amt { background: rgba(16, 185, 129, 0.28); color: #ecfdf5; }
html.dark .dice-spot.is-parity .chip-amt { background: rgba(167, 139, 250, 0.28); color: #f5f3ff; }
html.dark .dice-spot.is-range .chip-amt { background: rgba(251, 146, 60, 0.28); color: #fff7ed; }
html.dark .dice-spot.is-out .chip-amt { background: rgba(251, 113, 133, 0.28); color: #fff1f2; }
.dice-spot.is-sum {
 background: linear-gradient(180deg, #eaf8f0 0%, #d4eedf 48%, #b9dfc8 100%);
 color: #2a5a40;
}
.dice-spot.is-parity {
 background: linear-gradient(180deg, #f3edfb 0%, #e2d6f4 48%, #cfc0ea 100%);
 color: #5a3d86;
}
.dice-spot.is-range {
 background: linear-gradient(180deg, #fff0e0 0%, #f8dcc0 48%, #efc4a0 100%);
 color: #8a4a26;
}
.dice-spot.is-out {
 background: linear-gradient(180deg, #ffe8ec 0%, #f8cdd6 48%, #f0b4c0 100%);
 color: #8a3048;
}
html.dark .dice-spot.is-sum {
 background: linear-gradient(180deg, #3a5c4a 0%, #2a4638 48%, #1e342a 100%);
 color: #d7f3e4;
}
html.dark .dice-spot.is-parity {
 background: linear-gradient(180deg, #4a3c62 0%, #3a2e50 48%, #2c2340 100%);
 color: #eadcf8;
}
html.dark .dice-spot.is-range {
 background: linear-gradient(180deg, #5a4334 0%, #463428 48%, #34261e 100%);
 color: #ffe0c8;
}
html.dark .dice-spot.is-out {
 background: linear-gradient(180deg, #5a343c 0%, #462830 48%, #341e24 100%);
 color: #ffd6de;
}
html.dark .dice-spot {
 border-color: rgba(255, 255, 255, 0.14);
 border-top-color: rgba(255, 255, 255, 0.28);
 border-bottom-color: rgba(0, 0, 0, 0.35);
 box-shadow:
  0 1.5px 0 rgba(255, 255, 255, 0.18) inset,
  0 12px 18px rgba(255, 255, 255, 0.08) inset,
  0 -14px 20px rgba(0, 0, 0, 0.28) inset,
  0 1px 0 rgba(255, 255, 255, 0.1),
  0 5px 0 rgba(0, 0, 0, 0.28),
  0 12px 18px -10px rgba(0, 0, 0, 0.45);
}
.dice-spot.on {
 transform: translateY(3px);
 filter: saturate(1.12) brightness(0.97);
 box-shadow:
  0 1px 0 rgba(255, 255, 255, 0.45) inset,
  0 8px 14px rgba(20, 16, 10, 0.16) inset,
  0 1px 0 rgba(20, 16, 10, 0.08),
  0 3px 8px -4px rgba(20, 16, 10, 0.22);
}
html.dark .dice-spot.on {
 box-shadow:
  0 1px 0 rgba(255, 255, 255, 0.12) inset,
  0 8px 14px rgba(0, 0, 0, 0.35) inset,
  0 1px 0 rgba(0, 0, 0, 0.25),
  0 3px 8px -4px rgba(0, 0, 0, 0.4);
}
.dice-spot.is-sum.on { color: #1d4a34; }
.dice-spot.is-parity.on { color: #4a2f74; }
.dice-spot.is-range.on { color: #7a3c18; }
.dice-spot.is-out.on { color: #7a243c; }
html.dark .dice-spot.is-sum.on { color: #e8fff2; }
html.dark .dice-spot.is-parity.on { color: #f4e8ff; }
html.dark .dice-spot.is-range.on { color: #ffe8d4; }
html.dark .dice-spot.is-out.on { color: #ffe4ea; }
.dice-tools {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 align-items: center;
 margin: 12px 0;
}
.dice-tools .search-input { margin: 0; flex: 1; min-width: 120px; }
.dice-result {
 margin-top: 12px;
 padding: 12px 14px;
 border-radius: 14px;
 background: rgba(20, 18, 14, 0.05);
}
html.dark .dice-result { background: rgba(243, 234, 220, 0.06); }
.dice-result b { display: block; margin-bottom: 4px; }
@media (prefers-reduced-motion: reduce) {
 .die { transition: none; }
}

@media (min-width: 640px) {
 :root {
  --header-h: 60px;
  --page-pad-x: 20px;
  --fs-muted: 0.9375rem;
 }
 .brand { gap: 12px; }
 .brand-en { display: inline; margin-left: 0.3em; }
 .header-actions { gap: 8px; }
 .points { max-width: none; font-size: 16px; padding: 6px 12px; letter-spacing: -0.02em; }
 .main { padding-top: 20px; }
 .page-head .kicker,
 .kicker { font-size: 12px; letter-spacing: 0.2em; }
 .lede { font-size: 1.0125rem; line-height: 1.7; }
 .hero { padding: 28px 24px 26px; }
 .hero .desc { font-size: 1.05rem; }
 .dice-nums { grid-template-columns: repeat(6, minmax(0, 1fr)); }
 .dice-side { grid-template-columns: repeat(5, minmax(0, 1fr)); }
 .dice-spot { min-height: 102px; }
 .dice-spot span { font-size: 21px; }
 .dice-spot small { font-size: 16.5px; }
 .dice-spot .chip-amt { font-size: 13px; padding: 5px 6px 4px; }
 .dice-stake b { font-size: 18px; }
 .ticker::before,
 .ticker::after { width: 48px; }
 .section-title { margin: 22px 0 12px; }
 .dl { grid-template-columns: repeat(3, minmax(0, 1fr)); font-size: 14px; }
 .ob { font-size: 16px; }
 .body { font-size: 1.0625rem; line-height: 1.8; }
 .cover-lg { height: 176px; padding: 22px; }
 .login-page { padding: 40px 24px; }
 .login-logo { width: 64px; height: 64px; font-size: 28px; }
 .nav-item { font-size: 13px; }
 .grow b,
 .right b { font-size: 17px; }
 .info,
 .statbar { font-size: 16px; }
 #kosdaq-list .spark svg { height: 40px; }
 .bottom-nav { left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
}

@media (min-width: 1024px) {
 :root {
  --header-h: 64px;
  --page-pad-x: 28px;
  --fs-title: 2.625rem;
  --fs-display: 2rem;
  --fs-price: 2.45rem;
  --fs-hero: 2.125rem;
  --fs-muted: 1.0625rem;
 }
 .layout {
  max-width: 972px;
 }
 .layout {
  grid-template-columns: minmax(0, 1fr);
  padding: 28px 28px 40px;
  align-items: start;
 }
 .lounge { display: flex; margin-left: 10px; }
 .lounge-link { font-size: 15px; padding: 6px 8px; }
 .bottom-nav { display: none; }
 .main { padding: 4px 0 36px; min-height: auto; }
 .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 .board-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
 .board-tile { min-height: 128px; padding: 18px 16px 16px; }
 .points .remain { display: inline; }
 .hero { padding: 36px 32px; }
 .header-inner { padding: 0 24px; gap: 16px; }
 .brand { font-size: 22px; }
 .pad { padding: 18px; }
 #kosdaq-list .stock-row .grow b,
 #kosdaq-list .stock-row .right b {
  font-size: 20.4px;
 }
}

@media (max-width: 1023px) {
 .points .remain { display: none; }
}

@media (max-width: 639px) {
 .header-actions .icon-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
 }
 .title-clock {
  width: 38px;
  height: 28px;
  transform: scale(0.84);
  transform-origin: left bottom;
 }
}

@media (max-width: 379px) {
 .brand { gap: 6px; }
 .brand-copy { font-size: 118%; }
 .header-actions { gap: 2px; }
 .points { max-width: 6.5rem; font-size: 12px; padding: 4px 7px; }
 .dice-stake { grid-template-columns: 1fr; }
}