/* 소개 · 개인정보처리방침 · 문의 · 404 — 글 위주 페이지. 값은 tokens.css 변수만 사용 */
.doc {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) var(--space-7);
  flex: 1;
  word-break: keep-all;
}
.doc h1 {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-2);
}
.doc .lead { color: var(--color-ink-2); margin: 0 0 var(--space-6); }
.doc h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  margin: var(--space-6) 0 var(--space-2);
}
.doc h3 { font-size: var(--fs-md); margin: var(--space-4) 0 var(--space-1); }
.doc p, .doc li { font-size: var(--fs-sm); line-height: var(--lh-body); }
.doc p { margin: 0 0 var(--space-3); }
.doc ul, .doc ol { margin: 0 0 var(--space-3); padding-left: var(--space-5); }
.doc li + li { margin-top: var(--space-1); }
.doc a:not(.btn) { color: var(--color-ink); text-underline-offset: 3px; }
.doc .note {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-ink-2);
}
.doc .meta { font-size: var(--fs-xs); color: var(--color-ink-3); margin-top: var(--space-6); }

/* 표 (개인정보처리방침 쿠키 목록 등) */
.doc .table-wrap { overflow-x: auto; margin: 0 0 var(--space-3); }
.doc table { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); }
.doc th, .doc td { border-bottom: 1px solid var(--color-line); padding: var(--space-2); text-align: left; vertical-align: top; }
.doc th { color: var(--color-ink-2); font-weight: var(--fw-bold); white-space: nowrap; }

/* 초안에서 채워 넣어야 할 값 — 오픈 전 모두 바꿀 것 (LAUNCH.md 체크리스트) */
.todo { background: var(--color-todo-bg); color: var(--color-todo-ink); padding: 0 var(--space-1); border-radius: 3px; }

/* 문의 */
.contact-mail {
  display: inline-block;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  margin: var(--space-1) 0 var(--space-4);
}

/* 404 */
.doc--center { text-align: center; padding-top: var(--space-8); }
.doc--center .btn { margin-top: var(--space-4); }


/* ===== 주역 안내 (/guide) ===== */
.guide section { scroll-margin-top: var(--space-4); padding-top: var(--space-4); }
.guide section + section { border-top: 1px solid var(--color-line); margin-top: var(--space-7); }
.guide h2 { font-size: var(--fs-xl); margin-top: var(--space-4); }
.guide h3 { font-family: var(--font-serif); font-size: var(--fs-md); margin: var(--space-5) 0 var(--space-2); }
.guide .sym { font-size: 1.2em; }

.guide-toc { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-4); }
.guide-toc a {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-3); border: 1px solid var(--color-line-2); border-radius: var(--radius-pill);
  font-size: var(--fs-sm); text-decoration: none;
}
.guide-toc a span { font-size: var(--fs-2xs); color: var(--color-ink-3); }

