/* =====================================================================
   base.css — 전역 디자인 토큰(:root 색상·폰트 변수) · CSS 리셋 · 공통 요소(.wrap/.eyebrow/섹션 제목)
   ---------------------------------------------------------------------
   ● 이 파일은 독립적입니다. 다른 CSS보다 먼저 불러오세요.
   ● 로드 순서: base → layout → home → company → products → modal → login → responsive
   ===================================================================== */

/* ══════════ 전역 디자인 토큰 — 색상·폰트 변수. 여기 값만 바꿔도 사이트 전체 톤이 바뀝니다. ══════════ */
:root{
  --ink:#0B1620; --steel:#12314F; --steel-2:#1B4570; --slate:#5B6B7A;
  --paper:#F3F5F4; --paper-2:#FFFFFF; --line:#D9DFE3; --line-dk:#26445F;
  --signal:#FFB020; --ok:#37C99E;
  --font-body:"Pretendard",system-ui,-apple-system,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
}
html.lang-zh, html.lang-zh body{ --font-body:"Noto Sans SC",system-ui,sans-serif; }
/* ══════════ 전역 리셋 & 공통 요소 (.wrap 컨테이너 / .eyebrow 라벨 / 섹션 제목) ══════════ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);display:inline-flex;align-items:center;gap:9px}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(55,201,158,.18);flex:none}
.eyebrow.amber::before{background:var(--signal);box-shadow:0 0 0 3px rgba(255,176,32,.18)}
h2.sec-title{font-size:clamp(28px,4vw,44px);font-weight:700;letter-spacing:-.02em;line-height:1.12;margin:14px 0 0}
.sec-head{margin-bottom:44px;max-width:720px}
.sec-head p{color:var(--slate);margin-top:14px;font-size:17px}
section{padding:96px 0;border-top:1px solid var(--line)}
section:first-of-type{border-top:0}
.hbtn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.06);border-radius:8px;color:#D5DEE6;cursor:pointer;transition:background .18s,color .18s,border-color .18s}
.hbtn:hover{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.5)}
.hbtn svg{display:block}
.hbtn .ic-play{display:none}
#modal-title{font-size:26px;font-weight:800;letter-spacing:-.01em;color:var(--steel-2)}
/* 스크롤 시 은은한 페이드 인 */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}