/* KiwoomLens — 공통 테마 (DESIGN.md / Stripe 계열 시각언어 이식본)
   토큰 정본 = 이 :root + html[data-theme="dark"]. 변수 값만 바꾸면 전 화면이 따라온다.
   원칙: 순백 카드 + 차가운 오프화이트 캔버스 · 글자는 딥네이비 잉크(순검정 금지) ·
        강조는 인디고 알약 하나 · 카드는 푸른기 도는 옅은 그림자로 살짝 띄운다 ·
        금액/비율/연도는 전부 tabular-nums.
   ⭐웨이트 정책 (2026-07-30 재결정 — DESIGN.md §Typography 원칙 1 정본):
        로고(brand) = 600 · 제목(20px 이상) = 600 · **대형 지표 숫자(KPI·metric) = 700** ·
        본문 = 400 · 버튼·라벨 = 500.
        → 원본(Stripe)의 얇음(300)은 채택하지 않는다. 가져오는 것은 색·기하·tabular-nums·헤어라인
        체계이고, 웨이트는 기존 사용자의 판독 습관을 따른다. 핵심 지표는 상세 도입부에 핵심 정보를
        모아둔 영역이라 "한 번에 눈에 들어오는" 굵기가 우선(300 은 깔끔하지만 직관성을 잃는다).
        로고는 제목과 같은 600 (2026-07-30 — 제목이 600 이 되어 500 로고가 상대적으로 얇아 보였다).
   ⭐제목 자간: 한글 제목은 -0.01em 까지만(600 에서 더 좁히면 글자가 뭉친다).
        지표 숫자는 -0.02em (700 에서 -0.03em 은 자릿수가 붙어 판독을 해친다).
   ⭐경계 정책 (2026-07-30): 헤어라인 4단(--border-soft/--border/--border-table/--border-strong).
        표 행 구분선·KPI 칸 경계는 --border-table 로 또렷하게, 열 구분선은 --border 로 약하게.
        그림자로 구분감을 내지 않는다(정지 카드에 그림자 추가 금지 — 선으로만).
   ⭐면 정책 (2026-07-30): 카드 안의 칸·카드(KPI 칸·특징 카드 그리드)는 --surface-inset 으로
        면을 한 단계 눌러 부모 카드와 구분한다(면 + 표급 헤어라인, 그림자 없음).
        보조 정보 블록(card-quiet: 사용량·드롭존·빈 상태)은 --bg(canvas-soft) 그대로.
   ⚠️ primary 를 브랜드 블루(#0072BC)로 되돌리려면 --accent 계열 3줄만 교체하면 된다. */

:root {
  /* ===== 면(Surface) — 순백 카드 + 차가운 오프화이트 캔버스 ===== */
  --bg: #f6f9fc;              /* canvas-soft — 페이지 바탕·표 헤더 */
  --bg-elev: #ffffff;         /* canvas — 카드·상단바 */
  --bg-elev2: #eef3f9;        /* canvas-sunken — 눌린 면(활성 배경·보조 블록) */
  --surface-soft: #f6f9fc;    /* 행 hover·조용한 구획 */
  /* 카드 안의 칸·카드 면(KPI 칸·특징 카드 그리드). 라이트는 canvas-sunken 그대로 눌러 쓴다.
     흰 카드면(#ffffff) 대비 명도비 1.12 — 라이브(1.08)보다 오히려 또렷하다. */
  --surface-inset: #eef3f9;
  --cream: #f7efdf;           /* canvas-cream — 강조 배너 1종 전용 */
  /* 헤어라인 4단 — 약→강. 경계는 선으로만 낸다(정지 카드에 그림자 추가 금지).
     대비는 카드면(--bg-elev) 기준 명도비: soft 1.12 < 기본 1.23 < 표 1.61 < 입력 1.82 */
  --border: #e3e8ee;          /* hairline — 기본 카드·섹션 경계 */
  --border-soft: #eef2f7;     /* hairline-soft — 조용한 내부 구획(보조 divider·quiet 카드) */
  --border-table: #c0cddd;    /* hairline-table — 표 행 구분선·KPI 칸 경계(또렷하되 튀지 않게) */
  --border-strong: #a8c3de;   /* hairline-input — 입력·점선·hover 강조(가장 또렷, 살짝 푸른 기) */
  /* ===== 글자(Ink) — 딥네이비. 순검정 금지 / 본문에 흐린 색 금지(고가시성) ===== */
  --text: #0d253d;            /* ink — 본문·제목 */
  --muted: #273951;           /* ink-secondary — 보조 본문·표 헤더 */
  --dim: #5a6b85;             /* ink-mute — 3차·라벨(캡션 전용) */
  --placeholder: #94a3b8;     /* placeholder 전용 — 본문에 쓰지 않는다 */
  /* ===== 강조 — 인디고(primary) ===== */
  --accent: #533afd;          /* primary */
  --accent-deep: #4434d4;     /* primary-deep — 사이드바 활성 글자 */
  --accent-press: #2e2b8c;    /* primary-press — 눌림 */
  --accent-soft: #665efd;     /* primary-soft */
  --primary-subdued: #e8e6ff; /* 배경 틴트 — 활성 메뉴·포커스 링·정보 배너 */
  --on-accent: #ffffff;       /* 인디고 면 위 글자 */
  --accent2: #ea2261;         /* ruby — 소수 하이라이트(버튼 채움 금지) */
  --brand-blue: #0072BC;      /* DAOU KIWOOM 브랜드 블루 — 로고·차트 계열 한정 */
  --navy: #1c1e54;            /* brand-navy — 로고 'Lens'·딥 포인트 */
  /* ===== 의미색 (주가 등락 한국 관례: 상승=--neg 루비 / 하락=--accent 인디고) ===== */
  --pos: #0f8a5f;             /* success */
  --neg: #d5194b;             /* error = 주가 상승 */
  --gold: #9b6829;            /* warning(lemon) */
  --star: #F5C518;            /* 즐겨찾기 별 */
  /* ===== 차트 시리즈 — 다계열은 c1→c5 순서 배정, 팔레트 밖 hex 금지 ===== */
  --c1: #533afd;
  --c2: #0f8a5f;
  --c3: #9b6829;
  --c4: #0072BC;
  --c5: #ea2261;
  /* ===== 분류 틴트 + 짝 잉크 (배지·칩 전용. 배경만 틴트 쓰고 회색 글자 금지) ===== */
  --tint-indigo: #e8e6ff;   --tint-indigo-ink: #3b2bb8;
  --tint-sky: #e0edfa;      --tint-sky-ink: #1c5286;
  --tint-mint: #dff3e8;     --tint-mint-ink: #136c42;
  --tint-amber: #fbeed6;    --tint-amber-ink: #7d5411;
  --tint-rose: #fce3ec;     --tint-rose-ink: #a51c4c;
  --tint-gray: #eef2f7;     --tint-gray-ink: #4a5b73;
  /* CBT 표기 전용 잉크(2026-08-12) — 로고 옆 'Beta' 와 상단 안내 문구가 **같은 색**이어야 한 세트로 읽힌다.
     둘 다 var(--beta-ink) 만 쓴다. 색을 바꿀 일이 생기면 여기 한 줄만 고친다. */
  --beta-ink: #EC008C;
  /* ===== 라운드 — 버튼·배지·검색창은 알약(사각 버튼 금지) / 카드 12px / 입력 6px ===== */
  --r-xs: 4px;                /* 미세 칩 */
  --r-sm: 6px;                /* 입력·선택 */
  --r-md: 8px;                /* 게시판 행·배너 */
  --r-lg: 12px;               /* 카드·섹션·모달 */
  --r-xl: 16px;               /* 큰 패널 */
  --r-pill: 9999px;           /* 버튼·배지·필터 칩·검색창 */
  --radius: 12px;             /* 레거시 별칭 = --r-lg */
  --radius-sm: 8px;           /* 레거시 별칭 = --r-md */
  /* ===== 그림자 3단 — 푸른기 rgba(0,55,112,…). 회색·검정 그림자 금지 ===== */
  --shadow-card: 0 1px 3px rgba(0,55,112,0.08);                                  /* 기본 카드 */
  --shadow-raised: 0 8px 24px rgba(0,55,112,0.08), 0 2px 6px rgba(0,55,112,0.04); /* 드롭다운·사이드패널 */
  --shadow-overlay: 0 16px 48px -8px rgba(0,55,112,0.18);                        /* 모달 */
  /* 서명 요소 — 그라데이션 메시(로그인 배경·홈 환영 배너 한정. 데이터 화면 금지) */
  --gradient-mesh: linear-gradient(100deg, #f7efdf 0%, #f3ddd0 18%, #e4dcf6 42%, #e8e6ff 62%, #f7dfeb 82%, #ffffff 100%);
  /* 크롬(상단바·점프바) 배경 — 테마별 교체 */
  --topbar-bg: #ffffff;
  --jumpnav-bg: rgba(255,255,255,0.96);
}

/* ===== 다크 모드 (딥네이비 #0b1524 계열) — 토글로만 적용, 기본은 라이트 =====
   파스텔 틴트는 그대로 쓰면 눈부시므로 채도를 낮추고 잉크를 밝게 뒤집는다. */
html[data-theme="dark"] {
  --bg: #0b1524;              /* dark-canvas */
  --bg-elev: #12203a;         /* dark-surface */
  --bg-elev2: #0d1a2e;        /* dark-sunken */
  --surface-soft: #182a48;    /* dark-surface-soft — 행 hover */
  /* ⭐다크에서는 칸 면을 '눌러서'(더 어둡게) 두지 않고 '들어서'(더 밝게) 쓴다 — 2026-07-30 판단.
     카드면 #12203a 기준 명도비: 눌린 면(#0d1a2e) 1.07 < 들린 면(#182a48) 1.13 이고,
     라이브 다크도 칸 면(#1C222D)이 카드면(#151A23)보다 밝은 구조(1.09)였다.
     즉 다크에서 면 관계를 뒤집는 쪽이 칸 구분이 더 잘 되고 기존 사용자 인상과도 맞는다. */
  --surface-inset: #182a48;
  --cream: #2b2317;
  /* 헤어라인(다크) — 2026-07-30 상향. 종전 값(#1d2f4c/#16273f/#24395c)은 카드면 #12203a 와
     명도비 1.08~1.40 로 사실상 보이지 않아 KPI 칸·표 구분선이 사라졌다.
     카드면 기준 명도비: soft 1.29 < 기본 1.56 < 표 1.85 < 입력 2.26
     (라이브 main 비교 — soft 1.18 / 기본 1.33 / 표·입력 1.84. 표 구분선은 라이브와 동급) */
  --border: #2a4064;
  --border-soft: #213450;
  --border-table: #314b74;
  --border-strong: #3c5884;
  --text: #e6edf7;            /* dark-ink */
  --muted: #c2cfe2;
  --dim: #9fb0c9;             /* dark-ink-mute */
  --placeholder: #7a8ca6;
  --accent: #8b7dff;          /* dark-primary — 어두운 면에서 대비 확보를 위해 밝힌 인디고 */
  --accent-deep: #a99dff;
  --accent-press: #6f5ff0;
  --accent-soft: #a99dff;
  --primary-subdued: #23305c;
  --on-accent: #0b1524;       /* 밝은 인디고 면 위에는 딥네이비 글자가 또렷하다 */
  --accent2: #ff6b8a;
  --brand-blue: #3f9be0;
  --navy: #a9b8f5;            /* 다크에서 'Lens'가 보이도록 밝게 */
  --pos: #3fc48d;
  --neg: #ff6b8a;
  --gold: #d8a45e;
  --star: #F5C518;
  --c1: #8b7dff;
  --c2: #3fc48d;
  --c3: #d8a45e;
  --c4: #4d9fe0;
  --c5: #ff6b8a;
  --tint-indigo: #23204a;   --tint-indigo-ink: #bdb4ff;
  --tint-sky: #16304d;      --tint-sky-ink: #8fc4ee;
  --tint-mint: #123328;     --tint-mint-ink: #6fd3a5;
  --tint-amber: #362a15;    --tint-amber-ink: #e0b877;
  --tint-rose: #3a1c2b;     --tint-rose-ink: #f79ab6;
  --tint-gray: #1c2b44;     --tint-gray-ink: #b7c4d8;
  --beta-ink: #FF6FB5;      /* 다크 배경 대비 확보 */
  --shadow-card: 0 1px 3px rgba(0,0,0,0.42);
  --shadow-raised: 0 8px 24px rgba(0,0,0,0.46), 0 2px 6px rgba(0,0,0,0.30);
  --shadow-overlay: 0 16px 48px -8px rgba(0,0,0,0.62);
  --gradient-mesh: linear-gradient(100deg, #1d2436 0%, #232130 18%, #23204a 42%, #2b2870 62%, #3a1c2b 82%, #12203a 100%);
  --topbar-bg: #12203a;
  --jumpnav-bg: rgba(18,32,58,0.96);
}
/* 랜딩(메인 메뉴)은 body.landing-light 로 라이트를 강제하므로, 다크일 때 하드코딩 흰색만 보정(특이도 우선) */
html[data-theme="dark"] body.landing-light .topbar { background: var(--topbar-bg); box-shadow: none; }
html[data-theme="dark"] body.landing-light .navlink { background: var(--bg-elev); box-shadow: none; }
html[data-theme="dark"] body.landing-light .menu-card,
html[data-theme="dark"] body.landing-light .menu-card:hover { background: var(--bg-elev); border-color: var(--border); }

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Pretendard', 'Pretendard Variable', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Malgun Gothic', sans-serif;
  font-size: 17px;             /* DESIGN.md body — 고연령 가독성 기준(최소 13px) */
  font-weight: 400;            /* ⭐본문 400 · 제목 600 · 지표값 700 (300 은 이 시스템에서 쓰지 않는다) */
  line-height: 1.7;            /* 한글은 라틴보다 넉넉하게 */
  letter-spacing: 0;           /* 음수 자간은 숫자·지표 쪽에 집중 */
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;        /* 한국어 단어(고유명사 포함) 중간 잘림 금지 — 어절 단위로만 줄바꿈 */
  overflow-wrap: normal;
}

/* ⭐ keep-all 예외 — AI 생성 본문 컨테이너 (2026-08-18 아이폰 가로 넘침 신고)
   전역 keep-all + overflow-wrap:normal 은 **띄어쓰기에서만** 줄바꿈한다. AI 문장·수집값에는
   공백 없이 길게 이어지는 덩어리가 흔해서, 그게 그리드 트랙(1fr = minmax(auto,1fr) — auto 의
   최소값은 min-content)을 밀어 카드 → 본문 → 페이지 순으로 뷰포트보다 넓어진다.
   실측(Chrome 16px 기준 min-content):
     · 홈페이지 URL 89자 = 367px  · 구분자 0개 사명 나열 35자 = 452px
     · '알리고·가비아·이동통신3사(SKT·KT·LG유플러스)' 29자 = Chrome 140px(가운뎃점·괄호를
       줄바꿈 기회로 인정) / **iOS Safari 는 인정하지 않아 311px 통째** → 신고가 아이폰에서만 났다.
   390px 폰에서 섹션 안쪽 가용폭은 294px 뿐이라 셋 다 넘친다(수정 전 실측: 뷰포트 375px 에
   document.scrollWidth 580px).
   ⚠️ **PC 창 줄이기로 재현이 안 된 진짜 이유는 창 폭 하한이 아니라 브라우저 차이**다 —
      가운뎃점 나열은 Chrome 이 알아서 접어(140px) 어떤 폭에서도 안 터진다. 신고 화면을
      PC 에서 재현하려면 iOS Safari 실기기가 필요하다(단, URL 케이스는 Chrome 745px 에서도
      터졌다 — scrollWidth 825px. 즉 모바일 전용 문제가 아니었다).
   → 전역 keep-all 은 그대로 두고(한글 가독성 방침 · 고연령 사용자층), AI 본문 컨테이너에만 예외를 준다.
     anywhere 는 '다른 줄바꿈 기회로는 줄에 못 담을 때'만 글자 사이를 끊으므로, 공백이 있는
     평범한 한글 문장의 줄바꿈 위치는 수정 전후가 완전히 같다(실측 확인). 선례 = .fb-title(피드백 제목).
   ⚠️ 표는 제외한다(바로 아래 복원 규칙) — 이 컨테이너 안의 <table> 은 전부 overflow-x:auto
      래퍼 안에 있고, 가로 스크롤이 의도된 동작이다(.mon-fin-wrap·.org-scroll·.emp-trend-wrap·
      .sh-mx-wrap 도 동일). 표까지 anywhere 로 두면 좁은 폭에서 열이 과하게 줄어 한글이 중간에 깨진다. */
.px-analysis, .px-an-body,
#feat-body, #consider-body, #inv-body, #affil-body, #references-body,
.doc-sup .doc-sup-body,
.ov-brief,
.self-position-text,
.report-kv .kv-row .v {
  overflow-wrap: anywhere;
}
/* 표는 종전 동작(어절 단위 줄바꿈 + 넘치면 래퍼가 가로 스크롤)으로 되돌린다 */
.px-analysis table, .px-an-body table,
#feat-body table, #consider-body table, #inv-body table, #affil-body table, #references-body table {
  overflow-wrap: normal;
}
/* 그리드 트랙(minmax 0)과 그리드/플렉스 아이템(min-width 0) 양쪽을 막아야 확실하다 —
   전자만으로는 아이템의 min-width:auto(=min-content)가, 후자만으로는 트랙이 늘어난다.
   선례: .mon-grid(2026-08-10 모바일 가로 오버플로) */
.feature-grid > *, .risk-grid > *, .chk-grid > *, .oppr-grid > *,
.finalys-grid > *, .notes-grid > *, .report-kv .kv-row .v {
  min-width: 0;
}

a { color: inherit; text-decoration: none; }

/* ===== 숫자는 전부 고정폭(tabular-nums) — 이 시스템의 서명 =====
   금액·비율·연도·주가·시총이 세로로 정렬되어야 연도별 비교가 된다.
   음수 자간(-0.01em)은 숫자 쪽에 집중시켜 원본(Stripe)의 조밀한 리듬을 재현. */
.num,
.kpi-value, .kpi-unit, .kpi-delta,
.fin-kpi-v,
.mon-fin th, .mon-fin td, .mon-row .mon-val, .mon-invest .big,
.co-stat, .co-foot .big,
.kv-row .v, .report-kv .kv-row .v,
.seg-item .seg-rev, .seg-item .seg-pct,
.px-up, .px-down, .px-flat, .px-change,
.mon-list li.news-row .news-date, .disc-date,
.fd-meta, .fb-meta, .fb-edited, .comment-meta,
table td.num, table th.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  letter-spacing: -0.01em;
}

/* ===== Top bar — 흰 면 60px + 하단 헤어라인(그림자 없음) ===== */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 16px;
  padding: 7px 24px; min-height: 60px;   /* 46px 입력 + 상하 7px = 60px(topbar 토큰) */
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}
/* 로고 = 제목과 같은 600 (라틴이므로 -0.02em 유지). white-space:nowrap 이지만
   .topbar 이 880px 이하에서 flex-wrap 이라 폭이 부족하면 다른 요소가 아래 줄로 내려간다(겹침 불가) */
.brand {
  display: inline-flex; align-items: center; gap: 0px;
  font-size: 22px; font-weight: 600; letter-spacing: -0.02em;
  color: var(--text); white-space: nowrap;
}
/* 로고는 브랜드 색 유지 — 인디고(primary)는 UI 강조 전용이라 로고에 쓰지 않는다 */
.brand .brand-stock { color: var(--brand-blue); }        /* Kiwoom = DAOU 블루 */
.brand .dot { color: var(--navy); margin-left: 0px; }    /* Lens = KIWOOM 네이비 */
.brand .brand-mark { height: 24px; width: auto; display: block; margin-left: 2px; flex-shrink: 0; }
/* Beta 표기(2026-08-12 CBT) — 로고 옆 작은 이탤릭. 네이버페이 증권류 관례.
   로고 글자(600)보다 작고 가벼워 로고를 방해하지 않게, 색은 포인트 핑크로 눈에만 걸리게 한다.
   ⚠️ 상단바는 880px 이하에서 flex-wrap 이라 폭이 부족하면 다른 요소가 아래 줄로 내려간다(겹침 불가). */
.brand-beta {
  align-self: flex-start; margin-left: 3px; margin-top: 1px;
  font-size: 12.5px; font-weight: 700; font-style: italic;
  letter-spacing: 0; color: var(--beta-ink); white-space: nowrap; flex-shrink: 0;
}
/* CBT 운영 안내(2026-08-12) — 홈 상단바의 검색창 자리(홈은 본문에 큰 검색창이 있어 비어 있다).
   2026-08-14 문구를 'Closed Beta Test 운영 중' 한 줄로 통일(작업자 지시) — 그 자체가 짧아
   좁은 폭에서도 상단바가 두 줄로 깨지지 않으므로 폭별 문구 교체(full/short)는 폐지했다. */
