/* Hallmark · v2.0.0 · redesign: full (app screen; 종목 상세 10/27-28, 결과·가치·브리핑 10/28) · shape: app screen · system: DESIGN.md (locked, 토스) · genre: modern-minimal · signature: 화면 탭 — 한 화면의 묶음을 하나씩(상세 탭, 통과|대기, 종목별 브리핑), 판단은 그 위에 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V3 · weakest: V, 시스템이 잠겨 있어 배치만 바뀐다 */
/* Hallmark · dropped #wr-h · 장 마감 시황 카드를 결과 화면 시장 카드에 합쳐 제목 하나(#mk-h)가 둘을 부른다. 스크립트가 찾던 id 가 아니다 */
/* K eyes — 증권 앱 표준(토스증권 수준)
 *
 * 회색 바탕 위 흰 카드, 선 대신 여백, 굵은 숫자. 층은 그림자가 아니라 바탕색 차이로.
 * 색 결정 근거:
 *  - 한국 시장 관례에 따라 상승=빨강, 하락=파랑. 둘 다 의미색이라 브랜드·버튼 색으로
 *    쓰지 않는다(토스의 파랑 버튼을 따라 하면 '하락'으로 읽힌다). 주요 버튼은 짙은 회색.
 *  - 빨강이 '상승'에 묶여 있어서 경고(지뢰·실험 모드·추격)는 앰버.
 *  - 이동평균은 청록 단색 램프(짧을수록 옅게). 빨강·파랑·앰버와 겹치지 않는다.
 *  - 본문·숫자 색은 라이트·다크 모두 바탕·카드·칩 위에서 4.5:1 이상(계산으로 확인).
 */

:root {
  color-scheme: light;

  --page:      #f2f4f6;      /* 바탕 */
  --panel:     #ffffff;      /* 카드 */
  --panel-2:   #f9fafb;      /* 입력·눌린 줄 */
  --chip:      #f2f4f6;      /* 칩·트랙 */
  --ink:       #191f28;
  --ink-2:     #4e5968;
  --ink-3:     #626c79;      /* 바탕 위에서도 4.8:1 */
  --rule:      #e5e8eb;
  --rule-soft: #f2f4f6;

  --accent:    #191f28;      /* 주요 버튼·선택 = 잉크 */
  --accent-on: #ffffff;

  --up:        #d92030;      /* 상승 */
  --down:      #1b64da;      /* 하락 */

  --warn:      #a35400;
  --warn-bg:   #fff3e0;
  --warn-rule: #ffd59a;

  --ma50:      #6fbfb2;
  --ma150:     #2a9184;
  --ma200:     #0f625c;

  --viz-on:    #191f28;
  --viz-off:   #d1d6db;
  --viz-cut:   #9aa3ac;
  --signal-on: #ffffff;      /* 상승·하락 색 위의 글자(차트 매매 표시). 다크에서도 흰색 */

  --t-xs: 13px;
  --t-sm: 14px;
  --t-base: 16px;
  --t-md: 18px;
  --t-lg: 24px;
  --t-xl: 30px;

  /* 글꼴. 한 벌(Pretendard)을 굵기와 크기로만 쓴다. */
  --font-body: Pretendard, "Pretendard Variable", -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  --font-display: var(--font-body);
  --font-num: var(--font-body);

  --gutter: 16px;
  --gap: 12px;               /* 카드 사이 */
  --pad: 20px;               /* 카드 안 */
  --radius: 12px;            /* 버튼·입력 */
  --radius-card: 16px;
  --tabbar-h: 60px;

  /* 매출구성 조각. 고정 순서 -- 순위가 아니라 자리에 색이 붙는다.
     빨강·파랑·앰버는 상승·하락·경고에 묶여 있어 쓰지 않는다(아이폰 50% 가 '하락'
     파랑으로 칠해지던 것). 밝기를 엇갈려 색약에서도 이웃 조각이 갈리게 했고,
     범례에 이름·비중을 항상 같이 적는다. */
  --seg-0: #3d4a5c; --seg-1: #2a9184; --seg-2: #7b61d1;
  --seg-3: #b0b8c1; --seg-4: #6f8a1f; --seg-5: #a8508a;
  --seg-6: #c3b0ef; --seg-7: #5fc0b2;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --seg-0: #d1d6db; --seg-1: #4fb3a3; --seg-2: #9d88f0;
    --seg-3: #6b7480; --seg-4: #9bb53f; --seg-5: #d07ab0;
    --seg-6: #c7b6f5; --seg-7: #2f8a7e;
    --page:      #17171c;
    --panel:     #212126;
    --panel-2:   #2a2a30;
    --chip:      #2f2f36;
    --ink:       #eceef1;
    --ink-2:     #b0b8c1;
    --ink-3:     #8f99a6;
    --rule:      #38383f;
    --rule-soft: #2a2a30;
    --accent:    #eceef1;
    --accent-on: #212126;
    --up:        #ff6b6b;
    --down:      #5ea0ff;
    --warn:      #f0a63a;
    --warn-bg:   #2d2414;
    --warn-rule: #5c4520;
    --ma50:      #8fd6c9;
    --ma150:     #4fb3a3;
    --ma200:     #2b8177;
    --viz-on:    #eceef1;
    --viz-off:   #3a3c43;
    --viz-cut:   #5a646e;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --seg-0: #d1d6db; --seg-1: #4fb3a3; --seg-2: #9d88f0;
  --seg-3: #6b7480; --seg-4: #9bb53f; --seg-5: #d07ab0;
  --seg-6: #c7b6f5; --seg-7: #2f8a7e;
  --page:      #17171c;
  --panel:     #212126;
  --panel-2:   #2a2a30;
  --chip:      #2f2f36;
  --ink:       #eceef1;
  --ink-2:     #b0b8c1;
  --ink-3:     #8f99a6;
  --rule:      #38383f;
  --rule-soft: #2a2a30;
  --accent:    #eceef1;
  --accent-on: #212126;
  --up:        #ff6b6b;
  --down:      #5ea0ff;
  --warn:      #f0a63a;
  --warn-bg:   #2d2414;
  --warn-rule: #5c4520;
  --ma50:      #8fd6c9;
  --ma150:     #4fb3a3;
  --ma200:     #2b8177;
  --viz-on:    #eceef1;
  --viz-off:   #3a3c43;
  --viz-cut:   #5a646e;
}

/* 고대비(기준 설정 > 화면, 기기마다 localStorage). 밝은 모니터에서 옅은 회색(선·칩·보조
   글자)이 날아가 안 보이는 것을 막는다. 라이트에 덮고, 다크일 때는 다크 값으로 다시 덮는다
   (같은 특이도라 뒤에 오는 쪽이 이긴다). */
:root[data-contrast="high"] {
  --page:      #d0d5db;
  --panel:     #ffffff;
  --panel-2:   #e8ebef;
  --chip:      #d6dbe1;
  --ink:       #000000;
  --ink-2:     #1c232c;
  --ink-3:     #2a323c;
  --rule:      #868f99;
  --rule-soft: #bcc3cb;
  --up:        #c8141f;
  --down:      #0d4fc0;
  --warn:      #8a4500;
  --warn-bg:   #ffe6c2;
  --warn-rule: #e0a24a;
  --viz-off:   #b8bfc7;
  --viz-cut:   #6b7480;
  --seg-3:     #8f98a3;
}
@media (prefers-color-scheme: dark) {
  :root[data-contrast="high"]:where(:not([data-theme="light"])) {
    --page:      #0b0b0e;
    --panel:     #18181c;
    --panel-2:   #24242a;
    --chip:      #2c2c33;
    --ink:       #ffffff;
    --ink-2:     #d9dee4;
    --ink-3:     #bcc4cd;
    --rule:      #6a6a75;
    --rule-soft: #45454e;
    --up:        #ff7b7b;
    --down:      #7ab4ff;
    --warn:      #ffb347;
    --warn-bg:   #3a2a10;
    --warn-rule: #8a6020;
    --viz-off:   #4a4c55;
    --viz-cut:   #8a939d;
    --seg-3:     #8a939d;
  }
}
:root[data-contrast="high"][data-theme="dark"] {
  --page:      #0b0b0e;
  --panel:     #18181c;
  --panel-2:   #24242a;
  --chip:      #2c2c33;
  --ink:       #ffffff;
  --ink-2:     #d9dee4;
  --ink-3:     #bcc4cd;
  --rule:      #6a6a75;
  --rule-soft: #45454e;
  --up:        #ff7b7b;
  --down:      #7ab4ff;
  --warn:      #ffb347;
  --warn-bg:   #3a2a10;
  --warn-rule: #8a6020;
  --viz-off:   #4a4c55;
  --viz-cut:   #8a939d;
  --seg-3:     #8a939d;
}

/* 기준값에서 벗어나면 페이지 전체의 강조색이 앰버로 넘어간다.
   배너 하나가 아니라 화면 전체가 '교정 벗어남' 상태로 읽혀야 한다. */
body.experiment {
  --accent: var(--warn);
  --accent-on: var(--panel);
  --viz-on: var(--warn);
}

