/* =============================================================================
 * 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.
     (2026-08-16 정정: 이 자리에 "#52c97f 가 footer-v2.html:200·header-v2.html:817·1121
     에 남아 있으니 언젠가 합쳐야 한다"고 적혀 있었는데 **이미 끝난 일이다.**
     지금 #52c97f 는 저장소 어디에도 값으로 존재하지 않고, header.html:340 과
     header-v2.html:509 의 "걷어냈다 — 마지막 자리 중 하나다" 주석만 남아 있다.
     낡은 주석이 없는 부채를 가리키고 있었다.)
     새 하드코딩 그린을 늘리지 말고 이 토큰을 쓸 것. */
  --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)   ← 정본은 design.md 「Shapes」
   *   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;

  /* 한국어는 **공백에서만** 끊는다. 기본값(normal)은 한글을 글자 단위로 끊을 수
   * 있다고 보므로 어절 한가운데가 갈라진다 — 2026-08-17 실측으로 25개 페이지
   * 390px 에서 298건이었다("조직 변경 시에/도", "노무 분쟁/이나", "활용할 수 있어/요.").
   *
   * 여기 한 번만 건다. word-break 는 상속되는 속성이라 지면 전체에 닿고, 지금
   * 헤딩·리드 등 스무 곳 남짓에 흩어져 있던 개별 선언은 이 값을 다시 말하는
   * 것이 된다(지우지는 않았다 — 그 자리를 읽는 사람에게는 그대로가 낫다).
   *
   * overflow-wrap 을 짝으로 둔다. keep-all 은 "끊지 마라" 이므로 공백 없는 긴
   * 문자열(URL·이메일·긴 영문 합성어) 하나가 칸보다 길면 그대로 넘친다.
   * break-word 는 **그 경우에만** 끊어 넘침을 막는다 — 평소 한국어 조판에는
   * 영향이 없다.
   *
   * 가운뎃점(·)은 이걸로 안 막힌다. "주주총회·/이사회" 처럼 · 뒤에서 끊기는 것은
   * keep-all 의 관할이 아니다(아래 「가운뎃점」 규칙 참고). */
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 폼 컨트롤은 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개 있었고 그중 하나는 공용 버튼 컴포넌트(`.button`, style.css)다.
   페이지마다 고칠 문제가 아니라 여기서 한 번 끊는다.

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

/* 링크는 호버해도 밑줄이 붙지 않는다 — v2 지면의 기본값.
 *
 * style.css(v1/v2 공용, 손편집 금지) 는 전역 규칙으로 `a:hover { text-decoration:
 * underline; }` 를 걸어 둔다(브랜드 문서에 없는 v1 시절 관행). 이 파일이 컴포넌트
 * 마다 `.foo:hover { text-decoration: none }` 를 되짚어 눌러야 했는데(예:
 * v2-cross-tile), 카드 전체가 <a> 인 컴포넌트에서는 h3 같은 블록 자손은 안 붙고
 * span 같은 인라인 자손에만 밑줄이 새어 나가 "일부 글자만 밑줄"로 보였다
 * (2026-08-26 실측 — v2-cross-tile 의 라벨·"자세히 보기" 텍스트).
 *
 * v1 은 건드리지 않는다 — style.css 를 고치면 밑줄이 곧 링크라는 신호로 쓰는
 * v1 페이지까지 같이 바뀐다. `:where([data-v2])` 로 v2 지면에서만 기본값을 뒤집는다.
 *
 * `:where()` 로 스코프를 감싸 특이도를 0 으로 죽인다 — 이 규칙 전체가 (0,1,1)
 * (엘리먼트 a + 가짜클래스 :hover). style.css 의 전역 규칙(0,0,2)은 이기지만,
 * 밑줄이 실제로 필요한 컴포넌트(GNB 드롭다운 `.start-gnb__link-item:hover`,
 * header-v2.html)의 (0,2,0) 규칙에는 진다 — 그런 컴포넌트는 자기 클래스로
 * 그대로 밑줄을 켤 수 있다. `[data-v2] a:hover` 처럼 그냥 썼다면 (0,2,1)이 되어
 * 그 의도된 밑줄까지 덮어썼을 것이다. */
:where([data-v2]) a:hover {
  text-decoration: none;
}

