/* ============================================================
   SEED Design System — Everyday Korean
   Forked verbatim from: https://seed-design.io/foundation
   Only deviation: brand color swapped from Karrot orange to EK red.
   ============================================================ */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

:root {
  /* ============================================================
     COLOR — Semantic tokens (SEED light mode)
     ============================================================ */

  /* Background layers */
  --seed-bg-layer-default:        #FFFFFF;
  --seed-bg-layer-basement:       #F4F4F5;
  --seed-bg-layer-floor:          #FFFFFF;

  /* Foreground (text) */
  --seed-fg-neutral:              #212124;
  --seed-fg-neutral-muted:        #4D4D52;
  --seed-fg-neutral-subtle:       #74747A;
  --seed-fg-neutral-subtlest:     #A4A4AB;

  /* Stroke (borders) */
  --seed-stroke-neutral:          #E2E2E5;
  --seed-stroke-neutral-muted:    #EFEFF0;

  /* Brand — EK taegeuk blue from logo (replaces SEED's Karrot orange #FA6616).
     Blue reads as "safe to click" universally; red is reserved as an accent
     for highlights / streaks / hearts (see --ek-accent-red below). */
  --seed-bg-brand-solid:          #1E40AF;
  --seed-bg-brand-solid-pressed:  #1E3A8A;
  --seed-fg-brand:                #1E40AF;
  --seed-fg-brand-contrast:       #FFFFFF;

  /* EK secondary brand accent — taegeuk red from logo.
     Use sparingly for highlights/streaks/hearts. Do NOT use for primary CTAs. */
  --ek-accent-red:                #E63946;
  --ek-accent-red-pressed:        #C82632;

  /* Status */
  --seed-fg-critical:             #E5202C;
  --seed-bg-critical-solid:       #E5202C;
  --seed-fg-positive:             #008B4D;
  --seed-bg-positive-solid:       #008B4D;
  --seed-fg-warning:              #A56700;
  --seed-bg-warning-solid:        #FFB100;
  --seed-fg-informative:          #0066CC;
  --seed-bg-informative-solid:    #0066CC;

  /* ============================================================
     SPACING — 4px scale
     ============================================================ */
  --seed-space-1:  4px;
  --seed-space-2:  8px;
  --seed-space-3:  12px;
  --seed-space-4:  16px;
  --seed-space-5:  20px;
  --seed-space-6:  24px;
  --seed-space-8:  32px;
  --seed-space-10: 40px;
  --seed-space-12: 48px;
  --seed-space-16: 64px;
  --seed-space-20: 80px;

  /* ============================================================
     RADIUS
     ============================================================ */
  --seed-radius-1:    2px;
  --seed-radius-2:    4px;
  --seed-radius-3:    8px;
  --seed-radius-4:    12px;
  --seed-radius-5:    16px;
  --seed-radius-6:    20px;
  --seed-radius-full: 9999px;

  /* ============================================================
     TYPOGRAPHY — SEED type ramp
     ============================================================ */
  --seed-font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Segoe UI', Helvetica, Arial, sans-serif;
  --seed-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  /* Display (hero) */
  --seed-display-1-size:     36px;
  --seed-display-1-leading:  44px;
  --seed-display-2-size:     32px;
  --seed-display-2-leading:  40px;

  /* Title (page/section headings) */
  --seed-title-1-size:       28px;
  --seed-title-1-leading:    36px;
  --seed-title-2-size:       22px;
  --seed-title-2-leading:    30px;
  --seed-title-3-size:       20px;
  --seed-title-3-leading:    28px;
  --seed-title-4-size:       18px;
  --seed-title-4-leading:    26px;

  /* Body */
  --seed-body-l-size:        18px;
  --seed-body-l-leading:     26px;
  --seed-body-m-size:        16px;
  --seed-body-m-leading:     24px;
  --seed-body-s-size:        14px;
  --seed-body-s-leading:     20px;

  /* Label (UI controls, buttons) */
  --seed-label-l-size:       17px;
  --seed-label-l-leading:    24px;
  --seed-label-m-size:       15px;
  --seed-label-m-leading:    22px;
  --seed-label-s-size:       13px;
  --seed-label-s-leading:    18px;

  /* Caption (helper text, hints) */
  --seed-caption-size:       12px;
  --seed-caption-leading:    16px;

  /* ============================================================
     SHADOW
     ============================================================ */
  --seed-shadow-small:  0 1px 2px rgba(0,0,0,0.05);
  --seed-shadow-medium: 0 4px 8px rgba(0,0,0,0.08);
  --seed-shadow-large:  0 8px 24px rgba(0,0,0,0.12);

  /* ============================================================
     MOTION
     ============================================================ */
  --seed-duration-short: 150ms;
  --seed-duration-medium: 250ms;
  --seed-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* ============================================================
     LAYOUT — shell-level dimensions
     ============================================================ */
  --seed-app-bar-height:     56px;
  --seed-bottom-cta-height:  88px;   /* button (56) + vertical padding (32) */
}

