/*
 * tokens.css — 디자인 토큰 선언. 자리는 이 파일 하나뿐이다.
 *
 * 값의 단일 출처는 DESIGN-TOKENS.md 이며 이 파일은 그 사본이다.
 * 시안 Text style / Color style 이 바뀌면 문서와 이 파일을 함께 갱신한다.
 *
 * ★ 주석의 [N단계] 는 그 토큰을 처음 쓰는 단계다.
 *   값이 확정돼 있고 아직 그 화면을 안 만들었을 뿐인 토큰은 '참조 0 정리' 대상이 아니다.
 *   지웠다 다시 만드는 동안 문서와 코드가 어긋나므로 그냥 둘 것.
 */

:root {
	/* ── 색 ───────────────────────────────────────────────── */
	--c4-color-text: #212121;              /* 시안 grey900  — 기본 텍스트 */
	--c4-color-text-sub: #5B5B5B;          /* 시안 grey700  — 보조 텍스트 */
	--c4-color-text-meta: #8A8A8A;         /* 시안 grey500  — 상세 날짜, 푸터 카피라이트 */
	--c4-color-text-faint: #BCBCBC;        /* 시안 grey300  — 카드 날짜, 검색 placeholder */
	--c4-color-border: #E6E6E6;            /* 시안 divider */
	--c4-color-white: #FFFFFF;
	--c4-color-footer-bg: #2E2E2E;         /* 시안 bg_darkgrey */

	/* 포인트 컬러 — 유일하게 관리자 옵션으로 덮어쓸 수 있는 디자인 값.
	   덮어쓸 때는 accent-soft 두 줄도 함께 갱신한다(inc/enqueue.php). */
	--c4-color-accent: #32B493;            /* 시안 Accent1 */
	--c4-color-accent-soft: rgba(50, 180, 147, .1);   /* 폴백 — 반드시 앞에. hex 하드코딩 금지의 명시적 예외 */
	--c4-color-accent-soft: color-mix(in srgb, var(--c4-color-accent) 10%, transparent);

	--c4-color-focus: #279A7E;             /* 대비 확보용 독립 토큰 — accent 를 따라가지 않는다 */
	--c4-color-img-placeholder: #BCBCBC;   /* grey300 과 값만 같다. 의미가 달라 분리 유지 — 합치지 말 것 */
	--c4-color-code-bg: #F2F2F2;           /* 시안 grey100 — 인라인 code / 코드블록 배경 [4단계] */

	/* ── 폰트 ─────────────────────────────────────────────── */
	--c4-font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI',
		'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;

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

	/* 자간은 시안이 -4% 다. em 이므로 각 요소가 자기 크기로 다시 계산해야 한다.
	   body 한 곳에만 걸면 안 된다 — base.css 의 전역 선택자 참조. */
	--c4-ls: -0.04em;
	--c4-ls-logo: 0;                       /* 로고만 예외 */

	/* 페이지 제목 계열 — 목록·카테고리·검색·빈 상태·404·문의 폼·그 밖의 고정 페이지 */
	--c4-fz-page-title: 44px;
	--c4-lh-page-title: 1.3;

	/* 상세 글 제목 계열 — 상세 + 약관 2종 */
	--c4-fz-single-title: 32px;
	--c4-lh-single-title: 1.2;

	/* 카드 제목 계열 — PC·모바일 동일 [3단계] */
	--c4-fz-post-title: 17px;
	--c4-lh-post-title: 1.3;

	/* 아티클 헤딩 [4단계] */
	--c4-fz-article-h2: 24px;
	--c4-lh-article-h2: 1.9;
	--c4-fz-article-h3: 22px;
	--c4-lh-article-h3: 1.9;

	/* 아티클 문단 — PC·모바일 동일 [4단계] */
	--c4-fz-paragraph: 17px;
	--c4-lh-paragraph: 1.9;

	/* 메뉴 [2단계] — PC 와 모바일 드로어는 전환 기준선이 달라(1024) 별도 토큰이다 */
	--c4-fz-menu: 17px;
	--c4-lh-menu: 1.5;
	--c4-fz-menu-m: 22px;
	--c4-lh-menu-m: 1.2;

	/* 로고 [2단계] */
	--c4-fz-logo: 20px;
	--c4-lh-logo: 1.4;

	/* 상세 전용 — 시안에 대응 Text style 이 없어 렌더 값으로 확정한 둘 [4단계] */
	--c4-fz-single-cat: 16px;
	--c4-lh-single-cat: 1.2;               /* 카드 카테고리 라벨(1.5)과 줄간격만 다르다. 합치지 말 것 */
	--c4-fz-single-date: 14px;
	--c4-lh-single-date: 1.5;              /* 굵기 500 은 이 자리에만 쓴다 */

	/* 본문 계열 */
	--c4-lh-body: 1.5;                     /* body1~body4 공통 */
	--c4-fz-body1: 17px;
	--c4-fz-body2: 16px;
	--c4-fz-body3: 15px;
	--c4-fz-body4: 14px;
	--c4-fz-caption: 13px;                 /* 띠 배너 [2단계] */
	--c4-lh-caption: 1.4;

	/* ── 폭 · 거터 ────────────────────────────────────────── */
	--c4-container-chrome: 1280px;         /* 헤더·푸터 [2단계] */
	--c4-container-content: 720px;         /* 본문 컬럼 */
	--c4-sidebox-w: 242px;                 /* 사이드 박스 열 [3단계] */
	--c4-grid-gap: 40px;                   /* 3열 그리드 column-gap [3단계] */
	--c4-gutter-pc-chrome: 20px;           /* 헤더·푸터 PC 좌우 패딩 [2단계] */
	--c4-gutter-mobile: 24px;              /* 모바일 콘텐츠 좌우 여백 → 콘텐츠 327 */
	--c4-gutter-mobile-chrome: 20px;       /* 모바일 헤더·푸터 좌우 패딩 — 콘텐츠와 다른 값 [2단계] */

	/* ── 높이 ─────────────────────────────────────────────── */
	--c4-header-h: 80px;                   /* <768 에서 72px. 전환은 768 에서만 — 1024 는 드로어 전용 경계다 */
	--c4-admin-bar-h: 0px;                 /* is_admin_bar_showing() 일 때만 32/46/0 으로 덮어쓴다.
	                                          ★ 반드시 :root 에 둔다. body.admin-bar 에 두면
	                                          html 에 걸리는 scroll-padding-top 이 못 읽어 항상 0 이 된다 */
	--c4-logo-slot-w: 190px;               /* [2단계] */
	--c4-logo-slot-h: 48px;                /* 로고 이미지가 헤더 높이를 밀어 올리지 못하게 고정 [2단계] */

	/* ── 페이지 세로 여백 (DESIGN-TOKENS §5-4 표의 사본) ──── */
	--c4-page-top: 80px;                   /* 전 화면 공통. <768 에서 60px */
	--c4-title-gap: 40px;                  /* 제목 → 본문. 고정 페이지·약관·상세 공통. <768 에서 28px */

	/* 하단 여백은 화면마다 다르다 — 공통 토큰 하나로 묶지 말 것.
	   화면 이름이 없는 하단 토큰(--c4-page-pb 같은)을 만들면 다음 단계가 거기에 덮어쓴다. */
	--c4-page-bottom-list: 40px;           /* 목록·카테고리·검색        [3·5단계] */
	--c4-page-bottom-single: 60px;         /* 상세                      [4단계]   */
	--c4-page-bottom-page: 60px;           /* 약관·고정 페이지·문의 폼   [이 단계 · 7·8단계] */
	--c4-page-bottom-empty: 40px;          /* 빈 상태·404               [6단계]   */
	/* 문의 폼용 토큰은 만들지 않는다 — page.php 를 쓰므로 위 -page 를 그대로 참조한다.
	   별칭도 만들지 말 것. 같은 값을 두 번 선언하면 한쪽만 바뀌는 사고가 난다. */

	/* ── radius (값이 같아도 의미가 다르면 분리 유지) ─────── */
	--c4-radius-img: 20px;                 /* 카드 썸네일·상세 대표 이미지 [3·4단계] */
	--c4-radius-banner: 8px;               /* 중간 배너 [4단계] */
	--c4-radius-box: 8px;                  /* 사이드 박스·관련글 박스 [3·4단계] */
	--c4-radius-btn: 8px;                  /* CTA 버튼 [2단계] */
	--c4-radius-pill: 100px;               /* 검색 인풋·스크롤바 [3단계] */
	--c4-radius-page-num: 4px;             /* 페이지네이션 현재 페이지 [3단계] */

	/* ── 골격 수치 (확정값에 없어 이 단계에서 정한 것) ───── */
	--c4-border-w: 1px;                    /* 테두리·구분선 두께 */
	--c4-focus-ring-w: 2px;                /* :focus-visible 링 두께 */
	--c4-focus-ring-offset: 2px;           /* 〃 오프셋 */
	--c4-anchor-gap: 16px;                 /* 앵커 이동 시 헤더 아래 여유분 */
	--c4-skip-link-off: -200%;             /* 스킵 링크 오프스크린 위치 — 방어값이 아니라 디자인 값이라 토큰 */
	--c4-skip-link-inset: 8px;             /* 포커스됐을 때 화면 안쪽 여백 */

	/* ── 헤더 [2단계] ─────────────────────────────────────── */
	--c4-header-bg-pc: rgba(255, 255, 255, .7);  /* 시안 실측. hex 하드코딩 금지의 명시적 예외 */
	--c4-header-blur: 20px;                /* Figma BACKGROUND_BLUR radius 40 = CSS blur 20px */
	--c4-header-logo-indent-m: 4px;        /* 모바일 로고만 컨테이너 안에서 4 들여쓴다 → 기준선 24 */
	--c4-hamburger-size: 32px;
	--c4-header-cta-h: 48px;               /* 로고 슬롯 높이와 값만 같다 — 의미가 달라 분리 유지 */
	--c4-header-cta-min-w: 120px;          /* ★ 하한선이지 목표치가 아니다. width 로 주지 말 것 */
	--c4-header-cta-pad-y: 10px;
	--c4-header-cta-pad-x: 21px;
	--c4-header-cta-gap: 6px;              /* 아이콘 ↔ 문구 */
	--c4-header-cta-icon: 19px;

	/* ── 모바일 드로어 [2단계] ─────────────────────────────── */
	--c4-drawer-pad-x: 24px;
	--c4-drawer-pad-top: 24px;
	--c4-drawer-pad-bottom: 12px;
	--c4-drawer-gap: 24px;                 /* 링크 세로 간격 */
	--c4-drawer-cta-bottom: 24px;

	/* ── 푸터 [2단계] ─────────────────────────────────────── */
	--c4-footer-pad-y: 40px;               /* <768 에서 28px */
	--c4-footer-terms-gap: 20px;           /* 약관 링크 사이 */
	/* 내부 세로 간격 셋은 값이 서로 달라 한 토큰으로 묶지 않는다. */
	--c4-footer-gap-terms-logo: 20px;      /* 약관 링크 줄 → 로고     <768 에서 24px */
	--c4-footer-gap-logo-company: 8px;     /* 로고 → 회사정보         <768 에서 12px */
	--c4-footer-gap-company-copy: 16px;    /* 회사정보 → 카피라이트    <768 에서  8px */
	--c4-footer-company-sep-gap: 0.5em;    /* 구분자 '|' 좌우 여백 — 시안의 공백 두 칸 폭에 해당 */

	/* ── 띠 배너 [2단계] ──────────────────────────────────── */
	--c4-topbar-pad-y: 12px;
	--c4-topbar-gap: 6px;                  /* PC 가로. <768 에서 2px(세로 2줄) */

	/* ── 목록 화면 세로 간격 [3단계] ──────────────────────── */
	/* ★ 세 값이 모바일에서 40 / 60 / 40 으로 엇갈린다. 가운데만 60 이다 — 한 값으로 묶지 말 것. */
	--c4-list-gap-title: 60px;             /* 제목 → 카드 리스트          <768 40px */
	--c4-list-gap-pagination: 60px;        /* 카드 리스트 → 페이지네이션   <768 60px */
	--c4-list-gap-search: 60px;            /* 페이지네이션 → 검색 폼       <768 40px */

	/* ── 글 카드 [3단계] ──────────────────────────────────── */
	--c4-card-gap: 60px;                   /* 카드 사이              <768 28px */
	--c4-card-media-w: 300px;              /* PC 썸네일 폭 */
	--c4-card-media-gap: 28px;             /* 썸네일 ↔ 텍스트        <768 12px */
	--c4-card-text-gap: 6px;
	--c4-card-text-pt: 8px;                /* PC 만. <768 은 0(썸네일과의 간격 12 가 그 역할) */
	--c4-card-ratio: 5 / 3;                /* PC 300×180 / 모바일 327×196 */

	/* ── 사이드 박스 [3단계] — 확정값 §9-1 기하 ───────────── */
	--c4-sidebox-head-h: 46px;             /* 토글 바 안쪽 높이 — 박스 테두리 포함 바깥 48. ★ 48 로 잡지 말 것 */
	--c4-sidebox-head-pad-x: 20px;
	--c4-sidebox-body-pad-y: 15px;
	--c4-sidebox-body-pad-x: 24px;
	--c4-sidebox-item-gap: 8px;
	--c4-sidebox-indent: 12px;             /* 2차 들여쓰기 */
	--c4-sidebox-chevron-w: 13px;
	--c4-sidebox-sticky-gap: 24px;         /* sticky top 에 더하는 여유 */

	/* ── 페이지네이션 [3단계] ─────────────────────────────── */
	/* 모든 항목이 같은 크기의 슬롯을 차지한다. 현재 페이지는 배경만 칠하는 것이지 더 커지지 않는다. */
	--c4-page-slot-w: 26px;
	--c4-page-slot-h: 22px;
	--c4-page-slot-gap: 4px;               /* 시안의 숫자 중심 간 거리 30 에서 역산 */

	/* ── 검색 폼 [3단계] ──────────────────────────────────── */
	--c4-search-w: 400px;                  /* PC. 모바일은 컨테이너 폭(327) */
	--c4-search-h: 48px;
	--c4-search-pad-y: 15px;
	--c4-search-pad-x: 19px;
	--c4-search-icon: 16px;
	--c4-search-icon-gap: 16px;
	--c4-search-border-w: 2px;

	/* ── 상세 제목 블록 [4단계] ───────────────────────────── */
	--c4-single-cat-gap: 8px;              /* 카테고리 라벨 → 제목 */
	--c4-single-date-gap: 20px;            /* 제목 → 날짜            <768 12px */

	/* ── 상세 세로 리듬 [4단계] — 4단계 프롬프트의 표가 출처 ─ */
	/* ★ 모바일은 20 과 28 이 섞인다. 아티클 안쪽(대표 이미지·본문 블록 사이)은 20,
	     아티클 바깥 경계(제목 블록·목차·배너)는 28 이다. 한 값으로 묶지 말 것.
	     제목 블록 → 다음 블록은 기존 --c4-title-gap(40/28) 을 그대로 쓴다. */
	--c4-single-gap-media: 40px;           /* 대표 이미지 → 본문 첫 블록  <768 20px */
	--c4-single-gap-banner: 40px;          /* 배너 위아래                <768 28px */

	/* ── 아티클 본문 .c4-entry-content [4단계] — 상세·고정 페이지·약관 공용 ── */
	/* 시안 리듬 8 / 20 / 40 에서만 고른다. 임의의 중간값을 만들지 말 것. */
	--c4-article-gap-block: 40px;          /* 본문 블록 사이   <768 20px — 약관·고정 페이지도 이 값 하나 */
	--c4-article-gap-heading: 8px;         /* 헤딩 → 바로 아래 블록 */
	--c4-article-space-s: 8px;             /* 목록 항목 사이·마커 간격·figcaption 위·표 셀 세로 */
	--c4-article-space-m: 20px;            /* 목록·인용 들여쓰기·코드블록 안쪽·표 셀 가로 */
	--c4-fz-article-h4: 20px;              /* h3(22) 에서 한 단계 아래. <768 17px(h3_m 18 에서 한 단계 아래) */
	--c4-lh-article-h4: 1.9;
	--c4-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Pretendard', monospace;
	--c4-ls-code: 0;                       /* 고정폭 글꼴은 음수 자간을 걸면 글자가 겹친다 */
	--c4-radius-code: 4px;                 /* 페이지네이션 칩(4)과 값만 같다 — 분리 유지 */
	--c4-code-inline-pad-x: 0.25em;        /* 인라인 code 좌우 — 글자 크기에 비례해야 해서 em */

	/* ── 같은 카테고리 글 [4단계] ─────────────────────────── */
	--c4-related-head-h: 53px;             /* 아래 구분선 1px 포함 */
	--c4-related-head-pad-y: 16px;         /* 위쪽만. 높이를 고정하므로 아래는 남는 자리 */
	--c4-related-head-pad-x: 20px;
	--c4-related-max-h: 350px;             /* 최대치이지 고정 높이가 아니다  <768 334px */
	--c4-related-list-pad-y: 8px;          /* <768 6px */
	--c4-related-item-pad-y: 8px;
	--c4-related-item-pad-x: 20px;
	--c4-related-scrollbar-w: 4px;
	--c4-related-scrollbar-inset: 8px;     /* 스크롤바 위·오른쪽 안쪽 여백  <768 6px */
	--c4-color-scrollbar: #BCBCBC;         /* 시안 grey300 과 값만 같다 — 의미가 달라 분리 유지 */

	/* ── 빈 상태 · 404 [6단계] ────────────────────────────── */
	/* 위 묶음(제목·문구) / 아래 묶음(검색 폼·푸터) 구조. 문구 → 검색 폼 사이는 가변이라 토큰이 없다. */
	--c4-empty-desc-gap: 108px;            /* 페이지 제목 블록 아래 → 문구 (404 는 제목 → 문구)  <768 80px */
	--c4-empty-search-gap-min: 60px;       /* 문구 → 검색 폼 최소 간격(남는 공간이 없을 때)      <768 40px */
	--c4-404-link-gap: 24px;               /* 404 전용, 시안 없음 — 문구 → '홈으로 가기'. 값이 같은 다른 토큰을 빌리지 말 것 */

	/* ── 문의 폼 (Fluent Forms) [7단계] ───────────────────── */
	/* ★ 색 토큰은 만들지 않는다 — 폼의 색은 플러그인 스타일러 소관이다.
	     radius 8 이 여기서도 두 번 나오지만 CTA(--c4-radius-btn)와 의미가 달라 분리 유지. */
	--c4-form-field-gap: 20px;             /* 필드 묶음 사이 */
	--c4-form-control-h: 48px;             /* 입력·셀렉트 */
	--c4-form-control-pad-x: 16px;
	--c4-radius-form-control: 8px;
	--c4-form-textarea-min-h: 120px;
	--c4-form-textarea-pad-y: 14px;
	--c4-form-btn-h: 48px;                 /* 제출 버튼 — 입력 높이와 값만 같다 */
	--c4-radius-form-btn: 8px;             /* 스타일러가 radius 를 지정하면 그쪽이 이긴다 */
	--c4-form-control-fz-touch: 16px;      /* <768 입력 글자 하한 — 이보다 작으면 iOS Safari 가 입력 탭 때 확대한다 */

	/* ── 기타 ─────────────────────────────────────────────── */
	--c4-gap-menu: 32px;                   /* 헤더 PC 메뉴 항목 간격 [2단계] */
	--c4-gap-menu-narrow: 16px;            /* 헤더에 여유가 없어지는 구간 [2단계] */
	--c4-transition: .25s ease;            /* 사이드 박스 펼침/접힘·chevron [3단계] */

	/* 전환 기준선. 미디어 쿼리 조건부에는 var() 를 쓸 수 없어 조건부에는 리터럴이 들어간다.
	   이 토큰들은 문서·JS 참조용이다. */
	--c4-bp-base: 768px;                   /* PC/모바일 값 전환의 기본선 */
	--c4-bp-nav: 1024px;                   /* 헤더 메뉴 → 드로어 */
	--c4-bp-sidebox: 1360px;               /* 사이드 박스 인라인 전환 */
}

