/* 사인파 청음 훈련 ───────────────────────────── */

/* 유형 카드 버튼화 */
button.train-card--btn {
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
    background: var(--color-surface);
    width: 100%;
}
button.train-card--btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary);
}

/* 로그인 필요(게스트) — 클릭은 가능하되 잠금 상태임을 시각적으로 표시 */
button.train-card--btn.is-locked .train-card__ic,
button.train-card--btn.is-locked .train-card__desc,
button.train-card--btn.is-locked .train-card__cta { opacity: .6; }
button.train-card--btn.is-locked .badge-muted {
    display: inline-flex; align-items: center; gap: 4px; vertical-align: middle;
}
button.train-card--btn.is-locked .badge-muted svg { width: 12px; height: 12px; }

/* 광고 슬롯 — 카드 테두리·배경 없이 그리드 칸에 300x250 애드핏 배너만 가운데 배치 */
.train-ad {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 250px;
    overflow: hidden;
}
.train-ad .kakao_ad_area { max-width: 100%; }

/* 광고 자리표시(공통) — 광고가 차단·미노출되면 칸을 없애지 않고 회색 '광고' 박스를 남긴다.
   자리표시(::after)는 광고 크기(--ad-w/--ad-h)로 가운데 깔리고(z-index:0), 실제 광고(iframe)가
   그 위(z-index:1)를 정확히 덮는다. JS로 감추지 않으므로, 광고가 안 뜨면 회색 박스가 항상 보인다. */
.ad-ph { position: relative; }
.ad-ph::after {
    content: "광고";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: var(--ad-w, 100%);
    height: var(--ad-h, 100%);
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--color-muted);
    /* 광고 미로딩(차단·미노출)으로 '광고' 텍스트만 뜰 때 — R값 없는 딱딱한 흰색 계열 네모 */
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 0;
    pointer-events: none;
    z-index: 0;
}
/* 다크 테마에선 새하얀 블록이 튀므로 표면색으로만 낮춘다(딱딱한 네모·R 없음은 유지) */
[data-theme="dark"] .ad-ph::after { background: var(--color-surface); }
.ad-ph .kakao_ad_area { position: relative; z-index: 1; }
.train-ad { --ad-w: 300px; --ad-h: 250px; }
.train-rail { --ad-w: 160px; --ad-h: 600px; }
.train-stage__ad { --ad-w: 320px; --ad-h: 50px; }

/* 광고는 항상 300px 풀 사이즈로, 옆이 잘리지 않게 노출한다.
   그리드 폭을 기준으로 판단하기 위해 train-grid 를 컨테이너로 삼는다. */
.train-grid { container-type: inline-size; }

/* 3열이 유지되는 데스크톱에서 한 칸이 300px 미만으로 좁아지는 애매한 폭
   (예: 사이드바 펼침) 에서는 광고가 잘린다. 이때 광고가 두 칸을 차지해
   폭을 확보하고, 그 자리의 카드는 자연히 다음 줄로 밀려나게 한다.
   기준: 3열이 각 300px 이상이려면 폭 300*3 + 18*2 = 936px 이상 필요.
   넓은 폭에서는 순서 변경 없이 기존대로 '카드·카드·광고'로 노출되고,
   좁은 폭에서만 order로 광고를 첫 카드(사인파) 바로 뒤로 옮겨
   빈칸 없이 '사인파 + 광고(2칸)'가 한 줄에 오도록 한다. */
@media (min-width: 1025px) {
    @container (max-width: 935px) {
        .train-grid > [data-train="sine"] { order: -2; }
        .train-ad { grid-column: span 2; order: -1; }
    }
}

/* 광고 미노출(No-Ad)·차단(AdGuard 등) 시 — 칸을 제거하지 않고 회색 '광고' 자리표시(.ad-ph)를
   그대로 둔다. 그리드 정렬이 흔들리지 않는다(training.js 참고). */

/* ── 설정 다이얼로그 ── */
/* 제목·부제목 ↔ 설정 내용 ↔ 하단 버튼 사이 간격. 가운데 설정 영역만 스크롤되고
   제목·하단 버튼은 고정. 더 스크롤할 내용이 있으면 위/아래로 페이드가 떠 스크롤 여지를 알린다. */
.train-setup .settings-dialog__card {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 32px);
    gap: 28px;
    overflow: hidden;                             /* 큰 메인 박스 자체에는 스크롤바를 두지 않음 */
}
.train-setup .settings-dialog__head,
.train-setup .settings-dialog__actions { flex: 0 0 auto; }

.setup-scroll-wrap { position: relative; flex: 1 1 auto; min-height: 0; display: flex; }
/* 안쪽 스크롤바가 내용(체크박스 등)과 겹치지 않도록 우측 거터 + 얇은 스크롤바 */
.setup-scroll {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    padding-right: 12px;
    /* 스크롤바를 강제 스타일링하지 않는다. OS 기본(오버레이) 스크롤바를 그대로 써서
       가만히 있으면 자동으로 부드럽게 사라지고, 스크롤할 때만 얇게 나타나도록 한다. */
}
.setup-fade {
    position: absolute; left: 0; right: 0; height: 84px;
    pointer-events: none; opacity: 0; transition: opacity .18s ease; z-index: 2;
}
.setup-fade--top { top: 0; background: linear-gradient(var(--color-surface) 32%, transparent); }
.setup-fade--bottom { bottom: 0; background: linear-gradient(transparent, var(--color-surface) 68%); }
.setup-scroll-wrap.is-fade-top .setup-fade--top { opacity: 1; }
.setup-scroll-wrap.is-fade-bottom .setup-fade--bottom { opacity: 1; }
/* 다이얼로그가 열려 있는 동안 뒤쪽 메인 페이지 스크롤바 숨김 (스크롤 주체는 html) */
html.dialog-locked, body.dialog-locked { overflow: hidden; }
/* 다이얼로그 박스 자체에도 스크롤바를 두지 않음 (스크롤은 안쪽 .setup-scroll 만) */
.settings-dialog.train-setup { overflow: hidden; }

