/* =============================================================================
 * v2.css — v2 리디자인 전용 디자인 시스템 + 전역 스타일
 * =============================================================================
 *
 * frontmatter 에 `v2: true` 가 붙은 페이지에서만 로드된다 (layouts/_default/baseof.html).
 * v1 페이지에는 절대 로드되지 않으므로, 여기서 뭘 하든 지원님·선우님 작업에 영향이 없다.
 *
 * 이 디자인 시스템은 기존 style.css / design.md 토큰을 재사용하지 않고 새로 만든 것이다.
 * 특히 타입스케일과 배경색은 처음부터 다시 정의했다. design.md 는 참고만 한다.
 *
 * 규칙
 * ----
 * 1. style.css 는 건드리지 않는다. v1/v2 공용이고, assets/scss 에서 재생성되지 않는
 *    손편집 파일이다(`npm run sass` 금지). 전역 오버라이드는 전부 여기서.
 * 2. 섹션 단위 스타일은 해당 파티셜의 인라인 <style> 에 둔다. 이 파일에는 페이지를
 *    가로질러 공통인 것만 — 토큰, 타이포 스케일, 기본 요소, 프리미티브.
 * 3. 모든 토큰은 --v2- 접두사를 쓴다. style.css 의 기존 변수와 이름이 겹치지 않게.
 *
 * 근거: brand.md (브랜드 정본 — 메타포·가치), design.md (기존 시스템 참고),
 *       customer.io (인터랙션·타이포 레퍼런스)
 * ========================================================================== */

/* =============================================================================
 * 1. 토큰
 * ========================================================================== */
