/* scoped by scripts/v4/sync-assets.mjs: compute-detail */
/* compute-detail: /compute/<site>/ 機房詳細規格頁 (pages_compute.site_page) */
:where(body[data-v4~="compute-detail"]) .num{font-family:var(--latin);font-variant-numeric:tabular-nums}
:where(body[data-v4~="compute-detail"]) .cd-ln{display:block}
:where(body[data-v4~="compute-detail"]) .cd-ln.muted{color:var(--muted)}
:where(body[data-v4~="compute-detail"]) .cd-a{color:var(--ink);border-bottom:1px solid var(--line-2);transition:color .2s,border-color .2s}
:where(body[data-v4~="compute-detail"]) .cd-a:hover{color:var(--orange);border-color:var(--orange)}

/* ---- hero ---- */
:where(body[data-v4~="compute-detail"]) .cd-hero{position:relative;overflow:hidden;padding-block:72px 0}
:where(body[data-v4~="compute-detail"]) .cd-hero .hero-lines{position:absolute;right:-60px;top:-30px;width:420px;height:auto;opacity:.05;pointer-events:none}
:where(body[data-v4~="compute-detail"]) .cd-hero .wrap{position:relative;z-index:1}
:where(body[data-v4~="compute-detail"]) .cd-hero .row{align-items:end}
:where(body[data-v4~="compute-detail"]) .cd-tag{display:flex;flex-wrap:wrap;align-items:center;gap:9px 15px;font-size:15px;color:var(--body)}
:where(body[data-v4~="compute-detail"]) .cd-tag .chip{font:500 12px/1 var(--latin)}
:where(body[data-v4~="compute-detail"]) .cd-st{display:inline-flex;align-items:center;gap:9px;font-size:15px;color:var(--ink)}
:where(body[data-v4~="compute-detail"]) .cd-st i{width:9px;height:9px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 3px rgba(254,80,0,.15)}
:where(body[data-v4~="compute-detail"]) .cd-facts{margin:0;border-top:1.5px solid var(--ink)}
:where(body[data-v4~="compute-detail"]) .cd-facts>div{display:grid;grid-template-columns:111px minmax(0,1fr);gap:18px;padding:15px 0;border-bottom:1px solid var(--line)}
:where(body[data-v4~="compute-detail"]) .cd-facts dt{font-size:12px;line-height:1.75;color:var(--muted)}
:where(body[data-v4~="compute-detail"]) .cd-facts dd{margin:0;font-size:15px;line-height:1.6;color:var(--ink)}
:where(body[data-v4~="compute-detail"]) .cd-figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:57px;border-top:1px solid var(--line)}
:where(body[data-v4~="compute-detail"]) .cd-figs>div{display:grid;gap:9px;align-content:start;padding:30px 24px 36px;border-left:1px solid var(--line)}
:where(body[data-v4~="compute-detail"]) .cd-figs>div:first-child{border-left:0;padding-left:0}
:where(body[data-v4~="compute-detail"]) .cd-figs .v{font:500 clamp(33px,3.4vw,48px)/1 var(--latin);color:var(--ink)}
:where(body[data-v4~="compute-detail"]) .cd-figs .v small{font-size:.5em;margin-left:3px;color:var(--body)}
:where(body[data-v4~="compute-detail"]) .cd-figs .v.sm{font-size:clamp(21px,1.9vw,27px);line-height:1.2}
:where(body[data-v4~="compute-detail"]) .cd-figs .l{font-size:12px;color:var(--muted)}
:where(body[data-v4~="compute-detail"]) .cd-figs .s{font-size:12px;color:var(--body);font-family:var(--latin);font-variant-numeric:tabular-nums}

