@charset "utf-8";

/* ==========================================================================
   font
   ========================================================================== */
/*
Copyright (c) 2024 Wanted Lab, Inc., with Reserved Font Name Wanted Sans Variable.
https://github.com/wanteddev/wanted-sans
SIL Open Font License 1.1 — fonts/OFL.txt
*/
@font-face {
	font-family: 'Wanted Sans';
	src: url('../fonts/WantedSansVariable.woff2') format('woff2-variations');
	font-weight: 400 1000;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   tokens — Figma 변수명 그대로 사용
   ========================================================================== */
:root {
	/* primitive — 램프 원본. 면에는 시맨틱 토큰을 쓴다 */
	--brand-50: #edfbf9;
	--brand-100: #d2f5f0;
	--brand-200: #a6ebe2;
	--brand-300: #79e0d3;
	--brand-400: #5cd8c9;
	--brand-500: #47d0be;
	--brand-600: #2fae9e;
	--brand-700: #238c7f;
	--brand-800: #1a6b61;
	--brand-900: #124a43;
	--brand-950: #0c2e2a;

	--secondary-50: #fff4ef;
	--secondary-100: #ffe5d9;
	--secondary-200: #ffcbb3;
	--secondary-300: #ffb18d;
	--secondary-400: #ffa478;
	--secondary-500: #ff9869;
	--secondary-600: #f57d4d;
	--secondary-700: #db6134;
	--secondary-800: #b04b27;
	--secondary-900: #8a3a1e;
	--secondary-950: #5c2513;

	--gray-0: #fff;
	--gray-50: #f8f9f9;
	--gray-100: #f1f3f4;
	--gray-200: #e5e7e9;
	--gray-300: #d0d3d6;
	--gray-400: #acb0b4;
	--gray-500: #858a8f;
	--gray-600: #656a6f;
	--gray-700: #4c5156;
	--gray-800: #343a3f;
	--gray-900: #202429;
	--gray-950: #13171a;
	--gray-1000: #000;

	--red-50: #fbeded;
	--red-100: #f5d2d2;
	--red-200: #eba6a6;
	--red-300: #e07979;
	--red-500: #d04747;
	--red-600: #ae2f2f;
	--red-700: #8c2323;
	--red-800: #6b1a1a;
	--red-900: #4a1212;

	--amber-50: #fdf8ec;
	--amber-100: #faefcf;
	--amber-200: #f0e2bd;
	--amber-300: #e5c784;
	--amber-500: #d99a3f;
	--amber-600: #c9861f;
	--amber-700: #a46b17;
	--amber-800: #7a4f10;
	--amber-900: #5c3a0b;

	--blue-50: #eef4ff;
	--blue-100: #dce7fb;
	--blue-200: #c9d9f3;
	--blue-300: #9db6e4;
	--blue-500: #5878c9;
	--blue-600: #4462b0;
	--blue-700: #364e8c;
	--blue-800: #2a3d6e;
	--blue-900: #1e2c50;

	--purple-50: #f1edff;
	--purple-100: #e3dcff;
	--purple-200: #cfc6f5;
	--purple-300: #a99ee0;
	--purple-500: #6d63c6;
	--purple-600: #5a50ad;
	--purple-700: #47408b;
	--purple-800: #383170;
	--purple-900: #282353;

	/* color — background */
	--color-bg-surface-default: #fff;
	--color-bg-surface-subtle: #f8f9f9;
	--color-bg-surface-muted: #f1f3f4;
	--color-bg-surface-hover: #f1f3f4;
	--color-bg-canvas: #f8f9f9;
	--color-bg-inverse: #202429;
	--color-bg-inverse-strong: #13171a;
	--color-bg-overlay: #202429;
	--color-bg-brand-default: #47d0be;
	--color-bg-brand-hover: #2fae9e;
	--color-bg-brand-active: #238c7f;
	--color-bg-brand-subtle: #edfbf9;
	--color-bg-brand-subtle-hover: #d2f5f0;
	--color-bg-brand-strong: #1a6b61;
	--color-bg-brand-strong-hover: #124a43;
	--color-bg-secondary-default: #ff9869;
	--color-bg-secondary-hover: #f57d4d;
	--color-bg-secondary-active: #db6134;
	--color-bg-secondary-subtle: #fff4ef;
	--color-bg-secondary-strong: #b04b27;
	--color-bg-success-default: #2fae9e;
	--color-bg-success-subtle: #edfbf9;
	--color-bg-warning-default: #d99a3f;
	--color-bg-warning-subtle: #fdf8ec;
	--color-bg-danger-default: #d04747;
	--color-bg-danger-hover: #ae2f2f;
	--color-bg-danger-subtle: #fbeded;
	--color-bg-info-default: #5878c9;
	--color-bg-info-subtle: #eef4ff;
	--color-bg-accent-default: #6d63c6;
	--color-bg-accent-subtle: #f1edff;
	--color-bg-neutral-default: #f1f3f4;
	--color-bg-neutral-hover: #e5e7e9;
	--color-bg-neutral-strong: #656a6f;
	--color-bg-disabled: #e5e7e9;

	/* color — text */
	--color-text-primary: #202429;
	--color-text-secondary: #343a3f;
	--color-text-tertiary: #4c5156;
	--color-text-quaternary: #656a6f;
	--color-text-quinary: #858a8f;
	--color-text-disabled: #acb0b4;
	--color-text-placeholder: #acb0b4;
	--color-text-inverse: #fff;
	--color-text-on-inverse: #fff;
	--color-text-on-brand: #fff;
	--color-text-on-brand-strong: #fff;
	--color-text-on-secondary: #fff;
	--color-text-brand: #2fae9e;
	--color-text-secondary-accent: #f57d4d;
	--color-text-success: #1a6b61;
	--color-text-warning: #7a4f10;
	--color-text-danger: #d04747;
	--color-text-info: #4462b0;
	--color-text-accent: #5a50ad;
	--color-text-link-default: #2fae9e;
	--color-text-link-hover: #238c7f;

	/* color — border */
	--color-border-subtle: #f1f3f4;
	--color-border-default: #e5e7e9;
	--color-border-strong: #d0d3d6;
	--color-border-inverse: #202429;
	--color-border-disabled: #d0d3d6;
	--color-border-focus: #47d0be;
	--color-border-brand-default: #47d0be;
	--color-border-brand-subtle: #a6ebe2;
	--color-border-brand-strong: #238c7f;
	--color-border-secondary-default: #ff9869;
	--color-border-secondary-subtle: #ffcbb3;
	--color-border-secondary-strong: #db6134;
	--color-border-success-default: #a6ebe2;
	--color-border-success-subtle: #d2f5f0;
	--color-border-success-strong: #47d0be;
	--color-border-warning-default: #f0e2bd;
	--color-border-warning-subtle: #faefcf;
	--color-border-warning-strong: #d99a3f;
	--color-border-danger-default: #d04747;
	--color-border-danger-subtle: #f5d2d2;
	--color-border-danger-strong: #ae2f2f;
	--color-border-info-default: #c9d9f3;
	--color-border-info-subtle: #dce7fb;
	--color-border-info-strong: #5878c9;
	--color-border-accent-default: #cfc6f5;
	--color-border-accent-subtle: #e3dcff;
	--color-border-accent-strong: #6d63c6;
	--border-width-thin: 1px;
	--border-width-thick: 1.5px;

	/* gradient */
	--gradient-hero: linear-gradient(180deg, var(--brand-50) 0%, #fff 100%); /* 히어로 배경 글로우 */
	--gradient-brand: linear-gradient(160.71deg, var(--brand-500) 0%, var(--brand-700) 100%); /* 클로징 풀블리드 · 텍스트 text/on-brand */
	--gradient-brand-bright: linear-gradient(147deg, var(--brand-400) 0%, var(--brand-600) 100%);
	--gradient-secondary: linear-gradient(160.71deg, var(--secondary-500) 0%, var(--secondary-700) 100%); /* 체험·보상 강조 · 텍스트 text/on-secondary */
	--gradient-secondary-bright: linear-gradient(147deg, var(--secondary-400) 0%, var(--secondary-600) 100%);
	--gradient-secondary-subtle: linear-gradient(180deg, var(--secondary-50) 0%, #fff 100%); /* 체험·이벤트 서브 섹션 글로우 */

	/* typography */
	--font-family-base: 'Wanted Sans', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;

	--font-size-2xs: 11px;
	--font-size-xs: 12px;
	--font-size-sm: 13px;
	--font-size-smd: 14px;
	--font-size-md: 15px;
	--font-size-lg: 16px;
	--font-size-xl: 18px;
	--font-size-2xl: 20px;
	--font-size-3xl: 24px;
	--font-size-4xl: 28px;
	--font-size-5xl: 32px;
	--font-size-6xl: 40px;
	--font-size-7xl: 56px;

	--font-letter-spacing-normal: -0.2px;
	--font-letter-spacing-snug: -0.5px;
	--font-letter-spacing-tight: -1px;

	/* space (4pt) */
	--space-none: 0;
	--space-2xs: 2px;
	--space-xs: 4px;
	--space-sm: 8px;
	--space-md: 12px;
	--space-lg: 16px;
	--space-lgx: 20px;
	--space-xl: 24px;
	--space-2xl: 32px;
	--space-3xl: 40px;
	--space-4xl: 48px;
	--space-5xl: 64px;
	--space-6xl: 80px;

	/* radius */
	--radius-none: 0;
	--radius-xs: 4px;
	--radius-sm: 6px;
	--radius-md: 12px;
	--radius-lg: 16px;
	--radius-xl: 20px;
	--radius-2xl: 24px;
	--radius-3xl: 32px;
	--radius-4xl: 40px;
	--radius-full: 999px;

	/* size */
	--size-control-sm: 32px;
	--size-control-md: 40px;
	--size-control-default: 48px;
	--size-control-lg: 56px;
	--size-control-xl: 64px;
	--size-icon-sm: 16px;
	--size-icon-md: 20px;
	--size-icon-lg: 24px;
	--size-icon-2xl: 40px; /* Empty state lg 아이콘에서 확인 (xl은 미확인) */
	--size-avatar-sm: 26px;
	--size-avatar-md: 36px;
	--size-avatar-lg: 44px;
	--size-badge-sm: 20px;
	--size-badge-md: 24px;
	--size-badge-lg: 28px;
	--size-badge-xl: 32px;
	--size-touch-min: 44px;

	/* layout — 본문 1280 · 와이드 1440 · 내로우 760 */
	--container-max: 1280px;
	--container-pad: var(--space-3xl); /* 컨테이너 좌우 패딩 40 → 1024:32 → 768:20. .go_top right도 이 값을 따른다(항상 컨테이너 여백과 일치) */
	--container-wide: 1440px;
	--container-narrow: 760px;
	--container-compact: 600px; /* 인증 폼 컬럼 — B-2 variable defs 실측 */

	/* effect — 떠 있는 요소에만 */
	--shadow-xs: 0 1px 2px rgba(15, 28, 30, 0.05);
	--shadow-sm: 0 1px 2px rgba(15, 28, 30, 0.05), 0 2px 6px rgba(15, 28, 30, 0.05);
	--shadow-smd: 0 4px 12px rgba(15, 28, 30, 0.06);
	--shadow-md: 0 6px 24px rgba(15, 28, 30, 0.07);
	--shadow-lg: 0 16px 48px rgba(15, 28, 30, 0.14);
	--shadow-xl: 0 20px 60px rgba(15, 28, 30, 0.25);
	--shadow-brand: 0 8px 24px rgba(71, 208, 190, 0.3);
	--shadow-secondary: 0 8px 24px rgba(255, 152, 105, 0.3);
	--focus-ring: 0 0 0 3px var(--brand-500);
	--focus-glow: 0 0 6px 2px rgba(71, 208, 190, 0.18);
	--blur-backdrop: blur(24px);
	--blur-backdrop-strong: blur(40px);
}

/* ==========================================================================
   base
   ========================================================================== */
html {
	-webkit-text-size-adjust: 100%;
}

body {
	font-family: var(--font-family-base);
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-regular);
	line-height: 1.6;
	letter-spacing: var(--font-letter-spacing-normal);
	color: var(--color-text-primary);
	background: var(--color-bg-surface-default);
	word-break: keep-all; /* 한글은 단어 단위로 줄바꿈 — 목록·체크/라디오/스위치 라벨 등 긴 문장 공통 (사용자 요청 2026-08-26). 긴 URL·영문은 overflow-wrap이 잡는다 */
	overflow-wrap: break-word;
}

img,
svg {
	display: block;
	max-width: 100%;
}

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

button {
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
	cursor: pointer;
	background: none;
	border: 0;
}

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

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

/* ==========================================================================
   accessibility
   ========================================================================== */
.skip_nav {
	position: absolute;
	top: -9999px;
	left: 0;
}

.skip_nav:focus {
	top: 0;
	z-index: 9999;
	padding: 8px 16px;
	background: #000;
	color: #fff;
}

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

/* ==========================================================================
   typography
   ========================================================================== */
.disp_xl,
.disp_lg,
.disp_md {
	font-weight: var(--font-weight-bold);
	line-height: 1.25;
	letter-spacing: var(--font-letter-spacing-tight);
}

.disp_xl { font-size: var(--font-size-7xl); }
.disp_lg { font-size: var(--font-size-6xl); }
.disp_md { font-size: var(--font-size-5xl); }

.head_xl,
.head_lg,
.head_md,
.head_sm {
	line-height: 1.4;
	letter-spacing: var(--font-letter-spacing-snug);
}

.head_xl {
	font-size: var(--font-size-4xl);
	font-weight: var(--font-weight-bold);
}

.head_lg {
	font-size: var(--font-size-3xl);
	font-weight: var(--font-weight-bold);
}

.head_lg_sb {
	font-size: var(--font-size-3xl);
	font-weight: var(--font-weight-semibold);
	line-height: 1.4;
	letter-spacing: var(--font-letter-spacing-snug);
}

.head_md {
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-semibold);
}

.head_sm {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--font-letter-spacing-normal);
}

.body_3xl,
.body_2xl,
.body_xl,
.body_lg,
.body_md,
.body_smd {
	font-weight: var(--font-weight-regular);
	line-height: 1.6;
}

.body_3xl { font-size: var(--font-size-3xl); }
.body_2xl { font-size: var(--font-size-2xl); }
.body_xl { font-size: var(--font-size-xl); }
.body_lg { font-size: var(--font-size-lg); }
.body_md { font-size: var(--font-size-md); }
.body_smd { font-size: var(--font-size-smd); }

.cap_md,
.cap_sm {
	font-weight: var(--font-weight-regular);
	line-height: 1.5;
}

.cap_md { font-size: var(--font-size-xs); }
.cap_sm { font-size: var(--font-size-2xs); }

.fw_md { font-weight: var(--font-weight-medium); }
.fw_sb { font-weight: var(--font-weight-semibold); }

.lbl_2xl,
.lbl_xl,
.lbl_lg,
.lbl_md,
.lbl_smd,
.lbl_sm {
	font-weight: var(--font-weight-semibold);
	line-height: 1.5;
}

.lbl_2xl { font-size: var(--font-size-2xl); }
.lbl_xl { font-size: var(--font-size-xl); }
.lbl_lg { font-size: var(--font-size-lg); }
.lbl_md { font-size: var(--font-size-md); }
.lbl_smd { font-size: var(--font-size-smd); }
.lbl_sm { font-size: var(--font-size-sm); }

/* 아이콘·국기는 flex 컨테이너 안에서 절대 찌그러지지 않는다 — 공간이 좁아지면 옆 텍스트가 줄어들지 아이콘이 줄지 않는다
   (국가 번호 드롭다운 375에서 국기·chevron이 납작해지던 것, 사용자 지시 2026-08-26). Lucide는 <i data-lucide>를 <svg class="ico">로 치환하므로 .ico 하나로 전 아이콘 커버 */
.ico,
.ip_flag,
.ip_flag img,
.cc_item img,
.avatar,
.badge .dot {
	flex-shrink: 0;
}

/* ==========================================================================
   layout
   ========================================================================== */
/* max-width는 콘텐츠 1280 + 좌우 패딩 — Figma 콘텐츠 폭(1280)과 일치시키기 위해 패딩을 밖으로 더한다 (C-1 실측).
   이중 클래스(.container.container)는 Tailwind CDN이 뒤에 주입하는 자체 .container max-width(브레이크포인트별 640~1536)를 명시도로 차단하기 위함 — 제거 금지 */
.container {
	width: 100%;
	margin: 0 auto;
	padding: 0 var(--container-pad);
}

.container.container {
	max-width: calc(var(--container-max) + var(--container-pad) * 2);
}

.container_narrow {
	width: 100%;
	max-width: calc(var(--container-narrow) + var(--container-pad) * 2);
	margin: 0 auto;
	padding: 0 var(--container-pad);
}

/* ==========================================================================
   component — button
   ========================================================================== */
/* 체급 = Figma Size 프로퍼티. 기본값은 default(48) */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	height: var(--size-control-default);
	padding: 0 var(--space-xl);
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-semibold);
	line-height: 1.5;
	white-space: nowrap;
	border-radius: var(--radius-full);
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn .ico {
	flex: 0 0 var(--size-icon-lg);
	width: var(--size-icon-lg);
	height: var(--size-icon-lg);
}

.btn_sm {
	gap: var(--space-xs);
	height: var(--size-control-sm);
	padding: 0 var(--space-md);
	font-size: var(--font-size-sm);
}

.btn_sm .ico {
	flex-basis: var(--size-icon-sm);
	width: var(--size-icon-sm);
	height: var(--size-icon-sm);
}

.btn_md {
	height: var(--size-control-md);
	padding: 0 var(--space-lg);
	font-size: var(--font-size-smd);
}

.btn_md .ico {
	flex-basis: var(--size-icon-md);
	width: var(--size-icon-md);
	height: var(--size-icon-md);
}

.btn_lg {
	height: var(--size-control-lg);
	padding: 0 var(--space-2xl);
	font-size: var(--font-size-xl);
}

.btn_xl {
	height: var(--size-control-xl);
	padding: 0 var(--space-3xl);
	font-size: var(--font-size-2xl);
}

/* 480 이하 — xl은 한 체급 아래(lg)로. 모바일에서 64·20은 과함 (사용자 요청 2026-08-26, 인증 폼·결제·마이페이지 CTA 공통)
   + lg 체급 모바일 값 = Figma 모바일 변수 모드 실측(2026-08-31): 텍스트 17(xl 18→17) · 패딩 24(2xl 32→24) — 토큰에 없는 값이라 리터럴 */
@media (max-width: 480px) {
	.btn_lg,
	.btn_xl {
		height: var(--size-control-lg);
		padding: 0 var(--space-xl);
		font-size: 17px;
	}
}

.btn_block {
	width: 100%;
}

/* Color=Primary */
.btn_primary {
	color: var(--color-text-on-brand);
	background: var(--color-bg-brand-default);
}

.btn_primary:hover {
	background: var(--color-bg-brand-hover);
}

.btn_primary:active {
	background: var(--color-bg-brand-active);
}

.btn_primary.btn_outline {
	color: var(--color-text-brand);
	background: var(--color-bg-surface-default);
	border: var(--border-width-thin) solid var(--color-border-brand-default);
}

.btn_primary.btn_outline:hover,
.btn_primary.btn_ghost:hover {
	background: var(--color-bg-brand-subtle);
}

.btn_primary.btn_ghost {
	color: var(--color-text-brand);
	background: transparent;
}

/* Color=Secondary — 체험·보상 강조 전용 */
.btn_secondary {
	color: var(--color-text-on-secondary);
	background: var(--color-bg-secondary-default);
}

.btn_secondary:hover {
	background: var(--color-bg-secondary-hover);
}

.btn_secondary:active {
	background: var(--color-bg-secondary-active);
}

.btn_secondary.btn_outline {
	color: var(--color-text-secondary-accent);
	background: var(--color-bg-surface-default);
	border: var(--border-width-thin) solid var(--color-border-secondary-default);
}

.btn_secondary.btn_ghost {
	color: var(--color-text-secondary-accent);
	background: transparent;
}

.btn_secondary.btn_outline:hover,
.btn_secondary.btn_ghost:hover {
	background: var(--color-bg-secondary-subtle);
}

/* Color=Danger — 파괴적 액션 전용 */
.btn_danger {
	color: var(--color-text-inverse);
	background: var(--color-bg-danger-default);
}

.btn_danger:hover {
	background: var(--color-bg-danger-hover);
}

.btn_danger.btn_outline {
	color: var(--color-text-danger);
	background: var(--color-bg-surface-default);
	border: var(--border-width-thin) solid var(--color-border-danger-default);
}

.btn_danger.btn_ghost {
	color: var(--color-text-danger);
	background: transparent;
}

.btn_danger.btn_outline:hover,
.btn_danger.btn_ghost:hover {
	background: var(--color-bg-danger-subtle);
}

/* Color=Light — 중립 보조 액션 */
.btn_light {
	color: var(--color-text-quaternary);
	background: var(--color-bg-neutral-default);
}

.btn_light:hover {
	background: var(--color-bg-neutral-hover);
}

.btn_light.btn_outline {
	color: var(--color-text-quaternary);
	background: var(--color-bg-surface-default);
	border: var(--border-width-thin) solid var(--color-border-default);
}

.btn_light.btn_ghost {
	color: var(--color-text-quaternary);
	background: transparent;
}

.btn_light.btn_outline:hover,
.btn_light.btn_ghost:hover {
	background: var(--color-bg-surface-hover);
}

/* Color=Gradient */
.btn_grad {
	color: var(--color-text-on-brand);
	background: var(--gradient-brand-bright);
}

.btn_grad:hover {
	background: var(--gradient-brand);
}

.btn_grad_secondary {
	color: var(--color-text-on-secondary);
	background: var(--gradient-secondary-bright);
}

.btn_grad_secondary:hover {
	background: var(--gradient-secondary);
}

/* :hover 변형까지 함께 선언 — 색·타입별 hover 규칙(.btn_primary.btn_outline:hover 등, 특이도 0,3,0)이 disabled(0,2,0)를 이겨 비활성 버튼에 hover 면이 뜨던 것 차단 (2026-08-26) */
.btn:disabled,
.btn.is_disabled,
.btn:disabled:hover,
.btn.is_disabled:hover {
	color: var(--color-text-disabled);
	background: var(--color-bg-disabled);
	border-color: transparent;
	cursor: not-allowed;
}

/* Ghost는 disabled에서도 면 없이 아이콘·텍스트만 흐려진다 (페이지네이션 화살표 — Figma 352:36037 실측, 채움 없음) */
.btn_ghost:disabled,
.btn_ghost.is_disabled,
.btn_ghost:disabled:hover,
.btn_ghost.is_disabled:hover {
	background: transparent;
}

/* Icon Only=true — 정원, 폭 = 체급 높이 */
.btn_icon {
	width: var(--size-control-default);
	padding: 0;
}

.btn_icon.btn_sm {
	width: var(--size-control-sm);
}

.btn_icon.btn_md {
	width: var(--size-control-md);
}

.btn_icon.btn_lg {
	width: var(--size-control-lg);
}

/* 겉보기 40 이하 아이콘 버튼은 히트 영역 44 확보 */
.btn_icon.btn_sm,
.btn_icon.btn_md {
	position: relative;
}

.btn_icon.btn_sm::after,
.btn_icon.btn_md::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--size-touch-min);
	height: var(--size-touch-min);
	transform: translate(-50%, -50%);
	content: '';
}

/* ==========================================================================
   component — badge
   ========================================================================== */
/* Tone × Variant × Size × Shape. 기본 = Brand · Subtle · md · Pill */
.badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	height: var(--size-badge-md);
	padding: 0 var(--space-sm);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	line-height: 1.5;
	color: var(--color-text-brand);
	background: var(--color-bg-brand-subtle);
	border-radius: var(--radius-full);
}

.badge_sm {
	height: var(--size-badge-sm);
	padding: 0 var(--space-sm);
	font-size: var(--font-size-xs);
}

.badge_lg {
	height: var(--size-badge-lg);
	padding: 0 var(--space-md);
	font-size: var(--font-size-smd);
}

.badge_xl {
	height: var(--size-badge-xl);
	padding: 0 var(--space-lg);
	font-size: var(--font-size-smd);
}

/* Shape=Square */
.badge_square {
	border-radius: var(--radius-sm);
}

/* Tone */
.badge_neutral {
	color: var(--color-text-tertiary);
	background: var(--color-bg-neutral-default);
}

.badge_secondary {
	color: var(--color-text-secondary-accent);
	background: var(--color-bg-secondary-subtle);
}

.badge_danger {
	color: var(--color-text-danger);
	background: var(--color-bg-danger-subtle);
}

.badge_info {
	color: var(--color-text-info);
	background: var(--color-bg-info-subtle);
}

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

/* Variant=Solid */
.badge_solid {
	color: var(--color-text-on-brand);
	background: var(--color-bg-brand-default);
}

.badge_neutral.badge_solid {
	color: var(--color-text-inverse);
	background: var(--color-bg-neutral-strong);
}

.badge_secondary.badge_solid {
	color: var(--color-text-on-secondary);
	background: var(--color-bg-secondary-default);
}

.badge_danger.badge_solid {
	color: var(--color-text-inverse);
	background: var(--color-bg-danger-default);
}

.badge_info.badge_solid {
	color: var(--color-text-inverse);
	background: var(--color-bg-info-default);
}

.badge_accent.badge_solid {
	color: var(--color-text-inverse);
	background: var(--color-bg-accent-default);
}

.badge .dot {
	width: 6px;
	height: 6px;
	background: currentColor;
	border-radius: var(--radius-full);
}

/* ==========================================================================
   component — chip
   ========================================================================== */
.chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	height: var(--size-control-default);
	padding: 0 var(--space-xl);
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-semibold);
	line-height: 1.5;
	color: var(--color-text-quaternary);
	background: var(--color-bg-surface-default);
	border: var(--border-width-thin) solid var(--color-border-default);
	border-radius: var(--radius-full);
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.chip_sm {
	height: var(--size-control-sm);
	padding: 0 var(--space-md);
	font-size: var(--font-size-sm);
}

.chip_md {
	height: var(--size-control-md);
	padding: 0 var(--space-lg);
}

/* Shape=Square */
.chip_square {
	border-radius: var(--radius-md);
}

.chip.is_on,
.chip[aria-pressed='true'] {
	color: var(--color-text-brand);
	background: var(--color-bg-brand-subtle);
	border-color: var(--color-border-brand-default);
}

.chip:disabled,
.chip.is_disabled {
	color: var(--color-text-disabled);
	background: var(--color-bg-disabled);
	border-color: transparent;
	cursor: not-allowed;
}

/* ==========================================================================
   component — form
   ========================================================================== */
.fld {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	width: 100%;
}

.fld_lbl {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	width: 100%;
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-medium);
	line-height: 1.6;
	color: var(--color-text-secondary);
}

.fld_lbl .req {
	margin-left: var(--space-2xs);
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-regular);
	color: var(--color-text-danger);
}

.fld_lbl .counter {
	font-weight: var(--font-weight-regular);
	color: var(--color-text-quaternary);
}

/* 밑줄형 필드. 높이 default 48 · md 40 · lg 56 */
.ip,
.txa {
	width: 100%;
	padding: 0 var(--space-lg);
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-text-primary);
	background: var(--color-bg-surface-default);
	border: 0;
	border-bottom: var(--border-width-thin) solid var(--color-border-default);
	transition: border-color 0.2s ease;
}

.ip {
	height: var(--size-control-default);
}

.ip_md {
	height: var(--size-control-md);
}

.ip_lg {
	height: var(--size-control-lg);
}

.ip::placeholder,
.txa::placeholder {
	color: var(--color-text-placeholder);
}

/*
 * 브라우저 자동완성이 칠하는 배경 지우기 (2026-09-01 사용자 지적).
 *
 * 크로미움·사파리는 자동완성으로 채운 칸에 자기 배경(연파랑·연노랑)을 칠한다. 밑줄형
 * 필드라 배경이 없는 디자인인데 그 칸만 상자처럼 보였다.
 *
 * 🔴 `background` 로는 못 지운다 — 저쪽이 사용자 스타일보다 **뒤에** 칠한다. 안쪽
 *    그림자로 덮는 것이 유일한 길이고, 그러면 글자색도 함께 덮이므로
 *    `-webkit-text-fill-color` 로 되돌린다 (`color` 는 안 먹는다).
 * ⚠️ `transition` 을 길게 줘서 늦추는 우회법이 흔한데 **지연될 뿐 결국 칠해진다.**
 * ⚠️ `:hover` · `:focus` · `:active` 를 함께 적는다 — 상태가 바뀌면 도로 칠한다.
 * 🚫 태그 선택자로 건 것은 «전체» 라는 지시대로다. 자동완성이 붙는 칸은 밑줄형 필드만이
 *    아니라 로그인 · 가입 · 찾기 화면에도 있다.
 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--color-text-primary);
	caret-color: var(--color-text-primary);
	box-shadow: inset 0 0 0 1000px var(--color-bg-surface-default);
}

/* State=Focus — 밑줄 색만 border/focus로 바뀐다. glow·ring 없음 */
.ip:focus,
.txa:focus,
.ip_wr:focus-within {
	border-bottom-color: var(--color-border-focus);
	outline: 0;
}

.txa {
	min-height: 120px;
	padding: var(--space-md) var(--space-lg);
	resize: none;
}

/* State=Error */
.fld.is_error .ip,
.fld.is_error .txa,
.ip.is_error,
.txa.is_error {
	border-bottom-color: var(--color-border-danger-default);
}

/* 필드 안쪽 보조 버튼 (인증번호 요청 등) — 32 pill outline */
.ip_btn {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	height: var(--size-control-sm);
	padding: 0 var(--space-md);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-brand);
	background: var(--color-bg-surface-default);
	border: var(--border-width-thin) solid var(--color-border-brand-default);
	border-radius: var(--radius-full);
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* 필드 + 우측 버튼/아이콘을 한 줄에 담는 래퍼 */
.ip_wr {
	display: flex;
	gap: var(--space-sm);
	align-items: center;
	width: 100%;
	height: var(--size-control-default);
	padding: 0 var(--space-lg);
	background: var(--color-bg-surface-default);
	border-bottom: var(--border-width-thin) solid var(--color-border-default);
	transition: border-color 0.2s ease;
}

.ip_wr .ip {
	flex: 1 1 auto;
	min-width: 0; /* 좁은 폭에서 input 고유 폭(≈20ch)이 래퍼를 밀어내지 않게 (notice 375 검수에서 발견) */
	height: auto;
	padding: 0;
	border-bottom: 0;
}

/* read only는 디자인상 disabled와 동일 취급 (사용자 결정 2026-08-14) — 포커스는 받으므로 밑줄 색 변화만 억제 */
.ip:disabled,
.txa:disabled,
.ip[readonly],
.txa[readonly],
.ip_wr:has(.ip:disabled),
.ip_wr:has(.ip[readonly]) {
	color: var(--color-text-disabled);
	background: var(--color-bg-disabled);
	border-bottom-color: var(--color-border-disabled);
}

/* 비활성 입력 줄 **안의** 버튼은 면을 되돌린다 (2026-09-02 사용자 지적 —
   *"disabled될때 버튼까지같이 덮히면서 문구만 붕뜨는데"*).

   `.ip_wr:has(.ip:disabled)` 가 줄 전체를 회색으로 채우는데, 그 안의 `.btn:disabled`
   도 **같은 회색**(`--color-bg-disabled`)에 테두리가 `transparent` 라 버튼이 배경에
   녹아 글자만 떠 보였다. 버튼인지 알 수 없으면 «왜 안 눌리지» 가 된다.

   흰 면과 테두리를 되살려 **모양은 버튼, 색은 비활성**으로 읽히게 한다. 글자도 한 단계
   짙게 둔다 — 흰 바탕에서는 `--color-text-disabled` 가 너무 옅다. */
.ip_wr:has(.ip:disabled) .btn:disabled,
.ip_wr:has(.ip:disabled) .btn.is_disabled,
.ip_wr:has(.ip[readonly]) .btn:disabled,
.ip_wr:has(.ip[readonly]) .btn.is_disabled {
	color: var(--color-text-quinary);
	background: var(--color-bg-surface-default);
	border-color: var(--color-border-disabled);
}

.fld_msg {
	font-size: var(--font-size-md);
	line-height: 1.6;
	color: var(--color-text-quaternary);
}

.fld_msg.is_error {
	color: var(--color-text-danger);
}

/* 중복확인 통과 안내 — text/brand (2026-09-03 발주사 지적).
   규칙 자체가 없어서 `.is_success` 를 붙여도 기본 회색(quaternary)으로 나왔다 */
.fld_msg.is_success {
	color: var(--color-text-brand);
}

/* 로그인 화면 — 이미 로그인돼 있을 때의 안내 (B-1).
   튕겨 내지 않고 알려만 준다: 이 화면에 온 사람은 다른 계정으로 들어오려는 것이다
   (`(site)/login/page.tsx` 머리 주석 · 2026-09-01 사용자 지적). */
.auth_signed_in {
	margin-bottom: var(--space-lg);
	padding: var(--space-md) var(--space-lg);
	background: var(--color-bg-surface-subtle);
	border-radius: var(--radius-lg);
	text-align: center;
}

.auth_signed_in .txt_lnk {
	font-size: inherit;
	text-decoration: underline;
}

/* 인라인 텍스트 링크 — Body/lg 16 Regular · text/tertiary. 폼 하단 보조 이동 링크 */
.txt_lnk {
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-text-tertiary);
}

/* 여러 개 나열 — 구분자 1px 세로 라인 20, 간격 12 */
.txt_lnk_wrap {
	display: flex;
	gap: var(--space-md);
	align-items: center;
	justify-content: center;
}

.txt_lnk_wrap .divider {
	width: 1px;
	height: 20px;
	background: var(--color-border-default);
}

/* 검색 컨트롤 — scope 셀렉트 120 + 검색어 필드(최대 375) + 검색 버튼, gap 12 */
.search_wrap {
	display: flex;
	gap: var(--space-md);
	align-items: center;
	justify-content: center;
}

.search_wrap .ip_wr {
	height: var(--size-control-lg);
}

.search_wrap .ip {
	font-size: var(--font-size-xl);
}

.search_wrap .scope {
	flex: 0 0 120px;
}

.search_wrap .scope .ico {
	color: var(--color-text-primary);
}

/* scope는 네이티브 select — 기본 화살표를 지우고 .ip_wr의 chevron 아이콘을 쓴다.
   select가 래퍼를 꽉 채우는 일반 흐름(flex 1·height 100%) — 필드 어디를 눌러도 옵션이 열린다.
   (이전 절대배치 inset:0은 네이티브 팝업 위치 계산에 불리해 제거, 2026-08-27 §4-70-5) */
.search_wrap .scope .ip_wr {
	position: relative;
	padding: 0;
}

.search_wrap .scope select.ip {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	height: 100%;
	padding: 0 var(--space-4xl) 0 var(--space-lg);
	appearance: none;
	cursor: pointer;
}

.search_wrap .scope .ico {
	position: absolute;
	top: 50%;
	right: var(--space-lg);
	pointer-events: none;
	transform: translateY(-50%);
}

.search_wrap .keyword {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 375px;
}

.search_wrap .keyword .ico {
	color: var(--color-text-quinary);
}

.search_wrap .ico {
	flex: 0 0 auto;
	width: var(--size-icon-lg);
	height: var(--size-icon-lg);
}

/* 클리어 버튼 — 값이 있을 때만 노출(design.js가 토글). 32 원형 + x 16, 히트 44 */
.ip_clear {
	position: relative;
	display: none;
	flex: 0 0 32px;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: var(--color-text-quaternary);
	background: var(--color-bg-neutral-default);
	border-radius: var(--radius-full);
}

.ip_clear::before {
	position: absolute;
	inset: -6px;
	content: "";
}

.ip_clear.is_show {
	display: inline-flex;
}

.ip_clear .ico {
	width: var(--size-icon-sm);
	height: var(--size-icon-sm);
}

/* 네이티브 검색 클리어와 중복 방지 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
	appearance: none;
}

/* 검색어 안 돋보기 = 검색 실행 버튼(submit). PC는 [검색] 버튼과 병존, 768 이하는 이것만 남는다 */
.search_wrap .ip_search_btn {
	color: var(--color-text-quinary);
}

.search_wrap .ip_search_btn::before {
	position: absolute;
	inset: -10px;
	content: "";
}

/* 768 이하 — 한 줄 유지: 범위 96 + 검색어(나머지), [검색] 버튼 숨김 → 돋보기·Enter로 검색
   (Figma Search_wrap "Show Button 끄면 엔터 전용" 변형 · 2단 스택은 사용자 반려 2026-08-27) */
@media (max-width: 768px) {
	.search_wrap > .btn {
		display: none;
	}

	.search_wrap .scope {
		flex: 0 0 96px;
	}

	.search_wrap .scope select.ip {
		padding-right: var(--space-3xl);
	}

	.search_wrap .scope .ico {
		right: var(--space-md);
	}

	.search_wrap .keyword {
		flex: 1 1 0;
		max-width: none;
	}
}

/* 이미지 첨부 타일 104 정사각 */
.img_up {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	align-items: center;
	justify-content: center;
	width: 104px;
	height: 104px;
	padding: var(--space-md);
	font-size: var(--font-size-xl);
	color: var(--color-text-quinary);
	background: var(--color-bg-surface-default);
	border: var(--border-width-thin) solid var(--color-border-default);
	border-radius: var(--radius-lg);
}

.img_up_list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
}

/* 업로드 후 — 이미지 채움(패딩 4) + 우상단 32 원형 삭제 버튼 */
.img_up.is_filled {
	padding: var(--space-xs);
	/* 🔴 배경 크기 · 위치를 지정한다 (2026-09-03 발주사 지적 — *"이미지 썸네일이 많이
	   확대되어 보입니다! background-size: cover 적용 부탁드립니다"*).
	   지정이 없으면 기본값이 `auto auto` / `0% 0%` / `repeat` 이라 3000px 사진이
	   104px 타일에 **원본 배율로 좌상단부터** 깔린다 — 귀퉁이만 확대돼 보인다. */
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.img_up .img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

.img_up_del {
	position: absolute;
	top: var(--space-xs);
	right: var(--space-xs);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: var(--color-text-quaternary);
	background: var(--color-bg-neutral-default);
	border-radius: var(--radius-full);
}

.img_up_del .ico {
	width: var(--size-icon-sm);
	height: var(--size-icon-sm);
}

/* 체크박스 · 라디오 — 컨트롤 24, 라벨 16 Regular */
.chk,
.rdo {
	display: inline-flex;
	gap: var(--space-sm);
	align-items: flex-start; /* 라벨 2줄 이상이면 상단 정렬 — 박스는 margin-top으로 첫 줄 중앙에 맞춰 한 줄일 땐 center와 동일 (사용자 지시 2026-08-27) */
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-text-primary);
	cursor: pointer;
}

.chk input,
.rdo input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.chk .box,
.rdo .box {
	display: flex;
	flex: 0 0 24px;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin-top: calc((1.6em - 24px) / 2); /* 첫 줄(line-height 1.6em) 중앙 — 라벨 폰트 16이면 0.8 · 18이면 2.4 */
	color: transparent;
	background: var(--color-bg-surface-default);
	border: var(--border-width-thin) solid var(--color-border-strong);
	border-radius: var(--radius-sm);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.rdo .box {
	border-radius: var(--radius-full);
}

/* indeterminate = 하위 일부 선택(전체 선택 헤더 전용). 채움 동일, 아이콘만 minus.
   상태는 JS로 지정 — input[data-indeterminate]를 design.js가 켠다 */
.chk input:checked + .box,
.chk input:indeterminate + .box {
	color: var(--color-text-on-brand);
	background: var(--color-bg-brand-default);
	border-color: var(--color-bg-brand-default);
}

.chk .box svg,
.chk .box i {
	width: 16px;
	height: 16px;
}

/* 선택 = 민트 원 채움 + 흰 점 10 (테두리 링 아님) */
.rdo input:checked + .box {
	background: var(--color-bg-brand-default);
	border-color: var(--color-bg-brand-default);
}

.rdo input:checked + .box::after {
	width: 10px;
	height: 10px;
	background: var(--color-bg-surface-default);
	border-radius: var(--radius-full);
	content: '';
}

.chk input:focus-visible + .box,
.rdo input:focus-visible + .box {
	box-shadow: var(--focus-glow);
}

.chk input:disabled + .box,
.rdo input:disabled + .box {
	background: var(--color-bg-disabled);
	border-color: var(--color-border-disabled);
}

.chk input:checked:disabled + .box,
.chk input:indeterminate:disabled + .box {
	color: var(--color-text-disabled);
	background: var(--color-bg-disabled);
	border-color: var(--color-border-disabled);
}

.rdo input:checked:disabled + .box::after {
	background: var(--color-text-disabled);
}

.chk:has(input:disabled),
.rdo:has(input:disabled) {
	color: var(--color-text-disabled);
	cursor: not-allowed;
}

/* 스위치 — 트랙 48×28, 노브 24 */
.swt {
	display: inline-flex;
	gap: var(--space-sm);
	align-items: center;
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-text-primary);
	cursor: pointer;
}

.swt input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.swt .track {
	position: relative;
	flex: 0 0 48px;
	width: 48px;
	height: 28px;
	/* off 트랙은 플랫튼 SVG 실측 #d0d3d6 = gray-300 (시맨틱 배경 토큰 없음) */
	background: var(--gray-300);
	border-radius: var(--radius-full);
	transition: background-color 0.2s ease;
}

.swt .track::after {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 24px;
	height: 24px;
	background: var(--color-bg-surface-default);
	border-radius: var(--radius-full);
	box-shadow: var(--shadow-sm);
	transition: transform 0.2s ease;
	content: '';
}

.swt input:checked + .track {
	background: var(--color-bg-brand-default);
}

.swt input:checked + .track::after {
	transform: translateX(20px);
}

.swt input:disabled + .track {
	background: var(--color-bg-disabled);
}

/* ==========================================================================
   component — card
   ========================================================================== */
/* Style=Outline(기본) · Filled · Elevated / Size = 패딩 체급 sm 16 · md 24 · lg 32 */
.card {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	padding: var(--space-lg);
	background: var(--color-bg-surface-default);
	border: var(--border-width-thin) solid var(--color-border-default);
	border-radius: var(--radius-lg);
}

.card_md {
	padding: var(--space-xl);
	border-radius: var(--radius-xl);
}

.card_lg {
	padding: var(--space-2xl);
	border-radius: var(--radius-xl);
}

.card_filled {
	background: var(--color-bg-neutral-default);
	border-color: transparent;
}

.card_elevated {
	background: var(--color-bg-surface-default);
	border-color: transparent;
	box-shadow: var(--shadow-sm);
}

/* 수강권 배너처럼 크게 쓰는 섹션 카드 (화면 전용, radius 32 + border-subtle) */
.card_banner {
	padding: var(--space-2xl) var(--space-xl);
	background: var(--color-bg-surface-default);
	border: var(--border-width-thin) solid var(--color-border-subtle);
	border-radius: var(--radius-3xl);
}

/* ==========================================================================
   component — empty state
   ========================================================================== */
/* 데이터 0건 안내 블록. Size sm(기본)·md·lg. 액션 버튼은 .btn_primary.btn_outline
   (sm→.btn_sm · md→.btn_md · lg→기본 48) — 기본 꺼짐, 다음 행동이 있을 때만 */
.empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-md);
	padding: var(--space-xl) var(--space-lg);
	text-align: center;
}

.empty .ico_wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	background: var(--color-bg-surface-subtle);
	border-radius: var(--radius-full);
}

.empty .ico_wrap .ico {
	width: var(--size-icon-lg);
	height: var(--size-icon-lg);
	color: var(--color-text-disabled);
}

.empty .txt {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-xs);
	max-width: 240px;
	overflow-wrap: anywhere; /* keep-all 상속 유지, 긴 URL만 강제 분리 (2026-08-26 word-break:break-word 대체) */
}

.empty .tit {
	font-size: var(--font-size-xl);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: var(--font-letter-spacing-normal);
	color: var(--color-text-primary);
}

.empty .desc {
	font-size: var(--font-size-lg);
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: var(--font-letter-spacing-normal);
	color: var(--color-text-quaternary);
}

.empty .btn {
	min-width: 120px;
}

/* Size=md */
.empty_md {
	gap: var(--space-lg);
	padding: var(--space-2xl) var(--space-xl);
}

.empty_md .ico_wrap {
	width: 80px;
	height: 80px;
}

.empty_md .ico_wrap .ico {
	width: 32px;
	height: 32px;
}

.empty_md .txt {
	max-width: 320px;
}

.empty_md .tit,
.empty_lg .tit {
	font-size: var(--font-size-2xl);
	letter-spacing: var(--font-letter-spacing-snug);
}

.empty_md .desc,
.empty_lg .desc {
	font-weight: 400;
	color: var(--color-text-tertiary);
}

/* Size=lg — 페이지 본문 전체가 빈 경우 */
.empty_lg {
	gap: var(--space-xl);
	padding: var(--space-6xl) var(--space-2xl);
}

.empty_lg .ico_wrap {
	width: 88px;
	height: 88px;
}

.empty_lg .ico_wrap .ico {
	width: var(--size-icon-2xl);
	height: var(--size-icon-2xl);
}

.empty_lg .txt {
	max-width: 400px;
}

/* ==========================================================================
   component — avatar
   ========================================================================== */
.avatar {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: var(--size-avatar-md);
	height: var(--size-avatar-md);
	overflow: hidden;
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-inverse);
	background: var(--color-bg-brand-default);
	border-radius: var(--radius-full);
}

.avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.avatar_sm {
	width: var(--size-avatar-sm);
	height: var(--size-avatar-sm);
	font-size: var(--font-size-sm);
}

.avatar_lg {
	width: var(--size-avatar-lg);
	height: var(--size-avatar-lg);
	font-size: var(--font-size-3xl);
}

/* Type=Image · Icon — 브랜드 연배경 */
.avatar_img,
.avatar_ico {
	color: var(--color-text-brand);
	background: var(--color-bg-brand-subtle);
}

/* ==========================================================================
   component — tab
   ========================================================================== */
/* 탭 그룹 — 하단 트랙 보더 + 탭 균등 분할 */
.tabs {
	display: flex;
	align-items: flex-start;
	border-bottom: var(--border-width-thin) solid var(--color-border-default);
}

.tabs > .tab {
	flex: 1;
	min-width: 0;
}

.tab {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	height: var(--size-control-default);
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-semibold);
	line-height: 1.5;
	color: var(--color-text-tertiary);
	transition: color 0.2s ease;
}

.tab .content {
	display: flex;
	flex: 1;
	gap: var(--space-sm);
	align-items: center;
	justify-content: center;
	padding: 0 var(--space-lg);
}

/* Active 표시 밑줄 — 트랙(컨테이너 border) 위에 겹쳐 활성 탭 아래는 민트 한 줄만 보인다.
   Figma 1.5px → 2px: 1.5는 1x 화면에서 안티앨리어싱으로 흐릿·얇게 보임(사용자 지적 2026-08-19, PC 마이페이지 탭) — 모든 탭 공통 */
.tab::after {
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	height: 2px;
	background: transparent;
	content: ''; /* 페이드(transition) 없음 — 페이지 이동 직후 투명→민트로 번지는 0.2s 동안 밑줄이 순간 얇아 보여 버그처럼 보임(사용자 지적 2026-08-26). 글자색 전환만 유지 */
}

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

.tab.is_on::after {
	background: var(--color-bg-brand-default);
}

.tab:disabled,
.tab.is_disabled {
	color: var(--color-text-disabled);
	cursor: not-allowed;
}

.tab.is_on:disabled::after {
	background: var(--color-border-disabled);
}

.tab_md {
	height: var(--size-control-md);
}

.tab_lg {
	height: var(--size-control-lg);
	font-size: var(--font-size-lg);
}

.tab_lg .content {
	padding: 0 var(--space-xl);
}

.tab_xl {
	height: var(--size-control-xl);
	font-size: var(--font-size-xl);
}

.tab_xl .content {
	padding: 0 var(--space-2xl);
}

/* 탭 라벨 우측 카운트 배지 */
.tab .badge {
	height: var(--size-badge-sm);
	padding: 0 var(--space-sm);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-regular);
	color: var(--color-text-on-brand);
	background: var(--color-bg-brand-default);
}

/* ==========================================================================
   component — pagination
   ========================================================================== */
.pgn {
	display: flex;
	gap: var(--space-xs);
	align-items: center;
	justify-content: center;
	max-width: 100%; /* 부모가 align-items:center여도 폭을 넘지 않게 — 375에서 9칸(392)이 넘쳐 가로 스크롤 생김(mypage_alarm·activity) */
}

.pgn > * {
	flex-shrink: 1;
	min-width: 0; /* 좁은 폭에서 40 칸이 줄어들며 한 줄 유지 */
}

.pgn_item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--size-control-md);
	height: var(--size-control-md);
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-semibold);
	line-height: 1.5;
	color: var(--color-text-tertiary);
	border-radius: var(--radius-md);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.pgn_item.is_on,
.pgn_item[aria-current='page'] {
	color: var(--color-text-on-brand);
	background: var(--color-bg-brand-default);
}

.pgn_item:disabled,
.pgn_item.is_disabled {
	color: var(--color-text-disabled);
	cursor: not-allowed;
}

.pgn_ellipsis {
	color: var(--color-text-quaternary);
}

/* 선택 가능한 행 카드 */
.sel_row {
	display: flex;
	gap: var(--space-md);
	align-items: center;
	width: 100%;
	padding: var(--space-lg);
	text-align: left;
	background: var(--color-bg-surface-default);
	border: var(--border-width-thin) solid var(--color-border-default);
	border-radius: var(--radius-lg);
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.sel_row.is_on {
	background: var(--color-bg-brand-subtle);
	border-color: var(--color-border-brand-default);
}

.sel_row .txt {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-xs);
	min-width: 0;
}

/* 체크 아이콘은 모든 행에 넣고 선택 시에만 노출 */
.sel_row .ico {
	display: none;
	flex: 0 0 var(--size-icon-lg);
	width: var(--size-icon-lg);
	height: var(--size-icon-lg);
	color: var(--color-text-brand);
}

.sel_row.is_on .ico {
	display: block;
}

/* 정보 요약 박스 */
.info_box {
	padding: var(--space-lg);
	background: var(--color-bg-surface-subtle);
	border-radius: var(--radius-lg);
}

/* ==========================================================================
   component — alert
   ========================================================================== */
.alert {
	display: flex;
	gap: var(--space-sm);
	align-items: flex-start;
	padding: var(--space-md) var(--space-lg);
	border-radius: var(--radius-md);
}

.alert .ico {
	flex: 0 0 var(--size-icon-md);
	width: var(--size-icon-md);
	height: var(--size-icon-md);
	margin-top: 3px;
}

.alert .tit {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-medium);
	line-height: 1.6;
}

.alert .desc {
	font-size: var(--font-size-md);
	line-height: 1.6;
	color: var(--color-text-tertiary);
}

/* Tone = Danger · Warning · Success · Info · Neutral, Style = Filled(기본) · Plain */
.alert_danger {
	background: var(--color-bg-danger-subtle);
}

.alert_danger .tit,
.alert_danger .ico {
	color: var(--color-text-danger);
}

/* Warning은 이름과 달리 amber가 아니라 secondary 토큰을 쓴다 (346:58 실측) */
.alert_warning {
	background: var(--color-bg-secondary-subtle);
}

.alert_warning .tit,
.alert_warning .ico {
	color: var(--color-bg-secondary-active);
}

.alert_success {
	background: var(--color-bg-success-subtle);
}

.alert_success .tit,
.alert_success .ico {
	color: var(--color-text-success);
}

.alert_info {
	background: var(--color-bg-info-subtle);
}

.alert_info .tit,
.alert_info .ico {
	color: var(--color-text-info);
}

.alert_neutral {
	background: var(--color-bg-surface-subtle);
}

.alert_neutral .tit,
.alert_neutral .ico {
	color: var(--color-text-secondary);
}

/* Style=Plain — 배경 없이 텍스트만 */
.alert_plain {
	padding: 0;
	background: none;
}

/* ==========================================================================
   component — toast
   ========================================================================== */
/* 글래스 표면. 떠 있는 요소 */
.toast {
	display: flex;
	gap: var(--space-md);
	align-items: flex-start;
	width: fit-content; /* 내용에 맞춰 hug */
	max-width: 100%;
	padding: var(--space-lg) var(--space-xl);
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-text-primary);
	background: rgba(255, 255, 255, 0.8);
	border: var(--border-width-thin) solid rgba(240, 245, 245, 0.7);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-md);
	backdrop-filter: blur(20px);
}

.toast .ico {
	flex: 0 0 var(--size-icon-lg);
	width: var(--size-icon-lg);
	height: var(--size-icon-lg);
	margin-top: 1px; /* Figma 26px 박스 중앙 = 첫 줄(lh 25.6)과 정렬 */
}

/* 톤 아이콘 (직계만 — 닫기 버튼 안의 아이콘은 제외) */
.toast_success > .ico { color: var(--color-text-brand); }
.toast_danger > .ico { color: var(--color-text-danger); }
.toast_info > .ico { color: var(--color-text-info); }
.toast_neutral > .ico { color: var(--color-text-tertiary); }

.toast_close { color: var(--color-text-quaternary); }

/* 노출 레이어 — 하단 중앙, 뷰포트 하단 40(space/3xl). **최대 3개 세로 스택**(디자인 E-1 249:10557 실측 — 간격 12 · 먼저 뜬 것이 아래, 최신이 위 → column-reverse),
   각 3.5초 뒤 자동 닫힘 — design.js showToast() 헬퍼가 관리 (사용자 지시 2026-08-26, 그 전엔 동시 1개 교체) */
.toast_layer {
	position: fixed;
	bottom: var(--space-3xl);
	left: 50%;
	z-index: 110;
	display: flex;
	flex-direction: column-reverse;
	gap: var(--space-md);
	align-items: center;
	max-width: calc(100vw - var(--space-2xl));
	transform: translateX(-50%);
}

/* 480 이하 — left:50% 기준 shrink-to-fit이 뷰포트 절반 폭으로 잡혀 토스트가 찌그러짐 → 좌우 20 고정, 토스트는 그 안에서 내용만큼(최대 100%) (사용자 지시 2026-08-26) */
@media (max-width: 480px) {
	.toast_layer {
		right: var(--space-lgx);
		left: var(--space-lgx);
		max-width: none;
		transform: none;
	}
}

/* 등장·퇴장 전환 (사용자 요청 2026-08-26 — 보편적 스낵바 방식: 아래서 12px 올라오며 페이드인 0.28s · 내려가며 페이드아웃 0.2s)
   퇴장 중인 토스트는 자리를 유지한 채 사라지고 제거 시 나머지가 당겨진다 — design.js showToast/closeToast */
.toast_layer > .toast {
	animation: toast_in 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.toast_layer > .toast.is_out {
	pointer-events: none;
	animation: toast_out 0.2s ease-in forwards;
}

@keyframes toast_in {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: none; }
}

@keyframes toast_out {
	from { opacity: 1; transform: none; }
	to { opacity: 0; transform: translateY(12px); }
}

@media (prefers-reduced-motion: reduce) {
	.toast_layer > .toast,
	.toast_layer > .toast.is_out { animation: none; }
}

/* 토스트가 go_top FAB을 가리면 노출 중에는 FAB을 숨긴다 (design.js가 겹침 판정) */
.go_top.is_toast_hide {
	visibility: hidden;
	opacity: 0;
}

/* ==========================================================================
   component — modal
   ========================================================================== */
.dim[hidden] { display: none; }

/* 모달 스크롤 잠금 — html을 현재 스크롤 위치에 고정(top은 design.js가 인라인 지정).
   overflow-y: scroll로 스크롤바 트랙을 유지해 잠글 때 화면 폭이 튀지 않는다 */
html.is_modal_open {
	position: fixed;
	right: 0;
	left: 0;
	width: 100%;
	overflow-y: scroll;
}

/* 화면 D-1a 실측 — bg/overlay 20% + blur/backdrop 24(→ CSS 12) + 패딩 40 */
.dim {
	position: fixed;
	inset: 0;
	/* 🔴 **`inset: 0` 만으로는 모자란다** (2026-09-03 발주사 지적 — *"모바일 인터넷 어플로
	   모달을 띄웠을 때, 하단(또는 상단) 주소창이 올라오면 모달이 상하단 여백 없이 화면에
	   딱 붙는 현상"*).

	   고정 요소의 높이 기준(`inset: 0`)은 **주소창이 숨겨진 상태의 큰 뷰포트**다. 주소창이
	   보이는 동안에는 딤이 그만큼 화면 밖으로 삐져나가고, 가운데 정렬과 `padding` 이
	   **보이지 않는 영역까지 포함해** 계산돼 모달이 화면 가장자리에 붙어 보인다.
	   여백이 사라진 게 아니라 화면 밖에 있는 것이다.

	   `100dvh` 는 **지금 실제로 보이는 높이**라 주소창이 오르내리면 따라 바뀐다.
	   `.mo_menu` 가 2026-09-01 에 같은 이유로 이미 이 처리를 했다 — 딤에도 필요했다. */
	height: 100dvh;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	/* 여백에 **세이프 영역을 더해 둔다** (2026-09-03 발주사 문의 — *"모바일 세이프티
	   영역 때문일 것"*).

	   지금은 이 값이 **0 이다.** `viewport-fit=cover` 를 쓰지 않으므로(Next 기본 뷰포트)
	   브라우저가 이미 노치 · 홈 인디케이터를 비켜서 화면을 잡아 주고, 그때 `env()` 는
	   0 으로 계산된다. 즉 지금 붙는 것도 없고 어긋나지도 않는다.

	   그래도 적어 두는 이유 — 누군가 `viewport-fit=cover` 를 켜는 순간(전체화면 배경을
	   쓰려면 켜게 된다) 딤이 노치 아래로 들어가고 모달이 잘린다. 그때 이 줄이 없으면
	   원인을 다시 찾아야 한다. 기기별 수치를 우리가 알 필요는 없다 — 브라우저가 준다. */
	padding: calc(var(--space-3xl) + env(safe-area-inset-top))
		calc(var(--space-3xl) + env(safe-area-inset-right))
		calc(var(--space-3xl) + env(safe-area-inset-bottom))
		calc(var(--space-3xl) + env(safe-area-inset-left));
	background: rgba(32, 36, 41, 0.2);
	backdrop-filter: blur(12px);
}

@media (max-width: 480px) {
	.dim {
		/* 위 `.dim` 과 같은 규칙 — 세이프 영역을 더한다 (지금 값은 0) */
		padding: calc(var(--space-lgx) + env(safe-area-inset-top))
			calc(var(--space-lgx) + env(safe-area-inset-right))
			calc(var(--space-lgx) + env(safe-area-inset-bottom))
			calc(var(--space-lgx) + env(safe-area-inset-left));
	}
}

/* 열림·닫힘 전환 (사용자 요청 2026-08-26 — 패널이 열릴 때만 스르륵이고 닫힐 땐 뚝 끊겨 어색)
   열림: 딤 페이드 0.2s + 모달 페이드·살짝 위로(8px) 0.24s · 측면 패널·바텀시트는 기존 panel_in·sheet_up 유지
   닫힘: design.js closeModal이 .dim에 .is_closing을 붙이고, 딤 자신의 animationend(0.28s — 자식 out 애니메이션보다 길거나 같게)에 hidden 처리
   → 모달·측면 패널(.lesson_panel .coupon_panel)·바텀시트 각각 열림의 역방향. 닫히는 동안 pointer-events 차단. 감속 모션 설정은 전부 즉시 */
.dim {
	animation: dim_in 0.2s ease-out;
}

.dim > .modal {
	animation: modal_in 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.dim.is_closing {
	pointer-events: none;
	animation: dim_out 0.28s ease-in forwards;
}

.dim.is_closing > .modal {
	animation: modal_out 0.2s ease-in forwards;
}

.dim.is_closing > .lesson_panel,
.dim.is_closing > .coupon_panel {
	animation: panel_out 0.26s ease-in forwards;
}

@keyframes dim_in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes dim_out {
	from { opacity: 1; }
	to { opacity: 0; }
}

@keyframes modal_in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

@keyframes modal_out {
	from { opacity: 1; transform: none; }
	to { opacity: 0; transform: translateY(8px); }
}

@keyframes panel_out {
	from { transform: none; opacity: 1; }
	to { transform: translateX(40px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.dim,
	.dim > .modal,
	.dim.is_closing,
	.dim.is_closing > .modal,
	.dim.is_closing > .lesson_panel,
	.dim.is_closing > .coupon_panel { animation: none; }
}

.modal {
	display: flex;
	flex-direction: column;
	gap: var(--space-lgx);
	width: 100%;
	max-width: 560px;
	/* 🔴 `vh` 가 아니라 `dvh` 다 — 주소창이 보이는 동안 `100vh` 는 화면보다 크다
	   (위 `.dim` 주석 · 2026-09-03 발주사 지적). 다른 패널들은 이미 `dvh` 인데
	   여기만 남아 있었다. */
	max-height: calc(100dvh - 80px);
	padding: var(--space-xl);
	overflow-y: auto;
	background: var(--color-bg-surface-default);
	border-radius: var(--radius-3xl);
	box-shadow: var(--shadow-xl);
}

.modal_sm { max-width: 400px; }

/* lg·xl은 패딩 32 + 타이틀 Heading/md 20 (sm·md는 24 + 18) */
.modal_lg,
.modal_xl {
	padding: var(--space-2xl);
}

.modal_lg { max-width: 720px; }
.modal_xl { max-width: 1184px; }

.modal_lg .modal_hd .tit,
.modal_xl .modal_hd .tit {
	font-size: var(--font-size-2xl);
	letter-spacing: var(--font-letter-spacing-snug);
}

.modal_hd {
	display: flex;
	gap: var(--space-lg);
	align-items: flex-start;
	width: 100%;
}

.modal_hd .tit {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-semibold);
	line-height: 1.4;
	color: var(--color-text-primary);
}

.modal_hd .desc {
	margin-top: var(--space-sm);
	font-size: var(--font-size-md);
	line-height: 1.6;
	color: var(--color-text-tertiary);
}

.modal_close {
	flex-shrink: 0;
	width: var(--size-icon-lg);
	height: var(--size-icon-lg);
	color: var(--color-text-quaternary);
}

/* 24 아이콘 닫기 버튼 공통 히트 영역 44 — 겉보기 크기는 그대로, 터치 타겟만 확보(CLAUDE.md 태블릿 규칙 · 6폭 검수 2026-08-18) */
.modal_close,
.toast_close,
.lesson_panel .lp_close,
.write_files .file_x {
	position: relative;
}

.modal_close::before,
.toast_close::before,
.lesson_panel .lp_close::before,
.write_files .file_x::before {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	content: "";
	transform: translate(-50%, -50%);
}

.modal_close .ico {
	width: 100%;
	height: 100%;
}

.modal_ft {
	display: flex;
	gap: var(--space-sm);
	justify-content: flex-end;
	width: 100%;
}

.modal_ft .btn {
	min-width: 120px;
}

/* sm은 푸터 버튼 풀폭 */
.modal_sm .modal_ft .btn {
	flex: 1;
	min-width: 0;
}

/* 480 이하 — 버튼 2개면 좌우 나란히 균등, 1개면 풀폭 (사용자 확정 2026-08-26: 바텀시트에만 있던 규칙을 모든 모달로 확대. 세로 스택 폐기) */
@media (max-width: 480px) {
	.modal_ft .btn {
		flex: 1;
		width: auto;
		min-width: 0;
	}
}

/* ==========================================================================
   component — meta row
   ========================================================================== */
.meta_row {
	display: flex;
	align-items: center;
	width: 100%;
	padding: var(--space-lgx);
	background: var(--color-bg-canvas);
	border-radius: var(--radius-lg);
}

.meta_row .item {
	padding: 0 var(--space-xl);
	font-size: var(--font-size-lg);
	color: var(--color-text-secondary);
}

.meta_row .item:first-child {
	padding-left: 0;
}

.meta_row .item:last-child {
	padding-right: 0;
}

.meta_row .divider {
	flex: 0 0 1px;
	width: 1px;
	height: 12px;
	background: var(--color-bg-neutral-hover);
}

/* ==========================================================================
   component — progress
   ========================================================================== */
.prog {
	overflow: hidden;
	background: var(--color-bg-canvas);
	border-radius: var(--radius-full);
}

.prog .bar {
	height: 12px;
	background: var(--gradient-brand-bright);
	border-radius: var(--radius-full);
}

/* ==========================================================================
   component — booking calendar
   ========================================================================== */
.cal_day {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	font-size: var(--font-size-smd);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-primary);
	background: var(--color-bg-surface-default);
	border-radius: var(--radius-full);
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.cal_day.is_on {
	color: var(--color-text-on-brand);
	background: var(--color-bg-brand-default);
}

.cal_day:disabled,
.cal_day.is_disabled {
	color: var(--color-text-disabled);
	background: transparent;
	cursor: not-allowed;
}

/* ==========================================================================
   component — header (GNB)
   ========================================================================== */
/* Type=Main(글래스 필 pill 1320) · Sub(풀폭 플랫 h90) · 결제(Sub 바에 로고만).
   글래스 = 흰 70%(Sub는 10%) + blur/backdrop-strong. Figma 블러 40은
   CSS blur(20px)로 환산한다(토스트와 동일 관례) */
.hdr {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 90;
}

/* Main — 컨테이너 안에 떠 있는 pill 바 */
.hdr_main {
	display: flex;
	justify-content: center;
	padding: 52px var(--space-3xl) 0; /* 상단 오프셋 52 — C-1 프레임 실측 (Header y=52) */
}

.hdr_main .hdr_bar {
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 1320px;
	height: 72px;
	padding: var(--space-md);
	background: rgba(255, 255, 255, 0.7);
	border: var(--border-width-thin) solid rgba(240, 245, 245, 0.1);
	border-radius: var(--radius-full);
	box-shadow: var(--shadow-md);
	backdrop-filter: blur(20px);
}

/* Sub · 결제 — 풀폭 플랫 바. 라운드·그림자 없음, 하단 보더 */
.hdr_sub .hdr_bar,
.hdr_pay .hdr_bar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 90px;
	padding: var(--space-md) var(--space-3xl);
	background: rgba(255, 255, 255, 0.1);
	border-bottom: var(--border-width-thin) solid rgba(240, 245, 245, 0.1);
	backdrop-filter: blur(20px); /* 2026-08-19 스크롤 잭 의심으로 제거했다가 무관 확인(제거해도 증상 동일) + 사용자가 블러 유지 원함 → 복원 */
}

.hdr_logo {
	display: flex;
	flex-shrink: 0;
	padding-left: var(--space-xl);
}

.hdr_logo img {
	width: 160px;
	height: 38px;
}

.hdr_sub .hdr_logo,
.hdr_pay .hdr_logo {
	padding-left: 0;
}

/* Sub는 Nav 중앙 정렬 — 로고·액션을 양끝에 절대 배치 */
.hdr_sub .hdr_logo {
	position: absolute;
	left: var(--space-3xl);
}

.hdr_sub .hdr_act {
	position: absolute;
	right: var(--space-3xl);
}

.hdr_nav {
	display: flex;
	gap: var(--space-xl);
	align-items: center;
}

/* Main은 로고 옆 120 간격, 액션은 오른쪽 끝으로 */
.hdr_main .hdr_nav {
	margin-right: auto;
	margin-left: 120px;
}

.hdr_item {
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--size-control-default);
	padding: var(--space-xs) var(--space-md);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-medium);
	line-height: 1.6;
	color: var(--color-text-secondary);
	white-space: nowrap;
	border-radius: var(--radius-full);
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* 현재 페이지(is_on)도 Hover 변형과 동일하게 표시 */
.hdr_item:hover,
.hdr_item.is_on {
	color: var(--color-text-brand);
	background: var(--color-bg-brand-subtle);
}

.hdr_act {
	display: flex;
	flex-shrink: 0;
	gap: var(--space-sm);
	align-items: center;
}

/* Logged In = 알림 버튼 + 아바타, 간격 24 */
.hdr_act.is_user {
	gap: var(--space-xl);
}

/* 알림 버튼 — 벨 32 + 미읽음 점. 히트 영역 44 확보 */
.ntf_btn {
	position: relative;
	display: flex;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	color: var(--color-text-secondary);
}

.ntf_btn::before {
	position: absolute;
	inset: -6px;
	content: "";
}

.ntf_btn .ico {
	width: 100%;
	height: 100%;
}

.ntf_btn .dot {
	position: absolute;
	top: -2px;
	right: -2px;
	width: 8px;
	height: 8px;
	background: var(--color-bg-brand-default);
	border-radius: var(--radius-full);
}

/* 햄버거 — 모바일 전용, 32 아이콘 + 히트 44 */
.hdr_menu {
	position: relative;
	display: none;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	color: var(--color-text-secondary);
}

.hdr_menu::before {
	position: absolute;
	inset: -6px;
	content: "";
}

.hdr_menu .ico {
	width: 100%;
	height: 100%;
}

@media (max-width: 1440px) {
	.hdr_main .hdr_nav {
		margin-left: var(--space-4xl);
	}
}

@media (max-width: 1280px) {
	.hdr_main {
		padding-right: var(--space-2xl);
		padding-left: var(--space-2xl);
	}

	/* 1025~1280: 내용물(로고+메뉴 6+버튼 2)이 바보다 넓어 튀어나가는 구간 — 한 단계 압축 */
	.hdr_main .hdr_logo {
		padding-left: var(--space-lg);
	}

	.hdr_main .hdr_logo img {
		width: 140px;
		height: 33px;
	}

	.hdr_main .hdr_nav {
		margin-left: var(--space-xl);
	}

	.hdr_main .hdr_item {
		padding: var(--space-xs) var(--space-sm);
		font-size: var(--font-size-lg);
	}

	.hdr_main .hdr_act .btn {
		height: var(--size-control-md);
		padding: 0 var(--space-lg);
		font-size: var(--font-size-smd);
	}

	.hdr_sub .hdr_bar,
	.hdr_pay .hdr_bar {
		padding-right: var(--space-2xl);
		padding-left: var(--space-2xl);
	}

	.hdr_sub .hdr_logo { left: var(--space-2xl); }
	.hdr_sub .hdr_act { right: var(--space-2xl); }
}

/* 1024 이하 = 모바일 헤더. Nav·버튼·아바타 숨기고 햄버거 노출 (모바일 Logged In = 벨 + 햄버거) */
@media (max-width: 1024px) {
	.hdr_nav,
	.hdr_act .btn,
	.hdr_act .avatar {
		display: none;
	}

	.hdr_menu {
		display: flex;
	}

	.hdr_act,
	.hdr_act.is_user {
		gap: var(--space-lg);
	}

	.hdr_main {
		padding: var(--space-md) var(--space-lgx) 0; /* 모바일은 기존 오프셋 12 유지 */
	}

	.hdr_main .hdr_bar {
		height: 60px;
		justify-content: space-between;
		padding: var(--space-md) var(--space-xl);
	}

	.hdr_sub .hdr_bar,
	.hdr_pay .hdr_bar {
		height: 60px;
		justify-content: space-between;
		padding: var(--space-md) var(--space-lgx);
	}

	.hdr_pay .hdr_bar {
		justify-content: center;
	}

	.hdr_logo {
		padding-left: 0;
	}

	.hdr_logo img {
		width: 120px;
		height: 29px;
	}

	.hdr_sub .hdr_logo,
	.hdr_sub .hdr_act {
		position: static;
	}
}

/* 480 이하 = 헤더 우측 아이콘(벨·햄버거) 32 → 28 (사용자 지시 2026-08-19). 히트 영역은 44 유지 */
@media (max-width: 480px) {
	.ntf_btn,
	.hdr_menu {
		width: 28px;
		height: 28px;
	}

	.ntf_btn::before,
	.hdr_menu::before {
		inset: -8px;
	}
}

/* ==========================================================================
   component — mobile menu (.mo_menu)
   ========================================================================== */
/* 1024 이하 햄버거(.hdr_menu)로 여는 전체화면 오버레이. Figma 디자인 없음 — 퍼블리싱 판단으로 제작(HANDOFF §4-54).
   흰 배경 · 상단 로고 120 + 닫기 X · 메뉴 행(16 M + chevron, border-b) · 하단 버튼 2개
   (비로그인 = 로그인·회원가입 / 로그인 = 마이페이지·로그아웃, design.js가 헤더 .is_user로 판별).
   z-index는 .dim과 같은 100 — 헤더(90)·go_top(80) 위, 토스트(110) 아래 */
.mo_menu {
	position: fixed;
	inset: 0;
	/* 🔴 **`inset: 0` 만으로는 모자란다** (2026-09-01 사용자 재지적 — *"사이드메뉴 스크롤이
	   안 되는데 이렇게 잘리기만 하고"*).

	   모바일 브라우저에서 고정 요소의 높이 기준(`inset: 0` · `100vh`)은 **주소창이 숨겨진
	   상태의 큰 뷰포트**다. 주소창이 보이는 동안에는 그만큼 아래가 화면 밖으로 나가고,
	   고정 요소라 **스크롤해도 따라오지 않는다** — 하단 버튼(마이페이지·로그아웃)이 영영
	   안 보인다. 안쪽 스크롤도 소용없다. 넘치는 것은 목록이 아니라 상자 자체다.

	   `100dvh` 는 **지금 실제로 보이는 높이**다 (주소창이 오르내리면 따라 바뀐다).
	   ⚠️ 아래 `height` 가 `inset` 의 계산값을 덮는다 — `inset: 0` 은 위치(top/left)를
	      잡는 몫으로 남는다. 지원하지 않는 옛 브라우저는 `inset` 값 그대로 동작한다. */
	height: 100dvh;
	z-index: 100;
	display: none;
	flex-direction: column;
	/* 🔴 바깥은 스크롤하지 않는다 — 스크롤은 메뉴 목록(.mo_nav)이 맡는다.
	   전에는 여기가 overflow-y:auto 였는데, 그러면 화면이 짧을 때 하단 버튼 줄(.mo_ft)이
	   함께 밀려 내려가 **스크롤해야 보였다** (2026-09-01 사용자 지적 · 320×568 재현:
	   내용 646 > 화면 568 → 버튼 bottom 638). 로그아웃·마이페이지가 그 버튼이라
	   «메뉴를 열었는데 나갈 수가 없는» 상태가 된다. */
	overflow: hidden;
	background: var(--color-bg-surface-default);
}

.mo_menu.is_open {
	display: flex;
	animation: mo_menu_in 0.2s ease-out;
}

/* 닫힘 — design.js가 .is_closing을 붙이고 animationend에 .is_open을 뗀다(열림과 같은 0.2s 역방향) */
.mo_menu.is_open.is_closing {
	animation: mo_menu_out 0.2s ease-in forwards;
	pointer-events: none;
}

@keyframes mo_menu_in {
	from { opacity: 0; transform: translateY(-8px); }
	to { opacity: 1; transform: none; }
}

@keyframes mo_menu_out {
	from { opacity: 1; transform: none; }
	to { opacity: 0; transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
	.mo_menu.is_open,
	.mo_menu.is_open.is_closing { animation: none; }
}

/* 상단 — 헤더 모바일 바(60)와 같은 높이·오프셋 12, 좌우 = 컨테이너 여백 */
.mo_hd {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: space-between;
	height: 60px;
	padding: 0 var(--container-pad);
	margin-top: var(--space-md);
}

.mo_logo {
	display: flex;
}

.mo_logo img {
	width: 120px;
	height: 29px;
}

.mo_close {
	position: relative;
	display: flex;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	color: var(--color-text-secondary);
}

.mo_close::before {
	position: absolute;
	inset: -6px;
	content: "";
}

.mo_close .ico {
	width: 100%;
	height: 100%;
}

/* 메뉴 행 — 16 M primary · 행 높이 72(패딩 24) · 하단 보더 · chevron 16 quinary. 현재 페이지 .is_on = link-default */
.mo_nav {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	/* 🔴 `min-height: 0` 이 있어야 줄어든다 — flex 자식의 기본값(auto)은 «내용보다 작아지지
	   않는다» 라서, 이게 없으면 목록이 그대로 버티고 아래 버튼을 밀어낸다 */
	min-height: 0;
	padding: var(--space-lg) var(--container-pad) 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.mo_item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	padding: var(--space-xl) 0;
	font-size: var(--font-size-lg);
	font-weight: 500;
	line-height: 1.5;
	color: var(--color-text-primary);
	border-bottom: var(--border-width-thin) solid var(--color-border-default);
}

.mo_item .ico {
	flex-shrink: 0;
	width: var(--size-icon-sm);
	height: var(--size-icon-sm);
	color: var(--color-text-quinary);
}

.mo_item.is_on {
	color: var(--color-text-link-default);
}

.mo_item.is_on .ico {
	color: currentcolor;
}

/* 하단 — 버튼 2개 등분(48). 로그인/회원가입 또는 마이페이지/로그아웃 중 하나만 노출 */
.mo_ft {
	display: flex;
	flex-shrink: 0;
	gap: var(--space-md);
	padding: var(--space-2xl) var(--container-pad) var(--space-3xl);
	margin-top: auto;
}

.mo_ft[hidden] {
	display: none;
}

.mo_ft .btn {
	flex: 1;
	min-width: 0;
}

@media (max-width: 480px) {
	.mo_ft { gap: var(--space-sm); } /* 모바일은 버튼 사이 8 (사용자 확정) */
}

/* 데스크탑에서는 어떤 경우에도 안 보인다(리사이즈로 넓어지면 design.js가 닫기도 함) */
@media (min-width: 1025px) {
	.mo_menu,
	.mo_menu.is_open { display: none; }
}

/* ==========================================================================
   component — footer
   ========================================================================== */
/* Figma Footer 378:591. 배경은 토큰이 아니라 #6e6e6e 원시값 — 설명문(bg/inverse-strong)과
   달리 컴포넌트·실제 화면(C-1) 모두 이 회색을 쓴다. 컴포넌트 값을 따름 */
.ftr {
	padding: var(--space-5xl) 0 var(--space-3xl);
	color: var(--color-text-inverse);
	background: #6e6e6e;
}

.ftr .container {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xl);
}

.ftr_top {
	display: flex;
	gap: var(--space-6xl);
	align-items: flex-start;
}

.ftr_info {
	display: flex;
	flex: 1;
	gap: var(--space-5xl);
	align-items: flex-start;
	min-width: 0;
}

.ftr_logo {
	flex-shrink: 0;
	width: 220px;
}

.ftr_list {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-xs);
	min-width: 0;
}

.ftr_row {
	display: flex;
	gap: var(--space-sm);
	align-items: flex-start;
	font-size: var(--font-size-lg);
	line-height: 1.6;
}

.ftr_row .lbl {
	flex-shrink: 0;
	width: 150px;
	font-weight: var(--font-weight-medium);
}

.ftr_row .val {
	flex: 1;
	color: rgba(255, 255, 255, 0.75);
	overflow-wrap: anywhere; /* keep-all 상속 유지, 긴 URL만 강제 분리 (2026-08-26 word-break:break-word 대체) */
}

.ftr_legal {
	display: flex;
	flex-shrink: 0;
	gap: var(--space-2xl);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-medium);
	line-height: 1.6;
}

.ftr_legal a {
	color: var(--color-text-inverse);
	white-space: nowrap;
}

.ftr_btm {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: var(--space-2xl);
	border-top: var(--border-width-thin) solid var(--color-border-strong);
}

.ftr_btm .copy {
	font-size: var(--font-size-lg);
	line-height: 1.6;
}

.ftr_sns {
	display: flex;
	gap: var(--space-md);
}

/* 소셜 링크 버튼 — 원형 보더 36 + 아이콘 20. 아이콘 SVG는 currentColor */
.ftr_sns a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	color: var(--color-text-inverse);
	border: var(--border-width-thin) solid var(--color-text-inverse);
	border-radius: var(--radius-full);
}

.ftr_sns a::before {
	position: absolute;
	inset: -4px;
	content: "";
}

.ftr_sns .ico {
	width: 20px;
	height: 20px;
}

/* 모바일 변형 378:592 — 세로 스택, 패딩 상 40 / 하 64(기본형과 상하 반전) */
@media (max-width: 1024px) {
	.ftr {
		padding: var(--space-3xl) 0 var(--space-5xl);
	}

	.ftr .container {
		gap: var(--space-xl);
	}

	.ftr_top {
		flex-direction: column;
		gap: var(--space-xl);
	}

	.ftr_info {
		flex-direction: column;
		gap: var(--space-lgx);
		width: 100%;
	}

	.ftr_logo {
		width: 170px;
	}

	.ftr_list {
		gap: var(--space-2xs);
		width: 100%;
	}

	.ftr_row {
		gap: var(--space-md);
	}

	.ftr_row .lbl {
		width: auto;
		white-space: nowrap;
	}

	.ftr_legal {
		flex-wrap: wrap;
		gap: var(--space-lgx);
	}

	.ftr_btm {
		flex-direction: column;
		gap: var(--space-lgx);
		align-items: flex-start;
		padding-top: var(--space-xl);
	}
}

/* ==========================================================================
   component — sub top · page title · breadcrumb · go top
   ========================================================================== */
/* Sub top 316:211 — 서브페이지 상단 히어로. gradient/hero 배경, 상단 패딩 184는
   고정 GNB(h90) 겹침을 감안한 값. 1440 이하 패딩 축소는 퍼블리싱 판단 */
.sub_top {
	padding: 184px 0 100px;
	background: var(--gradient-hero);
}

.sub_top .container {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xl);
	align-items: center;
	text-align: center;
}

/* Page title 353:224 — 폼 중심 페이지의 제목 블록. Sub top 안에서도 동일 구조 */
.page_tit {
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
	width: 100%;
	text-align: center;
}

.page_tit .tit {
	font-size: var(--font-size-6xl);
	font-weight: var(--font-weight-bold);
	line-height: 1.25;
	color: var(--color-text-primary);
	letter-spacing: var(--font-letter-spacing-tight);
}

.page_tit .desc {
	font-size: var(--font-size-2xl);
	line-height: 1.6;
	color: var(--color-text-tertiary);
}

/* Breadcrumb 275:485 — 항목 15px, 구분자 chevron-right 16(text/quaternary).
   현재 페이지 .is_on = Medium + text/link-default (설명문의 primary·SemiBold와 다름 — 실제 값) */
.brc {
	display: flex;
	gap: var(--space-sm);
	align-items: center;
}

.brc_item {
	display: flex;
	gap: var(--space-sm);
	align-items: center;
	font-size: var(--font-size-md);
	line-height: 1.6;
	color: var(--color-text-tertiary);
	white-space: nowrap;
}

.brc_item .ico {
	width: var(--size-icon-sm);
	height: var(--size-icon-sm);
}

.brc_item.is_on {
	font-weight: var(--font-weight-medium);
	color: var(--color-text-link-default);
}

.brc > .ico {
	flex-shrink: 0;
	width: var(--size-icon-sm);
	height: var(--size-icon-sm);
	color: var(--color-text-quaternary);
}

/* Go top 263:391 — 우하단 고정 FAB 48. 흰 60% + blur + shadow/md.
   오프셋 24는 Figma에 배치 정보가 없어 퍼블리싱 판단 */
.go_top {
	position: fixed;
	right: var(--container-pad); /* 컨테이너 좌우 여백과 항상 동일(40 → 1024:32 → 768:20). C-1 프레임 실측 40과 일치 (기존 24는 임시값) */
	bottom: var(--space-3xl);
	z-index: 80;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--size-control-default);
	height: var(--size-control-default);
	color: var(--color-text-primary);
	background: rgba(255, 255, 255, 0.6);
	border: var(--border-width-thin) solid var(--color-border-default);
	border-radius: var(--radius-full);
	box-shadow: var(--shadow-md);
	backdrop-filter: blur(20px);
}

.go_top .ico {
	width: var(--size-icon-lg);
	height: var(--size-icon-lg);
}

/* 한 화면 이상 내려가면 design.js가 .is_show 토글. 노출 조건은 퍼블리싱 판단 */
.go_top:not(.is_show) {
	visibility: hidden;
	opacity: 0;
}

.go_top {
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

@media (max-width: 1440px) {
	.sub_top {
		padding: 144px 0 var(--space-6xl);
	}
}

@media (max-width: 1024px) {
	.sub_top {
		padding: 120px 0 var(--space-5xl);
	}

	.page_tit .tit {
		font-size: var(--font-size-5xl);
	}
}

@media (max-width: 480px) {
	.sub_top {
		padding: 100px 0 var(--space-4xl);
	}

	.sub_top .container {
		gap: var(--space-xl);
	}

	.page_tit .tit {
		font-size: var(--font-size-3xl);
	}

	.page_tit .desc {
		font-size: var(--font-size-lg);
	}

	.go_top {
		bottom: var(--space-lg);
	}
}

/* ==========================================================================
   component — list row (게시판·공지 목록 행)
   ========================================================================== */
.list_row {
	display: flex;
	align-items: center;
	gap: var(--space-lg);
	width: 100%;
	padding: var(--space-xl) var(--space-md);
	color: inherit;
	text-decoration: none;
	border-bottom: var(--border-width-thin) solid var(--color-border-subtle);
}

.list_row .txt {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-sm);
	min-width: 0;
}

.list_row .tit_line {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	width: 100%;
}

.list_row .tit {
	overflow: hidden;
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-medium);
	line-height: 1.6;
	color: var(--color-text-primary);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.list_row .tit_line .badge {
	flex: none;
}

/* 메타 — 이름 · 날짜 · 댓글/좋아요/조회 수치. 구분점은 마크업의 "·" 텍스트 */
.list_row .meta {
	display: flex;
	flex-wrap: wrap; /* 좁은 폭에서 항목 단위로 줄바꿈 — 닉네임이 세로로 쪼개지지 않게 (board 375 검수) */
	align-items: center;
	gap: var(--space-xs);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-medium);
	line-height: 1.6;
	color: var(--color-text-quaternary);
}

.list_row .meta > span {
	white-space: nowrap;
}

.list_row .meta .ico {
	width: 16px;
	height: 16px;
}

/* 아이콘+숫자 쌍은 한 덩어리로 줄바꿈 (375 검수: 아이콘과 숫자가 다른 줄로 갈라짐) — 목록 행·게시글 상세 메타 공용 */
.list_row .meta .stat,
.post_hd .meta .stat {
	display: inline-flex;
	gap: var(--space-xs);
	align-items: center;
	white-space: nowrap;
}

/* 댓글 행 (내 활동 탭) — corner-down-right 24 + 댓글 본문, 원글 제목은 16 quaternary */
.list_row .tit_line > .ico {
	flex: none;
	width: 24px;
	height: 24px;
	color: var(--color-text-secondary);
}

.list_row .src {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-medium);
	line-height: 1.6;
	color: var(--color-text-quaternary);
}

.list_row .thumb {
	flex: none;
	width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: var(--radius-md);
}

.list_row > .ico {
	flex: none;
	width: 24px;
	height: 24px;
	color: var(--color-text-quinary);
}

/* ==========================================================================
   component — comment (댓글 섹션 · 게시글 상세 하단)
   ========================================================================== */
.cmt_sect {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	width: 100%;
	padding: var(--space-2xl) var(--space-xl);
	border-top: var(--border-width-thin) solid var(--color-border-default);
}

.cmt_sect .cmt_head {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-medium);
	line-height: 1.6;
	color: var(--color-text-secondary);
}

.cmt_sect .cmt_head .count {
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-success);
}

.cmt_item {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	align-items: flex-start;
	width: 100%;
	padding: var(--space-lgx) 0;
}

.cmt_item .meta {
	display: flex;
	gap: var(--space-sm);
	align-items: center;
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-medium);
	line-height: 1.6;
	color: var(--color-text-secondary);
}

.cmt_item .meta .date {
	color: var(--color-text-quinary);
}

.cmt_item .meta .ico {
	width: 16px;
	height: 16px;
	color: var(--color-text-quaternary);
}

.cmt_item .body {
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-text-primary);
	overflow-wrap: anywhere; /* keep-all 상속 유지, 긴 URL만 강제 분리 (2026-08-26 word-break:break-word 대체) */
}

/* 지워졌지만 **답글이 달려 있어 자리만 남은 줄** (2026-09-01 사용자 확정 ⓑ안).
   지운 부모를 통째로 걷어내면 그 아래 답글이 남의 댓글인 척 최상위로 올라오고,
   답글까지 걷어내면 답글 쓴 사람의 글이 소리 없이 사라진다. 자리만 남긴다.
   작성자 · 시각 · [답글] [수정] [삭제] 는 화면이 그리지 않는다 */
.cmt_gone .body {
	color: var(--color-text-quaternary);
	font-style: italic;
}

.cmt_item .actions {
	display: flex;
	gap: var(--space-md);
	align-items: center;
}

/* 답글 — 들여쓰기 40 + surface-subtle 박스 */
.cmt_item.is_reply {
	gap: 0;
	padding: 0 0 var(--space-md) 40px;
}

.cmt_item .box {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	align-items: flex-start;
	width: 100%;
	padding: var(--space-lg) var(--space-lgx);
	background: var(--color-bg-surface-subtle);
	border-radius: var(--radius-md);
}

/* 댓글 입력 — 밑줄 인풋(.ip) + Primary 버튼 조합. gap 10은 Figma 실측값 */
.cmt_form {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	width: 100%;
}

.cmt_form .fld {
	flex: 1;
	min-width: 0;
}

.cmt_form.is_reply {
	padding-left: 40px;
}

/* 답글 입력칸을 감싸는 묶음 — 바로 앞 답글 박스에 딱 붙어 한 덩어리로 읽히던 것을
   띄워 준다 (2026-09-03 사용자 지시).

   🚫 여기 있던 「…님에게 답글」 머리말(`.cmt_reply_label`)은 2026-09-03 발주사 지시로
      삭제했다 — 디자인에 없는 요소였다. 규칙도 함께 지웠다. 다시 넣지 말 것 */
.cmt_reply {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	width: 100%;
	/* 아래 여백만 준다 (2026-09-04 발주사 지시). 위쪽은 앞선 답글이 이미 띄워 준다 */
	padding-bottom: var(--space-lg);
}

/* 댓글 입력은 개행이 가능해야 하므로 인풋이 아니라 textarea(사용자 지시 2026-08-27). 1줄 = 48(인풋·[등록] 버튼과 같은 높이),
   입력에 따라 design.js가 scrollHeight로 자동 확장(최대 약 8줄, 그 뒤 내부 스크롤). Enter = 줄바꿈만, 등록은 [등록] 버튼 클릭으로만 */
.cmt_form .cmt_txa {
	display: block;
	min-height: var(--size-control-default);
	max-height: calc(1.6em * 8 + 22px);
	padding: 11px var(--space-lg);
	overflow-y: auto;
	resize: none;
}

/* 댓글 본문 — 입력한 줄바꿈 그대로 표시 */
.cmt_item .body {
	white-space: pre-line;
}

/* ==========================================================================
   component — like button (게시글 좋아요 토글)
   ========================================================================== */
.like_btn {
	display: inline-flex;
	gap: var(--space-sm);
	align-items: center;
	justify-content: center;
	height: var(--size-control-default);
	padding: 0 var(--space-xl);
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-semibold);
	line-height: 1.5;
	color: var(--color-text-quaternary);
	background: var(--color-bg-surface-default);
	border: var(--border-width-thin) solid var(--color-border-default);
	border-radius: var(--radius-full);
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.like_btn .ico {
	width: 24px;
	height: 24px;
}

.like_btn.is_on {
	color: var(--color-text-secondary-accent);
	border-color: var(--color-border-secondary-default);
}

.like_btn.is_on .ico {
	fill: currentColor;
}

/* ==========================================================================
   component — notification (알림 행 · 드롭다운)
   ========================================================================== */
/* 행 — 목록 컨텍스트(mypage_alarm) 기본. 미읽음 점 6은 첫 줄 중앙에 맞춘다 */
.ntf_row {
	display: flex;
	gap: var(--space-sm);
	align-items: flex-start;
	width: 100%;
	padding: var(--space-md);
	border-bottom: var(--border-width-thin) solid var(--color-border-subtle);
}

.ntf_row .dot {
	flex: none;
	width: 6px;
	height: 6px;
	margin-top: 11px;
	background: var(--color-bg-brand-default);
	border-radius: var(--radius-full);
}

.ntf_row .txt {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-2xs);
	min-width: 0;
}

.ntf_row .tit {
	overflow: hidden;
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-semibold);
	line-height: 1.5;
	color: var(--color-text-primary);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ntf_row .body {
	overflow: hidden;
	font-size: var(--font-size-md);
	line-height: 1.6;
	color: var(--color-text-tertiary);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ntf_row .date {
	font-size: var(--font-size-md);
	line-height: 1.6;
	color: var(--color-text-quaternary);
}

/* 읽음 — 점 자리는 유지하고 투명 처리, 제목은 Regular·secondary */
.ntf_row.is_read .dot {
	background: transparent;
}

.ntf_row.is_read .tit {
	font-weight: var(--font-weight-regular);
	color: var(--color-text-secondary);
}

/* 벨 + 드롭다운 래퍼 — 드롭다운은 벨 아래 우측 정렬. 열고 닫기는 design.js
   (벨 클릭 토글 · 바깥 탭·ESC 닫기 — 태블릿 대응, 호버 의존 없음) */
.ntf_wrap {
	position: relative;
}

.ntf_wrap .ntf_dd {
	position: absolute;
	top: calc(100% + var(--space-sm));
	right: 0;
	z-index: 95;
}

.ntf_wrap .ntf_dd[hidden] {
	display: none;
}

/* 480 이하: 벨 기준 우측 정렬이면 왼쪽이 화면 밖으로 나가서(375 검수) 뷰포트 기준 고정 — 헤더(60) 아래, 좌우 20 */
@media (max-width: 480px) {
	.hdr .ntf_wrap .ntf_dd {
		position: fixed;
		top: calc(60px + var(--space-sm));
		right: var(--space-lgx);
		left: var(--space-lgx);
		width: auto;
		max-width: none;
	}
}

/* 드롭다운 — 360 패널. GNB 벨 버튼 아래 표시 */
.ntf_dd {
	display: flex;
	flex-direction: column;
	width: 360px;
	max-width: calc(100vw - var(--space-2xl));
	overflow: hidden;
	background: var(--color-bg-surface-default);
	border: var(--border-width-thin) solid var(--color-border-subtle);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-smd);
}

.ntf_dd .ntf_hd {
	padding: var(--space-md) var(--space-lg);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-semibold);
	line-height: 1.5;
	color: var(--color-text-primary);
	border-bottom: var(--border-width-thin) solid var(--color-border-subtle);
}

/* 드롭다운 안 행 — 좁은 폭 값으로 축소, 미읽음은 bg brand-subtle */
.ntf_dd .ntf_row {
	padding: var(--space-sm) var(--space-lg);
	background: var(--color-bg-brand-subtle);
}

.ntf_dd .ntf_row.is_read {
	background: transparent;
}

.ntf_dd .ntf_row .dot {
	margin-top: 8px;
}

.ntf_dd .ntf_row .tit {
	font-size: var(--font-size-md);
}

.ntf_dd .ntf_row .body,
.ntf_dd .ntf_row .date {
	font-size: var(--font-size-smd);
}

/* 푸터 — "알림 전체 보기 (+n건)" (+n = 전체 − 노출 3건, 화면 정의서 대조 확정).
   상단 1px border/subtle */
.ntf_dd .ntf_ft {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: var(--space-md) 0;
	font-size: var(--font-size-smd);
	font-weight: var(--font-weight-semibold);
	line-height: 1.5;
	color: var(--color-text-brand);
	border-top: var(--border-width-thin) solid var(--color-border-subtle);
}

/* 알림 없음 — 일러스트 mail-open 40 + 텍스트 (전용 축소형, .empty와 값이 다르다) */
.ntf_dd .ntf_empty {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	align-items: center;
	padding: var(--space-3xl) var(--space-xl);
	text-align: center;
}

.ntf_dd .ntf_empty img {
	width: 40px;
	height: 40px;
}

.ntf_dd .ntf_empty .tit {
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-semibold);
	line-height: 1.5;
	color: var(--color-text-primary);
}

.ntf_dd .ntf_empty .desc {
	margin-top: var(--space-xs);
	font-size: var(--font-size-smd);
	line-height: 1.6;
	color: var(--color-text-tertiary);
}

/* ==========================================================================
   component — segmented toggle (Calendar view toggle 438:58802 · Segmented button 438:58792)
   ========================================================================== */
/* 월/주 등 보기 전환. 트랙 = surface-subtle pill + 패딩 4 · 버튼 = 32 pill · min-w 50 ·
   13 SemiBold quaternary. 활성 .is_on = 흰 배경 + shadow/smd (텍스트 색은 Figma 실측상 동일).
   단일 선택 토글은 design.js */
.seg_toggle {
	display: inline-flex;
	align-items: center;
	padding: var(--space-xs);
	background: var(--color-bg-surface-subtle);
	border-radius: var(--radius-full);
}

.seg_toggle .seg_btn {
	display: inline-flex;
	gap: var(--space-xs);
	align-items: center;
	justify-content: center;
	height: var(--size-control-sm);
	min-width: 50px;
	padding: 0 var(--space-md);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	line-height: 1.5;
	color: var(--color-text-quaternary);
	border-radius: var(--radius-full);
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.seg_toggle .seg_btn.is_on {
	background: var(--color-bg-surface-default);
	box-shadow: var(--shadow-smd);
}

/* ==========================================================================
   component — file list row (373:44677 — D-4 게시글 첨부 파일 행)
   ========================================================================== */
/* 패딩 16/20 · gap 20 · border default · radius 12. 다운로드 아이콘·파일명은 행 전체가 링크,
   삭제 변형(del)은 글쓰기 화면용 */
.file_row {
	display: flex;
	gap: var(--space-lgx);
	align-items: center;
	width: 100%;
	padding: var(--space-lg) var(--space-lgx);
	background: var(--color-bg-surface-default);
	border: var(--border-width-thin) solid var(--color-border-default);
	border-radius: var(--radius-md);
}

.file_row > .ico {
	flex: 0 0 var(--size-icon-md);
	width: var(--size-icon-md);
	height: var(--size-icon-md);
	color: var(--color-text-quaternary);
}

.file_row .name {
	flex: 1;
	min-width: 0;
	overflow-wrap: break-word;
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-text-primary);
}

.file_row .size {
	font-size: var(--font-size-md);
	line-height: 1.6;
	color: var(--color-text-quinary);
	white-space: nowrap;
}

/* 삭제 버튼 — 32 원형 + x 16 quaternary (배경 없음), 히트 44 */
.file_row .file_del {
	position: relative;
	display: inline-flex;
	flex: 0 0 32px;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: var(--color-text-quaternary);
	border-radius: var(--radius-full);
}

.file_row .file_del::before {
	position: absolute;
	inset: -6px;
	content: "";
}

.file_row .file_del .ico {
	width: var(--size-icon-sm);
	height: var(--size-icon-sm);
}

/* ==========================================================================
   component — accordion · faq item (교재 레벨 목록 · FAQ)
   ========================================================================== */
/* Accordion — 행 전체가 토글 버튼. 열림(.is_on) 시 chevron 180° 회전 */
.acc_item {
	width: 100%;
	border-bottom: var(--border-width-thin) solid var(--color-border-default);
}

.acc_item .acc_head {
	display: flex;
	gap: var(--space-sm);
	align-items: center;
	width: 100%;
	padding: var(--space-xl) var(--space-md);
	text-align: left;
	cursor: pointer;
}

.acc_item .acc_head .tit {
	flex: 1;
	min-width: 0;
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-semibold);
	line-height: 1.4;
	letter-spacing: var(--font-letter-spacing-snug);
	color: var(--color-text-primary);
	overflow-wrap: anywhere; /* keep-all 상속 유지, 긴 URL만 강제 분리 (2026-08-26 word-break:break-word 대체) */
}

.acc_item .acc_head .ico {
	flex: none;
	width: 24px;
	height: 24px;
	color: var(--color-text-primary);
	transition: transform 0.2s ease;
}

.acc_item.is_on .acc_head .ico {
	transform: rotate(180deg);
}

/* 본문 — Figma는 On 변형에 본문 프레임이 없다(교재 등 화면별 콘텐츠).
   열고 닫기만 정의: 닫힘 = hidden, 패딩은 화면에서 콘텐츠에 맞춰 준다 */
.acc_item .acc_body {
	padding: 0 var(--space-md) var(--space-xl);
}

.acc_item:not(.is_on) .acc_body {
	display: none;
}

/* FAQ item — Q. 20 SB brand(폭 26 고정) + 질문 + chevron. 답변은 pl 54(=12+26+16)로 질문과 정렬 */
.faq_item {
	width: 100%;
	border-bottom: var(--border-width-thin) solid var(--color-border-default);
}

.faq_item .faq_q {
	display: flex;
	gap: var(--space-lg);
	align-items: center;
	width: 100%;
	padding: var(--space-xl) var(--space-md);
	text-align: left;
	cursor: pointer;
}

.faq_item .faq_q .mark {
	flex: none;
	width: 26px;
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-semibold);
	line-height: 1.4;
	letter-spacing: var(--font-letter-spacing-snug);
	color: var(--color-text-brand);
}

.faq_item .faq_q .tit {
	flex: 1;
	min-width: 0;
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-semibold);
	line-height: 1.4;
	letter-spacing: var(--font-letter-spacing-snug);
	color: var(--color-text-primary);
	overflow-wrap: anywhere; /* keep-all 상속 유지, 긴 URL만 강제 분리 (2026-08-26 word-break:break-word 대체) */
}

.faq_item .faq_q .ico {
	flex: none;
	width: 24px;
	height: 24px;
	color: var(--color-text-primary);
	transition: transform 0.2s ease;
}

.faq_item.is_on .faq_q .ico {
	transform: rotate(180deg);
}

.faq_item .faq_a {
	padding: 0 52px var(--space-xl) 54px;
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-text-secondary);
	overflow-wrap: anywhere; /* keep-all 상속 유지, 긴 URL만 강제 분리 (2026-08-26 word-break:break-word 대체) */
}

.faq_item:not(.is_on) .faq_a {
	display: none;
}

/* ==========================================================================
   component — stepper (신청 진행 4단계 · G-1b~d)
   ========================================================================== */
/* 스텝 120 고정 + 커넥터 flex(2px 바). 기본 = 예정, .is_done / .is_current로 상태 지정.
   지나온 커넥터는 .is_done — 마크업 순서: step, connector, step, ... */
.stepper {
	display: flex;
	align-items: flex-start;
	width: 100%;
}

.stepper .step {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: var(--space-sm);
	align-items: center;
	width: 120px;
}

.stepper .step .circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	line-height: 1.5;
	color: var(--color-text-quaternary);
	background: var(--color-bg-surface-default);
	border: var(--border-width-thin) solid var(--color-border-default);
	border-radius: var(--radius-full);
}

.stepper .step .lbl {
	font-size: var(--font-size-md);
	line-height: 1.6;
	color: var(--color-text-quaternary);
	text-align: center;
	white-space: nowrap;
}

/* 완료 — 원 brand-subtle + 숫자 brand, 라벨 tertiary */
.stepper .step.is_done .circle {
	color: var(--color-text-brand);
	background: var(--color-bg-brand-subtle);
	border: 0;
}

.stepper .step.is_done .lbl {
	color: var(--color-text-tertiary);
}

/* 현재 — 원 brand 채움 + 흰 숫자, 라벨 primary SemiBold */
.stepper .step.is_current .circle {
	color: var(--color-text-on-brand);
	background: var(--color-bg-brand-default);
	border: 0;
}

.stepper .step.is_current .lbl {
	font-weight: var(--font-weight-semibold);
	line-height: 1.5;
	color: var(--color-text-primary);
}

.stepper .connector {
	display: flex;
	flex: 1;
	align-items: center;
	min-width: 1px;
	height: 32px;
}

.stepper .connector::before {
	flex: 1;
	height: 2px;
	content: '';
	background: var(--color-border-default);
}

.stepper .connector.is_done::before {
	background: var(--color-bg-brand-default);
}

/* 480 이하 — 스텝 고정폭 축소, 라벨 14 (Figma는 1920 한 폭뿐, 퍼블리싱 판단) */
@media (max-width: 480px) {
	.stepper .step {
		width: 72px;
	}

	.stepper .step .lbl {
		font-size: var(--font-size-smd);
	}
}

/* 🔴 420 이하 — 고정폭 72 × 4 가 안 들어간다 (2026-09-10 사용자 지적: *"프로그레스
   안내가 오른쪽으로 쏠리고 좀 튀어나간다"*).

   360px 단말 기준 카드 안쪽 폭이 280 안팎인데 스텝만 288 이라 커넥터가 1px 점으로
   눌리고 마지막 「수업 시작」이 오른쪽으로 밀려 잘린다. 여기에 `.lbl` 이 nowrap 이라
   「수업 준비 중」(≈90px)이 제 칸(72px)을 넘어 옆 칸까지 파고든다.

   그래서 이 폭에서는 **고정폭을 버리고 넷이 남는 폭을 똑같이 나눈다.** 라벨은 어절
   단위로만 접는다(`keep-all`) — 「수업 / 준비 중」으로 접히고 낱글자로 쪼개지지 않는다. */
@media (max-width: 420px) {
	.stepper .step {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
	}

	.stepper .step .lbl {
		white-space: normal;
		word-break: keep-all;
	}

	/* 커넥터가 0 으로 눌리면 단계가 붙어 보인다 — 최소 폭을 준다 */
	.stepper .connector {
		flex: 0 0 auto;
		width: 8px;
		min-width: 8px;
	}
}

/* ==========================================================================
   responsive
   ========================================================================== */
@media (max-width: 1440px) {
	.disp_xl { font-size: 44px; }
	.disp_lg { font-size: 34px; }
	.head_xl { font-size: 26px; }
}

@media (max-width: 1024px) {
	:root { --container-pad: var(--space-2xl); }

	.disp_xl { font-size: 36px; }
	.disp_lg { font-size: 30px; }
	.head_xl { font-size: var(--font-size-3xl); }
}

@media (max-width: 768px) {
	:root { --container-pad: var(--space-lgx); }
}

@media (max-width: 480px) {
	/* Figma 모바일(210:3318 등 390 프레임) 실측: 컨테이너 좌우 20 (기존 16은 가정값) — 768 이하 --container-pad 20 그대로 */

	.disp_xl { font-size: var(--font-size-4xl); }
	.disp_lg { font-size: var(--font-size-3xl); }
	.head_xl { font-size: var(--font-size-2xl); }
}

/* ==========================================================================
   page — main (C-1)
   ========================================================================== */
/* 히어로 — gradient/hero 배경 + 주황 글로우(120 원 · #ff9869 45% · blur 115, Figma SVG 실측) */
.main_hero {
	position: relative;
	overflow: hidden;
	padding: 240px 0 140px;
	text-align: center;
	background: var(--gradient-hero);
}

.main_hero::before {
	content: '';
	position: absolute;
	top: 260px;
	left: calc(50% - 300px);
	width: 120px;
	height: 120px;
	background: #ff9869;
	border-radius: var(--radius-full);
	opacity: 0.45;
	filter: blur(115px);
}

.main_hero .tit {
	font-size: var(--font-size-7xl);
	font-weight: var(--font-weight-bold);
	line-height: 1.25;
	letter-spacing: var(--font-letter-spacing-tight);
	color: #0e2b27; /* Figma raw 값 — 토큰 미바인딩 */
}

.main_hero .tit em {
	font-style: normal;
	color: var(--color-text-brand);
}

.main_hero .desc {
	margin-top: var(--space-2xl);
	font-size: var(--font-size-3xl);
	line-height: 1.6;
	color: var(--color-text-tertiary);
}

.main_hero .cta_wrap {
	display: flex;
	justify-content: center;
	gap: var(--space-lg);
	margin-top: var(--space-4xl);
}

.main_hero .cta_wrap .btn_grad {
	box-shadow: var(--shadow-brand);
}

/* 노트북 목업(910) + 글래스 칩 3개 — 칩은 목업 중심 기준 절대배치.
   컨테이너 밖 풀블리드 블록이라 뷰포트 ≈910~990에서 이미지가 화면 끝에 붙음 → 좌우 여백 확보(480 이하는 의도적 흘러넘침이라 해제, 사용자 지적 2026-08-31) */
.main_hero .mockup {
	position: relative;
	margin-top: 140px;
	padding: 0 var(--container-pad);
}

.main_hero .mockup > img {
	width: 910px;
	max-width: 100%;
	margin: 0 auto;
}

.float_chip {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	padding: var(--space-md) var(--space-xl);
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-semibold);
	line-height: 1.5;
	color: var(--color-text-tertiary);
	white-space: nowrap;
	background: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(20px);
	border: 1px solid rgba(240, 245, 245, 0.4);
	border-radius: var(--radius-full);
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
}

.float_chip img {
	width: 28px;
	height: 28px;
	object-fit: contain;
}

.float_chip.pos1 { top: 85px; left: calc(50% - 492px); }
.float_chip.pos2 { top: 306px; left: calc(50% - 420px); }
.float_chip.pos3 { top: 194px; left: calc(50% + 256px); }

/* 480 이하에서만 노출 (모바일 히어로 보조 CTA) */
.mobile_only {
	display: none;
}

@media (max-width: 480px) {
	.mobile_only {
		display: inline-flex;
	}
}

/* 공통 섹션 골격 — 패딩 140, 제목 40 Bold + 설명 20, 헤더 ↔ 본문 48 */
.main_sect {
	padding: 140px 0;
}

.main_sect .sect_hd .tit {
	font-size: var(--font-size-6xl);
	font-weight: var(--font-weight-bold);
	line-height: 1.25;
	letter-spacing: var(--font-letter-spacing-tight);
	color: var(--color-text-primary);
}

.main_sect .sect_hd .desc {
	margin-top: var(--space-lg);
	font-size: var(--font-size-2xl);
	line-height: 1.6;
	color: var(--color-text-tertiary);
}

.main_sect .sect_bd {
	margin-top: var(--space-4xl);
}

/* 스텝 카드 — 2열, radius 32 + border-subtle + 민트 글로우 그림자(Figma 실측 0 0 9) */
.step_grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-xl);
}

.step_card {
	display: flex;
	flex-direction: column;
	padding: var(--space-3xl);
	background: var(--color-bg-surface-default);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-3xl);
	box-shadow: 0 0 9px rgba(71, 208, 190, 0.1);
}

.step_card .num {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-semibold);
	line-height: 1.5;
	color: var(--color-text-brand);
}

.step_card .tit {
	margin-top: var(--space-lg);
	font-size: var(--font-size-4xl);
	font-weight: var(--font-weight-bold);
	line-height: 1.4;
	letter-spacing: var(--font-letter-spacing-snug);
	color: var(--color-text-primary);
}

.step_card .desc {
	margin-top: var(--space-sm);
	font-size: var(--font-size-xl);
	line-height: 1.6;
	color: var(--color-text-tertiary);
}

.step_card .ill {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: flex-end;
	width: 72px;
	height: 72px;
	margin-top: var(--space-xl);
	opacity: 0.6;
}

/* 강사 슬라이더 — 카드 416 고정, 데스크탑은 버튼 이동 · 1024 이하 터치 스크롤 */
.tutor_hd {
	display: flex;
	align-items: flex-end;
	gap: var(--space-2xl);
}

.tutor_hd .sect_hd {
	flex: 1;
	min-width: 0;
}

.tutor_hd .nav {
	display: flex;
	gap: var(--space-sm);
}

/* "모든 선생님 보기" 래퍼 — 480 이하에서 간격 축소를 위해 클래스로 분리 */
.tutor_more {
	display: flex;
	justify-content: center;
	margin-top: var(--space-4xl);
}

/* Figma C-1 실측: 트랙이 컨테이너 기준 -432부터 시작해 화면 양끝에 잘린 카드가 보인다(중앙 풀블리드).
   규칙 = "첫 번째 카드가 컨테이너 좌측 선에서 시작하고, 그 왼쪽에 마지막 카드(루프 클론) 1장이 잘려 보인다"
   → 오프셋 -(카드+gap). 컨테이너가 유동인 1025~1440에서도 첫 카드가 항상 컨테이너 선에 맞는다(사용자 확정).
   슬라이더는 overflow visible로 두고 섹션(.tutor_sect)이 화면 폭에서 클립한다 */
.tutor_sect {
	overflow-x: clip;
}

.tutor_slider {
	margin-top: var(--space-4xl);
}

.tutor_track {
	--tutor-gap: var(--space-lg); /* 터치 모드는 컨테이너 패딩과 같게 올려 시작 위치 왼쪽의 이전 카드를 화면 밖으로 밀어낸다 (아래 1024/768) */
	display: flex;
	gap: var(--tutor-gap);
	margin-left: calc(-1 * (416px + var(--space-lg)));
	transition: transform 0.4s ease;
}

/* 강사 1명 = 루프·오프셋 없이 컨테이너 선에서 시작 (main.html JS가 부여) */
.tutor_track.is_static {
	margin-left: 0;
}

.tutor_card {
	flex: 0 0 416px;
	overflow: hidden;
	background: var(--color-bg-surface-default);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-3xl);
}

.tutor_card .thumb {
	display: block;
	width: 100%;
	aspect-ratio: 302 / 200;
	object-fit: cover;
}

.tutor_card .body {
	padding: var(--space-2xl);
}

/* 사진을 아직 안 올린 선생님 — 카드 · 모달 공용.
   🚫 견본 사진(`sample01.jpg`)을 대신 끼우지 말 것. 실제 사람의 자리라 남의 얼굴이
   그 선생님으로 읽힌다. 자리만 잡고 사람 모양 아이콘을 둔다.

   ⚠️ 선택자를 `.thumb_empty` 한 마디로 두면 **가운데 정렬이 안 먹는다** — 위쪽
   `.tutor_card .thumb`(0,2,0) · `.modal_tutor .tutor_top .thumb`(0,3,0) 의
   `display:block` 이 이겨서 아이콘이 왼쪽 위로 붙는다 (2026-08-31 사용자 지적).
   두 자리를 다 이기도록 같은 깊이로 적는다 */
.tutor_card .thumb.thumb_empty,
.modal_tutor .tutor_top .thumb.thumb_empty {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 302 / 200;
	background: var(--color-bg-surface-muted);
}

.tutor_card .thumb.thumb_empty .ico,
.modal_tutor .tutor_top .thumb.thumb_empty .ico {
	width: 48px;
	height: 48px;
	color: var(--color-text-quaternary);
}

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

.tutor_card .name {
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-semibold);
	line-height: 1.4;
	letter-spacing: var(--font-letter-spacing-snug);
	color: var(--color-text-primary);
}

.tutor_card .desc {
	margin-top: var(--space-md);
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-text-tertiary);
}

/* 강사 카드 클릭 → 상세 모달 (li에 role=button) */
.tutor_card[data-modal-open] { cursor: pointer; }
.tutor_card[data-modal-open]:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }

/* 강사 상세 프로필 모달 — D-1a 실측(282:10977) Modal 560 · 패딩 0 · 본문 내부 스크롤(최대 710) · 푸터 0/24/24
   본문: 이미지 302:200 풀폭 + [소개 영상 보기](좌 20 · 이미지 하단선 걸침 -24, 영상 있을 때만) → 이름 24 SB + Badge brand · 소개 16 R
   → 섹션(아이콘 24 + 라벨 16 SB brand / 본문 16 R, gap 12, 섹션 간 24) → 인사말 박스(brand-subtle, 24/16, radius 4-24-24-24, 한글 primary + 영문 quaternary)
   D-1 선생님 소개 페이지에서 동일 모달 재사용 */
.modal_tutor {
	padding: 0;
	overflow: hidden;
}

/* 본문 내부 스크롤 모달 공용 — .modal > (.modal_hd) + .modal_bd(tabindex=0) + .modal_ft. 헤더·푸터는 고정, 본문만 스크롤.
   스크롤바는 숨김(콘텐츠 폭 유지, 휠·터치·키보드로 스크롤). 하단 64px 흰 그라디언트(.modal_ft::before)로 아래 내용이 더 있음을 알리고,
   design.js가 스크롤이 끝에 닿거나 스크롤할 게 없으면 .modal에 .is_scroll_end → 페이드아웃 */
/* 헤더·푸터는 줄어들지 않고 본문(.modal_bd)만 남은 높이 안에서 스크롤. .modal_bd가 있는 모달은 모달 자체 스크롤을 끈다(헤더·푸터 고정 — 사용자 지시 2026-08-26 전 모달 점검) */
.modal_hd,
.modal_ft {
	flex-shrink: 0;
}

.modal:has(> .modal_bd) {
	overflow: hidden;
}

.modal_bd {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	scrollbar-width: none;
}

/* 본문 안 블록이 여럿일 때 세로 스택(모달 gap 20과 동일) — 회원 탈퇴(G-8a) 등 */
.modal_bd_stack {
	display: flex;
	flex-direction: column;
	gap: var(--space-lgx);
}

.modal_bd::-webkit-scrollbar { display: none; }

.modal_bd ~ .modal_ft {
	position: relative;
}

.modal_bd ~ .modal_ft::before {
	content: '';
	position: absolute;
	right: 0;
	bottom: calc(100% + var(--space-lgx)); /* 본문↔푸터 gap(20) 위 = 본문 하단선 */
	left: 0;
	height: 64px;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
	opacity: 1;
	transition: opacity 0.25s ease;
}

.modal.is_scroll_end .modal_bd ~ .modal_ft::before {
	opacity: 0;
}

/* 스크롤할 것이 아예 없으면 힌트를 그리지 않는다 — 본문이 64px보다 짧으면 그라데이션이
   본문을 통째로 덮는다 (내 활동 G-9 후기 상세 · 사용자 지적 2026-09-01).
   ⚠️ is_scroll_end(끝까지 내렸다)와 다른 뜻이라 클래스를 따로 둔다 (Dim.tsx useScrollEnd) */
.modal:not(.is_scrollable) .modal_bd ~ .modal_ft::before,
.modal:not(.is_scrollable) .modal_bd:last-child::after {
	opacity: 0;
}

/* 푸터 없는 스크롤 모달(후기 상세 D-3a — 푸터 [닫기] 삭제, 2026-08-27)은 본문 안 sticky ::after로 같은 64px 페이드 힌트 */
.modal_bd:last-child::after {
	content: '';
	position: sticky;
	bottom: 0;
	display: block;
	flex: none;
	height: 64px;
	margin-top: -64px;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
	opacity: 1;
	transition: opacity 0.25s ease;
}

.modal_review .modal_bd:last-child::after {
	margin-top: calc(-64px - var(--space-2xl)); /* 본문 flex gap 32 상쇄 */
}

.modal.is_scroll_end .modal_bd:last-child::after {
	opacity: 0;
}

.modal_tutor .modal_bd {
	max-height: 710px; /* D-1a 실측 */
}

.modal_tutor .modal_ft {
	padding: 0 var(--space-xl) var(--space-xl);
}

.modal_tutor .tutor_top {
	position: relative;
}

.modal_tutor .tutor_top .thumb {
	display: block;
	width: 100%;
	aspect-ratio: 302 / 200;
	object-fit: cover;
}

.modal_tutor .video_btn {
	position: absolute;
	top: calc(100% - var(--space-xl));
	left: var(--space-lgx);
	box-shadow: var(--focus-glow);
}

.modal_tutor .video_btn[hidden] { display: none; } /* 소개 영상 없는 선생님 — .btn의 inline-flex보다 우선 */

.modal_tutor .tutor_intro {
	padding: calc(var(--space-2xl) + var(--space-sm)) var(--space-lgx) var(--space-sm);
}

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

.modal_tutor .name {
	font-size: var(--font-size-3xl);
	font-weight: var(--font-weight-semibold);
	line-height: 1.4;
	letter-spacing: var(--font-letter-spacing-snug);
	color: var(--color-text-primary);
}

.modal_tutor .tutor_intro .desc {
	margin-top: var(--space-md);
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-text-primary);
}

.modal_tutor .tutor_info {
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
	padding: var(--space-2xl) var(--space-lgx) 0;
}

.modal_tutor .info_sect .head {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-semibold);
	line-height: 1.5;
	color: var(--color-text-brand);
}

.modal_tutor .info_sect .head .ico {
	width: var(--size-icon-lg);
	height: var(--size-icon-lg);
	flex-shrink: 0;
}

.modal_tutor .info_sect .body {
	margin-top: var(--space-md);
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-text-primary);
}

.modal_tutor .greeting {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	padding: var(--space-lg) var(--space-xl);
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-text-primary);
	background: var(--color-bg-brand-subtle);
	border-radius: var(--radius-xs) var(--radius-2xl) var(--radius-2xl) var(--radius-2xl);
}

.modal_tutor .greeting .en {
	color: var(--color-text-quaternary);
}

/* 480 이하 = 바텀시트 (사용자 요청 2026-08-18) — 딤 하단 정렬·패딩 0, 시트는 풀폭 + 상단만 radius 24 + 아래서 슬라이드업.
   높이는 콘텐츠 따라가되 최대 화면의 92%(dvh) — 본문 .modal_bd가 내부 스크롤, 푸터는 항상 보임 */
@media (max-width: 480px) {
	.dim:has(> .modal_sheet) {
		align-items: flex-end;
		padding: 0;
	}

	.modal_sheet {
		--modal-pad-x: var(--space-lgx); /* 시트 좌우 여백 통일 20 (sm·md 24 / lg 32 → 20, 사용자 지시 2026-08-27). 풀블리드 요소(후기 작성 이미지 타일)는 이 변수로 음수 마진 */
		max-width: none;
		max-height: 92dvh;
		padding: var(--space-xl) var(--modal-pad-x) max(var(--space-lg), env(safe-area-inset-bottom)); /* 하단 16 (사용자 지시 2026-08-27) */
		border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
	}

	.modal_tutor.modal_sheet { padding: 0; } /* 강사 모달은 섹션별 자체 패딩(20) */

	.dim > .modal_sheet { /* 열림 = 슬라이드업 (공통 .dim > .modal의 modal_in보다 특이도 같고 뒤 선언) */
		animation: sheet_up 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
	}

	/* 바텀시트 푸터 좌우 나란히 규칙은 480 공통 .modal_ft로 승격(2026-08-26) — 별도 규칙 없음 */

	@keyframes sheet_up {
		from { transform: translateY(100%); }
		to { transform: none; }
	}

	/* 닫힘 = 아래로 슬라이드다운 (.dim.is_closing > .modal의 modal_out을 덮는다 — 같은 특이도, 뒤에 선언) */
	.dim.is_closing > .modal_sheet {
		animation: sheet_down 0.26s ease-in forwards;
	}

	@keyframes sheet_down {
		from { transform: none; }
		to { transform: translateY(100%); }
	}

	.modal_tutor .modal_bd { max-height: none; }
	.modal_tutor .modal_ft { padding: 0 var(--space-lgx) max(var(--space-lg), env(safe-area-inset-bottom)); }
	.modal_tutor .name { font-size: var(--font-size-2xl); }
}

@media (prefers-reduced-motion: reduce) {
	.dim > .modal_sheet,
	.dim.is_closing > .modal_sheet { animation: none; }
}

/* 후기 카드 클릭 → 상세 모달 */
.review_card[data-modal-open] { cursor: pointer; }
.review_card[data-modal-open]:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }

/* 후기 상세 모달 — D-3a 실측(337:27842) Modal lg 720 · 패딩 32 · gap 20 · 헤더(타이틀 20 + 설명 15 + X) / 본문 gap 32:
   이미지 슬라이더(352:265, radius 24, 좌우 48 원형 Light Outline 버튼 좌우 20 · 이미지 2장 이상일 때만 화살표, 이미지 없으면 블록 없음)
   → 정보(gap 16): [이름 24 SB · 별 5개(24×23, gap 4) · 날짜 16 M quaternary](gap 24) ↔ 우측 Badge Neutral xl / 본문 18 R tertiary → 푸터 닫기.
   D-3 후기 목록 페이지에서 동일 모달 재사용 */
.modal_review .modal_bd {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xl);
}

.img_slider {
	position: relative;
	flex: none; /* .modal_bd(flex column) 안에서 모달 높이가 줄어도 찌그러지지 않고 본문이 스크롤되게 — overflow:hidden 탓에 min-height:auto가 풀려 shrink됐음 (사용자 지적 2026-08-27) */
	overflow: hidden;
	aspect-ratio: 352 / 265;
	border-radius: var(--radius-2xl);
}

.img_slider[hidden] { display: none; }

.img_slider .track {
	display: flex;
	height: 100%;
	transition: transform 0.4s ease;
}

.img_slider .track img {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.img_slider .prev,
.img_slider .next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.img_slider .prev { left: var(--space-lgx); }
.img_slider .next { right: var(--space-lgx); }

.img_slider.is_single .prev,
.img_slider.is_single .next { display: none; }

.modal_review .review_meta {
	display: flex;
	flex-wrap: wrap; /* 좁은 폭(모달 폭이 줄어드는 481~760·모바일)에서 이름이 세로로 쪼개지지 않게 — 항목은 줄바꿈 금지, 행만 감싼다 */
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm) var(--space-lg);
}

.modal_review .review_meta .who {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm) var(--space-xl);
}

.modal_review .review_meta .name,
.modal_review .review_meta .date,
.modal_review .review_meta .badge {
	flex-shrink: 0;
	white-space: nowrap;
}

.modal_review .review_meta .name {
	font-size: var(--font-size-3xl);
	font-weight: var(--font-weight-semibold);
	line-height: 1.4;
	letter-spacing: var(--font-letter-spacing-snug);
	color: var(--color-text-primary);
}

.modal_review .review_meta .date {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-medium);
	line-height: 1.6;
	color: var(--color-text-quaternary);
}

.star_rating {
	display: inline-flex;
	flex-shrink: 0;
	gap: var(--space-xs);
}

.star_rating img {
	width: 24px;
	height: 23px;
}

.modal_review .review_txt {
	margin-top: var(--space-lg);
	font-size: var(--font-size-xl);
	line-height: 1.6;
	color: var(--color-text-tertiary);
}

/* 별점 행 시각 보정 — flex center로 박스 중앙은 맞지만(이름·별·날짜 box 중앙 동일 실측) 글자의 시각 중심은 박스 중앙보다 위, 별은 아래쪽 두 꼭짓점 쪽에 무게가 있어 눈에는 별이 2px쯤 처져 보인다(사용자 지적 2026-08-26) → 별만 2px 올림(480 이하 18px 별은 1px) */
.modal_review .review_meta .star_rating {
	position: relative;
	top: -2px;
}

/* 640 이하(모달 폭 ≤ 576) — 날짜를 작성자 아래 줄로 (사용자 요청 2026-08-18): 1행 이름·별점 / 2행 날짜, 배지는 우측 유지·안 맞으면 다음 줄 */
@media (max-width: 640px) {
	.modal_review .review_meta .who {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: var(--space-xs) var(--space-md);
		align-items: center;
	}

	.modal_review .review_meta .date { grid-column: 1 / -1; }

	/* 날짜가 아래 줄로 내려간 구간은 배지를 이름 행(상단)에 맞춘다 — 2줄 블록 세로 중앙에 두면 배지가 두 줄 사이에 떠 보임(사용자 지적 2026-08-26) */
	.modal_review .review_meta { align-items: flex-start; }
	.modal_review .review_meta .badge { margin-top: 1px; } /* 이름 24×1.4 = 33.6 ↔ 배지 32 세로 중심 맞춤 */
}

@media (max-width: 480px) {
	.modal_review { padding: var(--space-xl) var(--space-lgx) var(--space-lgx); } /* 좌우·하단 20 = 강사 바텀시트 여백과 동일 */
	.modal_review .review_meta .who { gap: var(--space-xs) var(--space-sm); }
	.modal_review .review_meta .name { font-size: var(--font-size-xl); } /* 24 → 18 (사용자 요청) */
	.modal_review .star_rating { gap: 2px; top: -1px; }
	.modal_review .star_rating img { width: 18px; height: 17px; } /* 24×23 → 18×17 */
	.modal_review .review_meta .date { font-size: var(--font-size-md); }
	.modal_review .img_slider { border-radius: var(--radius-lg); } /* 24 → 16 */
	.modal_review .review_txt { font-size: var(--font-size-lg); }
	.img_slider .prev, .img_slider .next { width: 40px; height: 40px; }
	.img_slider .prev { left: var(--space-md); }
	.img_slider .next { right: var(--space-md); }
}

/* 후기 — 좌 헤딩 / 우 카드 스택. 말풍선형 radius(좌하단 0) + 유리 배경 */
.review_sect {
	position: relative;
	overflow: hidden;
	background: linear-gradient(to top, rgba(237, 251, 249, 0.8), rgba(255, 255, 255, 0.8));
}

.review_ghost {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 200px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -4px;
	color: rgba(71, 208, 190, 0.04);
	white-space: nowrap;
	pointer-events: none;
}

.review_grid {
	position: relative;
	display: flex;
	gap: var(--space-6xl);
}

.review_grid > .col {
	flex: 1;
	min-width: 0;
}

.review_grid .sect_hd {
	padding: var(--space-sm) 0 0 var(--space-xs);
}

.review_grid .more_btn {
	margin-top: var(--space-4xl);
}

.review_list {
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
}

.review_card {
	padding: var(--space-2xl);
	background: rgba(255, 255, 255, 0.9);
	/* backdrop-filter: blur(20px) 제거 (2026-08-18) — Figma는 블러가 있지만, 뒤 배경이 거의 흰색(민트 8% 그라디언트+4% 고스트 텍스트)이라 시각 차이가 없고,
	   Chrome에서 창 폭 리사이즈 반복 시 backdrop-filter + transform/opacity 전환(호버·리빌) 조합이 카드 영역을 거대한 흰 사각형으로 남기는 합성 글리치가 재현됐다. 다시 넣지 말 것 */
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-4xl) var(--radius-4xl) var(--radius-4xl) 0;
	box-shadow: 0 0 20px rgba(71, 208, 190, 0.08);
}

.review_card .head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* 내 활동(G-9) 후기 카드 — 수강권 배지 + 승인 상태 배지(승인 대기 neutral · 게시됨 brand), 디자인 477:36576 */
.review_card .head .badges {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	flex-shrink: 0;
}

.review_card .rating {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-medium);
	line-height: 1.6;
	color: var(--color-text-primary);
}

.review_card .rating img {
	width: 24px;
	height: 23px;
}

.review_card .txt {
	margin-top: var(--space-lg);
	font-size: var(--font-size-xl);
	line-height: 1.6;
	color: var(--color-text-tertiary);
}

.review_card .meta {
	display: flex;
	gap: var(--space-xs);
	margin-top: var(--space-md);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-medium);
	line-height: 1.6;
	color: var(--color-text-quaternary);
}

/* 수강권 — 폴더 탭(상단 라운드 32) + 패널(radius 40, 좌상단 0) */
.price_tabs {
	display: flex;
}

.price_tab {
	flex: 1;
	min-width: 0;
	padding: var(--space-xl) var(--space-lg);
	font-size: var(--font-size-3xl);
	font-weight: var(--font-weight-semibold);
	line-height: 1.4;
	letter-spacing: var(--font-letter-spacing-snug);
	color: var(--color-text-tertiary);
	border-radius: var(--radius-3xl) var(--radius-3xl) 0 0;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.price_tab.is_on {
	font-weight: var(--font-weight-bold);
	color: var(--color-text-success);
	background: var(--color-bg-brand-subtle-hover);
}

/* 패널 상단 라운드는 활성 탭 쪽만 0 (폴더 탭 연결) — 첫 탭 패널 좌상단 0, 마지막 탭 패널 우상단 0 */
.price_panel {
	padding: var(--space-xl);
	background: var(--color-bg-brand-subtle-hover);
	border-radius: 0 var(--radius-4xl) var(--radius-4xl) var(--radius-4xl);
}

.price_panel + .price_panel {
	border-radius: var(--radius-4xl) 0 var(--radius-4xl) var(--radius-4xl);
}

.price_grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-lg);
}

.price_card {
	overflow: hidden;
	background: var(--color-bg-surface-default);
	border-radius: var(--radius-3xl);
}

.price_item {
	padding: var(--space-2xl);
}

.price_item + .price_item {
	border-top: 1px solid var(--color-border-subtle);
}

.price_item .name {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-medium);
	line-height: 1.6;
	color: var(--color-text-brand);
}

.price_item .spec {
	margin-top: var(--space-2xs);
	font-size: var(--font-size-3xl);
	font-weight: var(--font-weight-semibold);
	line-height: 1.4;
	letter-spacing: var(--font-letter-spacing-snug);
	color: var(--color-text-secondary);
}

.price_item .origin {
	margin-top: var(--space-xl);
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-text-quinary);
	text-decoration: line-through;
}

.price_item .price {
	margin-top: var(--space-2xs);
	font-size: var(--font-size-4xl);
	font-weight: var(--font-weight-bold);
	line-height: 1.4;
	letter-spacing: var(--font-letter-spacing-snug);
	color: var(--color-text-primary);
}

.price_act {
	display: flex;
	justify-content: center;
	gap: var(--space-md);
	margin-top: var(--space-4xl);
}

/* 준비물 카드 — brand-subtle 섹션 배경 위 2열 */
.prep_grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-xl);
}

.prep_card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: var(--space-3xl);
	background: var(--color-bg-surface-default);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-3xl);
}

.prep_card .ill {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
}

.prep_card .tit {
	margin-top: var(--space-xl);
	font-size: var(--font-size-4xl);
	font-weight: var(--font-weight-bold);
	line-height: 1.4;
	letter-spacing: var(--font-letter-spacing-snug);
	color: var(--color-text-primary);
}

.prep_card .desc {
	margin-top: var(--space-sm);
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-text-tertiary);
}

.prep_card .btn {
	margin-top: var(--space-xl);
}

/* 클로징 — 라디얼 민트 그라디언트(Figma 실측: 중앙 상단 기준 5cd8c9→46c3b4→2fae9e) + 흰 데코 레터 */
.closing_sect {
	position: relative;
	overflow: hidden;
	padding: 140px 0;
	text-align: center;
	background: radial-gradient(1290px 1170px at 50% 262px, #5cd8c9 0%, #46c3b4 50%, #2fae9e 100%);
}

.closing_sect .tit {
	font-size: var(--font-size-7xl);
	font-weight: var(--font-weight-bold);
	line-height: 1.25;
	letter-spacing: var(--font-letter-spacing-tight);
	color: var(--color-text-on-brand);
}

.closing_sect .btn {
	margin-top: var(--space-3xl);
}

.deco_letter {
	position: absolute;
	font-weight: 800;
	line-height: 1;
	color: rgba(255, 255, 255, 0.08);
	pointer-events: none;
	user-select: none;
}

/* --------------------------------------------------------------
   main 인터랙션 — 스크롤 리빌 · 히어로 칩 부유 · 카드 호버 리프트.
   레퍼런스 벤치마크 기반 추가(사용자 요청 2026-08-14). Figma에 모션 정의 없음 — §4-10 성격
   -------------------------------------------------------------- */
/* 스크롤 리빌 — .rv가 뷰포트 진입 시 .is_shown (main.html 인라인 JS, 같은 부모 안에서 0.1s 스태거).
   html.js 게이트: 리빌 스크립트가 실행됐을 때만 숨긴다 — JS 실패 시 콘텐츠가 안 보이는 사고 방지 */
:where(.js) .rv {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

:where(.js) .rv.is_shown {
	opacity: 1;
	transform: none;
}

/* 히어로 글래스 칩 — 느린 부유. 주기·위상을 흩어 자연스럽게 */
@keyframes float_bob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}

.float_chip { animation: float_bob 5s ease-in-out infinite; }
.float_chip.pos2 { animation-duration: 5.8s; animation-delay: -1.9s; }
.float_chip.pos3 { animation-duration: 5.4s; animation-delay: -3.1s; }

/* 카드 호버 리프트 — 포인터 기기 전용. 그림자는 기존 민트 글로우를 한 단계만 강화 */
@media (hover: hover) {
	.step_card,
	.prep_card,
	.tutor_card,
	.review_card,
	.price_card {
		transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease, opacity 0.7s ease;
	}

	.step_card:hover,
	.prep_card:hover,
	.tutor_card:hover {
		transform: translateY(-6px);
		border-color: var(--color-border-brand-subtle);
		box-shadow: 0 0 20px rgba(71, 208, 190, 0.16);
	}

	.review_card:hover {
		transform: translateY(-6px);
		box-shadow: 0 0 24px rgba(71, 208, 190, 0.14);
	}

	.price_card:hover {
		transform: translateY(-4px);
		box-shadow: 0 0 16px rgba(71, 208, 190, 0.25);
	}

	/* 화살표 아이콘 — 버튼 호버 시 진행 방향으로 넛지 */
	.btn:hover .lucide-arrow-right { transform: translateX(3px); }
	.btn:hover .lucide-arrow-up-right { transform: translate(2px, -2px); }
}

.btn .lucide-arrow-right,
.btn .lucide-arrow-up-right {
	transition: transform 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
	.rv {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.float_chip { animation: none; }
}

/* main 반응형 — CLAUDE.md 타이포·섹션 축소 규칙 */
@media (max-width: 1440px) {
	.main_hero { padding: 200px 0 100px; }
	.main_hero .tit { font-size: 44px; }
	.main_hero .desc { font-size: var(--font-size-2xl); }
	.main_hero .mockup { margin-top: 100px; }
	.main_sect { padding: 100px 0; }
	.main_sect .sect_hd .tit { font-size: 34px; }
	.closing_sect { padding: 100px 0; }
	.closing_sect .tit { font-size: 44px; }
	.review_ghost { font-size: 160px; }
	.step_card .tit, .prep_card .tit { font-size: 26px; }
}

@media (max-width: 1280px) {
	.tutor_card { flex-basis: 360px; }
	.tutor_track { margin-left: calc(-1 * (360px + var(--space-lg))); }
}

@media (max-width: 1024px) {
	.main_hero { padding: 160px 0 80px; }
	.main_hero .tit { font-size: 36px; }
	.main_sect { padding: 80px 0; }
	.main_sect .sect_hd .tit { font-size: 30px; }
	.main_sect .sect_bd { margin-top: var(--space-2xl); }
	.float_chip { padding: var(--space-sm) var(--space-lg); font-size: var(--font-size-lg); }
	.float_chip img { width: 24px; height: 24px; }
	.float_chip.pos1 { left: calc(50% - 400px); }
	.float_chip.pos2 { left: calc(50% - 360px); }
	.float_chip.pos3 { left: calc(50% + 180px); }
	/* Figma 모바일: 내비 버튼을 숨기지 않고 헤딩 아래 좌측 배치 (버튼은 스크롤 이동 — main.html JS) */
	.tutor_hd { flex-direction: column; align-items: flex-start; gap: var(--space-xl); }
	/* overflow-y hidden: overflow-x auto만 주면 세로가 암묵적 auto가 되어 리빌(translateY 24) 중 세로 스크롤바가 생긴다.
	   스크롤바는 디자인대로 숨김 — 이동은 버튼·스와이프로 */
	.tutor_slider { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
	.tutor_slider::-webkit-scrollbar { display: none; }
	/* 터치 모드 풀블리드 — 슬라이더가 컨테이너 패딩(32)을 뚫고 화면 끝까지 흐르고,
	   카드 시작·끝 여백은 트랙 패딩으로 컨테이너 선에 맞춘다 (카드가 패딩 선에서 잘리지 않게) */
	.tutor_slider { margin: var(--space-4xl) calc(-1 * var(--space-2xl)) 0; scroll-padding-inline: var(--space-2xl); }
	/* gap = 컨테이너 패딩(32): 양방향 무한루프의 이전 카드(클론)가 시작 위치에서 화면 왼쪽 끝에 딱 붙어 안 보인다 (사용자 확정) */
	.tutor_track { --tutor-gap: var(--space-2xl); padding: 0 0 0 var(--space-2xl); margin-left: 0; transform: none !important; }
	/* 우측 끝 여백 = ::after 스페이서(패딩 값 폭). flex 스크롤 컨테이너의 끝 padding·마지막 항목 margin은
	   브라우저에 따라 스크롤 영역에 안 잡히므로 실제 폭을 가진 스페이서로 만들고, 앞에 붙는 gap은 음수 마진으로 상쇄한다 */
	.tutor_track::after { content: ''; flex: 0 0 var(--space-2xl); margin-left: calc(-1 * var(--tutor-gap)); }
	.tutor_card { scroll-snap-align: start; }
	.review_grid { flex-direction: column; gap: var(--space-2xl); }
	.review_grid .more_btn { margin-top: var(--space-xl); }
	.review_ghost { font-size: 120px; }
	/* 3열이 안 들어가는 폭부터는 아래로 안 떨어트리고 가로 슬라이드(사용자 지적 2026-08-31) — 480 이하 스와이프와 같은 방식, 민트 패널은 유지 */
	.price_grid {
		display: flex;
		gap: var(--space-lg);
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.price_grid::-webkit-scrollbar { display: none; }
	.price_card { flex: 0 0 320px; scroll-snap-align: start; }
	.step_card .tit, .prep_card .tit { font-size: 24px; }
	.closing_sect { padding: 80px 0; }
	.closing_sect .tit { font-size: 36px; }
	.deco_letter { font-size: 90px !important; }
}

@media (max-width: 768px) {
	.step_grid, .prep_grid { grid-template-columns: 1fr; }
	/* 컨테이너 패딩 20에 맞춘 풀블리드 오프셋 */
	.tutor_slider { margin-right: calc(-1 * var(--space-lgx)); margin-left: calc(-1 * var(--space-lgx)); scroll-padding-inline: var(--space-lgx); }
	.tutor_track { --tutor-gap: var(--space-lgx); padding-left: var(--space-lgx); } /* gap = 패딩 20 (Figma 16 → +4, 이전 카드 숨김용) */
	.tutor_track::after { flex-basis: var(--space-lgx); }
	/* .price_grid 1열 스택 폐기 — 1024 이하 가로 슬라이드 유지(사용자 지적 2026-08-31) */
	/* 칩 세로 위치는 고정 px 대신 목업 높이 비례(%) — 이미지가 줄어도 데스크탑 배치(좌상·우중·좌하) 유지 (사용자 지적 2026-08-31) */
	.float_chip.pos1 { top: 15%; left: 16px; }
	.float_chip.pos2 { top: 55%; left: 40px; }
	.float_chip.pos3 { top: 35%; right: 16px; left: auto; }
}

/* 640 이하 — 목업이 중앙 정렬에서 좌측 고정 533 + 우측 흘러넘침(Figma 390 연출)으로 전환 (768~480 사이 새 BP, 사용자 요청 2026-08-31) */
@media (max-width: 640px) {
	.main_hero .mockup { margin-top: 44px; padding: 0; }
	/* 폭 비례 137% = Figma 390 실측(533/390) — 390에서 533과 일치, 640까지 같은 비율로 우측 흘러넘침 */
	.main_hero .mockup > img { width: 137%; max-width: none; margin: 0 0 0 20px; }
	.float_chip { padding: 10px var(--space-lg); font-size: var(--font-size-md); }
	/* 세로는 목업 높이 비례(390 실측 31/118/206 → %) — 이미지가 비례 확대돼도 구도 유지 */
	.float_chip.pos1 { top: 9.5%; left: 20px; }
	.float_chip.pos2 { top: 36%; left: 139px; }
	.float_chip.pos3 { top: 63%; right: auto; left: 50px; }

	/* 수강권 섹션 모바일 디자인 — 480 블록에서 승격(사용자 요청 2026-08-31) */
	.main_sect .sect_bd:has(.price_tabs) { margin-top: var(--space-xl); }
	/* 수강권 탭 — 모바일은 폴더형이 아니라 밑줄 탭 (225:10530 실측: 인디케이터 2px, 활성 text/success Bold) */
	.price_tab {
		padding: var(--space-lg) var(--space-md);
		font-size: var(--font-size-2xl);
		font-weight: var(--font-weight-semibold);
		background: none;
		border-bottom: 2px solid var(--color-border-subtle);
		border-radius: 0;
	}
	.price_tab.is_on {
		background: none;
		border-bottom-color: var(--color-border-brand-default);
	}
	/* 패널 — 모바일은 민트 배경 없이 카드(흰 배경+보더)가 직접 놓이는 320 가로 스와이프 (225:10535 실측) */
	.price_panel,
	.price_panel + .price_panel {
		padding: var(--space-lgx) 0;
		background: none;
		border-radius: 0;
	}
	.price_grid {
		display: flex;
		gap: var(--space-md);
		/* 풀블리드 — 컨테이너 패딩만큼 좌우로 확장해 카드가 화면 끝까지 흐른다(.my_tabs 방식, 사용자 지적 2026-08-31) */
		margin: 0 calc(var(--container-pad) * -1);
		padding: 0 var(--container-pad);
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x proximity;
		scroll-padding: 0 var(--container-pad);
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.price_grid::-webkit-scrollbar { display: none; }
	.price_card {
		flex: 0 0 320px;
		border: var(--border-width-thin) solid var(--color-border-subtle);
		scroll-snap-align: start;
	}
	/* 카드 안 — 패딩 16/20 · 가격 단락 간격 16 · 타이포 한 단계 축소(스펙 20·가격 24·상품명/정가 15 — 서브 페이지 모바일 계층에 맞춤, 사용자 지적 2026-08-31) */
	.price_item { padding: var(--space-lg) var(--space-lgx); }
	.price_item .name { font-size: var(--font-size-md); }
	.price_item .spec { font-size: var(--font-size-2xl); }
	.price_item .origin { margin-top: var(--space-lg); font-size: var(--font-size-md); }
	.price_item .price { font-size: var(--font-size-3xl); }
	/* 패널 하단 20 + 24 = 카드↔버튼 44 (모바일 225:10523 실측 — 데스크탑 48과 다름) */
	.price_act { gap: var(--space-sm); margin-top: var(--space-xl); }
	.price_act .btn { flex: 1; min-width: 0; padding: 0; }
}

/* 480 이하 = Figma 모바일 프레임 210:3318(390) 실측 값 */
@media (max-width: 480px) {
	.main_hero { padding: 150px 0 100px; }
	.main_hero::before { top: 152px; left: 1px; }
	.main_hero .tit { font-size: var(--font-size-5xl); }
	.main_hero .desc { margin-top: var(--space-2xl); font-size: var(--font-size-2xl); }
	.main_hero .cta_wrap { gap: var(--space-sm); margin-top: 36px; }
	/* 히어로 CTA — Figma 390 수정분(2026-08-31): 48·15 → 56·18 = 480 공통 btn_xl 축소와 동일이라 전용 규칙 삭제 (쿠폰 안내 보기는 고객 요청으로 삭제 2026-08-28, 상담 1개)
	   목업 흘러넘침·칩 좌표는 640 블록으로 승격(2026-08-31) */
	.main_sect { padding: 100px 0; }
	.main_sect .sect_hd .tit { font-size: var(--font-size-4xl); }
	.main_sect .sect_hd .desc { font-size: var(--font-size-xl); }
	.main_sect .sect_bd { margin-top: 36px; }
	.main_sect .sect_bd:has(.price_tabs) { margin-top: var(--space-xl); }
	.step_grid { gap: var(--space-md); }
	.prep_grid { gap: var(--space-lg); }
	.step_card, .prep_card { padding: var(--space-xl); }
	.step_card .tit, .prep_card .tit { font-size: 20px; }
	.step_card .desc { font-size: var(--font-size-md); }
	.tutor_card { flex-basis: 280px; }
	.tutor_more { margin-top: 36px; }
	.review_grid { gap: 56px; }
	.review_list { gap: var(--space-lg); }
	.review_card { padding: var(--space-xl); }
	.review_card .txt { font-size: var(--font-size-md); }
	.review_ghost { width: 100%; font-size: 96px; text-align: center; white-space: normal; }
	/* 수강권 섹션 모바일 디자인(밑줄 탭·풀블리드 스와이프 등)은 640 블록으로 승격(사용자 요청 2026-08-31) */
	.closing_sect { padding: 100px 0; }
	.closing_sect .tit { font-size: var(--font-size-5xl); }
	/* 클로징 CTA는 480 공통 btn_xl 축소 예외 — Figma 390 실측(225:11401) 높이 64 유지, 텍스트·패딩은 모바일 변수 모드(2xl 20→18 · 3xl 40→32) */
	.closing_sect .btn {
		height: var(--size-control-xl);
		margin-top: var(--space-2xl);
		padding: 0 var(--space-2xl);
		font-size: var(--font-size-xl);
	}
	/* Figma 모바일: deco-letters 프레임 자체가 hidden */
	.deco_letter { display: none; }
	.go_top { bottom: var(--space-lgx); }
	.hdr_main { padding: var(--space-lgx) 10px 0; }
}

/* ==========================================================================
   page — terms (A-2a 약관 및 정책. 프레임 525:28377 · 528:28549 · 529:28721 실측)
   ========================================================================== */
/* 본문 영역 — 컨테이너 안 좌우 20 들여쓰기. main 하단 패딩 140 */
.terms_main {
	padding-bottom: 140px;
}

.terms_main .tabs {
	margin-bottom: var(--space-2xl);
}

.terms_doc {
	padding: 0 var(--space-lgx);
}

/* 문서 제목 Heading/xl 28 Bold */
.terms_doc .doc_tit {
	font-size: var(--font-size-4xl);
	font-weight: var(--font-weight-bold);
	line-height: 1.4;
	color: var(--color-text-primary);
	letter-spacing: var(--font-letter-spacing-snug);
}

/* ------------------------------------------------------------------
   editor content — 관리자 스마트 에디터 출력물 영역 (Figma 프레임명 "editor-content").
   에디터가 뱉는 원시 태그(h2·p·ol·li·a·img…)에 클래스 없이 스타일이 붙어야 한다.
   약관(A-2a) 외에 공지 상세(C-2)·게시글 본문(D-4)에서도 재사용 예정
   ------------------------------------------------------------------ */
/* 항 번호 ①②③ — Figma 실측 마커. 미지원 브라우저는 decimal로 폴백 */
@counter-style circled_num {
	system: fixed;
	symbols: "①" "②" "③" "④" "⑤" "⑥" "⑦" "⑧" "⑨" "⑩" "⑪" "⑫" "⑬" "⑭" "⑮" "⑯" "⑰" "⑱" "⑲" "⑳";
	suffix: " ";
	fallback: decimal;
}

.editor_content {
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-text-secondary);
	/* 공백 없는 긴 문자열 · URL 도 자른다 — `break-word` 는 min-content 를 못 줄인다 */
	overflow-wrap: anywhere;
}

/* 소제목 — 18 SB primary, 블록 상단 40 · 본문과 12 (Figma block-h2 실측) */
.editor_content h2,
.editor_content h3,
.editor_content h4 {
	margin: var(--space-3xl) 0 var(--space-md);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-semibold);
	line-height: 1.5;
	color: var(--color-text-primary);
}

.editor_content p {
	margin: 0;
}

.editor_content p + p {
	margin-top: var(--space-sm);
}

/* 목록 — 마커 폭 22 + gap 8 = 들여쓰기 30, 항 사이 8 (Figma ol 실측) */
.editor_content ol,
.editor_content ul {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	padding-left: 30px;
	margin: 0;
	list-style: circled_num;
}

.editor_content ul {
	list-style: disc;
}

.editor_content a {
	color: var(--color-text-link-default);
	text-decoration: underline;
}

.editor_content a:hover {
	color: var(--color-text-link-hover);
}

.editor_content strong,
.editor_content b {
	font-weight: var(--font-weight-semibold);
}

/* 에디터 삽입 이미지 — 크기는 에디터가 정한 대로(width/height 속성·인라인 style 존중), 컨테이너보다 크면 폭만 줄임. radius 12는 D-4 본문 이미지 실측 준용.
   에디터마다 <p><img></p> · <figure> · <div align> 등으로 감싸는데 전부 블록 이미지로 취급. 인라인 style="width:50%"·정렬(text-align)은 그대로 살아 있다 */
.editor_content img {
	display: inline-block;
	max-width: 100%;
	height: auto;
	vertical-align: top;
	border-radius: var(--radius-md);
}

/* 이미지만 든 문단(<p><img></p>)·figure는 위아래 16 — 글 문단과 8로 붙지 않게 */
.editor_content figure,
.editor_content p:has(> img:only-child) {
	margin: var(--space-lg) 0;
}

.editor_content figcaption {
	margin-top: var(--space-sm);
	font-size: var(--font-size-smd);
	color: var(--color-text-quinary);
	text-align: center;
}

/* ── 보편 대응(2026-08-27, 에디터 종류 미정 — SmartEditor 2/ONE·CKEditor·TinyMCE·Quill 등이 공통으로 내보내는 클래스 없는 태그 기준) ──
   Tailwind preflight가 기본 스타일을 지우므로 여기서 전부 되살린다. 인라인 style(글자색·크기·정렬·표 폭)은 에디터 값이 이기도록 CSS에서 덮지 않는다 */

/* 제목 1·5·6 — h2~h4와 같은 톤, 크기만 계층 */
.editor_content h1 {
	margin: var(--space-3xl) 0 var(--space-md);
	font-size: var(--font-size-3xl);
	font-weight: var(--font-weight-bold);
	line-height: 1.4;
	color: var(--color-text-primary);
}

.editor_content h5,
.editor_content h6 {
	margin: var(--space-xl) 0 var(--space-sm);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-semibold);
	line-height: 1.5;
	color: var(--color-text-primary);
}

.editor_content > :first-child {
	margin-top: 0;
}

/* 문단 — 에디터의 빈 줄(<p><br></p> · <p>&nbsp;</p>)은 한 줄 높이 그대로 보이게 최소 높이 확보 */
.editor_content p:empty::before,
.editor_content p:has(> br:only-child)::before {
	content: "";
}

.editor_content p {
	min-height: 1.6em;
}

/* 인라인 서식 */
.editor_content em,
.editor_content i {
	font-style: italic;
}

.editor_content u {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.editor_content s,
.editor_content strike,
.editor_content del {
	text-decoration: line-through;
}

.editor_content mark {
	padding: 0 2px;
	background: var(--color-bg-warning-subtle);
}

.editor_content sub,
.editor_content sup {
	font-size: 0.75em;
}

.editor_content code {
	padding: 1px 6px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
	background: var(--color-bg-surface-muted);
	border-radius: var(--radius-xs);
}

.editor_content pre {
	padding: var(--space-lg);
	margin: var(--space-lg) 0;
	overflow-x: auto;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: var(--font-size-smd);
	line-height: 1.6;
	white-space: pre;
	background: var(--color-bg-surface-subtle);
	border: var(--border-width-thin) solid var(--color-border-default);
	border-radius: var(--radius-md);
}

.editor_content pre code {
	padding: 0;
	font-size: inherit;
	background: none;
}

/* 인용 */
.editor_content blockquote {
	padding: var(--space-md) var(--space-lg);
	margin: var(--space-lg) 0;
	color: var(--color-text-tertiary);
	background: var(--color-bg-surface-subtle);
	border-left: 3px solid var(--color-border-brand-default);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.editor_content blockquote p + p {
	margin-top: var(--space-sm);
}

/* 구분선 */
.editor_content hr {
	height: 0;
	margin: var(--space-2xl) 0;
	border: 0;
	border-top: var(--border-width-thin) solid var(--color-border-default);
}

/* 목록 — 블록 사이 간격 + 중첩 목록(안쪽은 마커만 바꾸고 간격 4) */
.editor_content ol,
.editor_content ul {
	margin: var(--space-sm) 0;
}

.editor_content li > ol,
.editor_content li > ul {
	gap: var(--space-xs);
	margin: var(--space-xs) 0 0;
}

.editor_content li > ol {
	list-style: lower-alpha;
}

.editor_content li > ul {
	list-style: circle;
}

/* 표 — 에디터가 준 width·border 속성은 존중하되 셀 선·패딩은 기본 부여. 폭 넘치면 표만 가로 스크롤(768 이하 대비, 페이지 가로 스크롤 금지) */
.editor_content table {
	max-width: 100%;
	/* 🔴 `.tbl_scroll` 래퍼는 **생기지 않는다** — 붙여 주던 `design.js` 가 이 프로젝트에
	   없다(리포 전체에 `tbl_scroll` 을 다는 코드가 없음). 래퍼 없이도 페이지가 안
	   넘치게 표 스스로 폭을 지킨다. 칸이 좁아지면 글자가 접힌다 */
	display: block;
	overflow-x: auto;
	margin: var(--space-lg) 0;
	font-size: var(--font-size-md);
	line-height: 1.5;
	border-collapse: collapse;
	border-spacing: 0;
}

.editor_content th,
.editor_content td {
	padding: var(--space-sm) var(--space-md);
	vertical-align: top;
	border: var(--border-width-thin) solid var(--color-border-default);
}

.editor_content th {
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-primary);
	text-align: left;
	background: var(--color-bg-surface-subtle);
}

.editor_content caption {
	padding-bottom: var(--space-sm);
	font-size: var(--font-size-smd);
	color: var(--color-text-quinary);
	caption-side: top;
}

/* 영상·임베드(유튜브 iframe·video) — 16:9 비율 유지 풀폭. 에디터가 width/height 속성을 줘도 컨테이너를 넘지 않는다 */
.editor_content iframe,
.editor_content video,
.editor_content embed,
.editor_content object {
	display: block;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	margin: var(--space-lg) 0;
	border: 0;
	border-radius: var(--radius-md);
}

.editor_content audio {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: var(--space-lg) 0;
}

/* 표 가로 스크롤 래퍼 — design.js가 로드 시 `.editor_content table`을 `.tbl_scroll`로 감싼다(에디터 출력물엔 래퍼가 없어서). 표 폭이 컨테이너를 넘으면 래퍼만 스크롤, 페이지는 안 넘침 */
.editor_content .tbl_scroll {
	max-width: 100%;
	margin: var(--space-lg) 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.editor_content .tbl_scroll > table {
	margin: 0;
}

/* 오픈소스 라이선스 — 도입문 pt 24 + 행 리스트 (행 py 24, 2행부터 상단 보더 subtle) */
.terms_doc .lic_intro {
	padding-top: var(--space-xl);
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-text-secondary);
}

.lic_list {
	margin-top: var(--space-xl);
}

.lic_row {
	display: flex;
	gap: var(--space-xl);
	align-items: flex-start;
	padding: var(--space-xl) 0;
}

.lic_row + .lic_row {
	border-top: var(--border-width-thin) solid var(--color-border-subtle);
}

.lic_row .txt {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	font-size: var(--font-size-md);
	line-height: 1.6;
}

.lic_row .name {
	font-weight: var(--font-weight-semibold);
	line-height: 1.5;
	color: var(--color-text-primary);
}

.lic_row .copyright {
	overflow-wrap: break-word;
	color: var(--color-text-tertiary);
}

.lic_row .lnk {
	align-self: flex-start;
	color: var(--color-text-link-default);
	text-decoration: underline;
}

.lic_row .lnk:hover {
	color: var(--color-text-link-hover);
}

.lic_row .lic_name {
	font-size: var(--font-size-md);
	line-height: 1.6;
	color: var(--color-text-secondary);
	white-space: nowrap;
}

/* 반응형 — Figma는 1920 한 폭뿐, 이하 퍼블리싱 판단 */
@media (max-width: 1024px) {
	.terms_main {
		padding-bottom: var(--space-6xl);
	}
}

@media (max-width: 768px) {
	.terms_doc {
		padding: 0;
	}

	/* 탭 3개(18px 라벨)가 좁은 폭에서 넘치므로 가로 스크롤 — 풀블리드(좌우 여백 없이 화면 끝까지, 시작 위치는 컨테이너 정렬)·스크롤바 숨김·우측 페이드 힌트 = .my_tabs와 동일 방식 (사용자 지시 2026-08-28) */
	.terms_main .tabs {
		padding: 0 var(--container-pad);
		margin: 0 calc(-1 * var(--container-pad)) var(--space-2xl);
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: none;
	}

	.terms_main .tabs::-webkit-scrollbar { display: none; }

	.terms_main .tabs > .tab::after { bottom: 0; } /* overflow-y hidden이 -1px 밑줄을 잘라먹음 */

	.terms_main .tabs::after {
		position: sticky;
		right: calc(-1 * var(--container-pad));
		flex: 0 0 calc(48px + var(--container-pad));
		align-self: stretch;
		margin-left: calc(-48px - var(--container-pad));
		content: "";
		background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--color-bg-surface-default) 70%);
		opacity: 0;
		transition: opacity 0.2s ease;
		pointer-events: none;
	}

	.terms_main .tabs.is_more::after { opacity: 1; }

	.terms_main .tab {
		flex: 1 0 auto; /* 공간이 남으면(768) 등분, 모자라면(480) 내용 폭으로 넘쳐 스크롤 */
	}

	/* 탭 좌우 패딩 32 → 20 (사용자 지시 2026-08-28) */
	.terms_main .tab_xl .content {
		padding: 0 var(--space-lgx);
	}
}

@media (max-width: 480px) {
	/* 탭 좌우 패딩 20 → 16 · 높이 56 · 라벨 16 (.my_tabs 480과 동일) */
	.terms_main .tab_xl {
		height: var(--size-control-lg);
		font-size: var(--font-size-lg);
	}

	.terms_main .tab_xl .content {
		padding: 0 var(--space-lg);
	}

	.lic_row {
		flex-direction: column;
		gap: var(--space-sm);
	}
}

/* ==========================================================================
   motion — 시스템에서 동작 줄이기를 켠 사용자는 전환 생략
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* ==========================================================================
   page — auth (B 계열 인증 폼) : login · find_id · find_pw · reset_pw · join
   ========================================================================== */

/* 폼 컬럼 600 중앙 — 고정 GNB(90) 겹침 감안 pt 250(=90+160) · pb 240 (B-1 실측) */
.auth_main {
	padding: 250px 0 240px;
}

.auth_main .container {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.auth_wrap {
	display: flex;
	flex-direction: column;
	gap: var(--space-4xl);
	width: 100%;
	max-width: var(--container-compact);
}

.auth_form {
	display: flex;
	flex-direction: column;
	gap: var(--space-3xl);
}

.auth_fields {
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
}

.fld_group {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	width: 100%;
}

.auth_util {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.auth_btns {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	width: 100%;
}

/* 인증 폼 필드는 lg 56 · 텍스트 18 (B-1 실측 — 검색과 동일 체급) */
.auth_wrap .ip_wr {
	height: var(--size-control-lg);
}

.auth_wrap .ip {
	font-size: var(--font-size-xl);
}

/* 필드 우측 아이콘 버튼 (비밀번호 표시 토글 등) — 아이콘 24 · 히트 44 */
.ip_ico_btn {
	position: relative;
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	color: var(--color-text-quaternary);
}

.ip_ico_btn::before {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	content: "";
	transform: translate(-50%, -50%);
}

.ip_ico_btn .ico {
	width: var(--size-icon-lg);
	height: var(--size-icon-lg);
}

/* 반응형 — Figma는 1920 한 폭뿐, 상하 패딩 축소는 퍼블리싱 판단 */
@media (max-width: 1440px) {
	.auth_main {
		padding: 210px 0 160px;
	}
}

@media (max-width: 1024px) {
	.auth_main {
		padding: 140px 0 100px;
	}
}

@media (max-width: 480px) {
	.auth_main {
		padding: 108px 0 80px;
	}

	.auth_util {
		flex-wrap: wrap;
		gap: var(--space-md);
	}
}

/* 전화번호 행 — 국가 번호 150 + 번호 필드, gap 24 (B-2 실측) */
.fld_row {
	display: flex;
	gap: var(--space-xl);
	align-items: flex-start;
	width: 100%;
}

/* 필드 그룹 gap lgx 20 변형 (B-2 실측 — 라벨 있는 폼) */
.fld_group.is_gap_lgx {
	gap: var(--space-lgx);
}

/* 국가 번호 커스텀 드롭다운 — 트리거(.ip_wr 재사용) + 검색 패널 (사용자 요청: 네이티브 select 대체) */
.cc_dd {
	position: relative;
	flex: 0 0 150px;
	width: 150px;
}

.cc_dd .cc_btn {
	cursor: pointer;
}

.cc_panel {
	position: absolute;
	overflow: hidden;
	top: calc(100% + var(--space-sm));
	left: 0;
	z-index: 95;
	width: 280px;
	max-width: calc(100vw - 32px);
	background: var(--color-bg-surface-default);
	border: var(--border-width-thin) solid var(--color-border-subtle);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-smd);
}

.cc_search {
	display: flex;
	gap: var(--space-sm);
	align-items: center;
	padding: var(--space-md) var(--space-lg);
	border-bottom: var(--border-width-thin) solid var(--color-border-subtle);
}

.cc_search .ico {
	flex: 0 0 auto;
	width: var(--size-icon-md);
	height: var(--size-icon-md);
	color: var(--color-text-quinary);
}

.cc_search_ip {
	flex: 1;
	min-width: 0;
	font-size: var(--font-size-md);
	line-height: 1.6;
	color: var(--color-text-primary);
	border: 0;
	outline: 0;
}

.cc_search_ip::placeholder {
	color: var(--color-text-placeholder);
}

.cc_list {
	max-height: 320px;
	padding: var(--space-xs) 0;
	overflow-y: auto;
}

/* 얇은 커스텀 스크롤 — 패널·드롭다운 내부 스크롤 공용. 트랙 투명 + 그레이 pill 썸 */
.thin_scroll {
	scrollbar-color: var(--color-border-strong) transparent; /* Firefox */
	scrollbar-width: thin;
}

.thin_scroll::-webkit-scrollbar {
	width: 10px;
}

.thin_scroll::-webkit-scrollbar-track {
	background: transparent;
}

.thin_scroll::-webkit-scrollbar-thumb {
	background: var(--color-border-strong);
	background-clip: padding-box;
	border: 3px solid transparent; /* 썸을 트랙에서 띄워 pill로 */
	border-radius: var(--radius-full);
}

.thin_scroll::-webkit-scrollbar-thumb:hover {
	background-color: var(--color-bg-neutral-strong);
	background-clip: padding-box;
}

.cc_item {
	display: flex;
	gap: var(--space-sm);
	align-items: center;
	width: 100%;
	padding: var(--space-md) var(--space-lg);
	text-align: left;
	transition: background-color 0.2s ease;
}

.cc_item:hover {
	background: var(--color-bg-surface-hover);
}

.cc_item.is_on {
	background: var(--color-bg-brand-subtle);
}

.cc_item img {
	width: 22px;
	height: 16.5px;
	object-fit: cover;
	border: 0.5px solid rgba(0, 0, 0, 0.1);
	border-radius: 2px;
}

.cc_item .name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-text-primary);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cc_item .code {
	flex: 0 0 auto;
	font-size: var(--font-size-md);
	color: var(--color-text-quinary);
}

.cc_empty {
	padding: var(--space-lg);
	font-size: var(--font-size-md);
	color: var(--color-text-quaternary);
	text-align: center;
}

.fld_row .ip_grow {
	flex: 1;
	min-width: 0;
}

/* 타임존 커스텀 드롭다운 — .cc_dd 변형(국기 없음). 트리거·패널 모두 필드 풀폭, 목록은 UTC 오프셋순 418개(design.js TZ_LIST) */
.tz_dd {
	flex: 1 1 auto;
	width: 100%;
}

.tz_dd .cc_panel {
	width: 100%;
	max-width: none;
}

/* (구) 타임존 네이티브 셀렉트 — 2026-08-26 .tz_dd 커스텀 드롭다운으로 대체돼 페이지에서는 미사용. 검색 scope 패턴 참고용으로 유지. 네이티브 select를 래퍼에 절대배치. 래퍼가 relative여야 하며 빠지면 select가 뷰포트 전체를 덮는다 */
.ip_select_wr {
	position: relative;
}

.ip_select_wr .ip_select {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	font-size: var(--font-size-xl);
	color: transparent;
	appearance: none;
	background: transparent;
	border: 0;
	opacity: 0;
}

.ip_select_wr .ip_select_ico,
.cc_dd .ip_select_ico {
	width: var(--size-icon-lg);
	height: var(--size-icon-lg);
	margin-left: auto;
	color: var(--color-text-primary);
	pointer-events: none;
}

.ip_cc_txt {
	font-size: var(--font-size-xl);
	line-height: 1.6;
	color: var(--color-text-primary);
	pointer-events: none;
}

/* 국기 — 22×16.5 라운드 2 + 옅은 테두리 (Flag/kr 실측, flag-icons 4x3 비율) */
.ip_flag {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	pointer-events: none;
}

.ip_flag img {
	width: 22px;
	height: 16.5px;
	object-fit: cover;
	border: 0.5px solid rgba(0, 0, 0, 0.1);
	border-radius: 2px;
}

/* 인증번호 타이머 — text/brand (2026-09-03 발주사 지적으로 수정) */
.ip_timer {
	flex: 0 0 auto;
	font-size: var(--font-size-md);
	line-height: 1.6;
	color: var(--color-text-brand);
}

/* B-2 미일치 알림 — 본문도 danger (195:7552 실측, Alert 컴포넌트 기본과 다름) */
.auth_wrap .alert_danger .desc {
	color: var(--color-text-danger);
}

/* 결과 카드 (Ticket banner 계열) — 760 · border subtle · radius 32 · 패딩 80/24 (B-2a 실측) */
.auth_wrap_wide {
	max-width: 760px;
}

.result_card {
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
	align-items: center;
	width: 100%;
	padding: var(--space-6xl) var(--space-xl);
	text-align: center;
	background: var(--color-bg-surface-default);
	border: var(--border-width-thin) solid var(--color-border-subtle);
	border-radius: var(--radius-3xl);
}

.result_card .result_ico {
	width: 72px;
	height: 72px;
}

.result_card .result_txt {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	width: 100%;
}

.result_card .tit {
	font-size: var(--font-size-5xl);
	font-weight: var(--font-weight-bold);
	line-height: 1.25;
	color: var(--color-text-primary);
	letter-spacing: var(--font-letter-spacing-tight);
}

.result_card .desc {
	font-size: var(--font-size-2xl);
	line-height: 1.6; /* Body/2xl 20 R (E-1b 279:29032 실측 2026-08-28, 1.4·snug → 1.6·normal) */
	color: var(--color-text-tertiary);
	letter-spacing: var(--font-letter-spacing-normal);
}

.result_card .desc .accent {
	font-weight: var(--font-weight-regular);
	color: var(--color-text-success);
}

.result_card .result_act {
	display: flex;
	gap: var(--space-md);
	justify-content: center;
}

.result_card .result_act .btn {
	min-width: 0; /* 버튼은 내용 폭(px 24) — E-1b 142 · E-2 183 · 접수 안내 132 (실측 2026-08-28, min-width 160 폐기) */
}

/* B 계열 완료 카드(B-2a 238:19362·438:56528 · B-3b 436:55111 · B-5 436:52846)는 버튼 160×48 고정 — E 계열(내용 폭)과 Figma가 다름(2026-08-28 사용자 지적) */
.result_card .result_act_fixed .btn {
	min-width: 160px;
}

@media (max-width: 480px) {
	.fld_row {
		gap: var(--space-md);
	}

	/* 전화 행(국가 번호 + 번호 인풋 + [인증 요청])은 480 이하 두 줄 — 1행 국가 번호 = 이름 2열 한 칸 폭(사용자 요청) · 2행 번호+버튼.
	   한 줄로는 375에서 국가 번호(3자리 코드 116) + 인풋(placeholder 16px ≈ 120) + 버튼 77 + 여백이 335를 넘어 인풋 끝자리가 잘렸음(인증 완료 값도 잘림).
	   기존 100 고정도 chevron이 칸 밖으로 밀리던 문제 — 사용자 확정 2026-08-26 (HANDOFF §4-66). 타임존(.tz_dd)은 원래 풀폭이라 해당 없음 */
	.fld_row:has(> .cc_dd:not(.tz_dd)) {
		flex-wrap: wrap;
		gap: var(--space-lg);
	}

	/* 폭 = 위 이름 2열(.fld_row .fld, gap 12 균등)의 한 칸과 동일 — 좌측 세로선이 맞도록 (사용자 요청) */
	.cc_dd:not(.tz_dd) {
		flex: 0 0 calc(50% - var(--space-md) / 2);
		width: calc(50% - var(--space-md) / 2);
	}

	.fld_row:has(> .cc_dd:not(.tz_dd)) .ip_grow {
		flex: 1 1 100%;
	}

	.fld_row .ip_grow .btn_md {
		padding: 0 var(--space-md);
	}

	/* 480 이하 카드 스타일 제거 — 플랫(상담·결제·글쓰기 카드와 동일, 사용자 지시 2026-08-28) · 설명문 <br> 숨김 = 폭에 맞춰 자연 줄바꿈 */
	.result_card {
		padding: 0;
		background: none;
		border: 0;
		border-radius: 0;
	}

	.result_card .desc br {
		display: none;
	}

	.result_card .tit {
		font-size: var(--font-size-3xl);
	}

	.result_card .desc {
		font-size: var(--font-size-xl);
	}

	.result_card .result_act {
		flex-direction: column;
		width: 100%;
	}
}

/* 비밀번호 조건 체크리스트 (pw-checklist 477:30872 실측) — brand-subtle 박스, 충족 행 .is_ok */
.pw_rules {
	display: flex;
	flex-direction: column;
	gap: 6px; /* Figma 실측값 그대로 (4pt 밖) */
	width: 100%;
	padding: var(--space-lg) var(--space-lgx);
	background: var(--color-bg-brand-subtle);
	border-radius: var(--radius-lg);
}

.pw_rules .rule {
	display: flex;
	gap: 6px;
	align-items: center;
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-text-quaternary);
	transition: color 0.2s ease;
}

.pw_rules .rule .ico {
	width: var(--size-icon-sm);
	height: var(--size-icon-sm);
}

.pw_rules .rule.is_ok {
	color: var(--color-text-brand);
}

/* 회원가입 (B-4 199:12432 · B-4 2 210:2694 실측) — 필드 2열·약관 동의·약관 모달 */

/* 이름 2열 등 필드 나란히 — .fld_row 재사용, .fld는 균등 분배 (실측 gap 24) */
.fld_row .fld {
	flex: 1;
	min-width: 0;
}

/* 약관 동의 블록 — 상단 pt 24 · 전체 동의(18 Medium) 아래 border subtle (209:2659 실측) */
.agree_sect {
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
	width: 100%;
	padding-top: var(--space-xl);
}

.agree_all {
	width: 100%;
	padding-bottom: var(--space-xl);
	border-bottom: var(--border-width-thin) solid var(--color-border-subtle);
}

.agree_all .chk {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-medium);
}

.agree_list {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	width: 100%;
}

.agree_row {
	display: flex;
	gap: var(--space-lg);
	align-items: center;
	width: 100%;
}

.agree_row .chk {
	flex: 1;
	min-width: 0;
}

/* 자세히 보기 — 16 R 밑줄 quaternary (209:2650 실측) */
.agree_more {
	flex: 0 0 auto;
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-text-quaternary);
	text-decoration: underline;
	text-underline-position: from-font;
}

/* 하단 보조 행 — "이미 계정이 있으신가요? 로그인" (210:3165 실측: gap 8 중앙, 링크 Medium 밑줄) */
.auth_alt {
	display: flex;
	gap: var(--space-sm);
	justify-content: center;
	width: 100%;
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-text-quaternary);
}

.auth_alt a {
	font-weight: var(--font-weight-medium);
	color: var(--color-text-link-default);
	text-decoration: underline;
	text-underline-position: from-font;
}

.auth_alt a:hover {
	color: var(--color-text-link-hover);
}

/* 약관 모달 스크롤 영역 — bg canvas · radius 24 · 높이 420 · 내부 p24 gap20 (B-4a 436:51452 실측) */
/* .modal_bd를 겸한다(2026-08-26) — 고정 높이 420은 최대치, 뷰포트가 짧으면 헤더·푸터를 남기고 이 박스만 줄어 스크롤. canvas 박스라 공용 흰 그라디언트 힌트는 끄고 스크롤바는 보이게 둔다 */
.terms_scroll {
	display: flex;
	flex-direction: column;
	gap: var(--space-lgx);
	width: 100%;
	height: 420px;
	max-height: 420px;
	padding: var(--space-xl);
	overflow-y: auto;
	scrollbar-width: thin;
	background: var(--color-bg-canvas);
	border-radius: var(--radius-2xl);
}

.terms_scroll::-webkit-scrollbar { display: initial; width: 10px; }

.modal_bd.terms_scroll ~ .modal_ft::before,
.modal_viewer .modal_bd ~ .modal_ft::before { /* 뷰어 영역 위 흰 그라디언트는 어색 */
	display: none;
}

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

.terms_scroll h3 {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-semibold);
	line-height: 1.6;
	color: var(--color-text-primary);
}

.terms_scroll p {
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-text-tertiary);
}

/* 480 이하 — 모달 세로 여유 확보 (Figma는 1920 한 폭뿐, 퍼블리싱 판단) */
@media (max-width: 480px) {
	.terms_scroll {
		height: 320px;
		max-height: 320px;
	}

	/* 바텀시트(join B-4a, 사용자 요청 2026-08-28) — 고정 높이 대신 시트 최대 높이(92dvh)까지 본문이 채운다 */
	.modal_sheet .terms_scroll {
		height: 60dvh;
		max-height: none;
		padding: var(--space-lgx);
	}
}

/* ==========================================================================
   page — board (C-2 공지사항 목록·상세 실측 352:35828 · 352:36028 · 373:43801.
   D-4 자유게시판도 같은 골격을 쓰도록 클래스는 board_* · post_* 로 범용화)
   ========================================================================== */
/* 상세 서브탑 — 브레드크럼만 좌측 정렬, 하단 48 (373:44064) */
.sub_top_brc {
	padding-bottom: var(--space-4xl);
}

.sub_top_brc .container {
	align-items: flex-start;
	text-align: left;
}

/* 게시글 상세(notice_view · board_view) — 1024 이하 태블릿·모바일에서만 브레드크럼 숨김(사용자 지시 2026-08-27). 서브탑 여백은 유지 */
@media (max-width: 1024px) {
	.sub_top_brc_mo_hide .brc {
		display: none;
	}

	/* 빈 서브탑 = 헤더(60) 오프셋 + 본문까지 40만 남김. 배경 그라디언트는 유지 */
	.sub_top.sub_top_brc_mo_hide {
		padding: 100px 0 0;
	}
}

/* 본문 영역 — 하단 140. 컨테이너 안 블록 간격 32 */
.board_main {
	padding-bottom: 140px;
}

.board_main > .container {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xl);
}

/* 검색 — Search_wrap(658 = scope 120 + keyword 375 + 버튼, gap 12) 중앙 */
.board_search {
	display: flex;
	justify-content: center;
	width: 100%;
}

.board_search .search_wrap {
	flex: 1 1 auto;
	max-width: 658px;
}

/* 목록 묶음 — 카운트 · 목록 32 / 목록 · 페이지네이션 48 (352:35831 gap 48 실측) */
.board_body {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xl);
	width: 100%;
}

.board_body > .pgn {
	justify-content: center;
	margin-top: var(--space-lg); /* 32 + 16 = 48 */
}

/* 카운트 행 — "총 n개의 게시글" 18 Medium secondary (우측에 정렬 셀렉트 자리, D-4에서 사용) */
.board_bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-lg);
	width: 100%;
}

/* 도구(정렬·글쓰기)가 있는 행은 카운트 텍스트를 도구 하단선에 맞춤 — D-4 373:41677 items-end (사용자 확정 2026-08-27). 1024 이하는 도구가 아래 줄로 감겨 영향 없음 */
.board_bar:has(> .board_tools) {
	align-items: flex-end;
}

.board_bar .count {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-medium);
	line-height: 1.6;
	color: var(--color-text-secondary);
}

/* 우측 도구 — 정렬 셀렉트 160(48) + [글쓰기] Primary 48, gap 10 (373:42487 실측, 4pt 밖이지만 그대로) */
.board_tools {
	display: flex;
	flex: none;
	gap: 10px;
	align-items: center;
}

/* 정렬 셀렉트 — .search_wrap .scope와 같은 투명 select 패턴(래퍼 flex + select 꽉 채움, chevron만 절대배치 — 래퍼 position relative 필수) */
.board_sort {
	width: 160px;
}

.board_sort .ip_wr {
	position: relative;
	height: var(--size-control-default);
	padding: 0;
}

.board_sort select.ip {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	height: 100%;
	padding: 0 var(--space-4xl) 0 var(--space-lg);
	appearance: none;
	cursor: pointer;
}

.board_sort .ico {
	position: absolute;
	top: 50%;
	right: var(--space-lg);
	width: var(--size-icon-lg);
	height: var(--size-icon-lg);
	color: var(--color-text-primary);
	pointer-events: none;
	transform: translateY(-50%);
}

/* 목록 — 상단 보더 inverse, 행은 .list_row */
.board_list {
	width: 100%;
	border-top: var(--border-width-thin) solid var(--color-border-inverse);
}

/* NEW 배지는 제목 뒤 — 제목이 늘어나지 않고 배지가 바로 붙는다 */
.list_row .tit:has(+ .badge) {
	flex: 0 1 auto;
}

/* FAQ(C-3 553:29635) — 검색(범위 없음) → 카테고리 칩 행(gap 8) → .faq_item 목록(검색·칩 순서는 사용자 확정 2026-08-27, Figma는 칩이 위). 목록 상단 보더 inverse는 .board_list
   칩이 늘어 폭을 넘치면 줄바꿈 대신 한 줄 가로 스크롤(스크롤바 숨김 · 터치 스와이프 + 마우스 드래그 .drag_scroll · 우측 잘림 페이드 힌트 .is_more = design.js 탭과 공용) — 사용자 지시 2026-08-27 */
.faq_cats {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--space-sm);
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.faq_cats::-webkit-scrollbar {
	display: none;
}

.faq_cats > .chip {
	flex: 0 0 auto;
}

/* 우측에 잘린 칩이 있으면 흰 페이드 힌트(.my_tabs::after와 같은 sticky 0폭 방식) */
.faq_cats::after {
	position: sticky;
	right: 0;
	flex: 0 0 48px;
	align-self: stretch;
	margin-left: -48px;
	content: "";
	background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--color-bg-surface-default) 70%);
	opacity: 0;
	transition: opacity 0.2s ease;
	pointer-events: none;
}

.faq_cats.is_more::after { opacity: 1; }

/* 768 이하 풀블리드 — 칩이 화면 양끝까지 흐르고 시작 위치는 컨테이너와 정렬 */
@media (max-width: 768px) {
	.faq_cats {
		width: auto;
		padding: 0 var(--container-pad);
		margin: 0 calc(-1 * var(--container-pad));
	}

	.faq_cats::after {
		right: calc(-1 * var(--container-pad));
		flex-basis: calc(48px + var(--container-pad));
		margin-left: calc(-48px - var(--container-pad));
	}
}

/* 1024 이하 칩↔목록 32 → 16 = 공지 카운트↔목록(.board_body gap 16)과 동일 — 사용자 지시 2026-08-27. 컨테이너 gap 32는 유지(검색↔칩) */
@media (max-width: 1024px) {
	.faq_cats + .board_body {
		margin-top: calc(-1 * var(--space-lg));
	}
}

/* 480 이하 카테고리 칩 축소 = Chip md(40 · 패딩 16 · 15) — 사용자 지시 2026-08-27 */
@media (max-width: 480px) {
	.faq_cats .chip {
		height: var(--size-control-md);
		padding: 0 var(--space-lg);
	}
}

.faq_list .faq_item[hidden] {
	display: none;
}

/* 빈 상태 — Card lg(패딩 32 · radius 20) 안 Empty state lg. 제목 안 검색어 강조 text/success */
.board_empty .empty .tit .kw {
	color: var(--color-text-success);
}

/* 게시글 상세 (Post detail 404:1764) — 헤더 24 · 제목 28 Bold snug · 메타 16 M quaternary / 본문 32·24 */
.post_view {
	width: 100%;
}

.post_hd {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	padding: var(--space-xl);
	border-top: var(--border-width-thin) solid var(--color-border-inverse);
}

.post_hd .tit_line {
	display: flex;
	align-items: center;
	gap: var(--space-lg);
	width: 100%;
}

.post_hd .tit_line .badge {
	flex: none;
}

.post_hd .tit {
	font-size: var(--font-size-4xl);
	font-weight: var(--font-weight-bold);
	line-height: 1.4;
	color: var(--color-text-primary);
	letter-spacing: var(--font-letter-spacing-snug);
	/* 🔴 `anywhere` 여야 한다 (2026-09-03 발주사 지적 — 긴 제목이 옆으로 삐져나옴).
	   `break-word` 는 **min-content 폭을 줄이지 못해** flex item 의 자동 최소 크기가
	   그대로 남는다. `body { word-break: keep-all }` 이 상속되어 공백 없는 한글 연속이
	   한 「단어」가 되므로, 제목이 `.tit_line`(width:100%) 을 밀어내 페이지에 가로
	   스크롤이 생겼다. 댓글 본문(`.cmt_item .body`)이 이미 쓰는 규칙이다. */
	min-width: 0;
	overflow-wrap: anywhere;
}

.post_hd .meta_line {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-lg);
	width: 100%;
}

.post_hd .meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-xs);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-medium);
	line-height: 1.6;
	color: var(--color-text-quaternary);
}

.post_hd .meta .ico {
	width: 16px;
	height: 16px;
}

.post_bd {
	display: flex;
	flex-direction: column;
	gap: var(--space-xl); /* 본문 · 이미지 24 (417:20290 실측) */
	padding: var(--space-2xl) var(--space-xl);
	border-top: var(--border-width-thin) solid var(--color-border-default);
}

/* 게시글 본문은 text/primary (약관 문서의 secondary와 다름 — 404:1760 실측) */
.post_bd .editor_content {
	color: var(--color-text-primary);
}

/* 본문 이미지 — 디자인 견본(417:20290)의 풀폭·높이 400은 에디터에서 첨부한 이미지의 '예시'일 뿐 고정 크기가 아니다(사용자 확인 2026-08-27).
   실제로는 에디터 HTML 안 <img>로 들어오므로 `.editor_content img`(원본 크기·비율 유지, 컨테이너 넘으면 폭만 축소, radius 12)가 담당. 기존 `.post_img` 고정 높이·cover 규칙은 폐기 */

/* 좋아요 행 — 하단 32 · 좌우 24 (416:1808) */
.post_like {
	display: flex;
	padding: 0 var(--space-xl) var(--space-2xl);
}

/* 댓글 섹션 — 상세와 64 (417:20286: 상세 하단 940 → 댓글 1004). 컨테이너 gap 32 + 32 */
.post_view + .cmt_sect {
	margin-top: var(--space-2xl);
}

/* 첨부 파일 묶음 — 본문 아래, 하단 32 · 좌우 24 · 행 간격 8 (404:1761) */
.post_files {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	padding: 0 var(--space-xl) var(--space-2xl);
}

/* 하단 액션 — [목록으로] 중앙, 상세와 64 간격(373:44086 gap 64) · 최소 폭 160 */
.post_actions {
	display: flex;
	gap: var(--space-md);
	justify-content: center;
	margin-top: var(--space-2xl); /* 32 + 32 = 64 */
}

.post_actions .btn {
	min-width: 160px;
}

/* 반응형 — Figma는 1920 한 폭뿐, 이하 퍼블리싱 판단 */
@media (max-width: 1024px) {
	.board_main {
		padding-bottom: var(--space-6xl);
	}

	/* 게시글 상세 제목 28 → 20 (480 이하 18) — 태블릿에서 과하게 큼(사용자 지적 2026-08-27). 페이지 제목 24 > 상세 제목 20 > 목록 행 16 */
	.post_hd .tit {
		font-size: var(--font-size-2xl);
	}
}

/* 1024 이하 — 카운트 행↔목록 간격 32 → 16(사용자 지적 2026-08-27, notice·board·faq·review 공용). 목록↔페이지네이션은 48 유지 */
@media (max-width: 1024px) {
	.board_body {
		gap: var(--space-lg);
	}

	.board_body > .pgn {
		margin-top: var(--space-2xl); /* 16 + 32 = 48 */
	}
}

@media (max-width: 768px) {
	/* 카운트 행 — 정렬 셀렉트는 카운트와 같은 줄 우측(120, 40 높이) · [글쓰기]는 우하단 플로팅 `.board_write_fab`(768 이하 — 사용자 지시 2026-08-27, 480 → 768로 확대. 이전 '도구 아래 줄' 폐기) */
	.board_bar:has(> .board_tools) {
		align-items: center;
	}

	/* 정렬 셀렉트는 밑줄 없는 텍스트형(검색 밑줄 · 목록 상단선 사이에 밑줄이 하나 더 끼어 '라인 위 라인'으로 보이던 것 — 사용자 지적 2026-08-27). 텍스트 우측 정렬 + chevron, 폭은 내용만큼 */
	.board_sort {
		width: auto;
	}

	.board_sort .ip_wr,
	.board_sort .ip_wr:focus-within {
		height: var(--size-control-md);
		background: transparent;
		border-bottom: 0;
	}

	.board_sort select.ip {
		width: auto;
		padding: 0 var(--space-xl) 0 0; /* width auto = 가장 긴 option 폭이라 우측 정렬 처리 불필요 */
	}

	.board_sort .ico {
		right: 0;
		width: var(--size-icon-md);
		height: var(--size-icon-md);
	}

	/* 글쓰기 플로팅 — go_top과 같은 우측 여백, 하단 16. go_top은 그 위(16 + 48 + 12)로. 토스트가 가리면 design.js가 .is_toast_hide */
	.board_write_fab {
		position: fixed;
		right: var(--container-pad);
		bottom: var(--space-lg);
		z-index: 80;
		box-shadow: var(--shadow-brand);
	}

	body:has(.board_write_fab) .go_top {
		bottom: calc(var(--space-lg) + var(--size-control-default) + var(--space-md));
	}

	.board_write_fab.is_toast_hide {
		visibility: hidden;
		opacity: 0;
	}
}

@media (max-width: 480px) {
	/* 검색↔카운트 24 → 32 (PC와 동일) — 검색 밑줄·카운트·목록 검은 선이 촘촘해 "라인 위 라인"으로 보임(사용자 지적 2026-08-27). 카운트↔목록 16은 유지 */
	.board_main > .container {
		gap: var(--space-2xl);
	}

	.board_body > .pgn {
		margin-top: var(--space-sm); /* 16 + 8 = 24 */
	}

	/* 행·상세 좌우 들여쓰기 해제 — 컨테이너 패딩 20만 남긴다 */
	.list_row {
		padding-right: 0;
		padding-left: 0;
	}

	/* 목록 행 제목 18 → 16 (사용자 요청 2026-08-26, 내 활동에서 지적 — .list_row 공용이라 공지·게시판 목록도 동일) */
	.list_row .tit {
		font-size: var(--font-size-lg);
	}

	/* 목록 행 메타(작성일·댓글·좋아요·조회) 16 → 14 (사용자 요청 2026-08-26). 댓글 행(.act_cmt, 기본 15)도 함께 14 */
	.list_row .meta,
	.list_row.act_cmt .meta {
		font-size: var(--font-size-smd);
	}

	.post_hd,
	.post_bd {
		padding-right: 0;
		padding-left: 0;
	}

	.post_hd .tit_line {
		flex-wrap: wrap;
		gap: var(--space-sm);
	}

	.post_hd .tit {
		font-size: var(--font-size-xl);
	}

	.post_files {
		padding-right: 0;
		padding-left: 0;
	}

	.post_like {
		padding-right: 0;
		padding-left: 0;
	}

	/* 본문 ↔ 댓글 간격 — PC 128(좋아요 하단 32 + 컨테이너 gap 32 + 32 + 댓글 상단 32) → 72(16 + 32 + 0 + 24). 모바일에서 빈 공간이 과했음(사용자 지적 2026-08-27) */
	.cmt_sect {
		padding: var(--space-xl) 0 var(--space-2xl);
	}

	.post_like {
		padding-bottom: var(--space-lg);
	}

	/* 댓글 메타 — 작성일을 닉네임 아래 줄로(사용자 지시 2026-08-27). 답글은 화살표 아이콘(16 + gap 8) 폭만큼 들여 닉네임과 좌측 맞춤 */
	.cmt_item .meta {
		flex-wrap: wrap;
		row-gap: 0;
	}

	.cmt_item .meta .date {
		flex-basis: 100%;
	}

	.cmt_item.is_reply .meta .date {
		padding-left: calc(16px + var(--space-sm));
	}

	/* 답글 들여쓰기 40 → 20 (모바일 폭에서 답글 박스가 좁아지던 것, 사용자 지적 2026-08-27). 답글 폼도 동일 */
	.cmt_item.is_reply,
	.cmt_form.is_reply {
		padding-left: var(--space-lgx);
	}

	.post_view + .cmt_sect {
		margin-top: 0;
	}

	.post_actions {
		margin-top: var(--space-lg);
	}

	.post_actions .btn {
		width: 100%;
	}

	/* FAQ 행 — 좌우 들여쓰기 해제, 질문 18, 마크↔제목 gap 16 → 8 · 마크 폭 26 → 24(사용자 지적 2026-08-27 '여백 넓음'), 답변 들여쓰기 = 24 + 8 = 32 */
	.faq_list .faq_q {
		gap: var(--space-sm);
		padding: var(--space-lgx) 0;
	}

	.faq_list .faq_q .mark {
		width: 24px;
	}

	.faq_list .faq_q .mark,
	.faq_list .faq_q .tit {
		font-size: var(--font-size-xl);
	}

	.faq_list .faq_a {
		padding: 0 0 var(--space-lgx) 32px;
	}
}

/* ------------------------------------------------------------------
   글쓰기 카드 (D-4b 373:45067) — 흰 90% · border subtle · radius 40 · 패딩 40 · 글로우 0 0 20 #47D0BE14 · 블록 gap 20.
   Figma의 backdrop-blur 40은 흰 배경 위라 효과가 없어 생략(후기 카드 글리치 전례 §4-32).
   필드는 lg 56 · 텍스트 18 · 라벨 18 M (인증 폼과 같은 스코프)
   ------------------------------------------------------------------ */
.write_card {
	display: flex;
	flex-direction: column;
	gap: var(--space-lgx);
	width: 100%;
	padding: var(--space-3xl);
	background: rgba(255, 255, 255, 0.9);
	border: var(--border-width-thin) solid var(--color-border-subtle);
	border-radius: var(--radius-4xl);
	box-shadow: 0 0 20px rgba(71, 208, 190, 0.08);
}

.write_card .fld_lbl {
	font-size: var(--font-size-xl);
}

.write_card .fld_lbl .counter {
	font-size: var(--font-size-lg);
}

.write_card .ip_wr {
	height: var(--size-control-lg);
}

.write_card .ip {
	font-size: var(--font-size-xl);
}

/* 에디터 자리표시 — 전체 379, border default. 개발 시 이 박스 자리에 스마트 에디터 직접 삽입(빈 영역 + 안내 문구만, 2026-08-27) */
.editor_box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 379px;
	background: var(--color-bg-surface-subtle);
	border: var(--border-width-thin) dashed var(--color-border-strong);
}

/* 🔴 위 규칙은 **자리표시 상자**다 (`.editor_ph` 「스마트 에디터 삽입 영역」을 가운데
   놓으려고 만든 것). 실제 에디터를 넣으면 `justify-content:center` 가 에디터를
   내용 폭으로 오그라뜨리고 `height:379px` 가 높이를 고정해, 넓은 화면에서 가운데
   조각처럼 뜬다 (2026-09-01 사용자 지적).

   그래서 **자리표시 문구가 없으면** 상자를 걷는다 — 테두리 · 배경 · 높이는 에디터가
   스스로 들고 있다. 퍼블리싱 `board_write.html` 은 `.editor_ph` 를 그대로 두므로
   원본 모습이 유지된다 */
.editor_box:not(:has(> .editor_ph)) {
	display: block;
	height: auto;
	background: none;
	border: 0;
}

.editor_ph {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	align-items: center;
	font-size: var(--font-size-lg);
	font-weight: 500;
	color: var(--color-text-quinary);
	text-align: center;
}

.editor_ph span {
	font-size: var(--font-size-smd);
	font-weight: 400;
	color: var(--color-text-placeholder);
}

/* 첨부 슬롯 — 밑줄 필드 56 안에 파일명/placeholder + X(24) + [파일첨부] Light Outline md 40 */
.write_files {
	gap: var(--space-xs);
}

.write_files .file_slot .ip {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.write_files .file_slot .file_ph {
	color: var(--color-text-placeholder);
}

.write_files .file_x {
	position: relative;
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: var(--size-icon-lg);
	height: var(--size-icon-lg);
	color: var(--color-text-primary);
}

.write_files .file_x[hidden] {
	display: none;
}

.write_files .file_x::before {
	position: absolute;
	inset: -10px;
	content: '';
}

.write_files .file_x .ico {
	width: var(--size-icon-lg);
	height: var(--size-icon-lg);
}

.write_files .file_pick {
	flex: none;
	font-size: var(--font-size-smd);
}

.write_files .fld_msg {
	margin-top: var(--space-xs);
	font-size: var(--font-size-lg);
	color: var(--color-text-quaternary);
}

/* 하단 버튼 — 우측 정렬 gap 8 · 각 min-w 120 */
.write_ft {
	display: flex;
	gap: var(--space-sm);
	justify-content: flex-end;
	width: 100%;
	margin-top: var(--space-xs);
}

.write_ft .btn {
	min-width: 120px;
}

@media (max-width: 768px) {
	.write_card {
		padding: var(--space-xl);
		border-radius: var(--radius-2xl);
	}
}

@media (max-width: 480px) {
	/* 480 이하 카드 스타일 제거 — 페이지 여백 20 안에 플랫 배치 (결제 카드와 동일, 사용자 지시 2026-08-27) */
	.write_card {
		padding: 0;
		background: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.editor_box {
		height: 320px;
	}

	/* 실제 에디터가 들어온 자리는 높이를 고정하지 않는다 (위 주석) */
	.editor_box:not(:has(> .editor_ph)) {
		height: auto;
	}

	.write_ft .btn {
		flex: 1;
		min-width: 0;
	}
}

/* ==========================================================================
   page — review (D-3 수강 후기. 318:18809 목록 · 337:28609 목록없음 · 337:27219 후기 작성 모달)
   ========================================================================== */
/* 서브탑 안 요약 카드 (450:860 Review sub top) — 흰 · border subtle · radius 32 · p32 · 좌우 2열 gap 40.
   좌 = 평균 40 Bold + "총 n개의 후기" 16 M quaternary(gap 2) + 별 5개(24×23 gap 4) + [후기 작성하기] 그라디언트 160 (gap 20)
   우 = 5행(gap 8): "n점" 20 M brand · 막대 12(track canvas, fill gradient/brand-bright) · "n건" 20 M tertiary, gap 24 */
.review_top .page_tit {
	gap: var(--space-xl);
}

.review_summary {
	display: flex;
	gap: var(--space-3xl);
	align-items: center;
	width: 100%;
	padding: var(--space-2xl);
	margin-top: var(--space-xl); /* page_tit gap 24 */
	text-align: left;
	background: var(--color-bg-surface-default);
	border: var(--border-width-thin) solid var(--color-border-subtle);
	border-radius: var(--radius-3xl);
}

.review_summary .sum_left {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-lgx);
	align-items: center;
	min-width: 0;
}

.review_summary .sum_score {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	align-items: center;
	margin-bottom: -12px; /* 점수 블록 → 별 8 (gap 20 − 12) */
}

.review_summary .score {
	font-size: var(--font-size-6xl);
	font-weight: var(--font-weight-bold);
	line-height: 1.25;
	color: var(--color-text-primary);
	letter-spacing: var(--font-letter-spacing-tight);
}

.review_summary .count {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-medium);
	line-height: 1.6;
	color: var(--color-text-quaternary);
}

.review_summary .star_rating {
	display: flex;
	gap: var(--space-xs);
	align-items: center;
}

.review_summary .star_rating img {
	width: 24px;
	height: 23px;
}

/* 반 개 별 — 빈 별 위에 채운 별을 절반만 클립 */
.review_summary .star_rating .half {
	position: relative;
	display: inline-flex;
}

.review_summary .star_rating .half img + img {
	position: absolute;
	top: 0;
	left: 0;
	clip-path: inset(0 50% 0 0);
}

.review_summary .sum_left .btn {
	width: 160px;
}

.review_summary .sum_right {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-sm);
	justify-content: center;
	min-width: 0;
}

.review_summary .dist {
	display: flex;
	gap: var(--space-xl);
	align-items: center;
	width: 100%;
}

.review_summary .dist .lbl,
.review_summary .dist .num {
	flex: none;
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-medium);
	line-height: 1.4;
	letter-spacing: var(--font-letter-spacing-snug);
	white-space: nowrap;
	font-variant-numeric: lining-nums tabular-nums;
}

.review_summary .dist .lbl {
	color: var(--color-text-brand);
}

.review_summary .dist .num {
	min-width: 2.5em;
	color: var(--color-text-tertiary);
	text-align: right;
}

.review_summary .dist .prog {
	display: block;
	flex: 1;
	height: 12px;
}

.review_summary .dist .bar {
	display: block;
	max-width: 100%;
}

/* 목록 그리드(.review_list_grid — main의 .review_grid(좌우 2단 flex)와 클래스 분리, 같은 이름을 써서 main 후기 섹션이 깨졌던 이력 있음 §4-53) — 카드 416 × 3, 열 gap 16 · 행 gap 24 (318:18818 실측).
   같은 줄의 카드는 높이를 맞춘다(stretch) — Figma 318:18818·477:36576 모두 1행 415.55 / 2행 292로 행 단위 동일 높이. align-items:start(내용 높이 제각각)였던 것을 사용자 지적으로 수정(2026-08-26). 카드 내부는 위 정렬 */
.review_list_grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-xl) var(--space-lg);
	align-items: stretch;
	width: 100%;
	list-style: none;
}

/* 목록 카드 — main 후기 카드 + 네 모서리 radius 32(말풍선 꼬리 없음) · 사진 3장 그리드(정사각 radius 12, gap 12) · 4장 이상이면 3번째 타일에 +n */
.review_card_grid {
	display: flex; /* 이미지 행을 카드 하단에 고정 — 같은 줄 카드 높이(stretch)가 달라도 .pics는 항상 바닥 (사용자 지시 2026-08-27, review·mypage_activity 공통) */
	flex-direction: column;
	border-radius: var(--radius-3xl);
	cursor: pointer;
}

.review_card_grid .pics {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-md);
	margin-top: auto;
	padding-top: var(--space-lg);
}

.review_card_grid .pic {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1;
	overflow: hidden;
	object-fit: cover;
	background-position: center;
	background-size: cover;
	border-radius: var(--radius-md);
}

.review_card_grid .pic_more::before {
	position: absolute;
	inset: 0;
	content: '';
	background: rgba(0, 0, 0, 0.3);
}

.review_card_grid .pic_more span {
	position: relative;
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-medium);
	line-height: 1.6;
	color: var(--color-text-inverse);
}

/* 후기 작성 모달 (337:27219) — Modal lg 720 · 본문 gap 20 · 별점 행 h40(별 36 gap 4 ↔ "n점" 32 Bold) · 상세 후기 textarea 200 · 이미지 타일 5열 */
.modal_review_write .modal_bd {
	display: flex;
	flex-direction: column;
	gap: var(--space-lgx);
	max-height: calc(100dvh - 240px);
}

.modal_review_write .fld_lbl {
	font-size: var(--font-size-xl);
}

.star_pick {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 40px;
	margin-top: 6px; /* 라벨 → 별 10 (fld gap 4 + 6) */
}

.star_pick .stars {
	display: flex;
	gap: var(--space-xs);
}

.star_pick .star {
	display: inline-flex;
	width: 36px;
	height: 36px;
	cursor: pointer;
}

.star_pick .star img {
	width: 36px;
	height: 35px;
	pointer-events: none; /* 드래그 선택 시 elementFromPoint가 버튼을 잡도록 · 이미지 드래그 고스트 방지 (2026-08-27) */
	-webkit-user-drag: none;
	user-select: none;
}

/* 별점 드래그 선택 — 누른 채 좌우로 끌면 포인터 아래 별까지 선택(design.js). 터치는 스크롤 대신 드래그 */
.star_pick .stars {
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}

.star_pick .score {
	font-size: var(--font-size-5xl);
	font-weight: var(--font-weight-bold);
	line-height: 1.25;
	color: var(--color-text-primary);
	letter-spacing: var(--font-letter-spacing-tight);
}

.review_txa .txa {
	height: 167px; /* 블록 200 − 라벨 29 − gap 4 */
	font-size: var(--font-size-xl);
}

/* 후기 작성 이미지 타일 — 한 줄 가로 나열, 넘치면 스크롤(스냅 없음 · 스크롤바 숨김 · 터치 스와이프 + 마우스 드래그 = design.js .drag_scroll) (사용자 요청 2026-08-27) */
.modal_review_write .img_up_list {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--space-md);
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.modal_review_write .img_up_list::-webkit-scrollbar {
	display: none;
}

.modal_review_write .img_up {
	flex: 0 0 calc((100% - var(--space-md) * 4) / 5); /* 5장이 딱 맞는 폭 = 기존 5열 그리드와 동일 */
	min-width: 104px; /* 디자인 시스템 타일 크기 아래로는 줄지 않고 스와이프 (사용자 지시 2026-08-27) */
	width: auto;
	height: auto;
	aspect-ratio: 1;
}

.modal_review_write .img_up .img {
	-webkit-user-drag: none;
	user-select: none;
}

/* 이미지 타일 스크롤 영역 풀블리드 — 모달 좌우 패딩(lg 32)만큼 본문·목록을 밖으로 빼고 같은 만큼 안쪽 패딩 → 첫 타일은 제자리, 스크롤은 모달 끝까지.
   .modal_bd를 함께 빼는 이유: 목록만 빼면 .modal_bd 박스(overflow auto)가 클리핑. 5장이 다 들어가는 폭에서는 보이는 차이 없음 (사용자 지시 2026-08-27) */
.modal_review_write .modal_bd {
	margin: 0 calc(var(--modal-pad-x, var(--space-2xl)) * -1);
	padding: 0 var(--modal-pad-x, var(--space-2xl));
	overflow-x: hidden;
}

.modal_review_write .img_up_list {
	margin: var(--space-xs) calc(var(--modal-pad-x, var(--space-2xl)) * -1) 0; /* 라벨 → 타일 8 = fld gap 4 + 4 (Figma 337:26756 실측, 별점 10·상세 후기 4와 각각 다름 — 사용자 지적 2026-08-27) */
	padding: 0 var(--modal-pad-x, var(--space-2xl));
	width: auto;
}

/* 마우스 드래그 스크롤 공통 — design.js가 .is_dragging 토글 */
.drag_scroll {
	cursor: grab;
}

.drag_scroll.is_dragging {
	cursor: grabbing;
	scroll-behavior: auto;
	user-select: none;
}

.drag_scroll.is_dragging * {
	pointer-events: none;
}

@media (max-width: 1024px) {
	.review_list_grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.review_summary {
		flex-direction: column;
		gap: var(--space-xl);
		padding: var(--space-xl);
	}

	.review_summary .sum_right {
		width: 100%;
	}

	.review_summary .dist .lbl,
	.review_summary .dist .num {
		font-size: var(--font-size-lg);
	}

	.review_list_grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 480px) {
	.review_summary {
		padding: var(--space-lgx) var(--space-lg);
		border-radius: var(--radius-2xl);
	}

	/* 480 이하 카드 패딩 24→20 · 카드 간격 24→16 (사용자 지시 2026-08-27, review·mypage_activity 공통) */
	.review_list_grid { gap: var(--space-lg); }

	.review_card_grid {
		padding: var(--space-lgx);
		border-radius: var(--radius-2xl);
	}

	/* 목록 카드 480 이하 타이포 — 별 20×19(살짝 축소) · 본문 16 · 작성일 15 (사용자 지시 2026-08-27, review·mypage_activity 공통 — main 카드는 Figma 390 값 15 유지) */
	.review_card_grid .rating img {
		width: 20px;
		height: 19px;
	}

	.review_card_grid .txt {
		font-size: var(--font-size-lg);
	}

	.review_card_grid .meta {
		font-size: var(--font-size-md);
	}

	.modal_review_write .img_up {
		flex-basis: 104px; /* 디자인 시스템 타일 크기 고정 — 3장 + 넘침은 스와이프 */
	}

	.star_pick .star,
	.star_pick .star img {
		width: 32px;
	}

	.star_pick .score {
		font-size: var(--font-size-3xl);
	}
}

/* ==========================================================================
   page — tutor (D-1 선생님 소개. 219:4062 실측 — 카드 416 × 3열, gap 16/24, 더보기 Light Outline lg 160)
   ========================================================================== */
.tutor_grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-xl) var(--space-lg);
	width: 100%;
	list-style: none;
}

/* 목록 카드 — main 강사 카드 + 본문 gap 12 · 국가 배지 Brand · [소개 영상 보기] Primary md 풀폭(영상 있는 강사만) */
.tutor_card_grid {
	width: 100%;
	max-width: none;
}

.tutor_card_grid .video_btn {
	width: 100%;
	margin-top: var(--space-md);
	font-size: var(--font-size-smd);
}

.tutor_card_grid .video_btn .ico {
	width: var(--size-icon-md);
	height: var(--size-icon-md);
}

.tutor_card_grid[hidden] {
	display: none;
}

/* 더보기 — 56 · 패딩 32 · 18 SB + chevron 24 · 목록과 64(post_actions 32 + 32) */
#tutor_more {
	gap: var(--space-sm);
	min-width: 160px;
	padding: 0 var(--space-2xl);
	font-size: var(--font-size-xl);
}

@media (max-width: 1024px) {
	.tutor_grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.tutor_grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* 목록 카드 하단(이름·설명·영상 버튼) 패딩 32 → 20 (사용자 지시 2026-08-27, main 카드는 Figma 390 실측 유지) */
	.tutor_card_grid .body {
		padding: var(--space-lgx);
	}
}

/* ==========================================================================
   page — book (D-2 수업교재. 287:14468 레벨 목록 · 297:19060 레벨 상세 · 297:12930 CEFR 모달 · 316:20638 D-2a · 318:16184 D-2b)
   ========================================================================== */
.book_main > .container {
	gap: var(--space-xl); /* 안내 행 → 카드 24 (287:16335 실측) */
}

/* 안내 행 — Alert Info Plain ↔ [레벨 안내] Primary Outline 48 + arrow-up-right */
.book_bar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.book_bar .alert_plain {
	padding: 0;
}

/* 레벨 카드 그리드 3열 gap 16/24 */
.level_grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-xl) var(--space-lg);
	width: 100%;
	list-style: none;
}

/* Curriculum card 297:11383 — 흰 · border subtle · radius 32 · 상단 그라디언트 302:200(레벨명 40 Bold 흰) + 접힌 모서리 66×84 · 본문 p32 gap 12 */
.level_card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--color-bg-surface-default);
	border: var(--border-width-thin) solid var(--color-border-subtle);
	border-radius: var(--radius-3xl);
}

.level_card .thumb,
.level_card_img .thumb {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 302 / 200;
	padding: var(--space-lgx) var(--space-sm); /* Figma(297:11326)는 좌우 패딩 0 — 32였을 때 "B. Independent User"가 1920에서 2줄로 갈라짐(회귀 점검 2026-08-19). 가장자리 여유만 8 */
	overflow: hidden;
	background: radial-gradient(ellipse 140% 220% at 50% 50%, #5cd8c9 0%, #46c3b4 50%, #2fae9e 100%);
}

/* 접힌 모서리 — 우하단 66×84, Figma 벡터(Frame 95) 추출 images/deco_page_fold.svg */
.level_card .thumb::after,
.level_card_img .thumb::after {
	position: absolute;
	right: -8px; /* SVG 안 도형은 우 6.5·하 7px 그림자 여백 안쪽에 있다 — 도형이 썸네일 밖으로 1px 이상 넘치게 두고 overflow hidden으로 자른다. 정확히 맞추면(−7) 2열 그리드의 소수점 카드 폭에서 서브픽셀 반올림 탓에 첫 카드에 1px 흰 틈이 생김(2026-08-28) */
	bottom: -8px;
	width: 77px;
	height: 92px;
	content: '';
	background: url('../images/deco_page_fold.svg') no-repeat center / contain;
}

.level_card .lv,
.level_card_img .lv {
	font-size: var(--font-size-6xl);
	font-weight: var(--font-weight-bold);
	line-height: 1.25;
	color: var(--color-text-inverse);
	text-align: center;
	letter-spacing: var(--font-letter-spacing-tight);
	overflow-wrap: break-word;
	display: -webkit-box; /* 레벨명은 관리자 데이터 — 최대 3줄, 넘치면 말줄임(사용자 지시 2026-08-28). 썸네일 높이(302:200)는 고정이라 4줄부터는 세로로 넘치므로 clamp */
	overflow: hidden;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.level_card .body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-md);
	align-items: flex-start;
	padding: var(--space-2xl);
}

.level_card .name_line {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	align-items: center;
}

.level_card .name {
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-semibold);
	line-height: 1.4;
	color: var(--color-text-primary);
	letter-spacing: var(--font-letter-spacing-snug);
}

.level_card .sub {
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-text-tertiary);
}

.level_card .foot {
	display: flex;
	gap: var(--space-md);
	align-items: center; /* Figma Frame 93(297:11651): 과정 텍스트 박스(52)는 세로 중앙 정렬 텍스트 — 1줄일 때 [자세히] 40이 텍스트와 세로 중앙 맞음(2026-08-28) */
	width: 100%; /* Figma는 배지 뒤 gap 12에 바로 붙고 남는 높이는 카드 하단에 남는다 — margin-top:auto(하단 밀착) 제거(2026-08-28) */
	min-height: 52px; /* Figma 텍스트 박스 52 고정(2줄) — 과정이 1줄이어도 푸터 높이 유지 */
}

.level_card .courses {
	display: -webkit-box;
	flex: 1;
	min-width: 0;
	overflow: hidden; /* 과정명은 관리자 데이터(개수·길이 가변) — 최대 2줄까지만 보이고 넘치면 말줄임(Figma 297:11571 text-ellipsis, 2026-08-28) */
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-text-tertiary);
	overflow-wrap: break-word;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.level_card .foot .btn {
	flex: none;
	width: 90px;
	font-size: var(--font-size-smd);
}

/* 레벨 상세 — 좌 카드 이미지 416 (radius 32) + gap 64 + 우 800 */
.level_detail {
	display: flex;
	gap: var(--space-5xl);
	align-items: flex-start;
	width: 100%;
}

.level_card_img {
	flex: 0 0 416px;
	max-width: 100%;
	overflow: hidden;
	border-radius: var(--radius-3xl);
}

.level_body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-3xl); /* 제목 블록 → 목록 40 (297:20373 y123 − 83) */
	min-width: 0;
}

.level_head {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
}

.level_head > .tit {
	font-size: var(--font-size-4xl);
	font-weight: var(--font-weight-bold);
	line-height: 1.4;
	color: var(--color-text-primary);
	letter-spacing: var(--font-letter-spacing-snug);
}

.level_head .sub_line {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	align-items: center;
	justify-content: space-between;
}

.level_head .sub {
	font-size: var(--font-size-xl);
	line-height: 1.6;
	color: var(--color-text-tertiary);
}

.level_head .alert_plain {
	padding: 0;
}

/* 과정 아코디언 — 상단 보더 inverse, 항목은 .acc_item(패딩 24/12 · 제목 20 SB). 본문 = 교재 행 목록(패딩 20/12 · 행 간격 16) */
.course_list {
	width: 100%;
	border-top: var(--border-width-thin) solid var(--color-border-inverse);
}

.course_list .acc_item.is_on .acc_head {
	border-bottom: var(--border-width-thin) solid var(--color-border-default); /* Figma Accordion(314:20406) 헤드 자체에 border-b — 열렸을 때 헤드↔교재 목록 사이 선(닫힘은 .acc_item border와 겹치므로 열림에만, 2026-08-28) */
}

.course_list .acc_body {
	padding: var(--space-lgx) var(--space-md);
}

.book_list {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	list-style: none;
}

.book_row {
	display: flex;
	gap: var(--space-md);
	align-items: flex-start; /* 교재명 2줄이면 아이콘은 첫 줄 상단 정렬(사용자 지시 2026-08-28) */
	width: 100%;
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-text-primary);
	text-align: left;
	cursor: pointer;
}

.book_row .ico {
	flex: none;
	width: 24px;
	height: 24px;
	margin-top: calc((1.6em - 24px) / 2); /* 한 줄(25.6)에서는 center와 동일 — .chk .box와 같은 식 */
	padding: 2px 3.5px;
	object-fit: contain;
}

.book_row .name {
	display: -webkit-box;
	flex: 1;
	min-width: 0;
	overflow: hidden; /* 교재명은 관리자 데이터 — 최대 2줄, 넘치면 말줄임 */
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

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

/* 마이페이지 진입 확인 중 (`RequireStudent`) — 로그인 여부는 브라우저에서만 알 수 있어
   한 박자가 생긴다. 그동안 아무것도 없으면 「깨졌다」로 읽힌다 */
.my_loading {
	padding: var(--space-4xl) 0;
	font-size: var(--font-size-lg);
	color: var(--color-text-tertiary);
	text-align: center;
}

/* 교재가 없는 과정 — 빈 채로 두면 고장으로 읽힌다. 문구는 관리자가 챕터마다 정한다
   (ADM-11 `3-c` `unregistered_notice`, 비었으면 화면 기본값 「업데이트 예정입니다.」) */
.book_none {
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-text-tertiary);
}

/* 과정이 하나도 없을 때는 아코디언 바깥이라 안쪽 여백을 스스로 낸다 */
.course_list > .book_none {
	padding: var(--space-lgx) var(--space-md);
}

/* CEFR 모달 (297:12930) — 헤더 설명 15 · 본문 gap 24(상단 12 · 하단 20) · 행 = 원 32 brand(13 SB 흰) + [제목 18 SB text/success · 설명 16 primary · 예시 16 quinary](gap 8) */
.modal_cefr .modal_bd {
	max-height: 710px;
}

.cefr_list {
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
	padding: var(--space-md) 0 var(--space-lgx);
}

.cefr_row {
	display: flex;
	gap: var(--space-md);
	align-items: flex-start;
}

.cefr_row .circle {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-on-brand);
	background: var(--color-bg-brand-default);
	border-radius: var(--radius-full);
}

.cefr_row .txt {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-sm);
	min-width: 0;
}

.cefr_row .tit {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-semibold);
	line-height: 1.4;
	color: var(--color-text-success);
}

.cefr_row .desc {
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-text-primary);
}

.cefr_row .ex {
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-text-quinary);
}

/* 교재 뷰어 모달 (318:16184) — xl 1184 · 뷰어 영역 자리표시(회색, 16:9 ≈ 400) */
.modal_viewer .viewer_area {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1120 / 400;
	min-height: 240px;
	padding: var(--space-xl);
	color: var(--color-text-inverse);
	text-align: center;
	background: #6e6e6e;
}

.modal_viewer .viewer_area p {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-semibold);
	line-height: 1.6;
}

.modal_viewer .viewer_area span {
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-regular);
	opacity: 0.8;
}

/* 1024 이하(태블릿 세로부터) 풀페이지 뷰어(사용자 확정 2026-08-28 — 480에서 시작했다가 태블릿까지 확장. 정의서 D-2c '태블릿은 데스크톱 모달 유지'와 차이) — 딤 패딩 0 · 모달 = 뷰포트 전체·라운드 없음 · 헤더 고정 + 뷰어 영역이 남은 높이 전부 · 패딩 상 16 · 좌우 12 · 하 12 */
@media (max-width: 1024px) {
	.dim:has(> .modal_viewer) {
		padding: 0;
	}

	.modal_viewer {
		gap: var(--space-md);
		max-width: none;
		height: 100dvh;
		max-height: 100dvh;
		padding: var(--space-lg) var(--space-md) var(--space-md); /* 풀페이지는 뷰어 영역이 최대한 넓게(사용자 지시 2026-08-28) */
		border-radius: 0;
		box-shadow: none;
	}

	.modal_viewer .modal_bd {
		display: flex;
		flex: 1;
		min-height: 0;
	}

	.modal_viewer .viewer_area {
		flex: 1;
		aspect-ratio: auto;
		height: 100%;
	}

	.modal_viewer .modal_bd:last-child::after {
		display: none; /* 풀페이지는 스크롤 없음 — 페이드 힌트 불필요 */
	}
}

@media (max-width: 1280px) {
	/* 노트북(3열 유지, 카드 416 → 380 이하)부터 레벨명 40 → 32 — 긴 이름이 2줄로 갈라지는 폭(사용자 지시 2026-08-28). 1024 이하 32 유지 · 768 이하 28 */
	.level_card .lv {
		font-size: var(--font-size-5xl);
	}

	.level_detail {
		gap: var(--space-2xl);
	}

	.level_card_img {
		flex-basis: 320px;
	}
}

@media (max-width: 1024px) {
	.level_grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* 태블릿(1024 이하 = 터치)부터 [자세히] 버튼 숨김, 카드 전체 클릭으로 상세 이동(book.html JS가 li에 role=link·tabindex 부여, 사용자 지시 2026-08-28) */
	.level_card .foot .btn {
		display: none;
	}

	.level_card {
		cursor: pointer;
	}

	.level_card .foot {
		min-height: 0;
	}

	/* 접힌 모서리 77×92 → 66×78(85%), 480 이하 54×64(70%) — 오프셋도 비율대로(사용자 지시 2026-08-28) */
	.level_card .thumb::after,
	.level_card_img .thumb::after {
		right: -7px; /* 도형 여백 5.6·6 → 1px 이상 넘치게 */
		bottom: -7px;
		width: 66px;
		height: 78px;
	}

	.level_detail {
		flex-direction: column;
	}

	.level_card_img {
		flex-basis: auto;
		width: 100%;
		max-width: 416px;
	}

	.level_body {
		width: 100%; /* 세로 스택 시 `.level_detail{align-items:flex-start}` 탓에 본문이 내용 폭으로 줄어듦 — 풀폭(사용자 지시 2026-08-28) */
	}

	/* 태블릿 세로부터 열람 안내는 한글 과정명 아래 줄 — 영문명↔한글명 16 → 8, 한글명↔안내 12(사용자 지시 2026-08-28) */
	.level_head {
		gap: var(--space-sm);
	}

	.level_head .sub_line {
		flex-direction: column;
		gap: var(--space-md);
		align-items: flex-start;
	}

	.level_head > .tit {
		font-size: var(--font-size-3xl);
	}
}

@media (max-width: 768px) {
	.level_card .lv {
		font-size: var(--font-size-4xl);
	}
}

@media (max-width: 480px) {
	.level_grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.book_bar .btn {
		width: 100%;
	}

	.level_card .lv,
	.level_card_img .lv {
		font-size: var(--font-size-5xl);
	}

	/* 접힌 모서리 77×92 → 54×64(70%), 우하단 밀착 오프셋도 같은 비율(사용자 지시 2026-08-28) */
	.level_card .thumb::after,
	.level_card_img .thumb::after {
		right: -6px; /* 도형 여백 4.6·4.9 → 1px 이상 넘치게 */
		bottom: -6px;
		width: 54px;
		height: 64px;
	}

	.level_card .body {
		padding: var(--space-xl);
	}

	.course_list .acc_head {
		padding-right: 0;
		padding-left: 0;
	}

	.course_list .acc_body {
		padding-right: 0;
		padding-left: 0;
	}
}

/* ==========================================================================
   page — apply (E-1 수강 상담 신청서. 266:18295 Consultation panel 실측 · E-1a 253:13115 · E-1b 254:17171/17861 · E-2 279:29213)
   ========================================================================== */
/* 본문 — 760 컬럼, 서브탑 아래 48 · 하단 140. 배너·패널 간 48 */
.consult_main {
	padding: 0 0 140px; /* 서브탑(pb 100) 바로 아래 패널 — 상단 여백 48 → 0 (Figma 231:7904 서브탑 정리 2026-08-28) */
}

.consult_wrap {
	display: flex;
	flex-direction: column;
	gap: var(--space-4xl);
	width: 100%;
	max-width: var(--container-narrow);
	margin: 0 auto;
}

/* 패널 — 글쓰기 카드와 같은 흰 90% · radius 40 · p40 · 글로우, 섹션 간 40 */
.consult_panel {
	display: flex;
	flex-direction: column;
	gap: var(--space-3xl);
	width: 100%;
	padding: var(--space-3xl);
	background: rgba(255, 255, 255, 0.9);
	border: var(--border-width-thin) solid var(--color-border-subtle);
	border-radius: var(--radius-4xl);
	box-shadow: 0 0 20px rgba(71, 208, 190, 0.08);
}

.consult_sect {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xl); /* 제목↔필드·필드 간 32 (Figma 266:18295 재실측 2026-08-28, 24 → 32) */
	width: 100%;
}

.consult_sect[hidden] {
	display: none;
}

/* 섹션 제목 24 SB text/success */
.consult_sect .sect_tit {
	font-size: var(--font-size-3xl);
	font-weight: var(--font-weight-semibold);
	line-height: 1.4;
	color: var(--color-text-success);
	letter-spacing: var(--font-letter-spacing-snug);
}

/* 필드 스코프 — lg 56 · 텍스트 18 · 라벨 18 M + 번호 배지(brand-subtle 32 pill, 14 SB brand, gap 12) · 우측 힌트 16 quaternary */
.consult_panel .ip_wr {
	height: var(--size-control-lg);
}

.consult_panel .ip,
.consult_panel .txa {
	font-size: var(--font-size-xl);
}

/* 서술형 문항(12 · 18 · 19)은 **두 줄로 시작**하고 입력이 길어지면 그만큼 자란다
   (`AutoGrowTextarea` 가 scrollHeight 로 높이를 잡는다 · 2026-09-07 발주사 지시).
   전엔 120(18번은 140) 으로 박혀 있어 저 세 문항만 밑줄이 한참 아래 떨어져 보였다.
   min-height = 상하 패딩 24 + 밑줄 1 + 2줄 */
.consult_panel .txa {
	min-height: calc(1.6em * 2 + 25px);
}

.consult_panel .fld_lbl {
	flex-wrap: wrap;
	gap: var(--space-xs) var(--space-md);
	align-items: center;
	justify-content: flex-start; /* 힌트는 라벨 바로 뒤 (Figma: 라벨 gap 12 힌트) */
	font-size: var(--font-size-xl);
}

.consult_panel .fld_lbl .lbl_group {
	display: inline-flex;
	gap: var(--space-md);
	align-items: center;
}

.consult_panel .fld_lbl .num {
	display: inline-flex;
	flex: none;
	align-items: center;
	height: 32px;
	padding: 0 var(--space-lg);
	font-size: var(--font-size-smd);
	font-weight: var(--font-weight-semibold);
	line-height: 1.5;
	color: var(--color-text-brand);
	background: var(--color-bg-brand-subtle);
	border-radius: var(--radius-full);
}

.consult_panel .fld_lbl .hint {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-regular);
	color: var(--color-text-quaternary);
}

/* 전화번호 라벨은 배지 + 라벨만(fld_row 위) */
.consult_panel #phone_lbl {
	display: flex;
	gap: var(--space-md);
	align-items: center;
	margin-bottom: var(--space-xs); /* 라벨↔입력 행 4 (649:30501 실측 2026-08-28, 12 → 4) */
}

.consult_panel .fld_msg {
	font-size: var(--font-size-lg);
	color: var(--color-text-quaternary);
}

.consult_panel .fld_row {
	gap: var(--space-xl);
}

.consult_panel .fld_row .fld {
	flex: 1;
	min-width: 0;
}

/* 텍스트에어리어 — 라벨 32 + gap 4 + 140 = 176 */
.consult_panel .txa {
	height: 140px;
	min-height: 0;
}

/* 칩 그룹 — 48 pill gap 12(단일 선택). 세로형(현재 영어 실력)은 풀폭 · 좌정렬 · gap 12 */
.chip_group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	margin-top: var(--space-sm);
}

.chip_group_col {
	flex-direction: column;
	align-items: stretch;
}

.chip_group_col .chip {
	justify-content: flex-start;
	width: 100%;
	font-weight: var(--font-weight-regular);
	color: var(--color-text-primary);
}

.chip_group_col .chip.is_on {
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-brand);
}

.chip_group_col .ip_wr[hidden] {
	display: none;
}

/* 순위 박스 — border default · radius 16 · px24 py16 · gap 12. 헤드 = Badge Secondary Solid lg "n순위" ↔ 카운터 "n/3 *"  */
.rank_boxes {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	margin-top: var(--space-sm);
}

.rank_box_wrap {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xl);
	padding: var(--space-xl);
	border: var(--border-width-thin) solid var(--color-border-default);
	border-radius: var(--radius-lg);
}

.rank_box {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	width: 100%;
	padding: var(--space-lg) var(--space-xl);
	border: var(--border-width-thin) solid var(--color-border-default);
	border-radius: var(--radius-lg);
}

.rank_box_wrap .rank_box {
	gap: var(--space-xs);
	padding: 0;
	border: 0;
	border-radius: 0;
}

.rank_head {
	display: flex;
	gap: var(--space-sm);
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.rank_box_wrap .rank_head {
	justify-content: flex-start;
}

.rank_head .cnt {
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-text-quaternary);
}

.rank_head .req {
	margin-left: var(--space-2xs);
	font-size: var(--font-size-md);
	color: var(--color-text-danger);
}

/* 요일 칩 7개 — md 40, 균등 폭, gap 12 */
.day_chips {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: var(--space-md);
	width: 100%;
}

.day_chips .chip {
	justify-content: center;
	min-width: 0;
	padding: 0;
}

/* 시간대 — 셀렉트 285 × 2 + "~" (Input md 40) */
.time_row {
	display: flex;
	gap: var(--space-xl);
	align-items: center;
	width: 100%;
}

.time_row .time_sel {
	flex: 1;
	width: auto;
	min-width: 0;
}

.time_row .time_sel .ip_wr {
	height: var(--size-control-md);
}

.time_row .time_sel .ip {
	font-size: var(--font-size-lg);
}

.time_row .tilde {
	flex: none;
	font-size: var(--font-size-xl);
	color: var(--color-text-quaternary);
}

.consult_panel .alert {
	margin-top: var(--space-md);
}

/* 시간대 안내 Alert 본문 — 16 text/danger (649:37761 실측 2026-08-28) */
.consult_panel .alert_danger .desc {
	font-size: var(--font-size-lg);
	color: var(--color-text-danger);
}

/* 20번 체크박스 — 라벨 2줄, 상단 정렬 */
.consult_panel .chk_top {
	align-items: flex-start;
	margin-top: var(--space-sm);
}

.consult_panel .chk_top .box {
	margin-top: 2px;
}

/* 재수강 배너 (E-1a) — brand-subtle · radius 40 · px40 py24 · 아이콘 원 72(흰) + 꽃 48 · 제목 24 SB brand · 설명 16 tertiary · 체크박스 */
.rehire_banner {
	display: flex;
	gap: var(--space-2xl);
	align-items: flex-start;
	width: 100%;
	padding: var(--space-xl) var(--space-3xl);
	background: var(--color-bg-brand-subtle);
	border-radius: var(--radius-4xl);
}

.rehire_banner .ico_wrap {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	background: var(--color-bg-surface-default);
	border-radius: var(--radius-full);
}

.rehire_banner .ico_wrap .ico {
	width: 41px;
	height: 46px;
}

.rehire_banner .txt {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-sm);
	min-width: 0;
}

.rehire_banner .tit {
	font-size: var(--font-size-3xl);
	font-weight: var(--font-weight-semibold);
	line-height: 1.4;
	color: var(--color-text-brand);
	letter-spacing: var(--font-letter-spacing-snug);
}

.rehire_banner .desc {
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-text-tertiary);
}

.rehire_banner .rehire_note {
	font-size: var(--font-size-lg); /* Body/lg 16 R · 2줄 · 문구 Figma 원문 (E-1a 254:16452 입력상태 실측 2026-08-28) */
	line-height: 1.6;
	color: var(--color-text-success); /* #1a6b61 */
}

/* 결과 카드 보강 — 본문 링크(밑줄 brand) · 하단 정보 2열(구분선) · 종이비행기 아이콘 여백 */
.result_card .desc a.accent {
	color: var(--color-text-link-default);
	text-decoration: underline;
}

.result_card .result_info {
	display: flex;
	gap: var(--space-lg);
	width: 100%;
	max-width: 600px;
	padding-top: var(--space-2xl);
	border-top: var(--border-width-thin) solid var(--color-border-subtle);
	/* E-1b 279:29053 실측(2026-08-28): 폭 600 · 상단선 subtle + pt 32 · 열 간 16 · 구분선 75 */
}

.result_card .result_info > div {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-sm);
	align-items: center;
	text-align: center;
}

.result_card .result_info > div + div {
	position: relative;
}

.result_card .result_info > div + div::before {
	position: absolute;
	top: 50%;
	left: calc(var(--space-sm) * -1);
	width: 1px;
	height: 75px;
	content: "";
	background: var(--color-border-default);
	transform: translateY(-50%);
}

.result_card .result_info dt {
	font-size: var(--font-size-xl);
	line-height: 1.6;
	color: var(--color-text-tertiary);
}

.result_card .result_info dd {
	font-size: var(--font-size-4xl);
	font-weight: var(--font-weight-bold);
	line-height: 1.4;
	color: var(--color-text-primary);
	letter-spacing: var(--font-letter-spacing-snug);
}

.result_card .result_ico_send {
	padding: 8px 0;
	object-fit: contain;
}

@media (max-width: 768px) {
	.consult_panel {
		padding: var(--space-xl);
		border-radius: var(--radius-2xl);
	}

	.consult_panel .fld_row:not(:has(.cc_dd)) {
		flex-direction: column;
		gap: var(--space-xl);
	}

	.chip_group_col .chip {
		height: auto;
		min-height: var(--size-control-default);
		padding: var(--space-md) var(--space-xl);
		text-align: left;
		white-space: normal;
	}

	.rehire_banner {
		gap: var(--space-lg);
		padding: var(--space-xl);
		border-radius: var(--radius-2xl);
	}

	.day_chips {
		gap: var(--space-sm);
	}

	/* 시간대 셀렉트 — 768 이하에서도 한 줄(시작 ~ 종료) 유지, gap 12 (세로 스택·~ 생략 반려, 사용자 지시 2026-08-28).
	   .board_sort의 768 텍스트형 규칙(밑줄 제거·폭 auto)이 .time_sel에도 걸리므로 밑줄·풀폭·패딩을 되돌린다 */
	.time_row {
		gap: var(--space-md);
	}

	.time_row .time_sel {
		width: auto;
	}

	.time_row .time_sel .ip_wr {
		background: var(--color-bg-surface-default);
		border-bottom: var(--border-width-thin) solid var(--color-border-default);
	}

	.time_row .time_sel .ip_wr:focus-within {
		border-bottom-color: var(--color-border-focus);
	}

	.time_row .time_sel select.ip {
		width: 100%;
		padding: 0 var(--space-3xl) 0 var(--space-lg);
	}

	.time_row .time_sel .ico {
		right: var(--space-md);
	}
}

@media (max-width: 480px) {
	.consult_main {
		padding: 0 0 var(--space-6xl);
	}

	/* 480 이하 카드 스타일 제거 — 페이지 여백 20 안에 플랫 배치 (결제·글쓰기 카드와 동일, 사용자 지시 2026-08-28) */
	.consult_panel {
		gap: var(--space-2xl);
		padding: 0;
		background: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.consult_panel .fld_lbl .hint {
		flex-basis: 100%;
	}

	.rank_box {
		padding: var(--space-md) var(--space-lg);
	}

	.rank_box_wrap {
		padding: var(--space-lg);
	}

	/* 시간대 셀렉트 — 375에서 '희망시간 선택'이 잘리지 않게 안쪽 패딩 8/28 · chevron 우측 4 · ~ 간격 8 */
	.time_row {
		gap: var(--space-sm);
	}

	.time_row .time_sel select.ip {
		padding: 0 28px 0 var(--space-sm);
	}

	.time_row .time_sel .ico {
		right: var(--space-xs);
	}

	.rehire_banner {
		flex-direction: column;
	}

	.rehire_banner .tit {
		font-size: var(--font-size-2xl);
	}

	/* 480 이하 정보 2열 → 좌 라벨 · 우 값 정보 나열(결제 .pay_row와 동일: 16 · 라벨 quaternary · 값 M primary 우측, 행 간 20), 구분선 숨김 (사용자 지시 2026-08-28) */
	.result_card .result_info {
		flex-direction: column;
		gap: var(--space-lgx);
		padding-top: var(--space-xl);
	}

	.result_card .result_info > div {
		flex-direction: row;
		gap: var(--space-lg);
		align-items: center;
		justify-content: space-between;
		text-align: left;
	}

	.result_card .result_info > div + div::before {
		display: none;
	}

	.result_card .result_info dt {
		font-size: var(--font-size-lg);
		color: var(--color-text-quaternary);
	}

	.result_card .result_info dd {
		font-size: var(--font-size-lg);
		font-weight: var(--font-weight-medium);
		line-height: 1.6;
		letter-spacing: var(--font-letter-spacing-normal);
		text-align: right;
	}
}

/* 체험 신청서(E-3 266:18793) 전용 — 14 수업길이 고정 안내(secondary-subtle · radius 16 · p16/24, 20 SB secondary-accent + 16 tertiary) · 주의사항 박스(brand-subtle · radius 16 · p24, 제목 18 SB brand + 불릿 16 tertiary) */
.fixed_len {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	width: 100%;
	padding: var(--space-lg) var(--space-xl);
	margin-top: var(--space-sm);
	background: var(--color-bg-secondary-subtle);
	border-radius: var(--radius-lg);
}

.fixed_len .tit {
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-semibold);
	line-height: 1.4;
	color: var(--color-text-secondary-accent);
	letter-spacing: var(--font-letter-spacing-snug);
}

.fixed_len .desc {
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-text-tertiary);
}

.trial_notice {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	width: 100%;
	padding: var(--space-xl);
	background: var(--color-bg-brand-subtle);
	border-radius: var(--radius-lg);
}

.trial_notice .tit {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-semibold);
	line-height: 1.4;
	color: var(--color-text-brand);
}

.trial_notice ul {
	padding-left: 24px;
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-text-tertiary);
	list-style: disc;
}

/* ==========================================================================
   page — coupon guide (E-4 · E-4a 쿠폰 안내 사이드 패널. 271:27473 Coupon panel 560×(뷰포트−80) · 우측 40 · 상단 40)
   ========================================================================== */
/* 패널용 딤 — 공통 .dim(overlay 20% + blur) 재사용, 패널을 우측 정렬 */
.dim_panel {
	align-items: stretch;
	justify-content: flex-end;
	padding: var(--space-3xl);
}

.coupon_panel {
	display: flex;
	flex-direction: column;
	width: 560px;
	max-width: 100%;
	height: 100%;
	max-height: calc(100dvh - 80px);
	padding: var(--space-3xl) var(--space-3xl) 0;
	background: rgba(255, 255, 255, 0.9);
	border: var(--border-width-thin) solid var(--color-border-subtle);
	border-radius: var(--radius-4xl) var(--radius-4xl) 0 var(--radius-4xl);
	box-shadow: 0 0 20px rgba(71, 208, 190, 0.08);
	animation: panel_in 0.32s ease;
}

@keyframes panel_in {
	from { transform: translateX(40px); opacity: 0; }
	to { transform: none; opacity: 1; }
}

.coupon_panel .panel_hd {
	position: relative;
	display: flex;
	flex: none;
	gap: var(--space-lg);
	align-items: flex-start;
	margin-bottom: var(--space-2xl);
}

.coupon_panel .panel_hd .txt {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-xs);
	min-width: 0;
	padding-right: var(--space-3xl);
}

.coupon_panel .panel_hd .tit {
	font-size: var(--font-size-3xl);
	font-weight: var(--font-weight-semibold);
	line-height: 1.4;
	color: var(--color-text-secondary);
	letter-spacing: var(--font-letter-spacing-snug);
}

.coupon_panel .panel_hd .desc {
	font-size: var(--font-size-md);
	line-height: 1.6;
	color: var(--color-text-tertiary);
}

/* 닫기 — neutral 원 40 + x 20, 헤더 우상단 (-10, -10) */
.coupon_panel .panel_close {
	position: absolute;
	top: -10px;
	right: -10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--size-control-md);
	height: var(--size-control-md);
	color: var(--color-text-primary);
	background: var(--color-bg-neutral-default);
	border-radius: var(--radius-full);
}

.coupon_panel .panel_close .ico {
	width: var(--size-icon-md);
	height: var(--size-icon-md);
}

/* 본문 — 내부 스크롤, 대화 gap 24 · 하단 24 */
.coupon_panel .panel_bd {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-xl);
	min-height: 0;
	padding-bottom: var(--space-xl);
	overflow-y: auto;
	scrollbar-width: none;
}

.coupon_panel .panel_bd::-webkit-scrollbar {
	display: none;
}

.chat_list {
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
	width: 100%;
}

.chat_row {
	display: flex;
	width: 100%;
}

/* 맥스 — 아바타 56(brand-subtle 원, 마스코트 PNG) + 말풍선(brand-subtle, 좌하단 0 radius 16, 16/24, 16 R secondary, max 320) gap 20 */
.chat_max {
	gap: var(--space-lgx);
	align-items: flex-start;
}

.avatar_max {
	display: inline-flex;
	flex: none;
	align-items: flex-end;
	justify-content: center;
	width: 56px;
	height: 54px;
	overflow: hidden;
	background: var(--color-bg-brand-subtle);
	border-radius: var(--radius-full);
}

.avatar_max img {
	width: 58px;
	height: 59px;
	margin-bottom: -11px;
	object-fit: cover;
}

.chat_col {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	align-items: flex-start;
	min-width: 0;
}

.chat_row .bubble {
	max-width: 320px;
	min-width: 150px;
	padding: var(--space-lg) var(--space-xl);
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-text-secondary);
	overflow-wrap: break-word;
}

.chat_max .bubble {
	background: var(--color-bg-brand-subtle);
	border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 0;
}

/* 나 — 우측 정렬, secondary-subtle, 우하단 0 */
.chat_me {
	justify-content: flex-end;
}

.chat_me .bubble {
	background: var(--color-bg-secondary-subtle);
	border-radius: var(--radius-lg) var(--radius-lg) 0 var(--radius-lg);
}

/* 질문 버튼 — Primary md + Primary Outline md, gap 12 */
.chat_acts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
}

.chat_acts .btn {
	font-size: var(--font-size-smd);
}

/* 핵심 정리 — brand-subtle radius 16 p16/20, 제목 20 SB brand, 행 = 라벨 110 quinary + 값 secondary (gap 6, 행 gap 4) */
.coupon_summary {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	width: 100%;
	padding: var(--space-lg) var(--space-lgx);
	background: var(--color-bg-brand-subtle);
	border-radius: var(--radius-lg);
}

.coupon_summary .tit {
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-semibold);
	line-height: 1.4;
	color: var(--color-text-brand);
	letter-spacing: var(--font-letter-spacing-snug);
}

.coupon_summary .rows {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.coupon_summary .rows > div {
	display: flex;
	gap: 6px;
	align-items: flex-start;
	font-size: var(--font-size-lg);
	line-height: 1.6;
}

.coupon_summary dt {
	flex: 0 0 110px;
	color: var(--color-text-quinary);
}

.coupon_summary dd {
	flex: 1;
	min-width: 0;
	color: var(--color-text-secondary);
}

.coupon_cta {
	display: flex;
	justify-content: center;
	width: 100%;
}

.coupon_cta .btn {
	padding: 0 var(--space-3xl);
	font-size: var(--font-size-2xl);
}

@media (max-width: 1024px) {
	.dim_panel {
		padding: var(--space-lgx);
	}

	.coupon_panel {
		max-height: calc(100dvh - 40px);
		padding: var(--space-xl) var(--space-xl) 0;
	}
}

@media (max-width: 480px) {
	.dim_panel {
		padding: 0;
	}

	.coupon_panel {
		width: 100%;
		max-height: 100dvh;
		padding: var(--space-lgx) var(--space-lg) 0;
		border-radius: 0;
	}

	.coupon_panel .panel_close {
		top: 0;
		right: 0;
	}

	.chat_row .bubble {
		max-width: none;
	}

	/* 맥스 아바타 56 → 48(원 비율 유지, 마스코트 이미지 동일 비율 축소) · 아바타↔말풍선 gap 20 → 16 — 사용자 지시 2026-08-28 */
	.chat_max {
		gap: var(--space-lg);
	}

	.avatar_max {
		width: 48px;
		height: 46px;
	}

	.avatar_max img {
		width: 50px;
		height: 51px;
		margin-bottom: -9px;
	}

	.coupon_cta .btn {
		width: 100%;
		padding: 0;
		font-size: 17px; /* 모바일 변수 모드 xl 18→17 (2026-08-31) */
	}
}

/* ==========================================================================
   page — payment (F 결제 그룹. F-1 530:28304 · F-1a 536:29239 · F-1b 530:33411 · F-1c 536:29475 · F-2 536:29661 · F-2a 536:29801 · F-2b 536:29963 · F-3 536:29873 · F-4 530:34192/36096 실측)
   전 화면 hdr_pay(로고만) · GNB 메뉴·푸터·Go top 없음 · 본문 760 컬럼(§4-21)
   ========================================================================== */
/* 본문 — 헤더 90 아래 80 · 하단 140, 제목 블록과 카드 사이 40 */
.pay_main {
	display: flex;
	flex-direction: column;
	gap: var(--space-3xl);
	align-items: center;
	padding: calc(90px + var(--space-6xl)) var(--space-3xl) 140px;
}

.pay_head,
.pay_card {
	width: 100%;
	max-width: var(--container-narrow);
}

/* 제목 블록 — Page title(Display/lg 40 Bold + Body/2xl 20 tertiary, gap 24, 중앙) · 완료 화면은 위에 일러스트 72 + gap 24 */
.pay_head {
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
	align-items: center;
	text-align: center;
}

.pay_head .pay_ico {
	width: 72px;
	height: 72px;
	object-fit: contain;
}

/* 가상계좌 발급 대기 스피너 (2026-09-03 발주사 지적 — 「입금 계좌를 발급하고 있어요」
   완료 화면이 잠깐 스쳤다가 계좌 화면으로 바뀌던 것을 로딩으로 바꿨다).
   일러스트(72px)가 있던 자리를 그대로 쓴다 — 스피너가 뜬 자리에 계좌 화면이 들어온다 */
.pay_spinner {
	width: 72px;
	height: 72px;
	border: 4px solid var(--color-border-subtle);
	border-top-color: var(--color-text-brand);
	border-radius: 50%;
	animation: pay_spin 0.9s linear infinite;
}

@keyframes pay_spin {
	to {
		transform: rotate(360deg);
	}
}

/* ⚠️ 「움직임 줄이기」를 켠 사람에게는 돌리지 않는다 — 회전은 어지럼증을 유발한다.
      대신 옅게 깜빡여 «기다리는 중» 이라는 사실은 남긴다 */
@media (prefers-reduced-motion: reduce) {
	.pay_spinner {
		animation: pay_fade 1.6s ease-in-out infinite;
	}

	@keyframes pay_fade {
		50% {
			opacity: 0.45;
		}
	}
}

.pay_head .tit {
	width: 100%;
	font-size: var(--font-size-6xl);
	font-weight: var(--font-weight-bold);
	line-height: 1.25;
	color: var(--color-text-primary);
	letter-spacing: var(--font-letter-spacing-tight);
}

.pay_head .desc {
	width: 100%;
	font-size: var(--font-size-2xl);
	line-height: 1.6;
	color: var(--color-text-tertiary);
}

/* 결제 카드 — 흰 90% · border subtle · radius 40 · p40 · 글로우(#47D0BE 8% 20), 블록 간 32 (consult_panel과 동일 표면) */
.pay_card {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xl);
	padding: var(--space-3xl);
	background: rgba(255, 255, 255, 0.9);
	border: var(--border-width-thin) solid var(--color-border-subtle);
	border-radius: var(--radius-4xl);
	box-shadow: 0 0 20px rgba(71, 208, 190, 0.08);
}

.pay_card > [hidden] {
	display: none;
}

/* 요약 행 묶음 — 행 간 20, 라벨 16 R quaternary / 값 16 M primary · 구분선 1px subtle */
.pay_summary {
	display: flex;
	flex-direction: column;
	gap: var(--space-lgx);
	width: 100%;
}

.pay_row {
	display: flex;
	gap: var(--space-lg);
	align-items: center;
	justify-content: space-between;
	font-size: var(--font-size-lg);
	line-height: 1.6;
}

.pay_row dt {
	color: var(--color-text-quaternary);
}

.pay_row dd {
	font-weight: var(--font-weight-medium);
	color: var(--color-text-primary);
	text-align: right;
}

.pay_summary .divider,
.pay_card > .divider {
	width: 100%;
	height: 1px;
	background: var(--color-border-subtle);
}

/* 결제 금액 행 — 라벨 18 SB quaternary · 금액 24 SB primary(Heading/lg) */
.pay_row.pay_total dt {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-semibold);
	line-height: 1.5;
}

.pay_row.pay_total dd {
	font-size: var(--font-size-3xl);
	font-weight: var(--font-weight-semibold);
	line-height: 1.4;
	letter-spacing: var(--font-letter-spacing-snug);
}

/* 계좌번호 복사 — 값 자체가 버튼: copy 아이콘 20 + gap 6 + 16 M 밑줄 text/brand (F-2b 536:29963 · 742:31703, 2026-08-27 디자인 변경) */
/* 🔴 복사 아이콘은 **맨 앞** — 은행명 · 계좌번호가 그 뒤에 한 덩어리로 온다
   (2026-09-04 발주사 지시 · `CopyAccount` 머리주석).
   밑줄은 글자에만 건다 — 아이콘까지 그으면 아이콘 아래로 삐져나온다 */
.pay_copy_btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-text-brand);
	font: inherit;
	font-weight: var(--font-weight-medium);
	/* 줄 높이를 물려받고 상자 높이도 한 줄로 고정한다 — 아이콘이 이 줄만 밀어 올리지 않게 */
	height: 1lh;
	line-height: inherit;
	text-decoration: none;
	vertical-align: middle;
	cursor: pointer;
}

.pay_copy_btn span {
	text-decoration: underline;
	text-underline-position: from-font;
}

/* ⚠️ **md(20) 를 쓰지 않는다.** 20px 아이콘이 24px 줄 상자를 29px 로 늘려
   그 줄만 아래로 밀렸다 — 발주사가 본 「정렬이 안 맞아 보인다」가 이것이다.
   글자 크기에 맞춘 sm(16) 이면 줄 높이 안에 들어간다 */
.pay_copy_btn .ico {
	width: var(--size-icon-sm);
	height: var(--size-icon-sm);
	flex-shrink: 0;
}

.pay_copy_btn:hover { color: var(--color-text-link-hover); }

/* 결제 수단 — 라벨 16 M + 칩 등분(48 pill, 15 SB, 선택 = brand-subtle) gap 12 · 체험은 칩 1개 + 안내 16 R quaternary */
.pay_method {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	width: 100%;
}

.pay_method .method_group {
	display: flex;
	gap: var(--space-md);
	width: 100%;
}

.pay_method .method_group .chip {
	flex: 1 1 0;
	justify-content: center;
	min-width: 0;
	padding: 0 var(--space-md);
	white-space: nowrap;
}

.pay_method .method_note {
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-text-quaternary);
}

/* 동의 + 결제 버튼 — gap 16 · 체크박스 16 R primary(flex 1) + [자세히 보기] 16 R quaternary 밑줄 · 버튼 xl 64 풀폭(미동의 disabled) */
.pay_agree {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	width: 100%;
}

.pay_agree .agree_row {
	display: flex;
	gap: var(--space-lg);
	align-items: flex-start;
	width: 100%;
}

.pay_agree .agree_row .chk {
	flex: 1;
	min-width: 0;
}

.pay_agree .agree_more {
	flex-shrink: 0;
	padding: 0;
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-text-quaternary);
	text-decoration: underline;
	text-underline-position: from-font;
	background: none;
	border: 0;
	cursor: pointer;
}

.pay_agree .agree_more:hover {
	color: var(--color-text-secondary);
}

/* 완료·실패 화면 버튼 묶음 — xl 64 풀폭 세로 gap 12, 실패 화면 보조 문구 15 R quaternary 중앙 */
.pay_acts {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	width: 100%;
}

.pay_acts .btn {
	padding: 0 var(--space-lg);
}

.pay_acts .note {
	font-size: var(--font-size-md);
	line-height: 1.6;
	color: var(--color-text-quaternary);
	text-align: center;
}

.pay_acts .note a {
	color: inherit;
	text-decoration: underline;
	text-underline-position: from-font;
}

/* 접힌 카드에서는 계좌 안내도 함께 접힌다 — 상세에 딸린 것이다 */
.ticket_banner.tb_collapsible:not(.is_open) > .tbn_vbank {
	display: none;
}

/* 결제 대기 줄의 가상계좌 안내 — 계좌를 다시 볼 수 있는 유일한 자리 (2026-09-02).
   완료 화면(F-2b)은 1회용 토큰 주소라 닫으면 못 돌아온다.
   ⚠️ 2026-09-03 부터 수강권 카드 안에서도 같은 모양을 쓴다 (무통장 입금일 때만) */
.ticket_banner_notice .tbn_vbank,
.ticket_banner > .tbn_vbank {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	align-items: center;
	padding: var(--space-lg) var(--space-xl);
	background: var(--color-bg-surface-subtle);
	border-radius: var(--radius-2xl);
}

.ticket_banner_notice .tbn_vbank_hd,
.ticket_banner > .tbn_vbank .tbn_vbank_hd {
	font-size: var(--font-size-md);
	line-height: 1.6;
	color: var(--color-text-tertiary);
}

.ticket_banner_notice .tbn_vbank_no,
.ticket_banner > .tbn_vbank .tbn_vbank_no {
	font-size: var(--font-size-lg);
	line-height: 1.6;
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-primary);
}

/* F-1b 환불 규정 모달 본문 — canvas 박스 radius 24 p24, 항목 간 20 · 제목 16 SB primary + 설명 16 R tertiary gap 8 */
.refund_list {
	display: flex;
	flex-direction: column;
	gap: var(--space-lgx);
	width: 100%;
	padding: var(--space-xl);
	background: var(--color-bg-canvas);
	border-radius: var(--radius-2xl);
}

.refund_list .item {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	font-size: var(--font-size-lg);
	line-height: 1.6;
}

.refund_list .item .tit {
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-primary);
}

.refund_list .item .desc {
	color: var(--color-text-tertiary);
}

@media (max-width: 1440px) {
	.pay_main {
		padding-top: calc(90px + var(--space-4xl));
		padding-bottom: 100px;
	}

	.pay_head .tit {
		font-size: 34px;
	}
}

@media (max-width: 1024px) {
	/* 헤더 60 */
	.pay_main {
		padding: calc(60px + var(--space-4xl)) var(--space-2xl) 80px;
	}

	.pay_head .tit {
		font-size: 30px;
	}

	/* 제목↔설명(완료 화면은 일러스트↔제목 포함) 간격 24→16 (사용자 지시 2026-08-27) */
	.pay_head {
		gap: var(--space-lg);
	}
}

@media (max-width: 768px) {
	.pay_main {
		padding-right: var(--space-lgx);
		padding-left: var(--space-lgx);
	}

	.pay_card {
		padding: var(--space-2xl) var(--space-xl);
		border-radius: var(--radius-2xl);
	}

	.pay_method .method_group {
		flex-direction: column;
	}

	.pay_method .method_group .chip {
		flex: none;
		width: 100%;
	}

	/* 768 이하 타이포 계층 — 제목 28 · 설명 18 · 결제 금액 20(제목보다 작게) · 버튼 56/18 · 행 16 (사용자 지적 '폰트 밸런스', 2026-08-27 — 480은 아래 블록이 제목 24·설명 16으로 한 단계 더) */
	.pay_head .tit { font-size: var(--font-size-4xl); }
	.pay_head .desc { font-size: var(--font-size-xl); }
	.pay_row.pay_total dd { font-size: var(--font-size-2xl); }

	.pay_agree .btn,
	.pay_acts .btn {
		height: var(--size-control-lg);
		font-size: var(--font-size-xl);
	}
}

@media (max-width: 480px) {
	.pay_main {
		padding-top: calc(60px + var(--space-2xl));
		padding-bottom: var(--space-4xl); /* 하단 80→48 (사용자 지시 2026-08-27) */
		gap: var(--space-2xl);
	}

	.pay_head .tit {
		font-size: var(--font-size-3xl);
	}

	.pay_head .desc {
		font-size: var(--font-size-lg);
	}

	/* 제목 블록↔내용 간격 32→48(카드 스타일이 빠져 콘텐츠가 바로 붙으므로 넉넉히, 사용자 지시 2회) · 완료/실패 일러스트 72→60 (2026-08-27) */
	.pay_main { gap: var(--space-4xl); }
	.pay_head { gap: var(--space-md); } /* 제목↔설명 16→12 (사용자 지시 2026-08-27, 1024~481은 16) */

	/* 결제 수단 칩 간격 12→8 · 결제 수단↔환불 동의 24→32 (사용자 지시 2026-08-27) */
	.pay_method .method_group { gap: var(--space-sm); }
	.pay_agree,
	.pay_acts { margin-top: var(--space-sm); } /* 완료·실패 화면의 금액 행↔버튼도 24→32 */

	.pay_head .pay_ico {
		width: 60px;
		height: 60px;
	}

	/* 480 이하 카드 스타일 제거 — 페이지 여백 20 안에 플랫 배치 (사용자 제안 2026-08-27, 결제 3장 공통) */
	.pay_card {
		gap: var(--space-xl);
		padding: 0;
		background: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.pay_row.pay_total dd {
		font-size: var(--font-size-2xl);
	}

	/* 480 이하: 세로 스택(자세히 보기 아래 줄) 대신 한 행 유지 — 라벨 텍스트만 2줄로 접히고 [자세히 보기]는 첫 줄 우측 (사용자 지시 2026-08-27) */
	.pay_agree .agree_row {
		gap: var(--space-md);
		align-items: flex-start;
	}

	.pay_agree .agree_row .agree_more {
		line-height: 1.5;
		white-space: nowrap;
	}

	.pay_agree .btn,
	.pay_acts .btn {
		height: var(--size-control-lg);
		font-size: var(--font-size-xl);
	}

	.refund_list {
		padding: var(--space-lg);
	}
}

/* ==========================================================================
   page — mypage 골격 (G-0 마이페이지 상단 · G-1e 수강권 배너(수강 중, 접힘) · 탭 6개 — 438:56708 G-3 실측. 서브 5장·본체 공용)
   ========================================================================== */
/* 상단 — gradient/hero 배경, 헤더 아래 pt 140 · pb 40. 아래 본문과 20 */
.my_top {
	padding: 140px 0 var(--space-3xl);
	background: var(--gradient-hero);
}

.my_top .container {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
}

/* 인사 행 — 좌우 패딩 8 · "Jane" 32 Bold brand + 나머지 primary · 우측 md 버튼 2개(아이콘 20) */
.my_greet {
	display: flex;
	gap: var(--space-lg);
	align-items: center;
	justify-content: space-between;
	padding: 0 var(--space-sm);
}

.my_greet .tit {
	font-size: var(--font-size-5xl);
	font-weight: var(--font-weight-bold);
	line-height: 1.25;
	color: var(--color-text-primary);
	letter-spacing: var(--font-letter-spacing-tight);
}

.my_greet .tit .name {
	color: var(--color-text-brand);
}

.my_greet .acts {
	display: flex;
	flex-shrink: 0;
	gap: var(--space-sm);
}

/* 수강권 배너 (Ticket banner) — 흰 · border subtle · radius 32 · 패딩 32/24 · gap 16 */
.ticket_banner {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	width: 100%;
	padding: var(--space-2xl) var(--space-xl);
	background: var(--color-bg-surface-default);
	border: var(--border-width-thin) solid var(--color-border-subtle);
	border-radius: var(--radius-3xl);
}

/* 첫 응답 전 자리 지킴 — 배너 대신 잠깐 놓는다.
   기본값으로 배너를 그리면 「수강권 없음」이든 「수강 중」이든 잠깐 틀린 안내가 나가고,
   아예 비우면 응답이 오는 순간 화면이 통째로 밀린다 (`MyTop.tsx`). */
.ticket_banner_skeleton {
	width: 100%;
	height: 148px;
	background: var(--color-bg-surface-default);
	border: var(--border-width-thin) solid var(--color-border-subtle);
	border-radius: var(--radius-3xl);
}

.ticket_banner .tb_head {
	display: flex;
	gap: var(--space-sm);
	align-items: center;
	padding-left: var(--space-xs);
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-semibold);
	line-height: 1.4;
	color: var(--color-text-brand);
	letter-spacing: var(--font-letter-spacing-snug);
}

.ticket_banner .tb_head .ico {
	width: 28px;
	height: 28px;
}

/* 재결제 버튼은 자리가 둘이다 — 1024 초과는 우상단(.tb_repay_wide), 1024 이하는
   진행 바 줄 오른쪽(.tb_repay_inline · sm). 발주사 지시 2026-09-04 */
.ticket_banner .tb_repay_inline { display: none; }

/* 요약 행 — 좌: 상태 배지(32) + 상품명 28 SB + 만료 D-day(좌 보더, 20 tertiary) + 펼침 chevron 24 / 우: 진행 바 360×12 + "n / m회" 20 + "남은 수업 n회" 20 brand */
.ticket_banner .tb_summary {
	display: flex;
	gap: var(--space-lg);
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.ticket_banner .tb_left,
.ticket_banner .tb_right {
	display: flex;
	gap: var(--space-md);
	align-items: center;
	min-width: 0;
}

.ticket_banner .tb_plan {
	display: flex;
	gap: var(--space-lg);
	align-items: center;
	min-width: 0;
}

.ticket_banner .tb_plan .name {
	font-size: var(--font-size-4xl);
	font-weight: var(--font-weight-semibold);
	line-height: 1.4;
	color: var(--color-text-primary);
	letter-spacing: var(--font-letter-spacing-snug);
	white-space: nowrap;
}

.ticket_banner .tb_plan .expiry {
	padding-left: var(--space-lg);
	font-size: var(--font-size-2xl);
	line-height: 1.4;
	color: var(--color-text-tertiary);
	letter-spacing: var(--font-letter-spacing-snug);
	white-space: nowrap;
	border-left: var(--border-width-thin) solid var(--color-border-default);
}

.ticket_banner .tb_toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: -10px;
	color: var(--color-text-tertiary);
	background: none;
	border: 0;
	border-radius: var(--radius-full);
	cursor: pointer;
}

.ticket_banner .tb_toggle .ico {
	width: 24px;
	height: 24px;
	transition: transform 0.2s ease;
}

.ticket_banner.is_open .tb_toggle .ico {
	transform: rotate(180deg);
}

.ticket_banner .tb_prog {
	display: flex;
	align-items: center;
	width: 360px;
	height: 12px;
	overflow: hidden;
	background: var(--color-bg-canvas);
	border-radius: var(--radius-full);
}

.ticket_banner .tb_prog .fill {
	height: 100%;
	background: var(--gradient-brand-bright); /* Figma Progress fill = gradient/brand-bright (306:12376 실측, 2026-08-19 단색→그라디언트 수정) */
	border-radius: var(--radius-full);
}

.ticket_banner .tb_count,
.ticket_banner .tb_left_cnt {
	font-size: var(--font-size-2xl);
	line-height: 1.4;
	color: var(--color-text-tertiary);
	letter-spacing: var(--font-letter-spacing-snug);
	white-space: nowrap;
}

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

/* 메타 행 — canvas p20 radius 16 · 항목 16(기간·금액 secondary, 결제 수단·쿠폰 quaternary) · 구분선 1×12 neutral-hover · 항목 좌우 24 */
.ticket_banner .tb_meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	width: 100%;
	padding: var(--space-lgx);
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-text-secondary);
	background: var(--color-bg-canvas);
	border-radius: var(--radius-lg);
}

.ticket_banner .tb_meta .item {
	padding: 0 var(--space-xl);
	white-space: nowrap;
}

.ticket_banner .tb_meta .item:first-child { padding-left: 0; }
.ticket_banner .tb_meta .item:last-child { padding-right: 0; }

.ticket_banner .tb_meta .item.is_sub {
	color: var(--color-text-quaternary);
}

.ticket_banner .tb_meta .item .num {
	color: var(--color-text-brand);
}

.ticket_banner .tb_meta .item .of {
	color: var(--color-text-secondary);
}

.ticket_banner .tb_meta .divider {
	width: 1px;
	height: 12px;
	background: var(--color-bg-neutral-hover);
}

/* 본문 — 상단 아래 20 · 하단 140 · 탭 → 콘텐츠 gap 32 */
.my_main {
	padding: var(--space-lgx) 0 140px;
}

.my_main .container {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xl);
}

/* 탭 6개 — .tabs > .tab.tab_xl(64, 18) 등분 · 카운트 배지 20 solid. 서브 페이지 = 페이지 간 링크(a) */
.my_tabs .tab {
	text-decoration: none;
}

.my_tabs .tab .badge {
	padding: 0 var(--space-sm);
}

/* 탭 콘텐츠 — 목록 헤더(총 n개 + 세그먼트) 16 · 아래 목록 */
.my_sect {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	width: 100%;
}

.my_bar {
	display: flex;
	gap: var(--space-lg);
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.my_bar .count {
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-text-primary);
}

/* 안내 박스 (보충 수업 쿠폰이란?) — brand-subtle radius 16 p16/20 gap 12 · 제목 info 24 + 18 SB brand · 본문 16 tertiary · 우측 md Outline 버튼 */
.my_notice {
	display: flex;
	gap: var(--space-md);
	align-items: flex-start;
	width: 100%;
	padding: var(--space-lg) var(--space-lgx);
	background: var(--color-bg-brand-subtle);
	border-radius: var(--radius-lg);
}

.my_notice .txt {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-sm);
	min-width: 0;
}

.my_notice .tit {
	display: flex;
	gap: 6px;
	align-items: center;
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-semibold);
	line-height: 1.4;
	color: var(--color-text-brand);
}

.my_notice .tit .ico {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
}

.my_notice .desc {
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-text-tertiary);
}

.my_notice > .btn {
	flex-shrink: 0;
}

/* ---- G-3 쿠폰 카드 (Coupon card 456:23549 · 곧 만료 452:73506 · 사용 완료 452:73521 · 기간 만료 452:73540) — 2열 gap 16 · p24 radius 24 · 사용 가능 = 흰+border default / 완료·만료 = surface-subtle+border subtle ---- */
.coupon_grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-lg);
	width: 100%;
}

.coupon_card {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	align-items: flex-end;
	padding: var(--space-xl);
	background: var(--color-bg-surface-default);
	border: var(--border-width-thin) solid var(--color-border-default);
	border-radius: var(--radius-2xl);
}

.coupon_card.is_done {
	background: var(--color-bg-surface-subtle);
	border-color: var(--color-border-subtle);
}

.coupon_card .title_row {
	display: flex;
	gap: var(--space-sm);
	align-items: center;
	width: 100%;
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-semibold);
	line-height: 1.5;
	color: var(--color-text-primary);
}

.coupon_card.is_done .title_row {
	color: var(--color-text-tertiary);
}

.coupon_card .info_row {
	display: flex;
	gap: var(--space-sm);
	align-items: center;
	width: 100%;
	font-size: var(--font-size-md);
	line-height: 1.6;
	color: var(--color-text-tertiary);
}

.coupon_card.is_done .info_row {
	color: var(--color-text-quinary);
}

.coupon_card .info_row .divider {
	width: 1px;
	height: 12px;
	background: var(--color-bg-neutral-hover);
}

.coupon_card .info_row .dday {
	font-weight: var(--font-weight-medium);
}

.coupon_card .info_row .dday.is_soon {
	color: var(--color-text-danger);
}

.coupon_card[hidden] {
	display: none;
}

/* ---- G-5 결제 이력 행 (Payment history row 489:2056 · 입금대기 477:30030 · 결제취소 477:30037) — px12 py24 gap 16 · border-b subtle · 좌 텍스트 flex 1 gap 12 / 우 금액 18 SB(취소 = quaternary 취소선) ---- */
.pay_hist {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.pay_hist_row {
	display: flex;
	gap: var(--space-lg);
	align-items: center;
	width: 100%;
	padding: var(--space-xl) var(--space-md);
	border-bottom: var(--border-width-thin) solid var(--color-border-subtle);
}

.pay_hist_row .txt {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-md);
	min-width: 0;
}

.pay_hist_row .title_row {
	display: flex;
	gap: var(--space-sm);
	align-items: center;
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-semibold);
	line-height: 1.5;
	color: var(--color-text-primary);
}

.pay_hist_row .info {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	font-size: var(--font-size-md);
	line-height: 1.6;
	color: var(--color-text-tertiary);
}

.pay_hist_row .info > div {
	display: flex;
	gap: var(--space-sm);
	align-items: flex-start;
}

.pay_hist_row .info dt {
	flex-shrink: 0;
}

.pay_hist_row .info .due {
	color: var(--color-text-secondary-accent);
}

.pay_hist_row .amount {
	flex-shrink: 0;
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-semibold);
	line-height: 1.5;
	color: var(--color-text-primary);
	text-align: right;
}

.pay_hist_row.is_cancel .amount {
	color: var(--color-text-quaternary);
	text-decoration: line-through;
}

.pay_hist_row[hidden] {
	display: none;
}

.pay_hist_wrap {
	display: flex;
	flex-direction: column;
	gap: var(--space-4xl);
	align-items: center;
	width: 100%;
}

/* 서브탭 빈 상태 — 목록 자리 중앙, 상하 여백 */
.my_empty {
	padding: var(--space-4xl) 0;
}

@media (max-width: 1440px) {
	.my_top {
		padding-top: 124px;
	}

	.my_greet .tit {
		font-size: var(--font-size-4xl);
	}
}

@media (max-width: 1280px) {
	.ticket_banner .tb_summary {
		flex-wrap: wrap;
	}

	.ticket_banner .tb_prog {
		width: 240px;
	}
}

@media (max-width: 1024px) {
	.my_top {
		padding: 84px 0 var(--space-xl);
	}

	.ticket_banner .tb_prog {
		flex: 1;
		width: auto;
		min-width: 120px;
	}

	.ticket_banner .tb_right {
		width: 100%;
	}

	/* ---- 태블릿(1024 이하)부터 모바일 배너 레이아웃 (사용자 지시 2026-08-19 — 480 전용에서 확대) ---- */
	/* 메타 행 — 1024 이하 세로 스택(구분선 제거) + 제목(좌) · 내용(우) 한 줄, 텍스트 태블릿 15 · 480 이하 14 (사용자 지시 2026-08-19) */
	.ticket_banner .tb_meta {
		flex-direction: column;
		gap: var(--space-sm);
		align-items: flex-start;
	}

	.ticket_banner .tb_meta .item { padding: 0; }

	.ticket_banner .tb_meta .divider { display: none; }

	.ticket_banner .tb_meta .item {
		display: flex;
		flex-wrap: wrap; /* 공간 부족 시 내용이 제목 아래 줄로 (사용자 지시 2026-08-19) */
		gap: var(--space-2xs) var(--space-md);
		align-items: baseline;
		justify-content: flex-end; /* 값은 항상 우측 정렬(줄바꿈 시에도) — 라벨은 ::before margin-right:auto로 좌측 */
		width: 100%;
		font-size: var(--font-size-md);
		white-space: normal;
	}

	/* 내용 = primary · Medium · 우측 정렬, 제목 = quinary · Regular (사용자 지시 2026-08-19) */
	.ticket_banner .tb_meta .item[data-lbl] {
		font-weight: var(--font-weight-medium);
		color: var(--color-text-primary);
		text-align: right;
	}

	.ticket_banner .tb_meta .item[data-lbl]::before {
		font-size: var(--font-size-md);
		font-weight: var(--font-weight-regular);
		color: var(--color-text-quinary);
		text-align: left;
		margin-right: auto;
		content: attr(data-lbl);
	}

	/* 쿠폰 항목(라벨 없음) — 본문 텍스트가 제목 역할(quinary), 값 .num/.of는 primary Medium, .num을 우측으로 */
	.ticket_banner .tb_meta .item:not([data-lbl]) {
		gap: var(--space-2xs);
		color: var(--color-text-quinary);
	}

	.ticket_banner .tb_meta .item:not([data-lbl]) .num { margin-left: auto; }

	.ticket_banner .tb_meta .item:not([data-lbl]) .num,
	.ticket_banner .tb_meta .item:not([data-lbl]) .of {
		font-weight: var(--font-weight-medium);
		color: var(--color-text-primary);
	}

	/* 발행된 개수는 브랜드 색 유지 (사용자 지시 2026-08-19) */
	.ticket_banner .tb_meta .item:not([data-lbl]) .num { color: var(--color-text-brand); }

	/* 진행 바 줄바꿈 — 바 풀폭 한 줄, 회차·남은 수업은 그 아래 줄 (사용자 지시 2026-08-19) */
	.ticket_banner .tb_right {
		flex-wrap: wrap;
		gap: var(--space-sm) var(--space-md);
	}

	.ticket_banner .tb_prog {
		flex: none;
		width: 100%;
	}

	/* 모바일 상태 배지 = 한 단계 축소(xl 32 → lg 28) + 배너 우상단 고정 (사용자 지시 2026-08-19) */
	.ticket_banner { position: relative; }

	.ticket_banner .tb_left > .badge {
		position: absolute;
		top: var(--space-xl);
		right: var(--space-lg);
		height: var(--size-badge-lg);
		padding: 0 var(--space-md);
	}

	/* 재결제 버튼은 진행 바 줄 오른쪽으로 내린다 (발주사 지시 2026-09-04).
	   우상단은 상태 배지 자리라 그 위에 겹칠 곳이 없다 */
	.ticket_banner .tb_repay_wide { display: none; }

	.ticket_banner .tb_repay_inline {
		display: inline-flex;
		margin-left: auto;
	}

	.ticket_banner .tb_plan .name {
		font-size: var(--font-size-3xl);
	}

	.ticket_banner .tb_plan .expiry,
	.ticket_banner .tb_count,
	.ticket_banner .tb_left_cnt {
		font-size: var(--font-size-xl);
	}

	/* 탭 6개는 가로 스크롤 */
	.my_tabs {
		padding: 0 var(--container-pad); /* 풀블리드 — 하단 라인이 화면 양끝까지, 탭 시작 위치는 컨테이너와 정렬 (사용자 지시 2026-08-19) */
		margin: 0 calc(-1 * var(--container-pad));
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: none;
	}

	.my_tabs::-webkit-scrollbar { display: none; }

	/* 스크롤 모드에선 overflow-y hidden이 bottom:-1px 밑줄을 잘라먹는다 → 안쪽(bottom:0)으로 (2026-08-19 확인) */
	.my_tabs > .tab::after { bottom: 0; }

	/* 우측에 잘린 탭이 있으면 흰 페이드 힌트 — sticky 0폭 요소, 끝 도달 시 design.js가 .is_more 제거 */
	.my_tabs::after {
		position: sticky;
		right: calc(-1 * var(--container-pad)); /* 풀블리드 스크롤러의 우측 패딩 너머 화면 끝까지 */
		flex: 0 0 calc(48px + var(--container-pad));
		align-self: stretch;
		margin-left: calc(-48px - var(--container-pad));
		content: "";
		background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--color-bg-surface-default) 70%);
		opacity: 0;
		transition: opacity 0.2s ease;
		pointer-events: none;
	}

	.my_tabs.is_more::after { opacity: 1; }

	.my_tabs > .tab {
		flex: 0 0 auto;
	}

	.my_tabs .tab_xl {
		height: var(--size-control-lg);
		font-size: var(--font-size-lg);
	}

	.my_tabs .tab_xl .content {
		padding: 0 var(--space-lgx);
	}

	.coupon_grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	.my_greet {
		flex-direction: column;
		align-items: flex-start;
	}

	.ticket_banner {
		padding: var(--space-xl) var(--space-lg);
		border-radius: var(--radius-2xl);
	}

	.ticket_banner .tb_left {
		flex-wrap: wrap;
		width: 100%; /* 접기 화살표가 배너 우측 끝에 붙도록 — 내용 폭이면 margin-left:auto가 안 먹음 (사용자 지시 2026-08-26) */
	}

	.ticket_banner .tb_toggle { margin-left: auto; }

	.ticket_banner .tb_meta {
		flex-direction: column;
		gap: var(--space-sm);
		align-items: flex-start;
	}

	.ticket_banner .tb_meta .item {
		padding: 0;
	}

	.ticket_banner .tb_meta .divider {
		display: none;
	}

	.my_notice {
		flex-direction: column;
	}

	.my_notice > .btn {
		align-self: flex-start;
	}

	.my_bar {
		flex-wrap: wrap;
	}

	.pay_hist_row {
		flex-direction: column;
		gap: var(--space-sm);
		align-items: flex-start;
		padding: var(--space-lgx) 0;
	}
}

@media (max-width: 480px) {
	.my_greet .tit {
		font-size: var(--font-size-3xl);
	}

	.my_greet .acts {
		width: 100%;
	}

	.my_greet .acts .btn {
		flex: 1;
	}

	/* 회차·남은 수업 480 이하 18→16 (사용자 지시 2026-08-19) */
	.ticket_banner .tb_count,
	.ticket_banner .tb_left_cnt {
		font-size: var(--font-size-lg);
	}

	/* 탭 버튼 좌우 패딩 20→16 (사용자 지시 2026-08-19) */
	.my_tabs .tab_xl .content { padding: 0 var(--space-lg); }

	/* 메타 텍스트 480 이하 14 (태블릿 15) */
	.ticket_banner .tb_meta .item,
	.ticket_banner .tb_meta .item[data-lbl]::before {
		font-size: var(--font-size-smd);
	}

	/* 모바일 배너 타이포 한 단계 축소 (사용자 지시 2026-08-19) — 헤드 20→18 · 아이콘 28→24 · 상품명 24→20 */
	.ticket_banner .tb_head {
		font-size: var(--font-size-xl);
	}

	.ticket_banner .tb_head .ico {
		width: 24px;
		height: 24px;
	}

	.ticket_banner .tb_plan .name {
		font-size: var(--font-size-2xl);
	}

	.ticket_banner .tb_plan {
		flex-wrap: wrap;
		gap: var(--space-sm);
	}

	.ticket_banner .tb_plan .expiry {
		padding-left: 0;
		border-left: 0;
	}

	.coupon_card {
		padding: var(--space-lg);
	}

	.coupon_card .title_row {
		flex-wrap: wrap;
	}
}

/* ---- G-6 수강확인서 카드 = .coupon_card 재사용(.cert_card) — 다운로드 = Primary sm + download 16 ---- */
.cert_card .btn .ico {
	width: 16px;
	height: 16px;
}

/* ---- G-7 알림 탭 — .ntf_row 페이지 목록(드롭다운 축소형 아님) · 헤더 = "새 알림 n건" + [모두 읽음 처리] md Outline ---- */
.my_ntf_list {
	display: flex;
	flex-direction: column;
	width: 100%;
}

/* 행 커서: 별도 지정 없음 — 링크(a.ntf_row)일 때만 브라우저 기본 포인터. 링크 없는 안내 알림은 일반 요소로 렌더해 기본 커서(사용자 지시 2026-08-26) */

/* ---- G-9 내 활동 — 게시글·좋아요 = .list_row 그대로 · 댓글 행 = .list_row.act_cmt(↳ 아이콘 + 댓글 본문 18 SB · 원글 제목 15 quinary · 날짜 15) · 후기 = .review_list_grid 재사용 ---- */
/* 내 활동 목록은 상단 inverse 라인 없음(디자인 477:33183 — 첫 행부터 하단 default 선만). .board_list 공용 border-top을 이 페이지에서만 제거(사용자 지적 2026-08-26) */
#act_sect .board_list {
	border-top: 0;
}

/* 내 활동 후기 카드는 그림자 없음(기본 민트 글로우·hover 글로우 모두 제거 — 사용자 지시 2026-08-27, review.html D-3 목록은 유지) */
#act_sect .review_card_grid,
#act_sect .review_card_grid:hover {
	box-shadow: none;
}

.list_row.act_cmt .tit_line .ico {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	color: var(--color-text-tertiary);
}

.list_row.act_cmt .src {
	font-size: var(--font-size-md);
	line-height: 1.6;
	color: var(--color-text-quinary);
}

.list_row.act_cmt .meta {
	font-size: var(--font-size-md);
	color: var(--color-text-quaternary);
}

.list_row[hidden] {
	display: none;
}

/* ---- G-8 회원정보 수정 — 인증 폼 골격(.auth_main) 재사용 · 알림 수신 스위치 행 · 회원 탈퇴 링크 · G-8a 유의사항 박스 ---- */
.profile_swt_row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-medium);
	line-height: 1.5;
	color: var(--color-text-primary);
}

.profile_swt_row .swt {
	flex-direction: row-reverse;
	gap: 0;
}

.profile_withdraw {
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-text-quaternary);
	text-align: center;
}

.profile_withdraw a {
	color: inherit;
	text-decoration: underline;
	text-underline-position: from-font;
}

.withdraw_box {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	width: 100%;
	padding: var(--space-xl);
	background: var(--color-bg-canvas);
	border-radius: var(--radius-lg);
}

.withdraw_box .tit {
	display: flex;
	gap: var(--space-sm);
	align-items: center;
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-semibold);
	line-height: 1.6;
	color: var(--color-text-danger);
}

.withdraw_box .tit .ico {
	width: 20px;
	height: 20px;
}

.withdraw_box ul {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	padding-left: var(--space-lg);
	font-size: var(--font-size-md);
	line-height: 1.6;
	color: var(--color-text-tertiary);
	list-style: disc;
}

.withdraw_box .remain {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: var(--space-lg);
	font-size: var(--font-size-md);
	line-height: 1.6;
	color: var(--color-text-tertiary);
	border-top: var(--border-width-thin) solid var(--color-border-default);
}

.withdraw_box .remain .num {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-danger);
}

/* ==========================================================================
   page — mypage 본체 (G-1 수강권 배너 11상태 · G-2 수업 캘린더 월간 238:18838 / 주간 355:19823 · G-2b 수업 상세 측면 패널 372:42030 ·
   G-2d 취소 모달 438:53452 · G-4 보충 수업 예약 원페이지 모달 477:38322 실측)
   ========================================================================== */
/* ---- G-1 배너 상태 변형 — 접힘(.tb_collapsible + .is_open 없음 = .tb_meta 숨김 · 서브 페이지 배너는 클래스 없음 → 항상 노출) · 홀딩(is_hold) · D-7(is_soon) · 만료 D+1(is_over) · 체험(is_trial) · 안내형(.ticket_banner_notice: 아이콘 60 + 제목 24 Bold + 설명 16 + CTA 48 (+ 스테퍼)) ---- */
.ticket_banner.tb_collapsible:not(.is_open) > .tb_meta,
.ticket_banner.tb_collapsible:not(.is_open) > .tb_after { display: none; }

/* 배너 우상단 [재결제하기] — Primary md, 헤더 행 우측 (306:14521) */
.ticket_banner .tb_head_row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

/* 요약 아래 안내(홀딩·체험) — Alert plain neutral, 16 R secondary · 링크 밑줄 brand */
.ticket_banner .tb_note {
	display: flex;
	gap: var(--space-sm);
	align-items: flex-start;
	padding: 0 var(--space-xs);
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-text-secondary);
}

.ticket_banner .tb_note .ico {
	flex: 0 0 var(--size-icon-md);
	width: var(--size-icon-md);
	height: var(--size-icon-md);
	margin-top: 3px;
	color: var(--color-text-tertiary);
}

.ticket_banner .tb_note a {
	color: var(--color-text-brand);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* 메타 아래 경고(만료 D+1) — Alert plain danger */
.ticket_banner .tb_after {
	display: flex;
	gap: var(--space-sm);
	align-items: flex-start;
	padding: 0 var(--space-xs);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-medium);
	line-height: 1.6;
	color: var(--color-text-danger);
}

.ticket_banner .tb_after .ico {
	flex: 0 0 var(--size-icon-md);
	width: var(--size-icon-md);
	height: var(--size-icon-md);
	margin-top: 3px;
}

/* 만료 임박·만료 = 만료 텍스트 danger */
.ticket_banner .tb_plan .expiry.is_danger { color: var(--color-text-danger); }

/* 홀딩·만료 = 진행 바 회색 그라디언트 (306:14011 실측: 158° neutral-default → neutral-hover) */
.ticket_banner.is_hold .tb_prog .fill,
.ticket_banner.is_over .tb_prog .fill { background: linear-gradient(158deg, var(--color-bg-neutral-default) 0%, var(--color-bg-neutral-hover) 100%); }

.ticket_banner.is_over .tb_left_cnt { color: var(--color-text-tertiary); }

/* 체험 = 주황 그라디언트 gradient/secondary-bright (339:33779 실측) */
.ticket_banner.is_trial .tb_prog .fill { background: var(--gradient-secondary-bright); }
.ticket_banner.is_trial .tb_left_cnt { color: var(--color-text-secondary-accent); }

/* 안내형 배너 (수강권 없음·만료·상담 진행 중·상담 완료·수업 준비 중) — 중앙 정렬, gap 20, 아이콘 60 */
.ticket_banner_notice {
	gap: var(--space-lgx);
	align-items: center;
	text-align: center;
}

.ticket_banner_notice .tbn_ico {
	width: 60px;
	height: 60px;
	object-fit: contain;
}

.ticket_banner_notice .tbn_txt {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	align-items: center;
	width: 100%;
}

.ticket_banner_notice .tbn_txt .tit {
	font-size: var(--font-size-3xl);
	font-weight: var(--font-weight-bold);
	line-height: 1.4;
	color: var(--color-text-primary);
	letter-spacing: var(--font-letter-spacing-snug);
}

.ticket_banner_notice .tbn_txt .desc {
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-text-tertiary);
}

.ticket_banner_notice .tbn_txt .desc strong {
	font-weight: var(--font-weight-medium);
	color: var(--color-text-primary);
}

/* 안내형 안 경고 — Alert plain danger 16 M */
.ticket_banner_notice .tbn_alert {
	display: flex;
	gap: var(--space-sm);
	align-items: flex-start;
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-medium);
	line-height: 1.6;
	color: var(--color-text-danger);
	text-align: left;
}

.ticket_banner_notice .tbn_alert .ico {
	flex: 0 0 var(--size-icon-md);
	width: var(--size-icon-md);
	height: var(--size-icon-md);
	margin-top: 3px;
}

/* 스테퍼 — 배너 폭 가득, 상단 12 (Stepper 278:1155 폭 FILL) */
.ticket_banner_notice .stepper {
	width: 100%;
	padding-top: var(--space-md);
}

.ticket_banner_notice .stepper .connector { flex: 1; }

/* ---- G-2 수업 캘린더 ---- */
.cal_sect {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	width: 100%;
}

/* 헤더 — 월 라벨 32 Bold + 이전/다음 40 원형 outline · 우측 월/주 세그먼트 */
.cal_head {
	display: flex;
	gap: var(--space-lg);
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin-bottom: var(--space-sm);
}

.cal_nav {
	display: flex;
	gap: var(--space-md);
	align-items: center;
	min-width: 0;
}

.cal_nav .cal_tit {
	font-size: var(--font-size-5xl);
	font-weight: var(--font-weight-bold);
	line-height: 1.25;
	color: var(--color-text-primary);
	letter-spacing: var(--font-letter-spacing-tight);
	white-space: nowrap;
}

.cal_nav .cal_arrows {
	display: flex;
	gap: var(--space-sm);
}

/* 이전/다음 화살표는 hover 효과 없음 — btn_light.btn_outline의 hover 배경(surface-hover)을 기본 배경으로 되돌림 (사용자 지시 2026-08-26) */
.cal_nav .cal_arrows .btn:hover { background: var(--color-bg-surface-default); }

/* [오늘] 은 예외 — 위 규칙은 «이전/다음 화살표» 에 한정한 결정이었다. 글자 버튼은 눌리는
   느낌이 없으면 죽은 것처럼 보인다 (2026-09-01) */
.cal_nav .cal_arrows .btn:not(.btn_icon):hover { background: var(--color-bg-surface-hover); }

/* 요일 행 — 7등분, 각 칸 좌 8, 16 M tertiary, 하단 8 */
.cal_wd_row {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	padding-bottom: var(--space-sm);
}

.cal_wd_row .wd {
	padding-left: var(--space-sm);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-medium);
	line-height: 1.6;
	color: var(--color-text-tertiary);
}

/* 월 그리드 — 주 행 min 120 · 상단 보더 subtle · 칸 px8 py12 gap8 */
.cal_grid {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.cal_week {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	min-height: 120px;
	border-top: var(--border-width-thin) solid var(--color-border-subtle);
}

.cal_cell {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	align-items: flex-start;
	min-width: 0;
	padding: var(--space-md) var(--space-sm);
	transition: background-color 0.2s ease;
}

/* 패널 열림 동안 선택 날짜 강조 (정의서 G-2c ④) */
.cal_cell.is_sel { background: var(--color-bg-brand-subtle); }

/* 날짜 마커 24 원 · 14 R · 오늘 = brand 원 + 흰 글자 */
.date_marker {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	font-size: var(--font-size-smd);
	line-height: 1.6;
	color: var(--color-text-primary);
	border-radius: var(--radius-full);
}

.date_marker.is_today {
	color: var(--color-text-inverse);
	background: var(--color-bg-brand-default);
}

.cal_cell .chips {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	width: 100%;
}

/* 수업 칩 (Class chip 302:11951) — p4 radius 6 · row gap 4 · 뱃지 20(12 R 흰, 보충 brand / 체험 secondary) + 14 R 라벨(말줄임)
   상태: 예정 neutral/tertiary · 출석 brand-subtle/brand · 결석 danger-subtle/danger · 휴강 secondary-subtle/secondary-accent · 수업 취소 neutral + 취소선
   50분 = .is_long 높이 64 */
.class_chip {
	display: flex;
	gap: var(--space-xs);
	align-items: center;
	width: 100%;
	height: 30px;
	padding: var(--space-xs);
	font-size: var(--font-size-smd);
	line-height: 1.6;
	color: var(--color-text-tertiary);
	text-align: left;
	background: var(--color-bg-neutral-default);
	border-radius: var(--radius-sm);
}

.class_chip.is_long {
	align-items: flex-start;
	height: 64px;
}


/* hover 효과 없음 — 2026-08-19 filter→opacity 0.85로 완화(스크롤 잭 원인)했다가 2026-08-26 사용자 요청으로 완전 삭제. 재도입 금지 */

.class_chip .badge {
	flex: 0 0 auto;
	height: var(--size-badge-sm);
	padding: 0 var(--space-sm);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-regular);
	border-radius: var(--radius-xs);
}

.class_chip .lbl {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.class_chip.is_attend { color: var(--color-text-brand); background: var(--color-bg-brand-subtle); }
.class_chip.is_absent { color: var(--color-text-danger); background: var(--color-bg-danger-subtle); }
.class_chip.is_off { color: var(--color-text-secondary-accent); background: var(--color-bg-secondary-subtle); }
.class_chip.is_cancel .lbl { text-decoration: line-through; }

/* 주간 뷰 — 좌측 time-gutter 64 + 요일 7열 · 행 34 = 30분 · 칩은 슬롯 안 절대배치(2,2 · 폭 −4) */
.wk_wd_row {
	display: grid;
	grid-template-columns: 64px repeat(7, minmax(0, 1fr));
	padding-bottom: var(--space-sm);
}

.wk_wd_row .wd {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	align-items: center;
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-medium);
	line-height: 1.6;
	color: var(--color-text-tertiary);
}

.wk_grid {
	display: grid;
	grid-template-columns: 64px repeat(7, minmax(0, 1fr));
	width: 100%;
}

.wk_time_col .t {
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	height: 34px;
	padding-right: var(--space-sm);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-medium);
	line-height: 1.6;
	color: var(--color-text-tertiary);
	white-space: nowrap;
}

.wk_col {
	position: relative;
	border-left: var(--border-width-thin) solid var(--color-border-subtle);
	border-bottom: var(--border-width-thin) solid var(--color-border-subtle);
	transition: background-color 0.2s ease;
}

.wk_col:last-child { border-right: var(--border-width-thin) solid var(--color-border-subtle); }

.wk_col.is_sel { background: var(--color-bg-brand-subtle); }

.wk_slot {
	position: relative;
	height: 34px;
	border-top: var(--border-width-thin) solid var(--color-border-subtle);
}

.wk_slot .class_chip {
	position: absolute;
	top: 2px;
	left: 2px;
	z-index: 1;
	width: calc(100% - 4px);
}

/* 범례 — Badge xl 5종 gap 12 + Alert plain */
.cal_legend {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	align-items: center;
	width: 100%;
	padding-top: var(--space-2xl);
}

.cal_legend .badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	justify-content: center;
}

.cal_legend .badge_cancel { text-decoration: line-through; }

.cal_legend .alert .tit { color: var(--color-text-tertiary); }

/* 점 범례 — 768 이하에서 칩의 보충·체험 뱃지가 색 점으로 바뀔 때만 노출(사용자 요청 2026-08-26). 점은 768 블록의 .class_chip .badge 규칙을 공유 */
.cal_legend .dot_legend {
	display: none;
	gap: var(--space-lg);
	justify-content: center;
}
.cal_legend .dot_legend .item {
	display: inline-flex;
	gap: var(--space-sm);
	align-items: center;
	font-size: var(--font-size-smd); /* 뱃지(badge_xl) 텍스트와 동일: 14 SB, 행간 1.5 */
	font-weight: var(--font-weight-semibold);
	line-height: 1.5;
	color: var(--color-text-tertiary);
}
@media (max-width: 768px) {
	.cal_legend { gap: var(--space-lgx); } /* 점 범례 ↔ 안내 문구 20 */
	.cal_legend .dot_legend { display: flex; }
	.cal_legend .badges + .dot_legend { margin-top: calc(var(--space-xs) * -1); } /* 뱃지 범례 ↔ 점 범례 = 20 - 4 = 16 (사용자 지시 2026-08-26) */
}

.cal_view[hidden] { display: none; }

/* ---- G-2b 수업 상세 측면 패널 (Modal 560 × (뷰포트−80) · 흰 · radius 32 · p24 · gap 20 · 우측 40) ---- */
.lesson_panel {
	display: flex;
	flex-direction: column;
	gap: var(--space-lgx);
	width: 560px;
	max-width: 100%;
	height: 100%;
	max-height: calc(100dvh - 80px);
	padding: var(--space-xl);
	background: var(--color-bg-surface-default);
	border-radius: var(--radius-3xl);
	box-shadow: var(--shadow-xl);
	animation: panel_in 0.32s ease;
}

.lesson_panel .lp_hd {
	display: flex;
	flex: none;
	gap: var(--space-lg);
	align-items: flex-start;
	width: 100%;
}

.lesson_panel .lp_hd .tit_line {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	gap: var(--space-sm);
	align-items: center;
	min-width: 0;
}

.lesson_panel .lp_hd .badges {
	display: flex;
	gap: var(--space-xs);
	align-items: center;
}

.lesson_panel .lp_hd .tit {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-semibold);
	line-height: 1.4;
	color: var(--color-text-primary);
}

.lesson_panel .lp_close {
	flex: 0 0 var(--size-icon-lg);
	width: var(--size-icon-lg);
	height: var(--size-icon-lg);
	color: var(--color-text-quaternary);
}

.lesson_panel .lp_close .ico { width: 100%; height: 100%; }

.lesson_panel .lp_bd {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-2xl);
	min-height: 0;
	overflow-y: auto;
	scrollbar-width: none;
}

.lesson_panel .lp_bd::-webkit-scrollbar { display: none; }

.lesson_panel .tabs { flex: none; }

.lp_pane[hidden] { display: none; }

.lp_pane {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xl);
}

/* 정보 행 — px8 gap12 · 라벨 16 M quaternary / 값 16 R secondary 우측 */
.lp_rows {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	padding: 0 var(--space-sm);
}

.lp_rows > div {
	display: flex;
	gap: var(--space-lg);
	align-items: flex-start;
	justify-content: space-between;
	font-size: var(--font-size-lg);
	line-height: 1.6;
}

.lp_rows dt { font-weight: var(--font-weight-medium); color: var(--color-text-quaternary); }
.lp_rows dd { color: var(--color-text-secondary); text-align: right; }

/* 액션 — 버튼 등분(min 120) gap 8 · 아래 안내 16 R plain */
.lp_acts {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
}

.lp_acts .btn_row {
	display: flex;
	gap: var(--space-sm);
	width: 100%;
}

.lp_acts .btn_row .btn {
	flex: 1;
	min-width: 120px;
}

.lp_acts .note {
	display: flex;
	gap: var(--space-sm);
	align-items: flex-start;
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-text-secondary);
}

.lp_acts .note .ico {
	flex: 0 0 var(--size-icon-md);
	width: var(--size-icon-md);
	height: var(--size-icon-md);
	margin-top: 3px;
	color: var(--color-text-tertiary);
}

/* 상태별 안내 — Alert 스택 gap 16 · 본문 ul */
.lp_alerts {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
}

.lp_alerts .alert .txt {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-xs);
	min-width: 0;
}

.lp_alerts .alert ul {
	padding-left: var(--space-lgx);
	font-size: var(--font-size-md);
	line-height: 1.6;
	color: var(--color-text-tertiary);
	list-style: disc;
}

/* 피드백 탭 (G-2c 438:52567) — 항목 6행(라벨 16 R tertiary + 별 20 ×5) · 섹션 4개(뱃지 brand + 16 R secondary) */
.fb_scores {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	padding: 0 var(--space-sm);
}

.fb_scores > div {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-text-tertiary);
}

.fb_scores .stars {
	display: flex;
	gap: var(--space-xs);
}

.fb_scores .stars img {
	width: 20px;
	height: 20px;
}

.fb_sects {
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
	padding: 0 var(--space-sm);
}

.fb_sect {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	align-items: flex-start;
}

.fb_sect p {
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-text-secondary);
}

/* ---- G-2d 취소 확인 모달 — 본문 canvas 박스 radius 24 p24 (Alert danger plain 제목 + ul) ---- */
.cancel_box {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	padding: var(--space-xl);
	background: var(--color-bg-canvas);
	border-radius: var(--radius-2xl);
}

.cancel_box .head {
	display: flex;
	gap: var(--space-sm);
	align-items: center;
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-semibold);
	line-height: 1.6;
	color: var(--color-text-danger);
}

.cancel_box .head .ico {
	width: var(--size-icon-md);
	height: var(--size-icon-md);
}

.cancel_box ul {
	padding-left: var(--space-xl);
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-text-tertiary);
	list-style: disc;
}

/* ---- G-4 보충 수업 예약 원페이지 모달 (560 · 본문 내부 스크롤 max 710 · gap 20) ---- */
.modal_booking .modal_bd {
	display: flex;
	flex-direction: column;
	gap: var(--space-lgx);
	max-height: 710px;
}

/* 사용 쿠폰 — surface-subtle px16 py14 radius 16 · 뱃지 + 15 SB */
.bk_coupon {
	display: flex;
	gap: var(--space-sm);
	align-items: center;
	padding: 14px var(--space-lg);
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-semibold);
	line-height: 1.5;
	color: var(--color-text-primary);
	background: var(--color-bg-surface-subtle);
	border-radius: var(--radius-lg);
}

/* 날짜 캘린더 (Booking calendar 468:1883) — 헤더 40 원형 + 16 SB 월 · 요일 14 R tertiary · 셀 48(.cal_day) gap 4 */
.book_cal {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	width: 100%;
}

.book_cal .bc_head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-semibold);
	line-height: 1.5;
	color: var(--color-text-primary);
}

.book_cal .bc_wd,
.book_cal .bc_week {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: var(--space-xs);
}

.book_cal .bc_wd span {
	font-size: var(--font-size-smd);
	line-height: 1.6;
	color: var(--color-text-tertiary);
	text-align: center;
}

.book_cal .bc_grid {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.book_cal .bc_week > * {
	display: flex;
	justify-content: center;
	min-width: 0;
	min-height: 48px;
}

/* 시간 슬롯 — chip square md(40 · radius 12) 랩 gap 8
   🚫 **그리드로 바꾸지 말 것** (2026-09-03 발주사 지적으로 원복). 「버블 크기가 제각각」을
      4열 그리드로 «맞췄다가» 원본과 다른 배치가 되어 달력 정렬까지 어긋나 보였다 —
      *"왜 디자인을 멋대로 바꾸냐"*. 배치는 원본 그대로 `flex-wrap` 이다. */
.bk_slots {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
}

/* 폭만 고르게 (2026-09-03 발주사 — *"이렇게 유지하면서 일정한 크기로 할 순 없어?"*).
   칩 글자는 전부 `HH:MM` 이라, 숫자 글리프 폭만 고정하면 **배치를 건드리지 않고**
   폭이 같아진다. 비례폭 폰트에서는 `1` 이 `0` 보다 좁아 `19:00` 과 `20:30` 이 달랐다. */
.bk_slots .chip {
	font-variant-numeric: tabular-nums;
}

/* 선생님 — .sel_row 재사용, 이름 16 SB primary + 메타 14 R tertiary */
/* 선생님 검색 — 목록이 길어지면 스크롤만으로는 못 찾는다 (사용자 요청 2026-09-01).
   `.ip_wr` 를 그대로 쓰고 돋보기 크기만 맞춘다. 목록이 짧으면 아예 그리지 않는다
   (`BookingModal` 의 `TEACHER_SEARCH_MIN`) — 퍼블리싱 데모(2명)에는 나오지 않는다. */
.bk_search .ico {
	width: var(--size-icon-sm);
	height: var(--size-icon-sm);
	color: var(--color-text-quaternary);
}

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

.bk_tutors .sel_row .name {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-semibold);
	line-height: 1.5;
	color: var(--color-text-primary);
}

.bk_tutors .sel_row .meta {
	font-size: var(--font-size-smd);
	line-height: 1.6;
	color: var(--color-text-tertiary);
}

/* 예약 확인 — surface-subtle p16 radius 16 · 제목 15 SB · 행 라벨 56 14 tertiary + 값 14 primary · 아래 Alert warning */
.bk_confirm {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.bk_summary {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	padding: var(--space-lg);
	background: var(--color-bg-surface-subtle);
	border-radius: var(--radius-lg);
}

.bk_summary .tit {
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-semibold);
	line-height: 1.5;
	color: var(--color-text-primary);
}

.bk_summary > div {
	display: flex;
	gap: var(--space-sm);
	font-size: var(--font-size-smd);
	line-height: 1.6;
	color: var(--color-text-primary);
}

.bk_summary dt {
	flex: 0 0 56px;
	color: var(--color-text-tertiary);
}

.bk_step[hidden] { display: none; }

/* ---- 반응형 ---- */
@media (max-width: 1440px) {
	.cal_nav .cal_tit { font-size: var(--font-size-4xl); }
}

@media (max-width: 1024px) {
	.ticket_banner .tb_head_row { flex-wrap: wrap; gap: var(--space-sm); }
	.ticket_banner_notice .stepper .step { width: 80px; }
	.cal_week { min-height: 120px; } /* 50분 칩(64) 기준 고정 — PC와 동일 (사용자 지시 2026-08-19) */

	/* 월 달력 풀블리드 — 1024 이하 좌우 여백 없이 화면 폭 (사용자 지시 2026-08-19, 월간 뷰만) */
	#cal_month {
		margin: 0 calc(-1 * var(--container-pad));
	}

	/* 요일·날짜 중앙 정렬 (사용자 지시 2026-08-19) */
	#cal_month .cal_wd_row .wd {
		padding-left: 0;
		text-align: center;
	}

	#cal_month .cal_cell { align-items: center; }
	.wk_wd_row,
	.wk_grid { grid-template-columns: 56px repeat(7, minmax(0, 1fr)); }
	.wk_time_col .t { font-size: var(--font-size-smd); }
	.dim_panel:has(> .lesson_panel) { padding: var(--space-lgx); }
	.lesson_panel { max-height: calc(100dvh - 40px); }
}

@media (max-width: 768px) {
	.cal_head { flex-wrap: wrap; }
	.cal_wd_row .wd,
	.wk_wd_row .wd { font-size: var(--font-size-smd); }
	.cal_cell { padding: var(--space-sm) var(--space-xs); }
	/* 768 이하 — 구분 뱃지는 6px 색 점으로 축소(보충=민트 · 체험=주황, 뱃지 배경색 재사용 — 사용자 요청 2026-08-19 · 8px 시도 후 6 유지 08-26). 점 범례 .cal_legend .dot_legend도 같은 점 */
	.class_chip .badge,
	.cal_legend .dot_legend .badge {
		flex: 0 0 6px;
		width: 6px;
		height: 6px;
		min-width: 0;
		padding: 0;
		overflow: hidden;
		font-size: 0;
		border-radius: var(--radius-full);
	}
	.cal_legend .badges { gap: var(--space-sm); }
	.lp_rows > div { flex-direction: column; gap: var(--space-2xs); }
	.lp_rows dd { text-align: left; }
}

@media (max-width: 480px) {
	/* 패널 버튼 세로 스택은 패널이 실제로 좁아지는 480(풀스크린)부터 — 768에선 패널 560 유지라 불필요 (2026-08-19 확인) */
	.lp_acts .btn_row { flex-direction: column; }
	.lp_acts .btn_row .btn { flex: none; min-width: 0; } /* 가로 모드의 flex:1(basis 0)이 세로 스택에선 버튼 높이 48을 덮어 28로 찌그러뜨림 → 해제 (사용자 지적 2026-08-19) */

	.cal_nav .cal_tit {
		font-size: var(--font-size-2xl); /* 24→20 — 주간 범위 제목 대응 (사용자 지시 2026-08-19) */
		white-space: normal; /* 길면 2줄 허용 — 화살표가 밀려나지 않게 */
	}
	.cal_nav .cal_arrows .btn_icon { width: var(--size-control-sm); height: var(--size-control-sm); }

	/* 480 이하 캘린더 헤더 = 항상 2줄 고정 — 1줄: 제목(좌)+화살표(우) · 2줄: 월/주 토글.
	   주간 제목이 길 때 토글이 밀려 내려와 월/주 전환마다 레이아웃이 달라지던 문제 (사용자 확인 2026-08-19) */
	.cal_head {
		flex-direction: column;
		gap: var(--space-md);
		align-items: flex-start;
	}

	.cal_head .cal_nav {
		justify-content: space-between;
		width: 100%;
	}

	.cal_head .cal_arrows { flex-shrink: 0; }
	/* 480 이하 — 칸 폭 ~48이라 칩은 시간만(선생님 이름 숨김) · 칸 패딩 8/2 */
	.cal_week { min-height: 100px; } /* 50분 칩 기준: 24+4+56+16 (사용자 지시 2026-08-19) */
	.cal_cell { gap: var(--space-xs); padding: var(--space-sm) 2px; }
	.class_chip { height: 24px; padding: var(--space-2xs) var(--space-xs); font-size: var(--font-size-xs); line-height: 1.4; } /* 높이 축소 — 25분 칩 30→24 · 상하 패딩 2 · 좌우 4 · 행간 1.4 (사용자 지시 2026-08-19 · 좌우 4 = 08-26) */
	.class_chip.is_long { height: 56px; } /* 50분 칩 64→56 */

	/* 주간 뷰 칩은 30분 칸(34px) 기준 높이 고정 — 480 축소에서 제외 (2026-08-19 확인) */
	.wk_slot .class_chip { height: 30px; }
	.wk_slot .class_chip.is_long { height: 64px; }
	.class_chip .who { display: none; }
	.wk_wd_row,
	.wk_grid { grid-template-columns: 44px repeat(7, minmax(0, 1fr)); }
	.wk_time_col .t { padding-right: var(--space-xs); font-size: var(--font-size-xs); }
	.dim_panel:has(> .lesson_panel) { padding: 0; }
	.lesson_panel { max-height: 100dvh; border-radius: 0; }
	.ticket_banner_notice .stepper { padding-top: 0; }
	.modal_booking .modal_bd { max-height: none; }
}

/* 375 이하 — 수강권 배너 만료 D-n을 상품명(주 n회…) 아래 줄로 (사용자 지시 2026-08-19) */
@media (max-width: 375px) {
	.ticket_banner .tb_plan .expiry { width: 100%; }

	/* 타이포 한 단계 더 축소 — 상품명 20→18 · 만료 18→16 · 회차 16→15 */
	.ticket_banner .tb_plan .name { font-size: var(--font-size-xl); }

	.ticket_banner .tb_plan .expiry { font-size: var(--font-size-lg); }

	.ticket_banner .tb_count,
	.ticket_banner .tb_left_cnt { font-size: var(--font-size-md); }

	/* 접기 화살표는 우측 상단(상품명 첫 줄 높이) 고정 · 아이콘 24→20, 히트 44는 음수 마진으로 유지
	   화살표가 아래 줄로 떨어지지 않도록 tb_left는 nowrap + 상품명 영역만 내부 줄바꿈 */
	.ticket_banner .tb_left {
		flex-wrap: nowrap;
		align-items: flex-start;
	}

	.ticket_banner .tb_plan {
		flex: 1;
		min-width: 0;
	}

	.ticket_banner .tb_toggle { align-self: flex-start; margin: -12px -12px -12px auto; }
	.ticket_banner .tb_toggle .ico { width: 20px; height: 20px; }
}

/* ==========================================================================
   responsive — 480 이하 폼 텍스트 축소 (사용자 요청 2026-08-26)
   lg 필드(56)의 입력 텍스트 18 → 16, 스위치·체크박스·라디오 라벨 18 스코프 → 16(기본 .chk/.rdo/.swt는 원래 16).
   각 스코프 규칙(.auth_wrap .ip 등)과 특이도가 같으므로 파일 끝에 두어 뒤 선언으로 이긴다
   ========================================================================== */
@media (max-width: 480px) {
	.ip_lg .ip,
	.ip_lg.ip,
	.auth_wrap .ip,
	.search_wrap .ip,
	.write_card .ip,
	.consult_panel .ip,
	.consult_panel .txa,
	.ip_cc_txt {
		font-size: var(--font-size-lg);
	}

	.agree_all .chk,
	.profile_swt_row {
		font-size: var(--font-size-lg);
	}
}

/* ==========================================================================
   responsive — 480 이하 타이포 정규화 (사용자 요청 2026-08-27)
   1) 최소 폰트 14 — 11·12·13을 쓰는 소형 컴포넌트(캡션·배지·소형 칩·세그먼트·스테퍼 원·캘린더 칩 등) 전부 14(smd)로 승격
      · 배지 sm·탭 카운트 배지는 높이 20→24(md)
   2) 서브 페이지 계층 통일 — 페이지 제목 24 · 섹션/패널/배너 제목 20 · 아코디언·FAQ 행 제목 18 · 목록 행·카드 행 제목 16 · 폼 라벨 16(입력 텍스트 16과 동급)
      · main 480 값은 Figma 390 실측이라 손대지 않는다
   특이도가 같은 앞선 480 규칙(.result_card .desc 등)을 뒤 선언으로 이기도록 파일 끝에 둔다
   ========================================================================== */
@media (max-width: 480px) {
	/* 1) 최소 14 */
	.cap_md,
	.cap_sm,
	.lbl_sm,
	.btn_sm,
	.ip_btn,
	.chip_sm,
	.seg_toggle .seg_btn,
	.badge,
	.badge_sm,
	.tab .badge,
	.avatar_sm,
	.stepper .step .circle,
	.cefr_row .circle,
	.class_chip,
	.wk_time_col .t {
		font-size: var(--font-size-smd);
	}

	/* 캘린더 칩 안 뱃지는 768 이하에서 이미 6px 점(font-size 0)이라 제외 */
	.badge_sm,
	.tab .badge { height: var(--size-badge-md); }

	/* 2) 계층 통일 */
	/* 페이지 제목 28 → 24 (page_tit·pay_head·my_greet·result_card와 동급) */
	.terms_doc .doc_tit,
	.level_head > .tit {
		font-size: var(--font-size-3xl);
	}

	/* 섹션·패널·배너 제목 24 → 20 (post_hd·rehire_banner·cal_tit와 동급) */
	.consult_sect .sect_tit,
	.coupon_panel .panel_hd .tit,
	.ticket_banner_notice .tbn_txt .tit {
		font-size: var(--font-size-2xl);
	}

	/* 아코디언 행 제목·FAQ "Q." 20 → 18 (FAQ 제목 18과 맞춤) · 수강권 만료일 20 → 18 */
	.acc_item .acc_head .tit,
	.faq_item .faq_q .mark,
	.ticket_banner .tb_plan .expiry {
		font-size: var(--font-size-xl);
	}

	/* 목록 행·카드 행 제목·보조 설명·폼 라벨 18 → 16 (list_row 16 · 입력 텍스트 16과 동급) */
	.result_card .desc,
	.level_head .sub,
	.board_bar .count,
	.ntf_row .tit,
	.my_notice .tit,
	.coupon_card .title_row,
	.pay_hist_row .title_row,
	.pay_hist_row .amount,
	.write_card .fld_lbl,
	.modal_review_write .fld_lbl,
	.consult_panel .fld_lbl,
	.review_txa .txa {
		font-size: var(--font-size-lg);
	}

	/* 후기 평균 점수 40 → 32 */
	.review_summary .score { font-size: var(--font-size-5xl); }
}

@media (max-width: 375px) {
	/* 위 480 규칙이 뒤 선언이라 기존 375 값(만료 16)을 덮지 않도록 재선언 */
	.ticket_banner .tb_plan .expiry { font-size: var(--font-size-lg); }
}

/* ─────────────────────────────────────────────────────────────────────────
   정렬 · 검색범위 커스텀 드롭다운 (.sel_dd) — 2026-08-31 사용자 확정

   네이티브 <select> 는 **열린 목록을 CSS 로 꾸밀 수 없다.** 닫힌 칸만 디자인돼 있고
   펼치면 OS 기본 패널(맥이면 회색 라운드 박스)이 떠서, 브라우저·OS 마다 다르게 보였다.
   국가번호(.cc_dd) · 타임존(.tz_dd) 을 대체한 것과 **같은 이유·같은 패턴**이다.

   ⚠️ .cc_dd 를 그대로 물려받되 검색칸(.cc_search)이 없고, 패널이 트리거 폭에 맞는다.
      선택지가 3~4개뿐이라 검색이 필요 없다.
   ⚠️ 이 블록이 파일 **끝**에 있는 이유 — .cc_dd(5574) · .board_sort(6164) ·
      .search_wrap .scope(1104) 보다 뒤여야 같은 특이도에서 이긴다. 위로 옮기면
      트리거 여백이 조용히 0 이 된다.
   ───────────────────────────────────────────────────────────────────────── */
.sel_dd {
	position: relative;
	flex: 1 1 auto;
	width: 100%;
}

.sel_dd .cc_panel {
	width: 100%;
	min-width: 120px;
	max-width: none;
}

.sel_dd .cc_list {
	max-height: 260px;
}

.sel_dd .cc_item .name {
	font-size: var(--font-size-md);
}

/* 트리거는 .ip_wr 를 재사용한다 — **닫힌 칸 모양이 네이티브 때와 같아야** 한다.
   네이티브 select 가 갖고 있던 좌우 여백만 여기서 다시 준다.

   🔴 width·height 를 **건드리지 않는다.** 전에 `height:100%` 를 줬더니, 감싼 .sel_dd 가
      높이 auto 라 백분율이 풀려 버튼이 **글자 높이로 쪼그라들었다** — 밑줄이 글자에
      바짝 붙어 «왼쪽으로 치우친» 것처럼 보였다 (2026-08-31 사용자 지적).
      .ip_wr 가 이미 width:100% · height:--size-control-default 를 갖고 있고,
      .board_sort · .search_wrap .scope 가 그 높이를 각자 덮는다. 그대로 두면 된다. */
.board_sort .sel_dd .cc_btn,
.search_wrap .scope .sel_dd .cc_btn {
	padding: 0 var(--space-lg);
	cursor: pointer;
}

/* 🔴 셰브론을 **흐름 안으로** 되돌린다.
   `.board_sort .ico` · `.search_wrap .scope .ico` 는 position:absolute 다 — 네이티브
   select 시절 마크업 전제였다(select 오른쪽에 --space-4xl 여백을 크게 주고 그 자리에
   아이콘을 얹었다). 커스텀 트리거는 아이콘이 flex 자식이라, 절대배치가 그대로 걸리면
   **글자 위에 겹쳐 찍힌다** (2026-08-31 사용자 지적: 「전체」와 화살표가 포개짐).
   .cc_dd 원래 방식(margin-left:auto 로 오른쪽 끝)으로 되돌린다 */
.board_sort .sel_dd .ip_select_ico,
.search_wrap .scope .sel_dd .ip_select_ico {
	position: static;
	flex: 0 0 auto;
	margin-left: auto;
	transform: none;
}

/* 🔴 선택지를 **한 칸에 겹쳐 쌓아** 폭을 가장 긴 항목에 맞춘다.
   네이티브 select 가 width:auto 에서 하던 일이다 — 안 하면 고른 글자 폭이 되어
   모바일(.board_sort{width:auto})에서 트리거가 찌그러지고, 고를 때마다 폭이 널뛴다
   (2026-08-31 사용자 지적) */
/* ⚠️ `min-width: 0` 을 주지 않는다. 그리드 자식의 기본 `min-width: auto` 가 «내용보다
   좁아지지 않게» 막아 주는데, 0 으로 풀면 폭이 내용에 맞춰지는 칸(아래 :has 규칙)에서
   **0 까지 줄어들어 글자가 통째로 잘려 사라진다** (2026-08-31 실측: sel_txt w=0). */
.sel_dd .sel_txt {
	display: grid;
}

.sel_dd .sel_txt > span {
	grid-area: 1 / 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	/* 숨김(visibility)은 **인라인 스타일**이 준다 — 이 파일이 늦게 와도 글자가 겹치지
	   않게 하려는 것이다 (SelectDropdown 주석). display:none 은 폭 계산에서 빠지므로
	   쓰지 않는다 */
}

.sel_dd .ip_cc_txt {
	font-size: var(--font-size-xl);
}

/* 검색범위는 칸이 좁다(120 · 모바일 96) — 글자를 한 단계 줄인다 */
.search_wrap .scope .sel_dd .ip_cc_txt {
	font-size: var(--font-size-lg);
}

@media (max-width: 768px) {
	/* 모바일 정렬은 테두리 없이 오른쪽에 붙고 **폭이 내용만큼**이다
	   (.board_sort{width:auto} — 위 겹쳐쌓기가 '가장 긴 항목' 폭을 만들어 준다).
	   여기서 width:100% 를 그대로 두면 auto 부모의 100% 라 0 으로 찌그러진다 */
	.board_sort .sel_dd {
		flex: 0 0 auto;
		width: auto;
	}

	/* 아이콘이 흐름 안에 있으므로 오른쪽 여백을 비워 둘 필요가 없다 (위 주석) */
	.board_sort .sel_dd .cc_btn {
		gap: var(--space-xs);
		padding: 0;
	}

	/* 트리거가 좁아졌으므로 패널은 오른쪽 끝에 맞춰 펼친다 — 왼쪽 기준이면 화면 밖으로 나간다 */
	.board_sort .sel_dd .cc_panel {
		right: 0;
		left: auto;
		width: max-content;
		min-width: 140px;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
   희망 시간대(E-1 15번) 커스텀 드롭다운 — 2026-09-01 사용자 지적

   같은 이유로 네이티브 select 를 대체한 마지막 자리다. 마크업에서 `.board_sort` 를
   **뗐다** — 저쪽 셰브론은 position:absolute 라 커스텀 트리거(아이콘이 flex 자식)에
   걸리면 글자 위에 겹쳐 찍힌다. 그래서 위 `.board_sort .sel_dd` 보정이 필요 없다.

   ⚠️ 위쪽 `.time_row .time_sel select.ip` 규칙은 **남겨 둔다** — 퍼블리싱 원본 HTML 이
      아직 네이티브 select 를 쓴다 (검색범위 때와 같은 판단).
   ───────────────────────────────────────────────────────────────────────── */
.time_row .time_sel .ip_cc_txt {
	font-size: var(--font-size-lg); /* .sel_dd 기본 xl 을 되돌린다 — 네이티브 때 값이 lg 였다 */
}

@media (max-width: 480px) {
	/* 375 에서 「희망시간 선택」이 잘리지 않게 좌우 여백을 줄인다 (네이티브 때와 같은 뜻) */
	.time_row .time_sel .cc_btn {
		padding: 0 var(--space-sm);
	}
}

@media (max-width: 480px) {
}

/* 결제 화면 보조 (`/pay/{토큰}` · 2026-09-01 이관) — 퍼블리싱에 없는 두 조각.

   ⚠️ 이니시스 PC 결제는 구매자 이메일 · 휴대폰이 **없으면 결제창이 안 열린다**(포트원).
      퍼블리싱 원본에는 그 칸이 없어서 여기서 자리를 만든다 — 필드 자체는 디자인 시스템의
      밑줄형(.fld/.ip)을 그대로 쓴다. */
.pay_card .pay_fields {
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
	width: 100%;
}

/* 결제대행사 고지 — 알림톡 심사 자료다(T-01). 작게 가운데 (page 주석 참조) */
.pay_card .pay_pg {
	font-size: var(--font-size-md);
	line-height: 1.6;
	color: var(--color-text-quinary);
	text-align: center;
}

/* 결제 그만두기 — F-4 모달을 여는 **눈에 보이는** 길 (2026-09-02 사용자 지적).
   퍼블리싱은 상단 로고 클릭만 트리거였는데, 로고는 «눌리는 것» 이라는 확신을 주지
   못해 어림짐작으로 눌러야 했다. 결제 버튼과 경쟁하지 않도록 밑줄 텍스트로만 둔다. */
.pay_card .pay_quit {
	align-self: center;
	/* 카드 기본 간격(32)은 결제대행 고지와 묶기엔 멀다 — 한 덩어리로 붙인다 */
	margin-top: calc(-1 * var(--space-lg));
	font-size: var(--font-size-md);
	line-height: 1.6;
	color: var(--color-text-quinary);
	text-decoration: underline;
	text-underline-position: from-font;
}

/* 링크 만료 · 완료 안내의 보충 문장 */
.pay_card .pay_note {
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-text-quaternary);
	text-align: center;
}

/* 신청서 폼 자리 지킴 — 「받을 수 있는가」를 서버에 묻는 동안 (2026-09-01 사용자 지적).
   폼을 먼저 그리면 차단 대상이 문항을 적기 시작한 뒤 화면이 통째로 바뀐다. */
.consult_wrap .consult_boot {
	padding: var(--space-6xl) 0;
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-text-quaternary);
	text-align: center;
}