@charset "utf-8";

/* =========================================================
   맑은환급캠퍼스 업그레이드 테마 - custom.css
   - 통 퍼블리싱용 공통 스타일시트
   - 슬라이더: Swiper 사용
   ========================================================= */

/* ---------------------------------------------------------
   01. Webfont - Pretendard (local)
   --------------------------------------------------------- */
@font-face {
	font-family: "Pretendard";
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url("./fonts/Pretendard-Regular.woff2") format("woff2");
}
@font-face {
	font-family: "Pretendard";
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	src: url("./fonts/Pretendard-Medium.woff2") format("woff2");
}
@font-face {
	font-family: "Pretendard";
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	src: url("./fonts/Pretendard-Bold.woff2") format("woff2");
}

/* ---------------------------------------------------------
   02. Design Tokens
   --------------------------------------------------------- */
:root {
	/* Font family */
	--font-base: "Pretendard", "Pretendard Variable", -apple-system, BlinkMacSystemFont,
		"Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif;

	/* Font weight */
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-bold: 700;

	/* Font size scale */
	--fs-title: 36px;   /* 섹션/페이지 타이틀 */
	--fs-h1: 34px;
	--fs-h2: 24px;
	--fs-h3: 20px;
	--fs-h4: 18px;
	--fs-b1: 15px;
	--fs-b2: 13px;
	--fs-b3: 12px;

	/* Line height */
	--lh-heading: 1.3;
	--lh-body: 1.5;

	/* ===== Color : Brand ===== */
	--c-primary: #4EB397;        /* 메인 그린 (수강신청/강조) */
	--c-primary-dark: #2fa869;   /* hover/active */
	--c-primary-soft: #e6f6ee;   /* 연한 배경 (강의실 입장/답변완료) */

	/* ===== Color : Semantic ===== */
	--c-red: #ef5b5b;            /* 수강취소/위험 */
	--c-red-soft: #fdeeee;
	--c-orange: #ef9a3c;         /* 강의연장/답변대기 */
	--c-orange-soft: #fdf4e3;
	--c-yellow: #e2b21f;         /* 인기 */
	--c-yellow-soft: #fbf3d5;
	--c-blue: #7b8ce8;           /* 사업주지원 */
	--c-blue-soft: #eceffb;
	--c-teal: #3cc7c0;           /* 컨소시엄 */
	--c-teal-soft: #e3f7f6;
	--c-coral: #f5845e;          /* 내일배움카드 */
	--c-coral-soft: #fdeee7;

	/* ===== Color : Gray scale ===== */
	--c-gray-dark: #222222;      /* 본문 기본 */
	--c-gray-text: #333333;      /* 제목/강조 텍스트 */
	--c-gray-sub: #555555;       /* 보조 텍스트 */
	--c-gray-light: #888888;     /* 캡션/placeholder */
	--c-gray-disabled: #bbbbbb;  /* 비활성 텍스트/아이콘 */
	--c-gray-pale: #eeeeee;      /* 큰 숫자/연한 강조 */
	--c-gray-border: #e5e7eb;    /* 보더 */
	--c-gray-bg: #f0f1f3;        /* 비활성 배경 */
	--c-line: #ededed;           /* 구분선 */
	--c-bg: #fafafa;             /* 섹션 배경 */
	--c-white: #ffffff;

	/* ===== Color : Text alias ===== */
	--c-text: var(--c-gray-dark);
	--c-text-strong: var(--c-gray-text);
	--c-text-sub: var(--c-gray-light);

	/* ===== Radius ===== */
	--radius-sm: 5px;
	--radius: 10px;    /* 기본 radius */
	--radius-lg: 20px;
	--radius6: 6px;
}

/* ---------------------------------------------------------
   02-1. Reset
   --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure, figcaption, footer, header, hgroup,
menu, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }

ul, ol, li { list-style: none; }

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

button {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

input, textarea, select {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}

img { max-width: 100%; vertical-align: middle; border: 0; }

table { border-collapse: collapse; border-spacing: 0; }

em, address { font-style: normal; }

/* ---------------------------------------------------------
   03. Base
   --------------------------------------------------------- */
html {
	font-size: var(--fs-b1); /* 기준 15px */
}

body {
	font-family: var(--font-base);
	font-size: var(--fs-b1);
	font-weight: var(--fw-regular);
	line-height: var(--lh-body);
	color: #222;
	letter-spacing: -0.02em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	word-break: keep-all;
}

/* 폼 placeholder 공통 색상 */
input::placeholder,
textarea::placeholder {
	color: #bbbbbb;
}

/* ---------------------------------------------------------
   04. Typography
   - Heading(h1~h4) : 태그에 직접 스타일 (기본 Regular 400)
   - Body(.b1~.b3)  : 크기 지정 클래스 (본문엔 태그가 없으므로 클래스 사용)
   - 굵기 변경       : .medium(500) / .bold(700) 공통 모디파이어
                       예) <h2 class="bold">, <p class="b2 medium">
   --------------------------------------------------------- */

/* Heading - 태그 직접 스타일 */
h1, h2, h3, h4 {
	font-family: var(--font-base);
	font-weight: var(--fw-regular);
	line-height: var(--lh-heading);
	color: inherit;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

/* Body - 크기 클래스 */
.b1, .b2, .b3 {
	font-family: var(--font-base);
	font-weight: var(--fw-regular);
	line-height: var(--lh-body);
	color: inherit;
}
.b1 { font-size: var(--fs-b1); }
.b2 { font-size: var(--fs-b2); }
.b3 { font-size: var(--fs-b3); }

/* Weight modifier - 헤딩/본문 공통 */
.medium { font-weight: var(--fw-medium); }
.bold { font-weight: var(--fw-bold); }

/* ---------------------------------------------------------
   05. Color Utilities
   --------------------------------------------------------- */
.c-primary { color: var(--c-primary); }
.c-red { color: var(--c-red); }
.c-orange { color: var(--c-orange); }
.c-yellow { color: var(--c-yellow); }
.c-blue { color: var(--c-blue); }
.c-teal { color: var(--c-teal); }
.c-coral { color: var(--c-coral); }
.c-sub { color: var(--c-text-sub); }

.bg-primary { background: var(--c-primary); }
.bg-primary-soft { background: var(--c-primary-soft); }
.bg-gray { background: var(--c-bg); }

/* ---------------------------------------------------------
   05-1. Layout - 공통 컨테이너
   - 모든 섹션의 콘텐츠 영역을 가운데 정렬 (최대 1440)
   --------------------------------------------------------- */
.c-container {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 20px;}

/* 서브페이지 공통 본문 컨테이너 (상단 이미지/푸터와 100 간격) */
.subpage { padding: 100px 0; }
.subpage > *:first-child { padding-top: 0; margin-top: 0; }
.subpage:not(.subpage--flush-bottom) > *:last-child { padding-bottom: 0; margin-bottom: 0; }
/* 인사말 등: 하단 간격 제외 (섹션 자체 여백은 유지) */
.subpage--flush-bottom { padding-bottom: 0; }
/* 상단 여백 50 (상세/검색/장바구니 등) */
.subpage--pt50 { padding-top: 50px; }

/* ---------------------------------------------------------
   06. Button
   - 구조: .btn (base) + 색상 변형
   - 아이콘은 .btn 안에 <i>/<span> 으로 배치 (gap 자동)
   --------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap:10px;
	height: 50px;            /* 기본 = lg */
	padding: 0 20px;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	font-family: var(--font-base);
	font-size: var(--fs-b1);
	font-weight: var(--fw-bold);
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;}
.btn:disabled,
.btn.is-disabled {
	cursor: default;
	pointer-events: none;
}
/* 화살표 아이콘 - currentColor 상속 (버튼/링크 글자색을 따라감) */
.ico-arrow {
	display: inline-block;
	width: 10px;
	height: 9px;
	background-color: currentColor;
	-webkit-mask: url("../images/ico-arrow-right.svg") no-repeat 50% 50%;
	mask: url("../images/ico-arrow-right.svg") no-repeat 50% 50%;
	-webkit-mask-size: contain;
	mask-size: contain;
}
.ico-arrow.left { transform: rotate(180deg); }
.ico-arrow.up { transform: rotate(-90deg); }
.ico-arrow.down { transform: rotate(90deg); }

/* 원형 X 아이콘 - currentColor 상속 (신청마감=흰색 / 삭제=회색) */
.ico-circle-x {
	display: inline-block;
	width: 15px;
	height: 15px;
	background-color: currentColor;
	-webkit-mask: url("../images/ico-circle-x.svg") no-repeat 50% 50%;
	mask: url("../images/ico-circle-x.svg") no-repeat 50% 50%;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* 버튼 내 컬러 아이콘 (img) 공통 사이징 */
.btn .btn-ico {
	flex: 0 0 auto;
	height: 15px;
	width: auto;
}

/* 졸업모자 / 책상 아이콘 - currentColor 상속 (soft=녹색 / 채움=흰색 자동) */
.ico-cap,
.ico-bookdesk {
	display: inline-block;
	width: 15px;
	height: 15px;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: 50% 50%;
	mask-position: 50% 50%;
	-webkit-mask-size: contain;
	mask-size: contain;
}
.ico-cap {
	-webkit-mask-image: url("../images/ico-graduation-cap.svg");
	mask-image: url("../images/ico-graduation-cap.svg");
}
.ico-bookdesk {
	-webkit-mask-image: url("../images/ico-bookdesk.svg");
	mask-image: url("../images/ico-bookdesk.svg");
}

/* 채움형 - 메인 */
.btn-primary {
	background: var(--c-primary);
	color: var(--c-white);
}
.btn-primary:hover { background: var(--c-primary-dark); }

/* 비활성 (결제대기) */
.btn-disabled,
.btn:disabled {
	background: var(--c-gray-bg);
	color: var(--c-gray-disabled);
}

/* 연한(soft) 색상형 */
.btn-soft-success {  /* 강의실 입장 */
	background: var(--c-primary-soft);
	color: var(--c-primary);
}
.btn-soft-success:hover { background: #d9f0e3; }

.btn-soft-warning {  /* 강의 연장 */
	background: var(--c-orange-soft);
	color: var(--c-orange);
}
.btn-soft-warning:hover { background: #f9ecd3; }

.btn-soft-danger {   /* 수강취소 */
	background: var(--c-red-soft);
	color: var(--c-red);
}
.btn-soft-danger:hover { background: #fbe2e2; }

/* 다크 (신청마감 등 마감/비강조 상태) */
.btn-dark {
	background: #555555;
	color: var(--c-white);
}
.btn-dark:hover { background: #1f1f1f; }

/* 회색 채움 (삭제 등 보조 액션) */
.btn-gray {
	background: var(--c-gray-bg);
	color: var(--c-gray-light);
}
.btn-gray:hover { background: #e6e8ea; }

/* 외곽선형 - 프라이머리 */
.btn-line {
	background: var(--c-white);
	color: var(--c-primary);
	border-color: var(--c-primary);
}
.btn-line:hover { background: var(--c-primary-soft); }

/* 외곽선형 - 중립(회색) : 우편번호 찾기 등 */
.btn-outline {
	background: var(--c-white);
	color: var(--c-gray-light);
	border-color: var(--c-gray-border);
}
.btn-outline:hover { background: var(--c-bg); }

/* 소프트형 - 회색 배경 + 프라이머리 텍스트/아이콘 (맛보기·장바구니) */
.btn-soft {
	background: #F8F8F8;
	color: var(--c-primary);
	border-color: #F8F8F8;
}
.btn-soft:hover { background: var(--c-primary-soft); border-color: var(--c-primary-soft); }
.btn-soft .btn-ico-play,
.btn-soft .btn-ico-cart {
	display: inline-block;
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: 50% 50%;
	mask-position: 50% 50%;
	-webkit-mask-size: contain;
	mask-size: contain;
}
.btn-soft .btn-ico-play {
	-webkit-mask-image: url("../images/ico-play.svg");
	mask-image: url("../images/ico-play.svg");
}
.btn-soft .btn-ico-cart {
	-webkit-mask-image: url("../images/ico-cart-plus.svg");
	mask-image: url("../images/ico-cart-plus.svg");
}

/* 외곽선형 - 그린 (취소 / 파일 업로드 등) */
.btn-line-primary {
	background: var(--c-white);
	color: var(--c-primary);
	border-color: var(--c-primary);
}
.btn-line-primary:hover { background: var(--c-primary-soft); }

/* 사이즈 변형 (높이 기준: sm 30 / md 43 / lg 50) */
.btn-sm { height: 30px; padding: 0 15px; font-size: var(--fs-b2); }  /* 변경 */
.btn-md { height: 43px; min-width: 100px; padding: 0 20px; }          /* 취소·삭제·등록·답글 숨기기·파일 업로드 */
.btn-lg { height: 50px; padding: 0 20px; font-size: var(--fs-h4); }   /* 기본(나머지) */
.btn-wide { min-width: 236px; }                                       /* 주문내역 조회·수강신청서·수강확인서·수료증 */
.btn-block { display: flex; width: 100%; }

/* 텍스트 링크형 더보기 ( 더보기 → ) */
.btn-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--fs-b1);
	color: #bbbbbb;
	border-bottom: 1px solid #bbbbbb;
	padding-bottom: 2px;
	line-height: 1.2;
}
/* 텍스트·밑줄·화살표 모두 #bbb (화살표는 currentColor 상속) */

/* ---------------------------------------------------------
   07. Badge / Tag
   - .badge          : 채움형 (카테고리 - 흰 글자)
   - .badge-soft     : 연한형 (상태 - 컬러 글자)
   --------------------------------------------------------- */
.badge,
.badge-soft {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 24px;
	padding: 0 11px;
	border-radius: var(--radius-lg);
	font-size: var(--fs-b3);
	font-weight: var(--fw-bold);
	line-height: 1;
	white-space: nowrap;
}

/* box형 (쿠폰적용 / 변경) - 더 크고 각진 형태 */
.badge.badge-box,
.badge-soft.badge-box {
	height: 28px;
	border-radius: var(--radius-sm);
}

/* 고정 너비 60 (차수과정 / 과정 / 도서 / 대기 / 종료) */
.badge.badge-w60,
.badge-soft.badge-w60 {
	width: 60px;
	padding-left: 0;
	padding-right: 0;
}

/* 채움형 (카테고리) */
.badge { color: var(--c-white); }
.badge-coral  { background: #FFBF48; }                 /* 내일배움카드(근로자) */
.badge-salmon { background: #FFA06D; }                 /* 내일배움카드(실업자) */
.badge-green  { background: var(--c-primary); }       /* 과정 / 쿠폰적용 */
.badge-lime   { background: #6EDA46; }                 /* 비환급 */
.badge-blue   { background: var(--c-blue); }          /* 사업주지원 */
.badge-skyblue { background: #669BFF; }                /* 차수과정 */
.badge-teal   { background: var(--c-teal); }          /* 컨소시엄 */
.badge-orange { background: #FFBF48; }                 /* 도서 */
.badge-red    { background: var(--c-red); }           /* 변경 */
.badge-gray   { background: var(--c-gray-disabled); } /* 종료 */

/* 연한형 (상태) */
.badge-soft-red    { background: var(--c-red-soft);     color: var(--c-red); }     /* 추천 / 미응시 / 미참여 / 미제출 */
.badge-soft-yellow { background: var(--c-yellow-soft);  color: var(--c-yellow); }  /* 인기 / 응시중 */
.badge-soft-green  { background: var(--c-primary-soft); color: var(--c-primary); } /* 신규 / 학습중 / 응시완료 / 평가완료 */
.badge-soft-orange { background: var(--c-orange-soft);  color: var(--c-orange); }  /* 답변대기 / 응시중 */
.badge-soft-pink   { background: #fceef6;               color: #e26db1; }            /* 미평가 */
.badge-soft-mint   { background: var(--c-primary-soft); color: var(--c-primary); } /* 답변완료 */
.badge-soft-blue   { background: var(--c-blue-soft);    color: var(--c-blue); }    /* 차수과정 */
.badge-soft-gray   { background: var(--c-gray-bg);      color: var(--c-gray-light); } /* 대기 */
.badge-soft-online { background: #EDF3FF;               color: #79A7FE; }            /* 온라인 */
.badge-soft-onsite { background: #F9EEEC;               color: #FF4540; }            /* 집합 / 화상 */

/* 캘린더 Today 표식 */
.badge-today {
	display: inline-flex;
	align-items: center;
	height: 25px;
	padding: 0 12px;
	border-radius: var(--radius-lg);
	background: var(--c-primary);
	color: var(--c-white);
	font-size: var(--fs-b1);
	font-weight: var(--fw-medium);
}

/* ---------------------------------------------------------
   08. Logo
   --------------------------------------------------------- */
.logo {
	display: inline-block;
	line-height: 0;
}
.logo img,
.logo svg {
	display: block;
	height: 38px;   /* 기준 높이 (가로는 비율 유지) */
	width: auto;
}

/* ---------------------------------------------------------
   09. Search Box
   - 구조: <form class="search-box"> <i ico> <input> <button clear> </form>
   --------------------------------------------------------- */
.search-box {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: 360px;
	height: 40px;
	padding: 0 20px;
	background: var(--c-white);
	border: 1px solid var(--c-gray-border);
	border-radius: 999px;
	transition: border-color 0.2s ease;
}
.search-box:focus-within {
	border-color: var(--c-gray-disabled);
}
.search-box .ico-search {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	background: url("../images/ico-search.svg") no-repeat 50% 50%;
}
.search-box input {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	border: 0;
	background: transparent;
	font-family: var(--font-base);
	font-size: var(--fs-b2);
	color: var(--c-gray-light);
	outline: none;
}
.search-box .btn-clear {
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	padding: 0;
	border: 0;
	background: url("../images/ico-search-x.svg") no-repeat 50% 50%;
	cursor: pointer;
}
.search-box .btn-clear:hover {
	opacity: 0.7;
}

/* ---------------------------------------------------------
   09-1. 폼 컨트롤 (공통) : select / input / textarea / radio / switch / editor
   --------------------------------------------------------- */
.c-select {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 48px;
	padding: 0 18px;
	border: 1px solid var(--c-gray-border);
	border-radius: var(--radius-sm);
	background: var(--c-white);
	font-size: var(--fs-b1);
	color: var(--c-gray-light);
	cursor: pointer;
}
.c-select svg { width: 16px; height: 16px; color: var(--c-gray-light); flex: 0 0 auto; }
.c-select--md { height: 43px; padding: 0 14px; font-size: var(--fs-b2); }

.c-input {
	width: 100%;
	height: 50px;
	padding: 0 16px;
	border: 1px solid var(--c-gray-border);
	border-radius: var(--radius-sm);
	font-family: var(--font-base);
	font-size: var(--fs-b1);
	color: var(--c-gray-dark);
	outline: none;
}
.c-input::placeholder { color: var(--c-gray-light); }

.c-textarea {
	width: 100%;
	min-height: 120px;
	padding: 14px 16px;
	border: 1px solid var(--c-gray-border);
	border-radius: var(--radius-sm);
	font-family: var(--font-base);
	font-size: var(--fs-b1);
	line-height: 1.5;
	color: var(--c-gray-dark);
	outline: none;
	resize: vertical;
}
.c-textarea::placeholder { color: var(--c-gray-light); }

.c-radio {
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 0;
	border: 1px solid #EEEEEE;
	border-radius: 50%;
	background: var(--c-white);
	cursor: pointer;
	transition: border-color 0.15s ease, border-width 0.15s ease;
}
.c-radio:checked { border: 4px solid var(--c-primary); }

.c-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex: 0 0 auto; }
.c-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.c-switch__track { position: absolute; inset: 0; background: var(--c-gray-border); border-radius: 999px; transition: background 0.2s ease; }
.c-switch__track::before {
	content: "";
	position: absolute;
	left: 3px;
	top: 3px;
	width: 18px;
	height: 18px;
	background: var(--c-white);
	border-radius: 50%;
	transition: transform 0.2s ease;
}
.c-switch input:checked + .c-switch__track { background: var(--c-primary); }
.c-switch input:checked + .c-switch__track::before { transform: translateX(20px); }

.c-editor { border: 1px solid var(--c-gray-border); border-radius: var(--radius-sm); overflow: hidden; }
.c-editor__toolbar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 2px;
	padding: 8px 12px;
	border-bottom: 1px solid var(--c-gray-border);
	background: var(--c-bg);
}
.c-editor__toolbar button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: none;
	border: 0;
	border-radius: var(--radius-sm);
	cursor: pointer;
	color: var(--c-gray-sub);
	font-size: var(--fs-b1);
	font-weight: var(--fw-medium);
}
.c-editor__toolbar button:hover { background: var(--c-gray-bg); }
.c-editor__toolbar button svg { width: 16px; height: 16px; }
.c-editor__toolbar .sep { width: 1px; height: 18px; margin: 0 6px; background: var(--c-gray-border); }
.c-editor__body { min-height: 300px; padding: 20px; font-size: var(--fs-b1); line-height: 1.5; color: var(--c-gray-dark); outline: none; }

/* ---------------------------------------------------------
   10. Top Banner (최상단 띠배너)
   --------------------------------------------------------- */
.top-banner {
	position: relative;
	width: 100%;
	background: var(--c-primary-soft);
}
.top-banner .c-container {
	display: flex;
	align-items: center;
	gap: 20px;
	height: 60px;
}
.top-banner__title {
	font-size: var(--fs-h4);   /* 18px */
	font-weight: var(--fw-bold);
	color: var(--c-gray-dark);
	white-space: nowrap;
}
.top-banner__desc {
	font-size: var(--fs-b1);   /* 15px */
	color: var(--c-gray-sub);
	white-space: nowrap;
}
.top-banner__right {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-left: auto;
}
/* 우측 끝 닫기 버튼 (배너 전체 폭 기준) */
.top-banner__close {
	position: absolute;
	right: 30px;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	background: url("../images/btn-x.svg") no-repeat 50% 50%;
	cursor: pointer;
}
.top-banner__close:hover { opacity: 0.7; }

/* ---------------------------------------------------------
   11. D-day Countdown
   - 구조: <div class="dday"> 라벨 + .dday__group(2자리) + .dday__colon
   --------------------------------------------------------- */
.dday {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.dday__label {
	font-size: var(--fs-h4);
	font-weight: var(--fw-bold);
	color: var(--c-gray-dark);
}
.dday__group {
	display: inline-flex;
	gap: 4px;
}
.dday__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: var(--radius6);
	background: #333333;
	color: var(--c-white);
	font-size: var(--fs-b1);
	font-weight: var(--fw-bold);
}
.dday__colon {
	font-size: var(--fs-h4);
	font-weight: var(--fw-bold);
	color: var(--c-gray-dark);
}

/* ---------------------------------------------------------
   12. Wish (찜 / 좋아요)
   - 구조: <button class="wish"> / 활성 시 .is-active
   --------------------------------------------------------- */
.wish {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}
.wish::before {
	content: "";
	width: 16px;
	height: 14px;
	background: url("../images/ico-wish-wh.svg") no-repeat 50% 50%;
	background-size: contain;
}
.wish.is-active::before {
	background-image: url("../images/ico-wish-red.svg");
}

/* ---------------------------------------------------------
   13. Checkbox
   - 구조: <label class="check"><input type="checkbox"><span class="check__box"></span></label>
   --------------------------------------------------------- */
.check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}
.check input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}
.check__box {
	position: relative;
	width: 25px;
	height: 25px;
	border: 1px solid var(--c-gray-border);
	border-radius: var(--radius-sm);
	background: var(--c-white);	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.check__box::after {
	content: "";
	position: absolute;
	left: 8px;
	top: 3px;
	width: 5px;
	height: 10px;
	border: solid var(--c-white);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	opacity: 0;
}
.check input:checked + .check__box {
	background: var(--c-primary);
	border-color: var(--c-primary);
}
.check input:checked + .check__box::after { opacity: 1; }

/* ---------------------------------------------------------
   14. Rating (별점)
   - 구조: <span class="rating"><i ico><b score><span count></span>
   --------------------------------------------------------- */
.rating {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 24px;
	padding: 0 12px;
	border: 1px solid var(--c-gray-border);
	border-radius: 50px;
	background: var(--c-white);}
.rating::before {
	content: "";
	width: 16px;
	height: 16px;
	background: url("../images/ico-star.svg") no-repeat 50% 50%;
	background-size: contain;
}
.rating__score {
	font-size: var(--fs-b2);
	font-weight: var(--fw-regular);
	color: var(--c-gray-sub);
}
.rating__count {
	font-size: var(--fs-b2);
	color: var(--c-gray-sub);
}

/* ---------------------------------------------------------
   15. Pagination
   - 구조: <nav class="pagination"> prev + .page(.is-active) ... + next
   --------------------------------------------------------- */
.pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
}
.pagination .page,
.pagination .nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 4px;
	border: 1px solid transparent;
	border-radius: var(--radius6);
	font-size: var(--fs-b1);
	color: var(--c-gray-sub);}
.pagination .page:hover,
.pagination .nav:hover {
	background: #E7F6F2;
	border-color: #4EB397;
	color: #4EB397;
}
.pagination .page.is-active {
	background: #E7F6F2;
	border-color: #4EB397;
	color: #4EB397;
	font-weight: var(--fw-bold);
}
.pagination .nav i { color: var(--c-gray-light); }
.pagination .nav.is-disabled { opacity: 0.4; pointer-events: none; }

/* ---------------------------------------------------------
   16. Stepper (수량 조절)
   - 구조: <div class="stepper"> button(-) input button(+)
   --------------------------------------------------------- */
.stepper {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--c-gray-border);
	border-radius: var(--radius6);
	overflow: hidden;
	background: var(--c-white);
}
.stepper button {
	width: 23px;
	height: 25px;
	border: 0;
	background: var(--c-white);
	color: #bbbbbb;
	font-size: var(--fs-h4);
	line-height: 1;
	cursor: pointer;
}
.stepper button:hover { background: var(--c-gray-bg); }
.stepper input {
	width: 40px;
	height: 25px;
	border: 0;
	border-left: 1px solid var(--c-gray-border);
	border-right: 1px solid var(--c-gray-border);
	text-align: center;
	font-family: var(--font-base);
	font-size: var(--fs-b3);
	color: #888888;
	outline: none;	-moz-appearance: textfield;
	appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------------------------------------------------------
   17. Header / GNB
   - 구조: .header > .header__top(로고+유틸) + .gnb(그린 네비)
   --------------------------------------------------------- */
.header {
	width: 100%;
	background: var(--c-white);
}

/* 상단 : 로고(가운데) + 로그인/회원가입(우측) */
.header__top .c-container {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80px;
}
.header__util {
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
}
.header__util a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 0 14px;
	font-size: var(--fs-b3);
	color: var(--c-gray-light);
}
.header__util a:first-child { border-right: 1px solid var(--c-gray-border); }
.header__util a:last-child { padding-right: 0; }
.header__util a img { width: 12px; height: 12px; }

/* 그린 네비게이션 바 */
.gnb {
	position: relative;
	width: 100%;
	background: var(--c-primary);
}
.gnb .c-container {
	display: flex;
	align-items: center;
	height: 70px;
}
/* 햄버거 (전체메뉴 토글) */
.gnb__toggle {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 24px;
	height: 64px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}
.gnb__toggle span {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--c-white);
	transition: transform 0.25s ease, opacity 0.25s ease;
}
/* 햄버거 → X (전체메뉴 열림) */
.gnb.is-open .gnb__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.gnb.is-open .gnb__toggle span:nth-child(2) { opacity: 0; }
.gnb.is-open .gnb__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 메뉴 */
.gnb__menu {
	display: flex;
	align-items: center;
	gap: 90px;
	margin-left: 50px;
}
.gnb__menu > li {
	position: relative;
}
.gnb__menu > li > a {
	display: inline-block;
	font-size: var(--fs-h3);
	font-weight:500;
	color: var(--c-white);
	line-height: 70px;
	letter-spacing: -0.02em;   /* Figma -2% */
}
.gnb__menu > li > a:hover { opacity: 0.85; }
/* 우측 검색창 (그린바 내부) */
.gnb .search-box {
	margin-left: auto;
	width: 230px;
	height: 40px;
}

/* ----- 서브메뉴 (드롭다운 / 전체메뉴 공통) ----- */
.gnb__sub {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	display: none;
	min-width: 165px;
	padding:0;
	background: var(--c-white);
	text-align: center;
	z-index: 20;
}
.gnb__sub > li > a {
	display: block;
	height: 50px;
	line-height: 50px;
	padding: 0 20px;
	font-size: var(--fs-b1);
	font-weight: 500;
	color: var(--c-gray-sub);
	white-space: nowrap;
}
.gnb__sub > li > a:hover {
	background: #F9F8F6;
	color: var(--c-primary);
}

/* 단일 호버 드롭다운 (전체메뉴가 닫혀 있을 때만) */
.gnb:not(.is-open) .gnb__menu > li:hover .gnb__sub {
	display: block;
	border: 1px solid var(--c-gray-border);
	border-top: 0;
	box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.04);
}

/* ----- 전체메뉴 (햄버거 클릭) ----- */
.gnb__allmenu-bg {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	min-height: 270px;
	background: var(--c-white);
	border-bottom: 1px solid var(--c-gray-border);
	z-index: 10;
}
.gnb.is-open .gnb__allmenu-bg { display: block; }
.gnb.is-open .gnb__sub {
	display: block;
	border: 0;
	box-shadow: none;
}

/* ---------------------------------------------------------
   18. Footer
   - 구조: .footer > .footer__links(흰 링크바) + .footer__body(다크)
   --------------------------------------------------------- */
.footer { width: 100%; }

/* 상단 링크바 */
.footer__links {
	background: var(--c-white);
	border-top: 1px solid var(--c-line);
}
.footer__links .c-container {
	display: flex;
	align-items: center;
	gap: 40px;
	height: 64px;
}
.footer__links a {
	font-size: var(--fs-b1);
	color: var(--c-gray-sub);
}
.footer__links a.is-point {
	color: var(--c-primary);
	font-weight: var(--fw-medium);
}

/* 다크 본문 */
.footer__body {
	background: #232323;
	padding: 50px 0;
}
.footer__inner {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 40px;
}

/* 좌측 정보 */
.footer__logo img { height: 38px; }
/* 로고 → 첫 줄(메타행) 간격 */
.footer__logo + .footer__row { margin-top: 20px; }
.footer__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 10px;
	font-size: var(--fs-b2);
	color: #aaaaaa;
}
.footer__row b {
	color: #FFFFFF;
	font-weight: 700;
	font-size: var(--fs-b1);
	letter-spacing: -0.02em;
	margin-right: 6px;
}
/* 메타행: 내용 텍스트(홍길동 등) 흰색 400 / 15px */
.footer__row--meta {
	color: #FFFFFF;
	font-weight: 400;
	font-size: var(--fs-b1);
}
/* 메타행: 항목 사이 구분선 */
.footer__row--meta > span + span {
	margin-left: 10px;
	padding-left: 10px;
	border-left: 1px solid #444444;
}
/* 연락처행: 아이콘 + 텍스트 (흰색 400 / 15px) */
.footer__row--contact {
	color: #FFFFFF;
	font-weight: 400;
	font-size: var(--fs-b1);
}
.footer__row--contact > span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}
/* 항목 사이 구분선 */
.footer__row--contact > span + span {
	margin-left: 10px;
	padding-left: 10px;
	border-left: 1px solid #444444;
}
/* 푸터 아이콘 (단색 mask - 글자색 상속) */
.f-ico {
	display: inline-block;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: 50% 50%;
	mask-position: 50% 50%;
	-webkit-mask-size: contain;
	mask-size: contain;
}
.f-ico.map { width: 15px; height: 15px; -webkit-mask-image: url("../images/ico-map.svg"); mask-image: url("../images/ico-map.svg"); }
.f-ico.phone { width: 15px; height: 15px; -webkit-mask-image: url("../images/ico-phone.svg"); mask-image: url("../images/ico-phone.svg"); }
.f-ico.mail { width: 15px; height: 15px; -webkit-mask-image: url("../images/ico-email.svg"); mask-image: url("../images/ico-email.svg"); }
.f-ico.headset { width: 24px; height: 24px; -webkit-mask-image: url("../images/ico-headset.svg"); mask-image: url("../images/ico-headset.svg"); }
.footer__copy {
	margin-top: 10px;
	font-size: var(--fs-b1);
	color: #777777;
}
.footer__host {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 20px;
	font-size: var(--fs-b1);
	color: #777777;
}
.footer__host svg { width: 12px; height: 12px; }

/* 우측 고객센터 */
.footer__cs { text-align: right; flex: 0 0 auto; }
.footer__cs-tel {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: var(--fs-h2);
	font-weight: var(--fw-bold);
	color: var(--c-white);
}
.footer__cs-tel .f-ico.headset { color: var(--c-white); }
.footer__cs-label { color: var(--c-white); }
.footer__cs-time {
	margin-top: 10px;
	font-size: var(--fs-b1);
	color: #999999;
}

/* ---------------------------------------------------------
   19. Hero / Main Visual (메인 슬라이드 - Swiper)
   --------------------------------------------------------- */
.hero {
	position: relative;
	width: 100%;
	overflow: hidden;
}
.hero-swiper { width: 100%; }
.hero-slide {
	height: 600px;
	background: url("../images/main_visual.jpg") no-repeat center center;
	background-size: cover;
}
.hero-slide__inner {
	display: flex;
	align-items: center;
	height: 100%;
}
.hero-slide__text { max-width: 620px; }
.hero-slide__badge {
	font-size: var(--fs-h1);          /* 34 */
	font-weight: var(--fw-bold);
	color: var(--c-orange);
	letter-spacing: -0.02em;
}
.hero-slide__title {
	margin-top: 14px;
	font-size: 38px;
	font-weight: var(--fw-bold);
	line-height: 1.3;
	color: var(--c-gray-dark);
	letter-spacing: -0.02em;
}
.hero-slide__desc {
	margin-top: 28px;
	font-size: var(--fs-h4);          /* 18 */
	color: var(--c-gray-sub);
}
.hero-slide__btn { margin-top: 40px; }

/* 하단 탭형 페이지네이션 */
.hero-pager {
	--swiper-pagination-bottom: 0px;   /* Swiper 기본 하단 여백(8px) 제거 */
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 5;
	display: flex;
	justify-content: center;
}
.hero-pager .swiper-pagination-bullet {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: 56px;
	margin: 0 !important;
	padding: 0 30px;
	border-radius: 12px 12px 0 0;
	background: rgba(255, 255, 255, 0.5);
	opacity: 1;
	font-size: 16px;
	font-weight: var(--fw-bold);
	color: var(--c-gray-dark);
	letter-spacing: -0.02em;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.hero-pager .swiper-pagination-bullet-active {
	background: var(--c-primary);
	color: var(--c-white);
}

/* ---------------------------------------------------------
   20. Shortcut (메인 바로가기 카드)
   --------------------------------------------------------- */
.shortcut { padding: 50px 0 0 0; }
.shortcut__list {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 20px;
}
.shortcut__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 20px;
	background: var(--c-white);
	border: 1px solid var(--c-gray-border);
	border-radius: var(--radius);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.shortcut__item:hover {
	box-shadow: 2px 4px 14px 0 rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}
.shortcut__ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 70px;
	height: 70px;
	border-radius: var(--radius-lg);
	background: #f3f7f5;
}
.shortcut__ico img { width: 35px; height: 35px; }
.shortcut__label {
	font-size: var(--fs-h4);   /* 18 */
	font-weight: var(--fw-medium);
	color: var(--c-gray-dark);
	letter-spacing: -0.02em;
}

/* ---------------------------------------------------------
   21. Card (강의 카드)
   - 뱃지(.badge), 찜(.wish)은 기존 컴포넌트 재사용
   --------------------------------------------------------- */
/* 카드 공통 : 흰 배경 + 테두리 + 라운드 박스 */
.card, .vcard, .vrow, .lcard, .wcard, .bookcard, .bookrow, .pcard, .prow {
	background: var(--c-white);
	border: 1px solid var(--c-gray-border);
	border-radius: var(--radius);
}
.card {
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover {
	box-shadow: 2px 6px 16px 0 rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

/* 썸네일 */
.card__thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #eef1ef;
	overflow: hidden;
}
.card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* 썸네일 placeholder 텍스트 (이미지 없을 때) — 카드 공통 */
.card__thumb-title,
.lcard__thumb-title,
.wcard__thumb-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	padding: 24px;
	font-size: var(--fs-b1);
	line-height: 1.5;
	color: var(--c-gray-disabled);
}
.card__wish {
	position: absolute;
	top: 10px;
	right: 10px;
}

/* 본문 */
.card__body { padding: 20px; }
.card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.card__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 10px;
	font-size: var(--fs-h4);   /* 18 */
	font-weight: var(--fw-middle);
	line-height: 1.4;
	min-height: 2.8em;         /* 1줄이어도 2줄 높이 유지 → 카드 높이 통일 */
	letter-spacing: -0.02em;
	color: var(--c-gray-dark);
}
.card__meta {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 20px;
	font-size: var(--fs-b1);
	color: var(--c-gray-light);
}
/* 카드 메타 아이콘 공통 (15px) */
.card__meta svg, .card__meta .ico-cal,
.lcard__meta img, .wcard__meta img,
.vrow__meta img, .vrow__meta svg,
.bookrow__meta img,
.pcard__meta img, .pcard__meta svg,
.prow__meta img, .prow__meta svg { width: 15px; height: 15px; flex: 0 0 auto; }
.card__divider {
	height: 1px;
	margin: 20px 0;
	background: var(--c-line);
}
.card__price {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-top: 16px;
}
.card__divider + .card__price { margin-top: 0; }
.card__price-old {
	font-size: var(--fs-b1);
	color: var(--c-gray-disabled);
	letter-spacing: -0.04em;
	text-decoration: line-through;
}
.card__price-now {
	font-size: var(--fs-h3);
	font-weight: var(--fw-bold);
	color: var(--c-primary);
	letter-spacing: -0.04em;
}