/* ---- spec sheet + pricing ---- */
:where(body[data-v4~="compute-detail"]) .cd-spec{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:48px;align-items:start}
:where(body[data-v4~="compute-detail"]) .cd-sheet{display:grid;gap:0;border-top:1.5px solid var(--ink)}
:where(body[data-v4~="compute-detail"]) .cd-grp{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:24px;padding:24px 0;border-bottom:1px solid var(--line-2)}
:where(body[data-v4~="compute-detail"]) .cd-gh{display:grid;gap:6px;align-content:start;font-size:15px;line-height:1.4;color:var(--ink)}
:where(body[data-v4~="compute-detail"]) .cd-gh span{font:500 12px/1 var(--latin);color:var(--orange-d)}
:where(body[data-v4~="compute-detail"]) .cd-grp dl{margin:0;display:grid}
:where(body[data-v4~="compute-detail"]) .cd-grp dl>div{display:grid;grid-template-columns:132px minmax(0,1fr);gap:18px;padding:12px 0;border-top:1px solid var(--line)}
:where(body[data-v4~="compute-detail"]) .cd-grp dl>div:first-child{border-top:0;padding-top:0}
:where(body[data-v4~="compute-detail"]) .cd-grp dl>div:last-child{padding-bottom:0}
:where(body[data-v4~="compute-detail"]) .cd-grp dt{font-size:12px;line-height:1.9;color:var(--muted)}
:where(body[data-v4~="compute-detail"]) .cd-grp dd{margin:0;font-size:15px;line-height:1.7;color:var(--ink);font-variant-numeric:tabular-nums;min-width:0;overflow-wrap:anywhere}
:where(body[data-v4~="compute-detail"]) .cd-tags{display:flex;flex-wrap:wrap;gap:6px}
:where(body[data-v4~="compute-detail"]) .cd-note{margin-top:18px}

