/* 예고픽 「예고편 분석」 — 글(/critique/<slug>/) · 목록(/critique/) · 관리자 미리보기 공통. tokens.css 변수만 사용.
   롱폼 가독성: 본문 17px / 1.75, 최대 폭 720px. 모바일 1열(접이식 목차) → 900px↑ 좌측 sticky 목차 + 본문.
   콜아웃 4종(정의·요약·주의·팁)은 같은 외형 — 라벨 문구로만 구분한다(색·컬러 바 구분 금지, ILIIAD 칼럼 가이드 5장). */

.crt { --crt-w: 720px; padding-top: var(--sp-2); }
.crt a { color: inherit; }

/* ── 브레드크럼 ── */
.crt-breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px var(--sp-2); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--c-text-muted); }
.crt-breadcrumb li { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.crt-breadcrumb li + li::before { content: "›"; color: var(--c-text-faint); }
.crt-breadcrumb a { display: inline-flex; align-items: center; min-height: 32px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--c-line-strong); }
.crt-breadcrumb a[aria-current="page"] { text-decoration: none; color: var(--c-text); max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; line-height: 32px; }

/* ── 머리말 ── */
.crt-hero { padding-block: var(--sp-4) var(--sp-5); max-width: 880px; }
.crt-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--fw-bold); letter-spacing: 0.04em; color: var(--c-gold-text); margin-bottom: var(--sp-3); }
.crt-kicker::before { content: ""; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }
.crt-kicker a { text-decoration: underline; text-underline-offset: 3px; }
.crt-title { font-size: 26px; line-height: 34px; font-weight: var(--fw-black); letter-spacing: var(--ls-tight); word-break: keep-all; }
.crt-lead { margin-top: var(--sp-4); font-size: 17px; line-height: 28px; max-width: 640px; }
.crt-lead strong { box-shadow: inset 0 -0.45em 0 var(--c-gold-soft); }
.crt-byline { margin-top: var(--sp-4); display: grid; gap: var(--sp-3); }
.crt-byline__list { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); margin: 0; font-size: var(--fs-caption); line-height: var(--lh-caption); }
.crt-byline__list > div { display: flex; gap: 6px; }
.crt-byline__list dt { color: var(--c-text-muted); }
.crt-byline__list dd { margin: 0; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.crt-ai { display: flex; gap: var(--sp-2); align-items: flex-start; padding: var(--sp-3); border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--c-text-muted); max-width: var(--crt-w); }
.crt-ai .icon { flex: none; margin-top: -1px; color: var(--c-violet); }
.crt-hero--index .crt-ai { margin-top: var(--sp-4); }
.crt-tools { margin-top: var(--sp-3); display: flex; gap: var(--sp-2); }
.crt-tools .btn[hidden] { display: none; }
.crt-tools .btn { gap: 6px; }

/* ── 영화 카드 ── */
.crt-movie { display: grid; grid-template-columns: 112px 1fr; gap: var(--sp-3) var(--sp-4); align-items: start; padding: var(--sp-3); margin-bottom: var(--sp-6); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); max-width: 880px; }
.crt-movie__thumb { display: block; aspect-ratio: 16 / 9; border-radius: var(--r-sm); overflow: hidden; background: var(--c-surface-2); }
.crt-movie__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.crt-movie__info { min-width: 0; display: grid; gap: 4px; }
.crt-movie__kicker { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--c-text-muted); }
.crt-movie__title { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-bold); }
.crt-movie__title a { text-decoration: none; }
.crt-movie__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.crt-movie__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--sp-2); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--c-text-muted); }
.crt-movie__meta > span + span::before { content: "·"; margin-right: var(--sp-2); color: var(--c-text-faint); }
.crt-movie__meta > .chip::before { content: none !important; }
.crt-movie__cta { justify-self: start; margin-top: var(--sp-2); grid-column: 1 / -1; }
.crt-rank { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--r-pill); background: var(--c-gold-soft); border: 1px solid var(--c-gold-line); color: var(--c-gold-text); font-size: 12px; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; text-decoration: none; }
.crt-rank[hidden] { display: none; }