/* ── 모바일(<768) 값 전환 ───────────────────────────────── */
@media (max-width: 767.98px) {
	:root {
		--c4-header-h: 72px;

		--c4-fz-page-title: 30px;
		--c4-fz-single-title: 22px;
		--c4-fz-article-h2: 20px;
		--c4-fz-article-h3: 18px;

		--c4-page-top: 60px;
		--c4-title-gap: 28px;

		--c4-footer-pad-y: 28px;
		--c4-footer-gap-terms-logo: 24px;
		--c4-footer-gap-logo-company: 12px;
		--c4-footer-gap-company-copy: 8px;

		--c4-topbar-gap: 2px;

		/* ★ 40 / 60 / 40 — 가운데만 60 이다. */
		--c4-list-gap-title: 40px;
		--c4-list-gap-pagination: 60px;
		--c4-list-gap-search: 40px;

		--c4-card-gap: 28px;
		--c4-card-media-gap: 12px;
		--c4-card-text-pt: 0px;

		--c4-single-date-gap: 12px;
		/* ★ 20(아티클 안쪽) 과 28(바깥 경계) 이 섞인다. */
		--c4-single-gap-media: 20px;
		--c4-single-gap-banner: 28px;
		--c4-article-gap-block: 20px;
		--c4-fz-article-h4: 17px;

		--c4-empty-desc-gap: 80px;
		--c4-empty-search-gap-min: 40px;

		--c4-related-max-h: 334px;
		--c4-related-list-pad-y: 6px;
		--c4-related-scrollbar-inset: 6px;
	}
}