/* =============================================================
 * mistFES 2026 Day2 立ち回り — styles.css
 * BEM 命名・dark mode first・STRICT MOBILE-FIRST (~390px iPhone)
 * BREAKPOINTS: min-width 600px / 900px / 1200px のみ (max-width 禁止)
 * カラー/z-index は CONTRACT に従い FROZEN。
 * ============================================================= */

:root {
  /* ---- Base palette (dark) ---- */
  --bg:              #0f1115;
  --bg-elevated:     #181b22;
  --bg-elevated-2:   #21252e;
  --fg:              #f0f2f6;
  --fg-muted:        #b8bdc9;
  --fg-subtle:       #7d8595;
  --border:          #2a2f3a;
  --border-strong:   #3b424f;

  /* ---- Category colors (FROZEN 役割割当: live=ピンク / goods=シアン / staff=アンバー) */
  --cat-staff:       #f5a524;
  --cat-staff-bg:    rgba(245, 165, 36, 0.18);
  --cat-live:        #ff5d8f;
  --cat-live-bg:     rgba(255, 93, 143, 0.18);
  --cat-goods:       #22d3ee;
  --cat-goods-bg:    rgba(34, 211, 238, 0.18);
  --cat-travel:      #94a3b8;

  /* ---- Area colors (data.js area.color と整合) ---- */
  --area-osu:        #7C9D6E;
  --area-osu-bg:     rgba(124, 157, 110, 0.18);
  --area-sakae:      #3F88C5;
  --area-sakae-bg:   rgba(63, 136, 197, 0.18);

  /* ---- Status / emphasis ---- */
  --critical:        #facc15;
  --critical-bg:     rgba(250, 204, 21, 0.22);
  --urgent:          #ef4444;
  --ok:              #4ade80;
  --now-line:        #ef4444;

  /* ---- Overlap-band (異エリア重なり) ---- */
  --overlap:         #fb923c;                  /* オレンジ */
  --overlap-bg:      rgba(251, 146, 60, 0.16);

  /* ---- Typography (mobile base / iOS zoom-in 防止: 本文最小 16px) ---- */
  --font-base: system-ui, -apple-system, "Helvetica Neue", "Hiragino Sans", "Yu Gothic UI", sans-serif;
  --fs-xs:     0.8125rem; /* 13px = ガント item 内 / 凡例 / バッジ等 */
  --fs-sm:     0.875rem;  /* 14px = 副情報 (移動表記 等) */
  --fs-md:     1rem;      /* 16px = 本文最小 */
  --fs-lg:     1.125rem;  /* 18px */
  --fs-xl:     1.375rem;  /* 22px */
  --fs-2xl:    1.75rem;
  --fs-3xl:    2.25rem;
  --fs-clock:  2.25rem;
  --lh-tight:  1.2;
  --lh-normal: 1.5;

  /* ---- Sizing / spacing ---- */
  --tap-min:   44px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --header-h:  104px;     /* mobile: event + date + clock 想定実測値 */
  --nav-h:     56px;      /* mobile bottom nav (タップ重視で 56) */

  /* ---- Gantt geometry (VERTICAL timeline / mobile-first)
     縦軸 = 時間 (07:00→20:00 = 13h = 780min)
     横軸 = エリア 2 列 (大須 / 栄)
     --px-per-hour を中心に全 geometry が派生する (JS の getPxPerHour と整合)。
     mobile 150 → 1h=150px (= 2.5px/min)  / 13h = 1950px
     ≥600px  120 → 1h=120px (= 2.0px/min)  / 13h = 1560px
     ≥900px   96 → 1h= 96px (= 1.6px/min)  / 13h = 1248px */
  --px-per-hour:        150px;
  --gantt-time-axis-w:  44px;     /* 左端 時間軸ラベル列幅 (mobile) */
  --gantt-lane-header-h:32px;     /* 上端 エリアヘッダ高 (mobile) */
  --gantt-sublane-gap:  4px;      /* 同エリア内左右分割の間隔 */
  --gantt-item-pad-v:   3px;
  --gantt-item-pad-h:   6px;
  --grid-major:         rgba(255,255,255,0.18);
  --grid-minor:         rgba(255,255,255,0.08);
}

/* breakpoints: mobile-first 3 段階 ----------------------------- */
@media (min-width: 600px) {
  :root {
    --header-h:           96px;
    --nav-h:              48px;
    --px-per-hour:        120px;        /* 2.0px/min */
    --gantt-time-axis-w:  56px;
    --gantt-lane-header-h:36px;
  }
}
@media (min-width: 900px) {
  :root {
    --px-per-hour:        96px;         /* 1.6px/min */
    --gantt-time-axis-w:  64px;
    --gantt-lane-header-h:40px;
    --fs-clock:           2.5rem;
  }
}
@media (min-width: 1200px) {
  :root {
    --gantt-time-axis-w:  72px;
    --fs-clock:           2.75rem;
  }
}

