/*
 * 카드(card)·이미지와 글(media-text) 섹션의 새 배치 — docs/archive/history/content-sections.md, docs/archive/history/card-section.md.
 *
 * 색은 템플릿이 섹션에 넣는 변수다. 값은 섹션 색 구성에서 온다(App\Helpers\CtaSection::buttonPalette):
 *   --cs-title  제목 색 · --cs-desc 설명 색 · --cs-bg 바탕 색
 *   --cs-media-ratio · --cs-media-fit · --cs-media-radius  사진 비율·맞춤·모서리
 * 버튼은 행동 유도와 같은 역할 버튼이라 /css/cta-section.css 와 --cta-* 변수를 쓴다.
 * 예전 모양(layout: classic)은 이 파일을 쓰지 않는다 — 옛 템플릿이 예전 마크업 그대로 그린다.
 */

.cs-section {
    --cs-line: color-mix(in srgb, var(--cs-title) 14%, transparent);
    --cs-card-bg: color-mix(in srgb, var(--cs-title) 5%, var(--cs-bg));
    padding-block: 4rem;
    color: var(--cs-desc);
}

@media (min-width: 768px) {
    .cs-section {
        padding-block: 6rem;
    }
}

.cs-container {
    max-width: 80rem;
    margin-inline: auto;
    padding-inline: 1rem;
    display: grid;
    gap: 3rem;
}

.cs-container--full {
    max-width: none;
    padding-inline: 2rem;
}

/* ── 머리글 ─────────────────────────────────────────────────────────── */

.cs-head {
    display: grid;
    gap: 0.75rem;
    max-width: 48rem;
}

.cs-head--center {
    text-align: center;
    justify-items: center;
    margin-inline: auto;
}

.cs-head--right {
    text-align: right;
    justify-items: end;
    margin-left: auto;
}

.cs-head--in-column {
    margin-bottom: 0.5rem;
}

.cs-eyebrow {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: color-mix(in srgb, var(--cs-title) 72%, var(--cs-bg));
}

.cs-title {
    margin: 0;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--cs-title);
    text-wrap: balance;
}

.cs-desc {
    margin: 0;
    line-height: 1.7;
    color: var(--cs-desc);
    text-wrap: pretty;
}

.cs-text--left { text-align: left; }
.cs-text--center { text-align: center; }
.cs-text--right { text-align: right; }

/* ── 이미지와 글 ─────────────────────────────────────────────────────── */

.mt-list {
    display: grid;
    gap: 4rem;
}

.mt-row {
    display: grid;
    gap: 1.5rem;
}

.mt-media {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--cs-media-ratio, 4 / 3);
    border-radius: var(--cs-media-radius, 0.75rem);
    background: var(--cs-card-bg);
    max-width: 100%;
}

.mt-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: var(--cs-media-fit, cover);
}

.mt-media--video {
    aspect-ratio: 16 / 9;
    background: #000;
}

.mt-media--video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.mt-text {
    display: grid;
    gap: 1rem;
    align-content: start;
    min-width: 0;
}

.mt-item-title {
    margin: 0;
    font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.015em;
    color: var(--cs-title);
    text-wrap: balance;
}

/* 본문은 편집기와 같은 규칙(css/quill-content.css). 색·글꼴만 섹션 것으로. 문단 사이는 조금 띄운다 —
   사이트 생성기가 빈 문단 없이 쓴 본문이 붙어 보이지 않게. */
.mt-body {
    max-width: 38em;
}

.mt-body .ql-editor {
    font-family: inherit;
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--cs-desc);
}

.mt-body .ql-editor > * + * {
    margin-top: 0.5em;
}

.mt-body .ql-editor strong,
.mt-body .ql-editor b,
.mt-body .ql-editor h1,
.mt-body .ql-editor h2,
.mt-body .ql-editor h3 {
    color: var(--cs-title);
}

.mt-body .ql-editor a {
    color: var(--cs-title);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cs-text--center .mt-body {
    margin-inline: auto;
}

.mt-btns {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.mt-btns.justify-center { justify-content: center; }
.mt-btns.justify-end { justify-content: flex-end; }

.mt-byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    margin: 0.5rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--cs-line);
    font-size: 0.9375rem;
    color: var(--cs-desc);
}

