/* =========================================================
   US4 보조금 견적 모달 — W4 소유 (subsidy.css)

   원칙 (reserve.css의 규칙을 그대로 이어받는다)
   - 새 토큰·새 색·새 그림자를 만들지 않는다. 전부 base.css의 var()와
     이미 이 사이트에서 쓰이는 값(.spectab.is-on의 떠오름, .rsv-foot의 1px 구분선)만 쓴다.
   - 모든 클래스는 sbs- 접두사 (landing.css의 A, reserve.css의 rsv- 와 절대 겹치지 않게).
   - 애니메이션은 transform·opacity만.
   - 호버는 (hover:hover) and (pointer:fine) 안에서만.
   - reduced-motion / reduced-transparency / contrast:more 세 가지 다 대응.

   층: 백드롭 98 / 모달 99.
   CONTRACT §2의 층표는 도크 60 · 사진 라이트박스 90 · 예약 모달 100/101 이다.
   견적 모달을 예약 모달 '아래'에 두는 이유: 견적의 '사전 예약 상담하기'는 견적을 닫으면서
   예약을 여는데, 견적이 사라지는 0.3초 동안 그 백드롭이 예약 시트를 덮으면 안 된다.
   두 모달이 동시에 '열려' 있는 상태는 없다 — 겹치는 건 퇴장 애니메이션뿐이다.
   ========================================================= */

/* #subsidy-root 는 W1이 만든 빈 컨테이너다.
   여기에 position/transform/z-index가 붙으면 새 stacking context가 생겨
   자식의 z-index가 도크 위로 못 올라간다. 명시적으로 무력화한다. */
.sbs-root{
  position:static;
  z-index:auto;
  isolation:auto;
  transform:none;
  filter:none;
}

/* ---------- 백드롭 (z 98) ---------- */
.sbs-backdrop{
  position:fixed;
  inset:0;
  z-index:98;
  background:rgba(10,10,11,.42);
  -webkit-backdrop-filter:blur(2px) saturate(120%);
          backdrop-filter:blur(2px) saturate(120%);
  opacity:0;
  transition:opacity .3s var(--ease-in);
}
.sbs-root.sbs-open .sbs-backdrop{
  opacity:1;
  transition-duration:.44s;
  transition-timing-function:var(--ease-spring);
}

/* ---------- 정렬 래퍼 (z 99) ---------- */
.sbs-wrap{
  position:fixed;
  left:0;
  right:0;
  top:0;
  height:100vh;
  height:100dvh;
  z-index:99;
  display:flex;
  align-items:flex-end;      /* 모바일 = 하단에서 올라오는 시트 */
  justify-content:center;
  /* 래퍼는 클릭을 통과시킨다 — 시트 바깥을 누르면 밑에 깔린 백드롭이 받는다. */
  pointer-events:none;
}

/* ---------- 모달 ---------- */
.sbs-modal{
  pointer-events:auto;
  position:relative;
  width:100%;
  max-width:30rem;           /* 예약 시트(34rem)보다 좁다 — 담는 것이 카드 한 장이다 */
  max-height:92%;
  display:flex;
  flex-direction:column;
  background:var(--surface);
  color:var(--text);
  border-radius:var(--r-card) var(--r-card) 0 0;
  box-shadow:0 -1px 2px rgba(0,0,0,.05), 0 -12px 40px rgba(0,0,0,.18);
  overflow:hidden;
  opacity:0;
  transform:translateY(100%);
  transition:opacity .28s var(--ease-in), transform .28s var(--ease-in);
}
.sbs-root.sbs-open .sbs-modal{
  opacity:1;
  transform:none;
  transition-duration:.46s;
  transition-timing-function:var(--ease-spring);
}
.sbs-modal:focus{outline:none;}   /* 컨테이너 포커스는 보조기술용이지 시각 표시가 아니다 */

