/* =========================================================================
   「창업의 모든 것」(창모) — 허브 공용 시트
   assets/hub.css

   담는 것 : 참조 실측값을 따른 다크 허브 셸 전체.
     랜딩(/)          — 헤더 · 제목(단어 롤링) · 검색바 · 칩 · 배너 ·
                        아이콘 8칸 · 마일리지 미니카드 · 지금 뜨는 이야기 · 푸터
     하위 3페이지     — /fund/ · /guide/ · /tools/ 의 단일 컬럼 본문
     공통             — 스크롤 고정 메뉴 · 색 토큰 · 롤링 슬롯 규칙

   로드 순서 : style.css → hub.css
     랜딩 · /fund/ · /guide/ · /tools/ 는 여기까지만 싣는다.

   [2026-08-27 셸 통일] /feed/ · /my/ · /mileage/ 는 3단 그리드 · 위젯 · 레일을
     portal.css 가 그리고 있어 hub.css 와 **함께** 싣는다. 두 시트의 클래스는
     .hub-* 와 .pt-* 로 갈라져 부딪히지 않지만, portal.css 가 :root 에서 만드는
     밝은 별칭(--pt-ink 등)이 남아 흰 카드를 그린다. 그래서 그 페이지들은
     맨 마지막에 assets/hub-legacy.css 를 실어 --* · --pt-* 두 벌의 **값만**
     다크로 바꿔 끼운다. 색값은 아래 --cm-* 한 곳에서만 관리한다.
     /terms/ · /privacy/ 는 portal.css 를 아예 싣지 않는다(자체 인라인 시트).

   ── 접두사 ────────────────────────────────────────────────────────────────
   **.hub- 한 벌만 쓴다.** 이전 시트(hero.css)는 .hero-* 와 .cm-ld__* 두 벌을
   한 규칙에 묶어 두었고, 실제로 세 번째 벌(.chm-*)이 섞여 들어와 좌우 여백이
   24+24 로 두 번 얹히며 601~637px 구간에서 제목이 두 줄로 접혔다.
   접두사 혼용이 레이아웃을 깬 전례가 있으므로 이름을 하나로 못 박는다.

   ── 지키는 규칙 ───────────────────────────────────────────────────────────
   - 트랜지션은 background-color .15s 하나뿐(+ 접근성 outline-color).
     transform · box-shadow · scale 을 호버에 쓰지 않는다.
     움직이는 속성은 롤링의 transform(Y) · opacity · width 셋과
     고정 메뉴의 transform(Y) 뿐이다.
   - :hover 규칙은 전부 @media (hover:hover) 안에 둔다. 누름은 .is-pressed 로 뺀다.
   - 섹션 높이를 px 로 고정하지 않는다. 행은 min-height 만 잡는다.
   - 38px 는 h1 하나뿐. [WIN0827 공유시트] 그 아래 사다리는 네 칸이다 —
     h1 38 › 섹션 제목 20 › 본문 · 라벨 16 › 꼬리 문구 · 배지 13.
     20 과 38 사이에 다른 값을 만들지 마라.
   - 브랜드 주황 계열을 한 곳도 쓰지 않는다. 검정 · 파랑 · 회색만.
     빨강(--cm-err)은 오류 표시에만.
   - 장식 오버레이에는 pointer-events:none.

   ── 명암비 (측정된 사실) ──────────────────────────────────────────────────
   #2E6BFF 는 #1A1C20 위에서 3.8:1 이다. 16px 본문 기준 4.5:1 에 못 미친다.
     → 16px 이하 글자(링크 · 배지 글자 · 탭 활성 글자)에는 #8FB4FF 를 쓴다.
     → #2E6BFF 는 버튼 바닥 · 탭 밑줄 · 테두리 같은 「면」과 24px 이상 큰 글자에만.
     → 13px 배지는 파란 글자를 단독으로 쓰지 않는다. 옅은 파란 바탕(#1E2A44)에
       #8FB4FF 글자를 얹는다.
   ========================================================================= */


/* ── 1. 색 토큰 — 한 곳에 모은다 ───────────────────────────────────────────
   이전에는 이 팔레트가 hero.css 의 .hero-ld / .cm-ld 선택자 「안」에만 있어
   랜딩 밖에서는 상속되지 않았다. :root 로 끌어올려 랜딩과 /fund/ /guide/
   /tools/ 가 같은 값을 읽게 한다.
   이름은 역할 기반이다 — teal · brown 같은 색 이름을 쓰지 않는다.
   style.css 의 밝은 토큰(--navy · --ink · --line …)과 이름이 겹치지 않도록
   전부 --cm- 접두사를 붙였다. 두 벌이 같은 페이지에 있어도 충돌하지 않는다. */
:root{
  /* ── [LIGHT0829-R2] 라이트 팔레트 — **대표 승인 완료. 되돌리지 마라.** ─────────
     승인 : 2026-08-29 대표이사. 「당근은 흰 배경이 맞다. 라이트로 가고 설계도를 고친다.」
     설계도 개정 : _설계도_유입개편_20260829.md **0-A 절**(신설) 이 다크 6색 문장을 대체했고,
       같은 문서 「【세로 리듬·반응형】」 줄의 색 문장도 0-A 를 가리키도록 고쳤다.
       → 다크로 되돌리기 전에 그 절을 먼저 읽어라. 근거와 승인 기록이 거기 있다.

     왜 : 창모 다크는 당근 **랜딩 한 장**만 잰 값에서 나왔는데(8/27), 그 측정이
       #1A1C20 을 배경으로 읽었다. 실제로는 **글자색**이다(color 10,450회 · background 0회).
       8/29 전수조사(10 URL × 2뷰포트, 20회 캡처 전부 성공)에서 당근 10개 페이지의
       body 배경은 전부 rgb(255,255,255) 로 확인됐다.
       근거 : daangn-survey/_전수조사_20260829.md · 원자료 daangn-survey/sweep/

     되돌리기 : assets/hub.css.bak-dark-20260829 (다크 스냅샷)
     hub-legacy.css : 원래 **밝은** portal/community/mypage 를 다크로 덮으려고 만든 시트다.
       라이트에서는 값만 따라오면 되므로 링크를 지우지 마라 — 이름을 합치는 층으로 계속 쓴다.
     ──────────────────────────────────────────────────────────────────────────── */

  /* 면 — 당근 실측 팔레트 */
  --cm-bg:#FFFFFF;          /* body 바닥 — 실측 rgb(255,255,255) */
  --cm-surf:#FFFFFF;        /* 섹션 면 = 바닥. 당근은 섹션마다 색을 갈지 않는다 */
  --cm-surf-2:#F7F8F9;      /* 옅은 면 — 실측 480회. 칩 · 검색바 · 행 */
  --cm-surf-3:#F3F4F5;      /* 아이콘 타일 바탕 · 호버 면 — 실측 789회 */
  /* 트랜지션이 background-color 하나뿐이라 surf-2 → surf-3 이 호버 표시의 전부다.
     아이콘 타일은 기본이 이미 surf-3 이라 갈 자리가 없다 — 타일 전용으로 한 단 더 둔다. */
  --cm-surf-4:#E8EAEE;      /* 타일 호버 면. 다른 곳에 쓰지 마라 */
  --cm-edge:#E4E6EA;        /* 옅은 테두리 */
  --cm-edge-2:#D1D3D8;      /* 진한 선 — 실측 1,872회 */

  /* 글자 — 흰 바탕 기준 명암비를 전부 계산해 넣었다 */
  --cm-txt:#1A1C20;         /* 본문 · 제목 — 흰 위 17.06:1 (당근 본문색 그대로) */
  --cm-txt-2:#2A2E35;       /* 본문 2 */
  --cm-mid:#555D6D;         /* 중간 글자 — 칩 · 부제. 흰 위 6.62:1 (당근 실측색) */
  /* [LIGHT0829] 당근의 보조 글자 #868B94 는 **흰 바탕에서 3.42:1** 로 AA(4.5) 미달이다.
     참조값이라도 그대로 베끼면 창모가 접근성 기준을 깬다. 같은 계열에서 4.5 를 넘는
     가장 가까운 값으로 한 단 내렸다 — 흰 4.98 · #F7F8F9 4.68 · #F3F4F5 4.52 셋 다 통과. */
  --cm-mut:#6B7079;         /* 보조 글자 */
  --cm-dim:#868B94;         /* 장식 · 구분점 「·」 · 비활성 아이콘 전용. **글자색 금지** */

  --cm-white:var(--cm-txt); /* 폐기 예정 별칭. 인라인 <style> 14건이 아직 참조한다 */

  /* 강조 — 창모 블루 */
  --cm-accent:#2E6BFF;      /* 면 · 테두리 · 버튼 바닥 */
  /* [LIGHT0829] #2E6BFF 는 **흰 바탕에서만** 4.50:1 로 간신히 AA 다.
     --cm-surf-2 위 4.24 · --cm-surf-3 위 4.09 로 면 위에서는 미달한다.
     그래서 링크 **글자**는 어느 면에서든 이 진한 파랑을 쓴다(흰 6.70 · 면 6.08). */
  --cm-accent-txt:#1B4FD6;  /* 면 위 링크 글자 */
  --cm-accent-dk:#1D4ED8;   /* 눌림 · 호버 바닥 */
  --cm-accent-soft:var(--cm-accent-txt); /* 다크 시절 이름. 라이트에서는 진한 파랑이 맞다 */
  --cm-accent-bg:#EEF3FF;   /* 옅은 파란 배지 바닥 */
  --cm-on-accent:#FFFFFF;   /* #2E6BFF 면 위 글자 — 4.50:1 */
  --cm-focus:#1B4FD6;       /* 포커스 링 — 흰 바탕에서 읽혀야 한다 */

  --cm-err:#C81E1E;         /* 오류 표시 전용 — 흰 위 5.74:1 */
  /* [2026-09-03 GEN3] 검수 판정 4종 색. 걸림은 --cm-err 계열, 경계는 새 warn 계열(흰 위 #9A6700 = 5.9:1). 면은 옅게. */
  --cm-err-bg:#FDECEC;
  --cm-warn:#9A6700;
  --cm-warn-bg:#FFF4D6;

  /* 폭 */
  /* [WIN0827 공유시트] 1248px 였다. 이 값을 읽는 것은 셸(.hub-hd__in · .hub-nav__in ·
     .hub-sticky__in · .hub-ft__in)뿐인데 본문(.hub-main)은 960 이라 셸의 어깨가
     본문보다 양쪽으로 144px 씩 나가 있었다. 셸과 본문의 왼쪽 끝을 맞춘다.
     3단 격자 페이지(body.pg · body.is-cm)는 .pt-wrap 이 1400 이라 2절 끝의
     예외 블록이 되돌린다.
     되돌리려면 1248px 로 되돌리고 그 예외 블록을 지운다. */
  /* [LAYOUT0828] 무엇을 : 셸(--cm-top-w)과 본문(--cm-main-w)이 둘 다 960px 이라
     1920px 화면에서 양쪽 480px 씩이 통째로 비었고, 셸과 본문의 폭 위계가 0 이었다.
     왜 : 당근 실측은 셸(푸터) 1248 · 목록 본문 1150 으로 두 값이 다르다. 셸이 본문의
     어깨가 되도록 49px 씩 안으로 넣는다. 1920 에서 좌우 여백 480 → 336px.
     --cm-top-w 는 별칭으로 남긴다 — 이 이름을 읽는 셸 규칙 다섯을 고치지 않아도 따라온다.
     되돌리려면 --cm-shell-w 와 --cm-main-w 를 960px 로 되돌린다. */
  --cm-shell-w:1248px;      /* 셸 — 헤더 · 전역메뉴 · 고정메뉴 · 푸터 안쪽 */
  --cm-top-w:var(--cm-shell-w);   /* 별칭 (기존 이름 그대로 통과) */
  /* [LAYOUT0828-R2] 무엇을 : --cm-lane-w 를 신설하고 --cm-main-w 를 그 값에서 계산되게 묶었다.
     왜 : 규격에 적힌 폭이 어떤 항목에서는 **바깥값**(main 의 max-width 1150), 어떤 항목에서는
          **안쪽값**(내용이 실제로 쓰는 1102)으로 쓰여 회차마다 창이 갈렸다. 이름을 둘로 갈라
          1150 = 1102 + --cm-pad 24 × 2 를 한 줄에 못 박는다. 규격의 모든 폭은 안쪽값이다.
     되돌리려면 : --cm-lane-w 를 지우고 --cm-main-w:1150px 로 되돌린다. */
  --cm-lane-w:1102px;       /* ★ 본문 레인 **안쪽값**. 1920 에서 왼쪽 축 x=409 */
  --cm-main-w:calc(var(--cm-lane-w) + var(--cm-pad) * 2);   /* = 1150px (바깥값) */
  /* [LAYOUT0828-R2] 무엇을 : 읽는 줄 상한 한 값을 신설했다.
     왜 : 지금까지 62ch(약 620px)와 720px 두 값이 섞여 있었고, 푸터 ※ 고지는 9창 전부
          1200px 로 흘러 사이트에서 읽는 줄을 넘는 유일한 자리였다.
     구현은 max-width 가 아니라 padding-right:max(0px,calc(100% - 720px)) 다 —
     글자만 720 에서 접히고 선(border-top · border-bottom)은 레인 전폭을 가로지른다.
     되돌리려면 : 이 줄과 17-33 (a) 덩이를 지운다(62ch 로 돌아간다). */
  --cm-read-w:720px;
  /* [LAYOUT0828] 랜딩 블록별 폭 — 하나로 통일하지 않는다. 754 → 722 → 900 → 1150 → 1248
     로 아래로 갈수록 넓어지는 계단이 랜딩의 세로 리듬을 만든다. */
  --cm-hero-w:754px;        /* 히어로 — 제목 · 검색바 · 칩 셋만 읽는다 (당근 검색바 실측) */
  /* [2026-09-02 GEN1] 722px(64×8 + 30×7)였다. 마일리지마켓 칸을 빼 7칸이 되었다. 되돌리려면 722px · repeat(8). */
  /* [2026-09-03 GEN3] 「인증」 칸이 들어와 다시 8칸. */
  --cm-ics-w:722px;         /* 아이콘 8칸 = 64×8 + 30×7 */
  --cm-ic-col:64px;         /* 8칸 한 칸 폭. minmax(64px,1fr) 로 쓰지 마라 */
  /* [SPEC0829] 신설. 실측 아이콘 칸은 64×75 인데 행 높이 합이 100 이었다(44+20+20+8+8).
     44 + 8 + 20 = 72 두 행으로 줄이고 상자를 이 값에 못 박는다. 8번 칸의 보조문구
     (「별도 로그인」)는 어떤 배치로도 75 안에 들어가지 않으므로 상자 **밖**에 건다
     — (7)절 .hub-ic__sub 참조. 되돌리려면 이 줄과 (7)절의 height · 보조문구 절을 지운다. */
  --cm-ic-h:75px;           /* 8칸 한 칸 높이 (당근 실측) */
  --cm-ic-gap:30px;         /* 8칸 열 간격. 칸 사이 세로선은 이 gap 의 정중앙에 선다 */
  /* [WIN0827D-R3 공유시트] 754px(검색바 실측 폭)였다. 1400px 실측에서 랜딩이 한 화면에
     두 레인을 썼다 — 검색바 · 칩 · 8칸 · 마일리지 · 광고는 x=323 w=754 인데
     「창업 인증 피드 미리보기」만 x=244 w=912 라, 세로로 훑으면 왼쪽 끝이 피드 구간에서
     79px 왼쪽으로 튀었다(before 스크린샷에서 눈으로 보인다). 912 = 본문 콘텐츠 폭
     (셸 960 − 좌우 --cm-pad 24)이라 여섯 블록이 전부 x=244 · w=912 한 줄에 선다.
     이 변수를 읽는 곳은 랜딩 전용 5개 규칙뿐이다(.hub-search · .hub-chips · .hub-ics ·
     .hub-ad · .hub-mile) — 다른 8개 창에 영향이 없음을 grep 으로 확인했다.
     되돌리려면 754px 로 되돌린다. */
  /* [LAYOUT0828-R2] 무엇을 : 912px 하드코딩이었다 → var(--cm-hero-w)(754) 로 묶었다.
     왜 : 이 이름을 읽는 랜딩 규칙 다섯(.hub-search · .hub-chips · .hub-ad · .hub-ics · .hub-mile)이
          전부 뒤 규칙(17-32)에 754 · 722 로 덮여 있어 912 는 화면에 한 번도 나오지 않는
          **유령 레인**이었다. 다음 회차가 이 숫자를 규격으로 오인하지 않게 값을 묶는다.
          실측 확인 : .hub-ad · .hub-mile 은 9창 마크업에 0건이라 닿는 요소가 없다.
     되돌리려면 : 912px 로 되돌린다. */
  --cm-search-w:var(--cm-hero-w);   /* = 754px. --cm-hero-w 의 별칭이다 */
  /* [WIN0827 공유시트] 랜딩 가운데 레인을 검색바 폭(754) 하나로 통일하면서
     .hub-ad · .hub-mile 의 참조를 걷어냈다. 실측값 기록으로만 남겨 둔다. */
  /* [LAYOUT0828] 735px 였다(실측 기록용으로만 남아 있었다). 랜딩 배너 한 장만 읽는다.
     되돌리려면 735px 로. */
  --cm-ad-w:900px;          /* 랜딩 배너 — 랜딩에서 유일하게 배경면을 갖는 블록 */
  --cm-pad:24px;

  /* ── [SPEC0828] 여백 · 치수 규격 ──────────────────────────────────────────
     회차 3 까지 창별 담당 9명이 각자 값을 정해 같은 역할에 다른 값이 쌓였다.
     실측(1400px) : h1 상단이 156 · 168 · 171 · 173 · 192 · 195 · 195 · 205 로 49px 흔들리고,
     2단 창의 사이드 상단이 126 · 126 · 160 으로 갈리고, 같은 라벨의 버튼이 44 와 48,
     같은 배지가 22.19 · 22.89 · 24 · 26.19 네 값이었다.
     여기 한 벌을 못 박고 창은 이 변수를 **쓰기만** 한다. 새 값을 만들지 마라.
     되돌리려면 이 블록을 지우고 각 규칙의 var() 를 원래 px 로 되돌린다. */
  --cm-main-pt:32px;        /* main 위 안여백 — 지금 20/32/48/54 였다 */
  --cm-main-pb:64px;        /* main 아래 안여백 — 지금 40/56/80 이었다 */
  --cm-bc-h:20px;           /* 빵부스러기 한 줄 높이 — 지금 20/21/26 이었다 */
  --cm-bc-gap:10px;         /* 빵부스러기 → h1 — 지금 0/10/12/14 였다. 32+20+10 = 62 */
  --cm-h1-gap:12px;         /* h1 → 바로 다음 형제 — 지금 10/12/16 이었다 */
  --cm-head-gap:40px;       /* 머리 블록 → 첫 카드 — 지금 36/40/64 였다 */
  /* [LAYOUT0828] 32px 였다. 9창 전부에서 32px 이 5~6번 반복돼 「여기까지가 한 묶음」을
     여백이 말하지 못했다. 묶음 안은 좁게(12~24) · 묶음 사이는 넓게(64) 가른다.
     되돌리려면 32px 로. */
  /* [LAYOUT0828-R5] 64px 이었다. 17-34 절이 이미 --cm-gap-block(72) 로 덮고 있어
     이름과 실사용값이 8px 어긋나 있었다(실측 9창 전부 72). 이름을 값에 맞춘다.
     되돌리려면 64px 로 되돌린다. */
  --cm-block-gap:72px;      /* main 안 형제 블록 사이 */
  --cm-tight-gap:var(--cm-gap-s);  /* [SPEC0828-R2] 12px 하드코딩이었다. 사다리 --cm-gap-s 의 별칭으로 묶는다 */
  --cm-side-gap:12px;       /* 사이드 카드 사이 — /feed/ 만 29px 이었다 */
  --cm-card-r:10px;         /* 카드 모서리 — 9창이 이미 10 이다. 새 값이 끼지 못하게 못 박는다 */
  /* 이름 주의 : --cm-hd-h 는 이 파일이 이미 **헤더 높이(60px)** 로 쓰고 있다.
     규격서의 「--cm-hd-h:44px(카드 머리띠)」를 그 이름으로 넣으면 9창 헤더가 44px 로
     찌그러진다. 역할이 다른 두 값이라 이름을 갈랐다. */
  --cm-cardhd-h:var(--cm-band-h);  /* [SPEC0828-R2] 44px 하드코딩이었다. 규격서 이름 --cm-band-h 의 별칭 */
  --cm-cta-h:44px;          /* 본문 버튼 — 지금 44(feed)와 48(my·mileage) 두 벌이었다 */
  --cm-btn-h:36px;          /* 사이드 버튼 — 지금 36(feed)과 34(my·mileage) 두 벌이었다 */
  --cm-badge-h:24px;        /* 배지 — 지금 22.19/22.89/24/26.19 네 값이었다 */
  --cm-chip-h:32px;         /* 누르는 칩 — 지금 24/32/34/35.5 네 값이었다 */
  /* [LAYOUT0828] 40px 였다. 사이트 안 모든 2열 가로 거터를 --cm-gap-2xl(48) 한 값으로 모은다.
     되돌리려면 40px 로. */
  --pt-gutter:var(--cm-gap-2xl);   /* 2단 열 거터 = 48px */

  /* ── [SPEC0828-R2] 간격 사다리 여섯 칸 ─────────────────────────────────
     실측(1400px)에서 gap · row-gap · column-gap 이 4 · 6 · 7 · 8 · 10 · 12 · 16 · 18 ·
     20 · 24 · 28 · 32 · 40 열세 값이었다. 여섯 칸만 남기고 그 밖의 값을 쓰지 마라.
     치환표 : 4/6/7 → 8 · 10 → 12 · 18 → 16 · 20/28 → 24 · 24(2단 세로) → 32.
     되돌리려면 이 네 줄을 지우고 각 규칙의 var() 를 원래 px 로 되돌린다. */
  --cm-gap-xs:8px;          /* 아이콘 · 배지가 글자에 붙는 자리 · 칩과 칩 사이 */
  --cm-gap-s:12px;          /* 한 묶음 안 — 줄과 줄 */
  --cm-gap-m:16px;          /* 묶음과 묶음 */
  --cm-gap-l:24px;          /* 카드 안 열과 열 · 아이콘칸↔세로선↔글 */
  /* ── [LAYOUT0828] 사다리를 여섯 칸에서 여덟 칸으로 넓힌다 ──────────────
     묶음 안(8/12/16/24)과 묶음 사이(32/48/64/96)가 겹치지 않게 가른다.
     이 여덟 값 밖의 gap · margin 을 새로 쓰지 마라.
     되돌리려면 이 블록을 지우고 각 규칙의 var() 를 원래 px 로 되돌린다. */
  --cm-gap-xl:32px;         /* 카드 없는 블록의 세로 gap · 배너→8칸 */
  --cm-gap-2xl:48px;        /* 2열 격자의 가로 gap 한 값(당근 열간격 실측 48) */
  --cm-sec-gap:96px;        /* 성격이 다른 섹션 사이 — 64(블록)와 확실히 갈린다 */
  --cm-note-gap:56px;       /* 꼬리 고지문을 본문에서 떼는 간격 */
  /* [LAYOUT0828] 이번에 새로 긋는 선(밑줄 · 세로선)은 전부 이 하나를 쓴다.
     새 색이 아니다 — --cm-dim(#555D6D) · --cm-edge 와 같은 값이다. 글자색 금지. */
  --cm-rule:var(--cm-dim);
  --cm-row-py:20px;         /* 밑줄 목록 행의 상하 안여백 — 행 사이 실질 40px */
  --cm-ent-ico:56px;        /* 아이콘|세로선|글 항목의 아이콘 칸 */
  /* [LAYOUT0828] 등장 문법 한 벌. 지연은 .d1~.d6 여섯 단계까지만. */
  /* [DAANGN0829] 42px / 1s / cubic-bezier(.19,1,.22,1) 였다. 전수조사 결과 당근에는
     섹션 등장 애니메이션이 **없다**(스크롤 diff 의 opacity 0→1 은 전부 이미지 지연 로딩이다).
     그래도 등장 문법을 지우지 않는 이유 : 디자인 기준(요소가 정지한 채 나타나지 않는다)을
     지키기 위해서다. 대신 참조에 없는 큰 움직임은 걷어낸다 — 42 → 14px · 1s → .45s ·
     이징도 참조 계열로 맞춘다. 되돌리려면 42px / 1s / cubic-bezier(.19,1,.22,1) 로. */
  --cm-rv-dist:14px;
  --cm-rv-dur:.45s;
  --cm-rv-ease:cubic-bezier(.35,0,.35,1);
  --cm-rv-step:.12s;
  /* --cm-block-gap(32) · --pt-gutter(40) 이 사다리의 다섯째 · 여섯째 칸이다(위에 있다). */

  /* ── [SPEC0828-R2] 카드 · 모서리 ───────────────────────────────────────
     같은 역할에 값이 둘 이상이던 자리를 하나로 못 박는다. 새 값을 만들지 마라.
     되돌리려면 이 블록을 지우고 각 규칙의 var() 를 원래 px 로 되돌린다. */
  --cm-band-h:44px;         /* 카드 머리띠 min-height. + border-bottom 1px = 실측 45px */
  --cm-card-px:16px;        /* 카드 안 좌우 안여백 — 실측 16 과 26 두 값이었다 */
  --cm-card-pad:14px 16px;  /* 카드 본문 안여백 */
  --cm-btn-r:6px;           /* 버튼 모서리 — home .hub-search__go 만 8px 이었다 */
  --cm-chip-r:16px;         /* 칩 모서리(높이 32 의 절반) — 999px · 3px 이 섞여 있었다 */
  --cm-badge-r:3px;         /* 배지 모서리 — 9창 이미 3px */
  --cm-notice-pad:16px 20px;/* 법정 문서 파랑 띠 고지 상자 — terms 만 20px 22px 였다 */
  /* 사이트의 모서리 값은 넷뿐이다 : 카드 10 · 칩 16 · 버튼 6 · 배지 3. */

  /* ── [SPEC0828-R2] 글자 사다리의 줄 높이 · 자간 ─────────────────────────
     실측 : 16px 본문 줄 높이가 19.2/23.2/24/25.6/26/27.2/28/28.8 여덟 값,
     13px 꼬리가 13/16.9/18.2/19.5/20/20.15/20.8/22/22.1/23.4 열 값,
     h2 자간이 -0.16/-0.14/-0.4/-1px 네 값이었다. h1 이 9창 모두 -0.76px(=-.02em)이므로
     -.02em 이 이 집의 값이고 20px 에서는 -0.4px 이다.
     ※ terms · privacy 의 <article> 안 조문 본문에는 적용하지 않는다.
     되돌리려면 이 다섯 줄을 지운다. */
  --cm-h2-ls:-0.4px;        /* 섹션 제목 자간 = 20px 의 -.02em */
  --cm-lh-h2:28px;          /* 섹션 제목 줄 높이 */
  --cm-lh-h3:24px;          /* 카드 안 소제목 줄 높이 */
  --cm-lh-body:26px;        /* 16px 본문 · 리드 줄 높이 */
  --cm-lh-tail:20px;        /* 13px 꼬리 · 빵부스러기 줄 높이 */

  /* ── [SPEC0828-R3] 글자 사다리 네 칸의 값을 토큰으로 못 박는다 ─────
     지금까지 크기(38/20/16/13)는 규칙마다 px 로 적혀 있어 창별 담당이 15px · 14px ·
     12px · 30px 을 계속 새로 만들었다(실측 : 15px 11곳 · 12px 13곳 · 14px 1곳 · 30px 1곳).
     이름을 주면 다음 회차에 「사다리 밖 값」이 눈에 띄다.
     자간은 집안 값 -.02em 을 각 칸의 px 로 미리 계산해 둔 것이다 —
     38→-0.76 · 20→-0.4 · 16→-0.32(제목) · 13→-0.26(위젯 제목).
     본문 · 꼬리는 .hub-body 의 -.01em 을 따른다 — 16→-0.16 · 13→-0.13.
     되돌리려면 이 블록을 지우고 각 규칙의 var() 를 원래 px 로 되돌린다. */
  --cm-fs-h1:38px;
  --cm-lh-h1:var(--cm-lh);
  --cm-h1-ls:-0.76px;
  --cm-fs-h2:20px;
  --cm-fs-h3:16px;
  --cm-h3-ls:-0.32px;
  --cm-fs-body:16px;
  --cm-body-ls:-0.16px;
  /* [RULE0829-3] 13px 였다. 당근 실측 사다리에 **13 은 없다** — 42/38/32/28/24/20/18/16/**14**/12 다.
     그 자리(배지 · 꼬리 문구 · 카운트 · 브레드크럼 · 작은 버튼 · 정렬 컨트롤)를 당근은 14 로 쓴다.
     아이콘 라벨만 14 로 올려 두어 **한 사이트에 13 과 14 가 공존**하던 상태를 끝낸다.
     같은 회차에 하드코딩 font-size:13px 93곳을 전부 이 토큰 참조로 바꿨다 —
     이제 꼬리 글자 크기는 **이 한 줄**이 전부다. 포크 뒤에도 여기만 고치면 12창이 따라온다.
     되돌리려면 13px 로. */
  --cm-fs-tail:14px;
  --cm-tail-ls:-0.13px;
  --cm-fs-wg:13px;
  --cm-wg-ls:-0.26px;
  --cm-lh-ctl:1;
  /* 사다리 밖 금지값 : 12px · 14px · 15px · 30px. 새로 만들지 마라. */

  /* ── [SPEC0828-R3] 누르는 것 · 배지 · 칩의 나머지 치수 ──────── */
  --cm-fw-ctl:700;
  --cm-fs-cta:var(--cm-fs-body);
  --cm-cta-px:20px;
  --cm-fs-btn:var(--cm-fs-tail);
  --cm-btn-px:10px;
  --cm-badge-px:8px;
  --cm-badge-maxw:120px;
  /* [LAYOUT0828-R6] 14px 였다. 14 는 랜딩 칩을 4 × 178 + 3 × 14 = 754 로 정확히
     채우려던 계산값인데, 아래 (4) 에서 그 고정 격자 자체를 폐기하므로 사다리 밖의
     예외를 둘 이유가 없어졌다. 사다리 안 16 으로 올린다.
     되돌리려면 14px 로. */
  --cm-chip-px:16px;
  /* [LAYOUT0828-R6] 신설. 2열 세로선이 오른쪽 칸 왼쪽 끝에서 떨어지는 거리 =
     거터 --cm-gap-2xl(48) 의 절반. ::before{left:calc(-1 * var(--cm-rule-inset))} 로만 쓴다.
     오른쪽 칸에 border-left + padding-left 를 직접 걸면 글자가 25px 안으로 밀려
     두 열의 왼쪽 축이 어긋난다(1920 실측 984 → 1009).
     되돌리려면 이 줄과 아래 17-34 (12) 덩이를 지운다. */
  --cm-rule-inset:calc(var(--cm-gap-2xl) / 2);
  --cm-band-pad:0 var(--cm-card-px);
  --cm-cardft-pad:12px var(--cm-card-px);

  /* ── [SPEC0828-R3] 머리 블록 · 2단 격자의 치수 ──────────── */
  --cm-head-h:116px;
  /* [LAYOUT0828-R2] 무엇을 : --cm-col-w(592px) · --cm-side-w(280px) 두 줄을 지웠다.
     왜 : var() 참조가 9창 · 5시트 통틀어 0건인 2단 격자의 **옛 값**이다. 지금 격자는
          레인 1102 = 본문 734 + 거터 48 + 사이드 320 이고, 남겨 두면 다음 회차가
          592/280 을 규격으로 오인한다.
     되돌리려면 : --cm-col-w:592px · --cm-side-w:280px 두 줄을 되살린다. */
  --cm-side-floor:900px;
  /* [LAYOUT0828-R2] 신설. 2단 창 사이드 열(.pt-side)의 sticky 기준 = 헤더 60 + 여유 28.
     실측이 feed 112 · my 60 · mileage 60 세 값이라 같은 열이 세 창에서 다른 높이에 붙었다.
     max-height 는 calc(100vh - 112px). 되돌리려면 이 줄과 portal.css 12절을 지운다. */
  --cm-side-top:88px;
  /* var() 는 @media 조건에 쓸 수 없다 — 17-24 의 1024px 을 이 값과 **항상 같이** 고쳐라. */
  --cm-fold:1024px;

  /* ── [SPEC0828-R3] 링크 · 가림막 ────────────────────── */
  --cm-link:var(--cm-accent-soft);
  --cm-scrim:rgba(0,0,0,.72);

  /* 치수 */
  /* [DAANGN0829] 60px 였다(아래선 1px 포함 61). 전수조사 실측 : 당근 랜딩 헤더 **64**.
     되돌리려면 60px 로. 하위 페이지 헤더는 당근이 95 인데 그것은 헤더 안에 검색줄이
     들어 있기 때문이고, 창모는 하위에 검색줄을 두지 않으므로 64 한 값으로 간다. */
  --cm-hd-h:63px;           /* 헤더 */
  --cm-nav-h:44px;          /* 하위 페이지 상단 메뉴 */
  --cm-sticky-h:52px;       /* 스크롤 고정 메뉴 */
  /* [SPEC0829] 48px 였다. 받침 잘림을 줄높이로 막느라 올린 값인데, 실측 규격은
     「제목 38px/700/lh38 · 나가는 단어 translateY -34.6→-35.5」로 확정 항목이라
     48px 은 지시값을 26% 초과한다(슬롯 높이 · 롤 이동거리가 둘 다 이 변수에서 나온다).
     38px 로 되돌리고, 받침 잘림은 줄높이가 아니라 **클리핑 박스**로 푼다 —
     5절 .hub-roll 에 padding-block:5px;margin-block:-5px 를 주어 overflow:hidden 이
     잘라내는 상자만 위아래로 넓히고 레이아웃 높이는 38px 로 유지한다.
     그 padding 때문에 슬롯의 실측 높이는 48 로 읽히므로, index.html 의 롤링 스크립트는
     getBoundingClientRect().height 대신 getComputedStyle(slot).lineHeight 를 읽는다.
     :root 에 두는 이유는 하위 8개 창의 .hub-h1 도 같은 변수를 읽어,
     창을 옮길 때 같은 38px 제목의 줄 리듬이 갈리지 않게 하기 위함이다.
     좁은 화면 몫(28px 제목 · 36px 줄)은 16절에 있다 — 그쪽은 font-size 28px 짝이라 그대로 둔다.
     되돌리려면 48px 로 되돌리고 5절의 padding-block/margin-block 두 값을 지운다. */
  --cm-lh:38px;             /* 제목 줄높이 = 롤링 이동거리 = 슬롯 높이. 세 값은 항상 같다. */

  /* 모션 — background-color 만 0.15s */
  /* [DAANGN0829] .15s 뿐이라 이징이 브라우저 기본값(ease)이었다.
     전수조사 실측 : 당근의 트랜지션은 **0.15s cubic-bezier(0.35, 0, 0.35, 1)** 한 벌이고
     387 + 58 + 48 회로 사이트 전체가 이 하나를 쓴다. 이것이 참조의 모션 서명이다.
     (디자인 스킬이 권하는 0.5s cubic-bezier(.16,1,.3,1) 스프링은 참조와 다르다 — 실측을 따른다.)
     --cm-t 는 `transition:<속성> var(--cm-t)` 형태로 쓰이므로 시간+이징을 한 값에 담는다.
     되돌리려면 .15s 로. */
  --cm-t:.15s cubic-bezier(.35,0,.35,1);
}

/* 고정 메뉴가 앵커 대상과 키보드 포커스를 가리지 않게 한다. */
html{scroll-padding-top:var(--cm-sticky-h);}


/* ── 2. 셸 바닥 ────────────────────────────────────────────────────────────
   style.css 는 body 를 흰 바닥 · 14px 로 둔다(밝은 3단 페이지 기준).
   다크 페이지는 <body class="hub-body"> 로 그 두 값만 덮는다.
   요소 셀렉터(body · a · h1 · ul)를 전역으로 건드리지 않는다.            */
.hub-body{
  background:var(--cm-bg);
  color:var(--cm-txt);
  font-size:16px;
  line-height:1.5;
  letter-spacing:-.01em;
  /* [WIN0827D 공유시트] /fund/ · /tools/ 담당 요청(두 창이 같은 값을 각각 올렸다).
     크롬 기본값은 한글 어절을 무시하고 끊는다 — 「…보실 수 있습니 / 다」,
     「종합소득세+지방소득세 계 / 산」, 「밝히지 않 / 은」 처럼 낱말 한가운데가 잘려
     마지막 줄에 한두 글자만 남는 줄이 1400 · 375 두 폭 모두에서 나왔다.
     이 시트 3000여 줄에 keep-all 선언이 0건이었다. 9개 창이 전부 .hub-body 를 쓰므로
     한 곳에서 건다. 글자 크기 · 색 · 문구는 하나도 바뀌지 않고 읽힘만 올라간다.
     짝은 anywhere 가 아니라 break-word 다 — anywhere 는 min-content 폭 계산까지
     바꿔 격자 · flex 칸이 함께 줄어든다(/fund/ 요청은 anywhere 였고 /tools/ 요청은
     break-word 였다. 레이아웃을 건드리지 않는 쪽으로 맞췄다).
     되돌리려면 아래 두 줄을 지운다. */
  word-break:keep-all;
  overflow-wrap:break-word;
  /* overflow-x:hidden 을 걸지 않는다 — 넘치면 감추지 말고 드러내 고친다. */
}

/* 스크린리더 전용 */
.hub-sr{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

/* [SPEC0828] outline 색이 var(--cm-txt)(순백)였다 — 9개 창 실측이 전부 rgb(255,255,255).
   순백은 팔레트에 없고, 흰 글자 위에 흰 링이 겹치면 포커스가 어디 있는지 읽히지 않는다.
   옅은 파랑으로 바꾸면 링이 장식이 아니라 신호가 된다.
   되돌리려면 outline 색을 #FFFFFF 로 되돌린다. */
.hub-body :focus-visible{
  outline:2px solid var(--cm-focus);
  outline-offset:2px;
}

/* 건너뛰기 링크 */
.hub-skip{
  position:absolute;left:-9999px;top:0;
  z-index:900;
  padding:8px 14px;
  background:var(--cm-surf-2);
  color:var(--cm-txt);
  border-radius:0 0 6px 0;
}
.hub-skip:focus{left:0;}

.hub-top{max-width:var(--cm-top-w);margin:0 auto;padding:0 var(--cm-pad);}
.hub-mid{max-width:var(--cm-main-w);margin:0 auto;padding:0 var(--cm-pad);}

/* [WIN0827D-R2 공유시트] 3단 격자 세 창(/feed/ · /my/ · /mileage/)만 셸을 --pt-max(1400)으로
   벌려 놓던 예외 블록을 지웠다. 실측 : feed · my 는 로고가 x=0 w=1400, mileage 는 x=70 w=1260,
   나머지 여섯 창은 x=220 w=960 이라 /fund/ 에서 /feed/ 로 가면 로고가 200px 튀었다.
   지우면 9개 창이 모두 기본값(--cm-top-w 960 · --cm-pad 24/16)으로 한 레인에 선다.
   본문 측은 portal.css 6절이 같은 960 레인으로 내려왔다.
   ※ /feed/ · /my/ 가 같은 값을 인라인으로 임시로 적어 두고 있다. 값이 같아 화면은 갈리지
     않지만, 두 창 담당은 그 줄을 지워야 한 규칙이 두 곳으로 갈리지 않는다.
   되돌리려면 body.pg · body.is-cm 의 .hub-hd__in · .hub-nav__in · .hub-sticky__in ·
   .hub-ft__in 을 max-width:var(--pt-max) · padding-left/right:var(--pt-pad) 로 되살린다. */


/* ── 3. 헤더 · 로고 ────────────────────────────────────────────────────────
   참조 실측값과 같게 얇다. 로고는 이미지가 아니라 텍스트(또는 인라인 SVG)다. */
.hub-hd{
  background:var(--cm-bg);
  border-bottom:1px solid var(--cm-edge);
}
.hub-hd__in{
  display:flex;
  align-items:center;
  gap:16px;
  min-height:var(--cm-hd-h);
  max-width:var(--cm-top-w);
  margin:0 auto;
  padding:0 var(--cm-pad);
  line-height:var(--cm-lh-body);   /* [SPEC0828-R3] 상속 1.5(24px)였다 — 16px 본문은 26px 한 값이다 */
}
.hub-hd__brand{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
  color:var(--cm-txt);
}
.hub-hd__mark{flex:0 0 auto;display:block;width:22px;height:22px;}
.hub-hd__nm{font-size:16px;font-weight:700;letter-spacing:-.02em;}
/* 약칭 「창모」 — 로고 옆 작은 표기 */
.hub-hd__ab{
  font-size:var(--cm-fs-tail);
  color:var(--cm-mut);
  padding:1px 6px;
  border:1px solid var(--cm-dim);
  border-radius:3px;
}
.hub-hd__act{
  display:flex;
  align-items:center;
  gap:var(--cm-gap-m);   /* [SPEC0828-R3] 14px 였다 — 간격 사다리(8·12·16·24·32·40) 밖이다 */
  margin-left:auto;
  font-size:16px;
}
/* [2026-09-02 GEN1] 헤더 마일리지 컨트롤(.hub-hd__mile · __mile-n · __mile-u) 규칙을 지웠다 — 마크업에서 걷어냈다(마일리지 폐지). */
.hub-hd__login{color:var(--cm-txt-2);white-space:nowrap;}


/* ── 4. 상단 고정 메뉴 (스크롤 시 등장) ───────────────────────────────────
   아이콘 8칸이 화면에서 사라질 때 같은 8개가 헤더에 가로 텍스트로 붙는다.

   **문서 흐름에 넣지 마라.** 흐름에 들어가면 본문이 52px 밀리고 → scrollY 가
   바뀌고 → 판정이 뒤집혀 무한 깜박임이 난다. position:fixed + transform 이면
   리플로우가 0 이라 그 되먹임 자체가 성립하지 않는다.
   높이를 애니메이션하지 않는다(height 0→52 금지). 높이는 고정, transform 만.

   opacity:0 만으로 숨기면 보이지 않는 링크에 탭 포커스가 들어간다.
   visibility 를 함께 쓰고, 퇴장 동안만 transition-delay 로 보이게 유지한다.
   마크업에서 inert 도 함께 토글하면 확실하다.                              */
.hub-sticky{
  position:fixed;
  inset:0 0 auto 0;
  z-index:80;
  height:var(--cm-sticky-h);
  padding-top:env(safe-area-inset-top);
  background:var(--cm-surf);
  border-bottom:1px solid var(--cm-edge);
  transform:translateY(-100%);
  visibility:hidden;
  transition:transform var(--cm-t) ease, visibility 0s linear var(--cm-t);
}
.hub-sticky.is-on{
  transform:none;
  visibility:visible;
  transition:transform var(--cm-t) ease, visibility 0s;
}
/* 아이콘 줄 바로 다음에 두는 관측점. 높이 0 은 일부 엔진에서 관측되지 않는다. */
/* [SPEC0828-R2] height:1px 였다. 구조이지 블록이 아닌데 1px 자리를 차지해
   home 의 .hub-ics → .hub-mile 사이만 33px(=32+1)이었다. 자리를 0 으로 내린다.
   position 은 건드리지 않는다 — IntersectionObserver 는 높이 0 에서도 동작하고,
   absolute 로 빼면 관측 기준이 부모에서 초기 컨테이닝 블록으로 옮겨간다.
   되돌리려면 height:1px 로. */
.hub-sentinel{height:0;margin:0;pointer-events:none;}

/* 하위 페이지 8개(/fund/ /guide/ /tools/ /feed/ /my/ /mileage/ /terms/ /privacy/)의
   상시 메뉴 — 같은 8개 항목, 같은 순서. 랜딩(/)은 스크롤 시 나타나는 .hub-sticky 가
   같은 역할을 한다. 이쪽은 fixed 가 아니라 문서 흐름 안에 있는 44px 줄이다.
   규칙을 고칠 때 영향 범위는 3개가 아니라 8개다. */
.hub-nav{
  background:var(--cm-surf);
  border-bottom:1px solid var(--cm-edge);
}
.hub-nav__in,
.hub-sticky__in{
  display:flex;
  align-items:center;
  gap:var(--cm-gap-l);   /* [SPEC0828-R3] 22px 였다 — 9창 모든 화면에 늘 보이는 줄이 사다리 밖이었다 */
  max-width:var(--cm-top-w);
  margin:0 auto;
  padding:0 var(--cm-pad);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.hub-nav__in{min-height:var(--cm-nav-h);}
.hub-sticky__in{height:100%;}
.hub-nav__in::-webkit-scrollbar,
.hub-sticky__in::-webkit-scrollbar{display:none;}

.hub-nav__a{
  position:relative;
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  min-height:32px;
  padding:0 2px;
  font-size:16px;
  line-height:1.2;
  white-space:nowrap;
  color:var(--cm-txt-2);
  transition:background-color var(--cm-t);
  /* [PORTAL0827] 이 항목 중 「가맹정보」만 button 이다. 버튼 리셋은 style.css 에 있는데
     /terms/ · /privacy/ 는 그 시트를 싣지 않아 두 페이지에서만 브라우저 기본 버튼
     배경(#6B6B6B)이 그대로 나왔다 — 회색 덩어리 위에 회색 글자(1.56:1)였다.
     hub.css 만으로 셸이 완결되도록 여기서 리셋한다. 되돌리려면 아래 세 줄을 지운다. */
  background:none;
  border:0;
  font-family:inherit;
}
.hub-nav__a[type="button"]{cursor:pointer;}
.hub-nav__a[aria-current="page"]{color:var(--cm-accent-soft);}
.hub-nav__a[aria-current="page"]::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-1px;
  height:2px;
  background:var(--cm-accent);
  pointer-events:none;
}
/* 외부 링크(넛지 상담) 꼬리표 */
.hub-nav__ext{font-size:var(--cm-fs-tail);color:var(--cm-mut);margin-left:4px;}


/* ── 5. 제목 — 단어 롤링 ───────────────────────────────────────────────────
   참조 실측값 : 슬롯 width 69 → 135 (Δ66) · 제목 width 482 → 548 (Δ66)
   두 델타가 같다 = 제목은 shrink-to-fit 이고 폭 애니메이션은 슬롯에만 건다.
   제목에 따로 width 트랜지션을 걸면 두 곡선이 경쟁해 제목이 떤다.

   **슬롯 규칙은 이 파일 한 곳에만 있다.** index.html 인라인 <style> 에 같은
   규칙을 다시 쓰지 마라 — 두 벌이 되면 한쪽만 고쳤을 때 증상이 절반만 사라진다.
   (이전 시트에서 실제로 모바일 28px 선언이 인라인 30px 에 밀려 죽어 있었다.)

   제목 래퍼를 한 겹 더 두지 마라. 좌우 여백은 .hub-top 의 --cm-pad 한 겹뿐이어야
   한다. 래퍼에 padding-inline 을 또 주면 한쪽 48px 이 되어 가장 긴 단어 상태의
   제목이 좁은 구간에서 두 줄로 접히고, 전환마다 제목 높이가 38 ↔ 76px 로 튄다. */
.hub-ttl{
  font-size:38px;
  font-weight:700;
  line-height:var(--cm-lh);   /* = 롤링 이동거리. 두 값은 같은 변수에서 나온다. */
  color:var(--cm-txt);
  letter-spacing:-.02em;
  width:fit-content;          /* 슬롯이 늘면 제목이 저절로 다시 중앙에 온다 */
  max-width:100%;
  margin:0 auto;
  text-align:center;
}
/* [WIN0827D 공유시트] 여기 있던 .hub-intro · .hub-intro .hub-lead 두 줄을 지웠다.
   랜딩 담당이 h1 아래 두 문장(.hub-lead)과 그것을 묶던 <div class="hub-intro"> 래퍼를
   함께 걷어내(index.html 90행 [WIN0827D] 주석), 9개 창을 통틀어 .hub-intro 사용처가
   0건이 됐다 — 실측으로 확인했다. 그 변경이 만든 고아라 함께 정리한다.
   .hub-lead 본체(13절)는 지우지 않았다 — /fund/ · /guide/ · /tools/ 머리글이 쓴다.
   되돌리려면 index.html 90행 주석의 절차대로 래퍼를 되살린 뒤 이 자리에
   .hub-intro{max-width:var(--cm-search-w);margin:0 auto;} 와
   .hub-intro .hub-lead{text-align:center;} 두 줄을 다시 넣는다. */

/* 시각 구성. 정지 텍스트와 슬롯의 세로를 flex 로 못 박는다 —
   overflow:hidden 인라인블록은 baseline 이 하단 마진 엣지로 바뀌어
   baseline 정렬에 기대면 롤링 단어가 정지 텍스트와 어긋난다. */
.hub-ttl__vis{
  display:flex;
  align-items:flex-start;
  width:fit-content;
  margin-inline:auto;         /* 매 프레임 자동 재중앙정렬 — JS 계산 금지 */
  white-space:nowrap;
}
.hub-ttl__fix{line-height:var(--cm-lh);color:var(--cm-txt);white-space:pre;}

/* 슬롯 — 높이와 이동거리가 반드시 같은 값(--cm-lh)이다.
   다르면 나간 단어가 슬롯 밖에 남거나(이동<높이) 일찍 사라진다(이동>높이). */
/* [WIN0827D-R3 공유시트] display:block 이었다. index.html 의 롤링 스크립트가 슬롯 폭을
   「가장 긴 단어 고정」에서 「지금 보이는 단어 추종」으로 되돌리면서(그 파일 655행 주석)
   폭이 2초마다 변한다. transition 이 없으면 그 변화가 스냅으로 튄다 — .28s 로 흡수하면
   세로 이동(600ms)보다 먼저 상자가 자리를 잡아 새 단어가 올라올 때는 이미 제 크기다.
   inline-grid 는 두 단어를 grid-area:1/1 한 칸에 겹쳐 두기 위한 것이다(아래 .hub-roll__w).
   되돌리려면 display:block 으로 되돌리고 transition 줄과 아래 grid 두 줄을 지운다. */
/* [SPEC0829] --cm-lh 가 38px 로 되돌아오면서 font-size 38 = line-height 38 = 슬롯 높이 38
   + overflow:hidden 이 되어 한글 받침과 윗선이 다시 잘린다. 줄높이를 올려 막지 않고
   잘라내는 상자만 위아래로 5px 넓힌다 — padding 이 상자를 키우고 같은 크기의 음수 margin 이
   레이아웃 높이를 38px 로 되돌린다. 이동거리는 스크립트가 line-height 를 직접 읽으므로
   이 padding 에 영향받지 않는다. 되돌리려면 아래 두 줄을 지운다. */
.hub-roll{
  position:relative;
  display:inline-grid;
  flex:0 0 auto;
  height:var(--cm-lh);
  box-sizing:content-box;   /* 전역 border-box 면 padding 이 안쪽을 깎아 도로 잘린다 */
  padding-block:5px;
  margin-block:-5px;
  overflow:hidden;
  transition:width .28s ease;
}
/* 단어는 absolute 다. 그래야 새 단어를 넣어도 슬롯 폭이 즉시 밀려나지 않고,
   폭을 우리가 애니메이션할 수 있다. left 만 주고 right 를 주지 않으면
   shrink-to-fit 이 되어 그 단어의 실제 텍스트 폭이 그대로 나온다 —
   이 값을 getBoundingClientRect().width 로 잰다(offsetWidth 금지: 정수 반올림). */
/* [WIN0827D-R3 공유시트] position:absolute;left:0;top:0 이었다. 슬롯이 inline-grid 가 되어
   두 단어를 같은 칸(1/1)에 겹쳐 둔다. justify-self:start 를 주는 이유는 단어가 슬롯 폭에
   눌리지 않고 max-content 를 유지해야 스크립트가 붙인 자리에서 바로 잴 수 있기 때문이다
   (absolute + left 만 주던 shrink-to-fit 과 같은 값이 나온다).
   되돌리려면 absolute 세 줄을 되살리고 grid 두 줄을 지운다. */
.hub-roll__w{
  position:static;
  grid-area:1/1;
  justify-self:start;
  line-height:var(--cm-lh);
  white-space:nowrap;
  color:var(--cm-accent);     /* 38px 대형 텍스트라 3:1 기준으로 통과한다 */
  will-change:transform,opacity;
}

/* 롤링은 WAAPI(Element.animate) 전용이다. CSS 키프레임 폴백을 두지 않는다 —
   옵션 객체 하나를 세 애니메이션(나가는 단어 · 들어오는 단어 · 슬롯 폭)에 공유해야
   translateY · opacity · width 가 같은 진행값 p 를 쓴다는 실측 관계가 보장되는데,
   CSS 로는 그 공유를 표현할 수 없고 두 벌이 되면 서로 덮어쓴다.
   reduce 일 때의 정지도 JS 의 mqReduce 분기가 맡는다(CSS 규칙 없음). */


/* ── 6. 검색바 — 실측 754 × 48 ─────────────────────────────────────────────
   카테고리 드롭다운 | 입력 | 화살표 버튼. 확대 · 그림자 없음.
   높이 48 은 min-height 로 둔다 — 폰트 폴백에서 글자가 잘리지 않게.        */
.hub-search{
  display:flex;
  align-items:stretch;
  max-width:var(--cm-search-w);
  min-height:48px;
  margin:0 auto;
  padding:0 6px 0 0;
  /* [KIT0830] 바탕이 --cm-surf-2 회색이고 테두리가 --cm-dim 이라, 첫 화면에서 가장 먼저
     눌러야 할 것이 배경에 가라앉아 있었다. **흰 바탕 + 선명한 테두리**로 띄운다 —
     당근도 입력칸 자체는 투명이고 감싸는 상자가 테두리를 갖는다(실측 : input bd 0px none).
     아이콘 타일과 같은 결의 그늘 한 겹을 얹어 「눌리는 것」임을 표시한다.
     되돌리려면 background:var(--cm-surf-2) · border-color:var(--cm-dim) · box-shadow 삭제. */
  background:var(--cm-bg);
  border:1px solid var(--cm-edge-2);
  border-radius:10px;
  box-shadow:0 1px 2px rgba(26,28,32,.05);
  transition:background-color var(--cm-t),border-color var(--cm-t),box-shadow var(--cm-t);
}
/* 포커스가 들어오면 테두리가 창모 블루로 바뀐다 — 어디에 커서가 있는지 한눈에 보인다 */
.hub-search:focus-within{
  border-color:var(--cm-accent);
  box-shadow:0 0 0 3px rgba(46,107,255,.12);
}
.hub-search__cat-wrap{position:relative;display:flex;align-items:center;flex:0 0 auto;}
/* [WIN0827D 공유시트] 폭 선언이 없어 select 의 자동 폭이 가장 긴 option
   (「마일리지 · 이용안내」)으로 잡혔다. 화면에는 「전체」 두 글자만 보이는데
   1400px 167px · 375px 159px 를 먹어, 375px 에서 검색 입력창이 141px 로 눌리고
   placeholder 가 「찾으시는 지원금 · !」 로 잘렸다 — 셀렉트가 입력창보다 넓었다.
   96px 로 못 박으면 375 에서 입력창이 141 → 약 204px 로 늘고 1400 에서도
   검색어 자리가 71px 넓어진다. 긴 항목을 고르셨을 때를 위해 말줄임을 함께 둔다
   (검색 자체가 연동 준비 중이라 지금은 「전체」 외에는 화면에 서지 않는다).
   되돌리려면 width · text-overflow 두 줄을 지운다. */
.hub-search__cat{
  appearance:none;-webkit-appearance:none;
  width:96px;
  text-overflow:ellipsis;
  min-height:46px;
  padding:0 30px 0 14px;
  border:0;
  background:transparent;
  color:var(--cm-txt);
  font:inherit;font-size:16px;line-height:1.4;
  border-radius:10px 0 0 10px;
  cursor:pointer;
  transition:background-color var(--cm-t);
}
.hub-search__cat option{background:var(--cm-surf-2);color:var(--cm-txt);}
/* 화살표는 장식이므로 클릭을 먹지 않는다 */
.hub-search__ar{
  position:absolute;right:10px;top:50%;
  width:12px;height:12px;margin-top:-6px;
  color:var(--cm-mut);
  pointer-events:none;
}
.hub-search__div{
  flex:0 0 1px;width:1px;
  align-self:center;height:22px;
  background:var(--cm-dim);
}
.hub-search__q{
  flex:1 1 auto;
  min-width:0;
  min-height:46px;
  padding:0 12px;
  border:0;
  background:transparent;
  color:var(--cm-txt);
  font:inherit;font-size:16px;
}
.hub-search__q::placeholder{color:var(--cm-mut);opacity:1;}
/* 크롬 기본 지우기 버튼은 어두운 바닥에서 검게 보인다 */
.hub-search__q::-webkit-search-cancel-button{-webkit-appearance:none;}
.hub-search__go{
  flex:0 0 auto;
  align-self:center;
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;
  /* [SPEC0828-R2] 8px 였다. 이 한 자리 때문에 사이트의 모서리 값이 다섯(3·6·8·10·16)이었다.
     버튼 모서리 한 값(6)으로 내려 넷으로 줄인다. 되돌리려면 8px 로. */
  border:0;border-radius:var(--cm-btn-r);
  background:var(--cm-accent);
  /* [SPEC0828] 순백 별칭(--cm-white)이었다. 여기는 #2E6BFF 면 위라 순백이 맞다 —
     #FFFFFF 4.50:1(통과) 대 #F3F4F5 4.09:1(미달). 되돌리려면 #FFFFFF 로. */
  color:var(--cm-on-accent);
  cursor:pointer;
  transition:background-color var(--cm-t);
}
.hub-search__go svg{width:18px;height:18px;display:block;}
/* [WIN0827D-R3 공유시트] 여기 있던 .hub-search-note 규칙을 지웠다. 랜딩 담당이 검색바 아래
   안내문 <p> 를 마크업에서 걷어내(index.html 160행 [WIN0827D-R3] 주석) 9개 창을 통틀어
   사용처가 0건이 됐다 — grep 으로 확인했다. 그 변경이 만든 고아라 함께 정리한다.
   되돌리려면 index.html 160행 주석의 절차대로 <p> 를 되살린 뒤 이 자리에
   .hub-search-note{max-width:var(--cm-search-w);margin:10px auto 0;font-size:16px;
   line-height:1.6;color:var(--cm-txt-2);text-align:center;} 를 다시 넣는다. */


/* ── 7. 자주 찾는 주제 칩 ──────────────────────────────────────────────────
   실측 82 × 24 · 16px / 400 / lh 24px.
   82px 는 참조 실측 라벨(2~4자) 기준이다. 창모 라벨은 「소상공인 지원금」처럼 7자가
   있어 82 를 width 로 고정하면 글자가 넘친다. min-width 로만 쓰고 폭은 늘린다.
   순위 표현(「인기 검색어」·「실시간」)을 쓰지 않는다 — 근거 데이터가 없다.  */
/* [WIN0827 공유시트] 랜딩 가운데 레인을 754(검색바 실측 폭) 하나로 통일한다.
   전에는 754 / 735 / 722 / 960 네 겹이라 세로로 훑을 때 왼쪽 끝이 네 번 움직였다.
   아이콘 격자 722 는 실측 64/30 규격이라 그대로 두고 754 레인 안 가운데로 읽는다.
   되돌리려면 .hub-chips 는 --cm-main-w, .hub-ad · .hub-mile 은 --cm-ad-w 로 되돌린다. */
.hub-chips{max-width:var(--cm-search-w);margin:0 auto;text-align:center;}
/* [DAANGN0829] 블록 <p>(아래 12px · 16px) 였다. 줄 안 첫 항목으로 들어가는 인라인 라벨이 된다.
   당근의 「인기 검색어」와 같은 자리 · 같은 규격이다. 되돌리려면 margin:0 0 var(--cm-gap-s);font-size:16px 로. */
/* [SPEC복원 0829] font-size:14px 였다. 확정 규격의 기준 글자는 16px 이고 당근 실측
   인기 검색어 줄도 16/400/lh24 다. 라벨과 칩이 같은 줄에 서므로 두 값을 함께 올린다.
   줄 높이 24 는 그대로라 행 높이가 늘지 않는다. */
.hub-chips__lb{font-size:16px;line-height:24px;color:var(--cm-mut);white-space:nowrap;}
/* [DAANGN0829] 랜딩 인기 검색어 — 테두리 없는 글자 링크. 실측 82×24 · lh24.
   ([SPEC복원 0829] 글자 크기는 확정 규격의 기준 글자 16px 을 따른다. 색은 다크 팔레트 --cm-mut.)
   공유 칩(.hub-chip)과 **다른 부품**이다. 하위 페이지 필터 칩에 이 클래스를 쓰지 마라.
   호버 표시는 시트 규격대로 background-color 하나뿐이고, 여기서는 밑선 하나를 더 쓴다
   (테두리가 없어 배경만으로는 어디가 눌리는지 보이지 않는다). */
.hub-seekq{
  display:inline-flex;align-items:center;
  height:24px;
  padding:0 2px;
  color:var(--cm-mid);   /* [LIGHT0829-R2] 당근 인기 검색어 실측색 rgb(85,93,109) */
  font-size:16px;        /* [SPEC복원 0829] 14px 였다 — 확정 규격 기준 글자 16px · lh24 유지 */
  font-weight:400;
  line-height:24px;
  white-space:nowrap;
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color var(--cm-t),border-color var(--cm-t);
}
/* [WIN0827D 공유시트] 1400px 실측 : 칩 7개 + gap 이 721px 라 754 레인 안에
   일곱이 들어차고 「퇴직금 계산」 하나만 둘째 줄에 홀로 남았다(화면에서 고아 한 칸).
   460px 로 묶으면 4 + 3 으로 갈라져 두 줄이 비슷한 무게가 된다.
   .hub-chips 자체 폭 754 는 그대로라 레인 정렬에 영향이 없다.
   ≤600 에서는 컨테이너가 460 보다 좁아 이 값이 아무 일도 하지 않는다.
   되돌리려면 max-width · margin 두 값을 지운다. */
/* [DAANGN0829] gap 8 · max-width 460 이었다(알약 8개가 2줄로 접히던 폭).
   테두리가 없어져 항목 사이가 붙어 보이므로 가로 간격을 16 으로 벌리고,
   폭은 검색바(754)와 같게 두어 검색 → 인기어가 한 기둥으로 선다. */
.hub-chips__ls{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  column-gap:16px;row-gap:4px;max-width:var(--cm-search-w);margin:0 auto;}
.hub-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:82px;
  height:24px;
  padding:0 10px;
  border:1px solid var(--cm-dim);
  border-radius:12px;
  background:transparent;
  color:var(--cm-txt-2);
  font-size:16px;
  font-weight:400;
  line-height:24px;
  white-space:nowrap;
  transition:background-color var(--cm-t);
}
/* [SPEC0828-R2] line-height:1.6(20.8px)였다. 13px 꼬리는 20px 한 값이다. */
.hub-chips__nt{margin:12px 0 0;font-size:var(--cm-fs-tail);line-height:var(--cm-lh-tail);color:var(--cm-mut);}


/* ── 8. 배너 — 광고 지면 안내 (735 × 120 · 1장) ────────────────────────────
   실제 광고 소재 · 광고주명 · 로고를 넣지 않는다.
   소재가 실제로 들어오면 마크업에서 「광고」 라벨을 반드시 앞에 붙인다.      */
.hub-ad{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--cm-gap-m);            /* [SPEC0828-R2] 20px 였다 — 간격 사다리 밖의 값이다 */
  /* [DAANGN0829] --cm-search-w(754) 였다. 당근 배너 실측은 **900×150** 으로 검색바보다 넓다.
     넓은 지면이 광고 단가의 근거이기도 하다. --cm-ad-w(900) 는 이미 있던 토큰이다.
     되돌리려면 var(--cm-search-w) 로. */
  max-width:var(--cm-ad-w);
  /* [WIN0827D 공유시트] 120px · 파선 --cm-dim · 면 --cm-surf 였다.
     1400px 실측 754×120 으로 본문에서 가장 큰 컨테이너인데 담긴 정보는
     「지금 비어 있다」 한 줄뿐이었고, 파선은 「여기에 무언가 온다」는 신호라
     시선을 끄는데 오는 것이 없었다. 바로 아래 진입점 8칸(92px)보다 무거워
     고르는 구역의 주인공이 뒤바뀌어 있었다. 빈 자리는 모양을 갖되 조용해야 한다.
     되돌리려면 min-height:120px · padding:20px 24px ·
     border:1px dashed var(--cm-dim) · background:var(--cm-surf) 로 되돌린다. */
  /* [WIN0827D-R2 공유시트] min-height 64 → 56 · radius 12 → 10.
     담긴 것이 한 줄(25.6px)인데 64px 이 남아 위아래로 무의미한 공백이 있었고,
     라운드 12px 은 같은 화면의 .hub-mile · .hub-tr__row · .hub-search 10px 과 어긋났다.
     되돌리려면 64px · 12px 로. */
  min-height:56px;
  margin:0 auto;
  padding:16px 20px;
  /* [DAANGN0829] 투명 바탕 + 1px 테두리였다. 라이트 전환 뒤 이 상자가 첫 화면에서
     **테두리를 가진 유일한 요소**가 되어, 「지금 비어 있다」고 적힌 칸이 바로 아래
     진입점 8칸보다 먼저 눈에 들어왔다(고르는 구역의 주인이 뒤바뀐다).
     테두리를 걷고 옅은 면으로 채워 「지면은 여기」라는 사실만 남긴다 —
     소재가 실제로 들어오면 이 면 위에 그대로 얹힌다.
     [DARK복원 0829] 그 사유(「라이트에서 테두리를 가진 유일한 요소」)가 다크 복원으로
     사라져 원래대로 되돌린다 — 투명 바탕 + 1px 테두리. */
  background:transparent;
  border:1px solid var(--cm-edge);
  border-radius:10px;
}
.hub-ad__bd{min-width:0;}
/* [KIT0830] 광고 지면 자리 — 소재가 놓일 크기를 화면이 직접 보여 준다.
   폭만 잡고 높이는 비율(16:5)로 둔다. **치수를 글자로 적지 마라** — 게재 규격이 아직
   확정되지 않았다(본문이 「문의 주시면 보내 드립니다」라고 적고 있다).
   규격이 정해지면 이 두 줄만 고치고, 소재가 오면 마크업의 <div> 를 <img> 로 간다. */
.hub-ad__slot{flex:0 0 auto;width:200px;aspect-ratio:16/5;align-self:center;}
@media (max-width:600px){ .hub-ad__slot{width:100%;} }
.hub-ad__lb{display:inline-block;margin-right:8px;font-size:var(--cm-fs-tail);line-height:var(--cm-lh-tail);color:var(--cm-mut);}   /* [SPEC0828-R2] 줄 높이가 상속값(26px)이었다 */
/* [WIN0827 공유시트] .hub-ad__sz(지면 픽셀 규격 글자) 한 줄을 지웠다. 랜딩 담당이
   그 <span> 을 마크업에서 걷어내(광고주용 숫자였고, 7절 레인 통일로 값 자체가 사실이
   아니게 됐다) 9개 창을 통틀어 사용처가 0건이 됐다.
   되돌리려면 : .hub-ad__sz{display:inline-block;font-size:var(--cm-fs-tail);color:var(--cm-mut);
   font-variant-numeric:tabular-nums;} 를 이 자리에 되살린다. */
/* [WIN0827D-R2 공유시트] margin:6px 0 0 이었다. 라벨과 본문을 한 줄로 합친 뒤로는
   이 6px 이 줄 사이가 아니라 상자 안쪽 여백을 밀고 있다. 되돌리려면 6px 0 0 으로. */
.hub-ad p{margin:0;font-size:16px;line-height:var(--cm-lh-body);color:var(--cm-txt-2);}   /* [SPEC0828-R2] 1.6 이었다 */
/* [SPEC0828-R2] padding:2px 4px · radius 4px 였다 — 텍스트 링크가 29px 상자였다. */
.hub-ad__a{
  flex:0 0 auto;
  line-height:var(--cm-lh-body);
  color:var(--cm-accent-soft);   /* 16px 링크 — 대비 확보용 */
  font-size:16px;
  text-decoration:underline;
  text-underline-offset:3px;
  transition:background-color var(--cm-t);
}


/* ── 9. 아이콘 8칸 (진입점) ────────────────────────────────────────────────
   칸 : 폭 64 고정 · 높이 75 는 **최소값** · gap 30. 8 × 64 + 7 × 30 = 722px.
   보조 라벨(.hub-ic__sub)이 붙는 칸(가맹정보 · 출석체크 · 넛지상담)은 그 한 줄과
   gap 6 만큼 더 높고, 격자가 행 높이를 공유하므로 8칸 전부 같은 높이가 된다 —
   1400px 실측 89.5px. 지시서의 「64 × 75」는 폭 64 고정 · 높이 75 최소로 읽어라.
   아이콘 22px 인라인 SVG(선 1.6) · 라벨 16px.

   열 폭을 64px 로 못 박는다. minmax(64px,1fr) 로 두면 라벨이 긴 칸만 넓어져
   8칸 격자가 어긋난다. 라벨은 nowrap 이라 64px 을 넘어도 칸 밖으로 흘러나올 뿐
   격자를 밀지 않는다 — 이웃에 닿기 전까지 쓸 수 있는 폭은 64 + gap(1400px 30 ·
   ≤600px 14) 이다. [PORTAL0827] 실측 : 4자 54.7px(16px) · 47.8px(14px),
   5자 약 68px · 60px 로 양쪽 모두 여유 안이다. 그래서 라벨을 상단 고정 메뉴 ·
   하위 페이지 메뉴와 같은 문자열(「창업4단계」·「자동화도구」)로 통일했다 —
   같은 진입점이 스크롤 위치에 따라 다른 이름으로 보이던 것을 없앤 것이다.
   6자 이상을 넣을 때는 다시 실측하라.
   높이 75px 는 **최소값**으로만 쓴다 — 「준비 중」·「별도 로그인」 꼬리표가 붙는
   칸이 행 높이를 그보다 키운다(격자는 행 높이를 공유한다).

   5번 가맹정보는 페이지가 없어 a 가 아니라 button 이다. disabled 를 걸면 탭
   이동에서 사라져 진입점 8개가 7개로 줄어든다 — 걸지 않는다.               */
/* [WIN0827D 공유시트] 8칸이 912px 블록 안에 아무 경계 없이 떠 있어, 위 배너 묶음인지
   아래 마일리지 묶음인지 여백이 말해 주지 않았다. 바로 위 .hub-ad 가 내려놓은
   면 · 테두리를 여기가 대신 받는다 — 화면의 면 개수는 늘지 않고 무게만 옮겨 간다.
   754 레인에 맞추면 검색바 · 칩 · 배너 · 마일리지와 좌우 끝이 같아져 세로로 훑을 때
   왼쪽 끝이 움직이지 않는다. 격자 722px 는 754 안에 그대로 들어간다(좌우 패딩 0).
   되돌리려면 max-width · padding · background · border · border-radius 를 지운다. */
/* [WIN0827D-R3 공유시트] repeat(8,64px) · gap 16/30 · padding 18px 0 이었다.
   레인이 912 로 넓어지면서 64px 고정 열 8개(합 722)가 912 카드 안에서 좌우 95px 씩 남아
   카드가 비어 보였다(before_home_1400.png 에서 눈으로 보인다). 1fr 로 풀면 8칸이 카드 폭을
   고르게 나눠 갖고(1400px 실측 열 폭 98.5px) 진입점 한 칸의 누를 수 있는 면적도 함께 넓어진다.
   9절 머리의 「열 폭을 64px 로 못 박는다」는 minmax(64px,1fr)(라벨이 긴 칸만 넓어져 격자가
   어긋나는 것)을 금지한 것이고, minmax(0,1fr)은 여덟 칸이 **똑같이** 나눠 갖는다 — 반대 방향이다.
   되돌리려면 repeat(8,64px) · gap:16px 30px · padding:18px 0 으로 되돌린다. */
.hub-ics{
  display:grid;
  grid-template-columns:repeat(8,minmax(0,1fr));   /* [2026-09-03 GEN3] 인증 칸으로 다시 8 */
  gap:16px 12px;
  max-width:var(--cm-search-w);
  margin:0 auto;
  padding:18px 20px;
  background:var(--cm-surf);
  border:1px solid var(--cm-edge);
  /* [WIN0827D-R2 공유시트] 12px 이었다. 같은 화면에서 카드 라운드가 두 값
     (.hub-ics · .hub-ad 12 / .hub-mile · .hub-tr__row · .hub-search 10)이었다. 10px 하나로 모은다. */
  border-radius:10px;
  justify-content:center;
  justify-items:stretch;
}
/* [WIN0827D-R2 공유시트] flex 세로찌기 + min-height:75px 이었다.
   꼬리표(.hub-ic__sub)가 붙는 칸은 가맹정보 · 출석체크 · 넷지상담 3개뿐이라 나머지
   5칸은 라벨에서 끝나 줄 바닥이 어긋났다(1400px 실측 : 라벨 바닥 651.2 공통, 그 아래
   3칸만 660~670 까지 이어짐). 44px(아이콘 원) / auto(라벨) / 18px(꼬리표) 세 행을 고정하면
   꼬리표 없는 칸도 18px 자리를 비워 두어 8칸 바닥이 한 줄로 맞는다. 375px 2행 배치에서
   1행 75 · 2행 89.7px 로 갈렸던 행 높이도 함께 맞는다.
   되돌리려면 display:flex;flex-direction:column;justify-content:flex-start;min-height:75px 로. */
.hub-ic{
  display:grid;
  /* [SPEC0829] 여기 있던 grid-template-rows:52px 20px 20px 한 줄과 그 [SPEC0828-R2] 주석을
     지웠다. 아래 (7)절이 같은 특이도 · 뒤 선언으로 통째 덮어 완전히 죽은 규칙이었는데,
     주석의 52px 을 근거로 계산하면 실제 화면(44px)과 어긋난다. 행 높이는 (7)절 한 곳에만 있다. */
  justify-items:center;
  align-items:center;
  align-content:start;
  gap:var(--cm-gap-xs);
  padding:0;
  color:var(--cm-txt);
  text-align:center;
  background:none;
  border:0;
  font:inherit;
  cursor:pointer;
}
/* [WIN0827D-R3 공유시트] 44px · 글리프 22px 였다. 열 폭이 64 → 98.5px 로 넓어져 원이
   카드 높이 대비 작아 보였다(관제 지적). 원 52 · 글리프 24 로 잡는다 —
   원 안 여백 비율 0.50 → 0.46 이라 글리프가 원에 눌리지 않는다.
   위 .hub-ic 의 첫 행 높이(52px)와 반드시 같은 값이다 — 한쪽만 바꾸지 마라.
   되돌리려면 44 / 44 / 22 와 grid-template-rows 의 44px 을 함께 되돌린다. */
.hub-ic__d{
  display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;
  border-radius:50%;
  background:var(--cm-surf-2);
  transition:background-color var(--cm-t);
}
.hub-ic__d svg{
  width:24px;height:24px;display:block;
  stroke:currentColor;stroke-width:1.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
}
.hub-ic__lb{font-size:var(--cm-fs-body);line-height:var(--cm-lh-body);white-space:nowrap;}   /* [SPEC0828-R3] 1.2(19.2px)였다 */
/* 「준비 중」 · 「별도 로그인」 보조 라벨
   [PORTAL0827] 11px 이었다. 이 파일의 글자 체계는 기준 16px · 꼬리 문구와 배지 13px 인데
   11px 는 체계 밖의 네 번째 크기였고, --cm-mut 와 겹쳐 다크 배경에서 가장 읽기 어려운 글자였다.
   대가로 칸 높이가 89.5 → 92.1px 로 2.6px 더 커진다(높이 75 는 원래 최소값이다).
   되돌리려면 13px 를 11px 로 바꾼다. 실측 : 13px 에서 「별도 로그인」 58.3px 로 64px 안에 든다. */
.hub-ic__sub{font-size:var(--cm-fs-tail);line-height:var(--cm-lh-tail);color:var(--cm-mut);white-space:nowrap;}   /* [SPEC0828-R3] 1.3(16.9px)였다 */


/* ── 10. 마일리지 미니카드 (랜딩에 허용된 유일한 카드) ─────────────────────
   두 장 이상 두지 않는다. 잔액은 미연동이므로 「—」로 비우고 숫자를 만들지 않는다.
   표기 규칙(「3만 마일리지」 + 사용 제한 병기)은 마크업이 갖는다 —
   「3만원」 표기는 어떤 경우에도 쓰지 않는다.                                */
.hub-mile{
  display:flex;
  /* [WIN0827D 공유시트] center 였다. 1400px 실측 카드 높이 136px 에서 오른쪽
     「마일리지 안내 ›」가 세로 한가운데 — 제목과 회색 두 줄 사이 빈 곳 — 에 떠
     어느 줄과도 눈이 맞지 않았다. flex-start 면 20px 제목 「내 마일리지」와 같은
     높이에서 시작해 카드 첫 줄이 좌우로 이어진다.
     되돌리려면 center 로 되돌린다. */
  align-items:flex-start;
  gap:16px;
  max-width:var(--cm-search-w);   /* [WIN0827 공유시트] 735 → 754 · 7절 주석 참조 */
  margin:0 auto;
  padding:14px 18px;
  background:var(--cm-surf);
  border:1px solid var(--cm-edge);
  border-radius:10px;
}
.hub-mile__bd{min-width:0;flex:1 1 auto;}
.hub-mile__ttl{margin:0;font-size:16px;font-weight:700;color:var(--cm-txt);}
.hub-mile__n{
  margin:4px 0 0;
  font-size:16px;
  color:var(--cm-accent-soft);
  font-variant-numeric:tabular-nums;
}
.hub-mile__nt{margin:6px 0 0;font-size:var(--cm-fs-tail);line-height:var(--cm-lh-tail);color:var(--cm-mut);}   /* [SPEC0828-R2] 1.6 이었다 */
/* [SPEC0828-R2] padding:2px 6px · radius 4px 였다 — 텍스트 링크가 28px 상자였다.
   위 .hub-tr__more 와 같은 이유다. 되돌리려면 두 줄을 되살린다. */
.hub-mile__a{
  flex:0 0 auto;
  color:var(--cm-accent-soft);
  font-size:16px;line-height:var(--cm-lh-body);
  transition:background-color var(--cm-t);
}


/* ── 11. 지금 뜨는 창업 이야기 — 2열 × 5행 ─────────────────────────────────
   번호는 순위가 아니라 나열 번호다 — 마크업에서 aria-hidden 처리한다.
   행에 href 를 걸지 않는다. 클릭 경로는 하단 전체보기 하나뿐.
   날짜 · 응원 수 · 댓글 수는 전부 「—」. 숫자를 지어내지 않는다.            */
/* [WIN0827 공유시트] 이 선언은 .hub-main 안에서는 이기지 못한다 —
   13절의 .hub-main > * + *{margin-top:32px} 가 같은 특정도(0,1,0)이면서 뒤에 온다.
   실제로 56px 을 주는 것은 13절의 .hub-main > .hub-tr 이다. 두 곳을 함께 고쳐라.
   이 줄은 .hub-main 밖에서 .hub-tr 을 쓸 때를 위해 남겨 둔다. */
.hub-tr{margin-top:56px;}
.hub-tr__hdr{display:flex;align-items:center;gap:8px;margin:0 0 6px;}
.hub-tr__ttl{margin:0;font-size:16px;font-weight:700;color:var(--cm-txt);}
/* [SPEC0828-R2] 줄 높이가 1.6(20.8px)이었다 — 13px 꼬리는 20px 한 값이다. */
.hub-tr__nt{margin:0 0 var(--cm-gap-m);font-size:var(--cm-fs-tail);line-height:var(--cm-lh-tail);color:var(--cm-mut);}   /* [SPEC0828-R2] 아래 18px · 1.6(20.8px)였다 */
/* [WIN0827D 공유시트] 카드 안쪽 여백 12px 과 카드 사이 간격 12px 이 같아 안과 밖의
   경계를 여백이 구분해 주지 못했다 — 1400px 2×2 배치에서 네 카드가 하나의 회색
   덩어리로 읽혔다. 안쪽을 키우고(12 → 14/16) 사이를 벌려(12 → 16) 카드가 카드로 보인다.
   되돌리려면 gap:12px · padding:12px 로 되돌린다. */
.hub-tr__ls{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.hub-tr__row{
  display:flex;
  align-items:flex-start;
  gap:var(--cm-gap-s);            /* [SPEC0828-R2] 10px 였다 — 한 묶음 안은 12px 한 값이다 */
  min-height:76px;
  padding:14px 16px;
  background:var(--cm-surf);
  border:1px solid var(--cm-edge);
  border-radius:10px;
}
.hub-tr__no{
  flex:0 0 auto;
  padding-top:2px;
  /* [DAANGN0829] 13px/400/20 이었다. 전수조사 실측 : 당근 순위 숫자는 **20px / 500 / lh 27**
     로 목록에서 두 번째로 큰 글자다 — 번호가 있어야 「지금 뜨는」이 순서 있는 목록으로 읽힌다.
     되돌리려면 13px / var(--cm-lh-tail) / weight 삭제로. */
  font-size:20px;line-height:27px;font-weight:500;
  /* [PORTAL0827] --cm-dim 이었다. 이 파일이 스스로 --cm-dim 을 「구분선·비활성 전용,
     글자색 금지」로 선언해 두었는데 여기만 본문 글자색으로 썼다(2.58:1).
     되돌리려면 --cm-mut 를 --cm-dim 으로 바꾸면 된다. */
  color:var(--cm-mut);
  font-variant-numeric:tabular-nums;
}
.hub-tr__bd{min-width:0;flex:1 1 auto;}
.hub-tr__h{margin:var(--cm-gap-xs) 0 0;font-size:16px;font-weight:700;line-height:var(--cm-lh-h3);color:var(--cm-txt);}   /* [SPEC0828-R2] 1.45(23.2px) · 위 6px 였다 */
/* [WIN0827D 공유시트] 6px 이었다. 한 행 안에서 배지 → 제목 → 메타 세 줄이 전부 6px
   이라 무엇이 제목에 딸린 부차 정보인지 갈리지 않았다. 배지와 제목은 6px 로 붙이고
   메타만 10px 로 뗀다. 되돌리려면 6px 로 되돌린다. */
.hub-tr__meta{margin:var(--cm-gap-s) 0 0;font-size:var(--cm-fs-tail);line-height:var(--cm-lh-tail);color:var(--cm-mut);}   /* [SPEC0828-R2] 줄 높이가 상속값이었다 */
/* [WIN0827 공유시트] 썸네일 자리(.hub-tr__th · .hub-tr__th svg) 두 규칙을 지웠다.
   랜딩 담당이 사진 0장짜리 회색 플레이스홀더 10개를 마크업에서 걷어내
   9개 창을 통틀어 사용처가 0건이 됐다. 사진이 실제로 들어오는 날 되살린다.
   되돌리려면 : .hub-tr__th{flex:0 0 auto;display:flex;align-items:center;
   justify-content:center;width:56px;height:56px;border-radius:8px;
   background:var(--cm-surf-2);color:var(--cm-dim);} 와
   .hub-tr__th svg{width:24px;height:24px;display:block;} 를 이 자리에 되살린다. */
/* [SPEC0828-R2] min-height:34px · padding:0 12px · radius 6px 였다.
   테두리도 바탕도 없는 텍스트 링크인데 34px 상자를 만들어, 「누르는 것」의 높이 사다리
   (배지 24 · 칩 32 · 사이드 버튼 36 · 본문 버튼 44)에 없는 다섯째 값이 되어 있었다.
   텍스트 링크의 높이는 글자 사다리가 정한다(16px → 26px).
   되돌리려면 위 세 줄을 되살린다. */
.hub-tr__more{
  display:inline-flex;
  align-items:center;
  margin-top:var(--cm-gap-m);
  color:var(--cm-accent-soft);
  font-size:16px;line-height:var(--cm-lh-body);
  transition:background-color var(--cm-t);
}


/* ── 12. 공용 조각 — 배지 · 단계 태그 ──────────────────────────────────────
   13px 배지는 파란 글자를 단독으로 쓰지 않는다(명암비).
   옅은 파란 바닥 + #8FB4FF 글자로 간다.                                    */
.hub-badge{
  display:inline-flex;
  align-items:center;
  padding:1px 6px;
  border-radius:3px;
  font-size:var(--cm-fs-tail);
  line-height:1.4;
  white-space:nowrap;
}
.hub-badge--ex{                 /* 「예시」 */
  background:var(--cm-surf-2);
  /* [WIN0827 공유시트] --cm-mut(4.55:1) 였다. 「예시」는 표시광고 방어선이라
     법적으로 덜 중요한 「준비 중」 배지보다 흐리면 안 된다. 두 배지를 같은 세기로
     맞춘다(--cm-txt-2 · #212429 위 10.39:1). 두 종을 가르는 것은 색이 아니라 문구다.
     되돌리려면 var(--cm-mut) 로 되돌린다. */
  color:var(--cm-txt-2);
  border:1px solid var(--cm-dim);
}
.hub-badge--soon{               /* 「준비 중」 */
  background:var(--cm-surf-2);
  color:var(--cm-txt-2);
  border:1px solid var(--cm-dim);
}
.hub-badge--tier{               /* 「공개 시 무료 · 회원가입」 / 「구독 회원 전용」 */
  background:var(--cm-accent-bg);
  color:var(--cm-accent-soft);
  border:1px solid var(--cm-accent);
}
/* [WIN0827D-R2 공유시트] /tools/ 담당 요청. 「예시」·「준비 중」·「공개 시 …」가 전부 같은 값의
   배지여야 9개 창이 한 사이트로 보인다. 요청은 .hub-badge--tag 신설이었으나 그 이름은
   9개 창 마크업에 0건이라 새로 만들면 죽은 선택자가 된다. 대신 /tools/ 가 실제로 쓰고
   있는 이름(.tl-tag)을 이 자리로 올려 값을 한 곳에 둔다 — 선언 내용은 바로 위
   .hub-badge + .hub-badge--soon 과 글자 하나까지 같다.
   ※ /tools/ 인라인 <style> 에 같은 값이 남아 있다. 그 창 담당은 그 덩이를 지워야 한 규칙이
     두 곳으로 갈리지 않는다. 되돌리려면 이 규칙을 지운다. */
.tl-tag{
  display:inline-flex;
  align-items:center;
  padding:1px 6px;
  border-radius:3px;
  font-size:var(--cm-fs-tail);
  line-height:1.4;
  white-space:nowrap;
  background:var(--cm-surf-2);
  color:var(--cm-txt-2);
  border:1px solid var(--cm-dim);
}
/* 단계 태그 — 아웃라인 1종. 준비 · 등록 · 자금 · 운영을 색으로 가르지 않는다. */
.hub-stage{
  display:inline-flex;
  align-items:center;
  padding:1px 6px;
  border:1px solid var(--cm-accent);
  border-radius:3px;
  color:var(--cm-accent-soft);
  font-size:var(--cm-fs-tail);
  line-height:1.4;
}
.hub-num{font-variant-numeric:tabular-nums;}
.hub-err{color:var(--cm-err);}   /* 빨강은 오류 표시에만 */


/* ── 13. 하위 페이지 단일 컬럼 (/fund/ · /guide/ · /tools/) ────────────────
   3단을 쓰지 않는다. 본문 max 960 한 컬럼.                                  */
.hub-main{
  max-width:var(--cm-main-w);
  margin:0 auto;
  /* [WIN0827D-R2 공유시트] 아래 64px 이었다. 본문 마지막 상자 바닥과 푸터 윗선 사이가
     main 아래 64 + 푸터 위 64 = 128px 이어서, 페이지가 끝난 뒤 한 화면의 6분의 1 이
     빈 채 이어졌다(관제가 index 139 · fund 130 · guide 128 로 세 창 모두 지적한 자리다).
     40 + 푸터 32 = 72px 로 내리면 셀 세로 리듬(32 / 56)과 한 사다리에 든다.
     되돌리려면 64px 로. */
  /* [SPEC0828] 32px … 40px 였다. 아래 여백을 규격값 64 로 올려 8창을 한 값으로 모은다.
     푸터 margin-top 32px 은 9창이 이미 같으므로 건드리지 않았다. */
  padding:var(--cm-main-pt) var(--cm-pad) var(--cm-main-pb);
}
.hub-main > * + *{margin-top:var(--cm-block-gap);}
/* [WIN0827 공유시트] 세로 리듬을 32px 한 값에서 세 단계로 나눈다.
   (a) 「지금 뜨는 이야기」는 앞 블록과 성격이 달라 한 칸 더 벌린다. 11절의
       .hub-tr{margin-top:56px}(0,1,0)가 바로 위 규칙에 밀려 죽어 있었다 —
       직계 선택자(0,2,0)로 되살린다.
   (b) 고정 메뉴 관측점(.hub-sentinel · 높이 1px)이 자기 몫 32px 을 받는 바람에
       아이콘 줄과 마일리지 카드 사이만 65px 이 됐다. sentinel 다음 형제의 여백을
       0 으로 두면 32 + 1 + 0 = 33px 이 되어 다른 구간과 맞는다.
       sentinel 의 DOM 위치는 옮기지 마라 — 고정 메뉴가 뜨는 시점이 바뀐다.
   되돌리려면 아래 두 줄을 지운다. */
.hub-main > .hub-tr{margin-top:56px;}
.hub-main > .hub-sentinel + *{margin-top:0;}

/* [WIN0827D 공유시트] 세로 리듬 사다리 — 32px 한 값을 네 단으로 나눈다.
   실측(1400px) : 랜딩은 h1→검색 32 · 검색→칩 32 · 칩→배너 32 · 배너→아이콘 32 ·
   아이콘→마일리지 33 로 다섯 구간이 전부 같았고, /fund/ · /tools/ 도 블록 사이가
   전부 32px 였다. 간격이 같으면 어디까지가 한 묶음인지 여백이 말하지 못한다.
     20px — 같은 묶음이 이어진다 (칩은 검색의 대안 진입 수단이다 · 같은 성격의 상자가
            연달아 온다)
     40~48px — 성격이 바뀌는 경계
     56px — 「지금 뜨는 이야기」(위 .hub-main > .hub-tr · 건드리지 않았다)
   .hub-main > .hub-sentinel + *{margin-top:0} 도 그대로다 — 아이콘 → 마일리지는
   40 + 1 + 0 = 41px 이 된다.
   랜딩 전용 세 줄(.hub-chips · .hub-ad · .hub-ics)과 하위 페이지 두 줄
   (.hub-cols · 상자 연속)을 한 곳에 모아 둔다. /tools/ 는 같은 사다리를 페이지 안
   <style> 로 흉내 내고 있다 — 아래 section+section 20px 한 줄이 그 창의 23행과
   같은 값이므로, 그 창 담당은 인라인 쪽 한 줄을 지워도 된다.
   되돌리려면 이 블록을 통째로 지운다(전 구간 32px 균등으로 돌아간다). */
.hub-main > .hub-chips{margin-top:20px;}
.hub-main > .hub-ad{margin-top:48px;}
.hub-main > .hub-ics{margin-top:40px;}
/* 같은 성격의 묶음 상자가 연달아 올 때 (/fund/ ①②, /tools/ 카탈로그 5상자) */
.hub-main > section.hub-box + section.hub-box{margin-top:20px;}
/* 성격이 바뀌는 경계 — /fund/ 의 「보실 때 주의(③)」 2열 판. 판이 끝나는 쪽도 경계다. */
.hub-main > .hub-cols{margin-top:48px;}
.hub-main > .hub-cols + .hub-box{margin-top:48px;}
/* 접힌 상자(details.hub-box)와 그 뒤 상자는 「나중 · 다른 창」 한 묶음이다
   (/fund/ ④⑤). 위 section+section 선택자로는 잡히지 않아 한 줄 더 둔다. */
.hub-main > details.hub-box + section.hub-box{margin-top:20px;}

/* 페이지 머리 — h1 은 페이지당 정확히 1개다.
   여기 말고 어디에도 38px 을 쓰지 않는다. */
/* [DAANGN0829] 38px / lh 38(--cm-lh) 이었다 — 랜딩 h1(.hub-ttl)과 **같은 크기**였다.
   전수조사 실측 : 당근은 랜딩 h1 만 38 이고(1개 페이지) **하위 페이지 h1 은 28 / 700 / lh 36.4**
   로 6개 페이지 전부 같다. 랜딩과 하위가 같은 크기면 「여기가 허브다」가 사라진다.
   사다리 : 38(랜딩) › 28(하위) › 24(섹션) › 20 › 16 › 14. 30~37 구간은 비운다.
   되돌리려면 38px / var(--cm-lh) 로. 모바일 26px 은 아래 (미디어쿼리) 한 줄이 맡는다. */
.hub-h1{
  margin:0;
  font-size:28px;
  font-weight:700;
  line-height:36.4px;
  letter-spacing:-.02em;
  color:var(--cm-txt);
}
/* [SPEC0828-R2] line-height:1.7(27.2px)였다. 16px 본문 · 리드는 26px 한 값이다. */
.hub-lead{margin:12px 0 0;font-size:16px;line-height:var(--cm-lh-body);color:var(--cm-txt-2);}
.hub-head__row{display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap;}
/* [WIN0827D 공유시트] /fund/ 담당 요청. 머리 세 줄(h1 → 배지 → 13px 문장)이 전부
   12px 균등이라 같은 무게로 읽혔다. 배지와 문장은 「지금 상태」 한 묶음이므로 붙이고
   (6px) h1 · 리드와는 뗀다(20px). 9개 창 머리가 같은 규격이라 한 곳만 고치면 전부 맞는다.
   .hub-lead 도 함께 잡는 것은 /guide/ · /tools/ 가 h1 → 리드 → 배지줄 순서라
   .hub-h1 + 만으로는 그 두 창이 12px 로 남기 때문이다.
   되돌리려면 아래 세 줄을 지운다. */
/* [SPEC0828] 20px 였다. h1 → 바로 다음 형제는 한 값(12px)이다. */
.hub-h1 + .hub-head__row,
.hub-lead + .hub-head__row{margin-top:var(--cm-h1-gap);}
.hub-head__row + .hub-head__row{margin-top:var(--cm-gap-xs);}   /* [SPEC0828-R2] 6px 였다 — 사다리의 가장 좁은 칸은 8px 이다 */

/* [WIN0827D-R3 공유시트] /fund/ 담당 요청. 머리 세 줄(h1 38 → 부제 16 → 배지 13)이 12 / 20 으로
   붙어 한 덩어리인데, 그 덩어리와 첫 카드 사이가 13절 사다리의 32px 이라 「머리가 끝났다」는
   경계가 여백으로 읽히지 않았다. 세 줄의 12 / 20 은 그대로 두고 경계만 64 로 벌린다 —
   13절 사다리(20=같은 묶음 / 48=성격이 바뀌는 경계)에 64=문서의 머리와 본문 경계 한 단을 더한다.
   (0,2,0) 이라 .hub-main > * + *{margin-top:32px}(0,1,0) 만 이긴다.
   ※ 지금 class="hub-head" 를 단 창은 /fund/ 하나다. 나머지 8개 창 담당은 머리 래퍼 <div> 에
     같은 클래스를 붙여야 이 경계를 함께 받는다(.hub-head__row 는 이미 있는데 그 주인 블록
     이름만 없다). 되돌리려면 이 규칙과 16절의 40px 을 함께 지운다. */
/* [SPEC0828-R2] 뒤쪽이 `+ .hub-box` 였다. 첫 형제가 카드가 아닌 창은 이 규칙에 닿지 못했고,
   /tools/ 는 닿으면서도 17-4 의 `.hub-main > .tl-vow`(0,3,0)에 32px 로 가로채였다.
   뒤쪽을 `+ *` 로 열고, 무게가 필요한 자리는 17-12 가 (0,4,0)으로 다시 못 박는다.
   ※ 9창이 머리 래퍼에 class="hub-head" 를 달면 아래 구조 선택자는 지워도 된다. */
.hub-main > .hub-head + *,
.pt-main > .hub-head + *,
/* 머리 래퍼의 클래스 이름이 창마다 다르다 — /fund/ .hub-head · /tools/ .tl-head · /guide/ 무명 <div>.
   창 HTML 을 고치지 않고 셋을 한 규격으로 모으려면 이름이 아니라 구조로 잡아야 한다.
   「본문 직계 자식 중 h1 을 품은 덩이」 다음의 첫 형제 — 각 창에 하나뿐이다.
   home 의 h1 은 스스로 .hub-ttl 이라 이 조건에 걸리지 않는다(랜딩 머리는 별도 부품이다). */
.hub-main > :has(.hub-h1) + *{margin-top:var(--cm-head-gap);}   /* [SPEC0828] 64px 였다 */

/* [WIN0827D-R3 공유시트] 빵부스러기 한 규격. 「홈 › …」 한 줄이 /my/ · /mileage/ 두 창에만
   있어 같은 깊이의 하위 창을 오갈 때 h1 위 한 줄이 생겼다 사라졌다(관제 전체 지적).
   넣는 쪽으로 통일하되 값이 한 곳에 있어야 여섯 창이 같은 줄을 쓴다.
   .hub-crumb 는 /fund/ 가, .hub-bc 는 /guide/ · /tools/ 가 이미 쓰는 이름이라 둘 다 받는다
   (창 HTML 을 고치지 않고 세 창을 한 값으로 모으는 유일한 방법이다 — 죽은 선택자가 아니다).
   /my/ · /mileage/ 의 .bc(mypage.css)와 /terms/ · /privacy/ · /feed/ 의 인라인 .bc 는
   13px 로 함께 맞췄다. 12px 은 이 사이트 사다리(38-20-16-13) 밖의 값이라 쓰지 않는다.
   대비 : #868B94 on #16171B = 5.19:1 (AA).
   되돌리려면 이 세 규칙과 16절의 10px 한 줄을 지운다. */
.hub-crumb,
.hub-bc{margin:0 0 12px;font-size:var(--cm-fs-tail);line-height:1.6;color:var(--cm-mut);}
.hub-crumb a,
.hub-bc a{color:var(--cm-mut);text-decoration:none;}
@media (hover:hover){
  .hub-crumb a:hover,
  .hub-bc a:hover{color:var(--cm-accent-soft);text-decoration:underline;}
}

/* 블록 껍데기 */
.hub-box{
  background:var(--cm-surf);
  border:1px solid var(--cm-edge);
  border-radius:var(--cm-card-r);   /* [SPEC0828] 10px 하드코딩이었다 */
  overflow:hidden;
}
/* [WIN0827D-R3 공유시트] /tools/ 담당 요청. padding 이 0 16px 이라 375px 에서 제목이 두 줄로
   접히면 글자가 띠 위아래 모서리에 닿았다. 세로 8px 을 주고 줄바꿈 몫(row-gap 6px)을 함께 둔다.
   space-between 은 묶음 조건 배지(/tools/ 의 .tl-tag)를 띠 오른쪽 끝 — 그 아래 행들의 상태 칸과
   같은 세로선 — 에 세우기 위한 것이다. 배지가 없는 fund · guide · feed 에서는 아무 일도 하지 않는다
   (자식이 제목 하나뿐이라 space-between 은 flex-start 와 같다).
   min-height 44 는 그대로다 : .hub-box__ttl 의 line-height 28 + 세로 패딩 16 = 44.
   되돌리려면 padding:0 16px 로 되돌리고 위 네 줄을 지운다. */
.hub-box__hd{
  display:flex;align-items:center;gap:8px;
  justify-content:space-between;
  flex-wrap:wrap;
  row-gap:var(--cm-gap-xs);       /* [SPEC0828-R2] 6px 였다 — 사다리 밖의 값이다 */
  /* [SPEC0828-R3] border-box 였다. 세로 안여백을 0 으로 내리자 테두리 1px 이 44 **안으로**
     들어가 실측 높이가 44px 로 떨어졌다 — my·mileage·terms·privacy 의 띄(content-box · 45px)와
     한 사이트에서 두 값이 된다. 규격은 min-height 44 + 아랫선 1 = 45 다.
     되돌리려면 border-box 로. */
  box-sizing:content-box;
  /* [SPEC0828] 44px 하드코딩이었다. 값은 그대로고 토큰만 물린다 —
     세로 안여백 8+8 과 제목 line-height 28 이 정확히 44 라 규격을 이미 맞추고 있고,
     padding 을 0 으로 내리면 375px 에서 두 줄로 접힌 제목이 띠 모서리에 닿는다. */
  min-height:var(--cm-cardhd-h);
  /* [SPEC0828-R3] 8px var(--cm-card-px) 였다. 머리띄 안여백이 8px 16px(fund·guide·tools·feed)와
     0 16px(my·mileage·terms·privacy) 두 값이었다. 높이는 min-height 가 정하므로
     세로 안여백은 0 한 값이다. ≤600 에서만 8px 을 되돌린다(16절) — 그 폭에서는
     제목이 두 줄로 접혀 띄 높이가 min-height 를 넘기 때문이다. */
  padding:var(--cm-band-pad);
  /* [WIN0827D-R2 공유시트] 면이 없었다. 묶음 카드가 여러 장 이어질 때(/tools/ 5장 · /fund/ ①②)
     머리 띄가 본문과 같은 면이라 스크롤 중에 묶음 경계가 보이지 않았다. /tools/ 만
     인라인으로 채우고 있어 같은 .hub-box__hd 가 두 창에서 다르게 보였다.
     새 색이 아니다 — 행 · 칩이 쓰는 같은 토큰이다. 되돌리려면 이 한 줄을 지운다. */
  background:var(--cm-surf-2);
  border-bottom:1px solid var(--cm-edge);
}
/* [WIN0827 공유시트] 16px 이었다. 본문 · 라벨 16px 과 h1 38px 사이에 아무 단계가
   없어, 블록 제목이 그 블록 본문과 같은 크기로 읽혔다. 20px 한 단계만 만든다 —
   20 과 38 사이에 다른 값을 만들지 마라. 38px 은 여전히 h1 하나뿐이다.
   되돌리려면 .hub-box__ttl 과 .hub-card__ttl 을 16px 로 되돌린다. */
/* [WIN0827D-R3 공유시트] line-height 가 없어 상속값을 받았다. 머리 띠에 세로 패딩 8+8 이
   들어오면서 띠 높이가 규격(44)을 넘었다. 28px 로 못 박아 28 + 16 = 44 를 맞춘다.
   되돌리려면 line-height 한 줄을 지운다. */
/* [SPEC0828-R2] letter-spacing 이 없어 상속값(16px 의 -.02em = -0.16px)을 받았다.
   20px 의 -.02em 은 -0.4px 다 — h1(-0.76px)과 같은 -.02em 집안 값이다. */
.hub-box__ttl{margin:0;font-size:20px;font-weight:700;line-height:var(--cm-lh-h2);letter-spacing:var(--cm-h2-ls);color:var(--cm-txt);}
.hub-box__bd{padding:var(--cm-card-pad);}   /* [SPEC0828-R2] 14px 16px 하드코딩이었다 */
/* [WIN0827D-R3 공유시트] /fund/ 담당 요청. 1400px 실측에서 카드 본문이 878px 이라 16px 한 줄이
   60자를 넘어 줄 되돌림이 길었다. 카드 폭은 규격이므로 두고 **읽는 줄**만 좁힌다 —
   16px 은 591px, 13px 은 480px 로 떨어져 폭에서도 사다리(38-20-16-13)가 유지된다.
   표(.hub-tb) · 격자(.hub-item) · 2열 판(.hub-cols) 안쪽은 이미 62ch 보다 좁아 값이 걸리지 않는다.
   같은 .hub-box 를 쓰는 fund · guide · tools · feed 네 창이 한 곳에서 함께 맞는다.
   되돌리려면 이 규칙을 지운다. */
.hub-box__bd > .hub-colnt,
.hub-box__bd .hub-item__tx,
.hub-box__bd > .hub-note,
.hub-box__ft > .hub-note{max-width:62ch;}

.hub-box__ft{
  padding:12px var(--cm-card-px);   /* [SPEC0828-R2] 16px 하드코딩이었다 */
  border-top:1px solid var(--cm-edge);
  /* [SPEC0828-R2] line-height:1.7(27.2px)였다. 16px 본문의 줄 높이는 26px 한 값이다. */
  font-size:16px;line-height:var(--cm-lh-body);
  color:var(--cm-txt-2);
}

/* [WIN0827 공유시트] /fund/ 담당 요청(F1). 예시 표를 <details> 로 접었다.
   마크업이 details 에 .hub-box, summary 에 .hub-box__hd 를 함께 입혀 형제 상자와
   면 · 테두리 · 높이(44)를 이미 맞췄으므로, 여기서 정하는 것은 셋뿐이다 —
   (1) 브라우저 기본 삼각형 표식을 지운다(마크업의 ▾ 와 두 개가 겹쳐 보인다)
   (2) summary 에 커서를 준다(포커스 링은 2절의 .hub-body :focus-visible 이 이미 맡는다)
   (3) 열림 상태에서 ▾ 를 뒤집어 접힘/펼침을 표식 하나로 읽게 한다.
   회전에 transition 을 걸지 않는다 — 걸면 17절 reduce 목록에 항목이 하나 더 늘고,
   여기서 얻는 것이 없다. 표식 색은 --cm-mut(#1A1C20 위 4.55:1) 다.
   되돌리려면 이 블록을 지운다. */
.hub-fold__sm{cursor:pointer;list-style:none;transition:background-color var(--cm-t);}
.hub-fold__sm::-webkit-details-marker{display:none;}
/* [WIN0827D 공유시트] /fund/ 담당 요청. 44px 바 전체가 여는 자리인데 화면에 눌린다는
   신호가 없었고, 표식 ▼ 를 키워도 테두리 상자가 없어 컨트롤로 읽히지 않았다.
   바꾸는 속성은 background-color 뿐이라 15절 모션 규칙 안이다(호버는 @media
   (hover:hover) · 누름은 .is-pressed — hub-shell.js 의 PRESS 목록에 이름을 더했다).
   되돌리려면 .hub-fold__sm 의 transition 과 아래 호버 · 누름 두 규칙, 그리고
   .hub-fold__mk 의 상자 다섯 줄을 지운다. */
@media (hover:hover){
  .hub-fold__sm:hover{background:var(--cm-surf-2);}
}
.hub-fold__sm.is-pressed{background:var(--cm-surf-3);}
/* [WIN0827D-R2 공유시트] 같은 조작(접었다 펜다)인데 /fund/ 는 1px 테두리 상자 안 13px 표식,
   /mileage/ 자주 묻는 질문(mypage.css .faq summary::after)은 테두리 없는 파란 「+」 두 모양이었다.
   9개 창의 접힘 표식을 「테두리 없는 16px + (#8FB4FF) · 열리면 −」 하나로 모은다.
   색을 새로 만들지 않았다 — --cm-accent-soft 는 mileage 가 이미 쓰는 값이다.
   열림 표시는 회전이 아니라 글리프 치환이라 마크업의 「+」 를 그대로 쓴다(닫힘일 때만 보인다).
   되돌리려면 width/height:24px · border:1px solid var(--cm-edge) · border-radius:6px ·
   justify-content:center · font-size:var(--cm-fs-tail) · color:var(--cm-txt-2) 와
   .hub-fold[open] .hub-fold__mk{transform:rotate(180deg)} 를 되살린다. */
.hub-fold__mk{
  flex:0 0 auto;
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  width:auto;height:auto;
  border:0;
  background:none;
  color:var(--cm-accent-soft);
  font-size:16px;
  font-weight:700;
  line-height:1;
}
.hub-fold[open] .hub-fold__mk{transform:none;font-size:0;}
.hub-fold[open] .hub-fold__mk::after{content:"\2212";font-size:16px;font-weight:700;}

/* 탭 — 탭바와 「예시」 칩을 감싸는 래퍼가 밑줄을 갖는다.
   칩은 role=tablist 의 자식이 되면 안 되므로 tablist 바깥에 둔다. */
.hub-tabsrow{
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 16px;
  border-bottom:1px solid var(--cm-edge);
}
.hub-tabs{display:flex;gap:18px;overflow-x:auto;scrollbar-width:none;}
.hub-tabs::-webkit-scrollbar{display:none;}
.hub-tabs__b{
  position:relative;
  flex:0 0 auto;
  min-height:42px;
  padding:0 2px;
  font-size:16px;
  color:var(--cm-mut);
  white-space:nowrap;
  background:none;border:0;cursor:pointer;
  transition:background-color var(--cm-t);
}
.hub-tabs__b[aria-selected="true"]{color:var(--cm-accent-soft);}
.hub-tabs__b[aria-selected="true"]::after{
  content:"";
  position:absolute;left:0;right:0;bottom:-1px;
  height:2px;
  background:var(--cm-accent);
  pointer-events:none;
}
/* [WIN0827 공유시트] margin-left:auto 였다. 1400px 에서 탭 스트립이 373px 에서 끝나는데
   「예시」 칩만 x=1095 에 홀로 떠 있어 무엇을 가리키는 라벨인지 보이지 않았다.
   탭 바로 옆에 붙인다. 되돌리려면 margin-left 를 auto 로 되돌린다. */
.hub-tabsrow__ex{margin-left:8px;flex:0 0 auto;}

/* 목록 표 — 어느 폭에서도 열을 없애지 않는다.
   표만 가로로 스크롤시키고 페이지 body 는 가로 스크롤을 만들지 않는다. */
.hub-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.hub-tb{width:100%;min-width:640px;border-collapse:collapse;font-size:16px;line-height:var(--cm-lh-body);}   /* [SPEC0828-R2] 줄 높이가 상속값이었다 */
.hub-tb th,
.hub-tb td{
  padding:10px 8px;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--cm-edge);
}
.hub-tb thead th{
  font-size:var(--cm-fs-tail);font-weight:500;line-height:var(--cm-lh-tail);   /* [SPEC0828-R2] 13px 꼬리는 20px 이다 */
  color:var(--cm-mut);
  white-space:nowrap;
}
.hub-tb tbody td{min-height:44px;}
/* [WIN0827D 공유시트] /fund/ 담당 요청. 표는 .hub-scroll 안에서 상자 폭을 그대로
   쓰는데 첫 열 글자가 x=8 에서 시작해 바로 위 .hub-box__bd 문단(x=16)과 8px 어긋났다 —
   ④ 를 펼친 화면에서 「마감」과 「아래 목록은…」의 왼쪽 끝이 맞지 않았다.
   상자 안숨 16px 에 맞춘다. 되돌리려면 이 두 규칙을 지운다. */
.hub-tb th:first-child,
.hub-tb td:first-child{padding-left:16px;}
.hub-tb th:last-child,
.hub-tb td:last-child{padding-right:16px;}
/* 마지막 열(접수마감 · 작성일)은 우측 정렬 + 고정폭 숫자 */
.hub-tb th:last-child,
.hub-tb td:last-child{text-align:right;font-variant-numeric:tabular-nums;}
/* 5열 : 상태키 44 / 공고명 1fr / 기관 100 / 지역 48 / 접수마감 88 */
/* [WIN0827 공유시트] 44px 였다. .hub-tb td{padding:10px 8px} 와 겹쳐 내용 폭이 28px 이라
   16px 「D-○」(약 30px)가 들어가지 않아 8행 전부가 두 줄로 깨졌다(실측 행 높이 69px ·
   정상 44px). 64px 이면 한 줄에 든다. 되돌리려면 44px 로 되돌린다. */
.hub-tb--fund col:nth-child(1){width:64px;}
.hub-tb--fund col:nth-child(3){width:100px;}
.hub-tb--fund col:nth-child(4){width:48px;}
.hub-tb--fund col:nth-child(5){width:88px;}
/* 6열 : 단계 44 / 제목 1fr / 작성자 100 / 응원 48 / 댓글 48 / 작성일 60 */
.hub-tb--feed col:nth-child(1){width:44px;}
.hub-tb--feed col:nth-child(3){width:100px;}
.hub-tb--feed col:nth-child(4),
.hub-tb--feed col:nth-child(5){width:48px;}
.hub-tb--feed col:nth-child(6){width:60px;}

/* 4단계 카드 (/guide/) */
.hub-cards{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.hub-card{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:150px;
  padding:16px;
  background:var(--cm-surf);
  border:1px solid var(--cm-edge);
  border-radius:10px;
}
/* [WIN0827 공유시트] /guide/ 담당 요청. 단계 번호와 「준비 중」 배지를 카드 첫 줄에
   나란히 두는 메타 줄이다. 마크업에는 이미 들어와 있는데 규칙이 없어 두 조각 사이가
   공백 문자 폭(3.5px)뿐이었다. 되돌리려면 이 한 줄을 지운다. */
.hub-card__meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.hub-card__step{font-size:var(--cm-fs-tail);color:var(--cm-mut);font-variant-numeric:tabular-nums;}
.hub-card__ttl{margin:0;font-size:20px;font-weight:700;color:var(--cm-txt);}
.hub-card__tx{margin:0;font-size:16px;line-height:1.65;color:var(--cm-txt-2);}
.hub-card__lk{margin-top:auto;display:flex;flex-wrap:wrap;gap:10px;font-size:16px;}
.hub-card__lk a{
  padding:1px 3px;
  border-radius:4px;
  color:var(--cm-accent-soft);
  text-decoration:underline;
  text-underline-offset:3px;
  transition:background-color var(--cm-t);
}

/* [WIN0827 공유시트] /guide/ 담당 요청. 4칸 격자(위 .hub-cards)를 세로 스텝 목록으로
   바꾼 마크업이 들어왔다. 격자는 1400 에서 넷을 나란히 세워 「순서」가 아니라
   「선택지」로 읽혔고 1024 에서 2×2 로 접히며 읽는 순서가 좌→우→좌→우 로 꺾였다.
   이 목록은 1400 · 1024 · 600 · 375 어느 폭에서도 열 수를 바꾸지 않는다 —
   16절에 이 이름으로 된 분기를 만들지 마라.
   위 .hub-cards · .hub-card* 규칙은 지우지 않고 남긴다(지금 마크업 0건이지만
   설계도가 「다른 창이 쓸 수 있으니 남겨라」로 못 박았다).
   [WIN0827D-R3] 왼쪽 세로 축선(.hub-steps::before)은 지웠다 — 아래 그 자리 주석 참조.
   단계를 가르는 것은 이제 .hub-step + .hub-step 의 가로 구분선 하나다.
   클래스 이름은 /guide/ 마크업을 그대로 따랐다(__tx · __qs · __sites · __go · __ask).
   목록 두 종(__qs · __sites)에 list-style:disc 를 되살린다 — style.css 가
   ul,ol{list-style:none} 으로 전역에서 지워 두어, padding-left 만 주면 글머리 없이
   들여쓰기만 된 문단으로 읽힌다.
   되돌리려면 이 블록을 지운다. */
/* [WIN0827D-R3 공유시트] /guide/ 담당 요청. 여기 있던 .hub-steps::before(세로 축선)와
   .hub-steps 의 position:relative 를 지웠다.
   왜 : #2A2E35 축선이 #1A1C20 면 위에 놓여 대비가 1.2:1 이라 1400 · 375 두 폭 스크린샷에서
   01~04 를 잇는 선이 화면에 보이지 않았다. 보이지 않는 선을 위해 .hub-step__no 가 면 색으로
   축선을 가리는 처리까지 붙들고 있었다. 이번에 들어온 단계 구분선(아래 .hub-step + .hub-step 의
   border-top)이 「네 덩이」 표시를 대신한다 — 안 보이는 장치를 지우고 보이는 장치 하나만 남긴다.
   되돌리려면 .hub-steps 에 position:relative 를 되살리고 이 자리에
   .hub-steps::before{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:1px;
   background:var(--cm-edge);} 를 다시 넣는다. */
.hub-steps{margin:0;padding:0;list-style:none;}
/* [WIN0827D 공유시트] /guide/ 담당 요청. 28px 였다. 네 단계가 각각 5~7줄로 길어져
   28px 로는 단계 사이 경계가 단계 안 여백과 비슷했다 — 세로 축선만으로 나뉘어 있어
   여백이 위계를 만들지 못했다. 되돌리려면 padding 을 0 0 28px 로 되돌린다. */
/* [WIN0827D-R3 공유시트] /guide/ 담당 요청. padding:0 0 36px 였다. 단계 사이가 36px 이라
   단계 안 최대 여백(16px)과 차이가 작아 네 단계가 하나의 긴 목록으로 읽혔다.
   사이를 72px(36 + 36)로 벌리고 그 한가운데에 1px --cm-dim 선을 두어 경계를 눈에 보이게 한다.
   첫 단계에는 선이 붙지 않는다. 단계 안 최대 여백은 16px 그대로다.
   ※ .hub-step* 를 쓰는 창은 /guide/ 하나뿐이지만 규격은 이 파일 한 벌이라는 원칙대로
     그 창 <style> 에 있던 값을 그대로 옮겼다 — 값이 같아 화면은 변하지 않는다.
     그 창 담당은 인라인 <style> 의 (1)(2)(3)(4) 덩이를 지워야 한 규칙이 두 곳으로 갈리지 않는다.
   되돌리려면 padding:0 0 36px · :last-child{padding-bottom:0} 로 되돌리고 아래 한 줄을 지운다. */
.hub-step{position:relative;display:flex;gap:16px;padding:0;}
.hub-step + .hub-step{margin-top:36px;padding-top:36px;border-top:1px solid var(--cm-dim);}
/* [WIN0827D-R2 공유시트] 32px · --cm-edge 테두리 · --cm-surf 면 · --cm-mut 숫자였다. 전해상도에서
   01·02·03 이 바로 옆 본문(#D1D3D8)보다 흐려 순서 표식이 아니라 장식으로 읽혔다.
   /my/ · /mileage/ 가 같은 역할을 네이비 원 + 흰 숫자로 그리므로 9개 창 번호 표식을
   그 한 벌로 모은다(mypage.css .step_n 과 같은 값으로 맞췄다).
   색을 새로 만들지 않았다 : --cm-accent-bg(#1E2A44) · --cm-accent(#2E6BFF) · --cm-white 는
   .hub-badge--tier 가 이미 쓰는 조합이다. 면을 #2E6BFF 로 채우면 흰 13px 가 4.50:1 로
   경계선이라(13px 는 큰 글씨가 아니다) 면을 네이비로 두고 테두리에 #2E6BFF 를 쓴다 —
   흰 숫자 14.3:1 이고 「파랑을 카드 바탕으로 쓰지 마라」와도 어긋나지 않는다.
   배경이 불투명이라 축선을 가리는 성질은 그대로다. 22px 안쪽 20px 에 13px/700 tabular
   두 자리(약 14.3px)가 들어간다. 되돌리려면 32px · --cm-edge · --cm-surf · --cm-mut 로
   되돌리고 font-weight 를 지운다. */
.hub-step__no{
  position:relative;
  z-index:1;
  flex:0 0 22px;
  width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--cm-accent);
  border-radius:50%;
  line-height:1;                     /* [SPEC0828-R2] 22px 원 안의 숫자다 — 상속 줄 높이를 끊는다 */
  background:var(--cm-accent-bg);
  color:var(--cm-txt);
  font-size:var(--cm-fs-tail);
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.hub-step__bd{min-width:0;flex:1 1 auto;}
/* [WIN0827D 공유시트] /guide/ 담당 요청 여섯 건을 한 덩이로 반영한다.
   실측(1400px · guide_after_1400_step1.png) : 「질문 셋」과 「공식 사이트 둘」이 같은
   disc 글머리 · 같은 18px 들여쓰기 · 같은 #D1D3D8 로 붙어 있어, 역할이 다른 두 묶음이
   다섯 항목짜리 한 목록으로 읽혔다. 질문은 사장님이 스스로 답할 자리이고 사이트는
   창모를 떠나는 출구다.
     · __qs  — 면(#212429)으로 감싸 「답할 자리」를 만들고 글머리를 disc 에서 짧은
               가로 마디로 바꾼다. 색은 팔레트 안(면2 · 구분선)에서만 쓴다.
     · __sites — 글머리를 없애고 줄 맨 앞에 밑줄 친 외부 링크가 서게 한다.
               지금은 disc 가 링크보다 앞에 서서 링크가 목록 항목의 일부로 눌려 보였다.
     · __ttl 4 → 2px  — 32px 마디의 세로 중심은 16px 인데 4 + 20/1.4 로 제목 중심이
               18px 에 와 마디가 제목보다 2px 위로 떠 보였다.
     · __tx 10 → 6px  — 제목과 그 한 줄 설명은 같은 묶음이다. 아래 질문 목록과는 14px.
     · __go 12 → 16px — 「다음 행동」은 앞의 설명 · 질문 · 사이트 어느 것과도 성격이
               다른 마지막 줄인데 사이트 목록의 넷째 줄처럼 붙어 보였다.
   되돌리려면 이 절을 지우고 __ttl 4px · __tx 10px · 두 목록을 disc/18px 한 벌로 ·
   __go 12px 로 되돌린다. */
/* [WIN0827D-R2 공유시트] 20px 이었다. h2 「단계별 질문과 공식 사이트」와 h3 「1단계 · 준비」가
   둘 다 20px/700 흰색이라, 상자 제목이 제 안에 든 네 단계보다 위라는 표시가 화면에 없었다.
   /my/ 가 이미 h2 20 / h3 16 을 쓰므로 사다리 38 → 20 → 16 → 13 에 맞춘다.
   되돌리려면 20px 로. */
.hub-step__ttl{margin:2px 0 0;font-size:16px;font-weight:700;line-height:var(--cm-lh-h3);color:var(--cm-txt);}   /* [SPEC0828-R2] 줄 높이가 상속값이었다 */
.hub-step__tx{margin:6px 0 0;font-size:16px;line-height:var(--cm-lh-body);color:var(--cm-txt-2);}   /* [SPEC0828-R2] 1.7(27.2px)였다 */
/* [WIN0827D-R3 공유시트] /guide/ 담당 요청. padding 10px 14px · line-height 1.7 ·
   li padding-left 14px · 글머리 6x1px --cm-dim 가로 마디였다.
   왜 : 글머리가 6x1px 짜리 회색 마디라 질문 문장에 눌려 목록인지 문단인지 구분이 약했다.
   4px 파랑 원으로 바꾸고(글자 대비와 무관한 도형이다) 줄 간격을 1.7 → 1.5 로 줄여
   항목 top-to-top 33.2px → 24px 으로 좁힌다. 16px 본문에서 20px 로 더 좁히면
   line-height 1.25 가 되어 375px 에서 두 줄로 접히는 질문의 줄이 서로 붙는다 —
   규격(본문 16px)을 지키는 선에서 가장 좁은 값이 24px 이다.
   되돌리려면 padding:10px 14px · line-height:1.7 · li{padding-left:14px} ·
   ::before{left:0;top:.85em;width:6px;height:1px;background:var(--cm-dim)} 로 되돌리고
   li + li 의 margin-top:0 을 지운다. */
/* [SPEC0828-R3] 면 #212429 + 라운드 10 + 안여백 14/16 짜리 상자였다(실측 878×106 ×4).
   카드(#1A1C20 · 1px #555D6D) 안에 또 면을 깔면 경계가 세 겹이 된다 — 9창 중
   3겹 면을 가진 것은 guide · my · mileage 셋뿐이었고 나머지 6창은 0개다.
   카드 안 구역 나눔은 윗선 1px + 위 안여백 12px 한 벌뿐이다(17-25 와 같은 값).
   되돌리려면 padding · background · border-radius 세 줄을 되살리고 border-top 을 지운다. */
.hub-step__qs{
  margin:var(--cm-gap-m) 0 0;
  padding:var(--cm-gap-s) 0 0;
  border-top:1px solid var(--cm-edge);
  list-style:none;
  font-size:var(--cm-fs-body);line-height:var(--cm-lh-body);
  color:var(--cm-txt-2);
}
.hub-step__qs li{position:relative;padding-left:16px;line-height:var(--cm-lh-body);}   /* [SPEC0828-R2] 줄 높이가 1.5(24px)였다 */
.hub-step__qs li::before{
  content:"";
  position:absolute;left:0;top:calc(.75em - 2px);
  width:4px;height:4px;
  border-radius:50%;
  background:var(--cm-accent);
  /* [LAYOUT0828-R3] pointer-events:none 한 줄을 더했다. 장식용 절대배치 가상요소가
     자손 · 형제의 누름을 가로채는 사고를 막는 못이다(지시서 8항). 되돌리려면 이 줄을 지운다. */
  pointer-events:none;
}
.hub-step__sites{
  margin:14px 0 0;
  padding-left:0;
  list-style:none;
  font-size:var(--cm-fs-body);line-height:var(--cm-lh-body);   /* [SPEC0828-R3] 1.7(27.2px)이었다 — guide 16곳의 출처 */
  color:var(--cm-txt-2);
}
/* [WIN0827D-R3 공유시트] /guide/ 담당 요청. display:block 이었다.
   왜 : 설명 시작 x 가 링크 라벨 폭을 따라 364.3 · 369.5 · 378 · 390.5 · 396.8 로 32.5px
   흔들려 여덟 줄의 왼쪽선이 맞지 않았다(1400px 실측). 160px 은 가장 긴 라벨
   「소상공인24 ↗」 97.8px 이 들어가고도 남는 폭이다. 600px 미만은 16절에서 한 열로 접는다.
   되돌리려면 display:block 으로 되돌리고 .hub-step__site-tx 와 16절 한 줄을 지운다. */
.hub-step__sites li{display:grid;grid-template-columns:160px 1fr;column-gap:16px;align-items:baseline;}
.hub-step__site-tx{min-width:0;}
/* 질문 목록은 line-height 1.5 자체가 줄 간격을 만든다 — 항목 사이 여백을 더 두지 않는다. */
.hub-step__qs li + li{margin-top:0;}
.hub-step__sites li + li{margin-top:10px;}
/* [SPEC0828-R2] gap:8px 16px 였다. 한 줄 안의 링크 묶음은 12px 한 값이다. */
.hub-step__go{display:flex;flex-wrap:wrap;gap:var(--cm-gap-s);margin:16px 0 0;font-size:16px;}
.hub-step__ask{margin:12px 0 0;font-size:16px;line-height:var(--cm-lh-body);color:var(--cm-txt-2);}   /* [SPEC0828-R2] 1.7 이었다 */
/* [WIN0827D 공유시트] /guide/ 담당 요청. 안내 한 줄(「준비 · 등록 · 자금은 문을 열기
   전 …」)과 01 단계 사이가 0 이라 안내가 1단계의 머리말처럼 붙어 읽혔다. 이 줄은
   네 단계 전체에 걸리는 축이다. 되돌리려면 이 한 줄을 지운다. */
.hub-box__bd > .hub-note + .hub-steps{margin-top:18px;}
/* [WIN0827D 공유시트] /guide/ 담당 요청. 한글은 기본으로 음절 사이 어디서나 줄이
   갈린다 — 실측으로 1400px 에서 「창업 인증 피 / 드›」, 375px 에서 「넛 / 지 상담」으로
   링크 이름 한가운데가 갈라졌다. 2절의 keep-all 이 어절은 붙여 주지만, 어절 사이에서
   갈리는 것까지 막지는 못한다. 링크 이름은 한 덩이로 읽혀야 눌러야 할 것으로 보인다.
   지금 마크업은 &nbsp; 와 U+2060 으로 막아 두었는데, 이 규칙이 들어왔으므로 그 창
   담당은 그 문자 처리를 걷어낼 수 있다. 되돌리려면 이 규칙을 지운다. */
.hub-box__ft .hub-a,
.hub-step__go .hub-a,
.hub-step__sites .hub-a{white-space:nowrap;}

/* 두 열(무료 · 구독)을 나란히 두는 판 (/tools/) */
/* [WIN0827D-R2 공유시트] 격자 칸이 기본값 stretch 라 두 상자가 같은 높이로 늘었다.
   /fund/ 1400px 실측 : 왼·오른 둘 다 y=1384 h=565 인데 오른쪽 마지막 행은 y=1882 에서
   끝나 상자 바닥에 83px 이 빈다. /tools/ 는 두 열의 행 수가 같아 달라지는 것이 없다.
   되돌리려면 align-items:start 한 줄을 지운다. */
/* [SPEC0828-R2] gap:20px 였다. 카드 안 열과 열은 24px 한 값이다(/tools/ .hub-item 기준). */
.hub-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--cm-gap-l);align-items:start;}
.hub-colhd{margin:0 0 var(--cm-gap-xs);font-size:16px;font-weight:700;line-height:var(--cm-lh-h3);color:var(--cm-txt);}   /* [SPEC0828-R2] 아래 6px · 줄 높이 상속이었다 */
.hub-colnt{margin:0 0 12px;font-size:var(--cm-fs-tail);line-height:var(--cm-lh-tail);color:var(--cm-mut);}   /* [SPEC0828-R2] 1.6(20.8px)였다 */

/* 도구 한 행 — 분류 / 이름 / 한 줄 설명 / 등급 배지 / 상태 배지.
   16종 전부 링크를 걸지 않는다(아직 열리지 않는다). */
.hub-list{display:flex;flex-direction:column;}
/* [WIN0827 공유시트] 이름 옆에 nowrap 배지가 서는 가로 한 줄 구조였다.
   /tools/ 는 이름 · 설명 · 메타 3줄, /fund/ 는 이름 · 설명 2줄로 마크업이 바뀌어
   가로 배치가 1400px 에서 행 높이를 81~135px 로 들쭉날쭉하게, 375px 에서 이름을
   3~4줄로 깨뜨렸다. 세로 3줄 구조로 바꾼다. 배지가 이름 옆에 서는 자리는
   .hub-item__hd 한 겹이 맡는다(/tools/ 만 쓴다).
   되돌리려면 .hub-item 을 flex 로 되돌리고 __hd · __meta · :target 을 지운다. */
.hub-item{
  display:block;
  padding:14px 0;
  border-bottom:1px solid var(--cm-edge);
}
.hub-item:last-child{border-bottom:0;}
/* [SPEC0828-R2] gap:4px 8px 였다. 4px 은 간격 사다리 밖이라 8px 로 흡수한다. */
.hub-item__hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--cm-gap-xs);}
.hub-item__cat{font-size:var(--cm-fs-tail);line-height:var(--cm-lh-tail);color:var(--cm-mut);}   /* [SPEC0828-R2] 줄 높이가 상속값이었다 */
.hub-item__nm{display:block;font-size:16px;font-weight:700;line-height:var(--cm-lh-h3);color:var(--cm-txt);}   /* [SPEC0828-R2] 줄 높이가 상속값이었다 */
.hub-item__tx{margin:6px 0 0;font-size:16px;line-height:var(--cm-lh-body);color:var(--cm-txt-2);}   /* [SPEC0828-R2] 1.6(25.6px)였다 */
.hub-item__meta{margin:6px 0 0;font-size:var(--cm-fs-tail);line-height:var(--cm-lh-tail);color:var(--cm-mut);}   /* [SPEC0828-R2] 1.6(20.8px)였다 */

/* [WIN0827D 공유시트] /tools/ 담당 요청. 1024px 초과에서 행을 2칸 격자로 둔다 —
   왼쪽은 이름 · 설명, 오른쪽은 세로 구분선 뒤 상태 한 칸.
   960px 판에서 3단으로만 쌓으면 오른쪽 절반이 16행 내내 빈다. 두 칸으로 가르면
   16행의 상태가 같은 x 에 정렬돼 세로로 훑어지고, 행 높이가 110~112px 에서
   84~85px 로 줄어 기준선 요건(최대-최소 24px 이하)도 1px 로 지켜진다.
   176px 은 실측값 — 16행 전부가 「등급 —」 / 「무엇이 남았나」 두 줄로 같은 자리에서
   끊긴다(268px 은 둘째 줄에 한 어절만 남는 행이 섞였고 200px 은 낱말 가운데가 잘렸다).
   ★ :has 로 「__hd 를 가진 행」에만 건다. /fund/ 도 .hub-item 을 쓰지만 그 창은
     __hd 없이 __nm · __tx (· __meta) 를 직접 두고, ③ 은 460px 짜리 2열 판(.hub-cols)
     안에 있어 176px 상태 칸을 떼면 설명 칸이 눌린다. 실측으로 확인했다 —
     __hd 는 /tools/ 마크업에만 있다. 한 창을 위해 다른 창을 깨지 않기 위한 한정이다.
   ※ /tools/ 인라인 <style> (5) 에 같은 값이 남아 있다. 이 규칙이 들어왔으므로 그 창
     담당은 그 덩이를 지워야 한 규칙이 두 곳으로 갈리지 않는다.
   되돌리려면 이 블록을 통째로 지운다(1024 이하와 같은 3단 세로 쌓기로 돌아간다). */
.hub-item:has(> .hub-item__hd){
  display:grid;
  /* [WIN0827D-R2 공유시트] 176px 은 상태가 한 문장이던 때의 실측값이라 배지+사유 두 조각으로
     바뀐 지금은 몇 행만 2줄로 접혔다. 216px 에서 16행이 전부 두 줄로 같아진다.
     되돌리려면 176px 로. */
  grid-template-columns:minmax(0,1fr) 216px;
  column-gap:24px;
  align-items:start;
}
.hub-item:has(> .hub-item__hd) > .hub-item__hd{grid-column:1;grid-row:1;}
.hub-item:has(> .hub-item__hd) > .hub-item__tx{grid-column:1;grid-row:2;}
/* stretch — 왼쪽 칸이 두 줄이고 상태가 한 줄일 때 세로 구분선이 행보다 짧게 끝나
   16행의 선 길이가 제각각이었다. 칸을 행 높이에 맞춰 늘려 선 길이를 고른다. */
/* [WIN0827D-R2 공유시트] 행마다 그은 세로선이 행 사이 구분선에서 끊겨 x=963 에 점선 같은
   레일이 생겼다. 행의 border-left 를 걷고 카드 본문에 끊김 없는 한 줄을 그린다.
   되돌리려면 border-left 를 이 규칙에 되살리고 아래 ::after 두 규칙을 지운다. */
.hub-item:has(> .hub-item__hd) > .hub-item__meta{
  grid-column:2;grid-row:1 / span 2;
  align-self:stretch;
  margin-top:0;padding-top:2px;padding-left:24px;
}
/* ★ __hd 를 가진 행을 담은 카드에만 건다 — /fund/ 도 .hub-list 를 쓰지만 그 창은
   __hd 가 없고 상태 칸도 없어, 범위를 좀히지 않으면 /fund/ 카드 한가운데에 뜻 없는
   세로선이 그어진다. 232 = 상태 칸 216 + column-gap 24 의 가운데. */
.hub-box__bd:has(> .hub-list > .hub-item > .hub-item__hd){position:relative;}
.hub-box__bd:has(> .hub-list > .hub-item > .hub-item__hd)::after{
  content:"";
  position:absolute;
  top:0;bottom:0;right:232px;
  width:1px;
  background:var(--cm-edge);
  pointer-events:none;
}
/* /tools/ 의 id="t-*" 로 들어왔을 때 어느 행인지 표시한다 */
.hub-item:target{
  margin-left:-14px;
  padding-left:12px;
  border-left:2px solid var(--cm-accent);
}

/* 꼬리 고지문 · 비활성 버튼 · 본문 링크 */
.hub-note{margin:0;font-size:var(--cm-fs-body);line-height:var(--cm-lh-body);color:var(--cm-mut);}   /* [SPEC0828-R3] 1.7(27.2px)이었다 */
/* [WIN0827D 공유시트] /fund/ 담당 요청. margin:0 이라 16px 고지와 13px 고지가 0px 로
   붙어 한 덩어리로 읽혔다(그 창 ④ 꼬리 · ⑤ 본문 2곳). 되돌리려면 이 한 줄을 지운다. */
.hub-note + .hub-note{margin-top:8px;}
.hub-note--sm{font-size:var(--cm-fs-tail);}
.hub-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:36px;
  padding:0 14px;
  border:1px solid var(--cm-dim);
  border-radius:6px;
  background:transparent;
  color:var(--cm-txt-2);
  font-size:16px;
  transition:background-color var(--cm-t);
}
/* [WIN0827 공유시트] color 가 --cm-dim 이었다. 이 파일이 1절에서 스스로
   「글자색으로 쓰지 않는다」고 선언한 값이다(#16171B 위 2.71:1). --cm-mut 는 4.98:1 다.
   테두리는 경계선이므로 --cm-edge 그대로 둔다. 되돌리려면 color 를 --cm-dim 으로 되돌린다.
   ※ 현재 9개 창 마크업에 .hub-btn 이 0건이다 — 다시 쓰일 때를 위한 값 교정이다. */
.hub-btn[disabled]{color:var(--cm-mut);border-color:var(--cm-edge);cursor:default;}
/* [SPEC0828-R2] padding:1px 3px · border-radius:4px 였다. 테두리도 바탕도 없는
   텍스트 링크가 4px 모서리의 작은 상자를 만들어, 사이트의 모서리 값에 다섯째(4px)를
   더하고 있었다. 링크의 높이 · 모양은 글자 사다리가 정한다.
   되돌리려면 위 두 줄을 되살린다. */
.hub-a{
  color:var(--cm-accent-soft);
  text-decoration:underline;
  text-underline-offset:3px;
  transition:background-color var(--cm-t);
}
/* [WIN0827 공유시트] /guide/ 담당 요청. 창모를 떠나는 링크와 창모 안에 머무는 링크를
   옷으로 가른다 — 안은 실선 밑줄 + 옅은 파랑(.hub-a), 바깥은 점선 밑줄 + 본문 2색.
   색을 새로 만들지 않았다 : --cm-txt-2(#D1D3D8)는 #16171B 위 10.4:1 · #1A1C20 위 9.9:1 다.
   마크업이 class="hub-a hub-a--ext" 로 두 벌을 함께 쓰므로 .hub-a 뒤에 선언해
   색과 밑줄 모양만 덮는다(패딩 · 라운드 · 호버 바닥은 .hub-a 것을 그대로 물려받는다).
   되돌리려면 이 규칙을 지운다. */
.hub-a--ext{
  color:var(--cm-link);   /* [SPEC0828-R3] --cm-txt-2 였다 — 링크는 한 색이다 */
  text-decoration:underline;
  text-decoration-style:dotted;
}


/* ── 14. 푸터 (전 페이지 동일 내용) ────────────────────────────────────────
   서비스 / 회원 / 준비 중 / 문의 4열 + 사업자 정보 dl 6줄 + 법정 링크 2종
   + 고지 4줄 + 저작권 1줄.                                                  */
.hub-ft{
  /* [WIN0827D-R2 공유시트] 64px 이었다. 바로 위 .hub-main 주석과 한 짝이다 — 본문 끝 40 + 여기 32 = 72px.
     되돌리려면 64px 로. */
  margin-top:32px;
  padding:32px 0 40px;
  background:var(--cm-surf);
  border-top:1px solid var(--cm-edge);
  font-size:var(--cm-fs-tail);
  color:var(--cm-mut);
}
.hub-ft__in{max-width:var(--cm-top-w);margin:0 auto;padding:0 var(--cm-pad);}
.hub-ft__cols{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
  padding-bottom:24px;
  border-bottom:1px solid var(--cm-edge);
}
.hub-ft__h{margin:0 0 10px;font-size:16px;font-weight:700;color:var(--cm-txt);}
.hub-ft__ls{display:flex;flex-direction:column;gap:8px;}
.hub-ft__ls a{color:var(--cm-txt-2);}
.hub-ft__ls span{color:var(--cm-mut);}   /* 링크 없는 「준비 중」 항목 */
.hub-ft__co{margin:20px 0 0;font-size:16px;font-weight:700;color:var(--cm-txt);}
.hub-ft__biz{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--cm-gap-xs) var(--cm-gap-l);   /* [SPEC0828-R3] 6px 24px 였다 */
  margin:10px 0 0;
  line-height:var(--cm-lh-tail);   /* [SPEC0828-R3] 1.7(13×1.7=22.1px)이었다 */
}
.hub-ft__biz > div{display:flex;gap:8px;min-width:0;}
/* [WIN0827D 공유시트] /my/ · /mileage/ · /privacy/ 세 창 담당이 같은 것을 올렸다.
   flex:0 0 76px 였다. 1400px 실측 : 여섯 dt 의 필요 폭이 23/45/78/78/34/45 인데
   76px 만 받아 「사업자등록번호」가 「사업자등록번 / 호」로, 「통신판매업신고」가
   「통신판매업신 / 고」로 두 줄에 잘렸다 — 아홉 창 푸터 전부에서 같이 보였다.
   전자상거래법 제10조 표시사항 라벨이 낱글자로 쪼개져 보이는 자리다.
   값(dd)은 한 글자도 건드리지 않는다 — 라벨 칸 폭만 넓힌다.
   세 창이 각각 92 · 92 · 84px 를 올렸다. 가장 긴 라벨의 실측 필요 폭이 78px 이라
   84 로도 들어가지만, 여섯 라벨의 왼쪽 끝뿐 아니라 여섯 값(dd)의 왼쪽 끝도 한 줄로
   서게 하려면 여유가 있는 92 쪽이 낫다 — 셋 중 큰 값으로 맞춘다.
   nowrap 은 이 폭이 어떤 이유로 눌려도 라벨이 다시 쪼개지지 않게 하는 못이다.
   되돌리려면 flex:0 0 76px 한 줄로 되돌린다. */
.hub-ft__biz dt{
  flex:0 0 auto;
  min-width:92px;
  white-space:nowrap;
  color:var(--cm-mut);font-weight:500;
}
.hub-ft__biz dd{margin:0;min-width:0;color:var(--cm-mut);}
/* [SPEC0828-R3] gap 10px · 줄 높이 상속 1.5(19.5px)였다 — 둘 다 사다리 밖이다. */
.hub-ft__legal{display:flex;align-items:center;gap:var(--cm-gap-s);margin:14px 0 0;line-height:var(--cm-lh-tail);}
.hub-ft__legal a{
  padding-bottom:1px;
  color:var(--cm-txt-2);
  border-bottom:1px solid var(--cm-dim);
}
.hub-ft__bar{width:1px;height:10px;background:var(--cm-dim);}
.hub-ft__strong{font-weight:700;color:var(--cm-txt);}   /* 개인정보처리방침 법정 강조 */
.hub-ft__note{margin:14px 0 0;line-height:1.8;color:var(--cm-mut);}
/* [2026-09-02 GEN1] 페이지마다 다른 고지(※)는 푸터가 아니라 <main> 끝의 이 상자에 둔다. 푸터는 전 페이지 공통 셸이다. */
.hub-pgnote{margin-top:var(--cm-block-gap);}
.hub-pgnote > .hub-note + .hub-note{margin-top:var(--cm-gap-s);}
/* [2026-09-02 GEN1] 생성 페이지(/notice/ · /fit/ · /region/ · /check/) 부품. 색은 전부 토큰이다. */
.hub-badge--flag{background:var(--cm-accent-bg);color:var(--cm-accent-txt);}          /* 대상 플래그 — 제조 · 수출 · 기술 · AI · 소상공인 · 청년 */
.hub-badge--closed{background:var(--cm-txt-2);color:var(--cm-bg);}                     /* 마감 지난 공고 */
.hub-kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--cm-gap-s) var(--cm-gap-l);margin:0 0 var(--cm-gap-m);}
.hub-kv > div{display:grid;grid-template-columns:4em minmax(0,1fr);gap:var(--cm-gap-s);font-size:16px;line-height:var(--cm-lh-body);}
.hub-kv dt{color:var(--cm-mut);}
.hub-kv dd{margin:0;color:var(--cm-txt);word-break:keep-all;overflow-wrap:break-word;}
.hub-cta-row{margin:var(--cm-gap-m) 0 0;}
.hub-btn--primary{background:var(--cm-accent);border-color:var(--cm-accent);color:var(--cm-on-accent);min-height:44px;padding:0 20px;font-weight:700;}
@media (hover:hover){ .hub-btn--primary:hover{background:var(--cm-accent-dk);} }
@media (max-width:600px){ .hub-kv{grid-template-columns:minmax(0,1fr);} }
/* [2026-09-03 GEN3] content/ 원고 페이지(/cert/ · /compare/ · /forms/) · 검수(/check/) 부품. 색은 전부 토큰이다. */
.hub-badge--check{background:var(--cm-surf-3);color:var(--cm-mid);}                 /* 「확인 필요」 — 숨기지 않고 회색으로 */
.hub-md p{margin:0 0 var(--cm-gap-s);font-size:16px;line-height:var(--cm-lh-body);color:var(--cm-txt-2);word-break:keep-all;overflow-wrap:anywhere;}
.hub-md p:last-child{margin-bottom:0;}
.hub-md .hub-scroll{margin:0 0 var(--cm-gap-m);}
.hub-md h3{margin:var(--cm-gap-m) 0 var(--cm-gap-xs);font-size:16px;font-weight:700;color:var(--cm-txt);}
.hub-tb--md{min-width:0;font-size:var(--cm-fs-tail);line-height:var(--cm-lh-tail);}
.hub-tb--md th,.hub-tb--md td{padding:8px 8px;vertical-align:top;word-break:keep-all;overflow-wrap:anywhere;}
.hub-tb--md th{color:var(--cm-mid);font-weight:700;}
.hub-a--src{word-break:break-all;}
.hub-quote{margin:var(--cm-gap-s) 0;padding:var(--cm-gap-s) var(--cm-gap-m);border-left:3px solid var(--cm-edge-2);background:var(--cm-surf-2);border-radius:0 var(--cm-card-r) var(--cm-card-r) 0;}
.hub-quote p{margin:0;color:var(--cm-mid);}
.hub-md-list{margin:0 0 var(--cm-gap-s);padding-left:1.4em;font-size:16px;line-height:var(--cm-lh-body);color:var(--cm-txt-2);}
.hub-md-list li + li{margin-top:var(--cm-gap-xs);}
.hub-alert{margin:var(--cm-gap-m) 0 0;padding:var(--cm-gap-m);border-left:4px solid var(--cm-accent);background:var(--cm-accent-bg);border-radius:0 var(--cm-card-r) var(--cm-card-r) 0;font-size:16px;line-height:var(--cm-lh-body);color:var(--cm-txt-2);}
.hub-alert p{margin:0;}
.hub-alert p + p{margin-top:var(--cm-gap-xs);}
.hub-alert__lb{display:block;margin:0 0 var(--cm-gap-xs);font-weight:700;color:var(--cm-accent-txt);}
.hub-grid--cert{grid-template-columns:repeat(3,minmax(0,1fr));}
.hub-card__meta{margin:0;}
/* 폼 */
.hub-form__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--cm-gap-m) var(--cm-gap-l);}
.hub-field{display:flex;flex-direction:column;gap:var(--cm-gap-xs);min-width:0;}
.hub-field__lb{font-size:var(--cm-fs-tail);line-height:var(--cm-lh-tail);color:var(--cm-mid);}
.hub-field__in{min-height:44px;padding:0 12px;border:1px solid var(--cm-edge-2);border-radius:6px;background:var(--cm-bg);color:var(--cm-txt);font:inherit;font-size:16px;font-variant-numeric:tabular-nums;}
.hub-field__in:focus-visible{outline:2px solid var(--cm-focus);outline-offset:1px;}
.hub-field__in:disabled{background:var(--cm-surf-3);color:var(--cm-mut);}
.hub-field__unk{display:inline-flex;align-items:center;gap:6px;font-size:var(--cm-fs-tail);color:var(--cm-mut);}
/* 판정 4종 */
.hub-st--pass{background:var(--cm-accent-bg);color:var(--cm-accent-txt);}
.hub-st--fail{background:var(--cm-err-bg);color:var(--cm-err);}
.hub-st--borderline{background:var(--cm-warn-bg);color:var(--cm-warn);}
.hub-st--unknown{background:var(--cm-surf-3);color:var(--cm-mid);}
.hub-sum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--cm-gap-s);margin:0 0 var(--cm-gap-m);}
.hub-sum__t{display:flex;flex-direction:column;align-items:center;gap:2px;padding:var(--cm-gap-m) var(--cm-gap-s);border-radius:var(--cm-card-r);font-size:var(--cm-fs-tail);line-height:var(--cm-lh-tail);}
.hub-sum__n{font-size:28px;line-height:36px;font-weight:700;}
.hub-rs{display:flex;flex-direction:column;gap:var(--cm-gap-s);}
.hub-rs__c{padding:var(--cm-gap-m);border:1px solid var(--cm-edge);border-left-width:4px;border-radius:var(--cm-card-r);}
.hub-rs__c--pass{border-left-color:var(--cm-accent);}
.hub-rs__c--fail{border-left-color:var(--cm-err);}
.hub-rs__c--borderline{border-left-color:var(--cm-warn);}
.hub-rs__c--unknown{border-left-color:var(--cm-dim);}
.hub-rs__hd{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cm-gap-xs);margin:0 0 var(--cm-gap-xs);font-size:16px;color:var(--cm-txt);}
.hub-rs__m{margin:0;font-size:16px;line-height:var(--cm-lh-body);color:var(--cm-txt-2);}
.hub-rs__v{margin:var(--cm-gap-xs) 0 0;}
.hub-rs__3{margin:var(--cm-gap-s) 0 0;padding-left:1.4em;font-size:16px;line-height:var(--cm-lh-body);color:var(--cm-txt-2);}
.hub-rs__3 li + li{margin-top:var(--cm-gap-xs);}
.hub-kv--derived{margin-bottom:var(--cm-gap-l);}
.hub-pay{margin-top:var(--cm-gap-m);padding:var(--cm-gap-m);border:1px solid var(--cm-edge);border-radius:var(--cm-card-r);}   /* 토스 결제위젯 컨테이너 — 안은 위젯 기본 스타일 그대로 */
@media (max-width:1024px){ .hub-grid--cert{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:600px){
  .hub-form__grid{grid-template-columns:minmax(0,1fr);}
  .hub-sum{grid-template-columns:repeat(2,minmax(0,1fr));}
  .hub-grid--cert{grid-template-columns:minmax(0,1fr);}
}
.hub-ft__note p{margin:0;}
.hub-ft__cp{margin:14px 0 0;color:var(--cm-mut);}


/* ── 15. 호버 — hover 가능한 기기에만 ──────────────────────────────────────
   터치에서 탭하면 :hover 가 고착된다. 반드시 이 안에 둔다.
   바꾸는 속성은 background-color(와 color) 뿐이다. 확대 · 그림자 없음.     */
@media (hover:hover){
  .hub-search:hover{background:var(--cm-surf-3);}
  .hub-search__go:hover{background:var(--cm-accent-dk);}
  .hub-chip:hover{background:var(--cm-surf-2);}
  .hub-seekq:hover{color:var(--cm-txt);border-bottom-color:var(--cm-txt);}
  .hub-ic:hover .hub-ic__d{background:var(--cm-surf-4);}   /* [LIGHT0829-R2] 타일 기본이 surf-3 이라 호버는 surf-4 */
  .hub-ad__a:hover,
  .hub-mile__a:hover,
  .hub-a:hover,
  .hub-card__lk a:hover{background:var(--cm-surf-3);}
  .hub-tr__more:hover{background:var(--cm-surf-2);}
  .hub-nav__a:hover{color:var(--cm-txt);}
  .hub-tabs__b:hover{color:var(--cm-txt);}
  .hub-btn:not([disabled]):hover{background:var(--cm-surf-2);}
}

/* 실제 누름 — pointerdown 에서 붙이고 up/cancel/leave 에서 뗀다 */
.hub-chip.is-pressed{background:var(--cm-surf-2);}
.hub-seekq.is-pressed{color:var(--cm-txt);border-bottom-color:var(--cm-txt);}
.hub-search__go.is-pressed{background:var(--cm-accent-dk);}
.hub-ic.is-pressed .hub-ic__d{background:var(--cm-surf-4);}   /* [LIGHT0829-R2] */
.hub-ad__a.is-pressed,
.hub-mile__a.is-pressed,
.hub-a.is-pressed,
.hub-tr__more.is-pressed,
.hub-btn.is-pressed{background:var(--cm-surf-3);}
.hub-nav__a.is-pressed{color:var(--cm-txt);}   /* 호버와 같은 값 */


/* ── 16. 반응형 1024 / 600 ─────────────────────────────────────────────────
   섹션 높이를 px 로 고정하지 않는다. 어느 폭에서도 body 에 가로 스크롤을
   만들지 않는다(표만 .hub-scroll 안에서 가로로 움직인다).                  */
@media (max-width:1024px){
  /* 아이콘 4 × 2 — 열 폭 64px 은 그대로 유지한다 */
  /* [WIN0827D-R3 공유시트] repeat(4,64px);gap:20px 30px 였다. 9절과 같은 이유로
     네 칸도 카드 폭을 고르게 나눠 갖게 한다(전에는 4x64 + 3x30 = 346px 가 카드
     한가운데 뭉쳐 좌우가 크게 비었다). 되돌리려면 repeat(4,64px);gap:20px 30px 로. */
  .hub-ics{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 12px;}
  /* /guide/ 4칸 → 2열 */
  .hub-cards{grid-template-columns:repeat(2,minmax(0,1fr));}
  /* /tools/ 두 열 → 세로로 쌓는다 */
  .hub-cols{grid-template-columns:minmax(0,1fr);}
  /* [WIN0827D 공유시트] 13절 .hub-item 2칸 격자를 여기서 되돌린다 —
     이 폭 아래는 지금까지의 3단 세로 쌓기 그대로다. 새 분기점을 만들지 않았다. */
  .hub-item:has(> .hub-item__hd){display:block;}
  .hub-item:has(> .hub-item__hd) > .hub-item__meta{
    margin-top:6px;padding-top:0;padding-left:0;border-left:0;
  }
  /* [WIN0827D-R3 공유시트] /tools/ 담당 요청. 위 한 줄이 2칸 격자를 block 으로 되돌리는데
     13절의 세로 레일(.hub-box__bd …::after)은 그대로 남아, 격자가 풀린 뒤에도 카드 오른쪽
     232px 자리에 뜻 없는 세로선이 그어졌다. 격자와 레일은 한 짝이므로 함께 푼다.
     지금은 /tools/ 인라인 한 줄이 이것을 막고 있다 — 그 창 담당은 그 줄을 지워도 된다.
     되돌리려면 이 한 줄을 지운다. */
  .hub-box__bd:has(> .hub-list > .hub-item > .hub-item__hd)::after{display:none;}
  .hub-ft__cols{grid-template-columns:repeat(2,minmax(0,1fr));}
  .hub-ft__biz{grid-template-columns:repeat(2,minmax(0,1fr));}

  /* [WIN0827D-R3 공유시트] 여기 있던 4겹 background-image 그늘을 걷고 글자 페이드로 바꿨다.
     왜 : 그늘이 rgba(0,0,0,.7) 이라 바닥 #1A1C20 위에서 「검정 위의 검정」이었다 —
     이번 회차에도 8개 창 담당 다섯 명이 같은 건을 「표시가 전혀 없다」로 다시 올렸고,
     before_*_375.png 아홉 장 어디에서도 눈으로 보이지 않았다. 어두운 바닥에서 「옆에 더 있다」를
     말하는 것은 그늘이 아니라 **글자가 흐려지며 끝나는 것**이다.
     375px 실측 : .hub-nav__in scrollWidth 838 / clientWidth 375 — 8칸 중 4칸이 화면 밖이다.
     넘침이 없는 폭(약 886px 위)에서는 오른쪽 28px 이 빈자리라 마스크가 눈에 보이지 않는다.
     :focus-within 에서 마스크를 끄는 이유 : 탭으로 마지막 항목까지 가면 브라우저가 그 항목을
     오른쪽 끝으로 스크롤하는데, 마스크가 켜져 있으면 포커스 링이 페이드에 먹힌다
     (「포커스 가시화」는 잃으면 0점인 요건이다). 새 색을 한 개도 만들지 않았다.
     ※ /feed/ · /my/ 가 같은 일을 인라인으로 임시로 넣어 두었다 — 두 창 담당은 그 덩이를
       지워야 한 자리에 페이드가 두 겹으로 서지 않는다.
     되돌리려면 이 블록을 지우고 위 4겹 background-image 판을 되살린다. */
  .hub-nav__in,
  .hub-sticky__in{
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
  }
  .hub-nav__in:focus-within,
  .hub-sticky__in:focus-within{
    -webkit-mask-image:none;
    mask-image:none;
  }
}

@media (max-width:600px){
  /* [SPEC0828-R3] --cm-main-pt · --cm-main-pb 두 줄을 여기 더했다. 좀은 폭 실측이
     home·fund·guide·tools 24/16/32 와 feed·my·mileage 32/16/64 두 벌이었다.
     main 안여백은 이 세 토큰이 전부다 — 규칙마다 px 를 적지 마라.
     되돌리려면 두 줄을 지우고 .hub-main{padding:24px var(--cm-pad) 32px} 을 되살린다. */
  :root{--cm-pad:16px;--cm-main-pt:24px;--cm-main-pb:40px;}
  /* [SPEC0828-R3] 머리띄의 세로 안여백 8px 은 이 폭에서만 살린다 — 제목이 두 줄로
     접히면 띄 높이가 min-height(44)를 넘어 글자가 모서리에 닿는다. */
  .hub-box__hd{padding:var(--cm-gap-xs) var(--cm-card-px);}

  /* [WIN0827 공유시트] 375 · 360 · 320 세 폭에서 헤더를 한 줄로 잠근다.
     /mileage/ 담당 실측(320px) : docScrollWidth 323 > clientWidth 320 —
     넘치는 3px 이 본문이 아니라 이 헤더의 gap 에서 났다. 그 창은 페이지 안에서
     gap 만 좁혀 두었고(.pg .hub-hd__in), 이 블록이 들어오면 그 임시 규칙은 지워도 된다.
     약칭 「창모」를 감추고 서비스명에 말줄임을 주면 어느 폭에서도 두 줄이 되지 않는다.
     「마일리지」 단위어(.hub-hd__mile-u)는 표기 규칙의 일부라 감추지 않는다.
     목표 : .hub-hd__in 높이 ≤ 60px · .hub-hd__act 한 줄.
     되돌리려면 이 블록만 지운다. */
  .hub-hd__in{gap:10px;}
  /* [LAYOUT0828-R3] font-size:14px 였다 — 사다리에 14px 칸이 없다. 꼬리 칸(13px)으로 내린다. 되돌리려면 14px 로. */
  .hub-hd__act{gap:10px;font-size:var(--cm-fs-tail);}
  .hub-hd__brand{flex:1 1 auto;min-width:0;}
  .hub-hd__nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .hub-hd__ab{display:none;}

  /* 제목 : fit-content 를 풀어 두 줄을 허용하고, 글자를 함께 줄인다.
     폭 애니메이션이 매 프레임 줄바꿈 지점을 바꾸면 화면이 크게 튀므로,
     이 폭에서는 JS 가 폭 애니메이션을 끄고 고정폭으로 전환한다.
     제목 축소값(font-size 와 --cm-lh)을 바꾸려면 두 값을 **함께** 바꿔라 —
     한쪽만 바꾸면 롤링 이동거리(H = line-height)와 슬롯 높이가 어긋나
     나간 단어가 슬롯 밖에 남는다.
     38px 그대로 두면 「창업, 사업자등록」 한 덩어리가 320px 화면을 넘겨
     body 에 가로 스크롤이 생긴다(금지 항목).
     ※ 아래 세 줄은 index.html 인라인 <style> 에 있던 것을 옮겨 온 것이다.
        인라인에 다시 쓰지 마라 — 두 벌이 되면 한쪽만 고쳤을 때 증상이
        절반만 사라진다. */
  /* [WIN0827D-R3 공유시트] --cm-lh 가 28px(= font-size)이라 375px 슬롯 높이 28px 안에서
     한글 받침과 윗선이 잘리고 전환 중 두 단어가 겹쳐 보였다(before_home_375.png).
     36 / 28 = 1.29 로 :root 의 48 / 38 = 1.26 과 같은 비율이다.
     font-size 와 --cm-lh 는 **함께** 바꿔라. 되돌리려면 --cm-lh:28px 로. */
  .hub-ttl{width:auto;font-size:28px;--cm-lh:36px;}
  /* 이 폭에서는 제목을 **항상** 두 줄로 고정한다.
     「창업, + 슬롯」 / 「찾고 계신가요?」.
     흐르는 대로 두면 짧은 단어(세금)에서는 한 줄, 긴 단어(사업자등록)에서는
     두 줄이 되어 전환마다 제목 높이가 28 ↔ 56px 로 튄다(실측으로 잡았다).
     width:100% 는 뒷말의 flex-basis:100% 가 기댈 확정 폭을 만들기 위한 것이다. */
  .hub-ttl__vis{width:100%;flex-wrap:wrap;justify-content:center;}
  .hub-ttl__vis > .hub-ttl__fix:last-child{flex:0 0 100%;}

  /* 하위 페이지 제목도 같은 값으로 줄인다. 38px 을 그대로 두면 제목이
     한두 글자만 길어져도 320px 에서 바로 가로 넘침이 난다. */
  /* [WIN0827D-R3 공유시트] line-height 28px 였다(= font-size). 위 .hub-ttl 과 같은 값이다. */
  .hub-h1{font-size:26px;line-height:34px;}   /* [DAANGN0829] 28/36 이었다. 당근 모바일 하위 h1 실측 26 */

  .hub-search{min-height:46px;border-radius:8px;}
  .hub-search__cat{min-height:44px;padding:0 26px 0 10px;}
  .hub-search__q{min-height:44px;padding:0 10px;}
  .hub-search__go{width:34px;height:34px;}

  /* 칩 : 최소폭을 풀어 두 줄 이상으로 흐르게 한다 */
  .hub-chip{min-width:0;}

  /* 배너 : 세로로 쌓는다. 높이는 min-height 만 둔다. */
  .hub-ad{flex-direction:column;align-items:flex-start;gap:10px;min-height:0;padding:16px;}

  /* 아이콘 4 × 2 유지. 열 폭 64px 은 **상한**으로만 둔다.
     [WIN0827D 공유시트] 전에는 repeat(4,64px) 고정이었고 「4 × 64 + 3 × 14 = 298px 이라
     320px 화면에도 든다」가 근거였다. 그 계산은 뷰포트 320 을 기준으로 한 것인데, 9절에서
     이 격자에 면 · 테두리를 입히면서 기준이 「패널 안쪽 폭」으로 바뀌었다 —
     320px 에서 320 − 본문 좌우 16×2 − 테두리 2 = 286px 이라 298 이 패널 밖으로 5px 씩
     삐져나왔다(실측 : 패널 16~304 · 아이콘 11~309). 페이지 가로 넘침은 없지만 화면에서
     아이콘이 상자를 뚫고 나온 것으로 보인다.
     minmax(0,64px) 은 늘지 않고 모자랄 때만 네 칸이 **똑같이** 줄어든다 —
     9절이 금지한 minmax(64px,1fr)(긴 라벨 칸만 넓어져 격자가 어긋나는 것)과 반대다.
     실측 : 375px 에서는 그대로 64px, 320px 에서 61px 로 줄어 286px 안에 든다.
     되돌리려면 repeat(4,64px) 로 되돌린다(단, 9절의 면 · 테두리를 함께 걷어야 한다). */
  /* [WIN0827D-R3 공유시트] repeat(4,minmax(0,64px));gap:18px 14px 였다. 9절과 같은 이유로
     네 칸이 패널 안쪽 폭을 고르게 나눠 갖게 한다. 패널에 좌우 12px 을 주고 열 간격을 10px 로
     둔다 — 320px 에서 패널 안 262px / 열 58px, 열 폭 + 간격 68px 이라 라벨 5자(14px 에서 60px)가
     이웃에 닿지 않는다(9절 머리의 실측표 기준). 375px 에서는 열 71.75px 로 넉넉하다.
     되돌리려면 repeat(4,minmax(0,64px));gap:18px 14px 로 되돌리고 padding 줄을 지운다. */
  .hub-ics{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 10px;padding:18px 12px;}
  /* [LAYOUT0828-R3] font-size:14px 였다 — 8칸 라벨은 넓은 폭에서 이미 13px 이다. 분기에서만 커지던 것을 맞춘다. 되돌리려면 14px 로. */
  .hub-ic__lb{font-size:var(--cm-fs-tail);}

  /* [WIN0827 공유시트] 좁은 화면이 넓은 화면보다 좁게 벌어져야 한다(24/40 < 32/56).
     전에는 본문 리듬이 두 폭 모두 32px 이라 모바일이 더 넓게 보이는 역전이었다.
     되돌리려면 아래 두 줄을 지운다. */
  .hub-main > * + *{margin-top:24px;}
  .hub-main > .hub-tr{margin-top:40px;}
  /* [WIN0827D 공유시트] 13절 사다리의 좁은 화면 몫. 넓은 화면(20/40/48/56)보다
     한 칸씩 좁게 둔다 — 좁은 화면이 더 넓게 벌어지는 역전을 만들지 않는다.
     되돌리려면 아래 다섯 줄을 지운다. */
  /* [WIN0827D-R3 공유시트] 13절에서 새로 준 두 규격의 좁은 화면 몫이다.
     머리-본문 경계 64 → 40 (전 구간이 32→24 로 줄어드는 비율을 그대로 따랐다) ·
     빵부스러기 아래 12 → 10. /guide/ 의 링크 두 열은 이 폭에서 한 열로 접어 설명을 다음 줄로 내린다
     (160px 라벨 열을 두면 설명 칸이 200px 도 남지 않는다).
     되돌리려면 이 세 줄을 지운다. */
  .hub-main > .hub-head + *,
  .pt-main > .hub-head + *,
  .hub-main > :has(.hub-h1) + *{margin-top:40px;}   /* [SPEC0828-R2] `+ .hub-box` 였다 */
  .hub-crumb,
  .hub-bc{margin-bottom:10px;}
  .hub-step__sites li{grid-template-columns:1fr;row-gap:2px;}

  .hub-main > .hub-chips{margin-top:16px;}
  .hub-main > .hub-ad{margin-top:32px;}
  .hub-main > .hub-ics{margin-top:28px;}
  .hub-main > section.hub-box + section.hub-box,
  .hub-main > details.hub-box + section.hub-box{margin-top:16px;}
  .hub-main > .hub-cols,
  .hub-main > .hub-cols + .hub-box{margin-top:36px;}

  /* [WIN0827D 공유시트] /fund/ 담당 요청. 그 창의 두 출구(기업마당 · 소상공인24)를
     .hub-btn 으로 올렸는데 min-height 가 36px 라 터치 기준 44px 에 못 미쳤다.
     되돌리려면 이 한 줄을 지운다. */
  .hub-btn{min-height:44px;}

  /* 지금 뜨는 이야기 1열 */
  .hub-tr{margin-top:40px;}   /* .hub-main 안에서는 바로 위 직계 규칙이 이긴다(같은 값) */
  .hub-tr__ls{grid-template-columns:minmax(0,1fr);}

  .hub-mile{flex-direction:column;align-items:flex-start;gap:10px;}

  /* [WIN0827D 공유시트] /guide/ 담당 요청. 375px 에서 마디 32 + gap 16 = 48px 이
     왼쪽에서 먹혀 본문에 280px 만 남았고, 그 탓에 질문 세 줄이 「… 쓰실 / 수 있습니까?」
     처럼 두 글자만 다음 줄로 넘어가는 자투리 줄을 계속 만들었다. 24 + 12 = 36px 로
     줄여 12px 를 본문에 돌려준다. 축선은 마디 중심(24 ÷ 2 = 12 · 선 1px)에 맞춘다.
     열 수는 어느 폭에서도 바꾸지 않는다 — 이 목록에 다른 분기를 만들지 마라.
     되돌리려면 이 네 줄을 지운다. */
  /* [WIN0827D-R2 공유시트] 마디가 이제 어느 폭에서나 22px 이라 600px 에서만 마디를 24px 로
     줄이던 두 줄은 존재 이유를 잃었다(.hub-steps::before{left:11px} 도 13절 기본값과 같다).
     되돌리려면 그 두 줄을 되살린다. */
  .hub-step{gap:12px;}

  /* 하위 페이지 전부 1열 */
  .hub-cards{grid-template-columns:minmax(0,1fr);}
  /* [WIN0827D-R2 공유시트] 아래 48px 이었다(푸터 64 와 더해 112px). 넓은 화면의 40+32=72 보다
     한 칸 좀게 32+24=56px 로 둔다. 되돌리려면 48px 로 되돌리고 아래 한 줄을 지운다. */
  /* [SPEC0828-R3] .hub-main{padding:24px var(--cm-pad) 32px} 한 줄을 지웠다 —
     같은 역할을 위 :root 의 --cm-main-pt · --cm-main-pb 가 9창 모두에 한 번에 준다.
     둘이 함께 있으면 다음 회차에 또 갈라진다. */
  .hub-ft{margin-top:24px;}

  .hub-ft__cols{grid-template-columns:minmax(0,1fr);}
  .hub-ft__biz{grid-template-columns:minmax(0,1fr);}

}


/* ── 16-b. 「준비 중」 토스트 ───────────────────────────────────
   랜딩과 하위 8페이지가 같은 토스트를 쓴다(랜딩은 인라인 스크립트, 하위 8페이지는
   /assets/hub-shell.js 가 띄운다). 규칙을 index.html 인라인 <style> 로 되돌리지
   마라 — 하위 페이지에서 토스트가 스타일 없이 본문 끝에 평문으로 떨어진다.
   트랜지션 시간은 사이트 유일값 --cm-t(.15s). 확대·그림자를 쓰지 않는다.     */
.hub-toast{
  position:fixed;left:50%;bottom:24px;z-index:950;
  transform:translateX(-50%) translateY(8px);
  max-width:min(92vw,420px);
  padding:10px 16px;
  border:1px solid var(--cm-dim);
  border-radius:8px;
  background:var(--cm-surf-2);
  color:var(--cm-txt);
  font-size:var(--cm-fs-tail);line-height:1.5;text-align:center;
  opacity:0;pointer-events:none;
  transition:opacity var(--cm-t),transform var(--cm-t);
}
.hub-toast.is-on{opacity:1;transform:translateX(-50%) translateY(0);}


/* ── 17. 움직임 최소화 설정 ────────────────────────────────────────────────
   CSS 로 transition 만 끄면 JS 가 계속 노드를 갈아끼워 단어가 깜박이며 바뀐다.
   **JS 쪽에서 타이머 자체를 시작하지 않아야 한다.** 여기서는 CSS 몫만 끈다.

   「첫 단어 하나만 남기기」를 CSS 로 하지 마라 — 형제 셀렉터로 뒤쪽 단어를
   display:none 하면 슬롯 안의 폭 측정 노드까지 숨겨져
   getBoundingClientRect().width 가 0 이 된다. 노드 정리는 JS 의 몫이다.
   슬롯을 width:auto 로 되돌리는 것도 금지다 — 단어가 absolute 라 폭이 0 이 된다.
   첫 단어의 실측 폭으로 고정한다.

   검증 주의 — headless Chrome 의 기본값이 reduce 다.
   no-preference 를 명시 강제해 한 번, reduce 로 한 번 각각 재라.           */
@media (prefers-reduced-motion:reduce){
  .hub-search,
  .hub-search__cat,
  .hub-search__go,
  .hub-chip,
  .hub-ic__d,
  .hub-ad__a,
  .hub-mile__a,
  .hub-tr__more,
  .hub-nav__a,
  .hub-tabs__b,
  .hub-btn,
  .hub-a,
  /* [WIN0827D 공유시트] 13절에서 새로 준 접힘 바의 background-color 전환도 함께 끈다. */
  .hub-fold__sm,
  /* [WIN0827D-R3 공유시트] 5절에서 새로 준 슬롯 폭 전환(.28s)도 함께 끈다.
     reduce 에서는 롤링 자체가 JS 의 mqReduce 분기로 멈추므로 폭도 한 번 정해진 뒤
     움직이지 않아야 한다. 되돌리려면 이 한 줄을 지운다. */
  .hub-roll,
  .hub-toast{transition:none;}

  /* 고정 메뉴는 위에서 내려오는 대신 그 자리에서 나타난다.
     visibility 는 그대로 유지해야 숨은 링크에 탭 포커스가 들어가지 않는다. */
  .hub-sticky{
    transform:none;
    opacity:0;
    transition:opacity var(--cm-t) linear, visibility 0s linear var(--cm-t);
  }
  .hub-sticky.is-on{
    opacity:1;
    transition:opacity var(--cm-t) linear, visibility 0s;
  }
}


/* ═════════════════════════════════════════════════════════════════════════
   [SPEC0828] 17. 규격 확정 — 공용 시트 일괄 반영 (회차 1)

   왜 이 절이 따로 있는가
     회차 1~3 은 창별 담당 9명이 각자 값을 정했다. 그래서 같은 역할에 다른 값이
     쌓였고(창간 어긋남 14 → 10 → 13건), 평균이 7.87 → 7.94 → 8.02 에서 멈췄다.
     이번에는 순서를 뒤집었다 — **규격을 먼저 못 박고, 창은 그 값을 쓰기만 한다.**

   왜 선택자에 body.hub-body 가 붙어 있는가
     9개 창이 전부 <head> 끝에 인라인 <style> 을 달고 있다(fund 1.2KB ~ mileage 22KB).
     그 덩이는 이 파일보다 **뒤에** 실리므로 같은 무게면 인라인이 이긴다.
     규격을 실제로 적용하려면 무게를 한 단 올리는 수밖에 없다.
     ※ 이것은 임시 조치다. 각 창 담당이 아래 「인라인에서 지울 것」 목록을 지우면
       이 절의 body.hub-body 접두사도 함께 걷어야 한다 — 한 규칙이 두 곳에 있으면
       다음 회차에 또 갈라진다.

   인라인에서 지울 것 (창 HTML 담당 몫 · 이 절이 값을 이미 이기고 있다)
     fund     : (없음)
     guide    : (없음)
     tools    : .hub-main > .tl-vow / .tl-rule / .tl-rule + section.hub-box /
                section.hub-box + section.hub-box / .tl-exit / .tl-exit + .tl-tail,
                .tl-tag, .tl-vow__n, <div class="tl-rule"> 마크업
     feed     : body.is-cm .pt-wrap{padding-bottom}, .cm_pghead .bc,
                .cm_feedwrap > .hub-box__ttl::before, .cm_chip:hover
     my       : .pt-wrap--norail{padding}, .pt-wrap--norail .pt-col-l{column-gap}
     mileage  : .pg .pg_top{padding-top}, .pg .pg_top .hub-h1{margin}
     terms    : main{padding}, .bc, .cm_toc 묶음, .cm_jump
     privacy  : main{padding}, main > * + * 네 줄, main > .bc + .hub-h1, .bc,
                .cm_toc 묶음, .cm_jump
   ═════════════════════════════════════════════════════════════════════════ */


/* ── 17-1. 창 머리 세로 규격 — main 상단 → h1 은 62px 한 값이다 ─────────────
   실측(1400px · 반영 전) : h1 상단이 fund 173 · guide 171 · tools 168 · feed 156 ·
   my 195 · mileage 205 · terms 195 · privacy 192 로 49px 흔들렸다. 원인은 세 곳이
   제각각인 것이었다 — main padding-top 20/32/48/54, 빵부스러기 줄 높이 19.5/20.8/26.1,
   그 아래 여백 0/10/12/14. tools 만 32 + 20 + 10 = 62 로 맞아 있어 tools 를 기준값으로 삼는다.
   서브 8창 : main 상단 y=106 → 내용 상단 y=138 → h1 y=168.
   home 은 서브 메뉴가 없어 main 상단이 y=61 이고 빵부스러기가 없다 — 같은 padding-top 32 를
   쓰고 h1 은 y=93 이다. home 에 빵부스러기를 새로 만들지 마라.
   되돌리려면 이 절의 세 규칙을 지운다. */
body.hub-body main.pt-wrap,
body.hub-body main:not([class]){
  padding-top:var(--cm-main-pt);
  padding-bottom:var(--cm-main-pb);
}
/* /mileage/ 만 .pg_top 이 44px 을 더 얹고 있었다(그래서 h1 이 205 로 가장 낮았다).
   머리의 세로 자리는 main 이 정한다 — 그 안의 래퍼가 더 밀지 않는다. */
body.hub-body .pg_top{padding-top:0;}


/* ── 17-2. 빵부스러기 — 이름은 셋이지만 값은 하나다 ─────────────────────────
   마크업이 세 이름을 쓴다 : fund <nav class="hub-crumb"> · guide/tools <p|nav class="hub-bc"> ·
   feed/my/mileage/terms/privacy <p class="bc">. 창 HTML 을 고치지 않고 셋을 한 값으로
   모으려면 세 이름을 한 규칙에 받는 수밖에 없다 — 죽은 선택자가 아니라 셋 다 실재한다.
   ※ 이름 통일(.hub-bc 한 벌)은 마크업 몫이다. 그때 이 선택자 목록을 줄여라.
   13px/20px · 높이 20 · 아래 10 = 62px 규격의 두 번째 마디. 글리프는 › 하나다. */
body.hub-body .hub-bc,
body.hub-body .hub-crumb,
body.hub-body .bc{
  height:var(--cm-bc-h);
  margin:0 0 var(--cm-bc-gap);
  font-size:var(--cm-fs-tail);
  font-weight:400;
  line-height:var(--cm-bc-h);
  color:var(--cm-mut);
}
/* /privacy/ 의 .bc a 는 안여백 2px 6px + 라운드를 갖고 있어 줄 높이를 26.1px 로 밀었다.
   한 줄 높이는 규격이므로 링크가 줄을 밀지 않게 한다. */
body.hub-body .hub-bc a,
body.hub-body .hub-crumb a,
body.hub-body .bc a{
  margin:0;padding:0;
  color:var(--cm-mut);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
@media (hover:hover){
  body.hub-body .hub-bc a:hover,
  body.hub-body .hub-crumb a:hover,
  body.hub-body .bc a:hover{color:var(--cm-accent-soft);border-bottom-color:currentColor;}
}
body.hub-body .hub-bc a:focus-visible,
body.hub-body .hub-crumb a:focus-visible,
body.hub-body .bc a:focus-visible{color:var(--cm-accent-soft);}


/* ── [DAANGN0829] 한글 조판 ─────────────────────────────────────────────────
   한글은 어절 중간에서 줄이 바뀌면 읽기가 무너진다. 브라우저 기본값(break-word 계열)이
   그렇게 자르므로 본문 전체에 keep-all 을 건다. <code>·<pre> 는 예외다(코드는 어절이 없다).
   제목은 balance 를 더해 마지막 줄에 한 단어만 남는 것(고아 어절)을 막는다 —
   지원 안 하는 브라우저는 무시할 뿐 깨지지 않는다.
   되돌리려면 이 두 규칙을 지운다. */
body.hub-body,
body.hub-body p,
body.hub-body li,
body.hub-body td,
body.hub-body th,
body.hub-body dd,
body.hub-body dt,
body.hub-body h1,body.hub-body h2,body.hub-body h3,body.hub-body h4{word-break:keep-all;overflow-wrap:break-word;}
body.hub-body code,body.hub-body pre{word-break:normal;overflow-wrap:normal;}
body.hub-body h1,body.hub-body h2,body.hub-body h3{text-wrap:balance;}

/* ── 17-3. 제목 사다리 ─────────────────────────────────────────────────────
   h1 38/700 · 섹션 제목 20/700 · 카드 소제목 16/700 · 사이드 위젯 제목 13/700 ·
   본문 16/400 · 꼬리 · 배지 13. 색은 전부 #F3F4F5 다(순백은 팔레트에 없다).
   h1 은 창당 1개이고 margin 은 0 이다 — /mileage/ 가 10px, /privacy/ 가 12px 을
   따로 얹고 있어 위 62px 규격이 두 창에서만 깨졌다. */
body.hub-body main .hub-h1,
body.hub-body .pg_top .hub-h1{margin:0;color:var(--cm-txt);}
/* h1 → 바로 다음 형제(리드 · 메타 줄)는 12px 한 값이다(지금 10/12/16 이었다). */
body.hub-body main .hub-h1 + *{margin-top:var(--cm-h1-gap);}
/* 같은 급 제목이 순백과 #F3F4F5 두 색으로 갈려 있었다(/mileage/ 의 .sec_tit 만 #F3F4F5). */
body.hub-body .hub-box__ttl,
body.hub-body .hub-step__ttl,
body.hub-body .hub-colhd,
body.hub-body .cm_title,
body.hub-body .cm_toc__h,
body.hub-body .cm_act__h,
body.hub-body .sec_tit,
body.hub-body .blk_tit,
body.hub-body .pt-w__ttl,
body.hub-body .pt-c__ttl{color:var(--cm-txt);}
/* [SPEC0828] /feed/ 의 h2 「인증글은 이렇게 남깁니다」에만 3×15px 세로 막대 ::before 가
   붙어 있어 나머지 8창의 같은 급 제목과 다르게 보였다. 장식을 걷는다.
   되돌리려면 이 한 줄을 지우고 feed/index.html 366~367행을 되살린다. */
body.hub-body .cm_feedwrap > .hub-box__ttl::before{display:none;}


/* ── 17-4. 세로 리듬 — main 안 형제 블록은 32px 한 값이다 ───────────────────
   실측(반영 전) : 14 / 20 / 24 / 36 / 40 / 48 / 56 / 64 여덟 값이었다.
   간격이 여덟 가지면 어디까지가 한 묶음인지 여백이 말하지 못한다.
     머리 블록 → 첫 카드   40px (--cm-head-gap)
     블록 → 블록          32px (--cm-block-gap)
     한 묶음 안           12px (--cm-tight-gap)
   되돌리려면 이 절을 지운다(창별 사다리로 돌아간다). */
body.hub-body .hub-main > .hub-chips,
body.hub-body .hub-main > .hub-ad,
body.hub-body .hub-main > .hub-ics,
body.hub-body .hub-main > .hub-tr,
body.hub-body .hub-main > .hub-cols,
body.hub-body .hub-main > .hub-cols + .hub-box,
body.hub-body .hub-main > section.hub-box + section.hub-box,
body.hub-body .hub-main > details.hub-box + section.hub-box,
body.hub-body .hub-main > .tl-vow,
body.hub-body .hub-main > .tl-rule + section.hub-box,
body.hub-body .hub-main > .tl-exit{margin-top:var(--cm-block-gap);}
body.hub-body .hub-main > .tl-exit + .tl-tail{margin-top:var(--cm-tight-gap);}
/* [SPEC0828] /tools/ 의 가로 hr 한 줄(.tl-rule)은 이 여백으로 대체한다 — 9개 창에서
   본문 블록을 가르는 선을 쓰는 것은 이 창뿐이라 혼자 다른 부품이었다.
   마크업의 <div class="tl-rule"> 은 창 담당이 지운다. 그때까지 자리만 걷는다.
   되돌리려면 이 한 줄을 지운다. */
body.hub-body .hub-main > .tl-rule{display:none;}
/* 고정 메뉴 관측점(높이 1px)은 자기 몫의 여백을 받지 않는다 — 구조이지 블록이 아니다. */
body.hub-body .hub-main > .hub-sentinel + *{margin-top:0;}
/* /terms/ · /privacy/ 도 같은 사다리를 쓴다. 지금 12 / 28 / 36 / 48 네 값이었다.
   ※ <article> 안 조문 본문의 여백은 건드리지 않는다 — main 의 직계 자식만 잡는다. */
body.hub-body main:not([class]) > * + *{margin-top:var(--cm-block-gap);}
/* [SPEC0828] 바로 위 한 줄이 h1 에게도 32px 을 주어 /terms/ · /privacy/ 의 h1 이 190 으로
   섰다(실측). 빵부스러기 → h1 은 10px 규격이므로 h1 은 이 사다리에서 뺀다. */
body.hub-body main:not([class]) > .bc + .hub-h1{margin-top:0;}
/* [SPEC0828] h1 → 바로 다음 형제(개정일 줄)는 12px 이다. 위 사다리가 여기까지 32px 을
   주면 머리 세 줄(빵부스러기 · h1 · 개정일)이 한 덩이로 읽히지 않는다. */
body.hub-body main:not([class]) > .hub-h1 + *{margin-top:var(--cm-h1-gap);}
/* 바로가기 칩줄 → 목차는 한 묶음(길잡이)이라 좁게 붙인다. */
body.hub-body main:not([class]) > .cm_toc{margin-top:var(--cm-tight-gap);}


/* ── 17-5. 2단 격자 — 두 열이 같은 y 에서 시작한다 ──────────────────────────
   실측(반영 전) : 사이드 첫 카드 상단이 feed 126 · mileage 126 · my 160 으로 my 만
   34px 낮았다. 원인은 사이드가 아니라 main padding-top 이 my 만 54px 인 것이었고,
   17-1 이 그것을 32 로 모았으므로 세 창 모두 138 에서 시작한다.
   좌 592 + 거터 40 + 우 280 = 912. 사이드 열에 padding-top · margin-top 을 주지 마라.
   /feed/ 만 pt-w 묶음과 pt-c 묶음 사이가 29px 로 벌어져 있었다(실측 : 다른 두 칸은 12px) —
   자식의 바깥여백을 걷어 row-gap 12px 하나가 간격을 정하게 한다. */
body.hub-body .pt-col-l{column-gap:var(--pt-gutter);align-items:start;}
body.hub-body .pt-side{row-gap:var(--cm-side-gap);padding-top:0;margin-top:0;}
/* 선택자 무게 주의 : /feed/ 인라인의 body.is-cm .pt-side .pt-w + .pt-c{margin-top:16px}
   (0,3,1)과 body.is-cm .pt-rail__note{margin-top:2px}(0,2,1)이 이 값을 가로챈다.
   그 창 담당이 두 줄을 지우면 아래 선택자를 .pt-side > * 로 줄여라. */
body.hub-body .pt-wrap .pt-col-l .pt-side > *{margin-top:0;margin-bottom:0;}
/* 인라인의 body.is-cm .pt-side .pt-w + .pt-c 는 (0,4,1) 로 위 줄과 무게가 같아
   뒤에 실리는 쪽이 이긴다 — 그 한 자리만 한 단 더 무겁게 눌러 12px 로 되돌린다.
   /feed/ 담당이 그 줄을 지우면 이 줄도 함께 지워라. */
body.hub-body .pt-wrap .pt-col-l .pt-side > .pt-w + .pt-c{margin-top:0;}


/* ── 17-6. 카드 ────────────────────────────────────────────────────────────
   면 #1A1C20 · 테두리 1px #555D6D · 라운드 10 · 머리띠 44 · 본문 14/16 · 꼬리 12/16.
   테두리 색은 :root 의 --cm-edge 한 줄에서 바뀐다(팔레트 밖 #2A2E35 → #555D6D). */
/* [LAYOUT0828-R6] 이 목록에서 `body.hub-body .hub-box` 한 줄을 뺐다.
   왜 : 17-15 의 `.hub-box{border-radius:0}` 이 카드를 이미 해체했는데 이 줄이 (0,2,0) 로
        라운드만 되살려, 배경도 테두리도 없는 블록에 모서리 10px 만 남아 있었다
        (1920 실측 : fund 4개 · feed 3개 · tools 1개). 죽은 라운드는 다음 회차에 배경이
        붙는 순간 카드를 되살린다. 랜딩 배너(.hub-band .hub-box)만 아래에서 10px 를 되받는다.
   되돌리려면 : 이 목록 첫 줄에 `body.hub-body .hub-box,` 를 되살린다. */
body.hub-body .pt-w,
body.hub-body .pt-c,
body.hub-body .cm_card,
body.hub-body .cm_empty,
body.hub-body .cm_toc{border-radius:var(--cm-card-r);}
/* 랜딩 배너 한 곳만 면을 갖는 블록이라 라운드를 되받는다(카드 재고의 두 예외 중 하나) */
body.hub-body .hub-band .hub-box{border-radius:var(--cm-card-r);}
/* [SPEC0828] /terms/ 의 목차 머리는 면 #212429 · 높이 44 · 아래선 1px 인데
   /privacy/ 는 면 없음 · 높이 28 · 선 없음이었고, 부모 안여백도 terms 0 대 privacy 22px 였다.
   행 선도 terms 는 border-bottom, privacy 는 border-top 이라 첫 행 위에 겹선이 생겼다.
   terms 쪽 값이 이미 옳으므로 두 창을 그 값에 맞춘다.
   ※ 두 창의 <article> 안 조문 본문은 한 글자도 건드리지 않는다 — 이 규격은 목차 카드뿐이다.
   되돌리려면 이 묶음을 지운다. */
body.hub-body .cm_toc{padding:0;overflow:hidden;}
body.hub-body .cm_toc__h{
  display:flex;align-items:center;
  min-height:var(--cm-cardhd-h);
  margin:0;padding:0 16px;
  background:var(--cm-surf-2);
  border-bottom:1px solid var(--cm-edge);
  font-size:20px;font-weight:700;line-height:1.4;letter-spacing:-.02em;
}
/* [SPEC0828-R3] padding:10px 16px 0 였다. 행(a)이 안여백을 갖게 되면서 그 값을
   음수 바깥여백으로 되밀면 2열 목차의 열 경계선(column-rule) 위로 행이 8px 걸친다.
   좌우 안여백을 행이 혼자 갖게 하고 목록은 0 으로 둔다 — 값(16px)은 그대로다.
   되돌리려면 padding:10px 16px 0 과 아래 a 의 음수 바깥여백을 함께 되돌린다. */
body.hub-body .cm_toc__l{margin:0;padding:10px 0 0;border-bottom:0;}
body.hub-body .cm_toc__l a{
  /* [SPEC0828-R3] margin 0 -8px · padding 11px 8px 였다 — 11 과 8 은 어느 사다리에도 없다.
     목차 행은 카드 안 행 전체가 누르는 줄이므로 카드 규격(세로 12 · 좌우 16)을 따른다.
     바깥여백은 부모 안여백(16)과 같은 크기로 되밀어 행이 카드 폭을 꽉 채우게 한다. */
  margin:0;padding:var(--cm-gap-s) var(--cm-card-px);
  border-top:0;
  border-bottom:1px solid var(--cm-edge);
  font-size:16px;line-height:var(--cm-lh-body);   /* [SPEC0828-R2] 1.5(24px)였다 */
  color:var(--cm-txt-2);
  text-decoration:none;
}


/* ── 17-7. 버튼 5급 ────────────────────────────────────────────────────────
   실측(반영 전) : 같은 라벨 · 같은 폭의 사이드 버튼이 /my/ 는 회색 외곽선,
   /mileage/ 는 파랑 채움이었다. 본문 버튼은 44/15(feed)와 48/14(my·mileage) 두 벌,
   사이드 버튼은 36(feed)과 34(my·mileage) 두 벌이었다.
     1급 본문 주 CTA   44 · 15/700 · #2E6BFF 채움 · #FFFFFF   (.cm_btn · .btn_fill)
     2급 본문 고스트   44 · 15/700 · #212429 · 1px #555D6D    (.btn_ghost)
     3급 사이드 고스트 36 · 13/600 · #212429 · 1px #555D6D    (.cm_rl_bt · .cm_wg_bt · .mg_w_bt)
     4급 예고(안 눌림) 36 · 13/600 · 면 없음 · 1px dashed      ([disabled])
     5급 넛지 채움     사이드 36 / 본문 44 · #2E6BFF 채움      (_acc · -fill)
   높이 · 글자 · 색은 각 시트에서 이미 맞췄다. 여기서는 창 인라인이 덮은 자리만 되잡는다. */
/* [SPEC0828-R3] font-size:15px 였다 — 글자 사다리(38/20/16/13)에 15px 칸이 없어
   같은 「인증글 쓰기」가 본문 15px · 사이드 13px 두 크기였다.
   좌우 안여백도 feed 22px · my·mileage 20px 두 값이었다 — 20 한 값으로 모은다. */
body.hub-body .cm_btn{
  min-height:var(--cm-cta-h);
  padding:0 var(--cm-cta-px);
  font-size:var(--cm-fs-cta);font-weight:var(--cm-fw-ctl);
}
body.hub-body .cm_btn,
body.hub-body .btn_fill{color:var(--cm-on-accent);}
/* 4급은 「지금은 열리지 않는다」를 형태로 말한다 — 점선이 그 신호이므로 면을 채우지 않는다.
   #868B94 는 #1A1C20 위 4.98:1 · #16171B 위 5.23:1 로 통과한다. */
body.hub-body .cm_wg_bt[disabled],
body.hub-body .mg_w_bt[disabled]{
  height:var(--cm-btn-h);min-height:var(--cm-btn-h);
  background:transparent;
  border:1px dashed var(--cm-dim);
  color:var(--cm-mut);
}
/* 5급 넛지 채움 — #2E6BFF 면 위 글자는 순백 하나뿐이다(4.50:1). */
body.hub-body .cm_rl_bt_acc,
body.hub-body .cm_wg_bt_acc,
body.hub-body .mg_w_bt-fill{color:var(--cm-on-accent);}   /* .mg_rl_bt 는 9창 마크업에 0건이라 넣지 않았다 */


/* ── 17-8. 배지 — 눌리지 않는 것 ───────────────────────────────────────────
   실측(반영 전) : 높이 22.19 / 22.89 / 24 / 26.19 네 값, 굵기 400 과 700 두 값,
   안여백 1px 6px / 2px 7px / 3px 8px 세 값. /my/ 의 .mg_w_chip 은 12px/400 · r6 으로
   혼자 다른 부품이었다. 24px 한 값으로 못 박는다(테두리 1+1 · line-height 22).
   중립(준비 중 · 예시 · 단계 태그) = #212429 · 1px #555D6D · #D1D3D8 (10.39:1)
   강조(먼저 열 후보 한 종류만)     = #1E2A44 · 1px #2E6BFF · #8FB4FF (6.90:1)
   배지는 눌리지 않는다 — 누르는 것은 17-9 의 칩이다. */
body.hub-body .hub-badge,
body.hub-body .hub-stage,
body.hub-body .tl-tag,
body.hub-body .cm_tag,
body.hub-body .pt-chip,
body.hub-body .ex_badge,
body.hub-body .bal_chip,
body.hub-body .mg_w_chip,
/* [SPEC0828-R3] .mg_w_soon 을 이 목록에 들였다 — 실측 23px(lh 16.9px)로 혼자 달랏다.
   그리고 .blk_tag 을 목록에서 **뻐다**. 그것은 배지가 아니라 적립 단가표 위의
   캐프션 <p> 다(「적립 단가 (운영 상황에 따라 조정될 수 있습니다)」 22글자).
   배지 옷을 입히니 폭이 259px 로 부풀어 카드 폭의 절반을 차지하고 표 머리처럼 보였다
   (배지 30개는 2~6글자다). mypage.css 가 이미 13px 꼬리 캐프션으로 그리고 있다.
   되돌리려면 .mg_w_soon 을 빼고 .blk_tag 을 다시 넣는다. */
body.hub-body .mg_w_soon{
  display:inline-flex;align-items:center;
  height:var(--cm-badge-h);
  padding:0 var(--cm-badge-px);
  border-width:1px;border-style:solid;border-radius:var(--cm-badge-r);
  /* [SPEC0828-R3] line-height:22px 였다. 누르는 것·배지의 라벨 줄 높이는 1 한 값이고
     높이는 상자가 정한다(실측 13/13 70곳 · 13/22 40곳으로 갈렸다). */
  font-size:var(--cm-fs-tail);font-weight:var(--cm-fw-ctl);line-height:var(--cm-lh-ctl);
  white-space:nowrap;
  background:var(--cm-surf-2);
  border-color:var(--cm-edge);
  color:var(--cm-txt-2);
}
/* 강조는 /tools/ 의 「먼저 열 후보」 한 종류에만 남긴다. */
body.hub-body .hub-badge--tier{
  background:var(--cm-accent-bg);
  border-color:var(--cm-accent);
  color:var(--cm-accent-soft);
}


/* ── 17-9. 칩 — 누르는 것 ──────────────────────────────────────────────────
   실측(반영 전) : 높이 24 / 32 / 34 / 35.5 네 값, 라운드 12 / 16 / 17 / 999 네 값,
   글자 16px 과 13px 두 값. 선택 상태도 /feed/ 는 파랑 채움 + 순백, /my/ 는 네이비 + #8FB4FF
   두 갈래였다. 파란 채움 예산(한 창 최대 2개)에 따라 네이비 쪽으로 모은다. */
body.hub-body .hub-chip,
body.hub-body .cm_chip,
body.hub-body .chip,
body.hub-body .cm_jump{
  display:inline-flex;align-items:center;
  height:var(--cm-chip-h);
  /* [LAYOUT0828-R6] 0 14px 하드코딩이었다 — --cm-chip-px 와 같은 값을 두 곳에 적고 있었다.
     되돌리려면 0 14px 로. */
  padding:0 var(--cm-chip-px);
  border-width:1px;border-style:solid;border-radius:var(--cm-chip-r);
  /* [LAYOUT0828-R7] 무엇을 : font-size 13px / font-weight 700 / line-height 1 이었다.
     왜 : 1920 실측에서 칩 글자가 네 벌이었다 — 랜딩 .hub-chip 16/26/400(17-34 가 덮은 값) ·
          guide .hub-chip 13/13/700 · feed .cm_chip 13/13/700 · my·mileage .mg_w_chip 13/13/700.
          같은 부품이 한 사이트에서 두 크기로 서면 「9개 창이 한 사이트로 보이는가」가 깨진다.
          랜딩이 이미 쓰고 있는 사다리 안 값(본문 16/26/400)으로 나머지 셋을 올린다 —
          새 값을 만들지 않았고, 폭은 guide 82 → 약 96 · my·mileage 52 → 약 61 로 늘어난다.
          컨테이너 넷이 전부 flex-wrap 이라 줄이 차면 접힌다(가로 넘침 0).
     되돌리려면 : font-size:var(--cm-fs-tail);font-weight:700;line-height:1; 로 되돌리고
          17-36 (2) 의 .mg_w_chip 세 줄을 지운다. */
  font-size:var(--cm-fs-body);font-weight:400;line-height:var(--cm-lh-body);
  letter-spacing:var(--cm-body-ls);
  white-space:nowrap;
  background:var(--cm-surf-2);
  border-color:var(--cm-edge);
  color:var(--cm-txt-2);
}
body.hub-body .chip.on,
body.hub-body .cm_chip[aria-pressed="true"]{
  background:var(--cm-accent-bg);
  border-color:var(--cm-accent);
  color:var(--cm-accent-soft);
}
/* 호버 면(--cm-surf-3)이 칩 면(#212429)과 같은 값이 되었으므로 테두리 · 글자로 표시한다. */
@media (hover:hover){
  body.hub-body .hub-chip:hover,
  body.hub-body .cm_chip:hover,
  body.hub-body .chip:hover,
  body.hub-body .cm_jump:hover{border-color:var(--cm-accent-soft);color:var(--cm-accent-soft);}
}
/* 칩 안의 번호 조각(/terms/ · /privacy/ 의 「1.」)은 칩 글자색을 따른다. */
body.hub-body .cm_jump .cm_jump__n{color:var(--cm-accent-soft);}


/* ── 17-10. 번호 표식 — 22px 원 한 벌 ──────────────────────────────────────
   /tools/ 의 .tl-vow__n 만 #2E6BFF 채움 + 순백이라, 같은 역할의 /guide/ .hub-step__no ·
   /my/ · /mileage/ .step_n(네이비 면 + #2E6BFF 테두리)과 다른 부품이었다.
   파란 채움은 본문 주 CTA 1개 + 넛지 1개뿐이라는 예산에도 걸린다(tools 첫 화면 2개).
   되돌리려면 이 규칙을 지운다. */
body.hub-body .tl-vow__n{
  background:var(--cm-accent-bg);
  border:1px solid var(--cm-accent);
  color:var(--cm-txt);
}


/* ── 17-11. 링크 ───────────────────────────────────────────────────────────
   내부 = 밑줄 없음 · #8FB4FF · 글 뒤에 › . 호버 · 포커스에서만 1px 밑선.
   외부 = 밑줄 없음 · #D1D3D8 · 1px #555D6D 밑선 · 글 뒤에 ↗ .
   실측(반영 전) : /fund/ 6건 · /guide/ 14건 · /tools/ 1건 · /feed/ 4건 · /home/ 1건이
   브라우저 기본 밑줄(text-decoration:underline)을 그대로 달고 있어, 카드 안에서 가장
   두꺼운 선이 되어 있었다. 밑줄 두께를 브라우저에 맡기지 말고 1px 테두리로 그린다.
   ※ /terms/ · /privacy/ 의 <article> 안 조문 본문 링크는 손대지 않는다. */
/* [SPEC0828-R3] border-bottom:1px solid transparent 였다 — 투명해도 상자 높이는 1px 늘어
   16px 링크가 26 이 아니라 27px 로 섬다(실측 : guide 5곳 · fund 1곳).
   링크 높이는 글자 사다리가 정한다 — 밑줄은 상자를 밀지 않는 text-decoration 으로 그린다.
   되돌리려면 border-bottom:1px solid transparent 로. */
body.hub-body .hub-a,
body.hub-body .cm_nt_link{
  text-decoration:none;
  text-underline-offset:2px;
  color:var(--cm-link);
  border-bottom:0;
}
/* [SPEC0828-R3] color:var(--cm-txt-2)(#D1D3D8) + 1px #555D6D 밑선이었다.
   실측 : 내부 링크는 #8FB4FF, 외부 링크는 #D1D3D8 두 색이고(fund 5곳 · guide 9곳 ·
   tools 1곳) 그 15곳 중 밑줄 있는 것은 0곳이었다. 링크는 한 색(--cm-link)이고,
   안과 밖을 가르는 것은 색이 아니라 밑줄과 ↗ 글리프다.
   밑줄은 1px 테두리가 아니라 text-decoration 으로 그린다 — offset 2px 로 받침을 비운다.
   되돌리려면 color:var(--cm-txt-2) · border-bottom:1px solid var(--cm-edge) 로. */
body.hub-body .hub-a--ext,
body.hub-body .hub-ad__a{
  color:var(--cm-link);
  text-decoration:underline;
  text-underline-offset:2px;
  border-bottom:0;
}
@media (hover:hover){
  body.hub-body .hub-a:hover,
  body.hub-body .cm_nt_link:hover{text-decoration:underline;}
  body.hub-body .hub-a--ext:hover,
  body.hub-body .hub-ad__a:hover{text-decoration-thickness:2px;}
}
body.hub-body .hub-a:focus-visible,
body.hub-body .cm_nt_link:focus-visible{text-decoration:underline;}
body.hub-body .hub-a--ext:focus-visible{text-decoration-thickness:2px;}


/* ── 17-12. 머리 블록 → 첫 카드는 40px 한 값이다 ───────────────────────────
   [SPEC0828-R2] 실측(반영 전) : fund 40 · guide 40 인데 tools 32 · terms 32 · privacy 32 로
   5:4 로 갈렸다. 원인은 여백 값이 아니라 선택자다 — 13절의 `+ .hub-box` 는 첫 형제가
   카드가 아닌 창에 닿지 못했고, /tools/ 는 닿으면서도 17-4 의 `.hub-main > .tl-vow`(0,3,0)에
   32px 로 가로채였다. 여기 (0,4,0) 한 벌이 9창의 머리 경계 전부다.
   ※ 9창이 머리 래퍼에 class="hub-head" 를 달면 아래 구조 선택자(:has)는 지워도 된다.
     그때 남길 것은 첫 두 줄뿐이다.
   되돌리려면 이 절을 지운다(창별 값으로 돌아간다). */
body.hub-body .hub-main > .hub-head + *,
body.hub-body .pt-main > .hub-head + *,
/* 머리 래퍼의 이름이 창마다 다르다 — fund .hub-head · tools .tl-head · guide 무명 <div> ·
   feed .cm_pghead · my · mileage .pg_top. 이름이 아니라 구조로 잡는다.
   home 의 h1 은 스스로 .hub-ttl 이라 걸리지 않는다(랜딩 머리는 별도 부품이다). */
body.hub-body .hub-main > :has(.hub-h1) + *,
body.hub-body .pt-main > :has(.hub-h1) + *{margin-top:var(--cm-head-gap);}
/* /terms/ · /privacy/ 는 머리 래퍼가 없어 main 의 직계 네 줄(빵부스러기 · h1 · 개정일 ·
   초안 고지)이 머리다. 그 마지막 줄 다음이 첫 블록이다. */
body.hub-body main:not([class]) > .cm_dates + :is(.draft,.hub-lead){margin-top:var(--cm-tight-gap);}
body.hub-body main:not([class]) > :is(.draft,.hub-lead) + *{margin-top:var(--cm-head-gap);}
/* 2단 창의 본문 열도 블록 사이는 32px 한 값이다(포털 시트의 --pt-gap 20px 을 걷는다). */
body.hub-body .pt-main > * + *{margin-top:var(--cm-block-gap);}


/* ── 17-13. 카드 한 벌 — 머리띠 실측 높이는 45px 이다 ──────────────────────
   [SPEC0828-R2] 실측(반영 전) : 머리띠가 45px(.hub-box__hd 4창 · my .blk_hd)와
   44px(mileage .blk_hd · terms · privacy .cm_toc__h) 두 값이었다.
   규격은 min-height 44 + border-bottom 1 = 45 다 — box-sizing 을 content-box 로 두어야
   padding 이 바뀌어도 띠 높이가 흔들리지 않는다(border-box 는 테두리를 44 안으로 먹는다).
   카드 안 좌우 안여백도 16px 한 값이다(26px · 22px 를 쓰지 마라).
   되돌리려면 이 절을 지운다. */
body.hub-body .cm_toc__h{
  box-sizing:content-box;
  min-height:var(--cm-band-h);
  padding:0 var(--cm-card-px);
  line-height:var(--cm-lh-h2);
  letter-spacing:var(--cm-h2-ls);
}
/* /my/ · /mileage/ 의 카드는 mypage.css 가 값을 갖는다. 여기서는 창 안 <style> 이
   덮은 자리만 (0,3,0) 으로 되잡는다 — /mileage/ 인라인의 `.pg .blk_hd`(0,2,0) 몫이다. */
body.hub-body .pt-wrap .blk_hd{
  box-sizing:content-box;
  min-height:var(--cm-band-h);
  margin-left:calc(var(--cm-card-px) * -1);
  margin-right:calc(var(--cm-card-px) * -1);
  padding:0 var(--cm-card-px);
  gap:var(--cm-tight-gap);
}
body.hub-body .pt-wrap .blk{padding-left:var(--cm-card-px);padding-right:var(--cm-card-px);}


/* ── 17-14. 제목 · 사이드 제목의 남은 두 자리 ──────────────────────────────
   [SPEC0828-R2] 실측 : /feed/ 의 클래스 없는 h2 하나만 line-height 30px · 자간 -0.14px,
   같은 창의 사이드 제목(.pt-c__ttl)만 18.2px 이었다(다른 사이드 제목은 20px).
   두 자리 모두 창 안 <style> 이 값을 갖고 있어 시트에서 (0,3,0) 으로 되잡는다.
   되돌리려면 이 두 규칙을 지운다. */
body.hub-body .pt-main h2:not([class]){
  font-size:20px;font-weight:700;
  line-height:var(--cm-lh-h2);letter-spacing:var(--cm-h2-ls);
  color:var(--cm-txt);margin:0;
}
body.hub-body .pt-wrap .pt-c__ttl,
body.hub-body .pt-wrap .pt-w__ttl{
  font-size:var(--cm-fs-tail);font-weight:700;
  line-height:var(--cm-lh-tail);
  gap:var(--cm-gap-xs);
}


/* ── 17-15. 본문 16/26 · 꼬리 13/20 ────────────────────────────────────────
   [SPEC0828-R2] 실측 : 16px 본문의 줄 높이가 19.2 / 23.2 / 24 / 25.6 / 26 / 27.2 / 28 /
   28.8 여덟 값, 13px 꼬리가 13 / 16.9 / 18.2 / 19.5 / 20 / 20.15 / 20.8 / 22 / 22.1 / 23.4
   열 값이었다. 26 과 20 이 각각 가장 널리 쓰이는 값이라 그쪽으로 모은다.
   범위를 `main :is(p,li)` 로 넓게 잡지 않는 이유 : /terms/ · /privacy/ 의 <article> 안
   조문 본문이 함께 끌려온다. 부품 이름으로만 적는다.
   되돌리려면 이 두 규칙을 지운다. */
body.hub-body .hub-lead,
body.hub-body .lead23,
body.hub-body .def,
body.hub-body .draft{font-size:16px;line-height:var(--cm-lh-body);}
/* [SPEC0828-R2] 여기 `.hub-box__bd p` · `.blk p` 두 줄이 있었다. (0,2,1) 이라 같은 <p> 에
   붙은 꼬리 클래스(.note11 · .note12 · .note13 · (0,2,0))를 이겨 13px 꼬리를 16px 로
   끌어올렸다. 16px 본문의 줄 높이는 17-21 의 그릇이 상속으로 물려준다 — 여기서는 뺀다. */
body.hub-body .note13,
body.hub-body .hub-note,
body.hub-body .tl-tail,
body.hub-body .mg_w_tx,
body.hub-body .cm_rl_fine,
body.hub-body .cm_wg_fine,
body.hub-body .pt-rail__note{font-size:var(--cm-fs-tail);line-height:var(--cm-lh-tail);}


/* ── 17-16. 사이드 카드 — 채워진 카드를 만들지 마라 ─────────────────────────
   [SPEC0828-R2] 실측(반영 전) : 사이드 카드 12장 중 10장은 #1A1C20 + 1px #555D6D 인데
   /feed/ 의 .pt-c--nudge 와 /my/ 의 .pt-w--nudge 두 장만 #1E2A44 로 채워져 있었다.
   세 창의 사이드를 나란히 놓으면 feed · my 는 맨 아래에 파란 상자가 서고 mileage 는
   없어, 같은 열이 세 가지로 읽혔다. 면은 portal.css 가 이미 걷었고, 여기서는
   /feed/ 인라인(body.is-cm .pt-c--nudge · 0,2,0)이 되살리는 자리만 (0,3,0)으로 누른다.
   강조는 면이 아니라 카드 제목 글자(#8FB4FF)가 맡는다.
   되돌리려면 이 절을 지운다. */
body.hub-body .pt-wrap .pt-c--nudge,
body.hub-body .pt-wrap .pt-w--nudge{
  background:var(--cm-surf);border-color:var(--cm-edge);
}
body.hub-body .pt-wrap .pt-c--nudge .pt-c__ttl,
body.hub-body .pt-wrap .pt-w--nudge .pt-w__ttl{color:var(--cm-accent-soft);}
body.hub-body .pt-wrap .pt-c--nudge .cm_rl_tx,
body.hub-body .pt-wrap .pt-w--nudge .cm_wg_tx,
body.hub-body .pt-wrap .pt-w--nudge .cm_wg_fine,
body.hub-body .pt-wrap .pt-w--nudge .mg_w_tx,
body.hub-body .pt-wrap .pt-w--nudge .mg_w_foot{color:var(--cm-txt-2);}


/* ── 17-17. 파란 채움 예산 — 창당 정확히 1개 ────────────────────────────────
   [SPEC0828-R2] 실측(반영 전) : #2E6BFF 를 **면**으로 쓰는 요소가 feed 2(.cm_btn 44 +
   .cm_rl_bt_acc 36) · my 2(.btn_fill 44 ×2) · mileage 2(.btn_fill 44 ×2)였고,
   같은 라벨 · 같은 폭 · 같은 자리의 「상담 열기」가 feed 는 파랑 채움, my 는 회색
   외곽선이라 옷이 반대였다. 지난 회차에 「회색 외곽선으로 통일」을 적었는데 클래스
   이름만 바뀌어(.mg_w_bt-navy → .cm_rl_bt_acc) 결함이 살아남았다.
   채움을 한 창에 1개로 못 박는다 —
     home = .hub-search__go · feed · my · mileage = 본문 주 CTA 「인증글 쓰기」 ·
     fund · guide · tools · terms · privacy = 0개.
   넛지는 파란 채움을 쓰지 않는다 : 사이드 넛지 버튼은 3급(36px 회색 외곽선),
   본문 넛지 버튼은 2급(44px 고스트)이다. 5급(넛지 채움)은 폐지한다.
   되돌리려면 이 절을 지운다. */
body.hub-body .pt-wrap .pt-c--nudge .cm_rl_bt_acc,
body.hub-body .pt-wrap .pt-w--nudge .cm_wg_bt_acc,
body.hub-body .pt-wrap .pt-w--nudge .mg_w_bt-fill{
  background:var(--cm-surf-2);
  border:1px solid var(--cm-edge);
  color:var(--cm-txt);
}
@media (hover:hover){
  body.hub-body .pt-wrap .pt-c--nudge .cm_rl_bt_acc:hover,
  body.hub-body .pt-wrap .pt-w--nudge .cm_wg_bt_acc:hover,
  body.hub-body .pt-wrap .pt-w--nudge .mg_w_bt-fill:hover{
    background:var(--cm-surf-2);
    border-color:var(--cm-accent-soft);color:var(--cm-accent-soft);
  }
}
/* 본문의 넛지 버튼(/my/ 「상담 신청하고 할인 적용받기」 · /mileage/ 「넛지 챗봇 열기」)은
   2급 고스트다. 넛지로 가는 본문 버튼이라는 사실을 목적지(href)로 잡는다 —
   두 창이 클래스 이름을 나눠 갖고 있지 않아 이름으로는 한 규칙에 모이지 않는다. */
body.hub-body .btn_fill[href*="/nudge/"]{
  background:var(--cm-surf-2);
  border:1px solid var(--cm-edge);
  color:var(--cm-txt);
}
@media (hover:hover){
  body.hub-body .btn_fill[href*="/nudge/"]:hover{
    background:var(--cm-surf-2);
    border-color:var(--cm-accent-soft);color:var(--cm-accent-soft);
  }
}


/* ── 17-18. 법정 문서 두 창은 한 묶음 ──────────────────────────────────────
   [SPEC0828-R2] 실측(반영 전) : 같은 이름의 부품이 네 곳에서 갈렸다 —
   .cm_notice_bar 안여백 terms 20px 22px 대 privacy 16px 20px, ※ 초안 문장이
   terms .draft(3px 왼쪽 띠) 대 privacy .hub-lead(장식 없음), .cm_dates 폭 912 대 640,
   .cm_dates 줄 높이 1.7(22.1px). 22px 는 어떤 사다리에도 없는 값이다.
   원인은 두 창이 각각 23,064자 · 22,784자짜리 창 안 <style> 로 같은 이름을 따로 그리는
   것이다. 창 HTML 은 이 회차의 몫이 아니므로 값만 시트 한 곳으로 모은다.
   ※ <article> 안 조문 본문에는 한 줄도 닿지 않는다 — 선택자에 article 이 없다.
   되돌리려면 이 절을 지운다. */
body.hub-body .cm_notice_bar,
body.hub-body .cm_act{padding:var(--cm-notice-pad);}
body.hub-body .cm_dates{
  max-width:none;                     /* /privacy/ 만 640px 이라 두 줄로 접혔다 */
  font-size:var(--cm-fs-tail);line-height:var(--cm-lh-tail);
}
body.hub-body .cm_dates span + span{margin-top:var(--cm-gap-xs);}
/* /privacy/ 의 ※ 초안 문장은 class="hub-lead" 라 /terms/ 의 .draft(왼쪽 3px 띠)와
   장식이 달랐다. 클래스 이름 통일은 창 HTML 몫이므로, 그때까지 두 이름이 같은 옷을 입는다.
   /fund/ · /tools/ · /feed/ 의 .hub-lead 는 이 선택자에 걸리지 않는다(main 에 class 가 있다). */
body.hub-body main:not([class]) > .hub-lead,
body.hub-body .draft{
  margin:0;padding-left:12px;
  border-left:3px solid var(--cm-edge);
  font-size:16px;line-height:var(--cm-lh-body);color:var(--cm-txt-2);
}


/* ── 17-19. 간격 사다리 — 창 안 <style> 이 남긴 값 ──────────────────────────
   [SPEC0828-R2] 실측에서 사다리 밖으로 남은 값은 전부 창 안 <style> 소유였다 —
   /tools/ .tl-key row-gap 10 · .tl-vow__i column-gap 10 · .hub-item__meta 4/7px,
   /my/ .bal_hero 10 · /mileage/ .use_list column-gap 28.
   시트가 가진 자리는 각 시트에서 이미 고쳤고, 여기는 인라인이 덮은 자리만 되잡는다.
   창 담당이 인라인의 그 줄들을 지우면 이 절도 함께 걷어라.
   되돌리려면 이 절을 지운다. */
body.hub-body .hub-main .tl-key{row-gap:var(--cm-tight-gap);column-gap:var(--cm-gap-m);}
body.hub-body .hub-main .tl-vow__i{column-gap:var(--cm-tight-gap);}
body.hub-body .hub-main .hub-item__meta{gap:var(--cm-gap-xs);}
body.hub-body .hub-main .hub-item:has(> .hub-item__hd) > .hub-item__meta{gap:var(--cm-gap-xs);}
body.hub-body .pt-wrap .bal_hero{gap:var(--cm-tight-gap);}
/* [LAYOUT0828-R2] --cm-gap-l(24px)였다 → --cm-gap-2xl(48px).
   왜 : 24 는 「카드 안 열과 열」 칸이다. 이 목록은 2열 격자이고, 사이트 안 모든 2열
        가로 거터는 48px 한 값이다(푸터 4열 32 · 사이드 버튼 8 두 곳만 예외).
        /my/ · /mileage/ 두 창이 이 한 줄을 함께 읽어 같이 맞는다.
   되돌리려면 : var(--cm-gap-l) 로 되돌린다. */
body.hub-body .pt-wrap .use_list{column-gap:var(--cm-gap-2xl);}
body.hub-body .pt-wrap .cm_wg_steps{gap:var(--cm-gap-xs);}


/* ── 17-20. 칩 한 벌 — 사이드의 네 칸도 칩이다 ──────────────────────────────
   [SPEC0828-R2] 실측(반영 전) : 사이드의 준비 · 등록 · 자금 · 운영 네 칸이
   /feed/ 는 52×32 · r16(칩), /my/ · /mileage/ 는 40×24 · r3(배지 모양)이라 같은 부품이
   두 크기였다 — 스크린샷에서 feed 쪽은 둥근 알약, my · mileage 쪽은 작은 네모로 보였다.
   community.css · mypage.css 에서 값을 맞췄고, 여기서는 /feed/ 인라인의
   body.is-cm .cm_wg_steps a (0,2,1) 가 되살리는 자리만 (0,3,1) 으로 누른다.
   되돌리려면 이 절을 지운다. */
body.hub-body .pt-wrap .cm_wg_steps a{
  height:var(--cm-chip-h);padding:0 14px;
  border:1px solid var(--cm-edge);border-radius:var(--cm-chip-r);
  background:var(--cm-surf-2);
  font-size:var(--cm-fs-tail);font-weight:700;line-height:1;color:var(--cm-txt-2);
}
/* 배지 모서리도 토큰으로 못 박는다 — 값은 9창 실측 그대로 3px 다. */
body.hub-body .hub-badge,
body.hub-body .hub-stage,
body.hub-body .tl-tag,
body.hub-body .cm_tag,
body.hub-body .pt-chip,
body.hub-body .ex_badge,
body.hub-body .bal_chip,
body.hub-body .mg_w_soon{border-radius:var(--cm-badge-r);}   /* [SPEC0828-R3] .blk_tag 을 뻐다 — 캐프션이지 배지가 아니다 */
/* 배지는 눌리지 않는다 — .mg_w_chip 은 위 17-20 에서 칩으로 올라갔으므로
   17-8 의 배지 목록에서 뺀다(같은 요소가 배지 규격과 칩 규격을 동시에 받으면
   높이 24 와 32 가 부딪힌다). */
body.hub-body .mg_w_chip{
  height:var(--cm-chip-h);
  /* [LAYOUT0828-R7] 0 14px · line-height 1 이었다(칩 좌우 안여백이 14 와 16 두 값이었다).
     칩 한 벌(17-9)과 같은 값으로 모은다. 되돌리려면 padding:0 14px;line-height:1; 로. */
  padding:0 var(--cm-chip-px);
  border-radius:var(--cm-chip-r);
  font-size:var(--cm-fs-body);
  font-weight:400;
  line-height:var(--cm-lh-body);
}


/* ── 17-21. 16px 본문 26 · 13px 꼬리 20 — 담는 그릇에서 물려준다 ──────────
   [SPEC0828-R2] 17-15 는 부품 이름만 잡아 이름 없는 <p> · <li> · <td> 가 남았다
   (실측 : 16px 이 24 / 25.6 / 27.2 / 28 / 28.8, 13px 이 19.5 / 20.15 / 22 / 22.1 / 23.4).
   line-height 는 상속되므로 그릇에 한 번 적으면 그 안의 이름 없는 글이 함께 맞는다.
   그릇 목록에 <article> 은 없다 — /terms/ · /privacy/ 의 조문 본문은 한 줄도 닿지 않는다.
   되돌리려면 이 절을 지운다. */
body.hub-body .hub-box__bd,
body.hub-body .hub-box__ft,
body.hub-body .hub-step__bd,
body.hub-body .hub-tr__bd,
body.hub-body .pt-wrap .blk,
body.hub-body .cm_card,
body.hub-body .cm_empty,
body.hub-body .cm_notice,
body.hub-body .cm_notice_bar,
body.hub-body .cm_act,
body.hub-body .cm_xlink,
body.hub-body .cm_toc__l,
body.hub-body .cm_toc__x{line-height:var(--cm-lh-body);}
/* 카드 안 소제목(h3 단)은 24px 이다 — 위 그릇의 26px 을 되돌린다. */
body.hub-body .hub-item__nm,
body.hub-body .hub-step__ttl,
body.hub-body .hub-colhd,
body.hub-body .blk_tit,
body.hub-body .cm_title,
body.hub-body .cm_nt_head{line-height:var(--cm-lh-h3);}
/* 13px 꼬리는 20px 이다 — 그릇이 물려준 26px 을 되돌린다. */
body.hub-body .hub-note,
body.hub-body .hub-item__cat,
body.hub-body .hub-item__meta,
body.hub-body .tl-key__k,
body.hub-body .tl-key__v,
body.hub-body .tl-tail,
body.hub-body .cm_meta,
body.hub-body .cm_samplecap,
body.hub-body .cm_photocap,
body.hub-body .cm_nt_link,
body.hub-body .cm_act__n,
body.hub-body .cm_act__u,
body.hub-body .cm_toc__x__s,
body.hub-body .bal_note,
body.hub-body .bal_conv,
body.hub-body .mg_w_lk,
body.hub-body .note11,
body.hub-body .note12,
body.hub-body .note13{font-size:var(--cm-fs-tail);line-height:var(--cm-lh-tail);}
/* 누르는 것의 글자는 상자 높이가 정한다 — line-height 는 1 이다(3급 규격 `13px/1`).
   1.5 를 물고 있으면 36px 상자 안에서 글자 상자가 19.5px 로 서서 세로 가운데가 흔들린다. */
body.hub-body .btn,
body.hub-body .cm_btn,
body.hub-body .cm_btn_ghost,
body.hub-body .cm_rl_bt,
body.hub-body .cm_wg_bt,
body.hub-body .mg_w_bt,
body.hub-body .cm_nt_more{line-height:1;}


/* ── 17-22. 창 안 <style> 이 되살리는 칩 · 격자 ─────────────────────────────
   [SPEC0828-R2] /feed/ 인라인이 (0,2,0)으로 시트 값을 덮고 있는 두 자리다 —
   `.cm_card .cm_cheer, .cm_card .cm_cmt`(높이 30 · radius 999px)와
   `body.is-cm .pt-col-l{row-gap:24px}`. 창 담당이 그 두 줄을 지우면 이 절도 걷어라.
   되돌리려면 이 절을 지운다. */
body.hub-body .cm_card .cm_cheer,
body.hub-body .cm_card .cm_cmt{
  height:var(--cm-chip-h);
  padding:0 14px;
  border-radius:var(--cm-chip-r);
  font-size:var(--cm-fs-tail);font-weight:700;line-height:1;
  color:var(--cm-txt-2);
}
body.hub-body .pt-wrap .pt-col-l{row-gap:var(--cm-block-gap);}
/* /terms/ · /privacy/ 인라인의 `.cm_jump{gap:6px}` — 칩 안의 번호와 글 사이도 8px 이다. */
body.hub-body .cm_jump{gap:var(--cm-gap-xs);}


/* ── 17-23. 창 안 <style> 이 남긴 줄 높이 · 간격 ────────────────────────────
   [SPEC0828-R2] /feed/ 인라인이 (0,1,0)~(0,2,0) 으로 시트 값을 덮는 자리와,
   /mileage/ 인라인의 `.pg .blk .note11`(0,3,0) 한 자리다.
   창 담당이 그 줄들을 지우면 이 절도 함께 걷어라.
   되돌리려면 이 절을 지운다. */
body.hub-body .cm_samplenote,
body.hub-body .cm_empty p{line-height:var(--cm-lh-body);}
body.hub-body .cm_empty h2{line-height:var(--cm-lh-h2);letter-spacing:var(--cm-h2-ls);}
body.hub-body .cm_nt_more{gap:var(--cm-gap-xs);}
body.hub-body .pt-wrap .cm_wg_num,
body.hub-body .pt-wrap .cm_wg_tx,
body.hub-body .pt-wrap .cm_wg_fine,
body.hub-body .pt-wrap .cm_wg_link,
body.hub-body .pt-wrap .cm_rl_tx,
body.hub-body .pt-wrap .cm_rl_fine{line-height:var(--cm-lh-tail);}
body.hub-body .pt-wrap .blk .note11,
body.hub-body .pt-wrap .blk .note12,
body.hub-body .pt-wrap .blk .note13{line-height:var(--cm-lh-tail);}
/* /privacy/ 인라인의 `.cm_xlink__c`(13px/1.7 = 22.1px) 한 줄. */
body.hub-body .cm_xlink__c,
body.hub-body .cm_xlink__c a{line-height:var(--cm-lh-tail);}
/* /mileage/ 인라인의 `.pg .rate th, .pg .rate td{line-height:24px}` — 같은 창의 옆 표
   (.rule_tbl)가 26px 이라 한 창 안에서 표의 줄 높이가 두 값이었다. */
body.hub-body .pt-wrap .rate th,
body.hub-body .pt-wrap .rate td{line-height:var(--cm-lh-body);}
/* 13px 꼬리 중 그릇의 26px 을 물려받고 있던 세 자리(/feed/ .cm_count · /my/ .my_do__t ·
   /mileage/ .blk_tag)를 20px 로 되돌린다. */
body.hub-body .cm_count,
body.hub-body .my_do__t,
body.hub-body .blk_tag{line-height:var(--cm-lh-tail);}
/* [SPEC0828-R2] /my/ 인라인의 `.my_do{background:var(--cm-bg);border:1px solid var(--line);
   border-radius:10px;padding:16px 18px}` — 카드 테두리 → 머리띠 아래선 → 이 상자 테두리 →
   파란 버튼까지 경계가 네 겹이라 같은 급 카드(/mileage/ 두 겹)보다 한 겹 깊었다.
   카드 안에 또 테두리 상자를 넣지 않는다 — 나눌 일은 윗선 1px + 위 안여백 12px 로만 한다.
   되돌리려면 이 규칙을 지운다. */
body.hub-body .my_do{
  background:transparent;
  border:0;border-top:1px solid var(--cm-edge);
  border-radius:0;
  padding:var(--cm-gap-s) 0 0;
}


/* ── 17-24. 2단 접힘은 1024px 이다 ─────────────────────────
   [SPEC0828-R3] 실측 접힘이 600px 이었다. 900px 폭에서 좌 본문 열이 532px 로 줄고
   사이드는 280px 고정이라, 읽는 열이 사이드보다 252px 밖에 넓지 않았다 —
   본문이 주역이라는 사실을 폭이 말하지 못한다. 브레이크포인트 규격(1024/600)의
   1024 로 올린다 — 1024px 에서 좌 592 + 거터 40 + 우 280 = 912 가 그 폭의 한계다.
   선택자 무게가 (0,3,0) 인 이유 : /feed/ 인라인의 body.is-cm .pt-col-l (0,2,0) 과
   /my/ 인라인의 .pt-wrap--norail .pt-col-l (0,2,0) 이 둘 다 이 시트 **뒤에** 실려
   같은 무게면 그쪽이 이긴다. 두 창 담당이 그 줄을 지우면 .pt-col-l 로 줄여라.
   ※ @media 조건엔 var() 를 쓸 수 없다 — :root 의 --cm-fold 와 항상 같이 고쳐라.
   되돌리려면 이 절을 지운다(portal.css 가 600px 에서 접는 상태로 돌아간다). */
@media (max-width:1024px){
  body.hub-body .pt-wrap .pt-col-l{
    grid-template-columns:minmax(0,1fr);
    row-gap:var(--cm-block-gap);
  }
}


/* ── 17-25. 카드 안 3겹 면을 걷는다 ───────────────────────
   [SPEC0828-R3] 실측 : 카드(#1A1C20 · 1px #555D6D · r10) 안에 또 면(#212429 · r10)을
   긐은 것이 guide .hub-step__qs 878×106 ×4 · my .step 558×98 ×3 ·
   mileage .step ×3 + .calc 558×211 + 단계 링크 .stage4 a 131×120 ×4 로 세 창에만 있고
   나머지 6창은 0개다. 같은 급의 카드가 어떤 창에서는 경계 두 겹, 어떤 창에서는
   네 겹으로 보인다. 카드 안 구역 나눔은 윗선 1px + 위 안여백 12px 한 벌뿐이다.
   ※ 표의 <th>(45px · #212429)만 예외다 — 선택자에 th 가 없으므로 닿지 않는다.
   guide 쪽(.hub-step__qs)은 13절에서 이미 걷었고, 여기는 my · mileage 몫이다.
   무게 (0,3,0) · (0,3,1) 인 이유 : /mileage/ 인라인의 `.pg .calc, .pg .stage4 a{border-radius:10px}`
   (0,2,0)·(0,2,1) 이 시트 뒤에 실린다. 그 창 담당이 그 줄을 지우면 무게를 줄여라.
   되돌리려면 이 절을 지우고 mypage.css 의 세 규칙을 예전 값으로 되돌린다. */
body.hub-body .pt-wrap .step,
body.hub-body .pt-wrap .calc{
  background:transparent;
  border:0;
  border-top:1px solid var(--cm-edge);
  border-radius:0;
  padding:var(--cm-gap-s) 0 0;
}
/* 단계 링크 네 칸은 가로 격자라 윗선이 구역을 나누지 않는다 — 윗선 · 안여백 없이
   글자만 남긴다. 높이 = 16px 줄 24 + 13px 줄 20 = 44px(누르는 것의 네 값 중 하나). */
body.hub-body .pt-wrap .stage4 a{
  background:transparent;
  border:0;
  border-radius:0;
  padding:0;
}
/* 카드 옷을 벗은 단계 링크는 「누르는 것」임을 색으로 말한다 — 링크 한 색(--cm-link).
   높이는 글자 사다리가 정한다 : 16px 줄 24 + 13px 줄 20 = 44px. */
body.hub-body .pt-wrap .stage4 a b{color:var(--cm-link);}
body.hub-body .pt-wrap .stage4 a span{
  font-size:var(--cm-fs-tail);line-height:var(--cm-lh-tail);
  color:var(--cm-mut);margin-top:0;
}


/* ── 17-26. 사다리 밖 글자 크기가 인라인에 남은 자리 ─────────────
   [SPEC0828-R3] 실측 : /my/ 인라인이 .bal_num{font-size:30px} 을 (0,1,0) 으로 놓아
   mypage.css 값을 덮고 있었다. 30px 은 사다리(38/20/16/13)에 없는 값이고,
   그 한 자리 때문에 「잔액」이 이 창의 h1 다음가는 크기로 떠 제목 사다리가 다섯 칸이 됐다.
   숨 자리(20px)로 내린다 — 숫자가 답이라는 사실은 크기가 아니라 자리가 말한다.
   창 담당이 인라인 두 줄(.bal_num 30px · ≤600 22px)을 지우면 이 규칙도 걷어라.
   되돌리려면 이 절을 지운다. */
body.hub-body .pt-wrap .bal_num{
  font-size:var(--cm-fs-h2);font-weight:700;
  line-height:var(--cm-lh-h2);letter-spacing:var(--cm-h2-ls);
}


/* ── 17-27. 배지 폭 ─────────────────────────────────────
   [SPEC0828-R3] 규격은 「배지 최대 8글자 · 폭 120px」이다. 실측 위반은 세 종류다 —
     (1) mileage .blk_tag 259px : 배지가 아니라 캐프션이다. 17-8 목록에서 뻐 해소했다.
     (2) tools .tl-tag 129~180px 11곳 : 이 클래스는 전부(11/11) 120px 를 넘는다 —
         「공개 시 무료 · 회원가입」처럼 배지가 아니라 조건 한 줄이다.
         규격이 정한 대체 모양(13px/700 #D1D3D8 라벨 한 줄)으로 내린다 —
         글자를 자르면 조건이 사라지므로 max-width 로 자르지 않는다.
     (3) guide .hub-badge--soon 183px 한 곳 : 같은 클래스가 다른 자리에서는 54px 「준비 중」이라
         클래스로는 갈라낼 수 없다. 글자를 줄이는 창 HTML 몫이다(미해결로 올렸다).
   --cm-badge-maxw 는 검수 기준값으로만 둔다 — 캐프로 걸면 글자가 잘렸다.
   되돌리려면 이 절을 지운다(.tl-tag 이 다시 배지 옷을 입는다). */
body.hub-body .tl-tag{
  display:inline;
  height:auto;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--cm-txt-2);
  font-size:var(--cm-fs-tail);font-weight:var(--cm-fw-ctl);line-height:var(--cm-lh-tail);
}


/* ── 17-28. 목차 · 바깥글 링크의 높이 ────────────────────────
   [SPEC0828-R3] 실측 : /terms/ · /privacy/ 의 본문 링크 높이가 19 · 29 · 34 · 49px 네 값이었다.
   테두리도 바탕도 없는 순수 텍스트 링크의 높이는 글자 사다리가 정한다 —
   16px 링크 26px · 13px 링크 20px · padding 0. 세로 padding 을 주어 27·29·34·49px 같은
   새 높이를 만들지 마라. 다만 목차(.cm_toc__l a)는 카드 안 행 전체가 누르는 줄이라
   행 안여백을 카드 규격(12px · 좌우 16px)으로 갈아끼운다 — 8px 은 카드 안여백 사다리에 없다.
   무게 (0,2,1) 인 이유 : 두 창 인라인의 .cm_toc__l a · .cm_toc__x a · .cm_xlink a 가 (0,1,1) 이다.
   되돌리려면 이 절을 지운다. */
body.hub-body .cm_toc__x a,
body.hub-body .cm_xlink a,
body.hub-body .cm_xlink__c a{
  padding:0;
  border-radius:0;
}


/* ── 17-29. 사이드 위젯 제목의 자간 ─────────────────────────
   [SPEC0828-R3] 실측 13px/700/20px/-0.14px 세 창 일치 — 자간만 집안 값(-.02em = -0.26px)에서
   벗어나 있었다. 제목 계열의 자간은 h1(-0.76) · h2(-0.4) · h3(-0.32) 과 같은 집안이다. */
body.hub-body .pt-wrap .pt-c__ttl,
body.hub-body .pt-wrap .pt-w__ttl{letter-spacing:var(--cm-wg-ls);}
/* 카드 안 소제목(h3 단)의 자간도 한 값이다 — 실측 my -0.14px · mileage -0.2px 두 값이었다. */
body.hub-body .hub-item__nm,
body.hub-body .hub-colhd,
body.hub-body .blk_tit,
body.hub-body .cm_title,
body.hub-body .cm_nt_head{letter-spacing:var(--cm-h3-ls);}
/* /mileage/ 인라인의 `.pg .blk .blk_tit{letter-spacing:-.2px}`(0,3,0) 한 자리만 (0,4,0) 으로 누른다.
   그 창 담당이 그 줄을 지우면 이 줄도 함께 지우면 된다. */
body.hub-body .pt-wrap .blk .blk_tit{letter-spacing:var(--cm-h3-ls);}
/* 본문 · 꼬리의 자간도 한 값이다 — 실측 -0.16px(6창)과 -0.14px(feed·my·mileage) 두 값.
   .hub-body 의 -.01em 을 px 로 못 박아 문단 길이가 창마다 달라지지 않게 한다.
   ※ <article> 안 조문 본문에는 닿지 않는다 — 선택자가 부품 이름뿐이다. */
body.hub-body .pt-wrap,
body.hub-body .pt-wrap .blk,
body.hub-body .cm_card,
body.hub-body .cm_empty{letter-spacing:var(--cm-body-ls);}


/* ── 17-30. 사다리 밖 줄 높이의 마지막 자리 ───────────────────
   [SPEC0828-R3] 실측 : 16px 줄 높이가 일곱 값(16·19.2·20·22.4·24·26·27.2),
   13px 이 여섯 값(13·16.9·20·22·23.4·26)이었다. 시트 쪽은 각 파일에서 고쳤고,
   여기는 그릇(상속)으로도 닿지 않는 남은 부품만 이름으로 적는다.
   되돌리려면 이 절을 지운다. */
body.hub-body .hub-chips__lb{line-height:var(--cm-lh-body);}
body.hub-body .hub-chips__nt,
body.hub-body .hub-mile__nt,
body.hub-body .hub-ft__cp,
body.hub-body .hub-ft__note{line-height:var(--cm-lh-tail);}


/* ── 17-31. 가림막 ──────────────────────────────────────
   [SPEC0828-R3] 렌더 결과에 팔레트 밖 색은 rgba(0,0,0,.72) 하나뿐이고 그것은
   /feed/ 모달 가림막이다. 이름을 붙여 「가림막 전용」임을 문서로 남긴다 —
   community.css 가 값을 갖고 있으므로 여기서는 토큰을 물리기만 한다.
   #2A2E35 는 렌더 결과에 0건이다(면은 --cm-surf-2 · 선은 --cm-edge 로 이미 내려았다). */
body.hub-body .cm_modal_dim{background:var(--cm-scrim);}


/* ── 17-32. [LAYOUT0828] 폭 위계 · 선 기반 UI ──────────────────────────────
   무엇을 :
   (1) 블록마다 다른 폭을 세운다 — 히어로 754 · 8칸 722 · 배너 900 · 본문 1150 · 셸 1248.
       1920px 에서 좌우 480px 씩 비던 것이 336px 이 된다.
   (2) 1px 사면 테두리 카드를 걷고 밑줄 한 줄(항목 구분) · 세로선 하나(칸 구분)로 가른다.
   (3) 1열 세로 스택을 2열 격자로 편다. 접는 지점은 600px 하나뿐이다.
   왜 : 지금 화면이 「모바일 레이아웃을 넓은 화면에 늘려 놓은 모습」이라는 대표 지적.
        같은 폭 · 같은 테두리 카드가 세로로만 쌓여 좌우가 죽어 있었다.
   새 색을 한 개도 만들지 않았다 — 새로 긋는 선은 전부 --cm-rule(= --cm-dim #555D6D).
   이 절이 파일 끝에 오는 이유 : 앞 절들의 같은 이름 규칙을 한 자리에서 덮어
   되돌릴 때 이 절만 지우면 되게 하려는 것이다. 그래서 16절(1024/600)의 몫도
   이 절 안에 같은 분기로 다시 적는다 — 앞 분기만 고치면 이 절이 이겨 버린다.
   되돌리려면 이 절을 통째로 지우고 :root 의 [LAYOUT0828] 주석대로 토큰을 되돌린다. */

/* ── (1) 랜딩 히어로 754 — 제목 · 검색바 · 칩의 왼쪽 끝을 한 선에 세운다 ──
   랜딩 한정 선택자로 .hub-main:has(> .hub-seek) 를 쓴다 : .hub-seek 사용처는
   index.html 한 곳뿐이다(9창 grep 확인). 랜딩에 body 식별 클래스가 없어
   구조로 한정한다. 롤링 단어(.hub-ttl__vis · .hub-roll)의 안쪽은 건드리지 않는다 —
   여기서 정하는 것은 제목 블록의 폭 · 정렬뿐이다. */
.hub-main:has(> .hub-seek) > .hub-head,
.hub-main:has(> .hub-seek) > .hub-seek,
.hub-main:has(> .hub-seek) > .hub-chips{
  max-width:var(--cm-hero-w);
  margin-left:auto;
  margin-right:auto;
}
.hub-search{max-width:var(--cm-hero-w);}
.hub-chips{max-width:var(--cm-hero-w);}
/* 히어로는 한 덩어리다 — 제목 → 검색 24 · 검색 → 칩 24 로 안을 좁게 묶는다.
   묶음 밖(칩 → 다음 블록)은 --cm-block-gap 64 가 벌린다. */
.hub-main > .hub-seek{margin-top:var(--cm-gap-l);}
.hub-main > .hub-chips{margin-top:var(--cm-gap-l);}

/* ── (2) 랜딩 블록별 폭 ─────────────────────────────────────────────
   8칸 722(카드 없음) → 배너 900(랜딩에서 유일하게 면을 갖는다) → 피드 1150.
   랜딩의 다른 어떤 블록에도 background 를 주지 마라. */
/* 마일리지 안내 한 장 = 배너. 랜딩의 section.hub-box 중 8칸이 아닌 것 하나뿐이다.
   「3만 마일리지」 + 「부가서비스 할인에만 사용 · 현금 환급 및 양도 불가」 병기 문자열은
   마크업 그대로다 — 여기서는 폭 · 면 · 안여백만 정한다. */
/* [2026-08-29] 이 두 규칙은 랜딩에 section.hub-box 가 「8칸 하나 + 배너 하나」뿐이던
   때의 것이다. 그 전제가 둘 다 깨졌다 —
     · nav.hub-ics 는 hub-main 의 직계 자식이라 :has(.hub-ics) 는 매칭 0이다.
     · 마일리지 배너는 section.hub-mile 로 빠져 942행에 제 규칙을 갖고 있다.
   그 상태에서 랜딩에 내용 블록(마감 공고 · 미리 갖출 서류 · 도구)이 들어오자
   :not(:has(.hub-ics)) 가 그 셋을 전부 900px 네이비 카드로 만들었다.
   바로 위 주석이 「랜딩의 다른 어떤 블록에도 background 를 주지 마라」고 적은 그 규칙을
   스스로 어긴 것이다. 배너 규격(900 · 면 · 73px 안여백)은 .hub-mile 이 이미 갖고 있으므로
   여기서는 지운다. 랜딩 내용 블록은 다른 창과 같은 레인 폭(1102)으로 선다. */
/* 광고 지면 안내 — 면을 주지 않는다. 배너와 같은 900 레인에 세워 폭을 맞춘다. */
.hub-main:has(> .hub-seek) > aside.hub-box{
  max-width:var(--cm-ad-w);
  margin-left:auto;margin-right:auto;
}
/* 피드 미리보기 — 랜딩에서 가장 넓은 레인. 당근 8칸→섹션 제목 88px 실측. */
.hub-main > .hub-tr{margin-top:88px;}

/* ── (3) 카드 해체 — 9창 공통 ──────────────────────────────────────
   면(--cm-surf) + 사면 테두리 + 머리띠 면 세 겹이 같은 일을 하고 있어 화면이
   상자의 나열이 됐다. 「여기서 새 묶음이 시작한다」는 밑줄 한 줄이 말한다.
   카드를 남기는 곳은 조문 차례(cm_toc) 둘 · 잔액 카드 하나 · 검색바 · 칩 · 버튼뿐이다. */
.hub-box{
  background:none;
  border:0;
  border-radius:0;
  overflow:visible;
}
/* [LAYOUT0828-R2] 무엇을 : 이 규칙의 선택자에 별칭 다섯을 더해 「섹션 머리」 이름을 하나로 모았다.
   왜 : 실측에서 .hub-box__hd · .blk_hd · .pt-w__ttl · .cm_toc__h · .tl-head 의 **계산값은 이미
        같은데**(높이 41~42 · 배경 투명 · 아래선 1px · padding 0 0 12px) 이름이 다섯이라
        회차마다 다시 갈렸다. 값이 아니라 이름을 모으는 작업이라 9창 화면은 거의 그대로다.
        규격이 별칭으로 적은 .tl-head 는 **여기서 뺐다** — 실측 결과 그것은 섹션 머리가 아니라
        /tools/ 의 **h1 래퍼**(<div class="tl-head hub-head">, 빵부스러기 + h1 + 설명)다.
        묶으면 h1 이 space-between 으로 오른쪽 끝까지 밀려 왼쪽 축(409)에서 벗어난다
        (1920 촬영에서 눈으로 확인했다). 머리 래퍼 이름은 12절 · 17-13 이 따로 갖는다.
        .cm-band 는 규격이 정한 **정식 이름**이다 — 지금 9창 마크업에 0건이고, /guide/ 처럼
        머리 클래스가 없는 창이 이 이름을 붙이는 순간 여기에 걸린다.
        이 규칙이 hub.css 12절의 `.hub-box__hd{background:var(--cm-surf-2)}` 잔재도 덮어 끈다.
   되돌리려면 : 선택자를 .hub-box__hd 한 줄로 되돌리고 바로 아래 .pt-w__ttl 예외를 지운다. */
.cm-band,
.hub-box__hd,
.blk_hd,
.pt-w__ttl,
.cm_toc__h{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--cm-gap-xs);
  row-gap:var(--cm-gap-xs);
  min-height:0;
  box-sizing:border-box;
  margin:0;
  padding:0 0 var(--cm-gap-s);
  background:none;
  border:0;
  border-bottom:1px solid var(--cm-rule);
  border-radius:0;
}
/* 사이드 위젯 머리(.pt-w__ttl)의 크기 · 아래 안여백만 portal.css 12절이 갖는다 —
   그 시트가 이 파일 **뒤에** 실려 여기서 적으면 같은 규칙이 두 곳으로 갈린다. */
.hub-box__bd{padding:0;margin-top:var(--cm-gap-l);}
.hub-box__ft{
  padding:var(--cm-gap-m) 0 0;
  margin-top:var(--cm-gap-l);
  border-top:1px solid var(--cm-rule);
}

/* ── (4) 밑줄 목록 행 — 1px 테두리 카드를 대체하는 기본 도구 ────────── */
.hub-item{
  padding:var(--cm-row-py) 0;
  border-bottom:1px solid var(--cm-rule);
}
.hub-item__tx{margin-top:var(--cm-gap-s);max-width:62ch;}
.hub-item__meta{margin-top:var(--cm-gap-s);}

/* ── [RULE0829-1] 목록 부품은 **두 종**뿐이다 ─────────────────────────────
   당근 전수조사 : 목록 카드가 격자형(248.5×328.5)과 행형(1042×110) **두 종**뿐이고
   10개 페이지가 그 둘로만 돌아간다. 창모도 두 종으로 못 박는다.

     ① 행  `.hub-item`  — 아래선 1px · 배경 없음 · radius 0 · 상하 12px
                          제목 16/700 → 설명 16/400 → 꼬리 14/400
                          목록이 「읽는 것」일 때 (공고 · 도구 · 서류 · 업종)
     ② 카드 `.hub-card` — 면 --cm-surf-2 · 1px --cm-edge · radius 10 · 안여백 16
                          제목 20/700 → 값 16/400 → 꼬리 14/400 → 버튼줄(바닥 고정)
                          항목마다 **고를 것이 있을 때** (상품 · 요금제)

   **세 번째 모양을 만들지 마라.** 포크된 창이 각자 .fr-card · .fd-card 를 만들면
   한 사이트가 아니게 된다. 새 모양이 꼭 필요하면 이 절에 추가하고 이름을 .hub- 로 단다.

   출처 : market/index.html 인라인의 .mk-card 를 그대로 셸로 올린 것이다(값 변경 없음).
   되돌리려면 이 절을 지우고 그 창 인라인에 .mk-* 로 되돌린다. */
.hub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--cm-gap-l);}
.hub-card{
  display:flex;flex-direction:column;gap:var(--cm-gap-s);
  padding:var(--cm-gap-m);
  border:1px solid var(--cm-edge);
  border-radius:var(--cm-card-r);
  background:var(--cm-surf-2);
}
/* 한 장만 성격이 다를 때 면을 한 단 낮춰 가른다. 글자 크기 · 굵기로 가르지 마라. */
.hub-card--off{background:var(--cm-bg);}
.hub-card__ttl{margin:0;font-size:var(--cm-fs-h2);font-weight:700;line-height:var(--cm-lh-h2);letter-spacing:var(--cm-h2-ls);color:var(--cm-txt);}
.hub-card__price{margin:0;font-size:var(--cm-fs-body);line-height:var(--cm-lh-body);color:var(--cm-txt-2);}
.hub-card__tx{margin:0;font-size:var(--cm-fs-tail);line-height:var(--cm-lh-tail);color:var(--cm-mut);}
.hub-card__act{margin-top:auto;display:flex;flex-wrap:wrap;gap:var(--cm-gap-xs);padding-top:var(--cm-gap-xs);}
.hub-card__row{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--cm-gap-xs);}
.hub-card__ft{margin:0;padding-top:var(--cm-gap-s);border-top:1px solid var(--cm-edge);font-size:var(--cm-fs-tail);line-height:var(--cm-lh-tail);color:var(--cm-mut);}
@media (max-width:1024px){ .hub-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:600px){  .hub-grid{grid-template-columns:minmax(0,1fr);} }

/* ── [KIT0830] 이미지 자리표시자 `.hub-shot` ──────────────────────────────
   출처 : site-structure-kit 의 `.imgcut` 기법. **팔레트만 창모로 바꿔** 가져왔다.
   왜 이 기법인가 :
     · 순수 CSS 그라디언트다 — 외부 이미지 0장 원칙을 깨지 않는다
     · 「이미지컷」 라벨이 박혀 있어 **가짜 사진으로 오인되지 않는다**
       (창모의 「지어내지 마라」와 어긋나지 않는 유일한 채우기 방식이다)
     · 사진이 실제로 들어오면 이 자리에 <img> 를 얹고 클래스만 떼면 된다

   원본은 청록·갈색 다섯 톤이었다. 창모 팔레트에 그 색이 없으므로
   **무채색 + 창모 블루 한 겹**으로만 다시 짰다. 톤은 세 가지다.
   되돌리려면 이 절을 지운다 — 자리표시자가 사라질 뿐 레이아웃은 그대로다.

   ※ 장식이므로 pointer-events 를 먹지 않는다(키트가 반복 실수로 지적한 항목이다).  */
.hub-shot{
  position:relative;overflow:hidden;
  background:var(--cm-surf-3);
  background-image:linear-gradient(135deg,#EDEFF2 0%,#F7F8F9 46%,#E3E7EC 100%);
  border-radius:8px;
}
.hub-shot::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(circle at 24% 78%,rgba(255,255,255,.70) 0,transparent 44%),
    radial-gradient(circle at 74% 22%,rgba(46,107,255,.14) 0,transparent 50%);
}
/* 라벨 — 「이것은 사진이 아니라 비어 있는 자리」라고 화면이 스스로 말한다 */
.hub-shot::after{
  content:"이미지";position:absolute;right:0;bottom:0;pointer-events:none;
  padding:2px 6px;
  background:rgba(26,28,32,.55);
  color:#FFFFFF;
  font-size:11px;line-height:16px;letter-spacing:0;
}
.hub-shot--t2{background-image:linear-gradient(135deg,#E6EAF0 0%,#F3F5F8 50%,#DCE2EA 100%);}
.hub-shot--t3{background-image:linear-gradient(135deg,#E9EDF4 0%,#F7F8FA 52%,#DFE5EE 100%);}
/* 라벨이 방해되는 자리(작은 썸네일)는 이걸 쓴다 */
.hub-shot--bare::after{display:none;}
/* [LAYOUT0828-R6] `.hub-item:has(> .hub-item__hd){grid-template-columns:minmax(0,1fr) 176px}` 와
   `.hub-box__bd:has(…)::after{right:188px}` 두 규칙을 지웠다.
   무엇을 왜 : ① .hub-item__hd 를 쓰는 창은 /tools/ 하나인데(9창 grep 확인) 그 창 인라인이
        같은 두 값을 (0,4,3)·(0,4,4) 로 한 벌 더 갖고 있어 **같은 규칙이 두 곳으로 갈려**
        있었다. 시트 쪽이 화면에 닿지 않는 중복이라 여기서 뺀다.
        ② 규격은 오른쪽 176px 상태 칸 자체를 폐기하고 상태 배지를 제목 줄 오른쪽 끝
        (margin-left:auto)으로 옮긴다 — 1920 실측에서 그 칸의 오른쪽 약 120px 이 16줄 내내
        비고 제목·설명이 327px 에 눌려 두 줄로 접혔다. 다만 남은 두 규칙은 /tools/ 인라인에
        있어 이 회차(assets 전용)에서는 닿지 못한다. unresolved 에 지울 줄 번호를 적었다.
   되돌리려면 : 위 두 규칙을 이 자리에 되살린다. */

/* ── (5) 2열 목록 — 항목이 3개 이상인 평범한 목록은 2열로 편다 ────────
   상태 칸이 붙는 /tools/ 목록(.hub-item__hd 를 가진 행)은 제외한다.
   .hub-cols 안(열 폭 약 550)의 목록도 제외 — .hub-main 직계 사슬로 한정했다.
   마지막 행의 밑줄만 끈다 : 짝수면 끝의 둘, 홀수면 마지막 하나(전역 :last-child 가 맡는다). */
.hub-main > .hub-box > .hub-box__bd > .hub-list:not(:has(.hub-item__hd)):has(> .hub-item:nth-child(3)){
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:var(--cm-gap-2xl);
  row-gap:0;
}
.hub-main > .hub-box > .hub-box__bd > .hub-list:not(:has(.hub-item__hd)):has(> .hub-item:nth-child(3)) > .hub-item:nth-last-child(2):nth-child(odd){
  border-bottom:0;
}

/* ── (6) 랜딩 피드 2열 × 밑줄 행 ──────────────────────────────────── */
.hub-tr__hdr{margin-bottom:var(--cm-gap-xs);}
.hub-tr__nt{margin-bottom:var(--cm-head-gap);}
/* [DAANGN0829] 폭이 레인 전체(1102)였다. 전수조사 실측 : 당근 「지금 뜨는 동네 이야기」는
   **960 폭 · 2열 × 456 · 행 80.75** 로 위의 아이콘 줄보다 **좁다**. 목록이 레인을 꽉 채우면
   랜딩이 「목록 페이지」로 읽힌다 — 좁혀야 「맛보기」가 된다. 되돌리려면 max-width 줄을 지운다. */
.hub-tr{max-width:960px;margin-left:auto;margin-right:auto;}
.hub-tr__ls{
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:var(--cm-gap-2xl);
  row-gap:0;
}
.hub-tr__row{
  min-height:0;
  padding:var(--cm-row-py) 0;
  background:none;
  border:0;
  border-bottom:1px solid var(--cm-rule);
  border-radius:0;
}
.hub-tr__ls > .hub-tr__row:last-child,
.hub-tr__ls > .hub-tr__row:nth-last-child(2):nth-child(odd){border-bottom:0;}
.hub-tr__more{margin-top:var(--cm-gap-l);}

/* ── (7) 아이콘 8칸 — 카드 없이 세로선으로 가른다 ────────────────────
   당근 8칸에는 테두리 · 배경 · 카드가 없다. 칸 64 고정 · gap 30 → 합 722.
   히어로 754 보다 32px 좁아 「검색 → 진입점」이 안으로 한 단 좁아지는 계단이 생긴다.
   ※ index.html 293행 nav 의 인라인 style="border:0;border-radius:0" 은 이제 같은 말을
     두 곳에서 하는 것이라 그 창 담당이 지워도 된다(값이 같아 화면은 갈리지 않는다). */
.hub-ics{
  grid-template-columns:repeat(8,var(--cm-ic-col));   /* [2026-09-03 GEN3] 인증 칸으로 다시 8 */
  column-gap:var(--cm-ic-gap);
  row-gap:0;
  max-width:var(--cm-ics-w);
  margin:var(--cm-gap-l) auto 0;
  /* [SPEC0829] padding:0 이었다. 8번 칸의 보조문구가 상자 밖(top:75px)에 걸리므로
     그 한 줄(13px/20px)만큼 아래를 비워 둔다. 되돌리려면 padding:0 으로. */
  padding:0 0 var(--cm-lh-tail);
  background:none;
  border:0;
  border-radius:0;
}
/* [SPEC0829] grid-template-rows:44px 20px 20px 였다 — 44+20+20+8+8 = 100 이라 실측(75)보다
   25px 두꺼웠고, 「검색 → 진입점」 사이 밀도가 성기었다. 보조문구 행을 흐름에서 빼고
   44 + 8 + 20 = 72 두 행으로 줄인 뒤 상자를 75 에 못 박는다(align-content:start 라
   남는 3px 은 아래에 남는다). 되돌리려면 세 행 · height 삭제로 되돌린다. */
/* [DAANGN0829] grid-template-rows:44px 20px 였다. 전수조사 실측 : 타일 48 · 라벨 lh19.
   48 + 8 + 19 = 75 로 --cm-ic-h(75) 와 정확히 맞는다. 되돌리려면 44px 20px 로. */
.hub-ic{
  position:relative;
  grid-template-rows:48px 19px;
  row-gap:var(--cm-gap-xs);
  height:var(--cm-ic-h);
}
/* 보조문구(「별도 로그인」 — 8번 칸 하나뿐)는 상자 밖에 건다.
   44px 원 + 13px 두 줄은 어떤 배치로도 75px 에 들어가지 않는다. 흐름에서 빼면
   여덟 칸이 모두 정확히 64×75 로 서고, 문구도 잘리지 않는다.
   자리는 .hub-ics 의 padding-bottom 이 비워 둔다. */
.hub-ic__sub{
  position:absolute;
  left:0;
  right:0;
  top:var(--cm-ic-h);
  /* [RESTORE0830] 넛지 꼬리표가 「별도 로그인」(6자) → 「창모 계정으로 연결」(9자)로 길어져
     117px 이 되었다. 이 문구는 left:0/right:0 로 칸 폭에 이미 묶여 있는데 위쪽 절이
     white-space:nowrap 을 걸어 두어 칸을 넘고 문서가 가로로 24~29px 넘쳤다.
     nowrap 을 풀어 칸 안에서 접히게 한다. 두 줄이 되므로 .hub-ics 가 비워 두는
     아래 자리도 두 줄만큼으로 늘린다(바로 아래 줄).
     되돌리려면 이 두 줄과 .hub-ics 의 padding-bottom 을 지운다. */
  white-space:normal;
  line-height:16px;
}
.hub-ics{padding-bottom:calc(16px * 2);}
/* [DAANGN0829] 44px 원 · 글리프 20 이었다. 전수조사 실측 : 타일 48×48 · radius 16px ·
   바탕 rgb(243,244,245)(=--cm-surf-3) · 글리프 인라인 SVG 24×24.
   당근은 타일마다 색을 달리 칠하지 않는다 — 판은 무채색이고 색은 글리프가 낸다.
   되돌리려면 44/44/50%/20 으로. */
.hub-ic__d{
  width:48px;height:48px;
  border-radius:16px;
  /* [DARK복원 0829] background:var(--cm-surf-3) 를 지웠다 — 라이트에서 타일 바탕이던 값이
     다크에서는 **호버 면**이라, 두면 기본과 호버가 같아져 호버가 no-op 이 된다.
     기본 바탕은 위 .hub-ic__d 규칙의 --cm-surf-2 를 그대로 쓴다. */
  /* [DAANGN0829] 글리프가 --cm-txt(검정)를 상속하고 있었다. 당근은 판을 무채색으로 두고
     **색을 글리프가 낸다**. 창모 팔레트에는 검정 · 파랑 · 회색뿐이므로 창모 블루를 쓴다
     (주황 금지). 라벨은 .hub-ic 의 --cm-txt 를 그대로 상속하므로 영향받지 않는다. */
  color:var(--cm-accent);
  /* [KIT0830] 다크 되돌리기(DARK복원 0829)가 이 줄을 지우면서 타일 바탕이 밑 규칙의
     --cm-surf-2(#F7F8F9)로 떨어져 있었다. 당근 실측 타일색은 --cm-surf-3(#F3F4F5)다.
     호버는 --cm-surf-4 이므로 기본이 surf-3 이어야 한 단 차가 난다. */
  background:var(--cm-surf-3);
  /* 판이 완전히 평평해 여덟 칸이 배경에 잠겨 있었다. 위 안쪽에 흰 실선 한 겹,
     아래에 아주 옅은 그늘 한 겹만 얹는다 — 그늘을 검정이 아니라 **바탕 색조**로 낸다.
     호버는 여전히 background-color 하나뿐이라 모션 규격을 깨지 않는다.
     되돌리려면 이 box-shadow 한 줄을 지운다. */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(26,28,32,.06);
}
.hub-ic__d svg{width:24px;height:24px;}
/* [DAANGN0829] 13px/700 이었다. 전수조사 실측 : 14px / 400 / lh 19 / rgb(26,28,32).
   6자(「마일리지마켓」 ≈ 84px)는 64px 칸을 넘지만 gap 30 안으로 흘러 겹치지 않는다 —
   당근도 「알바/과외」가 같은 방식으로 칸을 넘는다. 모바일(600 이하)은 13px 로 내린다.
   되돌리려면 --cm-fs-tail / --cm-lh-tail / 700 으로. */
.hub-ic__lb{
  font-size:14px;
  line-height:19px;
  font-weight:400;
  letter-spacing:-.02em;
}
/* [DAANGN0829] 칸 사이 세로선(1px × 56)을 지운다 — 전수조사 실측에 당근 아이콘 줄에는
   구분선이 없다. 8칸이 균등 배치될 뿐이다. 선이 있으면 진입점 여덟이 「표」로 읽힌다.
   되돌리려면 .hub-ic::after 로 right:calc(var(--cm-ic-gap)/-2);top:6px;width:1px;height:56px;
   background:var(--cm-rule) 를 되살린다. */

/* ── (8) 2열 판 · 왼쪽 세로선 큰 항목 ──────────────────────────────
   키트에서 「카드」라 불리는 것조차 상자가 아니라 border-left 1px + padding-left 두 줄이다. */
.hub-cols{
  column-gap:var(--cm-gap-2xl);
  row-gap:var(--cm-block-gap);
}
/* [LAYOUT0828-R6] `padding-left:40px; border-left:1px solid` 두 줄이었다.
   왜 : 오른쪽 칸에 선과 안여백을 직접 걸면 그 칸의 글자가 41px 안으로 밀려
        (1920 실측 : 왼쪽 열 글자 409 · 오른쪽 열 글자 1009) 두 열의 축이 어긋난다.
        선은 칸 안이 아니라 **거터 48 의 정중앙**에 서야 한다 — 자리를 차지하지 않는
        가상요소로 내리면 글자는 984 에 그대로 서고 선은 960 에 선다.
        선 높이가 내용 높이만큼만 그어지는 것도 이 방식의 이득이다(align-items:start).
   되돌리려면 : 이 덩이를 지우고 위 두 줄을 되살린다. */
.hub-cols > .hub-box{
  padding-left:0;
  border-left:0;
}
/* [LAYOUT0828-R2] 무엇을 : 첫 열(홀수 칸)의 세로선 · 왼쪽 안여백을 뺐다.
   왜 : 열과 열을 가르는 선은 **둘째 열에만** 준다. 두 열 모두에 주면 첫 열의 글자 왼쪽 끝이
        레인 축에서 41px 안으로 들어가 한 화면에 왼쪽 축이 둘 생긴다
        (/fund/ 실측 1920 : 레인 409 인데 첫 열 머리가 450 이었다).
   되돌리려면 : 이 두 줄을 지운다. */
/* [LAYOUT0828-R6] `.hub-cols > .hub-box:nth-child(odd){padding-left:0;border-left:0}` 한 줄이었다.
   바로 위 규칙이 두 값을 0 으로 내려 이 줄은 아무 일도 하지 않는 죽은 규칙이 됐다. 지운다. */

/* ── (9) 읽는 줄 62ch — 폭을 늘린 것은 블록을 좌우로 벌리기 위해서지
   한 줄을 늘리기 위해서가 아니다. */
.hub-lead,
.hub-note,
.hub-colnt{max-width:62ch;}

/* ── (10) 푸터 4열 1248 ────────────────────────────────────────────
   사업자 정보 6종 · 법정 링크(/terms/ · /privacy/) · 꼬리 고지의 **문자열과 값은
   한 글자도 건드리지 않았다**. 폭 · 간격만 바꾼다. */
.hub-ft{padding:56px 0 64px;}
.hub-ft__cols{
  column-gap:var(--cm-gap-xl);
  row-gap:var(--cm-block-gap);
  padding-bottom:var(--cm-note-gap);
  border-bottom:1px solid var(--cm-rule);
}
.hub-ft__h{margin:0 0 var(--cm-gap-l);line-height:24px;}
.hub-ft__ls{gap:0;}
.hub-ft__ls a,
.hub-ft__ls span{font-size:16px;line-height:28px;}
.hub-ft__co{margin-top:var(--cm-gap-xl);}
.hub-ft__biz{
  margin-top:var(--cm-gap-xl);
  column-gap:var(--cm-gap-2xl);
  row-gap:var(--cm-gap-s);
}
.hub-ft__legal{margin-top:var(--cm-gap-l);}
.hub-ft__note{margin-top:var(--cm-note-gap);}
.hub-ft__cp{margin-top:var(--cm-gap-l);}

/* ── (10-b) portal 3창의 본문 레인을 시트로 되찾는다 ────────────────
   /feed/ 인라인의 `body.is-cm .pt-wrap{max-width:var(--cm-top-w)}` (0,2,0) 과
   /my/ 인라인의 `.pt-wrap--norail{max-width:var(--cm-top-w)}` (0,1,0) 이
   두 창의 본문을 셸 폭(1248)에 붙들고 있다. 두 줄 다 창 HTML 안에 있어
   이번 회차에서 지울 수 없으므로, 무게 (0,2,1) · (0,3,0) 으로 시트가 이긴다.
   ※ 두 창 담당이 그 인라인 줄을 지우면 이 덩이의 무게를 .pt-wrap · .pt-col-l 로 줄여라 —
     그때까지는 같은 규칙이 두 곳에 있는 상태다.
   되돌리려면 이 덩이를 지운다. */
body.hub-body main.pt-wrap{max-width:var(--cm-main-w);}
/* /privacy/ 는 클래스 없는 <main> 에 인라인으로 max-width:960px 을 적고 있어 혼자 960 으로
   남는다(0,0,1). 여기 (0,2,1) 로 본문 레인을 8창과 같은 1150 에 맞춘다 —
   그 창의 --doc-w(912) 는 건드리지 않는다. 조문 본문은 한 글자도 손대지 않았다.
   ※ 그 창 담당이 인라인 main{max-width:960px} 을 지우면 이 두 줄도 지워라. */
body.hub-body main:not([class]){max-width:var(--cm-main-w);}
body.hub-body .pt-wrap .pt-col-l{
  grid-template-columns:minmax(0,1fr) var(--pt-side);
  column-gap:var(--pt-gutter);
}
body.hub-body .pt-wrap .pt-side{gap:0;}

/* ── (11) [삭제 2026-08-29] 등장 문법(.rv / .rv-ready) 한 벌을 지웠다 —
   27개 창 마크업에 class="rv" 가 0건이고, 당근 실측에 없는 모션이다.
   되살리려면 실측 근거를 먼저 대라. 토큰(--cm-rv-*)과 hub-shell.js 의 관찰자는
   남겨 두었다 — 관찰자는 .rv 가 0건이면 아무 일도 하지 않는다. ────────────── */

/* ── (12) 1024 이하 — 레인만 풀고 열은 접지 않는다 ────────────────── */
@media (max-width:1024px){
  .hub-ics{
    grid-template-columns:repeat(8,minmax(0,1fr));
    /* [SPEC복원 0829] var(--cm-gap-l)(24px) 였다 — 규격에 없는 중간값이다.
       실측 규격의 8칸 간격은 30px 하나뿐이므로 이 분기에서도 30px 을 쓴다.
       열은 minmax(0,1fr) 이라 601~1024 구간에서 가로 넘침이 생기지 않는다
       (601px 기준 열 피치 72.9 > 타일 48). 4×2 접힘은 600 이하 분기가 맡는다. */
    column-gap:var(--cm-ic-gap);
    row-gap:0;
    /* [SPEC0829] padding:0 이었다. 8칸 그대로이므로 보조문구 자리(13px/20px)도 그대로 둔다. */
    padding:0 0 var(--cm-lh-tail);
  }
  .hub-ic::after{right:calc(var(--cm-gap-l) / -2);}
  /* 16절이 여기서 되돌리던 /tools/ 2칸 격자 · 세로 레일을 이 절에서 다시 적는다 */
  .hub-item:has(> .hub-item__hd){display:block;}
  .hub-item:has(> .hub-item__hd) > .hub-item__meta{
    margin-top:var(--cm-gap-s);padding-top:0;padding-left:0;border-left:0;
  }
  .hub-box__bd:has(> .hub-list > .hub-item > .hub-item__hd)::after{display:none;}
  /* (10-b) 가 17-24 를 덮으므로 2단 접힘을 여기서 다시 적는다 */
  body.hub-body .pt-wrap .pt-col-l{
    grid-template-columns:minmax(0,1fr);
    row-gap:var(--cm-block-gap);
  }
  /* 사이드가 본문 아래로 내려가면 위젯이 2열로 선다 */
  body.hub-body .pt-wrap .pt-side{
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:var(--cm-gap-2xl);
  }
}

/* ── (13) 600 이하 — 여기 한 곳에서만 접는다 ──────────────────────
   열 수가 바뀌면 어떤 선이 유효한지도 바뀐다 : 세로선을 끄고 밑줄로 바꿔 낀다. */
@media (max-width:600px){
  .hub-box__hd{padding:var(--cm-gap-xs) 0 var(--cm-gap-s);}
  .hub-main > .hub-seek,
  .hub-main > .hub-chips{margin-top:var(--cm-gap-m);}
  .hub-main > .hub-tr{margin-top:48px;}
  /* 아이콘 4 × 2 — 세로선을 끄고 첫 행 밑에 밑줄을 넣는다 */
  .hub-ics{
    grid-template-columns:repeat(4,minmax(0,1fr));
    column-gap:var(--cm-gap-s);
    row-gap:var(--cm-gap-xl);
    padding:0;
  }
  .hub-ic::after{display:none;}
  /* [SPEC0829] 64×75 는 넓은 화면 8칸의 규격이다. 이 폭에서는 4×2 로 접히고 칸이 1fr 로
     늘어나며 첫 행에 밑줄 여백까지 붙으므로, 높이 고정과 보조문구 절대배치를 함께 되돌린다.
     되돌리려면 아래 두 줄을 지운다. */
  .hub-ic{height:auto;}
  .hub-ic__sub{position:static;}
  .hub-ic:nth-child(-n+4){
    border-bottom:1px solid var(--cm-rule);
    padding-bottom:var(--cm-gap-l);
  }
  /* 2열 → 1열. 1열에서는 마지막 한 줄만 밑줄을 끈다 */
  .hub-tr__ls{grid-template-columns:minmax(0,1fr);column-gap:0;}
  .hub-tr__ls > .hub-tr__row:nth-last-child(2):nth-child(odd){
    border-bottom:1px solid var(--cm-rule);
  }
  .hub-main > .hub-box > .hub-box__bd > .hub-list:not(:has(.hub-item__hd)):has(> .hub-item:nth-child(3)){
    grid-template-columns:minmax(0,1fr);
  }
  .hub-main > .hub-box > .hub-box__bd > .hub-list:not(:has(.hub-item__hd)):has(> .hub-item:nth-child(3)) > .hub-item:nth-last-child(2):nth-child(odd){
    border-bottom:1px solid var(--cm-rule);
  }
  /* 세로선 → 밑줄 */
  .hub-cols > .hub-box{
    padding-left:0;
    padding-bottom:var(--cm-gap-xl);
    border-left:0;
    border-bottom:1px solid var(--cm-rule);
  }
  .hub-cols > .hub-box:last-child{padding-bottom:0;border-bottom:0;}
  .hub-ft{padding:40px 0 48px;}
  .hub-ft__cols{row-gap:var(--cm-gap-xl);padding-bottom:var(--cm-gap-xl);}
  body.hub-body .pt-wrap .pt-side{grid-template-columns:minmax(0,1fr);column-gap:0;}
}


/* ── 17-33. [LAYOUT0828-R2] 안쪽값 한 벌 · 읽는 줄 720 · 3열 예외 ──────────
   무엇을 :
   (a) 읽는 줄을 720px 한 값으로 모은다 — 62ch 와 720px 두 벌을 끝낸다.
       구현은 max-width 가 아니라 padding-right 다(선은 레인 전폭을 가로지른다).
   (b) 진입 항목(cm-ent) 한 벌을 공용 시트가 갖는다.
   (c) 항목이 정확히 셋인 목록은 3열로 편다 — 2열에 두면 오른쪽 아래가 네 번 연속 빈다.
   (d) /mileage/ 만 24px 왼쪽에 나와 있던 본문 레인을 나머지 8창 축(x=409)에 세운다.
   왜 : 지난 회차에 「1150」이 어떤 항목에서는 바깥값 · 어떤 항목에서는 안쪽값으로 쓰여
        창이 갈렸다. 이 절의 모든 폭은 **안쪽값**이고 그 이름이 --cm-lane-w(1102) 다.
   되돌리려면 : 이 절을 통째로 지우고 :root 의 [LAYOUT0828-R2] 주석대로 토큰을 되돌린다. */

/* ── (a) 읽는 줄 720px ─────────────────────────────────────────────
   실측(1920) : 푸터 ※ 문단이 9창 전부 1200px 로 흘렀다 — 사이트에서 읽는 줄을 넘는
   유일한 자리다. 본문 · 설명 · 꼬리 고지 · 조문 본문을 한 값에 모은다.
   max-width 를 쓰면 선까지 720 에서 끊긴다(/terms/ 가 그랬다). padding-right 면
   글자만 720 에서 접히고 border-top · border-bottom 은 레인 전폭을 가로지른다 —
   /privacy/ 가 이미 쓰던 방식이고 그쪽이 옳다.
   max(0px, …) 이므로 그릇이 720 보다 좁아지면 저절로 0 이 된다(2열 · 사이드 · ≤600).
   무게가 body.hub-body 로 한 단 올라간 이유 : 12절의 `.hub-box__bd > .hub-colnt{max-width:62ch}`
   (0,2,0) 과 /terms/ 인라인의 `article p,article li{max-width:720px}`(0,0,2) 를 넘어야 한다.
   ※ <article> 안 조문 **본문은 한 글자도 건드리지 않았다** — 셸·여백만이다. */
/* [LAYOUT0828-R3] 무엇을 : 이 목록에 .hub-tr__nt(랜딩) · .cm_dates(terms · privacy) ·
     p.sec(privacy 조문 문단) 셋을 더했다.
   왜 : 1920 실측에서 720 을 넘어 흐르던 자리가 이 셋뿐이었다 —
     index 의 p.hub-tr__nt 1102px · terms 의 p.cm_dates 1102px · privacy 의 p.sec.cols 1102px ×2.
     한 줄이 1102px 이면 한 행을 읽고 다음 행 첫 글자로 눈이 돌아오지 못한다.
     구현은 max-width 가 아니라 padding-right 다 — 글자만 720 에서 접히고 위아래 선은
     레인 전폭을 그대로 가로지른다. <article> 안 조문 **본문 글자는 건드리지 않는다**.
   되돌리려면 : 아래 선택자 목록에서 이 세 줄(.hub-tr__nt · .cm_dates · .sec)을 지운다. */
body.hub-body .hub-ft__note p,
body.hub-body .hub-lead,
body.hub-body .hub-note,
body.hub-body .hub-colnt,
body.hub-body .hub-item__tx,
body.hub-body .hub-tr__nt,
body.hub-body .cm_dates,
body.hub-body .sec,
body.hub-body .cm-read,
body.hub-body article p,
body.hub-body article li{
  max-width:none;
  padding-right:max(0px, calc(100% - var(--cm-read-w)));
}
/* 푸터 ※ 고지는 문단이 여럿이다 — 문단 사이만 12px 로 띄운다. 문구는 그대로다. */
body.hub-body .hub-ft__note p + p{margin-top:var(--cm-gap-s);}

/* ── (b) cm-ent — 아이콘 | 세로선 | (라벨 → 제목 → 설명) ────────────
   지시서 4항의 항목 구성 한 벌. 지금 이 문법을 쓰는 곳은 랜딩 배너 안(.cm-ent) 하나이고
   그 창이 같은 값을 인라인으로 갖고 있다 — 창 담당이 그 덩이를 지우면 이 규칙이 받는다.
   아이콘이 없는 항목은 같은 44px 원 안에 두 자리 번호를 넣는다(.cm-ent__no). */
.cm-ent{
  display:grid;
  grid-template-columns:var(--cm-ent-ico) minmax(0,1fr);
  column-gap:var(--cm-gap-l);
  align-items:start;
}
.cm-ent__ic{
  display:flex;align-items:center;justify-content:center;
  width:var(--cm-ent-ico);height:var(--cm-ent-ico);
}
/* 아이콘도 없고 번호만 있는 항목의 대체 규칙 — 번호를 원 **밖** 텍스트로 두지 마라.
   ※ 아직 이 클래스를 붙인 창이 없다(마크업 0건). /guide/ 4단계 · /fund/ 자금 갈래 ·
     /feed/ 4단계가 .cm-step__no 등 창별 이름을 쓰고 있어, 그 창 담당이 이름을 이쪽으로
     옮기면 그날부터 세 창이 같은 문법이 된다. 규칙만 먼저 자리를 잡아 둔다. */
.cm-ent__no{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;
  background:var(--cm-surf-2);
  border-radius:50%;
  color:var(--cm-accent-soft);
  margin:0;
  font-size:var(--cm-fs-h2);line-height:var(--cm-lh-h2);font-weight:700;
  font-variant-numeric:tabular-nums;
}
.cm-ent__ic svg{width:20px;height:20px;display:block;color:var(--cm-accent-soft);}
.cm-ent__bd{
  min-width:0;
  padding-left:var(--cm-gap-l);
  border-left:1px solid var(--cm-rule);
}
.cm-ent__lb{margin:0;font-size:var(--cm-fs-tail);line-height:var(--cm-lh-tail);font-weight:700;color:var(--cm-mut);}
.cm-ent__ttl{margin:var(--cm-gap-xs) 0 0;font-size:var(--cm-fs-h2);line-height:var(--cm-lh-h2);font-weight:700;letter-spacing:var(--cm-h2-ls);color:var(--cm-txt);}
.cm-ent__d{margin:var(--cm-gap-s) 0 0;font-size:var(--cm-fs-body);line-height:var(--cm-lh-body);color:var(--cm-txt-2);padding-right:max(0px, calc(100% - var(--cm-read-w)));}
.cm-ent__x{margin:var(--cm-gap-m) 0 0;}
.cm-ent + .cm-ent{margin-top:var(--cm-gap-xl);}

/* ── (c) 항목이 정확히 셋인 목록의 3열 예외 — **이번 회차에서는 넣지 않았다** ──
   실측(1920) : /tools/ 의 ul.hub-list 넷이 항목 3개인데 2열(527 + 527)이라
   오른쪽 아래 빈 칸이 네 번 연속 나온다 —「페이지가 덜 만들어진 것처럼 보인다」의 원인이다.
   고치는 자리가 여기가 아닌 이유 : 그 네 목록은 `.hub-item__hd`(상태 칸)를 가진 목록이고,
   /tools/ 인라인이 `…> .hub-list:has(.hub-item__hd){2열}` 과 상태 칸 세로선 한 벌을
   **자기 시트에서** 갖고 있다(tools/index.html:105 · 128 · 147). 공용 시트에서 3열로 덮으면
   같은 규칙이 두 곳으로 갈리고, 열 폭 335 에서 상태 칸 176 을 떼면 글이 159px 이 된다.
   3열은 상태 칸을 행 안 셋째 줄로 내리는 일과 한 묶음이라 그 창에서 함께 해야 한다 —
   unresolved 에 규칙 그대로 적어 두었다. 여기에 죽은 선택자를 남기지 않는다. */

/* ── (d) /mileage/ 의 본문 레인을 9창 왼쪽 축에 세운다 ─────────────
   실측(1920) : 8창이 main 1150@385 · 레인 1102@409 인데 /mileage/ 만 main 1198@361 ·
   레인 1150@385 로 24px 왼쪽에 나와 있었다. 창을 옮길 때 화면이 그만큼 흔들린다.
   원인은 그 창 인라인의 `body.pg main.pt-wrap{max-width:calc(var(--cm-main-w) + var(--pt-pad)*2)}`
   (0,2,1) 한 줄이다. 그 줄은 이 파일 뒤에 실려 있어 (0,2,1) 로는 닿지 않으므로
   body 의 두 클래스를 함께 적어 (0,3,1) 로 누른다. 값은 8창과 같은 --cm-main-w 다.
   ※ /my/ 도 body.hub-body.pg 라 같이 걸리는데 그 창은 이미 1150 이라 화면이 바뀌지 않는다.
   ※ 그 창 담당이 인라인 한 줄을 지우면 이 덩이도 지워라 — 그때까지는 한 규칙이 두 곳에 있다.
   되돌리려면 : 이 한 줄을 지운다(/mileage/ 가 다시 1198 로 나온다). */
body.hub-body.pg main.pt-wrap{max-width:var(--cm-main-w);}

/* ── (e) 600 이하 ────────────────────────────────────────────────
   접는 지점은 여기 한 곳뿐이다. 3열도 여기서만 1열이 된다. */
@media (max-width:600px){
  body.hub-body .hub-main > .hub-box > .hub-box__bd > .hub-list:not(:has(.hub-item__hd)):has(> .hub-item:nth-child(3)):not(:has(> .hub-item:nth-child(4))){
    grid-template-columns:minmax(0,1fr);
  }
  body.hub-body .hub-main > .hub-box > .hub-box__bd > .hub-list:not(:has(.hub-item__hd)):has(> .hub-item:nth-child(3)):not(:has(> .hub-item:nth-child(4))) > .hub-item{
    border-bottom:1px solid var(--cm-rule);
  }
  body.hub-body .hub-main > .hub-box > .hub-box__bd > .hub-list:not(:has(.hub-item__hd)):has(> .hub-item:nth-child(3)):not(:has(> .hub-item:nth-child(4))) > .hub-item:last-child{
    border-bottom:0;
  }
  /* 세로선 → 밑줄 */
  .cm-ent{grid-template-columns:minmax(0,1fr);row-gap:var(--cm-gap-m);}
  .cm-ent__bd{padding-left:0;border-left:0;}
}




/* ── 17-34. [LAYOUT0828-R4] 머리 띠(hub-band) · 칩 4열 · 여백 다섯 값 · 못 여는 컨트롤 ──
   무엇을 : 1920px 에서 화면 위 절반이 검은 바탕 위 754px 한 줄기뿐이던 것을 고친다.
     (1) 9창 공통 **머리 띠** — nav 아래 첫 구간을 전폭 면(--cm-surf)으로 받친다.
     (2) 랜딩 칩 8개를 4열 × 2행 격자(178 × 4 + 14 × 3 = 754)로 못 박는다.
     (3) 세로 간격을 다섯 값(8 · 40 · 24 · 72 · 96)으로 모은다.
     (4) 못 여는 컨트롤(button[disabled] · .cm_cheer)의 버튼 모양을 걷는다.
     (5) terms · privacy 의 2열 상자를 9창 왼쪽 축(x=409)에 세운다.
   왜 : 대표 지시가 못 박은 폭 계단(754 → 900 → 722 → 1102)은 흔들 수 없으므로,
        계단 전체를 전폭 면 하나로 받쳐 583px 이라는 빈 좌우가 「띠 안의 사정」이 되게 한다.
        색은 새로 만들지 않았다 — 당근 실측에서 가장 많이 쓰인 섹션색이 팔레트에
        --cm-surf(#1A1C20) 로 이미 들어와 있고, 띠는 그 별칭 --cm-band-bg 를 읽는다.
   구현 주의 : 창 HTML 을 고칠 수 없는 회차라 <section class="hub-band"> 을 새로 넣지 못한다.
        대신 띠에 드는 블록마다 **자리를 차지하지 않는 가상요소**를 깔고, 그 가상요소의
        box-shadow 를 좌우로 100vmax 뿌린 뒤 clip-path 로 위아래만 잘라 전폭 면을 만든다.
        box-shadow 는 스크롤 영역을 만들지 않으므로 100vw 와 달리 **가로 넘침이 0** 이다
        (유지 항목 8). 가상요소는 position:absolute 라 격자 · flex 부모에서도 칸을 만들지 않는다.
   되돌리려면 : 이 절을 통째로 지운다. 지우면 띠가 사라지고 여백이 회차 3 값으로 돌아간다.
   ※ 마크업이 hub-band 를 갖게 되면 이 절의 가상요소 덩이를 지우고
     .hub-band{width:100%;background:var(--cm-band-bg);border-bottom:1px solid var(--cm-rule)} 와
     .hub-band__in{max-width:var(--cm-shell-w);margin:0 auto;padding:56px var(--cm-pad) 64px} 두
     줄로 바꿔라. 값은 아래 토큰과 같다.                                          */

:root{
  --cm-band-bg:var(--cm-surf);   /* 띠 바닥 — 새 색이 아니라 섹션색의 별칭이다 */
  /* [LAYOUT0828-R6] 56px / 64px 였다. 1400×800 fold 계산이 요구한 값으로 내린다 —
     전 : 아이콘 8칸 줄 top 이 805 라 첫 화면 **밖**이고, 배너가 끝나는 733 부터 800 까지
          67px 이 빈 바탕으로 접혀 「첫 화면 아래가 까맣게 비어 있다」로 읽혔다.
     후 : 제목 154 · 검색 264 · 칩 364 · 배너 590~709 · 아이콘 765~837 · 꼬리 861 · 띠 끝 937.
          y=800 선이 아이콘 줄(765~837) 안에 떨어져 잘린 원판이 스크롤 신호가 된다.
     되돌리려면 56px / 64px 로 되돌린다. */
  --cm-band-pt:48px;             /* 랜딩 띠 위 안여백 */
  --cm-band-pb:56px;             /* 랜딩 띠 아래 안여백 */
  --cm-band-sub-pt:var(--cm-main-pt);  /* 하위 8창 띠 위 = main 위 안여백(32) */
  --cm-band-sub-pb:40px;         /* 하위 8창 띠 아래. 32 + 머리 116 + 40 = 188 */
  --cm-bleed:100vmax;            /* 띠를 좌우로 뿌리는 거리. 100vw 를 쓰지 마라 */
  /* 히어로 묶음 안 24 · 띠 안 묶음 사이 72. 가상요소의 위아래 연장은 이 값의 절반이다 */
  --cm-gap-hero:24px;
  /* [LAYOUT0828-R6] 72px 였다. 위 --cm-band-pt/pb 와 같은 fold 계산이다(히어로↔배너↔아이콘).
     되돌리려면 72px 로. */
  --cm-gap-band:56px;
  --cm-bd-h1:calc(var(--cm-gap-hero) / 2);
  --cm-bd-h2:calc(var(--cm-gap-band) / 2);
  /* ── 여백 다섯 값 : (1) 8 (2) 40(20 + 20 + 1) (3) 24 (4) 72 (5) 96 ──────────
     (4) 를 64 → 72 로 올려 (5) 96 과 확실히 갈린다. 기존 이름은 새 이름의 별칭으로 묶는다 —
     두 이름이 다른 값을 갖는 상태를 만들지 마라.
     되돌리려면 --cm-gap-block 을 64px 로 되돌린다. */
  --cm-gap-block:72px;
  --cm-block-gap:var(--cm-gap-block);
  --cm-gap-row:20px;
  --cm-row-py:var(--cm-gap-row);
  --cm-gap-inner:var(--cm-gap-xs);   /* (1) 8px — 라벨 → 제목 → 설명 → 꼬리 */
  /* [LAYOUT0828-R6] --cm-chip-col:178px 를 지웠다 — 읽는 곳이 랜딩 칩 격자 한 곳뿐이었고
     그 규칙이 내용 폭 flex 로 바뀌어 값이 갈 곳이 없다. 이름을 남겨 두면 다음 회차가
     다시 고정 격자로 되돌아간다.
     --cm-chip-gap 은 14px → 8px(사다리 값)로 **낮춰서 남겼다**. 지우지 못한 이유 :
     guide/index.html:238 의 `.cm-pick__chips{column-gap:var(--cm-chip-gap)}` 이 아직 이 이름을
     읽고 있어, 지우면 그 창의 칩 거터가 0 이 된다(실측으로 확인했다 — 열 폭이 256.5 → 263.5 로
     벌어졌다). 그 창의 칩이 flex-wrap 으로 바뀌는 날 이 줄도 함께 지워라(unresolved 에 적었다).
     되돌리려면 --cm-chip-col:178px 를 되살리고 --cm-chip-gap 을 14px 로 되돌린다. */
  --cm-chip-gap:var(--cm-gap-xs);
  --cm-off-fs:var(--cm-fs-tail);     /* 못 여는 컨트롤이 내려앉는 글자 크기 13px */
  --cm-scroll-mt:24px;               /* 딥링크 착지 여유 — 헤더가 sticky 가 아니다 */
}

/* [LAYOUT0828-R4] <html> 에는 바탕을 주지 않는다 — 바닥은 body 한 곳이 갖는다.
   왜 : /terms/ · /privacy/ 인라인의 `html,body{background:var(--bg)}` (0,0,1) 때문에
        두 창에서만 띠가 보이지 않았다(1920 픽셀 대조로 확인). <html> 에 바탕이 있으면
        body 의 바탕이 캔버스로 올라가지 못하고 **자기 자리에서** 칠해지는데, 그 칠하기는
        음수 층(z-index:-1)보다 뒤라서 띠를 통째로 덮는다.
        여기서 html 의 바탕만 끄면 body 의 --cm-bg 가 다시 캔버스가 되어 9창이 같아진다.
        색은 하나도 바뀌지 않는다 — 두 창의 --bg 와 --cm-bg 는 같은 #16171B 다.
   되돌리려면 이 한 줄을 지운다(그 두 창에서 띠가 사라진다). */
html:root{background:none;}

/* ── (1) 머리 띠 — 자리를 차지하지 않는 전폭 면 ─────────────────────────
   블록에 position:relative 만 주고 **z-index 는 주지 마라**. 쌓임 맥락을 만들면 z-index:-1 인
   가상요소가 그 블록 **자기 배경보다 위**에 놓여, 랜딩 배너의 네이비 면(#1E2A44)을 덮어 지운다
   (1920 촬영에서 눈으로 확인했다). 맥락을 만들지 않으면 가상요소는 뿌리 맥락의 음수 층에 놓여
   body 바닥(캔버스) 위 · 모든 블록 배경 아래에 정확히 깔린다. html 에 background 를 주지 마라 —
   주는 순간 body 배경이 캔버스로 올라가지 못해 이 띠가 그 뒤로 숨는다. */
/* [LAYOUT0828-R5] 무엇을 : 아래 가상요소 띄 세 덩이의 모든 선택자에
   `body:not(:has(section.hub-band))` 를 붙였다.
   왜 : 8창이 이제 진짜 <section class="hub-band"> 마크업을 갖는다 — 같은 일을 두 곳에서
   하면 같은 자리에 같은 색을 두 번 칠하게 되고, 특히
   `.pt-wrap > .pt-col-l > .pt-main` 은 feed · my · mileage 에서 본문 첫 블록을 통째로
   띄로 칠하고 있었다. 마크업이 없는 창(지금은 /tools/ 하나)에만 남긴다.
   ※ /tools/ 에 <section class="hub-band hub-band--sub"> 를 넣으면 이 덩이를 통째로 지워라.
   되돌리려면 세 덩이의 선택자에서 이 접두사를 떼라. */
body:not(:has(section.hub-band)) .hub-main:has(> .hub-seek) > .hub-head,
body:not(:has(section.hub-band)) .hub-main:has(> .hub-seek) > .hub-seek,
body:not(:has(section.hub-band)) .hub-main:has(> .hub-seek) > .hub-chips,
body:not(:has(section.hub-band)) .hub-main:has(> .hub-seek) > nav.hub-ics,
body:not(:has(section.hub-band)) .hub-main:has(> .hub-seek) > .hub-ics__note,
body:not(:has(section.hub-band)) .hub-main:not(:has(> .hub-seek)) > .hub-head,
body:not(:has(section.hub-band)) main:not([class]) > .hub-head,
body:not(:has(section.hub-band)) .pt-wrap > .pt-col-l > .pt-main{
  position:relative;
}
body:not(:has(section.hub-band)) .hub-main:has(> .hub-seek) > .hub-head::before,
body:not(:has(section.hub-band)) .hub-main:has(> .hub-seek) > .hub-seek::before,
body:not(:has(section.hub-band)) .hub-main:has(> .hub-seek) > .hub-chips::before,
body:not(:has(section.hub-band)) .hub-main:has(> .hub-seek) > nav.hub-ics::before,
body:not(:has(section.hub-band)) .hub-main:has(> .hub-seek) > .hub-ics__note::before,
body:not(:has(section.hub-band)) .hub-main:not(:has(> .hub-seek)) > .hub-head::before,
body:not(:has(section.hub-band)) main:not([class]) > .hub-head::before,
body:not(:has(section.hub-band)) .pt-wrap > .pt-col-l > .pt-main::before{
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;          /* 장식 오버레이는 클릭을 먹지 않는다 */
  left:0;right:0;
  top:calc(-1 * var(--cm-bd-t, 0px));
  bottom:calc(-1 * var(--cm-bd-b, 0px));
  background:var(--cm-band-bg);
  box-shadow:0 0 0 var(--cm-bleed) var(--cm-band-bg);
  clip-path:inset(0 calc(-1 * var(--cm-bleed)));
}
/* 띠 아래 선 한 줄 — 띠가 끝나는 블록에만 단다. 카드가 아니라 띠이므로 좌우 선은 없다. */
body:not(:has(section.hub-band)) .hub-main:has(> .hub-seek) > .hub-ics__note::after,
body:not(:has(section.hub-band)) .hub-main:not(:has(> .hub-seek)) > .hub-head::after,
body:not(:has(section.hub-band)) main:not([class]) > .hub-head::after,
body:not(:has(section.hub-band)) .pt-wrap > .pt-col-l > .pt-main::after{
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  left:0;right:0;
  bottom:calc(-1 * var(--cm-bd-b, 0px));
  height:1px;
  background:var(--cm-rule);
  box-shadow:0 0 0 var(--cm-bleed) var(--cm-rule);
  clip-path:inset(0 calc(-1 * var(--cm-bleed)));
}

/* 랜딩 — 여섯 블록이 한 띠를 이룬다. 연장값은 앞뒤 간격의 절반이라 이음매가 남지 않는다. */
.hub-main:has(> .hub-seek){padding-top:var(--cm-band-pt);}
.hub-main:has(> .hub-seek) > .hub-head{--cm-bd-t:var(--cm-band-pt);--cm-bd-b:var(--cm-bd-h1);}
.hub-main:has(> .hub-seek) > .hub-seek{--cm-bd-t:var(--cm-bd-h1);--cm-bd-b:var(--cm-bd-h1);}
.hub-main:has(> .hub-seek) > .hub-chips{--cm-bd-t:var(--cm-bd-h1);--cm-bd-b:var(--cm-bd-h2);}
.hub-main:has(> .hub-seek) > nav.hub-ics{--cm-bd-t:var(--cm-bd-h2);--cm-bd-b:var(--cm-bd-h1);}
.hub-main:has(> .hub-seek) > .hub-ics__note{--cm-bd-t:var(--cm-bd-h1);--cm-bd-b:var(--cm-band-pb);}

/* [2026-08-29] 띠의 마지막 블록 — 랜딩에 .hub-ics__note 가 없으므로 아이콘 줄이 꼬리다.
   이 값이 없으면 띠가 아이콘 밑 절반 간격에서 잘려 아래 내용 블록과 이가 맞지 않는다. */
.hub-main:has(> .hub-seek):not(:has(> .hub-ics__note)) > nav.hub-ics{--cm-bd-b:var(--cm-band-pb);}

/* [2026-08-29] 히어로 두 줄 — 운영 주체와 무가입 고지.
   제목 아래 딸린 잔글씨라 본문(--cm-txt-2)보다 한 단 흐리다. 새 크기를 만들지 않는다. */
.hub-who{color:var(--cm-mut);}
.hub-nogate{margin-top:var(--cm-gap-xs);}

/* 하위 8창 — 머리 블록 하나가 띠다. 32 + 머리 + 40 = 최소 188px. */
.hub-main:not(:has(> .hub-seek)) > .hub-head,
main:not([class]) > .hub-head,
.pt-wrap > .pt-col-l > .pt-main{
  --cm-bd-t:var(--cm-band-sub-pt);
  --cm-bd-b:var(--cm-band-sub-pb);
}

/* ── (2) 랜딩 띠 안 세로 리듬 — (3) 24 세 곳 · (4) 72 두 곳 ──────────────
   창 안 <style> 이 (0,3,0)~(0,4,0) 으로 같은 자리를 32 · 16 · 56 · 32 · 16 으로 잡고 있어
   구조 선택자(:has)로 무게를 올려 되찾는다. **같은 규칙이 두 곳에 있는 상태다** —
   창 담당이 index.html 의 해당 다섯 줄을 지우면 이 덩이의 무게를 낮춰라(unresolved 에 적었다). */
body.hub-body .hub-main:has(> .hub-seek) > .hub-seek{margin-top:var(--cm-gap-hero);}
body.hub-body .hub-main:has(> .hub-seek) > .hub-chips{margin-top:var(--cm-gap-hero);}
body.hub-body .hub-main:has(> .hub-seek) > .hub-chips + section.hub-box{margin-top:var(--cm-gap-band);}
body.hub-body .hub-main:has(> .hub-seek) > nav.hub-ics + .hub-ics__note{margin-top:var(--cm-gap-hero);}

/* ── (3) 띠 → 첫 본문 섹션은 (5) 96px ───────────────────────────────────
   띠가 머리 블록을 가져가므로 하위 8창의 본문은 띠가 끝난 자리에서 96px 아래에 선다.
   랜딩은 제외한다 — 랜딩의 머리 다음은 아직 띠 안(검색바)이다. */
body.hub-body .hub-main:not(:has(> .hub-seek)) > .hub-head + *,
body.hub-body main:not([class]) > .hub-head + *{margin-top:var(--cm-sec-gap);}

/* ── (4) 랜딩 칩 — 내용 폭 flex-wrap ─────────────────────────────────
   [LAYOUT0828-R6] 전 : grid-template-columns:repeat(4, 178px) · column-gap 14px.
        4 × 178 + 3 × 14 = 754 로 히어로 폭을 「정확히 채우는」 계산이었는데, 칩 여덟이
        전부 178px 칸을 차지하면서 「청년창업」 네 글자 뒤로 100px 이 비어 1400 fold
        촬영에서 여덟 칩이 **흐린 빈 입력칸**으로 읽혔다.
   후 : 칩은 제 글자 폭만 쓰고 줄이 차면 접힌다. 754 를 정확히 채우지 않아도 된다 —
        줄의 왼쪽 끝(축 583)만 히어로와 맞으면 된다.
        같이 없어지는 것 셋 : 소수점 열 폭 · 사다리 밖 거터 14px · 빈 칸처럼 보이는 칩.
   되돌리려면 : 이 두 덩이를 grid · repeat(4,var(--cm-chip-col)) · width:100% 로 되돌리고
        :root 의 --cm-chip-col(178px) · --cm-chip-gap(14px) 두 토큰을 되살린다. */
body.hub-body .hub-main:has(> .hub-seek) > .hub-chips .hub-chips__ls{
  display:flex;
  flex-wrap:wrap;
  column-gap:var(--cm-gap-xs);
  row-gap:var(--cm-gap-s);
  justify-content:flex-start;
  max-width:none;
  margin:0;
}
body.hub-body .hub-main:has(> .hub-seek) > .hub-chips .hub-chips__ls > .hub-chip{
  width:auto;
  min-width:0;
  justify-content:flex-start;
  font-size:var(--cm-fs-body);
  font-weight:400;
  line-height:var(--cm-lh-body);
  letter-spacing:var(--cm-body-ls);
}
/* 칩 라벨 → 칩 격자 (3) 24px · 격자 → 꼬리 한 줄 (3) 24px */
body.hub-body .hub-main:has(> .hub-seek) > .hub-chips > .hub-chips__lb{margin:0 0 var(--cm-gap-l);}
body.hub-body .hub-main:has(> .hub-seek) > .hub-chips > .hub-chips__nt{margin:var(--cm-gap-l) 0 0;}

/* ── (5) 섹션 머리 — 딥링크 착지 여유 · 머리 → 본문 (3) 24px ───────────── */
.cm-band,
.hub-box__hd,
.blk_hd,
.pt-w__ttl,
.cm_toc__h,
.hub-tr__hdr{scroll-margin-top:var(--cm-scroll-mt);}
body.hub-body .hub-tr__nt{margin-bottom:var(--cm-gap-l);}
/* (1) 8px — 설명은 제목에서 8px 이다(12px 이 아니다) */
body.hub-body .cm-ent__d{margin-top:var(--cm-gap-inner);}

/* ── (6) 못 여는 컨트롤 — 버튼 모양을 전부 걷는다 ──────────────────────
   실측 : 못 여는 컨트롤 아홉이 실제로 눌리는 것과 같은 테두리 1px · radius 6 · 높이 36/44 를
   쓰고 있었다. 방문자 다섯 중 넷이 눌러 보고서야 안 되는 것을 알았다.
   **버튼 모양을 쓸 수 있는 것은 실제로 눌리는 것뿐이다** — 여기서 규칙으로 못 박는다.
   대상은 이름이 아니라 상태로 잡는다(button[disabled] · 눌리지 않는 .cm_cheer) —
   창이 컨트롤을 늘려도 규칙이 따라간다. 문안은 각 창의 마크업이 갖는다.
   ※ 검색바(form.hub-search)는 입력 칸이라 테두리를 남긴다 — 여기 걸리지 않는다.
   되돌리려면 이 두 덩이를 지운다. */
body.hub-body main button[disabled],
body.hub-body main .cm_cheer{
  display:inline-block;
  width:auto;
  height:auto;
  min-height:0;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  cursor:default;
  color:var(--cm-mut);
  font-size:var(--cm-off-fs);
  font-weight:400;
  line-height:var(--cm-lh-tail);
  letter-spacing:var(--cm-tail-ls);
  text-align:left;
}
body.hub-body main button[disabled] *,
body.hub-body main .cm_cheer *{color:inherit;font-size:inherit;font-weight:inherit;}

/* ── (7) 2열 격자를 쓰는 상자에는 좌우 안여백을 주지 않는다 ──────────────
   실측 : /terms/ 의 .cm_act · .cm_notice_bar 와 /privacy/ 의 .cm_notice_bar 가
   파랑 세로선 3px + padding-left 24px 만큼(27px) 안으로 들어가 있어, 그 안 2열 격자의
   글자 왼쪽 끝이 9창 공통 축(1920 에서 x=409)에서 혼자 436 이었다.
   규칙 : 강조 세로선은 **격자 상자가 아니라 그 바깥**에 선다. 마크업에 바깥 상자가 없으므로
   선을 자리 없는 가상요소로 내려 레인 밖(main 테두리 상자 왼쪽 끝)에 세운다 —
   좌우 안여백이 0 이 되어 격자가 527 × 2(terms) · 343 × 2(privacy) 로 저절로 맞는다.
   left 를 --cm-pad 로 두었으므로 600 이하에서도 화면 밖으로 나가지 않는다(가로 넘침 0). */
body.hub-body main .cm_act,
body.hub-body main .cm_notice_bar{
  position:relative;
  padding-left:0;
  border-left:0;
}
body.hub-body main .cm_act::before,
body.hub-body main .cm_notice_bar::before{
  content:"";
  position:absolute;
  left:calc(-1 * var(--cm-pad));
  top:0;bottom:0;
  width:3px;
  background:var(--cm-accent);
  pointer-events:none;
}

/* ── (8) /feed/ 제어줄 — 띠 위에서 혼자 어두운 사각형이 되지 않게 한다 ────
   .cm_ctrl 은 position:sticky 라 바탕이 비면 글자가 겹친다. 띠와 같은 면을 준다(새 색 아님). */
body.hub-body .cm_ctrl{background:var(--cm-band-bg);}

/* ── (9) 1024 이하 — 띠 안여백만 줄이고 열은 접지 않는다 ──────────────── */
@media (max-width:1024px){
  :root{--cm-band-pt:40px;--cm-band-pb:48px;}
  /* [LAYOUT0828-R6] 칩 4열 격자를 지웠다 — 위 (4) 가 내용 폭 flex-wrap 이라 열 수가 없다.
     1024 에서도 칩은 줄이 차는 대로 접힌다. 되돌리려면 grid-template-columns 를 되살린다. */
}

/* ── (10) 600 이하 — 여기 한 곳에서만 접는다 ─────────────────────────────
   띠 안여백을 줄이고 칩을 2열 × 4행으로 접는다. 띠 자체는 그대로 전폭이다. */
@media (max-width:600px){
  :root{--cm-band-pt:24px;--cm-band-pb:32px;--cm-band-sub-pb:32px;--cm-gap-band:48px;}
  /* [LAYOUT0828-R6] 칩 2열 격자를 지웠다 — 위 (4) 와 같은 이유다.
     600 이하에서도 칩은 flex-wrap 그대로다(규격 「600px 이하 : 칩은 그대로 flex-wrap」). */
}


/* ── (11) 무게 되잡기 — 위 (3) · (6) · (7) 이 창 시트에 눌린 자리 ────────────
   실측으로 확인한 「덮은 규칙 → 덮은 무게」 :
     · hub.css 17-7 `body.hub-body .cm_wg_bt[disabled] · .mg_w_bt[disabled]` (0,3,1) 이
       못 여는 버튼의 높이 36 · 테두리 1px 을 되살렸다.
     · community.css `body.hub-body .cm_card .cm_cheer` (0,3,1) 이 알약 radius 16 을 되살렸다.
     · privacy/index.html:624 `body.hub-body .cm_doc > .cm_notice_bar` (0,3,1) 이
       왼쪽 안여백 24px 을 되살려 2열이 343 이 아니라 331 이 됐다.
     · guide/tools 의 창 안 <style> 이 꼬리 여백을 16 · 56 · 12 로 잡고 있었다.
   같은 값을 두 곳에 두지 않으려 **값은 (3) · (6) · (7) 한 벌 그대로**이고 여기서는
   선택자 무게만 한 단 올린다. 창 담당이 그쪽 규칙을 지우면 이 덩이도 함께 지워라.
   되돌리려면 이 덩이를 지운다.                                              */
body.hub-body main button[disabled],
body.hub-body main .cm_wg_bt[disabled],
body.hub-body main .mg_w_bt[disabled],
body.hub-body main .cm_rl_bt[disabled],
body.hub-body main .btn.btn_off[disabled],
body.hub-body main .cm_card .cm_cheer,
body.hub-body main .cm_cheer{
  display:inline-block;
  width:auto;
  height:auto;
  min-height:0;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  cursor:default;
  color:var(--cm-mut);
  font-size:var(--cm-off-fs);
  font-weight:400;
  line-height:var(--cm-lh-tail);
  letter-spacing:var(--cm-tail-ls);
  text-align:left;
}
/* /privacy/ 안내 띠 — 2열 격자를 쓰는 상자에는 좌우 안여백을 주지 않는다(위 (7) 과 같은 값) */
body.hub-body main .cm_doc > .cm_notice_bar{padding-left:0;}
/* /guide/ 꼬리 한 줄 (3) 24 · /tools/ 나가는 자리 (4) 72 · 그 꼬리 (1) 8 */
body.hub-body .hub-main > .cm-steps__nt{margin-top:var(--cm-gap-l);}
body.hub-body .hub-main:not(:has(> .hub-seek)) > .tl-exit{margin-top:var(--cm-gap-band);}
body.hub-body .hub-main:not(:has(> .hub-seek)) > .tl-exit + .tl-tail{margin-top:var(--cm-gap-inner);}


/* ── 17-35. [LAYOUT0828-R5] 본문 띠(hub-bleed) · 머리 띠 폭 1150 한 벌 · 2열 잔여 ──
   무엇을 : 1920px 에서 머리 띠가 끝난 뒤로는 9창이 전부 1102@409 한 줄기라
     좌우 409px 씩이 순검정이었다(index 971 · fund 2382 · guide 1622 · tools 2815 ·
     feed 1554 · my 3299 · mileage 3075 · terms 6020 · privacy 4763px 구간).
     본문 구간에 창당 하나씩 전폭 면(띠)을 두어 세로로 header → nav → 머리 띠 →
     바탕 → 본문 띠 → 바탕 → 푸터 여섯 단이 되게 한다.
   왜 : 폭 계단(754 → 900 → 722 → 1102)은 대표 지시라 흔들 수 없다. 계단을 전폭 면이
     받치면 빈 좌우가 「띠 안의 사정」이 된다. 색은 새로 만들지 않았다 —
     --cm-surf(#1A1C20) 는 머리 띠 · 푸터가 이미 쓰는 팔레트 값이다.
   기법 : 100vw 를 쓰지 마라(세로 스크롤바 폭만큼 가로 넘침이 난다).
     box-shadow 스프레드 100vmax + clip-path:inset(0 -100vmax) 는 스크롤 영역을
     만들지 않는다(17-34 에서 같은 기법으로 가로 넘침 0 을 확인했다).
   되돌리려면 : 이 절을 통째로 지운다. 지우면 본문 띠가 사라지고 머리 띠 안쪽이
     1248 로 갈리던 회차 4 상태로 돌아간다.                                        */

:root{
  /* [LAYOUT0828-R5] 본문 띠 안쪽 상하 안여백. --cm-sec-gap 과 같은 96 이지만 이름을
     따로 두어야 1024/600 에서 이 값만 따로 줄일 수 있다. */
  --cm-bleed-py:96px;
  /* 새 색이 아니라 별칭이다 — 머리 띠(--cm-band-bg)와 같은 --cm-surf(#1A1C20) */
  --cm-bleed-bg:var(--cm-surf);
  /* 머리 띠 안쪽 폭 — 본문 레인과 같은 1150(안쪽값 1102) 한 벌 */
  --cm-band-in-w:var(--cm-main-w);
}
@media (max-width:1024px){:root{--cm-bleed-py:72px;}}
@media (max-width:600px){ :root{--cm-bleed-py:56px;}}

/* ── (1) 머리 띠 안쪽 폭을 1150 한 벌로 확정한다 ───────────────────────────
   실측 : feed · my 는 .hub-band__in 이 1150@385, 나머지 여섯 창은 1248@336 이었고
   1248 쪽은 창마다 .hub-band .hub-head{max-width:1102} 보정 한 줄을 더 써서 같은
   결과(1102@409)를 냈다. 보정이 필요한 쪽이 틀렸다 — 1150 한 벌로 모은다.
   랜딩 실측값은 하나도 바뀌지 않는다 : 754 중앙 = 409+174 = 583,
   900 배너 = 409+101 = 510, 722 아이콘 = 409+190 = 599 로 지금 값 그대로다.
   무게 : 창 인라인의 .hub-band__in(0,1,0) · .hub-band > .hub-band__in(0,2,0) 보다
   높은 (0,2,1) 이라 이 시트가 이긴다.
   되돌리려면 이 한 줄을 지운다(창별 인라인의 1248 이 다시 산다).                */
body.hub-body .hub-band__in{max-width:var(--cm-band-in-w);}

/* ── (2) 본문 띠 hub-bleed ────────────────────────────────────────────────
   규격 이름은 <section class="hub-bleed"> 이지만 이 회차는 창 HTML 을 고칠 수 없다.
   그래서 창마다 이미 있는 블록 하나를 지목해 같은 값을 준다(클래스는 전부
   1920 실측으로 존재를 확인했다). 마크업이 .hub-bleed 를 갖게 되면 지목 목록을
   지우고 .hub-bleed 한 줄만 남겨라.
   지목 규칙 : (1) 창당 1개(문서 2창은 조문 전체 통짜 1개) (2) 띠 안 내용 400px 이상
     (3) 띠가 main 높이의 70% 를 넘지 않는다(문서 2창 예외) (4) 머리 띠 · 푸터와 띠 사이
     바탕 96px 이상 (5) 2열 격자를 쓰는 블록 > 가장 긴 블록 > 첫 블록.
   창별 지목과 그 높이(1920 실측) :
     index    section.hub-tr         811  2열 527/48/527 · main 유일 자식
     feed     div.pt-lane            711  사이드 아래로 내려온 레인
     fund     div.hub-cols           580  2열 527/48/527
     guide    div.cm-steps + 꼬리    896  2열 527/48/527 (꼬리 한 줄까지 한 띠)
     mileage  section.blk 첫째       915  안에 2열 세 벌
     my       .pt-lane section.blk 첫째  857  안에 2열 · steps · rules
     terms    div.cm_doc            5185  조문 통짜
     privacy  div.cm_doc            4428  조문 통짜
     tools    details.tl-more[open] 1705  펼쳤을 때만 띠가 된다(접으면 사라진다)
   금지 : border-radius · 좌우 border · 100vw · position:sticky · 아래 선.
     아래 경계는 색이 바뀌는 것으로 충분하다 — 위 1px 선 하나뿐이다.
   되돌리려면 이 (2) 덩이를 지운다.                                              */
/* [LAYOUT0828-R6] 지목 선택자를 전부 지우고 `.hub-bleed` 한 이름으로 그린다.
   무엇을 : 아래 네 덩이(position / ::before / ::after / 안여백)와 등장 억제 덩이의
        선택자 목록에서 `body.hub-body .hub-main > section.hub-tr` 같은 **태그·부모 경로
        지목** 열여덟 줄을 걷어내고 클래스 하나만 남겼다. /guide/ 만 갖고 있던
        `> div.cm-steps` · `> p.cm-steps__nt` 보정 두 줄도 함께 지웠다.
   왜 : 9창 마크업이 이제 전부 <section class="hub-bleed"> 를 갖고 그 요소는 창당 정확히
        1개다(실측 확인). 그런데 옛 지목이 살아 있어 /guide/ 만 픽셀 스캔에서 면이 **2개**
        (y418-1549 · y1646-2132)로 잡혔다 — 진짜 띠 위에 옛 지목이 그린 띠가 하나 더 있었다.
        같은 일을 하는 두 벌이 있으면 창마다 결과가 갈린다. 규격 : hub-bleed 는 오직
        .hub-bleed 클래스로만 그린다.
   되돌리려면 : 이 다섯 덩이의 선택자 목록에 지목 열여덟 줄을 되살린다. */
.hub-bleed{
  position:relative;
}
/* 면 — 좌우로 100vmax 뿌리고 위아래만 잘라 낸다 */
.hub-bleed::before{
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;          /* 장식 오버레이는 자손의 클릭을 먹지 않는다 */
  left:0;right:0;
  top:calc(-1 * var(--cm-bl-t, 0px));
  bottom:calc(-1 * var(--cm-bl-b, 0px));
  background:var(--cm-bleed-bg);
  box-shadow:0 0 0 var(--cm-bleed) var(--cm-bleed-bg);
  clip-path:inset(0 calc(-1 * var(--cm-bleed)));
}
/* 위 1px 선 — 띠가 시작하는 블록에만 단다(아래 선은 두지 않는다) */
.hub-bleed::after{
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  left:0;right:0;
  top:calc(-1 * var(--cm-bl-t, 0px));
  height:1px;
  background:var(--cm-rule);
  box-shadow:0 0 0 var(--cm-bleed) var(--cm-rule);
  clip-path:inset(0 calc(-1 * var(--cm-bleed)));
}
/* 띠 안쪽 상하 안여백 96 — 래퍼가 없으므로 지목한 블록 자신이 갖는다.
   좌우 안여백은 0 이다(레인 폭 1102@409 를 바꾸지 않는다). */
.hub-bleed{
  padding-top:var(--cm-bleed-py);
  padding-bottom:var(--cm-bleed-py);
}
.hub-bleed > *:first-child{margin-top:0;}
/* 띠 위 바탕 96 — 첫 자식인 창(index · guide · privacy)은 main 의 padding-top 96 이 낸다 */
.hub-bleed{
  margin-top:var(--cm-bleed-py);
}
/* 띠 아래 바탕 96 = 32 + main 아래 안여백 64 */
.hub-bleed:last-child{
  margin-bottom:var(--cm-gap-xl);
}
/* [LAYOUT0828-R6] /guide/ 의 `> div.cm-steps` · `> p.cm-steps__nt` 이음매 보정 두 줄을 지웠다.
   두 블록은 이제 한 <section class="hub-bleed"> 안에 들어가 있어 이음매가 없다. */

/* 띠가 된 블록에서 등장 이동거리를 끈다 — 전폭 면이 42px 통째로 흔들리면 안 된다.
   opacity 는 그대로라 띠는 내용과 함께 조용히 떠오른다.
   되돌리려면 이 덩이를 지운다(띠가 42px 슬라이드한다).                          */
/* [LAYOUT0828-R6] 지목 넷을 `.hub-bleed.rv` 하나로 줄였다. 안의 블록(.hub-tr · .hub-cols ·
   .blk)은 이제 띠의 **자식**이라 42px 슬라이드해도 전폭 면은 움직이지 않는다 — 자손까지
   끄지 않는다. 되돌리려면 지목 넷을 되살린다. */
.hub-bleed.rv{
  transform:none;
}

/* ── (3) 1열로 남아 있던 두 곳을 2열로 편다 (/my/) ─────────────────────────
   실측 : div.steps · div.rules.rules--one 이 grid-template-columns:1102px 1열이고
   각 줄의 글이 400px 남짓이라 오른쪽 700px 이 3행 내내 비었다.
   자식이 셋이라 2×2 의 넷째 칸이 빈다 — 셋째(가장 긴 항목)를 두 칸에 걸친다.
   행 구분은 이미 각 항목이 갖고 있는 padding:20px 0 + border-bottom 이 낸다.
   되돌리려면 이 덩이를 지운다(1열로 돌아간다).                                  */
body.hub-body main.pt-wrap--norail div.steps,
body.hub-body main.pt-wrap--norail div.rules.rules--one{
  display:grid;
  grid-template-columns:repeat(2, 527px);
  column-gap:var(--cm-gap-2xl);
  row-gap:0;
}
body.hub-body main.pt-wrap--norail div.steps > .step:last-child,
body.hub-body main.pt-wrap--norail div.rules.rules--one > .rule:last-child{
  grid-column:1 / -1;
  border-bottom:0;
}
@media (max-width:1024px){
  body.hub-body main.pt-wrap--norail div.steps,
  body.hub-body main.pt-wrap--norail div.rules.rules--one{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }
}
@media (max-width:600px){
  body.hub-body main.pt-wrap--norail div.steps,
  body.hub-body main.pt-wrap--norail div.rules.rules--one{
    grid-template-columns:minmax(0,1fr);
  }
}

/* ── (4) 「지금 뜨는 이야기」 머리 가로줄 한 줄 걷기 (/index/) ──────────────
   전 : 머리(.hub-tr__hdr.cm-band)의 border-bottom · 예시 띠의 위 선 · 아래 선이
        62px 안에 세 줄이었다. 머리의 한 줄을 지우고 24px 여백으로 가른다
        (여백 24 는 index 인라인이 이미 준다).
   되돌리려면 이 한 줄을 지운다.                                                */
body.hub-body .hub-tr__hdr{border-bottom:0;}

/* ── (5) /privacy/ main 아래 안여백을 9창 한 값(64)으로 ────────────────────
   그 창 인라인이 body.hub-body main:not([class]){padding-bottom:var(--cm-gap-block)}
   (=72) 로 혼자 갈라져 있다. html 을 붙여 (0,2,2) 로 눌러 --cm-main-pb 를 되돌린다.
   ※ 그 창 담당이 인라인의 padding-bottom 을 지우고 <main class="hub-main"> 을 주면
     이 한 줄도 지워라.                                                          */
html body.hub-body main:not([class]){padding-bottom:var(--cm-main-pb);}

/* [LAYOUT0828-R5] (6) 전역 메뉴 가로 스크롤 표시는 **이미 있다** — 위 8절의
   @media (max-width:1024px) 안 .hub-nav__in / .hub-sticky__in 마스크(28px · :focus-within 에서 꿄)가
   그 일을 한다. 같은 규칙을 두 곳에 두지 않기 위해 이 회차에서는 아무것도 더하지 않았다.
   ※ /feed/ 인라인에 같은 마스크가 한 벌 더 있다 — 그 창 담당이 지워야 한다. */

/* ═══════════════════════════════════════════════════════════════════════════
   17-35. [LAYOUT0828-R6 2026-08-28 공유시트 회차 6] — 카드 잔재 · 2열 세로선 · 배지 한 벌
   이 절이 하는 일 다섯 :
     (12) 2열 격자의 세로 구분선을 거터 정중앙에 세운다(오른쪽 칸에 걸지 않는다)
     (13) 홀수 격자의 마지막 항목을 두 칸에 걸쳐 오른쪽 빈 칸을 없앤다
     (14) 배지 다섯 이름을 한 벌로 모은다(테두리 없는 옅은 파란 배지)
     (15) 랜딩 배너 안 아이콘 칸을 걷어 글자를 히어로와 한 선에 세운다
     (16) 밑줄 목록 행의 제목 줄 — 상태 배지를 오른쪽 끝으로
   되돌리려면 이 절을 통째로 지운다.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── (12) 2열 격자 세로 구분선 — 거터 48 의 정중앙 ─────────────────────────
   무엇을 : 오른쪽 칸(nth-child(2n))에 position:relative 를 주고, 자리를 차지하지 않는
        ::before 를 칸 왼쪽 끝에서 --cm-rule-inset(24) 만큼 **밖으로** 내보내 선을 세운다.
        선의 x = 왼쪽 축 + 527 + 24 = 960(1920) · 700(1400) · 512(1024).
   왜 : 오른쪽 칸에 border-left + padding-left:24px 를 직접 걸면 글자가 984 가 아니라 1009 에서
        시작해 왼쪽 열(409)과 축이 어긋난다(1920 실측 : fund .hub-cols · my .bal_sub ·
        mileage .steps 세 곳). 또 border-left 는 칸 상자 높이를 그대로 긋기 때문에, 두 열의
        높이가 360 : 130 처럼 다를 때 선이 빈 구간 230px 을 홀로 통과한다.
        ::before 는 align-items:start 와 함께 내용 높이만큼만 긋는다.
   ※ 대상은 「서로 다른 이야기를 나란히 놓는 2열」뿐이다. 밑줄 목록(.hub-list · .use_list ·
     .hub-tr__ls)에는 쓰지 않는다 — 밑줄이 이미 구분이다.
   ※ mileage .steps · .stage_lane__g 와 my .bal_sub 는 같은 선을 그 창 인라인 <style> 이
     border-left 로 갖고 있다(그 창들의 시트가 이 파일 뒤에 실린다). 규칙을 두 곳으로
     가르지 않기 위해 여기서는 무게를 올려 덮지 않았다 — unresolved 에 지울 줄을 적었다.
   되돌리려면 : 이 덩이를 지운다. */
.hub-cols{align-items:start;}
.hub-cols > .hub-box:nth-child(2n){position:relative;}
.hub-cols > .hub-box:nth-child(2n)::before{
  content:"";
  position:absolute;
  left:calc(-1 * var(--cm-rule-inset));
  top:0;bottom:0;
  width:1px;
  background:var(--cm-rule);
  pointer-events:none;          /* 장식 오버레이는 자손의 클릭을 먹지 않는다 */
}
@media (max-width:600px){
  /* 1열이 되면 세로선은 뜻을 잃는다 — 밑줄(위 17-15 미디어쿼리)이 대신 가른다 */
  .hub-cols > .hub-box:nth-child(2n)::before{display:none;}
}

/* ── (12-b) 배치 규칙 ⑤ 예외 — 머리 띠와 본문 띠를 잇는다 ────────────────
   무엇을 : main 의 **첫 자식**이 .hub-bleed 인 창에서 두 띠 사이 바탕을 0 으로 만든다.
        main 위 안여백 96 → 0 · 머리 띠 아래선 없음 · 본문 띠 위 1px 선 없음 · 위 바깥여백 0.
   왜 : 1920 픽셀 스캔(x=6 세로 훑기)에서 /index/ 와 /privacy/ 두 창만 머리 띠(#1A1C20)와
        본문 띠(#1A1C20) 사이에 **97px 짜리 #16171B 구간**이 있었다. 두 면의 색이 같으므로
        그 사이의 바탕은 구간을 나누지 못하고 「빈 띠 · 로딩이 덜 된 자리」로 읽힌다
        (방문자 기록). 같은 색 두 면 사이에 96px 바탕을 끼우지 마라 — 잇는다.
   왜 :has 로 잡는가 : 규격의 조건은 「머리 띠 다음 블록이 바탕이 아니라 띠인 창」이고,
        그것을 CSS 로 말한 것이 `main:has(> .hub-bleed:first-child)` 다. 창 이름을 적으면
        다른 창이 같은 모양이 되는 날 규칙이 따라가지 못한다.
        지금 걸리는 창은 index · privacy 둘이다(실측 확인).
   되돌리려면 : 이 덩이를 지운다(두 창에 97px 구멍이 돌아온다). */
body.hub-body main:has(> .hub-bleed:first-child){padding-top:0;}
body.hub-body main:has(> .hub-bleed:first-child) > .hub-bleed{margin-top:0;}
body.hub-body main:has(> .hub-bleed:first-child) > .hub-bleed::after{display:none;}
body.hub-body:has(main > .hub-bleed:first-child) .hub-band{border-bottom:0;}

/* ── (13) 홀수 항목 처리 — 마지막 칸이 비지 않게 ───────────────────────────
   무엇을 : 항목 수가 홀수인 2열 격자의 마지막 항목을 두 칸에 걸친다.
   왜 : 1920 실측 홀수 격자 일곱 곳(tools .hub-list 세 벌 · my .rules--one · mileage .sum3 ·
        mileage .faq · feed .pt-lane)에서 마지막 항목만 왼쪽에 놓이고 오른쪽 527px 이 통째로
        비어 화면에 구멍처럼 남았다(tools 1920 촬영에서 눈으로 확인).
        전폭이 된 항목의 설명에는 읽는 줄 720 이 이미 걸려 있어 글줄이 1102 로 늘어지지 않는다.
   `:last-child:nth-child(odd)` 는 항목이 짝수인 격자에서는 한 번도 걸리지 않는다.
   여섯 클래스는 전부 9창 마크업에 실재한다(hub-list=fund·tools / pt-lane=feed·my·mileage /
   rules--one=my / sum3·faq=mileage / steps=feed·guide·my·mileage).
   되돌리려면 : 이 한 덩이를 지운다. */
/* [LAYOUT0828-R6] .hub-list 만 `:not(:has(.hub-item__hd))` 로 걸렀다.
   왜 : 상태 칸을 가진 목록은 /tools/ 하나이고 그 창 인라인이 아직 행을
        `minmax(0,1fr) 176px` 두 칸으로 가르고 있다. 그 행을 두 칸에 걸치면(1102) 상태 칸이
        x=1290 까지 끌려가 제목 없는 세로선 한 줄만 오른쪽 끝에 남는다(1920 촬영에서 확인).
        상태 칸이 제목 줄로 올라가는 날(unresolved) 이 :not() 을 지워라. */
.hub-list:not(:has(.hub-item__hd)) > *:last-child:nth-child(odd),
.pt-lane > *:last-child:nth-child(odd),
.rules--one > *:last-child:nth-child(odd),
.sum3 > *:last-child:nth-child(odd),
.faq > *:last-child:nth-child(odd),
.steps > *:last-child:nth-child(odd){
  grid-column:1 / -1;
}

/* ── (14) 배지 한 벌 — 테두리 없는 옅은 파란 배지 ──────────────────────────
   무엇을 : .hub-badge--ex · .cm_tag · .ex_badge · .mg_w_soon · .hub-stage 다섯 이름을
        height 24 · radius 3 · padding 0 8 · 13/20/400 · 바닥 --cm-accent-bg ·
        글자 --cm-accent-soft · **테두리 0** 한 벌로 모은다.
   왜 : 실측에서 배지가 두 벌이었다 — ① 1px --cm-edge 테두리 + --cm-surf-2 바닥(중립)
        ② 테두리 없는 --cm-accent-bg 바닥(강조). 같은 크기 · 같은 자리의 부품이 두 옷을
        입고 있어 9창이 한 사이트로 보이지 않았다. 테두리를 걷는 쪽으로 모은다 —
        24px 짜리 작은 상자에 1px 선을 두르면 그 자체가 작은 카드가 된다.
   대비 : #8FB4FF 는 #1E2A44 위 6.90:1 로 13px 글자 기준 4.5:1 을 넘는다(유지 항목 5).
   되돌리려면 : 이 덩이를 지운다(17-8 의 두 벌로 돌아간다). */
body.hub-body .hub-badge--ex,
body.hub-body .hub-badge--soon,
body.hub-body .hub-badge--tier,
body.hub-body .tl-tag,
body.hub-body .cm_tag,
body.hub-body .ex_badge,
body.hub-body .mg_w_soon,
body.hub-body .hub-stage{
  height:var(--cm-badge-h);
  padding:0 var(--cm-badge-px);
  border:0;
  border-radius:var(--cm-badge-r);
  background:var(--cm-accent-bg);
  color:var(--cm-accent-soft);
  font-size:var(--cm-fs-tail);
  font-weight:400;
  line-height:var(--cm-lh-tail);
}

/* ── (15) 랜딩 배너 — 아이콘 칸을 걷어 글자를 히어로와 한 선에 세운다 ──────
   무엇을 : 배너 안 .cm-ent 를 한 칸 격자로 두고 아이콘 칸 · 세로선 · 왼쪽 안여백을 없앤다.
   왜 : 1920 실측에서 면은 900@510 로 맞는데 **면 안 첫 글자가 x=688** 이었다
        (아이콘 56 + gap 24 + 세로선 1 + padding 24 = 105px 들여쓰기).
        1400 fold 촬영에서 히어로 세 블록의 글자(323)와 배너 글자(428)의 어긋남이 눈으로 보인다.
        아이콘을 오른쪽으로 옮기면 같은 줄의 「마일리지 ›」 링크와 부딪히므로 뺀다 —
        바로 아래 8칸 줄이 아이콘 원판 여덟 개를 이미 갖고 있어 한 화면에 원판이 두 벌 있을
        이유가 없다. 면 높이 119px 은 그대로다.
   ※ 배너 밖의 .cm-ent(fund · guide · feed · tools · mileage)는 그대로 아이콘 | 세로선 | 글
     구성이다 — 이 규칙은 .hub-band .hub-box 안으로 한정했다.
   되돌리려면 : 이 세 줄을 지운다(글자가 다시 x=688 로 들어간다). */
body.hub-body .hub-band .hub-box .cm-ent{grid-template-columns:minmax(0,1fr);column-gap:0;}
body.hub-body .hub-band .hub-box .cm-ent__ic{display:none;}
body.hub-body .hub-band .hub-box .cm-ent__bd{border-left:0;padding-left:0;}

/* ── (16) 밑줄 목록 행의 상태 배지 — **이번 회차에서는 넣지 않았다** ────────
   규격은 오른쪽 176px 상태 칸을 폐기하고 상태 배지를 제목 줄 오른쪽 끝
   (.hub-item__hd 안 margin-left:auto)에 붙이라고 적었다. 여기에 쓰지 않은 이유 둘 :
     ① 제목 줄의 baseline flex · flex-wrap · gap 8 은 위 13절 `.hub-item__hd` (1634행)이
        이미 글자 하나까지 같은 값으로 갖고 있다. 여기 다시 적으면 두 곳이 된다.
     ② 상태 배지를 제목 줄 안에 둔 창이 **하나도 없다**. /tools/ 의 제목 줄은
        `hub-item__nm` + `tl-when` 두 span 뿐이고(17행 전수 확인), 상태 문구는 오른쪽
        176px 칸의 `.hub-item__meta > .tl-why` 에 있다. `.hub-item__hd > .hub-badge{...}` 를
        적으면 지금은 닿는 요소가 없는 **죽은 선택자**가 된다.
   상태 문구를 제목 줄로 올리는 것은 마크업 일이라 unresolved 에 규칙 그대로 적었다. */



/* ═══════════════════════════════════════════════════════════════════════════
   17-36. [LAYOUT0828-R7 2026-08-28 공유 시트 회차 7] — 한 값으로 모으는 아홉 자리
   이 절이 하는 일 :
     (1) 세로 사다리를 24 / 56 / 96 세 칸으로 줄인다(--cm-gap-block 72 → 56)
     (2) 칩 컨테이너 넷을 flex-wrap · 8 / 12 한 벌로 모은다(칩 알약은 17-9 · 17-20 에서 고쳤다)
     (3) 2열 · 2단 격자의 row-gap 을 56(밑줄 없는 격자) · 0(밑줄 목록) 두 값으로 모은다
     (4) 밑줄 항목의 상하 안여백을 12px 한 값으로 모은다
     (5) .cm-ent 의 라벨 → 제목 → 설명 사다리를 못 박는다
     (6) 잠긴 동작에서 파란 채움을 걷는다(ghost 한 문법)
     (7) 머리 띠 오른쪽 320 칸의 세로선 · terms 머리 띠의 소수점 두 열을 734/48/320 으로
     (8) 푸터 ※ 법정 고지를 2열로 편다(문장은 한 글자도 바꾸지 않는다)
     (9) 한 배경색이 세로로 이어지는 구간을 1100px 아래로 내린다
   되돌리려면 이 절을 통째로 지운다.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── (1) 토큰 — 세로 사다리 세 칸 · 검증 상수 둘 ──────────────────────────
   [LAYOUT0828-R7] --cm-gap-block 이 72px 였다. 1920 실측에서 같은 성격의 자리에
   0 · 24 · 32 · 48 · 72 다섯 값이 섞여 있어(.cm-steps 48 · .cm_stages 32 · .sum3 24 ·
   .steps 24 · .pt-col-l 72 · .hub-cols 72) 「여백이 묶음을 만든다」가 성립하지 않았다.
   56 은 브리프의 「묶음 사이 56~80」 하한이고 섹션 96 과 거의 2:1 이라 위계가 눈에 보인다.
   이 한 줄이 --cm-block-gap 별칭을 타고 .pt-col-l · .pt-lane · .cm_doc · .pt-main 형제
   간격까지 함께 내린다 — 같은 값을 여러 곳에 적지 않기 위해서다.
   되돌리려면 --cm-gap-block 을 72px 로 되돌린다.                                */
:root{
  --cm-gap-block:56px;
  --cm-block-gap:var(--cm-gap-block);
  /* 항목 사이(24) 의 이름. --cm-gap-l 과 같은 값이므로 새 숫자가 아니다 */
  --cm-gap-item:var(--cm-gap-l);
  /* 2단 격자 · 머리 띠의 두 칸 폭. 734 + 48 + 320 = 1102(레인 안쪽값) */
  --cm-col-main:734px;
  --cm-col-side:320px;
  /* 검증 스크립트가 읽는 상수 두 개 — 규칙 8 과 2열 높이 차 상한 */
  --cm-band-run-max:1100px;
  --cm-2col-skew-max:25%;
  /* [LAYOUT0828-R7] 40px 였다. 머리 블록 → 첫 항목은 항목 사이(24) 한 값이다 */
  --cm-head-gap:var(--cm-gap-l);
}

/* ── (2) 칩 컨테이너 넷 — 열 폭을 고정하지 않는다 ────────────────────────
   실측 : .hub-chips__ls 8/12 · .cm-pick__chips 8/12 · .cm_chips 8/8 · .mg_w_chips 8/8.
   줄바꿈 간격이 두 값이라 같은 칩 줄이 창마다 다르게 접혔다. 사다리 값 8(가로) · 12(세로)
   한 벌로 모은다. 열 폭을 고정하면 칩이 빈 입력칸처럼 보인다(회차 6 실측).
   되돌리려면 이 덩이를 지운다. */
body.hub-body .hub-chips__ls,
body.hub-body .cm-pick__chips,
body.hub-body .mg_w_chips:not(.stage_chips),
body.hub-body .cm_chips{
  display:flex;
  flex-wrap:wrap;
  column-gap:var(--cm-gap-xs);
  row-gap:var(--cm-gap-s);
}

/* ── (3) 격자 row-gap — 밑줄 없는 격자 56 · 밑줄 목록 0 ───────────────────
   창 안 style 이 (0,1,0)~(0,2,0) 으로 잡고 있어 html 을 붙여 (0,2,2) 로 되찾는다.
   ※ 창 담당이 그쪽 row-gap 을 지우면 여기 html 접두사도 함께 떼라. */
html body.hub-body .cm-steps,
html body.hub-body .cm_stages,
html body.hub-body .sum3{row-gap:var(--cm-gap-block);}

/* 밑줄이 이미 구분인 목록은 row-gap 을 두지 않는다(선과 여백이 같은 일을 두 번 하지 않는다).
   실측 : /my/ .steps 는 rg 0 + 밑줄, /mileage/ .steps 는 rg 24 + 밑줄 없음으로 같은 클래스가
   두 창에서 다른 모양이었다. /my/ 쪽(밑줄)으로 모은다. */
html body.hub-body .steps{row-gap:0;}
html body.hub-body .steps > .step{
  padding-top:var(--cm-gap-s);
  padding-bottom:var(--cm-gap-s);
  border-bottom:1px solid var(--cm-rule);
}
html body.hub-body .steps > .step:nth-child(-n+2){padding-top:0;}
html body.hub-body .steps > .step:last-child{border-bottom:0;padding-bottom:0;}

/* /privacy/ 안내 띠 — 오른쪽 안여백 20px 이 두 칸을 517 로 깎고 있었다(규격 527).
   좌우 안여백 0 은 17-34 (7) 이 이미 정한 값이다 — 오른쪽만 남아 있었다. */
html body.hub-body main .cm_notice_bar{
  padding-right:0;
  row-gap:var(--cm-gap-block);
}

/* ── (4) 밑줄 항목 — 상하 안여백 12px 한 값 ───────────────────────────────
   실측 : 같은 성격의 행이 12 와 20 두 값이었다. 12 로 모으면 항목 사이가 24 가 되어
   사다리 둘째 칸과 맞는다. 랜딩 .hub-tr__row 는 썸네일 높이 때문에 20 을 그대로 쓴다. */
/* [RULE0829-2] `li.hub-item` 이었다 — **元素 이름이 붙어 있어 `<div class="hub-item">` 은
   이 규칙에 닿지 않았다.** 그래서 같은 부품이 <li> 면 12px, <div> 면 20px(--cm-row-py) 로
   갈렸고 실측 행 높이가 87 · 102 · 128 · 140 네 값이었다.
   요소 이름을 떼어 **어떤 태그로 쓰든 `.hub-item` 은 상하 12px** 로 못 박는다.
   위 절의 12px 근거(항목 사이 24 = 사다리 둘째 칸)는 그대로 유효하다.
   되돌리려면 `li.hub-item` 으로. */
html body.hub-body .hub-item,
html body.hub-body .cm-pick__row,
html body.hub-body .mg_w_row{
  padding-top:var(--cm-gap-s);
  padding-bottom:var(--cm-gap-s);
}

/* ── (5) .cm-ent 사다리 — 라벨 13 → (8) → 제목 20 → (12) → 설명 16 ────────
   실측 : 라벨이 13/500 과 13/700 두 값, .cm-ent__bd 줄 높이가 24 와 26 두 값,
   설명 위 간격이 8 한 값(규격 12)이었다. 키트 골격의 .ben_grid 를 창모 타이포로 옮긴 것이다.
   되돌리려면 이 덩이를 지운다. */
body.hub-body .cm-ent__bd{line-height:var(--cm-lh-body);}
body.hub-body .cm-ent__lb{
  font-size:var(--cm-fs-tail);
  font-weight:500;
  line-height:var(--cm-lh-tail);
  letter-spacing:var(--cm-tail-ls);
  color:var(--cm-mut);
}
/* [LAYOUT0828-R7] 이름 주의 : 규격서는 `.cm-ent__tt` 로 적었지만 9창 마크업에 그 클래스는
   0건이고 실제 이름은 `.cm-ent__ttl` 이다(전수 : bd 21 · d 10 · ic 20 · lb 13 · no 13 ·
   top 2 · ttl 17 · x 6). 규격서 이름을 그대로 쓰면 죽은 선택자가 된다. */
body.hub-body .cm-ent__ttl{
  font-size:var(--cm-fs-h2);
  font-weight:700;
  line-height:var(--cm-lh-h2);
  letter-spacing:var(--cm-h2-ls);
}
body.hub-body .cm-ent__lb + .cm-ent__ttl{margin-top:var(--cm-gap-xs);}
body.hub-body .cm-ent__d{
  margin-top:var(--cm-gap-s);
  font-size:var(--cm-fs-body);
  font-weight:400;
  line-height:var(--cm-lh-body);
  padding-right:max(0px, calc(100% - var(--cm-read-w)));
}

/* ── (6) 잠긴 동작 — 파란 채움을 걷는다 ───────────────────────────────────
   실측(1920) : 9창에서 background rgb(46,107,255) 를 가진 요소는 셋이고, 그중
   /feed/ 의 button.cm_btn[data-cm-write](113×44 · cursor pointer · disabled 아님)만
   눌러도 「로그인 준비 중」 알림만 뜬다 — 화면에서 가장 밝은 요소가 열리지 않는 동작이었다.
   나머지 둘은 /mileage/ 의 a.btn_fill[href="/feed/"](실제 이동)과 토스트 배경이라 그대로 둔다.
   대상은 이름이 아니라 **상태**로 잡는다(data-cm-write · data-cm-soon) — 창이 컨트롤을
   늘려도 규칙이 따라간다. 값은 그 창이 이미 쓰고 있는 .cm_btn_ghost 와 같은 한 벌이다.
   되돌리려면 이 덩이를 지운다(파란 채움이 돌아온다). */
html body.hub-body button.cm_btn[data-cm-write],
html body.hub-body button.cm_btn[data-cm-soon]{
  height:var(--cm-cta-h);
  padding:0 var(--cm-cta-px);
  border:1px solid var(--cm-edge);
  border-radius:var(--cm-btn-r);
  background:none;
  color:var(--cm-mut);
  font-weight:400;
  cursor:default;
}
@media (hover:hover){
  html body.hub-body button.cm_btn[data-cm-write]:hover,
  html body.hub-body button.cm_btn[data-cm-soon]:hover{
    background:none;
    border-color:var(--cm-accent-soft);
    color:var(--cm-accent-soft);
  }
}

/* ── (7) 머리 띠 오른쪽 320 칸 ────────────────────────────────────────────
   세로 구분선은 칸 안여백으로 만들지 않는다 — 자리 없는 가상요소를 거터 48 의 정중앙에
   세워야 오른쪽 칸 글자가 2단 사이드 축(1920 에서 1191)에 그대로 선다.
   지금 이 칸을 가진 창은 /feed/ 하나다 — 나머지 8창은 마크업에 .hub-band__as 가 없어
   닿는 요소가 없다(죽은 선택자가 아니라, 마크업이 생기면 곧바로 따라오는 규칙이다). */
body.hub-body .hub-band--sub .hub-band__in{align-items:start;}
body.hub-body .hub-band__as{position:relative;}
body.hub-body .hub-band__as::before{
  content:"";
  position:absolute;
  left:calc(-1 * var(--cm-rule-inset));
  top:0;bottom:0;
  width:1px;
  background:var(--cm-rule);
  pointer-events:none;          /* 장식 오버레이는 자손의 클릭을 먹지 않는다 */
}

/* /terms/ 머리 띠 — 실측이 grid 634.906px 443.094px · 거터 24 로, 이 사이트에서 유일한
   소수점 두 열이었다. 같은 자리의 값은 이미 있다 : 2단 격자의 734 + 48 + 320.
   행 구성(빵부스러기 | 날짜 → h1 → 리드)은 그 창 규칙이 그대로 갖는다 — 열 폭만 바꾼다.
   ※ 다른 8창의 .hub-head 는 block 이라 이 두 줄이 닿지 않는다(grid 아닌 요소에서 무효).
   되돌리려면 이 한 덩이를 지운다. */
body.hub-body .hub-band .hub-head{
  grid-template-columns:var(--cm-col-main) var(--cm-col-side);
  column-gap:var(--cm-gap-2xl);
}

/* ── (8) 푸터 ※ 법정 고지 — 1200 한 줄기를 2열로 편다 ────────────────────
   실측 : 9창 전부 .hub-ft__note 가 1200px 1열 4~6줄(136~200px)이라 이 사이트에서
   읽는 줄 720 을 넘는 유일한 자리였고, 푸터가 문서의 20~28% 를 차지했다.
   576 + 48 + 576 두 칸으로 펴면 높이가 절반이 되고 글줄이 읽는 줄 안으로 들어온다.
   **문장은 한 글자도 바꾸지 않는다 — 접거나 지우지 않고 폭만 바꾼다**(유지 항목 9).
   ※ 규격은 「terms · privacy 만 2열, 나머지 7창은 details 로 접기」였으나 접기는
     details 마크업이 필요하고 이 회차는 창 HTML 을 고칠 수 없다(index 만 이미 details 다).
     7창을 1200 1열로 두면 창마다 푸터가 갈리므로 9창을 같은 2열로 모았다 — unresolved 에 적었다.
   되돌리려면 이 덩이를 지운다. */
body.hub-body .hub-ft__note{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  column-gap:var(--cm-gap-2xl);
  row-gap:var(--cm-gap-s);
  align-items:start;
}
body.hub-body .hub-ft__note > summary{grid-column:1 / -1;}
body.hub-body .hub-ft__note p + p{margin-top:0;}

/* ── (9) 규칙 8 — 한 배경색이 세로로 이어지는 구간 1100px 상한 ────────────
   실측(1920 · 세로 구간 전수) : /guide/ 바탕 295~1435(1140) · /my/ 295~1475(1180) ·
   /mileage/ 295~1427(1132) 세 구간이 --cm-band-run-max(1100) 를 넘었고, 그 세 자리가
   그대로 방문자가 「가운데 기둥만 있고 좌우가 빈다」고 적은 자리다.
   고치는 방법 : 띠를 하나 더 만들지 않는다(규칙 1). 이미 있는 띠를 **위로 키운다** —
   ::before / ::after 가 읽는 --cm-bl-t 를 섹션 간격(96)만큼 주고, 같은 값만큼 안여백을
   덜어 낸다. 결과로 **면의 위 끝만 96px 위로 올라가고 띠 안 글자는 제자리에 선다.**
   앞 블록 아래 96px 바탕이 색이 바뀌는 경계로 바뀌므로 한 색 구간이 창마다 96px 짧아진다.
     guide 1140 → 1044 · my 1180 → 1084 · mileage 1132 → 1036 · fund 486 → 390 ·
     feed 630 → 534 · terms 396 → 300 · privacy 525 → 429.
   제외 둘 :
     · main 의 첫 자식인 띠(/index/ 의 이어붙인 띠) — 위에 바탕이 없다.
     · 머리 한 줄(.hub-strip) 바로 뒤의 띠(/tools/) — 그 창은 바탕 구간이 158px 뿐이라
       키우면 규칙 5 의 「바탕 구간 ≥ 96px」이 깨진다.
   되돌리려면 이 덩이를 지운다. */
.hub-bleed:not(:first-child){
  --cm-bl-t:var(--cm-sec-gap);
  padding-top:0;
}
.hub-strip + .hub-bleed{
  --cm-bl-t:0px;
  padding-top:var(--cm-bleed-py);
}

/* ── (9-b) 랜딩 세로 계단 — 1400×800 의 접히는 선이 아이콘 8칸 줄을 가로지르게 ────
   [LAYOUT0828-R7] --cm-band-pt 48 · --cm-gap-band 56 이었다.
   실측(반영 전) : 1400 에서 아이콘 8칸 줄이 y 669~741 이라 y=800 선이 줄 **아래**의
   빈 안여백에 떨어졌다 — 첫 화면이 완결된 한 판으로 끝나 스크롤할 이유가 사라진다.
   규격의 「검색칸 없는 경우」 계단(띠 위 80 · 히어로 사이 24 · 히어로↔배너 90 ·
   배너↔아이콘 90 · 아이콘↔꼬리 24 · 띠 아래 56)을 따르되, 90 은 사다리 밖 값이라
   같은 자리의 사다리 값 --cm-sec-gap(96) 을 쓴다. 결과 : 아이콘 줄 y 781~853 —
   y=800 이 원판(781~825) 한가운데를 가로질러 잘린 원판이 스크롤 신호가 된다.
   ※ :root 가 아니라 **랜딩 main 한 요소**에 얹는다 — --cm-gap-band 를 :root 에서 올렸더니
     /my/ 바탕 구간이 1084 → 1124 로 다시 1100 을 넘고 /terms/ · /privacy/ · /tools/ 가
     40~80px 씩 길어졌다(실측). 이 두 값은 랜딩 히어로 계단 전용이므로 그 자리에서만 바꾼다.
     사용자 정의 속성은 상속되므로 띠 안 여섯 블록이 모두 이 값을 읽는다.
   되돌리려면 이 덩이를 지운다(아이콘 줄이 다시 y 669~741 로 올라간다). */
/* [DAANGN0829] --cm-band-pt 80 · --cm-gap-band 96(=--cm-sec-gap) 이었다.
   그 값은 「1400×800 의 접히는 선이 아이콘 줄을 가로지르게」 하려고 위를 조이고 아래를
   벌린 것인데, 결과가 참조와 반대였다 — 창모는 제목~인기어가 붙고 인기어~광고가 100 이었다.

   당근 랜딩 세로 계단 실측(1920 · probe-y.js) :
     헤더    0 → 64
     제목  191 → 229     헤더 아래 **127**
     검색  300 → 348     제목 아래  **70**   754×48
     인기어 348 → 396     검색 아래   **0**   (줄 자체 상하 안여백 12)
     배너  428 → 578     인기어 아래 **32**   **900×150**
     아이콘 610 → 685     배너 아래  **32**
     지금뜨는769 → 1529   아이콘 아래 **84**
     푸터 1649 → 2446     지금뜨는 아래**120**

   여백이 위에 몰려 있고 아래로 갈수록 조밀해진다 — 「고르는 곳」의 리듬이다.
   접히는 선 : 이 값이면 1400×800 에서 「지금 뜨는」 머리가 741~800 구간에 걸린다.
   당근이 1920×1080 에서 쓰는 것과 같은 스크롤 신호다(잘린 아이콘 원판이 아니라
   다음 섹션의 머리가 신호가 된다). 되돌리려면 이 덩이를 80 / --cm-sec-gap 으로. */
body.hub-body .hub-main:has(> .hub-seek){
  --cm-band-pt:127px;      /* 헤더 → 제목 */
  --cm-gap-h1:70px;        /* 제목 → 검색 */
  --cm-gap-hero:12px;      /* 검색 → 인기어 (당근 0 + 줄 안 여백 12) */
  --cm-gap-band:32px;      /* 인기어 → 광고 · 광고 → 아이콘 */
}
/* 랜딩 계단 적용 — 값 하나가 한 자리씩만 맡는다 */
body.hub-body .hub-main:has(> .hub-seek) > .hub-seek{margin-top:var(--cm-gap-h1);}
body.hub-body .hub-main:has(> .hub-seek) > .hub-ad{margin-top:var(--cm-gap-band);}
body.hub-body .hub-main:has(> .hub-seek) > nav.hub-ics{margin-top:var(--cm-gap-band);}
body.hub-body .hub-main:has(> .hub-seek) > .hub-tr{margin-top:84px;}
@media (max-width:1024px){
  body.hub-body .hub-main:has(> .hub-seek){--cm-band-pt:88px;--cm-gap-h1:48px;--cm-gap-band:28px;}
  body.hub-body .hub-main:has(> .hub-seek) > .hub-tr{margin-top:64px;}
}
@media (max-width:600px){
  body.hub-body .hub-main:has(> .hub-seek){--cm-band-pt:48px;--cm-gap-h1:28px;--cm-gap-band:24px;}
  body.hub-body .hub-main:has(> .hub-seek) > .hub-tr{margin-top:48px;}
}

/* ── (10) 1024 이하 — 2단 격자만 접는다 ──────────────────────────────────
   1열 전환은 600px 에서만 일어난다(키트 pitfalls : 768~1024 에서 접으면 태블릿에서
   세로로 크게 늘어난다). 이 폭에서 2열을 지키는 격자는 열 폭을 비율로 바꿔 준다. */
@media (max-width:1024px){
  html body.hub-body .steps,
  html body.hub-body .sum3,
  html body.hub-body .cm-steps,
  html body.hub-body .cm_stages{grid-template-columns:repeat(2, minmax(0,1fr));}
  /* [LAYOUT0828-R7] /terms/ 머리 띠 — 위 (7) 의 734 + 48 + 320 은 1024 에서 레인(976)을
     106px 넘겨 그 창만 가로 스크롤이 났다(실측 scrollWidth 1126). 규격대로 왼쪽 칸만 줄인다.
     되돌리려면 이 한 줄을 지운다(1024 에서 가로 넘침이 돌아온다). */
  body.hub-body .hub-band .hub-head{grid-template-columns:minmax(0,1fr) var(--cm-col-side);}
}

/* ── (11) 600 이하 — 여기 한 곳에서만 접는다 ─────────────────────────────
   열 수가 바뀌면 유효한 선도 바뀐다 : 세로선을 끄고 밑줄이 대신 가른다. */
@media (max-width:600px){
  html body.hub-body .steps,
  html body.hub-body .sum3,
  html body.hub-body .cm-steps,
  html body.hub-body .cm_stages{grid-template-columns:minmax(0,1fr);}
  /* 1열이 되면 밑줄이 이미 구분이므로 격자 세로 간격은 0 이다 */
  html body.hub-body .cm-steps,
  html body.hub-body .cm_stages{row-gap:0;}
  html body.hub-body .steps > .step:nth-child(-n+2){padding-top:var(--cm-gap-s);}
  html body.hub-body .steps > .step:first-child{padding-top:0;}
  body.hub-body .hub-band__as::before{display:none;}
  /* /terms/ 머리 띠는 이 폭에서 1열이다(그 창 규칙과 같은 값 — 무게만 맞춰 되돌린다) */
  body.hub-body .hub-band .hub-head{grid-template-columns:minmax(0,1fr);column-gap:0;}
  body.hub-body .hub-ft__note{grid-template-columns:minmax(0,1fr);}
  body.hub-body .hub-ft__note p + p{margin-top:var(--cm-gap-s);}
}


/* ── 18. 인쇄 ──────────────────────────────────────────────────────────────
   [WIN0827 공유시트] 이 파일 전체에 @media print 가 0건이었다.
   /terms/ · /privacy/ 는 캡처 · 출력 · PDF 보관 수요가 있는 문서인데, 인쇄하면
   다크 배경(#16171B)과 셸(헤더 · 메뉴 · 푸터 · 토스트)이 그대로 따라 나갔다.
   여기서는 셸을 걷어내고 바닥을 흰색으로 되돌리는 것까지만 한다 —
   두 창의 article 배경과 링크 URL 노출은 각 창의 인라인 시트가 맡는다.
   되돌리려면 이 절을 통째로 지운다.                                          */
@media print{
  .hub-skip,
  .hub-hd,
  .hub-nav,
  .hub-sticky,
  .hub-ft,
  .hub-toast{display:none !important;}
  .hub-body{background:#fff !important;color:#000 !important;}
  .hub-body :focus-visible{outline:none;}
}