/* site.css - 환경장애인신문 공개 화면. tokens.css → base.css 다음. 모바일 먼저. */

/* ---------- 헤더 ---------- */
.site-header { border-block-end: 3px solid var(--color-text); background: var(--color-bg); }
.util {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: var(--space-1) var(--space-4);
  padding-block: 0;
  font-size: var(--text-xs); color: var(--color-text-muted);
  border-block-end: 1px solid var(--color-border);
}
.util-info { max-inline-size: none; }
.util-links { display: flex; gap: var(--space-4); list-style: none; padding: 0; }
.util-links a { color: var(--color-text); font-weight: var(--weight-medium); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-block-size: 2.75rem; min-inline-size: 2.75rem; }
.brand-row { display: flex; flex-direction: column; gap: var(--space-2); padding-block-start: var(--space-4); }
.brand { display: block; inline-size: min(17rem, 72vw); }
.brand img { inline-size: 100%; block-size: auto; }

/* 섹션 내비: 모바일은 한 줄 가로 스크롤 (의도된 스크롤 영역) */
.nav ul {
  display: flex; gap: var(--space-1); list-style: none; padding: 0;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
}
.nav ul::-webkit-scrollbar { display: none; }
.nav a {
  display: block; white-space: nowrap;
  padding: var(--space-3) var(--space-3);
  font-size: var(--text-base); font-weight: var(--weight-medium);
  text-decoration: none; color: var(--color-text);
  border-block-end: 3px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.nav a[aria-current="page"] { font-weight: var(--weight-bold); border-color: var(--color-brand-green); }
@media (hover: hover) and (pointer: fine) {
  .nav a:hover { border-color: var(--color-border-strong); }
  .nav a[aria-current="page"]:hover { border-color: var(--color-brand-green); }
}
@media (min-width: 64em) {
  .brand-row { flex-direction: row; align-items: flex-end; justify-content: space-between; padding-block: var(--space-6) 0; }
  .brand { inline-size: 19rem; margin-block-end: var(--space-3); }
  .nav ul { margin: 0; padding: 0; overflow: visible; }
  .nav a { padding-inline: var(--space-3); font-size: var(--text-lg); }
}

/* ---------- 공통 조각 ---------- */
.label {
  position: relative; z-index: var(--z-raised); /* 기사 전체 링크 영역 위에서 따로 눌린다 */
  display: inline-block; min-inline-size: 2.75rem; font-size: var(--text-sm); font-weight: var(--weight-bold);
  color: var(--color-accent); text-decoration: none;
  padding: var(--space-3) var(--space-2); margin: calc(var(--space-3) * -1) calc(var(--space-2) * -1) calc(var(--space-2) * -1); /* 누르는 칸 44px, 차지하는 자리는 예전과 같음 */
}
.kicker { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-brand-red); margin-inline: auto; }
.mini-head {
  font-size: var(--text-base); font-family: var(--font-body); letter-spacing: 0;
  padding-block-end: var(--space-2); border-block-end: 2px solid var(--color-text);
}
.sec-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4);
  border-block-start: 2px solid var(--color-text); padding-block: var(--space-3);
  margin-block-end: var(--space-4);
}
.sec-head h1, .sec-head h2 { font-size: var(--text-xl); }
.sec-head h1 span { font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--color-text-muted); }
.sec-head a { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-muted); text-decoration: none; padding-block: var(--space-1); }
.sec-head p { color: var(--color-text-muted); font-size: var(--text-sm); }
.page-head { border-block-start: 0; padding-block-start: 0; }
.page-head h1 { font-size: var(--text-3xl); }

a.label:hover, .sec-head a:hover { text-decoration: underline; }