/* ----- 영상 카드 (.vcard) ----- */
.vcard {
	position: relative;
	overflow: hidden;
}
.vcard__thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #dfe3e1;
}
.vcard__thumb img { width: 100%; height: 100%; object-fit: cover; }
.vcard__thumb::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
}
.vcard__play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	width: 60px;
	height: 60px;
}
.vcard__play img { width: 100%; height: 100%; }
.vcard__body { padding: 20px; }
.vcard__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.vcard__time {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: var(--fs-b1);
	color: var(--c-gray-light);
}
.vcard__time svg { width: 15px; height: 15px; }
.vcard__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 14px;
	margin-bottom: -0.2em;   /* 마지막 줄 line-height 하단 여백 보정 */
	font-size: var(--fs-h4);
	font-weight: var(--fw-medium);
	line-height: 1.4;
	min-height: 2.8em;       /* 2줄 높이 확보 */
	color: var(--c-gray-dark);
}

/* ----- 가로형 영상 카드 (.vrow) : 웹진형 ----- */
.vlist { display: flex; flex-direction: column; gap: 20px; }
.vrow {
	position: relative;
	display: flex;
	gap: 20px;
	align-items: stretch;
	padding: 20px;
}
.vrow__thumb {
	position: relative;
	flex: 0 0 345px;
	width: 345px;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: #dfe3e1;
}
.vrow__thumb img { width: 100%; height: 100%; object-fit: cover; }
.vrow__thumb::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); }
.vrow__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; width: 56px; height: 56px; }
.vrow__play img { width: 100%; height: 100%; }
.vrow__body { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.vrow__title, .vrow__desc, .vrow__meta { align-self: stretch; }
.vrow__title { margin-top: 10px; font-size: var(--fs-h4); font-weight: var(--fw-medium); color: var(--c-text-strong); }
.vrow__desc {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 10px;
	font-size: var(--fs-b1);
	line-height: 1.5;
	color: var(--c-gray-sub);
}
.vrow__meta { margin-top: auto; padding-top: 18px; display: flex; gap: 20px; font-size: var(--fs-b2); color: var(--c-gray-light); }
/* 카드 메타 항목(아이콘+텍스트) 공통 */
.vrow__meta span, .bookrow__meta span,
.pcard__meta span, .prow__meta span,
.lcard__meta span, .wcard__meta span { display: inline-flex; align-items: center; gap: 6px; }
.vrow__time { padding: 4px 10px; background: #F8F8F8; border-radius: 999px; }

/* ----- 방송 편성표 (월간 캘린더 .bcal) ----- */
.bcal__nav { display: flex; align-items: center; justify-content: center; gap: 28px; margin-bottom: 28px; }
.bcal__nav-title { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--c-text-strong); }
.bcal__nav button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: none;
	border: 0;
	cursor: pointer;
	color: #333333;
}
.bcal__nav button svg { width: 20px; height: 20px; }
.bcal__grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	border-top: 1px solid var(--c-gray-border);
	border-left: 1px solid var(--c-gray-border);
}
.bcal__head {
	padding: 12px;
	border-right: 1px solid var(--c-gray-border);
	border-bottom: 1px solid var(--c-gray-border);
	font-size: var(--fs-b2);
	color: var(--c-gray-light);
}
.bcal__cell {
	position: relative;
	min-height: 155px;
	padding: 15px;
	border-right: 1px solid var(--c-gray-border);
	border-bottom: 1px solid var(--c-gray-border);
	background: var(--c-white);
}
.bcal__cell--muted { background: var(--c-bg); }
.bcal__cell--today { background: #F8F8F8; }
.bcal__date { font-size: var(--fs-b1); font-weight: var(--fw-medium); color: var(--c-text-strong); }
.bcal__cell--muted .bcal__date { color: var(--c-gray-disabled); }
.bcal__date--holiday { color: var(--c-red); }
.bcal__today { float: right; padding: 3px 10px; border-radius: 999px; background: var(--c-primary); color: var(--c-white); font-size: var(--fs-b3); font-weight: var(--fw-medium); }
.bcal__events { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.bcal__event { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bcal__time { min-width:40px;flex: 0 0 auto;text-align:center; padding:3px 0; border-radius: var(--radius-sm); font-size:10px; font-weight: var(--fw-medium); background: var(--c-primary-soft); color: var(--c-primary); }
.bcal__time--red { background: #FDECEC; color: #FF4540; }
.bcal__time--orange { background: var(--c-orange-soft); color: var(--c-orange); }
.bcal__time--blue { background: #EDF3FF; color: #79A7FE; }
.bcal__time--mint { background: #E5F7F4; color: #2BB6A3; }
.bcal__event-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-b3); color: var(--c-gray-sub); }

/* ===================== 영상 플레이어 페이지 (.player) ===================== */
.player { display: flex; align-items: flex-start; gap: 30px; }
.player__main { flex: 1; min-width: 0; }
.player__side { flex: 0 0 400px; width: 400px; }

/* 영상 */
.vplayer { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; }
.vplayer img { width: 100%; height: 100%; object-fit: cover; }
.vplayer__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 76px; height: 76px; }
.vplayer__play img { width: 100%; height: 100%; }

/* 영상 정보 */
.vinfo { margin-top: 24px; }
.vinfo__head { display: flex; align-items: flex-start; gap: 20px; }
.vinfo__owner { flex: 0 0 auto; display: inline-flex; align-items: center; height: 28px; }
.vinfo__owner img { height: 22px; }
.vinfo__headmain { flex: 1; min-width: 0; }
.vinfo__title { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--c-text-strong); line-height: 1.4; }
.vinfo__meta { margin-top: 8px; font-size: var(--fs-b2); color: var(--c-gray-light); }
.vinfo__stat { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; }
.vinfo__stat button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: none; border: 0; cursor: pointer; font-size: var(--fs-b2); color: var(--c-gray-sub); }
.vinfo__stat button img { width: 18px; height: 18px; }

/* 공유 : 공유 아이콘 호버 시에만 노출 */
.vshare-wrap { position: relative; }
.vshare {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 5;
	display: none;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	background: var(--c-white);
	border: 1px solid var(--c-gray-border);
	border-radius: var(--radius);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
	white-space: nowrap;
	font-size: var(--fs-b2);
	color: var(--c-gray-sub);
}
/* 상단 연결 영역(호버 유지용) */
.vshare::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 10px; }
/* 말풍선 꼬리 */
.vshare::after {
	content: "";
	position: absolute;
	top: -7px;
	right: 20px;
	width: 12px;
	height: 12px;
	background: var(--c-white);
	border-top: 1px solid var(--c-gray-border);
	border-left: 1px solid var(--c-gray-border);
	transform: rotate(45deg);
}
.vshare-wrap:hover .vshare,
.vshare-wrap:focus-within .vshare,
.vshare-wrap.is-open .vshare { display: flex; }
.vshare span { margin-right: 4px; }
.vshare a { display: inline-flex; width: 30px; height: 30px; flex: 0 0 auto; }
.vshare a img { width: 100%; height: 100%; display: block; }

.vinfo__desc { margin-top: 20px; padding: 20px 24px; background: #fff; border-radius: var(--radius); font-size: var(--fs-b1); line-height: 1.5; color: var(--c-gray-sub); }
.vinfo__tags { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; font-size: var(--fs-b1); color: var(--c-gray-light); }

/* ----- 댓글 ----- */
.cmt { margin-top: 40px; }
.cmt__title { font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--c-text-strong); margin-bottom: 16px; }
.cmt__title b { color: var(--c-primary); }
.cmt-form { display: flex; gap: 10px; }
.cmt-form .c-input { flex: 1; }
.cmt-form .btn { flex: 0 0 auto; }
.cmt-empty { margin-top: 16px; padding: 20px; text-align: center; border-radius: var(--radius-sm); background: var(--c-bg); font-size: var(--fs-b2); color: var(--c-gray-light); }
/* 방송 플레이어에서만 흰색 배경 */
.player .cmt-empty { background: var(--c-white); }
.cmt-list { margin-top: 20px; display: flex; flex-direction: column; gap: 16px; }
.cmt-item { position: relative; padding: 20px 24px; border: 1px solid var(--c-gray-border); border-radius: var(--radius);background: var(--c-white); }
.cmt-item__head { display: inline-flex; align-items: center; gap: 12px; vertical-align: middle; font-size: var(--fs-b2); color: var(--c-gray-light); }
.cmt-item__author { display: inline-flex; align-items: center; gap: 6px; color: var(--c-text-strong); font-weight: var(--fw-medium); }
.cmt-item__author img { width: 15px; height: 15px; }
.cmt-item__date { display: inline-flex; align-items: center; gap: 6px; }
.cmt-item__date img { width: 15px; height: 15px; }
.cmt-item__date svg { width: 15px; height: 15px; }
.cmt-item__del { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; margin-left: 10px; width: 26px; height: 26px; background: none; border: 0; cursor: pointer; color: var(--c-gray-light); }
.cmt-item__del svg { width: 20px; height: 20px; }
.cmt-item__body { margin-top: 14px; font-size: var(--fs-b1); line-height: 1.5; color: var(--c-gray-sub); }
.cmt-item__actions { margin-top: 16px; display: flex; gap: 8px; }
.cmt-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 0; border-radius: var(--radius-sm); cursor: pointer; font-size: var(--fs-b2); background: var(--c-primary-soft); color: var(--c-primary); }
.cmt-btn--toggle { background: var(--c-orange-soft); color: var(--c-orange); }
.cmt-writer { padding: 2px 8px; border-radius: var(--radius-sm); background: var(--c-primary-soft); color: var(--c-primary); font-size: var(--fs-b3); font-weight: var(--fw-medium); }
.cmt-reply-form { margin-top: 16px; display: flex; gap: 10px; }
.cmt-reply-form .c-input { flex: 1; }
.cmt-replies { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.cmt-reply { position: relative; padding: 16px 20px; border-radius: var(--radius-sm); background: var(--c-bg); }
.cmt-reply__body { margin-top: 10px; font-size: var(--fs-b1); line-height: 1.5; color: var(--c-gray-sub); }
.cmt-reply__body b { color: var(--c-primary); font-weight: var(--fw-medium); }

/* ----- 추천 영상 사이드 패널 ----- */
.recomm { border: 1px solid var(--c-gray-border); border-radius: var(--radius); padding: 20px 24px; }
.recomm__head { display: flex; align-items: center; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid var(--c-line); }
.recomm__head-title { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--c-text-strong); }
.recomm__close { display: inline-flex; background: none; border: 0; cursor: pointer; color: var(--c-gray-dark); }
.recomm__close svg { width: 20px; height: 20px; }
.recomm__exit { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--c-primary); border-radius: var(--radius-sm); background: var(--c-white); color: var(--c-primary); font-size: var(--fs-b2); cursor: pointer; }
.recomm__exit svg { width: 14px; height: 14px; }
.recomm__list { display: flex; flex-direction: column; }
.recomm__item { position: relative; display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--c-line); }
.recomm__item:last-child { border-bottom: 0; }
.recomm__thumb { position: relative; flex: 0 0 120px; width: 120px; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; background: #dfe3e1; }
.recomm__thumb img { width: 100%; height: 100%; object-fit: cover; }
.recomm__thumb::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.3); }
.recomm__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 34px; height: 34px; z-index: 1; }
.recomm__play img { width: 100%; height: 100%; }
.recomm__info { flex: 1; min-width: 0; }
.recomm__tags { display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--fs-b3); color: var(--c-gray-light); }
.recomm__title { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 8px; font-size: var(--fs-b1); font-weight: var(--fw-medium); line-height: 1.4; color: var(--c-text-strong); }
.recomm__meta { margin-top: 10px; display: flex; align-items: center; gap: 14px; font-size: var(--fs-b3); color: var(--c-gray-light); }
.recomm__meta span { display: inline-flex; align-items: center; gap: 5px; }
.recomm__meta img { width: 14px; height: 14px; }
.recomm__meta svg { width: 14px; height: 14px; }
.recomm__more { width: 100%; margin-top: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; background: none; border: 0; cursor: pointer; font-size: var(--fs-b2); color: var(--c-gray-sub); }
.recomm__more svg { width: 14px; height: 14px; }

/* ===================== 도서 목록 ===================== */
/* 갤러리형 도서 카드 (.bookcard) */
.bookcard { position: relative; display: flex; flex-direction: column; overflow: hidden; }
.bookcard__thumb { position: relative; flex: 0 0 auto; aspect-ratio: 1 / 1; background: #f0f1f3; overflow: hidden; }
.bookcard__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bookcard__body { flex: 1; display: flex; flex-direction: column; padding: 20px; }
.bookcard__badges { margin-bottom: 12px; }
.bookcard__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.8em;
	font-size: var(--fs-h4);
	font-weight: var(--fw-medium);
	line-height: 1.4;
	color: var(--c-gray-dark);
}
.bookcard__divider { height: 1px; margin: auto 0 16px; background: var(--c-line); }
.bookcard__price { display: flex; align-items: baseline; gap: 8px; }
.bookcard__price-old { font-size: var(--fs-b1); color: var(--c-gray-disabled); text-decoration: line-through; }
.bookcard__price-now { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--c-primary); }

/* 웹진형 도서 카드 (.bookrow) */
.booklist { display: flex; flex-direction: column; gap: 20px; }
.bookrow { position: relative; display: flex; gap: 24px; padding: 20px; }
.bookrow__thumb { flex: 0 0 200px; width: 200px; height: 200px; align-self: flex-start; border-radius: var(--radius-sm); overflow: hidden; background: #f0f1f3; }
.bookrow__thumb img { width: 100%; height: 100%; object-fit: cover; }
.bookrow__body { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.bookrow__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bookrow__title { margin-top: 10px; font-size: var(--fs-h4); font-weight: var(--fw-medium); line-height: 1.4; letter-spacing: -0.02em; color: var(--c-text-strong); }
.bookrow__desc {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 10px;
	font-size: var(--fs-b1);
	line-height: 1.5;
	color: var(--c-gray-sub);
}
.bookrow__meta { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: var(--fs-b1); color: var(--c-gray-light); }
.bookrow__divider { align-self: stretch; height: 1px; margin: 16px 0; background: var(--c-line); }
.bookrow__foot { align-self: stretch; margin-top: auto; }
.bookrow__price { display: flex; align-items: baseline; gap: 8px; }
.bookrow__price-old { font-size: var(--fs-b1); color: var(--c-gray-disabled); text-decoration: line-through; }
.bookrow__price-now { font-size: var(--fs-h4); font-weight: var(--fw-bold); letter-spacing: -0.02em; color: var(--c-primary); }
.bookrow__btns { position: relative; z-index: 2; flex: 0 0 150px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.bookrow__btns .btn { width: 100%; }

/* ===================== 게시판 카드 (썸네일 + 제목/아이콘 + 작성자/날짜/조회수) ===================== */
/* 공통 : 제목줄 아이콘 / 메타 */
.pcard__pin, .prow__pin { flex: 0 0 auto; display: inline-flex; width: 18px; height: 18px; }
.pcard__pin img, .prow__pin img { width: 100%; height: 100%; }
.pcard__icons, .prow__icons { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.pcard__icons img, .prow__icons img { width: 15px; height: 15px; }
.pcard__meta, .prow__meta { display: flex; align-items: center; gap: 20px; font-size: var(--fs-b1); color: var(--c-gray-light); }
.pcard__meta { justify-content: space-between; }

/* 갤러리형 게시판 카드 (.pcard) */
.pcard { display: flex; flex-direction: column; overflow: hidden; }
.pcard__thumb { position: relative; display: flex; align-items: center; aspect-ratio: 345 / 195; background: #eef1ef; overflow: hidden; }
.pcard__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pcard__body { padding: 20px; }
.pcard__head { display: flex; align-items: flex-start; gap: 8px; }
.pcard__title {
	flex: 1;
	min-width: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: var(--fs-h4);
	font-weight: var(--fw-medium);
	line-height: 1.4;
	letter-spacing: -0.02em;
	color: var(--c-text-strong);
}
.pcard__meta { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--c-line); }
/* 갤러리형 게시판 그리드 (4열) */
.pcard-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }

/* 웹진형 게시판 카드 (.prow) */
.prow { display: flex; gap: 24px; padding: 20px; }
.prow__thumb { position: relative; display: flex; align-items: center; flex: 0 0 345px; width: 345px; aspect-ratio: 345 / 195; border-radius: var(--radius-sm); background: #eef1ef; overflow: hidden; }
.prow__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.prow__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.prow__head { display: flex; align-items: flex-start; gap: 8px; }
.prow__title { flex: 1; min-width: 0; font-size: var(--fs-h4); font-weight: var(--fw-medium); line-height: 1.4; letter-spacing: -0.02em; color: var(--c-text-strong); }
.prow__text {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 14px;
	font-size: var(--fs-b1);
	line-height: 1.5;
	color: var(--c-gray-sub);
}
.prow__meta { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--c-line); }

/* ===================== 게시판 (.board) ===================== */
.board-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.board-toolbar .c-select { width: auto; min-width: 120px; height: 40px; color: var(--c-text-strong); }
.board-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.board-table thead th { height: 60px; padding: 0 12px; background: var(--c-primary); color: var(--c-white); font-size: var(--fs-b1); font-weight: var(--fw-bold); text-align: center; vertical-align: middle; }
.board-table thead th:first-child { border-top-left-radius: var(--radius); }
.board-table thead th:last-child { border-top-right-radius: var(--radius); }
.board-table tbody td { height: 60px; padding: 8px 12px; border-bottom: 1px solid var(--c-line); font-size: var(--fs-b1); color: var(--c-gray-sub); text-align: center; vertical-align: middle; }
.board-table .col-no { width: 70px; }
.board-table .col-status { width: 130px; }
.board-table .col-writer { width: 120px; }
.board-table .col-date { width: 140px; }
.board-table .col-hit { width: 90px; }
.board-table td.board-subject { text-align: left; }
.board-table .board-no { color: var(--c-gray-light); }
.board-table tr.is-notice { background: #fafafa; }
.board-table tr.is-notice td { font-weight: var(--fw-medium); }
.board-thumbtack { display: inline-flex; width: 18px; height: 18px; }
.board-thumbtack img { width: 100%; height: 100%; }
.board-subject__wrap { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.board-subject__link { color: var(--c-text-strong); }
.board-subject__link:hover { color: var(--c-primary); }
.board-subject__cnt { color: var(--c-primary); font-weight: var(--fw-medium); }
.board-subject__icons { display: inline-flex; align-items: center; gap: 6px; }
.board-subject__icons img { width: 15px; height: 15px; }
.badge-new { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--c-orange); color: var(--c-white); font-size: 11px; font-weight: var(--fw-bold); line-height: 1; }
.board-foot { display: flex; justify-content: flex-end; margin-top: 24px; }

/* 게시판 글쓰기 : 첨부파일 업로드 */
.board-upload { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.board-upload__guide { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-b2); color: var(--c-gray-sub); }
.board-upload__guide li { position: relative; padding-left: 12px; line-height: 1.5; }
.board-upload__guide li::before { content: "·"; position: absolute; left: 3px; }
.board-upload__guide .is-warn { color: var(--c-red); }
.board-upload__btn { flex: 0 0 auto; }
.board-filetable__manage { display: inline-flex; justify-content: center; gap: 6px; }
/* 첨부파일 테이블 : th/td 높이 50 */
.rvform__full .board-table thead th,
.rvform__full .board-table tbody td { height: 50px; }
.board-write__actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; }
.board-write__actions-right { display: flex; align-items: center; gap: 10px; }

/* ===================== 게시판 상세 (.bview) ===================== */
.bview__head { display: flex; align-items: center; gap: 8px; padding: 8px 4px 20px; }
.bview__cate { flex: 0 0 auto; font-size: var(--fs-b1); color: var(--c-gray-light); }
.bview__pin { flex: 0 0 auto; display: inline-flex; width: 18px; height: 18px; }
.bview__pin img { width: 100%; height: 100%; }
.bview__title { flex: 0 1 auto; min-width: 0; font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--c-text-strong); }
.bview__lock { flex: 0 0 auto; width: 16px; height: 16px; }
.bview__meta { display: flex; align-items: center; gap: 30px; padding: 20px; background: var(--c-bg); border-radius: var(--radius); font-size: var(--fs-b1); color: var(--c-gray-light); }
.bview__meta span { display: inline-flex; align-items: center; gap: 6px; }
.bview__meta img, .bview__meta svg { width: 15px; height: 15px; flex: 0 0 auto; }
.bview__body { padding: 36px 4px; font-size: var(--fs-b1); line-height: 1.5; color: var(--c-gray-sub); }
.bview__body > * + * { margin-top: 24px; }
.bview__lead { font-size: var(--fs-h4); font-weight: var(--fw-medium); line-height: 1.5; color: var(--c-text-strong); }
.bview__img { border-radius: var(--radius); overflow: hidden; }
.bview__img img { display: block; width: 100%; }
.bview__cols { display: flex; gap: 30px; align-items: flex-start; }
.bview__cols-img { flex: 0 0 320px; width: 320px; border-radius: var(--radius); overflow: hidden; }
.bview__cols-img img { display: block; width: 100%; }
.bview__cols-text { flex: 1; min-width: 0; }
.bview__cols-text h4 { margin-bottom: 14px; font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--c-text-strong); }
.bview__list { display: flex; flex-direction: column; gap: 8px; }
.bview__list li { position: relative; padding-left: 14px; line-height: 1.5; }
.bview__list li::before { content: ""; position: absolute; left: 3px; top: 0.75em; width: 3px; height: 3px; border-radius: 50%; background: var(--c-gray-light); }
.bview__actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 24px; border-top: 1px solid var(--c-line); }
.bview__actions-right { display: flex; align-items: center; gap: 10px; }
/* 강의실 게시판 상세 : 본문 감싸는 흰색 카드 */
.bview-wrap { padding: 30px; background: var(--c-white); border-radius: var(--radius); box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.06); }
/* 이전/다음 글 이동 버튼 (강의실 게시판 상세) */
.bview__nav { display: flex; gap: 8px; }
.bview__navbtn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--c-gray-border); border-radius: var(--radius-sm); background: var(--c-white); color: var(--c-gray-light); }
.bview__navbtn:hover { color: var(--c-primary); border-color: var(--c-primary); }
.bview__navbtn svg { width: 18px; height: 18px; }

/* Q&A 답변 블록 */
.qna-answer { margin-top: 16px; padding: 30px; border: 1px solid var(--c-gray-border); border-radius: var(--radius); }
.qna-answer--pending { display: flex; align-items: center; gap: 12px; font-size: var(--fs-b1); color: var(--c-gray-sub); }
.qna-answer__head { display: flex; align-items: center; gap: 12px; font-size: var(--fs-b2); color: var(--c-gray-light); }
.qna-answer__author { display: inline-flex; align-items: center; gap: 6px; color: var(--c-text-strong); font-weight: var(--fw-medium); }
.qna-answer__author img { width: 15px; height: 15px; }
.qna-answer__date { display: inline-flex; align-items: center; gap: 6px; }
.qna-answer__date img { width: 15px; height: 15px; }
.qna-answer__body { margin-top: 16px; font-size: var(--fs-b1); line-height: 1.5; color: var(--c-gray-sub); }
.qna-answer__body > * + * { margin-top: 20px; }

/* ===================== 이메일 문의 폼 (.eform) ===================== */
.eform__row { margin-bottom: 24px; }
.eform__label { display: block; margin-bottom: 10px; font-size: var(--fs-b1); font-weight: var(--fw-medium); color: var(--c-text-strong); }
.eform__label .req { color: var(--c-red); }
.eform__inline { display: flex; align-items: center; gap: 10px; }
.eform__inline .dash { color: var(--c-gray-light); }
.eform__phone .c-input { width: 130px; }
.eform__email { flex-wrap: wrap; }
.eform__email .c-input { width: 280px; }
.eform__email .at { color: var(--c-gray-sub); }
.eform__email .c-select { flex: 0 0 190px; width: 190px; }
.eform__actions { display: flex; justify-content: flex-end; margin-top: 24px; }

