/* =========================================================
   호출 흐름 · 탑승 위치 확인 / 호출 전 확인 (지도 + 시트)
   ========================================================= */

.map-page { min-height: 100vh; }

.map-view__route {
    width: 130px;
    height: 160px;
}

/* 버튼 크기·색 변형 */
.btn--md { min-height: var(--touch-size); }

/* 회색 채움 버튼 (다른 위치 선택하기) */
.btn--gray {
    background: var(--color-bg-tile);
    font-size: var(--fs-15);
    line-height: var(--lh-24);
    color: var(--color-text);
}

.badge--primary {
    padding: var(--space-2) var(--space-4);
    border-radius: 3px;
    background: var(--color-primary-soft);
    line-height: 1.4;
    color: var(--color-primary);
}

/* 시트 제목 (제목 + 설명 묶음) */
.sheet-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.sheet-title {
    font-size: var(--fs-20);
    font-weight: var(--font-weight-bold);
    line-height: 1.4;
}

.sheet-desc {
    font-size: var(--fs-14);
    line-height: 1.4;
    color: var(--color-text-secondary);
}

/* 시트 아래 버튼 묶음 */
.sheet-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

/* ---------- 탑승 위치 확인 ---------- */
.map-page--pickup .sheet {
    gap: var(--space-20);
    padding-bottom: 34px;
}

/* 내 위치 버튼: 시트 위 28px */
.map-page--pickup .btn-float--locate {
    bottom: calc(28px + var(--sheet-overlap, 16px));
}

.pickup-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.pickup-option {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    padding: var(--space-12) var(--space-16);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    cursor: pointer;
}

.pickup-option:has(input:checked) {
    padding: 11px 15px;
    border: 2px solid var(--color-primary);
    background: var(--color-primary-soft);
}

.pickup-option__text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.pickup-option__title {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font-size: var(--fs-16);
    font-weight: var(--font-weight-bold);
    line-height: 1.4;
}

.pickup-option__desc {
    font-size: var(--fs-14);
    line-height: var(--lh-20);
    color: var(--color-text-sub);
}

/* ---------- 호출 전 확인 (E3b) ---------- */
.sheet--confirm {
    gap: var(--space-12);
    padding-bottom: var(--space-20);
}

.confirm-label {
    font-size: var(--fs-13);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    color: var(--color-text-secondary);
}

/* 차량 카드 (파란 테두리) */
.vehicle-card {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    padding: var(--space-14);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
}

.vehicle-card__img {
    width: 24px;
    height: 42px;
    object-fit: cover;
}

.vehicle-card__text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.vehicle-card__name {
    font-size: var(--fs-17);
    font-weight: var(--font-weight-bold);
    line-height: 1.4;
}

.vehicle-card__wait {
    font-size: var(--fs-15);
    line-height: var(--lh-21);
    color: var(--color-primary);
}

.vehicle-card__fare {
    text-align: right;
    line-height: 1.4;
    white-space: nowrap;
}

.vehicle-card__price {
    font-size: var(--fs-16);
    font-weight: var(--font-weight-bold);
}

.vehicle-card__fare-note {
    font-size: var(--fs-11);
    color: var(--color-text-secondary);
}

.confirm-status {
    padding-left: var(--space-4);
    font-size: var(--fs-13);
    line-height: var(--lh-18);
    color: var(--color-text-secondary);
}

/* 경로 줄 (출발 → 도착) + 이동 시간 */
.confirm-route {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-6);
    font-size: var(--fs-14);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
}

.confirm-route__arrow {
    font-weight: var(--font-weight-regular);
    color: var(--color-text-placeholder);
}

.confirm-time {
    font-size: var(--fs-14);
    line-height: var(--lh-20);
    color: var(--color-text-secondary);
}

/* 요약 (탑승 인원 · 탑승 정보 · 연락 방법) */
.summary-list { padding: 0 var(--space-16); }

.summary-list__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
}

.summary-list__row + .summary-list__row { border-top: 1px solid var(--color-divider); }

.summary-list__text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
    padding: var(--space-10) 0;
}

.summary-list__title {
    font-size: var(--fs-14);
    font-weight: var(--font-weight-bold);
    line-height: var(--lh-20);
}

.summary-list__value {
    font-size: var(--fs-13);
    line-height: var(--lh-18);
    color: var(--color-text-sub);
}

/* 탑승 인원 값은 진하게 */
.summary-list__value--strong {
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

.summary-list__edit {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    min-height: var(--touch-size);
    font-size: var(--fs-14);
    font-weight: var(--font-weight-medium);
    line-height: var(--lh-20);
    color: var(--color-primary);
}

/* 하단 고정 호출 버튼 (위에 구분선) */
.bottom-action--call {
    padding-top: var(--space-16);
    padding-bottom: var(--space-20);
    border-top: 1px solid var(--color-border);
}

.btn--call {
    font-size: var(--fs-16);
    font-weight: var(--font-weight-medium);
}

/* ---------- 탑승 정보 · 연락 방법 수정 시트 ---------- */
.modal-sheet__panel--edit {
    gap: var(--space-20);
    padding-bottom: 34px;
}

.edit-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.edit-group__title {
    margin-bottom: var(--space-8);
    font-size: var(--fs-15);
    font-weight: var(--font-weight-bold);
    line-height: var(--lh-22);
}

.edit-group__sub {
    margin-left: var(--space-4);
    font-size: var(--fs-13);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-sub);
}

/* 이동 보조기기: 2개씩 배치 (고른 칸은 파란 테두리) */
.choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
}

.choice-tile {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    min-height: 56px;
    padding: var(--space-12) var(--space-14);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    cursor: pointer;
}

.choice-tile:has(input:checked) {
    border-color: var(--color-primary);
    background: var(--color-primary-bg);
}

.choice-tile__title {
    min-width: 0;
    font-size: var(--fs-15);
    font-weight: var(--font-weight-bold);
    line-height: var(--lh-21);
}

.edit-group .text-area { margin-top: var(--space-4); }
.edit-group .text-area[hidden] { display: none; }

.edit-foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-8);
}

.edit-foot .btn { align-self: stretch; }

.edit-foot__link {
    display: flex;
    align-items: center;
    min-height: var(--touch-size);
    font-size: var(--fs-14);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    text-decoration: underline;
}

/* ---------- E3a 탑승 인원 시트 ---------- */
.modal-sheet__panel--riders {
    gap: var(--space-20);
    padding-bottom: 34px;
}

.rider-select {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.rider-options {
    display: flex;
    gap: var(--space-8);
}

.rider-option {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    height: 72px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--fs-16);
    font-weight: var(--font-weight-medium);
    line-height: var(--lh-22);
    cursor: pointer;
}

.rider-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.rider-option:has(input:checked) {
    border: 2px solid var(--color-primary);
    background: var(--color-primary-bg);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

.rider-option:has(input:focus-visible) {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

.rider-total {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-12) var(--space-14);
    border-radius: var(--radius-lg);
    background: var(--color-bg-gray);
}

.rider-total__count {
    font-size: var(--fs-16);
    font-weight: var(--font-weight-bold);
    line-height: var(--lh-22);
}

.rider-total__desc {
    font-size: var(--fs-14);
    line-height: var(--lh-20);
    color: var(--color-text-sub);
}

.rider-foot {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.rider-note {
    font-size: var(--fs-13);
    line-height: var(--lh-18);
    color: var(--color-text-sub);
}