/* ============================================================
   청염단 사이트 공통 스타일 (base.css)
   ------------------------------------------------------------
   6개 페이지(landing·brand·evidence·ultrasound·booking·reviews)가
   함께 쓰는 부품이다. 이 파일을 고치면 6곳이 한 번에 바뀐다.

   원칙
   1. 페이지별 <style>에는 그 페이지에만 있는 것만 남긴다.
      nav·본문 기본값·제목 굵기·버튼·푸터는 여기서만 정한다.
   2. 제목은 명조(Noto Serif KR) 얇게. 굵을수록 획이 뭉개진다.
      큰 제목 400 / 작은 제목 500 / 다크 배경에서만 한 단계 올림.
   3. 다크 배경 위 요소는 부모에 class="on-dark"를 준다.

   기록: DESIGN-SYSTEM-01.md
   ============================================================ */

/* ── 1. 토큰 ───────────────────────────────────────────────── */
:root {
  /* 브랜드 — 딥 포레스트 그린 + 레드 하나 */
  --green:       #064E3B;   /* 주색 — 버튼·링크·강조 */
  --green-deep:  #143326;   /* 다크 배경 */
  --green-soft:  #2D6A4F;
  --green-mid:   #7FC4AB;   /* 테두리·다크 위 강조 */
  --green-light: #EAF5F0;   /* 연녹 배경 */
  --accent:      #C8392B;   /* 경고 — 이 사이트의 유일한 레드 */
  --accent-light:#FCEFED;

  /* 글자 */
  --text:        #1A1A18;
  --text-sub:    #56564F;
  --text-muted:  #86867E;

  /* 바탕 */
  --bg:          #FFFFFF;
  --bg-alt:      #F0F0EC;   /* 아이보리 섹션 */
  --border:      #E2E2DC;

  /* 글꼴 — assets/fonts.css 에서 직접 담아 쓴다.
     뒤에 오는 것들은 폰트가 아직 안 떴을 때 잠깐 쓰이는 대타다.
     (예전 대타였던 Noto Sans KR은 이제 불러오지 않으므로 뺐다) */
  --serif: 'Noto Serif KR', 'Batang', serif;
  --sans:  'Pretendard', system-ui, -apple-system, 'Malgun Gothic', sans-serif;
  --mono:  ui-monospace, 'SF Mono', Consolas, 'D2Coding', monospace;

  /* 모양 */
  --radius:    18px;   /* 카드 모서리. 본진 규격 18~20px */
  --radius-sm: 8px;
  --spring: cubic-bezier(.16, 1, .3, 1);

  /* 호환 별칭 — 옛 이름을 쓰는 페이지가 계속 돌아가게 한다.
     새로 쓸 때는 위의 정식 이름을 쓸 것. */
  --red:        var(--green-deep);
  --red-light:  var(--green-light);
  --red-mid:    var(--green-mid);
  --accent-red: var(--accent);
  --purple:       var(--green);
  --purple-light: var(--green-light);
  --ink:     var(--text);
  --ink-2:   var(--text-sub);
  --ink-3:   var(--text-sub);
  --ink-4:   var(--text-muted);
  --paper:   var(--bg);
  --paper-2: var(--bg-alt);
  --paper-3: var(--border);
  --line:    var(--border);
  --r:       var(--radius);
}

/* ── 2. 리셋·본문 ─────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  /* 마지막 줄에 '없습니다.' 처럼 몇 글자만 덩그러니 남는 걸 막는다.
     제목은 아래에서 balance(줄 길이를 고르게)로 따로 다룬다.
     이 기능을 모르는 옛 브라우저에서는 지금과 똑같이 보인다. */
  text-wrap: pretty;
}

img { max-width: 100%; }

/* 버튼·입력은 글꼴을 물려받지 않는다. 놔두면 화살표·닫기 같은 기호가
   혼자 Arial로 나와 미묘하게 어긋난다. */
button, input, select, textarea { font-family: inherit; }

