@charset "utf-8";
/* ============================================================
	guide.css
	Hyomin Design System v1.0 — Guide 페이지 전체 스타일

	구조 — Foundation:
	  1.   공통 레이아웃    — .guide-page, .guide-nav, .code-block, .state-list, .guide-demo-*
	  2.   Color           — .palette, .swatch, .token-swatch
	  3.   Typography      — .font-family-item, .type-scale
	  4.   Spacing         — .spacing-scale, .spacing-row
	  5.   Shadow          — .token-grid, .radius-box, .shadow-box, .border-item
	  F.   Motion          — .motion-demo (foundation/motion.html)

	구조 — Components:
	  6.   Button          — .button-group, .state-matrix, .spec-table
	  7.   Form            — .form-demo
	  8.   Spinner         — .spinner-demo-group, .spinner-demo-item, .spinner-demo-bg
	  9.   Tag             — .tag-live-wrap, .tag-demo-variants, .tag-demo-row, .tag-demo-states
	  10.  Card            — .card-demo-wrap, .card-demo-item, .card-demo-label
	  11.  SearchBar       — .search-demo-states, .search-demo-row, .search-demo-label
	  12.  Progress Bar    — .progress-demo-controls, .progress-demo-slider, .progress-demo-colors
	  13.  Table           — .table-demo-wrap
	  14.  Breadcrumb      — .breadcrumb-demo-group, .breadcrumb-demo-label
	  15.  Number Input    — .number-input__btn--state-hover
	  16.  Toggle Switch   — .toggle-switch--state-on/disabled-*
	  17.  SearchBar Live  — (search-bar.html 섹션 16)
	  18.  Demo 공통       — .demo-btn
	  19.  Skeleton / Empty State — .skeleton-demo, .es-grid, .es-preview
	  20.  Auth / Login    — .auth-demo, .auth-state-grid
	  21.  Drawer          — .drawer-state-grid, .drawer-state-preview
	============================================================ */

/* ─────────────────────────────────────────
	1. 공통 레이아웃
	───────────────────────────────────────── */

.guide-page {
	max-width: 1400px;
	margin: 0 auto;
	padding: var(--spacing-12) var(--spacing-8);
}

.guide-page--wide {
	max-width: 1600px;
}

.guide-page__title {
	font-family: var(--font-primary);
	font-size: var(--font-size-title03);
	font-weight: var(--font-weight-bold);
	color: var(--gray-900);
	margin-bottom: var(--spacing-8);
}

.guide-page__section {
	margin-bottom: var(--spacing-16);
}

.guide-page__section-title {
	font-family: var(--font-secondary);
	font-size: var(--font-size-body-sm);
	font-weight: var(--font-weight-medium);
	color: var(--gray-500);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: var(--spacing-6);
	padding-bottom: var(--spacing-2);
	border-bottom: var(--border-width) solid var(--border-color);
}

.guide-page__section-subtitle {
	margin: var(--spacing-6) 0 var(--spacing-3);
}

.guide-nav {
	margin-bottom: var(--spacing-6);
}

.guide-nav__back {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-2);
	font-family: var(--font-secondary);
	font-size: var(--font-size-label);
	color: var(--gray-400);
	text-decoration: none;
	transition: color 0.15s;
}

.guide-nav__back::before {
	content: "←";
	font-size: 12px;
}

.guide-nav__back:hover {
	color: var(--color-primary-main);
}

/* ─────────────────────────────────────────
	2. Color
	───────────────────────────────────────── */

/* 팔레트 그리드 */
.palette {
	display: flex;
	gap: var(--spacing-4);
	flex-wrap: wrap;
}

.palette__group {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 140px;
}

.palette__group-name {
	font-family: var(--font-secondary);
	font-size: var(--font-size-label);
	font-weight: var(--font-weight-medium);
	color: var(--gray-500);
	margin-bottom: var(--spacing-1);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* 스와치 카드 */
.swatch {
	width: 140px;
	height: 70px;
	padding: var(--spacing-3);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 2px;
	overflow: hidden;
}

.swatch__name {
	font-family: var(--font-secondary);
	font-size: var(--font-size-caption);
	font-weight: var(--font-weight-medium);
	line-height: 1;
}

.swatch__hex {
	font-family: var(--font-secondary);
	font-size: var(--font-size-label);
	font-weight: var(--font-weight-regular);
	line-height: 1;
}

.swatch--light-text .swatch__name,
.swatch--light-text .swatch__hex {
	color: var(--gray-900);
}

.swatch--dark-text .swatch__name,
.swatch--dark-text .swatch__hex {
	color: #ffffff;
}

/* Green */
.swatch--green-900 {
	background-color: var(--green-900);
}
.swatch--green-800 {
	background-color: var(--green-800);
}
.swatch--green-700 {
	background-color: var(--green-700);
}
.swatch--green-600 {
	background-color: var(--green-600);
}
.swatch--green-500 {
	background-color: var(--green-500);
}
.swatch--green-400 {
	background-color: var(--green-400);
}
.swatch--green-300 {
	background-color: var(--green-300);
}
.swatch--green-200 {
	background-color: var(--green-200);
}
.swatch--green-100 {
	background-color: var(--green-100);
}
.swatch--green-50 {
	background-color: var(--green-50);
}

/* Blue */
.swatch--blue-900 {
	background-color: var(--blue-900);
}
.swatch--blue-800 {
	background-color: var(--blue-800);
}
.swatch--blue-700 {
	background-color: var(--blue-700);
}
.swatch--blue-600 {
	background-color: var(--blue-600);
}
.swatch--blue-500 {
	background-color: var(--blue-500);
}
.swatch--blue-400 {
	background-color: var(--blue-400);
}
.swatch--blue-300 {
	background-color: var(--blue-300);
}
.swatch--blue-200 {
	background-color: var(--blue-200);
}
.swatch--blue-100 {
	background-color: var(--blue-100);
}
.swatch--blue-50 {
	background-color: var(--blue-50);
}

/* Red */
.swatch--red-900 {
	background-color: var(--red-900);
}
.swatch--red-800 {
	background-color: var(--red-800);
}
.swatch--red-700 {
	background-color: var(--red-700);
}
.swatch--red-600 {
	background-color: var(--red-600);
}
.swatch--red-500 {
	background-color: var(--red-500);
}
.swatch--red-400 {
	background-color: var(--red-400);
}
.swatch--red-300 {
	background-color: var(--red-300);
}
.swatch--red-200 {
	background-color: var(--red-200);
}
.swatch--red-100 {
	background-color: var(--red-100);
}
.swatch--red-50 {
	background-color: var(--red-50);
}

/* Yellow */
.swatch--yellow-900 {
	background-color: var(--yellow-900);
}
.swatch--yellow-800 {
	background-color: var(--yellow-800);
}
.swatch--yellow-700 {
	background-color: var(--yellow-700);
}
.swatch--yellow-600 {
	background-color: var(--yellow-600);
}
.swatch--yellow-500 {
	background-color: var(--yellow-500);
}
.swatch--yellow-400 {
	background-color: var(--yellow-400);
}
.swatch--yellow-300 {
	background-color: var(--yellow-300);
}
.swatch--yellow-200 {
	background-color: var(--yellow-200);
}
.swatch--yellow-100 {
	background-color: var(--yellow-100);
}
.swatch--yellow-50 {
	background-color: var(--yellow-50);
}

/* Gray */
.swatch--gray-900 {
	background-color: var(--gray-900);
}
.swatch--gray-800 {
	background-color: var(--gray-800);
}
.swatch--gray-700 {
	background-color: var(--gray-700);
}
.swatch--gray-600 {
	background-color: var(--gray-600);
}
.swatch--gray-500 {
	background-color: var(--gray-500);
}
.swatch--gray-400 {
	background-color: var(--gray-400);
}
.swatch--gray-300 {
	background-color: var(--gray-300);
}
.swatch--gray-200 {
	background-color: var(--gray-200);
}
.swatch--gray-100 {
	background-color: var(--gray-100);
}
.swatch--gray-50 {
	background-color: var(--gray-50);
}

/* Semantic Tokens 테이블 */
.tokens {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
}

.tokens__group {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-2);
}

