/* ═══════════════════════════════════════════════════════════
   MI 공용 베이스 스타일 — 모든 화면이 이 파일을 링크한다.
   페이지 파일에는 페이지 전용 스타일만 남긴다.
   기준: MI/00_공통/06_UI표준.md
   ═══════════════════════════════════════════════════════════ */

/* ── 토큰 ─────────────────────────────────────────────────── */
:root {
  --ink:   #111318;   /* 본문 */
  --ink-2: #4e535e;   /* 보조 */
  --ink-3: #6f747d;   /* 약한 텍스트 — 흰 바탕 대비 5.0:1 (WCAG AA 충족, 구 #8d919b는 3.1:1 미달) */
  --ink-4: #b6b9c0;   /* 장식·비활성 전용 — 텍스트 정보 전달에 사용 금지 (대비 2.1:1) */

  /* 타입 스케일 4단 — 토스증권·TDS 관찰 기반. 이 4단 외 크기 신설 금지 */
  --fs-display: 20px; /* 페이지 제목 · 핵심 숫자 */
  --fs-title:   13px; /* 카드 제목 · 행 제목 */
  --fs-body: 12.5px;  /* 본문 · 시사점 */
  --fs-cap: 10.5px;   /* 메타 · 출처 · 라벨 (하한 — 9.5px 폐지) */
  --line:  #e7e8ea;   /* 실선 */
  --line-2:#f0f1f3;   /* 약한 구분선 */
  --hover: #fafafa;
  --pt:    #FF6600;   /* 키 컬러. 원색만 — 톤다운·투명도 변형 금지. 현재 위치 + 페이지당 최대 1곳 */
  --opp:   #2A78D6;   /* 기회 시맨틱 — 우리가 진입할 수 있는 공백·기회에만. 텍스트·셀 채움까지, 넓은 배경 면 금지 */
  --crit:  #c0392b;   /* 실제 경고(기한 임박·수집 실패)에만 */
  --keep:  #b54708;   /* 보관(담아둠) 시맨틱 — 판정이 아니라 「나중에 쓰겠다」는 표시에만. 흰 바탕 대비 5.9:1 */

  /* 꺾이는 지점 4단 — 이 외의 값 신설 금지. design/정책/레이아웃-규격.md §4
     ※ @media 안에서는 var() 를 못 쓴다. 아래 숫자를 직접 적는다. */
  --bp-wide:   1280px; /* 3칸 → 2칸. 보조 패널 숨김 */
  --bp-mid:    1024px; /* 2칸 → 1칸. 표는 가로 스크롤 */
  --bp-narrow:  820px; /* LNB 폭 축소 — 숨기지 않는다 */
  --h-fold:     720px; /* 첫 화면 세로 기준 */
}

/* ── 베이스 ───────────────────────────────────────────────── */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", "Malgun Gothic", sans-serif;
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  overflow-wrap: break-word;
}
a { color: inherit; text-decoration: none; }

/* 기준 폭 — 설계 기준 1536px. 좌정렬 기본(중앙 정렬 금지), 아래로는 유동.
   1920 모니터 × 배율 125% → 1920 ÷ 1.25 = 1536 CSS픽셀. 자세한 근거는 design/정책/레이아웃-규격.md */
.shell {
  max-width: 1536px;
  margin: 0;
  padding: 24px 28px 40px;
}