/* ── 레이아웃·목차 ── */
.crt-layout { display: block; }
.crt-article { max-width: var(--crt-w); min-width: 0; }
.crt-toc { margin-bottom: var(--sp-6); border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface); max-width: var(--crt-w); }
.crt-toc > summary { list-style: none; cursor: pointer; min-height: var(--touch); display: flex; align-items: center; padding: 0 var(--sp-4); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.crt-toc > summary::-webkit-details-marker { display: none; }
.crt-toc > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--c-text-muted); border-bottom: 2px solid var(--c-text-muted); transform: rotate(45deg) translateY(-2px); transition: transform var(--dur-2) var(--ease-out); }
.crt-toc[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.crt-toc__list { list-style: none; margin: 0; padding: 0 var(--sp-2) var(--sp-3); display: grid; gap: 2px; }
.crt-toc__link { display: flex; gap: var(--sp-3); align-items: baseline; min-height: 40px; padding: 9px var(--sp-2); border-radius: var(--r-sm); font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--c-text-muted); text-decoration: none; }
.crt-toc__link:hover { background: var(--c-surface-2); color: var(--c-text); }
.crt-toc__link[aria-current="true"] { color: var(--c-text); background: var(--c-surface-2); box-shadow: inset 2px 0 0 var(--c-gold); }
.crt-toc__num { font-variant-numeric: tabular-nums; font-weight: var(--fw-bold); color: var(--c-gold-text); font-size: var(--fs-caption); min-width: 1.6em; }
.crt-toc__text { min-width: 0; flex: 1 1 auto; }
/* 목차 썸네일(장식): 섹션 이미지의 320×180 변형. 모바일에서도 한 줄 높이를 거의 늘리지 않는 크기 */
.crt-toc__list--thumbs .crt-toc__link { align-items: center; }
.crt-toc__thumb { flex: none; align-self: center; width: 48px; aspect-ratio: 16 / 9; border-radius: 4px; background-color: var(--c-surface-2); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; box-shadow: inset 0 0 0 1px var(--c-line); }

/* ── 본문 타이포(롱폼) ── */
.crt-body { font-size: 17px; line-height: 1.75; word-break: keep-all; overflow-wrap: anywhere; }
.crt-body > * + * { margin-top: 1.1em; }
.crt-body h2, .crt-faq h2, .crt-refs h2, .crt-section-title {
  font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight);
  margin-top: 2.2em; padding-top: var(--sp-5); border-top: 1px solid var(--c-line); scroll-margin-top: calc(var(--topbar-h) + var(--sp-4));
}
.crt-body > h2:first-child, .crt-body > .callout:first-child + h2 { margin-top: 1.6em; }
.crt-body h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-bold); margin-top: 1.8em; }
.crt-body h2 + p, .crt-body h3 + p { margin-top: 0.7em; }
.crt-body strong { font-weight: var(--fw-bold); box-shadow: inset 0 -0.4em 0 var(--c-gold-soft); }
.crt-body a { text-decoration: underline; text-underline-offset: 3px; color: var(--c-primary-text); }
.crt-body ul, .crt-body ol { padding-left: 1.3em; display: grid; gap: 0.4em; }
.crt-body li::marker { color: var(--c-text-muted); }
.crt-body blockquote { margin-inline: 0; padding: var(--sp-1) 0 var(--sp-1) var(--sp-4); border-left: 3px solid var(--c-line-strong); color: var(--c-text-muted); }
.crt-body code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.88em; background: var(--c-surface-2); border-radius: 4px; padding: 1px 5px; }

/* 콜아웃: 4종 동일 외형(배경=페이지, 테두리 1px, 라벨 muted). 종류는 라벨 문구로만 */
.callout { border: 1px solid var(--c-line-strong); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); background: transparent; }
.callout-label { display: block; font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--fw-bold); letter-spacing: 0.04em; color: var(--c-text-muted); margin-bottom: var(--sp-2); }
.callout > * + * { margin-top: 0.6em; }
.callout > .callout-label + * { margin-top: 0; }
.crt-body .callout--definition p { font-weight: var(--fw-semibold); }