.cbt-notice {
  /* 배경·테두리 없이 문장만(2026-08-12 작업자 지시 — 알약 배지는 너무 튄다).
     색은 본문 잉크(--text)로, 크기는 15.5px(같은 날 2차 지시 — 핑크는 과했고 글자가 작았다).
     margin-right:auto 로 좌측 정렬 — .topbar .search 가 justify-content:center 라 그대로 두면 가운데 온다.
     색은 정의된 토큰만(미정의 변수 함정 — docs/frontend-charts.md §3). */
  display: inline-flex; align-items: center;
  margin-right: auto; padding: 0;
  color: var(--text); font-size: 15.5px; font-weight: 600; line-height: 1.4;
  max-width: 100%; word-break: keep-all;
}
.cbt-notice-dot { display: none; }
@media (max-width: 560px) { .cbt-notice { font-size: 14.5px; padding: 5px 11px; } }
.topbar .search {
  flex: 1; display: flex; justify-content: center;
}
/* 검색창 = 알약(search-bar 토큰) — 46px 높이 + 푸른 헤어라인 */
.search-box {
  display: flex; align-items: center; gap: 8px;
  width: 100%; max-width: 520px; min-height: 46px;
  background: var(--bg-elev); border: 1px solid var(--border-strong);
  border-radius: var(--r-pill); padding: 9px 18px;
  transition: border-color .12s, box-shadow .12s;
}
.search-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--primary-subdued); }
/* 다크모드 검색바 가시성 강화 — accent 테두리로 또렷하게 */
html[data-theme="dark"] .search-box {
  background: var(--bg-elev2);
  border: 1px solid var(--accent);
}
html[data-theme="dark"] .search-box .ico,
html[data-theme="dark"] .search-box input::placeholder { color: var(--dim); }
html[data-theme="dark"] .search-box:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--primary-subdued);
}
.search-box input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--text); font-size: 17px; font-family: inherit;
}
.search-box input::placeholder { color: var(--placeholder); }
.search-box .ico { color: var(--dim); }
.topbar .right { white-space: nowrap; display: inline-flex; align-items: center; }
/* 테마 토글 — 트랙·노브가 테마별로 바뀌는 해/달 스위치
   OFF(라이트): 옅은 노랑 트랙 + 골드 노브 + 해 / ON(다크): 네이비 트랙 + 블루 노브 + 달 */
.ant-switch {
  position: relative; display: inline-block; box-sizing: border-box;
  width: 52px; height: 28px; padding: 0; margin: 0; border: 0;
  border-radius: 100px; cursor: pointer; vertical-align: middle;
  -webkit-appearance: none; appearance: none;
  background: var(--tint-amber); transition: background .2s;
}
.ant-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ant-switch .ant-switch-handle {
  position: absolute; top: 2px; left: 2px; width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: #fff; background: var(--gold);
  box-shadow: var(--shadow-card);
  transition: left .2s, background .2s;
}
.ant-switch .ant-switch-handle .icon-moon { display: none; }
.ant-switch.checked { background: var(--navy); }
.ant-switch.checked .ant-switch-handle { left: calc(100% - 26px); background: var(--accent); }
.ant-switch.checked .ant-switch-handle .icon-sun { display: none; }
.ant-switch.checked .ant-switch-handle .icon-moon { display: block; }
/* button-neutral — 흰 바탕 + 헤어라인 알약 */
.navlink {
  color: var(--muted); font-size: 15px; font-weight: 500; padding: 9px 18px;
  border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--bg-elev);
  display: inline-flex; align-items: center; gap: 6px; transition: border-color .12s, background .12s, color .12s;
}
.navlink::before { content: "\2606"; color: var(--gold); font-size: 17px; line-height: 1; }
.navlink:hover { color: var(--text); background: var(--surface-soft); border-color: var(--border-strong); }

/* ===== 사용자 메뉴 (topbar 우측 드롭다운) ===== */
.user-menu { position: relative; }
.user-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: inherit; font-size: 15px; font-weight: 500; color: var(--muted);
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-pill);
  padding: 8px 16px; cursor: pointer; transition: border-color .12s, background .12s, color .12s;
}
.user-trigger:hover { background: var(--surface-soft); border-color: var(--border-strong); color: var(--text); }
.user-trigger .user-chevron { width: 16px; height: 16px; color: var(--dim); transition: transform .18s ease; }
.user-menu.open .user-trigger { border-color: var(--accent); color: var(--accent); background: var(--bg-elev); }
.user-menu.open .user-chevron { transform: rotate(180deg); }

/* dropdown — 12px + raised 그림자 */
.user-dd {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 208px; padding: 8px;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-raised);
  display: flex; flex-direction: column; gap: 2px;
}
.user-dd[hidden] { display: none; }
.user-dd-item {
  display: flex; align-items: center; gap: 10px;
  font-family: inherit; font-size: 15px; font-weight: 500; color: var(--text);
  padding: 10px 12px; border-radius: var(--r-md); border: none; background: transparent;
  cursor: pointer; text-align: left; width: 100%;
}
.user-dd-item svg { width: 18px; height: 18px; color: var(--dim); flex-shrink: 0; }
.user-dd-item:hover { background: var(--surface-soft); }
.user-dd-item:hover svg { color: var(--accent); }
.user-dd-divider { height: 1px; background: var(--border-soft); margin: 6px 4px; }
.user-dd-logout-form { margin: 2px 0 0; }
/* button-primary — 인디고 알약(이 드롭다운의 유일한 채움 버튼) */
.user-dd-logout {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; font-family: inherit; font-size: 16px; font-weight: 500; color: var(--on-accent);
  background: var(--accent); border: none; border-radius: var(--r-pill); padding: 10px 20px;
  cursor: pointer; transition: background .12s;
}
.user-dd-logout:hover { background: var(--accent-press); }
.user-dd-logout svg { width: 17px; height: 17px; }

/* ===== Layout ===== */
.container { max-width: 1180px; margin: 0 auto; padding: 28px 24px 64px; }

/* ===== 계열사 모니터링 — 카드 그리드 ===== */
/* 모니터링 상장/비상장 필터 — 리스트 우상단 세그먼트 컨트롤 */
.mon-toolbar { display: flex; justify-content: flex-end; margin: 0 0 14px; }
/* pill-tab — 활성은 인디고 채움 */
.seg-filter { display: inline-flex; gap: 4px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 3px; }
.seg-filter .seg-btn {
  font-family: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
  border: none; background: transparent; color: var(--dim);
  padding: 7px 16px; border-radius: var(--r-pill); transition: color .12s, background .12s;
}
.seg-filter .seg-btn:hover { color: var(--text); background: var(--surface-soft); }
.seg-filter .seg-btn.active { color: var(--on-accent); background: var(--accent); }

.mon-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* 모바일 1열도 minmax(0,…) 필수 — 순수 1fr(=minmax(auto,1fr))은 카드 속 nowrap 재무표의
   min-content 가 새어나와 카드가 뷰포트보다 넓어진다(2026-08-10 모바일 가로 오버플로) */
@media (max-width: 980px) { .mon-grid { grid-template-columns: minmax(0, 1fr); } }
.mon-card { cursor: pointer; transition: border-color .12s, transform .12s; }
.mon-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.mon-card .co-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 10px; }
.mon-card .co-head .co-name { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.mon-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 15px; }
.mon-row .mon-key { color: var(--dim); font-size: 14px; }
.mon-row .mon-val { font-weight: 600; font-size: 17px; }   /* 카드 내 지표값 — 라벨(400)과 굵기로 분리 */
/* 헤드 row: [현재가/시총] [주가차트] 가로 배치 */
.mon-head-row { display: flex; align-items: center; gap: 16px; margin-bottom: 6px; }
.mon-head-row .mon-pricecol { flex-shrink: 0; flex-wrap: nowrap; }
.mon-head-row .mon-sparkbox { flex: 1; min-width: 0; height: 95px; position: relative; }
/* 좁은 폭 — 가격 열이 flex-shrink:0(고정폭 ~280px+)이라 폰 폭에선 차트 몫이 0 에 수렴해
   세로 실선만 남는다 → 차트를 가격 아래 전폭 줄로 내림(2026-08-10 모바일 검증) */
@media (max-width: 560px) {
  .mon-head-row { flex-wrap: wrap; }
  .mon-head-row .mon-sparkbox { flex: 1 1 100%; }
}
.mon-sec-title { font-size: 14px; color: var(--dim); margin: 14px 0 6px; padding-top: 10px; border-top: 1px solid var(--border-soft); display: flex; justify-content: space-between; align-items: baseline; }
.mon-sec-title:first-child, .mon-card > .mon-sec-title:first-of-type { border-top: none; padding-top: 0; }
/* 섹션 제목(최근 3개년 실적·최근 공시·최근 뉴스) 강조 — 라이트/다크 공통 */
.mon-sec-title > span:first-child { font-weight: 500; color: var(--text); font-size: 15px; }
/* 뉴스 재검색(피드백 #24) — 섹션 제목 우측의 작은 알약 버튼 */
.mon-news-refresh {
  font-size: 13px; color: var(--accent); background: var(--bg-elev);
  border: 1px solid var(--border); border-radius: var(--r-pill);
  padding: 2px 10px; cursor: pointer; white-space: nowrap;
}
.mon-news-refresh:hover { border-color: var(--accent); }
.mon-news-refresh:disabled { color: var(--placeholder); cursor: default; border-color: var(--border); }
.mon-fin-wrap { overflow-x: auto; }   /* 7컬럼(연도+매출·영업·순이익·자산·부채·자본)이 좁은 카드를 넘치면 가로 스크롤 */
.mon-fin { width: 100%; font-size: 13px; border-collapse: collapse; }
.mon-fin thead th { font-size: 13px; padding: 4px 6px; white-space: nowrap; }
.mon-fin tbody td { padding: 4px 6px; white-space: nowrap; }
/* 비상장 카드: 주가 자리의 투자정보 (투자단계·기업가치·투자사) */
.mon-invest { margin: 2px 0 8px; display: flex; flex-direction: column; gap: 2px; min-height: 28px; }
.mon-invest-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.mon-invest .big { font-size: 18px; font-weight: 700; color: var(--text); }   /* 지표값 계열 = 700 */
.mon-invest .co-investors { font-size: 14px; line-height: 1.5; }
/* 비상장 투자정보(최근 투자·투자사 목록) — dim 대신 muted 로 가독성 ↑ (라이트 진하게 / 다크 더 밝게) */
.mon-invest .dim, .co-investors { color: var(--muted); }
/* 즐겨찾기 분류(tag) 필터 + 카드 배지 */
.tag-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; }
.tag-filter:empty { display: none; }
/* 필터 칩 — 알약. 활성은 인디고 채움(pill-tab-active) */
.tag-chip { padding: 7px 16px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--bg-elev); color: var(--dim); font-size: 15px; font-weight: 500; font-family: inherit; cursor: pointer; transition: border-color .12s, color .12s, background .12s; }
.tag-chip:hover { border-color: var(--border-strong); background: var(--surface-soft); color: var(--text); }
.tag-chip.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 500; }
/* 분류명 일괄 수정 버튼 — 선택한 분류 칩 옆에 점선 테두리로 구분되게 등장 */
.tag-rename { padding: 7px 14px; border-radius: var(--r-pill); border: 1px dashed var(--accent); background: transparent; color: var(--accent); font-size: 14px; font-family: inherit; cursor: pointer; transition: background .12s, color .12s; }
.tag-rename:hover { background: var(--primary-subdued); color: var(--accent-deep); }
.tag-rename:disabled { opacity: .5; cursor: default; }
/* 카드 분류 배지 — 틴트 + 짝 잉크 알약 */
.card-tag { font-size: 13px; padding: 3px 10px; border-radius: var(--r-pill); background: var(--tint-gray); border: 1px solid transparent; color: var(--tint-gray-ink); margin-left: auto; white-space: nowrap; }
.mon-card.has-del .card-tag { margin-right: 4px; }
/* 메인 히어로 검색창 — 메뉴 카드 위에 크게 배치(상단바 검색창은 메인에서 숨김) */
.search-hero { max-width: 620px; margin: 24px auto 4px; position: relative; }
.search-hero .search-box { max-width: none; padding: 12px 22px; }
.search-hero .search-box input { font-size: 19px; }
.search-hero .search-box .ico { font-size: 20px; }
.mon-list { list-style: none; padding: 0; margin: 0; font-size: 14px; }
.mon-list li { padding: 4px 0; border-bottom: 1px solid var(--border-soft); line-height: 1.5; }
.mon-list li:last-child { border-bottom: none; }
.mon-list a { color: var(--text); text-decoration: none; }
.mon-list a:hover { color: var(--accent); text-decoration: underline; }
/* 뉴스 행: 한 줄로 고정 (긴 제목은 ... 말줄임) */
.mon-list li.news-row { display: flex; align-items: baseline; gap: 8px; }
.mon-list li.news-row .news-date { flex-shrink: 0; }
.mon-list li.news-row .news-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mon-list li.news-row .news-src { flex-shrink: 0; font-size: 12px; }
/* 공시명은 공백 없는 긴 복합어(예: 계열금융회사를거래상대방으로한단기금융상품거래) —
   전역 keep-all 로는 줄바꿈 지점이 없어 모바일 폭에서 넘친다(keep-all 예외 — 넘침 방지 우선, 2026-08-10) */
.mon-list li.disc-row a { overflow-wrap: anywhere; }
.mon-more {
  display: inline-block; margin-top: 6px; padding: 0;
  background: none; border: none; font-family: inherit; cursor: pointer;
  color: var(--muted); font-size: 13px; text-decoration: none;
}
.mon-more:hover { color: var(--accent); text-decoration: underline; }

.btn.btn-sm { padding: 8px 16px; font-size: 15px; }
.btn.btn-link {
  background: none; border: none; color: var(--accent); padding: 6px 10px; font-size: 15px; font-weight: 500; cursor: pointer;
}
.btn.btn-link:hover { text-decoration: underline; }

/* 보고서형 페이지 헤더 (기업 상세·재무) */
.report-header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
/* 제목 묶음(회사명 h1 + 칩·메타) — 긴 회사명이 우측 버튼을 밀지 않게 줄어들 수 있게(min-width:0) */
.report-header > div:first-child { flex: 1 1 280px; min-width: 0; }
.report-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }
.report-meta { font-size: 15px; color: var(--muted); }
.report-grid { display: flex; flex-direction: column; gap: 16px; }
/* report-section — 12px + 헤어라인 + card 그림자 */
.report-sec {
  position: relative;  /* 섹션 액션 버튼(.sec-action) hover 기준점 */
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 22px 24px; box-shadow: var(--shadow-card);
}
/* heading-lg — 22px/600/-0.01em. 인라인 style 로 display:flex 를 쓰는 섹션(재무정보·재무분석)에서
   제목이 굵어져 폭을 더 먹으므로 flex-wrap 을 여기서 보장한다 — 배지·토글이 밀려 잘리지 않게(황금률⑤).
   block 로 쓰이는 대다수 섹션에는 무해(flex-wrap 은 flex 컨테이너에서만 동작). */
.report-sec-title {
  font-size: 22px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 14px;
  color: var(--text); cursor: default;
  flex-wrap: wrap; row-gap: 6px;
}
/* 각 섹션 하단 '맨 위로' 링크 */
/* 페이지 우하단 '맨 위로' 플로팅 버튼 (페이지당 1개, base.html) */
.to-top {
  position: fixed; right: 22px; bottom: 24px; z-index: 40;
  width: 48px; height: 48px; border-radius: 50%; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--on-accent); border: none; cursor: pointer;
  box-shadow: var(--shadow-raised);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .18s, transform .18s, visibility .18s, background .15s, box-shadow .15s;
}
.to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--accent-press); box-shadow: var(--shadow-overlay); }
.to-top svg { width: 22px; height: 22px; display: block; }
.report-sec .summary { font-size: 17px; line-height: 1.7; color: var(--text); margin: 0 0 12px; }
.report-sec .placeholder { font-size: 15px; color: var(--dim); font-style: normal; }

/* 재무정보 — 최신 KPI 카드 + 자세히 보기 */
.fin-kpi-title { font-size: 18px; font-weight: 500; margin: 14px 0 6px; color: var(--text); }
.fin-kpi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
/* kpi-card ⭐ — 면을 한 단계 눌러(--surface-inset) 카드(.report-sec) 안에서 '칸'이 드러나게 하고,
   경계는 --border-table(표급 헤어라인). 카드와 같은 흰 면 + 그림자로는 칸이 구분되지 않았다
   (2026-07-30 작업자 지적 — 라이브가 더 직관적인 이유 ①박스 배경색 ②굵은 지표값).
   값은 700 — 상세 도입부의 핵심 정보라 한눈에 들어와야 한다(색은 칠하지 않고 굵기로만 강조).
   두께는 1px 그대로 · box-sizing:border-box 라 칸 폭·행 높이는 변하지 않는다.
   그림자는 쓰지 않는다(면 + 선으로만 구분 — 정지 카드에 그림자 추가 금지). */
.fin-kpi { background: var(--surface-inset); border: 1px solid var(--border-table); border-radius: var(--r-lg); padding: 12px 14px; box-shadow: none; }
.fin-kpi-k { color: var(--dim); font-size: 14px; font-weight: 500; }
.fin-kpi-v { color: var(--text); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; margin-top: 3px; word-break: keep-all; }
.fin-detail-btn { margin-top: 16px; }
.fin-detail { border-top: 1px solid var(--border-soft); padding-top: 4px; }
@media (max-width: 560px) { .fin-kpi-grid { grid-template-columns: minmax(0, 1fr); } }

/* 회사개요 KV — 키-값 표. 행 구분선은 표급 헤어라인(--border-table): 카드면과 같은 배경이라
   soft 헤어라인으로는 다크에서 행이 붙어 보인다(2026-07-30 지적). 임원·지분구조·재무표는 <table> 규칙에서 처리 */
/* 트랙은 전부 minmax(0,…) — 홈페이지 URL·투자자 명단처럼 공백 없는 값이 칸을 넓히지 못하게 */
.report-kv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 18px; }
@media (max-width: 720px) { .report-kv { grid-template-columns: minmax(0, 1fr); } }
.report-kv .kv-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border-table); font-size: 16px; }
.report-kv .kv-row .k { color: var(--dim); flex-shrink: 0; }
.report-kv .kv-row .v { color: var(--text); text-align: right; }

/* 사업부문 차트 + 리스트 */
.seg-chart-wrap { position: relative; height: 240px; margin: 8px 0 16px; }
.seg-list { display: flex; flex-direction: column; gap: 8px; }
/* 사업부문 항목 — 특징 카드와 같은 '카드 안 카드' 계열이라 같은 눌린 면을 쓴다(면 톤 이원화 방지) */
.seg-item {
  display: grid; grid-template-columns: minmax(140px, 1fr) 100px 80px;
  gap: 12px; padding: 12px 14px; background: var(--surface-inset); border: 1px solid var(--border-soft); border-radius: var(--r-lg);
  align-items: baseline; font-size: 15px;
}
.seg-item .seg-name { font-weight: 600; color: var(--text); font-size: 17px; }
.seg-item .seg-desc { color: var(--muted); font-size: 15px; grid-column: 1 / -1; margin-top: 2px; }
.seg-item .seg-rev { text-align: right; color: var(--text); }
.seg-item .seg-pct { text-align: right; color: var(--accent); }
/* 사업부문 하위(세부 솔루션·브랜드) — 대분류 카드 내부 들여쓰기 목록 */
.seg-item .seg-sub {
  grid-column: 1 / -1; margin: 8px 0 0; padding: 8px 0 0 14px;
  list-style: none; border-top: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 4px;
}
.seg-item .seg-sub li { font-size: 15px; line-height: 1.6; position: relative; padding-left: 12px; }
.seg-item .seg-sub li::before { content: "·"; position: absolute; left: 0; color: var(--dim); }
.seg-item .seg-sub .seg-sub-name { color: var(--text); font-weight: 500; font-size: 16px; }
.seg-item .seg-sub .seg-sub-desc { color: var(--muted); }

/* 특징 카드들 (feature-card ⭐) — 면을 눌러(--surface-inset) '카드 안 카드'임을 드러내고,
   제목은 --accent(인디고) + 600 으로 본문과 색으로 구분한다. 기존 사용자의 스캔 습관을 따른 것으로,
   Don't 의 "인디고를 본문 글자색으로 쓰지 않는다"에 대한 명시적 예외(카드 제목만 허용).
   본문은 잉크(--text) — 회색(--muted)으로 두면 눌린 면 위에서 대비가 떨어진다. */
.feature-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
@media (max-width: 720px) { .feature-grid { grid-template-columns: minmax(0, 1fr); } }
.feature-card { background: var(--surface-inset); border: 1px solid var(--border-soft); border-radius: var(--r-lg); padding: 14px 16px; }
.feature-card .ft-title { font-weight: 600; color: var(--accent); margin-bottom: 4px; font-size: 17px; }
.feature-card .ft-desc { font-size: 16px; line-height: 1.7; color: var(--text); }

