/* ============================================================
   흑백 풀블리드 디자인 시스템 (monochrome-fullbleed v1.0)
   흑백 2색 · D-DIN 대체(Inter 700 + IBM Plex Sans KR) · 고스트 필 CTA
   그림자/블러/글로우/그라디언트 없음 — 구분은 1px 헤어라인만
   값과 근거는 design.md 참고 (그 문서 한 장이면 재현된다)

   이 프로젝트에서 뺀 것 (design.md "프로젝트에 맞춰 지울 것" 참고):
     · #evaluate .card-grid.is-single — 특정 페이지 전용 2단 분할
     · .thanks-card — 인물 카드 패턴
     · 7장 선택 모듈(방명록) 일체 — composer / tabs / toolbar / dropzone /
       preview-pane / entries / entry-body / form input / .trap
   바꾼 것 한 곳:
     · `.type-card .idx` → `.idx` 로 선택자를 일반화 (카드 밖 리스트에서도 씀)
   ============================================================ */
:root {
    /* colors — 브랜드 액센트 없음 */
    --sx-night: #000000;
    --sx-night-soft: #0a0a0a;
    --sx-white: #ffffff;
    --sx-white-mute: #f0f0fa;
    --sx-hairline: #3a3a3f;
    --sx-ink: #000000;

    /* type */
    --sx-display: "D-DIN-Bold", "Inter", "IBM Plex Sans KR", "Arial Narrow", Arial, Verdana, sans-serif;
    --sx-ui: "D-DIN", "Inter", "IBM Plex Sans KR", Arial, Verdana, sans-serif;
    --sx-d-xxl: 80px;
    --sx-d-xl: 60px;
    --sx-d-lg: 48px;
    --sx-card-title: 24px;
    --sx-body: 16px;
    --sx-btn: 13.008px;
    --sx-micro: 12px;
    --sx-caption: 13.008px;

    /* spacing */
    --sx-xxs: 4px; --sx-xs: 8px; --sx-sm: 12px; --sx-md: 16px;
    --sx-lg: 18px; --sx-xl: 24px; --sx-xxl: 32px; --sx-huge: 48px;

    /* radius */
    --sx-r-xs: 4px; --sx-r-sm: 8px; --sx-r-md: 16px; --sx-r-pill: 32px; --sx-r-full: 9999px;

    /* 밴드 내부 리딩 컬럼 — 원본은 1200px 고정, 여기서는 화면 비율에 맞춰 확장 */
    --sx-col: min(1600px, 92vw);
    --sx-nav-h: 68px;

    /* 한 페이지에 들어가는 카드 수 — 이 값이 곧 페이지 분할 기준 */
    --page-cols: 3;

    --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 2l10 10L8 22l-1.4-1.4L15.2 12 6.6 3.4z'/%3E%3C/svg%3E");
}

/* 페이지 분할 기준: 3장(≥1500) → 2장(961–1499) → 1장(≤960) */
@media (max-width: 1499px) { :root { --page-cols: 2; } }
@media (max-width: 960px)  { :root { --page-cols: 1; } }