/* ============================================================= */
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-base);
  background: var(--bg);
  color: var(--fg);
  line-height: var(--lh-normal);
  /* mobile: ボトム固定 nav + iOS ホームバー領域確保 */
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
}
@media (min-width: 600px) {
  body { padding-bottom: 0; }   /* tablet 以上は top sticky に戻るので不要 */
}

h1, h2, h3 { margin: 0; line-height: var(--lh-tight); }
ul { list-style: none; margin: 0; padding: 0; }
a  { color: inherit; text-decoration: none; }

/* ===================== HEADER ===================== */
.app__header {
  position: sticky;
  top: 0;
  z-index: 80;     /* 外側階層: popover(100) > header(80) > nav(70) > [gantt 内部は isolate で隔離] */
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  padding: calc(var(--space-3) + env(safe-area-inset-top)) var(--space-4) var(--space-3);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: var(--space-3);
  row-gap: var(--space-1);
  align-items: baseline;
}
.header__event-name { font-size: var(--fs-lg); font-weight: 700; grid-column: 1; grid-row: 1; }
.header__date       { font-size: var(--fs-sm); color: var(--fg-muted); margin: 0; grid-column: 2; grid-row: 1; align-self: baseline; }
.header__clock      { margin: 0; grid-column: 1 / -1; grid-row: 2; text-align: center; }
.header__clock-value {
  font-size: var(--fs-clock);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--fg);
}
.header__clock-test {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 2px 6px;
  font-size: var(--fs-xs);
  color: var(--critical);
  border: 1px solid var(--critical);
  border-radius: var(--radius-sm);
  vertical-align: middle;
}

/* ===================== NAV (mobile = bottom fixed, tablet+ = top sticky) ===================== */
.app__nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;                    /* header(80) より下、popover(100) より下、gantt 内部は isolate で独立 */
  background: var(--bg-elevated-2);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav__list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3 項目を均等 (親指リーチ + マップ追加) */
}
.nav__item { /* grid item */ }
.nav__link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  padding: 0 var(--space-2);       /* 3 列化に伴い狭幅 mobile でも 5 文字が収まるよう縮める */
  color: var(--fg-muted);
  font-size: var(--fs-md);         /* 16px: iOS zoom 防止 + 親指タップ可視性 */
  font-weight: 700;
}
.nav__link:active,
.nav__link:focus-visible,
.nav__link[aria-current="true"] {
  color: var(--fg);
  background: rgba(255,255,255,0.06);
}
@media (hover: hover) {
  .nav__link:hover { color: var(--fg); background: rgba(255,255,255,0.04); }
}

@media (min-width: 600px) {
  .app__nav {
    position: sticky;
    top: var(--header-h);
    bottom: auto;
    z-index: 70;                  /* header(80) より下、popover(100) より下 */
    border-top: 0;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0;
  }
  .nav__list {
    display: flex;
    overflow-x: auto;
  }
  .nav__item { flex: 0 0 auto; }
  .nav__link { padding: 0 var(--space-5); font-size: var(--fs-sm); }
}

/* ===================== MAIN ===================== */
.app__main {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
@media (min-width: 600px) {
  .app__main { padding: var(--space-5); }
}
@media (min-width: 900px) {
  .app__main { padding: var(--space-5) var(--space-6); }
}
@media (min-width: 1200px) {
  .app__main { max-width: 1280px; margin: 0 auto; }
}

section {
  /* mobile: nav は画面下なのでアンカー阻害なし → header 分だけで OK */
  scroll-margin-top: var(--header-h);
}
@media (min-width: 600px) {
  section { scroll-margin-top: calc(var(--header-h) + var(--nav-h)); }
}

.now-next__heading, .gantt__heading {
  font-size: var(--fs-xl);
  margin-bottom: var(--space-3);
  padding-left: var(--space-2);
  border-left: 4px solid var(--fg-subtle);
}

/* ===================== NOW-NEXT ===================== */
.now-next__card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 6px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}
.now-next__card--limit       { border-radius: var(--radius-lg); border-left-color: var(--ok); }
.now-next__card--current     { border-left-color: var(--cat-live); }
.now-next__card--next        { border-left-color: var(--cat-goods); }
.now-next__card--empty       { color: var(--fg-subtle); font-style: italic; }

.now-next__limit {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: var(--space-3);
  align-items: baseline;
}
.now-next__limit-label     { font-size: var(--fs-sm); color: var(--fg-muted); grid-column: 1; }
.now-next__limit-time      {
  font-size: var(--fs-3xl);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  grid-column: 1;
}
.now-next__limit-countdown {
  font-size: var(--fs-lg);
  font-weight: 700;
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--fg-muted);
}

