/* ==========================================================================
   K-Finviz — 개별 종목 페이지 (Financials 모듈)
   ========================================================================== */

:root{
  --navy:        #0f1a2b;
  --navy-2:      #16233a;
  --accent:      #1d5fd6;
  --accent-dark: #1547a8;
  --accent-soft: #e8f0fe;
  --bg:          #f3f5f9;
  --surface:     #ffffff;
  --surface-2:   #eef1f5;
  --border:      #dfe4ec;
  --border-soft: #ebeef3;
  --text:        #16202e;
  --text-muted:  #5b6b81;
  --text-faint:  #93a1b4;
  --good:        #0f9d58;
  --good-soft:   #e6f6ec;
  --bad:         #d93025;
  --bad-soft:    #fdeceb;
  --row-alt:     #f8fafc;
  --forecast:      #7c5cd6;
  --forecast-soft: #efeafb;
  --shadow:      0 1px 2px rgba(15,26,43,.04), 0 6px 20px -10px rgba(15,26,43,.12);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"IBM Plex Sans KR","Noto Sans KR",-apple-system,"Segoe UI",sans-serif;
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
.mono{ font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums; }

/* ---------------- Top bar (site-level) ---------------- */
.topbar{
  background:var(--navy);
  color:#e7ecf5;
}
.topbar-inner{
  max-width:1180px; margin:0 auto; padding:0 20px;
  display:flex; align-items:center; gap:24px; height:52px;
}
.brand{
  display:flex; align-items:baseline; gap:3px;
  font-weight:700; font-size:17px; letter-spacing:-.01em; white-space:nowrap;
}
.brand .k{ color:#5b9bef; }
.brand .sub{ font-size:10.5px; font-weight:500; color:#8a9ab3; margin-left:6px; letter-spacing:.02em; }

.gnav{ display:flex; gap:2px; flex:1; overflow-x:auto; }
.gnav a{
  font-size:12.5px; font-weight:500; color:#c3ceE0; padding:8px 11px;
  border-radius:6px; white-space:nowrap; position:relative;
}
.gnav a[aria-disabled="true"]{ color:#5c6b84; cursor:default; }
.gnav a:not([aria-disabled="true"]):hover{ background:rgba(255,255,255,.08); color:#fff; }
.gnav a .soon{
  font-size:9px; margin-left:4px; background:rgba(255,255,255,.1); color:#93a1b4;
  padding:1px 4px; border-radius:4px; vertical-align:middle;
}

.gsearch{
  display:flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  border-radius:7px; padding:6px 10px; min-width:180px;
}
.gsearch input{
  background:transparent; border:0; outline:0; color:#fff; font-size:12.5px; width:100%;
}
.gsearch input::placeholder{ color:#7f8fac; }
.gsearch svg{ width:14px; height:14px; color:#8a9ab3; flex:none; }

/* ---------------- Ticker header ---------------- */
.tickerbar{ background:var(--navy-2); color:#e7ecf5; }
.tickerbar-inner{
  max-width:1180px; margin:0 auto; padding:16px 20px 14px;
  display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap;
}
.tb-id h1{
  margin:0; font-size:20px; font-weight:700; display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
}
.tb-id h1 .code{ font-size:13px; font-weight:600; color:#8fb3f2; font-family:"IBM Plex Mono",monospace; }
.tb-tags{ display:flex; gap:6px; margin-top:9px; flex-wrap:wrap; }
.tb-tags span{
  font-size:11px; font-weight:500; color:#c3ceE0; background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12); padding:3px 8px; border-radius:5px;
}

.tb-price{ text-align:right; }
.tb-price .amt{ font-family:"IBM Plex Mono",monospace; font-size:28px; font-weight:700; color:#fff; }
.tb-price .unit{ font-size:13px; font-weight:500; color:#9fb0c8; margin-left:3px; }
.tb-price .delta{
  margin-top:3px; font-family:"IBM Plex Mono",monospace; font-size:13.5px; font-weight:600;
  display:flex; align-items:center; justify-content:flex-end; gap:5px;
}
.tb-price .delta.up{ color:#4ade80; }
.tb-price .delta.down{ color:#f87171; }
.tb-price .asof{ margin-top:5px; font-size:11px; color:#7f8fac; }

/* ---------------- Primary tabs ---------------- */
.primary-tabs{
  background:var(--navy); border-top:1px solid rgba(255,255,255,.08);
}
.primary-tabs-inner{
  max-width:1180px; margin:0 auto; padding:0 20px; display:flex; gap:2px; overflow-x:auto;
}
.ptab{
  padding:11px 16px; font-size:13px; font-weight:600; color:#8a9ab3;
  border-bottom:2px solid transparent; white-space:nowrap; position:relative;
}
.ptab[aria-current="page"]{ color:#fff; border-bottom-color:var(--accent); background:rgba(29,95,214,.12); }
.ptab[aria-disabled="true"]{ cursor:default; }
.ptab .soon{
  font-size:9px; margin-left:5px; background:rgba(255,255,255,.08); color:#93a1b4;
  padding:1px 5px; border-radius:4px; vertical-align:1px;
}

/* ---------------- Page shell ---------------- */
.page{ max-width:1180px; margin:0 auto; padding:22px 20px 60px; display:flex; flex-direction:column; gap:20px; }

/* ---------------- KPI snapshot ---------------- */
.kpi-strip{
  display:grid; grid-template-columns:repeat(8,1fr); gap:1px;
  background:var(--border); border:1px solid var(--border); border-radius:10px; overflow:hidden;
  box-shadow:var(--shadow);
}
.kpi-cell{ background:var(--surface); padding:11px 13px; display:flex; flex-direction:column; gap:4px; }
.kpi-cell .k{ font-size:10.5px; color:var(--text-muted); letter-spacing:.01em; }
.kpi-cell .v{ font-family:"IBM Plex Mono",monospace; font-size:15px; font-weight:700; }
.kpi-cell .v.good{ color:var(--good); }
.kpi-cell .v.bad{ color:var(--bad); }

/* ---------------- Section card ---------------- */
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  box-shadow:var(--shadow); overflow:hidden;
}
.card-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:16px 18px 0;
}
.card-head h2{ margin:0; font-size:16px; font-weight:700; }
.card-head .note{ font-size:11.5px; color:var(--text-faint); }

/* Financials sub-tabs */
.subtabs{ display:flex; gap:4px; padding:14px 18px 0; border-bottom:1px solid var(--border-soft); flex-wrap:wrap; }
.stab{
  font-size:12.5px; font-weight:600; color:var(--text-muted); padding:8px 14px;
  border-radius:8px 8px 0 0; border:1px solid transparent; border-bottom:none; margin-bottom:-1px;
}
.stab[aria-selected="true"]{
  color:var(--accent-dark); background:var(--accent-soft); border-color:var(--border-soft);
}

.panel{ padding:18px; }
.panel[hidden]{ display:none; }

/* ---------------- Data table ---------------- */
.tbl-scroll{ overflow-x:auto; }
table.fin{
  width:100%; border-collapse:collapse; min-width:560px;
}
table.fin caption{ text-align:left; font-size:11.5px; color:var(--text-faint); padding-bottom:8px; }
table.fin thead th{
  text-align:right; font-size:11.5px; font-weight:600; color:var(--text-muted);
  padding:8px 12px; border-bottom:1.5px solid var(--border); white-space:nowrap;
}
table.fin thead th:first-child{ text-align:left; color:var(--text); }
table.fin tbody td{
  padding:8px 12px; border-bottom:1px solid var(--border-soft); text-align:right;
  font-family:"IBM Plex Mono",monospace; font-size:12.5px; white-space:nowrap;
}
table.fin tbody td:first-child{
  text-align:left; font-family:"IBM Plex Sans KR","Noto Sans KR",sans-serif; font-size:13px; color:var(--text);
}
table.fin tbody tr:nth-child(even){ background:var(--row-alt); }
table.fin tbody tr.total td{ font-weight:700; border-top:1.5px solid var(--border); border-bottom:1.5px solid var(--border); }
table.fin tbody tr.total td:first-child{ font-weight:700; }
table.fin tbody tr.sub td:first-child{ padding-left:24px; color:var(--text-muted); font-weight:400; }
table.fin tbody tr.ratio td:first-child{ color:var(--text-muted); }
table.fin tbody tr.spacer td{ padding:4px 0; border:none; background:transparent; }

.yoy{ font-size:10.5px; font-weight:600; margin-left:6px; }
.yoy.up{ color:var(--good); }
.yoy.down{ color:var(--bad); }
.yoy.flat{ color:var(--text-faint); }

.val.good{ color:var(--good); }
.val.bad{ color:var(--bad); }

.foot-note{
  padding:12px 18px 16px; font-size:11.5px; color:var(--text-faint); border-top:1px solid var(--border-soft);
}
.foot-note b{ color:var(--text-muted); }

/* ==========================================================================
   실적 스냅샷 (Performance Snapshot) — line-chart earnings overview
   ========================================================================== */

/* next-report strip */
.next-report{
  display:flex; flex-wrap:wrap; gap:24px; padding:14px 4px 18px;
  border-bottom:1px solid var(--border-soft); margin-bottom:16px;
}
.next-report .nr-item{ display:flex; flex-direction:column; gap:3px; }
.next-report .nr-item .k{ font-size:11px; color:var(--text-faint); }
.next-report .nr-item .v{ font-family:"IBM Plex Mono",monospace; font-size:15px; font-weight:700; }
.next-report .nr-item .v.forecast{ color:var(--forecast); }

/* metric + timeframe controls */
.perf-controls{
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  margin-bottom:14px;
}
.seg-group{ display:inline-flex; background:var(--surface-2); border-radius:9px; padding:3px; gap:2px; }
.seg-btn{
  font-size:12.5px; font-weight:600; color:var(--text-muted); padding:6px 13px;
  border-radius:7px; border:none; background:transparent; cursor:pointer; font-family:inherit;
}
.seg-btn[aria-pressed="true"]{ background:var(--surface); color:var(--accent-dark); box-shadow:var(--shadow); }
.seg-btn:hover:not([aria-pressed="true"]){ color:var(--text); }

/* chart */
.perf-chart-wrap{ position:relative; overflow-x:auto; overflow-y:visible; }
.perf-chart-wrap svg{ width:100%; height:auto; display:block; overflow:visible; }
.perf-gridline{ stroke:var(--border-soft); stroke-width:1; }
.perf-axis-label{ font-family:"IBM Plex Mono",monospace; font-size:10.5px; fill:var(--text-faint); }
.perf-seg{ fill:none; stroke-width:2.75; stroke-linecap:round; filter:drop-shadow(0 1px 1px rgba(15,26,43,.10)); }
.perf-seg.up{ stroke:var(--good); }
.perf-seg.down{ stroke:var(--bad); }
.perf-seg.flat{ stroke:var(--text-faint); }
.perf-seg.consensus{ stroke-dasharray:6 5; }
.perf-area{ opacity:1; }
.perf-dot{ stroke:var(--surface); stroke-width:2; cursor:pointer; transition:r .1s ease; }
.perf-dot.up{ fill:var(--good); }
.perf-dot.down{ fill:var(--bad); }
.perf-dot.flat{ fill:var(--text-faint); }
.perf-dot.consensus{ fill:var(--surface); stroke:var(--forecast); stroke-width:2.5; }
.perf-dot.active{ r:6.5; stroke-width:2.5; }
.perf-crosshair{ stroke:var(--text-faint); stroke-width:1; stroke-dasharray:3 3; pointer-events:none; transition:opacity .08s ease; }
.perf-lastline{ stroke:var(--text-faint); stroke-width:1; stroke-dasharray:2 3; opacity:.7; }
.perf-lastline-bg{ fill:var(--surface-2); }
.perf-lastline-label{ font-family:"IBM Plex Mono",monospace; font-size:10.5px; font-weight:700; fill:var(--text); }
.perf-badge{
  font-family:"IBM Plex Mono",monospace; font-size:10.5px; font-weight:700;
  text-anchor:middle;
}
.perf-badge.up{ fill:var(--good); }
.perf-badge.down{ fill:var(--bad); }
.perf-badge-bg{ fill:var(--surface); opacity:.92; }
.perf-xlabel{ font-family:"IBM Plex Mono",monospace; font-size:10.5px; fill:var(--text-muted); text-anchor:middle; }
.perf-xlabel.consensus{ fill:var(--forecast); font-weight:600; }
.perf-divider{ stroke:var(--border); stroke-width:1; stroke-dasharray:2 3; }

.perf-legend{ display:flex; gap:18px; margin-top:10px; padding:0 4px; flex-wrap:wrap; }
.perf-legend .li{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-muted); }
.perf-legend .sw{ width:16px; height:2.5px; border-radius:2px; flex:none; }
.perf-legend .sw.actual{ background:var(--accent); }
.perf-legend .sw.consensus{ background:none; border-top:2.5px dashed var(--forecast); height:0; }

/* hover tooltip */
.perf-tooltip{
  position:absolute; pointer-events:none; z-index:5;
  background:var(--navy); color:#fff; border-radius:8px; padding:8px 11px;
  font-size:11.5px; line-height:1.5; box-shadow:var(--shadow); opacity:0; transition:opacity .1s ease;
  white-space:nowrap; transform:translate(-50%,-100%);
}
.perf-tooltip.show{ opacity:1; }
.perf-tooltip .tt-period{ font-weight:700; margin-bottom:2px; }
.perf-tooltip .tt-row{ display:flex; justify-content:space-between; gap:14px; font-family:"IBM Plex Mono",monospace; }
.perf-tooltip .tt-tag{
  display:inline-block; font-size:9.5px; font-weight:700; padding:1px 5px; border-radius:4px; margin-left:6px;
}
.perf-tooltip .tt-tag.consensus{ background:var(--forecast); color:#fff; }

/* detail table disclosure */
.perf-detail-toggle{
  display:inline-flex; align-items:center; gap:5px; margin-top:16px;
  font-size:12.5px; font-weight:600; color:var(--accent-dark); background:none; border:none; cursor:pointer;
  padding:6px 0; font-family:inherit;
}
.perf-detail-toggle svg{ width:13px; height:13px; transition:transform .15s ease; }
.perf-detail-toggle[aria-expanded="true"] svg{ transform:rotate(180deg); }
.perf-detail{ margin-top:10px; }
.perf-detail[hidden]{ display:none; }
.perf-detail td.consensus-col, .perf-detail th.consensus-col{ color:var(--forecast); }

/* ---------------- Site footer ---------------- */
footer.site{
  max-width:1180px; margin:0 auto; padding:10px 20px 40px;
  font-size:11.5px; color:var(--text-faint); display:flex; flex-direction:column; gap:5px;
}
footer.site a{ color:var(--text-muted); }

@media (max-width:860px){
  .kpi-strip{ grid-template-columns:repeat(4,1fr); }
  .tb-price{ text-align:left; }
  .tickerbar-inner{ flex-direction:column; }
}
@media (max-width:520px){
  .kpi-strip{ grid-template-columns:repeat(2,1fr); }
  .gnav{ display:none; }
}