/* =====================================================================
   Newsprint × UnderDog CIS — 報紙風前台佈景（載入於首頁與時刻表）
   色彩全取自 CIS：432C #333F48 / 431C #5B6770 / 7543C #98A4AE
   載入順序在 style.css 之後，僅覆蓋外觀（surface），不動版面結構。
   ===================================================================== */
:root {
  --np-paper: #F7F7F5;
  --np-paper2: #EDEFF0;
  --np-ink: #20282E;
  --np-ink2: #333F48;
  --np-mid: #5B6770;
  --np-steel: #98A4AE;
  --np-div: #D8DDE0;
  --np-serif: Georgia, "Times New Roman", "Songti TC", "Noto Serif TC", "PMingLiU", serif;
  --np-sans: "Helvetica Neue", Arial, "Microsoft JhengHei", "PingFang TC", sans-serif;
  --np-mono: Consolas, "Courier New", monospace;
}

body {
  background-color: var(--np-paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23333F48' fill-opacity='0.05' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
  color: var(--np-ink);
  font-family: var(--np-serif);
}

/* 直角化（保留 LINE 浮動圓鈕） */
.btn, .card, .tab, .badge, .stat, input, select, textarea,
.menu-drop, .price-hint, .day-tag, .vc-icon, .f-icon, .notice-card,
.photo-item img, .mapbox, .map-load, .menu-btn {
  border-radius: 0 !important;
}

h1, h2, h3 { font-family: var(--np-serif); color: var(--np-ink); }

/* ---- 報頭（masthead） ---- */
.np-mast { background: var(--np-paper); position: relative; }
.mast-meta {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border-bottom: 1px solid var(--np-ink);
  font-family: var(--np-mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--np-mid);
  padding: 8px 2px;
}
.mast-main { text-align: center; padding: 26px 0 16px; }
.mast-main img { height: 88px; max-width: 78vw; object-fit: contain; }
.mast-tag {
  margin-top: 10px; font-family: var(--np-sans); font-weight: 700;
  font-size: 12px; letter-spacing: .55em; text-transform: uppercase; color: var(--np-mid);
}
.mast-nav { border-top: 1px solid var(--np-ink); border-bottom: 1px solid var(--np-ink); background: var(--np-paper); }
.mast-nav-inner { display: flex; justify-content: center; align-items: stretch; position: relative; }
.mast-nav a {
  font-family: var(--np-sans); font-size: 13px; font-weight: 700; letter-spacing: .18em;
  color: var(--np-ink); text-decoration: none; padding: 13px 26px;
  border-left: 1px solid var(--np-div);
  transition: background .2s ease-out, color .2s ease-out;
}
.mast-nav a:first-child { border-left: 0; }
.mast-nav a:hover { background: var(--np-ink); color: var(--np-paper); }
.mast-nav .menu-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }
.menu-btn span { background: var(--np-ink); }
.menu-drop { background: #fff; border: 1px solid var(--np-ink); box-shadow: 5px 5px 0 0 var(--np-ink); }
.menu-drop a, .menu-drop .menu-item-btn { font-family: var(--np-sans); color: var(--np-ink2); }
.menu-drop hr { border-color: var(--np-div); }
@media (max-width: 760px) {
  .mast-nav a { padding: 12px 12px; font-size: 12px; letter-spacing: .08em; }
  .mast-nav a:nth-child(n+3) { display: none; }
  .mast-nav-inner { justify-content: flex-start; }
  .mast-main img { height: 64px; }
  .mast-tag { letter-spacing: .3em; }
}

/* ---- 跑馬燈頭條 ---- */
.ticker { background: var(--np-ink2); color: var(--np-paper); overflow: hidden; border-bottom: 4px solid var(--np-ink); }
.ticker-inner {
  display: inline-flex; white-space: nowrap; padding: 9px 0;
  animation: np-tick 36s linear infinite;
  font-family: var(--np-mono); font-size: 12px; letter-spacing: .12em;
}
.ticker-inner span { padding: 0 28px; border-left: 1px solid var(--np-mid); }
.ticker-inner b { color: var(--np-steel); font-weight: 700; }
@keyframes np-tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-inner { animation: none; } }

