/*
 * back number blues — Apple 다크 스타일
 *
 * 원칙
 *  - 바탕은 푸른 밤색(#0b0d12), 면은 같은 기운의 단계(#171a21 → #22262f → #2e333d)로만 구분. 테두리·광채 없음.
 *  - 주 버튼·선택 상태는 흰색/회색. 노란색(별빛)은 ★ ✦ 와 별 숫자, 눌린 추천 상태에만 쓴다.
 *  - 링크·포커스는 시스템 블루.
 *  - 한국어 Pretendard, 일본어 Hiragino/Noto Sans JP. 제목은 자간을 좁히고 600 굵기.
 *
 * 대비 (WCAG 2.1 AA)
 *  - 본문 #f5f5f7 ≥ 12.8:1, 보조 #a3a7b0 ≥ 5.4:1, 흐린 글자 #979ca6 ≥ 4.8:1 (#22262f 위 기준)
 *  - 링크 #2997ff ≥ 4.6:1, 별빛 #ffd60a ≥ 9.8:1, 입력칸 테두리 #6e6e73 ≥ 3.36:1
 */
:root {
    /* 푸른 밤색: 순검정 대신 아주 옅게 푸른 기운이 도는 밤 (사이트 이름 blues). 면도 같은 기운으로 한 단계씩 밝게 */
    --bg: #0b0d12;
    --surface: #171a21;
    --surface-2: #22262f;
    --surface-3: #2e333d;
    --surface-4: #3c424d;                      /* 말풍선 · 판 안 버튼 마우스 올림 */
    --hairline: rgba(255, 255, 255, .08);
    --edge: #767c89;                           /* 입력칸 테두리: 모든 면 위에서 3:1 이상 */
    --text: #f5f5f7;
    --text-2: #a3a7b0;
    --text-3: #979ca6;
    --star: #ffd60a;
    --star-tint: rgba(255, 214, 10, .14);

    /* 채움 · 상태 색 (애플 시스템 회색 채움) */
    --fill: rgba(120, 128, 148, .22);          /* 세그먼트 홈 · 검색칸 · 회색 버튼 */
    --fill-hover: rgba(120, 128, 148, .34);
    --fill-selected: #5c626f;                  /* 세그먼트의 선택된 칸 */
    --overlay: rgba(0, 0, 0, .55);             /* 표지 위 버튼 · 막 */
    --danger: #ff6961;                         /* 지우기 · 오류 */
    --like: #ff6482;                           /* 공감 하트 */
    --done: #f5f5f7;                           /* 청취 완료 (도감): 색 대신 흰빛으로 '켜짐' */
    --done-tint: rgba(255, 255, 255, .14);
    --done-glow: rgba(255, 255, 255, .22);

    /* 모서리 단계 */
    --r-sm: 8px;       /* 세그먼트 칸 · 작은 버튼 · 목록 줄 */
    --r-md: 12px;      /* 세그먼트 홈 · 입력칸 · 표지 · 작은 카드 */
    --r-lg: 18px;      /* 카드 · 패널 */
    --r-full: 999px;   /* 알약 · 원 */

    /* 컨트롤 높이 단계 */
    --h-sm: 32px;      /* 세그먼트 칸 */
    --h-md: 36px;      /* 작은 버튼 · 아이콘 버튼 · 글자 버튼 · 검색칸 */
    --h-act: 40px;     /* 곡 · 앨범 동작 줄(재생 · 추천 알약 · 동작 원 버튼) · 하단 플레이어 · 페이지 번호 */
    --h-lg: 44px;      /* 기본 버튼 · 입력칸 (손가락 최소 크기) */
    --h-xl: 48px;      /* 시트 맨 아래 큰 확인 버튼 */

    /* 그림자 단계 */
    --shadow-pop: 0 12px 32px rgba(0, 0, 0, .5);     /* 떠 있는 판: 메뉴 · 팝업 */
    --shadow-cover: 0 4px 12px rgba(0, 0, 0, .35);   /* 표지 위 버튼 */
    --ring: 0 0 0 3px rgba(255, 255, 255, .08);      /* 입력칸 포커스 (파란색 없이 흰빛만 아주 옅게) */
    --focus: rgba(255, 255, 255, .5);                /* 포커스 테두리 · 키보드 이동 표시 */

    /* 글자 크기 단계 (가장 작은 글자는 13px) */
    --fs-xs: .8125rem;  /* 13px: 정보 줄 · 숫자 · 라벨 */
    --fs-sm: .875rem;   /* 14px: 보조 문장 · 작은 버튼 */
    --fs-md: .9375rem;  /* 15px: 본문 */
    --fs-lg: 1.0625rem; /* 17px: 강조 본문 · 카드 제목 */
    --fs-xl: 1.25rem;   /* 20px: 작은 제목 · 큰 숫자 */
    --fs-2xl: 1.5rem;   /* 24px: 섹션 제목급 */
    --fs-3xl: 1.75rem;  /* 28px: 화면 제목급 */
    --fs-4xl: clamp(2.75rem, 12vw, 3.75rem); /* 44~60px: 로그인 슬로건처럼 한 화면에 하나뿐인 큰 글 */
    --header-h: 52px;
    --ease: cubic-bezier(.25, .1, .25, 1);
    color-scheme: dark;
}

html { scroll-padding-top: calc(var(--header-h) + 24px); -webkit-text-size-adjust: 100%; }
/* hidden 속성은 컴포넌트의 display 보다 항상 우선 (JS 로 숨긴 빈 상태 안내 등) */
[hidden] { display: none !important; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
                 "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
    font-size: var(--fs-md);
    line-height: 1.47;
    letter-spacing: -.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
[lang="ja"] {
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Pretendard Variable", sans-serif;
    letter-spacing: 0;
}
h1, h2, h3, .section-title { letter-spacing: -.022em; }
::selection { background: rgba(255, 255, 255, .28); }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }
/* 누름 반응: 버튼 · 칩은 누르는 순간 살짝 작아진다 (모든 컨트롤이 같은 손맛). 끌어 옮기는 것 · 재킷 같은 큰 면은 빼고 */
:is(.btn, .icon-btn, .text-btn, .mood-chip, .filter-chip, .nick-pick, .tag-pill, .google-btn, .pager-btn, .bn-btn, .select-pill, .play-round):active:not([disabled], [aria-disabled="true"]) {
    transform: scale(.96); transition: transform .08s var(--ease);
}
@media (prefers-reduced-motion: reduce) { :is(.btn, .icon-btn, .text-btn, .mood-chip, .filter-chip, .nick-pick, .tag-pill, .google-btn, .pager-btn, .bn-btn, .select-pill, .play-round):active { transform: none; } }
.skip-link {
    position: absolute; left: 1rem; top: -100px; z-index: 60;
    background: var(--text); color: #000; font-weight: 600; padding: .7rem 1rem; border-radius: var(--r-md);
}
.skip-link:focus { top: .5rem; }

/* ================= 헤더 ================= */
.site-header {
    position: sticky; top: 0; z-index: 40; height: var(--header-h);
    background: rgba(13, 16, 22, .72);
    backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--hairline);
}
.nav-link {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 .75rem;
    color: var(--text-2); font-size: var(--fs-sm); transition: color .2s var(--ease);
}
.nav-link:hover { color: var(--text); }
.nav-link[aria-current="page"] { color: var(--text); font-weight: 600; }

/* ================= 3단 레이아웃 ================= */
.shell {
    max-width: 1440px; margin: 0 auto; padding: 0 16px;
    display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr);
}
.shell-main { min-width: 0; padding-top: 28px; }
.panel { min-width: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.panel-title { font-size: var(--fs-md); font-weight: 600; color: var(--text); letter-spacing: -.01em; }
.panel .panel-close { display: none; }

/*
 * 데스크톱 3단: 양옆 패널은 화면에 고정(position: fixed)하고, 그리드 칸은 자리만 차지한다.
 * - 패널 내용이 페이지 높이에 영향을 주지 않아, 본문이 짧아도 푸터가 본문 바로 아래에 온다.
 * - 스크롤 위치·본문 길이와 상관없이 패널이 항상 헤더 아래부터 화면 끝(하단 플레이어 위)까지 보인다.
 * - 세 열 모두 헤더 아래 28px 에서 시작한다.
 * 가로 위치는 가운데 정렬된 1440px 틀에 맞춰 계산한다 (fixed 의 100% = 화면 너비).
 */
@media (min-width: 1024px) {
    .shell { grid-template-columns: 236px minmax(0, 1fr); padding: 0 24px; }
    .panel-left { grid-column: 1; grid-row: 1; }
    .shell-main { grid-column: 2; grid-row: 1; }
    .panel-right { grid-column: 2; }
    .panel-left .panel-inner {
        position: fixed; z-index: 20; top: var(--header-h); bottom: 0;
        left: max(24px, calc((100% - 1440px) / 2 + 24px)); width: 236px;
        overflow-y: auto; padding-top: 28px; scrollbar-width: none;
    }
    html.has-player .panel-left .panel-inner { bottom: var(--bar-h); }
    /* 푸터는 본문 열에 맞춘다 (고정 패널에 가리지 않게) */
    .site-footer { padding-left: calc(24px + 236px + 28px); }
}
@media (min-width: 1280px) {
    .shell { grid-template-columns: 250px minmax(0, 1fr) 250px; gap: 40px; }
    .panel-left .panel-inner { width: 250px; }
    .panel-right { grid-column: 3; grid-row: 1; }
    .panel-right .panel-inner {
        position: fixed; z-index: 20; top: var(--header-h); bottom: 0;
        right: max(24px, calc((100% - 1440px) / 2 + 24px)); width: 250px;
        display: flex; flex-direction: column; padding-top: 28px;
    }
    html.has-player .panel-right .panel-inner { bottom: var(--bar-h); }
    .panel-right .song-index { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 1rem; scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
    .site-footer { padding-left: calc(24px + 250px + 40px); padding-right: calc(24px + 250px + 40px); }
}

/* JS 가 있으면 고정되지 않은 패널은 시트로 연다 (없으면 본문 아래에 그대로 펼쳐짐) */
.sheet-toggle { display: none; }
.js .sheet-toggle.btn { display: inline-flex; }
@media (max-width: 1023px) { .js .panel-left:not(.is-open) { display: none; } }
@media (max-width: 1279px) { .js .panel-right:not(.is-open) { display: none; } }
.js .panel.is-open {
    position: fixed; inset: 0; z-index: 50; background: var(--bg); padding: 16px; overflow-y: auto; display: block;
}
.js .panel.is-open .panel-inner { position: static; max-height: none; max-width: 32rem; margin: 0 auto; }
/* 전곡 시트: 제목 · 닫기 · 찾기는 위에 고정하고 목록만 스크롤 (현재 곡으로 옮겨도 닫기가 화면 밖으로 나가지 않게) */
.js .panel-right.is-open { overflow: hidden; }
.js .panel-right.is-open .panel-inner { display: flex; flex-direction: column; height: 100%; padding-bottom: 0; }
.js .panel-right.is-open .song-index { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 1rem; }
.js .panel.is-open .panel-close { display: inline-flex; }
@media (min-width: 1024px) { .js .sheet-toggle.btn[data-sheet="rank"] { display: none; } }
@media (min-width: 1280px) { .js .sheet-toggle.btn[data-sheet="songs"] { display: none; } }

/* ================= 세그먼트 컨트롤 =================
 * 랭킹 탭(.tabs) · 디스코그래피 필터(.segmented) · 보관함 탭(.lib-seg) · KR/JP(.title-toggle) 모두 같은 모양.
 * 회색 홈(--fill) 안에 높이 --h-sm 칸, 선택된 칸만 --fill-selected.
 */
.tabs, .segmented, .lib-seg, .title-toggle { padding: 2px; gap: 2px; border-radius: var(--r-md); background: var(--fill); }
.tabs { display: grid; grid-template-columns: 1fr 1fr; }
.segmented { display: inline-flex; flex-wrap: wrap; }
.lib-seg { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 360px; }
.title-toggle { display: inline-flex; align-items: center; }
.tab, .segmented a, .lib-seg a, .title-toggle span {
    display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
    min-height: var(--h-sm); padding: 0 .85rem; border-radius: var(--r-sm);
    font-size: var(--fs-xs); font-weight: 500; color: var(--text); transition: background .2s var(--ease), color .2s var(--ease);
}
.tab:hover, .segmented a:hover, .lib-seg a:hover { background: rgba(255, 255, 255, .06); }
.tab[aria-selected="true"], .segmented a[aria-current="true"], .lib-seg a[aria-current="page"],
html:not(.jp-first) .title-toggle .tt-ko, html.jp-first .title-toggle .tt-jp { background: var(--fill-selected); font-weight: 600; color: var(--text); }
.lib-seg a:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
/* KR/JP: 글자 두 개짜리라 칸 폭을 고정 */
.title-toggle span { width: 34px; padding: 0; font-weight: 600; letter-spacing: .02em; color: var(--text-2); }
.title-toggle:hover span { color: var(--text); }

/* 랭킹 탭: 첫 화면부터 저장된 탭을 보여 주도록 <html data-rank-tab> 으로 표시를 정한다 */
.js #rank-all { display: none; }
html[data-rank-tab="all"] #rank-all { display: block; }
html[data-rank-tab="all"] #rank-today { display: none; }
html[data-rank-tab="all"] #tab-today { background: transparent; font-weight: 500; box-shadow: none; }
html[data-rank-tab="all"] #tab-all { background: var(--fill-selected); font-weight: 600; box-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 3px 1px rgba(0, 0, 0, .04); }

/* ================= 랭킹 ================= */
.rank-list li + li { border-top: 1px solid var(--hairline); }
.rank-row {
    display: grid; grid-template-columns: 1.1rem 2.5rem minmax(0, 1fr) auto; align-items: center; gap: .6rem;
    min-height: 52px; padding: .35rem .25rem; border-radius: var(--r-md); transition: background .2s var(--ease);
}
.rank-row:hover { background: var(--surface); }
.rank-no { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-3); text-align: center; font-size: var(--fs-sm); }
.rank-list li:nth-child(-n+3) .rank-no { color: var(--text); }
.rank-count { font-size: var(--fs-xs); font-variant-numeric: tabular-nums; color: var(--text-2); white-space: nowrap; }
.rank-count [aria-hidden] { color: var(--star); }

.my-stars {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .7rem .85rem; border-radius: var(--r-md); background: var(--surface); font-size: var(--fs-xs); color: var(--text-2);
}
.my-stars .pips { letter-spacing: .12em; color: var(--star); }

/* ================= 전곡 목록 ================= */
.filter-wrap { position: relative; }
.filter-ico { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; fill: var(--text-3); pointer-events: none; }
.filter-wrap .filter-input { padding-left: 2.1rem; padding-right: 2.1rem; }
.filter-wrap .filter-input::-webkit-search-cancel-button { display: none; }
.filter-clear {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: var(--r-full);
    display: grid; place-items: center; font-size: var(--fs-xs); color: var(--text-2); background: rgba(255, 255, 255, .1);
}
.filter-clear:hover { color: var(--text); background: rgba(255, 255, 255, .18); }
.filter-input {
    width: 100%; height: 36px; padding: 0 .85rem; border-radius: var(--r-md);
    background: var(--fill); border: 1px solid transparent; color: var(--text); font-size: var(--fs-sm);
}
.filter-input::placeholder { color: var(--text-2); }
.filter-input:focus { outline: none; border-color: var(--focus); box-shadow: var(--ring); }
.index-year {
    position: sticky; top: 0; z-index: 1; background: var(--bg);
    font-size: var(--fs-xs); font-weight: 600; color: var(--text-3); padding: .75rem .45rem .3rem;
}
.index-row {
    display: flex; align-items: center; gap: .65rem; padding: .3rem .45rem; border-radius: var(--r-md); min-height: 48px;
    transition: background .2s var(--ease);
}
.index-row:hover { background: var(--surface); }
.index-row[aria-current="page"] { background: var(--surface-2); }
.index-row[aria-current="page"] .index-main { font-weight: 600; }

/* ================= 공통 요소 ================= */
/* 글 속 링크: 파란색 없이 흰 글자 + 옅은 밑줄 (마우스를 올리면 밑줄이 진해진다) */
.link { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .35); }
.link:hover { text-decoration-color: currentColor; }
.eyebrow { font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); }
.eyebrow [aria-hidden] { color: var(--star); }
.muted { color: var(--text-2); }
.dim { color: var(--text-3); }
.count { color: var(--text-3); font-weight: 500; margin-left: .15rem; }
.year-label { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.02em; color: var(--text); margin-bottom: .6rem; }
.star-ink { color: var(--star); }