/* Tablet 768–960: display 80 → 60 */
@media (max-width: 960px) {
    :root { --sx-d-xxl: 60px; --sx-d-xl: 48px; --sx-d-lg: 36px; --sx-card-title: 22px; --sx-col: min(1600px, 90vw); }
}
/* Mobile 600–767: display → 48 */
@media (max-width: 767px) {
    :root { --sx-d-xxl: 48px; --sx-d-xl: 36px; --sx-d-lg: 30px; --sx-col: calc(100vw - 2 * var(--sx-xl)); }
}
/* Small mobile <600: display → 40 */
@media (max-width: 599px) {
    :root { --sx-d-xxl: 40px; --sx-d-xl: 32px; --sx-d-lg: 26px; --sx-card-title: 20px; }
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
/* hidden 속성이 컴포넌트의 display 선언에 밀리지 않게 한다.
   (.ds-button 은 inline-block, .admin-card 는 flex 라 그냥 두면 무시된다) */
[hidden] { display: none !important; }
html { scroll-padding-top: var(--sx-nav-h); }
body {
    margin: 0;
    background: var(--sx-night);
    color: var(--sx-white-mute);
    font-family: var(--sx-ui);
    font-size: var(--sx-body);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.32px;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--sx-display);
    font-weight: 700;
    color: var(--sx-white);
    text-transform: uppercase;
}
h1 { font-size: var(--sx-d-xxl); line-height: 0.95; letter-spacing: 1.6px; }
h2 { font-size: var(--sx-d-xl); line-height: 1.2; letter-spacing: 1.2px; }
h3 { font-size: var(--sx-d-lg); line-height: 1.25; letter-spacing: 0.96px; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

.container {
    width: var(--sx-col);
    max-width: 100%;
    margin: 0 auto;
    padding: 0 var(--sx-xl);
    position: relative;
}
@media (max-width: 767px) { .container { padding: 0; } }

/* micro-cap — 모든 크롬 텍스트는 대문자 */
.meta {
    font-family: var(--sx-ui);
    font-size: var(--sx-micro);
    font-weight: 400;
    line-height: 2.0;
    letter-spacing: 0.96px;
    text-transform: uppercase;
    color: var(--sx-white-mute);
}
/* body-lg — 마케팅 리드 */
.lead { font-size: var(--sx-body); line-height: 1.7; letter-spacing: 0.32px; color: var(--sx-white-mute); }
/* 액센트 색이 없으므로 강조는 흰색 + 700 */
.text-accent { color: var(--sx-white); font-weight: 700; }

/* ============================================================
   풀뷰포트 밴드 — 한 섹션 = 한 화면
   ============================================================ */
section.page {
    min-height: 100svh;
    display: flex; flex-direction: column;
    padding: calc(var(--sx-nav-h) + var(--sx-huge)) 0 var(--sx-huge);
    position: relative;
}
section.page > .container {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column; justify-content: center;
}
#hero.page { min-height: calc(100svh - var(--sx-nav-h)); padding-top: var(--sx-huge); }
/* 카드 페이지는 화면 높이에 고정 → 카드 묶음이 한 화면을 정확히 채운다 */
@media (min-height: 620px) { section.page.band { height: 100svh; } }

/* 밴드 경계 — 그림자 대신 1px 헤어라인 */
section.page + section.page::before,
section.flow + section.page::before,
section.page + section.flow::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0;
    height: 1px; background: var(--sx-hairline); opacity: 0.6;
}

/* ============================================================
   Nav — 오버레이, 투명, 대문자
   ============================================================ */
#header {
    position: sticky; top: 0; z-index: 40;
    background: var(--sx-night);
}
#header .inner {
    width: var(--sx-col); max-width: 100%;
    margin: 0 auto;
    padding: var(--sx-xl) var(--sx-xxl);
    display: flex; align-items: center; justify-content: space-between; gap: var(--sx-xxl);
}
.brand {
    font-family: var(--sx-display);
    font-size: 15px; font-weight: 700;
    line-height: 0.94; letter-spacing: 1.17px;
    text-transform: uppercase;
    color: var(--sx-white);
    display: flex; align-items: center; gap: var(--sx-xs);
}
.brand .dot { display: none; }
#header nav { display: flex; gap: var(--sx-xxl); }
#header nav a {
    font-size: var(--sx-btn); font-weight: 700; line-height: 0.94;
    letter-spacing: 1.17px; text-transform: uppercase;
    color: var(--sx-white); opacity: 0.72;
    transition: opacity 0.2s;
}
@media (hover: hover) { #header nav a:hover { opacity: 1; } }

/* 햄버거 (<768px) */
.nav-toggle {
    display: none;
    width: 44px; height: 44px; padding: 0;
    background: none; border: 0; cursor: pointer;
    align-items: center; justify-content: center;
}
.nav-toggle i, .nav-toggle i::before, .nav-toggle i::after {
    content: ''; display: block; width: 22px; height: 1px; background: var(--sx-white);
}
.nav-toggle i { position: relative; }
.nav-toggle i::before { position: absolute; top: -7px; }
.nav-toggle i::after { position: absolute; top: 7px; }
.nav-toggle.is-open i { background: transparent; }
.nav-toggle.is-open i::before { top: 0; transform: rotate(45deg); }
.nav-toggle.is-open i::after { top: 0; transform: rotate(-45deg); }
#menu {
    position: fixed; inset: 0; z-index: 39;
    background: var(--sx-night);
    display: none; flex-direction: column; justify-content: center;
    gap: var(--sx-xl);
    padding: var(--sx-huge) var(--sx-xl);
}
#menu.is-open { display: flex; }
#menu a {
    font-family: var(--sx-display); font-size: var(--sx-d-lg);
    line-height: 1.25; letter-spacing: 0.96px;
    text-transform: uppercase; color: var(--sx-white);
}
@media (max-width: 767px) {
    #header nav { display: none; }
    .nav-toggle { display: flex; }
    #header .inner { padding: var(--sx-md) var(--sx-xl); }
}