/* 투자고려 — 기회/리스크 */
.risk-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
@media (max-width: 720px) { .risk-grid { grid-template-columns: minmax(0, 1fr); } }
.risk-box { padding: 14px 16px; border-radius: var(--r-md); }
.risk-box.opp { background: var(--tint-mint); border-left: 3px solid var(--pos); }
.risk-box.risk { background: var(--tint-rose); border-left: 3px solid var(--neg); }
/* 기회/리스크 제목 — 카드 제목 규칙(색 + 600): 기회=긍정 잉크 / 리스크=부정 잉크(라이브 색 체계 유지) */
.risk-box .tag { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.risk-box.opp .tag { color: var(--tint-mint-ink); }
.risk-box.risk .tag { color: var(--tint-rose-ink); }
.risk-box .body { font-size: 16px; line-height: 1.7; color: var(--text); }

/* 산업·경쟁 — 자사 시장지위(경쟁사 표 위 한 줄/박스). 빈 문자열이면 JS가 미출력
   banner-info — 인디고 틴트 + 짝 잉크 */
.self-position { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 12px 16px; margin-bottom: 12px; border-radius: var(--r-md);
  background: var(--tint-indigo); border-left: 3px solid var(--accent); }
.self-position-tag { flex: 0 0 auto; font-size: 16px; font-weight: 500; color: var(--tint-indigo-ink); white-space: nowrap; }
.self-position-text { flex: 1 1 auto; min-width: 0; font-size: 16px; line-height: 1.6; color: var(--text); }

/* ===== 메인 랜딩 — 타이틀 + 3개 메뉴 카드 ===== */
.landing-hero { padding: 36px 0 20px; text-align: center; }
/* display-lg — 30px/600/-0.01em (제목은 또렷하게) */
.landing-title { font-size: 30px; font-weight: 600; margin: 0 0 10px; letter-spacing: -0.01em; }
.landing-sub { font-size: 17px; color: var(--muted); margin: 0; }
.menu-grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 36px;
}
.menu-card {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  min-height: 220px; padding: 28px 24px; text-align: center;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  color: var(--text); text-decoration: none; cursor: pointer;
  transition: border-color .12s, transform .12s, box-shadow .12s;
}
.menu-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-raised); transform: translateY(-2px); }
.menu-card-title { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 10px; }
.menu-card-desc { font-size: 16px; color: var(--muted); line-height: 1.6; max-width: 280px; }
.menu-card-tag { display: inline-block; font-size: 13px; color: var(--tint-gray-ink); background: var(--tint-gray); border: 1px solid transparent; border-radius: var(--r-pill); padding: 3px 10px; margin-top: 14px; }
@media (max-width: 880px) { .menu-grid { grid-template-columns: 1fr; } }

/* ===== 상세 페이지 — 즐겨찾기 목록으로 돌아가기 ===== */
.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--muted); text-decoration: none; font-size: 15px;
  padding: 3px 10px; margin: -15px 0 13px -10px; border-radius: var(--radius-sm);   /* 위·아래 여백 13px 동일(위=컨테이너 패딩28-15) */
  transition: color .12s, background .12s;
}
.back-link:hover { color: var(--accent); background: var(--surface-soft); }

/* ===== 상세 페이지 점프 내비 (가로 sticky 바) ===== */
html { scroll-behavior: smooth; }
.container section { scroll-margin-top: 118px; }   /* 토픽바 + 점프바 높이만큼 오프셋 */
/* jump-nav — 활성은 인디고 글자 + 2px 밑줄(알약 아님. segmented-tab 기하) */
.jump-nav {
  position: sticky; top: 60px; z-index: 15;
  /* 좌측 정렬 고정(2026-08-11) — space-between 은 항목이 늘어 **두 줄이 되는 순간** 둘째 줄이
     양끝으로 흩어져 깨져 보인다(임직원수 추이 섹션 추가로 데스크톱에서도 재현). 폭에 무관하게 순서대로. */
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 2px 6px;
  background: var(--jumpnav-bg); backdrop-filter: blur(8px);
  border: 1px solid var(--border); border-radius: var(--r-lg);   /* 다른 카드들과 동일하게 모서리 둥글게 */
  box-shadow: var(--shadow-card);
  margin: 0 0 18px; padding: 4px 20px;
}
/* 모바일: 양끝 정렬(space-between)은 줄바꿈 시 가운데가 비어 어색 → 순서대로 좌측 정렬 */
@media (max-width: 560px) { .jump-nav { justify-content: flex-start; } }
.jump-nav .jump-nav-label { font-size: 13px; color: var(--dim); margin-right: 2px; }
.jump-nav a {
  color: var(--dim); font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap;
  padding: 8px 12px; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  background: transparent; transition: color .12s, border-color .12s;
}
.jump-nav a:hover { color: var(--text); border-bottom-color: var(--border-strong); }
.jump-nav a.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 500; }
/* display-md — 회사명 등 26px/600/-0.01em.
   긴 회사명(공백 없는 한글 사명)이 컨테이너를 넘지 않게 최후 수단 줄바꿈 허용(keep-all 예외) */
.page-title { font-size: 26px; font-weight: 600; letter-spacing: -0.01em; margin: 4px 0 4px; min-width: 0; overflow-wrap: anywhere; }
.page-sub { color: var(--muted); font-size: 17px; margin: 0 0 20px; }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cards { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* ===== Card — 흰 면 · 12px · 헤어라인 + card 그림자(평면이 아니라 살짝 떠 있다) ===== */
.card {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 22px 24px;
  box-shadow: var(--shadow-card);
}
/* 카드 헤드 — 제목(600)이 폭을 더 먹으므로 flex-wrap: 좁은 폭에서 보조문구가 아래 줄로 내려간다(겹침 불가) */
.card-header { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 14px; }
.card-title { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.card-sub { font-size: 15px; color: var(--dim); }

/* ===== Badges / chips / tags — 전부 알약(틴트 + 짝 잉크) ===== */
.badge {
  display: inline-block; font-size: 13px; font-weight: 400; line-height: 1.45;
  padding: 3px 10px; border-radius: var(--r-pill); border: 1px solid transparent;
  color: var(--tint-gray-ink); background: var(--tint-gray);
}
.badge.listed { color: var(--tint-sky-ink); background: var(--tint-sky); }
.badge.unlisted { color: var(--tint-gray-ink); background: var(--tint-gray); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip {
  font-size: 15px; color: var(--tint-gray-ink);
  background: var(--tint-gray); border: 1px solid transparent;
  border-radius: var(--r-pill); padding: 4px 12px;
}
/* 홈페이지 칩(회사 상세 헤더, 피드백 #42) — 칩 알약 모양은 그대로, 잉크만 링크 관례(--accent).
   긴 도메인이 헤더를 밀지 않게 max-width + 말줄임(전체 URL 은 title 툴팁으로 보인다).
   min-width:0 = 좁은 폭에서 flex 아이템이 줄어들 수 있게(없으면 min-content 로 버텨 넘친다). */
a.chip-home {
  display: inline-flex; align-items: baseline; gap: 2px;
  max-width: 280px; min-width: 0; white-space: nowrap;
  color: var(--accent); text-decoration: none;   /* 배경은 .chip 그대로(회색 알약) — 잉크만 링크색 */
}
/* 도메인만 말줄임 — ↗(새 창 표시)는 항상 보이게 바깥에 둔다 */
a.chip-home .chip-home-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
a.chip-home:hover { background: var(--tint-sky); text-decoration: underline; }
@media (max-width: 900px) { a.chip-home { max-width: 200px; } }

.tag { font-size: 13px; padding: 3px 10px; border-radius: var(--r-pill); vertical-align: middle; }
.tag.ai { background: var(--tint-indigo); color: var(--tint-indigo-ink); border: 1px solid transparent; }
.tag.warn { background: var(--tint-amber); color: var(--tint-amber-ink); border: 1px solid transparent; }
.tag.src { background: var(--tint-gray); color: var(--tint-gray-ink); border: 1px solid transparent; }

.pos { color: var(--pos); }
.neg { color: var(--neg); }

/* ===== Hero ===== */
.hero { padding: 8px 0 18px; border-bottom: 1px solid var(--border-soft); margin-bottom: 20px; }
/* 히어로 행 — 긴 회사명 + 우측 액션. 좁은 폭에서 액션이 아래 줄로 내려가게(겹침 불가) */
.hero-row { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; }
/* display-lg — 30px/600/-0.01em. 제목 600 / 지표값 700 */
.hero-title { font-size: 30px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.hero-en { font-size: 19px; font-weight: 400; color: var(--dim); margin-left: 6px; }
.hero-tagline { color: var(--muted); margin: 12px 0 0; max-width: 820px; font-size: 17px; line-height: 1.7; }

/* ===== KPI — 라벨 15px/500 + 값 metric-xl(30px/700/tnum/-0.02em). 값에 색을 칠하지 않는다 ===== */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); gap: 10px; margin-bottom: 16px; }
/* KPI 칸 — .fin-kpi 와 같은 규칙(눌린 면 + 표급 헤어라인, 그림자 없음) */
.kpi { background: var(--surface-inset); border: 1px solid var(--border-table); border-radius: var(--r-lg); padding: 14px 16px; box-shadow: none; }
.kpi-label { font-size: 15px; font-weight: 500; color: var(--dim); margin-bottom: 4px; }
.kpi-value { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--text); }
.kpi-unit { font-size: 16px; font-weight: 400; color: var(--dim); margin-left: 3px; letter-spacing: 0; }
.kpi-delta { font-size: 15px; margin-top: 4px; color: var(--dim); }
.kpi-delta.up { color: var(--pos); }
.kpi-delta.down { color: var(--neg); }

/* ===== Key-value list ===== */
.kv-list { display: flex; flex-direction: column; gap: 0; }
.kv-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border-table); font-size: 17px; }
.kv-row:last-child { border-bottom: none; }
.kv-row .k { color: var(--dim); flex-shrink: 0; }
.kv-row .v { text-align: right; }

/* ===== 통합 찾기 모달 (검색 개편) — 폼 → 후보 비교 카드 ===== */
/* modal — 12px + overlay 그림자 */
.finder-ov { position: fixed; inset: 0; z-index: 600; background: rgba(13,37,61,.45);
  display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px 24px; overflow-y: auto; }
.finder-panel { width: min(640px, 100%); background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow-overlay); }
.fd-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.fd-title { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.fd-close { flex: none; border: 0; background: none; color: var(--dim); font-size: 26px; line-height: 1; cursor: pointer; padding: 0 2px; }
.fd-close:hover { color: var(--text); }
.fd-sub { font-size: 15px; color: var(--muted); line-height: 1.6; margin-bottom: 12px; }
.fd-sub b { color: var(--accent); }
.fd-sub2 { font-size: 15px; color: var(--muted); margin: 14px 0 0; }
/* text-input — 6px + 푸른 헤어라인, 포커스 시 인디고 테두리 + 3px 소프트 링 */
.fd-input { width: 100%; box-sizing: border-box; margin-top: 8px; padding: 11px 14px; font-size: 17px;
  font-family: inherit; min-height: 46px;
  background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--r-sm); color: var(--text); }
.fd-input::placeholder { color: var(--placeholder); }
.fd-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--primary-subdued); }
.fd-actions { margin-top: 16px; }
/* 로딩 — 주 사용자층(40대+) 가독성: 본문급 크기 + 스피너·말줄임 점 애니메이션(검색 중 체감) */
.fd-loading { display: flex; align-items: center; gap: 12px; padding: 26px 4px;
  font-size: 17px; color: var(--text); line-height: 1.7; }
.fd-loading .px-spinner { width: 22px; height: 22px; }
.fd-dots::after { display: inline-block; content: ''; min-width: 36px; text-align: left;
  animation: fd-dots 1.2s steps(1, end) infinite; }
@keyframes fd-dots { 0% { content: ''; } 25% { content: ' ·'; } 50% { content: ' · ·'; } 75% { content: ' · · ·'; } }
/* 로딩 연출 — 레이더 파동 + 그라데이션 타이틀 + 단계 체크 + 스켈레톤 카드 (단계는 JS 시간 기반 체감용) */
.fd-load-wrap { padding: 18px 4px 8px; text-align: center; }
.fd-radar { position: relative; width: 74px; height: 74px; margin: 6px auto 14px; }
.fd-radar span { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent);
  opacity: 0; animation: fd-ping 2.4s cubic-bezier(0, .4, .4, 1) infinite; }
.fd-radar span:nth-child(2) { animation-delay: .8s; }
.fd-radar span:nth-child(3) { animation-delay: 1.6s; }
.fd-radar-ico { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 34px; animation: fd-bob 2.4s ease-in-out infinite; }
@keyframes fd-ping { 0% { transform: scale(.35); opacity: .75; } 80% { transform: scale(1.25); opacity: 0; } 100% { opacity: 0; } }
@keyframes fd-bob { 0%, 100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-4px) rotate(8deg); } }
.fd-load-title { font-size: 18px; font-weight: 500; line-height: 1.5; }
.fd-grad { background: linear-gradient(90deg, var(--text) 30%, var(--accent) 50%, var(--text) 70%);
  background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: fd-sheen 2.2s linear infinite; }
@keyframes fd-sheen { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.fd-steps { max-width: 420px; margin: 14px auto 4px; text-align: left; }
.fd-step { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--r-md);
  font-size: 15px; color: var(--muted); transition: color .3s, background .3s; }
.fd-step-mark { font-size: 17px; filter: grayscale(1); opacity: .45; transition: filter .3s, opacity .3s; }
.fd-step-txt { flex: 1; }
.fd-step-check { font-weight: 500; color: var(--pos); opacity: 0; transform: scale(.4); transition: opacity .25s, transform .25s; }
.fd-step.active { color: var(--text); font-weight: 500; animation: fd-step-pulse 1.6s ease-in-out infinite; }
.fd-step.active .fd-step-mark { filter: none; opacity: 1; }
.fd-step.done .fd-step-mark { filter: none; opacity: .8; }
.fd-step.done .fd-step-check { opacity: 1; transform: scale(1); }
@keyframes fd-step-pulse { 0%, 100% { background: transparent; } 50% { background: var(--primary-subdued); } }
@media (prefers-reduced-motion: reduce) {
  .fd-radar span, .fd-radar-ico, .fd-grad, .fd-step.active { animation: none; }
  .fd-grad { color: var(--text); }
}
.fd-card { display: block; padding: 14px 16px; margin-top: 10px; border: 1px solid var(--border);
  border-radius: var(--r-lg); text-decoration: none; color: var(--text); background: var(--bg-elev); box-shadow: var(--shadow-card); }
.fd-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-raised); }
/* 후보 카드 헤드 — 긴 회사명(600)이 출처 배지를 밀지 않게: 이름은 내부 줄바꿈, 배지는 다음 줄로 */
.fd-card-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.fd-name { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; min-width: 0; overflow-wrap: anywhere; }
/* 출처 배지 — 알약(틴트 + 짝 잉크) */
.fd-badge { flex: none; font-size: 13px; font-weight: 400; padding: 3px 10px; border-radius: var(--r-pill); white-space: nowrap; }
.fd-b-listed { background: var(--tint-sky); color: var(--tint-sky-ink); }
.fd-b-dart { background: var(--tint-mint); color: var(--tint-mint-ink); }
.fd-b-vent { background: var(--tint-amber); color: var(--tint-amber-ink); }
.fd-b-nps { background: var(--tint-indigo); color: var(--tint-indigo-ink); }
.fd-b-web { background: var(--tint-gray); color: var(--tint-gray-ink); }
.fd-meta { margin-top: 5px; font-size: 15px; color: var(--muted); }
.fd-reason { margin-top: 5px; font-size: 15px; color: var(--accent); }
.fd-foot { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

/* ===== Table (data-table) =====
   헤더 = 차가운 오프화이트 밴드 13px 가운데정렬(SPEC §3.1) · 행 구분은 하단 헤어라인 ·
   숫자 셀은 우측 정렬 + tabular.
   ⭐행 구분선 = --border-table(또렷) / 열 구분선 = --border(약하게) — 2026-07-30.
   종전 두 선 모두 --border-soft 여서 다크에서 표가 선 없는 덩어리로 보였다(라이브는 표 전용 강한 선 사용).
   ⭐표 프레임: 제일 위·제일 아래 1px --border-table — 작업자 결정 2026-08-03(피드백 #14).
   종전 '마지막 행 선 제거'는 rowspan 열에 부분 선이 남고 표마다 끝맺음이 달라 폐지.
   테이블 자체의 border 는 border-collapse 로 셀 선과 합쳐져 rowspan 열까지 전폭 한 줄로 그려진다. */
table { width: 100%; border-collapse: collapse; font-size: 15px;
        border-top: 1px solid var(--border-table); border-bottom: 1px solid var(--border-table); }
thead th {
  text-align: center; font-weight: 500; color: var(--muted); font-size: 13px;
  background: var(--bg);
  padding: 9px 10px; border-bottom: 1px solid var(--border-table);
}
/* 컬럼명(헤더)은 모두 가운데정렬 — 본문 숫자 셀만 우측정렬 유지 */
tbody td.num { text-align: right; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
tbody td { padding: 9px 10px; border-bottom: 1px solid var(--border-table); }
tbody tr:hover td { background: var(--surface-soft); }   /* 클릭 가능 행 어포던스 */
tr.row-strong td { font-weight: 500; }
/* 첨부 자료 보완(doc_enrich) — 섹션 기존내용 아래 별도 표시(인디고 좌측선·틴트) */
.doc-sup { border-left: 3px solid var(--accent); background: var(--tint-indigo); padding: 12px 16px; margin-top: 12px; border-radius: 0 var(--r-md) var(--r-md) 0; }
.doc-sup .doc-sup-label { color: var(--tint-indigo-ink); font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 4px; }
.doc-sup .doc-sup-body { color: var(--text); font-size: 16px; line-height: 1.7; margin-top: 4px; white-space: pre-line; }

/* 컬럼 구분선 — 셀 사이 세로선으로 열 구분(행 구분선보다 한 단계 약한 --border: 격자가 무겁지 않게) */
thead th:not(:last-child), tbody td:not(:last-child) { border-right: 1px solid var(--border); }
/* 표 안 보조열(dim)은 캡션용 --dim 대신 --muted 로 — 너무 흐리지 않게 */
tbody td.dim { color: var(--muted); }
/* ===== 경영진 표(이름 · 등기 · 직위 · 학력·경력 · 비고) — 2026-08-26 plan#36(피드백 #45)
        + 등기 열 분리 2026-08-27(피드백 #46 1단계) =====
   폭 배분 원칙: '학력·경력'이 가장 넓고, 이름·등기·직위·비고는 내용에 맞춰 좁게.
   auto 테이블 레이아웃에서는 잔여 폭이 마지막 열로 쏠리므로(종전 '비고'가 다 먹던 구조),
   **넓히고 싶은 열에 width:100% 를 주어** 나머지 열을 max-content 로 눌러 붙인다.
   ⚠️ td 의 max-width 는 auto 레이아웃에서 무시된다 — 폭 상한은 반드시 내부 div 에 건다.
   전역 word-break:keep-all 덕에 이름·직위는 어절 단위라 세로 압사가 없다(min-width 불필요). */
th.exec-career, td.exec-career { width: 100%; }        /* 잔여 폭 전부 흡수 */
/* 등기(사내이사/감사/미등기/기타비상무이사/독립이사 …) — 2026-08-27 피드백 #46.
   종전엔 '비고' 문자열 뒤에 '/ 등기구분'으로 붙어 읽기 어려웠다 → 별도 열로 분리.
   ⚠️ 값은 공시 원값 그대로다(회사별로 다름 — 다우기술·삼성전자는 '사외이사'가 아니라 '독립이사').
   최장 값이 '기타비상무이사'(7자) 수준이라 nowrap 한 줄로 고정해도 폭이 예측 가능하다
   (값에 공백이 섞여도 세로로 접히지 않게 — 겸직 표기 등 방어).
   ⚠️ 옆 열(width:100%) 때문에 이 열은 항상 하한=내용 폭에 고정된다 — 별도 min-width 불필요.
   ⚠️ 소스는 DART 임원현황뿐이라 AI 폴백 표·웹 병합 표에는 이 열이 생기지 않는다(JS 쪽 생성 규칙).
   세로 정렬은 **양옆(이름·직위)과 같은 기본값(middle)** — 여기에 vertical-align:top 을 주면
   행 높이가 큰 회사(경력 5줄)에서 이름·직위만 가운데, 등기만 위로 붙어 지그재그로 읽힌다.
   (긴 텍스트 열인 학력·경력·비고만 top 정렬하는 것이 이 표의 기존 규칙) */
th.exec-reg, td.exec-reg { white-space: nowrap; }
/* 학력·경력 셀 — \n 구분 다행 텍스트를 개행 보존(pre-line)으로.
   min-width 로 좁은 폭에서 글자가 세로 한 줄로 압사하는 것을 막고,
   넘침은 표 래퍼(overflow-x:auto)가 가로 스크롤로 흡수한다 — 이름·직위 열 압사 방지. */
td.exec-career { min-width: 220px; vertical-align: top; }
td.exec-career .exec-career-txt { white-space: pre-line; overflow-wrap: anywhere; line-height: 1.55; }
/* 비고 — v:4 부터 **담당업무 단독**(등기는 위 별도 열로 분리, 2026-08-27). 구캐시 v:3 는
   '담당업무 / 등기구분' 합본이 그대로 들어온다. '2줄 정도'가 목표. 상한 14em(내부 div) + 하한 11em(td).
   하한이 없으면 옆 열(width:100%)에 밀려 min-content(가장 긴 어절)까지 좁아져 4~6줄이 된다. */
td.exec-note { vertical-align: top; min-width: 11em; }
td.exec-note .exec-note-txt { max-width: 14em; line-height: 1.55; }
/* ⚠️ 옆 열의 width:100% 때문에 브라우저는 비고를 **항상 하한(min-width)에 고정**한다 —
   상한(14em)은 사실상 도달하지 않는다(QA 2026-08-26 실측: 1387px 에서도 11em=165px 고정,
   위원회 겸직이 많은 사외이사 행이 4줄로 접혀 행 높이를 지배). 학력·경력이 이미 넓게 쓰는
   데스크톱에서는 하한 자체를 올려 '2줄 정도' 목표에 맞춘다. 좁은 폭은 현행 유지(아래 분기). */
@media (min-width: 1000px) {
  td.exec-note { min-width: 14em; }
}
@media (max-width: 560px) {   /* 좁은 폭 — 표 최소폭을 낮춰 가로 스크롤 양을 줄인다 */
  td.exec-career { min-width: 180px; }
  /* 등기 열이 늘면서(2026-08-27) 표 최소폭이 +76px 늘었다 — 390px 실측 가로 스크롤 134→210px.
     비고 하한을 8em→7em 으로 낮춰 일부 되돌린다(195px). v:4 비고는 담당업무 단독이라
     min-content(가장 긴 어절 ≈5자)가 7em 아래라 하한이 여전히 유효하게 작동한다. */
  td.exec-note { min-width: 7em; }
  td.exec-note .exec-note-txt { max-width: 10em; }
}

/* ===== Charts ===== */
.chart-wrap { position: relative; height: 240px; margin-top: 6px; }
/* 주가 차트: 휠 줌·드래그 팬 affordance */
canvas#sparkPrice { cursor: grab; }
canvas#sparkPrice:active { cursor: grabbing; }
.unit-tag { font-size: 14px; color: var(--dim); }

/* ===== Button — 전부 알약(사각 버튼 금지). 화면당 채워진 인디고는 하나 =====
   .btn(=button-neutral) 흰 바탕 + 헤어라인 / .primary 인디고 채움 /
   .secondary 흰 바탕 + 인디고 외곽선·글자 / .ghost 투명 / .danger 흰 바탕 + 빨간 글자 */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; font-size: 16px; font-weight: 500; line-height: 1.2; cursor: pointer;
  border-radius: var(--r-pill); padding: 10px 20px;
  border: 1px solid var(--border); background: var(--bg-elev); color: var(--muted);
  transition: background .12s, border-color .12s, color .12s;
}
.btn:hover { background: var(--surface-soft); border-color: var(--border-strong); color: var(--text); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-press); border-color: var(--accent-press); color: var(--on-accent); }
.btn.secondary { background: var(--bg-elev); border-color: var(--accent); color: var(--accent); }
.btn.secondary:hover { background: var(--primary-subdued); border-color: var(--accent); color: var(--accent-deep); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--dim); padding: 9px 16px; }
.btn.ghost:hover { background: var(--surface-soft); border-color: transparent; color: var(--text); }
.btn.danger { background: var(--bg-elev); border-color: var(--border); color: var(--neg); }
.btn.danger:hover { background: var(--tint-rose); border-color: var(--tint-rose); color: var(--neg); }
.btn:disabled { opacity: .55; cursor: default; }