.section { margin-top: 3rem; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.section-title { font-size: var(--fs-xl); font-weight: 600; }

.card { background: var(--surface); border-radius: var(--r-lg); }
a.card { transition: background .2s var(--ease); }
a.card:hover { background: var(--surface-2); }

/* 버튼 (터치 영역 44px) */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    min-height: var(--h-lg); padding: 0 1.25rem; border-radius: var(--r-full); font-weight: 500; font-size: var(--fs-sm);
    transition: background .2s var(--ease), color .2s var(--ease); white-space: nowrap;
}
.btn-primary { background: var(--text); color: #000; }
.btn-primary:hover { background: #fff; }
.btn-ghost { background: var(--surface-2); color: var(--text); }
.btn-ghost:hover { background: var(--surface-3); }
.btn-sm { min-height: var(--h-md); padding: 0 .85rem; font-size: var(--fs-xs); position: relative; }
.btn-sm::after { content: ""; position: absolute; inset: -5px 0; }

.pill {
    display: inline-flex; align-items: center; gap: .3rem; min-height: var(--h-sm); padding: 0 .8rem;
    border-radius: var(--r-full); background: var(--surface-2); font-size: var(--fs-xs); color: var(--text); transition: background .2s;
}
a.pill:hover, button.pill:hover { background: var(--surface-3); }

.tag { display: inline-block; padding: .1rem .5rem; border-radius: var(--r-sm); font-size: var(--fs-xs); font-weight: 500; background: var(--surface-2); color: var(--text-2); }
.tag-done { background: var(--done-tint); color: var(--done); }  /* 앨범 완주: 켜짐은 흰빛 */

/* 앨범 추천 */
.btn-star { background: var(--surface-2); color: var(--text); }
.btn-star [aria-hidden] { color: var(--star); }
.btn-star:hover { background: var(--surface-3); }
.btn-star[aria-pressed="true"] { background: var(--star-tint); color: var(--star); box-shadow: inset 0 0 0 1px rgba(255, 214, 10, .5); }

/* ================= 재킷 · 표지 ================= */
.thumb { position: relative; overflow: hidden; border-radius: var(--r-md); background: var(--surface-2); aspect-ratio: 16 / 9; flex-shrink: 0; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }

.jacket {
    position: relative; display: block; flex-shrink: 0; aspect-ratio: 1 / 1; overflow: hidden;
    border-radius: var(--r-sm); background: var(--surface-2);
}
.jacket::after, .cover::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); pointer-events: none; }
.jacket img, .cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jacket-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-3); font-size: .75rem; }

.cover {
    --h: 45; position: relative; flex-shrink: 0; overflow: hidden; display: grid; place-items: center;
    border-radius: var(--r-md); aspect-ratio: 1 / 1;
    background: linear-gradient(150deg, hsl(var(--h), 18%, 22%), hsl(var(--h), 12%, 10%));
}
.cover-mono { font-family: "Hiragino Sans", "Noto Sans JP", sans-serif; font-weight: 600; color: rgba(255, 255, 255, .85); }
.cover-sm { width: 3.5rem; font-size: var(--fs-xl); border-radius: var(--r-sm); }

/* 홈 히어로: 흐린 재킷 배경 위에 선명한 재킷 */
.hero-art { position: relative; display: grid; place-items: center; min-height: 260px; overflow: hidden; background: var(--bg); }
.hero-jacket { position: relative; width: min(60%, 250px); aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--r-md); box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .9); margin: 1.75rem 0; }
.hero-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: var(--r-full); }
/* 아이콘만 있는 원형 재생 버튼 (이름은 aria-label) */
.play-circle {
    display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--r-full);
    background: rgba(255, 255, 255, .9); color: #000; font-size: var(--fs-xl); padding-left: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45); transition: transform .2s var(--ease), background .2s;
}
.hero-play:hover .play-circle { background: #fff; transform: scale(1.06); }
/* 재생 중: 데스크톱은 왼쪽 칸 높이를 그대로 채운 검정 바탕 (위아래 회색 띠 없음), 한 단 레이아웃(모바일)은 16:9 */
.hero-art.is-playing { background: #000; }
@media (max-width: 767px) { .hero-art.is-playing { min-height: 0; aspect-ratio: 16 / 9; } }
.hero-art iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* 오늘의 발견: 이유 태그 · 팬 한 줄 */
.pick-quote { margin-top: .75rem; padding: .8rem 1rem; border-radius: var(--r-md); background: rgba(255, 255, 255, .04); }
.pick-quote blockquote { font-size: var(--fs-md); line-height: 1.5; color: var(--text); word-break: break-word;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pick-quote blockquote a::before { content: "“"; color: var(--text-3); }
.pick-quote blockquote a::after { content: "”"; color: var(--text-3); }
.pick-quote blockquote a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pick-quote figcaption { margin-top: .35rem; font-size: var(--fs-xs); color: var(--text-3); }
.pick-quote figcaption [aria-hidden] { color: var(--like); }

/* 행 너비를 카드 폭에 고정해야 긴 한줄평이 칸을 밀어내지 않고 … 로 줄어든다 */
.hero-comments { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.hero-comments li { min-width: 0; }
.hero-comment {
    display: flex; align-items: center; gap: .75rem; min-height: 40px; padding: .45rem .75rem;
    border-radius: var(--r-md); background: rgba(255, 255, 255, .04); font-size: var(--fs-sm); color: var(--text);
    transition: background .2s var(--ease);
}
.hero-comments li:first-child .hero-comment { border-top-left-radius: 12px; border-top-right-radius: 12px; }
.hero-comment:hover { background: var(--surface-2); }
.hero-comment-body { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-comment-body::before { content: "“"; color: var(--text-3); }
.hero-comment-body::after { content: "”"; color: var(--text-3); }
.hero-comment-like { flex-shrink: 0; font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
.hero-comment-like [aria-hidden] { color: var(--like); margin-right: .2rem; }

/* 앨범 이름 앞 작은 재킷 */
.album-chip { display: inline-flex; align-items: center; gap: .35rem; vertical-align: middle; max-width: 100%; }
.album-chip-jacket {
    position: relative; flex-shrink: 0; width: 1.25rem; height: 1.25rem; border-radius: 4px; overflow: hidden;
    background: var(--surface-3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.album-chip-jacket img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.album-chip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 제목 표기: 두 순서를 모두 그려 두고 하나만 보인다 (<html class="jp-first">) */
.tv-ko, .tv-jp { display: contents; }
html:not(.jp-first) .tv-jp, html.jp-first .tv-ko { display: none; }

/* 제목 표기 전환 (KR / JP): 모양은 위 세그먼트 컨트롤 */

/* ================= 플레이어 ================= */
.player { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: #000; }
.player iframe, .player img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player img { object-fit: cover; opacity: .85; transition: opacity .3s var(--ease); }
.player-play { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, .45)); }
.player:hover img { opacity: 1; }

/* ================= 한줄평 피드 ================= */
.feed > li + li { border-top: 1px solid var(--hairline); }
.feed-item:focus { outline: none; }
.feed-item:focus-visible .feed-link { box-shadow: inset 0 0 0 2px var(--focus); }
.feed-link { display: flex; align-items: flex-start; gap: .85rem; padding: .85rem 1rem; transition: background .2s var(--ease); }
.feed > li:first-child .feed-link { border-top-left-radius: var(--r-lg); border-top-right-radius: var(--r-lg); }
.feed > li:last-child .feed-link { border-bottom-left-radius: var(--r-lg); border-bottom-right-radius: var(--r-lg); }
.feed-link:hover { background: var(--surface-2); }
/* 어떤 곡인지 먼저 보이도록: 재킷 + 제목을 맨 위에 */
.feed-target { display: flex; align-items: baseline; gap: .45rem; min-width: 0; }
.feed-target .tag { flex-shrink: 0; }
.feed-title { font-weight: 600; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.feed-title-sub { font-size: var(--fs-xs); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 1; min-width: 0; }
.feed-row { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 1.25rem; row-gap: .2rem; margin-top: .35rem; }
.feed-body {
    flex: 1 1 14rem; min-width: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--fs-sm); line-height: 1.5; color: var(--text); word-break: break-word;
}
.feed-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-left: auto; white-space: nowrap; font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
.feed-heart { color: var(--like); }

/* ================= 재킷 목록 (실린 음반 · 다음 발견) ================= */
.media-row { display: flex; align-items: center; gap: .85rem; min-height: 72px; padding: .7rem 1rem; transition: background .2s var(--ease); }
.media-row:hover { background: var(--surface-2); }
.media-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.media-title { font-weight: 600; font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-sub { font-size: var(--fs-xs); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-meta { margin-top: .15rem; font-size: var(--fs-xs); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-row .tag { flex-shrink: 0; }

/* ================= 페이지 번호 ================= */
.pager { display: flex; justify-content: center; align-items: center; gap: .25rem; margin-top: 1rem; }
.pager-btn {
    display: inline-grid; place-items: center; min-width: var(--h-act); height: var(--h-act); padding: 0 .5rem; border-radius: var(--r-md);
    font-size: var(--fs-sm); font-variant-numeric: tabular-nums; color: var(--text-2); transition: background .2s var(--ease), color .2s;
}
a.pager-btn:hover { background: var(--surface-2); color: var(--text); }
.pager-btn[aria-current="page"] { background: var(--text); color: #000; font-weight: 600; }
.pager-btn.is-disabled { color: var(--surface-3); }

/* ================= 목록 ================= */
.track-row {
    display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: .5rem;
    min-height: 48px; padding: .3rem .6rem; border-radius: var(--r-md); transition: background .2s var(--ease);
}
.track-row:hover { background: var(--surface-2); }
.track-row.is-match { background: var(--fill-selected); }
.track-no { text-align: right; font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }

details.disclose > summary { list-style: none; cursor: pointer; }
details.disclose > summary::-webkit-details-marker { display: none; }
details.disclose > summary .chev { display: inline-block; transition: transform .25s var(--ease); }
details.disclose[open] > summary .chev { transform: rotate(90deg); }

/* ================= 폼 ================= */
.field-label { display: block; margin-bottom: .35rem; font-size: var(--fs-xs); font-weight: 500; color: var(--text-2); }
.field {
    width: 100%; min-height: var(--h-lg); padding: .55rem .9rem; border-radius: var(--r-md);
    background: var(--bg); border: 1px solid var(--edge); color: var(--text);
}
.field::placeholder { color: var(--text-3); }
.field:focus { outline: none; border-color: var(--focus); box-shadow: var(--ring); }
.field[aria-invalid="true"] { border-color: var(--danger); }
.field-error { color: var(--danger); font-size: var(--fs-xs); margin-top: .3rem; }
.field-error::before { content: "⚠ "; }
select.field { appearance: auto; }

.inline-action { position: relative; }
.inline-action > summary { list-style: none; }
.inline-action > summary::-webkit-details-marker { display: none; }
.inline-action[open] > summary { color: var(--text); }
.action-panel { margin-top: .5rem; padding: 1rem; width: min(22rem, calc(100vw - 2rem)); border-radius: var(--r-md); background: var(--surface-2); box-shadow: var(--shadow-pop); }
.text-btn {
    display: inline-flex; align-items: center; gap: .25rem; min-height: var(--h-md); padding: 0 .45rem;
    font-size: var(--fs-xs); color: var(--text-3); border-radius: var(--r-sm); cursor: pointer; position: relative;
    transition: color .2s var(--ease);
}
.text-btn::after { content: ""; position: absolute; inset: -4px -2px; }
.text-btn:hover { color: var(--text); }
.text-btn[aria-pressed="true"] { color: var(--like); }

/* ================= 하단 메뉴 · 알림 ================= */
.bottom-nav {
    position: fixed; inset: auto 0 0 0; z-index: 45; border-top: 1px solid var(--hairline);
    background: rgba(13, 16, 22, .8); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
    padding-bottom: env(safe-area-inset-bottom);
}
.bottom-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 54px; width: 100%; font-size: var(--fs-xs); color: var(--text-3); }
.bottom-link .ico { font-size: var(--fs-lg); line-height: 1; }
.bottom-link[aria-current="page"], .bottom-link[aria-expanded="true"] { color: var(--text); font-weight: 600; }
@media (min-width: 768px) { .bottom-nav { display: none; } }

.toast-wrap { position: fixed; left: 50%; bottom: 5.5rem; transform: translateX(-50%); z-index: 70; pointer-events: none; width: max-content; max-width: calc(100vw - 2rem); }
@media (min-width: 768px) { .toast-wrap { bottom: 2rem; } }
.toast {
    background: rgba(46, 51, 61, .94); color: var(--text); font-weight: 500; font-size: var(--fs-sm);
    padding: .7rem 1.2rem; border-radius: var(--r-full); text-align: center; box-shadow: var(--shadow-pop);
    animation: toast 4.5s var(--ease) forwards;
}
@keyframes toast { 0% { opacity: 0; transform: translateY(8px); } 6%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* ================= 하단 미니 플레이어 ================= */
:root { --bar-h: 64px; --nav-h: 0px; }
@media (max-width: 767px) { :root { --nav-h: calc(54px + env(safe-area-inset-bottom)); } }
/* 플레이어가 떠 있을 때 본문 끝이 가리지 않게 */
html.has-player body { padding-bottom: calc(var(--bar-h) + 12px); }

.bn-bar {
    position: fixed; left: 0; right: 0; bottom: var(--nav-h); z-index: 46; height: var(--bar-h);
    background: rgba(23, 26, 33, .86); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid var(--hairline);
}
@media (max-width: 767px) { .bn-bar { border-bottom: 1px solid var(--hairline); } }
.bn-bar-inner { max-width: 1440px; height: 100%; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: .9rem; }
.bn-now { flex: 1; min-width: 0; display: flex; align-items: center; gap: .7rem; border-radius: var(--r-md); }
.bn-titles { min-width: 0; display: flex; flex-direction: column; }
.bn-title { font-size: var(--fs-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bn-sub { font-size: var(--fs-xs); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bn-source { max-width: 240px; font-size: var(--fs-xs); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1023px) { .bn-source { display: none; } }
.bn-time { font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 639px) { .bn-time { display: none; } }
.bn-controls { display: flex; align-items: center; gap: .15rem; }
.bn-btn {
    position: relative; display: inline-grid; place-items: center; grid-auto-flow: column; gap: .15rem;
    min-width: var(--h-act); height: var(--h-act); border-radius: var(--r-full); color: var(--text); transition: background .2s var(--ease);
}
.bn-btn:hover { background: rgba(255, 255, 255, .08); }
.bn-btn svg { width: 20px; height: 20px; fill: currentColor; }
.bn-btn-main { width: var(--h-lg); height: var(--h-lg); background: var(--text); color: #000; }
.bn-btn-main:hover { background: #fff; }
.bn-btn .i-pause, .bn-player.is-playing .bn-btn .i-play { display: none; }
.bn-player.is-playing .bn-btn .i-pause { display: block; }
.bn-btn[disabled] { opacity: .35; pointer-events: none; }
.bn-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .12); }
.bn-count { font-size: var(--fs-xs); color: var(--text-2); font-variant-numeric: tabular-nums; }
@media (max-width: 479px) { .bn-btn[data-bn="prev"], .bn-count { display: none; } }

/* 진행 막대: 바 위쪽 가장자리에 얇게, 잡으면 굵게 */
.bn-seek {
    position: absolute; left: 0; right: 0; top: -7px; width: 100%; height: 14px; margin: 0;
    -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer;
}
.bn-seek::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(var(--text), var(--text)) 0 / var(--p, 0%) 100% no-repeat, rgba(255, 255, 255, .18); }
.bn-seek::-moz-range-track { height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .18); }
.bn-seek::-moz-range-progress { height: 3px; border-radius: 3px; background: var(--text); }
.bn-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4.5px; border-radius: var(--r-full); background: var(--text); opacity: 0; transition: opacity .2s; }
.bn-seek::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: var(--r-full); background: var(--text); opacity: 0; }
.bn-bar:hover .bn-seek::-webkit-slider-thumb, .bn-seek:focus-visible::-webkit-slider-thumb { opacity: 1; }
.bn-bar:hover .bn-seek::-moz-range-thumb, .bn-seek:focus-visible::-moz-range-thumb { opacity: 1; }
.bn-seek:focus-visible { outline: none; }
.bn-seek:focus-visible::-webkit-slider-runnable-track { box-shadow: 0 0 0 2px var(--focus); }

/* 영상: 기본은 오른쪽 아래 떠 있는 화면 (YouTube 최소 크기 200px 준수) */
.bn-video {
    position: fixed; right: 16px; bottom: calc(var(--nav-h) + var(--bar-h) + 12px); z-index: 44;
    width: 356px; height: 200px; border-radius: var(--r-md); overflow: hidden; background: #000;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .6);
}
/* 휴대폰: 목록을 가리지 않게 YouTube 최소 크기(200×200)로 모서리에. 끌면 가까운 모서리로 붙는다 */
@media (max-width: 767px) { .bn-video:not(.is-docked) { right: 12px; width: 200px; height: 200px; } }
.bn-video iframe, #bn-video-host { width: 100%; height: 100%; border: 0; display: block; }
/* 곡 상세·홈 소개 칸에 겹칠 때 (위치·크기는 JS 가 그 칸에 맞춘다) */
.bn-video.is-docked { position: absolute; right: auto; bottom: auto; z-index: 30; box-shadow: none; }
/* 오른쪽 전곡 목록이 있는 넓은 화면: 떠 있는 영상은 그 열 맨 아래에 같은 폭으로 놓고, 목록은 그 위에서 끝난다 (본문·목록과 겹치지 않게) */
@media (min-width: 1280px) {
    .bn-video:not(.is-docked) { right: max(24px, calc((100% - 1440px) / 2 + 24px)); width: 250px; height: 200px; bottom: calc(var(--bar-h) + 12px); }
    html.bn-video-float .panel-right .panel-inner { bottom: calc(var(--bar-h) + 200px + 24px); }
}
.bn-player:not(.has-video) .bn-video { display: none; }
[data-dock].is-docked > * { visibility: hidden; }

/* 재생 목록 패널: 한 줄 전체가 하나의 행. 마우스를 올린 줄과 지금 곡 줄이 같은 모양으로 강조된다 */
.bn-queue {
    position: absolute; right: 16px; bottom: calc(100% + 10px); width: min(380px, calc(100vw - 32px)); max-height: min(60vh, 520px);
    overflow-y: auto; border-radius: var(--r-lg); padding: .5rem;
    background: rgba(46, 51, 61, .96); border: 1px solid var(--hairline);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55); backdrop-filter: blur(20px);
}
.bn-queue-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .35rem .5rem .5rem; }
.icon-btn {
    flex-shrink: 0; display: inline-grid; place-items: center; width: var(--h-md); height: var(--h-md); border-radius: var(--r-full);
    color: var(--text-3); font-size: var(--fs-sm); transition: color .15s, background .15s;
}
.icon-btn:hover { color: var(--text); background: rgba(255, 255, 255, .1); }
.icon-btn[disabled] { opacity: .3; pointer-events: none; }
/* 재생 목록 버튼은 아이콘 + 숫자라 알약 모양 */
.bn-btn[data-bn="queue"] { padding: 0 .65rem; }
.bn-collapse svg { width: 18px; height: 18px; fill: currentColor; }

/* 곡·앨범 화면의 재생 버튼들 */
.play-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ================= 곡 화면 액션 바 (동그란 아이콘 버튼 + 툴팁) ================= */
.song-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: 1.1rem; }
.act-group { display: inline-flex; align-items: center; gap: .4rem; }
.act-btn {
    display: inline-grid; place-items: center; width: var(--h-act); height: var(--h-act); border-radius: var(--r-full); flex-shrink: 0;
    background: var(--surface-2); color: var(--text); cursor: pointer; list-style: none;
    transition: background .15s var(--ease), color .15s, transform .12s var(--ease);
}
.act-btn::-webkit-details-marker { display: none; }
.act-btn:hover { background: var(--surface-3); }
.act-btn:active { transform: scale(.94); }
.act-btn svg { width: 20px; height: 20px; fill: currentColor; }
.act-menu[open] > .act-btn { background: var(--surface-3); }
.menu-left { left: 0; right: auto; }
/* 들었어요: 헤드폰. 켜지면 금빛으로 채워진다 */
.act-heard { color: var(--text-2); }
/* 청취 완료: 흰빛으로 '켜짐' (노랑은 추천 별에만) */
.act-heard[aria-pressed="true"] { background: var(--done-tint); color: var(--done); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45), 0 0 10px var(--done-glow); }
.act-heard[aria-pressed="true"]:hover { background: rgba(255, 255, 255, .2); }
.act-sm { width: 34px; height: 34px; }
/* 아이콘 + 숫자 (추천·한줄평 수) */
.act-sm svg { width: 16px; height: 16px; }
.col-check-sample svg { width: 11px; height: 11px; fill: currentColor; }

/* 다른 앱에서 듣기: 버튼 + 메뉴 (서비스마다 로고 · 이름 · 설명) */
.listen-menu > summary { list-style: none; cursor: pointer; }
.listen-menu > summary::-webkit-details-marker { display: none; }
.listen-menu[open] > .act-btn { background: var(--surface-3); }
.listen-panel { width: 280px; padding: .4rem; }
.svc-row {
    display: flex; align-items: center; gap: .75rem; padding: .55rem .6rem; border-radius: var(--r-md);
    transition: background .15s var(--ease);
}
.svc-row:hover, .svc-row:focus-visible { background: rgba(255, 255, 255, .08); }
.svc-logo { width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; }
.svc-logo svg { width: 28px; height: 28px; }
.svc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.svc-text strong { font-size: var(--fs-sm); font-weight: 600; }
.svc-text small { font-size: var(--fs-xs); color: var(--text-3); }
.svc-go { color: var(--text-3); font-size: var(--fs-sm); }
.svc-row:hover .svc-go { color: var(--text); }

/* 경로 표시: 작은 회색 글씨, 마우스를 올리면 밝게 */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: var(--fs-xs); color: var(--text-3); }
.crumbs a { color: var(--text-2); border-radius: 4px; transition: color .15s; }
.crumbs a:hover { color: var(--text); }
.crumb-sep { color: var(--text-3); }

/* ================= 공통: 곡 한 줄 (재생 목록 · 플레이리스트 · 도감) =================
   [재킷(마우스를 올리면 ▶) | 제목 두 줄 + 회색 정보] [오른쪽 버튼들: 마우스를 올리거나 키보드로 들어오면 보임] */
.q-list { display: flex; flex-direction: column; gap: 2px; }
.q-row {
    display: flex; align-items: center; gap: .25rem; padding: .25rem; border-radius: calc(var(--r-lg) - 8px); min-height: 60px;
    transition: background .15s var(--ease);
}
.q-row:hover, .q-row:focus-within { background: rgba(255, 255, 255, .06); }
.q-row[aria-current="true"] { background: rgba(255, 255, 255, .1); }
.q-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: .75rem; padding: .25rem .35rem; border-radius: var(--r-sm); text-align: left; }
.q-jacket { width: 2.75rem; }
.q-play, .q-eq {
    position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .45);
    color: #fff; font-size: var(--fs-xs); opacity: 0; transition: opacity .15s var(--ease);
}
.q-row:hover .q-play, .q-main:focus-visible .q-play { opacity: 1; }
.q-row[aria-current="true"] .media-title { color: var(--text); font-weight: 600; }
/* 앨범 수록곡 번호: 마우스를 올리면 ▶ */
.q-num { position: relative; width: 1.75rem; flex-shrink: 0; text-align: center; font-size: var(--fs-sm); color: var(--text-3); font-variant-numeric: tabular-nums; }
.q-num-play { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text); font-size: .75rem; opacity: 0; }
.q-row:hover .q-num-play, .q-main:focus-visible .q-num-play { opacity: 1; }
.q-row:hover .q-num-play + *, .q-row:hover .q-num-n:has(+ .q-num-play) { opacity: 0; }
.disc-label { padding: .75rem .75rem .25rem; font-size: var(--fs-xs); font-weight: 600; color: var(--text-3); }
.q-row > .tag { flex-shrink: 0; cursor: help; }
.q-no { width: 1.5rem; flex-shrink: 0; text-align: right; font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }

/* 지금 재생 중: 재킷 위 막대 (재생 중일 때만 움직임) */
.q-row[aria-current="true"] .q-eq { opacity: 1; display: flex; align-items: flex-end; justify-content: center; gap: 2px; padding-bottom: 30%; }
.q-row[aria-current="true"]:hover .q-eq { opacity: 0; }
.q-eq i { width: 3px; height: 30%; border-radius: 2px; background: var(--done); }
html.bn-playing .q-eq i { animation: eq 1s ease-in-out infinite; }
.q-eq i:nth-child(2) { animation-delay: -.4s; }
.q-eq i:nth-child(3) { animation-delay: -.7s; }
@keyframes eq { 0%, 100% { height: 25%; } 50% { height: 60%; } }

.row-actions { display: flex; align-items: center; gap: 0; flex-shrink: 0; }
@media (hover: hover) {
    .row-actions { opacity: 0; transition: opacity .15s var(--ease); }
    .q-row:hover .row-actions, .q-row:focus-within .row-actions { opacity: 1; }
}

/* ================= 툴팁: data-tip =================
   카드·패널이 바깥을 잘라도 가리지 않도록, JS 가 body 맨 위층에 하나만 띄운다 (.float-tip). */
/* 잘린 제목에 마우스를 올리면 전체 제목 (목록 밖으로 떠서 잘리지 않게 fixed) */
.float-tip {
    position: fixed; z-index: 90; max-width: 320px; padding: .45rem .65rem; border-radius: var(--r-md); pointer-events: none;
    background: var(--surface-4); color: var(--text); font-size: var(--fs-xs); line-height: 1.4; box-shadow: 0 10px 24px rgba(0, 0, 0, .5);
    opacity: 0; transition: opacity .12s var(--ease);
}
.float-tip.is-on { opacity: 1; }
.float-tip.is-wide { max-width: 260px; }
.float-tip small { display: block; color: var(--text-2); font-size: var(--fs-xs); }

/* ================= 보관함 ================= */
/* 보관함 탭: 모양은 위 세그먼트 컨트롤 */
.lib-desc { margin-top: .75rem; font-size: var(--fs-xs); color: var(--text-2); }

.lib-panel { padding: .5rem; }
.lib-empty { display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 1.75rem 1rem; text-align: center; font-size: var(--fs-sm); }
.lib-empty-ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-full); background: var(--surface-2); color: var(--text-2); font-size: var(--fs-lg); }
.lib-inline { display: flex; align-items: center; gap: .5rem; }
.lib-inline .field { flex: 1; min-height: 40px; }
/* 메뉴 판(회색) 안의 버튼·입력칸: 판과 같은 색이라 안 보이던 것을 한 단계 밝게, 입력칸은 검색칸과 같은 채운 모양 */
.action-panel .btn-ghost { background: var(--surface-3); }
.action-panel .btn-ghost:hover { background: var(--surface-4); }
.action-panel .field { min-height: var(--h-md); padding: .4rem .75rem; border-radius: var(--r-md); border-color: transparent; background: var(--fill); }
.action-panel .field:focus { border-color: var(--focus); }
.action-panel .lib-inline .btn-sm { min-height: var(--h-md); }
.btn-block { width: 100%; }
.pl-new > summary { cursor: pointer; }
.pl-new .menu-panel { width: min(320px, calc(100vw - 2rem)); }

