/* ═══════════════════════════════════════════════
   shared.css — Korea Survival Design System
   Matches Malggu Framer design: Inter + Orange accent
   ═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;0,14..32,800;0,14..32,900;1,14..32,400&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Backgrounds ── */
  --bg:       #08080f;
  --bg2:      #0d0d18;
  --surface:  #0f0f1c;
  --card:     #121220;
  --card2:    #16162a;

  /* ── Borders ── */
  --border:   rgba(255,255,255,.06);
  --border2:  rgba(255,255,255,.11);

  /* ── Brand: Orange (Primary Accent) ── */
  --orange:       #ff6b35;
  --orange-light: #ff8c5a;
  --orange-dim:   rgba(255,107,53,.14);
  --orange-glow:  0 0 28px rgba(255,107,53,.35);

  /* ── Secondary palette ── */
  --navy:     #1e3a8a;
  --pink:     #f472b6;
  --blue:     #3b82f6;
  --yellow:   #facc15;
  --green:    #4ade80;
  --red:      #f87171;

  /* ── Neutral ── */
  --white:    #ffffff;
  --w80:      rgba(255,255,255,.80);
  --w72:      rgba(255,255,255,.72);
  --w56:      rgba(255,255,255,.56);
  --w48:      rgba(255,255,255,.48);
  --w12:      rgba(255,255,255,.12);
  --w08:      rgba(255,255,255,.08);
  --w04:      rgba(255,255,255,.04);
  --text:     #f2f2f8;
  --text2:    rgba(255,255,255,.72);
  --muted:    rgba(255,255,255,.40);
  --muted2:   rgba(255,255,255,.24);

  /* ── Typography ── */
  --font:      'Inter', 'Apple SD Gothic Neo', sans-serif;
  --font-mono: 'Menlo', 'Consolas', monospace;

  /* Sizes (Framer system) */
  --h1-special: 160px;
  --h1: 78px; --h2: 48px; --h3: 40px;
  --h4: 36px; --h5: 28px; --h6: 22px;
  --b1: 18px; --b2: 16px; --b3: 14px;
  --btn1: 16px; --btn2: 14px;
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 2px; }

/* ══════════════════════════════════════════════
   BUTTONS — matches Framer Primary_Button style
   ══════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font); font-size: var(--btn1); font-weight: 600;
  padding: 14px 28px; border-radius: 100px;  /* pill shape */
  border: none; cursor: pointer; text-decoration: none;
  transition: all .22s cubic-bezier(.4,0,.2,1);
  white-space: nowrap; letter-spacing: -.01em;
  position: relative; overflow: hidden;
}

/* Primary — orange fill with glow */
.btn-primary {
  background: var(--orange);
  color: #000;
  box-shadow: var(--orange-glow), inset 0 1px 0 rgba(255,255,255,.2);
}
.btn-primary:hover {
  background: var(--orange-light);
  box-shadow: 0 0 40px rgba(255,107,53,.5), inset 0 1px 0 rgba(255,255,255,.25);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }

/* Secondary — white outline (Hover state in Framer) */
.btn-secondary {
  background: var(--white);
  color: #000;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08);
}
.btn-secondary:hover { background: var(--w80); transform: translateY(-1px); }

/* Ghost — transparent */
.btn-ghost {
  background: var(--w08); color: var(--text2);
  border: 1px solid var(--border2);
}
.btn-ghost:hover { background: var(--w12); border-color: var(--border2); color: var(--white); }

/* Sizes */
.btn-lg { font-size: 18px; padding: 17px 36px; }
.btn-sm { font-size: 13px; padding: 9px 20px; }
.btn-xs { font-size: 11px; padding: 6px 14px; border-radius: 100px; }

/* Loading spinner */
.btn-loading { pointer-events: none; }
.btn-loading::after {
  content: ''; width: 16px; height: 16px;
  border: 2px solid rgba(0,0,0,.2); border-top-color: #000;
  border-radius: 50%; animation: btn-spin .7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════
   BADGES / TAGS
   ══════════════════════════════════════════════ */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; padding: 4px 12px;
  border-radius: 100px; letter-spacing: .04em;
}
.badge-orange { background: var(--orange-dim); color: var(--orange);  border: 1px solid rgba(255,107,53,.25); }
.badge-white  { background: var(--w08);        color: var(--text2);   border: 1px solid var(--border2); }
.badge-red    { background: rgba(248,113,113,.12); color: var(--red); border: 1px solid rgba(248,113,113,.22); }
.badge-green  { background: rgba(74,222,128,.10);  color: var(--green);border: 1px solid rgba(74,222,128,.22); }
.badge-blue   { background: rgba(59,130,246,.10);  color: var(--blue); border: 1px solid rgba(59,130,246,.22); }
.badge-pink   { background: rgba(244,114,182,.10); color: var(--pink); border: 1px solid rgba(244,114,182,.22); }

/* ══════════════════════════════════════════════
   CARDS
   ══════════════════════════════════════════════ */
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 20px; transition: all .25s;
}
.card:hover {
  border-color: rgba(255,107,53,.25);
  box-shadow: 0 12px 48px rgba(255,107,53,.08);
}

/* ══════════════════════════════════════════════
   INPUTS
   ══════════════════════════════════════════════ */
.input {
  background: var(--w04); border: 1px solid var(--border);
  border-radius: 12px; color: var(--text);
  font-family: var(--font); font-size: 15px;
  padding: 12px 18px; outline: none; width: 100%;
  transition: border-color .2s, box-shadow .2s;
}
.input:focus {
  border-color: rgba(255,107,53,.45);
  box-shadow: 0 0 0 3px rgba(255,107,53,.10);
}
.input::placeholder { color: var(--muted); }

/* ══════════════════════════════════════════════
   TOGGLE
   ══════════════════════════════════════════════ */
.toggle-wrap { display: flex; align-items: center; gap: 10px; }
.toggle-wrap .label { font-size: 13px; color: var(--text2); flex: 1; }
.toggle { position: relative; width: 38px; height: 22px; flex-shrink: 0; }
.toggle input { display: none; }
.toggle-track {
  position: absolute; inset: 0; background: var(--w08);
  border-radius: 11px; cursor: pointer;
  border: 1px solid var(--border); transition: .22s;
}
.toggle-track::after {
  content: ''; position: absolute; left: 3px; top: 3px;
  width: 16px; height: 16px; background: var(--muted);
  border-radius: 50%; transition: transform .22s, background .22s;
}
.toggle input:checked ~ .toggle-track {
  background: rgba(255,107,53,.2); border-color: rgba(255,107,53,.45);
}
.toggle input:checked ~ .toggle-track::after {
  transform: translateX(16px); background: var(--orange);
}

/* ══════════════════════════════════════════════
   ANIMATIONS
   ══════════════════════════════════════════════ */
.fade-up {
  opacity: 0; transform: translateY(22px);
  transition: opacity .55s ease, transform .55s ease;
}
.fade-up.visible { opacity: 1; transform: translateY(0); }

@keyframes float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
@keyframes spin-slow {
  to { transform: rotate(360deg); }
}
@keyframes pulse-dot {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .5; transform: scale(.85); }
}
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}