/* Marketing Lab — 인쇄물 감각의 라이트 에디토리얼.
   사내 브랜딩 문서(키세카츠 소개서)의 디자인 언어를 웹으로 옮김:
   종이 오프화이트 + 먹색 잉크 + 버밀리언 레드 원포인트, 헤어라인 룰, 각진 모서리. */
:root {
  --paper: #fafaf8;
  --paper-2: #f3f3ef;
  --ink: #1b1d21;
  --muted: #666b73;
  --faint: #9aa0a8;
  --line: #dcddd7;
  --rule: #1b1d21;
  --accent: #c2371f;
  --accent-ink: #a12d18;
  --ok: #2e6e3e;
  --warn: #a06a12;
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  --font-serif: "Nanum Myeongjo", "Noto Serif KR", Batang, "Apple Myungjo", serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.65;
  min-height: 100vh;
  font-size: 15px;
}
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px 96px; }

/* 마스트헤드: 신문/보고서 상단부 */
.topbar {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 22px 0 14px;
  border-bottom: 2px solid var(--rule);
  margin-bottom: 44px;
}
.topbar .logo { font-weight: 800; font-size: 16px; letter-spacing: -0.01em; white-space: nowrap; }
.topbar .logo span { color: var(--accent); }
.topbar nav { display: flex; gap: 22px; font-size: 13px; color: var(--muted); }
/* 제호·탭 레이블은 어떤 폭에서도 접지 않는다 — 접히면 글자 단위로 쪼개져 마스트헤드가 무너진다. */
.topbar nav a { white-space: nowrap; }
.topbar nav a:hover { color: var(--ink); }
.topbar nav a.active { color: var(--ink); font-weight: 700; border-bottom: 2px solid var(--accent); padding-bottom: 2px; }

/* 페이지 도입부 */
.kicker { font-size: 13px; color: var(--accent); font-weight: 700; margin-bottom: 10px; }
h1.hero { font-size: 38px; line-height: 1.32; font-weight: 800; letter-spacing: -0.035em; word-break: keep-all; }
h1.hero em { font-style: normal; color: var(--accent); }
.sub { color: var(--muted); margin-top: 12px; font-size: 16px; max-width: 60ch; word-break: keep-all; }

