/* =========================================================
   US4 사전예약 모달 — 에이전트 B 소유 (reserve.css)

   원칙
   - 새 토큰을 만들지 않는다. 색·형태·모션은 전부 base.css의 var()를 쓴다.
   - 모든 클래스는 rsv- 접두사 (A의 landing.css와 절대 겹치지 않게).
   - 애니메이션은 transform·opacity만 — 합성만으로 끝낸다(base.css 규칙 계승).
   - 호버는 (hover:hover) and (pointer:fine) 안에서만.
   - reduced-motion / reduced-transparency / contrast:more 세 가지 다 대응.

   층(계약서 §2): 백드롭 100 / 모달 101.
   ========================================================= */

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

/* ---------- 백드롭 (z 100) ---------- */
.rsv-backdrop{
  position:fixed;
  inset:0;
  z-index:100;
  background:rgba(10,10,11,.42);
  -webkit-backdrop-filter:blur(2px) saturate(120%);
          backdrop-filter:blur(2px) saturate(120%);
  opacity:0;
  /* 나가는 길은 --ease-in, 들어오는 길은 --ease-spring (base.css §7 거울 대칭) */
  transition:opacity .3s var(--ease-in);
}
.rsv-root.rsv-open .rsv-backdrop{
  opacity:1;
  transition-duration:.44s;
  transition-timing-function:var(--ease-spring);
}

/* ---------- 정렬 래퍼 (z 101) ---------- */
/* height를 100dvh로 묶고 JS가 visualViewport 높이로 덮어쓴다.
   모바일 키보드가 올라오면 뷰포트가 줄어드는데, 이 래퍼가 같이 줄어야
   내부 스크롤 영역이 키보드 위 공간에 맞게 다시 계산된다. */
.rsv-wrap{
  position:fixed;
  left:0;
  right:0;
  top:0;
  height:100vh;
  height:100dvh;
  z-index:101;
  display:flex;
  align-items:flex-end;      /* 모바일 = 하단에서 올라오는 시트 */
  justify-content:center;
  /* 래퍼는 클릭을 통과시킨다 — 시트 바깥을 누르면 밑에 깔린 백드롭이 받는다. */
  pointer-events:none;
}

/* ---------- 모달 ---------- */
.rsv-modal{
  pointer-events:auto;
  /* 화면(폼/시도/시군구)마다 내용 높이가 다르다. 붙잡아 두면 짧은 화면이 텅 비어 보이고
     그냥 두면 튄다 — JS가 픽셀 높이를 넣어 주고 여기서 그 사이를 움직인다. */
  transition:height .32s var(--ease-spring);
  position:relative;
  width:100%;
  max-width: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);
}
.rsv-root.rsv-open .rsv-modal{
  opacity:1;
  transform:none;
  transition-duration:.46s;
  transition-timing-function:var(--ease-spring);
}
.rsv-modal:focus{outline:none;}   /* 컨테이너 포커스는 보조기술용이지 시각 표시가 아니다 */

/* ---------- 머리 ---------- */
.rsv-head{
  position:relative;
  flex:none;
  padding:clamp(1.35rem,5vw,1.75rem) 3.75rem .85rem clamp(1.25rem,5vw,1.75rem);
}
.rsv-title{
  font-size:1.1875rem;
  font-weight:700;
  letter-spacing:-0.024em;
  line-height:1.25;
}
.rsv-desc{
  margin-top:.4rem;
  font-size:var(--t-cap);
  font-weight:400;
  line-height:1.6;
  color:var(--muted);
  letter-spacing:0;
}

.rsv-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);
}
.rsv-x:active{transform:scale(.94);}
.rsv-x svg{width:1.05rem;height:1.05rem;display:block;}
@media (hover:hover) and (pointer:fine){
  .rsv-x:hover{background:rgba(0,0,0,.09);color:var(--text);}
}

/* ---------- 폼 ---------- */
.rsv-form{
  display:flex;
  flex-direction:column;
  min-height:0;              /* flex 자식이 넘칠 때 줄어들 수 있게 — 내부 스크롤의 전제 */
  flex:1 1 auto;
}

