/* ==========================================================================
   來來早餐店 全球資訊網 — 1998 復古樣式
   全站共用：首頁、留言板、菜單、相簿、日誌、cgi-bin 後台、結局頁
   刻意保留 1990 年代做法：表格式排版、固定寬度、底線藍連結、磁磚背景。
   ========================================================================== */

@import url("knock.css");

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 16px 8px 40px;
  /* 磁磚式背景：用 CSS 模擬當年的 tiled background.gif */
  background-color: #6b5a3e;
  background-image:
    repeating-linear-gradient(45deg,  rgba(255,255,255,.035) 0 6px, transparent 6px 12px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.05)        0 6px, transparent 6px 12px);
  color: #000;
  font-family: "PMingLiU", "MingLiU", "新細明體", "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.7;
  text-align: center;
}

/* --- 800x600 年代的固定寬度版心 -------------------------------------- */
.page {
  width: 760px;
  max-width: 100%;
  margin: 0 auto;
  background: #fffdf2;
  border: 3px double #000;
  padding: 0;
  text-align: left;
  box-shadow: 6px 6px 0 rgba(0,0,0,.35);
}

.page__inner { padding: 14px 20px 24px; }

/* --- 跑馬燈（不用已廢棄的 marquee 標籤，用 CSS 做出同樣效果） --------- */
.marquee {
  overflow: hidden;
  background: #000080;
  color: #ffff00;
  border-bottom: 2px solid #000;
  font-size: 15px;
  white-space: nowrap;
  padding: 4px 0;
}
.marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 22s linear infinite;
}
@keyframes marquee { to { transform: translateX(-100%); } }

/* --- 標題 ------------------------------------------------------------- */
.site-title {
  margin: 0;
  padding: 18px 10px 10px;
  text-align: center;
  font-size: 34px;
  font-weight: bold;
  letter-spacing: 2px;
  color: #b22222;
  text-shadow: 2px 2px 0 #ffd700, 4px 4px 0 rgba(0,0,0,.2);
}
.site-sub {
  margin: 0 0 6px;
  text-align: center;
  font-size: 14px;
  color: #444;
  letter-spacing: 1px;
}

/* 內頁標題 */
.pg-title {
  margin: 4px 0 10px;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  color: #b22222;
  text-shadow: 1px 1px 0 #ffd700;
}

