/* ==========================================================================
   사암(TSS) v3.4 · editorial-trends.css
   2026 웹디자인 흐름 가운데 "역사 있는 독서토론 모임의 조용한 편집형 사이트"에 맞는 것만 골라 CSS로만 더한다.
   - 항상 맨 마지막에 링크한다(site → pages → editorial → editorial-pages → 이 파일).
   - 문구·사진·링크·앵커·격자(7칸 본문 기준선, data-shape 비율, 띠 배경 없음)는 건드리지 않는다.
   - 외부 폰트·CDN·JS 없음. 모든 움직임은 transform/opacity만 쓰고, 축소 동작 설정을 존중한다.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 텍스트 중심 편집형 타이포그래피
   - 제목은 viewport에 따라 흐르되(4.4→4.8vw) 상한을 낮게 잡아 "절제된 제목" 원칙을 지킨다.
   - text-wrap: balance / pretty 로 제목 끝 한 단어·본문 외톨이 줄을 줄인다(미지원 브라우저는 무시).
   - 연도·통계 숫자는 고정폭 숫자로 정렬한다.
   -------------------------------------------------------------------------- */
:root {
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 0.25s;
  --dur-slow: 0.9s;
  --focus: var(--ink);
}

h1, h2, h3, .cta__title, .quote__text, .card__title, .page-head__title { text-wrap: balance; }
p, li, dd, .lead, .accordion__body, .figure__caption { text-wrap: pretty; }

.cover h1 { font-size: clamp(42px, 4.8vw, 70px); line-height: 1.22; }
.page-head__title { font-size: clamp(36px, 4.1vw, 60px); line-height: 1.28; }
.quote__text { letter-spacing: -0.02em; }

.stats__value, .timeline__year, .flow__year, .card__value, .amendments td:first-child,
.post-list__date, .article__num, .toc__num, .accordion__num, .contact-list__value {
  font-variant-numeric: tabular-nums;
}
.stats__label { font-size: 11px; }

/* 명조 제목과 고딕 라벨의 대비를 조금 더 또렷하게 */
.eyebrow, .page-head__eyebrow, .tag, .flow__label, .contact-list__label, .site-footer__nav h4 { font-weight: 500; color: var(--ink-2); }
.figure__caption { color: var(--ink-2); }

::selection { background: var(--ink); color: var(--paper); }

/* --------------------------------------------------------------------------
   2. 넉넉한 여백 · 읽기 리듬 (intent-first)
   - 긴 문서(헌법·약사)에서 조항 사이 숨 쉴 자리를 조금 더 준다. 격자 칸은 그대로다.
   -------------------------------------------------------------------------- */
.article + .article { margin-top: 56px; }
.article__head { margin-bottom: 20px; }
.timeline__item, .timeline--compact .timeline__item { padding-block: 40px; }
.prose > p + p { margin-top: 1.25rem; }

/* --------------------------------------------------------------------------
   3. CSS 전용 미세 인터랙션 (hover 가능한 장치에서만)
   -------------------------------------------------------------------------- */
