/* ============================================================
   APP — 개편된 화면들 (홈 · 지도 · 아카이브 · 상세 · 검색 · 아티스트 · 장르)

   site.css 다음에 온다. 디자인 시스템(design.md)의 토큰만 쓴다.
     · 색은 :root 의 여섯 개뿐. 새 색을 만들지 않는다
     · 그림자 · 블러 · 글로우 · 그라디언트 없음. 구분은 1px 헤어라인
     · transition 은 0.2s / 0.6s 두 가지만

   개편 지침의 팔레트(#141414 Surface, #292929 Border, #999 Secondary)는
   이미 있는 토큰과 같은 역할이라 새로 만들지 않고 맞물려 쓴다.
     Surface  → --sx-night-soft   Border → --sx-hairline
     Secondary→ .meta 의 opacity
   색을 늘리면 design.md 가 더 이상 이 사이트를 재현하지 못한다.
   ============================================================ */

/* ============================================================
   페이지 뼈대
   ============================================================ */
.wrap { padding: var(--sx-huge) 0 var(--sx-huge); }
.wrap-tight { padding: var(--sx-xxl) 0 var(--sx-huge); }

.page-head {
    display: flex;
    flex-direction: column;
    gap: var(--sx-xs);
    padding-bottom: var(--sx-xl);
    border-bottom: 1px solid var(--sx-hairline);
    margin-bottom: var(--sx-xxl);
}
.page-head h1 { font-size: var(--sx-d-xl); line-height: 1.1; }
.page-head .lead { max-width: 68ch; }

.head-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sx-md);
    flex-wrap: wrap;
}

.block { margin-bottom: var(--sx-huge); }
.block-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sx-md);
    padding-bottom: var(--sx-sm);
    border-bottom: 1px solid var(--sx-hairline);
    margin-bottom: var(--sx-xl);
}
.block-head h2 { font-size: var(--sx-d-lg); }
.block-head .more { font-size: var(--sx-btn); letter-spacing: 0.96px; text-transform: uppercase; opacity: 0.7; transition: opacity 0.2s; }
.block-head .more:hover, .block-head .more:focus-visible { opacity: 1; }

.back-link {
    display: inline-flex; align-items: center; gap: var(--sx-xs);
    font-size: var(--sx-micro); letter-spacing: 0.96px; text-transform: uppercase;
    opacity: 0.7; transition: opacity 0.2s; margin-bottom: var(--sx-xl);
}
.back-link:hover, .back-link:focus-visible { opacity: 1; }

.live-notice {
    border: 1px solid var(--sx-hairline);
    padding: var(--sx-sm) var(--sx-md);
    margin-bottom: var(--sx-xl);
    color: var(--sx-white);
}

/* ============================================================
   상태 — 불러오는 중 · 비었음 · 실패
   셋 다 눈에 보여야 한다. 조용히 빈 화면은 고장과 구분되지 않는다.
   ============================================================ */
.state {
    display: flex; flex-direction: column; gap: var(--sx-xs);
    align-items: flex-start;
    border: 1px solid var(--sx-hairline);
    padding: var(--sx-xxl);
}
.state-title { font-family: var(--sx-display); font-size: var(--sx-card-title); color: var(--sx-white); text-transform: uppercase; letter-spacing: 0.96px; }
.state .lead { max-width: 60ch; }
.state .actions { margin-top: var(--sx-sm); }
.state.is-loading { align-items: center; }

/* ============================================================
   커버 — 앨범 이미지가 이 사이트의 유일한 색이다
   ============================================================ */
.cover {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--sx-night-soft);
    border: 1px solid var(--sx-hairline);
}
.cover img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.cover-fallback {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--sx-display); font-weight: 700;
    color: var(--sx-white);
    opacity: 0.22;
    letter-spacing: 2px;
}
.cover:not(.is-blank) .cover-fallback { opacity: 0; }
.cover-square { aspect-ratio: 1 / 1; width: 100%; }
.cover-square .cover-fallback { font-size: clamp(28px, 6vw, 56px); }
.cover-mini { width: 44px; height: 44px; flex: none; }
.cover-mini .cover-fallback { font-size: 15px; }
.cover-hero { width: 100%; aspect-ratio: 1 / 1; }
.cover-hero .cover-fallback { font-size: clamp(48px, 10vw, 110px); }

/* ============================================================
   레코드 카드 — 격자
   ============================================================ */
.rec-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: var(--sx-xl);
}
.rec-grid.is-tight { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sx-md); }

