/*
 * 카드(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-* 변수를 쓴다.
 * 화면 높이에 맞추는 값은 vh 대신 var(--cs-vh, 1vh) 를 쓴다. 편집 화면 미리보기(iframe)는 문서 높이만큼 늘어나서
 * vh 가 그 높이를 따라 커지고, 그러면 내용이 다시 커져 끝없이 늘어난다 — 미리보기 문서가 --cs-vh 를 고정 값으로 둔다.
 * 예전 모양(layout: classic)은 이 파일을 쓰지 않는다 — 옛 템플릿이 예전 마크업 그대로 그린다.
 */

.cs-section {
    --cs-line: color-mix(in srgb, var(--cs-title) 14%, transparent);
    /* 카드·사진 자리 바탕. 5색 사이트는 섹션이 --cs-card-theme 으로 테마 옅은 색·바탕색을 준다
       (App\Helpers\SectionColorScheme::cardVar) — 없으면 예전처럼 제목색 5% 를 섞는다. */
    --cs-card-bg: var(--cs-card-theme, color-mix(in srgb, var(--cs-title) 5%, var(--cs-bg)));
    /* 위아래 여백: 섹션이 고른 여백 → 사이트 여백 → 예전 값(App\Helpers\SiteShape, css/site-shape.css 와 같은 순서) */
    padding-block: var(--sec-pad, var(--site-sec-pad, 4rem));
    color: var(--cs-desc);
}

