/* ==========================================================================
   song-table.css — 노래 표 (신곡 목록·검색 결과·애창곡 공용)
   번호/노래 2열 구성. 아티스트는 열이 아니라 곡 항목 내부의 보조줄
   (.song-singer·.song-info)로 들어간다 — 열 폭 부족으로 긴 제목이 깨지던 문제를
   해결한 Tone Up 시안의 정보 구조 결정을 계승한 것.
   3기(ui-overhaul-3): 행은 콘텐츠 패널(.content-panel) 위에 직접 앉고,
   hover·선택 상태는 제목 셀의 lift 판(td.song-title::before)이 맡는다.

   markup 계약 (JS 가 클래스로 접근하므로 클래스 이름은 바꾸지 않는다):
     .song-table-border > table.song-table(.table-tj|.table-ky)
     Bootstrap collapse 로 여닫는 표는 스타일 없는 래퍼가 애니메이션을 맡는다
     (margin·border 가 래퍼 안쪽에 있어야 height 애니메이션에 함께 접힌다):
     .song-table-collapse.collapse > .song-table-border > table.song-table
       thead > tr > th("번호"), th("노래")
       tbody > tr
         td.song-number > span            ← 번호 (최신곡이면 span.latest)
         td.song-title
           div > a|ruby.song-title-text   ← 제목 (JS 가 a 를 ruby 로 교체하기도 함)
           div.song-singer                ← 아티스트 (4기 8턴: 작품정보 위로. 래퍼 div.song-meta 는
             span.song-singer-original    ← 원본값 (일본어면 lang="ja")      스타일 훅뿐이라 9턴 후속에서 제거)
             span.song-singer-korean      ← 대표값 같은 줄 병기 (있을 때만, 4기 9턴)
           div.song-info > span           ← 작품·추가 정보 (원본값이 일본어면 루비로 대표값)
   ========================================================================== */

/* ---------- 표 래퍼 ----------
   C 플랫(19턴): 표를 감싸던 안쪽 유리 패널(배경·외곽선·그림자)을 걷어냈다 —
   유리 타일 안에 또 유리 패널이 앉는 "유리 속 유리"가 어색하고, Apple HIG 도
   유리는 기능 레이어 전용이지 콘텐츠 레이어에 쓰지 말라고 한다. 행은
   바깥 유리 타일 위에 직접 앉고, "표의 시작"은 표 제목(h2)의 밑선이 맡는다.
   래퍼 자체는 더보기 높이 전환의 대상이자 클리핑 박스로 남는다 */
.song-table-border {
    overflow: hidden;
}

/* ---------- 표 배치 ----------
   .songs-grid: 모바일 1열 → 992px 부터 2열. index(신곡)·애창곡 공용.
   .song-table-container 는 JS(favorite-song.js)가 브랜드 열을 찾는 marker 로,
   폭은 전적으로 grid 가 정한다 */
.songs-grid {
    margin-top: 2.2rem;
    display: grid;
    gap: 2.2rem;
}

@media (min-width: 992px) {
    .songs-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.8rem;
        align-items: start;
    }
}

/* 브랜드별 유리 패널 (표 + 부속 버튼) */
.song-panel {
    padding: clamp(1.3rem, 3vw, 2rem);
}

.song-panel .song-header-text {
    font-size: var(--fs-lg);
}

.song-panel .song-table-border {
    /* C 플랫: 행이 제목 밑선 바로 아래에서 시작한다 (td 패딩이 호흡을 맡음) */
    margin-top: 0;
}

/* ---------- 표 자체 ---------- */
.song-table {
    table-layout: fixed; /* 긴 일본어 제목이 열 폭을 밀지 않도록 고정 */
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-body); /* P21 Body — 글자 사다리(glass.css --fs-*), 모바일 15 / ≥768 17 */
    line-height: 1.35;
    text-align: start;
    margin-bottom: 0;
    border-style: hidden;
}

/* C 플랫(19턴): 번호/노래 헤더 띠도 걷는다 — 번호 열은 자명하고, 표의
   시작 경계는 제목 밑선이 맡는다. 마크업과 아래 th 스타일은 남겨 둔다
   (되돌림 대비 + JS 가 placeholder 표에 같은 마크업을 만든다) */