.tokens__group-title {
	font-family: var(--font-primary);
	font-size: var(--font-size-title03);
	font-weight: var(--font-weight-bold);
	color: var(--gray-900);
	margin-bottom: var(--spacing-2);
}

.tokens__table {
	display: grid;
	grid-template-columns: 50px repeat(7, 140px);
	gap: 2px;
}

.tokens__head {
	display: contents;
}

.tokens__head-cell {
	font-family: var(--font-secondary);
	font-size: var(--font-size-body-sm);
	font-weight: var(--font-weight-regular);
	color: var(--gray-900);
	line-height: 24px;
	padding: 0 var(--spacing-2);
}

.tokens__row {
	display: contents;
}

.tokens__row-label {
	font-family: var(--font-secondary);
	font-size: var(--font-size-body-sm);
	color: var(--gray-900);
	display: flex;
	align-items: center;
	justify-content: center;
}

.token-swatch {
	width: 140px;
	height: 70px;
	padding: var(--spacing-3);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 2px;
}

.token-swatch__name {
	font-family: var(--font-secondary);
	font-size: var(--font-size-caption);
	font-weight: var(--font-weight-medium);
	line-height: 1;
}

.token-swatch__hex {
	font-family: var(--font-secondary);
	font-size: var(--font-size-label);
	font-weight: var(--font-weight-regular);
	line-height: 1;
}

.token-swatch--on-dark .token-swatch__name,
.token-swatch--on-dark .token-swatch__hex {
	color: #ffffff;
}

.token-swatch--on-light .token-swatch__name,
.token-swatch--on-light .token-swatch__hex {
	color: var(--gray-900);
}

/* ─────────────────────────────────────────
	3. Typography
	───────────────────────────────────────── */

.font-family-row {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-6);
}

.font-family-item {
	display: flex;
	align-items: baseline;
	gap: var(--spacing-6);
	padding: var(--spacing-6);
	background-color: var(--gray-50);
	border-radius: var(--radius-md);
}

.font-family-item__meta {
	min-width: 160px;
	flex-shrink: 0;
}

.font-family-item__name {
	font-family: var(--font-secondary);
	font-size: var(--font-size-label);
	font-weight: var(--font-weight-medium);
	color: var(--gray-500);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: var(--spacing-1);
}

.font-family-item__usage {
	font-family: var(--font-secondary);
	font-size: var(--font-size-label);
	color: var(--gray-400);
}

.font-family-item__sample {
	font-size: 32px;
	line-height: 1;
	color: var(--gray-900);
}

.font-family-item__sample--paperlogy {
	font-family: var(--font-primary);
	font-weight: var(--font-weight-bold);
}

.font-family-item__sample--pretendard {
	font-family: var(--font-secondary);
	font-weight: var(--font-weight-regular);
}

.type-scale {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.type-scale__row {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: var(--spacing-6);
	align-items: center;
	padding: var(--spacing-4) var(--spacing-6);
	border-radius: var(--radius-md);
	transition: background-color 0.15s;
}

.type-scale__row:hover {
	background-color: var(--gray-50);
}

.type-scale__meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.type-scale__token {
	font-family: var(--font-secondary);
	font-size: var(--font-size-label);
	font-weight: var(--font-weight-medium);
	color: var(--gray-500);
	font-feature-settings: "tnum";
}

.type-scale__spec {
	font-family: var(--font-secondary);
	font-size: var(--font-size-label);
	color: var(--gray-400);
}

.type-scale__sample {
	color: var(--gray-900);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ─────────────────────────────────────────
	4. Spacing
	───────────────────────────────────────── */

.spacing-scale {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-2);
}

.spacing-row {
	display: grid;
	grid-template-columns: 120px 80px 1fr;
	align-items: center;
	gap: var(--spacing-4);
	padding: var(--spacing-3) 0;
	border-bottom: var(--border-width) solid var(--gray-100);
}

.spacing-row__token {
	font-family: var(--font-secondary);
	font-size: var(--font-size-caption);
	font-weight: var(--font-weight-medium);
	color: var(--gray-500);
	font-feature-settings: "tnum";
}

.spacing-row__value {
	font-family: var(--font-secondary);
	font-size: var(--font-size-caption);
	color: var(--gray-400);
	font-feature-settings: "tnum";
}

.spacing-row__bar-wrap {
	display: flex;
	align-items: center;
	height: 24px;
}

.spacing-row__bar {
	height: 24px;
	background-color: var(--color-primary-main);
	border-radius: var(--radius-sm);
	opacity: 0.8;
}

.spacing-row__bar--1 {
	width: var(--spacing-1);
}
.spacing-row__bar--2 {
	width: var(--spacing-2);
}
.spacing-row__bar--3 {
	width: var(--spacing-3);
}
.spacing-row__bar--4 {
	width: var(--spacing-4);
}
.spacing-row__bar--5 {
	width: var(--spacing-5);
}
.spacing-row__bar--6 {
	width: var(--spacing-6);
}
.spacing-row__bar--8 {
	width: var(--spacing-8);
}
.spacing-row__bar--10 {
	width: var(--spacing-10);
}
.spacing-row__bar--12 {
	width: var(--spacing-12);
}
.spacing-row__bar--16 {
	width: var(--spacing-16);
}

.spacing-example {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-4);
	align-items: flex-end;
}

.spacing-example__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-2);
}

.spacing-example__box {
	background-color: var(--color-primary-light);
	border-radius: var(--radius-sm);
	opacity: 0.6;
}

.spacing-example__label {
	font-family: var(--font-secondary);
	font-size: var(--font-size-label);
	color: var(--gray-500);
	text-align: center;
}

/* ─────────────────────────────────────────
	5. Shadow
	───────────────────────────────────────── */

.token-grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-6);
}

.token-card {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-4);
	align-items: flex-start;
}

.token-card__label {
	font-family: var(--font-secondary);
	font-size: var(--font-size-label);
	font-weight: var(--font-weight-medium);
	color: var(--gray-500);
	font-feature-settings: "tnum";
}