/* 패널: 모서리 각지게, 선으로만 구분 */
.card { background: #fff; border: 1px solid var(--line); padding: 26px 28px; }

/* 문서형 섹션 헤딩: 번호 + 한글 제목 + 얇은 룰 (사내 문서 관례) */
.sec-head {
  display: flex; align-items: baseline; gap: 12px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 10px; margin-bottom: 18px;
}
.sec-head .no { font-size: 13px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.sec-head .kr { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
.sec-head .en { margin-left: auto; font-size: 12px; color: var(--faint); }
/* F5(IMPL-001 부분): 해석 섹션(AI 답변 관측·실행 로드맵) 헤더에 붙는 방법론 부기 —
   본문 내용이 사실 단정이 아니라 관측 표본 기준 해석임을 헤더에서부터 명시한다. */
.sec-head .method { font-size: 11px; color: var(--faint); font-style: italic; }

/* 입력 폼 */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.form-grid .full { grid-column: 1 / -1; }
label.f { display: block; font-size: 13px; color: var(--ink); font-weight: 700; margin-bottom: 6px; }
input.f, textarea.f {
  width: 100%; background: #fff; color: var(--ink); border: 1px solid var(--line);
  border-bottom-color: #b9bbb2;
  padding: 11px 12px; font-size: 15px; font-family: var(--font-sans); outline: none; border-radius: 0;
}
input.f:focus, textarea.f:focus { border-color: var(--ink); }
input.f::placeholder, textarea.f::placeholder { color: var(--faint); }
button.go {
  background: var(--ink); color: #fff; font-weight: 700; font-size: 15px;
  border: 0; border-radius: 0; padding: 13px 30px; cursor: pointer; font-family: var(--font-sans);
}
button.go:hover { background: #000; }
button.go:active { transform: translateY(1px); }
button.go:disabled { opacity: 0.4; cursor: default; }
button.ghost {
  background: transparent; color: var(--ink); border: 1px solid var(--line);
  border-radius: 0; padding: 9px 16px; font-size: 13px; cursor: pointer; font-family: var(--font-sans);
}
button.ghost:hover { border-color: var(--ink); }
button.ghost:active { transform: translateY(1px); }

/* 파이프라인 진행: 번호 붙은 체크리스트 */
.stages { display: grid; }
.stage { display: flex; align-items: flex-start; gap: 16px; padding: 15px 4px; }
.stage + .stage { border-top: 1px solid var(--line); }
.stage .dot {
  width: 30px; flex: none; font-size: 14px; font-weight: 800;
  color: var(--faint); font-variant-numeric: tabular-nums; padding-top: 1px;
}
.stage.running .dot { color: var(--accent); }
.stage.done .dot { color: var(--ink); }
.stage .st-label { font-weight: 700; font-size: 15px; }
.stage.running .st-label::after { content: " 진행 중"; color: var(--accent); font-size: 13px; }
.stage.done .st-label::after { content: " 완료"; color: var(--muted); font-size: 13px; font-weight: 400; }
.stage .st-desc { color: var(--muted); font-size: 13px; }

.livelog {
  margin-top: 20px; background: var(--paper-2); border: 1px solid var(--line);
  padding: 14px 16px; font-size: 13px; color: var(--muted); max-height: 200px; overflow-y: auto;
}
.livelog .ll { display: flex; gap: 10px; padding: 2px 0; }
.livelog .ll .tag { color: var(--accent); flex: none; font-weight: 700; }
.elapsed { color: var(--muted); font-size: 13px; margin-top: 14px; text-align: center; }

/* 결과 공통 */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.kv { display: grid; grid-template-columns: 120px 1fr; gap: 8px 18px; font-size: 15px; }
.kv .k { color: var(--muted); }

/* 판정 태그: 각진 텍스트 라벨 (의미 상태에만 사용) */
.badge {
  display: inline-block; font-size: 12px; font-weight: 700;
  border: 1px solid currentColor; border-radius: 0; padding: 2px 9px; line-height: 1.5;
}
.badge.good { color: var(--ok); }
.badge.mid { color: var(--warn); }
.badge.bad { color: var(--accent-ink); }
.badge.accent { color: var(--accent-ink); }

/* 사실 문장 출처 게이트(DEC-013): 출처 없는 사실은 원문을 유지한 채 '미확인' 배지로 강등한다 */
.fact-list { display: flex; flex-direction: column; gap: 6px; }
.fact-item { display: flex; align-items: baseline; gap: 8px; font-size: 15px; }
.fact-item-demoted, .fact-demoted { color: var(--muted); }
.fact-source { color: var(--accent); text-decoration: none; font-size: 13px; }
.fact-badge { flex: none; }
.platform-item { display: inline-flex; margin: 0 12px 4px 0; }

/* 상충(conflict) 카드 — 관측 중 발견한 채널 간 불일치를 은폐하지 않고 경고 톤으로 병기한다
   (Task L3, claims/sources 원장의 ledger.conflicts 렌더). */
.conflict-list { display: flex; flex-direction: column; gap: 14px; }
.conflict-item { border-top: 2px solid var(--warn); border-bottom: 1px solid var(--line); padding: 12px 2px 14px; }
.conflict-topic { font-size: 15px; font-weight: 800; color: var(--accent-ink); }
.conflict-note { font-size: 13px; color: var(--muted); margin-top: 4px; word-break: keep-all; }
.conflict-claims { margin: 8px 0 0; padding-left: 18px; font-size: 13px; color: var(--ink); }
.conflict-claims li { margin-top: 2px; word-break: keep-all; }

.bar { height: 6px; background: var(--paper-2); border: 1px solid var(--line); }
.bar > i { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform 0.6s ease; }
@media (prefers-reduced-motion: reduce) { .bar > i { transition: none; } }

/* 네이버 관측 카드 + 검색어트렌드 표 (관측·해석 분리 패널, Task 7).
   상태 기반 카드(observed/not_observed/error/…)와 트렌드 표만 담는다 — 해석 문장은 여기 없다. */
.nv-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 24px; }
.nvc { border-top: 2px solid var(--rule); padding-top: 12px; }
.nvc-label { font-size: 13px; color: var(--muted); font-weight: 700; }
.nvc-headline { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 4px; word-break: keep-all; }
.nvc.tone-ok .nvc-headline { color: var(--ink); }
.nvc.tone-mute .nvc-headline { color: var(--muted); }
.nvc.tone-warn .nvc-headline { color: var(--warn); }
.nvc-summary { font-size: 12px; color: var(--muted); margin-top: 4px; word-break: keep-all; }
.nvc-detail { font-size: 12px; color: var(--faint); margin-top: 2px; word-break: keep-all; }
.nv-provenance { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--faint); word-break: keep-all; }
.nv-unavailable { color: var(--muted); font-size: 14px; padding: 6px 0; }

.trend-metric-label { font-size: 13px; color: var(--muted); font-weight: 700; margin-bottom: 10px; }
.trend-table-wrap { overflow-x: auto; }
.trend-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.trend-table th { text-align: left; font-size: 12px; font-weight: 700; color: var(--muted); padding: 8px 10px; border-bottom: 2px solid var(--rule); }
.trend-table td { padding: 12px 10px; vertical-align: middle; border-top: 1px solid var(--line); word-break: keep-all; }
.trend-table .tt-kw { color: var(--muted); font-size: 12px; }
.trend-table .tt-num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.trend-bars { display: flex; align-items: flex-end; gap: 3px; height: 36px; }
.trend-bars .tb { width: 7px; height: 100%; flex: none; background: var(--paper-2); border: 1px solid var(--line); position: relative; }
.trend-bars .tb i { display: block; position: absolute; left: 0; right: 0; bottom: 0; background: var(--accent); height: calc(var(--p, 0) * 1%); }
.trend-note { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); word-break: keep-all; }
.trend-note b { color: var(--ink); }

@media (max-width: 760px) {
  .nv-cards { grid-template-columns: 1fr 1fr; gap: 16px 20px; }
  .trend-table { font-size: 13px; }
  .trend-table th, .trend-table td { white-space: nowrap; }
}

/* 다섯 레인 기술 진단 패널 (Phase A Task 7, geo.html #lanes-panel — 기존 점수와 독립 산정) */
.badge.mute { color: var(--muted); }
.lane-row { padding: 14px 2px; }
.lane-row + .lane-row { border-top: 1px solid var(--line); }
.lane-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.lane-name { font-weight: 700; letter-spacing: 0.04em; }
.lane-note { font-size: 12px; color: var(--muted); }
.lane-members, .lane-advisory { margin-top: 8px; }
.lane-member { font-size: 13px; padding: 3px 0; }
.lane-member .lm-label { margin-right: 10px; }
.lane-ev { font-size: 12px; color: var(--muted); word-break: break-all; margin-top: 2px; }
.lane-advisory-title { font-size: 12px; color: var(--muted); font-weight: 700; margin-bottom: 4px; }

/* AI API 응답 표본 관측 매트릭스 (Task E5, geo.html #engine-obs-panel) */
.eo-table td { vertical-align: top; }
.eo-table .eo-q { word-break: keep-all; font-size: 13px; }
.eo-stale .badge { opacity: 0.55; } /* 48번 §8: stale은 verdict 문안 흐림 처리 — 숨기지 않는다 */
.eo-relation { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
/* 모바일 nowrap(.trend-table 공통 규칙)보다 뒤에 선언 — 질문·판정 문안은 줄바꿈 허용 */
.eo-table th, .eo-table td { white-space: normal; }

/* 내부 검토용 초안 등 "발행 전" 상태를 알리는 상단 고정 경고 배너 (Task E1, exec.html에서 도입).
   페이지 전용 클래스로 두지 않고 공용으로 둔 이유: 앞으로도 초안형 산출물 페이지가 늘어날 수
   있어 이 패턴(먹색 배경 sticky 배너)을 재사용하게 하기 위함이다. */
.notice-banner {
  position: sticky; top: 0; z-index: 20;
  background: var(--ink); color: #fff;
  padding: 12px 24px; text-align: center;
  font-size: 13px; font-weight: 700; letter-spacing: -0.01em;
}
@media print { .notice-banner { position: static; } }

.hide { display: none !important; }

.footer-note { color: var(--faint); font-size: 12px; text-align: center; margin-top: 56px; }

@media (max-width: 760px) {
  .form-grid, .grid2, .grid3 { grid-template-columns: 1fr; }
  h1.hero { font-size: 27px; }
  .card { padding: 20px 18px; }
  .wrap { padding: 0 18px 64px; }

  /* 마스트헤드: 좁은 화면에서는 신문 1면처럼 제호를 위, 섹션 탭을 그 아래 줄로 내린다.
     한 줄에 밀어넣으면 제호와 탭이 서로를 눌러 글자 단위로 접힌다(모바일 실측 2026-08-28).
     탭 줄은 접지 않고 가로로 흘려보낸다 — 항목이 늘어도 마스트헤드 높이가 자라지 않는다. */
  .topbar {
    flex-direction: column; align-items: stretch; gap: 12px;
    padding: 18px 0 0; margin-bottom: 28px;
  }
  .topbar nav {
    gap: 20px; overflow-x: auto; scrollbar-width: none;
    padding-bottom: 10px; margin-bottom: -2px;
  }
  .topbar nav::-webkit-scrollbar { display: none; }
  .topbar nav a { padding: 3px 0; }
  .topbar nav a.active { padding-bottom: 5px; }
}
@media print {
  body { background: #fff; }
  .topbar nav, .no-print { display: none !important; }
  .card { border-color: #bbb; }
}

/* 리포트 상단 요약 카드 (geo 리포트 — 별점·상태 배지·격차 칩 3종) */
.sum-rating { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sum-stars { line-height: 1; font-size: 26px; letter-spacing: 2px; }
/* 별 1개 = 1em 고정 박스. 채움(-on)/빈(-off) 부분을 overflow:hidden 창 두 개로 잘라 이어붙인다
   — 글리프 이중 렌더(★ 위 ★ overlay) 제거(태양 지시 2026-08-31). 창 폭·글리프 시프트는
   geo.js가 em 단위 inline style로 넣는다. pending(전부 빈 별)은 -off 창만 그려져 회색이 된다. */
.sum-star { display: inline-flex; width: 1em; }
.sum-star-on, .sum-star-off { display: inline-block; overflow: hidden; flex: none; }
.sum-star-on { color: var(--accent); }
.sum-star-off { color: var(--line); }
.sum-star-on > i, .sum-star-off > i { font-style: normal; display: inline-block; width: 1em; text-align: center; }
.sum-score-text { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sum-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }

/* engine-obs 가독성(2026-08-30): 인용 2줄 클램프, 셀 상단 정렬 */
.eo-table td { vertical-align: top; }
.eo-ev { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 240px; }

/* engine-obs 답변 전문 펼침 (52번 v0.2): answer_text 있는 셀만 클릭 가능(커서), 확장 행은
   최대 높이 + 스크롤. 전문은 제3자 인용(quoted_observation) — 인용 부호는 geo.js가 붙인다. */
.eo-cell-open { cursor: pointer; }
.eo-expand td { background: var(--paper-2); }
.eo-expand-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.eo-expand-body { max-height: 260px; overflow-y: auto; white-space: pre-wrap; font-size: 13px; color: var(--muted); }
.eo-expand-urls { margin: 8px 0 0; padding-left: 18px; font-size: 12px; word-break: break-all; }

/* 엔진 아이콘 배지(태양 지시 2026-08-31) — 브랜드 컬러 원형 모노그램, 라이트 에디토리얼 대비 */
.eo-icon { width: 24px; height: 24px; flex: none; vertical-align: middle; }
.eo-engine-head { display: inline-flex; align-items: center; gap: 6px; }
.eo-engine-head .eo-icon { width: 18px; height: 18px; }

/* AI별 진단·대응 (Engine Playbook) — 태양 설계 2026-08-31. 카드 4행, 좌측 엔진+소형 별점,
   우측 분석 1줄+준비 1줄. 라이트 에디토리얼 유지, 모바일 세로 스택. */
.eo-playbook { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.eo-pb-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.eo-pb-head .kr { font-size: 15px; font-weight: 800; letter-spacing: -0.02em; }
.eo-pb-head .en { margin-left: auto; font-size: 11px; color: var(--faint); }
.eo-pb-row { display: grid; grid-template-columns: 250px 1fr; gap: 4px 16px; padding: 12px 0; align-items: start; }
.eo-pb-row + .eo-pb-row { border-top: 1px solid var(--line); }
.eo-pb-left { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.eo-pb-engine { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; }
.eo-pb-engine .eo-icon { width: 30px; height: 30px; }
.eo-pb-stars { font-size: 14px; letter-spacing: 1px; }
.eo-pb-right { font-size: 13px; display: grid; gap: 4px; align-content: start; }
@media (max-width: 640px) { .eo-pb-row { grid-template-columns: 1fr; } }

/* 54번: 경쟁사 인용 출처 역분석 — 도메인 표. 라이트 에디토리얼 유지, 도메인은 관측값(길면 줄바꿈). */
.csv-domain { font-weight: 700; word-break: break-all; }
.csv-count { white-space: nowrap; color: var(--muted); }