/* ==========================================================================
   AXOLVE 브랜드 기준 (A안·B안 공통)
   이 파일은 각 사이트 스타일 맨 마지막에 불러온다. 레이아웃은 A·B가 다르지만
   색 · 글꼴 · 글자 크기 · 로고 규정은 여기 하나로 통일한다.
   기준 문서: brand.html
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 색 체계 — Primary / Secondary / Accent / Neutral
   각 색은 쓰는 자리가 정해져 있다. 자리를 벗어나 쓰지 않는다.
   -------------------------------------------------------------------------- */
:root {
  /* Primary — Crimson. 로고, 제목, 브랜드를 나타내는 면 */
  --brand-primary:      #74070E;
  --brand-primary-50:   #FBF1F2;

  /* Secondary — Scholar Navy. 표 머리, 데이터, GRAMMO 계통 같은 정보 요소 */
  --brand-secondary:    #22314F;
  --brand-secondary-50: #F1F3F8;

  /* Accent — Signal Red. 행동 버튼과 핵심 숫자에만. 본문 글자에는 쓰지 않는다 */
  --brand-accent:       #E01523;
  --brand-accent-dk:    #B30F1B;

  /* Neutral — 따뜻한 무채색 한 계열. 차가운 회색을 섞지 않는다 */
  --n-900:  #1D150E;   /* 본문 제목·강조 글자 */
  --n-700:  #4A4440;   /* 본문 */
  --n-500:  #6E6763;   /* 보조 글자 (옅은 면 위에서도 4.5:1 이상) */
  --n-300:  #E3DDD8;   /* 괘선·테두리 */
  --n-100:  #F5F1EE;   /* 옅은 면 */
  --n-0:    #FFFFFF;
  --n-dark: #1A0507;   /* 어두운 면 (히어로·띠·푸터) */

  /* ------------------------------------------------------------------------
     2. 글꼴 — 두 종만 쓴다
       Pretendard : 제목 · 본문 · 모든 한글
       Bricolage  : 포인트 (숫자, 로고 글자, WRITO/GRAMMO 같은 영문 표지)
     ------------------------------------------------------------------------ */
  --font-head:  "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --font-body:  var(--font-head);
  --font-point: "Bricolage Grotesque", var(--font-head);

  /* ------------------------------------------------------------------------
     3. 글자 크기 단계 — 본문은 16px 아래로 내려가지 않는다
     ------------------------------------------------------------------------ */
  --fs-display: clamp(34px, 4.4vw, 58px);   /* 히어로 제목 */
  --fs-h2:      clamp(28px, 3.3vw, 44px);   /* 섹션 제목 */
  --fs-h3:      clamp(19px, 1.55vw, 22px);  /* 카드 · 항목 제목 */
  --fs-lead:    clamp(17px, 1.3vw, 19px);   /* 섹션 도입문 */
  --fs-body:    17px;                       /* 본문 */
  --fs-sub:     16px;                       /* 보조 문장 (주석 · 고지) */
  --fs-label:   14px;                       /* 표지 (눈썹 · 태그 · 범례) — 문장이 아닌 것만 */

  --lh-display: 1.18;
  --lh-h2:      1.28;
  --lh-h3:      1.4;
  --lh-lead:    1.65;
  --lh-body:    1.7;
  --lh-sub:     1.6;

  /* ------------------------------------------------------------------------
     4. 로고 규정
       X = 심볼(원) 지름.
       · 여백: 로고 둘레에 X/2 이상 비운다
       · 최소 크기: 심볼 20px, 글자 16px. 이보다 작게 쓰지 않는다
       · 설명어(Writing Coach)는 글자가 18px 이상일 때만 붙인다
     ------------------------------------------------------------------------ */
  --logo-x:    26px;
  --logo-word: 20px;

  /* 기존 사이트 변수를 브랜드 기준에 연결한다 */
  --cr-red: var(--brand-accent);   --cr-red-dk: var(--brand-accent-dk);
  --cr-deep: var(--brand-primary);
  --cr-ink: var(--n-900); --cr-body: var(--n-700); --cr-mut: var(--n-500);
  --cr-paper: var(--n-100); --cr-grey: var(--n-100); --cr-line: var(--n-300);
  --cr-dark: var(--n-dark);
  --cr-display: var(--font-head); --cr-text: var(--font-body);

  --b-red: var(--brand-accent); --b-red-dk: var(--brand-accent-dk);
  --b-deep: var(--brand-primary);
  --b-ink: var(--n-900); --b-body: var(--n-700); --b-mut: var(--n-500);
  --b-line: var(--n-300); --b-soft: var(--n-100); --b-tint: var(--brand-primary-50);
  --b-sans: var(--font-head);

  /* 에세이 훈련 · 요금제 화면도 같은 글꼴로 */
  --sans: var(--font-body);
}
@media (max-width: 680px) {
  :root { --fs-body: 16px; --logo-x: 20px; --logo-word: 16px; }
}

