/* ==========================================================================
   Apple design layer — 01 Foundation
   Loaded after styles.css. Remaps the legacy design tokens to an Apple
   palette and defines shared primitives (type, sections, buttons, forms,
   modal shell). Section-specific rules live in the 10-50 partials.
   ========================================================================== */

:root {
  /* Typography */
  --ap-font: 'Pretendard AP', 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
    'Apple SD Gothic Neo', 'SF Pro KR', 'SF Pro Text', 'Malgun Gothic', '맑은 고딕', system-ui, sans-serif;
  --ap-font-num: 'Pretendard AP', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;

  /* Surfaces */
  --ap-page: #f5f5f7;          /* page background */
  --ap-band: #ffffff;          /* full-bleed white band (hero etc.) */
  --ap-tile: #ffffff;          /* cards/tiles sitting on the page */
  --ap-fill: #f5f5f7;          /* fills inside a tile, cards on a white band */
  --ap-fill-2: #e8e8ed;        /* hover / pressed / segmented track */
  --ap-hairline: #d2d2d7;
  --ap-hairline-soft: #e8e8ed;

  /* Text */
  --ap-text: #1d1d1f;
  --ap-text-2: #6e6e73;
  --ap-text-3: #86868b;
  --ap-on-accent: #ffffff;

  /* Accents */
  --ap-blue: #0071e3;          /* filled buttons */
  --ap-blue-hover: #0077ed;
  --ap-accent: #0071e3;        /* legacy brand-primary (text + fills) */
  --ap-link: #0066cc;
  --ap-green: #248a3d;
  --ap-orange: #b64400;
  --ap-red: #e30000;
  --ap-kakao: #fee500;
  --ap-kakao-text: #191919;
  --ap-green-soft: rgba(36, 138, 61, 0.10);
  --ap-orange-soft: rgba(182, 68, 0, 0.09);
  --ap-red-soft: rgba(227, 0, 0, 0.08);
  --ap-blue-soft: rgba(0, 113, 227, 0.09);

  /* Chrome */
  --ap-nav-bg: rgba(250, 250, 252, 0.8);
  --ap-nav-text: rgba(0, 0, 0, 0.8);
  --ap-backdrop: rgba(0, 0, 0, 0.42);
  --ap-focus: 0 0 0 4px rgba(0, 125, 250, 0.35);

  /* Depth */
  --ap-shadow-tile: 2px 4px 12px rgba(0, 0, 0, 0.08);
  --ap-shadow-tile-hover: 2px 4px 16px rgba(0, 0, 0, 0.16);
  --ap-shadow-float: 0 12px 40px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04);
  --ap-shadow-modal: 0 30px 80px rgba(0, 0, 0, 0.22);

  /* Shape & motion */
  --ap-radius-xs: 8px;
  --ap-radius-s: 12px;
  --ap-radius-m: 18px;
  --ap-radius-l: 28px;
  --ap-radius-pill: 980px;
  --ap-ease: cubic-bezier(0.28, 0.11, 0.32, 1);
  --ap-dur: 0.3s;

  /* Layout */
  --ap-content: 1240px;
  --ap-text-col: 820px;
  --ap-gutter: 22px;
  --ap-section-y: 104px;
  --ap-nav-h: 52px;

  /* ---- Legacy token remap (styles.css reads these) ---- */
  --bg-primary: var(--ap-page);
  --bg-surface: var(--ap-tile);
  --bg-surface-elevated: var(--ap-tile);
  --bg-glass: var(--ap-nav-bg);
  --bg-subtle: var(--ap-fill);
  --bg-hover: var(--ap-fill-2);
  --text-primary: var(--ap-text);
  --text-secondary: var(--ap-text-2);
  --text-muted: var(--ap-text-3);
  --text-inverse: #ffffff;
  --border-subtle: var(--ap-hairline-soft);
  --border-strong: var(--ap-hairline);
  --border-glass: transparent;
  --brand-primary: var(--ap-accent);
  --brand-primary-hover: var(--ap-blue-hover);
  --brand-gradient: linear-gradient(var(--ap-accent), var(--ap-accent));
  --brand-orange: var(--ap-orange);
  --brand-orange-hover: var(--ap-orange);
  --brand-cyan: var(--ap-accent);
  --brand-emerald: var(--ap-green);
  --brand-amber: var(--ap-orange);
  --brand-rose: var(--ap-red);
  --shadow-sm: none;
  --shadow-md: var(--ap-shadow-tile);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.10);
  --shadow-xl: var(--ap-shadow-modal);
  --shadow-glow: none;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --transition-fast: 0.2s var(--ap-ease);
  --transition-normal: 0.3s var(--ap-ease);
  --transition-smooth: 0.45s var(--ap-ease);
  --font-main: var(--ap-font);
  --font-display: var(--ap-font);
}