/* ── 3. 제목 ───────────────────────────────────────────────
   같은 역할인데 페이지마다 이름이 달라, 이름을 모두 모아 한 규칙으로 묶는다.
   (이름 통일은 다음 단계 — 지금은 굵기·줄간격만 맞춘다) */

/* 큰 제목 — 24px 이상 */
h1, h2,
.hero-title, .hero-main, .hero-big, .quiz-headline,
.sec-h2, .sec-title, .section-title,
.cta-title, .cta-headline, .final-cta-title,
.grade-title, .principle-headline, .quote-text,
.nmc-goal-main, .rv-modal-text {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.22;
  /* 한글 명조는 그냥 두면 헐거워 보인다. 이만큼 당기면 단단해 보인다.
     (본진 mail100hanwon 규격과 같은 값) */
  letter-spacing: -.025em;
  text-wrap: balance;
}

/* 작은 제목 — 24px 미만. 400은 가늘어 보여 한 단계 올린다 */
.story-title, .tx-title, .nmc-block-title, .nmc-ko, .nmc-goal-ko {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.02em;
}

/* 설명 문장 — 줄 길이를 고르게 나눈다.
   이걸 안 하면 첫 줄은 화면 끝까지 꽉 차고 둘째 줄에 '확인합니다.' 같은
   두어 글자만 남아 허전해 보인다. 제목에는 이미 같은 규칙을 쓰고 있다.
   (글자를 고치는 게 아니라 어디서 줄을 넘길지만 브라우저에 맡기는 것이다.
    이 기능을 모르는 옛 브라우저에서는 지금과 똑같이 보인다) */
.hero-sub, .sec-sub, .cta-sub, .lead {
  text-wrap: balance;
}

/* 한 문단에 문장이 둘 이상이면 <br> 대신 이걸 쓴다.
   <br> 로 나누면 브라우저가 문단 전체를 한 덩어리로 보고 줄을 맞추느라
   '직접 확인합니다.' 처럼 마지막에 몇 글자만 남는다.
   문장마다 이 껍데기를 씌우면 문장별로 따로 줄을 맞춘다. */
.hero-sub .ln, .sec-sub .ln, .cta-sub .ln, .lead .ln {
  display: block;
  text-wrap: balance;
}

/* 제목 안의 강조(<b>·<strong>)
   담아둔 명조 굵기는 400·500뿐이다. 700을 쓰면 브라우저가 억지로 굵게
   흉내 내(faux bold) 획이 뭉개진다. 제목 안 강조는 500까지만 쓴다. */
h1 b, h1 strong, h2 b, h2 strong,
.hero-title b, .quote-text b, .cta-title b, .cta-headline b,
.sec-h2 b, .sec-title b, .section-title b, .final-cta-title b,
.grade-title b, .principle-headline b, .nmc-goal-main b, .story-title b,
[style*="--serif"] b, [style*="--serif"] strong,
[style*="Noto Serif"] b, [style*="Noto Serif"] strong {
  font-weight: 500;
}

/* 다크 배경 — 어두운 바탕에서 400은 가늘게 번진다. 한 단계만 올린다 */
.on-dark h1, .on-dark h2,
.on-dark .hero-title, .on-dark .hero-main, .on-dark .hero-big,
.on-dark .cta-title, .on-dark .cta-headline, .on-dark .final-cta-title,
.on-dark .quote-text, .on-dark .nmc-goal-main {
  font-weight: 500;
}

