/* ============================================================
   실시간 위치추적 (/live) — 몰입형 지도 스테이지
   지도가 배경 전체를 채우고, 상태·예측·타임라인은 플로팅 패널로 뜬다.
   app.css의 paper/ink/orange 디자인 토큰을 그대로 사용한다.
   ============================================================ */

/* display 지정 클래스가 hidden 속성(UA 규칙)을 덮어쓰지 않도록 강제 */
.live-page [hidden] {
    display: none !important;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.live-stage-wrap {
    width: 100%;
    padding: 0;
    margin: 0;
}

/* ---------- 스테이지 (전체 화면 지도) ---------- */

.live-stage {
    position: relative;
    width: 100%;
    height: calc(100vh - 5.5rem);
    height: calc(100dvh - 5.5rem);
    min-height: 34rem;
    overflow: hidden;
    background:
        radial-gradient(60rem 30rem at 80% 10%, #e6ded0 0%, transparent 60%),
        linear-gradient(160deg, #ece7db 0%, #dfd9cb 100%);
}

/* 네이버 지도 SDK가 컨테이너에 position:relative 인라인 스타일을 강제하므로
   inset 기반 크기 지정이 무효화된다 — 반드시 width/height를 명시할 것. */
.live-map { position: absolute; inset: 0; width: 100%; height: 100%; }

/* 지도 위 공통 유리 패널 질감 */
.live-glass {
    background: rgba(255, 253, 248, 0.96);
    border: 1px solid rgba(31, 41, 36, 0.16);
    box-shadow: 0 0.9rem 2.4rem rgba(38, 35, 28, 0.16);
}

/* ---------- 상단 바 ---------- */

.live-topbar {
    position: absolute;
    top: 1rem;
    left: 1rem;
    right: 1rem;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    pointer-events: none; /* 지도 드래그 방해 최소화 — 자식에서 복원 */
}

.live-topbar__title {
    pointer-events: auto;
    background: rgba(31, 41, 36, 0.9);
    color: #fffdf8;
    border-radius: 0.9rem;
    padding: 0.6rem 1.1rem;
    box-shadow: 0 0.6rem 1.8rem rgba(38, 35, 28, 0.28);
}

.live-topbar__eyebrow {
    margin: 0;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--orange);
}

.live-topbar__title h1 {
    margin: 0.1rem 0 0;
    font-size: 1.12rem;
    letter-spacing: -0.01em;
    word-break: keep-all;
}

.live-form {
    pointer-events: auto;
    display: flex;
    align-items: stretch;
    gap: 0.45rem;
    border-radius: 999px;
    padding: 0.45rem;
    background: rgba(255, 253, 248, 0.97);
    border: 1px solid rgba(31, 41, 36, 0.16);
    box-shadow: 0 0.9rem 2.4rem rgba(38, 35, 28, 0.16);
}

.live-select__button,
.live-form input {
    border: 0;
    background: transparent;
    color: var(--ink);
    font-family: var(--sans);
    font-size: 0.9rem;
    padding: 0.5rem 0.7rem;
    min-height: 2.6rem;
}

.live-form input { width: clamp(9rem, 16vw, 15rem); }

.live-select__button:focus-visible,
.live-form input:focus { outline: 2px solid var(--orange); outline-offset: -2px; border-radius: 999px; }

/* ---------- 커스텀 택배사 드롭다운 ---------- */

.live-select { position: relative; display: flex; }

/* 네이티브 select는 값 저장소로만 남긴다 (시각적으로 완전 숨김) */
.live-select select {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.live-select__button {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
    white-space: nowrap;
    border-right: 1px solid var(--line-soft);
    border-radius: 999px 0 0 999px;
    max-width: 9.5rem;
}

.live-select__button i {
    font-size: 0.62rem;
    opacity: 0.55;
    transition: transform 0.18s ease;
}

.live-select__button[aria-expanded="true"] i { transform: rotate(180deg); }

.live-select__list {
    position: absolute;
    top: calc(100% + 0.55rem);
    left: 0;
    min-width: 11rem;
    max-height: 17rem;
    overflow-y: auto;
    margin: 0;
    padding: 0.4rem;
    list-style: none;
    background: rgba(255, 253, 248, 0.98);
    border: 1px solid rgba(31, 41, 36, 0.16);
    border-radius: 0.9rem;
    box-shadow: 0 0.9rem 2.4rem rgba(38, 35, 28, 0.22);
    z-index: 80;
}

.live-select__list:focus { outline: none; }

.live-select__option {
    padding: 0.5rem 0.75rem;
    border-radius: 0.55rem;
    font-size: 0.86rem;
    color: var(--ink);
    cursor: pointer;
}

.live-select__option:hover,
.live-select__option.is-active { background: rgba(89, 96, 68, 0.12); }

.live-select__option[aria-selected="true"] {
    font-weight: 700;
    color: var(--orange-deep);
}

.live-select__option[aria-selected="true"]::after {
    content: "✓";
    float: right;
    font-size: 0.78rem;
}

.live-form__submit {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    gap: 0.45rem;
    border: 0;
    border-radius: 999px;
    background: var(--orange);
    color: #fffdf8;
    font-family: var(--sans);
    font-size: 0.88rem;
    font-weight: 700;
    padding: 0 1.15rem;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}

.live-form__submit:hover { background: var(--orange-deep); }
.live-form__submit:active { transform: scale(0.97); }

/* ---------- 무료한도 초과 배너 ---------- */

.live-quota-banner {
    position: absolute;
    top: 5.4rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 70;
    max-width: min(92%, 40rem);
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    border: 1px solid rgba(183, 90, 24, 0.55);
    background: rgba(253, 241, 226, 0.96);
    color: #7a4210;
    border-radius: 0.85rem;
    padding: 0.75rem 0.95rem;
    box-shadow: 0 0.7rem 2rem rgba(38, 35, 28, 0.18);
    animation: live-banner-in 0.4s ease;
}

.live-quota-banner > i { margin-top: 0.18rem; color: var(--warning); }
.live-quota-banner strong { display: block; margin-bottom: 0.1rem; font-size: 0.88rem; }
.live-quota-banner span { font-size: 0.78rem; line-height: 1.45; }

.live-quota-banner button {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 0.2rem;
}

@keyframes live-banner-in {
    from { opacity: 0; transform: translate(-50%, -8px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

/* ---------- 좌측 플로팅 패널 ---------- */

.live-panel {
    position: absolute;
    top: 5.4rem;
    left: 1rem;
    bottom: 3rem;
    z-index: 50;
    width: min(24rem, calc(100% - 2rem));
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    padding-right: 0.1rem;
    pointer-events: none;
}

.live-panel::-webkit-scrollbar { display: none; }
.live-panel > * { pointer-events: auto; flex: 0 0 auto; }

.live-card {
    background: rgba(255, 253, 248, 0.96);
    border: 1px solid rgba(31, 41, 36, 0.16);
    box-shadow: 0 0.9rem 2.4rem rgba(38, 35, 28, 0.16);
    border-radius: 1rem;
    padding: 1.05rem 1.15rem;
    animation: live-card-in 0.45s ease both;
}

.live-card:nth-child(2) { animation-delay: 90ms; }
.live-card:nth-child(3) { animation-delay: 180ms; }

@keyframes live-card-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.live-card__heading {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    flex-wrap: wrap;
    margin-bottom: 0.7rem;
}

.live-card__eyebrow {
    margin: 0;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--orange-deep);
}

.live-card__heading h3 { margin: 0; font-size: 0.98rem; flex: 1 1 auto; }

/* ---------- 상태 히어로 ---------- */

.live-hero__idle {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.2rem 0;
}

.live-hero__idle-icon {
    flex: 0 0 auto;
    display: inline-flex;
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background: var(--orange-wash);
    color: var(--orange-deep);
    font-size: 1.15rem;
}

.live-hero__idle h2 { margin: 0 0 0.2rem; font-size: 1.02rem; word-break: keep-all; }
.live-hero__idle p { margin: 0; color: var(--ink-soft); font-size: 0.8rem; line-height: 1.5; word-break: keep-all; }

.live-idle__resume {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.6rem;
    padding: 0.32rem 0.75rem;
    border: 1px solid var(--orange);
    border-radius: 999px;
    background: var(--orange-wash);
    color: var(--orange-deep);
    font-family: var(--sans);
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.live-idle__resume:hover { background: var(--orange); color: #fffdf8; }

.live-hero__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.45rem;
}

.live-state-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.26rem 0.72rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    background: var(--paper-muted);
    color: var(--ink);
    border: 1px solid var(--line-soft);
}

.live-state-chip::before {
    content: "";
    width: 0.48rem;
    height: 0.48rem;
    border-radius: 50%;
    background: currentColor;
}

.live-state-chip--moving { background: var(--orange-wash); color: var(--orange-deep); }
.live-state-chip--moving::before { animation: live-chip-pulse 1.4s ease-in-out infinite; }
.live-state-chip--done { background: #e2eee2; color: var(--success); }
.live-state-chip--waiting { background: #f3ecd9; color: var(--warning); }
.live-state-chip--error { background: #f6e0dd; color: var(--danger); }

@keyframes live-chip-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(0.8); }
}

.live-hero__asof { font-size: 0.68rem; color: var(--ink-soft); }

.live-hero__title {
    margin: 0 0 0.8rem;
    font-size: 1.32rem;
    letter-spacing: -0.01em;
    word-break: keep-all;
}

/* 5단계 진행 스테퍼 */

.live-stepper {
    list-style: none;
    display: flex;
    margin: 0 0 0.95rem;
    padding: 0.65rem 0.3rem;
    border-radius: 0.75rem;
    background: var(--paper);
    border: 1px solid var(--line-soft);
    position: relative;
}

.live-stepper li {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    position: relative;
    color: var(--ink-soft);
    opacity: 0.45;
}

.live-stepper li:not(:first-child)::before {
    content: "";
    position: absolute;
    top: 0.85rem;
    right: calc(50% + 0.95rem);
    left: calc(-50% + 0.95rem);
    height: 2px;
    background: var(--line-soft);
}

.live-stepper li i {
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    background: var(--paper-muted);
    border: 1px solid var(--line-soft);
    position: relative;
    z-index: 1;
}

.live-stepper li span {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.live-stepper li.is-done { opacity: 1; color: var(--olive); }
.live-stepper li.is-done i { background: var(--olive); border-color: var(--olive); color: #fffdf8; }
.live-stepper li.is-done:not(:first-child)::before { background: var(--olive); }

.live-stepper li.is-current { opacity: 1; color: var(--orange-deep); }
.live-stepper li.is-current i {
    background: var(--orange);
    border-color: var(--orange);
    color: #fffdf8;
    box-shadow: 0 0 0 0 rgba(239, 86, 40, 0.5);
    animation: live-dot-pulse 1.8s ease-out infinite;
}
.live-stepper li.is-current:not(:first-child)::before { background: var(--olive); }

.live-hero__meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 0.9rem;
    margin: 0;
}

.live-hero__meta div { min-width: 0; }

.live-hero__meta dt {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 0.1rem;
}

.live-hero__meta dd {
    margin: 0;
    font-size: 0.88rem;
    overflow-wrap: anywhere;
}

/* ---------- 예측 카드 ---------- */

.live-forecast__headline {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    padding: 0.75rem 0.9rem;
    border-radius: 0.7rem;
    background: linear-gradient(135deg, var(--orange-wash), rgba(255, 224, 212, 0.35));
    border: 1px solid rgba(239, 86, 40, 0.28);
    margin-bottom: 0.75rem;
}

.live-forecast__headline strong { font-size: 0.98rem; color: var(--ink); word-break: keep-all; }
.live-forecast__headline span { font-size: 0.76rem; color: var(--ink-soft); word-break: keep-all; }

.live-forecast__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.live-forecast__step {
    display: grid;
    grid-template-columns: 1.3rem minmax(0, 1fr) auto;
    gap: 0.55rem;
    align-items: center;
    padding: 0.42rem 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 0.8rem;
}

.live-forecast__step:last-child { border-bottom: 0; }

.live-forecast__step-index {
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    background: var(--paper-muted);
    color: var(--ink-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.64rem;
    font-weight: 700;
}

.live-forecast__step-duration {
    font-size: 0.7rem;
    color: var(--ink-soft);
    white-space: nowrap;
}

.live-forecast__caution {
    display: flex;
    gap: 0.45rem;
    margin: 0.8rem 0 0;
    padding: 0.55rem 0.7rem;
    border-radius: 0.6rem;
    background: rgba(247, 239, 221, 0.85);
    border: 1px solid rgba(183, 90, 24, 0.3);
    color: #7a4210;
    font-size: 0.7rem;
    line-height: 1.5;
}

.live-forecast__caution i { margin-top: 0.12rem; flex: 0 0 auto; }

.live-forecast__road {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0.65rem 0 0;
    font-size: 0.76rem;
    color: var(--ink-soft);
    line-height: 1.5;
}

.live-forecast__road i { color: var(--orange-deep); margin-top: 0.15rem; }

/* ---------- 내 위치 → 택배 위치 직행 거리 ---------- */

.live-myroute { margin-top: 0.75rem; }

.live-myroute__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: 1px solid rgba(89, 96, 68, 0.45);
    border-radius: 999px;
    background: rgba(89, 96, 68, 0.08);
    color: var(--olive);
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.45rem 0.95rem;
    cursor: pointer;
    transition: background 0.18s ease;
}

.live-myroute__btn:hover:not(:disabled) { background: rgba(89, 96, 68, 0.16); }
.live-myroute__btn:disabled { opacity: 0.6; cursor: default; }

.live-myroute__result {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--ink);
}

.live-myroute__result i { color: var(--olive); margin-top: 0.15rem; }
.live-myroute__result strong { color: var(--orange-deep); }

.live-myroute__note {
    margin: 0.3rem 0 0;
    font-size: 0.72rem;
    color: var(--ink-soft);
    line-height: 1.5;
}

/* 내 위치 마커 (파란 계열로 배송 마커와 구분) */
.live-marker--me {
    width: 2rem;
    height: 2rem;
    background: #2563eb;
    font-size: 0.8rem;
    z-index: 80;
}

.live-marker--me .live-marker__label { background: rgba(37, 99, 235, 0.92); }

.live-timeline-card__heading { align-items: center; }

.live-replay {
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.28rem 0.7rem;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.live-replay:hover { background: var(--orange); border-color: var(--orange); color: #fffdf8; }

.live-collapse {
    border: 0;
    background: transparent;
    color: var(--ink-soft);
    cursor: pointer;
    padding: 0.25rem 0.4rem;
    transition: transform 0.25s ease;
}

.live-timeline-card.is-collapsed .live-collapse { transform: rotate(180deg); }
.live-timeline-card.is-collapsed .live-timeline { display: none; }
.live-timeline-card.is-collapsed .live-card__heading { margin-bottom: 0; }

.live-timeline {
    list-style: none;
    margin: 0;
    padding: 0 0 0 0.2rem;
    position: relative;
    max-height: 17rem;
    overflow-y: auto;
    scrollbar-width: thin;
}

.live-timeline::before {
    content: "";
    position: absolute;
    top: 0.6rem;
    bottom: 0.6rem;
    left: 0.66rem;
    width: 2px;
    background: var(--line-soft);
}

.live-timeline__item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.42rem 0.4rem 0.42rem 1.85rem;
    border-radius: 0.6rem;
    cursor: default;
    opacity: 0;
    transform: translateY(6px);
    animation: live-timeline-in 0.45s ease forwards;
    animation-delay: var(--stagger, 0ms);
}

.live-timeline__item--clickable { cursor: pointer; }
.live-timeline__item--clickable:hover { background: rgba(244, 240, 232, 0.9); }

@keyframes live-timeline-in {
    to { opacity: 1; transform: translateY(0); }
}

.live-timeline__dot {
    position: absolute;
    left: 0.32rem;
    top: 0.72rem;
    width: 0.74rem;
    height: 0.74rem;
    border-radius: 50%;
    background: var(--paper-strong);
    border: 2px solid var(--ink-soft);
    z-index: 1;
}

.live-timeline__item--passed .live-timeline__dot {
    background: var(--olive);
    border-color: var(--olive);
}

.live-timeline__item--current .live-timeline__dot {
    background: var(--orange);
    border-color: var(--orange);
    box-shadow: 0 0 0 0 rgba(239, 86, 40, 0.5);
    animation: live-dot-pulse 1.8s ease-out infinite;
}

@keyframes live-dot-pulse {
    0% { box-shadow: 0 0 0 0 rgba(239, 86, 40, 0.5); }
    70% { box-shadow: 0 0 0 0.6rem rgba(239, 86, 40, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 86, 40, 0); }
}

.live-timeline__time {
    font-family: var(--mono);
    font-size: 0.66rem;
    color: var(--ink-soft);
}

/* 현재 이벤트가 얼마나 지났는지 상대 시간 */
.live-timeline__ago {
    margin-left: 0.4rem;
    padding: 0.06rem 0.42rem;
    border-radius: 999px;
    background: rgba(89, 96, 68, 0.14);
    color: var(--olive);
    font-family: var(--sans);
    font-weight: 700;
    font-size: 0.62rem;
}

.live-timeline__location {
    font-weight: 700;
    font-size: 0.86rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.live-timeline__badge {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 0.08rem 0.42rem;
    border-radius: 999px;
    background: var(--orange-wash);
    color: var(--orange-deep);
}

.live-timeline__status { font-size: 0.76rem; color: var(--ink-soft); }

/* ---------- 빈 상태 / 범례 / 로딩 ---------- */

.live-map-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(244, 240, 232, 0.55);
    z-index: 40;
    transition: opacity 0.35s ease;
}

.live-map-empty__panel {
    text-align: center;
    background: rgba(255, 253, 248, 0.96);
    border: 1px solid var(--line);
    border-radius: 1rem;
    padding: 1.7rem 2.1rem;
    max-width: 24rem;
    margin-left: clamp(0rem, 26vw, 26rem); /* 좌측 패널과 겹치지 않게 살짝 우측 */
    box-shadow: var(--shadow);
}

.live-map-empty__panel > span {
    display: inline-flex;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background: var(--paper-muted);
    color: var(--ink-soft);
    font-size: 1.3rem;
    margin-bottom: 0.65rem;
}

.live-map-empty__panel h3 { margin: 0 0 0.3rem; font-size: 1.02rem; word-break: keep-all; }
.live-map-empty__panel p { margin: 0; color: var(--ink-soft); font-size: 0.82rem; line-height: 1.55; word-break: keep-all; }

.live-map-legend {
    position: absolute;
    right: 0.9rem;
    bottom: 2.6rem;
    z-index: 45;
    display: flex;
    gap: 0.8rem;
    align-items: center;
    background: rgba(255, 253, 248, 0.96);
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    padding: 0.38rem 0.85rem;
    font-size: 0.68rem;
    color: var(--ink-soft);
}

.live-map-legend span { display: inline-flex; align-items: center; gap: 0.32rem; }

.live-legend-dot { width: 0.56rem; height: 0.56rem; border-radius: 50%; display: inline-block; }
.live-legend-dot--passed { background: var(--olive); }
.live-legend-dot--current { background: var(--orange); }

.live-legend-line {
    width: 1.05rem;
    height: 0;
    border-top: 2px dashed var(--orange-deep);
    display: inline-block;
}

/* 지도 도구 묶음: 공유 / 화면 저장 / 되돌리기 (범례 위) */
.live-map-tools {
    position: absolute;
    right: 0.9rem;
    bottom: 5.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    z-index: 45;
}

.live-map-tool {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    border: 1px solid rgba(31, 41, 36, 0.16);
    background: rgba(255, 253, 248, 0.97);
    color: var(--ink);
    font-size: 0.95rem;
    cursor: pointer;
    box-shadow: 0 0.5rem 1.4rem rgba(38, 35, 28, 0.2);
    transition: background 0.18s ease, transform 0.15s ease;
}

.live-map-tool:hover { background: #fffdf8; color: var(--orange-deep); }
.live-map-tool:active { transform: scale(0.94); }
.live-map-tool:disabled { opacity: 0.55; cursor: default; }

/* 클립보드 복사 등 짧은 안내 토스트 */
.live-toast {
    position: absolute;
    left: 50%;
    bottom: 6.2rem;
    transform: translateX(-50%);
    background: rgba(31, 41, 36, 0.92);
    color: #fffdf8;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    z-index: 90;
    pointer-events: none;
}

/* 지나온 경로 명도 램프 — live.js의 ROUTE_RAMP와 색을 맞춘다 */
.live-legend-ramp {
    width: 2.1rem;
    height: 0.3rem;
    border-radius: 999px;
    display: inline-block;
    background: linear-gradient(90deg, #b7bc9c, #596044, #242e26);
}

.live-map-loading {
    position: absolute;
    top: 5.6rem;
    right: 1rem;
    z-index: 65;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(31, 41, 36, 0.88);
    color: #fffdf8;
    border-radius: 999px;
    padding: 0.42rem 0.95rem;
    font-size: 0.76rem;
}

.live-map-loading__spinner {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    border: 2px solid rgba(255, 253, 248, 0.35);
    border-top-color: #fffdf8;
    animation: live-spin 0.8s linear infinite;
}

@keyframes live-spin { to { transform: rotate(360deg); } }

.live-disclaimer {
    position: absolute;
    left: 50%;
    bottom: 0.45rem;
    transform: translateX(-50%);
    z-index: 45;
    margin: 0;
    font-size: 0.62rem;
    color: rgba(31, 41, 36, 0.55);
    background: rgba(244, 240, 232, 0.75);
    border-radius: 999px;
    padding: 0.18rem 0.7rem;
    white-space: nowrap;
    max-width: calc(100% - 2rem);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- 지도 위 커스텀 마커 ---------- */

.live-marker {
    position: relative;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 50%;
    background: var(--olive);
    color: #fffdf8;
    border: 2px solid #fffdf8;
    box-shadow: 0 2px 8px rgba(31, 41, 36, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    font-family: var(--mono);
    transform: translate(-50%, -50%) scale(0);
    animation: live-marker-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: var(--marker-delay, 0ms);
}

@keyframes live-marker-pop {
    to { transform: translate(-50%, -50%) scale(1); }
}

.live-marker--current {
    background: var(--orange);
    width: 2rem;
    height: 2rem;
    z-index: 50;
}

.live-marker--current::after {
    content: "";
    position: absolute;
    inset: -0.45rem;
    border-radius: 50%;
    border: 2px solid rgba(239, 86, 40, 0.55);
    animation: live-marker-ring 1.8s ease-out infinite;
}

@keyframes live-marker-ring {
    0% { transform: scale(0.7); opacity: 1; }
    100% { transform: scale(1.7); opacity: 0; }
}

.live-marker--dest {
    background: #fffdf8;
    color: var(--orange-deep);
    border-color: var(--orange-deep);
}

.live-marker--truck {
    width: 2.15rem;
    height: 2.15rem;
    background: var(--ink);
    font-size: 0.92rem;
    z-index: 60;
    animation: none;
    transform: translate(-50%, -50%) scale(1);
}

.live-marker__label {
    position: absolute;
    top: calc(100% + 0.3rem);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    text-align: center;
    background: rgba(31, 41, 36, 0.88);
    color: #fffdf8;
    font-size: 0.64rem;
    font-weight: 600;
    font-family: var(--sans);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    pointer-events: none;
}

.live-marker__time {
    display: block;
    font-family: var(--mono);
    font-size: 0.58rem;
    font-weight: 500;
    opacity: 0.82;
}

/* 배달완료 포인트: 마지막 경유지 마커 위에 얹히므로 위로 띄우고 라벨도 위쪽에 */
.live-marker--delivered {
    width: 2rem;
    height: 2rem;
    background: #2e7d43;
    font-size: 0.92rem;
    z-index: 70;
    animation: none;
    transform: translate(-50%, -170%) scale(1);
}

.live-marker--delivered::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 0.55rem;
    background: rgba(46, 125, 67, 0.75);
}

.live-marker--delivered .live-marker__label {
    top: auto;
    bottom: calc(100% + 0.3rem);
    background: rgba(46, 125, 67, 0.92);
}

/* ---------- 반응형 ---------- */

@media (max-width: 64rem) {
    .live-stage {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
    }

    /* 모바일: 지도는 상단 고정 높이, 패널은 지도 아래 일반 흐름 */
    .live-map {
        position: relative;
        inset: auto;
        order: 2;
        height: 46vh;
        min-height: 19rem;
    }

    .live-topbar {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        order: 1;
        flex-direction: column;
        align-items: stretch;
        padding: 0.9rem 0.9rem 0.6rem;
        gap: 0.6rem;
    }

    .live-topbar__title { text-align: left; }

    .live-form { border-radius: 0.9rem; flex-wrap: wrap; }
    .live-select { flex: 1 1 8rem; }
    .live-select__button { max-width: none; width: 100%; border-right: 0; justify-content: space-between; }
    .live-form input { flex: 1 1 10rem; width: auto; }
    .live-form__submit { flex: 1 1 100%; justify-content: center; min-height: 2.7rem; }

    .live-panel {
        position: relative;
        top: auto;
        left: auto;
        bottom: auto;
        order: 3;
        width: auto;
        overflow: visible;
        padding: 0.9rem;
    }

    .live-quota-banner {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        order: 1;
        margin: 0 0.9rem;
        max-width: none;
        animation: none;
    }

    /* 빈 상태는 오버레이 대신 일반 흐름 카드로 */
    .live-map-empty {
        position: relative;
        inset: auto;
        order: 2;
        background: transparent;
        padding: 0.9rem;
    }
    .live-map-empty__panel { margin-left: 0; width: 100%; }

    .live-map-legend {
        position: relative;
        right: auto;
        bottom: auto;
        order: 4;
        margin: 0.6rem auto 0;
        width: fit-content;
    }

    .live-map-loading { position: fixed; top: auto; bottom: 1rem; right: 1rem; }

    /* 모바일: 지도 하단 왼쪽 위에 가로로 겹쳐 배치 (우하단 네이버 로고 회피).
       지도와 같은 order 2 + 음수 마진으로 지도 영역 위로 끌어올린다 */
    .live-map-tools {
        position: relative;
        right: auto;
        bottom: auto;
        order: 2;
        align-self: flex-start;
        flex-direction: row;
        margin: -3.5rem 0 0.9rem 0.9rem;
    }

    .live-toast { position: fixed; bottom: 1.2rem; }

    .live-disclaimer {
        position: relative;
        left: auto;
        bottom: auto;
        transform: none;
        order: 5;
        margin: 0.4rem auto 0.8rem;
        white-space: normal;
        text-align: center;
    }
}

@media (max-width: 40rem) {
    .live-hero__meta { grid-template-columns: 1fr; }
    .live-stepper li span { font-size: 0.52rem; }
}