.pl-card { padding: .75rem; scroll-margin-top: 90px; }
.pl-card:focus { outline: none; }
.pl-head { display: flex; align-items: center; gap: .9rem; }
.pl-preview { display: block; margin-top: .15rem; font-size: var(--fs-xs); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-cover {
    width: 64px; height: 64px; flex-shrink: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
    border-radius: var(--r-md); overflow: hidden; background: var(--surface-2); position: relative;
}
.pl-cover img { width: 100%; height: 100%; object-fit: cover; }
.pl-cover img:only-of-type { grid-column: 1 / -1; grid-row: 1 / -1; }
.pl-cover .jacket-empty { position: static; grid-column: 1 / -1; grid-row: 1 / -1; font-size: var(--fs-xl); }
.cover-play {
    position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .45);
    color: #fff; font-size: var(--fs-lg); opacity: 0; transition: opacity .15s var(--ease);
}
.pl-cover:hover .cover-play, .pl-cover:focus-visible .cover-play { opacity: 1; }
.pl-cover[disabled] .cover-play { display: none; }
.pl-actions { display: flex; align-items: center; gap: .25rem; flex-shrink: 0; }
.pl-actions .play-round[disabled], .pl-actions .icon-btn[disabled] { opacity: .35; pointer-events: none; }
/* 재생: 흰 원 + 검은 ▶ (하단 플레이어의 재생 버튼과 같은 모양) */
.play-round {
    flex-shrink: 0; display: inline-grid; place-items: center; width: 40px; height: 40px; margin-right: .25rem; border-radius: var(--r-full);
    background: var(--text); color: #000; transition: transform .15s var(--ease), background .15s;
}
.play-round svg { width: 18px; height: 18px; fill: currentColor; margin-left: 2px; }
.play-round:hover { background: #fff; transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { .play-round:hover { transform: none; } }
.more-menu > summary { list-style: none; cursor: pointer; }
.more-menu > summary::-webkit-details-marker { display: none; }
.more-menu[open] > summary { color: var(--text); background: rgba(255, 255, 255, .1); }
.menu-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 280px; }
/* 지우기 같은 되돌릴 수 없는 동작: 다른 버튼과 같은 모양, 글자만 빨갛게 */
.btn-destructive { color: var(--danger); }
.action-panel .btn-destructive:hover { background: rgba(255, 105, 97, .16); }
.pl-body { margin-top: .5rem; }
.pl-summary { display: inline-flex; align-items: center; gap: .4rem; min-height: var(--h-md); padding: 0 .6rem 0 .4rem; border-radius: var(--r-md); font-size: var(--fs-xs); color: var(--text-2); }
.pl-summary:hover { background: rgba(255, 255, 255, .05); color: var(--text); }
@media (max-width: 559px) {
    .pl-head { flex-wrap: wrap; }
    .pl-actions { width: 100%; justify-content: flex-end; }
}