/* ===================== 회원 (로그인 / 회원가입) ===================== */
.auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 50px 20px; background: #f7f8fa; }
.auth__card { width: 100%; max-width: 480px; padding: 50px; background: var(--c-white); border-radius: 30px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06); }
.auth__logo { display: flex; justify-content: center; margin-bottom: 10px; }
.auth__logo img { height: 38px; }
.auth__desc { margin-bottom: 20px; text-align: center; font-size: var(--fs-b1); line-height: 1.5; color: var(--c-gray-sub); }

/* 스텝 인디케이터 */
.auth-steps { position: relative; display: flex; margin-bottom: 32px; }
.auth-steps::before { content: ""; position: absolute; top: 6px; left: 16.6%; right: 16.6%; height: 2px; background: var(--c-gray-border); }
.auth-step { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: var(--fs-b1); color: var(--c-gray-light); }
.auth-step__dot { width: 13px; height: 13px; border-radius: 50%; background: #d6dbe0; }
.auth-step.is-active { color: var(--c-primary); font-weight: var(--fw-bold); }
.auth-step.is-active .auth-step__dot { background: var(--c-primary); }

/* 필드 */
.auth-field { margin-bottom: 20px; }
.auth-field__label { display: block; margin-bottom: 8px; font-size: var(--fs-b1); font-weight: var(--fw-medium); color: var(--c-text-strong); }
.auth-field__label .req { color: var(--c-red); }
.auth-field__error { margin-top: 8px; font-size: var(--fs-b2); color: var(--c-red); }
.c-input.is-error { border-color: var(--c-red); }
.auth-inline { display: flex; align-items: center; gap: 10px; }
.auth-inline .dash { color: var(--c-gray-light); }
.auth-inline .at { color: var(--c-gray-sub); }
.auth-inline .c-input { flex: 1; min-width: 0; }
/* 회원 폼 : 입력/셀렉트 높이 43 */
.auth .c-input, .auth .c-select { height: 43px; }

/* 비밀번호 표시 토글 */
.auth-pw { position: relative; }
.auth-pw .c-input { padding-right: 46px; }
.auth-pw__eye { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); display: inline-flex; background: none; border: 0; cursor: pointer; color: var(--c-gray-light); }
.auth-pw__eye svg,
.auth-pw__eye img { width: 20px; height: 20px; }

/* 버튼 / 링크 */
.auth-btn { width: 100%; }
.auth__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.auth__forgot { display: inline-block; margin-top: 16px; font-size: var(--fs-b2); color: var(--c-gray-sub); text-decoration: underline; }
.auth__signup { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; padding: 10px 20px; border-radius: var(--radius); background: var(--c-bg); font-size: var(--fs-b1); color: var(--c-gray-sub); }
.auth__signup .btn { flex: 0 0 auto; }

/* 약관 동의 */
.agree-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.agree-head__title { font-size: var(--fs-b1); font-weight: var(--fw-bold); color: var(--c-text-strong); }
.agree-all { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-b1); color: var(--c-gray-sub); }
.agree-box { border: 1px solid var(--c-gray-border); border-radius: var(--radius-sm); overflow: hidden; }
.agree-item { display: flex; align-items: center; gap: 10px; padding: 15px 20px; border-bottom: 1px solid var(--c-line); font-size: var(--fs-b1); }
.agree-item:last-child { border-bottom: 0; }
.agree-item__label { flex: 1; min-width: 0; color: var(--c-gray-sub); }
.agree-item__req { color: var(--c-red); font-weight: var(--fw-medium); }
.agree-item__opt { color: var(--c-gray-light); }
.agree-item__view { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-b3); color: #BBBBBB; text-decoration: underline; white-space: nowrap; }
.agree-item--recv { gap: 20px; background: var(--c-bg); }
.agree-item--recv label { display: inline-flex; align-items: center; gap: 6px; color: var(--c-gray-sub); }

/* 본인 인증 */
.auth-verify-title { margin: 24px 0 14px; font-size: var(--fs-b1); font-weight: var(--fw-bold); color: var(--c-text-strong); }
.auth-verify { display: flex; gap: 10px; margin-bottom: 24px; }
.auth-verify .btn { flex: 1; }

/* 아이디/비번 찾기 탭 */
.auth-tabs { display: flex; margin-bottom: 24px; }
.auth-tabs a { flex: 1; padding: 13px; text-align: center; background: var(--c-bg); color: var(--c-gray-light); font-size: var(--fs-b1); border: 1px solid var(--c-gray-border); border-radius: 8px 8px 0 0; }
.auth-tabs a:not(.is-active) { background: #F8F8F8; border-color: #EEEEEE; }
.auth-tabs a.is-active { background: var(--c-white); color: var(--c-text-strong); font-weight: var(--fw-medium); }
/* 인증 방식 선택 (라디오) */
.auth-authtype { display: flex; align-items: center; gap: 24px; margin-bottom: 20px; padding: 16px 18px; background: var(--c-bg); border-radius: var(--radius-sm); }
.auth-authtype label { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-b1); color: var(--c-gray-sub); }
/* 인증번호 발급 등 인라인 버튼 */
.auth-inline .btn { flex: 0 0 auto; height: 43px; white-space: nowrap; }

/* 마케팅 수신 (정보입력) */
.auth-recv-title { margin-bottom: 12px; font-size: var(--fs-b1); font-weight: var(--fw-medium); color: var(--c-gray-sub); }
.auth-recv { display: flex; align-items: center; gap: 24px; margin-bottom: 24px; }
.auth-recv span { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-b1); color: var(--c-gray-sub); }
.auth-recv span img { width: 15px; height: 15px; }
.auth-recv .badge-soft { font-size: 12px; }
.auth-recv .badge-soft-green { background: #E7F6F2; color: #4EB397; }
.auth-recv .badge-soft-red { background: #FDECEC; color: #FF4540; }

/* 성별 라디오 */
.auth-gender { display: flex; align-items: center; gap: 24px; }
.auth-gender label { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-b1); color: var(--c-gray-sub); }

/* 주소 */
.auth-addr { display: flex; flex-direction: column; gap: 10px; }
.auth-addr__zip { display: flex; gap: 10px; }
.auth-addr__zip .c-input { width: 160px; }

/* 가입 완료 결과 박스 */
.auth-result { padding: 20px; border-radius: var(--radius); background: var(--c-bg); }
.auth-result__title { margin-bottom: 10px; font-size: var(--fs-b1); font-weight: var(--fw-bold); color: var(--c-text-strong); }
.auth-result__list { display: flex; flex-direction: column; gap:2px; font-size: var(--fs-b1); color: var(--c-gray-sub); }
.auth-result__list li { position: relative; padding-left: 12px; }
.auth-result__list li::before { content: "·"; position: absolute; left: 3px; }
.auth-result__note { margin-top: 10px; font-size: var(--fs-b1); color: var(--c-gray-sub); }

/* 약관 정책 팝업 */
.modal-dim { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, 0.4); }
.modal { display: flex; flex-direction: column; width: 100%; max-width: 760px; max-height: 86vh; padding: 30px; background: var(--c-white); border-radius: var(--radius-lg); overflow: hidden; }
.modal__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 20px; border-bottom: 1px solid var(--c-gray-border); }
.modal__title { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--c-text-strong); }
.modal__close { display: inline-flex; background: none; border: 0; cursor: pointer; color: var(--c-gray-dark); }
.modal__close svg { width: 24px; height: 24px; }
.modal__tabs { display: flex; gap: 8px; margin-top: 20px; padding: 0 20px; background: #F8F8F8; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom: 1px solid var(--c-gray-border); }
.modal__tab { position: relative; flex: 1; padding: 16px 8px; background: none; border: 0; cursor: pointer; text-align: center; font-size: var(--fs-b1); color: var(--c-gray-light); }
.modal__tab.is-active { color: var(--c-primary); font-weight: var(--fw-bold); }
.modal__tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--c-primary); }
.modal__body { flex: 1; min-height: 0; margin-top: 10px; padding: 20px; overflow-y: auto; font-size: var(--fs-b1); line-height: 1.5; color: var(--c-gray-sub); }
.modal__body h4 { margin-bottom: 12px; font-size: var(--fs-b1); font-weight: var(--fw-bold); color: var(--c-text-strong); }
.modal__body h5 { margin: 20px 0 8px; font-size: var(--fs-b1); font-weight: var(--fw-bold); color: var(--c-primary); }
.modal__body ol, .modal__body ul { padding-left: 18px; }
.modal__body li { margin-top: 4px; }

/* ===================== 검색 결과 ===================== */
.search-head { margin-bottom: 30px; font-size: var(--fs-h2); font-weight: var(--fw-bold); color: var(--c-text-strong); }
.search-head__key { color: var(--c-primary); }
.search-tabs { display: flex; flex-wrap: wrap; gap: 0 28px; margin-bottom: 40px; }
.search-tabs a { position: relative; padding: 12px 4px; font-size: var(--fs-b1); color: var(--c-gray-light); }
.search-tabs a.is-active { color: var(--c-primary); font-weight: var(--fw-bold); }
.search-tabs a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--c-primary); }
.search-tabs__count { color: var(--c-primary); }
.search-sec { margin-bottom: 50px; }
.search-sec__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.search-sec__title { font-size: var(--fs-h2); font-weight: var(--fw-bold); color: var(--c-text-strong); }
.search-sec__count { color: var(--c-primary); }
/* 검색 게시판 카드 : 웹진형(.prow)에서 썸네일 제외 — 제목 1줄 */
.search-sec .prow__title { display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.search-grid { display: grid; gap: 20px; }
.search-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.search-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.search-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* 도서 상세 : 구매 패널 스펙 테이블 */
.book-spec { margin-top: 20px; padding: 4px 0; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.book-spec__row { display: flex; align-items: center; gap: 10px; padding: 11px 0; font-size: var(--fs-b1); }
.book-spec__row + .book-spec__row { border-top: 1px solid var(--c-line); }
.book-spec__label { display: inline-flex; align-items: center; gap: 8px; color: var(--c-gray-sub); }
.book-spec__label img { width: 16px; height: 16px; }
.book-spec__value { margin-left: auto; color: var(--c-text-strong); font-weight: var(--fw-medium); }
.book-spec__value .old { margin-right: 8px; color: var(--c-gray-disabled); text-decoration: line-through; font-weight: var(--fw-regular); }
.book-spec__value .now { color: var(--c-orange); font-weight: var(--fw-bold); }

/* 수량 스테퍼 */
.qty { display: inline-flex; align-items: center; border: 1px solid var(--c-gray-border); border-radius: var(--radius-sm); overflow: hidden; }
.qty button { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; font-size: 16px; color: var(--c-gray-sub); }
.qty input { width: 42px; height: 30px; border: 0; border-left: 1px solid var(--c-gray-border); border-right: 1px solid var(--c-gray-border); text-align: center; font-size: var(--fs-b2); color: var(--c-text-strong); }

/* ===================== 장바구니 / 결제 ===================== */
.cart-layout { display: flex; align-items: flex-start; gap: 30px; }
.cart-main { flex: 1; min-width: 0; padding: 30px; background: var(--c-white); border: 1px solid var(--c-gray-border); border-radius: var(--radius); }
.cart-title { padding-bottom: 24px; border-bottom: 1px solid var(--c-gray-border); font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--c-text-strong); }
.cart-item { position: relative; display: flex; align-items:center; gap: 20px; padding: 30px 0; border-bottom: 1px solid var(--c-line); }
.cart-item:last-child { border-bottom: 0; padding-bottom: 0; }
.cart-item__thumb { position: relative; display: flex; align-items: center; flex: 0 0 300px; width: 300px; aspect-ratio: 300 / 175; border-radius: var(--radius-sm); background: #eef1ef; overflow: hidden; }
.cart-item__info { flex: 1; min-width: 0; }
.cart-item__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.cart-item__title { margin-top: 12px; font-size: var(--fs-h4); font-weight: var(--fw-medium); color: var(--c-text-strong); }
.cart-item__period { margin-top: 12px; font-size: var(--fs-b1); color: var(--c-gray-sub); }
.cart-item__period b { margin-right: 8px; color: var(--c-text-strong); font-weight: var(--fw-medium); }
.cart-item__meta { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: var(--fs-b2); color: var(--c-gray-light); }
.cart-item__meta span { display: inline-flex; align-items: center; gap: 6px; }
.cart-item__meta img { width: 15px; height: 15px; flex: 0 0 auto; }
.cart-item__qty { margin-top: 16px; display: flex; align-items: center; gap: 10px; font-size: var(--fs-b2); color: var(--c-gray-sub); }
.cart-item__price { flex: 0 0 210px; display: flex; flex-direction: column; gap: 10px; }
.cart-item__price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: var(--fs-b1); color: var(--c-gray-sub); }
.cart-item__price-row b { font-size: var(--fs-h4); font-weight: var(--fw-bold); letter-spacing: -0.02em; }
.cart-item__price-row--edu b { color: var(--c-orange); }
.cart-item__price-row--support b { color: var(--c-primary); }
.cart-item__check { flex: 0 0 auto; padding-top: 2px; }

/* 결제 요약 */
.pay-summary { flex: 0 0 380px; width: 380px; position: sticky; top: 20px; padding: 30px; background: var(--c-white); border: 1px solid var(--c-gray-border); border-radius: var(--radius); }
.pay-summary__title { margin-bottom: 24px; font-size: var(--fs-h2); font-weight: var(--fw-medium); color: var(--c-text-strong); }
.pay-summary__title span { font-size: var(--fs-h2); font-weight: var(--fw-medium); color: var(--c-gray-light); }
.pay-summary__row { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: var(--fs-h4); color: var(--c-gray-disabled); }
.pay-summary__row b { color: var(--c-text-strong); font-weight: var(--fw-medium); }
.pay-summary__total { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--c-gray-border); }
.pay-summary__total-label { font-size: var(--fs-h2); font-weight: var(--fw-medium); color: var(--c-primary); }
.pay-summary__total-value { font-size: var(--fs-h2); font-weight: var(--fw-bold); color: var(--c-primary); }
.pay-summary__btn { width: 100%; margin-top: 24px; }
.pay-summary__actions { display: flex; gap: 10px; margin-top: 24px; }
.pay-summary__actions .btn { flex: 1; }

/* ===================== 주문/결제 페이지 ===================== */
.order-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.order-sec { padding: 30px; background: var(--c-white); border: 1px solid var(--c-gray-border); border-radius: var(--radius); }
.order-sec__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--c-gray-border); }
.order-sec__title { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--c-text-strong); }
.order-sec__note { flex: 0 0 auto; font-size: var(--fs-b2); color: var(--c-gray-light); }
.order-sec__check { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-b2); color: var(--c-gray-sub); cursor: pointer; }
.order-sec .c-input, .order-sec .c-select { height: 43px; }

/* 결제 항목 */
.order-item { display: flex; align-items: center; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--c-line); }
.order-item:last-child { padding-bottom: 0; border-bottom: 0; }
.order-item__badge { flex: 0 0 84px; }
.order-item__body { flex: 1; min-width: 0; }
.order-item__title { font-size: var(--fs-b1); font-weight: var(--fw-medium); color: var(--c-text-strong); }
.order-item__opts { margin-top: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--c-bg); border-radius: var(--radius-sm); font-size: var(--fs-b2); }
.order-item__opts span { padding: 12px 16px; color: var(--c-gray-sub); }
.order-item__opts span + span { border-left: 1px solid var(--c-gray-border); }
.order-item__opts b { margin-right: 10px; color: var(--c-gray-light); font-weight: var(--fw-regular); }
.order-item__right { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 16px; width: 200px; }
.order-item__price { min-width: 90px; text-align: right; font-size: var(--fs-h4); font-weight: var(--fw-bold); letter-spacing: -0.02em; color: var(--c-text-strong); }

/* 안내 / 동의 텍스트 박스 */
.order-box { padding: 20px; border-radius: var(--radius-sm); background: var(--c-bg); font-size: var(--fs-b1); line-height: 1.5; color: var(--c-gray-sub); }
.order-box p { margin: 0; }
.order-box p:last-child { margin-bottom: 0; }
.order-box b { font-weight: var(--fw-bold); color: var(--c-text-strong); }
.order-box .em { color: var(--c-red); }
.order-box--scroll { max-height: 360px; overflow-y: auto; }
.order-box__foot { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--c-gray-border); text-align: center; font-size: var(--fs-b2); color: var(--c-gray-light); }
.order-confirm { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; padding: 18px 20px; border-radius: var(--radius-sm); background: var(--c-bg); font-size: var(--fs-b1); color: var(--c-gray-sub); cursor: pointer; }
.order-confirm .em { color: var(--c-red); }

/* 동의서 내 표 */
.order-table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: var(--fs-b2); }
.order-table th, .order-table td { padding: 10px 12px; border: 1px solid var(--c-gray-border); text-align: center; color: var(--c-gray-sub); }
.order-table td { background: var(--c-white); }
.order-table th { background: #f3f5f4; font-weight: var(--fw-medium); color: var(--c-text-strong); }
.order-table .al-l { text-align: left; }
.order-table .em { color: var(--c-red); font-weight: var(--fw-medium); }

/* 주문 폼 */
.order-form__row { display: flex; align-items: flex-start; gap: 20px; padding: 12px 0; }
.order-form__label { flex: 0 0 180px; padding-top: 11px; font-size: var(--fs-b1); font-weight: var(--fw-medium); color: var(--c-text-strong); }
.order-form__label .req { margin-left: 2px; color: var(--c-red); }
.order-form__field { flex: 1; min-width: 0; }
.order-form__inline { display: flex; align-items: center; gap: 8px; }
.order-form__inline .dash, .order-form__inline .at { flex: 0 0 auto; color: var(--c-gray-light); }
.order-form__msg { margin-top: 8px; font-size: var(--fs-b2); color: var(--c-red); }
.order-form__help { margin-top: 8px; font-size: var(--fs-b2); color: var(--c-gray-light); }
/* 세로 배치(라벨 위) */
.order-form--stack .order-form__row { flex-direction: column; align-items: stretch; gap: 10px; }
.order-form--stack .order-form__label { flex: none; padding-top: 0; }

/* 결제 수단 */
.pay-method { display: flex; flex-direction: column; gap: 12px; }
.pay-method__opt { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border: 1px solid var(--c-gray-border); border-radius: var(--radius-sm); font-size: var(--fs-b1); color: var(--c-text-strong); cursor: pointer; }
.pay-method__opt.is-active { border-color: var(--c-primary); background: var(--c-white); color: var(--c-text-strong); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.pay-method__note { margin-top: 0; padding: 20px; border-radius: 0 0 var(--radius-sm) var(--radius-sm); background: #FAFAFA; }
.pay-method__note .em { display: block; margin-bottom: 8px; font-size: var(--fs-b1); color: var(--c-red); }
.pay-method__note ul { margin: 0; padding-left: 18px; font-size: var(--fs-b2); color: var(--c-gray-light); line-height: 1.5; }
.pay-method__opt img, .pay-method__opt svg { width: 20px; height: 20px; flex: 0 0 auto; }
.pay-method--fill { gap: 10px; }
.pay-method--fill .pay-method__opt { padding: 15px 20px; border: 0; background: #FAFAFA; }

/* 카드사 선택 그리드 */
.card-select { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.card-select__item { position: relative; display: flex; align-items: center; justify-content: center; height: 56px; padding: 0 12px; border: 1px solid var(--c-gray-border); border-radius: var(--radius-sm); background: var(--c-white); cursor: pointer; }
.card-select__item img { max-width: 100%; max-height: 24px; object-fit: contain; }
.card-select__item input { position: absolute; opacity: 0; }
.card-select__item:has(input:checked) { border-color: var(--c-primary); box-shadow: 0 0 0 1px var(--c-primary) inset; }

/* ===================== 쿠폰 선택 모달 ===================== */
.modal--coupon { max-width: 800px; }
.coupon-body { margin-top: 20px; padding: 0; }
.coupon-label { margin-bottom: 12px; font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--c-text-strong); }
.coupon-register { display: flex; gap: 10px; margin-bottom: 24px; }
.coupon-register .c-input { flex: 1; min-width: 0; height: 43px; }
.coupon-box { border: 1px solid var(--c-gray-border); border-radius: var(--radius-sm); overflow: hidden; }
.coupon-prod { display: flex; align-items: center; gap: 12px; padding: 20px; background: var(--c-white); border-bottom: 1px solid var(--c-gray-border); }
.coupon-prod__title { flex: 1; min-width: 0; font-size: var(--fs-h4); font-weight: var(--fw-medium); color: var(--c-text-strong); }
.coupon-prod__price { flex: 0 0 auto; font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--c-text-strong); }
.coupon-list { padding: 12px 20px; background: #FAFAFA; }
.coupon-list .coupon-label { margin: 8px 0 8px; }
.coupon-item { display: flex; align-items: center; gap: 10px; padding:5px 0; cursor: pointer; }
.coupon-item__name { flex: 1; min-width: 0; font-size: var(--fs-b1); color: var(--c-gray-sub); }
.coupon-item__amount { flex: 0 0 auto; font-size: var(--fs-b1); font-weight: var(--fw-bold); color: var(--c-primary); }
.coupon-help { margin-top: 12px; font-size: var(--fs-b2); color: var(--c-gray-light); }
.coupon-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 20px -30px -30px; padding: 30px; background: #F4F5F6; }
.coupon-foot__calc { display: flex; align-items: center; gap: 16px; }
.coupon-foot__calc > div { display: flex; flex-direction: column; gap: 4px; }
.coupon-foot__calc span { font-size: var(--fs-b2); color: var(--c-gray-light); }
.coupon-foot__calc b { font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--c-text-strong); }
.coupon-foot__calc b.orange { color: var(--c-orange); }
.coupon-foot__calc b.green { color: var(--c-primary); }
.coupon-foot__op { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 28px; height: 28px; border: 1px solid var(--c-gray-border); border-radius: 50%; background: var(--c-white); font-size: 15px; color: var(--c-gray-light); }
.coupon-foot__btns { display: flex; gap: 10px; }

/* ===================== 주문 완료 ===================== */
.order-done { text-align: center; }
.order-done__icon { width: 100px; height: 100px; margin: 0 auto 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--c-primary); }
.order-done__icon img { width: 50px; height: 50px; }
.order-done__title { font-size: var(--fs-title); font-weight: var(--fw-bold); color: var(--c-text-strong); }
.order-done__desc { margin-top: 10px; font-size: var(--fs-b1); line-height: 1.5; color: var(--c-gray-sub); }
.order-done__btns { display: flex; justify-content: center; gap: 10px; margin-top: 30px; }
.order-done__cards { max-width: 800px; margin: 48px auto 0; display: flex; flex-direction: column; gap: 20px; text-align: left; }
.order-card { padding: 30px; background: var(--c-white); border: 1px solid var(--c-gray-border); border-radius: var(--radius); }
.order-card--warn { border-color: var(--c-red); }
.order-card__head { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }
.order-card__head img, .order-card__head svg { width: 20px; height: 20px; flex: 0 0 auto; }
.order-card__title { font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--c-text-strong); }
.order-card .order-box .em { display: block; margin-top:0; color: var(--c-red); }
.order-info__row { display: flex; gap: 20px; padding: 10px 0; font-size: var(--fs-b1); }
.order-info__label { flex: 0 0 140px; color: var(--c-gray-light); }
.order-info__value { flex: 1; min-width: 0; color: var(--c-text-strong); }

/* ===================== 강의리스트(수강현황) 카드 ===================== */
.mycard { display: flex; flex-direction: column; height: 100%; padding: 20px; background: var(--c-white); border: 1px solid var(--c-gray-border); border-radius: var(--radius); }
.mycard__top { display: flex; align-items: flex-start; gap: 20px; }
.mycard__thumb { position: relative; flex: 0 0 44%; max-width: 350px; display: flex; align-items: center; aspect-ratio: 345 / 195; border-radius: var(--radius-sm); background: #eef1ef; overflow: hidden; }
.mycard__wish { position: absolute; top: 10px; right: 10px; z-index: 2; }
.mycard__info { flex: 1; min-width: 0; }
.mycard__badges { display: flex; flex-wrap: wrap; gap: 5px; }
.mycard__title { margin-top: 15px; font-size: var(--fs-h4); font-weight: var(--fw-medium); line-height: 1.4; color: var(--c-text-strong); }
.mycard__period { margin-top: 15px; display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-b1); color: var(--c-gray-sub); }
.mycard__period-ico { width: 15px; height: 15px; flex: 0 0 auto; background-color: #888888; -webkit-mask: url("../images/ico-my-lesson.svg") no-repeat center / contain; mask: url("../images/ico-my-lesson.svg") no-repeat center / contain; }
/* 마이페이지 카드 메타 (통계없는 버전) */
.mycard__metas { margin-top: 15px; display: flex; flex-direction: column; gap:5px; }
.mycard__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 30px; font-size: var(--fs-b1); }
.mycard__meta-item { display: inline-flex; align-items: center; gap: 10px; color: var(--c-gray-sub); }
.mycard__meta-item b { color: var(--c-gray-light); font-weight: var(--fw-medium); }
.myico { display: inline-block; width: 15px; height: 15px; flex: 0 0 auto; background-color: #888888; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }
.myico--cal { -webkit-mask-image: url("../images/ico-calendar1.svg"); mask-image: url("../images/ico-calendar1.svg"); }
.myico--progress { -webkit-mask-image: url("../images/ico-my-chart-pie.svg"); mask-image: url("../images/ico-my-chart-pie.svg"); }
.myico--lesson { -webkit-mask-image: url("../images/ico-my-lesson.svg"); mask-image: url("../images/ico-my-lesson.svg"); }
.myico--message { -webkit-mask-image: url("../images/icon-my-paperplane.svg"); mask-image: url("../images/icon-my-paperplane.svg"); }
.mycard__period b { color: var(--c-gray-light); font-weight: var(--fw-medium); }
.mycard__stats { display: flex; gap: 20px; margin-top: 20px; padding: 10px 20px; border-radius: var(--radius-sm); background: var(--c-bg); }
.mycard__stat { flex: 1; display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-b1); color: var(--c-gray-light); }
.mycard__stat img, .mycard__stat svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--c-gray-light); }
.mycard__stat b { color: var(--c-text-strong); font-weight: var(--fw-medium); }
.mycard > *:nth-last-child(3) { margin-bottom: auto; }
.mycard__divider { height: 1px; margin: 20px; background: var(--c-line); }
/* 버튼: 1/2/3개 모두 자동 균등 분배 */
.mycard__btns { display: flex; gap: 10px; }
.mycard__btns .btn { flex: 1; min-width: 0; }

/* ===================== 학습 카드 (진도율 / 학습하기) ===================== */
.learncard { display: flex; align-items: center; gap: 30px; padding: 20px; background: var(--c-white); border-radius: var(--radius); box-shadow: 2px 6px 16px 0 rgba(0, 0, 0, 0.06); }
.learncard__thumb { position: relative; flex: 0 0 24%; max-width: 350px; display: flex; align-items: center; aspect-ratio: 345 / 195; border-radius: var(--radius-sm); background: #eef1ef; overflow: hidden; }
.learncard__wish { position: absolute; top: 10px; right: 10px; z-index: 2; }
.learncard__body { flex: 1; min-width: 0; }
.learncard__badges { display: flex; flex-wrap: wrap; gap: 5px; }
.learncard__title { margin-top: 10px; font-size: var(--fs-h2); font-weight: var(--fw-medium); line-height: 1.4; color: var(--c-text-strong); }
.learncard__period { margin-top: 10px; display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-b1); color: var(--c-gray-sub); }
.learncard__period b { color: var(--c-gray-light); font-weight: var(--fw-medium); }
.learncard__period-ico { width: 15px; height: 15px; flex: 0 0 auto; background-color: #888888; -webkit-mask: url("../images/ico-my-lesson.svg") no-repeat center / contain; mask: url("../images/ico-my-lesson.svg") no-repeat center / contain; }
/* 진도율 바 */
.learncard__progress { margin-top: 20px; display: flex; flex-direction: column; gap: 5px; }
.learncard__prog { display: flex; align-items: center; gap: 10px; }
.learncard__prog-label { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; width: 110px; font-size: var(--fs-b1); color: var(--c-gray-sub); }
.learncard__prog-label svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--c-gray-light); }
.learncard__bar { flex: 0 1 500px; min-width: 0; height: 20px; border-radius: 999px; background: var(--c-gray-pale); overflow: hidden; }
.learncard__bar-fill { display: block; height: 100%; border-radius: 999px; }
.learncard__prog--mine .learncard__bar-fill { background: var(--c-primary); }
.learncard__prog--rec .learncard__bar-fill { background: var(--c-orange); }
.learncard__prog-value { flex: 0 0 auto; width: 56px; text-align: left; font-size: var(--fs-b1); font-weight: var(--fw-bold); }
.learncard__prog--mine .learncard__prog-value { color: var(--c-primary); }
.learncard__prog--rec .learncard__prog-value { color: var(--c-orange); }
/* 학습하기 액션 */
.learncard__action { flex: 0 0 auto; display: flex; align-items: center; }
.learncard__action .btn { min-width: 150px; height: auto; padding: 20px 40px; font-size: var(--fs-h4); }
.learncard__action .btn svg { width: 14px; height: 14px; flex: 0 0 auto; }

/* ===================== 마이페이지 대시보드 (자체 레이아웃) ===================== */
.mypage { display: flex; align-items: stretch; min-height: 100vh; background: #f4f5f6; }
.mypage__side { flex: 0 0 auto; background: var(--c-white); }
.mypage__side .mylnb { box-shadow: none; height: 100%; }
.mypage__side .roomlnb { box-shadow: none; height: 100%; }
.mypage__main { flex: 1; min-width: 0; min-height: 100vh; display: flex; flex-direction: column; }
.mypage__content { flex: 0 0 auto; display: flex; flex-direction: column; gap: 50px; padding: 30px; }
.mypage__footer { margin: auto 30px 30px; padding: 25px; border-radius: var(--radius); background: #555555; text-align: center; font-size: var(--fs-b1); color: rgba(255, 255, 255, 0.7); }

/* 상단 바 */
.mp-topbar { display: flex; align-items: center; gap: 10px; padding: 20px; background: var(--c-white); box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.06); border-radius: var(--radius); font-size: var(--fs-b1); font-weight: var(--fw-medium); color: var(--c-text-strong); }
.mp-topbar svg { width: 18px; height: 18px; color: var(--c-gray-light); }

/* 통계 카드 */
.mp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.mp-stat { display: flex; align-items: center; gap: 15px; padding: 20px; background: var(--c-white); box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.06); border-radius: var(--radius); }
.mp-stat__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 50px; height: 50px; border-radius: var(--radius-sm); background: var(--c-bg); }
.mp-stat__icon svg { width: 24px; height: 24px; color: var(--c-gray-light); }
.mp-stat__icon img { width: auto; height: 26px; }
.mp-stat__icon .myico { width: 24px; height: 24px; }
.mp-stat__label { font-size: var(--fs-b1); color: var(--c-gray-sub); }
.mp-stat__num { font-size: var(--fs-h2); font-weight: var(--fw-bold); color: var(--c-primary); }

