/* bushexa — base styles (P4 W1) */

/* ── 웹폰트 (self-host, CDN 의존 없음) ──────────────────────────────
   일반 UI/표 = Pretendard, 전광판(.dboard) = 서울남산체. 굴림 탈피용.
   파일: static/vendor/fonts/*.woff2 (style.css 기준 상대경로) */
@font-face {
    font-family: "Pretendard";
    font-weight: 400; font-style: normal; font-display: swap;
    src: url("vendor/fonts/Pretendard-Regular.woff2") format("woff2");
}
@font-face {
    font-family: "Pretendard";
    font-weight: 600; font-style: normal; font-display: swap;
    src: url("vendor/fonts/Pretendard-SemiBold.woff2") format("woff2");
}
@font-face {
    font-family: "Pretendard";
    font-weight: 700; font-style: normal; font-display: swap;
    src: url("vendor/fonts/Pretendard-Bold.woff2") format("woff2");
}
@font-face {
    font-family: "Seoul Namsan";
    font-weight: 300; font-style: normal; font-display: swap;
    src: url("vendor/fonts/SeoulNamsan-Light.woff2") format("woff2");
}
@font-face {
    font-family: "Seoul Namsan";
    font-weight: 500; font-style: normal; font-display: swap;
    src: url("vendor/fonts/SeoulNamsan-Medium.woff2") format("woff2");
}
@font-face {
    font-family: "Seoul Namsan";
    font-weight: 700; font-style: normal; font-display: swap;
    src: url("vendor/fonts/SeoulNamsan-Bold.woff2") format("woff2");
}

/* 굴림 대신 항상 깔끔한 글꼴로 폴백: Pretendard → 시스템 한글 → sans-serif */
:root {
    --font-ui: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
               "Malgun Gothic", "맑은 고딕", "Noto Sans KR", "Segoe UI", Roboto, sans-serif;
    --font-board: "Seoul Namsan", "Pretendard", "Apple SD Gothic Neo",
                  "Malgun Gothic", "맑은 고딕", sans-serif;
}

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-ui);
    background: #f5f5f5;
    color: #333;
}

/* ── Layout: sidebar + content (레거시 Streamlit 3그룹 사이드바 복원) ── */
.layout {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 240px;
    flex-shrink: 0;
    background: #1a237e;
    color: #e8eaf6;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.sidebar .brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.1rem;
    color: #fff;
    text-decoration: none;
    font-size: 1.15rem;
    font-weight: 700;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

.sidebar .brand-logo {
    width: 24px;
    height: 24px;
    border-radius: 4px;
}

.nav {
    flex: 1;
    padding: 0.5rem 0;
}

.nav-group {
    margin-bottom: 0.75rem;
}

.nav-group-title {
    margin: 0;
    padding: 0.6rem 1.1rem 0.3rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9fa8da;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1.1rem;
    color: #e8eaf6;
    text-decoration: none;
    font-size: 0.95rem;
    border-left: 3px solid transparent;
}

.nav-link:hover {
    background: rgba(255,255,255,0.08);
}

.nav-link.active {
    background: rgba(255,255,255,0.14);
    border-left-color: #ff9800;
    font-weight: 600;
    color: #fff;
}

.nav-icon {
    width: 1.2em;
    text-align: center;
}

.sidebar-footer {
    padding: 0.9rem 1.1rem;
    font-size: 0.8rem;
    color: #9fa8da;
    border-top: 1px solid rgba(255,255,255,0.12);
}

.sidebar-footer a {
    color: #ffcc80;
}

/* Content column */
.content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.topbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
}

.topbar-title {
    font-weight: 600;
    color: #1a237e;
}

/* Hamburger toggle — hidden on desktop, shown on mobile */
.nav-toggle { display: none; }
.nav-toggle-btn {
    display: none;
    cursor: pointer;
    font-size: 1.3rem;
    line-height: 1;
    color: #1a237e;
    user-select: none;
}

/* Main container */
main {
    flex: 1;
    width: 100%;
    max-width: 900px;
    margin: 1.5rem auto;
    padding: 0 1rem;
}

