/* AI 多媒體平台・示範頁
   設計 token 與元件沿用產品 design.css（原始色 → 語意 → 元件三層），
   版面依產品搜尋頁簡化；字型只用系統字，不載入外部字型。 */

:root{
  --p-navy-900:#1B2F45; --p-navy-800:#243A52; --p-navy-100:#E6ECF3;
  --p-gold-700:#8F6A22; --p-gold-600:#A87F2E; --p-gold-400:#C9A24B; --p-gold-100:#F4ECD8;
  --p-green-700:#2E7D5B; --p-green-100:#E1F1E8;
  --p-stone-900:#1F2B38; --p-stone-600:#66707C; --p-stone-400:#9AA3AD;
  --p-stone-200:#E5E1D8; --p-stone-100:#F1EEE6; --p-stone-50:#FAF9F6; --p-white:#fff;

  --navy:var(--p-navy-800); --navy-strong:var(--p-navy-900); --navy-soft:var(--p-navy-100);
  --gold:var(--p-gold-600); --gold-strong:var(--p-gold-700); --gold-soft:var(--p-gold-100); --gold2:var(--p-gold-400);
  --green:var(--p-green-700); --green-soft:var(--p-green-100);
  --ink:var(--p-stone-900); --mut:var(--p-stone-600); --faint:var(--p-stone-400);
  --line:var(--p-stone-200); --paper:var(--p-stone-50); --bg:var(--p-stone-100); --card:var(--p-white);

  --sans:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  --sh-sm:0 1px 2px rgba(31,43,56,.06);
  --sh-lg:0 8px 24px rgba(31,43,56,.12);
  --fs-xs:12.5px; --fs-sm:13.5px; --fs-md:15px; --fs-lg:17px; --fs-xl:22px;
  --t-fast:.15s ease;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
button,input,select{font-family:inherit;font-size:inherit;color:inherit}
button,a{-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
:focus-visible{outline:2.5px solid var(--gold);outline-offset:2px}

.ic{width:1.05em;height:1.05em;vertical-align:-.18em;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ── 示範提示條 ── */
.demo-banner{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  padding:8px 16px;background:var(--gold-soft);color:var(--gold-strong);
  border-bottom:1px solid #E2D2A6;font-size:var(--fs-sm);text-align:center;line-height:1.5}
.demo-banner .ic{color:var(--gold-strong)}
.demo-banner b{color:var(--navy-strong)}
.demo-banner .dot{color:#C8B27A;margin:0 4px}
.demo-banner a{font-weight:700;color:var(--navy);white-space:nowrap}

/* ── 頁首 ── */
.app-header{display:flex;align-items:center;gap:16px;padding:0 32px;height:64px;
  background:var(--navy-strong);color:#fff;border-bottom:3px solid var(--gold)}
.app-header .brand{display:flex;align-items:center;gap:12px;min-width:0}
.app-header .logo{width:40px;height:40px;border-radius:var(--r-md);background:var(--gold);
  color:var(--navy-strong);display:grid;place-items:center;flex:none}
.app-header .logo .ic{width:22px;height:22px;stroke-width:2.2}
.app-header h1{font-size:var(--fs-lg);font-weight:700;letter-spacing:.02em;line-height:1.2}
.app-header .sub{display:block;font-size:var(--fs-xs);color:var(--gold2);letter-spacing:.06em}
.app-header .spacer{flex:1}
.app-header nav a{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;
  border-radius:var(--r-sm);border:1px solid rgba(255,255,255,.28);color:#fff;
  text-decoration:none;font-size:var(--fs-sm);font-weight:600;transition:background var(--t-fast)}
.app-header nav a:hover{background:rgba(255,255,255,.12)}

main{max-width:1200px;margin:0 auto;padding:22px}

/* ── 分頁列 ── */
.tabs-bar{display:flex;gap:8px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:8px;box-shadow:var(--sh-sm);margin-bottom:16px}
.tabs-bar button{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;
  border:1px solid transparent;border-radius:var(--r-md);background:transparent;color:var(--mut);
  font-size:var(--fs-md);font-weight:600;cursor:pointer;transition:all var(--t-fast)}
.tabs-bar button:hover{background:var(--paper);color:var(--ink)}
.tabs-bar button.on{background:var(--navy-strong);color:#fff;border-color:var(--gold);
  box-shadow:inset 0 0 0 1px var(--gold)}
.tabs-bar .num{display:inline-grid;place-items:center;min-width:24px;height:22px;padding:0 7px;
  border-radius:var(--r-pill);background:var(--paper);color:var(--mut);font-size:var(--fs-xs);font-weight:700}
.tabs-bar button.on .num{background:var(--gold);color:var(--navy-strong)}

/* ── 搜尋 ── */
.searchrow{display:flex;gap:12px;margin-bottom:12px;max-width:700px}
.field{position:relative;display:flex;align-items:center;flex:1;min-width:0}
.field .ic{position:absolute;left:14px;color:var(--faint);pointer-events:none}
.field input{width:100%;height:52px;padding:0 14px 0 40px;background:#fff;
  border:1.5px solid var(--navy);border-radius:var(--r-md);font-size:16.5px;outline:none;
  box-shadow:0 1px 6px rgba(31,42,55,.08);transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.field input:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:0 20px;height:52px;border-radius:var(--r-md);
  border:1px solid var(--line);background:var(--card);font-size:var(--fs-md);font-weight:600;
  cursor:pointer;white-space:nowrap;transition:all var(--t-fast)}
.btn-primary{background:var(--navy-strong);border-color:var(--navy-strong);color:#fff}
.btn-primary:hover{background:var(--navy);border-color:var(--navy)}

.sug{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.sug .lbl{font-size:var(--fs-sm);color:var(--mut);margin-right:2px}
.sug button,.chipbtn{border:1px solid var(--line);background:var(--card);border-radius:var(--r-pill);
  padding:5px 14px;font-size:15px;cursor:pointer;color:var(--ink);transition:all var(--t-fast)}
.sug button:hover,.chipbtn:hover{border-color:var(--gold);color:var(--gold-strong);background:var(--gold-soft)}

/* ── 篩選 ── */
.filters{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:10px 12px;margin-bottom:14px;box-shadow:var(--sh-sm)}
.frow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.flabel{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);font-weight:700;color:var(--mut)}
.flabel .ic{color:var(--gold-strong)}
.fchips{display:flex;gap:6px;flex-wrap:wrap;flex:1;min-width:0}
.fchips button{border:1px solid var(--line);background:var(--paper);border-radius:var(--r-pill);
  padding:3px 12px;font-size:var(--fs-sm);cursor:pointer;color:var(--ink);transition:all var(--t-fast)}
.fchips button:hover{border-color:var(--gold)}
.fchips button.open{background:var(--navy-strong);color:#fff;border-color:var(--navy-strong)}
.fchips button.has{border-color:var(--gold);color:var(--gold-strong);background:var(--gold-soft);font-weight:700}
.yearsel{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--mut)}
.yearsel .ic{color:var(--gold-strong)}
.yearsel select{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);
  padding:4px 8px;font-size:var(--fs-sm);cursor:pointer}
.fvals{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.fvals button{border:1px solid #d9c690;background:var(--card);color:var(--gold-strong);
  border-radius:var(--r-pill);padding:3px 12px;font-size:var(--fs-sm);cursor:pointer}
.fvals button:hover,.fvals button.on{background:var(--gold);border-color:var(--gold);color:#fff}
.fvals .n{font-size:11.5px;opacity:.75;margin-left:4px}
.active{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:10px}
.active .pill{display:inline-flex;align-items:center;gap:6px;background:var(--navy-soft);color:var(--navy);
  border:0;border-radius:var(--r-pill);padding:3px 6px 3px 12px;font-size:var(--fs-sm);font-weight:700;cursor:pointer}
.active .pill .ic{width:14px;height:14px}
.active .clear{border:0;background:none;color:var(--mut);font-size:var(--fs-sm);text-decoration:underline;cursor:pointer}

.count{font-size:17px;font-weight:700;color:var(--ink);margin-bottom:12px}
.count small{font-weight:400;color:var(--mut);font-size:var(--fs-sm);margin-left:6px}
.crumb{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:15px;color:var(--mut);margin-bottom:10px}
.crumb button{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:var(--r-pill);
  border:1.5px solid var(--navy);background:var(--navy);color:#fff;font-size:var(--fs-sm);font-weight:700;cursor:pointer}

/* ── 照片牆（產品同款：緊密相接、滑過浮出名稱） ── */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:4px}
.pcard{position:relative;display:block;width:100%;aspect-ratio:4/3;border:0;padding:0;
  background:#e8e4d8;overflow:hidden;cursor:pointer;text-align:left}
.pcard img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.pcard:hover img{transform:scale(1.03)}
.pcard .ovl{position:absolute;left:0;right:0;bottom:0;padding:22px 10px 8px;color:#fff;
  background:linear-gradient(transparent,rgba(20,26,34,.8));opacity:0;transition:opacity var(--t-fast)}
.pcard:hover .ovl,.pcard:focus-visible .ovl{opacity:1}
@media (hover:none){.pcard .ovl{opacity:1}}
.pcard .nm{display:block;font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 搜尋結果：卡片下方列出命中原因 */
.pgrid.results{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;align-items:start}
.rcard{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;cursor:pointer;text-align:left;padding:0;
  box-shadow:var(--sh-sm);transition:box-shadow var(--t-fast),border-color var(--t-fast),transform var(--t-fast)}
.rcard:hover{box-shadow:var(--sh-lg);border-color:var(--gold2);transform:translateY(-2px)}
.rcard .ph{position:relative;display:block;aspect-ratio:4/3;background:#e8e4d8;overflow:hidden}
.rcard .ph img{display:block;width:100%;height:100%;object-fit:cover}
.rcard .rank{position:absolute;top:8px;left:8px;background:rgba(20,26,34,.78);color:#fff;
  font-size:12px;font-weight:800;border-radius:var(--r-pill);padding:2px 9px}
.rcard .rb{padding:10px 12px 12px;display:flex;flex-direction:column;gap:7px}
.rcard .rt{display:block;font-size:15px;font-weight:700;line-height:1.35}
.score{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mut)}
.score .bar{flex:1;height:6px;border-radius:var(--r-pill);background:var(--paper);border:1px solid var(--line);overflow:hidden}
.score .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold2))}
.hitrow{display:flex;gap:5px;flex-wrap:wrap}
.hit{font-size:12.5px;border-radius:5px;padding:1px 7px;line-height:1.6}
.hit-ai{background:#E7EEF6;color:#1F4E79}
.hit-tag{background:#EAF5EC;color:#2E6B44}
.hit-ocr{background:#FBEFD6;color:#7A5A1C}
.hit-meta{background:#EFEDE7;color:#4F5965}
.hit .syn{opacity:.8;font-size:11.5px}

/* ── 相簿卡 ── */
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.gcard{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;cursor:pointer;text-align:left;padding:0;box-shadow:var(--sh-sm);transition:all var(--t-fast)}
.gcard:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);border-color:var(--gold2)}
.gcard .cov{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:2px;height:150px;background:#e8e4d8}
.gcard .cov img{width:100%;height:100%;object-fit:cover;display:block}
.gcard .cov img:first-child{grid-row:1/3}
.gcard .gn{display:block;font-size:15.5px;font-weight:700;padding:10px 12px 0;line-height:1.35}
.gcard .gc{display:flex;gap:12px;flex-wrap:wrap;font-size:13.5px;color:var(--mut);padding:2px 12px 12px}
.gcard .gc .ic{color:var(--gold-strong);margin-right:3px}

.empty{grid-column:1/-1;text-align:center;padding:40px 20px;color:var(--mut);background:var(--card);
  border:1px dashed var(--line);border-radius:var(--r-lg);font-size:15.5px}
.empty b{color:var(--ink)}
.empty .sug{justify-content:center;margin:14px 0 0}

/* ── 人物分頁 ── */
.people{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--sh-sm)}
.people h3{display:flex;align-items:center;gap:8px;font-size:var(--fs-lg);margin-bottom:8px}
.people h3 .ic{color:var(--gold-strong)}
.people p{color:var(--mut);font-size:15px;margin-bottom:10px;max-width:68ch}
.people .sug{margin:14px 0 0}

/* ── 架構區 ── */
.arch{background:var(--navy-strong);color:#E6ECF3;margin-top:40px;border-top:3px solid var(--gold)}
.arch-in{max-width:1200px;margin:0 auto;padding:36px 22px 40px}
.arch h2{display:flex;align-items:center;gap:10px;font-size:var(--fs-xl);color:#fff;margin-bottom:18px}
.arch h2 .ic{color:var(--gold2)}
.flow{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;counter-reset:s}
.flow li{position:relative;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-lg);padding:16px;display:flex;flex-direction:column;gap:6px}
.flow li:not(:last-child)::after{content:"";position:absolute;right:-10px;top:30px;width:8px;height:8px;
  border-top:2px solid var(--gold2);border-right:2px solid var(--gold2);transform:rotate(45deg)}
.flow .fi{width:38px;height:38px;border-radius:var(--r-md);background:var(--gold);color:var(--navy-strong);display:grid;place-items:center}
.flow b{font-size:16px;color:#fff}
.flow b::before{counter-increment:s;content:counter(s) ". ";color:var(--gold2)}
.flow span:last-child{font-size:13.5px;color:#B9C6D4;line-height:1.65}
.arch-notes{list-style:none;margin-top:20px;display:grid;gap:10px}
.arch-notes li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.7}
.arch-notes .ic{margin-top:4px;color:var(--gold2)}
.arch-notes b{color:#fff}
.credit{margin-top:20px;padding-top:14px;border-top:1px solid rgba(255,255,255,.14);font-size:12.5px;color:#9FB0C2}

/* ── 詳情 modal ── */
.modal{position:fixed;inset:0;background:rgba(10,16,24,.75);display:flex;align-items:center;
  justify-content:center;z-index:50;padding:18px}
.detail{position:relative;background:var(--card);border-radius:14px;max-width:820px;width:100%;
  max-height:92vh;overflow:auto;overscroll-behavior:contain}
.dimgwrap{position:relative;background:#111}
.dimgwrap img{display:block;width:100%;height:auto;max-height:52vh;object-fit:contain}
.dclose{position:sticky;top:12px;float:right;margin:12px 12px -56px 0;z-index:5;width:44px;height:44px;
  border:0;border-radius:50%;background:#fff;color:var(--ink);cursor:pointer;display:grid;place-items:center;
  box-shadow:0 3px 14px rgba(0,0,0,.45)}
.dclose .ic{width:20px;height:20px;stroke-width:2.6}
.dclose:hover{background:var(--gold);color:#fff}
.dnav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;
  border:0;background:rgba(255,255,255,.88);color:var(--ink);cursor:pointer;display:grid;place-items:center;
  box-shadow:0 2px 10px rgba(0,0,0,.35)}
.dnav:hover{background:var(--gold);color:#fff}
.dnav.prev{left:10px}.dnav.next{right:10px}
.dnav .ic{width:22px;height:22px}
.detail .bd{padding:18px 22px 22px}
.dhead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.dhead h2{font-size:var(--fs-xl);line-height:1.3}
.dhead .pos{font-size:var(--fs-sm);color:var(--mut)}
.sec{margin-top:16px}
.sec h3{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:800;color:var(--mut);
  letter-spacing:.04em;margin-bottom:6px}
.sec h3 .ic{color:var(--gold-strong)}
.sec .ai-badge{font-size:11.5px;font-weight:700;background:var(--gold-soft);color:var(--gold-strong);
  border-radius:var(--r-pill);padding:0 8px;letter-spacing:0}
.desc{font-size:16.5px;color:#3E4C5A;background:var(--paper);border-left:3px solid var(--gold);
  padding:10px 12px;border-radius:0 8px 8px 0}
.ocr{white-space:pre-wrap;font-size:15px;background:#FBF8F0;border:1px dashed #E2D2A6;border-radius:8px;padding:10px 12px;color:#4A3A12}
.ocr.none{color:var(--mut);background:var(--paper);border-color:var(--line)}
.tagrow{display:flex;gap:6px;flex-wrap:wrap}
.tagrow button{font-size:14px;border:1px solid #d9c690;color:var(--gold-strong);background:var(--card);
  border-radius:var(--r-pill);padding:2px 10px;cursor:pointer}
.tagrow button:hover{background:var(--gold);color:#fff;border-color:var(--gold)}
.tagrow button .c{color:var(--mut);font-size:12px;margin-right:4px}
.tagrow button:hover .c{color:#fff}
.kv{width:100%;border-collapse:collapse;font-size:14.5px}
.kv th,.kv td{padding:5px 8px 5px 0;vertical-align:top;border-bottom:1px solid #F0EDE4;text-align:left}
.kv th{color:var(--mut);font-weight:400;white-space:nowrap;width:96px}
.kv td{word-break:break-word}
.kv a{color:var(--navy);font-weight:600}
.how{list-style:none;display:grid;gap:8px;counter-reset:h}
.how li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.65}
.how li::before{counter-increment:h;content:counter(h);flex:none;width:24px;height:24px;border-radius:50%;
  background:var(--navy-strong);color:#fff;font-size:12.5px;font-weight:800;display:grid;place-items:center;margin-top:1px}
.how b{color:var(--ink)}
.how .mock{display:block;color:var(--mut);font-size:13px}
.howbox{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px}

/* ── 平板／手機 ── */
@media (max-width:900px){
  .flow{grid-template-columns:repeat(2,1fr)}
  .flow li:nth-child(2)::after{display:none}
}
@media (max-width:640px){
  .app-header{padding:0 16px;height:58px}
  .app-header .logo{width:34px;height:34px}
  .app-header nav a{padding:7px 10px}
  main{padding:14px 12px}
  .demo-banner{font-size:12.5px;padding:8px 16px;justify-content:flex-start;text-align:left;gap:4px 8px}
  .demo-banner > .ic{display:none}
  .demo-banner .dot{margin:0 2px}
  .frow{gap:8px}
  .flabel{order:1}
  .yearsel{order:2;margin-left:auto}
  .fchips{order:3;flex-basis:100%}
  .tabs-bar button{padding:8px 12px;font-size:14px}
  .searchrow{gap:8px}
  .field input{height:48px;font-size:16px}
  .btn{height:48px;padding:0 14px}
  .btn span{display:none}
  .sug button{font-size:14px;padding:4px 12px}
  .pgrid{grid-template-columns:repeat(2,1fr);gap:3px}
  .pgrid.results{grid-template-columns:1fr;gap:12px}
  .ggrid{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr}
  .flow li::after{display:none}
  .modal{padding:0;align-items:stretch}
  .detail{max-height:100vh;border-radius:0}
  .detail .bd{padding:16px}
  .dhead h2{font-size:19px}
  .kv th{width:76px}
}