/* ═══════════════════════════════════════════════
   가게사랑 (LOVESTORE.KR) — 공용 디자인 토큰
   위시웍스 WW-44 토큰 체계 계승
   ═══════════════════════════════════════════════ */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.css');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap');

:root{
  /* 색 — WW-44 계열 */
  --ink:#191d23;          /* 청록 도는 차콜 */
  --ink-2:#232a32;
  --steel:#5b6b7a;
  --steel-2:#8a97a3;
  --orange:#e0512a;       /* 산업 오렌지 — 부족·경고 */
  --teal:#17796a;         /* 딥 틸그린 — 확정·안전·승인 */
  --teal-lite:#e6f0ee;
  --off:#f3f4f1;          /* 오프화이트 */
  --white:#ffffff;
  --line:#e2e4df;
  --line-2:#d3d6d0;

  /* 타이포 */
  --font:'Pretendard Variable', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:'Space Grotesk', ui-monospace, monospace;

  /* 형태 */
  --r:4px;
  --r-lg:8px;
  --sh:0 1px 2px rgba(25,29,35,.05), 0 8px 24px -14px rgba(25,29,35,.35);
  --sh-up:0 -2px 14px -6px rgba(25,29,35,.22);

  --navh:60px;
  --botnav:62px;
}

*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  font-family:var(--font); background:var(--off); color:var(--ink);
  line-height:1.55; -webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--botnav) + env(safe-area-inset-bottom));
}
@media(min-width:861px){ body{padding-bottom:0} }

/* 상단 2px 신호선 */
.signal-line{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:200;
  background:linear-gradient(90deg, var(--orange) 0 32%, var(--teal) 32% 100%);
}

.wrap{max-width:1060px; margin:0 auto; padding:0 16px}
@media(min-width:721px){ .wrap{padding:0 24px} }

/* 타이포 스케일 — Pretendard 900 크고 타이트하게 */
.t-hero{font-weight:900; font-size:clamp(30px,8vw,46px); line-height:1.02; letter-spacing:-.042em}
.t-sec{font-weight:900; font-size:clamp(21px,4.4vw,30px); line-height:1.14; letter-spacing:-.035em}
.t-card{font-weight:800; font-size:16px; letter-spacing:-.028em; line-height:1.28}
.t-lab{font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--steel-2)}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1}
.muted{color:var(--steel)}
.o{color:var(--orange)}
.g{color:var(--teal)}

/* 버튼 */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:44px; padding:0 18px; border:none; border-radius:var(--r);
  font-family:var(--font); font-size:14px; font-weight:700; letter-spacing:-.02em;
  cursor:pointer; text-decoration:none; transition:background .15s ease, color .15s ease;
}
.btn-ink{background:var(--ink); color:var(--off)}
.btn-ink:hover{background:#0f1318}
.btn-teal{background:var(--teal); color:#fff}
.btn-teal:hover{background:#12655a}
.btn-orange{background:var(--orange); color:#fff}
.btn-orange:hover{background:#c94520}
.btn-line{background:transparent; color:var(--ink); border:1px solid var(--line-2)}
.btn-line:hover{background:var(--white)}
.btn-block{width:100%}
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid var(--teal); outline-offset:2px;
}

/* 칩 */
.chip{
  display:inline-flex; align-items:center; min-height:38px; padding:0 14px;
  border:1px solid var(--line-2); background:var(--white); border-radius:100px;
  font-size:13px; font-weight:600; letter-spacing:-.02em; color:var(--ink);
  cursor:pointer; white-space:nowrap; transition:all .15s ease;
}
.chip:hover{border-color:var(--steel-2)}
.chip[aria-pressed=true]{background:var(--ink); border-color:var(--ink); color:var(--off)}
.chip.sm{min-height:34px; padding:0 12px; font-size:12.5px}

/* 카드 */
.card{background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh)}
.sec{padding:36px 0; border-top:1px solid var(--line)}
.sec.dark{background:var(--ink); color:var(--off); border-top:none}
.sec.dark .t-sec{color:var(--off)}
.sec.dark .muted{color:var(--steel-2)}
.sec.dark .t-lab{color:#6b7a87}
.sec.dark .card{background:var(--ink-2); border-color:#2f3841}
@media(min-width:721px){ .sec{padding:56px 0} }

/* 하단 고정 네비 (모바일) */
.botnav{
  position:fixed; left:0; right:0; bottom:0; z-index:150; display:flex;
  background:var(--white); border-top:1px solid var(--line); box-shadow:var(--sh-up);
  padding-bottom:env(safe-area-inset-bottom);
}
.botnav a{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; height:var(--botnav); text-decoration:none; color:var(--steel);
  font-size:10.5px; font-weight:600; letter-spacing:-.02em;
}
.botnav a svg{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8}
.botnav a.on{color:var(--ink)}
.botnav a.on svg{stroke:var(--orange)}
@media(min-width:861px){ .botnav{display:none} }

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
  html{scroll-behavior:auto}
}