@charset "utf-8";

:root {
	/* ==================================================================
     * 2. COLOR SYSTEM (OKLCH)
     * ================================================================== */
	--primary: #00be8b;
	--white: #ffffff;
	--black: #000000;

	/* 밝기(Lightness) 기준 값 정의 */
	/* https://blog.logrocket.com/oklch-css-consistent-accessible-color-palettes/ */
	/* 균일한 색상을 나타내는 값이지, 웹 개발 시에 기준이 되는 500이 너무 밝아 실사용에 맞지 않음 */
	/* --l-100: 0.97;
	--l-200: 0.89;
	--l-300: 0.8;
	--l-400: 0.71;
	--l-500: 0.6;
	--l-600: 0.49;
	--l-700: 0.38;
	--l-800: 0.25;
	--l-900: 0.12; */

	/* [System Reference Lightness v1.0] */
	--l-100: 0.97;
	--l-200: 0.89;
	--l-300: 0.80;
	--l-400: 0.62;
	--l-500: 0.42;
	--l-600: 0.38;
	--l-700: 0.32;
	--l-800: 0.23;
	--l-900: 0.12;

	/* Primary Palette */
	--primary-100: oklch(from var(--primary) var(--l-100) c h);
	--primary-200: oklch(from var(--primary) var(--l-200) c h);
	--primary-300: oklch(from var(--primary) var(--l-300) c h);
	--primary-400: oklch(from var(--primary) var(--l-400) c h);
	--primary-500: oklch(from var(--primary) var(--l-500) c h);
	--primary-600: oklch(from var(--primary) var(--l-600) c h);
	--primary-700: oklch(from var(--primary) var(--l-700) c h);
	--primary-800: oklch(from var(--primary) var(--l-800) c h);
	--primary-900: oklch(from var(--primary) var(--l-900) c h);

	/* Gray Palette (Neutral) */
	--gray-100: oklch(var(--l-100) 0 0);
	--gray-200: oklch(var(--l-200) 0 0);
	--gray-300: oklch(var(--l-300) 0 0);
	--gray-400: oklch(var(--l-400) 0 0);
	--gray-500: oklch(var(--l-500) 0 0);
	--gray-600: oklch(var(--l-600) 0 0);
	--gray-700: oklch(var(--l-700) 0 0);
	--gray-800: oklch(var(--l-800) 0 0);
	--gray-900: oklch(var(--l-900) 0 0);

	/* ==================================================================
     * 1. ENVIRONMENT & BASE UNITS
     * - html { font-size: 6.25% } 설정 필수 (1px = 1rem)
     * ================================================================== */
	--fluid-breakpoint: 1280;

	/* ==================================================================
     * 4. GRID & LAYOUT
     * ================================================================== */
	--container-base: 1600;
	--container-narrow: 1400;
	--container-wide: 1720;
	--container-scale: 0.92;
	--container-edge-offset: calc((100vw - min(var(--container-scale) * 100vw, var(--container-base) * 1px)) / 2);

	--grid-columns-pc: 12;
	--grid-columns-tab: 12;
	--grid-columns-mob: 4;
	--grid-columns-pc: 12;
	--gutter-pc: 24;
	/* 24 표준 */
	--gutter-pc: 32;
	--gutter-mob: 16;
	--grid-gutter: clamp(calc(var(--gutter-mob) * 1rem), calc(var(--gutter-mob) * 1rem + (var(--gutter-pc) - var(--gutter-mob)) * var(--fluid-formula)), calc(var(--gutter-pc) * 1rem));
	@media (width >= 1280px) {
		--grid-columns: var(--grid-columns-pc);
	}
	@media (768px <= width < 1280px) {
		--grid-columns: var(--grid-columns-tab);
	}
	@media (width < 768px) {
		--grid-columns: var(--grid-columns-mob);
	}

	/* 유동적 수치 계산을 위한 공통 공식 */
	--fluid-formula: (100vw - (var(--fluid-breakpoint) * 1rem)) / (var(--container-base) - var(--fluid-breakpoint));

	/* ==================================================================
     * 3. TYPOGRAPHY
     * - 모든 줄높이는 1.5로 고정 (KRDS 기준)
     * - 자간은 em 단위를 사용하여 유동적 크기에 대응
     * ================================================================== */
	--ff-suit: "SUIT", "Noto Sans KR", sans-serif;
	--ff-play: "Play", "SUIT", "Noto Sans KR", sans-serif;
	--ff-sans: var(--ff-suit);

	/* line-height */
	--lh: 1.5;

	/* Letter Spacing (Adobe Tracking 대응) */
	--ls-n10: -0.01em;
	--ls-n50: -0.05em;

	/* Font Weight - 숫자 위계 시스템 */
	--fw-100: 100;
	--fw-200: 200;
	--fw-300: 300;
	--fw-400: 400;
	--fw-500: 500;
	--fw-600: 600;
	--fw-700: 700;
	--fw-800: 800;
	--fw-900: 900;

	/* --- Raw Numbers --- */
	--fs-d1-max: 60;
	--fs-d1-min: 40;
	--fs-d2-max: 44;
	--fs-d2-min: 32;
	--fs-d3-max: 36;
	--fs-d3-min: 28;

	--fs-h1-max: 60;
	--fs-h1-min: 36;
	--fs-h2-max: 40;
	--fs-h2-min: 28;
	--fs-h3-max: 30;
	--fs-h3-min: 24;
	--fs-h4-max: 24;
	--fs-h4-min: 22;

	--fs-b1-max: 20;
	--fs-b1-min: 18;
	--fs-b2-max: 18;
	--fs-b2-min: 17;
	--fs-b3: 16;
	--fs-b4: 14;
	--fs-b5: 12;

	/* --- Fluid Font Sizes --- */
	/* --fs-display-1: clamp(calc(var(--fs-d1-min) * 1rem), calc(var(--fs-d1-min) * 1rem + (var(--fs-d1-max) - var(--fs-d1-min)) * var(--fluid-formula)), calc(var(--fs-d1-max) * 1rem));
	--fs-display-2: clamp(calc(var(--fs-d2-min) * 1rem), calc(var(--fs-d2-min) * 1rem + (var(--fs-d2-max) - var(--fs-d2-min)) * var(--fluid-formula)), calc(var(--fs-d2-max) * 1rem));
	--fs-display-3: clamp(calc(var(--fs-d3-min) * 1rem), calc(var(--fs-d3-min) * 1rem + (var(--fs-d3-max) - var(--fs-d3-min)) * var(--fluid-formula)), calc(var(--fs-d3-max) * 1rem));
	--fs-heading-1: clamp(calc(var(--fs-h1-min) * 1rem), calc(var(--fs-h1-min) * 1rem + (var(--fs-h1-max) - var(--fs-h1-min)) * var(--fluid-formula)), calc(var(--fs-h1-max) * 1rem));
	--fs-heading-2: clamp(calc(var(--fs-h2-min) * 1rem), calc(var(--fs-h2-min) * 1rem + (var(--fs-h2-max) - var(--fs-h2-min)) * var(--fluid-formula)), calc(var(--fs-h2-max) * 1rem));
	--fs-heading-3: clamp(calc(var(--fs-h3-min) * 1rem), calc(var(--fs-h3-min) * 1rem + (var(--fs-h3-max) - var(--fs-h3-min)) * var(--fluid-formula)), calc(var(--fs-h3-max) * 1rem));
	--fs-heading-4: clamp(calc(var(--fs-h4-min) * 1rem), calc(var(--fs-h4-min) * 1rem + (var(--fs-h4-max) - var(--fs-h4-min)) * var(--fluid-formula)), calc(var(--fs-h4-max) * 1rem)); */
	@media (width >= 1280px) {
		--fs-display-1: calc(var(--fs-d1-max) * 1rem);
		--fs-display-2: calc(var(--fs-d2-max) * 1rem);
		--fs-heading-1: calc(var(--fs-h1-max) * 1rem);
		--fs-heading-2: calc(var(--fs-h2-max) * 1rem);
		--fs-heading-3: calc(var(--fs-h3-max) * 1rem);
		--fs-heading-4: calc(var(--fs-h4-max) * 1rem);
		--fs-body-1: calc(var(--fs-b1-max) * 1rem);
		--fs-body-2: calc(var(--fs-b2-max) * 1rem);
	}
	@media (width < 1280px) {
		--fs-display-1: calc(var(--fs-d1-min) * 1rem);
		--fs-display-2: calc(var(--fs-d2-min) * 1rem);
		--fs-heading-1: calc(var(--fs-h1-min) * 1rem);
		--fs-heading-2: calc(var(--fs-h2-min) * 1rem);
		--fs-heading-3: calc(var(--fs-h3-min) * 1rem);
		--fs-heading-4: calc(var(--fs-h4-min) * 1rem);
		--fs-body-1: calc(var(--fs-b1-min) * 1rem);
		--fs-body-2: calc(var(--fs-b2-min) * 1rem);
	}

	/* --- Fixed Body Sizes --- */
	/* --fs-body-1: calc(var(--fs-b1) * 1rem);
	--fs-body-2: calc(var(--fs-b2) * 1rem); */
	--fs-body-3: calc(var(--fs-b3) * 1rem);
	--fs-body-4: calc(var(--fs-b4) * 1rem);
	--fs-body-5: calc(var(--fs-b5) * 1rem);

	/* 스타일 단축 변수 (Shorthands - 굵기 제외 자유도 부여) */
	--display-1: var(--fs-display-1) / var(--lh) var(--ff-sans);
	--display-2: var(--fs-display-2) / var(--lh) var(--ff-sans);
	--display-3: var(--fs-display-3) / var(--lh) var(--ff-sans);

	--heading-1: var(--fs-heading-1) / var(--lh) var(--ff-sans);
	--heading-2: var(--fs-heading-2) / var(--lh) var(--ff-sans);
	--heading-3: var(--fs-heading-3) / var(--lh) var(--ff-sans);
	--heading-4: var(--fs-heading-4) / var(--lh) var(--ff-sans);

	--body-1: var(--fs-body-1) / var(--lh) var(--ff-sans);
	--body-2: var(--fs-body-2) / var(--lh) var(--ff-sans);
	--body-3: var(--fs-body-3) / var(--lh) var(--ff-sans);
	--body-4: var(--fs-body-4) / var(--lh) var(--ff-sans);
	--body-5: var(--fs-body-5) / var(--lh) var(--ff-sans);

	/* KRDS 기반 기초 수치 */
	/* 모바일에서 카드 내부 패딩은 거터와 비슷하게, 최소 16px. 카드보다 바닥 스타일이 여유가 더 많으니 권장, 여유가 없다면 무리하게 2열하지 말고 1열로 */
	--number-0: 0px;
	--number-01: 2rem;
	--number-02: 4rem;
	--number-03: 8rem;
	--number-04: 12rem;
	--number-05: 16rem;
	--number-06: 18rem;
	--number-07: 20rem;
	--number-08: 24rem;
	--number-09: 28rem;
	--number-10: 32rem;
	--number-11: 36rem;
	--number-12: 40rem;
	--number-13: 48rem;
	--number-14: 56rem;
	--number-15: 64rem;
	--number-16: 72rem;
	--number-17: 80rem;
	--number-18: 96rem;
	--number-19: 112rem;
	--number-20: 128rem;
	--number-21: 160rem;
	--number-max: 1600rem;

	/* radius, krds max 12rem, 3% */
	--rd-0: 0px;
	--rd-1: 2rem;
	--rd-2: 4rem;
	--rd-3: 6rem;
	--rd-4: 8rem;
	--rd-5: 12rem;
	--rd-6: 16rem;
	--rd-7: 20rem;
	--rd-8: 24rem;
	--rd-9: 40rem;

	/* 보더 두께 */
	--bw-1: 1rem;
	--bw-2: 2rem;
	--bw-3: 4rem;
}