/* ============================================
   2026-07-28: 타입C 디자인 토큰 (KAR 스타일 스킨)
   어드민에서 관리하는 컬러(--tc-gnb-bg, --tc-accent 등)는
   +layout.svelte 에서 themeC 값으로 덮어씀.
   여기 값은 어드민 미설정 시의 기본값 역할.
   네임스페이스 --tc-* 로 분리 → typeA(--kjvr-*)/typeB(--c-*) 토큰과 충돌 없음.
   ============================================ */

:root {
	/* ── Colors: 어드민 관리 대상 (기본값) ── */
	--tc-gnb-bg: #414042;
	--tc-gnb-text: #ffffff;
	--tc-gnb-accent: #ffffff;
	--tc-hero-overlay: rgba(58, 58, 60, 0.82);
	--tc-hero-text: #ffffff;
	--tc-accent: #4d6b74;
	--tc-accent-text: #ffffff;
	--tc-footer-bg: #333333;
	--tc-footer-text: #9a9a9a;

	/* ── Colors: 고정 토큰 ── */
	--tc-page-bg: #efefef;
	--tc-surface: #ffffff;
	--tc-surface-alt: #f7f7f7;
	--tc-search-bg: #f5f5f5;
	--tc-border: #e0e0e0;
	--tc-border-strong: #cfcfcf;
	--tc-divider: #ebebeb;

	--tc-text: #222222;
	--tc-text-sub: #555555;
	--tc-text-muted: #8a8a8a;
	--tc-link: #2f4f5a;

	--tc-card-accent: #a0a0a0;
	--tc-btn-fill: #e4e4e4;
	--tc-btn-fill-text: #333333;
	--tc-btn-outline-border: #d2d2d2;
	--tc-btn-outline-text: #4a4a4a;

	/* ── Typography ── */
	/* 2026-07-28: Pretendard — common.css 의 @font-face(/font/PretendardVariable.woff2) 사용. 외부 CDN 없음 */
	--tc-font-body: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont,
		system-ui, 'Apple SD Gothic Neo', sans-serif;

	/* 2026-07-28: 타입 스케일 — 12/14/16/18/20/24/30/36 (본문 16px 기준)
	   임의값·소수점 크기를 없애고 이 8단계 안에서만 고른다 */
	--tc-fs-xs: 12px; /* 캡션, 저자명, 소형 버튼 */
	--tc-fs-sm: 14px; /* 보조 텍스트, 서지정보, 폼 */
	--tc-fs-base: 16px; /* 본문 */
	--tc-fs-lg: 18px; /* 카드 제목 */
	--tc-fs-xl: 20px; /* 소제목 */
	--tc-fs-2xl: 24px; /* 섹션 제목 */
	--tc-fs-3xl: 30px; /* 로고, 큰 제목 */
	--tc-fs-4xl: 36px;
	--tc-fs-5xl: 40px; /* 히어로 제목 */
	--tc-fs-6xl: 48px;

	/* 역할 별칭 — 컴포넌트는 역할명 우선 사용 */
	--tc-fs-body: var(--tc-fs-base);
	--tc-fs-h3: var(--tc-fs-lg);
	--tc-fs-h2: var(--tc-fs-2xl);
	--tc-fs-hero: var(--tc-fs-5xl);
	--tc-fs-hero-mobile: var(--tc-fs-2xl);

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

	/* 행간 — 글자가 클수록 좁게 */
	--tc-lh-none: 1;
	--tc-lh-tight: 1.3;
	--tc-lh-snug: 1.45;
	--tc-lh-normal: 1.6;
	--tc-lh-relaxed: 1.75;

	/* ── Spacing (4px base) ── */
	--tc-sp-2xs: 4px;
	--tc-sp-xs: 8px;
	--tc-sp-sm: 12px;
	--tc-sp-md: 16px;
	--tc-sp-lg: 24px;
	--tc-sp-xl: 32px;
	--tc-sp-2xl: 48px;
	--tc-sp-3xl: 64px;

	/* ── Radius / Border ── */
	--tc-r-sm: 2px;
	--tc-r-md: 4px;

	/* ── Shadow ── */
	--tc-shadow-page: 0 0 12px rgba(0, 0, 0, 0.07);
	--tc-shadow-cover: 0 2px 8px rgba(0, 0, 0, 0.14);

	/* ── 표지 책 두께 (2026-07-28) — 우하단 방향 입체 두께 ── */
	--tc-book-depth: 7px;
	--tc-book-side-bg: #e8e8e8;
	--tc-book-bottom-bg: #d9d9d9;

	/* ── Layout ── */
	--tc-container: 1200px;
	--tc-gnb-h: 86px;
	/* 2026-07-28: 배경 이미지 영역 확보. 어드민 themeC.heroHeight 로 덮어쓸 수 있음 */
	--tc-hero-h: 220px;
	--tc-hero-h-mobile: 140px;

	/* ── Transition ── */
	--tc-tr: 180ms ease;

	/* ── Z-Index ── */
	--tc-z-gnb: 50;
	--tc-z-dropdown: 120;
}

/* 타입C 전용 바디 배경 — 레이아웃 래퍼(.typec-root)가 있을 때만 적용 */
.typec-root {
	background: var(--tc-page-bg);
	font-family: var(--tc-font-body);
	color: var(--tc-text);
	font-size: var(--tc-fs-body);
	line-height: var(--tc-lh-normal);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.typec-root :where(a) {
	color: inherit;
	text-decoration: none;
}

.typec-root :where(h1, h2, h3, h4, p, ul, ol) {
	margin: 0;
}

.typec-root :where(ul, ol) {
	padding: 0;
	list-style: none;
}

.typec-root :where(button, input, select) {
	font-family: inherit;
}