/* ===== Company summary card (landing/watchlist) — watchlist-card ===== */
.co-card { cursor: pointer; transition: border-color .12s, transform .12s, box-shadow .12s; position: relative; }
.co-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-raised); transform: translateY(-2px); }
/* 카드 헤드 — [회사명][상장 배지]. 제목 600 으로 폭이 늘어도 배지를 밀지 않게:
   ①이름은 카드 안에서 줄바꿈(keep-all 예외 — 넘침 방지 우선) ②배지는 줄어들지 않고 필요하면 다음 줄 */
.co-card .co-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 12px; }
.co-name { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; min-width: 0; overflow-wrap: anywhere; }
.co-head .badge, .co-head .card-tag { flex: none; }   /* 배지·분류칩은 압축되지 않는다(줄바꿈으로 피한다) */

/* 즐겨찾기 카드 삭제 버튼 — 절대배치(카드 우상단). 겹침 방지 여백은 .co-card.has-del .co-head 에서 확보 */
.wl-del {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 28px; height: 28px; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-elev); border: 1px solid var(--border);
  color: var(--dim); font-size: 16px; line-height: 1; cursor: pointer;
  transition: color .12s, background .12s, border-color .12s; opacity: .7;
}
.co-card:hover .wl-del { opacity: 1; }
.wl-del:hover { color: var(--neg); background: var(--tint-rose); border-color: var(--tint-rose); opacity: 1; }
/* 삭제버튼이 있는 카드는 헤드 우측에 버튼 공간 확보 (배지와 겹침 방지) */
.co-card.has-del .co-head { padding-right: 36px; }

/* 카드 드래그앤드롭 위치 교체 (즐겨찾기·계열사 모니터링 공통) */
.co-card[draggable="true"], .mon-card[draggable="true"] { cursor: grab; }
.co-card.dragging, .mon-card.dragging { opacity: .45; cursor: grabbing; }
.co-card.drop-target, .mon-card.drop-target {
  border-color: var(--accent); outline: 2px dashed var(--accent); outline-offset: 2px;
}

/* 즐겨찾기 별표 토글 (상세 페이지 회사명 옆) */
.wl-star {
  background: none; border: none; cursor: pointer; padding: 0 0 0 10px;
  font-size: 30px; line-height: 1; color: var(--muted);
  vertical-align: middle; transition: color .15s, transform .1s;
}
.wl-star:hover { transform: scale(1.12); color: var(--star); }
.wl-star.on { color: var(--star); }
.co-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 14px; margin: 10px 0; }
.co-stat { display: flex; justify-content: space-between; font-size: 16px; }
.co-stat .lbl { color: var(--dim); }
.co-spark { height: 56px; margin-top: 8px; }
.co-foot { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-soft); font-size: 16px; }
.co-foot .big { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }   /* 지표값 계열 = 700 */

/* ===== Section heading ===== */
.section-row { margin-bottom: 16px; }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; }

/* ===== Modal (즐겨찾기 추가 확인) — 12px + overlay 그림자 ===== */
.modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 50;
  background: rgba(13,37,61,0.45); align-items: center; justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 24px; width: 320px; text-align: center;
  box-shadow: var(--shadow-overlay);
}
.modal p { margin: 0 0 18px; }
.modal .row { display: flex; gap: 8px; justify-content: center; }
/* 즐겨찾기 모달 — 분류 추천 칩(plan 10). 추천 없으면 JS 가 통째로 숨겨 자리 차지 없음.
   칩 모양은 기존 .tag-chip(즐겨찾기 필터 칩) 재사용 — flex-wrap 으로 좁은 폭·긴 태그명 넘침 물리적 불가 */
.wl-tag-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; text-align: left; }
.wl-tag-suggest .wl-sg-label { flex: none; font-size: 13px; color: var(--muted); }
.wl-tag-suggest .tag-chip { font-size: 14px; padding: 5px 14px; max-width: 100%; overflow-wrap: anywhere; }

/* ===== Responsive ===== */
@media (max-width: 880px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .topbar { flex-wrap: wrap; }
  /* flex:0 0 100% 로 검색창이 온전히 둘째 줄 한 줄을 차지하게 강제(기존 flex:1 의 basis 0% 무력화) */
  .topbar .search { order: 3; flex: 0 0 100%; width: 100%; }
  /* 검색창이 둘째 줄로 내려가 첫 줄 오른쪽이 비므로, 테마·사용자 버튼을 오른쪽 끝으로 정렬 */
  .topbar .right { margin-left: auto; }
  .hero-title { font-size: 26px; }
}
/* 모바일 상단바 — 토글·브랜드·테마·사용자 버튼이 한 줄에 들어가도록 압축
   (검색창만 둘째 줄로 내려가고, 나머지 버튼은 모두 한 줄 유지) */
@media (max-width: 560px) {
  .topbar { padding: 10px 12px; gap: 8px; }
  .brand { font-size: 17px; }
  .brand .brand-mark { height: 18px; }
  .nav-toggle { width: 36px; height: 36px; margin-right: 0; }
  .topbar .right { gap: 4px; }
  #theme-toggle { margin-right: 4px !important; }
  .user-trigger { padding: 6px 10px; gap: 6px; font-size: 14px; }
  .user-trigger .user-chevron { width: 14px; height: 14px; }
  .topbar .right .user-name { max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ===== 검색 드롭다운 — dropdown(12px + raised 그림자) ===== */
.search-dd {
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 520px; z-index: 30;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-raised);
}
.search-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 16px; font-size: 17px; color: var(--text);
  border-bottom: 1px solid var(--border-soft);
}
.search-row:last-child { border-bottom: none; }
a.search-row:hover { background: var(--surface-soft); }

/* ===== 로드/안내 배너 — banner-info / banner-warning(틴트 + 짝 잉크) ===== */
.banner { border-radius: var(--r-md); padding: 12px 16px; font-size: 17px; margin-bottom: 16px; }
.banner.err { border: 1px solid transparent; background: var(--tint-rose); color: var(--tint-rose-ink); }
.banner.info { border: 1px solid transparent; background: var(--tint-indigo); color: var(--tint-indigo-ink); }
.placeholder { color: var(--dim); font-size: 17px; }

/* ===== 즐겨찾기 카드 2열 지표 ===== */
.co-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; margin: 10px 0; }
.co-cols .co-stat { padding: 2px 0; }

/* ===== 2026-06-03 추가 기능 스타일 ===== */
/* 주가추이 분석 (AI) 버튼 */
.btn.px-analyze-btn {
  color: var(--on-accent); background: var(--accent); border-color: var(--accent); font-size: 15px; padding: 8px 16px;
  animation: px-pulse 2.4s ease-in-out infinite;
}
.btn.px-analyze-btn:hover { background: var(--accent-press); border-color: var(--accent-press); color: var(--on-accent); animation: none; }
.btn.px-analyze-btn:disabled { opacity: .6; cursor: default; animation: none; }
@keyframes px-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(83,58,253,0.0); }
  50% { box-shadow: 0 0 0 4px rgba(83,58,253,0.20); }
}
/* 분석 로딩 */
.px-loading {
  display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 14px 16px;
  background: var(--primary-subdued); border: 1px solid transparent; border-radius: var(--r-md);
  color: var(--tint-indigo-ink); font-size: 16px; animation: px-pulse 2s ease-in-out infinite;
}
.px-spinner {
  width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--accent); animation: px-spin .7s linear infinite;
}
@keyframes px-spin { to { transform: rotate(360deg); } }
/* 분석 결과 박스 */
.px-analysis { margin-top: 4px; }
.px-an-top {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 12px 0 8px;
  padding: 9px 14px; background: var(--bg); border: 1px solid var(--border-soft);
  border-radius: var(--r-md); font-size: 13px;
}
.px-an-top .px-an-model { color: var(--accent); font-weight: 500; }
.px-an-body { font-size: 17px; line-height: 1.7; color: var(--text); }
.px-an-sec { margin-bottom: 14px; }
.px-an-sec:last-child { margin-bottom: 0; }
/* 주가추이 분석 2파트 소제목 — 장기 추세 / 최근 변동 (plan#35) */
.px-an-part {
  display: flex; align-items: center; gap: 8px;
  margin: 12px 0 8px; font-size: 15px; font-weight: 700; color: var(--muted);
}
.px-an-part::before {
  content: ''; flex: none; width: 4px; height: 14px;
  border-radius: 2px; background: var(--accent);
}
.px-an-body + .px-an-part { margin-top: 18px; }
/* 분석 기준 시각 — 출처 줄 끝 소표기 */
.px-an-ts { display: inline-block; margin-left: 10px; color: var(--muted); white-space: nowrap; }
.px-an-sources .px-an-ts:only-child { margin-left: 0; }
/* 시각 옆 인라인 재분석(2026-08-25 피드백 #44 후속) — 낡음을 인지하는 지점에 갱신 수단 */
.px-an-ts-regen { margin-left: 6px; padding: 1px 9px; font-size: 12.5px; cursor: pointer;
  color: var(--accent); background: transparent; border: 1px solid var(--border-strong);
  border-radius: var(--r-pill); }
.px-an-ts-regen:hover { background: var(--primary-subdued); }
/* 사업내용 불렛 — 번호 항목을 점 불렛으로 구분(가독성) */
.biz-bullets .biz-bullet { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.biz-bullets .biz-bullet:last-child { margin-bottom: 0; }
.biz-bullet-dot {
  flex: none; width: 7px; height: 7px; margin-top: 9px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 3px var(--primary-subdued);
}
.biz-bullet-text { flex: 1; min-width: 0; }
/* 주요 상품/서비스 표 — 이름 열은 공간 있으면 한 줄, 좁으면 단어 단위 줄바꿈(모바일 표 늘어짐 방지) */
.prod-table td { vertical-align: top; line-height: 1.6; }
.prod-table th:first-child, .prod-table td:first-child { min-width: 110px; }
.px-an-sources {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-soft);
  font-size: 13px; line-height: 1.8; word-break: break-all;
}
.px-an-sources a { color: var(--accent); text-decoration: none; }
.px-an-sources a:hover { text-decoration: underline; }
.px-an-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-soft);
}
.px-an-disclaimer { font-size: 13px; color: var(--dim); }
/* 개요 상단 AI 3줄 소개 */
.ov-brief {
  font-size: 17px; line-height: 1.7; color: var(--text);
  margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border-soft);
}
.ov-brief.loading { color: var(--muted); font-style: normal; }
/* badge-ai — 인디고 틴트 알약 */
.ov-brief .ov-brief-tag {
  display: inline-block; margin-left: 4px; font-size: 13px; font-weight: 400; color: var(--tint-indigo-ink);
  background: var(--tint-indigo); border: 1px solid transparent;
  border-radius: var(--r-pill); padding: 2px 9px; vertical-align: middle;
}
/* 1일 이내 공시 NEW 강조 */
.disc-new { background: var(--primary-subdued); border-radius: var(--r-md); }
.disc-new .disc-date { color: var(--accent-deep); font-weight: 500; }
.disc-new a { color: var(--accent-deep); font-weight: 500; }
.disc-new-badge {
  display: inline-block; margin-right: 6px; font-size: 13px; font-weight: 500; color: var(--on-accent);
  background: var(--accent); border-radius: var(--r-pill); padding: 1px 8px; vertical-align: middle; letter-spacing: .02em;
}
/* 사업내용/경쟁사 웹검색 추가분석 버튼 — 기본 생성물과 구분 (클릭 시 본문을 결과가 덮어씀) */
.deep-wrap { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border-soft); }
/* 주가 전일대비 색상 (상승=빨강 / 하락=파랑) + 증감 */
.px-up { color: var(--neg); }
.px-down { color: var(--accent); }
.px-flat { color: var(--muted); }
.px-change { display: block; font-size: 13px; font-weight: 500; }
/* 리스크 & 체크포인트 (기업 상세 — IR 9·10 컨셉) */
.risk-sub { font-size: 18px; font-weight: 500; color: var(--text); margin: 0 0 12px; }
.chk-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
/* 체크포인트 카드 — feature-card 와 같은 '카드 안 카드' 규칙(눌린 면 + 제목 인디고 600, 그림자 없음).
   라이브는 제목에 마젠타(--accent2)를 썼으나, 이 시스템에서 루비·마젠타는 메시 정지점 전용이라
   카드 제목 색은 인디고(--accent)로 통일한다(DESIGN.md Don't 준수). */
.chk-card { background: var(--surface-inset); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px 16px; box-shadow: none; }
.chk-title { font-size: 17px; font-weight: 600; color: var(--accent); margin-bottom: 6px; }
.chk-desc { font-size: 16px; color: var(--text); line-height: 1.7; }
.oppr-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.oppr-box { padding: 14px 16px; border-radius: var(--r-md); border: 1px solid transparent; font-size: 16px; line-height: 1.7; color: var(--text); }
/* 기회/리스크 제목 — 색 + 600 (기회=긍정 잉크 / 리스크=부정 잉크. 라이브 색 체계 유지) */
.oppr-box .oppr-h { font-weight: 600; margin-bottom: 8px; font-size: 16px; }
.oppr-box.opp { background: var(--tint-mint); }
.oppr-box.opp .oppr-h { color: var(--tint-mint-ink); }
.oppr-box.rsk { background: var(--tint-rose); }
.oppr-box.rsk .oppr-h { color: var(--tint-rose-ink); }
@media (max-width: 720px){ .chk-grid, .oppr-grid { grid-template-columns: minmax(0, 1fr); } }
/* 플로팅 '뒤로 가기' — 스크롤 따라다님(고정). 넓은 화면=좌측 거터 알약 / 좁은 화면=좌하단 원형 FAB(본문 겹침 방지) */
.back-float {
  position: fixed; left: 18px; top: 50%; transform: translateY(-50%); z-index: 25;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 18px; border-radius: var(--r-pill);
  background: var(--bg-elev); border: 1px solid var(--border); color: var(--muted);
  font-size: 15px; font-weight: 500; text-decoration: none;
  box-shadow: var(--shadow-raised);
  transition: background .15s, border-color .15s, color .15s;
}
.back-float:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.back-float .bf-ico { font-size: 17px; line-height: 1; }
@media (max-width: 1320px) {
  .back-float { left: 16px; top: auto; bottom: 22px; transform: none; padding: 0; width: 48px; height: 48px; justify-content: center; border-radius: 50%; }
  .back-float .bf-text { display: none; }
  .back-float .bf-ico { font-size: 20px; }
}

/* ===== Codex harness UX additions: side workbench, section edit/comment ===== */
/* side-panel — 좌측 헤어라인 + raised 그림자 */
.side-workbench {
  position: fixed; top: 0; right: 0; z-index: 80; width: min(520px, 42vw); height: 100vh;
  background: var(--bg-elev); border-left: 1px solid var(--border); box-shadow: var(--shadow-raised);
  transform: translateX(104%); transition: transform .18s ease; display: flex; flex-direction: column;
}
.side-workbench.open { transform: translateX(0); }
/* 넓게 보기(피드백 #38) — 외부 기사 사이트는 데스크톱 고정 레이아웃이라 520px 안에서 오른쪽이 잘리고,
   대부분 overflow-x 를 막아 가로 스크롤로도 복구되지 않는다. ⤢ 로 폭만 넓혀 원문 폭을 확보한다. */
.side-workbench.wide { width: min(1280px, 92vw); }
.sw-icon.on { border-color: var(--accent); color: var(--accent); background: var(--surface-soft); }
/* 패널 헤드 — 제목에 뉴스/공시 헤드라인이 그대로 들어올 수 있다(JS 가 링크 텍스트를 넣음).
   제목 600 으로 폭이 늘어도 우측 액션 버튼(36px×3)을 밀지 않게: 제목은 패널 안에서 줄바꿈, 액션은 고정 */
.sw-head {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--border); background: var(--bg);
}
.sw-head > div:first-child { flex: 1 1 200px; min-width: 0; }
.sw-kicker { color: var(--accent); font-size: 13px; font-weight: 500; }
.sw-title { color: var(--text); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; overflow-wrap: anywhere; }
.sw-actions { display: flex; gap: 6px; flex: none; margin-left: auto; }
.sw-icon {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--r-pill); color: var(--muted); background: var(--bg-elev);
  text-decoration: none; cursor: pointer; font-size: 18px;
}
.sw-icon:hover { border-color: var(--border-strong); background: var(--surface-soft); color: var(--accent); }
.sw-body { flex: 1; min-height: 0; display: flex; }
.sw-body iframe { width: 100%; height: 100%; border: 0; background: var(--bg-elev); }
.sw-panel { width: 100%; overflow: auto; padding: 16px; }
@media (max-width: 1024px) {
  .side-workbench { width: 100vw; max-width: 100vw; }
}