/* 용어 목록 — 굵은 용어 + 한자 + 설명 */
.term-list { margin: 0 0 var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.term-list > div { padding: var(--space-2) var(--space-3); border-left: 3px solid var(--color-line-2); background: var(--color-surface); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.term-list dt { font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.term-list dt span { font-weight: var(--fw-regular); color: var(--color-ink-3); margin-left: var(--space-1); }
.term-list dd { margin: var(--space-1) 0 0; font-size: var(--fs-sm); line-height: var(--lh-body); }

/* 8괘 카드 — 괘판과 같은 그림 */
.tri-cards { list-style: none; padding: 0; margin: var(--space-3) 0 var(--space-2); display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
@media (min-width: 440px) { .tri-cards { grid-template-columns: repeat(4, 1fr); } }
.tri-card {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: var(--space-3) var(--space-2); border-radius: var(--radius-md); border: 1px solid var(--color-line);
  background: linear-gradient(color-mix(in srgb, var(--color-bg) 62%, transparent), color-mix(in srgb, var(--color-bg) 82%, transparent)), var(--img) center / cover;
  margin: 0 !important; line-height: var(--lh-tight);
}
.tri-sym { font-size: 34px; line-height: 1.1; }
.tri-card strong { font-family: var(--font-serif); font-size: var(--fs-md); margin-top: var(--space-1); }
.tri-card strong span { font-weight: var(--fw-regular); color: var(--color-ink-2); }
.tri-card em { font-style: normal; font-size: var(--fs-sm); margin-top: var(--space-1); }
.tri-meta { font-size: var(--fs-2xs); color: var(--color-ink-2); margin-top: var(--space-1); }
.tri-flag { position: absolute; top: var(--space-1); right: var(--space-1); font-size: 10px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--color-primary); color: var(--color-primary-ink); }
.tri-note { font-size: var(--fs-xs) !important; color: var(--color-ink-3); }

/* 수풍정 예시 */
.example { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-surface); margin-bottom: var(--space-3); }
.example-sym { font-size: 44px; line-height: 1; }
.example p { margin: 0; }

/* 역사 타임라인 */
.timeline { list-style: none; padding: 0 0 0 var(--space-4); margin: var(--space-3) 0; border-left: 2px solid var(--color-line-2); }
.timeline > li { position: relative; margin: 0 0 var(--space-5) !important; }
.timeline > li::before { content: ""; position: absolute; left: calc(-1 * var(--space-4) - 7px); top: 0.55em; width: 12px; height: 12px; border-radius: 50%; background: var(--color-bg); border: 2px solid var(--color-ink-2); }
.timeline h3 { margin-top: 0; }

.guide-cta { text-align: center; margin-top: var(--space-5) !important; }

/* ===== 읽을거리 (/posts) ===== */
.post-grid { list-style: none; padding: 0 !important; margin: var(--space-4) 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (min-width: 640px) { .post-grid { grid-template-columns: repeat(3, 1fr); } }
.post-grid li { margin: 0 !important; }
.post-card { display: block; text-decoration: none !important; color: var(--color-ink) !important; }
.post-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; border-radius: var(--radius-md); border: 1px solid var(--color-line); background: var(--color-surface); }
.post-card .cat { display: inline-block; margin-top: var(--space-2); font-size: var(--fs-2xs); color: var(--color-ink-2); border: 1px solid var(--color-line-2); border-radius: var(--radius-pill); padding: 0 var(--space-2); }
.post-card strong { display: block; font-family: var(--font-serif); font-size: var(--fs-md); line-height: var(--lh-tight); margin-top: var(--space-1); word-break: keep-all; }
.post-card time { font-size: var(--fs-2xs); color: var(--color-ink-3); }

.post-head .series { font-size: var(--fs-xs); color: var(--color-ink-2); margin: 0 0 var(--space-2); }
.post-head h1 { margin-bottom: var(--space-1); }
.post-head .meta-line { font-size: var(--fs-xs); color: var(--color-ink-3); margin: 0; }
.slides { margin-top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.slide { margin: 0; }
.slide img { width: 100%; height: auto; display: block; border-radius: var(--radius-md); border: 1px solid var(--color-line); }
.ad-slot--post { background: transparent; padding: var(--space-3) 0; }
.ad-slot--post .ad-box { width: var(--ad-rect-w); height: var(--ad-rect-h); }

.post-text { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--color-line); }
.post-text > h2 { margin-top: 0; }
.card-text { margin-top: var(--space-5); }
.card-text h3 { font-family: var(--font-serif); font-size: var(--fs-md); margin: 0 0 var(--space-2); }
.card-text h3 span { font-family: var(--font-sans); font-size: var(--fs-2xs); color: var(--color-ink-3); margin-right: var(--space-2); }
.quote { margin: 0 0 var(--space-3); padding-left: var(--space-3); border-left: 3px solid var(--color-line-2); }
.quote p { margin: 0 !important; }
.quote .o span { color: var(--color-ink-3); font-size: var(--fs-xs); margin-left: var(--space-1); }
.quote cite { font-style: normal; font-size: var(--fs-2xs); color: var(--color-ink-3); }

.post-end { margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); }
.post-end .btn { width: 100%; }
.post-nav { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--fs-xs); margin-top: var(--space-3); }
.post-nav a { color: var(--color-ink-2) !important; }

/* 글 페이지 — 스크롤해도 왼쪽 위에 떠 있는 목록(뒤로) 버튼 */
.post-back {
  position: fixed; z-index: 20;
  top: calc(env(safe-area-inset-top, 0px) + var(--space-3)); left: var(--space-3);
  display: inline-flex; align-items: center; gap: 2px;
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2);
  font-size: var(--fs-sm); color: var(--color-ink); text-decoration: none;
  background: color-mix(in srgb, var(--color-surface) 85%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--color-line); border-radius: var(--radius-pill);
  box-shadow: 0 2px 8px rgb(0 0 0 / .08);
}

/* 글 페이지 — 풀어 읽기 */
.post-reading { margin-top: var(--space-6); }
.post-reading > h2 { margin-top: 0; }
.post-reading h3 { font-family: var(--font-serif); font-size: var(--fs-md); margin: var(--space-5) 0 var(--space-2); }