@charset "utf-8";
/* ============================================================
   estimate-add.css — 온라인 견적문의에 덧붙인 것
   ============================================================
   제작분야의 「유지보수」 하위 여덟 가지와, 전시·행사 견적으로 가는 단추.
   estimate.css 는 그대로 두고 여기서만 더한다.                          */

/* ── 전시/행사/컨퍼런스 견적 바로가기 ──────────────────────
   제작분야 체크 줄의 **오른쪽 끝**에 붙는다. 칸이 좁아지면 다음 줄로 내려간다. */
.es-exlink {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
	padding: 9px 18px;
	border-radius: 300px;
	background: linear-gradient(to left, #ed35a4, #6136d9);
	color: #fff;
	font-size: clamp(12px, 1.05vw, 14px);
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
	transition: transform .25s ease, box-shadow .25s ease;
}
.es-exlink:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(97, 54, 217, .28);
}
.es-exlink svg { flex: none; }
@media (max-width: 900px) {
	.es-exlink { margin-left: 0; width: 100%; justify-content: center; }
}

/* ── 유지보수 하위 여덟 가지 ──────────────────────────────
   한 줄에 하나씩 쌓고, 갈래 동그라미는 그 줄 안쪽으로 들여 놓는다. */
.es-subrow__list--stack {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.es-mt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
/* 이름표와 「?」 는 언제나 한 줄에 붙어 다닌다 */
.es-mt__head { display: flex; align-items: center; gap: 8px; }
.es-mt__opts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	padding: 8px 16px;
	border-radius: 8px;
	background: rgba(97, 54, 217, .06);
}
.es-mt__opts[hidden] { display: none; }
/* 갈래는 본 항목보다 한 단 작게 */
.es-mt__opts .es-check { font-size: clamp(12px, 1.05vw, 14px); }

@media (max-width: 640px) {
	.es-mt { flex-direction: column; align-items: flex-start; gap: 6px; }
	.es-mt__opts { width: 100%; }
}

/* 하위 목록 아래 붙는 한 줄 안내 (홈페이지 — 웹표준화·웹호환성) */
.es-subrow__note {
	grid-column: 2;
	margin: 8px 0 0;
	font-size: clamp(11px, .95vw, 13px);
	font-weight: 500;
	line-height: 1.6;
	color: #6136d9;
}
.es-subrow__note::before { content: "※ "; }
@media (max-width: 900px) {
	.es-subrow__note { grid-column: 1; }
}