/* 「전작 복습」 상자(시리즈물, GEO_CONTRACT v1.6): 이미 개봉한 전작의 줄거리·결말. 콜아웃 4종과 다른 요소라 경고 톤을 쓴다.
   기본 접힘(<details>) — 펼쳐야 보인다. 본문은 원문 HTML 에 들어 있다(GEO). 색은 tokens 의 gold 계열이라 다크·라이트를 따라간다 */
.crt-recap { border: 1px dashed var(--c-gold-line); border-radius: var(--r-md); background: var(--c-gold-soft); }
.crt-recap__summary { list-style: none; cursor: pointer; display: flex; gap: var(--sp-3); align-items: flex-start; min-height: var(--touch); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); line-height: var(--lh-sm); border-radius: var(--r-md); }
.crt-recap__summary::-webkit-details-marker { display: none; }
.crt-recap__summary::after { content: ""; flex: none; margin-left: auto; margin-top: 6px; width: 8px; height: 8px; border-right: 2px solid var(--c-gold-text); border-bottom: 2px solid var(--c-gold-text); transform: rotate(45deg); transition: transform var(--dur-2) var(--ease-out); }
.crt-recap[open] > .crt-recap__summary::after { transform: rotate(-135deg); margin-top: 10px; }
.crt-recap__summary:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.crt-recap__icon { flex: none; font-weight: var(--fw-black); color: var(--c-gold-text); line-height: inherit; }
.crt-recap__text { min-width: 0; flex: 1 1 auto; }
.crt-recap__label { font-weight: var(--fw-bold); color: var(--c-gold-text); }
.crt-recap__hint { color: var(--c-text-muted); white-space: nowrap; }
.crt-recap__body { padding: 0 var(--sp-4) var(--sp-4); border-top: 1px dashed var(--c-gold-line); padding-top: var(--sp-3); font-size: 16px; line-height: 1.7; }
.crt-recap__body > * + * { margin-top: 0.7em; }
.crt-recap__body h3 { font-size: var(--fs-body); margin-top: 1em; }
.crt-body > .callout:first-child + .crt-recap { margin-top: 1.1em; }
.crt-toc__link--recap .crt-toc__text::after { content: " · 결말 포함"; color: var(--c-gold-text); font-size: var(--fs-caption); }
@media (max-width: 420px) { .crt-recap__hint { white-space: normal; } .crt-recap__summary { padding-inline: var(--sp-3); } .crt-recap__body { padding-inline: var(--sp-3); } }
@media print { .crt-recap:not([open]) > .crt-recap__body { display: none; } }

/* 표 */
.crt-table { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface); }
.crt-table:focus-visible { outline: 2px solid var(--c-focus); }
.crt-table table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); line-height: var(--lh-sm); }
.crt-table th, .crt-table td { padding: 10px var(--sp-3); text-align: left; vertical-align: top; border-bottom: 1px solid var(--c-line); }
.crt-table thead th { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--c-text-muted); font-weight: var(--fw-semibold); white-space: nowrap; background: color-mix(in srgb, var(--c-surface-2) 55%, transparent); }
.crt-table tbody tr:last-child > * { border-bottom: 0; }
.crt-table td:first-child { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); }
.crt-table .is-right { text-align: right; } .crt-table .is-center { text-align: center; }

/* 공식 플레이어(파사드 → JS 로 iframe). 플레이어 위에는 재생 버튼 말고 아무것도 올리지 않는다 */
.crt-player { margin-inline: 0; }
.crt-player__facade { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden; background: #000; }
.crt-player__facade img { width: 100%; height: 100%; object-fit: cover; display: block; }
.crt-player__play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; display: grid; place-items: center; background: var(--c-primary); color: var(--c-on-primary); box-shadow: var(--shadow-2); transition: transform var(--dur-2) var(--ease-out); }
.crt-player__facade:hover .crt-player__play { transform: scale(1.06); }
.crt-player__play .icon { margin-left: 4px; }
.crt-player__out { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; gap: 6px; align-items: center; min-height: var(--touch); padding: 0 var(--sp-4); border-radius: var(--r-pill); background: var(--c-overlay); color: #fff; font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.crt-player iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r-md); display: block; background: #000; }
.crt-player figcaption { margin-top: var(--sp-2); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--c-text-muted); }