/* 2단 컬럼 (공지 / Q&A) */
.mp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.mp-panel__title { margin-bottom: 15px; font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--c-text-strong); }
.mp-empty { display: flex; align-items: center; justify-content: center; min-height: 100px; padding: 20px; background: var(--c-white); box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.06); border-radius: var(--radius); font-size: var(--fs-b1); color: var(--c-gray-light); }

/* 목록 */
.mp-list { margin-top: 20px; padding: 5px 20px; background: var(--c-white); box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.06); border-radius: var(--radius); }
.mp-list__item { padding: 15px 0; border-bottom: 1px solid var(--c-line); }
.mp-list__item:last-child { border-bottom: 0; }
.mp-list__course { margin-bottom: 8px; font-size: var(--fs-b2); color: var(--c-gray-light); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-list__row { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.mp-list__title { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--fs-b1); font-weight: var(--fw-medium); color: var(--c-text-strong); }
.mp-list__title > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-list__date { flex: 0 0 auto; font-size: var(--fs-b2); color: var(--c-gray-light); }

/* 섹션 (수강중인 / 복습) */
.mp-sec__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; }
.mp-sec__title { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--c-text-strong); }
.mp-sec__more { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-b1); color: var(--c-gray-light); }
.mp-sec__more svg { width: 16px; height: 16px; }
.mp-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }

/* 마이페이지 리스트 페이지 (수강중인/종료된 과정) */
.mp-topbar a, .mp-topbar > span { color: var(--c-gray-sub); font-weight: var(--fw-medium); }
.mp-topbar .is-current { color: var(--c-primary); }
.mp-topbar .sep { display: inline-flex; align-items: center; color: var(--c-gray-disabled); }
.mp-topbar .sep svg { width: 16px; height: 16px; }
.mp-title { font-size: var(--fs-h2); font-weight: var(--fw-bold); color: var(--c-text-strong); }
.mp-filter { display: flex; flex-wrap: wrap; gap: 30px; padding: 15px 20px; background: var(--c-white); box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.06); border-radius: var(--radius); }
.mp-filter label { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-b1); color: var(--c-gray-sub); cursor: pointer; }
.mp-listpage > * + * { margin-top: 20px; }
.mp-listpage--gap50 > * + * { margin-top: 50px; }
.mp-listpage .pagination { margin-top: 30px; }

/* 결제내역: 테이블 카드 */
.mp-table { background: var(--c-white); box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.06); border-radius: var(--radius); overflow: hidden; }
.mp-table .board-table thead th:first-child, .mp-table .board-table thead th:last-child { border-radius: 0; }
.mp-table .board-table tbody tr:last-child td { border-bottom: 0; }
.board-table .tl { text-align: left; padding-left: 30px; }
.board-table tr.is-off td { background: #FAFAFA; color: var(--c-gray-disabled); }
.board-table td .sub { display: block; margin-top: 4px; font-size: var(--fs-b2); color: var(--c-gray-light); }
.board-table .col-arrow { width: 56px; }
.board-table .mp-rowlink { display: inline-flex; }
.board-table .mp-rowlink svg { width: 6px; height: 12px; color: #BBBBBB; }
.board-table .plus { margin-left: 6px; font-size: var(--fs-b2); color: var(--c-primary); font-weight: var(--fw-medium); }
.board-table .amount { font-weight: var(--fw-bold); color: var(--c-text-strong); }
.board-table .btn-sm { min-width: 0; }

/* 날짜 검색 필터 */
.mp-datefilter { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding: 15px 20px; background: var(--c-white); box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.06); border-radius: var(--radius); }
.mp-datefilter .btn { height: 43px; }
.mp-datefilter .btn-md { min-width: 0; padding: 0 20px; }
.mp-datefilter .mp-date { display: inline-flex; align-items: center; gap: 8px; height: 43px; padding: 0 15px; border: 1px solid var(--c-gray-border); border-radius: var(--radius-sm); font-size: var(--fs-b1); color: var(--c-gray-light); }
.mp-datefilter .mp-date svg { width: 16px; height: 16px; }
.mp-datefilter .dash { color: var(--c-gray-light); }

/* 주문/배송 정보 테이블 */
.mp-infotable { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--c-white); box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.06); border-radius: var(--radius-sm); overflow: hidden; }
.mp-infotable th { width: 150px; padding: 15px 20px; background: var(--c-bg); border-bottom: 1px solid var(--c-gray-border); font-size: var(--fs-b1); font-weight: var(--fw-medium); color: var(--c-gray-sub); text-align: left; vertical-align: middle; }
.mp-infotable td { padding: 15px 20px; border-bottom: 1px solid var(--c-gray-border); font-size: var(--fs-b1); color: var(--c-text-strong); text-align: left; vertical-align: middle; }
.mp-infotable tr:last-child th, .mp-infotable tr:last-child td { border-bottom: 0; }

/* 상세 하단 액션 */
.mp-detail-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mp-detail-actions .right { display: flex; gap: 10px; }

/* 쿠폰 등록 바 */
.coupon-reg { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 20px 30px; background: var(--c-white); box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.06); border-radius: var(--radius); }
.coupon-reg__label { flex: 0 0 auto; font-size: var(--fs-b1); font-weight: var(--fw-bold); color: var(--c-text-strong); }
.coupon-reg .c-input { flex: 0 1 650px; min-width: 0; height: 43px; }
.coupon-reg .btn { flex: 0 0 auto; }

/* 쿠폰 카드 리스트 */
.coupon-list { display: flex; flex-direction: column; gap: 20px; }
.coupon-card { display: flex; align-items: center; gap: 20px; padding: 25px 30px; background: var(--c-white); box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.06); border-radius: var(--radius); }
.coupon-card__info { flex: 1; min-width: 0; }
.coupon-card__cat { font-size: var(--fs-b2); color: var(--c-gray-light); }
.coupon-card__name { margin-top: 10px; font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--c-text-strong); }
.coupon-card__apply { margin-top: 10px; font-size: var(--fs-b2); color: var(--c-gray-light); }
.coupon-card__col { flex: 0 0 auto; text-align: center; }
.coupon-card__col--benefit { width: 200px; }
.coupon-card__col--period { width: 230px; }
.coupon-card__col--status { width: 90px; }
.coupon-card__label { margin-bottom: 10px; font-size: var(--fs-b2); color: var(--c-gray-light); }
.coupon-card__benefit { font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--c-primary); }
.coupon-card__benefit-sub { margin-top: 4px; font-size: var(--fs-b2); color: var(--c-gray-light); }
.coupon-card__val { font-size: var(--fs-b1); color: var(--c-gray-sub); }
.coupon-card__status { font-size: var(--fs-b1); font-weight: var(--fw-medium); color: var(--c-primary); }
/* 사용/기간만료: 흐리게 */
.coupon-card--off { background: #FAFAFA; }
.coupon-card--off .coupon-card__name,
.coupon-card--off .coupon-card__benefit { color: var(--c-gray-light); }
.coupon-card--off .coupon-card__status { color: var(--c-gray-light); font-weight: var(--fw-regular); }

/* 쪽지함 : 필터(검색 포함) */
.mp-filter--between { justify-content: space-between; }
.mp-filter__group { display: flex; flex-wrap: wrap; gap: 30px; }
.mp-search { display: flex; align-items: center; gap: 10px; width: 340px; max-width: 100%; height: 43px; padding: 0 18px; border: 1px solid var(--c-gray-border); border-radius: 999px; }
.mp-search svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--c-gray-light); }
.mp-search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: var(--fs-b1); color: var(--c-gray-dark); }
.mp-search input::placeholder { color: var(--c-gray-light); }
.mp-search button { display: inline-flex; flex: 0 0 auto; background: none; border: 0; cursor: pointer; color: var(--c-gray-light); }
.mp-search button svg { width: 14px; height: 14px; }
/* 체크박스 열 */
.board-table .col-check { width: 56px; }
.board-table__actions { margin-top: 20px; }

/* 쪽지 상세 모달 */
.modal--msg { max-width: 720px; }
.msg-view__close { display: flex; justify-content: flex-end; }
.msg-view__title { margin-top: 10px; font-size: var(--fs-h2); line-height: 1.4; }
.msg-view__meta { display: flex; flex-wrap: wrap; gap: 10px 30px; margin-top: 20px; padding: 18px 20px; border-radius: var(--radius); background: #FAFAFA; font-size: var(--fs-b1); color: var(--c-gray-sub); }
.msg-view__meta b { margin-right: 8px; color: var(--c-gray-light); font-weight: var(--fw-regular); }
.msg-view__body { margin-top: 15px; padding: 25px 20px; border-radius: var(--radius); background: #FAFAFA; font-size: var(--fs-b1); line-height: 1.5; color: var(--c-gray-sub); }
.msg-view__foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* 마이페이지 폼 카드 */
.mp-formcard { padding: 30px; background: var(--c-white); box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.06); border-radius: var(--radius); }
.mp-formcard input[readonly] { background: #FAFAFA; color: var(--c-gray-sub); }
.mp-form-submit { display: flex; justify-content: center; margin-top: 30px; }
.mp-form-submit .btn { min-width: 200px; }
.mp-form__title { margin-bottom: 20px; font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--c-text-strong); }

/* 비밀번호 눈 토글 */
.mp-pw { position: relative; }
.mp-pw .c-input { padding-right: 46px; }
.mp-pw__eye { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); display: inline-flex; background: none; border: 0; cursor: pointer; }
.mp-pw__eye img { width: 20px; height: 20px; }

/* 비밀번호 확인 게이트 */
.mp-gate { padding: 50px 0; text-align: center; }
.mp-gate__icon svg { width: 56px; height: 56px; color: var(--c-primary); }
.mp-gate__icon img { width: 56px; height: 56px; }
.mp-gate__title { margin-top: 20px; font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--c-text-strong); }
.mp-gate__desc { margin-top: 10px; font-size: var(--fs-b1); color: var(--c-gray-sub); }
.mp-gate__form { display: inline-flex; gap: 10px; margin-top: 20px; }
.mp-gate__form .c-input { width: 320px; height: 43px; }

/* 회원본인인증 */
.mp-authbox__title { font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--c-text-strong); }
.mp-authbox__desc { margin: 10px 0 20px; font-size: var(--fs-b1); color: var(--c-gray-sub); }
.mp-authbox__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.mp-authbox__btns .btn { min-width: 200px; }
.mp-authbox__btns .btn img, .mp-authbox__btns .btn svg { width: 18px; height: 18px; }

/* 회원탈퇴 사유 */
.mp-reason { display: flex; flex-direction: column; gap: 15px; }
.mp-reason label { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-b1); color: var(--c-gray-sub); cursor: pointer; }
.mp-reason .mp-reason__etc { flex-wrap: wrap; gap: 10px; }
.mp-reason .mp-reason__etc .c-input { flex: 1; min-width: 200px; height: 43px; }
.mp-marketing { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; }
.mp-marketing span { display: inline-flex; align-items: center; gap: 8px; color: var(--c-gray-sub); }
.mp-marketing label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.mp-marketing svg { width: 18px; height: 18px; color: var(--c-gray-light); }

@media (max-width: 1300px) {
	.mp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mp-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1024px) {
	.mypage { flex-direction: column; }
	.mypage__side { width: 100%; }
	.mypage__side .mylnb { width: 100%; }
	.mp-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
	.mp-stats { grid-template-columns: minmax(0, 1fr); }
	.mp-topbar { padding: 15px 20px; }
	.mypage__content { padding: 20px; gap: 20px; }
}
.mycard__btns .btn img, .mycard__btns .btn svg { width: 16px; height: 16px; }

/* 도서 목차 */
.book-toc { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 48px; padding: 28px 30px; border-radius: var(--radius); background: var(--c-bg); }
.book-toc__group-title { margin-bottom: 12px; font-size: var(--fs-b1); font-weight: var(--fw-bold); color: var(--c-text-strong); }
.book-toc__list { display: flex; flex-direction: column; gap: 6px; }
.book-toc__list li { position: relative; padding-left: 14px; font-size: var(--fs-b2); line-height: 1.5; color: var(--c-gray-sub); }
.book-toc__list li::before { content: ""; position: absolute; left: 3px; top: 0.75em; width: 3px; height: 3px; border-radius: 50%; background: var(--c-gray-light); }

/* ----- 가로형 강의 카드 (.lcard) ----- */
.lcard {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 20px;
	box-shadow: 0px 4px 4px 0px rgba(212, 212, 212, 0.25);
}
.lcard__top {
	display: flex;
	flex: 1;
	gap: 24px;
}
.lcard__thumb {
	position: relative;
	align-self: flex-start;
	flex: 0 0 345px;
	width: 345px;
	aspect-ratio: 345 / 240;
	border-radius: var(--radius);
	background: #eef1ef;
	overflow: hidden;
}
.lcard__thumb img { width: 100%; height: 100%; object-fit: cover; }
.lcard__wish {
	position: absolute;
	top: 10px;
	right: 10px;
}
.lcard__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}
.lcard__badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}
.lcard__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 10px;
	font-size: var(--fs-h4);
	font-weight: var(--fw-medium);
	line-height: 1.4;
	letter-spacing: -0.02em;
	color: var(--c-text-strong);
}
.lcard__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
	margin-top: 20px;
	font-size: var(--fs-b1);
	color: var(--c-gray-light);
}
.lcard__price {
	border-top: 1px solid var(--c-gray-border);
	border-bottom: 1px solid var(--c-gray-border);
	margin-top:20px;
	padding: 10px 0;
	border-radius: var(--radius6);
}
.lcard__price-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: var(--fs-b1);
	color: var(--c-gray-sub);
}
.lcard__price-row + .lcard__price-row { margin-top:2px; }
.lcard__price-amount {
	font-size: var(--fs-h4);
	font-weight: var(--fw-bold);
	color: var(--c-orange);
	letter-spacing: -0.02em;
}
.lcard__price-old {
	font-size: var(--fs-b1);
	color: var(--c-gray-disabled);
	letter-spacing: -0.02em;
	text-decoration: line-through;
	margin-right: 8px;
}
.lcard__btns {
	display: flex;
	gap: 12px;
}
.lcard__btns .btn { flex: 1; }

/* ----- 웹진형 강의 카드 (.wcard : 썸네일 / 내용 / 우측 버튼) ----- */
.wcard {
	display: flex;
	align-items: stretch;
	gap: 24px;
	padding: 20px;
	transition: box-shadow 0.2s ease;
}
.wcard:hover { box-shadow: 0px 4px 4px 0px rgba(212, 212, 212, 0.25); }
.wcard__thumb {
	position: relative;
	display: flex;
	align-items: center;
	flex: 0 0 345px;
	width: 345px;
	aspect-ratio: 345 / 195;
	border-radius: var(--radius);
	background: #eef1ef;
	overflow: hidden;
}
.wcard__thumb img { width: 100%; height: 100%; object-fit: cover; }
.wcard__wish { position: absolute; top: 10px; right: 10px; }
/* 우측요소 : 상단(메타/버튼) + 하단(가격) */
.wcard__right { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wcard__top { display: flex; gap: 24px; flex: 1; }
.wcard__body { flex: 1; min-width: 0; }
.wcard__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wcard__title {
	margin-top: 10px;
	font-size: var(--fs-h4);
	font-weight: var(--fw-medium);
	line-height: 1.4;
	letter-spacing: -0.02em;
	color: var(--c-text-strong);
}
.wcard__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
	margin-top: 20px;
	font-size: var(--fs-b1);
	color: var(--c-gray-light);
}
.wcard__btns {
	flex: 0 0 150px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
}
/* 하단 : 교육비 / 최대 지원비 */
.wcard__bottom {
	display: flex;
	align-items: baseline;
	gap: 30px;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--c-line);
}
.wcard__price-item { flex: 1; display: inline-flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: var(--fs-b1); }
.wcard__price-item em { font-style: normal; color: var(--c-gray-sub); }
.wcard__price-item b { font-size: var(--fs-h4); font-weight: var(--fw-bold); letter-spacing: -0.02em; }
.wcard__price-item--edu b { color: var(--c-orange); }
.wcard__price-item--support b { color: var(--c-primary); }
.wcard__price-old { margin-right: 6px; color: var(--c-gray-disabled); text-decoration: line-through; font-size: var(--fs-b1); }

/* ----- 강사 상세 (프로필 / 경력 / 과정) ----- */
.tutor-detail { background: var(--c-bg); padding: 50px 0; }
.tutor-profile {
	display: flex;
	gap: 40px;
	align-items: flex-start;
}
.tutor-profile__photo {
	flex: 0 0 555px;
	min-width: 555px;
	width: 555px;
	aspect-ratio: 555 / 385;
	border-radius: var(--radius);
	background: #eef1ef;
	overflow: hidden;
}
.tutor-profile__photo img { width: 100%; height: 100%; object-fit: cover; }
.tutor-profile__info { flex: 1; min-width: 0; }
.tutor-profile__name {
	font-size: var(--fs-h2);
	font-weight: var(--fw-bold);
	color: var(--c-primary);
	letter-spacing: -0.02em;
}
.tutor-profile__desc {
	margin-top: 10px;
	font-size: var(--fs-b1);
	line-height: 1.5;
	color: var(--c-gray-sub);
}
.tutor-career {
	margin-top: 20px;
	padding: 20px;
	background: var(--c-white);
	border: 1px solid var(--c-gray-border);
	border-radius: var(--radius);
}
.tutor-career__title {
	font-size: var(--fs-h3);
	font-weight: var(--fw-bold);
	color: var(--c-text-strong);
}
.tutor-career__divider {
	height: 1px;
	margin: 10px 0 20px 0;
	background: var(--c-line);
}
.tutor-career__list {
	display: flex;
	flex-direction: column;
}
.tutor-career__list li {
	position: relative;
	padding-left: 16px;
	font-size: var(--fs-b1);
	line-height: 1.5;
	color: var(--c-gray-sub);
}
.tutor-career__list li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 0.65em;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--c-gray-sub);
}
.tutor-courses { padding: 100px 0; }
.tutor-courses__title {
	font-size: var(--fs-title);
	font-weight: var(--fw-bold);
	color: var(--c-text-strong);
	letter-spacing: -0.02em;
	margin-bottom: 50px;
}
.tutor-courses__title b { color: var(--c-primary); }
.tutor-courses__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}
.tutor-courses__empty {
	padding: 60px 0;
	margin-bottom: 50px;
	border-radius: var(--radius);
	background: var(--c-bg);
	text-align: center;
	font-size: var(--fs-b1);
	color: var(--c-gray-light);
}

/* ----- 오시는 길 (location) ----- */
.location { padding: 60px 0 70px; }
.location__title {
	font-size: var(--fs-title);
	font-weight: var(--fw-bold);
	color: var(--c-text-strong);
	letter-spacing: -0.04em;
	margin-bottom: 30px;
}
.location-map {
	aspect-ratio: 1440 / 315;
	border-radius: var(--radius);
	background: #eef1ef;
	overflow: hidden;
}
.location-map img { width: 100%; height: 100%; object-fit: cover; }
.location-info { margin-top: 40px; }
.location-info__row {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 18px 8px;
	border-bottom: 1px solid var(--c-line);
}
.location-info__label {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 220px;
	font-size: var(--fs-h4);
	font-weight: var(--fw-medium);
	color: var(--c-text-strong);
}
.location-info__label img { width: 20px; height: 20px; flex: 0 0 auto; }
.location-info__value {
	font-size: var(--fs-h4);
	color: var(--c-gray-sub);
}

/* =========================================================
   사업주지원안내 (owner)
   ========================================================= */
/* 페이지 인트로 (타이틀 + 설명) */
.ow-head { text-align: center; padding: 100px 0 50px; }
.ow-head__title {
	font-size: var(--fs-title);
	font-weight: var(--fw-bold);
	color: var(--c-text-strong);
	letter-spacing: -0.03em;
}
.ow-head .section-title { margin-bottom: 10px; }
.ow-head__desc {
	margin-top: 0;
	font-size: var(--fs-h3);
	color: var(--c-gray-sub);
}

/* 공통 섹션 간격 */
.ow-section:first-child { padding: 0 0 50px 0; }
.ow-section { padding: 50px 0; }
.ow-section__title {
	text-align: center;
	font-size: var(--fs-title);
	font-weight: var(--fw-medium);
	color: var(--c-text-strong);
	letter-spacing: -0.03em;
	margin-bottom:50px;
}
.ow-section__desc {
	text-align: center;
	font-size: var(--fs-b1);
	color: var(--c-gray-sub);
	margin-bottom: 36px;
}
.ow-section__title + .ow-flow,
.ow-section__title:last-child { margin-bottom: 0; }
/* 타이틀 + 설명 그룹 */
.ow-section__head { margin-bottom: 50px; }
.ow-section__head .ow-section__title { margin-bottom: 10px; }
.ow-section__head .ow-section__desc { margin-bottom: 0; }

/* ----- 제도 소개 (좌 텍스트 / 우 이미지) ----- */
.ow-about__inner {
	display: flex;
	align-items: center;
	gap: 50px;
}
.ow-about__text { flex: 1; min-width: 0; }
.ow-about__title {
	font-size: var(--fs-title);
	font-weight: var(--fw-medium);
	color: var(--c-text-strong);
	letter-spacing: -0.02em;
	margin-bottom: 30px;
}
.ow-about__list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }
.ow-about__list li {
	position: relative;
	padding-left: 16px;
	font-size: var(--fs-h4);
	line-height: 1.5;
	color: var(--c-gray-sub);
}
.ow-about__list li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 0.7em;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--c-gray-sub);
}
.ow-about__img {
	flex: 0 0 700px;
	width: 700px;
	aspect-ratio: 700 / 350;
	border-radius: var(--radius);
	overflow: hidden;
}
.ow-about__img img { width: 100%; height: 100%; object-fit: cover; }

/* ----- 지원 대상 (이미지 카드 3) ----- */
.ow-target__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.ow-target__card {
	position: relative;
	aspect-ratio: 460 / 240;
	border-radius: var(--radius);
	overflow: hidden;
}
.ow-target__card img { width: 100%; height: 100%; object-fit: cover; }
.ow-target__card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.65) 100%);
}
.ow-target__caption {
	position: absolute;
	left: 24px;
	bottom: 22px;
	z-index: 1;
	color: var(--c-white);
}
.ow-target__name {
	font-size: var(--fs-h2);
	font-weight: var(--fw-bold);
}
.ow-target__txt {
	margin-top: 6px;
	font-size: var(--fs-b2);
	line-height: 1.5;
	opacity: 0.9;
}

/* ----- 환급 제도 (방식 / 다이어그램 / 단계) ----- */
.ow-method + .ow-method { margin-top: 40px; }
/* 헤더 + 다이어그램을 하나의 박스로 묶음 */
.ow-method__box {
	border: 1px solid var(--c-gray-border);
	border-radius: var(--radius);
	overflow: hidden;
}
.ow-method__head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	height:76px;
	font-size: var(--fs-h2);
	font-weight: var(--fw-bold);
	color: var(--c-text-strong);
}
.ow-method__head--orange { background: var(--c-orange-soft); }
.ow-method__head--green { background: var(--c-primary-soft); }
.ow-method__note {
	font-size: var(--fs-b1);
	font-weight: var(--fw-regular);
	color: var(--c-gray-sub);
}

/* 다이어그램 */
.ow-flow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 40px 0;
}
.ow-flow__node { flex: 0 0 auto; text-align: center; }
.ow-flow__node img { width: 150px; height: auto; }
.ow-flow__node--hrdk img { width: 150px; }
.ow-flow__group {
	flex: 1;
	max-width: 300px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.ow-flow__seg { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ow-flow__seg--left { align-items: flex-start; }
.ow-flow__seg--right { align-items: flex-end; }
.ow-flow__seg--left .ow-flow__tag { margin-left: 20px; }
.ow-flow__seg--right .ow-flow__tag { margin-right: 20px; }
.ow-flow__seg img { width: 100%; display: block; }
.ow-flow__tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--fs-b1);
	color: var(--c-gray-sub);
	white-space: nowrap;
}
.ow-flow__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	font-size: var(--fs-b3);
	font-weight: var(--fw-bold);
	color: var(--c-white);
}
.ow-flow__num--green { background: var(--c-primary); }
.ow-flow__num--orange { background: var(--c-orange); }

/* 단계 카드 */
.ow-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-top: 16px;
}
.ow-steps--5 { grid-template-columns: repeat(5, 1fr); }
.ow-step {
	padding: 30px;
	border-radius: var(--radius);
	background: var(--c-bg);
}
.ow-step__num {
	font-size: var(--fs-h1);
	font-weight: var(--fw-bold);
	color: var(--c-gray-pale);
}
.ow-step__title {
	margin-top: 10px;
	font-size: var(--fs-h2);
	font-weight: var(--fw-medium);
	color: var(--c-text-strong);
}
.ow-step__desc {
	margin-top: 8px;
	font-size: var(--fs-h4);
	line-height: 1.5;
	color: var(--c-gray-sub);
}

/* ----- 사업주훈련 절차 (스텝 카드) ----- */
.ow-proc { display: flex; flex-direction: column; gap: 24px;margin-bottom: 50px; }
.ow-proc__row { display: flex; align-items: stretch; }
.ow-proc__card {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	padding: 30px;
	border: 1px solid var(--c-gray-border);
	border-radius: var(--radius);
}
.ow-proc__arrow {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	color: var(--c-gray-disabled);
}
.ow-proc__step {
	font-size: var(--fs-h2);
	font-weight: var(--fw-bold);
	color: var(--c-gray-pale);
}
.ow-proc__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	font-size: var(--fs-h4);
	font-weight: var(--fw-bold);
	color: var(--c-text-strong);
}
.ow-proc__title img { width: 20px; height: 20px; flex: 0 0 auto; }
.ow-proc__divider { height: 1px; margin: 16px 0; background: var(--c-line); }
.ow-proc__desc {
	margin-bottom: 16px;
	font-size: var(--fs-b1);
	line-height: 1.5;
	color: var(--c-gray-sub);
}
.ow-proc__desc b { color: var(--c-primary); font-weight: var(--fw-regular); }
.ow-proc__chip {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: auto;
	min-height: 44px;
	padding: 10px 12px;
	border-radius: var(--radius-sm);
	background: var(--c-bg);
	font-size: var(--fs-b2);
	line-height: 1.4;
	color: var(--c-gray-sub);
	text-align: center;
}
.ow-proc__chip img { width: 15px; height: 15px; flex: 0 0 auto; }
.ow-proc__chip svg { width: 14px; height: 14px; flex: 0 0 auto; }
.ow-proc__chip--primary {
	background: var(--c-primary);
	color: var(--c-white);
	font-weight: var(--fw-bold);
}
/* 화살표 없는 그리드형 절차(발급절차) */
.ow-proc__row--plain { gap: 24px; }
/* 절차 카드 내 불릿 목록 */
.ow-proc__list { margin-bottom: 16px; display: flex; flex-direction: column; gap: 8px; }
.ow-proc__list li {
	position: relative;
	padding-left: 12px;
	font-size: var(--fs-b2);
	line-height: 1.5;
	color: var(--c-gray-sub);
}
.ow-proc__list li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.65em;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--c-gray-light);
}
.ow-proc__list li.is-accent { color: var(--c-primary); }
.ow-proc__list li.is-accent::before { background: var(--c-primary); }
/* 절차 카드 내 노트 박스(필요 서류) */
.ow-proc__note {
	margin-top: auto;
	padding: 14px 16px;
	border-radius: var(--radius-sm);
	background: var(--c-bg);
	font-size: var(--fs-b2);
	line-height: 1.5;
	color: var(--c-gray-sub);
}
.ow-proc__note b { display: block; margin-bottom: 4px; color: var(--c-text-strong); font-weight: var(--fw-bold); }
/* 절차 카드 내 버튼 */
.ow-proc__btns { display: flex; gap: 10px; margin-top: auto; }
.ow-proc__btns .btn { flex: 1; }

/* ----- 환급절차 및 기간 (3-카드) ----- */
.ow-refsteps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.ow-refstep {
	display: flex;
	flex-direction: column;
	margin-bottom: 50px;
	padding: 30px;
	border: 1px solid var(--c-gray-border);
	border-radius: var(--radius);
}
.ow-refstep__icon { text-align: center; }
.ow-refstep__icon img { width: 50px; height: 50px; }
.ow-refstep__label {
	margin-top: 18px;
	text-align: center;
	font-size: var(--fs-h4);
	color: var(--c-gray-sub);
}
.ow-refstep__title {
	margin-top: 5px;
	text-align: center;
	font-size: var(--fs-h2);
	font-weight: var(--fw-bold);
	color: var(--c-primary);
}
.ow-refstep__list {
	margin-top: 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.ow-refstep__list li {
	position: relative;
	padding-left: 14px;
	font-size: var(--fs-b1);
	line-height: 1.5;
	color: var(--c-gray-sub);
}
.ow-refstep__list li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.65em;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--c-gray-light);
}
.ow-refstep__list b { color: var(--c-text-strong); font-weight: var(--fw-bold); }
.ow-refstep__btn { margin-top: 20px; }
.ow-refstep__box {
	margin-top: auto;
	padding: 20px;
	border-radius: var(--radius6);
	background: var(--c-bg);
}
.ow-refstep__group + .ow-refstep__group { margin-top: 0; }
.ow-refstep__btitle {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	font-size: var(--fs-b1);
	color: var(--c-gray-text);
}
.ow-refstep__divider { height: 1px; margin: 16px 0; background: var(--c-gray-border); }
.ow-refstep__olist {
	margin-top: 12px;
	padding-left: 18px;
	list-style: decimal;
}
.ow-refstep__olist li {
	list-style: decimal;
}

.ow-refstep__ul {
	margin-top: 12px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.ow-refstep__ul li {
	position: relative;
	padding-left: 12px;
}
.ow-refstep__ul li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.65em;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--c-gray-light);
}
.ow-refstep__olist li,
.ow-refstep__ul li,
.ow-refstep__plain { font-size: var(--fs-b1); line-height: 1.5; color: var(--c-gray-text); }
.ow-refstep__plain { margin-top: 12px; }
.ow-refstep__contact {
	margin-top: 12px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
}
.ow-refstep__contact span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--fs-b1);
	color: var(--c-gray-text);
}
.ow-refstep__contact img { width: 15px; height: 15px; flex: 0 0 auto; }

