/* ============================================================
   KWONMO — doc.css
   기술문서 보기(page/doc) 전용. 수치·색은 val.css 토큰만 쓴다.
   넓은 화면: 왼쪽 목차(문서 목록 + 항목)가 붙어 따라오고 오른쪽이 본문. 좁은 화면: 목차는 단추로 편다.
   ============================================================ */

.doc-stage {
  display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: var(--sp-xl); align-items: start;
}
/* plain 레이아웃 폭(--page-max)보다 넓게 — 표가 많은 문서라서 */
[data-layout="plain"] .stage.doc-stage { max-width: 90rem; }

.doc-side {
  position: sticky; top: calc(var(--header-total) + var(--sp-md));
  max-height: calc(100dvh - var(--header-total) - 2 * var(--sp-md)); overflow-y: auto;
  font-size: .85rem;
}
.doc-group {
  margin: var(--sp-md) 0 var(--sp-xs); color: var(--text-dim);
  font-family: var(--ed-label); font-size: .72rem; font-weight: 700; letter-spacing: .04em;
}
.doc-group:first-child { margin-top: 0; }
/* 대메뉴 셋(개발 로드맵 · 기술문서 · 작업진행이력). 그 아래 문서는 한 단 들여 쓴다 */
.doc-cat + .doc-cat { margin-top: var(--sp-md); }
.doc-cat-nm {
  margin: 0 0 var(--sp-xs); padding: 0 var(--sp-sm);
  color: var(--text); font-family: var(--ed-label); font-size: .9rem; font-weight: 700;
}
.doc-cat .doc-item { margin-left: var(--sp-sm); }
/* 문서 이름은 한 줄 — 길면 끝을 … 로(10-12 댄). 전체 이름은 문서를 열면 제목에 있다 */
.doc-item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-cat-empty { margin: 0 0 0 var(--sp-sm); padding: .3rem var(--sp-sm); color: var(--text-dim); font-size: .8rem; }
.doc-item, .doc-toc a {
  display: block; padding: .3rem var(--sp-sm); border-radius: var(--radius-sm);
  color: var(--text-mid); text-decoration: none; line-height: 1.4;
}
.doc-item:hover, .doc-toc a:hover { background: var(--surface-2); color: var(--text); }
.doc-item.is-current { background: var(--surface-2); color: var(--accent); font-weight: 700; }
.doc-toc { margin-top: var(--sp-md); padding-top: var(--sp-sm); border-top: var(--hairline) solid var(--line); }
.doc-toc .doc-toc-h3 { padding-left: var(--sp-lg); font-size: .8rem; }

.doc-bar {
  display: flex; align-items: center; gap: var(--sp-sm);
  margin-bottom: var(--sp-md); padding-bottom: var(--sp-sm); border-bottom: var(--hairline) solid var(--line);
}
.doc-name { flex: 1; min-width: 0; color: var(--text-dim); font-family: var(--ed-display); font-size: .8rem; }
.doc-btn {
  padding: .35rem var(--sp-md); border: var(--hairline) solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font-size: .85rem; cursor: pointer;
}
.doc-btn:disabled { opacity: .4; cursor: default; }
.doc-side-btn { display: none; }
.doc-status { padding: var(--sp-xl); text-align: center; color: var(--text-dim); }