/* 섹션 대표 이미지(소제목 바로 위, GEO_CONTRACT v1.3). 공식 예고편 YouTube 썸네일·자동 프레임 핫링크.
   구분선은 이미지 위로 옮겨 "이미지 + 제목"이 한 섹션의 머리가 되게 한다. 레터박스 프레임은 --crt-ar·--crt-pos 로 검은 띠를 잘라 낸다 */
.crt-figure { margin: 0; }
.crt-figure--section { margin-top: 2.2em; padding-top: var(--sp-5); border-top: 1px solid var(--c-line); scroll-margin-top: var(--topbar-h); }
.crt-body .crt-figure--section + h2 { margin-top: var(--sp-4); padding-top: 0; border-top: 0; }
.crt-body > .callout:first-child + .crt-figure--section { margin-top: 1.6em; }
.crt-figure__media { display: block; aspect-ratio: var(--crt-ar, 16 / 9); border-radius: var(--r-md); overflow: hidden; background: var(--c-surface-2); }
.crt-figure__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--crt-pos, 50%); display: block; transition: opacity var(--dur-2) var(--ease-out); }
a.crt-figure__media:hover img { opacity: 0.9; }
a.crt-figure__media:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.crt-figure figcaption { margin-top: var(--sp-2); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--c-text-muted); }
.crt-body .crt-figure figcaption a { color: inherit; text-decoration: underline; text-decoration-color: var(--c-line-strong); text-underline-offset: 3px; }

/* ── FAQ(아코디언 — 답은 원문 HTML 에 있음) ── */
.crt-faq__list { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); }
.crt-faq__item { border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface); }
.crt-faq__item > summary { list-style: none; cursor: pointer; display: flex; gap: var(--sp-3); align-items: flex-start; min-height: var(--touch); padding: var(--sp-3) var(--sp-4); font-size: 16px; line-height: 24px; font-weight: var(--fw-bold); }
.crt-faq__item > summary::-webkit-details-marker { display: none; }
.crt-faq__item > summary::after { content: ""; flex: none; margin-left: auto; margin-top: 7px; width: 8px; height: 8px; border-right: 2px solid var(--c-text-muted); border-bottom: 2px solid var(--c-text-muted); transform: rotate(45deg); transition: transform var(--dur-2) var(--ease-out); }
.crt-faq__item[open] > summary::after { transform: rotate(-135deg); margin-top: 11px; }
.crt-faq__q { flex: none; font-weight: var(--fw-black); color: var(--c-gold-text); }
.crt-faq__a { padding: 0 var(--sp-4) var(--sp-4) calc(var(--sp-4) + 1.6em); font-size: 16px; line-height: 1.7; color: var(--c-text); }

/* ── 정리하면·근거·변경 이력 ── */
.crt-sum { margin-top: 0; }
.crt-refs { font-size: var(--fs-sm); line-height: 22px; }
.crt-refs h3 { font-size: var(--fs-sm); font-weight: var(--fw-bold); margin-top: var(--sp-4); color: var(--c-text-muted); }
.crt-refs ul { padding-left: 1.2em; display: grid; gap: var(--sp-2); margin-top: var(--sp-2); }
.crt-refs a { text-decoration: underline; text-underline-offset: 3px; }
.crt-small { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--c-text-muted); }
.crt-refs > .crt-small { margin-top: var(--sp-4); }
.crt-log ol { list-style: none; padding: 0; margin: var(--sp-3) 0 0; display: grid; gap: var(--sp-2); font-size: var(--fs-sm); }
.crt-log li { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.crt-log time { font-variant-numeric: tabular-nums; color: var(--c-text-muted); }

/* ── 카드(목록·관련 글) ── */
.crt-cards { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: grid; gap: var(--sp-3); }
.crt-card[hidden] { display: none; }
.crt-card__link { display: grid; grid-template-columns: 128px 1fr; gap: var(--sp-3); align-items: start; padding: var(--sp-3); border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); text-decoration: none; transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out); }
.crt-card__link:hover { border-color: var(--c-line-strong); background: var(--c-surface-2); }
.crt-card__thumb { display: block; aspect-ratio: 16 / 9; border-radius: var(--r-sm); overflow: hidden; background: var(--c-surface-2); }
.crt-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.crt-card__body { display: grid; gap: 4px; min-width: 0; }
.crt-card__kicker { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--c-text-muted); }
.crt-card__title { font-size: 16px; line-height: 23px; font-weight: var(--fw-bold); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-break: keep-all; }
.crt-card__excerpt { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--c-text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.crt-card__meta { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--c-text-faint); font-variant-numeric: tabular-nums; }
.crt-cards--compact .crt-card__link { grid-template-columns: 96px 1fr; }
.crt-related { margin-top: var(--sp-6); }