/* 出発リミット 追加サブ行 (異エリア移動 / 午後クラッシュ警告) */
.now-next__limit-travel {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-md);
  color: var(--fg-muted);
}
.now-next__limit-clash {
  margin: var(--space-2) 0 0;
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--bg);
  background: var(--critical);
  border-radius: var(--radius-sm);
}

.now-next__card--limit.now-next__limit--urgent {
  border-left-color: var(--urgent);
  animation: pulse-urgent 1s ease-in-out infinite;
}
.now-next__card--limit.now-next__limit--urgent .now-next__limit-countdown { color: var(--urgent); }
.now-next__card--limit.now-next__limit--overdue {
  border-left-color: var(--urgent);
  background: rgba(239, 68, 68, 0.12);
}
.now-next__card--limit.now-next__limit--overdue .now-next__limit-countdown { color: var(--urgent); font-weight: 800; }
.now-next__card--limit.now-next__limit--idle { opacity: 0.55; }

.now-next__card[data-conflict="critical"] {
  border: 2px solid var(--critical);
  background: var(--critical-bg);
  animation: pulse-urgent 1.4s ease-in-out infinite;
}
.now-next__card[data-conflict="warning"] {
  border: 1px dashed var(--critical);
}

@keyframes pulse-urgent {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.0); }
  50%      { box-shadow: 0 0 0 6px rgba(239,68,68,0.18); }
}
@media (prefers-reduced-motion: reduce) {
  .now-next__card--limit.now-next__limit--urgent { animation: none; }
  .now-next__card[data-conflict="critical"]      { animation: none; }
}

.now-next__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}
.now-next__legend-item { display: inline-flex; align-items: center; gap: var(--space-2); }

