:root{
  --bg:#0B0D10;
  --panel:#14171C;
  --panel-alt:#1B1F26;
  --border:#262B33;
  --text:#F2EFE9;
  --text-muted:#868C97;
  --led:#FFB000;
  --led-dim:#7A5200;
  --holiday:#E2452F;
  --line-tozai:#F39800;
  --radius:14px;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",sans-serif;
  min-height:100vh;
  display:flex;
  justify-content:center;
}
.mono{ font-family:"JetBrains Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums; }

#app{
  width:100%;
  max-width:440px;
  min-height:100vh;
  background:var(--panel);
  display:flex;
  flex-direction:column;
  border-left:1px solid var(--border);
  border-right:1px solid var(--border);
}

/* ---------- header ---------- */
header{
  /* iOS/Androidのノッチ・ステータスバーと被らないよう safe-area 分を上に足す */
  padding:
    calc(18px + env(safe-area-inset-top))
    calc(18px + env(safe-area-inset-right))
    14px
    calc(18px + env(safe-area-inset-left));
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  border-bottom:1px solid var(--border);
}
header h1{
  font-size:17px;
  font-weight:700;
  letter-spacing:.02em;
  margin:0;
}
#clock{
  font-size:14px;
  color:var(--text-muted);
}
#clock .colon{ animation:blink 2s steps(1) infinite; }
@media (prefers-reduced-motion:reduce){ #clock .colon{ animation:none; } }
@keyframes blink{ 50%{ opacity:.25; } }

/* ---------- station list view ---------- */
#view-list{ padding:16px; }
#search{
  width:100%;
  background:var(--panel-alt);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:10px;
  padding:11px 13px;
  font-size:14px;
  margin-bottom:16px;
}
#search::placeholder{ color:var(--text-muted); }
#search:focus-visible{ outline:2px solid var(--line-tozai); outline-offset:1px; }

.group-label{
  font-size:11px;
  letter-spacing:.08em;
  color:var(--text-muted);
  text-transform:uppercase;
  margin:18px 4px 8px;
}
.group-label:first-child{ margin-top:0; }

.station-row{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--panel-alt);
  border:1px solid var(--border);
  border-radius:10px;
  padding:12px 12px;
  margin-bottom:8px;
  cursor:pointer;
  color:var(--text);
  text-align:left;
  font:inherit;
}
.station-row:focus-visible{ outline:2px solid var(--line-tozai); outline-offset:2px; }
.station-badge{
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700;
  border:2px solid currentColor;
  flex:none;
}
.station-name{ font-size:15px; font-weight:600; flex:1; }
.station-line{ font-size:11px; color:var(--text-muted); display:block; margin-top:2px; font-weight:400; }
.fav-btn{
  background:none; border:none; color:var(--text-muted);
  font-size:18px; line-height:1; cursor:pointer; padding:4px;
}
.fav-btn[data-fav="true"]{ color:var(--led); }
.chev{ color:var(--text-muted); font-size:14px; }

.empty-note{
  margin-top:20px;
  padding:14px;
  border:1px dashed var(--border);
  border-radius:10px;
  font-size:12.5px;
  line-height:1.7;
  color:var(--text-muted);
}

/* ---------- board view ---------- */
#view-board{ display:none; flex-direction:column; flex:1; }
.board-header{
  padding:14px 18px 16px;
  border-bottom:1px solid var(--border);
}
.back-btn{
  background:none; border:none; color:var(--text-muted);
  font-size:13px; padding:0 0 12px; cursor:pointer; font:inherit;
}
.back-btn:focus-visible{ outline:2px solid var(--line-tozai); }
.board-title-row{ display:flex; align-items:center; gap:10px; }
.board-station-name{ font-size:20px; font-weight:700; }
.board-sub{ font-size:12px; color:var(--text-muted); margin-top:3px; }
.daytype-badge{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; padding:3px 9px; border-radius:100px;
  border:1px solid var(--border); color:var(--text-muted);
  margin-top:10px;
}
.daytype-badge .dot{ width:6px; height:6px; border-radius:50%; background:var(--text-muted); }
.daytype-badge[data-holiday="true"] .dot{ background:var(--holiday); }
.daytype-badge[data-holiday="true"]{ color:var(--holiday); border-color:rgba(226,69,47,.35); }