/* <br> 을 모바일에서도 살린다 — v2 지면에 한해서.
 *
 * style.css:328 이 992px 이하의 모든 `<br>` 을 지운다. 주석은 "줄바꿈 대신에
 * 스페이스로 변경함" 이라고 적어 뒀지만 `display: none` 은 공백을 넣지 않고 그냥
 * 지운다 — 그래서 앞뒤 어절이 붙는다("기업신용평가,30% 할인", "엑셀이 필요없는출퇴근").
 *
 * 원문에 공백을 넣어 고칠 수 없다. 실제로 `"…지원사업, <br />표준…"` 처럼 이미
 * 공백이 들어 있는데 `hugo --minify` 가 태그 앞 공백을 지운다(빌드 산출물 실측).
 * CSS 로 br 을 공백으로 바꿀 수도 없다 — Chromium 에서 `content: " "` 계열 후보
 * 넷을 렌더해 재 봤고 전부 실패했다.
 *
 * 남는 답은 지우지 않는 것이다. v2 헤드라인의 줄바꿈은 카피가 의도한 자리이고,
 * 모바일에서 그 줄이 다시 감기더라도 어절이 붙는 것보다 낫다. **본문 preview
 * (.zzp)에서는 더 분명하다** — 거기 `<br>` 은 그려진 제품 화면의 조판이라
 * 지우면 "월10", "연차2026-08-14 · 1일" 처럼 뭉갠다(모바일에서 붙던 61곳 중
 * 50곳이 목업 안이었다).
 *
 * v1 은 건드리지 않는다. `[data-v2]` 스코프라 v1 페이지에는 닿지 않는다. */
[data-v2] br:not(.sm-show) {
  display: revert;
}

/* 지분율·금액·통계는 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. 버튼 — 여기에 없다
 *
 * 버튼은 `static/assets/css/style.css` 의 `.button` 하나뿐이고 v2 페이지도 그걸 쓴다.
 *   .button.button-small   (헤더가 쓰는 크기)
 *   .button.button-large   (더 큰 CTA)
 *   .button-primary / .button-secondary / .button-tertiary
 *
 * 예전에는 여기에 `.v2-btn` 이 따로 있었다. 그때 주석이 스스로 밝혀 놓았듯
 * **형태는 `.button` 을 그대로 베끼고 색만 v2 토큰으로 바꾼 포크**였는데,
 * 갈라진 이유는 딱 하나 — style.css 를 고치면 v1 까지 바뀌어서 색을 거기서
 * 못 바꿨기 때문이다. 그 결과 같은 홈 화면에서 GNB 「시작하기」는 #000,
 * 히어로 「무료로 시작하기」는 #0c1611 로 **다른 검정 두 개**가 됐다.
 *
 * 이제 style.css 의 `.button-primary` 자체가 #0c1611(히어로 헤드라인과 같은 잉크)라
 * 포크가 존재할 이유가 없어져 접었다. 색을 바꿀 일이 있으면 style.css 를 고친다 —
 * 이 파일에 버튼 규칙을 다시 만들면 그때 그 분기가 그대로 돌아온다.
 *
 * 짙은 그린 패널(--v2-brand-deep) 위처럼 면이 바뀌는 자리는 그 섹션의 <style> 에서
 * `.button-primary` 색만 덮어쓴다(v2-shared/final-cta.html, home-main-v2/final-cta.html).
 * ========================================================================== */

/* =============================================================================
 * 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);
}

/* ── 섹션 메인 카피 타이틀 = 한 클래스 ────────────────────────────────────
   2026-08-16 — 서비스 소개 22 + 솔루션 3 페이지의 섹션 h2 를 전수 조사했더니
   공용 컴포넌트를 쓰는 것이 130개 중 34개(26%)뿐이었고, 시각 체계가 여섯
   갈래로 갈려 있었다.

     68개  39.056px / 700 / 행간 54.68   ← 전역 h2 를 그냥 상속(zz-m-b-1 등)
     34개  39.056px / 700 / 행간 51.55   ← 공용 .v2-section-head__title
     17개  48px     / 700 / 행간 63.36   ← .v2-final-cta__title
      8개  32px     / 800 / 행간 44.8
      나머지 셋은 28·32·20px 로 1개씩

   가장 흔한 두 갈래는 **크기가 같은데 행간만 3px 다르다** — 한 페이지 안에서
   섞이면 섹션마다 제목 덩어리 높이가 미묘하게 어긋나면서, 정작 "다른
   컴포넌트"라는 신호는 안 준다. 가장 나쁜 조합이다.

   그래서 **타이포그래피만 담은 클래스 하나**로 합친다. 사용자 지시로 40px.

   ⚠️ 여백은 담지 않는다. 기존 h2 들은 `zz-m-b-1`(margin-bottom .75rem) 같은
   유틸리티로 자기 아래 여백을 갖고 있는데, 여기서 margin 을 정하면 그 유틸리티를
   이기면서(스코프 있는 선택자가 더 세다) 페이지마다 간격이 조용히 무너진다.
   크기·굵기·행간·자간·색만 정하고 배치는 각자 쓰던 것을 그대로 둔다.

   ⚠️ 스코프를 붙이지 않는다. v2.css 는 v2 페이지에만 실리므로 파일 자체가
   이미 스코프다(실측: v1 인 articles-of-incorporation·hr 은 이 파일을 안 받는다). */