/* ============================================================
   Buttons — 고스트 아웃라인 필 (밴드당 1개)
   ============================================================ */
.ds-button {
    display: inline-block;
    font-family: var(--sx-ui);
    font-size: var(--sx-btn); font-weight: 700;
    line-height: 0.94; letter-spacing: 1.17px;
    text-transform: uppercase;
    color: var(--sx-white);
    background: transparent;
    border: 1px solid var(--sx-white);
    border-radius: var(--sx-r-pill);
    padding: var(--sx-lg) var(--sx-xl);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}
@media (hover: hover) {
    .ds-button:hover { background: var(--sx-white); color: var(--sx-ink); }
}

/* 원형 고스트 아이콘 버튼 — 데크 이전/다음 */
.ds-icon-button {
    width: 48px; height: 48px; aspect-ratio: 1/1;
    display: flex; align-items: center; justify-content: center;
    padding: 0; cursor: pointer;
    color: var(--sx-white);
    background: transparent;
    border: 1px solid var(--sx-hairline);
    border-radius: var(--sx-r-full);
    transition: border-color 0.2s, background-color 0.2s, color 0.2s, opacity 0.2s;
}
.ds-icon-button[disabled] { opacity: 0.25; pointer-events: none; }
@media (hover: hover) {
    .ds-icon-button:hover { border-color: var(--sx-white); background: var(--sx-white); color: var(--sx-ink); }
}

.icon {
    display: inline-block;
    width: 16px; height: 16px;
    background-color: currentColor;
    -webkit-mask-image: var(--icon-chevron); mask-image: var(--icon-chevron);
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    vertical-align: middle;
}
.icon.is-left { transform: scaleX(-1); }

/* ============================================================
   Hero
   ============================================================ */
#hero .hero-inner { display: flex; flex-direction: column; gap: var(--sx-huge); }
#hero .hero-copy { display: flex; flex-direction: column; gap: var(--sx-xl); align-items: flex-start; }
#hero h1 { margin: var(--sx-xs) 0; }
#hero .lead { max-width: 60ch; }
#hero .actions { margin-top: var(--sx-md); }
/* 버튼 묶음 — 마무리 밴드처럼 둘 이상 놓일 때 */
.actions { display: flex; gap: var(--sx-md); flex-wrap: wrap; align-items: center; }
.closing .actions { justify-content: center; }
.hero-panel { display: flex; flex-direction: column; gap: var(--sx-xl); justify-content: flex-end; }
.hero-panel .note { font-size: var(--sx-caption); line-height: 1.5; letter-spacing: 0; opacity: 0.7; }
.hero-stats { display: flex; gap: var(--sx-huge); flex-wrap: wrap; }
.hero-stats .stat { border-top: 1px solid var(--sx-hairline); padding-top: var(--sx-sm); min-width: 120px; }
.hero-stats .stat .num {
    font-family: var(--sx-display); font-size: var(--sx-d-lg); font-weight: 700;
    line-height: 1; letter-spacing: 0.96px; color: var(--sx-white);
}
.hero-stats .stat .label { margin-top: var(--sx-xxs); }

