﻿@charset "utf-8";
/* ══════════════════════════════════════════════
   기업 도입 문의 (Enterprise.aspx)
   색상은 common.css 토큰 사용. amber 계열만 여기서 추가로 정의한다.
   ══════════════════════════════════════════════ */

:root {
	--amber: #B4740A;
	--amber-light: #FDF6E7;
	--amber-border: #F0DCB0;
}

@media (prefers-color-scheme: dark) {
	:root {
		--amber: #E0A63C;
		--amber-light: #2A2010;
		--amber-border: #4A3A18;
	}
}

.ent-wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px }
.ent-page { padding: 60px 0 80px }

.ent-title {
	font-size: 34px; font-weight: 900; letter-spacing: -1px;
	line-height: 1.25; color: var(--text)
}

.ent-sub { font-size: 15px; color: var(--text-4); margin-top: 12px; line-height: 1.7 }

.cols {
	display: grid; grid-template-columns: 1fr 1.25fr;
	gap: 24px; align-items: start; margin-top: 40px
}

/* ── 요금 카드 ── */
.side {
	background: var(--surface); border: 1px solid var(--border-md);
	border-radius: 16px; padding: 26px 24px; position: sticky; top: 84px
}

.side-label {
	font-size: 11px; font-weight: 700; color: var(--text-6);
	letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px
}

.side-price { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap }
.side-amount { font-size: 30px; font-weight: 900; letter-spacing: -1.2px; color: var(--text) }
.side-unit { font-size: 13px; font-weight: 600; color: var(--text-5) }
.side-note { font-size: 12.5px; color: var(--text-6); margin-top: 3px }

.side-list {
	display: flex; flex-direction: column; gap: 9px;
	margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border)
}

.sl { display: flex; gap: 9px; font-size: 13.5px; color: var(--text-3); line-height: 1.55 }
.sl svg { flex: none; width: 15px; height: 15px; margin-top: 3px }
.sl b { color: var(--text); font-weight: 700 }

/* ── 폼 ── */
.form-card {
	background: var(--surface); border: 1px solid var(--border-md);
	border-radius: 16px; padding: 30px 28px
}

.form-title { font-size: 17px; font-weight: 800; color: var(--text); margin-bottom: 4px }
.form-desc { font-size: 13px; color: var(--text-5); margin-bottom: 24px }

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.ent-field { margin-bottom: 16px }

.ent-fl {
	display: block; font-size: 13px; font-weight: 600;
	color: var(--text-3); margin-bottom: 7px
}

	.ent-fl .req { color: var(--red) }
	.ent-fl .opt { font-weight: 400; color: var(--text-6) }

/* 폼 컨트롤은 이 페이지 안으로만 한정한다(전역 input 규칙을 만들면 다른 화면이 깨진다) */
.form-card input[type=text],
.form-card input[type=email],
.form-card input[type=tel],
.form-card input[type=number],
.form-card select,
.form-card textarea {
	width: 100%; padding: 12px 14px;
	border: 1.5px solid var(--border-md); border-radius: 10px;
	font-family: 'Noto Sans KR',sans-serif; font-size: 14px; color: var(--text);
	background: var(--surface-2); outline: none; transition: border-color .15s
}

	.form-card input:focus,
	.form-card select:focus,
	.form-card textarea:focus { border-color: var(--red) }

	.form-card input::placeholder,
	.form-card textarea::placeholder { color: var(--text-6) }

.form-card input[type=number] { appearance: textfield; -moz-appearance: textfield }

	.form-card input[type=number]::-webkit-outer-spin-button,
	.form-card input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 }

.form-card select {
	cursor: pointer; appearance: none;
	background-image: linear-gradient(45deg,transparent 50%,var(--text-5) 50%),linear-gradient(135deg,var(--text-5) 50%,transparent 50%);
	background-position: calc(100% - 18px) 20px, calc(100% - 13px) 20px;
	background-size: 5px 5px; background-repeat: no-repeat
}

.form-card textarea { resize: vertical; line-height: 1.7 }

.ent-err { font-size: 12px; color: var(--red); margin-top: 6px; display: none }
.ent-err.show { display: block }
.form-card .bad { border-color: var(--red) }

/* 인원 분기 안내 */
.seat-note {
	display: none; gap: 11px; align-items: flex-start; margin-top: 10px;
	background: var(--amber-light); border: 1px solid var(--amber-border);
	border-radius: 11px; padding: 14px 16px
}

	.seat-note.show { display: flex }
	.seat-note svg { flex: none; width: 17px; height: 17px; color: var(--amber); margin-top: 2px }

.seat-note-t { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.55 }
.seat-note-d { font-size: 12.5px; color: var(--text-4); margin-top: 5px; line-height: 1.75 }
	.seat-note-d a { color: var(--red); font-weight: 700; text-decoration: underline }

/* 동의 */
.agree {
	display: flex; gap: 10px; align-items: flex-start; margin: 22px 0 6px;
	font-size: 13px; color: var(--text-3); line-height: 1.65
}

	.agree input { width: auto; flex: none; margin-top: 3px; accent-color: var(--red); cursor: pointer }
	.agree a { color: var(--text-2); text-decoration: underline }

.agree-purpose { font-size: 11.5px; color: var(--text-6); line-height: 1.7; margin: 8px 0 0 26px }

.btn-submit {
	width: 100%; margin-top: 20px; padding: 15px; border: none; border-radius: 12px;
	font-family: 'Noto Sans KR',sans-serif; font-size: 15px; font-weight: 700;
	background: var(--red); color: #fff; cursor: pointer; transition: background .15s
}

	.btn-submit:hover { background: var(--red-hover) }

/* ── 접수 완료 ── */
.done {
	display: none; background: var(--surface); border: 1px solid var(--border-md);
	border-radius: 16px; padding: 44px 32px; text-align: center;
	max-width: 520px; margin: 40px auto 0
}

	.done.show { display: block }

.done-ic {
	width: 56px; height: 56px; border-radius: 50%;
	background: var(--green-light); color: var(--green);
	display: flex; align-items: center; justify-content: center; margin: 0 auto 18px
}

.done-t { font-size: 21px; font-weight: 900; color: var(--text); letter-spacing: -.5px; margin-bottom: 8px }
.done-d { font-size: 14px; color: var(--text-4); line-height: 1.8; margin-bottom: 22px }

.done-no {
	background: var(--surface-2); border: 1px solid var(--border);
	border-radius: 11px; padding: 14px 16px; margin-bottom: 22px
}

.done-no-l {
	font-size: 11px; font-weight: 700; color: var(--text-6);
	letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px
}

.done-no-v {
	font-size: 16px; font-weight: 800; color: var(--text);
	letter-spacing: .02em; font-variant-numeric: tabular-nums
}

.done-sum { text-align: left; border-top: 1px solid var(--border); padding-top: 18px; margin-bottom: 22px }
.done-sum-row { display: flex; justify-content: space-between; gap: 14px; font-size: 13px; padding: 5px 0 }
	.done-sum-row span:first-child { color: var(--text-5); flex: none }
	.done-sum-row span:last-child { color: var(--text-2); font-weight: 600; text-align: right }

@media (max-width:840px) {
	.cols { grid-template-columns: 1fr }
	.side { position: static }
}

@media (max-width:680px) {
	.ent-title { font-size: 26px }
	.ent-page { padding: 44px 0 60px }
	.form-card { padding: 24px 20px }
	.ent-wrap { padding: 0 18px }
}

@media (max-width:560px) {
	.row2 { grid-template-columns: 1fr }
}
