/* base.css — 디자인 토큰 · 리셋 · 타이포그래피 · 공통 유틸 */
:root{
  --ink:#0F2233;
  --ink-70:rgba(15,34,51,.72);
  --ink-45:rgba(15,34,51,.45);
  --line:rgba(15,34,51,.10);
  --accent:#E0703C;
  --bg:#FDFCFA;
  --bg-soft:#F6F4F0;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  word-break:keep-all;
}
a{color:inherit;text-decoration:none}
img{max-width:100%}
ul{list-style:none}

/* 가로 여백은 .wrap(padding-inline), 세로 여백은 section(padding-block)이 담당 —
   shorthand padding을 쓰면 서로 덮어쓰므로 반드시 longhand를 유지할 것 */
.wrap{max-width:1040px;margin:0 auto;padding-inline:24px}
section{padding-block:96px}
.soft{background:var(--bg-soft)}

/* 섹션 헤딩 */
.kicker{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:700;letter-spacing:.14em;
  color:var(--accent);margin-bottom:20px;
}
.kicker::before{content:"";width:8px;height:8px;background:var(--accent)}
.sec-head{margin-bottom:48px}
.sec-head h2{font-size:clamp(24px,3vw,32px);font-weight:700;letter-spacing:-.015em;line-height:1.4}
.sec-head p{margin-top:12px;font-size:15.5px;color:var(--ink-70);max-width:600px}
.sec-head .more{margin-top:16px;display:inline-block;font-size:14.5px;font-weight:600;border-bottom:1px solid var(--line);transition:border-color .15s ease}
.sec-head .more:hover{border-color:var(--accent)}

/* 버튼 */
.btns{display:flex;gap:12px;flex-wrap:wrap}
.btn{
  display:inline-block;padding:13px 26px;font-size:15px;font-weight:600;
  transition:background .15s ease,border-color .15s ease;
}
.btn.primary{background:var(--ink);color:#fff}
.btn.primary:hover{background:#1d3852}
.btn.ghost{border:1px solid var(--line);color:var(--ink)}
.btn.ghost:hover{border-color:var(--ink-45)}

/* 각주 */
.fineprint{margin-top:20px;font-size:13.5px;color:var(--ink-45)}

/* 서브페이지 상단 */
.page-hero{padding-block:88px 0}
.page-hero h1{font-size:clamp(28px,4vw,40px);font-weight:700;letter-spacing:-.02em;line-height:1.35}
.page-hero p{margin-top:16px;font-size:16.5px;color:var(--ink-70);max-width:620px}

/* 모션 — 스크롤 리빌. --d는 스태거 지연(fade.js가 부여).
   숨김 상태는 html.js(인라인 스크립트가 부여)일 때만 적용 — JS가 없거나 실패해도 내용은 항상 보인다 */
.js .fade{opacity:0;transform:translateY(14px);transition:opacity .65s ease var(--d,0s),transform .65s ease var(--d,0s)}
.js .fade.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .js .fade{opacity:1;transform:none;transition:none}
}