/* ── 기본 ─────────────────────────────────────────────── */
* { box-sizing: border-box; }
/* display 를 지정한 요소는 hidden 속성이 안 먹는다. 전역으로 이기게 둔다. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.55;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
::selection { background: var(--ink); color: var(--panel); }
a { color: inherit; text-underline-offset: 3px; }
h1, h2, h3, h4 { text-wrap: balance; }
::placeholder { color: var(--ink-3); opacity: 1; }

.num, td.n, th.n { font-variant-numeric: tabular-nums; }
.code { font-size: 0.82em; font-weight: 500; letter-spacing: 0; color: var(--ink-3); }
.up { color: var(--up); }
.down { color: var(--down); }
.muted { color: var(--ink-2); }
.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.ico {
  width: 22px; height: 22px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.ico .dot, .ico .fill { fill: currentColor; stroke: none; }

.skip {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  padding: 10px 14px; border-radius: var(--radius);
  background: var(--accent); color: var(--accent-on);
  font-weight: 700; text-decoration: none;
}
.skip:focus { top: 8px; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }

/* ── 앱바 ─────────────────────────────────────────────── */
.appbar {
  position: sticky; top: 0; z-index: 30;
  background: var(--panel);
  border-bottom: 1px solid var(--rule);
}
.appbar-in {
  display: flex; align-items: center; gap: 12px;
  max-width: 1200px; margin: 0 auto;
  min-height: 56px;
  padding: 0 var(--gutter);
}
.brand {
  font-size: var(--t-md); font-weight: 800; letter-spacing: -0.03em;
  text-decoration: none; white-space: nowrap;
}
.asof { font-size: var(--t-sm); color: var(--ink-3); white-space: nowrap; }
.topnav { display: flex; gap: 4px; margin-left: 12px; }
.topnav a {
  padding: 8px 12px; border-radius: 10px;
  font-size: 15px; font-weight: 600; color: var(--ink-3);
  text-decoration: none; white-space: nowrap;
}
.topnav a:hover { color: var(--ink); background: var(--panel-2); }
.topnav a[aria-current="page"] { color: var(--ink); background: var(--chip); }
.appbar-act { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.iconbtn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; min-width: 40px; justify-content: center;
  padding: 0 10px; border: 0; border-radius: 10px;
  background: none; color: var(--ink-2);
  font: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer;
}
.iconbtn:hover { background: var(--panel-2); color: var(--ink); }
.iconbtn[aria-expanded="true"] { background: var(--chip); color: var(--ink); }

/* 폰: 메뉴는 아래 탭바로 */
.tabbar { display: none; }
@media (max-width: 719px) {
  .topnav, .wide-only { display: none; }
  .appbar-in { min-height: 52px; gap: 8px; }
  .brand { font-size: 17px; }
  body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: flex;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    padding: 0 4px env(safe-area-inset-bottom);
    background: var(--panel);
    border-top: 1px solid var(--rule);
  }
  .tabbar a, .tabbar button {
    flex: 1 1 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    border: 0; background: none; padding: 0;
    font: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0;
    color: var(--ink-3); text-decoration: none; cursor: pointer;
  }
  .tabbar .ico { width: 24px; height: 24px; }
  .tabbar a[aria-current="page"], .tabbar button[aria-expanded="true"] { color: var(--ink); }
}

/* ── 실험 모드 ────────────────────────────────────────── */
.exp { background: var(--warn-bg); border-bottom: 1px solid var(--warn-rule); }
.exp-in { max-width: 1200px; margin: 0 auto; padding: 12px var(--gutter); }
.exp h2 { margin: 0 0 4px; font-size: var(--t-base); font-weight: 800; color: var(--warn); }
.exp ul { margin: 0; padding: 0; list-style: none; }
.exp li { font-size: var(--t-sm); padding: 1px 0; }
.exp li b { font-weight: 600; }
.exp .was { color: var(--ink-2); }
.exp .reset {
  display: inline-flex; align-items: center; margin-top: 10px;
  min-height: 40px; padding: 0 16px; border-radius: var(--radius);
  background: var(--warn); color: var(--panel);
  font-size: var(--t-sm); font-weight: 700; text-decoration: none;
}

/* ── 레이아웃: 회색 바탕 위 카드 ───────────────────────── */
.wrap { max-width: 1200px; margin: 0 auto; padding: var(--gap) var(--gutter) 32px; }
main.page { display: flex; flex-direction: column; gap: var(--gap); }
.box {
  background: var(--panel);
  border-radius: var(--radius-card);
  padding: var(--pad);
  min-width: 0;
}
.box > h3, .brief > h3, .jh {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin: 0 0 12px; font-size: var(--t-md); font-weight: 700; letter-spacing: -0.02em;
}
.box > h3 .muted, .brief > h3 .muted { font-size: var(--t-sm); font-weight: 500; color: var(--ink-3); }
.box > h3 .lnk, .brief > h3 .lnk {
  margin-left: auto; font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); text-decoration: none;
}
.box > h3 .lnk:hover, .brief > h3 .lnk:hover { color: var(--ink); }
/* 폰: 카드는 화면 끝까지, 카드 사이는 회색 띠(토스 방식) */
@media (max-width: 719px) {
  .wrap { padding: 0 0 24px; }
  main.page { gap: 10px; }
  .box { border-radius: 0; padding: 18px var(--gutter); }
}

.empty { margin: 0; padding: 28px 0; text-align: center; color: var(--ink-3); font-size: var(--t-sm); }
.box.empty { padding: 28px var(--gutter); }
.none-line { margin: 0; color: var(--ink-3); font-size: var(--t-sm); }
.foot { margin: 14px 0 0; font-size: var(--t-sm); color: var(--ink-3); }
.foot a { color: var(--ink-2); }
.alert {
  margin: 0;
  background: var(--warn-bg); color: var(--ink);
  font-size: var(--t-sm);
}
p.alert:not(.box) { padding: 12px 14px; border-radius: var(--radius); }
.alert b { color: var(--warn); }
.note { font-size: var(--t-sm); color: var(--ink-2); margin: 10px 0 0; max-width: 62ch; }

/* ── 칩 ───────────────────────────────────────────────── */
.flagpill, .pill, .stage, .newpill, .tchip, .warnpill {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 600; line-height: 1;
  padding: 5px 8px; border-radius: 999px;
  white-space: nowrap; letter-spacing: 0;
}
.flagpill { background: var(--chip); color: var(--ink-2); }
.flagpill.block { background: var(--warn); color: var(--panel); }
.flagpill.fin, .flagpill.warn, .warnpill { background: var(--warn-bg); color: var(--warn); }
.flagpill.ok { background: var(--ink); color: var(--panel); }
.flagpill.more { background: none; color: var(--ink-3); padding-left: 2px; }
.flagpill[tabindex], .failno[tabindex], .badges[tabindex], .newpill[tabindex] { cursor: help; }

.pill { background: var(--chip); color: var(--ink-2); }
.pill.exp-pill { background: var(--warn-bg); color: var(--warn); }
.pill.buy { background: none; color: var(--up); box-shadow: inset 0 0 0 1px var(--up); }
.pill.sell { background: none; color: var(--down); box-shadow: inset 0 0 0 1px var(--down); }

/* 상태: 매수 구간·상승(ok, 진하게) / 추격·주의(warn) / 조정(block) / 근접(plain) */
.stage { background: var(--chip); color: var(--ink-2); }
.stage.ok { background: var(--ink); color: var(--panel); }
.stage.warn { background: var(--warn-bg); color: var(--warn); }
.stage.block { background: var(--warn); color: var(--panel); }
.stage.sm { font-size: 11px; padding: 4px 6px; }

.newpill { background: var(--ink); color: var(--panel); padding: 4px 7px; }
.stale { margin-left: 6px; padding: 4px 8px; font-size: 12px; font-weight: 700;
  color: var(--warn); background: var(--warn-bg); border-radius: 999px; white-space: nowrap; }

/* 더 볼 것이 있는 글(마우스를 올리거나 폰에서 누르면 뜬다) */
.tipped { white-space: nowrap; text-decoration: underline dotted var(--ink-3); text-underline-offset: 4px; cursor: help; }

/* ── 버튼·입력 ─────────────────────────────────────────── */
.actions { display: flex; gap: 8px; padding-top: 18px; }
.btn {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 18px;
  font: inherit; font-size: var(--t-base); font-weight: 700;
  text-decoration: none;
  border: 0; border-radius: var(--radius);
  background: var(--accent); color: var(--accent-on);
  cursor: pointer;
  transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1), background-color 120ms;
}
.btn:active { transform: scale(0.98); }
.btn.ghost { background: var(--chip); color: var(--ink); }
.btn.ghost:hover { background: var(--rule); }
.btn.sm { min-height: 36px; padding: 0 12px; font-size: var(--t-sm); flex: none; }
.btn:disabled { opacity: 0.55; cursor: progress; }

input[type="number"], input[type="text"], input[type="date"], input[type="password"], input:not([type]), select, textarea {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  font: inherit; font-size: var(--t-base);
  color: var(--ink);
  background: var(--panel-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
select { padding-right: 36px; appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px; background-repeat: no-repeat; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 0; border-color: transparent; }

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 28px; background: none; margin: 0; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--rule); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--rule); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px;
  border-radius: 50%; background: var(--accent); border: 3px solid var(--panel);
}
input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: 3px solid var(--panel); }

/* 알약 탭(시장 고르기). 회색 트랙 위 흰 알약이 선택. */
.seg, .mtabs {
  display: flex; gap: 2px; padding: 4px;
  background: var(--chip); border-radius: 14px;
}
.seg a, .seg label, .mtabs a {
  flex: 1; display: flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 12px; border-radius: 10px;
  font-size: 15px; font-weight: 600; color: var(--ink-3);
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.seg a:hover, .mtabs a:hover { color: var(--ink); }
.seg a.on, .seg label:has(input:checked), .mtabs a.on { background: var(--panel); color: var(--ink); font-weight: 700; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }

/* ── 결과 ─────────────────────────────────────────────── */
.mrow { display: flex; align-items: center; gap: 12px; }
.mrow .mtabs { flex: 1 1 auto; max-width: 420px; background: var(--rule); }
.mrow .mtabs a:not(.on) { color: var(--ink-2); }
.setlink {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 12px; border-radius: 12px;
  font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); text-decoration: none; white-space: nowrap;
}
.setlink:hover { background: var(--panel); color: var(--ink); }
@media (max-width: 719px) {
  .mrow { padding: 12px var(--gutter) 0; }
  .setlink span { display: none; }
}

