/* db.riskcare.ai.kr/trade — 판정 보드 셸
   ⭐ 양식은 trade-web(trade.riskcare.ai.kr) 종목 상세 펼침과 «같다»(2026-09-22 오너 지시).
      토큰·클래스 이름을 그대로 옮겼으므로 두 화면이 같은 서비스로 읽힌다.
      원본 = trade-web/index.html <style>. 여기서 클래스를 새로 만들지 마라 —
      이름이 갈리면 다음 사람이 어느 쪽을 정본으로 볼지 모른다.
   ⚠️ 안 옮긴 것: topbar 탭·리스트 행(.row/.exp 토글) — 이 보드는 목록이 아니라
      한 회사 한 장이라 펼침 컨테이너(.exp-in)만 있으면 된다. */
:root{
  --bg:#F2F3F5; --bg-outer:#E5E8EB; --card:#fff; --line:#E5E8EB;
  --t1:#15181D; --t2:#4E5968; --t3:#8B95A1; --t4:#C4CDD6;
  --hd:#15181D; --hd-sub:#9AA3B0; --hd-mut:#6F7A89;
  --rule:#DFE3E8; --rule-in:#EEF1F4;
  --blue:#3182F6; --blue-d:#1B64DA; --blue-bg:#EAF3FF;
  --g-t:#15A05A; --g-bg:#E7F9F0;
  --y-t:#C77700; --y-bg:#FFF6E5;
  --up:#F04452; --up-bg:#FEECEE; --down:#3182F6;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ background:var(--bg); }
body{ font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
      color:var(--t1); -webkit-font-smoothing:antialiased; letter-spacing:-0.01em; padding-bottom:56px; }
a{ color:var(--blue); text-decoration:none; }
a:hover{ color:var(--blue-d); text-decoration:underline; }
::-webkit-scrollbar{ height:8px; width:8px; }
::-webkit-scrollbar-thumb{ background:#C9CED6; border-radius:8px; }
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.topbar{ background:var(--hd); color:#fff; }
.topbar .in{ max-width:1440px; margin:0 auto; padding:11px 14px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.topbar .t{ font-size:15px; font-weight:800; letter-spacing:-0.02em; }
.topbar .s{ font-size:12px; color:var(--hd-sub); font-weight:500; }
.topbar a.back{ margin-left:auto; font-size:12px; color:var(--hd-sub); font-weight:600; }
.topbar a.back:hover{ color:#fff; text-decoration:none; }
.exp{ background:#F7F9FC; border-top:1px dashed #DDE3EA; padding:18px 16px 28px; }
.exp-in{ max-width:620px; margin:0 auto; }
.badge{ display:inline-block; padding:2px 9px; border-radius:20px; font-size:.73rem; font-weight:700; }
.b-verified{ background:var(--g-bg); color:var(--g-t); }
.b-partial{ background:var(--blue-bg); color:var(--blue-d); }
.b-review{ background:var(--y-bg); color:var(--y-t); }
.b-no{ background:var(--bg); color:var(--t3); }
.up{ color:var(--up); font-weight:700; } .down{ color:var(--down); font-weight:700; } .flat{ color:var(--t3); }
a.dart{ color:var(--blue); font-size:.82rem; font-weight:600; }
.d-name{ font-size:1.15rem; font-weight:800; letter-spacing:-0.02em; }
.d-meta{ color:var(--t3); font-size:.82rem; margin-top:4px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-weight:600; }
.d-sec{ margin-top:16px; }
.d-sec h4{ font-size:.76rem; color:var(--blue); letter-spacing:.01em; margin-bottom:6px; font-weight:700; }
.d-row{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:8px 2px; border-bottom:1px solid var(--rule-in); font-size:.9rem; }
.d-row:last-child{ border-bottom:none; }
.d-row .k{ color:var(--t3); font-weight:600; } .d-row .v{ font-weight:700; text-align:right; }
.d-cust{ font-size:.9rem; line-height:1.7; color:var(--t2); }
.d-fit{ margin:2px 0 8px; }
.fit-b{ display:inline-block; font-size:.8rem; font-weight:700; padding:4px 11px; border-radius:999px; }
.fit-why{ font-size:.78rem; color:var(--t2); line-height:1.5; margin:4px 0 2px; }
.fit-fine{ font-size:.68rem; color:var(--t3); opacity:.85; line-height:1.5; }
.d-rel{ font-size:.78rem; color:var(--t2); margin:0 0 6px; line-height:1.5; } .d-rel b{ color:var(--t1); }
.d-tbl{ width:100%; border-collapse:collapse; margin:4px 0 8px; font-size:.9rem; }
.d-tbl th{ background:transparent; text-align:right; color:var(--t3); font-weight:600; font-size:.76rem; padding:4px 6px; border-bottom:1px solid var(--line); }
.d-tbl td{ text-align:right; padding:8px 6px; border-bottom:1px solid var(--rule-in); font-variant-numeric:tabular-nums; color:var(--t1); }
.d-tbl tbody tr:last-child td{ border-bottom:none; }
/* 행 라벨 옆 작은 부연 — trade-web 이 인라인으로 쓰던 것을 클래스로(양식 동일, 중복 제거) */
.d-tbl td.rk .sub{ color:var(--t3); font-weight:500; font-size:.72rem; }
.d-tbl td.rk{ text-align:left; color:var(--t2); font-weight:700; } .d-tbl td.q1{ font-weight:800; }
.d-tbl tr.tot td{ border-top:1px solid var(--rule); font-weight:800; }
.d-tbl .hs{ font-family:var(--mono); font-size:.68rem; color:var(--blue-d); background:var(--blue-bg); border-radius:4px; padding:1px 5px; }
.d-tbl td.dim, .d-row.dim .v{ color:var(--t3); font-weight:600; }
.rep-quarantine{ padding:14px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--t2); font-size:.82rem; line-height:1.6; }
.lead-b{ margin:8px 0 2px; padding:10px 12px; border-radius:9px; display:flex; align-items:flex-start; gap:8px; flex-wrap:wrap;
         background:rgba(28,127,90,.08); border:1px solid rgba(28,127,90,.25); font-size:.86rem; color:var(--t1); line-height:1.6; }
.lead-b.warn{ background:var(--y-bg); border-color:rgba(199,119,0,.28); }
.lead-b b{ font-weight:800; }
.lead-b .why{ font-size:.76rem; color:var(--t2); flex:1 1 100%; line-height:1.7; }
.rgn-add{ border-top:2px dashed #E5E8EE; padding-top:12px; margin-top:16px; }
.rgn-add h4{ color:var(--t1); }
.rgn-cells-note{ font-size:.72rem; color:var(--t3); line-height:1.55; margin:-2px 0 9px; }
.rgn-head{ font-size:.95rem; color:var(--t1); margin:2px 0 2px; } .rgn-head b{ font-size:1.05rem; }
.rgn-row{ display:flex; align-items:center; gap:8px; margin:3px 0; font-size:.82rem; }
.rgn-nm{ flex:0 0 132px; color:var(--t2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rgn-bar{ position:relative; flex:1; height:9px; background:rgba(120,140,170,.14); border-radius:5px; overflow:hidden; }
.rgn-bar i{ display:block; height:100%; background:rgba(49,130,246,.34); border-radius:5px; }
.rgn-bar i.own{ position:absolute; left:0; top:0; height:100%; background:linear-gradient(90deg,#f5883e,#f0774a); border-radius:5px; opacity:.92; }
.rgn-v{ flex:0 0 auto; color:var(--t1); font-variant-numeric:tabular-nums; font-weight:600; min-width:70px; text-align:right; }
.rgn-gcell{ flex:0 0 64px; text-align:right; }
.rgn-g{ font-size:.7rem; font-variant-numeric:tabular-nums; font-weight:700; }
.rgn-g.up{ color:var(--up); } .rgn-g.dn{ color:var(--down); }
.rgn-sub{ font-size:.72rem; color:var(--t2); margin:-1px 0 7px 140px; line-height:1.45; }
.rgn-sub b{ color:#c85a1e; font-variant-numeric:tabular-nums; }
.rgn-est-tag{ font-size:.62rem; background:rgba(240,119,74,.14); color:#c0501e; padding:1px 5px; border-radius:4px; margin-left:5px; white-space:nowrap; }
.rgn-est-tag.rgn-est-nosplit{ background:rgba(120,140,170,.16); color:var(--t3); }
.rgn-products{ display:flex; flex-wrap:wrap; gap:5px; margin:7px 0 9px; }
.rgn-product{ font-size:.68rem; color:var(--blue-d); background:var(--blue-bg); border-radius:999px; padding:3px 7px; }
.rgn-limit-details{ margin:3px 0 9px; color:var(--t3); font-size:.68rem; }
.rgn-limit-details > summary{ cursor:pointer; width:max-content; max-width:100%; color:var(--blue-d); font-weight:700; padding:2px 0; }
.rgn-limit-body{ margin-top:4px; padding:7px 9px; border-radius:7px; background:rgba(49,130,246,.06); line-height:1.6; }
.rgn-limit-body ul{ margin:4px 0 0 16px; padding:0; } .rgn-limit-body li{ margin:3px 0; }
.rgn-product-details{ margin:3px 0 9px 18px; }
.rgn-product-details > summary{ display:flex; align-items:center; gap:5px; width:max-content; max-width:100%; list-style:none; cursor:pointer; color:var(--blue-d); font-size:.69rem; font-weight:700; padding:3px 5px; border-radius:6px; user-select:none; }
.rgn-product-details > summary::-webkit-details-marker{ display:none; }
.rgn-product-details > summary::before{ content:"\25B8"; display:inline-block; transition:transform .15s ease; }
.rgn-product-details[open] > summary::before{ transform:rotate(90deg); }
.rgn-product-details > summary:hover{ background:var(--blue-bg); }
.rgn-toggle-action{ color:var(--t3); font-size:.65rem; font-weight:500; }
.rgn-toggle-open{ display:none; }
.rgn-product-details[open] .rgn-toggle-closed{ display:none; }
.rgn-product-details[open] .rgn-toggle-open{ display:inline; }
.rgn-product-grid{ margin:2px 0 0; padding-left:9px; border-left:2px solid rgba(49,130,246,.12); }
.rgn-product-row{ margin:5px 0 8px; }
.rgn-product-line{ display:flex; align-items:center; gap:7px; font-size:.73rem; }
.rgn-product-name{ flex:0 0 104px; color:var(--t2); font-weight:700; }
.rgn-product-line .rgn-bar{ height:8px; }
.rgn-product-share{ flex:0 0 66px; text-align:right; color:var(--t1); font-weight:800; font-variant-numeric:tabular-nums; }
.rgn-product-meta{ margin:2px 0 0 111px; color:var(--t3); font-size:.66rem; line-height:1.45; }
.rgn-product-meta b{ color:var(--t2); font-variant-numeric:tabular-nums; }
.lk{ display:block; color:inherit; }
.lk:hover{ text-decoration:none; }
.brd{ margin-top:6px; }
.brd .row{ display:flex; align-items:baseline; gap:10px; padding:11px 8px; border-bottom:1px solid var(--rule-in); font-size:.9rem; }
.brd .row:hover{ background:rgba(47,128,237,.05); }
.brd .tk{ font-family:var(--mono); font-size:.76rem; color:var(--t3); flex:0 0 52px; }
.brd .nm{ font-weight:700; flex:0 0 104px; }
.brd .d{ color:var(--t3); font-size:.78rem; }
.brd .v{ margin-left:auto; font-variant-numeric:tabular-nums; font-weight:700; }
@media (max-width:520px){
  .rgn-nm{ flex:0 0 96px; } .rgn-sub{ margin-left:104px; }
  .rgn-product-name{ flex:0 0 78px; } .rgn-product-meta{ margin-left:85px; }
}
/* 목록·범례·면책 — trade-web .legend / .discl 이식 */
.legend{ margin-top:14px; background:var(--card); border:1px solid var(--rule); border-radius:8px; padding:12px 14px;
  font-size:12px; line-height:1.75; color:#5D6675; }
.legend .h{ font-weight:800; color:var(--t1); margin-bottom:6px; }
.legend b{ color:var(--t1); }
.discl{ margin:18px auto 0; font-size:11px; color:#98A1AE; line-height:1.7; }
.cmp-row{ cursor:pointer; }
.cmp-row.sel td{ background:rgba(47,128,237,.10); }
.cmp-row:hover td{ background:rgba(47,128,237,.05); }
.rgn-cap{ font-size:.72rem; color:var(--t3); display:flex; gap:10px; align-items:center; margin:10px 0 3px; flex-wrap:wrap; }
.rgn-lg{ display:inline-flex; gap:5px; align-items:center; }
.rgn-lg i{ width:9px; height:9px; border-radius:2px; display:inline-block; }
.rgn-spark{ display:flex; width:100%; gap:1px; align-items:flex-end; height:48px; margin:2px 0 10px; }
.rgn-spark .sk-b{ flex:1 1 0; min-width:0; position:relative; display:flex; align-items:flex-end; height:100%; }
.rgn-spark .sk-b > i{ width:100%; border-radius:2px 2px 0 0; }
.rgn-spark i.pr, .rgn-lg i.pr{ background:rgba(120,140,170,.4); }
.rgn-spark i.rc, .rgn-lg i.rc{ background:var(--blue); opacity:.5; }
.rgn-spark i.sk-own{ position:absolute; left:0; bottom:0; width:100%;
  background:linear-gradient(180deg,#f5883e,#f0774a); border-radius:2px 2px 0 0; opacity:.95; }
.rgn-lg i.skown{ background:linear-gradient(180deg,#f5883e,#f0774a); }