/* ==========================================================================
   V6 KO typography — shared tokens + utilities (all .lydian-v6-page)
   Breakpoints aligned with main KO staging. Figma informs token values only.
   ========================================================================== */

body.lydian-v6-page {
	--ko-font-display: "Noto Serif KR", serif;
	--ko-font-body: "Pretendard", sans-serif;

	--ko-fs-eyebrow: 18px;
	--ko-lh-eyebrow: 28px;
	--ko-ls-eyebrow-line: 2.16px;
	--ko-fs-eyebrow-year: 28px;
	--ko-lh-eyebrow-year: 38px;
	--ko-ls-eyebrow-year: 1.12px;

	--ko-fs-hero-display: 74px;
	--ko-lh-hero-display: 94px;
	--ko-ls-hero-display: -1.48px;
	--ko-fs-hero-sub: 48px;
	--ko-lh-hero-sub: 68px;
	--ko-ls-hero-sub: -0.96px;

	--ko-fs-section-title: 48px;
	--ko-lh-section-title: 68px;
	--ko-ls-section-title: -0.96px;
	--ko-fw-section-light: 300;
	--ko-fw-section-bold: 600;

	/* KO horizontal tabs — main treatment + inside slide (same responsive scale) */
	--v6-ko-tab-fs: 28px;
	--v6-ko-tab-lh: 48px;
	--v6-ko-tab-py: 20px;
	--v6-ko-tab-px: 20px;
	--v6-ko-tab-gap: 32px;
	--v6-ko-tab-arrow-size: 20px;
	--v6-ko-tab-arrow-gap: 20px;
	--v6-ko-tab-arrow-ratio: 0.4;

	/* Sub-page hero h1 — Figma KO sub top (108:5), editorial scale below inside intro */
	--ko-fs-sub-hero: 50px;
	--ko-lh-sub-hero: 67px;
	--ko-ls-sub-hero: -1px;
	--ko-fw-sub-hero: 300;

	/* Inside page — intro h1 (slightly above sub-hero); slide area headline (below section-title) */
	--ko-fs-inside-intro-title: 56px;
	--ko-lh-inside-intro-title: 76px;
	--ko-ls-inside-intro-title: -1.12px;
	--ko-fs-inside-slide-title: 44px;
	--ko-lh-inside-slide-title: 62px;
	--ko-ls-inside-slide-title: -0.88px;

	--ko-fs-body-m: 18px;
	--ko-lh-body-m: 32px;
	--ko-ls-body-m: -0.36px;

	--ko-fs-body-l: 20px;
	--ko-lh-body-l: 34px;
	--ko-ls-body-l: -0.4px;

	--ko-fs-body-l-accent: 24px;
	--ko-lh-body-l-accent: 36px;
	--ko-ls-body-l-accent: -0.48px;

	--ko-fs-cate-index: 56px;
	--ko-lh-cate-index: 64px;
	--ko-ls-cate-index: 1.12px;
	--ko-fs-cate-slash: 28px;
	--ko-lh-cate-slash: 38px;
	--ko-fs-cate-name: 42px;
	--ko-lh-cate-name: 62px;
	--ko-ls-cate-name: -0.84px;
	--ko-fw-cate-name: 300;
	--ko-cate-external-icon: 15px;
	--ko-cate-external-gap: 7px;

	--ko-fs-btn-glass: 20px;
	--ko-lh-btn-glass: 30px;
	--ko-ls-btn-glass: -0.4px;
	--ko-btn-glass-min-h: 60px;
	--ko-btn-glass-px: 64px;
	--ko-btn-glass-py: 18px;

	--ko-fs-btn-ghost: 18px;
	--ko-lh-btn-ghost: 32px;
	--ko-ls-btn-ghost: -0.36px;
	--ko-btn-ghost-px: 40px;
	--ko-btn-ghost-py: 14px;
	--ko-btn-ghost-gap: 10px;
	--ko-btn-ghost-icon-w: 20px;
	--ko-btn-ghost-icon-h: 8px;
}

body.lydian-v6-page .type-ko-section-title {
	font-family: var(--ko-font-display);
	font-size: var(--ko-fs-section-title);
	font-weight: var(--ko-fw-section-bold);
	line-height: var(--ko-lh-section-title);
	letter-spacing: var(--ko-ls-section-title);
}

