/* ══════════════════════════════════════════════════════════════════
   견적 상담 팝업 스타일 (전 페이지 공통)

   quote.js 가 넣는 팝업의 모양입니다.
   예전에는 index.html 안 <style> 에만 있어서 다른 페이지에서는
   팝업을 띄워도 모양이 깨졌습니다. 그래서 파일로 옮겼습니다.

   어떤 규칙을 담았나
   - quote.js 의 팝업 HTML에 실제로 쓰인 class·id 만 골랐습니다.
     .modal 계열뿐 아니라 .fld · .fgrid · .agree · .sub-btn · .done 처럼
     팝업 안쪽에서만 쓰는 이름도 모두 들어 있습니다.
   - .done{display:none} 이 여기 있어야 성공 문구가 제출 전에 보이지 않습니다.
   - .done-in 이 쓰는 @keyframes popUp 도 함께 담았습니다.

   색 변수(--coral 등)는 press.css 의 :root 를 그대로 씁니다.
   이 파일은 press.css 다음에 읽혀야 합니다.
   ══════════════════════════════════════════════════════════════════ */

.chip{
  display:inline-block;background:var(--coral-soft);color:var(--coral);
  font-size:14px;font-weight:700;padding:8px 18px;border-radius:12px;
}

.chip-new{background:var(--coral);color:#fff}

.chip-row{display:flex;gap:10px;align-items:center;margin-bottom:22px;flex-wrap:wrap}

.burger.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}

.burger.on span:nth-child(2){opacity:0}

.burger.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.m-menu.on{display:block}

.m-menu a,.m-menu button{display:block;width:100%;text-align:left;padding:17px 28px;font-size:17px;
  font-weight:600;border:0;border-bottom:1px solid var(--gray-line);background:none;
  font-family:inherit;color:var(--ink);cursor:pointer;letter-spacing:-.02em}

.hero-stage .sl.on{opacity:1;animation:kb 9s ease-out forwards}

