/* 플레이팟 C (2026-11-01, 사장 확정) — 피그마 '플레이팟 C 키트' 451:458 와 같은 값. 정본 DESIGN.md.
   앨범 표지가 주인공, 나머지는 조용히. 글자 28/22/18/16/13/12 · 400/700 · 간격 4배수 · 터치 44. */
@import url('https://fonts.googleapis.com/css2?family=Gothic+A1:wght@400;700&display=swap');

body.v2 {
    --bg: #ffffff; --surface: #f4f4f5; --ink: #18181b; --ink-2: #71717a; --ink-2s: #52525b;
    --line: #e4e4e7; --accent: #7c3aed; --accent-hover: #6d28d9; --accent-weak: #f3eeff; --accent-on-weak: #6d28d9;
    --on-accent: #ffffff; --pos: #15803d; --pos-weak: #ecfdf3; --warn: #b45309; --warn-weak: #fff7ed;
    --now-bg: #18181b; --now-ink: #ffffff; --now-ink-2: #a1a1aa; --now-accent: #a78bfa;
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --font-sans: 'Gothic A1', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    font-family: var(--font-sans);
    font-size: 16px; line-height: 1.5;
    word-break: keep-all; overflow-wrap: break-word; text-wrap: pretty;
    background: var(--bg); color: var(--ink);
    margin: 0;
    -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%;
}
body.v2[data-theme="dark"], [data-theme="dark"] body.v2 {
    --bg: #121214; --surface: #1c1c1f; --ink: #ffffff; --ink-2: #a1a1aa; --ink-2s: #a1a1aa; --line: #2a2a2e;
    --accent: #a78bfa; --accent-hover: #c4b5fd; --accent-weak: #221b3a; --accent-on-weak: #c4b5fd; --on-accent: #121214;
    --pos: #4ade80; --pos-weak: #14291c; --warn: #fbbf24; --warn-weak: #2e2210; --now-bg: #1c1c1f;
}
body.v2 h1, body.v2 h2, body.v2 h3, body.v2 p { margin: 0; }
:where(body.v2) :where(button, input, select, textarea) { font: inherit; }
body.v2 input, body.v2 select, body.v2 textarea { font-size: 16px; }
body.v2 .t28 { font-size: 28px; font-weight: 700; line-height: 1.3; letter-spacing: -0.03em; }
body.v2 .t22 { font-size: 22px; font-weight: 700; line-height: 1.35; letter-spacing: -0.02em; }
body.v2 .t18 { font-size: 18px; font-weight: 700; line-height: 1.4; }
body.v2 .t16 { font-size: 16px; line-height: 1.5; }
body.v2 .t13 { font-size: 13px; line-height: 1.5; }
body.v2 .t12 { font-size: 12px; line-height: 1.4; }
body.v2 .b { font-weight: 700; }
body.v2 .ink2 { color: var(--ink-2); }
body.v2 .ink3 { color: var(--ink-2); }
body.v2 .acc { color: var(--accent); }
body.v2 .one { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.v2 .num { font-variant-numeric: tabular-nums; }

/* 버튼 — C/Button: 알약 */
.mt-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 0 24px; border-radius: 999px; border: 0;
    font-size: 16px; font-weight: 700; line-height: 1; cursor: pointer; text-decoration: none; white-space: nowrap;
    touch-action: manipulation; user-select: none; -webkit-user-select: none;
    transition: transform 120ms var(--ease-out), background-color 150ms ease;
}
.mt-btn:active { transform: scale(0.97); }
.mt-btn:disabled { opacity: .45; cursor: not-allowed; }
.mt-btn--m { min-height: 44px; padding: 0 16px; }
.mt-btn--block { width: 100%; }
.mt-btn--primary { background: var(--accent); color: var(--on-accent); }
.mt-btn--tonal { background: var(--accent-weak); color: var(--accent-on-weak); }
.mt-btn--secondary { background: var(--surface); color: var(--ink); }
.mt-btn--ghost { background: transparent; color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
    .mt-btn--primary:hover { background: var(--accent-hover); }
    .mt-icon-btn:hover { background: var(--surface); }
}
.mt-icon-btn {
    width: 44px; height: 44px; display: inline-grid; place-items: center; flex: none;
    border: 0; background: transparent; border-radius: 999px; color: var(--ink); cursor: pointer; padding: 0;
    touch-action: manipulation; transition: transform 120ms var(--ease-out);
}
.mt-icon-btn:active { transform: scale(0.95); }
.mt-icon-btn--fill { background: var(--surface); color: var(--ink-2s); }
.mt-icon-btn svg, .mt-ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mt-ico--20 { width: 20px; height: 20px; }
:where(.mt-btn, .mt-icon-btn, a, input, select, button, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 앨범 표지 */
.mt-art { flex: none; background: var(--surface) center/cover no-repeat; border-radius: 8px; }

/* 지금 재생 다크 카드 — C/NowPlaying */
.mt-nowcard { background: var(--now-bg); color: var(--now-ink); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.mt-nowcard .row { display: flex; align-items: center; gap: 16px; }
.mt-nowcard .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mt-nowcard .lab { font-size: 13px; font-weight: 700; color: var(--now-accent); }
.mt-nowcard .lab.warn { color: #fbbf24; }
.mt-nowcard .sub { font-size: 13px; color: var(--now-ink-2); }
.mt-nowcard .mt-btn--primary { background: var(--now-accent); color: #121214; }

/* 스위치 — C/Switch */
.mt-switch { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
.mt-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mt-switch .track { width: 52px; height: 32px; border-radius: 999px; background: var(--line); position: relative; transition: background 150ms ease; flex: none; }
.mt-switch .track::after { content: ''; position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform 150ms var(--ease-out); }
.mt-switch input:checked + .track { background: var(--accent); }
.mt-switch input:checked + .track::after { transform: translateX(20px); }
.mt-switch input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 2px; }
.mt-switch input:disabled + .track { opacity: .45; }

/* 목록 줄 */
.mt-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.mt-row .txt { flex: 1; min-width: 0; }
.mt-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; background: var(--pos); }
.mt-input { width: 100%; min-height: 52px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--surface); color: var(--ink); font-size: 16px; box-sizing: border-box; }
.mt-input::placeholder { color: var(--ink-2s); }
.mt-input:focus { outline: 2px solid var(--accent); outline-offset: 0; }

@media (prefers-reduced-motion: reduce) { .mt-btn, .mt-icon-btn, .mt-switch .track, .mt-switch .track::after { transition: none; } }
.mt-btn { line-height: 1.25; }
/* 문장 속 링크도 누르는 영역 44 */
body.v2 .su-legal a, body.v2 .su-login a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
/* 꼬리말 링크 대비 4.5 이상 */
body.v2 .foot-links a, body.v2 .mt-footer-links a, body.v2 .mt-footer-info a { color: #52525b; }