/* ============================================================
   Sillok Design System — Apple preset (getdesign "apple")
   ============================================================
   "Reverent product photography framed by near-invisible UI."
   Edge-to-edge tiles alternate light(white/parchment) ↔ near-black;
   the color change itself is the section divider. One quiet blue
   (#0066cc) carries every interactive element — no second accent.

   Token NAMES are kept (paper-*, ink-*, line-*, seal-*) for
   backwards-compat with the existing inline styles across all
   pages, but VALUES are the Apple system: white/parchment canvas,
   near-black tiles, Action Blue accent, SF Pro (Inter substitute),
   pill CTAs, and a single product drop-shadow.

   Per user (2026-05-25): full replacement — seal-red/coral retired,
   Action Blue is the single accent everywhere incl. the AI-draft
   watermark and the logomark dot.
   ============================================================ */

/* ---------- Fonts ---------- */
/* SF Pro resolves natively on Apple platforms via -apple-system / system-ui.
   Inter (variable) is the closest open-source SF Pro substitute on other
   platforms; Pretendard remains in the stack for Hangul glyphs Inter lacks. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.css');
/* JetBrains Mono: code, transcript IDs, prices */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ============================================================
     COLOR — Apple: white/parchment canvas + near-black tiles + Action Blue
     ============================================================ */

  /* Paper / surface (light backgrounds) */
  --paper-0:        #FFFFFF;   /* canvas — dominant white surface */
  --paper-1:        #F5F5F7;   /* parchment — alternating light tiles, footer */
  --paper-2:        #E8E8ED;   /* stronger band — active tabs, emphasized rows */
  --paper-card:     #FFFFFF;   /* white card / sheet */
  --surface-pearl:  #FAFAFC;   /* ghost-button fill (reads as button on parchment) */

  /* Near-black product tiles (Apple homepage dark bands) */
  --surface-dark:           #272729;   /* tile-1 — primary dark tile */
  --surface-dark-soft:      #252527;   /* tile-3 — bottom of stack, code/video frames */
  --surface-dark-elevated:  #2A2A2C;   /* tile-2 — micro-step lighter, stacked darks */
  --surface-black:          #000000;   /* true void — global nav bar, video bg */
  --on-dark:                #FFFFFF;   /* text on dark tiles */
  --on-dark-soft:           #CCCCCC;   /* secondary copy on dark (body-muted) */

  /* Ink (foreground) — Apple uses one near-black for all light-surface text */
  --ink-0:          #1D1D1F;   /* primary text / headlines */
  --ink-1:          #1D1D1F;   /* body — same tone as ink per Apple */
  --ink-2:          #6E6E73;   /* muted — sub-headings, secondary */
  --ink-3:          #86868B;   /* muted-soft — captions, fine-print */
  --ink-4:          #AEAEB2;   /* very faint text / disabled */

  /* Hairlines (borders) */
  --line-1:         #D2D2D7;   /* hairline — default 1px border */
  --line-2:         #C7C7CC;   /* emphasized border */
  --line-3:         #1D1D1F;   /* document rule (hard line) */
  --line:           #D2D2D7;   /* bare alias (legacy call site) */

  /* Action Blue — the single Apple accent (mapped onto seal-* names) */
  --seal-50:        #E8F1FB;   /* faint blue wash / hover tint */
  --seal-100:       #D2E4F7;   /* selection bg */
  --seal-300:       #66A3E0;
  --seal-500:       #0066CC;   /* primary — Action Blue CTA & links */
  --seal-600:       #0058B3;   /* hover/pressed — primary-active */
  --seal-700:       #004A99;
  --seal-900:       #00306B;

  /* Blue aliases for clarity at call sites */
  --primary:           var(--seal-500);
  --primary-active:    var(--seal-600);
  --primary-focus:     #0071E3;   /* keyboard focus-ring blue */
  --primary-on-dark:   #2997FF;   /* Sky Link Blue — links on dark tiles */
  --primary-disabled:  #C7C7CC;
  --on-primary:        #FFFFFF;

  /* Companion accents collapsed to the single blue (Apple = one accent) */
  --accent-teal:    #2997FF;
  --accent-amber:   #0066CC;

  /* Semantic — functional status colors for app dashboards (Apple system hues) */
  --success-500:    #34C759;
  --success-700:    #248A3D;
  --success-50:     #E3F9E9;
  --warning-500:    #FF9F0A;
  --warning-50:     #FFF1DD;
  --danger-500:     #FF3B30;
  --danger-50:      #FFE5E3;
  --info-500:       #0066CC;
  --info-50:        #E8F1FB;

  /* Watermark — AI 초안 — 검수 전 (now Action Blue per full replacement) */
  --watermark:      rgba(0, 102, 204, 0.10);

  /* ============================================================
     TYPOGRAPHY — SF Pro (native) → Inter (substitute) + Pretendard (Hangul)
     ============================================================ */
  --font-sans:      -apple-system, BlinkMacSystemFont, system-ui, 'SF Pro Text', 'SF Pro Display', 'Inter', 'Pretendard Variable', Pretendard, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-serif:     var(--font-sans); /* Apple has no serif display face */
  --font-mono:      'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale — Apple hierarchy, bumped +2px globally (body 19px, hero 58px) */
  --text-2xs:       12px;   /* micro-legal */
  --text-xs:        14px;   /* fine-print, nav-link */
  --text-sm:        16px;   /* caption, button-utility */
  --text-base:      17px;
  --text-md:        19px;   /* body — Apple 17px + 2 */
  --text-lg:        23px;   /* tagline / title */
  --text-xl:        30px;   /* lead / product-tile subcopy */
  --text-2xl:       36px;   /* display-md — section heads */
  --text-3xl:       42px;   /* display-lg — tile headlines */
  --text-4xl:       50px;
  --text-5xl:       58px;   /* hero-display */

  /* Line heights — display tight, body editorial-relaxed (Apple 1.47) */
  --lh-tight:       1.07;   /* hero-display */
  --lh-snug:        1.10;   /* display-lg */
  --lh-display:     1.19;   /* display / tagline */
  --lh-normal:      1.47;   /* body — Apple's reading pace */
  --lh-loose:       1.6;

  /* Tracking — negative at display sizes for the "Apple tight" cadence */
  --track-display:  -0.005em;  /* hero (≈ -0.28px @ 56px) */
  --track-tight:    -0.011em;  /* display-md/sm (≈ -0.374px @ 34px) */
  --track-snug:     -0.01em;
  --track-normal:   0;
  --track-wide:     0.01em;
  --track-wider:    0.06em;     /* uppercase eyebrows */

  /* Weights — Apple ladder is 300 / 400 / 600 / 700 (500 deliberately absent) */
  --weight-light:   300;   /* rare airy reads (lead-airy, store-hero CTA) */
  --weight-regular: 400;
  --weight-medium:  600;   /* Apple has no 500 — mid-weight reads use 600 */
  --weight-semi:    600;
  --weight-bold:    700;
  --weight-black:   700;   /* Apple tops out at 700 */

  /* ============================================================
     SPACING — 8px base (Apple), sub-base for tight type adjustments
     ============================================================ */
  --space-0:        0;
  --space-1:        4px;    /* xxs */
  --space-2:        8px;    /* xs — base unit */
  --space-3:        12px;   /* sm */
  --space-4:        16px;
  --space-5:        20px;
  --space-6:        24px;   /* lg — card padding */
  --space-8:        32px;   /* xl */
  --space-10:       40px;
  --space-12:       48px;   /* xxl */
  --space-16:       64px;
  --space-20:       80px;   /* section — tile vertical padding */
  --space-24:       96px;

  /* ============================================================
     RADII — Apple scale (pill is the action signal)
     ============================================================ */
  --radius-0:       0;       /* full-bleed tiles */
  --radius-sm:      5px;      /* xs — subtle chips */
  --radius:         8px;      /* sm — dark utility buttons, inline imagery */
  --radius-md:      11px;     /* pearl button capsules */
  --radius-lg:      18px;     /* store/accessory utility cards */
  --radius-xl:      18px;     /* large cards */
  --radius-pill:    9999px;   /* primary blue pill CTA, search, chips */

  /* ============================================================
     ELEVATION — surface-color change first; one product shadow only
     ============================================================ */
  --shadow-0:       none;
  --shadow-1:       none;     /* Apple: no resting card/button shadow */
  --shadow-2:       0 4px 16px rgba(0, 0, 0, 0.08);    /* dropdowns, popovers */
  --shadow-3:       0 12px 32px rgba(0, 0, 0, 0.12);   /* modals, toasts */
  --shadow-product: rgba(0, 0, 0, 0.22) 3px 5px 30px 0;/* the one true shadow — product renders only */
  --shadow-inset:   none;

  /* Focus ring — Action Blue, 2px solid with paper offset */
  --focus-ring:     0 0 0 2px var(--paper-0), 0 0 0 4px var(--primary-focus);

  /* Backdrop blur — frosted sub-nav / sticky bars */
  --blur-frost:     saturate(180%) blur(20px);

  /* ============================================================
     MOTION — fades + scale(0.95) press; no springs/parallax
     ============================================================ */
  --ease-out:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:       120ms;
  --dur-base:       180ms;
  --dur-slow:       280ms;
  --press-scale:    0.95;   /* system-wide active micro-interaction */

  /* ============================================================
     LAYOUT
     ============================================================ */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   980px;    /* text-heavy sections (Apple ~980) */
  --container-xl:   1200px;
  --container-2xl:  1440px;   /* product grids lock at 1440 */

  /* ============================================================
     통계 대시보드 — 차트 의미색 + 발표(투사) 확대 스케일
     색·스페이싱·타입은 위 --seal/ink/paper, --space-*, --text-* 재사용.
     ============================================================ */
  --c-mine:         var(--seal-500);  /* 우리 시군구 — 강조 액센트 */
  --c-ref:          #8A94A6;          /* 시도 평균 — 중립 회색 */
  --c-ref-2:        #C0863A;          /* 전국 평균 — 보조(채도 낮은 황) */
  --c-up:           #248A3D;          /* 증가(방향 명확 지표 한정) */
  --c-down:         #C0392B;          /* 감소(방향 명확 지표 한정) */
  /* 발표 모드 유동 타이포(1080p 기준, 720p에서도 가독; 4K 가정 안 함) */
  --pres-kpi:       clamp(40px, 5vw, 76px);
  --pres-num:       clamp(28px, 3.4vw, 52px);
  --pres-body:      clamp(16px, 1.5vw, 24px);
  --pres-cap:       clamp(12px, 1vw, 16px);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */
html, body {
  background: var(--paper-0);
  color: var(--ink-0);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--lh-normal);
  letter-spacing: -0.01em;
  font-feature-settings: "ss01", "tnum";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headlines: Apple weight 600 + negative tracking ("Apple tight") */
h1, .h1 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semi);
  font-size: var(--text-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  color: var(--ink-0);
}

h2, .h2 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semi);
  font-size: var(--text-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
  color: var(--ink-0);
}

h3, .h3 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semi);
  font-size: var(--text-lg);
  line-height: var(--lh-display);
  letter-spacing: var(--track-snug);
  color: var(--ink-0);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semi);
  font-size: var(--text-md);
  line-height: var(--lh-display);
  letter-spacing: var(--track-snug);
  color: var(--ink-0);
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--lh-normal);
  letter-spacing: -0.01em;
  color: var(--ink-1);
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--ink-2);
}

.label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  letter-spacing: -0.016em;
  color: var(--ink-1);
}

.caption {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--ink-2);
  line-height: var(--lh-display);
  letter-spacing: -0.016em;
}

.mono, code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-feature-settings: "tnum", "zero";
}

code {
  font-size: 0.92em;
  background: var(--paper-1);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-1);
}

pre {
  background: var(--surface-dark);
  color: var(--on-dark);
  border: 0;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  overflow-x: auto;
}