/* 요약 카드 두 장: 시장 방향 / 보유 점검 */
.sumgrid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }   /* 나란히 놓인 두 카드는 높이를 맞춘다 */
@media (max-width: 719px) { .sumgrid { gap: 10px; } }
.scard { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 719px) {
  .scard { padding-top: 12px; padding-bottom: 12px; gap: 6px; }
  .scard-h h2 { font-size: var(--t-base); }
  .hlist li { padding: 0; }
  .hlist a { min-height: 30px; }
  .mrow { padding-top: 8px !important; }
  .mtabs a { min-height: 36px; }
  .results.box { padding-top: 14px; }
  .rhead { gap: 2px 8px; margin-bottom: 4px; }
  .rhead h2 b { font-size: 22px; }
  .rmeta { font-size: var(--t-xs); }
  .tchip, .sortsel select { min-height: 32px; }
  .screen tr { padding: 12px 0 !important; }
}
.scard-h { display: flex; align-items: center; gap: 8px; }
.scard-h h2 { margin: 0; font-size: var(--t-md); font-weight: 700; letter-spacing: -0.02em; }
.scard-h h2 a { text-decoration: none; }
.scard-h h2 a:hover { text-decoration: underline; }
.scard-h .stage { margin-left: auto; }
.facts { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; }
.facts > div { display: flex; align-items: baseline; gap: 6px; }
.facts dt { font-size: var(--t-sm); color: var(--ink-3); }
.facts dd { margin: 0; font-size: var(--t-base); font-weight: 700; }
.facts dd small.slope { font-size: 12px; font-weight: 600; color: var(--warn); }
.facts dd small.den { font-size: var(--t-sm); font-weight: 500; color: var(--ink-3); }
.hlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.hlist li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 2px 0; }
.hlist a { font-weight: 700; text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
.hlist a:hover { text-decoration: underline; }
.chips { display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 0; }
p.chips { display: flex; margin-top: 12px; }

/* 목록 카드 머리 */
.rhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 8px; }
.rhead h2 { margin: 0; font-size: var(--t-md); font-weight: 600; letter-spacing: -0.02em; }
.rhead h2 b { font-size: var(--t-lg); font-weight: 800; margin: 0 1px; }
.rmeta { margin: 0; font-size: var(--t-sm); color: var(--ink-3); }
.rtools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }
.rhead-box .rhead { margin-bottom: 0; }
.tchip {
  min-height: 36px; padding: 0 14px; font-size: var(--t-sm);
  background: var(--chip); color: var(--ink-2); text-decoration: none;
}
.tchip:hover { color: var(--ink); }
.tchip.on { background: var(--ink); color: var(--panel); }
.sortsel { display: flex; align-items: center; gap: 6px; margin: 0; }
.sortsel label { font-size: var(--t-sm); color: var(--ink-3); }
.sortsel select { min-height: 36px; width: auto; font-size: var(--t-sm); font-weight: 600; padding: 0 32px 0 12px; border-radius: 999px; background-color: var(--chip); border: 0; }
@media (max-width: 719px) {
  .rhead { flex-direction: column; align-items: stretch; }
  .rtools { margin-left: 0; }
  .sortsel { margin-left: auto; }
}

/* 정렬 가능한 열 머리 */
a.sort { color: inherit; text-decoration: none; }
a.sort:hover { color: var(--ink); }
a.sort.cur { color: var(--ink); font-weight: 700; }
a.sort { display: inline-flex; align-items: center; gap: 2px; }
a.sort .ico { width: 14px; height: 14px; stroke-width: 2.2; }
.th-u { display: block; font-size: 11px; font-weight: 500; color: var(--ink-3); line-height: 1.2; }

/* ── 표 ───────────────────────────────────────────────── */
table.grid { width: 100%; border-collapse: collapse; }
table.grid th {
  font-size: var(--t-xs); font-weight: 600; color: var(--ink-3);
  text-align: right; padding: 4px 10px 10px;
  white-space: nowrap;
}
table.grid th:first-child, table.grid th.l { text-align: left; }
table.grid td {
  padding: 14px 10px;
  text-align: right; white-space: nowrap;
  font-size: 15px; font-weight: 600;
}
table.grid td.l { text-align: left; }
table.grid th:first-child, table.grid td:first-child { padding-left: 0; }
table.grid th:last-child, table.grid td:last-child { padding-right: 0; }
table.grid tbody tr:hover td { background: var(--panel-2); }
table.grid tbody tr:hover td:first-child { border-radius: 12px 0 0 12px; }
table.grid tbody tr:hover td:last-child { border-radius: 0 12px 12px 0; }
.nm { font-weight: 700; text-decoration: none; }
a.nm:hover { text-decoration: underline; }
.sub-n { display: block; font-size: 12px; font-weight: 500; color: var(--ink-3); line-height: 1.4; margin-top: 2px; }
.sub-n.zero, .shr.zero { color: var(--warn); font-weight: 700; }
.dt-t { font-weight: 600; }
.trades .dt-t, .mini .dt-t { font-size: var(--t-sm); color: var(--ink-2); }
.trades td.c-wide a { font-size: var(--t-base); }
.mk { margin-left: 6px; font-size: var(--t-xs); color: var(--ink-3); }

/* 피벗: 매수 구간(피벗 위 5% 안)은 굵고 진하게, 추격은 앰버 */
.pv { font-weight: 700; }
.pv.ok { color: var(--ink); font-weight: 800; }
.pv.warn { color: var(--warn); }
.warn-t { color: var(--warn); }