/* 3-1. 메뉴·푸터·목차 링크: 왼쪽에서 자라나는 밑줄 */
.site-nav__link,
.site-footer__nav a,
.toc a,
.site-nav__sub a {
  border-bottom: 0;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.site-nav__link[aria-current="page"] { background-size: 100% 1px; }
.toc a { display: flex; }
/* site.css가 하위 메뉴 hover에 옅은 띠 배경을 깔던 것을 밑줄로 대체(띠 배경 없음 원칙) */
.site-nav__sub a:hover {
  background-color: transparent;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  color: var(--ink);
}

@media (hover: hover) and (pointer: fine) {
  .site-nav__link:hover,
  .site-footer__nav a:hover,
  .toc a:hover,
  .site-nav__sub a:hover { background-size: 100% 1px; }
}

/* 3-2. 본문 링크: 밑줄이 살짝 내려가며 진해진다 */
.prose a, .accordion__body a, .contact-list__value a, .note a, .card a:not(.btn), .cta__desc a {
  text-decoration-color: var(--line-strong);
  transition: text-decoration-color var(--dur-fast) var(--ease-out), text-underline-offset var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.contact-list__value a { text-decoration: underline; text-decoration-thickness: 1px; border-bottom: 0; }
@media (hover: hover) and (pointer: fine) {
  .prose a:hover, .accordion__body a:hover, .contact-list__value a:hover, .note a:hover, .card a:not(.btn):hover, .cta__desc a:hover {
    text-decoration-color: currentColor;
    text-underline-offset: 0.3em;
  }
}

/* 3-3. 버튼·텍스트 링크: 화살표만 살짝 이동, 선 색만 변화 */
.btn::after, .text-link::after {
  transition: transform var(--dur-fast) var(--ease-out);
}
.btn, .text-link { transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover::after, .text-link:hover::after { transform: translate(2px, -2px); }
  .btn:hover, .text-link:hover { border-bottom-color: var(--ink-3); }
}

/* 3-4. 사진: 아주 느리게 1.03배 확대(아래 변을 고정해 캡션을 침범하지 않음) */
.figure { overflow: hidden; overflow: clip; }
.figure > img {
  transform-origin: 50% 100%;
  transition: transform var(--dur-slow) var(--ease-out);
  backface-visibility: hidden;
}
@media (hover: hover) and (pointer: fine) {
  .feature__media > img:hover, .gallery__item .figure > img:hover, .split__side .figure > img:hover { transform: scale(1.03); }
}
/* 표지 사진(LCP)은 확대하지 않는다 */
.cover__image > img { transform: none; }

/* 3-5. 접이식: "+"가 45° 돌아 "×"가 되고, 본문이 부드럽게 펼쳐진다(지원 브라우저에서만) */
.accordion__summary { transition: color var(--dur-fast) var(--ease-out); }
.accordion__summary::after {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.accordion__item[open] .accordion__summary::after { content: "+"; transform: rotate(45deg); }
@media (hover: hover) and (pointer: fine) {
  .accordion__summary:hover::after, .disclosure__summary:hover { color: var(--ink); }
}
@supports (interpolate-size: allow-keywords) {
  .accordion__item, .disclosure { interpolate-size: allow-keywords; }
  .accordion__item::details-content, .disclosure::details-content {
    height: 0; overflow: clip;
    transition: height 0.32s var(--ease-out), content-visibility 0.32s allow-discrete;
  }
  .accordion__item[open]::details-content, .disclosure[open]::details-content { height: auto; }
}

/* 3-6. 스크롤에 따른 등장(view-timeline). 레이아웃은 그대로, opacity·transform만 움직인다.
   - 표지(.cover)·페이지 머리(.page-head)는 첫 화면이므로 제외(LCP·CLS 보호). */
@media screen and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    @keyframes tss-rise {
      from { opacity: 0; transform: translateY(18px); }
      to   { opacity: 1; transform: none; }
    }
    .section__head,
    .feature__media, .feature__body,
    .gallery__item,
    .stats__item,
    .card-grid > .card,
    .timeline__item,
    .flow__item,
    .accordion__item,
    .article,
    .quote,
    .split__side, .split__main,
    .news__col,
    .cta__inner,
    .contact-list li,
    .amendments {
      animation: tss-rise 1ms linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 28%;
    }
    .gallery__item:nth-child(even) { animation-range: entry 0% entry 36%; }
  }
}

/* --------------------------------------------------------------------------
   4. 접근성 우선
   - 포커스 링을 먹색 2px + 4px 간격으로 통일(사진·버튼·접이식·메뉴 토글 포함).
   - 앵커 이동 시 제목이 화면 상단에 붙지 않게 여유를 둔다.
   -------------------------------------------------------------------------- */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 1px; }
