/* tiletray.css — 樂古機種指南 */

:root{
  --milk:#f8f6f1;
  --milk-2:#efece4;
  --card:#ffffff;
  --ink:#1c1b18;
  --ink-2:#4a473f;
  --mute:#7d7970;
  --teal:#0f766e;
  --teal-2:#115e56;
  --teal-pale:#d9efec;
  --line:#e2ded4;
  --hold:1200px;
  --r:22px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--milk);color:var(--ink);
  font-family:"Noto Sans HK","PingFang HK","Microsoft JhengHei",system-ui,sans-serif;
  font-size:15.5px;line-height:1.78;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3,h4{font-family:"Bricolage Grotesque","Noto Sans HK",system-ui,sans-serif;
  font-weight:800;line-height:1.16;letter-spacing:-.02em;margin:0;text-wrap:balance}
h1 i,h2 i{font-style:normal}
.hold{max-width:var(--hold);margin:0 auto;padding:0 28px}

/* ── 頂欄：膠囊搜尋框佔中間 ── */
.top{background:var(--milk);position:sticky;top:0;z-index:30}
.top-in{max-width:var(--hold);margin:0 auto;padding:14px 28px;
  display:flex;align-items:center;gap:16px}
.brand{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:800;
  font-size:21px;letter-spacing:-.02em;color:var(--teal);white-space:nowrap}
