/* =====================================================================================================================
   D304 유리 대시보드 (owner 11/6 "레퍼런스의 따뜻한 실내 배경 · 반투명 유리 재질 · 색감 · 여백 · 공간감을 일관된 UI로").
   Loaded after style.css and overriding it. Every value here is a token or uses one; the rules, the observed reference
   and the chosen values are in docs/ui-design-system.md - read it before UI work, add a token there before a new value here.
   ===================================================================================================================== */

/* --- 1. tokens ------------------------------------------------------------------------------------------------------ */
:root {
  /* the room behind the glass (scripts/glass_background.py - our own painting, no photo) */
  --g-room: url("bg/room.webp");
  --g-room-tint: linear-gradient(180deg, rgba(64, 44, 28, .10), rgba(64, 44, 28, .02) 40%, rgba(40, 26, 16, .16));
  /* ink: warm near-black text, four steps */
  --g-ink: #1f1b17; --g-ink-2: #352e28; --g-ink-3: #5a5149; --g-ink-4: #776c62;
  /* glass surfaces */
  --g-shell: rgba(246, 240, 232, .44);   /* the big container (blurs the room) */
  --g-bar: rgba(251, 247, 242, .60);     /* top bar, rail, dock (blur the room) */
  --g-card: rgba(255, 255, 255, .56);    /* cards inside the container (no blur of their own) */
  --g-card-lo: rgba(255, 255, 255, .34); /* a block inside a card */
  --g-card-hi: rgba(255, 255, 255, .78); /* fields, selected pills, popovers */
  --g-solid: #fbf8f4;                    /* a modal and anything that must not show through */
  --g-edge: rgba(255, 255, 255, .66);    /* the thin bright outline of every glass surface */
  --g-edge-lo: rgba(255, 255, 255, .40);
  --g-line: rgba(72, 52, 34, .10);       /* hairlines inside a surface */
  --g-line-2: rgba(72, 52, 34, .17);
  --g-blur-shell: 22px; --g-blur-bar: 18px; --g-sat: 140%;
  /* shape */
  --g-r-shell: 30px; --g-r-card: 20px; --g-r-inner: 14px; --g-r-ctl: 12px; --g-r-pill: 999px;
  --g-shadow-shell: 0 30px 80px rgba(48, 30, 16, .20), inset 0 1px 0 rgba(255, 255, 255, .55);
  --g-shadow-card: 0 8px 24px rgba(60, 40, 22, .07), inset 0 1px 0 rgba(255, 255, 255, .70);
  --g-shadow-bar: 0 12px 32px rgba(48, 30, 16, .15), inset 0 1px 0 rgba(255, 255, 255, .62);
  --g-shadow-pop: 0 22px 60px rgba(48, 30, 16, .26);
  --g-shadow-lift: 0 14px 34px rgba(60, 40, 22, .12), inset 0 1px 0 rgba(255, 255, 255, .80);
  /* colour: teal = brand · selection · ok; coral = the highlighted series and progress; red/blue = price up/down (Korean) */
  --g-teal: #1d8a7b; --g-teal-2: #136a5f; --g-teal-soft: rgba(29, 138, 123, .12); --g-teal-line: rgba(29, 138, 123, .36);
  --g-teal-grad: linear-gradient(150deg, #37a998 0%, #1f8777 55%, #166a5f 100%);
  --g-coral: #e8654a; --g-coral-soft: rgba(232, 101, 74, .14);
  --g-up: #d23446; --g-dn: #2a62cf; --g-up-soft: rgba(210, 52, 70, .10); --g-dn-soft: rgba(42, 98, 207, .10);
  --g-ok: #1b8f63; --g-warn: #a8690f; --g-err: #c93a40; --g-warn-soft: rgba(224, 164, 58, .18); --g-err-soft: rgba(201, 58, 64, .10);
  --g-c1: #e8654a; --g-c2: #2b2622; --g-c3: #1d8a7b; --g-c4: #e0a43a; --g-c5: #4f7fd9; --g-c6: #6bb36f;  /* chart series, in order */
  /* space and type */
  --g-s1: 4px; --g-s2: 8px; --g-s3: 12px; --g-s4: 16px; --g-s5: 20px; --g-s6: 24px; --g-s7: 32px; --g-s8: 40px;
  --g-fs-xs: 11.5px; --g-fs-sm: 12.5px; --g-fs-md: 14px; --g-fs-lg: 16px; --g-fs-xl: 20px; --g-fs-h1: 30px; --g-fs-num: 26px;
  /* motion: short and quiet; none when the visitor asks for less */
  --g-ease: cubic-bezier(.2, .7, .2, 1); --g-t-fast: 140ms; --g-t: 220ms; --g-t-enter: 460ms; --g-stagger: 45ms;
  /* the shell's left edge (the rail sits left of it) */
  --g-gap: 20px; --g-rail-w: 52px; --g-left: max(calc(var(--g-gap) * 2 + var(--g-rail-w) - 4px), calc((100vw - 1680px) / 2));

  /* the older names every component already uses, now meaning the glass tokens */
  --bg: #b49a82; --bg2: var(--g-card-hi); --panel: var(--g-card); --panel2: var(--g-card-lo); --panel3: var(--g-card-hi);
  --line: var(--g-line); --line2: var(--g-line-2);
  --text: var(--g-ink-2); --muted: var(--g-ink-3); --dim: var(--g-ink-4); --title: var(--g-ink);
  --navy: var(--g-card-hi); --navy2: var(--g-card-lo);
  --gold: var(--g-teal); --gold2: var(--g-teal-2); --gold3: #0f5148; --gold-line: var(--g-teal-line); --gold-soft: var(--g-teal-soft);
  --on-gold: #fff; --accent: var(--g-teal); --accent2: var(--g-teal-2);
  --green: var(--g-ok); --red: var(--g-err); --amber: var(--g-warn); --purple: #7a5cc8; --up: var(--g-up); --dn: var(--g-dn);
  --btn: rgba(255, 255, 255, .58); --btn-hover: rgba(255, 255, 255, .86); --btn-line: rgba(255, 255, 255, .72);
  --radius: var(--g-r-card); --shadow: var(--g-shadow-card);
  color-scheme: light;
}

/* --- 2. the room and the type ---------------------------------------------------------------------------------------- */
html { background: var(--bg); }
body.glass { background: transparent; color: var(--g-ink-2); font-size: var(--g-fs-md); line-height: 1.6; }
.g-room { position: fixed; inset: 0; z-index: -1; background: var(--g-room-tint), var(--g-room) center / cover no-repeat, var(--bg); }
::selection { background: rgba(29, 138, 123, .24); color: var(--g-ink); }
* { scrollbar-color: rgba(72, 52, 34, .28) transparent; }
::-webkit-scrollbar-thumb { background: rgba(72, 52, 34, .26); border: 2px solid transparent; background-clip: padding-box; border-radius: 10px; }
a { color: var(--g-teal-2); } a:hover { color: var(--g-teal); }
h1 { color: var(--g-ink); font-size: var(--g-fs-h1); font-weight: 700; letter-spacing: -.035em; line-height: 1.2; }
h2 { color: var(--g-ink); font-size: var(--g-fs-lg); font-weight: 650; }
h3 { color: var(--g-ink-3); }
.muted { color: var(--g-ink-3); } .dim { color: var(--g-ink-4); }
.hero { margin: 0 0 var(--g-s6); }
.hero p.muted { color: var(--g-ink-3); }
.pos { color: var(--g-ok); } .neg { color: var(--g-err); }
.up { color: var(--g-up); } .dn { color: var(--g-dn); }
:focus-visible { outline: 2px solid var(--g-teal); outline-offset: 2px; border-radius: 6px; }

/* --- 3. the shell: glass surfaces that blur the room (only these four blur - cards do not, see the doc) --------------- */
.g-bar, .glass .subnav {
  -webkit-backdrop-filter: blur(var(--g-blur-bar)) saturate(var(--g-sat)); backdrop-filter: blur(var(--g-blur-bar)) saturate(var(--g-sat)); }
body.shell.glass { display: block; min-height: 100vh; padding: 14px 0 0; }
.glass .topbar { position: sticky; top: 12px; z-index: 30; display: flex; align-items: center; gap: var(--g-s5); height: 56px;
  margin: 0 var(--g-gap) 0 var(--g-left); padding: 0 10px 0 12px; border-radius: 20px; background: var(--g-bar);
  border: 1px solid var(--g-edge); box-shadow: var(--g-shadow-bar); }
.glass .topbar .brand { display: flex; align-items: center; gap: 10px; color: var(--g-ink); flex: none; }
.glass .topbar .mark { width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 15px; font-weight: 800;
  background: var(--g-teal-grad); color: #fff; box-shadow: 0 4px 12px rgba(29, 138, 123, .35), inset 0 1px 0 rgba(255, 255, 255, .35); }
.glass .brand-t { display: flex; flex-direction: column; line-height: 1.1; }
.glass .brand-t b { font-size: 14.5px; font-weight: 700; letter-spacing: -.02em; color: var(--g-ink); }
.glass .brand-t em { font-style: normal; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--g-ink-4); margin-top: 3px; }
.glass .crumb { flex: 1; min-width: 0; display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 13px; color: var(--g-ink-4); }
.glass .crumb b { color: var(--g-ink); font-weight: 650; } .glass .crumb i { font-style: normal; opacity: .5; }
.glass .topbar .who { display: flex; align-items: center; gap: 10px; color: var(--g-ink-3); font-size: 12.5px; }
.g-clock { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: var(--g-r-pill);
  background: var(--g-card); border: 1px solid var(--g-edge); color: var(--g-ink-2); }
.glass .topbar .who .clock { color: var(--g-ink-2); font-weight: 550; }
.glass .live-dot { background: var(--g-teal); box-shadow: 0 0 0 3px rgba(29, 138, 123, .18); }
.glass .sb-user { display: inline-flex; align-items: center; gap: 8px; color: var(--g-ink-2); font-weight: 600; font-size: 13px; }
.glass .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--g-card-hi); color: var(--g-ink); border: 1px solid var(--g-edge);
  box-shadow: inset 0 1px 0 #fff; font-size: 13px; font-weight: 700; display: inline-grid; place-items: center; }