.rec-card {
    display: flex; flex-direction: column; gap: var(--sx-sm);
    padding: 0;
    transition: opacity 0.2s;
}
a.rec-card:hover .cover, a.rec-card:focus-visible .cover { border-color: var(--sx-white); }
a.rec-card:focus-visible { outline: none; }
a.rec-card:focus-visible .rec-card-title { text-decoration: underline; }
.rec-card.is-flat { opacity: 0.6; }
.rec-card-body { display: flex; flex-direction: column; gap: var(--sx-xxs); min-width: 0; }
.rec-card-artist { opacity: 0.6; }
.rec-card-title {
    font-family: var(--sx-display); font-weight: 700;
    font-size: var(--sx-body); line-height: 1.25;
    color: var(--sx-white); text-transform: uppercase; letter-spacing: 0.64px;
    overflow-wrap: anywhere;
}
.rec-card-foot { display: flex; align-items: center; gap: var(--sx-xs); flex-wrap: wrap; }
.rec-card-tags { display: flex; gap: var(--sx-xxs); flex-wrap: wrap; }

/* 마우스를 올리면 연도·장르가 더 뜬다 (스펙 §17) */
.rec-card-tags, .rec-card-foot .meta { opacity: 0.55; transition: opacity 0.2s; }
a.rec-card:hover .rec-card-tags, a.rec-card:hover .rec-card-foot .meta,
a.rec-card:focus-visible .rec-card-tags, a.rec-card:focus-visible .rec-card-foot .meta { opacity: 1; }

/* ============================================================
   레코드 줄 — 목록
   ============================================================ */
.rec-rows { display: flex; flex-direction: column; }
.rec-row {
    display: flex; align-items: center; gap: var(--sx-md);
    width: 100%;
    padding: var(--sx-sm) var(--sx-xs);
    border-bottom: 1px solid var(--sx-hairline);
    transition: background 0.2s;
}
a.rec-row:hover, a.rec-row:focus-visible { background: var(--sx-night-soft); outline: none; }
a.rec-row:focus-visible .rec-row-title { text-decoration: underline; }
.rec-row.is-flat { opacity: 0.6; }
.rec-row-no { flex: none; width: 30px; opacity: 0.45; }
.rec-row-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.rec-row-artist { opacity: 0.6; }
.rec-row-title {
    font-family: var(--sx-display); font-weight: 700;
    font-size: var(--sx-body); line-height: 1.3;
    color: var(--sx-white); text-transform: uppercase; letter-spacing: 0.64px;
    overflow-wrap: anywhere;
}
.rec-row-side { display: flex; align-items: center; gap: var(--sx-sm); flex: none; }

/* ============================================================
   칩 (장르 · 태그)
   ============================================================ */
.chips { display: flex; flex-wrap: wrap; gap: var(--sx-xs); }
.chip {
    display: inline-flex; align-items: center; gap: var(--sx-xxs);
    border: 1px solid var(--sx-hairline);
    border-radius: var(--sx-r-pill);
    padding: 2px var(--sx-sm);
    font-size: var(--sx-micro); letter-spacing: 0.96px;
    color: var(--sx-white-mute);
    background: none;
    transition: border-color 0.2s, color 0.2s;
}
.chip.is-link:hover, .chip.is-link:focus-visible {
    border-color: var(--sx-white); color: var(--sx-white); outline: none;
}
.chip.is-on { border-color: var(--sx-white); color: var(--sx-white); }
.chip-n { opacity: 0.5; }

/* 작은 탭 묶음 */
.seg { display: inline-flex; border: 1px solid var(--sx-hairline); }
.seg button {
    background: none; border: 0;
    border-right: 1px solid var(--sx-hairline);
    padding: var(--sx-xs) var(--sx-md);
    font-size: var(--sx-btn); letter-spacing: 0.96px; text-transform: uppercase;
    color: var(--sx-white-mute); opacity: 0.6; cursor: pointer;
    transition: opacity 0.2s, background 0.2s;
    min-height: 40px;
}
.seg button:last-child { border-right: 0; }
.seg button:hover { opacity: 1; }
.seg button.is-on { opacity: 1; color: var(--sx-white); background: var(--sx-night-soft); }
.seg button:focus-visible { outline: 1px solid var(--sx-white); outline-offset: -2px; }

/* ============================================================
   검색창
   ============================================================ */
/* z-index 를 여기 줄에 걸어야 하는 이유 —

   진입 애니메이션([data-appear])이 will-change: opacity, transform 을 붙인다.
   그걸 붙이는 순간 이 상자가 독립된 쌓임 맥락이 돼서,
   안에 둔 .suggest 의 z-index 가 바깥으로 빠져나가지 못한다.
   그러면 DOM 상 뒤에 오는 섹션이 자동완성 목록 위로 올라온다.

   상자 자체를 올려두면 애니메이션이 붙든 말든 항상 위에 뜨게 된다.
   헤더(40)보다는 낮게 둔다 — 스크롤할 때 헤더가 덮어야 한다. */
