/* ==========================================================================
   사암(TSS) 하위 페이지 보조 스타일
   - site.css의 토큰·컴포넌트를 그대로 쓰고, 하위 7개 페이지에서만 필요한 배치 규칙을 더한다.
   - 기존 site.css 규칙은 건드리지 않는다. 항상 site.css 다음에 링크한다.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 페이지 머리(.page-head) 보강
   -------------------------------------------------------------------------- */
.page-head__eyebrow { margin-bottom: var(--space-4); }
.page-head__title { max-width: 16em; }
.page-head__desc { font-size: var(--text-lg); line-height: 1.7; }
.page-head .btn-row { margin-top: var(--space-5); }

/* 원문의 상태 뱃지("123기 모집 완료") */
.status-pill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0.2em 0.85em;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--ink-2);
  margin-bottom: var(--space-5);
}
.status-pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}

/* 원문의 이모지·기호 아이콘: 남기되 작게, 보조색으로 */
.icon {
  display: inline-block;
  font-size: var(--text-sm);
  line-height: 1;
  color: var(--ink-3);
  margin-right: 0.35em;
  vertical-align: -0.05em;
}
.icon--lead { display: block; margin: 0 0 var(--space-2); }

/* 원문의 한 줄 라벨(예: "Every Wednesday") */
.tag {
  display: inline-block;
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.figure__caption .tag { margin-left: var(--space-2); }

/* 원문의 키워드 나열(Academism · Membership …) */
.keywords { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.keywords li {
  padding: 0.25em 0.8em;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--ink-2);
}

/* 통계 띠 3열 변형(약사·헌법) */
.stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats__sub { display: block; font-size: var(--text-xs); color: var(--ink-3); margin-top: var(--space-1); }
@media (max-width: 767px) {
  .stats--3 { grid-template-columns: minmax(0, 1fr); }
  .stats--3 .stats__item { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
  .stats--3 .stats__item:first-child { border-top: 0; }
}

/* --------------------------------------------------------------------------
   2. 인용 블록(페이지 상단 큰 인용)
   -------------------------------------------------------------------------- */
.quote {
  max-width: 36em;
  margin: 0;
}
.quote__mark {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--text-4xl);
  line-height: 0.6;
  color: var(--accent);
  margin-bottom: var(--space-4);
}
.quote__text {
  margin: 0 0 var(--space-4);
  font-family: var(--font-serif);
  font-size: clamp(var(--text-xl), 2.6vw, var(--text-2xl));
  line-height: 1.5;
  color: var(--ink);
}
.quote__text em, .quote__text .hanja { font-style: normal; color: var(--accent); }
.quote__source { font-size: var(--text-sm); color: var(--ink-3); margin: 0; }
.quote__aside { color: var(--ink-2); margin: 0 0 var(--space-2); }
.quote__aside em { font-style: normal; color: var(--accent); }
.quote__hanja {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  color: var(--accent);
  line-height: 1;
  margin-bottom: var(--space-4);
}

/* 사진 옆에 인용/글을 두는 두 칸 배치 (feature 보다 글 비중이 큰 경우) */
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); align-items: start; }
.split__main { grid-column: 1 / span 7; grid-row: 1; }
.split__side { grid-column: 9 / span 4; grid-row: 1; }
.prose > h2:first-child, .prose > .eyebrow + h2 { margin-top: 0; padding-top: 0; border-top: 0; }
@media (max-width: 767px) {
  .split__main, .split__side { grid-column: span 12; grid-row: auto; }
  .split__side { order: -1; }
}

/* --------------------------------------------------------------------------
   3. 정의형 카드(조직·가치·특별한 이유 등): 상단 먹선 카드 격자 재사용
   -------------------------------------------------------------------------- */