/* ---- 頭版（front page） ---- */
.front { display: grid; grid-template-columns: 8fr 4fr; border-bottom: 4px solid var(--np-ink); }
.front-left { padding: 40px 34px 40px 0; }
.kicker {
  display: inline-block; background: var(--np-ink); color: var(--np-paper);
  font-family: var(--np-sans); font-size: 11px; font-weight: 700;
  letter-spacing: .3em; text-transform: uppercase; padding: 5px 14px; margin-bottom: 20px;
}
.front-h1 {
  margin: 0; font-weight: 900; line-height: 1.14; letter-spacing: .01em;
  font-size: clamp(2rem, 4.8vw, 3.6rem); color: var(--np-ink); text-wrap: balance;
}
.byline {
  margin: 16px 0 20px; display: inline-block;
  font-family: var(--np-mono); font-size: 12px; letter-spacing: .14em;
  color: var(--np-mid); text-transform: uppercase;
  border-top: 1px solid var(--np-ink); border-bottom: 1px solid var(--np-ink); padding: 7px 0;
}
.front .lede { font-size: 16.5px; max-width: 36em; text-align: justify; margin: 0 0 28px; line-height: 1.85; }
.front .lede::first-letter {
  float: left; font-size: 62px; line-height: .82; font-weight: 900;
  padding: 6px 12px 0 0; color: var(--np-ink2); font-family: var(--np-serif);
}
.front-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.front-ctas .btn { min-height: 46px; display: inline-flex; align-items: center; padding: 0 26px; letter-spacing: .18em; }
.btn.np-fill { background: var(--np-ink); color: var(--np-paper); }
.btn.np-fill:hover { background: var(--np-paper); color: var(--np-ink); }
.front-right { border-left: 1px solid var(--np-ink); padding: 40px 0 40px 30px; display: flex; flex-direction: column; gap: 18px; justify-content: center; }
.fig { border: 1px solid var(--np-ink); background: #fff; margin: 0; }
.fig img { width: 100%; display: block; }
.fig-cap {
  border-top: 1px solid var(--np-ink); padding: 7px 11px;
  font-family: var(--np-mono); font-size: 11px; letter-spacing: .1em; color: var(--np-mid);
}
.fact-box { border: 1px solid var(--np-ink); background: #fff; }
.fact-box .fb-h {
  background: var(--np-paper2); border-bottom: 1px solid var(--np-ink); padding: 8px 14px;
  font-family: var(--np-sans); font-size: 11px; font-weight: 700; letter-spacing: .25em; text-transform: uppercase;
}
.fact-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 9px 14px; border-top: 1px solid var(--np-div); font-size: 14px;
}
.fact-row:first-of-type { border-top: 0; }
.fact-row .v { font-family: var(--np-mono); font-weight: 700; font-size: 16px; }
@media (max-width: 860px) {
  .front { grid-template-columns: 1fr; }
  .front-left { padding-right: 0; }
  .front-right { border-left: 0; border-top: 1px solid var(--np-ink); padding-left: 0; }
}

/* ---- 區段標題（版次感） ---- */
main > section > h2, .page-head h1 {
  border-top: 4px solid var(--np-ink);
  border-bottom: 1px solid var(--np-ink);
  padding: 10px 0;
  font-weight: 900;
}
.sub, .muted { color: var(--np-mid); }

/* ---- 卡片 ---- */
.card {
  background: #fff;
  border: 1px solid var(--np-ink);
  box-shadow: none;
}
.notice-card { background: var(--np-paper2); border: 1px solid var(--np-ink); }
a.card.venue-card, .feature {
  border: 1px solid var(--np-ink);
  background: #fff;
  transition: box-shadow .2s ease-out, transform .2s ease-out;
}
a.card.venue-card:hover, .feature:hover {
  border-color: var(--np-ink);
  box-shadow: 5px 5px 0 0 var(--np-ink);
  transform: translate(-2px, -2px);
}
.venue-card h3, .feature h3 { font-weight: 900; }
.venue-card .vc-cta { color: var(--np-ink); font-family: var(--np-sans); font-weight: 700; letter-spacing: .06em; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.feature { border: 1px solid var(--np-ink); background: #fff; }
.f-icon, .vc-icon { background: var(--np-paper2); border: 1px solid var(--np-ink); }

/* ---- 按鈕 ---- */
.btn {
  font-family: var(--np-sans); font-weight: 700; letter-spacing: .1em;
  border: 1px solid var(--np-ink); background: #fff; color: var(--np-ink);
  transition: background .2s ease-out, color .2s ease-out;
}
.btn:hover { background: var(--np-ink); color: var(--np-paper); }
.btn.primary { background: var(--np-ink); border-color: var(--np-ink); color: var(--np-paper); }
.btn.primary:hover { background: var(--np-paper); color: var(--np-ink); }
.btn.line-btn { border-radius: 0; }

/* ---- 表格（收費表等） ---- */
table.list th {
  font-family: var(--np-sans); font-size: .78rem; font-weight: 700; letter-spacing: .14em;
  color: var(--np-ink); border-bottom: 2px solid var(--np-ink);
  background: var(--np-paper2);
}
table.list td { border-bottom: 1px solid var(--np-div); }
.price-table td:nth-child(2), .price-table td:nth-child(3) { font-family: var(--np-mono); color: var(--np-ink); }

/* ---- 照片（新聞相片框） ---- */
.photo-item { border: 1px solid var(--np-ink); background: #fff; padding: 0; }
.photo-item figcaption {
  border-top: 1px solid var(--np-ink);
  font-family: var(--np-mono); font-size: 11px; letter-spacing: .1em; color: var(--np-mid);
  padding: 6px 10px;
}

/* ---- 頁尾 ---- */
.footer { border-top: 4px solid var(--np-ink); background: var(--np-paper); color: var(--np-mid); font-family: var(--np-mono); font-size: 11px; letter-spacing: .14em; }
/* 公司聯絡資訊：報紙風的寬字距會讓 email／地址難讀，這裡收回正常字距 */
.footer-contact { letter-spacing: .02em; font-size: 11px; }

/* ---- 表單（預約／登入／查詢） ---- */
.form label { font-family: var(--np-sans); font-weight: 700; font-size: .86rem; letter-spacing: .06em; color: var(--np-ink2); }
input, select, textarea {
  border: 1px solid var(--np-ink);
  background: #fff; color: var(--np-ink);
  font-family: var(--np-sans);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--np-ink); outline-offset: 1px;
  border-color: var(--np-ink); box-shadow: none;
}
input[name="last5"], input[type="tel"], input[type="date"], input[inputmode="numeric"] { font-family: var(--np-mono); letter-spacing: .06em; }
.badge { font-family: var(--np-sans); font-weight: 700; letter-spacing: .08em; border: 1px solid currentColor; }
.success-card { border: 1px solid var(--np-ink); background: #fff; }
.doorpw { font-family: var(--np-mono); }
.bankinfo { font-family: var(--np-mono); font-size: .95rem; }
.bkid { font-family: var(--np-mono); color: var(--np-mid); }

/* =====================================================================
   時刻表（第一版・SCHEDULE）
   ===================================================================== */
.page-head .sub { font-family: var(--np-serif); }
.tabs .tab {
  font-family: var(--np-sans); font-weight: 700; letter-spacing: .08em;
  background: #fff; color: var(--np-ink); border: 1px solid var(--np-ink);
}
.tabs .tab.on { background: var(--np-ink); border-color: var(--np-ink); color: var(--np-paper); }
.tabs .tab:hover { background: var(--np-paper2); }
.tabs .tab.on:hover { background: var(--np-ink); }
.weeknav .btn.sm { background: #fff; }

.price-hint { background: #fff; border: 1px solid var(--np-ink); }

.grid-wrap { border: 1px solid var(--np-ink); background: #fff; }
table.grid { border-collapse: collapse; background: #fff; }
table.grid th, table.grid td { border: 1px solid var(--np-div); }
table.grid thead th {
  background: var(--np-paper2); color: var(--np-ink);
  font-family: var(--np-sans); font-weight: 700; letter-spacing: .06em;
  border-bottom: 2px solid var(--np-ink);
}
table.grid th.today { background: var(--np-ink); color: var(--np-paper); }
table.grid th.today .datelabel, table.grid th.today .day-tag { color: var(--np-steel); }
.datelabel { font-family: var(--np-mono); }
.day-tag { background: var(--np-ink2); color: var(--np-paper); font-family: var(--np-mono); font-size: 10px; letter-spacing: .06em; padding: 1px 5px; display: inline-block; }
.day-tag.special { background: var(--np-ink); }
td.timecol, th.timecol { font-family: var(--np-mono); font-weight: 700; background: var(--np-paper); color: var(--np-ink); }

/* 可預約格：白底墨字（離峰）／鋼灰淡底（尖峰），hover 整格反黑 */
.cell.free { background: #fff; }
.cell.free a { color: var(--np-ink); font-family: var(--np-mono); font-weight: 700; text-decoration: none; display: block; }
.cell.free.peakcell { background: var(--np-paper2); }
.cell.free:hover { background: var(--np-ink); }
.cell.free:hover a { color: var(--np-paper); }
.cell.taken { background: var(--np-ink2); color: var(--np-steel); font-family: var(--np-sans); font-size: .78rem; letter-spacing: .06em; }
.cell.closed { background: #fff; color: var(--np-steel); }
.cell.contact { background: #fff; }
.cell.contact a { color: var(--np-mid); font-family: var(--np-sans); text-decoration: underline; text-underline-offset: 3px; }

.legend .lg { font-family: var(--np-sans); border: 1px solid var(--np-ink); background: #fff; color: var(--np-ink); }
.legend .lg.peakcell { background: var(--np-paper2); }
.legend .lg.taken { background: var(--np-ink2); color: var(--np-paper); border-color: var(--np-ink2); }
.legend .lg.closed { color: var(--np-steel); }
.legend .lg.contact { color: var(--np-mid); }

@media (prefers-reduced-motion: reduce) {
  a.card.venue-card, .feature, .btn, .cell.free { transition: none; }
}