/* 기사 목록 한 줄 */
.item { position: relative; display: grid; align-content: start; gap: var(--space-3); padding-block: var(--space-4); border-block-end: 1px solid var(--color-border); }
/* 제목 링크가 기사 칸 전체를 덮는다: 사진·요약을 눌러도 기사로 가고, 링크는 하나만 읽힌다 */
.item-title a::after, .lead-title a::after { content: ""; position: absolute; inset: 0; }
.lead { position: relative; }
.item:last-child { border-block-end: 0; }
.item-photo { display: block; align-self: start; overflow: hidden; background: var(--color-surface); }
.item-photo img { inline-size: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: filter var(--dur-fast) var(--ease-out); }
.item-title { font-size: var(--text-lg); line-height: var(--leading-heading); }
.item-title a { display: block; padding-block: var(--space-1); text-decoration: none; }
.item-excerpt { margin-block-start: var(--space-2); color: var(--color-text-muted); font-size: var(--text-base); line-height: 1.7; }
@media (hover: hover) and (pointer: fine) {
  .item:hover .item-title a { text-decoration: underline; }
  .lead:hover .lead-title a { text-decoration: underline; }
  .lead:hover .lead-photo img { filter: brightness(0.92); }
  .item:hover .item-photo img { filter: brightness(0.92); }
}
.title-list { list-style: none; padding: 0; }
.title-list li { border-block-start: 1px solid var(--color-border); }
.title-list a { display: block; padding-block: var(--space-3); font-weight: var(--weight-medium); text-decoration: none; line-height: var(--leading-heading); }
.title-list a:hover { text-decoration: underline; }

/* ---------- 홈: 3단 머리 ---------- */
.top { padding-block: var(--space-6) var(--space-4); }
.top-grid { display: grid; gap: var(--space-6); }
.top-grid > * { min-inline-size: 0; }
.lead { display: grid; gap: var(--space-3); text-align: center; padding-block-end: var(--space-6); border-block-end: 1px solid var(--color-border); }
.lead-photo { display: block; background: var(--color-surface); }
.lead-photo img { inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: filter var(--dur-fast) var(--ease-out); }
.lead-title { font-size: var(--text-3xl); line-height: var(--leading-display); }
.lead-title a { text-decoration: none; }
.lead-lede { color: var(--color-text-muted); font-size: var(--text-base); line-height: 1.7; text-align: start; margin-inline: auto; max-inline-size: var(--measure); }
.lead-paper { margin-block: var(--space-6) 0; text-align: start; }
.deck, .art-decks p { font-family: var(--font-serif); font-weight: 600; color: var(--color-text); font-size: var(--text-lg); line-height: 1.5; margin-inline: auto; }
.top-left .item-title { font-size: var(--text-xl); }
.top-right .item { grid-template-columns: minmax(0, 1fr) min(6.5rem, 30%); align-items: start; } /* 글자 200% 에서도 사진이 칸 밖으로 밀리지 않게 */
.item-text { min-inline-size: 0; overflow-wrap: anywhere; }
.top-right .item.has-photo .item-photo { order: 2; }
.top-right .item:not(.has-photo) { grid-template-columns: 1fr; }
.top-right .item-title { font-size: var(--text-base); }
@media (min-width: 48em) {
  .top-left { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  .top-left .item { border-block-end: 0; }
}
@media (min-width: 64em) {
  .top-grid { grid-template-columns: 1fr 2fr 1fr; gap: var(--space-8); align-items: start; }
  .top-left { grid-column: 1; grid-row: 1; display: block; padding-inline-end: var(--space-8); border-inline-end: 1px solid var(--color-border); margin-inline-end: calc(var(--space-4) * -1); }
  .top-left .item { border-block-end: 1px solid var(--color-border); }
  .top-lead { grid-column: 2; grid-row: 1; }
  .top-right { grid-column: 3; grid-row: 1; }
  .lead { border-block-end: 0; }
}

/* 사진 카드 4열 */
.card-grid { display: grid; gap: 0 var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 64em) { .card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--space-6); } }
.card-grid > * { min-inline-size: 0; }
.card-grid .item { border-block-end: 0; padding-block-start: 0; }
.card-grid .item-title { font-size: var(--text-base); }