.token-card__value {
	font-family: var(--font-secondary);
	font-size: var(--font-size-label);
	color: var(--gray-400);
	margin-top: -2px;
}

.radius-box {
	width: 120px;
	height: 80px;
	background-color: var(--color-secondary-light);
	opacity: 0.7;
}

.radius-box--sm {
	border-radius: var(--radius-sm);
}
.radius-box--md {
	border-radius: var(--radius-md);
}
.radius-box--lg {
	border-radius: var(--radius-lg);
}
.radius-box--xl {
	border-radius: var(--radius-xl);
}
.radius-box--full {
	border-radius: var(--radius-full);
	width: 80px;
}

/* ─── Breakpoints ─── */

.breakpoint-scale {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-2);
}

.breakpoint-row {
	display: grid;
	grid-template-columns: 120px 1fr 240px;
	align-items: center;
	gap: var(--spacing-4);
	padding: var(--spacing-3) 0;
	border-bottom: var(--border-width) solid var(--gray-100);
}

.breakpoint-row__meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.breakpoint-row__label {
	font-family: var(--font-secondary);
	font-size: var(--font-size-label);
	font-weight: var(--font-weight-medium);
	color: var(--gray-500);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.breakpoint-row__value {
	font-family: "Courier New", Courier, monospace;
	font-size: 13px;
	color: var(--green-700);
}

.breakpoint-row__bar-wrap {
	height: 24px;
	display: flex;
	align-items: center;
}

.breakpoint-row__bar {
	height: 16px;
	background-color: var(--color-primary-main);
	border-radius: var(--radius-sm);
	opacity: 0.7;
}

.breakpoint-row__bar--499 {
	width: calc(499px / 1600px * 100%);
}
.breakpoint-row__bar--768 {
	width: calc(768px / 1600px * 100%);
}
.breakpoint-row__bar--999 {
	width: calc(999px / 1600px * 100%);
}
.breakpoint-row__bar--1199 {
	width: calc(1199px / 1600px * 100%);
}
.breakpoint-row__bar--1600 {
	width: 100%;
}

.breakpoint-row__desc {
	font-family: var(--font-secondary);
	font-size: var(--font-size-label);
	color: var(--gray-400);
}

[data-theme="dark"] .breakpoint-row {
	border-color: var(--gray-700);
}

[data-theme="dark"] .breakpoint-row__desc {
	color: var(--gray-500);
}

/* ─── Motion ─── */

.motion-box {
	width: 120px;
	height: 80px;
	border-radius: var(--radius-md);
	background-color: var(--color-primary-light);
	opacity: 0.7;
	transition:
		opacity var(--duration-fast) var(--easing-default),
		transform var(--duration-fast) var(--easing-default);
}

.motion-box:hover {
	opacity: 1;
	transform: scale(1.06);
}

.motion-box--fast {
	transition-duration: var(--duration-fast);
}
.motion-box--base {
	transition-duration: var(--duration-base);
}
.motion-box--slow {
	transition-duration: var(--duration-slow);
}
.motion-box--easing {
	transition-timing-function: var(--easing-default);
}

.shadow-box {
	width: 160px;
	height: 100px;
	background-color: #ffffff;
	border-radius: var(--radius-md);
	border: var(--border-width) solid var(--border-color);
}

.shadow-box--sm {
	box-shadow: var(--shadow-sm);
}
.shadow-box--md {
	box-shadow: var(--shadow-md);
}
.shadow-box--lg {
	box-shadow: var(--shadow-lg);
}

.border-row {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-4);
}

.border-item {
	display: flex;
	align-items: center;
	gap: var(--spacing-6);
}

.border-item__line {
	width: 200px;
	border-top: var(--border-width) solid var(--gray-400);
}

.border-item__meta {
	font-family: var(--font-secondary);
	font-size: var(--font-size-caption);
	color: var(--gray-500);
}

/* ─────────────────────────────────────────
	6. Button (Guide)
	───────────────────────────────────────── */

/* Live 섹션 */
.button-group {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-6);
}

.button-row {
	display: flex;
	align-items: center;
	gap: var(--spacing-4);
	flex-wrap: wrap;
}

.button-row__label {
	font-family: var(--font-secondary);
	font-size: var(--font-size-label);
	font-weight: var(--font-weight-medium);
	color: var(--gray-400);
	min-width: 80px;
	flex-shrink: 0;
}

/* States 매트릭스 */
.state-matrix {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
}

.state-matrix__group {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-3);
}

.state-matrix__title {
	font-family: var(--font-primary);
	font-size: var(--font-size-title03);
	font-weight: var(--font-weight-bold);
	color: var(--gray-900);
}

.state-matrix__table {
	display: grid;
	grid-template-columns: repeat(5, 120px);
	gap: var(--spacing-2);
}

.state-matrix__head {
	display: contents;
}

.state-matrix__head-cell {
	font-family: var(--font-secondary);
	font-size: var(--font-size-label);
	color: var(--gray-400);
	padding-bottom: var(--spacing-2);
	text-align: center;
}

.state-matrix__row {
	display: contents;
}

/* 상태별 강제 색상 — 가이드 표시용 */
.button--primary.button--state-hover {
	background-color: var(--color-primary-hover);
}
.button--primary.button--state-active {
	background-color: var(--color-primary-active);
}
.button--primary.button--state-focus {
	background-color: var(--color-primary-main);
	outline: 3px solid var(--red-600);
	outline-offset: -3px;
}
.button--primary.button--state-disabled {
	background-color: var(--color-primary-disabled);
	cursor: default;
	pointer-events: none;
}

.button--secondary.button--state-hover {
	background-color: var(--color-secondary-hover);
}
.button--secondary.button--state-active {
	background-color: var(--color-secondary-active);
}
.button--secondary.button--state-focus {
	background-color: var(--color-secondary-main);
	outline: 3px solid var(--red-600);
	outline-offset: -3px;
}
.button--secondary.button--state-disabled {
	background-color: var(--color-secondary-disabled);
	cursor: default;
	pointer-events: none;
}

.button--accent.button--state-hover {
	background-color: var(--color-accent-hover);
}
.button--accent.button--state-active {
	background-color: var(--color-accent-active);
}
.button--accent.button--state-focus {
	background-color: var(--color-accent-main);
	outline: 3px solid var(--blue-600);
	outline-offset: -3px;
}
.button--accent.button--state-disabled {
	background-color: var(--color-accent-disabled);
	cursor: default;
	pointer-events: none;
}

/* Specs 테이블 */
.spec-table {
	width: 100%;
	border-collapse: collapse;
}

.spec-table th,
.spec-table td {
	padding: var(--spacing-3) var(--spacing-4);
	text-align: left;
	border-bottom: var(--border-width) solid var(--border-color);
	font-family: var(--font-secondary);
	font-size: var(--font-size-body-sm);
}

.spec-table th {
	font-weight: var(--font-weight-medium);
	color: var(--gray-500);
	background-color: var(--gray-50);
}

.spec-table td {
	color: var(--gray-900);
}

