/* 학점은행제 최단기간 취득 시뮬레이터
   ------------------------------------------------------------
   컬러 컨셉: 네이비(주) + 오렌지(포인트)
   - 네이비 : 헤더 블록, 기본 액션 버튼, 선택 상태, 값 텍스트 등 "근간" 톤
   - 오렌지 : 헤더 뱃지 / 헤더 장식 라인 / 소제목 포인트 바 /
              최단기간 하이라이트 카드 / 최종 CTA 버튼 — 이 5곳에만 사용
   ※ CSS 변수(var()) 미사용 — DOM 스코프 문제로 값이 무효화되는 걸 방지하기 위해
     모든 색상은 하드코딩. 브랜드 컬러 변경 시 아래 값들을 직접 치환할 것.
   ------------------------------------------------------------ */

.c-popup--course-sim .c-popup__dialog {
	position: relative;
	max-width: 720px;
	width: calc(100% - 32px);
	max-height: min(90vh, 860px);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	border-radius: 20px;
	background: #ffffff;
	box-shadow: 0 32px 64px rgba(11, 23, 48, 0.32), 0 4px 14px rgba(11, 23, 48, 0.12);
}

/* ── 헤더: 네이비 블록 (높이 고정) ──────────────────────────
   제목/부제목 텍스트 길이와 무관하게 항상 동일한 높이를 유지하도록
   height를 고정값으로 지정. 오렌지 하단 라인은 "그라데이션 보더" 기법으로
   border 영역에만 그려지므로 텍스트 콘텐츠와 물리적으로 겹치지 않음. */