@media (min-width: 961px) {
    #hero .hero-inner {
        display: grid;
        grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
        align-items: end;
        column-gap: var(--sx-huge);
    }
    .hero-stats { flex-direction: column; gap: var(--sx-xl); }
}

/* ============================================================
   Section head
   ============================================================ */
.section-head { display: flex; flex-direction: column; gap: var(--sx-xs); margin-bottom: var(--sx-huge); max-width: 68ch; }
.section-head .lead { margin-top: var(--sx-xs); }

/* ============================================================
   Cards — 순수 흑백, 1px 헤어라인만
   ============================================================ */
.glass-card {
    position: relative;
    background: var(--sx-night-soft);
    border: 1px solid var(--sx-hairline);
    border-radius: var(--sx-r-xs);
    padding: var(--sx-xxl);
    transition: border-color 0.2s;
}
@media (hover: hover) { .glass-card:hover { border-color: var(--sx-white); } }
.hero-panel.glass-card { background: none; border: 0; padding: 0; }

.card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sx-xl); align-items: stretch; }
.card-grid.is-single { grid-template-columns: 1fr; }
@media (max-width: 960px) { .card-grid { grid-template-columns: 1fr; } }

.type-card { display: flex; flex-direction: column; gap: var(--sx-md); }
.type-card .card-top { display: flex; align-items: center; gap: var(--sx-md); }
/* [변경] 원문은 `.type-card .idx` — 카드 밖 리스트에서도 쓰려고 일반화 */
.idx {
    flex: none;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--sx-hairline);
    border-radius: var(--sx-r-xs);
    font-size: var(--sx-micro); font-weight: 700; letter-spacing: 0.96px;
    color: var(--sx-white);
    transition: border-color 0.2s;
}
.type-card h3 { font-size: var(--sx-card-title); line-height: 1.1; letter-spacing: 0.96px; }
.type-card .sub {
    font-size: var(--sx-micro); font-weight: 400; line-height: 2.0;
    letter-spacing: 0.96px; text-transform: uppercase;
    color: var(--sx-white-mute); opacity: 0.7;
}
.type-card .body { display: flex; flex-direction: column; gap: var(--sx-md); }

/* 하위 리스트 — 채움 없이 헤어라인 박스 */
.sub-list { display: flex; flex-direction: column; gap: var(--sx-xs); }
.sub-list li {
    display: flex; gap: var(--sx-sm);
    padding: var(--sx-sm) var(--sx-md);
    border: 1px solid var(--sx-hairline);
    border-radius: var(--sx-r-xs);
}
.sub-list li .n { flex: none; color: var(--sx-white); font-weight: 700; }

/* 소프트블랙 카드 안의 순수 블랙 박스 — 한 단계 내려서 파고든 것처럼 */
.counter {
    display: flex; flex-direction: column; gap: var(--sx-xxs);
    padding: var(--sx-md);
    background: var(--sx-night);
    border: 1px solid var(--sx-hairline);
    border-radius: var(--sx-r-xs);
}
.counter .meta { color: var(--sx-white); }
.counter p { color: var(--sx-white); }

/* 예시 대구 */
.example { display: flex; flex-direction: column; gap: var(--sx-xs); }
.example .row {
    display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--sx-md); align-items: center;
    padding: var(--sx-sm) var(--sx-md);
    border: 1px solid var(--sx-hairline);
    border-radius: var(--sx-r-xs);
}
.example .row .arr { color: var(--sx-white); font-weight: 700; }
.example .row .a { opacity: 0.65; }
.example .row .b { color: var(--sx-white); }
@media (max-width: 767px) {
    .example .row { grid-template-columns: 1fr; }
    .example .row .arr { transform: rotate(90deg); width: 1em; }
}

/* 결론 배너 — 문서 전체에서 흰 테두리를 쓰는 유일한 박스 */
.warn {
    display: flex; flex-direction: column; gap: var(--sx-xs);
    padding: var(--sx-xxl);
    background: var(--sx-night);
    border: 1px solid var(--sx-white);
    border-radius: var(--sx-r-xs);
}

