/* 공항 미니 검색 — 6개 공항 페이지(icn/gmp/pus/cju/busan-port/incheon-port) 공용.
   T-RiseUp Connect 위젯과 카페쇼(cafeshow-2026-seoul `chauffeur-search.css`)의 레이아웃·
   상호작용 패턴을 참고해 재설계했다(2026-09-18) — 2단(폼+지도), 목적지 드롭다운은
   position:fixed(카드 밖 겹침 방지, airport-mini-search.js 가 좌표를 계산해 넣는다).

   전에는 6개 HTML이 이 스타일을 인라인 <style> 로 각자 복제해 갖고 있었다(1차 재설계).
   사용자 지시로 공용 파일 하나로 옮겼다 — 6곳이 이 파일 하나를 <link> 한다.

   색상·라운딩 등 톤은 각 페이지 :root 토큰(--card·--hair·--private 등, krideus everland
   계열)을 그대로 쓴다 — CSS 변수는 로드 순서와 무관하게 해석되므로 이 파일이 인라인
   <style> 보다 먼저/나중에 오든 상관없다.

   3차 보강(같은 날): (1) 지도가 아직 안 뜬 순간 카드가 좁아졌다 넓어지는 "폭 가변"을
   없애고 콘텐츠 영역(.wrap)을 고정폭으로 채운다(사용자 지적). (2) 목적지 팝업을 정적
   7개 버튼에서 카페쇼처럼 검색창+카테고리 탭+POI 아이콘+주소 서브텍스트를 가진 동적
   렌더링으로 바꿨다(사용자 지적 — "POI 유형 탭도 없고 아이콘도 없고"). 경유지·시간대절·
   인원 입력·호텔/행사장 탭 같은 카페쇼 전용 기능은 여전히 범위 밖이다(이 목록은 정적
   7곳뿐이라 탭도 "전체/명소/역" 셋으로 줄였다 — movement-places.js DESTINATIONS.kind). */

.chauffeur-widget{width:100%}

/* 2단: 왼쪽 폼 · 오른쪽 지도. 폼과 지도는 하나의 카드 안에 담는다(Connect 위젯·카페쇼가
   그렇듯 별개의 박스 두 개로 보이면 "그룹핑"이 깨진다). 카드는 `.ams-cols`가 지고, `.ams`
   (폼)는 그 안의 패널로 배치만 맡는다.
   폭은 콘텐츠 영역(.wrap)을 그대로 채운다 — 지도가 아직 안 떴을 때만 좁아지던 이전
   규칙(`:has(.ams-map[hidden])`)은 없앴다. 그 폭 점프가 사용자가 지적한 "선택값에
   따라 넓이가 가변" 문제였다. */
.ams-cols{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:clamp(24px,2.8vw,36px);
  width:100%;align-items:stretch;box-sizing:border-box;
  background:var(--card);border-radius:20px;padding:clamp(20px,2.6vw,32px);
  box-shadow:0 1px 2px rgba(27,32,39,.04);
  /* field-pickers.js 의 .fp-cal/.fp-times 는 강조색을 --fp-accent(기본 #2C51DB, gkrideus
     공용 accent)로 그린다 — 이 화면은 프라이빗(보라) 톤이 고정이라 여기서 덮는다. */
  --fp-accent:var(--svc-c,var(--private))}
.ams-main{min-width:0}

.ams{height:100%;box-sizing:border-box;display:flex;flex-direction:column;gap:16px}
.ams__tabs{display:flex;background:var(--hair-soft);border-radius:12px;padding:4px;gap:4px}
.ams__tab{flex:1;padding:12px 8px;border-radius:9px;font-size:.9rem;font-weight:600;color:var(--ink-soft);
  transition:background .2s var(--e-out),color .2s var(--e-out)}
