/* 워드마크(6글자만 잘라 받음) + 라틴 본문용 Inter.
   한글은 시스템 폰트(맑은 고딕·Apple SD 산돌고딕)에 맡긴다 — 한글 웹폰트는 무겁고
   시스템 폰트와 차이가 크지 않아서 받을 이유가 없다. */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500&text=mytune&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
/* 플레이팟 디자인 토큰 + 공통 스타일
   톤: 라이트 베이스(사장·손님). 매장 디스플레이만 다크. 박스/보더 최소. 여백으로 위계. 액센트 1색.
   근거: 피그마 "00 · Foundations" — "Light(사장·손님) / Dark(매장 디스플레이) 2모드"
*/

:root {
    /* ── 색: 피그마 "00 · Foundations / Color · Light"와 1:1 ──
       옛 이름(--text/--muted/--dim/--danger)은 기존 26개 화면이 쓰고 있어 별칭으로 남긴다. */
    color-scheme: light;
    /* 다크는 배경이 가장 어둡고 카드가 밝았다. 라이트는 반대여야 카드가 보인다.
       피그마 화면 실측: 페이지 #f9fafb · 카드 #ffffff · 인풋/트랙 #f2f4f6 */
    --bg: #f9fafb;
    --surface: #ffffff;
    --surface-2: #f2f4f6;
    --ink: #191f28;
    --ink-2: #4e5968;
    --ink-3: #5e6875;
    --line: #e5e8eb;
    --accent: #7c3aed;            /* 채움(버튼). 위 글자는 흰색 — 피그마 Button/Primary와 동일 */
    --accent-hover: #6d28d9;      /* accent-strong */
    --accent-text: #7c3aed;       /* 배경 위 글자·아이콘 (피그마 화면 실측: 흰 배경 위 #7c3aed) */
    --accent-weak: #f3eeff;       /* 옅은 배경 강조 */
    --pos: #126a33;
    --neg: #c2262b;
    --warn: #9a4708;
    --shadow-card: 0 1px 2px rgba(25,31,40,0.05);
    --shadow-pop: 0 12px 32px rgba(25,31,40,0.14);
    --seg-on-bg: #ffffff;         /* 세그먼트에서 켜진 칸 */
    /* 옛 이름 별칭 */
    --text: var(--ink);
    --muted: var(--ink-2);
    --dim: var(--ink-3);
    --danger: var(--neg);
    --moss: #5f6f52;

    /* ── 간격: 4·8·16·24·40·64 (그 외 값 금지) ── */
    --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 40px; --s6: 64px;

    /* ── 타이포: 피그마 Type specimen 7단 ── */
    --t-display: 28px;  --lh-display: 36px;
    --t-heading: 22px;  --lh-heading: 30px;
    --t-section: 17px;  --lh-section: 24px;
    --t-body: 15px;     --lh-body: 24px;
    --t-sub: 14px;      --lh-sub: 21px;
    --t-label: 13px;    --lh-label: 18px;
    --t-caption: 12px;  --lh-caption: 16px;

    /* ── 모서리: 피그마 컴포넌트 실측 (Button 12 / Card 16 / Pill 999) ── */
    --radius: 12px;
    --radius-lg: 16px;
    --radius-pill: 999px;
    /* Inter가 라틴·숫자를, 시스템 폰트가 한글을 맡는다(글자 단위 폴백) */
    --font-sans: 'Inter', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
    /* 세리프 폐기 — Playfair를 로드한 적이 없어 26곳이 전부 시스템 명조(바탕)로 떨어지고 있었다.
       로고가 기하학 산세리프로 바뀐 지금은 톤도 안 맞음. 이름은 유지해 26곳을 안 건드린다. */
    --font-serif: var(--font-sans);
    /* 워드마크 전용 — 로고 6글자만 잘라 받는다(약 2KB) */
    --font-wordmark: 'Outfit', 'Inter', system-ui, sans-serif;
}

/* ── 다크: 매장 디스플레이 전용 (피그마 "Color · Dark") ──
   손님·사장 화면은 라이트다. <html data-theme="dark">를 단 화면만 이 값을 쓴다. */
[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0a0a0c;
    --surface: #15161a;
    --surface-2: #1d1f25;
    --ink: #f5f5f7;
    --ink-2: #b4bcc8;
    --ink-3: #98a2af;
    --line: #26282f;
    --accent: #7c3aed;
    --accent-hover: #8b5cf6;
    --accent-text: #a78bfa;       /* 어두운 배경 위 글자는 옅은 보라라야 읽힌다 */
    --accent-weak: #221b3a;
    --pos: #4ade80;
    --neg: #f87171;
    --warn: #fbbf24;
    --shadow-card: none;
    --shadow-pop: 0 24px 60px rgba(0,0,0,0.5);
    --seg-on-bg: var(--accent);
}