/* 결과 표 */
.screen .nmbox { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.screen .nm { font-size: var(--t-base); }
.screen .sector { font-size: var(--t-sm); font-weight: 500; color: var(--ink-3); }
.screen .failno { font-size: 12px; font-weight: 500; color: var(--ink-3); white-space: nowrap; }
.screen .badges { display: inline-flex; gap: 4px; }
.screen tr.fail .nm { color: var(--ink-2); }
.screen .c-key .stage { margin-top: 4px; line-height: 1; }
/* 거래대금 단위는 넓은 화면에서는 열 머리에 있다. 폰(열 머리 없음)에서만 값 옆에. */
.screen td .u { display: none; margin-left: 2px; font-size: 12px; font-weight: 500; color: var(--ink-3); }
.screen td.c-key { font-size: var(--t-base); }
.chg { display: block; font-size: 12px; font-weight: 600; margin-top: 2px; }
/* 돌파일 거래량: 동반(50일 평균 1.5배 이상)이면 진하게, 부족하면 흐리게 */
.botag { display: block; margin-top: 3px; font-size: 11px; font-weight: 700; color: var(--ink); letter-spacing: 0; cursor: help; }
.botag.plain { font-weight: 500; color: var(--ink-3); }
.kv .v2.bo-ok { color: var(--ink); font-weight: 700; }
.keyline .botag { display: inline; margin-left: 4px; }
.screen .c-key .pv + .stage { display: flex; width: fit-content; margin-left: auto; }

/* 거래대금·지수대비는 부차적이다. 1400px 아래에서는 접어서 종목 열에 자리를 준다. */
@media (max-width: 1399px) { table.grid .hide-sm { display: none; } }

@media (min-width: 1180px) {
  table.grid.screen { table-layout: fixed; }
  /* 숫자 열은 들어갈 가장 긴 값에 맞춰 폭을 박고, 남는 폭은 종목 열이 가진다.
     폭을 안 주면 고정 레이아웃이 나머지를 똑같이 나눠 74px 이 되는데, 거기에
     '14,067백만달러'(112px), '1,482,000 +3.49%', '199.82% ATR 99.91%'가 안 들어가
     옆 칸을 덮었다. 단위는 열 머리로 올렸다. */
  /* 표는 판단에 먼저 쓰는 넷만: 종가 · 피벗 · 손절폭 · 수량. 나머지 지표는 상세에서. */
  table.grid.screen th:nth-child(2)  { width: 128px; }   /* 종가 + 전일 대비 */
  table.grid.screen th:nth-child(3)  { width: 136px; }   /* 피벗 + 상태 칩 + 돌파 거래량 */
  table.grid.screen th:nth-child(4)  { width: 120px; }   /* 손절폭 + ATR */
  table.grid.screen th:nth-child(5)  { width: 72px; }    /* RS 99.9 */
  table.grid.screen th:nth-child(6)  { width: 104px; }   /* 거래대금 14,067 (단위는 머리) */
  /* 종목 칸은 한 줄. 자리가 모자라면 업종을 먼저 줄인다(이름은 그대로). */
  .screen .nmbox { overflow: hidden; }
  .screen .nm { flex: none; max-width: 14em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .screen .sector { flex: 0 1 auto; min-width: 1.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .screen .code, .screen .newpill { flex: none; }
  .screen .failno { flex: 0 1 auto; min-width: 2em; overflow: hidden; text-overflow: ellipsis; }
  .screen .badges { flex: none; margin-left: auto; }

  .detail table.grid { table-layout: fixed; }
  .detail table.grid th:not(:first-child) { width: 110px; }
}

/* 좁은 화면: 같은 표 마크업을 목록 줄로 편다(토스 목록처럼).
   1행 이름·업종 + 종가 / 2행 핵심 숫자 세 칸. */
@media (max-width: 1179px) {
  table.grid, table.grid tbody { display: block; }
  table.grid thead { display: none; }
  table.grid tr {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px 10px;
    padding: 14px 0;
  }
  table.grid td { display: block; border: 0; padding: 0; text-align: left; white-space: normal;
    background: none !important; align-self: start; }
  table.grid td.hide-sm, table.grid td.hide-ph { display: none; }

  .screen td.c-main  { grid-row: 1; grid-column: 1 / 5; align-self: center; }
  .screen td.c-price { grid-row: 1; grid-column: 5 / 7; text-align: right; align-self: start;
    font-size: var(--t-md); font-weight: 800; }
  table.grid.screen td.c-key { grid-column: span 2; padding-top: 12px; font-size: var(--t-md); font-weight: 800; }
  .screen td.c-key .sub-n { display: none; }
  .screen td.c-key .stage { margin-left: 6px; vertical-align: 3px; margin-top: 0; }
  .screen .c-key .pv + .stage { display: inline-flex; }
  /* 폰은 주수가 큰 숫자, 금액이 아랫줄 */
  .screen td .u { display: inline; }
  /* 폰 한 줄에 숫자 넷(피벗·손절폭·RS·거래대금): 12칸 격자에서 셋씩 */
  table.grid.screen tr { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .screen td.c-main  { grid-column: 1 / 9; }
  .screen td.c-price { grid-column: 9 / 13; }
  table.grid.screen td.c-key { grid-column: span 3; }

  .screen .nmbox { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
  .screen .nm { font-size: 17px; }
  .screen .sector { order: 5; flex-basis: 100%; font-size: var(--t-xs); }
  .screen .badges { order: 6; flex-wrap: wrap; margin-top: 4px; }
  .screen .failno { order: 7; flex-basis: 100%; min-width: 0; white-space: normal; overflow-wrap: anywhere; }

  table.grid:not(.screen) td.c-main { grid-column: 1 / -1; }
  table.grid:not(.screen) td.c-price { grid-column: span 2; padding-top: 8px; font-size: var(--t-sm); }
  table.grid td.c-stat { grid-column: span 2; padding-top: 8px; font-size: var(--t-sm); }
  table.grid td.c-wide { grid-column: 1 / -1; padding-top: 8px; }

  /* 라벨: 칸 위에 작은 글씨 */
  td.c-stat::before, table.grid:not(.screen) td.c-price::before {
    content: attr(data-l); display: block;
    color: var(--ink-3); font-size: 12px; font-weight: 500; line-height: 1.4; margin-bottom: 1px;
  }
  /* 일지·대조군 표는 아랫줄(손절까지 남은 폭, 손익 금액, 승률)을 폰에서도 보인다 */
  td.c-stat .sub-n { display: none; }
  .jt td.c-stat .sub-n, .cmp td.c-stat .sub-n { display: block; }
}

/* ── 종목 상세 ────────────────────────────────────────── */
.back {
  display: inline-flex; align-items: center; gap: 2px;
  min-height: 40px; margin: -8px 0 4px -6px; padding: 0 8px 0 2px; border-radius: 10px;
  font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); text-decoration: none;
}
.back:hover { background: var(--panel-2); color: var(--ink); }
.back .ico { width: 20px; height: 20px; }
.dhead h2 { margin: 0; font-size: var(--t-lg); font-weight: 800; letter-spacing: -0.03em; }
.sub2 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 4px 0 0; color: var(--ink-3); font-size: var(--t-sm); }
.price { margin: 14px 0 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price b { font-size: var(--t-xl); font-weight: 800; letter-spacing: -0.03em; }
.price small { font-size: var(--t-base); font-weight: 600; color: var(--ink-2); }
.price > span { font-size: var(--t-base); font-weight: 700; }

/* 무엇으로 먹고사는 회사인지. 주요제품이 길면 두 줄에서 자른다. */
.biz {
  margin: 12px 0 0; font-size: var(--t-sm); color: var(--ink-2); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.biz b { color: var(--ink); font-weight: 600; }
.biz .rank {
  display: inline-block; margin: 0 2px 0 4px; padding: 1px 8px; border-radius: 999px;
  background: var(--chip); color: var(--ink); font-size: 12px; font-weight: 600; white-space: nowrap;
}
.biz .rank small { color: var(--ink-2); font-size: 1em; }
.card .biz { margin: 6px 0 10px; }

/* 매수 판단: 이 화면의 초점 */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kv { display: flex; flex-direction: column; min-width: 0; }
.kv .k { font-size: var(--t-sm); color: var(--ink-3); }
.kv .v { font-size: var(--t-md); font-weight: 800; letter-spacing: -0.02em; }
.kv .v2 { font-size: var(--t-xs); color: var(--ink-3); margin-top: 2px; }
.kv.big { background: var(--panel-2); border-radius: 14px; padding: 14px 14px 12px; }
.kv.big .v { font-size: var(--t-lg); line-height: 1.25; margin-top: 2px; }
.kv > .stage { align-self: flex-start; margin: 4px 0 2px; }
.baseline { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 14px 0 0; font-size: var(--t-sm); color: var(--ink-2); }
.baseline b { color: var(--ink); font-weight: 700; }
.baseline small { font-size: 12px; color: var(--ink-3); }
@media (max-width: 719px) {
  .trio { gap: 6px; }
  .kv.big { padding: 12px 10px 10px; }
  .kv.big .v { font-size: 20px; }
  .kv .v2 { font-size: 12px; }
}

/* 차트 */
.chartbox { padding-bottom: 14px; }
.lwchart { width: 100%; height: 440px; }       /* 아래 칸(RS선)까지 */
.lwchart.has-flow { height: 540px; }             /* 맨 아래 칸(투자자 누적 순매수)까지 */
@media (max-width: 599px) { .lwchart { height: 340px; } .lwchart.has-flow { height: 430px; } }
.chart-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--ink-3); padding: 10px 0 0; }
.chart-legend i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; vertical-align: 2px; margin-right: 5px; }
.chart-legend .sw-up { background: var(--up); }
.chart-legend .sw-down { background: var(--down); }
.chart-legend .sw-ma50, .sw-ma50 { background: var(--ma50); }
.chart-legend .sw-ma150, .sw-ma150 { background: var(--ma150); }
.chart-legend .sw-ma200, .sw-ma200 { background: var(--ma200); }
.chart-legend .sw-pivot { background: none; border-top: 2px dashed var(--warn); height: 0; }
.chart-legend .sw-plan2 { background: none; border-top: 2px dotted var(--ink-2); height: 0; }
/* 지표 안의 작은 구역 제목(나눠 사기) */
.sub-h { margin: 18px 0 2px; font-size: var(--t-sm); font-weight: 700; color: var(--ink); }
.chart-legend .sw-vavg { background: var(--ink-2); height: 1px; }
.chart-legend .sw-rs { background: var(--ink); }
/* 투자자 선 색: 매출구성 조각 색(--seg)을 빌린다 -- 빨강·파랑(등락)과 이평선 초록을 피한다 */
.sw-frgn, .sw-inst, .sw-indiv { display: inline-block; width: 12px; height: 2px; margin-right: 4px; vertical-align: middle; border-radius: 1px; }
.sw-frgn { background: var(--seg-2); }
.sw-inst { background: var(--seg-4); }
.sw-indiv { background: var(--seg-0); }
.chart-legend .sw-inst, .chart-legend .sw-indiv { margin-left: 6px; }

.chart-legend .flagpill { padding: 3px 7px; }
.sw-close { background: var(--ink); }
.readout { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 0 0 10px; font-size: var(--t-sm); }
.readout .k { color: var(--ink-3); }
.readout .swatch { display: inline-block; width: 10px; height: 2px; vertical-align: 3px; margin-right: 5px; }
.viz-price { width: 100%; height: auto; display: block; touch-action: pan-y; }
.viz-price .grid { stroke: var(--rule); stroke-width: 1; }
.viz-price .axis { font-size: 10px; fill: var(--ink-3); }
.viz-price .line { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.viz-price .s-close { stroke: var(--ink); stroke-width: 2.25; }
.viz-price .s-ma50 { stroke: var(--ma50); stroke-width: 1.75; }
.viz-price .s-ma150 { stroke: var(--ma150); stroke-width: 1.75; }
.viz-price .s-ma200 { stroke: var(--ma200); stroke-width: 1.75; }
.viz-price .tag { font-size: 10px; font-weight: 600; }
.viz-price .tag.s-close { fill: var(--ink); stroke: none; }
.viz-price .tag.s-ma50 { fill: var(--ma50); stroke: none; }
.viz-price .tag.s-ma150 { fill: var(--ma150); stroke: none; }
.viz-price .tag.s-ma200 { fill: var(--ma200); stroke: none; }
.viz-price .cursor { stroke: var(--ink-3); stroke-width: 1; opacity: 0; }
.viz-price.live .cursor { opacity: 1; }

/* 지표 칸: 매수 판단보다 한 단계 낮게 */
/* 지표·재무: 토스 '종목 정보'처럼 라벨 왼쪽, 값 오른쪽. 매수 판단보다 한 단계 낮게. */
.stats { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 40px; }
@media (min-width: 720px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k v" "v2 v";
  column-gap: 12px; align-items: baseline; padding: 9px 0; min-width: 0;
}
.stat .k { grid-area: k; font-size: var(--t-sm); color: var(--ink-2); }
.stat .v { grid-area: v; font-size: var(--t-base); font-weight: 700; text-align: right; white-space: nowrap; }
.stat .v2 { grid-area: v2; font-size: 12px; color: var(--ink-3); overflow-wrap: anywhere; }

details.tabular > summary {
  display: flex; align-items: center; gap: 8px;
  min-height: 40px; font-size: var(--t-base); font-weight: 700; cursor: pointer; list-style: none;
}
details.tabular > summary::-webkit-details-marker { display: none; }
details.tabular > summary::after {
  content: ""; margin-left: auto; width: 8px; height: 8px;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg); transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
details.tabular[open] > summary::after { transform: rotate(-135deg); }
details.tabular[open] > summary { margin-bottom: 8px; }
.card details.tabular { margin-top: 10px; }
.card details.tabular > summary { font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); min-height: 36px; }

/* ── 걸러야 할 항목 ───────────────────────────────────── */
.flaglist { list-style: none; margin: 0; padding: 0; }
.flaglist li {
  display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline;
  padding: 8px 0; font-size: var(--t-sm);
}
.flaglist .tag { flex: none; font-size: 12px; font-weight: 600; padding: 3px 7px; border-radius: 999px; background: var(--chip); color: var(--ink-2); }
.flaglist li.block .tag { background: var(--warn); color: var(--panel); }
.flaglist .dt { color: var(--ink-3); font-size: var(--t-xs); flex: none; }
.flaglist .muted { font-size: var(--t-sm); }
.flaglist .muted a { color: var(--ink-2); }
.flaglist li.grp { display: block; padding: 0; }
.flaglist li.grp > details > summary {
  display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline;
  padding: 10px 0; cursor: pointer; list-style: none;
}
.flaglist li.grp > details > summary::-webkit-details-marker { display: none; }
.flaglist li.grp > details > summary::before {
  content: ""; flex: none; align-self: center; width: 0; height: 0;
  border-left: 5px solid var(--ink-3); border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform 120ms;
}
.flaglist li.grp > details[open] > summary::before { transform: rotate(90deg); }
.flaglist .cnt { font-size: var(--t-xs); color: var(--ink-2); }
.flaglist.sub { margin: 0 0 8px 14px; }
.flaglist.sub li { padding: 6px 0; }
.flaglist.plain li { padding: 7px 0; }
.src { color: var(--ink-3); margin-left: 6px; font-size: 12px; font-weight: 500; }

/* ── 양쪽 시나리오 ───────────────────────────────────────
   좌우로 나란히 둔다. 위아래로 쌓으면 먼저 읽은 쪽에 기울어진다.
   폰에서는 세로로 쌓이되 '나쁜 쪽'이 먼저 온다. */
.scen { display: grid; gap: 8px; margin: 4px 0; }
@media (min-width: 720px) { .scen { grid-template-columns: 1fr 1fr; } }
.scen .side { background: var(--panel-2); border-radius: 14px; padding: 14px 16px; }
.scen :is(h3, h4) { margin: 0 0 6px; font-size: var(--t-sm); font-weight: 800; }
.scen .bear h4 { color: var(--down); }
.scen .bull h4 { color: var(--up); }
.scen ul { margin: 0; padding-left: 1.1em; }
.scen li { font-size: var(--t-sm); padding: 3px 0; word-break: keep-all; overflow-wrap: anywhere; }
.scen .none { margin: 0; font-size: var(--t-sm); color: var(--ink-3); }
/* 근거 문장이 곧 링크다. 본문 색을 두고 밑줄만 흐리게, 가리키면 또렷하게. */
:is(.scen, .reading) a.pt { color: inherit; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
:is(.scen, .reading) a.pt:hover, :is(.scen, .reading) a.pt:focus-visible { text-decoration-color: var(--ink-2); }
:is(.scen, .reading) a.refn { margin-left: 3px; padding: 0 3px; font-size: 12px; color: var(--ink-3); text-decoration: none; vertical-align: super; }
:is(.scen, .reading) a.refn:hover { color: var(--ink); }
:is(.scen, .reading) .refn.more { cursor: help; }
:is(.scen, .reading) .when { margin-left: 2px; font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.unknown { margin: 10px 0 0; font-size: var(--t-sm); color: var(--ink-2); }
.unknown b { display: block; color: var(--ink); margin-bottom: 2px; font-size: var(--t-xs); }
.unknown span { display: block; padding-left: 2px; }
details.same { margin-top: 4px; }
details.same summary { cursor: pointer; font-size: var(--t-xs); color: var(--ink-3); list-style-position: inside; }
details.same ul, details.same span { color: var(--ink-2); }
.reading { margin: 10px 0 0; padding: 14px 16px; background: var(--panel-2); border-radius: 14px; }
.reading h4 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; font-size: var(--t-sm); font-weight: 800; }
.reading h4 .src { margin-left: auto; font-weight: 500; }
.reading ul { margin: 0; padding-left: 1.1em; }
.reading li { font-size: var(--t-sm); padding: 3px 0; word-break: keep-all; overflow-wrap: anywhere; }
.reading .oneline { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--rule); font-size: var(--t-sm); }
.gen { margin: 10px 0 0; font-size: 12px; color: var(--ink-3); }
.gen .src { margin-left: 0; }

/* 시나리오 날짜 줄 */
.scen-dates { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 12px; }
@media (max-width: 560px) { .scen-dates a:nth-of-type(n+6) { display: none; } }
.scen-dates a {
  flex: 0 0 auto; display: inline-flex; align-items: center;
  min-height: 34px; padding: 0 12px; border-radius: 999px;
  font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); text-decoration: none;
  background: var(--chip);
}
.scen-dates a:hover { color: var(--ink); }
.scen-dates a.on { background: var(--ink); color: var(--panel); }
.scen-more { flex: 0 0 auto; width: auto; min-height: 34px; padding: 0 30px 0 12px; font-size: var(--t-sm); border-radius: 999px; background-color: var(--chip); border: 0; }
@media (max-width: 560px) { .scen-more { flex: 1 1 100%; width: 100%; } }
#scen-box[aria-busy="true"] { opacity: 0.55; transition: opacity 120ms; }

/* ── 매출구성 ─────────────────────────────────────────── */
.seg-0 { fill: var(--seg-0); background: var(--seg-0); }
.seg-1 { fill: var(--seg-1); background: var(--seg-1); }
.seg-2 { fill: var(--seg-2); background: var(--seg-2); }
.seg-3 { fill: var(--seg-3); background: var(--seg-3); }
.seg-4 { fill: var(--seg-4); background: var(--seg-4); }
.seg-5 { fill: var(--seg-5); background: var(--seg-5); }
.seg-6 { fill: var(--seg-6); background: var(--seg-6); }
.seg-7 { fill: var(--seg-7); background: var(--seg-7); }
.rm-body { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.rm-donut { flex: none; width: 150px; height: 150px; }
.rm-donut path { stroke: var(--panel); stroke-width: 2px; }
.rm-donut path:hover { opacity: 0.8; }
.rm-legend { flex: 1 1 280px; max-width: 560px; border-collapse: collapse; font-size: var(--t-sm); }
.rm-legend td { padding: 6px 0; }
.rm-sw { width: 20px; }
.rm-sw i, .rm-keys i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; }
.rm-nm { color: var(--ink); padding-right: 12px; }
.rm-pct { text-align: right; font-weight: 700; white-space: nowrap; }
.rm-legend .rm-adj td { color: var(--ink-3); font-weight: 500; }
.rm-bar { margin: 2px 0 12px; }
.rm-track { display: flex; gap: 2px; height: 8px; border-radius: 4px; overflow: hidden; }
.rm-track span { min-width: 2px; }
.rm-keys { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 6px; font-size: 12px; color: var(--ink-2); }
.rm-keys i { margin-right: 4px; }

/* ── 브리핑 카드 ─────────────────────────────────────── */
.card header { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.card header .nm { font-size: var(--t-md); }
.card header .px { margin-left: auto; font-size: var(--t-md); font-weight: 800; }
.keyline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 2px 0 10px; }
.keyline .kv { background: var(--panel-2); border-radius: 12px; padding: 10px 12px; }
.keyline .kv .v { display: inline; }
.keyline .kv .stage { margin-left: 4px; vertical-align: 2px; }
.card .line { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--t-sm); color: var(--ink-3); padding: 2px 0; }
.card .line b { color: var(--ink); font-weight: 700; }
.card .line.fin .k { color: var(--ink-3); }
.card .clean { margin: 10px 0 0; font-size: var(--t-sm); color: var(--ink-3); }
.card .scen { margin-top: 12px; }
.card .flaglist { margin-top: 8px; }

