:root{
  --yellow:#eac73f;--blue:#1389be;--navy:#0c516f;--gray:#c0bfb8;--orange:#bf6f33;--green:#49d00b;--cyan:#20dcfa;
  --paper:#f4f3ee;--ink:#12303f;--pink:#ff4fd8;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:56px}
body{font-size:19px;margin:0;background:var(--yellow);color:var(--ink);font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;line-height:1.7}
a{color:var(--blue)}

/* LED 跑馬燈 */
.led-bar{background:var(--navy);border-bottom:6px solid var(--blue);overflow:hidden;white-space:nowrap;padding:6px 0}
.led-text{display:inline-block;color:var(--cyan);font:700 20px/1.5 "Courier New",monospace;letter-spacing:3px;text-shadow:0 0 8px #20dcfa88;animation:run 50s linear infinite}
@keyframes run{to{transform:translateX(-50%)}}

/* 首頁:刷卡機外框 */
.hero{padding:24px 16px}
.hero-in{max-width:1760px;margin:0 auto;background:var(--blue);border-radius:22px;padding:14px;display:grid;grid-template-columns:1fr 1.15fr;gap:0}
.hero-text{flex:1 1 320px;background:var(--navy);border-radius:12px;padding:28px 28px 24px;color:#fff;position:relative;display:flex;flex-direction:column;align-items:flex-start}
.hero-text::after{content:"驗卡中";position:absolute;top:0;right:0;background:var(--green);color:var(--navy);font-weight:900;padding:2px 14px;border-radius:0 12px 0 12px}
.hero-img{width:100%;height:100%;min-width:0;object-fit:cover;padding:0 0 0 14px;border-radius:12px}
.led-sign{background:#12000f;color:var(--pink);font:900 30px "PingFang TC","Microsoft JhengHei",sans-serif;letter-spacing:6px;padding:4px 20px;border:3px solid #333;border-radius:8px;text-shadow:0 0 10px var(--pink),0 0 20px var(--pink)}
h1{font-size:clamp(22px,4.5vw,32px);margin:18px 0 6px;line-height:1.3;font-weight:700}
h1 span{display:block;color:var(--yellow);font-size:1.9em;font-weight:900;letter-spacing:4px}
.hero-text p{margin:4px 0 18px;color:#cfe6ef}
.btn{display:inline-block;background:var(--orange);color:#fff;font-weight:900;padding:10px 26px;border-radius:14px;text-decoration:none;border:3px solid var(--gray);transition:.15s}
.btn:hover{background:#d8803f;transform:translateY(-2px)}
.quick{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.quick a{color:var(--cyan);text-decoration:none;font-size:16px;font-weight:700;padding:3px 12px;border:2px solid #20dcfa66;border-radius:8px}
.quick a:hover{background:var(--cyan);color:var(--navy)}

/* 導覽:灰色刷卡區 */
.stops-nav{position:sticky;top:0;z-index:5;background:var(--gray);border-top:4px solid var(--navy);border-bottom:4px solid var(--navy);display:flex;flex-wrap:wrap;gap:2px 6px;justify-content:center;padding:6px 12px;font-weight:700}
.stops-nav a{text-decoration:none;color:var(--navy);padding:2px 10px;border-radius:8px}
.stops-nav a:hover{background:var(--orange);color:#fff}
.stops-nav span{color:#0006}

main{max-width:1760px;margin:0 auto;padding:8px 16px}
section{margin:44px 0}

/* 區塊標題 */
.bubble{display:flex;align-items:baseline;gap:12px;background:var(--blue);color:#fff;border-radius:14px 14px 0 0;padding:8px 22px;margin:0;font-size:29px;border-bottom:6px solid var(--navy)}
.bubble small{font-size:14px;letter-spacing:1px;background:var(--green);color:var(--navy);font-weight:900;padding:0 10px;border-radius:6px}
.panel,.about-grid,.contact,.timetable,.st-head,.links,.rules,.cmds,.gear,.note,.sub,.route,.artists,#route{position:relative}
/* 內容底板:灰色面板 */
section{background:var(--paper);border-radius:14px;border:4px solid var(--blue);overflow:hidden}
section>:not(.bubble){margin-left:20px;margin-right:20px}
section>.bubble{margin:0;border-radius:0}
section>.bubble+*{margin-top:20px}
section>:last-child{margin-bottom:22px}
.sub{color:var(--navy);margin-top:24px;margin-bottom:8px;border-left:6px solid var(--orange);padding-left:10px}
.note{font-weight:700;color:var(--navy)}

/* 關於我 */
.about-grid{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start}
.heart-list{list-style:none;margin:0;padding:14px 18px;background:#fff;border-radius:12px;border:2px solid var(--gray)}
.heart-list li{padding:3px 0}
.heart-list li b{display:inline-block;min-width:3.4em;color:var(--blue)}
.heart-list li:not(.warn)::before{content:"💙 "}
.heart-list .warn{color:var(--orange)}
.vehicle{margin:0;background:#fff;border-radius:12px;border:2px solid var(--gray);padding:12px}
.vehicle img{width:100%;display:block;border-radius:8px;background:linear-gradient(#dff1f9,#fff)}
.plate{margin:8px auto;width:max-content;background:#fff;border:3px solid #1a7a3a;color:#1a7a3a;font:900 22px "Courier New",monospace;padding:0 14px;border-radius:6px}
.vehicle dl{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;margin:8px 0 0}
.vehicle dt{font-weight:900;color:var(--blue)}.vehicle dd{margin:0}
.contact{margin-top:18px;background:var(--navy);color:#fff;border-radius:12px;padding:12px 18px}
.contact a{color:var(--cyan)}
.contact small{color:#cfe6ef}

/* 週表 */
.timetable{margin:0;background:#fff;border-radius:12px;border:2px solid var(--gray);padding:8px}
.timetable img{display:block;width:100%;height:auto;border-radius:6px}
figcaption{margin-top:6px;text-align:right;font-size:16px;color:#667}

/* STbus */
.st-head{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.st-head img{width:260px;max-width:100%}
.route{list-style:none;margin:0;padding:0 0 0 30px}
.route::before{content:"";position:absolute;left:7px;top:10px;bottom:10px;width:10px;background:var(--blue);border-radius:5px}
.stop{position:relative;margin:0 0 16px}
.dot{position:absolute;left:-30px;top:24px;width:24px;height:24px;border-radius:50%;background:var(--yellow);border:5px solid var(--navy);z-index:1}
.stop-card{display:grid;grid-template-columns:1fr;gap:2px;background:#fff;border:3px solid var(--blue);border-radius:14px;padding:12px;text-decoration:none;color:inherit;transition:.15s}
.stop-card:hover{transform:translateX(6px);border-color:var(--orange)}
.stop-card img{width:100%;display:block;border-radius:8px;margin-bottom:8px}
.stop-no{justify-self:start;background:var(--green);color:var(--navy);font:900 20px "Courier New",monospace;padding:0 10px;border-radius:6px}
.stop-card strong{font-size:24px;color:var(--navy)}
.stop-card small{color:#556}
.stop-card em{font-style:normal;font-weight:700;font-size:17px;color:var(--orange)}
@media(min-width:700px){.stop-card{grid-template-columns:300px 1fr;column-gap:18px;align-content:center}.stop-card img{grid-row:1/5;margin:0}}
.artists{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.artists li{background:#fff;border:2px solid var(--blue);border-radius:10px;padding:4px 14px}
.artists a{text-decoration:none;color:inherit}
.artists a:hover{color:var(--orange)}
.artists small{display:block;color:#667}

/* 連結 */
.links{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.links a{display:grid;gap:2px;background:var(--orange);color:#fff;border:3px solid var(--gray);border-radius:16px;padding:14px 18px;text-decoration:none;transition:.15s}
.links a:hover{background:#d8803f;transform:translateY(-3px)}
.links b{font-size:22px}.links small{color:#ffe9d6}

/* 頻道注意 */
.rules{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px}
.rules li{background:#fff;border-left:8px solid #d94a3a;border-radius:8px;padding:5px 14px;font-weight:700}
.rules li::before{content:"⛔ "}

/* 指令 */
.cmds{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:8px}
.cmds div{background:#fff;border:2px solid var(--gray);border-radius:10px;padding:6px 12px}
.cmds code{background:var(--navy);color:var(--cyan);border-radius:6px;padding:1px 8px;margin-right:8px;font-weight:700}

/* 設備 */
.gear{width:calc(100% - 40px);border-collapse:collapse;background:#fff;border-radius:10px;overflow:hidden;border:2px solid var(--gray)}
.gear th,.gear td{padding:7px 14px;border-bottom:1px solid #e3e3dc;text-align:left;vertical-align:top}
.gear th{background:var(--navy);color:#fff;white-space:nowrap;width:7em}

/* 下車鈴 */
.bell{position:fixed;right:16px;bottom:16px;background:var(--orange);color:#fff;border:3px solid var(--gray);border-radius:999px;padding:10px 18px;font-weight:900;font-size:18px;font-family:inherit;cursor:pointer;z-index:9}
.bell:hover{background:#d8803f}.bell:active{transform:translateY(2px)}
.stopping{position:fixed;left:50%;top:70px;transform:translate(-50%,-250%);background:#000;color:#ff3b30;padding:8px 30px;border:3px solid var(--gray);border-radius:12px;text-align:center;transition:.3s;z-index:9;text-shadow:0 0 8px #f00}
.stopping.on{transform:translate(-50%,0)}
.stopping img{width:120px;display:block;margin:0 auto 4px;border-radius:8px}
.stopping b{display:block;font-size:36px}
.stopping span{font:13px "Courier New",monospace;letter-spacing:2px}

footer{background:var(--navy);color:#cfe6ef;text-align:center;padding:16px 12px 16px;font-size:17px;margin-top:40px;line-height:1.5;border-top:8px solid var(--blue)}
footer a{color:var(--cyan)}
footer .rear{width:130px;display:block;margin:0 auto 6px}

@media(max-width:760px){
  .about-grid{grid-template-columns:1fr}
  .hero-in{grid-template-columns:1fr}.hero-img{padding:14px 0 0;height:auto}
  .bubble{font-size:24px}
  section>:not(.bubble){margin-left:14px;margin-right:14px}
  .gear{width:calc(100% - 28px)}
}
html,body{overflow-x:hidden}
.hero-in>*,.about-grid>*,.stop-card>*{min-width:0}
.hero-text p,.heart-list li,.contact div,.gear td{overflow-wrap:anywhere}
.sounds{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.sounds button{display:grid;gap:2px;background:var(--navy);color:#fff;border:3px solid var(--blue);border-radius:16px;padding:16px;font:inherit;cursor:pointer;text-align:center;transition:.15s}
.sounds button b{font-size:26px;color:var(--yellow)}
.sounds button small{color:var(--cyan)}
.sounds button:hover{background:var(--blue);transform:translateY(-3px)}
.sounds button:active{transform:translateY(1px)}
@media(max-width:760px){
  .gear th{width:auto;padding:6px 10px;font-size:16px}
  .gear td{padding:6px 10px;font-size:17px}
  .heart-list li b{min-width:3em}
}
.stop-card{grid-auto-rows:min-content}
.stop-card>*:not(img){align-self:center}
.stop-no{line-height:1.5;padding:0 12px}
/* 圖片防拖曳、防長按存圖(只能嚇阻,無法完全防止) */
img{-webkit-user-drag:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
img{pointer-events:none}