/* ============================================================
   PHiN Design System — Personal Health INtelligence
   Dark-mode tokens. Deep forest brand. 5-tier color system.
   Import this once at the top of every page.
   ============================================================ */

/* Pretendard — Korean + Latin geometric sans.
   Served via jsDelivr CDN; @font-face declarations below register the
   family name so the compiler knows the src. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* Pretendard subset weights used by this system */
@font-face { font-family: 'Pretendard'; font-style: normal; font-weight: 400;
  src: url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-subset.woff2') format('woff2'); }
@font-face { font-family: 'Pretendard'; font-style: normal; font-weight: 500;
  src: url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-subset.woff2') format('woff2'); }
@font-face { font-family: 'Pretendard'; font-style: normal; font-weight: 600;
  src: url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-subset.woff2') format('woff2'); }
@font-face { font-family: 'Pretendard'; font-style: normal; font-weight: 700;
  src: url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-subset.woff2') format('woff2'); }
@font-face { font-family: 'Pretendard'; font-style: normal; font-weight: 800;
  src: url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-subset.woff2') format('woff2'); }
@font-face { font-family: 'Pretendard'; font-style: normal; font-weight: 900;
  src: url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-subset.woff2') format('woff2'); }

:root {
  /* ───── Surface (dark mode) ─────
     Warmer near-black with the slightest green undertone — premium, not gaming.
     Elevation is signalled by tonal step-up + a 1px hairline. */
  --bg:           #0b0f0d;   /* base canvas — slightly warmer */
  --bg-elev-1:    #111613;
  --bg-elev-2:    #181f1c;   /* hovered / nested card */
  --bg-overlay:   #060908;   /* modal scrim base (used at 70%) */

  /* ───── Brand ─────
     A deep forest used as selected-fill, primary container, accent border.
     `--accent` is the everyday refined sage used for CTAs, progress, the N.
     `--brand-bright` is reserved for the GREEN PHIN tier moment only. */
  --brand:         #054d28;   /* primary — deep forest */
  --brand-strong:  #0a7a40;   /* hover step */
  --accent:        #39ff6a;   /* THE PHiN green — vivid, alive */
  --accent-soft:   #93d6a8;   /* mid sage — secondary accents */
  --brand-bright:  #39ff6a;   /* GREEN PHIN tier */
  --brand-mute:    #1c2a23;   /* selected option fill on dark */
  --brand-glow:    rgba(57, 255, 106, 0.14);

  /* ───── Premium accents ───── */
  --champagne:     #d4c3a0;   /* warm metallic accent, used VERY sparingly */

  /* ───── Ink (the brightness ladder) ─────
     The signature interaction: selected → ink-hi (brightens),
     idle → ink-mid, unselected/inactive → ink-lo (dims). */
  --ink-hi:   #ffffff;
  --ink-mid:  #a8b1ad;
  --ink-lo:   #5b6661;
  --ink-xlo:  #313836;

  /* ───── Line / divider — thinner, softer ───── */
  --line:        #1a221e;
  --line-strong: #242c28;

  /* ───── PHIN tier palette (score → tier color) ─────
     These are emphatic accents, used as the dominant color of the
     result card for a given tier — never as UI primary. */
  --tier-gray:    #888888;   /* 0–34   GRAY PHIN */
  --tier-red:     #ff4a4a;   /* 35–49  RED PHIN */
  --tier-yellow:  #f5c518;   /* 50–64  YELLOW PHIN */
  --tier-blue:    #4a9eff;   /* 65–79  BLUE PHIN */
  --tier-green:   #39ff6a;   /* 80–100 GREEN PHIN */

  /* ───── Semantic ───── */
  --positive: #39ff6a;
  --warning:  #f5c518;
  --negative: #ff4a4a;

  /* ───── Type families ───── */
  --font-display: 'Pretendard', 'Inter', system-ui, sans-serif;
  --font-body:    'Pretendard', 'Inter', system-ui, sans-serif;
  --font-numeric: 'Inter', 'Pretendard', system-ui, sans-serif; /* big score numbers */

  /* ───── Type scale ─────
     Korean Display works best when slightly tighter than Latin display.
     The numeric score uses the heavier ceiling. */
  --type-hero:        clamp(48px, 8vw, 96px);
  --type-display-xl:  56px;
  --type-display-lg:  40px;
  --type-display-md:  32px;
  --type-display-sm:  24px;
  --type-h1:          22px;
  --type-h2:          18px;
  --type-body-lg:     17px;
  --type-body:        15px;
  --type-body-sm:     14px;
  --type-caption:     12px;
  --type-micro:       11px;

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

  /* ───── Radii ───── */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-2xl:  24px;
  --r-pill: 9999px;

  /* ───── Motion ───── */
  --ease:        cubic-bezier(0.2, 0.7, 0.2, 1); /* @kind other */
  --dur-fast:    140ms; /* @kind other */
  --dur-base:    220ms; /* @kind other */
  --dur-slow:    360ms; /* @kind other */
}

/* ============================================================
   Base
   ============================================================ */

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink-hi);
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}
html { scroll-behavior: smooth; }

/* Film grain overlay — the cheap-vs-premium dividing line.
   Subtle SVG noise sits over everything at low opacity, fixed to viewport. */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

img, svg, video, canvas { max-width: 100%; height: auto; }

/* ============================================================
   Typography
   ============================================================ */

.phin-hero {
  font-family: var(--font-display);
  font-size: var(--type-hero);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.038em;
  color: var(--ink-hi);
  margin: 0;
}
.phin-display-xl { font-family: var(--font-display); font-size: var(--type-display-xl); font-weight: 800; line-height: 1.08; letter-spacing: -0.032em; margin: 0; }
.phin-display-lg { font-family: var(--font-display); font-size: var(--type-display-lg); font-weight: 800; line-height: 1.12; letter-spacing: -0.028em; margin: 0; }
.phin-display-md { font-family: var(--font-display); font-size: var(--type-display-md); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; margin: 0; }
.phin-display-sm { font-family: var(--font-display); font-size: var(--type-display-sm); font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; margin: 0; }
.phin-h1 { font-size: var(--type-h1); font-weight: 700; line-height: 1.3; margin: 0; }
.phin-h2 { font-size: var(--type-h2); font-weight: 600; line-height: 1.4; margin: 0; }
.phin-body-lg { font-size: var(--type-body-lg); line-height: 1.6; }
.phin-body    { font-size: var(--type-body); line-height: 1.55; }
.phin-body-sm { font-size: var(--type-body-sm); line-height: 1.5; }
.phin-caption { font-size: var(--type-caption); line-height: 1.45; color: var(--ink-mid); }
.phin-micro   { font-size: var(--type-micro); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--ink-lo); }

.phin-score {
  font-family: var(--font-numeric);
  font-weight: 900;
  font-size: clamp(120px, 22vw, 220px);
  line-height: 0.9;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
}

/* .phin-serif intentionally removed — PHiN has no serif usage */
  letter-spacing: -0.01em;
}

/* Text-color helpers */
.t-hi  { color: var(--ink-hi); }
.t-mid { color: var(--ink-mid); }
.t-lo  { color: var(--ink-lo); }
.t-accent { color: var(--accent); }
.t-bright { color: var(--brand-bright); }
.t-brand  { color: var(--accent); }

/* ============================================================
   Buttons
   ============================================================ */

.phin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 16px 24px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-base) var(--ease),
              color      var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease),
              transform   var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.phin-btn:active { transform: translateY(1px); }