/* ---------- 본문(marked 가 그린 것) ---------- */
/* 긴 파일 경로·코드 이름이 폰 폭을 밀어내지 않게 아무 데서나 줄을 바꾼다(코드 블록은 white-space: pre 라 그대로) */
.doc-md { color: var(--text); font-family: var(--ed-body); font-size: .95rem; line-height: 1.75; overflow-wrap: anywhere; }
.doc-md h1, .doc-md h2, .doc-md h3, .doc-md h4 {
  scroll-margin-top: calc(var(--header-total) + var(--sp-md));   /* 붙어 있는 머리줄에 제목이 가려지지 않게 */
  font-family: var(--ed-label); line-height: 1.35;
}
.doc-md h1 { margin: 0 0 var(--sp-md); font-family: var(--ed-display); font-size: 1.6rem; }
.doc-md h2 {
  margin: var(--sp-xl) 0 var(--sp-sm); padding-top: var(--sp-md);
  border-top: var(--rule-w) solid var(--rule-ink); font-size: 1.25rem;
}
.doc-md h3 { margin: var(--sp-lg) 0 var(--sp-xs); font-size: 1.05rem; }
.doc-md h4 { margin: var(--sp-md) 0 var(--sp-xs); font-size: .95rem; }
.doc-anchor { margin-left: .3em; color: var(--text-dim); font-size: .8em; text-decoration: none; opacity: 0; }
.doc-md h1:hover .doc-anchor, .doc-md h2:hover .doc-anchor, .doc-md h3:hover .doc-anchor, .doc-md h4:hover .doc-anchor,
.doc-anchor:focus { opacity: 1; }
.doc-md p, .doc-md ul, .doc-md ol, .doc-md pre, .doc-md table, .doc-md blockquote { margin: 0 0 var(--sp-md); }
/* layout.css 가 목록 점을 지워 둔다 — 문서 본문에서는 되살린다 */
.doc-md ul, .doc-md ol { padding-left: 1.4em; }
.doc-md ul { list-style: disc; }
.doc-md ul ul { list-style: circle; }
.doc-md ol { list-style: decimal; }
.doc-md li + li { margin-top: .2em; }
.doc-md a { color: var(--accent); }
.doc-md hr { margin: var(--sp-xl) 0; border: 0; border-top: var(--hairline) solid var(--line); }
.doc-md blockquote { padding: var(--sp-xs) var(--sp-md); border-left: var(--stroke-3) solid var(--line); color: var(--text-mid); }
.doc-md code {
  padding: .1em .35em; border-radius: var(--radius-sm); background: var(--surface-2);
  font-family: "JetBrains Mono", Consolas, monospace; font-size: .85em;
}
.doc-md pre {
  overflow-x: auto; padding: var(--sp-md); border: var(--hairline) solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); line-height: 1.5;
}
.doc-md pre code { padding: 0; background: none; font-size: .8rem; }
/* 표는 넘치면 표만 옆으로 민다(본문 전체가 밀리지 않게) */
.doc-md table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: .85rem; }
.doc-md th, .doc-md td { padding: .4rem .6rem; border: var(--hairline) solid var(--line); vertical-align: top; text-align: left; }
.doc-md th { background: var(--surface-2); font-family: var(--ed-label); white-space: nowrap; }

/* ---------- 스프레드시트 격자(```csv 블록) ---------- */
/* 격자 틀이 세로·가로로 함께 밀려야 머리줄(위)과 첫 칸(왼쪽)이 붙어 남는다 — 그래서 틀에 높이를 준다 */
.doc-sheet { margin: 0 0 var(--sp-md); }
.doc-sheet-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-sm);
  margin-bottom: var(--sp-xs); color: var(--text-dim); font-size: .8rem;
}
.doc-sheet-scroll {
  max-height: 75dvh; overflow: auto;
  border: var(--hairline) solid var(--line); border-radius: var(--radius-sm);
}
/* 붙어 남는 칸은 테두리가 겹치면 사라져서 separate 로 오른쪽·아래 선만 긋는다 */
/* 폭은 글 길이대로(max-content) — 틀에 맞춰 칸을 짜부라뜨리지 않고 틀이 옆으로 밀린다 */
.doc-md .doc-sheet-grid {
  display: table; width: max-content; max-width: none; overflow: visible; margin: 0;
  border-collapse: separate; border-spacing: 0; overflow-wrap: break-word; word-break: keep-all;
}
.doc-md .doc-sheet-grid th, .doc-md .doc-sheet-grid td {
  padding: .35rem .5rem; border: 0;
  border-right: var(--hairline) solid var(--line); border-bottom: var(--hairline) solid var(--line);
  background: var(--surface); line-height: 1.5;
}
.doc-md .doc-sheet-grid th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); }
.doc-md .doc-sheet-grid td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface-2); font-weight: 700; }
.doc-md .doc-sheet-grid th:first-child { left: 0; z-index: 3; }
/* 긴 글 칸은 이 폭에서 줄을 바꾼다(짧은 칸은 글 길이만큼) */
.doc-sheet-grid td div { max-width: 28rem; }
/* ```csv fit — 틀 폭에 맞춰 긴 칸이 줄을 바꾼다(칸이 적은 읽기용 시트, 10-15 댄) */
.doc-md .doc-sheet.is-fit .doc-sheet-grid { width: 100%; }
.doc-sheet.is-fit .doc-sheet-grid td div { max-width: none; }
.doc-md .doc-sheet.is-fit .doc-sheet-grid th { white-space: normal; }

/* ---------- 좁은 화면 ---------- */
@media (max-width: 60rem) {
  .doc-stage { grid-template-columns: minmax(0, 1fr); }
  .doc-side-btn { display: inline-block; }
  .doc-side {
    display: none; position: static; max-height: none;
    padding: var(--sp-md); border: var(--hairline) solid var(--line); border-radius: var(--radius-md); background: var(--surface);
  }
  .doc-side.is-open { display: block; }
}