@charset "utf-8";
/* ============================================================
 *  consult.css — 하단 고정 상담 막대 (#consultBar)
 *  consult_bar.php에서 신청 버튼을 입력 필드 묶음 밖의 독립 항목으로 둔다.
 *
 *  요소는 순서가 아니라 내용으로 잡는다(:has). 마크업이 바뀌어도 안 깨짐.
 *    div:has(.cb-f)          = 입력 필드 묶음
 *    .cb-submit              = 독립된 신청 버튼
 *    div:has(#cbAgreePrivacy)= 동의 체크 + 자세히보기 + 약관박스
 *
 *  ★ 실제 마크업의 Bootstrap 클래스 때문에 !important 가 필요한 지점
 *    - 동의행 .position-relative  → position:relative !important
 *    - 필드행 .col-12 .col-lg-8   → width 66.6%
 *    - .d-flex / .m-0 / .w-100    → display / margin / width !important
 *
 *  ※ setting.css / Bootstrap 유틸이 없거나(u-gap-22, u-px-26, u-round-14 …)
 *    display 유틸이 !important 라서(.d-flex) 원본 규칙이 지던 문제를
 *    여기서 전부 덮어쓴다.
 * ============================================================ */

:root{
  --cb-bg:      #012D70;   /* 막대 배경 — 어두운 밴드 */
  /* 베스트플란트 실측 팔레트 (스크린샷 픽셀 추출)
     로고/포인트 오렌지 #f96125, 네비 포인트 #ff7e4d, 헤더 CTA 블루 #2a6cd0 */
  --cb-btn:     #FF7E4D;   /* 신청 버튼 — 파랑으로 쓰려면 #2a6cd0 */
  --cb-btn-2:   #e0530f;   /* hover/active 딥 (파랑이면 #1f57ad) */
  --cb-btn-txt: #ffffff;
  --cb-accent:  #ff7e4d;   /* 타이틀 강조 */
  --cb-txt:     #ffffff;
  --cb-txt-dim: #c3cad6;
  --cb-h:       92px;      /* 데스크탑 막대 높이 */
  --cb-pad:     92px;      /* 본문 하단 확보 여백 (= 막대 높이, 폭별로 아래에서 재정의) */
  --cb-btnw:    100px;     /* 신청 버튼 폭 — 이 폭만큼 막대 오른쪽을 비워둔다 */
  --cb-agreew:  150px;     /* 동의 영역이 차지할 폭 */
  --cb-gap:     26px;      /* 동의 ↔ 버튼 간격 */
  --cb-max:     1680px;    /* 내용 최대 폭 — 이 폭 안으로 들어와 가운데 정렬 */
  --cb-fw:      350px;     /* 입력 한 칸 최대 폭 (좁아지면 자동으로 줄어듦) */
}

/* 막대에 콘텐츠가 가리지 않도록 본문 하단 여백 확보 */
body:has(.consult-bar){
  padding-bottom: var(--cb-pad);
  /* 막대가 내려갈 때 같은 타이밍으로 여백도 같이 접힘 (빈 공간 방지) */
  transition: padding-bottom .55s cubic-bezier(.5,0,.75,0) 2.8s;
}
body:has(.cb-done.show){ padding-bottom: 0; }

/* ── 막대 본체 ───────────────────────────────────────────── */
.consult-bar{
  position: fixed; left:0; right:0; bottom:0;
  width:100%; z-index:9999;
  display:flex; align-items:center;
  min-height: var(--cb-h);
  /* 오른쪽 패딩 = 버튼폭 + 여백. 버튼이 이 자리에 절대배치되므로 내용과 안 겹침 */
  padding: 0 calc(var(--cb-btnw) + 24px) 0 clamp(16px, 3vw, 60px) !important;
  background: var(--cb-bg) !important;               /* u-bg-gray-100 무효화 */
  border-radius: 0 !important;                       /* u-round-14 무효화 */
  box-shadow: 0 -6px 24px rgba(0,0,0,.18);
  color: var(--cb-txt);
}
.consult-bar, .consult-bar *{ box-sizing:border-box; }

/* 모바일 전용 상담창 접기 손잡이 — 상태/애니메이션이라 별도 CSS 사용 */
.consult-bar .cb-mobile-toggle{
  display:none !important;
  border:0;
  background:var(--cb-bg);
  color:var(--cb-txt) !important;
  cursor:pointer;
}