.phin-btn-primary {
  background: var(--accent);
  color: #03210f;
}
.phin-btn-primary:hover  { background: #5fff86; }
.phin-btn-primary:disabled {
  background: var(--ink-xlo); color: var(--ink-lo);
  cursor: not-allowed; transform: none;
}

.phin-btn-secondary {
  background: transparent;
  color: var(--ink-hi);
  border: 1px solid var(--line-strong);
}
.phin-btn-secondary:hover { background: var(--bg-elev-1); border-color: var(--ink-lo); }

.phin-btn-ghost {
  background: transparent;
  color: var(--ink-mid);
  padding: 12px 16px;
}
.phin-btn-ghost:hover { color: var(--ink-hi); }

/* ============================================================
   Cards
   ============================================================ */

.phin-card {
  background: var(--bg-elev-1);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--space-xl);
}

/* ============================================================
   Options (the signature survey interaction)
     idle      → ink-mid text, hairline border
     hover     → border-strong
     selected  → brand-mute fill, ink-hi text, brand border
     unselected→ ink-lo text (dimmer than idle)
   ============================================================ */

.phin-option {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  padding: 18px 20px;
  background: var(--bg-elev-1);
  color: var(--ink-mid);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease),
              color      var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease);
}
.phin-option:hover { border-color: var(--line-strong); color: var(--ink-hi); }
.phin-option.is-selected {
  background: var(--brand-mute);
  color: var(--ink-hi);
  border-color: var(--accent);
  font-weight: 600;
}
.phin-option.is-unselected {
  color: var(--ink-lo);
  background: transparent;
}
.phin-option.is-unselected:hover {
  color: var(--ink-mid);
  border-color: var(--line);
}

/* ============================================================
   Form
   ============================================================ */