* { box-sizing: border-box; }
/* 브라우저 기본 여백은 1em이라 글자 크기에 따라 12·13·14·15px로 제각각이 된다.
   (사용 가이드·약관 같은 글 페이지에서 실측으로 잡혔다) 스케일 값으로 고정한다. */
ul, ol { margin: 16px 0; padding-left: 24px; }
th, td { padding: 8px 4px; }
/* 문단 기본 여백도 1em이라 글자 크기마다 12·13·15px로 갈린다. 클래스를 가진 문단은
   자기 규칙이 이겨서 영향 없고, 맨몸 <p>만 스케일 값으로 맞춰진다. */
p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }
/* 같은 이유로 새는 나머지 블록 요소들 (dl은 소개 페이지 사업자 정보에서 13px로 잡혔다) */
dl, blockquote, figure, pre { margin: 16px 0; }
h4, h5, h6 { margin: 0 0 8px; }

/* 폼 컨트롤의 브라우저 기본값 정리 — 13.33px 글자, margin 3px 같은 값이 새어 나온다 */
input, select, textarea, button { font-family: inherit; font-size: inherit; }
input[type=checkbox], input[type=radio] {
    width: 20px; height: 20px; margin: 0; flex-shrink: 0;
    accent-color: var(--accent);
}
/* 체크박스 자체는 20px이라 터치 기준(44)에 못 미친다 — 라벨 줄 전체를 누르게 만든다 */
.agree-row, label:has(> input[type=checkbox]), label:has(> input[type=radio]) {
    min-height: 44px; display: flex; align-items: center; gap: 8px;
}
html, body {
    margin:0;
    padding:0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
}
body { min-height: 100vh; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* === Layout === */
.container {
    max-width: 480px;
    margin: 0 auto;
    padding:40px 16px 64px;
}
.container--wide { max-width: 1280px; padding:40px 24px 64px; }

/* === Type === */
h1, h2, h3 { letter-spacing: -0.02em; margin:0; }
.brand, .logo {
    font-family: var(--font-wordmark);
    font-weight: 500;
    letter-spacing: -0.005em;
    font-size:22px;
    margin:0 0 4px;
    display: inline-flex;
    align-items: center;
    gap:8px;
}
/* 마크는 글자 높이에 맞춰 따라 커진다 — 크기를 따로 안 잡아도 락업이 안 깨짐 */
.brand-mark {
    width: 0.92em;
    height: 0.92em;
    flex-shrink: 0;
    color: var(--accent-text);
}
.tagline {
    font-size:12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    margin:0;
}

/* === Inputs === */
.input {
    width: 100%;
    /* 피그마 실측 #f2f4f6 — 카드(흰색) 위에 올려도 입력칸이 구분된다 */
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--text);
    padding:16px;
    min-height: 52px;
    border-radius: var(--radius);
    font-size: var(--t-body);
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
}
.input:focus { border-color: var(--accent-text); }
.input::placeholder { color: var(--dim); }

/* === Buttons === */
/* 피그마 Button: 높이 52 · 반경 12 · 좌우 패딩 20 · 15 Medium · 아이콘 간격 8 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    min-height: 52px;
    padding:0 24px;
    border-radius: var(--radius);
    font-size: var(--t-body);
    font-weight: 500;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--text);
    transition: opacity 0.15s, transform 0.15s, background 0.15s;
}
/* 라이트에선 카드가 흰색이라 hover도 흰색이면 안 보인다 — 한 단계 진한 톤으로 */
.btn:hover { background: var(--surface-2); }
.btn:active { transform: scale(0.98); }
.btn--primary {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn--ghost { background: transparent; }
.btn--danger:hover { color: var(--danger); border-color: var(--danger); }
.btn--block { width: 100%; padding:16px; }

/* === Cards === */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding:24px;
}

/* === Toast === */
.toast {
    position: fixed;
    left: 50%;
    bottom: 32px;
    transform: translateX(-50%) translateY(20px);
    /* 토스트는 라이트 화면에서도 어두운 알약이다 — 본문 위에 떠야 눈에 들어온다.
       그래서 글자색은 토큰이 아니라 흰색 고정. */
    background: rgba(25,31,40,0.95);
    color: #fff;
    padding:16px 24px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-pop);
    backdrop-filter: blur(12px);
    font-size:14px;
    opacity: 0;
    transition: opacity 0.25s, transform 0.25s;
    z-index: 9999;
    pointer-events: none;
}
.toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

