/* ============================================================
   InfraTree v2 — 가이드 목록·상세 (page composition, design/specs/guides.md)
   tokens.css + components.css 위. 전부 SSR, 페이지 JS 없음.
   ============================================================ */
.it-accent { color: var(--it-accent); }

.gd-page { padding-top: var(--it-sp-5); padding-bottom: var(--it-sp-7); }
.gd-lead { margin: var(--it-sp-2) 0 0; color: var(--it-text-2); font-size: var(--it-fs-md); line-height: var(--it-lh); max-width: var(--it-content-max); }

/* ---------- 목록 ---------- */
.gd-index { display: grid; gap: var(--it-sp-4); }
.gd-index .gd-lead { margin: 0; }
.gd-index-title .it-meta-mono { font-size: var(--it-fs-sm); font-weight: 400; margin-left: var(--it-sp-1); }
.gd-chips { display: flex; gap: var(--it-sp-2); flex-wrap: wrap; }
.gd-chip {
  font-size: var(--it-fs-sm); padding: 5px 12px; border-radius: var(--it-radius-pill);
  background: var(--it-panel); color: var(--it-text-2); border: 1px solid var(--it-border);
  text-decoration: none; transition: background 130ms ease, border-color 130ms ease, color 130ms ease;
}
.gd-chip:hover { color: var(--it-text); border-color: var(--it-border-2); }
.gd-chip.is-active { background: var(--it-accent-dim); color: var(--it-accent); border-color: var(--it-accent-line); }
.gd-chip .it-meta-mono { margin-left: var(--it-sp-1); }

.gd-list { overflow: hidden; }
.gd-list .it-row { text-decoration: none; }
.gd-empty { padding: var(--it-sp-6); text-align: center; color: var(--it-text-2); font-size: var(--it-fs-base); }

/* ---------- 상세: 머리 ---------- */
.gd-crumb { font-size: var(--it-fs-sm); color: var(--it-muted); margin-bottom: var(--it-sp-3); }
.gd-crumb a { color: var(--it-text-2); text-decoration: none; }
.gd-crumb a:hover { color: var(--it-text); }
.gd-crumb-sep { margin: 0 var(--it-sp-2); color: var(--it-muted); }
.gd-meta { display: flex; align-items: center; gap: var(--it-sp-2); flex-wrap: wrap; margin-bottom: var(--it-sp-3); }
.gd-title { line-height: 1.35; max-width: var(--it-content-max); }
.gd-head { padding-bottom: var(--it-sp-5); border-bottom: 1px solid var(--it-border); margin-bottom: var(--it-sp-5); }

/* ---------- 상세: 본문 + 목차 ---------- */
.gd-layout { display: grid; gap: var(--it-sp-6); grid-template-columns: minmax(0, 1fr); }
.gd-main { min-width: 0; max-width: var(--it-content-max); }
.gd-aside { display: none; }

@media (min-width: 1024px) {
  .gd-layout { grid-template-columns: minmax(0, var(--it-content-max)) 220px; justify-content: space-between; }
  .gd-aside { display: block; }
  .gd-toc { position: sticky; top: calc(var(--it-nav-h) + var(--it-sp-4)); }
  .gd-toc-mobile { display: none; }
}

.gd-toc-title { font-size: var(--it-fs-xs); color: var(--it-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--it-sp-2); }
.gd-toc ol, .gd-toc-mobile ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.gd-toc a, .gd-toc-mobile a {
  display: block; padding: 4px var(--it-sp-2); border-left: 2px solid var(--it-border);
  color: var(--it-text-2); text-decoration: none; font-size: var(--it-fs-sm); line-height: 1.45;
}
.gd-toc a:hover, .gd-toc-mobile a:hover { color: var(--it-text); border-left-color: var(--it-accent-line); }

.gd-toc-mobile { border: 1px solid var(--it-border); border-radius: var(--it-radius); background: var(--it-panel); margin-bottom: var(--it-sp-5); }
.gd-toc-mobile:empty { display: none; }
.gd-toc-mobile summary { cursor: pointer; padding: var(--it-sp-3) var(--it-sp-4); font-size: var(--it-fs-sm); color: var(--it-text-2); }
.gd-toc-mobile ol { padding: 0 var(--it-sp-4) var(--it-sp-3); }