/* ----- 교육 지원 예시 ----- */
.ow-ex {
	border: 1px solid var(--c-gray-border);
	border-radius: var(--radius);
	overflow: hidden;
}
.ow-ex__head {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap:30px;
	padding:30px;
	background: var(--c-bg);
}
.ow-ex__head-title {
	font-size: var(--fs-h2);
	font-weight: var(--fw-medium);
	color: var(--c-text-strong);
}
.ow-ex__meta { font-size: var(--fs-b2); color: var(--c-gray-sub); text-align:left; line-height: 1.5; }
.ow-ex__body {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 80px;
	padding: 40px 28px;
	flex-wrap: wrap;
}
.ow-ex__item { text-align: center; flex: 0 0 auto; max-width: 260px; }
.ow-ex__item img { width: 150px; height: 150px; }
.ow-ex__formula {
	margin-top: 14px;
	font-size: var(--fs-b1);
	color: var(--c-gray-sub);
	line-height: 1.5;
}
.ow-ex__amount {
	display: block;
	margin-top: 5px;
	font-size: var(--fs-h3);
	font-weight: var(--fw-bold);
	letter-spacing: -0.02em;
}
.ow-ex__amount--blue { color: var(--c-blue); }
.ow-ex__amount--green { color: var(--c-primary); }
.ow-ex__op { font-size: 40px; color: var(--c-gray-disabled); flex: 0 0 auto; }
.ow-ex__result { font-size: var(--fs-b1); color: var(--c-gray-sub); line-height: 1.5; }
.ow-ex__result b { color: var(--c-red); font-weight: var(--fw-bold); }

/* ----- 기업별 환급 지원금 (배너) ----- */
.ow-refund__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}
.ow-refund__item {
	position: relative;
	aspect-ratio: 710 / 250;
	border-radius: var(--radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--c-white);
}
.ow-refund__item img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ow-refund__item::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.63);
}
.ow-refund__caption { position: relative; z-index: 1; padding: 0 20px; }
.ow-refund__name { font-size: 24px; font-weight: var(--fw-bold); }
.ow-refund__formula { margin-top:0; font-size: var(--fs-h4); }
.ow-refund__formula b { font-size: 36px; font-weight: var(--fw-bold); vertical-align: middle; }
/* 배너별 강조 색상 (기업 명칭 + 퍼센트) */
.ow-refund__item--blue .ow-refund__name,
.ow-refund__item--blue .ow-refund__formula b { color: #79A7FE; }
.ow-refund__item--orange .ow-refund__name,
.ow-refund__item--orange .ow-refund__formula b { color: #FF9E00; }
.ow-refund__foot {
	margin-top: 16px;
	font-size: var(--fs-b2);
	color: var(--c-gray-light);
	text-align: right;
}

/* ----- FAQ (아코디언) ----- */
.faq { display: flex; flex-direction: column; gap: 12px; }
.faq__item {
	border: 1px solid var(--c-gray-border);
	border-radius: 10px;
	overflow: hidden;
}
.faq__q {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 20px 24px;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
	font-size: var(--fs-b1);
	color: var(--c-text-strong);
}
.faq__q-mark { color: var(--c-primary); font-weight: var(--fw-bold); }
.faq__q-text { flex: 1; }
.faq__q-arrow {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	transition: transform 0.2s ease;
}
.faq__item.is-open .faq__q-arrow { transform: rotate(180deg); }
.faq__a {
	display: none;
	padding: 20px 24px;
	border-top: 1px solid var(--c-gray-border);
	background: var(--c-bg);
	font-size: var(--fs-b1);
	line-height: 1.5;
	color: var(--c-gray-sub);
}
.faq__item.is-open .faq__a { display: block; }

/* ----- FAQ 목록형 (게시판 FAQ) ----- */
.faqlist { border-top: 2px solid var(--c-primary); }
.faqlist__item { border-bottom: 1px solid var(--c-line); }
.faqlist__item.is-open { background: #F8F8F8; }
.faqlist__q { display: flex; align-items: center; gap: 20px; width: 100%; padding: 22px 24px; background: none; border: 0; cursor: pointer; text-align: left; font-size: var(--fs-b1); }
.faqlist__cate { flex: 0 0 auto; min-width: 70px; color: var(--c-gray-light); }
.faqlist__mark { flex: 0 0 auto; color: var(--c-primary); font-weight: var(--fw-bold); }
.faqlist__text { flex: 1; min-width: 0; color: var(--c-text-strong); }
.faqlist__q .badge-new { flex: 0 0 auto; }
.faqlist__arrow { flex: 0 0 auto; width: 22px; height: 22px; transition: transform 0.2s ease; }
.faqlist__item.is-open .faqlist__arrow { transform: rotate(180deg); }
.faqlist__item.is-open .faqlist__text { color: var(--c-primary); }
.faqlist__a { display: none; padding: 0 24px 24px; }
.faqlist__item.is-open .faqlist__a { display: block; }
.faqlist__a-inner { display: flex; gap: 12px; font-size: var(--fs-b1); line-height: 1.5; color: var(--c-gray-sub); }
.faqlist__a-mark { flex: 0 0 auto; color: var(--c-text-strong); font-weight: var(--fw-bold); }
.faq-file { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; padding: 14px 18px; width: 100%; background: var(--c-bg); border: 0; border-radius: var(--radius-sm); font-size: var(--fs-b2); color: var(--c-gray-sub); }
/* FAQ 게시판만 흰색 배경 */
.faqlist .faq-file { background: var(--c-white); }
.faq-file svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--c-gray-light); }

/* ----- 유의사항 ----- */
.ow-notice {
	display: flex;
	gap: 16px;
	padding: 28px 32px;
	margin-bottom: 50px;
	border-radius: var(--radius);
	background: var(--c-bg);
}
.ow-notice__head {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 110px;
	font-size: var(--fs-h4);
	font-weight: var(--fw-bold);
	color: var(--c-gray-sub);
}
.ow-notice__head img { width: 20px; height: 20px; }
.ow-notice__list { display: flex; flex-direction: column; gap: 8px; }
.ow-notice__list li {
	position: relative;
	padding-left: 14px;
	font-size: var(--fs-b1);
	line-height: 1.5;
	color: var(--c-gray-sub);
}
.ow-notice__list li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.7em;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--c-gray-light);
}

/* =========================================================
   훈련생 유의사항 (owner-notice)
   ========================================================= */
/* 인트로 리스트 강조(녹색 라벨/불릿) */
.ow-about__list--accent li::before { background: var(--c-primary); }
.ow-about__list--accent b { color: var(--c-primary); margin-right: 6px; }

/* 번호 카드 (수강생 유의사항 / 보안 및 본인인증) */
.ow-ncards { display: grid; gap: 20px; }
.ow-ncards--3 { grid-template-columns: repeat(3, 1fr); }
.ow-ncards--2 { grid-template-columns: repeat(2, 1fr); }
.ow-ncard {
	padding: 30px;
	border-radius: var(--radius);
	background: var(--c-bg);
	text-align: center;
}
.ow-ncard__num { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: #dddddd; }
.ow-ncard__title { margin-top: 8px; font-size: var(--fs-h2); font-weight: var(--fw-bold); color: var(--c-text-strong); }
.ow-ncard__desc { margin-top: 14px; font-size: var(--fs-b1); line-height: 1.5; color: var(--c-gray-sub); }

/* 평가 및 과제 테이블 */
.ow-table-wrap { border: 1px solid var(--c-gray-border); border-radius: var(--radius-sm); overflow: hidden; }
.ow-table { width: 100%; border-collapse: collapse; }
.ow-table th,
.ow-table td { height: 43px; padding: 0 16px; text-align: center; font-size: var(--fs-b1); line-height: 43px; }
.ow-table th + th,
.ow-table td + td { border-left: 1px solid var(--c-gray-border); }
.ow-table thead th { background: var(--c-primary); color: var(--c-white); font-weight: var(--fw-bold); }
.ow-table thead th + th { border-left-color: rgba(255, 255, 255, 0.3); }
.ow-table tbody td { border-top: 1px solid var(--c-gray-border); color: var(--c-gray-sub); }
.ow-table tbody td:first-child { background: var(--c-bg); color: var(--c-text-strong); font-weight: var(--fw-medium); }
/* 패널티 표 (번호 + 긴 설명 + 자감액) */
.ow-table--penalty td { height: auto; line-height: 1.5; padding: 16px 20px; }
.ow-table--penalty tbody td:first-child { width: 60px; background: transparent; color: var(--c-gray-light); font-weight: var(--fw-regular); }
.ow-table--penalty tbody td:nth-child(2) { text-align: left; color: var(--c-gray-sub); }
.ow-table-foot { margin-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.ow-table-foot li {
	position: relative;
	padding-left: 12px;
	font-size: var(--fs-b1);
	line-height: 1.5;
	color: var(--c-gray-light);
}
.ow-table-foot li::before { content: "·"; position: absolute; left: 3px; }

/* 학습 진행 규정 (아이콘 카드) */
.ow-rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ow-rule {
	padding: 36px 30px;
	border: 1px solid var(--c-gray-border);
	border-radius: var(--radius);
	text-align: center;
}
.ow-rule__icon {
	width: 100px;
	height: 90px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--c-bg);
	border-radius: var(--radius);
}
.ow-rule__icon img { width: 70px; height: 70px; }
.ow-rule__title { margin-top: 20px; font-size: var(--fs-h2); font-weight: var(--fw-bold); color: var(--c-text-strong); }
.ow-rule__list { margin-top: 18px; text-align: left; display: flex; flex-direction: column; gap: 8px; }
.ow-rule__list li {
	position: relative;
	padding-left: 12px;
	font-size: var(--fs-b1);
	line-height: 1.5;
	color: var(--c-gray-sub);
}
.ow-rule__list li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.65em;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--c-gray-light);
}

/* 모사답안 처리 기준 (이미지 + 리스트) */
.ow-mosa__inner { display: flex; align-items: center; gap: 50px; }
.ow-mosa__img {
	flex: 0 0 695px;
	width: 695px;
	aspect-ratio: 695 / 320;
	border-radius: var(--radius);
	overflow: hidden;
}
.ow-mosa__img img { width: 100%; height: 100%; object-fit: cover; }
.ow-mosa__body { flex: 1; min-width: 0; }
.ow-mosa__list { display: flex; flex-direction: column; margin-bottom: 28px; }
.ow-mosa__item {
	display: flex;
	gap: 16px;
	align-items: center;
	padding: 5px 0;
	font-size: var(--fs-b1);
	line-height: 1.5;
	color: var(--c-gray-sub);
}
.ow-mosa__item:first-child { padding-top: 0; }
.ow-mosa__num {
	flex: 0 0 50px;
	width: 50px;
	height: 50px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #F9F8F6;
	border-radius: 5px;
	font-weight: var(--fw-bold);
	color: #dddddd;
}

/* =========================================================
   내일배움카드안내 (card)
   ========================================================= */
/* 제도 소개 리스트 강조 한 줄(녹색) */
.ow-about__list li.is-accent { color: var(--c-primary); font-weight: var(--fw-medium); }
.ow-about__list li.is-accent::before { background: var(--c-primary); }

/* 제도 소개 이미지 오버레이(검정 5%) */
.ow-about__img--overlay { position: relative; }
.ow-about__img--overlay::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.05);
}

/* 제도 소개 연락처 */
.ow-about__contact { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.ow-about__contact span { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-b1); color: var(--c-gray-sub); }
.ow-about__contact img { width: 15px; height: 15px; flex: 0 0 auto; }
.ow-about__contact em { font-style: normal; color: var(--c-primary); font-weight: var(--fw-medium); }

/* 제도 소개 버튼 */
.ow-about__btns { display: flex; gap: 12px; }

/* 지원 대상 예외 안내 */
.ow-except {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--c-line);
	font-size: var(--fs-b2);
	line-height: 1.5;
	color: var(--c-gray-light);
}
.ow-except .badge { flex: 0 0 auto; }

/* 발급 대상 확인 다크 바 */
.ow-ctabar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 20px;
	height: 60px;
	border-radius: var(--radius);
	background: #2c2c2c;
	color: var(--c-white);
	font-size: var(--fs-b1);
}
.ow-ctabar__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 34px;
	padding: 0 16px;
	border-radius: 50px;
	background: var(--c-primary);
	color: var(--c-white);
	font-size: var(--fs-b2);
	font-weight: var(--fw-bold);
}
.ow-ctabar__btn svg { width: 14px; height: 14px; }

/* 발급 조건 / 증빙서류 박스 (좌 라벨 / 우 내용) */
.ow-cond {
	display: flex;
	gap: 40px;
	padding: 40px;
	border-radius: var(--radius);
	background: var(--c-bg);
}
.ow-cond__label { flex: 0 0 240px; }
.ow-cond__label-title { font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--c-primary); }
.ow-cond__label-desc { margin-top: 12px; font-size: var(--fs-b2); line-height: 1.5; color: var(--c-gray-sub); }
.ow-cond__body { flex: 1; min-width: 0; }
.ow-cond__check { display: flex; flex-direction: column; gap: 10px; }
.ow-cond__check li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: var(--fs-b2);
	line-height: 1.5;
	color: var(--c-gray-sub);
}
.ow-cond__check img { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }
.ow-cond__rows { display: flex; flex-direction: column; }
.ow-cond__row {
	display: flex;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--c-line);
}
.ow-cond__row:first-child { padding-top: 0; }
.ow-cond__row:last-child { border-bottom: 0; padding-bottom: 0; }
.ow-cond__row dt { flex: 0 0 200px; font-size: var(--fs-b2); font-weight: var(--fw-medium); color: var(--c-text-strong); }
.ow-cond__row dd { flex: 1; font-size: var(--fs-b2); line-height: 1.5; color: var(--c-gray-sub); }

/* 지원 혜택 카드 */
.ow-merits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ow-merit {
	padding: 36px 24px;
	border: 1px solid var(--c-gray-border);
	border-radius: var(--radius);
	text-align: center;
}
.ow-merit__icon {
	width: 100px;
	height: 90px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--c-bg);
	border-radius: var(--radius);
}
.ow-merit__icon img { max-width: 70px; max-height: 70px; }
.ow-merit__title { margin-top: 20px; font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--c-text-strong); }
.ow-merit__desc { margin-top: 12px; font-size: var(--fs-b2); line-height: 1.5; color: var(--c-gray-sub); }

/* =========================================================
   모사답안처리기준 (plagiarism)
   ========================================================= */
.ow-about__para { font-size: var(--fs-b1); line-height: 1.5; color: var(--c-gray-sub); margin-bottom: 20px; }
.ow-about__apply { font-size: var(--fs-b1); color: var(--c-gray-sub); }
.ow-about__apply b { color: var(--c-primary); margin-right: 8px; }

/* 단계 화살표 바 */
.ow-phase { display: flex; gap: 8px; margin-top: 24px; }
.ow-phase__bar {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 24px;
	color: #fff;
	font-size: var(--fs-b2);
	font-weight: var(--fw-bold);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
}
.ow-phase__bar--green { flex: 359 0 0; background-image: url("../images/arrow-block-green.svg"); }
.ow-phase__bar--orange { flex: 204 0 0; background-image: url("../images/arrow-block-orange.svg"); }
.ow-phase-foot { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; }
.ow-phase-foot li {
	position: relative;
	padding-left: 14px;
	font-size: var(--fs-b2);
	line-height: 1.5;
	color: var(--c-gray-sub);
}
.ow-phase-foot li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.7em;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--c-gray-light);
}
.ow-phase-foot b { color: var(--c-text-strong); font-weight: var(--fw-medium); }

/* 처리 절차 정의 리스트 */
.ow-cond__deflist { display: flex; flex-direction: column; gap: 12px; }
.ow-cond__deflist li { font-size: var(--fs-b2); line-height: 1.5; color: var(--c-gray-sub); }
.ow-cond__deflist b { display: inline-block; min-width: 80px; color: var(--c-text-strong); font-weight: var(--fw-medium); }

/* 예방 및 유의사항 카드 */
.ow-prevents { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ow-prevent { border: 1px solid var(--c-gray-border); border-radius: var(--radius); overflow: hidden; }
.ow-prevent__head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 52px;
	background: var(--c-primary);
	color: #fff;
	font-size: var(--fs-b1);
	font-weight: var(--fw-bold);
}
.ow-prevent__head svg,
.ow-prevent__head img { width: 20px; height: 20px; flex: 0 0 auto; }
.ow-prevent__body { padding: 24px 20px; text-align: center; font-size: var(--fs-b2); line-height: 1.5; color: var(--c-gray-sub); }

/* =========================================================
   LNB (좌측 아코디언 메뉴)
   ========================================================= */
.lnb {
	box-sizing: border-box;
	width: 300px;
	padding: 20px;
	border: 1px solid var(--c-gray-border);
	border-radius: var(--radius);
	background: var(--c-white);
}
.lnb__title {
	height:60px;
	line-height: 60px;
	border-bottom: 2px solid var(--c-primary);
	font-size: var(--fs-h3);
	font-weight: var(--fw-bold);
	color: var(--c-primary);
}

/* L1 항목 */
.lnb__item { border-bottom: 1px dashed var(--c-gray-border); }
.lnb__item:last-child { border-bottom: 0; }
.lnb__link {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	height:50px;
	padding: 13px 10px 13.5px 10px;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
	font-size: var(--fs-b1);
	color: var(--c-text-strong);
}
.lnb__link > img:first-child { width: 15px; height: 15px; flex: 0 0 auto; }
.lnb__label { flex: 1; }
.lnb__arrow {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	transition: transform 0.2s ease;
	transform: rotate(180deg);   /* 기본 ▼ */
}
.lnb__item.is-open > .lnb__link .lnb__arrow { transform: rotate(0); }   /* 열림 ▲ */

/* L2 영역 */
.lnb__sub { max-height: 0; overflow: hidden; padding: 0; transition: max-height 0.35s ease, padding 0.35s ease; }
.lnb__item.is-open > .lnb__sub { max-height: 1000px; padding: 4px 0 10px; }
.lnb__sub-item { background: var(--c-bg); border-radius: var(--radius-sm); }
.lnb__sub-item + .lnb__sub-item { margin-top: 5px; }
.lnb__sub-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	height:50px;
	padding: 13px 15px;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
	font-size: var(--fs-b1);
	color: var(--c-text-strong);
}
.lnb__pm { color: var(--c-gray-light); font-size: var(--fs-h4); line-height: 1; }
.lnb__pm::before { content: "+"; }
.lnb__sub-item.is-open .lnb__pm::before { content: "−"; }

/* L3 영역 */
.lnb__sub2 { max-height: 0; overflow: hidden; padding: 0 12px; transition: max-height 0.3s ease, padding 0.3s ease; }
.lnb__sub-item.is-open .lnb__sub2 { max-height: 500px; padding: 0 12px 12px; }
.lnb__sub2 a {
	display: block;
	height:40px;
	padding: 9px 12px;
	border-radius: var(--radius-sm);
	font-size: var(--fs-b1);
	color: var(--c-gray-sub);
}
.lnb__sub2 a::before { content: "· "; }
.lnb__sub2 a.is-active { background: var(--c-primary-soft); color: var(--c-primary); }

/* =========================================================
   마이페이지 LNB
   ========================================================= */
.mylnb { width: 280px; background: var(--c-white); box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.06); }
.mylnb__logo { padding: 15px 20px; text-align: center; border-bottom: 1px solid var(--c-line); }
.mylnb__logo img { height: 38px; }
.mylnb__body { padding: 20px; }
.mylnb__user { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px; border-radius: var(--radius-sm); background: #F5F6F7; }
.mylnb__user-name { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-b1); font-weight: var(--fw-medium); color: var(--c-primary); }
.mylnb__user-name svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--c-gray-light); }
.mylnb__user-edit { display: inline-flex; color: var(--c-gray-light); }
.mylnb__user-edit svg { width: 16px; height: 16px; }
.mylnb__link { display: flex; align-items: center; gap: 10px; width: 100%; padding: 15px; background: none; border: 0; border-bottom: 1px solid var(--c-line); text-align: left; font-size: var(--fs-b1); color: var(--c-gray-dark); cursor: pointer; }
.mylnb__link img, .mylnb__link > svg { width: 15px; height: 15px; flex: 0 0 auto; }
.mylnb__link > svg { color: var(--c-gray-disabled); }
.mylnb__link.is-active { color: var(--c-primary); font-weight: var(--fw-medium); }
.mylnb__label { flex: 1; min-width: 0; }
.mylnb__arrow { width: 16px; height: 16px; flex: 0 0 auto; color: var(--c-gray-light); transition: transform 0.2s; }
.mylnb__item.is-open > .mylnb__link .mylnb__arrow { transform: rotate(180deg); }
.mylnb__count { flex: 0 0 auto; margin-right: 4px; font-size: var(--fs-b1); font-weight: var(--fw-medium); color: var(--c-primary); }
.mylnb__sub { max-height: 0; overflow: hidden; background: #FAFAFA; transition: max-height 0.35s ease; }
.mylnb__item.is-open > .mylnb__sub { max-height: 300px; }
.mylnb__sub a { display: block; padding: 13px 15px 13px 40px; border-bottom: 1px solid #EEEEEE; font-size: var(--fs-b1); color: var(--c-gray-sub); transition: color 0.2s; }
.mylnb__sub a:hover { color: var(--c-primary); }
.mylnb__sub a.is-active { color: var(--c-primary); font-weight: var(--fw-medium); }
.mylnb__logout { display: flex; justify-content: flex-end; padding: 15px 0; }
.mylnb__logout .btn { border-radius: 999px; background: #F8F8F8; border-color: #F8F8F8; font-size: var(--fs-b3); font-weight: var(--fw-medium); }
.mylnb__logout .btn:hover { background: #eee; }
.mylnb__logout .btn img { width: 11px; height: 11px; }
.mylnb__cs { padding: 20px; border-radius: var(--radius-sm); background: #FAFAFA; text-align: center; }
.mylnb__cs-head { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-h3); font-weight: var(--fw-medium); color: var(--c-text-strong); }
.mylnb__cs-head .f-ico.headset { width: 20px; height: 20px; color: #888888; }
.mylnb__cs-tel { margin-top: 5px; font-size: var(--fs-title); font-weight: var(--fw-bold); letter-spacing: -0.04em; color: var(--c-primary); }
.mylnb__cs-desc { margin-top: 10px; font-size: var(--fs-b2); line-height: 1.5; color: var(--c-gray-light); }
.mylnb__cs-time { margin-top: 15px; padding: 15px; border-radius: var(--radius-sm); background: var(--c-white); text-align: left; }
.mylnb__cs-time div { display: flex; gap: 15px; font-size: var(--fs-b2); }
.mylnb__cs-time div + div { margin-top: 5px; }
.mylnb__cs-time span { flex: 0 0 auto; color: var(--c-gray-light); }
.mylnb__cs-time b { color: var(--c-gray-sub); font-weight: var(--fw-regular); }

/* =========================================================
   강의실(클래스룸) LNB
   - 구조: .roomlnb > .roomlnb__rail(마이페이지 아이콘) + .roomlnb__panel(로고+메뉴)
   - 좌측 아이콘 레일은 탭이 아니라 마이페이지로 이동하는 바로가기
   ========================================================= */
.roomlnb { display: flex; flex-direction: column; width: 300px; background: var(--c-white); box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.06); }
/* 최상단 로고 (전체 폭) */
.roomlnb__logo { display: flex; align-items: center; justify-content: center; height: 72px; border-bottom: 1px solid var(--c-line); }
.roomlnb__logo img { height: 32px; }
/* 로고 아래 : 좌(마이페이지 레일) + 우(강의실 메뉴) */
.roomlnb__cols { display: flex; flex: 1; }
/* 좌측 아이콘 레일 (마이페이지 바로가기) — wrapper에 딱 붙음(마진 없음) */
.roomlnb__rail { flex: 0 0 60px; display: flex; flex-direction: column; border-right: 1px solid var(--c-line);background: var(--c-bg); }
.roomlnb__ricon { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-bottom: 1px solid #EEEEEE; color: var(--c-gray-light); }
.roomlnb__ricon svg { width: 20px; height: 20px; }
.roomlnb__ricon:hover { color: var(--c-gray-sub); }
.roomlnb__ricon.is-active { background: var(--c-primary); color: var(--c-white); }
/* 우측 패널 (강의실 메뉴) — 메뉴 전체 wrapper 좌우 여백 */
.roomlnb__panel { flex: 1; min-width: 0; padding: 0 15px; }
/* 강의실 타이틀 (메뉴 아님) — 첫 아이콘과 같은 높이 60 */
.roomlnb__title { display: flex; align-items: center; height: 60px; border-bottom: 1px solid var(--c-primary); font-size: var(--fs-b1); font-weight: var(--fw-medium); color: var(--c-primary); }
.roomlnb__link { display: flex; align-items: center; gap: 10px; width: 100%; height: 50px; padding: 0; background: none; border: 0; border-bottom: 1px solid var(--c-line); text-align: left; font-size: var(--fs-b1); color: var(--c-gray-dark); cursor: pointer; }
.roomlnb__link:hover { color: var(--c-primary); }
.roomlnb__link.is-active { color: var(--c-primary); font-weight: var(--fw-medium); }
.roomlnb__label { flex: 1; min-width: 0; }
.roomlnb__arrow { width: 16px; height: 16px; flex: 0 0 auto; color: var(--c-gray-light); transition: transform 0.2s; }
.roomlnb__item.is-open > .roomlnb__link .roomlnb__arrow { transform: rotate(180deg); }
.roomlnb__sub { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.roomlnb__item.is-open > .roomlnb__sub { max-height: 300px; }
.roomlnb__sub a { display: flex; align-items: center; height: 40px; padding-left: 20px; background: #F7F7F7; border-radius: var(--radius-sm); font-size: var(--fs-b2); color: var(--c-gray-sub); transition: color 0.2s; }
.roomlnb__sub a + a { margin-top: 5px; }
.roomlnb__sub a:hover { color: var(--c-primary); }
.roomlnb__sub a.is-active { color: var(--c-primary); font-weight: var(--fw-medium); }

/* 강의실 콘텐츠 : 섹션 타이틀 / 수료기준 테이블 합계행 */
.room-sec__title { margin-bottom: 15px; font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--c-text-strong); }
.criteria-table tfoot td { height: 60px; padding: 8px 12px; border-top: 1px solid var(--c-gray-border); background: var(--c-bg); text-align: center; font-size: var(--fs-b1); font-weight: var(--fw-bold); color: var(--c-primary); }
/* 학습진행 현황 : 우측 화살표 (기본 board-table 6x12 오버라이드) */
.criteria-table .mp-rowlink svg { width: 18px; height: 18px; color: var(--c-gray-light); }
.criteria-table .mp-rowlink:hover svg { color: var(--c-primary); }

/* 강의 목차 (강의실) : 헤더(범례/전체보기) + 챕터 아코디언 + 차시 행 */
.lessonlist-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 15px 20px; margin-bottom: 20px; }
.lessonlist-head .room-sec__title { margin: 0; }
.lesson-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; }
.lesson-legend__item { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-b2); color: var(--c-gray-sub); }
.lesson-legend__item img { width: 16px; height: 16px; }
.lesson-legend .check { font-size: var(--fs-b2); color: var(--c-gray-sub); }
.lesson-legend .check__box { width: 18px; height: 18px; }
.lesson-legend .check__box::after { left: 5px; top: 2px; }

.chapter { background: var(--c-white); border: 1px solid var(--c-gray-border); overflow: hidden; }
.chapter + .chapter { border-top: 0; }
/* 첫 행 상단·마지막 행 하단 모서리만 라운딩 */
.lessonlist-head + .chapter { border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); }
.chapter:last-child { border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); }
.chapter__head { display: flex; align-items: center; gap: 15px; width: 100%; padding: 20px 25px; background: none; border: 0; cursor: pointer; text-align: left; font-size: var(--fs-h4); font-weight: var(--fw-medium); color: var(--c-text-strong); }
.chapter__arrow { width: 20px; height: 20px; flex: 0 0 auto; color: var(--c-gray-light); transition: transform 0.2s ease; }
.chapter.is-open .chapter__arrow { transform: rotate(180deg); }
.chapter__body { display: none; }
.chapter.is-open .chapter__body { display: flex; flex-direction: column; gap: 2px; padding: 10px; }

.lesson { display: flex; align-items: center; gap: 15px; height: 55px; padding: 0 25px; background: #fafafa; }
.lesson__no { flex: 0 0 32px; font-size: var(--fs-b1); font-weight: var(--fw-medium); color: var(--c-gray-light); }
.lesson__status { flex: 0 0 auto; display: inline-flex; }
.lesson__status img { width: 16px; height: 16px; }
.lesson > .badge-soft { flex: 0 0 auto; }
.lesson__subj { flex: 1 1 auto; min-width: 0; font-size: var(--fs-b1); color: var(--c-text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lesson__meta { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-b2); color: var(--c-gray-light); }
.lesson__meta svg, .lesson__meta img { width: 15px; height: 15px; flex: 0 0 auto; color: var(--c-gray-light); }
.lesson__date { width: 210px; }
.lesson__time { width: 175px; }
.lesson__time u { text-decoration: underline; color: var(--c-gray-sub); }
.lesson__prog { width: 76px; }
.lesson__file { flex: 0 0 auto; width: 44px; display: flex; justify-content: center; }
.lesson__filebtn { display: inline-flex; align-items: center; justify-content: center; width: 35px; height: 35px; border: 1px solid var(--c-gray-border); border-radius: var(--radius-sm); background: var(--c-white); }
.lesson__filebtn:hover { background: var(--c-bg); }
.lesson__filebtn img { width: 17px; height: 17px; }
.lesson__action { flex: 0 0 auto; width: 116px; display: flex; justify-content: flex-end; }
.lesson__none { color: var(--c-gray-disabled); }

/* 브레드크럼(.mp-topbar) 바로 아래 카드는 간격 20 (콘텐츠 기본 gap 50 보정) */
.mp-topbar + .roomtop,
.mp-topbar + .learncard { margin-top: -30px; }

/* 강의실 메인 상단 카드 : 학습 카드 + 학습 시작 전 안내를 한 카드로 */
.roomtop { padding: 20px; background: var(--c-white); box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.06); border-radius: var(--radius); }
.roomtop .learncard { padding: 0; box-shadow: none; border-radius: 0; }
.roomtop .study-notice { margin-top: 20px; }

/* 학습 시작 전 안내 (강의실 메인) */
.study-notice { padding: 25px 30px; background: #fafafa; border-radius: var(--radius); }
.study-notice__head { display: flex; align-items: center; flex-wrap: wrap; gap: 15px; padding-bottom: 20px; border-bottom: 1px solid var(--c-line); }
.study-notice__title { font-size: var(--fs-h2); font-weight: var(--fw-bold); color: var(--c-text-strong); }
.study-notice__desc { flex: 1; min-width: 240px; padding-left: 20px; border-left: 1px solid var(--c-gray-border); font-size: var(--fs-h4); color: var(--c-gray-sub); }
.study-notice__desc a { color: var(--c-primary); font-weight: var(--fw-medium); }
.study-notice__list { margin-top: 20px; display: flex; flex-direction: column; gap:2px; }
.study-notice__list li { position: relative; padding-left: 14px; font-size: var(--fs-b1); color: var(--c-gray-sub); }
.study-notice__list li::before { content: ""; position: absolute; left: 2px; top: 0.65em; width: 3px; height: 3px; border-radius: 50%; background: var(--c-gray-light); }

/* 강의실 모달 (학습 기록 / 강의 자료) */
.modal-dim[hidden] { display: none; }
.modal--sm { max-width: 420px; padding: 25px; }
.modal--sm .modal__body { margin-top: 0; padding: 20px 0 0; overflow: visible; }
.modal .mp-infotable { box-shadow: none; border: 1px solid var(--c-gray-border); }
.modal .mp-infotable th { width: 120px; }
.filelist { display: flex; flex-direction: column; padding: 0 20px; border: 1px solid var(--c-gray-border); border-radius: var(--radius); }
.filelist a { display: flex; align-items: center; gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--c-line); font-size: var(--fs-b1); color: var(--c-gray-dark); }
.filelist a:last-child { border-bottom: 0; }
.filelist a:hover { color: var(--c-primary); }
.filelist svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--c-gray-light); }