.card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 899px) {
  .card-grid--3, .card-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479px) {
  .card-grid--2, .card-grid--3, .card-grid--4 { grid-template-columns: minmax(0, 1fr); }
}
.card__num {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  color: var(--accent);
  margin-bottom: var(--space-2);
}
.card--center { text-align: center; }
.card__value { font-family: var(--font-serif); font-size: clamp(var(--text-xl), 2.4vw, var(--text-2xl)); line-height: 1.2; margin-bottom: var(--space-1); }
.card__sub { font-size: var(--text-sm); color: var(--ink-3); }

/* 질문 목록(인사말) */
.questions { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.questions li {
  display: grid; grid-template-columns: 2em 1fr; gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-serif);
  font-size: var(--text-lg);
}
.questions .q-mark { color: var(--accent); }

/* 단계형 순서(사암의 일상 1·2·3) */
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  border: 1px solid var(--ink);
  border-radius: 50%;
  font-family: var(--font-serif);
  font-size: var(--text-md);
  margin-bottom: var(--space-3);
}

/* --------------------------------------------------------------------------
   4. 연표 보강(사암약사·모집 일정)
   -------------------------------------------------------------------------- */
.timeline__item--highlight .timeline__year { font-size: var(--text-xl); }
.timeline__item--highlight .timeline__title { font-weight: 600; }
.timeline__title { font-family: var(--font-serif); font-size: var(--text-lg); margin-bottom: var(--space-2); }
.timeline__body { color: var(--ink-2); }
.timeline__quote {
  margin: var(--space-3) 0 0;
  padding-left: var(--space-4);
  border-left: 2px solid var(--line-strong);
  font-size: var(--text-sm);
  color: var(--ink-2);
}
.timeline__quote-source { display: block; margin-top: var(--space-1); color: var(--ink-3); font-size: var(--text-xs); }
.timeline--compact .timeline__item { grid-template-columns: 128px 1fr; }
.timeline__year.tag { font-family: var(--font-sans); padding-top: 0.45em; }
@media (max-width: 479px) {
  .timeline__item, .timeline--compact .timeline__item { grid-template-columns: 1fr; gap: var(--space-1); }
}

/* 가로 흐름(인사말 "반 세기를 넘어", 모집 일정 4단계) */
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); border-top: 1px solid var(--ink); }
.flow--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.flow__item { padding-top: var(--space-4); }
.flow__label { display: block; font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--space-2); }
.flow__year { display: block; font-family: var(--font-serif); font-size: var(--text-2xl); line-height: 1.1; color: var(--accent); margin-bottom: var(--space-2); }
.flow__title { font-family: var(--font-serif); font-size: var(--text-lg); margin-bottom: var(--space-1); }
.flow__desc { font-size: var(--text-sm); color: var(--ink-2); margin: 0; }
.flow__item--current .flow__title { font-weight: 600; }
@media (max-width: 899px) {
  .flow, .flow--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479px) {
  .flow, .flow--5 { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   5. 접이식 보강(사암약사 원문, 헌법 한자 원문)
   -------------------------------------------------------------------------- */
.accordion__num {
  display: inline-block; min-width: 1.6em;
  font-family: var(--font-sans); font-size: var(--text-xs); letter-spacing: 0.08em;
  color: var(--accent); margin-right: var(--space-2);
}
.accordion__body p + p { margin-top: var(--space-4); }
.accordion__body .inline-quote {
  display: block;
  margin-top: var(--space-4);
  padding-left: var(--space-4);
  border-left: 2px solid var(--line-strong);
  font-size: var(--text-sm);
  color: var(--ink-2);
}
.accordion__body .inline-quote + .inline-quote { margin-top: var(--space-3); }

/* 단독 접이식(한자 원문 보기) */
.disclosure { margin-top: var(--space-5); border-top: 1px solid var(--line); }
.disclosure__summary {
  list-style: none;
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) 0;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em;
}
.disclosure__summary::-webkit-details-marker { display: none; }
.disclosure__summary:hover { color: var(--accent); }
.disclosure__body { padding: var(--space-2) 0 var(--space-4); color: var(--ink-2); font-family: var(--font-serif); }
.disclosure__body p + p { margin-top: var(--space-3); }

/* --------------------------------------------------------------------------
   6. 헌법(.legal)
   -------------------------------------------------------------------------- */
.toc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--space-5); border-top: 1px solid var(--ink); }
.toc li { border-bottom: 1px solid var(--line); }
.toc a { display: flex; gap: var(--space-3); padding: var(--space-2) 0; text-decoration: none; font-size: var(--text-sm); }
.toc a:hover { color: var(--accent); }
.toc__num { min-width: 2em; color: var(--accent); font-family: var(--font-serif); }
.toc--extras { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 0; margin-top: var(--space-4); }
@media (max-width: 767px) { .toc, .toc--extras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) { .toc, .toc--extras { grid-template-columns: minmax(0, 1fr); } }