body.lydian-v6-page .type-ko-sub-hero {
	font-family: var(--ko-font-display);
	font-size: var(--ko-fs-sub-hero);
	font-weight: var(--ko-fw-sub-hero);
	line-height: var(--ko-lh-sub-hero);
	letter-spacing: var(--ko-ls-sub-hero);
}

body.lydian-v6-page .type-ko-body-m {
	font-family: var(--ko-font-body);
	font-size: var(--ko-fs-body-m);
	font-weight: 400;
	line-height: var(--ko-lh-body-m);
	letter-spacing: var(--ko-ls-body-m);
}

body.lydian-v6-page .type-ko-body-l {
	font-family: var(--ko-font-body);
	font-size: var(--ko-fs-body-l);
	font-weight: 400;
	line-height: var(--ko-lh-body-l);
	letter-spacing: var(--ko-ls-body-l);
}

body.lydian-v6-page .type-ko-body-l-accent {
	font-family: var(--ko-font-body);
	font-size: var(--ko-fs-body-l-accent);
	font-weight: 600;
	line-height: var(--ko-lh-body-l-accent);
	letter-spacing: var(--ko-ls-body-l-accent);
	color: var(--color-brand);
}

@media (max-width: 1439px) {
	body.lydian-v6-page {
		--v6-ko-tab-fs: clamp(18px, 2.2vw, 28px);
		--v6-ko-tab-lh: clamp(32px, 3.75vw, 48px);
		--v6-ko-tab-py: clamp(12px, 1.05vw, 20px);
		--v6-ko-tab-px: clamp(14px, 1.8vw, 20px);
		--v6-ko-tab-gap: clamp(20px, 2.5vw, 32px);
		--v6-ko-tab-arrow-size: clamp(16px, 1.56vw, 20px);
		--v6-ko-tab-arrow-gap: clamp(12px, 1.56vw, 20px);
	}
}