.col-hero { padding: 1.25rem 1.25rem 1.4rem; }
.col-hero-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.col-count { margin-top: .35rem; font-size: 2.4rem; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.col-count span:not([class]) { color: var(--text-3); }
.col-unit { margin-left: .3rem; font-size: var(--fs-lg); font-weight: 400; color: var(--text-2); }
.col-percent { font-size: var(--fs-lg); font-weight: 600; color: var(--done); font-variant-numeric: tabular-nums; }
.progress { height: 8px; margin-top: .75rem; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; }
.progress span { display: block; height: 100%; border-radius: inherit; background: var(--done); transition: width .4s var(--ease); }
.col-steps { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: 1rem; font-size: var(--fs-xs); color: var(--text-2); }
.col-steps li { display: inline-flex; align-items: center; gap: .35rem; }
.col-step-no { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: var(--r-full); background: var(--surface-3); color: var(--text); font-size: var(--fs-xs); font-weight: 600; }
.col-check-sample { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: var(--r-full); background: var(--done-tint); color: var(--done); font-size: .65rem; font-weight: 700; }
.col-group { overflow: visible; }
.col-summary { display: flex; align-items: center; gap: .8rem; padding: .7rem 1rem; border-radius: var(--r-lg); transition: background .15s var(--ease); }
.col-summary:hover { background: rgba(255, 255, 255, .04); }
.col-summary .chev { color: var(--text-3); }
.col-bar { display: block; height: 4px; margin-top: .45rem; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; }
.col-bar span { display: block; height: 100%; border-radius: inherit; background: var(--text-2); }
.col-group.is-complete .col-bar span { background: var(--done); box-shadow: 0 0 8px var(--done-glow); }
.col-num { display: flex; align-items: center; gap: .4rem; font-size: var(--fs-xs); color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.q-row.is-heard .media-title { color: var(--text-2); }

/* 앨범 칩: 재킷이 없으면 첫 글자 */
.album-chip-mono { position: absolute; inset: 0; display: grid; place-items: center; font-size: .62rem; font-weight: 600; color: var(--text); }

/* 들었어요 체크 */
.lib-pick { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; }
.lib-pick-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: var(--h-act); padding: 0 .6rem; border-radius: var(--r-md); text-align: left; }
.lib-pick-btn:hover { background: rgba(255, 255, 255, .08); }

[data-region][aria-busy="true"] { opacity: .6; transition: opacity .15s; }
/* 갈아 끼우지 않고 상태만 바꾸는 칸(추천 버튼 · 재킷 띠지)은 흐려지지 않는다 → 깜빡임 없음 */
[data-region][data-region-keep][aria-busy="true"] { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .toast { opacity: 1; }
}
@media (forced-colors: active) {
    .tab[aria-selected="true"], .segmented a[aria-current="true"], .lib-seg a[aria-current="page"], html:not(.jp-first) .title-toggle .tt-ko, html.jp-first .title-toggle .tt-jp { outline: 2px solid CanvasText; }
}

/* ================= 공유 · 기록 ================= */
.plays-note { margin-top: .45rem; font-size: var(--fs-xs); color: var(--text-2); }
.plays-note strong { color: var(--text); font-weight: 600; }
.plays-note [aria-hidden] { margin-right: .15rem; }

/* 공유 링크가 켜진 플레이리스트 */
.pl-share { display: flex; align-items: center; gap: .6rem; margin-top: .75rem; padding: .55rem .6rem .55rem .75rem; border-radius: var(--r-md); background: var(--surface-2); }
.pl-share-ico svg { width: 18px; height: 18px; fill: var(--text-2); display: block; }
.pl-share-link { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-xs); color: var(--text-2); }
.pl-share-link:hover { color: var(--text); text-decoration: underline; }
.pl-cover-lg { width: 160px; height: 160px; border-radius: var(--r-md); }
@media (max-width: 479px) { .pl-cover-lg { width: 112px; height: 112px; } }

/* 기록 탭 */
.rec-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.rec-months { display: flex; gap: .25rem; }
.rec-hero { padding: 1.25rem; }
.rec-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.rec-stats dt { font-size: var(--fs-xs); color: var(--text-2); }
.rec-stats dd { margin-top: .2rem; font-size: var(--fs-md); color: var(--text-2); }
.rec-stats strong { font-size: 2rem; font-weight: 600; color: var(--text); letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin-right: .15rem; }
@media (max-width: 479px) { .rec-stats strong { font-size: var(--fs-2xl); } }
.rec-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.rec-chips li { padding: .3rem .7rem; border-radius: var(--r-full); background: var(--surface-2); font-size: var(--fs-xs); color: var(--text); }
.rec-chips li.is-star { background: var(--star-tint); color: var(--star); }
.rec-rank { width: 1.6rem; flex-shrink: 0; text-align: center; font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; }
.rec-rank.is-first { color: var(--text); }
.rec-plays { flex-shrink: 0; padding: 0 .5rem; font-size: var(--fs-xs); color: var(--text-2); font-variant-numeric: tabular-nums; }
.rec-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.rec-tile { display: flex; flex-direction: column; gap: .3rem; padding: 1rem 1.1rem; }
.rec-tile strong { font-size: var(--fs-lg); font-weight: 600; }

/* ---- 카드 만들기 창 ---- */
.share-dialog {
    width: min(920px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: var(--r-lg);
    background: var(--surface); color: var(--text); box-shadow: 0 24px 80px rgba(0, 0, 0, .7); overflow: hidden;
}
.share-dialog::backdrop { background: rgba(0, 0, 0, .6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.share-dialog[open] { animation: share-in .22s var(--ease); }
@keyframes share-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .share-dialog[open] { animation: none; } }
.share-inner { display: flex; flex-direction: column; max-height: calc(100dvh - 32px); }
.share-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.1rem .5rem 1.4rem; }
.share-title { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.02em; }
.share-sub { margin-top: .1rem; font-size: var(--fs-xs); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; padding: .5rem 1.4rem 1.4rem; overflow: auto; }
@media (max-width: 719px) { .share-body { grid-template-columns: 1fr; gap: 1rem; padding: .25rem 1rem 1rem; } }

.share-preview {
    position: relative; margin: 0 auto; width: 100%; border-radius: var(--r-lg); overflow: hidden; background: var(--surface-2);
    aspect-ratio: 9 / 16; max-height: min(64vh, 600px); max-width: calc(min(64vh, 600px) * 9 / 16);
}
.share-preview[data-format="square"] { aspect-ratio: 1; max-width: min(64vh, 420px); max-height: none; }
@media (max-width: 719px) {
    .share-preview { max-height: 46vh; max-width: calc(46vh * 9 / 16); }
    .share-preview[data-format="square"] { max-width: min(46vh, 100%); }
}
.share-preview img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .2s var(--ease); }
.share-preview.is-loading img { opacity: .35; }
.share-loading {
    position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
    font-size: var(--fs-xs); color: var(--text-2); text-align: center; padding: 1rem;
}
.share-preview.is-loading .share-loading, .share-preview.is-error .share-loading { display: flex; }
.share-preview.is-error .share-spin { display: none; }
.share-spin { width: 22px; height: 22px; border-radius: var(--r-full); border: 2px solid var(--surface-3); border-top-color: var(--text); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.share-side { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
.share-field { border: 0; padding: 0; margin: 0; min-width: 0; }
.share-field legend { margin-bottom: .45rem; font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: flex; flex-direction: column; gap: .1rem; padding: .65rem .8rem; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid transparent; transition: background .15s, border-color .15s; }
.seg b { font-size: var(--fs-sm); font-weight: 600; }
.seg small { font-size: var(--fs-xs); color: var(--text-2); }
.seg label:hover span { background: var(--surface-3); }
.seg input:checked + span { border-color: rgba(255, 255, 255, .55); background: var(--surface-3); }
.seg input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.share-check { display: flex; align-items: center; gap: .6rem; min-height: var(--h-lg); padding: 0 .2rem; font-size: var(--fs-sm); cursor: pointer; }
.share-check input { width: 20px; height: 20px; accent-color: var(--text); flex-shrink: 0; }
.share-check input:disabled + span { color: var(--text-3); }
.share-check .text-btn { margin-left: auto; font-size: var(--fs-xs); color: var(--text); }
.share-hint { margin: -.35rem 0 .2rem 2.1rem; font-size: var(--fs-xs); color: var(--text-3); }
.share-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.share-actions .btn { gap: .4rem; }
.share-actions .btn svg { width: 18px; height: 18px; fill: currentColor; }
.share-actions .btn-primary { flex: 1 1 100%; min-height: var(--h-xl); font-size: var(--fs-md); }
.share-actions .btn-ghost { flex: 1 1 0; }
.share-stats { padding: .7rem .85rem; border-radius: var(--r-md); background: var(--surface-2); font-size: var(--fs-xs); color: var(--text-2); }
.share-stats strong { color: var(--text); }
.share-stats [aria-hidden] { color: var(--star); margin-right: .2rem; }
.share-note { font-size: var(--fs-xs); line-height: 1.55; color: var(--text-3); }
.bn-share { display: inline-grid; }
@media (max-width: 379px) { .bn-share { display: none; } }

/* 로고 (back number blues): 붓글씨 로고 이미지. 바탕이 투명해 헤더 색 위에 그대로 얹힌다 */
.site-logo { display: block; height: 42px; width: auto; }
.site-logo-link { padding: 2px 0; }
@media (max-width: 479px) { .site-logo { height: 34px; } }

/* 떠 있는 영상 옮기기: 위쪽 손잡이 띠 (마우스를 올리거나 키보드로 들어오면 보임) */
.bn-grip {
    position: absolute; top: 0; left: 0; right: 0; z-index: 2; height: 30px; display: none; place-items: center;
    background: linear-gradient(rgba(0, 0, 0, .72), rgba(0, 0, 0, 0)); color: var(--text);
    cursor: grab; touch-action: none; opacity: 0; transition: opacity .2s var(--ease);
}
@media (hover: none) { .bn-video:not(.is-docked) .bn-grip { opacity: 1; touch-action: none; } }
.bn-grip svg { width: 18px; height: 18px; fill: currentColor; transform: rotate(90deg); }
.bn-video:not(.is-docked) .bn-grip { display: grid; }
.bn-video:hover .bn-grip, .bn-grip:focus-visible, .bn-video.is-dragging .bn-grip { opacity: 1; }
.bn-grip:focus-visible { outline-offset: -3px; }
@media (hover: none) { .bn-grip { opacity: .85; } }
.bn-video.is-dragging { box-shadow: 0 24px 60px rgba(0, 0, 0, .75); }
.bn-video.is-dragging .bn-grip { cursor: grabbing; }
/* 끄는 동안 영상이 마우스를 가로채지 않게 */
.bn-video.is-dragging iframe { pointer-events: none; }

/*
 * 화면 첫 줄 맞추기: 디스코그래피 검색·보관함 탭이 양옆 패널의 탭(랭킹)·찾기 칸(전곡)과 같은 높이에서 시작한다.
 * 패널은 [제목 한 줄 + .75rem] 아래에 탭·찾기 칸이 있으므로 본문도 그만큼 내린다.
 */
.page-top { margin-top: 0 !important; }
@media (min-width: 1024px) {
    .page-top { margin-top: calc(.95rem * 1.47 + .75rem) !important; }
}

/* 디스코그래피 필터 줄: 검색 칸·랭킹 탭과 같은 높이(36px)·같은 회색 바탕 */
.disco-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .75rem; }
.disco-filters-end { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.disco-filters .segmented a { position: relative; }
.disco-filters .segmented a::after { content: ""; position: absolute; inset: -4px 0; } /* 누르는 면적 44px */
.select-pill {
    height: var(--h-md); padding: 0 2.1rem 0 .9rem; border: 0; border-radius: var(--r-md); cursor: pointer;
    background: var(--fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a1a1a6'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right .55rem center / 18px;
    color: var(--text); font-size: var(--fs-xs); font-weight: 500; appearance: none; -webkit-appearance: none;
    transition: background-color .2s var(--ease);
}
.select-pill:hover { background-color: var(--fill-hover); }
.select-pill.is-set { background-color: var(--fill-selected); font-weight: 600; }
.select-pill:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.select-pill option { background: var(--surface-2); color: var(--text); }
@media (max-width: 639px) {
    .disco-filters, .disco-filters-end { width: 100%; }
    .disco-filters > .segmented { width: 100%; justify-content: space-between; }
    .disco-filters > .segmented a { flex: 1; padding: 0 .4rem; }
}

/*
 * 곡 화면 '이 곡이 실린 음반 · 다음 발견': 두 열의 카드 높이를 맞춘다.
 * 한국어 제목이 원제와 같은 곡은 줄이 하나 적어 낮아지므로, 세 줄(제목·부제·정보) 높이를 기본으로 둔다.
 * 오른쪽 끝은 두 목록 모두 회색 꼬리표(최초 수록 · 같은 앨범 다음 곡 · 다른 시기의 곡)로 통일.
 */

/*
 * 홈 오늘의 발견 — 애플 뮤직 에디토리얼 카드
 * - 카드 전체에 재킷을 크게 흐려 깔고(앨범 색), 글자 쪽은 어둡게 눌러 읽기 쉽게.
 * - 글자는 흰색 단계만: 제목 100% · 보조 72% · 정보 58%. 파란 링크색·회색 상자 없음.
 * - 카드 어디를 눌러도 곡 화면 (제목 링크를 카드 크기로 늘림). 재생·앨범·이유·한줄평은 그 위에서 따로.
 * - '다른 곡 추천받기'는 카드 밖 제목 줄 오른쪽의 조용한 글자 버튼.
 */
.pick-head { align-items: flex-end; }
.pick-intro { margin-top: .2rem; font-size: var(--fs-xs); color: var(--text-2); }
/* 제목 줄 오른쪽의 동작: 버튼 상자 없이 조용한 글자. 마우스를 올리면 밝아지고 아이콘이 동작을 흉내 낸다 */
.head-actions { display: inline-flex; align-items: center; gap: 1rem; flex-shrink: 0; }
/* 글자 버튼 중간 크기(.text-btn-md): 제목 줄 오른쪽 동작. 아이콘은 data-anim 으로 동작을 흉내 낸다 */
.text-btn-md { gap: .35rem; padding: 0 .1rem; font-size: var(--fs-sm); font-weight: 500; color: var(--text-2); white-space: nowrap; flex-shrink: 0; list-style: none; }
.text-btn-md::-webkit-details-marker { display: none; }
.text-btn svg { width: 16px; height: 16px; fill: currentColor; transition: transform .45s var(--ease); }
.text-btn:focus-visible, [open] > .text-btn { color: var(--text); }
.text-btn[data-anim="spin"]:hover svg { transform: rotate(180deg); }    /* 새로고침처럼 */
.text-btn[data-anim="turn"]:hover svg, [open] > .text-btn[data-anim="turn"] svg { transform: rotate(90deg); }  /* ＋ 가 돌아간다 */
.text-btn[data-anim="shake"]:hover svg { animation: ha-shake .5s var(--ease); }  /* 휴지통이 흔들린다 */
.text-btn[data-anim="pop"]:hover svg { animation: ha-pop .45s var(--ease); }     /* 목록에 하나 더 담기듯 */
@keyframes ha-shake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 50% { transform: rotate(10deg); } 75% { transform: rotate(-6deg); } }
@keyframes ha-pop { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.25) translateY(-1px); } }
@media (prefers-reduced-motion: reduce) { .text-btn svg, .text-btn:hover svg { transform: none !important; animation: none !important; } }
.head-menu .menu-panel { width: min(320px, calc(100vw - 2rem)); }
/* 좁은 화면: 동작 글자를 짧게 (제목이 두 줄로 꺾이지 않게) */
@media (max-width: 479px) { .ha-more { display: none; } .head-actions { gap: .75rem; } }
.section-head .section-title { white-space: nowrap; }
/* 빈 상태: 상자 없이 한 줄 */
.empty-line { padding: .25rem 0; font-size: var(--fs-sm); color: var(--text-2); }
.lib-panel.is-empty { background: none; box-shadow: none; padding: 0; }

.pick-card {
    position: relative; isolation: isolate; border-radius: var(--r-lg);
    background: linear-gradient(135deg, hsl(var(--h, 220) 30% 22%), hsl(var(--h, 220) 25% 9%));
}
.pick-backdrop {
    position: absolute; inset: -60px; z-index: -2; width: calc(100% + 120px); height: calc(100% + 120px);
    object-fit: cover; filter: blur(60px) saturate(1.5) brightness(.62); transform: scale(1.1);
}
/* 왼쪽(재킷)은 앨범 색을 살리고, 오른쪽(글자)은 깊게 눌러 대비 확보 */
.pick-card::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(90deg, rgba(0, 0, 0, .05) 0%, rgba(0, 0, 0, .28) 45%, rgba(0, 0, 0, .62) 100%);
}
@media (max-width: 767px) {
    .pick-card::before { background: linear-gradient(180deg, rgba(0, 0, 0, .05) 0%, rgba(0, 0, 0, .35) 50%, rgba(0, 0, 0, .66) 100%); }
}
.pick-card .hero-art { background: transparent; min-height: 300px; }
/* 재생 중에도 카드 모양 · 앨범 빛은 그대로: 영상은 재킷 자리(둥근 네모) 안에서만 나온다 */
.pick-card .hero-art.is-playing, .pick-card .hero-art.is-docked { background: transparent; }
.pick-card .hero-jacket { width: min(68%, 280px); border-radius: var(--r-md); margin: 2.25rem 0; box-shadow: 0 30px 60px -18px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .06); transition: transform .5s var(--ease); }
.pick-card:hover .hero-jacket { transform: scale(1.015); }
@media (prefers-reduced-motion: reduce) { .pick-card:hover .hero-jacket { transform: none; } }