.mt-byline-name {
    font-size: 1.125rem;
    color: var(--cs-title);
}

.mt-byline-sign {
    height: 2.5rem;
    width: auto;
}

/* 좌우: 넓은 화면에서 두 열. 사진 폭은 media_width, 오른쪽 사진은 CSS 로만 뒤집는다. */
@media (min-width: 768px) {
    .mt-section--split .mt-row {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
        align-items: center;
    }

    .mt-section--split .mt-row--narrow { grid-template-columns: 5fr 7fr; }
    .mt-section--split .mt-row--wide { grid-template-columns: 7fr 5fr; }
    .mt-section--split .mt-row--flip.mt-row--half { grid-template-columns: 1fr 1fr; }
    .mt-section--split .mt-row--flip.mt-row--narrow { grid-template-columns: 7fr 5fr; }
    .mt-section--split .mt-row--flip.mt-row--wide { grid-template-columns: 5fr 7fr; }

    .mt-section--split .mt-row--flip .mt-media { order: 2; }
    .mt-section--split .mt-row--align-top { align-items: start; }

    .mt-section--split .mt-row--no-media {
        grid-template-columns: 1fr;
    }

    .mt-section--split .mt-list {
        gap: 6rem;
    }
}

@media (min-width: 1024px) {
    .mt-section--split .mt-row {
        gap: 4rem;
    }
}

/* 탭: 탭 줄은 스크립트가 켠다(js/content-sections.js). 켜기 전에는 모든 줄이 좌우처럼 펼쳐진다. */
.mt-tabs {
    display: grid;
    gap: 2.5rem;
}

.mt-tablist {
    display: flex;
    gap: 0.25rem;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--cs-line);
}

.mt-tablist[hidden] {
    display: none;
}

