/* Shopify 리서치 허브 — DESIGN-SYSTEM.md A안 (문서/위키형) 토큰·레이아웃.
   원본 구체값: .planning/design-mockups/A-docs.html */

:root {
  --paper:#faf7f0;
  --panel:#fffdf8;
  --ink:#211d17;
  --muted:#7a7263;
  --line:#e7e0d2;
  --accent:#1f6f54;
  --accent-soft:#e3f0ea;
  --chip:#efe9dc;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Iowan Old Style", "Charter", "Georgia", serif;
  line-height: 1.65;
}

/* ── 상단바 ─────────────────────────────────────────────── */
.topbar {
  height: 52px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  position: sticky;
  top: 0;
  z-index: 5;
}
.brand {
  font-weight: 700;
  letter-spacing: 0.2px;
  color: inherit;
  text-decoration: none;
}
.brand small {
  color: var(--muted);
  font-weight: 400;
  font-size: 12px;
  margin-left: 6px;
}
/* 우측 검색 pill — 검색은 Phase 6, 지금은 disabled input으로 시각만 */
.search {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 6px 14px;
  color: var(--muted);
  font-size: 13px;
  font-family: system-ui;
}
.search input {
  border: none;
  outline: none;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-family: system-ui;
  width: 180px;
}

/* ── 3-pane 레이아웃 ─────────────────────────────────────── */
.layout {
  display: grid;
  grid-template-columns: 270px 1fr 300px;
  min-height: calc(100vh - 52px);
}

/* ── 목차 트리 (좌) ──────────────────────────────────────── */
.toc {
  border-right: 1px solid var(--line);
  padding: 22px 16px;
  background: var(--panel);
}
.toc h4 {
  font-family: system-ui;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px 6px;
}
.tree {
  font-family: system-ui;
  font-size: 13.5px;
}
.tree .n {
  padding: 5px 8px;
  border-radius: 7px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  color: inherit;
  text-decoration: none;
}
.tree .n:hover {
  background: #f1ead9;
}
.tree .lvl1 {
  font-weight: 600;
}
.tree .lvl2 {
  margin-left: 14px;
  color: #3f3a30;
}
.tree .lvl3 {
  margin-left: 28px;
  color: var(--muted);
  font-size: 12.5px;
}
.tree .active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
.tree .cnt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
}
/* 트리 하단 미분류 가상 노드 구분선 (D-08) */
.tree .tree-sep {
  border-top: 1px solid var(--line);
  margin: 8px 0 4px;
}

