/* ==========================================================================
   서대문햇살아래 v3 — webzine.html 전용 스타일
   style.css 토큰(:root)·pages.css 공용 컴포넌트(sub-section·form-agree·form-msg)를 사용한다.
   카드 그리드 대신 표지+메타 리스트, 카드뉴스는 뷰어(1장씩 전환)로 본다.
   ========================================================================== */

/* ── 연도별 보기 필터 (public-data.js가 동적으로 삽입) ─────────── */
/* 연도 버튼 — 목록을 내려 보는 동안 머리말 아래에 고정(2026-10-02 사용자 요청). 글자 17px, 버튼 테두리 --ink-70(3:1 이상) */
.wz-years{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.25rem;position:sticky;top:var(--header-h,5.25rem);z-index:44;background:var(--white);padding:.75rem 0;border-bottom:0.0625rem solid var(--ink-12)}
.wz-years__btn{font-weight:700;font-size:1.0625rem;min-height:2.75rem;padding:.45em 1.1em;border:0.0625rem solid var(--ink-70);border-radius:var(--radius)}
.wz-years__btn[aria-pressed="true"]{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.wz-years__status{margin-top:.5rem;font-size:1.0625rem;color:var(--ink)}
@media (max-width:640px){.wz-years{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:.35rem}.wz-years::-webkit-scrollbar{display:none}.wz-years__btn{flex:1 1 0;min-width:0;padding:.45em .25em;text-align:center}.wz-years__suffix{display:none}}
body.high-contrast .wz-years{background:#000}

/* ── 전체 호 목록 ───────────────────────────────────────────── */
.wz-year{grid-column:1/-1;font-family:var(--font-head);font-weight:800;font-size:1.25rem;margin-top:1.5rem;padding-top:1.25rem;border-top:0.125rem solid currentColor}
.wz-year:first-child{margin-top:0;padding-top:0;border-top:0}
.wz-issues{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.75rem);margin-top:1.5rem}
.wz-issue{display:block}
.wz-issue[hidden],.wz-year[hidden]{display:none}  /* display:block 이 [hidden] 을 이겨 연도 필터가 안 먹던 버그 (2026-10-01) */
.wz-issue__cover{display:block;aspect-ratio:3/4;overflow:hidden;border-radius:var(--radius);background:var(--paper)}
.wz-issue__cover img{width:100%;height:100%;object-fit:cover;transition:transform .2s ease}
.wz-issue:hover .wz-issue__cover img{transform:scale(1.03)}
.wz-issue__meta{display:block;margin-top:.6em}
.wz-issue__meta strong{display:block;font-weight:700;font-size:1.0625rem}
.wz-issue__meta span{display:block;color:var(--ink-70);font-size:.9375rem;margin-top:.2em}
@media (max-width:860px){.wz-issues{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.wz-issues{grid-template-columns:1fr}}

/* ── 최신호(맨 위 펼침) — public-data.js가 #webzine-latest 를 만든다 ── */
.wz-latest{border-bottom:0.0625rem solid var(--ink-12)}

/* ── 카드뉴스 인라인 뷰어 섹션 ──────────────────────────────── */
.wz-issue-view{padding:clamp(2.25rem,5vw,3.5rem) 0;border-top:0.0625rem solid var(--ink-12);scroll-margin-top:6rem}
/* 지난호 뷰어가 목록 격자 안(누른 카드 바로 뒤)에 들어갈 때: 한 줄을 통째로 차지하고, 열린 카드는 테두리로 표시 (2026-10-01) */
.wz-issues > .wz-issue-view{grid-column:1/-1;border:0.125rem solid var(--ink);border-radius:var(--radius);padding:clamp(1.5rem,3vw,2.5rem) clamp(1rem,2vw,1.5rem);margin:0}
.wz-issues > .wz-issue-view .container{padding:0;max-width:none}
.wz-issue[aria-expanded="true"]{outline:0.1875rem solid var(--orange);outline-offset:0.25rem;border-radius:var(--radius)}
.wz-issue-view__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:1.25rem}
.wz-issue-view__title{font-size:clamp(1.375rem,2.2vw,1.75rem);font-weight:800;letter-spacing:-0.015em}
.wz-issue-view__close{font-weight:700;font-size:1.0625rem;min-height:2.75rem;border:0.0625rem solid currentColor;padding:.5em 1em;border-radius:var(--radius)}

/* ── 카드뉴스 뷰어(cn-viewer) — 1장씩 전환, 슬라이드 애니메이션 없음(module js와 동일 동작) ── */
.cn-viewer{max-width:32rem;margin-inline:auto}
/* PC 에서 카드가 작다는 요청(2026-10-02) — 넓은 화면은 44rem(약 704px)까지 */
@media (min-width:1100px){.cn-viewer{max-width:44rem}}
.cn-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.5rem 0}
.cn-bar--top{border-bottom:0.0625rem solid var(--ink-12)}
.cn-bar--bottom{border-top:0.0625rem solid var(--ink-12)}
.cn-arrow{display:inline-flex;align-items:center;gap:.4em;font-weight:700;font-size:1.0625rem;min-height:2.75rem;padding:.5em .3em}
.cn-arrow:hover{color:var(--orange-deep)}
.cn-arrow:disabled{opacity:.35;cursor:default}
.cn-viewer__counter{font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-70)}
.cn-viewer__stage{position:relative;background:var(--paper);border-radius:var(--radius);overflow:hidden;box-shadow:0 1.25rem 2.5rem -0.75rem rgba(31,27,22,.28)}
.cn-viewer__track{position:relative}
.cn-viewer__slide{aspect-ratio:3/4}
.cn-viewer__slide[hidden]{display:none}
.cn-viewer__slide img{width:100%;height:100%;object-fit:contain;background:var(--paper)}
.cn-side{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:2.5rem;height:2.5rem;border-radius:50%;background:rgba(31,27,22,.55);color:#fff;display:grid;place-items:center}
.cn-side:hover{background:rgba(31,27,22,.75)}
.cn-side--prev{left:.6rem}
.cn-side--next{right:.6rem}
.cn-viewer__hint{margin-top:.75rem;font-size:.9375rem;color:var(--ink-70);text-align:center}
body.high-contrast .cn-viewer__stage{outline:0.125rem solid #fff}

/* ── 카드뉴스 전문 텍스트(details/summary, 화면낭독기용) ────────── */
.cn-text,.wz-fulltext{margin-top:1.5rem;border-top:0.0625rem solid var(--ink-12);padding-top:1.25rem}
.cn-text summary,.wz-fulltext summary{font-weight:700;cursor:pointer}
.cn-text__body,.wz-fulltext{margin-top:1rem}
.cn-text__body section,.wz-fulltext__page{padding:1rem 0;border-bottom:0.0625rem solid var(--ink-12)}
.cn-text__body h4,.wz-fulltext__page h4{font-size:1.0625rem;font-weight:700;margin-bottom:.4em}
.cn-text__body h5{font-size:1rem;font-weight:700;margin:1em 0 .3em}
.cn-text__body p,.wz-fulltext__page p,.wz-fulltext__note{color:var(--ink-70);font-size:1.0625rem;line-height:1.7}
.wz-fulltext__note{margin-bottom:.75rem}

/* ── 구독신청 ───────────────────────────────────────────────── */
.subscribe-band{background:var(--paper);border-radius:var(--radius);padding:clamp(1.75rem,3.5vw,2.75rem);display:grid;gap:1.5rem;grid-template-columns:minmax(0,1fr) minmax(0,22rem);align-items:center}
.subscribe-band__title{font-size:clamp(1.375rem,2.2vw,1.75rem);font-weight:800;letter-spacing:-0.015em}
.subscribe-band__desc{margin-top:.5em;color:var(--ink-70)}
.subscribe-form{display:grid;gap:.75rem}
.subscribe-form input[type="email"]{font:inherit;font-size:1.0625rem;padding:.75em .9em;border:0.0625rem solid var(--ink-70);border-radius:var(--radius);background:var(--white);color:var(--ink)}
.subscribe-form .btn{justify-self:start}
@media (max-width:760px){.subscribe-band{grid-template-columns:minmax(0,1fr)}}
.subscribe-form input[type="email"]{width:100%;min-width:0;box-sizing:border-box}
body.high-contrast .subscribe-form input[type="email"]{background:transparent;color:inherit}
/* 크게 보기 대화상자 */
.cn-zoom-btn{display:block;margin:1rem auto 0;min-height:2.75rem;padding:.5em 1.4em;font-weight:700;font-size:1.0625rem;background:var(--ink);color:var(--on-ink);border-radius:var(--radius)}
.cn-zoom{margin:auto;width:min(96vw,70rem);max-width:none;max-height:96vh;padding:0;border:0;border-radius:var(--radius);background:#111;color:#fff;overflow:hidden}
.cn-zoom::backdrop{background:rgba(0,0,0,.82)}
.cn-zoom__bar{display:flex;align-items:center;gap:.75rem;padding:.6rem .75rem;background:#000;position:sticky;top:0}
.cn-zoom__count{margin-right:auto;font-weight:700;font-variant-numeric:tabular-nums;font-size:1.0625rem}
.cn-zoom__nav,.cn-zoom__close{min-height:2.75rem;padding:.4em 1em;font-weight:700;font-size:1.0625rem;color:#fff;border:0.125rem solid #fff;border-radius:var(--radius);background:transparent}
.cn-zoom__nav:disabled{opacity:.4}
.cn-zoom__close{background:#fff;color:#000}
.cn-zoom__bar .cn-zoom__nav:first-child{order:1}.cn-zoom__count{order:0}.cn-zoom__bar [data-z-next]{order:2}.cn-zoom__close{order:3}
.cn-zoom__body{max-height:calc(96vh - 3.75rem);overflow:auto;background:#fff}
.cn-zoom__img{display:block;width:100%;height:auto;max-width:1600px;margin:0 auto}