em { font-weight: bold; }

      #goodlugg-wrapper { display: flex; flex-direction: column; }
      .content-wrapper { flex: 1; display: flex; justify-content: center; line-height: 1.5; word-break: keep-all; }
      .display { width: 100%; max-width: 480px; display: flex; flex-direction: column; }

      /* ===== Progress ===== */
      .d2d-progress { display: flex; align-items: center; padding: 20px 20px 0; gap: 4px; }
      .d2d-progress-step { flex: 1; height: 4px; border-radius: 2px; background: #E8E8E8; transition: background 0.3s; }
      .d2d-progress-step.active { background: #512772; }
      .d2d-progress-step.done { background: #BBE22F; }
      .d2d-step-title { padding: 16px 20px 0; font-size: 22px; font-weight: 700; color: #222; }
      .d2d-step-subtitle { padding: 4px 20px 16px; font-size: 13px; color: #888; }

      /* ===== Step Container ===== */
      .d2d-step { display: none; padding: 0 20px 30px; animation: fadeIn 0.25s ease; }
      .d2d-step.active { display: block; }
      @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

      /* ===== Form Common ===== */
      .d2d-field { margin-bottom: 20px; }
      .d2d-label { font-size: 14px; font-weight: 600; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; color: #333; }
      .d2d-label .req { color: #FF5607; font-size: 12px; }
      .d2d-input { width: 100%; border: 1px solid #ddd; border-radius: 10px; padding: 12px 14px; font-size: 14px; background: #fff; outline: none; box-sizing: border-box; transition: border-color 0.2s; }
      .d2d-input:focus { border-color: #512772; background: #fff; }
      .d2d-input:disabled { background: #f5f5f5; color: #999; cursor: not-allowed; }
      .d2d-input::placeholder { color: #bbb; }
      .d2d-select { width: 100%; }
      .d2d-divider { height: 1px; background: #f0f0f0; margin: 8px 0 20px; }
      .d2d-section-label { font-size: 16px; font-weight: 700; color: #333; margin-bottom: 12px; }

      /* ===== Place Type Chips ===== */
      .d2d-place-types { display: flex; gap: 8px; flex-wrap: wrap; }
      .d2d-place-chip { padding: 10px 20px; border-radius: 20px; border: 1.5px solid #ddd; background: white; font-size: 14px; cursor: pointer; transition: 0.2s; white-space: nowrap; font-weight: 500; }
      .d2d-place-chip.selected { border-color: #512772; background: #512772; color: white; }

      /* ===== Sub-choice tabs (기타) ===== */
      .d2d-sub-tabs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
      .d2d-sub-tabs-row { flex-direction: row; }
      .d2d-sub-tabs-row .d2d-sub-tab { flex: 1 1 0; min-width: 0; padding: 14px 12px; text-align: center; }
      .d2d-sub-tabs-row .d2d-sub-tab-icon { position: static; display: block; left: auto; top: auto; transform: none; margin-bottom: 6px; }
      .d2d-sub-tab { position: relative; padding: 14px 16px 14px 52px; border-radius: 12px; border: 2px solid #E8E8E8; background: #FAFAFA; text-align: left; cursor: pointer; transition: 0.2s; font-size: 14px; font-weight: 500; }
/* 기타(ETC) 출발지: STAY 패널 재사용 + etc-mode 로 문구 분기·숙소 전용 요소 숨김(GL-2335).
   기본(STAY)은 .d2d-copy-stay 노출, etc-mode 면 .d2d-copy-etc 노출. 호스트 협의 동의는 ETC 에서 숨김. */
.d2d-copy-etc { display: none; }
#dep-stay-panel.etc-mode .d2d-copy-stay { display: none; }
#dep-stay-panel.etc-mode .d2d-copy-etc { display: inline; }
#dep-stay-panel.etc-mode #dep-stay-host { display: none !important; }
/* 호스트 연락처도 숙소 전용이다(GL-2343 #426) — 기타(ETC)는 호스트 개념이 없다.
   ⚠️ 이 숨김은 편의일 뿐 보장이 아니다. 값이 실제로 저장되지 않는 것은 서버 정규화가 담당한다. */
#dep-stay-panel.etc-mode #dep-stay-host-contact-field { display: none !important; }
/* 기타(ETC) 도착지(#549): 도착 STAY 패널 재사용. 문구는 dual-span(.d2d-copy-stay/.d2d-copy-etc)과
   블록 단위(.d2d-copy-*-block — 안내 박스처럼 통째로 바뀌는 것)로 분기한다.
   호스트 연락처 칸은 숨기지 않는다 — 기타에선 "받는 분 연락처"로 받는다(라벨만 바뀜). */
.d2d-copy-etc-block { display: none; }
#arr-stay-panel.etc-mode .d2d-copy-stay { display: none; }
#arr-stay-panel.etc-mode .d2d-copy-etc { display: inline; }
#arr-stay-panel.etc-mode .d2d-copy-stay-block { display: none !important; }
#arr-stay-panel.etc-mode .d2d-copy-etc-block { display: block; }
#arr-stay-panel.etc-mode #arr-stay-host { display: none !important; }
#arr-stay-panel:not(.etc-mode) #arr-etc-agree { display: none !important; }
      .d2d-sub-tab.selected { border-color: #512772; background: #F5F0FA; color: #512772; font-weight: 700; }
      .d2d-sub-tab-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 22px; line-height: 1; }
      .d2d-sub-tab-desc { display: block; font-size: 12px; color: #999; margin-top: 4px; font-weight: 400; }
      .d2d-sub-tab.selected .d2d-sub-tab-desc { color: #7B5FA0; }

      /* ===== Sub-tab inline expand (e.g., Nearby spot 검색 인라인 펼침) ===== */
      .d2d-sub-tab-expandable { cursor: pointer; }
      .d2d-sub-tab-expandable.selected .d2d-sub-tab-icon { top: 14px; transform: none; }
      .d2d-sub-tab-expand { display: none; margin-top: 14px; padding-top: 14px; border-top: 1px dashed #C8B8E0; cursor: default; }
      .d2d-sub-tab.selected .d2d-sub-tab-expand { display: block; }
      .d2d-sub-tab-expand-label { font-size: 12px; font-weight: 700; color: #512772; letter-spacing: 0.3px; text-transform: uppercase; margin-bottom: 8px; }
      .d2d-sub-tab-expand-helper { font-size: 12px; color: #6B4D8E; line-height: 1.5; margin-top: 8px; padding: 0 2px; }
      /* 만남 장소 카드가 노출되면 SEARCH 탭의 검색 input/도움말은 숨겨서 X 로 해제하기 전엔 재검색 차단 */
      .d2d-field:has(> #dep-meet-card.visible) #dep-meet-search-panel { display: none; }
      .d2d-field:has(> #dep-meet-card.visible) .d2d-sub-tab-expandable.selected .d2d-sub-tab-icon { top: 50%; transform: translateY(-50%); }

      /* ===== Google Places Autocomplete ===== */
      .d2d-loc-wrapper { position: relative; }
      .d2d-ac-list { position: absolute; top: 100%; left: 0; right: 0; background: white; border: 1px solid #ddd; border-top: none; border-radius: 0 0 10px 10px; max-height: 200px; overflow-y: auto; z-index: 50; display: none; }
      .d2d-ac-list.visible { display: block; }
      .d2d-ac-item { padding: 10px 14px; font-size: 13px; cursor: pointer; border-bottom: 1px solid #f0f0f0; }
      .d2d-ac-item:last-child { border-bottom: none; }
      .d2d-ac-item:hover { background: #f5f0fa; }
      .d2d-ac-item .ac-name { font-weight: 600; }
      .d2d-ac-item .ac-addr { color: #999; font-size: 12px; margin-top: 2px; }

      /* ===== Selected Place Card ===== */
      .d2d-place-card { display: none; background: #f5f0fa; border-radius: 12px; margin-top: 10px; overflow: hidden; }
      .d2d-place-card.visible { display: block; }
      .d2d-loc-wrapper:has(+ .d2d-place-card.visible) { display: none; }
      .d2d-place-card-info { padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; }
      .d2d-place-card-info .name { font-weight: 600; font-size: 14px; }
      .d2d-place-card-info .address { color: #666; font-size: 12px; margin-top: 2px; }
      .d2d-place-card-info .clear-btn { color: #999; cursor: pointer; font-size: 20px; padding: 0 4px; flex-shrink: 0; }
      .d2d-place-map { width: 100%; height: 180px; background: #e0e0e0; }
      /* GL-2198 역 만남 장소 카드: 지도와 거리뷰를 한 카드 안에 위아래로. 경계를 옅은 선으로 구분. */
      .d2d-station-roadview-label {
          padding: 8px 14px 6px; font-size: 12px; font-weight: 600; color: #512772;
          background: #f5f0fa; border-top: 1px solid #e6dcf0;
      }
      /* 만남 장소 사진 — 여러 장이면 가로 스와이프 스트립(옆 사진이 살짝 보여 스크롤을 암시), 1장이면 전체폭. */
      .d2d-station-photos { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch;
          scroll-snap-type: x mandatory; padding-bottom: 4px; }
      .d2d-station-photos .d2d-station-photo { flex: 0 0 auto; width: 82%; max-width: 320px; height: 200px;
          object-fit: cover; border-radius: 8px; scroll-snap-align: start; }
      .d2d-station-photos .d2d-station-photo:only-child { width: 100%; max-width: none; }
      /* 사진이 여러 장일 때만 노출되는 스와이프 위치 점(현재 보는 사진 표시). 1장이면 JS 가 비워둔다. */
      .d2d-station-photo-dots { display: flex; gap: 6px; justify-content: center; padding: 8px 0 2px; }
      .d2d-station-photo-dots i { width: 6px; height: 6px; border-radius: 999px; background: #d8cce4; transition: width .2s, background .2s; }
      .d2d-station-photo-dots i.on { width: 16px; background: #512772; }
      /* PC(넓은 화면)는 스와이프 대신 세로로 나열 — 좌우 스크롤/스냅/인디케이터 제거 */
      @media (min-width: 768px) {
        .d2d-station-photos { flex-direction: column; overflow-x: visible; scroll-snap-type: none; }
        .d2d-station-photos .d2d-station-photo { width: 100%; max-width: none; height: auto; scroll-snap-align: none; }
        .d2d-station-photo-dots { display: none; }
      }

      /* ===== Info Box ===== */
      .d2d-info-box { background: #F5F0FA; border-radius: 10px; padding: 12px 14px; font-size: 13px; color: #512772; line-height: 1.5; margin-top: 8px; }
      .d2d-warn-box { background: #FFF8F0; border: 1px solid #FFD4A8; border-radius: 10px; padding: 10px 14px; font-size: 12px; color: #B86800; line-height: 1.5; margin-top: 8px; }
      .d2d-meet-rules-title { font-size: 13px; font-weight: 700; margin-bottom: 6px; }
      .d2d-meet-rules-list > div { margin: 2px 0; }

      /* Additional notes 위쪽 간격 (이전 sub-panel 과 붙지 않도록) */
      .d2d-stay-notes-field { margin-top: 16px; }

      /* 파일 첨부 X(취소) 버튼 — 파일 선택 후 JS 가 inline-flex 로 표시 */
      .d2d-file-clear { display: none; cursor: pointer; color: #999; font-size: 18px; line-height: 1; padding: 2px 6px; border-radius: 50%; user-select: none; align-items: center; justify-content: center; }
      .d2d-file-clear:hover { color: #e53935; background: #f5f5f5; }

      /* textarea 는 브라우저 기본 폰트(monospace 등) 가 적용돼 placeholder 가 커 보이는 이슈 → 부모 폰트 강제 상속 */
      textarea.d2d-input { font-family: inherit; font-size: 14px; line-height: 1.5; resize: vertical; }
      .d2d-note-red { color: #e53935; font-size: 12px; line-height: 1.5; margin-top: 6px; white-space: pre-line; }
      .d2d-note-red em { font-style: italic; font-weight: 600; }
      .d2d-note-gray { color: #888; font-size: 12px; line-height: 1.5; margin-top: 6px; }
      /* 라벨과 입력칸 사이(위쪽) 에 놓이는 노트 — 기본형은 입력칸 아래 배치 기준이라 간격이 어긋남 */
      .d2d-note-gray.d2d-note-above { margin: 0 0 8px; }
      /* 입력칸(d2d-field) 바로 아래 붙는 노트 — field 의 margin-bottom(20px)이 사이에 끼어
         노트가 다음 섹션 라벨에 붙어 보인다. 위로 당기고 아래를 벌려 소속을 분명히 한다 */
      .d2d-note-red.d2d-note-after-field { margin: -12px 0 20px; }

      /* step4 호텔 예약자명 입력 + 동일 버튼 한 줄 (모바일은 stack) */
      .d2d-hotel-resv-name-row { display: flex; gap: 8px; align-items: stretch; }
      .d2d-hotel-resv-name-row .d2d-input { flex: 1; min-width: 0; }
      /* .d2d-btn 이 아래(226줄)에서 flex:1 을 주는데 명시도가 같아 뒤에 온 쪽이 이긴다.
         그래서 행 하위 선택자로 명시도를 올려 눌러야 버튼이 글자 폭만 차지한다 —
         안 그러면 입력칸과 버튼이 반반으로 갈려 버튼이 과하게 커진다 (#515 에서 발견). */
      .d2d-hotel-resv-name-row .d2d-hotel-resv-name-fill { flex: 0 0 auto; white-space: nowrap; padding: 0 14px; }
      @media (max-width: 480px) {
          .d2d-hotel-resv-name-row { flex-direction: column; gap: 6px; }
          .d2d-hotel-resv-name-row .d2d-hotel-resv-name-fill { align-self: stretch; padding: 10px 14px; }
      }

      /* ===== Checkbox Agreement ===== */
      .d2d-agree { display: flex; align-items: flex-start; gap: 10px; padding: 12px 0; cursor: pointer; }
      .d2d-agree-box { width: 20px; height: 20px; border-radius: 4px; border: 2px solid #ccc; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: 0.2s; margin-top: 1px; }
      .d2d-agree-box.checked { border-color: #512772; background: #512772; }
      .d2d-agree-box.checked::after { content: '\2713'; color: white; font-size: 13px; font-weight: 700; }
      .d2d-agree-text { font-size: 13px; color: #555; line-height: 1.4; }
      .d2d-agree-text a { color: #512772; text-decoration: underline; }
      /* 필수 동의 표시 (GL-2322 #397) — 동의문은 th:text 가 내용을 갈아끼우고 JS 가 문장별로 재조립하므로
         마크업 별표 대신 가상요소로 붙인다. 색은 입력 라벨의 .req 와 동일. */
      .d2d-agree-group.req-agree .d2d-agree-text::after { content: ' *'; color: #FF5607; font-weight: 700; }
      .d2d-terms-section { background: #f9f9f9; border-radius: 8px; padding: 16px; margin-top: 4px; }
      .d2d-terms-section .d2d-agree { padding: 8px 0; }
      .d2d-terms-section .d2d-agree:first-child { padding-bottom: 12px; border-bottom: 1px solid #eee; margin-bottom: 4px; }
      .d2d-agree-title { font-weight: 600; font-size: 14px; color: #333; }
      .d2d-agree-required { color: #512772; font-size: 12px; font-weight: 600; margin-right: 4px; }
      .d2d-agree-link { color: #999; font-size: 12px; margin-left: 6px; text-decoration: underline; cursor: pointer; }
      .d2d-agree-desc { margin-top: 6px; }
      .d2d-agree-desc-item { display: flex; align-items: flex-start; gap: 4px; font-size: 12px; color: #e53935; line-height: 1.6; }
      .d2d-agree-desc-icon { flex-shrink: 0; }

      /* ===== Conditional Panel ===== */
      .d2d-cond { display: none; margin-top: 16px; }
      .d2d-cond.visible { display: block; }

      /* ===== Luggage ===== */
      .d2d-lug-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #f0f0f0; }
      .d2d-lug-row:last-child { border-bottom: none; }
      .d2d-lug-info { flex: 1; }
      .d2d-lug-name { font-size: 14px; font-weight: 600; }
      .d2d-lug-desc { font-size: 12px; color: #999; margin-top: 2px; }
      .d2d-qty { display: flex; align-items: center; gap: 14px; }
      .d2d-qty-btn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid #ddd; background: white; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #512772; transition: 0.2s; }
      .d2d-qty-btn:hover { border-color: #512772; background: #f5f0fa; }
      .d2d-qty-val { font-size: 16px; font-weight: 700; min-width: 24px; text-align: center; }

      /* ===== DateTime ===== */
      .d2d-dt-row { display: flex; gap: 10px; }
      .d2d-dt-row .d2d-field { flex: 1; }
      .d2d-input.dt-trigger { cursor: pointer; background: white; }

      /* ===== Price Summary ===== */
      .d2d-price-box { background: #F7F8FC; border-radius: 12px; padding: 16px; margin-top: 8px; }
      .d2d-price-loading { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 0; color: #888; font-size: 14px; }
      .d2d-price-spinner { width: 18px; height: 18px; border: 2px solid #ddd; border-top-color: #512772; border-radius: 50%; animation: d2d-spin 0.6s linear infinite; }
      .d2d-price-spinner-inline { display: inline-block; width: 16px; height: 16px; vertical-align: middle; }
      /* 어두운(보라) 버튼 위에서 흰 스피너 — 다음 버튼 로딩 표시용 */
      .d2d-price-spinner-inline.on-dark { border-color: rgba(255,255,255,0.4); border-top-color: #fff; margin-right: 6px; }
      @keyframes d2d-spin { to { transform: rotate(360deg); } }
      .d2d-price-line { display: flex; justify-content: space-between; font-size: 14px; padding: 4px 0; color: #555; }
      .d2d-price-line .price { font-weight: 600; color: #333; }
      .d2d-price-line.total { border-top: 1px solid #ddd; margin-top: 8px; padding-top: 12px; font-weight: 700; font-size: 16px; color: #222; }
      .d2d-price-line.total .price { color: #512772; }
      .d2d-price-line.storage { color: #B86800; }

      /* ===== Pay Methods ===== */
      .d2d-pay-methods { display: flex; flex-direction: column; gap: 8px; }
      .d2d-pay-opt { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 10px; border: 1px solid #ddd; cursor: pointer; transition: 0.2s; font-size: 14px; }
      .d2d-pay-opt.selected { border-color: #512772; background: #F5F0FA; }
      .d2d-pay-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #ccc; transition: 0.2s; flex-shrink: 0; position: relative; }
      .d2d-pay-opt.selected .d2d-pay-radio { border-color: #512772; }
      .d2d-pay-opt.selected .d2d-pay-radio::after { content: ''; position: absolute; top: 3px; left: 3px; width: 8px; height: 8px; border-radius: 50%; background: #512772; }

      /* ===== Card Input ===== */
      .d2d-card-panel { display: none; margin-top: 12px; padding: 16px; background: #F7F8FC; border-radius: 12px; }
      .d2d-card-panel.visible { display: block; }
      .d2d-card-row { display: flex; gap: 6px; margin-bottom: 10px; }
      .d2d-card-row .d2d-input { text-align: center; padding: 10px 8px; }
      .d2d-card-half { display: flex; gap: 10px; }
      .d2d-card-half > div { flex: 1; }

      /* ===== Email / Phone ===== */
      .email-input-wrapper { position: relative; }
      .d2d-phone-row { display: flex; gap: 8px; }
      /* 국가코드 칸은 입력칸(.d2d-input)과 같은 좌우 여백·자간. 최소폭 = 가장 긴 안내문구(영어 "Country code")가
         들어가는 폭이라, 국가를 골라도 칸 폭이 바뀌지 않아 옆 번호칸이 움직이지 않는다 (#518) */
      .d2d-phone-code { border: 1px solid #ddd; border-radius: 10px; padding: 12px 14px; font-size: 14px; letter-spacing: normal; background: #fff; outline: none; min-width: 126px; flex: 0 0 auto; white-space: nowrap; cursor: pointer; }
      .d2d-phone-code.is-empty { color: #bbb; }
      /* 비어 있을 때는 다른 입력칸 placeholder 와 같은 크기 — 공통 규칙이 768px 이하에서만 12px 이다(goodlugg_style.css input::placeholder).
         글씨가 작아지는 만큼 최소폭도 줄인다(12px "Country code" 가 들어가는 112px). */
      @media all and (max-width: 768px) { .d2d-phone-code { min-width: 112px; } .d2d-phone-code.is-empty { font-size: 12px; } }
      .d2d-phone-row .d2d-input { flex: 1; min-width: 0; }

      /* ===== Step Buttons (inline) ===== */
      .d2d-actions { display: flex; gap: 10px; margin-top: 10px; padding: 0 20px 30px; }
      .d2d-btn { flex: 1; padding: 14px; border-radius: 10px; border: none; font-size: 15px; font-weight: 600; cursor: pointer; transition: 0.2s; }
      .d2d-btn-prev { background: #F0F0F0; color: #555; flex: 0 0 auto; padding: 14px 24px; }
      .d2d-btn-next { background: #512772; color: white; }
      .d2d-btn-next:hover { opacity: 0.9; }
      .d2d-btn-pay { background: #BBE22F; color: #222; }
      .d2d-btn-pay:hover { background: #A8CF1A; }
      /* 보조 액션 버튼 (적용/파일 첨부/예약자와 동일 등). 녹색은 결제 CTA 전용이라 D2D 메인 브랜드색인 보라 outline 사용. */
      .d2d-btn-outline { background: #fff; color: #512772; border: 1.5px solid #512772; }
      .d2d-btn-outline:hover:not(:disabled) { background: #F5F0FA; }
      .d2d-btn-outline:disabled { background: #f5f5f5; color: #bbb; border-color: #e0e0e0; cursor: not-allowed; }

      /* ===== Discount Applied Chips ===== */
      .d2d-discount-applied { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
      .d2d-discount-applied:empty { display: none; }
      .d2d-applied-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; }
      .d2d-applied-code { font-size: 13px; color: #374151; font-weight: 500; }
      .d2d-applied-remove { background: none; border: none; color: #9ca3af; font-size: 18px; cursor: pointer; padding: 0 4px; line-height: 1; }
      .d2d-applied-remove:hover { color: #ef4444; }

      /* ===== Desk Location Info ===== */
      /* ===== Map Picker (중앙 고정 핀) ===== */
      .d2d-map-picker { position: relative; }
      .d2d-map-picker .center-pin {
          position: absolute; top: 50%; left: 50%;
          transform: translate(-50%, -100%);
          z-index: 400; pointer-events: none;
          filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
      }

      /* ===== Flight Number Feedback ===== */
      .field-feedback { font-size: 12px; margin-top: 4px; display: block; min-height: 18px; }
      .field-feedback.success { color: #28a745; }
      .field-feedback.error { color: #dc3545; }

      /* ===== Summary ===== */
      .d2d-summary { padding: 0 4px; }
      .d2d-summary-section { margin-bottom: 16px; }
      .d2d-summary-section-title { font-size: 13px; font-weight: 700; color: #512772; margin-bottom: 8px; }
      .d2d-summary-item { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; }
      .d2d-summary-item-label { color: #888; }
      .d2d-summary-item-value { color: #222; font-weight: 500; text-align: right; max-width: 60%; word-break: keep-all; overflow-wrap: break-word; }
      /* delivery info: 출발지/도착지 구분 배경 */
      .d2d-summary-group { border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; }
      .d2d-summary-group-dep { background: #F5F0FA; }
      .d2d-summary-group-arr { background: #EEF7F0; }

      @media screen and (max-width: 375px) {
          .d2d-place-chip { padding: 8px 14px; font-size: 13px; }
          .d2d-sub-tab { padding: 10px 12px 10px 44px; font-size: 13px; }
          .d2d-sub-tab-icon { left: 12px; font-size: 20px; }
      }

      /* ===== Location Select Button / Summary Card (KD 패턴 재사용) ===== */
      .location-select-button {
          background: #f8f9fa;
          border: 2px dashed #dee2e6;
          border-radius: 12px;
          padding: 20px;
          margin: 0 0 20px;
          text-align: center;
          cursor: pointer;
          transition: all 0.3s ease;
          position: relative;
          overflow: hidden;
      }
      .location-select-button::before {
          content: '';
          position: absolute;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100%;
          background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
          transition: left 0.5s;
      }
      .location-select-button:hover::before { left: 100%; }
      .location-select-button:hover {
          border-color: #667eea;
          border-style: solid;
          background: #fafbff;
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
      }
      .location-select-content {
          position: relative;
          z-index: 1;
          display: inline-flex;
          align-items: center;
      }
      .location-select-icon {
          font-size: 24px;
          opacity: 0.7;
          transition: all 0.3s ease;
          margin-right: 10px;
      }
      .location-select-button:hover .location-select-icon { opacity: 1; transform: scale(1.1); }
      .location-select-title { font-size: 16px; font-weight: 600; color: #333; }

      .selected-location {
          background: #f8f9fa;
          border: 2px solid #667eea;
          border-radius: 12px;
          padding: 20px;
          display: none;
          text-align: left;
          margin-bottom: 20px;
      }
      .selected-location.active {
          display: block;
          animation: d2dSlideInUp 0.3s ease;
      }
      .selected-location-label {
          font-size: 12px;
          color: #667eea;
          margin-bottom: 10px;
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: 0.5px;
      }
      .selected-location-value { display: flex; align-items: start; gap: 12px; }
      .selected-location-icon { font-size: 24px; flex-shrink: 0; }
      .selected-location-info { flex: 1; min-width: 0; }
      .selected-location-name-wrapper { display: flex; align-items: start; gap: 10px; margin-bottom: 4px; }
      .selected-location-name {
          font-size: 16px;
          font-weight: 600;
          color: #333;
          line-height: 24px;
          word-break: keep-all;
          overflow-wrap: break-word;
      }
      /* 주문 요약 Detail 행의 위치 안내 버튼 줄 (GL-2456) */
      .d2d-summary-guide { margin-top: 6px; }
      .d2d-summary-guide .selected-location-view-location-button { display: inline-block; }
      /* 공항 터미널 위치 안내 버튼 (GL-2456) — KD 선택 카드와 같은 모양 */
      .selected-location-view-location-button {
          border: 1px solid #667eea;
          color: #667eea;
          border-radius: 16px;
          padding: 4px 8px;
          font-size: 12px;
          font-weight: 500;
          line-height: 1.4;
          white-space: nowrap;
          text-decoration: none;
          flex-shrink: 0;
          height: fit-content;
          transition: background-color 0.2s ease, color 0.2s ease;
      }
      /* 공통 a:hover(검정 글씨)를 덮는다 — 파란 배경 + 흰 글씨 */
      .selected-location-view-location-button:hover,
      .selected-location-view-location-button:focus-visible {
          background: #667eea;
          color: #fff;
          text-decoration: none;
      }
      .selected-location-address {
          font-size: 13px;
          color: #666;
          line-height: 1.4;
          word-break: keep-all;
          overflow-wrap: break-word;
      }
      .selected-location-change-btn {
          background: #667eea;
          color: white;
          border: none;
          padding: 8px 14px;
          border-radius: 8px;
          font-size: 12px;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.2s ease;
          flex-shrink: 0;
          height: fit-content;
      }
      .selected-location-change-btn:hover { background: #5a6fd8; transform: translateY(-1px); }
      .selected-location-change-btn:active { transform: translateY(0); }

      /* 호텔 선택 카드 안내 + 주의 뱃지 (GL-2463) — KD koreaDelivery.css 와 같은 모양 */
      .selected-location-hotel-notice {
          margin-top: 10px;
          font-size: 13px;
          color: #495057;
          line-height: 1.5;
      }
      .caution-badge {
          display: inline-flex;
          align-items: center;
          gap: 4px;
          margin-top: 6px;
          padding: 3px 10px;
          border-radius: 12px;
          background: #fff4d6;
          border: 1px solid #f5c542;
          color: #8a5a00;
          font-size: 12px;
          font-weight: 600;
          line-height: 1.4;
      }

      @keyframes d2dSlideInUp {
          from { opacity: 0; transform: translateY(20px); }
          to { opacity: 1; transform: translateY(0); }
      }

      @media (max-width: 480px) {
          .location-select-button,
          .selected-location { padding: 16px; }
          .location-select-icon { font-size: 28px; }
          .location-select-title { font-size: 15px; }
          .selected-location-value { gap: 10px; }
          .selected-location-icon { font-size: 20px; }
          .selected-location-name { font-size: 15px; line-height: 20px; }
          .selected-location-address { font-size: 12px; }
          .selected-location-change-btn { padding: 6px 10px; font-size: 11px; }
      }

      /* alertModal (Bootstrap modal) 가 D2D location bottomsheet 위에 뜨도록 z-index 우선순위 부여.
         바텀시트 .bottomsheet z-index: 2001 / .bottomsheet-overlay: 2000. */
      .modal { z-index: 2100; }
      .modal-backdrop { z-index: 2090; }

      /* ===== 도착지 유형 카드: 이름 아래 작은 설명 =====
         카드 높이는 설명 없는 카드와 같게 둔다 — 이름 줄 높이를 줄이고, 늘어난 만큼(12px)은 위아래 여백에서 뺀다.
         여백 값 자체는 건드리지 않아 화면 크기별 여백(16px / 12px)이 바뀌어도 같이 따라간다. */
      .d2d-type-compact .bottomsheet-item-content { margin-top: -6px; margin-bottom: -6px; }
      .d2d-type-compact .bottomsheet-item-name { line-height: 21px; margin-bottom: 2px; }
      .d2d-type-compact .bottomsheet-item-desc {
        font-size: 11px; line-height: 14px; min-height: 14px; color: #888;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      }

      /* ===== Location Bottomsheet 페이지 토글 ===== */
      .d2d-loc-page { display: none; padding: 8px 0 16px; }
      .bottomsheet[data-active-page="types"]        .d2d-loc-page[data-page="types"],
      .bottomsheet[data-active-page="airports"]     .d2d-loc-page[data-page="airports"],
      .bottomsheet[data-active-page="terminals"]    .d2d-loc-page[data-page="terminals"],
      .bottomsheet[data-active-page="stations"]     .d2d-loc-page[data-page="stations"],
      .bottomsheet[data-active-page="cruises"]      .d2d-loc-page[data-page="cruises"],
      .bottomsheet[data-active-page="hotelSearch"]  .d2d-loc-page[data-page="hotelSearch"],
      .bottomsheet[data-active-page="staySearch"]   .d2d-loc-page[data-page="staySearch"],
      .bottomsheet[data-active-page="etcSearch"]    .d2d-loc-page[data-page="etcSearch"],
      .bottomsheet[data-active-page="placePreview"] .d2d-loc-page[data-page="placePreview"] {
          display: block;
      }

      /* 검색 페이지: 입력 + autocomplete 를 inline 으로 (absolute 가 아니라 normal flow).
         좌우 padding 은 .bottomsheet-content 가 이미 20px 가지고 있으므로 0. */
      .d2d-loc-bs-search { padding: 4px 0 16px; }
      .d2d-loc-bs-search .d2d-loc-wrapper { position: static; }
      .d2d-ac-list.d2d-ac-bs {
          position: static;
          border: 1px solid #ddd;
          border-radius: 8px;
          margin-top: 8px;
          max-height: 50vh;
          overflow-y: auto;
          z-index: auto;
      }

      /* 검색 페이지에서는 바텀시트 컨텐츠 영역을 안정적으로 확보 — 모바일 전용.
         원래 PC 미디어쿼리(70vh)보다 크게 잡으려던 규칙인데, #520 에서 PC 는 kd/bottomsheet.css 의
         공통 규칙(내용 기반 높이, 최대 88vh)을 쓰므로 PC 에서는 빠진다. 이 파일이 나중에 로드되고
         셀렉터도 더 구체적이라 그대로 두면 D2D 검색·미리보기 단계만 PC 에서 80vh 로 묶인다.
         경계는 kd/bottomsheet.css 의 (min-width: 768px) 과 정확히 반대가 되도록 not 으로 쓴다. */
      @media not all and (min-width: 768px) {
          .bottomsheet[data-active-page="hotelSearch"],
          .bottomsheet[data-active-page="staySearch"],
          .bottomsheet[data-active-page="etcSearch"],
          .bottomsheet[data-active-page="placePreview"] {
              max-height: 80vh;
          }
          .bottomsheet[data-active-page="hotelSearch"] .bottomsheet-content,
          .bottomsheet[data-active-page="staySearch"] .bottomsheet-content,
          .bottomsheet[data-active-page="etcSearch"] .bottomsheet-content,
          .bottomsheet[data-active-page="placePreview"] .bottomsheet-content {
              max-height: calc(80vh - 80px);
          }
      }

      /* 호텔/숙소 미리보기 페이지 (좌우 padding 은 .bottomsheet-content 의 20px 만) */
      .d2d-loc-bs-preview { padding: 8px 0 16px; }
      .d2d-loc-preview-card { margin-bottom: 16px; }
      .d2d-loc-preview-name { font-size: 17px; font-weight: 700; color: #222; line-height: 1.3; margin-bottom: 6px; }
      .d2d-loc-preview-addr { font-size: 13px; color: #666; line-height: 1.4; word-break: keep-all; overflow-wrap: break-word; margin-bottom: 12px; }
      .d2d-loc-preview-map { width: 100%; height: 240px; border-radius: 12px; overflow: hidden; background: #f0f0f0; }
      .d2d-loc-bs-preview-actions { display: flex; gap: 8px; padding-bottom: env(safe-area-inset-bottom); }
      .d2d-loc-bs-btn-secondary, .d2d-loc-bs-btn-primary {
          flex: 1;
          border: none;
          border-radius: 12px;
          padding: 14px;
          font-size: 15px;
          font-weight: 700;
          cursor: pointer;
          transition: background 0.2s;
      }
      .d2d-loc-bs-btn-secondary { background: #eee; color: #333; }
      .d2d-loc-bs-btn-secondary:hover { background: #ddd; }
      .d2d-loc-bs-btn-primary { background: #512772; color: #fff; }
      .d2d-loc-bs-btn-primary:hover { background: #3f1f5a; }

      /* ===== 실시간 가격 박스 (KD style 1:1 매핑, step3 진입부터 노출) ===== */
      .d2d-price-container {
          display: none;
          position: fixed;
          bottom: 0;
          left: 0;
          right: 0;
          background: #fff;
          border-radius: 20px 20px 0 0;
          box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1);
          padding: 10px 20px calc(20px + env(safe-area-inset-bottom));   /* 홈 인디케이터 safe-area */
          z-index: 999;
          margin: 0;
          box-sizing: border-box;
      }
      .d2d-price-container.active { display: block; }
      .d2d-price-container-handle {
          display: flex;
          justify-content: center;
          margin-bottom: 10px;
      }
      .d2d-price-container-handle > span {
          padding: 4px 16px;
          font-size: 18px;
          line-height: 1;
          color: #667eea;
          cursor: pointer;
          user-select: none;
      }
      .d2d-expand-price-details { display: block; }
      .d2d-collapse-price-details { display: none; }
      .d2d-price-section h3 {
          font-size: 14px;
          margin-bottom: 15px;
          margin-top: 4px;
          color: #333;
          text-align: center;
      }
      .d2d-price-details {
          display: block;
          max-height: 0;
          opacity: 0;
          overflow: hidden;
          transform: translateY(-10px);
          transition: max-height 0.4s ease, opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s;
      }
      .d2d-price-details.active {
          max-height: 500px;
          opacity: 1;
          transform: translateY(0);
      }
      .d2d-price-details .d2d-divider { margin-bottom: 16px; }
      .d2d-price-breakdown { font-size: 12px; margin-bottom: 15px; }
      .d2d-price-empty { text-align: center; color: grey; padding: 20px; font-size: 14px; }
      .d2d-price-breakdown-section { margin-bottom: 20px; }
      .d2d-price-breakdown-section-title {
          font-size: 14px;
          font-weight: 600;
          color: #333;
          margin-bottom: 12px;
      }
      .d2d-price-breakdown-section-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 8px;
          padding: 0;
      }
      .d2d-price-breakdown-section-item .item-text { font-size: 12px; color: #333; flex: 1; }
      .d2d-price-breakdown-section-item .item-price { font-size: 12px; color: #333; font-weight: 500; }
      /* 배송료 줄 다음에 오는 보관료 제목은 띄운다 */
      .d2d-price-breakdown-section-item + .d2d-price-breakdown-section-title { margin-top: 16px; }
      /* 보관 1일 무료로 대체된 정가 줄 */
      .d2d-price-breakdown-section-item.is-superseded .item-text,
      .d2d-price-breakdown-section-item.is-superseded .item-price { color: #999; text-decoration: line-through; }
      .d2d-price-breakdown-section-item.is-discount .item-text,
      .d2d-price-breakdown-section-item.is-discount .item-price { color: #e74c3c; }
      .d2d-price-total-section { margin-bottom: 16px; }
      .d2d-original-price-container {
          margin-bottom: 10px;
          color: grey;
          display: none;
          justify-content: space-between;
      }
      .d2d-original-price-container.active { display: flex; }
      .d2d-original-price-label { font-size: 12px; }
      .d2d-original-price { font-size: 12px; text-decoration: line-through; }
      .d2d-final-total {
          display: flex;
          justify-content: space-between;
          align-items: center;
      }
      .d2d-final-label { font-size: 14px; font-weight: 600; color: #333; }
      .d2d-final-price { font-size: 16px; font-weight: bold; color: #667eea; }

      /* 모바일: 가격 박스가 컨텐츠 가리지 않도록 하단 여백 확보 */
      @media (max-width: 768px) {
          .display { padding-bottom: 140px; }
      }

      /* 데스크톱: KD 와 동일하게 컨텐츠 옆 sticky 우측 박스 */
      @media (min-width: 769px) {
          .d2d-price-container {
              position: sticky;
              top: 100px;
              bottom: auto;
              left: auto;
              right: auto;
              width: 360px;
              background: white;
              border-radius: 20px;
              padding: 30px;
              height: fit-content;
              box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
              margin: 24px 0 24px 24px;
              align-self: flex-start;
              flex-shrink: 0;
          }
          .d2d-price-container-handle { display: none; }
          .d2d-price-details {
              max-height: none;
              opacity: 1;
              transform: none;
          }
          .d2d-price-section h3 { font-size: 18px; margin-bottom: 15px; }
          .d2d-price-breakdown { font-size: 14px; margin-bottom: 16px; }
          .d2d-price-breakdown-section-title { font-size: 16px; }
          .d2d-price-breakdown-section-item .item-text,
          .d2d-price-breakdown-section-item .item-price { font-size: 15px; }
          .d2d-final-label { font-size: 17px; }
          .d2d-final-price { font-size: 20px; }
      }

      /* =========================================================================
       * STAY+MEET 만남지점 AI 추천 (GL-2195 / #237)
       * airbnb_meetup_V5_AI_redesign 목업을 그대로 이식. 모든 규칙은 .d2d-meet-ai 로
       * 스코프해 예약 폼의 다른 스타일과 격리한다. 브랜드 변수도 이 스코프 안에서만 정의.
       * ========================================================================= */
      .d2d-meet-ai {
        --gl-purple-800: #3a1e56; --gl-purple-700: #452373; --gl-purple-600: #512a72;
        --gl-purple-300: #b499cc; --gl-purple-200: #d8c9e4; --gl-purple-100: #ece3f2; --gl-purple-050: #f6f1fa;
        --gl-lime-900: #4e4a10; --gl-lime-500: #c7c22e; --gl-lime-300: #e1de86; --gl-lime-100: #f6f5d7;
        --gl-orange-500: #ff7a45; --gl-ink: #1a1420; --gl-ink-2: #3d3048; --gl-ink-3: #6a5d74;
        --gl-line: #e7e1ec; --gl-bg-alt: #f4f0f7; --gl-success: #3aa874; --gl-danger: #d84141;
        --gl-ai-bg: #e8f08a; --gl-ease: cubic-bezier(.2,.7,.2,1);
        --gl-font-ui: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        --gl-font-display: 'Pretendard', sans-serif;
      }

      /* method hint (req1) — '만나서 전달' 선택 시 그 아래 노출.
         ⚠️ 노출 토글 클래스는 반드시 .d2d-shown (부트스트랩이 전역 .show{display:block!important} 를 갖고 있어
         .show 를 쓰면 display:flex 가 !important 에 져서 레이아웃이 깨진다 — 별 아이콘이 텍스트 위로 밀렸던 원인). */
      .d2d-meet-ai .ai-method-hint {
        display: none; gap: 8px; align-items: flex-start; padding: 12px 14px;
        background: var(--gl-ai-bg); border-radius: 12px; margin-bottom: 14px;
        font: 500 12px/1.45 var(--gl-font-ui); color: var(--gl-purple-800);
      }
      .d2d-meet-ai .ai-method-hint.d2d-shown { display: flex; }
      .d2d-meet-ai .ai-method-hint .sp { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; }
      .d2d-meet-ai .ai-method-hint b { font-weight: 700; }

      /* AI analyzing (req2) */
      .d2d-meet-ai .ai-box-wrap { display: none; margin-bottom: 14px; }
      .d2d-meet-ai .ai-box-wrap.d2d-shown { display: block; }
      /* radius 는 이 파일의 카드/박스 기본값(12px, .d2d-sub-tab·.d2d-place-card 와 동일)에 맞춘다.
         목업에서 20px 로 넘어왔던 것을 맞춘 것 — 이 영역만 모서리가 둥글어 주변과 겉돌았다.
         ⚠️ .ai-analyzing 과 .ai-complete 는 같은 자리에서 교체되므로 값이 항상 같아야 한다.
            하나만 바꾸면 분석이 끝나는 순간 박스 모서리가 튄다. */
      .d2d-meet-ai .ai-analyzing {
        background: var(--gl-ai-bg); border-radius: 12px; padding: 16px;
        display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden;
      }
      .d2d-meet-ai .ai-analyzing::before {
        content: ""; position: absolute; inset: 0;
        background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.6) 50%, transparent 70%);
        background-size: 200% 100%; animation: d2dMeetSweep 1.8s linear infinite; pointer-events: none;
      }
      @keyframes d2dMeetSweep { 0% { background-position: 200% 0; } 100% { background-position: -50% 0; } }
      .d2d-meet-ai .ai-head { display: flex; align-items: center; gap: 10px; position: relative; z-index: 1; }
      .d2d-meet-ai .ai-spark { width: 30px; height: 30px; border-radius: 999px; background: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; animation: d2dMeetPulse 1.4s ease-in-out infinite; }
      @keyframes d2dMeetPulse {
        0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(81,42,114,.3); }
        50% { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(81,42,114,0); }
      }
      .d2d-meet-ai .ai-title { font: 600 16px/1 var(--gl-font-ui); color: var(--gl-ink); letter-spacing: -.01em; }
      .d2d-meet-ai .ai-title b { font-weight: 800; }
      .d2d-meet-ai .ai-beta { font: 800 10px/1 var(--gl-font-ui); letter-spacing: .08em; color: var(--gl-orange-500); background: #fff; border: 1.5px solid var(--gl-orange-500); padding: 4px 8px; border-radius: 999px; margin-left: auto; }
      .d2d-meet-ai .ai-status { font: 600 13px/1.3 var(--gl-font-ui); color: var(--gl-ink-2); position: relative; z-index: 1; }
      .d2d-meet-ai .ai-status b { font-weight: 800; }
      .d2d-meet-ai .ai-bar { position: relative; z-index: 1; height: 6px; border-radius: 999px; background: rgba(81,42,114,.15); overflow: hidden; }
      .d2d-meet-ai .ai-bar i { display: block; height: 100%; background: var(--gl-purple-600); border-radius: 999px; width: 5%; transition: width .6s var(--gl-ease); }
      .d2d-meet-ai .ai-progress { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; }
      .d2d-meet-ai .ai-progress .check { display: flex; align-items: center; gap: 10px; font: 600 12px/1.3 var(--gl-font-ui); color: var(--gl-purple-800); background: #fff; padding: 10px 12px; border-radius: 12px; transition: all .3s var(--gl-ease); }
      .d2d-meet-ai .ai-progress .check .ic { width: 18px; height: 18px; border-radius: 999px; background: var(--gl-success); color: #fff; display: flex; align-items: center; justify-content: center; font: 800 11px/1 var(--gl-font-ui); flex-shrink: 0; }
      .d2d-meet-ai .ai-progress .check.now { box-shadow: 0 0 0 2px rgba(81,42,114,.15); }
      .d2d-meet-ai .ai-progress .check.now .ic { background: transparent; border: 2px solid var(--gl-purple-600); border-top-color: transparent; animation: d2dMeetSpin 1s linear infinite; }
      .d2d-meet-ai .ai-progress .check.todo { opacity: .5; }
      .d2d-meet-ai .ai-progress .check.todo .ic { background: transparent; border: 2px dashed var(--gl-purple-300); }
      @keyframes d2dMeetSpin { to { transform: rotate(360deg); } }
      .d2d-meet-ai .ai-foot-note { font: 500 11px/1.4 var(--gl-font-ui); color: var(--gl-purple-800); opacity: .8; position: relative; z-index: 1; }

      /* AI complete banner */
      .d2d-meet-ai .ai-complete { background: var(--gl-ai-bg); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 12px; } /* .ai-analyzing 과 같은 값 유지 */
      .d2d-meet-ai .ai-banner { display: flex; gap: 12px; align-items: flex-start; padding: 2px 2px 4px; }
      .d2d-meet-ai .ai-banner .spark { width: 48px; height: 48px; border-radius: 999px; background: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
      .d2d-meet-ai .ai-banner .spark svg { width: 24px; height: 24px; }
      .d2d-meet-ai .ai-banner .lab { font: 700 15px/1.25 var(--gl-font-ui); color: var(--gl-ink); letter-spacing: -.005em; }
      .d2d-meet-ai .ai-banner .lab b { font-weight: 800; }
      .d2d-meet-ai .ai-banner .msg { font: 400 13px/1.45 var(--gl-font-ui); margin-top: 6px; color: var(--gl-ink-2); }
      .d2d-meet-ai .crit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
      .d2d-meet-ai .crit { display: flex; align-items: center; gap: 6px; background: var(--gl-lime-100); border: 1px solid var(--gl-lime-300); padding: 8px 10px; border-radius: 999px; font: 700 11px/1 var(--gl-font-ui); color: var(--gl-lime-900); }
      .d2d-meet-ai .crit .em { font-size: 13px; line-height: 1; }

      /* Candidate cards (req3) — 점수/추천/부정사유 없음 */
      .d2d-meet-ai .cands-wrap { display: none; flex-direction: column; gap: 14px; }
      .d2d-meet-ai .cands-wrap.d2d-shown { display: flex; animation: d2dMeetFadeIn .5s var(--gl-ease); }
      @keyframes d2dMeetFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
      .d2d-meet-ai .cands { display: flex; flex-direction: column; gap: 10px; }
      /* 후보 카드 = 바로 위 만남 방식 탭(.d2d-sub-tab, 12px)과 같은 역할의 '선택하는 카드'다.
         목업의 16px 를 그대로 두면 같은 화면에서 같은 성격의 카드가 서로 다른 모서리를 갖는다. */
      .d2d-meet-ai .cand { background: #fff; border: 1.5px solid var(--gl-line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; cursor: pointer; transition: all .18s var(--gl-ease); }
      .d2d-meet-ai .cand:hover { border-color: var(--gl-purple-200); }
      .d2d-meet-ai .cand.selected { border-color: var(--gl-purple-600); background: var(--gl-purple-050); box-shadow: 0 0 0 3px rgba(81,42,114,.12); }
      .d2d-meet-ai .cand .row { display: flex; gap: 12px; align-items: flex-start; }
      .d2d-meet-ai .cand .cand-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--gl-bg-alt); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
      .d2d-meet-ai .cand .info { flex: 1; min-width: 0; }
      .d2d-meet-ai .cand .tt { font: 700 14px/1.2 var(--gl-font-ui); color: var(--gl-ink); }
      .d2d-meet-ai .cand .ts { font: 500 12px/1.35 var(--gl-font-ui); color: var(--gl-ink-3); margin-top: 3px; }
      /* SEARCH 카드: 기존 검색 UI를 카드 안에 그대로 유지. 선택 시에만 검색 패널 노출
         (id 셀렉터가 booking.css .d2d-sub-tab-expand{display:none} 보다 우선) */
      .d2d-meet-ai #dep-meet-search-panel { display: none; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--gl-line); }
      .d2d-meet-ai #dep-meet-search-panel.visible { display: block; }
      .d2d-meet-ai .cand .d2d-loc-wrapper { margin-top: 4px; }
      .d2d-meet-ai .cand .d2d-place-card { margin-top: 6px; }
      /* 이미 장소가 정해지면(편의점 자동추천 포함) 검색창/안내는 숨기고 카드만. X 로 지우면 다시 노출. */
      .d2d-meet-ai #dep-meet-search-panel:has(#dep-meet-card.visible) .d2d-loc-wrapper,
      .d2d-meet-ai #dep-meet-search-panel:has(#dep-meet-card.visible) .d2d-sub-tab-expand-helper { display: none; }
      /* 도보 거리/시간 — 지도 바로 아래 */
      /* ── 만남 장소 카드 내부 (#237 디자인 A) ──────────────────────────────
         거리뷰·지도를 10px 띄우고 각각 라운드 → 두 서비스 로고(kakao/NAVER)가 경계에 맞붙어
         겹치던 문제와, 거리뷰 하단이 잘려 보이던 문제를 함께 없앤다.
         색/굵기는 이 파일의 기존 카드 토큰(#f5f0fa, #512772, #666)에 맞춘다 — 이 영역만 별도
         팔레트(--gl-*)를 쓰던 것이 주변과 겉돌던 원인이다. */
      /* 카드 헤더(장소명/주소)를 흰 사각형으로 세운다.
         아래 여백(10px)은 거리뷰↔지도 사이 간격(.meet-media 의 gap)과 같은 값 — 카드 안의 블록들이
         일정한 리듬으로 떨어져 보이게. 한쪽만 바꾸면 어긋나므로 두 값은 같이 움직여야 한다. */
      .d2d-meet-ai #dep-meet-card .d2d-place-card-info {
        margin: 10px; border-radius: 10px;
        background: #fff;
      }

      .d2d-meet-ai .meet-media { display: flex; flex-direction: column; gap: 10px; padding: 0 10px 10px; }
      .d2d-meet-ai .meet-media .meet-roadview,
      .d2d-meet-ai .meet-media .d2d-map-picker { border-radius: 8px; overflow: hidden; }

      /* 도보 거리/시간 — 지도와 가장 밀접한 정보라 지도 바로 아래에 붙인다. */
      .d2d-meet-ai .sel-walkinfo:empty { display: none; }
      .d2d-meet-ai .sel-walkinfo { display: flex; gap: 14px; flex-wrap: wrap; padding: 0 4px; font: 600 13px/1.3 var(--gl-font-ui); color: #3d3048; }

      /* 검색한 곳에서 실제로 옮겨졌을 때만 노출 — 조용히 바뀌면 사용자가 모른 채 예약이 넘어간다. */
      .d2d-meet-ai .meet-adjusted {
        display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
        background: #FFF8F0; border: 1px solid #FFD4A8; border-radius: 8px;
        padding: 9px 11px; font-size: 12px; line-height: 1.45; color: #B86800;
      }
      .d2d-meet-ai .meet-adjusted-text { flex: 1; min-width: 0; }
      .d2d-meet-ai .meet-adjusted-revert {
        flex-shrink: 0; border: 1px solid #B86800; background: transparent; color: #B86800;
        border-radius: 6px; padding: 4px 9px; font: 600 12px var(--gl-font-ui); cursor: pointer;
      }
      .d2d-meet-ai .meet-adjusted-revert:hover { background: #B86800; color: #fff; }

      /* 안내 문구는 카드 안 캡션으로 — 기존 info-box 는 덩치가 커서 지도보다 눈에 띄었다. */
      .d2d-meet-ai .meet-cap { font-size: 12px; line-height: 1.45; color: #6a5d74; padding: 0 14px 12px; }

      /* 거리뷰(카카오 로드뷰) — FRONT 후보 + 선택 화면 공용 */
      .d2d-meet-ai .meet-roadview { display: none; border-radius: 12px; overflow: hidden; background: #eef0e8; }
      .d2d-meet-ai .meet-roadview.d2d-shown { display: block; }
      /* 180px 은 실제로 보기엔 너무 좁았다(간판 하나 크기). 거리뷰와 지도 모두 240px. */
      .d2d-meet-ai .meet-roadview-view { width: 100%; height: 240px; }
      .d2d-meet-ai .meet-roadview-photo { width: 100%; height: 240px; object-fit: cover; display: none; }
      .d2d-meet-ai #dep-meet-map { height: 240px; }
      .d2d-meet-ai .meet-roadview-cap { font: 500 11px/1.4 var(--gl-font-ui); color: var(--gl-ink-3); margin-top: 6px; }


/* QR 유입 장소 상단(.d2d-qrp-*) 스타일은 css/d2d/qr-place-header.css 로 옮겼다(#547 — QR 랜딩과 공용). */
      /* =========================================================================
       * 저해상도 PC 컴팩트 모드 (#425) — D2D 전용 요소
       * 모달 고정 높이·달력·공용 헤더 등 KD 와 공유하는 규칙은 kd/bottomsheet.css 의
       * 같은 미디어 블록에 있다. 여기는 D2D 장소 선택 시트 내부 요소만.
       * - 지도 높이는 clamp(vh) 로 화면 높이에 연속 비례 — 브레이크포인트 하나로
       *   한 번에 확 줄지 않고 화면별로 세밀하게 줄어든다.
       * ========================================================================= */
      @media (min-width: 768px) and (max-height: 950px) {
          .d2d-loc-page { padding: 6px 0 12px; }

          /* 페이지 본문: 장소 선택 버튼·선택된 장소 카드 (KD 페이지와 동일 압축 —
             koreaDelivery.css 의 같은 미디어 블록과 값이 같이 움직여야 한다) */
          .location-select-button { padding: 14px; margin: 0 0 14px; }
          .location-select-title { font-size: 15px; }
          .location-select-icon { font-size: 20px; }
          .selected-location { padding: 14px 16px; margin-bottom: 14px; }
          .selected-location-label { margin-bottom: 6px; }
          .selected-location-icon { font-size: 20px; }
          .selected-location-name { font-size: 15px; line-height: 20px; }
          .selected-location-change-btn { padding: 6px 12px; }

          /* 지도: 고정 높이 → 화면 높이 비례 */
          .d2d-loc-preview-map { height: clamp(150px, 30vh, 240px); }
          .d2d-place-map { height: clamp(130px, 24vh, 180px); }

          /* 장소 미리보기 + 하단 버튼 */
          .d2d-loc-bs-preview { padding: 4px 0 12px; }
          .d2d-loc-preview-name { font-size: 16px; }
          .d2d-loc-preview-addr { margin-bottom: 8px; }
          .d2d-loc-bs-btn-secondary, .d2d-loc-bs-btn-primary { padding: 11px; }

          /* 미리보기 페이지: 지도는 위의 clamp 높이(기존 240px 이하)를 유지하고,
             남는 공간은 카드~버튼 사이 여백으로 — 확인 버튼은 모달 하단 고정.
             (지도가 남는 공간을 흡수하게 했더니 기존보다 지도가 커 보인다는 피드백) */
          .bottomsheet[data-active-page="placePreview"] .bottomsheet-content { display: flex; flex-direction: column; }
          .bottomsheet[data-active-page="placePreview"] .d2d-loc-page[data-page="placePreview"],
          .bottomsheet[data-active-page="placePreview"] .d2d-loc-bs-preview { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
          .bottomsheet[data-active-page="placePreview"] .d2d-loc-preview-card { margin-bottom: 12px; }
          .bottomsheet[data-active-page="placePreview"] .d2d-loc-bs-preview-actions { margin-top: auto; }

      }

      /* 바우처에서 예약번호·체크인 날짜 읽기 (#578) — KD(kd/koreaDelivery.css)와 같은 모양. 상태 요소는 common/hotelVoucherOcr.js 가 만든다. */
      .voucher-ocr-status { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: #666; }
      .voucher-ocr-spinner { flex: 0 0 auto; width: 13px; height: 13px; border: 2px solid #e9e7ee; border-top: 2px solid #512772; border-radius: 50%; animation: d2d-spin 0.8s linear infinite; }
      .d2d-input.voucher-ocr-reading { background-color: #f1f0f4; color: #868e96; cursor: progress; }