/* now-next slots: mobile 1 列, tablet 以上 2 列 */
.now-next__slots {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
@media (min-width: 600px) {
  .now-next__slots {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }
}

/* ===================== shared .item ===================== */
.item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-2) var(--space-3);
  align-items: center;
  padding: var(--space-3);
  min-height: var(--tap-min);
}
.item__badge {
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.item__badge--cat-live  { background: var(--cat-live-bg);  color: var(--cat-live);  border: 1px solid var(--cat-live); }
.item__badge--cat-goods { background: var(--cat-goods-bg); color: var(--cat-goods); border: 1px solid var(--cat-goods); }
.item__badge--cat-staff { background: var(--cat-staff-bg); color: var(--cat-staff); border: 1px solid var(--cat-staff); }
.item__time  { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--fg); font-size: var(--fs-sm); }
.item__title { font-size: var(--fs-md); font-weight: 700; grid-column: 1 / -1; }
.item__venue { color: var(--fg-muted); font-size: var(--fs-sm); }
.item__area  {
  font-size: var(--fs-xs);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.item[data-area="osu"]   .item__area { background: var(--area-osu-bg);   color: var(--area-osu);   border-color: var(--area-osu); }
.item[data-area="sakae"] .item__area { background: var(--area-sakae-bg); color: var(--area-sakae); border-color: var(--area-sakae); }

.now-next__card-label {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-sm);
  color: var(--fg-subtle);
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ===================== GANTT (VERTICAL TIMELINE) =====================
   構造:
     .gantt
       .gantt__heading                                        (見出し、scroll の外)
       .gantt__scroll                                         (display:grid, overflow-y:auto, bounded)
         .gantt__corner       [row1/col1, sticky top+left, z50]
         .gantt__lane-headers [row1/col2 span2, sticky top,  z40]
           .gantt__lane-header[data-area="osu"|"sakae"]
         .gantt__time-axis    [row2/col1, sticky left,        z30]
           .gantt__tick(.gantt__tick--hour|--half)
             .gantt__tick-label                               (style.top で配置)
         .gantt__body         [row2/col2 span2, position:relative; grid 1fr 1fr]
           .gantt__overlap-bands                              (z4)
             .gantt__overlap-band(--critical)                 (z4|5, 横一杯)
               .gantt__overlap-label                          (sticky left:0)
           .gantt__lane[data-area="osu"|"sakae"]              (col1|col2)
             .gantt__lane-track
               .gantt__grid                                   (z1, 1h 横グリッド線)
               .gantt__sublane[data-cols][data-col]
                 .gantt__item                                 (z10, abs top/height)
                   .gantt__item-head
                     .item__badge.item__badge--cat-*
                     .gantt__item-time
                   .gantt__item-title
                   .gantt__item-venue
                   .gantt__item-note (JS が長尺のみ追加)
           .gantt__now-line                                   (z20, 横線)
   z-index ladder (すべて .gantt__body 直下の context で評価される / lane は stacking context を作らない):
     grid(0) < overlap-bands(3) < overlap-band(4) < critical(5)
       < item(10) < now-line(20) < time-axis(30) < lane-headers(40) < corner(50)
*/

.gantt {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
}
.gantt__heading {
  padding: var(--space-3) var(--space-4) var(--space-2);
  border-left: none;
}

/* ---- スクロール容器: CSS Grid + 内側 縦スクロール (bounded) ---- */
.gantt__scroll {
  position: relative;
  display: grid;
  /* 大須 min 200px / 栄 min 400px → mobile では合計 644px で横スクロール、広い画面では 1fr:2fr に拡張 */
  grid-template-columns: var(--gantt-time-axis-w) minmax(200px, 1fr) minmax(400px, 2fr);
  grid-template-rows: var(--gantt-lane-header-h) auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  isolation: isolate;     /* ガント内部の z-index (corner=50/lane-headers=40/...) を外側階層から完全に隔離 */
  /* 内側スクロールにするため bounded height。ヘッダ / nav / 出発リミット等を残しつつ
     縦スクロール領域を確保する近似値。dvh 採用で iOS のアドレスバー揺らぎに追従。
     mobile は bottom-fixed nav (var(--nav-h)) + iOS ホームバー (safe-area-inset-bottom) も差し引く。 */
  max-height: calc(100dvh - var(--header-h) - var(--nav-h) - env(safe-area-inset-bottom) - var(--space-6));
}
@media (min-width: 600px) {
  .gantt__scroll {
    /* tablet+ では top sticky の nav も画面上にあるためその分も差し引く (safe-area は body 側で消化済み) */
    max-height: calc(100dvh - var(--header-h) - var(--nav-h) - var(--space-6));
  }
}

/* ---- 左上角: 時間軸列 × エリアヘッダ行 の交差点 (両方向 sticky で最前面) ---- */
.gantt__corner {
  grid-row: 1;
  grid-column: 1;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 50;
  height: var(--gantt-lane-header-h);
  background: var(--bg-elevated-2);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* ---- 上端エリアヘッダ (大須 / 栄) ---- */
.gantt__lane-headers {
  grid-row: 1;
  grid-column: 2 / span 2;
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr 2fr;
  height: var(--gantt-lane-header-h);
  background: var(--bg-elevated-2);
  border-bottom: 1px solid var(--border);
}
.gantt__lane-header {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.gantt__lane-header + .gantt__lane-header { border-left: 1px solid var(--border); }
.gantt__lane-header[data-area="osu"]   { color: var(--area-osu);   background: linear-gradient(to bottom, var(--area-osu-bg),   var(--bg-elevated-2) 90%); }
.gantt__lane-header[data-area="sakae"] { color: var(--area-sakae); background: linear-gradient(to bottom, var(--area-sakae-bg), var(--bg-elevated-2) 90%); }

/* ---- 左端時間軸 (sticky left; tick は JS が style.top で配置) ----
   sticky 配置は containing block を成立させるので position:relative は不要。 */
.gantt__time-axis {
  grid-row: 2;
  grid-column: 1;
  position: sticky;
  left: 0;
  z-index: 30;
  width: var(--gantt-time-axis-w);
  background: var(--bg-elevated-2);
  border-right: 1px solid var(--border);
  /* height は JS が inline style で付与 (= TOTAL_MIN * ppm) */
}
.gantt__tick {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--grid-minor);
  pointer-events: none;
}
.gantt__tick--hour { background: var(--grid-major); }
.gantt__tick-label {
  position: absolute;
  left: 4px;
  /* JS が style.top で配置 → 線中央寄せ */
  transform: translateY(-50%);
  padding: 0 2px;
  background: var(--bg-elevated-2);
  font-size: var(--fs-xs);
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---- 本体: 2 カラム (大須 / 栄)。height は JS が付与 ---- */
.gantt__body {
  grid-row: 2;
  grid-column: 2 / span 2;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 2fr;
  /* height は JS が inline style で付与 (= TOTAL_MIN * ppm) */
}

/* ---- レーン (1 列 = 1 エリア) ----
   z-index を付けない (= stacking context を作らない) ことで、配下の .gantt__item (z:10) が
   .gantt__body 直下の .gantt__overlap-bands (z:3) / overlap-band (z:4-5) より上に正しく描画される。
   背景はグラデのみで、レイヤ順は .gantt__grid (z:0) と overlap-bands (z:3) で表現する。 */
.gantt__lane {
  position: relative;
  height: 100%;
}
.gantt__lane + .gantt__lane { border-left: 1px solid var(--border); }
.gantt__lane[data-area="osu"]   { background: linear-gradient(to bottom, var(--area-osu-bg),   transparent 80px); }
.gantt__lane[data-area="sakae"] { background: linear-gradient(to bottom, var(--area-sakae-bg), transparent 80px); }

.gantt__lane-track {
  position: relative;
  height: 100%;
}

/* ---- 1 時間ごとの水平グリッド線 (縦軸方向) ----
   .gantt__lane が stacking context を作らないため、z:0 にして overlap-bands(z:3) より下に置く。 */
.gantt__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(to bottom, var(--grid-minor) 0 1px, transparent 1px calc(var(--px-per-hour) / 2)),
    repeating-linear-gradient(to bottom, var(--grid-major) 0 1px, transparent 1px var(--px-per-hour));
}

/* ---- sub-lane: 同エリア内重なりの左右分割 (data-cols / data-col を JS が付与) ---- */
.gantt__sublane {
  position: absolute;
  top: 0;
  bottom: 0;
}
.gantt__sublane[data-cols="1"] { left: 0; right: 0; }
.gantt__sublane[data-cols="2"][data-col="0"] { left: 0; right: calc(50% + var(--gantt-sublane-gap) / 2); }
.gantt__sublane[data-cols="2"][data-col="1"] { left: calc(50% + var(--gantt-sublane-gap) / 2); right: 0; }
.gantt__sublane[data-cols="3"][data-col="0"] { left: 0; right: calc(66.66% + var(--gantt-sublane-gap) / 2); }
.gantt__sublane[data-cols="3"][data-col="1"] { left: calc(33.33% + var(--gantt-sublane-gap) / 2); right: calc(33.33% + var(--gantt-sublane-gap) / 2); }
.gantt__sublane[data-cols="3"][data-col="2"] { left: calc(66.66% + var(--gantt-sublane-gap) / 2); right: 0; }

/* ---- 競合バンド (異エリア重なり) — 縦版では「横一杯の帯」 ---- */
.gantt__overlap-bands {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  /* sticky 子 (label) を効かせるため overflow visible 維持 */
  overflow: visible;
}
.gantt__overlap-band {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 4;
  background: linear-gradient(
    to right,
    rgba(251, 146, 60, 0.22) 0%,
    rgba(251, 146, 60, 0.08) 50%,
    rgba(251, 146, 60, 0.22) 100%
  );
  border-top:    1px dashed var(--overlap);
  border-bottom: 1px dashed var(--overlap);
  pointer-events: none;
  /* top / height は JS が付与 */
}
.gantt__overlap-band--critical {
  z-index: 5;
  background: linear-gradient(
    to right,
    rgba(250, 204, 21, 0.30) 0%,
    rgba(250, 204, 21, 0.12) 50%,
    rgba(250, 204, 21, 0.30) 100%
  );
  border-top:    2px solid var(--critical);
  border-bottom: 2px solid var(--critical);
}
@media (prefers-reduced-motion: no-preference) {
  .gantt__overlap-band--critical { animation: pulse-band 2.4s ease-in-out infinite; }
}
@keyframes pulse-band {
  0%, 100% { filter: brightness(1.0); }
  50%      { filter: brightness(1.20); }
}
.gantt__overlap-label {
  position: sticky;
  left: 4px;
  top: 0;
  display: inline-block;
  padding: 2px 6px;
  margin: 4px;
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--bg);
  background: var(--critical);
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 2px var(--critical-bg);
  letter-spacing: 0.04em;
  white-space: nowrap;
  pointer-events: none;
}

/* ---- アイテム (絶対配置: top/height を JS が付与) ---- */
.gantt__item {
  position: absolute;
  left: 2px;
  right: 2px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 2px;
  padding: var(--gantt-item-pad-v) var(--gantt-item-pad-h);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated-2);
  color: var(--fg);
  font-size: var(--fs-xs);
  line-height: 1.25;
  overflow: hidden;
  min-height: 28px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
.gantt__item[data-cat="live"]  { background: var(--cat-live-bg);  border-color: var(--cat-live);  color: var(--fg); }
.gantt__item[data-cat="goods"] { background: var(--cat-goods-bg); border-color: var(--cat-goods); color: var(--fg); }
.gantt__item[data-cat="staff"] { background: var(--cat-staff-bg); border-color: var(--cat-staff); color: var(--fg); }
.gantt__item[data-conflict="critical"] { outline: 2px solid var(--critical); outline-offset: 1px; }
.gantt__item[data-conflict="warning"]  { outline: 1px dashed var(--critical); outline-offset: 1px; }

/* アイテム内 1 行目: [カテゴリバッジ + 時刻] */
.gantt__item-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  line-height: 1.1;
}
.gantt__item-time {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 700;
  color: var(--fg);
  white-space: nowrap;
}
/* タイトルは可読性最重視 — 短尺でも fs-md を保持し、行高で詰める */
.gantt__item-title {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--fg);
}
.gantt__item-venue {
  font-size: 11px;
  color: var(--fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gantt__item-note {
  font-size: 11px;
  color: var(--fg-subtle);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 短尺 item (duration < 30min → JS が .gantt__item--short を付与):
   タイトルは fs-md を維持し (要件 B)、venue / note を畳む。head と title だけ表示。
   ※ .gantt__item と二重結合して specificity を (0,2,0) に上げ、≥900px の
      `.gantt__item { padding: 4px 8px }` (specificity 0,1,0) より確実に勝たせる。 */
.gantt__item.gantt__item--short {
  gap: 1px;
  padding: 2px var(--gantt-item-pad-h);
}
.gantt__item--short .gantt__item-venue,
.gantt__item--short .gantt__item-note  { display: none; }

/* 長尺 item (duration >= 70min → JS が .gantt__item--long を付与): note を表示 */
.gantt__item:not(.gantt__item--long) .gantt__item-note { display: none; }

/* ---- 現在時刻ライン (横線) ---- */
.gantt__now-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--now-line);
  box-shadow: 0 0 8px var(--now-line), 0 0 2px var(--now-line);
  pointer-events: none;
  z-index: 20;
  /* top は JS が 1s ごとに付与 */
}
.gantt__now-line::after {
  content: "";
  position: absolute;
  left: -4px;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--now-line);
  box-shadow: 0 0 6px var(--now-line);
}

