/**
 * kiesgf — 리셋 · 타이포 · 컴포넌트
 * 색/간격/폰트는 tokens.css 변수만 사용한다. hex 리터럴 금지.
 */

/* ==========================================================================
   Webfont — Pretendard (jsDelivr, dynamic subset)
   ========================================================================== */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css");

/* ==========================================================================
   Reset
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd,
ul,
ol {
	margin: 0;
}

ul,
ol {
	padding: 0;
	list-style: none;
}

body {
	font-family: var(--k-font-sans);
	font-size: var(--k-font-size-body);
	font-weight: var(--k-font-weight-body);
	line-height: var(--k-line-height-body);
	letter-spacing: var(--k-letter-spacing-body);
	color: var(--k-text-primary);
	background-color: var(--k-bg-page);
	-webkit-font-smoothing: antialiased;
	/* 한국어를 어절 단위로만 끊는다. 없으면 브라우저 기본값이 CJK 를 글자 단위로 잘라
	   "공/급망", "성장/해" 처럼 단어 중간에서 줄이 바뀐다.
	   overflow-wrap 은 짝으로 둔다 — keep-all 만 두면 끊을 곳 없는 긴 URL·영문이
	   컨테이너를 뚫고 나가 가로 스크롤을 만든다. */
	word-break: keep-all;
	overflow-wrap: anywhere;
	/* 안전망일 뿐 보증이 아니다. html 의 overflow 가 visible 이라 이 선언은 뷰포트로 전파되지
	   않는다 — 2026-08-04 실측: 992px 에서 헤더가 넘칠 때 window.scrollX 가 443 까지 실제로
	   움직였다. 가로 스크롤 0 은 각 요소를 뷰포트 안에 맞추거나 .k-scroll-x 로 감싸서 달성한다. */
	overflow-x: hidden;
}

img,
picture,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

button,
input,
select,
textarea {
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
}

button {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

table {
	border-collapse: collapse;
	width: 100%;
}

hr {
	border: 0;
	border-top: 1px solid var(--k-border-default);
	margin: 0;
}

:focus-visible {
	outline: 2px solid var(--k-border-brand);
	outline-offset: 2px;
}

.k-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   Typography
   ========================================================================== */

.k-hero-title {
	font-size: clamp(32px, 4.4vw, var(--k-font-size-hero));
	font-weight: var(--k-font-weight-hero);
	line-height: var(--k-line-height-hero);
	letter-spacing: var(--k-letter-spacing-hero);
}

.k-h1 {
	font-size: var(--k-font-size-h1);
	font-weight: var(--k-font-weight-h1);
	line-height: var(--k-line-height-h1);
	letter-spacing: var(--k-letter-spacing-h1);
}

.k-h2 {
	font-size: var(--k-font-size-h2);
	font-weight: var(--k-font-weight-h2);
	line-height: var(--k-line-height-h2);
	letter-spacing: var(--k-letter-spacing-h2);
}

.k-h3 {
	font-size: var(--k-font-size-h3);
	font-weight: var(--k-font-weight-h3);
	line-height: var(--k-line-height-h3);
	letter-spacing: var(--k-letter-spacing-h3);
}

.k-h4 {
	font-size: var(--k-font-size-h4);
	font-weight: var(--k-font-weight-h4);
	line-height: var(--k-line-height-h4);
	letter-spacing: var(--k-letter-spacing-h4);
}

.k-body-lg {
	font-size: var(--k-font-size-body-lg);
	font-weight: var(--k-font-weight-body-lg);
	line-height: var(--k-line-height-body-lg);
	letter-spacing: var(--k-letter-spacing-body-lg);
}

.k-body {
	font-size: var(--k-font-size-body);
	font-weight: var(--k-font-weight-body);
	line-height: var(--k-line-height-body);
	letter-spacing: var(--k-letter-spacing-body);
}

.k-label {
	font-size: var(--k-font-size-label);
	font-weight: var(--k-font-weight-label);
	line-height: var(--k-line-height-label);
	letter-spacing: var(--k-letter-spacing-label);
}

.k-caption {
	font-size: var(--k-font-size-caption);
	font-weight: var(--k-font-weight-caption);
	line-height: var(--k-line-height-caption);
	letter-spacing: var(--k-letter-spacing-caption);
}

/* 텍스트 색 유틸 */
.k-text-secondary {
	color: var(--k-text-secondary);
}

.k-text-tertiary {
	color: var(--k-text-tertiary);
}

.k-text-inverse {
	color: var(--k-text-inverse);
}

.k-text-brand {
	color: var(--k-text-brand);
}

.k-text-accent {
	color: var(--k-text-accent);
}

@media (max-width: 767px) {
	.k-h1 {
		font-size: var(--k-font-size-h2);
	}

	.k-h2 {
		font-size: var(--k-font-size-h3);
	}

	.k-h3 {
		font-size: var(--k-font-size-h4);
	}
}

/* ==========================================================================
   Button — Figma 7:52 (lg 높이 52 / 좌우 28, radius md)
   ========================================================================== */

.k-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--k-space-xs);
	border: 1px solid transparent;
	border-radius: var(--k-radius-md);
	font-size: var(--k-font-size-label);
	font-weight: var(--k-font-weight-label);
	line-height: var(--k-line-height-label);
	letter-spacing: var(--k-letter-spacing-label);
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* 사이즈 */
.k-btn--lg {
	height: 52px;
	padding: 0 28px;
}