.ams__tab.is-active{background:var(--svc-c,var(--private));color:#fff}

/* 칸 — 카페쇼 `.csf .place-field` 톤(연회색 바탕+아이콘)을 참고해 진하게 했다. 전에는
   흰 배경+얇은 테두리뿐이라 카드 안에서 칸의 존재감이 약했다("기본적 형태만" 지적). */
.ams__field{position:relative;border-radius:12px;padding:11px 14px;background:var(--hair-soft);
  border:1px solid transparent;transition:border-color .15s var(--e-out),background .15s var(--e-out)}
.ams__field label{display:block;font-size:.7rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:3px}
.ams__val{font-size:.98rem;font-weight:700;color:var(--ink)}
.ams__val.is-ph{color:var(--ink-faint);font-weight:500}
.ams__field--dest{cursor:pointer;display:flex;align-items:center;gap:11px}
.ams__field--dest:hover,.ams__field--dest.is-open{border-color:var(--svc-c,var(--private));background:var(--card)}
.ams__field--dest .ams__field-main{flex:1;min-width:0}
/* 목적지 배지 — 카페쇼 `.csf-badge` 참고. 공항 쪽은 이미 탭·헤딩에 이름이 있으니 목적지
   칸에만 핀 아이콘을 둔다. */
.ams__badge{flex:0 0 28px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:var(--svc-c,var(--private));color:#fff}
.ams__badge svg{width:15px;height:15px}
.ams__clear{flex:0 0 auto;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:var(--ink-faint)}
.ams__clear[hidden]{display:none}
.ams__clear:hover{background:var(--card)}

/* ── 이용 날짜·시간 ────────────────────────────────────────────────────────────
   2026-09-18 4차: 처음엔 카페쇼 dt-picker.js 를 포팅해 여기서 스타일을 직접 그렸는데,
   gkrideus 에 이미 movement 검색 허브·carry 검색바가 쓰는 같은 목적의 공용 모듈
   (hub/js/field-pickers.js attachCalendar/attachTimeList, 모바일 시트는 sheet.js)이
   있었다 — 사용자 지적("나머지 화면과 스타일을 맞춰야지")으로 그 모듈을 그대로 쓴다.
   캘린더(.fp-cal)·시간 목록(.fp-times)·바텀시트(.fp-sheet)의 스타일은 그 두 모듈이
   알아서 주입하므로 여기서 그리지 않는다(복제하면 두 화면이 또 갈라진다).
   여기서는 (1) 필드 두 개를 가로로 묶는 배치, (2) 그 모듈이 여는 팝오버 껍데기(.mv-pop
   — movement/carry 인라인 정의와 같은 값, 카드 안이라 z-index 만 더 낮춘다), (3) 강조색을
   이 화면 톤(프라이빗 보라)에 맞추는 --fp-accent 재정의만 맡는다. */
.ams__row{display:flex;gap:8px}
.ams__field--date,.ams__field--time{flex:1;min-width:0;cursor:pointer}
.ams__field--date.is-open,.ams__field--time.is-open{border-color:var(--svc-c,var(--private));background:var(--card)}

/* movement/carry 인라인 .mv-pop 과 같은 값 — 여기서만 예외적으로 복제한다(그 두 화면은
   인라인 <style> 이라 import 할 방법이 없다). 바꿀 때는 세 곳을 함께 볼 것. */
.mv-pop{position:absolute;top:calc(100% + 8px);left:0;width:240px;background:var(--card);
  border-radius:14px;box-shadow:0 16px 40px rgba(27,32,39,.18);padding:8px;z-index:60;
  display:none;max-height:min(62vh,520px);overflow-y:auto;overscroll-behavior:contain}
.ams__field.is-open .mv-pop{display:block}
.mv-pop__note{margin-top:8px;padding:0 8px 4px;font-size:.76rem;line-height:1.5;color:var(--ink-faint)}

/* ── 목적지 드롭다운 ──────────────────────────────────────────────────────────
   position:fixed(airport-mini-search.js 의 positionDropdown() 이 top/left/width 를
   뷰포트 좌표로 지정한다) — 카드 안 absolute 였을 때 카드 경계를 넘어 "차량 검색"
   버튼과 겹치던 문제의 해법(t-rise-up-connect-30 세션이 Connect 프로덕션 코드로 확인한
   원인·해법 — panel.js `_positionDropdown()`).
   내부 구조(검색창·카테고리 탭·목록)는 카페쇼 `.csf-pop`/`.csf-q`/`.csf-cats`/`.csf-opt`
   를 이 화면 규모로 줄인 것 — airport-mini-search.js buildPop()/renderList() 가 그린다. */
.ams-pop{display:none;position:fixed;background:var(--card);border:1px solid var(--hair);border-radius:14px;
  padding:10px;box-shadow:0 16px 40px rgba(27,32,39,.18);z-index:9999;max-height:380px;
  flex-direction:column;gap:8px}
.ams__field--dest.is-open .ams-pop{display:flex}
.ams-pop__q{width:100%;height:40px;padding:0 12px;font-size:.92rem;font-family:inherit;color:var(--ink);
  border:1px solid var(--hair);border-radius:10px;background:var(--bg);flex:none}
.ams-pop__q:focus{outline:none;border-color:var(--svc-c,var(--private))}
/* 카테고리 탭 — 카페쇼 `.csf-cats`(알약형) 참고. 검색어가 있으면 JS 가 hidden 을 건다. */
.ams-pop__cats{display:flex;gap:6px;flex:none;padding-bottom:8px;border-bottom:1px solid var(--hair-soft)}
.ams-pop__cats[hidden]{display:none}
.ams-pop__cat{flex:none;padding:6px 12px;border-radius:999px;font-size:.78rem;font-weight:700;
  color:var(--ink-soft);background:var(--hair-soft);transition:background .15s,color .15s}
.ams-pop__cat:hover{background:var(--hair)}
.ams-pop__cat.is-on{background:var(--svc-c,var(--private));color:#fff}
.ams-pop__list{overflow-y:auto;display:flex;flex-direction:column;gap:2px}
/* 목록 항목 — 카페쇼 `.csf-opt`(아이콘+이름+주소 두 줄) 참고. */
.ams-pop__item{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;
  padding:9px 10px;border-radius:9px;color:var(--ink)}
.ams-pop__item:hover{background:var(--hair-soft)}
.ams-pop__ico{flex:0 0 18px;width:18px;height:18px;margin-top:2px;color:var(--ink-faint)}
.ams-pop__t{font-size:.92rem;font-weight:600;line-height:1.4}
.ams-pop__t small{display:block;font-size:.78rem;font-weight:500;color:var(--ink-faint);margin-top:1px}
.ams-pop__empty{padding:18px 10px;font-size:.86rem;color:var(--ink-faint);line-height:1.6;text-align:center}

.ams__flight-row{display:flex;gap:8px}
.ams__flight-row input{flex:1;border:1px solid var(--hair);border-radius:10px;padding:9px 12px;font-size:.9rem;
  font-family:inherit;text-transform:uppercase;background:var(--card)}
.ams__flight-row button{padding:0 16px;border-radius:10px;background:var(--hair);font-size:.85rem;font-weight:600;color:var(--ink)}
.ams__flight-row button:disabled{opacity:.5}
.ams__flight-result{margin-top:8px;font-size:.8125rem;color:var(--ink-soft)}
/* 조회 전 빈 줄이 자리(여백 8px + 한 줄)를 차지하면 칸 아래쪽만 넓어 보인다 — 결과가 있을 때만 그린다. */
.ams__flight-result:empty{display:none}
.ams__flight-result.is-error{color:#C0392B}
.ams > .btn{width:100%;height:52px;font-size:1rem;background:var(--svc-c,var(--private));color:#fff;margin-top:auto}
.ams > .btn:hover{transform:translateY(-2px);filter:brightness(.94)}

/* 지도 — 카페쇼 `chauffeur-map.js`/`.csf-map` 패턴. 입력 수단이 아니라 고른 자리를
   비추기만 한다(지도를 눌러 좌표를 찍게 두지 않는다 — 존 밖 좌표가 들어오면 차량이
   0종으로 떨어지는데 참가자에게는 원인을 알 길이 없다). */
.ams-map{min-height:420px;height:100%;border-radius:14px;overflow:hidden;background:var(--hair-soft)}
.ams-map[hidden]{display:none}
.amsmap-pin{width:26px;height:26px;border-radius:50%;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35);
  display:grid;place-items:center;font-size:.74rem;font-weight:800;color:#fff;line-height:1}
.amsmap-pin--from{background:var(--ink)}
.amsmap-pin--to{background:var(--svc-c,var(--private))}

@media (max-width:900px){
  .ams-cols{grid-template-columns:minmax(0,1fr)}
  .ams-map{min-height:260px;height:260px;order:-1}
}
@media (max-width:480px){
  .ams-map{min-height:200px;height:200px}
  .ams-cols{padding:16px}
}