/* do-shell.css — 다우오피스(DO) 셸 + 키움렌즈 토큰 오버라이드
   로드 순서: app.css(키움렌즈 원본, 무수정) → do-shell.css(이 파일) → 페이지별 css.
   ① :root 변수만 덮어써 app.css 전체 화면이 DO 팔레트로 따라오게 한다(app.css 규칙은 건드리지 않음).
   ② 셸 grid(헤더 60 / 앱레일 64 / AI 사이드바 260 / main / 채팅 380 / 미니레일 56)와 접기 상태.
   ③ D(기업상세)가 쓰는 공용 클래스: .sec-state(6종) · .tag.unofficial · .skel · .tbl · .sec-flash(chat.css).
   모바일 대응 없음(≥1280 기준). 다크모드 규칙 없음. */

/* ===== ① 토큰 — DO 디자인 관찰치 + 키움렌즈 :root 재정의 ===== */
:root {
  --do-blue: #2F6BFF;
  --do-blue-deep: #1F55E0;
  --do-blue-press: #1744BE;
  --do-blue-bg: #EAF0FF;
  --do-ink: #222222;
  --do-ink-2: #555555;
  --do-ink-3: #888888;
  --do-line: #E8E8E8;
  --do-line-soft: #F0F0F0;
  --do-bg: #FAFAFA;
  --do-white: #FFFFFF;
  --do-red: #F04452;
  --do-r-pill: 9999px;
  --do-r-card: 12px;
  --do-r-composer: 20px;
  --do-shadow-composer: 0 8px 28px rgba(47,107,255,0.10), 0 2px 8px rgba(0,0,0,0.05);
  --do-font: 'Pretendard', 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Malgun Gothic', sans-serif;

  /* 셸 치수 — 접기는 body 클래스가 변수를 0 으로 만든다 */
  --do-h-header: 60px;
  --do-w-rail: 64px;
  --do-w-side: 260px;
  --do-w-chat: 380px;
  --do-w-mini: 56px;

  /* 키움렌즈 변수 오버라이드(계획 §3-2) — 인디고 → DO 블루, 오프화이트 → DO 그레이 */
  --bg: #FAFAFA;
  --bg-elev: #FFFFFF;
  --bg-elev2: #F3F5F9;
  --surface-soft: #F6F8FB;
  --surface-inset: #F3F5F9;
  --border: #E8E8E8;
  --border-soft: #F0F0F0;
  --border-table: #D6DBE3;
  --border-strong: #C5D2EA;
  --text: #222222;
  --muted: #555555;
  --dim: #777777;
  --placeholder: #A0A6B1;
  --accent: #2F6BFF;
  --accent-deep: #1F55E0;
  --accent-press: #1744BE;
  --accent-soft: #5B8AFF;
  --primary-subdued: #EAF0FF;
  --on-accent: #FFFFFF;
  --brand-blue: #2F6BFF;
  --navy: #1C2B4A;
  --c1: #2F6BFF;
  --c2: #0F8A5F;
  --c3: #C08A2B;
  --c4: #7C5CFF;
  --c5: #EA2261;
  --tint-indigo: #EAF0FF;  --tint-indigo-ink: #1F55E0;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-raised: 0 8px 24px rgba(20,40,80,0.10), 0 2px 6px rgba(20,40,80,0.05);
  --shadow-overlay: 0 16px 48px -8px rgba(20,40,80,0.20);
  --topbar-bg: #FFFFFF;
  --jumpnav-bg: rgba(255,255,255,0.96);
  --r-lg: 12px;
  --radius: 12px;
}

/* 접기 상태 */
body.side-collapsed { --do-w-side: 0px; }
body.chat-collapsed { --do-w-chat: 0px; }
body.no-chat { --do-w-chat: 0px; }
/* 반응형(모바일 미대응, 창 축소만): ≤1439 사이드바 접힘 · ≤1279 채팅 320 / 미니레일 0 */
@media (max-width: 1439px) { body:not(.side-forced) { --do-w-side: 0px; } }
@media (max-width: 1279px) { body { --do-w-mini: 0px; } body:not(.chat-collapsed):not(.no-chat) { --do-w-chat: 320px; } }

/* ===== 본문 기본 — 15px(Klens 17 / DO 14 절충) ===== */
html, body { height: 100%; }
body.do-body {
  font-family: var(--do-font);
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
  background: var(--do-bg);
  overflow: hidden;                       /* 스크롤은 <main id="main-scroll"> 가 맡는다 */
  display: grid;
  grid-template-rows: var(--do-h-header) minmax(0, 1fr);
  grid-template-columns: var(--do-w-rail) var(--do-w-side) minmax(0, 1fr) var(--do-w-chat) var(--do-w-mini);
  transition: grid-template-columns .18s ease;
}
body.do-body > .do-header { grid-row: 1; grid-column: 1 / -1; }
body.do-body > .do-rail   { grid-row: 2; grid-column: 1; }
body.do-body > .do-side   { grid-row: 2; grid-column: 2; }
body.do-body > .do-main   { grid-row: 2; grid-column: 3; }
body.do-body > .do-chat   { grid-row: 2; grid-column: 4; }
body.do-body > .do-mini   { grid-row: 2; grid-column: 5; }

