/* ============================================================
   멍코치 (MOGWAKCO) — Design Tokens v5
   PiCKCARE-inspired: Primary Blue + Yellow + Light Blue + Navy
   ============================================================ */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css");
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,400..800;1,14..32,400..600&display=swap");

@font-face {
  font-family: "Hakgyoansim Gongryongal R";
  src: url("/fonts/Hakgyoansim_GongryongalR.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Color · core 5 ---- */
  --primary:        #3D5AFB;
  --primary-hover:  #2548D5;
  --light-blue:     #DCE5FF;
  --pale-blue:      #F4F7FE;
  --yellow:         #FBD83F;
  --yellow-hover:   #F0C92D;

  /* ---- Dark tones ---- */
  --navy:           #1A2348;
  --ink:            #131D3F;
  --heading:        #0B1B36;

  /* ---- Base ---- */
  --white:          #FFFFFF;
  --off-white:      #F8F9FB;
  --border:         #E8ECF3;
  --stone:          #6B7280;
  --disclaimer:     #9CA3AF;

  /* ---- Verdict mapping (FR29) ---- */
  --emerald:        #10B981;
  --emerald-bg:     #ECFDF5;
  --red:            #EF4444;
  --red-bg:         #FEF2F2;

  /* ---- Fonts ---- */
  --font-ko: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-num: "Inter", var(--font-ko);
  --font-brand: "Hakgyoansim Gongryongal R", var(--font-ko);

  /* ---- Spacing · 8px grid ---- */
  --s-1: 8px;   --s-2: 16px;  --s-3: 24px;  --s-4: 32px;
  --s-5: 40px;  --s-6: 48px;  --s-7: 56px;  --s-8: 64px;
  --s-10: 80px; --s-12: 96px; --s-15: 120px; --s-16: 128px; --s-20: 160px;

  /* ---- Layout ---- */
  --max:      1240px;
  --max-wide: 1440px;
  --pad-x:    32px;

  /* ---- Radius ---- */
  --r-input: 12px;
  --r-card:  20px;
  --r-step:  24px;
  --r-stat:  16px;
  --r-pill:  999px;

  /* ---- Shadow ---- */
  --sh-card:  0 1px 3px rgba(15,30,51,0.04);
  --sh-hover: 0 12px 32px rgba(15,30,51,0.08);
  --sh-search: 0 4px 16px rgba(61,90,251,0.12);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --t-fast: 180ms var(--ease);
  --t-med:  320ms var(--ease);
}

/* ============================================================
   Reset & base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-ko);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "tnum" 0;
}
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }
h1,h2,h3,h4,p { margin: 0; }
::selection { background: var(--light-blue); color: var(--primary-hover); }

/* ============================================================
   Type scale  (px / weight / letter-spacing / line-height)
   ============================================================ */
.t-display1 { font-size: 72px;  font-weight: 800; letter-spacing: -0.02em;  line-height: 1.05; color: var(--heading); }
.t-display2 { font-size: 52px;  font-weight: 800; letter-spacing: -0.015em; line-height: 1.1;  color: var(--heading); }
.t-h1 { font-size: 32px; font-weight: 700; letter-spacing: -0.01em;  line-height: 1.25; color: var(--heading); }
.t-h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.005em; line-height: 1.3;  color: var(--heading); }
.t-h3 { font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--heading); }
.t-bodyL { font-size: 18px; font-weight: 400; line-height: 1.6; color: var(--ink); }
.t-bodyM { font-size: 16px; font-weight: 400; line-height: 1.6; color: var(--ink); }
.t-bodyS { font-size: 14px; font-weight: 400; line-height: 1.55; color: var(--ink); }
.t-caption {
  font-size: 13px; font-weight: 500; letter-spacing: 0.06em;
  line-height: 1.4; text-transform: uppercase; color: var(--primary);
}
.t-num-xl { font-family: var(--font-num); font-size: 88px; font-weight: 500; letter-spacing: -0.03em; line-height: 1; font-feature-settings: "tnum" 1; }
.t-num-l  { font-family: var(--font-num); font-size: 48px; font-weight: 500; letter-spacing: -0.02em; line-height: 1; font-feature-settings: "tnum" 1; }
.t-num-m  { font-family: var(--font-num); font-size: 28px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; font-feature-settings: "tnum" 1; }

.muted { color: var(--stone); }

/* Responsive type clamps for big display sizes */
@media (max-width: 1100px) {
  .t-display1 { font-size: 56px; }
  .t-display2 { font-size: 42px; }
}
@media (max-width: 720px) {
  .t-display1 { font-size: 40px; }
  .t-display2 { font-size: 32px; }
  .t-num-xl { font-size: 64px; }
}