/* 스크롤은 이 영역만. overscroll-behavior:contain 이 없으면
   시트 끝까지 스크롤한 뒤 계속 밀 때 배경 페이지가 따라 움직인다(스크롤 체이닝). */
.rsv-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;
}
/* base.css의 .field 를 그대로 쓰되, 모달 안에서는 첫 필드 위 간격만 줄인다.
   (허니팟 div가 DOM상 첫 자식이라 :first-child로는 안 잡힌다 — 인접 선택자로 짚는다) */
.rsv-body .rsv-hp+.field{margin-top:.35rem;}

.rsv-req{
  margin-left:.15rem;
  color:var(--bus-ink);
  font-weight:700;
}

/* 에러는 필드 아래 한 줄. 색은 지면이 아니라 신호에만 쓴다. */
.rsv-err{
  margin-top:.4rem;
  font-size:.75rem;
  font-weight:600;
  line-height:1.5;
  color:#B3261E;
  letter-spacing:0;
}
.rsv-form .field input[aria-invalid="true"]{border-color:#B3261E;}
.rsv-form .field input[aria-invalid="true"]:focus{box-shadow:0 0 0 4px rgba(179,38,30,.14);}

/* 허니팟 — display:none 은 일부 봇이 '숨김'으로 인식해 건너뛴다.
   화면 밖으로 밀어내고 탭 순서·보조기술·자동완성에서만 제외한다. */
.rsv-hp{
  position:absolute !important;
  left:-9999px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden;
  opacity:0;
}

/* ---------- 통화 가능시간 (달력 버튼 + 시간 휠) ---------- */
/* 컨트롤이 둘이라 <label for> 를 쓸 수 없다. 묶음 이름만 .field>label 과 같은 모양으로 맞춘다. */
.rsv-fieldlab{
  display:block;
  margin-bottom:.4rem;
  font-size:.8125rem;
  font-weight:600;
  color:var(--muted);
}
/* 오너 지시: 날짜와 시간을 한 줄에. 고르는 판은 이 줄 아래에서 펼쳐진다. */
.rsv-callrow{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.5rem;
}
/* 트리거 두 개는 지역 버튼과 같은 규격으로 세운다 —
   한 폼 안에서 '눌러서 고르는 것'의 생김새는 하나여야 한다. */
.rsv-callbtn{
  width:100%;
  display:flex;
  align-items:center;
  gap:.5rem;
  min-height:3rem;
  padding:.8rem;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-field);
  color:var(--text);
  font:inherit;
  font-size:.9375rem;
  font-weight:500;
  letter-spacing:-0.01em;
  text-align:left;
  cursor:pointer;
  transition:border-color .18s var(--ease-spring), background .18s var(--ease-spring);
}
.rsv-callbtn-ico{width:1.15rem;height:1.15rem;flex:none;color:var(--muted);}
.rsv-callbtn-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rsv-callbtn.rsv-empty .rsv-callbtn-val{color:var(--muted);font-weight:400;}
.rsv-callbtn.is-open{border-color:var(--bus-ink);}
.rsv-callbtn:active{background:var(--paper);}
@media (hover:hover) and (pointer:fine){
  .rsv-callbtn:hover{background:var(--paper);}
}

/* 펼쳐지는 판 — 별도 화면이 아니라 폼 안 그 자리에서 열린다. */
.rsv-cal,.rsv-wheel{
  margin-top:.5rem;
  padding:.65rem;
  border:1px solid var(--line);
  border-radius:var(--r-field);
  background:var(--surface);
}