/* ── 4. 상단 내비 ─────────────────────────────────────────── */
nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250, 250, 248, .93);
  backdrop-filter: blur(12px);
  border-bottom: .5px solid var(--border);
  padding: 14px 24px;
  display: flex; justify-content: space-between; align-items: center;
}
.nav-logo { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; text-decoration: none; }
.logo-seal {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--accent); color: #fff;
  font-family: var(--sans); font-weight: 700; font-size: 8.5px; line-height: 1;
  padding: 2px 3px; border-radius: 4px; letter-spacing: 0;
}
.logo-word {
  font-family: var(--serif); font-weight: 500; font-size: 22px;
  color: var(--text); letter-spacing: -.02em; line-height: 1;
}
.nav-menu { display: flex; gap: 22px; align-items: center; }
.nav-link {
  font-size: 15px; color: var(--text-sub); text-decoration: none;
  font-weight: 500; white-space: nowrap; transition: color .2s;
}
.nav-link:hover { color: var(--green); }
.nav-link.active { color: var(--text); }
.nav-right { display: flex; align-items: center; gap: 14px; }

.nav-cta {
  background: var(--green); color: #fff; border: none;
  padding: 10px 20px; border-radius: 999px;
  font-family: var(--sans); font-size: 15px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: transform .32s var(--spring), box-shadow .32s var(--spring);
}
.nav-cta:hover { transform: scale(1.04); box-shadow: 0 4px 16px rgba(6, 78, 59, .26); }
.nav-cta:active { transform: scale(.96); }

/* 햄버거 (모바일 전용) */
.nav-toggle { display: none; background: none; border: none; cursor: pointer; flex-direction: column; gap: 4px; padding: 6px; }
.nav-toggle span { width: 20px; height: 2px; background: var(--text); border-radius: 2px; transition: .25s; }
.nav-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 800px) {
  .nav-toggle { display: flex; }
  .nav-menu {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(250, 250, 248, .98); backdrop-filter: blur(12px);
    border-bottom: .5px solid var(--border);
    max-height: 0; overflow: hidden; transition: max-height .3s ease;
  }
  .nav-menu.open { max-height: 500px; }
  .nav-menu .nav-link { padding: 16px 24px; border-top: .5px solid var(--border); }
}

/* ── 4-b. 섹션 세로 여백 ───────────────────────────────────
   80px 고정이면 좁은 화면에서 섹션 사이가 160px로 벌어져 화면이 텅 빈다.
   폭에 따라 줄어들게 한다. 가로 여백은 페이지가 정한다. */
section, .sec, .content-wrap, #quiz-section {
  padding-top: clamp(70px, 8.5vw, 112px);
  padding-bottom: clamp(70px, 8.5vw, 112px);
}

/* ── 5. eyebrow (섹션 라벨) ──────────────────────────────────
   밝은 배경이 기본이고, 어두운 배경일 때만 뒤집는다.
   (반대로 만들면 evidence처럼 밝은 히어로에서 글자가 사라진다) */
.sec-label, .hero-badge {
  display: inline-block;
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
  color: var(--green); background: var(--green-light);
  border: 1px solid var(--green-mid);
  padding: 6px 15px; border-radius: 999px; margin-bottom: 16px;
}
.on-dark .sec-label, .on-dark .hero-badge {
  font-weight: 500; letter-spacing: .06em;
  background: rgba(255, 255, 255, .14);
  color: #CDE8DC;
  border-color: transparent;
}

/* ── 5-b. 히어로 3종 ───────────────────────────────────────
   ⓐ 메인 (landing) — 좌측정렬·큰 높이·배경사진. 이 사이트에 하나뿐이다
   ⓑ 서브 (brand·ultrasound·booking·reviews) — 중앙정렬·같은 높이
   ⓒ 유틸 (evidence) — 밝은 배경·좌측정렬. 자료 성격 페이지용

   페이지를 옮겨 다닐 때 느끼는 이질감의 대부분이 여기서 온다.
   배경(단색이냐 사진이냐)은 페이지가 정하고, 안쪽 규격은 여기서 정한다. */
.hero {
  max-width: 720px; margin: 0 auto;
  padding: 64px 24px 56px;
  text-align: center;
}
.hero-title { font-size: clamp(30px, 6.4vw, 44px); margin-bottom: 14px; }
/* 문장이 길어 3줄을 넘는 히어로용 한 단계 아래 크기.
   크기를 마음대로 정하지 말고 이 두 단계 중에서만 고를 것. */