/* ---- breakpoint 固有: アイテム padding を僅かに広げる ---- */
@media (min-width: 900px) {
  .gantt__item { padding: 4px 8px; }
}

/* ---- Popover (JS が body 直下に生成) ----
   mobile (base) = bottom-sheet, tablet 以上 (≥600px) = floating panel */
.gantt__popover {
  position: fixed;
  z-index: 100;     /* 外側階層: header(80) / nav(70) より上、最前面 */
  left: 0;
  right: 0;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));  /* mobile: nav の上に立ち上げる */
  top: auto;
  background: var(--bg-elevated-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  border-bottom: 0;
  padding: var(--space-4);
  box-shadow: 0 12px 36px rgba(0,0,0,0.6);
  max-width: none;
}
@media (min-width: 600px) {
  .gantt__popover {
    left: 50%;
    right: auto;
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    max-width: 360px;
    border-radius: var(--radius-md);
    border-bottom: 1px solid var(--border-strong);
  }
}
.gantt__popover-close {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  background: transparent;
  border: 0;
  color: var(--fg-muted);
  font-size: var(--fs-xl);
  cursor: pointer;
}
.gantt__popover-cat[data-cat="live"]  { color: var(--cat-live);  font-weight: 700; }
.gantt__popover-cat[data-cat="goods"] { color: var(--cat-goods); font-weight: 700; }
.gantt__popover-cat[data-cat="staff"] { color: var(--cat-staff); font-weight: 700; }
.gantt__popover-title { font-size: var(--fs-lg); margin: var(--space-1) 0 var(--space-2); }
.gantt__popover-meta { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px var(--space-3); font-size: var(--fs-sm); }
.gantt__popover-meta dt { color: var(--fg-subtle); }
.gantt__popover-meta dd { margin: 0; }