.pick-body { padding: 1.75rem 1.5rem 1.75rem; color: #fff; }
@media (min-width: 768px) { .pick-body { padding: 2.25rem 2.5rem 2.25rem 1rem; } }
.pick-lens { font-size: var(--fs-xs); font-weight: 600; color: rgba(255, 255, 255, .62); }
.pick-lens span { cursor: help; border-bottom: 1px dotted rgba(255, 255, 255, .3); padding-bottom: 1px; }
.pick-title { margin-top: .6rem; }
.pick-title-main { display: block; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.35rem); font-weight: 700; line-height: 1.12; letter-spacing: -.03em; color: #fff; word-break: keep-all; overflow-wrap: anywhere; }
.pick-title-main[lang="ja"] { letter-spacing: -.01em; }
.pick-title-sub { display: block; margin-top: .45rem; font-size: var(--fs-lg); font-weight: 500; line-height: 1.35; color: rgba(255, 255, 255, .72); }
.pick-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: 1rem; font-size: var(--fs-sm); color: rgba(255, 255, 255, .58); }
.pick-album { color: rgba(255, 255, 255, .78); font-weight: 500; border-radius: var(--r-sm); }
.pick-album:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .4); }
.pick-album .album-chip-jacket { width: 1.35rem; height: 1.35rem; border-radius: 4px; }

.pick-comments { margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid rgba(255, 255, 255, .12); }
.pick-card .hero-comment { background: rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .9); }
.pick-card .hero-comment:hover { background: rgba(255, 255, 255, .13); }
.pick-card .hero-comment-body::before, .pick-card .hero-comment-body::after { color: rgba(255, 255, 255, .45); }
.pick-card .hero-comment-like { color: rgba(255, 255, 255, .55); }
.pick-card .pick-quote { background: rgba(255, 255, 255, .07); }
.pick-first-comment {
    display: inline-flex; align-items: center; gap: .45rem; min-height: var(--h-md); padding: 0 .9rem; border-radius: var(--r-full);
    font-size: var(--fs-sm); font-weight: 500; color: rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .1);
    transition: background .2s var(--ease);
}
.pick-first-comment svg { width: 16px; height: 16px; fill: currentColor; opacity: .8; }
.pick-first-comment:hover { background: rgba(255, 255, 255, .17); color: #fff; }

.pick-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pick-link:focus-visible { outline: none; }
.pick-card:has(.pick-link:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.pick-card .hero-play, .pick-card .pick-body a:not(.pick-link), .pick-lens span { position: relative; z-index: 2; }
.pick-card .hero-play { position: absolute; }

/* 하단 안내: 넓은 화면은 세 칸, 좁은 화면은 위아래로. 한 문장씩, 낱말 중간에서 줄바꿈 없이 */
.footer-body { padding-top: 2rem; font-size: var(--fs-xs); line-height: 1.65; color: var(--text-3); word-break: keep-all; overflow-wrap: break-word; }
.footer-cols { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; } }
.footer-body p + p { margin-top: .35rem; }
.footer-title, .footer-label { margin-bottom: .5rem; font-size: var(--fs-sm); font-weight: 600; line-height: 1.4; }
.footer-title { color: var(--text); }
.footer-label { color: var(--text-2); }
.footer-link { color: var(--text-2); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .25); text-underline-offset: 3px; }
.footer-link:hover { color: var(--text); text-decoration-color: currentColor; }
.footer-copy { margin-top: 2rem; color: var(--text-3); }