/* Dark: Apple's black canvas with graphite tiles */
[data-theme="dark"] {
  color-scheme: dark;
  --ap-page: #000000;
  --ap-band: #000000;
  --ap-tile: #1d1d1f;
  --ap-fill: #2c2c2e;
  --ap-fill-2: #3a3a3c;
  --ap-hairline: #424245;
  --ap-hairline-soft: #333336;
  --ap-text: #f5f5f7;
  --ap-text-2: #a1a1a6;
  --ap-text-3: #86868b;
  --ap-accent: #0a84ff;
  --ap-blue-hover: #1a8cff;
  --ap-link: #2997ff;
  --ap-green: #30d158;
  --ap-orange: #ff9f0a;
  --ap-red: #ff453a;
  --ap-green-soft: rgba(48, 209, 88, 0.14);
  --ap-orange-soft: rgba(255, 159, 10, 0.14);
  --ap-red-soft: rgba(255, 69, 58, 0.14);
  --ap-blue-soft: rgba(10, 132, 255, 0.16);
  --ap-nav-bg: rgba(22, 22, 23, 0.8);
  --ap-nav-text: rgba(255, 255, 255, 0.8);
  --ap-backdrop: rgba(0, 0, 0, 0.6);
  --ap-shadow-tile: none;
  --ap-shadow-tile-hover: 0 0 0 1px #424245;
  --ap-shadow-float: 0 12px 40px rgba(0, 0, 0, 0.6);
  --ap-shadow-modal: 0 30px 80px rgba(0, 0, 0, 0.7);

  /* Legacy dark block in styles.css redefines these; restate so ours win. */
  --bg-primary: var(--ap-page);
  --bg-surface: var(--ap-tile);
  --bg-surface-elevated: var(--ap-tile);
  --bg-glass: var(--ap-nav-bg);
  --bg-subtle: var(--ap-fill);
  --bg-hover: var(--ap-fill-2);
  --text-primary: var(--ap-text);
  --text-secondary: var(--ap-text-2);
  --text-muted: var(--ap-text-3);
  --text-inverse: #ffffff;
  --border-subtle: var(--ap-hairline-soft);
  --border-strong: var(--ap-hairline);
  --border-glass: transparent;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5);
  --shadow-xl: var(--ap-shadow-modal);
  --shadow-glow: none;
}

/* ==========================================================================
   Base
   ========================================================================== */
:root body {
  font-family: var(--ap-font);
  background-color: var(--ap-page);
  color: var(--ap-text);
  letter-spacing: -0.01em;
  text-rendering: optimizeLegibility;
}

:root button,
:root input,
:root select,
:root textarea {
  font-family: inherit;
}

::selection {
  background: rgba(0, 113, 227, 0.22);
}

:root :focus-visible {
  outline: 2px solid var(--ap-accent);
  outline-offset: 2px;
}

:root h1, :root h2, :root h3, :root h4, :root h5, :root h6 {
  letter-spacing: -0.022em;
  color: inherit;
}

