/* ═══════════════════════════════════════════════════════════════════════════
   LOUNJ — iOS 26 design tokens
   사용자 spec 기반. legacy 토큰은 design-tokens-old.css 참고.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* 배경 */
    --bg: #000000;
    --bg-elevated: #1C1C1E;
    --bg-grouped: #2C2C2E;
    --bg-glass: rgba(20, 20, 22, 0.72);

    /* 텍스트 */
    --text-primary: #FFFFFF;
    --text-secondary: rgba(235, 235, 245, 0.6);
    --text-tertiary: rgba(235, 235, 245, 0.3);

    /* iOS Dark 시스템 컬러 */
    --red: #FF453A;
    --orange: #FF9F0A;
    --yellow: #FFD60A;
    --green: #32D74B;
    --blue: #0A84FF;
    --indigo: #5E5CE6;
    --purple: #BF5AF2;

    /* 구분선 */
    --separator: rgba(84, 84, 88, 0.65);
    --border-glass: rgba(255, 255, 255, 0.12);

    /* 곡률 */
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 24px;
    --radius-pill: 999px;

    /* 그림자 */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.6);
    --shadow-fab:
        0 4px 16px rgba(255, 59, 48, 0.4),
        0 12px 32px rgba(0, 0, 0, 0.5);

    /* 폰트 */
    --font-ui: -apple-system, 'SF Pro Display', 'SF Pro Text',
               'Pretendard', 'Inter', sans-serif;
    --font-mono: 'SF Mono', 'JetBrains Mono', monospace;

    /* Spacing scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;

    /* Easing */
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-ios: cubic-bezier(0.32, 0.72, 0, 1);
    --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);

    /* ── Legacy alias — 기존 style.css 의 var(--accent), var(--panel) 등이 ─── */
    /*    iOS26 토큰 으로 매핑되도록 alias. 점진 migration 까지 깨짐 방지.    */
    --accent: var(--red);
    --accent-rgb: 255, 69, 58;
    --panel: var(--bg-glass);
    --panel-strong: rgba(28, 28, 30, 0.94);
    --surface: rgba(255, 255, 255, 0.04);
    --surface-hover: rgba(255, 255, 255, 0.08);
    --border: var(--separator);
    --border-strong: var(--border-glass);
    --text: var(--text-primary);
    --text-dim: var(--text-secondary);
    --sub: var(--text-tertiary);
    --good: var(--green);
    --warn: var(--orange);
    --bad: var(--red);
    --halo: rgba(var(--accent-rgb), 0.25);
    --glow: 0 0 20px rgba(var(--accent-rgb), 0.4);
    --radius: var(--radius-sm);
    --radius-xl: var(--radius-lg);
    --font-display: var(--font-ui);
    --font-body: var(--font-ui);
}

/* ─── Glass panel (iOS Dynamic Island / Sheet 표면) ──────────────── */
.glass-panel {
    background: var(--bg-glass);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    backdrop-filter: blur(40px) saturate(180%);
    border: 0.5px solid var(--border-glass);
    border-radius: var(--radius-md);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        var(--shadow-md);
}

/* ─── Tappable — 모든 button/탭 가능 요소 공통 ──────────────────── */
.tappable {
    transition: transform 0.1s ease-out;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.tappable:active {
    transform: scale(0.96);
}

/* ─── 공통 키프레임 5종 ────────────────────────────────────────── */

/* 1) ios-enter — 카드/패널 등장 (살짝 솟으며 fade in) */
@keyframes ios-enter {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
.anim-ios-enter {
    animation: ios-enter 0.36s var(--ease-emphasis) both;
}

/* 2) sheet-up — 모달/시트 슬라이드 업 (iOS Sheet) */
@keyframes sheet-up {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}
.anim-sheet-up {
    animation: sheet-up 0.42s var(--ease-emphasis) both;
}

/* 3) island-bounce — Dynamic Island 토스트 */
@keyframes island-bounce {
    0% {
        opacity: 0;
        transform: translateY(-12px) scale(0.86);
    }
    60% {
        opacity: 1;
        transform: translateY(2px) scale(1.04);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
.anim-island-bounce {
    animation: island-bounce 0.5s var(--ease-spring) both;
}

/* 4) ios-pulse — 빨간 알림 / 위급 마커 */
@keyframes ios-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 69, 58, 0.55);
    }
    70% {
        box-shadow: 0 0 0 14px rgba(255, 69, 58, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 69, 58, 0);
    }
}
.anim-ios-pulse {
    animation: ios-pulse 1.6s ease-out infinite;
}

/* 5) active-scale — :active 시 96% (tappable 가 커버 — 키프레임 alias) */
@keyframes active-scale {
    from { transform: scale(1); }
    to { transform: scale(0.96); }
}

/* ─── 여백 룰 utility ─────────────────────────────────────────── */
.stack-4 > * + * { margin-top: var(--space-4); }
.stack-3 > * + * { margin-top: var(--space-3); }
.pad-edge {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
}
.pad-card { padding: var(--space-4); }