/* ── CTA ── */
.crt-cta { margin-top: var(--sp-8); padding: var(--sp-5); border-radius: var(--r-lg); background: var(--c-surface); border: 1px solid var(--c-gold-line); box-shadow: var(--glow-gold); }
.crt-cta__title { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-black); }
.crt-cta__body { margin-top: var(--sp-2); color: var(--c-text-muted); font-size: var(--fs-sm); line-height: 22px; }
.crt-cta__actions { margin-top: var(--sp-4); display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.crt-cta__actions .btn { gap: 4px; }

/* ── 목록 페이지 ── */
.crt-filter { display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.crt-filter[hidden] { display: none; }
.crt-filter::-webkit-scrollbar { display: none; }
.crt-filter__btn { flex: none; min-height: var(--touch); padding: 0 var(--sp-4); border-radius: var(--r-pill); border: 1px solid var(--c-line-strong); background: transparent; color: var(--c-text-muted); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.crt-filter__btn .t-num { margin-left: 2px; opacity: 0.8; }
.crt-filter__btn[aria-pressed="true"] { background: var(--c-text); color: var(--c-bg); border-color: var(--c-text); }
.crt-empty { margin-top: var(--sp-4); }
.crt-empty[hidden] { display: none; }
.crt-empty a { text-decoration: underline; text-underline-offset: 3px; color: var(--c-primary-text); }
.crt-index__rss { margin-top: var(--sp-6); }
.crt-index__rss a { text-decoration: underline; text-underline-offset: 3px; }

/* 관리자 미리보기 띠 */
.crt-preview-bar { position: sticky; top: 0; z-index: var(--z-topbar); margin: 0 calc(var(--gutter) * -1) var(--sp-3); padding: var(--sp-2) var(--gutter); background: var(--c-gold-soft); border-bottom: 1px solid var(--c-gold-line); font-size: var(--fs-caption); line-height: var(--lh-caption); backdrop-filter: var(--blur); }
.crt-preview-bar code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.crt-preview-bar--revision { background: var(--c-violet-soft); border-bottom-color: var(--c-violet); }
.crt-preview-bar a { text-decoration: underline; text-underline-offset: 3px; }

/* JS 없는 정적 상단 내비: 모바일에서도 가로 스크롤로 노출(하단 탭은 JS 셸이 만든다) */
.crt-static-nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; margin-left: var(--sp-2); }
.crt-static-nav .topnav__link { display: inline-flex; align-items: center; min-height: var(--touch); padding: 0 var(--sp-2); font-size: 16px; color: var(--c-text-muted); white-space: nowrap; }
.crt-static-nav .topnav__link[aria-current="page"] { color: var(--c-text); box-shadow: inset 0 -2px 0 var(--c-primary); }

@media (min-width: 640px) {
  .crt-movie { grid-template-columns: 200px 1fr; padding: var(--sp-4); }
  .crt-movie__cta { grid-column: auto; }
  .crt-card__link { grid-template-columns: 200px 1fr; padding: var(--sp-4); }
  .crt-card__title { font-size: var(--fs-h3); line-height: var(--lh-h3); }
}
@media (min-width: 900px) {
  .crt-title { font-size: 34px; line-height: 44px; }
  .crt-hero--index .crt-title { font-size: var(--fs-display); line-height: var(--lh-display); }
  .crt-layout { display: grid; grid-template-columns: 220px minmax(0, var(--crt-w)); gap: var(--sp-12); align-items: start; }
  .crt-toc { position: sticky; top: calc(var(--topbar-h) + var(--sp-6)); margin: 0; border: 0; background: transparent; max-height: calc(100vh - var(--topbar-h) - var(--sp-12)); overflow: auto; }
  .crt-toc > summary { pointer-events: none; padding: 0 var(--sp-2); color: var(--c-text-muted); font-size: var(--fs-caption); letter-spacing: 0.06em; }
  .crt-toc > summary::after { display: none; }
  .crt-toc__list { padding: 0; }
  .crt-toc__thumb { width: 40px; }
  .crt-cards--compact { grid-template-columns: 1fr; }
  .crt--index .crt-cards { grid-template-columns: 1fr 1fr; }
  .crt--index .crt-card__link { grid-template-columns: 1fr; }
  .crt-static-nav { margin-left: var(--sp-6); }
}
@media (prefers-reduced-motion: reduce) {
  .crt-player__play, .crt-toc > summary::after, .crt-faq__item > summary::after, .crt-recap__summary::after { transition: none; }
}

/* ── 품질 감사(2026-10-04, docs/10_ops/quality_audit.md) ──
   ① `.crt a { color: inherit }` 가 코랄 버튼 글자색을 덮어 대비 2.77:1(다크)·3.95:1(라이트) → 버튼 글자색 복구(6.1:1·4.6:1)
   ② 목록 필터 개수 숫자: opacity 0.8 이 라이트에서 3.57:1 → 불투명(5.6:1)
   ③ 브레드크럼 링크 누르는 영역 44px(시각 32px 유지) */
.crt a.btn--primary { color: var(--c-on-primary); }
.crt-filter__btn .t-num { opacity: 1; }
.crt-breadcrumb a:not([aria-current="page"]) { position: relative; }
.crt-breadcrumb a:not([aria-current="page"])::after { content: ""; position: absolute; inset: -6px -6px; }
/* ④ 목록 필터(가로 스크롤)에서 포커스 링 위아래가 잘리던 문제 — 안쪽 여백을 늘리고 바깥 여백으로 상쇄(배치 불변) */
.crt-filter { padding-block: 4px; margin-block: -4px -2px; }
/* ⑤ 레이아웃 이동(CLS) 방지 — 원고 HTML 은 목차가 펼쳐진(open) 채로 오고, 모바일에서는 JS 가 접는다.
      모듈 스크립트보다 첫 페인트가 먼저 오면 펼친 목차가 보였다가 접히며 본문 전체가 밀렸다(768px CLS 0.37).
      JS 가 켜진 브라우저(scripting: enabled)에서는 JS 준비(data-toc-ready) 전까지 목록을 접힌 모양으로 둔다.
      JS 가 꺼져 있으면 이 규칙이 적용되지 않아 원래대로 펼쳐 보인다. 목록 유형 필터도 같은 이유로 자리를 미리 잡는다. */
@media (max-width: 899px) and (scripting: enabled) {
  .crt-toc[open]:not([data-toc-ready]) > :not(summary) { display: none; }
  .crt-toc[open]:not([data-toc-ready]) > summary::after { transform: rotate(45deg) translateY(-2px); }
}
@media (scripting: enabled) {
  .crt-filter[hidden] { display: flex !important; visibility: hidden; } /* base.css 의 [hidden]{display:none !important} 를 이 경우만 이긴다 */
}
@media (scripting: enabled) {
  /* 공유 버튼(JS 가 hidden 해제) 자리를 미리 잡는다 — 768px 에서 본문이 36px 밀리던 이동(CLS 0.026) */
  .crt-tools [data-crt-share][hidden] { display: inline-flex !important; visibility: hidden; }
}
/* 랭킹 배지(22px)가 나중에 들어와 영화 카드 줄이 4px 밀리던 이동 — 줄 높이를 배지 높이로 */
.crt-movie__kicker { min-height: 22px; }