[data-v2] {
  /* ---------------------------------------------------------------------------
   * 색 — 라이트 베이스, 딥 그린잉크, 브랜드 그린 액센트
   *
   * 잉크를 순수 검정으로 두지 않는다. 아주 낮은 채도의 그린을 섞은 먹색이라
   * 브랜드 그린 옆에 놓였을 때 색이 따로 놀지 않는다. brand.md §2 "절제" —
   * 검정의 강도는 유지하되 온도를 브랜드에 맞춘다.
   * ------------------------------------------------------------------------ */
  /* 지면 램프 — 전부 브랜드 그린과 같은 색상각(H≈145°)에서 채도만 낮춘 톤온톤이다.
     회색 중성을 쓰면 그린 액센트 옆에서 색이 따로 놀고, 채도를 올리면 지면이 주장을 한다.
     검은 지면은 쓰지 않는다 — 다크 섹션 토큰을 두지 않는 것이 그 결정을 코드로 못박는 방법이다.
     세 가지를 각각 다른 축으로 잡았다:
       칙칙함  → 명도. S 16% / L 91% 는 회색기가 돌았다. L 95% 로 올린다.
       색 충돌 → 색상각. 그린·블루 비주얼 옆에서는 웜(베이지 H44)이 물러난다.
                 램프의 중간인 H192 에 두면 양쪽 끝과 모두 붙는다.
       채도 예산 → HSL 의 S 는 명도에 따라 실제 chroma 가 달라진다:
                 C = (1 − |2L−1|) × S.  L 95% / S 31% 이면 C = 0.031 로 거의 무채색이고,
                 시안·틸은 창백한 틴트에서 특히 회색으로 읽힌다.
                 색을 보이게 하려면 명도를 낮춰 여력을 만들어야 한다.
                 지금은 반대로 "무채색인데 차갑다"를 노려 C 를 0.012 로 아주 낮게 둔다.
       탁함    → 이 지면 위 카드는 반투명 흰색이 아니라 순백으로. 반투명은 틴트와 섞인다.
     대비 실측(-secondary #f7f8fa 위): --v2-ink 17.8:1, --v2-ink-2 9.0:1.
     --v2-ink-3(4.1:1)은 작은 글자에 쓰지 않는다 — 그 자리는 ink-2 를 쓴다. */
  --v2-canvas: #ffffff;            /* 기본 지면 */
  /* secondary 지면 — 페일 틸(H≈195). 브랜드 램프가 그린(H145) → 블루(H225) 이므로
     그 중간 색상각에 두면 양쪽 끝과 모두 붙는다. 베이지(웜)는 그린·블루 비주얼과
     온도가 부딪혀서 물렀다. 채도는 낮게(31%) 유지해 지면이 주장하지 않게 한다. */
  /* 파랑 기운이 도는 무채색. 색으로 읽히지 않을 만큼 chroma 를 낮추되(C≈0.024)
     색상각은 블루에 둬서 그린·블루 비주얼 아래에서 온도가 맞는다.
     앞선 페일 틸(C 0.077)은 색이 보였고, 그 전 시안(C 0.031)은 회색으로 죽었다.
     여기는 "무채색인데 차갑다"가 목표라 chroma 를 의도적으로 낮게 둔다. */
  --v2-canvas-secondary: #f7f8fa;  /* secondary 배경 — hsl(220 23% 97.5%), C≈0.012 */
  --v2-canvas-sunk: #eceef3;       /* 한 단계 더 가라앉은 면 */
  --v2-canvas-soft: #fbfcfd;       /* 아주 옅은 단계 */
  /* 웜이 필요한 자리를 위해 남겨둔다 (에디토리얼 지면 등, design.md Canvas Warm) */
  --v2-canvas-warm: #faf9f5;

  --v2-ink: #0c1611;             /* 헤드라인·최고 강조 */
  --v2-ink-2: #3a4a42;           /* 본문 */
  --v2-ink-3: #6b7a72;           /* 캡션·메타 */
  --v2-ink-on-dark: #ffffff;

  /* 브랜드 그린 — 정체성. brand.md §5 로 고정.
     흰 배경 대비 3.04:1 이라 디스플레이·헤딩 같은 큰 글자에만 쓴다 (WCAG large text 3:1). */
  --v2-brand: #4aa570;
  /* 본문 크기에서 그린이 필요할 때. 대비 4.5:1 을 넘긴다. */
  --v2-brand-ink: #1e7a4b;
  --v2-brand-soft: #e8f4ed;      /* 그린 틴트 면 */
  /* 짙은 그린 면 — 검정 지면을 쓰지 않기로 했으므로(작업자 지시), 강조가 필요한
     카드는 브랜드 그린을 끝까지 어둡게 내린 값으로 만든다. 흰 글자 대비 12.2:1. */
  --v2-brand-deep: #0f3d2a;
  /* 짙은 그린 면 위의 강조. 위 세 값은 전부 **흰 지면 기준**으로 잡은 것이라
     --v2-brand-deep 위에 얹으면 채도가 눌린다 — --v2-brand-ink 는 1.5:1 로 사실상
     안 보이고, --v2-brand 도 4.0:1 로 규격(large text 3:1)만 겨우 넘겨 "강조로
     안 읽힌다"는 지적을 받았다. 이 값은 --v2-brand-deep 위 6.8:1.
     주의: 저장소에는 어두운 지면용 밝은 그린이 하나 더 있다(#52c97f —
     footer-v2.html:200 버튼 면, header-v2.html:817·1121 활성 라벨). 그쪽은 검정
     지면이고 이 값은 짙은 그린 지면이라 지금은 공존하지만, 어느 시점엔 하나로
     합쳐야 한다. 새 하드코딩 그린을 늘리지 말고 이 토큰을 쓸 것. */
  --v2-brand-bright: #3ddc84;
  --v2-brand-hairline: #cfe6da;

  --v2-line: #e2e8e4;            /* 기본 헤어라인 */
  --v2-line-strong: #c8d3cc;

  /* ---------------------------------------------------------------------------
   * 타입스케일 — 새로 만든 유동 스케일
   *
   * Pretendard 한 벌만 쓴다(brand.md §8). 한글은 라틴보다 글자틀이 꽉 차서
   * customer.io 의 line-height 1.0 을 그대로 옮기면 받침이 윗줄에 붙는다.
   * 행간은 1.12 로 열되, 굵기는 700 으로 올려 디스플레이의 밀도를 확보한다.
   * ------------------------------------------------------------------------ */
  --v2-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
             system-ui, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;

  /* 두 단계만 둔다. 히어로 80 / 섹션 헤드 48 — 페이지에서 이 둘의 역할이 다르고,
     그 사이에 낀 56·40 은 쓰이지 않으면서 "어느 쪽을 쓸지" 를 매번 고민하게 만들었다.
     vw 계수는 컨테이너 폭(1200px)에서 상한에 닿도록 잡았다. 1200 이후로는 고정이다. */
  --v2-text-display: clamp(2.25rem, 8vw, 6rem);       /*  36 → 96  히어로 메인 카피 */
  /* 리프 페이지(상세) 히어로. 홈 히어로(display)와 섹션 헤드(section) 사이 단계다.
     위 주석이 "두 단계만 둔다"고 한 이유는 어느 쪽을 쓸지 매번 고민하게 된다는
     것이었는데, 이 단계는 고를 일이 없다 — 홈은 하나뿐이고 상세는 넷이며,
     페이지 종류가 곧 단계를 결정한다. 1200px 에서 64px 로 상한에 닿는다. */
  /* 상한 56px 은 zuzu.network/solutions/enterprise 히어로 실측값이다(56px/800/LH 1.26).
     brand.md §6 이 그 페이지를 히어로 표준으로 지정하므로 값을 그쪽에 맞춘다. */
  --v2-text-display-2: clamp(1.875rem, 4.6vw, 3.5rem);   /* 30 → 56 */
  --v2-text-section: clamp(1.875rem, 4vw, 3rem);      /*  30 → 48  섹션 메인 헤드 */
  --v2-text-stat:    clamp(1.875rem, 3.6vw, 2.75rem); /*  30 → 44  큰 수치. 섹션 헤드 한 단계 아래 */
  --v2-text-h3:      clamp(1.375rem, 2.2vw, 1.75rem); /*  22 → 28  섹션 안 소제목 */
  --v2-text-lead:    clamp(1.0625rem, 1.5vw, 1.25rem);  /* 17 → 20 */
  --v2-text-body:    1rem;
  --v2-text-sm:      0.875rem;
  --v2-text-xs:      0.8125rem;

  --v2-leading-display: 1.12;
  --v2-leading-tight: 1.28;
  --v2-leading-body: 1.7;
  /* 섹션마다 반복되는 큰 헤드(section-head 의 h2, 최종 CTA 헤드라인) 전용. 원래
     v2-shared/section-head 파티셜과 함께 approval 전용으로 만들어졌다가(8.0절 참고)
     19개 상세 페이지 전체로 퍼지면서 여기로 옮겼다 — --v2-leading-tight(1.28)보다
     살짝 열어(1.32) 두 줄로 감기는 헤드가 많은 이 자리에 맞춘다. */
  --v2-leading-section-head: 1.32;
  /* 캡션·라벨(아이브로우·인덱스·배지·카드 라벨) 전용. 본문(1.7)보다 조이고
     헤드(1.28~1.32)보다는 연다. 위와 같은 이유로 여기로 옮겼다. */
  --v2-leading-caption: 1.45;

  /* 한글은 자간을 좁히면 금방 답답해진다. 큰 사이즈에서만 소폭 조인다. */
  --v2-tracking-display: -0.028em;
  --v2-tracking-heading: -0.02em;
  --v2-tracking-body: -0.005em;

  --v2-weight-display: 700;
  --v2-weight-heading: 700;
  --v2-weight-body: 400;
  --v2-weight-medium: 500;   /* 리드처럼 본문보다 한 단계 무거워야 하는 자리 */
  --v2-weight-emphasis: 600;

  /* ---------------------------------------------------------------------------
   * 간격 — 4px 기반
   * ------------------------------------------------------------------------ */
  --v2-space-1: 4px;
  --v2-space-2: 8px;
  --v2-space-3: 12px;
  --v2-space-4: 16px;
  --v2-space-5: 24px;
  --v2-space-6: 32px;
  --v2-space-7: 48px;
  --v2-space-8: 64px;
  --v2-space-9: 96px;
  --v2-space-10: 128px;

  /* 섹션 리듬의 기본값 — 섹션 메인 카피와 그 아래 내용 사이 간격.
     유동값(clamp)으로 두지 않는다. 섹션마다 조금씩 달라지면 페이지를 훑을 때
     "같은 층위"라는 신호가 흐려진다. 모든 섹션이 같은 48px 을 쓴다. */
  --v2-gap-section: 48px;

  --v2-container: 1200px;
  --v2-container-narrow: 760px;
  --v2-gutter: clamp(20px, 4vw, 48px);
  /* 섹션 상하 여백. 세 값을 모두 20% 줄였다(작업자 지시) —
     64/9vw/128 → 51/7.2vw/102. 최소·기울기·최대를 같은 비율로 줄여야
     좁은 화면과 넓은 화면의 리듬이 함께 움직인다. 최대값만 줄이면
     넓은 화면에서만 촘촘해지고 중간 폭에서는 그대로다. */
  --v2-section-y: clamp(51px, 7.2vw, 102px);

  /* ---------------------------------------------------------------------------
   * 형태 · 깊이
   * brand.md §2 "절제" — 그림자는 띄우는 용도로만, 장식으로 쓰지 않는다.
   *
   * 중첩 radius 규칙:  R_in = max(0, R_out − d)
   *   R_out = 바깥 요소의 radius,  d = 두 모서리 사이 거리(padding + border + inset)
   * 안쪽과 바깥쪽 곡률 중심이 어긋나면 동심으로 보이지 않는다. 안쪽에 같은 radius 를
   * 그대로 물려주는 것이 가장 흔한 실수다.
   * 출처: https://www.post-dogma.com/posts/nested-border-radius-visual-lab/
   * (원문도 "시각적으로 가장 안정적인 출발점"이라고만 하므로, 최종 판단은 눈으로 한다)
   *
   * 쓰는 법 — 값을 박지 말고 계산한다. 여백을 바꾸면 radius 가 따라온다:
   *   .outer { --r: var(--v2-radius-lg); --pad: 16px;
   *            border-radius: var(--r); padding: var(--pad); }
   *   .inner { border-radius: max(0px, calc(var(--r) - var(--pad))); }
   * ------------------------------------------------------------------------ */
  --v2-radius-sm: 8px;
  --v2-radius: 12px;
  --v2-radius-lg: 20px;
  --v2-radius-xl: 28px;
  --v2-radius-pill: 999px;

  --v2-shadow-sm: 0 1px 2px rgba(12, 22, 17, 0.05);
  --v2-shadow: 0 4px 16px rgba(12, 22, 17, 0.06);
  --v2-shadow-lg: 0 18px 48px rgba(12, 22, 17, 0.1);

  /* ---------------------------------------------------------------------------
   * 모션
   * customer.io 히어로 로테이터에서 계측한 값이 기준이다. 감속이 매우 강한
   * 스프링형 커브라 글자가 "떨어져 자리를 잡는" 느낌이 난다.
   * ------------------------------------------------------------------------ */
  --v2-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --v2-ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --v2-dur-fast: 180ms;
  --v2-dur: 320ms;
  --v2-dur-slow: 560ms;
}