.k-btn--md {
	height: 44px;
	padding: 0 20px;
}

/* Primary */
.k-btn--primary {
	background-color: var(--k-action-primary);
	border-color: var(--k-action-primary);
	color: var(--k-text-inverse);
}

.k-btn--primary:hover,
.k-btn--primary:focus-visible {
	background-color: var(--k-action-primary-hover);
	border-color: var(--k-action-primary-hover);
}

/* Accent */
.k-btn--accent {
	background-color: var(--k-action-accent);
	border-color: var(--k-action-accent);
	color: var(--k-text-inverse);
}

.k-btn--accent:hover,
.k-btn--accent:focus-visible {
	background-color: var(--k-action-accent-hover);
	border-color: var(--k-action-accent-hover);
}

/* Secondary — Figma 7:28 / hover 7:30 (navy 계열) */
.k-btn--secondary {
	background-color: var(--k-bg-brand-subtle);
	border-color: var(--k-bg-brand-subtle);
	color: var(--k-text-brand);
}

.k-btn--secondary:hover,
.k-btn--secondary:focus-visible {
	background-color: var(--k-navy-100);
	border-color: var(--k-navy-100);
}

/* Outline — Figma 7:40 / hover 7:42 */
.k-btn--outline {
	background-color: var(--k-bg-page);
	border-color: var(--k-border-strong);
	color: var(--k-text-primary);
}

.k-btn--outline:hover,
.k-btn--outline:focus-visible {
	background-color: var(--k-bg-subtle);
	border-color: var(--k-border-strong);
}

/* Disabled — Figma 7:14 / 7:20 / 7:32 (bg/disabled + text/disabled) */
.k-btn:disabled,
.k-btn[aria-disabled="true"],
.k-btn--disabled {
	background-color: var(--k-bg-disabled);
	border-color: var(--k-bg-disabled);
	color: var(--k-text-disabled);
	cursor: not-allowed;
	pointer-events: none;
}

/* Outline Disabled 만 흰 배경 + border/default 유지 — Figma 7:44 */
.k-btn--outline:disabled,
.k-btn--outline[aria-disabled="true"],
.k-btn--outline.k-btn--disabled {
	background-color: var(--k-bg-page);
	border-color: var(--k-border-default);
	color: var(--k-text-disabled);
}

.k-btn--block {
	display: flex;
	width: 100%;
}

/* ==========================================================================
   Badge — Figma 8:8 (높이 32 / 좌우 10, radius sm)
   ========================================================================== */

.k-badge {
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding: 0 10px;
	border: 1px solid transparent;
	border-radius: var(--k-radius-sm);
	font-size: var(--k-font-size-label);
	font-weight: var(--k-font-weight-label);
	line-height: var(--k-line-height-label);
	letter-spacing: var(--k-letter-spacing-label);
	white-space: nowrap;
}

.k-badge--neutral {
	background-color: var(--k-bg-muted);
	color: var(--k-text-secondary);
}

