/* ══════════ 網站本體樣式 ══════════ */
:root{
  --steel-050:oklch(97.6% .004 235); --steel-100:oklch(95.4% .006 235);
  --steel-200:oklch(91.6% .008 235); --steel-300:oklch(86% .010 235);
  --ink-950:oklch(20% .015 240); --ink-800:oklch(32% .016 240);
  --ink-600:oklch(48% .014 240); --ink-450:oklch(58% .012 240);
  --white:oklch(99.5% .001 240);
  --green-700:oklch(43% .095 153); --green-600:oklch(50% .105 152); --green-050:oklch(95% .028 152);
  --bg-page:var(--steel-100); --bg-tile:var(--white); --bg-inset:var(--steel-050);
  --text-primary:var(--ink-950); --text-secondary:var(--ink-800);
  --text-muted:var(--ink-600); --text-faint:var(--ink-450);
  --rule:var(--steel-300); --rule-soft:var(--steel-200);
  --accent:var(--green-600); --accent-deep:var(--green-700); --accent-wash:var(--green-050);
  --focus-ring:var(--green-700);
  --cta-bg:var(--accent-deep); --cta-text:var(--white);
  --tile-border:var(--rule-soft); --chip-bg:var(--bg-inset);
  --font-text:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-display:"Archivo","InterDisplay","Inter",system-ui,sans-serif;
  --font-ui:-apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC",sans-serif;
  --width-wide:112%; --width-normal:100%;
  --space-2xs:4px; --space-xs:8px; --space-sm:12px; --space-md:16px;
  --space-lg:24px; --space-xl:32px; --space-2xl:48px; --space-3xl:72px;
  --ease-out:cubic-bezier(0,0,.2,1);
  --shadow-tile:0 1px 2px oklch(20% .015 240 / .05), 0 4px 12px oklch(20% .015 240 / .045);
  --edit:oklch(55% .17 262);      /* 編輯器強調色,刻意跟網站綠分開 */
  --edit-wash:oklch(96% .04 265);
  --bad:oklch(52% .19 27); --bad-wash:oklch(95% .05 25);
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip; scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg-page);color:var(--text-primary);
  font-family:var(--font-text);font-size:15.5px;line-height:1.6;overflow-x:clip;
  font-feature-settings:"cv05" 1}
h1,h2,h3{font-family:var(--font-display);font-style:normal;margin:0;text-wrap:balance;
  font-stretch:var(--width-normal)}
p{margin:0;text-wrap:pretty}
a{color:inherit}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:2px}
.wrap{max-width:1280px;margin-inline:auto;padding-inline:clamp(16px,3.5vw,36px)}
.label{font-family:var(--font-display);font-stretch:var(--width-wide);
  font-size:10.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--text-faint)}

.head{background:var(--bg-tile);border-bottom:1px solid var(--rule)}
.head-in{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-md) var(--space-xl);padding-block:var(--space-md)}
.wordmark{display:inline-flex;align-items:center;gap:9px;text-decoration:none}
.wm-mark{width:26px;height:26px;flex:none;color:var(--accent-deep)}
.wm-text{display:inline-flex;align-items:baseline;gap:.28em;line-height:1}
.wm-text .sz{font-family:var(--font-display);font-stretch:var(--width-wide);font-weight:800;font-size:22px;letter-spacing:-.025em}
.wm-text .v{font-family:var(--font-display);font-stretch:var(--width-normal);font-weight:300;font-size:22px;letter-spacing:-.005em;color:var(--text-secondary)}
.head-nav{display:flex;flex-wrap:wrap;gap:var(--space-lg);margin-left:auto}
.head-nav a{font-size:14px;font-weight:500;text-decoration:none;color:var(--text-secondary);transition:color 130ms var(--ease-out)}
.head-nav a:hover{color:var(--accent-deep)}
.head-nav a.cur{color:var(--text-primary);font-weight:600}

/* Hero */
.pitch{background:var(--bg-tile);border-bottom:1px solid var(--rule);position:relative;overflow:hidden}
.pitch-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.pitch-bg::after{content:"";position:absolute;inset:0;background:oklch(20% .015 240 / var(--ov,.45))}
.pitch.full .pitch-in{position:relative;z-index:1}
.pitch.full h1,.pitch.full .pitch p{color:var(--white)}
.pitch.full .pitch-cta p{color:oklch(92% .01 240)}
.pitch.full .fact{background:oklch(100% 0 0 / .14);border-color:oklch(100% 0 0 / .3);color:var(--white)}
.pitch-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:var(--space-lg) var(--space-2xl);
  align-items:end;padding-block:clamp(28px,4vw,52px)}