.setup-step[hidden] { display: none; }
.setup-step > .setup-block:last-child { margin-bottom: 0; }
.setup-block { display: grid; gap: 8px; margin-bottom: 24px; }
.setup-label { font-size: 13px; font-weight: 700; color: var(--color-text-soft); }
.setup-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.setup-count { font-size: 13px; color: var(--color-muted); }
.setup-count b { font-weight: 800; color: var(--color-primary); font-variant-numeric: tabular-nums; }
.setup-hint { font-size: 12px; color: var(--color-muted); line-height: 1.5; margin: 2px 0 0; }
.train-setup #setupStart:disabled,
.train-setup #setupStart:disabled:hover {
    opacity: 1;
    cursor: not-allowed;
    background: var(--color-border-strong);
    border-color: var(--color-border-strong);
    color: var(--color-text-soft);
    box-shadow: none;
}

/* 모드 세그먼트 토글 — 트랙 위에 떠 있는 알약(pill) 형태 */
.seg { display: flex; gap: 4px; padding: 5px; border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-surface-2); }
.seg__btn {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 11px 14px; border: 0; border-radius: var(--radius-full);
    background: transparent; color: var(--color-text-soft);
    font: inherit; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; cursor: pointer;
    transition: color .15s ease, background .15s ease, box-shadow .15s ease;
}
.seg__btn svg { width: 16px; height: 16px; }
.seg__btn:not(.is-active):hover { color: var(--color-text); background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.seg__btn.is-active {
    background: var(--color-surface); color: var(--color-primary);
    box-shadow: var(--shadow-sm), inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 16%, transparent);
}

/* EQ 강도 + Q Factor — 2열 표처럼 좌측정렬로 나란히(각 열: 제목 위, 값 아래) */
.setup-eq-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; gap: 16px 48px; }
.setup-eq-gain { display: grid; gap: 8px; }
.setup-eq-q { display: grid; gap: 8px; justify-items: start; }
/* Q Factor 페이더 팝업은 값 아래·왼쪽 끝 정렬(설정창은 오른쪽 정렬과 다르게) */
.setup-eq-q .vol-pop__panel { left: 0; right: auto; }

/* 프리셋 칩 (밴드 프리셋 · 인정범위 · 문제 수) */
.setup-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.preset-chip {
    padding: 8px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-full);
    background: var(--color-surface); color: var(--color-text-soft);
    font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
    transition: border-color .12s, background .12s, color .12s;
}
.preset-chip:hover { border-color: var(--color-primary); }
.preset-chip.is-active { background: var(--color-primary-soft); border-color: var(--color-primary); color: var(--color-primary); }
.preset-chip--ghost { margin-left: auto; color: var(--color-muted); border-style: dashed; }

