/*
 * 연재 시리즈 — 목록(/series/)·목차(/series/<slug>/) 전용. 모든 규칙은 .sr- 프리픽스, 토큰은 .sr-page 안에만.
 * 액센트는 premium.css 인디고(#4f46e5) 하나. 카드는 흰 바탕 + 얇은 선 — 색은 진행 칸·칩·버튼 호버에만 쓴다.
 */
.sr-page {
    --sr-ink: #18181b;
    --sr-ink-2: #3f3f46;
    --sr-ink-3: #71717a;
    --sr-ink-4: #a1a1aa;
    --sr-line: #e4e4e7;
    --sr-line-soft: #f0f0f1;
    --sr-bg-soft: #fafafa;
    --sr-accent: #4f46e5;
    --sr-accent-wash: #eef2ff;
    --sr-accent-line: #e0e7ff;
    --sr-r-lg: 20px;
    --sr-r-md: 12px;
    --sr-shadow: 0 1px 2px rgba(24, 24, 60, .04), 0 12px 32px rgba(49, 46, 129, .07);
    --sr-ease: cubic-bezier(.16, 1, .3, 1);
    color: var(--sr-ink-2);
    word-break: keep-all;
}
.sr-wrap { max-width: 1080px; margin: 0 auto; padding: 40px 24px 72px; }

/* ── 공용 조각 ── */
.sr-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .74rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; color: var(--sr-accent); }
.sr-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 700;
    padding: 4px 10px; border-radius: 999px; background: var(--sr-accent-wash); color: var(--sr-accent); }
.sr-chip.is-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .18); }
.sr-chip.is-done { background: #ecfdf5; color: #047857; }
.sr-chip.is-ghost { background: transparent; color: var(--sr-ink-3); border: 1px solid var(--sr-line); }
.sr-bar { height: 6px; border-radius: 999px; background: var(--sr-line-soft); overflow: hidden; }
.sr-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--sr-accent); }
.sr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px;
    padding: 0 18px; border-radius: 12px; font-weight: 700; font-size: .92rem; text-decoration: none;
    transition: background .15s, color .15s, border-color .15s, transform .15s; }
.sr-btn-primary { background: var(--sr-ink); color: #fff; }
.sr-btn-primary:hover { background: var(--sr-accent); color: #fff; }
.sr-btn-ghost { background: #fff; color: var(--sr-ink); border: 1px solid var(--sr-line); }
.sr-btn-ghost:hover { border-color: var(--sr-accent); color: var(--sr-accent); }
.sr-btn:active { transform: translateY(1px); }
.sr-link { font-size: .9rem; font-weight: 700; color: var(--sr-accent); text-decoration: none; }
.sr-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── 목록: 머리말 ── */
.sr-hero { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; margin-bottom: 32px; }
.sr-hero h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.2;
    color: var(--sr-ink); margin: 10px 0 10px; }
.sr-hero p { margin: 0; font-size: 1.02rem; color: var(--sr-ink-3); line-height: 1.7; }
.sr-stats { display: flex; gap: 28px; margin: 0; }
.sr-stats div { text-align: right; }
.sr-stats dt { font-size: .74rem; font-weight: 600; color: var(--sr-ink-3); }
.sr-stats dd { margin: 2px 0 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; color: var(--sr-ink);
    font-variant-numeric: tabular-nums; }

/* ── 목록: 캐러셀 ──
 * 기본은 가로 스크롤 + 스냅(자바스크립트 없이도 넘겨 볼 수 있음). 스크립트가 붙으면 화살표·점·키보드가 켜진다. */
.sr-carousel { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; grid-template-areas: "prev vp next" ". dots .";
    gap: 18px 16px; align-items: center; margin: 0 -64px; }
.sr-viewport { grid-area: vp; position: relative; display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; overscroll-behavior-x: contain; border-radius: var(--sr-r-lg); outline: none; }
.sr-viewport::-webkit-scrollbar { display: none; }
.sr-viewport:focus-visible { box-shadow: 0 0 0 3px var(--sr-accent-line); }
.sr-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: center; padding: 2px; }
.sr-arrow { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
    background: #fff; color: var(--sr-ink); border: 1px solid var(--sr-line); box-shadow: 0 2px 8px rgba(24, 24, 60, .06);
    transition: border-color .15s, color .15s, transform .2s var(--sr-ease), box-shadow .15s; }
.sr-arrow:hover { border-color: var(--sr-accent); color: var(--sr-accent); box-shadow: 0 6px 16px rgba(79, 70, 229, .14); }
.sr-arrow:active { transform: scale(.94); }
.sr-arrow:focus-visible { outline: 3px solid var(--sr-accent-line); outline-offset: 2px; }
.sr-arrow svg { width: 20px; height: 20px; }
.sr-arrow-prev { grid-area: prev; }
.sr-arrow-next { grid-area: next; }
.sr-carousel:not(.is-ready) .sr-arrow, .sr-carousel:not(.is-ready) .sr-dots { visibility: hidden; }
.sr-dots { grid-area: dots; display: flex; justify-content: center; gap: 8px; }
.sr-dot { height: 8px; width: 8px; padding: 0; border: 0; border-radius: 999px; cursor: pointer; background: var(--sr-line);
    transition: width .35s var(--sr-ease), background .2s; }
.sr-dot[aria-current="true"] { width: 28px; background: var(--sr-accent); }
.sr-dot:hover { background: var(--sr-ink-4); }
.sr-dot[aria-current="true"]:hover { background: var(--sr-accent); }
.sr-dot:focus-visible { outline: 3px solid var(--sr-accent-line); outline-offset: 2px; }

/* ── 연재 카드 ── */
.sr-card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: 100%;
    background: #fff; border: 1px solid var(--sr-line); border-radius: var(--sr-r-lg); overflow: hidden;
    box-shadow: var(--sr-shadow); transition: opacity .4s var(--sr-ease), transform .4s var(--sr-ease); }
