/* 內頁樣式（優惠詳情頁、分類頁、攻略頁、合規頁）。
   沿用 assets/style.css 的 CSS 變數與既有元件，只補內頁需要的版式。 */

/* ---------- 內頁共用 ---------- */
.page-main { padding: 28px 0 8px; }

.crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 13px; color: var(--muted); padding: 18px 0 0;
}
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--accent); }
.crumb span[aria-hidden] { color: var(--line-strong); }

.page-head { padding: 18px 0 6px; }
.page-head h1 { font-size: 27px; max-width: 780px; }
.page-head .page-sub { margin-top: 10px; color: var(--muted); max-width: 780px; }
.page-lede { margin-top: 12px; max-width: 780px; color: var(--text); }

.page-meta {
  display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px;
  font-size: 13px; color: var(--muted);
}
.page-meta b { font-weight: 700; color: var(--text); }

.section-h2 {
  font-size: 19px; margin: 34px 0 14px;
  display: flex; align-items: center; gap: 8px;
}
.section-h2::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

.section-note { font-size: 13px; color: var(--muted); margin: -6px 0 14px; }

/* ---------- 優惠詳情頁 ---------- */
.deal-hero {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 24px; margin-top: 20px;
}
.deal-hero h1 { font-size: 26px; }
.deal-hero .lede-line { margin-top: 10px; color: var(--muted); }

.deal-facts {
  display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--line);
}
.deal-fact { display: flex; flex-direction: column; gap: 3px; }
.deal-fact dt { font-size: 12px; color: var(--muted); letter-spacing: .02em; }
.deal-fact dd { margin: 0; font-size: 14px; line-height: 1.5; }

.price-panel {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 14px;
  background: var(--accent-soft); border: 1px solid #F6D3D3;
  border-radius: var(--radius-sm); padding: 14px 16px; margin-top: 18px;
}
.price-panel .p-now { font-size: 19px; font-weight: 700; color: var(--accent-dark); }
.price-panel .p-was { font-size: 13px; color: var(--muted); text-decoration: line-through; }
.price-panel .p-save {
  font-size: 12px; font-weight: 700; color: #fff; background: var(--accent);
  border-radius: 999px; padding: 3px 10px;
}
.price-panel .p-note { flex-basis: 100%; font-size: 12px; color: var(--muted); }

