/* ════════════════════════════════════════════════════════════════
   LuxSystem 디자인 시스템 v1 — 405.kr 공통 적용
   기준: docs/LUXSYSTEM-DESIGN.md  (틸 + 웜그레이, 제목 Gmarket, Lucide)
   모든 페이지가 </head> 직전에 이 파일을 link → 마지막 로드(우선순위 확보).
   ════════════════════════════════════════════════════════════════ */

/* ── 제목 폰트: Gmarket Sans (히어로/섹션 제목/큰 숫자) ── */
@font-face{font-family:'GmarketSans';font-weight:500;font-display:swap;
  src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');}
@font-face{font-family:'GmarketSans';font-weight:700;font-display:swap;
  src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');}
@font-face{font-family:'GmarketSans';font-weight:800;font-display:swap;
  src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');}

:root{
  --lux-accent:#0E8A7E; --lux-accent-hover:#0B6F66; --lux-accent-soft:#E4F4F1;
  --lux-accent-bright:#13A597; --lux-sale:#E0612F; --lux-ink:#1F1E1C;
}

/* 제목 = Gmarket Sans. 본문/UI 는 각 페이지 Pretendard 유지. */
h1, h2, .h2, .hero h1, .phead h1, .band h2, .lc-hero,
.stat .v, .price-big, .logo, header b, header a.ttl{
  font-family:'GmarketSans','Pretendard','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  letter-spacing:-.015em;
}

/* ── 컴포넌트 라운드 (MD §3): 버튼·입력 8 / 카드 12 / pill 999 ── */
.btn, button.btn, .topnav a, input:not([type=checkbox]):not([type=radio]),
textarea, select, .lux-input{ border-radius:8px; }
.card, .tool, .box, .form, .pricebox, .qa, .cap, .step, .gstep .note,
.note, .stat .box{ border-radius:12px; }
.tag, .pill, .kick, .badge, .new, .kbd{ border-radius:999px; }

/* ── 그림자 표준 (MD §3): 차분한 중성 그림자 ── */
.card, .tool, .box, .form, .pricebox{ box-shadow:0 1px 2px rgba(26,25,23,.06), 0 1px 1px rgba(26,25,23,.04); }
.card:hover, .tool:hover{ box-shadow:0 4px 14px rgba(26,25,23,.10); }

/* ── Lucide 아이콘 (이모지 대체). 기본 1.1em, 카드 .ic 는 크게. ── */
[data-lucide]{ width:1.1em; height:1.1em; stroke-width:1.75; vertical-align:-.15em; display:inline-block; }
.ic [data-lucide], .tool .ic [data-lucide], .card .ic [data-lucide]{ width:26px; height:26px; vertical-align:middle; }
.cap .ic [data-lucide]{ width:24px; height:24px; }

/* ── 포커스 링 = 틸 (접근성) ── */
:focus-visible{ outline:2px solid var(--lux-accent); outline-offset:2px; border-radius:4px; }

/* ── 한글 가독성 ── */
body{ word-break:keep-all; }

/* ════════════════════════════════════════════════════════════════
   다크 모드 — 야간모드 자동 감지(prefers-color-scheme) + 수동 토글(theme.js)
   마케팅 페이지(라이트)에만 적용. 도구 페이지는 자체 다크 고정.
   MD §1.x 다크 색. 마케팅 :root 변수 합집합을 다크로 오버라이드.
   ════════════════════════════════════════════════════════════════ */
html[data-theme="dark"]{
  --accent:#3FC2B2; --accent-ink:#5AD3C4; --accent2:#5AD3C4;
  --grad:linear-gradient(125deg,#3FC2B2 0%,#0E8A7E 100%);
  --ink:#F3F1ED; --body:#C9C4BB; --sub:#A9A49B; --muted:#C9C4BB;
  --line:#33302B; --bg:#121110; --card:#1C1B19; --soft:#26241F; --key:#26241F;
  --lux-accent:#3FC2B2; --lux-accent-soft:#0E3D38; --lux-ink:#F3F1ED;
}
/* 인라인 <style> 의 하드코딩 흰/쿨 배경·글자를 다크로 보정 */
html[data-theme="dark"] body{ background:#121110 !important; color:#F3F1ED; }
html[data-theme="dark"] .card, html[data-theme="dark"] .box,
html[data-theme="dark"] .form, html[data-theme="dark"] .pricebox,
html[data-theme="dark"] .qa, html[data-theme="dark"] .cap,
html[data-theme="dark"] .step{ background:#1C1B19 !important; border-color:#33302B !important; }
html[data-theme="dark"] .display{ background:#26241F !important; }
html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] p, html[data-theme="dark"] li,
html[data-theme="dark"] td, html[data-theme="dark"] th{ color:#E7E4DE; }
html[data-theme="dark"] th{ background:#26241F !important; }
html[data-theme="dark"] td, html[data-theme="dark"] th{ border-color:#33302B !important; }
html[data-theme="dark"] .form input, html[data-theme="dark"] .form textarea,
html[data-theme="dark"] input:not([type=checkbox]):not([type=radio]),
html[data-theme="dark"] textarea, html[data-theme="dark"] select{
  background:#26241F !important; color:#F3F1ED; border-color:#45413C !important;
}
html[data-theme="dark"] .form input::placeholder,
html[data-theme="dark"] .display .ph{ color:#7C776E; }
html[data-theme="dark"] .btn.ghost{ background:transparent; }
/* index 안심박스(amber 틴트)·대체 카드 다크 보정 */
html[data-theme="dark"] .safe{ background:#2A2418 !important; color:#E8D9B8 !important; border-color:#5C4A28 !important; }
html[data-theme="dark"] .safe b{ color:#F0D9A0 !important; }
html[data-theme="dark"] .alt{ background:#1C1B19 !important; border-color:#33302B !important; }
html[data-theme="dark"] .alt .as{ color:#A9A49B; }
html[data-theme="dark"] .btn2{ background:#26241F !important; border-color:#45413C !important; color:#5AD3C4; }
/* note·tag 등 옅은 틴트 박스 다크 */
html[data-theme="dark"] .note{ background:#26241F !important; border-color:#33302B !important; color:#C9C4BB; }
html[data-theme="dark"] .key.fn{ background:#16302C !important; color:#5AD3C4; }
html[data-theme="dark"] .display .num{ color:#F3F1ED; }
/* 상단 메뉴 칩(.topnav) 다크 보정 — 라이트의 흰 배경이 다크에서 그대로 남던 문제 */
html[data-theme="dark"] .topnav a{ background:#26241F !important; color:#E7E4DE !important; border-color:#45413C !important; }
html[data-theme="dark"] .topnav a:hover{ border-color:#3FC2B2 !important; color:#5AD3C4 !important; }
html[data-theme="dark"] .topnav a.cta{ background:#0E8A7E !important; color:#fff !important; border-color:#0E8A7E !important; }
html[data-theme="dark"] .topnav a.cta:hover{ background:#13A597 !important; }
#themeToggle{ color:inherit; }

/* ── 마케팅 페이지(홈·도입문의·get·signup) 다크모드 대비 보정 — 라이트 하드코딩 배경/색이 다크에서 안 바뀌던 문제 ── */
html[data-theme="dark"] header{ background:rgba(18,17,16,.9) !important; }
html[data-theme="dark"] .hero .kicker{ background:rgba(63,194,178,.16) !important; color:#5AD3C4 !important; }
html[data-theme="dark"] .goc{ background:rgba(70,192,136,.2) !important; color:#9fe6bd !important; border-color:rgba(70,192,136,.45) !important; }
html[data-theme="dark"] .kick{ color:#fff !important; }
html[data-theme="dark"] .band .btn{ color:#0B6F66 !important; }
html[data-theme="dark"] footer b{ color:#A9A49B !important; }
html[data-theme="dark"] .new{ color:#0B1F1C !important; }