/* 본문 글 (가이드 longform 은 h2·p·ul·ol·pre·code·strong 만 쓴다) */
.gd-article { color: var(--it-text-body); font-size: var(--it-fs-md); line-height: var(--it-lh-body); }
.gd-article > :first-child { margin-top: 0; }
.gd-article h2 {
  font-size: var(--it-fs-lg); font-weight: 600; color: var(--it-text); line-height: 1.45;
  margin: var(--it-sp-6) 0 var(--it-sp-3); scroll-margin-top: calc(var(--it-nav-h) + var(--it-sp-4));
}
.gd-article p { margin: 0 0 var(--it-sp-4); }
.gd-article ul, .gd-article ol { margin: 0 0 var(--it-sp-4); padding-left: 1.3em; }
.gd-article li { margin: 0 0 var(--it-sp-2); }
.gd-article li::marker { color: var(--it-muted); }
.gd-article strong { color: var(--it-text); font-weight: 600; }
.gd-article a { color: var(--it-accent); }
.gd-article code {
  font-family: var(--it-mono); font-size: .9em; background: var(--it-panel-2);
  border: 1px solid var(--it-border); border-radius: 4px; padding: 1px 5px;
}
.gd-article pre {
  margin: 0 0 var(--it-sp-4); padding: var(--it-sp-3) var(--it-sp-4); overflow-x: auto;
  background: var(--it-code-bg); border: 1px solid var(--it-border); border-radius: var(--it-radius-sm);
  font-size: var(--it-fs-sm); line-height: 1.6;
}
.gd-article pre code { background: none; border: 0; padding: 0; font-size: inherit; color: var(--it-text); white-space: pre; }

/* ---------- 상세: 연습 문제 · 다음 가이드 ---------- */
.gd-section { margin-top: var(--it-sp-7); }
.gd-section-title { font-size: var(--it-fs-lg); font-weight: 600; color: var(--it-text); margin: 0 0 var(--it-sp-2); }
.gd-section-note { margin: 0 0 var(--it-sp-3); color: var(--it-text-2); font-size: var(--it-fs-sm); }
.gd-list .it-badge-free, .gd-list .it-badge-pro { flex: none; }

.section-ad:empty { display: none; }

/* ---------- 문서 페이지(소개·약관·개인정보·문의·작성 기준, design/specs/docs.md) ---------- */
.gd-doc { max-width: calc(var(--it-content-max) + 2 * var(--it-sp-5)); }
.gd-doc .gd-article h2:first-child { margin-top: 0; }
.gd-article h3 { font-size: var(--it-fs-md); font-weight: 600; color: var(--it-text); margin: var(--it-sp-4) 0 var(--it-sp-1); }
.gd-article h3 + p { margin-top: 0; }
.gd-doc-actions { display: flex; gap: var(--it-sp-2); flex-wrap: wrap; margin: var(--it-sp-4) 0 0; }
.gd-doc-actions .it-btn { text-decoration: none; }
.gd-doc-meta { color: var(--it-muted); font-size: var(--it-fs-sm); }

/* ---------- 허브 (design/specs/hubs.md) — 가이드와 같은 틀을 쓴다 ---------- */
.gd-main-wide { max-width: none; }
.gd-section-first { margin-top: 0; }
.gd-section:not([hidden]) ~ .gd-section { margin-top: var(--it-sp-6); }
.gd-pager { margin-top: var(--it-sp-4); flex-wrap: wrap; }
.gd-pager:empty { display: none; }
.gd-pager .it-page-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; box-sizing: border-box; }
.gd-pager .it-page-btn.is-disabled { color: var(--it-muted); pointer-events: none; }
.gd-row-mark { flex: none; font-size: var(--it-fs-xs); color: var(--it-accent); border: 1px solid var(--it-accent-line); border-radius: var(--it-radius-pill); padding: 1px 8px; }

.gd-group { margin-top: var(--it-sp-6); }
.gd-group-title { font-size: var(--it-fs-lg); font-weight: 600; margin: 0 0 var(--it-sp-3); }
.gd-group-title .it-meta-mono { margin-left: var(--it-sp-2); font-weight: 400; }
.gd-subgroup-title { font-size: var(--it-fs-sm); color: var(--it-text-2); margin: var(--it-sp-4) 0 var(--it-sp-2); font-weight: 500; }
.gd-group .it-link-row { text-decoration: none; }

@media (max-width: 640px) {
  /* 좁은 화면에서는 행 제목 자리를 넓힌다 — 분야는 가이드·허브 맥락에서 대부분 같다. */
  .gd-list .it-row > .it-tag { display: none; }
  .gd-article { font-size: var(--it-fs-base); }
  .gd-article pre { font-size: var(--it-fs-xs); }
}

/* 학습 경로 상세 (design/specs/study-paths.md) */
.gd-path-note { margin-top: var(--it-sp-3); }