:where(body[data-v4~="compute-detail"]) .cd-price{position:sticky;top:111px}
:where(body[data-v4~="compute-detail"]) .cd-price-in{display:grid;gap:18px;padding:30px 27px;border-radius:var(--r);background:var(--warm)}
:where(body[data-v4~="compute-detail"]) .cd-amt{display:grid;gap:6px}
:where(body[data-v4~="compute-detail"]) .cd-rent{font-size:12px;color:var(--muted)}
:where(body[data-v4~="compute-detail"]) .cd-amt b{font:500 clamp(42px,4vw,57px)/1 var(--latin);color:var(--ink)}
:where(body[data-v4~="compute-detail"]) .cd-unit{font-size:12px;color:var(--body)}
:where(body[data-v4~="compute-detail"]) .cd-pr{display:grid;gap:6px;padding-top:15px;border-top:1px solid var(--line-2)}
:where(body[data-v4~="compute-detail"]) .cd-pr .l{font-size:12px;color:var(--muted)}
:where(body[data-v4~="compute-detail"]) .cd-pr .v{font-size:15px;line-height:1.6;color:var(--ink)}
:where(body[data-v4~="compute-detail"]) .cd-terms{display:flex;flex-wrap:wrap;gap:6px}
:where(body[data-v4~="compute-detail"]) .cd-term{display:inline-flex;align-items:baseline;gap:3px;height:33px;align-items:center;padding:0 15px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:12px;color:var(--body)}
:where(body[data-v4~="compute-detail"]) .cd-term b{font-size:15px;font-weight:500;color:var(--ink)}
:where(body[data-v4~="compute-detail"]) .cd-act{display:grid;gap:9px;padding-top:6px}
:where(body[data-v4~="compute-detail"]) .cd-act .btn{justify-content:center;width:100%}
:where(body[data-v4~="compute-detail"]) .cd-copy{background:#fff}

/* ---- delivery + location ---- */
:where(body[data-v4~="compute-detail"]) .cd-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:21px}
:where(body[data-v4~="compute-detail"]) .cd-panel{display:flex;flex-direction:column;gap:18px;background:#fff;border-radius:var(--r);padding:33px 30px}
:where(body[data-v4~="compute-detail"]) .cd-panel>.fine:last-child{margin-top:auto}
:where(body[data-v4~="compute-detail"]) .cd-tl{list-style:none;margin:6px 0 0;padding:0;display:grid;position:relative}
:where(body[data-v4~="compute-detail"]) .cd-tl::before{content:"";position:absolute;left:6px;top:24px;bottom:24px;width:1.5px;background:var(--line-2)}
:where(body[data-v4~="compute-detail"]) .cd-tl li{position:relative;display:grid;grid-template-columns:36px 72px minmax(0,1fr);gap:0 12px;align-items:baseline;padding:18px 0 18px 33px;border-bottom:1px solid var(--line);font-size:15px;line-height:1.6;color:var(--body)}
:where(body[data-v4~="compute-detail"]) .cd-tl li:last-child{border-bottom:0}
:where(body[data-v4~="compute-detail"]) .cd-tl .dot{position:absolute;left:0;top:24px;width:12px;height:12px;border-radius:50%;background:#fff;border:1.5px solid var(--line-2)}
:where(body[data-v4~="compute-detail"]) .cd-tl li.on .dot{background:var(--orange);border-color:var(--orange);box-shadow:0 0 0 3px rgba(254,80,0,.15)}
:where(body[data-v4~="compute-detail"]) .cd-tl .st{font-size:12px;color:var(--muted)}
:where(body[data-v4~="compute-detail"]) .cd-tl b{font-size:18px;font-weight:500;line-height:1.3;color:var(--ink)}
:where(body[data-v4~="compute-detail"]) .cd-tl .nt{color:var(--ink)}
:where(body[data-v4~="compute-detail"]) .cd-tl li.on .st{color:var(--orange-d)}

:where(body[data-v4~="compute-detail"]) .cd-loc{display:grid;gap:15px}
:where(body[data-v4~="compute-detail"]) .cd-map{width:100%;height:auto;aspect-ratio:16/9;border-radius:12px;background:var(--warm)}
:where(body[data-v4~="compute-detail"]) .cd-map .land{fill:none;stroke:#CFCAC2;stroke-width:3.6;stroke-linecap:round}
:where(body[data-v4~="compute-detail"]) .cd-map .o{fill:var(--muted);opacity:.55}
:where(body[data-v4~="compute-detail"]) .cd-map .pin{fill:var(--orange);stroke:#fff;stroke-width:2}
:where(body[data-v4~="compute-detail"]) .cd-map .halo{fill:var(--orange);opacity:.16;transform-box:fill-box;transform-origin:center;animation:cdPulse 2.8s var(--ease) infinite}
:where(body[data-v4~="compute-detail"]) .cd-map text{font:500 15px/1 var(--font);fill:var(--ink);paint-order:stroke;stroke:var(--warm);stroke-width:6px;stroke-linejoin:round}
@keyframes cdPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
@media (prefers-reduced-motion:reduce){:where(body[data-v4~="compute-detail"]) .cd-map .halo{animation:none}}
:where(body[data-v4~="compute-detail"]) .cd-mini{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px 18px}
:where(body[data-v4~="compute-detail"]) .cd-mini>div{display:grid;gap:3px}
:where(body[data-v4~="compute-detail"]) .cd-mini dt{font-size:12px;color:var(--muted)}
:where(body[data-v4~="compute-detail"]) .cd-mini dd{margin:0;font-size:15px;line-height:1.6;color:var(--ink)}

/* ---- comparison table ---- */
:where(body[data-v4~="compute-detail"]) .cd-cmp{min-width:900px!important;font-variant-numeric:tabular-nums}
:where(body[data-v4~="compute-detail"]) .cd-cmp th,:where(body[data-v4~="compute-detail"]) .cd-cmp td{font-size:15px}
:where(body[data-v4~="compute-detail"]) .cd-cmp thead th{white-space:nowrap}
:where(body[data-v4~="compute-detail"]) .cd-cmp tbody th{width:24%!important}
:where(body[data-v4~="compute-detail"]) .cd-cmp tbody th{background:#fff!important}
:where(body[data-v4~="compute-detail"]) .cd-cmp tbody th>b,:where(body[data-v4~="compute-detail"]) .cd-cmp tbody th>span{display:block}
:where(body[data-v4~="compute-detail"]) .cd-cmp tbody th>span{font-size:12px;font-weight:400;color:var(--muted);margin-top:3px}
:where(body[data-v4~="compute-detail"]) .cd-cmp tbody th .cd-a{font-weight:500}
:where(body[data-v4~="compute-detail"]) .cd-cmp tbody th>.chip{display:inline-flex;width:auto;margin-top:6px;color:var(--orange-d);background:#fff}
:where(body[data-v4~="compute-detail"]) .cd-cmp td,:where(body[data-v4~="compute-detail"]) .cd-cmp tbody th>*{white-space:nowrap}
:where(body[data-v4~="compute-detail"]) .cd-cmp tbody th{min-width:201px}
:where(body[data-v4~="compute-detail"]) .cd-cmp .r{text-align:right;white-space:nowrap}
:where(body[data-v4~="compute-detail"]) .cd-cmp td b{font:500 18px/1 var(--latin);color:var(--ink)}
:where(body[data-v4~="compute-detail"]) .cd-cmp tr.me>*{background:var(--tint)!important}
:where(body[data-v4~="compute-detail"]) .cd-cap{margin:-30px 0 18px}

/* ---- related ---- */
:where(body[data-v4~="compute-detail"]) .cd-alt h3{font-size:18px}
:where(body[data-v4~="compute-detail"]) .cd-alt p{font-size:15px;color:var(--body)}
:where(body[data-v4~="compute-detail"]) .cd-alt-price{display:block;margin-top:12px;font-size:12px;color:var(--muted)}
:where(body[data-v4~="compute-detail"]) .cd-alt-price b{font:500 21px/1 var(--latin);color:var(--ink);margin-right:3px}

/* ---- responsive ---- */
@media (max-width:1101px){
  :where(body[data-v4~="compute-detail"]) .cd-spec{grid-template-columns:minmax(0,1fr) 330px;gap:30px}
  :where(body[data-v4~="compute-detail"]) .cd-grp{grid-template-columns:1fr;gap:15px}
}
@media (max-width:981px){
  :where(body[data-v4~="compute-detail"]) .cd-spec{grid-template-columns:1fr}
  :where(body[data-v4~="compute-detail"]) .cd-price{position:static}
  :where(body[data-v4~="compute-detail"]) .cd-duo{grid-template-columns:1fr}
  :where(body[data-v4~="compute-detail"]) .cd-figs{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:39px}
  :where(body[data-v4~="compute-detail"]) .cd-figs>div:nth-child(3){border-left:0;padding-left:0}
  :where(body[data-v4~="compute-detail"]) .cd-figs>div:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:759px){
  :where(body[data-v4~="compute-detail"]) .cd-hero{padding-top:48px}
  :where(body[data-v4~="compute-detail"]) .cd-figs>div{padding:21px 12px 24px}
  :where(body[data-v4~="compute-detail"]) .cd-grp dl>div{grid-template-columns:1fr;gap:3px}
  :where(body[data-v4~="compute-detail"]) .cd-facts>div{grid-template-columns:90px minmax(0,1fr);gap:12px}
  :where(body[data-v4~="compute-detail"]) .cd-panel{padding:27px 21px}
  :where(body[data-v4~="compute-detail"]) .cd-tl li{grid-template-columns:30px minmax(0,1fr);padding:15px 0 15px 30px}
  :where(body[data-v4~="compute-detail"]) .cd-tl .nt{grid-column:2;margin-top:3px}
  :where(body[data-v4~="compute-detail"]) .cd-price-in{padding:27px 21px}
  :where(body[data-v4~="compute-detail"]) .cd-cap{margin-top:-18px}
}

:where(body[data-v4~="compute-detail"]) *,:where(body[data-v4~="compute-detail"]) *::before,:where(body[data-v4~="compute-detail"]) *::after{letter-spacing:0!important}