/* -- 달력 -- */
.rsv-cal-bar{display:flex;align-items:center;justify-content:space-between;gap:.5rem;}
.rsv-cal-now{font-size:.9375rem;font-weight:700;letter-spacing:-0.01em;}
.rsv-cal-nav{
  appearance:none;
  flex:none;
  width:2.25rem;height:2.25rem;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  background:var(--surface);
  color:var(--text);
  cursor:pointer;
}
.rsv-cal-nav svg{width:1rem;height:1rem;}
.rsv-cal-nav:disabled{opacity:.3;cursor:default;}
.rsv-cal-dow,.rsv-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.15rem;}
.rsv-cal-dow{margin-top:.6rem;}
.rsv-cal-dow span{
  padding:.25rem 0;
  text-align:center;
  font-size:.6875rem;font-weight:700;letter-spacing:0;
  color:var(--muted);
}
.rsv-cal-day{
  height:2.4rem;
  display:flex;align-items:center;justify-content:center;
  border:0;border-radius:10px;
  background:transparent;
  color:var(--text);
  font:inherit;font-size:.875rem;font-weight:500;letter-spacing:0;
  font-variant-numeric:tabular-nums;
  cursor:pointer;
}
/* 고를 수 없는 날은 눌리는 것처럼 보이지 않게 한다 — 없는 선택지를 약속하지 않는다. */
.rsv-cal-day:disabled{color:var(--line);cursor:default;}
/* 오늘은 테두리 한 줄로만. 면을 칠하면 '고른 날'과 헷갈린다. */
.rsv-cal-day.is-today{font-weight:700;box-shadow:inset 0 0 0 1px var(--line);}
/* 고른 날은 노란 면 + 검정 글자 (노랑은 면, 글자는 검정 — 페이지 전체 규칙). */
.rsv-cal-day.is-on{background:var(--bus);color:var(--text);font-weight:700;box-shadow:none;}
@media (hover:hover) and (pointer:fine){
  .rsv-cal-day:not(:disabled):not(.is-on):hover{background:var(--paper);}
}
.rsv-cal-clear{
  display:block;
  width:100%;
  margin-top:.6rem;
  min-height:2.5rem;
  padding:.5rem;
  border:1px solid var(--line);
  border-radius:var(--r-field);
  background:var(--surface);
  color:var(--muted);
  font:inherit;font-size:.8125rem;font-weight:600;
  cursor:pointer;
}
@media (hover:hover) and (pointer:fine){
  .rsv-cal-clear:hover{background:var(--paper);color:var(--text);}
}

/* -- 시간 휠 (안드로이드 알람식) --
   넘기는 일은 CSS 세로 스냅 스크롤이 한다. 목록 위아래를 두 칸씩 비워 두면
   'i번째 칸이 가운데' <=> 'scrollTop === i x 칸높이' 가 되어 JS의 자리 계산이 곱셈 하나로 끝난다. */