.btn.g-round { width: 36px; height: 36px; padding: 0; border-radius: 50%; display: inline-grid; place-items: center; background: #fff;
  border: 1px solid var(--g-edge); color: var(--g-ink); box-shadow: 0 4px 12px rgba(48, 30, 16, .12); }
.btn.g-round:hover { background: var(--g-ink); color: #fff; border-color: var(--g-ink); }
.btn.g-round .ico { width: 17px; height: 17px; opacity: 1; }

/* the rail: the menu groups as icons; the name shows as a label beside the icon on hover / keyboard focus */
.glass .rail { position: fixed; z-index: 25; top: 92px; left: calc(var(--g-left) - var(--g-rail-w) - 14px); width: var(--g-rail-w);
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 0; border-radius: var(--g-r-pill);
  background: var(--g-bar); border: 1px solid var(--g-edge); box-shadow: var(--g-shadow-bar); }
.glass .rail .sb-head { position: relative; width: 38px; height: 38px; padding: 0; display: grid; place-items: center; border-radius: 50%;
  color: var(--g-ink-3); transition: background var(--g-t-fast) var(--g-ease), color var(--g-t-fast) var(--g-ease); }
.glass .rail .sb-head .ico { width: 18px; height: 18px; opacity: 1; stroke: currentColor; }
.glass .rail .sb-head:hover { background: rgba(255, 255, 255, .62); color: var(--g-ink); }
.glass .rail .sb-head.on { background: #fff; color: var(--g-ink); box-shadow: 0 4px 12px rgba(48, 30, 16, .14); }
.glass .rail .sb-head.on .ico { stroke: var(--g-ink); }
.glass .rail-t { position: absolute; left: calc(100% + 12px); top: 50%; transform: translate(-4px, -50%); white-space: nowrap; pointer-events: none;
  padding: 5px 11px; border-radius: 10px; font-size: 12.5px; font-weight: 600; color: var(--g-ink); background: var(--g-solid);
  border: 1px solid var(--g-edge); box-shadow: 0 8px 20px rgba(48, 30, 16, .16); opacity: 0;
  transition: opacity var(--g-t-fast) var(--g-ease), transform var(--g-t-fast) var(--g-ease); }
.glass .rail .sb-head:hover .rail-t, .glass .rail .sb-head:focus-visible .rail-t { opacity: 1; transform: translate(0, -50%); }

/* the dock: the open group's pages, floating at the bottom; a long list scrolls sideways */
.glass .subnav { position: fixed; z-index: 25; bottom: 16px; left: 50%; transform: translateX(-50%); top: auto;
  display: flex; gap: 2px; align-items: center; max-width: min(1180px, calc(100vw - 2 * var(--g-left))); padding: 5px; overflow-x: auto;
  scrollbar-width: none; border-radius: var(--g-r-pill); background: var(--g-bar); border: 1px solid var(--g-edge); box-shadow: var(--g-shadow-bar); }
.glass .subnav::-webkit-scrollbar { display: none; }
.glass .subnav a { flex: none; padding: 8px 15px; border-radius: var(--g-r-pill); color: var(--g-ink-3); font-size: 13px; font-weight: 550;
  white-space: nowrap; border: 0; transition: background var(--g-t-fast) var(--g-ease), color var(--g-t-fast) var(--g-ease); }
.glass .subnav a:hover { color: var(--g-ink); background: rgba(255, 255, 255, .5); }
.glass .subnav a.on { background: #fff; color: var(--g-ink); font-weight: 650; box-shadow: 0 3px 10px rgba(48, 30, 16, .12); }
.glass .subnav a.on::before { display: none; }

/* the container: the page sits in one large glass panel */
/* the blur sits on a layer behind the container, not on the container: an element with backdrop-filter becomes the frame of every
   position: fixed child (a popup would then open inside the container, under the dock) */
.glass .main.g-shell { position: relative; max-width: none; width: auto; margin: 16px var(--g-gap) 24px var(--g-left); padding: 30px 32px 40px;
  border-radius: var(--g-r-shell); border: 1px solid var(--g-edge-lo); box-shadow: var(--g-shadow-shell); background: none; }
.glass .main.g-shell::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--g-shell);
  -webkit-backdrop-filter: blur(var(--g-blur-shell)) saturate(var(--g-sat)); backdrop-filter: blur(var(--g-blur-shell)) saturate(var(--g-sat)); }
.glass .main.g-shell.has-dock { padding-bottom: 96px; margin-bottom: 16px; }

/* entrance (first load only - app.js drops body.enter; a 30 s refresh does not replay it) */
@keyframes g-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes g-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes g-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
body.enter .topbar, body.enter .rail, body.enter .subnav { animation: g-fade var(--g-t-enter) var(--g-ease) both; }
body.enter .main > * { animation: g-rise var(--g-t-enter) var(--g-ease) both; }
body.enter .main > :nth-child(2) { animation-delay: calc(var(--g-stagger) * 1); }
body.enter .main > :nth-child(3) { animation-delay: calc(var(--g-stagger) * 2); }
body.enter .main > :nth-child(4) { animation-delay: calc(var(--g-stagger) * 3); }
body.enter .main > :nth-child(n+5) { animation-delay: calc(var(--g-stagger) * 4); }
body.enter .g-bars .gb { transform-origin: 50% 100%; transform-box: fill-box; animation: g-grow 620ms var(--g-ease) both; animation-delay: 160ms; }

/* --- 3b. the older rules' hard-coded dark-theme colours, remapped (generated once from style.css on 11/6 - light text colours
   to their glass counterparts, dark fills to glass, white text with no fill to ink; edit by hand from here; the rules
   below in section 4 win where both apply) --------------------------------------------------------------------- */
.glass .brand { color: var(--g-ink); }
.glass .brand em { color: var(--g-ink-3); }
.glass .nav a { color: var(--g-ink-3); }
.glass .who { color: var(--g-ink-3); }
.glass .who .user { color: var(--g-ink); }
.glass .badge.live { color: var(--g-up); }
.glass .badge.paper { color: var(--g-ink-2); }
.glass .pill.green { color: var(--g-ok); }
.glass .pill.red { color: var(--g-up); }
.glass .side.long, .glass .side.buy { color: var(--g-ok); }
.glass .side.short, .glass .side.sell { color: var(--g-up); }
.glass .act.entry, .glass .act.enter, .glass .act.buy, .glass .act.long { color: var(--g-ok); }
.glass .act.exit, .glass .act.close, .glass .act.sell, .glass .act.short { color: var(--g-up); }
.glass .btn.warn { border-color: var(--g-warn); }
.glass .btn.danger { color: var(--g-up); }
.glass .btn.live-btn { color: var(--g-ok); border-color: var(--g-ok); }
.glass pre.log { background: var(--g-card-lo); }
.glass .error { color: var(--g-up); }
.glass .ok { color: var(--g-ok); }
.glass .badge.ok { color: var(--g-ok); }
.glass .hot, .glass a.hot { color: var(--g-warn); }
.glass .chip.hot { color: var(--g-warn); }
.glass .chip.halt { color: var(--g-up); }
.glass .tcard .thead a { color: var(--g-ink); }
.glass .tcard .thead .tv { color: var(--g-up); }
.glass .chip.up { color: var(--g-up); }
.glass .chip.dn { color: var(--g-ink-2); }
.glass .fcal .calhead.sat, .glass .fcal .calnum.sat { color: var(--g-dn); }
.glass .fcal .calsec { color: var(--g-up); }
.glass .topt .secchip { color: var(--g-up); }
.glass .tagbtn.on b { color: var(--g-ink-3); }
.glass .modal-back { background: var(--g-card-lo); color: var(--g-ink-2); }
.glass .report { color: var(--g-ink-2); }
.glass .report h4 { color: var(--g-ink-2); }
.glass .r-tbl .r-why { color: var(--g-ink-2); }
.glass .r-tag { color: var(--g-ink-2); }
.glass .r-tag.buy { color: var(--g-ink-2); }
.glass .r-tag.take_profit { color: var(--g-up); }
.glass .r-tag.stop_loss { color: var(--g-ink-2); }
.glass .notice.ok { color: var(--g-ok); }
.glass .notice.bad { color: var(--g-up); }
.glass .tsheet { color: var(--g-ink-2); }
.glass .tsheet .ts-lead { color: var(--g-ink-2); }
.glass .tsheet .ts-body h4 { color: var(--g-ink-2); }
.glass .verify .vday .col { background: var(--g-card-lo); color: var(--g-ink-2); }
.glass .chip.callst.cand { color: #6b4fc0; }
.glass .chip.callst.pos { color: var(--g-ok); }
.glass .gk .gkrow { color: var(--g-ink-2); }
.glass .gk-switch:hover { color: var(--g-ink); }
.glass .gkcard .gkt { color: var(--g-ink-2); }
.glass .gkcard .gkh { color: var(--g-ink-2); }
.glass .gkcard .gkt-tbl td.sym a { color: var(--g-ink-2); }
.glass .aitem h4::first-letter { color: var(--g-warn); }
.glass .mlegend .mkb { color: var(--g-warn); }
.glass .ind.l0, .glass .lg.l0 { color: var(--g-warn); }
.glass .ind.l1, .glass .lg.l1 { color: var(--g-ok); }
.glass .ind.l2, .glass .lg.l2 { color: #6b4fc0; }
.glass .ind.l4, .glass .lg.l4 { color: #6b4fc0; }
.glass .ind.l5, .glass .lg.l5 { color: var(--g-dn); }
.glass .sigk.note { color: var(--g-warn); }
.glass .sig-tip { background: var(--g-card-lo); }
.glass .av-report p { color: var(--g-ink-2); }
.glass .lab-brand small { color: var(--g-ink-3); }
.glass .lab-new input::placeholder { color: var(--g-ink-3); }
.glass .lab-room { color: var(--g-ink-3); }
.glass .lab-room-at { color: var(--g-ink-3); }
.glass .lab-room-prev { color: var(--g-ink-3); }
.glass .lab-room-empty { color: var(--g-ink-3); }
.glass .lab-toast { color: var(--g-ok); }
.glass .lab-msg.me.verify .lab-bubble { background: var(--g-card-lo); color: var(--g-ink-2); }
.glass .lab-bubble.err { color: var(--g-up); }
.glass .lab-verdict td.fail em { color: var(--g-up); }
.glass .top { background: var(--g-card-lo); color: var(--g-ink-2); }
.glass .subnav { background: var(--g-card-lo); color: var(--g-ink-2); }
.glass .btn.primary, .glass .btn.lab-btn-primary { border-color: #8f6416; }
.glass .btn.danger { color: var(--g-up); }
.glass input, .glass select, .glass textarea { background: var(--g-card-lo); }
.glass .modal-back { background: var(--g-card-lo); color: var(--g-ink-2); }
.glass .sig-tip { background: var(--g-card-lo); color: var(--g-ink-2); }
.glass pre.log { background: var(--g-card-lo); }
.glass .lab-side { background: var(--g-card-lo); color: var(--g-ink-2); }
.glass .lab-title:focus { background: var(--g-card-lo); color: var(--g-ink-2); }
.glass .lab-bubble.err { color: var(--g-up); }
.glass .lab-composer textarea { background: var(--g-card-lo); color: var(--g-ink-2); }
.glass .lab-verdict td.fail em { color: var(--g-up); }
.glass .zn-tag.z-sf { color: var(--g-up); }
.glass .zn-tag.z-fplus { color: var(--g-ink-2); }
.glass .zn-tag.z-j38 { color: #6b4fc0; }
.glass .tm-head { background: var(--g-card-lo); color: var(--g-ink-2); }
.glass .tm-tv { color: var(--g-up); }
.glass .tm-hol { color: var(--g-up); }
.glass .k-earn { color: var(--g-warn) !important; }
.glass .k-ipo { color: #6b4fc0 !important; }
.glass .k-lock { color: var(--g-dn) !important; }
.glass .k-corp { color: var(--g-ink-2) !important; }
.glass .k-macro { color: var(--g-up) !important; }
.glass .tm-ev.k-earn { border-left-color: var(--g-warn) !important; }
.glass .tm-ev.k-ipo { border-left-color: #6b4fc0 !important; }
.glass .tm-ticker .ticker { background: var(--g-card-lo); color: var(--g-ink-2); }
.glass .sidebar { background: var(--g-card-lo); color: var(--g-ink-2); }
.glass .topbar { background: var(--g-card-lo); color: var(--g-ink-2); }
.glass .tm-news > summary { background: var(--g-card-lo); color: var(--g-ink-2); }
.glass .tm-news-panel { background: var(--g-card-lo); color: var(--g-ink-2); }
.glass .tc-pill.ok { color: var(--g-ok); }
.glass .tc-pill.bad { color: var(--g-up); }
.glass .tc-pic.p-up { color: var(--g-up) !important; }
.glass .tc-pic.p-dn { color: var(--g-dn) !important; }
.glass .wc { background: var(--g-card-lo); color: var(--g-ink-2); }

/* --- 4. components ---------------------------------------------------------------------------------------------------- */
/* surfaces: one card rule for every block (panel, card, kpi, tiles ...) */
.glass .panel, .glass .card, .glass .kpi, .glass .idx-tile, .glass .forest .fcard, .glass .wcard, .glass .report, .glass .tsheet,
.glass .tm-ov, .glass .gkcard, .glass .av-card, .glass .tc-card, .glass .fu-card, .glass .mn-sec, .glass .lab {
  background: var(--g-card); border: 1px solid var(--g-edge); border-radius: var(--g-r-card); box-shadow: var(--g-shadow-card); color: var(--g-ink-2); }
.glass .panel { padding: var(--g-s5) 22px; }
.glass a.card:hover, .glass .wcard:hover, .glass a.idx-tile:hover { background: rgba(255, 255, 255, .7); border-color: #fff; box-shadow: var(--g-shadow-lift); }
.glass a.card, .glass .wcard, .glass a.idx-tile { transition: background var(--g-t) var(--g-ease), box-shadow var(--g-t) var(--g-ease), transform var(--g-t) var(--g-ease); }
.glass a.card:hover, .glass .wcard:hover { transform: translateY(-2px); }
/* a block inside a card */
.glass .ob-stat, .glass .r-kpi, .glass .report .r-text, .glass .av-points, .glass .av-person, .glass .lab-steps div, .glass .tc-last,
.glass .note, .glass .seedline { background: var(--g-card-lo); border-color: var(--g-edge-lo); border-radius: var(--g-r-inner); }
/* the emphasis card (one per view at most): teal glass, white type */
.g-accent { background: var(--g-teal-grad) !important; border-color: rgba(255, 255, 255, .35) !important; color: #e9f6f3 !important;
  box-shadow: 0 14px 34px rgba(22, 106, 95, .30), inset 0 1px 0 rgba(255, 255, 255, .3) !important; }
.g-accent h2, .g-accent strong, .g-accent b, .g-accent .k, .g-accent .muted, .g-accent dt, .g-accent dd { color: #fff !important; }
.g-accent .muted, .g-accent .k, .g-accent dt { opacity: .82; }
.g-accent small, .g-accent .g-unit { color: rgba(255, 255, 255, .82) !important; }

.glass .kpis .k, .glass .kpi .k, .glass .idx-tile .k { color: var(--g-ink-4); }
.glass .kpis strong, .glass .kpi strong, .glass .idx-tile strong { color: var(--g-ink); }
.glass .card-foot { border-top-color: var(--g-line); }
.glass dl.kv dt { color: var(--g-ink-4); } .glass dl.kv dd { color: var(--g-ink-2); }

/* buttons: white glass pill (default), ink pill (primary), outline (ghost); danger / warn tinted */
.glass .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--btn); color: var(--g-ink);
  border: 1px solid var(--btn-line); border-radius: var(--g-r-pill); padding: 7px 16px; font-weight: 600; box-shadow: 0 2px 8px rgba(48, 30, 16, .06);
  transition: background var(--g-t-fast) var(--g-ease), color var(--g-t-fast) var(--g-ease), border-color var(--g-t-fast) var(--g-ease), box-shadow var(--g-t-fast); }
.glass .btn:hover { background: #fff; color: var(--g-ink); border-color: #fff; box-shadow: 0 6px 16px rgba(48, 30, 16, .12); }
.glass .btn:focus-visible { outline: 2px solid var(--g-teal); outline-offset: 2px; }
.glass .btn.small { padding: 4px 12px; font-size: 12px; }
.glass .btn.ghost { background: transparent; border-color: var(--g-line-2); box-shadow: none; color: var(--g-ink-2); }
.glass .btn.ghost:hover { background: rgba(255, 255, 255, .55); border-color: var(--g-edge); }
.glass .btn.primary, .glass .btn.lab-btn-primary { background: var(--g-ink); border-color: var(--g-ink); color: #fff; box-shadow: 0 6px 16px rgba(31, 27, 23, .22); }
.glass .btn.primary:hover, .glass .btn.lab-btn-primary:hover { background: #000; border-color: #000; color: #fff; }
.glass .btn.danger { background: var(--g-err-soft); border-color: rgba(201, 58, 64, .32); color: var(--g-err); }
.glass .btn.danger:hover { background: var(--g-err); color: #fff; border-color: var(--g-err); }
.glass .btn.warn { background: var(--g-warn-soft); border-color: rgba(168, 105, 15, .35); color: var(--g-warn); }
.glass .btn.live-btn { background: var(--g-teal-soft); border-color: var(--g-teal-line); color: var(--g-teal-2); }
.glass .btn[disabled], .glass .btn.disabled, .glass button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.glass .btn.lab-btn-gold { background: transparent; color: var(--g-teal-2); border-color: var(--g-teal-line); }

/* fields */
.glass input, .glass select, .glass textarea { background: var(--g-card-hi); color: var(--g-ink); border: 1px solid var(--g-line-2); border-radius: var(--g-r-ctl);
  transition: border-color var(--g-t-fast), box-shadow var(--g-t-fast); }
.glass input[type=checkbox], .glass input[type=radio] { accent-color: var(--g-teal); }
.glass input::placeholder, .glass textarea::placeholder { color: var(--g-ink-4); }
.glass input:focus, .glass select:focus, .glass textarea:focus { outline: none; border-color: var(--g-teal); box-shadow: 0 0 0 3px rgba(29, 138, 123, .18); }
.glass input:disabled, .glass select:disabled, .glass textarea:disabled { opacity: .55; cursor: not-allowed; }
.glass select option { background: var(--g-solid); color: var(--g-ink); }
.glass input[aria-invalid=true], .glass .field-error input { border-color: var(--g-err); box-shadow: 0 0 0 3px var(--g-err-soft); }

/* segmented switches: tabs, the market switch, the KR/US map parts - a glass track, the chosen one an ink pill */
.glass .tabs, .glass .mkt-btns, .glass .hm-part, .glass .gk-switch { display: inline-flex; flex-wrap: nowrap; gap: 2px; padding: 4px; max-width: 100%; overflow-x: auto;
  scrollbar-width: none; background: var(--g-card-lo); border: 1px solid var(--g-edge); border-radius: var(--g-r-pill); box-shadow: inset 0 1px 2px rgba(72, 52, 34, .06); }
.glass .tabs { display: flex; width: fit-content; margin: 4px 0 var(--g-s5); }
.glass .tabs::-webkit-scrollbar, .glass .mkt-btns::-webkit-scrollbar { display: none; }
.glass .tabs a, .glass .mkt-btns .btn, .glass .hm-part a, .glass .gk-switch a, .glass .gk-switch button { flex: none; padding: 7px 15px; margin: 0; border: 0; border-radius: var(--g-r-pill);
  background: transparent; color: var(--g-ink-3); font-weight: 600; font-size: 13px; white-space: nowrap; box-shadow: none; }
.glass .tabs a:hover, .glass .mkt-btns .btn:hover, .glass .hm-part a:hover { color: var(--g-ink); background: rgba(255, 255, 255, .55); }
.glass .tabs a.on, .glass .mkt-btns .btn.primary, .glass .hm-part a.on, .glass .gk-switch .on { background: var(--g-ink); color: #fff; box-shadow: 0 4px 12px rgba(31, 27, 23, .2); }
.glass .tabs a.on .count, .glass .mkt-btns .btn.primary .count { background: rgba(255, 255, 255, .2); color: #fff; }

/* badges, pills, chips, counts */
.glass .chip { background: var(--g-card-hi); border: 1px solid var(--g-edge); color: var(--g-ink-2); border-radius: 8px; }
.glass .count { background: rgba(72, 52, 34, .08); color: var(--g-ink-3); border-radius: var(--g-r-pill); }
.glass .badge.live { background: var(--g-up-soft); color: var(--g-up); border: 1px solid rgba(210, 52, 70, .3); }
.glass .badge.paper { background: var(--g-dn-soft); color: var(--g-dn); border: 1px solid rgba(42, 98, 207, .3); }
.glass .pill.amber { background: var(--g-warn-soft); color: var(--g-warn); border-color: rgba(168, 105, 15, .3); }
.glass .dot.ok { background: var(--g-ok); box-shadow: 0 0 0 3px rgba(27, 143, 99, .18); }
.glass .dot.bad { background: var(--g-err); box-shadow: 0 0 0 3px rgba(201, 58, 64, .16); }
.glass .dot.idle { background: #d99a2b; }

/* tables: quiet header, hairlines, a soft hover; the panel scrolls a wide table sideways */
.glass .tbl th { color: var(--g-ink-4); background: transparent; border-bottom: 1px solid var(--g-line-2); font-weight: 600; }
.glass .tbl td { border-bottom: 1px solid var(--g-line); color: var(--g-ink-2); }
.glass .tbl tr:hover td { background: rgba(255, 255, 255, .42); }
.glass .tbl tbody tr:nth-child(even) td { background: transparent; }

/* modal, toast, notices, empty / error / loading */
.glass .modal-back { background: rgba(48, 32, 20, .30); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.glass .modal-box { background: var(--g-solid); border: 1px solid #fff; border-radius: 24px; box-shadow: var(--g-shadow-pop); color: var(--g-ink-2); }
.glass .toast { background: var(--g-solid); border: 1px solid var(--g-edge); color: var(--g-ink); border-radius: 14px; box-shadow: var(--g-shadow-pop); }
.glass .notice { background: var(--g-teal-soft); border: 1px solid var(--g-teal-line); color: var(--g-ink-2); border-radius: var(--g-r-inner); }
.glass .error, .glass .warn { color: var(--g-err); }
.glass p.error, .glass div.error { background: var(--g-err-soft); border: 1px solid rgba(201, 58, 64, .25); border-radius: var(--g-r-inner); padding: 8px 12px; }
.glass .empty { color: var(--g-ink-4); font-style: normal; }
.glass div.empty, .glass p.empty.box { padding: var(--g-s5); text-align: center; border: 1px dashed var(--g-line-2); border-radius: var(--g-r-inner); background: var(--g-card-lo); }
.glass .loading, .glass [aria-busy=true] { position: relative; color: var(--g-ink-4); }
.glass .loading::after { content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 8px; vertical-align: -1px; border-radius: 50%;
  border: 2px solid var(--g-teal-line); border-top-color: var(--g-teal); animation: g-spin .8s linear infinite; }
@keyframes g-spin { to { transform: rotate(360deg); } }
.glass details summary { color: var(--g-ink-2); }
.glass pre.log, .glass pre.md { background: rgba(255, 255, 255, .55); color: var(--g-ink-2); border: 1px solid var(--g-edge); border-radius: var(--g-r-inner); }
.glass code { background: rgba(72, 52, 34, .07); color: var(--g-ink); border-radius: 5px; padding: 0 4px; }
.glass .bar { background: rgba(72, 52, 34, .1); border-radius: 99px; } .glass .bar .fill { background: var(--g-coral); border-radius: 99px; }

/* the Overview map (D304: big summary · 2x2 cards · bars, then lists) */
.g-ov-top { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--g-s4); margin-bottom: var(--g-s4); }
.g-ov-mid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.15fr); gap: var(--g-s4); margin-bottom: var(--g-s4); align-items: start; }
.g-quad { display: grid; grid-template-columns: 1fr 1fr; gap: var(--g-s3); }
.g-stat { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; min-height: 112px; padding: 14px 16px; border-radius: 18px;
  background: var(--g-card); border: 1px solid var(--g-edge); box-shadow: var(--g-shadow-card); }
.g-stat .k { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--g-ink-3); font-size: 12.5px; font-weight: 600; }
.g-stat strong { font-size: var(--g-fs-num); font-weight: 700; letter-spacing: -.03em; color: var(--g-ink); line-height: 1.1; overflow-wrap: anywhere; }
.g-stat small { color: var(--g-ink-4); font-size: 12px; }
.g-stat .k .dot, .glass h2 .dot { vertical-align: middle; margin: 0 6px 2px 0; }
.g-tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: var(--g-r-pill); font-size: 11.5px; font-weight: 650;
  background: rgba(72, 52, 34, .07); color: var(--g-ink-3); }
.g-tag.ok { background: rgba(27, 143, 99, .12); color: var(--g-ok); } .g-tag.bad { background: var(--g-err-soft); color: var(--g-err); }
.g-accent .g-tag { background: rgba(255, 255, 255, .2); color: #fff; }
.g-big { font-size: 34px; font-weight: 750; letter-spacing: -.04em; color: var(--g-ink); line-height: 1.05; margin: 6px 0 4px; }
.g-chart { display: block; width: 100%; height: auto; }
.g-chart text { fill: var(--g-ink-4); font-size: 10px; font-family: var(--sans); }
.g-chart .gl { stroke: var(--g-line); }
.g-chart .c1 { fill: var(--g-c1); } .g-chart .c2 { fill: var(--g-c2); } .g-chart .c3 { fill: var(--g-c3); } .g-chart .c4 { fill: var(--g-c4); }
.g-actions { display: flex; gap: var(--g-s2); flex-wrap: wrap; margin-top: var(--g-s4); }
.g-unit { font-size: 14px; font-weight: 600; color: var(--g-ink-3); margin-left: 2px; }
.g-mini { margin-top: var(--g-s3); } .g-mini .g-stat { min-height: 0; padding: 10px 12px; background: var(--g-card-lo); box-shadow: none; }
.g-mini .g-stat strong { font-size: 17px; }
.g-scroll { overflow-x: auto; }
.g-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--g-ink-3); }
.g-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: -.5px; }
.g-legend .c1 i { background: var(--g-c1); } .g-legend .c2 i { background: var(--g-c2); } .g-legend .c3 i { background: var(--g-c3); }
.g-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: var(--g-s3); }
.g-head h2 { margin: 0; }
.g-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.g-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 12px; background: var(--g-card-lo); border: 1px solid var(--g-edge-lo); font-size: 13px; }
.g-list li span { color: var(--g-ink-3); } .g-list li b { color: var(--g-ink); font-weight: 650; text-align: right; overflow-wrap: anywhere; }

/* --- 5. pieces of older pages that drew on a dark page ---------------------------------------------------------------- */
/* things that float at the bottom sit above the dock */
.glass .toasts { bottom: 84px; }
.glass .tm-ticker { bottom: 80px; }
.glass .tm-ticker .ticker { background: var(--g-solid); border-color: var(--g-edge); box-shadow: var(--g-shadow-bar); color: var(--g-ink-2); }
.glass .hero h1 { border: 0; padding: 0; }
.glass .report, .glass .tsheet { border-top: 1px solid var(--g-edge); }
.glass .r-tbl th { background: var(--g-card-lo); color: var(--g-ink-3); }
.glass .report .r-no { background: var(--g-ink); color: #fff; }
.glass .tcard .thead { background: var(--g-card-lo); color: var(--g-ink); border-bottom-color: var(--g-line); }
.glass .tcard .thead a { color: var(--g-ink); }
.glass .lab-side { background: var(--g-card-lo); border-right-color: var(--g-line); }
.glass .lab-main { background: transparent; }
.glass .lab-bar, .glass .lab-composer { background: var(--g-card); border-color: var(--g-line); }
.glass .lab-composer textarea, .glass .lab-title:focus { background: var(--g-card-hi); }
.glass .lab-bubble { background: var(--g-card); border-color: var(--g-edge); color: var(--g-ink-2); }
.glass .lab-msg.me .lab-bubble { background: var(--g-teal-soft); border-color: var(--g-teal-line); color: var(--g-ink); }
.glass .lab-bubble.err { background: var(--g-err-soft); color: var(--g-err); border-color: rgba(201, 58, 64, .3); }
.glass .lab-room.on { background: rgba(255, 255, 255, .6); border-left-color: var(--g-teal); }
.glass .sig-tip { background: var(--g-solid); border-color: var(--g-edge); color: var(--g-ink); box-shadow: var(--g-shadow-pop); }
.glass .dropzone { background: var(--g-card-lo); border-color: var(--g-line-2); }
.glass .dropzone.over, .glass .dropzone:hover { border-color: var(--g-teal); background: var(--g-teal-soft); }
.glass .av-report p { color: var(--g-ink-2); } .glass .av-summary { background: var(--g-card-lo); color: var(--g-ink-2); }
.glass .av-tag { color: #fff; }
.glass .ob-tbl td.ob-p { background: rgba(255, 255, 255, .5); color: var(--g-ink); }
.glass .ob-tbl tr.ask .ob-bar rect { fill: rgba(42, 98, 207, .16); } .glass .ob-tbl tr.bid .ob-bar rect { fill: rgba(210, 52, 70, .16); }
.glass .fu-chart .base { stroke: rgba(72, 52, 34, .25); }

/* the stock chart (D303): price pane brighter than the indicator panes (the owner's request), all glass-toned */
.glass .wc { background: rgba(255, 255, 255, .7); border: 1px solid var(--g-edge); border-radius: var(--g-r-card); box-shadow: var(--g-shadow-card); }
.glass .wc-bar { background: rgba(255, 255, 255, .45); border-bottom: 1px solid var(--g-line); }
.glass .wc-sub { border-top: 1px solid var(--g-line-2); }
.glass .wc-pname { background: rgba(255, 255, 255, .85); color: var(--g-ink-2); border: 1px solid var(--g-line); }
.glass .wc-legend { color: var(--g-ink-3); } .glass .wc-legend b { color: var(--g-ink); } .glass .wc-legend .wc-t { color: var(--g-ink); }
.glass .wc-tip { background: rgba(255, 252, 248, .97); border-color: var(--g-teal-line); color: var(--g-ink); box-shadow: var(--g-shadow-pop); }

/* the sign-in pages (login, signup, S.F.): one glass card on the room */
.glass.login-body { background: transparent; min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.glass .login-card { background: rgba(251, 247, 242, .66); border: 1px solid var(--g-edge); border-top: 1px solid #fff; border-radius: 28px;
  box-shadow: var(--g-shadow-shell); color: var(--g-ink-2); padding: 34px;
  -webkit-backdrop-filter: blur(var(--g-blur-shell)) saturate(var(--g-sat)); backdrop-filter: blur(var(--g-blur-shell)) saturate(var(--g-sat)); }
.glass .login-brand strong { color: var(--g-ink); } .glass .login-brand span { color: var(--g-ink-4); }
.glass .login-brand .mark { background: var(--g-teal-grad); color: #fff; border-radius: 50%; box-shadow: 0 6px 16px rgba(29, 138, 123, .35); }
.glass .login-card label { color: var(--g-ink-3); }
.glass .login-card .btn.primary { width: 100%; padding: 11px 16px; }

.glass .hm-top h2 { display: block; }  /* the map title wrapped mid-word on phones (a flex h2 squeezed by its long note) */

/* --- 6. phones and narrow windows ------------------------------------------------------------------------------------- */
@media (max-width: 980px) {
  :root { --g-gap: 10px; --g-left: 10px; --g-r-shell: 24px; --g-r-card: 18px; --g-fs-h1: 25px; --g-fs-num: 22px; }
  body.shell.glass { padding-top: 8px; }
  .glass .topbar { top: 8px; height: 52px; margin: 0 var(--g-gap); gap: 10px; padding: 0 8px; border-radius: 18px; }
  .glass .brand-t, .glass .sb-user .u { display: none; }
  .glass .crumb { justify-content: flex-start; overflow: hidden; white-space: nowrap; }
  .glass .crumb > span, .glass .crumb > i { display: none; }
  .glass .g-clock { flex: none; height: 30px; padding: 0 10px; font-size: 11.5px; }
  .glass .topbar .who .clock { display: inline; }
  .glass .rail { position: static; flex-direction: row; justify-content: space-between; width: auto; margin: 10px var(--g-gap) 0; padding: 5px; border-radius: 18px; }
  .glass .rail .sb-head { width: auto; height: 38px; padding: 0 12px; border-radius: 13px; display: inline-flex; gap: 6px; align-items: center; }
  .glass .rail-t { position: static; opacity: 1; transform: none; padding: 0; border: 0; box-shadow: none; background: none; font-size: 12.5px; display: none; }
  .glass .rail .sb-head.on .rail-t { display: inline; }
  .glass .subnav { left: var(--g-gap); right: var(--g-gap); transform: none; bottom: 10px; max-width: none; justify-content: flex-start; }
  .glass .main.g-shell { margin: 10px var(--g-gap) 16px; padding: 22px 14px 30px; }
  .glass .main.g-shell.has-dock { padding-bottom: 84px; }
  .g-ov-top, .g-ov-mid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) { .glass .crumb, .glass .sb-user { display: none; } .glass .topbar .who { margin-left: auto; gap: 6px; } }

/* --- 7. less motion, and browsers without backdrop blur ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --g-shell: rgba(240, 233, 224, .9); --g-bar: rgba(250, 246, 241, .95); }
}