/* CDN 실패 감지(do-shell.js → html.cdn-fail) — 차트 캔버스 자리에 안내만 */
html.cdn-fail .cdn-warn { display: block; }
.cdn-warn { display: none; font-size: 13px; color: var(--do-ink-3); padding: 6px 0; }

/* ===== 헤더 60px ===== */
.do-header {
  height: var(--do-h-header); box-sizing: border-box;
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px 0 14px;
  background: var(--do-white); border-bottom: 1px solid var(--do-line);
  z-index: 60; position: relative;
}
.do-logo {
  display: inline-flex; align-items: center; gap: 6px;
  width: calc(var(--do-w-rail) + var(--do-w-side) - 14px - 12px); min-width: 140px; flex: none;
  font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: var(--do-ink);
  text-decoration: none; white-space: nowrap;
  transition: width .18s ease;
}
.do-logo .do-logo-chev { color: var(--do-ink-3); display: inline-flex; }
.do-logo .do-logo-mark { width: 26px; height: 26px; border-radius: 8px; background: var(--do-blue); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; }
.do-header-center { flex: 1; display: flex; justify-content: center; min-width: 0; }
/* 중앙 검색 pill 360px */
.do-search-wrap { position: relative; width: 360px; max-width: 100%; }
.do-search {
  display: flex; align-items: center; gap: 6px;
  height: 38px; box-sizing: border-box; padding: 0 10px 0 6px; margin: 0;
  background: var(--do-bg); border: 1px solid var(--do-line); border-radius: var(--do-r-pill);
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.do-search:focus-within { background: #fff; border-color: var(--do-blue); box-shadow: 0 0 0 3px var(--do-blue-bg); }
.do-search .do-search-scope {
  flex: none; display: inline-flex; align-items: center; gap: 3px;
  height: 28px; padding: 0 8px 0 10px; border-radius: var(--do-r-pill);
  font-size: 13px; color: var(--do-ink-2); background: transparent; border: 0; cursor: default; font-family: inherit;
  white-space: nowrap;
}
.do-search .do-search-scope::after { content: ''; width: 1px; height: 14px; background: var(--do-line); margin-left: 8px; }
.do-search input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent;
  font-family: inherit; font-size: 14px; color: var(--do-ink);
}
.do-search input::placeholder { color: var(--do-ink-3); }
.do-search .do-search-ico { flex: none; color: var(--do-ink-3); display: inline-flex; width: 18px; height: 18px; }
.do-search .do-search-ico svg { width: 18px; height: 18px; }
/* Klens initSearch 가 wrap 에 붙이는 .search-dd — 헤더 pill 보다 넓게 */
.do-search-wrap .search-dd { left: 50%; transform: translateX(-50%); width: 560px; max-width: 560px; z-index: 70; }
.do-search-wrap .search-row { font-size: 15px; padding: 10px 14px; }

/* 헤더 우측 */
.do-header-right { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.do-hicon {
  position: relative; width: 36px; height: 36px; border-radius: 10px; border: 0; background: transparent;
  display: inline-flex; align-items: center; justify-content: center; color: var(--do-ink-2); cursor: default;
}
.do-hicon svg { width: 20px; height: 20px; }
.do-hicon:hover { background: var(--do-bg); }
.do-hicon .do-badge {
  position: absolute; top: 2px; right: 0; min-width: 18px; height: 16px; padding: 0 4px; box-sizing: border-box;
  border-radius: var(--do-r-pill); background: var(--do-red); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; letter-spacing: -0.02em;
}
.do-pill {
  display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 13px; margin-left: 6px;
  border-radius: var(--do-r-pill); font-size: 13px; font-weight: 600; white-space: nowrap; cursor: default;
  font-family: inherit; text-decoration: none;
}
.do-pill.outline { border: 1px solid var(--do-line); background: #fff; color: var(--do-ink-2); }
.do-pill.blue { border: 1px solid var(--do-blue); background: var(--do-blue); color: #fff; }
.do-avatar {
  width: 32px; height: 32px; margin-left: 10px; border-radius: 50%;
  background: linear-gradient(135deg, #2F6BFF, #6A8DFF); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700;
}

/* ===== 좌측 앱 레일 64px ===== */
.do-rail {
  box-sizing: border-box; width: var(--do-w-rail);
  background: var(--do-white); border-right: 1px solid var(--do-line);
  display: flex; flex-direction: column; align-items: center; padding: 8px 0 10px; gap: 2px;
  overflow: hidden;
}
.do-rail .do-rail-spacer { flex: 1; }
.do-rail-item {
  position: relative; width: 56px; height: 54px; border-radius: 10px; text-decoration: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--do-ink-2); font-size: 10.5px; font-weight: 500; letter-spacing: -0.01em;
}
.do-rail-item svg { width: 22px; height: 22px; }
.do-rail-item[aria-disabled="true"] { cursor: default; opacity: .78; }
.do-rail-item[aria-disabled="true"]:hover { background: var(--do-bg); }
.do-rail-item.active { color: var(--do-blue); background: var(--do-blue-bg); font-weight: 700; }
.do-rail-item .do-badge {
  position: absolute; top: 4px; right: 6px; min-width: 18px; height: 16px; padding: 0 4px; box-sizing: border-box;
  border-radius: var(--do-r-pill); background: var(--do-red); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}
.do-rail-item.more svg { width: 16px; height: 16px; }

/* ===== AI 사이드바 260px ===== */
.do-side {
  box-sizing: border-box; width: var(--do-w-side); min-width: 0; overflow: hidden;
  background: var(--do-white); border-right: 1px solid var(--do-line);
  display: flex; flex-direction: column;
  transition: width .18s ease;
}
body.side-collapsed .do-side { border-right-color: transparent; }
.do-side-inner { width: 260px; height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.do-side-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px 8px 18px; }
.do-side-title { font-size: 17px; font-weight: 700; color: var(--do-ink); letter-spacing: -0.01em; }
.do-side-head-btns { display: inline-flex; gap: 2px; }
.do-ibtn {
  width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--do-ink-3);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-family: inherit;
}
.do-ibtn:hover { background: var(--do-bg); color: var(--do-ink); }
.do-ibtn svg { width: 18px; height: 18px; }
.do-side-menu { padding: 4px 10px; display: flex; flex-direction: column; gap: 2px; }
.do-side-item {
  display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: 9px;
  font-size: 14px; color: var(--do-ink); text-decoration: none; white-space: nowrap; cursor: pointer; border: 0; background: transparent;
  font-family: inherit; text-align: left; width: 100%; box-sizing: border-box;
}
.do-side-item:hover { background: var(--do-bg); }
.do-side-item.active { background: var(--do-blue-bg); color: var(--do-blue); font-weight: 600; }
.do-side-item .do-side-ico { width: 20px; display: inline-flex; justify-content: center; font-size: 15px; color: var(--do-ink-2); }
.do-side-item.active .do-side-ico { color: var(--do-blue); }
.do-side-item .do-side-caret { margin-left: auto; color: var(--do-ink-3); font-size: 11px; }
.do-side-item[aria-disabled="true"] { cursor: default; }
.do-side-sub { padding-left: 24px; display: flex; flex-direction: column; gap: 2px; }
.do-side-sub .do-side-item { height: 34px; font-size: 13.5px; }
.do-side-sub .do-side-item::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--do-line); flex: none; }
.do-side-sub .do-side-item.active::before { background: var(--do-blue); }
.do-side-label { margin: 14px 20px 6px; font-size: 12px; font-weight: 600; color: var(--do-ink-3); letter-spacing: 0; }
.do-side-recent { flex: 1; min-height: 60px; overflow-y: auto; padding: 0 10px; display: flex; flex-direction: column; gap: 1px; }
.do-side-recent .do-side-item { height: 34px; font-size: 13.5px; color: var(--do-ink-2); }
.do-side-recent .do-side-item .do-side-when { margin-left: auto; font-size: 11.5px; color: var(--do-ink-3); font-variant-numeric: tabular-nums; }
.do-side-recent .do-side-item .do-side-name { overflow: hidden; text-overflow: ellipsis; }
.do-side-empty { padding: 6px 20px; font-size: 13px; color: var(--do-ink-3); }
.do-side-foot { padding: 8px 10px 14px; border-top: 1px solid var(--do-line-soft); display: flex; flex-direction: column; gap: 2px; }
/* AI 사용량 카드 — 그라데이션 테두리 */
.do-usage {
  margin: 8px 4px 0; padding: 12px 14px; border-radius: 12px; position: relative; background: #fff;
  border: 1px solid transparent;
  background-image: linear-gradient(#fff, #fff), linear-gradient(120deg, #2F6BFF, #8A5CFF, #FF6AA8);
  background-origin: border-box; background-clip: padding-box, border-box;
}
.do-usage-title { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--do-ink); }
.do-usage-title .do-usage-pct { font-size: 12px; font-weight: 600; color: var(--do-blue); font-variant-numeric: tabular-nums; }
.do-usage-bar { height: 6px; margin: 9px 0 7px; border-radius: 3px; background: var(--do-line-soft); overflow: hidden; }
.do-usage-bar > span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #2F6BFF, #8A5CFF); }
.do-usage-sub { font-size: 12px; color: var(--do-ink-2); font-variant-numeric: tabular-nums; }
.do-usage-sub b { color: var(--do-ink); font-weight: 700; }

/* ===== main ===== */
.do-main {
  min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; position: relative;
  background: var(--do-bg); scroll-behavior: smooth;
}
/* 키움렌즈 컨테이너 — 셸 안에서는 폭·여백 재정의(계획 §3-2) */
.do-main .container { max-width: 1280px; margin: 0 auto; padding: 24px 32px 64px; box-sizing: border-box; }
/* 스크롤 컨테이너가 main 이라 점프바는 main 상단(0)에 붙고, 섹션 오프셋은 점프바 높이만큼 */
.do-main .jump-nav { top: 0; }
.do-main .container section { scroll-margin-top: 64px; }
/* 키움렌즈 링크 미리보기 사이드패널은 제거 대상 — 마크업이 남아도 안 보이게 */
.side-workbench { display: none !important; }
/* app.css 의 .topbar/.back-link/.back-float 은 셸에서 쓰지 않는다 */
.do-main .back-link, .do-main .back-float { display: none !important; }
/* 맨 위로 — 셸 밖(body 직계) 고정. #main-scroll 의 scrollTop 을 do-shell.js 가 보고 .show 토글(app.css .to-top 기하 재사용) */
.to-top.do-to-top { position: fixed; right: calc(var(--do-w-chat) + var(--do-w-mini) + 22px); bottom: 24px; z-index: 55; transition: right .18s ease, opacity .18s, transform .18s, visibility .18s; }

/* ===== 우측 미니레일 56px ===== */
.do-mini {
  box-sizing: border-box; width: var(--do-w-mini); overflow: hidden;
  background: var(--do-white); border-left: 1px solid var(--do-line);
  display: flex; flex-direction: column; align-items: center; padding: 10px 0; gap: 6px;
}
.do-mini-item {
  position: relative; width: 40px; height: 40px; border-radius: 10px; border: 0; background: transparent;
  display: inline-flex; align-items: center; justify-content: center; color: var(--do-ink-2); cursor: default; font-family: inherit;
}
.do-mini-item svg { width: 20px; height: 20px; }
.do-mini-item:hover { background: var(--do-bg); }
.do-mini-item.is-btn { cursor: pointer; }
.do-mini-item.active { color: var(--do-blue); background: var(--do-blue-bg); }
.do-mini-item .dot {
  position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--do-red);
  display: none; box-shadow: 0 0 0 2px #fff;
}
.do-mini-item .dot.on { display: block; }
body.no-chat #chat-toggle { display: none; }