body { font-family: var(--font-body); }

/* ==========================================================================
   역할별 적용
   ========================================================================== */

/* --- 히어로 제목 --- */
.cr-hero h1, .b-hero h1 {
  font-family: var(--font-head); font-weight: 800;
  font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: -.03em;
}

/* --- 섹션 제목: 밝은 면에서는 Primary, 어두운 면에서는 흰색 --- */
.cr-h2, .b-h2 {
  font-family: var(--font-head); font-weight: 800;
  font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: -.025em;
  color: var(--brand-primary);
}
.cr-close h2, .b-close h2 {
  font-family: var(--font-head); font-weight: 800;
  font-size: var(--fs-h2); line-height: var(--lh-h2);
}
.cr-photoband h2, .b-band h2 { font-family: var(--font-head); font-weight: 800; }

/* --- 항목 제목 --- */
.cr-duo-h, .cr-axis-b h3, .cr-cyc h3, .cr-retake-r h3, .cr-grade h3,
.cr-step-t, .cr-chart-h, .cr-plan-t, .cr-taxo-list dt,
.b-r h3, .b-duo-c h3, .b-g h3, .b-p-t, .b-card-t {
  font-family: var(--font-head); font-weight: 700;
  font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--n-900);
}
.cr-taxo-list dt { color: var(--brand-primary); }
.cr-qa summary, .b-qa summary {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(17px, 1.4vw, 19px); line-height: var(--lh-h3);
}

/* --- 도입문 --- */
.cr-lede, .cr-hero-sub, .b-lede, .b-sec-lede {
  font-family: var(--font-body);
  font-size: var(--fs-lead); line-height: var(--lh-lead);
}
.cr-kicker { font-family: var(--font-head); font-weight: 500; }

/* --- 본문 --- */
.cr-card-p, .cr-photo-p, .cr-duo-p, .cr-duo-l li, .cr-axis-b p, .cr-taxo-list dd,
.cr-cyc p:last-child, .cr-retake-r p, .cr-step-p, .cr-grade li, .cr-plan-p,
.cr-qa .cr-a p, .cr-photoband p,
.b-r p, .b-duo-p, .b-g p, .b-p li, .b-qa details p, .b-band p, .b-step p,
.tier-l li, .tier-d {
  font-family: var(--font-body);
  font-size: var(--fs-body); line-height: var(--lh-body);
}

/* --- 보조 문장 (주석 · 고지 · 목록 설명) --- */
.cr-duo-note, .cr-cycle-note, .cr-retake-note, .cr-plan-note, .cr-foot-note,
.cr-seen-row li, .cr-sticky p, .cr-foot-list a, .cr-strip-i span,
.b-note, .b-disclaim, .b-close p, .b-chip, .b-stats-in span {
  font-family: var(--font-body);
  font-size: var(--fs-sub); line-height: var(--lh-sub);
}
.b-chip b { font-size: 17px; }

/* --- 표지 (문장이 아닌 짧은 이름표만) --- */
.cr-eyebrow, .cr-seen-l, .b-eyebrow, .b-tag, .cr-retake-tag, .cr-photo-tag,
.cr-chart-k, .cr-grade-meta, .cr-cyc-n, .b-g-k, .b-p-badge, .b-card-s, .b-legend,
.tier-k, .tier-l span, .b-axis-n, .b-axis-d, .cr-bar-row dt, .cr-foot-h,
.cr-axis-b h3 em {
  font-family: var(--font-body);
  font-size: var(--fs-label); line-height: 1.45;
}
.cr-eyebrow, .b-eyebrow {
  font-weight: 700; letter-spacing: .08em; color: var(--brand-accent-dk);
}