.sr-carousel.is-ready .sr-slide:not(.is-active) .sr-card { opacity: .45; transform: scale(.97); }
.sr-card-info { padding: 36px 36px 32px; display: flex; flex-direction: column; gap: 14px; }
.sr-card-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sr-card-index { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: .8rem; font-weight: 600;
    color: var(--sr-ink-4); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.sr-card-index b { color: var(--sr-ink); }
.sr-card h2 { font-size: clamp(1.5rem, 2.6vw, 2.05rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.28;
    margin: 4px 0 0; color: var(--sr-ink); }
.sr-card-sub { margin: 0; font-size: 1.02rem; color: var(--sr-ink-2); line-height: 1.6; }
.sr-card-for { margin: 0; font-size: .86rem; color: var(--sr-ink-3); line-height: 1.65; }
.sr-card-for b { color: var(--sr-ink-2); font-weight: 700; margin-right: 4px; }

/* 회차 진행 칸 — 한 칸이 한 회차. 발행 칸은 링크, 다음 회차는 점선이 숨 쉬듯 깜빡인다 */
.sr-progress { margin-top: auto; padding-top: 12px; display: grid; gap: 10px; }
.sr-steps { display: flex; gap: 5px; }
.sr-step { position: relative; flex: 1 1 0; height: 10px; border-radius: 999px; background: var(--sr-line-soft);
    transition: transform .2s var(--sr-ease); }
.sr-step::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--sr-accent);
    transform: scaleX(0); transform-origin: left; transition: transform .5s var(--sr-ease);
    transition-delay: calc(var(--i, 0) * 45ms); }
.sr-step.is-published::after { transform: scaleX(1); }
.sr-carousel.is-ready .sr-slide:not(.is-active) .sr-step.is-published::after { transform: scaleX(0); transition-delay: 0s; }
a.sr-step:hover { transform: scaleY(1.6); }
a.sr-step:focus-visible { outline: 2px solid var(--sr-accent); outline-offset: 3px; }
.sr-step.is-next { background: transparent; box-shadow: inset 0 0 0 1.5px var(--sr-accent);
    animation: srBreathe 2.4s ease-in-out infinite; }
@keyframes srBreathe { 50% { opacity: .35; } }
.sr-progress-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: .84rem;
    color: var(--sr-ink-3); }
.sr-progress-meta b { color: var(--sr-ink); font-variant-numeric: tabular-nums; }
.sr-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 6px; }

.sr-card-toc { padding: 28px 30px; background: var(--sr-bg-soft); border-left: 1px solid var(--sr-line-soft);
    display: flex; flex-direction: column; }
.sr-card-toc h3 { font-size: .78rem; font-weight: 700; color: var(--sr-ink-3); letter-spacing: .08em; margin: 0 0 6px; }
.sr-card-toc .sr-link { margin-top: auto; padding-top: 14px; }

/* ── 목차 행(카드 미리보기·목차 페이지 공용) ── */
.sr-toc { list-style: none; margin: 0; padding: 0; }
.sr-row { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start;
    padding: 12px 8px; margin: 0 -8px; border-radius: 12px; transition: background .15s; }