/* ============================================================
   DARK MODE (SEED dark tokens)
   Activate with <html data-theme="dark"> or media query
   ============================================================ */
[data-theme="dark"] {
  --seed-bg-layer-default:        #16161A;
  --seed-bg-layer-basement:       #0F0F12;
  --seed-bg-layer-floor:          #1F1F23;

  --seed-fg-neutral:              #F6F6F7;
  --seed-fg-neutral-muted:        #C2C2C7;
  --seed-fg-neutral-subtle:       #8E8E93;
  --seed-fg-neutral-subtlest:     #5E5E63;

  --seed-stroke-neutral:          #2C2C30;
  --seed-stroke-neutral-muted:    #1F1F23;

  /* Brand: keep blue solid, brighten fg-brand for dark mode contrast */
  --seed-bg-brand-solid:          #1E40AF;
  --seed-bg-brand-solid-pressed:  #1E3A8A;
  --seed-fg-brand:                #6592FF;
  --seed-fg-brand-contrast:       #FFFFFF;
  --ek-accent-red:                #FF6B72;
  --ek-accent-red-pressed:        #E63946;

  --seed-fg-critical:             #FF6B72;
  --seed-fg-positive:             #4ADE80;
  --seed-fg-warning:              #FBBF24;
  --seed-fg-informative:          #60A5FA;
}

/* ============================================================
   BASE RESET
   ============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  font-family: var(--seed-font-sans);
  font-size: var(--seed-body-l-size);
  line-height: var(--seed-body-l-leading);
  color: var(--seed-fg-neutral);
  background: var(--seed-bg-layer-default);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--seed-fg-brand); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============================================================
   COMPONENT PRIMITIVES (SEED core components)
   ============================================================ */

/* === App shell === */
.app {
  min-height: 100vh;
  display: flex; flex-direction: column;
  max-width: 480px;
  margin: 0 auto;
  background: var(--seed-bg-layer-default);
}

/* === AppBar === */
.app-bar {
  position: sticky; top: 0; z-index: 10;
  height: var(--seed-app-bar-height);
  display: flex; align-items: center;
  padding: 0 var(--seed-space-4);
  background: var(--seed-bg-layer-default);
}
.app-bar__back {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--seed-radius-full);
  background: transparent; border: none; cursor: pointer;
  color: var(--seed-fg-neutral);
  margin-left: -8px;
  transition: background var(--seed-duration-short) var(--seed-easing-standard);
}
.app-bar__back:hover { background: var(--seed-bg-layer-basement); }
.app-bar__back svg { width: 24px; height: 24px; }

/* === Progress bar (top of screen) === */
.progress {
  height: 4px;
  background: var(--seed-stroke-neutral-muted);
  overflow: hidden;
}
.progress__fill {
  height: 100%;
  background: var(--seed-fg-neutral);
  transition: width var(--seed-duration-medium) var(--seed-easing-standard);
}