/* ── EQ 음원 선택 (설정 스텝) ── */
.music-pick {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
    margin-top: 10px;
    max-height: 320px; overflow-y: auto;
    padding: 2px;
}
.music-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    transition: border-color .12s, background .12s;
}
.music-row:hover { border-color: var(--color-primary); }
.music-row__check {
    display: flex; align-items: center; gap: 10px;
    flex: 1 1 auto; min-width: 0; cursor: pointer;
}
.music-row__check input { width: 18px; height: 18px; accent-color: var(--color-primary); flex: none; cursor: pointer; }
.music-row__name {
    font-size: 14px; font-weight: 600; color: var(--color-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.music-row__hint { flex: none; font-size: 12px; font-weight: 600; color: var(--color-muted); }
.music-row__play {
    flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-primary);
    cursor: pointer;
    transition: background .12s, border-color .12s, transform .08s;
}
.music-row__play:hover { background: var(--color-primary-soft); border-color: var(--color-primary); }
.music-row__play:active { transform: scale(.94); }
.music-row__play svg { width: 16px; height: 16px; }

/* ── 멀티트랙 곡 선택 카드 — 이펙터 선택 카드와 동일한 그리드·파란색.
   기본은 접힌 작은 카드, 셰브런으로 펼쳐 보유 트랙을 표시, 선택은 '사용' 토글. ── */
.mt-song {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    transition: border-color .12s, background .12s, color .12s;
    overflow: hidden;
}
.mt-song:hover { border-color: var(--color-primary); }
/* 선택(사용)된 카드 = 이펙터 카드와 동일한 파란색 */
.mt-song.is-on { background: var(--color-primary-soft); border-color: var(--color-primary); color: var(--color-primary); }
.mt-song__head {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 12px; cursor: pointer;
}
.mt-song__check {
    flex: none; width: 18px; height: 18px;
    accent-color: var(--color-primary); cursor: pointer;
}
.mt-song__name {
    flex: 1 1 auto; min-width: 0;
    font-size: 14px; font-weight: 700; color: var(--color-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mt-song.is-on .mt-song__name { color: var(--color-primary); }
.mt-song__meta { flex: none; font-size: 12px; font-weight: 600; color: var(--color-muted); }
.mt-song.is-on .mt-song__meta { color: var(--color-primary); opacity: .85; }
.mt-song__chevron {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    color: var(--color-muted); transition: transform .16s, color .12s;
}
.mt-song.is-on .mt-song__chevron { color: var(--color-primary); }
.mt-song__chevron svg { width: 16px; height: 16px; }
.mt-song.is-open .mt-song__chevron { transform: rotate(90deg); }
.mt-song__body {
    display: none; flex-wrap: wrap; gap: 4px;
    padding: 0 12px 12px;
}
.mt-song.is-open .mt-song__body { display: flex; }
.mt-song__stem {
    font-size: 11px; font-weight: 600; line-height: 1;
    padding: 4px 7px;
    border-radius: 999px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-muted);
}
.mt-song.is-on .mt-song__stem { border-color: var(--color-primary); color: var(--color-primary); }

/* 곡 카드는 한 줄에 하나씩(세로로 쌓기).
   그리드 대신 flex 세로 배치 — 카드를 펼쳐도 서로 겹치지 않고 아래로 밀려나며,
   목록 전체 높이가 늘어 스크롤이 그만큼 확장된다. */
.music-pick--mt {
    display: flex; flex-direction: column;
    grid-template-columns: none;
    align-items: stretch;
}
.music-pick--mt .mt-song { flex: none; }
#mtSongPresets { margin-top: 10px; }
#mtSongPresets:not([hidden]) + .music-pick { margin-top: 8px; }

/* ── 음원 그룹(기본 음원 / 내 음원) 접기·펼치기 ── */
.music-pick--grouped { display: block; grid-template-columns: none; }
.music-group + .music-group { margin-top: 12px; }
.music-group__head {
    display: flex; align-items: center; gap: 10px; padding: 8px 12px;
    background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-md);
}
.music-group__toggle {
    flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px;
    background: none; border: 0; padding: 4px 0; cursor: pointer; font: inherit;
    font-size: 14px; font-weight: 700; color: var(--color-text); text-align: left;
}
.music-group__chev { flex: none; width: 15px; height: 15px; color: var(--color-muted); transition: transform .15s; }
.music-group.is-open .music-group__chev { transform: rotate(90deg); }
.music-group__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-group__count { flex: none; margin-left: auto; font-size: 12px; font-weight: 600; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.music-group__all {
    flex: none; display: flex; align-items: center; cursor: pointer;
}
.music-group__all input { width: 18px; height: 18px; accent-color: var(--color-primary); cursor: pointer; }
.music-group__body {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin-top: 8px; padding: 2px;
}
.music-group:not(.is-open) .music-group__body { display: none; }

/* ── 밴드 칩 그리드 (Custom 설정) ── */
.band-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    gap: 8px;
}
.band-grid--setup { padding: 2px; }
.band-chip {
    display: flex; flex-direction: row; align-items: baseline; justify-content: center; gap: 3px;
    padding: 9px 6px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text-soft);
    font-size: 15px; font-weight: 700; cursor: pointer;
    transition: transform .08s, border-color .12s, background .12s, color .12s;
}
.band-chip small { font-size: 10px; font-weight: 600; opacity: .6; }
.band-chip:hover { border-color: var(--color-primary); }
.band-chip.is-on { background: var(--color-primary-soft); border-color: var(--color-primary); color: var(--color-primary); }
.band-chip.is-correct { background: var(--color-success-soft); border-color: var(--color-success); color: var(--color-success); }
.band-chip.is-wrong { background: var(--color-danger-soft); border-color: var(--color-danger); color: var(--color-danger); }
.band-chip:disabled { cursor: default; opacity: .85; }
/* 핑크 원본·적용 비교에서 '원본만 들은' 상태 — 적용본을 들어야 하므로 확실하게 회색 처리 */
.band-grid.is-cmp-wait .band-chip {
    background: var(--color-bg-subtle);
    border-color: var(--color-border);
    color: var(--color-muted);
    opacity: .5;
    cursor: not-allowed;
    filter: grayscale(1);
}
.band-grid.is-cmp-wait .band-chip:hover { border-color: var(--color-border); transform: none; box-shadow: none; }
/* 새 문제 로드 직후, 커서가 직전 선택 칩에 머물러 생기는 '붙은 호버'(파란 테두리) 제거 — 포인터가 움직이면 해제 */
.band-grid.is-fresh .band-chip:hover { border-color: var(--color-border); transform: none; box-shadow: none; }

/* ── 훈련 무대 ── */
/* 훈련 무대 + PC 우측 광고 레일 레이아웃 — PC(≥769px, 앱의 모바일 전환점과 동일)에서는
   항상 오른쪽에 세로 배너(160x600)를 붙이고, 모바일에서는 레일을 접고 하단 320x50 슬롯만 쓴다. */
.train-stage-layout { display: flex; align-items: flex-start; gap: 20px; }
.train-stage-layout > .train-stage { flex: 1 1 auto; min-width: 0; }
.train-rail { display: none; flex: 0 0 160px; min-height: 600px; position: sticky; top: 24px; }
.train-rail .kakao_ad_area { max-width: 100%; }
@media (min-width: 769px) {
    /* 훈련 중(.is-training)이고 광고 슬롯이 주입됐을 때(:not(:empty))만 노출.
       광고가 차단·미노출돼도 회색 자리표시(.ad-ph)를 보여주므로 숨기지 않는다. */
    .train-stage-layout.is-training .train-rail:not(:empty) { display: flex; justify-content: center; }
}