/* =============================================================================
 * 2. 기본 요소
 * ========================================================================== */
[data-v2] {
  background: var(--v2-canvas);
  color: var(--v2-ink-2);
  font-family: var(--v2-font);
  font-size: var(--v2-text-body);
  line-height: var(--v2-leading-body);
  letter-spacing: var(--v2-tracking-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 폼 컨트롤은 font-family 를 상속하지 않는다 — UA 기본이 Arial 계열이다.
   위 [data-v2] 의 font-family 는 button/input/select/textarea 에 닿지 않으므로,
   자기 font-family 를 명시하지 않은 컨트롤은 **한글이 Pretendard 가 아니라
   시스템 폴백 서체로 렌더된다.** brand.md §8 "서체는 Pretendard 하나, 고정" 위반이고,
   글자 폭·자간이 주변 본문과 미묘하게 어긋나 "타이포가 이상하다"로 나타난다.

   2026-08-15 실측: 가격 페이지의 컨트롤 25개 중 17개가 Arial 이었다 —
   결제주기 토글, 계산기 트리거, 기능 비교표 탭 7개 등 한글 라벨 전부.
   홈에도 6개 있었고 그중 하나는 공용 프리미티브 `.v2-btn` 이다.
   페이지마다 고칠 문제가 아니라 여기서 한 번 끊는다.

   font-family 만 상속시킨다. `font: inherit` 로 쓰면 size·weight·line-height 까지
   끌고 와서 컨트롤마다 잡아둔 값이 통째로 덮인다 — 레이아웃이 움직인다.
   letter-spacing 도 상속되지 않으므로 함께 넘긴다(한글에서 눈에 띈다). */
[data-v2] :is(button, input, select, textarea) {
  font-family: inherit;
  letter-spacing: inherit;
}

/* 지분율·금액·통계는 tabular 로 — brand.md §8, §2(정확함) */
[data-v2] .v2-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* =============================================================================
 * 3. 레이아웃 프리미티브
 * ========================================================================== */
/* 좌우 패딩을 없앤다(작업자 지시). 다만 브레이크포인트로 끄면 안 된다 —
   720px 에서 끄고 실측해보니 1024px 에서 세그먼트 헤드라인의 left 가 0 이었다.
   뷰포트가 컨테이너(1200px)보다 좁은 721~1199 구간에서는 max-width 가 여백을
   만들어주지 못하므로, 패딩까지 없애면 글자가 화면 가장자리에 그대로 붙는다.

   그래서 패딩 대신 width 로 처리한다. min() 이 두 경우를 한 줄로 덮는다:
     · 넓은 화면 → 1200px 로 고정되고 남는 공간이 margin-inline:auto 로 양옆에 간다
     · 좁은 화면 → 100% - gutter*2 라 gutter 만큼의 여백이 남는다
   결과적으로 padding-inline 은 어디에도 없고, 글자가 가장자리에 닿지도 않는다. */
[data-v2] .v2-container {
  width: min(100% - var(--v2-gutter) * 2, var(--v2-container));
  margin-inline: auto;
  padding-inline: 0;
}

/* v1 공용 style.css 에 전역 `section { padding: 6rem 4.5rem }` 이 있다(=좌우 72px,
   992px 이하에서는 `4.5rem 1.125rem` 라 18px). v2 섹션들은 padding-block 만 지정해서
   그 좌우 값을 모르는 채 물려받고 있었고, 그 위에 컨테이너가 또 여백을 더해 이중이
   됐다 — 1024px 에서 히어로/솔루션/CTA 가 113px, 세그먼트만 41px 로 좌우 축이
   어긋나 있었다(.cap 만 단축 속성으로 0 을 줘서).

   가로 여백은 컨테이너 한 곳에서만 결정되어야 하므로 여기서 그 전역 규칙을 끊는다.
   핵심은 **명시도를 올리지 않는 것**이다. 이 규칙을 `[data-v2] section` (0,1,1) 로
   쓰면 끊으려던 전역 규칙(0,0,1)뿐 아니라 클래스로 자기 여백을 선언한 섹션까지
   같이 덮어버린다. v2 페이지에는 v1 파티셜이 그대로 꽂혀 있고(process-section-new,
   sst-*, al-*, fip-section, …) 그들은 하나같이 `padding: Y 40px` 단축 속성(0,1,0)
   으로 좌우 여백을 만든다. 0,1,1 이 0,1,0 을 이기므로 그 40px 이 통째로 날아가,
   뷰포트가 컨테이너(1200px)보다 좁은 1024~1439 구간에서 본문이 화면 가장자리에
   그대로 붙었다. 1440px 이상에서는 안쪽 컨테이너가 어차피 가운데 정렬돼 증상이
   안 보였고 그래서 오래 안 잡혔다.

   :where() 는 명시도가 0 이라 이 선택자의 무게는 `section` 하나뿐인 (0,0,1) —
   끊으려는 전역 규칙과 정확히 같다. v2.css 는 baseof.html 에서 style.css 뒤에
   실리므로 같은 무게에서는 나중에 온 이쪽이 이기고, 클래스로 여백을 선언한
   섹션(0,1,0 이상)에는 져서 비켜준다. 결과적으로 "가로 여백을 스스로 말하지 않는
   섹션만 0" 이 되고, 파티셜 이름을 나열하지 않아도 새 섹션이 자동으로 맞는다.
   순서에 기대는 규칙이므로 이 블록을 style.css 보다 먼저 싣지 말 것.

   [data-v2] 스코프라 v1 페이지에는 닿지 않고, 이 파일 자체가 v2 페이지에서만
   로드되므로 이중으로 안전하다. 세로 패딩은 각 섹션이 계속 정한다. */
:where([data-v2]) section {
  padding-inline: 0;
}

[data-v2] .v2-section {
  padding-block: var(--v2-section-y);
}

/* =============================================================================
 * 4. 타이포 유틸
 * ========================================================================== */
[data-v2] .v2-display {
  font-size: var(--v2-text-display);
  line-height: var(--v2-leading-display);
  letter-spacing: var(--v2-tracking-display);
  font-weight: var(--v2-weight-display);
  color: var(--v2-ink);
  /* 한글 줄바꿈이 단어 중간에서 끊기지 않게 */
  word-break: keep-all;
  overflow-wrap: break-word;
}

[data-v2] .v2-lead {
  font-size: var(--v2-text-lead);
  /* 본문보다 한 단계 무겁게. 디스플레이가 700 이라 400 으로 두면 리드가 캡션처럼 눌린다. */
  font-weight: var(--v2-weight-medium);
  line-height: 1.6;
  color: var(--v2-ink-2);
  word-break: keep-all;
}

/* =============================================================================
 * 5. 버튼
 *
 * 형태(padding·font-size·weight·line-height·radius)는 사이트 공용 버튼 컴포넌트
 * `.button` 을 그대로 따른다 — 히어로 CTA 와 GNB CTA 가 같은 버튼으로 읽혀야 한다.
 *   .v2-btn      ← .button.button-small  (헤더가 쓰는 크기)
 *   .v2-btn-lg   ← .button.button-large  (더 큰 CTA 가 필요할 때)
 *
 * 색만 v2 토큰을 쓴다. 주 버튼은 잉크(다크), 보조는 링.
 * 그린을 CTA 로 쓰지 않는다 — design.md 의 "green as signal, not every CTA" 를 따른다.
 *
 * 테두리는 border 가 아니라 box-shadow 로 그린다. 공용 컴포넌트가 그렇게 하고 있고,
 * border 를 쓰면 보조 버튼만 2px 높아져 주 버튼과 높이가 어긋난다.
 * ========================================================================== */
[data-v2] .v2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--v2-space-2);
  padding: 0.5625rem 0.75rem;   /* .button-small */
  border-radius: var(--v2-radius-sm);
  font-size: 0.9rem;            /* .button-small */
  font-weight: 700;             /* .button-small */
  line-height: 1.2;
  letter-spacing: var(--v2-tracking-body);
  text-decoration: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--v2-dur-fast) var(--v2-ease),
              background-color var(--v2-dur-fast) var(--v2-ease),
              box-shadow var(--v2-dur-fast) var(--v2-ease);
}

