/* 홈·문의 두 페이지가 글자 하나까지 똑같이 쓰던 규칙만 모았다.
   리셋 · 헤더/네비 · 테마 버튼 · 라벨 · 푸터 · 모션 감속.
   색 토큰(:root)은 페이지마다 값이 달라서 여기 없다 — 각자 자기 파일에 있다.
   반드시 페이지 CSS보다 먼저 읽혀야 한다. 뒤에 오면 페이지 고유 규칙을 덮는다. */
  * { box-sizing:border-box; margin:0; padding:0; }
  body { font-family:var(--font); background:var(--bg); color:var(--ink); line-height:1.55; -webkit-font-smoothing:antialiased; letter-spacing:-.02em; word-break:keep-all; overflow-x:hidden; }
  a { color:inherit; text-decoration:none; }
  :focus-visible { outline:1px solid var(--brand); outline-offset:4px; }
  .wrap { width:100%; margin:0 auto; padding:0 var(--gut); }
  .nav { display:flex; align-items:center; justify-content:space-between; height:78px; padding:0 clamp(22px,5vw,64px); }
  .logo { display:flex; align-items:baseline; gap:9px; font-weight:800; font-size:17px; letter-spacing:.02em; }
  .logo i { font-style:normal; color:var(--brand); }
  .logo small { font-weight:600; font-size:10px; letter-spacing:.14em; color:var(--muted); text-transform:uppercase; }
  .nav-r { display:flex; align-items:center; gap:8px; }
  .cta-s { font-size:13px; font-weight:700; letter-spacing:-.01em; padding:10px 18px; border:1px solid var(--ink); border-radius:999px; transition:background .2s, color .2s; }
  .cta-s:hover { background:var(--ink); color:var(--bg); }
  .tbtn { width:38px; height:38px; border:none; background:none; cursor:pointer; display:grid; place-items:center; color:var(--muted); transition:color .2s; }
  .tbtn:hover { color:var(--ink); }
  .tbtn svg { width:19px; height:19px; }
  .tbtn .sun { display:none; }
 .tbtn .moon { display:block; }
  @media (prefers-color-scheme: dark){ .tbtn .sun { display:block; } .tbtn .moon { display:none; } }
  :root[data-theme="light"] .tbtn .sun { display:none; }
 :root[data-theme="light"] .tbtn .moon { display:block; }
  :root[data-theme="dark"] .tbtn .sun { display:block; }
 :root[data-theme="dark"] .tbtn .moon { display:none; }
  .lbl { font-size:11px; font-weight:800; letter-spacing:.26em; color:var(--muted); text-transform:uppercase; margin-bottom:clamp(18px,3vh,34px); }
  .br { color:var(--brand); }
  footer { padding:34px 0 40px; border-top:1px solid var(--line); }
  .fr { display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:11.5px; color:var(--muted); }
  /* 여기서는 모션이 곧 디자인이다. 끄면 엔진이 html.fx를 안 붙여
     위의 평범한 쌓인 레이아웃으로 돌아간다 — 되돌릴 게 없고 배경 애니메이션만 멈추면 된다. */
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{ animation:none !important; transition:none !important; }
  }