/* ---------------------------------------------------------- article page */

.art {
  width: min(720px, 100%);
  margin: 0 auto;
  padding: clamp(48px, 8vh, 96px) var(--mag-gutter) 0;
}

.art__head {
  display: grid;
  justify-items: center;
  gap: 18px;
  text-align: center;
  margin-bottom: clamp(36px, 6vh, 56px);
}

.art__head h1 {
  margin: 0;
  font-family: var(--mag-serif);
  font-size: 2.35rem;
  font-weight: 700;
  line-height: 1.34;
  letter-spacing: 0;
  word-break: keep-all;
}

.art__standfirst {
  max-width: 30rem;
  margin: 0;
  color: var(--mag-ink-soft);
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.9;
  word-break: keep-all;
}

.art__byline {
  margin: 6px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--mag-rule);
  color: var(--mag-ink-soft);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  word-break: keep-all;
}

.art__hero {
  margin: 0 0 clamp(36px, 6vh, 56px);
}

.art__hero img {
  display: block;
  width: 100%;
  height: 420px;
  object-fit: cover;
  filter: saturate(0.92) contrast(0.96);
}

.art__hero figcaption {
  margin-top: 10px;
  color: var(--mag-ink-soft);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0;
  word-break: keep-all;
}

/* body copy */

.art__body {
  font-family: var(--mag-serif);
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 2.05;
  color: var(--mag-ink);
}

.art__body p {
  margin: 0 0 1.7em;
  word-break: keep-all;
}

.art__body h2 {
  margin: 2.8em 0 1.1em;
  font-family: var(--mag-serif);
  font-size: 1.22rem;
  font-weight: 700;
  line-height: 1.5;
  word-break: keep-all;
}

.art__body h2 .art__num {
  display: block;
  margin-bottom: 6px;
  font-family: var(--mag-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--mag-ink-soft);
}

/* interview Q&A */

.art__q {
  margin: 2.2em 0 0.7em !important;
  font-family: var(--mag-sans);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.7;
}

/* year-review list */

.art__year {
  display: grid;
  margin: 0 0 2em;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--mag-rule);
}

.art__year li {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--mag-rule);
}

.art__year .art__month {
  font-family: var(--mag-sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--mag-ink-soft);
  padding-top: 6px;
}

.art__year p {
  margin: 0;
  line-height: 1.85;
}

/* inline pull quote */

.art__pull {
  margin: 2.4em 0;
  padding: 1.6em 0;
  border-top: 1px solid var(--mag-rule);
  border-bottom: 1px solid var(--mag-rule);
  text-align: center;
}

.art__pull p {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.75;
  word-break: keep-all;
}

/* end mark */

.art__end {
  margin: 2.5em 0 0 !important;
  text-align: center;
  font-size: 0.7rem;
  color: var(--mag-ink-soft);
  letter-spacing: 0;
}

/* prev / next */

.art-footnav {
  width: min(720px, 100%);
  margin: clamp(48px, 8vh, 80px) auto 0;
  padding: 0 var(--mag-gutter) clamp(64px, 10vh, 110px);
}

.art-footnav__row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0;
  border-top: 1px solid var(--mag-rule-strong);
}

.art-footnav__row a {
  display: grid;
  gap: 4px;
  font-size: 0.92rem;
  font-weight: 700;
  word-break: keep-all;
}

.art-footnav__row a:last-child {
  text-align: right;
}

.art-footnav__row a:hover,
.art-footnav__row a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.24em;
}

.art-footnav__dir {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--mag-ink-soft);
}

@media (max-width: 640px) {
  .art__head h1 {
    font-size: 1.86rem;
  }

  .art__standfirst {
    font-size: 0.98rem;
  }

  .art__hero img {
    height: 280px;
  }
}

/* ------------------------------------------------------------------ print */

@media print {
  .mag-masthead,
  .art-footnav,
  .mag-footer,
  .skip-link {
    display: none;
  }

  body.mag-body {
    background: #fff;
  }

  .art {
    padding-top: 0;
  }

  .art__hero img {
    filter: none;
  }

  .art__body {
    line-height: 1.9;
  }
}

/* 사진 크레딧 */
.art__hero figcaption,
.art__figure figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15em 0.85em;
}

.art__capt { flex: 0 1 auto; }