/* ── 매매일지 ─────────────────────────────────────────── */
.jform { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.jform label { display: flex; flex-direction: column; gap: 6px; font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); }
.jform label.wide, .jform .actions { grid-column: 1 / -1; }
.jform .actions { padding-top: 4px; }
.jform .editing { margin: 0; font-size: var(--t-sm); color: var(--ink-2); }
@media (min-width: 720px) {
  .jform { grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr; }
  .jform label.wide { grid-column: 1 / 5; }
  .jform .actions { grid-column: 5; align-items: end; padding-top: 0; }
}
.jt .sub-n { font-weight: 500; }
/* 판 이유: 매도일 때만 */
.jform .sell-only { display: none; }
.jform:has(select[name=side] option[value=sell]:checked) .sell-only { display: flex; }
@media (min-width: 720px) {
  .jform:has(select[name=side] option[value=sell]:checked) label.wide { grid-column: 2 / 5; }
}
.trades .why { margin-left: 6px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.trades .why[title] { cursor: help; }

/* 분석: 큰 숫자 네 칸, 그 아래 점검 숫자, 그 아래 갈래별 작은 표 */
.trio.quad { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 719px) { .trio.quad { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ana-stats { margin-top: 12px; }
.ana-stats .k[title], .kv .k[title], .gtab th[title], .cycles th[title] { cursor: help; }
.warn-t { color: var(--warn); }
.up-t { color: var(--up); }
.gtabs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 40px; margin-top: 18px; }
@media (min-width: 720px) { .gtabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gtab { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums;
  table-layout: fixed; align-self: start; }
.gtab thead th:nth-child(1) { width: 30%; }
.gtab thead th:nth-child(2) { width: 14%; }
.gtab thead th:nth-child(3) { width: 18%; }
.gtab thead th:nth-child(4) { width: 22%; }
.gtab caption { text-align: left; font-size: var(--t-sm); font-weight: 700; color: var(--ink); padding-bottom: 4px; }
.gtab th, .gtab td { padding: 7px 0 7px 10px; text-align: right; font-size: var(--t-sm); white-space: nowrap; }
.gtab thead th { font-size: var(--t-xs); font-weight: 600; color: var(--ink-3); padding-top: 2px; padding-bottom: 4px; }
.gtab th.l { text-align: left; padding-left: 0; font-weight: 600; color: var(--ink-2); }
.gtab td { font-weight: 600; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cycles .dt-t { display: block; margin-top: 2px; font-size: var(--t-xs); font-weight: 500; color: var(--ink-3); }
.cycles td.c-stat .stage { margin-bottom: 2px; }
.cycles td .sub-n { display: block; word-break: keep-all; }
.chk .flagpill { margin: 0 4px 4px 0; }
table.grid.mini td { padding-top: 10px; padding-bottom: 10px; }
table.grid.mini td.c-wide, .trades td.c-wide { white-space: normal; overflow-wrap: anywhere; font-weight: 500; color: var(--ink-2); }
@media (min-width: 1180px) {
  table.grid.mini { table-layout: fixed; }
  .detail table.grid.mini th:nth-child(1) { width: 170px; }
  .detail table.grid.mini th:nth-child(2) { width: 72px; }
  .detail table.grid.mini th:nth-child(3) { width: 128px; }
  .detail table.grid.mini th:nth-child(4) { width: auto; }
}
form.inline { display: inline; }
.x {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px;
  border: 0; border-radius: 10px; background: var(--chip); color: var(--ink-2);
  font: inherit; font-size: var(--t-sm); font-weight: 600; text-decoration: none; cursor: pointer;
}
.x:hover { color: var(--ink); }
/* 되돌릴 수 없는 지우기는 옆에 붙이지 않는다 */
.x + form.inline { margin-left: 12px; }
.x.del { background: none; color: var(--warn); }
.x.del:hover { background: var(--warn-bg); }
.nowrap { white-space: nowrap; }
.x { white-space: nowrap; }
.jt td a { font-weight: 700; text-decoration: none; }
.jt td a:hover { text-decoration: underline; }
@media (max-width: 1179px) {
  .trades td.c-act { grid-column: span 2; display: flex; justify-content: flex-end; align-items: center; padding-top: 8px; }
  .trades td.c-act .x + form.inline { margin-left: 8px; }
}

/* ── 기록 상세: 구역 제목과 대조군 표 ───────────────────── */
.detail h3.sec { margin: 26px 0 8px; font-size: var(--t-md); font-weight: 700; }
.detail .box > h2 { margin: 0; font-size: var(--t-lg); font-weight: 800; letter-spacing: -0.03em; }
.cmp td.c-main .nmbox { display: block; }
.cmp td.c-main .nm { font-weight: 700; }
.cmp .desc { display: block; margin: 2px 0 0; color: var(--ink-3); font-size: var(--t-xs); font-weight: 500; line-height: 1.4; }
.detail table.grid.cmp { max-width: 940px; }

/* ── 기준 설정 ─────────────────────────────────────────── */
.panel > h2 { margin: 0 0 4px; font-size: var(--t-lg); font-weight: 800; letter-spacing: -0.03em; }
.settings-page form { max-width: 680px; }
fieldset { border: 0; margin: 0; padding: 0; }
fieldset legend { font-size: var(--t-base); font-weight: 700; padding: 22px 0 8px; width: 100%; }
.ctl { padding: 8px 0; }
.ctl-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: var(--t-sm); }
.ctl-head label { color: var(--ink-2); }
.ctl-head output { font-weight: 800; color: var(--ink); }
.ctl-head output.off { color: var(--warn); }
.money { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.money label { display: block; font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.panel p.hint { margin: 12px 0 0; font-size: var(--t-sm); color: var(--ink-2); }
.panel p.hint b { color: var(--ink); }
@media (max-width: 480px) { .money { grid-template-columns: 1fr; } }

/* ── 화면 옆 채팅 ──────────────────────────────────────
   데스크톱은 오른쪽 도크(본문을 밀어낸다), 폰은 아래에서 올라오는 시트. */
.chat { display: flex; flex-direction: column; background: var(--panel); }
@media (min-width: 1000px) {
  .chat { position: fixed; top: 0; right: 0; bottom: 0; width: var(--chat-w, 380px); z-index: 40; border-left: 1px solid var(--rule); }
}
@media (min-width: 1260px) { body.chat-open { padding-right: var(--chat-w, 380px); } }
body.chat-open table.grid .hide-sm { display: none; }
@media (max-width: 999px) {
  .chat {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    height: min(72vh, 600px);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -6px 24px rgb(0 0 0 / 0.16);
  }
}
.chat-head { display: flex; align-items: center; gap: 8px; padding: 10px var(--gutter); border-bottom: 1px solid var(--rule-soft); }
.chat-head b { font-size: var(--t-base); }
/* 화면 보기 켬/끔. 켜면 진하게(파랑은 버튼에 쓰지 않는다) */
.chat-scr {
  min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px;
  background: var(--chip); color: var(--ink-2);
  font: inherit; font-size: var(--t-xs); font-weight: 600; cursor: pointer; white-space: nowrap;
}
.chat-scr:hover { color: var(--ink); }
.chat-scr[aria-pressed="true"] { background: var(--ink); color: var(--panel); }
/* 화면을 같이 보낸 질문에는 작은 표시 */
.chat-log .m.me.scr::before { content: "화면 같이 봄"; display: block; margin-bottom: 2px; font-size: 11px; font-weight: 600; color: var(--ink-3); }
.chat-x {
  display: inline-flex; align-items: center; justify-content: center; min-height: 36px; min-width: 36px;
  border: 0; border-radius: 10px; background: none; color: var(--ink-2);
  font: inherit; font-size: var(--t-sm); font-weight: 600; cursor: pointer; padding: 0 8px;
}
.chat-x:hover { background: var(--panel-2); color: var(--ink); }
#chat-clear { margin-left: auto; }
.chat-log { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 14px var(--gutter); font-size: var(--t-sm); line-height: 1.6; }
.chat-log .m { margin: 0 0 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-log .m.me { margin-left: 15%; background: var(--chip); padding: 9px 13px; border-radius: 16px 16px 4px 16px; }
.chat-log .m.ai { white-space: normal; }
.chat-log .m.ai > :first-child { margin-top: 0; }
.chat-log .m.ai > :last-child { margin-bottom: 0; }
.chat-log .m.ai p { margin: 0 0 8px; }
.chat-log .m.ai :is(h1, h2, h3, h4, h5, h6) { margin: 12px 0 6px; font-size: var(--t-sm); font-weight: 700; }
.chat-log .m.ai :is(h1, h2) { font-size: var(--t-base); }
.chat-log .m.ai ul, .chat-log .m.ai ol { margin: 0 0 8px; padding-left: 1.3em; }
.chat-log .m.ai li { margin: 2px 0; }
.chat-log .m.ai li > ul, .chat-log .m.ai li > ol { margin: 2px 0 0; }
/* 표: 테두리·머리줄 바탕·줄 구분선. 넓으면 칸이 찌그러지지 않게 가로로 밀어 본다 */
.chat-log .m.ai .tbl { margin: 0 0 8px; overflow-x: auto; border: 1px solid var(--rule); border-radius: 10px; }
.chat-log .m.ai table { border-collapse: collapse; font-size: 13px; line-height: 1.45; min-width: 100%; }
.chat-log .m.ai th, .chat-log .m.ai td { padding: 6px 10px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--rule); word-break: keep-all; }
.chat-log .m.ai tr > :not(:last-child) { border-right: 1px solid var(--rule); }
.chat-log .m.ai tbody tr:last-child > * { border-bottom: 0; }
.chat-log .m.ai th { font-weight: 700; color: var(--ink-2); white-space: nowrap; background: var(--chip); }
.chat-log .m.ai td { font-feature-settings: "tnum"; }
.chat-log .m.ai code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; background: var(--chip); border-radius: 6px; padding: 1px 5px; }
.chat-log .m.ai pre { margin: 0 0 8px; padding: 10px 12px; background: var(--chip); border: 1px solid var(--rule);
  border-radius: 10px; overflow-x: auto; font-size: 13px; line-height: 1.5; }
.chat-log .m.ai pre code { background: none; padding: 0; }
.chat-log .m.ai blockquote { margin: 0 0 8px; padding-left: 10px; border-left: 3px solid var(--rule); color: var(--ink-2); }
.chat-log .m.ai hr { border: 0; border-top: 1px solid var(--rule); margin: 10px 0; }
.chat-log .m.ai a { color: var(--ink); text-decoration: underline; }
.chat-log .m.err { color: var(--warn); }
.chat-log .hint { color: var(--ink-3); }
.chat-log .dots::after { content: ""; animation: chat-dots 1.2s steps(4, end) infinite; }
@keyframes chat-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.chat-in { display: flex; gap: 8px; align-items: flex-end; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule-soft); }
.chat-in textarea { flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 12px 14px; font-size: var(--t-base); line-height: 1.45; resize: none; }
.chat-in .btn { flex: none; min-height: 48px; }

/* 폰에서 title 을 눌러 띄우는 말풍선(base.html) */
.tip {
  position: fixed; z-index: 60;
  max-width: min(320px, calc(100vw - 16px));
  padding: 8px 11px;
  font-size: var(--t-xs); font-weight: 500; line-height: 1.5;
  white-space: pre-line;
  color: var(--panel); background: var(--ink);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.18);
}
/* 어려운 말: 점선 밑줄. 누르면(마우스는 올리면) 위 말풍선에 쉬운 설명(app/glossary.py) */
.term {
  font: inherit; color: inherit; letter-spacing: inherit; text-align: inherit;
  margin: -4px 0; padding: 4px 0;           /* 손가락 닿는 높이만 늘린다 */
  background: none; border: 0; border-radius: 0; cursor: help;
  text-decoration: underline dotted; text-decoration-thickness: 1px;
  text-decoration-color: var(--ink-3); text-underline-offset: 3px;
}
.term:hover, .term[aria-expanded="true"] { text-decoration-color: currentColor; }
th[data-term] :is(a.sort, .th-t) { text-decoration: underline dotted; text-decoration-thickness: 1px;
  text-decoration-color: var(--ink-3); text-underline-offset: 3px; }
.tip.term-tip { white-space: normal; max-width: min(300px, calc(100vw - 16px)); word-break: keep-all; }
.tip.term-tip b { display: block; margin-bottom: 3px; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ── 규칙 ─────────────────────────────────────────────── */
/* 넓은 화면은 두 단으로 흘린다(카드 높이가 달라 격자보다 단이 덜 빈다). */
.rgrid { columns: 2 440px; column-gap: var(--gap); }
.rgrid > .box { break-inside: avoid; margin: 0 0 var(--gap); }
.rhead-box .facts { margin-top: 4px; }
.rl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.rl-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.rl-h b { font-size: var(--t-base); font-weight: 700; letter-spacing: -0.01em; word-break: keep-all; }
.rl-v { font-size: var(--t-base); font-weight: 800; white-space: nowrap; font-feature-settings: "tnum"; }
.rl-d, .rl-k { margin: 4px 0 0; font-size: var(--t-sm); line-height: 1.55; color: var(--ink-2); max-width: 68ch; word-break: keep-all; overflow-wrap: anywhere; }
.rl-k .kr {
  display: inline-flex; align-items: center; margin-right: 6px; padding: 3px 7px; border-radius: 999px;
  background: var(--chip); color: var(--ink); font-size: 12px; font-weight: 700; line-height: 1;
  vertical-align: 1px;
}
/* 출처 표시: 오닐에서 온 규칙. '한국'(바탕 칩)과 구분되게 테두리만 */
.rl-k .kr.org { background: none; box-shadow: inset 0 0 0 1px var(--rule); color: var(--ink-2); }
.tt { margin: 8px 0 0; padding-left: 1.5em; font-size: var(--t-sm); line-height: 1.7; columns: 2 220px; column-gap: 20px; }
.tt li { break-inside: avoid; }
.tt li::marker { color: var(--ink-3); font-weight: 600; }
@media (max-width: 719px) {
  .rgrid { columns: 1; }
  .rgrid > .box { margin-bottom: 10px; }
  .rl { gap: 16px; }
}

/* ── 장 마감 시황(결과 화면 시장 카드 안) ─────────────────── */
.mwrap { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.wr-day { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.wr-day b { font-size: var(--t-md); font-weight: 800; font-feature-settings: "tnum"; }
.wr-day .rmeta { margin: 0; }
.wr-one { margin: 0; font-size: var(--t-base); font-weight: 600; word-break: keep-all; }
.wr-list { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 6px;
  font-size: var(--t-sm); line-height: 1.55; color: var(--ink-2); word-break: keep-all; }
.wr-list li::marker { color: var(--ink-3); font-weight: 600; }
.wr-list .src { text-decoration: none; }
.wr-list .src:hover { text-decoration: underline; }
.wr-more > summary { cursor: pointer; font-size: var(--t-sm); font-weight: 600; color: var(--ink-2);
  list-style: none; padding: 4px 0; display: flex; align-items: center; gap: 8px; }
.wr-more > summary::-webkit-details-marker { display: none; }
.wr-more > summary::before {
  content: ""; width: 0; height: 0;
  border-left: 5px solid var(--ink-3); border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform 120ms;
}
.wr-more[open] > summary::before { transform: rotate(90deg); }
.wr-more .wr-list { margin: 6px 0 4px; }
.wr-more .facts { margin: 10px 0 4px; }
.wr-row { margin: 6px 0 0; font-size: var(--t-sm); line-height: 1.7; }
.wr-row .wr-k { color: var(--ink-3); margin-right: 8px; }
.wr-row a { color: var(--ink); text-decoration: none; font-weight: 600; }
.wr-row a:hover { text-decoration: underline; }

/* 일지 체결가 통화: 원은 칸 안 오른쪽, $ 는 칸 안 왼쪽. 시장을 모르면 아무것도 안 붙인다. */
.money-in { position: relative; display: block; }
.money-in input { width: 100%; }
.money-in .cur-pre, .money-in .cur-suf {
  display: none; position: absolute; top: 50%; transform: translateY(-50%);
  font-weight: 600; color: var(--ink-2); pointer-events: none;
}
.money-in .cur-pre { left: 14px; }
.money-in .cur-suf { right: 14px; }
.money-in[data-cur="$"] .cur-pre, .money-in[data-cur="원"] .cur-suf { display: block; }
.money-in[data-cur="$"] input { padding-left: 28px; }
.money-in[data-cur="원"] input { padding-right: 36px; }

/* 보유에서 바로 매도 기록 */
.jt .sell-lnk { margin-left: 8px; font-size: 12px; font-weight: 700; color: var(--down); text-decoration: none;
  padding: 2px 7px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--down); }
.jt .sell-lnk:hover { background: var(--down); color: var(--panel); }

/* 로그인 */
/* 로그인: 화면 한가운데. 폰은 다른 카드처럼 꽉 차게. */
.login-page { min-height: calc(100vh - 180px); justify-content: center; align-items: center; }
.login-box { width: 100%; max-width: 400px; padding: 28px; }
.login-box h2 { margin: 0 0 18px; font-size: var(--t-lg); font-weight: 800; letter-spacing: -0.02em; text-align: center; }
@media (max-width: 719px) {
  .login-page { min-height: 0; padding-top: 40px; }
  .login-box { max-width: none; padding: 28px var(--gutter); }
}
.login-form { display: grid; grid-template-columns: 1fr; gap: 12px; }
.login-form label { display: flex; flex-direction: column; gap: 6px; font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); }
.login-form .actions { padding-top: 4px; }
.login-form .actions .btn { width: 100%; }
.login-form .alert { margin: 0; padding: 12px 14px; border-radius: var(--radius); }
a.iconbtn { text-decoration: none; }

/* 결과 종류: 추세 | 가치. 같은 '결과' 메뉴 안의 두 화면(주소는 / 와 /value). */
.kindtabs { display: flex; gap: 18px; padding: 2px 2px 0; }
.kindtabs a {
  display: inline-flex; align-items: center; min-height: 40px;
  font-size: var(--t-md); font-weight: 800; letter-spacing: -0.02em;
  color: var(--ink-3); text-decoration: none;
}
.kindtabs a:hover { color: var(--ink-2); }
.kindtabs a.on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
@media (max-width: 719px) { .kindtabs { padding: 8px var(--gutter) 0; } }

/* 가치 결과 표: 탈락한 조건 칸은 흐리게, FCF 가점을 받은 칸은 진하게 */
.vscreen td.miss { color: var(--ink-3); }
.vscreen td.miss .sub-n { color: var(--ink-3); }
.vscreen td.hit { font-weight: 800; }
.vscreen .den { font-size: 12px; font-weight: 500; color: var(--ink-3); margin-left: 1px; }
.vscreen td.c-key b { font-weight: 800; }
.vscreen .flagpill { flex: none; }
@media (min-width: 1180px) {
  table.grid.vscreen th:nth-child(2)  { width: 92px; }    /* 종가 */
  table.grid.vscreen th:nth-child(3)  { width: 92px; }    /* 고점대비 + 저점 */
  table.grid.vscreen th:nth-child(4)  { width: 78px; }    /* PER + 기준 */
  table.grid.vscreen th:nth-child(5)  { width: 78px; }    /* PBR + 기준 */
  table.grid.vscreen th:nth-child(6)  { width: 58px; }    /* 점수 */
  table.grid.vscreen th:nth-child(7)  { width: 84px; }    /* 순차입(년) / ROE */
  table.grid.vscreen th:nth-child(8)  { width: 72px; }    /* 유동비율 */
  table.grid.vscreen th:nth-child(9)  { width: 78px; }    /* 이자보상 */
  table.grid.vscreen th:nth-child(10) { width: 72px; }    /* FCF */
  table.grid.vscreen th:nth-child(11) { width: 80px; }    /* 거래대금 */
  table.grid.vscreen th:nth-child(12) { width: 54px; }    /* 추세 */
}
@media (max-width: 1179px) {
  /* 폰: 1행 이름·종가, 2행 고점대비·PER·PBR·점수(크게), 3행 나머지 여섯(작게) */
  table.grid.vscreen td.c-key .sub-n { display: none; }
  table.grid.vscreen td.c-stat:not(.c-key) { grid-column: span 2; padding-top: 6px; font-size: var(--t-sm); font-weight: 600; }
}
/* 가치 결과(카드가 되는 폭): 숫자 두 줄 중 하나만 -- 싼가 | 버틸 힘. 시장 알약 탭과 같은 모양.
   스크립트가 table 에 data-v 를 달아야 줄이 숨는다(없으면 두 줄 다). */
.vswitch { display: flex; gap: 4px; padding: 4px; margin: 0 0 4px; background: var(--chip); border-radius: 14px; }
.vswitch button {
  flex: 1; min-height: 36px; border: 0; border-radius: 10px; background: none; cursor: pointer;
  font: inherit; font-size: var(--t-sm); font-weight: 600; color: var(--ink-2);
}
.vswitch button:hover { color: var(--ink); }
.vswitch button[aria-pressed="true"] { background: var(--panel); color: var(--ink); font-weight: 700; }
.vswitch button:active { transform: scale(0.98); }
.vswitch button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .vswitch button { transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1); }
}
@media (min-width: 1180px) { .vswitch { display: none; } }
@media (max-width: 1179px) {
  table.grid.vscreen[data-v="cheap"] td.c-stat:not(.c-key) { display: none; }
  table.grid.vscreen[data-v="hold"] td.c-key { display: none; }
}
.ctl-head .lab { color: var(--ink-2); }
.ctl-head .lab.off { color: var(--warn); }

/* 종목 상세 · 가치 판정: 조건마다 한 줄(통과/탈락 · 묶음 · 조건 · 값) */
.vcheck { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 2px; }
.vcheck li { display: grid; grid-template-columns: 22px 34px minmax(0, 1fr) auto; align-items: center; gap: 8px;
  padding: 7px 4px; border-radius: 10px; font-size: var(--t-sm); }
.vcheck li:nth-child(odd) { background: var(--panel-2); }
.vcheck .mk { display: inline-flex; }
.vcheck .mk .ico { width: 18px; height: 18px; stroke-width: 2.4; }
.vcheck li.ok .mk { color: var(--ink); }
.vcheck li.no .mk { color: var(--warn); }
.vcheck .g { font-size: 12px; font-weight: 700; color: var(--ink-3); }
.vcheck .t { color: var(--ink-2); word-break: keep-all; }
.vcheck b { font-weight: 800; white-space: nowrap; font-feature-settings: "tnum"; }
.vcheck li.no b { color: var(--warn); }
.vdecide .kv.big .stage { align-self: flex-start; margin-top: 4px; }
.vdecide .den { font-size: var(--t-sm); font-weight: 500; color: var(--ink-3); margin-left: 1px; }
.vdil { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; font-size: var(--t-sm); }
.vdil li { display: flex; gap: 8px; align-items: center; }

/* 가치 시나리오(네 질문): 질문마다 소제목, 그 아래 두 칸 또는 목록 */
.vs-q { margin: 18px 0 8px; font-size: var(--t-base); font-weight: 800; letter-spacing: -0.01em; }
.vs-q .muted { margin-left: 4px; font-size: var(--t-sm); font-weight: 500; }
.vs-one { margin: 8px 0 0; }
.vs-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: var(--t-sm); line-height: 1.6; }
#vscen-box .side h4 { font-size: var(--t-sm); color: var(--ink-2); }
#vscen-box .vs-one { font-size: var(--t-base); font-weight: 600; line-height: 1.6; word-break: keep-all; }
#vscen-box > .none, #vscen-box .vs-q + .none { margin: 0; font-size: var(--t-sm); color: var(--ink-3); }
/* 가치 시나리오의 '다음에 볼 것' 목록도 근거 링크를 양쪽 칸과 같은 모양으로 */
#vscen-box .vs-list a.pt { color: inherit; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
#vscen-box .vs-list a.pt:hover, #vscen-box .vs-list a.pt:focus-visible { text-decoration-color: var(--ink-2); }
#vscen-box .vs-list a.refn { margin-left: 3px; padding: 0 3px; font-size: 12px; color: var(--ink-3); text-decoration: none; vertical-align: super; }
#vscen-box .vs-list .when { margin-left: 2px; font-size: 12px; color: var(--ink-3); white-space: nowrap; }