.hero-title--long { font-size: clamp(26px, 5vw, 36px); }
.hero-sub {
  font-size: 17px; line-height: 1.8;
  max-width: 560px; margin: 0 auto 28px;
  color: var(--text-sub);
}
.hero-sub:last-child { margin-bottom: 0; }
.on-dark .hero-title { color: #fff; }
.on-dark .hero-sub   { color: rgba(255, 255, 255, .82); }

/* ⓒ 유틸 — 자료 페이지 */
.hero-util {
  max-width: 860px;
  padding: 76px 28px 60px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.hero-util .hero-sub { margin: 0 0 28px; }
.hero-util .hero-sub:last-child { margin-bottom: 0; }

/* ── 6. 버튼 ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sans); font-size: 16px; font-weight: 600;
  padding: 15px 30px; min-height: 48px;
  border: 1px solid transparent; border-radius: 999px;
  text-decoration: none; cursor: pointer;
  transition: transform .35s var(--spring), box-shadow .35s var(--spring), background .2s;
}
.btn:hover  { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(6, 78, 59, .24); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--green); color: #fff; }
.btn-outline { background: #fff; color: var(--green); border-color: var(--green-mid); }
.on-dark .btn-outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.btn-text {
  padding: 0; min-height: 0; border: 0; background: none;
  color: var(--green); font-weight: 600;
}
.btn-text:hover { transform: none; box-shadow: none; gap: 12px; }

/* 다크 배경 위 주버튼은 흰색이 주가 된다 */
.on-dark .btn-primary { background: #fff; color: var(--green-deep); }
.on-dark .btn-primary:hover { box-shadow: 0 12px 32px rgba(0, 0, 0, .3); }

/* ── 7. 카드 2종 ───────────────────────────────────────────
   정보카드(흰 바탕) / 강조카드(연녹 바탕). 그 외는 없다.

   아래 긴 목록은 페이지마다 이름만 다르고 실은 같은 물건이다.
   (회색 박스·좌측 컬러바·모서리 8·12·16·20px 혼재를 여기서 잡는다)
   새로 만들 때는 .card / .card-em 두 이름만 쓸 것. */
.card,
.sympathy-card, .step-card, .pillar, .promise,
.paper-card, .stat-box, .acupoint-card, .exercise-card, .proto-step,
.finding-card, .stage-item, .nmc-block,
.prep-card, .check-item, .rv-card {
  background: #fff;
  border: .5px solid var(--border);
  border-radius: var(--radius);
}
.card { padding: 26px 24px; }
.card, .pillar, .step-card, .rv-card, .paper-card {
  transition: transform .32s var(--spring), box-shadow .32s var(--spring);
}
.card:hover, .pillar:hover, .step-card:hover, .rv-card:hover, .paper-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(6, 78, 59, .10);
}

/* 강조카드 — 연녹 바탕 */
.card-em, .def-box, .result-notice, .nmc-item {
  background: var(--green-light);
  border: 1px solid var(--green-mid);
  border-radius: var(--radius);
}

/* ── 8. 푸터 ──────────────────────────────────────────────── */
footer {
  border-top: .5px solid var(--border);
  padding: 30px 24px;
  text-align: center;
  font-size: 14px; color: var(--text-muted); line-height: 1.9;
}
footer a { color: inherit; }

/* ── 8-b. 넓은 표 ─────────────────────────────────────────
   좁은 화면에서 표가 페이지 전체를 밀어내면 안 된다.
   표는 자기 자리 안에서만 가로로 밀린다. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 16px;
}
.table-scroll > table { margin-top: 0; }

/* ── 9. 스크롤 등장 ───────────────────────────────────────── */
.reveal-on .reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity .75s var(--spring), transform .75s var(--spring);
  will-change: opacity, transform;
}
.reveal-on .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal-on .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover, .card:hover, .nav-cta:hover { transform: none; }
}