/* ============================================================
   사운드트레이닝 · 디자인 시스템 (theme.css)
   - 파란색 계열 팔레트 (CSS 변수로 중앙 관리)
   - reset · 타이포그래피 · 공통 컴포넌트
   - 라이트(기본) / 다크 테마
   ============================================================ */

:root {
    /* ── 블루 팔레트 ───────────────────────── */
    --blue-50:  #eff6ff;
    --blue-100: #dbeafe;
    --blue-200: #bfdbfe;
    --blue-300: #93c5fd;
    --blue-400: #60a5fa;
    --blue-500: #3b82f6;
    --blue-600: #2563eb;
    --blue-700: #1d4ed8;
    --blue-800: #1e40af;
    --blue-900: #1e3a8a;
    --blue-950: #172554;

    /* ── 중립(슬레이트) ───────────────────────── */
    --slate-50:  #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;
    --slate-950: #020617;

    /* ── 의미 변수 (라이트) ───────────────────────── */
    --color-primary:        var(--blue-600);
    --color-primary-hover:  var(--blue-700);
    --color-primary-soft:   var(--blue-50);
    --color-primary-contrast:#ffffff;

    --color-bg:        #ffffff;
    --color-bg-subtle: var(--slate-50);
    --color-surface:   #ffffff;
    --color-surface-2: var(--slate-50);
    --color-text:      var(--slate-900);
    --color-text-soft: var(--slate-600);
    --color-muted:     var(--slate-400);
    --color-border:    var(--slate-200);
    --color-border-strong: var(--slate-300);

    --color-success:   #16a34a;
    --color-success-soft:#dcfce7;
    --color-warning:   #d97706;
    --color-warning-soft:#fef3c7;
    --color-danger:    #dc2626;
    --color-danger-soft:#fee2e2;

    /* ── 반경 ───────────────────────── */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* ── 그림자 ───────────────────────── */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .05);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, .08), 0 2px 4px rgba(15, 23, 42, .04);
    --shadow-lg: 0 12px 32px rgba(15, 23, 42, .12), 0 4px 8px rgba(15, 23, 42, .05);
    --shadow-primary: 0 8px 24px rgba(37, 99, 235, .25);

    /* ── 간격 / 레이아웃 ───────────────────────── */
    --container: 1160px;
    --header-h: 64px;
    --sidebar-w: 248px;

    /* ── 폰트 ───────────────────────── */
    --font-sans: "Pretendard", "Pretendard Variable", -apple-system, BlinkMacSystemFont,
        system-ui, "Segoe UI", Roboto, "Helvetica Neue", "Apple SD Gothic Neo",
        "Noto Sans KR", sans-serif;
    --font-mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;

    color-scheme: light;
}

[data-theme="dark"] {
    --color-primary:        var(--blue-500);
    --color-primary-hover:  var(--blue-400);
    --color-primary-soft:   rgba(59, 130, 246, .12);
    --color-primary-contrast:#0b1220;

    --color-bg:        var(--slate-950);
    --color-bg-subtle: #0b1324;
    --color-surface:   var(--slate-900);
    --color-surface-2: #16203a;
    --color-text:      var(--slate-100);
    --color-text-soft: var(--slate-400);
    --color-muted:     var(--slate-500);
    --color-border:    #1f2c47;
    --color-border-strong: #2b3a5b;

    --color-success-soft: rgba(22, 163, 74, .15);
    --color-warning-soft: rgba(217, 119, 6, .15);
    --color-danger-soft:  rgba(220, 38, 38, .15);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .45);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, .55);
    --shadow-primary: 0 8px 24px rgba(59, 130, 246, .25);

    color-scheme: dark;
}

/* ============================================================
   Reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    font-family: var(--font-sans);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
svg { fill: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4 { line-height: 1.25; font-weight: 700; letter-spacing: -0.02em; }
table { border-collapse: collapse; width: 100%; }

::selection { background: var(--blue-200); color: var(--slate-900); }

/* ============================================================
   레이아웃 헬퍼
   ============================================================ */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 24px; }