@media (min-width: 768px) {
    .cs-section {
        padding-block: var(--sec-pad-md, var(--site-sec-pad-md, 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;
}

/* 머리말·제목 — 사이트 설정의 섹션 제목·머리말(App\Helpers\SiteShape, --site-*)이 있으면 그것, 없으면 예전 값 */
.cs-eyebrow {
    margin: 0;
    width: var(--site-eyebrow-width, auto);
    padding: var(--site-eyebrow-pad, 0);
    border-radius: var(--site-eyebrow-radius, 0);
    background: var(--site-eyebrow-bg, none);
    font-family: var(--site-eyebrow-font, inherit);
    font-synthesis: var(--site-eyebrow-synthesis, weight style);
    font-size: var(--site-eyebrow-size, 0.875rem);
    font-weight: var(--site-eyebrow-weight, 700);
    letter-spacing: var(--site-eyebrow-spacing, 0.02em);
    text-transform: var(--site-eyebrow-transform, none);
    color: var(--site-eyebrow-color, color-mix(in srgb, var(--cs-title) 72%, var(--cs-bg)));
}

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

.cs-desc {
    margin: 0;
    line-height: 1.7;
    font-weight: var(--site-body-weight, 400);
    letter-spacing: var(--site-body-tracking, normal);
    color: var(--cs-desc);
    text-wrap: pretty;
}

/* 사이트 설정의 제목·내용 크기(--site-heading-size·--site-body-size, App\Helpers\SiteShape) — 섹션 크기 단계를 **기본**
   (SECTION_TITLE_FONT_SIZE_DEFAULT·SECTION_DESCRIPTION_FONT_SIZE_DEFAULT 의 클래스 조합)으로 둔 머리만 바꾼다. 폴백이 그 Tailwind
   값이라 변수가 없으면 그대로다. 섹션에서 다른 단계를 고른 머리는 클래스가 달라 걸리지 않는다. css/site-shape.css 의 .sec-* 도 같다. */
.cs-title.text-3xl.md\:text-4xl.lg\:text-5xl { font-size: var(--site-heading-size, 1.875rem); }
.cs-desc.text-lg.md\:text-xl { font-size: var(--site-body-size, 1.125rem); }

@media (min-width: 768px) {
    .cs-title.text-3xl.md\:text-4xl.lg\:text-5xl { font-size: var(--site-heading-size-md, 2.25rem); }
    .cs-desc.text-lg.md\:text-xl { font-size: var(--site-body-size-md, 1.25rem); }
}

@media (min-width: 1024px) {
    .cs-title.text-3xl.md\:text-4xl.lg\:text-5xl { font-size: var(--site-heading-size-lg, 3rem); }
}

.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(75 * var(--cs-vh, 1vh) * var(--cs-media-ratio, 16 / 9)));
    justify-self: center;
}

.mt-section--stacked .mt-media--video {
    max-width: min(64rem, calc(75 * var(--cs-vh, 1vh) * 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;
}

/* 아이콘 — 배경은 없음 · 원 · 둥근 사각, 색은 옅게 · 테마 색 · 직접(2026-10-05, 예전 옅은 원 · 테마 색 원 · 아이콘만을 나눴다).
   크기는 --cd-icon-scale 배(작게 1 = 예전 크기). 원 크기는 색마다 예전 그대로 — 옅게 3rem, 테마 색·직접 3.5rem */
.cd-icon-size--md { --cd-icon-scale: 1.3333; }
.cd-icon-size--lg { --cd-icon-scale: 1.6667; }
.cd-icon-size--xl { --cd-icon-scale: 2; }
.cd-icon-size--xxl { --cd-icon-scale: 2.4; }

.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: calc(1.5rem * var(--cd-icon-scale, 1));
    height: calc(1.5rem * var(--cd-icon-scale, 1));
}

/* 배경 모양 — 원 · 둥근 사각(크기는 같고 모서리만 다르다) */
.cd-glyph--circle,
.cd-glyph--rounded {
    width: calc(3rem * var(--cd-icon-scale, 1));
    height: calc(3rem * var(--cd-icon-scale, 1));
    border-radius: 9999px;
}

.cd-glyph--rounded {
    border-radius: 28%;
}

/* 테두리 — 섹션(칠한 카드면 카드) 바탕에 가는 선(오시는 길의 예전 모양, 2026-10-05) */
.cd-glyph--line {
    background: var(--cs-bg);
    border: 1px solid var(--cs-line);
}

/* 배경 색 — 옅게(테마 색을 섹션 바탕에 옅게 탄다) */
.cd-glyph--soft {
    background: color-mix(in srgb, var(--cd-accent) 12%, var(--cs-bg));
}

/* 테마 색 · 직접 — 진한 바탕에 그 위에서 읽히는 아이콘 */
.cd-glyph--brand,
.cd-glyph--custom {
    width: calc(3.5rem * var(--cd-icon-scale, 1));
    height: calc(3.5rem * var(--cd-icon-scale, 1));
    background: var(--cd-accent);
    color: var(--cd-on-accent);
}

.cd-glyph--custom {
    background: var(--cd-icon-bg, var(--cd-accent));
    color: var(--cd-icon-fg, var(--cd-on-accent));
}

.cd-glyph--brand .cd-glyph-svg,
.cd-glyph--custom .cd-glyph-svg {
    width: calc(1.75rem * var(--cd-icon-scale, 1));
    height: calc(1.75rem * var(--cd-icon-scale, 1));
}

/* 배경 없음 — 아이콘만 조금 크게 */
.cd-glyph--plain .cd-glyph-svg {
    width: calc(2rem * var(--cd-icon-scale, 1));
    height: calc(2rem * var(--cd-icon-scale, 1));
}

.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);
}

/* 카드 머리말 테마 색(card_eyebrow_tone: brand) — 날짜·분야를 눈에 띄게. 글자 얹기 카드는 아래에서 흰색으로 되돌린다. */
.cd-eyebrow--brand .cd-eyebrow {
    color: var(--cd-accent);
}

/* 카드 맨 아래 정보 줄(장소·기간·가격). 이 줄이 있는 카드는 글 칸을 세로 flex 로 바꿔 남은 높이를 채우고
   정보 줄을 바닥에 둔다 — 한 줄의 카드 높이가 같을 때(격자) 정보 줄끼리 높이가 맞는다. 줄 없는 카드는 예전 grid 그대로. */
.cd-body--info {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
}

.cd-align--center .cd-body--info {
    align-items: center;
}

