/* ======================= 全局设置 ======================= */
* {
  box-sizing: border-box;
}

/* 去掉链接默认颜色/下划线（让链接看起来像普通文字） */
a {
  color: inherit;
  text-decoration: none;
}

a:visited {
  color: inherit;
}

a:hover,
a:active {
  color: inherit;
}

body {
  margin: 0;
  padding: 16px 12px;
  background-color: #111111;
  color: #ffffff;
  font-family: "fot-tsukubrdgothic-std", sans-serif;
  font-weight: 400;
  text-align: center;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  gap: 16px; /* 三块之间的间隔 */
}

h1,
h2,
h3,
p {
  margin: 0;
}

/* ======================= 头部（导航栏） ======================= */

/* 整个 header 区域 */
header {
  padding: 0; /* padding 由 .block--top 负责 */
}

/* 标题「バススケジュール」 */
header h2 {
  font-size: clamp(1.05rem, 4.2vw, 1.2rem);
  letter-spacing: 0.15em;
  margin-bottom: 8px;
}

/* 顶部导航：時刻表 / 現在 / 成安造形大学へ */
header nav {
  font-size: clamp(0.95rem, 3.8vw, 1.2rem);
  max-width: 640px;
  margin: 0 auto 8px;
  display: flex;
  justify-content: space-between; /* 左中右均匀分布 */
  align-items: center;
  flex-wrap: wrap; /* 小屏允许换行 */
  row-gap: 6px;
}

/* 顶部导航中的三个项目（<a> / <span>），每个平均占宽度 */
header nav > a,
header nav > span {
  flex: 1;
}

/* 左侧：時刻表 */
header nav > :nth-child(1) {
  text-align: left;
}

/* 中间：現在 */
header nav > :nth-child(2) {
  text-align: center;
}

/* 右侧：成安造形大学へ */
header nav > :nth-child(3) {
  text-align: right;
}

/* 红色箭头「へ」 */
.nav-arrow {
  color: #e53935;
  font-size: 1.6em;   /* 相对父元素放大 */
  font-weight: 600;
  margin-left: 0.15em;
  position: relative;
}

/* ======================= 主内容整体 ======================= */

main {
  padding: 0; /* padding 由 .block--middle 负责 */
  max-width: none;
  margin: 0;
}

/* ======================= 当前时间区域 ======================= */

section[aria-label="現在時刻"] {
  margin-bottom: 40px;
}

/* 大号当前时间（例如 18:09:45） */
section[aria-label="現在時刻"] h3 {
  font-size: clamp(1.6rem, 6vw, 2rem);
  margin-bottom: 8px;
}

/* 日期（例如 2025/11/16 （日）） */
section[aria-label="現在時刻"] p {
  font-size: 0.95rem;
  opacity: 0.9;
}

/* 星期文字（日／月／火…）的红色强调 */
.weekday-accent {
  color: #e53935;
}

/* 星期左右括号，保持普通白色 */
.weekday-bracket {
  color: #ffffff;
}

/* ======================= 行き先（目的地） ======================= */

section[aria-label="行き先"] h2 {
  font-size: 1.8rem;
  margin-bottom: 24px;
}

/* ======================= 巴士时间信息 ======================= */

section[aria-label="バスの出発と到着"] {
  margin-top: 8px;
}

/* 大号巴士时间（如 17:53） */
.next-bus-time {
  font-size: clamp(3rem, 10vw, 4rem);
  margin: 16px 0 8px;
}

/* “剩余 8 分 / 剩余 38 分” 文字行 */
.next-bus-remaining,
.arrival-remaining {
  font-size: 1.3rem;
  margin-bottom: 16px;
}

/* 向下箭头 */
.arrow-down {
  font-size: 2rem;
  margin: 16px 0;
}

/* 下一班之后的时间 */
.arrival-time {
  font-size: clamp(2.2rem, 8vw, 3rem);
  margin: 16px 0 8px;
}

/* 只让剩余时间中的数字变红并稍微放大（两方向共用） */
.next-bus-remaining span[data-type="to-ogoto"],
.arrival-remaining span[data-type="to-ogoto"],
.next-bus-remaining span[data-type="to-seian"],
.arrival-remaining span[data-type="to-seian"] {
  color: #e53935;
  font-size: 1.4em;
}

/* ======================= 页脚（Logo 区域） ======================= */

footer {
  padding: 0; /* padding 由 .block--bottom 负责 */
  opacity: 0.8;
}

footer h1 {
  margin: 0;
}

footer img {
  max-width: 160px;
  height: auto;
}

/* ======================= 大屏幕（PC 端） ======================= */

@media (min-width: 768px) {
  section[aria-label="現在時刻"] h3 {
    font-size: 2.4rem;
  }

  .next-bus-time {
    font-size: 5.4rem;
  }

  .arrival-time {
    font-size: 3.8rem;
  }
}

header h2,
header nav {
  font-weight: 500;
}

.next-bus-time,
.arrival-time,
section[aria-label="現在時刻"] h3 {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* 小屏时，让三段导航更稳定：第三段稍微小一点 */
header nav > :nth-child(3) {
  font-size: 0.95em;
}
/* ======================= 三块分区（手机端） ======================= */
.block {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  overflow: hidden;
}

/* 顶部/中部/底部的内边距分别保持你原来的节奏 */
.block--top {
  padding: 24px 16px 8px;
}

.block--middle {
  padding: 32px 16px 40px;
}

.block--bottom {
  padding: 24px 16px 32px;
}