/* 학습 카드 : 교육시간 아이콘 / 출석율(집합) 변형 */
.learncard__period svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--c-gray-light); }
.learncard--attend .learncard__bar { flex: 1 1 auto; }

/* =========================================================
   시험 / 평가 목록 (강의실 > 평가 > 시험)
   ========================================================= */
/* 상태 범례 : 컬러 점 + 라벨 (점 색은 --dot 인라인 지정) */
.exam-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 20px; }
.exam-legend__item { --dot: var(--c-gray-light); display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-b2); color: var(--c-gray-sub); }
.exam-legend__item::before { content: ""; width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: var(--dot); }

/* 만족도 조사 안내 배너 */
.exam-alert { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 15px 25px; padding: 25px 30px; background: var(--c-white); box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.06); border-radius: var(--radius); }
.exam-alert__text { font-size: var(--fs-h4); color: var(--c-gray-sub); }
.exam-alert__btn { min-width: 120px; }

/* 시험 행 (카드형 리스트) */
.examlist { display: flex; flex-direction: column; gap: 15px; }
.examrow { display: flex; align-items: center; gap: 20px; padding: 25px 30px; background: var(--c-white); box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.06); border-radius: var(--radius); transition: box-shadow 0.2s; }
.examrow:hover { box-shadow: 0px 6px 18px 0px rgba(0, 0, 0, 0.1); }
.examrow__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.examrow__type { font-size: var(--fs-b2); color: var(--c-gray-light); }
.examrow__name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.examrow__title { font-size: var(--fs-h4); font-weight: var(--fw-medium); color: var(--c-text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.examrow__cols { flex: 0 0 auto; display: flex; align-items: flex-start; gap: 50px; }
.examrow__col { display: flex; flex-direction: column; gap: 8px; min-width: 90px; text-align: center; }
.examrow__col em { font-size: var(--fs-b2); font-style: normal; color: var(--c-gray-light); }
.examrow__col b { font-size: var(--fs-b1); font-weight: var(--fw-medium); color: var(--c-text-strong); }
.examrow__arrow { flex: 0 0 auto; display: inline-flex; }
.examrow__arrow svg { width: 20px; height: 20px; color: var(--c-gray-light); }
.examrow:hover .examrow__arrow svg { color: var(--c-primary); }

/* 시험 상세 (응시 전/후) */
.exam-detail { padding: 30px; background: var(--c-white); box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.06); border-radius: var(--radius); }
.exam-detail__head { display: flex; align-items: center; gap: 15px; }
.exam-detail__type { font-size: var(--fs-b1); color: var(--c-gray-light); }
.exam-detail__title { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--c-text-strong); }

/* 요약 정보 4칸 */
.exam-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 25px; padding: 25px 30px; background: var(--c-bg); border-radius: var(--radius); }
.exam-stat { display: flex; align-items: center; gap: 15px; }
.exam-stat__ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: var(--radius-sm); background: var(--c-white); }
.exam-stat__ico img { width: 28px; height: 28px; }
.exam-stat__label { font-size: var(--fs-b2); color: var(--c-gray-light); }
.exam-stat__value { margin-top: 5px; font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--c-text-strong); }
.exam-stat__value small { font-size: var(--fs-b1); font-weight: var(--fw-medium); color: var(--c-gray-sub); }

.exam-detail__desc { margin-top: 25px; font-size: var(--fs-b1); color: var(--c-gray-sub); }

/* 유의사항 박스 */
.exam-notice { margin-top: 20px; padding: 25px 30px; background: var(--c-bg); border-radius: var(--radius); }
.exam-notice__title { font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--c-text-strong); }
.exam-notice__intro { margin-top: 15px; font-size: var(--fs-b1); font-weight: var(--fw-medium); color: var(--c-gray-sub); }
.exam-notice__sub { margin-top: 20px; font-size: var(--fs-b1); font-weight: var(--fw-bold); color: var(--c-text-strong); }
.exam-notice__list { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.exam-notice__list li { position: relative; padding-left: 13px; font-size: var(--fs-b1); color: var(--c-gray-sub); }
.exam-notice__list li::before { content: "-"; position: absolute; left: 0; color: var(--c-gray-light); }
.exam-notice__list li .sub { display: block; padding-left: 8px; color: var(--c-gray-light); }

/* 하단 버튼 */
.exam-detail__submit { margin-top: 30px; display: flex; justify-content: center; }
.exam-detail__submit .btn { min-width: 180px; height: 50px; }
.exam-detail__foot { margin-top: 20px; }
.exam-detail__foot .btn { min-width: 90px; }
/* 요약 아이콘을 그린 실루엣으로 통일 (마스크 : --ico 로 svg 지정) */
.exam-stat__ico i { display: inline-block; width: 28px; height: 28px; background-color: var(--c-primary); -webkit-mask: var(--ico) no-repeat center / contain; mask: var(--ico) no-repeat center / contain; }

/* 과제 상세 : 주제 / 지침 / 첨부파일 / 제출·평가 블록 */
.exam-detail__subhead { margin-top: 25px; font-size: var(--fs-b1); font-weight: var(--fw-bold); color: var(--c-text-strong); }
.assign-topic { margin-top: 12px; padding: 18px 25px; background: var(--c-bg); border-radius: var(--radius-sm); font-size: var(--fs-b1); font-weight: var(--fw-bold); color: var(--c-text-strong); }
.assign-guide { margin-top: 20px; }
.assign-guide__sub { font-size: var(--fs-b1); font-weight: var(--fw-bold); color: var(--c-text-strong); }
.assign-guide__list { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; }
.assign-guide__list li { position: relative; padding-left: 14px; font-size: var(--fs-b1); color: var(--c-gray-sub); }
.assign-guide__list li::before { content: ""; position: absolute; left: 3px; top: 0.62em; width: 4px; height: 4px; border-radius: 50%; background: var(--c-gray-sub); }
.assign-guide__list .sub { display: block; padding-left: 0; color: var(--c-gray-light); }
.assign-file { display: flex; align-items: center; gap: 10px; margin-top: 20px; padding: 16px 20px; background: var(--c-bg); border-radius: var(--radius-sm); font-size: var(--fs-b1); color: var(--c-gray-dark); }
.assign-file i { flex: 0 0 auto; width: 16px; height: 16px; background-color: var(--c-gray-light); -webkit-mask: url("../images/ico-download.svg") no-repeat center / contain; mask: url("../images/ico-download.svg") no-repeat center / contain; }
.assign-file + .assign-file { margin-top: 10px; }

/* 제출 내용 / 평가 의견 블록 */
.assign-block { margin-top: 25px; padding: 30px; border: 1px solid var(--c-gray-border); border-radius: var(--radius); }
.assign-block__cap { font-size: var(--fs-b2); color: var(--c-gray-light); }
.assign-block__title { margin-top: 12px; padding-bottom: 20px; border-bottom: 1px solid var(--c-line); font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--c-text-strong); }
.assign-block__body { margin-top: 20px; font-size: var(--fs-b1); color: var(--c-gray-sub); }
.assign-block__body--box { padding: 25px 30px; background: var(--c-bg); border-radius: var(--radius-sm); }
.assign-block__head { font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--c-text-strong); }
.assign-empty { display: flex; align-items: center; justify-content: center; min-height: 120px; margin-top: 15px; padding: 20px; border: 1px solid var(--c-gray-border); border-radius: var(--radius-sm); background: var(--c-bg); font-size: var(--fs-b1); color: var(--c-gray-light); }

/* 토론 참여글(게시글) 본문 헤더 */
.post-view__cap { font-size: var(--fs-b2); color: var(--c-gray-light); }
.post-view__title { margin-top: 12px; font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--c-text-strong); }
.post-view__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 25px; margin-top: 15px; padding-bottom: 20px; border-bottom: 1px solid var(--c-line); font-size: var(--fs-b1); color: var(--c-gray-light); }
.post-view__meta span { display: inline-flex; align-items: center; gap: 6px; }
.post-view__meta img, .post-view__meta svg { width: 15px; height: 15px; flex: 0 0 auto; }
.post-view__body { margin-top: 25px; font-size: var(--fs-b1); color: var(--c-gray-sub); }

/* 설문 참여 문항 */
.survey-q { margin-top: 28px; }
.survey-q__title { font-size: var(--fs-h4); font-weight: var(--fw-medium); color: var(--c-text-strong); }
.survey-q__title .num { margin-right: 6px; color: var(--c-primary); font-weight: var(--fw-bold); }
.survey-q .c-input, .survey-q .c-textarea { margin-top: 14px; }
.survey-opts { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.survey-opt { display: flex; align-items: center; gap: 10px; font-size: var(--fs-b1); color: var(--c-gray-sub); cursor: pointer; }

/* =========================================================
   시험 응시 화면 (풀스크린 : 하단 고정 + 내부 스크롤)
   ========================================================= */
.examtest { display: flex; flex-direction: column; height: 100vh; background: #f4f5f6; }
.examtest__body { flex: 1 1 auto; min-height: 0; display: flex; gap: 20px; padding: 20px; }
.examtest__card { display: flex; flex-direction: column; min-height: 0; background: var(--c-white); border-radius: var(--radius-lg); box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.05); overflow: hidden; }
.examtest__main { flex: 1 1 auto; min-width: 0; }
.examtest__side { flex: 0 0 460px; }

/* 좌측 헤더 : 타이머 + 평가명 + 로고 */
.examtest__head { flex: 0 0 auto; display: flex; align-items: center; gap: 20px; padding: 18px 30px; border-bottom: 1px solid var(--c-line); }
.examtest__timer { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 999px; background: var(--c-primary); color: var(--c-white); font-size: var(--fs-h4); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.examtest__timer.is-urgent { background: var(--c-red); }
.examtest__timer img { width: 18px; height: 18px; }
.examtest__title { flex: 1; min-width: 0; font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--c-text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.examtest__logo { flex: 0 0 auto; display: inline-flex; align-items: center; }
.examtest__logo img { height: 26px; }

/* 문제 영역 (내부 스크롤) — 글자크기는 이 요소의 font-size(em) 기준 */
.examtest__q { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 30px; font-size: 15px; }
.examtest__qtitle { display: flex; gap: 8px; font-size: 1.2em; font-weight: var(--fw-medium); color: var(--c-text-strong); line-height: 1.5; }
.examtest__qtitle .num { flex: 0 0 auto; color: var(--c-primary); font-weight: var(--fw-bold); }
.examtest__qimg { margin-top: 20px; max-width: 400px; border-radius: var(--radius-sm); overflow: hidden; }
.examtest__qimg img { width: 100%; display: block; }
.examtest__passage { margin-top: 20px; padding: 22px 26px; background: var(--c-bg); border-radius: var(--radius-sm); font-size: 1em; line-height: 1.6; color: var(--c-gray-sub); }
.examtest__opts { margin-top: 24px; display: flex; flex-direction: column; gap: 16px; }
.examtest__opt { display: flex; align-items: center; gap: 12px; font-size: 1em; color: var(--c-gray-sub); cursor: pointer; }
.examtest__opt .examtest__optimg { margin-left: 30px; max-width: 300px; border-radius: var(--radius-sm); overflow: hidden; }
.examtest__opt .examtest__optimg img { width: 100%; display: block; }
.examtest__answer { margin-top: 20px; }
.examtest__input { width: 100%; height: 54px; padding: 0 18px; border: 1px solid var(--c-gray-border); border-radius: var(--radius-sm); font-family: var(--font-base); font-size: 1em; color: var(--c-gray-dark); outline: none; }
.examtest__textarea { width: 100%; min-height: 200px; padding: 16px 18px; border: 1px solid var(--c-gray-border); border-radius: var(--radius-sm); font-family: var(--font-base); font-size: 1em; line-height: 1.5; color: var(--c-gray-dark); outline: none; resize: vertical; }
.examtest__input::placeholder, .examtest__textarea::placeholder { color: var(--c-gray-light); }

/* 좌측 하단 이전/다음 (카드 내부 고정) */
.examtest__nav { flex: 0 0 auto; display: flex; gap: 20px; padding: 20px 30px; border-top: 1px solid var(--c-line); }
.examtest__nav .btn { flex: 1; height: 56px; }

/* 우측 헤더 : 글자크기 + 나가기 */
.examtest__side-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 20px 25px; }
.examtest__fontsize { display: inline-flex; align-items: center; gap: 12px; font-size: var(--fs-b1); color: var(--c-gray-sub); }
.examtest__fontsize .ctrl { display: inline-flex; align-items: center; gap: 8px; }
.examtest__fontsize button { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--c-gray-border); border-radius: 50%; background: var(--c-white); color: var(--c-gray-sub); font-size: var(--fs-h4); line-height: 1; cursor: pointer; }
.examtest__fontsize button:hover { border-color: var(--c-primary); color: var(--c-primary); }
.examtest__fontsize .lv { min-width: 14px; text-align: center; font-weight: var(--fw-medium); color: var(--c-text-strong); }

/* 답안 현황 시트 (내부 스크롤) */
.examtest__sheet { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 25px 25px; }
.exam-sheet { width: 100%; border-collapse: separate; border-spacing: 0; }
.exam-sheet thead th { position: sticky; top: 0; z-index: 1; height: 48px; padding: 0 12px; background: var(--c-primary); color: var(--c-white); font-size: var(--fs-b1); font-weight: var(--fw-bold); text-align: center; vertical-align: middle; }
.exam-sheet thead th:first-child { border-top-left-radius: var(--radius-sm); }
.exam-sheet thead th:last-child { border-top-right-radius: var(--radius-sm); }
.exam-sheet tbody td { height: 50px; padding: 0 12px; border-bottom: 1px solid var(--c-line); font-size: var(--fs-b1); color: var(--c-gray-sub); text-align: center; vertical-align: middle; }
.exam-sheet tbody tr.is-current td { background: #f2faf6; }
.sheet-no { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 26px; padding: 0 7px; border-radius: var(--radius-sm); background: var(--c-gray-bg); color: var(--c-gray-sub); font-weight: var(--fw-medium); }
.is-current .sheet-no { background: var(--c-primary); color: var(--c-white); }
.sheet-ans--done { color: var(--c-primary); font-weight: var(--fw-bold); }
.sheet-ans--none { color: var(--c-gray-light); }
.sheet-go { color: var(--c-gray-sub); text-decoration: underline; }
.sheet-go:hover { color: var(--c-primary); }

/* 하단 고정 바 */
.examtest__footer { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 30px; padding: 20px 30px; background: #3a3a3a; }
.examtest__footer p { font-size: var(--fs-b1); color: rgba(255, 255, 255, 0.85); }
.examtest__footer p b { color: var(--c-primary); font-weight: var(--fw-bold); }
.examtest__submit { flex: 0 0 auto; height: 44px; background: var(--c-red); color: var(--c-white); }
.examtest__submit:hover { background: #e04a4a; }

/* ---- 시험 결과 : 점수 pill / 정답·해설 박스 / 정오답 시트 ---- */
.examtest__box { margin-top: 18px; padding: 18px 24px; border-radius: var(--radius-sm); font-size: 1em; }
.examtest__box--answer { background: var(--c-primary-soft); }
.examtest__box--explain { background: var(--c-orange-soft); }
.examtest__box__label { font-weight: var(--fw-bold); }
.examtest__box--answer .examtest__box__label { color: var(--c-primary); }
.examtest__box--explain .examtest__box__label { color: var(--c-orange); }
.examtest__box__body { margin-top: 8px; color: var(--c-gray-sub); line-height: 1.5; }
.examtest__opt .badge-soft { margin-left: 6px; }
.examtest__q .examtest__input[readonly], .examtest__q .examtest__textarea[readonly] { background: var(--c-white); cursor: default; }

.sheet-ans { display: inline-flex; align-items: center; gap: 5px; }
.sheet-ans img { width: 15px; height: 15px; }
.sheet-ans--correct { color: var(--c-primary); }
.sheet-ans--wrong { color: #FF4540; }
.sheet-ans--partial { color: var(--c-gray-sub); }
.sheet-score b { color: var(--c-text-strong); font-weight: var(--fw-bold); }

.examtest__sheet-foot { flex: 0 0 auto; display: flex; align-items: center; gap: 16px; padding: 16px 25px; border-top: 1px solid var(--c-line); font-size: var(--fs-b1); color: var(--c-gray-sub); }
.examtest__sheet-foot .stat { display: inline-flex; align-items: center; gap: 5px; }
.examtest__sheet-foot .stat img { width: 15px; height: 15px; }
.examtest__sheet-foot .total { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--c-text-strong); }
.examtest__sheet-foot .total img { width: 16px; height: 16px; }
.examtest__sheet-foot .total b { font-weight: var(--fw-bold); color: var(--c-primary); }

@media (max-width: 1024px) {
	.examtest { height: auto; min-height: 100vh; }
	.examtest__body { flex-direction: column; }
	.examtest__side { flex: 0 0 auto; }
	.examtest__q { max-height: 60vh; }
	.examtest__sheet { max-height: 50vh; }
	.examtest__footer { position: sticky; bottom: 0; flex-wrap: wrap; gap: 12px 20px; text-align: center; }
}

/* 과제 제출 폼 */
.assign-autosave { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; }
.assign-autosave__pill { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 20px; border-radius: 999px; background: var(--c-primary); color: var(--c-white); font-size: var(--fs-b1); font-weight: var(--fw-medium); }
.assign-autosave__pill svg { width: 18px; height: 18px; }
.assign-autosave__pill b { font-weight: var(--fw-bold); }
.assign-autosave__desc { font-size: var(--fs-b1); color: var(--c-gray-sub); }
.assign-form__row + .assign-form__row { margin-top: 25px; }
.assign-form__label { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 10px; font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--c-text-strong); }
.assign-form__note { font-size: var(--fs-b2); font-weight: var(--fw-regular); color: var(--c-gray-light); }
.assign-form__note::before { content: "· "; }
.assign-form__file { display: flex; align-items: center; gap:5px; }
.assign-form__file .btn { flex: 0 0 auto; }
.assign-form__file .c-input { flex: 1; min-width: 0; }
.assign-form__actions { margin-top: 30px; display: flex; justify-content: center; gap: 10px; }
.assign-form__actions .btn { min-width: 130px; }
/* 과제 제출 폼 : 입력/버튼 높이 43 */
.assign-form .c-input,
.assign-form .btn,
.assign-form ~ .exam-detail__foot .btn { height: 43px; }

/* =========================================================
   강의 시간표 (집합강의 메인)
   ========================================================= */
.tt-sec__head { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 15px; }
.tt-wrap { background: var(--c-white); border: 1px solid var(--c-gray-border); border-radius: var(--radius); overflow: hidden; }
/* 좌: 시간 컬럼 고정(헤더가 상단 스크롤바 영역까지 덮음) / 우: 날짜 영역(스크롤바+가로 스크롤) */
.tt { display: flex; }
.tt__col--time { flex: 0 0 160px; display: flex; flex-direction: column; }
.tt__timehead { display: flex; align-items: center; justify-content: center; gap: 8px; height: 116px; background: var(--c-primary); color: var(--c-white); font-size: var(--fs-b1); font-weight: var(--fw-bold); }
.tt__timehead svg { width: 18px; height: 18px; }
.tt__days { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tt-nav { display: flex; align-items: center; gap: 20px; height: 52px; padding: 0 20px; border-bottom: 1px solid var(--c-line); }
.tt-nav__track { position: relative; flex: 1; height: 8px; border-radius: 999px; background: var(--c-gray-pale); }
.tt-nav__thumb { position: absolute; left: 0; top: 0; height: 100%; min-width: 40px; border-radius: 999px; background: var(--c-primary); cursor: grab; }
.tt-nav__thumb:active { cursor: grabbing; }
.tt-nav__btns { display: flex; gap: 6px; }
.tt-nav__btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--c-gray-border); border-radius: var(--radius-sm); background: var(--c-white); color: var(--c-gray-light); }
.tt-nav__btn:hover { color: var(--c-primary); border-color: var(--c-primary); }
.tt-nav__btn svg { width: 14px; height: 14px; }
.tt__scroll { flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.tt__scroll::-webkit-scrollbar { height: 0; }
.tt__track { display: flex; width: max-content; }
.tt__col { flex: 0 0 auto; width: 200px; border-left: 1px solid var(--c-line); }
.tt__head { height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-bottom: 1px solid var(--c-line); font-size: var(--fs-b1); color: var(--c-gray-sub); }
.tt__daynum { display: inline-flex; align-items: center; gap: 6px; }
.tt__head--sat { color: var(--c-blue); }
.tt__head--sun { color: var(--c-red); }
.tt__today { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--c-primary); color: var(--c-white); font-size: var(--fs-b3); font-weight: var(--fw-bold); }
.tt__body { position: relative; height: 680px; }
.tt__col--time .tt__body { display: flex; flex-direction: column; }
.tt__slot { flex: 0 0 68px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--c-line); font-size: var(--fs-b2); color: var(--c-gray-light); }
.tt__col:not(.tt__col--time) .tt__body { background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 67px, var(--c-line) 67px, var(--c-line) 68px); }
.tt__event { position: absolute; left: 6px; right: 6px; padding: 8px; background: var(--c-primary-soft); border: 1px solid #cfeadd; border-radius: var(--radius-sm); overflow: hidden; }
.tt__event-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: var(--fs-b2); font-weight: var(--fw-medium); color: var(--c-text-strong); }
.tt__period { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--radius-lg); background: var(--c-primary); color: var(--c-white); font-size: var(--fs-b3); font-weight: var(--fw-bold); }
.tt__more { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: var(--fs-b3); color: var(--c-gray-light); }
.tt__more svg { width: 12px; height: 12px; }
.tt__event-box { margin-top: 6px; padding: 8px 10px; background: var(--c-white); border-radius: var(--radius-sm); font-size: var(--fs-b3); line-height: 1.5; color: var(--c-gray-sub); }

/* 공지사항(강의실) : 게시판 자료 컬럼 */
.board-table .col-file { width: 90px; }
.board-table .board-file { display: inline-flex; }
.board-table .board-file img { width: 18px; height: 18px; }

/* =========================================================
   수강신청 목록 (course : LNB + 콘텐츠)
   ========================================================= */
.course-layout { display: flex; align-items: flex-start; gap: 40px; }
.course-side { flex: 0 0 300px; }
.course-main { flex: 1; min-width: 0; }
.course-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 30px;
}
/* 툴바 셀렉트 : 공통 .c-select 를 컴팩트/40px 로 */
.course-toolbar .c-select { width: auto; min-width: 150px; height: 40px; color: var(--c-text-strong); }
/* 보기 전환 토글 (갤러리 / 웹진) */
.view-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; }
.view-toggle__btn { display: inline-flex; align-items: center; justify-content: center; padding: 4px; background: none; border: 0; cursor: pointer; }
.view-toggle__btn i {
	display: block;
	width: 20px;
	height: 20px;
	background-color: #888888;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}
.view-toggle__btn--gallery i { -webkit-mask-image: url("../images/ico-gallery-type-line.svg"); mask-image: url("../images/ico-gallery-type-line.svg"); }
.view-toggle__btn--list i { -webkit-mask-image: url("../images/ico-list-type-line.svg"); mask-image: url("../images/ico-list-type-line.svg"); }
/* 기본 아웃라인 → 호버/활성 시 채움 아이콘으로 교체 */
.view-toggle__btn--gallery:hover i,
.view-toggle__btn--gallery.is-active i { -webkit-mask-image: url("../images/ico-gallery-type.svg"); mask-image: url("../images/ico-gallery-type.svg"); }
.view-toggle__btn--list:hover i,
.view-toggle__btn--list.is-active i { -webkit-mask-image: url("../images/ico-list-type-fill.svg"); mask-image: url("../images/ico-list-type-fill.svg"); }
.view-toggle__btn:hover i,
.view-toggle__btn.is-active i { background-color: var(--c-primary); }
.course-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.course-list { display: flex; flex-direction: column; gap: 20px; }

/* 카드 전체 클릭 링크 (stretched link) */
.card, .wcard { position: relative; }
.card__link, .wcard__link { position: absolute; inset: 0; z-index: 1; }
.card__wish, .wcard__wish { z-index: 2; }
.wcard__btns { position: relative; z-index: 2; }

/* ----- 교육 일정 (달력 + 리스트, 메인 datestrip 재사용) ----- */
.edu-cal__nav { display: flex; align-items: center; justify-content: center; gap: 36px; margin-bottom: 20px; }
.edu-cal__nav button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: none; border: 0; cursor: pointer; color: #333333; }
.edu-cal__nav button svg { width: 28px; height: 28px; }
.edu-cal__nav-title { font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--c-text-strong); }
.edu-cal__months { display: flex; gap: 8px; margin-bottom: 10px; }
.edu-cal__month {
	flex: 1;
	height: 40px;
	border: 1px solid var(--c-gray-border);
	border-radius: var(--radius-sm);
	background: var(--c-white);
	font-size: var(--fs-b1);
	color: var(--c-gray-sub);
	cursor: pointer;
}
.edu-cal__month.is-active { background: var(--c-primary); color: var(--c-white); border-color: var(--c-primary); font-weight: var(--fw-bold); }
.edu-cal .datestrip { margin-bottom: 0; padding: 10px 20px; }

.edu-list { margin-top: 20px; border: 1px solid var(--c-gray-border); border-radius: var(--radius); }
.edu-item { display: flex; align-items: center; gap: 24px; padding: 24px 30px; }
.edu-item + .edu-item { border-top: 1px solid var(--c-line); }
.edu-item__date { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 190px; font-size: var(--fs-b1); color: var(--c-gray-sub); }
.edu-item__date img { width: 16px; height: 16px; flex: 0 0 auto; }
.edu-item__info { flex: 1; min-width: 0; }
.edu-item__btn { flex: 0 0 auto; }

/* =========================================================
   과정 상세 (course-detail)
   ========================================================= */