.cd-body--info > .cd-badge {
    align-self: flex-start;
}

.cd-info {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: auto 0 0;
    padding-top: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--cs-desc);
}

.cd-info-glyph {
    flex: none;
    width: 1.05em;
    height: 1.05em;
    margin-top: 0.2em;
}

.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-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;
}

/* 카드 모양(2026-10-05) — 색(투명 · 한 가지 색 · 그라데이션 · 돌아가며) · 틀(없음 · 테두리) · 그림자(사이트 기본 · 없음 · 약간 · 강함).
   예전 카드 틀(선 없음 · 테두리 · 바탕 · 떠 있는 카드)은 셋으로 옮겨 같은 모양이 된다(CardSection::upgradeLegacy).
   틀이 있는 카드(cd-card--boxed — 색·테두리·그림자·강조)만 안쪽 여백을 둔다. 사진 없는 사진 카드는 늘 옅은 바탕(글 카드). */
.cd-border--line .cd-card {
    border: 1px solid var(--cs-line);
}

/* 한 가지 색 — 옅은 색(섹션 색 구성의 카드 바탕, 예전 "바탕") · 흰색(예전 "떠 있는 카드" 바탕 — 밝은 섹션은 템플릿이 테마 바탕색을
   주고, 어두운 섹션은 섹션 바탕보다 조금 밝은 색이라 섹션 글자색이 그대로 읽힌다) */
.cd-card--text {
    background: var(--cs-card-bg);
}

/* 옅은 바탕 섹션은 --cs-card-bg 가 흰색이라 템플릿이 바탕보다 한 단계 진한 --cd-soft-bg 를 준다(CardLook::softBgVar) */
.cd-fill--soft .cd-card {
    background: var(--cd-soft-bg, var(--cs-card-bg));
}

