/* MAGIC STOCK — Obsidian & Champagne. Pure presentation; no simulated prices. */
:root {
  color-scheme: dark;
  --ink: #0b1018;
  --surface: #101823;
  --surface-2: #15202c;
  --hairline: rgba(226, 211, 174, .14);
  --champagne: #e9d2a5;
  --champagne-deep: #b8965b;
  --muted-luxe: #91a1ae;
  --light-luxe: #f2f1ee;
}
html { background: #070b11; }
body { background: radial-gradient(ellipse 70% 45% at 50% -10%, #34313a 0%, #101723 50%, #080c13 100%); color: var(--light-luxe); }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--champagne); outline-offset: 3px; }
::selection { background: #c7ad76; color: #101820; }
.app {
  max-width: 480px;
  background:
    radial-gradient(ellipse 80% 30% at 50% -5%, #2a2632 0%, transparent 80%),
    linear-gradient(160deg, #101723 0%, #0a111b 56%, #0c131d 100%);
  box-shadow: 0 20px 120px #0008, 0 0 0 1px rgba(248, 226, 174, .08);
}
.app:before {
  height: 2px;
  background: linear-gradient(90deg, transparent, #6e5b3e 16%, #f2e5c5 50%, #6e5b3e 84%, transparent);
  box-shadow: 0 1px 16px #ccad7154;
}
.overview { min-height: 100dvh; padding: 21px 17px 23px; }
.top { align-items: center; }
.brand .magic { color: #f7f5ef; font-size: 29px; font-weight: 600; letter-spacing: -1.7px; }
.brand .stock { color: var(--champagne); font-weight: 500; font-size: 29px; margin-left: 6px; letter-spacing: -1.6px; }
.eyebrow { color: #c0a77b; letter-spacing: 2.4px; font-size: 8px; font-weight: 750; margin-top: 7px; }
.mode {
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(145, 211, 169, .2);
  background: rgba(22, 78, 60, .23);
  color: #ade5bd;
  font-size: 9px;
  letter-spacing: 1px;
}
.mode i,.connection i {
  width: 6px; height: 6px; background: #75e3a9; box-shadow: 0 0 9px #83e4ae;
  animation: breathe-led 2.4s ease-in-out infinite;
}
@keyframes breathe-led { 50% { opacity:.48; box-shadow:0 0 2px #83e4ae } }
.hero-panel {
  position: relative;
  isolation: isolate;
  height: 237px;
  margin-top: 23px;
  overflow: hidden;
  border: 1px solid rgba(226, 206, 167, .3);
  border-radius: 19px;
  background:
    radial-gradient(circle at 86% 36%, rgba(190, 149, 80, .19), transparent 45%),
    linear-gradient(115deg, #252331, #151c26 64%, #101821);
  box-shadow: 0 16px 55px #0004, inset 0 1px 0 rgba(251, 235, 207, .10);
}
.hero-panel:after {
  content: "";
  position:absolute; inset: 0;
  pointer-events:none;
  background: linear-gradient(108deg, transparent 23%, rgba(255,240,205,.055) 44%, transparent 65%);
  transform: translateX(-130%);
  animation: hero-shimmer 9s ease-in-out infinite;
}
@keyframes hero-shimmer { 0%, 45% {transform:translateX(-130%)} 75%,100% {transform:translateX(150%)} }
.hero-noise {
  position:absolute; inset:0; z-index:-1;
  opacity:.32;
  background-image: linear-gradient(90deg,rgba(253,224,174,.03) 1px,transparent 1px),linear-gradient(rgba(253,224,174,.03) 1px,transparent 1px);
  background-size: 18px 18px;
  mask-image:linear-gradient(90deg,transparent,black);
}
.hero-copy { position:relative; z-index:2; padding:26px 19px 0; }
.hero-kicker { display:inline-flex; align-items:center; gap:9px; color:#d1b784; font-size:9px; font-weight:800; letter-spacing:2.1px; }
.hero-kicker-line { display:inline-block; width:17px; height:1px; background:#c9af7c; }
.hero-copy h1 { font-size:24px; line-height:1.33; letter-spacing:-1.5px; font-weight:760; color:#fffdf9; margin:17px 0 10px; }
.hero-copy h1 em { font-style:normal; color:#eed3a2; }
.hero-copy p { margin:0; color:#b2bac2; font-size:10px; line-height:1.7; letter-spacing:-.1px; }
.radar-art { width:230px; height:230px; position:absolute; right:-82px; top:6px; border-radius:50%; border:1px solid rgba(233,207,161,.18); background:radial-gradient(circle,rgba(204,173,119,.08) 0 2%,transparent 2.5%); opacity:.85; }
.radar-circle { position:absolute; border-radius:50%; border:1px solid rgba(216,190,146,.23); top:50%;left:50%;transform:translate(-50%,-50%); }
.circle-one {width:70%;height:70%}.circle-two {width:43%;height:43%}.circle-three {width:16%;height:16%;border-color:#d2ae744d}
.radar-art:before,.radar-art:after {content:"";position:absolute;background:rgba(229,199,145,.17)}
.radar-art:before {width:1px;height:100%;left:50%;top:0}
.radar-art:after {height:1px;width:100%;top:50%;left:0}
.radar-ray { position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 0deg, transparent 0deg, transparent 295deg,rgba(246,205,123,.14) 337deg,rgba(246,205,123,.6) 359deg,transparent 360deg); animation:radar-sweep 7s linear infinite; }
.radar-center {position:absolute;width:7px;height:7px;top:calc(50% - 3.5px);left:calc(50% - 3.5px);background:#f5d79a;border-radius:50%;box-shadow:0 0 20px #d8ad6a}
@keyframes radar-sweep {to {transform:rotate(360deg)}}
.hero-foot {position:absolute;left:19px;right:19px;bottom:15px;display:flex;align-items:center;justify-content:space-between;z-index:2;border-top:1px solid rgba(236,207,156,.18);padding-top:11px;color:#c7b48d;font-size:8px;font-weight:800;letter-spacing:1.5px}
.hero-foot b {color:#ddc491;margin-left:8px}.gold-dot{display:inline-block;width:5px;height:5px;margin-right:5px;background:#ddbc83;border-radius:50%;box-shadow:0 0 7px #eec982}
.time-row { margin-top:21px; padding:0 3px 18px; border-bottom:1px solid var(--hairline); }
.date { color:#b2bcc5; font-size:10px; font-weight:550; }
.clock { color:#f4f3ee; margin-top:5px; font-size:27px; font-weight:650; letter-spacing:1px; }
.weather strong { color:#d2c4aa; font-size:12px; font-weight:650; }
.weather span { color:#758695; font-size:10px; }
.session-bar { margin-top:14px; padding:12px 13px; border:1px solid var(--hairline); border-radius:13px; background:linear-gradient(125deg,#172330,#121b25); }
.session-market { display:flex; align-items:center;gap:11px; }
.market-symbol {display:inline-flex;align-items:center;justify-content:center;min-width:48px;height:36px;border-radius:9px;border:1px solid #a78b5d6b;background:linear-gradient(135deg,#473b30,#2a2e32);color:#ecd6aa;font-family:Georgia,serif;font-size:13px;font-weight:700;letter-spacing:.3px}
.session-market strong,.session-market small{display:block;white-space:nowrap}
.session-market strong{color:#f2f1eb;font-size:11px;font-weight:760}
.session-market small{color:#8396a2;letter-spacing:.6px;font-size:8px;margin-top:3px}
.session-name{font-size:10px;color:#e3ccb0}
.session-caption {font-size:8px;color:#8393a0;margin-top:4px}
.session-open .session-name {color:#8fe0b4}
.section-head {margin:28px 0 13px;}
.section-overline{color:#c8a977;font-size:9px;letter-spacing:2px}
.line-mark{display:inline-block;width:13px;height:1px;vertical-align:middle;margin-right:4px;background:#c9ad7a}
.section-title{font-size:21px;color:#f9f7f2;margin-top:7px;font-weight:720;letter-spacing:-1px}
.section-title span{color:#e7ca95}
.counter { color:#8392a1; font-size:9px; line-height:1; }
.counter b {font-size:32px;color:#f4e3c2;font-weight:650}
.counter>span{color:#8392a1;font-size:12px}
.counter small {display:block;margin-top:5px;letter-spacing:1.6px;font-size:8px;color:#9299a3}
.radar-sub{margin:0 0 13px;font-size:9px;color:#8ea0ad;letter-spacing:.15px;align-items:center}
.radar-sub .connection{color:#a0d9bc;font-size:9px;max-width:52%;text-align:right;line-height:1.4}
.cards {grid-auto-flow:row;grid-template-rows:none;gap:10px;flex:none;}
.stock-card {
  min-height:135px; padding:13px 12px 11px;
  background:linear-gradient(150deg,#1b2634 0%,#131e29 78%,#15202b 100%);
  border:1px solid rgba(221,209,183,.13);
  border-radius:15px;
  box-shadow:0 9px 24px #0003,inset 0 1px rgba(248,240,216,.04);
  overflow:visible;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease,background .25s ease;
}
@keyframes card-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.cards:not(.hydrated) .stock-card{animation:card-arrive .55s both}
.cards:not(.hydrated) .stock-card:nth-child(2n){animation-delay:70ms}
.cards:not(.hydrated) .stock-card:nth-child(3n){animation-delay:140ms}
.stock-card:before{content:"";height:1px;position:absolute;top:0;left:16px;right:16px;background:linear-gradient(90deg,transparent,#e3caa25c,transparent);opacity:.65}
.stock-card:hover{transform:translateY(-3px);border-color:#d2bb8566;box-shadow:0 12px 30px #0005,0 0 20px #c3a06b0b}
.stock-card:active{transform:scale(.977)}
.stock-card.fresh{padding:12px 11px 10px;border:2px solid #f15c67;box-shadow:0 0 0 2px #e4445826,0 0 26px #ee4b5833;animation:fresh-glow 1.6s ease-in-out infinite alternate}
@keyframes fresh-glow{to{box-shadow:0 0 0 3px #e444582b,0 0 35px #ee4b584a}}
.market {padding:4px 5px;border-radius:5px;font-size:8px;letter-spacing:.4px}
.market.kospi {background:#294059;color:#a9c8eb;border:1px solid #5279a355}
.market.kosdaq {background:#42334c;color:#d4b4e6;border:1px solid #9369ad44}
.ticker {color:#e9eef0;font-size:12px;font-weight:800}
.card-index {position:absolute;right:12px;top:13px;color:#788b982d;font-family:Georgia,serif;font-size:11px;pointer-events:none}
.price {margin-top:11px;color:#fcfcf8;font-size:20px;font-weight:760;letter-spacing:-.6px}
.won {color:#86929b;font-size:10px}
.card-foot {margin-top:11px;align-items:end}
.rise {color:#ff7e85;font-size:12px}
.rise.down {color:#85baff}
.capture {color:#8f9da7;font-size:9px}
.fresh-badge {top:-8px;right:10px;background:linear-gradient(110deg,#f0646d,#bd3544);box-shadow:0 3px 12px #ee415948}
.stock-card.waiting{background:linear-gradient(150deg,#141f2b,#111a23);border-style:dashed;border-color:#b9bbab24;box-shadow:inset 0 0 20px #0001;justify-content:space-between}
.stock-card.waiting:before{opacity:.2}
.slot-no{font-size:10px;color:#c7ac7a;border:1px solid #bba57744;background:#bda57712;border-radius:5px;padding:4px 5px;font-weight:800}
.waiting .ticker{font-family:Georgia,serif;font-size:10px;letter-spacing:1px;color:#768894;font-weight:550}
.waiting-signal{display:grid;gap:8px;margin:14px 0 11px}
.waiting-signal span{height:5px;width:75%;border-radius:9px;background:linear-gradient(90deg,#43515e50,#6f798044,#43515e20)}
.waiting-signal span:last-child{width:48%}
.waiting-caption{font-size:9px;color:#718490}
.waiting-star{font-size:11px;color:#9e88657b}
.bottom {border-top:1px solid var(--hairline);padding-top:16px;margin-top:22px;font-size:10px;color:#8c9ba7;gap:9px}
.bottom .preview-action{color:#e3c999!important;text-decoration:none;font-size:10px;font-weight:700}
.demo {border:1px solid #c09e5d42;background:#ccaa6f12;color:#d2bb8b;letter-spacing:.7px}
.foot-disclaimer {margin:13px 0 0;text-align:center;font-size:9px;line-height:1.6;color:#768795}
.detail {background:#0d141e;padding:20px 17px 48px}
.detail-head{border-bottom:1px solid var(--hairline)}
.back {background:#1a2733;border:1px solid var(--hairline);color:#e3ccaa}
.detail-brand{color:#e1c18e}
.detail-title h1{color:#fbfaf8}
.company{color:#899aa8}
.detail-price{color:#fffdf6}
.detail-price small,.quote .delta{color:#e6b782}
.block{border:1px solid var(--hairline);background:linear-gradient(150deg,#182330,#121b26);border-radius:15px;box-shadow:0 8px 25px #0002}
.block h2{color:#f0ece4}
.block h2 small{color:#8f9eaa}
.facts .fact{background:#23303c}
.fact span {color:#93a0aa}.fact b{color:#f5eee0}
.disclosure{background:#1b2935;color:#a6b6c0}
.detail .disclosure a {color:#f0d09b!important}
.chart-modal {background:#0b131e}
.chart-modal h2{color:#f4f2eb}
.chart-modal button{background:#c5a66f;color:#111b24}
@media(max-height:760px){
  .overview{padding:17px 14px 18px}.hero-panel{height:211px;margin-top:18px}.hero-copy{padding:21px 17px 0}.hero-copy h1{font-size:22px}.hero-foot{left:17px;right:17px}
  .time-row{margin-top:17px;padding-bottom:14px}.session-bar{margin-top:11px;padding:10px}.section-head{margin:22px 0 10px}.cards{gap:8px}.stock-card{min-height:124px;padding:11px 10px 9px}.stock-card.fresh{padding:10px 9px 8px}.price{font-size:18px}.bottom{margin-top:17px}
}
@media(min-width:600px){
  body {background:radial-gradient(circle at 50% 0%,#272a32,#080c13 58%)}
  .app{margin:24px auto;min-height:calc(100dvh - 48px);border:1px solid #c3a8752b;border-radius:25px}
  .overview{min-height:calc(100dvh - 48px)}
}
@media(max-width:350px){
  .overview{padding:16px 10px}.hero-copy h1{font-size:21px}.hero-panel{height:220px}
  .stock-card{min-height:127px}.price{font-size:16px}.ticker{font-size:11px}.session-market strong{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after {animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* Admin shares the same visual identity while preserving its ON/OFF behavior. */
.admin-body {min-height:100dvh;background:radial-gradient(ellipse at 50% -15%,#30303a,#0a1018 62%);color:#faf6ed}
.admin-body .shell{max-width:480px;padding:30px 21px 50px}
.admin-body .back{color:#cfb88d;font-size:12px}
.admin-body .eyebrow{margin-top:54px;color:#d2b57e;font-size:10px;letter-spacing:2.7px}
.admin-body h1{font-size:36px;line-height:1.12;letter-spacing:-1.7px;font-family:Georgia,serif;font-weight:650;color:#f8f4ea}
.admin-body p{color:#98a7b4;line-height:1.8}
.admin-body .card{background:linear-gradient(155deg,#1b2733,#111d28);border:1px solid #d3b98745;border-radius:19px;padding:26px;box-shadow:0 18px 45px #0005}
.admin-body .label{color:#f4f2ed;font-size:18px}
.admin-body .status{color:#9caebb;font-size:12px}
.admin-body .toggle{height:45px;width:91px;background:#34414c;border:1px solid #5b6570;color:#bdc6ca;transition:all .2s ease}
.admin-body .toggle.on{background:linear-gradient(110deg,#5b4a31,#b08c51);border-color:#c5a874;color:#fff9e8;box-shadow:0 0 22px #c5a87438}
.admin-body .toggle:not(:disabled):hover{transform:translateY(-2px)}
.admin-body .notice{background:#1d2a35;color:#9eb1be;border:1px solid #bca67924;font-size:12px}
.admin-body .signin{color:#e9d2a5;border-color:#a88a566e;background:#9e83411c}
.admin-body .signin.hidden{display:none}
.admin-body .admin-shield{display:inline-flex;align-items:center;gap:7px;margin-top:19px;font-size:10px;letter-spacing:1.6px;color:#ceb787}
.admin-body .admin-shield:before{content:"";width:6px;height:6px;border-radius:50%;background:#c7a76d;box-shadow:0 0 10px #c7a76d}