.spec-table td:first-child {
	font-weight: var(--font-weight-medium);
}

/* ─────────────────────────────────────────
	7. Form (Guide)
	───────────────────────────────────────── */

.form-demo {
	display: grid;
	grid-template-columns: repeat(3, 280px);
	gap: var(--spacing-10) var(--spacing-8);
}

.form-demo__item {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-3);
}

.form-demo__state-label {
	font-family: var(--font-secondary);
	font-size: var(--font-size-label);
	font-weight: var(--font-weight-medium);
	color: var(--gray-400);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* 가이드 표시용 강제 상태 */
.form-demo__item--hover .input {
	background-color: var(--gray-50);
	border-color: var(--gray-300);
}

.form-demo__item--focus .input {
	background-color: #ffffff;
	border-color: var(--green-500);
	box-shadow: 0 0 0 2px var(--green-50);
}

.form-demo__item--disabled .input {
	background-color: var(--gray-100);
	border-color: var(--gray-300);
	pointer-events: none;
}

.form-demo__item--disabled .input::placeholder {
	opacity: 0.6;
}

/* Textarea 강제 상태 */
.form-demo__item--hover .textarea {
	background-color: var(--gray-50);
}

.form-demo__item--focus .textarea {
	border-color: var(--green-500);
	box-shadow: 0 0 0 2px var(--green-50);
}

.form-demo__item--disabled .textarea {
	background-color: var(--gray-100);
	border-color: var(--gray-200);
	pointer-events: none;
}

.form-demo__item--disabled .textarea::placeholder {
	color: var(--gray-300);
}

/* ─────────────────────────────────────────
	8. 공통 유틸리티
	───────────────────────────────────────── */

/* 섹션 내 소제목 h3 */
.guide-subtitle {
	font-family: var(--font-primary);
	font-size: var(--font-size-title03);
	font-weight: var(--font-weight-bold);
	color: var(--gray-900);
	margin-bottom: var(--spacing-4);
}

/* 섹션 내 그룹 간격 */
.guide-section-group {
	margin-bottom: var(--spacing-10);
}

/* 컴포넌트 가로 나열 데모 */
.guide-demo-row {
	display: flex;
	align-items: center;
	gap: var(--spacing-6);
	flex-wrap: wrap;
}

/* 상단 정렬 변형 — 라벨 + 컴포넌트 세트를 가로 나열할 때 */
.guide-demo-row--start {
	align-items: flex-start;
}

/* 세로 나열 데모 */
.guide-demo-col {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-6);
}

/* 상태 목록 */
.guide-demo-list,
.state-list {
	display: flex;
	gap: var(--spacing-8);
	flex-wrap: wrap;
}

/* column 방향 변형 — accordion, alert, file-upload 등 */
.state-list--column {
	flex-direction: column;
	align-items: flex-start;
}

/* column + stretch + gap-sm — stepper, progress-bar sizes 등 */
.state-list--column-stretch {
	flex-direction: column;
	align-items: stretch;
	gap: var(--spacing-6);
}

.state-list.modal-state-list {
	flex-direction: column;
}

.guide-demo__item,
.state-list__item {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-3);
}

.state-full__item {
	width: 100%;
}

.guide-demo__label,
.state-list__label {
	font-family: var(--font-secondary);
	font-size: var(--font-size-label);
	font-weight: var(--font-weight-medium);
	color: var(--gray-400);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.state-list__item .badge {
	align-self: center;
}

/* Checkbox/Radio 강제 상태 — 가이드 표시용 */
.state-list__item--focus .checkbox {
	outline: 3px solid var(--color-accent-main);
	outline-offset: -3px;
}

.state-list__item--focus .radio {
	outline: 3px solid var(--color-accent-main);
	outline-offset: -3px;
}

/* Select 상태 */
.state-list__item .select-wrap {
	width: 200px;
}

.state-list__item--hover .select {
	background-color: var(--gray-100);
}

/* ─────────────────────────────────────────
	9. Code Block
	───────────────────────────────────────── */

.code-block {
	position: relative;
	background-color: var(--gray-900);
	border-radius: var(--radius-md);
	overflow: hidden;
}

/* spec-table / 일반 요소 뒤에 오는 code-block 상단 여백 */
.spec-table + .code-block,
.guide-page__section > .code-block + .code-block {
	margin-top: var(--spacing-6);
}

.code-block__pre {
	display: block;
	padding: var(--spacing-6);
	padding-right: 80px;
	overflow-x: auto;
	font-family: "Courier New", Courier, monospace;
	font-size: 13px;
	line-height: 1.65;
	color: var(--gray-100);
	white-space: pre;
	tab-size: 2;
	-moz-tab-size: 2;
}

.code-block__copy {
	position: absolute;
	top: var(--spacing-3);
	right: var(--spacing-3);
	padding: var(--spacing-1) var(--spacing-3);
	background-color: var(--gray-700);
	border-radius: var(--radius-sm);
	color: var(--gray-300);
	font-family: var(--font-secondary);
	font-size: var(--font-size-label);
	font-weight: var(--font-weight-medium);
	transition:
		background-color 0.15s,
		color 0.15s;
	white-space: nowrap;
}

.code-block__copy:hover {
	background-color: var(--gray-600);
	color: var(--gray-100);
}

.code-block__copy--copied {
	background-color: var(--green-800);
	color: var(--green-50);
}

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

.classes-table th,
.classes-table td {
	padding: var(--spacing-2) var(--spacing-4);
	text-align: left;
	border-bottom: var(--border-width) solid var(--border-color);
	font-family: var(--font-secondary);
	font-size: var(--font-size-body-sm);
}

.classes-table th {
	font-weight: var(--font-weight-medium);
	color: var(--gray-500);
	background-color: var(--gray-50);
}

.classes-table td:first-child {
	font-family: "Courier New", Courier, monospace;
	font-size: 13px;
	color: var(--green-700);
	white-space: nowrap;
}

.classes-table td:nth-child(2) {
	width: 80px;
}

.classes-tag {
	display: inline-block;
	padding: 1px 6px;
	border-radius: var(--radius-sm);
	font-size: 11px;
	font-weight: var(--font-weight-medium);
	white-space: nowrap;
}

.classes-tag--root {
	background-color: var(--blue-100);
	color: var(--blue-800);
}
.classes-tag--element {
	background-color: var(--gray-100);
	color: var(--gray-600);
}
.classes-tag--modifier {
	background-color: var(--green-100);
	color: var(--green-800);
}

/* ─────────────────────────────────────────
	14. Patterns
	───────────────────────────────────────── */

.pattern-page-desc {
	font-family: var(--font-secondary);
	font-size: var(--font-size-body-sm);
	color: var(--gray-500);
	line-height: 24px;
	margin-bottom: var(--spacing-12);
}

.pattern-desc {
	font-family: var(--font-secondary);
	font-size: var(--font-size-body-sm);
	color: var(--gray-500);
	line-height: 24px;
	margin-bottom: var(--spacing-6);
}

.pattern-desc code {
	font-family: "Courier New", Courier, monospace;
	font-size: 13px;
	color: var(--green-700);
	background-color: var(--gray-100);
	padding: 1px 5px;
	border-radius: var(--radius-sm);
}

/* 데모 캔버스 */
.pattern-canvas {
	background-color: var(--gray-50);
	border: var(--border-width) solid var(--border-color);
	border-radius: var(--radius-md);
	padding: var(--spacing-8);
	margin-bottom: var(--spacing-8);
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: var(--spacing-6);
}

.pattern-canvas--center {
	justify-content: center;
	align-items: center;
}

/* Pattern 1 레이아웃 */
.pattern-form-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-6);
	width: 100%;
	max-width: 400px;
}

