/* ============================================================
   소소담다 공통 스타일 — css/site.css
   디자인 시스템: 클린 미니멀 화이트 + 딥그린 포인트
   (페이지 고유 스타일은 각 HTML의 <style>에 둔다)
   ============================================================ */
:root{
  --bg:        #ffffff;
  --bg-alt:    #f7f7f4;   /* 따뜻한 오프화이트 */
  --ink:       #16181d;   /* 거의 블랙 (메인 텍스트) */
  --ink-soft:  #6b6f76;   /* 보조 텍스트 */
  --line:      #e7e7e2;   /* 구분선 */
  --accent:    #1f6f5c;   /* 딥 그린 — '담다'의 정성·신뢰 (절제 사용) */
  --accent-soft:#eaf3f0;
  --shadow:    0 1px 2px rgba(20,24,29,.04), 0 8px 30px rgba(20,24,29,.05);

  --max:       1140px;
  --gap:       clamp(72px, 11vw, 140px); /* 섹션 수직 여백 */
  --r:         18px;
  --ease:      cubic-bezier(.22,.61,.36,1);

  --sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
          "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  line-height:1.7;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
::selection{ background:var(--accent); color:#fff; }

.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:24px; }

/* 섹션 라벨 (eyebrow) */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12px; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--accent);
  margin-bottom:22px;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--accent); opacity:.55; }

h1,h2,h3{ letter-spacing:-.025em; line-height:1.18; font-weight:700; }
.display{ font-size:clamp(34px, 6vw, 66px); }
.page-title{ font-size:clamp(30px, 4.6vw, 52px); }
.section-title{ font-size:clamp(27px, 3.8vw, 42px); font-weight:700; }
.lead{ font-size:clamp(16px, 1.5vw, 19px); color:var(--ink-soft); line-height:1.75; }

/* ── 네비게이션 ─────────────────────────────── */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:72px; display:flex; align-items:center;
  transition:background .35s var(--ease), box-shadow .35s var(--ease), height .35s var(--ease);
}
.nav.scrolled{
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  box-shadow:0 1px 0 var(--line);
  height:62px;
}
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; }
.brand{ display:flex; align-items:center; gap:11px; font-weight:700; font-size:19px; letter-spacing:-.03em; }
.brand .mark{
  width:30px; height:30px; border-radius:9px; flex:none;
  background:linear-gradient(135deg, var(--accent), #2fa185);
  position:relative; box-shadow:0 4px 12px rgba(31,111,92,.28);
}
.brand .mark::after{
  content:""; position:absolute; inset:8px; border-radius:50%;
  border:2px solid rgba(255,255,255,.9);
  border-right-color:transparent; border-bottom-color:transparent;
  transform:rotate(45deg);
}
.brand small{ font-weight:500; color:var(--ink-soft); font-size:11px; letter-spacing:.18em; display:block; margin-top:-3px; }

.menu{ display:flex; align-items:center; gap:30px; }
.menu a{ font-size:15px; font-weight:500; color:var(--ink-soft); transition:color .2s; }
.menu a:hover{ color:var(--ink); }
.menu a.on{ color:var(--ink); font-weight:600; }
.nav-cta{
  padding:10px 20px; border-radius:100px; background:var(--ink); color:#fff !important;
  font-size:14px; font-weight:600; transition:transform .2s var(--ease), background .2s;
}
.nav-cta:hover{ transform:translateY(-1px); background:var(--accent); }

.burger{ display:none; width:42px; height:42px; border:none; background:none; cursor:pointer; position:relative; }
.burger span{ position:absolute; left:9px; right:9px; height:2px; background:var(--ink); border-radius:2px; transition:.3s var(--ease); }
.burger span:nth-child(1){ top:15px; } .burger span:nth-child(2){ top:21px; } .burger span:nth-child(3){ top:27px; }
body.menu-open .burger span:nth-child(1){ top:21px; transform:rotate(45deg); }
body.menu-open .burger span:nth-child(2){ opacity:0; }
body.menu-open .burger span:nth-child(3){ top:21px; transform:rotate(-45deg); }

/* ── 버튼 ───────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:9px; padding:15px 28px; border-radius:100px;
  font-size:15.5px; font-weight:600; cursor:pointer; border:1px solid transparent;
  transition:transform .2s var(--ease), background .25s, box-shadow .25s, border-color .25s;
}
.btn .arr{ transition:transform .25s var(--ease); }
.btn:hover .arr{ transform:translateX(4px); }
.btn-primary{ background:var(--accent); color:#fff; box-shadow:0 8px 24px rgba(31,111,92,.26); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(31,111,92,.32); }
.btn-ghost{ background:#fff; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ transform:translateY(-2px); border-color:var(--ink); }
.btn-light{ background:#fff; color:var(--ink); }
.btn-light:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,.25); }
.btn-outline{ background:transparent; color:#fff; border-color:rgba(255,255,255,.3); }
.btn-outline:hover{ border-color:#fff; transform:translateY(-2px); }

/* ── 공통 섹션 ──────────────────────────────── */
section{ position:relative; }
.section-pad{ padding-block:var(--gap); }
.bg-alt{ background:var(--bg-alt); }
.section-head{ max-width:720px; margin-bottom:56px; }
.section-head .lead{ margin-top:18px; }

/* 서브페이지 상단 헤더 */
.page-hero{ padding:158px 0 14px; }
.page-hero .lead{ margin-top:16px; max-width:54ch; }

/* ── 스크롤 등장 애니메이션 ──────────────────── */
/* JS가 로드됐을 때만 숨긴다 — 스크립트가 실패하면 콘텐츠는 그냥 보인다(견고성) */
html.js .reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
html.js .reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; } .reveal.d3{ transition-delay:.24s; }
@media (prefers-reduced-motion:reduce){ html.js .reveal{ opacity:1 !important; transform:none !important; transition:none; } html{ scroll-behavior:auto; } }

/* ── FOOTER ─────────────────────────────────── */
footer{ padding:48px 0 56px; border-top:1px solid var(--line); }
footer .wrap{ display:flex; flex-wrap:wrap; gap:22px; align-items:center; justify-content:space-between; }
footer .f-brand{ display:flex; align-items:center; gap:11px; font-weight:700; font-size:17px; }
footer .f-brand .mark{ width:26px; height:26px; border-radius:8px; background:linear-gradient(135deg,var(--accent),#2fa185); }
footer .f-links{ display:flex; gap:26px; flex-wrap:wrap; }
footer .f-links a{ font-size:14px; color:var(--ink-soft); transition:color .2s; }
footer .f-links a:hover{ color:var(--ink); }
footer .copy{ width:100%; font-size:13px; color:var(--ink-soft); padding-top:8px; }

/* ── 반응형 (공통: 모바일 메뉴) ──────────────── */
@media (max-width:760px){
  .menu{
    position:fixed; inset:62px 0 auto 0; flex-direction:column; gap:0; align-items:stretch;
    background:rgba(255,255,255,.97); backdrop-filter:blur(14px); border-bottom:1px solid var(--line);
    padding:8px 0 16px; transform:translateY(-12px); opacity:0; pointer-events:none; transition:.3s var(--ease);
  }
  body.menu-open .menu{ transform:none; opacity:1; pointer-events:auto; }
  .menu a{ padding:14px 28px; font-size:16px; }
  .nav-cta{ margin:8px 28px 0; text-align:center; }
  .burger{ display:block; }
}