.rsv-wheel{--rsv-wheel-item:2.75rem;}
.rsv-wheel-stage{position:relative;}
.rsv-wheel-view{
  height:calc(var(--rsv-wheel-item) * 5);
  overflow-y:auto;
  overscroll-behavior:contain;      /* 휠 끝에서 모달 본문이 따라 밀리지 않게 */
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:y mandatory;
  scrollbar-width:none;             /* 여기서는 스크롤바가 눈금처럼 보여 오히려 방해된다 */
}
.rsv-wheel-view::-webkit-scrollbar{display:none;}
.rsv-wheel-view:focus-visible{outline:2px solid var(--text);outline-offset:2px;border-radius:10px;}
.rsv-wheel-list{
  list-style:none;
  margin:0;
  padding-left:0;
  padding-right:0;
  padding-top:calc(var(--rsv-wheel-item) * 2);
  padding-bottom:calc(var(--rsv-wheel-item) * 2);
}
.rsv-wheel-item{
  height:var(--rsv-wheel-item);
  display:flex;align-items:center;justify-content:center;
  scroll-snap-align:center;
  cursor:pointer;
  font-size:1rem;font-weight:500;letter-spacing:0;
  font-variant-numeric:tabular-nums;
  color:var(--muted);
  opacity:.45;
  transition:opacity .16s linear, color .16s linear;
}
.rsv-wheel-item.is-on{color:var(--text);opacity:1;font-weight:700;font-size:1.125rem;}
/* 가운데 칸이 '고르는 자리'임을 두 줄로만 알린다. 면을 칠하면 카드 위에 카드가 겹친다. */
.rsv-wheel-band{
  position:absolute;
  left:0;right:0;
  top:calc(var(--rsv-wheel-item) * 2);
  height:var(--rsv-wheel-item);
  pointer-events:none;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

@media (prefers-contrast:more){
  .rsv-callbtn,.rsv-cal,.rsv-wheel,.rsv-cal-nav,.rsv-cal-clear{border-width:2px;}
  .rsv-wheel-item{opacity:.75;}
}

/* ---------- 동의 ---------- */
.rsv-consent{
  display:flex;
  align-items:flex-start;
  gap:.6rem;
  margin-top:1.35rem;
}
.rsv-consent input[type="checkbox"]{
  flex:none;
  width:1.15rem;
  height:1.15rem;
  margin:.16rem 0 0;
  accent-color:var(--bus-ink);
}
.rsv-consent-text{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.15rem .35rem;
}
.rsv-consent label{
  font-size:.875rem;
  font-weight:500;
  line-height:1.5;
  color:var(--text);
  cursor:pointer;
}
.rsv-more{
  border:0;
  background:none;
  padding:0;
  font:inherit;
  font-size:.8125rem;
  font-weight:600;
  color:var(--bus-ink);
  text-decoration:underline;
  text-underline-offset:2px;
  transition:opacity .18s var(--ease-spring);
}
.rsv-more:active{opacity:.6;}

.rsv-terms{
  margin-top:.65rem;
  max-height:11rem;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:.8rem .9rem;
  background:var(--paper);
  border-radius:var(--r-field);
  font-size:.75rem;
  line-height:1.7;
  color:var(--muted);
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  letter-spacing:0;
}
.rsv-terms .rsv-termlink{
  font-weight:600;
  color:var(--bus-ink);
  text-decoration:underline;
  text-underline-offset:2px;
}
.rsv-terms.rsv-loading{color:var(--muted);font-style:normal;}

/* ---------- 안내 / 오류 메시지 (as.html 의 .msg 문법을 그대로 계승) ---------- */
.rsv-msg{
  margin-top:1.15rem;
  padding:.85rem 1rem;
  border-radius:var(--r-field);
  font-size:.875rem;
  font-weight:600;
  line-height:1.55;
  letter-spacing:0;
  background:#FFF1F1;
  color:#B3261E;
  box-shadow:inset 0 0 0 1px #F3C2C2;
}
/* 안내(오류 아님)는 브랜드 계열의 옅은 면. 앰버가 사라졌으므로 따뜻한 주황 틴트도 같이 걷어낸다.
   #7A7100 글자 대비: 배경 #FBFAE6 위 4.9:1 (AA). */
.rsv-msg.rsv-msg-info{
  background:#FBFAE6;
  color:var(--bus-ink);
  box-shadow:inset 0 0 0 1px #E5DFA4;
}
.rsv-msg a{text-decoration:underline;text-underline-offset:2px;font-weight:700;}

/* ---------- 발 ---------- */
.rsv-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);
}
.rsv-submit{
  width:100%;
  justify-content:center;
}
/* disabled 속성 대신 aria-disabled 를 쓴다 —
   disabled 버튼은 클릭 이벤트가 오지 않아 "동의를 체크해 주세요"로 안내할 수 없고
   포커스도 못 받아 스크린리더가 이유를 읽어 주지 못한다. 모양만 비활성으로 보인다. */
.rsv-submit[aria-disabled="true"]{opacity:.45;}
.rsv-foot .rsv-note{
  margin-top:.6rem;
  font-size:.75rem;
  line-height:1.5;
  color:var(--muted);
  text-align:center;
  letter-spacing:0;
}
.rsv-foot .rsv-note a{font-weight:700;color:var(--text);text-decoration:underline;text-underline-offset:2px;}