/* 섹션 묶음 2열 */
.sec-grid { display: grid; gap: var(--space-8) var(--space-12); }
.sec-grid > * { min-inline-size: 0; }
.sec-block .item { border-block-end: 0; padding-block-start: 0; }
@media (min-width: 48em) {
  .sec-grid { grid-template-columns: 1fr 1fr; }
  .sec-block .item.has-photo { grid-template-columns: 7rem minmax(0, 1fr); }
  .sec-block .item-text { min-inline-size: 0; overflow-wrap: anywhere; }
}
@media (min-width: 64em) { .sec-block .item.has-photo { grid-template-columns: 11rem minmax(0, 1fr); } }

/* 지면 썸네일 격자 */
.page-grid { display: grid; gap: var(--space-6) var(--space-4); list-style: none; padding: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 64em) { .page-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.page-grid > * { min-inline-size: 0; }
.page-grid a { display: grid; gap: var(--space-2); text-decoration: none; font-size: var(--text-sm); font-weight: var(--weight-medium); }
.page-grid img { inline-size: 100%; border: 1px solid var(--color-border); transition: border-color var(--dur-fast) var(--ease-out); }
.page-grid a:hover img { border-color: var(--color-text); }
.page-grid a:hover span { text-decoration: underline; }

/* ---------- 기사 ---------- */
.art-wrap { display: grid; gap: var(--space-12); padding-block: var(--space-8) var(--section-y); }
.art-wrap > * { min-inline-size: 0; }
.art-head { padding-block-end: var(--space-6); border-block-end: 1px solid var(--color-border); margin-block-end: var(--space-6); }
.art-head h1 { font-size: var(--text-4xl); margin-block: var(--space-2) var(--space-4); }
.art-decks { border-inline-start: 4px solid var(--color-brand-green); padding-inline-start: var(--space-4); display: grid; gap: var(--space-1); margin-block-end: var(--space-4); }
.art-decks p { margin: 0; font-size: var(--text-lg); }
.art-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); max-inline-size: none; }
.art-meta a { display: inline-flex; align-items: center; min-block-size: 2.75rem; margin-block: calc((2.75rem - 1lh) / -2); color: var(--color-accent); font-weight: var(--weight-medium); }
.art-photo { margin-block-end: var(--space-6); }
.art-photo img { inline-size: 100%; }
.art-photo figcaption { font-size: var(--text-sm); color: var(--color-text-muted); margin-block-start: var(--space-2); }
.art-body { font-size: var(--text-article); }
.art-body p + p { margin-block-start: var(--space-8); } /* 문단 경계로 확대 독자가 자리 찾기 (참고 언론 31~40px) */
.art-byline { margin-block-start: var(--space-6); text-align: end; font-weight: var(--weight-medium); max-inline-size: var(--measure); }
.aside-paper { display: grid; grid-template-columns: 5rem 1fr; gap: var(--space-3); align-items: center; text-decoration: none; font-weight: var(--weight-medium); padding: var(--space-3); background: var(--color-surface); margin-block-end: var(--space-6); }
.aside-paper img { border: 1px solid var(--color-border); }
.aside-paper:hover span { text-decoration: underline; }
.art-more { margin-block-start: var(--space-12); max-inline-size: var(--measure); }
.art-more .item-title { font-size: var(--text-lg); }
@media (min-width: 64em) {
  .art-wrap { grid-template-columns: minmax(0, 1fr) var(--aside-w); gap: var(--space-16); }
  .art-photo, .art-head { max-inline-size: 46rem; }
  .art-aside { position: sticky; inset-block-start: var(--space-6); align-self: start; }
}