/* Numbers line up in tables and metrics */
:root table,
:root .trust-metric,
:root .stat-val {
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Layout: centered content column, generous section rhythm
   ========================================================================== */
:root .app-container {
  max-width: calc(var(--ap-content) + var(--ap-gutter) * 2);
  padding: 0 var(--ap-gutter) 96px;
  margin: 0 auto;
}

:root .section-container {
  margin: 0;
  padding: var(--ap-section-y) 0 0;
  scroll-margin-top: calc(var(--ap-nav-h) + 12px);
}

:root .section-container.bg-surface-raised {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: var(--ap-section-y) 0 0;
  margin: 0;
}

/* ==========================================================================
   Section header: eyebrow · two-tone headline · lede
   ========================================================================== */
:root .section-header-center {
  max-width: var(--ap-text-col);
  margin: 0 auto 56px;
  text-align: center;
}

:root .section-kicker-wrap {
  gap: 6px 22px;
  margin-bottom: 14px;
  align-items: baseline;
}

:root .section-kicker,
:root .section-kicker.kicker-amber,
:root .section-kicker.kicker-blue,
:root .section-kicker.kicker-green,
:root .section-kicker.kicker-indigo,
:root .section-kicker.kicker-pink,
:root .section-kicker.kicker-purple {
  display: inline-block;
  background: none;
  border: 0;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: var(--ap-orange);
  margin-bottom: 0;
}

:root .section-kicker.kicker-link {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ap-link);
}

:root .section-kicker.kicker-link:hover {
  transform: none;
  box-shadow: none;
  text-decoration: underline;
}

:root .section-header-center > .section-kicker {
  margin-bottom: 14px;
}

:root .section-title {
  font-size: clamp(32px, 4.2vw, 48px);
  line-height: 1.125;
  font-weight: 700;
  letter-spacing: -0.028em;
  color: var(--ap-text);
  margin: 0 0 18px;
  text-wrap: balance;
}

/* Apple Store two-tone headline: the continuation reads in gray */
:root .section-title [class*="highlight-"] {
  color: var(--ap-text-3);
  background: none;
  -webkit-text-fill-color: currentColor;
}

:root .section-subtitle {
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.58;
  font-weight: 400;
  letter-spacing: -0.012em;
  color: var(--ap-text-2);
  text-wrap: pretty;
}

:root .section-subtitle strong {
  color: var(--ap-text);
  font-weight: 600;
}

/* Inline accent helpers used in body copy */
:root .highlight-amber,
:root .highlight-orange { color: var(--ap-orange); }
:root .highlight-blue,
:root .highlight-indigo,
:root .highlight-purple,
:root .highlight-pink { color: var(--ap-accent); }
:root .highlight-emerald { color: var(--ap-green); }

/* ==========================================================================
   Button primitives (use in markup as needed)
   .ap-btn .ap-btn--primary | --secondary | --gray | --kakao, sizes --sm/--lg
   .ap-link (text link with chevron)
   ========================================================================== */