/* ===================== FOOTER ===================== */
.app__footer {
  margin-top: var(--space-6);
  padding: var(--space-5) var(--space-4);
  border-top: 1px solid var(--border);
  text-align: center;
}
.footer__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  padding: 0 var(--space-4);
  color: var(--fg-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-md);
}
.footer__link:active,
.footer__link:focus-visible { color: var(--fg); border-color: var(--border-strong); }
@media (hover: hover) {
  .footer__link:hover { color: var(--fg); border-color: var(--border-strong); }
}

/* ===================== VENUE MAP ===================== */
/* セクション全体: isolation: isolate で外側 z-index 階層 (header/nav/popover) と完全隔離。
   SVG viewBox はメートル単位、preserveAspectRatio=meet で距離スケール保存。 */
.map {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4) var(--space-4);
  padding-left:  max(var(--space-4), env(safe-area-inset-left));
  padding-right: max(var(--space-4), env(safe-area-inset-right));
  isolation: isolate;
  position: relative;
}
.map__heading {
  font-size: var(--fs-xl);
  margin-bottom: var(--space-3);
  padding-left: var(--space-2);
  border-left: 4px solid var(--fg-subtle);
}
.map__aria-live {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}

/* viewport: aspect-ratio コンテナ。SVG の preserveAspectRatio meet で内部余白が出る */
.map__viewport {
  position: relative;       /* chrome の absolute 基準 */
  width: 100%;
  /* viewBox の自動計算結果 (約 1290 / 935 ≒ 1.38) を CSS フォールバック値として採用。
     viewport box は CSS で決まり、SVG meet が縦横比保存。 */
  aspect-ratio: 1290 / 935;
  max-height: 62vh;         /* mobile で巨大化しすぎ防止 */
  background: #0b0d12;      /* マップ専用の深い暗色 */
  border-radius: var(--radius-sm);
  overflow: hidden;
  /* aspect-ratio フォールバック (古い Safari): min-height で潰れを防止 */
  min-height: 260px;
}
@media (min-width: 600px) {
  .map__viewport { max-height: 480px; min-height: 320px; }
}
@media (min-width: 900px) {
  .map__viewport { max-height: 560px; }
}
@media (min-width: 1200px) {
  .map__viewport { max-width: 1100px; margin-inline: auto; }
}