.train-stage { max-width: none; margin: 0 auto; display: grid; gap: 16px; animation: trainFade .45s ease both; }
@keyframes trainFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* 상단 정보 바 */
.train-top {
    display: grid; gap: 10px;
    padding: 14px 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.train-top__row { display: flex; align-items: center; justify-content: space-between; }
.train-top__q { font-size: 13px; color: var(--color-muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.train-dots { display: flex; flex-wrap: wrap; gap: 5px; }
.train-dot { width: 9px; height: 9px; border-radius: var(--radius-full); background: var(--color-surface-2); border: 1px solid var(--color-border); transition: background .15s, transform .15s; }
.train-dot.is-correct { background: var(--color-success); border-color: var(--color-success); }
.train-dot.is-wrong { background: var(--color-danger); border-color: var(--color-danger); }
.train-dot.is-current { transform: scale(1.35); border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.train-top__metrics { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--color-muted); }
.train-top__metrics b { font-size: 16px; font-weight: 800; color: var(--color-text); font-variant-numeric: tabular-nums; }
.train-top__metrics span { display: inline-flex; align-items: center; gap: 5px; }
.train-top__metrics svg { width: 15px; height: 15px; }
.train-top__metrics .is-accent { color: var(--color-warning, #d97706); }
.train-top__metrics .is-accent b { color: var(--color-warning, #d97706); }
.train-top__metrics .is-ok, .train-top__metrics .is-ok b { color: var(--color-success); }
.train-top__metrics .is-no, .train-top__metrics .is-no b { color: var(--color-danger); }

/* 플레이어 카드 */
.train-stage__card {
    position: relative; overflow: hidden;
    padding: 28px 32px 32px;
    border-radius: var(--radius-xl);
    background:
        radial-gradient(130% 90% at 50% -20%, var(--color-primary-soft), transparent 55%),
        var(--color-surface);
    box-shadow: var(--shadow-lg);
    transition: box-shadow .25s ease;
}
.train-stage__card.is-correct { box-shadow: 0 0 0 2px var(--color-success), var(--shadow-lg); }
.train-stage__card.is-wrong   { box-shadow: 0 0 0 2px var(--color-danger), var(--shadow-lg); }
.player-card__prompt { margin-top: 10px; font-size: 19px; font-weight: 800; text-align: center; letter-spacing: -0.01em; }

/* ── 리슨 오브 (재생 중 반투명 물결) — 단일 또는 원본·적용 2개 ── */
.listen-orbs {
    display: flex; justify-content: center; align-items: flex-start;
    gap: 12px; margin: 8px auto 18px;
}
.listen-orb {
    position: relative;
    flex: 0 1 320px;
    width: 100%; max-width: 320px;
    aspect-ratio: 1 / 1;
    max-height: 240px;
    display: grid; place-items: center;
}
.listen-orb[hidden] { display: none; }
.listen-orb__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.listen-orb__btn {
    position: relative; z-index: 1;
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    width: 130px; height: 130px;
    text-align: center; line-height: 1.2;
    border: 0; border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
    color: var(--color-primary-contrast);
    font-size: 14px; font-weight: 700; cursor: pointer;
    box-shadow: var(--shadow-primary);
    transition: transform .14s ease, box-shadow .2s ease, opacity .2s ease;
}
.listen-orb__btn svg { width: 30px; height: 30px; }
.listen-orb__label { font-size: 14px; font-weight: 700; }
.listen-orb__btn:not(:disabled):hover { transform: translateY(-2px); }
.listen-orb__btn:active { transform: translateY(0); }
.listen-orb__btn:disabled { cursor: default; opacity: .8; }
.listen-orb.is-playing .listen-orb__btn { box-shadow: 0 0 0 6px var(--color-primary-soft), var(--shadow-primary); }

/* 원본·적용 2개 모드 — 좌우로 나란히, 크기를 줄여 균형. 재생 중 오브를 강조. */
.listen-orbs.is-dual { gap: 10px; }
.listen-orbs.is-dual .listen-orb { flex: 1 1 0; max-width: 220px; max-height: 200px; }
.listen-orbs.is-dual .listen-orb__btn { width: 104px; height: 104px; font-size: 13px; }
.listen-orbs.is-dual .listen-orb__btn svg { width: 24px; height: 24px; }
.listen-orbs.is-dual .listen-orb:not(.is-playing) .listen-orb__btn { box-shadow: var(--shadow-sm); }
.listen-orbs.is-dual .listen-orb.is-playing .listen-orb__btn { transform: scale(1.05); }

/* ── 멀티트랙 스크러버 — 곡 전체 파형 + 원본/적용 전환 + 드래그 탐색 (배경에 바로) ── */
.mt-scrubber { display: flex; flex-direction: column; gap: 14px; width: 100%; padding: 4px 0; }
.mt-scrubber[hidden] { display: none; }
.mt-scrubber__modes { display: flex; justify-content: center; gap: 8px; }
.mt-scrubber__mode {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 9px 20px; border-radius: 999px; cursor: pointer;
    font-size: 14px; font-weight: 700; letter-spacing: -0.01em;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-muted);
    transition: background .14s, border-color .14s, color .14s, box-shadow .14s;
}
.mt-scrubber__mode:hover:not(:disabled) { border-color: var(--color-primary); }
.mt-scrubber__mode:disabled { cursor: default; opacity: .55; }
/* 원본 재생 OFF(EQ·이펙터 단일 모드) — '원본' 전환 버튼을 숨기고 '적용본'만 남긴다.
   (.mt-scrubber__mode 가 display를 지정하므로 UA의 [hidden] 규칙을 명시적으로 덮어써야 한다) */
.mt-scrubber__mode[hidden] { display: none; }
/* 원본·적용본 모두 재생 중인 카드는 파란색으로 강조 */
.mt-scrubber__mode.is-active {
    background: var(--color-primary-soft); border-color: var(--color-primary); color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.mt-scrubber__wave {
    position: relative; width: 100%; height: 132px;
    cursor: pointer; touch-action: none;
}
.mt-scrubber__wave canvas { display: block; width: 100%; height: 100%; }

/* ── 랜덤(부스트/컷) 세션: 답안 칩을 좌(부스트)·우(컷) 반반으로 사용 ── */
.band-chip--dir { position: relative; }
.band-chip__face { position: relative; z-index: 2; display: inline-flex; align-items: baseline; gap: 3px; transition: opacity .12s ease; }
.band-chip__half {
    position: absolute; top: 0; bottom: 0; z-index: 1; width: 50%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    color: var(--color-primary);
    opacity: 0; pointer-events: none;
    transition: opacity .12s ease, background .12s ease;
}
.band-chip__half--boost { left: 0; border-top-left-radius: inherit; border-bottom-left-radius: inherit; }
.band-chip__half--cut { right: 0; border-top-right-radius: inherit; border-bottom-right-radius: inherit; }
.band-chip__sym { font-size: 14px; line-height: 1; font-weight: 800; }
.band-chip__cap { font-size: 11px; font-weight: 800; letter-spacing: -0.02em; }
.band-chip.is-aim-boost, .band-chip.is-aim-cut { border-color: var(--color-primary); }
.band-chip.is-aim-boost .band-chip__half--boost,
.band-chip.is-aim-cut .band-chip__half--cut { opacity: 1; background: var(--color-primary-soft); }
.band-chip.is-aim-boost .band-chip__face,
.band-chip.is-aim-cut .band-chip__face { opacity: .26; }
.band-chip:disabled .band-chip__half { display: none; }   /* 채점 후엔 결과 색만 노출 */

/* 정답 칩에 적용된 방향(부스트/컷) 배지 */
.band-chip__dirflag {
    position: absolute; top: -7px; right: -7px; z-index: 3;
    padding: 2px 7px; border-radius: var(--radius-full);
    font-size: 10px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.5;
    color: #fff; box-shadow: var(--shadow-sm);
}
.band-chip__dirflag.is-boost { background: var(--color-primary); }
.band-chip__dirflag.is-cut { background: var(--color-primary); }

/* ── 부스트/컷 방향 팝업 (좁은 칩·터치·전체 모드) ── */
.dir-popover {
    position: fixed; z-index: 1300;
    display: flex; gap: 6px; padding: 6px;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    animation: dirPopIn .14s ease both;
}
.dir-popover[hidden] { display: none; }
.dir-popover__btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 11px 16px; border: 0; border-radius: var(--radius-md);
    background: var(--color-surface-2); color: var(--color-text);
    font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap;
    transition: background .12s ease, color .12s ease, transform .05s ease;
}
.dir-popover__sym { font-size: 13px; }
.dir-popover__btn--boost:hover,
.dir-popover__btn--boost:focus-visible,
.dir-popover__btn--cut:hover,
.dir-popover__btn--cut:focus-visible { background: var(--color-primary-soft); color: var(--color-primary); outline: none; }
.dir-popover__btn:active { transform: translateY(1px); }
.dir-popover.is-closing { animation: dirPopOut .16s ease both; pointer-events: none; }
@keyframes dirPopIn { from { opacity: 0; transform: translateY(4px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes dirPopOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(4px) scale(.97); } }

/* ── 설정: 토글(원본 들려주기) ── */
.setup-toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; }
.setup-toggle > span:first-child { display: grid; gap: 2px; }
.setup-toggle input[type="checkbox"] { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--color-primary); cursor: pointer; }

/* 하위 옵션 펼침 애니메이션 (원본 재생 ON일 때 '자동 전환' 노출) */
.setup-collapse {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    margin-bottom: 0;
    transition: max-height .32s ease, opacity .24s ease, margin-bottom .32s ease;
}
.setup-collapse.is-open { max-height: 160px; opacity: 1; margin-bottom: 24px; }
.setup-subopt {
    margin-bottom: 0;
    padding: 0 0 0 14px;
}
@media (prefers-reduced-motion: reduce) { .setup-collapse { transition: none; } }

/* 답안 영역 */
.train-answer { display: grid; gap: 12px; padding-top: 22px; border-top: 1px solid var(--color-border); }
.band-scale { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; color: var(--color-muted); }
/* 열 수는 JS(layoutBandGrid)가 버튼 개수·너비에 맞춰 --band-cols 로 지정.
   모든 칸 1fr 동일 너비로 전체 너비를 채우고, 마지막 줄은 남는 칸만큼 비워둔다. */
.train-answer--band .band-grid { grid-template-columns: repeat(var(--band-cols, 5), minmax(0, 1fr)); gap: 10px; }
.train-answer--band .band-chip { padding: 15px 8px; font-size: 16px; border-radius: var(--radius-lg); }
.train-answer--band .band-chip:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.train-answer--band .band-chip.is-correct { animation: trainPop .3s ease; }
.train-answer--band .band-chip.is-wrong { animation: trainShake .42s ease; }
@keyframes trainShake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(5px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(2px)} }
@keyframes trainPop { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ── 이펙터 청음: 답안 타일 ── */
.train-answer--effect .effect-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}
.effect-chip {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 15px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-text-soft);
    font: inherit; font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
    text-align: center; cursor: pointer;
    transition: transform .08s, border-color .12s, background .12s, color .12s, box-shadow .2s;
}
.effect-chip:hover { border-color: var(--color-primary); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.effect-chip.is-correct { background: var(--color-success-soft); border-color: var(--color-success); color: var(--color-success); animation: trainPop .3s ease; }
.effect-chip.is-wrong { background: var(--color-danger-soft); border-color: var(--color-danger); color: var(--color-danger); animation: trainShake .42s ease; }
.effect-chip:disabled { cursor: default; }
.effect-chip:disabled:hover { transform: none; box-shadow: none; }
/* 채점 후 정답(초록)·오답(빨강) 타일은 마우스를 올려도 결과 테두리를 유지한다.
   그 외 비활성 타일만 호버 시 중립 테두리로 되돌린다. */
.effect-chip:disabled:not(.is-correct):not(.is-wrong):hover { border-color: var(--color-border); }
/* 원본만 들은(적용본 미청취) 상태 — 회색 잠금 */
.effect-grid.is-cmp-wait .effect-chip {
    background: var(--color-bg-subtle); border-color: var(--color-border);
    color: var(--color-muted); opacity: .5; cursor: not-allowed; filter: grayscale(1);
}
.effect-grid.is-cmp-wait .effect-chip:hover { border-color: var(--color-border); transform: none; box-shadow: none; }

/* ── 멀티트랙 청음: 답안(트랙 + 변화 2단 선택) ── */
.train-answer--mt { gap: 18px; }
.mt-part { display: grid; gap: 8px; }
.mt-part__label {
    font-size: 13px; font-weight: 700; color: var(--color-muted); letter-spacing: -0.01em;
}
.train-answer--mt .effect-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px;
}
.train-answer--mt .band-grid { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 10px; }
.train-answer--mt .band-chip { padding: 13px 8px; font-size: 16px; border-radius: var(--radius-lg); }
.train-answer--mt .effect-chip.is-on,
.train-answer--mt .band-chip.is-on {
    background: var(--color-primary-soft); border-color: var(--color-primary); color: var(--color-primary);
}
/* 정오 색은 선택(is-on) 상태보다 우선해야 한다 — is-on 규칙(.train-answer--mt .*.is-on)과 같은
   특이도(0,3,0)로, 그 뒤에 두어 정답 칩이 파란색이 아닌 초록/빨강으로 뜨게 한다. */
.train-answer--mt .effect-chip.is-correct,
.train-answer--mt .band-chip.is-correct {
    background: var(--color-success-soft); border-color: var(--color-success); color: var(--color-success);
    animation: trainPop .3s ease;
}
.train-answer--mt .effect-chip.is-wrong,
.train-answer--mt .band-chip.is-wrong {
    background: var(--color-danger-soft); border-color: var(--color-danger); color: var(--color-danger);
    animation: trainShake .42s ease;
}
/* 적용본을 아직 듣지 않은 상태 — 변화 그리드에 섞인 EQ 밴드 칩도 이펙터 칩과 동일하게 회색 잠금 */
.train-answer--mt .effect-grid.is-cmp-wait .band-chip {
    background: var(--color-bg-subtle); border-color: var(--color-border);
    color: var(--color-muted); opacity: .5; cursor: not-allowed; filter: grayscale(1);
}
.train-answer--mt .effect-grid.is-cmp-wait .band-chip:hover { border-color: var(--color-border); transform: none; box-shadow: none; }

/* ── 이펙터 청음: 설정 pick 그리드 (주파수 밴드 그리드처럼 동일 너비 박스) ──
   display:grid 는 위의 `.train-answer--effect .effect-grid` 에만 걸려 있어 설정 그리드에는
   적용되지 않았다. 여기서 명시적으로 그리드를 지정해 모든 칩을 동일 너비·동일 간격으로 정렬한다. */
.effect-grid--setup {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 8px; padding: 2px; margin-top: 4px;
}
.effect-chip--pick { width: 100%; }
.effect-chip--pick {
    padding: 11px 6px; font-size: 14px; border-radius: var(--radius-md);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.effect-chip--pick:hover { transform: none; box-shadow: none; }
.effect-chip--pick.is-on { background: var(--color-primary-soft); border-color: var(--color-primary); color: var(--color-primary); }
/* 고급 이펙터 — '고급 포함'을 켜기 전에는 회색 비활성 */
.effect-chip--pick.is-locked {
    background: var(--color-bg-subtle); border-color: var(--color-border);
    color: var(--color-muted); opacity: .55; cursor: not-allowed; filter: grayscale(1);
}
.effect-chip--pick.is-locked:hover { border-color: var(--color-border); transform: none; box-shadow: none; }

/* 스펙트럼(전체) — 훈련창 전체 폭 */
.spectrum { position: relative; width: 100%; }
.spectrum canvas {
    display: block; width: 100%; height: 128px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    cursor: crosshair; touch-action: none;
    transition: border-color .15s ease;
}
.spectrum canvas.is-locked { cursor: not-allowed; }
/* 핑크 원본·적용 비교에서 '원본만 들은' 상태 — 확실하게 회색 처리 */
.spectrum canvas.is-cmp-wait { opacity: .5; filter: grayscale(1); cursor: not-allowed; }
.spectrum:hover canvas { border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border)); }
.spectrum:hover canvas.is-cmp-wait { border-color: var(--color-border); }
.spectrum__hint { margin-top: 8px; font-size: 13px; color: var(--color-muted); text-align: center; }

/* 전체 모드 최초 진입 안내 오버레이 (캔버스 위에 정확히 겹침) */
.spectrum-guide {
    position: absolute; top: 0; left: 0; width: 100%; height: 128px;
    display: grid; place-items: center; padding: 0 16px;
    border-radius: var(--radius-lg);
    background: rgba(0, 0, 0, .5);
    color: #fff; text-align: center;
    pointer-events: none; z-index: 3;
    opacity: 0; transition: opacity .25s ease;
}
.spectrum-guide.is-on { opacity: 1; }
.spectrum-guide__pc,
.spectrum-guide__touch { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.spectrum-guide__touch { display: none; }
.spectrum-guide__cap { font-size: 14px; font-weight: 600; letter-spacing: .01em; }
/* 좌우 이동 트랙 (PC 커서 / 터치 점 공용) */
.spectrum-guide__drag { position: relative; display: block; width: 160px; height: 28px; }
/* 손가락(터치 점) 좌우 드래그 모션 */
.spectrum-guide__dot {
    position: absolute; top: 50%; left: 0; width: 26px; height: 26px; margin-top: -13px;
    border-radius: 50%; background: rgba(255, 255, 255, .92);
    box-shadow: 0 0 0 8px rgba(255, 255, 255, .22);
    animation: spectrum-guide-drag 2.2s ease-in-out infinite;
}
@keyframes spectrum-guide-drag {
    0%   { left: 0;             transform: scale(.85); }
    15%  { transform: scale(1); }
    50%  { left: calc(100% - 26px); transform: scale(1); }
    65%  { transform: scale(.85); }
    85%  { left: 0;             transform: scale(1); }
    100% { left: 0;             transform: scale(.85); }
}
/* 마우스 커서 좌우 이동 모션 */
.spectrum-guide__cursor {
    position: absolute; top: 50%; left: 0; margin-top: -11px;
    animation: spectrum-guide-cursor 2.2s ease-in-out infinite;
}
.spectrum-guide__cursor-ic { display: block; width: 22px; height: 22px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55)); }
@keyframes spectrum-guide-cursor {
    0%   { left: 0; }
    50%  { left: calc(100% - 22px); }
    100% { left: 0; }
}
/* 터치 환경에서는 PC 커서 대신 손가락 드래그 모션을 노출 */
@media (hover: none), (pointer: coarse) {
    .spectrum-guide__pc { display: none; }
    .spectrum-guide__touch { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
    .spectrum-guide__dot { animation: none; left: calc(50% - 13px); }
    .spectrum-guide__cursor { animation: none; left: calc(50% - 11px); }
}
[data-reduce-motion="1"] .spectrum-guide__dot { animation: none; left: calc(50% - 13px); }
[data-reduce-motion="1"] .spectrum-guide__cursor { animation: none; left: calc(50% - 11px); }

/* 재생 버튼 최초 안내 — 버튼 하단에 뜨는 작은 텍스트 툴팁 */
.orb-zone { position: relative; }
.play-guide {
    position: absolute; left: 50%; bottom: -4px;
    transform: translateX(-50%) translateY(6px);
    max-width: 96vw;
    padding: 8px 14px;
    border-radius: var(--radius-full);
    background: rgba(17, 24, 39, .94);
    color: #fff;
    font-size: 13px; font-weight: 600; line-height: 1.45;
    text-align: center; white-space: nowrap;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .3);
    pointer-events: none; z-index: 4;
    opacity: 0; transition: opacity .25s ease, transform .25s ease;
}
.play-guide.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
/* 위쪽 화살표(재생 버튼을 가리킴) */
.play-guide::before {
    content: ""; position: absolute; left: 50%; top: -4px;
    width: 10px; height: 10px; margin-left: -5px;
    background: inherit; border-radius: 2px;
    transform: rotate(45deg);
}
.play-guide b { font-weight: 800; }
/* 모드(단일 재생 / 원본·적용 전환)와 입력(PC / 터치)에 따라 문구 전환 */
.play-guide__msg { display: none; }
.play-guide[data-mode="play"]   .play-guide__msg[data-guide="play"]   { display: inline; }
.play-guide[data-mode="switch"] .play-guide__msg[data-guide="switch"] { display: inline; }
.play-guide__touch { display: none; }
@media (hover: none), (pointer: coarse) {
    .play-guide__pc { display: none; }
    .play-guide__touch { display: inline; }
}

/* 하단 종료 — 빨간색 강조. 종료 버튼 아래에 광고 배너를 세로로 쌓는다. */
.train-stage__foot { display: flex; flex-direction: column; align-items: center; gap: 16px; }
/* 훈련 무대 상단 광고 — 모바일 320x50 전용. 주입 전(:empty)이면 자리 차지 안 하고,
   주입 후엔 광고가 차단·미노출돼도 회색 자리표시(.ad-ph)를 유지한다.
   PC(≥769px)에서는 우측 세로 레일을 쓰므로, 리사이즈로 남아있을 수 있는 하단 배너를 항상 숨긴다. */
.train-stage__ad { display: flex; align-items: center; justify-content: center; width: 320px; max-width: 100%; min-height: 50px; margin: 0 auto; overflow: hidden; }
.train-stage__ad:empty { display: none; }
.train-stage__ad .kakao_ad_area { max-width: 100%; }
@media (min-width: 769px) { .train-stage__ad { display: none; } }
.train-quit { color: var(--color-danger); border-color: color-mix(in srgb, var(--color-danger) 40%, transparent); }
.train-quit:hover { color: var(--color-danger); background: var(--color-danger-soft); border-color: var(--color-danger); }
.train-quit svg { color: var(--color-danger); }

/* ── 결과 ── */
.train-result {
    display: grid; gap: 24px; justify-items: center; text-align: center;
    padding: 56px 28px;
    background:
        radial-gradient(120% 90% at 50% -10%, var(--color-primary-soft), transparent 55%),
        var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    animation: trainPop .4s ease;
}
.train-result__ic { display: grid; place-items: center; width: 60px; height: 60px; border-radius: var(--radius-full); background: var(--color-primary-soft); color: var(--color-primary); box-shadow: 0 0 0 6px var(--color-surface), 0 0 0 8px var(--color-primary-soft); }
.train-result__ic svg { width: 32px; height: 32px; }
.train-result__stats { display: flex; flex-wrap: wrap; gap: 28px; justify-content: center; }
.train-result__stat { display: flex; flex-direction: column; gap: 2px; }
.train-result__stat b { font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }
.train-result__stat span { font-size: 13px; color: var(--color-muted); }

/* 결과 정답/오답/최고연속 색상 (최고연속은 무대의 '연속'과 동일한 색) */
.train-result__stat.is-ok b { color: var(--color-success); }
.train-result__stat.is-no b { color: var(--color-danger); }
.train-result__stat.is-streak b { color: var(--color-warning, #d97706); }

.train-result__actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ── 10분 귀 휴식 알림 ── */
.break-reminder-dialog .settings-dialog__card {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    box-sizing: border-box;
    justify-items: center;
    text-align: center;
    align-items: center;
}
.break-reminder-dialog__icon {
    display: grid; place-items: center;
    width: 64px; height: 64px; margin: 0 auto 18px;
    border-radius: var(--radius-full);
    background: var(--color-primary-soft); color: var(--color-primary);
}
.break-reminder-dialog__icon svg { width: 32px; height: 32px; }
.break-reminder-dialog__content { width: 100%; text-align: center; }
.break-reminder-dialog__content h2 { font-size: 22px; text-align: center; }
.break-reminder-dialog__content p { margin-top: 10px; color: var(--color-text-soft); line-height: 1.65; text-align: center; }
.break-reminder-dialog .settings-dialog__actions { width: 100%; margin-top: 26px; justify-content: center; }

@media (max-width: 560px) {
    .train-stage__card { padding: 22px; }
    /* 재생 오브가 차지하는 세로 공간을 줄임(물결은 캔버스 중심 기준 비율이라 잘리지 않음) */
    .listen-orbs { margin: 4px auto 10px; }
    .listen-orb { max-width: 220px; max-height: 148px; }
    .listen-orb__btn { width: 96px; height: 96px; font-size: 13px; }
    .listen-orb__btn svg { width: 26px; height: 26px; }
    .listen-orbs.is-dual { gap: 8px; }
    .listen-orbs.is-dual .listen-orb { max-height: 132px; }
    .listen-orbs.is-dual .listen-orb__btn { width: 84px; height: 84px; }
    .train-answer--band .band-chip { padding: 12px 6px; font-size: 15px; }
    .spectrum canvas { height: 112px; }
    .spectrum-guide { height: 112px; }
    .train-result__stats { gap: 20px; }
    .train-result__stat b { font-size: 24px; }
}

/* ── 통계: 대역별 정답률 ── */
.stat-bands { display: grid; gap: 10px; }
.stat-band { display: grid; grid-template-columns: 92px 1fr 72px; align-items: center; gap: 10px; }
.stat-band__label { font-size: 13px; font-weight: 600; color: var(--color-text-soft); }
.stat-band__track { height: 10px; border-radius: var(--radius-full); background: var(--color-surface-2); overflow: hidden; }
.stat-band__fill { display: block; height: 100%; border-radius: var(--radius-full); background: var(--color-primary); }
.stat-band__val { font-size: 13px; font-weight: 700; text-align: right; }
.stat-band__val small { font-weight: 600; color: var(--color-muted); }
/* 멀티트랙: 파트별·이펙터별을 한 패널에 나눠 표시 */
.stat-subgroup + .stat-subgroup { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--color-border); }
.stat-subhead { margin: 0 0 12px; font-size: 13px; font-weight: 700; color: var(--color-muted); letter-spacing: -0.01em; }

/* 정답률 분석 패널과 최근 세션 패널은 서로 독립된 박스 — 그리드 stretch로 서로의 높이를
   따라가지 않도록 각 칸을 콘텐츠 높이에 맞춘다(start 정렬). */
.stat-panels { align-items: start; }

/* ── 통계: 최근 세션 ── */
.stat-sessions { display: grid; gap: 8px; }
.stat-session { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.stat-session__mode { font-size: 12px; font-weight: 700; color: var(--color-primary); background: var(--color-primary-soft); padding: 3px 8px; border-radius: var(--radius-sm); }
.stat-session__main { flex: 1; font-size: 14px; color: var(--color-text-soft); }
.stat-session__date { font-size: 12px; color: var(--color-muted); }