.mt-tab {
    flex: none;
    margin-bottom: -1px;
    padding: 0.75rem 1.125rem 0.875rem;
    border: 0;
    border-bottom: 3px solid transparent;
    background: none;
    color: var(--cs-desc);
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.mt-tab:hover {
    color: var(--cs-title);
}

.mt-tab[aria-selected="true"] {
    color: var(--cs-title);
    border-bottom-color: var(--cta-primary-bg, var(--cs-title));
}

.mt-tab:focus-visible,
.mt-tabs [role="tabpanel"]:focus-visible {
    outline: 3px solid var(--cs-title);
    outline-offset: 2px;
}

.mt-tabs.is-ready .mt-list {
    gap: 0;
}

/* .mt-row 의 display 가 hidden 속성보다 앞서지 않게 */
.mt-row[hidden] {
    display: none;
}

/* 위아래: 사진은 넓게, 글은 가운데 좁은 열로. */
.mt-section--stacked .mt-row {
    justify-items: stretch;
}

.mt-section--stacked .mt-media {
    width: 100%;
    /* 세로 사진(3:4 등)이 화면보다 길어지지 않게 — 높이가 화면의 75% 를 넘지 않는 폭으로 줄인다. */
    max-width: min(64rem, calc(75vh * var(--cs-media-ratio, 16 / 9)));
    justify-self: center;
}

.mt-section--stacked .mt-media--video {
    max-width: min(64rem, calc(75vh * 16 / 9));
}

.mt-section--stacked .mt-text {
    width: 100%;
    max-width: 44rem;
    justify-self: center;
}

.mt-section--stacked .cs-text--center {
    justify-items: center;
}

.mt-section--stacked .mt-row--text-first .mt-media {
    order: 2;
}

@media (prefers-reduced-motion: reduce) {
    .cs-section [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ── 카드 ─────────────────────────────────────────────────────────────── */
/* 그림(media)은 사진·아이콘·없음, 배치는 격자·글자 얹기·목록·가로로 넘기기·크게 하나(App\Helpers\CardSection).
   아이콘·강조·배지 색은 --cd-accent(주 버튼 색) · --cd-on-accent. 크기·간격 원칙: 한 목록 안의 카드는 줄마다 같은 높이,
   간격은 어디서나 같다. */

.cd-head-row {
    display: grid;
    gap: 1rem 2rem;
}

.cd-head-row--arrows {
    grid-template-columns: 1fr auto;
    align-items: end;
}

/* 머리글을 카드 왼쪽에(넓은 화면). 머리글은 스크롤을 따라 붙는다 — 위 메뉴 막대 아래에서 멈춘다. */
.cd-split,
.cd-split-body {
    display: grid;
    gap: 2.5rem;
    min-width: 0;
}

@media (min-width: 1024px) {
    .cd-split {
        grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
        gap: 4rem;
        align-items: start;
    }

    .cd-split > .cd-head-row {
        position: sticky;
        top: 7rem;
    }
}

.cd-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(var(--cd-cols-mobile, 1), minmax(0, 1fr));
    gap: 1.5rem 1rem;
}

@media (min-width: 640px) {
    .cd-list {
        grid-template-columns: repeat(var(--cd-cols-sm, 2), minmax(0, 1fr));
        gap: 2rem 1.5rem;
    }
}

@media (min-width: 1024px) {
    .cd-list {
        grid-template-columns: repeat(var(--cd-cols, 3), minmax(0, 1fr));
    }
}

/* 격자·목록: 모든 줄을 가장 큰 카드 높이로 — 설명 길이가 달라도 카드 크기가 같다. */
.cd-list--grid,
.cd-list--list {
    grid-auto-rows: 1fr;
}

/* 머리글이 가운데인 격자는 끝줄도 가운데로. 칸을 둘로 쪼개 한 카드가 두 칸을 차지하게 하고, 끝줄 첫 카드만 반 칸씩 민다.
   카드 크기는 그대로다. 옆으로 넘기는 휴대폰에서는 쓰지 않는다. */
@media (max-width: 639px) {
    .cd-list--center-last.cd-list--m2:not(.cd-list--mobile-scroll) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .cd-list--center-last.cd-list--m2:not(.cd-list--mobile-scroll) > .cd-card {
        grid-column: span 2;
    }

    .cd-list--center-last.cd-list--m2:not(.cd-list--mobile-scroll) > .cd-card:last-child:nth-child(odd) {
        grid-column: 2 / span 2;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    .cd-list--center-last {
        grid-template-columns: repeat(calc(var(--cd-cols-sm, 2) * 2), minmax(0, 1fr));
    }

    .cd-list--center-last > .cd-card {
        grid-column: span 2;
    }

    .cd-list--center-last > .cd-card:last-child:nth-child(odd) {
        grid-column: 2 / span 2;
    }
}

@media (min-width: 1024px) {
    .cd-list--center-last {
        grid-template-columns: repeat(calc(var(--cd-cols, 3) * 2), minmax(0, 1fr));
    }

    .cd-list--center-last > .cd-card {
        grid-column: span 2;
    }

    .cd-list--center-last > .cd-card--last-start {
        grid-column: var(--cd-last-start, 1) / span 2;
    }
}

.cd-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-radius: var(--cs-media-radius, 0.75rem);
}

.cd-media {
    order: -1;
    overflow: hidden;
    aspect-ratio: var(--cs-media-ratio, 4 / 3);
    border-radius: var(--cs-media-radius, 0.75rem);
    background: var(--cs-card-bg);
}

.cd-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms ease;
}

.cd-card--link:hover .cd-media img,
.cd-card--link:focus-within .cd-media img {
    transform: scale(1.03);
}

.cd-body {
    display: grid;
    gap: 0.375rem;
    align-content: start;
    padding-top: 1rem;
}

.cd-align--center .cd-body {
    text-align: center;
    justify-items: center;
}

/* 아이콘 — 모양은 옅은 바탕 · 테마 색 원 · 아이콘만 */
.cd-glyph {
    order: -1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    align-self: flex-start;
    color: var(--cd-accent);
}

.cd-align--center .cd-glyph {
    align-self: center;
}

.cd-glyph-svg {
    width: 1.5rem;
    height: 1.5rem;
}

.cd-glyph--soft {
    width: 3rem;
    height: 3rem;
    border-radius: 0.875rem;
    background: color-mix(in srgb, var(--cd-accent) 12%, var(--cs-bg));
}

.cd-glyph--circle {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 9999px;
    background: var(--cd-accent);
    color: var(--cd-on-accent);
}

.cd-glyph--circle .cd-glyph-svg {
    width: 1.75rem;
    height: 1.75rem;
}

.cd-glyph--plain .cd-glyph-svg {
    width: 2rem;
    height: 2rem;
}

.cd-card--icon .cd-body {
    padding-top: 1.25rem;
}

.cd-card--bare .cd-body {
    padding-top: 0;
}

.cd-eyebrow {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: color-mix(in srgb, var(--cs-title) 72%, var(--cs-bg));
}

.cd-title {
    margin: 0;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: var(--cs-title);
    text-wrap: balance;
}

.cd-title a {
    color: inherit;
    text-decoration: none;
}

.cd-desc {
    margin: 0;
    line-height: 1.65;
    color: var(--cs-desc);
}

.cd-more {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--cs-title);
    text-decoration: none;
}