.pitch.side .pitch-in{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center}
.pitch.side .side-col{display:flex;flex-direction:column;gap:var(--space-md)}
.side-img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;background:var(--bg-inset);display:block}
.pitch h1{font-weight:700;font-stretch:var(--width-wide);
  font-size:clamp(1.75rem,1.15rem + 2.6vw,3.15rem);letter-spacing:-.028em;line-height:1.05;max-width:20ch}
.pitch h1 .lt{font-weight:300;font-stretch:var(--width-normal);color:var(--text-secondary);letter-spacing:-.018em}
.pitch.full h1 .lt{color:oklch(88% .01 240)}
.pitch p.lede{margin-top:var(--space-sm);max-width:62ch;color:var(--text-secondary)}
.pitch-facts{display:flex;flex-wrap:wrap;gap:var(--space-xs) var(--space-md);margin-top:var(--space-md)}
.fact{background:var(--chip-bg);border:1px solid var(--rule-soft);border-radius:2px;
  padding:3px 9px;font-size:12px;font-weight:500;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.pitch-cta{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-sm)}
.pitch-cta p{margin:0;font-size:13px;line-height:1.6;color:var(--text-muted);max-width:34ch}
.pitch-cta p a{color:var(--accent-deep);font-weight:500}
.pitch.full .pitch-cta p a{color:oklch(88% .07 152)}
.cta{display:inline-block;background:var(--cta-bg);color:var(--cta-text);
  font-family:var(--font-display);font-stretch:104%;font-size:15px;font-weight:600;letter-spacing:-.005em;
  text-decoration:none;padding:14px 22px;border-radius:3px;white-space:nowrap;
  transition:background 130ms var(--ease-out),transform 130ms var(--ease-out)}
.cta:hover{background:oklch(37% .085 153);transform:translateY(-1px)}

/* 索引列 */
.indexbar{position:sticky;top:0;z-index:20;background:oklch(95.4% .006 235 / .92);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.indexbar-in{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm) var(--space-md);padding-block:10px}
.indexbar a{font-size:13px;font-weight:500;text-decoration:none;color:var(--text-secondary);
  padding:4px 10px;border:1px solid var(--rule);border-radius:99px;background:var(--bg-tile)}
.indexbar a:hover{color:var(--accent-deep);border-color:var(--accent)}

/* 產品 */
.cat{padding-block:var(--space-2xl) var(--space-xl)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:var(--space-md)}
.tile{background:var(--bg-tile);border:1px solid var(--tile-border);border-radius:4px;
  padding:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-sm);position:relative;
  transition:box-shadow 160ms var(--ease-out),border-color 160ms var(--ease-out)}
.tile:hover{box-shadow:var(--shadow-tile);border-color:var(--rule)}
.tile.wide{grid-column:span 2}
@media (max-width:640px){.tile.wide{grid-column:span 1}}
.tile-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-sm)}
.tile-icon{width:34px;height:34px;flex:none;color:var(--text-faint)}
.tile-photo{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:3px;background:var(--bg-inset)}
.tile h3{font-weight:600;font-stretch:106%;font-size:1.09375rem;letter-spacing:-.017em;line-height:1.22}
.tile .model{font-family:var(--font-display);font-stretch:var(--width-wide);
  font-size:11.5px;font-weight:700;letter-spacing:.075em;color:var(--accent-deep);margin-bottom:4px}
.tile .desc{font-size:13.5px;color:var(--text-muted);flex:1}
.specs{display:grid;grid-template-columns:auto 1fr;gap:3px var(--space-sm);font-size:12.5px;
  border-top:1px solid var(--rule-soft);padding-top:var(--space-sm);font-variant-numeric:tabular-nums}
.specs dt{color:var(--text-faint);font-weight:500}
.specs dd{margin:0;color:var(--text-secondary)}
.tile-link{font-size:13.5px;font-weight:600;color:var(--accent-deep);text-decoration:none;align-self:flex-start}