.searchbox { position: relative; z-index: 30; }
.searchbox input {
    width: 100%;
    background: var(--sx-night-soft);
    border: 1px solid var(--sx-hairline);
    color: var(--sx-white);
    font-family: var(--sx-ui); font-size: var(--sx-body);
    padding: var(--sx-md) var(--sx-lg);
    transition: border-color 0.2s;
}
.searchbox input::placeholder { color: var(--sx-white-mute); opacity: 0.4; }
.searchbox input:focus { outline: none; border-color: var(--sx-white); }
.searchbox.is-big input { font-size: var(--sx-card-title); padding: var(--sx-lg) var(--sx-xl); }

.suggest {
    position: absolute; left: 0; right: 0; top: calc(100% - 1px);
    z-index: 20;
    background: var(--sx-night);
    border: 1px solid var(--sx-hairline);
    max-height: 60vh; overflow-y: auto;
}
.suggest-group { border-bottom: 1px solid var(--sx-hairline); }
.suggest-group:last-child { border-bottom: 0; }
.suggest-group > .meta { display: block; padding: var(--sx-xs) var(--sx-md) 0; opacity: 0.5; }
.suggest a, .suggest button {
    display: flex; align-items: center; gap: var(--sx-sm);
    width: 100%; text-align: left;
    background: none; border: 0; cursor: pointer;
    padding: var(--sx-xs) var(--sx-md);
    transition: background 0.2s;
    min-height: 44px;
}
.suggest a:hover, .suggest a:focus-visible,
.suggest button:hover, .suggest button:focus-visible { background: var(--sx-night-soft); outline: none; }
.suggest .s-main { flex: 1; min-width: 0; color: var(--sx-white); }
.suggest .s-sub { opacity: 0.55; }

/* ============================================================
   홈
   ============================================================ */
.map-preview {
    border: 1px solid var(--sx-hairline);
    display: flex; flex-direction: column;
}
.map-preview .map { height: clamp(260px, 42vh, 460px); }
.map-preview-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sx-md); flex-wrap: wrap;
    border-top: 1px solid var(--sx-hairline);
    padding: var(--sx-md) var(--sx-lg);
}

.dice { display: flex; gap: var(--sx-md); flex-wrap: wrap; }

/* ============================================================
   지도
   ============================================================ */
.map { position: relative; width: 100%; overflow: hidden; touch-action: none; }
.map-svg { width: 100%; height: 100%; display: block; cursor: grab; }
.map.is-dragging .map-svg { cursor: grabbing; }
.map.is-compact .map-svg { cursor: default; }

.map-axis-line { stroke: var(--sx-hairline); stroke-width: 1; }
.map-axis-line.is-muted { stroke-dasharray: 3 5; }
.map-axis-label {
    fill: var(--sx-white-mute); opacity: 0.4;
    font-family: var(--sx-ui); font-size: 12px; letter-spacing: 0.96px;
}

.map-link { stroke: var(--sx-hairline); fill: none; transition: stroke 0.2s; }
.map-link.is-directed { stroke-dasharray: none; }

.map-node { cursor: pointer; }
.map-hit { fill: transparent; }
.map-dot { fill: var(--sx-night-soft); stroke: var(--sx-white-mute); stroke-width: 1; transition: fill 0.2s, stroke 0.2s; }
.map-node.is-stub .map-dot { stroke-dasharray: 2 3; opacity: 0.6; }
.map-node.is-derived .map-dot { stroke-dasharray: 3 3; }
.map-node.is-undated .map-dot { opacity: 0.45; }
.map-node:hover .map-dot, .map-node:focus-visible .map-dot { fill: var(--sx-white); stroke: var(--sx-white); }
.map-node:focus-visible { outline: none; }
.map-node:focus-visible .map-label { fill: var(--sx-white); text-decoration: underline; }
.map-node.is-focus .map-dot { fill: var(--sx-white); stroke: var(--sx-white); }
.map-node.is-on .map-dot { fill: var(--sx-white); stroke: var(--sx-white); }

.map-label {
    fill: var(--sx-white-mute);
    font-family: var(--sx-ui); font-size: 13px; letter-spacing: 0.64px;
    pointer-events: none;
}
.map-node:hover .map-label { fill: var(--sx-white); }
.map-here {
    fill: var(--sx-white); font-family: var(--sx-display); font-weight: 700;
    font-size: 11px; letter-spacing: 1.6px; pointer-events: none;
}
.map-empty-title { fill: var(--sx-white); font-family: var(--sx-display); font-size: 26px; letter-spacing: 1.2px; text-transform: uppercase; }
.map-empty-sub { fill: var(--sx-white-mute); opacity: 0.6; font-family: var(--sx-ui); font-size: 14px; }