/* .button-large 에 대응하는 큰 단계 */
[data-v2] .v2-btn-lg {
  padding: 0.75rem 1.125rem;
  font-size: 1rem;
}

[data-v2] .v2-btn-primary {
  background: var(--v2-ink);
  color: var(--v2-ink-on-dark);
}
[data-v2] .v2-btn-primary:hover {
  background: #16261e;
  transform: translateY(-1px);
  box-shadow: var(--v2-shadow);
}

[data-v2] .v2-btn-secondary {
  background: var(--v2-canvas);
  color: var(--v2-ink);
  box-shadow: 0 0 1px 1.5px rgba(12, 22, 17, 0.15);
}
[data-v2] .v2-btn-secondary:hover {
  box-shadow: 0 0 1px 1.5px rgba(12, 22, 17, 0.4);
  transform: translateY(-1px);
}

/* 전역 a:hover 밑줄이 v1 style.css 에서 내려오므로 명시적으로 끈다 */
[data-v2] .v2-btn:hover,
[data-v2] .v2-btn:focus {
  text-decoration: none;
}

/* =============================================================================
 * 6. 유리 (brand.md §7)
 *
 * 재질 5요소를 CSS 로 옮긴 것:
 *   1. 반투명 프로스티드 유리   → backdrop-filter blur + 반투명 배경
 *   2. 그린이 스민 본체         → 배경 그라디언트에 브랜드 그린을 아주 옅게 섞는다
 *   3. rim light + 내부 발광    → 상단 inset 하이라이트 + 하단 inset 그림자
 *   4. 라운드 볼륨 + 소프트 섀도 → 큰 radius + 넓게 퍼지는 드롭섀도
 *   5. 화이트 반투명 내부 요소   → .v2-glass__plate
 *
 * brand.md §1 — 유리는 뒤에 광원이 있어야 유리로 읽힌다. 메시 위에만 올린다.
 * 흰 배경에 그냥 올리면 그냥 회색 사각형이 된다.
 * ========================================================================== */
