/* =========================================================
   탭 화면 공통 (예약 · 이용내역) · 예약탭_v12
   ========================================================= */
.tab-page-head {
    padding: var(--space-20) var(--page-padding) var(--space-8);
}

.tab-page-head__title {
    font-size: var(--fs-24);
    font-weight: var(--font-weight-bold);
    line-height: 1.4;
}

.tab-page {
    gap: var(--space-24);
    padding-top: var(--space-8);
}

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

.tab-section__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.tab-section__title-row {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.tab-section__title {
    font-size: var(--fs-18);
    font-weight: var(--font-weight-bold);
    line-height: 1.4;
}

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

/* ? 원 버튼 (24 · 누르는 자리는 44) */
.btn-help-round {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-sub);
}

.btn-help-round::after {
    content: "";
    position: absolute;
    inset: -10px;
}

/* 날짜 줄 */
.date-line {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-12) var(--space-16);
    border-radius: var(--radius-lg);
    background: var(--color-bg-gray);
}

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

.date-line__note {
    font-size: var(--fs-13);
    font-weight: var(--font-weight-medium);
    line-height: var(--lh-18);
    color: var(--color-text-sub);
}

/* 배차 시각 칸 */
.slot-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

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

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

.slot__time {
    font-size: var(--fs-18);
    font-weight: var(--font-weight-bold);
    line-height: 1.4;
}

.slot__status {
    font-size: var(--fs-13);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    color: var(--color-success-icon);
}

.slot--done .slot__status { color: var(--color-warning); }

.slot--waiting {
    border-color: transparent;
    background: var(--color-bg-gray);
}

.slot--waiting .slot__time,
.slot--waiting .slot__status { color: var(--color-text-placeholder); }

.slot__btn {
    flex-shrink: 0;
    min-width: 76px;
    height: var(--touch-size);
    padding: 0 var(--space-10);
    border-radius: var(--radius-md);
    background: var(--color-primary);
    font-size: var(--fs-15);
    font-weight: var(--font-weight-bold);
    line-height: 1.4;
    color: var(--color-text-inverse);
}

.slot__btn--line {
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text);
}

.slot__btn[disabled] {
    background: var(--color-bg-tile);
    color: var(--color-text-placeholder);
    cursor: default;
}

/* 비어 있을 때 카드 (정기접수 · 이용내역) */
.empty-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    padding: var(--space-16);
    border-radius: var(--radius-lg);
    background: var(--color-bg-gray);
}

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

.empty-card__desc {
    margin-top: calc(var(--space-12) * -1);
    font-size: var(--fs-14);
    line-height: var(--lh-20);
    color: var(--color-text-sub);
}

.empty-card .btn--outline { border-color: var(--color-border); }

/* 시트 */
.reserve-sheet { padding-bottom: var(--space-24); }

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

.btn--md { min-height: var(--touch-size); font-size: var(--fs-15); }
.btn--danger-text { color: var(--color-error); }

/* =========================================================
   이용내역
   ========================================================= */

/* 지금 진행 중인 호출 */
.live-call {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.live-call__label {
    font-size: var(--fs-14);
    font-weight: var(--font-weight-bold);
    line-height: var(--lh-20);
    color: var(--color-text-sub);
}

.live-call__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-16);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-lg);
    background: var(--color-primary-bg);
}

.live-call__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.live-call__badge {
    padding: 2px var(--space-8);
    border-radius: var(--radius-sm);
    background: var(--color-success-bg);
    font-size: var(--fs-12);
    font-weight: var(--font-weight-bold);
    line-height: var(--lh-17);
    color: var(--color-success-icon);
}

.live-call__badge--wait { background: var(--color-primary-soft); color: var(--color-primary); }
.live-call__badge--ride { background: var(--color-primary); color: var(--color-text-inverse); }

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

.live-call__title {
    font-size: var(--fs-18);
    font-weight: var(--font-weight-bold);
    line-height: var(--lh-26);
}

.live-call__desc,
.live-call__route {
    font-size: var(--fs-14);
    line-height: var(--lh-20);
    color: var(--color-text-secondary);
}

.live-call__route { color: var(--color-text); font-weight: var(--font-weight-medium); }

.live-call__go {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    align-self: flex-end;
    padding-top: var(--space-4);
    font-size: var(--fs-14);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

/* 진행 단계 (접수 → 배정 → 도착 → 탑승 → 완료) */
.live-steps {
    display: flex;
    margin: var(--space-8) 0 0;
    padding: 0;
    list-style: none;
}

.live-steps li {
    position: relative;
    flex: 1;
    padding-top: 14px;
    font-size: var(--fs-12);
    line-height: var(--lh-17);
    color: var(--color-text-sub);
    text-align: center;
}

/* 점과 잇는 선 */
.live-steps li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    border-radius: var(--radius-full);
    background: var(--color-border-strong);
}

.live-steps li + li::after {
    content: "";
    position: absolute;
    top: 4px;
    right: calc(50% + 7px);
    left: calc(-50% + 7px);
    height: 2px;
    background: var(--color-border-strong);
}

.live-steps li.is-done::before,
.live-steps li.is-now::before,
.live-steps li.is-done::after,
.live-steps li.is-now::after { background: var(--color-primary); }

.live-steps li.is-now { font-weight: var(--font-weight-bold); color: var(--color-primary); }
.live-steps li.is-now::before { box-shadow: 0 0 0 4px var(--color-primary-soft); }
.history-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.history-list:empty { display: none; }

.history-item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
}

.history-item__head {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: 100%;
    padding: var(--space-14) 48px var(--space-14) var(--space-16);
    text-align: left;
}

.history-item__date {
    font-size: var(--fs-13);
    font-weight: var(--font-weight-medium);
    line-height: var(--lh-18);
    color: var(--color-text-sub);
}

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

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

.history-item__fare {
    font-size: var(--fs-15);
    font-weight: var(--font-weight-bold);
    line-height: var(--lh-22);
}

.history-item__fare-note {
    font-size: var(--fs-13);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-sub);
}

.history-item__arrow {
    position: absolute;
    top: var(--space-16);
    right: var(--space-16);
    color: var(--color-text-sub);
    transition: transform 0.2s ease;
}

.history-item__head[aria-expanded="true"] .history-item__arrow { transform: rotate(180deg); }

.history-item__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    margin: 0 var(--space-16);
    padding: var(--space-14) 0 var(--space-16);
    border-top: 1px solid var(--color-divider);
}

.history-item__body[hidden] { display: none; }

.history-item__rows {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    margin: 0;
}

.history-item__rows div {
    display: flex;
    gap: var(--space-12);
    font-size: var(--fs-14);
    line-height: var(--lh-20);
}

.history-item__rows dt {
    flex-shrink: 0;
    width: 96px;
    color: var(--color-text-sub);
}

.history-item__rows dd { margin: 0; }

.history-item__label {
    padding-top: var(--space-4);
    font-size: var(--fs-14);
    font-weight: var(--font-weight-bold);
    line-height: var(--lh-20);
}

.history-item__requests {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-10) var(--space-12);
    border-radius: var(--radius-md);
    background: var(--color-bg-gray);
    font-size: var(--fs-14);
    line-height: var(--lh-20);
}

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