/* ─── Design ──────────────────────────────────────────────────────── */

/* ─── CC Sans: 합성 글꼴 (인디자인 합성 글꼴 방식) ───────────────────────────
   · os-b = 국문 폰트(전 영역 담당, 기본 폴백)  — 먼저 선언
   · os-a = 라틴·숫자·문장부호·화살표 등 담당    — 나중 선언(같은 범위에선 우선)
     a에 없는 글리프는 글자 단위로 b로 자동 폴백 → 기존 스택과 동일하게 렌더링
   · CC Sans KR = 숫자·영문 포함 전부 국문 폰트로 쓰는 요소용(날짜 등) */
@font-face {
    font-family: "CC Sans";
    src: url("../fonts/os-b.woff2") format("woff2");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
    size-adjust: 103%; /* 국문 폰트 크기 보정 (라틴 폰트와 시각적 크기 맞춤) */
}

@font-face {
    font-family: "CC Sans";
    src: url("../fonts/os-a.woff2") format("woff2");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-024F, U+2000-206F, U+20A0-20CF, U+2100-218F,
                   U+2190-21FF, U+2200-22FF, U+2460-24FF, U+25A0-25FF;
}

@font-face {
    font-family: "CC Sans KR";
    src: url("../fonts/os-b.woff2") format("woff2");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
    size-adjust: 103%; /* 국문 폰트 크기 보정 (라틴 폰트와 시각적 크기 맞춤) */
}

:root {
    /* Colors */
    --black:      #000000;
    --white:      #FAFAFA;
    --green:      #5ADC6E;
    --grey-light:  #f1f4f5;
    --grey-middle: #e1e3e4;
    --grey-dark:   #cbcbcb;
    --bg:         #FAFAFA;
    --muted:      #949798;
    --border:     rgba(0, 0, 0, 0.8); /* 구분선 공통 색: BLACK 80% */

    /* Bookmark nav - adjust --nav-base to reposition all tabs at once */
    --nav-base: calc(100% - 76px);
    --nav-step: 0px;

  /* Typography */
    --font-en: "CC Sans", "Helvetica Neue", Arial, sans-serif;
    --font-kr: "CC Sans KR", "Apple SD Gothic Neo", sans-serif;
    --font-serif: "Noto Serif KR", "AppleMyungjo", serif; /* 아티클 본문용 */
    
    /* Type scale */
    --type-body-kr: 12px;
    --type-body-en: 13px;
    --type-card-title-en: 18px;
    --type-card-title-kr: 16px;
    --type-detail-title: 34px;
    --type-menu-title: 26px;
    --type-footer: 12px;

    /* Spacing system: 4 / 8 / 16 / 32 / 48 / 64 */
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-4:  16px;
    --sp-8:  32px;
    --sp-12: 48px;
    --sp-16: 64px;

    /* Layout */
    --container-max: 1024px;
    --pad:           24px;        /* container side padding = 3×sp-2 */
    --grid-cols:     10;
    --grid-gutter:   16px;        /* column gutter = sp-4 */

    /* Header */
    --header-logo-h: 48px;
    --header-nav-h:  22px;
    --header-h:      70px;        /* logo row + nav strip */

    /* Page transition */
    --page-exit-dist:  120px;
    --page-exit-dur:   420ms;
    --page-enter-dist: 120px;
    --page-enter-dur:  600ms;
    --page-enter-delay: 200ms;
}

/* ─── Nav width token — equals --tab-w so content edge touches tab left edge ── */
@media (min-width: 769px) { body { --bm-nav-width: 76px; --nav-base: calc(100% - 76px); } }

/* ─── Reset ──────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { min-height: 100%; font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
    margin-left: 0;
    margin-right: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--font-en);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--black);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    word-break: keep-all;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.site-main {
    transition:
        transform var(--page-exit-dur) cubic-bezier(0.4,0,0.8,0.2),
        opacity var(--page-exit-dur) ease,
        margin-right 220ms ease;
}

html.bm-entering .site-main {
    opacity: 0;
    transform: translateX(var(--page-enter-dist));
    transition: none;
    will-change: transform, opacity;
}

.site-main.is-entering {
    opacity: 1;
    transform: translateX(0);
    transition:
        transform var(--page-enter-dur) cubic-bezier(0.16,1,0.3,1) var(--page-enter-delay),
        opacity var(--page-enter-dur) ease var(--page-enter-delay),
        margin-right 220ms ease;
}

.site-main.is-exiting {
    transform: translateX(calc(-1 * var(--page-exit-dist)));
    opacity: 0;
}


img   { display: block; max-width: 100%; height: auto; }
a     { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; font: inherit; border: none; background: none; }
[hidden] { display: none !important; }

/* ─── Container ──────────────────────────────────────────────────────────── */

.container {
    max-width: var(--container-max);
    margin-left: 0;
    margin-right: auto;
    padding-inline: var(--pad);
}

/* Full-bleed but width-capped (no side padding) */
.container--flush {
    max-width: var(--container-max);
    margin-inline: auto;
}

@media (min-width: 1440px) {
    :root {
        --container-max: 1440px;
    }
}


/* ─── Bookmarks ───────────────────────────────────────────────────────────── */



.bookmarks {
    position: fixed;
    z-index: 100;
    --bm-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --bm-duration: 300ms;
}

/* 이미지 저장 억제: 드래그·iOS 길게 누르기 차단 (우클릭은 JS에서 차단) */
img {
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

/* 국문 폰트 자간 보정 — 자간 미지정이던 국문 영역 */
.books-list__td,
.site-footer__name,
.site-footer__col p,
.site-footer__newsletter-label,
.site-footer__copyright,
.about-specs__label,
.about-specs__value,
.about-contact__location,
.about-description,
.about-desc__kr {
    letter-spacing: -0.02em;
}

/* 창 크기 조절 중: nav 전환 애니메이션 정지
   (데스크탑↔모바일 레이아웃 전환 시 탭이 바에서 떨어져 검은 간격이 보이는 현상 방지) */
body.is-resizing .bookmarks,
body.is-resizing .bm,
body.is-resizing .bm::before,
body.is-resizing .bm-strip {
    transition: none !important;
}


.bm {
    cursor: pointer;
    outline: none;
    transition:
        right var(--bm-duration) var(--bm-ease),
        width var(--bm-duration) var(--bm-ease),
        flex-basis var(--bm-duration) var(--bm-ease),
        flex-grow var(--bm-duration) var(--bm-ease),
        transform var(--bm-duration) var(--bm-ease);
}

/* 구버전 레이아웃용 스페이서 — 현재 모든 레이아웃에서 미표시 */
.bm-gap {
    display: none;
}

.bm-strip {
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    background: rgba(255,255,255,0.92);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: none;
    border-left: none;
    border-right: none;
    box-shadow: 4px 0 5px rgba(0,0,0,0.10);
    transition:
        width var(--bm-duration) var(--bm-ease),
        flex-basis var(--bm-duration) var(--bm-ease),
        transform var(--bm-duration) var(--bm-ease),
        box-shadow var(--bm-duration) var(--bm-ease),
        border-color 0.2s ease;
}

.bm-strip::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: rgba(255,255,255,0.5);
    pointer-events: none;
}

.bm-strip::after {
    content: '';
    position: absolute;
    inset: 0;
    display: block;
    background: none;
    pointer-events: none;
}

.bm:hover .bm-strip,
.bm:focus-visible .bm-strip {
    border-left-color: rgba(0,0,0,0.18);
}

.bm:hover:not(.active) .bm-text,
.bm:focus-visible:not(.active) .bm-text {
    color: #000000;
}

.bm.active .bm-strip {
    border-left-color: rgba(0,0,0,0.08);
}

.bm.active .bm-strip::after {
    background: none;
}

.bm.active .bm-strip::before {
    width: 0;
}


.bm-text {
    display: block;
    font-family: var(--font-en);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--bm-text-color, #000000);
    user-select: none;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.bm.active .bm-text {
    color: #000000;
}


.bm:nth-child(odd) {
    --bm-text-color: #000000;
}

.bm:nth-child(even) {
    --bm-text-color: #000000;
}

@media (min-width: 400px) {
    /* ── Index tab panels — staircase layout ── */
    .bookmarks {
        --tab-w:       32px;
        --tab-h:       84px;  /* 데스크탑 공통 탭 높이(프로그램 제외) */
        --tab-overlap: 0px;   /* how much adjacent tabs overlap vertically */
        --tab-gap-v:   calc(var(--tab-h) - var(--tab-overlap));
        --tab-top:     0px;
        --books-trim:  0px;   /* 탭 높이 94px 통일로 단축분 제거 */
        /* 하단 3탭(ARTICLES/ABOUT/STORE) 시작 위치·높이 */
        --tail-top: calc(var(--tab-top) + var(--tab-gap-v) * 3 - var(--books-trim));
        --tail-h: var(--tab-h); /* 하단 3탭도 동일 높이 */
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        overflow: visible;
        pointer-events: none;
        z-index: 100;
    }


    /* ── Each tab: spans from its staircase left% to the right edge ── */
    .bm {
        position: absolute;
        top: 0;
        right: 0;
        width: auto;        /* left set per-class; right: 0 makes it full-width from there */
        height: var(--tab-h);
        display: block;
        pointer-events: none;  /* dark strip is non-interactive; bm-strip re-enables */
        cursor: pointer;
        outline: none;
    }

    /* Order top→bottom: books, programs, articles, about, store
       위 탭이 항상 아래 탭 위에 쌓인다. 모든 탭 높이는 --tab-h(94px)로 동일 */
    .bm--home     { top: var(--tab-top); z-index: 6; left: calc(var(--nav-base) + 0 * var(--nav-step)); height: var(--tab-h); }
    .bm--books    { top: calc(var(--tab-top) + var(--tab-gap-v) * 2 + 20px); z-index: 4; left: calc(var(--nav-base) + 2 * var(--nav-step)); height: var(--tab-h); }
    .bm--programs { top: calc(var(--tab-top) + var(--tab-gap-v)); z-index: 5; left: calc(var(--nav-base) + 1 * var(--nav-step)); height: calc(var(--tab-h) + 20px); }
    .bm--articles { top: calc(var(--tail-top) + 20px); z-index: 3; left: calc(var(--nav-base) + 3 * var(--nav-step)); height: var(--tail-h); }
    .bm--about    { top: calc(var(--tail-top) + var(--tail-h) + 20px); z-index: 2; left: calc(var(--nav-base) + 4 * var(--nav-step)); height: var(--tail-h); }
    .bm--store    { top: calc(var(--tail-top) + var(--tail-h) * 2 + 20px); z-index: 1; left: calc(var(--nav-base) + 5 * var(--nav-step)); height: var(--tail-h); }


    /* Dark contrast strip: covers full .bm (incl. under glass so tab stays visible) */
    .bm::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--black);
        pointer-events: none;
        z-index: 0;
        transition: left var(--bm-duration) var(--bm-ease);
    }

    /* On hover the strip shifts with the glass → 2px gap shows white page */
    .bm:not(.active):hover::before,
    .bm:not(.active):focus-visible::before {
        left: 2px;
    }

    .bm-gap { display: none; }

    /* ── Visible panel body: paper-stack tab fixed to left edge of each .bm ── */
    .bm-strip {
        position: absolute;
        top: 0;
        left: 0;
        bottom: auto;
        right: auto;
        height: calc(100% + 8px);
        width: var(--tab-w);
        pointer-events: auto;
        z-index: 1;
        display: grid;
        place-items: center;
        background: var(--bg);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border-radius: 0 2px 2px 0;
        border: none;
        box-shadow: 1px 3px 6px -1px rgba(0,0,0,0.10);
        clip-path: inset(-2px -10px -10px 0);
        transition: transform var(--bm-duration) var(--bm-ease);
        transform: translateX(-8px);
        overflow: visible;
    }

    /* All tabs same bg */
    .bm--home     .bm-strip,
    .bm--books    .bm-strip,
    .bm--articles .bm-strip,
    .bm--about    .bm-strip,
    .bm--store    .bm-strip { background: var(--bg); }

    /* Active: retreats to rest position, height extends downward */
    .bm.active .bm-strip {
        transform: translateX(0);
        background: var(--bg);
        box-shadow: 1px 3px 6px -1px rgba(0,0,0,0.10);
        border: none;
        height: calc(100% + 8px);
        clip-path: inset(-2px -10px -10px 0);
        overflow: visible;
    }

    .bm.active .bm-strip::before {
        display: none;
    }

    /* Active hover: stays at rest */
    .bm.active:hover .bm-strip,
    .bm.active:focus-visible .bm-strip {
        transform: translateX(0);
        height: calc(100% + 8px);
        clip-path: inset(-2px -10px -10px 0);
    }
    /* 호버 판정 안정화: 탭이 8px 이동해도 판정 영역은 고정 (호버 무한 반복 방지) */
    .bm::after {
        content: '';
        position: absolute;
        top: 0;
        left: -8px;
        width: calc(var(--tab-w) + 8px);
        height: calc(100% + 8px);
        pointer-events: auto;
    }

    /* Inactive hover: active와 동일한 효과 (8px 전진 + 높이 연장) */
    .bm:not(.active):hover .bm-strip,
    .bm:not(.active):focus-visible .bm-strip {
        transform: translateX(0);
        background: var(--bg);
        filter: none;
        box-shadow: 1px 3px 6px -1px rgba(0,0,0,0.10);
        border: none;
        height: calc(100% + 8px);
        clip-path: inset(-2px -10px -10px 0);
        overflow: visible;
    }


    .bm-text {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        font-family: var(--font-en);
        font-size: 13px;
        font-weight: 500;
        letter-spacing: -0.01em;
        text-transform: uppercase;
        color: #000000;
        user-select: none;
        white-space: nowrap;
        transition: color 0.2s ease;
    }

    .bm.active .bm-text { color: #000000; }

    .bm--books .bm-text { letter-spacing: -0.03em; }

    .bookmarks::before { display: none; }

    /* Full-height black fill behind tab strips on the right */
    .bookmarks::after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: var(--bm-nav-width);
        background: var(--black);
        z-index: 0;
        pointer-events: none;
    }

    .programs-stage {
        left: 0;
        right: var(--bm-nav-width);
    }

    .site-main {
        margin-right: var(--bm-nav-width);
    }
}