/* 資訊面板 */
.info{padding-bottom:var(--space-2xl)}
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-md)}
.panel{background:var(--bg-tile);border:1px solid var(--tile-border);border-radius:4px;padding:var(--space-lg);position:relative}
.panel h3{font-weight:600;font-stretch:106%;font-size:1.0625rem;letter-spacing:-.015em;margin-bottom:var(--space-xs)}
.panel .label{display:block;margin-bottom:var(--space-sm)}
.panel p{font-size:13.5px;color:var(--text-secondary)}
.panel p + p{margin-top:var(--space-sm)}

/* 詢價帶 */
.quote-strip{background:var(--bg-tile);border-block:1px solid var(--rule);position:relative}
.qs-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--space-lg);padding-block:clamp(28px,4vw,48px)}
.qs-in h2{font-weight:700;font-stretch:var(--width-wide);
  font-size:clamp(1.375rem,1rem + 1.5vw,2.125rem);letter-spacing:-.026em;line-height:1.1;max-width:22ch}
.qs-in h2 .lt{font-weight:300;font-stretch:var(--width-normal);color:var(--text-secondary)}
.qs-in p{font-size:14px;color:var(--text-muted);margin-top:var(--space-2xs)}

footer{padding-block:var(--space-2xl) var(--space-lg)}
.f-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-xl)}
.f-grid .label{display:block;margin-bottom:var(--space-xs)}
.f-grid p,.f-grid a{font-size:13.5px;line-height:1.75;color:var(--text-secondary);text-decoration:none;display:block}
.f-base{margin-top:var(--space-xl);padding-top:var(--space-md);border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:var(--space-md);justify-content:space-between;font-size:12px;color:var(--text-faint)}

@media (max-width:820px){
  .pitch-in,.pitch.side .pitch-in{grid-template-columns:1fr}
  .head-nav{margin-left:0;width:100%;gap:var(--space-md)}
}
@media (max-width:520px){
  .cta{display:block;width:100%;align-self:stretch;text-align:center;white-space:nowrap;
    font-size:14px;letter-spacing:-.01em;padding:14px 10px}
}

/* ══════════ 編輯器外殼(只在編輯模式出現) ══════════ */
.ebar{position:fixed;left:0;right:0;top:0;height:52px;z-index:9000;
  background:oklch(22% .02 265);color:#fff;display:flex;align-items:center;gap:10px;
  padding:0 14px;font-family:var(--font-ui);font-size:13.5px}
.ebar .sp{flex:1}
.ebar b{font-weight:600;letter-spacing:-.01em}
.ebar button{background:oklch(30% .025 265);color:#fff;border:1px solid oklch(38% .03 265);
  border-radius:5px;padding:6px 11px;font:inherit;cursor:pointer;white-space:nowrap;
  transition:background 120ms var(--ease-out)}
.ebar button:hover{background:oklch(38% .04 265)}
.ebar button.on{background:var(--edit);border-color:var(--edit)}
.ebar button.pub{background:var(--green-600);border-color:var(--green-600);font-weight:600}
.ebar button.pub:hover{background:var(--green-700)}
.ebar button:disabled{opacity:.4;cursor:not-allowed}
.ebar .dot{width:7px;height:7px;border-radius:99px;background:oklch(65% .16 75);display:inline-block;margin-right:5px}
.ebar .dot.saved{background:oklch(70% .15 152)}
.ebar .st{font-size:12.5px;color:oklch(78% .02 265)}
body.editing{padding-top:52px}
body.editing .indexbar{top:52px}

/* 手機預覽框 */
body.phone #page{max-width:390px;margin:0 auto;border-left:1px solid var(--rule);border-right:1px solid var(--rule);
  box-shadow:0 0 40px rgba(0,0,0,.10);min-height:calc(100vh - 52px);background:var(--bg-page)}

/* 可編輯元素 */
body.editing [data-e]{outline:1px dashed transparent;outline-offset:3px;border-radius:2px;
  transition:outline-color 120ms var(--ease-out),background 120ms var(--ease-out);cursor:text}
body.editing [data-e]:hover{outline-color:oklch(70% .12 262)}
body.editing [data-e]:focus{outline:2px solid var(--edit);background:oklch(98% .02 265)}
body.editing.phone [data-e]{outline-offset:1px}
[data-e].rl-bad{background:var(--bad-wash) !important;outline-color:var(--bad) !important;
  box-shadow:inset 0 -2px 0 var(--bad)}