.k-badge--brand {
	background-color: var(--k-bg-brand-subtle);
	color: var(--k-text-brand);
}

.k-badge--accent {
	background-color: var(--k-bg-accent-subtle);
	color: var(--k-text-accent);
}

/* ==========================================================================
   GradeBadge — Figma 8:17 (등급색 아웃라인, 배경 없음)
   ========================================================================== */

.k-grade {
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding: 0 10px;
	background-color: transparent;
	border: 1px solid currentColor;
	border-radius: var(--k-radius-sm);
	font-size: var(--k-font-size-label);
	font-weight: var(--k-font-weight-label);
	line-height: var(--k-line-height-label);
	letter-spacing: var(--k-letter-spacing-label);
	white-space: nowrap;
}

.k-grade--bronze {
	color: var(--k-grade-bronze);
}

.k-grade--silver {
	color: var(--k-grade-silver);
}

.k-grade--gold {
	color: var(--k-grade-gold);
}

.k-grade--platinum {
	color: var(--k-grade-platinum);
}

/* ==========================================================================
   Card — Figma 9:8 (padding 32, gap 12, radius lg, 섀도 없음)
   ========================================================================== */

.k-card {
	display: flex;
	flex-direction: column;
	gap: var(--k-space-sm);
	padding: var(--k-space-xl);
	border: 1px solid transparent;
	border-radius: var(--k-radius-lg);
}

.k-card--outline {
	background-color: var(--k-bg-page);
	border-color: var(--k-border-default);
}

.k-card--filled {
	background-color: var(--k-bg-subtle);
	border-color: transparent;
}

.k-card--raised {
	box-shadow: var(--k-shadow-sm);
}

.k-card__title {
	font-size: var(--k-font-size-h4);
	font-weight: var(--k-font-weight-h4);
	line-height: var(--k-line-height-h4);
	letter-spacing: var(--k-letter-spacing-h4);
	color: var(--k-text-primary);
}

.k-card__body {
	font-size: var(--k-font-size-body);
	font-weight: var(--k-font-weight-body);
	line-height: var(--k-line-height-body);
	letter-spacing: var(--k-letter-spacing-body);
	color: var(--k-text-secondary);
}

.k-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--k-space-xs);
}

@media (max-width: 767px) {
	.k-card {
		padding: var(--k-space-lg);
	}
}

/* ==========================================================================
   Step — Figma 9:17 (번호 박스 32×32, gap 12)
   ========================================================================== */

.k-step {
	display: flex;
	align-items: center;
	gap: var(--k-space-sm);
}

.k-step__num {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: var(--k-radius-sm);
	background-color: var(--k-bg-brand-subtle);
	color: var(--k-text-brand);
	font-size: var(--k-font-size-label);
	font-weight: var(--k-font-weight-label);
	line-height: var(--k-line-height-label);
	letter-spacing: var(--k-letter-spacing-label);
}

.k-step__title {
	font-size: var(--k-font-size-label);
	font-weight: var(--k-font-weight-label);
	line-height: var(--k-line-height-label);
	letter-spacing: var(--k-letter-spacing-label);
	color: var(--k-text-secondary);
}

.k-step--active .k-step__num {
	background-color: var(--k-action-primary);
	color: var(--k-text-inverse);
}

.k-step--active .k-step__title {
	color: var(--k-text-primary);
}

/* ==========================================================================
   Form — Field / Input / Select / Checkbox (Figma 10:27, 11:12, 11:20)
   ========================================================================== */

.k-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
}

.k-field__label {
	font-size: var(--k-font-size-label);
	font-weight: var(--k-font-weight-label);
	line-height: var(--k-line-height-label);
	letter-spacing: var(--k-letter-spacing-label);
	color: var(--k-text-primary);
}

.k-field__help {
	font-size: var(--k-font-size-caption);
	font-weight: var(--k-font-weight-caption);
	line-height: var(--k-line-height-caption);
	letter-spacing: var(--k-letter-spacing-caption);
	color: var(--k-text-tertiary);
}

.k-field__error {
	font-size: var(--k-font-size-caption);
	font-weight: var(--k-font-weight-caption);
	line-height: var(--k-line-height-caption);
	letter-spacing: var(--k-letter-spacing-caption);
	color: var(--k-state-error);
}

