/* 三個版面共用:照 Design System tokens(_incoming 設計包 tokens/*.css)抄寫 */
:root {
  --cream: #F4EBD8; --cream-deep: #EADFC6; --bone: #FBF6EC;
  --ink: #1A1714; --ink-soft: #3A332C; --ash: #6f675c;
  --flame: #E8632C; --flame-deep: #C9501E;
  --vermilion: #C73E2E; --vermilion-deep: #A52E22;
  --jade: #3E6B5C; --jade-deep: #2C4F43;
  --gold: #E0A33C; --gold-deep: #BD841F;
  --bw: 2px; --bw-bold: 3px; --bw-frame: 4px;
  --shadow: 3px 3px 0 var(--ink); --shadow-pop: 5px 5px 0 var(--ink);
  --snap: cubic-bezier(0.34, 1.4, 0.5, 1);
}
* { box-sizing: border-box; }
html { background: var(--cream); }
body {
  margin: 0; color: var(--ink-soft);
  background-color: var(--cream);
  background-image: radial-gradient(rgba(26,23,20,.035) .5px, transparent .5px);
  background-size: 4px 4px;
  font: 400 17px/1.65 "Noto Serif TC", "Songti TC", "PMingLiU", serif;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { color: var(--ink); line-height: 1.15; margin: 0 0 .4em; }
p { margin: 0 0 .8em; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

.kicker { font: 700 13px/1.4 "Noto Sans TC", system-ui, sans-serif; letter-spacing: .22em; text-transform: uppercase; color: var(--vermilion); }
.ink-band { background: var(--ink); color: var(--cream); }
.ink-band h2, .ink-band h3 { color: var(--cream); }

/* 按鈕:蓋印按壓 */
.btn {
  display: inline-block; font: 700 18px/1 "Noto Serif TC", serif; text-decoration: none;
  padding: 14px 22px; border: var(--bw-bold) solid var(--ink); border-radius: 3px;
  background: var(--flame); color: var(--bone); box-shadow: var(--shadow);
  transition: transform .2s var(--snap), box-shadow .2s var(--snap), background .2s;
}
.btn:hover { background: var(--flame-deep); transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--ink); }
.btn:active { transform: translate(3px,3px); box-shadow: 0 0 0 var(--ink); }
.btn.jade { background: var(--jade); } .btn.jade:hover { background: var(--jade-deep); }
.btn.ghost { background: transparent; color: var(--cream); border-color: var(--cream); box-shadow: none; }

/* 匾額標題 */
.plaque { display: inline-block; background: var(--ink); border: var(--bw-frame) solid var(--gold); border-radius: 2px; box-shadow: 4px 4px 0 rgba(26,23,20,.35); padding: 5px; }
.plaque > div { border: 1px solid var(--gold); padding: 10px 26px; text-align: center; }
.plaque b { display: block; font-weight: 900; color: var(--cream); letter-spacing: .18em; font-size: 28px; line-height: 1.1; }
.plaque small { display: block; font: 700 11px/1.4 "Noto Sans TC", sans-serif; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-top: 6px; }
.plaque.paper { background: var(--bone); border-color: var(--ink); }
.plaque.paper > div { border-color: var(--ink); }
.plaque.paper b { color: var(--ink); } .plaque.paper small { color: var(--vermilion); }
.plaque.vermilion { border-color: var(--vermilion); } .plaque.vermilion > div { border-color: var(--vermilion); } .plaque.vermilion small { color: var(--vermilion); }

/* 神明圓章 */
.seal { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: var(--bw-bold) solid var(--ink); overflow: hidden; background: var(--cream-deep); box-shadow: var(--shadow); flex: none; }
.seal img { width: 86%; height: 86%; object-fit: contain; }
.seal.flame { border-color: var(--flame); } .seal.gold { border-color: var(--gold); } .seal.jade { border-color: var(--jade); } .seal.vermilion { border-color: var(--vermilion); }
.seal.dark { background: var(--ink); }

/* 印章文字框 */
.t-seal { display: inline-block; white-space: nowrap; border: var(--bw-bold) solid var(--vermilion); color: var(--vermilion); border-radius: 2px; padding: 3px 10px; font-weight: 900; letter-spacing: .08em; }
.t-seal.rot { transform: rotate(-4deg); }

.card { background: var(--bone); border: var(--bw) solid var(--ink); border-radius: 10px; box-shadow: var(--shadow); }

.info { list-style: none; padding: 0; margin: 0; }
.info li { padding: 8px 0; border-bottom: 1px solid #D8C9A8; display: grid; grid-template-columns: 4em 1fr; gap: 8px; }
.info b { color: var(--ink); }
.ink-band .info li { border-color: #4a423b; } .ink-band .info b { color: var(--gold); }

.notice { display: flex; gap: 14px; align-items: center; border: var(--bw) solid var(--gold); border-radius: 10px; padding: 12px 16px; }
.notice img { width: 64px; }
.notice b { color: var(--gold); font-size: 18px; }
.social a { display: inline-block; margin: 0 8px 8px 0; padding: 6px 16px; border: 2px solid var(--cream); border-radius: 3px; text-decoration: none; font-weight: 700; color: var(--cream); }
.social a:hover { background: var(--cream); color: var(--ink); }

/* ---- 共用頁首頁尾(版面 A) ---- */
.topbar { position: sticky; top: 0; z-index: 10; background: var(--ink); border-bottom: 3px solid var(--flame); }
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; padding-bottom: 10px; }
.topbar img { height: 42px; width: auto; }
.topbar .btn { font-size: 15px; padding: 9px 14px; }
.site-footer { border-top: 3px solid var(--flame); padding: 40px 0 36px; }

/* ---- 第 2 頁:節目・點歌單 ---- */
.page-head { padding: 40px 0 8px; text-align: center; }
.hosts { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 26px; }
.host { display: grid; grid-template-columns: 130px 1fr; gap: 18px; align-items: center; text-align: left; }
.host .seal { width: 130px; height: 130px; }
.host .day { color: var(--gold); font-weight: 700; letter-spacing: .08em; }
.host h3 { font-size: 26px; font-weight: 900; margin: 2px 0 6px; }
.host p { color: var(--cream); opacity: .88; margin: 0; }
@media (max-width: 700px) { .hosts { grid-template-columns: 1fr; } .host { grid-template-columns: 100px 1fr; } .host .seal { width: 100px; height: 100px; } }

.alc-warn { display: inline-block; border: var(--bw-bold) solid var(--ink); background: var(--bone); padding: 8px 18px; font-weight: 900; font-size: 20px; color: var(--ink); margin: 18px 0 8px; }
.drinks { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; margin-top: 24px; text-align: left; }
.drink { overflow: hidden; display: grid; grid-template-columns: 120px 1fr; }
.drink img { width: 120px; height: 100%; min-height: 170px; object-fit: cover; border-right: var(--bw) solid var(--ink); background: #f6efe0; }
.drink > div { padding: 14px 16px; }
.drink h3 { font-size: 20px; font-weight: 900; margin: 0; }
.drink .band { color: var(--vermilion); font-weight: 700; font-size: 15px; margin: 2px 0 6px; }
.drink .ing { font-size: 15px; margin: 0 0 6px; }
.drink .price { font-weight: 900; color: var(--ink); font-size: 19px; margin: 0 0 6px; }
.drink details { font-size: 15px; }
.drink summary { cursor: pointer; color: var(--flame-deep); font-weight: 700; }
.drink details p { margin: 6px 0 0; }

.host .ig { display: inline-block; margin-top: 8px; color: var(--flame); font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--flame); }
.host .ig:hover { color: var(--gold); border-color: var(--gold); }