[data-v2] .v2-glass {
  position: relative;
  border-radius: var(--v2-radius-xl);
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.62) 0%,
    rgba(255, 255, 255, 0.34) 45%,
    rgba(74, 165, 112, 0.12) 100%
  );
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  box-shadow:
    /* rim light — 위쪽 모서리에 빛이 걸린다 */
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    /* 내부 발광 */
    inset 0 -24px 48px -32px rgba(74, 165, 112, 0.45),
    /* 볼륨을 만드는 소프트 드롭섀도 */
    0 24px 60px -20px rgba(12, 22, 17, 0.28),
    0 4px 12px -6px rgba(12, 22, 17, 0.14);
}

/* 유리 안에 놓이는 화이트 반투명 판. 스크린샷·콘텐츠가 여기 올라간다. */
[data-v2] .v2-glass__plate {
  border-radius: var(--v2-radius-lg);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  overflow: hidden;
}

/* backdrop-filter 가 없으면 투명 배경이 그대로 비쳐 대비가 무너진다. 불투명하게 올린다. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-v2] .v2-glass {
    background: rgba(255, 255, 255, 0.86);
  }
}

/* =============================================================================
 * 7. 접근성
 * ========================================================================== */
[data-v2] .v2-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

[data-v2] :focus-visible {
  outline: 2px solid var(--v2-brand-ink);
  outline-offset: 3px;
  border-radius: var(--v2-radius-sm);
}