.sr-row + .sr-row::before { content: ''; position: absolute; left: 8px; right: 8px; top: 0; border-top: 1px solid var(--sr-line-soft); }
.sr-row.is-published:hover { background: #fff; }
.sr-num { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-weight: 800;
    font-size: .92rem; font-variant-numeric: tabular-nums; background: var(--sr-accent-wash); color: var(--sr-accent);
    transition: background .15s, color .15s; }
.sr-row.is-published:hover .sr-num { background: var(--sr-accent); color: #fff; }
.sr-row.is-next .sr-num { background: #fff; border: 1.5px dashed var(--sr-accent); }
.sr-row.is-planned .sr-num { background: var(--sr-line-soft); color: var(--sr-ink-4); }
.sr-row-title { display: block; font-weight: 700; color: var(--sr-ink); line-height: 1.45; text-decoration: none; }
a.sr-row-title::after { content: ''; position: absolute; inset: 0; }          /* 행 전체가 링크 */
a.sr-row-title:hover { color: var(--sr-accent); }
.sr-row.is-planned .sr-row-title, .sr-row.is-next .sr-row-title { color: var(--sr-ink-3); font-weight: 600; }
.sr-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 3px; font-size: .78rem;
    color: var(--sr-ink-3); }
.sr-row-meta .sr-chip { padding: 2px 8px; font-size: .7rem; }
.sr-new { color: var(--sr-accent); font-weight: 800; letter-spacing: .04em; }

.sr-section-title { font-size: 1.1rem; font-weight: 800; color: var(--sr-ink); letter-spacing: -.02em; margin: 0 0 14px; }
.sr-empty { text-align: center; color: var(--sr-ink-3); padding: 64px 0; }

/* ── 목차 페이지 ── */
.sr-head { border-bottom: 1px solid var(--sr-line); background: linear-gradient(180deg, var(--sr-accent-wash) 0%, #fff 100%); }
.sr-head .sr-wrap { padding-bottom: 32px; }
.sr-crumb { font-size: .82rem; color: var(--sr-ink-3); margin-bottom: 14px; }
.sr-crumb a { color: var(--sr-ink-3); text-decoration: none; }
.sr-crumb a:hover { color: var(--sr-accent); }
.sr-head h1 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.25;
    color: var(--sr-ink); margin: 10px 0 8px; }
.sr-head-sub { font-size: 1.05rem; color: var(--sr-ink-2); margin: 0 0 18px; line-height: 1.6; }
.sr-head-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: end; }
.sr-head-progress { display: grid; gap: 8px; max-width: 520px; }
.sr-head-progress .sr-meta { display: flex; justify-content: space-between; gap: 12px; font-size: .84rem; color: var(--sr-ink-3); }
.sr-head-progress .sr-meta b { color: var(--sr-ink); }
.sr-head-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sr-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; padding-top: 32px; }
.sr-body .sr-toc .sr-row { padding: 16px 8px; }
.sr-body .sr-row.is-published:hover { background: var(--sr-bg-soft); }
.sr-body .sr-row-title { font-size: 1.02rem; }
.sr-aside { position: sticky; top: 88px; display: grid; gap: 14px; }
.sr-box { border: 1px solid var(--sr-line); border-radius: var(--sr-r-md); padding: 18px; background: #fff; }
.sr-box h2 { font-size: .8rem; font-weight: 700; letter-spacing: .06em; color: var(--sr-ink-3); margin: 0 0 8px; }
.sr-box p { margin: 0; font-size: .92rem; line-height: 1.7; color: var(--sr-ink-2); }
.sr-box a { color: var(--sr-accent); font-weight: 600; }

/* ── 반응형 ── */
@media (max-width: 1220px) {
    .sr-carousel { margin: 0; }
}
@media (max-width: 900px) {
    .sr-card { grid-template-columns: 1fr; }
    .sr-progress { margin-top: 6px; }      /* 한 줄 배치에선 진행 칸을 소개 바로 아래로 */
    .sr-card-toc { border-left: 0; border-top: 1px solid var(--sr-line-soft); }
    .sr-body { grid-template-columns: 1fr; gap: 24px; }
    .sr-aside { position: static; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }   /* 목차 다음에 안내 */
}
@media (max-width: 640px) {
    .sr-wrap { padding: 24px 16px 56px; }
    .sr-hero { grid-template-columns: 1fr; gap: 16px; margin-bottom: 22px; }
    .sr-stats { gap: 20px; }
    .sr-stats div { text-align: left; }
    .sr-stats dd { font-size: 1.25rem; }
    /* 휴대폰: 화살표는 카드 아래 양옆, 가운데에 점 — 카드 본문을 가리지 않게 */
    .sr-carousel { grid-template-columns: 44px minmax(0, 1fr) 44px; grid-template-areas: "vp vp vp" "prev dots next";
        gap: 14px 8px; }
    .sr-arrow { width: 44px; height: 44px; }
    .sr-card-info { padding: 24px 20px 22px; }
    .sr-card-toc { padding: 18px 20px 20px; }
    .sr-card-actions .sr-btn { flex: 1 1 auto; }
    .sr-head .sr-wrap { padding-bottom: 24px; }
    .sr-head-row { grid-template-columns: 1fr; }
    .sr-head-actions .sr-btn { flex: 1 1 auto; }
    .sr-aside { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .sr-card, .sr-step, .sr-step::after, .sr-dot, .sr-btn, .sr-arrow { transition: none; }
    .sr-step.is-next { animation: none; }
    .sr-viewport { scroll-behavior: auto; }
}