/* 區塊控制 */
body.editing [data-sec]{position:relative}
body.editing [data-sec]::before{content:attr(data-name);position:absolute;left:0;top:0;z-index:60;
  background:var(--edit);color:#fff;font-family:var(--font-ui);font-size:10.5px;font-weight:600;
  padding:2px 8px;border-radius:0 0 4px 0;opacity:0;transition:opacity 120ms var(--ease-out);pointer-events:none}
body.editing [data-sec]:hover::before{opacity:1}
.sec-tools{position:absolute;right:8px;top:8px;z-index:61;display:none;gap:4px;
  background:var(--white);border:1px solid var(--rule);border-radius:6px;padding:4px;
  box-shadow:0 4px 14px rgba(0,0,0,.12)}
body.editing [data-sec]:hover > .sec-tools{display:flex}
.sec-tools button{background:none;border:1px solid var(--rule);border-radius:4px;
  font-family:var(--font-ui);font-size:11.5px;padding:3px 8px;cursor:pointer;color:var(--ink-800);white-space:nowrap}
.sec-tools button:hover{background:var(--edit-wash);border-color:var(--edit);color:var(--edit)}
body:not(.editing) .sec-tools{display:none !important}
[data-sec].hidden-sec{display:none}
body.editing [data-sec].hidden-sec{display:block;opacity:.38;filter:grayscale(1)}

/* 浮動文字工具列 */
.ttool{position:absolute;z-index:9100;display:none;gap:3px;background:oklch(22% .02 265);
  border-radius:7px;padding:4px;box-shadow:0 6px 22px rgba(0,0,0,.26);font-family:var(--font-ui)}
.ttool.on{display:flex}
.ttool button{background:none;border:0;color:#fff;font:inherit;font-size:12.5px;
  padding:5px 9px;border-radius:4px;cursor:pointer;white-space:nowrap}
.ttool button:hover{background:oklch(34% .03 265)}
.ttool button.on{background:var(--edit)}
.ttool .div{width:1px;background:oklch(38% .03 265);margin:3px 2px}

/* 面板(背景圖設定 / 版本 / 產品編輯) */
.pop{position:fixed;right:14px;top:62px;z-index:9200;width:min(360px,calc(100vw - 28px));
  background:var(--white);border:1px solid var(--rule);border-radius:10px;
  box-shadow:0 14px 44px rgba(0,0,0,.20);font-family:var(--font-ui);display:none;max-height:calc(100vh - 80px);overflow:auto}
.pop.on{display:block}
.pop h4{margin:0;padding:13px 16px;border-bottom:1px solid var(--rule-soft);font-size:14px;font-weight:600;
  display:flex;align-items:center;gap:8px}
.pop h4 .sp{flex:1}
.pop h4 button{background:none;border:0;font-size:18px;cursor:pointer;color:var(--ink-600);line-height:1;padding:0 2px}
.pop .body{padding:14px 16px}
.pop label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-800);margin:0 0 5px}
.pop .fr{margin-bottom:14px}
.pop input[type=text],.pop textarea,.pop select{width:100%;border:1px solid var(--rule);border-radius:5px;
  padding:7px 9px;font:inherit;font-size:13.5px}
.pop textarea{min-height:70px;resize:vertical}
.pop input:focus,.pop textarea:focus,.pop select:focus{outline:0;border-color:var(--edit);box-shadow:0 0 0 3px var(--edit-wash)}
.pop .seg{display:flex;gap:0;border:1px solid var(--rule);border-radius:5px;overflow:hidden}
.pop .seg button{flex:1;background:var(--white);border:0;border-left:1px solid var(--rule);
  font:inherit;font-size:12.5px;padding:7px 4px;cursor:pointer;color:var(--ink-800)}