.map__svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---- SVG layer styling ---- */
/* エリア凸包 (大須=円 / 栄=楕円) — 背景レイヤ */
.map__area-hull {
  stroke-width: 1.5;
  stroke-dasharray: 6 4;
}
.map__area-hull--osu   { fill: rgba(124, 157, 110, 0.14); stroke: rgba(124, 157, 110, 0.55); }
.map__area-hull--sakae { fill: rgba(63, 136, 197, 0.12); stroke: rgba(63, 136, 197, 0.50); }

/* ランドマーク (subordinate: venue dot より小さく / 中立色基調 / 種別ごとに色分け)
   - layer 描画順は SVG 上では venue より前 (= 背面) なので、venue dot/label が常に上に出る。
   - hitbox で 44px 確保しつつ pointer-events を有効化し、タップ → 簡易 popover を出す。
   - 黄 pulse / dashed リング は絶対に適用しない (current/next 強調は venue だけ)。 */
.map__landmark {
  cursor: pointer;
  opacity: 0.62;
}
.map__landmark:hover,
.map__landmark:focus { opacity: 0.92; outline: none; }
.map__landmark-hitbox { fill: transparent; pointer-events: all; }
.map__landmark-bg {
  fill: var(--bg-elevated-2);
  stroke: rgba(184, 189, 201, 0.55);
  stroke-width: 1.25;
}
.map__landmark-glyph {
  fill: var(--fg);
  font-size: 12px;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}