.dir-tabs{
  display:flex; gap:6px; padding:14px 18px 0; overflow-x:auto;
}
.dir-tab{
  flex:none;
  background:var(--panel-alt);
  border:1px solid var(--border);
  color:var(--text-muted);
  font-size:12.5px;
  padding:7px 13px;
  border-radius:100px;
  cursor:pointer;
  font:inherit;
  white-space:nowrap;
}
.dir-tab.active{
  background:rgba(243,152,0,.14);
  border-color:var(--line-tozai);
  color:var(--text);
}
.dir-tab:focus-visible{ outline:2px solid var(--line-tozai); outline-offset:1px; }

.dir-section + .dir-section{ margin-top:20px; }
.dir-section-header{
  display:flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:600; color:var(--text-muted);
  padding:0 10px 6px;
}
.dir-dot{ width:8px; height:8px; border-radius:50%; flex:none; }

#departures{ padding:10px 14px 28px; flex:1; }
.dep-row{
  display:flex;
  align-items:center;
  gap:14px;
  padding:13px 10px;
  border-bottom:1px solid var(--border);
}
.dep-accent{ width:4px; align-self:stretch; border-radius:3px; flex:none; }
.dep-time{ font-size:17px; font-weight:500; width:56px; flex:none; }
.dep-countdown{
  font-size:15px; font-weight:700; text-align:right; min-width:76px; flex:none;
  color:var(--led);
  margin-left:auto;
}
.dep-countdown .unit{ font-size:11px; font-weight:400; color:var(--text-muted); margin-left:2px; }
.dep-row.next .dep-countdown{ animation:glow 2.2s ease-in-out infinite; font-size:17px; }
@keyframes glow{
  0%,100%{ text-shadow:0 0 6px rgba(255,176,0,.45); }
  50%{ text-shadow:0 0 15px rgba(255,176,0,.85); }
}
@media (prefers-reduced-motion:reduce){ .dep-row.next .dep-countdown{ animation:none; } }

.no-more{
  text-align:center; color:var(--text-muted); font-size:12.5px;
  padding:24px 10px; line-height:1.7;
}

/* ---------- 祝日データ期限切れ警告ダイアログ ---------- */
.dialog-backdrop{
  position:fixed; inset:0; background:rgba(5,6,8,.65);
  display:none; align-items:flex-end; justify-content:center;
  z-index:50; padding:16px;
}
.dialog-backdrop.open{ display:flex; }
.dialog-card{
  width:100%; max-width:400px;
  background:var(--panel-alt);
  border:1px solid var(--border);
  border-radius:16px;
  padding:18px 18px 16px;
  box-shadow:0 12px 40px rgba(0,0,0,.5);
}
.dialog-title{
  display:flex; align-items:center; gap:8px;
  font-size:14.5px; font-weight:700; margin-bottom:8px;
}
.dialog-title .dot{ width:8px; height:8px; border-radius:50%; background:var(--holiday); flex:none; }
.dialog-body{ font-size:13px; line-height:1.7; color:var(--text-muted); }
.dialog-body b{ color:var(--text); font-weight:600; }
.dialog-actions{ display:flex; gap:8px; margin-top:16px; }
.dialog-btn{
  flex:1; text-align:center; font:inherit; font-size:13px; font-weight:600;
  padding:10px; border-radius:10px; cursor:pointer; border:1px solid var(--border);
  background:transparent; color:var(--text-muted); text-decoration:none;
}
.dialog-btn.primary{
  background:rgba(243,152,0,.14); border-color:var(--line-tozai); color:var(--text);
}
.dialog-btn:focus-visible{ outline:2px solid var(--line-tozai); outline-offset:1px; }