/* ---------- 머리 ---------- */
.sbs-head{
  position:relative;
  flex:none;
  padding:clamp(1.35rem,5vw,1.75rem) 3.75rem .85rem clamp(1.25rem,5vw,1.75rem);
}
.sbs-title{
  font-size:1.1875rem;
  font-weight:700;
  letter-spacing:-0.024em;
  line-height:1.25;
}
.sbs-desc{
  margin-top:.4rem;
  font-size:var(--t-cap);
  font-weight:400;
  line-height:1.6;
  color:var(--muted);
  letter-spacing:0;
}
.sbs-x{
  position:absolute;
  top:clamp(1rem,4vw,1.35rem);
  right:clamp(.9rem,4vw,1.25rem);
  width:2.25rem;
  height:2.25rem;
  border:0;
  border-radius:var(--r-pill);
  background:rgba(0,0,0,.05);
  color:var(--muted);
  display:grid;
  place-items:center;
  transition:transform .1s ease-out, background .18s var(--ease-spring), color .18s var(--ease-spring);
}
.sbs-x:active{transform:scale(.94);}
.sbs-x svg{width:1.05rem;height:1.05rem;display:block;}
@media (hover:hover) and (pointer:fine){
  .sbs-x:hover{background:rgba(0,0,0,.09);color:var(--text);}
}

/* ---------- 몸 ---------- */
.sbs-body{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;   /* 없으면 시트 끝에서 배경이 따라 움직인다(스크롤 체이닝) */
  padding:0 clamp(1.25rem,5vw,1.75rem) 1.25rem;
}

/* ---------- 차종 세그먼트 ----------
   랜딩의 탭 틀(.spectabs)과 같은 언어다: 알약 트랙 위에서 고른 것만 흰 알약으로 떠오른다.
   노란 면을 쓰지 않는 이유도 같다 — 이 화면의 노랑은 아래 CTA 몫이다. */
.sbs-seg{
  display:flex;
  gap:.25rem;
  padding:.25rem;
  border-radius:var(--r-pill);
  background:var(--paper);
}
.sbs-segbtn{
  flex:1 1 0;
  min-width:0;
  appearance:none;
  border:0;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  /* 손가락으로 눌러야 하므로 세로 44px 이상 */
  padding:.7rem .75rem;
  min-height:2.75rem;
  border-radius:var(--r-pill);
  background:transparent;
  color:var(--muted);
  font:inherit;
  font-size:.9375rem;
  font-weight:600;
  letter-spacing:-0.01em;
  transition:transform .1s ease-out, background .22s var(--ease-spring), color .22s var(--ease-spring);
}
.sbs-segbtn.is-on{
  background:var(--surface);
  color:var(--text);
  box-shadow:0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.06);
}
.sbs-segbtn:active{transform:scale(.97);}
@media (hover:hover) and (pointer:fine){
  .sbs-segbtn:not(.is-on):hover{color:var(--text);}
}

/* ---------- 결과 카드 ---------- */
.sbs-card{
  margin-top:1rem;
  padding:clamp(1rem,4vw,1.25rem);
  border-radius:var(--r-card);
  background:var(--paper);
}
.sbs-rows{margin:0;}
.sbs-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
}
.sbs-row+.sbs-row{margin-top:.85rem;}
.sbs-row-lab{
  font-size:.875rem;
  font-weight:600;
  color:var(--muted);
  letter-spacing:-0.01em;
}
/* '국고의 30% 가정' — 값이 아니라 값의 조건이다. 라벨에 붙여 두어야
   숫자만 눈에 담고 조건은 못 본 채 지나가는 일이 없다. */
.sbs-row-sub{
  display:block;
  margin-top:.15rem;
  font-size:.75rem;
  font-weight:500;
  letter-spacing:0;
  color:var(--muted);
}
.sbs-row-val{
  margin:0;
  flex:none;
  font-size:1rem;
  font-weight:700;
  letter-spacing:-0.01em;
  white-space:nowrap;
}

/* 구분선은 1px 선 하나 — 예약 시트의 발(.rsv-foot)이 쓰는 것과 같은 방식 */
.sbs-total{
  margin-top:1rem;
  padding-top:1rem;
  box-shadow:0 -1px 0 var(--line);
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
}
.sbs-total-lab{
  font-size:.9375rem;
  font-weight:700;
  letter-spacing:-0.01em;
  color:var(--text);
}
.sbs-total-val{
  flex:none;
  font-size:clamp(1.3rem,4.5vw,1.55rem);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-0.024em;
  white-space:nowrap;
}

