/* ==========================================================================
   tokens.css — --c4-* 디자인 토큰의 **유일한 자리**
   --------------------------------------------------------------------------
   · 값의 정본은 시안(Figma)의 Color styles / Text styles 이고,
     이 파일과 DESIGN-TOKENS.md 는 그 사본이다.
   · 신규 토큰 추가는 언제나 허용. 기존 토큰의 **값 변경은 금지**.
     예외: 시안 Text · Color style 이 바뀌어 **사용자가 갱신을 지시한 경우**(작업 규칙 ③-1) —
     2026-10-06 `--c4-fs-page-title-m` 30 → 26 · `--c4-color-surface-code` #F2F2F2 → #F6F6F6.
   · 값이 같아도 의미가 다르면 분리 유지한다(배너 radius 8 ↔ 박스 radius 8).
     우연히 같다는 이유로 합치면 한쪽만 바뀔 때 다른 쪽이 끌려간다.
   · 반응형으로 갈리는 토큰(--c4-header-h, --c4-admin-bar-h)만 이 파일 안에서
     미디어 쿼리로 전환한다. 그 밖의 PC/모바일 쌍은 `-m` 접미어 토큰을 따로 두고
     사용처에서 골라 쓴다.
   · @font-face 는 여기 두지 않는다 — unicode-range 가 길어 토큰 목록의 가독성을
     해친다. assets/css/base/fonts.css 소관.
   ========================================================================== */

