/* shoe.css — /shoe/:slug 頁面元件樣式。依賴 tokens.css 的 CSS 變數。*/

/* ── 頁面基底 ── */
html { background: var(--paper); }

.shoe-page {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  line-height: var(--lh-u);
  -webkit-font-smoothing: antialiased;
  transition: background .4s, color .4s;
  --canvas-max: 880px;
  --k-4: 30px; --lh-4: 40px;
  --k-2: 24px; --lh-2: 32px;
  --k-1: 19px; --lh-1: 24px;
  --kq-header-h: 56px;
  --kq-footer-h: 48px;
}
.shoe-page .nobr { white-space: nowrap; }

/* ── 較大手機（≥ 561px） ── */
@media (min-width: 561px) {
  .shoe-page { --k-4: 34px; --lh-4: 48px; --k-3: 30px; --lh-3: 40px; }
}

/* ── 桌機分級 token（scoped，不污染 :root） ── */
@media (min-width: 1024px) {
  .shoe-page { --canvas-max: 1180px; --margin: clamp(20px,3.2vw,40px); --gutter: 20px; --k-4: 42px; --lh-4: 56px; }
}
@media (min-width: 1280px) {
  .shoe-page { --canvas-max: 1320px; --margin: clamp(40px,4vw,56px); --gutter: 28px; --k-4: 50px; --lh-4: 64px; }
}
@media (min-width: 1600px) {
  .shoe-page { --canvas-max: 1440px; --margin: clamp(56px,4.5vw,72px); --gutter: 32px; --k-4: 58px; --lh-4: 72px; --k-3: 42px; --lh-3: 56px; }
}
@media (min-width: 1920px) {
  .shoe-page { --canvas-max: 1560px; --margin: 72px; --gutter: 36px; --k-4: 64px; --lh-4: 80px; --k-3: 46px; --lh-3: 64px; }
}

/* ── 頁眉 logo 顏色（chrome.css .masthead 提供結構，此處補色）── */
.shoe-page .logo { color: var(--ink); }

/* ════════════════════════════════════════════
   對開頁核心（mobile: 單欄；桌機: 12 欄）
   ════════════════════════════════════════════ */
.shoe-page .spread {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--gutter);
  max-width: var(--canvas-max, 880px);
  margin: 0 auto;
  padding: 0 var(--margin);
  position: relative;
  align-items: start;
}

.shoe-page .page-L,
.shoe-page .page-R { grid-column: 1 / -1; padding: 40px 0; }
.shoe-page .page-L { border-bottom: 1px solid var(--seam); }

/* ── 桌機：12 欄對開 ── */
@media (min-width: 1024px) {
  .shoe-page .spread { grid-template-columns: repeat(12, 1fr); }
  .shoe-page .spread::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
    width: 1px; background: var(--seam); transform: translateX(-.5px);
  }
  .shoe-page .page-L { grid-column: 1 / 7; padding: 48px var(--gutter) 64px 0; border-bottom: none; }
  .shoe-page .page-R { grid-column: 7 / 13; padding: 48px 0 64px var(--gutter); }
  /* mode-stripe 脫離 flex 流，釘在 header 底部 */
  .shoe-page .kq-header .mode-stripe { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; }
  /* 固定外殼 */
  .shoe-page .kq-header, .shoe-page .kq-footer {
    position: fixed; left: 50%; transform: translateX(-50%);
    width: 100%; max-width: var(--canvas-max);
    box-sizing: border-box; background: var(--paper); z-index: 10;
  }
  .shoe-page .kq-header { top: 0; }
  .shoe-page .kq-footer { bottom: 0; }
  .shoe-page .kq-content { padding-block: var(--kq-header-h) var(--kq-footer-h); min-height: 100dvh; }
}
@media (max-width: 1023px) {
  .shoe-page .kq-header, .shoe-page .kq-footer { position: static; left: auto; transform: none; max-width: none; }
  .shoe-page .kq-footer { padding-bottom: env(safe-area-inset-bottom); }
}