.sec-actions {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 10px;
  transform: translateY(-1px);
}
.sec-action {
  border: 1px solid var(--border); background: var(--bg-elev); color: var(--dim);
  border-radius: var(--r-pill); padding: 4px 12px; font-size: 13px; font-family: inherit; cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity .12s ease;
}
.report-sec:hover .sec-action, .report-sec.actions-on .sec-action { opacity: 1; pointer-events: auto; }
.sec-action:hover { color: var(--accent); border-color: var(--accent); }
.sec-comment-badge {
  border-radius: var(--r-pill); padding: 3px 10px; font-size: 13px; color: var(--tint-gray-ink);
  border: 1px solid transparent; background: var(--tint-gray);
  opacity: 1;
}
.sec-comment-badge.hot { color: var(--tint-rose-ink); background: var(--tint-rose); border-color: transparent; }
.edit-meta {
  margin-top: 12px; padding-top: 8px; border-top: 1px dashed var(--border);
  color: var(--dim); font-size: 13px;
}
.editor-toolbar {
  display: flex; gap: 6px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft);
}
.editor-toolbar button {
  min-width: 34px; height: 34px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--bg-elev); color: var(--muted); cursor: pointer; font-weight: 500; font-family: inherit;
}
.editor-toolbar button:hover { background: var(--surface-soft); border-color: var(--border-strong); color: var(--text); }
/* text-input 계열 — 6px + 푸른 헤어라인 + 포커스 3px 소프트 링 */
.wysiwyg {
  min-height: 180px; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--bg-elev); color: var(--text); font-size: 17px; line-height: 1.7; outline: none; overflow-wrap: break-word;
}
.wysiwyg:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--primary-subdued); }
.editor-hint { color: var(--dim); font-size: 13px; margin-bottom: 8px; }
.ckeditor-wrap {
  --ck-color-base-background: var(--bg-elev);
  --ck-color-base-foreground: var(--bg);
  --ck-color-base-border: var(--border);
  --ck-color-base-text: var(--text);
  --ck-color-button-default-background: var(--bg);
  --ck-color-button-default-hover-background: var(--surface-soft);
  --ck-color-button-on-background: var(--primary-subdued);
  --ck-color-button-on-hover-background: var(--primary-subdued);
  --ck-color-toolbar-background: var(--bg);
  --ck-color-toolbar-border: var(--border);
  --ck-color-panel-background: var(--bg-elev);
  --ck-color-panel-border: var(--border);
  --ck-color-list-background: var(--bg-elev);
  --ck-color-list-button-hover-background: var(--surface-soft);
  --ck-color-list-button-on-background: var(--primary-subdued);
  --ck-color-input-background: var(--bg-elev);
  --ck-color-input-border: var(--border-strong);
  --ck-color-focus-border: var(--accent);
  min-height: 180px; padding: 0; border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--bg-elev); color: var(--text); font-size: 17px; line-height: 1.7; overflow-wrap: break-word;
}
.ckeditor-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--primary-subdued); }
.ckeditor-wrap > .ck-editor { width: 100%; }
.ckeditor-wrap .ck-editor__editable {
  min-height: 180px; background: var(--bg-elev) !important; color: var(--text) !important;
  font-size: 17px; line-height: 1.7; cursor: text; pointer-events: auto !important; user-select: text !important;
}
.ckeditor-wrap .ck-editor__editable * { pointer-events: auto; user-select: text; }
.ckeditor-wrap .ck-editor__editable[contenteditable="true"] { cursor: text; }
.ckeditor-wrap .ck-editor__editable.ck-focused { box-shadow: none !important; }
.ckeditor-wrap .ck-editor__editable_inline { border-radius: 0 0 var(--r-sm) var(--r-sm); }
.ckeditor-wrap .ck-toolbar {
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: var(--bg) !important; border-color: var(--border) !important;
}
.ckeditor-wrap .ck-button,
.ckeditor-wrap .ck-dropdown__button,
.ckeditor-wrap .ck-toolbar__separator { color: var(--text) !important; }
.ckeditor-wrap .ck-button:hover,
.ckeditor-wrap .ck-dropdown__button:hover { background: var(--surface-soft) !important; }
.ckeditor-wrap .ck-button.ck-on { background: var(--primary-subdued) !important; color: var(--accent-deep) !important; }
.ckeditor-wrap .ck-dropdown__panel,
.ckeditor-wrap .ck-list,
.ckeditor-wrap .ck-balloon-panel {
  background: var(--bg-elev) !important; border-color: var(--border) !important; color: var(--text) !important;
}
.ckeditor-wrap .ck-list__item .ck-button { color: var(--text) !important; background: transparent !important; }
.ckeditor-wrap .ck-list__item .ck-button:hover { background: var(--surface-soft) !important; }
.ckeditor-wrap .ck-content h1,
.ckeditor-wrap .ck-content h2,
.ckeditor-wrap .ck-content h3,
.ckeditor-wrap .ck-content h4,
.ckeditor-wrap .ck-content p,
.ckeditor-wrap .ck-content li { color: var(--text); }
.ckeditor-wrap .ck-content a { color: var(--accent); }
.ckeditor-wrap .ck-content blockquote {
  color: var(--text); border-left-color: var(--accent); background: var(--primary-subdued);
}
.ckeditor-wrap .ck-content table { width: 100%; }
.ckeditor-wrap .ck-content table,
.ckeditor-wrap .ck-content table td,
.ckeditor-wrap .ck-content table th { border-color: var(--border) !important; }
.ckeditor-wrap .ck-placeholder::before { color: var(--placeholder) !important; }
.ckeditor-source {
  width: 100%; min-height: 180px; padding: 12px 14px; border: 0; resize: vertical;
  font-family: inherit; font-size: 17px; line-height: 1.7; color: var(--text); background: var(--bg-elev);
}
.native-editor { width: 100%; }
.native-editor-toolbar {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  padding: 8px; border-bottom: 1px solid var(--border); background: var(--bg);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
}
.native-editor-toolbar button {
  min-width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: var(--r-sm); background: transparent; color: var(--muted);
  cursor: pointer; font-family: inherit; font-size: 15px;
}
.native-editor-toolbar button:hover {
  background: var(--bg-elev); border-color: var(--border); color: var(--accent);
}
.native-editor-toolbar span {
  width: 1px; height: 22px; background: var(--border); margin: 0 3px;
}
.native-editor-area {
  min-height: 180px; padding: 14px; outline: none; color: var(--text); background: var(--bg-elev);
  font-size: 17px; line-height: 1.7; cursor: text; user-select: text; overflow-wrap: break-word;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
}
.native-editor-area:focus { box-shadow: inset 0 0 0 1px var(--accent); }
.native-editor-area p { margin: 0 0 10px; }
.native-editor-area h3,
.native-editor-area h4 { margin: 0 0 8px; color: var(--text); font-weight: 500; }
.native-editor-area blockquote {
  margin: 0 0 12px; padding: 12px 14px; border-left: 3px solid var(--accent);
  background: var(--primary-subdued); border-radius: var(--r-md);
}
.native-editor-area a { color: var(--accent); }
.native-editor-area table { width: 100%; border-collapse: collapse; }
.native-editor-area td,
.native-editor-area th { border: 1px solid var(--border); padding: 6px 8px; }
.sw-submit { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.comment-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.comment-item {
  padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-elev);
}
.comment-item.reply { margin-left: 24px; border-left: 3px solid var(--accent); }
.comment-item.reply .comment-meta::before { content: "답글 · "; color: var(--accent); font-weight: 500; }
.comment-meta { color: var(--dim); font-size: 13px; margin-bottom: 6px; }
.comment-body { color: var(--text); font-size: 17px; line-height: 1.7; }
.comment-tools { display: flex; gap: 10px; margin-top: 8px; }
.comment-reply, .comment-edit, .comment-delete {
  border: 0; background: transparent; color: var(--accent); cursor: pointer; padding: 0;
}
.comment-delete { color: var(--neg); }
.comment-compose { border-top: 1px solid var(--border-soft); padding-top: 12px; }
.comment-editor { min-height: 120px; }
.comment-editor .ck-editor__editable { min-height: 120px; }
.comment-editor .ckeditor-source { min-height: 120px; }
.comment-editor .native-editor-area { min-height: 120px; }

/* ===== 피드백 게시판 (feedback/index.html · feedback/write.html) =====
   기존 CSS 변수만 사용(--card·--hover 등 미정의 변수 금지 — frontend-charts.md §3).
   절대배치 없음 · 나열 요소는 전부 flex-wrap — 좁은 폭(760~1100px)·긴 제목에서 넘침 불가.
   폭은 .container(1180px) 를 그대로 따른다 — 홈·즐겨찾기와 동일(2026-07-28 작업자 지시,
   종전 .fb-page max-width 920px 오버라이드 제거). */
.fb-h1 { font-size: 26px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 6px; }
.fb-lead { font-size: 17px; color: var(--muted); margin: 0 0 22px; line-height: 1.7; }

/* 헤더 행 — 제목/안내 + 우상단 작성 버튼. 좁아지면 버튼이 아래 줄로 내려가 겹침이 물리적으로 불가 */
.fb-page-head {
  display: flex; align-items: flex-start; flex-wrap: wrap;
  gap: 12px 18px; margin: 0 0 22px;
}
.fb-page-head-main { flex: 1 1 320px; min-width: 0; }
.fb-page-head .fb-lead { margin-bottom: 0; }
.fb-write-btn { flex: none; margin-left: auto; white-space: nowrap; }
/* button(.btn)·a(.btn) 를 나란히 두므로 폰트를 통일 — 브라우저 기본 UI 폰트로 높이/자간이 어긋나는 것 방지 */
.fb-page .btn { font-family: inherit; }

/* 작성 카드 */
.fb-compose { padding: 22px 24px; margin-bottom: 28px; }
.fb-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.fb-row .fb-field { margin-bottom: 0; }
.fb-field { margin-bottom: 14px; min-width: 0; }
.fb-field-cat { flex: 0 1 180px; min-width: 150px; }
.fb-field-title { flex: 1 1 260px; }
.fb-label { display: block; font-size: 15px; font-weight: 500; color: var(--dim); margin-bottom: 6px; }
/* text-input / select — 6px + 푸른 헤어라인, 포커스 시 인디고 + 3px 소프트 링 */
.fb-select, .fb-input, .fb-textarea {
  font-family: inherit; font-size: 17px; color: var(--text);
  background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  padding: 11px 14px; outline: none; transition: border-color .12s, box-shadow .12s;
}
.fb-select { width: 100%; cursor: pointer; min-height: 46px; }
.fb-input { width: 100%; min-height: 46px; }
.fb-textarea { width: 100%; min-height: 130px; resize: vertical; line-height: 1.7; }
.fb-select:focus, .fb-input:focus, .fb-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--primary-subdued); }
.fb-input::placeholder, .fb-textarea::placeholder { color: var(--placeholder); }
.fb-files-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.fb-file-input { font-size: 15px; color: var(--muted); max-width: 100%; min-width: 0; }
.fb-file-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.fb-file-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  font-size: 15px; color: var(--tint-gray-ink); background: var(--tint-gray);
  border: 1px solid transparent; border-radius: var(--r-pill); padding: 4px 12px;
  overflow-wrap: anywhere;   /* 긴 파일명도 칩 내부에서 줄바꿈 — 옆 요소 침범 금지 */
}
.fb-file-chip .fb-file-size { color: var(--dim); font-size: 14px; flex: none; }
/* 붙여넣기 안내 — 파일 입력 아래 한 줄(칩 목록과 겹치지 않게 블록으로 분리) */
.fb-paste-hint { margin: 8px 0 0; font-size: 14.5px; color: var(--muted); line-height: 1.55; }
.fb-paste-hint b { color: var(--text); font-weight: 500; }
/* 익명 보호 주의 — 안내 아래 별도 줄. 경고색(--gold) 마커 + 본문은 --text 로 또렷하게 */
.fb-paste-warn { display: block; margin-top: 3px; color: var(--text); }
.fb-paste-warn::before { content: '⚠ '; color: var(--gold); }
/* 첨부 칩 보강 — 썸네일 + 개별 제거(✕). 붙여넣기분은 파일 대화상자에 남지 않아 칩에서만 지울 수 있다 */
.fb-file-chip { padding-right: 4px; }
.fb-file-thumb {
  flex: none; width: 26px; height: 26px; object-fit: cover;
  border: 1px solid var(--border); border-radius: var(--r-xs); background: var(--bg-elev);
}
.fb-file-ico { flex: none; }
.fb-file-name { min-width: 0; overflow-wrap: anywhere; }
.fb-file-x {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; margin-left: -2px;
  font-family: inherit; font-size: 14px; line-height: 1; cursor: pointer;
  color: var(--muted); background: transparent; border: none; border-radius: 50%;
}
.fb-file-x:hover { color: var(--neg); background: var(--bg-elev); }
.fb-file-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.fb-hint { font-size: 15px; font-weight: 400; color: var(--muted); }
.fb-error { font-size: 15px; font-weight: 500; color: var(--neg); }
.fb-submit-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.fb-msg { font-size: 15px; color: var(--muted); }
.fb-msg.ok { color: var(--pos); font-weight: 500; }
.fb-msg.err { color: var(--neg); font-weight: 500; }
.fb-btn-sm { padding: 9px 18px; font-size: 15px; }   /* button-sm — 알약 */

/* 목록 — board-row(8px + 헤어라인). 공지는 좌측 인셋 강조 */
.fb-list { display: flex; flex-direction: column; gap: 10px; }
.fb-item { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.fb-item.open { border-color: var(--border-strong); box-shadow: var(--shadow-card); }
/* 공지(최상단 고정) — 은은한 강조: 인디고 좌측 바(inset shadow 라 레이아웃 영향 없음) */
.fb-item.fb-notice {
  background: var(--bg-elev); border-color: var(--border);
  box-shadow: inset 3px 0 0 var(--accent);
}
.fb-item.fb-notice .fb-item-head:hover { background: var(--surface-soft); }
.fb-item-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
  padding: 13px 18px; cursor: pointer;
}
.fb-item-head:hover { background: var(--surface-soft); }
.fb-item-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.fb-title {
  flex: 1 1 240px; min-width: 0;
  font-size: 18px; font-weight: 500; color: var(--text);
  overflow-wrap: anywhere;   /* 공백 없는 긴 제목도 행 내부 줄바꿈(keep-all 예외 — 넘침 방지 우선) */
}
.fb-meta {
  flex: none; display: inline-flex; align-items: center; flex-wrap: wrap;
  gap: 6px 10px; max-width: 100%; font-size: 15px; color: var(--muted);
}
/* 상태 배지 — 전부 알약(틴트 + 짝 잉크). 접수=gray · AI 코딩중=sky · 반영=mint · 보류=amber · 공지=indigo
   ('검토중' 은 2026-08-25 'AI 코딩중' 으로 개명 — 클래스명 st-review 는 그대로 두어 색이 바뀌지 않는다) */
.fb-badge {
  flex: none; display: inline-block; font-size: 13px; font-weight: 400; line-height: 1.45;
  padding: 3px 10px; border-radius: var(--r-pill); white-space: nowrap;
  color: var(--tint-gray-ink); background: var(--tint-gray); border: 1px solid transparent;
}
.fb-badge.st-review { color: var(--tint-sky-ink); background: var(--tint-sky); border-color: transparent; }
.fb-badge.st-done { color: var(--tint-mint-ink); background: var(--tint-mint); border-color: transparent; }
.fb-badge.st-hold { color: var(--tint-amber-ink); background: var(--tint-amber); border-color: transparent; }
.fb-badge.fb-mine { color: var(--tint-indigo-ink); background: var(--tint-indigo); border-color: transparent; }
.fb-badge.fb-notice-badge { color: var(--tint-indigo-ink); background: var(--tint-indigo); border-color: transparent; }
/* 댓글 수 — 글쓴이가 목록에서 '반응이 있나'를 바로 알게. 0 이면 렌더 자체를 안 한다 */
.fb-badge.fb-cmt-count { color: var(--tint-sky-ink); background: var(--tint-sky); border-color: transparent;
  font-variant-numeric: tabular-nums; }
/* 처리 결과(공식 답변) — 익명 규칙의 예외라 시각적으로도 확실히 구분한다 */
.fb-badge.fb-official-badge { color: var(--tint-mint-ink); background: var(--tint-mint); border-color: transparent;
  font-weight: 500; }

/* ===== 처리 프로세스 도식(2026-08-25) — 게시판 상단 정적 안내 =====
   접수(사용자) → [분석 → 코드작성 → 테스트] → 관리자 승인(서비스 관리자) → 배포·공지.
   ⭐정렬 규칙(매직넘버 금지): 최상위 노드(li)는 단일 단계·화살표·그룹이 **같은 테두리 두께 + 같은 상단
     패딩 + 같은 캡션 슬롯 높이**를 갖는다 → 단계 상자의 윗선이 저절로 맞는다. 그룹만 테두리를 보이게
     하고(--accent 파선) 좌우/아래 패딩만 더 준다(상단 패딩은 건드리지 않는다 — 건드리면 정렬이 깨진다).
   ⭐색: 사람 단계=sky · Claude 단계=indigo(AI 관례) · 최종=mint. 전부 틴트 토큰만 쓴다(hex 금지).
   ⭐절대배치 없음 · 나열은 전부 flex-wrap → 좁은 폭에서 넘침이 물리적으로 불가(황금률 ⑤). */
.fb-flow {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 18px 22px 20px; margin-bottom: 14px;
}
.fb-flow-h { font-size: 19px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; margin: 0 0 12px; }
.fb-flow-steps {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center;
  gap: 2px 5px; margin: 0; padding: 0; list-style: none;
}
.fb-flow-steps > li {
  display: flex; flex-direction: column; align-items: center; min-width: 0;
  border: 1px dashed transparent; border-radius: var(--r-lg); padding: 8px 9px;
}
/* 캡션 슬롯 — 그룹만 내용이 있고 나머지는 빈 칸(정렬 기준). 고연령 가독성 위해 14px 이상 유지 */
.fb-fcap {
  display: block; min-height: 24px; font-size: 15.5px; line-height: 24px; text-align: center;
  color: var(--accent-deep); font-weight: 600; white-space: nowrap;
}
.fb-frow { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 9px; }
.fb-fbox {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 11px 20px; border-radius: var(--r-pill);
  font-size: 18px; font-weight: 500; line-height: 1.4; white-space: nowrap;
  color: var(--tint-gray-ink); background: var(--tint-gray);
}
.fb-fbox.is-human { color: var(--tint-sky-ink); background: var(--tint-sky); }
.fb-fbox.is-ai { color: var(--tint-indigo-ink); background: var(--tint-indigo); }
.fb-fbox.is-done { color: var(--tint-mint-ink); background: var(--tint-mint); }
/* 담당 주체 소캡션 — 상자 아래(위쪽 캡션 슬롯과 반대편이라 겹칠 일이 없다) */
.fb-fwho { display: block; margin-top: 5px; font-size: 15px; line-height: 1.4; color: var(--muted); white-space: nowrap; }
/* 화살표 — 장식(aria-hidden). ⚠️ min-height 는 항상 .fb-fbox 와 같은 값(세로 중앙 정렬 불변식) */
.fb-fchev {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; font-size: 23px; line-height: 1; color: var(--dim);
}
.fb-fchev::before { content: '→'; }
.fb-fsep .fb-fchev { min-width: 20px; }
/* ②~④ 묶음 — 파선 브래킷. ⚠️상단 패딩은 다른 노드와 반드시 동일(8px), 좌우·아래만 여유.
   ⚠️ 선택자는 반드시 `.fb-flow-steps > li.fb-fgroup` — `.fb-fgroup` 단독은 위 `li` 규칙(명시도 0,1,1)에
      져서 테두리가 transparent 로 남는다(2026-08-25 실측에서 브래킷이 안 보였던 원인). */
.fb-flow-steps > li.fb-fgroup { border-color: var(--accent); padding: 8px 14px 12px; }
.fb-flow-note {
  margin: 14px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--muted);
  text-align: center; word-break: keep-all;
}
.fb-flow-note b { color: var(--text); font-weight: 600; }
/* ② 중간 폭(900~1240) — 한 줄을 유지하려고 한 단계만 축소. 라벨 16px(하한 14px 여유).
   ⚠️ 노드의 **상단 패딩(8px)은 절대 건드리지 않는다** — 상자 윗선 정렬 불변식.
   좌우·아래 패딩과 글자·간격만 줄인다. */