/* 진행 표시 — 버튼 안 작은 원.
   제출 버튼이 '노란 면 + 검정 글자'로 바뀌었다(R2-2). 흰 원은 노란 면 위에서 사라지므로
   글자와 같은 색(currentColor)을 돈다. */
.rsv-spin{
  width:1rem;
  height:1rem;
  flex:none;
  border-radius:50%;
  border:2px solid rgba(0,0,0,.22);
  border-top-color:currentColor;
  animation:rsvSpin .7s linear infinite;
}
@keyframes rsvSpin{to{transform:rotate(360deg);}}

/* ---------- 완료 ---------- */
.rsv-done{
  padding:clamp(2rem,7vw,2.75rem) clamp(1.25rem,5vw,1.75rem);
  padding-bottom:calc(clamp(2rem,7vw,2.75rem) + env(safe-area-inset-bottom));
  text-align:center;
}
.rsv-done:focus{outline:none;}
/* 완료 표시는 노란 면 + 검정 체크(12.16:1). 흰 지면 위 노란 원은 경계 대비가 1.38이라
   그대로 두면 형태가 뭉개진다 — inset 링을 항상 같이 둔다(CONTRACT R2-2 규칙 4). */
.rsv-mark{
  width:3rem;
  height:3rem;
  margin:0 auto 1.1rem;
  border-radius:var(--r-pill);
  background:var(--bus);
  color:var(--text);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);
  display:grid;
  place-items:center;
}
.rsv-mark svg{width:1.4rem;height:1.4rem;display:block;}
.rsv-done-title{
  font-size:1.25rem;
  font-weight:700;
  letter-spacing:-0.024em;
  line-height:1.25;
}
.rsv-done p{
  margin-top:.6rem;
  font-size:.9375rem;
  line-height:1.6;
  color:var(--muted);
}
.rsv-done .pill{margin-top:1.75rem;}

/* 완료 화면은 폼과 같은 방향(오른쪽)에서 들어온다 — as.html 의 .step-in 과 같은 260ms */
@keyframes rsvStepIn{from{opacity:0;transform:translateX(1.25rem);}to{opacity:1;transform:none;}}
.rsv-step-in{animation:rsvStepIn .26s var(--ease-spring) both;}

/* 백드롭 클릭을 거절할 때의 피드백 — "닫히지 않는다"를 말로 하지 않고 몸짓으로 */
@keyframes rsvNudge{
  0%,100%{transform:none;}
  22%{transform:translateX(-.4rem);}
  62%{transform:translateX(.4rem);}
}
.rsv-nudge{animation:rsvNudge .32s var(--ease-spring);}

/* =========================================================
   지역 선택 (CONTRACT R2-3)
   모달 위에 모달을 얹지 않는다 — 같은 상자 안에서 '장'만 갈아 끼운다.
   ========================================================= */

/* ---------- 장(pane) 교차 전환 ---------- */
.rsv-panes{
  position:relative;         /* 나가는 장을 절대배치로 띄울 때의 기준. 머리글은 덮지 않는다 */
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
}
/* 작성자 스타일의 display 는 UA의 [hidden]{display:none} 을 이긴다(출처 우선순위).
   .rsv-form·.rsv-pick 처럼 display 를 가진 요소를 hidden 으로 감추는 것이
   이 모달의 화면 전환 방식이므로, 여기서 한 번에 못을 박는다. */
.rsv-modal [hidden]{display:none !important;}

@keyframes rsvPaneIn{from{opacity:0;transform:translateX(1.25rem);}to{opacity:1;transform:none;}}
@keyframes rsvPaneBack{from{opacity:0;transform:translateX(-1.25rem);}to{opacity:1;transform:none;}}
@keyframes rsvPaneOut{from{opacity:1;}to{opacity:0;}}
/* 등장은 --ease-spring, 퇴장은 --ease-in. both 로 끝 상태를 붙잡아 두어
   reduced-motion 이 길이를 0으로 눌러도 중간에 되살아나 깜빡이지 않는다. */