.solution{
  background:linear-gradient(180deg,#FF9E90 0%,#FFB3A7 22%,#FFC7BD 52%,#FFDDD6 78%,#FFEFEB 100%);
  padding:110px 0 130px;position:relative;
}

.solution > .wrap > .head{text-align:center;margin-bottom:56px}

.solution .head h2{color:var(--ink)}

.bc-media.ms img.on{opacity:1}

.big-card:hover .bc-media.ms img.on{transform:scale(1.05)}

.ms-dots i.on{background:#fff;width:16px;border-radius:999px}

.modal{
  position:fixed;inset:0;z-index:1000;display:none;
  align-items:center;justify-content:center;padding:24px;
}

.modal.on{display:flex}

.modal-back{
  position:absolute;inset:0;background:rgba(43,41,41,.55);backdrop-filter:blur(6px);
  animation:fadeIn .3s ease;
}

.modal-box{
  position:relative;z-index:2;background:#fff;border-radius:32px;
  width:100%;max-width:720px;
  height:auto;max-height:88vh;
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 30px 90px rgba(43,41,41,.3);
  animation:popUp .38s cubic-bezier(.22,1,.36,1);
}

@keyframes popUp{from{opacity:0;transform:translateY(30px) scale(.97)}to{opacity:1;transform:none}}

.modal-head{
  flex:0 0 auto;padding:32px 40px 22px;
  background:linear-gradient(135deg,#FFF2F2,#FFE8E3);position:relative;
}

.modal-head h3{font-size:25px;letter-spacing:-.04em;margin-bottom:7px;padding-right:44px}

.modal-head p{font-size:15px;color:var(--ink-2);font-weight:500;padding-right:44px}

.modal-close{
  position:absolute;top:22px;right:24px;width:38px;height:38px;border:none;
  background:rgba(255,255,255,.85);border-radius:50%;font-size:18px;color:var(--ink);
  cursor:pointer;transition:.22s;line-height:1;
}

.modal-close:hover{background:#fff;transform:rotate(90deg)}

#qForm{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow:hidden}

.modal-body{
  flex:1 1 auto;min-height:0;overflow-y:auto;
  padding:28px 40px;
  overscroll-behavior:contain;
}

.modal-body::-webkit-scrollbar{width:8px}

.modal-body::-webkit-scrollbar-thumb{background:#DFE4E8;border-radius:8px}

.modal-body::-webkit-scrollbar-track{background:transparent}

.modal-foot{
  flex:0 0 auto;background:#fff;padding:18px 40px 24px;
  border-top:1px solid var(--gray-line);
  box-shadow:0 -8px 20px rgba(43,41,41,.05);
}

.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}

.fld{display:flex;flex-direction:column;min-width:0}

.fld.full{grid-column:1/-1}

.fld label{font-size:14.5px;font-weight:700;margin-bottom:9px;color:var(--ink)}

.fld label em{color:var(--coral);font-style:normal;margin-left:3px}

.fld input,.fld select,.fld textarea{
  font-family:inherit;font-size:15.5px;color:var(--ink);
  padding:14px 16px;border:1.5px solid #E8EBED;border-radius:14px;
  background:#FAFBFC;transition:.2s;width:100%;
}

.fld textarea{resize:vertical;min-height:96px;line-height:1.65}

.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:none;border-color:var(--coral);background:#fff;box-shadow:0 0 0 4px rgba(255,69,71,.1);
}

.fld input::placeholder,.fld textarea::placeholder{color:#B9C0C5}

.fld .hint{font-size:13px;color:var(--gray);margin-top:7px}

.chips{display:flex;flex-wrap:wrap;gap:9px}

.chips input{position:absolute;opacity:0;width:0;height:0}

.chips label{
  display:inline-block;padding:10px 17px;border-radius:var(--r-pill);
  border:1.5px solid #E8EBED;background:#FAFBFC;font-size:14.5px;font-weight:600;
  color:var(--ink-2);cursor:pointer;transition:.2s;margin:0;
}

.chips label:hover{border-color:var(--coral-2);color:var(--coral)}

.chips input:checked + label{background:var(--coral);border-color:var(--coral);color:#fff}

.chips input:focus-visible + label{box-shadow:0 0 0 4px rgba(255,69,71,.18)}

.agree{display:flex;gap:11px;align-items:flex-start}

.agree input{width:20px;height:20px;accent-color:var(--coral);margin-top:2px;flex-shrink:0;cursor:pointer}

.agree label{font-size:14.5px;color:var(--ink-2);font-weight:500;line-height:1.6;cursor:pointer;margin:0}

.agree label em{color:var(--coral);font-style:normal}

.sub-btn{
  display:block;width:100%;background:var(--ink);color:#fff;border:none;border-radius:16px;
  padding:19px;font-family:inherit;font-size:17px;font-weight:700;cursor:pointer;transition:.25s;
}

.sub-btn:hover:not(:disabled){background:#000;transform:translateY(-2px);box-shadow:0 12px 30px rgba(43,41,41,.26)}

.sub-btn:disabled{opacity:.6;cursor:wait;transform:none}

.foot-note{text-align:center;font-size:13px;color:var(--gray);margin-top:12px;line-height:1.6}

.done{display:none;text-align:center}

.done.on{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow:hidden}

.done-in{padding:34px 0 12px;animation:popUp .4s cubic-bezier(.22,1,.36,1)}

.done .ic{
  width:84px;height:84px;border-radius:50%;background:var(--coral-soft);
  display:grid;place-items:center;font-size:40px;margin:0 auto 24px;
}

.done h4{font-size:23px;margin-bottom:12px}

.done .msg{font-size:16px;color:var(--ink-2);line-height:1.75;font-weight:500;margin-bottom:26px}

.done-sum{
  background:#FAFBFC;border-radius:18px;padding:22px 24px;text-align:left;
  font-size:14.5px;line-height:1.9;color:var(--ink-2);
}

.done-sum b{color:var(--ink);font-weight:700;display:inline-block;min-width:88px}

.done-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

.done-btns a,.done-btns button{
  font-family:inherit;font-size:15.5px;font-weight:700;padding:16px 26px;
  border-radius:var(--r-pill);border:none;cursor:pointer;transition:.25s;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:1;
}

.done-btns .b1{background:var(--coral);color:#fff}

.done-btns .b1:hover{background:#E03A3C;transform:translateY(-2px)}

.done-btns .b2{background:#F1F3F5;color:var(--ink)}

.done-btns .b2:hover{background:#E5E9EC}

@media(max-width:680px){
  .modal{padding:0;align-items:flex-end}
  .modal-box{max-width:none;max-height:92vh;border-radius:26px 26px 0 0}
  .modal-head{padding:26px 22px 18px}
  .modal-head h3{font-size:21px}
  .modal-body{padding:22px}
  .modal-foot{padding:16px 22px calc(20px + env(safe-area-inset-bottom))}
  .fgrid{grid-template-columns:1fr}
  .sub-btn{padding:18px;font-size:16.5px}
}

@media(max-height:640px){
  .modal-box{max-height:96vh}
  .modal-head{padding:20px 32px 14px}
  .modal-head p{display:none}
}

.rv.on{opacity:1;transform:none}

@media(max-width:680px){
  .pain,.solution,.curri,.field,.reviews,.final{padding-top:76px;padding-bottom:80px}
}

@media(prefers-reduced-motion:reduce){
  .hero-stage .sl.on{animation:none}
}