@charset "utf-8";
/* 문의하기 — customer/css/contact.css */

.contact-row {display:grid; grid-template-columns:380px 1fr; gap:40px; align-items:start;}

.contact-left {position:relative; padding:50px 40px; background:linear-gradient(160deg, var(--c_base3) 0%, var(--c_base1) 100%); color:#fff; border-radius:24px; overflow:hidden; box-shadow:0 30px 60px rgba(11,46,74,0.25);}
.contact-left::before {content:''; position:absolute; right:-100px; top:-100px; width:300px; height:300px; border-radius:50%; background:radial-gradient(circle, rgba(91,194,231,0.25) 0%, transparent 70%);}
.contact-left::after {content:''; position:absolute; left:-50px; bottom:-50px; width:200px; height:200px; border-radius:50%; background:radial-gradient(circle, rgba(43,168,74,0.2) 0%, transparent 70%);}
.contact-bg {position:absolute; right:0; bottom:0; width:60%; height:200px; background-size:cover; background-position:center; opacity:0.15; mix-blend-mode:overlay;}

.contact-block {position:relative; z-index:2; padding-bottom:24px; margin-bottom:24px; border-bottom:1px solid rgba(255,255,255,0.15);}
.contact-block:last-of-type {border-bottom:none;}
.contact-block .lbl {font-size:var(--fs12); font-weight:700; color:#fff; letter-spacing:0.2em; text-transform:uppercase;}
.contact-block .val {margin-top:8px; font-size:var(--fs22); font-weight:800; color:#fff; letter-spacing:-0.01em;}
.contact-block .val.small {font-size:var(--fs15); font-weight:500; line-height:1.6;}

.contact-quick {position:relative; z-index:2; margin-top:14px;}

.contact-form {padding:50px 50px; background:#fff; border:1px solid var(--border1); border-radius:24px;}

.radio-group {display:flex; gap:18px; flex-wrap:wrap; margin-top:6px;}
.radio-item {display:flex; align-items:center; gap:8px; font-size:var(--fs15); color:#555; cursor:pointer; padding:10px 18px; background:var(--bg1); border-radius:50px; transition:all .25s;}
.radio-item input[type=radio] {accent-color:var(--c_base1);}
.radio-item:has(input:checked) {background:var(--c_base1); color:#fff;}

/* ===== 첨부파일 Drag & Drop ===== */
.ct-drop {position:relative; padding:28px 22px; background:linear-gradient(135deg, #fafbfc 0%, #f0f4f9 100%); border:2px dashed var(--border1); border-radius:14px; text-align:center; cursor:pointer; transition:all .3s;}
.ct-drop:hover, .ct-drop.is-over {border-color:var(--c_base1); background:linear-gradient(135deg, #f0f6ff 0%, #e7eef8 100%);}
.ct-drop input[type="file"] {position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%;}
.ct-drop .ico {display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:14px; background:#fff; color:var(--c_base1); margin-bottom:10px; box-shadow:0 4px 12px rgba(19,67,143,0.08);}
.ct-drop .ico svg {width:26px; height:26px; fill:var(--c_base1);}
.ct-drop .t {font-size:var(--fs14); font-weight:700; color:var(--c_base1);}
.ct-drop .d {margin-top:4px; font-size:var(--fs12); color:#888;}
.ct-drop .selected {margin-top:12px; padding:10px 16px; background:#fff; border-radius:10px; font-size:var(--fs13); color:var(--c_base3); font-weight:600; display:none;}
.ct-drop.has-file .selected {display:inline-block;}

@media screen and (max-width:1199px) {
	.contact-row {grid-template-columns:1fr;}
	.contact-form {padding:36px 30px;}
}
@media screen and (max-width:767px) {
	.contact-left {padding:36px 28px;}
	.contact-form {padding:30px 22px;}
	.contact-block .val {font-size:var(--fs18);}
}