/* 마무리 밴드 */
.closing { align-items: center; text-align: center; gap: var(--sx-xl); }
.closing .q {
    font-family: var(--sx-display); font-size: var(--sx-d-xl); font-weight: 700;
    line-height: 1.2; letter-spacing: 1.2px; text-transform: uppercase; color: var(--sx-white);
}

/* ============================================================
   페이지 밴드 — 카드 N장이 한 화면을 꽉 채우고, 다음 묶음은 다음 페이지
   (가로 이동 없음. data-pages 를 쓰는 섹션에서만 동작한다)
   ============================================================ */
.page.band > .container { justify-content: flex-start; gap: var(--sx-xl); }
.page.band .section-head { flex: none; margin-bottom: 0; max-width: none; }
.page.band .section-head .lead { max-width: 68ch; }

.page.band .card-grid {
    flex: 1 1 auto; min-height: 260px;
    grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
    align-items: stretch;
}
.page.band .card-grid > * { min-height: 0; }

/* 카드 내부: 헤더 고정 + 본문만 스크롤 → 카드 높이가 화면에 맞춰 떨어진다 */
.page.band .type-card { overflow: hidden; }
.page.band .type-card .card-top { flex: none; }
.page.band .type-card .body {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto;
    padding-right: var(--sx-xs);
    scrollbar-width: thin; scrollbar-color: var(--sx-hairline) transparent;
    -webkit-mask-image: linear-gradient(#000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(#000 calc(100% - 24px), transparent);
}
.page.band .type-card .body::-webkit-scrollbar { width: 2px; }
.page.band .type-card .body::-webkit-scrollbar-thumb { background: var(--sx-hairline); }
.page.band .type-card .body::-webkit-scrollbar-track { background: transparent; }

/* 낮은 화면에서는 리드문을 접어 카드 높이를 확보 */
@media (max-height: 780px) { .page.band .section-head .lead { display: none; } }

/* ============================================================
   스크롤 진입 — 페이드만
   ============================================================ */
[data-appear] {
    opacity: 0;
    transition: opacity 0.6s, transform 0.6s;
    will-change: opacity, transform;
}
[data-appear].in-view { opacity: 1; transform: none; }
[data-appear="fade-up"]    { transform: translateY(16px); }
[data-appear="fade-down"]  { transform: translateY(-16px); }
[data-appear="fade-left"]  { transform: translateX(16px); }
[data-appear="fade-right"] { transform: translateX(-16px); }

@media (prefers-reduced-motion: reduce) {
    [data-appear] { opacity: 1; transform: none; transition: none; }
}

/* 자동 높이 밴드 (목록처럼 길이를 모르는 구간) */
section.flow {
    min-height: 0;
    padding: var(--sx-huge) 0;
    position: relative;
}

/* 상태 배지 */
.badge {
    display: inline-block;
    border: 1px solid var(--sx-hairline); border-radius: var(--sx-r-pill);
    padding: 2px 10px;
    font-size: var(--sx-micro); letter-spacing: 0.96px; text-transform: uppercase;
    color: var(--sx-white-mute);
    transition: border-color 0.2s, color 0.2s;
}

/* ============================================================
   Footer
   ============================================================ */
#footer { background: var(--sx-night); border-top: 1px solid var(--sx-hairline); }
#footer .inner {
    width: var(--sx-col); max-width: 100%;
    margin: 0 auto; padding: var(--sx-xxl) var(--sx-xl);
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sx-xl); flex-wrap: wrap;
}
#footer .legal { font-size: var(--sx-caption); line-height: 1.5; letter-spacing: 0; opacity: 0.7; }

/* ============================================================
   PROJECT — 레코드 선반
   시스템 토큰만 사용한다. 새 색 없음, 그림자·블러·그라디언트 없음,
   상태 변화는 전부 0.2s, hover 는 @media (hover: hover) 안에만.
   ============================================================ */