.rsv-pane-in{animation:rsvPaneIn .28s var(--ease-spring) both;}
.rsv-pane-back{animation:rsvPaneBack .28s var(--ease-spring) both;}
.rsv-pane-out{
  position:absolute;
  inset:0;
  pointer-events:none;
  animation:rsvPaneOut .16s var(--ease-in) both;
}

/* ---------- 지역 필드(버튼) ---------- */
.rsv-regionbtn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  min-height:3rem;
  padding:.8rem .9rem;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-field);
  color:var(--text);
  font:inherit;
  font-size:1rem;
  font-weight:500;
  letter-spacing:-0.01em;
  text-align:left;
  transition:border-color .18s var(--ease-spring), background .18s var(--ease-spring);
}
.rsv-regionbtn,.rsv-sido,.rsv-row{cursor:pointer;}
.rsv-regionbtn.rsv-empty .rsv-regionbtn-val{color:var(--muted);font-weight:400;}
.rsv-regionbtn-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rsv-regionbtn-chev{width:1.1rem;height:1.1rem;flex:none;color:var(--muted);}
.rsv-regionbtn[aria-invalid="true"]{border-color:#B3261E;}
.rsv-regionbtn:active{background:var(--paper);}

/* ---------- 선택 화면 ---------- */
.rsv-pick{
  display:flex;
  flex-direction:column;
  min-height:0;
  flex:1 1 auto;
}
.rsv-pick:focus{outline:none;}   /* 컨테이너 포커스는 보조기술용이지 시각 표시가 아니다 */

.rsv-pick-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;
}
.rsv-pick-body ul{list-style:none;margin:0;padding:0;}
.rsv-pick-empty{
  padding:1.5rem .25rem;
  font-size:.875rem;
  line-height:1.6;
  color:var(--muted);
  letter-spacing:0;
}

/* 왼쪽 시도 · 오른쪽 세부 지역을 한 판에 (오너 지시 2026-08-21).
   두 칸이 각자 스크롤한다 — 판 전체를 스크롤하면 시도를 고르러 매번 위로 올라가야 한다.
   높이를 고정하는 이유도 같다: 시도마다 세부 지역 수가 11~31개로 달라서
   내용에 맞춰 늘렸다 줄였다 하면 왼쪽 목록이 매번 튄다. */
.rsv-regiongrid{
  display:grid;
  grid-template-columns:5.75rem 1fr;
  gap:.5rem;
  height:clamp(17rem,52vh,26rem);
}
.rsv-sidos,.rsv-gus{
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.rsv-sidos{
  background:var(--paper);
  border-radius:var(--r-field);
  padding:.3rem;
}
.rsv-sido{
  width:100%;
  display:block;
  min-height:2.75rem;
  padding:.65rem .4rem;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--muted);
  font:inherit;
  font-size:.875rem;
  font-weight:600;
  letter-spacing:-0.01em;
  text-align:center;
  transition:background .18s var(--ease-spring), color .18s var(--ease-spring);
}
/* 지금 펼쳐 놓은 시도. 아직 '고른 것'이 아니므로 노란 면(선택 표시)을 쓰지 않는다 —
   노랑은 오른쪽에서 실제로 고른 행에만 간다. */
.rsv-sido.is-on{background:var(--text);color:var(--surface);}

/* 오른쪽 — 세부 지역 목록. 행은 요소 하나로 그린다(나중에 붙일 것이 생겨도 자리가 있게). */
.rsv-row{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  min-height:3rem;
  padding:.7rem .35rem;
  border:0;
  border-radius:var(--r-field);
  background:none;
  color:var(--text);
  font:inherit;
  font-size:.9375rem;
  font-weight:500;
  letter-spacing:-0.01em;
  text-align:left;
  transition:background .18s var(--ease-spring);
}
.rsv-rows li+li{border-top:1px solid var(--line);}
.rsv-row:active{background:var(--paper);}