/* 추적(종목 상세·/watch): 항목마다 주제, 지금 상태, 최근 기록 */
.wt { padding: 12px 0; border-top: 1px solid var(--rule); }
.wt:first-of-type { border-top: 0; padding-top: 4px; }
.wt.off { opacity: .6; }
.wt-topic { margin: 0 0 4px; font-weight: 700; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere; }
.wt-topic .muted { margin-left: 4px; font-size: var(--t-sm); font-weight: 500; }
.wt-done { margin-left: 4px; font-size: var(--t-sm); font-weight: 600; color: var(--up); }
.wt-state { margin: 0 0 6px; font-size: var(--t-sm); line-height: 1.6; color: var(--ink-2); word-break: keep-all; }
.wt-log { margin: 0 0 8px; }
.wt-log .when { margin-right: 4px; font-size: 12px; color: var(--ink-3); }
.wt-log a.refn { margin-left: 3px; padding: 0 3px; font-size: 12px; color: var(--ink-3); text-decoration: none; vertical-align: super; }
.wt-form { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rule); }
.wt-form .actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wt-form .actions .btn { flex: none; }
.wt-form .actions .muted { font-size: var(--t-sm); }
.wt-quick { margin-left: 6px; }
.wt-quick .x, .wt-on { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--chip); color: var(--ink-2); text-decoration: none; border: 0; cursor: pointer; white-space: nowrap; }
/* .x 의 40px 최소 높이(표 안 버튼용)를 풀어 '추적 중' 칩과 같은 크기로 */
.wt-quick .x { display: inline-block; min-height: 0; line-height: 1.5; vertical-align: 1px; }
.wt-on { margin-left: 6px; color: var(--up); }