.section { padding-block: 88px; }
.section-sm { padding-block: 56px; }
.text-center { text-align: center; }
.muted { color: var(--color-text-soft); }

.eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 700; letter-spacing: .04em;
    color: var(--color-primary); text-transform: uppercase;
}

.section-title { font-size: clamp(26px, 4vw, 40px); letter-spacing: -0.03em; }
.section-lead { margin-top: 16px; font-size: 17px; color: var(--color-text-soft); }

/* ============================================================
   버튼
   ============================================================ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 20px; border-radius: var(--radius-md);
    font-weight: 600; font-size: 15px; line-height: 1;
    border: 1px solid transparent; white-space: nowrap;
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .05s;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; }
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; pointer-events: none; }

.btn-primary { background: var(--color-primary); color: var(--color-primary-contrast); box-shadow: var(--shadow-primary); }
.btn-primary:hover { background: var(--color-primary-hover); }

.btn-ghost { background: transparent; color: var(--color-text); border-color: var(--color-border-strong); }
.btn-ghost:hover { background: var(--color-surface-2); border-color: var(--color-muted); }

.btn-soft { background: var(--color-primary-soft); color: var(--color-primary); }
.btn-soft:hover { background: var(--blue-100); }

.btn-danger { background: var(--color-danger); color: #fff; }
.btn-danger:hover { background: color-mix(in srgb, var(--color-danger) 88%, #000); }

.btn-block { width: 100%; }
.btn-lg { padding: 14px 26px; font-size: 16px; border-radius: var(--radius-lg); }
.btn-sm { padding: 8px 14px; font-size: 13px; }

/* ============================================================
   카드
   ============================================================ */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.card-pad { padding: 24px; }

/* ============================================================
   배지 / 태그
   ============================================================ */
.badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: var(--radius-full);
    font-size: 12px; font-weight: 600; line-height: 1.6;
}
.badge-primary { background: var(--color-primary-soft); color: var(--color-primary); }
.badge-success { background: var(--color-success-soft); color: var(--color-success); }
.badge-warning { background: var(--color-warning-soft); color: var(--color-warning); }
.badge-danger  { background: var(--color-danger-soft);  color: var(--color-danger); }
.badge-muted   { background: var(--color-surface-2); color: var(--color-text-soft); }

/* ============================================================
   폼
   ============================================================ */
.field { display: flex; flex-direction: column; gap: 7px; }
.label { font-size: 14px; font-weight: 600; color: var(--color-text); }
.input {
    width: 100%; padding: 11px 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    font-size: 15px; transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: var(--color-muted); }
.input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.field-hint { font-size: 13px; color: var(--color-text-soft); }

.input-group { position: relative; display: flex; align-items: center; }
.input-group .input { padding-left: 42px; }
.input-group > svg { position: absolute; left: 13px; width: 18px; height: 18px; color: var(--color-muted); pointer-events: none; }

/* 체크박스 라인 */
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--color-text-soft); }
.check input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--color-primary); }

/* ============================================================
   유틸
   ============================================================ */
.divider { height: 1px; background: var(--color-border); border: 0; }
.hr-text { display: flex; align-items: center; gap: 14px; color: var(--color-muted); font-size: 13px; }
.hr-text::before, .hr-text::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }

.skeleton-line { height: 12px; border-radius: var(--radius-full); background: var(--color-surface-2); }

@media (max-width: 768px) {
    .section { padding-block: 60px; }
    .container { padding-inline: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* 설정 > 화면 > "애니메이션 줄이기" — OS 설정과 무관하게 사용자가 켜면 모션 제거.
   전환·애니메이션을 즉시 끝나도록 만들어 딱딱하게 동작시킨다. */
html[data-reduce-motion="1"],
html[data-reduce-motion="1"] *,
html[data-reduce-motion="1"] *::before,
html[data-reduce-motion="1"] *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
}