/* 보관함: back number blues 자동 플레이리스트 (전곡 · 앨범마다) */
.auto-grid { display: grid; gap: 1.25rem .9rem; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.auto-pl { position: relative; min-width: 0; }
.auto-cover {
    position: relative; display: block; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: var(--r-md);
    background: var(--surface-2); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06);
}
.auto-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.auto-cover.is-mosaic { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.auto-cover.is-mosaic img { aspect-ratio: 1; }
.auto-mono { display: grid; place-items: center; width: 100%; height: 100%; font-size: 2.4rem; font-weight: 600; color: rgba(255, 255, 255, .85);
    background: linear-gradient(135deg, hsl(var(--h) 35% 32%), hsl(var(--h) 30% 14%)); }
.auto-cover .cover-play {
    inset: auto .55rem .55rem auto; width: 40px; height: 40px; border-radius: var(--r-full); font-size: var(--fs-sm);
    background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: var(--shadow-cover);
}
.auto-cover:hover .cover-play, .auto-cover:focus-visible .cover-play { opacity: 1; }
@media (hover: none) { .auto-cover .cover-play { opacity: 1; } }
.auto-actions .icon-btn svg { width: 16px; height: 16px; fill: currentColor; }
.auto-cover:hover img { transform: scale(1.03); }
/* YouTube 썸네일(4:3) 표지: 위아래 검은 띠와 좌우 여백을 잘라 가운데 정사각형(재킷)만 */
.cover img.is-video, .auto-cover img.is-video { transform: scale(1.34); }
.auto-cover:hover img.is-video { transform: scale(1.38); }
@media (prefers-reduced-motion: reduce) { .auto-cover:hover img.is-video { transform: scale(1.34); } }
@media (prefers-reduced-motion: reduce) { .auto-cover:hover img { transform: none; } }
.auto-name { margin-top: .55rem; font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auto-meta { margin-top: .1rem; font-size: var(--fs-xs); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 재생 목록 끝에 추가 · 복사: 표지 위 오른쪽 위에, 마우스를 올리거나 키보드로 들어왔을 때만 */
.auto-actions {
    position: absolute; top: .5rem; right: .5rem; display: flex; gap: .3rem;
    opacity: 0; transform: translateY(-4px); transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.auto-pl:hover .auto-actions, .auto-pl:focus-within .auto-actions { opacity: 1; transform: none; }
.auto-actions .icon-btn {
    width: var(--h-sm); height: var(--h-sm); min-width: var(--h-sm); min-height: var(--h-sm); border-radius: var(--r-full); color: #fff;
    background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.auto-actions .icon-btn:hover { background: rgba(0, 0, 0, .75); }
.auto-actions form { display: contents; }
@media (hover: none) { .auto-actions { display: none; } }

/* 곡 화면으로 가는 아이콘(♪) 등 작은 원형 버튼 안의 그림 */
.icon-btn svg { width: 16px; height: 16px; fill: currentColor; }

/* 분위기 태그 (글자만, 사이트와 같은 회색 알약) */
.mood-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.mood-chip {
    display: inline-flex; align-items: center; gap: .45rem; min-height: var(--h-md); padding: 0 .9rem; border-radius: var(--r-full);
    background: var(--fill); color: var(--text); font-size: var(--fs-sm); font-weight: 500; position: relative;
    transition: background .15s var(--ease), color .15s;
}
.mood-chip::after { content: ""; position: absolute; inset: -4px 0; }
.mood-chip:hover { background: var(--fill-hover); }
.mood-chip .n { font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
.mood-chip[aria-pressed="true"] { background: var(--text); color: #000; }
.mood-chip[aria-pressed="true"] .n { color: rgba(0, 0, 0, .55); }
.mood-group-label { margin: .9rem 0 .45rem; font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); }

.mood-chip[aria-current="page"] { background: var(--text); color: #000; }
.mood-chip[aria-current="page"] .n { color: rgba(0, 0, 0, .55); }
/* 분위기 전체: 태그 카드 */
.mood-cards { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.mood-card {
    position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: .15rem; min-height: 88px;
    padding: .9rem 1rem; border-radius: var(--r-md); background: var(--surface); transition: background .2s var(--ease);
}
.mood-card:hover { background: var(--surface-2); }
.mood-card-name { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.01em; }
.mood-card-meta { font-size: var(--fs-xs); color: var(--text-3); }
.mood-card.is-now { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.mood-card-now { position: absolute; top: .7rem; right: .8rem; font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); }
/* 태그 하나 화면 */
.mood-hero { margin-top: 1.25rem; }
.mood-hero-title { margin-top: .35rem; font-size: clamp(2rem, 1.4rem + 2vw, 2.8rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.mood-hero .pick-lens { color: var(--text-2); }
.mood-hero .pick-lens span { cursor: auto; border: 0; }

.auto-name a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* 곡 화면 태그: 제목 바로 아래 태그 줄, 안내 문구는 '태그 달기'를 펼쳤을 때만 */
#moods .section-title { margin-bottom: .9rem; }

/* ===== 디자인 다듬기 (taste 점검 반영) ===== */
/* 가장 작은 글자를 13px 로 맞춘다 (Tailwind text-xs 는 12px) */
.text-xs, .text-\[11px\] { font-size: var(--fs-xs); line-height: 1.25rem; }

/* 선택된 탭·세그먼트: 그림자 없이 색 단계로 */
.tab[aria-selected="true"], .segmented a[aria-current="true"],
html[data-rank-tab="all"] #tab-all { box-shadow: none; }
/* 목록 사이 가는 선 → 간격 */
.rank-list li + li, .feed > li + li { border-top: 0; margin-top: 2px; }
.site-header { border-bottom-color: transparent; }
.pick-comments { border-top: 0; padding-top: 0; }
.pl-body { border-top: 0; }
/* 재킷 테두리 선·쉬는 그림자 없이 */
.jacket::after, .cover::after { box-shadow: none; }
.auto-cover { box-shadow: none; }
/* 그라데이션 → 단색 */
.cover { background: hsl(var(--h), 16%, 17%); }
.auto-mono { background: hsl(var(--h) 30% 22%); }
.pick-card { background: hsl(var(--h, 220) 22% 13%); }
/* 테두리 선 대신 색 단계 */
.mood-card.is-now { box-shadow: none; background: var(--surface-2); }
/* 홈 카드: 이유는 정보 줄 끝에 */
.pick-why { position: relative; z-index: 2; cursor: help; color: rgba(255, 255, 255, .78); font-weight: 600; }
.pick-why:hover, .pick-why:focus-visible { color: #fff; }
/* 디스코그래피 연도 목록: 줄 사이 선 대신 간격 */
.disco-list > li + li { margin-top: 2px; }

/* ================= 이 사이트는? — 크레파스 쪽지 =================
 * 사이트는 애플처럼 반듯하지만, 이 쪽지 하나만 남색 도화지에 크레파스로 그린 느낌.
 * 글꼴: Gaegu(손글씨, 열 때 불러옴) · 색: 도화지 남색 · 분필 흰색 · 크레파스 하늘색 · 분홍 · 별만 노랑
 */
.about-note { position: relative; }
.about-trigger { color: var(--text-2); }
.about-trigger svg { width: 20px; height: 20px; }
.about-note[open] > .about-trigger { color: var(--text); background: rgba(255, 255, 255, .1); }
.about-paper {
    --paper: #1d2b4f; --chalk: #f4f0e6; --crayon-blue: #8ec5ff; --crayon-pink: #ff9eb1;
    position: absolute; right: -4px; top: calc(100% + 12px); z-index: 60;
    width: min(330px, calc(100vw - 24px)); padding: 26px 24px 20px;
    font-family: "Gaegu", "Nanum Pen Script", system-ui, sans-serif; font-size: 18px; line-height: 1.45; color: var(--chalk);
    background-color: var(--paper);
    background-image:
        radial-gradient(circle at 18% 22%, rgba(255, 255, 255, .05), transparent 40%),
        radial-gradient(circle at 82% 78%, rgba(0, 0, 0, .18), transparent 45%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
    border-radius: 6px; transform: rotate(-1.2deg); transform-origin: top right;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
}
.about-defs { position: absolute; width: 0; height: 0; }
.about-frame { position: absolute; inset: 7px; width: calc(100% - 14px); height: calc(100% - 14px); overflow: visible; pointer-events: none; }
.about-frame path { fill: none; stroke: var(--chalk); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: .85; }
.about-paper svg path, .about-paper svg ellipse { filter: url(#crayon); }
.about-star { position: absolute; top: 10px; right: 16px; width: 38px; height: 38px; transform: rotate(12deg); }
.about-star path { fill: var(--star); stroke: #f0b400; stroke-width: 1.5; stroke-linejoin: round; }
.about-title { font-size: 27px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; }
.about-scribble { display: block; width: 190px; height: 12px; margin: 2px 0 10px -2px; overflow: visible; }
.about-scribble path { fill: none; stroke: var(--crayon-blue); stroke-width: 4; stroke-linecap: round; }
.about-paper p { margin-top: .35rem; }
.about-paper b { font-weight: 700; color: var(--crayon-blue); }
.about-small { font-size: 16px; opacity: .8; }
.about-note-ico { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; }
.about-note-ico path, .about-note-ico ellipse { fill: none; stroke: var(--crayon-pink); stroke-width: 1.8; stroke-linecap: round; }
.about-actions { display: flex; gap: 10px; margin-top: 16px; }
.about-btn {
    position: relative; flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--h-lg);
    font-size: 19px; font-weight: 700; color: var(--chalk); border-radius: 10px 14px 9px 13px / 13px 9px 14px 10px;
    box-shadow: inset 0 0 0 2px rgba(244, 240, 230, .75); transition: background .2s var(--ease), transform .2s var(--ease);
}
.about-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.about-btn svg path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.about-btn:hover { background: rgba(244, 240, 230, .1); transform: rotate(-1.5deg); }
.about-btn:focus-visible { outline: 2px dashed var(--chalk); outline-offset: 3px; }
.about-paper .about-mail { margin-top: 12px; font-size: 15px; opacity: .65; word-break: break-all; }

/* 열릴 때: 테두리가 크레파스로 한 번에 그려지고, 쪽지가 살짝 내려앉는다 (이 사이트의 유일한 '연출') */
.about-note[open] .about-paper { animation: about-land .32s var(--ease) both; }
.about-note[open] .about-frame path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: about-draw .7s .08s var(--ease) forwards; }
.about-note[open] .about-scribble path { stroke-dasharray: 210; stroke-dashoffset: 210; animation: about-scrib .45s .55s var(--ease) forwards; }
@keyframes about-land { from { opacity: 0; transform: translateY(-6px) rotate(-3deg); } to { opacity: 1; transform: rotate(-1.2deg); } }
@keyframes about-draw { to { stroke-dashoffset: 0; } }
@keyframes about-scrib { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
    .about-note[open] .about-paper, .about-note[open] .about-frame path, .about-note[open] .about-scribble path { animation: none; stroke-dashoffset: 0; }
}
@media (max-width: 479px) { .about-paper { right: -64px; } }
/* 쪽지가 열리면 하단 플레이어·메뉴보다 위에, 화면보다 길면 쪽지 안에서 스크롤 */
.site-header:has(.about-note[open]) { z-index: 70; }
.about-paper { max-height: calc(100dvh - var(--header-h) - 24px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.about-paper::-webkit-scrollbar { display: none; }
.about-paper { word-break: keep-all; overflow-wrap: anywhere; }
.about-paper .about-mail span { display: block; }

/* ================= 콘서트 셋리스트 =================
 * 카드는 공식 배너 비율(가로 7:3). 배너가 없는 공연은 '티켓' 표지: 공연마다 고정 색 + 오른쪽 절취선 칸에 연도.
 */
.live-grid { display: grid; gap: 1.25rem .9rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.live-more { margin-top: 1rem; }
.live-more > summary { display: inline-flex; }
.live-more[open] > summary { margin-bottom: 1rem; }
.live-card { position: relative; min-width: 0; }
.live-cover, .live-hero {
    position: relative; display: block; aspect-ratio: 7 / 3; overflow: hidden; border-radius: var(--r-md);
    background: var(--surface-2); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06);
}
.live-hero { max-width: 760px; border-radius: var(--r-lg); }
.live-cover img, .live-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.live-card:hover .live-cover img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .live-card:hover .live-cover img { transform: none; } }
.live-card:hover .auto-actions, .live-card:focus-within .auto-actions { opacity: 1; transform: none; }
.live-card .auto-name a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* 티켓 표지 */
.live-ticket {
    position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 26%; align-items: end;
    background: linear-gradient(135deg, hsl(var(--h) 32% 27%), hsl(var(--h) 30% 12%));
}
.live-ticket-name {
    margin: 0 .9rem .85rem; font-size: var(--fs-md); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; color: var(--text);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.live-ticket-year {
    align-self: stretch; display: grid; place-items: center; font-size: var(--fs-lg); font-weight: 600; font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, .7); border-left: 2px dashed rgba(255, 255, 255, .22); background: rgba(0, 0, 0, .14);
}
.live-hero .live-ticket-name { margin: 0 1.5rem 1.4rem; font-size: var(--fs-2xl); }
.live-hero .live-ticket-year { font-size: var(--fs-3xl); }
.live-credit { margin-top: .9rem; font-size: var(--fs-xs); color: var(--text-3); }
/* 셋리스트에서 이 사이트 곡 목록에 없는 곡: 누를 수 없는 흐린 줄 */
.q-main.is-offlist { cursor: default; }
.q-main.is-offlist .media-title { color: var(--text-2); }
/* 폰: 셋리스트 카드 두 줄로 (한 줄이면 너무 길어진다) */
@media (max-width: 479px) {
    .live-grid { grid-template-columns: 1fr 1fr; gap: 1rem .6rem; }
    .live-card .live-ticket-name { margin: 0 .55rem .5rem; font-size: var(--fs-xs); -webkit-line-clamp: 2; }
    .live-card .live-ticket-year { font-size: var(--fs-sm); }
}

/* 앨범 헤더: 재킷 옆 한 칸에 제목 · 정보 · 버튼. 폰에서는 재킷 아래로 */
.album-head { display: flex; align-items: flex-end; gap: 1.5rem; }
.album-head-text { min-width: 0; flex: 1; }
.album-head .song-actions { margin-top: 1rem; }
.album-title { font-size: var(--fs-2xl); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
@media (min-width: 640px) { .album-title { font-size: var(--fs-3xl); } }
@media (max-width: 639px) { .album-head { flex-direction: column; align-items: flex-start; gap: 1rem; } }
/* 동작 줄의 글자 버튼(듣기 등)도 동그란 버튼과 같은 높이 */
.song-actions .btn { min-height: var(--h-act); }

/* 목록 줄 버튼: 글자 기호 대신 SVG (모든 아이콘 버튼과 같은 굵기 · 크기) */
.filter-clear svg { width: 14px; height: 14px; fill: currentColor; }
.row-actions .icon-btn svg { width: 18px; height: 18px; }

/* 제목 바로 옆 작은 표시 (싱글 등): 애플 뮤직의 'E' 표시처럼 테두리만 있는 작은 글자 */
.media-title.has-badge { display: flex; align-items: center; gap: .4rem; }
.media-title.has-badge .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.title-badge {
    /* '싱글' 같은 표시는 상자 없이 흐린 작은 글자로 (목록에서 눈이 분산되지 않게) */
    flex-shrink: 0; display: inline-flex; align-items: center; padding: 0;
    font-size: var(--fs-xs); font-weight: 500; line-height: 1; color: var(--text-3);
}

/* ================= 로그인 · 가입 · 내 정보 · 약관 ================= */
.doc-page { max-width: 640px; margin: 0 auto; padding: 1.5rem 1rem 1rem; }
/* 뒤로가기 (상세 · 문서 페이지 맨 위) */
.back-link { margin: 0 0 1rem -.1rem; }
.back-link svg { width: 18px; height: 18px; }
.doc-title { font-size: var(--fs-3xl); font-weight: 600; letter-spacing: -.01em; }
.doc-lead { margin-top: .5rem; font-size: var(--fs-md); color: var(--text-2); line-height: 1.6; word-break: keep-all; }
.doc-lead strong { color: var(--text); font-weight: 600; }
.doc-card { margin-top: 1rem; padding: 1.1rem 1.2rem; border-radius: var(--r-lg); background: var(--surface); }
.doc-h2 { font-size: var(--fs-lg); font-weight: 600; margin-bottom: .6rem; }
.doc-list { display: grid; gap: .45rem; padding-left: 1.1rem; list-style: disc; font-size: var(--fs-sm); line-height: 1.55; word-break: keep-all; }
.doc-list strong { font-weight: 600; }
.doc-note { margin-top: .6rem; font-size: var(--fs-xs); color: var(--text-2); line-height: 1.55; word-break: keep-all; }
.doc-link { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.doc-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: var(--fs-sm); }
.doc-body { margin-top: 1.5rem; font-size: var(--fs-sm); line-height: 1.7; color: var(--text-2); word-break: keep-all; }
.doc-body h2 { margin: 1.6rem 0 .4rem; font-size: var(--fs-md); font-weight: 600; color: var(--text); }
.doc-body ul { padding-left: 1.1rem; list-style: disc; }
.doc-body li + li { margin-top: .25rem; }
.doc-table { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); }
.doc-table th, .doc-table td { padding: .55rem .5rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hairline); }
.doc-table th { color: var(--text); font-weight: 600; }
/* 구글 로그인 버튼: 구글 안내대로 흰 바탕 + 네 색 G */
.google-btn {
    display: flex; align-items: center; justify-content: center; gap: .65rem; margin-top: 1.5rem; min-height: var(--h-lg);
    border-radius: var(--r-full); background: #fff; color: #1f1f1f; font-size: var(--fs-md); font-weight: 600;
    transition: background .15s var(--ease);
}
.google-btn:hover { background: #f1f1f1; }
.google-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.google-g { width: 20px; height: 20px; }
.check-row { display: flex; align-items: flex-start; gap: .6rem; margin-top: .9rem; font-size: var(--fs-sm); cursor: pointer; word-break: keep-all; }
.check-row input { margin-top: .2rem; width: 18px; height: 18px; accent-color: var(--text); flex-shrink: 0; }
.dev-login { border: 1px dashed var(--edge); background: none; }

/* 한줄평: 회원은 한 줄 입력 + 남기기, 비회원은 로그인 안내 */
.comment-row { display: flex; gap: .5rem; }
.comment-row .field { flex: 1; min-width: 0; }
.comment-as { display: flex; justify-content: space-between; gap: .5rem; margin: .45rem .3rem 0 1.1rem; font-size: var(--fs-xs); color: var(--text-2); }
.comment-as strong { color: var(--text); font-weight: 600; }

/* 머리글 계정: 닉네임 첫 글자 동그라미 → 메뉴 */
.account-menu { position: relative; }
.account-avatar {
    display: grid; place-items: center; width: var(--h-md); height: var(--h-md); border-radius: var(--r-full); cursor: pointer; list-style: none;
    background: var(--fill-selected); color: var(--text); font-size: var(--fs-sm); font-weight: 600;
}
.account-avatar::-webkit-details-marker { display: none; }
.account-avatar:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.account-panel { width: 240px; padding: .75rem; }
.account-name { padding: .25rem .5rem 0; font-size: var(--fs-md); font-weight: 600; }
.account-sub { padding: 0 .5rem .5rem; font-size: var(--fs-xs); color: var(--text-2); border-bottom: 1px solid var(--hairline); margin-bottom: .35rem; }
.account-link { display: block; width: 100%; padding: .55rem .5rem; border-radius: var(--r-sm); font-size: var(--fs-sm); text-align: left; }
.account-link:hover { background: rgba(255, 255, 255, .08); }
.account-logout { color: var(--text-2); }

/* 로그인 안내 창 */
.login-prompt {
    width: min(360px, calc(100vw - 2rem)); padding: 1.4rem 1.3rem 1.2rem; border: 0; border-radius: var(--r-lg);
    background: var(--surface-2); color: var(--text); box-shadow: var(--shadow-pop);
}
.login-prompt::backdrop { background: rgba(0, 0, 0, .55); }
/* 약관 팝업 (가입 화면): 제목 줄과 확인 버튼은 고정, 본문만 스크롤 */
.doc-dialog {
    width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 0; border: 0; border-radius: var(--r-lg);
    background: var(--surface); color: var(--text); box-shadow: var(--shadow-pop); overflow: hidden;
}
.doc-dialog::backdrop { background: var(--overlay); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.doc-dialog[open] { animation: share-in .22s var(--ease); }
@media (prefers-reduced-motion: reduce) { .doc-dialog[open] { animation: none; } }
.doc-dialog-inner { display: flex; flex-direction: column; max-height: calc(100dvh - 48px); }
.doc-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem .9rem .9rem 1.3rem; border-bottom: 1px solid var(--hairline); }
.doc-dialog-title { font-size: var(--fs-lg); font-weight: 600; }
.doc-dialog-body { overflow-y: auto; overscroll-behavior: contain; padding: 1rem 1.3rem 1.25rem; }
.doc-dialog-body .doc-lead { margin-top: 0; font-size: var(--fs-sm); }
.doc-dialog-body .doc-body { margin-top: 1rem; }
.doc-dialog-body .doc-body h2:first-child { margin-top: 0; }
.doc-dialog-foot { padding: .9rem 1.3rem 1.1rem; border-top: 1px solid var(--hairline); }
.login-prompt-title { font-size: var(--fs-lg); font-weight: 600; word-break: keep-all; }
.login-prompt-sub { margin-top: .45rem; font-size: var(--fs-sm); color: var(--text-2); line-height: 1.55; word-break: keep-all; }
.login-prompt-actions { display: flex; gap: .5rem; margin-top: 1.1rem; }
.login-prompt-actions .btn { flex: 1; }

/* 보관함: 어디에 저장되는지 (회원 = 계정 · 비회원 = 이 브라우저) */
.lib-store { display: flex; align-items: baseline; gap: .45rem; margin-top: .35rem; font-size: var(--fs-xs); color: var(--text-2); word-break: keep-all; }
.lib-store strong { color: var(--text); font-weight: 600; }
.lib-store-dot { flex-shrink: 0; width: 6px; height: 6px; border-radius: var(--r-full); background: var(--text-3); transform: translateY(-1px); }
.lib-store-dot.is-account { background: var(--text); }
.share-basis { margin-top: .5rem; }

/* ================= 온보딩: 로그인 · 가입 =================
 * 가운데 한 줄 기둥(440px). 재킷 세 장 → 큰 제목 → 버튼 하나 → 안심 한 줄 → 할 수 있는 것 네 칸 → 두 단계면 끝.
 */
.onboard { max-width: 440px; margin: 0 auto; padding: 2.75rem 1rem 1.5rem; text-align: center; }
/* 정규 앨범 일곱 장: 가운데가 살짝 앞으로 나온 완만한 곡선, 한 장씩 차례로 떠오른다 */
.onboard-shelf { display: flex; justify-content: center; margin: 0 auto 2rem; padding-top: 10px; }
.shelf-jacket {
    --tilt: 0deg; --lift: 0px;
    position: relative; flex-shrink: 0; width: 62px; aspect-ratio: 1; margin-left: -12px; overflow: hidden;
    border-radius: var(--r-sm); background: var(--surface-2); box-shadow: 0 6px 18px rgba(0, 0, 0, .55), 0 0 0 1px var(--hairline);
    transform: translateY(var(--lift)) rotate(var(--tilt));
    animation: shelf-in .6s var(--ease) both;
}
.shelf-jacket:first-child { margin-left: 0; }
.shelf-jacket img { width: 100%; height: 100%; object-fit: cover; }
.shelf-jacket img.is-video { transform: scale(1.34); }
.shelf-jacket:nth-child(1) { --tilt: -9deg; --lift: 14px; z-index: 1; animation-delay: .00s; }
.shelf-jacket:nth-child(2) { --tilt: -6deg; --lift: 6px;  z-index: 2; animation-delay: .05s; }
.shelf-jacket:nth-child(3) { --tilt: -3deg; --lift: 1px;  z-index: 3; animation-delay: .10s; }
.shelf-jacket:nth-child(4) { --tilt: 0deg;  --lift: -2px; z-index: 4; animation-delay: .15s; }
.shelf-jacket:nth-child(5) { --tilt: 3deg;  --lift: 1px;  z-index: 3; animation-delay: .20s; }
.shelf-jacket:nth-child(6) { --tilt: 6deg;  --lift: 6px;  z-index: 2; animation-delay: .25s; }
.shelf-jacket:nth-child(7) { --tilt: 9deg;  --lift: 14px; z-index: 1; animation-delay: .30s; }
@keyframes shelf-in { from { opacity: 0; transform: translateY(calc(var(--lift) + 14px)) rotate(var(--tilt)); } }
@media (prefers-reduced-motion: reduce) { .shelf-jacket { animation: none; } }
.onboard-title { font-size: var(--fs-3xl); font-weight: 700; line-height: 1.25; letter-spacing: -.02em; word-break: keep-all; }
/* 로그인 화면: 앨범 빛 배경 + 세리프 슬로건 (이 화면에서만 다른 글꼴을 쓴다) */
.onboard.is-login { position: relative; isolation: isolate; max-width: 480px; padding-top: 3.5rem; }
.onboard-glow {
    position: absolute; z-index: -1; top: -1rem; left: 50%; width: min(100vw, 760px); height: 460px; transform: translateX(-50%);
    pointer-events: none; overflow: hidden;
    -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 72%); mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 72%);
}
.onboard-glow img { position: absolute; width: 46%; aspect-ratio: 1; object-fit: cover; filter: blur(70px) saturate(1.3) brightness(.7); opacity: .4; }
.onboard-glow img:nth-child(1) { left: 2%; top: 12%; }
.onboard-glow img:nth-child(2) { left: 30%; top: -6%; }
.onboard-glow img:nth-child(3) { right: 2%; top: 14%; }
.onboard-slogan {
    font-family: "Instrument Serif", "Times New Roman", serif; font-weight: 400; font-size: var(--fs-4xl);
    line-height: 1; letter-spacing: -.01em; color: var(--text);
}
.onboard-slogan em { font-style: italic; color: rgba(255, 255, 255, .78); }
/* 로딩 중 깨져 보이지 않게: 글꼴 · 재킷이 준비되면(최대 1.5초) 윗부분을 한 번에 보여 준다 (app.js initLoginReveal).
   준비 전에는 자리만 잡아 두어 아래 버튼이 밀리지 않는다. JS 가 없으면(.js 없음) 처음부터 보인다 */
.js .onboard.is-login:not(.is-ready) :is(.onboard-glow, .onboard-slogan, .onboard-lead-serif) { opacity: 0; }
.js .onboard.is-login:not(.is-ready) .shelf-jacket { opacity: 0; animation: none; }
.onboard.is-login :is(.onboard-glow, .onboard-slogan, .onboard-lead-serif) { transition: opacity .45s var(--ease); }
@media (prefers-reduced-motion: reduce) { .onboard.is-login :is(.onboard-glow, .onboard-slogan, .onboard-lead-serif) { transition: none; } }
.onboard-lead-serif { margin-top: 1rem; font-family: "Gowun Batang", serif; font-size: var(--fs-md); line-height: 1.75; color: var(--text-2); }
.onboard-lead { margin-top: .7rem; font-size: var(--fs-md); color: var(--text-2); word-break: keep-all; line-height: 1.55; }
.onboard-eyebrow { margin-bottom: .6rem; font-size: var(--fs-xs); font-weight: 600; color: var(--text-3); }
.onboard .google-btn { margin-top: 2rem; }
.onboard-error { margin-top: 1.25rem; padding: .7rem .9rem; border-radius: var(--r-md); background: rgba(255, 105, 97, .12); color: var(--danger); font-size: var(--fs-sm); }
/* 아래 두 묶음은 상자 없이 가는 선과 여백으로만 나눈다 */
.onboard-sub { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.onboard-safe { margin-top: .8rem; font-size: var(--fs-xs); color: var(--text-2); line-height: 1.55; word-break: keep-all; }
.onboard-perks { margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--hairline); }
.onboard-perks .onboard-sub { color: var(--text-3); font-weight: 500; }
.onboard-perks ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1rem; }
.onboard-perks li { display: flex; flex-direction: column; align-items: center; gap: .6rem; text-align: center; }
.onboard-perks li svg { width: 20px; height: 20px; fill: var(--text-2); flex-shrink: 0; }
.onboard-perks li svg.is-star { fill: var(--star); }
.onboard-perks p { display: flex; flex-direction: column; gap: .2rem; }
.onboard-perks strong { font-size: var(--fs-sm); font-weight: 600; }
.onboard-perks p span { font-size: var(--fs-xs); color: var(--text-2); line-height: 1.45; word-break: keep-all; }
.onboard-skip { display: inline-block; margin-top: 1.5rem; font-size: var(--fs-sm); color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
.onboard-skip:hover { color: var(--text); }
.onboard-note { margin-top: .5rem; font-size: var(--fs-xs); color: var(--text-3); line-height: 1.55; word-break: keep-all; }
.onboard-dev { margin-top: 2rem; padding: .8rem 1rem; border: 1px dashed var(--edge); border-radius: var(--r-md); text-align: left; font-size: var(--fs-xs); color: var(--text-2); }
.onboard-dev summary { cursor: pointer; }
/* 가입: 닉네임 */
.onboard-form { margin-top: 1.75rem; text-align: left; }
.nick-input { min-height: 52px; font-size: var(--fs-lg); font-weight: 600; text-align: center; border-radius: var(--r-lg); }
.nick-input::placeholder { font-weight: 400; color: var(--text-3); }
/* 추천 닉네임: 같은 모양 알약 세 개, 고른 것만 흰색 */
.nick-picks { margin-top: 1.4rem; text-align: center; }
.nick-picks-label { font-size: var(--fs-xs); color: var(--text-3); }
.nick-picks-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: .6rem; }
.nick-pick {
    height: var(--h-md); padding: 0 .95rem; border-radius: var(--r-full); background: var(--fill); color: var(--text);
    font-size: var(--fs-sm); font-weight: 500; transition: background .15s var(--ease), color .15s var(--ease);
}
.nick-pick:hover { background: var(--fill-hover); }
.nick-pick[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.nick-pick:focus-visible { outline: none; box-shadow: var(--ring); }
.nick-more { margin-top: .7rem; }
.onboard-hint { margin-top: .45rem; text-align: center; font-size: var(--fs-xs); color: var(--text-3); }
.nick-preview { margin-top: 1rem; padding: .9rem 1rem; border-radius: var(--r-lg); background: var(--surface); }
.nick-preview-body { font-size: var(--fs-sm); line-height: 1.5; }
.nick-preview-meta { margin-top: .3rem; font-size: var(--fs-xs); color: var(--text-2); }
.nick-preview-meta strong { color: var(--text); font-weight: 600; }
.onboard-agree { margin-top: 1.25rem; padding: .25rem 1rem .95rem; border-radius: var(--r-lg); background: var(--surface); }
.onboard-go { margin-top: 1.25rem; min-height: 52px; font-size: var(--fs-md); font-weight: 600; }
@media (max-width: 479px) { .onboard-title { font-size: var(--fs-2xl); } .shelf-jacket { width: 52px; margin-left: -10px; } .shelf-jacket:first-child { margin-left: 0; } }
@media (max-width: 339px) { .shelf-jacket { width: 44px; } }

/* ================= 둘러보기 (Driver.js) — 사이트 판 모양에 맞춘다 ================= */
.driver-popover.bn-tour {
    max-width: 300px; padding: 18px 18px 14px; border-radius: var(--r-lg);
    background: var(--surface-2); color: var(--text); box-shadow: var(--shadow-pop); font-family: inherit;
}
.driver-popover.bn-tour .driver-popover-title { word-break: keep-all; font-family: inherit; font-size: var(--fs-lg); font-weight: 600; line-height: 1.3; }
.driver-popover.bn-tour .driver-popover-description { margin-top: .35rem; font-family: inherit; font-size: var(--fs-sm); line-height: 1.55; color: var(--text-2); word-break: keep-all; }
.driver-popover.bn-tour .driver-popover-progress-text { font-size: var(--fs-xs); color: var(--text-3); }
.driver-popover.bn-tour .driver-popover-footer { margin-top: 14px; }
.driver-popover.bn-tour .driver-popover-footer button {
    min-height: var(--h-sm); padding: 0 .9rem; border: 0; border-radius: var(--r-full); text-shadow: none;
    font-family: inherit; font-size: var(--fs-sm); font-weight: 600; background: var(--surface-3); color: var(--text);
}
.driver-popover.bn-tour .driver-popover-footer .driver-popover-next-btn { background: var(--text); color: #000; }
.driver-popover.bn-tour .driver-popover-footer button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.driver-popover.bn-tour .driver-popover-close-btn { color: var(--text-2); }
.driver-popover.bn-tour .driver-popover-close-btn:hover { color: var(--text); }
/* 진행 표시: 묶음 이름 + 점 */
.bn-tour-chapter { display: flex; align-items: center; gap: .5rem; margin-bottom: .55rem; font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); }
.bn-tour-dots { display: inline-flex; gap: 4px; }
.bn-tour-dots i { width: 6px; height: 6px; border-radius: var(--r-full); background: var(--surface-3); }
.bn-tour-dots i.on { background: var(--text); }
.driver-popover.bn-tour .driver-popover-navigation-btns { gap: .4rem; }
.driver-popover.bn-tour .driver-popover-footer button + button { margin-left: 0; }
.bn-tour-login {
    display: inline-flex; align-items: center; min-height: var(--h-sm); padding: 0 .9rem; border-radius: var(--r-full);
    background: var(--surface-3); color: var(--text); font-size: var(--fs-sm); font-weight: 600;
}
/* 중간에 닫은 둘러보기: 화면 아래 한 줄 알림 (한 번만) */
.tour-resume {
    position: fixed; z-index: 60; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%);
    display: flex; align-items: center; gap: .6rem; width: max-content; max-width: calc(100vw - 32px);
    padding: .45rem .45rem .45rem 1rem; border-radius: var(--r-full); background: var(--surface-2); box-shadow: var(--shadow-pop);
    font-size: var(--fs-sm); animation: share-in .22s var(--ease);
}
@media (prefers-reduced-motion: reduce) { .tour-resume { animation: none; } }
@media (max-width: 767px) { .tour-resume { bottom: calc(150px + env(safe-area-inset-bottom)); } }
.tour-resume-go { height: var(--h-sm); padding: 0 .9rem; border-radius: var(--r-full); background: var(--text); color: var(--bg); font-weight: 600; }
.tour-resume-x { display: grid; place-items: center; width: var(--h-sm); height: var(--h-sm); border-radius: var(--r-full); color: var(--text-2); }
.tour-resume-x:hover { color: var(--text); background: var(--fill); }
.tour-resume-x svg { width: 16px; height: 16px; fill: currentColor; }
.driver-popover.bn-tour .driver-popover-arrow-side-left { border-left-color: var(--surface-2); }
.driver-popover.bn-tour .driver-popover-arrow-side-right { border-right-color: var(--surface-2); }
.driver-popover.bn-tour .driver-popover-arrow-side-top { border-top-color: var(--surface-2); }
.driver-popover.bn-tour .driver-popover-arrow-side-bottom { border-bottom-color: var(--surface-2); }
.toast .toast-link { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* 이 사이트는? 쪽지 안 '둘러보기 다시 보기' */
.about-replay { margin-top: 10px; padding: 0; font-family: inherit; font-size: 16px; font-weight: 700; color: var(--crayon-blue, #8ec5ff); text-decoration: underline; text-underline-offset: 4px; }

/* 한줄평 한 개: 본문 아래 한 줄에 '이름 · 시각'과 '공감 · 수정 · 삭제 · 신고' (좁으면 다음 줄로) */
.comment-entry { display: flex; flex-wrap: wrap; align-items: center; column-gap: 1.25rem; row-gap: .1rem; }
.comment-text { flex: 1 1 8rem; min-width: 0; line-height: 1.6; word-break: break-word; }
.comment-line { display: flex; flex-wrap: wrap; align-items: center; column-gap: .6rem; margin-left: auto; font-size: var(--fs-xs); color: var(--text-3); }
.comment-line .action-panel { position: absolute; z-index: 20; right: 0; top: 100%; }
/* 폰: 본문 아래 줄에 왼쪽 정렬 */
@media (max-width: 639px) {
    .comment-line, .feed-meta { margin-left: 0; }
    .comment-line { column-gap: .1rem; }
    .comment-line .comment-by { margin-right: .35rem; }
    .comment-line .text-btn { padding: 0 .35rem; }
}
.comment-by { white-space: nowrap; }
.comment-by strong { color: var(--text); font-weight: 600; }
.comment-line > form, .comment-line > details { display: inline-flex; }

/* 문장마다 줄바꿈: 두 문장 이상인 안내는 '.' 다음에 줄을 바꾼다.
   서버 · 스크립트가 보내는 메시지는 \n 으로 나누고, 이 칸들이 그 줄바꿈을 그대로 보여 준다 */
.lines, .toast, .field-error, .onboard-error, .float-tip, .share-loading { white-space: pre-line; }

/* ================= 곡 상세 ================= */
/* 제목 아래 태그 줄: 달린 태그는 작은 알약, 내가 고른 것은 테두리. '＋ 태그'를 누르면 고르는 팝업 */
.tag-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .7rem; }
.tag-pill {
    display: inline-flex; align-items: center; gap: .35rem; height: var(--h-sm); padding: 0 .8rem; border-radius: var(--r-full);
    background: var(--fill); color: var(--text-2); font-size: var(--fs-xs); font-weight: 500; transition: background .15s var(--ease), color .15s var(--ease);
}
.tag-pill:hover { background: var(--fill-hover); color: var(--text); }
.tag-pill .n { color: var(--text-3); font-variant-numeric: tabular-nums; }
.tag-pill.is-mine { color: var(--text); background: var(--fill-selected); }
.tag-add { background: none; padding: 0 .5rem; color: var(--text-2); }
.tag-add:hover { background: var(--fill); }
.tag-add svg { width: 14px; height: 14px; fill: currentColor; }
.tag-row:focus { outline: none; }

/* 태그 고르기 팝업 */
.mood-dialog .doc-dialog-head { align-items: flex-start; }
.mood-dialog-sub { white-space: pre-line; margin-top: .2rem; font-size: var(--fs-xs); color: var(--text-2); }
.mood-dialog .mood-group:first-child .mood-group-label { margin-top: 0; }
.mood-dialog-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.mood-dialog-note { font-size: var(--fs-xs); color: var(--text-3); word-break: keep-all; }

/* 폰에서는 팝업이 아래에서 올라오는 시트 */
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } }
@media (max-width: 639px) {
    .doc-dialog { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: var(--r-lg) var(--r-lg) 0 0; }
    .doc-dialog, .doc-dialog-inner { max-height: 88dvh; }
    .doc-dialog[open] { animation: sheet-up .25s var(--ease); }
    .doc-dialog-foot { padding-bottom: calc(1.1rem + env(safe-area-inset-bottom)); }
}

/* 한줄평 목록: 한 판 안에 가는 선으로 나눈 줄 · 이름 첫 글자 동그라미 */
.comment-list { margin-top: .75rem; border-radius: var(--r-lg); background: var(--surface); }
.comment-item { display: flex; align-items: center; gap: .85rem; padding: .7rem 1rem; }
.comment-item + .comment-item { border-top: 1px solid var(--hairline); }
.comment-item:focus { outline: none; }
.comment-item:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); border-radius: var(--r-lg); }
.comment-main { flex: 1; min-width: 0; }
.comment-empty { margin-top: .75rem; padding: 1.5rem 1rem; border-radius: var(--r-lg); background: var(--surface); text-align: center; font-size: var(--fs-sm); color: var(--text-2); }
#comments .pager { margin-top: 1rem; }

/* 쓰기 칸 (목록 아래): 내 이름 동그라미 + 둥근 입력칸 + 남기기 */
.comment-compose { margin-top: 1rem; padding: .75rem; border-radius: var(--r-lg); background: var(--surface); }
.comment-compose .comment-row { align-items: center; gap: .6rem; }
.comment-compose .field { min-height: var(--h-lg); border-radius: var(--r-full); border-color: transparent; background: var(--fill); padding-left: 1.1rem; }
.comment-compose .field:focus { border-color: var(--focus); }
.comment-compose .btn { min-height: var(--h-lg); border-radius: var(--r-full); }

/* 곡 상세 아래 두 칸(실린 음반 · 다음 발견): 긴 제목이 칸을 넓히지 않게 */
.section.grid > section { min-width: 0; }

/* 추천 두 개: 재생 버튼 옆 알약 (재생과 같은 높이). 눌리면 별빛 테두리 + 옅은 금빛 */
.vote-pills { gap: .4rem; }
.vote-pill {
    display: inline-flex; align-items: center; gap: .4rem; height: var(--h-act); padding: 0 .95rem 0 .8rem; border-radius: var(--r-full);  /* 재생 · 아이콘 버튼과 같은 높이 */
    background: var(--surface-2); color: var(--text); font-size: var(--fs-sm); font-weight: 600; border: 1px solid transparent;
    transition: background .15s var(--ease), border-color .15s var(--ease), transform .12s var(--ease);
}
.vote-pill:hover { background: var(--surface-3); }
.vote-pill:active { transform: scale(.97); }
.vote-pill-icon { color: var(--star); font-size: var(--fs-md); line-height: 1; }
.vote-pill-n { color: var(--text-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.vote-pill[aria-pressed="true"] { border-color: rgba(255, 214, 10, .55); background: rgba(255, 214, 10, .12); }
.vote-pill[aria-pressed="true"] .vote-pill-n { color: var(--star); }
.vote-pill[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
#vote:focus { outline: none; }

/* 태그 팝업: 3개를 다 골랐는데 다른 태그를 누르면 설명 줄이 잠깐 경고로 바뀐다 */
.mood-dialog-sub.is-warn { color: var(--danger); animation: warn-shake .4s var(--ease); }
@keyframes warn-shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .mood-dialog-sub.is-warn { animation: none; } }

/* 곡 상세 액션 바: 왼쪽 핵심(재생 · 추천 둘), 오른쪽 도구(담기 · 공유 · ⋯) */
.song-actions { gap: .5rem; }
.act-tools { display: inline-flex; align-items: center; gap: .4rem; margin-left: auto; }
.act-tools .act-menu { position: relative; }
/* ⋯ 메뉴: 아이콘 + 글자 한 줄씩 */
.more-panel { width: 264px; padding: .4rem; }
.menu-item {
    display: flex; align-items: center; gap: .7rem; width: 100%; min-height: 40px; padding: 0 .65rem; border-radius: var(--r-md);
    font-size: var(--fs-sm); color: var(--text); text-align: left;
}
.menu-item:hover { background: rgba(255, 255, 255, .08); }
.menu-item svg { width: 18px; height: 18px; flex-shrink: 0; fill: var(--text-2); }
.menu-label { margin: .4rem .25rem .25rem; padding: .55rem .4rem 0; border-top: 1px solid var(--hairline); font-size: var(--fs-xs); color: var(--text-3); }
/* 폰: 첫 줄 재생 + 도구, 둘째 줄 추천 두 개(반씩). 메뉴는 화면 폭에 맞춰 연다 */
@media (max-width: 639px) {
    .vote-pills { order: 1; flex: 1 0 100%; }
    .vote-pills form { flex: 1; }
    .vote-pills .vote-pill { width: 100%; justify-content: center; }
    .song-actions { position: relative; }
    .act-tools .act-menu { position: static; }
    .act-tools .menu-panel { left: 0; right: 0; width: auto; }
}

/* 한줄평 왼쪽 칸: 쓴 사람 이름 알약 (같은 폭 칸이라 본문 시작이 줄마다 맞는다). 내 것은 살짝 파란 기운 */
.comment-name { flex: 0 0 8.5rem; min-width: 0; }
.name-chip {
    display: inline-block; max-width: 100%; padding: .3rem .7rem; border-radius: var(--r-full); background: var(--surface-3);
    font-size: var(--fs-xs); font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle;
}
.comment-name.is-mine .name-chip { background: var(--done-tint); color: var(--text); box-shadow: inset 0 0 0 1px var(--done-glow); }
@media (max-width: 639px) {
    .comment-item { flex-wrap: wrap; row-gap: .35rem; }
    .comment-name { flex: 1 0 100%; }
    .comment-main { flex-basis: 100%; }
}

/*
  곡 상세 재킷 = LP 슬리브 (청취 완료 버튼을 겸한다).
  레코드: 슬리브 뒤에 숨어 있다가 지금 곡이면 오른쪽으로 반쯤 나오고, 재생 중이면 돈다.
  띠지(帯): 청취 완료면 재킷 왼쪽에 세로로 끼워진다 (일본 음반의 띠지처럼).
  레코드가 나올 자리만큼 오른쪽 여백을 둔다 (--j = 재킷 폭).
*/
.heard-jacket { --j: 5rem; position: relative; display: block; margin-right: calc(var(--j) * .6); border-radius: var(--r-md); cursor: pointer; isolation: isolate; }
@media (min-width: 640px) { .heard-jacket { --j: 6rem; } }
.heard-jacket .jacket { position: relative; z-index: 2; box-shadow: 6px 0 14px rgba(0, 0, 0, .55); }
.heard-jacket:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }

.lp { position: absolute; z-index: 1; top: 3%; left: 3%; width: 94%; aspect-ratio: 1; transition: transform .7s var(--ease); }
.lp-disc {
    position: absolute; inset: 0; border-radius: 50%;
    background:
        radial-gradient(circle, transparent 0 17%, #0b0b0c 17.5% 19%, transparent 19.5%),
        repeating-radial-gradient(circle, #1b1b1e 0 1px, #2a2a2e 1px 2.4px);
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14), 0 0 0 1px rgba(0, 0, 0, .6), 0 8px 20px rgba(0, 0, 0, .7);
}
.lp-label { position: absolute; left: 33%; top: 33%; width: 34%; height: 34%; border-radius: 50%; object-fit: cover; }
.lp-label::after { content: none; }
.lp-disc::after { content: ""; position: absolute; left: 49%; top: 49%; width: 2%; height: 2%; border-radius: 50%; background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
/* 빛 반사는 돌지 않는다 (레코드만 돈다) */
.lp-sheen { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: conic-gradient(from 20deg, transparent 0 6%, rgba(255, 255, 255, .16) 12%, transparent 19% 50%, rgba(255, 255, 255, .1) 62%, transparent 70%); }
.heard-jacket.is-current .lp { transform: translateX(56%); }
.heard-jacket.is-current .lp-disc { animation: lp-spin 3.2s linear infinite; animation-play-state: paused; }
.heard-jacket.is-spinning .lp-disc { animation-play-state: running; }
@keyframes lp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .heard-jacket.is-current .lp-disc { animation: none; } .lp { transition: none; } }

/* 띠지: 재킷 왼쪽 세로 띠. 끼울 때는 위에서 아래로 스르륵 */
.obi {
    position: absolute; z-index: 3; top: 0; bottom: 0; left: 6%; width: calc(var(--j) * .19);
    display: flex; align-items: center; justify-content: center;
    /* 양옆 그림자 · 가장자리 결을 똑같이 (어느 한쪽만 어둡지 않게) */
    background: #f2f2f5; box-shadow: inset 1px 0 0 rgba(0, 0, 0, .06), inset -1px 0 0 rgba(0, 0, 0, .06), 0 0 4px rgba(0, 0, 0, .4);
    clip-path: inset(0 0 100% 0); transition: clip-path .55s var(--ease); pointer-events: none;
}
/* 세로 글자: 글자 칸 폭 = 글자 크기 (line-height 1) 라서 띠지 가운데에 정확히 놓인다 */
.obi-text {
    writing-mode: vertical-rl; display: block; line-height: 1;
    font-family: "Hiragino Mincho ProN", "Noto Serif JP", serif; font-size: calc(var(--j) * .115); font-weight: 600;
    letter-spacing: .18em; padding-top: .18em; color: #1c1c1e;  /* 마지막 글자 뒤 자간만큼 위에도 두어 위아래를 맞춘다 */
}
.heard-jacket[aria-pressed="true"] .obi { clip-path: inset(0 0 0 0); }
.heard-jacket:hover:not([aria-pressed="true"]) .obi { clip-path: inset(0 0 88% 0); }
@media (prefers-reduced-motion: reduce) { .obi { transition: none; } }

/* 전곡 목록: 찾기 칸 옆 '안 들은 곡' 거르기 (찾기 칸과 같은 높이 · 모양) */
.filter-row { display: flex; align-items: center; gap: .4rem; }
.filter-row .filter-wrap { flex: 1; min-width: 0; margin-top: 0; }
.filter-chip {
    flex-shrink: 0; height: var(--h-md); padding: 0 .8rem; border-radius: var(--r-md); background: var(--fill);
    font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); white-space: nowrap; transition: background .15s var(--ease), color .15s var(--ease);
}
.filter-chip:hover { background: var(--fill-hover); color: var(--text); }
.filter-chip[aria-pressed="true"] { background: var(--text); color: var(--bg); }

/* 홈 최근 한줄평: 곡 상세와 같은 이름 알약 칸 (본문 시작이 줄마다 맞는다) */
.feed-row { align-items: center; }
.feed-name { flex: 0 0 8.5rem; }
@media (max-width: 639px) { .feed-row { flex-wrap: wrap; } .feed-name { flex-basis: 100%; } }

/* ================= 홈: 수록곡 라디오 (LP 줄) ================= */
.deep-play { flex-shrink: 0; }
.lp-row {
    display: flex; gap: 1rem; margin: .5rem -1rem 0; padding: .5rem 1rem 1rem; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 1rem;
    scrollbar-width: none; overscroll-behavior-x: contain;
}
.lp-row::-webkit-scrollbar { display: none; }
.lp-item { flex: 0 0 8.5rem; width: 8.5rem; min-width: 0; scroll-snap-align: start; padding-right: 1.6rem; }  /* 긴 제목이 칸을 넓히지 않게 */
/* 슬리브: 재킷 뒤에 레코드가 살짝 삐져나와 있다 → 누르면 들을 수 있다는 신호 */
.lp-sleeve { position: relative; display: block; width: 100%; aspect-ratio: 1; border-radius: var(--r-md); cursor: pointer; isolation: isolate; }
.lp-sleeve .lp-cover { position: relative; z-index: 2; width: 100%; height: 100%; border-radius: var(--r-md); box-shadow: 5px 0 12px rgba(0, 0, 0, .55); }
.lp-mini { transform: translateX(18%); transition: transform .5s var(--ease); }
.lp-sleeve:hover .lp-mini, .lp-sleeve:focus-visible .lp-mini { transform: translateX(28%); }
.lp-sleeve.is-current .lp-mini { transform: translateX(34%); }
.lp-sleeve.is-current .lp-disc { animation: lp-spin 3.2s linear infinite; animation-play-state: paused; }
.lp-sleeve.is-spinning .lp-disc { animation-play-state: running; }
.lp-hover-play {
    position: absolute; z-index: 3; left: 50%; top: 50%; display: grid; place-items: center; width: 40px; height: 40px; margin: -20px 0 0 -20px;
    border-radius: var(--r-full); background: rgba(255, 255, 255, .92); color: #000; font-size: var(--fs-sm); padding-left: 2px;
    opacity: 0; transform: scale(.9); transition: opacity .2s var(--ease), transform .2s var(--ease); box-shadow: var(--shadow-cover);
}
.lp-sleeve:hover .lp-hover-play, .lp-sleeve:focus-visible .lp-hover-play { opacity: 1; transform: none; }
.lp-sleeve.is-spinning .lp-hover-play { opacity: 0; }
.lp-sleeve:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.lp-title { position: relative; display: block; margin-top: .6rem; min-width: 0; }
.lp-title:hover .font-semibold { text-decoration: underline; text-underline-offset: 3px; }
@media (hover: none) { .lp-hover-play { opacity: .9; transform: none; width: 32px; height: 32px; margin: -16px 0 0 -16px; } }
@media (prefers-reduced-motion: reduce) { .lp-mini { transition: none; } .lp-sleeve.is-current .lp-disc { animation: none; } }

/* ================= 홈: 이날의 back number (기념일이 있을 때만 한 줄) ================= */
.otd {
    display: flex; align-items: center; gap: .9rem; padding: .7rem .9rem .7rem .7rem; border-radius: var(--r-lg);
    background: linear-gradient(90deg, var(--surface-2), var(--surface)); transition: background .2s var(--ease);
}
.otd:hover { background: var(--surface-2); }
.otd-art { flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--r-sm); overflow: hidden; background: var(--surface-3); }
.otd-art img { width: 100%; height: 100%; object-fit: cover; }
.otd-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.otd-eyebrow { font-size: var(--fs-xs); color: var(--text-3); }
.otd-line { font-size: var(--fs-md); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.otd-go { flex-shrink: 0; width: 18px; height: 18px; fill: var(--text-3); }

/* ================= 홈: 팬들의 한 줄 (닉네임 없이 한 줄만 크게, 가로로 넘김) ================= */
.quote-row {
    display: flex; gap: .75rem; margin: .5rem -1rem 0; padding: .25rem 1rem .75rem; overflow-x: auto;
    scroll-snap-type: x proximity; scroll-padding-inline: 1rem; scrollbar-width: none; overscroll-behavior-x: contain;
}
.quote-row::-webkit-scrollbar { display: none; }
.quote-row > li { flex: 0 0 15rem; width: 15rem; min-width: 0; scroll-snap-align: start; }
.quote-card {
    position: relative;  /* 안의 화면 낭독기용 글자(sr-only)가 넘기는 칸 밖으로 튀어나가 페이지를 넓히지 않게 */
    display: flex; flex-direction: column; justify-content: space-between; gap: 1.1rem; height: 100%; min-height: 9.5rem;
    padding: 1.1rem 1.1rem .9rem; border-radius: var(--r-lg); background: var(--surface); transition: background .2s var(--ease);
}
.quote-card:hover { background: var(--surface-2); }
.quote-body {
    font-size: var(--fs-lg); font-weight: 600; line-height: 1.45; letter-spacing: -.01em; word-break: keep-all; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.quote-body::before { content: "“"; } .quote-body::after { content: "”"; }
.quote-song { display: flex; align-items: center; gap: .5rem; min-width: 0; font-size: var(--fs-xs); color: var(--text-2); }
.quote-jacket { width: 22px; border-radius: 4px; }
.quote-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quote-like { margin-left: auto; flex-shrink: 0; color: var(--text-3); }
.quote-like [aria-hidden] { color: var(--like); }

/* ================= 곡 상세: 한줄평 (대표 3줄 + 모두 보기 시트) · 다음에 나올 곡 ================= */
.comment-compose[hidden] { display: none; }
.comments-all-btn {
    display: flex; align-items: center; justify-content: center; gap: .3rem; width: 100%; margin-top: .5rem; padding: .7rem;
    border-radius: var(--r-md); font-size: var(--fs-sm); color: var(--text-2);
}
.comments-all-btn svg { width: 18px; height: 18px; fill: currentColor; transition: transform .25s var(--ease); }
.comments-all-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.comments-all[hidden], [data-comments-top][hidden] { display: none; }
.comments-all .pager { margin-top: 1rem; }
.comments-all-btn:hover { background: var(--fill); color: var(--text); }

/* 정보 줄: 처음 실린 음반 · 몇 번 트랙 · 연도 (외 N장은 펼침 메뉴) */
.song-meta { display: flex; flex-wrap: wrap; align-items: center; column-gap: .3rem; margin-top: .25rem; }
.song-meta-link { display: inline-flex; color: var(--text-2); }  /* 『 』 안쪽 빈칸 없애기 */
.song-meta-link:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.more-releases > summary { min-height: auto; padding: 0 .2rem; font-size: inherit; }
.more-releases .menu-panel { left: 0; right: auto; width: 300px; }

/* 다음에 나올 곡 + 자동 이어 듣기 스위치 */
.auto-switch { display: inline-flex; align-items: center; gap: .55rem; font-size: var(--fs-sm); color: var(--text-2); }
.auto-switch .switch { position: relative; width: 38px; height: 22px; border-radius: var(--r-full); background: var(--fill); transition: background .2s var(--ease); }
.auto-switch .switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .4); transition: transform .2s var(--ease); }
.auto-switch[aria-pressed="true"] { color: var(--text); }
.auto-switch[aria-pressed="true"] .switch { background: var(--text-2); }
.auto-switch[aria-pressed="true"] .switch::after { transform: translateX(16px); }
.auto-switch:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--r-sm); }
.up-next-list { margin-top: .5rem; border-radius: var(--r-lg); background: var(--surface); }
.up-next-row { display: flex; align-items: center; gap: .75rem; padding: .6rem .8rem .6rem 1rem; }
.up-next-row + .up-next-row { border-top: 1px solid var(--hairline); }
.up-next-no { width: 1rem; flex-shrink: 0; font-size: var(--fs-xs); color: var(--text-3); text-align: center; font-variant-numeric: tabular-nums; }
.up-next-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: .75rem; }
.up-next-link:hover .font-semibold { text-decoration: underline; text-underline-offset: 3px; }
.up-next-play svg { width: 18px; height: 18px; fill: currentColor; }
/* 플레이어의 자동 이어 듣기 버튼: 켜지면 흰색, 꺼지면 흐리게 */
.bn-autoplay[aria-pressed="false"] { opacity: .45; }

/* ================= 앨범 상세: LP 재킷 · 지금 나오는 수록곡 ================= */
.album-lp { position: relative; display: block; flex-shrink: 0; margin-right: 2.5rem; isolation: isolate; }  /* 나온 레코드가 제목에 닿지 않게 */
.album-lp .lp { transition: transform .7s var(--ease); }
.album-lp.is-current .lp { transform: translateX(32%); }
.album-lp.is-current .lp-disc { animation: lp-spin 3.2s linear infinite; animation-play-state: paused; }
.album-lp.is-spinning .lp-disc { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) { .album-lp .lp { transition: none; } .album-lp.is-current .lp-disc { animation: none; } }

/* 지금 나오는 곡: 번호 자리에 막대 세 개 (재생 중이면 움직이고, 멈추면 멈춘다) */
.q-eq { position: absolute; inset: 0; display: none; align-items: flex-end; justify-content: center; gap: 2px; padding-bottom: 5px; }
.q-eq i { width: 3px; height: 40%; border-radius: 1px; background: var(--text); animation: q-eq .9s ease-in-out infinite; animation-play-state: paused; }
.q-eq i:nth-child(2) { animation-delay: -.3s; }
.q-eq i:nth-child(3) { animation-delay: -.6s; }
@keyframes q-eq { 0%, 100% { height: 30%; } 50% { height: 75%; } }
.q-row.is-now .q-eq { display: flex; opacity: 1 !important; }  /* 마우스를 올려도 (번호 → ▶ 바꾸는 규칙에 가려지지 않게) */
.q-row.is-now .q-num-n, .q-row.is-now .q-num-play { opacity: 0 !important; }
.q-row.is-playing .q-eq i { animation-play-state: running; }
.q-row.is-now .media-title { color: var(--text); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .q-eq i { animation: none; } }

/* 아주 좁은 휴대폰(≤360px): 머리말이 넘치면 페이지 전체가 밀려 하단 메뉴까지 화면 밖으로 나간다 */
@media (max-width: 360px) {
    .site-header > div { gap: .35rem; padding-left: .6rem; padding-right: .6rem; }
    .site-logo { max-width: 104px; height: auto; }
}

/* 휴대폰: 곡 화면 메뉴가 재생 바 뒤로 들어가지 않게 하단 막대 바로 위에 띄운다 (길면 안에서 스크롤) */
@media (max-width: 767px) {
    .act-tools .menu-panel {
        position: fixed; left: 12px; right: 12px; top: auto; bottom: calc(var(--nav-h) + 8px); z-index: 60;
        width: auto; max-height: 60vh; overflow-y: auto; overscroll-behavior: contain;
    }
    html.has-player .act-tools .menu-panel { bottom: calc(var(--nav-h) + var(--bar-h) + 8px); }
}