.cd-more i {
    font-size: 0.8em;
    transition: transform 200ms ease;
}

.cd-card--link:hover .cd-more i {
    transform: translateX(3px);
}

.cd-card--link:hover .cd-title a,
.cd-card--link:focus-within .cd-title a {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* 배지("추천") — 사진 카드는 사진 왼쪽 위에, 아이콘·글 카드는 오른쪽 위에 얹는다(제목 자리를 밀지 않게). 목록은 글 위에 */
.cd-badge {
    justify-self: start;
    margin: 0;
    padding: 0.125rem 0.625rem;
    border-radius: 9999px;
    background: var(--cd-accent);
    color: var(--cd-on-accent);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
}

.cd-card--media:not(.cd-card--overlay) .cd-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 2;
}

.cd-card--icon .cd-badge,
.cd-card--bare .cd-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
}

.cd-list--list .cd-badge {
    position: static;
}

/* 카드 전체를 누를 수 있게 — 제목 링크(또는 링크 글자)를 카드 크기로 늘린다(Inclusive Components "Cards"). */
.cd-stretch::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

.cd-stretch:focus-visible {
    outline: none;
}

.cd-stretch:focus-visible::after {
    outline: 3px solid var(--cs-title);
    outline-offset: 3px;
}

/* 카드 모양 — 선 없음 · 테두리 · 바탕 · 구분선. 틀이 있는 카드(cd-card--boxed)만 안쪽 여백을 둔다.
   사진 없는 사진 카드는 늘 옅은 바탕(글 카드). */
.cd-style--outlined .cd-card {
    border: 1px solid var(--cs-line);
}

.cd-style--filled .cd-card,
.cd-card--text {
    background: var(--cs-card-bg);
}

.cd-card--boxed {
    padding: 0.75rem 0.75rem 1.25rem;
}

.cd-card--boxed .cd-body {
    padding-inline: 0.5rem;
}

.cd-card--text,
.cd-card--boxed.cd-card--icon,
.cd-card--boxed.cd-card--bare {
    padding: 1.75rem 1.5rem;
}

.cd-card--text {
    min-height: 9rem;
}

.cd-card--text .cd-body,
.cd-card--boxed.cd-card--icon .cd-body,
.cd-card--boxed.cd-card--bare .cd-body {
    padding-inline: 0;
}

.cd-card--text .cd-body {
    padding-top: 0;
}

/* 구분선: 카드 사이에 가는 선만 — 바탕·테두리 없이 */
.cd-style--divided .cd-card {
    border-top: 1px solid var(--cs-line);
    border-radius: 0;
    padding-top: 1.5rem;
}

.cd-style--divided .cd-card--boxed {
    padding-inline: 1.25rem;
}

/* 강조 한 장 — 테마 색 테두리와 옅은 바탕 */
.cd-card--highlight {
    background: color-mix(in srgb, var(--cd-accent) 6%, var(--cs-bg));
    box-shadow: inset 0 0 0 2px var(--cd-accent);
}

