/* ==========================================================================
   METIVATOR — Design System
   ==========================================================================
   Single source of truth for design tokens, utility classes, and base
   components. Other CSS files (page-specific) should reference these tokens
   instead of hardcoding values.

   기준 문서: services/b2c/design_system/design-system.md (pie3d 코드 기반)
   METIVATOR 적용: brand color 변경 (#FF6600 → #FF8838 — 사이트 실제 사용)
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS (CSS variables)
   ========================================================================== */
:root {
    /* --- Font ------------------------------------------------------------ */
    --font-family: "SUIT", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", sans-serif;
    --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* --- Brand ----------------------------------------------------------- */
    --color-primary: #FF8838;          /* METIVATOR 메인 액션 (CTA, 결제 버튼) */
    --color-primary-hover: #E5743A;
    --color-primary-light: #FFE5D0;
    --color-accent: #ff6600;            /* sub 강조 (link 텍스트) */
    --color-accent-hover: #E55A00;
    --color-kakaopay: #FEE500;

    /* --- Text ------------------------------------------------------------ */
    --color-text: #1c1c1c;              /* 메인 텍스트 (pure black보다 부드러움) */
    --color-text-secondary: #707070;
    --color-text-tertiary: #aaaaaa;
    --color-text-on-dark: #ffffff;
    --color-text-on-primary: #1c1c1c;

    /* --- Background ------------------------------------------------------ */
    --color-bg: #f5f5f5;                /* 페이지 배경 */
    --color-bg-surface: #ffffff;        /* 카드/박스 표면 */
    --color-bg-subtle: #fafafa;         /* 약한 hover 배경 */
    --color-bg-muted: #f8f8f8;
    --color-bg-elevated: #ededed;       /* 강한 hover 배경 */
    --color-bg-footer: #e6e6e8;
    --color-bg-overlay: rgba(0, 0, 0, 0.4);

    /* --- Border ---------------------------------------------------------- */
    --color-border: #1c1c1c;            /* 강한 보더 (sharp 디자인) */
    --color-border-strong: #000000;     /* 진한 보더 (헤더 / 푸터 등) */
    --color-border-default: #d8d8d8;
    --color-border-subtle: #ededed;
    --color-border-input: #aaaaaa;

    /* --- Status ---------------------------------------------------------- */
    --color-success: #00b86b;
    --color-success-bg: #e0f5e9;
    --color-success-text: #00874e;
    --color-warning: #FF961E;
    --color-warning-bg: #fff3d0;
    --color-warning-text: #b87900;
    --color-danger: #d23616;
    --color-danger-bg: #fff3f0;
    --color-danger-border: #ffcdc0;
    --color-info: #4265fe;
    --color-info-bg: #e0e9ff;

    /* --- Typography scale (디자인 시스템 문서 기준) ----------------------- */
    --font-size-h3: 31px;
    --font-size-h4: 26px;
    --font-size-h5: 24px;
    --font-size-h7: 20px;
    --font-size-header: 22px;
    --font-size-maintext: 18px;
    --font-size-body-lg: 16px;
    --font-size-body: 15px;
    --font-size-body-sm: 14px;
    --font-size-sbody: 13px;
    --font-size-caption: 12px;
    --font-size-overline: 11px;

    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    --line-height-tight: 1.2;
    --line-height-normal: 1.4;
    --line-height-relaxed: 1.6;

    /* --- Spacing (8px base) --------------------------------------------- */
    --space-2xs: 4px;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --space-4xl: 96px;

    /* --- Border radius (B2C 샤프 인상 — 작은 라디우스) ------------------- */
    --radius-xs: 2px;
    --radius-sm: 3px;
    --radius-md: 4px;
    --radius-lg: 5px;
    --radius-pill: 9999px;
    --radius-full: 50%;

    /* --- Shadow --------------------------------------------------------- */
    --shadow-card: 0 8px 20px 0 rgba(0, 0, 0, 0.15);
    --shadow-card-hover: 0 12px 28px 0 rgba(0, 0, 0, 0.18);
    --shadow-modal: 3px 3px 20px 0 rgba(0, 0, 0, 0.25);
    --shadow-elevated: 0 2px 8px 0 rgba(0, 0, 0, 0.08);

    /* --- Transition ----------------------------------------------------- */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* --- Layout --------------------------------------------------------- */
    --container-max: 1200px;
    --container-narrow: 880px;
    --container-wide: 1400px;
    --container-padding: 24px;

    /* --- Z-index --------------------------------------------------------- */
    --z-sticky: 100;
    --z-dropdown: 200;
    --z-modal: 1000;
    --z-toast: 2000;

    /* --- Legacy aliases (점진적 마이그레이션 위해 유지) ------------------- */
    --contents-width: var(--container-max);
    --color-line: var(--color-border-strong);
    --color-footer: var(--color-bg-footer);
    --color-button: #c8c8c8;
}