@media (min-width: 1440px) {
    body { --bm-nav-width: 80px; --nav-base: calc(100% - 80px); }
    .bookmarks {
        --tab-w: 34px;
    }
    .bm-text { font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
    .bm       { transition: none; }
    .bm-strip { transition: none; }
}

@media (min-width: 768px) {
    body.admin-bar .bookmarks {
        top: 32px;
    }
}


/* ─── Nav: landscape / max-height 400px — horizontal top bar ────────────── */
@media (max-height: 400px) {
    body {
        --bm-nav-width: 0px;
    }

    .bookmarks {
        position: fixed !important;
        top: 28px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        width: 100% !important;
        height: 36px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        overflow: visible !important;
        pointer-events: auto !important;
        z-index: 100 !important;
        background: var(--bg, #FAFAFA) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        padding-top: 0 !important;   /* 데스크탑 세로 탭의 padding-top 누수 차단 */
    }

    .bookmarks::after,
    .bookmarks .bm::before {
        display: none !important;
    }


    .bm {
        position: static !important;
        flex: 1 !important;
        width: auto !important;
        height: 36px !important;
        top: auto !important;
        right: auto !important;
        margin-top: 0 !important;
        display: flex !important;
        pointer-events: auto !important;
    }

    .bm--home,
    .bm--books,
    .bm--programs,
    .bm--articles,
    .bm--about,
    .bm--store {
        top: auto !important;
        z-index: auto !important;
        left: auto !important;
    }


    .bm-gap { display: none !important; }

    /* 호버 판정 안정화: 움직이는 탭 몸체는 판정에서 제외 */
    .bm-strip { pointer-events: none !important; }

    .bm-strip {
        position: static !important;
        inset: auto !important;
        flex: 1 !important;
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        background: #000000 !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: 4px 0 10px rgba(0,0,0,0.16) !important;
        clip-path: none !important;
        transition:
            transform var(--bm-duration) var(--bm-ease),
            height var(--bm-duration) var(--bm-ease),
            clip-path var(--bm-duration) var(--bm-ease) !important;
        transform: none !important;
    }

    .bm--home     .bm-strip { background: #000000 !important; }
    .bm--programs .bm-strip { background: #000000 !important; }
    .bm--articles .bm-strip { background: #000000 !important; }
    .bm--about    .bm-strip { background: #000000 !important; }
    .bm--store    .bm-strip { background: #000000 !important; }

    .bm.active .bm-strip {
        transform: translateY(-3px) !important;
        border-radius: 0 2px 2px 0 !important;
        margin: 0 4px !important;
        width: calc(100% - 8px) !important;
        flex: none !important;
    }

    .bm.active:hover .bm-strip,
    .bm.active:focus-visible .bm-strip {
        transform: translateY(-3px) !important;
    }

    .bm:not(.active):hover .bm-strip,
    .bm:not(.active):focus-visible .bm-strip {
        transform: translateY(2px) !important;
        background: #000000 !important;
        border-radius: 0 2px 2px 0 !important;
        box-shadow: 4px 0 10px rgba(0,0,0,0.16) !important;
        margin: 0 4px !important;
        width: calc(100% - 8px) !important;
        flex: none !important;
    }

    .bm-text {
        writing-mode: horizontal-tb !important;
        font-size: 11px !important;
        letter-spacing: -0.01em !important;
        transform: none !important;
        white-space: nowrap !important;
        color: #ffffff !important;
    }

    .bm--books .bm-text { letter-spacing: -0.03em !important; }

    .bm.active .bm-text { color: #ffffff !important; }
    .bm:not(.active):hover .bm-text,
    .bm:not(.active):focus-visible .bm-text { color: #000000 !important; }

    .bookmarks::before {
        content: '' !important;
        display: block !important;
        position: absolute !important;
        top: -20px !important;
        left: 0 !important;
        right: 0 !important;
        height: 20px !important;
        background: var(--bg, #FAFAFA) !important;
        pointer-events: none !important;
    }

    body.admin-bar .bookmarks {
        top: 0 !important;
    }

    .site-main {
        margin-right: 0 !important;
        margin-top: 56px !important;
    }

    .programs-stage {
        right: 0 !important;
        top: 36px !important;
    }
}

/* ─── Footer ─────────────────────────────────────────────────────────────── */
/*
  Figma: 1024×173px black block
  4 columns of ~156px each, padding-top ~32px
  Newsletter input: 238×22px, outlined
*/
.site-footer {
    background: transparent;
    color: var(--black);
    border-top: 0;
    font-family: var(--font-en);
    flex-shrink: 0;
    position: relative;
    padding-right: var(--bm-nav-width);
}

/* 상단 구분선 — .site-footer의 padding-right가 북마크바 영역을 제외 */
.site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: var(--pad);
    right: calc(var(--bm-nav-width) + var(--pad));
    height: 0;
    border-bottom: 0.8px solid var(--border);
}

body.single-program .site-footer::before {
    left: var(--programs-pad);
    right: calc(var(--bm-nav-width) + var(--programs-pad));
}

.site-footer__inner {
    max-width: var(--container-max);
    margin-left: 0;
    margin-right: auto;
    padding: 20px var(--pad) 36px var(--pad);
}

.site-footer__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
}

.site-footer__col--kr      { grid-column: 1; grid-row: 1; }
.site-footer__col--en      { grid-column: 2; grid-row: 1; }
.site-footer__col--address { grid-column: 1; grid-row: 2; }
.site-footer__col--copyright { grid-column: 2; grid-row: 2; }
.site-footer__col--newsletter { grid-column: 1 / -1; grid-row: 3; }

.site-footer__col {
    min-width: 0;
}

.site-footer__name,
.site-footer__col p,
.site-footer__newsletter-label,
.site-footer__copyright {
    font-size: var(--type-footer);
    line-height: 18.5px;
    color: var(--black);
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.site-footer__name,
.site-footer__address,
.site-footer__desc-kr,
.site-footer__desc-en,
.site-footer__newsletter-label,
.site-footer__copyright {
    margin: 0;
}

.site-footer__col--en p {
    font-family: var(--font-en);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 16px;
}

/* 주소·저작권·뉴스레터 라벨(국/영문 혼합 문단)도 동일하게 16px */
p.site-footer__address,
p.site-footer__copyright,
p.site-footer__newsletter-label {
    line-height: 17px;
}

.site-footer__newsletter-form {
    margin-top: 8px;
    width: 100%;
}

.site-footer__newsletter-row {
    position: relative;
    display: flex;
    width: 100%;
    height: 26px;
    border-bottom: 0.8px solid var(--border);
}

.site-footer__newsletter-row input[type="email"] {
    flex: 1;
    min-width: 0;
    padding: 0;
    background: transparent;
    border: 0;
    outline: 0;
    color: var(--black);
    font-size: var(--type-footer);
    line-height: 18px;
    font-family: var(--font-en);
    font-weight: 500;
}

.site-footer__newsletter-row button {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    padding: 0 4px;
    border-left: 0;
    color: var(--black);
    font-size: 14px;
    line-height: 1;
    background: transparent;
    display: flex;
    align-items: center;
}

.site-footer__newsletter-row button img,
.site-footer__newsletter-row button svg {
    display: block;
    width: 10px;
    height: 10px;
}

.site-footer__input-placeholder {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--grey-dark);
    font-family: var(--font-en);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    pointer-events: none;
}

.site-footer__newsletter-row input:focus ~ .site-footer__input-placeholder,
.site-footer__newsletter-row input:not(:placeholder-shown) ~ .site-footer__input-placeholder {
    display: none;
}

.site-footer__col--copyright {
    align-self: start;
    text-align: left;
}

.site-footer__col--address,
.site-footer__newsletter-label {
    font-family: var(--font-en);
    font-weight: 500;
}

.site-footer__instagram {
    margin-top: 8px;
    display: flex;
    gap: 4px;
}

.site-footer__instagram a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--black);
    text-decoration: none;
}

.site-footer__instagram a:hover {
    text-decoration: underline;
}

.site-footer__col--kr {
    font-family: var(--font-kr);
    font-weight: 500;
    font-stretch: normal;
    line-height: 19px;
    word-break: keep-all;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.site-footer__col--en,
.site-footer__col--copyright,
.site-footer__newsletter-row,
.site-footer__newsletter-row input,
.site-footer__newsletter-row button {
    font-family: var(--font-en);
    font-weight: 500;
}

@media (min-width: 768px) {
    .site-footer__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .site-footer__col--address  { grid-column: 1; grid-row: 1; }
    .site-footer__col--kr       { grid-column: 2; grid-row: 1; }
    .site-footer__col--en       { grid-column: 3; grid-row: 1; }
    .site-footer__col--newsletter { grid-column: 4; grid-row: 1; }
    .site-footer__col--copyright { grid-column: 1 / -1; grid-row: 2; }

    .site-footer__newsletter-row {
        width: 100%;
    }
}


@media (min-width: 1440px) {
    .site-footer__grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .site-footer__col--address  { grid-column: 1;     grid-row: 1; }
    .site-footer__col--kr       { grid-column: 2;     grid-row: 1; }
    .site-footer__col--en       { grid-column: 3;     grid-row: 1; }
    .site-footer__col--newsletter { grid-column: 4/6; grid-row: 1; }
    .site-footer__col--copyright { grid-column: 6;   grid-row: 1; }
}

@media (min-width: 2200px) {
    .site-footer__inner {
        max-width: none;
        padding: 20px 40px 40px;
    }

    .site-footer__inner::before {
        margin-bottom: 28px;
    }

    .site-footer__grid {
        grid-template-columns: repeat(8, minmax(0, 1fr));
        gap: 28px;
    }

    .site-footer__col--address    { grid-column: 1;     grid-row: 1; }
    .site-footer__col--kr         { grid-column: 2 / 4; grid-row: 1; }
    .site-footer__col--en         { grid-column: 4 / 6; grid-row: 1; }
    .site-footer__col--newsletter { grid-column: 6 / 8; grid-row: 1; }
    .site-footer__col--copyright  { grid-column: 8;     grid-row: 1; text-align: left; }

    .site-footer__name,
    .site-footer__col p,
    .site-footer__newsletter-label,
    .site-footer__copyright,
    .site-footer__newsletter-row input[type="email"],
    .site-footer__newsletter-row button,
    .site-footer__input-placeholder {
        font-size: var(--type-footer);
        line-height: 18px;
    }

    .site-footer__col--en p {
        line-height: 19.5px;
    }

    .site-footer__newsletter-row {
        width: 100%;
        height: 34px;
    }

}

/* ─── Buttons ────────────────────────────────────────────────────────────── */
/*
  Figma: 세미나 신청하기 — 484×32px black, font-kr 12px 700
         도서 구매하기   — 484×32px black, font-kr 12px 700
*/

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding-inline: 24px;
    font-family: var(--font-kr);
    font-size: 12px;
    font-weight: 700;
    line-height: 22px;
    letter-spacing: -0.02em; /* 국문 폰트 자간 보정 */
    background: var(--black);
    color: var(--white);
    transition: opacity 0.15s;
}

.btn:hover { opacity: 0.8; }

.btn--full { width: 100%; }

.btn--closed {
    background: var(--grey-dark);
    color: var(--grey-dark);
    cursor: not-allowed;
    pointer-events: none;
}

.btn--outline {
    background: transparent;
    border: 0.8px solid var(--border);
    color: var(--black);
}

/* ─── Page / Archive header bar ──────────────────────────────────────────── */
/*
  Figma: "BOOKS" / "PROGRAMS" at 26px, letter-spacing -0.78px = -0.03em
  line-height 40px, positioned ~32px below nav strip
*/
/* ─── Page / Archive header bar ──────────────────────────────────────────── */

.archive-header {
    padding: 12px 0 0;
}

.archive-header__left {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.site-logo {
    display: block;
    width: 96px;
    height: 96px;
    max-width: none;
    margin-left: -8px;
}

.archive-header__inner {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--pad);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding-bottom: 8px;
    border-bottom: 0;
    position: relative;
}

.archive-header__inner::after {
    content: "";
    position: absolute;
    left: var(--pad);
    right: var(--pad);
    bottom: 0;
    border-bottom: 0.8px solid var(--border);
}

/* ── 전역 KR / EN 토글: CC 아이콘 상단 라인에 정렬 ─────────────────────────── */
.lang-toggle {
    position: absolute;
    top: 18px;
    right: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    z-index: 5;
}

.lang-toggle .lang-btn {
    font-size: 13px;
}

.lang-toggle__sep {
    display: inline-block;
    width: 2px;
    height: 12px;
    background: var(--black);
    font-size: 0;
    color: transparent;
    overflow: hidden;
}

/* 클릭/포커스 시 하이라이트·색 변화 방지 */
.lang-toggle .lang-btn {
    -webkit-tap-highlight-color: transparent;
}

.lang-toggle .lang-btn:focus,
.lang-toggle .lang-btn:active {
    outline: none;
}

.archive-title {
    font-family: var(--font-en);
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1;
    margin: 0;
    color: inherit;
    text-decoration: none;
}

.archive-header__search {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--black);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


/* ─── 상세 페이지 타이틀 좌측 back 셰브론 (‹ PROGRAMS 등) ──────────────────── */

.archive-title--back {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* 아이콘 높이 = 글자 크기, viewBox가 도형에 밀착돼 실제 간격은 gap 값 그대로 */
.archive-title__chevron {
    height: calc((1em - 1px) * 0.9); /* 글자 크기 - 1px에서 10% 축소 */
    width: auto;
    display: block;
    flex-shrink: 0;
    transform: translateY(0.5px);
}

/* PROGRAMS 상세만 0.5px 더 위로 */
body.single-program .archive-title__chevron {
    transform: translateY(0);
}

/* ARTICLES 상세는 0.5px 더 아래로 */
body.single-article .archive-title__chevron {
    transform: translateY(1px);
}


/* ─── Page title bar (single post) ──────────────────────────────────────── */

.page-title-bar {
    border-bottom: 0.8px solid var(--border);
    padding-block: 8px;
}

.page-title-bar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.lang-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--font-en);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1;
    color: var(--muted);
}

.lang-btn.lang-btn--active {
    color: var(--black);
}

.lang-sep {
    font-family: var(--font-en);
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
}

/* Language content visibility */
.site-main .lang-kr[hidden],
.site-main .lang-en[hidden] {
    display: none !important;
}

.site-main[data-lang="kr"] .lang-en,
.site-main[data-lang="en"] .lang-kr {
    display: none !important;
}

.site-main[data-lang="kr"] .lang-kr,
.site-main[data-lang="en"] .lang-en {
    display: revert;
}

/* ─── Hero (HOME) ────────────────────────────────────────────────────────── */
/*
  Figma HOME:
    Left image:  484×611px
    Right image: 484×293px (top of right col)
    Right text content below image
    Total hero height: 611px at 1024px breakpoint
*/

.hero {
    border-bottom: 0.8px solid var(--border);
    overflow: hidden;
}

.hero__grid {
    max-width: var(--container-max);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .hero__grid {
        grid-template-columns: 7fr 5fr;
        align-items: stretch;
    }
}

/* Left: full-bleed image surface */
.hero__image-col {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #000000;
}

@media (min-width: 768px) {
    .hero__image-col {
        aspect-ratio: unset;
        min-height: 560px;
        border-right: 0.8px solid var(--border);
    }
}

.hero__image-col img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Right: editorial content */
.hero__content-col {
    display: flex;
    flex-direction: column;
}

.hero__content-image {
    position: relative;
    aspect-ratio: 484 / 293;
    overflow: hidden;
    background: #000000;
}

@media (min-width: 768px) {
    .hero__content-image {
        display: none;
    }
}

.hero__content-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__content-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px var(--pad) var(--pad);
}

@media (min-width: 768px) {
    .hero__content-body {
        padding: 48px 40px 40px;
    }
}


.hero__type {
    font-family: var(--font-en);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--muted);
    text-transform: uppercase;
    margin-bottom: 8px;
}

.hero__title {
    font-family: var(--font-en);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

@media (min-width: 768px) {
    .hero__title {
        font-size: 34px;
        line-height: 1.1;
    }
}

.hero__meta {
    margin-top: 24px;
    display: grid;
    gap: 4px;
}

.hero__meta-row {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    gap: 8px;
    font-family: var(--font-kr);
    font-size: 12px;
    font-weight: 700;
    line-height: 22px;
}

.hero__meta-row dt { color: var(--muted); }

.hero__excerpt {
    margin-top: 8px;
    font-family: var(--font-kr);
    font-size: 12px;
    font-weight: 700;
    line-height: 22px;
    color: var(--black);
}

.hero__cta { margin-top: 32px; }

.hero__cta .btn { width: 100%; }

/* ─── Section header (BOOKS / FEATURED titles on home) ───────────────────── */

.section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: 8px;
    margin-bottom: 16px;
}

.section-title {
    font-family: var(--font-en);
    font-size: 23px;
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 40px;
}

.section-see-all {
    font-family: var(--font-en);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 29px;
    color: var(--black);
    transition: opacity 0.15s;
}

.section-see-all:hover { opacity: 0.5; }

/* ─── Books Grid ─────────────────────────────────────────────────────────── */
/*
  Figma HOME:
    6 covers × 156px + 5 gaps × 8px = 976px
    Cover: 156×194px → aspect-ratio 156/194
*/

.books-section {
    padding: 24px 0 32px;
    border-bottom: 0.8px solid var(--border);
}

.books-section .container {
    margin-inline: auto;
}

.books-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

@media (min-width: 400px) {
    .books-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 768px) {
    .books-grid { grid-template-columns: repeat(6, 1fr); }
}

.books-grid--archive {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

@media (min-width: 400px) {
    .books-grid--archive { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 768px) {
    .books-grid--archive { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1024px) {
    .books-grid--archive { grid-template-columns: repeat(6, 1fr); }
}

.book-card { display: block; }

.book-card__cover {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--grey-light);
    container-type: inline-size;
}

.book-card__cover img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.25s ease;
}

.book-card:hover .book-card__cover img { filter: grayscale(1); }

.book-card__cover-placeholder {
    width: 100%;
    height: 100%;
    background: var(--grey-dark);
}

.book-card__info { margin-top: 6px; }


/* ─── Featured Banner (HOME black strip) ─────────────────────────────────── */
/*
  Figma: 976×159px black rectangle
  Contains: left image (468×127) + right text content
*/

.featured-banner {
    background: var(--black);
    color: var(--white);
}

.featured-banner__inner {
    max-width: var(--container-max);
    margin-inline: auto;
    padding: 0;
    display: flex;
    align-items: stretch;
    min-height: 175px;
}

.featured-banner__image {
    flex-shrink: 0;
    width: 42%;
    max-width: 430px;
}

.featured-banner__image img {
    width: 100%;
    height: 100%;
    min-height: 175px;
    object-fit: cover;
    display: block;
}

.featured-banner__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 24px 32px;
}

.featured-banner__title-kr {
    font-family: var(--font-kr);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
}

.featured-banner__title-en {
    font-family: var(--font-en);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    color: rgba(255,255,255,0.6);
}

.featured-banner__date {
    font-family: var(--font-en);
    font-size: 12px;
    font-weight: 500;
    color: rgba(255,255,255,0.5);
    margin-top: 10px;
}


.books-archive-section {
    padding: 18px 0 42px;
}

.books-archive-section > .container {
    margin-inline: auto;
}


/* ─── Book Detail (single-book) ──────────────────────────────────────────── */

/* Full-width spread image */
.book-spread {
    border-top: 0.8px solid var(--border);
    border-bottom: 0.8px solid var(--border);
    position: relative;
}

.book-spread__image {
    max-width: var(--container-max);
    margin-inline: auto;
    aspect-ratio: 976 / 480;
    overflow: hidden;
    background: var(--grey-light);
    position: relative;
}

.book-spread__image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.book-spread__counter {
    max-width: var(--container-max);
    margin-inline: auto;
    padding: 8px var(--pad);
    font-family: var(--font-kr);
    font-size: 10px;
    font-weight: 700;
    line-height: 21px;
    color: var(--black);
}

/* Related books */
.related-section {
    padding: 24px 0 32px;
}

.related-section__title {
    font-family: var(--font-en);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 29px;
    text-align: center;
    margin-bottom: 16px;
}

/* ─── Featured Grid (HOME) ───────────────────────────────────────────────── */

.featured-grid-section {
    padding: 24px 0 48px;
}

.featured-grid-section .container {
    margin-inline: auto;
}

.featured-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.featured-card {
    display: block;
}

.featured-card__image {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--grey-light);
}

.featured-card__image img,
.featured-card__image video {
    position: absolute;
    inset: -1px; /* clip 경계를 1px 덮어 우/하단 검은 seam 제거 (Windows Chrome 서브픽셀) */
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    object-fit: cover;
    display: block;
    transition: opacity 0.2s;
}

.featured-card:hover .featured-card__image img,
.featured-card:hover .featured-card__image video {
    opacity: 0.85;
}

.featured-card__image-placeholder {
    width: 100%;
    height: 100%;
    background: var(--grey-dark);
}

.featured-card__title {
    font-family: var(--font-en);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.35;
    color: var(--black);
    margin-top: 8px;
}

/* 호버 시에만 나타나는 외부 링크 화살표 (굵은 지오메트릭 ↗) */
.featured-card__arrow {
    display: inline-block;
    vertical-align: -0.05em; /* 베이스라인에서 살짝 아래로 (시각 보정) */
    margin-left: 3px;
    opacity: 0;
    transform: translate(-3px, 3px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.featured-card__arrow svg {
    display: block;
    /* 대문자 높이와 동일 (여백 없이 도형이 박스를 꽉 채움) */
    width: 0.72em;
    height: 0.72em;
}

.featured-card:hover .featured-card__arrow,
.featured-card:focus-visible .featured-card__arrow {
    opacity: 1;
    transform: translate(0, 0);
}

@media (prefers-reduced-motion: reduce) {
    .featured-card__arrow { transition: none; }
}

@media (max-width: 768px) {
    .featured-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* ─── Programs — Archive ─────────────────────────────────────────────────── */

/* ── Process / Documentation section ── */
.programs-process {
    padding: 20px 0 0;
    border-bottom: 0;
    margin-bottom: 0;
}

.programs-process::after {
    content: "";
    display: block;
    width: calc(var(--container-max) - (var(--pad) * 2));
    max-width: calc(100% - (var(--pad) * 2));
    margin: 16px auto 0;
    border-bottom: 0.8px solid var(--border);
}

.programs-process__grid {
    width: calc(100% - (var(--pad) * 2));
    max-width: calc(var(--container-max) - (var(--pad) * 2));
    margin-inline: auto;
    padding-inline: 0;
    display: flex;
    gap: 8px;
    margin-bottom: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    cursor: pointer;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

.programs-process__grid::-webkit-scrollbar {
    display: none;
}

.process-card { 
    display: block; 
}

.programs-process__grid > li {
    flex: 0 0 auto;
    flex-basis: calc((100% - 16px) / 3);
    min-width: 0;
    scroll-snap-align: start;
}

.process-card__image-wrap {
    position: relative;
    overflow: hidden;
    background: var(--grey-light);
}

.process-card__image-wrap img {
    width: 100%;
    height: auto;
    display: block;
    transition: filter 0.25s ease;
}

.process-card:hover .process-card__image-wrap img {
    filter: grayscale(1);
}

@media (max-width: 768px) {
    .programs-process__grid {
        flex-direction: row;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
    }

    .programs-process__grid > li {
        flex-basis: calc(50% - 4px);
        width: auto;
    }

    .process-card__image-wrap {
        height: auto;
    }

    .process-card__image-wrap img {
        width: 100%;
        height: auto;
    }
}

.process-card__info {
    padding: 9px 0 0;
}

.process-card__title {
    font-family: var(--font-en);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 17.5px;
    color: var(--black);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.process-card__speaker {
    font-family: var(--font-en);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 17.5px;
    color: var(--black);
    margin-top: 0.5px; /* 1줄과의 간격 +0.5px */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── Archive header actions (search + shuffle) ─────────────────────────── */

.archive-header__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.archive-header__shuffle {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.archive-header__shuffle svg {
    width: 24px;
    height: 24px;
}

/* ─── Books Featured Slider ──────────────────────────────────────────────── */


/* ── Poster archive section ── */
.programs-poster-archive {
    padding: 18px 0 42px;
}

.programs-archive__grid {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    align-items: start;
}

.program-card { display: block; }

.program-card__image-wrap {
    position: relative;
    aspect-ratio: 1 / 1.18;
    background: var(--black);
    overflow: hidden;
    container-type: inline-size;
}

.program-card__image-wrap img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    transition: filter 0.25s ease;
}

.program-card:hover .program-card__image-wrap img {
    filter: grayscale(1);
}

.program-card__info { display: none; }

.program-card__hover {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.75);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    opacity: 0;
    transition: opacity 0.25s ease;
    padding: 24px;
    text-align: center;
}

.program-card:hover .program-card__hover {
    opacity: 1;
}

.book-card__hover {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.75);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    opacity: 0;
    transition: opacity 0.25s ease;
    padding: 12px;
    text-align: center;
}

.book-card:hover .book-card__hover {
    opacity: 1;
}

.book-card.is-latin .book-card__hover-title {
    font-size: clamp(8.5px, 6cqw, 14.5px);
}

.book-card__hover-title {
    font-family: var(--font-en);
    font-size: clamp(8px, 6cqw, 14px);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.4;
    color: #FAFAFA;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.book-card__hover-author {
    font-family: var(--font-en);
    font-size: clamp(7px, 5cqw, 14px);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.4;
    color: #FAFAFA;
}



.program-card__hover-number {
    font-family: var(--font-en);
    font-size: clamp(11px, 5cqw, 16px);
    font-weight: 500;
    color: #FAFAFA;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.program-card__hover-speaker {
    font-family: var(--font-en);
    font-size: clamp(9.5px, 4.8cqw, 14.5px);
    font-weight: 500;
    color: #FAFAFA;
    line-height: 1.4;
}

.program-card__hover-speaker .speaker-en {
    font-family: var(--font-en);
    font-size: clamp(10.5px, 5.7cqw, 15.5px);
    font-weight: 500;
}

.program-card__hover-date {
    font-family: var(--font-en);
    font-size: clamp(11px, 5cqw, 16px);
    font-weight: 500;
    color: #FAFAFA;
    letter-spacing: 0.01em;
}

.programs-poster-archive .archive-pagination {
    padding-inline: var(--pad);
}

/* ─── Program Detail ─────────────────────────────────────────────────────── */

.single-os-icon {
    max-width: 1024px;
    margin-inline: auto;
    padding: 14px var(--pad) 0;
}

.single-program .page-title-bar {
    padding-top: 32px;
    padding-bottom: 0;
    border-bottom: 0;
}

.single-program .page-title-bar .container,
.single-program .program-hero__grid,
.single-program .program-strip__grid,
.single-program .program-body .container,
.single-program .program-captions .container,
.single-program .program-side-image__inner,
.single-program .program-gallery__grid,
.single-program .program-related__header,
.single-program .program-related__grid {
    max-width: none;
    width: 100%;
    margin-inline: 0;
    padding-inline: 0;
}

.program-hero__lang-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 2px;
    margin-bottom: 0;
    grid-column: 2;
    grid-row: 1;
}

.program-hero__title-wrap {
    grid-column: 1;
    grid-row: 1;
}

.single-program .program-hero {
    margin-top: var(--program-detail-gap);
}

.single-program .program-strip {
    padding-top: var(--program-detail-gap);
}

.single-program .program-hero__grid {
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
}

.single-program .program-strip__grid {
    width: 100%;
    max-width: none;
    margin-inline: 0;
}

.single-program .program-captions {
    border-top: none;
}

.single-program .program-body {
    padding-top: 32px;
}

/* === program-lower: 현장 사진 + 강사 소개 (반응형) === */

.single-program .program-lower {
    padding-top: calc(var(--program-detail-gap) + 2px);
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.single-program .program-lower--photos-only {
    padding-bottom: 0;
}

.single-program .program-lower__bio .program-captions {
    border-top: none;
    padding-top: 0;
    padding-bottom: 0;
}


.program-strip-captions {
    padding: 0;
}

.program-strip-captions__text {
    font-family: var(--font-kr);
    font-size: 13px;
    font-weight: 700;
    line-height: 21px;
}

.program-strip-captions__text.lang-en {
    font-family: var(--font-en);
    font-weight: 500;
}

.program-strip-captions__text p:empty {
    display: none;
}

.program-strip-captions__text p + p {
    margin-top: 8px;
}

@media (min-width: 960px) {
    .single-program .program-lower {
        padding-bottom: 20px;
    }
    .single-program .program-lower--photos-only {
        padding-bottom: 0;
    }
}

.single-program .program-related {
    padding-top: 16px;
    padding-bottom: 42px;
}

.single-program .program-card__hover {
    gap: clamp(6px, 0.8vw, 10px);
    padding: clamp(10px, 1.2vw, 14px);
    overflow: hidden;
}

.single-program .program-card__hover-number,
.single-program .program-card__hover-date {
    font-size: clamp(12px, 5.5cqw, 15px);
    line-height: 1.35;
}

.single-program .program-card__hover-speaker {
    font-size: clamp(11px, 5cqw, 14px);
    line-height: 1.35;
}

.single-program .page-title-bar .container {
    align-items: flex-end;
    margin-inline: 0;
    padding-inline: 0;
    padding-bottom: 8px;
    border-bottom: 0;
    position: relative;
}

.single-program .page-title-bar .container::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: 0.8px solid var(--border);
}



.page-title-bar__actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.shuffle-btn {
    width: 32px;
    height: 32px;
    color: var(--black);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


.program-hero { border-bottom: 0; }

.program-hero__title-kr {
    font-family: var(--font-kr);
    font-size: 23px;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 26px;
}

.program-hero__title-en {
    font-family: var(--font-en);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 26px;
    margin-top: 3px;
}

.program-hero__grid {
    margin-inline: auto;
    padding: 0 var(--pad) 16px;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--grid-gutter);
    position: relative;
}

.program-hero__grid::after {
    content: "";
    position: absolute;
    left: var(--pad);
    right: var(--pad);
    bottom: 0;
    border-bottom: 0.8px solid var(--border);
}

@media (min-width: 1080px) {
    .program-hero__grid {
        grid-template-columns: repeat(10, 1fr);
    }
    .program-hero__image-col { grid-column: 1 / 7; }
    .program-hero__content-col { grid-column: 7 / 11; }
}

.program-hero__image-col {
    position: relative;
    aspect-ratio: 483 / 512;
    overflow: hidden;
    background: var(--black);
}

@media (min-width: 1080px) {
    .program-hero__image-col {
        aspect-ratio: unset;
        height: 512px;
    }
}

.program-hero__image-col img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.program-hero__image-placeholder {
    width: 100%;
    height: 100%;
    background: var(--grey-dark);
}

.program-hero__content-col {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    align-content: start;
    column-gap: 16px;
    min-width: 0;
    padding: 4px 0 0;
}

.program-hero__content-col > :not(.program-hero__lang-row):not(.program-hero__title-wrap) {
    grid-column: 1 / -1;
}

@media (min-width: 1080px) {
    .program-hero__content-col {
        min-height: 512px;
        padding: 48px 0 0;
    }
}

.program-hero__title-wrap {
    margin-bottom: 24px;
}

.program-details {
    display: grid;
    gap: 0;
    margin-bottom: 28px;
    border-top: 0.8px solid var(--border);
}

.program-details__row {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 8px;
    padding: 1px 0 2px;
    border-bottom: 0.8px solid var(--border);
    font-family: var(--font-kr);
    font-size: 12px;
    font-weight: 700;
    line-height: 19px;
}

.program-details__row dt,
.program-details__row dd {
    min-width: 0;
}

.program-details__row dt {
    color: var(--black);
}

.site-main[data-lang="en"] .program-details__row {
    font-family: var(--font-en);
    font-weight: 500;
    font-size: 12px;
    line-height: 19px;
}

.program-hero__description {
    font-family: var(--font-kr);
    font-size: 12px;
    font-weight: 700;
    line-height: 19px;
    margin-bottom: 24px;
}

.program-hero__description.lang-en {
    font-family: var(--font-en);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 18px;
}

.program-hero__description p:empty {
    display: none;
}

.program-hero__description p + p {
    margin-top: 10px;
}

.program-hero__description a,
.program-captions__text a,
.program-body__text a {
    text-decoration: underline;
    text-decoration-thickness: 0.75px;
    text-underline-offset: 2px;
}

.program-hero__cta {
    margin-top: auto;
}

.program-strip {
    padding: 0;
}

.program-strip__counter {
    display: block;
    margin-top: 7px;
    margin-bottom: 5px;
    text-align: left;
    font-family: var(--font-en);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #000000;
}

.program-strip__grid {
    width: calc(100% - (var(--pad) * 2));
    max-width: calc(var(--container-max) - (var(--pad) * 2));
    margin-inline: auto;
    display: flex;
    align-items: stretch;
    height: 540px;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    cursor: pointer;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
}

.program-strip__grid::-webkit-scrollbar { display: none; }

.program-strip__grid.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
}

.program-strip__grid > li {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

.program-strip__cell {
    height: 100%;
    overflow: hidden;
}

.program-strip__cell img {
    height: 100%;
    width: auto;
    display: block;
}

.program-strip__grid--2col {
    height: clamp(300px, 80vw, 540px);
    align-items: stretch;
    overflow-y: hidden;
}

.program-strip__grid--2col > li {
    flex: 0 0 auto;
}

.program-strip__grid--2col .program-strip__cell {
    height: 100%;
    overflow: hidden;
}

.program-strip__grid--2col .program-strip__cell img {
    height: 100%;
    width: auto;
    display: block;
}

.program-strip__grid--3col {
    height: clamp(280px, 75vw, 500px);
    align-items: stretch;
    overflow-y: hidden;
}

.program-strip__grid--3col > li {
    flex: 0 0 auto;
}

.program-strip__grid--3col .program-strip__cell {
    height: 100%;
    overflow: hidden;
}

.program-strip__grid--3col .program-strip__cell img {
    height: 100%;
    width: auto;
    display: block;
}

@media (min-width: 2200px) {
    .program-strip__grid--2col {
        height: clamp(540px, calc(40vw - 340px), 800px);
    }
    .program-strip__grid--3col {
        height: clamp(500px, calc(36vw - 292px), 720px);
    }
}

.program-body {
    padding: 0 0 36px;
}

.program-body__text {
    font-family: var(--font-kr);
    font-size: 12px;
    font-weight: 700;
    line-height: 19px;
}
.program-body__text.lang-en {
    font-family: var(--font-en);
    font-size: 12.5px;
    line-height: 18px;
}

.program-body__text p:empty {
    display: none;
}

.program-body__text p + p {
    margin-top: 16px;
}

.program-captions__text p + p {
    margin-top: 16px;
}

.program-body__text strong {
    font-weight: 500;
}

.program-body__text a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.program-gallery {
    padding: 0 0 48px;
}

.program-gallery__grid {
    margin-inline: auto;
    padding-inline: var(--pad);
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.program-gallery__item {
    aspect-ratio: 320 / 214;
    overflow: hidden;
    background: var(--grey-light);
}

.program-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.program-related {
    padding: 0 0 48px;
}

.program-related__header {
    margin-inline: auto;
    padding-inline: var(--pad);
}

.program-related__label {
    padding: 4px 0 3px;
    border-top: 0.8px solid var(--border);
    border-bottom: 0.8px solid var(--border);
    font-family: var(--font-en);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 29px;
    text-transform: uppercase;
}

.program-related__grid {
    margin: 12px auto 0;
    padding-inline: var(--pad);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.related-card,
.related-card__image {
    display: block;
}

.related-card__image {
    position: relative;
    aspect-ratio: 1 / 1.18;
    overflow: hidden;
    background: var(--black);
    container-type: inline-size;
}

.related-card:hover .book-card__hover {
    opacity: 1;
}

.related-card__image img {
    width: 100%;
    height: 100%;
    padding: 14px;
    object-fit: contain;
    object-position: center;
    transition: filter 0.25s ease;
}

.related-card:hover .related-card__image img {
    filter: grayscale(1);
}

.program-card__fallback,
.related-card__fallback {
    width: 100%;
    aspect-ratio: 1 / 1.18;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-family: var(--font-en);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--white);
}


@media (min-width: 400px) {
    .program-gallery__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .program-gallery__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 768px) {
    .program-related__grid {
        grid-template-columns: repeat(6, 1fr);
    }

    .single-program .program-related__grid .related-card__image {
        min-height: 240px;
    }
}

/* ─── Program Detail — full-width layout ────────────────────────────────── */

body.single-program {
    --programs-pad: 48px;
    --program-detail-gap: var(--grid-gutter);
}

@media (max-width: 768px) {
    body.single-program {
        --programs-pad: 24px;
    }

    .single-program .program-related__grid > li:nth-child(n+3) {
        display: none;
    }
}


body.single-program .site-main {
    padding-inline: var(--programs-pad);
}

body.single-program .single-os-icon {
    max-width: none;
    margin-inline: 0;
    padding-left: 0;
    padding-right: 0;
}

body.single-program .program-hero__grid {
    padding: 0 0 16px;
}

body.single-program .program-hero__grid::after {
    left: 0;
    right: 0;
}

body.single-program .program-body__text,
body.single-program .program-captions__text {
    max-width: 720px;
}

body.single-program .program-hero__description,
body.single-program .program-lower__bio .program-captions__text,
body.single-program .program-lower__bio .program-body__text,
body.single-program .program-strip-captions__text {
    font-size: 12px;
    line-height: 19px;
}

body.single-program .program-hero__description.lang-en,
body.single-program .program-lower__bio .program-captions__text.lang-en,
body.single-program .program-strip-captions__text.lang-en {
    font-size: 12.5px;
    line-height: 18px;
}

body.single-program .program-lower__bio .program-captions__text,
body.single-program .program-lower__bio .program-body__text {
    max-width: none;
}

body.single-program .program-details__row {
    font-size: 12px;
    line-height: 19px;
}

body.single-program .site-main[data-lang="en"] .program-details__row {
    font-size: 12px;
    line-height: 19px;
}

@media (min-width: 768px) {
    body.single-program .program-gallery__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1440px) {
    body.single-program .program-gallery__grid {
        grid-template-columns: repeat(4, 1fr);
    }
    body.single-program .program-related__grid {
        grid-template-columns: repeat(6, 1fr);
    }
    body.single-program .program-hero__image-col {
        height: 640px;
    }
    body.single-program .program-hero__content-col {
        min-height: 640px;
    }

}

@media (min-width: 2200px) {
    body.single-program .program-gallery__grid {
        grid-template-columns: repeat(6, 1fr);
    }
    body.single-program .program-hero__image-col {
        height: 800px;
    }
    body.single-program .program-hero__content-col {
        min-height: 800px;
    }
}

@media (min-width: 783px) {
    body.single-program .site-footer {
        padding-right: 0;
        margin-right: var(--bm-nav-width);
    }

    body.single-program .site-footer::before {
        right: var(--programs-pad);
    }
}

body.single-program .site-footer__inner {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: var(--programs-pad);
    padding-right: var(--programs-pad);
}

/* ─── Single nav (prev / next) ───────────────────────────────────────────── */

.single-nav { border-bottom: 0.8px solid var(--border); }

.single-nav__inner {
    max-width: var(--container-max);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.single-nav__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px var(--pad);
    border-right: 0.8px solid var(--border);
    transition: background 0.15s;
}

.single-nav__link:last-child { border-right: none; }
.single-nav__link:hover { background: #FAFAFA; }
.single-nav__link--next { justify-content: flex-end; text-align: right; }

.single-nav__arrow {
    font-size: 14px;
    color: var(--muted);
    transition: color 0.15s;
    flex-shrink: 0;
}

.single-nav__link:hover .single-nav__arrow { color: var(--black); }

.single-nav__label {
    display: block;
    font-family: var(--font-en);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--muted);
    text-transform: uppercase;
    line-height: 17px;
}

.single-nav__title {
    display: block;
    font-family: var(--font-en);
    font-size: 13px;
    font-weight: 500;
    line-height: 21px;
    margin-top: 2px;
}

/* ─── Pagination ─────────────────────────────────────────────────────────── */
/*
  Figma: "1 2 3 4 5 6 … 14" — 13px, weight 500, opacity 0.4
*/

.archive-pagination {
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.archive-pagination .nav-links {
    display: flex;
    align-items: center;
    gap: 5px;
}

.archive-pagination .page-numbers.prev { margin-right: 1px; }
.archive-pagination .page-numbers.next { margin-left: 1px; }

.archive-pagination .page-numbers {
    font-family: var(--font-en);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    color: var(--muted);
    transition: color 0.15s;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.archive-pagination .page-numbers:hover { color: var(--black); }

.archive-pagination .page-numbers.current { color: var(--black); }

.pagination-arrow {
    display: inline-block;
    vertical-align: middle;
    width: 12px;  /* VIEW ALL 화살표와 동일 (실효 stroke 1.4px) */
    height: 12px;
}

.pagination-arrow--prev {
    transform: scaleX(-1);
}

/* ─── 404 ────────────────────────────────────────────────────────────────── */

.error-404 {
    text-align: center;
    padding-block: 80px;
}

.error-404__title {
    font-family: var(--font-en);
    font-size: 72px;
    font-weight: 500;
    letter-spacing: -0.05em;
    color: var(--grey-dark);
    line-height: 1;
}

.error-404__message {
    font-family: var(--font-kr);
    font-size: 12px;
    font-weight: 700;
    line-height: 22px;
    color: var(--muted);
    margin-top: 16px;
}

.error-404 .btn { margin-top: 24px; }

/* ─── No results ─────────────────────────────────────────────────────────── */

.no-results {
    padding-block: 60px;
    text-align: center;
    font-family: var(--font-kr);
    font-size: 12px;
    font-weight: 700;
    line-height: 22px;
    color: var(--muted);
}

@media (max-width: 400px) {
    .site-footer__grid {
        grid-template-columns: 1fr;
    }

    .site-footer__col--newsletter { grid-column: span 1; }
    .site-footer__newsletter-row { width: 100%; }
}
@media (max-width: 768px) {
    .archive-header__inner,
    .programs-archive__grid {
        width: 100%;
        padding-inline: 14px;
    }


    .archive-header__inner::after {
        left: 14px;
        right: 14px;
    }

    .programs-archive__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    .process-card__title {
        font-size: 13px;
        line-height: 16.5px;
    }
    .process-card__speaker {
        font-size: 10.5px;
        line-height: 16.5px;
        margin-top: 0.5px; /* 1줄과의 간격 +0.5px */
    }

    .archive-title {
        font-size: 24px;
        line-height: 1;
    }

    .site-footer__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px clamp(22px, 5vw, 40px);
    }

    .site-footer__inner {
        margin-right: 0;
        padding: 20px clamp(24px, 6vw, 48px) clamp(72px, 10vw, 104px);
    }

    .site-footer__inner::before {
        margin-bottom: 28px;
    }

    /* 순서: KR → EN → 주소 → Copyright → Newsletter */
    .site-footer__col--kr        { order: 1; }
    .site-footer__col--en        { order: 2; }
    .site-footer__col--address   { order: 3; }
    .site-footer__col--copyright { order: 4; text-align: left; }
    .site-footer__col--newsletter { order: 5; grid-column: span 2; }

    /* CC 이름 숨김 */
    .site-footer__name { display: none; }

    /* Newsletter 라벨 숨김 */
    .site-footer__newsletter-label { display: none; }

    .site-footer__col--en p {
        font-size: 12.5px;
        line-height: 18px;
    }

    /* Newsletter 입력창 전체 너비 */
    .site-footer__newsletter-row {
        width: 100%;
    }

    .site-footer__newsletter-row input[type="email"] {
        padding-inline: 0;
    }

    .site-footer__newsletter-row button {
        padding: 0 4px;
        font-weight: 500;
    }

    .site-footer__input-placeholder {
        left: 0;
        color: var(--grey-dark);
    }

    .site-footer__input-placeholder--desktop {
        display: none;
    }

    .site-footer__input-placeholder--mobile {
        display: block;
    }

}

/* ─── Program Side Image ─────────────────────────────────────────────────── */

.program-side-image {
    padding: 0 0 24px;
}

.program-side-image__inner {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--pad);
}

.program-side-image__img {
    display: block;
    width: 100%;
    height: auto;
}

/* ─── Program Captions ───────────────────────────────────────────────────── */

.program-captions {
    padding: 20px 0 24px;
    border-top: 0.8px solid var(--border);
}

.program-captions__text {
    font-family: var(--font-kr);
    font-size: 12px;
    font-weight: 700;
    line-height: 19px;
}

.program-captions__text.lang-en {
    font-family: var(--font-en);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 18px;
}

/* ─── Page transition ────────────────────────────────────────────────────── */

.site-main {
    flex: 1 0 auto;
}

@keyframes bmStripEnter {
    from { opacity: 0; transform: translateX(18px); }
    to   { opacity: 1; transform: translateX(0); }
}

@media (max-width: 768px) {
    .site-main,
    .site-footer {
        padding-right: 0;
    }

    .site-main {
        box-shadow: none;
    }
}

/* ─── Small Window Bookmark Stack Override ───────────────────────────────── */

@media (max-width: 768px) {
    body {
        --bm-stack-strip: 28px;
        --bm-stack-step: 20px;
    }

    .bookmarks {
        top: 0;
        right: 0;
        bottom: auto;
        left: 0;
        width: 100%;
        height: calc(var(--bm-stack-strip) + (var(--bm-stack-step) * 4));
        z-index: 100001;
        display: block !important;
        background: transparent;
        border: 0;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        pointer-events: auto;
        overflow: visible;
    }

    body.admin-bar .bookmarks {
        top: 46px;
    }


    .bm,
    .bm:nth-of-type(1),
    .bm:nth-of-type(2),
    .bm:nth-of-type(3),
    .bm:nth-of-type(4),
    .bm:nth-of-type(5),
    .bm:nth-of-type(6) {
        position: absolute;
        left: 0;
        right: 0;
        bottom: auto;
        width: 100%;
        height: var(--bm-stack-strip);
        flex: none;
        display: flex;
        min-width: 0;
        justify-content: flex-start;
        border-bottom: 0.5px solid rgba(0,0,0,0.08);
        pointer-events: auto;
    }

    .bm:nth-of-type(1) { top: calc(var(--bm-stack-step) * 4); z-index: 15; left: 0; }
    .bm:nth-of-type(2) { top: calc(var(--bm-stack-step) * 3); z-index: 8;  left: 0; }
    .bm:nth-of-type(3) { top: calc(var(--bm-stack-step) * 2); z-index: 6;  left: 0; }
    .bm:nth-of-type(4) { top: var(--bm-stack-step);           z-index: 4;  left: 0; }
    .bm:nth-of-type(5) { top: 0;                              z-index: 2;  left: 0; }

    /* Staircase dark strip: hidden in mobile stack */
    .bm::before { display: none; }

    .bm.active {
        flex: none;
    }

    .bm-gap {
        display: none;
    }

    .bm-strip,
    .bm:hover .bm-strip,
    .bm.active .bm-strip {
        width: 100% !important;
        height: 100%;
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 0 0 0 18px;
        border-radius: 0;
        pointer-events: auto;
        background: rgba(255,255,255,0.72);
        -webkit-backdrop-filter: blur(14px) saturate(1.3);
        backdrop-filter: blur(14px) saturate(1.3);
    }

    .bm-strip::after,
    .bm.active .bm-strip::after {
        display: none;
        background: none;
    }

    .bm-strip::before,
    .bm.active .bm-strip::before {
        width: 0;
    }

    .bm-text {
        writing-mode: horizontal-tb !important;
        transform: none !important;
        text-orientation: mixed !important;
        overflow: visible;
        max-width: none;
        line-height: 1;
        text-overflow: clip;
    }

    .bm.active .bm-text {
        color: var(--black);
    }
    .bm:hover:not(.active) .bm-text {
        color: #000000;
    }

    .site-main {
        margin-right: 0;
        padding-top: calc(var(--bm-stack-strip) + (var(--bm-stack-step) * 4) + 12px);
        padding-bottom: 0;
    }

    .single-os-icon {
        padding-top: 8px;
    }

    .programs-stage {
        top: calc(var(--bm-stack-strip) + (var(--bm-stack-step) * 4) + 12px);
        right: 0;
        bottom: 0;
        left: 0;
    }
}

/* ─── Nav: mobile <768px — horizontal folder tabs at top ─────────────────── */
@media (max-width: 768px) {
    body {
        --bm-nav-width: 0px;
        --htab-h:       32px;   /* bar + tab height */
        --htab-overlap: 8px;    /* horizontal overlap between tabs */
    }

    .bookmarks {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        margin-top: 28px !important;
        width: 100% !important;
        height: var(--htab-h) !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        overflow: visible !important;
        pointer-events: auto !important;
        z-index: 100001 !important;
        background: var(--black) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        clip-path: inset(-80px -20px 0 -20px) !important;
        padding-top: 0 !important;   /* 데스크탑 세로 탭의 padding-top 누수 차단 */
    }

    .bookmarks::before {
        content: '' !important;
        display: block !important;
        position: absolute !important;
        top: -80px !important;
        left: 0 !important;
        right: 0 !important;
        height: 80px !important;
        background: var(--black) !important;
        pointer-events: none !important;
    }
    .bookmarks::after { display: none !important; }
    /* White underlay pinned to the nav bottom, sitting BEHIND the tab strip.
       During the tap/press transition the strip's animated transform/height/
       clip-path can momentarily desync (compositor vs main thread) so the
       strip's bottom edge briefly rises above the nav bottom, exposing the
       black .bookmarks background below the tab. This stationary white box
       (bottom:0, fixed height) always covers the tab body region down to the
       nav bottom, so no black can leak below the tab mid-animation. It starts
       at the strip's resting top, so the intended black band ABOVE the tab is
       untouched and no white line appears between band and tab. */
    .bm::before {
        content: '' !important;
        display: block !important;
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: 0 !important;
        height: 28px !important;               /* resting tab-top (~4px) → nav bottom (32px) */
        background: var(--bg, #FAFAFA) !important;
        border-radius: 2px 2px 0 0 !important;
        pointer-events: none !important;
        z-index: 0 !important;                 /* above black .bookmarks, below the strip */
        transition: none !important;
    }

    /* Each tab: content-width, overlapping via negative right margin */
    .bm,
    .bm:nth-of-type(1),
    .bm:nth-of-type(2),
    .bm:nth-of-type(3),
    .bm:nth-of-type(4),
    .bm:nth-of-type(5),
    .bm:nth-of-type(6) {
        position: relative !important;
        flex: 0 0 auto !important;
        width: auto !important;
        height: var(--htab-h) !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        bottom: auto !important;
        margin-right: calc(-1 * var(--htab-overlap)) !important;
        margin-top: 0 !important;
        display: flex !important;
        pointer-events: auto !important;
        border-bottom: none !important;
    }

    /* Leftmost tab on top (mirrors desktop: upper tab has higher z-index) */
    .bm--home     { order: 0 !important; z-index: 5 !important; }
    .bm--books    { order: 2 !important; z-index: 3 !important; }
    .bm--programs { order: 1 !important; z-index: 4 !important; }
    .bm--articles { order: 3 !important; z-index: 2 !important; }
    .bm--about    { order: 4 !important; z-index: 1 !important; }
    .bm--store    { order: 5 !important; z-index: 0 !important; }


    .bm-gap { display: none !important; }

    /* PROGRAMS·BOOKS 탭: 좌 12.5px / 우 9.5px */
    .bm--programs .bm-strip,
    .bm--books .bm-strip { padding: 0 8px 0 11px !important; }

    /* Strip: white tab body, rounded top corners */
    .bm-strip {
        position: relative !important;
        inset: auto !important;
        flex: 1 !important;
        width: auto !important;
        height: 100% !important;
        padding: 0 8px 0 11px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        background: var(--bg, #FAFAFA) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        border-radius: 2px 2px 0 0 !important;
        border-top: 0.5px solid rgba(0,0,0,0.08) !important;
        border-left: 0.5px solid rgba(0,0,0,0.08) !important;
        border-right: 0.5px solid rgba(0,0,0,0.08) !important;
        box-shadow: 4px 0 6px -1px rgba(0,0,0,0.10) !important;
        clip-path: inset(-20px -20px 4px -20px) !important;
        transition:
            transform var(--bm-duration) var(--bm-ease),
            height var(--bm-duration) var(--bm-ease),
            clip-path var(--bm-duration) var(--bm-ease) !important;
        transform: translateY(4px) !important;
    }

    /* Active: protrudes upward, connects to page content */
    .bm.active .bm-strip {
        transform: translateY(-4px) !important;
        height: calc(100% + 4px) !important;
        background: var(--bg, #FAFAFA) !important;
        box-shadow: 4px 0 8px -1px rgba(0,0,0,0.12) !important;
        clip-path: inset(-20px -20px 0 -20px) !important;
    }

    .bm.active:hover .bm-strip,
    .bm.active:focus-visible .bm-strip {
        transform: translateY(-4px) !important;
        height: calc(100% + 4px) !important;
        box-shadow: 4px 0 8px -1px rgba(0,0,0,0.12) !important;
        clip-path: inset(-20px -20px 0 -20px) !important;
    }

    /* 호버 판정 안정화: 움직이는 탭 몸체는 판정에서 제외, 고정된 .bm 박스가 판정 담당 */
    .bm-strip { pointer-events: none !important; }

    /* Hover: active와 동일한 효과 (8px 상승 + 높이 연장) */
    .bm:not(.active):hover .bm-strip,
    .bm:not(.active):focus-visible .bm-strip {
        background: var(--bg, #FAFAFA) !important;
        transform: translateY(-4px) !important;
        height: calc(100% + 4px) !important;
        box-shadow: 4px 0 8px -1px rgba(0,0,0,0.12) !important;
        clip-path: inset(-20px -20px 0 -20px) !important;
    }


    .bm-text {
        writing-mode: horizontal-tb !important;
        font-family: var(--font-en) !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        letter-spacing: -0.01em !important;
        transform: none !important;
        white-space: nowrap !important;
        color: #000000 !important;
        text-transform: uppercase !important;
    }

    .bm.active .bm-text {
        color: #000000 !important;
    }
    .bm:not(.active):hover .bm-text,
    .bm:not(.active):focus-visible .bm-text {
        color: #000000 !important;
    }

    body.admin-bar .bookmarks { top: 46px !important; }

    .site-main {
        margin-right: 0 !important;
        padding-top: 12px !important;
        margin-top: 0 !important;
    }

    .programs-stage {
        right: 0 !important;
        top: var(--htab-h) !important;
    }
}

/* ─── Books Cover Archive ───────────────────────────────────────────────── */

.books-search-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 필터 바 맨 우측 검색: 평소엔 버튼만 보이고,
   호버/클릭 시 입력창이 왼쪽으로 열린다 (필터 드롭다운과 같은 0.34s ease-out) */
.books-search-form--bar {
    margin-left: auto;
    flex: 0 1 auto;      /* 공간이 모자라면 검색창이 줄어들며 1열 유지 */
    min-width: 0;
    gap: 2px;
}

.books-search-form--bar .books-search-input {
    transform: none;
    flex: 0 1 auto;
    box-sizing: border-box;
    width: 0;
    min-width: 0;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 2px;   /* 다른 버튼들과 동일한 라운드 */
    /* 드롭다운 패널과 동일한 유리 재질 */
    background: color-mix(in srgb, var(--grey-middle) 70%, transparent);
    backdrop-filter: blur(36px) saturate(1.5);
    -webkit-backdrop-filter: blur(36px) saturate(1.5);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    /* 좌측 버튼(필터 트리거)과 동일한 타이포 */
    font-family: var(--font-en);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    opacity: 0;
    color: transparent;   /* 닫힘: 글자 숨김 */
    transition:
        width 0.5s cubic-bezier(0.65, 0, 0.35, 1),
        padding 0.5s cubic-bezier(0.65, 0, 0.35, 1),
        opacity 0.12s ease,
        color 0.15s ease;
}

.books-search-form--bar:hover .books-search-input,
.books-search-form--bar:focus-within .books-search-input,
.books-search-form--bar.is-open .books-search-input {
    /* 열림 폭 = 피처드 카드 1장 너비의 1/2 (모든 브레이크포인트에서 자동 계산)
       카드 폭 = (콘텐츠 폭 + gap) / n - gap,
       콘텐츠 폭 = 100vw - 우측 nav - 좌우 패딩 */
    width: calc(
        (
            (100vw - var(--bm-nav-width, 0px) - 2 * var(--programs-pad, 48px) + var(--bk-gap))
            / var(--bk-n) - var(--bk-gap)
        ) / 2
    );
    padding: 0 10px;
    opacity: 1;
    color: var(--black);
    /* 창이 먼저 열리고(강한 ease-in-out), 글자는 살며시 뒤따라 등장 */
    transition:
        width 0.5s cubic-bezier(0.65, 0, 0.35, 1),
        padding 0.5s cubic-bezier(0.65, 0, 0.35, 1),
        opacity 0.12s ease,
        color 0.4s ease 0.32s;
}

.books-search-form--bar .archive-header__search {
    flex: 0 0 auto;
    width: 22px;               /* 그리드/리스트 토글(22px)과 동일한 정방형 */
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--black);
    border-radius: 2px;        /* 필터 버튼들과 동일한 라운드 */
    cursor: pointer;
    transition: background 0.2s ease;
}

/* 호버/열림 시: 검색창·토글과 동일한 단색 회색 버튼 + 검은 아이콘 */
.books-search-form--bar:hover .archive-header__search,
.books-search-form--bar:focus-within .archive-header__search,
.books-search-form--bar.is-open .archive-header__search {
    /* 드롭다운 패널과 동일한 유리 재질 */
    background: color-mix(in srgb, var(--grey-middle) 70%, transparent);
    backdrop-filter: blur(36px) saturate(1.5);
    -webkit-backdrop-filter: blur(36px) saturate(1.5);
    box-shadow: none;
}

.books-search-form--bar:hover .archive-header__search img,
.books-search-form--bar:focus-within .archive-header__search img,
.books-search-form--bar.is-open .archive-header__search img {
    filter: none;
}

.books-search-form--bar .archive-header__search img {
    width: 13px;
    height: 13px;
    filter: invert(1);
    display: block;
    transform: translateX(0.5px);
}

/* 검색창 열린 상태에서 아이콘 호버 → 닫기(X)로 크로스페이드 (같은 위치에 겹침) */
.books-search-form--bar .archive-header__search {
    position: relative;
}

.books-search-form--bar .archive-header__search .icon-search-img {
    transition: opacity 0.15s ease;
}

.books-search-form--bar .archive-header__search .icon-close-img {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    transform: translate(calc(-50% + 0.5px), -50%);
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

/* 열린 상태에서만 호버 시 X로 전환 */
.books-search-form--bar.is-open .archive-header__search:hover .icon-search-img {
    opacity: 0;
}

.books-search-form--bar.is-open .archive-header__search:hover .icon-close-img {
    opacity: 1;
}

/* X 클릭 → 열림 애니메이션 역재생 (호버 중이어도 강제로 접힘) */
.books-search-form--bar.is-closing .books-search-input {
    width: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    color: transparent !important;
    transition:
        width 0.5s cubic-bezier(0.65, 0, 0.35, 1),
        padding 0.5s cubic-bezier(0.65, 0, 0.35, 1),
        opacity 0.12s ease 0.3s,
        color 0.1s ease !important;
}

.books-search-form--bar.is-closing .archive-header__search {
    background: var(--black) !important;
}

.books-search-form--bar.is-closing .archive-header__search img {
    filter: invert(1) !important;
}

.books-search-form--bar.is-closing .archive-header__search .icon-close-img {
    opacity: 0 !important;
}

.books-search-form--bar.is-closing .archive-header__search .icon-search-img {
    opacity: 1 !important;
}

.books-search-form--bar .books-search-input::placeholder {
    color: transparent;
    transition: color 0.15s ease;
}

/* 열림: 플레이스홀더도 창이 열린 뒤 살며시 등장 (아이콘들과 같은 검정 40%) */
.books-search-form--bar:hover .books-search-input::placeholder,
.books-search-form--bar:focus-within .books-search-input::placeholder,
.books-search-form--bar.is-open .books-search-input::placeholder {
    color: rgba(0, 0, 0, 0.4);
    transition: color 0.4s ease 0.32s;
}

/* 검색어가 있는 상태로 페이지가 로드되면 열림 애니메이션 없이 바로 고정 */
.books-search-form--bar.no-anim .books-search-input {
    transition: none;
}

.books-search-input {
    background: transparent;
    border: none;
    border-radius: 0;
    outline: none;
    font-family: var(--font-en);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--black);
    letter-spacing: 0;
    line-height: 1;
    padding: 0;
    width: min(260px, 18vw);
    min-width: 112px;
    transform: translateY(7px);
}

.books-search-input::placeholder {
    color: var(--grey-dark);
    font-family: var(--font-en);
}

.post-type-archive-book .archive-header__actions {
    gap: 48px;
}

.post-type-archive-book .archive-header {
    border-bottom: 0;
}

.post-type-archive-book .archive-header__inner {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
}

.post-type-archive-book .archive-header__inner::after {
    left: 0;
    right: 0;
    border-bottom-color: var(--border);
}

.books-archive-section--cover-wall {
    padding: 18px 0 48px;
}

/* ─── Books View Toggle ──────────────────────────────────────────────────────── */

.books-view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 3px;   /* 아이콘 그림 기준 실제 보이는 간격 약 8px */
    padding: 2px;
    height: 22px;
    /* 드롭다운 패널과 동일한 유리 재질 */
    background: color-mix(in srgb, var(--grey-middle) 70%, transparent);
    backdrop-filter: blur(36px) saturate(1.5);
    -webkit-backdrop-filter: blur(36px) saturate(1.5);
    border-radius: 2px;
    position: relative;
}

.books-view-indicator {
    position: absolute;
    top: 2px;
    height: calc(100% - 4px);
    border-radius: 2px;
    background: var(--black);
    pointer-events: none;
    z-index: 0;
}

.books-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    aspect-ratio: 1;
    padding: 0;
    background: transparent;
    border: none;
    clip-path: circle(50%);
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.books-view-btn.is-active {
    background: transparent;
}

.books-view-btn img {
    width: 10.5px; /* 서치 아이콘 시각 높이에 맞춤 */
    height: 10.5px;
    filter: none;
    opacity: 0.4;
    transition: opacity 0.12s ease, filter 0.12s ease;
}

.books-view-btn.is-active img {
    filter: invert(1);
    opacity: 1;
}

.books-view-btn:hover img {
    filter: invert(1);
    opacity: 1;
}

.books-pill-option__count {
    color: var(--grey-dark);
    transition: color 0.12s ease;
}

.books-pill-option.is-active .books-pill-option__count {
    color: var(--green);
}

.books-pill-option:hover .books-pill-option__count {
    color: var(--green);
}

.books-pill-trigger__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.books-pill-trigger__icon .icon-minus { display: none; }

.books-pill-trigger[aria-expanded="true"] .books-pill-trigger__icon .icon-plus  { display: none; }
.books-pill-trigger[aria-expanded="true"] .books-pill-trigger__icon .icon-minus { display: block; }

.books-pill-trigger[aria-expanded="true"] .books-pill-trigger__icon img,
.books-pill-trigger.has-filter .books-pill-trigger__icon img {
    filter: invert(1);
}

/* ─── Books shared grid token ───────────────────────────────────────────────── */
/* --bk-n(카드 수)과 --bk-gap(간격)만 브레이크포인트마다 선언.
   --bk-slot은 파생 공식 slot = (100% + gap) / n 으로 자동 계산된다.
   100%는 선언 시점이 아니라 사용 지점(li · th)의 containing block 폭으로 해석되므로
   피처드 스트립(flex)과 테이블 컬럼 경계가 항상 동일한 그리드 트랙을 공유한다. */

/* 모바일 기본 (≤768px) */
.site-main { --bk-n: 2; --bk-gap: 6px; }

@media (min-width: 769px) {
    .site-main { --bk-n: 2; --bk-gap: 8px; }
}
@media (min-width: 1440px) {
    .site-main { --bk-n: 3; }                   /* --bk-gap 8px 유지 */
}
@media (min-width: 2200px) {
    .site-main { --bk-n: 4; }                   /* --bk-gap 8px 유지 */
}

/* 파생 slot — 100%는 사용 지점에서 해석됨 */
.site-main { --bk-slot: calc((100% + var(--bk-gap)) / var(--bk-n)); }

/* ─── Books List View ────────────────────────────────────────────────────────── */

.books-list {
    width: 100%;
}

/* table-layout: fixed는 calc(% + px) 컬럼 폭을 정확히 반영하지 않고
   남는 공간을 전체 컬럼에 재분배하므로 카드 경계와 미세하게 어긋난다.
   → 행 자체를 CSS grid로 배치해 컬럼 폭을 트랙으로 정확히 고정한다.

   컬럼 스냅 규칙 (모든 브레이크포인트 공통):
   - TITLE     → 카드 1 왼쪽 (0)
   - AUTHOR    → 카드 2 왼쪽 (1 × --bk-slot)
   - PUBLISHER → 카드 3 왼쪽 (2 × --bk-slot, --bk-n ≥ 3)
   - PAGES     → 카드 4 왼쪽 (3 × --bk-slot, --bk-n = 4)
   - 나머지 컬럼은 마지막 카드 구역(--bk-rest) 안에서 비율 분할 */

.books-list__table,
.books-list__table thead,
.books-list__table tbody {
    display: block;
    width: 100%;
    border: 0;
}

.books-list__table tr {
    display: grid;
    grid-template-columns: var(--bk-cols);
    align-items: center;
    border: 0;
}

.books-list__th,
.books-list__td {
    display: block;
    min-width: 0;
}

.books-list__th {
    font-family: var(--font-en);
    font-size: 12px;
    font-weight: 500;
    line-height: 18.5px;
    color: var(--muted);
    text-align: left;
    text-transform: uppercase;
    padding: 6px 12px 6px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 0;
}

.books-list__th:nth-child(6) { text-align: left; }

/* 기본 1201–1439px (2-card, 6컬럼): Title = 카드 1, Author부터 카드 2 구역 분할 */
.books-list {
    --bk-rest: calc(100% - var(--bk-slot));
    --bk-cols:
        var(--bk-slot)
        calc(var(--bk-rest) * 0.30)
        calc(var(--bk-rest) * 0.26)
        calc(var(--bk-rest) * 0.09)
        calc(var(--bk-rest) * 0.22)
        calc(var(--bk-rest) * 0.13);
}

/* ≥1440px (3-card): Title = 카드 1, Author = 카드 2, Publisher부터 카드 3 구역 분할 */
@media (min-width: 1440px) {
    .books-list {
        --bk-rest: calc(100% - 2 * var(--bk-slot));
        --bk-cols:
            var(--bk-slot)
            var(--bk-slot)
            calc(var(--bk-rest) * 0.34)
            calc(var(--bk-rest) * 0.12)
            calc(var(--bk-rest) * 0.36)
            calc(var(--bk-rest) * 0.18);
    }
}

/* ≥2200px (4-card): Title·Author·Publisher = 카드 1·2·3, Pages부터 카드 4 구역 분할 */
@media (min-width: 2200px) {
    .books-list {
        --bk-rest: calc(100% - 3 * var(--bk-slot));
        --bk-cols:
            var(--bk-slot)
            var(--bk-slot)
            var(--bk-slot)
            calc(var(--bk-rest) * 0.16)
            calc(var(--bk-rest) * 0.60)
            calc(var(--bk-rest) * 0.24);
    }
}

/* ≤1200px (2-card, 4컬럼): Pages·Specs 숨김. Author = 카드 2 */
@media (max-width: 1200px) {
    .books-list__th:nth-child(4),
    .books-list__th:nth-child(5),
    .books-list__td:nth-child(4),
    .books-list__td:nth-child(5) { display: none; }

    .books-list {
        --bk-cols:
            var(--bk-slot)
            calc(var(--bk-rest) * 0.42)
            calc(var(--bk-rest) * 0.42)
            calc(var(--bk-rest) * 0.16);
    }
}

/* ≤768px (2-card, 3컬럼): Publisher 숨김. Author = 카드 2 */
@media (max-width: 768px) {
    .books-list__th:nth-child(3),
    .books-list__td:nth-child(3) { display: none; }

    .books-list {
        --bk-cols:
            var(--bk-slot)
            calc(var(--bk-rest) * 0.78)
            calc(var(--bk-rest) * 0.22);
    }
}

/* ≤480px (2-card, 2컬럼): Year 숨김. Author = 카드 2 */
@media (max-width: 480px) {
    .books-list__th:nth-child(6),
    .books-list__td:nth-child(6) { display: none; }

    .books-list {
        --bk-cols: var(--bk-slot) var(--bk-rest);
    }
}

.books-list__td:last-child { text-align: left; }

.books-list__row {
    cursor: pointer;
    transition: background 0.1s ease;
}

.books-list__row:hover {
    /* 드롭다운 패널과 동일한 유리 재질 */
    background: color-mix(in srgb, var(--grey-middle) 70%, transparent);
    backdrop-filter: blur(36px) saturate(1.5);
    -webkit-backdrop-filter: blur(36px) saturate(1.5);
}

.books-list__td {
    /* 숫자·영문·한글 폰트 자동 분담 (합성 글꼴) */
    font-family: var(--font-en);
    font-size: 12px;
    font-weight: 500;
    line-height: 19px;
    color: var(--black);
    padding: 1.5px 12px 1.5px 0;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.books-list__td:nth-child(1) {
    font-family: var(--font-en);
}
.books-list__td:nth-child(6) {
    font-family: var(--font-en);
}


/* ─── Books List Hover Preview ───────────────────────────────────────────────── */

.books-list__hover-preview {
    position: fixed;
    left: 0;
    top: 0;
    width: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 200;
}

.books-list__hover-preview.is-visible {
    opacity: 1;
}

.books-list__hover-preview img {
    width: 100%;
    height: auto;
    display: block;
}

/* ≤768px 에서는 JS가 AUTHOR+YEAR 영역을 자동 계산하여 표시 */


/* ─── Books Pill Filter Bar ──────────────────────────────────────────────────── */

.books-pill-filter-bar {
    padding: 8px 0 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
}

.books-pill-filter-group {
    position: relative;
}

.books-pill-triggers-row {
    display: flex;
    flex-wrap: nowrap;   /* 가장 작은 창에서도 1열 유지 (검색은 남는 폭만큼 축소) */
    gap: 4px;
    align-items: center;
    position: relative;
}

.books-pill-hover-bg {
    position: absolute;
    top: 0;
    height: 100%;
    border-radius: 2px;
    background: var(--grey-middle);
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.12s ease;
}

.books-pill-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    background: transparent;
    border: none;
    border-radius: 2px;
    position: relative;
    z-index: 1;
    font-family: var(--font-en);
    font-size: 12px;
    font-weight: 500;
    color: var(--black);
    cursor: pointer;
    line-height: 1;
    text-transform: uppercase;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.books-pill-trigger:hover {
    background: transparent;
    color: var(--black);
}

.books-pill-trigger[aria-expanded="true"],
.books-pill-trigger.has-filter {
    background: var(--black);
    color: var(--white);
}

.books-pill-trigger__label {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}

.books-pill-trigger__sel {
    font-size: 0.65em;
    opacity: 0.55;
    letter-spacing: 0.03em;
}


.books-pill-panel {
    position: absolute;
    top: 100%;
    left: 0;
    width: fit-content;
    min-width: 100%;
    z-index: 200;
    margin-top: 2px;
    padding: 0;
    background: color-mix(in srgb, var(--grey-middle) 80%, transparent);
    backdrop-filter: blur(40px) saturate(1.5);
    -webkit-backdrop-filter: blur(40px) saturate(1.5);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border-radius: 2px;
    overflow: hidden;
    height: 0;
    pointer-events: none;
    transition: height 0.34s ease-out;
}

.books-pill-panel.is-open {
    pointer-events: auto;
}

.books-pill-options {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.books-pill-option-bg {
    position: absolute;
    border-radius: 2px;
    background: var(--grey-dark);
    mix-blend-mode: multiply;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s ease;
    z-index: 0;
}

.books-pill-option {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px 14px;
    background: none;
    border-radius: 2px;
    font-family: var(--font-en);
    font-size: 12px;
    font-weight: 500;
    color: var(--black);
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
    width: 100%;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.25s ease, transform 0.25s ease, color 0.12s ease;
}

.books-pill-option.item-visible {
    opacity: 1;
    transform: translateY(0);
}

.books-pill-option:hover {
    color: var(--black);
}

.books-pill-option.is-active {
    background: var(--grey-dark);
    color: var(--white);
}

.books-pill-count {
    font-size: 10.5px;
    opacity: 0.7;
    margin-left: 1px;
    display: none;
}

.books-pill-option.is-active .books-pill-count {
    display: inline;
}

@media (prefers-reduced-motion: reduce) {
    .books-pill-panel  { transition: none !important; }
    .books-pill-option { transition: none !important; }
}



@media (max-width: 400px) {
    .books-pill-filter-bar {
        padding: 9px 0 8px;
        gap: 7px;
    }
    .books-pill-triggers-row,
    .books-pill-options {
        gap: 4px;
    }
    .books-pill-trigger {
        font-size: 11px;
        padding: 4px 8px;
    }
}


.books-process {
    padding: 0;
    margin-bottom: 0;
}

.books-process::after {
    content: "";
    display: block;
    width: 100%;
    margin: 16px 0 0;
    border-bottom: 0.8px solid var(--border);
}

.books-process__grid {
    width: 100%;
    padding-inline: 0;
    display: flex;
    gap: var(--bk-gap);
    margin-bottom: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    cursor: pointer;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

.books-process__grid::-webkit-scrollbar {
    display: none;
}

.books-process-card {
    display: block;
}

.books-process__grid > li {
    flex: 0 0 calc(var(--bk-slot) - var(--bk-gap));
    min-width: 0;
    scroll-snap-align: start;
}

.books-process-card__image-wrap {
    position: relative;
    overflow: hidden;
    background: var(--grey-light);
}

.books-process-card__image-wrap img {
    width: 100%;
    height: auto;
    display: block;
    transition: filter 0.25s ease;
}

.books-process-card:hover .books-process-card__image-wrap img {
    filter: grayscale(1);
}

@media (max-width: 768px) {
    .books-process__grid {
        /* gap: var(--bk-gap) → 6px, flex-basis: calc(var(--bk-slot) - var(--bk-gap)) → 50%-3px
           모두 --bk-n:2 / --bk-gap:6px 에서 자동 파생되므로 별도 선언 불필요 */
        scroll-snap-type: x mandatory;
    }

    .books-process-card__image-wrap {
        height: auto;
    }

    .books-process-card__image-wrap img {
        width: 100%;
        height: auto;
    }

}

.books-process-card__info {
    padding: 9px 0 0;
}

.books-process-card.is-latin .books-process-card__title {
    font-size: 15px; /* 제목 +1px 규칙 */
}

.books-process-card__title {
    font-family: var(--font-en);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 17.5px;
    color: var(--black);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}



.books-process-card__author {
    font-family: var(--font-en);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 17.5px;
    color: var(--black);
    margin-top: 0.5px; /* 1줄과의 간격 +0.5px */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 768px) {
    .books-process-card__title {
        font-size: 13px;
        line-height: 16.5px;
    }
    .books-process-card.is-latin .books-process-card__title {
        font-size: 14px; /* 제목 +1px 규칙 */
    }
    .books-process-card__author {
        font-size: 10.5px;
        line-height: 16.5px;
        margin-top: 0.5px; /* 1줄과의 간격 +0.5px */
    }

}

@media (min-width: 769px) and (max-width: 1439px) {
    .books-process-card__title {
        font-size: 13.5px;
        line-height: 17px;
    }
    .books-process-card.is-latin .books-process-card__title {
        font-size: 14.5px; /* 제목 +1px 규칙 */
    }
    .books-process-card__author {
        font-size: 11px;
        line-height: 17px;
    }

}


.books-archive__grid {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    align-items: start;
}

@media (min-width: 768px) {
    .books-archive__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1440px) {
    .books-archive__grid {
        grid-template-columns: repeat(6, 1fr);
    }
    /* .books-process__grid > li flex-basis는 --bk-slot 변수로 자동 계산됨 */
}

@media (min-width: 2200px) {
    .books-archive__grid {
        grid-template-columns: repeat(8, 1fr);
    }
    /* .books-process__grid > li flex-basis는 --bk-slot 변수로 자동 계산됨 */
}


.books-cover-card {
    display: block;
    min-width: 0;
}

.books-cover-card .book-card__cover {
    aspect-ratio: 3 / 4;
    background: var(--black);
}

.books-cover-card .book-card__cover img {
    object-fit: contain;
    background: var(--black);
}

.books-cover-card .book-card__info {
    display: none;
}

.books-cover-card .book-card__hover {
    pointer-events: none;
}

.books-archive-section--cover-wall .archive-pagination {
    padding-inline: 8px;
}


/* ─── Archive Title Scale ───────────────────────────────────────────────── */

body.post-type-archive-program .archive-title,
body.post-type-archive-book .archive-title,
body.post-type-archive-article .archive-title,
body.post-type-archive-about .archive-title {
    font-size: 23px;
    line-height: 1;
    letter-spacing: 0;
    font-family: var(--font-en);
    font-weight: 500;
}

body.post-type-archive-book .archive-title,
body.single-book .archive-title {
    letter-spacing: -0.03em;
    font-size: 23px;
    font-weight: 500;
}

body.post-type-archive-program .archive-title,
body.single-program .archive-title,
body.post-type-archive-article .archive-title,
body.single-article .archive-title,
body.post-type-archive-about .archive-title {
    letter-spacing: -0.02em;
}


body.single-program {
    --programs-pad: 48px;
}

body.single-program .archive-header__inner {
    max-width: none;
    width: 100%;
    margin-inline: 0;
    padding-inline: 0;
}

body.single-program .archive-header__inner::after {
    left: 0;
    right: 0;
}

body.single-program .archive-title {
    font-family: var(--font-en);
    font-size: 23px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
}

@media (max-width: 768px) {
    body.single-program {
        --programs-pad: 24px;
    }
    body.single-program .archive-title { font-size: 23px; }
}

body.single-program .back-link {
    font-size: 24px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.01em;
}

body.single-program .back-link img {
    height: 0.576em;
    width: auto;
}

@media (max-width: 768px) {
    body.single-program .back-link {
        font-size: 24px;
        line-height: 1;
    }
}

/* ─── Programs Archive — consistent content padding ─────────────────────── */

body.post-type-archive-program {
    --programs-pad: 48px;
}

@media (max-width: 768px) {
    body.post-type-archive-program {
        --programs-pad: 24px;
    }
}

/* site-main이 nav를 제외한 전체 영역: padding-inline 한 번만 적용 */
body.post-type-archive-program .site-main {
    padding-inline: var(--programs-pad);
}

/* 모든 내부 wrapper: max-width 없이 100% 사용 */
body.post-type-archive-program .archive-header__inner,
body.post-type-archive-program .programs-process,
body.post-type-archive-program .programs-process__grid,
body.post-type-archive-program .programs-archive__grid {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
}

/* 구분선: 콘텐츠 영역 전체 폭으로 */
body.post-type-archive-program .archive-header__inner::after {
    left: 0;
    right: 0;
}

body.post-type-archive-program .programs-process::after {
    width: auto;
    max-width: none;
    margin-inline: 0;
}

/* 페이지네이션 */
body.post-type-archive-program .programs-poster-archive .archive-pagination {
    padding-inline: 0;
}

/* 토글 바 아래 간격을 BOOKS와 동일하게 (books-process는 padding-top 0) */
body.post-type-archive-program .programs-process {
    padding-top: 0;
}

/* ─── Programs 리스트 뷰: 4컬럼, 컬럼 시작점이 프로세스 스트립 카드 경계에 정렬 ──
   스트립 카드: 데스크탑 3장 / ≤768px 2장, gap 8px → slot = (100% + 8px) / n
   Title = 카드 1, Speaker = 카드 2, Type부터 마지막 카드 구역 분할, Date 우측 정렬 */
body.post-type-archive-program .books-list {
    --pg-slot: calc((100% + 8px) / 3);
    --pg-rest: calc(100% - 2 * ((100% + 8px) / 3));
    /* 3열 = DATE(넓게), 4열 = TYPE */
    --bk-cols:
        var(--pg-slot)
        var(--pg-slot)
        calc(var(--pg-rest) * 0.62)
        calc(var(--pg-rest) * 0.38);
}

/* 마지막 컬럼도 좌측 정렬 */
body.post-type-archive-program .books-list__th:last-child,
body.post-type-archive-program .books-list__td:last-child {
    text-align: left;
}

/* DATE 값은 숫자 포함 전부 국문 폰트 */
body.post-type-archive-program .books-list__td--date {
    font-family: var(--font-kr);
}

/* 한 줄 유지 + '...' 없이 JS가 어절 단위로 맞춰 자르는 컬럼 공통 */
.books-list__td--date,
.books-list__td--fitwords {
    white-space: nowrap;
    text-overflow: clip;
}

/* books 전역 규칙(≤1200px에서 4번째 컬럼 숨김)이 programs의 Date를 지우지 않도록 복원 */
@media (max-width: 1200px) {
    body.post-type-archive-program .books-list__th:nth-child(4),
    body.post-type-archive-program .books-list__td:nth-child(4) {
        display: block;
    }
}

/* ≤768px: 카드 2장 → Title, Speaker, Date (Type 숨김) */
@media (max-width: 768px) {
    body.post-type-archive-program .books-list__th:nth-child(3),
    body.post-type-archive-program .books-list__td:nth-child(3) {
        display: block;
    }
    body.post-type-archive-program .books-list__th:nth-child(4),
    body.post-type-archive-program .books-list__td:nth-child(4) {
        display: none;
    }
    body.post-type-archive-program .books-list {
        --pg-slot2: calc((100% + 8px) / 2);
        --bk-cols:
            var(--pg-slot2)
            calc((100% - var(--pg-slot2)) * 0.55)
            calc((100% - var(--pg-slot2)) * 0.45);
    }
}

/* ≤480px: Date도 숨기고 2컬럼 */
@media (max-width: 480px) {
    body.post-type-archive-program .books-list__th:nth-child(3),
    body.post-type-archive-program .books-list__td:nth-child(3),
    body.post-type-archive-program .books-list__th:nth-child(4),
    body.post-type-archive-program .books-list__td:nth-child(4) {
        display: none;
    }
    body.post-type-archive-program .books-list {
        --bk-cols:
            var(--pg-slot2)
            calc(100% - var(--pg-slot2));
    }
}

@media (min-width: 1440px) {
    body.post-type-archive-program .programs-archive__grid {
        grid-template-columns: repeat(4, 1fr);
    }
    body.post-type-archive-program .programs-process__grid > li {
        flex-basis: calc((100% - 8px) / 2);
    }
}

@media (min-width: 2200px) {
    body.post-type-archive-program .programs-archive__grid {
        grid-template-columns: repeat(6, 1fr);
    }
    body.post-type-archive-program .programs-process__grid > li {
        flex-basis: calc((100% - 16px) / 3);
    }
}

/* 3열(769px–1439px): 카드 타이틀 크기 축소 */
@media (min-width: 769px) and (max-width: 1439px) {
    body.post-type-archive-program .process-card__title {
        font-size: 13.5px;
        line-height: 17px;
    }
    body.post-type-archive-program .process-card__speaker {
        font-size: 11px;
        line-height: 17px;
    }

}

/* Footer: archive tabs share the same content baseline */
@media (min-width: 783px) {
    body.post-type-archive-program .site-footer,
    body.post-type-archive-book .site-footer,
    body.post-type-archive-about .site-footer,
    body.post-type-archive-article .site-footer {
        padding-right: 0;
        margin-right: var(--bm-nav-width);
    }
}

body.post-type-archive-program .site-footer::before,
body.post-type-archive-book .site-footer::before,
body.post-type-archive-about .site-footer::before,
body.post-type-archive-article .site-footer::before {
    left: var(--programs-pad);
    right: var(--programs-pad);
}

body.post-type-archive-program .site-footer__inner,
body.post-type-archive-book .site-footer__inner,
body.post-type-archive-about .site-footer__inner,
body.post-type-archive-article .site-footer__inner {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: var(--programs-pad);
    padding-right: var(--programs-pad);
}


/* PROGRAMS footer follows the poster grid columns: 2 / 3 / 4 / 6. */
@media (min-width: 768px) {
    body.post-type-archive-program .site-footer__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.post-type-archive-program .site-footer__col--address    { grid-column: 1; grid-row: 1; }
    body.post-type-archive-program .site-footer__col--kr         { grid-column: 2; grid-row: 1; }
    body.post-type-archive-program .site-footer__col--en         { grid-column: 3; grid-row: 1; }
    body.post-type-archive-program .site-footer__col--newsletter { grid-column: 2 / span 2; grid-row: 2; }

    body.post-type-archive-program .site-footer__col--copyright {
        grid-column: 1;
        grid-row: 2;
    }
}

@media (min-width: 1440px) {
    body.post-type-archive-program .site-footer__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    body.post-type-archive-program .site-footer__col--address    { grid-column: 1; grid-row: 1; }
    body.post-type-archive-program .site-footer__col--kr         { grid-column: 2; grid-row: 1; }
    body.post-type-archive-program .site-footer__col--en         { grid-column: 3; grid-row: 1; }
    body.post-type-archive-program .site-footer__col--newsletter { grid-column: 4; grid-row: 1; }

    body.post-type-archive-program .site-footer__col--copyright {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

@media (min-width: 2200px) {
    body.post-type-archive-program .site-footer__grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    body.post-type-archive-program .site-footer__col--newsletter {
        grid-column: span 2;
    }

    body.post-type-archive-program .site-footer__col--copyright {
        grid-column: 6;
        grid-row: 1;
    }
}

body.post-type-archive-program .archive-title {
    line-height: 1;
}

body.post-type-archive-program .program-card__hover-number,
body.post-type-archive-program .program-card__hover-date {
    line-height: 16px;
}

body.post-type-archive-program .program-card__hover-speaker,
body.post-type-archive-program .program-card__hover-speaker .speaker-en {
    line-height: 1.4;
}

@media (max-width: 768px) {
    body.post-type-archive-program .program-card__hover-speaker .speaker-en {
        font-size: clamp(9.5px, 4.8cqw, 14.5px);
    }
}

body.post-type-archive-program .program-card__fallback {
    line-height: 16px;
}


body.post-type-archive-program .archive-header__inner,
body.single-program .archive-header__inner,
body.single-program .page-title-bar .container {
    padding-bottom: 8px;
}


/* ─── Books Archive — consistent content padding ────────────────────────── */

body.post-type-archive-book,
body.single-book {
    --programs-pad: 48px;
}

@media (max-width: 768px) {
    body.post-type-archive-book,
    body.single-book {
        --programs-pad: 24px;
    }
}

body.post-type-archive-book .site-main,
body.single-book .site-main {
    padding-inline: var(--programs-pad);
}

body.post-type-archive-book .archive-header__inner,
body.single-book .archive-header__inner {
    max-width: none;
    width: 100%;
    margin-inline: 0;
    padding-inline: 0;
    padding-bottom: 8px;
}

body.single-book .archive-header__inner::after {
    left: 0;
    right: 0;
    border-bottom-color: var(--border);
}

/* ─── single-book typography ─────────────────────────────────────────────── */

body.single-book .program-hero__title-kr {
    font-family: var(--font-en);
    font-size: 22px;
    font-weight: 500;
}

body.single-book .program-hero__title-en {
    font-size: 16px;
}

body.single-book .program-details__row {
    font-size: 12px;
    line-height: 19px;
}

body.single-book .site-main[data-lang="en"] .program-details__row {
    font-size: 12px;
    line-height: 19px;
}

body.single-book .program-hero__description {
    font-size: 12px;
    line-height: 19px;
}

body.single-book .program-hero__description.lang-en {
    font-size: 12.5px;
    line-height: 18px;
}

body.single-book .program-body__text {
    font-size: 12px;
    line-height: 19px;
}

body.single-book .program-body__text.lang-en {
    font-size: 14px;
}

@media (min-width: 1080px) {
    body.single-book .program-hero__content-col {
        grid-template-rows: auto auto auto 1fr;
    }
    body.single-book .program-hero__cta {
        grid-row: -2 / -1;
        align-self: end;
    }
}

/* ─── About Archive — consistent content padding ─────────────────────────── */

body.post-type-archive-about {
    --programs-pad: 48px;
}

@media (max-width: 768px) {
    body.post-type-archive-about {
        --programs-pad: 24px;
    }
}

body.post-type-archive-about .site-main {
    padding-inline: var(--programs-pad);
}

body.post-type-archive-about .archive-header__inner {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
}

body.post-type-archive-about .archive-header__inner::after {
    left: 0;
    right: 0;
}

/* ─── Articles Archive — consistent content padding ─────────────────────── */

body.post-type-archive-article {
    --programs-pad: 48px;
}

@media (max-width: 768px) {
    body.post-type-archive-article {
        --programs-pad: 24px;
    }
}

body.post-type-archive-article .site-main {
    padding-inline: var(--programs-pad);
}

body.post-type-archive-article .archive-header__inner {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
}

body.post-type-archive-article .archive-header__inner::after {
    left: 0;
    right: 0;
}

/* ─── single-about / single-article / page-about / page-articles — 아이콘 위치 통일 ── */

body.single-about,
body.single-article,
body.page-about,
body.page-articles {
    --programs-pad: 48px;
}

@media (max-width: 768px) {
    body.single-about,
    body.single-article,
    body.page-about,
    body.page-articles {
        --programs-pad: 24px;
    }
}

body.single-about .site-main,
body.single-article .site-main,
body.page-about .site-main,
body.page-articles .site-main {
    padding-inline: var(--programs-pad);
}

body.single-about .single-os-icon,
body.single-article .single-os-icon {
    max-width: none;
    margin-inline: 0;
    padding-left: 0;
    padding-right: 0;
}

body.page-about .archive-header__inner,
body.page-articles .archive-header__inner,
body.single-article .archive-header__inner {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
}

body.page-about .archive-header__inner::after,
body.page-articles .archive-header__inner::after,
body.single-article .archive-header__inner::after {
    left: 0;
    right: 0;
}

/* ─── Book Detail — full-width layout (Programs와 동일 여백/규격) ─────────── */

body.single-book {
    --programs-pad: 48px;
    --program-detail-gap: var(--grid-gutter);
}

@media (max-width: 768px) {
    body.single-book {
        --programs-pad: 24px;
    }
}

body.single-book .site-main {
    padding-inline: var(--programs-pad);
}


body.single-book .archive-title {
    font-family: var(--font-en);
    font-size: 23px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.03em;
}

@media (max-width: 768px) {
    body.single-book .archive-title { font-size: 23px; }
}

body.single-book .program-hero {
    margin-top: var(--program-detail-gap);
}

body.single-book .program-related__header,
body.single-book .program-related__grid {
    max-width: none;
    width: 100%;
    margin-inline: 0;
    padding-inline: 0;
}

body.single-book .program-related__label {
    letter-spacing: -0.03em;
}

body.single-book .program-hero__grid {
    max-width: none;
    width: 100%;
    margin-inline: 0;
    padding-inline: 0;
    padding-bottom: 16px;
}

@media (min-width: 1080px) {
    body.single-book .program-hero__grid {
        gap: var(--grid-gutter);
        grid-template-columns: repeat(10, 1fr);
    }
    body.single-book .program-hero__image-col {
        grid-column: 1 / 7;
    }
    body.single-book .program-hero__content-col {
        grid-column: 7 / 11;
        height: 512px;
        overflow-y: auto;
        scrollbar-width: none;
    }
    body.single-book .program-hero__content-col::-webkit-scrollbar {
        display: none;
    }
}

@media (min-width: 1440px) {
    body.single-book .program-hero__image-col {
        height: 640px;
    }
    body.single-book .program-hero__content-col {
        height: 640px;
    }
}

@media (min-width: 2200px) {
    body.single-book .program-hero__image-col {
        height: 800px;
    }
    body.single-book .program-hero__content-col {
        height: 800px;
    }
}

/* ── Book gallery: horizontal scroll strip ── */
/* ─── Book Gallery Thumbnails ────────────────────────────────────────────── */

.book-gallery__thumbs {
    display: flex;
    gap: 4px;
    max-width: none;
    width: 100%;
    margin-inline: 0;
}

.book-gallery__thumb {
    flex: 0 0 calc((100% - 36px) / 10);
    aspect-ratio: 5 / 4;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    overflow: hidden;
    line-height: 0;
    position: relative;
}


@media (max-width: 1080px) {
    .book-gallery__thumbs {
        flex-wrap: wrap;
    }
    .book-gallery__thumb {
        flex: 0 0 calc((100% - 16px) / 5);
    }
}

.book-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: #000000;
    display: block;
}

.book-gallery__thumb--placeholder {
    background: var(--black);
    cursor: default;
    pointer-events: none;
}

.book-gallery {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    cursor: grab;
    user-select: none;
    max-width: none;
    width: 100%;
    margin-inline: 0;
    scroll-snap-type: x mandatory;
}

.book-gallery::-webkit-scrollbar {
    display: none;
}

.book-gallery.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
}

.book-gallery__strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.book-gallery__cursor {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    user-select: none;
    display: none;
    transform: translate(-50%, -50%);
    font-family: var(--font-en);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #FAFAFA;
    mix-blend-mode: difference;
}

.book-gallery__counter {
    font-family: var(--font-en);
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    padding: 4px 0 3px;
    line-height: 16px;
    color: var(--black);
    letter-spacing: 0.02em;
}

.book-gallery__item {
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 72vh;
    background: #000000;
    overflow: hidden;
}

.book-gallery__item img {
    max-height: 72vh;
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
    -webkit-user-drag: none;
}

@media (max-width: 768px) {
    .book-gallery__item {
        height: auto;
        aspect-ratio: 5 / 4;   /* 상단 썸네일과 동일 비율 */
    }
    .book-gallery__item img {
        max-height: 100%;
    }
}

body.single-book .program-hero__grid::after {
    left: 0;
    right: 0;
}

body.single-book .book-cover-col,
body.single-book .book-cover-col.program-hero__image-col {
    background: #000000;
    aspect-ratio: unset !important;
    overflow: hidden;
}

body.single-book .book-cover-col img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center;
}

body.single-book .program-lower {
    padding-top: var(--program-detail-gap);
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

@media (max-width: 768px) {
    body.single-book .program-lower {
        gap: 4px;
    }
}

@media (min-width: 960px) {
    body.single-book .program-lower {
        padding-bottom: 20px;
    }
}

body.single-book .program-related {
    padding-top: 16px;
    padding-bottom: 42px;
}

body.single-book .site-footer::before {
    left: var(--programs-pad);
    right: calc(var(--bm-nav-width) + var(--programs-pad));
}

body.single-book .site-footer__inner {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: var(--programs-pad);
    padding-right: var(--programs-pad);
}

body.single-book .program-hero__title-wrap {
    margin-bottom: 28px;
}

body.single-book .program-lower__bio .program-captions__text,
body.single-book .program-lower__bio .program-body__text {
    max-width: none;
}

/* ─── Home — consistent content padding (Programs Archive와 동일 기준선) ─────── */

body.home {
    --programs-pad: 48px;
}

@media (max-width: 768px) {
    body.home {
        --programs-pad: 24px;
    }
}

body.home .site-main,
.site-main--home {
    padding-inline: var(--programs-pad);
}

/* 내부 wrapper: max-width 없이 전체 폭 사용 */
body.home .archive-header__inner,
body.home .hero__grid,
body.home .featured-banner__inner,
body.home .books-section .container,
body.home .featured-grid-section .container,
.site-main--home .archive-header__inner,
.site-main--home .hero__grid,
.site-main--home .featured-banner__inner,
.site-main--home .books-section .container,
.site-main--home .featured-grid-section .container {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
}

body.home .archive-header__inner,
.site-main--home .archive-header__inner {
    padding-bottom: 16px;
}

/* 구분선: 콘텐츠 영역 전체 폭으로 */
body.home .archive-header__inner::after,
.site-main--home .archive-header__inner::after {
    left: 0;
    right: 0;
}

/* Hero 모바일: site-main 패딩이 이미 적용되므로 중복 패딩 제거 */
@media (max-width: 768px) {
    body.home .hero__content-body {
        padding-inline: 0;
    }
}

/* Books grid: Programs와 동일한 2→3→4→6 column 시스템 */
body.home .books-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 768px) {
    body.home .books-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1440px) {
    body.home .books-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 2200px) {
    body.home .books-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

/* Footer: Programs와 동일한 여백 기준선 */
@media (min-width: 783px) {
    body.home .site-footer {
        padding-right: 0;
        margin-right: var(--bm-nav-width);
    }
}

body.home .site-footer::before {
    left: var(--programs-pad);
    right: var(--programs-pad);
}

body.home .site-footer__inner {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding: 20px var(--programs-pad) 28px;
}

/* ─── About Archive — two-column layout ─────────────────────────────────── */

.about-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px 8px;
    align-items: start;
    margin-top: 20px;
    margin-bottom: 20px;
}

.about-layout__image {
    grid-column: 1;
    grid-row: 1 / 3;
}

.about-layout__location {
    grid-column: 2;
    grid-row: 1;
}

.about-layout__col3 {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

@media (min-width: 1440px) {
    .about-layout {
        grid-template-columns: repeat(3, 1fr);
        gap: 32px 8px;
    }
    .about-layout__image {
        grid-column: 1;
        grid-row: 1 / 3;
    }
    .about-layout__location {
        grid-column: 2;
        grid-row: 1 / 3;
        display: flex;
        flex-direction: column;
        gap: 32px;
    }
    .about-layout__col3 {
        grid-column: 3;
        grid-row: 1 / 3;
    }
}

.about-layout__image {
    overflow: hidden;
    aspect-ratio: 4 / 5;
}

/* HOME 히어로와 동일한 블러 크로스페이드 슬라이드 */
.about-gallery__strip {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    height: 100%;
    overflow: hidden;
    cursor: pointer;
}

.about-gallery__strip > li {
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: 0;
    transition: opacity 0.9s ease;
}

.about-gallery__strip > li.is-active {
    opacity: 1;
    z-index: 2;
}

.about-gallery__strip > li.is-leaving {
    opacity: 1;
    z-index: 1;
}

.about-gallery__strip > li img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    user-select: none;
    -webkit-user-drag: none;
    will-change: filter;
    /* 블러 전환 시 가장자리 번짐(어두운 테두리)이 프레임 안에 보이지 않도록 살짝 확대 */
    transform: scale(1.05);
}

.about-gallery__strip > li.is-active img  { animation: hs-blur-in 1.5s ease both; }
.about-gallery__strip > li.is-leaving img { animation: hs-blur-out 1.5s ease both; }

@media (prefers-reduced-motion: reduce) {
    .about-gallery__strip > li { transition: none; }
    .about-gallery__strip > li img,
    .about-gallery__strip > li.is-active img,
    .about-gallery__strip > li.is-leaving img {
        animation: none;
        filter: none;
    }
}


.about-layout__content {
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.about-layout__content .about-section,
.about-layout__location .about-section,
.about-layout__col3 .about-section {
    border-top: none;
    padding-top: 0;
    margin-bottom: 0;
}


.about-section {
    border-top: 0.8px solid var(--border);
    padding-top: 10px;
    margin-bottom: 32px;
}

.about-section__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 17px;
}

.about-section__title {
    display: inline-flex;
    align-items: center;
    padding: 4px 7px;
    background: var(--black);
    color: var(--white);
    border-radius: 2px;
    font-family: var(--font-en);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    margin: 0;
}

.about-section__dash {
    font-family: var(--font-en);
    font-size: var(--type-body-en);
}

.about-specs {
    display: grid;
    grid-template-columns: auto auto 1fr;
    border-top: 0.8px solid var(--border);
}

.about-specs__row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    column-gap: 12px;
    border-bottom: 0.8px solid var(--border);
}

.about-specs__day-kr,
.about-specs__day-en,
.about-specs__label,
.about-specs__value {
    min-width: 0;
    margin: 0;
    padding: 1px 0 2px;
    align-self: start;
    font-family: var(--font-kr);
    font-size: 12px;
    font-weight: 700;
    line-height: 18.5px;
}

.about-specs__label {
    grid-column: 1 / 3;
}


.about-specs__day-en {
    font-family: var(--font-en);
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

.about-specs__gap {
    display: none;
}

@media (max-width: 768px) {
    /* 시간표를 가로 스크롤 컨테이너로 — 기본은 앞부분만, 옆으로 밀면 전체 */
    .about-specs-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .about-specs {
        grid-template-columns: auto auto auto;
        width: max-content;
        min-width: 100%;
    }
    /* 시간 값·요일명 모두 자연 너비 유지(줄바꿈 금지) → 넘치면 스크롤로 확인 */
    .about-specs__value,
    .about-specs__day-en {
        white-space: nowrap;
    }
}

.about-description {
    font-family: var(--font-kr);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.6;
}

.about-description p {
    margin-bottom: 1em;
}

.about-description p:last-child {
    margin-bottom: 0;
}

/* ─── About Contact ─────────────────────────────────────────────────────────── */


.about-location__text {
    font-family: var(--font-en);
    font-size: var(--type-body-en);
    font-weight: 500;
    line-height: 1.7;
    color: var(--black);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 0.8px solid var(--border);
}

.contact-form__input,
.contact-form__textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 0.8px solid var(--border);
    outline: none;
    font-family: var(--font-en);
    font-size: 12px;
    font-weight: 500;
    color: var(--black);
    padding: 1px 0 2px;
    line-height: 18.5px;
    resize: none;
}

.contact-form__input::placeholder,
.contact-form__textarea::placeholder {
    color: var(--muted);
}

.contact-form__textarea {
    height: 140px;
    margin-top: 0;
    padding-bottom: 28px;
}

.contact-form__textarea-wrap {
    position: relative;
}

.contact-form__submit {
    position: absolute;
    bottom: 12px;
    right: 0;
    height: auto;
    padding: 0 3px;
    font-family: var(--font-en);
    font-size: 12px;
    font-weight: 500;
    line-height: 17.5px;
    letter-spacing: 0.02em;
    border-radius: 2px;
    text-transform: uppercase;
    background: var(--grey-middle);
    color: var(--black);
}

.contact-form__submit:hover {
    opacity: 1;
    color: var(--white);
}

.contact-form__feedback {
    font-family: var(--font-en);
    font-size: 12px;
    line-height: 18.5px;
    margin-bottom: 12px;
}

.contact-form__feedback--success { color: #2a9b3c; }
.contact-form__feedback--error   { color: #c0392b; }

.about-contact {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-top: 0;
    border-top: none;
    margin-top: 0;
}

.about-contact__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin-top: 13px;
}

.about-contact__link {
    font-family: var(--font-en);
    font-size: 12px;
    letter-spacing: 0.02em;
    text-decoration: none;
    color: var(--black);
    background-color: var(--grey-middle);
    padding: 0 3px;
    line-height: 17.5px;
    border-radius: 2px;
}

.about-contact__link:hover {
    color: var(--white);
}

.about-contact__section-title {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 4px 7px;
    background: var(--black);
    color: var(--white);
    border-radius: 2px;
    font-family: var(--font-kr);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    margin: 0 0 10px;
}

/* 좌 국문 / 우 영문 2단 */
.about-contact__location-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.about-contact__location {
    width: 100%;
    font-family: var(--font-kr);
    font-size: 12px;
    font-weight: 700;
    line-height: 18.5px;
    margin: 0;
}

.about-contact__location--en {
    font-family: var(--font-en);
    font-size: 12px;
    font-weight: 500;
}

.about-contact__location:last-of-type {
    margin-bottom: 0;
}

/* ─── About Description ─────────────────────────────────────────────────────── */

.about-desc__kr {
    font-family: var(--font-kr);
    font-size: 12px;
    font-weight: 700;
    line-height: 18.5px;
    margin: 0 0 9px;
}

.about-desc__en {
    font-family: var(--font-en);
    font-size: 12px;
    font-weight: 500;
    line-height: 18.5px;
    margin: 0;
}


/* ─── prefers-reduced-motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .bm,
    .bm-strip,
    .bm:not(.active)::before {
        transition: none;
    }
}

/* ─── Home Storefront Hero / Marquee / Featured Program ─────────────────── */

.site-main--home .hs-hero,
body.home .hs-hero {
    display: grid;
    /* 헤더(로고 영역) 제외한 화면 높이에 딱 맞춤, 좌측 이미지는 4:5 고정 */
    --hs-hero-offset: 124px;
    /* 화면 높이 기준이되, 창 폭이 좁아지면 좌측(폭의 최대 50%, 4:5) 기준으로 함께 축소 */
    --hs-hero-h: max(560px, min(calc(100vh - var(--hs-hero-offset)), calc((100vw - 2 * var(--programs-pad, 24px)) * 0.625)));
    height: var(--hs-hero-h);
    /* 좌측은 4:5 기준이되, 우측 콘텐츠 최소 320px 보장 — 부족하면 좌측이 대신 줄어듦(크롭) */
    grid-template-columns: min(calc(var(--hs-hero-h) * 4 / 5), calc(100% - 328px)) minmax(0, 1fr);
    width: 100%;
    overflow: hidden;
    border-bottom: 0.8px solid var(--border);
    font-family: var(--font-en);
}

.hs-hero__images {
    position: relative;
    overflow: hidden;
    background: var(--grey-middle);
    border-right: 0;
}

.hs-hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: 0;
    transition: opacity 0.9s ease;
}

.hs-hero__slide.is-active {
    opacity: 1;
    z-index: 2;
}

/* 나가는 슬라이드: 새 슬라이드 아래에서 블러 아웃 */
.hs-hero__slide.is-leaving {
    opacity: 1;
    z-index: 1;
}

@keyframes hs-blur-in {
    from { filter: blur(20px); }
    to   { filter: blur(0); }
}

@keyframes hs-blur-out {
    from { filter: blur(0); }
    to   { filter: blur(20px); }
}

.hs-hero__slide img,
.hs-hero__slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    will-change: filter;
    /* 블러 전환 시 가장자리 번짐(어두운 테두리)이 프레임 안에 보이지 않도록 살짝 확대 */
    transform: scale(1.05);
}

.hs-hero__slide.is-active img,
.hs-hero__slide.is-active video  { animation: hs-blur-in 1.5s ease both; }
.hs-hero__slide.is-leaving img,
.hs-hero__slide.is-leaving video { animation: hs-blur-out 1.5s ease both; }

.hs-hero__slide-placeholder {
    width: 100%;
    height: 100%;
    background: var(--grey-light);
}

.hs-hero__right {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.hs-hero__top {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0; /* 우측 콘텐츠가 히어로 높이를 넘지 않게 축소 허용 */
    border-bottom: 0.8px solid var(--border);
}

.hs-hero__today {
    overflow: hidden;
    flex-shrink: 0;
    border-bottom: 0.8px solid var(--border);
    font-family: var(--font-en);
}

.hs-hours-mq__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.hs-hours-mq__text {
    display: block;
    padding: 7px 20px;
    font-family: var(--font-en);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hs-hours-mq__inner {
    display: flex;
    will-change: transform;
}

.hs-hours-mq__track {
    display: flex;
    flex-shrink: 0;
}

.hs-hours-mq__unit {
    display: inline-block;
    padding: 7px 32px 7px 0;
    font-family: var(--font-en);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.hs-hero__poster {
    flex: 1;
    display: block;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    min-height: 0;
}

/* 이미지가 포스터 영역을 가득 채움 (배경색 테두리 없음) */
.hs-hero__poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding: 0;
    display: block;
}

.hs-hero__prog {
    flex-shrink: 0;
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hs-hero__prog-title {
    margin: 0;
    font-family: var(--font-en);
    font-size: 22px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--black);
}

.hs-hero__prog-meta {
    margin: 0;
    border-top: 0.8px solid var(--border);
}

.hs-hero__prog-row {
    display: grid;
    grid-template-columns: 4em minmax(0, 1fr);
    gap: 12px;
    align-items: baseline;
    padding: 10px 0;
    border-bottom: 0.8px solid var(--border);
}

.hs-hero__prog-row dt {
    font-family: var(--font-kr);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.02em; /* 국문 폰트 자간 보정 */
    color: var(--muted);
}

.hs-hero__prog-row dd {
    margin: 0;
    font-family: var(--font-kr);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--black);
}

.hs-hero__prog-btn {
    display: block;
    padding: 14px;
    background: var(--black);
    color: var(--white);
    font-family: var(--font-kr);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em; /* 국문 폰트 자간 보정 */
    text-align: center;
    text-decoration: none;
    transition: opacity 0.15s ease;
}

.hs-hero__prog-btn:hover {
    opacity: 0.8;
}

.site-main--home .hs-books,
body.home .hs-books {
    width: 100%;
    overflow: hidden;
    border-bottom: 0.8px solid var(--border);
    background: var(--bg);
    font-family: var(--font-en);
}

.hs-books__label {
    margin: 0;
    padding: 28px 0 16px;
    font-family: var(--font-en);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-align: center;
    text-transform: uppercase;
    color: var(--muted);
}

.hs-books__viewport {
    overflow: hidden;
}

.hs-books__inner {
    display: flex;
    flex-wrap: nowrap;
    will-change: transform;
}

.hs-books__track {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0 8px 0 0;
}

.hs-books__item {
    flex-shrink: 0;
}

.hs-books__link {
    display: block;
    text-decoration: none;
    outline-offset: 2px;
}

.hs-books__img {
    display: block;
    height: 220px;
    aspect-ratio: 3 / 4;
    max-width: none;
    object-fit: cover;
}

.hs-books__caption {
    display: flex;
    flex-direction: column;
    gap: 3px;
    height: 40px;
    padding: 7px 2px 0;
    opacity: 0;
    transition: opacity 0.18s ease;
    pointer-events: none;
}

.hs-books__link:hover .hs-books__caption,
.hs-books__link:focus-visible .hs-books__caption {
    opacity: 1;
}

.hs-books__caption-title {
    display: block;
    max-width: 160px;
    overflow: hidden;
    color: var(--black);
    font-family: var(--font-en);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.hs-books__caption-author {
    display: block;
    max-width: 160px;
    overflow: hidden;
    color: var(--muted);
    font-family: var(--font-kr);
    font-size: 10px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-main--home .hs-prog-feat,
body.home .hs-prog-feat {
    width: 100%;
    padding-bottom: 40px;
    font-family: var(--font-en);
}

.site-main--home .hs-prog-feat .container,
body.home .hs-prog-feat .container {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
}

.hs-prog-feat__card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 200px;
    overflow: hidden;
    text-decoration: none;
}

.hs-prog-feat__img {
    overflow: hidden;
    background: var(--grey-middle);
}

.hs-prog-feat__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.hs-prog-feat__card:hover .hs-prog-feat__img img {
    transform: scale(1.03);
}

.hs-prog-feat__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 48px 40px;
    background: var(--black);
    text-align: center;
}

.hs-prog-feat__title-kr {
    margin: 0;
    color: var(--white);
    font-family: var(--font-kr);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.02em; /* 국문 폰트 자간 보정 */
}

.hs-prog-feat__title-en {
    margin: 0;
    color: var(--white);
    font-family: var(--font-en);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
    opacity: 0.8;
}

.hs-prog-feat__date {
    margin: 14px 0 0;
    color: var(--white);
    font-family: var(--font-kr);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.02em; /* 국문 폰트 자간 보정 */
    opacity: 0.6;
}

@media (max-width: 768px) {
    .site-main--home .hs-hero,
    body.home .hs-hero {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 0;
    }

    .hs-hero__images {
        /* 모바일은 3:4 비율 (데스크탑 4:5보다 살짝 낮게) */
        aspect-ratio: 3 / 4;
        min-height: 0;
        border-right: 0;
        border-bottom: 0; /* 이미지 바로 아래 붙는 선 제거 */
        /* JS가 FEATURED 아래로 이동시킴 — 섹션 간 표준 간격(38px), 푸터 선과도 동일 간격 */
        margin-top: 38px;
        margin-bottom: 38px;
    }

    .hs-hero__prog-title {
        font-size: 18px;
    }

    .hs-books__img {
        height: 150px;
    }

    .hs-prog-feat__card {
        grid-template-columns: 1fr;
    }

    .hs-prog-feat__img {
        min-height: 200px;
    }

    .hs-prog-feat__body {
        padding: 32px 24px;
    }

    .hs-prog-feat__title-kr {
        font-size: 17px;
    }
}

@media (hover: none) {
    .hs-books__caption {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hs-hero__slide,
    .hs-books__caption {
        transition: none;
    }

    .hs-hero__slide img,
    .hs-hero__slide video,
    .hs-hero__slide.is-active img,
    .hs-hero__slide.is-leaving img {
        animation: none;
        filter: none;
    }

    .hs-books__inner {
        transform: none !important;
        will-change: auto;
    }

    .hs-books__viewport {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .hs-books__caption {
        opacity: 1;
    }
}


/* ─── About — Map ───────────────────────────────────────────────────────── */

.about-map--three-col { display: none; }

@media (min-width: 1440px) {
    .about-map--two-col   { display: none; }
    .about-map--three-col { display: block; }
}

.about-map {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    height: auto;
    border: none;
    filter: grayscale(1) contrast(0.9) brightness(1.05);
}


/* ─── Footer newsletter · Stibee form (restyled to CC minimal design) ─────── */
/* Scoped to .site-footer__col--newsletter / #stb_subscribe so nothing else is touched. */
/* Stibee's own stylesheet (stb_subscribe_form_style.css) is intentionally NOT enqueued. */

.site-footer__col--newsletter #stb_subscribe {
    position: relative;
    width: 100%;
    margin-top: 8px;
    font-family: var(--font-en);
    font-weight: 500;
}

.site-footer__col--newsletter .stb_form {
    margin: 0;
    padding: 0;
}

/* Hide Stibee's title and field label — CC's own <p> label stays above the form. */
.site-footer__col--newsletter .stb_form_title,
.site-footer__col--newsletter .stb_form_set_label {
    display: none;
}

/* Email row: reproduce the CC input row exactly. */
.site-footer__col--newsletter .stb_form_set {
    position: relative;
    display: block;
    height: 26px;
    margin: 0;
    padding: 0;
    border: 0;
    border-bottom: 0.8px solid var(--border);
    min-inline-size: 0;
}

.site-footer__col--newsletter #stb_email {
    box-sizing: border-box;
    width: 100%;
    height: 26px;
    padding: 0 22px 0 0;
    background: transparent;
    border: 0;
    outline: 0;
    color: var(--black);
    font-family: var(--font-en);
    font-size: var(--type-footer);
    font-weight: 500;
    line-height: 18px;
}

/* "ENTER YOUR EMAIL" overlay (reuses CC placeholder-overlay trick). */
.site-footer__col--newsletter .stb_form_set .site-footer__input-placeholder {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--grey-dark);
    font-family: var(--font-en);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    pointer-events: none;
}

.site-footer__col--newsletter #stb_email:focus ~ .site-footer__input-placeholder,
.site-footer__col--newsletter #stb_email:not(:placeholder-shown) ~ .site-footer__input-placeholder {
    display: none;
}

/* Submit button → CC arrow, overlapping the right end of the email row. */
.site-footer__col--newsletter .stb_form_set_submit {
    position: absolute;
    top: 0;
    right: 0;
    height: 26px;
    margin: 0;
    padding: 0;
    border: 0;
    min-inline-size: 0;
    display: flex;
    align-items: center;
    z-index: 2;
}

.site-footer__col--newsletter #stb_form_submit_button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 26px;
    margin: 0;
    padding: 0 4px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent !important;
    color: var(--black) !important;
    font-size: 0;
    line-height: 1;
    cursor: pointer;
}

.site-footer__col--newsletter #stb_form_submit_button .stb_form_submit_button_label {
    display: none;
}

.site-footer__col--newsletter #stb_form_submit_button svg {
    display: block;
    width: 10px;
    height: 10px;
}

/* Consent line: small, minimal, unobtrusive. */
.site-footer__col--newsletter .stb_form_policy {
    margin-top: 7px;
    font-family: var(--font-en);
    font-size: 10px;
    font-weight: 500;
    line-height: 14px;
    color: #9a9a9a;
}

.site-footer__col--newsletter .stb_form_policy label {
    display: inline;
    color: #9a9a9a;
    cursor: pointer;
}

.site-footer__col--newsletter .stb_form_policy input[type="checkbox"] {
    width: 11px;
    height: 11px;
    margin: 0 4px 0 0;
    vertical-align: -1px;
    accent-color: var(--black);
    cursor: pointer;
}

.site-footer__col--newsletter .stb_form_modal_open_btn {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: #6f6f6f;
    text-decoration: underline;
    cursor: pointer;
}

/* Result + error messages: small, minimal, inline. */
.site-footer__col--newsletter .stb_form_result {
    margin-top: 6px;
    font-family: var(--font-en);
    font-size: 11px;
    line-height: 15px;
    color: var(--black);
}

.site-footer__col--newsletter .stb_form_msg_error {
    margin-top: 2px;
    font-family: var(--font-en);
    font-size: 10px;
    line-height: 14px;
    color: #c0392b;
}

/* Consent policy modal: hidden until Stibee JS opens it (removes .blind); minimal overlay when shown. */
.site-footer__col--newsletter .blind {
    display: none !important;
}

.site-footer__col--newsletter .stb_form_modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.site-footer__col--newsletter .stb_form_modal_bg {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.site-footer__col--newsletter .stb_form_modal_body {
    position: relative;
    z-index: 1;
    max-width: 420px;
    width: 100%;
    max-height: 80vh;
    overflow: auto;
    padding: 24px;
    background: #fff;
    color: var(--black);
    font-family: var(--font-en);
    font-size: 12px;
    line-height: 18px;
}

.site-footer__col--newsletter .stb_form_modal_title {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 700;
}

.site-footer__col--newsletter .stb_form_modal_text {
    white-space: pre-line;
    color: #555;
}

.site-footer__col--newsletter .stb_form_modal_btn {
    margin-top: 16px;
    text-align: right;
}

.site-footer__col--newsletter .stb_form_modal_close_btn {
    padding: 6px 14px;
    border: 0.8px solid var(--border);
    background: transparent;
    color: var(--black);
    font-family: var(--font-en);
    font-size: 12px;
    cursor: pointer;
}

/* Match the taller input row used on very large screens. */
@media (min-width: 2200px) {
    .site-footer__col--newsletter .stb_form_set,
    .site-footer__col--newsletter #stb_email,
    .site-footer__col--newsletter .stb_form_set_submit,
    .site-footer__col--newsletter #stb_form_submit_button {
        height: 34px;
    }
    .site-footer__col--newsletter .stb_form_set .site-footer__input-placeholder {
        top: 50%;
    }
}


/* OPEN TODAY 마퀴: 컴포지터 기반 CSS 애니메이션 (모바일에서도 멈추지 않음) */
@keyframes hsMqScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-1 * var(--hs-mq-shift, 0px))); }
}

/* Programs archive hover overlay spacing: top 14px, bottom 28px (1:2) */
body.post-type-archive-program .program-card__hover { gap: 14px; }
body.post-type-archive-program .program-card__hover-date { margin-top: 14px; }