/* === Section title === */
.section-title {
    font-size: var(--t-caption);
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--muted);
    text-transform: uppercase;
    margin:24px 4px 8px;
}

/* === Empty === */
.empty {
    padding:40px;
    text-align: center;
    color: var(--dim);
    font-size:14px;
    border: 1px dashed var(--line);
    border-radius: var(--radius-lg);
}

/* === Spinner === */
.spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--line);
    border-top-color: var(--accent-text);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* === Track card (재사용) === */
.track {
    display: flex;
    align-items: center;
    gap:16px;
    padding:16px;
    border-radius: var(--radius);
    transition: background 0.15s;
}
.track:hover { background: var(--surface-2); }
.track .art {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    background-color: var(--surface-2);
}
.track .meta { flex: 1; min-width: 0; }
.track .title {
    font-size: var(--t-sub);
    font-weight: 600;
    margin:0 0 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.track .artist {
    font-size:13px;
    color: var(--muted);
    margin:0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* === Pulse dot === */
.pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
    animation: pulse 1.4s ease-in-out infinite;
    display: inline-block;
}
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.3 } }

/* === Steps progress === */
.steps {
    display: flex;
    gap:8px;
    margin-bottom:40px;
}
.step-dot {
    flex: 1;
    height: 3px;
    background: var(--line);
    border-radius: 2px;
}
.step-dot.done { background: var(--accent); }
.step-dot.active { background: var(--accent); opacity: 0.6; }

/* === Footer === */
.footer-muted {
    margin-top:80px;
    text-align: center;
    font-size: var(--t-caption);
    color: var(--dim);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* a11y: screen-reader only labels (added 2026-05-20) */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding:0;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* a11y: account.html 탈퇴 모달 list (added 2026-05-20) */
.warn-list {
    color: var(--ink-2);
    font-size:13px;
    line-height: 1.7;
    padding-left:24px;
    margin:8px 0 16px;
}
.warn-foot {
    color: var(--ink-2);
    font-size:13px;
    margin-top:8px;
}

/* P2 fix 2026-05-21: 모바일 반응형 보강 */
@media (max-width: 480px) {
    .container { padding:24px 16px 64px; }
    /* billing hist-row 4컬럼 → 모바일 stack */
    .hist-row {
        grid-template-columns: 1fr !important;
        gap:4px !important;
        padding:16px !important;
    }
    .hist-row > * { font-size:13px; }
    /* account modal padding */
    #delete-modal { padding:16px; }
    /* legal long lines */
    .legal-wrap { padding:24px 16px 64px; }
}

/* === 타이포 스케일 (피그마 Type specimen) ===
   화면마다 제각각이던 19종을 이 7단으로 모은다. */
/* 행간은 반드시 단위 없는 비율로. px로 주면 자식이 그 값을 그대로 물려받아
   28px 제목이 24px 행간으로 짓눌리고(비율 1.09) 12px 캡션은 2.0으로 헐렁해진다.
   한글 본문은 1.6, 제목은 1.3이 읽기 좋다. */
body {
    font-size: var(--t-body);
    line-height: 1.6;
    /* 한글은 기본값이면 단어 중간에서 잘린다("신청곡 주" / "소를"). keep-all이면 단어 단위로 넘어간다.
       대신 긴 URL 같은 건 못 끊어 넘치므로 overflow-wrap으로 예외를 연다. */
    word-break: keep-all;
    overflow-wrap: break-word;
}
h1, h2, h3, h4 { line-height: 1.3; }
/* 숫자가 매초 바뀌는 자리(재생 시간·카운트·금액)는 폭이 흔들리지 않게 고정폭 숫자 */
.tnum, .now-time, .stats-row, .hist-row .amount, .amount, td.num, .count,
.rank, .cnt, .price, .hist-row time, #now-time-current, #now-time-total {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}
.t-display { font-size: var(--t-display); line-height: 1.3; font-weight: 700; }
.t-heading { font-size: var(--t-heading); line-height: 1.35; font-weight: 700; }
.t-section { font-size: var(--t-section); line-height: 1.4; font-weight: 700; }
.t-body    { font-size: var(--t-body);    line-height: 1.6; }
.t-sub     { font-size: var(--t-sub);     line-height: 1.6;  color: var(--ink-2); }
.t-label   { font-size: var(--t-label);   line-height: 1.4; font-weight: 500; }
.t-caption { font-size: var(--t-caption); line-height: 1.4; font-weight: 500; color: var(--ink-2); }

/* === 공용 컴포넌트 (화면마다 재정의하던 것들을 여기로) ===
   .head 12곳 · .wrap 6곳 · .sec 4곳 · .row 5곳이 각자 정의돼 있었다. */
.wrap { max-width: 760px; margin: 0 auto; padding: var(--s4) var(--s3) var(--s6); }
.wrap--wide { max-width: 1320px; }
.head {
    display: flex; justify-content: space-between; align-items: center;
    gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s4);
}
/* 행간은 비율로. px로 주면 화면이 글자 크기만 덮어썼을 때 비율이 깨진다
   (금지목록이 22px로 덮어써서 36px 행간 = 비율 1.64가 됐다) */