.pattern-form {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-4);
}

.pattern-alert-area {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-3);
}

/* Pattern 3 — Tab 너비 재정의 */
.pattern-tab {
	width: 100%;
	max-width: 600px;
}

/* Pattern 3 — 목록 아이템 */
.pattern-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-2);
	margin-bottom: var(--spacing-4);
}

.pattern-list__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-4);
	padding: var(--spacing-3) var(--spacing-4);
	background-color: #ffffff;
	border: var(--border-width) solid var(--border-color);
	border-radius: var(--radius-md);
}

.pattern-list__title {
	font-family: var(--font-secondary);
	font-size: var(--font-size-body-sm);
	color: var(--gray-900);
	line-height: 24px;
}

.pattern-list__meta {
	font-family: var(--font-secondary);
	font-size: var(--font-size-label);
	color: var(--gray-400);
	white-space: nowrap;
	flex-shrink: 0;
}

.pattern-list__item:focus {
	outline: 2px solid var(--color-primary-main);
	outline-offset: -2px;
	border-radius: var(--radius-md);
}

/* ─────────────────────────────────────────
	8. Spinner (Guide)
	───────────────────────────────────────── */

/* Sizes/Colors 섹션 — 스피너 + 라벨 가로 나열 */
.spinner-demo-group {
	display: flex;
	align-items: center;
	gap: var(--spacing-8);
	flex-wrap: wrap;
}

/* 개별 스피너 + 라벨 세트 */
.spinner-demo-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.spinner-demo-label {
	font-family: var(--font-secondary);
	font-size: var(--font-size-label);
	color: var(--gray-500);
}

/* White 색상 — 다크 배경 미리보기 */
.spinner-demo-bg {
	background-color: var(--gray-700);
	width: 64px;
	height: 64px;
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ─────────────────────────────────────────
	9. Tag (Guide)
	───────────────────────────────────────── */

.tag-live-desc {
	font-family: var(--font-secondary);
	font-size: var(--font-size-label);
	color: var(--gray-500);
	margin-bottom: var(--spacing-4);
}

/* Live 섹션 태그 목록 */
.tag-live-wrap {
	display: flex;
	gap: var(--spacing-2);
	flex-wrap: wrap;
	align-items: center;
}

/* Variants 섹션 — 색상별 세로 나열 */
.tag-demo-variants {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-4);
}

/* 색상 행 — 라벨 + 태그들 */
.tag-demo-row {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.tag-demo-label {
	width: 80px;
	flex-shrink: 0;
	font-family: var(--font-secondary);
	font-size: var(--font-size-label);
	color: var(--gray-500);
}

/* States 섹션 — 상태별 가로 나열 */
.tag-demo-states {
	display: flex;
	gap: var(--spacing-8);
	flex-wrap: wrap;
	align-items: flex-start;
}

/* 상태 아이템 — 라벨 + 태그 세트 */
.tag-demo-item {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-2);
	align-items: flex-start;
}

.tag-demo-item-label {
	font-family: var(--font-secondary);
	font-size: var(--font-size-label);
	color: var(--gray-500);
}

/* ─────────────────────────────────────────
	13. Table (Guide)
	───────────────────────────────────────── */

/* Sizes 섹션 — 테이블 크기 비교 */
.table-demo-wrap {
	display: flex;
	gap: 40px;
	flex-wrap: wrap;
	align-items: flex-start;
}

/* ─────────────────────────────────────────
	13b. Tooltip (Guide)
	───────────────────────────────────────── */

/* Directions 섹션 — 방향별 나열 */
.tooltip-demo-group {
	display: flex;
	gap: var(--spacing-8);
	flex-wrap: wrap;
	align-items: center;
}

.tooltip-demo-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-2);
}

.tooltip-demo-label {
	font-family: var(--font-secondary);
	font-size: var(--font-size-label);
	color: var(--gray-500);
}

/* 정적 미리보기 — JS 없이 가이드에서만 tooltip 노출 */
.tooltip--state-static {
	position: static;
	display: block;
	transform: none;
}

/* ─────────────────────────────────────────
	14. Breadcrumb (Guide)
	───────────────────────────────────────── */

.breadcrumb-demo-group {
	margin-bottom: var(--spacing-4);
}

.breadcrumb-demo-label {
	font-family: var(--font-secondary);
	font-size: var(--font-size-label);
	color: var(--gray-500);
	margin-bottom: var(--spacing-2);
}

/* ─────────────────────────────────────────
	9. Card (Guide)
	───────────────────────────────────────── */

.card-demo-wrap {
	display: flex;
	gap: var(--spacing-6);
	flex-wrap: wrap;
	align-items: flex-start;
}

.card-demo-item {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-2);
}

.card-demo-label {
	font-family: var(--font-secondary);
	font-size: var(--font-size-label);
	color: var(--gray-500);
}

/* spec-table 미리보기 셀 안에서 카드가 줄어들지 않도록 */
.card-demo-inline {
	display: inline-flex;
}

/* ─────────────────────────────────────────
	10. SearchBar (Guide)
	───────────────────────────────────────── */

.search-demo-states {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-4);
}

.search-demo-row {
	display: flex;
	align-items: center;
	gap: var(--spacing-6);
}

.search-demo-label {
	width: 64px;
	flex-shrink: 0;
	font-family: var(--font-secondary);
	font-size: var(--font-size-label);
	color: var(--gray-500);
}

/* ─────────────────────────────────────────
	11. Progress Bar (Guide)
	───────────────────────────────────────── */

.progress-demo-controls {
	display: flex;
	align-items: center;
	gap: var(--spacing-3);
	margin-top: var(--spacing-4);
}

.progress-demo-controls .state-list__label {
	white-space: nowrap;
}

.progress-demo-slider {
	flex: 1;
	accent-color: var(--color-primary-main);
}

/* Colors 섹션 — 세로 나열, 최대폭 제한 */
.progress-demo-colors {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-6);
	max-width: 480px;
}

/* ─────────────────────────────────────────
	12. Number Input (Guide)
	───────────────────────────────────────── */

/* Hover 상태 정적 미리보기용 */
.number-input__btn--state-hover {
	background-color: var(--gray-200);
}

/* ─────────────────────────────────────────
	15. Toggle Switch (Guide)
	───────────────────────────────────────── */

/* States 섹션 정적 상태 표시 — 가이드 전용 */
.toggle-switch--state-on .toggle-switch__track {
	background-color: var(--color-primary-main);
}