/* =============================================================================
 * 8. 상세 페이지 본문 섹션 프리미티브 (v2-shared/section-shell, v2-shared/section-head)
 *
 * approval 상세 재설계에서 추가. 히어로 아래 섹션들이 파티셜마다 제각각
 * padding/색/타이포를 인라인 <style> 로 재발명하던 것을 공용 클래스로 옮긴다.
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * 8.0 타이포 — 섹션 헤드
 *
 * 한때 이 컴포넌트만 쓰는 --v2-text-section-head(30→52, section 1의 --v2-text-section
 * 30→48보다 한 단 큰 값)를 따로 뒀다 — approval 한 페이지만 작업 범위였을 때
 * 홈·가격이 이미 쓰던 전역 토큰을 흔들지 않으려던 결정이었다. 그런데 그 사이
 * v2-shared/section-head 가 19개 상세 페이지 전체로 퍼졌고, 그 크기가 "너무 크다"는
 * 지적을 받았다 — 그래서 전용 토큰을 없애고 홈이 이미 쓰던 사이트 공통 섹션 헤드
 * --v2-text-section(30→48, 섹션 1)으로 합친다(아래 .v2-section-head__title).
 * 이제 홈과 상세 19개가 섹션 제목에 정확히 같은 크기를 쓴다.
 *
 * 1024px 에서 히어로 h1(--v2-text-display-2, 30→56 @4.6vw)과 겹치지 않는지 다시 확인:
 *   hero    = 0.046 × 1024 = 47.10px
 *   section = 0.040 × 1024 = 40.96px
 *   gap     = 6.14px (900px: 5.4px / 1200px: 7.2px / 1440px: 8px — 어느 폭에서도 안 붙는다)
 *
 * line-height 도 정리한다. approval 전용으로 새로 만들었던 --v2-leading-headline(1.28)은
 * 지웠다 — 전역 --v2-leading-tight 와 완전히 같은 숫자라 이름만 다른 중복이었다(최종
 * CTA 헤드라인에 쓰던 자리였는데, 이제 섹션 헤드와 크기를 맞췄으니 아래 두 역할 중
 * --v2-leading-section-head 로 합친다). 나머지 둘(--v2-leading-section-head,
 * --v2-leading-caption)은 진짜 다른 역할이라 남기되, 선언은 섹션 1(전역 토큰)로
 * 옮겼다 — 여기 남겨두면 다시 "approval 전용"으로 오해된다. */