.cd-fill--white .cd-card:not(.cd-card--overlay) {
    background: var(--cd-white-bg, color-mix(in srgb, var(--cs-title) 9%, var(--cs-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;
}

/* 그림자. 사이트 기본은 사이트 상자 그림자(box_shadow, --site-box-shadow — 비면 없음)를 색·테두리가 있는 카드에만 깐다(예전 그대로 —
   선 없는 투명 카드는 상자가 아니다). 약간·강함은 템플릿이 --cd-shadow 로 값을 준다. 강조 카드의 테두리(안쪽 그림자)와 함께 그리게
   --cd-ring 과 묶는다 */
.cd-shadow--site.cd-list--framed .cd-card,
.cd-shadow--site .cd-card--overlay,
.cd-shadow--site .cd-card--toned,
.cd-shadow--site .cd-card--text {
    --cd-shadow: var(--site-box-shadow, 0 0 #0000);
}

.cd-list .cd-card {
    box-shadow: var(--cd-ring, 0 0 #0000), var(--cd-shadow, 0 0 #0000);
}

.cd-shadow--none .cd-card {
    --cd-shadow: 0 0 #0000;
}

/* 그림자를 고른 카드는 사진을 둥근 모서리에 맞춰 자른다 */
.cd-shadow--soft .cd-card:not(.cd-card--overlay),
.cd-shadow--strong .cd-card:not(.cd-card--overlay) {
    overflow: hidden;
}

/* 틀이 있는 사진 카드(색·테두리·그림자) — 사진을 카드 위쪽과 양옆에 여백 없이 채운다. 위 모서리는 카드가 둥글게
   자르고(overflow), 사진 아래 모서리는 각지게 글과 곧게 잇는다. 글에만 안쪽 여백(2026-10-01 — 테두리·바탕도 떠 있는 카드처럼). */
.cd-list--framed .cd-card--boxed.cd-card--media {
    overflow: hidden;
    padding: 0;
}

.cd-list--framed .cd-card--boxed.cd-card--media .cd-media {
    border-radius: 0;
}

.cd-list--framed .cd-card--boxed.cd-card--media .cd-body {
    padding: 1.5rem 1.75rem 1.75rem;
}

/* 카드마다 칠하는 색(card_fill 돌아가며 · 그라데이션 · 직접 고른 한 가지 색) — 템플릿이 카드마다 --cd-tone-paint(바탕 — 그라데이션이면
   그림)·--cd-tone-bg(그 밑 한 가지 색)·--cd-tone-fg 를 준다. 카드 안 글자·아이콘·머리말이 쓰는 변수를 그 색으로 바꿔 끼워 어느 섹션
   바탕에서도 읽히게 한다. 틀(테두리·그림자)은 그대로. 한 가지 색(.cd-fill--*)의 바탕 규칙보다 앞서야 해서 세 단계로 건다 */
.cd-list .cd-card.cd-card--toned,
.cd-fill--white .cd-card.cd-card--toned:not(.cd-card--overlay) {
    background: var(--cd-tone-paint, var(--cd-tone-bg));
    --cs-bg: var(--cd-tone-bg);
    --cs-title: var(--cd-tone-fg);
    --cs-desc: color-mix(in srgb, var(--cd-tone-fg) 82%, var(--cd-tone-bg));
    --cs-line: color-mix(in srgb, var(--cd-tone-fg) 18%, var(--cd-tone-bg));
    --cd-accent: var(--cd-tone-fg);
    --cd-on-accent: var(--cd-tone-bg);
}

.cd-border--line .cd-card.cd-card--toned {
    border-color: transparent;
}

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

/* 사진을 가장자리까지 채운 강조 카드는 안쪽 그림자 테두리가 사진에 가려진다 — 사진 위에 그리는 outline 으로(모서리를 따른다) */
.cd-list--framed .cd-card--highlight.cd-card--media {
    outline: 2px solid var(--cd-accent);
    outline-offset: -2px;
}

/* 누를 수 있는 틀 있는 카드만 마우스에 반응한다. 그림자를 고른 카드는 살짝 떠오르고 그림자가 커진다 */
.cd-card--boxed.cd-card--link {
    transition: box-shadow 200ms ease, border-color 200ms ease, transform 200ms ease;
}

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

.cd-shadow--soft .cd-card--boxed.cd-card--link:hover,
.cd-shadow--strong .cd-card--boxed.cd-card--link:hover {
    transform: translateY(-3px);
    --cd-shadow: 0 2px 6px rgba(15, 23, 42, 0.08), 0 22px 40px -18px rgba(15, 23, 42, 0.3);
}

.cd-shadow--strong .cd-card--boxed.cd-card--link:hover {
    --cd-shadow: 0 4px 10px rgba(15, 23, 42, 0.1), 0 28px 52px -20px rgba(15, 23, 42, 0.4);
}

@media (prefers-reduced-motion: reduce) {
    .cd-shadow--soft .cd-card--boxed.cd-card--link:hover,
    .cd-shadow--strong .cd-card--boxed.cd-card--link:hover {
        transform: none;
    }
}

.cd-border--line .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;
}

/* 글은 DOM 에서 사진보다 앞에 있다. 크게 하나의 사진(absolute)이나 hover 로 확대된 사진(transform)이 뒤에 칠해져 글을 덮지 않게 위로 올린다. */
.cd-card--overlay .cd-body {
    position: absolute;
    z-index: 1;
    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,
.cd-card--overlay .cd-info { 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); }

/* 그늘 진하기(overlay_shade) — 보통은 위의 값 그대로 */
.cd-shade--soft .cd-card--overlay .cd-body {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4) 42%, rgba(0, 0, 0, 0.58));
}
.cd-shade--strong .cd-card--overlay .cd-body {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.76) 38%, rgba(0, 0, 0, 0.9));
}