/* === Content === */
.content {
  flex: 1;
  padding: var(--seed-space-8) var(--seed-space-5)
           calc(var(--seed-bottom-cta-height) + var(--seed-space-4));
}

/* === Full-screen state (loading, success, error)
   Centered hero + bottom CTA pattern. Vertically centers within the
   *visible* area by accounting for the fixed BottomCTA. */
.full-state {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: var(--seed-space-8) var(--seed-space-5);
  padding-bottom: calc(var(--seed-space-8) + var(--seed-bottom-cta-height));
  text-align: center;
}
.full-state h2 {
  font-size: var(--seed-title-1-size);
  line-height: var(--seed-title-1-leading);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: var(--seed-space-4) 0 var(--seed-space-2);
  color: var(--seed-fg-neutral);
}
.full-state p {
  font-size: var(--seed-body-m-size);
  line-height: var(--seed-body-m-leading);
  color: var(--seed-fg-neutral-muted);
}

/* === Typography classes === */
.seed-display-1 { font-size: var(--seed-display-1-size); line-height: var(--seed-display-1-leading); font-weight: 700; letter-spacing: -0.02em; }
.seed-display-2 { font-size: var(--seed-display-2-size); line-height: var(--seed-display-2-leading); font-weight: 700; letter-spacing: -0.02em; }
.seed-title-1   { font-size: var(--seed-title-1-size);   line-height: var(--seed-title-1-leading);   font-weight: 700; letter-spacing: -0.02em; }
.seed-title-2   { font-size: var(--seed-title-2-size);   line-height: var(--seed-title-2-leading);   font-weight: 700; letter-spacing: -0.01em; }
.seed-title-3   { font-size: var(--seed-title-3-size);   line-height: var(--seed-title-3-leading);   font-weight: 700; }
.seed-title-4   { font-size: var(--seed-title-4-size);   line-height: var(--seed-title-4-leading);   font-weight: 600; }
.seed-body-l    { font-size: var(--seed-body-l-size);    line-height: var(--seed-body-l-leading);    font-weight: 400; }
.seed-body-m    { font-size: var(--seed-body-m-size);    line-height: var(--seed-body-m-leading);    font-weight: 400; }
.seed-body-s    { font-size: var(--seed-body-s-size);    line-height: var(--seed-body-s-leading);    font-weight: 400; }
.seed-label-l   { font-size: var(--seed-label-l-size);   line-height: var(--seed-label-l-leading);   font-weight: 600; }
.seed-label-m   { font-size: var(--seed-label-m-size);   line-height: var(--seed-label-m-leading);   font-weight: 600; }
.seed-label-s   { font-size: var(--seed-label-s-size);   line-height: var(--seed-label-s-leading);   font-weight: 600; }
.seed-caption   { font-size: var(--seed-caption-size);   line-height: var(--seed-caption-leading);   font-weight: 400; }
.fg-muted    { color: var(--seed-fg-neutral-muted); }
.fg-subtle   { color: var(--seed-fg-neutral-subtle); }
.fg-subtlest { color: var(--seed-fg-neutral-subtlest); }

/* === Form controls === */
.seed-input,
input[type=text].seed-input,
input[type=email].seed-input,
input[type=password].seed-input,
textarea.seed-input {
  width: 100%;
  font-family: var(--seed-font-sans);
  font-size: var(--seed-body-l-size);
  line-height: var(--seed-body-l-leading);
  color: var(--seed-fg-neutral);
  background: var(--seed-bg-layer-default);
  border: 1px solid var(--seed-stroke-neutral);
  border-radius: var(--seed-radius-3);
  padding: 14px var(--seed-space-4);
  outline: none;
  transition: border-color var(--seed-duration-short) var(--seed-easing-standard);
}
.seed-input::placeholder { color: var(--seed-fg-neutral-subtlest); }
.seed-input:focus { border-color: var(--seed-fg-neutral); }
textarea.seed-input { resize: vertical; min-height: 112px; }

