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

/* ===========================================================
   1. HERO
   =========================================================== */
.est-hero {position:relative;}
.est-hero .moto {display:inline-flex; align-items:center; gap:14px; font-size:var(--fs14); font-weight:700; color:var(--c_base3); letter-spacing:0.3em; text-transform:uppercase; margin-bottom:18px;}
.est-hero .moto::before {content:''; width:48px; height:1px; background:var(--c_base3);}
.est-hero h2 {font-size:var(--fs56); font-weight:800; color:#222; line-height:1.2; letter-spacing:-0.025em;}
.est-hero h2 em {color:var(--c_base3); font-style:normal; position:relative;}
.est-hero h2 em::after {content:''; position:absolute; left:0; right:0; bottom:4px; height:14px; background:rgba(226,14,22,0.14); z-index:-1; border-radius:4px;}
.est-hero .lead {margin-top:28px; font-size:var(--fs17); color:#666; line-height:1.85; max-width:780px;}

.est-hero-stats {display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:50px;}
.est-stat {position:relative; padding:28px 24px; background:#fff; border:1px solid var(--border1); border-radius:16px; transition:all .45s cubic-bezier(0.16,1,0.3,1); overflow:hidden;}
.est-stat::before {content:''; position:absolute; left:0; top:0; height:100%; width:4px; background:linear-gradient(180deg, var(--c_base1), var(--c_base3)); transform:scaleY(0); transform-origin:top; transition:transform .4s;}
.est-stat:hover {transform:translateY(-4px); box-shadow:0 18px 40px rgba(19,67,143,0.14); border-color:var(--c_base2);}
.est-stat:hover::before {transform:scaleY(1);}
.est-stat .icon {display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:12px; background:linear-gradient(135deg, var(--c_base1), var(--c_base2)); color:#fff; margin-bottom:14px;}
.est-stat .icon svg {width:20px; height:20px;}
.est-stat .v {font-size:var(--fs26); font-weight:900; color:#222; letter-spacing:-0.02em; line-height:1; display:flex; align-items:baseline; gap:3px;}
.est-stat .v em {color:var(--c_base3); font-style:normal;}
.est-stat .l {margin-top:8px; font-size:var(--fs16); color:#666; font-weight:600;}

/* ===========================================================
   2. PROCESS STEPPER
   =========================================================== */
.est-process {position:relative; margin:60px 0 50px; padding:36px 36px 32px; background:linear-gradient(135deg, #fafbfc 0%, #eef2f7 100%); border:1px solid var(--border1); border-radius:20px;}
.est-process-head {display:flex; justify-content:space-between; align-items:center; margin-bottom:26px; flex-wrap:wrap; gap:10px;}
.est-process-head h4 {font-size:var(--fs18); font-weight:800; color:var(--c_base1); letter-spacing:-0.01em;}
.est-process-head .sub {font-size:var(--fs13); color:#888;}

.est-steps {position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}
.est-steps::before {content:''; position:absolute; left:40px; right:40px; top:45px; height:2px; background:repeating-linear-gradient(to right, var(--border1) 0 8px, transparent 8px 14px); z-index:0;}
.est-step {position:relative; padding:18px 16px; text-align:center; z-index:1;}
.est-step .n {position:relative; display:inline-flex; align-items:center; justify-content:center; width:60px; height:60px; border-radius:50%; background:#fff; border:2px solid var(--border1); color:var(--c_base1); font-size:var(--fs18); font-weight:900; transition:all .4s; box-shadow:0 4px 12px rgba(0,0,0,0.04);}
.est-step .n::after {content:''; position:absolute; inset:-6px; border-radius:50%; border:2px dashed transparent; transition:border-color .4s;}
.est-step:hover .n {transform:scale(1.08); border-color:var(--c_base2);}
.est-step.highlight .n {background:linear-gradient(135deg, var(--c_base1), var(--c_base3)); border-color:transparent; color:#fff; box-shadow:0 10px 24px rgba(226,14,22,0.32);}
.est-step.highlight .n::after {border-color:rgba(226,14,22,0.32); animation:estPulse 2s ease infinite;}
@keyframes estPulse {0%{transform:scale(1); opacity:0.6;} 100%{transform:scale(1.18); opacity:0;}}
.est-step .lbl {margin-top:14px; font-size:var(--fs14); font-weight:700; color:var(--c_base1);}
.est-step .desc {margin-top:4px; font-size:var(--fs12); color:#888; line-height:1.5;}

/* ===========================================================
   3. 2-COL LAYOUT
   =========================================================== */
.est-layout {display:grid; grid-template-columns:1fr 360px; gap:32px; align-items:flex-start;}
.est-main {min-width:0;}
.est-aside {position:sticky; top:120px; display:flex; flex-direction:column; gap:18px;}

/* ===========================================================
   4. FORM PROGRESS BAR
   =========================================================== */
.est-progress-wrap {position:relative; margin-bottom:24px; padding:18px 22px; background:#fff; border:1px solid var(--border1); border-radius:14px; box-shadow:0 4px 14px rgba(19,67,143,0.04);}
.est-progress-head {display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;}
.est-progress-head .t {font-size:var(--fs13); font-weight:700; color:var(--c_base1); letter-spacing:-0.01em;}
.est-progress-head .pct {font-size:var(--fs15); font-weight:900; color:var(--c_base3);}
.est-progress-bar {position:relative; height:8px; background:var(--bg1); border-radius:50px; overflow:hidden;}
.est-progress-fill {position:absolute; left:0; top:0; bottom:0; width:0%; background:linear-gradient(90deg, var(--c_base1), var(--c_base3)); border-radius:50px; transition:width .55s cubic-bezier(0.16,1,0.3,1);}
.est-progress-fill::after {content:''; position:absolute; right:-2px; top:50%; transform:translateY(-50%); width:14px; height:14px; border-radius:50%; background:#fff; border:3px solid var(--c_base3); box-shadow:0 2px 8px rgba(226,14,22,0.32);}

/* ===========================================================
   5. FORM CONTAINER + BLOCKS
   =========================================================== */
.estimate-form {position:relative; background:#fff; border:1px solid var(--border1); border-radius:22px; padding:46px 44px; box-shadow:0 8px 32px rgba(19,67,143,0.05);}

.est-block {padding:32px 0; border-bottom:1px dashed var(--border1); position:relative;}
.est-block:first-of-type {padding-top:8px;}
.est-block:last-of-type {border-bottom:none; padding-bottom:10px;}

.est-block-head {display:flex; align-items:flex-start; gap:14px; margin-bottom:22px;}
.est-block-head .badge {position:relative; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:12px; background:linear-gradient(135deg, var(--c_base1), var(--c_base2)); color:#fff; font-size:var(--fs14); font-weight:900; letter-spacing:-0.02em; box-shadow:0 6px 16px rgba(19,67,143,0.22);}
.est-block.is-done .est-block-head .badge {background:linear-gradient(135deg, var(--c_base2), #5fc4e6);}
.est-block.is-done .est-block-head .badge::after {content:''; position:absolute; top:-3px; right:-3px; width:16px; height:16px; border-radius:50%; background:var(--c_base3); border:2px solid #fff;}
.est-block-head .tit-area .tit {font-size:var(--fs22); font-weight:800; color:#000; letter-spacing:-0.02em; line-height:1.3;}
.est-block-head .tit-area .sub {font-size:var(--fs14); color:#888;}

/* ===========================================================
   6. SERVICE CATEGORY CARDS (RADIO)
   =========================================================== */
.est-radio-grid {display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}
.est-radio {position:relative; cursor:pointer; padding:24px 18px; background:#fff; border:1.5px solid var(--border1); border-radius:14px; text-align:center; transition:all .35s cubic-bezier(0.16,1,0.3,1); overflow:hidden;}
.est-radio::before {content:''; position:absolute; inset:0; background:linear-gradient(135deg, var(--c_base1), var(--c_base2)); opacity:0; transition:opacity .35s;}
.est-radio > * {position:relative; z-index:1;}
.est-radio input {position:absolute; opacity:0; pointer-events:none;}
.est-radio .icon {display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:14px; background:var(--bg1); color:var(--c_base1); margin-bottom:14px; transition:all .35s;}
.est-radio .icon svg {width:26px; height:26px;}
.est-radio .t {display:block; font-size:var(--fs14); font-weight:700; color:var(--c_base1); letter-spacing:-0.01em;}
.est-radio .d {margin-top:4px; font-size:var(--fs12); color:#888;}
.est-radio:hover {transform:translateY(-3px); box-shadow:0 14px 30px rgba(19,67,143,0.1); border-color:var(--c_base2);}
.est-radio:hover .icon {background:rgba(19,67,143,0.08);}
.est-radio:has(input:checked) {border-color:transparent; transform:translateY(-3px); box-shadow:0 18px 38px rgba(19,67,143,0.28);}
.est-radio:has(input:checked)::before {opacity:1;}
.est-radio:has(input:checked) .icon {background:rgba(255,255,255,0.18); color:#fff;}
.est-radio:has(input:checked) .t {color:#fff;}
.est-radio:has(input:checked) .d {color:rgba(255,255,255,0.78);}
.est-radio .check {position:absolute; top:10px; right:10px; width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,0.2); display:none; align-items:center; justify-content:center; color:#fff;}
.est-radio:has(input:checked) .check {display:inline-flex;}
.est-radio .check svg {width:12px; height:12px; fill:#fff;}

/* ===========================================================
   7. FORM FIELDS
   =========================================================== */
.est-row {display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:14px;}
.est-row.full {grid-template-columns:1fr;}
.est-field {position:relative;}
.est-field label {display:block; font-size:var(--fs16); font-weight:700; color:var(--c_base1); margin-bottom:8px; letter-spacing:-0.01em;}
.est-field label .req {color:var(--c_base3); margin-left:3px; font-weight:800;}
.est-field input[type="text"], .est-field input[type="tel"], .est-field input[type="email"], .est-field select, .est-field textarea {width:100%; padding:14px 18px; border:1.5px solid var(--border1); border-radius:11px; font-size:var(--fs15); color:#333; background:#fff; font-family:inherit; transition:all .25s;}
.est-field input:focus, .est-field select:focus, .est-field textarea:focus {outline:none; border-color:var(--c_base1); box-shadow:0 0 0 4px rgba(19,67,143,0.08);}
.est-field input::placeholder, .est-field textarea::placeholder {color:#aaa;}
.est-field textarea {min-height:130px; resize:vertical; line-height:1.7;}
.est-field.is-filled input, .est-field.is-filled select, .est-field.is-filled textarea {border-color:var(--c_base2); background:#fafcff;}

.est-field-icon {position:relative;}
.est-field-icon input {padding-left:46px !important;}
.est-field-icon svg {position:absolute; left:16px; top:50%; transform:translateY(-50%); width:18px; height:18px; fill:var(--c_base2); pointer-events:none;}
.est-field-icon label + svg {top:calc(50% + 14px);}

/* select with custom arrow */
/* .est-field select {appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7'><path d='M1 1l5 5 5-5' stroke='%2313438f' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>"); background-repeat:no-repeat; background-position:right 18px center; padding-right:42px;} */

/* ===========================================================
   8. BUDGET CHIP SELECTOR
   =========================================================== */
.est-budget {display:flex; flex-wrap:wrap; gap:10px;}
.est-budget label {position:relative; padding:12px 22px; border:1.5px solid var(--border1); border-radius:50px; background:#fff; font-size:var(--fs14); font-weight:600; color:#666; cursor:pointer; transition:all .3s; user-select:none;}
.est-budget label input {position:absolute; opacity:0; pointer-events:none;}
.est-budget label:hover {border-color:var(--c_base2); color:var(--c_base1);}
.est-budget label:has(input:checked) {background:linear-gradient(135deg, var(--c_base1), var(--c_base2)); color:#fff; border-color:transparent; box-shadow:0 8px 20px rgba(19,67,143,0.25); transform:translateY(-2px);}

/* ===========================================================
   11. FILE DRAG-DROP UPLOAD
   =========================================================== */
.est-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;}
.est-drop:hover, .est-drop.is-over {border-color:var(--c_base1); background:linear-gradient(135deg, #f0f6ff 0%, #e7eef8 100%);}
.est-drop input[type="file"] {position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%;}
.est-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);}
.est-drop .ico svg {width:26px; height:26px; fill:var(--c_base1);}
.est-drop .t {font-size:var(--fs14); font-weight:700; color:var(--c_base1);}
.est-drop .d {margin-top:4px; font-size:var(--fs12); color:#888;}
.est-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;}
.est-drop.has-file .selected {display:inline-block;}

/* ===========================================================
   12. AGREEMENT + SUBMIT
   =========================================================== */
.est-agree {display:flex; gap:12px; align-items:flex-start; padding:20px 22px; background:var(--bg1); border:1px solid var(--border1); border-radius:12px; margin-top:30px;}
.est-agree input[type="checkbox"] {appearance:none; -webkit-appearance:none; flex-shrink:0; width:22px; height:22px; border:1.5px solid var(--border1); border-radius:6px; background:#fff; cursor:pointer; position:relative; transition:all .25s;}
.est-agree input[type="checkbox"]:checked {background:var(--c_base1); border-color:var(--c_base1);}
.est-agree input[type="checkbox"]:checked::after {content:''; position:absolute; left:7px; top:3px; width:5px; height:10px; border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(45deg);}
.est-agree label {font-size:var(--fs14); color:#555; line-height:1.65; cursor:pointer; margin:0;}
.est-agree label a {color:var(--c_base1); font-weight:600; text-decoration:underline !important;}

.est-submit {margin-top:28px; display:flex; flex-direction:column; align-items:center; gap:14px;}
.est-submit .btn-main {position:relative; display:inline-flex; align-items:center; gap:12px; padding:20px 60px; border:none; border-radius:50px; background:linear-gradient(135deg, var(--c_base1) 0%, var(--c_base3) 130%); color:#fff; font-size:var(--fs16); font-weight:800; cursor:pointer; transition:all .4s; box-shadow:0 14px 32px rgba(19,67,143,0.32); letter-spacing:-0.01em; font-family:inherit; overflow:hidden;}
.est-submit .btn-main::before {content:''; position:absolute; inset:0; background:linear-gradient(135deg, var(--c_base3) 0%, var(--c_base1) 130%); opacity:0; transition:opacity .35s;}
.est-submit .btn-main > * {position:relative; z-index:1;}
.est-submit .btn-main:hover {transform:translateY(-3px); box-shadow:0 22px 44px rgba(226,14,22,0.32);}
.est-submit .btn-main:hover::before {opacity:1;}
.est-submit .btn-main .arrow {display:inline-block; width:22px; height:1.5px; background:currentColor; position:relative; transition:width .35s;}
.est-submit .btn-main .arrow::after {content:''; position:absolute; right:-1px; top:-3.5px; width:8px; height:8px; border-top:1.5px solid currentColor; border-right:1.5px solid currentColor; transform:rotate(45deg);}
.est-submit .btn-main:hover .arrow {width:30px;}
.est-submit .form-note {font-size:var(--fs15); color:#888; text-align:center; line-height:1.7;}
.est-submit .form-note strong {color:var(--c_base3);}

/* ===========================================================
   13. SIDEBAR CARDS
   =========================================================== */
.est-card {background:#fff; border:1px solid var(--border1); border-radius:18px; padding:26px 24px; transition:all .35s;}
.est-card:hover {box-shadow:0 12px 32px rgba(19,67,143,0.08);}
.est-card-head {display:flex; align-items:center; gap:10px; margin-bottom:18px; padding-bottom:14px; border-bottom:1px dashed var(--border1);}
.est-card-head .ico {flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg, var(--c_base1), var(--c_base2)); color:#fff;}
.est-card-head .ico svg {width:18px; height:18px;}
.est-card-head h4 {font-size:var(--fs16); font-weight:800; color:var(--c_base1); letter-spacing:-0.01em;}

/* Quick Contact */
.est-contact-list {display:flex; flex-direction:column; gap:8px;}
.est-contact-list a {display:flex; align-items:center; gap:14px; padding:14px 16px; background:var(--bg1); border-radius:11px; transition:all .3s; cursor:pointer;}
.est-contact-list a:hover {background:rgba(19,67,143,0.08); transform:translateX(4px);}
.est-contact-list a .i {flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:10px; background:#fff; color:var(--c_base1); transition:all .3s;}
.est-contact-list a:hover .i {background:var(--c_base1); color:#fff;}
.est-contact-list a .i svg {width:18px; height:18px; fill:currentColor;}
.est-contact-list a .txt {flex:1; min-width:0;}
.est-contact-list a .t {font-size:var(--fs12); color:#888; font-weight:600;}
.est-contact-list a .v {margin-top:2px; font-size:var(--fs15); color:var(--c_base1); font-weight:800; letter-spacing:-0.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* Why ATE */
.est-why-list {display:flex; flex-direction:column; gap:12px;}
.est-why-list li {display:flex; align-items:flex-start; gap:10px; font-size:var(--fs14); color:#444; line-height:1.6;}
.est-why-list li::before {content:''; flex-shrink:0; width:18px; height:18px; border-radius:50%; background:linear-gradient(135deg, var(--c_base1), var(--c_base2)); position:relative; margin-top:3px; box-shadow:0 0 0 4px rgba(19,67,143,0.06);}
.est-why-list li .h {color:var(--c_base1); font-weight:800;}

/* Timeline */
.est-time {position:relative; padding-left:22px;}
.est-time::before {content:''; position:absolute; left:6px; top:8px; bottom:8px; width:2px; background:linear-gradient(180deg, var(--c_base1), var(--c_base3));}
.est-time-item {position:relative; padding-bottom:18px;}
.est-time-item:last-child {padding-bottom:0;}
.est-time-item::before {content:''; position:absolute; left:-22px; top:5px; width:14px; height:14px; border-radius:50%; background:#fff; border:3px solid var(--c_base1);}
.est-time-item:last-child::before {border-color:var(--c_base3); background:var(--c_base3);}
.est-time-item .t {font-size:var(--fs13); font-weight:800; color:var(--c_base1); letter-spacing:-0.01em;}
.est-time-item .d {margin-top:3px; font-size:var(--fs12); color:#888; line-height:1.6;}

/* ===========================================================
   14. FAQ
   =========================================================== */
.est-faq-section {margin-top:80px;}
.est-faq-head {text-align:center; margin-bottom:36px;}
.est-faq-head .label {display:inline-flex; align-items:center; gap:10px; font-size:var(--fs13); font-weight:700; color:var(--c_base3); letter-spacing:0.2em; text-transform:uppercase;}
.est-faq-head .label::before, .est-faq-head .label::after {content:''; width:32px; height:1px; background:var(--c_base3);}
.est-faq-head h3 {font-size:var(--fs32); font-weight:800; color:#222; letter-spacing:-0.02em;}
.est-faq-head p {margin-top:10px; font-size:var(--fs15); color:#666;}

.est-faq-list {display:flex; flex-direction:column; gap:12px;}
.est-faq-item {background:#fff; border:1.5px solid var(--border1); border-radius:14px; overflow:hidden; transition:all .35s;}
.est-faq-item.is-open {border-color:var(--c_base1); box-shadow:0 16px 36px rgba(19,67,143,0.1);}
.est-faq-q {display:flex; align-items:center; gap:14px; padding:24px 40px; cursor:pointer; user-select:none; transition:all .3s;}
.est-faq-q:hover {background:rgba(19,67,143,0.02);}
.est-faq-q .q-tag {flex-shrink:0; width:34px; height:34px; border-radius:10px; background:#999; color:#fff; display:flex; align-items:center; justify-content:center; font-size:var(--fs15); font-weight:900;}

.est-faq-q .q-t {flex:1; font-size:var(--fs20); font-weight:700; color:#222; letter-spacing:-0.01em;}
.est-faq-q .q-toggle {flex-shrink:0; width:32px; height:32px; border-radius:50%; background:var(--bg1); color:var(--c_base1); display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:600; transition:all .35s;}
.est-faq-item.is-open .q-toggle {background:var(--c_base3); color:#fff; transform:rotate(45deg);}
.est-faq-a {max-height:0; overflow:hidden; transition:max-height .5s cubic-bezier(0.16,1,0.3,1);}
.est-faq-item.is-open .est-faq-a {max-height:400px;}
.est-faq-a-inner {padding:24px 40px; font-size:var(--fs16); color:#555; line-height:1.85; border-top:1px solid var(--border1);}
.est-faq-a-inner strong {color:var(--c_base1);}

.est-faq-item.is-open .est-faq-q .q-t {color:var(--c_base1);}
.est-faq-item.is-open .est-faq-q .q-tag {background:linear-gradient(135deg, var(--c_base1), var(--c_base2));}

/* ===========================================================
   15. RESPONSIVE
   =========================================================== */
@media screen and (max-width:1199px) {
	.est-hero {}
	.est-hero h2 {font-size:var(--fs40);}
	.est-hero-stats {grid-template-columns:repeat(2,1fr);}
	.est-process {padding:28px 22px 24px;}
	.est-steps {grid-template-columns:repeat(2,1fr); gap:18px;}
	.est-steps::before {display:none;}
	.est-layout {grid-template-columns:1fr; gap:24px;}
	.est-aside {position:relative; top:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
	.estimate-form {padding:36px 30px;}
	.est-radio-grid {grid-template-columns:repeat(2,1fr);}
	.est-row {grid-template-columns:1fr;}
	.est-faq-head h3 {font-size:var(--fs26);}
}
@media screen and (max-width:767px) {
	.est-hero h2 {font-size:var(--fs28);}
	.est-hero-stats {grid-template-columns:1fr 1fr;}
	.est-aside {grid-template-columns:1fr;}
	.estimate-form {padding:30px 22px;}
	.est-block-head .tit-area .tit {font-size:var(--fs18);}
	.est-radio-grid {grid-template-columns:1fr;}
	.est-submit .btn-main {padding:16px 38px; font-size:var(--fs15); width:100%; justify-content:center;}
	.est-faq-head h3 {font-size:var(--fs22);}
	.est-faq-q {padding:18px 18px;}
	.est-faq-q .q-t {font-size:var(--fs14);}
	.est-faq-a-inner {padding:0 18px 20px 18px; font-size:var(--fs13);}
}