.toggle-switch--state-on .toggle-switch__thumb {
	transform: translateX(20px);
}

.toggle-switch--state-disabled-off .toggle-switch__label {
	cursor: not-allowed;
}

.toggle-switch--state-disabled-off .toggle-switch__text {
	color: var(--gray-400);
}

.toggle-switch--state-disabled-off .toggle-switch__track {
	background-color: var(--gray-200);
}

.toggle-switch--state-disabled-on .toggle-switch__label {
	cursor: not-allowed;
}

.toggle-switch--state-disabled-on .toggle-switch__text {
	color: var(--gray-400);
}

.toggle-switch--state-disabled-on .toggle-switch__track {
	background-color: var(--color-primary-disabled);
}

.toggle-switch--state-disabled-on .toggle-switch__thumb {
	transform: translateX(20px);
}

.toggle-switch--state-focus {
	outline: 3px solid var(--color-accent-main);
	outline-offset: -3px;
}

[data-theme="dark"] .toggle-switch--state-on .toggle-switch__track {
	background-color: var(--color-primary-main);
}

[data-theme="dark"] .toggle-switch--state-disabled-off .toggle-switch__track {
	background-color: var(--gray-700);
}

[data-theme="dark"] .toggle-switch--state-disabled-off .toggle-switch__text,
[data-theme="dark"] .toggle-switch--state-disabled-on .toggle-switch__text {
	color: var(--gray-600);
}

[data-theme="dark"] .toggle-switch--state-disabled-on .toggle-switch__track {
	background-color: var(--color-primary-disabled);
}

/* ─────────────────────────────────────────
	16. SearchBar (Guide)
	───────────────────────────────────────── */

/* Focus 상태 정적 표시 — 가이드 States 섹션 전용 */
.search-bar--state-focus .search-bar__input-wrap {
	border-color: var(--red-600);
}

/* ─────────────────────────────────────────
	16. Search + Filter Pattern
	───────────────────────────────────────── */

.search-pattern {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-5); /* 20px */
	width: 100%;
}

/* 필터 태그 행 */
.search-pattern__filters {
	display: flex;
	align-items: center;
	gap: var(--spacing-2); /* 8px */
	flex-wrap: wrap;
}

.search-pattern__filter-label {
	font-family: var(--font-secondary);
	font-size: var(--font-size-label); /* 14px */
	color: var(--gray-500);
	white-space: nowrap;
	flex-shrink: 0;
	margin-right: var(--spacing-1);
}

/* 결과 수 + 초기화 행 */
.search-pattern__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 24px;
}

.search-pattern__count {
	font-family: var(--font-secondary);
	font-size: var(--font-size-body-sm); /* 16px */
	color: var(--gray-700);
}

.search-pattern__count strong {
	color: var(--color-primary-main);
	font-weight: var(--font-weight-medium);
}

.search-pattern__clear {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--font-secondary);
	font-size: var(--font-size-label); /* 14px */
	color: var(--gray-400);
	transition: color var(--duration-fast);
}

.search-pattern__clear:hover {
	color: var(--color-accent-main);
}

/* 카드 그리드 */
.search-pattern__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--spacing-6); /* 24px */
}

/* 그리드 안에서 카드 너비 고정값 해제 */
.search-pattern__grid .card {
	width: 100%;
}

/* 빈 상태 */
.search-pattern__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-16) 0;
	gap: var(--spacing-3);
	text-align: center;
}

.search-pattern__empty-icon {
	font-size: 40px;
	color: var(--gray-300);
	line-height: 1;
}

.search-pattern__empty-title {
	font-family: var(--font-secondary);
	font-size: var(--font-size-body-base); /* 18px */
	font-weight: var(--font-weight-medium);
	color: var(--gray-500);
}

.search-pattern__empty-desc {
	font-family: var(--font-secondary);
	font-size: var(--font-size-body-sm); /* 16px */
	color: var(--gray-400);
}

/* 페이지네이션 */
.search-pattern__pagination {
	display: flex;
	justify-content: center;
	padding-top: var(--spacing-4);
}

/* 반응형 */
@media (max-width: 999px) {
	.search-pattern__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 499px) {
	.search-pattern__grid {
		grid-template-columns: 1fr;
	}
}

/* Focus 상태 정적 표시 — 가이드 States 섹션 전용 */
.search-bar--state-focus .search-bar__input-wrap {
	border-color: var(--red-600);
}

/* ─────────────────────────────────────────
	17. number input
	───────────────────────────────────────── */
/* Focus 상태 정적 표시 — 가이드 States 섹션 전용 */
.number-input__btn--focus {
	outline: 2px solid var(--color-accent-main);
	outline-offset: -2px;
}

/* ─────────────────────────────────────────
	반응형
	───────────────────────────────────────── */

@media (max-width: 999px) {
	.palette {
		overflow-x: auto;
		flex-wrap: nowrap;
		padding-bottom: var(--spacing-2);
	}

	.tokens__table,
	.state-matrix__table {
		overflow-x: auto;
		min-width: max-content;
	}

	.form-demo {
		grid-template-columns: repeat(2, 280px);
	}
}

@media (max-width: 768px) {
	.guide-page {
		padding: var(--spacing-6) var(--spacing-4);
	}

	.form-demo {
		grid-template-columns: 1fr;
	}

	.type-scale__row {
		grid-template-columns: 1fr;
		gap: var(--spacing-2);
	}

	.font-family-item {
		flex-direction: column;
		gap: var(--spacing-3);
	}

	.spacing-row {
		grid-template-columns: 100px 60px 1fr;
	}

	.button-row {
		gap: var(--spacing-3);
	}
}

@media (max-width: 499px) {
	.guide-page {
		padding: var(--spacing-4) var(--spacing-3);
	}

	.swatch {
		width: 100px;
		height: 60px;
	}
	.radius-box,
	.shadow-box {
		width: 100px;
	}
	.spacing-row {
		grid-template-columns: 90px 50px 1fr;
	}
	.button-row__label {
		min-width: 60px;
	}
}

/* ─────────────────────────────────────────
	10. 다크모드 토글 버튼
	───────────────────────────────────────── */

.theme-toggle {
	position: fixed;
	top: 16px;
	right: 16px;
	z-index: 999;
	width: 36px;
	height: 36px;
	border-radius: var(--radius-full);
	border: var(--border-width) solid var(--gray-200);
	background-color: #ffffff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	box-shadow: var(--shadow-sm);
	transition:
		border-color 0.15s,
		box-shadow 0.15s;
	line-height: 1;
	padding: 0;
}

.theme-toggle::before {
	content: "☀️";
}

.theme-toggle:hover {
	border-color: var(--gray-400);
	box-shadow: var(--shadow-md);
}

[data-theme="dark"] .theme-toggle {
	background-color: var(--gray-800);
	border-color: var(--gray-700);
}

[data-theme="dark"] .theme-toggle::before {
	content: "🌙";
}

/* ─────────────────────────────────────────
	11. Import 섹션
	───────────────────────────────────────── */

.guide-page__section--import {
	margin-bottom: var(--spacing-10);
}