/* 좌(본문) / 우(구매패널 500px 고정) 레이아웃 */
.detail { display: flex; align-items: flex-start; gap: 30px; }
.detail__main { flex: 1; min-width: 0; }
.detail__side {
	order: 2;
	flex: 0 0 500px;
	width: 500px;
	max-width: 500px;
	padding: 30px;
	border: 1px solid var(--c-gray-border);
	border-radius: var(--radius);
	position: sticky;
	top: 20px;
}
.detail__thumb {
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius);
	overflow: hidden;
	background: #eef1ef;
	margin-bottom: 24px;
}
.detail__thumb img { width: 100%; height: 100%; object-fit: cover; }
/* 우측 패널 구분선 */
.detail__side .detail-buy { margin-top: 20px; padding-top: 20px; border-top: 1px dashed var(--c-gray-border); }
.detail-hero__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.detail-hero__title { margin-top: 20px; font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: 1.4; color: var(--c-text-strong); letter-spacing: -0.02em; }
.detail-hero__by { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 14px; font-size: var(--fs-b1); color: var(--c-gray-sub); }
.detail-hero__by span { display: inline-flex; align-items: center; gap: 6px; }
.detail-hero__by img { width: 15px; height: 15px; }
.detail-hero__rate .review-stars { vertical-align: middle; }
.detail-hero__rate--sm { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 4px 10px; border: 1px solid var(--c-gray-border); border-radius: 999px; font-size: 13px; color: var(--c-gray-sub); }
.detail-hero__rate--sm .review-stars i { width: 15px; height: 15px; background-color: #FFCC00; }

.detail-buy { margin-top: 20px; }
.detail-buy__label { margin-bottom: 8px; font-size: var(--fs-b1); font-weight: var(--fw-medium); color: var(--c-text-strong); }
.detail-pricebox { margin-top: 20px; padding: 5px 0; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.detail-price { display: flex; align-items: baseline; justify-content: space-between; padding: 5px 0; font-size: var(--fs-b1); color: var(--c-gray-sub); }
.detail-price__val { font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--c-text-strong); }
.detail-price__old { color: var(--c-gray-disabled); text-decoration: line-through; margin-right: 8px; }
.detail-price--total .detail-price__val { color: var(--c-primary); font-size: var(--fs-h4); }
.detail-opt { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.detail-opt__label { font-size: var(--fs-b1); font-weight: var(--fw-medium); color: var(--c-text-strong); }
.detail-opt__box { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: var(--radius-sm); background: var(--c-bg); }
.detail-opt__item { display: flex; align-items: center; gap: 10px; font-size: var(--fs-b2); color: var(--c-gray-sub); }
.detail-opt__item .c-check { flex: 0 0 auto; }
.detail-opt__item .price { margin-left: auto; white-space: nowrap; color: var(--c-text-strong); font-weight: var(--fw-medium); }
.detail-buy__btn { margin-top: 20px; }
.detail-buy__sub { display: flex; gap: 10px; margin-top: 10px; }
.detail-buy__sub .btn { flex: 1; }
.detail-share { display: flex; justify-content: flex-end; gap: 5px; margin-top: 30px; }
.detail-share a { display: inline-flex; }
.detail-share img { width: 25px; height: 25px; }

/* 정보 스트립 (4 stats) */
.detail-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 30px; padding: 20px; background: #F8F8F8; border-radius: var(--radius); }
.detail-stat { display: flex; align-items: center; gap: 14px; }
.detail-stat img { width: 40px; height: 40px; box-sizing: content-box; flex: 0 0 auto; padding: 12px; background: var(--c-white); border-radius: var(--radius); }
.detail-stat__label { font-size: var(--fs-b1); color: var(--c-gray-light); }
.detail-stat__value { margin-top: 2px; font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--c-text-strong); }

/* 상세 안내 문구 박스 */
.detail-note { margin-top: 20px; padding: 10px 20px; background: #F8F8F8; border-radius: var(--radius-sm); font-size: var(--fs-b2); color: var(--c-gray-light); }
.detail-note b { color: var(--c-primary); font-weight: var(--fw-bold); }

/* 상세 메타 리스트 */
.detail-meta { margin-top: 30px; border: 1px solid var(--c-gray-border); border-radius: var(--radius); padding:20px; }
.detail-meta__row { display: flex; align-items: flex-start; gap: 16px; padding: 8px 0; font-size: var(--fs-b1); }
.detail-meta__row--box { padding: 10px; background: #F8F8F8; border-radius: var(--radius-sm); }
.detail-meta__label { flex: 0 0 150px; display: inline-flex; align-items: center; gap: 8px; color: var(--c-gray-sub);padding-left:10px; }
.detail-meta__row--box .detail-meta__label{  flex: 0 0 140px;padding-left:0; }
.detail-meta__label img { width: 15px; height: 15px; }
.detail-meta__ico {
	display: inline-block;
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	background-color: var(--c-gray-text);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: 50% 50%;
	mask-position: 50% 50%;
	-webkit-mask-size: contain;
	mask-size: contain;
}
.detail-meta__ico--day {
	-webkit-mask-image: url("../images/ico-day.svg");
	mask-image: url("../images/ico-day.svg");
}
.detail-meta__ico--money {
	-webkit-mask-image: url("../images/ico-money-income.svg");
	mask-image: url("../images/ico-money-income.svg");
}
.detail-meta__value { flex: 1; min-width: 0; color: var(--c-text-strong); }
.detail-period { display: flex; flex-direction: column; gap: 8px; }
.detail-period > span { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.detail-period__dates { display: inline-flex; flex-wrap: wrap; gap: 30px; }
.detail-period .badge-soft { background: #E7F6F2; color: #FF9E00; }

/* 본문 섹션 */
.detail-sec { padding: 50px 0; border-top: 1px solid var(--c-line); }
.detail-sec__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.detail-sec__filter { display: flex; align-items: center; gap: 10px; }
.detail-sec__filter-label { font-size: var(--fs-b1); font-weight: var(--fw-medium); color: var(--c-text-strong); flex: 0 0 auto; }
.detail-sec__title { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--c-text-strong); margin-bottom: 20px; }
.detail-sec__title:not(:first-child) { margin-top: 50px; }
.detail-sec__head .detail-sec__title { margin: 0; }
.detail-sec__text { font-size: var(--fs-b1); color: var(--c-gray-sub); }
.detail-goal { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 40px; padding: 20px; border-radius: var(--radius); background: var(--c-bg); }
.detail-goal li,
.detail-list li { position: relative; padding-left: 14px; font-size: var(--fs-b1); line-height: 1.5; color: var(--c-gray-sub); }
.detail-goal li::before,
.detail-list li::before { content: ""; position: absolute; left: 2px; top: 0.7em; width: 3px; height: 3px; border-radius: 50%; background: var(--c-gray-light); }
.detail-list { display: flex; flex-direction: column; gap:5px; }
.detail-target__img { width: 100%; height: 200px; border-radius: var(--radius); overflow: hidden; margin-bottom: 20px; }
.detail-target__img img { width: 100%; height: 100%; object-fit: cover; }
.detail-map .location-map { width: 100%; height: 200px; aspect-ratio: auto; }
.detail-map__addr { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 10px; font-size: var(--fs-b1); color: var(--c-gray-sub); }

/* 강사 소개 (상세) */
.detail-tutors { display: flex; flex-direction: column; gap: 16px; }
.detail-tutor { display: flex; gap: 24px; align-items: center; padding: 20px; border: 1px solid var(--c-gray-border); border-radius: var(--radius); }
.detail-tutor__photo { flex: 0 0 200px; width: 200px; height: 230px; border-radius: var(--radius); overflow: hidden; background: #eef1ef; }
.detail-tutor__photo img { width: 100%; height: 100%; object-fit: cover; }
.detail-tutor__name { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--c-text-strong); margin-bottom: 10px; }
.detail-tutor__list { display: flex; flex-direction: column;}
.detail-tutor__list li { position: relative; padding-left: 12px; font-size: var(--fs-b1); line-height: 1.5; color: var(--c-gray-sub); }
.detail-tutor__list li::before { content: ""; position: absolute; left: 2px; top: 0.65em; width: 3px; height: 3px; border-radius: 50%; background: var(--c-gray-light); }

/* 교재 소개 */
.detail-book { display: flex; gap: 24px; align-items: center; padding: 24px 28px; border: 1px solid var(--c-gray-border); border-radius: var(--radius); }
.detail-book__img { flex: 0 0 200px; width: 200px; }
.detail-book__img img { width: 100%; border-radius: var(--radius-sm); }
.detail-book__badges { margin-bottom: 10px; }
.detail-book__title { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--c-text-strong); }
.detail-book__desc { margin-top: 10px; font-size: var(--fs-b1); line-height: 1.5; color: var(--c-gray-sub); }
.detail-book__meta { margin-top: 12px; display: flex; gap: 16px; font-size: var(--fs-b2); color: var(--c-gray-light); }
.detail-book__meta span { display: inline-flex; align-items: center; gap: 6px; }

/* 강의 목차 아코디언 */
.curri { padding:0; background: var(--c-white); border: 1px solid var(--c-gray-border); border-radius: var(--radius); }
.curri__item { border-bottom: 1px solid var(--c-gray-border); }
.curri__item:last-child { border-bottom: 0; }
.curri__head {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 20px 26px;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
	font-size: var(--fs-h4);
	font-weight: var(--fw-medium);
	color: var(--c-text-strong);
}
.curri__arrow {
	order: -1;
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
	background-color: #333333;
	-webkit-mask: url("../images/toggle-arrow.svg") no-repeat 50% 50% / contain;
	mask: url("../images/toggle-arrow.svg") no-repeat 50% 50% / contain;
	transition: transform 0.2s ease;
}
.curri__item.is-open .curri__arrow { transform: rotate(180deg); }
.curri__body { display: none; padding:10px; flex-direction: column; gap:2px; }
.curri__item.is-open .curri__body { display: flex; }
.curri__lesson { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: var(--radius-sm); background: var(--c-bg); font-size: var(--fs-b2); }
.curri__lesson .no { flex: 0 0 auto; color: var(--c-gray-light); font-weight: var(--fw-medium); }
.curri__lesson .subj { flex: 1; min-width: 0; color: var(--c-text-strong); }
.curri__lesson .date { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; color: var(--c-gray-light); }
.curri__lesson .date svg,
.curri__lesson .date img { width: 14px; height: 14px; }
.curri__lesson .date i {
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
	background-color: #888888;
	-webkit-mask: url("../images/ico-lesson.svg") no-repeat 50% 50% / contain;
	mask: url("../images/ico-lesson.svg") no-repeat 50% 50% / contain;
}

/* 체크박스 (공통) */
.c-check {
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	border: 1px solid var(--c-gray-border);
	border-radius: var(--radius-sm);
	background: var(--c-white);
	cursor: pointer;
	position: relative;
}
.c-check:checked { background: var(--c-primary); border-color: var(--c-primary); }
.c-check:checked::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 2px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* LNB 활성 항목 */
.lnb__item.is-current > .lnb__link { background: var(--c-primary-soft); color: var(--c-primary); border-radius: var(--radius-sm); }

/* ----- 수강후기 ----- */
.review-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 30px; }
.review-head__title { font-size: var(--fs-h2); font-weight: var(--fw-bold); color: var(--c-text-strong); }
.review-head__title b { color: var(--c-primary); }
.review-list { display: flex; flex-direction: column; gap: 20px; }
.review-item { padding: 20px; border: 1px solid var(--c-gray-border); border-radius: var(--radius); }
.review-item__title { font-size: var(--fs-h3); font-weight: var(--fw-medium); color: var(--c-text-strong); }
.review-item__meta { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.review-stars { display: inline-flex; align-items: center; gap: 2px; }
.review-stars i {
	width: 20px;
	height: 20px;
	background-color: #FFCC00;
	-webkit-mask: url("../images/ico-star.svg") no-repeat 50% 50%;
	mask: url("../images/ico-star.svg") no-repeat 50% 50%;
	-webkit-mask-size: contain;
	mask-size: contain;
}
.review-stars i.off { background-color: var(--c-gray-border); }
.review-item__date { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-b2); color: var(--c-gray-light); }
.review-item__date svg { width: 14px; height: 14px; }
.review-item__text { margin-top: 20px; font-size: var(--fs-b2); line-height: 1.5; color: var(--c-gray-sub); }
.review-item__text--clamp {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.review-item.is-open .review-item__text--clamp {
	-webkit-line-clamp: unset;
	line-clamp: unset;
	overflow: visible;
}
.review-item__toggle {
	margin-top: 12px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: 0;
	cursor: pointer;
	font-size: var(--fs-b2);
	color: var(--c-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.review-item__toggle .is-less,
.review-item.is-open .review-item__toggle .is-more { display: none; }
.review-item.is-open .review-item__toggle .is-less { display: inline; }
.review-item__course {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 20px;
	padding: 15px;
	border-radius: var(--radius-sm);
	background: var(--c-bg);
	font-size: var(--fs-b1);
	color: var(--c-gray-light);
}
.review-item__course > img { width: 16px; height: 16px; flex: 0 0 auto; }
.review-item__course-arrow { margin-left: auto; color: var(--c-gray-light); }
.review-foot { display: flex; justify-content: flex-end; margin-top: 24px; }

/* ----- 수강후기 작성 폼 ----- */
.rvform__row { display: flex; align-items: center; gap: 24px; margin-bottom: 20px; }
.rvform__label { flex: 0 0 90px; font-size: var(--fs-b1); font-weight: var(--fw-medium); color: var(--c-text-strong); }
.rvform__label .req { color: var(--c-red); }
.rvform__field { flex: 1; min-width: 0; }
.rvform__full { margin-bottom: 20px; }
.rvform__full > .rvform__label { display: block; margin-bottom: 14px; }
.rvform__title-wrap { display: flex; align-items: center; gap: 16px; }
.rvform__secret { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-b1); color: var(--c-gray-sub); white-space: nowrap; }

/* 별점 선택 (라디오는 공통 .c-radio 사용) */
.rvrate { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; }
.rvrate label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }

/* 폼 하단 버튼 */
.rvform__actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; }
.rvform__actions-right { display: flex; align-items: center; gap: 10px; }

/* ---------------------------------------------------------
   22. Section 공통 (섹션 타이틀 / 카드 그리드)
   --------------------------------------------------------- */
.section-title {
	text-align: center;
	font-size: var(--fs-title);
	font-weight: var(--fw-bold);
	color: #333333;
	letter-spacing: -0.04em;
	margin-bottom: 30px;   /* 제목 ↔ 아래 요소 간격 공통 */
}
.card-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

/* 섹션 헤더 공통 : 타이틀(가운데) + 더보기(우측) */
.sec-head {
	position: relative;
	margin-bottom: 30px;
}
.sec-head .section-title { margin-bottom: 0; }
.sec-head .btn-more {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}

/* 인기강좌 섹션 */
.popular { margin: 150px 0; }
.popular .section-title { margin-bottom: 30px; }

/* ---------------------------------------------------------
   23. Recommend (추천 과정 - 탭 + 중앙확대 슬라이더)
   --------------------------------------------------------- */
.recommend { padding: 100px 0; background: var(--c-bg); }
.recommend .section-title { margin-bottom: 30px; }

/* 탭 메뉴 */
.tab-menu {
	display: flex;
	height: 80px;
	background: #F8F8F8;
	border-bottom: 1px solid var(--c-gray-border);
	margin-bottom: 50px;
}
/* 흰색 배경 + 높이 60 버전 (강좌 / 도서 상세) */
.tab-menu--white { height: 60px; background: var(--c-white); }
.tab-menu__item {
	position: relative;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--fs-h4);
	font-weight: var(--fw-medium);
	color: var(--c-text-strong);
	line-height:1.5;
	text-align: center;
	letter-spacing: -0.02em;
}
.tab-menu__item.is-active { color: var(--c-primary); font-weight: var(--fw-bold); }
.tab-menu__item.is-active::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 100%;
	height: 2px;
	background: var(--c-primary);
}

/* 슬라이더 */
.recommend__slider {
	position: relative;
	padding: 0 70px;   /* 화살표 공간 확보 (카드 영역 좁힘) */
}
.recommend-swiper { overflow: hidden; }
.recommend-swiper .swiper-slide {
	width: 420px;
	transform: scale(0.92);
	transition: transform 0.35s ease;
}
.recommend-swiper .swiper-slide-active { transform: scale(1); }
/* 중앙(활성) 카드만 그림자 */
.recommend-swiper .swiper-slide-active .card {
	box-shadow: 2px 6px 20px 0 rgba(0, 0, 0, 0.08);
}

/* 좌우 화살표 */
/* 슬라이더 화살표 공통 (recommend / review / promo) */
.recommend__nav,
.review__nav,
.promo__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: 20px;
	height: 40px;
	padding: 0;
	cursor: pointer;
}
.recommend__nav { top: 38%; }   /* 추천만 살짝 위로 */
.recommend__nav img,
.review__nav img,
.promo__nav img { width: 100%; height: 100%; }
.recommend__nav.swiper-button-disabled,
.review__nav.swiper-button-disabled,
.promo__nav.swiper-button-disabled { opacity: 0.3; cursor: default; }
.recommend__prev { left: 25px; }
.recommend__next { right: 25px; }

/* ---------------------------------------------------------
   24. Solution (맞춤 솔루션 - 좌측 롤링배너 + 우측 카드 2)
   --------------------------------------------------------- */
.solution { margin: 150px 0; }
.solution .section-title { margin-bottom: 30px; }
.solution__row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	align-items: stretch;
}

/* 좌측 롤링 배너 */
.solbanner {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
}
.solbanner-swiper,
.solbanner .swiper-wrapper,
.solbanner__slide { height: 100%; }
.solbanner__slide {
	position: relative;
	min-height: 400px;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}
/* 가독성용 어두운 오버레이 */
.solbanner__slide::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.6));
}
.solbanner__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 100px 30px;
}
.solbanner__sub {
	font-size: var(--fs-h3);
	color: rgba(255, 255, 255, 0.9);
}
.solbanner__title {
	margin-top: 14px;
	font-size: var(--fs-h1);   /* 24 */
	font-weight: var(--fw-bold);
	line-height: 1.3;
	color: var(--c-primary);
}
.solbanner__btn { margin-top: 30px; }

/* 컨트롤 (좌측 하단) */
.solbanner__ctrl {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	z-index: 5;
	display: flex;
	align-items: center;
	gap:0;
	height: 36px;
	padding: 10px 20px;
	border-radius: var(--radius) var(--radius) 0 0;
	background: rgba(0, 0, 0, 0.45);
	color: var(--c-white);
}
.solbanner__frac {
	position: static;     /* Swiper 기본 absolute 해제 */
	width: auto;          /* 글자 폭에 맞춤 (양옆 여백 제거) */
	min-width: 0;
	margin:0 10px 0 5px;
	font-size: var(--fs-b1);
	line-height: 1;
	white-space: nowrap;
	text-align: center;
}
.solbanner__ctrl button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	padding: 0;
}
.solbanner__ctrl button img { width: 100%; height: 100%; object-fit: contain; }

/* ---------------------------------------------------------
   25. Promo Banner (2개 노출 롤링)
   --------------------------------------------------------- */
.promo { padding: 150px 0; background: var(--c-bg); }
.promo__slider {
	position: relative;
	padding: 0 70px;   /* 화살표 공간 */
}
.promo-swiper { overflow: hidden; }
.promo-swiper .swiper-slide a { display: block; }
.promo-swiper .swiper-slide img {
	display: block;
	width: 100%;
	border-radius: 16px;
}
/* 좌우 화살표 (공통 스타일은 .recommend__nav 그룹 참조) */
.promo__prev { left: 20px; }
.promo__next { right: 20px; }

/* ---------------------------------------------------------
   26. Schedule (이달의 교육일정)
   --------------------------------------------------------- */
.schedule { padding: 100px 0; }

/* 날짜 스트립 */
.datestrip {
	position: relative;
	margin-bottom: 20px;
	padding: 20px;
	border: 1px solid var(--c-gray-border);
	border-radius: 12px;
}
.datestrip__month {
	position: absolute;
	top: -15px;
	left: 50%;
	transform: translateX(-50%);
	padding: 5px 20px;
	border-radius: 999px;
	background: var(--c-primary);
	color: var(--c-white);
	font-size: var(--fs-b2);
	font-weight: var(--fw-bold);
}
.datestrip__list {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.datestrip__day {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: var(--radius-sm);
	font-size: var(--fs-b1);
	color: var(--c-gray-sub);
}
.datestrip__day:hover { background: var(--c-gray-bg); }
.datestrip__day.is-active,
.datestrip__day.is-active:hover {
	background: var(--c-primary);
	color: var(--c-white);
	font-weight: var(--fw-bold);
}
.datestrip__day.is-holiday { color: var(--c-red); }
.datestrip__day.has-event::after {
	content: "";
	position: absolute;
	top: 3px;
	right: 3px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--c-orange);
}
.datestrip__day.is-active.has-event::after { background: var(--c-white); }

/* 일정 리스트 */
.schedule__list {
	border: 1px solid var(--c-gray-border);
	border-radius: 12px;
	max-height: 540px;
	overflow-y: auto;
}
.schedule__group { display: flex; }
.schedule__group + .schedule__group { border-top: 1px solid var(--c-line); }
.schedule__group.is-active { background: #f7f8fa; }
.schedule__date {
	flex: 0 0 170px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 24px 10px;
	font-size: var(--fs-h4);
	font-weight: var(--fw-bold);
	color: var(--c-gray-dark);
	text-align: center;
	white-space: nowrap;
}
.schedule__day { white-space: nowrap; }   /* 날짜 + 요일 한 줄 */
.schedule__day span { font-weight: var(--fw-medium); }   /* 요일 500 */
.schedule__items { flex: 1 1 auto; min-width: 0; }
.schedule__item {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 22px 28px;
}
.schedule__item + .schedule__item { border-top: 1px solid var(--c-line); }
.schedule__info { flex: 1 1 auto; min-width: 0; }
.schedule__cate {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: var(--fs-b2);
	color: var(--c-gray-light);
}
.schedule__cate svg { width: 12px; height: 12px; flex: 0 0 auto; }
.schedule__title {
	margin-top: 8px;
	font-size: var(--fs-b1);
	color: var(--c-gray-dark);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.schedule__period {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	font-size: var(--fs-h4);
	color: var(--c-gray-sub);
	white-space: nowrap;
}
.schedule__period svg,
.schedule__period .ico-cal { width: 16px; height: 16px; flex: 0 0 auto; }
.schedule__arrow {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	color: var(--c-gray-disabled);
}

/* ---------------------------------------------------------
   28. Teacher (강사 - 좌측 인트로 + 우측 카드 슬라이더)
   --------------------------------------------------------- */
.teacher { padding: 150px 0; }
.teacher__inner { display: flex; align-items: center; gap: 40px; }

/* 좌측 인트로 */
.teacher__intro { flex: 0 0 460px; }
/* 강사 / 아카데미 공통 리드 타이틀·설명 */
.lead-title {
	font-size: var(--fs-title);
	font-weight: var(--fw-bold);
	color: #333333;
	letter-spacing: -0.04em;
	white-space: nowrap;
}
.lead-desc {
	margin-top: 30px;
	font-size: var(--fs-h2);
	line-height: 1.5;
	color: var(--c-gray-sub);
}
.teacher__intro .btn-more { margin-top: 26px; }
.teacher__nav { display: flex; gap: 8px; margin-top: 34px; }
.teacher__nav button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--c-gray-border);
	border-radius: var(--radius-sm);
	color: var(--c-gray-light);
}
.teacher__nav button:hover { border-color: var(--c-gray-disabled); }
.teacher__nav button.swiper-button-disabled { opacity: 0.4; cursor: default; }
.teacher__nav svg { width: 20px; height: 20px; }

/* 우측 슬라이더 */
.teacher__slider { flex: 1 1 auto; min-width: 0; }
.teacher-swiper { overflow: hidden; }
.teacher-card {
	box-sizing: border-box;
	padding: 40px 20px 34px;
	background: var(--c-white);
	border: 1px solid var(--c-gray-border);
	border-radius: var(--radius);
	text-align: center;
}
.teacher-card__photo {
	display: block;
	width: 180px;
	height: 180px;
	margin: 0 auto;
	border-radius: 50%;
	overflow: hidden;
	background: #f0f2f1;
}
.teacher-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.teacher-card__name {
	margin-top: 24px;
	font-size: var(--fs-h3);
	font-weight: var(--fw-bold);
	color: var(--c-gray-dark);
}
.teacher-card__tag {
	margin-top:5px;
	font-size: var(--fs-b1);
	color: var(--c-gray-light);
}

/* ---------------------------------------------------------
   27. Full Banner (풀폭 띠배너 - 상하 패딩 없음)
   --------------------------------------------------------- */
.fullbanner { width: 100%; padding: 0; }
.fullbanner a { display: block; }
.fullbanner img { display: block; width: 100%; }

/* ---------------------------------------------------------
   29. Academy (이미지 + 번호 특징 리스트)
   --------------------------------------------------------- */
.academy { padding: 150px 0; background: var(--c-bg); }
.academy__inner { display: flex; align-items: center; gap: 50px; }
.academy__visual { flex: 0 0 695px; max-width: 100%; }
.academy__visual img {
	display: block;
	width: 695px;
	max-width: 100%;
	height: 600px;
	object-fit: cover;
	border-radius: var(--radius-lg);
}
.academy__body { flex: 1 1 50%; min-width: 0; }
.academy__list { margin-top: 40px; }
.academy__item {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 22px 0;
	border-top: 1px solid var(--c-line);
}
.academy__item:first-child { border-top: 0; }
.academy__num {
	flex: 0 0 auto;
	font-size: var(--fs-title);
	font-weight: var(--fw-bold);
	color: var(--c-primary);
	line-height: 1;
}
.academy__item-title {
	font-size: var(--fs-h2);
	font-weight: var(--fw-medium);
	color: var(--c-gray-dark);
}
.academy__item-desc {
	font-size: var(--fs-h3);
	font-weight: var(--fw-regular);
	color: var(--c-gray-light);
}

/* ---------------------------------------------------------
   30. Review (후기 - 중앙확대 롤링 슬라이더)
   --------------------------------------------------------- */
.review { padding: 150px 0; }

.review__slider { position: relative; padding: 0; }
.review-swiper { overflow: hidden; padding: 10px 0; }
/* 1440 컨테이너 바깥 영역을 반투명 흰색으로 덮어 카드 흐리게 */
.review__slider::before,
.review__slider::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 5;
	width: calc((100% - 1440px) / 2);
	background: rgba(255, 255, 255, 0.5);
	pointer-events: none;
}
.review__slider::before { left: 0; }
.review__slider::after { right: 0; }
.review-swiper .swiper-slide {
	width: 420px;
	height: auto;
	transform: scale(0.92);
	transition: transform 0.35s ease;
}
.review-swiper .swiper-slide-active { transform: scale(1); }

.review-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 34px 30px;
	background: var(--c-white);
	border: 1px solid var(--c-gray-border);
	border-radius: 16px;
}
.review-swiper .swiper-slide-active .review-card {
	box-shadow: 2px 6px 20px 0 rgba(0, 0, 0, 0.08);
}
.review-card__stars { display: flex; gap: 3px; }
.review-card__stars img { width: 18px; height: 18px; }
.review-card__stars .off { filter: grayscale(1); opacity: 0.3; }
.review-card__title {
	margin-top: 18px;
	font-size: var(--fs-h3);
	font-weight: var(--fw-medium);
	color: var(--c-gray-dark);
}
.review-card__body {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 14px;
	font-size: var(--fs-b1);
	line-height: 1.5;
	min-height: 4.8em;   /* 3줄 높이 확보 (1.6 × 3) */
	color: var(--c-gray-sub);
}
.review-card__more { margin-top: 18px; align-self: flex-start; }
.review-card__meta {
	margin-top: 20px;
	text-align: right;
	font-size: var(--fs-b2);
	color: var(--c-gray-light);
}
.review-card__meta b { margin-right: 6px; font-weight: var(--fw-regular); color: var(--c-gray-sub); }
.review-card__course {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 20px;          /* 이름·날짜 ↔ divider 간격 */
	padding-top: 20px;
	border-top: 1px solid var(--c-line);
	font-size: var(--fs-b1);
	color: var(--c-gray-sub);
}
.review-card__course svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--c-gray-light); }
.review-card__course .review-ico { width: 18px; height: 18px; flex: 0 0 auto; }
.review-card__course .arrow { margin-left: auto; width: 16px; height: 16px; color: var(--c-gray-disabled); }

/* 좌우 화살표 (공통 스타일은 .recommend__nav 그룹 참조) */
/* 1440 컨테이너 안쪽 끝(좌우 20px 패딩 위치)에 화살표 배치 */
.review__prev { left: max(20px, calc((100% - 1440px) / 2 + 20px)); }
.review__next { right: max(20px, calc((100% - 1440px) / 2 + 20px)); }

/* ---------------------------------------------------------
   31. Media (실무 스킬 - 텍스트 + 영상 썸네일)
   --------------------------------------------------------- */
.media { padding: 150px 0; background: var(--c-bg); }
.media__inner { display: flex; align-items: center; gap: 60px; }
.media__text { flex: 1 1 50%; min-width: 0; }
.media__btn { margin-top: 36px; }

.media__video {
	position: relative;
	display: block;
	flex: 0 0 800px;
	width: 800px;
	height: 474px;
	max-width: 100%;
	border-radius: var(--radius);
	overflow: hidden;
}
.media__video img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 영상영역 투명도 50 (어두운 오버레이) */
.media__video::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
}
.media__play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	width: 100px;
	height: 100px;
}
.media__play img { width: 100%; height: 100%; }

/* ---------------------------------------------------------
   32. Live (환급 클래스 LIVE - 영상 카드 3열)
   --------------------------------------------------------- */
.live { padding: 150px 0; }
.live__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

/* ---------------------------------------------------------
   33. Book (도서 - .card / .card-grid 재사용)
   --------------------------------------------------------- */
.book { padding: 150px 0; background: var(--c-bg); }
/* 도서 카드 썸네일은 정사각(책표지) */
.book .card__thumb {
	aspect-ratio: 1 / 1;
	background: #f1f1ee;
}

/* ---------------------------------------------------------
   34. Board (공지/FAQ 목록 + 학습지원센터)
   --------------------------------------------------------- */
.board { padding: 150px 0; }
.board__inner { display: flex; align-items: flex-start; gap: 20px; }

/* 좌측 : 탭 + 목록 */
.board__main { flex: 1 1 auto; min-width: 0; }
.board__head {
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--c-gray-border);
}
.board__tabs { display: flex; gap: 40px; }
.board__tab {
	position: relative;
	padding-bottom: 18px;
	font-size: var(--fs-h3);
	font-weight: var(--fw-medium);
	color: var(--c-gray-sub);
	letter-spacing: -0.02em;
}
.board__tab.is-active { color: var(--c-primary); font-weight: var(--fw-bold); }
.board__tab.is-active::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 100%;
	height: 2px;
	background: var(--c-primary);
}
.board__head .btn-more { margin-left: auto; margin-bottom: 14px; }

.board__list {
	padding: 20px;
	background: var(--c-bg);
	border-radius: 0 0 var(--radius) var(--radius);
}
.board__list li {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 15px 0;
	border-bottom: 1px solid var(--c-line);
}
.board__list li:last-child { border-bottom: 0; }
.board__cate { flex: 0 0 56px; font: size 15px; color: var(--c-gray-light); }
.board__subject {
	flex: 1 1 auto;
	min-width: 0;
	font-size: var(--fs-b1);
	color: var(--c-gray-dark);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.board__date { flex: 0 0 auto; font-size: var(--fs-b2); color: var(--c-gray-light); }

/* 우측 : 학습지원센터 */
.board__side { flex: 0 0 360px; }
.board__side-title {
	font-size: var(--fs-h3);
	font-weight: var(--fw-medium);
	color: var(--c-gray-sub);
	padding-bottom: 18px;
}
.board__cs {
	padding: 30px 30px 38px 30px;
	background: var(--c-bg);
	border-top: 1px solid var(--c-gray-border);
	border-radius: 0 0 var(--radius) var(--radius);
	text-align: center;
}
.board__cs-tel {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}
.board__cs-tel .f-ico { width: 40px; height: 40px; color: var(--c-gray-sub); }
.board__cs-tel b {
	font-size: var(--fs-h1);
	font-weight: var(--fw-bold);
	color: var(--c-primary);
}
.board__cs-sub {
	margin-top:5px;
	font-size: var(--fs-b1);
	color: var(--c-gray-sub);
}
.board__cs-info {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 30px;
	padding: 16px 20px;
	background: var(--c-white);
	border: 1px solid var(--c-gray-border);
	border-radius: var(--radius-sm);
	text-align: left;
}
.board__cs-info dl { display: flex; gap: 14px; font-size: var(--fs-b2); }
.board__cs-info dt { flex: 0 0 52px; color: var(--c-gray-light); }
.board__cs-info dd { color: var(--c-gray-sub); }
.board__cs-btns { display: flex; gap:5px; margin-top: 5px; }
.board__cs-btns a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	flex: 1;
	height: 44px;
	background: var(--c-white);
	border: 1px solid var(--c-gray-border);
	border-radius: var(--radius-sm);
	font-size: var(--fs-b2);
	color: var(--c-gray-sub);
}
.board__cs-btns a:hover { border-color: var(--c-gray-disabled); }
.board__cs-btns svg,
.board__cs-btns img { width: 15px; height: 15px; }

/* ---------------------------------------------------------
   35. Subpage 공통 (서브비주얼 / 브레드크럼)
   --------------------------------------------------------- */