.consult-bar #consultBarForm{
  /* position:relative 를 두면 버튼/동의영역의 절대배치 기준이 폼이 되어
     폼 안쪽(패딩 안)에 갇힌다. 기준은 항상 .consult-bar 여야 한다 */
  position: static;
  display:flex; align-items:center; gap:14px;
  width:100%; max-width: var(--cb-max); margin:0 auto;
  min-height: var(--cb-h);
  padding-right: var(--cb-agreew);   /* 고정된 동의영역 자리 */
}

/* ── 타이틀 (한 줄, 좌측 고정) ───────────────────────────── */
.consult-bar .cb-title{
  flex:0 0 auto; margin:0 !important;
  white-space:nowrap;
  font-size:22px; font-weight:800; letter-spacing:-.02em;
  color: var(--cb-txt) !important;
}
.consult-bar .cb-title strong{ color: var(--cb-accent) !important; }

/* ── 입력 필드 행 ────────────────────────────────────────── */
/* 남는 폭을 다 먹지 않게: 늘어나지 않고(0), 좁아지면 줄어들기만(1) */
.consult-bar #consultBarForm > div:has(.cb-f){
  /* ★ 마크업에 col-12 col-lg-8 이 붙어 폭이 66.6%로 잡힌다 → 무력화 */
  /* width:auto !important; */
  flex:0 1 auto !important; min-width:0; 
  margin:0 auto !important;        /* 좌우 남는 폭 균등 → 막대 가운데 */
  display:flex !important; align-items:center;
  flex-wrap: nowrap !important;
  gap:10px;
}
/* 필드 폭은 --cb-fw 상한까지만. 좁아지면 균등하게 줄어듦 */
.consult-bar .cb-f{
  flex:1 1 auto; min-width:0; margin:0 !important;
  width: var(--cb-fw); max-width: var(--cb-fw);
}

.consult-bar .cb-input{
  width:100%; height:48px;
  padding:0 16px;
  border:1px solid #fff; border-radius:8px;
  background:#fff; color:#222;
  font-size:15px; font-family:inherit;
  transition: box-shadow .15s, border-color .15s;
}
.consult-bar .cb-input::placeholder{ color:#9aa0ad; }
.consult-bar .cb-input:focus{
  outline:none;
  border-color: var(--cb-btn);
  box-shadow: 0 0 0 3px rgba(253,125,76,.30);
}

/* select 화살표 */
.consult-bar .cb-sel{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  padding-right:34px;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%232c2c2c' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") no-repeat right 14px center;
}
.consult-bar .cb-sel:invalid{ color:#9aa0ad; }

/* ── 신청 버튼 (우측 끝 풀하이트 블록) ───────────────────── */
.consult-bar .cb-submit{
  /* .consult-bar 기준 절대배치. #consultBarForm 이 static 이어야 이게 성립한다 */
  position:absolute; right:0; top:0; bottom:0;
  height:auto; width: var(--cb-btnw); z-index:2;
  padding:0 10px !important;
  border:0; border-radius:0 !important;
  background: var(--cb-btn) !important;
  color: var(--cb-btn-txt) !important;
  font-size:21px; font-weight:800; white-space:nowrap; cursor:pointer;
  overflow:hidden; isolation:isolate;
  transition: background-color .18s;
}
/* 글자 뒤에 화살표 — hover 시 살짝 나옴 */
.consult-bar .cb-submit::after{
  content:"→";
  display:inline-block; margin-left:8px;
  transform: translateX(-4px); opacity:.55;
  transition: transform .22s ease, opacity .22s ease;
}
.consult-bar .cb-submit:hover{ background: var(--cb-btn-2) !important; filter:none; }
.consult-bar .cb-submit:hover::after{ transform: translateX(2px); opacity:1; }
.consult-bar .cb-submit:active{ filter:brightness(.94); }
.consult-bar .cb-submit:disabled{ filter:grayscale(.45) brightness(.9); cursor:default; }
.consult-bar .cb-submit:disabled::after{ display:none; }

/* 색이 번쩍이는 대신 — 빛이 한 번 훑고 지나가는 셰인 (6초에 한 번, 아주 옅게) */
.consult-bar .cb-submit::before{
  content:""; position:absolute; inset:-40% -60%;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.30) 42%, rgba(255,255,255,.85) 50%, rgba(255,255,255,.30) 58%, transparent 70%);
  transform: translateX(-130%);
  animation: cbSheen 3.6s ease-in-out infinite;
  pointer-events:none; z-index:-1;
}
@keyframes cbSheen{
  0%, 52%   { transform: translateX(-130%); }
  76%, 100% { transform: translateX(130%); }
}
.consult-bar .cb-submit:hover::before{ animation-duration:1.6s; }
.consult-bar .cb-submit:disabled::before{ animation:none; opacity:0; }
@media (prefers-reduced-motion: reduce){
  .consult-bar .cb-submit::before{ animation:none; }
  .consult-bar .cb-submit::after{ transition:none; }
}