.guide-page__section--import .guide-page__section-title {
	margin-bottom: var(--spacing-3);
}

/* ─────────────────────────────────────────
	12. 토큰 복사
	───────────────────────────────────────── */

.swatch[data-token] {
	cursor: pointer;
}

.swatch[data-token]::after {
	content: "var(" attr(data-token) ")";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 4px 6px;
	background-color: rgba(0, 0, 0, 0.75);
	color: #ffffff;
	font-family: "Courier New", Courier, monospace;
	font-size: 10px;
	line-height: 1.4;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: 0;
	transition: opacity 0.15s;
}

.swatch {
	position: relative;
}

.swatch[data-token]:hover::after {
	opacity: 1;
}

.swatch[data-token].is-copied::after {
	content: "✓ 복사됨";
	background-color: var(--green-700);
	opacity: 1;
}

.spacing-row__token[data-token],
.token-card__label[data-token],
.font-family-item__usage[data-token] {
	cursor: pointer;
	transition: color 0.15s;
}

.spacing-row__token[data-token]:hover,
.token-card__label[data-token]:hover,
.font-family-item__usage[data-token]:hover {
	color: var(--color-primary-main);
}

.spacing-row__token[data-token].is-copied,
.token-card__label[data-token].is-copied,
.font-family-item__usage[data-token].is-copied {
	color: var(--green-500);
}

.token-swatch[data-token] {
	cursor: pointer;
}

/* ─────────────────────────────────────────
	13. 다크모드 스타일
	───────────────────────────────────────── */

[data-theme="dark"] body {
	background-color: #0f172a;
}

[data-theme="dark"] .guide-page__title {
	color: var(--gray-100);
}

[data-theme="dark"] .guide-page__section-title {
	color: var(--gray-400);
	border-color: var(--gray-700);
}

[data-theme="dark"] .guide-nav__back {
	color: var(--gray-500);
}

[data-theme="dark"] .guide-nav__back:hover {
	color: var(--green-400);
}

[data-theme="dark"] .spec-table th {
	background-color: var(--gray-800);
	color: var(--gray-400);
	border-color: var(--gray-700);
}

[data-theme="dark"] .spec-table td {
	color: var(--gray-200);
	border-color: var(--gray-700);
}

[data-theme="dark"] .classes-table th {
	background-color: var(--gray-800);
	color: var(--gray-400);
	border-color: var(--gray-700);
}

[data-theme="dark"] .classes-table td {
	color: var(--gray-200);
	border-color: var(--gray-700);
}

[data-theme="dark"] .classes-tag--element {
	background-color: var(--gray-700);
	color: var(--gray-300);
}

[data-theme="dark"] .font-family-item {
	background-color: var(--gray-800);
}

[data-theme="dark"] .font-family-item__sample {
	color: var(--gray-100);
}

[data-theme="dark"] .type-scale__row:hover {
	background-color: var(--gray-800);
}

[data-theme="dark"] .type-scale__token,
[data-theme="dark"] .type-scale__spec {
	color: var(--gray-500);
}

[data-theme="dark"] .type-scale__sample {
	color: var(--gray-100);
}

[data-theme="dark"] .token-card__label {
	color: var(--gray-200);
}

[data-theme="dark"] .token-card__value {
	color: var(--gray-500);
}

[data-theme="dark"] .shadow-box {
	background-color: var(--gray-700);
	border-color: var(--gray-600);
}

[data-theme="dark"] .state-list__label,
[data-theme="dark"] .state-matrix__head-cell {
	color: var(--gray-500);
}

[data-theme="dark"] .state-matrix__title,
[data-theme="dark"] .guide-subtitle {
	color: var(--gray-200);
}

[data-theme="dark"] .spacing-row__token {
	color: var(--gray-300);
}

[data-theme="dark"] .spacing-row__value {
	color: var(--gray-500);
}

[data-theme="dark"] .spacing-row {
	border-color: var(--gray-700);
}

[data-theme="dark"] .pattern-page-desc,
[data-theme="dark"] .pattern-desc {
	color: var(--gray-400);
}

[data-theme="dark"] .pattern-desc code {
	background-color: var(--gray-700);
	color: var(--green-400);
}

[data-theme="dark"] .pattern-canvas {
	background-color: var(--gray-800);
	border-color: var(--gray-700);
}

[data-theme="dark"] .pattern-list__item {
	background-color: var(--gray-700);
	border-color: var(--gray-600);
}

[data-theme="dark"] .pattern-list__title {
	color: var(--gray-100);
}

[data-theme="dark"] .pattern-list__meta {
	color: var(--gray-500);
}

/* ─────────────────────────────────────────
	17. Demo 공통 — 가이드 Live 데모 전용
	───────────────────────────────────────── */

/* 데모 액션 버튼 (skeleton·progress-bar 등 Live 섹션 공용) */
.demo-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-2) var(--spacing-4);
	font-family: var(--font-secondary);
	font-size: var(--font-size-body-sm);
	font-weight: var(--font-weight-medium);
	color: #ffffff;
	background-color: var(--color-primary-main);
	border: none;
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: background-color var(--duration-fast);
}

.demo-btn:hover:not(:disabled) {
	background-color: var(--color-primary-hover);
}

.demo-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ─────────────────────────────────────────
	18. Skeleton (Guide) — Live 데모 카드
	───────────────────────────────────────── */

.skeleton-demo {
	position: relative;
	width: 320px;
}

/* skeleton 레이어 */
.skeleton-demo .skeleton-card {
	transition: opacity 0.4s ease;
}

/* 실제 콘텐츠 레이어 */
.skeleton-demo__real {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease;
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--gray-200);
}

.skeleton-demo__image {
	width: 100%;
	height: 180px;
	background: linear-gradient(135deg, var(--green-50) 0%, var(--blue-100) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
}

.skeleton-demo__image-icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--green-400), var(--blue-400));
	opacity: 0.7;
}

.skeleton-demo__body {
	padding: var(--spacing-4);
	background-color: #ffffff;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-2);
}

.skeleton-demo__title {
	font-family: var(--font-secondary);
	font-size: var(--font-size-body-base);
	font-weight: var(--font-weight-medium);
	color: var(--gray-900);
	line-height: 27px;
}

.skeleton-demo__text {
	font-family: var(--font-secondary);
	font-size: var(--font-size-label);
	color: var(--gray-500);
	line-height: 24px;
}

.skeleton-demo__text--sub {
	color: var(--gray-400);
}

[data-theme="dark"] .skeleton-demo__real {
	border-color: var(--gray-600);
}

[data-theme="dark"] .skeleton-demo__image {
	background: linear-gradient(135deg, var(--green-900) 0%, var(--blue-900) 100%);
}

[data-theme="dark"] .skeleton-demo__body {
	background-color: var(--gray-800);
}

[data-theme="dark"] .skeleton-demo__title {
	color: var(--gray-100);
}

[data-theme="dark"] .skeleton-demo__text {
	color: var(--gray-400);
}

[data-theme="dark"] .skeleton-demo__text--sub {
	color: var(--gray-600);
}