.cd-style--divided .cd-card--highlight {
    border-top-color: transparent;
    border-radius: var(--cs-media-radius, 0.75rem);
}

/* 누를 수 있는 틀 있는 카드만 마우스에 반응한다. */
.cd-card--boxed.cd-card--link {
    transition: box-shadow 200ms ease, border-color 200ms ease;
}

.cd-card--boxed.cd-card--link:hover {
    box-shadow: 0 10px 28px -14px rgba(0, 0, 0, 0.28);
}

.cd-card--boxed.cd-card--link.cd-card--highlight:hover {
    box-shadow: inset 0 0 0 2px var(--cd-accent), 0 10px 28px -14px rgba(0, 0, 0, 0.28);
}

.cd-style--outlined .cd-card--link:hover {
    border-color: color-mix(in srgb, var(--cs-title) 40%, transparent);
}

/* 글자 얹기: 사진 아래쪽만 짙어지는 그늘. 가장 밝은 사진이어도 그늘 위 흰 글자가 4.5:1 을 넘게 끝 불투명도를 잡았다. */
.cd-card--overlay {
    overflow: hidden;
    padding: 0 !important;
    border: 0 !important;
    background: #000 !important;
}

.cd-card--overlay .cd-media {
    aspect-ratio: var(--cs-media-ratio, 3 / 4);
    border-radius: 0;
}

.cd-card--overlay .cd-body {
    position: absolute;
    inset: auto 0 0 0;
    padding: 4rem 1.25rem 1.25rem;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.62) 42%, rgba(0, 0, 0, 0.8));
}

