/* 本站對 2012 相簿頁樣式的「刻意偏離」層
 * ---------------------------------------------------------------------------
 * 載入順序：
 *   wretch2012-album.css（原站原檔：skin 1/189 + album/font + newButton +
 *   newPanel + photowall_overlay + sharing + kukubar）→ 本檔 → 使用者自訂 CSS
 *
 * 這裡的每一條都是**明知與原站不同、而且是故意的**，並附上理由。
 * 純粹的還原缺陷不要寫在這裡，那要回去修 DOM 或補素材。
 *
 * 配色一律從 skin 1/189 既有的色盤挑，不新增視覺語言：
 *   #eee 頁底 / #fff 表格 / #FFE8E8 banner / #A13636 連結 / #ff0000 hover
 *   / #ccc 分隔線（hr）/ #999 說明文字（#body_show .small-e）
 *
 * 這個檔是手寫的，不是 tools/build-css2012.mjs 產的——不要被那支腳本蓋掉。
 */

/* --- 1. 廣告位 -----------------------------------------------------------
 * 原站 td#ad_banner 撐 700×90、td#ad_word 是一行文字廣告、頁尾還有 FOOT9。
 *
 * ⚠ 這裡本來是 `height:0; line-height:0`——當初的理由是「本站不放廣告，
 * 存檔裡這幾格本來就是空的，照抄只會得到空白，所以收掉高度」。
 * 後來版位改放**站方公告與站內連結**（partials/adslot2012.ejs）了，
 * 這條卻沒跟著改：內容還在，高度是 0，於是「站方公告」「分類」「站內入口」
 * 三排字**通通疊在同一行**，只有最上面那排點得到——
 * tools/clickcheck.mjs 在正式站量到相簿頁 7 條連結互相覆蓋。
 * 版位既然有真的內容，就要有真的高度。
 */
td#ad_banner, td#ad_word { padding: 0; line-height: normal; height: auto; }
/* 原站用 `html body table tbody tr td#ad_banner{display:inline!important}`
   這種反擋廣告的寫法，蓋不掉也不必蓋——把內層當成真正的盒子就好。 */
td#ad_banner .w2-ad-in { display: block; width: 700px; max-width: 100%; }
td#ad_word   .w2-ad-in { display: block; }

/* --- 2. flash 訊息 -------------------------------------------------------
 * 原站沒有這個東西（它用整頁跳轉的提示頁）。本站沿用既有的 flash 機制，
 * 做成貼近版型的淡黃提示條，放在 #bigcontainer 最上面、置中 700px 對齊表格。
 */
.w2a-flash {
  width: 680px; margin: 8px auto 0; padding: 6px 10px; text-align: left;
  background: #FFFBE6; border: 1px solid #F0DFA0; color: #6B5A18;
  font-family: "新細明體"; font-size: 12px; line-height: 1.8;
}

/* --- 3. 送出鈕做成連結外觀 ----------------------------------------------
 * 本站有幾個「動作」必須是 POST（登出、加好友、設為精選、刪除），
 * 原站那幾處都是 <a>。用 <button> 才安全（GET 不該改狀態），
 * 外觀沿用版型的連結色 #A13636 / hover #ff0000。
 */