.c-popup--course-sim .c-popup__header {
	height: 132px;
	flex: 0 0 132px; /* 결과 화면으로 콘텐츠가 늘어나도 헤더는 절대 줄어들지 않도록 고정 */
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 0 22px 0 26px;
	border-bottom: 3px solid transparent;
	background:
		linear-gradient(135deg, #0B1730 0%, #14264A 55%, #1B2F55 100%) padding-box,
		linear-gradient(90deg, #FB8500, #FFB703) border-box;
}

.c-popup--course-sim .c-popup__header-text {
	flex: 1;
	min-width: 0;
	padding-right: 4px;
	overflow: hidden;
}

/* 헤더 뱃지 (오렌지 사용처 ①) — 실제 DOM 추가 없이 ::before로만 삽입 */
.c-popup--course-sim .c-popup__header-text::before {
	content: '무료 · AI 자동계산';
	display: inline-flex;
	align-items: center;
	background: linear-gradient(135deg, #FFB703 0%, #FB8500 100%);
	color: #ffffff;
	font-size: 0.7rem;
	font-weight: 800;
	padding: 4px 11px;
	border-radius: 20px;
	letter-spacing: -0.01em;
	margin-bottom: 12px;
	box-shadow: 0 4px 10px rgba(251, 133, 0, 0.3);
}

.c-popup--course-sim .c-popup__title {
	margin: 0;
	font-size: 1.28rem;
	font-weight: 800;
	color: #ffffff;
	letter-spacing: -0.02em;
}

.c-popup--course-sim .c-popup__sub {
	margin: 6px 0 0;
	font-size: 0.87rem;
	color: rgba(255, 255, 255, 0.68);
	line-height: 1.45;
}

.c-popup--course-sim .c-popup__close {
	position: static;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 0 !important;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.08) !important;
	box-shadow: none !important;
	outline: none !important;
	color: rgba(255, 255, 255, 0.8);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	appearance: none;
	-webkit-appearance: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.c-popup--course-sim .c-popup__close:hover,
.c-popup--course-sim .c-popup__close:focus,
.c-popup--course-sim .c-popup__close:focus-visible {
	background: rgba(255, 255, 255, 0.18) !important;
	color: #ffffff;
	outline: none !important;
	box-shadow: none !important;
}

.c-popup--course-sim .c-popup__body {
	flex: 1 1 auto;
	min-height: 0; /* flex 컨테이너 안에서 overflow-y:auto가 정상 동작하도록 하는 필수 보정값 */
	padding: 8px 24px 24px;
	overflow-y: auto;
}

.sim-view[hidden] {
	display: none !important;
}

.sim-form-grid {
	display: grid;
	gap: 16px;
	margin-top: 8px;
}

.sim-field label.sim-label,
.sim-field span.sim-label {
	display: block;
	margin-bottom: 8px;
	font-size: 0.9rem;
	font-weight: 700;
	color: #1e293b;
}

.sim-field select,
.sim-field input[type="text"] {
	width: 100%;
	height: 46px;
	border: 1px solid #dbe3ee;
	border-radius: 10px;
	padding: 0 14px;
	font-size: 0.95rem;
	color: #334155;
	background: #fff;
	box-sizing: border-box;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sim-field select:hover,
.sim-field input[type="text"]:hover {
	border-color: #b8c2d1;
}

/* 포커스 링 — 네이비 톤으로 통일 (오렌지는 여기 안 씀) */
.sim-field select:focus,
.sim-field input[type="text"]:focus {
	outline: none;
	border-color: #1e293b;
	box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.12);
}

.sim-radio-row,
.sim-chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sim-radio,
.sim-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 42px;
	padding: 8px 12px;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	background: #f8fafc;
	cursor: pointer;
	font-size: 0.9rem;
	color: #334155;
	transition: all 0.18s ease;
}

.sim-radio:hover,
.sim-chip:hover {
	border-color: #94a3b8;
}

/* 선택 상태 — 네이비로 통일 (기존 오렌지 → 네이비 전환, 브랜드 근간 톤 강화) */
.sim-radio:has(input:checked),
.sim-chip:has(input:checked) {
	border-color: #0f172a;
	background: #EEF1F6;
	color: #0f172a;
	font-weight: 700;
}

.sim-check-row {
	display: grid;
	gap: 8px;
}

.sim-check {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.9rem;
	color: #475569;
}

.sim-error {
	margin: 4px 0 0;
	color: #dc2626;
	font-size: 0.88rem;
}

.sim-actions {
	display: flex;
	gap: 10px;
	margin-top: 8px;
}

.sim-btn {
	appearance: none;
	border: 0;
	border-radius: 10px;
	height: 48px;
	padding: 0 18px;
	font-size: 0.98rem;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.2s ease;
}

/* 기본 액션 — 네이비 (근간 톤) */
.sim-btn-primary {
	flex: 1;
	background: #0f172a;
	color: #fff;
}

.sim-btn-primary:hover {
	background: #1e293b;
}

.sim-btn-primary:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.sim-btn-secondary {
	background: #f1f5f9;
	color: #334155;
}

.sim-btn-secondary:hover {
	background: #e2e8f0;
}

/* 최종 CTA — 오렌지 (사용처 ⑤, 유일하게 강한 색으로 눌러야 할 지점) */
.sim-btn-accent {
	flex: 1;
	background: linear-gradient(135deg, #FFB703 0%, #FB8500 100%);
	color: #ffffff;
	box-shadow: 0 8px 18px rgba(251, 133, 0, 0.3);
}

.sim-btn-accent:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(251, 133, 0, 0.38);
}

.sim-summary {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin: 12px 0 18px;
}

.sim-summary-card {
	background: #F6F8FB;
	border: 1px solid #E6EAF1;
	border-radius: 14px;
	padding: 14px 12px;
	text-align: center;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sim-summary-card .k {
	display: block;
	font-size: 0.78rem;
	color: #64748b;
	margin-bottom: 6px;
}

.sim-summary-card .v {
	display: block;
	font-size: 1.05rem;
	font-weight: 800;
	color: #0f172a;
	letter-spacing: -0.02em;
}

/* 결과 4개 카드 중 가장 중요한 3번째("최단 기간")만 오렌지 (사용처 ④) */
.sim-summary-card:nth-child(3) {
	background: linear-gradient(145deg, #FB8500 0%, #FFB703 100%);
	border-color: transparent;
	box-shadow: 0 10px 24px rgba(251, 133, 0, 0.3);
	transform: translateY(-4px);
}

.sim-summary-card:nth-child(3) .k,
.sim-summary-card:nth-child(3) .v {
	color: #ffffff;
}

.sim-result-note {
	margin: 0 0 16px;
	padding: 12px 14px;
	border-radius: 10px;
	background: #F1F4F9;
	color: #1e293b;
	font-size: 0.88rem;
	line-height: 1.45;
	border-left: 3px solid #0f172a;
}

/* 소제목 왼쪽 오렌지 포인트 바 (사용처 ③) */
.sim-section-title {
	position: relative;
	margin: 20px 0 10px;
	padding-left: 12px;
	font-size: 1rem;
	font-weight: 800;
	color: #0f172a;
}

.sim-section-title::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 4px;
	height: 14px;
	border-radius: 2px;
	background: linear-gradient(180deg, #FFB703, #FB8500);
}

.sim-subject-list,
.sim-tip-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	overflow: hidden;
}

.sim-subject-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-bottom: 1px solid #eef2f7;
	font-size: 0.92rem;
	color: #334155;
}

.sim-subject-list li:last-child {
	border-bottom: 0;
}

.sim-badge {
	flex-shrink: 0;
	min-width: 46px;
	text-align: center;
	padding: 3px 8px;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	background: #e2e8f0;
	color: #334155;
}

.sim-badge.is-required {
	background: #dbeafe;
	color: #1d4ed8;
}

.sim-badge.is-offline {
	background: #fce7f3;
	color: #be185d;
}

.sim-badge.is-practice {
	background: #dcfce7;
	color: #15803d;
}

.sim-badge.is-elective {
	background: #f1f5f9;
	color: #64748b;
}

.sim-plan-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
}

.sim-plan-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 14px;
	border-radius: 10px;
	border: 1px solid #e2e8f0;
	background: #fff;
	font-size: 0.9rem;
	transition: border-color 0.2s ease;
}