/* 사진 위 글 없음(overlay_style: none) — 그늘 없이 사진에 바로 쓴다. 제목은 위, 나머지(설명·링크·정보 줄)는 아래.
   글자색은 위(cd-ink-top--*: 머리말·배지·제목)와 아래(cd-ink-bottom--*: 설명·링크·정보 줄)를 따로 — light 는 흰 글자,
   dark 는 진한 글자. 사진 밝기를 재서 정하고(CardSection::overlayText), 글 뒤 가장자리에만 옅은 막을 깔아 받친다.
   .cd-list 를 붙여 크게 하나의 padding-top: 5rem 보다 앞선다 */
.cd-list.cd-list--plain .cd-card--overlay .cd-body {
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1.375rem;
    background: linear-gradient(180deg, var(--cd-scrim-top, transparent), transparent 34%, transparent 58%, var(--cd-scrim-bottom, transparent));
}
.cd-list--plain .cd-card--overlay .cd-title { margin-bottom: auto; padding-bottom: 1rem; }
.cd-list--plain .cd-card--overlay .cd-badge { align-self: flex-start; }
.cd-list--plain .cd-ink-top--light { --cd-scrim-top: rgba(0, 0, 0, 0.3); }
.cd-list--plain .cd-ink-top--dark { --cd-scrim-top: rgba(255, 255, 255, 0.4); }
.cd-list--plain .cd-ink-bottom--light { --cd-scrim-bottom: rgba(0, 0, 0, 0.42); }
.cd-list--plain .cd-ink-bottom--dark { --cd-scrim-bottom: rgba(255, 255, 255, 0.55); }
.cd-list--plain .cd-ink-top--dark .cd-title { color: #111827; }
.cd-list--plain .cd-ink-top--dark .cd-eyebrow { color: rgba(17, 24, 39, 0.72); }
.cd-list--plain .cd-ink-bottom--dark .cd-more { color: #111827; }
.cd-list--plain .cd-ink-bottom--dark .cd-desc { color: rgba(17, 24, 39, 0.86); }
.cd-list--plain .cd-ink-bottom--dark .cd-info { color: rgba(17, 24, 39, 0.72); }
.cd-list--plain .cd-ink-top--dark .cd-stretch:focus-visible::after { outline-color: #111827; }

/* 목록: 그림 옆에 글 */
.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-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-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--circle,
.cd-list--featured .cd-card--lead .cd-glyph--rounded {
    width: calc(4rem * var(--cd-icon-scale, 1));
    height: calc(4rem * var(--cd-icon-scale, 1));
}

/* 가로로 넘기기 — 한 줄로 두고 다음 카드를 조금 보여 준다. 스크롤 막대는 숨긴다(2026-10-04 사용자 결정) — 넓은 화면은 좌우
   화살표, 휴대폰은 손가락으로 밀고, 오른쪽 끝에 걸친 다음 카드가 "더 있다"를 알린다.
   옆으로 넘기는 상자(overflow)는 제 테두리 밖의 그림자를 자른다 — 카드 그림자(약간·강함·사이트 상자 그림자)가 아래·양옆에서
   뚝 끊긴 띠로 보였다(2026-10-05). 상자 안쪽에 그림자 자리(--cd-shadow-room)를 두고 같은 만큼 바깥 여백을 당겨, 카드 폭과
   섹션 안 자리는 예전 그대로 둔다. 양옆은 컨테이너 안쪽 여백(1rem)만큼이라 화면 밖으로 넘치지 않는다 */
.cd-list--scroll,
.cd-list--mobile-scroll {
    --cd-shadow-room-x: 1rem;
    --cd-shadow-room-bottom: 3rem;
}

.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: none;
    padding: 0.5rem var(--cd-shadow-room-x) var(--cd-shadow-room-bottom);
    margin: -0.5rem calc(-1 * var(--cd-shadow-room-x)) calc(0.75rem - var(--cd-shadow-room-bottom));
    scroll-padding-inline: var(--cd-shadow-room-x);
}

.cd-list--scroll::-webkit-scrollbar,
.cd-list--mobile-scroll::-webkit-scrollbar {
    display: none;
}

.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;
        scrollbar-width: none;
        /* 그림자 자리 — 위 .cd-list--scroll 과 같다 */
        padding: 0.5rem var(--cd-shadow-room-x) var(--cd-shadow-room-bottom);
        margin: -0.5rem calc(-1 * var(--cd-shadow-room-x)) calc(0.75rem - var(--cd-shadow-room-bottom));
        scroll-padding-inline: var(--cd-shadow-room-x);
    }

    .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; }