:root {

	/* ---------------------------------------------------------------
	   색 — 시안 Color styles
	   --------------------------------------------------------------- */
	--c4-color-text:            #212121;  /* grey900      기본 텍스트 */
	--c4-color-text-sub:        #5B5B5B;  /* grey700      보조 텍스트 */
	--c4-color-text-muted:      #8A8A8A;  /* grey500      상세 날짜 · 카피라이트 */
	--c4-color-text-faint:      #BCBCBC;  /* grey300      카드 날짜 · placeholder */
	--c4-color-surface-code:    #ECE8E5;  /* 회색 상자(메인 하단 정보 · 소개 글 상자 · 갤러리 띠 · 본문 코드) — 붉은 기가 도는 따뜻한 회색(2026-10-14 사용자 지시 'ECE8E5 로 · 누런 느낌 말고 레드끼' · 그 전 #EFEDE8 · 처음 #F6F6F6) */
	--c4-color-border:          #E6E6E6;  /* divider      테두리 · 구분선 */
	--c4-color-white:           #FFFFFF;  /* white — 버튼 · 팝업 창 · 입력칸 · 탭 · 카드 판은 계속 흰색 */
	--c4-color-page-bg:         #F9F8F5;  /* 페이지 바탕 — 따뜻한 아이보리(2026-10-14 사용자 지시 · 팝업 이미지 바탕 #F4F3F0 보다 밝게 · 처음엔 흰색) */
	--c4-color-footer-bg:       #2E2E2E;  /* bg_darkgrey  푸터 배경 */

	/* 포인트 컬러 — 단일 출처. 관리자 [테마 디자인 > 사이트 공통 > 일반]에서 덮어쓴다.
	   덮어쓸 때는 --c4-color-accent-soft 의 **두 줄을 함께** 갱신한다. */
	--c4-color-accent:          #32B493;  /* Accent1 */

	/* 파생색 — 폴백 선언을 앞에, color-mix 를 뒤에 둔다.
	   color-mix 미지원 브라우저에서 호버가 아예 안 뜨는 것을 막기 위한 것이며,
	   "hex 하드코딩 금지"의 명시적 예외다. */
	--c4-color-accent-soft:     rgba(50, 180, 147, .1);
	--c4-color-accent-soft:     color-mix(in srgb, var(--c4-color-accent) 10%, transparent);

	/* 포커스 링 — 2026-10-13 사용자 지시로 **포인트 컬러를 따른다**("관리자에서 지정한 포인트 컬러로 보이는 곳은 전부 지정한 색으로 통일").
	   처음엔 대비 확보용 독립 토큰(시안 #279A7E)이었다. 아래 --c4-color-focus 선언 참고. */
	/* ★ 폼 에러 전용. **시안에 에러 색이 없어 7단계에서 신설**했다.
	   흰 배경 위 대비 4.98:1 로 WCAG AA(4.5:1)를 넘는다.
	   Fluent Forms 의 `--fluentform-danger` 를 이 값으로 갈아 끼워 쓴다. */
	--c4-color-error: #D32F2F;

	--c4-color-focus:           var(--c4-color-accent);   /* 키보드 포커스 링 · 폼 칸 포커스 테두리 — 포인트 컬러 그대로(시안 값은 #279A7E 였다) */

	/* 카드 썸네일 자리표시 배경. 연한 텍스트와 값이 같지만 의미가 달라 분리 유지. */
	--c4-color-img-placeholder: #BCBCBC;

	/* PC 헤더 배경(반투명 + backdrop blur). 모바일 헤더·드로어는 불투명 white. */
	--c4-color-header-bg:       rgba(249, 248, 245, .8);   /* 헤더 — 페이지 바탕(#F9F8F5)을 반투명으로(2026-10-14 · 처음엔 흰색 70%) */

	/* ---------------------------------------------------------------
	   폰트
	   --------------------------------------------------------------- */
	--c4-font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui,
	                  "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕",
	                  "Helvetica Neue", Arial, sans-serif;

	/* 코드 전용 — 본문 폰트(Pretendard)를 상속하면 <code>·<pre> 가 등폭이 아니라
	   글자 폭이 들쭉날쭉해진다. 시안에 코드 실물이 없어 시스템 등폭 스택을 쓴다. */
	--c4-font-serif: "NanumMyeongjo", "AppleMyungjo", "Noto Serif KR", serif;   /* 명조 — 모든 제목 · 헤더 메뉴 · 헤더 버튼(2026-10-14 사용자 지시 · 나눔명조 700 · fonts.css ③ · 쓰는 곳 base.css '제목 명조') */
	--c4-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
	                "Liberation Mono", monospace;

	--c4-fw-regular: 400;
	--c4-fw-medium:  500;
	--c4-fw-bold:    700;

	/* 시안 자간은 전부 -4%(로고만 0). em 은 선언한 요소의 font-size 로 계산되므로
	   base.css 에서 **전역 선택자**로 걸어 각 요소가 자기 크기로 다시 계산하게 한다.
	   body 한 곳에만 걸면 페이지 제목처럼 큰 글자까지 본문 크기 기준값을 쓴다. */
	--c4-tracking:      -0.04em;
	--c4-serif-title-ls: -0.06em;   /* 명조 제목 자간 −6%(2026-10-14 사용자 지시 '나눔명조들 전부 자간 +2' · 그 전 '명조 타이틀들 전부 -8% 통일' — base.css '제목 명조' · 히어로 제목 토큰 --c4-main-hero-title-ls 는 이 값으로 합쳐 삭제) */
	--c4-serif-ls:      -0.02em;    /* 제목이 아닌 명조(헤더 메뉴 · 전화예약 버튼 글자 · 히어로 숫자) 자간 −2%(같은 날 '나눔명조들 전부 자간 +2' — 그 전 전역 −4%) */
	--c4-tracking-logo: 0;

	/* 계열별 크기 · 줄간격 — 서로 재사용 금지 */
	--c4-fs-page-title:      44px;   --c4-fs-page-title-m:   26px;   --c4-lh-page-title:   1.3;   /* 모바일 — 시안 갱신(2026-10-06): 30 → 26 */
	--c4-fs-single-title:    32px;   --c4-fs-single-title-m: 22px;   --c4-lh-single-title: 1.2;
	--c4-single-subtitle-fs: 20px;   --c4-single-subtitle-fs-m: 16px;   --c4-single-subtitle-gap: 4px;   /* 글 상세 부제목(제목 윗줄 · 2026-10-13 · 시안에 없는 값) */
	--c4-fs-post-title:      25px;                                   --c4-lh-post-title:   1.3;   /* 2026-10-12 사용자 지시: 시안 17 + 8 */
	--c4-fs-article-h2:      24px;   --c4-fs-article-h2-m:   20px;
	--c4-fs-article-h3:      22px;   --c4-fs-article-h3-m:   18px;
	--c4-fs-article-h4:      20px;   --c4-fs-article-h4-m:   17px;   /* 4단계 확정 — h3(22/18)보다 한 단계 작게, 굵기는 h3 와 동일 */
	--c4-fs-article-body:    17px;                                   --c4-lh-article:      1.9;
	--c4-fs-menu:            17px;                                   --c4-lh-menu:         1.5;
	--c4-tab-dur:           .35s;   /* 탭(목록 · FAQ · 언론보도 분류 탭) 색 바뀜 — 누른 탭이 검게 차오르고 이전 탭이 비워지는 시간(2026-10-14 사용자 지시 · tabs.js 가 이만큼 기다렸다 옮겨 간다) */
	--c4-menu-line-w:       1px;    /* 헤더 메뉴 마우스 올림 밑줄 굵기(2026-10-14 사용자 지시 · 같은 날 '너무 두꺼워 — 1px' · 그 전 2) */
	--c4-menu-line-offset: -2px;    /*   └ 글자 아래로(같은 날 '선 위치 4px 위로' · 그 전 −6) */
	--c4-menu-line-dur:    .4s;     /*   └ 그어지는 시간(부드럽게) */
	--c4-menu-line-ease:   cubic-bezier(.22, .61, .36, 1);
	--c4-menu-line-room:   10px;    /*   └ 메뉴 칸(nav) 위아래 여유 — 밑줄(아래 6 + 굵기 2)이 잘리지 않게(header.css · 2026-10-14) */
	--c4-fs-menu-m:          22px;                                   --c4-lh-menu-m:       1.2;
	--c4-fs-logo:            20px;                                   --c4-lh-logo:         1.4;

	/* 헤더 CTA — 계열 `Body/body2_bold`.
	   ★ 2단계에서 시안이 정리돼 값이 하나로 모였다(1a 당시 마스터 1.5 ↔ 인스턴스 1.4 갈림 해소).
	     헤더 PC·모바일 드로어 둘 다 Button 마스터를 그대로 쓰며 줄간격 1.5 로 렌더된다.
	   계열마다 별도 토큰이라는 규칙에 따라 body2 토큰을 끌어다 쓰지 않고 자기 토큰을 유지한다. */
	--c4-fs-cta:             16px;                                   --c4-lh-cta:          1.5;

	--c4-fs-body1: 17px;
	--c4-fs-body2: 16px;
	--c4-fs-body3: 15px;
	--c4-fs-body4: 14px;
	--c4-lh-body:  1.5;                 /* body1~body4 공통 */
	--c4-fs-caption: 14px;              --c4-lh-caption: 1.4;

	/* Text style 이 없어 렌더 값으로 확정한 예외(시안에 대응 스타일 없음) */
	--c4-fs-single-date: 14px;          /* 굵기는 --c4-fw-medium */

	/* 카테고리 라벨 — 두 값이 다르다, 통일 금지 */
	--c4-lh-cat-label-card:   1.5;
	--c4-lh-cat-label-single: 1.2;

	/* ---------------------------------------------------------------
	   레이아웃 · 컨테이너
	   --------------------------------------------------------------- */
	--c4-container-w:   1280px;  /* 헤더 · 푸터 콘텐츠 폭 */
	--c4-container-pad:   20px;  /* 헤더 · 푸터 PC 좌우 패딩 */
	--c4-content-w:      720px;  /* 본문 컬럼 */
	--c4-side-w:         242px;  /* 사이드 박스 · 좌측 빈 스페이서 */
	--c4-side-gap:        40px;  /* 3열 그리드의 column-gap */

	--c4-gutter-mobile:        24px;  /* 모바일 콘텐츠 좌우 여백 (375 - 48 = 327) */
	--c4-gutter-mobile-chrome: 20px;  /* 헤더 · 푸터 전용 예외 */

	/* 전환 기준선 3개 — 용도가 다르다, 서로 대체 금지.
	   미디어 쿼리에는 var() 를 쓸 수 없으므로 이 값들은 참조용이며
	   실제 쿼리에는 숫자를 직접 적는다(767.98 / 1023.98 / 1359.98). */
	--c4-bp-base:   768px;   /* PC/모바일 값 전환 */
	--c4-bp-drawer: 1024px;  /* 헤더 메뉴 → 드로어 */
	--c4-bp-side:   1360px;  /* 사이드 박스 인라인 전환 */

	/* 헤더 높이 — 전환은 768 에서. 1024 는 드로어 전용 경계이므로 쓰지 말 것. */
	--c4-header-h: 80px;

	/* 관리자 바 보정 — 기본 0. is_admin_bar_showing() 일 때만 PHP 가 :root 에 덮어쓴다.
	   body.admin-bar 에 정의하면 <html> 의 scroll-padding-top 이 못 읽는다. */
	--c4-admin-bar-h: 0px;

	/* ---------------------------------------------------------------
	   페이지 세로 여백 — DESIGN-TOKENS.md §3-4 표가 단일 출처
	   --------------------------------------------------------------- */
	--c4-page-pt:         53px;   --c4-page-pt-m: 40px;   /* 상단(헤더 → 제목) — 전 화면 공통. 80 / 60 → 53 / 40(2026-10-13 사용자 지시 '헤더 - 타이틀 여백 1/3 축소') */

	/* 하단은 화면마다 다르다. ★ 공통 토큰 하나로 묶지 말 것 —
	   `--c4-page-pb` 처럼 화면 이름이 없는 토큰을 만들면 다음 단계가 자기 화면 값을
	   거기에 덮어쓰게 된다. 이름에 반드시 화면을 넣는다.
	   ★ 아래 넷은 아직 참조가 0이지만 **각 단계가 쓸 예정이라 지우지 말 것**
	     (참조 0 정리 규칙의 대상이 아니다 — 값은 확정값 표에서 이미 확정됐다). */
	--c4-page-pb-page:    60px;   /* 약관 · 그 밖의 고정 페이지 · 공지 상세 — **1b 사용 중** · 푸터 앞 여백 60 통일(2026-10-14 사용자 지시 '푸터 위 패딩 전부 60' · 같은 날 처음엔 '전부 40') */
	--c4-page-pb-list:    60px;   /* 목록 · 카테고리 · 검색 [3·5단계] — 60 통일(2026-10-14 · 그 전 40) */
	--c4-page-pb-single:  60px;   /* 상세 [4단계] — 60 통일(2026-10-14) */
	--c4-page-pb-empty:   60px;   /* 빈 상태 · 404 [6단계] — 60 통일(2026-10-14 · 그 전 40) */
	/* ★ `--c4-page-pb-form` / `-m`(60/40) 도 같은 이유로 **참조 0 이 되어 제거**했다.
	   폼 페이지가 `page.php` 를 쓰므로 하단 여백은 `--c4-page-pb-page`(60) 를 따른다.
	   확정값 §3-4 '문의 폼' 줄에 그 사유를 적어 두었다 — 8단계에서 불일치로 잡지 말 것. */

	/* 고정 페이지 제목 → 본문. 고정 페이지는 목록이 아니라 **상세와 같은 리듬**을 쓴다. */
	--c4-page-title-gap:  40px;   --c4-page-title-gap-m: 28px;

	/* 목록 화면 내부 간격 — 값이 서로 달라 각각 토큰을 둔다(시안 실측) */
	--c4-list-gap-title:      60px;  --c4-list-gap-title-m:      40px;  /* 제목 → 카드 리스트(탭이 없을 때) */
	--c4-list-gap-title-tabs: 30px;  --c4-list-gap-title-tabs-m: 20px;  /* 제목 → 카테고리 탭 — 60 / 40 의 1/2(2026-10-13 사용자 지시 '타이틀 - 탭 여백 1/2') */
	--c4-list-gap-tabs:       48px;  --c4-list-gap-tabs-m:       40px;  /* 카테고리 탭 → 카드 리스트(2026-10-13 · FAQ --c4-faq-gap-tabs 와 같은 값) */
	--c4-list-tab-pad:  10px 24px;   /* 카테고리 탭(알약) 안쪽 — FAQ 탭과 같다 */
	--c4-tab-h-m:       42px;  --c4-tab-fs-m: 15px;   /* 휴대폰 탭(목록 · FAQ · 언론보도 모두) 높이 · 글자(2026-10-15 사용자 지시 '모든 탭은 높이 42 · 텍스트 15 · 모든 페이지 일괄') */
	--c4-list-tab-gap:   8px;        /* 탭 ↔ 탭 */
	--c4-list-wide-pad-m: 20px;      /* 넓은 목록(세로 카드 · 옆 상자 없음) 모바일 좌우 — 소개 콘텐츠 --c4-about-content-pad-m 과 같은 값(2026-10-13) */
	--c4-list-gap-pagination: 60px;  --c4-list-gap-pagination-m: 60px;  /* 카드 리스트 → 페이지네이션 */
	--c4-list-gap-search:     60px;  --c4-list-gap-search-m:     40px;  /* 페이지네이션 → 검색 폼 */
	/* ★★ 이 두 줄은 한 번 잘못 뒤집힌 적이 있다. 근거는 목록 Mobile 프레임 좌표다 —
	   card-list 끝 1792 → Pagination 상단 1852 = **60**
	   Pagination 끝 1874 → Search 상단 1914 = **40**
	   즉 리스트→페이지네이션은 PC·모바일 **둘 다 60**, 페이지네이션→검색 폼만 모바일에서 40 으로 준다.
	   "모바일이니까 좁아진다"는 짐작으로 40 을 넣지 말 것. 좁아지는 건 뒤엣것 하나뿐이다. */

	/* 화면 내부 공통 리듬 */
	--c4-gap-section: 60px;  /* 목록 섹션 간 */
	--c4-gap-block:   40px;  --c4-gap-block-m: 20px;  /* 아티클 블록 간 */
	/* ★★ 모바일 20 이다 — 28 이 아니다. 상세 Mobile 실측:
	     section 끝 476 → 다음 496 = 20 / 734 → 754 = 20 / 대표 이미지 끝 218 → 첫 section 238 = 20.
	   ★ **28 은 아티클 바깥 경계에만 쓴다** — 제목 블록 → 목차 → 대표 이미지, 배너 위아래.
	     안쪽(블록 사이)과 바깥(경계)이 서로 다른 값이라 하나로 묶지 말 것.
	     PC 는 안팎 모두 40 이라 구분이 드러나지 않는다. 모바일에서만 갈린다. */
	--c4-gap-heading:  8px;  /* 헤딩 ↔ 문단 — PC · 모바일 동일 */

	/* 아티클 본문 요소 (.c4-entry-content) — 4단계 확정.
	   ★ 세로 간격은 시안 리듬 8 / 20 / 40 에서만 고른다. 중간값을 새로 만들지 말 것.
	   ★ 표 전용 색·크기 토큰은 만들지 않는다(프롬프트 지시) — 셀 테두리는 --c4-color-border,
	     헤더 행은 **굵기로만** 구분한다. */
	--c4-article-list-indent: 20px;  /* ul · ol 좌측 들여쓰기 */
	--c4-article-list-gap:     8px;  /* 목록 항목 간 */
	--c4-quote-indent:        20px;  /* blockquote 좌측 세로선 ↔ 글자 */
	--c4-figcaption-gap:       8px;  /* 이미지 → 캡션 */
	--c4-table-cell-pad:  8px 20px;  /* 표 셀 안쪽 여백 */
	--c4-code-pad:        20px;      /* 코드블록 안쪽 여백 */
	--c4-code-pad-inline: 2px 6px;   /* 인라인 code */

	/* ---------------------------------------------------------------
	   컴포넌트 치수
	   --------------------------------------------------------------- */
	/* 카드 — 썸네일 ↔ 텍스트 간격(PC 가로 / 모바일 세로) */
	--c4-card-gap:      28px;   --c4-card-gap-m: 12px;
	--c4-card-text-gap:  6px;
	/* 상단 패딩은 PC 만. 모바일은 썸네일과의 간격 12 가 그 역할을 한다. */
	--c4-card-text-pt:   8px;
	/* 카드 ↔ 카드. 위의 --c4-card-gap(썸네일↔텍스트)과 다른 값이다, 섞지 말 것. */
	--c4-card-list-gap: 30px;   --c4-card-list-gap-m: 14px;   /* 2026-10-12 사용자 지시: 시안 60 / 28 의 1/2 */
	--c4-card-thumb-w: 300px;
	--c4-card-thumb-h: 180px;
	--c4-card-thumb-ratio: 5 / 3;
	/* 세로 카드([블로그 > 목록] '카드 모양' 세로 · 2026-10-13 사용자 지시 · 시안에 없는 값) */
	--c4-card-stack-gap-x:    20px;   /* 두 칸 사이 */
	--c4-card-stack-gap-y:    48px;   --c4-card-stack-gap-y-m: 32px;   /* 줄 사이 */
	--c4-card-stack-text-gap: 16px;   /* 사진 → 글(모바일은 --c4-card-gap-m 12) */
	--c4-card-stack-sub-gap:   0px;   /* 부제목 → 제목 — 보이는 간격 약 11.8 → 7.8(1/3 줄임 · 2026-10-13 사용자 지시 · 글줄 위아래 여유만 남는다) */
	--c4-card-stack-line-gap:  4px;   /* 제목 → 날짜 */
	--c4-card-badge-inset:    12px;   /* 카테고리 배지 — 사진 왼쪽 위에서 */
	--c4-card-badge-pad:   4px 12px;
	--c4-card-badge-dur:   .35s;                         /* '전체' 탭 — 마우스를 올리면 배지가 위에서 내려오는 시간 */
	--c4-card-badge-ease:  cubic-bezier(.25, .6, .3, 1); /*   └ 리빌과 같은 감속 */
	/* 사진 위 글 카드(2026-10-13 · `blog_list_card_style_1` = `overlay` · 시안에 없는 값) — 부제목 · 제목을 사진 왼쪽 아래에 검은 글자로 얹는다(사진 어둡게 없음) */
	--c4-card-overlay-ratio:   1 / 1;  /* 사진 비율 — 정사각(2026-10-13 사용자 지시 · 세로 · 가로 카드는 5 : 3 그대로) */
	--c4-card-overlay-gap-y:   20px;   /* 줄 사이 — 사진 아래 글이 없으니 칸 사이(--c4-card-stack-gap-x)와 같게 */
	--c4-card-overlay-pad:     24px;   --c4-card-overlay-pad-m: 20px;   /* 사진 가장자리 → 글 · 화살표 */
	--c4-card-overlay-title-fs: 32px;  --c4-card-overlay-title-fs-m: 24px;   /* 사진 위 제목(2026-10-13 사용자 지시 32 · 모바일은 같은 비율로 24) */
	--c4-card-overlay-sub-fs:   20px;  --c4-card-overlay-sub-fs-m:   16px;
	--c4-card-overlay-2col-title-fs-m: 18px;  --c4-card-overlay-2col-sub-fs-m: 14px;  --c4-card-overlay-2col-pad-m: 14px;  --c4-card-overlay-2col-gap-m: 12px;   /* 휴대폰 두 칸(진료과목 — 2026-10-15 사용자 지시 '이미지 전부 2열') — 카드 폭 약 160 에 맞춘 글자 · 여백 · 칸 사이 */   /* 사진 위 부제목(같은 날 사용자 지시 20 · 모바일 16) */
	--c4-card-overlay-all-ratio-m: 9 / 4;  --c4-card-overlay-all-gap-m: 12px;   /* 휴대폰 진료과목 '전체' 탭 — 1열 · 사진 9 : 4 · 줄 사이 12(2026-10-15 사용자 지시 '전체 탭만 1열 · 카드 비율 2x1' → 같은 날 '높이 살짝 · 행간도 살짝 줄여' — 2 : 1 · 16 에서) */
	--c4-card-overlay-all-title-fs-m: 24px;  --c4-card-overlay-all-sub-fs-m: 15px;  --c4-card-overlay-all-pad-m: 20px;   /*   └ 제목 24 · 가장자리 20 은 메인 휴대폰 카드와 같게 · 부제목 15(같은 날 사용자 지시 '전체 탭의 작은 글자 15px' · 그 전 14) */
	--c4-card-overlay-badge-fs: calc(var(--c4-fs-body4) + 2px);   /* 사진 위 분류 배지 글자 16(같은 날 사용자 지시 '+2px' · 세로 카드 배지는 14 그대로) */
	--c4-card-arrow-size:      44px;   /* 오른쪽 아래 화살표 동그라미(흰 바탕 · 포인트 컬러 화살표 — 2026-10-13 사용자 지시로 색 뒤집음) */
	--c4-card-chip-shadow:     0 2px 8px rgb(0 0 0 / .12);   /* 사진 위 흰 배지 · 흰 화살표 동그라미가 밝은 사진에 묻히지 않게(팝업 화살표 그림자와 같은 결 · 더 옅게) */
	--c4-card-arrow-icon:      20px;
	--c4-card-arrow-gap:       12px;   /* 글 ↔ 화살표 */
	--c4-card-arrow-dur:       .5s;                          /* 마우스를 올리면 오른쪽에서 들어오는 시간 */
	--c4-card-arrow-ease:      cubic-bezier(.25, .6, .3, 1); /*   └ 리빌과 같은 감속 */
	--c4-card-arrow-sway:      2px;    /* 좌우로 흔들리는 폭(한쪽 · 2026-10-13 사용자 지시 '더 조금' 4 → 2) */
	/* 세 칸 카드(블로그 목록 '카드 모양' · 2026-10-14 사용자 지시 — 닥터노트 목록 · 참고 그림 비율) */
	--c4-card-note-gap-x:      32px;   --c4-card-note-gap-y: 48px;   --c4-card-note-gap-y-m: 40px;   /* 칸 사이 · 줄 사이 */
	--c4-card-note-ratio:      16 / 9; --c4-card-note-radius: 12px;
	--c4-card-note-text-gap:   24px;   --c4-card-note-text-gap-m: 16px;   /* 사진 → 카테고리 */
	--c4-card-note-cat-fs:     14px;   --c4-card-note-cat-fs-m: 14px;   --c4-card-note-cat-gap: 8px;   /* 카테고리(굵게 · 포인트 컬러) → 제목 */
	--c4-card-note-title-fs:   22px;   --c4-card-note-title-fs-m: 19px;  --c4-card-note-title-lh: 1.5;  /* 제목 두 줄 */
	--c4-card-note-excerpt-fs: 16px;   --c4-card-note-excerpt-fs-m: 15px;  --c4-card-note-excerpt-lh: 1.5;   /* 요약 줄 높이 1.5(2026-10-15 사용자 지시 '닥터노트 설명 행간 줄여' · 그 전 1.75 · 본문 --c4-lh-body 와 같다) */
	--c4-card-note-excerpt-gap: 7px;   /* 제목 → 요약 — 처음 14 의 절반(사용자 지시) */
	--c4-card-note-date-gap:   10px;   /* 작성일 왼쪽 여유 — 작성일이 카테고리 줄 오른쪽으로 올라갔다(2026-10-14 사용자 지시 · 그 전 요약 → 작성일 · 처음 20 의 절반) */
	--c4-card-note-date-fs:    14px;   --c4-card-note-date-fs-m: 14px;
	--c4-card-img-hover-zoom:  1.03;   /* 사진 위 글 카드 — 마우스를 올리면 사진 아주 살짝 확대(2026-10-14 사용자 지시) */
	--c4-card-img-hover-blur:  1.5px;  /*   └ 살짝 흐리게 */
	--c4-card-img-hover-bleed: 6px;    /*   └ 사진을 칸보다 사방으로 이만큼 크게 — 흐린 가장자리(흐림 × 3 쯤)를 늘 칸 밖에(card.css · 2026-10-14 '호버 뒤 검은 선') */
	--c4-card-img-hover-dur:   .8s;    /*   └ 시간 */
	--c4-card-img-hover-ease:  cubic-bezier(.22, .61, .36, 1);   /*   └ 이즈 아웃(빠르게 시작 · 천천히 멈춤) */
	--c4-card-arrow-sway-dur:  .6s;    /*   └ 한쪽 끝 → 다른 쪽 끝(왕복 1.2초) */

	--c4-side-header-h:       48px;
	--c4-side-header-pad:     12px 20px;
	--c4-side-body-pad:       15px 24px;
	--c4-side-item-gap:        8px;
	--c4-side-indent:         12px;
	--c4-side-chevron-w:      12px;
	--c4-side-chevron-h:       6px;
	--c4-side-sticky-offset:  24px;
	--c4-transition-side:     .25s ease;

	/* 관련글('같은 카테고리 글') 박스 — 4단계.
	   ★ 항목 사이 gap 은 **0** 이다. 간격은 항목 링크의 padding 으로만 만든다.
	     gap 을 주면 호버 배경이 항목 사이에서 끊겨 줄무늬처럼 보인다. */
	--c4-related-max-h:       350px;  --c4-related-max-h-m:  334px;  /* 최대치 — 고정 height 금지 */
	--c4-related-pad:         16px 20px;                             /* 박스 헤더 안쪽 여백 */
	--c4-related-head-h:      53px;
	--c4-related-list-pad-y:  8px;    --c4-related-list-pad-y-m: 6px;  /* 리스트 컨테이너 상하(좌우는 0) */
	--c4-related-item-pad:    8px 20px;                              /* 항목 링크 — 항목 높이 PC 40 / 모바일 38.5 를 만든다 */
	--c4-related-gutter:      8px;    --c4-related-gutter-m:     6px;  /* 스크롤바 쪽 안쪽 여백(위·오른쪽 동일) */
	--c4-scrollbar-w:         4px;

	/* 상세 화면 — 4단계 */
	--c4-single-cat-gap:     14px;                                   /* 카테고리 라벨(배지) → 제목 — 2026-10-15 사용자 지시 '배지 - 타이틀 간 여백 좀 더 넓게'(그 전 8) */
	--c4-single-date-gap:    20px;   --c4-single-date-gap-m:  12px;  /* 제목 → 날짜 */
	--c4-single-head-gap:    40px;   --c4-single-head-gap-m:  28px;  /* 제목 블록 → 다음 요소(목차/대표 이미지) — 아래 선부터 잰다 */
	--c4-single-head-line-gap: 24px; --c4-single-head-line-gap-m: 20px;  /* 날짜 → 제목 블록 아래 검은 선(2026-10-15 사용자 지시 '상세페이지 제목 · 날짜 밑에 검은색 선') */
	--c4-single-banner-gap:  40px;   --c4-single-banner-gap-m: 28px; /* 본문 ↔ 중간 배너 ↔ 관련글 */
	--c4-single-back-gap:    60px;   --c4-single-back-gap-m:   40px; /* 관련 글 → '목록으로' 버튼(2026-10-14 사용자 지시 · 처음엔 본문 → 버튼) */
	--c4-toc-inline-gap:     28px;                                   /* 모바일 인라인 목차 → 본문 */

	/* 빈 상태 · 404 — 6단계.
	   ★ '페이지 제목 블록 → 문구' 는 목록의 '제목 → 카드'(60/40)와 **다른 값이 맞다**(시안 실측).
	     빈 상태 PC: 섹션 gap 48 + 메시지 래퍼 padding-top 60 = 108. 모바일은 80.
	   ★ '문구 → 검색 폼' 은 **가변**이라 토큰이 없다. 시안의 PC 370 / 모바일 204 는
	     프레임 높이에서 나온 결과값이지 확정값이 아니다 — 박지 말 것. */
	--c4-empty-gap:         108px;  --c4-empty-gap-m: 80px;
	/* ★ 404 전용, 시안 없음. 값이 24 인 기존 토큰(드로어 항목 간격 등)을 빌려 쓰지 않는다 —
	   값이 같아도 의미가 다르면 분리한다. 빌려 쓰면 그쪽을 바꿀 때 404 간격이 따라 움직인다. */
	--c4-404-link-gap:       24px;

	/* 문의 폼 페이지 — 7단계.
	   ★ 폼 **높이** 토큰은 만들지 않는다. 작업자가 문항을 몇 개 넣느냐에 따라 완전 가변이고,
	     시안 박스 높이(PC 476 / 모바일 264)는 자리 표시용으로 대충 그린 값이다. 폭만 실측값이다. */
	/* ★ `--c4-form-sub-gap`(제목→부제 8) · `--c4-form-head-gap`(제목블록→폼 48/40) 은
	   **전용 페이지 템플릿을 만들지 않기로 하면서 참조 0 이 되어 제거**했다(작업 규칙 ②).
	   문의 폼 페이지는 `page.php` 를 그대로 쓰므로 부제 줄이 없고 제목 리듬도 고정 페이지 것을 따른다. */
	--c4-form-field-gap:     20px;                                  /* 필드 묶음 사이 */
	--c4-form-input-h:       48px;                                  /* 입력 · 셀렉트 · 제출 버튼 */
	--c4-form-input-pad-x:   16px;
	--c4-form-textarea-min-h: 120px;                                /* ★ 최소값이다. 고정 높이가 아니다 */
	--c4-form-textarea-pad-y: 14px;
	--c4-form-message-pad:   16px;
	/* ★ 모바일 입력만 16 으로 올린다 — iOS Safari 가 16 미만 입력에서 화면을 자동 확대한다.
	     라벨은 body3(15) 그대로 둔다. */
	--c4-form-input-fs-m:    16px;
	/* 제출 버튼 호버 — accent-soft(10% 투명)는 버튼 배경으로 쓰면 글자가 안 보인다.
	   포인트 컬러 참조를 유지한 채 밝기만 조정한다. */
	--c4-form-btn-hover-brightness: .92;
	/* 목차 내부 스크롤 상한 — ★ 고정 높이가 아니라 **화면에서 계산**한다.
	   숫자를 박으면 관리자 바가 있을 때(로그인 상태) 목차 아래가 잘린다. */
	--c4-toc-max-h: calc(100vh - var(--c4-admin-bar-h, 0px) - var(--c4-header-h)
	                     - var(--c4-side-header-h) - var(--c4-side-sticky-offset) * 2);

	/* 페이지네이션 — 모든 항목(숫자·화살표·현재 페이지·빈 슬롯)이 같은 크기 슬롯을 차지한다.
	   현재 페이지는 그 슬롯에 배경만 칠하는 것이지 더 커지지 않는다.
	   그렇게 하지 않으면 페이지를 넘길 때마다 숫자 가로 위치가 들쭉날쭉해진다. */
	--c4-page-slot-w:  26px;   /* = --c4-page-chip 과 같은 폭 */
	--c4-page-slot-h:  26px;   /* 정사각형(가로 26 과 같게 · 2026-10-14 사용자 지시 '페이지네이션 공통 · 파란 박스 정사각형으로' · 그 전 시안 22) */
	--c4-page-slot-gap: 4px;   /* 슬롯 26 + 간격 4 = 시안의 중심 간격 30 */
	--c4-page-num-gap: 30px;   /* 참고용 중심 간격(시안 실측) */
	--c4-page-chip:    26px;
	--c4-page-arrow-w: 12px;   /* chevron. 사이드 박스와 같은 자산이지만 의미가 달라 분리 */
	--c4-page-arrow-h:  6px;

	--c4-search-w:      400px;
	--c4-search-h:       48px;
	--c4-search-border:   2px;
	--c4-search-pad:     15px 19px;
	--c4-search-icon:    16px;
	--c4-search-gap:     16px;

	/* 메뉴 항목 간격 — 기본 32, 헤더 컨테이너에 여유가 없어지는 구간에서 16.
	   ★★ 전환 지점 1279px 은 **헤더 안에서만 쓰는 국소값**이다(헤더 컨테이너 1280에서 도출).
	      전환 기준선 3개(768·1024·1360)에 끼워 넣는 값이 아니다 — 그 셋은 화면 구성이
	      바뀌는 선이고 이건 헤더 내부 사정이다. 다른 곳에 기준선으로 쓰지 말 것.
	      (미디어 쿼리 조건부라 토큰이 아니라 리터럴로 적는다 — §6-1 예외) */
	--c4-menu-gap:        32px;
	--c4-menu-gap-narrow: 16px;

	--c4-burger-size:     32px;   --c4-burger-size-m: 26px;   /* 햄버거(태블릿 32 · 휴대폰 26 — 2026-10-15 사용자 지시 '로고와 햄버거 축소') */
	--c4-logo-h-m:        36px;   --c4-logo-w-m: 143px;       /* 휴대폰 헤더 로고 칸(48 × 190 의 3/4 · 같은 날) */
	--c4-drawer-item-step: 60ms;  --c4-drawer-item-dur: .5s;   /* 서랍 메뉴가 열릴 때 위에서부터 차례로 떠오르는 간격 · 시간(같은 날 '계단식 리빌') */
	--c4-fixed-cta-dur:   .5s;    /* 첫 스크롤에 아래에서 올라오는 시간(2026-10-15 사용자 지시 '스크롤 1번이라도 하면 아래서 위로 스르륵') */
	--c4-fixed-cta-h:     56px;   /* 휴대폰 화면 아래 고정 전화예약 띠 높이(같은 날 '모든 페이지 하단에 fixed · 풀블리드') */
	--c4-logo-indent-m:    4px;   /* 모바일 헤더에서 로고만 안쪽으로 들여쓰는 값(기준선 24) */

	/* 드로어 */
	--c4-drawer-item-gap:   24px;
	--c4-drawer-pad-x:      24px;
	--c4-drawer-pad-top:    24px;
	--c4-drawer-pad-bottom: 12px;
	--c4-drawer-cta-bottom: 24px;

	/* CTA — --c4-cta-w 는 **하한선(min-width)** 이지 목표치가 아니다.
	   문구가 옵션이라 길어질 수 있어 고정폭을 주면 넘친다.
	   시안 문구에서도 아이콘·간격·패딩까지 더해 120보다 조금 넓게 렌더되는 것이 정상. */
	--c4-cta-w:      120px;
	--c4-cta-h:       48px;
	--c4-cta-pad:     10px 21px;
	--c4-cta-gap:      6px;
	--c4-cta-icon:    19px;
	--c4-cta-text-stroke: .45px;   /* 헤더 전화예약 글자 굵게 보이는 선(2026-10-14 사용자 지시 '볼드체로' — 나눔명조 700 한 벌뿐) */
	/* Hover 는 반전형(흰 배경 + accent 2px 테두리 + accent 문구·아이콘).
	   기본 상태에도 같은 폭의 투명 테두리를 둬서 호버 시 박스가 흔들리지 않게 한다. */
	--c4-cta-border:   2px;

	/* 문의하기 버튼 PC 팝업(옵션 '전화번호'가 있을 때만 · 2026-10-12 사용자 지시 — 시안에 없는 화면이라 기존 토큰 조합 + 아래 값).
	   2차: 사이트 톤(흰 상자 · 포인트 컬러) + 예약 안내 회색 상자. 색 · 글자 크기는 테마 토큰(accent · text-sub · fs-body1~3 · radius-img · radius-box). */
	/* 계단식 리빌(2026-10-12 사용자 지시 · 시안에 없는 값) — base/reveal.css · assets/js/reveal.js */
	--c4-reveal-shift:    24px;    /* 아래에서 올라오는 거리 */
	--c4-reveal-dur:      1s;      /* 한 덩어리가 나타나는 시간 — .7s 는 '급하게 뜨는 느낌'(같은 날 사용자 지시로 늦춤) */
	--c4-reveal-ease:     cubic-bezier(.25, .6, .3, 1);   /* 처음이 덜 가파른 감속(전 .2, .7, .2, 1 은 첫 순간에 거의 다 나타났다) */
	--c4-reveal-step:     150ms;   /* 같이 들어온 것끼리 하나씩 늦추는 간격(reveal.js 가 읽는다 — ms 숫자로 둘 것) · 90 → 150(같은 날 사용자 지시) */
	--c4-reveal-step-max: 6;       /*   └ 최대 단계 — 많이 들어와도 0.9초 넘게 기다리지 않게 */

	--c4-cta-popup-dim:       rgb(0 0 0 / .6);   /* 어두운 배경(::backdrop) */
	--c4-cta-popup-gutter:    color-mix(in srgb, var(--c4-color-page-bg), #000 60%);   /* 열린 동안 오른쪽 스크롤바 자리 — 페이지 바탕 위 dim 과 같은 색. dim · 바탕을 바꾸면 같이 */
	--c4-cta-popup-fade:      .2s ease;          /* 열릴 때 서서히 */
	--c4-cta-popup-edge:      40px;              /* 화면 가장자리와의 최소 간격 */
	--c4-cta-popup-close:     32px;              /* 닫기(×) 버튼 크기 */
	--c4-cta-popup-close-gap: 12px;              /* 상자 위쪽 가장자리 ↔ 닫기 버튼 */
	--c4-cta-popup-w:        480px;              /* 흰 상자 폭 */
	--c4-cta-popup-pad:       48px 40px 40px;    /* 흰 상자 안쪽 여백 */
	--c4-cta-popup-icon:      64px;              /* 전화 아이콘(포인트 컬러) */
	--c4-cta-popup-icon-gap:  20px;              /* 아이콘 ↔ 작은 제목 */
	--c4-cta-popup-label-gap:  4px;              /* 작은 제목 ↔ 번호 */
	--c4-cta-popup-label-ls:  .08em;             /* 작은 제목 자간(영문 대문자) */
	--c4-cta-popup-tel-gap:   20px;              /* 아이콘 ↔ 번호(작은 제목이 없을 때) */
	--c4-cta-popup-tel-fs:    32px;              /* 번호 */
	--c4-cta-popup-text-gap:   8px;              /* 번호 ↔ 안내 문구 */
	--c4-cta-popup-notes-gap: 32px;              /* 안내 문구 ↔ 예약 안내 상자 */
	--c4-cta-popup-notes-pad: 24px;              /* 예약 안내 상자 안쪽 여백 */
	--c4-cta-popup-notes-bg:  var(--c4-main-soft-bg);   /* 예약 안내 상자 바탕 EEEBE8(2026-10-15 사용자 지시 '여기 진한 배경색도 EEEBE8로' · 그 전 surface-code 회색) */
	--c4-cta-popup-note-gap:  20px;              /* 안내 ↔ 안내 */
	--c4-cta-popup-note-title-gap: 6px;          /* 안내 제목 ↔ 내용 */
	--c4-cta-popup-note-lh:   1.7;               /* 안내 내용 줄 높이 */

	/* 알림 팝업(2026-10-13 사용자 지시 · 관리 화면 [팝업] · 시안에 없는 화면 — 전화예약 팝업과 같은 톤) —
	   가운데 + 뒤 어둡게 · 이미지(+ 링크) · 여러 장이면 한 창 안에서 슬라이드 · 아래 '오늘 하루 보지 않기 | 닫기' */
	--c4-popup-w:          480px;                         /* 판 폭 — 실제로는 inc/popup.php 가 올린 이미지의 원본 폭으로 덮는다(2026-10-13 · 이 값은 원본 크기를 못 읽을 때만) · 모바일은 화면 − 좌우 20 */
	--c4-popup-edge:        40px;   --c4-popup-edge-m: 20px;   /* 화면 가장자리와의 최소 간격(좌우 · 휴대폰은 사방) */
	--c4-popup-edge-y:      24px;                         /* PC 위아래 최소 간격 — 1440 × 900 에서 600 × 800 이미지가 줄지 않고 들어가게(800 + 버튼 줄 52 + 24 × 2 = 900 · 2026-10-13) */
	--c4-popup-radius:     var(--c4-radius-img);          /* 20 — 전화예약 팝업 판과 같다 */
	--c4-popup-dim:        var(--c4-cta-popup-dim);       /* 뒤 어둡게 — 전화예약 팝업과 같다 */
	--c4-popup-gutter:     var(--c4-cta-popup-gutter);    /* 열린 동안 오른쪽 스크롤바 자리 */
	--c4-popup-fade:       var(--c4-cta-popup-fade);      /* 열릴 때 서서히 */
	--c4-popup-bar-h:       52px;   --c4-popup-bar-h-m: 48px;   /* 아래 버튼 줄 높이 */
	--c4-popup-dot:          8px;   --c4-popup-dot-on-w: 22px;   /* 아래 점 · 지금 장(알약) — 2026-10-14 화살표 · 번호 대신 */
	--c4-popup-dot-gap:      8px;   --c4-popup-dot-hit: 24px;    /* 점 사이 · 눌리는 칸 높이 */
	--c4-popup-dot-bottom:  12px;                                /* 이미지 아래 끝 → 점 */
	--c4-popup-dot-bg:     rgb(0 0 0 / .18);   --c4-popup-dot-hover: rgb(0 0 0 / .35);
	--c4-popup-dot-dur:     .3s;
	--c4-popup-slide-min-h: calc(var(--c4-popup-dot-hit) + var(--c4-popup-dot-bottom) * 2 + 40px);   /* 여러 장일 때 장 최소 높이(납작한 배너에서도 점이 이미지 안) */
	--c4-popup-resize:     .35s ease;                     /* 장마다 이미지 높이가 다르면 판 높이가 따라 바뀌는 시간 */
	--c4-popup-autoplay:   4s;                            /* 여러 장일 때 다음 장으로 넘어가는 간격(마우스를 올리면 멈춤 · 직접 넘기면 그만) */

	--c4-header-blur: 20px;

	--c4-logo-w: 190px;
	--c4-logo-h:  48px;

	--c4-topbar-pad-y: 12px;
	--c4-topbar-gap:    6px;   --c4-topbar-gap-m: 2px;

	/* 푸터 — 안쪽 세로 간격 셋은 값이 서로 달라 각각 토큰을 둔다. 한 값으로 묶지 말 것. */
	--c4-footer-pad-y:        40px;  --c4-footer-pad-y-m:       28px;
	--c4-footer-terms-gap:    20px;  /* 약관 링크 사이 가로 간격 */
	--c4-footer-gap-terms:    20px;  --c4-footer-gap-terms-m:   24px;  /* 약관 링크 줄 → 로고 */
	--c4-footer-gap-logo:      8px;  --c4-footer-gap-logo-m:    12px;  /* 로고 → 회사 정보 */
	--c4-footer-gap-company:  16px;  --c4-footer-gap-company-m:  8px;  /* 회사 정보 → 카피라이트 */

	/* 골격(base.css)에서 쓰는 공통 하드웨어 값 */
	--c4-border-w:           1px;   /* 테두리 · 구분선 두께 */
	--c4-focus-ring-w:       2px;
	--c4-focus-ring-offset:  2px;
	--c4-anchor-extra:      16px;   /* 앵커 이동 시 헤더 아래 추가 여유 */
	--c4-skip-pad:    12px 20px;    /* 스킵 링크 */
	--c4-skip-offset:        8px;

	/* ---------------------------------------------------------------
	   radius — 두 종류다, 하나로 합치지 말 것
	   --------------------------------------------------------------- */
	--c4-radius-img:    20px;  /* 상세 대표 이미지 등(카드 썸네일은 아래 --c4-radius-card-img) */
	--c4-radius-card-img: calc(var(--c4-radius-img) - 4px);   /* 목록 카드 사진 = 16(2026-10-13 사용자 지시 'R값 -4' · 시안 20) */
	--c4-radius-banner:  8px;  /* 중간 배너 — 20 으로 통일 금지 */
	--c4-radius-box:     8px;  /* 사이드 박스 · 관련글 박스 */
	--c4-radius-btn:     8px;  /* CTA 버튼 */
	--c4-radius-chip:    4px;  /* 페이지네이션 현재 페이지 */
	--c4-radius-pill:  100px;  /* 검색 폼 · 커스텀 스크롤바 · 팝업 점 */
	--c4-radius-tag:   var(--c4-radius-btn);   /* 탭(목록 · FAQ · 언론보도) · 분류 배지(카드 위 · 메인 언론보도 · 상세) — 헤더 전화예약 버튼과 같은 8(2026-10-14 사용자 지시 · 그 전엔 알약 100) */

	/* ---------------------------------------------------------------
	   추가 페이지 — 9단계 공지사항
	   시안: 추가 페이지 파일 `k1YlYqTtMdOwWrzuZ56cnH` · 페이지 `추가페이지`(2001:401) · 섹션 `/notice`(2134:2555)
	   ★ 아래는 전부 **신규 추가**다. 위쪽 기존 토큰의 값은 하나도 바꾸지 않았다(9단계 제1원칙).
	   --------------------------------------------------------------- */

	/* ★ (시안 갱신: 2026-10-06) 공지 목록 글자는 **기존 Body 토큰**을 쓴다 — 제목 `Body/body2_bold`(16 / 700 / 1.5, PC · 모바일 같음),
	     날짜 `Body/body3`(15 / 400 / 1.5). 이 자리에 있던 `--c4-fs-table-title` / `-m` · `--c4-lh-table-title`(옛 `Title/Table_title`)과
	     `--c4-fs-body-date`(옛 `Body/Date` Medium 15)는 시안에서 그 스타일이 사라져 **참조 0 이 되어 제거**했다(DESIGN-TOKENS §2-3).
	     ★ 블로그 상세 날짜(`--c4-fs-single-date` Medium 14)는 별개 토큰이다 — 그대로. */

	/* 공지 목록 세로 리듬 (시안 실측 — PC `2134:2558` / 모바일 `2134:2572`). 상단은 전 화면 공통 `--c4-page-pt`.
	   ★ 블로그 목록 토큰(`--c4-list-gap-*`)을 빌려 쓰지 않는다 — 블로그는 리스트 → 페이지네이션이 모바일에서도 60,
	     공지는 40 이다. 같은 토큰을 쓰면 한쪽이 반드시 틀어진다.
	   ★ 모바일은 상단만 60 이고 나머지 셋이 40 이다. 네 값을 하나로 묶지 말 것. */
	--c4-page-pb-notice:        60px;  --c4-page-pb-notice-m:        60px;  /* 섹션 하단 — 60 통일(2026-10-14 사용자 지시 · 그 전 PC 100 / 모바일 40 — §3-4 '공지사항' 줄) */
	--c4-notice-gap-title:       60px;  --c4-notice-gap-title-m:       40px;  /* 제목 → 목록 */
	--c4-notice-gap-pagination:  60px;  --c4-notice-gap-pagination-m:  40px;  /* 목록 → 페이지네이션 */

	/* 공지 항목 안쪽 여백 — ★ 위아래가 **일부러 다르다**(글자 시각 중심 보정). 고르게 펴지 말 것.
	   ★★ 시안 값 그대로이며 **테두리를 포함한 치수**다(시안 stroke 가 INSIDE — 선이 여백 안쪽에 그려진다).
	      CSS 는 테두리가 바깥에 더해지므로 사용처에서 `--c4-border-w` 를 빼서 쓴다.
	      4단계 사이드 박스 접힘 높이(바깥 48 = 안쪽 46 + 테두리 2)와 같은 규칙이다. */
	--c4-notice-item-pt:   22px;   --c4-notice-item-pt-m: 12px;   /* PC 16 → 22 · 아래 18 → 24 — 줄 58 → 70(2026-10-15 사용자 지시 'PC 에서 언론보도 · 공지사항 한 칸 높이 좀 더' · 언론보도 줄도 이 값) */
	--c4-notice-item-pb:   24px;   --c4-notice-item-pb-m: 14px;

	/* 고정 공지 압정 아이콘 — 시안 `2002:1667` 18×18, 아이콘 ↔ 제목 7 (PC · 모바일 동일) */
	--c4-notice-pin:       18px;
	--c4-notice-pin-gap:    7px;

	/* 목록 항목 제목 ↔ 날짜 최소 간격 — ★ **시안에 없어 9단계에서 정한 값**(DESIGN-TOKENS '확정 사항').
	   시안은 양끝 정렬뿐이라 간격이 없어서, 제목이 길면 말줄임표가 날짜에 바싹 붙는다. PC · 모바일 동일. */
	--c4-notice-title-date-gap: 24px;
	--c4-notice-title-date-gap-m: 4px;   /* 휴대폰 — 제목(위) ↔ 날짜(아래) 세로 간격(2026-10-15 사용자 지시 '날짜를 제목 아래로') */

	/* ---------------------------------------------------------------
	   추가 페이지 — 10단계 FAQ
	   시안: 추가 페이지 파일 · 섹션 `/faq`(2134:2508) — Desktop faq-section `2134:2511` · Mobile `2134:2534`
	         컴포넌트 `Accordion`(2002:1632) · `tab`(2097:1125)
	   ★ 아래는 전부 **신규 추가**다. 위쪽 기존 토큰의 값은 하나도 바꾸지 않았다(제1원칙 · 1-b).
	   ★ 글자는 새로 만들지 않았다 — 탭 · 질문 = `Body/body2_bold`, 답변 = `Body/body2`(렌더 값 16 / 1.5, PC · 모바일 같음)라
	     기존 `--c4-fs-body2` · `--c4-lh-body` 를 그대로 쓴다. 색도 기존 `grey900`(`--c4-color-text`) · `white` 그대로.
	   --------------------------------------------------------------- */

	/* 본문 폭 — ★ 블로그 · 공지의 본문 컬럼(720)이 아니다. 시안 `inner` 800 / 모바일은 다른 화면과 같은 327(좌우 24). */
	--c4-faq-inner-w: 800px;

	/* 세로 리듬 (시안 실측). 상단은 전 화면 공통 `--c4-page-pt`.
	   ★ PC 만 '탭 → 목록'이 48 이다 — 나머지(60)와 묶지 말 것.
	   ★ PC 하단 60 은 공지(100)와 다르다 — 공지 토큰을 빌려 쓰지 말 것. */
	--c4-page-pb-faq:           60px;  --c4-page-pb-faq-m:           60px;  /* 섹션 하단(FAQ · 언론보도) — 60 통일(2026-10-14 · 그 전 모바일 40) */
	--c4-faq-gap-title:         30px;  --c4-faq-gap-title-m:         20px;  /* 제목 → 탭 — 60 / 40 → 30 / 20(2026-10-13 사용자 지시 '타이틀 - 탭 여백 1/2' · 진료과목 목록과 같게) */
	--c4-faq-gap-tabs:          48px;  --c4-faq-gap-tabs-m:          40px;  /* 탭 → 목록 */
	/* ★ `--c4-faq-gap-pagination` / `-m`(목록 → 페이지네이션 60/40)은 FAQ 쪽 나눔을 없애면서(2026-10-07 시안 갱신) 참조 0 이 되어 제거했다. */

	/* 탭 — 시안 `tab`. 높이 46 = 테두리 1 + 위 10 + 글자 줄 24 + 아래 10 + 테두리 1.
	   ★★ 안쪽 여백은 테두리를 **뺀** 값이다(시안 컴포넌트가 '테두리를 레이아웃에 포함'으로 그려져 있다 — 비활성 글자 x 25 = 1 + 24).
	      활성 탭에도 같은 두께의 **투명 테두리**를 줘서 높이(46)와 글자 기준선을 비활성과 맞춘다(시안 활성 탭은 글자가 1px 위 · 폭 102 → 구현 104). */
	--c4-faq-tab-pad:  10px 24px;
	--c4-faq-tab-gap:   8px;     /* 탭 ↔ 탭 */
	--c4-radius-tab:    8px;     /* 값이 같아도 CTA · 박스 radius 와 의미가 달라 분리 — ★ 참조 0(2026-10-13 FAQ · 언론보도 탭이 알약 --c4-radius-pill 로 바뀜). 다시 네모 탭이 필요하면 이 값 */

	/* 아코디언 항목 — 시안 `Accordion`.
	   ★★ 위아래 28 은 시안 값 그대로이며 **테두리를 포함한 치수**다(공지 항목과 같은 규칙 — 사용처에서 `--c4-border-w` 를 뺀다).
	   PC · 모바일 같은 값이라 `-m` 을 두지 않는다. */
	--c4-faq-item-py:          28px;
	--c4-faq-answer-gap:       12px;  /* 질문 줄 → 답변 (열렸을 때만 존재) */
	--c4-faq-answer-para-gap:   8px;  /* 답변 문단 ↔ 문단 (시안 answer 프레임 gap) */
	--c4-faq-icon:             11px;  /* ＋ / － 아이콘 */
	/* 질문 ↔ 아이콘 최소 간격 — ★ **시안에 없어 10단계에서 정한 값**(공지 제목 ↔ 날짜 24 와 같은 판단 · 토큰은 분리).
	   시안은 양끝 정렬뿐이라, 질문이 길면 글자가 아이콘에 바싹 붙는다. */
	--c4-faq-question-icon-gap: 24px;

	/* ---------------------------------------------------------------
	   소개 (11단계) — 고정 페이지 + 전용 템플릿 `page-templates/template-about.php`
	   시안: 추가 페이지 파일 · 섹션 `/about`(2134:2586) — Desktop philosophy `2134:2589` · content `2134:2595` /
	         Mobile philosophy `2134:2605` · content `2134:2611`
	   ★ 글자 · 색은 **기존 토큰 재사용** — 라벨 `--c4-fs-article-h3`(-m) + `--c4-lh-article`(single_h3 22·18 / 1.9) · 제목 `--c4-fs-page-title`(-m) ·
	     본문 `--c4-fs-body1` + `--c4-lh-body` · 라벨 색 `--c4-color-accent` · 흰 글씨 `--c4-color-white` · 카드 글자 `--c4-color-text-sub`(grey700) ·
	     카드 배경 `--c4-color-surface-code`(grey100) · 빈 사진 칸 `--c4-color-img-placeholder`(grey300 — 블로그 카드 썸네일과 같은 토큰) ·
	     사진이 빈 상단 구역 폴백 `--c4-color-footer-bg`(bg_darkgrey). 내용 폭 PC 1280 = 헤더와 같은 `--c4-container-w` + `--c4-container-pad`.
	   --------------------------------------------------------------- */

	/* 새 글자 스타일 `Heading/H2/Page Title2`(+_m) — 이 파일에만 있던 스타일이라 토큰이 없었다(PROGRESS ④-2 '이 파일에만 있는 새 스타일').
	   렌더 값(1-c): PC 28 · 모바일 20 / 700 / 130% / -4%. 쓰는 곳: 소개 글 카드 제목. */
	--c4-fs-page-title2: 28px;   --c4-fs-page-title2-m: 20px;   --c4-lh-page-title2: 1.3;

	/* philosophy — 배경 사진 위 흰 글씨 */
	--c4-about-hero-pad-y:     120px;  --c4-about-hero-pad-y-m:   100px;  /* 위아래 (시안 frame padding) */
	--c4-about-hero-min-h-m:   460px;  /* ★ 모바일만 — 시안 Mobile philosophy 프레임이 **고정 높이 460**(내용은 가로세로 가운데). PC 는 내용에 맞춘 높이(HUG) */
	--c4-about-hero-gap-label:  20px;  /* 라벨 → 제목 (PC · 모바일 같다) */
	--c4-about-hero-gap-title:  12px;  /* 제목 → 본문 (PC · 모바일 같다) */
	--c4-about-hero-dim:       rgb(0 0 0 / .4);   /* 사진 위 어둡게 깔기 — 사진이 있을 때만(2026-10-12 사용자 지시 · 시안에 없는 값) */

	/* 메인 첫 화면 히어로(2026-10-13 사용자 지시 · 참고 fluid.glass · 시안에 없는 값) — front-page.php · main.css · main.js */
	--c4-main-hero-min-h:     560px;   --c4-main-hero-min-h-m: 400px;   --c4-main-hero-h-m: 570px;   /* 휴대폰 첫 화면 높이 570(2026-10-15 사용자 지시 '550 → 20 더' · 그 전 화면의 절반 50svh) */   /* 화면 높이를 꽉 채우되 이보다 낮아지지 않게(가로로 눕힌 휴대폰 등) */
	--c4-main-hero-extra:     calc(15vw - 100px);    --c4-main-hero-extra-m: max(0px, calc(26vw - 100px));   /* 첫 화면 아래로 이어지는 사진 높이 — 화면 폭 비율 − 100(2026-10-14 사용자 지시 '히어로 높이 -50' 두 번 · 1440 → +116 · 휴대폰은 첫 화면 높이까지(375 → 0 · 그 전 +48) · 처음 15 · 26vw — fluid.glass 실측 29 · 52vw 의 절반) */
	--c4-main-soft-bg:        #EEEBE8;   /* 메인 진료과목 < > 버튼 바탕 · 하단 정보 상자 셋 바탕(2026-10-15 사용자 지시 '화살표 아웃라인 말고 · 디폴트 EEEBE8 · 호버 파랑' · '3열 상자 EEEBE8') */
	--c4-main-hero-dim:       rgb(0 0 0 / .6);    /* 사진 위 어둡게 — 흰 글자가 밝은 사진에서도 읽히게(2026-10-15 사용자 지시 '검정 60%' · 그 전 2026-10-14 'dim 50%로' · 그 전 .35 → .42) */
	--c4-main-hero-parallax:  50%;     /* 히어로가 다 지나가는 동안 사진이 내려가는 양(자기 높이 기준) = 사진은 스크롤의 절반 속도(참고 사이트 실측) */
	--c4-main-hero-title-fs:  64px;    --c4-main-hero-title-fs-m: 32px;   /* 휴대폰 32(2026-10-15 사용자 지시 '모바일에서만 -2px' · 그 전 34) */
	--c4-main-hero-title-lh:  1.3;
	/* 히어로 아래쪽 숫자 띠(2026-10-14 사용자 지시 · 시안 v2) */
	--c4-main-hero-stats-bg:      rgb(0 0 0 / .6);                     /* 띠 바탕 — 검정 60%(2026-10-15 사용자 지시 '조금만 덜 어둡게' · 그 전 70%) */
	--c4-main-hero-stats-line:    rgb(255 255 255 / .2);               /* 칸 사이 세로줄 */
	--c4-main-hero-stats-pad:     36px;    --c4-main-hero-stats-pad-m: 22px;   /* 띠 위아래 */
	--c4-main-hero-stats-w:       1080px;                              /* 숫자 줄 최대 폭 */
	--c4-main-hero-stat-gap:      6px;                                 /* 숫자 → 설명 */
	--c4-main-hero-stat-num-fs:   48px;    --c4-main-hero-stat-num-fs-m:   28px;
	--c4-main-hero-stat-unit-fs:  22px;    --c4-main-hero-stat-unit-fs-m:  14px;
	--c4-main-hero-stat-label-fs: 15px;    --c4-main-hero-stat-label-fs-m: 14px;
	--c4-main-hero-desc-fs:   24px;    --c4-main-hero-desc-fs-m: 16px;   /* 히어로 작은 글 PC 24(2026-10-14 사용자 지시 '24px로' · 그 전 20) · 모바일 16 그대로 */
	--c4-main-hero-gap:       28px;    --c4-main-hero-gap-m: 16px;   /* 큰 글 → 작은 글 */
	--c4-main-hero-text-shift: -40px;  /* 큰 글 · 작은 글 묶음을 첫 화면 가운데에서 위로(2026-10-14 사용자 지시 "텍스트 위치를 20px 위로" → 같은 날 로고 심볼을 빼며 "위로 20px" 더 · PC · 모바일) */
	--c4-main-hero-interval:  4s;      /* 전환 간격 — 다음 장으로 넘어가는 주기(처음 2초 · 전환 시간을 늘리며 같이 2배 · 2026-10-13) */
	--c4-main-hero-zoom:      1.05;    /* 사진이 보이는 동안 천천히 커지는 끝 배율(2026-10-15 사용자 지시 '아주 살짝 조금씩 확대' — main.css .is-zooming) */
	--c4-main-hero-fade:      2.4s;    /* 전환 시간(디졸브) — 서서히 바뀌는 데 걸리는 시간 1.2 → 2.4초(사용자 지시 '2배' · 부드럽고 여유롭게) */
	--c4-main-header-fade:    .4s;     /* 투명 ↔ 원래 헤더(스크롤 · 마우스 올림 · 키보드) — 부드럽게 */
	/* 메인 언론보도(2026-10-13 사용자 지시 · 참고 fluid.glass 목록 레이아웃 · 시안에 없는 값) — 콘텐츠 폭은 --c4-container-w 1280 */
	--c4-main-press-pt:         80px;  --c4-main-press-pt-m:  40px;    /* 구역 위 · 아래 — 120 / 60 에서 1/3 줄임(2026-10-14 사용자 지시 '여백 1/3씩 축소' — 닥터노트 ↔ 언론보도 160 → 107 · 언론보도 ↔ 하단 정보 160 → 107) */
	--c4-main-press-pb:         80px;  --c4-main-press-pb-m:  40px;
	--c4-main-press-head-gap:   40px;  --c4-main-press-head-gap-m: 24px;   /* 제목 → 목록 */
	--c4-main-press-title-fs:   40px;  --c4-main-press-title-fs-m: 24px;   /* 구역 제목 — 소개 사진 카드 구역 제목과 같은 크기 */
	--c4-main-press-row-pad:    26px;  --c4-main-press-row-pad-m:  20px;   /* 줄 위아래 */
	--c4-main-press-col-gap:    32px;  --c4-main-press-col-gap-m:  16px;   /* 배지 ↔ 제목 ↔ 화살표 */
	--c4-main-press-item-fs:    22px;  --c4-main-press-item-fs-m:  17px;   /* 글 제목(500) */
	--c4-main-press-badge-pad:  4px 12px;                                  /* 분류 배지(테두리 알약 · 글자색 따라감) */
	--c4-main-press-badge-w:   120px;                                      /* subgrid 를 모르는 브라우저의 배지 칸 */
	--c4-main-press-arrow:      23px;  --c4-main-press-arrow-shift: 4px;   /* 화살표 20 → 23(2026-10-14 사용자 지시 '15% 확대') · 마우스를 올리면 나타나며 오른쪽으로(휴대폰은 늘 보임) */
	--c4-main-press-line:      var(--c4-color-border);                     /* 줄 사이 선(회색) — 올린 줄 아래 선은 검정 */
	--c4-main-press-dim:       var(--c4-color-text-faint);                 /* 마우스를 올렸을 때 나머지 줄 글자(회색) */
	--c4-main-press-fade:       .4s;                                       /* 색 · 화살표 바뀜(부드럽게) */
	--c4-main-video-w:         960px;                                      /* 메인 영상(특화진료 위 · 가운데) 최대 폭 — 16 : 9 → 높이 540(2026-10-16) */
	/* 메인 진료과목(2026-10-13 사용자 지시 · 참고 사진 — 시안 파일 없음 · 사진에서 잰 값) */
	--c4-main-treat-pt:         80px;  --c4-main-treat-pt-m:  40px;    /* 위 · 아래 — 닥터노트와 같다(2026-10-13 사용자 지시 "사이즈는 닥터노트와 통일") */
	--c4-main-treat-pb:         40px;  --c4-main-treat-pb-m:  20px;
	--c4-main-treat-between:    60px;  --c4-main-treat-between-m: 30px;   /* 특화진료 ↔ 만성질환 사이(카드 아래 → 다음 구역 카드 · 제목 위) — 120 / 60 의 1/2(2026-10-14 사용자 지시) */
	--c4-main-treat-head-w:    330px;                                     /* PC 왼쪽 제목 칸 */
	--c4-main-treat-gap:        48px;                                     /* 제목 칸 → 카드 줄(닥터노트 큰 카드 ↔ 목록과 같다) */
	--c4-main-treat-desc-gap:    4px;                                     /* 제목 → 설명(닥터노트와 같다) */
	--c4-main-treat-desc-fs:    17px;  --c4-main-treat-desc-fs-m: 15px;   /* 설명 글자 PC 17(2026-10-14 사용자 지시 '설명들 17px로') · 모바일 15(2026-10-15 사용자 지시) */
	--c4-main-treat-nav-gap:    20px;                                     /* 설명 → 화살표(PC) — 40 → 20(2026-10-14 사용자 지시 '설명 - 버튼들 간 여백 1/2') */
	--c4-main-treat-arrow:      40px;  --c4-main-treat-arrow-m: 40px;  --c4-main-treat-arrow-gap: 10px;   /* 동그라미 화살표 — PC 44 → 40(2026-10-14 사용자 지시 '40x40 으로 축소') · 모바일 40 */
	--c4-main-treat-arrow-line: var(--c4-color-text-muted);              /*   └ 평소 테두리 · 화살표 회색 grey500(2026-10-14 · 마우스를 올리면 포인트 컬러) */
	--c4-main-treat-head-gap-t: 32px;  --c4-main-treat-head-gap-m: 20px;   /* 1200 미만 제목 묶음 → 카드(닥터노트와 같다) */
	--c4-main-treat-per:         3;    --c4-main-treat-per-m: 1.5;          /* 한 번에 보이는 카드(사용자 지시 "3개씩만" · 휴대폰 1.5 — 2026-10-15 '1.5개 보이게' · 그 전 1) */
	--c4-main-treat-card-gap:   20px;  --c4-main-treat-card-gap-m: 10px;  /* 카드 사이(진료과목 목록 카드 칸 사이와 같다) · 휴대폰 10(2026-10-15 사용자 지시 '이미지 간 여백 1/2' · 그 전 20) */
	--c4-main-treat-sub-fs-m:   14px;   /* 휴대폰 메인 카드 사진 위 부제목(2026-10-15 사용자 지시 '카드 이미지 안의 작은 글자 14px' · 그 전 목록 카드 휴대폰 값 16 — 진료과목 목록은 그대로) */
	--c4-main-treat-title-fs:   28px;  --c4-main-treat-sub-fs: 18px;      /* 카드 제목 · 부제목(목록 카드 32 · 20 보다 작게 — 카드가 287 이라 한 줄에 들게) · 좁으면 24 · 16 */
	--c4-main-treat-slide:      1.2s;                                     /* 화살표로 한 장 넘어가는 시간(천천히) — 저절로 넘김은 2026-10-14 사용자 지시로 없앴다 */
	--c4-main-treat-ease:      cubic-bezier(.45, 0, .25, 1);              /*   └ 천천히 출발해 천천히 멈춤(부드럽게 · 처음엔 리빌 감속) */
	--c4-main-pad-m:            20px;   /* 메인 닥터노트 · 하단 정보 모바일 좌우(시안 px 20 — 다른 화면 24 와 다르다) */
	/* 메인 닥터노트(2026-10-13 · Figma 34:310 PC / 34:392 모바일 — 실측값) */
	--c4-main-note-pt:          80px;  --c4-main-note-pt-m:   40px;
	--c4-main-note-pb:          27px;  --c4-main-note-pb-m:   13px;    /* 40 / 20 에서 1/3 줄임(같은 날 — 아래 언론보도와의 여백) */
	--c4-main-note-head-gap:    32px;  --c4-main-note-head-gap-m: 20px;   /* 제목 묶음 → 글 */
	--c4-main-note-title-gap:    4px;                                     /* 제목 → 설명 */
	--c4-main-note-desc-fs:     20px;  --c4-main-note-desc-fs-m: 15px;   /* PC Subtitle 1 · 모바일 15(2026-10-15 사용자 지시 · 그 전 모바일도 20) */
	--c4-main-desc-ls:         -.06em;                                    /* 구역 제목 아래 회색 설명 자간 -6%(특화진료 · 만성질환 · 닥터노트 — 2026-10-14 사용자 지시 '통일') */
	--c4-main-note-list-w:     435px;  --c4-main-note-feature-ratio: 797 / 478;   /* 목록 칸 435 · 큰 카드 797 × 478(1280 − 435 − 48 = 797) */
	--c4-main-note-col-gap:     48px;                                     /* 큰 카드 ↔ 목록 */
	--c4-main-note-radius:      12px;
	--c4-main-note-feature-pad: 28px;  --c4-main-note-feature-pb: 18px;   /* 큰 카드 글 왼쪽 · 오른쪽 28 · 아래 18(제목 줄 아래 끝 459.8 / 478) */
	--c4-main-note-shade:      linear-gradient(180deg, rgb(0 0 0 / 0) 53%, rgb(0 0 0 / .3) 74%, rgb(0 0 0 / .6) 95%);   /* 시안 검정 60% · 흐림 50 · 위끝 353 */
	--c4-main-note-cat-on-dark: color-mix(in srgb, var(--c4-color-accent), #fff 60%);   /* 어두운 사진 위 분류 — 포인트 컬러를 밝게(시안 Accent1 초록 대신 · 사이트 포인트 컬러가 남색) */
	--c4-main-note-item-gap:    20px;                                     /* 사진 → 글 */
	--c4-main-note-thumb-w:    200px;  --c4-main-note-thumb-w-m: 137px;   /* 목록 사진 200 × 124 / 모바일 137 × 84.9(2026-10-15 사용자 지시 '썸네일 15% 확대' — 119 × 1.15 · 그 전 119 × 74.13) */
	--c4-main-note-thumb-ratio: 200 / 124;
	--c4-main-note-cat-gap:      8px;                                     /* 분류 → 제목 */
	/* 제목 → 요약 — 보이는 틈(제목 줄 아래 여백 9.9 + 2 + 요약 줄 위 여백 3.75 = 15.65)을 1/3 줄인다(2026-10-14 사용자 지시 · 그 전 margin 2px) → margin ≈ −3.2px.
	   요약은 두 줄 말줄임(같은 날 'PC 에서만 본문 2줄' · 그 전 시안 41 칸 한 줄 · 토큰 --c4-main-note-excerpt-h 삭제). */
	--c4-main-note-excerpt-gap: calc(2px - (var(--c4-fs-article-h3) * (var(--c4-lh-article) - 1) / 2 + 2px + var(--c4-fs-body3) * (var(--c4-lh-body) - 1) / 2) / 3);
	--c4-main-note-list-gap-m:  12px;                                     /* 모바일 글 ↔ 글 */
	--c4-main-note-name-fs-m:   17px;                                     /* 모바일 목록 제목 — 두 줄까지(2026-10-15 사용자 지시 · 그 전 18 한 줄) */
	--c4-main-note-zoom:        1.04;  --c4-main-note-zoom-dur: .6s;     /* 마우스를 올리면 사진 살짝(시안에 없는 값 · 흐림은 2026-10-14 뺐다) */

	/* 메인 하단 정보(2026-10-13 · Figma 34:341 PC / 34:410 모바일 — 실측값) */
	/* 메인 배너 — 언론보도 아래(2026-10-14 사용자 지시 · 참고 그림 실측 비율 — 시안 파일 없음) */
	/* 메인 로고 띠 — 첫 화면 바로 아래(2026-10-14 사용자 지시 · 시안에 없는 값) */
	--c4-main-logos-pt:         56px;  --c4-main-logos-pt-m:  32px;
	--c4-main-logos-pb:          8px;  --c4-main-logos-pb-m:   0px;    /* 아래는 특화진료 구역 위 여백이 이어진다 */
	--c4-main-logos-h:          64px;  --c4-main-logos-h-m:   40px;    /* 로고 높이(폭은 비율대로) */
	--c4-main-logos-max-w:     240px;  --c4-main-logos-max-w-m: 140px; /* 가로로 긴 로고가 너무 넓어지지 않게 */
	--c4-main-logos-gap:        80px;  --c4-main-logos-gap-m: 28px;    /* 로고 사이 */
	--c4-main-logos-gap-y:      24px;  --c4-main-logos-gap-y-m: 16px;  /* 줄이 넘칠 때 줄 사이 */
	/* 배너 위 · 아래 — 만성질환 ↔ 닥터노트 사이(만성질환 아래 + 닥터노트 위 = 120 / 60)와 같게(2026-10-14 사용자 지시 '배너 2열 위, 아래 여백 통일' · 그 전 80 / 40).
	   위 = 그 값 − 닥터노트 아래 여백 · 아래 = 그 값 − 언론보도 위 여백 → 앞뒤 구역 여백이 바뀌어도 사이는 그대로. */
	--c4-main-banner-gap-y:     calc(var(--c4-main-treat-pb) + var(--c4-main-note-pt));      --c4-main-banner-gap-y-m: calc(var(--c4-main-treat-pb-m) + var(--c4-main-note-pt-m));
	--c4-main-banner-pt:        calc(var(--c4-main-banner-gap-y) - var(--c4-main-note-pb));   --c4-main-banner-pt-m:    calc(var(--c4-main-banner-gap-y-m) - var(--c4-main-note-pb-m));
	--c4-main-banner-pb:        calc(var(--c4-main-banner-gap-y) - var(--c4-main-press-pt));  --c4-main-banner-pb-m:    calc(var(--c4-main-banner-gap-y-m) - var(--c4-main-press-pt-m));
	--c4-main-banner-gap:       20px;  --c4-main-banner-gap-m: 12px;   /* 배너 사이 */
	--c4-main-banner-ratio:    630 / 192.5;  --c4-main-banner-h-m: 111px;  /* PC 칸 630 × 192.5(2026-10-15 '높이 1/4 추가' · 그 전 154) · 모바일 높이 111(같은 날 '모바일 1/4 축소' — 148 → 111 · 그 전 118) */
	/* 사진 칸 — 배너 오른쪽 절반에만 사진(그 칸에 가로 100% · 2026-10-14 사용자 지시 '이미지가 2번 사진 영역만큼만') · 왼쪽 가장자리만 바탕색에서 짧게 흐려 이음매를 감춘다.
	   그 전에는 사진이 배너 전체를 덮고 왼쪽을 바탕색 그라데이션(30% → 72%)으로 가렸다. */
	--c4-main-banner-img-w:     50%;   --c4-main-banner-img-w-m:    50%;
	--c4-main-banner-img-shift: 20px;  --c4-main-banner-img-shift-m: 15px;   /* 사진 칸(과 그 왼쪽 그라데이션)이 가운데보다 이만큼 왼쪽에서 시작(2026-10-15 사용자 지시 'PC 에서 그라데이션 위치를 중앙에서 20px 만 왼쪽으로' · 같은 날 휴대폰 '왼쪽으로 15px') */
	--c4-main-banner-img-fade:  42%;   --c4-main-banner-img-fade-m: 42%;   /* 사진 칸 폭 기준(PC 약 132px · 모바일 약 70px) — 2026-10-14 사용자 지시 '그라데이션 좀 더 넓게, 자연스럽게 — 지금은 선이 보여'(그 전 56 / 32px 직선) */
	--c4-main-banner-img-pos:   center 30%;   /* 사진이 칸보다 높으면 위아래를 자르는 기준 — 얼굴이 위쪽에 있는 사진이 많아 위를 덜 자른다 */
	--c4-main-banner-pad:       32px;  --c4-main-banner-pad-m: 20px;   /* 왼쪽 글 여백 */
	--c4-main-banner-radius:    12px;
	--c4-main-banner-bg:       color-mix(in srgb, var(--c4-color-accent), #fff 88%);   /* 바탕 — 포인트 컬러를 옅게(사진이 없을 때 · 사진 왼쪽을 이 색으로 덮어 글이 읽히게 · 2026-10-14 사용자 지시 '배경색 좀 더 어둡게' 93% → 88% 흰색) */
	--c4-main-banner-sub-fs:    17px;  --c4-main-banner-sub-fs-m: 14px;   /* 서브워딩(포인트 컬러) */
	--c4-main-banner-title-fs:  26px;  --c4-main-banner-title-fs-m: 18px; /* 타이틀(굵게) */
	--c4-main-info-pt:          27px;  --c4-main-info-pt-m:    0px;    /* 40 에서 1/3 줄임(같은 날 — 위 언론보도와의 여백) */
	--c4-main-info-pb:          60px;  --c4-main-info-pb-m:   60px;   /* 푸터 앞 — 60 통일(2026-10-14 · 그 전 모바일 40) */
	--c4-main-info-gap:         20px;  --c4-main-info-gap-m:  12px;   /* 상자 사이 */
	--c4-main-info-box-pad:     40px;  --c4-main-info-box-pad-m: 20px;
	--c4-main-info-box-gap:      8px;  --c4-main-info-box-gap-m: 16px;   /* 제목 → 내용 */
	--c4-main-info-radius:      12px;
	--c4-main-info-more-icon:   18px;  --c4-main-info-more-icon-m: 16px;   /* 공지 · 오시는 길 제목 오른쪽 끝 → 크기(2026-10-15 사용자 지시 '화살표 작게') */
	--c4-main-info-more-hit:    32px;                                 /* → 누르는 칸(아이콘보다 넉넉히 · 오른쪽 끝은 아이콘이 상자 안쪽 선에 맞게 바깥으로 뺀다) */
	--c4-main-info-title-h:     48px;                                 /* PC 제목 칸 높이(시안 48 — 글자 28 × 1.3 = 36.4) */
	--c4-main-info-row-gap:      6px;                                 /* 공지 줄 사이 */
	--c4-main-info-notice-fs-m: 15px;                                 /* 모바일 공지 제목 · 날짜(2026-10-15 사용자 지시 · 그 전 17) */
	--c4-main-info-loc-gap:     16px;  --c4-main-info-loc-gap-m: 10px;   /* 주소 ↔ 지도 버튼(최소 — PC 는 상자 높이를 다 써 아래 끝 · 모바일 내용 84 = 25.5 + 10.5 + 48) */
	--c4-main-info-map-gap:     12px;  --c4-main-info-map-h: 48px;  --c4-main-info-map-h-m: 42px;  --c4-main-info-map-radius: 8px;
	--c4-main-info-map-naver-bg: var(--c4-color-white);  --c4-main-info-map-kakao-bg: #F9E000;   /* 시안 버튼 그림의 바탕색(그림에서 잰 값) — 칸이 그림보다 넓을 때 이어 칠한다 · 네이버는 흰색(2026-10-14 사용자 지시 '따뜻한 바탕에서 잘 안 보여 전부 화이트' — 그림 assets/img/main/btn-naver.png 도 흰 바탕 원본으로 되돌림) */
	--c4-main-info-contact-gap: 12px;                                 /* 전화 줄 → 버튼 */
	--c4-main-info-text-fs-m:   15px;       /* 휴대폰 주소 · 전화번호 15(2026-10-15 사용자 지시 — 같은 날 '17px' → '15px 로' · PC 는 18 그대로) */
	--c4-main-info-text-fs:     18px;       /* 오시는 길 주소 · 전화번호 18(2026-10-14 사용자 지시 '18px 로' · 그 전 21 = 본문 17 + 4 — 둘이 같은 모양) */
	--c4-about-hero-parallax:  50%;   /* 배경 사진 패럴랙스 — 구역이 다 지나갈 때 사진이 내려가 있는 양(구역 높이 대비). 50% = 글의 절반 속도로 올라간다(같은 날 사용자 지시 · 시안에 없는 값) */
	--c4-about-hero-zoom:      1.1;   /* 배경 사진 천천히 확대 — 끝 배율 110%(2026-10-13 사용자 지시 "10% 확대되는 지점까지만" · 시안에 없는 값) */
	--c4-about-hero-zoom-dur:  12s;   /*   └ 100 → 110% 에 걸리는 시간(사이트 톤 '부드럽고 여유롭게' — 아주 천천히) */
	--c4-about-hero-zoom-ease: cubic-bezier(.25, .46, .45, .94);   /*   └ 부드럽게 늦춰지며 멈춤(ease-out) */
	/* 상단 큰 제목 한 줄씩(about.css .c4-split__line) — 떠오르는 모양은 agency.codenumber4.com 첫 화면 제목 실측값 그대로(시안에 없는 값).
	   2026-10-13 사용자 지시로 한 글자씩 → 한 줄씩(글자 사이 55ms 는 줄 사이 300ms 로) */
	--c4-split-step:  300ms;                       /* 줄 사이 — 둘째 줄이 이만큼 늦게 */
	--c4-split-dur:   1.1s;                        /* 한 줄 */
	--c4-split-lead:  350ms;                       /* 모든 줄을 이만큼 앞당겨 시작(첫 줄은 음수 지연 — 화면을 열면 이미 떠오르는 중 · 곡선이 처음에 느려 앞 0.3 ~ 0.4초가 비어 보였다) — 2026-10-14 사용자 지시 '첫 시작 타이밍이 너무 늦어'. 줄 사이(step)는 그대로 */
	--c4-split-ease:  cubic-bezier(.65, 0, .35, 1);
	--c4-split-shift: .34em;                       /* 아래에서 올라오는 거리 */
	--c4-split-blur:  .14em;                       /* 처음 흐림 */

	/* content — 사진 + 글 카드 */
	--c4-about-content-pt:      80px;  /* PC 위 */
	--c4-about-content-pb:      60px;  /* PC 아래 */
	--c4-about-content-pad-m:   20px;  /* 모바일 사방 — ★ 다른 모바일 화면의 24 가 아니다(시안 content 프레임 padding 20 → 내용 폭 335) */
	--c4-about-col-gap:         20px;  /* PC 두 칸 사이 (1280 = 630 + 20 + 630) */
	--c4-about-stack-gap-m:     12px;  /* 모바일 사진 ↔ 글 카드 */
	/* ★ PC 사진 칸 비율 토큰(`--c4-about-photo-ratio` 630 / 843)은 2026-10-07 사용자 결정(사진 칸 높이 = 글 카드 높이)으로 참조 0 이 되어 제거했다. */
	--c4-about-photo-ratio-m: 335 / 429;  /* 모바일 사진 칸 비율(세로로 쌓여 옆 칸이 없다) */
	--c4-about-photo-min-h:    420px;  /* ★ PC · 태블릿(두 칸) 사진 칸 최소 높이(2026-10-08 사용자 결정) — 글이 아주 짧아도 사진이 얇은 띠가 되지 않게.
	                                      420 = 칸 폭 630 의 2 / 3 — 시안 사진(3 : 2)이 PC 에서 위아래 잘림 없이 다 보이는 높이. 시안에 없는 값 */
	--c4-about-radius:          20px;  --c4-about-radius-m:       12px;  /* 사진 칸 · 글 카드 (시안 둘 다 같은 값) */
	--c4-about-card-pad:        40px;  --c4-about-card-pad-m:     24px;  /* 글 카드 안쪽 */
	--c4-about-card-gap:        16px;  --c4-about-card-gap-m:     24px;  /* 이력 상자 제목 → 목록(글 카드는 아래 title-gap) — ★ 모바일이 더 넓다. 묶지 말 것 */
	--c4-about-card-bg:         var(--c4-color-white);   /* 글 카드 바탕 — 흰색(2026-10-14 사용자 지시 '배경색 화이트로' · 그 전 --c4-color-surface-code #ECE8E5) */
	--c4-about-card-title-gap:  40px;  --c4-about-card-title-gap-m: 36px;  /* 글 카드 제목 → 본문 — 문단 사이(--c4-about-para-gap 25.5)보다 넓게(2026-10-14 사용자 지시 · 그 전 16 / 24) */
	/* 본문 문단 ↔ 문단 = **본문 한 줄 높이**(17 × 1.5 = 25.5). 시안 본문은 문단 간격 0 에 빈 줄 하나로 문단을 나눈다 —
	   wpautop 으로 빈 줄 → `<p>` 가 되므로 그 빈 줄 높이를 문단 간격으로 준다. */
	--c4-about-para-gap: calc(var(--c4-fs-body1) * var(--c4-lh-body));

	/* 소개 — 이력 상자 · 서명 · 사진 카드 구역(2026-10-12 사용자 지시 — 레퍼런스 배치). 옵션이 비면 쓰이지 않는다(화면 예전 그대로). */
	--c4-about-history-label-gap:  4px;      /* 이력 묶음 이름 → 항목(이름이 늘 위 — 2026-10-13 사용자 지시 '항목명 ⏎ 항목'. 그 전 이름 칸 116 · 이름 ↔ 항목 16 두 칸 배치는 삭제) */
	--c4-about-history-group-gap:  16px;      /* 묶음 ↔ 묶음 */
	--c4-about-hero-title-fs-m:    24px;      /* 휴대폰 상단 큰 제목(2026-10-15 사용자 지시 '24px로' — 그 전 Page Title_m 26 · 좁은 폰에서 '치료합니 / 다'로 접혔다) */
	--c4-about-history-col-gap-wide: 80px;    /* 전체 폭 이력 상자 세 단 사이(안쪽 1100 이상) — 단은 글 길이만큼(2026-10-14 사용자 지시 '3열 간격 좁혀서 특허가 줄바꿈 안 되게' · 그 전 같은 폭 세 단 + 48 → 글 사이 154 · 172) */
	--c4-about-history-col-gap-mid:  48px;    /*   └ 안쪽 880 ~ 1099(특허 줄은 칸이 모자라 접힌다) */
	--c4-about-history-bg:        var(--c4-color-white);    /* 이력 상자 배경 — 흰색(2026-10-14 사용자 지시 '배경 화이트로' · 그 전 옅은 블루 #EEF4FB · 처음엔 --c4-color-surface-code). 모바일 스크롤 단서의 덮개 색도 이 값 */
	--c4-about-history-max-h-m:   320px;      /* 모바일 이력 상자 최대 높이 — 넘치면 상자 안에서 스크롤(레퍼런스) */
	--c4-about-history-hint-h:     14px;      /* 모바일 이력 상자 스크롤 단서 — 가장자리 그림자 높이(내용이 더 있을 때만) */
	--c4-about-history-hint-cover: 40px;      /*   └ 끝에 닿으면 그림자를 가리는 덮개 높이 */
	--c4-about-history-hint-color: rgb(0 0 0 / .14);   /*   └ 그림자 색(시안에 없는 값 — 2026-10-12 리뷰 반영) */
	--c4-about-sign-pt:            24px;      /* 본문 → 서명(카드가 늘어나면 서명은 바닥에 붙는다) */
	--c4-about-sign-gap:           12px;      /* 서명 앞 글 ↔ 이름 */
	/* 진료 과정(2026-10-14 사용자 지시 — 사진 카드 구역 위 · 참고 corridoradvisors.com 'How it works' — 시안에 없는 값) */
	--c4-about-process-pt:          60px;  --c4-about-process-pt-m:   24px;   /* 붙은 안쪽 위 · 아래 */
	--c4-about-process-pb:          60px;  --c4-about-process-pb-m:   24px;
	--c4-about-process-desc-w:     560px;                                    /* 오른쪽 설명 칸 최대 폭 — 칸은 가장 긴 줄 길이만큼(fit-content · 2026-10-14 · 그 전 400 고정이라 '… 소요될 수 / 있습니다.'로 접혔다) */
	--c4-about-process-desc-fs:     15px;                                    /* 오른쪽 설명 글자(2026-10-14 사용자 지시 '15px · 왼쪽 제목 문장과 하단 정렬' — 그 전 17 / 모바일 16) */
	--c4-about-process-head-gap:    80px;                                    /* 제목 ↔ 설명 */
	--c4-about-process-stage-gap:   48px;  --c4-about-process-stage-gap-m: 24px;   /* 제목 묶음 → 사진 카드 */
	--c4-about-process-card-h:     clamp(180px, calc(100svh - 541px), 340px); /* 사진 카드 높이(화면이 낮으면 줄어든다 · 폭은 비율) — 2026-10-15 설명을 제목 아래로 옮기며 머리 +61 만큼 빼고(480 → 541) 최소 220 → 180 */
	--c4-about-process-card-ratio: 460 / 340;  --c4-about-process-card-ratio-m: 16 / 10;
	--c4-about-process-tag-inset:   16px;
	--c4-about-process-tag-pad:     10px 14px;
	--c4-about-process-rail-gap:    40px;  --c4-about-process-rail-gap-m:  24px;   /* 사진 카드 → 단계 줄 */
	--c4-about-process-dot:         40px;  --c4-about-process-dot-m:       32px;   /* 번호 동그라미 */
	--c4-about-process-fill-w:       2px;                                    /* 스크롤 따라 자라는 파란 줄 굵기 — 연혁 파란 줄도 이 값(2026-10-15) */
	--c4-about-process-item-gap-m:  40px;  --c4-about-process-item-row-gap-m: 16px;   /* 휴대폰 펼친 단계 — 단계 ↔ 단계 · 사진 → 번호 줄(2026-10-15 사용자 지시) */
	--c4-about-process-item-name-fs-m: 18px;   /* 휴대폰 펼친 단계 이름(같은 날 '한글 텍스트 18px') */
	--c4-about-process-halo:         5px;                                    /* 지금 단계 동그라미 둘레 옅은 테 */
	--c4-about-process-halo-beat:   12px;                                    /*   └ 심장 박동처럼 커지는 크기(2026-10-14 사용자 지시 '심장 박동처럼 원 주변 옅은 파란 빛이 커졌다 작아졌다') */
	--c4-about-process-beat:        1.6s;                                    /*   └ 한 박(두근 · 두근 · 쉼) */
	--c4-about-process-step-pr:     24px;  --c4-about-process-step-pr-m:    6px;   /* 단계 칸 오른쪽 여유 */
	--c4-about-process-name-gap:    16px;  --c4-about-process-name-gap-m:  10px;   /* 번호 → 단계 이름('STEP n' 글자를 빼며 18 + 4 → 16 · 2026-10-14) */
	--c4-about-process-name-fs:     24px;  --c4-about-process-name-fs-m:   14px;
	--c4-about-process-step-h:      60svh; --c4-about-process-step-h-m:    50svh;  /* 한 단계 넘어가는 데 드는 스크롤 길이 */
	--c4-about-process-move:        .8s;                                     /* 사진 카드 옮겨 가기 · 진행 줄 채우기 */
	--c4-about-process-fade:        .6s;                                     /* 사진 바뀜 · 동그라미 · 글자색 */
	--c4-about-process-idle:        var(--c4-about-timeline-idle);          /* 아직 안 켜진 단계의 번호 · STEP · 이름 — 연혁의 아직 안 닿은 회색과 같다(2026-10-14 사용자 지시 '활성화 안된건 전부 회색') */
	--c4-about-feature-pt:         73px;  --c4-about-feature-pt-m:  33px;   /* 사진 카드 구역 위(content 아래 여백 60 / 20 에 더해진다 — 합 133 / 53. 2026-10-13 사용자 지시 '흰 여백 1/3 만큼 더' 100 → 133 · 모바일 40 → 53 · 그 전 40 / 20) */
	--c4-about-feature-pb:         60px;  --c4-about-feature-pb-m:  20px;   /* 사진 카드 구역 아래 — content 아래 여백과 같은 값 */
	--c4-about-feature-head-gap:   16px;  --c4-about-feature-head-gap-m: 12px;  /* 제목 → 설명 */
	--c4-about-feature-list-gap:   40px;  --c4-about-feature-list-gap-m: 24px;  /* 설명 → 카드 */
	--c4-about-feature-caption-gap: 16px; --c4-about-feature-caption-gap-m: 12px;  /* 사진 → 사진 설명 */
	--c4-about-feature-caption-fs: 22px;  --c4-about-feature-caption-fs-m: 18px;  /* 사진 설명 글자 — PC 22 · 모바일 18(2026-10-14 사용자 지시 '전부 22로 통일 · 모바일은 알아서' · 그 전 17 → 34 → 24 / 22) */
	--c4-about-feature-ratio:     4 / 3;      /* 카드 사진 칸 */
	--c4-about-feature-title-fs:   40px;     /* 사진 카드 구역 제목 PC — 40(2026-10-13 사용자 지시 · 그 전 Page Title2 + 4 = 32 · 시안 28) */
	--c4-about-feature-title-fs-m: calc(var(--c4-fs-page-title2-m) + 4px);   /*   └ 모바일 Page Title2_m + 4 → 24(시안 20 · PC 40 지시 때 모바일은 그대로) */
	--c4-about-card-title-fs:      32px;     /* 글 카드 제목 PC — 32(2026-10-13 사용자 지시 · 시안 Page Title2 28 · 모바일은 Page Title2_m 20 그대로) */
	--c4-about-sign-name-fs:       22px;  --c4-about-sign-name-fs-m: 18px;   /* 서명 이름 — PC 22 · 모바일 18(2026-10-14 사용자 지시 '전부 22로 통일 · 모바일은 알아서' · 그 전 20 / 20) */

	/* 소개 — 연혁 구역(2026-10-13 사용자 지시 "3개 이미지 밑에 연혁 · 참고 사진 레이아웃" · 시안에 없는 값). 제목 · 설명은 사진 카드 구역과 같은 모양(about.css 공유).
	   배치: [연도 칸] [점 · 세로줄 칸] [(월) 내용 줄들] — 점은 연도 첫 줄 가운데, 세로줄은 점에서 다음 연도의 점까지. */
	--c4-about-timeline-pt:        60px;  --c4-about-timeline-pt-m:  40px;   /* 구역 위(사진 카드 구역 아래 여백 60 / 20 에 더해진다 — 새 구역으로 읽히게 넉넉히) */
	--c4-about-timeline-pb:       60px;  --c4-about-timeline-pb-m:  60px;   /* 구역 아래(푸터 앞) — 60 통일(2026-10-14 · 그 전 100 / 60) */
	--c4-about-timeline-list-w:   720px;                                     /* 목록 폭(가운데) — 880 → 720(2026-10-13 사용자 지시 "가운데에 있어 보이게" — 내용 줄이 대개 짧아 880 이면 오른쪽이 비어 왼쪽으로 쏠려 보였다. 묶음 상자 = 화면 가운데 · 가장 긴 줄(584)만 두 줄) */
	--c4-about-timeline-list-gap:  56px;  --c4-about-timeline-list-gap-m: 32px;  /* 제목 · 설명 → 목록 */
	--c4-about-timeline-group-gap: 48px;  --c4-about-timeline-group-gap-m: 32px; /* 연도 ↔ 연도 */
	--c4-about-timeline-year-w:   140px;  --c4-about-timeline-year-w-m:  72px;   /* 연도 칸 — 네 자리 연도 + 여백. 'Since 1988' 처럼 긴 글은 칸 안에서 두 줄로 */
	--c4-about-timeline-rail-w:    56px;  --c4-about-timeline-rail-w-m:  28px;   /* 점 · 세로줄 칸(점은 가운데) */
	--c4-about-timeline-year-fs:   36px;  --c4-about-timeline-year-fs-m: 24px;
	--c4-about-timeline-year-lh:   1.2;
	--c4-about-timeline-dot:       10px;  --c4-about-timeline-dot-m:      8px;   /* 점 — 포인트 컬러 */
	--c4-about-timeline-line-w:     1px;                                     /* 세로줄 — 구분선 색(--c4-color-border) */
	--c4-about-timeline-item-gap:  10px;  --c4-about-timeline-item-gap-m:  8px;  /* 내용 줄 ↔ 줄 */
	--c4-about-timeline-month-w:  2.25em;                                    /* 월 칸(월이 있을 때만) — 두 자리 숫자 + 여백 */
	--c4-about-timeline-fill-w:   var(--c4-about-process-fill-w);           /* 스크롤 따라 자라는 파란 줄(포인트 컬러) — 진료 과정 파란 줄과 같은 굵기 2(2026-10-15 사용자 지시 '진료 과정 파란 선 굵기대로 연혁도 두껍게' · 그 전 회색 줄과 같은 1 · 처음 2) */
	--c4-about-timeline-idle:     var(--c4-color-text-faint);                /*   └ 아직 닿지 않은 연도 · 내용 · 점(회색 · grey300) */
	--c4-about-timeline-fade:      .5s;                                      /*   └ 회색 ↔ 파랑 · 검정 바뀌는 시간(부드럽게) */

	/* ---------------------------------------------------------------
	   오시는 길 (12단계) — 고정 페이지 + 전용 템플릿 `page-templates/template-location.php`
	   시안: 추가 페이지 파일 · 섹션 `/location`(2134:2659) — Desktop location-section `2134:2688` · Mobile `2134:2662`
	   ★ 재사용(새로 만들지 않았다) — 섹션 폭 800 = FAQ `--c4-faq-inner-w` · PC 위 80 = 전 화면 공통 `--c4-page-pt` ·
	     좌우 24 = `--c4-gutter-mobile` · 글자 전부(제목 `--c4-fs-page-title`(-m) / `--c4-lh-page-title` · 상호 `--c4-fs-page-title2`(-m) ·
	     주소 · 교통 `--c4-fs-body1` + `--c4-lh-body`, 주소만 `--c4-fw-bold`) · 색 grey900 `--c4-color-text` · 빈 지도 칸 grey300 `--c4-color-img-placeholder`.
	   --------------------------------------------------------------- */

	/* 세로 리듬 — PC 위는 공통 `--c4-page-pt`(80). 블록 사이(제목 → 지도 → info)는 section gap 하나.
	   ★ 모바일 위 · 아래 20 — 시안 Mobile 은 헤더(72) 아래 20 · 푸터 위 20 이다(프롬프트의 '92'는 헤더를 포함한 좌표). */
	--c4-location-pb:          60px;                                  /* PC 아래 — 60 통일(2026-10-14) */
	--c4-location-pt-m:        20px;  --c4-location-pb-m:   60px;    /* 모바일 위 · 아래(아래 60 통일 · 2026-10-14 · 그 전 20) */
	--c4-location-gap:         40px;  --c4-location-gap-m:  20px;    /* 제목 → 지도 → info — ★ PC 40 / 모바일 20, 묶지 말 것 */

	/* 지도 칸 비율 — 시안 PC 800 × 316.4 / 모바일 375 × 220. ★ PC 와 모바일이 다르다(2.53 : 1 ↔ 1.70 : 1). radius 없음. */
	--c4-location-map-ratio:   800 / 316.4;
	--c4-location-map-ratio-m: 375 / 220;

	/* info — PC 는 **내용 폭 + 사이 125**(반반 아님). 두 칸이 안 들어가는 폭(모바일 · 좁은 태블릿)에서는 세로로, 사이 32. */
	--c4-location-info-gap:    125px;
	--c4-location-info-gap-m:   32px;
	--c4-location-addr-gap:     10px;  --c4-location-addr-gap-m: 12px;  /* 상호 → 주소 */
	/* 주소 칸 최소 폭(PC) — 시안 주소 본문은 **폭 234 로 고정된 글 상자**다(글이 짧아도 칸이 234). 그래서 교통 칸이 x 560 + 234 + 125 = 919 에서 시작한다.
	   내용 폭만 쓰면(기본 문구 약 175) 교통 칸이 약 60px 왼쪽으로 온다. 주소가 더 길면 칸은 내용만큼 넓어진다(최소값일 뿐). */
	--c4-location-addr-min-w: 234px;

	/* 교통 1 ~ 3 아이콘 줄 토큰(--c4-location-icon · -icon-label-gap · -label-gap · -label-line · -icon-gap · -icon-pad · -access-gap)은 2026-10-14 그 줄을 지우며 뺐다 */

	/* 지도 버튼 — 그림 버튼(테마 `assets/img/location/` · 2배 260 × 84) */
	--c4-location-btn-w:      130px;
	--c4-location-btn-h:       42px;
	--c4-location-btn-radius:   8px;
	--c4-location-btn-gap:     12px;
	--c4-location-cta-pad-x:   16px;   /* 버튼 줄 맨 앞 '전화예약'(헤더 버튼 부품) 좌우 안쪽(2026-10-14) */
	--c4-location-btn-icon-w:  16px;  --c4-location-btn-icon-h: 20px;  --c4-location-btn-icon-gap: 6px;   /* 지도 버튼 아이콘(SVG) · 글자와 사이(2026-10-15 '선명하게' — 그림 버튼 대신) */
	--c4-location-btn-fs:      15px;                               /*   └ 글자 */
	--c4-location-btn-naver-text: #202020;  --c4-location-btn-kakao-bg: #F9E000;  --c4-location-btn-kakao-text: #212121;   /*   └ 원래 버튼 그림에서 잰 색(브랜드 버튼 — 테마 포인트 컬러와 따로) */
	--c4-location-btn-lift:    -3px;                               /* 버튼 셋 마우스 올림 — 살짝 위로(2026-10-15 사용자 지시) */
	--c4-location-btn-shadow:  0 10px 20px rgb(0 0 0 / .1);       /*   └ 아래로 옅은 그림자(y 10) */
	--c4-location-btn-hover-dur:  .3s;
	--c4-location-btn-hover-ease: cubic-bezier(.22, .61, .36, 1);  /*   └ 빠르게 시작 · 천천히 멈춤 */

	/* 교통 안내(2026-10-14 사용자 지시 · 기존 사이트 내용 — 시안에 없는 값) — 구분마다 [번호 · 이름 | 안내 · 버스]. 모바일은 세로. */
	--c4-location-guide-head-w:     220px;  /* 왼쪽 머리 칸(번호 · '지하철에서 버스 환승 시'가 한 줄) */
	--c4-location-guide-col-gap:     24px;  /* 머리 ↔ 본문 */
	--c4-location-guide-pad:         32px;  --c4-location-guide-pad-m:      24px;  /* 구분 위아래 */
	--c4-location-guide-head-fs:     20px;  --c4-location-guide-head-fs-m:  18px;  /* 번호 · 구분 이름 */
	--c4-location-guide-head-gap-m:  16px;  /* 모바일 머리 → 본문 */
	--c4-location-guide-num-gap:      8px;  /* 번호 ↔ 구분 이름 */
	--c4-location-guide-item-gap:    20px;  /* 안내 ↔ 안내 · 안내 → 버스 */
	--c4-location-guide-name-gap:     2px;  /* 이름 → 설명 */
	--c4-location-guide-bus-gap:      6px;  /* 번호표 사이 · 줄 사이 */
	--c4-location-guide-bus-type-w:  36px;  /* 종류 이름 칸('간선' · '지선') — 번호표 시작선을 맞춘다 */
	--c4-location-guide-bus-pad:     1px 10px;
	--c4-location-bus-trunk:   #0068B7;  /* 서울 간선버스 파랑 */
	--c4-location-bus-branch:  #3A9A2C;  /* 서울 지선버스 초록(공식 #53B332 는 흰 글자 대비가 낮아 조금 진하게) */
	--c4-location-bus-express: #E60012;  /* 광역 빨강 */
	--c4-location-bus-etc:     var(--c4-color-text-sub);

	/* ---------------------------------------------------------------
	   갤러리 (13단계) — 고정 페이지 + 전용 템플릿 `page-templates/template-gallery.php`
	   시안: 추가 페이지 파일 · 섹션 `/gallery`(2134:2620) — Desktop gallery-section `2134:2623` · Mobile `2134:2641`
	   ★ 재사용(새로 만들지 않았다) — 왼쪽 여백 = 헤더 컨테이너(`--c4-container-w` 1280 + `--c4-container-pad` 20 → 1920 에서 320) ·
	     모바일 좌우 24 `--c4-gutter-mobile` · 글자 전부(라벨 `--c4-fs-article-h3`(-m) + `--c4-lh-article` · 제목 `--c4-fs-page-title`(-m) ·
	     탭 `--c4-fs-article-h3-m` + `--c4-lh-article` — 항목 높이 18 × 1.9 = 34.2) · 색 전부(포인트 `--c4-color-accent` · grey900 `--c4-color-text` ·
	     grey500 `--c4-color-text-muted` · grey300 `--c4-color-img-placeholder` · grey100 `--c4-color-surface-code`) · 포커스 링 `--c4-focus-ring-*`.
	   --------------------------------------------------------------- */

	/* 섹션 — PC 높이 757(위아래 120 안에서 글 묶음이 세로 가운데 · 사진은 섹션 높이 전체) / 모바일 위 60 · 아래 0 */
	--c4-gallery-min-h:       757px;   /* 최소 — 장소가 많아 글 묶음이 길어지면 섹션도 늘어난다 */
	--c4-gallery-pad-y:       120px;
	--c4-gallery-pt-m:         60px;

	/* PC 가로 — 글 묶음 폭 345 · 글 묶음 ↔ 사진 39(렌더 좌표 665 → 704). ★ 시안 오토레이아웃 gap 100 은 사진 묶음이 칸보다 커서 뭉개진 값이다.
	   사진 시작 = 컨테이너 왼쪽 + 345 + 39 (1920 에서 704) · 끝 = 화면 오른쪽 끝. 그래서 '시작 좌표' 토큰을 따로 두지 않는다(계산). */
	--c4-gallery-text-w:      380px;   /* 글 칸 — 제목 '깊이 있게 몰입합니다'(나눔명조 44 · 374px)가 한 줄에 들어가게(2026-10-14 · 그 전 시안 345 — '몰입합니 / 다'로 끊겼다) */
	--c4-gallery-photo-gap:    39px;

	--c4-gallery-label-gap:    20px;  --c4-gallery-label-gap-m: 12px;  /* 라벨 → 제목 */
	--c4-gallery-title-gap:    40px;                                   /* 제목 → 탭 (PC · 모바일 같다) */
	--c4-gallery-tab-gap-m:    12px;   /* 모바일 탭 사이 — ★ PC 는 0(줄 높이 190% 가 간격) */
	--c4-gallery-stack-gap-m:  20px;   /* 모바일 글 묶음 → 사진 */
	--c4-gallery-photo-ratio-m: 1 / 1; /* 모바일 사진 375 × 375 */

	/* PC 사진 가장자리 — 시안 '타원(사진 칸 기준 가운데 82% · 50%, 반지름 67% · 69%) + 레이어 블러 200' 을 radial-gradient 로 근사.
	   블러는 타원 경계에서 반쯤 투명하고 경계 안팎 약 200 에 걸쳐 번진다 → 경계(100%)를 가운데로 75% 에서 불투명 · 125% 에서 투명.
	   ★ 정확히 같을 수 없다(블러는 S 곡선 · 그라데이션은 직선) — 시안 스크린샷과 나란히 놓고 맞췄다(PROGRESS ⑧). */
	--c4-gallery-mask-rx:      67%;
	--c4-gallery-mask-ry:      69%;
	--c4-gallery-mask-cx:      82%;
	--c4-gallery-mask-cy:      50%;
	--c4-gallery-mask-stop:    75%;   /* 여기까지 불투명 */
	--c4-gallery-mask-end:    125%;   /* 여기서 완전 투명(100% 를 넘는 중지점 — 타원 바깥까지 번진다) */

	/* 움직임(13단계 후속 — 2026-10-12 사용자 지시) — 사진 바꿀 때 디졸브 · 탭 글자 마우스 색 전환.
	   '움직임 줄이기' 설정이면 base.css 가 전환 시간을 0 에 가깝게 줄인다. */
	--c4-gallery-fade:        .6s ease;
	--c4-gallery-hover:       .3s ease;
}

/* 헤더 높이만 이 파일 안에서 전환한다(확정값: 80px ≥768 / 60px <768 — 2026-10-15 사용자 지시 '모바일 헤더 높이 60' · 그 전 72). */
@media (max-width: 767.98px) {
	:root { --c4-header-h: 60px; }
}