/* ── 동의 행 ─────────────────────────────────────────────── */
.consult-bar #consultBarForm > div:has(#cbAgreePrivacy){
  /* ★ 마크업에 Bootstrap .position-relative(=position:relative !important) 가 붙어 있어서
     !important 없이는 절대 이긴다. 이것 때문에 동의행이 계속 인풋 옆에 남아 있었다 */
  position:absolute !important;
  right: calc(var(--cb-btnw) + var(--cb-gap)) !important;
  left:auto !important; top:0 !important; bottom:0 !important;
  z-index:2;
  display:flex !important; align-items:center;
  flex-wrap: nowrap !important;
  gap:10px;
  margin:0 !important;
}
.consult-bar #consultBarForm > div:has(#cbAgreePrivacy) > label{
  display:flex; align-items:center; gap:6px;
  margin:0 !important; white-space:nowrap;
  font-size:14px; color: var(--cb-txt-dim) !important; cursor:pointer;
}
/* ★ setting.css 의 .u-check 는 input 전용 규칙(20x20 네모)인데 마크업에선 label 에 붙어 있다.
   그대로 두면 label 이 20px 박스가 되고 체크박스·문구가 밖으로 흘러넘쳐 옆 요소와 겹친다 */
.consult-bar .u-check{
  appearance:none; -webkit-appearance:none;
  width:auto !important; height:auto !important;
  min-width:0 !important; min-height:0 !important;
  border:0 !important; background:transparent !important;
  position:static !important; overflow:visible !important;
  display:flex !important; align-items:center !important;
}

.consult-bar #cbAgreePrivacy{
  appearance:none; -webkit-appearance:none;
  width:21px; height:21px; margin:0; flex:0 0 auto;
  border:2px solid #737d8c; border-radius:6px;
  background:transparent; cursor:pointer;
  transition: background-color .16s, border-color .16s, box-shadow .16s;
}
.consult-bar #cbAgreePrivacy:hover{ border-color:#a6b0bf; }
.consult-bar #cbAgreePrivacy:checked{
  border-color: var(--cb-btn);
  background: var(--cb-btn) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='10' viewBox='0 0 13 10'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M1 5.2l3.4 3.3L12 1.4'/%3E%3C/svg%3E") no-repeat center center;
}
.consult-bar #cbAgreePrivacy:focus-visible{
  outline:none; box-shadow:0 0 0 3px rgba(253,125,76,.35);
}
.consult-bar .cb-agree-toggle{
  background:none; border:0; padding:0; cursor:pointer;
  text-decoration:underline; white-space:nowrap;
  font-size:13px; color:#9aa5b4 !important;
}

/* 약관 팝업 (막대 위로 뜸) */
.consult-bar .cb-agree-box{
  display:none !important;
  position:absolute; right:0; bottom:calc(100% + 12px); z-index:20;
  width:min(360px, 88vw);
  padding:14px 16px !important;
  border:1px solid #e2e6ee !important; border-radius:8px !important;
  background:#fff !important; color:#555 !important;
  font-size:12px; line-height:1.85; text-align:left;
  box-shadow:0 12px 30px rgba(0,0,0,.28);
}
.consult-bar .cb-agree-box.open{ display:block !important; }

/* ── 에러 토스트 (우측 상단, 5초 뒤 자동 소멸) ───────────── */
/* JS가 제출 때마다 textContent='' 로 비우므로 :empty→display:none→다시 표시되면서
   애니메이션이 매번 처음부터 재생된다 */
.consult-bar .cb-msg{
  position:absolute; left:auto;
  right: calc(var(--cb-btnw) + var(--cb-gap));
  bottom: calc(100% + 12px);
  margin:0 !important; min-height:0;
  padding:9px 16px; border-radius:10px;
  background:rgba(18,22,29,.94); color:#ff8a7d;
  border:1px solid rgba(255,138,125,.35);
  box-shadow:0 10px 28px rgba(0,0,0,.35);
  font-size:13.5px; font-weight:600; white-space:nowrap;
  animation: cbToast 5s cubic-bezier(.2,.85,.25,1) forwards;
}
.consult-bar .cb-msg:empty{ display:none; }
@keyframes cbToast{
  0%   { opacity:0; transform:translateY(10px) scale(.96); }
  6%   { opacity:1; transform:none; }
  86%  { opacity:1; transform:none; }
  100% { opacity:0; transform:translateY(6px); visibility:hidden; }
}