.brand span{color:var(--ink)}
.topnav{display:flex;gap:18px;font-size:14.5px;font-weight:500;white-space:nowrap}
.topnav a:hover{color:var(--teal)}
.seekbox{flex:1;min-width:0;background:var(--milk-2);border-radius:999px;
  padding:11px 22px;color:var(--mute);font-size:14px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.round{display:inline-block;border-radius:999px;padding:11px 22px;
  font-weight:700;font-size:14.5px;white-space:nowrap}
.round-fill{background:var(--teal);color:#fff}
.round-fill:hover{background:var(--teal-2)}
.round-soft{background:var(--milk-2);color:var(--ink)}
.round-soft:hover{background:var(--line)}

/* ── 開場：左標題／右錯落圖卡 ── */
.open{max-width:var(--hold);margin:0 auto;padding:36px 28px 20px;
  display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;min-height:520px}
.open h1{font-size:clamp(34px,4.6vw,60px)}
.open h1 i{display:block}
.open p{color:var(--ink-2);font-size:17px;margin:18px 0 26px;max-width:460px}
.open .btns{display:flex;gap:12px;flex-wrap:wrap}

.scatter{position:relative;height:500px}
.scatter a{position:absolute;border-radius:var(--r);overflow:hidden;
  box-shadow:0 10px 26px rgba(28,27,24,.13);background:var(--milk-2)}
.scatter img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.scatter a:hover img{transform:scale(1.05)}
.sc1{width:40%;height:50%;left:30%;top:14%;z-index:3}
.sc2{width:27%;height:34%;left:0;top:4%}
.sc3{width:25%;height:30%;left:2%;top:46%}
.sc4{width:26%;height:36%;left:74%;top:0}
.sc5{width:28%;height:34%;left:72%;top:44%}

/* ── 置中標題＋滿版寬圖 ── */
.mid-sect{padding:74px 0 0;text-align:center}
.mid-sect h2{font-size:clamp(28px,3.4vw,42px)}
.mid-sect p{color:var(--mute);font-size:16.5px;margin:12px auto 0;max-width:560px}
.widewrap{max-width:var(--hold);margin:34px auto 0;padding:0 28px}
.widewrap img{width:100%;height:400px;object-fit:cover;border-radius:var(--r)}

/* ── 不等高瀑布卡 ── */
.trayhead{max-width:var(--hold);margin:82px auto 0;padding:0 28px}
.trayhead h2{font-size:clamp(26px,3vw,36px)}
.trayhead p{color:var(--mute);margin-top:10px;max-width:600px}
.tray{max-width:var(--hold);margin:26px auto 0;padding:0 28px;
  columns:2;column-gap:20px}
.tile{break-inside:avoid;margin-bottom:20px;background:var(--card);
  border-radius:var(--r);overflow:hidden;display:block;border:1px solid var(--line)}
.tile img{width:100%;object-fit:cover}
.tile.a img{height:330px}
.tile.b img{height:240px}
.tile.c img{height:290px}
.tile.d img{height:220px}
.tile.e img{height:310px}
.tile .txt{padding:18px 20px 20px}
.tile h3{font-size:19px;margin-bottom:7px}
.tile p{color:var(--mute);font-size:14.2px}
.tile .tag{display:inline-block;margin-bottom:10px;background:var(--teal-pale);
  color:var(--teal-2);font-size:12px;font-weight:700;padding:4px 12px;border-radius:999px}
.tile:hover{box-shadow:0 12px 28px rgba(28,27,24,.11)}

/* ── 問答 ── */
.ask{max-width:920px;margin:82px auto 0;padding:0 28px}
.ask h2{font-size:clamp(26px,3vw,36px);text-align:center;margin-bottom:26px}
.qcard{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:18px 22px;margin-bottom:12px}
.qcard b{display:block;font-size:15.6px;margin-bottom:5px}
.qcard p{color:var(--mute);font-size:14.4px}

/* ── 收尾 ── */
.tailer{margin-top:86px;background:var(--teal);color:#fff;padding:66px 0;text-align:center}
.tailer h2{font-size:clamp(27px,3.2vw,38px);margin-bottom:10px}
.tailer p{color:#c6e6e2;max-width:520px;margin:0 auto 24px}
.tailer .round-fill{background:#fff;color:var(--teal-2)}
.tailer .round-fill:hover{background:var(--teal-pale)}

/* ── 內頁 ── */
.lead{max-width:var(--hold);margin:0 auto;padding:44px 28px 0}
.lead .kick{display:inline-block;background:var(--teal-pale);color:var(--teal-2);
  font-size:12.5px;font-weight:700;padding:5px 14px;border-radius:999px;margin-bottom:16px}
.lead h1{font-size:clamp(28px,3.8vw,46px)}
.lead p{color:var(--ink-2);font-size:16.5px;max-width:660px;margin-top:14px}
.leadimg{max-width:var(--hold);margin:30px auto 0;padding:0 28px}
.leadimg img{width:100%;height:360px;object-fit:cover;border-radius:var(--r)}
.papers{max-width:820px;margin:0 auto;padding:44px 28px 0}
.papers h2{font-size:23px;margin:34px 0 12px}
.papers h2:first-child{margin-top:0}
.papers h3{font-size:17px;margin:22px 0 8px}
.papers p{margin-bottom:13px;color:var(--ink-2)}
.papers ul{margin:0 0 16px;padding-left:20px;color:var(--ink-2)}
.papers li{margin-bottom:7px}
.papers strong{color:var(--ink);font-weight:700}
.flag{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--teal);
  border-radius:0 16px 16px 0;padding:16px 20px;margin:20px 0;font-size:14.6px}
.flag b{display:block;margin-bottom:5px}
.sheet{overflow-x:auto;margin:18px 0 22px}
table{border-collapse:collapse;width:100%;min-width:460px;background:var(--card);font-size:14.2px}
th,td{border:1px solid var(--line);padding:10px 13px;text-align:left}
th{background:var(--milk-2);font-weight:700}
.gonext{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:32px 0 0}
.gonext span{color:var(--mute);font-size:13.6px}

/* ── 其他機種列 ── */
.others{max-width:var(--hold);margin:74px auto 0;padding:0 28px}
.others h4{font-size:14px;color:var(--mute);font-weight:500;margin-bottom:14px}
.othergrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.other{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:15px 18px}
.other b{display:block;font-size:15.4px}
.other span{color:var(--mute);font-size:13px}
.other:hover{border-color:var(--teal);color:var(--teal)}

/* ── 頁尾 ── */
.base{margin-top:80px;background:var(--milk-2);padding:44px 0 0}
.base-in{display:grid;grid-template-columns:1.4fr 1fr auto;gap:34px;align-items:start}
.base-brand p{color:var(--mute);font-size:13.6px;margin-top:10px;max-width:340px}
.base-nav{display:grid;grid-template-columns:repeat(2,1fr);gap:7px 20px;font-size:14px}
.base-nav a:hover{color:var(--teal)}
.base-fine{margin-top:32px;padding:16px 28px 24px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  color:var(--mute);font-size:12.6px}

@media(max-width:1040px){
  .topnav,.seekbox{display:none}
}
@media(max-width:900px){
  .open{grid-template-columns:1fr;min-height:0;padding-top:26px}
  .scatter{height:400px;margin-top:8px}
  .othergrid,.base-in{grid-template-columns:1fr}
  .widewrap img,.leadimg img{height:250px}
}
@media(max-width:560px){
  .tray{columns:1}
  .lead h1 i{display:block}
  .scatter{height:330px}
}