/* section-shell 의 surface — 검정 지면은 없다(발주자 지시). */
[data-v2] .v2-section--canvas {
  background: var(--v2-canvas);
}
[data-v2] .v2-section--secondary {
  background: var(--v2-canvas-secondary);
}
[data-v2] .v2-section--warm {
  background: var(--v2-canvas-warm);
}

/* .v2-container 는 이미 위에서 정의됨(3장) — 문항이 적은 FAQ, 중앙 정렬
   최종 CTA처럼 1200px 컨테이너가 휑해 보이는 곳만 폭을 좁힌다.
   특이도를 .v2-container 단독보다 반드시 높여야 하므로 두 클래스를 함께 건다. */
[data-v2] .v2-container.v2-container--narrow {
  width: min(100% - var(--v2-gutter) * 2, var(--v2-container-narrow));
}

[data-v2] .v2-section-head {
  max-width: var(--v2-container-narrow);
  margin-bottom: var(--v2-space-7); /* 헤드→본문 48px, 여백 기준선 4:2:1 의 "2" */
}
[data-v2] .v2-section-head--center {
  margin-inline: auto;
  text-align: center;
}
[data-v2] .v2-section-head--left {
  margin-inline: 0;
  text-align: left;
}

[data-v2] .v2-eyebrow {
  display: inline-block;
  margin: 0 0 var(--v2-space-3);
  font-size: var(--v2-text-xs);
  font-weight: var(--v2-weight-emphasis);
  line-height: var(--v2-leading-caption);
  letter-spacing: 0.02em;
  color: var(--v2-brand-ink);
}

[data-v2] .v2-section-head__title {
  margin: 0;
  font-size: var(--v2-text-section);
  line-height: var(--v2-leading-section-head);
  font-weight: var(--v2-weight-heading);
  letter-spacing: var(--v2-tracking-heading);
  color: var(--v2-ink);
  word-break: keep-all;
  overflow-wrap: break-word;
}

[data-v2] .v2-section-head__lead {
  margin: var(--v2-space-4) 0 0;
  font-size: var(--v2-text-lead);
  font-weight: var(--v2-weight-medium);
  line-height: 1.6;
  color: var(--v2-ink-2);
  word-break: keep-all;
}