@charset "utf-8";
/* =====================================================
   문의&견적 — customer/css/estimate.css
   ===================================================== */

/* ── 연락처 요약 ── */
.ctQuick { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:14px; }
.ctQuick .card { padding:20px 13px 18px; border:0; border-radius:10px; background:linear-gradient(180deg, #fafbfc 0%, #eceff3 100%); box-shadow:none; text-align:center; }
.ctQuick .card:hover { background:linear-gradient(180deg, #f5f8fd 0%, #e4eaf3 100%); }
.ctQuick .ico { display:flex; align-items:center; justify-content:center; margin-bottom:10px; }
.ctQuick .ico svg { width:30px; height:30px; fill:none; stroke:var(--c_base1); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.ctQuick .lb { display:block; margin-bottom:8px; color:var(--c_ink); font-size:var(--fs14); font-weight:800; letter-spacing:.04em; }
.ctQuick strong { display:block; color:var(--c_base1); font-size:var(--fs14); font-weight:800; letter-spacing:-.02em; line-height:1.5; word-break:break-all; }

/* ── 안내 문구 ── */
.estLead { margin-bottom:16px; color:var(--c_ink); font-size:var(--fs16); font-weight:800; line-height:1.5; letter-spacing:-.02em; text-align:center; }

/* ── 폼 카드 ── */
.estForm { padding:20px 16px; border-radius:12px; background:#f5f6f7; }
.estFormIn { display:block; }

/* ── 폼 섹션 ── */
.fmSec + .fmSec { margin-top:24px; padding-top:24px; border-top:1px solid var(--c_line); }
.fmSec-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:12px; }
.fmSec-tit { color:var(--c_ink); font-size:var(--fs18); font-weight:700; letter-spacing:-.02em; line-height:1.4; }
.fmSec-req { flex:0 0 auto; color:var(--c_base1); font-size:var(--fs14); font-weight:700; }

/* ── 접수 유형 선택 (문의 / 견적요청 / AS접수) ── */
.fmType { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.fmType-item { position:relative; display:block; cursor:pointer; }
.fmType-item input { position:absolute; width:1px; height:1px; opacity:0; }
.fmType-in {
	display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
	height:100%; padding:14px 6px 12px;
	border:1px solid var(--c_line); border-radius:10px; background:#fff;
	text-align:center; transition:border-color .2s, background-color .2s, box-shadow .2s;
}
.fmType-in svg { width:26px; height:26px; margin-bottom:4px; fill:none; stroke:#8b99ab; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; transition:stroke .2s; }
.fmType-in strong { color:var(--c_ink); font-size:var(--fs15); font-weight:800; letter-spacing:-.02em; line-height:1.4; }
.fmType-in small { color:var(--c_muted); font-size:var(--fs12); line-height:1.4; letter-spacing:-.03em; word-break:keep-all; }
.fmType-item:hover .fmType-in { border-color:#b9c6d6; }
.fmType-item input:checked + .fmType-in { border-color:var(--c_base1); background:#f2f6fc; box-shadow:inset 0 0 0 1px var(--c_base1); }
.fmType-item input:checked + .fmType-in svg { stroke:var(--c_base1); }
.fmType-item input:checked + .fmType-in strong { color:var(--c_base1); }
.fmType-item input:focus-visible + .fmType-in { box-shadow:0 0 0 3px rgba(27,84,178,.18); }

/* 유형별 상세 입력 영역 — fieldset 기본 스타일 제거 */
.fmPanel { min-width:0; margin:0; padding:0; border:0; }
.fmPanel[hidden] { display:none; }

/* ── 입력 필드 ── */
.fmGrid { display:grid; grid-template-columns:1fr; gap:20px; }
.fmField label { display:block; margin-bottom:7px; color:var(--c_ink); font-size:var(--fs16); font-weight:700; letter-spacing:-.02em; }
.fmField label em { color:var(--c_base1); font-weight:700; font-style:normal; }
.fmField input,
.fmField select,
.fmField textarea {
	width:100%; height:48px; padding:0 14px;
	border:1px solid var(--c_line); border-radius:8px; background:#fff;
	color:var(--c_ink); font-size:var(--fs14); outline:none;
}
.fmField textarea { height:130px; padding:13px 14px; line-height:1.6; resize:vertical; }
.fmField input::placeholder,
.fmField textarea::placeholder { color:#a7b4c3; }
.fmField input:focus,
.fmField select:focus,
.fmField textarea:focus { border-color:var(--c_base1); box-shadow:0 0 0 3px rgba(27,84,178,.10); }

/* 셀렉트 — 기본 화살표 제거 + 인라인 SVG 셰브론 */
.fmField select {
	-webkit-appearance:none; -moz-appearance:none; appearance:none;
	padding-right:40px; cursor:pointer;
	background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%3E%3Cpath%20d='M4%206.25%208%2010.25%2012%206.25'%20fill='none'%20stroke='%238b99ab'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat:no-repeat; background-position:right 14px center; background-size:16px 16px;
}
.fmField select::-ms-expand { display:none; }
.fmField select:focus {
	background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%3E%3Cpath%20d='M4%206.25%208%2010.25%2012%206.25'%20fill='none'%20stroke='%231b54b2'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}
.fmField select:invalid { color:#a7b4c3; }
.fmField select:has(option[value=""]:checked) { color:#a7b4c3; }
.fmField select option { color:var(--c_ink); }

/* ── 개인정보 동의 박스 ── */
.agBox { padding:16px 15px; border:1px solid var(--c_line); border-radius:8px; background:#fff; }
.agLead { color:var(--c_muted); font-size:var(--fs14); line-height:1.7; }
.agDl { margin-top:13px; }
.agDl dt { color:var(--c_ink); font-size:var(--fs14); font-weight:800; letter-spacing:-.02em; }
.agDl dd { margin-top:4px; color:var(--c_muted); font-size:var(--fs14); line-height:1.7; }
.agDl dt ~ dt { margin-top:11px; }

/* ── 개인정보처리방침 전문 (스크롤 박스) ──
   본문 마크업은 /include/privacy.html 공용, 기본 스타일은 privacy.css.
   여기서는 폼 안에 들어갈 만큼 조판만 줄인다.
   .agPolicy 를 앞에 붙여 privacy.css 보다 명시도를 한 단계 올려 덮어쓴다. */
.agPolicy {
	max-height:130px; margin-top:14px; padding:15px 14px;
	border:1px solid var(--c_line); border-radius:8px; background:#fafbfc;
	overflow-y:auto; -webkit-overflow-scrolling:touch;
	overscroll-behavior:contain;   /* 끝까지 내려도 페이지가 함께 밀리지 않도록 */
}
.agPolicy:focus-visible { outline:2px solid var(--c_base1); outline-offset:2px; }
.agPolicy::-webkit-scrollbar { width:6px; }
.agPolicy::-webkit-scrollbar-track { border-radius:3px; background:#eceff3; }
.agPolicy::-webkit-scrollbar-thumb { border-radius:3px; background:#c3ceda; }
.agPolicy::-webkit-scrollbar-thumb:hover { background:#a8b6c6; }

.agPolicy .pvWrap { gap:16px; }
.agPolicy .pvIntro { padding:12px 12px; font-size:var(--fs13); line-height:1.7; }
.agPolicy .pvArt { gap:8px; }
.agPolicy .pvTit { padding-bottom:8px; font-size:var(--fs15); }
.agPolicy .pvTit .no { padding:3px 7px; font-size:var(--fs12); }
.agPolicy .pvBody { font-size:var(--fs13); line-height:1.7; }
.agPolicy .pvBody .pvList,
.agPolicy .pvBody .pvSub { margin-top:9px; }
.agPolicy .pvBody .pvList .mk { min-width:19px; font-size:var(--fs18); line-height:calc(var(--fs13) * 1.7); }
.agPolicy .pvBody .pvSub { padding:11px 12px; }
.agPolicy .pvBody .pvSub p,
.agPolicy .pvBody .pvSub .mk { font-size:var(--fs12); line-height:calc(var(--fs12) * 1.7); }
.agPolicy .pvBody .pvSub p { line-height:1.7; }
.agPolicy .pvOfficer { margin-top:11px; padding:13px 13px 12px; box-shadow:none; }
.agPolicy .pvOfficer .ot { margin-bottom:9px; padding-bottom:8px; font-size:var(--fs14); }
.agPolicy .pvOfficer .oc .lb { flex:0 0 48px; font-size:var(--fs12); }
.agPolicy .pvOfficer .oc .vl { font-size:var(--fs13); }

/* 전문 새 창 링크 */
.fmSec-link {
	flex:0 0 auto; position:relative; padding-right:13px;
	color:var(--c_base2); font-size:var(--fs14); font-weight:700; white-space:nowrap;
}
.fmSec-link:after {
	content:""; position:absolute; right:1px; top:50%;
	width:7px; height:7px; border-top:1.6px solid currentColor; border-right:1.6px solid currentColor;
	transform:translateY(-50%) rotate(45deg);
}
.fmSec-link:hover { color:var(--c_base1); text-decoration:underline; text-underline-offset:3px; }

/* 더 보기 (details/summary — 스크립트 없이 토글)
   summary 자체에 display:flex 를 주면 일부 브라우저(Safari 등)에서 토글이
   동작하지 않으므로, summary 는 block 으로 두고 내부 span 을 flex 로 정렬한다.
   flex-direction:column-reverse 로 펼쳐진 내용이 버튼 위로 열려
   ‘더 보기’ 줄은 항상 박스 맨 아래에 고정된다. */
.agMore { display:flex; flex-direction:column-reverse; margin-top:15px; }
.agMore-btn {
	display:block; padding:12px 0 2px; margin-top:0;
	border-top:1px solid var(--c_line);
	list-style:none; cursor:pointer;
}
.agMore-btn::-webkit-details-marker { display:none; }
.agMore-btn::marker { content:""; }
.agMore-in {
	display:flex; align-items:center; justify-content:center; gap:5px;
	color:var(--c_base2); font-size:var(--fs14); font-weight:700; line-height:1.4;
}
.agMore-btn:hover .agMore-in { color:var(--c_base1); }
.agMore-in .tx-on { display:none; }
.agMore[open] .agMore-in .tx-off { display:none; }
.agMore[open] .agMore-in .tx-on { display:inline; }
.agMore-in .ico-chev { flex:0 0 auto; width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform .25s; margin-bottom:4px;}
.agMore[open] .agMore-in .ico-chev { transform:rotate(180deg); }
.agMore .agDl { margin:0 0 15px; }

/* 펼침 애니메이션 — ::details-content 를 max-height + opacity 로 전환.
   닫힘 상태의 content-visibility:hidden 은 이산(discrete) 속성이라
   allow-discrete 로 전환 끝까지 렌더를 유지시켜야 접힘도 부드럽게 보인다.
   height:auto 대신 max-height 를 쓰는 이유는 interpolate-size 미지원
   브라우저에서도 동일하게 동작시키기 위함. */
.agMore::details-content {
	max-height:0; min-height:0; overflow:hidden; opacity:0;
	transition:max-height .35s cubic-bezier(.4, 0, .2, 1),
	           opacity .25s ease,
	           content-visibility .35s allow-discrete;
}
.agMore[open]::details-content { max-height:600px; opacity:1; transition-duration:.4s, .3s, .4s; }

@media (prefers-reduced-motion: reduce) {
	.agMore::details-content,
	.agMore[open]::details-content { transition:none; }
	.agMore-in .ico-chev { transition:none; }
}

/* ── 동의 체크 ── */
/* 라벨 + 체크를 한 줄에 양끝 정렬. 좁아지면 wrap 되어 체크가 아래로 내려간다. */
.agChk { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px; margin-top:12px; }
.agChk-lb { flex:1 1 240px; color:var(--c_muted); font-size:var(--fs16); line-height:1.6; }
.agChk-lb em { color:var(--c_base2); font-weight:600; font-style:normal;}
.agChk .chk { flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; cursor:pointer; }
.agChk .chk input { position:absolute; width:1px; height:1px; opacity:0; }
.agChk .chk-box { display:flex; align-items:center; justify-content:center; width:20px; height:20px; border:1px solid #c3ceda; border-radius:4px; background:#fff; transition:all .2s; }
.agChk .chk-box svg { width:12px; height:12px; fill:none; stroke:#fff; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; opacity:0; transition:opacity .2s; }
.agChk .chk input:checked + .chk-box { border-color:var(--c_base1); background:var(--c_base1); }
.agChk .chk input:checked + .chk-box svg { opacity:1; }
.agChk .chk input:focus-visible + .chk-box { box-shadow:0 0 0 3px rgba(27,84,178,.18); }
.agChk .chk-tx { color:var(--c_ink); font-size:var(--fs14); font-weight:700; text-decoration:underline; text-underline-offset:3px; }

/* ── 제출 액션 (폼 카드 바깥) ── */
.estActs { margin-top:16px; }
.estActs .btn { width:100%; }
.estNote { margin-top:12px; color:#93a5b8; font-size:var(--fs14); line-height:1.6; }

/* ── 좁은 화면 ── */
@media screen and (max-width: 360px) {
	.ctQuick { grid-template-columns:1fr; }
}

/* ── 태블릿 이상 (600px~) ── */
@media screen and (min-width: 600px) {
	.ctQuick { gap:12px; margin-bottom:18px; }
	.ctQuick .card { padding:26px 16px 24px; border-radius:12px; }
	.ctQuick .ico { margin-bottom:12px; }
	.ctQuick .ico svg { width:34px; height:34px; }
	.ctQuick .lb { font-size:var(--fs16); }
	.ctQuick strong { font-size:var(--fs16); }

	.estLead { margin-bottom:22px; font-size:var(--fs20); }

	.estForm { padding:32px 28px; border-radius:14px; }

	.fmType { gap:12px; }
	.fmType-in { gap:4px; padding:20px 10px 18px; border-radius:12px; }
	.fmType-in svg { width:30px; height:30px; margin-bottom:6px; }
	.fmType-in strong { font-size:var(--fs17); }
	.fmType-in small { font-size:var(--fs13); }

	.fmSec + .fmSec { margin-top:32px; padding-top:32px; }
	.fmSec-head { margin-bottom:16px; }
	.fmSec-tit { font-size:var(--fs18); }

	.fmGrid { grid-template-columns:1fr 1fr; gap:20px 14px; }
	.fmField.full { grid-column:1 / -1; }
	.fmField input, .fmField select, .fmField textarea { height:52px; }
	.fmField textarea { height:160px; }

	.agBox { padding:22px 20px; }
	.agChk { margin-top:14px; }

	.estActs { margin-top:22px; }
	.estNote { margin-top:14px; }
}