.phin-input {
  background: var(--bg-elev-1);
  color: var(--ink-hi);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 15px;
  outline: none;
  width: 100%;
}
.phin-input::placeholder { color: var(--ink-lo); }
.phin-input:focus { border-color: var(--accent); }

/* ============================================================
   Badges & pills
   ============================================================ */

.phin-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--bg-elev-1);
  color: var(--ink-mid);
  border: 1px solid var(--line);
}
.phin-badge-brand {
  background: var(--brand-mute);
  color: var(--accent);
  border-color: var(--brand);
}

/* ============================================================
   Layout helpers
   ============================================================ */

.phin-container { max-width: 1200px; margin: 0 auto; padding-left: var(--space-xl); padding-right: var(--space-xl); }
.phin-container-sm { max-width: 720px; margin: 0 auto; padding-left: var(--space-xl); padding-right: var(--space-xl); }
.phin-band { padding-top: var(--space-5xl); padding-bottom: var(--space-5xl); }

/* Tier-named background accents — for result card */
.tier-gray   { --tier-color: var(--tier-gray); }
.tier-red    { --tier-color: var(--tier-red); }
.tier-yellow { --tier-color: var(--tier-yellow); }
.tier-blue   { --tier-color: var(--tier-blue); }
.tier-green  { --tier-color: var(--tier-green); }

/* ============================================================
   Mobile responsive helpers
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --type-hero:        clamp(40px, 13vw, 64px);
    --type-display-xl:  40px;
    --type-display-lg:  30px;
    --type-display-md:  24px;
    --type-display-sm:  20px;
    --space-5xl:        64px;
    --space-4xl:        48px;
    --space-3xl:        32px;
  }
  .phin-container, .phin-container-sm {
    padding-left: 18px;
    padding-right: 18px;
  }
  .phin-band { padding-top: var(--space-3xl); padding-bottom: var(--space-3xl); }
  .phin-score { font-size: clamp(96px, 36vw, 160px) !important; }
}


/* ============================================================
   Landing — Tier card + Feature card (responsive)
   ============================================================ */

.tier-card {
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background: var(--bg-elev-1);
  padding: 24px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.tier-card[data-featured="true"] { border-color: var(--tc); }
.tier-card[data-featured="true"]::after {
  content: '';
  position: absolute;
  inset: auto -40% -60% auto;
  width: 100%;
  aspect-ratio: 1;
  background: radial-gradient(circle, color-mix(in srgb, var(--tc) 22%, transparent), transparent 70%);
  pointer-events: none;
}
.tier-card__dot {
  width: 32px; height: 32px;
  border-radius: 9999px;
  background: var(--tc);
  box-shadow: 0 0 24px color-mix(in srgb, var(--tc) 40%, transparent);
  flex-shrink: 0;
  display: inline-block;
}
.tier-card__body { display: flex; flex-direction: column; gap: 6px; }
.tier-card__name {
  font-family: var(--font-display);
  font-weight: 800; font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--ink-hi);
}
.tier-card__range {
  font-family: var(--font-numeric);
  font-size: 14px;
  color: var(--ink-lo);
}

.feature-card {
  background: var(--bg-elev-1);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.feature-card__n {
  font-family: var(--font-numeric);
  font-size: 13px; font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.08em;
}
.feature-card__body { display: flex; flex-direction: column; gap: 8px; }
.feature-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink-hi);
  margin: 0;
}
.feature-card__desc {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-mid);
  margin: 0;
}

@media (max-width: 768px) {
  /* Tier cards collapse to a compact stacked LIST — all 5 visible at once */
  .phin-tier-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  .tier-card {
    flex-direction: row;
    align-items: center;
    padding: 14px 16px;
    gap: 14px;
  }
  .tier-card::after { display: none; }
  .tier-card__dot { width: 14px; height: 14px; box-shadow: 0 0 12px color-mix(in srgb, var(--tc) 50%, transparent); }
  .tier-card__body { flex: 1; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; }
  .tier-card__name { font-size: 15px; }
  .tier-card__range { font-size: 12px; }

  /* Feature cards: compact horizontal rows */
  .phin-feature-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  .feature-card {
    flex-direction: row;
    align-items: flex-start;
    padding: 14px 16px;
    gap: 12px;
  }
  .feature-card__n { flex-shrink: 0; width: 28px; padding-top: 4px; }
  .feature-card__body { gap: 4px; }
  .feature-card__title { font-size: 16px; line-height: 1.3; }
  .feature-card__desc { font-size: 13px; line-height: 1.5; }

  /* Hero on mobile — shrink padding */
  .phin-band { padding-top: var(--space-3xl); padding-bottom: var(--space-3xl); }
}