.map-tip {
    position: absolute; z-index: 5;
    transform: translate(12px, 12px);
    background: var(--sx-night);
    border: 1px solid var(--sx-white);
    padding: var(--sx-xs) var(--sx-sm);
    display: flex; flex-direction: column;
    pointer-events: none;
    max-width: 220px;
}
.map-tip-name { font-family: var(--sx-display); font-weight: 700; color: var(--sx-white); text-transform: uppercase; letter-spacing: 0.96px; }

.map-note {
    border-top: 1px solid var(--sx-hairline);
    padding: var(--sx-xs) var(--sx-lg);
    opacity: 0.55;
}
.map.is-compact .map-note { display: none; }

/* ---- /explore 레이아웃 ---- */
.explore-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sx-md); flex-wrap: wrap;
    padding-bottom: var(--sx-md);
    border-bottom: 1px solid var(--sx-hairline);
    margin-bottom: var(--sx-md);
}
.explore-bar .searchbox { width: min(300px, 100%); }
.explore-bar .searchbox input { padding: var(--sx-xs) var(--sx-md); min-height: 40px; }

.explore-body {
    display: grid;
    grid-template-columns: 1fr;
    border: 1px solid var(--sx-hairline);
    min-height: 0;
}
.explore-stage { display: flex; flex-direction: column; min-width: 0; }
.explore-stage .map { height: clamp(380px, 62vh, 760px); }

.map-tools {
    display: flex; align-items: center; justify-content: center; gap: var(--sx-md);
    border-top: 1px solid var(--sx-hairline);
    padding: var(--sx-xs) var(--sx-md);
}
.map-tools .zoom-now { min-width: 56px; text-align: center; }

/* 오른쪽 패널 (데스크톱) / 바닥 시트 (모바일) */
.panel {
    border-left: 1px solid var(--sx-hairline);
    display: flex; flex-direction: column;
    min-width: 0;
    max-height: clamp(380px, 62vh, 760px);
    overflow-y: auto;
}
.panel-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--sx-sm);
    padding: var(--sx-lg);
    border-bottom: 1px solid var(--sx-hairline);
    position: sticky; top: 0; background: var(--sx-night); z-index: 2;
}
.panel-head h2 { font-size: var(--sx-card-title); }
.panel-body { padding: var(--sx-lg); display: flex; flex-direction: column; gap: var(--sx-lg); }
.panel-section { display: flex; flex-direction: column; gap: var(--sx-xs); }
.panel .rec-row { padding-left: 0; padding-right: 0; }
.panel-close {
    background: none; border: 1px solid var(--sx-hairline);
    width: 32px; height: 32px; flex: none; cursor: pointer;
    color: var(--sx-white); line-height: 1;
    transition: border-color 0.2s;
}
.panel-close:hover, .panel-close:focus-visible { border-color: var(--sx-white); outline: none; }

@media (min-width: 961px) {
    .explore-body.is-open { grid-template-columns: minmax(0, 1fr) 340px; }
}
@media (max-width: 960px) {
    .panel {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
        border-left: 0; border-top: 1px solid var(--sx-white);
        background: var(--sx-night);
        max-height: 56vh;
        transform: translateY(100%);
        transition: transform 0.2s;
    }
    .explore-body.is-open .panel { transform: none; }
    .panel:not(.is-live) { display: none; }
}

/* ============================================================
   레코드 상세
   ============================================================ */
.detail-top {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: var(--sx-huge);
    align-items: start;
    padding-bottom: var(--sx-xxl);
    border-bottom: 1px solid var(--sx-hairline);
}
.detail-meta { display: flex; flex-direction: column; gap: var(--sx-md); min-width: 0; }
.detail-meta h1 { font-size: var(--sx-d-lg); line-height: 1.05; overflow-wrap: anywhere; }
.detail-artist {
    font-family: var(--sx-ui); font-size: var(--sx-body);
    letter-spacing: 0.96px; text-transform: uppercase;
    color: var(--sx-white-mute);
}
.detail-artist a { border-bottom: 1px solid var(--sx-hairline); transition: border-color 0.2s; }
.detail-artist a:hover, .detail-artist a:focus-visible { border-color: var(--sx-white); color: var(--sx-white); }
.detail-facts { display: flex; gap: var(--sx-xl); flex-wrap: wrap; }
.detail-facts .fact { border-top: 1px solid var(--sx-hairline); padding-top: var(--sx-xxs); min-width: 84px; }
.detail-facts .fact p { color: var(--sx-white); }

.deck-screen.is-detail { aspect-ratio: 16 / 9; }