.song-table thead {
    display: none;
}

/* 표 헤더: 반투명 tint 띠로 본문과 위계를 나눈다.
   브랜드 없는 표(검색 결과 등)는 중립 slate tint 가 기본이고,
   .table-tj/.table-ky 가 브랜드 tint 로 덮는다.
   (헤더 자체의 backdrop-filter 는 제거 — 유리 패널 위에 다시 블러를 겹치는
   중첩 재질이라 시각 차이는 거의 없는데, 더보기처럼 높이가 변하는
   애니메이션에서 매 프레임 재샘플링되어 버벅임의 원인이 된다) */
.song-table thead th {
    font-size: var(--fs-md);
    font-weight: var(--fw-mid); /* 숨은 머리글 — 작은 라벨 */
    padding: .7rem .8rem;
    background: rgb(120 145 170 / .2);
    color: var(--ink-2);
}

.song-table thead th:first-child {
    width: 20%; /* 번호 열 — tbody td.song-number 와 같은 값 (4기 9턴 후속: 5.2rem → 20%) */
    text-align: center;
}

/* TJ·금영 식별색: 배경은 유리 tint, 글자는 대비 확보한 잉크 */
.table-tj thead th {
    background: var(--tj-tint);
    color: var(--tj-ink);
}

.table-ky thead th {
    background: var(--ky-tint);
    color: var(--ky-ink);
}

/* 행 구분선: 유리 밑으로 빛이 스민 하늘색 페이드 라인 — 가운데가 또렷하고
   표 양끝에서 투명하게 녹는다. 셀 border 로 그리면 표 페인트가 Blink 의
   느린 경로로 떨어져 컬랩스 리빌마다 80~90ms 래스터 버스트가 생기므로
   border 는 쓰지 않는다 (ui-overhaul 11턴 실측).
   :where 로 특정도를 0 으로 — 안 그러면 이 쇼트핸드가 행 상태 하이라이트
   (.selected, 순서변경·삭제 tint)의 배경을 특정도로 눌러 지운다 */
:where(.song-table tbody tr + tr) {
    background: linear-gradient(90deg,
        transparent 0%,
        rgb(120 170 215 / .5) 12%,
        rgb(120 170 215 / .5) 88%,
        transparent 100%) 0 0 / 100% 1px no-repeat;
}

/* index 지난달 컬랩스는 별도 표라 tr + tr 이 두 표의 이음매를 못 잇는다 —
   펼치면 이번달 마지막 행과 지난달 첫 행 사이만 선이 빈다.
   지난달 표의 첫 행 위에 같은 선을 그어 이음매를 채운다 */
:where(.song-table-collapse .song-table tbody tr:first-child) {
    background: linear-gradient(90deg,
        transparent 0%,
        rgb(120 170 215 / .5) 12%,
        rgb(120 170 215 / .5) 88%,
        transparent 100%) 0 0 / 100% 1px no-repeat;
}

.song-table tbody td {
    padding: .8rem .8rem;
    vertical-align: top;
    /* lift 판(::before)의 기준점. 셀마다 스태킹 컨텍스트를 만들어 판이
       셀 내용 아래, 행 배경(구분선) 위에 그려진다 */
    position: relative;
    z-index: 1;
}

/* ---------- 행 lift (D12·D16, 시안 6턴 4번) ----------
   hover·선택 상태를 행 배경 tint 대신 살짝 떠오르는 흰 판으로 보인다.
   판은 tr 이 아니라 제목 셀(td.song-title)의 ::before — Chrome 은 tr::before
   가 absolute 여도 익명 셀을 만들고, table-layout: fixed 표는 그 빈 셀에
   제목 열 폭의 절반을 준다(시안 실측). 번호 열만큼 왼쪽으로 내밀어 행 전체를
   덮는다 — 번호 열이 표의 20% 이므로 제목 열(80%) 기준 25%. 판 색은 --lift-bg 로 바꾼다 (편집 모드 상태 색: page/favorite-song.css) */