.btn:focus-visible, .text-link:focus-visible { outline-offset: 6px; }
.accordion__summary:focus-visible, .disclosure__summary:focus-visible { outline-offset: 2px; }
.nav-toggle-input:focus-visible + .nav-toggle { outline: 2px solid var(--ink); outline-offset: 4px; }
.skip-link:focus { outline: 2px solid var(--paper); outline-offset: -4px; }
html { scroll-padding-top: 32px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.article, [id] { scroll-margin-top: 32px; }

/* 명도 대비: 보조 텍스트(--ink-3)를 종이색 위 AA(4.5:1 이상)로 유지 */
:root { --ink-3: #5f5f58; }
.post-list__empty, .muted, .stats__label, .figure__caption { color: var(--ink-3); }

/* --------------------------------------------------------------------------
   5. 성능 (Core Web Vitals · CLS 0)
   - 모든 사진은 width/height + aspect-ratio 를 이미 갖고 있어 자리 이동이 없다. 여기서는 로딩 중 바탕만 종이색으로 통일.
   - 애니메이션은 compositor 속성(opacity/transform)만 사용. 긴 페이지의 접힌 본문은 렌더 비용을 미룬다.
   -------------------------------------------------------------------------- */
img { background-color: var(--paper-2); }

/* --------------------------------------------------------------------------
   6. 모바일(375) 안전장치: 가로 넘침 0, 이미지 위 글자 없음
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .cover h1 { font-size: clamp(34px, 8.5vw, 48px); }
  .page-head__title { font-size: clamp(32px, 8vw, 44px); }
  .article + .article { margin-top: 40px; }
  .timeline__item, .timeline--compact .timeline__item { padding-block: 28px; }
}
@media (max-width: 479px) {
  .btn::after, .text-link::after { margin-left: 16px; }
}

/* 인쇄: 움직임·등장 효과 없이 모두 보이게 */
@media print {
  .section__head, .feature__media, .feature__body, .gallery__item, .stats__item, .card-grid > .card,
  .timeline__item, .flow__item, .accordion__item, .article, .quote, .split__side, .split__main,
  .news__col, .cta__inner, .contact-list li, .amendments { animation: none !important; opacity: 1 !important; transform: none !important; }
}
/* 소식 페이지 격자 고정 (앞선 .section>.container>.prose 규칙보다 우선) */
main .section.news-page>.container{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
main .section.news-page>.container>.page-head{grid-column:1/-1}
main .section.news-page>.container>.prose,main .section.news-page>.container>.post-list,main .section.news-page>.container>.page-foot{grid-column:7/span 6;display:block;max-width:40em;margin-left:0}
main .section.news-page>.container>.prose>*{max-width:none;grid-column:auto}
@media(max-width:767px){main .section.news-page>.container{grid-template-columns:minmax(0,1fr)}main .section.news-page>.container>.prose,main .section.news-page>.container>.post-list,main .section.news-page>.container>.page-foot{grid-column:1/-1}}
/* 소식 목록 페이지 번호 · 본문 사진 */
main .section.news-page>.container>.pager{grid-column:7/span 6;display:flex;align-items:center;gap:20px;margin-top:40px;font-size:14px;font-variant-numeric:tabular-nums}
.pager ol{list-style:none;margin:0;padding:0;display:flex;gap:4px;flex-wrap:wrap}
.pager a,.pager__current{display:inline-flex;min-width:36px;height:36px;align-items:center;justify-content:center;text-decoration:none;border-bottom:1px solid transparent}
.pager a:hover{border-bottom-color:var(--ink)}
.pager__current{border-bottom:1px solid var(--ink);font-weight:600}
.pager__gap{display:inline-flex;min-width:20px;height:36px;align-items:center;justify-content:center;color:var(--ink-3)}
.pager__step{padding:0 4px}.pager__step.is-disabled{color:var(--ink-3);pointer-events:none}
main .section.news-page .prose figure{margin:32px 0}
main .section.news-page .prose figure img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain;background:var(--paper-2)}
@media(max-width:767px){main .section.news-page>.container>.pager{grid-column:1/-1;gap:8px}.pager a,.pager__current{min-width:32px}}