.map__landmark-label {
  fill: var(--fg-subtle);
  font-size: 10px;
  font-weight: 600;
  paint-order: stroke;
  stroke: #0b0d12;
  stroke-width: 2.5px;
  text-anchor: middle;
  dominant-baseline: hanging;
  pointer-events: none;
}
/* 種別ごと: bg fill / stroke / glyph fill を微差で */
.map__landmark--station    .map__landmark-bg    { fill: rgba(33, 37, 46, 0.85); stroke: rgba(184, 189, 201, 0.55); }
.map__landmark--station    .map__landmark-glyph { fill: var(--fg); }
.map__landmark--shrine     .map__landmark-bg    { fill: rgba(120, 30, 30, 0.55); stroke: rgba(220, 80, 80, 0.65); }
.map__landmark--shrine     .map__landmark-glyph { fill: #fca5a5; }
.map__landmark--park       .map__landmark-bg    { fill: rgba(30, 80, 40, 0.55); stroke: rgba(74, 222, 128, 0.55); }
.map__landmark--park       .map__landmark-glyph { fill: #86efac; }
.map__landmark--commercial .map__landmark-bg    { fill: rgba(30, 50, 80, 0.65); stroke: rgba(125, 150, 200, 0.55); }
.map__landmark--commercial .map__landmark-glyph { fill: #cbd5e1; }
.map__landmark--building   .map__landmark-bg    { fill: rgba(45, 50, 60, 0.85); stroke: rgba(160, 165, 180, 0.55); }
.map__landmark--building   .map__landmark-glyph { fill: var(--fg-muted); }

/* 経路線 (現在→次 の 1 本のみ) */
.map__route-line {
  stroke: #fbbf24;
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
}
.map__route-line[data-method="walk"]   { stroke-dasharray: none; }
.map__route-line[data-method="subway"] { stroke-dasharray: 8 6; }
.map__route-arrow { fill: #fbbf24; }
.map__route-label-bg {
  fill: rgba(15, 17, 21, 0.88);
  rx: 4;
}
.map__route-label {
  fill: #fbbf24;
  font-size: 13px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}

/* venue */
.map__venue { cursor: pointer; }
.map__venue-hitbox { fill: transparent; pointer-events: all; }   /* 44px 相当の透明ヒット領域 (r=22 meters) */
.map__venue-dot {
  stroke: #ffffff;
  stroke-width: 2;
}
.map__venue--osu   .map__venue-dot { fill: var(--area-osu); }
.map__venue--sakae .map__venue-dot { fill: var(--area-sakae); }
.map__venue--cluster .map__venue-dot { stroke-width: 3; }
.map__venue-cluster-inner {
  fill: var(--bg-elevated);
  stroke: #ffffff;
  stroke-width: 1.5;
}
.map__venue-cluster-count {
  font-size: 10px;
  font-weight: 800;
  fill: #ffffff;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}

/* highlight: pulse halo (current) / next dashed ring */
.map__pulse-halo {
  fill: rgba(251, 191, 36, 0.55);
  pointer-events: none;
}
.map__next-ring {
  fill: none;
  stroke: #fbbf24;
  stroke-width: 2.5;
  stroke-dasharray: 4 3;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .map__pulse-halo { animation: map-pulse 1.8s ease-in-out infinite; }
  .map__next-ring  { animation: map-dash 12s linear infinite; }
}
@keyframes map-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.12; }
}
@keyframes map-dash {
  to { stroke-dashoffset: -49; }
}

/* venue label (SVG text): paint-order で縁取り → 背景なしで可読 */
.map__venue-label {
  font-size: 12px;
  font-weight: 700;
  fill: var(--fg);
  paint-order: stroke;
  stroke: #0b0d12;
  stroke-width: 3px;
  dominant-baseline: hanging;
  text-anchor: middle;
  pointer-events: none;
}

/* コンパス / スケールバー (SVG 内ベクトル) */
.map__compass-bg     { fill: rgba(15, 17, 21, 0.78); stroke: rgba(184, 189, 201, 0.45); stroke-width: 1; }
.map__compass-n      { fill: var(--fg); font-size: 14px; font-weight: 800; text-anchor: middle; dominant-baseline: central; }
.map__compass-arrow  { fill: #fbbf24; }
.map__scale-bar      { stroke: var(--fg-muted); stroke-width: 3; }
.map__scale-label    { fill: var(--fg-muted); font-size: 11px; text-anchor: middle; dominant-baseline: hanging; }

/* ---- Legend (HTML, SVG 外) ---- */
.map__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}
.map__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.map__legend-item::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.map__legend-item--osu::before     { background: var(--area-osu); }
.map__legend-item--sakae::before   { background: var(--area-sakae); }
.map__legend-item--current::before { background: rgba(251, 191, 36, 0.55); box-shadow: 0 0 6px #fbbf24; }
.map__legend-item--next::before    { background: transparent; border: 2px dashed #fbbf24; }
.map__legend-item--walk::before    {
  width: 18px;
  height: 0;
  border-radius: 0;
  border-top: 3px solid #fbbf24;
}
.map__legend-item--subway::before  {
  width: 18px;
  height: 0;
  border-radius: 0;
  border-top: 3px dashed #fbbf24;
}

/* ---- Detail panel (venue タップ詳細, lion クラスタはフロア分離表示) ---- */
.map__detail {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--bg-elevated-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
}
.map__detail[hidden] { display: none; }
.map__detail-title { font-size: var(--fs-md); font-weight: 700; margin: 0 0 var(--space-2); }
.map__detail-list  { display: flex; flex-direction: column; gap: var(--space-2); }
.map__detail-row   {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-2);
  padding: var(--space-2);
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.map__detail-floor {
  font-size: var(--fs-xs);
  font-weight: 800;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--cat-staff-bg);
  color: var(--cat-staff);
  align-self: start;
}
.map__detail-name    { font-weight: 700; }
.map__detail-address { color: var(--fg-muted); font-size: var(--fs-xs); grid-column: 1 / -1; }

/* landmark 用の floor バッジ (種別ラベル "駅" / "公園" 等) */
.map__detail-row--landmark { background: var(--bg-elevated); }
.map__detail-floor--landmark {
  background: var(--bg-elevated-2);
  color: var(--fg-muted);
  border: 1px solid var(--border);
}

/* ---- Popover アクションボタン (Level 1 タップ → Google Maps 起動) ----
   要件: タップ領域 44px / target=_blank / iPhone なら Google Maps アプリが自動起動。 */
.map__popover-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.map__popover-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--fs-md);
  font-weight: 700;
  text-decoration: none;
  line-height: var(--lh-tight);
  border: 1px solid var(--border-strong);
  flex: 1 1 auto;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.map__popover-btn:focus-visible { outline: 2px solid #fbbf24; outline-offset: 2px; }
.map__popover-btn--primary {
  background: #fbbf24;
  color: #1a1407;
  border-color: #fbbf24;
}
.map__popover-btn--primary:hover { background: #fcd34d; }
.map__popover-btn--secondary {
  background: var(--bg-elevated-2);
  color: var(--fg);
}
.map__popover-btn--secondary:hover { background: var(--border); }
.map__popover-btn--next {
  background: rgba(251, 191, 36, 0.18);
  color: #fbbf24;
  border-color: #fbbf24;
  border-style: dashed;
}
.map__popover-btn--next:hover { background: rgba(251, 191, 36, 0.30); }

/* ---- Now-next 内 honest travel バッジ (マップ独自時間) ---- */
.now-next__travel-honest {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--space-2);
  padding: 2px 8px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.12);
  border: 1px dashed #fbbf24;
  border-radius: var(--radius-sm);
  grid-column: 1 / -1;
  width: fit-content;
}

@media (prefers-reduced-motion: reduce) {
  .map__pulse-halo,
  .map__next-ring { animation: none; }
}