.cd-card--overlay .cd-eyebrow { color: rgba(255, 255, 255, 0.86); }
.cd-card--overlay .cd-title,
.cd-card--overlay .cd-more { color: #fff; }
.cd-card--overlay .cd-desc { color: rgba(255, 255, 255, 0.9); }
.cd-card--overlay .cd-stretch:focus-visible::after { outline-color: #fff; outline-offset: -4px; }
.cd-card--overlay.cd-card--highlight { box-shadow: 0 0 0 3px var(--cd-accent); }

/* 목록: 그림 옆에 글 */
.cd-list--list {
    gap: 1.5rem 2rem;
}

@media (min-width: 640px) {
    .cd-list--list {
        grid-template-columns: repeat(var(--cd-cols, 2), minmax(0, 1fr));
    }
}

.cd-list--list.cd-style--divided {
    row-gap: 0;
}

.cd-list--list .cd-card {
    display: grid;
    grid-template-columns: minmax(6rem, 32%) 1fr;
    gap: 1.25rem;
    align-items: start;
}

.cd-list--list .cd-card--icon {
    grid-template-columns: auto 1fr;
    gap: 1rem;
}

.cd-list--list .cd-card--text,
.cd-list--list .cd-card--bare {
    grid-template-columns: 1fr;
}

.cd-list--list .cd-media,
.cd-list--list .cd-glyph {
    grid-column: 1;
    grid-row: 1;
}

.cd-list--list .cd-body {
    grid-column: 2;
    grid-row: 1;
    padding-top: 0.125rem;
}

.cd-list--list .cd-card--text .cd-body,
.cd-list--list .cd-card--bare .cd-body {
    grid-column: 1;
}

.cd-list--list.cd-style--divided .cd-card {
    padding-block: 1.25rem;
}

/* 목록의 링크 줄: 오른쪽 끝에 › (링크 글자를 비운 카드) */
.cd-go {
    display: none;
}

.cd-list--list .cd-go {
    display: flex;
    align-items: center;
    position: absolute;
    right: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    color: color-mix(in srgb, var(--cs-title) 45%, transparent);
    font-size: 0.875rem;
    transition: transform 200ms ease, color 200ms ease;
}

.cd-list--list .cd-card--boxed .cd-go {
    right: 1.25rem;
}

.cd-list--list .cd-card--link:hover .cd-go {
    color: var(--cs-title);
    transform: translate(3px, -50%);
}

.cd-list--list .cd-card--link .cd-body {
    padding-right: 1.75rem;
}

/* 크게 하나 — 첫 카드가 큰 칸. 칸 나누기(--cd-f-*)는 카드 수로 정한다(CardSection::featuredShape).
   사진 카드는 사진이 칸을 채우고 글을 얹는다. 휴대폰은 한 줄에 하나, 첫 카드가 조금 높다. */
.cd-list--featured {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(13rem, auto);
}

@media (min-width: 640px) {
    .cd-list--featured {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cd-list--featured > .cd-card--lead {
        grid-column: 1 / -1;
    }
}

@media (min-width: 1024px) {
    .cd-list--featured {
        grid-template-columns: repeat(var(--cd-f-cols, 3), minmax(0, 1fr));
        grid-auto-rows: minmax(14rem, 1fr);
    }

    .cd-list--featured > .cd-card--lead {
        grid-column: span var(--cd-f-span-c, 2);
        grid-row: span var(--cd-f-span-r, 2);
    }
}

.cd-list--featured .cd-card--overlay .cd-media {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
}

.cd-list--featured .cd-card--overlay {
    min-height: 13rem;
}

.cd-list--featured .cd-card--lead.cd-card--overlay {
    min-height: 18rem;
}

.cd-list--featured .cd-card--overlay .cd-body {
    padding-top: 5rem;
}

/* 크게 하나의 작은 칸은 설명을 두 줄에서 접는다 — 칸 높이를 넘지 않게. */
.cd-list--featured .cd-card:not(.cd-card--lead) .cd-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 사진 없는 큰 카드는 그림을 위에, 글을 아래에 둔다(빈 칸이 가운데로 모이게). */
.cd-list--featured .cd-card--lead:not(.cd-card--overlay) .cd-body {
    margin-top: auto;
}

.cd-list--featured .cd-card--lead .cd-glyph--soft,
.cd-list--featured .cd-card--lead .cd-glyph--circle {
    width: 4rem;
    height: 4rem;
}

/* 가로로 넘기기 — 한 줄로 두고 다음 카드를 조금 보여 준다. */
.cd-list--scroll {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    padding-bottom: 0.75rem;
}

.cd-list--scroll > .cd-card {
    scroll-snap-align: start;
}

@media (min-width: 640px) {
    .cd-list--scroll {
        grid-template-columns: none;
        grid-auto-columns: calc((100% - 1.5rem) / 2.3);
    }
}

@media (min-width: 1024px) {
    .cd-list--scroll {
        grid-template-columns: none;
        grid-auto-columns: calc((100% - (var(--cd-cols, 3) - 1) * 1.5rem) / (var(--cd-cols, 3) + 0.3));
    }
}

@media (max-width: 639px) {
    .cd-list--mobile-scroll {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 78%;
        grid-auto-rows: auto;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 0.75rem;
    }

    .cd-list--mobile-scroll > .cd-card {
        scroll-snap-align: start;
    }

    .cd-arrows {
        display: none !important;
    }

    .cd-head-row--arrows {
        grid-template-columns: 1fr;
    }
}

.cd-list:focus-visible {
    outline: 2px solid var(--cs-title);
    outline-offset: 4px;
}

.cd-arrows {
    display: flex;
    gap: 0.5rem;
}

.cd-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    border: 1.5px solid color-mix(in srgb, var(--cs-title) 35%, transparent);
    background: transparent;
    color: var(--cs-title);
    cursor: pointer;
}

.cd-arrow:hover {
    border-color: var(--cs-title);
}

.cd-arrow:disabled {
    opacity: 0.35;
    cursor: default;
}

.cd-arrow:focus-visible {
    outline: 3px solid var(--cs-title);
    outline-offset: 2px;
}

/* 카드 아래 버튼("전체 보기") — 머리글 정렬을 따른다. */
.cd-btns {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.cd-btns--center { justify-content: center; }
.cd-btns--right { justify-content: flex-end; }

@media (prefers-reduced-motion: reduce) {
    .cd-media img,
    .cd-more i,
    .cd-go,
    .cd-card--boxed.cd-card--link {
        transition: none;
    }

    .cd-card--link:hover .cd-media img,
    .cd-card--link:focus-within .cd-media img {
        transform: none;
    }
}