.art__credit {
  flex: 0 0 auto;
  color: rgba(26, 24, 21, 0.45);
  font-family: var(--mag-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.art__hero figcaption .art__credit,
.art__figure figcaption .art__credit { vertical-align: baseline; }



/* ===================================== 프론트엔드 개선 (2026-07) */

/* 넓은 화면에서 본문 단을 조금 넓혀 여백과 균형을 맞춘다 */
@media (min-width: 2000px) {
  .art,
  .art__sources,
  .art-footnav { width: min(788px, 100%); }

  .art__body { font-size: 1.06rem; }
}

/* 읽기 진행 표시 — 스크롤 기반, JS 없음 */
@supports (animation-timeline: scroll()) {
  .art-progress {
    position: fixed;
    z-index: 30;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--mag-ink);
    transform-origin: 0 50%;
    scale: 0 1;
    animation: art-progress-grow linear both;
    animation-timeline: scroll(root block);
  }

  @keyframes art-progress-grow {
    to { scale: 1 1; }
  }
}

/* 미지원 브라우저에서는 표시하지 않는다 */
@supports not (animation-timeline: scroll()) {
  .art-progress { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .art-progress { display: none; }
}

/* 기사 상단 러닝 폴리오 — 어느 호의 어느 섹션인지 */
.art__folio {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 14px;
  margin-bottom: 14px;
}

.art__folio a {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mag-ink-soft);
  word-break: keep-all;
}

.art__folio a:hover,
.art__folio a:focus-visible {
  color: var(--mag-ink);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.art__folio span[aria-hidden] {
  color: rgba(26, 24, 21, 0.4);
  font-family: var(--mag-serif);
}

/* ============================================ 출처 · 편집 노트 (지면 뒤)
   본문이 끝난 뒤의 기록. 읽기를 방해하지 않되 근거는 또렷하게.
   ================================================================== */

.art__sources {
  width: min(788px, 100%);
  margin: clamp(40px, 6vh, 68px) auto 0;
  padding: 0 var(--mag-gutter);
}

/* 본문과의 경계 — 굵은 괘선 하나로 단락을 바꾼다 */
.art__sources > h2 {
  margin: 0 0 20px;
  padding-top: 20px;
  border-top: 2px solid var(--mag-ink);
  font-family: var(--mag-sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mag-ink);
}

/* ---------------------------------------------------------- 출처 목록 */

.art__srclist {
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 900px) {
  .art__srclist { columns: 2; column-gap: 44px; }
}

.art__srclist li {
  break-inside: avoid;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 3px 0;
  line-height: 1.7;
}

.art__srclist li::before {
  content: "";
  flex: 0 0 auto;
  width: 4px;
  height: 4px;
  margin-top: 0.55em;
  background: var(--mag-rule);
}

.art__srclist a {
  color: var(--mag-ink);
  font-size: 0.84rem;
  font-weight: 500;
  text-decoration: none;
  word-break: keep-all;
}

.art__srclist a:hover,
.art__srclist a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.art__srcmeta {
  flex: 0 0 auto;
  margin-left: auto;
  padding-left: 8px;
  color: var(--mag-ink-soft);
  font-family: var(--mag-sans);
  font-size: 0.7rem;
  font-weight: 500;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------- 편집 노트 */

.art__note {
  margin-top: 30px;
  padding: 20px 22px 22px;
  background: rgba(26, 24, 21, 0.035);
  border-left: 2px solid var(--mag-ink);
}

.art__note h3 {
  margin: 0 0 4px;
  font-family: var(--mag-sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mag-ink);
}

.art__note__lead {
  margin: 0 0 14px;
  color: var(--mag-ink-soft);
  font-family: var(--mag-serif);
  font-size: 0.86rem;
  font-style: italic;
  line-height: 1.7;
  word-break: keep-all;
}

.art__note ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}

.art__note li {
  position: relative;
  padding-left: 15px;
  color: var(--mag-ink-soft);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.8;
  word-break: keep-all;
}

.art__note li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 6px;
  height: 1px;
  background: var(--mag-ink-soft);
}

/* ------------------------------------------------------------ 반응형 */

@media (max-width: 720px) {
  .art__srclist li {
    grid-template-columns: 1fr;
    gap: 3px;
    padding: 12px 0;
  }

  .art__srclabel { font-size: 0.64rem; }

  .art__note { padding: 16px 16px 18px; }
}

@media print {
  .art__note { background: none; border-left-color: #999; }
  .art__sources > h2 { border-top-color: #999; }
}