.v2-section-title,
[data-v2] .v2-section-head__title {
  /* 40px — 사용자 지시. **1000px 이상에서는 정확히 40px 이다**(4vw = 40px @1000).
     지시받은 값이 데스크톱에서 그대로 유지되고, 좁은 화면에서만 내려간다.

     고정 40px 이던 것을 유동으로 되돌린 이유: 390px 뷰포트에서도 40px 로 렌더돼
     한 줄에 여덟 글자가 들어갔고, 그래서 섹션 헤드가 네 줄로 감기며 한 어절짜리
     줄이 섞였다(실측: "소규모 기업에 꼭 / 필요한 / 경영지원 자동화 / 패키지").
     하한 30px 은 이 디자인 시스템이 이미 쓰던 값이다 — --v2-text-section 의
     clamp 하한과 같다(위 ⚠️ 대로 토큰 자체는 건드리지 않는다). */
  font-size: clamp(1.875rem, 4vw, 2.5rem); /* 30 → 40 */
  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__title {
  margin: 0;
  /* 2026-08-15 — --v2-text-section(30→48 clamp) → 전역 h2 와 같은 2.441rem.
     사용자: "이 섹션 타이틀 폰트가 너무 큰데 다른 섹션과 맞춰줘. 공용으로."

     1440px 실측: 이 헤드만 48px 이고 같은 페이지의 다른 섹션 h2 는 전부
     39.056px 이었다 — 공용 헤드 하나만 한 단 크게 떠 있었다.

     원래 48px 로 올린 근거는 section-head 파티셜 주석에 있다("39px 고정이라
     유동인 히어로 h1 과 1024px 근처에서 크기가 붙는다"). 그 근거를 다시
     실측했더니 지금은 성립하지 않는다:
       1024px  h1 47.1 / 39.1    1200px  h1 55.2 / 39.1
       1440px  h1 56.0 / 39.1    1920px  h1 56.0 / 39.1
     어느 폭에서도 히어로가 8px 이상 위에 있어 붙지 않는다(히어로 스케일이
     그 사이 바뀐 것으로 보인다). 그래서 안전하게 내릴 수 있다.

     ⚠️ --v2-text-section 토큰 자체는 그대로 둔다 — final-cta·solutions·
     segments 등 6곳이 같이 쓰고 있어 여기 사정으로 토큰을 바꾸면 그쪽이
     의도치 않게 따라 움직인다. 이 공용 헤드 규칙만 바꾼다. */
}

/* =============================================================================
 * 줄바꿈 — 히어로 헤딩과 메인 카피가 고르게 끊기게 한다
 *
 * 문제: 마지막 줄에 한 어절만 남는 고아 줄. 모바일만의 일이 아니다 —
 * 1440px 실측에서도 히어로 서브카피가 410px / 74px 로 끊겼다
 * ("…준비하는 표준 법인 / 운영 체계").
 *
 * 두 값을 나눠 쓴다. **`:has(br)` 로 가르는 것이 핵심이다.**
 *
 *   balance — 모든 줄의 길이를 고르게 맞춘다. 줄 수가 정해진 짧은 덩어리에 맞고
 *             제목에 쓰라고 만든 값이다. 다만 **강제 줄바꿈이 하나라도 있으면
 *             Chrome 이 통째로 포기한다** — 실측으로 확인했다(균일도 0.38 그대로).
 *   pretty  — 마지막 줄의 고아만 없앤다. `<br>` 이 있어도 동작하고, 작성자가
 *             의도한 줄바꿈 자리를 그대로 둔 채 그 뒤 구간만 고른다
 *             (0.38 → 0.71: "정확하게 남기고 간편히 / 관리해요" →
 *              "정확하게 남기고 / 간편히 관리해요").
 *
 * balance 를 `<br>` 있는 헤딩에 쓰면 아무 일도 안 일어나고, `<br>` 을 지워서
 * balance 를 살리면 작성자가 의도한 자리가 깨진다("중요한 기안·결재 / 사항,
 * 정확하게 남기고"). 그래서 지우지 않고 값을 가른다.
 *
 * 실측(390px, 7페이지 헤딩 36개): 균일도 0.55 미만 13개 → 3개, 평균 0.64 → 0.82.
 * 1440px(18개): 5개 → 2개, 평균 0.69 → 0.79.
 *
 * 여기 넣지 않은 것: 본문 문단. FAQ 답변 등은 `word-break` 가 keep-all 이 아니라
 * 어절 중간에서 끊긴다("조직 변경 시에/도", "위·/변조가"). 그건 줄 균일도가 아니라
 * 한국어 줄바꿈 규칙의 문제라 따로 다룬다.
 * ========================================================================== */
[data-v2] :is(
    .v2-phero-title,
    .v2-phero-sub,
    .v2-section-title,
    .v2-section-head__title,
    .v2-section-head__lead,
    .v2-hero-headline,
    .cap-headline,
    .home-final-cta-headline,
    .hsb-agent-headline
  ) {
  text-wrap: balance;
}

[data-v2] :is(
    .v2-phero-title,
    .v2-phero-sub,
    .v2-section-title,
    .v2-section-head__title,
    .v2-section-head__lead,
    .v2-hero-headline,
    .cap-headline,
    .home-final-cta-headline,
    .hsb-agent-headline
  ):has(br) {
  text-wrap: pretty;
}

[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;
}

/* =============================================================================
 * 9. 통계 행 (v2-shared/stat-row)
 *
 * "라벨 위 / 큰 숫자 아래 / 칸은 헤어라인으로만 나눔". zuzu.network 메인의
 * `.main-data-item` 6칸을 이 저장소 토큰으로 옮긴 것이다. 렌더된 화면에서 읽은
 * 값은 라벨 18.4px/500/자간 -0.16px, 숫자 34px/700/자간 -0.34px, 칸 padding 24px,
 * 칸 구분 rgba(0,0,0,.06) 1px 이었다. 여기서는 같은 역할의 토큰으로 바꿔 쓴다
 * (--v2-text-lead 는 1200px 이상에서 20px, --v2-text-stat 은 44px 로 레퍼런스보다
 * 한 단 크다 — START 는 칸이 3개뿐이라 칸 폭이 레퍼런스보다 넓다).
 *
 * 인라인 <style> 이 아니라 여기 두는 이유: 페이지를 가로지르는 프리미티브다
 * (이 파일 상단 규칙 2). 두 곳이 쓴다 — 홈 히어로의 로고 표(logos-v2) 가운데
 * 줄과 솔루션 페이지의 신뢰 지표(solution-startup-v2/stages). 인라인이면 두
 * 페이지가 각자 복사본을 갖고, body 중간에서 파싱되어 그 전까지 스타일 없는
 * 화면이 노출된다(scripts/check-inline-style-order.mjs 주석 참고).
 * ========================================================================== */

[data-v2] .v2-stat-row {
  display: grid;
  grid-template-columns: repeat(var(--v2-stat-cols, 3), minmax(0, 1fr));
}

[data-v2] .v2-stat-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--v2-space-2);
  padding: var(--v2-space-6) var(--v2-space-5);
  text-align: center;
}