.pop .seg button:first-child{border-left:0}
.pop .seg button.on{background:var(--edit);color:#fff;font-weight:600}
.pop input[type=range]{width:100%}
.pop .drop{border:2px dashed var(--rule);border-radius:6px;padding:18px;text-align:center;
  font-size:12.5px;color:var(--ink-600);cursor:pointer}
.pop .drop:hover{border-color:var(--edit);background:var(--edit-wash);color:var(--edit)}
.pop .btn{background:var(--edit);color:#fff;border:0;border-radius:5px;padding:8px 13px;
  font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.pop .btn.gh{background:none;color:var(--ink-800);border:1px solid var(--rule)}
.pop .btn.dg{background:none;color:var(--bad);border:1px solid var(--rule)}
.pop .row2{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
.pop .ver{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--rule-soft);font-size:12.5px}
.pop .ver .sp{flex:1;color:var(--ink-600)}
.pop .note{font-size:12px;color:var(--ink-600);line-height:1.55}
.pop .warnbox{background:var(--bad-wash);border:1px solid var(--bad);color:var(--bad);
  border-radius:5px;padding:9px 11px;font-size:12.5px;margin-bottom:12px}
.pop .warnbox b{display:block;margin-bottom:3px}

/* 產品卡片上的編輯鈕 */
.tile-tools{position:absolute;right:6px;top:6px;z-index:5;display:none;gap:4px}
body.editing .tile:hover .tile-tools{display:flex}
.tile-tools button{background:var(--white);border:1px solid var(--rule);border-radius:4px;
  font-family:var(--font-ui);font-size:11px;padding:3px 7px;cursor:pointer;color:var(--ink-800)}
.tile-tools button:hover{background:var(--edit-wash);border-color:var(--edit);color:var(--edit)}
.addtile{border:2px dashed var(--rule);background:none;border-radius:4px;min-height:150px;
  display:none;align-items:center;justify-content:center;font-family:var(--font-ui);
  font-size:14px;color:var(--ink-600);cursor:pointer}
body.editing .addtile{display:flex}
.addtile:hover{border-color:var(--edit);color:var(--edit);background:var(--edit-wash)}

/* 紅線總表 */
.rlpanel{position:fixed;left:14px;bottom:14px;z-index:9150;width:min(380px,calc(100vw - 28px));
  background:var(--bad-wash);border:1px solid var(--bad);border-radius:9px;padding:12px 14px;
  font-family:var(--font-ui);font-size:12.5px;color:var(--bad);display:none;
  box-shadow:0 10px 30px rgba(0,0,0,.16);max-height:40vh;overflow:auto}
.rlpanel.on{display:block}
.rlpanel b{display:block;margin-bottom:5px;font-size:13px}
.rlpanel ul{margin:0;padding-left:17px}
.rlpanel li{margin-top:3px}
.rlpanel code{background:rgba(0,0,0,.07);padding:1px 4px;border-radius:3px;font-family:ui-monospace,Menlo,monospace}

.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(10px);
  background:oklch(22% .02 265);color:#fff;padding:11px 18px;border-radius:7px;font-size:13.5px;
  font-family:var(--font-ui);opacity:0;pointer-events:none;z-index:9500;
  transition:opacity 170ms var(--ease-out),transform 170ms var(--ease-out)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.bad{background:var(--bad)}
.enter-btn{position:fixed;right:14px;bottom:14px;z-index:8000;background:oklch(22% .02 265);color:#fff;
  border:0;border-radius:99px;padding:11px 18px;font-family:var(--font-ui);font-size:13.5px;font-weight:600;
  cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.22)}
body.editing .enter-btn{display:none}
@media print{.ebar,.enter-btn,.pop,.ttool,.rlpanel,.sec-tools,.tile-tools,.addtile{display:none !important}}

/* ══════════ 雲端版新增:多人協作 ══════════ */
.ebar .who{font-size:12.5px;color:oklch(78% .02 265)}
.ebar .lnk{color:oklch(80% .02 265);text-decoration:none;font-size:12.5px;padding:6px 8px;white-space:nowrap}
.ebar .lnk:hover{color:#fff;text-decoration:underline}
.lockmsg{font-family:var(--font-ui);font-size:11px;font-weight:600;color:var(--bad);
  align-self:center;padding:0 4px;white-space:nowrap}
body.editing [data-sec].locked{position:relative}
body.editing [data-sec].locked::after{content:"";position:absolute;inset:0;z-index:55;
  background:repeating-linear-gradient(135deg,transparent,transparent 9px,
    oklch(52% .19 27 / .045) 9px,oklch(52% .19 27 / .045) 18px);pointer-events:none}
body.editing [data-sec].locked [data-e]{cursor:not-allowed;outline-color:transparent !important}
body.editing [data-sec].locked .sec-tools{display:flex}
a.enter-btn{text-decoration:none;display:inline-block}