/* === Password input (with show/hide toggle) === */
.password-input {
  position: relative;
}
.password-input .seed-input {
  padding-right: 48px; /* leave room for the toggle */
}
.password-toggle {
  position: absolute;
  top: 50%; right: 4px;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--seed-radius-3);
  cursor: pointer;
  color: var(--seed-fg-neutral-subtle);
  transition: color var(--seed-duration-short) var(--seed-easing-standard),
              background var(--seed-duration-short) var(--seed-easing-standard);
}
.password-toggle:hover {
  color: var(--seed-fg-neutral);
  background: var(--seed-bg-layer-basement);
}
.password-toggle svg { width: 20px; height: 20px; }
/* When visible, show the "eye-off"; when hidden, show the "eye" */
.password-toggle .eye-off { display: none; }
.password-input.is-visible .password-toggle .eye-off { display: block; }
.password-input.is-visible .password-toggle .eye { display: none; }

/* === Buttons === */
.btn-primary, .btn-secondary, .btn-tertiary, .btn-outline {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--seed-space-2);
  height: 56px;
  padding: 0 var(--seed-space-5);
  font-family: var(--seed-font-sans);
  font-size: var(--seed-label-l-size);
  line-height: 1;
  font-weight: 700;
  border-radius: var(--seed-radius-4);
  border: none;
  cursor: pointer;
  transition: background var(--seed-duration-short) var(--seed-easing-standard),
              color var(--seed-duration-short) var(--seed-easing-standard);
}
.btn-primary {
  color: var(--seed-fg-brand-contrast);
  background: var(--seed-bg-brand-solid);
}
.btn-primary:hover:not(:disabled) { background: var(--seed-bg-brand-solid-pressed); }
.btn-primary:disabled {
  background: var(--seed-stroke-neutral);
  color: var(--seed-fg-neutral-subtle);
  cursor: not-allowed;
}
.btn-secondary {
  color: var(--seed-fg-neutral-muted);
  background: var(--seed-bg-layer-basement);
}
.btn-secondary:hover:not(:disabled) { background: var(--seed-stroke-neutral-muted); }
.btn-tertiary {
  color: var(--seed-fg-neutral);
  background: transparent;
}
.btn-tertiary:hover:not(:disabled) { background: var(--seed-bg-layer-basement); }

/* Button size variants */
.btn-size-medium { height: 48px; font-size: var(--seed-label-m-size); }
.btn-size-small  { height: 40px; font-size: var(--seed-label-s-size); padding: 0 var(--seed-space-4); }

/* Full-width helper */
.btn-block { width: 100%; }

/* === BottomCTA (SEED signature pattern) === */
.bottom-cta {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  max-width: 480px;
  padding: var(--seed-space-3) var(--seed-space-5) calc(var(--seed-space-5) + env(safe-area-inset-bottom, 0));
  background: var(--seed-bg-layer-default);
  display: flex; gap: var(--seed-space-3);
  z-index: 20;
}
.bottom-cta .btn-primary,
.bottom-cta .btn-secondary {
  flex: 1;
}

/* === Spinner === */
.seed-spinner {
  display: inline-block;
  width: 28px; height: 28px;
  border: 3px solid var(--seed-stroke-neutral);
  border-top-color: var(--seed-fg-neutral);
  border-radius: 50%;
  animation: seed-spin 0.8s linear infinite;
  flex-shrink: 0;
}
.seed-spinner-small { width: 16px; height: 16px; border-width: 2px; }
@keyframes seed-spin { to { transform: rotate(360deg); } }

/* When a spinner lives inside any button, inherit the button's text color
   so it adapts to active/disabled/secondary states automatically.
   Ring = 30% mix of currentColor; head = full currentColor. */
.btn-primary .seed-spinner,
.btn-secondary .seed-spinner,
.btn-tertiary .seed-spinner {
  border-color: color-mix(in srgb, currentColor 30%, transparent);
  border-top-color: currentColor;
}