[data-v2] .v2-stat-label {
  margin: 0;
  /* --v2-text-lead(17→20px) 였는데 "너무 크다"는 지적으로 본문 크기로 내렸다. */
  font-size: var(--v2-text-body);
  font-weight: var(--v2-weight-medium);
  line-height: var(--v2-leading-caption);
  color: var(--v2-ink-2);
  word-break: keep-all;
}

[data-v2] .v2-stat-value {
  display: flex;
  align-items: baseline;
  color: var(--v2-ink);
  /* --v2-text-stat(30→44px) 였는데 "너무 크다"는 지적으로 한 단 내렸다.
     상한 34px 은 zuzu.network 메인 통계의 실측값과 같다 — 처음 기준으로 삼은
     그 화면과 이제 숫자 크기가 정확히 일치한다. */
  font-size: clamp(1.625rem, 2.6vw, 2.125rem);
  font-weight: var(--v2-weight-heading);
  /* 숫자만 있는 줄이라 본문 행간(1.7)은 위아래로 크게 뜬다. 글자틀에 붙인다. */
  line-height: 1.05;
  letter-spacing: var(--v2-tracking-heading);
}

/* "+" 는 숫자의 절반 크기로 올려 위첨자처럼 둔다(레퍼런스와 같은 처리).
   ⚠️ 숫자와 같은 span 에 넣지 말 것 — 카운트업이 textContent 를 통째로
   덮어써서 사라진다. logos-v2.html 에서 실제로 겪어 주석까지 남아 있던 자리다. */