/* 카드 사진 흑백(image_tone grayscale) — 마우스를 올리거나 키보드로 고른 카드만 원래 색으로 */
.cd-list--mono .cd-media img {
    filter: grayscale(1) contrast(1.05);
    transition: filter 0.6s ease, transform 0.6s ease;
}

.cd-list--mono .cd-card:hover .cd-media img,
.cd-list--mono .cd-card:focus-within .cd-media img {
    filter: none;
}

@media (prefers-reduced-motion: reduce) {
    .cd-list--mono .cd-media img {
        transition: none;
    }
}

/* 이미지와 글 · 스크롤 고정(sticky). 좁은 화면·스크립트 없음: 줄마다 사진 → 글. 넓은 화면(lg): 글 줄이 한 화면씩
   넘어가고 사진 칸이 화면에 머물며, 화면 가운데 온 줄의 사진이 겹쳐 바뀐다(/js/media-text-sticky.js). */
.mt-sticky-steps {
    display: grid;
    gap: 3rem;
}

.mt-sticky-inline-media {
    margin-bottom: 1.5rem;
}

.mt-sticky-stage {
    display: none;
}

@media (min-width: 1024px) {
    .mt-sticky {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
        gap: 5rem;
        align-items: start;
    }

    .mt-sticky--flip .mt-sticky-steps {
        order: 2;
    }

    .mt-sticky-steps {
        gap: 0;
    }

    .mt-sticky-step {
        display: flex;
        align-items: center;
        min-height: calc(62 * var(--cs-vh, 1vh));
        opacity: 0.32;
        transition: opacity 0.5s ease;
    }

    .mt-sticky-step.is-active,
    .mt-sticky:not(.is-ready) .mt-sticky-step {
        opacity: 1;
    }

    .mt-sticky-inline-media {
        display: none;
    }

    .mt-sticky-stage {
        display: block;
        position: sticky;
        top: calc(19 * var(--cs-vh, 1vh));
    }

    .mt-sticky-frames {
        display: grid;
    }

    .mt-sticky-frame {
        grid-area: 1 / 1;
        opacity: 0;
        transform: scale(1.03);
        transition: opacity 0.7s ease, transform 1.2s ease;
    }

    .mt-sticky-frame.is-active {
        opacity: 1;
        transform: none;
    }

    .mt-sticky-frame .mt-media {
        max-height: calc(62 * var(--cs-vh, 1vh));
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mt-sticky-step,
    .mt-sticky-frame {
        transition: none;
    }
}

/* 태그 — 카드 제목만 알약 모양으로 줄지어(소재·기술·지역). 줄은 머리글 정렬을 따른다. 강조는 주 버튼 색으로 채운다. */
.cd-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

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

.cd-tag { display: flex; }

.cd-tag-body {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.5rem 1.125rem;
    border: 1px solid color-mix(in srgb, var(--cs-title) 18%, transparent);
    border-radius: var(--cd-tag-radius, 9999px);
    background: color-mix(in srgb, var(--cd-accent) 6%, var(--cs-bg));
    color: var(--cs-title);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
}

@media (min-width: 768px) {
    .cd-tag-body { font-size: 1.0625rem; }
}

.cd-tag-glyph {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--cd-accent);
}

.cd-tag--highlight .cd-tag-body {
    border-color: var(--cd-accent);
    background: var(--cd-accent);
    color: var(--cd-on-accent);
}

.cd-tag--highlight .cd-tag-glyph { color: var(--cd-on-accent); }

.cd-tag-body--link {
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.cd-tag-body--link:hover {
    border-color: var(--cd-accent);
}

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

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

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