/* ---------- 섹션 목록 ---------- */
.list .item.has-photo { grid-template-columns: 7rem minmax(0, 1fr); align-items: start; }
/* 좁은 화면: 요약문은 사진 옆 좁은 칸이 아니라 사진·제목 아래 전체 폭으로 */
@media (max-width: 47.99em) {
  .list .item.has-photo { column-gap: var(--space-3); row-gap: var(--space-2); }
  .list .item.has-photo .item-text { display: contents; }
  .list .item.has-photo .item-photo { grid-row: span 2; }
  .list .item.has-photo .item-excerpt { grid-column: 1 / -1; margin-block-start: 0; }
  .list .item-excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
}
@media (min-width: 48em) { .list .item.has-photo { grid-template-columns: 14rem minmax(0, 1fr); } }
.list .item-title { font-size: var(--text-xl); }

/* ---------- 지면보기 ---------- */
.page-tabs ul { display: flex; flex-wrap: wrap; gap: var(--space-1); list-style: none; padding: 0; margin-block-end: var(--space-4); }
.page-tabs a { display: flex; align-items: center; justify-content: center; min-block-size: 2.75rem; min-inline-size: 3rem; text-align: center; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); text-decoration: none; font-size: var(--text-sm); font-weight: var(--weight-medium); }
.page-tabs a[aria-current="page"] { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }
.page-tabs a:hover { border-color: var(--color-text); }
@media (max-width: 47.99em) { /* 좁은 화면: 면 탭은 섹션 내비처럼 한 줄 가로 스크롤 (의도된 스크롤 영역) */
  .page-tabs ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .page-tabs ul::-webkit-scrollbar { display: none; }
  .page-tabs a { white-space: nowrap; }
}
.paper-wrap { display: grid; gap: var(--space-8); }
.paper-wrap > * { min-inline-size: 0; }
.paper { position: relative; border: 1px solid var(--color-border); }
.paper img { inline-size: 100%; }
.hot { position: absolute; display: block; outline-offset: 0; text-decoration: none; box-shadow: inset 0 0 0 2px var(--color-accent-line); transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.num { display: inline-grid; place-items: center; min-inline-size: 1.5rem; block-size: 1.5rem; padding-inline: var(--space-1); background: var(--color-accent); color: var(--color-on-accent); font-size: var(--text-xs); font-weight: var(--weight-bold); line-height: 1; }
.hot .num { position: absolute; inset-block-start: 0; inset-inline-end: 0; transform: translate(35%, -35%); } /* 모서리 밖으로: 제목 글자를 가리지 않게 */
.paper-aside .title-list a { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; }
.paper-intro { margin-block-end: var(--space-3); max-inline-size: none; }
.hot:hover, .hot:focus-visible, .hot:target { background: var(--color-accent-wash); box-shadow: inset 0 0 0 3px var(--color-accent); }
.pager { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-block: var(--space-6) var(--space-2); }
.pager a, .pager span { padding: var(--space-2) var(--space-4); border: 1px solid var(--color-border-strong); text-decoration: none; font-weight: var(--weight-medium); }
.pager span { color: var(--color-text-muted); border-color: var(--color-border); }
.hint { font-size: var(--text-sm); color: var(--color-text-muted); }
.pager-top { margin-block: 0 var(--space-4); align-items: center; }
.pager .pager-now { border: 0; padding-inline: 0; color: var(--color-text); font-weight: var(--weight-bold); }
.toc-grid { display: grid; gap: var(--space-8) var(--space-12); }
.toc-grid > * { min-inline-size: 0; }
@media (min-width: 48em) { .toc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .toc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.toc-page .mini-head a { display: inline-flex; align-items: center; min-block-size: 2.75rem; min-inline-size: 2.75rem; color: var(--color-accent); }
.toc-page .mini-head a:hover { text-decoration: underline; }
.toc-link { display: inline-flex; align-items: center; min-block-size: 2.75rem; font-size: var(--text-sm); color: var(--color-accent); }
.to-top a { display: inline-flex; align-items: center; min-block-size: 2.75rem; font-weight: var(--weight-medium); }
@media (min-width: 64em) {
  .paper-wrap { grid-template-columns: minmax(0, 1fr) var(--aside-w); }
  .paper-aside { position: sticky; inset-block-start: var(--space-6); align-self: start; }
}

/* ---------- 푸터 ---------- */
.site-footer { margin-block-start: var(--section-y); padding-block: var(--space-12); background: var(--color-surface); border-block-start: 1px solid var(--color-border); font-size: var(--text-sm); }
.footer-grid { display: grid; gap: var(--space-8); }
.footer-logo { inline-size: 12rem; block-size: auto; mix-blend-mode: multiply; }
.footer-note { margin-block-start: var(--space-3); color: var(--color-text-muted); }
.masthead { display: grid; gap: var(--space-2) var(--space-6); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.masthead div { display: flex; gap: var(--space-2); }
.masthead dt { color: var(--color-text-muted); flex: none; }
.masthead a { display: inline-flex; align-items: center; min-block-size: 2.75rem; margin-block: calc((2.75rem - 1lh) / -2); color: var(--color-accent); }
@media (min-width: 64em) { .footer-grid { grid-template-columns: 16rem 1fr; } }

/* ---------- 버튼 ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-block-size: 2.75rem; padding: 0 var(--space-6); border: 1px solid var(--color-accent); border-radius: var(--radius-sm); background: var(--color-accent); color: var(--color-on-accent); font-weight: var(--weight-bold); white-space: nowrap; transition: background-color var(--dur-fast) var(--ease-out); }
.btn:hover { background: var(--color-accent-hover); }
.btn:disabled { opacity: 0.5; cursor: progress; }
.btn-ghost { background: var(--color-bg); color: var(--color-accent); }
.btn-ghost:hover { background: var(--color-accent-tint); }

/* ---------- 기사 도구줄 ---------- */
.art-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-block-start: var(--space-4); font-size: var(--text-sm); }
.art-tools button { min-block-size: 2.75rem; padding: 0 var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-bg); font-weight: var(--weight-medium); transition: background-color var(--dur-fast) var(--ease-out); }
.art-tools button:hover { background: var(--color-surface); }
.fs-label { color: var(--color-text-muted); font-weight: var(--weight-medium); }
.fs-row { display: flex; align-items: center; gap: var(--space-3); flex-basis: 100%; } /* 좁은 화면: 글자 크기 한 줄, 인쇄·복사 다음 줄 */
@media (min-width: 48em) { .fs-row { flex-basis: auto; margin-inline-end: var(--space-3); } }
.fs { display: flex; flex-wrap: wrap; }
.fs-row { flex-wrap: wrap; }
.fs button + button { margin-inline-start: -1px; }
.fs button[aria-pressed="true"] { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }
.tool-status { color: var(--color-accent); font-weight: var(--weight-medium); }
.art-tools button[data-speak][aria-pressed="true"] { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }
:root[data-fs="1"] .art-body { font-size: var(--text-xl); }
:root[data-fs="2"] .art-body { font-size: var(--text-2xl); }
.art-body { overflow-wrap: break-word; }

/* 이전·다음 기사 */
.art-nav { display: grid; gap: var(--space-3); margin-block-start: var(--space-8); padding-block-start: var(--space-4); border-block-start: 1px solid var(--color-border); max-inline-size: var(--measure); }
.art-nav a { display: grid; gap: var(--space-1); padding: var(--space-3); border: 1px solid var(--color-border); text-decoration: none; font-weight: var(--weight-medium); line-height: var(--leading-heading); transition: border-color var(--dur-fast) var(--ease-out); }
.art-nav a span { font-size: var(--text-sm); color: var(--color-text-muted); font-weight: var(--weight-regular); }
.art-nav a:hover { border-color: var(--color-text); text-decoration: underline; }
.art-nav a { font-size: var(--text-base); text-wrap: balance; }
@media (min-width: 48em) {
  .art-nav { grid-template-columns: 1fr 1fr; }
  .art-nav .next { text-align: end; }
  .art-nav a:only-child { grid-column: 1 / -1; } /* 한쪽만 있으면 두 칸을 다 쓴다 */
}

/* ---------- 섹션: 호별 묶음 ---------- */
.issue-head { margin-block-start: var(--space-8); color: var(--color-text-muted); }
.issue-head time { font-weight: var(--weight-regular); margin-inline-start: var(--space-2); }
section:first-of-type > .issue-head { margin-block-start: 0; }

/* ---------- 검색 ---------- */
.search-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); max-inline-size: 40rem; margin-block-end: var(--space-6); }
.search-form label { font-weight: var(--weight-bold); }
.search-row { display: flex; gap: var(--space-2); }
.search-row input { flex: 1; min-inline-size: 0; min-block-size: 2.75rem; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-bg); }
.search-count { font-weight: var(--weight-medium); max-inline-size: none; margin-block-end: var(--space-2); }
.result-meta { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-accent); }
mark { background: var(--color-accent-tint); color: var(--color-text); font-weight: var(--weight-bold); text-decoration: underline 2px var(--color-accent); text-underline-offset: 0.2em; } /* 색에만 기대지 않게 밑줄 */
#search-more { margin-block-start: var(--space-6); }