[data-v2] .v2-stat-affix {
  font-size: 0.5em;
  line-height: 1;
  transform: translateY(-0.95em);
}

[data-v2] .v2-stat-affix--suffix {
  transform: none;
  font-size: 1em;
}

/* frame: rule — 홀로 서는 띠. 위아래 선으로 열어두고 칸 사이만 세로선을 둔다.
   사방을 닫으면 카드가 되고, 그러면 "지면 위에 얹힌 지표"가 아니라 또 하나의
   컴포넌트로 읽힌다 (design.md 「Shadow Policy」— 테두리·지면 대비가 먼저다). */
/* 선은 그라데이션이다 (2026-08-17 지시: "중간으로 갈수록 보이고 양 끝은 사라지도록").
   이 frame 은 gap 이 아니라 **테두리**로 선을 그리므로(감싸는 표가 없어 홀로
   선다) 마스크 판을 쓸 수 없다 — 대신 border-image 로 테두리 자신을 그라데이션
   으로 칠한다. `1` 은 슬라이스 값이고, 폭이 있는 변에만 그려지므로 border-block
   에는 위·아래만 나온다.
   축을 각 선의 **길이 방향**에 맞춰야 한다: 위아래 선은 가로로 길어 90deg,
   칸 사이 세로선은 세로로 길어 180deg 다. 축을 잘못 걸면 선 전체가 균일하게
   엷어지기만 하고 "양 끝이 사라지는" 그림이 안 나온다. */
[data-v2] .v2-stat-row--rule {
  border-block: 1px solid var(--v2-line);
  border-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, var(--v2-line) 28%, var(--v2-line) 72%, rgba(0, 0, 0, 0) 100%) 1;
}

[data-v2] .v2-stat-row--rule .v2-stat-cell + .v2-stat-cell {
  border-left: 1px solid var(--v2-line);
  border-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, var(--v2-line) 28%, var(--v2-line) 72%, rgba(0, 0, 0, 0) 100%) 1;
}

/* frame: table — 이미 gap 1px 격자 안에 들어가는 줄(logos-v2 의 .sp-wall).
   gap 1px 사이로 격자선이 비쳐야 하므로 칸에 지면은 깔되 **흰색**이다.
   2026-08-17: 예전에는 여기에 --v2-canvas-secondary 를 깔아 이 줄만 가라앉혔는데,
   지면색을 걷으라는 지시로 로고 칸과 같은 흰색으로 맞췄다. 이제 이 줄이 띠로
   읽히는 것은 색이 아니라 **숫자 크기**가 한다(로고 44px vs 라벨 20px). */
/* 2026-08-17: background 를 걷었다. 선을 감싸는 표(logos-v2 의 .sp-wall)가
   ::before 한 장으로 **모든 격자선**을 그라데이션으로 그리게 바뀌었고, 이 줄이
   자기 배경을 또 갖고 있으면 그 줄의 세로선만 마스크를 안 받아 또렷하게 남는다.
   이 frame 의 계약은 원래부터 "감싸는 표가 선을 그린다" 였다(위 주석) — 그
   계약을 지키는 쪽으로 정리한 것이다. gap 1px 은 그대로 둔다: 칸 사이를 벌려
   그 틈으로 표의 선이 비치게 하는 것이 이 frame 이 하는 일이다. */
[data-v2] .v2-stat-row--table {
  gap: 1px;
}

[data-v2] .v2-stat-row--table .v2-stat-cell {
  background: var(--v2-canvas);
}

/* 3칸을 유지할 수 없는 폭에서 세로로 쌓는다.
   640px 에서 칸 하나가 213px 인데, 이때 --v2-text-stat 은 30px 이고 "125,000" 이
   약 110px + 좌우 padding 48px = 158px 이다. 이보다 좁아지면 숫자가 줄바꿈된다. */
@media screen and (max-width: 640px) {
  [data-v2] .v2-stat-row {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-v2] .v2-stat-cell {
    padding: var(--v2-space-5);
  }

  [data-v2] .v2-stat-row--rule .v2-stat-cell + .v2-stat-cell {
    border-left: 0;
    border-top: 1px solid var(--v2-line);
  }
}