/* ── Responsive: collapse sidebar under 720px ── */
@media (max-width: 720px) {
    .sidebar {
        position: fixed;
        z-index: 100;
        left: -240px;
        transition: left 0.2s ease;
    }
    .nav-toggle:checked ~ .layout .sidebar {
        left: 0;
        box-shadow: 0 0 0 100vmax rgba(0,0,0,0.35);
    }
    .nav-toggle-btn {
        display: inline-block;
    }
}

/* Flash messages */
.flash-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}

.flash-list .flash {
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

.flash-list .flash.error   { background: #fdecea; color: #b71c1c; }
.flash-list .flash.warning { background: #fff8e1; color: #6d4c00; }
.flash-list .flash.success { background: #e8f5e9; color: #1b5e20; }
.flash-list .flash.info    { background: #e3f2fd; color: #0d47a1; }

/* Footer */
footer {
    text-align: center;
    padding: 1rem;
    font-size: 0.85rem;
    color: #777;
    border-top: 1px solid #ddd;
    margin-top: 2rem;
}

/* Board table */
.board-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.board-table th,
.board-table td {
    padding: 0.65rem 0.85rem;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.board-table th {
    background: #3949ab;
    color: #fff;
    font-weight: 600;
}

.board-table tr:last-child td {
    border-bottom: none;
}

.board-table tr.rank-first  td { background: #e8f5e9; }
.board-table tr.rank-second td { background: #f1f8e9; }

.error-banner {
    padding: 0.6rem 1rem;
    background: #fff3e0;
    border-left: 4px solid #ff6f00;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.empty-state {
    text-align: center;
    padding: 2rem;
    color: #666;
}

/* ── Language switcher (i18n) ── */
.lang-switcher {
    margin-left: auto;
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.lang-btn {
    display: inline-block;
    padding: 0.2rem 0.45rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #555;
    text-decoration: none;
    border: 1px solid #ccc;
    border-radius: 3px;
    line-height: 1.4;
    transition: background 0.15s, color 0.15s;
}

.lang-btn:hover {
    background: #e8eaf6;
    color: #1a237e;
    border-color: #9fa8da;
}

.lang-btn.lang-active {
    background: #1a237e;
    color: #fff;
    border-color: #1a237e;
    cursor: default;
}

/* ════════════════════════════════════════════════════════════════════════
   운행 이력 테이블 (running) — 노선/날짜 선택 폼 + 정류장×회차 그리드
   ════════════════════════════════════════════════════════════════════════ */
.info-banner {
    padding: 0.6rem 1rem;
    background: #e3f2fd;
    border-left: 4px solid #1976d2;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: #0d47a1;
}
.warning-banner {
    padding: 0.6rem 1rem;
    background: #fff8e1;
    border-left: 4px solid #f9a825;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: #6d4c00;
}
.running-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.8rem 0 1.2rem;
}
.running-form label {
    font-weight: 600;
    color: #555;
}
.running-form select,
.running-form input[type="date"] {
    padding: 0.4rem 0.6rem;
    border: 1px solid #c5cae9;
    border-radius: 5px;
    font-size: 0.95rem;
    background: #fff;
}
.running-form button {
    padding: 0.45rem 1.1rem;
    border: none;
    border-radius: 5px;
    background: #3949ab;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
}
.running-form button:hover { background: #303f9f; }

/* 회차 열이 많아 가로로 길어질 수 있으므로 컨테이너에서 가로 스크롤 */
.table-container {
    overflow-x: auto;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.running-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    white-space: nowrap;
}
.running-table th,
.running-table td {
    padding: 0.5rem 0.75rem;
    text-align: center;
    border-bottom: 1px solid #eee;
    border-right: 1px solid #f0f0f0;
    font-variant-numeric: tabular-nums;
}
.running-table thead th {
    background: #3949ab;
    color: #fff;
    font-weight: 600;
    position: sticky;
    top: 0;
}
/* 정류장명 열 — 좌측 고정 + 좌측 정렬 */
.running-table th:first-child,
.running-table td.stop-name {
    text-align: left;
    font-weight: 600;
    color: #333;
    position: sticky;
    left: 0;
    background: #f5f6fb;
    z-index: 1;
}
.running-table thead th:first-child {
    background: #303f9f;
    color: #fff;
    z-index: 2;
}
.running-table tbody tr:hover td { background: #eef1fb; }
.running-table tbody tr:hover td.stop-name { background: #e3e7f7; }

/* ════════════════════════════════════════════════════════════════════════
   정류소별 버스 도착 정보 (stops) — 정류소 선택 + 도착 표
   ════════════════════════════════════════════════════════════════════════ */
.stops-selector {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.8rem 0 1.2rem;
}
.stops-selector label {
    font-weight: 600;
    color: #555;
}
.stops-selector select {
    padding: 0.4rem 0.6rem;
    border: 1px solid #c5cae9;
    border-radius: 5px;
    font-size: 0.95rem;
    background: #fff;
    min-width: 16rem;
}
.stops-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    margin-top: 0.5rem;
}
.stops-table th,
.stops-table td {
    padding: 0.65rem 0.85rem;
    text-align: left;
    border-bottom: 1px solid #eee;
}
.stops-table th {
    background: #3949ab;
    color: #fff;
    font-weight: 600;
}
.stops-table tr:last-child td {
    border-bottom: none;
}
.stops-table tbody tr:hover td {
    background: #f5f6fb;
}

/* ════════════════════════════════════════════════════════════════════════
   출발안내 전광판 (Departure board) — 표(table, 기본) / Split-flap 두 표시 스타일
   ════════════════════════════════════════════════════════════════════════ */

.dboard-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.dboard-headline {
    display: flex;
    align-items: baseline;
    gap: 0.8rem;
}

.dboard-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1a237e;
    letter-spacing: 0.02em;
}

.dboard-clock {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: #555;
}
.dboard-clock small { color: #999; font-weight: 400; }

/* segmented 토글 */
.seg {
    display: inline-flex;
    border: 1px solid #c5cae9;
    border-radius: 999px;
    overflow: hidden;
    background: #fff;
}
.seg-btn {
    border: 0;
    background: transparent;
    padding: 0.35rem 0.9rem;
    font-size: 0.85rem;
    cursor: pointer;
    color: #3949ab;
}
.seg-btn.active {
    background: #1a237e;
    color: #fff;
}

/* ── 전광판 본체: <table>. 기본=표(table), 실험=Split-flap(flap) ── */
.dboard {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;              /* 두 모드 열 너비 동일 고정 */
    font-family: var(--font-ui);      /* From/To UNIST 등 일반 UI와 서체 통일(Pretendard) */
}
/* 열 너비(표/Split-flap 공통) — 노선열: 4자리(1115) + 타일 패딩이 여유있게 들어가도록 17% */
.dboard .col-time    { width: 16%; }
.dboard .col-route   { width: 17%; }
.dboard .col-dest    { width: 37%; }
.dboard .col-present { width: 30%; }
.dboard thead th {
    text-align: left;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    padding: 0.5rem 0.6rem;
}
.dboard td { padding: 0.55rem 0.6rem; vertical-align: middle; }

/* 노선 색 (legacy BUS_COLORS) — 배경이 아니라 '숫자 글자색'으로 적용.
   route-NNN은 --route 변수만 정의하고, 배지/타일은 그 변수를 글자색으로 쓴다. */
span.c-route {
    display: inline-block;
    min-width: 4ch;                 /* 1115(4자리) 기준 — 513/753도 같은 폭으로 정렬 */
    text-align: center;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--route, #555);   /* 노선 숫자 글자색 = 노선색, 배경 없음 */
}
.route-513  { --route: #D32F2F; }
.route-713  { --route: #388E3C; }
.route-743  { --route: #1976D2; }
.route-753  { --route: #7B1FA2; }
.route-1115 { --route: #F57C00; }

.tag { font-size: 0.98rem; margin-left: 0; }   /* 경유 글자 크기와 통일 */
.tag-first { color: #DC143C; font-weight: 700; animation: tagblink 1.1s steps(2, start) infinite; }
.tag-second { color: #0000CD; font-weight: 700; }
@keyframes tagblink { 50% { opacity: 0.3; } }

.via-label {
    display: inline-block;
    font-size: 0.82rem;
    padding: 0.08em 0.45em;
    border: 1px solid currentColor;
    border-radius: 3px;
    opacity: 0.6;
    margin-right: 0.35rem;
}
.dboard-empty { text-align: center; padding: 2rem; letter-spacing: 0.05em; }
/* FIRST/SECOND 플래그 칸 — 레거시처럼 '시각' 칸 아래(둘째 줄) */
.c-flag { text-align: center; vertical-align: top; padding-top: 0; white-space: nowrap; }

/* ══ 표(table) 모드 — 기본, 라이트 ══ */
.dboard.table {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    color: #222;
}
/* 헤더는 다른 표(stops-table/board-table)와 동일하게 #3949ab 배경+흰 글씨로 통일 */
.dboard.table thead th { background: #3949ab; color: #fff; border-bottom: none; }
.dboard.table .dboard-row td { border-bottom: 1px solid #eee; }
.dboard.table td.c-time { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; color: #1a237e; }
.dboard.table td.c-dest { font-weight: 600; }
.dboard.table td.c-present { color: #666; font-size: 0.88rem; }
.dboard.table .dboard-via { color: #666; font-size: 0.98rem; padding-top: 0; }
.dboard.table .dboard-via-row td { border-bottom: 1px solid #eee; }
.dboard.table .dboard-row.is-first td  { background: #fff8e1; }
.dboard.table .dboard-row.is-second td { background: #e8f4fd; }

/* ══ Split-flap 모드 — 실험, 다크 + 통째 플립 ══ */
.dboard.flap {
    background: #0b0f14;
    border: 1px solid #1c2530;
    border-radius: 10px;
    overflow: hidden;
    color: #ffb000;
    box-shadow: inset 0 0 40px rgba(0,0,0,0.6);
}
/* 행 높이·글자 크기를 표 모드와 동일하게 맞춤(줄이 어긋나지 않게) */
.dboard.flap thead th { color: #aebccb; border-bottom: 1px solid #1c2530; }
.dboard.flap .dboard-row td { border-bottom: 1px dashed #161d26; }
.dboard.flap td.c-time { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; color: #ffffff; white-space: nowrap; }
.dboard.flap td.c-dest { font-size: 1rem; color: #ffffff; }
.dboard.flap td.c-present { color: #9fb1c2; font-size: 0.88rem; }
.dboard.flap .dboard-via { color: #c7d4e1; font-size: 0.98rem; padding-top: 0; }
.dboard.flap .tag { font-size: 0.98rem; }   /* FIRST/SECOND = 경유 크기와 통일 */
.dboard.flap .dboard-row.is-first td  { box-shadow: inset 3px 0 0 #ffb000; }
.dboard.flap .dboard-row.is-second td { box-shadow: inset 3px 0 0 #33c4ff; }
.dboard.flap .dboard-empty { color: #4d5f70; }

/* Split-flap 타일: 시각=문자단위, 행선/노선=통째 1개 (splitflap.js가 생성).
   ※ flap-host는 <td>에 붙으므로 display를 건드리면 table-cell이 깨져 칸이 뭉친다.
      td는 그대로 table-cell로 두고, 타일(inline-block)이 칸 안에서 가로로 흐르게 한다. */
.dboard.flap .flap-host { max-width: 100%; perspective: 220px; }
.dboard.flap .flap-char {
    display: inline-block;
    vertical-align: middle;
    min-width: 0.66em;
    margin: 0 1px;
    text-align: center;
    padding: 0.08em 0.13em;
    color: #ffffff;
    background: linear-gradient(#2b333d 0 50%, #11161c 50% 100%);
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px #000, 0 1px 0 #2b343f;
    position: relative;
    transform-origin: center center;   /* 중앙(분할선) 기준으로 반 갈려 회전 */
    backface-visibility: hidden;
}
/* 행선 통째 타일: 칸(열) 전체 폭으로 고정 → 모든 행 동일 너비(가장 긴 행선 기준).
   회전 중 다른 행선을 거쳐도 너비가 흔들리지 않는다. 길면 칸 안에서 줄바꿈. */
.dboard.flap .c-dest .flap-char {
    padding: 0.1em 0.4em;
    white-space: normal;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
    line-height: 1.25;
}
.dboard.flap .c-time .flap-char { color: #ffffff; font-weight: 700; }               /* 시각, 진하게 */
/* 노선 flap '블록(타일)' 배경 = 노선색(셀 배경 아님), 숫자는 흰색으로 또렷하게.
   위/아래 반반 음영으로 split-flap 두 톤 유지(--route 변수 사용) */
.dboard.flap .c-route-cell .flap-char {
    padding: 0.1em 0.5em;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(rgba(255,255,255,0.12) 0 50%, rgba(0,0,0,0.28) 50% 100%), var(--route, #555);
    /* 1115(4자리) 기준 고정폭: width+box-sizing으로 513~1115 모두 동일 너비 보장.
       padding:0.1em 0.5em → 좌우 1em 소비. 내용 폭(content area) = width - 1em ≥ 4ch
       이어야 4자리(1115)가 꽉 찬다. calc(4ch + 1em) = 정확히 4ch content area 보장. */
    width: calc(4ch + 1em);
    box-sizing: border-box;
    text-align: center;
    font-variant-numeric: tabular-nums;
    /* 일반 .flap-char의 min-width:0.66em 재정의 */
    min-width: unset;
}
/* 콜론 등 구분자: 플립 없이 고정 */
.dboard.flap .flap-sep { display: inline-block; padding: 0 0.12em; color: #ffffff; font-weight: 700; }
.dboard.flap .flap-char::after {  /* 중앙 분할선 */
    content: "";
    position: absolute; left: 0; right: 0; top: 50%;
    height: 1px; background: rgba(0,0,0,0.6);
}
.dboard.flap .flap-space { background: transparent; box-shadow: none; min-width: 0.3em; }
.dboard.flap .flap-space::after { display: none; }
/* 진짜 split-flap: 중앙(분할선)을 축으로 반 갈려 앞으로 돌아 떨어진다.
   .flap-host의 perspective + transform-origin:center 와 함께 작동. */
.dboard.flap .flap-anim { animation: flapIn 0.4s cubic-bezier(0.3, 0.8, 0.4, 1) both; }
@keyframes flapIn {
    0%   { transform: rotateX(90deg);  }   /* 날 끝(분할선)만 보임 */
    60%  { transform: rotateX(-12deg); }   /* 살짝 넘어옴 */
    100% { transform: rotateX(0deg);   }   /* 평평하게 안착 */
}
/* 실제 솔라리 보드처럼 '여러 글자를 거쳐 차르륵 돌다가' 멈춘다.
   splitflap.js가 글자를 한 칸씩 바꾸며 이 짧은 플립을 매 스텝 다시 재생한다. */
.dboard.flap .flap-char.flap-step {
    animation: flapStep 0.15s cubic-bezier(0.25, 0.6, 0.4, 1) both;
}
@keyframes flapStep {
    0%   { transform: rotateX(82deg); }    /* 위에서 떨어지기 직전 */
    100% { transform: rotateX(0deg);  }    /* 평평하게 안착 */
}
@media (prefers-reduced-motion: reduce) {
    .dboard.flap .flap-anim,
    .dboard.flap .flap-char.flap-step { animation: none; }
}

/* 좁은 화면: 현재위치 열 숨김 */
@media (max-width: 560px) {
    .dboard .c-present { display: none; }
    .dboard thead th.c-present { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   모바일 세로(≤480px) — 전광판 경량 반응형
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

    /* [Task 1] 페이지 가로 오버플로 방지 */
    body { overflow-x: hidden; }
    main { padding: 0 0.5rem; }

    /* 넓은 데이터 표(다른 페이지) — CSS 전용 수평 스크롤 */
    .stops-table,
    .board-table,
    .timetable {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .stops-table td, .stops-table th,
    .board-table td, .board-table th {
        white-space: nowrap;
    }

    /* [Task 2] 전광판 폰트/패딩 축소 */
    .dboard thead th { font-size: 0.65rem; padding: 0.4rem 0.35rem; }
    .dboard td { padding: 0.4rem 0.35rem; }

    /* 표 모드 시각 폰트 축소 */
    .dboard.table td.c-time { font-size: 0.95rem; }
    .dboard.table td.c-dest { font-size: 0.9rem; }
    .dboard.table td.c-present { font-size: 0.78rem; }
    .dboard.table .dboard-via { font-size: 0.85rem; }

    /* Split-flap 타일 폰트 및 패딩 축소 — calc(4ch+1em)는 그대로(폰트 크기 조정으로 비례 축소) */
    .dboard.flap .flap-char {
        font-size: 0.82rem;
        padding: 0.06em 0.1em;
        margin: 0 0.5px;
    }
    .dboard.flap .c-time .flap-char { font-size: 0.85rem; }
    .dboard.flap .c-route-cell .flap-char {
        font-size: 0.82rem;
        padding: 0.08em 0.3em;
    }
    .dboard.flap .c-dest .flap-char { font-size: 0.82rem; }

    /* FIRST/SECOND 태그 가독성 유지 */
    .tag { font-size: 0.78rem; }

    /* via 레이블 축소 */
    .via-label { font-size: 0.72rem; }

    /* [Task 2] 열 너비 재정의: present 숨김 → time/route/dest가 전체를 나눔.
       dest는 아코디언 때 숨기므로 collapsed 상태에서 time/route가 화면을 채우고,
       expanded 상태에서 dest가 col-dest를 점유한다. */
    .dboard .col-time    { width: 22%; }
    .dboard .col-route   { width: 22%; }
    .dboard .col-dest    { width: 56%; }
    .dboard .col-present { width: 0; }

    /* [Task 3] 행선 아코디언 — 기본(collapsed): c-dest, dboard-via-row 숨김 */
    .dboard td.c-dest { display: none; }
    .dboard thead th.c-dest { display: none; }
    .dboard .dboard-via-row { display: none; }

    /* expanded(is-open): 주 행의 c-dest + 인접 via-row 표시 */
    .dboard .dboard-row.is-open td.c-dest { display: table-cell; }
    .dboard .dboard-row.is-open + .dboard-via-row { display: table-row; }

    /* 노선 셀 — 탭 가능 표시(커서 + 케브론 힌트는 JS가 추가) */
    .dboard td.c-route-cell {
        cursor: pointer;
        user-select: none;
    }
    /* 방면 축약: 접힘 상태에서 노선 배지 아래에 방향 한눈에(513=삼남/덕하 구분).
       data-dir attribute → ::after. 펼치면(is-open) 전체 행선이 c-dest에 나오므로 중복 숨김. */
    .dboard td.c-route-cell[data-dir]::after {
        content: attr(data-dir);
        display: block;
        margin-top: 0.15rem;
        font-size: 0.72rem;
        font-weight: 600;
        line-height: 1.1;
        text-align: center;
        color: #555;
    }
    .dboard.flap td.c-route-cell[data-dir]::after { color: #9fb1c2; }
    .dboard .dboard-row.is-open td.c-route-cell[data-dir]::after { display: none; }
    /* 노선 셀에 탭 포커스 링 */
    .dboard td.c-route-cell:focus {
        outline: 2px solid #ff9800;
        outline-offset: -2px;
    }

    /* [Task 4] 툴바 세로 스택 */
    .dboard-toolbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    .dboard-headline {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
    .dboard-title { font-size: 1rem; }
    .dboard-clock { font-size: 0.9rem; }

    /* [Task 5] 터치 타겟 크기 */
    .nav-link {
        min-height: 44px;
        padding: 0.6rem 1.1rem;
    }
    .seg-btn {
        min-height: 44px;
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
}

/* 360px 초소형 폰 추가 미세 조정 */
@media (max-width: 360px) {
    main { padding: 0 0.25rem; }
    .dboard thead th { font-size: 0.6rem; padding: 0.35rem 0.25rem; }
    .dboard td { padding: 0.35rem 0.25rem; }
    .dboard.table td.c-time { font-size: 0.88rem; }
    .dboard.flap .flap-char { font-size: 0.76rem; }
    .dboard.flap .c-time .flap-char { font-size: 0.78rem; }
    .dboard.flap .c-route-cell .flap-char { font-size: 0.76rem; padding: 0.06em 0.25em; }
    .dboard .col-time  { width: 24%; }
    .dboard .col-route { width: 24%; }
    .dboard .col-dest  { width: 52%; }
    .dboard-title { font-size: 0.92rem; }
}

/* ── 관리자: 경유지 편집 ── */
.via-edit-row {
    padding: 0.8rem 0;
    border-bottom: 1px solid #eee;
}
.via-edit-row label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}
.via-textarea {
    width: 100%;
    font-size: 0.95rem;
    padding: 0.5rem;
    border: 1px solid #c5cae9;
    border-radius: 4px;
    resize: vertical;
}
.via-default {
    margin: 0.3rem 0 0;
    font-size: 0.78rem;
    color: #999;
}
.via-badge {
    font-size: 0.7rem;
    padding: 0.1em 0.45em;
    border-radius: 3px;
    background: #fff3e0;
    color: #e65100;
}
.via-actions {
    margin-top: 1.2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.btn-primary {
    background: #1a237e;
    color: #fff;
    border: 0;
    padding: 0.5rem 1.2rem;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.95rem;
}

/* ════════════════════════════════════════════════════════════════════════
   버스번호별 시간표 (busno) — 선택 칩 + 시/분 피벗 표
   ════════════════════════════════════════════════════════════════════════ */
.current-time { color: #666; }
.warning-banner {
    padding: 0.6rem 1rem;
    background: #fff8e1;
    border-left: 4px solid #f9a825;
    border-radius: 4px;
    margin-bottom: 1rem;
}
.bus-selector, .day-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.5rem 0;
}
.bus-btn, .day-btn {
    display: inline-block;
    padding: 0.35rem 0.8rem;
    border: 1px solid #c5cae9;
    border-radius: 999px;
    background: #fff;
    color: #3949ab;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
}
.bus-btn:hover, .day-btn:hover { background: #e8eaf6; }
.bus-btn.active, .day-btn.active {
    background: #1a237e;
    color: #fff;
    border-color: #1a237e;
}
.dep-form { margin: 0.8rem 0; display: flex; align-items: center; gap: 0.5rem; }
.dep-form select {
    padding: 0.4rem 0.6rem;
    border: 1px solid #c5cae9;
    border-radius: 5px;
    font-size: 0.95rem;
}
table.timetable {
    width: 100%;
    max-width: 360px;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 0.8rem;
}
table.timetable th, table.timetable td {
    padding: 0.5rem 0.8rem;
    text-align: left;
    border-bottom: 1px solid #eee;
}
table.timetable th { background: #f0f2f6; color: #555; font-size: 0.85rem; }
table.timetable td:first-child {
    width: 3.5em;
    text-align: center;
    font-weight: 700;
    color: #1a237e;
    font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════════════════════════════════
   UNIST 출발 버스 현황 (unist_board) — 카드 그리드 (legacy st.columns(3))
   ════════════════════════════════════════════════════════════════════════ */
.bus-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.8rem;
    margin-top: 0.5rem;
}
.bus-card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    overflow: hidden;
}
.bus-card.last-bus { opacity: 0.6; }
.bus-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.8rem;
    background: var(--route, #1a237e);   /* 노선색으로 통일(전광판 노선색과 동일 팔레트) */
    color: #fff;
}
.bus-card-header .bus-number {
    font-weight: 700;
    font-size: 1.05rem;
    background: rgba(255,255,255,0.18);
    padding: 0.05em 0.5em;
    border-radius: 5px;
}
.bus-card-header .bus-direction { font-size: 0.9rem; }
.bus-card-body { padding: 0.6rem 0.8rem; }
.bus-card-body .entry { margin: 0.25rem 0; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.bus-card-body .entry-live { color: #2e7d32; font-weight: 600; }       /* 실시간 */
.bus-card-body .entry-timetable { color: #555; }                       /* 시간표 */

@media (max-width: 640px) {
    .bus-card-grid { grid-template-columns: 1fr; }
}