/* ── 頁首書眉 ── */
.shoe-page .folio {
  font-family: var(--mono); font-size: var(--t--1); color: var(--ink-3);
  letter-spacing: .2em; text-transform: uppercase;
  padding-bottom: 24px; margin-bottom: 40px; border-bottom: 1px solid var(--seam);
}
.shoe-page .page-L .folio { color: var(--teal-ink); }
.shoe-page .page-R .folio { color: var(--signal); }

@media (min-width: 1024px)  { .shoe-page .folio { margin-bottom: 32px; } }
@media (min-width: 1280px)  { .shoe-page .folio { margin-bottom: 40px; } }
@media (min-width: 1600px)  { .shoe-page .folio { margin-bottom: 48px; } }
@media (min-width: 1920px)  { .shoe-page .folio { margin-bottom: 56px; } }

/* ── 名牌 ── */
.shoe-page .nameplate { margin-bottom: 48px; }
/* eyebrow 連結：導向 SHOES 目錄頁；沿用 .eyebrow 共用樣式，僅去除 <a> 預設色／底線，
   hover 給與 .model 同源的 signal 底線（§2.2.3）。不改全域 .eyebrow。 */
.shoe-page .eyebrow-link {
  color: inherit;
  text-decoration: none;
}
.shoe-page .eyebrow-link:hover {
  text-decoration: underline;
  text-decoration-color: var(--signal);
  text-underline-offset: 2px;
}

.shoe-page .model {
  font-family: var(--serif); font-weight: 900; font-size: var(--k-4);
  line-height: var(--lh-4); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; margin-top: 4px;
}
.shoe-page .model-empty {
  font-family: var(--serif); font-weight: 900; font-size: var(--k-4);
  line-height: var(--lh-4); color: var(--ink-3); text-wrap: balance; margin-top: 4px;
}
.shoe-page .empty-hint {
  font-size: var(--t--1); line-height: 24px; color: var(--ink-3); margin-top: 16px;
}
.shoe-page .agg { display: flex; align-items: baseline; gap: 14px; margin-top: 24px; }
.shoe-page .agg-score { font-family: var(--logo); font-weight: 700; font-size: var(--k-3); color: var(--signal); line-height: 1; }
.shoe-page .agg-of    { font-family: var(--mono); font-size: var(--t--1); color: var(--ink-3); }
.shoe-page .agg-count { font-family: var(--mono); font-size: var(--t--2); color: var(--ink-2); letter-spacing: .06em; }

/* ── 區段 ── */
.shoe-page .block { margin-bottom: 48px; }
.shoe-page .block:last-child { margin-bottom: 0; }
.shoe-page .sec-label {
  font-family: var(--mono); font-size: var(--t--2); color: var(--ink-3);
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: 20px;
  display: flex; gap: 10px; align-items: center;
}
.shoe-page .sec-label .num { color: var(--signal); }

/* ── 摘要 ── */
.shoe-page .summary {
  font-family: var(--sans); font-size: var(--u-0);
  line-height: var(--lh-1); color: var(--ink); text-wrap: pretty;
}
.shoe-page .summary .src {
  font-family: var(--mono); font-size: var(--t--2); color: var(--ink-3);
  letter-spacing: .06em; display: block; margin-bottom: 18px;
}
.shoe-page .summary p { margin-bottom: 16px; }
.shoe-page .summary p:last-child { margin-bottom: 0; }

/* ── 來源列表 ── */
.shoe-page .srclist { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--paper-2); }
.shoe-page .src-head {
  font-family: var(--mono); font-size: var(--t--2); color: var(--ink-3);
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: 14px;
}
.shoe-page .src-item {
  display: flex; gap: 14px; align-items: baseline;
  padding: 11px 0; border-top: 1px solid var(--paper-2); text-decoration: none;
}
.shoe-page .src-item:hover .src-t { color: var(--signal); }
.shoe-page .src-n { font-family: var(--mono); font-size: var(--t--2); color: var(--signal); flex-shrink: 0; }
.shoe-page .src-t {
  font-family: var(--serif); font-size: var(--u-0); line-height: var(--lh-u);
  color: var(--ink-2); text-wrap: pretty; transition: color .2s;
}