/* Links: Action Blue, underline on hover (Apple inline-link grammar) */
a {
  color: var(--seal-500);
  text-decoration: none;
  text-underline-offset: 2px;
}
a:hover { color: var(--seal-600); text-decoration: underline; text-decoration-thickness: 1px; }

::selection {
  background: var(--seal-100);
  color: var(--seal-900);
}

.tnum { font-variant-numeric: tabular-nums; }

/* ============================================================
   APPLE COMPONENT UTILITIES
   ============================================================
   Reusable building blocks for the Apple-preset surfaces.
   Namespaced `.ap-` so they never clobber existing page classes.
   ============================================================ */

/* Full-bleed alternating tiles — the color change is the divider */
.ap-tile            { padding: var(--space-20) var(--space-6); text-align: center; }
.ap-tile--light     { background: var(--paper-0); color: var(--ink-0); }
.ap-tile--parchment { background: var(--paper-1); color: var(--ink-0); }
.ap-tile--dark      { background: var(--surface-dark); color: var(--on-dark); }
.ap-tile--dark-2    { background: var(--surface-dark-elevated); color: var(--on-dark); }
.ap-tile--dark-3    { background: var(--surface-dark-soft); color: var(--on-dark); }
.ap-tile__inner     { max-width: var(--container-xl); margin: 0 auto; }
.ap-tile__headline  { font-size: var(--text-3xl); font-weight: var(--weight-semi);
                      line-height: var(--lh-snug); letter-spacing: var(--track-tight);
                      margin: 0 0 var(--space-3); }