/* ── 접수 완료 오버레이 ──────────────────────────────────── */
/* .d-flex 가 display:flex!important 라 원본 display:none 이 지던 부분 */
.consult-bar .cb-done{ display:none !important; }
.consult-bar .cb-done.show{
  display:flex !important; align-items:center; gap:12px;
  justify-content:flex-end;      /* 신청 버튼이 있던 우측 기준 (막대 우측 패딩이 이미 확보됨) */
  padding-right:0;
  width:100%; min-height:var(--cb-h);
  font-size:16px; font-weight:600;
  color: var(--cb-txt) !important;
  animation: cbDoneIn .5s cubic-bezier(.2,.9,.25,1) both;
}
@keyframes cbDoneIn{
  from{ opacity:0; transform:translateX(72px); }
  to  { opacity:1; transform:none; }
}

/* 접수 완료 → 잠깐 보여주고 막대 전체가 아래로 슉 */
.consult-bar:has(.cb-done.show){
  animation: cbBarOut .55s cubic-bezier(.5,0,.75,0) 2.8s forwards;
}
@keyframes cbBarOut{
  from{ transform:translateY(0);    opacity:1; }
  to  { transform:translateY(110%); opacity:.4; visibility:hidden; }
}
@media (prefers-reduced-motion: reduce){
  body:has(.consult-bar){ transition-duration:.01s; }
  .consult-bar:has(.cb-done.show){ animation-duration:.01s; }
  .consult-bar .cb-done.show, .consult-bar .cb-msg{ animation-duration:.01s; }
}
.consult-bar .cb-done-ico{
  flex:0 0 auto; width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--cb-btn) !important; color: var(--cb-btn-txt) !important;
  font-size:17px; font-weight:700;
}

/* ── 태블릿 ──────────────────────────────────────────────── */
@media (max-width: 1700px){ :root{ --cb-fw: 205px; } }
@media (max-width: 1560px){ :root{ --cb-fw: 168px; } .consult-bar .cb-title{ font-size:19px; } }
@media (max-width: 1400px){
  :root{ --cb-fw: 176px; }
  .consult-bar .cb-title{ display:none; }   /* 타이틀 빼고 필드 폭 확보 */
}

/* ── 1240px 이하 : 한 줄로는 안 들어감 → 2단 컴팩트 ───────── */
@media (max-width: 1240px){
  :root{ --cb-pad: 148px; }
  :root{ --cb-fw: 100%; --cb-btnw: 190px; }

  .consult-bar{
    min-height:0; display:block;
    padding: 14px clamp(12px,2vw,24px) 16px !important;
  }
  .consult-bar #consultBarForm{
    display:flex !important; flex-wrap:wrap; align-items:center;
    max-width:none; margin:0; min-height:0; gap:10px;
    padding-right:0 !important;
  }
  /* 1행 : 입력 4개 */
  .consult-bar #consultBarForm > div:has(.cb-f){
    flex:1 1 100%; margin:0 !important; gap:8px;
  }
  .consult-bar .cb-f{ flex:1 1 0; width:auto; max-width:none; }
  /* 2행 : 동의(왼쪽) + 버튼(오른쪽) */
  .consult-bar #consultBarForm > div:has(#cbAgreePrivacy){
    position:static !important; inset:auto !important;
    flex:1 1 auto; order:2;
    min-width:0;
  }
  .consult-bar .cb-submit{
    position:static !important; inset:auto !important;
    flex:0 0 var(--cb-btnw);
    order:3; margin-left:auto;
    width: var(--cb-btnw); height:46px;
    border-radius:8px !important; font-size:18px;
  }
  .consult-bar .cb-msg{ left:auto; right:clamp(12px,2vw,24px); }
  .consult-bar .cb-done.show{ padding-right:0; }
}