/* 수록곡 */
.track-rows { display: flex; flex-direction: column; }
.track-row {
    display: flex; align-items: center; gap: var(--sx-md);
    width: 100%; text-align: left;
    background: none; border: 0;
    border-bottom: 1px solid var(--sx-hairline);
    padding: var(--sx-sm) var(--sx-xs);
    transition: background 0.2s;
    min-height: 48px;
}
a.track-row:hover, a.track-row:focus-visible { background: var(--sx-night-soft); outline: none; }
.track-row-no { flex: none; width: 28px; opacity: 0.45; }
.track-row-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.track-row-name { color: var(--sx-white); overflow-wrap: anywhere; }
.track-row-feat { opacity: 0.55; }
.track-row.is-missing { opacity: 0.4; }

.you-are-here { border: 1px solid var(--sx-hairline); }
.you-are-here .map { height: 300px; }

/* 한마디 */
.comment-rows { display: flex; flex-direction: column; gap: var(--sx-md); }
.comment-item { border-left: 1px solid var(--sx-hairline); padding-left: var(--sx-md); }
.comment-item .comment-head { display: flex; gap: var(--sx-sm); }
.comment-item .comment-body { display: block; color: var(--sx-white); overflow-wrap: anywhere; }

/* ============================================================
   아티스트 · 장르 목록
   ============================================================ */
.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0;
    border-top: 1px solid var(--sx-hairline);
}
.tile {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sx-md);
    padding: var(--sx-md) var(--sx-sm);
    border-bottom: 1px solid var(--sx-hairline);
    transition: background 0.2s;
    min-height: 56px;
}
a.tile:hover, a.tile:focus-visible { background: var(--sx-night-soft); outline: none; }
a.tile:focus-visible .tile-name { text-decoration: underline; }
.tile-main { display: flex; flex-direction: column; min-width: 0; }
.tile-name {
    font-family: var(--sx-display); font-weight: 700;
    font-size: var(--sx-body); color: var(--sx-white);
    text-transform: uppercase; letter-spacing: 0.64px;
    overflow-wrap: anywhere;
}
.tile-n { flex: none; opacity: 0.5; }

/* ============================================================
   하단 내비 (모바일 전용)
   ============================================================ */
.bottom-nav { display: none; }
@media (max-width: 767px) {
    .bottom-nav {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
        display: grid; grid-template-columns: repeat(4, 1fr);
        background: var(--sx-night);
        border-top: 1px solid var(--sx-hairline);
    }
    .bottom-nav a {
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 2px; min-height: 56px;
        opacity: 0.55; transition: opacity 0.2s;
    }
    .bottom-nav a.is-on { opacity: 1; }
    .bottom-nav a:focus-visible { outline: 1px solid var(--sx-white); outline-offset: -2px; }
    .bottom-nav .meta { line-height: 1.2; }
    .bottom-nav-mark {
        width: 14px; height: 14px;
        border: 1px solid currentColor;
    }
    .bottom-nav-mark[data-k="explore"] { border-radius: var(--sx-r-full); }
    .bottom-nav-mark[data-k="submit"] { border: 0; position: relative; }
    .bottom-nav-mark[data-k="submit"]::before,
    .bottom-nav-mark[data-k="submit"]::after {
        content: ''; position: absolute; background: currentColor;
    }
    .bottom-nav-mark[data-k="submit"]::before { left: 0; right: 0; top: 6px; height: 1px; }
    .bottom-nav-mark[data-k="submit"]::after { top: 0; bottom: 0; left: 6px; width: 1px; }
    .bottom-nav-mark[data-k="search"] { border-radius: var(--sx-r-full); width: 12px; height: 12px; }
    /* 하단 내비에 가려지지 않게 */
    body { padding-bottom: 56px; }
    #footer .inner { padding-bottom: var(--sx-md); }
}

/* ============================================================
   반응형
   ============================================================ */
@media (max-width: 960px) {
    .detail-top { grid-template-columns: 1fr; gap: var(--sx-xl); }
    .detail-top .cover-hero { max-width: 320px; }
}
@media (max-width: 767px) {
    .wrap { padding: var(--sx-xxl) var(--sx-md) var(--sx-huge); }
    .wrap-tight { padding: var(--sx-lg) var(--sx-md) var(--sx-huge); }
    .rec-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sx-md); }
    .explore-bar { padding: 0 var(--sx-md) var(--sx-md); }
    .explore-body { border-left: 0; border-right: 0; }
    .explore-stage .map { height: 52vh; }
    /* 바닥 시트가 올라오면 지도가 가려진다. 지도를 줄여 위로 빼준다.
       (높이가 바뀌면 map.js 의 ResizeObserver 가 비율을 다시 잡는다) */
    .explore-body.is-open .explore-stage .map { height: 32vh; }
    /* 시트는 떠 있어서 문서 높이에 안 잡힌다.
       그만큼 아래를 비워줘야 무대를 화면 위로 끌어올릴 수 있다. */
    .explore-body.is-open { padding-bottom: 58vh; }
    .tile-grid { grid-template-columns: 1fr; }
    .page-head h1 { overflow-wrap: anywhere; }
}