/* ── 規格表（mobile: 單欄；≥ 561px: label + value）── */
.shoe-page .spec { display: grid; grid-template-columns: 1fr; }
.shoe-page .spec dt {
  font-family: var(--mono); font-size: var(--t--1); color: var(--ink-3);
  letter-spacing: .04em; padding: 10px 0 2px; border-top: 1px solid var(--paper-2);
}
.shoe-page .spec dd {
  font-family: var(--sans); font-weight: 500; font-size: var(--u-0);
  color: var(--ink); padding: 2px 0 10px; border-top: none;
}
.shoe-page .spec dd .raw { font-family: var(--serif); color: var(--ink-2); font-size: var(--t--1); }

@media (min-width: 561px) {
  .shoe-page .spec { grid-template-columns: max-content 1fr; }
  .shoe-page .spec dt { padding: 10px 24px 10px 0; }
  .shoe-page .spec dd { padding: 10px 0; border-top: 1px solid var(--paper-2); }
}

/* ── 右頁：人聲 ── */
.shoe-page .statstrip {
  display: flex; flex-wrap: wrap;
  border-bottom: 1px solid var(--paper-2); margin-bottom: 36px; padding-bottom: 4px;
}
.shoe-page .stat {
  flex: 1 1 auto; min-width: 84px; padding: 0 0 22px;
  border-left: 1px solid var(--paper-2); padding-left: 16px; margin-left: -1px;
}
.shoe-page .stat:first-child { border-left: none; padding-left: 0; }
.shoe-page .stat-n { display: block; font-family: var(--logo); font-weight: 700; font-size: var(--k-2); color: var(--ink); line-height: 1; }
.shoe-page .stat-l { display: block; font-family: var(--mono); font-size: var(--t--2); color: var(--ink-3); letter-spacing: .08em; margin-top: 8px; }

/* review card — 設計規格：KILOQ-design-spec-v3.md §14.3 + §14.10 */
.shoe-page .review { padding: 20px; background: var(--teal); border-radius: var(--r-sm); margin-bottom: 12px; }

/* 注入卡（FB 社團 / KENLU）：整卡可點開原文（抬升＋變色由 chrome.css .kq-lift 提供）*/
.shoe-page .review-injected { cursor: pointer; }