@media (min-width: 900px) and (max-width: 1240px) {
  .fb-flow { padding: 16px 18px 18px; }
  .fb-flow-h { font-size: 18px; }
  .fb-flow-steps { gap: 2px 4px; }
  .fb-flow-steps > li { padding: 8px 8px; }
  .fb-flow-steps > li.fb-fgroup { padding: 8px 12px 11px; }
  .fb-fcap { font-size: 15px; }
  .fb-frow { gap: 7px; }
  .fb-fbox { font-size: 16px; padding: 10px 17px; min-height: 46px; }
  .fb-fchev { min-height: 46px; font-size: 20px; }
  .fb-fsep .fb-fchev { min-width: 17px; }
  .fb-fwho { font-size: 14.5px; }
  .fb-flow-note { font-size: 15px; }
}
/* 좁은 폭 — 가로 스크롤 금지(세로 스택). 빈 캡션 슬롯은 접고 화살표는 아래 방향으로.
   ⭐경계값 재산출(2026-08-25 확대 후 실측) — 가로 한 줄의 실폭이 730px → **881px** 로 커졌다.
     도식 카드의 안쪽 폭은 사이드바 고정 여부 때문에 뷰포트에 대해 두 구간으로 갈린다.
       · vw ≥ 1100(사이드바 고정): 안쪽폭 ≒ vw − 309 (실측 1201→892 · 1241→932), 단 vw≥1387 은 1086 고정
       · vw < 1100(드로어):        안쪽폭 ≒ vw − 109 (실측 787→678)
     즉 **가장 좁아지는 지점이 vw 1100 바로 위**(791px)라 거기가 병목이다. 그래서 3단으로 나눈다.
       ① vw ≥ 1241  : 원본 크기 한 줄(881 ≤ 932, 여유 51px)
       ② 900~1240   : 한 단계 축소해 한 줄 유지(아래 min-width 블록) — 병목 vw 1100/900 양쪽에서 검증
       ③ ≤ 899      : 세로 스택
     ②를 두지 않고 1240 에서 바로 스택하면 1000~1240 구간에서 세로로 길어지며 좌우가 더 허전해진다. */
@media (max-width: 899px) {
  .fb-flow-steps { flex-direction: column; align-items: center; gap: 0; }
  .fb-flow-steps > li { max-width: 100%; padding: 5px 9px; }
  .fb-fcap:empty { display: none; }
  .fb-fcap { white-space: normal; }
  .fb-flow-steps > li.fb-fsep { padding: 0; }
  .fb-fchev { min-height: 32px; font-size: 21px; }
  .fb-fchev::before { content: '↓'; }
  .fb-fgroup .fb-fchev { min-height: 50px; font-size: 23px; }
  .fb-fgroup .fb-fchev::before { content: '→'; }   /* 그룹 안은 좁은 폭에서도 가로 흐름 유지 */
}
/* 폰 폭 — 그룹 안 3단계(분석→코드작성→테스트)가 한 줄에 남도록 한 단계 압축.
   압축이 없으면 '테스트'만 다음 줄로 내려가 앞 줄 끝에 '→' 가 홀로 남는다(2026-08-25 실측).
   라벨은 15.5px 유지(고연령 가독성 하한 14px). */
@media (max-width: 560px) {
  .fb-flow { padding: 16px 14px 18px; }
  .fb-flow-h { font-size: 18px; }
  .fb-fbox { font-size: 16.5px; padding: 10px 17px; min-height: 46px; }
  .fb-flow-steps > li.fb-fgroup { padding: 8px 10px 12px; }
  .fb-fgroup .fb-frow { gap: 6px; }
  .fb-fgroup .fb-fbox { font-size: 15.5px; padding: 9px 14px; min-height: 44px; }
  .fb-fgroup .fb-fchev { min-width: 16px; min-height: 44px; font-size: 20px; }
}
/* 폰 표준폭(360~400px) — 한 단계 더 압축해 그룹 3단계를 한 줄에 유지. 라벨 하한 14px 사수.
   실측(2026-08-25): 도식 카드의 안쪽 폭 ≒ 뷰포트폭 − 85px. */
@media (max-width: 400px) {
  .fb-flow { padding: 16px 10px 18px; }
  .fb-fbox { font-size: 15.5px; padding: 9px 15px; min-height: 42px; }
  .fb-fgroup .fb-frow { gap: 3px; }
  .fb-fgroup .fb-fbox { font-size: 14px; padding: 7px 10px; min-height: 38px; }
  .fb-fgroup .fb-fchev { min-width: 12px; min-height: 38px; font-size: 16px; }
}
/* 구형 최소폭(≤350px) — 더 줄이면 라벨이 14px 밑으로 내려가므로 그룹 안까지 세로로 흘린다.
   (한 줄 유지에 매달리면 '테스트'만 다음 줄로 내려가 앞 줄 끝에 화살표가 홀로 남는다) */
@media (max-width: 350px) {
  .fb-fgroup .fb-frow { flex-direction: column; gap: 4px; }
  .fb-fgroup .fb-fchev { min-height: 24px; font-size: 16px; }
  .fb-fgroup .fb-fchev::before { content: '↓'; }
}

/* ===== 개선 이력 배너(2026-08-03, flow 가시화) — 게시판 상단 "이렇게 반영되고 있어요" ===== */
.fb-changelog {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-card);
  padding: 16px 20px; margin-bottom: 16px;
}
.fb-cl-head { display: flex; align-items: baseline; gap: 10px 14px; flex-wrap: wrap; }
.fb-cl-title { font-size: 19px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
/* 'AI 가동 중' 라이브 인디케이터 — 자동 처리 체계가 돌고 있다는 신호 */
.fb-cl-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500; color: var(--tint-mint-ink);
  background: var(--tint-mint); border-radius: var(--r-pill); padding: 3px 12px;
  white-space: nowrap; align-self: center;
}
.fb-cl-pulse {
  width: 8px; height: 8px; border-radius: 50%; background: var(--pos);
  animation: fbClPulse 1.8s ease-in-out infinite;
}
@keyframes fbClPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(15,138,95,0.35); }
  50% { opacity: 0.55; box-shadow: 0 0 0 4px rgba(15,138,95,0); }
}
@media (prefers-reduced-motion: reduce) { .fb-cl-pulse { animation: none; } }
/* 3단 파이프라인(2026-08-04) — 접수 | 개발중 | 개선됨. 좁은 폭에선 1열로 순차 쌓임 */
.fb-cl-cols {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 12px;
}
@media (max-width: 900px) { .fb-cl-cols { grid-template-columns: 1fr; } }
.fb-cl-col {
  background: var(--surface-inset); border: 1px solid var(--border-soft);
  border-radius: var(--r-md); padding: 12px 14px; min-width: 0;
}
.fb-cl-col-h {
  display: flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 600; color: var(--muted); margin-bottom: 8px;
}
.fb-cl-col-h b { color: var(--text); font-variant-numeric: tabular-nums; }
.fb-cl-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.fb-cl-dot-gray { background: var(--tint-gray-ink); }
.fb-cl-dot-sky { background: var(--brand-blue); }
.fb-cl-dot-mint { background: var(--pos); }
.fb-cl-col-list { display: flex; flex-direction: column; gap: 5px; }
.fb-cl-item { display: flex; align-items: baseline; gap: 8px; font-size: 15px; color: var(--text); line-height: 1.5; min-width: 0; word-break: keep-all; }
.fb-cl-text { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fb-cl-date { flex: 0 0 auto; font-size: 13px; color: var(--dim); font-variant-numeric: tabular-nums; }
.fb-cl-empty { font-size: 14px; color: var(--placeholder); }

/* ===== 피드백 댓글(2026-07-31) ===== */
/* AI 응답 댓글(2026-08-04, thread 체계) — 'Lens AI' 인디고 잉크 + 좌측 인셋 블록.
   연달아 달려도 블록 사이 여백·라운드로 바가 이어져 보이지 않게, 본문은 바에서 14px 띄움 */
/* .fb-cmt(뒤 선언)의 padding:10px 0 이 이기지 않게 복합 선택자로 명시도 상향 */
.fb-cmt.fb-cmt-ai {
  background: var(--surface-inset); border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 10px 16px; margin: 8px 0; border-bottom: 0;
}
.fb-cmt.fb-cmt-ai + .fb-cmt.fb-cmt-ai { margin-top: 10px; }
.fb-cmt-author-ai { color: var(--accent-deep); font-weight: 600; }
.fb-ai-note { font-size: 13px; color: var(--dim); margin-left: 2px; }
/* AI plan 댓글의 시각 요소(2026-08-05) — 코드 변경·화면 변화·관리자 승인.
   ⭐ 목적이 '정교한 diff 전달'이 아니라 **AI가 코드를 고치고 사람이 승인한다는 인식**이라
      의도적으로 투박하게 둔다(작업자 방침). 색은 팔레트 변수만 사용. */
.fb-code {
  margin: 8px 0; padding: 10px 12px; border-radius: var(--r-md);
  background: var(--bg-elev2); border: 1px solid var(--border);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px; line-height: 1.6; overflow-x: auto; white-space: pre;
}
.fb-code-line { display: block; padding: 0 4px; border-radius: 3px; }
.fb-code-line.del { color: var(--neg); background: rgba(213,25,75,0.08); }
.fb-code-line.add { color: var(--pos); background: rgba(15,138,95,0.10); }
.fb-code-line.ctx { color: var(--dim); }
/* 화면 변화 2패널 — 좁은 폭에서는 위아래로 쌓임 */
.fb-uidiff { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0; }
@media (max-width: 760px) { .fb-uidiff { grid-template-columns: 1fr; } }
.fb-ui-panel { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; min-width: 0; }
.fb-ui-cap { font-size: 13px; font-weight: 600; color: var(--dim); margin-bottom: 6px; }
.fb-ui-row { font-size: 14px; line-height: 1.6; color: var(--muted); word-break: keep-all; }
.fb-ui-row.hot { color: var(--text); border: 1px solid var(--neg); border-radius: var(--r-sm); padding: 4px 8px; margin: 4px 0; }
/* 관리자 승인 — 절차 노출 장치(실행 권한 아님) */
.fb-approve { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 2px;
  padding: 10px 12px; background: var(--surface-inset); border: 1px dashed var(--border-strong); border-radius: var(--r-md); }
.fb-approve-q { font-size: 15px; font-weight: 500; color: var(--text); }
.fb-approve-wait { font-size: 13px; color: var(--dim); }
.fb-approve.done { border-style: solid; border-color: transparent; background: var(--tint-mint); color: var(--tint-mint-ink); font-size: 15px; font-weight: 500; }
/* 대기 요청 — 붉은 계열로 '멈춰 있음'을 알린다(작업자 지시). 승인으로 넘어갈 수 있어 버튼 유지 */
.fb-approve.hold { border-style: solid; border-color: var(--neg); background: var(--tint-rose); }
.fb-approve .fb-approve-state { font-size: 15px; font-weight: 500; color: var(--neg); }
.fb-approve-btn.hold { color: var(--neg); border-color: var(--neg); }
.fb-cmts { margin-top: 16px; border-top: 1px solid var(--border-soft); padding-top: 14px; }
.fb-cmt { padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
.fb-cmt:last-of-type { border-bottom: 0; }
.fb-cmt-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
  font-size: 13px; line-height: 1.45; color: var(--muted); margin-bottom: 5px;
}
.fb-cmt-author { font-weight: 500; color: var(--text); }
.fb-cmt-when { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.fb-cmt-edit-btn, .fb-cmt-del {
  flex: none; border: 0; background: transparent; cursor: pointer;
  padding: 2px 6px; font-family: inherit; font-size: 13px; color: var(--dim); border-radius: var(--r-sm);
}
.fb-cmt-edit-btn { margin-left: auto; }               /* 수정이 있으면 여기서 우측 정렬 시작 */
.fb-cmt-edit-btn + .fb-cmt-del { margin-left: 0; }    /* 둘 다 있으면 붙여서 배치 */
.fb-cmt-del { margin-left: auto; }
.fb-cmt-edit-btn:hover { color: var(--accent); background: var(--surface-soft); }
.fb-cmt-del:hover { color: var(--neg); background: var(--surface-soft); }
.fb-cmt-edit { margin-top: 4px; }
.fb-cmt-edit-input {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 58px;
  padding: 10px 12px; font-family: inherit; font-size: 16px; line-height: 1.6;
  color: var(--text); background: var(--bg-elev); border: 1px solid var(--border-strong);
  border-radius: var(--r-sm); outline: none;
}
.fb-cmt-edit-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--primary-subdued); }
.fb-cmt-body {
  font-size: 16px; line-height: 1.7; color: var(--text);
  white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere;
}
/* 공식 답변 — 좌측 민트 인셋으로 일반 댓글과 한눈에 구분(board-row-notice 패턴과 동일 계열) */
.fb-cmt-official {
  background: var(--surface-soft); border-radius: var(--r-md);
  padding: 10px 12px; box-shadow: inset 3px 0 0 var(--tint-mint-ink);
}
.fb-cmt-loading, .fb-cmt-empty { font-size: 15px; line-height: 1.6; padding: 4px 0 10px; }
.fb-cmt-form { margin-top: 12px; }
.fb-cmt-input {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 58px;
  padding: 10px 12px; font-family: inherit; font-size: 16px; line-height: 1.6;
  color: var(--text); background: var(--bg-elev); border: 1px solid var(--border-strong);
  border-radius: var(--r-sm); outline: none;
}
.fb-cmt-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--primary-subdued); }
.fb-cmt-actions {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 8px 12px; margin-top: 8px;
}
.fb-cmt-official-opt {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; line-height: 1.5; color: var(--muted); cursor: pointer;
}

/* 행 확장부 */
.fb-body-wrap { border-top: 1px solid var(--border-soft); padding: 16px 18px 18px; }
.fb-body {
  margin: 0; font-size: 17px; line-height: 1.7; color: var(--text);
  white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere;
}
.fb-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.fb-thumb { display: block; flex: none; }
.fb-thumb img {
  width: 132px; height: 99px; object-fit: cover; display: block;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg);
}
.fb-thumb:hover img { border-color: var(--accent); }
.fb-item-tools {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-soft);
}
.fb-tool-label { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--muted); }
.fb-tool-label .fb-status-sel { width: auto; font-size: 15px; padding: 8px 12px; min-height: 0; }
/* button-danger — 흰 바탕 + 빨간 글자 알약 */
.fb-del { color: var(--neg); }
.fb-del:hover { color: var(--neg); background: var(--tint-rose); border-color: var(--tint-rose); }
/* 수정(본인 글) — 중립·보조(button-neutral) */
.fb-edit-btn { border-color: var(--border); }
/* empty-state — 차가운 오프화이트 + 푸른 점선 */
.fb-empty {
  text-align: center; padding: 32px 18px; font-size: 17px; color: var(--muted);
  background: var(--bg); border: 1px dashed var(--border-strong); border-radius: var(--r-lg); box-shadow: none;
}

/* 작성일 옆 '(수정됨)' — 날짜와 한 덩어리로 묶어 좁은 폭에서 줄이 갈려도 분리되지 않게 */
.fb-when { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px 6px; min-width: 0; }
.fb-edited { font-size: 14px; color: var(--muted); white-space: nowrap; }

/* 인라인 수정 폼 — 펼침 영역 안(별도 페이지 이동 없음). 절대배치 없음 · 나열은 전부 flex-wrap */
.fb-edit { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.fb-edit .fb-field { margin-bottom: 12px; }
/* 분류·제목이 한 행(.fb-row)일 때는 행 자체가 여백을 가지므로 필드 여백 제거 — 작성 화면과 동일 간격 */
.fb-edit .fb-row .fb-field { margin-bottom: 0; }
.fb-edit .fb-textarea { min-height: 120px; }
.fb-edit .fb-submit-row { gap: 10px 12px; margin-top: 2px; }
/* 안내·오류 문구는 버튼 옆에 두되 길어지면 아래 줄로 — 버튼을 밀어내거나 넘치지 않게 */
.fb-edit .fb-msg, .fb-edit .fb-hint { flex: 1 1 240px; min-width: 0; }
.fb-edit .fb-msg:empty { display: none; }   /* 빈 상태 메시지가 안내 문구를 밀지 않도록 */
/* 폼/썸네일이 확장부 첫 요소일 때(본문 없음·편집 중) 이중 구분선·과잉 여백 제거 */
.fb-body-wrap > .fb-thumbs:first-child { margin-top: 0; }
.fb-body-wrap > .fb-edit:first-child { margin-top: 0; padding-top: 0; border-top: none; }

/* =====================================================================
   settings_panel/index.html — CBT 참가사 담당자 '우리 회사 사용 현황' (2026-08-12)
   ---------------------------------------------------------------------
   담당자(user_orgs.role='admin')에게만 보이는 블록. 운영사 스태프 화면과 시각적으로도
   섞이지 않게 별도 카드 묶음으로 둔다. 데이터 격리는 서버 책임, 여기는 레이아웃만.
   ⭐표는 전부 .org-scroll(overflow-x:auto) 안에 넣는다 — 좁은 폭에서 nowrap 표가
     카드 밖으로 삐져나가는 사고를 물리적으로 막는다(docs/frontend-charts.md §4-1).
   ⭐고연령 가시성: 본문 15px(표)·라벨 14px, 흐린 --dim 은 캡션에만. 값은 --text/--accent.
   ===================================================================== */
.org-card { margin-bottom: 20px; padding: 24px; }
/* 제목 + 배지/보조문구는 한 줄이되 flex-wrap — 좁은 폭·긴 회사명이면 아래 줄로 내려간다(겹침 불가) */
.org-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 6px; }
.org-title { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.org-sec-title { margin: 0; font-size: 18px; font-weight: 600; color: var(--muted); }
.org-code { padding: 2px 10px; border-radius: var(--r-pill); font-size: 13px; font-weight: 500;
  background: var(--tint-indigo); color: var(--tint-indigo-ink); white-space: nowrap; }
.org-note { font-size: 14px; color: var(--dim); }
.org-sub { margin: 0 0 16px; font-size: 15px; color: var(--muted); }
.org-empty { margin: 16px 0 0; font-size: 16px; color: var(--muted); }
.org-foot { margin: 12px 0 0; font-size: 13px; color: var(--dim); }
/* KPI 칸 — 면 정책(카드 안의 칸 = surface-inset + 표급 헤어라인, 그림자 없음) */
.org-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.org-kpi-box { min-width: 0; padding: 12px 14px; background: var(--surface-inset);
  border: 1px solid var(--border-table); border-radius: var(--r-md); }
.org-kpi-k { font-size: 14px; color: var(--dim); line-height: 1.4; }
.org-kpi-v { margin-top: 2px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--text);
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; overflow-wrap: anywhere; }
.org-kpi-v.is-cost { color: var(--accent); }
.org-kpi-v.is-time { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
/* 표 — 헤더 아래는 표급 헤어라인, 행 사이는 soft. 숫자 열은 .num(전역 tabular 규칙)에 우측정렬만 더한다 */
.org-scroll { overflow-x: auto; }
.org-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.org-table.is-wide { min-width: 560px; }   /* 6열(건별 이력)은 폰 폭에서 뭉개느니 가로 스크롤 */
.org-table th { padding: 8px 8px; font-size: 14px; font-weight: 500; color: var(--muted);
  text-align: left; white-space: nowrap; border-bottom: 1px solid var(--border-table); }
.org-table td { padding: 10px 8px; color: var(--text); vertical-align: top;
  border-bottom: 1px solid var(--border-soft); }
.org-table tbody tr:last-child td { border-bottom: none; }
.org-table tbody tr:hover { background: var(--surface-soft); }
.org-table td.num, .org-table th.num { text-align: right; white-space: nowrap; }
.org-table .org-when { color: var(--muted); white-space: nowrap; }
.org-table .org-user { font-weight: 600; }
.org-table .org-co { overflow-wrap: anywhere; }   /* 공백 없는 긴 회사명도 셀 안에서 접힌다(전역 keep-all 예외) */
.org-table .org-kind { color: var(--muted); }
.org-table .org-cost { font-weight: 600; color: var(--accent); }
@media (max-width: 560px) {
  /* 순수 1fr 금지 — minmax(0,1fr) 이어야 셀 min-content 가 새어나오지 않는다(2026-08-10 사고) */
  .org-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .org-card { padding: 18px 16px; }
  .org-table { font-size: 14px; }
}

/* =====================================================================
   ⬇⬇ 템플릿 인라인 <style> 오버라이드 (DESIGN.md / Stripe 안) ⬇⬇
   ---------------------------------------------------------------------
   대상: base.html(사이드바·상단바 아이콘·최근조회 드롭다운) ·
        dashboard/index.html(홈 landing-light 전용 스타일) ·
        dashboard/company.html(상세 인라인) · watchlist/index.html(정렬 셀렉트) ·
        registration/login.html.
   이유: 해당 파일들은 페이지 전용 스타일을 자체 <style> 로 갖고 있어(=app.css 뒤에 로드)
        토큰 교체만으로는 Stripe 인상이 되지 않는다. 템플릿을 건드리지 않기 위해
        여기서 `html body` 로 특이도만 올려 알약·인디고·푸른 그림자로 되돌린다.
        (되돌리려면 이 블록만 지우면 원래 스타일이 그대로 살아난다)
   ===================================================================== */

/* --- 포커스 링(공통) — outline 은 레이아웃을 밀지 않는다 --- */
button:focus-visible, a:focus-visible, select:focus-visible,
input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* =====================================================================
   base.html — 사이드바(sidebar-nav) · 상단바 아이콘 · 최근 조회 드롭다운
   ===================================================================== */
/* 사이드바 = 흰 배경 + 우측 헤어라인. 활성 항목은 primary-subdued 배경 + 인디고 글자.
   폭(200px)은 현행 유지 — DESIGN.md 220px 로 바꾸려면 base.html 의 .app-nav width 와
   .app-main margin-left 두 값을 함께 맞춰야 한다(docs/frontend-charts.md §5). */
html body .app-nav { background: var(--bg-elev); color: var(--text); border-right: 1px solid var(--border); padding: 16px 12px 20px; }
html[data-theme="dark"] body .app-nav { background: var(--bg-elev); color: var(--text); border-right: 1px solid var(--border); }
html.nav-open body .app-nav { box-shadow: var(--shadow-raised); }
html[data-theme="dark"].nav-open body .app-nav { box-shadow: var(--shadow-raised); }
html body .app-nav-brand { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; }
html body .app-nav-brand .brand-stock { color: var(--brand-blue); }
html body .app-nav-brand .dot { color: var(--navy); }
/* 드로어(<1100px)에서만 닫기 버튼(34px)이 로고와 한 줄에 놓인다.
   200px 사이드바 − 좌우 여백(12+12) = 164px 안에 [로고 ~139px(600)] + gap + [닫기 34px] 를 넣으면
   로고는 min-content 라 줄지 않아 닫기 버튼이 오른쪽으로 밀린다 → 헤드 여백·gap 을 회수해
   버튼이 사이드바 경계를 넘지 않게 한다(로고 600 으로 폭이 ~4px 늘어난 만큼 되돌리는 보정).
   데스크톱(≥1100px)은 닫기 버튼이 display:none 이라 이 보정이 필요 없다. */
@media (max-width: 1099px) {
  html body .app-nav-head { gap: 6px; padding-left: 4px; padding-right: 4px; }
}
html body .app-nav-close { border-radius: var(--r-pill); color: var(--dim); }
html body .app-nav-close:hover { background: var(--surface-soft); color: var(--text); }
html[data-theme="dark"] body .app-nav-close { color: var(--dim); }
html[data-theme="dark"] body .app-nav-close:hover { background: var(--surface-soft); color: var(--text); }
html body .app-nav-menu a {
  padding: 11px 12px; border-radius: var(--r-md);   /* 터치 타깃 ≥44px 유지(고연령 사용자) */
  color: var(--dim); font-size: 15px; font-weight: 500;
}
html body .app-nav-menu a:hover { background: var(--surface-soft); color: var(--text); }
html body .app-nav-menu a.active { background: var(--primary-subdued); color: var(--accent-deep); font-weight: 500; }
html[data-theme="dark"] body .app-nav-menu a { color: var(--dim); }
html[data-theme="dark"] body .app-nav-menu a:hover { background: var(--surface-soft); color: var(--text); }
html[data-theme="dark"] body .app-nav-menu a.active { background: var(--primary-subdued); color: var(--accent-deep); }
html body .app-nav-backdrop { background: rgba(13,37,61,.45); }

/* 상단바 햄버거·최근 조회 — 알약 기하 + raised 드롭다운 */
html body .nav-toggle { border-radius: var(--r-pill); color: var(--muted); }
html body .nav-toggle:hover { background: var(--surface-soft); color: var(--accent); }
html body .hist-trigger {
  height: 40px; padding: 0 16px;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--bg-elev); color: var(--muted); font-size: 15px; font-weight: 500;
}
html body .hist-trigger:hover,
html body .hist-trigger[aria-expanded="true"] { background: var(--surface-soft); border-color: var(--border-strong); color: var(--accent); }
html body .hist-dd { border-radius: var(--r-lg); border: 1px solid var(--border); box-shadow: var(--shadow-raised); }
html[data-theme="dark"] body .hist-dd { box-shadow: var(--shadow-raised); }
html body .hist-title { font-size: 13px; color: var(--dim); font-weight: 500; }
html body .hist-item { font-size: 15px; border-radius: var(--r-sm); }
html body .hist-item:hover { background: var(--surface-soft); }
html body .hist-item .hist-when { font-size: 13px; color: var(--dim); font-variant-numeric: tabular-nums; }
html body .hist-empty { font-size: 15px; color: var(--muted); }
html body .mem-alert-banner { background: var(--neg); color: #fff; font-size: 15px; font-weight: 500; }

/* =====================================================================
   dashboard/index.html (홈, body.landing-light) 인라인 <style> 오버라이드
   ===================================================================== */
/* 상단바·검색바 — 홈 전용 하드코딩 흰색/그림자 제거 */
html body.landing-light .topbar { background: var(--topbar-bg); box-shadow: none; border-bottom: 1px solid var(--border); }
html body.landing-light .topbar .search-box { background: var(--bg-elev); border: 1px solid var(--border-strong); }
html body.landing-light .topbar .search-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--primary-subdued); }
html[data-theme="dark"] body.landing-light .topbar .search-box { background: var(--bg-elev2); border: 1px solid var(--accent); box-shadow: none; }
html[data-theme="dark"] body.landing-light .topbar .search-box .ico { color: var(--dim); }
html[data-theme="dark"] body.landing-light .topbar .search-box input::placeholder { color: var(--placeholder); }
html[data-theme="dark"] body.landing-light .topbar .search-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--primary-subdued); }
html body.landing-light .navlink { background: var(--bg-elev); border-color: var(--border); box-shadow: none; }
html body.landing-light .navlink:hover { background: var(--surface-soft); }