/* 움직임을 줄여달라고 한 사람에게는 전환을 끈다 */
@media (prefers-reduced-motion: reduce) {
    .panel { transition: none; }
}

/* ============================================================
   건너뛰기 링크 — 키보드로만 보인다
   ============================================================ */
.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--sx-white); color: var(--sx-ink);
    padding: var(--sx-xs) var(--sx-md);
    font-size: var(--sx-btn); letter-spacing: 0.96px; text-transform: uppercase;
}
.skip-link:focus { left: var(--sx-md); top: var(--sx-md); }

/* 현재 보고 있는 화면의 메뉴 */
#header nav a.is-on, #menu a.is-on { opacity: 1; color: var(--sx-white); text-decoration: underline; }

/* ============================================================
   여백 유틸리티

   왜 클래스로 두는가 — CSP 가 style-src 'self' 라서 인라인 style 속성이
   브라우저에서 통째로 무시된다. (JS 로 .style.x = … 하는 건 괜찮지만
   마크업에 style="…" 을 적으면 조용히 안 먹는다.)
   화면 스크립트가 문자열로 HTML 을 만드니, 여백은 여기 이름으로 붙인다.
   ============================================================ */
.sp-t-xs  { margin-top: var(--sx-xs); }
.sp-t-sm  { margin-top: var(--sx-sm); }
.sp-t-lg  { margin-top: var(--sx-lg); }
.sp-t-xl  { margin-top: var(--sx-xl); }
.sp-b-md  { margin-bottom: var(--sx-md); }
.sp-b-xxl { margin-bottom: var(--sx-xxl); }
.sp-y-sm-md { margin: var(--sx-sm) 0 var(--sx-md); }

/* ============================================================
   내비 — Digging 드롭다운

   여는 건 CSS 가 한다: :hover(마우스) + :focus-within(키보드) +
   .is-pinned(탭). 자바스크립트가 죽어도 마우스와 키보드로는 열린다.

   틈을 만들지 않는 게 요령이다. 버튼과 메뉴 사이에 1px 이라도 비면
   마우스가 그 틈을 지나는 순간 닫혀서 아무것도 못 고른다.
   그래서 .nav-group 이 헤더 높이를 통째로 차지하고, 메뉴는 그 바닥에 붙는다.
   ============================================================ */
#header nav { align-items: stretch; }

.nav-group { position: relative; display: flex; align-items: center; }

.nav-top {
    display: flex; align-items: center; gap: var(--sx-xs);
    background: none; border: 0; padding: 0; cursor: pointer;
    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); opacity: 0.72;
    transition: opacity 0.2s;
}
@media (hover: hover) { .nav-top:hover { opacity: 1; } }
.nav-top:focus-visible { outline: 1px solid var(--sx-white); outline-offset: 4px; }
.nav-group.is-on .nav-top { opacity: 1; text-decoration: underline; }

/* 아래쪽을 가리키는 작은 삼각형 하나. 아이콘 파일을 쓰지 않는다. */
.nav-caret {
    width: 0; height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 4px solid currentColor;
    transition: transform 0.2s;
}
.nav-group:hover .nav-caret,
.nav-group:focus-within .nav-caret,
.nav-group.is-pinned .nav-caret { transform: rotate(180deg); }

.nav-drop {
    position: absolute;
    top: 100%; left: calc(var(--sx-md) * -1);
    min-width: 220px;
    flex-direction: column;
    background: var(--sx-night);
    border: 1px solid var(--sx-hairline);
    padding: var(--sx-xs) 0;
    display: none;
}
.nav-group:hover .nav-drop,
.nav-group:focus-within .nav-drop,
.nav-group.is-pinned .nav-drop { display: flex; }