/* ---------- 404 ---------- */
.nf-text { margin-block: var(--space-4) var(--space-6); color: var(--color-text-muted); }
.nf-links { display: flex; flex-wrap: wrap; gap: var(--space-4); list-style: none; padding: 0; }
.nf-links a { display: inline-flex; align-items: center; justify-content: center; min-block-size: 2.75rem; min-inline-size: 2.75rem; font-weight: var(--weight-medium); }

/* ---------- 푸터 메뉴 ---------- */
.footer-nav { grid-column: 1 / -1; padding-block-start: var(--space-6); border-block-start: 1px solid var(--color-border); }
.footer-nav ul { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); list-style: none; padding: 0; }
.footer-nav a { display: inline-flex; align-items: center; min-block-size: 2.75rem; min-inline-size: 2.75rem; text-decoration: none; font-weight: var(--weight-medium); }
.footer-nav a:hover { text-decoration: underline; }

/* ---------- 인쇄: 기사 본문만 ---------- */
@media print {
  .site-header, .site-footer, .art-aside, .art-tools, .art-nav, .art-more, .skip-link { display: none !important; }
  .art-wrap { display: block; padding: 0; }
  .art-body { font-size: 11pt; }
  a { color: inherit; text-decoration: none; }
}

/* ---------- 홈 광고 넘김 (가운데 단 아래): 광고 위에 얹은 둥근 화살표 + 오른쪽 아래 'N / 전체 ❚❚' 알약 ---------- */
.ad-rail { margin-block-start: var(--space-6); text-align: start; }
.ad-stage { position: relative; margin-block-start: var(--space-3); }
.ad-track { list-style: none; padding: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.ad-rail.js .ad-track { scrollbar-width: none; }
.ad-rail.js .ad-track::-webkit-scrollbar { display: none; }
.ad-slide { flex: 0 0 100%; scroll-snap-align: start; }
.ad-slide a { display: block; background: var(--color-surface); }
.ad-slide img { inline-size: 100%; aspect-ratio: 2 / 1; object-fit: contain; }
.ad-ctrl[hidden] { display: none; }
.ad-ctrl button { border: 0; font: inherit; cursor: pointer; display: grid; place-items: center; }
.ad-arrow {
  position: absolute; inset-block-start: 50%; translate: 0 -50%;
  inline-size: 2.75rem; block-size: 2.75rem; border-radius: var(--radius-full);
  background: var(--color-float); color: var(--color-text); box-shadow: var(--shadow-float);
  opacity: 0.85; transition: opacity var(--dur-fast) var(--ease-out), scale var(--dur-fast) var(--ease-out);
}
.ad-prev { inset-inline-start: var(--space-2); }
.ad-next { inset-inline-end: var(--space-2); }
.ad-stage:hover .ad-arrow, .ad-arrow:focus-visible { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .ad-arrow:hover { scale: 1.06; } }
.ad-arrow:active { scale: 0.96; }
.ad-pill {
  position: absolute; inset-block-end: var(--space-2); inset-inline-end: var(--space-2);
  display: flex; align-items: center; gap: var(--space-1); padding-inline-start: var(--space-3);
  border-radius: var(--radius-full); background: var(--color-overlay); color: var(--color-on-accent);
  font-size: var(--text-sm); font-variant-numeric: tabular-nums;
}
.ad-count b { font-weight: var(--weight-bold); }
.ad-pill button { inline-size: 2.75rem; block-size: 2.75rem; border-radius: var(--radius-full); background: transparent; color: inherit; }
.ad-pill button:focus-visible { outline-color: var(--color-on-accent); outline-offset: -4px; }
.ad-pill .i-play, .ad-pill button[data-on="false"] .i-pause { display: none; }
.ad-pill button[data-on="false"] .i-play { display: block; }

/* ---------- 뒤로 (홈 말고 모든 화면 맨 위) ---------- */
.back-row { padding-block-start: var(--space-3); }
.back {
  display: inline-flex; align-items: center; gap: var(--space-1); min-block-size: 2.75rem; padding-inline: var(--space-2) var(--space-3);
  margin-inline-start: calc(var(--space-2) * -1); font-weight: var(--weight-medium); color: var(--color-text); text-decoration: none;
  border-radius: var(--radius-full); transition: background-color var(--dur-fast) var(--ease-out);
}
.back:hover { background: var(--color-surface-2); }

/* ---------- 사진 크게 보기 (광고·기사 사진·지면): 화면 위에 검은 바탕, 왼쪽 위 '뒤로' ---------- */
a[data-zoom] { cursor: zoom-in; }
.art-photo a { display: block; }
.viewer { inline-size: 100%; block-size: 100%; max-inline-size: none; max-block-size: none; margin: 0; padding: 0; border: 0; background: var(--color-text); color: var(--color-on-accent); }
.viewer::backdrop { background: var(--color-text); }
.viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.viewer-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) var(--space-4); }
.viewer-bar button { border: 0; font: inherit; cursor: pointer; background: transparent; color: inherit; }
.viewer-bar .back { color: inherit; }
.viewer-bar .back:hover { background: var(--color-overlay-hover); }
.viewer-bar .back:focus-visible, .viewer-img:focus-visible { outline-color: var(--color-on-accent); }
.viewer-img { overflow: auto; display: grid; place-items: center; padding: 0 var(--space-4) var(--space-4); }
.viewer-img img { max-inline-size: 100%; max-block-size: 100%; inline-size: auto; block-size: auto; object-fit: contain; }
@media (prefers-reduced-motion: no-preference) {
  .viewer[open] { animation: viewer-in var(--dur-base) var(--ease-out); }
  @keyframes viewer-in { from { opacity: 0; } }
}

/* 직접 쓴 기사: 사진 크기·위치, 화면 모양 (관리자 '배치') */
.art-body .art-photo { margin-block: var(--space-8); }
.art-wrap .art-photo.sz-s { max-inline-size: 20rem; }
.art-wrap .art-photo.sz-l { max-inline-size: none; }
.art-body::after { content: ""; display: block; clear: both; }
@media (min-width: 48em) {
  .art-wrap .art-photo.is-side { float: inline-end; inline-size: min(45%, 20rem); margin: 0 0 var(--space-4) var(--space-6); }
}
@media (min-width: 64em) {
  .art-wrap.art-wrap--wide, .art-wrap.art-wrap--plain { grid-template-columns: minmax(0, 1fr); }
  .art-wrap--wide .art-aside { position: static; }
  .art-wrap--plain .art-aside { display: none; }
  .art-wrap--plain .art { inline-size: min(100%, 42rem); margin-inline: auto; }
}
.web-lead { padding-block-end: 0; }
.web-lead .lead { max-inline-size: 52rem; margin-inline: auto; }
@media (min-width: 48em) { .web-lead .lead-photo img { aspect-ratio: 21 / 9; } } /* 홈 머리기사 사진이 첫 화면을 다 덮지 않게 */