/* 환영 배너 — ⭐그라데이션 메시(로그인과 함께 유이한 사용처). 글자는 딥네이비 잉크로 대비 확보 */
html body.landing-light .welcome-banner {
  background: var(--gradient-mesh); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-xl);
  padding: 24px 32px; box-shadow: var(--shadow-card);
}
html body.landing-light .welcome-banner::after { background: rgba(255,255,255,0.40); }
html body.landing-light .wb-text h1 { font-size: 30px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
html body.landing-light .wb-text p { font-size: 17px; line-height: 1.7; color: var(--muted); }
/* 배너 우측 장식 아이콘(📊) — **전 폭에서 숨김**(2026-08-12 작업자 지시).
   AI 브리핑이 들어오면서 배너 본문이 길어졌고, 장식이 문구 폭을 뺏는다.
   마크업은 남겨둔다(되살릴 때 이 한 블록만 지우면 됨). */
html body.landing-light .wb-art { display: none; }
html[data-theme="dark"] body.landing-light .welcome-banner::after { background: rgba(255,255,255,0.06); }
html[data-theme="dark"] body.landing-light .wb-art { background: rgba(255,255,255,0.08); }
/* ===== 홈 AI 시장 브리핑(2026-08-12) — 환영 배너의 안내 문구 자리 =====
   ⭐배너 바탕은 그라데이션 메시(파스텔/다크 모두 저채도 면)라 **새 색을 만들지 않는다** —
     문구는 배너 본문과 같은 잉크(--text), 배지만 .wb-art 와 같은 반투명 흰 알약 + 헤어라인.
   ⭐면책 문구는 --dim 을 쓰지 않는다: 메시의 보라 구간(#e4dcf6) 위에서 --dim(#5a6b85)은 명도비
     4:1 아래로 떨어진다(13px 소형 글자 기준 미달). --muted 로 올리고 '은은함'은 크기(13px)와
     굵기(400)로만 낸다 — 고연령 가시성 우선 원칙.
   ⭐겹침: 장식용 원(::after, position:absolute)은 배너의 비위치 자식보다 위에 그려져 우상단 글자를
     흰 40% 로 덮는다. .wb-text 에 z-index 1 을 줘 텍스트가 항상 원 위에 오게 한다
     (상단바 z-index 20 · 검색 드롭다운 30 보다 낮아 다른 겹침은 생기지 않는다). */
html body.landing-light .wb-text { position: relative; z-index: 1; min-width: 0; }
/* 인사말 안전핀 — 계정명은 공백 없는 긴 토큰(메일주소형)일 수 있다. 전역 keep-all + overflow-wrap:normal
   이라 그대로 두면 배너 밖으로 나가 잘린다(배너 overflow:hidden). '한 줄에 도저히 안 들어갈 때만'
   토큰 안에서 끊는다 — 한글 어절 줄바꿈은 그대로. */
html body.landing-light .wb-text h1 { overflow-wrap: anywhere; }
html body.landing-light .wb-brief-line { font-size: 17px; line-height: 1.65; color: var(--text); font-weight: 500; }
html body.landing-light .wb-brief-text { color: var(--text); }
html body.landing-light .wb-brief-badge {
  background: rgba(255,255,255,0.55); border: 1px solid var(--border);
  color: var(--accent-deep); font-size: 13px; font-weight: 500;
}
html body.landing-light .wb-brief-disc { font-size: 13px; line-height: 1.5; color: var(--muted); }
html[data-theme="dark"] body.landing-light .wb-brief-badge { background: rgba(255,255,255,0.10); }
/* 좁은 폭 — 60~90자 브리핑이 배너를 세로로 밀지 않게 단계적으로 압축한다.
   가로 오버플로는 구조적으로 불가(배너 폭 = .container 폭, 고정폭 나열 없음 · keep-all + 어절 줄바꿈).
   ⭐560px 이하에서 아트(📊)를 감추는 이유: 70px + gap 20px 가 390px 화면 텍스트 폭의 약 25% 를
     먹어 브리핑이 6줄까지 늘어난다. 감추는 대신 문구를 3~4줄로 유지한다(장식 < 정보). */
@media (max-width: 760px) {
  html body.landing-light .welcome-banner { padding: 18px 20px; }
  html body.landing-light .wb-text h1 { font-size: 24px; margin-bottom: 6px; }
  html body.landing-light .wb-brief-line { font-size: 16px; line-height: 1.6; }
  html body.landing-light .wb-art { width: 56px; height: 56px; font-size: 28px; }
}
@media (max-width: 560px) {
  html body.landing-light .wb-art { display: none; }
  html body.landing-light .wb-text h1 { font-size: 22px; }
  html body.landing-light .wb-brief-line { font-size: 15.5px; }
}

/* 홈 큰 검색 박스 — 알약(search-bar). 96px 프롬프트 박스를 60px 알약으로 낮춘다 */
html body.landing-light .goal-box {
  min-height: 60px; padding: 12px 24px;
  border-radius: var(--r-pill); border: 1px solid var(--border-strong); box-shadow: none;
}
html body.landing-light .goal-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--primary-subdued); }
html body.landing-light .goal-box input { font-size: 17px; }
html body.landing-light .goal-box input::placeholder { color: var(--placeholder); }
html body.landing-light .goal-search .search-dd { border-radius: var(--r-lg); }

/* 도구 카드 — 12px + card 그림자(hover 시 raised) */
html body.landing-light .menu-card {
  border-radius: var(--r-lg); border: 1px solid var(--border); box-shadow: var(--shadow-card);
  transition: box-shadow .16s ease, border-color .16s ease, transform .16s ease;
}
html body.landing-light .menu-card:hover {
  transform: translateY(-3px); box-shadow: var(--shadow-raised);
  border-color: var(--border-strong); background: var(--bg-elev);
}
html body.landing-light .mc-icon { border-radius: var(--r-lg); }
html body.landing-light .mc-1 { color: var(--tint-rose-ink); background: var(--tint-rose); }
html body.landing-light .mc-2 { color: var(--tint-sky-ink); background: var(--tint-sky); }
html body.landing-light .mc-3 { color: var(--tint-indigo-ink); background: var(--tint-indigo); }
html body.landing-light .menu-card.mcb-1::before { background: var(--accent2); }
html body.landing-light .menu-card.mcb-2::before { background: var(--brand-blue); }
html body.landing-light .menu-card.mcb-3::before { background: var(--accent); }
html body.landing-light .menu-card-title { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
html body.landing-light .menu-card-desc { font-size: 16px; line-height: 1.7; color: var(--muted); }
html body.landing-light .mc-go { font-size: 15px; font-weight: 500; color: var(--accent); }
html body.landing-light .section-label h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
html body.landing-light .section-label span { font-size: 15px; color: var(--dim); }

/* 홈 KPI·카드 — 12px + card 그림자. 값은 metric-xl(700/tnum/-0.02em), 색을 칠하지 않는다.
   ⭐면은 흰 카드(--bg-elev) 유지: 홈 KPI 는 '카드 안의 칸'이 아니라 페이지 캔버스(--bg) 위에 놓인
   최상위 카드이고, 같은 그리드의 .hd-card 와 위·아래 라인을 맞춘 형제다. 여기서 면을 누르면
   캔버스와 명도비 1.06(라이트)·1.05(다크)로 카드 경계가 사실상 사라진다 → 눌린 면은 쓰지 않는다. */
html body .hd-kpi, html body .hd-card { border-radius: var(--r-lg); border: 1px solid var(--border); box-shadow: var(--shadow-card); }
html body .hd-kpi-link:hover, html body .hd-kpi-views:hover { border-color: var(--border-strong); box-shadow: var(--shadow-raised); }
html body .hd-kpi-label { font-size: 15px; font-weight: 500; color: var(--dim); }
html body .hd-kpi-value {
  font-size: 32px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--text);
  font-variant-numeric: tabular-nums;
}
html body .hd-kpi-unit { font-size: 16px; font-weight: 400; color: var(--dim); letter-spacing: 0; }
html body .hd-kpi-tags { font-size: 13px; color: var(--dim); }
html body .hd-kpi-go { font-size: 13px; font-weight: 500; color: var(--accent); }
html body .hd-card-title { font-size: 18px; font-weight: 500; color: var(--text); }
html body .hws-more { font-size: 15px; font-weight: 500; }
/* empty-state — 오프화이트 + 푸른 점선 */
html body .hws-empty {
  border-radius: var(--r-lg); font-size: 17px; color: var(--muted);
  background: var(--bg); border: 1px dashed var(--border-strong);
}

/* 홈 드롭다운 — 12px + raised 그림자 */
html body .hd-vh-menu, html body .hd-tf-menu { border-radius: var(--r-lg); box-shadow: var(--shadow-raised); padding: 8px; border-color: var(--border); }
html body .hd-vh-row, html body .hd-tf-item { border-radius: var(--r-sm); font-size: 15px; }
html body .hd-vh-row:hover, html body .hd-tf-item:hover { background: var(--surface-soft); }
html body .hd-tf-item.active { background: var(--accent); color: var(--on-accent); font-weight: 500; }
html body .hd-tf-item.active .hd-tf-cnt { color: var(--on-accent); }
html body .hd-vh-meta, html body .hd-tf-cnt, html body .hd-vh-empty { font-size: 13px; color: var(--dim); }
html body .hd-vh-meta { font-variant-numeric: tabular-nums; }
html body .hd-tf-btn { border-radius: var(--r-pill); border-color: var(--border); font-size: 14px; font-weight: 500; color: var(--muted); padding: 6px 14px; }
html body .hd-tf-btn:hover { background: var(--surface-soft); border-color: var(--border-strong); }
html body .hd-tf-btn b { color: var(--accent); font-weight: 500; }
html body .hd-tf-reset { font-size: 13px; border-top-color: var(--border-soft); color: var(--dim); }
html body .hd-tf-reset:hover { color: var(--accent); }

/* 홈 즐겨찾기 표 — 파란 헤더 대신 차가운 오프화이트 밴드 + 잉크(SPEC §3.1 가운데정렬 유지) */
html body .hd-table { font-size: 15px; }
html body .hd-table th {
  background: var(--bg); color: var(--muted);
  font-size: 13px; font-weight: 500; border-bottom: 1px solid var(--border-table);
}
html body .hd-table thead th:first-child { border-top-left-radius: var(--r-md); }
html body .hd-table thead th:last-child { border-top-right-radius: var(--r-md); }
html body .hd-table th[data-key]:hover { background: var(--bg-elev2); color: var(--text); }
html body .hd-table td { border-bottom: 1px solid var(--border-table); font-variant-numeric: tabular-nums; }
html body .hd-table tbody tr:hover { background: var(--surface-soft); }
html body .hd-table tbody tr:hover td { background: transparent; }   /* 전역 tr:hover td 와 이중 적용 방지 */
html body .hd-table .t-name { font-weight: 500; letter-spacing: 0; }
html body .hd-table-note { font-size: 13px; color: var(--dim); }
html body .hd-table-note b { color: var(--text); font-weight: 500; }
/* financials.html 고정 헤더도 같은 톤으로 */
html body #fs-statements thead th { background: var(--bg); color: var(--muted); font-size: 13px; font-weight: 500; }

/* =====================================================================
   watchlist/index.html — 정렬 셀렉트(select 토큰)
   ===================================================================== */
html body .wl-sort-select {
  padding: 8px 34px 8px 12px; font-size: 15px;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background-color: var(--bg-elev); color: var(--text);
}
html body .wl-sort-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--primary-subdued); }

/* =====================================================================
   dashboard/company.html 인라인 <style> — 팔레트 밖 하드코딩·기하 보정
   레이아웃 규칙(kpi-visuals flex-wrap, affil-hist-row minmax)은 손대지 않는다.
   ===================================================================== */
html body .kpi-row .fin-kpi-k { font-size: 13px; font-weight: 500; color: var(--dim); }
html body .kpi-row .fin-kpi-sub { font-size: 13px; color: var(--dim); }
/* 워드클라우드 단어 — 700 유지(2026-07-30 복원). 종전 500 은 "얇은 시각언어" 전제였으나 그 전제가
   폐기됐고(원본의 얇음 미채택), 워드클라우드는 가중치를 크기 + 굵기로 읽는 요소라 얇으면 판독이 나빠진다.
   크기는 JS 인라인(fontSize)이 담당하며, 배치는 렌더 후 offsetWidth 측정 + shrink-to-fit 이라
   굵기가 변해도 넘침이 생기지 않는다(자간 -0.02em 은 숫자·라틴 리듬 유지용으로 그대로). */
html body .kw-word { font-weight: 700; letter-spacing: -0.02em; }
/* ===== 임직원수 출처 표기(2026-08-11) =====
   ⭐KPI 8칸(1100~1400px 구간)에서 '국민연금 2026.06 기준'은 한 줄에 안 들어간다 —
   말줄임되면 출처가 통째로 사라지므로 이 카드의 보조줄만 두 줄로 흘린다(어절 단위·keep-all).
   .kpi-row .fin-kpi-sub 의 nowrap/ellipsis 를 덮어야 하므로 같은 계열 + 클래스 하나 더로 특이도 확보.
   (기준월을 2026-06 이 아니라 2026.06 으로 찍는 이유는 company.html empSourceInfo 주석 참조 —
    하이픈이 줄바꿈 지점이라 '2026-'/'06' 으로 갈라졌다)
   ⭐이 클래스는 이제 두 카드가 쓴다(2026-08-11 QA):
     · 종업원수 — '국민연금 2026.06 기준 · 사업장 3곳 합산 · 동명 5곳 중 대표'
                  (집계 기준 안내 — 값은 대표 사업자등록번호 그룹의 합. '최대 1곳'이 아니다)
     · 매출     — '1인당매출 5억 · 국민연금 기준'(분모 출처 병기)
   ⭐기준 안내는 두 조각이 각각 조건부로 붙는다: 사업장 2곳 이상이면 '사업장 N곳 합산',
     동명 법인이 2곳 이상이면 '동명 N곳 중 대표'. 최장(둘 다)은 라이브 실측 상장 매칭 2,569사 중
     9사(0.35%)뿐이고 그때 보조줄이 한 줄 더 접힌다. 칸 높이는 그리드 행이 함께 늘어
     인접 칸을 밀지 않는다(겹침 없음 — 넘침은 아래 anywhere 안전핀이 물리적으로 차단).
   ⭐overflow-wrap:anywhere 는 물리적 넘침 방지용 안전핀 — keep-all + overflow:visible 조합에서
     한 낱말이 칸보다 넓으면(예: '12,345억' 류 긴 토큰 + 1025~1150px 구간의 116px 칸) 옆 카드 위로
     글자가 삐져나간다. anywhere 는 '한 줄에 도저히 안 들어갈 때만' 낱말 안에서 끊어 넘침을
     물리적으로 불가능하게 만든다(평소 줄바꿈은 그대로 어절 단위). 칸 폭은 grid minmax(0,1fr)
     이라 min-content 축소 부작용(sh-mx-nm 사고)은 없다. */
html body .kpi-row .fin-kpi-sub.fin-kpi-sub-wrap {
  white-space: normal; overflow: visible; text-overflow: clip;
  line-height: 1.35; word-break: keep-all; overflow-wrap: anywhere;
}
/* 회사개요 KV 값 옆 출처 — 값(잉크)과 구분되게 한 단계 낮추되 흐린 --dim 은 쓰지 않는다(고가시성).
   긴 회사·긴 출처 문구(출처 + 집계 기준 안내)에서도 값 줄을 밀지 않게 어절 단위로 접힌다. */
html body .report-kv .kv-row .v .kv-src {
  margin-left: 6px; font-size: 14px; color: var(--muted);
  word-break: keep-all; overflow-wrap: anywhere;
}
/* 툴팁(집계 기준 설명 · 합계 참고값)이 붙은 출처만 커서로 '설명 있음'을 알린다 */
html body .report-kv .kv-row .v .kv-src[title] { cursor: help; }

/* ===== 임직원수 추이(sec-emp) — 국민연금 연말 스냅샷 5개년 숫자표(2026-08-11) =====
   출처 배지는 알약이라 줄 중간에서 쪼개지면 안 된다(390px 실렌더에서 '국민연금 ·'/'기준' 으로 갈라졌다) */