.editorial {
  background: var(--surface-2); border: 1px solid var(--line);
  border-left: 3px solid var(--teal); border-radius: var(--radius-sm);
  padding: 20px 22px; margin-top: 22px;
}
.editorial > h2 { font-size: 17px; display: flex; align-items: center; gap: 8px; }
.editorial .ed-cat { font-size: 12px; font-weight: 400; color: var(--muted); }
.editorial h3 {
  font-size: 14px; margin: 18px 0 6px; color: var(--teal);
  display: flex; align-items: center; gap: 7px;
}
.editorial h3::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--teal); flex: none;
}
.editorial p { font-size: 14px; color: #3A3D44; margin-bottom: 8px; }
.editorial ul { margin: 6px 0 0; padding-left: 20px; }
.editorial li { font-size: 14px; color: #3A3D44; margin-bottom: 5px; }
.editorial .ed-foot {
  margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--line);
  font-size: 12px; color: var(--muted); font-style: normal;
}

.terms-box {
  background: var(--amber-soft); border: 1px solid #F1DFC4;
  border-radius: var(--radius-sm); padding: 18px 20px; margin-top: 22px;
}
.terms-box h2 { font-size: 16px; color: #8A5A00; }
.terms-box dl { margin: 12px 0 0; }
.terms-box dt { font-size: 12px; color: #8A5A00; margin-top: 10px; letter-spacing: .02em; }
.terms-box dd { margin: 2px 0 0; font-size: 14px; color: #4A3A12; }

.deal-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.deal-actions .link-btn {
  display: inline-block; padding: 11px 20px; border-radius: 999px;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 14px;
}
.deal-actions .link-btn:hover { background: var(--accent-dark); }
.deal-actions .btn-ghost {
  display: inline-block; padding: 11px 20px; border-radius: 999px;
  border: 1px solid var(--line-strong); font-weight: 700; font-size: 14px; color: var(--text);
}
.deal-actions .btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

.source-block {
  margin-top: 20px; padding: 14px 16px; background: var(--gray-soft);
  border-radius: var(--radius-sm); font-size: 13px; color: var(--muted);
}
.source-block a { color: var(--blue); word-break: break-all; }

/* ---------- 卡片格內的相關優惠 ---------- */
.related .grid { margin-top: 0; }
.related .card { display: flex; flex-direction: column; }
.related .card h3 { font-size: 15px; }
.related .card h3 a:hover { color: var(--accent); }

/* ---------- 分類頁 ---------- */
.cat-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.cat-nav a {
  border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 7px 15px; font-size: 13px; font-weight: 700; color: var(--text);
  background: var(--surface);
}
.cat-nav a:hover { border-color: var(--accent); color: var(--accent); }
.cat-nav a.is-current { background: var(--accent); border-color: var(--accent); color: #fff; }

.rank-list { display: grid; gap: 12px; margin-top: 4px; }
.rank-item {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 14px 16px;
}
.rank-no {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-dark);
  font-size: 13px; font-weight: 700; display: grid; place-items: center;
}
.rank-body h3 { font-size: 15px; }
.rank-body h3 a:hover { color: var(--accent); }
.rank-body .rank-meta { font-size: 13px; color: var(--muted); margin-top: 4px; }
.rank-body .rank-why { font-size: 13px; color: #3A3D44; margin-top: 6px; }

/* ---------- 攻略頁 ---------- */
.guide-card-grid {
  display: grid; gap: 14px; margin-top: 4px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.guide-card {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow);
}
.guide-card .g-ico { font-size: 24px; line-height: 1; }
.guide-card h3 { font-size: 17px; }
.guide-card h3 a:hover { color: var(--accent); }
.guide-card p { font-size: 14px; color: var(--muted); }
.guide-card .g-foot { font-size: 12px; color: var(--muted); margin-top: auto; }

.prose { max-width: 780px; }
.prose h2 { font-size: 20px; margin: 30px 0 12px; }
.prose h3 { font-size: 16px; margin: 22px 0 8px; }
.prose p { margin-bottom: 12px; }
.prose ul, .prose ol { margin: 0 0 14px; padding-left: 22px; }
.prose li { margin-bottom: 7px; }
.prose li strong { font-weight: 700; }
.prose table { width: 100%; border-collapse: collapse; margin: 8px 0 18px; font-size: 14px; }
.prose th, .prose td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.prose th { background: var(--gray-soft); font-size: 13px; }

.callout {
  background: var(--blue-soft); border: 1px solid #CFDCFB;
  border-radius: var(--radius-sm); padding: 16px 18px; margin: 16px 0;
  font-size: 14px;
}
.callout strong { display: block; margin-bottom: 4px; }

/* ---------- 合規頁 ---------- */
.legal { max-width: 820px; }
.legal h2 { font-size: 18px; margin: 28px 0 10px; }
.legal h3 { font-size: 15px; margin: 18px 0 6px; }
.legal p, .legal li { font-size: 14px; color: #3A3D44; margin-bottom: 10px; }
.legal ul { padding-left: 22px; }
.legal .updated-line { font-size: 13px; color: var(--muted); }
.legal table { width: 100%; border-collapse: collapse; margin: 10px 0 18px; font-size: 13px; }
.legal th, .legal td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal th { background: var(--gray-soft); }

.contact-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); margin-top: 16px;
}
.contact-card dl { margin: 0; }
.contact-card dt { font-size: 12px; color: var(--muted); margin-top: 14px; }
.contact-card dt:first-child { margin-top: 0; }
.contact-card dd { margin: 3px 0 0; font-size: 15px; font-weight: 700; }
.contact-card dd a { color: var(--blue); word-break: break-all; }

@media (max-width: 720px) {
  .page-head h1 { font-size: 22px; }
  .deal-hero { padding: 18px; }
  .deal-hero h1 { font-size: 21px; }
  .editorial { padding: 16px 17px; }
}

/* 手機版保留站內導覽：style.css 在 900px 以下會隱藏 .nav，
   但審核與爬蟲都需要完整的站內連結，所以改為可橫向滑動。 */
@media (max-width: 900px) {
  .site-header .nav {
    display: flex; flex-wrap: nowrap; gap: 16px;
    font-size: 13px; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding-bottom: 2px;
  }
  .site-header .nav::-webkit-scrollbar { display: none; }
  .site-header .nav a { white-space: nowrap; }
  .header-inner { gap: 14px; }
  .brand-text { flex: none; }
}

/* ---- 日本美食專欄 ---- */
.badge-rating {
  background: #fff4d6;
  color: #8a5b00;
  border: 1px solid #f0d48a;
}
.jp-note {
  font-size: 12.5px;
  color: var(--muted, #6b7280);
}

/* ---- 地區排行頁 ---- */
.rank-list .ranked-item {
  position: relative;
}
.ranked-item .rank-tag {
  display: inline-block;
  margin: 0 0 6px 2px;
  font-weight: 700;
  font-size: 14px;
  color: #8a5b00;
}
.region-nav b {
  margin-right: 4px;
  color: var(--muted, #6b7280);
  font-weight: 600;
}

/* ---- 日本酒店專欄（/japan/hotels/） ---- */
.badge-value {
  background: var(--teal-soft, #e3f2f1);
  color: var(--teal, #1f7a78);
  border: 1px solid rgba(31, 122, 120, .22);
}
/* 酒店卡／詳情頁的「賣點」係一句描述，唔係價錢——
   借用 .price / .p-now 的版位但唔應該大字紅色，故加此修飾類覆寫。 */
.hotel-hl,
.price-panel .p-now.hotel-hl {
  font-size: 15px;
  font-weight: 700;
  color: var(--teal, #1f7a78);
  letter-spacing: 0;
}
/* 酒吧卡／詳情頁同理：借用 .price / .p-now 的版位顯示評分或地點，
   唔應該大字紅色。特異度要高過 .price-panel .p-now。 */
.bar-hl,
.price-panel .p-now.bar-hl {
  font-size: 15px;
  font-weight: 700;
  color: #a9762c;
  letter-spacing: 0;
}
/* 排行頁的榜單：原本 .ranked-list 無樣式，令名次卡貼實一齊 */
.ranked-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 20px 0 8px;
}
/* Google Maps 官方嵌入卡（餐廳／酒店共用） */
.maps-embed { margin: 18px 0 22px; }
.maps-embed iframe {
  display: block;
  width: 100%;
  height: 320px;
  border: 0;
  border-radius: 14px;
  background: rgba(127, 127, 127, .12);
}
.maps-embed figcaption { margin-top: 8px; }
@media (max-width: 900px) {
  .maps-embed iframe { height: 240px; }
}

/* ---- 日本自駕專欄（/japan/drive/） ---- */
.badge-drive {
  background: var(--blue-soft, #e3edf8);
  color: var(--blue, #2a5f9e);
  border: 1px solid rgba(42, 95, 158, .22);
}
.badge-vehicle {
  background: var(--gray-soft, #eef0f2);
  color: var(--ink, #2b2f36);
  border: 1px solid rgba(0, 0, 0, .08);
}
.st-drive { background: var(--blue-soft, #e3edf8); }
/* 自駕卡的路線摘要用「→」分隔起終點，太長要收一行 */
.drive-card .card-foot .period {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drive-card .route { font-size: 12.5px; }
.drive-card .save {
  max-width: 48%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 實務指南的來源清單 */
.sources-block {
  margin: 22px 0 8px;
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--gray-soft, rgba(127, 127, 127, .08));
}
.sources-block h2 { margin-top: 0; }
.sources-block ul { margin: 8px 0 0; padding-left: 20px; }
.sources-block li { font-size: 13px; margin-bottom: 7px; line-height: 1.55; }
.sources-block a { word-break: break-word; }
@media (max-width: 900px) {
  .drive-card .save { max-width: 100%; }
  .sources-block { padding: 14px 15px; }
}

/* ==========================================================================
   日本酒吧專欄（/japan/bars/）
   ========================================================================== */
.badge-bar {
  background: rgba(196, 148, 74, .16);
  color: #a9762c;
  border-color: rgba(196, 148, 74, .38);
}
.badge-bartype {
  background: rgba(126, 87, 158, .14);
  color: #7e579e;
  border-color: rgba(126, 87, 158, .34);
}
.card-sticker.st-bar { opacity: .9; }

/* 酒吧卡沿用自駕卡的排版，評分用修飾類壓住大紅字 */
.bar-card .route { font-size: 12.5px; }
.bar-card .save {
  max-width: 48%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bar-card .card-foot .period {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bar-card .summary {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 900px) {
  .bar-card .save { max-width: 100%; }
}

/* ── 已結束優惠提示（2026-10-02）────────────────────────────────────────
   過期詳情頁頂部橫幅：講清楚呢頁只係紀錄，同時導流去現行優惠，
   避免審核或訪客誤以為係現行報價。 */
.notice-expired {
  margin: 18px 0 0;
  padding: 14px 18px;
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--muted);
  border-radius: var(--radius-sm);
  background: var(--gray-soft);
  color: var(--muted);
}
.notice-expired strong { display: block; color: var(--text); font-size: 1rem; }
.notice-expired p { margin: 6px 0 0; font-size: .9rem; line-height: 1.65; }
.notice-expired a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.notice-expired a:hover { text-decoration: underline; }