/* ---------- 면책 ----------
   접거나 흐리게 두지 않는다. 이 화면 숫자의 절반은 '가정'이고,
   그 사실을 같은 화면에서 같은 크기의 목소리로 말해야 견적이 거짓말이 되지 않는다.
   색으로 경고하지 않는 이유: 이 사이트의 색은 행동에만 쓴다(base.css). 대신 면과 선으로 세운다. */
.sbs-note{
  margin-top:1rem;
  padding:.85rem .9rem;
  border-radius:var(--r-field);
  background:var(--paper);
  box-shadow:inset 0 0 0 1px var(--line);
  font-size:.8125rem;
  font-weight:500;
  line-height:1.6;
  letter-spacing:0;
  color:var(--text);
}

/* ---------- 발 ---------- */
.sbs-foot{
  flex:none;
  padding:.9rem clamp(1.25rem,5vw,1.75rem);
  padding-bottom:calc(.9rem + env(safe-area-inset-bottom));
  background:var(--surface);
  box-shadow:0 -1px 0 var(--line);
  display:grid;
  gap:.5rem;
}
.sbs-cta{
  justify-content:center;
  min-height:2.75rem;
  text-align:center;
}
/* 좁은 화면에서는 두 알약을 위아래로 쌓는다 — '전화상담 1666-5944'는 반 폭에 들어가지 않는다. */
@media (min-width:26rem){
  .sbs-foot{grid-template-columns:1fr 1fr;}
}

/* ---------- 배경 스크롤 락 ---------- */
/* iOS Safari는 body{overflow:hidden} 만으로 배경 스크롤이 막히지 않는다.
   (top 값과 원래 padding-right 는 JS가 인라인으로 넣고 닫을 때 되돌린다) */
body.sbs-locked{
  position:fixed;
  left:0;
  right:0;
  width:100%;
  overflow:hidden;
}

/* ---------- 데스크톱: 중앙 다이얼로그 ---------- */
@media (min-width:40rem){
  .sbs-wrap{
    align-items:center;
    padding:2rem 1.5rem;
  }
  .sbs-modal{
    max-height:100%;
    border-radius:var(--r-card);
    box-shadow:0 2px 6px rgba(0,0,0,.06), 0 24px 64px rgba(0,0,0,.22);
    /* 아래에서 올라오는 대신 제자리에서 살짝 떠오른다 */
    transform:translateY(1.25rem) scale(.985);
  }
  .sbs-foot{padding-bottom:.9rem;}
}

/* ---------- 접근성 대응 ---------- */
@media (prefers-reduced-motion:reduce){
  /* 이동은 전부 뺀다. 나타났다는 사실 자체는 페이드로 남긴다. */
  .sbs-modal{transform:none !important;}
  html:not(.force-motion) .sbs-segbtn{transition:none;}
  html:not(.force-motion) .sbs-segbtn:active{transform:none;}
}
@media (prefers-reduced-transparency:reduce){
  .sbs-backdrop{
    background:rgba(10,10,11,.62);
    -webkit-backdrop-filter:none;
            backdrop-filter:none;
  }
}
@media (prefers-contrast:more){
  .sbs-backdrop{background:rgba(0,0,0,.72);}
  .sbs-modal{box-shadow:0 0 0 2px var(--line), 0 24px 64px rgba(0,0,0,.3);}
  .sbs-x{background:rgba(0,0,0,.1);color:var(--text);}
  .sbs-seg{box-shadow:inset 0 0 0 1px var(--line);}
  .sbs-segbtn.is-on{box-shadow:inset 0 0 0 2px var(--text);}
  .sbs-card{box-shadow:inset 0 0 0 1px var(--line);}
  .sbs-note{box-shadow:inset 0 0 0 2px var(--line);}
  .sbs-total{box-shadow:0 -2px 0 var(--line);}
  .sbs-foot{box-shadow:0 -2px 0 var(--line);}
}

/* 인쇄에는 모달이 낄 자리가 없다(닫혀 있으면 [hidden]으로 이미 사라진다). */
@media print{
  .sbs-root{display:none !important;}
}