/* 목록 + 스티키 데크 2단 */
.shelf { display: grid; gap: var(--sx-huge); }
@media (min-width: 961px) {
    .shelf {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
        align-items: start;
        column-gap: var(--sx-huge);
    }
}
.shelf-main { display: flex; flex-direction: column; min-width: 0; }
/* 목록 맨 위 한 줄 — 히어로 밴드 대신 라벨만 둔다 */
.shelf-top {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--sx-md); flex-wrap: wrap;
    padding-bottom: var(--sx-sm);
    border-bottom: 1px solid var(--sx-hairline);
}
.shelf-top .meta:last-child { color: var(--sx-white); }

/* 내비의 "음악 추가하기" — 다른 항목보다 한 칸 앞으로 */
#header nav .nav-add, #menu .nav-add { opacity: 1; }
#header nav .nav-add { margin-left: var(--sx-md); }

/* 봇 덫 — 사람 눈에는 안 보이고 봇만 채운다 */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* API 대신 seed.json 을 보고 있을 때만 뜬다 */
.shelf-notice {
    border: 1px solid var(--sx-hairline); border-radius: var(--sx-r-xs);
    padding: var(--sx-xs) var(--sx-md); margin-bottom: var(--sx-xl);
    color: var(--sx-white);
}

/* 장(章) — 이름은 display-xl 로 크게, 레코드는 그 아래로 흐른다 */
.chapter {
    display: flex; flex-direction: column; gap: var(--sx-xl);
    padding: var(--sx-huge) 0;
    border-top: 1px solid var(--sx-hairline);
}
.chapter:first-child { border-top: 0; padding-top: var(--sx-xl); }
.chapter .section-head { margin-bottom: 0; }

/* 코드 토큰 — 헤어라인 박스, 원문 .entry-body code 와 같은 규칙 */
code {
    font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.9em;
    border: 1px solid var(--sx-hairline); border-radius: var(--sx-r-xs); padding: 1px 5px;
    color: var(--sx-white);
}

/* ---- 레코드: 줄 목록이 아니라 흘러가며 줄바꿈되는 흐름 ---- */
.rec-list {
    display: flex; flex-wrap: wrap; align-items: flex-start;
    column-gap: var(--sx-md); row-gap: var(--sx-xl);
}
/* 내용만큼만 차지하고 줄어들지 않는다 — 줄어들면 제목이 억지로 쪼개진다 */
.rec-list > li { display: block; flex: 0 0 auto; max-width: 100%; }

.rec {
    display: block; width: auto; max-width: 100%;
    text-align: left;
    padding: var(--sx-xs) var(--sx-sm);
    background: transparent;
    border: 1px solid transparent;   /* 자리는 잡아두고 hover 때만 보인다 */
    border-radius: var(--sx-r-xs);
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
}
/* 번호·포맷 배지는 이 배치에서 화면에 두지 않는다.
   (데크가 "01 / LP" 를 읽어가므로 마크업에는 남겨둔다) */
.rec .idx, .rec .badge, .rec .icon { display: none; }

.rec-main { display: flex; flex-direction: column; min-width: 0; }
.rec-artist { opacity: 0.6; transition: opacity 0.2s; }
.rec-title {
    font-family: var(--sx-display);
    font-size: var(--sx-card-title); font-weight: 700;
    line-height: 1.1; letter-spacing: 0.96px;
    text-transform: uppercase;
    color: var(--sx-white); opacity: 0.75;
    transition: opacity 0.2s;
    word-break: keep-all; overflow-wrap: break-word;
}

@media (hover: hover) {
    .rec:hover { border-color: var(--sx-white); background: var(--sx-night-soft); }
    .rec:hover .rec-title, .rec:hover .rec-artist { opacity: 1; }
}
.rec:focus-visible { outline: none; border-color: var(--sx-white); }
.rec.is-on { border-color: var(--sx-white); background: var(--sx-night-soft); }
.rec.is-on .rec-title, .rec.is-on .rec-artist { opacity: 1; }

/* 데크 — 카드 안의 화면은 한 단계 내린 순수 블랙 박스 */
.shelf-aside { position: sticky; top: calc(var(--sx-nav-h) + var(--sx-xl)); }
.deck { display: flex; flex-direction: column; gap: var(--sx-md); padding: var(--sx-xl); }
.deck-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sx-md); }
.deck-head .meta { color: var(--sx-white); }