/* #header nav a 의 대문자·굵게를 여기서는 되돌린다 — 메뉴 항목은 읽는 글이다 */
#header nav .nav-drop a {
    display: flex; flex-direction: column; gap: 1px;
    padding: var(--sx-xs) var(--sx-md);
    font-size: var(--sx-body); font-weight: 400;
    letter-spacing: 0.32px; text-transform: none;
    opacity: 1;
    transition: background 0.2s;
    min-height: 44px; justify-content: center;
}
@media (hover: hover) { #header nav .nav-drop a:hover { background: var(--sx-night-soft); } }
#header nav .nav-drop a:focus-visible { outline: none; background: var(--sx-night-soft); }
.nav-drop-name {
    font-family: var(--sx-display); font-weight: 700;
    letter-spacing: 0.96px; text-transform: uppercase;
    color: var(--sx-white);
}
.nav-drop .meta { opacity: 0.5; line-height: 1.4; }
#header nav .nav-drop a.is-on .nav-drop-name { text-decoration: underline; }

/* 모바일 서랍 — 접지 않고 한 번에 펼친다. 탭 한 번을 아끼는 길이다. */
.menu-group { display: flex; flex-direction: column; gap: var(--sx-xs); }
.menu-group > .meta { opacity: 0.45; }
#menu .menu-group a { font-size: var(--sx-d-lg); }
#menu a.is-on { text-decoration: underline; }

/* 화면에서만 숨긴다. 스크린리더는 그대로 읽는다.
   display:none 이나 visibility:hidden 은 읽히지도 않으니 쓰면 안 된다. */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   맨 아래 검색 블록

   페이지 끝이라 제안 목록을 아래로 열면 푸터를 뚫고 내려간다.
   위로 여는 게 맞다 — 눈이 이미 거기 있기 때문이기도 하다.
   ============================================================ */
.block-search { margin-bottom: 0; }
.block-search .searchbox { max-width: 760px; }
.block-search .suggest {
    top: auto;
    bottom: calc(100% - 1px);
}
.block-search #homeSearchHint { opacity: 0.5; }

/* ============================================================
   LIST — 글로만 된 목록

   여기는 일부러 시스템의 장식을 안 쓴다.
   h2 의 대문자·자포를 빼고, 줄마다 긋는 선도 없애고,
   배지·번호·연도도 안 넣는다. 메모장처럼 보이는 게 목적이다.
   색·간격·글꼴은 그대로 토큰만 쓴다 — 새 값을 만들지 않았다.
   ============================================================ */
.doc { max-width: 760px; }

.doc-bar {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--sx-md); flex-wrap: wrap;
    margin-bottom: var(--sx-huge);
}
.doc-tabs { display: flex; gap: var(--sx-md); }
.doc-tabs button, .doc-tools button {
    background: none; border: 0; padding: 0; cursor: pointer;
    font-family: var(--sx-ui); font-size: var(--sx-body);
    letter-spacing: 0.32px;
    color: var(--sx-white-mute); opacity: 0.45;
    transition: opacity 0.2s;
}
.doc-tabs button.is-on { opacity: 1; color: var(--sx-white); }
@media (hover: hover) {
    .doc-tabs button:hover, .doc-tools button:hover { opacity: 1; }
}
.doc-tabs button:focus-visible, .doc-tools button:focus-visible {
    outline: none; opacity: 1; text-decoration: underline;
}
.doc-tools { display: flex; align-items: baseline; gap: var(--sx-sm); }

.doc-group { margin-bottom: var(--sx-huge); }

/* 제목 — 굵고 크게, 대문자로 바꾸지 않는다.
   Mixtape 을 MIXTAPE 으로 바꾸면 적어둔 그대로가 아니게 된다. */
.doc-head {
    font-family: var(--sx-ui);
    font-size: var(--sx-card-title);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    color: var(--sx-white);
    margin-bottom: var(--sx-lg);
    overflow-wrap: anywhere;
}

.doc-lines { display: flex; flex-direction: column; }
.doc-lines li { line-height: 1.75; }
.doc-lines a, .doc-lines .is-flat {
    color: var(--sx-white-mute);
    overflow-wrap: anywhere;
    transition: color 0.2s;
}
@media (hover: hover) {
    .doc-lines a:hover { color: var(--sx-white); text-decoration: underline; }
}
.doc-lines a:focus-visible { outline: none; color: var(--sx-white); text-decoration: underline; }
.doc-lines .is-flat { opacity: 0.6; }

@media (max-width: 767px) {
    .doc-bar { margin-bottom: var(--sx-xxl); }
    .doc-group { margin-bottom: var(--sx-xxl); }
}

/* ============================================================
   점수

   숫자가 먼저다. 등급 이름과 설명은 그 아래 작게.
   색을 쓰지 않으므로 좋고 나쁨은 숫자 자체로만 읽힌다 —
   초록/빨강을 넣는 순간 design.md 가 이 사이트를 재현하지 못한다.
   ============================================================ */
.score { display: flex; flex-direction: column; gap: 2px; }
.score-num {
    font-family: var(--sx-display); font-weight: 700;
    font-size: var(--sx-d-lg); line-height: 1;
    letter-spacing: 0.96px;
    color: var(--sx-white);
    font-variant-numeric: tabular-nums;
}
.score.is-big .score-num { font-size: var(--sx-d-xl); }
.score-grade {
    font-family: var(--sx-ui); font-size: var(--sx-body); font-weight: 700;
    letter-spacing: 0.32px; color: var(--sx-white);
}
.score-note { opacity: 0.5; max-width: 46ch; }