.w2a-linkbtn {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: #A13636; cursor: pointer;
}
.w2a-linkbtn:hover { color: #ff0000; text-decoration: underline; }

/* --- 4. 縮圖尺寸夾住 -----------------------------------------------------
 * 原站的縮圖一定是 thumbs/t*.jpg（120px 級距），所以 <td width=120 height=120>
 * 直接放原尺寸就對齊。本站 src/storage.js 產的縮圖是 90×90，而且
 * albums.cover 有時候存的是原圖（src/server.js 的 /photo/:pid/cover 存 p.url），
 * 不夾住會把 1024px 的大圖塞進 120px 的格子裡撐爆版面。
 * 只加上限、不放大，小圖還是照原樣置中在 side_a.gif 的框裡。
 */
#ad_square td.side img { max-width: 120px; max-height: 120px; }

/* --- 5. 大圖 -------------------------------------------------------------
 * 原站 show.php 的大圖沒有任何寬度限制。本站大圖最長邊 1024（storage.js），
 * 在窄視窗會撐出橫向捲軸，所以加一條上限。
 */
#DisplayImage { max-width: 96%; height: auto; }

/* --- 6. 站主專用的工具區塊 ----------------------------------------------
 * 「建立相簿 / 上傳照片 / 相簿設定 / 改說明」在無名是另一個服務
 * （www.wretch.cc/admin/album/ 與 yuiuploader.php），爬蟲永遠是登出狀態，
 * 所以存檔裡完全沒有這幾個畫面可以照抄。本站把它們放在同一頁的下方。
 * 外觀只借版型既有的元素：700px 白底表格、#FFE8E8 標題條、#ccc 細線。
 */
.w2a-tools      { width: 700px; margin: 0 auto; background: #fff; }
.w2a-tools h4   { margin: 0; padding: 5px 10px; background: #FFE8E8;
                  border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;
                  font-family: "新細明體"; font-size: 12px; font-weight: bold; color: #A13636; }
.w2a-tools .bd  { padding: 8px 10px; }
.w2a-tools table { border-collapse: collapse; }
.w2a-tools th   { padding: 3px 8px 3px 0; text-align: right; font-weight: normal;
                  white-space: nowrap; vertical-align: top; line-height: 20px; color: #666; }
.w2a-tools td   { padding: 3px 0; }
.w2a-tools input[type=text],
.w2a-tools input[type=password],
.w2a-tools select,
.w2a-tools textarea { font-family: "新細明體"; font-size: 12px;
                      border: 1px solid #ccc; padding: 1px 3px; }
.w2a-note       { color: #999; font-size: 11px; }
.w2a-danger     { color: #A13636; }

/* 空間用量條（無名的「相簿空間」）。原站在 admin 底下，沒有存檔可抄。 */
.w2a-quota      { width: 240px; height: 10px; margin: 4px 0; background: #fff; border: 1px solid #ccc; }
.w2a-quota i    { display: block; height: 10px; background: #A13636; }

/* --- 7. 迴響區 -----------------------------------------------------------
 * 舊版 show.php（本站照抄的這一版）沒有迴響功能——2012 年只有「新版相片頁」
 * （assets_src2/html/album_show_teresagiol.html，CSS 是 album/css/wspp.css）才有，
 * 而那是另一整套版面。本站的照片迴響沿用舊版頁面自己的語彙做：
 * hr 分隔、.small-c 字級、700px 白底表格。
 */
.w2a-cmt        { width: 700px; margin: 0 auto; background: #fff;
                  font-family: "新細明體"; font-size: 12px; }
.w2a-cmt h4     { margin: 0; padding: 5px 10px; background: #FFE8E8;
                  border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;
                  font-size: 12px; font-weight: bold; color: #A13636; }
.w2a-cmt ol     { margin: 0; padding: 0; list-style: none; }
.w2a-cmt li     { padding: 6px 10px; border-bottom: 1px dotted #ccc; }
.w2a-cmt li:last-child { border-bottom: 0; }
.w2a-cmt .who   { color: #A13636; font-weight: bold; }
.w2a-cmt .when  { color: #999; font-size: 11px; }
.w2a-cmt .body  { margin-top: 2px; word-wrap: break-word; word-break: break-all; }
.w2a-cmt .bd    { padding: 8px 10px; }
.w2a-cmt .empty { padding: 14px 10px; color: #999; }

/* --- 8. 檢舉框 -----------------------------------------------------------
 * 原站的「檢舉這張相片」是跳到 cc.wretch.cc/help/prosecute.php 另一頁；
 * 本站是同頁展開的表單（POST /report），所以要自己給一個框。
 */
.w2a-report     { width: 680px; margin: 10px auto; padding: 10px; background: #fff;
                  border: 1px dotted #ccc; text-align: left;
                  font-family: "新細明體"; font-size: 12px; }
.w2a-report textarea { width: 96%; }

/* --- 9. 一頁瀏覽（One Page）---------------------------------------------
 * 原站的 showall=1 是把整本相簿的大圖直接串下來，沒有額外樣式。
 * 本站加一點間距，並夾住寬度（同第 5 條的理由）。
 */
.w2a-onepage        { padding: 10px 0; }
.w2a-onepage img    { max-width: 96%; height: auto; }

/* --- 10. 縮圖列上「目前這張」的標記 -------------------------------------
 * 原站的 show.php 縮圖列沒有標出目前這張（只有 5 張、中間那張就是）。
 * 本站的縮圖列可能超過 5 張，所以給目前這張一個外框。
 */
#ad_square td.side.w2a-cur { outline: 2px solid #A13636; }

/* --- 12. 相簿總站 /albums ------------------------------------------------
 * 這一頁載的是另一支 bundle（wretch2012-album-index.css ＝ index/album/css 的
 * fix.css + index.css），本檔跟在它後面。下面三條只針對那一頁，
 * 選擇器在個人相簿頁不會命中，所以兩頁共用同一支偏離層沒有副作用。
 */
/* fix.css 的 img{border:1px solid #666} 是給相簿封面用的，
 * .grid 裡的「new」小圖示不該有框。 */
.album_list .grid img { border: 0; }
/* 登出必須是 POST（GET 不該改狀態），原站那顆是 <a>。外觀沿用 #access_link 的字級與色。 */
.w2i-linkbtn { background: none; border: 0; padding: 0; margin: 0;
               font: inherit; font-size: 11px; color: #c30; cursor: pointer; }
.w2i-linkbtn:hover { color: #f50; text-decoration: underline; }
/* flash 訊息（原站沒有，理由同 §2），寬度對齊 960px 版心 */
.w2i-flash { width: 940px; margin: 0 auto 8px; padding: 6px 10px; text-align: left;
             background: #FFFBE6; border: 1px solid #F0DFA0; color: #6B5A18;
             font-size: 12px; line-height: 1.8; }

/* --- 11. 密碼相簿頁 ------------------------------------------------------
 * 無名的密碼相簿是輸入框直接長在相簿頁上，本站是獨立一頁（GET 會 render
 * album_lock）。版面沿用同一張 700px 表格。
 */
.w2a-lock       { width: 700px; margin: 0 auto; padding: 30px 0; background: #fff;
                  text-align: center; font-family: "新細明體"; font-size: 12px; }
.w2a-lock .err  { color: #ff0000; }

/* 圖片資訊（EXIF）面板 —— 原版沒有存檔，這一塊是自製的（見 views/photo.ejs 註解）。
   預設收起，按「圖片資訊」或熱鍵 i 展開。外觀比照名片頁的 .sidetitle/.side 兩欄表，
   那是 2012 這一代唯一有存檔的「欄位:值」樣式，不另外發明一套。 */
#et.w2a-exif { display: none; margin: 8px auto; width: 400px; text-align: left; }
#et.w2a-exif.open { display: block; }
#et.w2a-exif td.sidetitle { width: 90px; color: #999; padding: 2px 6px; white-space: nowrap; }
#et.w2a-exif td.side { background: #f6f6f6; padding: 2px 6px; }

/* --- 13. 窄視窗：把上面那幾塊寫死的 px 寬放開 ---------------------------
 * 上面 §2、§6、§7、§8、§9、§11 那幾塊都是本站自己加的區塊，寬度寫死成
 * 700／680／400px 對齊版心。窄視窗（uicheck 量 375px）時它們會把整頁撐出
 * 橫向捲軸——照片頁量到 .w2a-cmt 700、密碼頁量到 .w2a-lock 700。
 *
 * 斷點與寫法跟 public/wretch2012-rwd.css 一致（999px 以上一條都不生效，
 * 桌機版面與還原度完全不受影響）。放在這裡而不是那一支：這幾條選擇器都是
 * 本檔自己發明的區塊，跟著它們的定義走比較不會改一邊漏一邊。
 *
 * §14 收掉的是「不是本檔發明、但只有相簿家族會遇到」的那三個，見下。
 */
@media (max-width: 999px) {
  .w2a-flash, .w2a-tools, .w2a-cmt, .w2a-report, .w2a-lock, .w2i-flash,
  #et.w2a-exif {
    width: auto; max-width: 100%; box-sizing: border-box;
  }
  .w2a-report textarea { width: 100%; box-sizing: border-box; }
  .w2a-quota { max-width: 100%; box-sizing: border-box; }
}

/* --- 14. 窄視窗：版型自己寫死的三個寬度 ---------------------------------
 * 這三個不是本檔發明的，但只有相簿家族會踩到，而且根源那兩支檔都不能手改
 * （wretch2012-album.css 是產生檔、wretch2012-rwd.css 由首頁 agent 負責），
 * 所以在這裡收。一樣只在窄視窗生效，桌機一條都不會命中。
 *
 * ⚠ 為什麼要加 !important、為什麼 rwd.css 那邊寫了卻沒有用：
 *   版型 skin 1/189（wretch2012-album.css 第 143–145 行）有
 *     table{display:table !important} tr{display:table-row !important}
 *     td{display:table-cell !important}
 *   那三條是無名當年為了壓過使用者自訂 CSS 才加的 !important。結果
 *   rwd.css 想把 #ad_square 攤成 inline-block 重排（那邊第 114–115、134 行）
 *   完全被蓋掉——實測 375px 下 #ad_square 的 computed display 還是 table，
 *   所以整張表維持 5 欄 120px、把頁面撐出 315px 的橫向捲軸。
 *
 * ⚠ 為什麼不照 rwd.css 的做法把格子攤成 inline-block 換行：
 *   相簿格是「封面列 / 說明列」兩排交錯的表格（原版就是這樣排的）。
 *   攤成 inline-block 之後兩排各自換行，會變成「五張封面」接「五行說明」，
 *   封面跟它的名字對不起來。改成**讓五欄一起等比縮小**：欄數、順序、
 *   封面與說明的對齊關係全部維持原版，只有格子變小。
 */

/* hr：版型的 hr{width:700px}（＋左右 1px 框＝702px）。 */
@media (max-width: 999px) {
  #bigcontainer hr { width: auto; max-width: 100%; }
}

/* 相簿／照片格：一排五格 120px ＋ cellspacing 10 ＝ 690px。
 * 斷點取 719px：690 再加一點邊距，剛好是「五格塞不下」的那個寬度，
 * 768px 以上維持原尺寸不動。
 * 選擇器一律加 #bigcontainer 前綴——rwd.css 排在本檔後面，同分就是它贏，
 * 多一個 id 才蓋得過它的 #ad_square td{width:46% !important}。 */
@media (max-width: 719px) {
  #bigcontainer #ad_square {
    width: 100% !important; table-layout: fixed !important;
    border-spacing: 4px !important;      /* 原本 cellspacing=10，窄視窗省下 30px */
  }
  #bigcontainer #ad_square td,
  #bigcontainer #ad_square td.side {
    width: auto !important; height: auto !important;
    background-size: 100% 100% !important;   /* side_a.gif 的外框跟著格子縮 */
  }
  #bigcontainer #ad_square td.side img { max-width: 100% !important; height: auto !important; }
  /* 版型的 body table#ad_square font a{width:120px} 會把說明撐回 120 */
  #bigcontainer #ad_square font a { width: auto !important; }
}

/* 照片頁頁首那張兩欄表：左邊 <td rowspan=2 width=360> 是麵包屑，
 * 右邊那欄放「16 / 611」與「第一張|上一張|下一張|最後一張|回上一層」。
 * 375px 的視窗裡 360 就吃掉九成，右欄只剩三十幾 px，那排連結會變成
 * 一個字一行的直排（實測 375px 高 300px 以上）。窄視窗改成上下堆疊。
 * :not() 兩個是為了放過同一層的另外兩張表——.show 是放大圖的、
 * #ad_square 是縮圖列，那兩張上面已經各自處理過了。 */
@media (max-width: 719px) {
  #body_show #bigcontainer > div > table:not(.show):not(#ad_square),
  #body_show #bigcontainer > div > table:not(.show):not(#ad_square) tbody,
  #body_show #bigcontainer > div > table:not(.show):not(#ad_square) tr,
  #body_show #bigcontainer > div > table:not(.show):not(#ad_square) td {
    display: block !important; width: auto !important; text-align: center;
  }
}

/* --- 切割照片 -------------------------------------------------------------
 * 零存檔（只有 shot.md:493 的截圖轉寫證明原站有這顆按鈕），整頁自製。
 * 配色沿用 skin 1/189 既有色盤，不新增視覺語言。
 */
.w2a-crop        { padding: 12px; text-align: left; }
.w2a-crop-stage  { position: relative; display: inline-block; line-height: 0;
                   border: 1px solid #ccc; cursor: crosshair; user-select: none; }
.w2a-crop-stage img { max-width: 640px; height: auto; }
.w2a-crop-sel    { position: absolute; display: none; box-sizing: border-box;
                   border: 2px dashed #A13636; background: rgba(255,232,232,.35); }
.w2a-crop form   { margin-top: 10px; }
.w2a-crop input[type=number] { width: 5em; }