.article { padding-top: var(--space-5); scroll-margin-top: calc(var(--header-h) + var(--space-4)); }
.article + .article { margin-top: var(--space-5); border-top: 1px solid var(--line); }
.article__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }
.article__num { font-family: var(--font-serif); font-size: var(--text-lg); color: var(--accent); }
.article__title, .prose .article__title { font-family: var(--font-serif); font-size: var(--text-lg); margin: 0; }
.article__body ol { padding-left: 1.6em; margin: 0; }
.article__body ol li + li { margin-top: var(--space-2); }
.article__body p { margin: 0; }
.article__body p + p { margin-top: var(--space-2); }
[id="charter-addendum"], [id="charter-amendments"], [id="apply-download"], [id="apply-faq"] { scroll-margin-top: calc(var(--header-h) + var(--space-4)); }

/* 개헌 연혁 표 */
.amendments { width: 100%; border-collapse: collapse; font-size: var(--text-sm); border-top: 1px solid var(--ink); }
.amendments th, .amendments td { text-align: left; padding: var(--space-2) var(--space-3) var(--space-2) 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.amendments th { color: var(--ink-3); font-weight: 600; white-space: nowrap; }
.amendments td:first-child { white-space: nowrap; font-family: var(--font-serif); }
.amendments td:nth-child(2) { white-space: nowrap; color: var(--ink-2); }
.amendments .founding td:first-child { color: var(--accent); }

/* --------------------------------------------------------------------------
   7. 문의·연락처
   -------------------------------------------------------------------------- */
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); }
.contact-list li { border-top: 1px solid var(--ink); padding-top: var(--space-4); }
.contact-list__label { display: block; font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--space-2); }
.contact-list__value { display: block; font-family: var(--font-serif); font-size: clamp(var(--text-lg), 2vw, var(--text-xl)); margin-bottom: var(--space-1); }
.contact-list__value a { text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.contact-list__value a:hover { border-bottom-color: var(--accent); }
.contact-list__sub { display: block; font-size: var(--text-sm); color: var(--ink-3); }
@media (max-width: 479px) { .contact-list { grid-template-columns: minmax(0, 1fr); } }

/* 짧은 연락 띠(모집요강 하단) */
.contact-bar { list-style: none; margin: 0; padding: var(--space-4) 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); font-size: var(--text-sm); }
.contact-bar strong { font-weight: 600; }

/* 접이식 본문 안 줄바꿈 보존(FAQ 원문은 줄바꿈 텍스트) */
.accordion__body--pre { white-space: pre-line; }
.accordion__body .highlight { font-weight: 600; color: var(--ink); }

/* 마감 안내 */
.note--inline { display: inline-block; margin-bottom: var(--space-5); }
.note--inline strong { color: var(--ink); }

/* 인쇄 시 접이식은 모두 펼침 */
@media print {
  details > *:not(summary) { display: block !important; }
}

/* 보정: 카드 메타 라벨을 블록으로, 사진 옆 연락처 목록은 한 열로 */
.card > .card__meta { display: block; }
.feature__body .contact-list { grid-template-columns: minmax(0, 1fr); }