/* ── 모바일 : 세로 스택 ──────────────────────────────────── */
@media (max-width: 768px){
  :root{ --cb-pad: 290px; }

    .consult-bar .cb-title{ display:flex; justify-content: center; font-size: 24px; }  

  body:has(.consult-bar){
    transition:padding-bottom .34s cubic-bezier(.4,0,.2,1);
  }

  .consult-bar{
    min-height:0;
    padding: 12px 12px 14px !important;   /* 버튼이 흐름으로 돌아오므로 우측 여백 원복 */
    transition:transform .34s cubic-bezier(.4,0,.2,1);
    will-change:transform;
  }
  /* 외부 모바일 효과가 어느 자식/가상요소에 붙어도 먼저 전부 제거 */
  .consult-bar:not(:has(.cb-done.show)),
  .consult-bar #consultBarForm,
  .consult-bar #consultBarForm *,
  .consult-bar::before,
  .consult-bar::after,
  .consult-bar #consultBarForm *::before,
  .consult-bar #consultBarForm *::after{
    animation:none !important;
  }
  .consult-bar:not(:has(.cb-done.show)){
    filter:none !important;
  }
  /* 버튼 밖으로 광택 레이어가 번지지 않도록 페인트 영역도 버튼에 고정 */
  .consult-bar .cb-submit{
    overflow:hidden !important;
    isolation:isolate;
    contain:paint;
  }
  /* 전체 제거 뒤 신청 버튼의 광택만 명시적으로 다시 활성화 */
  .consult-bar .cb-submit::before{
    animation:cbSheen 3.6s ease-in-out infinite !important;
  }

  .consult-bar .cb-mobile-toggle{
    position:absolute;
    top:-34px;
    right:12px;
    z-index:4;
    display:flex !important;
    gap:5px;
    min-width:108px;
    height:34px;
    padding:0 13px;
    border-radius:10px 10px 0 0;
    box-shadow:0 -5px 14px rgba(0,0,0,.16);
  }
  .consult-bar .cb-mobile-toggle-icon{
    display:inline-block;
    font-size:18px;
    line-height:1;
    transition:transform .34s ease;
  }
  .consult-bar.is-collapsed{
    transform:translateY(100%);
  }
  .consult-bar.is-collapsed .cb-mobile-toggle-icon{
    transform:rotate(180deg);
  }
  body:has(.consult-bar.is-collapsed){
    padding-bottom:0;
  }
  .consult-bar #consultBarForm{
    flex-direction:column; align-items:stretch;
    min-height:0; gap:8px; padding-right:0 !important;
  }
  .consult-bar #consultBarForm > div:has(.cb-f){
    flex:1 1 100%; flex-wrap: wrap !important; gap:8px;
  }
  .consult-bar .cb-f{ flex:1 1 calc(100% - 4px); width:auto; max-width:none; }
  .consult-bar .cb-input{ height:60px; font-size:18px; }

  .consult-bar .cb-submit{
    position:static !important; inset:auto !important; order:2;
    flex:0 0 auto;
    width:100% !important; height:48px; min-width:0; margin-left:0;
    border-radius:8px !important; font-size:17px;
  }
  .consult-bar #consultBarForm > div:has(#cbAgreePrivacy){
    position:static !important; inset:auto !important;
    order:3; flex:0 0 auto; width:100%;
    justify-content:flex-start; flex-wrap:wrap !important;
    margin:0 !important;
  }
  /* 900px 이하에서 걸어둔 문구 말줄임 해제 (모바일은 폭이 넉넉함) */
  .consult-bar #consultBarForm > div:has(#cbAgreePrivacy) > label > span{
    max-width:none; overflow:visible; white-space:normal;
  }
  /* 약관 내용도 팝업 절대배치가 아니라 동의행 아래의 일반 흐름으로 펼침 */
  .consult-bar .cb-agree-box{
    position:static !important;
    inset:auto !important;
    flex:0 0 100%;
    width:100%;
    margin-top:8px;
    box-shadow:none;
  }
  .consult-bar .cb-msg{ left:12px; right:12px; white-space:normal; }
  .consult-bar .cb-done.show{ padding-right:0; justify-content:flex-start; }
  .consult-bar .cb-done.show{ min-height:0; font-size:14px; }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce){
  .consult-bar,
  .consult-bar .cb-mobile-toggle-icon{ transition:none; }
  .consult-bar .cb-submit::before{ animation:none !important; }
}

/* PC: 빠진 선택 필드 2칸을 좌측 제목과 우측 문의 버튼으로 채움 */
@media (min-width: 1241px){
  :root{ --cb-btnw: clamp(320px, 23vw, 440px); }

  .consult-bar #consultBarForm{ gap:20px; }

  .consult-bar .cb-title{
    display:block;
    flex:1 1 0;
    min-width:0;
    text-align:center;
    font-size:clamp(22px, 1.5vw, 30px);
  }

  .consult-bar #consultBarForm > div:has(.cb-f){
    margin:0 !important;
  }

  .consult-bar .cb-submit{ font-size:clamp(22px, 1.4vw, 28px); }
}