@media (min-width: 1024px) and (max-width: 1439px) {
	body.lydian-v6-page {
		--ko-fs-hero-display: clamp(56px, 5.14vw, 74px);
		--ko-lh-hero-display: clamp(72px, 6.53vw, 94px);
		--ko-ls-hero-display: clamp(-1.12px, -0.02em, -1.48px);
		--ko-fs-hero-sub: clamp(36px, 3.33vw, 48px);
		--ko-lh-hero-sub: clamp(52px, 4.72vw, 68px);
		--ko-ls-hero-sub: clamp(-0.72px, -0.02em, -0.96px);
		--ko-fs-section-title: clamp(36px, 3.33vw, 48px);
		--ko-lh-section-title: clamp(52px, 4.72vw, 68px);
		--ko-ls-section-title: clamp(-0.72px, -0.02em, -0.96px);
		--ko-fs-sub-hero: clamp(37px, 3.65vw, 52px);
		--ko-lh-sub-hero: clamp(49px, 4.72vw, 70px);
		--ko-fs-inside-intro-title: clamp(42px, 3.92vw, 58px);
		--ko-lh-inside-intro-title: clamp(55px, 5.25vw, 78px);
		--ko-fs-inside-slide-title: clamp(33px, 3.06vw, 44px);
		--ko-lh-inside-slide-title: clamp(48px, 4.44vw, 62px);
		--ko-btn-glass-min-h: clamp(56px, 5.14vw, 68px);
		--ko-btn-glass-px: clamp(32px, 4.44vw, 56px);
		--ko-btn-glass-py: clamp(16px, 1.53vw, 20px);
		--ko-fs-btn-glass: clamp(18px, 1.39vw, 20px);
		--ko-lh-btn-glass: clamp(30px, 2.36vw, 34px);
		--ko-ls-btn-glass: clamp(-0.36px, -0.02em, -0.4px);
		--ko-fs-eyebrow: clamp(16px, 1.25vw, 18px);
		--ko-lh-eyebrow: clamp(24px, 1.94vw, 28px);
		--ko-ls-eyebrow-line: clamp(1.92px, 0.12em, 2.16px);
		--ko-fs-eyebrow-year: clamp(24px, 1.94vw, 28px);
		--ko-lh-eyebrow-year: clamp(32px, 2.64vw, 38px);
		--ko-ls-eyebrow-year: clamp(0.96px, 0.04em, 1.12px);
		--ko-fs-btn-ghost: clamp(16px, 1.25vw, 18px);
		--ko-lh-btn-ghost: clamp(26px, 2.08vw, 32px);
		--ko-ls-btn-ghost: clamp(-0.32px, -0.02em, -0.36px);
		--ko-btn-ghost-px: clamp(28px, 2.78vw, 40px);
		--ko-btn-ghost-py: clamp(12px, 1.11vw, 14px);
		--ko-btn-ghost-gap: clamp(8px, 0.69vw, 10px);
		--ko-btn-ghost-icon-w: clamp(18px, 1.39vw, 20px);
		--ko-btn-ghost-icon-h: clamp(7px, 0.56vw, 8px);
		--ko-fs-cate-index: clamp(44px, 4.07vw, 56px);
		--ko-lh-cate-index: clamp(52px, 4.72vw, 64px);
		--ko-ls-cate-index: clamp(0.88px, 0.04em, 1.12px);
		--ko-fs-cate-slash: clamp(22px, 1.94vw, 28px);
		--ko-lh-cate-slash: clamp(30px, 2.64vw, 38px);
		--ko-fs-cate-name: clamp(32px, 2.92vw, 42px);
		--ko-lh-cate-name: clamp(48px, 4.31vw, 62px);
		--ko-ls-cate-name: clamp(-0.64px, -0.02em, -0.84px);
		--ko-cate-external-icon: clamp(12px, 1.01vw, 15px);
		--ko-cate-external-gap: clamp(5px, 0.46vw, 7px);
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	body.lydian-v6-page {
		--ko-fs-hero-display: clamp(48px, 6.25vw, 64px);
		--ko-lh-hero-display: clamp(58px, 7.55vw, 80px);
		--ko-ls-hero-display: clamp(-1.28px, -0.02em, -1.48px);
		--ko-fs-hero-sub: clamp(32px, 4.17vw, 42px);
		--ko-lh-hero-sub: clamp(44px, 5.73vw, 58px);
		--ko-ls-hero-sub: clamp(-0.84px, -0.02em, -0.96px);
		--ko-fs-section-title: clamp(32px, 4.17vw, 42px);
		--ko-lh-section-title: clamp(44px, 5.73vw, 58px);
		--ko-fs-sub-hero: clamp(33px, 4.5vw, 51px);
		--ko-lh-sub-hero: clamp(43px, 5.7vw, 65px);
		--ko-fs-inside-intro-title: clamp(38px, 4.85vw, 56px);
		--ko-lh-inside-intro-title: clamp(48px, 6.1vw, 72px);
		--ko-fs-inside-slide-title: clamp(30px, 3.9vw, 40px);
		--ko-lh-inside-slide-title: clamp(42px, 5.4vw, 56px);
		--ko-fs-body-l: clamp(18px, 2.34vw, 20px);
		--ko-lh-body-l: clamp(30px, 3.91vw, 34px);
		--ko-fs-body-l-accent: clamp(20px, 2.6vw, 24px);
		--ko-lh-body-l-accent: clamp(30px, 3.91vw, 36px);
		--ko-btn-glass-min-h: 56px;
		--ko-btn-glass-px: clamp(32px, 4.17vw, 48px);
		--ko-btn-glass-py: 16px;
		--ko-fs-btn-glass: 18px;
		--ko-lh-btn-glass: 30px;
		--ko-ls-btn-glass: -0.36px;
		--ko-fs-eyebrow: clamp(16px, 2.08vw, 18px);
		--ko-lh-eyebrow: clamp(24px, 3.13vw, 28px);
		--ko-ls-eyebrow-line: clamp(1.92px, 0.12em, 2.16px);
		--ko-fs-eyebrow-year: clamp(22px, 2.86vw, 28px);
		--ko-lh-eyebrow-year: clamp(30px, 3.91vw, 38px);
		--ko-ls-eyebrow-year: clamp(0.88px, 0.04em, 1.12px);
		--ko-fs-btn-ghost: 16px;
		--ko-lh-btn-ghost: 26px;
		--ko-ls-btn-ghost: -0.32px;
		--ko-btn-ghost-px: clamp(24px, 3.13vw, 32px);
		--ko-btn-ghost-py: 12px;
		--ko-btn-ghost-gap: 8px;
		--ko-btn-ghost-icon-w: 18px;
		--ko-btn-ghost-icon-h: 7px;
		--ko-fs-cate-index: clamp(40px, 5.21vw, 48px);
		--ko-lh-cate-index: clamp(48px, 6.25vw, 56px);
		--ko-ls-cate-index: clamp(0.8px, 0.04em, 1.12px);
		--ko-fs-cate-slash: clamp(20px, 2.6vw, 24px);
		--ko-lh-cate-slash: clamp(28px, 3.65vw, 32px);
		--ko-fs-cate-name: clamp(28px, 3.65vw, 36px);
		--ko-lh-cate-name: clamp(40px, 5.21vw, 52px);
		--ko-ls-cate-name: clamp(-0.56px, -0.02em, -0.84px);
		--ko-cate-external-icon: clamp(11px, 1.39vw, 13px);
		--ko-cate-external-gap: clamp(4px, 0.52vw, 5px);
	}
}

@media (max-width: 767px) {
	body.lydian-v6-page {
		--ko-fs-hero-display: 44px;
		--ko-lh-hero-display: 54px;
		--ko-ls-hero-display: -0.88px;
		--ko-fs-hero-sub: 28px;
		--ko-lh-hero-sub: 38px;
		--ko-ls-hero-sub: -0.56px;
		--ko-fs-section-title: 28px;
		--ko-lh-section-title: 36px;
		--ko-ls-section-title: -0.56px;
		--ko-fs-sub-hero: 29px;
		--ko-lh-sub-hero: 36px;
		--ko-ls-sub-hero: -0.58px;
		--ko-fs-inside-intro-title: 34px;
		--ko-lh-inside-intro-title: 41px;
		--ko-ls-inside-intro-title: -0.68px;
		--ko-fs-inside-slide-title: 26px;
		--ko-lh-inside-slide-title: 33px;
		--ko-ls-inside-slide-title: -0.52px;
		--ko-fs-body-m: 16px;
		--ko-lh-body-m: 26px;
		--ko-ls-body-m: -0.32px;
		--ko-fs-body-l: 16px;
		--ko-lh-body-l: 26px;
		--ko-ls-body-l: -0.32px;
		--ko-fs-body-l-accent: 18px;
		--ko-lh-body-l-accent: 28px;
		--ko-ls-body-l-accent: -0.36px;
		--ko-btn-glass-min-h: 36px;
		--ko-btn-glass-px: 18px;
		--ko-btn-glass-py: 10px;
		--ko-fs-btn-glass: 13px;
		--ko-lh-btn-glass: 20px;
		--ko-ls-btn-glass: -0.26px;
		--ko-hero-mobile-btn-w: min(180px, 100%);
		--ko-fs-btn-ghost: 14px;
		--ko-lh-btn-ghost: 22px;
		--ko-ls-btn-ghost: -0.28px;
		--ko-btn-ghost-px: 20px;
		--ko-btn-ghost-py: 10px;
		--ko-btn-ghost-gap: 8px;
		--ko-btn-ghost-icon-w: 16px;
		--ko-btn-ghost-icon-h: 6px;
		--ko-fs-eyebrow: 14px;
		--ko-lh-eyebrow: 22px;
		--ko-ls-eyebrow-line: 1.68px;
		--ko-fs-eyebrow-year: 22px;
		--ko-lh-eyebrow-year: 30px;
		--ko-ls-eyebrow-year: 0.88px;
		--ko-fs-cate-index: 22px;
		--ko-lh-cate-index: 28px;
		--ko-ls-cate-index: 0.44px;
		--ko-fs-cate-slash: 16px;
		--ko-lh-cate-slash: 22px;
		--ko-fs-cate-name: 22px;
		--ko-lh-cate-name: 30px;
		--ko-ls-cate-name: -0.44px;
		--ko-cate-external-icon: 11px;
		--ko-cate-external-gap: 4px;
		--v6-ko-tab-fs: clamp(13px, 3.6vw, 18px);
		--v6-ko-tab-lh: clamp(22px, 6.1vw, 32px);
		--v6-ko-tab-py: clamp(10px, 2.8vw, 14px);
		--v6-ko-tab-px: clamp(10px, 2.8vw, 16px);
		--v6-ko-tab-gap: clamp(12px, 3.2vw, 20px);
		--v6-ko-tab-arrow-size: clamp(14px, 3.6vw, 18px);
		--v6-ko-tab-arrow-gap: clamp(8px, 2.2vw, 14px);
	}
}