@charset "utf-8";
/* =========================================
   DRBL | base.css (FINAL)
   - Global tokens + base reset
   - Consistent header spacing across ALL pages
   - Shared typography/layout utilities
   - "10점 마감용" polish block included
========================================= */

/* =========================
   1) Design Tokens
========================= */
:root{
  --bg:#f6f4ee;
  --text:#2b2b2b;
  --muted:rgba(0,0,0,.62);
  --line:rgba(0,0,0,.12);

  --max:1200px;
  --pad:16px;

  /* ✅ 핵심: 헤더가 fixed/absolute여도 본문 시작 간격을 전 페이지 동일 적용 */
  --headerSpace:150px; /* 필요시 140~170px 범위에서 조절 */
}

/* =========================
   2) Base Reset
========================= */
*{ box-sizing:border-box; }

html, body{ height:100%; }

body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);

  /* ✅ 전 페이지 통일: 헤더 아래 본문 시작점 */
  padding-top: var(--headerSpace);
}

a{ color:inherit; text-decoration:none; }

img{ max-width:100%; display:block; }

/* Container */
.container{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--pad);
}

/* =========================
   3) Shared Sections / Page Hero
   (서브페이지에서 공통으로 쓸 수 있는 기본 섹션 스타일)
========================= */
.page-hero{
  padding:120px 0 60px;
  background:var(--bg);
}

.page-title{
  font-size:42px;
  margin:0 0 14px;
  letter-spacing:-0.02em;
}

.page-sub{
  max-width:680px;
  color:rgba(0,0,0,.65);
  line-height:1.6;
  margin:0;
}

/* ================================
   4) DRBL 10점 마감용 CSS (KEEP)
   - NAV active 표시
   - HERO 서브카피 가독성 안정
   - CTA 버튼 줄바꿈/정렬 완성
   - Focus(접근성) + 미세 디테일
================================ */

/* NAV 링크 공통 */
.nav a,
.drawer a{
  position: relative;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

/* NAV ACTIVE (JS가 aria-current="page" 또는 .is-active를 자동 부여) */
.nav a[aria-current="page"],
.nav a.is-active{
  background: rgba(0,0,0,.06);
}

.nav a[aria-current="page"]::after,
.nav a.is-active::after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:6px;
  height:1px;
  background: rgba(0,0,0,.42);
  border-radius:999px;
  opacity:.8;
}

/* 모바일 드로어 active 표시 */
.drawer a[aria-current="page"],
.drawer a.is-active{
  background: rgba(0,0,0,.07);
  border: 1px solid rgba(0,0,0,.08);
}

/* 키보드 포커스(접근성) */
.nav a:focus-visible,
.drawer a:focus-visible,
.btn:focus-visible,
.menu-btn:focus-visible{
  outline: 2px solid rgba(0,0,0,.45);
  outline-offset: 2px;
  border-radius: 14px;
}

/* HERO 카피: 줄폭/가독성 “마감” */
.hero-copy{
  max-width: 560px;          /* 카피 덩어리 고정 → 고급스럽게 정돈 */
  text-wrap: balance;        /* 지원 브라우저에서 줄바꿈 균형 */
}

.kicker{
  opacity:.9;
  text-shadow: 0 2px 14px rgba(0,0,0,.28);
}

.sub{
  opacity:.95;
  text-shadow: 0 2px 16px rgba(0,0,0,.35); /* 배경 변화에도 안정 */
}

/* CTA: 버튼 줄바꿈 안정 + 터치 영역 */
.btn{
  white-space: nowrap;
  min-height: 44px;
}

/* 모바일에서 CTA는 “1열 정렬”로 깔끔하게 */
@media (max-width: 560px){
  .cta{
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .cta .btn{
    width: 100%;
    justify-content: center;
  }
}

/* HEADER 디테일 마감 (그림자/블러 고급스럽게)
   - header.css에서 더 강하게 설정해도 base는 안전한 수준으로만 */
.header{
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
}

/* 기존 코드 호환: is-solid / is-top 둘 다 지원 */
.header.is-solid,
.header.is-top{
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

/* HERO 이미지 렌더링 미세 개선 */
.hero-img{
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* =========================
   5) Small Responsive Tweaks
========================= */
@media (max-width:768px){
  .page-title{ font-size:34px; }
  .page-hero{ padding:96px 0 52px; }
  :root{ --headerSpace:140px; } /* 모바일은 너무 띄우면 답답해서 살짝 줄임 */
}