/* ─────────────────────────────────────────
	Foundation — Motion (guide) — foundation/motion.html
	───────────────────────────────────────── */

/* ── Duration Live Demo ── */
.motion-demo {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-3);
	max-width: 600px;
}

.motion-demo__row {
	display: flex;
	align-items: center;
	gap: var(--spacing-4);
}

.motion-demo__meta {
	width: 180px;
	flex-shrink: 0;
}

.motion-demo__token {
	font-family: var(--font-secondary);
	font-size: var(--font-size-label);
	font-weight: var(--font-weight-medium);
	color: var(--gray-600);
	line-height: 1.4;
}

.motion-demo__desc {
	font-family: var(--font-secondary);
	font-size: 12px;
	color: var(--gray-400);
	line-height: 1.4;
	margin-top: 2px;
}

.motion-demo__track {
	position: relative;
	flex: 1;
	height: 48px;
	background-color: var(--gray-100);
	border-radius: var(--radius-full);
	overflow: hidden;
}

.motion-demo__ball {
	position: absolute;
	top: 50%;
	left: 4px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	transform: translateY(-50%);
	transition: left var(--easing-default);
}

.motion-demo__ball--run {
	left: calc(100% - 44px);
}

.motion-demo__ball--fast {
	background-color: var(--color-primary-main);
	transition-duration: var(--duration-fast);
}
.motion-demo__ball--base {
	background-color: var(--color-secondary-main);
	transition-duration: var(--duration-base);
}
.motion-demo__ball--slow {
	background-color: var(--color-accent-main);
	transition-duration: var(--duration-slow);
}

/* ── Easing 비교 ── */
.easing-grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-4);
	max-width: 700px;
}

.easing-card {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-3);
	width: 120px;
}

.easing-card__label {
	font-family: var(--font-secondary);
	font-size: var(--font-size-label);
	font-weight: var(--font-weight-medium);
	color: var(--gray-500);
}

.easing-card__sub {
	font-family: var(--font-secondary);
	font-size: 12px;
	color: var(--gray-400);
	margin-top: -6px;
}

.easing-card__track {
	position: relative;
	width: 100%;
	height: 40px;
	background-color: var(--gray-100);
	border-radius: var(--radius-full);
	overflow: hidden;
}

.easing-card__ball {
	position: absolute;
	top: 50%;
	left: 4px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: var(--green-400);
	transform: translateY(-50%);
	transition: left 0.6s;
}

.easing-card__ball--ease {
	transition-timing-function: ease;
}
.easing-card__ball--ease-in {
	transition-timing-function: ease-in;
}
.easing-card__ball--ease-out {
	transition-timing-function: ease-out;
}
.easing-card__ball--ease-in-out {
	transition-timing-function: ease-in-out;
}
.easing-card__ball--linear {
	transition-timing-function: linear;
	background-color: var(--gray-400);
}

.easing-card__ball--run {
	left: calc(100% - 36px);
}

/* ── 사용 가이드 표 ── */
.motion-usage-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--font-secondary);
	font-size: var(--font-size-body-sm);
}

.motion-usage-table th,
.motion-usage-table td {
	padding: var(--spacing-3) var(--spacing-4);
	text-align: left;
	border-bottom: var(--border-width) solid var(--gray-100);
	vertical-align: top;
}

.motion-usage-table th {
	font-weight: var(--font-weight-medium);
	color: var(--gray-400);
	font-size: var(--font-size-label);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	background-color: var(--gray-50);
}

.motion-usage-table td {
	color: var(--gray-700);
}
.motion-usage-table td:first-child {
	font-weight: var(--font-weight-medium);
	color: var(--gray-900);
	white-space: nowrap;
	font-size: var(--font-size-label);
}
.motion-usage-table td code {
	font-family: var(--font-secondary);
	font-size: 13px;
	font-weight: var(--font-weight-medium);
	color: var(--green-700);
	background-color: var(--green-50);
	padding: 2px 6px;
	border-radius: var(--radius-sm);
}

.motion-usage-table__tag {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: var(--radius-full);
	font-size: 12px;
	font-weight: var(--font-weight-medium);
	margin-right: 4px;
	margin-bottom: 4px;
}

.motion-usage-table__tag--fast {
	background-color: var(--green-50);
	color: var(--green-700);
}
.motion-usage-table__tag--base {
	background-color: var(--blue-50);
	color: var(--blue-700);
}
.motion-usage-table__tag--slow {
	background-color: var(--red-50);
	color: var(--red-700);
}

/* Dark mode */
[data-theme="dark"] .motion-demo__track,
[data-theme="dark"] .easing-card__track {
	background-color: var(--gray-700);
}

[data-theme="dark"] .motion-demo__token {
	color: var(--gray-300);
}
[data-theme="dark"] .motion-demo__desc {
	color: var(--gray-500);
}

[data-theme="dark"] .motion-usage-table th {
	background-color: var(--gray-800);
	color: var(--gray-500);
}

[data-theme="dark"] .motion-usage-table td {
	color: var(--gray-300);
}
[data-theme="dark"] .motion-usage-table td:first-child {
	color: var(--gray-100);
}
[data-theme="dark"] .motion-usage-table td code {
	background-color: var(--green-900);
	color: var(--green-300);
}

[data-theme="dark"] .motion-usage-table th,
[data-theme="dark"] .motion-usage-table td {
	border-color: var(--gray-700);
}

/* ─── Section 20: Auth / Login (Guide) ─── */

/* Live 데모 — 3개 카드 가로 배열 */
.auth-demo {
	display: flex;
	gap: var(--spacing-2);
	flex-wrap: wrap;
	align-items: flex-start;
}

/* States 섹션 — 2열 그리드 */
.auth-state-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
	gap: var(--spacing-8);
	align-items: start;
}

.auth-state-item {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-2);
}

@media (max-width: 767px) {
	.auth-demo {
		flex-direction: column;
	}

	.auth-state-grid {
		grid-template-columns: 1fr;
	}
}

/* ─── Section 21: Drawer (Guide) ─── */

.drawer-state-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-8);
}

.drawer-state-item {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-3);
}

.drawer-state-preview {
	height: 400px;
	background-color: rgba(0, 0, 0, 0.15);
	border-radius: var(--radius-md);
	overflow: hidden;
	display: flex;
	justify-content: flex-end;
}

.drawer-state-preview .drawer__panel {
	width: 75%;
	border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

@media (max-width: 767px) {
	.drawer-state-grid {
		grid-template-columns: 1fr;
	}
}

[data-theme="dark"] .drawer-state-preview {
	background-color: rgba(0, 0, 0, 0.4);
}

/* ─── Section 18 (cont.): Empty State ─── */
.es-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-6);
}

.es-preview {
	border: var(--border-width) solid var(--border-color);
	border-radius: var(--radius-md);
	display: flex;
	justify-content: center;
	overflow: hidden;
	margin-top: 8px;
}

@media (max-width: 767px) {
	.es-grid {
		grid-template-columns: 1fr;
	}
}

[data-theme="dark"] .es-preview {
	border-color: var(--gray-700);
}