/* 화면 탭(종목 상세·결과·브리핑): 한 화면의 묶음을 하나씩 보인다. 앱바 밑에 붙어 따라오고,
   스크립트가 없으면 그냥 목차 링크이고 패널은 모두 펼쳐진다(base.html 스크립트). */
.ptabs {
  position: sticky; top: 57px; z-index: 20;
  display: flex; gap: 4px; padding: 4px; overflow-x: auto; scrollbar-width: none;
  background: var(--rule); border-radius: 14px;   /* 페이지 회색 위라 시장 탭(.mrow .mtabs)처럼 한 칸 진하게 */
}
.ptabs::-webkit-scrollbar { display: none; }
.ptabs a {
  flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 16px; border-radius: 10px;
  font-size: var(--t-base); font-weight: 600; color: var(--ink-2); text-decoration: none; white-space: nowrap;
}
.ptabs a:hover { color: var(--ink); }
.ptabs a:active { transform: scale(0.98); }
.ptabs a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .ptabs a { transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1); }
}
.ptabs a[aria-selected="true"] { background: var(--panel); color: var(--ink); font-weight: 700; }
@media (max-width: 719px) {
  .ptabs { top: 53px; border-radius: 0; padding: 6px var(--gutter); background: var(--panel); border-bottom: 1px solid var(--rule); }
  .ptabs a { min-height: 36px; padding: 0 12px; font-size: var(--t-sm); }
  .ptabs a[aria-selected="true"] { background: var(--ink); color: var(--panel); }
}