/* 彩色分隔線：當年的 rainbow-line.gif */
.hr-rainbow {
  height: 5px;
  border: 0;
  margin: 12px 0;
  background: linear-gradient(90deg,
    #ff0000, #ff7f00, #ffff00, #00cc00, #0000ff, #4b0082, #9400d3, #ff0000);
}

/* --- 連結：藍色底線、已讀變紫 ---------------------------------------- */
a { color: #0000ee; text-decoration: underline; }
a:visited { color: #551a8b; }
a:hover { color: #ee0000; background: #ffffcc; }

/* --- 導覽列 ----------------------------------------------------------- */
.navbar {
  text-align: center;
  background: #ffe9a8;
  border: 2px inset #d4b483;
  padding: 8px 6px;
  font-size: 15px;
}
.navbar a, .navbar .off { margin: 0 4px; white-space: nowrap; }
.navbar .off { color: #999; text-decoration: line-through; cursor: not-allowed; }
.navbar .here { color: #b22222; font-weight: bold; text-decoration: none; }

/* --- 施工中區塊 ------------------------------------------------------- */
.construction {
  margin: 20px auto;
  max-width: 560px;
  border: 4px dashed #d4a017;
  background: #fff8dc;
  padding: 18px 16px;
  text-align: center;
}
.construction__sign { font-size: 40px; letter-spacing: 8px; line-height: 1.2; }
.construction__title { margin: 8px 0 4px; font-size: 22px; font-weight: bold; color: #b22222; }
.construction__note { margin: 6px 0 0; font-size: 14px; color: #555; }

/* 當年的 blink 標籤：只閃爍不隱藏，避免可及性太差 */
.blink { animation: blink 1.1s steps(1, end) infinite; }
@keyframes blink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
  .blink { animation: none; }
  .marquee span { animation: none; padding-left: 0; }
}

/* 施工進度條（跑馬條紋） */
.bar {
  margin: 14px auto 2px;
  width: 80%;
  height: 20px;
  border: 2px inset #b9a071;
  background: #eee;
  overflow: hidden;
}
.bar > i {
  display: block;
  height: 100%;
  width: 38%;
  background-image: repeating-linear-gradient(45deg, #d4a017 0 10px, #f0c75e 10px 20px);
  animation: crawl 1.4s linear infinite;
  background-size: 28px 28px;
}
@keyframes crawl { to { background-position: 28px 0; } }
@media (prefers-reduced-motion: reduce) { .bar > i { animation: none; } }

/* --- 公告 / 內文區塊 -------------------------------------------------- */
.box {
  border: 2px solid #8b7355;
  background: #fff;
  margin: 16px 0;
}
.box__hd {
  background: #8b7355;
  color: #fff;
  font-weight: bold;
  padding: 4px 10px;
  font-size: 15px;
}
.box__bd { padding: 10px 12px; font-size: 15px; }
.box__bd p { margin: 0 0 8px; }
.box__bd p:last-child { margin-bottom: 0; }

/* --- 1998 式表格 ------------------------------------------------------ */
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  background: #fff;
  margin: 10px 0;
}
.tbl th, .tbl td {
  border: 1px solid #b9a071;
  padding: 4px 8px;
  text-align: left;
  vertical-align: top;
}
.tbl th { background: #ffe9a8; font-weight: bold; white-space: nowrap; }
.tbl td.num, .tbl th.num { text-align: right; white-space: nowrap; }
.tbl td.mid, .tbl th.mid { text-align: center; white-space: nowrap; }
.tbl td.pre { white-space: pre-line; }

/* 長資料表（後台那幾頁）：等寬字、一列一列全部攤開 */
.dt {
  width: 100%;
  border-collapse: collapse;
  font-family: "Courier New", "PMingLiU", monospace;
  font-size: 13px;
  background: #fff;
}
.dt th, .dt td {
  border: 1px solid #ccc;
  padding: 2px 6px;
  white-space: nowrap;
  text-align: left;
}
.dt th { background: #e8e8e8; }
.dt td.num { text-align: right; }
.dt-foot {
  border-top: 2px solid #999;
  margin: 0;
  padding: 6px 2px;
  font-family: "Courier New", monospace;
  font-size: 13px;
  text-align: right;
}

/* --- 留言板 ----------------------------------------------------------- */
.post {
  border: 1px solid #b9a071;
  background: #fff;
  margin: 0 0 8px;
}
.post__hd {
  background: #f5ecd7;
  border-bottom: 1px solid #e0d2ae;
  padding: 2px 8px;
  font-size: 14px;
  overflow: hidden;
}
.post__no { color: #888; font-size: 12px; float: right; }
.post__who { font-weight: bold; }
.post__bd { padding: 6px 10px; font-size: 15px; white-space: pre-line; }
/* 回覆：掛在原留言底下，縮排。板是新到舊，回覆跟著主題走才讀得順 */
.post__re {
  margin: 0 10px 8px 28px;
  border-left: 3px solid #d4b483;
  background: #fffdf2;
}
.post__rehd {
  padding: 2px 8px;
  font-size: 13px;
  color: #555;
  border-bottom: 1px dotted #e0d2ae;
  overflow: hidden;
}
.post__rehd .post__who { color: #000; }
.post__rehd .tag {
  float: right;
  background: #e8dcb8;
  border: 1px solid #c3ab7c;
  padding: 0 5px;
  font-size: 12px;
  color: #6b5a3e;
}
.post__re .post__bd { font-size: 15px; padding: 5px 10px; }

.post--del {
  border: 1px solid #ddd;
  background: #f4f4f4;
  color: #999;
  padding: 4px 10px;
  margin: 0 0 8px;
  font-size: 14px;
}

/* --- 查詢框（1998 式 form） ------------------------------------------- */
.qbox {
  border: 2px groove #c3ab7c;
  background: #f5ecd7;
  padding: 8px 10px;
  margin: 10px 0 14px;
  font-size: 15px;
}
.qbox input[type="text"], .qbox input[type="password"], .qbox select {
  font-family: "Courier New", monospace;
  font-size: 14px;
  border: 2px inset #b9a071;
  background: #fff;
  padding: 2px 4px;
}
.qbox input[type="submit"], .qbox button, .btn {
  font-family: "PMingLiU", "新細明體", serif;
  font-size: 14px;
  border: 2px outset #d8c79b;
  background: #e8dcb8;
  padding: 2px 12px;
  cursor: pointer;
}
.btn:active, .qbox button:active { border-style: inset; }
.qbox .note { font-size: 13px; color: #6b5a3e; }
.qres { margin: 10px 0; font-size: 15px; }
.qres .cnt { font-weight: bold; }

/* --- 分頁 ------------------------------------------------------------- */
.pager { margin: 12px 0; font-size: 15px; text-align: center; }
.pager a, .pager span { margin: 0 4px; }
.pager .cur { font-weight: bold; color: #b22222; }

/* --- 相簿 ------------------------------------------------------------- */
.album {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 14px 0;
}
.album__cell { text-align: center; font-size: 13px; }
.album__cell img {
  display: block;
  width: 100%;
  height: auto;
  border: 2px solid #8b7355;
  background: #fff;
}
.album__cell .cap { display: block; padding: 3px 2px 0; line-height: 1.4; }
.album__cell .date { color: #555; font-family: "Courier New", monospace; }

/* 單張照片頁 */
.photo { text-align: center; margin: 14px 0; }
.photo img { border: 3px solid #8b7355; background: #fff; max-width: 100%; height: auto; }
.photo__cap { margin: 8px auto 0; max-width: 560px; font-size: 15px; white-space: pre-line; }
.photo__note {
  margin: 14px auto 0;
  max-width: 560px;
  text-align: left;
  white-space: pre-line;
  font-size: 15px;
  line-height: 1.9;
}
.photo__slip { margin: 12px 0 0; }
.photo__slip img { border: 0; }

/* --- 菜單 ------------------------------------------------------------- */
.menu-list {
  max-width: 460px;
  margin: 14px auto;
  border: 2px solid #8b7355;
  background: #fff;
  padding: 14px 18px;
  font-size: 16px;
}
.menu-list .row { display: flex; align-items: baseline; }
.menu-list .row .nm { white-space: nowrap; }
.menu-list .row .dots { flex: 1 1 auto; border-bottom: 1px dotted #999; margin: 0 6px 4px; }
.menu-list .row .pr { white-space: nowrap; }
.menu-foot { max-width: 460px; margin: 0 auto; font-size: 14px; color: #444; }

/* --- 日誌 ------------------------------------------------------------- */
.diary-row { border-bottom: 1px dotted #c3ab7c; padding: 7px 2px; font-size: 15px; }
.diary-row .d { font-family: "Courier New", monospace; color: #444; margin-right: 10px; }
.diary-row .t { white-space: pre-line; }
.diary-row .lock { font-family: "Courier New", monospace; letter-spacing: 1px; color: #666; }
.diary-row .tag { color: #777; font-size: 13px; margin-left: 6px; }
.diary-inline { display: inline-block; margin-left: 8px; }
.diary-inline input {
  font-family: "Courier New", monospace;
  font-size: 14px;
  border: 2px inset #b9a071;
  background: #fff;
  padding: 1px 4px;
  width: 7em;
}

/* --- 登入框 ----------------------------------------------------------- */
.login {
  max-width: 420px;
  margin: 18px auto;
  border: 2px groove #c3ab7c;
  background: #f5ecd7;
  padding: 14px 16px;
  font-size: 15px;
}
.login h2 { margin: 0 0 8px; font-size: 16px; }
.login label { display: inline-block; width: 4.5em; }
.login input[type="text"], .login input[type="password"] {
  font-family: "Courier New", monospace;
  font-size: 14px;
  border: 2px inset #b9a071;
  background: #fff;
  padding: 2px 4px;
  width: 11em;
}
.login .row { margin: 6px 0; }
.login .err { color: #b22222; margin: 8px 0 0; }
.login .hint { font-size: 13px; color: #6b5a3e; margin: 8px 0 0; }

/* --- CGI 錯誤 --------------------------------------------------------- */
.cgierr {
  max-width: 520px;
  margin: 24px auto;
  border: 1px solid #999;
  background: #fff;
  padding: 14px 16px;
  font-family: "Courier New", monospace;
  font-size: 14px;
  white-space: pre-line;
  line-height: 1.8;
}

/* --- 後台 ------------------------------------------------------------- */
.admin-menu { margin: 14px 0; font-size: 16px; }
.admin-menu ul { padding-left: 14px; margin: 0; }
.admin-menu li { margin: 5px 0; list-style: none; }
.admin-memo {
  border: 1px solid #b9a071;
  background: #fffff0;
  padding: 8px 12px;
  margin: 16px 0;
  font-size: 14px;
  white-space: pre-line;
}
.admin-bar {
  background: #e8e8e8;
  border: 1px solid #999;
  padding: 3px 8px;
  font-size: 13px;
  margin: 0 0 10px;
  font-family: "Courier New", monospace;
}

/* --- 分頁標籤（EasyDiary 那一套） ------------------------------------- */
.tabs { margin: 12px 0 0; border-bottom: 2px solid #8b7355; }
.tabs a, .tabs span {
  display: inline-block;
  border: 2px solid #8b7355;
  border-bottom: 0;
  background: #e8dcb8;
  padding: 3px 18px;
  margin: 0 2px -2px;
  font-size: 15px;
  text-decoration: none;
  color: #333;
}
.tabs .cur { background: #fffdf2; font-weight: bold; color: #b22222; }

/* --- 帳本紙 ----------------------------------------------------------- */
.ledger-paper {
  background: #fffdf2 url("../assets/ledger_paper.png") repeat;
  border: 1px solid #b9a071;
  padding: 10px 12px;
}
/* 記事：兩欄，有橫線。日期靠左對齊成一直排，長短句都不會歪掉 */
.ledger-notes {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  background: transparent;
}
.ledger-notes td {
  border-bottom: 1px solid rgba(139, 115, 85, .28);
  padding: 9px 4px;
  vertical-align: top;
}
.ledger-notes tr:last-child td { border-bottom: 0; }
.ledger-notes .d {
  width: 6.8em;
  white-space: nowrap;
  font-family: "Courier New", monospace;
  font-size: 14px;
  color: #6b5a3e;
  border-right: 1px solid rgba(139, 115, 85, .28);
  padding-right: 12px;
}
.ledger-notes .t { padding-left: 14px; line-height: 2; }

/* 備註欄位：EasyDiary 的表單欄位，打進去就留在那裡 */
.ledger-memo { margin: 16px 0 2px; }
.ledger-memo__label {
  font-size: 14px;
  color: #6b5a3e;
  margin: 0 0 4px;
}
.ledger-memo__box {
  border: 2px inset #b9a071;
  background: #fff;
  padding: 10px 12px;
  min-height: 3.6em;
  font-size: 15px;
  line-height: 1.9;
  white-space: pre-line;
}

/* --- 88x31 友站 banner ------------------------------------------------ */
.banners { margin: 12px 0; }
.banners .b { display: block; margin: 0 0 10px; }
.banners img { border: 1px solid #666; width: 88px; height: 31px; vertical-align: middle; }
.banners .cmt { margin-left: 10px; font-size: 14px; }

/* --- 訪客計數器：黑底綠字七段顯示 ------------------------------------ */
.counter { text-align: center; margin: 18px 0 6px; font-size: 14px; }
.counter__digits {
  display: inline-block;
  background: #000;
  border: 2px inset #555;
  padding: 3px 5px;
  margin: 0 4px;
  vertical-align: middle;
}
.counter__digits b {
  display: inline-block;
  width: 18px;
  color: #33ff33;
  font-family: "Courier New", monospace;
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  text-shadow: 0 0 6px #33ff33;
}

/* --- 頁尾 ------------------------------------------------------------- */
.foot {
  margin-top: 22px;
  border-top: 2px groove #c3ab7c;
  padding-top: 12px;
  text-align: center;
  font-size: 13px;
  color: #555;
}
.foot p { margin: 4px 0; }
.badges { margin: 10px 0 6px; font-size: 12px; color: #444; }
.badge {
  display: inline-block;
  border: 1px solid #666;
  background: #ddd;
  padding: 2px 6px;
  margin: 2px;
  font-family: "Courier New", monospace;
}

/* 現代訪客的逃生出口：只用在佔位頁與擋頁 */
.exit {
  margin: 18px 0 0;
  border: 1px solid #b9a071;
  background: #f5ecd7;
  padding: 10px 12px;
  font-size: 13px;
  color: #4a4032;
  text-align: center;
}

/* --- 螢幕太小：擋頁（全站唯一的系統訊息頁面） ------------------------ */
#toosmall { display: none; }
@media (max-width: 767px), (max-height: 599px) {
  body.blockable > *:not(#toosmall) { display: none !important; }
  body.blockable #toosmall {
    display: block;
    width: 320px;
    max-width: 100%;
    margin: 24px auto;
    background: #fffdf2;
    border: 3px double #000;
    padding: 18px 16px;
    text-align: center;
    font-size: 15px;
    line-height: 2;
  }
}

/* --- 公告內頁 --------------------------------------------------------- */
.notice-meta {
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px dotted #c3ab7c;
  font-size: 13px;
  color: #555;
}
.notice-body { font-size: 16px; line-height: 2; white-space: normal; }

/* --- 公告內頁的照片與留言 --------------------------------------------- */
.notice-photo { margin: 14px 0 4px; text-align: center; }
.notice-photo img { border: 2px solid #8b7355; background: #fff; max-width: 100%; height: auto; }
.notice-photo .cap { font-size: 13px; color: #555; padding: 4px 0 0; }

.talk2 { margin: 18px 0 0; border: 1px solid #b9a071; background: #fff; }
.talk2__hd {
  background: #f5ecd7;
  border-bottom: 1px solid #e0d2ae;
  padding: 3px 10px;
  font-size: 14px;
  color: #6b5a3e;
}
.talk2__none { margin: 0; padding: 8px 10px; font-size: 14px; color: #999; }
.talk2__r { border-bottom: 1px dotted #e0d2ae; padding: 6px 10px; font-size: 15px; overflow: hidden; }
.talk2__r:last-child { border-bottom: 0; }
.talk2__r .d { font-family: "Courier New", monospace; color: #555; margin-right: 10px; }
.talk2__r .who { float: right; color: #444; font-size: 13px; }
.talk2__r .t { display: block; white-space: pre-line; margin-top: 2px; }

/* 首頁公告的節錄 */
.home-ex { color: #444; font-size: 14px; line-height: 1.8; }

/* 主題列的站長標記（和回覆那一顆同一個樣子） */
.post__hd .tag, .talk2__r .who .tag {
  display: inline-block;
  background: #e8dcb8;
  border: 1px solid #c3ab7c;
  padding: 0 5px;
  margin-left: 6px;
  font-size: 12px;
  color: #6b5a3e;
}
.post__hd .tag { float: right; margin-left: 0; }

/* 公告留言的回覆：縮排掛在上一則底下 */
.talk2__r--re { background: #fbf8ef; padding-left: 30px; }
.talk2__r--re .d::before { content: "↳"; margin-right: 6px; color: #999; }