/* ==========================================================================
   2. TYPOGRAPHY CLASSES
   ========================================================================== */
.ds-h3 {
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-h3);
    line-height: var(--line-height-normal);
    color: var(--color-text);
    margin: 0;
}
.ds-h4 {
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-h4);
    line-height: var(--line-height-normal);
    color: var(--color-text);
    margin: 0;
}
.ds-h5 {
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-h5);
    line-height: var(--line-height-normal);
    color: var(--color-text);
    margin: 0;
}
.ds-h7 {
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-h7);
    letter-spacing: 0.15px;
    line-height: var(--line-height-normal);
    color: var(--color-text);
    margin: 0;
}
.ds-h7--bold { font-weight: var(--font-weight-bold); }
.ds-body { font-size: var(--font-size-body); font-weight: var(--font-weight-regular); line-height: var(--line-height-relaxed); color: var(--color-text); }
.ds-body-sm { font-size: var(--font-size-body-sm); font-weight: var(--font-weight-regular); line-height: var(--line-height-relaxed); color: var(--color-text); }
.ds-caption { font-size: var(--font-size-caption); font-weight: var(--font-weight-regular); color: var(--color-text-secondary); }
.ds-text-secondary { color: var(--color-text-secondary); }
.ds-text-tertiary { color: var(--color-text-tertiary); }
.ds-text-accent { color: var(--color-accent); }
.ds-text-success { color: var(--color-success-text); }
.ds-text-danger { color: var(--color-danger); }

/* ==========================================================================
   3. LAYOUT UTILITIES
   ========================================================================== */
.ds-container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    box-sizing: border-box;
}
.ds-container--narrow { max-width: var(--container-narrow); }
.ds-container--wide  { max-width: var(--container-wide);  }
.ds-stack > * + * { margin-top: var(--space-md); }
.ds-stack-sm > * + * { margin-top: var(--space-sm); }
.ds-stack-lg > * + * { margin-top: var(--space-lg); }
.ds-stack-xl > * + * { margin-top: var(--space-xl); }
.ds-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
}
.ds-grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-lg);
}

/* ==========================================================================
   4. BASE COMPONENTS — Button
   ========================================================================== */
.ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    min-height: 48px;
    padding: 12px 24px;
    font-family: inherit;
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-body-sm);
    line-height: 1;
    text-decoration: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: filter var(--transition-fast), background var(--transition-fast), opacity var(--transition-fast);
    box-sizing: border-box;
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
}
.ds-btn:disabled,
.ds-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.ds-btn--primary {
    background: var(--color-primary);
    color: var(--color-text-on-primary);
}
.ds-btn--primary:hover:not(:disabled) { background: var(--color-primary-hover); color: var(--color-text-on-primary); opacity: 1; }
.ds-btn--secondary {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text);
}
.ds-btn--secondary:hover:not(:disabled) { background: var(--color-bg-subtle); color: var(--color-text); opacity: 1; }
.ds-btn--ghost {
    background: transparent;
    color: var(--color-text);
}
.ds-btn--ghost:hover:not(:disabled) { background: var(--color-bg-elevated); color: var(--color-text); opacity: 1; }
.ds-btn--danger {
    background: var(--color-danger);
    color: #ffffff;
}
.ds-btn--danger:hover:not(:disabled) { filter: brightness(0.95); color: #ffffff; opacity: 1; }
.ds-btn--lg {
    min-height: 56px;
    padding: 16px 28px;
    font-size: var(--font-size-maintext);
    font-weight: var(--font-weight-medium);
}
.ds-btn--sm {
    min-height: 36px;
    padding: 8px 16px;
    font-size: var(--font-size-caption);
}
.ds-btn--block { width: 100%; }

/* ==========================================================================
   5. BASE COMPONENTS — Form
   ========================================================================== */
.ds-field { display: flex; flex-direction: column; gap: var(--space-xs); }
.ds-field__label {
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-body-sm);
    line-height: var(--line-height-normal);
    color: var(--color-text);
}
.ds-field__hint {
    font-size: var(--font-size-caption);
    color: var(--color-text-secondary);
}
.ds-field__error {
    font-size: var(--font-size-caption);
    color: var(--color-danger);
}
.ds-input,
.ds-textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    font-family: inherit;
    font-size: var(--font-size-body-sm);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    color: var(--color-text);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-sm);
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    box-sizing: border-box;
}
.ds-textarea {
    min-height: 120px;
    resize: vertical;
}
.ds-input::placeholder,
.ds-textarea::placeholder { color: var(--color-text-tertiary); }
.ds-input:focus,
.ds-textarea:focus {
    border-color: var(--color-border-strong);
    box-shadow: 0 0 0 1px var(--color-border-strong);
}
.ds-input.is-error,
.ds-textarea.is-error {
    border-color: var(--color-danger);
}
.ds-checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    cursor: pointer;
    font-size: var(--font-size-body-sm);
    color: var(--color-text);
}
.ds-checkbox__input {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
    cursor: pointer;
}

/* ==========================================================================
   6. BASE COMPONENTS — Card / Surface
   ========================================================================== */
.ds-card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
}
.ds-card--sharp {
    border-color: var(--color-border);
    border-radius: var(--radius-xs);
}
.ds-card--bordered {
    border: 1px solid var(--color-border-default);
}
.ds-card__title {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-maintext);
    line-height: var(--line-height-normal);
    color: var(--color-text);
    margin: 0 0 var(--space-md);
}
.ds-card__body { color: var(--color-text); line-height: var(--line-height-relaxed); }
.ds-card__divider {
    height: 1px;
    background: var(--color-border-subtle);
    margin: var(--space-md) 0;
}

/* ==========================================================================
   7. BASE COMPONENTS — Badge
   ========================================================================== */
.ds-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-overline);
    line-height: var(--line-height-tight);
    background: var(--color-bg-elevated);
    color: var(--color-text);
}
.ds-badge--success { background: var(--color-success-bg); color: var(--color-success-text); }
.ds-badge--warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.ds-badge--danger  { background: var(--color-danger-bg);  color: var(--color-danger); }
.ds-badge--info    { background: var(--color-info-bg);    color: var(--color-info); }

/* ==========================================================================
   8. BASE COMPONENTS — Hero / Section
   ========================================================================== */
.ds-section {
    padding: var(--space-2xl) 0;
}
.ds-section--lg { padding: var(--space-3xl) 0; }
.ds-section--xl { padding: var(--space-4xl) 0; }
.ds-section__title {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-h4);
    line-height: var(--line-height-normal);
    color: var(--color-text);
    margin: 0 0 var(--space-md);
    letter-spacing: -0.02em;
}
.ds-section__sub {
    font-size: var(--font-size-body);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-xl);
    line-height: var(--line-height-relaxed);
}

/* ==========================================================================
   9. RESPONSIVE — 디자인 시스템 문서 기준 브레이크포인트
   ========================================================================== */
@media screen and (max-width: 860px) {
    :root {
        --container-padding: 16px;
        --font-size-h3: 26px;
        --font-size-h4: 22px;
        --font-size-h5: 20px;
        --font-size-h7: 18px;
        --space-xl: 24px;
        --space-2xl: 36px;
        --space-3xl: 48px;
    }
    .ds-btn { min-height: 44px; padding: 10px 20px; }
    .ds-btn--lg { min-height: 52px; padding: 14px 24px; }
    .ds-grid-cards { grid-template-columns: 1fr; }
}