html body #sec-emp .report-sec-title .tag { white-space: nowrap; }
/* 가로 오버플로 방지 — 표는 항상 overflow-x 래퍼 안에(390px 에서 5개년이 카드 밖으로 새지 않게).
   래퍼가 있어도 상위 그리드 트랙이 auto-min 이면 무력화되지만, 이 섹션은 .report-grid(세로 flex)
   직계라 카드 폭 = 컨테이너 폭으로 고정된다(docs/frontend-charts §4-1). */
html body .emp-trend-wrap { overflow-x: auto; }
html body .emp-trend { font-size: 15px; }
/* 라벨 열(임직원수·전년대비)은 줄바꿈 없이 왼쪽 정렬 — 숫자 열만 우측 tabular */
html body .emp-trend th:first-child,
html body .emp-trend td:first-child { text-align: left; white-space: nowrap; color: var(--muted); }
html body .emp-trend tbody td { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* 임직원수 행 = 이 표의 주인공(값은 색 대신 크기·굵기로만 강조) */
html body .emp-trend tbody tr.row-strong td { font-size: 18px; font-weight: 600; color: var(--text); }
html body .emp-trend tbody tr.row-strong td:first-child { font-size: 15px; font-weight: 500; color: var(--muted); }
html body .emp-trend .emp-unit { margin-left: 2px; font-size: 13px; font-weight: 400; color: var(--muted); }
html body .emp-trend-cap { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
html body .emp-trend-cap + .emp-trend-cap { margin-top: 4px; }
/* 가로 스크롤 안내 — 390px 에서 6열(연도 5 + 라벨)이 잘린다. 지분 매트릭스(.sh-mx-hint)와 같은 관례:
   JS 가 scrollWidth 로 실제 넘칠 때만 켜고(항상 띄우면 소음), 절대배치가 아닌 정상 흐름이라
   아래 캡션을 가리지 않는다. 표 바로 아래 → 기준 캡션 순서. */
html body .emp-trend-hint { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
html body .emp-trend-hint + .emp-trend-cap { margin-top: 6px; }

/* ===== 특수관계인 지분현황 5개년 매트릭스(sec-share · 피드백 #32, 2026-08-11) =====
   1열 주주명 / 연도 5열 / 마지막 비고. 종전 단일 연도 3열 표를 대체한다.
   ⭐ 열이 7개까지 늘어 좁은 폭에서 카드 밖으로 새기 가장 쉬운 표 → 래퍼 overflow-x 필수
      (docs/frontend-charts §4-1). #sec-share 는 #reportRoot(.report-grid, 세로 flex) 직계라
      카드 폭 = 컨테이너 폭으로 고정되어 트랙 auto-min 누수는 없다.
   ⭐ 열 합계·전년대비 증감은 만들지 않는다(보통주/우선주는 분모가 달라 더하면 뜻이 깨짐 — 렌더 주석 참조). */
html body .sh-mx-wrap { overflow-x: auto; }
html body .sh-mx { font-size: 15px; }
/* 주주명 — '법인명 (보통주)'처럼 길다. 폭 상한 안에서 접어 연도 열을 밀지 않게.
   전역 keep-all 이라 공백 없는 한글 사명은 줄바꿈 지점이 0 → overflow-wrap:anywhere 예외 적용.
   ⭐ min-width 필수 — anywhere 는 이 열의 min-content 를 '한 글자'로 만들어 버린다. 표 전체가
      래퍼보다 넓어지면 자동 레이아웃이 각 열을 min-content 로 눌러 이름이 세로 한 줄로 쪼개졌다
      (390px 실렌더에서 '삼/성/생/명/보/험' 확인, 2026-08-11). 하한을 줘서 바닥을 막는다. */
html body .sh-mx th.sh-mx-nm { text-align: left; }
html body .sh-mx td.sh-mx-nm {
  text-align: left; min-width: 148px; max-width: 260px; line-height: 1.45;
  word-break: keep-all; overflow-wrap: anywhere;
}
/* 연도 열 — 값은 한 줄에(고정폭 숫자는 table td.num 이 이미 적용) */
html body .sh-mx tbody td.num { white-space: nowrap; }
/* 연도 머리글에 결산기준일 툴팁이 붙는다 — 설명이 있다는 걸 커서로 알린다(캡션 문구와 짝) */
html body .sh-mx thead th[title] { cursor: help; }
/* 값 옆 '%' — 숫자보다 한 단계 낮춰 5개 열이 %로 뒤덮이지 않게(흐린 --dim 은 쓰지 않는다) */
html body .sh-mx .sh-mx-pct { font-size: 12px; font-weight: 400; color: var(--muted); }
/* 미기재(–)는 '실값 0.00%'와 반드시 달라 보여야 한다 — 색으로만 구분하지 않고 기호 자체가 다르다 */
html body .sh-mx td.sh-mx-na { color: var(--muted); }
html body .sh-mx th.sh-mx-note { text-align: center; }
/* 비고는 이름 열과 다르게 anywhere 를 쓰지 않는다 — '특수관계인'이 '특수관계/인'으로 쪼개졌다(390px 실렌더).
   break-word 는 anywhere 와 달리 min-content 를 줄이지 않아, 열이 낱말 폭 아래로 눌리는 일이 없다.
   값이 전부 '-' 인 표에서 열이 실오라기처럼 얇아지지 않게 하한만 둔다. */
html body .sh-mx td.sh-mx-note {
  min-width: 84px; word-break: keep-all; overflow-wrap: break-word;
}
/* 좁은 폭에서 표가 가로로 잘릴 때만(JS 가 scrollWidth 로 판정) 보이는 안내 — 절대배치 아님(정상 흐름) */
html body .sh-mx-hint { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
/* 부제 '특수관계인 지분현황 (발행주식총수 기준 · 최근 5개 사업연도)' — 좁은 폭에서 괄호 보조문구가
   제목을 밀어 넘치지 않도록 줄바꿈 허용(inline span 이라 기본 wrap 이지만 의도를 고정한다) */
html body .sh-mx-subtitle { word-break: keep-all; }
@media (max-width: 760px) {
  /* 태블릿·모바일: 셀 여백과 이름 열 폭을 줄여 가로 스크롤 양을 최소화(스크롤 자체는 래퍼가 흡수) */
  html body .sh-mx { font-size: 14px; }
  html body .sh-mx thead th, html body .sh-mx tbody td { padding: 8px 7px; }
  html body .sh-mx td.sh-mx-nm { min-width: 116px; max-width: 168px; }
  html body .sh-mx td.sh-mx-note { min-width: 72px; }
}

html body .fold-toggle {
  border-radius: var(--r-pill); background: var(--bg-elev); border-color: var(--border);
  font-size: 15px; font-weight: 500; color: var(--muted); padding: 9px 18px;
}
html body .fold-toggle:hover { border-color: var(--border-strong); background: var(--surface-soft); color: var(--accent); }
html body .radar-tip { border-radius: var(--r-lg); box-shadow: var(--shadow-raised); font-size: 15px; border-color: var(--border); }
html body .radar-tip > b { color: var(--accent); font-size: 15px; font-weight: 500; }
html body .comp-network { border: 1px solid var(--border); border-radius: var(--r-xl); }
html[data-theme="dark"] body .comp-network { border-color: var(--border); }
/* 재무분석·주석분석 — 카드 그리드도 feature-card 계열: 면을 눌러(--surface-inset) 카드 안 카드임을
   드러내고 그림자는 제거(면 + 선으로만 구분). 템플릿 인라인 <style> 의 background:var(--bg-elev) 를
   덮어쓴다(특이도 html body .x > .x). 제목은 색을 쓰지 않고 잉크 600 — 라이브도 이 두 곳은 제목에
   색을 쓰지 않았고(항목명 옆에 이미 인디고 태그·금액 강조가 있어 색을 더하면 소음) */
html body .finalys-card, html body .notes-card {
  background: var(--surface-inset); border-radius: var(--r-lg); box-shadow: none;
}
html body .finalys-summary {
  background: var(--tint-indigo); color: var(--text); font-size: 16px; line-height: 1.7;
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
html body .finalys-tag {
  background: var(--tint-indigo); color: var(--tint-indigo-ink);
  border-radius: var(--r-pill); font-size: 13px; font-weight: 400; padding: 3px 10px;
}
html body .finalys-name { font-size: 17px; font-weight: 600; }
html body .finalys-lines li { font-size: 16px; line-height: 1.7; }
/* ===== 재무분석 항목 신호(2026-07-31 피드백 #34) =====
   데이터는 5단계(강한긍정~강한부정)지만 화면은 긍정/중립/부정 3색 + 강도 표현으로만 구분한다.
   ⭐ 색 단독으로 뜻을 전달하지 않는다 — 이 페이지는 주가 등락에 한국 관례(상승=빨강)를 쓰고 있어
      같은 빨강이 반대 의미로 읽힐 수 있다. 그래서 아이콘(▲●▼)+텍스트를 항상 함께 넣는다
      (색각 이상 사용자 대응 겸함). DESIGN.md 'Don't 색 예외' 참조. */
html body .finalys-head { flex-wrap: wrap; }   /* 긴 항목명 + 배지 → 줄바꿈으로 흘리고 넘치지 않게 */
html body .finalys-sig {
  margin-left: auto;                 /* 카드 우측 정렬 — 요청 스크린샷의 우상단 위치 */
  display: inline-flex; align-items: center; gap: 4px;
  flex-shrink: 0; white-space: nowrap;
  font-size: 13px; font-weight: 500; line-height: 1.45;
  border-radius: var(--r-pill); padding: 3px 10px;
  border: 1px solid transparent;     /* 강도 표현(sig-strong)에서 색을 얹기 위한 자리 */
}
html body .finalys-sig .fs-ico { font-size: 11px; line-height: 1; }
html body .sig-pos { background: var(--tint-mint); color: var(--tint-mint-ink); }
html body .sig-neg { background: var(--tint-rose); color: var(--tint-rose-ink); }
html body .sig-neu { background: var(--tint-gray); color: var(--tint-gray-ink); }
/* '강한' 단계 — 색을 새로 만들지 않고 테두리+굵기로 강도만 올린다(팔레트 밖 hex 금지) */
html body .sig-strong { border-color: currentColor; font-weight: 600; }
/* 신호 해석 주의문구(작업자 지시) — 신호가 하나라도 있을 때만 렌더된다 */
html body .finalys-signal-note {
  margin: -6px 0 14px; font-size: 14px; line-height: 1.6; color: var(--muted);
}
html body .finalys-signal-note b { font-weight: 600; color: var(--text); }
/* 전체 재생성 버튼 — 다른 버튼과 구분되게(작업자 지시 2026-07-31).
   ⭐ 채워진 인디고는 화면당 하나(＋즐겨찾기 추가)이므로 두 번째 primary 를 만들지 않는다.
      대신 앰버 틴트 + 짝 잉크 — 비용이 나가는 동작이라 '주의' 색이 의미에도 맞는다. */
html body .btn-regen {
  background: var(--tint-amber); color: var(--tint-amber-ink);
  border-color: var(--tint-amber-ink); font-weight: 500;
}
html body .btn-regen:hover:not(:disabled) {
  background: var(--tint-amber-ink); color: var(--bg-elev); border-color: var(--tint-amber-ink);
}
html body .btn-regen:disabled { opacity: .7; cursor: default; }

/* ===== 전체 재생성 확인 팝업(2026-07-31 피드백 #7-B) ===== */
html body .regen-list {
  margin: 14px 0 4px; border-top: 1px solid var(--border-soft); text-align: left;
}
html body .regen-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 2px; border-bottom: 1px solid var(--border-soft);
  font-size: 15px; line-height: 1.5; color: var(--text);
}
html body .regen-row > span:first-child { flex: 1; min-width: 0; }
/* 경과일·금액은 자릿수가 세로로 맞아야 훑기 좋다 */
html body .regen-age, html body .regen-krw {
  flex: none; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--muted);
}
html body .regen-age { min-width: 58px; text-align: right; }
html body .regen-krw { min-width: 84px; text-align: right; }
html body .regen-note {
  margin: 12px 0 0; font-size: 14px; line-height: 1.6; color: var(--muted); text-align: left;
}
html body .regen-note b { font-weight: 600; color: var(--text); }
/* 건강도 블록은 눌린 카드 안의 한 단계 더 안쪽 면 — 카드면(inset)과 같은 톤이면 사라지므로 카드면으로 되돌린다
   (라이트: 흰 면 1.12 / 다크: #12203a 1.13 대비) */
html body .finalys-health { background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: var(--r-md); font-size: 16px; }
html body .finalys-health-tag { font-size: 13px; font-weight: 500; color: var(--dim); }
html body .notes-title { font-size: 17px; font-weight: 600; }
html body .notes-text { font-size: 16px; line-height: 1.7; }
html body .nc-amt { color: var(--accent); font-weight: 500; border-bottom: 1px dotted var(--accent); font-variant-numeric: tabular-nums; }
/* 손익추이 이익률 보조표기 — 팔레트 밖 파랑 → 인디고, 이탤릭 해제 + tabular */
html body .fin-margin { color: var(--accent); font-style: normal; font-size: 13px; font-variant-numeric: tabular-nums; }
html[data-theme="dark"] body .fin-margin { color: var(--accent); }
/* 상세 재무상태표 — 숫자 tabular + 행 hover */
html body .detail-bs-table { font-size: 15px; }
html body .detail-bs-table td { font-variant-numeric: tabular-nums; }
html body .detail-bs-table th, html body .detail-bs-table td { border-bottom: 1px solid var(--border-table); }
html body .detail-bs-table tbody tr:hover { background: var(--surface-soft); }
/* 연결/별도·연간/분기 세그먼트 토글 — 알약(pill-tab), 활성은 인디고 채움 */
html body .seg-toggle { border-radius: var(--r-pill); border-color: var(--border); overflow: hidden; }
html body .seg-toggle .seg-btn { font-size: 14px; font-weight: 500; padding: 5px 14px; color: var(--dim); }
html body .seg-toggle .seg-btn + .seg-btn { border-left: 1px solid var(--border); }
html body .seg-toggle .seg-btn.active { background: var(--accent); color: var(--on-accent); font-weight: 500; }
html body .seg-toggle .seg-btn:not(.active):hover { background: var(--surface-soft); color: var(--text); }
/* 키워드 팝업 — 제목은 잉크(인디고는 본문 글자색으로 쓰지 않는다) */
html body .kwx-modal { border-radius: var(--r-lg); }
html body .kwx-title { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
html body .kwx-kicker { font-size: 13px; color: var(--dim); }
html body .kwx-body { font-size: 16px; line-height: 1.7; }
/* =====================================================================
   registration/login.html — 그라데이션 메시 배경 + 12px 카드 + 알약 버튼
   ===================================================================== */
html body .login-wrap { background: var(--gradient-mesh); }
html body .login-box {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 34px 32px 30px; box-shadow: var(--shadow-overlay);
}
html body .login-brand { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
html body .login-brand .brand-stock { color: var(--brand-blue); }
html body .login-brand .dot { color: var(--navy); }
html body .login-error {
  background: var(--tint-rose); border: 1px solid transparent;
  border-radius: var(--r-md); color: var(--tint-rose-ink); font-size: 15px;
}
html body .login-field label { font-size: 15px; font-weight: 500; color: var(--dim); }
html body .login-field input {
  min-height: 46px; padding: 11px 14px; font-size: 17px;
  background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--r-sm);
}
html body .login-field input::placeholder { color: var(--placeholder); }
html body .login-field input:focus { border-color: var(--accent); background: var(--bg-elev); box-shadow: 0 0 0 3px var(--primary-subdued); }
/* button-primary — 인디고 알약(이 화면의 유일한 채움 버튼) */
html body .login-btn {
  min-height: 48px; border-radius: var(--r-pill); font-size: 16px; font-weight: 500; letter-spacing: 0;
  background: var(--accent); color: var(--on-accent); box-shadow: none;
}
html body .login-btn:hover { background: var(--accent-press); box-shadow: none; transform: none; }
html body .login-btn:active { background: var(--accent-press); box-shadow: none; transform: none; }
html body .login-sub { font-size: 15px; color: var(--muted); }
html body .pw-toggle { color: var(--dim); border-radius: var(--r-pill); }
html body .pw-toggle:hover { color: var(--accent); background: var(--primary-subdued); }

/* =====================================================================
   회사명 미리보기 팝업 (plan#32) — 기업 상세 표 속 회사명 클릭 → 후보 미니 팝업
   토큰만 사용(라이트+다크 공용). 배지는 통합 검색 .fd-badge/.fd-b-* 재사용.
   ===================================================================== */
/* 클릭 가능한 회사명 — 점선 밑줄 + 인디고(이 앱의 링크 관례). 본문 크기·굵기는 셀을 따른다 */
.co-peek-link {
  color: var(--accent); cursor: pointer;
  text-decoration: underline; text-decoration-style: dotted;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.co-peek-link:hover { color: var(--accent-deep); text-decoration-style: solid; }
.co-peek-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); }
/* 팝업 본체 — 문서 좌표 absolute(스크롤 동반). z=10: 본문 위, 점프바 15 · 상단바 20 아래
   (콘텐츠와 함께 스크롤되므로 크롬 바 밑으로 지나가야 자연스럽다) */
.co-peek {
  position: absolute; z-index: 10;
  width: min(400px, calc(100vw - 16px));
  max-height: min(480px, 72vh); overflow-y: auto;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-raised);
}
.co-peek .cp-head {
  display: flex; align-items: center; gap: 8px; padding: 10px 8px 8px 14px;
  border-bottom: 1px solid var(--border-soft);
  position: sticky; top: 0; background: var(--bg-elev);
}
.co-peek .cp-title { font-weight: 600; font-size: 16px; line-height: 1.4; min-width: 0; overflow-wrap: anywhere; }
.co-peek .cp-close {
  margin-left: auto; flex: none; border: none; background: none; cursor: pointer;
  color: var(--dim); font-size: 22px; line-height: 1; padding: 2px 9px; border-radius: var(--r-sm);
}
.co-peek .cp-close:hover { color: var(--text); background: var(--surface-soft); }
.co-peek .cp-loading { display: flex; align-items: center; gap: 10px; padding: 15px 14px; font-size: 15px; color: var(--muted); }
/* 후보 행 — 1행(이름+배지+상세 보기, flex-wrap 로 긴 이름 넘침 물리 불가) + 2행(메타) */
.co-peek .cp-row { display: block; padding: 11px 14px; border-bottom: 1px solid var(--border-soft); color: var(--text); }
.co-peek .cp-row:last-of-type { border-bottom: none; }
.co-peek .cp-row:hover { background: var(--surface-soft); }
.co-peek .cp-line1 { display: flex; align-items: baseline; gap: 4px 8px; flex-wrap: wrap; }
.co-peek .cp-nm { font-weight: 600; font-size: 16px; min-width: 0; overflow-wrap: anywhere; }
.co-peek .cp-line1 .fd-badge { align-self: center; }
.co-peek .cp-go { margin-left: auto; flex: none; color: var(--accent); font-size: 14px; font-weight: 500; white-space: nowrap; }
.co-peek .cp-meta { display: block; margin-top: 3px; font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.co-peek .cp-empty { padding: 15px 14px; font-size: 15.5px; color: var(--text); }
.co-peek .cp-empty-sub { margin-top: 4px; font-size: 13.5px; color: var(--dim); }
.co-peek .cp-cap { padding: 8px 14px 10px; font-size: 13px; color: var(--dim); border-top: 1px solid var(--border-soft); }
/* 운영사 찾기(plan#32 A안) — 0건 팝업 하단 버튼 + AI 결과 그룹 헤더. 토큰만 사용(라이트+다크 공용).
   버튼은 .btn.primary 재사용(--on-accent 로 다크에서도 대비 확보), 팝업 폭 안에서 인라인 배치 */
.co-peek .cp-ai-wrap { padding: 1px 14px 13px; }
.co-peek .cp-ai-sub { margin-top: 7px; font-size: 13.5px; color: var(--muted); }
/* 그룹 헤더 — 단계 아이콘 + 후보 상호(굵게) + 근거 1줄(넘치면 말줄임 — 겹침·줄밀림 물리 불가) */
.co-peek .cp-ai-grp {
  padding: 10px 14px 4px; font-size: 14px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-top: 1px solid var(--border-soft);
}
.co-peek .cp-ai-grp:first-child { border-top: none; }
.co-peek .cp-ai-grp b { color: var(--text); }
/* 좁은 폭(<760px) — 하단 시트형(JS 가 .sheet 부여, left/top 인라인 미설정).
   z=90: 하단 '맨 위로' 플로팅(40) 위. 화면 상단(상단바)과는 영역이 겹치지 않는다 */
@media (max-width: 759px) {
  .co-peek.sheet {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 90;
    width: auto; max-height: 62vh;
    border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: none;
    box-shadow: var(--shadow-overlay);
  }
}