.deck-screen {
    aspect-ratio: 16 / 9;
    display: flex; align-items: center; justify-content: center;
    padding: var(--sx-md);
    background: var(--sx-night);
    border: 1px solid var(--sx-hairline);
    border-radius: var(--sx-r-xs);
    overflow: hidden;
}
.deck-screen .meta { text-align: center; opacity: 0.55; }
.deck-screen iframe { width: 100%; height: 100%; border: 0; display: block; }

.deck-now { display: flex; flex-direction: column; gap: var(--sx-xxs); }
.deck-now h3 {
    font-size: var(--sx-card-title); line-height: 1.1; letter-spacing: 0.96px;
    word-break: keep-all; overflow-wrap: break-word;
}
.deck-now .meta { opacity: 0.7; }
.deck-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sx-md);
    border-top: 1px solid var(--sx-hairline);
    padding-top: var(--sx-md);
}
.deck-foot .pager { display: flex; gap: var(--sx-xs); }
/* 닫기는 데크가 화면을 덮는 ≤960px 에서만 쓴다 */
.deck-close { display: none; padding: var(--sx-md) var(--sx-xl); }

/* ≤960px — 데크는 화면 아래에 붙었다가 고르면 올라온다 */
@media (max-width: 960px) {
    .shelf-aside {
        position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 35;
        max-height: 88svh; overflow-y: auto;
        transform: translateY(100%);
        transition: transform 0.2s;
    }
    .shelf-aside.is-live { transform: none; }
    .deck-label { display: none; }
    .deck-close { display: inline-block; }
    .deck {
        border-left: 0; border-right: 0; border-bottom: 0;
        border-radius: 0;
        border-top: 1px solid var(--sx-white);
        padding: var(--sx-md) var(--sx-xl) var(--sx-xl);
    }
    @media (hover: hover) { .deck:hover { border-color: var(--sx-white); } }
}
@media (prefers-reduced-motion: reduce) {
    .shelf-aside { transition: none; }
}

/* ============================================================
   FORM — 신청 폼(site) 과 관리자 폼(worker) 이 공유한다.
   design.md 5-6 의 다크 캔버스용 반전 인풋 그대로.
   ============================================================ */
.field { display: flex; flex-direction: column; gap: var(--sx-xs); }
.field > label { color: var(--sx-white); }
input[type="text"], input[type="password"], input[type="number"], textarea, select {
    width: 100%;
    font-family: var(--sx-ui);
    font-size: var(--sx-body); line-height: 1.5; letter-spacing: 0.32px;
    color: var(--sx-white);
    background: var(--sx-night);
    border: 1px solid var(--sx-hairline);
    border-radius: var(--sx-r-xs);
    padding: var(--sx-sm) var(--sx-md);
    transition: border-color 0.2s;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--sx-white); }
input::placeholder, textarea::placeholder { color: var(--sx-white-mute); opacity: 0.35; }
textarea { min-height: 200px; resize: vertical; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }
select { appearance: none; cursor: pointer; }

/* ---- 신청 폼 · 관리자 폼이 함께 쓰는 조각 ---- */
.admin-narrow { max-width: 520px; }
.admin-card { display: flex; flex-direction: column; gap: var(--sx-md); }
.admin-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sx-md); }
.admin-card-head h3 { font-size: var(--sx-card-title); line-height: 1.1; letter-spacing: 0.96px; }
.admin-msg { font-size: var(--sx-caption); letter-spacing: 0; opacity: 0.8; min-height: 1.4em; }
.admin-msg.is-bad { color: var(--sx-white); font-weight: 700; }
.admin-fields {
    display: grid; gap: var(--sx-md);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.admin-fields .field.is-wide { grid-column: 1 / -1; }
.admin-fields .hint { font-size: var(--sx-caption); letter-spacing: 0; opacity: 0.55; }
.combo { display: flex; gap: var(--sx-xs); }
.combo select, .combo input { flex: 1 1 auto; }
.hint { color: var(--sx-white-mute); opacity: 0.55; font-size: var(--sx-caption); letter-spacing: 0; }