.ap-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 9px 20px;
  border-radius: var(--ap-radius-pill);
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--ap-dur) var(--ap-ease), color var(--ap-dur) var(--ap-ease), border-color var(--ap-dur) var(--ap-ease);
}
.ap-btn--sm { min-height: 32px; padding: 6px 14px; font-size: 13px; }
.ap-btn--lg { min-height: 48px; padding: 12px 26px; font-size: 17px; }
.ap-btn--primary { background: var(--ap-blue); color: #fff; }
.ap-btn--primary:hover { background: var(--ap-blue-hover); }
.ap-btn--secondary { background: transparent; color: var(--ap-link); border-color: currentColor; }
.ap-btn--secondary:hover { background: var(--ap-link); border-color: var(--ap-link); color: #fff; }
.ap-btn--gray { background: var(--ap-fill-2); color: var(--ap-text); }
.ap-btn--gray:hover { background: var(--ap-hairline); }
.ap-btn--kakao { background: var(--ap-kakao); color: var(--ap-kakao-text); }
.ap-btn--kakao:hover { background: #f5dc00; }

.ap-link {
  color: var(--ap-link);
  text-decoration: none;
  font-weight: 400;
  cursor: pointer;
}
.ap-link:hover { text-decoration: underline; }
.ap-link::after {
  content: '\203A';
  display: inline-block;
  margin-left: 0.28em;
  font-size: 1.15em;
  line-height: 1;
  transform: translateY(0.02em);
}

/* ==========================================================================
   Legacy generic buttons → Apple pills
   ========================================================================== */
:root .cta-btn {
  border-radius: var(--ap-radius-pill);
  font-weight: 600;
  box-shadow: none;
  letter-spacing: -0.01em;
}
:root .cta-btn:hover { transform: none; }
:root .cta-btn.cta-primary,
:root .cta-btn.cta-sign {
  background: var(--ap-blue);
  color: #fff;
  box-shadow: none;
}
:root .cta-btn.cta-primary:hover,
:root .cta-btn.cta-sign:hover { background: var(--ap-blue-hover); }
:root .cta-btn.cta-kakao {
  background: var(--ap-kakao);
  color: var(--ap-kakao-text);
  box-shadow: none;
}
:root .cta-btn.cta-kakao:hover { background: #f5dc00; }

:root .crm-btn {
  border-radius: var(--ap-radius-pill);
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: none;
}
:root .crm-btn-primary { background: var(--ap-blue); color: #fff; }
:root .crm-btn-primary:hover { background: var(--ap-blue-hover); }
:root .crm-btn-secondary { background: var(--ap-fill-2); border-color: transparent; color: var(--ap-text); }
:root .crm-btn-secondary:hover { background: var(--ap-hairline); }
:root .crm-btn-success { background: var(--ap-text); color: var(--ap-page); }
:root .crm-btn-success:hover { background: var(--ap-text-2); }
:root .crm-btn-danger { background: var(--ap-red-soft); color: var(--ap-red); border-color: transparent; }
:root .crm-btn-danger:hover { background: var(--ap-red); color: #fff; }

/* ==========================================================================
   Form controls
   ========================================================================== */
:root .form-input,
:root .form-select,
:root .form-textarea {
  min-height: 44px;
  padding: 10px 14px;
  border-radius: var(--ap-radius-s);
  border: 1px solid var(--ap-hairline);
  background: var(--ap-tile);
  color: var(--ap-text);
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  box-shadow: none;
  transition: border-color var(--ap-dur) var(--ap-ease), box-shadow var(--ap-dur) var(--ap-ease);
}
:root .form-textarea,
:root textarea.form-input { min-height: 96px; }
:root .form-input::placeholder,
:root .form-textarea::placeholder { color: var(--ap-text-3); }
:root .form-input:focus,
:root .form-select:focus,
:root .form-textarea:focus {
  outline: none;
  border-color: var(--ap-accent);
  background: var(--ap-tile);
  box-shadow: var(--ap-focus);
}
:root .form-group label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ap-text-2);
  letter-spacing: -0.005em;
}

:root input[type="checkbox"],
:root input[type="radio"] {
  accent-color: var(--ap-blue);
}

/* ==========================================================================
   Modal shell (sheet)
   ========================================================================== */
:root .modal-backdrop {
  background: var(--ap-backdrop);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
}

:root .modal-content-window {
  background: var(--ap-tile);
  border: 0;
  border-radius: var(--ap-radius-m);
  box-shadow: var(--ap-shadow-modal);
}

:root .modal-header {
  padding: 22px 24px 14px;
  border-bottom: 0;
  background: transparent;
  gap: 16px;
}
:root .modal-header h3 {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
:root .modal-body { padding: 8px 24px 24px; }
:root .modal-footer {
  border-top: 1px solid var(--ap-hairline-soft);
  background: transparent;
}

:root .btn-close-modal {
  flex: none;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  background: var(--ap-fill-2);
  color: var(--ap-text-2);
  font-size: 15px;
  line-height: 1;
  transition: background-color var(--ap-dur) var(--ap-ease), color var(--ap-dur) var(--ap-ease);
}
:root .btn-close-modal:hover {
  background: var(--ap-hairline);
  color: var(--ap-text);
}

/* ==========================================================================
   Responsive rhythm
   ========================================================================== */
@media (max-width: 1068px) {
  :root { --ap-section-y: 88px; }
}

@media (max-width: 734px) {
  :root {
    --ap-section-y: 64px;
    --ap-gutter: 16px;
  }
  :root .section-header-center { margin-bottom: 36px; }
  :root .section-subtitle br { display: none; }
  /* iOS zooms inputs under 16px */
  :root .form-input,
  :root .form-select,
  :root .form-textarea { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  :root *,
  :root *::before,
  :root *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}