/* 줄·카드 옆에 붙는 작은 숫자 */
.score-tag {
    font-family: var(--sx-display); font-weight: 700;
    font-size: var(--sx-btn); letter-spacing: 0.96px;
    color: var(--sx-white);
    border: 1px solid var(--sx-white);
    border-radius: var(--sx-r-pill);
    padding: 0 var(--sx-xs);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ============================================================
   리뷰
   ============================================================ */
.doc-wide { max-width: 820px; }

.review-top {
    display: grid;
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    gap: var(--sx-huge);
    align-items: start;
    padding-bottom: var(--sx-xxl);
    border-bottom: 1px solid var(--sx-hairline);
    margin-bottom: var(--sx-xxl);
}
.review-meta { display: flex; flex-direction: column; gap: var(--sx-sm); min-width: 0; }
.review-meta h1 { font-size: var(--sx-d-lg); line-height: 1.05; overflow-wrap: anywhere; }
.review-about a { border-bottom: 1px solid var(--sx-hairline); transition: border-color 0.2s; }
.review-about a:hover, .review-about a:focus-visible { border-color: var(--sx-white); color: var(--sx-white); }

.review-list { display: flex; flex-direction: column; }
.review-item {
    display: flex; align-items: center; gap: var(--sx-md);
    padding: var(--sx-md) var(--sx-xs);
    border-bottom: 1px solid var(--sx-hairline);
    transition: background 0.2s;
}
a.review-item:hover, a.review-item:focus-visible { background: var(--sx-night-soft); outline: none; }
a.review-item:focus-visible .review-item-title { text-decoration: underline; }
.review-item-main { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 2px; }
.review-item-title {
    font-family: var(--sx-display); font-weight: 700;
    font-size: var(--sx-body); line-height: 1.3;
    letter-spacing: 0.64px; text-transform: uppercase;
    color: var(--sx-white); overflow-wrap: anywhere;
}
.review-item-excerpt {
    opacity: 0.45; line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
    overflow: hidden;
}
.review-item-side { display: flex; align-items: center; gap: var(--sx-sm); flex: none; }

/* ============================================================
   본문 (마크다운 부분집합)

   읽는 글이라 여기서는 가로폭을 좁히고 줄 간격을 넓힌다.
   ============================================================ */
.md-body { max-width: 68ch; }
.md-body > *:first-child { margin-top: 0; }
.md-p {
    font-size: var(--sx-body); line-height: 1.8; letter-spacing: 0.32px;
    margin: 0 0 var(--sx-lg);
    overflow-wrap: anywhere;
}
.md-h {
    font-family: var(--sx-display); font-weight: 700;
    letter-spacing: 0.96px; text-transform: none;
    color: var(--sx-white);
    margin: var(--sx-xxl) 0 var(--sx-md);
    overflow-wrap: anywhere;
}
h2.md-h { font-size: var(--sx-d-lg); line-height: 1.2; }
h3.md-h { font-size: var(--sx-card-title); line-height: 1.25; }
h4.md-h { font-size: var(--sx-body); line-height: 1.4; }

.md-quote {
    margin: 0 0 var(--sx-lg);
    padding-left: var(--sx-md);
    border-left: 1px solid var(--sx-white);
    color: var(--sx-white);
    line-height: 1.8;
}
.md-list { margin: 0 0 var(--sx-lg); padding-left: var(--sx-lg); line-height: 1.8; }
.md-list li { list-style: disc; }
ol.md-list li { list-style: decimal; }
.md-hr { border: 0; border-top: 1px solid var(--sx-hairline); margin: var(--sx-xxl) 0; }
.md-link { border-bottom: 1px solid var(--sx-hairline); transition: border-color 0.2s; }
.md-link:hover, .md-link:focus-visible { border-color: var(--sx-white); color: var(--sx-white); }
.md-img {
    display: block; width: 100%; height: auto;
    border: 1px solid var(--sx-hairline);
    margin: 0 0 var(--sx-lg);
}
.md-body 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);
}

/* 글 목록의 점수별 보기 */
.doc-hint { opacity: 0.4; margin: calc(var(--sx-lg) * -1) 0 var(--sx-lg); }
.doc-score {
    opacity: 0.45;
    font-variant-numeric: tabular-nums;
    margin-left: var(--sx-sm);
}

@media (max-width: 960px) {
    .review-top { grid-template-columns: 1fr; gap: var(--sx-xl); }
    .review-top .cover-hero { max-width: 260px; }
}