.head h1 { font-size: var(--t-display); line-height: 1.3; font-weight: 700; margin:0; }
/* 피그마 RequestCard: 반경 16 · 패딩 16 · 내부 간격 16 */
.sec {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: var(--s3); margin-bottom: var(--s2);
}
.sec h2 { font-size: var(--t-section); line-height: 1.35; font-weight: 700; margin: 0 0 var(--s1); }
.sec .desc { font-size: var(--t-label); line-height: var(--lh-label); color: var(--ink-2); margin: 0 0 var(--s3); }
.row { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
/* 피그마 ListRow: 높이 60 · 좌우 4 · 상하 14 · 간격 12 */
.list-row {
    display: flex; align-items: center; gap:16px;
    min-height: 64px; padding:16px 4px;
    border-bottom: 1px solid var(--line); font-size: var(--t-body);
}
/* 피그마 Segmented: 높이 52 · 알약 · 안쪽 여백 4 · 칸 간격 4 */
.segmented {
    display: inline-flex; gap: var(--s1); padding: var(--s1);
    background: var(--surface-2); border-radius: var(--radius-pill);
}
.segmented button {
    min-height: 44px; padding: 0 var(--s3); border: 0; border-radius: var(--radius-pill);
    background: transparent; color: var(--ink-2);
    font-family: inherit; font-size: var(--t-body); font-weight: 500; cursor: pointer;
}
/* 피그마 실측: 켜진 칸은 액센트 채움이 아니라 "떠오른 흰 알약". 라이트에선 이쪽이 덜 시끄럽다. */
.segmented button.on {
    background: var(--seg-on-bg);
    color: var(--ink);
    font-weight: 600;
    box-shadow: var(--shadow-card);
}

/* 필터 칩 — 히스토리·인기곡 화면이 각자 정의하던 것(높이 37px)을 공용으로. */
.filter-btn {
    min-height: 44px; padding: 0 var(--s3);
    background: transparent; border: 1px solid var(--line);
    color: var(--ink-2); border-radius: var(--radius-pill);
    font-family: inherit; font-size: var(--t-label); font-weight: 500; cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
/* 피그마 실측: 고른 칩은 옅은 보라 바탕 + 보라 테두리/글자. 여러 개 나란히 놔도 안 시끄럽다. */
.filter-btn.active { background: var(--accent-weak); color: var(--accent-text); border-color: var(--accent); }

/* 공용 푸터 링크 — 모든 화면 하단에 주입되는데 높이가 15~20px였다. */
.mt-footer-info a, footer[data-mytune-footer] a {
    min-height: 44px; display: inline-flex; align-items: center;
}

/* === 키보드 포커스 ===
   마우스로 눌렀을 때는 안 뜨고(:focus-visible), 키보드·보조기기로 이동할 때만 뜬다.
   다크 배경에서 보이려면 밝은 액센트 + 바깥 여백이 필요하다. */
:focus-visible {
    outline: 2px solid var(--accent-text);
    outline-offset: 2px;
    border-radius: 6px;
}
.btn:focus-visible, .filter-btn:focus-visible, .segmented button:focus-visible {
    outline-offset: 3px;
}
.input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 2px solid var(--accent-text);
    outline-offset: 0;
    border-color: var(--accent-text);
}

/* === 움직임 줄이기 ===
   기기 설정에서 '동작 줄이기'를 켠 사용자에겐 애니메이션을 멈춘다.
   멀미·주의력 문제가 있는 사용자에게 필요하고, 접근성 기준이기도 하다. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}