/* ── 라벨 (붙임 정보. 클릭 안 됨) ─────────────────────────── */
.lb {
  font-size: var(--fs-cap); font-weight: 800; letter-spacing: .02em;
  border: 1px solid var(--line); color: var(--ink-2);
  border-radius: 4px; padding: .5px 6px;
  white-space: nowrap; display: inline-block;
}
.lb.solid  { background: var(--ink); border-color: var(--ink); color: #fff; }
.lb.strong { border-color: var(--ink-3); color: var(--ink); }
.lb.crit   { border-color: var(--crit); color: var(--crit); }

/* ── 필터 칩 (배타 선택. 클릭 됨) ─────────────────────────── */
.chip {
  font: inherit; font-size: var(--fs-body); font-weight: 600;
  color: var(--ink-2); background: #fff;
  border: 1px solid var(--line); border-radius: 16px;
  padding: 5px 13px; cursor: pointer;
}
.chip small { color: var(--ink-3); font-weight: 600; margin-left: 3px; font-variant-numeric: tabular-nums; }
.chip:hover { border-color: var(--ink-3); color: var(--ink); }
.chip.on { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 700; }
.chip.on small { color: #c9cbd1; }

/* ── 행 액션 버튼 (텍스트. 아이콘 쓰지 않음) ──────────────── */
.act {
  font: inherit; font-size: var(--fs-body); font-weight: 700;
  color: var(--ink-2); background: #fff;
  border: 1px solid var(--line); border-radius: 7px;
  padding: 5px 12px; min-height: 28px; cursor: pointer;
}
.act:hover { border-color: var(--ink-3); color: var(--ink); background: var(--hover); }
.act + .act { margin-left: 6px; }

/* ── 주요 버튼 ────────────────────────────────────────────── */
.btn {
  font: inherit; font-size: var(--fs-body); font-weight: 700;
  color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: 7px;
  padding: 6px 14px; cursor: pointer;
}
.btn:hover { border-color: var(--ink-3); background: var(--hover); }
.btn.primary { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ── 카드 ─────────────────────────────────────────────────── */
.card { border: 1px solid var(--line); border-radius: 10px; padding: 15px 17px; min-width: 0; background: #fff; }

/* ── 테이블 공통 ──────────────────────────────────────────── */
.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.tbl th {
  text-align: left; font-size: var(--fs-cap); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 800; padding: 8px 9px;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: #fff; z-index: 1; white-space: nowrap;
}
.tbl td { padding: 12px 10px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.tbl tbody tr:hover td { background: var(--hover); }
.tbl tr[hidden] { display: none; }
.tbl-wrap { overflow-x: auto; }

/* 상태 행 — 신규 없음(회색) / 수집 실패(빨강) */
.tbl tr.st td { color: var(--ink-4); font-size: var(--fs-cap); }
.tbl tr.st .t { font-weight: 600; color: var(--ink-3); }
.tbl tr.st.fail .t { color: var(--crit); }

/* ── 섹션 헤더 ────────────────────────────────────────────── */
.sec-h { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.sec-h h2 { font-size: var(--fs-title); margin: 0; letter-spacing: -.01em; }
.sec-h .d { font-size: var(--fs-cap); color: var(--ink-3); }
.sec-h .n { margin-left: auto; font-size: var(--fs-cap); color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ── 제목 보조 설명 (d1) — 카드 제목의 "— 부제"를 분리한 슬롯 ── */
/* 제목(Title 13~15/700+) 옆 인라인. em-dash 문자로 잇지 않고 크기·회색 위계로 구분 */
.h-d1 { font-size: var(--fs-cap); font-weight: 500; color: var(--ink-3); letter-spacing: 0; }

/* ── 출처 컴포넌트 — 모든 근거 표기 공용 ──────────────────── */
/* 구성: [출처 캡션] + 링크·텍스트 목록(· 구분) + 우측 신호 ID
   링크 가능한 출처만 a로. 링크 없는 출처는 plain text — 가짜 링크 금지 */
.src { display: block; font-size: var(--fs-cap); color: var(--ink-3); }
.src a { text-decoration: underline dotted; text-underline-offset: 2px; }
.src a:hover { color: var(--ink); text-decoration-style: solid; }

/* 신호 ID — SIG-YYMM-NNN. 펼침 상세·출처 행 우측에만 표기 */
.sid { float: right; font-size: var(--fs-cap); font-weight: 600; color: var(--ink-3);
       font-variant-numeric: tabular-nums; letter-spacing: .03em; }

/* ── 시그널 행 펼침 컴포넌트 — 06_UI표준 "시그널 행 펼침" ──── */
/* 신호 1건 = details.sig[data-signal-id]. 접힘 기본(페이지가 open 지정 가능) */
details.sig { min-width: 0; }
details.sig > summary { list-style: none; cursor: pointer; position: relative; padding-right: 46px; display: block; }
details.sig > summary::-webkit-details-marker { display: none; }
.tgl { position: absolute; right: 0; top: 1px; font-size: var(--fs-cap); font-weight: 600; color: var(--ink-3); }
.tgl::after { content: "더보기"; }
details[open] > summary .tgl::after { content: "접기"; }
details.sig > summary:hover .tgl { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

/* 시그널 d1 — 제목 아래 한 줄 요약 (h1·d1 구조의 시그널판) */
.s-d1 { display: block; font-size: var(--fs-cap); font-weight: 500; color: var(--ink-3); margin-top: 3px; line-height: 1.5; }

/* 시사점 · 영향 · 지표 · 출처 펼침 영역 */
.imp-bar { display: block; background: var(--hover); border-radius: 8px; padding: 9px 12px; margin-top: 7px; }
.imp-cap { font-size: var(--fs-cap); font-weight: 800; letter-spacing: .07em; color: var(--ink-4); text-transform: uppercase; margin-right: 7px; }
.dir { font-size: var(--fs-body); font-weight: 800; margin-right: 6px; }
.dir.up { color: var(--opp); }
.dir.dn { color: var(--ink); }
.dir.chk { color: var(--ink-3); }
.imp-txt { font-size: var(--fs-title); font-weight: 700; color: var(--ink); }
.imp-aff { display: block; margin-top: 5px; font-size: var(--fs-cap); color: var(--ink-3); }
.imp-chip { display: inline-block; font-size: var(--fs-cap); font-weight: 700; color: var(--ink-2);
            border: 1px solid var(--line); border-radius: 10px; padding: 1px 8px; margin-left: 4px; background: #fff; }
.imp-ind { display: block; margin-top: 5px; font-size: var(--fs-cap); color: var(--ink-3); }
.imp-ind b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; margin-left: 4px; }
.imp-bar .src { margin-top: 6px; }

/* ── LNB 자리 (공통 LNB 주입 전 vacant) ───────────────────── */
.app-vac { display: grid; grid-template-columns: 246px 1fr; min-height: 100vh; }
.lnb-slot { border-right: 1px solid var(--line); }   /* 내용 없음 — 공통 LNB 주입 예정 */
/* 1024 이하 — 2칸을 1칸으로. LNB 는 그대로 둔다 */
@media (max-width: 1024px) { .app-vac { grid-template-columns: 1fr; } }

/* ── 반응형 기준점 ────────────────────────────────────────── */
/* 1180px 이하: 다열 그리드를 1~2열로 축소. 820px 이하: 전면 스택 */