/* ===== 공용 — D(기업상세)가 쓰는 클래스 ===== */
/* 섹션 상태 배지 6종: loading | cached | fresh | edited | deleted | empty */
.sec-state {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: var(--do-r-pill);
  font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; vertical-align: middle;
  background: var(--tint-gray); color: var(--tint-gray-ink); border: 1px solid transparent;
}
.sec-state::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.sec-state.loading { background: var(--do-blue-bg); color: var(--do-blue); }
.sec-state.loading::before { animation: sec-pulse 1s ease-in-out infinite; }
.sec-state.cached  { background: var(--tint-gray); color: var(--tint-gray-ink); }
.sec-state.fresh   { background: var(--tint-mint); color: var(--tint-mint-ink); }
.sec-state.edited  { background: var(--tint-amber); color: var(--tint-amber-ink); }
.sec-state.deleted { background: var(--tint-rose); color: var(--tint-rose-ink); }
.sec-state.empty   { background: transparent; color: var(--do-ink-3); border-color: var(--do-line); }
@keyframes sec-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
/* 점프바 섹션 상태 점(개선 #6) */
.jump-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-left: 4px; vertical-align: middle; background: var(--do-line); }
.jump-dot.loading { background: var(--do-blue); animation: sec-pulse 1s ease-in-out infinite; }
.jump-dot.ok { background: var(--pos); }
.jump-dot.fail { background: var(--neg); }