/* 메타 줄의 가름: 가운뎃점 대신 가는 세로선 */
.hsep { display: inline-block; width: 1px; height: 0.85em; margin: 0 8px; background: var(--rule); vertical-align: -0.08em; }

/* 탭 안(패널): 카드 사이는 본문과 같은 간격 */
.ppanel { display: flex; flex-direction: column; gap: var(--gap); }
@media (max-width: 719px) { .ppanel { gap: 10px; } }

/* 지난 브리핑의 '나머지 N건 보기'는 한 줄로 */
.older-btn { white-space: nowrap; }

/* 브리핑 종목 탭: 이름 옆에 지뢰·확인 개수(작게). 고른 탭 위에서는 글자색을 따른다. */
.btabs a { gap: 6px; }
.btabs .tn { font-size: 12px; font-weight: 700; color: var(--ink-3); }
.btabs .tn.block { color: var(--warn); }
.btabs a[aria-selected="true"] .tn { color: inherit; }

/* 종목 찾기(search.html) */
.srch { display: flex; gap: 8px; }
.srch input { flex: 1; min-width: 0; min-height: 40px; padding: 0 12px; font: inherit; font-size: 16px;
  border: 1px solid var(--rule); border-radius: 10px; background: var(--panel); color: var(--ink); }
.srch-list { list-style: none; margin: 8px 0 0; padding: 0; }
.srch-list li a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 12px 2px;
  border-top: 1px solid var(--rule); color: inherit; text-decoration: none; }
.srch-list li:first-child a { border-top: 0; }
.srch-list .nm { font-weight: 600; }
.srch-list .muted { font-size: var(--t-sm); }

/* 관심 목록(interest.html) */
.lk-item { display: flex; flex-direction: column; gap: 8px; }
.lk-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.lk-h .nm { font-size: var(--t-md); font-weight: 700; color: var(--ink); text-decoration: none; }
.lk-h .muted { font-size: var(--t-sm); }
.lk-h .px { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.lk-item .chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.lk-item a.flagpill { text-decoration: none; }
.lk-fail { margin: 0; font-size: var(--t-sm); }
.lk-scen { list-style: none; margin: 0; padding: 0; }
.lk-scen a { display: block; padding: 8px 0; border-top: 1px solid var(--rule); color: var(--ink-2);
  text-decoration: none; font-size: var(--t-sm); line-height: 1.5; }
.lk-scen .k { font-weight: 700; color: var(--ink); margin-right: 6px; }
.lk-scen .when { color: var(--ink-3); font-variant-numeric: tabular-nums; margin-right: 4px; }
.lk-f { display: flex; align-items: center; justify-content: space-between; font-size: var(--t-sm); }