.song-table tbody td.song-title::before {
    content: '';
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: calc(-25% + 6px);
    right: 6px;
    z-index: -1;
    border-radius: var(--r-control);
    background: var(--lift-bg, #fff);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / .8),
        0 0 0 1px rgb(30 42 56 / .08),
        0 2px 10px rgb(30 42 56 / .10);
    opacity: 0;
    transform: scale(.965);
    transition: opacity .18s var(--ease-effects), transform .38s var(--spring-spatial), background .2s var(--ease-effects);
    pointer-events: none;
}

/* lift 가 켜지는 행 = 클릭이 의미 있는 행(D16): 제목 링크가 있는 행(신곡
   목록), 검색 결과 행(.table-hover), 순서 설정 모달 행. 애창곡 일반 행은
   링크가 없어 hover 없음 — 편집 모드의 대상 행은 favorite-song.css 가 켠다.
   :where 로 특정도를 0 으로 두어 아래 is-scrolling 규칙이 이긴다 */
@media (hover: hover) {
    .song-table tbody tr:where(:has(a.song-title-text[href]), .table-hover tbody tr, #choosePresentOrderTable tbody tr):hover td.song-title::before {
        opacity: 1;
        transform: scale(1);
    }
}

/* Bootstrap .table-hover 의 셀 배경 hover 는 끈다 — 판이 대신한다 */
.table-hover > tbody > tr:hover > td {
    --bs-table-accent-bg: transparent;
    background: transparent;
}

/* 링크 행은 행 어디를 눌러도 새 탭 (common-handlers.js) */
.song-table tbody tr:has(a.song-title-text[href]) {
    cursor: pointer;
}

/* 스크롤 중에는 hover 판을 그리지 않는다 — 휠 노치마다(제스처가 끝날 때마다)
   Chrome 이 포인터 아래 행의 hover 를 갱신해 판이 재페인트되고 GPU 래스터를
   기다린다. hover 상태와 클릭은 그대로 두고 그리는 값만 되돌린다
   (glass-motion.js 가 body.is-scrolling 을 토글). 선택 상태(hover 없이 켜진
   판)는 건드리지 않는다 — 순서 설정 모달의 .selected 는 id 특정도로 이기고,
   순서변경에서 집은 행(favorite-song.css)은 여기서 제외한다 */
body.is-scrolling .song-table tbody tr:hover:not(.song-row-will-switch-selected) td.song-title::before {
    opacity: 0;
    transform: scale(.965);
    transition: none;
}

/* ---------- 번호 칸 ----------
   셀 공통 규칙(.song-table tbody td)과 같은 무게로 한 곳에 (4기 9턴 후속 — 전에는
   z-index 만 구체 선택자에 따로 있었고 padding 은 !important 로 이겼다) */
.song-table tbody td.song-number {
    /* thead 가 숨어 fixed 레이아웃의 열 폭 기준이 없으므로 첫 행 td 가
       번호 열 폭을 선언한다 (thead th:first-child 와 같은 값). 5.2rem → 20% (4기 9턴 후속,
       사용자 결정) — 표 폭에 비례하므로 좁은 폭에서 좁아지고 넓은 패널에서는 넓어진다 */
    width: 20%;
    text-align: center;
    padding: .8rem .2rem 0;
    /* 번호 셀은 제목 셀보다 먼저 그려지므로, 제목 셀에서 왼쪽으로 내민 lift 판에
       덮이지 않게 한 단계 위로 */
    z-index: 2;
}

.song-number span {
    font-size: var(--fs-md);
    font-weight: var(--fw-mid); /* 번호는 노래방에 입력하는 실행값이라 본문보다 한 단 위 */
    font-variant-numeric: tabular-nums;
    color: var(--ink-2);
}

/* 제일 최신 노래: 추가일 badge 와 같은 의미·같은 색 */
.song-number .latest {
    display: inline-block;
    color: var(--badge-ink);
    background: var(--badge-tint);
    border-radius: 8px;
    padding: .1rem .4rem;
}

/* ---------- 제목 칸 ---------- */
.song-title {
    text-align: start;
}

/* 번호 칸(가운데 정렬, 5.2rem)과 제목 사이 빈 폭이 넓어 왼쪽 패딩은 없애고
   오른쪽은 .8 → .6rem (4기 9턴 후속). 셀 공통 padding 과 같은 무게의 선택자 */
.song-table tbody td.song-title {
    padding-inline: 0 .6rem;
}

.song-title-text {
    display: block;
    color: var(--ink);
    font-weight: var(--fw-title); /* 행에서 유일한 제목 굵기 */
    text-decoration: none;
}

/* 제목 링크의 밑줄 hover 는 두지 않는다 (D12) — 행 판이 hover 를 맡는다 */
a.song-title-text:hover {
    color: var(--ink);
    text-decoration: none;
}

/* 루비: 원본값 위에 한글 대표값. 대표값은 글자별 읽기가 아니라 구(句) 번역이라
   원본값 폭에 맞춰 낱말을 벌리지 않고(ruby-align: start) 한 줄 캡션처럼 붙여 읽는다.
   글자 바닥 11px 은 HIG 최소값 — 주석 글자라 본문 바닥(12)까지는 올리지 않는다 (4기 9턴) */
.song-title ruby,
.song-info ruby {
    display: ruby;
    ruby-align: start;
}

.song-table rt {
    font-size: max(.62em, 11px);
    color: var(--ink-2);
    font-weight: var(--fw-strong); /* 11px 주석 글자 — 작을수록 같은 강조에 더 굵어야 한다 */
}

/* 보조줄 두 개: 아티스트 → 작품정보 (4기 8턴). 세 층 계단(4기 9턴 후속): 제목과
   아티스트는 같은 왼쪽 끝, 작품정보만 들여쓰기 + 왼쪽 세로선 — 선 하나가 "아티스트에
   딸린 값" 한 가지 뜻만 갖는다.
   세로 간격(better-layout: 그룹 안 간격의 2배 이상을 그룹 사이에): 제목→아티스트는 한
   그룹이라 줄 상자의 반행간 위에 .125rem(2px)만, 아티스트→작품정보는 .5rem(8px).
   굵기(glass.css --fw-* 사다리): 제목 title(700) · 아티스트와 번호 mid(500) · 대표값과
   작품정보 body(400) · 루비와 배지 strong(600). 아티스트와 작품정보는 굵기 한 단에
   색(ink / ink-2)·들여쓰기·왼쪽 선이 더해져 갈린다 */
.song-singer,
.song-info {
    font-size: var(--fs-md);
    line-height: 1.5;
}

.song-singer {
    margin-block-start: .125rem;
}

.song-info {
    color: var(--ink-2);
    font-weight: var(--fw-body); /* 라이트(300)는 18px 아래에서 흐려져 쓰지 않는다 */
    margin-block-start: .5rem;
    padding-inline-start: .7rem;
    border-inline-start: 3px solid rgb(140 160 180 / .4);
}

/* 작품정보에 루비가 있으면 루비(rt, 11px)가 줄 상자 위로 10px 튀어나와 아티스트의 루비처럼
   읽힌다 (4기 9턴 A2). 안쪽 여백 .65rem 으로 그만큼 받쳐 왼쪽 선이 rt 까지 올라오고(선이 rb
   줄부터 시작하면 rt 가 선 밖에 떠 보인다), 바깥 여백 .5rem 은 루비 없는 행과 같아 선의
   시작 높이가 행마다 같다 (9턴 후속) */
.song-info:has(ruby) {
    padding-block-start: .65rem;
}

.song-singer {
    /* 제목(800)보다 한 단계 낮은 bold. 이 폰트는 300/400/700/800 뿐이라
       600 은 700(B) 으로 렌더된다. 작품정보(300·회색)와는 굵기+잉크로 구분 */
    font-weight: var(--fw-mid); /* 아티스트는 제목 다음가는 값 — 중간 단 */
    color: var(--ink);
}

/* 아티스트 대표값: 루비로 쌓지 않고 원본값 뒤에 가운뎃점으로 같은 줄에 붙인다 —
   이름은 읽는 문장이 아니라 식별하는 값이라 세로 층을 늘리지 않는다 (4기 9턴 A1) */
.song-singer-korean {
    color: var(--ink-2);
    font-size: smaller; /* 원본값보다 한 단 작게 (16→13.3, 15→12.5, 14→11.7) */
    font-weight: var(--fw-body); /* 대표값은 원본값에 딸린 값 */
    /* 줄바꿈 허용 — nowrap 이면 좁은 폭에서 긴 대표값이 칸 밖으로 잘린다 */
}

.song-singer-korean::before {
    content: '·';
    margin-inline-end: .35em;
}

/* ---------- 표 제목 (h2) + 추가일 chip ----------
   C 플랫(19턴): 패널과 헤더 띠가 사라진 자리에서 제목 밑선이 "표의 시작"을
   맡는다. 밑선 색은 기본 중립 잉크, 브랜드 표는 :has() 로 브랜드 잉크
   (thead tint 가 지니던 TJ/금영 식별을 밑선이 이어받는다) */
.song-header-text {
    position: relative; /* 애창곡 화면의 header 버튼(position-absolute) 기준점 */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    text-align: center;
    font-size: var(--fs-lg);
    margin-bottom: 0;
    padding-bottom: .55rem;
    border-bottom: 2px solid rgb(100 125 155 / .45);
}

.song-panel:has(.table-tj) .song-header-text {
    border-bottom-color: rgb(147 58 5 / .4); /* --tj-ink 계열 */
}

.song-panel:has(.table-ky) .song-header-text {
    border-bottom-color: rgb(47 84 149 / .4); /* --ky-ink 계열 */
}

.song-header-subtext {
    font-size: var(--fs-xs);
    font-weight: var(--fw-strong); /* 12px 배지 */
    color: var(--badge-ink);
    background: var(--badge-tint);
    border: 1px solid rgb(255 255 255 / .6);
    border-radius: var(--r-capsule);
    padding: .28rem .7rem;
    min-width: 0;
}

/* ---------- 저번달 목록 (collapse) ---------- */
.collapsing {
    transition: height 0.5s ease; /* Bootstrap 기본값 0.35s 보다 여유있게 */
}

/* 컬랩스 래퍼: 유리 패널(.song-table-border)의 margin·border 를 래퍼 안쪽에 가둬
   height 애니메이션에 함께 접히게 한다 (6턴-2 덜컥임 해결).
   BFC 를 상시로 유지해야 margin 이 펼친 상태에서 래퍼 밖으로 새어나가
   (margin collapsing) 닫기 시작 프레임에 튀지 않는다 — overflow: hidden
   대신 flow-root 로 만들어 내용물을 잘라내지 않는다(19턴). 전환 중에는
   bootstrap .collapsing 이 자체 overflow 를 건다 */
.song-table-collapse {
    display: flow-root;
}

.last-month-show-button-wrapper {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* ---------- 영역 분리 ---------- */
/* 유리 디자인에서는 선 대신 여백으로 나눈다 */
.splitter {
    border: 0;
    margin: 2rem auto;
}

/* ---------- dark (D7·D22) ----------
   글자는 잉크 토큰이 바뀌므로 손댈 것이 없고, 선·판·칩만 흰 알파로 */
html[data-theme="dark"] :where(.song-table tbody tr + tr),
html[data-theme="dark"] :where(.song-table-collapse .song-table tbody tr:first-child) {
    background-image: linear-gradient(90deg,
        transparent 0%,
        rgb(255 255 255 / .12) 12%,
        rgb(255 255 255 / .12) 88%,
        transparent 100%);
}

html[data-theme="dark"] .song-table tbody tr {
    --lift-bg: rgb(255 255 255 / .08);
}

html[data-theme="dark"] .song-table tbody td.song-title::before {
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / .12),
        0 0 0 1px rgb(255 255 255 / .06),
        0 2px 10px rgb(0 0 0 / .35);
}

html[data-theme="dark"] .song-info {
    border-inline-start-color: rgb(255 255 255 / .22);
}

html[data-theme="dark"] .song-header-subtext {
    border-color: rgb(255 255 255 / .15);
}

/* 제목 밑선: 중립은 흰 알파, 브랜드는 dark 잉크(--tj-ink/--ky-ink) 계열 */
html[data-theme="dark"] .song-header-text {
    border-bottom-color: rgb(255 255 255 / .18);
}

html[data-theme="dark"] .song-panel:has(.table-tj) .song-header-text {
    border-bottom-color: rgb(255 176 136 / .45);
}

html[data-theme="dark"] .song-panel:has(.table-ky) .song-header-text {
    border-bottom-color: rgb(159 192 255 / .45);
}