/* ── 「?」 아이콘 ────────────────────────────────────────── */
.es-qbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	align-self: center;          /* 줄 한가운데 — 글자 밑으로 처지지 않게 */
	margin: 0;                   /* estimate.css 의 .es-help 여백을 물려받지 않는다 */
	position: relative;
	top: -1px;                   /* 한글 글자 중심에 맞춘 눈높이 보정 */
	width: 22px;
	height: 22px;
	padding: 0;
	border: 1px solid #b3a0ff;
	border-radius: 50%;
	background: #fff;
	color: #6136d9;
	font-size: 13px;
	font-weight: 800;
	line-height: 1;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, transform .2s ease;
}
.es-qbtn:hover { background: #6136d9; border-color: #6136d9; color: #fff; transform: scale(1.1); }
.es-qbtn:focus-visible { outline: 2px solid #6136d9; outline-offset: 2px; }

/* ── 「?」 레이어 ────────────────────────────────────────── */
.es-help-lay[hidden] { display: none; }
.es-help-lay {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.es-help-lay__dim {
	position: absolute;
	inset: 0;
	background: rgba(16, 14, 38, .55);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}
.es-help-lay__box {
	position: relative;
	width: min(1180px, 100%);
	max-height: calc(100vh - 40px);
	padding: 34px 36px 30px;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 30px 70px rgba(16, 14, 38, .35);
	overflow: auto;
	overscroll-behavior: contain;
	animation: esHelpIn .28s cubic-bezier(.2, .8, .25, 1);
}
@keyframes esHelpIn {
	from { opacity: 0; transform: translateY(14px) scale(.985); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .es-help-lay__box { animation: none; } }
.es-help-lay__x {
	position: absolute;
	right: 14px;
	top: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #f4f4fd;
	color: #3b3760;
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}
.es-help-lay__x:hover { background: #e4e2f8; transform: rotate(90deg); }
.es-help-lay__x svg { width: 18px; height: 18px; }
.es-help__title {
	margin: 0 0 6px;
	font-size: clamp(17px, 1.6vw, 22px);
	font-weight: 800;
	color: #111;
}
.es-help__load, .es-help__err { margin: 40px 0; text-align: center; color: #6b6880; }

/* 레이어 안에서는 유지보수 화면의 제목·여백을 조금 줄인다 */
.es-help-lay__body .mt-h2 { margin: 0; font-size: clamp(17px, 1.6vw, 22px); }
.es-help-lay__body .mt-tbl { margin-top: 14px; }
.es-help-lay__body .mt-notes { margin-top: 16px; }
/* 레이어 안에서는 등장 연출을 쓰지 않는다 (이미 보이는 상태로 들어온다) */
.es-help-lay__body .js-reveal,
.es-help-lay__body .js-split { opacity: 1 !important; transform: none !important; }

@media (max-width: 767px) {
	.es-help-lay { padding: 12px; }
	.es-help-lay__box { padding: 46px 16px 20px; }
}

/* ══════════════════════════════════════════════════════════
   희망 완료일 — 우리 달력 (assets/js/datepick.js)
   ══════════════════════════════════════════════════════════ */

/* 겉상자는 다른 입력칸과 같은 모양. 안에 글자 칸과 달력 단추가 나란히 선다. */
.es-date {
	position: relative;
	display: flex;
	align-items: center;
	gap: 4px;
	width: 100%;
	height: 50px;
	padding: 0 clamp(13px, 2vw, 20px);
	border: 1px solid #e1e1e1;
	border-radius: 4px;
	background: var(--c-white, #fff);
	transition: border-color .2s ease, box-shadow .2s ease;
}
.es-date:focus-within,
.es-date.is-open {
	border-color: #6136d9;
	box-shadow: 0 0 0 3px rgba(97, 54, 217, .14);
}
/* 손으로 지난 날짜를 쳤을 때 — 바로 알아보게 붉게 (datepick.js 가 붙인다) */
.es-date.is-bad,
.es-date.is-bad:focus-within {
	border-color: #e2574c;
	box-shadow: 0 0 0 3px rgba(226, 87, 76, .14);
}
.es-date__warn {
	margin: 6px 0 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
	color: #e2574c;
}
.es-date__warn[hidden] { display: none; }

/* 글자 칸 — 테두리는 겉상자가 갖고 있으므로 없앤다.
   날짜 열 글자가 넉넉히 들어가게 폭을 잡아 둔다(시안보다 넓힘). */
.es-date input[type="text"] {
	flex: 0 1 auto;
	/* 날짜 열 글자에 딱 맞는 폭 — em 이라 글자 크기를 따라 같이 줄고 는다.
	   달력 아이콘이 글자 바로 뒤에 붙게 하려고 넓게 잡지 않는다. */
	width: 6.2em;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: clamp(13px, 1.02vw, 15px);
	font-weight: 500;
	letter-spacing: .02em;
	color: #000;
}
.es-date input[type="text"]:focus,
.es-date input[type="text"]:focus-visible { outline: none; box-shadow: none; }

/* 달력 단추 — 글자 바로 오른쪽에 붙는다 */
.es-date__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: none;
	color: #6136d9;
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}
.es-date__btn svg { width: 24px; height: 24px; }
.es-date__btn:hover { background: rgba(97, 54, 217, .1); }
.es-date__btn:active { transform: scale(.94); }
.es-date__btn:focus-visible { outline: 2px solid #6136d9; outline-offset: 1px; }

/* ── 달력 ─────────────────────────────────────────────── */
.es-cal[hidden] { display: none; }
.es-cal {
	position: absolute;
	z-index: 30;
	top: calc(100% + 8px);
	left: 0;
	width: 300px;
	padding: 14px;
	border: 1px solid #e6e3f7;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 18px 40px rgba(37, 33, 70, .16), 0 3px 10px rgba(37, 33, 70, .06);
	animation: es-cal-in .16s ease both;
}
@keyframes es-cal-in {
	from { opacity: 0; transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) { .es-cal { animation: none; } }

/* 머리 — 이전 달 · 「2026년 9월」 · 다음 달 */
.es-cal__hd {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}
.es-cal__cap { font-size: 15px; font-weight: 800; color: #0a090b; }
.es-cal__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: none;
	color: #6136d9;
	cursor: pointer;
	transition: background .2s ease;
}
.es-cal__nav svg { width: 18px; height: 18px; }
.es-cal__nav:hover { background: rgba(97, 54, 217, .1); }
.es-cal__nav:focus-visible { outline: 2px solid #6136d9; outline-offset: 1px; }

/* 요일 줄 */
.es-cal__wk {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	margin-bottom: 4px;
	font-size: 12px;
	font-weight: 700;
	text-align: center;
	color: #8b88a0;
}
.es-cal__wk .is-sun { color: #e2574c; }
.es-cal__wk .is-sat { color: #3f6bd6; }

/* 날짜 칸 — 여섯 줄 고정이라 달을 넘겨도 높이가 안 흔들린다 */
.es-cal__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
}
.es-cal__d {
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 9px;
	background: none;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	color: #2b2a35;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.es-cal__d.is-sun { color: #e2574c; }
.es-cal__d.is-sat { color: #3f6bd6; }
.es-cal__d.is-out { opacity: .32; }
.es-cal__d:hover:not(:disabled) { background: rgba(97, 54, 217, .1); }
.es-cal__d:disabled { opacity: .26; cursor: default; }
/* 오늘 — 테두리만 */
.es-cal__d.is-today { box-shadow: inset 0 0 0 1.5px #b3a0ff; }
/* 고른 날 — 보라로 채운다 */
.es-cal__d.is-on,
.es-cal__d.is-on.is-sun,
.es-cal__d.is-on.is-sat {
	background: #6136d9;
	color: #fff;
	font-weight: 800;
	box-shadow: none;
}
.es-cal__d:focus-visible { outline: 2px solid #6136d9; outline-offset: -2px; }

/* 바닥 — 오늘 / 지우기 */
.es-cal__ft {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid #f0eefa;
}
.es-cal__today, .es-cal__clear {
	padding: 6px 14px;
	border: 1px solid #e6e3f7;
	border-radius: 999px;
	background: #fff;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	color: #6136d9;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.es-cal__today:hover { background: #6136d9; border-color: #6136d9; color: #fff; }
.es-cal__clear { color: #6b6880; }
.es-cal__clear:hover { background: #f4f4f8; color: #2b2a35; }
.es-cal__today:focus-visible, .es-cal__clear:focus-visible { outline: 2px solid #6136d9; outline-offset: 1px; }

/* 좁은 화면 — 달력이 화면 밖으로 나가지 않게 */
@media (max-width: 400px) {
	.es-cal { width: calc(100vw - 48px); left: 50%; transform: translateX(-50%); }
	.es-date input[type="text"] { width: 100%; }
}