.ap-tile__sub       { font-size: var(--text-xl); font-weight: var(--weight-regular);
                      line-height: var(--lh-display); letter-spacing: 0.196px;
                      color: inherit; opacity: .92; margin: 0 0 var(--space-6); }
.ap-tile--dark .ap-tile__sub { color: var(--on-dark-soft); opacity: 1; }

/* CTA row — two pills side by side ("Learn more" / "Buy") */
.ap-ctas { display: flex; gap: var(--space-5); justify-content: center; align-items: center; flex-wrap: wrap; }

/* Buttons */
.ap-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-sans); font-size: var(--text-md); font-weight: var(--weight-regular);
  letter-spacing: -0.01em; border: 0; cursor: pointer; text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.ap-btn:active { transform: scale(var(--press-scale)); }
.ap-btn:focus-visible { outline: 2px solid var(--primary-focus); outline-offset: 2px; }

/* Primary — Action Blue full pill (the brand action signal) */
.ap-btn--primary {
  background: var(--primary); color: var(--on-primary);
  border-radius: var(--radius-pill); padding: 11px 22px;
}
.ap-btn--primary:hover { background: var(--primary-active); color: var(--on-primary); text-decoration: none; }

/* Secondary — ghost pill (second of two CTAs) */
.ap-btn--ghost {
  background: transparent; color: var(--primary);
  border: 1px solid var(--primary); border-radius: var(--radius-pill); padding: 10px 21px;
}
.ap-btn--ghost:hover { background: var(--seal-50); color: var(--primary); text-decoration: none; }

/* Dark utility — global-nav actions (Sign In, Bag) */
.ap-btn--utility {
  background: var(--ink-0); color: var(--on-dark);
  font-size: var(--text-sm); border-radius: var(--radius); padding: 8px 15px;
  letter-spacing: -0.016em;
}
.ap-btn--utility:hover { background: #000; color: var(--on-dark); text-decoration: none; }

/* On dark tiles, inline links use Sky Link Blue */
.ap-tile--dark a, .ap-tile--dark-2 a, .ap-tile--dark-3 a { color: var(--primary-on-dark); }

/* Utility card — white sheet, hairline, 18px radius, no resting shadow */
.ap-card {
  background: var(--paper-card); border: 1px solid var(--line-1);
  border-radius: var(--radius-lg); padding: var(--space-6);
}

/* Product render — the only place a drop-shadow appears */
.ap-product-shadow { box-shadow: var(--shadow-product); }

/* Frosted sticky sub-nav / floating bars */
.ap-frosted {
  background: rgba(245, 245, 247, 0.8);
  backdrop-filter: var(--blur-frost);
  -webkit-backdrop-filter: var(--blur-frost);
}

/* Search / pill input */
.ap-input-pill {
  background: var(--paper-card); color: var(--ink-0);
  border: 1px solid rgba(0, 0, 0, 0.08); border-radius: var(--radius-pill);
  padding: 12px 20px; height: 44px; font-size: var(--text-md);
}
.ap-input-pill:focus { outline: 2px solid var(--primary-focus); outline-offset: 1px; }