/* 지금 고른 것. 노란 면 + 검정 글자, 흰 지면 위에서는 경계 링을 함께(R2-2 규칙 4). */
.rsv-row[aria-current="true"]{
  background:var(--bus);
  color:var(--text);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);
  font-weight:700;
}

/* 노란 면 위에서도 보여야 하므로 링은 노랑이 아니라 --text (R2-2 규칙 5) */
.rsv-regionbtn:focus-visible,
.rsv-sido:focus-visible,
.rsv-row:focus-visible{
  outline:2px solid var(--text);
  outline-offset:2px;
}

/* 화면 전환 안내는 소리로만 — 자리를 차지하지 않는다 */
.rsv-sr{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  border:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
}

@media (hover:hover) and (pointer:fine){
  .rsv-regionbtn:hover{border-color:var(--text);}
  .rsv-sido:not(.is-on):hover{background:var(--surface);color:var(--text);}
  .rsv-row:hover{background:var(--paper);}
  .rsv-row[aria-current="true"]:hover{background:var(--bus-press);box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);}
}

/* ---------- 배경 스크롤 락 ---------- */
/* iOS Safari는 body{overflow:hidden} 만으로 배경 스크롤이 막히지 않는다.
   position:fixed 로 지면을 들어내고 top에 -scrollY를 넣어 보던 자리를 유지한다.
   (top 값과 원래 padding-right 는 JS가 인라인으로 넣고 닫을 때 되돌린다) */
body.rsv-locked{
  position:fixed;
  left:0;
  right:0;
  width:100%;
  overflow:hidden;
}

/* ---------- 데스크톱: 중앙 다이얼로그 ---------- */
@media (min-width:40rem){
  .rsv-wrap{
    align-items:center;
    padding:2rem 1.5rem;
  }
  .rsv-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);
  }
  .rsv-foot{padding-bottom:.9rem;}
  .rsv-done{padding-bottom:clamp(2rem,7vw,2.75rem);}
}

/* ---------- 접근성 대응 ---------- */
@media (prefers-reduced-motion:reduce){
  /* 이동은 전부 뺀다. 나타났다는 사실 자체는 페이드로 남긴다.
     (base.css가 transition-duration을 .01ms로 눌러 두므로 여기선 경로만 지운다) */
  .rsv-modal{transform:none !important;}
  @keyframes rsvStepIn{from{opacity:0;}to{opacity:1;}}
  /* 장 전환도 이동을 빼고 페이드만 남긴다 */
  @keyframes rsvPaneIn{from{opacity:0;}to{opacity:1;}}
  @keyframes rsvPaneBack{from{opacity:0;}to{opacity:1;}}
  @keyframes rsvNudge{0%,100%{opacity:1;}50%{opacity:.55;}}
  .rsv-spin{
    animation:rsvPulse 1.2s ease-in-out infinite;
    border-top-color:rgba(0,0,0,.22);
  }
  @keyframes rsvPulse{0%,100%{opacity:.35;}50%{opacity:1;}}
}
@media (prefers-reduced-transparency:reduce){
  .rsv-backdrop{
    background:rgba(10,10,11,.62);
    -webkit-backdrop-filter:none;
            backdrop-filter:none;
  }
}
@media (prefers-contrast:more){
  .rsv-backdrop{background:rgba(0,0,0,.72);}
  .rsv-modal{box-shadow:0 0 0 2px var(--line), 0 24px 64px rgba(0,0,0,.3);}
  .rsv-foot{box-shadow:0 -2px 0 var(--line);}
  .rsv-x{background:rgba(0,0,0,.1);color:var(--text);}
  .rsv-err{color:#8C1D18;}
  .rsv-msg{color:#8C1D18;box-shadow:inset 0 0 0 2px #D8A1A1;}
  .rsv-regionbtn{border-width:2px;}
  .rsv-sidos{box-shadow:inset 0 0 0 2px var(--line);}
  .rsv-rows li+li .rsv-row{box-shadow:0 -2px 0 var(--line);}
  .rsv-row[aria-current="true"]{box-shadow:inset 0 0 0 2px var(--text);}
}