/* 비공식 출처 배지 강제(CLAUDE.md) — .tag 는 app.css 정의 */
.tag.unofficial { background: var(--tint-amber); color: var(--tint-amber-ink); border: 1px solid transparent; font-weight: 600; }
.tag.official { background: var(--tint-sky); color: var(--tint-sky-ink); border: 1px solid transparent; }
.tag.model { background: var(--tint-indigo); color: var(--tint-indigo-ink); border: 1px solid transparent; font-variant-numeric: tabular-nums; }
.src-line { font-size: 12.5px; color: var(--do-ink-3); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.src-line a { color: var(--do-blue); text-decoration: none; }
.src-line a:hover { text-decoration: underline; }

/* 로딩 스켈레톤(개선 #2) — skeletonHTML(n) 이 .skel 을 n 줄 찍는다 */
.skel {
  display: block; height: 14px; border-radius: 6px; margin: 8px 0;
  background: linear-gradient(90deg, #EEF0F4 25%, #F7F8FA 50%, #EEF0F4 75%);
  background-size: 200% 100%; animation: skel-shimmer 1.3s ease-in-out infinite;
}
.skel.w60 { width: 60%; } .skel.w80 { width: 80%; } .skel.w40 { width: 40%; } .skel.w90 { width: 90%; }
.skel.h-lg { height: 22px; } .skel.h-box { height: 120px; border-radius: 10px; }
@keyframes skel-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* 표 공통(개선 #7) — 36px 행·숫자 우정렬·음수색·첫 열 sticky */
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th, .tbl td { height: 36px; padding: 0 12px; border-bottom: 1px solid var(--border-soft); white-space: nowrap; box-sizing: border-box; }
.tbl thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-inset); color: var(--muted); font-weight: 600; font-size: 13px; text-align: left; border-bottom: 1px solid var(--border-table); }
.tbl th.num, .tbl td.num { text-align: right; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.tbl td.neg, .tbl td .neg { color: var(--neg); }
.tbl th:first-child, .tbl td:first-child { position: sticky; left: 0; background: var(--bg-elev); z-index: 2; }
.tbl thead th:first-child { z-index: 3; background: var(--surface-inset); }
.tbl tbody tr:hover td { background: var(--surface-soft); }
.tbl tbody tr:hover td:first-child { background: var(--surface-soft); }
.tbl tr.total td { font-weight: 700; border-top: 1px solid var(--border-table); }

/* 빈 값 표기(개선 #10) — emptyHTML(reason) */
.sec-empty { padding: 18px 16px; border: 1px dashed var(--do-line); border-radius: 10px; color: var(--do-ink-3); font-size: 14px; text-align: center; }
.sec-empty b { color: var(--do-ink-2); font-weight: 600; }

/* KPI 카드 3단 고정 높이·tabular-nums(개선 #5) */
.kpi-fixed { min-height: 108px; display: flex; flex-direction: column; justify-content: center; }
.kpi-fixed .kpi-value { font-variant-numeric: tabular-nums; }

/* 헤더 액션(개선 #11) 및 공통 아이콘 버튼 */
.act-row { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.btn-ico { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: var(--do-r-pill);
  border: 1px solid var(--do-line); background: #fff; color: var(--do-ink-2); font-size: 13.5px; font-weight: 600; font-family: inherit; cursor: pointer; }
.btn-ico:hover { border-color: var(--do-blue); color: var(--do-blue); background: var(--do-blue-bg); }
.btn-ico.primary { background: var(--do-blue); border-color: var(--do-blue); color: #fff; }
.btn-ico.primary:hover { background: var(--do-blue-press); border-color: var(--do-blue-press); color: #fff; }
.btn-ico:disabled { opacity: .55; cursor: default; }
.krw { font-variant-numeric: tabular-nums; color: var(--do-ink-3); font-size: 12.5px; }

/* 페이지 공통 헤더(홈 외 페이지의 제목 행) */
.do-page-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 18px; }
.do-page-head .page-title { margin: 0; font-size: 24px; }
.do-page-head .page-sub { margin: 0; font-size: 14.5px; color: var(--do-ink-2); }

/* 로그인 페이지(셸 밖) */
body.do-login { display: flex; align-items: center; justify-content: center; min-height: 100vh; margin: 0; font-family: var(--do-font);
  background: radial-gradient(900px 500px at 85% -10%, rgba(47,107,255,.12), transparent 60%), radial-gradient(700px 400px at 10% 110%, rgba(138,92,255,.08), transparent 55%), #F4F6FB; }
.login-card { width: 100%; max-width: 400px; background: #fff; border: 1px solid var(--do-line); border-radius: 20px; padding: 34px 32px 30px; box-shadow: 0 24px 60px rgba(20,40,80,.12); box-sizing: border-box; }
.login-brand { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 21px; font-weight: 700; color: var(--do-ink); letter-spacing: -0.02em; margin-bottom: 6px; }
.login-brand .do-logo-mark { width: 30px; height: 30px; font-size: 15px; border-radius: 9px; }
.login-sub { text-align: center; font-size: 13.5px; color: var(--do-ink-3); margin: 0 0 24px; }
.login-field label { display: block; font-size: 13px; font-weight: 600; color: var(--do-ink-2); margin-bottom: 7px; }
.login-field input { width: 100%; box-sizing: border-box; height: 46px; padding: 0 14px; border: 1.5px solid var(--do-line); border-radius: 12px; font-size: 15px; font-family: inherit; color: var(--do-ink); outline: none; background: var(--do-bg); }
.login-field input:focus { border-color: var(--do-blue); background: #fff; box-shadow: 0 0 0 4px var(--do-blue-bg); }
.login-btn { width: 100%; height: 46px; margin-top: 16px; border: 0; border-radius: 12px; background: var(--do-blue); color: #fff; font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer; }
.login-btn:hover { background: var(--do-blue-press); }
.login-error { background: #FDECEE; color: #B3261E; border-radius: 10px; padding: 10px 12px; font-size: 13.5px; margin-bottom: 14px; }
.login-foot { margin-top: 18px; text-align: center; font-size: 12.5px; color: var(--do-ink-3); }

/* ===== 홈 hero 검색(search_box 매크로 size='hero') — DO 컴포저형 큰 입력 ===== */
.hero-search-wrap { position: relative; margin: 18px 0 8px; }
.hero-search {
  display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 14px 16px 12px;
  background: #fff; border: 1px solid var(--do-line); border-radius: var(--do-r-composer);
  box-shadow: var(--do-shadow-composer); transition: border-color .12s, box-shadow .12s;
}
.hero-search:focus-within { border-color: var(--do-blue); box-shadow: 0 8px 28px rgba(47,107,255,0.16), 0 0 0 3px var(--do-blue-bg); }
.hero-search-row { display: flex; align-items: center; gap: 10px; }
.hero-search-ico { flex: none; display: inline-flex; color: var(--do-ink-3); }
.hero-search-ico svg { width: 22px; height: 22px; }
.hero-search input {
  flex: 1; min-width: 0; height: 40px; border: 0; outline: none; background: transparent;
  font-family: inherit; font-size: 18px; color: var(--do-ink);
}
.hero-search input::placeholder { color: var(--do-ink-3); }
.hero-search-go {
  flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--do-blue); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-family: inherit;
}
.hero-search-go svg { width: 16px; height: 16px; }
.hero-search-go:hover { background: var(--do-blue-press); }
.hero-search-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hero-search-foot .chat-chip { cursor: default; }
.hero-search-hint { margin-left: auto; font-size: 12.5px; color: var(--do-ink-3); }
/* initSearch 가 wrap(.hero-search-wrap)에 붙이는 드롭다운 — 박스 폭에 맞춤 */
/* ⚠ app.css .search-dd 의 transform:translateX(-50%) 가 남아 있으면 left:0 인 이 드롭다운이 절반 왼쪽으로 밀려 회사명이 잘린다(2026-09-19 실측) */
.hero-search-wrap .search-dd { left: 0; right: 0; width: auto; max-width: none; transform: none; z-index: 40; }

/* ===== 홈 페이지(pages/home.html) — Klens index.html 의 landing 스타일을 DO 팔레트로 ===== */
.page-home .welcome-banner {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin: 4px 0 8px; padding: 22px 32px; border-radius: 20px;
  background: linear-gradient(115deg, #EAF0FF 0%, #F4F7FF 55%, #FFFFFF 100%);
  border: 1px solid var(--do-line); color: var(--do-ink);
}
.page-home .welcome-banner::after { content: ""; position: absolute; right: -50px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: rgba(47,107,255,0.08); }
.page-home .wb-text { position: relative; z-index: 1; min-width: 0; flex: 1; }
.page-home .wb-text h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 6px; color: var(--do-ink); }
.page-home .wb-text h1 .wb-agent { color: var(--do-blue); }
.page-home .wb-text p { margin: 0; font-size: 15px; color: var(--do-ink-2); }
.page-home .wb-art { position: relative; z-index: 1; flex: none; width: 64px; height: 64px; border-radius: 18px; background: #fff; border: 1px solid var(--do-line); display: flex; align-items: center; justify-content: center; font-size: 30px; }
.page-home .wb-brief { display: none; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--do-line); }
.page-home .wb-brief.on { display: block; }
.page-home .wb-brief-line { display: flex; align-items: flex-start; gap: 8px; font-size: 14.5px; line-height: 1.6; word-break: keep-all; }
.page-home .wb-brief-badge { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 1px 10px; border-radius: var(--do-r-pill); background: var(--do-blue-bg); color: var(--do-blue); font-size: 12.5px; font-weight: 600; white-space: nowrap; margin-top: 2px; }
.page-home .wb-brief-text { color: var(--do-ink); flex: 1; }
.page-home .wb-brief-refresh { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--do-line); background: #fff; color: var(--do-ink-3); cursor: pointer; font-family: inherit; font-size: 13px; }
.page-home .wb-brief-refresh:hover { color: var(--do-blue); border-color: var(--do-blue); }
.page-home .wb-brief-refresh.spin { animation: tl-spin .8s linear infinite; }
.page-home .wb-brief-when { color: var(--do-ink-3); font-size: 12.5px; }

.page-home .home-dash { margin: 26px 0 18px; }
.page-home .hd-kpis, .page-home .hd-row { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.page-home .hd-kpis { margin-bottom: 12px; grid-template-columns: repeat(3, minmax(0,1fr)); }
.page-home .hd-row { align-items: stretch; }
.page-home .hd-pie { grid-column: span 1; display: flex; flex-direction: column; }
.page-home .hd-list { grid-column: span 3; }
.page-home .hd-kpi { position: relative; min-height: 108px; padding: 16px 18px; background: #fff; border: 1px solid var(--do-line); border-radius: 14px; display: flex; flex-direction: column; justify-content: center; gap: 6px; box-sizing: border-box; }
.page-home .hd-kpi-label { font-size: 13px; color: var(--do-ink-3); }
.page-home .hd-kpi-value { font-size: 27px; font-weight: 800; color: var(--do-ink); line-height: 1; font-variant-numeric: tabular-nums; }
.page-home .hd-kpi-unit { font-size: 15px; font-weight: 600; color: var(--do-ink-3); margin-left: 3px; }
.page-home .hd-kpi-tags { font-size: 11.5px; color: var(--do-ink-3); line-height: 1.55; margin-top: 2px; word-break: keep-all; }
.page-home .hd-kpi-go { position: absolute; right: 16px; bottom: 14px; font-size: 12.5px; font-weight: 700; color: var(--do-blue); white-space: nowrap; }
.page-home .hd-kpi-views { cursor: pointer; transition: border-color .12s; }
.page-home .hd-kpi-views:hover { border-color: var(--do-blue); }
.page-home .hd-vh-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 320px; max-width: 440px; background: #fff; border: 1px solid var(--do-line); border-radius: 10px; box-shadow: var(--shadow-raised); padding: 6px; max-height: 340px; overflow-y: auto; }
.page-home .hd-vh-menu[hidden] { display: none; }
.page-home .hd-vh-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 8px 10px; border-radius: 7px; text-decoration: none; font-size: 14.5px; color: var(--do-ink); }
.page-home .hd-vh-row:hover { background: var(--do-bg); }
.page-home .hd-vh-meta { font-size: 12.5px; color: var(--do-ink-3); white-space: nowrap; }
.page-home .hd-vh-empty { padding: 10px; font-size: 13.5px; color: var(--do-ink-3); }
.page-home .hd-card { padding: 16px 18px; background: #fff; border: 1px solid var(--do-line); border-radius: 14px; }
.page-home .hd-card-title { font-size: 15px; font-weight: 700; color: var(--do-ink); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.page-home .hd-tagfilter { position: relative; }
.page-home .hd-tf-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; padding: 5px 11px; border: 1px solid var(--do-line); border-radius: 8px; background: #fff; color: var(--do-ink-3); cursor: pointer; line-height: 1.4; font-family: inherit; }
.page-home .hd-tf-btn:hover { border-color: var(--do-blue); }
.page-home .hd-tf-btn b { color: var(--do-blue); font-weight: 700; }
.page-home .hd-tf-caret { font-size: 10px; opacity: .7; }
.page-home .hd-tf-menu { position: absolute; top: calc(100% + 5px); left: 0; z-index: 30; min-width: 168px; background: #fff; border: 1px solid var(--do-line); border-radius: 10px; box-shadow: var(--shadow-raised); padding: 6px; max-height: 320px; overflow-y: auto; }
.page-home .hd-tf-menu[hidden] { display: none; }
.page-home .hd-tf-item { display: flex; justify-content: space-between; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 8px 10px; border: 0; background: none; border-radius: 7px; font-size: 13.5px; font-weight: 500; color: var(--do-ink); cursor: pointer; font-family: inherit; }
.page-home .hd-tf-item:hover { background: var(--do-bg); }
.page-home .hd-tf-item.active { background: var(--do-blue); color: #fff; font-weight: 700; }
.page-home .hd-tf-cnt { font-size: 12px; color: var(--do-ink-3); }
.page-home .hd-tf-item.active .hd-tf-cnt { color: rgba(255,255,255,.85); }
.page-home .hd-tf-reset { margin-top: 4px; padding: 8px 10px; border-top: 1px solid var(--do-line-soft); font-size: 12.5px; color: var(--do-ink-3); cursor: pointer; }
.page-home .hd-tf-reset:hover { color: var(--do-blue); }
.page-home .hd-pie-wrap { flex: 1; min-height: 190px; position: relative; }
.page-home .hws-more { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--do-blue); text-decoration: none; white-space: nowrap; }
.page-home .hws-more:hover { text-decoration: underline; }
.page-home .hd-table-wrap { max-height: 460px; overflow-y: auto; overflow-x: auto; }
.page-home .hd-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.page-home .hd-table th { position: sticky; top: 0; background: var(--do-blue); z-index: 1; text-align: center; font-size: 12.5px; color: #fff; font-weight: 700; padding: 11px 12px; white-space: nowrap; }
.page-home .hd-table thead th:first-child { border-top-left-radius: 10px; }
.page-home .hd-table thead th:last-child { border-top-right-radius: 10px; }
.page-home .hd-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.page-home .hd-table td.c { text-align: center; }
.page-home .hd-table td { padding: 10px 12px; border-bottom: 1px solid var(--do-line-soft); color: var(--do-ink); white-space: nowrap; }
.page-home .hd-table tbody tr { cursor: pointer; transition: background .1s; }
.page-home .hd-table tbody tr:hover { background: var(--do-bg); }
.page-home .hd-table .t-name { font-weight: 700; }
.page-home .hd-table th[data-key]::after { content: "⇅"; opacity: .55; margin-left: 5px; font-size: 11px; }
.page-home .hd-table th[data-sort="asc"]::after { content: "↑"; opacity: 1; }
.page-home .hd-table th[data-sort="desc"]::after { content: "↓"; opacity: 1; }
.page-home .hd-table th[data-key]:hover { background: var(--do-blue-press); }
.page-home .hd-table-note { margin-top: 10px; font-size: 12px; color: var(--do-ink-3); }
.page-home .hd-table-note b { color: var(--do-ink); font-weight: 700; }
.page-home .hws-empty { width: 100%; box-sizing: border-box; margin: 0 0 18px; padding: 16px 22px; font-size: 15px; color: var(--do-ink-3); background: #fff; border: 1px solid var(--do-line); border-radius: 16px; }

/* 골든셋 칩·최근 분석 칩 */
.page-home .home-chips { margin: 8px 0 22px; }
.page-home .home-chips-title { display: flex; align-items: baseline; gap: 8px; font-size: 14px; font-weight: 700; color: var(--do-ink); margin: 0 0 10px; }
.page-home .home-chips-title span { font-size: 12.5px; font-weight: 500; color: var(--do-ink-3); }
.page-home .chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.page-home .co-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px; border-radius: var(--do-r-pill); border: 1px solid var(--do-line); background: #fff; color: var(--do-ink); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.page-home .co-chip:hover { border-color: var(--do-blue); color: var(--do-blue); background: var(--do-blue-bg); }
.page-home .co-chip .co-chip-mode { font-size: 11px; font-weight: 600; color: var(--do-ink-3); }
.page-home .co-chip.web .co-chip-mode { color: var(--tint-amber-ink); }

/* ===== 즐겨찾기·재무제표·설정 페이지 공통 소품 ===== */
.wl-sort-select { padding: 6px 34px 6px 12px; font-size: 14px; font-family: inherit; border: 1px solid var(--do-line); border-radius: 8px; background-color: #fff; color: var(--do-ink); cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; }
.wl-sort-select:focus { outline: none; border-color: var(--do-blue); }
.wl-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.wl-toolbar .tag-filter { margin: 0 0 0 auto; justify-content: flex-end; }
/* 설정 */
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.st-stat { background: var(--do-bg); border: 1px solid var(--do-line-soft); border-radius: 10px; padding: 14px; }
.st-stat-k { font-size: 13px; color: var(--do-ink-3); }
.st-stat-v { font-size: 22px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }
.st-card { margin-bottom: 20px; padding: 24px; }
.st-card h2 { font-size: 17px; font-weight: 700; margin: 0 0 14px; color: var(--do-ink); display: flex; align-items: baseline; gap: 8px; }
.st-card h2 small { font-size: 13px; font-weight: 400; color: var(--do-ink-3); }
.st-card .tbl { font-size: 13.5px; }
.st-card .tbl th, .st-card .tbl td { height: 34px; }
.st-note { font-size: 13px; color: var(--do-ink-3); margin: 12px 0 0; }
.st-note code { color: var(--do-blue); }
.st-mono { font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.st-kv { display: flex; gap: 36px; flex-wrap: wrap; }
.st-kv .k { font-size: 13px; color: var(--do-ink-3); }
.st-kv .v { font-size: 17px; color: var(--do-ink); margin-top: 2px; }
.st-flag { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--do-r-pill); font-size: 12.5px; font-weight: 600; background: var(--tint-gray); color: var(--tint-gray-ink); }
.st-flag.on { background: var(--tint-mint); color: var(--tint-mint-ink); }
.st-flag.off { background: var(--tint-rose); color: var(--tint-rose-ink); }
.st-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.st-result { margin-top: 10px; font-size: 13.5px; color: var(--do-ink-2); min-height: 20px; }
.st-result.err { color: var(--neg); }
.st-result.ok { color: var(--pos); }
.st-more { margin-top: 10px; }