/* 卡頭：名牌直欄 */
.shoe-page .review-head { display: flex; align-items: flex-start; margin-bottom: 8px; }
.shoe-page .review-np { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.shoe-page .review-kicker {
  font-family: var(--mono); font-weight: 700; font-size: var(--t--2);
  letter-spacing: .16em; text-transform: uppercase; color: var(--teal-ink);
}
.shoe-page .review-name { margin-top: 3px; }
.shoe-page .review-who,
.shoe-page .review-who-link { font-family: var(--mono); font-weight: 700; font-size: var(--u-0); color: var(--ink); letter-spacing: .04em; text-decoration: none; transition: color .2s; }
.shoe-page .review-who-link:hover { color: var(--signal); }
.shoe-page .review-who.kenlu { color: var(--teal-ink); }

/* meta + body 包裝 */
.shoe-page .review-meta-body { margin-bottom: 8px; }
.shoe-page .review-meta { display: flex; flex-direction: column; gap: 3px; font-family: var(--mono); font-size: var(--t--2); letter-spacing: .06em; }
.shoe-page .review-meta-item { color: var(--teal-ink); }
.shoe-page .review-meta-item.lang { color: var(--teal-ink); letter-spacing: .08em; }

/* 引言：serif 人聲錨點 */
.shoe-page .quote { font-family: var(--serif); font-weight: 500; font-size: var(--k-2); line-height: var(--lh-2); color: var(--ink); text-wrap: pretty; max-width: 30ch; margin-bottom: 8px; text-indent: -1em; padding-left: 0; }

/* 內文：色改 ink（原 ink-2），對齊 profile */
.shoe-page .review-body { font-family: var(--sans); font-size: var(--u-0); line-height: var(--lh-u); color: var(--ink); text-wrap: pretty; max-width: 42ch; }
.shoe-page .review-body p { margin-bottom: 8px; }
.shoe-page .review-body p:last-child { margin-bottom: 0; }

/* 勘履來源標記 */
.shoe-page .review-dot { font-family: var(--mono); font-size: var(--u-0); color: var(--ink-3); margin: 0 2px; }
.shoe-page .review-src { font-family: var(--mono); font-size: var(--t--1); color: var(--teal-ink); letter-spacing: .04em; text-decoration: none; }
.shoe-page a.review-src:hover { color: var(--signal); }

/* 手風琴 toggle：卡底全寬（§14.9.1）*/
.shoe-page .review-toggle {
  display: flex; align-items: center; justify-content: center;
  width: calc(100% + 40px); margin: 12px -20px -20px;
  padding: 10px 0;
  background: none; border: none; border-top: 1px solid var(--paper-2);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  color: var(--teal-ink); cursor: pointer;
  transition: background .2s, color .2s;
}
.shoe-page .review-toggle:hover { background: var(--paper-2); color: var(--ink); }
.shoe-page .review-chev { transition: transform .25s, color .2s; }
.shoe-page .review.expanded .review-chev { transform: rotate(180deg); }

/* 收合態（§14.9.2）：quote 留著，內文 clamp 2 行 */
.shoe-page .review.collapsed .review-body {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* 桌機 meta 88px 並排（§14.3.3）*/
@media (min-width: 1024px) {
  .shoe-page .review-meta-body { display: flex; gap: 24px; align-items: flex-start; }
  .shoe-page .review-meta { flex: 0 0 88px; }
  .shoe-page .review-body-wrap { flex: 1; min-width: 0; }
}

/* ── 串回 LOG 的入口連結 ── */
.shoe-page .log-handoff-link {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: var(--t--1);
  letter-spacing: .3px;
  color: var(--signal);
  text-decoration: none;
  border-bottom: 1px solid var(--signal);
  padding-bottom: 1px;
  transition: opacity .25s ease;
}
.shoe-page .log-handoff-link:hover { opacity: .7; }

/* LOG 標題列：標題左、＋鈕右；＋與下方類似定位卡 .kq-addbtn 同右緣（inset 12px） */
.shoe-page .folio--rec {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* + 鈕 40px 撐高列，底線需與 LOOK 對齊：40(鈕)+8 = 24(LOOK 書眉行高)+24(LOOK padding) = 48
     → padding-bottom 收成 8px，底線貼緊按鈕下方且與左頁 LOOK 同高 */
  padding-bottom: 8px;
}
.shoe-page .folio--rec .log-handoff-add { margin-right: 12px; }   /* 對齊 .rota-card-row .kq-addbtn right:12px */

/* ── 空狀態 / 載入 ── */
.shoe-page .placeholder {
  font-family: var(--mono); font-size: var(--t--1); color: var(--ink-3);
  letter-spacing: .06em; padding: 48px 0;
}
.shoe-page .no-answer {
  font-family: var(--sans); font-size: var(--u-0); line-height: var(--lh-1);
  color: var(--ink-3); text-wrap: pretty; padding: 24px 0;
}

/* ── 頁尾橫貫 ──
   排版基底已收斂進 chrome.css 全站 .kq-footer；此處不再重複。
   固定外殼（position/寬度）見上方 @media 與 layouts/shoe.css。 */


/* ── 語言切換（masthead 右側，常駐）── */
.shoe-page .lang-tabs { display: flex; align-items: center; gap: 10px; }
.shoe-page .lang-tab {
  font-family: var(--mono); font-size: var(--t--1); font-weight: 700;
  letter-spacing: .06em; line-height: 1;
  background: none; border: none; color: var(--ink-3);
  cursor: pointer; padding: 4px 2px;
  transition: color .25s, text-shadow .25s;
  -webkit-tap-highlight-color: transparent;
}
.shoe-page .lang-tab:hover { color: var(--ink-2); }
.shoe-page .lang-tab.active {
  background: var(--signal); color: var(--paper);
  border-radius: var(--r-xs); padding: 4px 9px;
}

/* ── 外觀按鈕（框內比例塊，方案 D，§14.7） ── */
.shoe-page .app-btn {
  width: 40px; height: 28px; padding: 4px; cursor: pointer; display: flex;
  background: var(--paper-2); border: 1px solid var(--ink-3); border-radius: var(--r-xs);
  transition: border-color .2s; flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.shoe-page .app-btn:hover { border-color: var(--signal); }
.shoe-page .app-btn .blk { display: flex; flex: 1; overflow: hidden; border-radius: 1px; }
.shoe-page .app-btn .a { background: var(--sw-d); flex: 0 0 64%; transition: flex-basis .3s; }
.shoe-page .app-btn .b { background: var(--sw-l); flex: 1; transition: flex-basis .3s; }
:root[data-appearance="light"] .shoe-page .app-btn .a { flex: 0 0 36%; }

/* ── §03 定位 / POSITION ── */
.agg-dim-wrap { margin-bottom: 6px; }
.agg-chips-row {
  display: grid;
  grid-template-columns: repeat(var(--chip-count, 3), 1fr);
  gap: 2px;
}
.agg-chip {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 4px;
  border: 1px solid var(--paper-2);
  font-family: var(--mono); font-size: var(--t--1); color: var(--ink-2);
  background: color-mix(in srgb, var(--teal-ink) calc(var(--w, 0) * 36%), transparent);
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .15s, color .15s, background .15s;
}
.agg-chip.lead { color: var(--ink); border-color: var(--teal-2); }
.agg-chip.lead .agg-chip-n { color: var(--ink-2); }
/* 尚未給分（0 票且非己選）：降明度，讀作「還沒輸入」態 */
.agg-chip.empty { color: var(--ink-3); border-color: color-mix(in srgb, var(--paper-2) 55%, transparent); }
.agg-chip.empty .agg-chip-n { color: color-mix(in srgb, var(--ink-3) 65%, transparent); }
button.agg-chip { cursor: pointer; }
button.agg-chip:hover { border-color: var(--ink-3); color: var(--ink); }
button.agg-chip:disabled { opacity: .45; cursor: default; }
.agg-chip.voted { border-color: var(--signal); color: var(--signal); }
.agg-chip.voted .agg-chip-n { color: var(--signal); }
.agg-chip-l { font-size: var(--t--1); }
.agg-chip-n { font-size: var(--t--1); color: var(--ink-3); }
.agg-login-hint { margin-top: 12px; }
.agg-login-link {
  font-family: var(--mono); font-size: var(--t--1); letter-spacing: .08em;
  color: var(--ink-3); text-decoration: none;
}
.agg-login-link:hover { color: var(--signal); }

/* ── 滿意度評分區（kiloq-shoepage-rating 三態）── */
.agg-rating { margin: 4px 0 18px; display: flex; flex-direction: column; gap: 10px; }
.agg-rating-kicker {
  font-family: var(--mono); font-size: var(--t--2); color: var(--ink-3);
  letter-spacing: .14em; text-transform: uppercase;
}
.agg-rating-count { font-family: var(--mono); font-size: var(--t--2); color: var(--ink-2); letter-spacing: .06em; }
.agg-rating-mine { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.agg-rating-mine-label { font-family: var(--mono); font-size: var(--t--2); color: var(--ink-3); letter-spacing: .08em; }
.agg-rating-word { font-family: var(--serif); font-size: var(--u-0); color: var(--ink); }
.agg-rating-tap, .agg-rating-edit {
  font-family: var(--mono); font-size: var(--t--1); letter-spacing: .04em;
  background: none; border: 1px solid var(--ink-3); border-radius: var(--r-xs);
  color: var(--ink-2); padding: 6px 12px; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.agg-rating-tap:hover, .agg-rating-edit:hover { border-color: var(--signal); color: var(--signal); }
/* 加入鞋櫃 + 鈕容器（取代舊 .agg-rating-cta 文字 CTA；鈕樣式 .kq-addbtn 全站定義於 chrome.css） */
.agg-rating-add { display: flex; }
/* 訪客點 picker 後的登入提示（點本身導登入）*/
.agg-rating-loginhint {
  font-family: var(--mono); font-size: var(--t--2); letter-spacing: .06em;
  color: var(--signal); text-decoration: none; border-bottom: 1px solid var(--signal);
  align-self: flex-start; padding-bottom: 1px; transition: opacity .2s;
}
.agg-rating-loginhint:hover { opacity: .7; }

/* ── 翻譯 ── */
.review-translate-bar { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.review-src-lang { font-family: var(--mono); font-size: var(--t--2); color: var(--ink-3); letter-spacing: .06em; }
.review-translate-btn {
  font-family: var(--mono); font-size: var(--t--2); letter-spacing: .06em;
  background: none; border: 1px solid var(--paper-3); color: var(--ink-3);
  padding: 2px 10px; cursor: pointer; transition: border-color .15s, color .15s;
}
.review-translate-btn:hover { border-color: var(--ink-3); color: var(--ink); }
.review-translate-btn:disabled { opacity: .4; cursor: default; }
.review-translated { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--paper-2); color: var(--ink-2); }
.quote-translated { color: var(--ink-3); font-style: italic; }

/* ── 類似定位鞋款（dispatch 2026-06-29-shoepage-similar-shoes）──
   卡片結構/語彙比照 ROTATION 鞋卡。rota-card* 在 rotation.css scope 於 .rotation-page，
   此處為 shoepage scoped 複本（非共用抽取；spec sync 已標，未來可考慮收斂）。 */
.shoe-page .similar { margin-top: 48px; }
.shoe-page .similar-title {
  font-family: var(--mono); font-size: var(--t--1); font-weight: 700;
  letter-spacing: .3px; color: var(--signal); margin: 0 0 16px;   /* 比照 .log-handoff-link「新增紀錄」字級 */
}
.shoe-page .similar-list { display: flex; flex-direction: column; gap: 12px; }

.shoe-page .rota-card-row { position: relative; }
.shoe-page .rota-card-row .kq-addbtn {
  position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
}
.shoe-page .rota-card-row .rota-card { padding-right: 64px; }   /* 讓出 + 鈕空間 */
.shoe-page .rota-card {
  display: block; background: var(--teal); border-radius: var(--r-sm);
  padding: 18px 20px; text-decoration: none; color: inherit;
}
/* hover 效果＝抬升＋微亮（.kq-lift），比照上方鞋卡；不加 rotation 的 inset 邊框 */
.shoe-page .rota-card:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.shoe-page .rota-card__np { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 8px; }
.shoe-page .rota-card__brand {
  font-family: var(--mono); font-weight: 700; font-size: var(--t--2);
  letter-spacing: .16em; text-transform: uppercase; color: var(--teal-ink); line-height: var(--lh--2);
}
.shoe-page .rota-card__model {
  margin-top: 3px; font-family: var(--serif); font-weight: 600; font-size: var(--k-2);
  line-height: var(--lh-2); letter-spacing: -.01em; color: var(--ink);
}
.shoe-page .rota-card__spec { display: flex; flex-wrap: wrap; gap: 6px; }
.shoe-page .rota-card__spec-item {
  font-family: var(--mono); font-size: var(--t--2); line-height: var(--lh--2);
  color: var(--teal-ink); border: 1px solid var(--teal-border); border-radius: var(--r-xs); padding: 2px 8px;
}
.shoe-page .rota-card__spec-item.is-plated { color: var(--ink); border-color: var(--teal-ink); }