.k-input,
.k-select {
	display: block;
	width: 100%;
	height: 48px;
	padding: 0 14px;
	background-color: var(--k-bg-page);
	border: 1px solid var(--k-border-default);
	border-radius: var(--k-radius-md);
	font-size: var(--k-font-size-body);
	font-weight: var(--k-font-weight-body);
	line-height: var(--k-line-height-body);
	letter-spacing: var(--k-letter-spacing-body);
	color: var(--k-text-primary);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* textarea 는 높이 자유 */
textarea.k-input {
	height: auto;
	min-height: 160px;
	padding: 12px 14px;
	resize: vertical;
}

/* default(placeholder) 상태 텍스트 */
.k-input::placeholder {
	color: var(--k-text-tertiary);
}

/* filled — 값이 있으면 primary 텍스트(브라우저 기본과 동일), 보더 강조 */
.k-input:not(:placeholder-shown),
.k-select.is-filled {
	border-color: var(--k-border-strong);
	color: var(--k-text-primary);
}

/* focus */
.k-input:focus,
.k-select:focus {
	outline: none;
	border-color: var(--k-border-brand);
	box-shadow: var(--k-focus-ring);
}

/* error */
.k-input--error,
.k-select--error,
.k-input[aria-invalid="true"],
.k-select[aria-invalid="true"] {
	border-color: var(--k-state-error);
	background-color: var(--k-state-error-subtle);
}

.k-input--error:focus,
.k-select--error:focus,
.k-input[aria-invalid="true"]:focus,
.k-select[aria-invalid="true"]:focus {
	border-color: var(--k-state-error);
	box-shadow: none;
}

/* disabled */
.k-input:disabled,
.k-select:disabled {
	background-color: var(--k-bg-muted);
	border-color: var(--k-border-default);
	color: var(--k-text-tertiary);
	cursor: not-allowed;
}

/* Select — 네이티브 화살표 제거 + 토큰 색 chevron */
.k-select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 38px;
}

.k-field--select {
	position: relative;
}

.k-field--select::after {
	content: "";
	position: absolute;
	right: 14px;
	/* 라벨(높이 ~21) + gap 6 + 필드 48 의 중앙 */
	bottom: 20px;
	width: 10px;
	height: 5px;
	background-color: var(--k-text-secondary);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	pointer-events: none;
}

/* Checkbox — 20×20, 1.5px border/strong, radius sm */
.k-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: var(--k-font-size-body);
	font-weight: var(--k-font-weight-body);
	line-height: var(--k-line-height-body);
	letter-spacing: var(--k-letter-spacing-body);
	color: var(--k-text-primary);
	cursor: pointer;
}

.k-checkbox input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	position: relative;
	width: 20px;
	height: 20px;
	margin: 0;
	background-color: var(--k-bg-page);
	border: 1.5px solid var(--k-border-strong);
	border-radius: var(--k-radius-sm);
	cursor: pointer;
}

.k-checkbox input[type="checkbox"]:checked {
	background-color: var(--k-action-primary);
	border-color: var(--k-action-primary);
}

.k-checkbox input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 5px;
	height: 10px;
	border: solid var(--k-text-inverse);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.k-checkbox input[type="checkbox"]:focus-visible {
	outline: none;
	box-shadow: var(--k-focus-ring);
}

.k-checkbox input[type="checkbox"]:disabled {
	background-color: var(--k-bg-muted);
	border-color: var(--k-border-default);
	cursor: not-allowed;
}

.k-checkbox--error input[type="checkbox"] {
	border-color: var(--k-state-error);
}

/* ==========================================================================
   Checklist
   ========================================================================== */

.k-checklist {
	display: flex;
	flex-direction: column;
	gap: var(--k-space-sm);
}

.k-checklist__item {
	position: relative;
	padding-left: 30px;
	font-size: var(--k-font-size-body);
	font-weight: var(--k-font-weight-body);
	line-height: var(--k-line-height-body);
	letter-spacing: var(--k-letter-spacing-body);
	color: var(--k-text-secondary);
}

.k-checklist__item::before {
	content: "";
	position: absolute;
	left: 3px;
	top: 8px;
	width: 6px;
	height: 11px;
	border: solid var(--k-text-accent);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}