.sim-plan-item:hover {
	border-color: #94a3b8;
}

.sim-plan-item strong {
	color: #0f172a;
}

.sim-plan-item span {
	color: #475569;
	font-weight: 700;
}

.sim-tip-list {
	padding: 8px 0;
	border: 0;
	background: transparent;
}

.sim-tip-list li {
	position: relative;
	padding: 6px 0 6px 16px;
	font-size: 0.88rem;
	color: #475569;
	line-height: 1.45;
}

.sim-tip-list li::before {
	content: '•';
	position: absolute;
	left: 2px;
	color: #FB8500;
	font-weight: 900;
}

.sim-disclaimer {
	margin: 16px 0 0;
	font-size: 0.78rem;
	color: #94a3b8;
	line-height: 1.5;
}

@media (max-width: 720px) {
	.c-popup--course-sim .c-popup__dialog {
		width: calc(100% - 16px);
		max-height: 92vh;
		border-radius: 16px;
	}

	.c-popup--course-sim .c-popup__header {
		height: 118px;
		flex: 0 0 118px;
		padding: 0 16px 0 18px;
	}

	.c-popup--course-sim .c-popup__body {
		padding-left: 16px;
		padding-right: 16px;
	}

	.sim-summary {
		grid-template-columns: repeat(2, 1fr);
	}

	.sim-summary-card:nth-child(3) {
		grid-column: span 2;
		transform: none;
	}

	.sim-plan-list {
		grid-template-columns: 1fr;
	}

	.sim-actions {
		flex-direction: column;
	}

	.sim-radio {
		width: 100%;
	}
}

.sim-radio input,
.sim-chip input {
	accent-color: #0f172a;
}