.subvisual {
	position: relative;
	width: 100%;
	height: clamp(140px, 13.02vw, 250px);
	background: url("../images/sub-top-intro.jpg") no-repeat center center;
	background-size: cover;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.subvisual__title { position: relative; z-index: 1; font-size: var(--fs-title); font-weight: var(--fw-bold); color: #333333; }
.subvisual__desc { position: relative; z-index: 1; margin-top: 10px; font-size: var(--fs-h4); color: #333333; }

.breadcrumb { background: var(--c-white); border-bottom: 1px solid var(--c-gray-border); }
.breadcrumb .c-container {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 50px;
	font-size: var(--fs-b2);
	color: var(--c-gray-light);
}
.breadcrumb a { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-b1); color: var(--c-gray-light); }
.breadcrumb img { width: 15px; height: 15px; }
.breadcrumb svg { width: 15px; height: 15px; color: var(--c-gray-disabled); }
.breadcrumb .is-current { font-size: var(--fs-b1); color: var(--c-primary); font-weight: var(--fw-medium); }

/* ---- 인사말: 리드 ---- */
.intro-lead { padding:100px 0 60px; }
.intro-lead .c-container {
	display: flex;
	gap: 60px;
	padding-bottom: 50px;
	border-bottom: 1px solid var(--c-line);
}
.intro-lead__title { flex: 0 0 360px; font-size: var(--fs-title); font-weight: var(--fw-bold); color: var(--c-gray-dark);text-align: center; }
.intro-lead__text { flex: 1 1 auto; font-size: var(--fs-h3); line-height: 1.5; color: var(--c-gray-sub); }

/* ---- 인사말: 차별화 카드(bento) ---- */
.feature { padding: 50px 0 100px; }
.feature__title { text-align: center; font-size: var(--fs-title); font-weight: var(--fw-bold); color: var(--c-gray-dark); margin-bottom: 50px; }
.feature__grid {
	display: grid;
	grid-template-columns: 1.1fr 1fr 1fr;
	grid-auto-rows: 200px;
	gap: 20px;
}
.feature__card {
	position: relative;
	border-radius: var(--radius);
	overflow: hidden;
}
.feature__card--big { grid-row: span 2; }
.feature__card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feature__card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(transparent 45%, rgba(0, 0, 0, 0.5));
}
.feature__card .txt { position: absolute; left: 0; bottom: 0; z-index: 1; padding: 24px; color: var(--c-white); }
.feature__card .txt h3 { font-size: var(--fs-h2); font-weight: var(--fw-bold); }
.feature__card .txt p { margin-top: 8px; font-size: var(--fs-b1); opacity: 0.9; }
.feature__card--big .txt p { font-size: var(--fs-h4); }   /* 경제적 혜택 설명만 18px */

/* ---- 인사말: 다크 밴드 ---- */
.intro-band {
	height: 400px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background: url("../images/img-media.jpg") no-repeat center center;
	background-size: cover;
	text-align: center;
	color: var(--c-white);
}
.intro-band::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); }
.intro-band__inner { position: relative; z-index: 1; }
.intro-band__title { font-size: var(--fs-title); font-weight: var(--fw-bold); }
.intro-band__desc { margin-top: 18px; font-size: var(--fs-h4); line-height: 1.5; color: rgba(255, 255, 255, 0.85); }

/* ---- 인사말: 꿈꾸는 미래 ---- */
.future { padding: 150px 0; }
.future__head { display: flex; gap: 60px; }
.future__title { flex: 0 0 400px; font-size: var(--fs-title); font-weight: var(--fw-bold); line-height: 1.4; color: var(--c-gray-dark);text-align:center; }
.future__text { flex: 1 1 auto; font-size: var(--fs-h3); line-height: 1.5; color: var(--c-gray-sub); }
.future__text .point { color: var(--c-primary); }
.future__imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 50px; }
.future__imgs img { width: 100%; height: 320px; object-fit: cover; border-radius: var(--radius); display: block; }

/* ---- 인사말: 하단 CTA ---- */
.intro-cta { background: var(--c-bg); }
.intro-cta .c-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 150px;
	padding-top: 24px;
	padding-bottom: 24px;
}
.intro-cta__text { font-size: var(--fs-h2); font-weight: var(--fw-medium); color: var(--c-gray-dark); }
.intro-cta__text .point { color: var(--c-orange); font-weight: var(--fw-bold); }

/* ---------------------------------------------------------
   36. Tutor (강사소개 리스트)
   --------------------------------------------------------- */
.tutor { padding: 0; }
.tutor .tab-menu { margin-bottom: 40px; }
.tutor__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}
.tutor-card {
	display: flex;
	gap: 24px;
	padding: 20px;
	background: var(--c-white);
	border: 1px solid var(--c-gray-border);
	border-radius: var(--radius);
	box-shadow: 0px 4px 4px 0px rgba(212, 212, 212, 0.25);
}
.tutor-card__photo {
	flex: 0 0 160px;
	width: 160px;
	height: 200px;
	border-radius: 10px;
	overflow: hidden;
	background: #f0f2f1;
}
.tutor-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.tutor-card__body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.tutor-card__name { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--c-gray-dark); }
.tutor-card__desc { margin: 10px 0; font-size: var(--fs-b1); line-height: 1.5; color: var(--c-gray-sub); }
.tutor-card__more {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 15px;
	border-top: 1px solid var(--c-line);
	font-size: var(--fs-b1);
	color: var(--c-gray-dark);
}
.tutor-card__more .ico { width: 16px; height: 16px; flex: 0 0 auto; }
.tutor-card__more .ico-arrow { margin-left: 4px; }

/* 페이지네이션 화살표 (단일/더블) */
.pagination .nav svg { width: 16px; height: 16px; }
.pagination .ico-page,
.pagination .ico-page-double {
	display: inline-block;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: 50% 50%;
	mask-position: 50% 50%;
	-webkit-mask-size: contain;
	mask-size: contain;
}
.pagination .ico-page {
	-webkit-mask-image: url("../images/ico-page-arrow.svg");
	mask-image: url("../images/ico-page-arrow.svg");
}
.pagination .ico-page-double {
	-webkit-mask-image: url("../images/ico-page-double-arrow.svg");
	mask-image: url("../images/ico-page-double-arrow.svg");
}
.pagination .ico-page.right,
.pagination .ico-page-double.right { transform: rotate(180deg); }

/* =========================================================
   Responsive
   - 분기(breakpoint): 1024(태블릿) / 768(모바일)
   - 각 컴포넌트의 반응형 규칙은 아래 두 블록 안에 작성
   ========================================================= */

/* ===== ~1320px ===== */
@media (max-width: 1300px) {

	/* GNB - 메뉴 간격 축소 */
	.gnb__menu { gap: 80px; }

}

/* ===== ~1024px : 모바일 네비게이션 전환 ===== */
@media (max-width: 1024px) {

	/* 그린바엔 햄버거 + 검색창만 (메뉴는 드롭다운 패널로 분리) */
	.gnb__menu {
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		display: none;
		flex-direction: column;
		gap: 0;
		margin-left: 0;
		max-height: calc(100vh - 64px);
		overflow-y: auto;
		background: var(--c-white);
		border-top: 1px solid var(--c-gray-border);
		box-shadow: 2px 4px 8px 0px rgba(0, 0, 0, 0.08);
		z-index: 30;
	}
	.gnb.is-open .gnb__menu { display: flex; }

	/* 대메뉴 = 아코디언 헤더 */
	.gnb__menu > li {
		width: 100%;
		border-bottom: 1px solid var(--c-line);
	}
	.gnb__menu > li > a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 54px;
		line-height: normal;
		padding: 0 20px;
		font-size: var(--fs-b1);
		font-weight: var(--fw-medium);
		color: var(--c-gray-dark);
	}
	.gnb__menu > li > a:hover { opacity: 1; }
	/* 펼침 화살표(▾) */
	.gnb__menu > li > a::after {
		content: "";
		width: 10px;
		height: 9px;
		background-color: var(--c-gray-light);
		-webkit-mask: url("../images/ico-arrow-right.svg") no-repeat 50% 50%;
		mask: url("../images/ico-arrow-right.svg") no-repeat 50% 50%;
		-webkit-mask-size: contain;
		mask-size: contain;
		transform: rotate(90deg);
		transition: transform 0.2s ease;
	}
	.gnb__menu > li.is-open > a::after { transform: rotate(-90deg); }

	/* 서브메뉴 = 아코디언 패널 */
	.gnb__sub {
		position: static;
		transform: none;
		display: none;
		width: 100%;
		min-width: 0;
		padding: 6px 0;
		text-align: left;
		background: var(--c-bg);
		border: 0;
		box-shadow: none;
	}
	.gnb.is-open .gnb__sub { display: none; }              /* 데스크탑 메가메뉴 규칙 무효화 */
	.gnb__menu > li.is-open > .gnb__sub { display: block; }
	.gnb__sub > li > a {
		height: 44px;
		line-height: 44px;
		padding: 0 20px 0 32px;
		text-align: left;
	}

	/* 검색창: 햄버거 옆 남은 너비 전부 채움 */
	.gnb .search-box {
		flex: 1;
		width: auto;
		margin-left: 16px;
	}

	/* 데스크탑 전체메뉴(메가) 배경 숨김 */
	.gnb__allmenu-bg { display: none !important; }

	/* ----- Footer : 정보 / 고객센터 세로 적층 ----- */
	.footer__body { padding: 40px 0; }
	.footer__inner {
		flex-direction: column;
		gap: 28px;
	}
	.footer__cs { text-align: left; }

	/* ----- Hero ----- */
	.hero-slide { height: 480px; }
	.hero-slide__badge { font-size: 28px; }
	.hero-slide__title { font-size: 30px; }

	/* ----- Shortcut : 3열 ----- */
	.shortcut { padding: 44px 0; }
	.shortcut__list { grid-template-columns: repeat(3, 1fr); }

	/* ----- Section / Card grid ----- */
	.section-title { font-size: var(--fs-h2); }
	.card-grid { grid-template-columns: repeat(3, 1fr); }
	.popular { margin: 100px 0; }

	/* ----- Recommend ----- */
	.recommend { padding: 70px 0; }
	.recommend__slider { padding: 0 50px; }
	.recommend-swiper .swiper-slide { width: 300px; }
	.tab-menu__item { font-size: var(--fs-b1); }

	/* ----- Solution : 배너(상단 전체) + 카드 2열 ----- */
	.solution { margin: 100px 0; }
	.solution__row { grid-template-columns: repeat(2, 1fr); }
	.solbanner { grid-column: 1 / -1; }      /* 배너 한 줄 전체 */
	.solbanner__slide { min-height: 280px; }

	/* ----- Promo ----- */
	.promo { padding: 70px 0; }
	.promo__slider { padding: 0 50px; }

	/* ----- Schedule ----- */
	.schedule { padding: 70px 0; }
	.schedule__date { flex-basis: 140px; }
	.datestrip__list { overflow-x: auto; gap: 6px; }
	.datestrip__day { flex: 0 0 auto; }

	/* ----- Teacher : 인트로 위 / 슬라이더 아래 ----- */
	.teacher { padding: 70px 0; }
	.teacher__inner { flex-direction: column; align-items: stretch; gap: 30px; }
	.teacher__intro { flex: none; }
	.teacher__nav { margin-top: 20px; }

	/* ----- Academy : 이미지 위 / 내용 아래 ----- */
	.academy { padding: 70px 0; }
	.academy__inner { flex-direction: column; gap: 36px; }

	/* ----- Review ----- */
	.review { padding: 70px 0; }
	.review-swiper .swiper-slide { width: 360px; }

	/* ----- Media : 텍스트 위 / 영상 아래 ----- */
	.media { padding: 70px 0; }
	.media__inner { flex-direction: column; align-items: stretch; gap: 36px; }
	.media__video { flex-basis: auto; width: 100%; height: auto; aspect-ratio: 800 / 474; }
	.media__play { width: 76px; height: 76px; }

	/* ----- Live : 2열 ----- */
	.live { padding: 100px 0; }
	.live__list { grid-template-columns: repeat(2, 1fr); }

	/* ----- Book ----- */
	.book { padding: 100px 0; }

	/* ----- Board : 목록 위 / 학습지원센터 아래 ----- */
	.board { padding: 100px 0; }
	.board__inner { flex-direction: column; }
	.board__main { width: 100%; }
	.board__side { flex-basis: auto; width: 100%; }

	/* ----- Subpage(인사말) ----- */
	.intro-lead .c-container { flex-direction: column; gap: 20px; }
	.intro-lead__title, .future__title { flex-basis: auto; }
	.feature__grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 180px; }
	.feature__card--big { grid-row: span 2; }
	.future__head { flex-direction: column; gap: 20px; }

	/* ----- Tutor ----- */
	.tutor__list { grid-template-columns: 1fr; }

	/* ----- 수강신청 목록 ----- */
	.course-layout { flex-direction: column; }
	.course-side { flex: 0 0 auto; width: 100%; }
	.lnb { width: 100%; }
	.course-grid { grid-template-columns: repeat(2, 1fr); }
	.pcard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.search-grid--4, .search-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.search-grid--2 { grid-template-columns: 1fr; }

	/* ----- 과정 상세 ----- */
	.detail { flex-direction: column; align-items: stretch; }
	.detail__main { width: 100%; }
	.detail__side { flex: 0 0 auto; width: 100%; max-width: none; position: static; order: -1; }
	.detail-stats { grid-template-columns: repeat(2, 1fr); }
	.detail-goal { grid-template-columns: 1fr; }

	/* ----- 영상 플레이어 : 추천 영상 아래로 ----- */
	.player { flex-direction: column; }
	.player__main { width: 100%; }
	.player__side { flex: 0 0 auto; width: 100%; }

	/* ----- 강사 상세 ----- */
	.tutor-profile { flex-direction: column; }
	.tutor-profile__photo { flex: 0 0 auto; width: 100%; min-width: 0; }
	.tutor-courses__list { grid-template-columns: 1fr; }

	/* ----- 가로형 강의 카드 ----- */
	.lcard__thumb { flex: 0 0 260px; width: 260px; }

	/* ----- 사업주지원안내 ----- */
	.ow-about__inner { flex-direction: column; align-items: stretch; gap: 30px; }
	.ow-about__img { flex: 0 0 auto; width: 100%; }
	.ow-steps,
	.ow-steps--5 { grid-template-columns: repeat(2, 1fr); }
	.ow-merits { grid-template-columns: repeat(2, 1fr); }
	.ow-prevents { grid-template-columns: repeat(2, 1fr); }
	.ow-refund__list { grid-template-columns: 1fr; }
	/* 절차 스텝: 화살표 숨기고 3열 그리드 */
	.ow-proc__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
	.ow-proc__arrow { display: none; }
	/* 환급 제도 다이어그램: 가로 스크롤 유지 */
	.ow-flow { overflow-x: auto; justify-content: flex-start; gap: 8px; }
	.ow-flow__node { flex: 0 0 120px; }
	.ow-flow__node img,
	.ow-flow__node--hrdk img { width: 120px; }
	.ow-flow__group { flex: 0 0 230px; max-width: none; }
}

/* ===== ~768px : 모바일 ===== */
@media (max-width: 768px) {

	/* ----- Top Banner : 세로 가운데 정렬 ----- */
	.top-banner .c-container {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		height: auto;
		padding-top: 16px;
		padding-bottom: 16px;
		text-align: center;
	}
	.top-banner__title,
	.top-banner__desc { white-space: normal; }
	.top-banner .dday { display: none; }          /* D-day 숨김 */
	.top-banner__right { margin-left: 0; margin-top: 12px; }
	.top-banner__close { top: 14px; right: 16px; transform: none; }

	/* 로그인 / 회원가입 : 아이콘만 노출 (텍스트 숨김) */
	.header__util a {
		gap: 0;
		padding: 0 10px;
		font-size: 0;
	}

	/* ----- Footer ----- */
	.footer__links .c-container {
		flex-wrap: wrap;
		gap: 14px 20px;
		height: auto;
		padding-top: 18px;
		padding-bottom: 18px;
	}
	.footer__body { padding: 32px 0; }

	/* 메타/연락처: 구분선 제거하고 줄바꿈 */
	.footer__row { row-gap: 8px; }
	.footer__row--meta > span + span,
	.footer__row--contact > span + span {
		margin-left: 0;
		padding-left: 0;
		border-left: 0;
		flex-basis: 100%;
	}

	/* 고객센터 전화번호 약간 축소 */
	.footer__cs-tel { font-size: var(--fs-h3); }

	/* ----- Hero : 모바일 ----- */
	/* 텍스트/버튼 숨김, 배경 이미지만 (비율 유지하며 축소) */
	.hero-slide {
		height: auto;
		aspect-ratio: 16 / 5;   /* 원본 3840×1200 = 3.2:1 */
	}
	.hero-slide__text { display: none; }

	/* 탭 → dot 페이지네이션 */
	.hero-pager {
		--swiper-pagination-bottom: 14px;
		justify-content: center;
		bottom: auto;
	}
	.hero-pager .swiper-pagination-bullet {
		width: 8px;
		height: 8px;
		margin: 0 4px !important;
		padding: 0;
		border-radius: 50%;
		font-size: 0;
		background: rgba(255, 255, 255, 0.7);
	}
	.hero-pager .swiper-pagination-bullet-active {
		background: var(--c-primary);
	}

	/* ----- Shortcut : 3열, 카드 축소 ----- */
	.shortcut { padding: 32px 0; }
	.shortcut__list { gap: 10px; }
	.shortcut__item { gap: 12px; padding: 22px 6px; }
	.shortcut__ico { width: 54px; height: 54px; border-radius: 12px; }
	.shortcut__ico img { width: 28px; height: 28px; }
	.shortcut__label { font-size: var(--fs-b1); }

	/* ----- Section / Card grid ----- */
	.section-title { font-size: 22px; }
	.card-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
	.popular { margin: 70px 0; }
	.popular .section-title { margin-bottom: 30px; }

	/* ----- Solution : 전부 1열 ----- */
	.solution { margin: 70px 0; }
	.solution__row { grid-template-columns: 1fr; }

	/* ----- Promo : 1개씩, 화살표 숨김 ----- */
	.promo { padding: 50px 0; }
	.promo__slider { padding: 0; }
	.promo__nav { display: none; }

	/* ----- Teacher ----- */
	.teacher { padding: 50px 0; }

	/* ----- Academy ----- */
	.academy { padding: 50px 0; }

	/* 리드 타이틀 모바일 */
	.lead-title { font-size: 22px; white-space: normal; }
	.academy__visual { flex-basis: auto; }
	.academy__visual img { width: 100%; height: auto; }

	/* ----- Review ----- */
	.review { padding: 50px 0; }
	.review__slider { padding: 0; }
	.review-swiper .swiper-slide { width: 80%; }
	.review__nav { display: none; }

	/* ----- Media ----- */
	.media { padding: 50px 0; }
	.media__play { width: 60px; height: 60px; }

	/* ----- Live : 1열 ----- */
	.live { padding: 70px 0; }
	.live__list { grid-template-columns: 1fr; }

	/* ----- Book ----- */
	.book { padding: 70px 0; }

	/* ----- Board ----- */
	.board { padding: 70px 0; }
	.board__tabs { gap: 24px; }
	.board__cate { flex-basis: 48px; }
	.board__cs-btns { flex-wrap: wrap; }

	/* ----- Subpage(인사말) ----- */
	.subvisual__title { font-size: 28px; }
	.intro-lead { padding: 50px 0 40px; }
	.feature, .future { padding: 50px 0; }
	.feature__grid { grid-template-columns: 1fr; grid-auto-rows: 180px; }
	.feature__card--big { grid-row: span 1; }
	.future__imgs { grid-template-columns: 1fr; }
	.future__imgs img { height: 240px; }
	.intro-cta .c-container { flex-direction: column; align-items: flex-start; gap: 16px; }

	/* ----- Tutor : 사진 위 / 내용 아래 ----- */
	.tutor-card { flex-direction: column; }
	.tutor-card__photo { width: 100%; height: 220px; flex-basis: auto; }

	/* ----- Schedule : 날짜 위, 항목 아래로 적층 ----- */
	.schedule { padding: 50px 0; }
	.schedule__group { flex-direction: column; }
	.schedule__date {
		flex-basis: auto;
		flex-direction: row;
		justify-content: flex-start;
		gap: 8px;
		padding: 16px 20px;
		border-bottom: 1px solid var(--c-line);
	}
	.schedule__item { flex-wrap: wrap; gap: 8px 16px; padding: 16px 20px; }
	.schedule__period { font-size: var(--fs-b2); }

	/* ----- Recommend ----- */
	.recommend { padding: 50px 0; }
	.recommend__slider { padding: 0; }
	.recommend-swiper .swiper-slide { width: 78%; }
	.recommend__nav { display: none; }   /* 모바일은 스와이프로 */
	/* 탭: 가로 스크롤 */
	.tab-menu { overflow-x: auto; margin-bottom: 30px; }
	.tab-menu__item { flex: 0 0 auto; padding: 0 16px; }

	/* ----- 강사 상세 ----- */
	.tutor-detail { padding: 30px 0 50px; }
	.tutor-courses { padding: 50px 0; }

	/* ----- 가로형 강의 카드 : 썸네일 위 / 내용 아래 ----- */
	.lcard__top { flex-direction: column; }
	.lcard__thumb { flex: 0 0 auto; width: 100%; align-self: stretch; }
	.lcard__btns { flex-direction: column; }

	/* ----- 수강신청 목록 : 1열 ----- */
	.course-grid { grid-template-columns: 1fr; }
	.pcard-grid { grid-template-columns: 1fr; }
	.search-grid--4, .search-grid--3 { grid-template-columns: 1fr; }

	/* ----- 웹진형 영상 카드 : 썸네일 위 / 내용 아래 ----- */
	.vrow { flex-direction: column; align-items: stretch; }
	.vrow__thumb { flex: 0 0 auto; width: 100%; }

	/* ----- 방송 편성표 : 가로 스크롤 ----- */
	.bcal { overflow-x: auto; }
	.bcal__grid { min-width: 720px; }

	/* ----- 웹진형 도서 카드 : 세로 적층 ----- */
	.bookrow { flex-direction: column; align-items: stretch; }
	.bookrow__thumb { flex: 0 0 auto; width: 100%; height: 200px; }
	.bookrow__btns { flex: 0 0 auto; }

	/* ----- 게시판 상세 : 이미지+텍스트 세로 적층 ----- */
	.bview__cols { flex-direction: column; }
	.bview__cols-img { flex: 0 0 auto; width: 100%; }

	/* ----- 장바구니 : 요약 아래로, 아이템 세로 적층 ----- */
	.cart-layout { flex-direction: column; }
	.cart-main { width: 100%; }
	.pay-summary { flex: 0 0 auto; width: 100%; position: static; }
	.cart-item { flex-wrap: wrap; }
	.cart-item__thumb { flex: 0 0 auto; width: 100%; aspect-ratio: 16 / 9; }
	.cart-item__price { flex: 1 0 auto; }
	.order-form__row { flex-direction: column; gap: 8px; }
	.order-form__label { flex: 0 0 auto; padding-top: 0; }
	.card-select { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	/* ----- 교육 일정 ----- */
	.edu-cal__months { flex-wrap: wrap; }
	.edu-cal__month { flex: 0 0 calc(25% - 6px); }
	.edu-item { flex-wrap: wrap; gap: 12px; padding: 20px; }
	.edu-item__date { flex-basis: 100%; }

	/* ----- 과정 상세 ----- */
	.detail-stats { grid-template-columns: 1fr; }
	.detail-meta__row { flex-direction: column; gap: 6px; }
	.detail-tutor { flex-direction: column; align-items: flex-start; }
	.detail-book { flex-direction: column; align-items: flex-start; }
	/* 강사/교재 이미지 : 화면이 좁아지면 폭이 줄어들도록 */
	.detail-tutor__photo { width: 200px; max-width: 100%; height: auto; aspect-ratio: 200 / 230; }
	.detail-book__img { width: 200px; max-width: 100%; }
	/* 강의목차 헤더 : 제목/필터 세로 적층, 셀렉트 가변폭 */
	.detail-sec__head { flex-direction: column; align-items: flex-start; }
	.detail-sec__filter { width: 100%; }
	.detail-sec__filter .c-select { flex: 1; min-width: 0 !important; width: auto; }
	/* 강의목차 항목 : 날짜가 좁을 때 줄바꿈 */
	.curri__lesson { flex-wrap: wrap; }
	.curri__lesson .date { flex-basis: 100%; }
	/* 교육 장소 주소/버튼 세로 적층 */
	.detail-map__addr { flex-direction: column; align-items: flex-start; }

	/* ----- 학습 카드 : 세로 적층 ----- */
	.learncard { flex-direction: column; align-items: stretch; gap: 20px; }
	.learncard__thumb { flex: 0 0 auto; width: 100%; aspect-ratio: 16 / 9; }
	.learncard__action .btn { width: 100%; }

	/* ----- 시험 목록 : 안내 배너 세로 / 행 정보 위·응시정보 아래 ----- */
	.exam-alert { flex-direction: column; padding: 20px; text-align: center; }
	.exam-alert__btn { width: 100%; }
	.examrow { flex-wrap: wrap; padding: 20px; }
	.examrow__title { font-size: var(--fs-b1); white-space: normal; }
	.examrow__cols { order: 3; flex-basis: 100%; justify-content: space-between; gap: 12px; padding-top: 15px; border-top: 1px solid var(--c-line); }
	.examrow__col { min-width: 0; align-items: flex-start; text-align: left; }

	/* ----- 시험 상세 : 요약 2칸 / 여백 축소 ----- */
	.exam-detail { padding: 20px; }
	.exam-detail__head { flex-wrap: wrap; gap: 8px 12px; }
	.exam-stats { grid-template-columns: repeat(2, 1fr); gap: 15px; padding: 20px; }
	.assign-block { padding: 20px; }
	.assign-block__body--box { padding: 20px; }
	.assign-form__actions .btn { flex: 1; min-width: 0; }

	/* ----- 웹진형 카드 : 세로 적층 ----- */
	.wcard { flex-direction: column; }
	.wcard__thumb { flex: 0 0 auto; width: 100%; aspect-ratio: 16 / 9; }
	.wcard__top { flex-direction: column; gap: 16px; }
	.wcard__btns { flex: 0 0 auto; }

	/* ----- 오시는 길 : 라벨 위 / 값 아래 ----- */
	.location { padding: 40px 0 50px; }
	.location-info__row { flex-direction: column; align-items: flex-start; gap: 6px; }
	.location-info__label { flex: 0 0 auto; }

	/* ----- 사업주지원안내 ----- */
	.ow-head { padding: 40px 0 28px; }
	.ow-head__title { font-size: 26px; }
	.ow-head__desc { font-size: var(--fs-b1); }
	.ow-section { padding: 40px 0; }
	.ow-section__title,
	.ow-about__title { font-size: 24px; }
	.ow-target__list { grid-template-columns: 1fr; }
	.ow-method__head { flex-direction: column; gap: 4px; height: auto; padding: 16px; font-size: 20px; text-align: center; }
	.ow-steps,
	.ow-steps--5 { grid-template-columns: 1fr; }
	.ow-ex__head { flex-direction: column; align-items: flex-start; }
	.ow-ex__meta { text-align: left; }
	.ow-ex__body { flex-direction: column; }
	.ow-ex__op { transform: rotate(90deg); }
	.ow-proc__row { grid-template-columns: repeat(2, 1fr); }
	.ow-refsteps { grid-template-columns: 1fr; }
	.ow-ncards--3,
	.ow-ncards--2,
	.ow-rules { grid-template-columns: 1fr; }
	.ow-merits { grid-template-columns: 1fr 1fr; }
	.ow-prevents { grid-template-columns: 1fr 1fr; }
	.ow-phase { flex-direction: column; }
	.ow-phase__bar { flex: none; height: 40px; background-size: cover; }
	.ow-about__btns { flex-direction: column; }
	.ow-cond { flex-direction: column; gap: 24px; padding: 28px 24px; }
	.ow-cond__label { flex: 0 0 auto; }
	.ow-cond__row { flex-direction: column; gap: 4px; }
	.ow-cond__row dt { flex: 0 0 auto; }
	.ow-ctabar { flex-direction: column; height: auto; gap: 12px; padding: 18px; }
	.ow-mosa__inner { flex-direction: column; align-items: stretch; gap: 24px; }
	.ow-mosa__img { flex: 0 0 auto; width: 100%; }
	.ow-table-wrap { overflow-x: auto; }
	.ow-notice { flex-direction: column; gap: 10px; }
	.ow-notice__head { flex: 0 0 auto; }
	.faq__q { font-size: var(--fs-b1); padding: 16px 18px; }
	.faq__a { padding: 16px 18px; }
}

/* =========================================================
   반응형 : 480px (소형 모바일)
   ========================================================= */
@media (max-width: 480px) {
	/* 공통 여백 / 타이틀 */
	.c-container { padding-left: 15px; padding-right: 15px; }
	.subvisual__title { font-size: 24px; }
	.subvisual__desc { font-size: var(--fs-b1); }
	.section-title { font-size: 26px; }

	/* 강의실(마이페이지) */
	.mypage__content { padding: 15px; gap: 15px; }
	.mypage__footer { margin: auto 15px 15px; padding: 20px; }
	.learncard { padding: 15px; }
	.learncard__title { font-size: var(--fs-h4); }
	.learncard__prog-label { width: 90px; font-size: var(--fs-b2); }
	.room-sec__title { font-size: var(--fs-h4); }

	/* 시험/과제/토론 상세 */
	.exam-detail { padding: 15px; }
	.exam-stats { grid-template-columns: 1fr; }
	.exam-detail__submit .btn,
	.exam-detail__foot .btn { width: 100%; }
	.exam-detail__submit .btn { min-width: 0; }

	/* 게시판 테이블 : 글자/여백 축소 + 가로 스크롤 방지 */
	.board-table thead th,
	.board-table tbody td { padding: 8px 8px; font-size: var(--fs-b2); }
	.board-table .col-writer { width: 70px; }
	.board-table .col-date { width: 90px; }
	.board-table .col-hit { width: 54px; }

	/* 작성 폼 하단 버튼 : 세로 적층 */
	.board-write__actions { flex-direction: column; align-items: stretch; }
	.board-write__actions-right { width: 100%; }
	.board-write__actions .btn { flex: 1; }

	/* 페이지네이션 : 촘촘하게 */
	.pagination { gap: 2px; flex-wrap: wrap; }
	.pagination .page, .pagination .nav { min-width: 30px; height: 30px; }

	/* 시험 응시/결과 : 요약 시트 높이 확대 */
	.examtest__q { padding: 20px; }
	.examtest__head { padding: 15px 20px; gap: 12px; }
	.examtest__title { font-size: var(--fs-h4); }
}

/* =========================================================
   반응형 : 375px (초소형 모바일)
   ========================================================= */
@media (max-width: 375px) {
	/* 공통 여백 / 타이틀 */
	.c-container { padding-left: 12px; padding-right: 12px; }
	.subvisual__title { font-size: 20px; }
	.subvisual__desc { font-size: var(--fs-b2); }
	.section-title { font-size: 22px; }

	/* 강의실(마이페이지) */
	.mypage__content { padding: 12px; }
	.learncard { padding: 12px; }
	.learncard__title { font-size: var(--fs-b1); }
	.learncard__prog { flex-wrap: wrap; }
	.learncard__prog-label { width: auto; }
	.learncard__bar { flex-basis: 100%; }

	/* 상세 카드 */
	.exam-detail { padding: 12px; }
	.assign-block { padding: 15px; }
	.post-view__title, .exam-detail__title { font-size: var(--fs-h4); }
	.post-view__meta { gap: 10px 16px; }

	/* 게시판 테이블 : 여백/글자 더 축소 */
	.board-table thead th, .board-table tbody td { padding: 8px 6px; font-size: var(--fs-b3); }

	/* 시험 응시/결과 */
	.examtest__body { padding: 12px; gap: 12px; }
	.examtest__nav { flex-direction: column; padding: 15px; }
	.examtest__nav .btn { height: 48px; }
	.examtest__footer { flex-direction: column; gap: 10px; padding: 15px; }
	.examtest__q { padding: 15px; }

	/* 댓글 */
	.cmt-item { padding: 16px 15px; }
	.cmt-item__head { flex-wrap: wrap; gap: 6px 10px; }
}