/* ── 트리 접기/펴기 (캐럿 토글) ─────────────────────────────── */
/* .n 안의 라벨 묶음(캐럿+라벨). cnt는 space-between으로 오른쪽 유지. */
.tree .n-main {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
/* 캐럿: 자식 있는 노드만 클릭 가능. 라벨 이동과 분리(script.js). */
.tree .tree-toggle {
  flex: none;
  width: 12px;
  text-align: center;
  font-size: 9px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  transition: transform 0.15s ease;
}
.tree .tree-toggle:hover {
  color: var(--accent);
}
/* 자식 없는 노드: 캐럿 자리만 비워 라벨 정렬 유지(클릭 불가) */
.tree .tree-toggle.empty {
  visibility: hidden;
  cursor: default;
}
/* 접힘: 자식 숨김 + 캐럿 우향 회전 */
.tree .tree-branch.collapsed > .subtree {
  display: none;
}
.tree .tree-branch.collapsed > .n .tree-toggle {
  transform: rotate(-90deg);
}

/* ── 본문 = 써머리 (중앙) ────────────────────────────────── */
.doc {
  padding: 40px 56px;
  max-width: 760px;
}
.crumb {
  font-family: system-ui;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
}
.doc h1 {
  font-size: 34px;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.meta {
  font-family: system-ui;
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 26px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.doc h2 {
  font-size: 21px;
  margin: 34px 0 10px;
}
.doc p {
  margin: 0 0 15px;
}
.doc ul {
  margin: 0 0 15px;
  padding-left: 22px;
}
.callout {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  padding: 12px 16px;
  border-radius: 0 8px 8px 0;
  font-size: 15px;
  margin: 20px 0;
}

/* stale (써머리 갱신 대기) 앰버 배지 */
.stale {
  font-family: system-ui;
  font-size: 12px;
  color: #9a7b1c;
  background: #fbf3d8;
  border: 1px solid #f0e0a8;
  border-radius: 7px;
  padding: 6px 12px;
  display: inline-block;
  margin-top: 8px;
}

/* 인용 마커 [S#] — accent 색, 밑줄 없음, 작은 위첨자 느낌 */
.citation-marker {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.82em;
  vertical-align: super;
  font-family: system-ui;
  cursor: pointer;
}
.citation-marker:hover {
  text-decoration: underline;
}

/* ── 근거 = 로우데이터 (우) ──────────────────────────────── */
.evi {
  border-left: 1px solid var(--line);
  padding: 22px 18px;
  background: var(--panel);
}
.evi h4 {
  font-family: system-ui;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
}
/* 근거 카드 */
.src {
  font-family: system-ui;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 11px 12px;
  margin-bottom: 11px;
  font-size: 12.5px;
}
.src .t {
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
  margin-bottom: 6px;
}
.src .t a {
  color: inherit;
  text-decoration: none;
}
.src .t a:hover {
  color: var(--accent);
  text-decoration: underline;
}
/* 발췌 스니펫 (근거 카드 미리보기) */
.src .snip {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.4;
  margin-top: 6px;
}
/* 미포함 자료 카드(요약에 아직 안 담김, D-04) — 약간 흐리게 */
.src-dim {
  opacity: 0.82;
  background: #fcfaf5;
}
/* "＋ 요약에 아직 안 담긴 자료 N건" 섹션 제목 */
.sources-remaining {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}
.sources-remaining-h {
  font-family: system-ui;
  font-size: 11.5px;
  color: var(--muted);
  margin: 0 0 12px;
  font-weight: 600;
}
.src .m {
  color: var(--muted);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.multi {
  font-size: 10.5px;
  color: var(--accent);
  font-family: system-ui;
  margin-top: 5px;
}

/* 소스 태그 색 4종 (source_type: youtube/web/community/store) */
.tag {
  font-family: system-ui;
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--chip);
  color: #5a5344;
}
.tag-youtube {
  background: #fde8e6;
  color: #c0392b;
}
.tag-web {
  background: #e6eefb;
  color: #2b5fb0;
}
.tag-community {
  background: #ffe9dd;
  color: #d1490f;
}
.tag-store {
  background: #f0e6fb;
  color: #7d3ac2;
}

/* [S#] 점프 후 하이라이트 (D-02) — .flash 부여 시 배경이 잠깐 변함 */
.src {
  transition: background-color 0.4s ease;
}
.src.flash {
  background: var(--accent-soft);
}

/* ── 로우데이터 상세 페이지 (단일 컬럼 읽기 레이아웃, D-05) ── */
.rawdata-detail {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 32px 64px;
}
.rawdata-detail h1 {
  font-size: 30px;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.rd-meta {
  font-family: system-ui;
  font-size: 12.5px;
  color: var(--muted);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 8px;
}
.rd-url {
  font-family: system-ui;
  font-size: 12.5px;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  word-break: break-all;
}
.rd-url a {
  color: var(--accent);
}
.rd-body h2,
.rd-cats h2 {
  font-size: 18px;
  margin: 28px 0 12px;
}
/* 본문 텍스트: 줄바꿈 보존, 세리프 정독 폭 */
.rd-text {
  white-space: pre-wrap;
  line-height: 1.7;
}
.rd-note {
  font-family: system-ui;
  font-size: 12px;
  color: var(--muted);
}
/* 원문 자막 접기 */
.raw-text {
  margin: 26px 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
}
.raw-text > summary {
  font-family: system-ui;
  font-size: 13px;
  color: var(--accent);
  cursor: pointer;
  padding: 12px 16px;
  list-style: none;
}
.raw-text > summary::-webkit-details-marker {
  display: none;
}
.raw-text[open] > summary {
  border-bottom: 1px solid var(--line);
}
.raw-text pre {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  padding: 14px 16px;
  margin: 0;
  color: var(--muted);
}
.rd-cat-list {
  font-family: system-ui;
  font-size: 13.5px;
  padding-left: 20px;
}
.rd-cat-list a {
  color: var(--accent);
  text-decoration: none;
}
.rd-cat-list a:hover {
  text-decoration: underline;
}
.rd-back {
  font-family: system-ui;
  font-size: 13px;
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.rd-back a {
  color: var(--muted);
  text-decoration: none;
}
.rd-back a:hover {
  color: var(--accent);
}

/* ── 상단바 둘러보기 링크 (Phase 6) ───────────────────────── */
.nav-browse {
  font-family: system-ui;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
}
.nav-browse:hover {
  color: var(--accent);
}
/* 검색 pill 활성화 — input 색을 ink로(placeholder만 muted) */
.search input {
  color: var(--ink);
}

/* ── 검색·둘러보기 목록 페이지 (Phase 6, D-05) ─────────────── */
.search-page {
  max-width: 820px;
  margin: 0 auto;
  padding: 36px 32px 64px;
}
.search-h1 {
  font-size: 28px;
  margin: 0 0 20px;
  letter-spacing: -0.01em;
}
.search-note {
  font-family: system-ui;
  font-size: 13.5px;
  color: var(--muted);
  padding: 20px 0;
}

/* 필터 폼 — system-ui 크롬, 가로 flex wrap */
.filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-family: system-ui;
  font-size: 13px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 24px;
}
.filter-form input,
.filter-form select {
  font-family: system-ui;
  font-size: 13px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 6px 10px;
  background: #fff;
}
.filter-form input[type="text"] {
  flex: 1 1 160px;
  min-width: 120px;
}
.filter-form button {
  font-family: system-ui;
  font-size: 13px;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: 7px;
  padding: 7px 16px;
  cursor: pointer;
}
.filter-form button:hover {
  opacity: 0.92;
}

/* 결과 섹션 제목 */
.hits-h {
  font-family: system-ui;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 24px 0 12px;
}

/* 목록 카드 (써머리 히트 + 로우데이터 카드 공유) */
.hit-card {
  font-family: system-ui;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 13px 16px;
  margin-bottom: 11px;
}
.hit-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 11.5px;
  margin-bottom: 6px;
}
.hit-title {
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.35;
}
.hit-title:hover {
  color: var(--accent);
  text-decoration: underline;
}
.hit-snip {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
  margin: 6px 0 0;
}

/* 페이지네이션 nav (D-06 번호 페이지) */
.pagination {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: center;
  font-family: system-ui;
  font-size: 13px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.pagination a {
  color: var(--accent);
  text-decoration: none;
}
.pagination a:hover {
  text-decoration: underline;
}
.pagination .pg-disabled {
  color: var(--line);
}
.pagination .pg-status {
  color: var(--muted);
}

/* ── 분류 교정 칩 UI (06-02, CLASS-02) ───────────────────── */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--chip);
  border-radius: 999px;
  padding: 3px 6px 3px 10px;
  font-family: system-ui;
  font-size: 12.5px;
  line-height: 1;
}
.chip-label {
  color: var(--ink);
  text-decoration: none;
}
.chip-label:hover {
  text-decoration: underline;
}
.chip-del {
  display: inline;
  margin: 0;
}
.chip-x {
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  padding: 0 2px;
  line-height: 1;
}
.chip-x:hover {
  color: var(--accent);
}
.chip-empty {
  color: var(--muted);
  font-family: system-ui;
  font-size: 12.5px;
}
.chip-add {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
}
.chip-add select {
  font-family: system-ui;
  font-size: 12.5px;
  padding: 2px 4px;
  border: 1px solid var(--line);
  border-radius: 6px;
  max-width: 240px;
}
.chip-add-btn {
  font-family: system-ui;
  font-size: 12.5px;
  padding: 3px 10px;
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 6px;
  cursor: pointer;
}
.chip-add-btn:hover {
  background: var(--accent);
  color: #fff;
}
.assign-form {
  margin: 4px 0 14px;
}

/* ── 분류 관리 페이지 (06-03, 폼 기반 트리 재편) ─────────── */
.doc.manage {
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px 28px;
}
.manage-guide {
  margin-bottom: 18px;
}
.manage-error {
  background: #fbe9e6;
  border: 1px solid #e0a89e;
  color: #8a2f1f;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 18px;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 14px;
}
.manage-add,
.manage-list {
  margin-bottom: 24px;
}
.manage-add h2,
.manage-list h2 {
  font-size: 15px;
  color: var(--muted);
  font-family: system-ui, -apple-system, sans-serif;
  margin-bottom: 10px;
}
.manage-form {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.manage-form.inline {
  gap: 4px;
}
.manage-form input,
.manage-form select {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 13px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
}
.manage-form button {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 13px;
  padding: 5px 12px;
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 6px;
  cursor: pointer;
}
.manage-form button:hover {
  background: var(--accent);
  color: #fff;
}
.manage-form button.danger {
  border-color: #b8503f;
  color: #b8503f;
  background: #fbe9e6;
}
.manage-form button.danger:hover {
  background: #b8503f;
  color: #fff;
}
.manage-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 10px 14px;
  margin-bottom: 8px;
}
.manage-row.depth-1 { margin-left: 20px; }
.manage-row.depth-2 { margin-left: 40px; }
.manage-row.depth-3 { margin-left: 60px; }
.manage-row.depth-4 { margin-left: 80px; }
.manage-row.depth-5 { margin-left: 100px; }
.manage-node {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.manage-label {
  font-weight: 600;
}
.manage-slug {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 12px;
  color: var(--muted);
}
.manage-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.nav-manage {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  margin-left: 4px;
}
.nav-manage:hover {
  color: var(--accent);
}
/* 상단바 자동 조사 링크 (Phase 7) — nav-browse/manage 관례 계승 */
.nav-status {
  font-family: system-ui;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  margin-left: 4px;
}
.nav-status:hover {
  color: var(--accent);
}

/* ── 자동 조사 상태 패널 (Phase 7, DEPLOY-02·D-10) ─────────── */
.status-page {
  max-width: 760px;
}
/* 경고 배너 — stale 앰버 토큰 계승, 배너 크기로 확대 */
.status-warn {
  font-family: system-ui;
  font-size: 14px;
  color: #9a7b1c;
  background: #fbf3d8;
  border: 1px solid #f0e0a8;
  border-radius: 8px;
  padding: 12px 16px;
  margin: 8px 0 24px;
}
.status-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 14px 18px;
  margin: 0 0 16px;
}
.status-card h2 {
  font-size: 16px;
  margin: 0 0 10px;
}
.status-list {
  font-family: system-ui;
  font-size: 13.5px;
  margin: 0;
  padding-left: 20px;
}
.status-badge {
  font-family: system-ui;
  font-size: 12px;
  border-radius: 7px;
  padding: 3px 10px;
  display: inline-block;
  background: var(--chip);
  color: var(--ink);
}
.status-ok {
  background: var(--accent-soft);
  color: var(--accent);
}
.status-fail {
  background: #fde8e6;
  color: #c0392b;
}
.status-fail-text {
  color: #c0392b;
}
.status-date {
  font-family: system-ui;
  font-size: 13px;
  color: var(--muted);
}
.status-reason {
  font-family: system-ui;
  font-size: 13px;
  color: #c0392b;
  margin: 4px 0 0;
}
.status-sub {
  font-family: system-ui;
  font-size: 12.5px;
  color: var(--muted);
  margin: 4px 0 0;
}
.status-table {
  font-family: system-ui;
  font-size: 13px;
  border-collapse: collapse;
  width: 100%;
}
.status-table th,
.status-table td {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
}
.status-table th {
  color: var(--muted);
  font-weight: 600;
}
.status-note-row td {
  color: var(--muted);
  font-size: 12px;
  font-style: italic;
}

/* ── 반응형 (MVP 데스크톱 우선, 방향만) ──────────────────── */
@media (max-width: 1200px) {
  .layout {
    grid-template-columns: 220px 1fr 260px;
  }
}
@media (max-width: 768px) {
  .layout {
    grid-template-columns: 1fr;
  }
  .toc,
  .evi {
    display: none;
  }
}