/* --- 포인트 글꼴: 숫자 · 영문 표지 --- */
.cr-card-n, .cr-photo-n, .cr-strip-i b, .cr-duo-n b, .cr-axis-n, .cr-step-n,
.cr-plan-n, .b-stats-in b, .b-p-n, .cr-duo-k, .b-duo-k, .cr-retake-r li::before {
  font-family: var(--font-point); font-weight: 700;
}
.cr-strip-i b, .b-stats-in b { font-size: 34px; }
.cr-duo-k, .b-duo-k { font-size: 14px; letter-spacing: .16em; }

/* --- 버튼 --- */
.cr-btn, .b-btn { font-family: var(--font-body); font-size: 17px; font-weight: 700; }
.cr-btn { min-height: 54px; }

/* ==========================================================================
   로고
   ========================================================================== */
.sitenav .brand {
  gap: calc(var(--logo-x) * .42);
  /* 여백 규정: 심볼 지름의 절반 */
  padding: calc(var(--logo-x) * .5) 0;
  flex: none;
}
.sitenav .brand .bar {
  width: var(--logo-x); height: var(--logo-x);
  border-radius: 50%; background: var(--brand-accent); flex: none;
}
.sitenav .brand-name {
  font-family: var(--font-point); font-weight: 700;
  font-size: var(--logo-word); letter-spacing: -.01em; line-height: 1.1;
}
.sitenav .brand-sub { font-family: var(--font-body); font-size: 12px; line-height: 1.3; }
.navlinks { margin-left: calc(var(--logo-x) * .5); }
.navlinks a { font-family: var(--font-body); font-size: 16px; }
.cr-foot-b { font-family: var(--font-point); font-size: 20px; }

@media (max-width: 680px) {
  /* 글자 16px 이 되면 설명어는 떼어 낸다 (규정: 18px 이상일 때만) */
  .sitenav .brand-sub { display: none; }
  .navlinks a { font-size: 14px; padding: 10px 6px; }
}

/* ==========================================================================
   큰 숫자와 도입줄 — 새 크기를 만들지 않고 제목 단계를 빌린다
   ========================================================================== */
:root { --fs-kicker: clamp(20px, 2vw, 28px); }   /* 히어로 제목 위 기울인 도입줄 */

.cr-kicker { font-size: var(--fs-kicker); line-height: 1.4; }

/* 첫 화면급 숫자 = 히어로 제목 크기, 카드 안 숫자 = 섹션 제목 크기 */
.cr-card-n, .cr-photo-n { font-size: var(--fs-display); line-height: 1; }
.cr-duo-n b, .cr-plan-n, .b-p-n { font-size: var(--fs-h2); line-height: 1.1; }
.b-p-n small { font-size: var(--fs-h3); }

/* 숫자 옆 단위 · 번호 · 기호 */
.cr-duo-n span { font-size: var(--fs-sub); }
.cr-axis-n, .cr-step-n { font-size: var(--fs-sub); }
.cr-photo-tag { font-size: var(--fs-label); }
.cr-duo-mid span, .b-duo-x { font-size: var(--fs-h3); }
/* 기존 규칙이 두 단계 선택자라 같은 무게로 덮는다 */
.cr-card-photo .cr-photo-tag { font-size: var(--fs-label); }

/* --------------------------------------------------------------------------
   로고 v2 (2026-09-22 확정) — 옆얼굴 매 머리 + AXOLVE 워드마크
   원본: AXOLVE_LOGO/v2/svg/axolve-logo-on-wine.svg (어두운 면용 흰색 · 금색 부리)
   logo-nav.svg 는 그 파일에서 와인색 바탕 사각형만 뺀 사본이다. 도형은 손대지 않는다.
   · 높이: PC 34px, 모바일 28px (가로는 비율대로)
   · 여백: 로고 둘레에 로고 높이의 1/2 이상 비운다
   · 설명어(Writing Coach)는 붙이지 않는다. 매 머리가 브랜드를 대신한다
   -------------------------------------------------------------------------- */
.sitenav .brand-logo { display: inline-flex; align-items: center; flex: none; padding: 6px 0; line-height: 0; }
.sitenav .brand-logo img { display: block; height: 34px; width: auto; }
.sitenav .brand-logo:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 4px; border-radius: 2px; }
.sitenav .brand-logo + .navlinks { margin-left: 17px; }   /* 로고 높이 34px 의 1/2 */
@media (max-width: 680px) {
  .sitenav .brand-logo img { height: 28px; }
}