/* ═══════════════════════════════════════════════════
   현장경로 (Field Route) 스타일
   ═══════════════════════════════════════════════════ */

.field-route-body { padding: 0 !important; }

/* ─── 가이드 ─── */
.fr-guide-compact { padding: 20px 16px; }
.fr-guide-hero { text-align: center; margin-bottom: 18px; }
.fr-guide-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 14px;
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    margin-bottom: 10px;
}
.fr-guide-title { font-size: 16px; font-weight: 700; color: #1a1a2e; margin-bottom: 4px; }
.fr-guide-desc { font-size: 12px; color: #6b7280; line-height: 1.5; }

.fr-guide-cards { display: flex; gap: 8px; margin-bottom: 14px; }
.fr-guide-card {
    flex: 1; display: flex; gap: 8px; align-items: flex-start;
    padding: 10px; border-radius: 10px;
    background: #f8f9fb; border: 1px solid #e8ecf1;
}
.fr-guide-card-icon { font-size: 20px; flex-shrink: 0; }
.fr-guide-card strong { font-size: 12px; color: #1a1a2e; }
.fr-guide-card-desc { font-size: 10px; color: #6b7280; line-height: 1.4; margin-top: 2px; }

.fr-guide-steps { margin-bottom: 12px; }
.fr-guide-step {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 0; font-size: 11px; color: #4a5568;
}
.fr-step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%;
    background: #1565C0; color: #fff;
    font-size: 10px; font-weight: 700; flex-shrink: 0;
}
.fr-guide-source {
    font-size: 10px; color: #9ca3af; text-align: center;
    padding-top: 8px; border-top: 1px solid #f0f0f0;
}

/* ─── 공통 컨트롤 ─── */
.fr-section { padding: 12px; }
.fr-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 8px; }
.fr-filter { display: flex; gap: 6px; }

.fr-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 12px; border-radius: 6px;
    font-size: 12px; font-weight: 600;
    border: 1px solid #d1d5db; background: #fff; color: #374151;
    cursor: pointer; transition: all .15s;
}
.fr-btn:hover { background: #f3f4f6; }
.fr-btn-primary { background: #1565C0; color: #fff; border-color: #1565C0; }
.fr-btn-primary:hover { background: #0d47a1; }
.fr-btn-primary:disabled { opacity: .6; cursor: not-allowed; }
.fr-btn-block { width: 100%; justify-content: center; }
.fr-btn-sm { padding: 4px 8px; font-size: 11px; }
.fr-btn-xs { padding: 2px 6px; font-size: 11px; border: none; background: none; cursor: pointer; opacity: .6; }
.fr-btn-xs:hover { opacity: 1; }
.fr-btn-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 6px;
    border: 1px solid #d1d5db; background: #fff; cursor: pointer;
}
.fr-btn-icon:hover { background: #f3f4f6; }
.fr-btn-active { background: #1565C0 !important; color: #fff !important; border-color: #1565C0 !important; }
.fr-btn-active svg { stroke: #fff; }

.fr-input {
    width: 100%; padding: 6px 10px; border: 1px solid #d1d5db;
    border-radius: 6px; font-size: 12px; outline: none;
    transition: border-color .15s;
}
.fr-input:focus { border-color: #1565C0; }
.fr-input-sm { width: auto; padding: 4px 8px; font-size: 11px; }
.fr-input-xs { width: 48px; padding: 2px 4px; font-size: 11px; border: 1px solid #e5e7eb; border-radius: 4px; text-align: center; }
.fr-input-title {
    border: none; border-bottom: 1px solid transparent;
    font-size: 14px; font-weight: 700; color: #1a1a2e;
    padding: 2px 0; width: 100%; outline: none;
}
.fr-input-title:focus { border-bottom-color: #1565C0; }

.fr-select { padding: 4px 8px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 12px; outline: none; }
.fr-select-sm { font-size: 11px; padding: 3px 6px; }
.fr-select-xs { font-size: 10px; padding: 1px 4px; border: 1px solid #e5e7eb; border-radius: 4px; }

.fr-loading { text-align: center; padding: 20px; color: #9ca3af; font-size: 12px; }

/* ─── 상세 로딩 ─── */
.fr-detail-loading {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 20px;
    gap: 0; min-height: calc(100vh - 120px);
}
.fr-detail-loading-icon {
    width: 64px; height: 64px; border-radius: 16px;
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
    animation: fr-pulse 2s ease-in-out infinite;
}
.fr-detail-loading-title {
    font-size: 15px; font-weight: 700; color: #1a1a2e;
    margin-bottom: 16px;
}
.fr-detail-loading-bar {
    width: 200px; height: 4px; border-radius: 2px;
    background: #e8ecf1; overflow: hidden;
    margin-bottom: 10px;
}
.fr-detail-loading-bar-fill {
    height: 100%; border-radius: 2px; width: 0%;
    background: linear-gradient(90deg, #1565C0, #42a5f5);
    transition: width .4s ease;
}
.fr-detail-loading-step {
    font-size: 11px; color: #9ca3af;
    min-height: 16px; transition: opacity .2s;
}
.fr-detail-loading-spinner {
    width: 32px; height: 32px; border-radius: 50%;
    border: 3px solid #e8ecf1; border-top-color: #1565C0;
    animation: fr-spin .8s linear infinite;
}
@keyframes fr-spin { to { transform: rotate(360deg); } }
.fr-detail-loading-text { font-size: 12px; color: #9ca3af; }

/* ─── 스케줄 카드 ─── */
.fr-schedule-card {
    padding: 14px 16px; margin-bottom: 10px; border-radius: 12px;
    border: 1px solid #e8ecf1; background: #fff;
    cursor: pointer; transition: all .2s;
    position: relative; overflow: hidden;
}
.fr-schedule-card::before {
    content: ''; position: absolute; top: 0; left: 0;
    width: 4px; height: 100%; background: #d1d5db;
    border-radius: 12px 0 0 12px; transition: background .2s;
}
.fr-schedule-card.card-planned::before { background: #1565C0; }
.fr-schedule-card.card-active::before { background: #2E7D32; }
.fr-schedule-card.card-done::before { background: #7B1FA2; }
.fr-schedule-card.card-draft::before { background: #9ca3af; }
.fr-schedule-card:hover {
    border-color: #1565C0; box-shadow: 0 4px 16px rgba(21,101,192,.12);
    transform: translateY(-1px);
}
.fr-sc-top {
    display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.fr-sc-title {
    font-size: 14px; font-weight: 700; color: #1a1a2e;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    flex: 1; min-width: 0;
}
.fr-sc-date { font-size: 11px; color: #9ca3af; font-weight: 500; flex-shrink: 0; }
.fr-sc-stats {
    display: flex; gap: 0; background: #f8f9fb; border-radius: 8px;
    overflow: hidden;
}
.fr-sc-stat {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    padding: 8px 4px;
    border-right: 1px solid #e8ecf1;
}
.fr-sc-stat:last-child { border-right: none; }
.fr-sc-stat-icon { margin-bottom: 2px; }
.fr-sc-stat-value { font-size: 13px; font-weight: 700; color: #1a1a2e; }
.fr-sc-stat-label { font-size: 9px; color: #9ca3af; margin-top: 1px; }

/* ─── 상태 배지 ─── */
.fr-status-badge {
    display: inline-block; padding: 2px 8px; border-radius: 10px;
    font-size: 10px; font-weight: 600; white-space: nowrap; flex-shrink: 0;
}
.fr-status-badge.draft     { background: #f3f4f6; color: #6b7280; }
.fr-status-badge.planned   { background: #e3f2fd; color: #1565C0; }
.fr-status-badge.active    { background: #e8f5e9; color: #2E7D32; }
.fr-status-badge.done      { background: #f3e8fd; color: #7B1FA2; }
.fr-status-badge.cancelled { background: #fce4ec; color: #c62828; }

/* ─── 상세 헤더 ─── */
.fr-detail { padding: 12px; position: relative; }
.fr-detail-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.fr-detail-title-wrap { flex: 1; display: flex; align-items: center; gap: 8px; }

/* ─── 메타 정보 ─── */
.fr-detail-meta {
    display: flex; flex-direction: column; gap: 8px;
    padding: 10px; margin-bottom: 12px;
    background: #f8f9fb; border-radius: 8px;
}
.fr-meta-row { display: flex; align-items: center; gap: 6px; }
.fr-meta-row label { font-size: 11px; color: #6b7280; white-space: nowrap; min-width: 52px; flex-shrink: 0; }
.fr-meta-row .fr-input, .fr-meta-row .fr-input-sm, .fr-meta-row .fr-select, .fr-meta-row .fr-select-sm {
    flex: 1; width: 100%; box-sizing: border-box;
}

/* ─── 경유지 검색 ─── */
.fr-waypoint-add { margin-bottom: 12px; }
.fr-search-row { display: flex; gap: 4px; }
.fr-search-row .fr-input { flex: 1; }

.fr-search-results {
    max-height: 180px; overflow-y: auto;
    border: 1px solid #e8ecf1; border-radius: 6px;
    margin-top: 4px; background: #fff;
}
.fr-sr-item { padding: 8px 10px; cursor: pointer; border-bottom: 1px solid #f5f5f5; }
.fr-sr-item:hover { background: #f0f7ff; }
.fr-sr-item:last-child { border-bottom: none; }
.fr-sr-name { font-size: 12px; font-weight: 600; color: #1a1a2e; }
.fr-sr-addr { font-size: 10px; color: #9ca3af; margin-top: 1px; }
.fr-sr-empty { padding: 12px; text-align: center; font-size: 11px; color: #9ca3af; }

/* ─── 경유지 목록 ─── */
.fr-waypoint-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 0; margin-bottom: 6px;
    font-size: 12px; font-weight: 600; color: #374151;
    border-bottom: 1px solid #e8ecf1;
}
.fr-waypoint-list { max-height: 320px; overflow-y: auto; margin-bottom: 12px; }

.fr-wp-item {
    display: flex; align-items: flex-start; gap: 6px;
    padding: 8px 6px; margin-bottom: 4px;
    border-radius: 8px; border: 1px solid #e8ecf1;
    background: #fff; transition: all .15s;
    overflow: visible;
}
.fr-wp-item:hover { border-color: #1565C0; }
.fr-wp-item.fr-wp-active {
    border-color: #F57C00; background: #fff8f0;
    box-shadow: 0 0 0 2px rgba(245, 124, 0, 0.2);
}
.fr-wp-item { cursor: pointer; }
.fr-wp-item.completed { background: #f0fdf4; border-color: #86efac; }
.fr-wp-item.arrived   { background: #fff7ed; border-color: #fed7aa; }
.fr-wp-item.skipped   { background: #f9fafb; opacity: .6; }

.fr-wp-handle { cursor: grab; color: #d1d5db; font-size: 14px; line-height: 1; padding-top: 2px; }
.fr-wp-handle:active { cursor: grabbing; }

.fr-wp-num {
    display: flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: #1565C0; color: #fff;
    font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.fr-wp-body { flex: 1; min-width: 0; }
.fr-wp-name { font-size: 12px; font-weight: 600; color: #1a1a2e; }
.fr-wp-addr { font-size: 10px; color: #9ca3af; margin-top: 1px; word-break: keep-all; }
.fr-wp-info { display: flex; gap: 8px; margin-top: 3px; font-size: 10px; color: #1565C0; font-weight: 600; }
.fr-wp-meta { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.fr-wp-actions { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; overflow: visible; position: relative; }

/* ─── 경유지 버튼 호버 툴팁 (좌측으로 표시 — 패널 오버플로 방지) ─── */
.fr-btn-xs[data-tooltip] { position: relative; }
.fr-btn-xs[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute; right: calc(100% + 8px); top: 50%;
    transform: translateY(-50%);
    padding: 4px 8px; border-radius: 4px;
    background: #1a1a2e; color: #fff; font-size: 10px; font-weight: 500;
    white-space: nowrap; pointer-events: none; z-index: 9999;
    animation: frTooltipLeftIn .15s ease;
}
.fr-btn-xs[data-tooltip]:hover::before {
    content: '';
    position: absolute; right: calc(100% + 4px); top: 50%;
    transform: translateY(-50%);
    border: 4px solid transparent; border-left-color: #1a1a2e;
    pointer-events: none; z-index: 10000;
}
@keyframes frTooltipLeftIn {
    from { opacity: 0; transform: translateY(-50%) translateX(4px); }
    to   { opacity: 1; transform: translateY(-50%) translateX(0); }
}
.fr-wp-empty { text-align: center; padding: 24px 16px; font-size: 12px; color: #9ca3af; line-height: 1.6; }

/* ─── 경로 요약 ─── */
.fr-route-summary {
    display: flex; gap: 12px; padding: 10px;
    background: linear-gradient(135deg, #e3f2fd, #f0f7ff);
    border-radius: 8px; margin-bottom: 12px;
}
.fr-summary-item { flex: 1; text-align: center; }
.fr-summary-label { display: block; font-size: 10px; color: #6b7280; margin-bottom: 2px; }
.fr-summary-value { display: block; font-size: 14px; font-weight: 700; color: #1565C0; }

/* ─── 경로 산출 프로그레스 오버레이 (body 고정) ─── */
.fr-progress-overlay-fixed {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    z-index: 10001;
}
.fr-progress-box {
    background: #fff; border-radius: 16px;
    padding: 32px 36px;
    box-shadow: 0 12px 40px rgba(0,0,0,.2);
    display: flex; flex-direction: column;
    align-items: center; max-width: 320px; width: 90%;
}
.fr-progress-icon {
    width: 56px; height: 56px; margin-bottom: 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    display: flex; align-items: center; justify-content: center;
    animation: fr-pulse 2s ease-in-out infinite;
}
@keyframes fr-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(21,101,192,.2); }
    50% { transform: scale(1.05); box-shadow: 0 0 0 12px rgba(21,101,192,0); }
}
.fr-progress-title {
    font-size: 15px; font-weight: 700; color: #1a1a2e;
    margin-bottom: 4px; text-align: center;
}
.fr-progress-desc {
    font-size: 11px; color: #6b7280;
    margin-bottom: 16px; text-align: center; line-height: 1.5;
}
.fr-progress-bar-wrap {
    width: 100%; max-width: 240px;
    height: 6px; border-radius: 3px;
    background: #e8ecf1; overflow: hidden;
    margin-bottom: 10px;
}
.fr-progress-bar {
    height: 100%; border-radius: 3px;
    background: linear-gradient(90deg, #1565C0, #42a5f5);
    width: 0%; transition: width .4s ease;
}
.fr-progress-info {
    display: flex; justify-content: space-between;
    width: 100%; max-width: 240px;
    font-size: 11px; color: #9ca3af;
}
.fr-progress-pct { font-weight: 700; color: #1565C0; }
.fr-progress-step {
    font-size: 11px; color: #6b7280;
    margin-top: 12px; text-align: center;
    min-height: 16px;
    transition: opacity .3s;
}
.fr-progress-eta {
    margin-top: 4px; font-size: 10px; color: #9ca3af;
}

/* ─── 하단 액션 ─── */
.fr-detail-actions { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid #e8ecf1; }

/* ─── 타임라인 ─── */
.fr-timeline { padding: 12px 0 12px 20px; border-left: 2px solid #e8ecf1; margin-left: 8px; }
.fr-tl-item { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; position: relative; }
.fr-tl-time { font-size: 11px; font-weight: 600; color: #1565C0; min-width: 40px; }
.fr-tl-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: #1565C0; border: 2px solid #fff;
    box-shadow: 0 0 0 2px #1565C0;
    flex-shrink: 0; margin-top: 2px;
    position: absolute; left: -26px;
}
.fr-tl-content { flex: 1; }
.fr-tl-name { font-size: 12px; font-weight: 600; color: #1a1a2e; }
.fr-tl-stay { font-size: 10px; color: #9ca3af; margin-top: 1px; }

/* ─── 스크롤바 ─── */
.fr-waypoint-list::-webkit-scrollbar { width: 4px; }
.fr-waypoint-list::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }
.fr-search-results::-webkit-scrollbar { width: 4px; }
.fr-search-results::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }

/* ─── 정보 팝업 (POI/경로 클릭) ─── */
.fr-info-popup {
    position: fixed; top: 70px; left: 530px;
    width: 220px; background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
    border: 1px solid #e8ecf1;
    z-index: 10000;
    opacity: 0; transform: translateY(-8px) scale(.96);
    transition: opacity .2s ease, transform .2s ease;
}
.fr-info-popup.show {
    opacity: 1; transform: translateY(0) scale(1);
}

.fr-popup-header {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px;
    background: linear-gradient(135deg, #e3f2fd, #f0f7ff);
    border-bottom: 1px solid #e8ecf1;
    position: relative; overflow: visible;
}
.fr-popup-header.seg {
    background: linear-gradient(135deg, #fff3e0, #fff8e1);
}
.fr-popup-seq {
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: #0D47A1; color: #fff;
    font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.fr-popup-seg-badge {
    display: inline-block; padding: 2px 8px; border-radius: 10px;
    background: #1565C0; color: #fff;
    font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.fr-popup-title-wrap { flex: 1; min-width: 0; overflow: visible; position: relative; }
.fr-popup-name {
    font-size: 13px; font-weight: 700; color: #1a1a2e;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fr-popup-addr {
    font-size: 10px; color: #9ca3af; margin-top: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    cursor: default;
}
.fr-addr-tip {
    position: fixed; z-index: 99999;
    background: #1a1a2e; color: #fff;
    font-size: 11px; line-height: 1.5;
    padding: 6px 10px; border-radius: 6px;
    white-space: normal; word-break: keep-all;
    max-width: 240px;
    box-shadow: 0 4px 16px rgba(0,0,0,.3);
    opacity: 0; transform: translateY(-2px);
    transition: opacity .12s, transform .12s;
    pointer-events: none;
}
.fr-addr-tip.on {
    opacity: 1; transform: translateY(0);
}
.fr-popup-title {
    flex: 1; font-size: 13px; font-weight: 700; color: #1a1a2e;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fr-popup-close {
    width: 22px; height: 22px; border: none; background: none;
    font-size: 16px; color: #9ca3af; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; flex-shrink: 0;
}
.fr-popup-close:hover { background: rgba(0,0,0,.06); color: #374151; }

/* 시간 블록 */
.fr-popup-time-block {
    display: flex; align-items: center; justify-content: center;
    gap: 6px; padding: 10px 12px;
    background: #fafbfc; border-bottom: 1px solid #f0f0f0;
}
.fr-popup-time-item { text-align: center; }
.fr-popup-time-label { display: block; font-size: 9px; color: #9ca3af; }
.fr-popup-time-value { display: block; font-size: 16px; font-weight: 800; color: #0D47A1; }
.fr-popup-time-arrow { color: #d1d5db; font-size: 14px; margin-top: 8px; }
.fr-popup-time-suffix { font-size: 9px; color: #9ca3af; margin-top: 8px; }

/* 태그 */
.fr-popup-tags {
    display: flex; gap: 4px; padding: 6px 12px;
    border-bottom: 1px solid #f0f0f0;
}
.fr-popup-tag {
    font-size: 10px; padding: 2px 6px; border-radius: 4px;
    background: #f3f4f6; color: #6b7280; font-weight: 500;
}

/* 구간 경로 카드 */
.fr-popup-routes { padding: 8px 10px; }
.fr-popup-route-card {
    padding: 6px 8px; margin-bottom: 4px;
    border-radius: 8px; border: 1px solid #e8ecf1;
    background: #fff;
}
.fr-popup-route-card:last-child { margin-bottom: 0; }
.fr-popup-route-dir {
    display: flex; align-items: center; gap: 4px;
    font-size: 11px; color: #374151;
}
.fr-popup-route-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%;
    background: #0D47A1; color: #fff;
    font-size: 9px; font-weight: 700; flex-shrink: 0;
}
.fr-popup-route-badge.next { background: #F57C00; }
.fr-popup-route-name {
    font-weight: 600; color: #1a1a2e;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    flex: 1; min-width: 0;
}
.fr-popup-route-arrow { font-size: 10px; color: #9ca3af; flex-shrink: 0; }
.fr-popup-route-stat {
    font-size: 11px; color: #0D47A1; font-weight: 700;
    margin-top: 2px; padding-left: 22px;
}

/* 구간 팝업 */
.fr-popup-seg-flow {
    display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.fr-popup-seg-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: #F57C00; color: #fff;
    font-size: 10px; font-weight: 700;
}
.fr-popup-seg-arrow-icon { font-size: 12px; color: #F57C00; font-weight: 700; }

.fr-popup-seg-endpoints { padding: 8px 12px; border-bottom: 1px solid #f0f0f0; }
.fr-popup-seg-ep {
    font-size: 11px; color: #374151; padding: 2px 0;
    display: flex; align-items: center; gap: 6px;
}
.fr-popup-seg-ep-label {
    font-size: 9px; color: #9ca3af; background: #f3f4f6;
    padding: 1px 5px; border-radius: 3px; flex-shrink: 0;
}

.fr-popup-seg-stats {
    display: flex; gap: 0; border-bottom: 1px solid #f0f0f0;
}
.fr-popup-seg-stat {
    flex: 1; text-align: center; padding: 8px 0;
    border-right: 1px solid #f0f0f0;
}
.fr-popup-seg-stat:last-child { border-right: none; }
.fr-popup-seg-stat-val { display: block; font-size: 14px; font-weight: 800; color: #0D47A1; }
.fr-popup-seg-stat-label { display: block; font-size: 9px; color: #9ca3af; margin-top: 1px; }

.fr-popup-seg-road {
    display: flex; gap: 4px; padding: 6px 12px; flex-wrap: wrap;
}
.fr-popup-seg-road span {
    font-size: 10px; padding: 2px 6px; border-radius: 4px;
    background: #f3f4f6; color: #6b7280;
}

/* 기존 body/row 호환 유지 */
.fr-popup-body { padding: 10px 12px; }
.fr-popup-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 3px 0; font-size: 11px;
}
.fr-popup-label { color: #9ca3af; flex-shrink: 0; }
.fr-popup-row > span:last-child { color: #374151; font-weight: 500; text-align: right; }
.fr-popup-accent { color: #0D47A1 !important; font-weight: 700 !important; }
.fr-popup-divider { height: 1px; background: #f0f0f0; margin: 6px 0; }

.fr-popup-segments {
    padding: 8px 12px; border-top: 1px solid #f0f0f0;
    background: #fafbfc;
}
.fr-popup-seg {
    display: flex; justify-content: space-between; align-items: center;
    padding: 3px 0; font-size: 11px;
}
.fr-popup-seg-arrow { color: #F57C00; font-weight: 600; }
.fr-popup-seg > span:last-child { color: #374151; font-weight: 500; }

/* ═══════════════════════════════════════════════════
   시뮬레이션 플레이어 컨트롤 바 (컴팩트 · 라이트톤)
   ═══════════════════════════════════════════════════ */
.fr-sim-player {
    position: fixed; bottom: 35px; left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.08);
    border: 1px solid #e8ecf1;
    z-index: 10002;
    max-width: 420px;
}

.fr-sim-btn {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    border: none; background: #f3f4f6;
    color: #374151; cursor: pointer; transition: all .15s;
    flex-shrink: 0;
}
.fr-sim-btn:hover { background: #e5e7eb; }
.fr-sim-btn-play {
    width: 34px; height: 34px;
    background: #1565C0; color: #fff;
}
.fr-sim-btn-play:hover { background: #0d47a1; }

.fr-sim-speed { display: flex; gap: 1px; flex-shrink: 0; }
.fr-sim-speed-btn {
    padding: 2px 6px; border-radius: 3px;
    border: none; background: #f3f4f6;
    color: #9ca3af; font-size: 10px; font-weight: 700;
    cursor: pointer; transition: all .15s;
}
.fr-sim-speed-btn:hover { color: #374151; background: #e5e7eb; }
.fr-sim-speed-btn.fr-sim-speed-active {
    background: #1565C0; color: #fff;
}

.fr-sim-progress-wrap {
    flex: 1; min-width: 80px; display: flex; flex-direction: column; gap: 2px;
}
.fr-sim-progress {
    position: relative; height: 5px; border-radius: 2.5px;
    background: #e8ecf1; cursor: pointer;
}
.fr-sim-progress-fill {
    position: absolute; top: 0; left: 0; height: 100%;
    border-radius: 2.5px; background: #1565C0;
    width: 0%; transition: width .1s linear;
}
.fr-sim-progress-thumb {
    position: absolute; top: 50%; left: 0%;
    width: 12px; height: 12px; border-radius: 50%;
    background: #1565C0; box-shadow: 0 1px 4px rgba(21,101,192,.3);
    transform: translate(-50%, -50%);
    transition: left .1s linear;
}
.fr-sim-seg-label {
    font-size: 9px; color: #9ca3af;
    white-space: nowrap; text-align: right;
}

.fr-sim-opt-btn {
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 5px;
    border: none; background: #f3f4f6;
    color: #9ca3af; cursor: pointer; transition: all .15s;
    flex-shrink: 0;
}
.fr-sim-opt-btn:hover { background: #e5e7eb; color: #374151; }
.fr-sim-opt-btn.fr-sim-opt-active { color: #1565C0; background: #e3f2fd; }
.fr-sim-opt-btn.fr-sim-stop { color: #ef5350; }
.fr-sim-opt-btn.fr-sim-stop:hover { background: #fef2f2; }

/* ─── 플레이어 바 버튼 호버 툴팁 ─── */
.fr-sim-opt-btn[data-tooltip] { position: relative; }
.fr-sim-opt-btn[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute; bottom: calc(100% + 6px); left: 50%;
    transform: translateX(-50%);
    padding: 5px 10px; border-radius: 5px;
    background: #1a1a2e; color: #fff; font-size: 11px; font-weight: 500;
    white-space: nowrap; pointer-events: none; z-index: 10;
    animation: frTooltipIn .15s ease;
}
@keyframes frTooltipIn {
    from { opacity: 0; transform: translateX(-50%) translateY(4px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}