/* 版型：左文右圖的地板剖面主視覺，下方以「層」為節奏往下鋪陳 — 呼應超耐磨地板的四層結構 */
:root{
  --bg:#F0EFEB; --surface:#FFFFFF; --ink:#1A1A1A; --muted:#55524C; --line:#DDDAD3;
  --core:#F2B630; --core-ink:#8A5A00; --on-core:#1A1A1A; --core-soft:#FFF3D2; --hdf:#3F7A55; --oak:#C49A62; --oak-dark:#7C5A35; --wear:#DCE3E7;
  --display:"Noto Serif TC","Songti TC","PMingLiU",serif;
  --body:"PingFang TC","Microsoft JhengHei","Noto Sans TC","Noto Sans CJK TC",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  color-scheme:light;
}


*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.75}
a{color:var(--core-ink)}
:focus-visible{outline:2px solid var(--core-ink);outline-offset:3px;border-radius:4px}
.wrap{max-width:1120px;margin:0 auto;padding-inline:20px}
h1,h2,h3{font-family:var(--display);text-wrap:balance;line-height:1.3;margin:0}
h2{font-size:clamp(1.6rem,3.4vw,2.2rem);font-weight:900}
h3{font-size:1.2rem;font-weight:600}
p{margin:0}
.eyebrow{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--core-ink)}
.lede{color:var(--muted);max-width:62ch}
.spec{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* header */
header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:20px;padding-block:12px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:var(--display);font-weight:900;font-size:1.2rem;white-space:nowrap}
.logo-mark{display:none;width:30px;height:22px;display:grid;grid-template-rows:2px 6px 10px 4px;border-radius:2px;overflow:hidden}
.logo-mark i:nth-child(1){background:var(--wear);border:1px solid var(--line)}
.logo-mark i:nth-child(2){background:var(--oak)}
.logo-mark i:nth-child(3){background:var(--hdf)}
.logo-mark i:nth-child(4){background:var(--oak-dark)}
nav.main{flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
nav.main ul{display:flex;gap:4px;list-style:none;margin:0;padding:0;justify-content:flex-end}
nav.main a{display:block;padding:6px 10px;border-radius:6px;color:var(--ink);text-decoration:none;font-size:.95rem;white-space:nowrap}
nav.main a:hover{background:var(--core-soft)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:999px;background:var(--core);color:var(--on-core);text-decoration:none;font-weight:700;border:0;font:inherit;font-weight:700;cursor:pointer}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
@media (max-width:760px){.bar{flex-wrap:wrap;gap:8px}nav.main{flex-basis:100%}nav.main ul{justify-content:flex-start}}

/* hero */
.hero{padding-block:56px 64px}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}
.hero-grid>*{min-width:0}
.hero h1{font-size:clamp(2rem,5.2vw,3.4rem);font-weight:900;margin-block:14px 18px}
.hero h1 em{font-style:normal;color:var(--core-ink)}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.warranty{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.warranty div{border-left:3px solid var(--core);padding:2px 0 2px 14px}
.warranty b{display:block;font-family:var(--display);font-size:2rem;line-height:1.1}
.warranty span{color:var(--muted);font-size:.9rem}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr}}

/* plank cross-section */
.section-cut{position:relative;padding:18px 0}
.plank{position:relative;border-radius:6px;overflow:hidden;box-shadow:0 30px 50px -30px rgb(0 0 0/.45);transform:perspective(900px) rotateX(18deg) rotateZ(-4deg)}
.layer{display:flex;align-items:center;padding-inline:16px;font-size:.82rem}
.l1{height:16px;background:linear-gradient(90deg,var(--wear),color-mix(in srgb,var(--wear) 60%,white));}
.l2{height:96px;background:var(--oak)}
.l3{height:70px;background:var(--hdf)}
.l4{height:14px;background:var(--oak-dark)}
.legend{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 20px}
.legend li{display:grid;grid-template-columns:14px 1fr;gap:10px;align-items:start;font-size:.92rem}
.legend li i{width:14px;height:14px;border-radius:3px;margin-top:6px}
.legend strong{display:block}
.legend span{color:var(--muted);font-size:.85rem;line-height:1.5}

/* sections */
section.block{padding-block:72px;border-top:1px solid var(--line)}
.head{display:grid;gap:12px;margin-bottom:36px}

/* services */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.svc article{background:var(--surface);padding:26px;border-radius:10px;display:grid;gap:10px;align-content:start}
.svc .tag{font-family:var(--mono);font-size:.75rem;color:var(--oak-dark)}
.svc p{color:var(--muted);font-size:.95rem}
@media (max-width:820px){.svc{grid-template-columns:1fr}}

/* brands */
.brands{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.brand{background:var(--surface);border-radius:10px;padding:28px;display:grid;gap:14px;align-content:start;border-top:6px solid var(--swatch)}
.brand header{display:flex;justify-content:space-between;gap:12px;align-items:baseline;flex-wrap:wrap}
.origin{font-size:.85rem;color:var(--muted);white-space:nowrap}
.brand .badges{display:flex;gap:6px;flex-wrap:wrap}
.badge{font-family:var(--mono);font-size:.75rem;padding:3px 9px;border-radius:999px;background:var(--core-soft);color:var(--ink)}
.brand ul{margin:0;padding-left:1.1em;color:var(--muted);font-size:.95rem}
.brand ul li{margin-block:2px}
.series{font-size:.88rem;color:var(--ink)}
@media (max-width:820px){.brands{grid-template-columns:1fr}}

/* compare table */
.table-wrap{overflow-x:auto;border-radius:10px;border:1px solid var(--line);background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:720px;font-size:.93rem}
th,td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
thead th{font-family:var(--display);font-weight:600;font-size:1rem;background:var(--core-soft)}
tbody th{font-weight:500;color:var(--muted);white-space:nowrap}
tbody tr:last-child>*{border-bottom:0}
td .spec{font-size:.9rem}

/* cases */
.cases{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.case{border-radius:10px;overflow:hidden;background:var(--surface);display:grid}
.case .ph{aspect-ratio:4/3;max-width:100%;background:var(--c1);position:relative}
.case .ph small{position:absolute;left:10px;top:10px;font-family:var(--mono);font-size:.7rem;background:var(--surface);color:var(--muted);padding:2px 8px;border-radius:4px}
.case div.txt{padding:16px;display:grid;gap:4px}
.case p{font-size:.88rem;color:var(--muted)}
@media (max-width:900px){.cases{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.cases{grid-template-columns:1fr}}

/* process */
.steps{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(5,1fr);gap:16px;counter-reset:s}
.steps li{counter-increment:s;border-top:2px solid var(--ink);padding-top:12px;font-size:.92rem}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--mono);color:var(--core-ink);display:block;font-size:.8rem}
.steps strong{display:block;font-size:1rem}
.steps span{color:var(--muted)}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr}}

/* price */
.price-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:28px}
.price-grid>*{min-width:0}
.factors{display:grid;gap:12px}
.factor{display:grid;grid-template-columns:34px 1fr;gap:12px;background:var(--surface);padding:16px;border-radius:10px}
.factor b{font-family:var(--mono);color:var(--core-ink)}
.factor p{color:var(--muted);font-size:.92rem}
.calc{background:var(--grey);color:var(--grey-ink);border-radius:12px;padding:26px;display:grid;gap:16px;align-content:start}
.calc h3{color:var(--grey-ink)}
.calc label{font-size:.88rem;display:grid;gap:6px}
.calc input,.calc select{font:inherit;padding:10px 12px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);width:100%}
.out{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.out div{background:var(--surface);border-radius:8px;padding:12px}
.out b{display:block;font-family:var(--mono);font-size:1.4rem;font-variant-numeric:tabular-nums}
.out span{font-size:.8rem;opacity:.75}
.calc small{opacity:.7;font-size:.8rem;line-height:1.6}
@media (max-width:860px){.price-grid{grid-template-columns:1fr}}

/* faq */
.faq{display:grid;gap:10px;max-width:820px}
details{background:var(--surface);border-radius:10px;padding:4px 20px}
summary{cursor:pointer;padding-block:14px;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--mono);color:var(--core-ink)}
details[open] summary::after{content:"−"}
details p{padding-bottom:16px;color:var(--muted)}

/* about */
.about{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.about>*{min-width:0}
.promise{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.promise li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline;padding-bottom:14px;border-bottom:1px solid var(--line)}
.promise b{font-family:var(--display);font-size:1.5rem;color:var(--core-ink);min-width:4.5em}
@media (max-width:820px){.about{grid-template-columns:1fr}}

/* contact */
.contact{display:grid;grid-template-columns:1fr 1.2fr;gap:32px}
.contact>*{min-width:0}
.channels{display:grid;gap:12px;align-content:start}
.channel{background:var(--surface);border-radius:10px;padding:18px;display:grid;gap:4px}
.channel span{font-size:.85rem;color:var(--muted)}
.channel b{font-family:var(--mono);font-size:1.1rem;user-select:all;word-break:break-all}
form.quote{background:var(--surface);border-radius:12px;padding:26px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
form.quote label{display:grid;gap:6px;font-size:.9rem}
form.quote .full{grid-column:1/-1}
form.quote input,form.quote select,form.quote textarea{font:inherit;padding:10px 12px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--ink);width:100%}
#msgBox{grid-column:1/-1;background:var(--core-soft);border-radius:8px;padding:14px;white-space:pre-wrap;font-size:.9rem}
@media (max-width:820px){.contact{grid-template-columns:1fr}}
@media (max-width:480px){form.quote{grid-template-columns:1fr}}

footer{border-top:1px solid var(--line);padding-block:32px;color:var(--muted);font-size:.88rem}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}

.page-hero{padding-block:48px 40px}
.page-hero h1{font-size:clamp(1.8rem,4.4vw,2.8rem);font-weight:900;margin-block:10px 14px}
.crumbs{font-size:.85rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.crumbs li+li::before{content:"/";margin-right:6px;opacity:.5}
.crumbs a{color:var(--muted)}
.article-wrap{display:grid;grid-template-columns:minmax(0,720px) 260px;gap:48px;align-items:start}
.article{font-size:1.04rem}
.article>*+*{margin-top:1.1em}
.article h2{font-size:1.5rem;margin-top:2em;padding-top:.4em;border-top:1px solid var(--line)}
.article h3{margin-top:1.6em}
.article ul,.article ol{padding-left:1.3em}
.article li{margin-block:.3em}
.article .table-wrap table{min-width:520px}
.meta{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:.88rem}
.meta .cat{font-family:var(--mono);color:var(--core-ink)}
.toc{position:sticky;top:calc(env(safe-area-inset-top,0px) + 90px);background:var(--surface);border-radius:10px;padding:18px 20px;font-size:.9rem}
.toc ol{margin:8px 0 0;padding-left:1.2em}
.toc a{color:var(--ink);text-decoration:none}
.toc a:hover{color:var(--core-ink)}
@media (max-width:900px){.article-wrap{grid-template-columns:1fr}.toc{position:static;order:-1}}
.cta-box{background:var(--wood);color:var(--wood-ink);border-radius:12px;padding:28px;display:grid;gap:12px;margin-top:48px}
.cta-box h2{border:0;margin:0;padding:0;color:var(--wood-ink);font-size:1.4rem}
.cta-box p{opacity:.8}
.cta-box .btn{justify-self:start}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.post{background:var(--surface);border-radius:10px;padding:22px;display:grid;gap:10px;align-content:start;text-decoration:none;color:var(--ink);transition:transform .15s}
.post:hover{transform:translateY(-3px)}
.post h3{font-size:1.1rem;line-height:1.45}
.post p{color:var(--muted);font-size:.9rem;line-height:1.6}
.post .meta{font-size:.8rem}
@media (max-width:900px){.posts{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.posts{grid-template-columns:1fr}}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.chip{font:inherit;font-size:.88rem;padding:6px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--core);color:var(--on-core);border-color:var(--core-ink)}
.points{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.points article{background:var(--surface);border-radius:10px;padding:22px;display:grid;gap:8px;align-content:start}
.points p{color:var(--muted);font-size:.95rem}
@media (max-width:760px){.points{grid-template-columns:1fr}}
.series-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.series-list div{border-top:2px solid var(--swatch,var(--core));padding-top:10px}
.series-list span{display:block;color:var(--muted);font-size:.9rem}
.brand a.more{font-weight:700;text-decoration:none}

/* ---- flooringlocal 風格區塊 ---- */
:root{--wood:#E6E4DE;--wood-2:#FFFFFF;--wood-deep:#F2B630;--wood-line:#D6D3CB;--wood-ink:#1A1A1A;--wood-muted:#55524C;--grey:#E6E4DE;--grey-ink:#1A1A1A}
.btn-sm{padding:8px 16px;font-size:.9rem;white-space:nowrap}
@media (max-width:760px){.bar .btn-sm{order:2;margin-left:auto}nav.main{order:3}}
.hero-dark{background:var(--wood);color:var(--wood-ink);padding-block:64px 72px}
.hero-dark .eyebrow{color:var(--wood-muted)}
.hero-dark h1{font-size:clamp(2.1rem,5.4vw,3.6rem);font-weight:900;margin-block:14px 18px;line-height:1.25}
.hero-dark h1 em{font-style:normal;color:var(--wood-ink);background:linear-gradient(transparent 62%,var(--core) 62%)}
.hero-dark .lede{color:var(--wood-muted)}
.hero-dark .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero-dark .btn{background:var(--core);color:var(--on-core)}
.hero-dark .btn.ghost{background:transparent;color:var(--wood-ink);border:1.5px solid var(--wood-ink)}
.quick{background:var(--wood-2);border:1px solid var(--wood-line);box-shadow:0 18px 40px -24px rgb(80 50 20/.35);border-radius:14px;padding:26px;display:grid;gap:14px}
.quick h2{font-size:1.3rem;color:var(--wood-ink)}
.quick label{display:grid;gap:6px;font-size:.88rem;color:var(--wood-muted)}
.quick select,.quick input{font:inherit;padding:11px 12px;border-radius:8px;border:1px solid var(--wood-line);background:var(--surface);color:var(--ink);width:100%}
.quick .btn{justify-content:center}
.quick small{color:var(--wood-muted);font-size:.8rem;text-align:center}
.trust{background:var(--wood-deep);color:var(--wood-ink);border-top:1px solid var(--wood-line);overflow:hidden;padding-block:14px}
.trust-track{display:flex;gap:40px;width:max-content;animation:slide 40s linear infinite}
.trust span{white-space:nowrap;font-size:.92rem}
.trust span::before{content:"●";color:var(--wood-ink);opacity:.55;font-size:.6em;margin-right:10px;vertical-align:middle}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.trust-track{animation:none;flex-wrap:wrap;width:auto;padding-inline:20px;gap:10px 28px}}
.value{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
.value>*{min-width:0}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0}
.stats div{border-top:2px solid var(--ink);padding-top:10px}
.stats dt{font-size:.85rem;color:var(--muted)}
.stats dd{margin:0;font-family:var(--display);font-weight:900;font-size:clamp(2.2rem,5vw,3.2rem);line-height:1.1;font-variant-numeric:tabular-nums}
.stats small{font-size:.4em;margin-left:4px;font-family:var(--body);font-weight:500}
@media (max-width:820px){.value{grid-template-columns:1fr}}
.mats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.mats li{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.mats a{display:grid;gap:6px;padding:22px 20px 26px;text-decoration:none;color:var(--ink);height:100%;position:relative;transition:background .15s}
.mats a:hover{background:var(--surface)}
.mats .n{font-family:var(--mono);font-size:.78rem;color:var(--core-ink)}
.mats strong{font-family:var(--display);font-size:1.15rem}
.mats .d{color:var(--muted);font-size:.88rem}
.mats .go{position:absolute;right:18px;top:20px;color:var(--muted);transition:transform .15s}
.mats a:hover .go{transform:translateX(4px);color:var(--core-ink)}
@media (max-width:900px){.mats{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.mats{grid-template-columns:1fr}}
.three{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.three li{display:grid;gap:8px;align-content:start}
.three .n{font-family:var(--display);font-weight:900;font-size:2.6rem;color:var(--core-ink);line-height:1}
.three p{color:var(--muted)}
@media (max-width:760px){.three{grid-template-columns:1fr}}
.pull{background:var(--grey);color:var(--grey-ink);padding-block:72px}
.pull blockquote{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(1.5rem,3.6vw,2.4rem);line-height:1.5;max-width:28em;text-wrap:balance}
.pull a{display:inline-block;margin-top:24px;color:var(--core-ink);font-weight:700}
.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.why article{background:var(--surface);border-radius:10px;padding:22px;display:grid;gap:8px;align-content:start}
.why p{color:var(--muted);font-size:.93rem}
.coverage{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:24px}
.coverage h3 a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--core)}
.coverage p{color:var(--muted);font-size:.9rem;margin-top:10px}
.district-list{display:flex;flex-wrap:wrap;gap:8px}
.district-list span{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:.88rem}
.perks{list-style:none;padding:0;margin:8px 0;display:grid;gap:8px}
.perks li::before{content:"✓";color:var(--core-ink);font-weight:700;margin-right:10px}

.hero-dark .eyebrow{color:var(--core-ink)}
.trust{color:#1A1A1A}
.trust span::before{color:#1A1A1A;opacity:.6}
.cta-box{background:var(--core)!important;color:#1A1A1A}
.cta-box h2{color:#1A1A1A!important}
.cta-box .btn{background:#1A1A1A;color:#FFFFFF}
.quick{box-shadow:0 18px 40px -28px rgb(0 0 0/.35)}
.stats-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:560px){.stats-4{grid-template-columns:1fr 1fr;row-gap:20px}}
.hero-dark h1 em{background:linear-gradient(transparent 60%,var(--core) 60%)}

[hidden]{display:none!important}
.diagram{margin:28px 0;background:var(--surface);border-radius:12px;padding:20px}
.diagram-scroll{overflow-x:auto}
.svg-d{width:100%;min-width:560px;height:auto;display:block;font-family:var(--body)}
.svg-d .t-h{font-family:var(--display);font-weight:600;font-size:18px;fill:var(--ink)}
.svg-d .t-b{font-size:14px;font-weight:700;fill:var(--ink)}
.svg-d .t-big{font-family:var(--mono);font-size:20px}
.svg-d .t-n{font-family:var(--mono);font-size:12px;fill:var(--muted)}
.svg-d .t-s{font-size:12.5px;fill:var(--muted)}
.diagram figcaption{color:var(--muted);font-size:.9rem;margin-top:12px;line-height:1.6}
.proscons{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.proscons>div{background:var(--surface);border-radius:10px;padding:22px;border-top:4px solid #3F8A5A}
.proscons>div.con{border-top-color:#C0574A}
.proscons h3{margin-bottom:10px}
.proscons ul{margin:0;padding-left:1.2em;color:var(--muted)}
.proscons li{margin-block:6px}
.verdict{margin-top:16px;padding:14px 18px;border-left:3px solid var(--ink);background:var(--surface);border-radius:0 8px 8px 0}
@media (max-width:760px){.proscons{grid-template-columns:1fr}}
.certs{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.cert{background:var(--surface);border-radius:10px;padding:20px;display:grid;gap:8px;align-content:start}
.cert .code{font-family:var(--mono);font-size:1.05rem;color:var(--core-ink);font-weight:500}
.cert .grp{font-size:.75rem;color:var(--muted);letter-spacing:.1em}
.cert p{color:var(--muted);font-size:.92rem;line-height:1.65}
.cert .who{font-size:.82rem;color:var(--ink)}
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.gallery figure{margin:0;background:var(--surface);border-radius:10px;overflow:hidden}
.gallery figure.wide{grid-column:1/-1}
.gallery button{all:unset;cursor:zoom-in;display:block;width:100%}
.gallery button:focus-visible{outline:2px solid var(--core);outline-offset:-2px}
.gallery img{width:100%;height:auto;display:block}
.gallery figcaption{padding:12px 16px;font-size:.88rem;color:var(--muted)}
.gallery figcaption b{color:var(--ink);display:block;font-size:.95rem}
@media (max-width:700px){.gallery{grid-template-columns:1fr}}
#lightbox{position:fixed;inset:0;z-index:50;background:rgb(10 10 8/.92);display:grid;grid-template-rows:auto 1fr;padding:calc(env(safe-area-inset-top,0px) + 12px) 12px calc(env(safe-area-inset-bottom,0px) + 12px)}
#lightbox .lb-bar{display:flex;justify-content:space-between;align-items:center;color:#F1EEE4;gap:12px;padding-bottom:10px}
#lightbox .lb-bar button{font:inherit;background:#F1EEE4;color:#17160F;border:0;border-radius:999px;padding:8px 16px;cursor:pointer}
#lightbox .lb-img{overflow:auto;display:grid;place-items:center}
#lightbox img{max-width:none;width:min(1800px,180vw)}
#lightbox.fit img{width:auto;max-width:100%;max-height:100%}
.floor-card .kind{font-family:var(--mono);font-size:.72rem;color:var(--oak-dark);letter-spacing:.08em}

/* ===== 近期施工 ===== */
.case-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:12px 24px;margin-bottom:22px}
.case-bar .filters{margin:0}
.case-count{margin:0;color:var(--muted);font-size:.92rem}.case-count b{color:var(--ink);font-family:var(--mono)}
.cases-list{grid-template-columns:1fr}
.case2{display:flex;flex-direction:column;border:1px solid var(--line);box-shadow:0 1px 2px rgb(0 0 0/.04);transition:box-shadow .2s,transform .2s}
.case2:hover{box-shadow:0 14px 34px rgb(0 0 0/.10);transform:translateY(-2px)}
.case-media{display:grid;gap:4px;text-decoration:none;background:var(--surface)}
.case-cover{position:relative;display:block;overflow:hidden}
.case-cover img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .5s}
.case2:hover .case-cover img{transform:scale(1.03)}
.case-cover .live{position:absolute;left:12px;top:12px;background:var(--core);color:var(--on-core);font-weight:700;font-size:.78rem;padding:4px 10px;border-radius:999px}
.case-cover .cnt{position:absolute;right:12px;bottom:12px;background:rgb(26 26 26/.72);color:#fff;font-family:var(--mono);font-size:.75rem;padding:3px 9px;border-radius:999px}
.case-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;position:relative}
.case-thumbs img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block}
.case-thumbs b{position:absolute;right:0;bottom:0;width:calc((100% - 8px)/3);aspect-ratio:1/1;display:grid;place-items:center;background:rgb(26 26 26/.55);color:#fff;font-size:1.3rem;font-family:var(--mono)}
.case.case2 div.txt{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.case2 .kicker{margin:0;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--core-ink)}
.case2 h3{font-size:1.45rem}.case2 h3 a{color:var(--ink);text-decoration:none}
.case2 .sub{margin:-4px 0 0;color:var(--muted);font-size:1rem;font-weight:500}
.case2 .chips{list-style:none;padding:0;margin:4px 0;display:flex;flex-wrap:wrap;gap:6px}
.case2 .chips li{background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:2px 11px;font-size:.8rem}
.case2 p{margin:0}
.case-go{margin-top:auto;align-self:start;display:inline-flex;gap:6px;padding:9px 18px;border-radius:999px;background:var(--ink);color:#fff;font-weight:700;text-decoration:none;font-size:.92rem}
.case-go:hover{background:var(--core);color:var(--on-core)}
.case2.feature{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.case2.feature .case-cover img{aspect-ratio:16/10}
.case.case2.feature div.txt{padding:32px 32px 30px;justify-content:center}
.case2.feature h3{font-size:2rem}
.case2.feature p:not(.kicker):not(.sub){color:var(--muted);font-size:1rem}
@media (max-width:820px){.case2.feature{grid-template-columns:1fr}.case.case2.feature div.txt{padding:22px}.case2.feature h3{font-size:1.6rem}}
.h1-sub{display:block;font-size:.5em;color:var(--muted);font-weight:500;margin-top:6px}
.mosaic{display:grid;grid-template-columns:2fr 1fr 1fr;grid-auto-rows:clamp(150px,22vw,250px);gap:8px;border-radius:14px;overflow:hidden}
.mosaic figure{margin:0;position:relative;overflow:hidden;background:var(--line);grid-row:span 2}
.mosaic button{all:unset;cursor:zoom-in;display:block;width:100%;height:100%}
.mosaic button:focus-visible{outline:3px solid var(--core);outline-offset:-3px}
.mosaic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.mosaic figure:hover img{transform:scale(1.04)}
.mosaic figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;color:#fff;font-size:.82rem;font-weight:500;background:linear-gradient(transparent,rgb(0 0 0/.62));pointer-events:none}
.mosaic figure:nth-child(5):last-child{grid-column:span 2}.mosaic figure:nth-child(4):last-child{grid-column:1/-1}
.mosaic-hint{margin:10px 0 0;color:var(--muted);font-size:.82rem;text-align:right}
@media (max-width:760px){.mosaic{grid-template-columns:1fr 1fr;grid-auto-rows:44vw}.mosaic figure{grid-row:span 1}.mosaic .m0,.mosaic figure:nth-child(even):last-child{grid-column:span 2;grid-row:span 1}.mosaic figure:nth-child(5):last-child{grid-column:auto}.mosaic .m0 img{aspect-ratio:auto}}
.case-detail{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr);gap:32px;margin-top:44px;align-items:start}
.case-points{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:10px}
.case-points li{background:var(--surface);border-radius:10px;padding:14px 16px 14px 46px;position:relative;border:1px solid var(--line)}
.case-points li::before{content:"✓";position:absolute;left:14px;top:13px;width:22px;height:22px;border-radius:50%;background:var(--core);color:var(--on-core);display:grid;place-items:center;font-size:.8rem;font-weight:700}
.case-info{background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--core);border-radius:12px;padding:22px;position:sticky;top:90px}
.case-info h2{font-size:1.15rem;margin-bottom:10px}
.case-info dl{margin:0 0 18px;display:grid}
.case-info dl div{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:.92rem}
.case-info dt{color:var(--muted)}.case-info dd{margin:0;font-weight:700;text-align:right}
.btn-line{display:flex;justify-content:center;padding:12px;border-radius:999px;background:#06C755;color:#fff;font-weight:700;text-decoration:none}
.case-back{display:block;text-align:center;margin-top:12px;font-weight:700;color:var(--ink)}
@media (max-width:860px){.case-detail{grid-template-columns:1fr}.case-info{position:static}}

.note{color:var(--muted);font-size:.85rem;margin-top:10px}
.sample.real{background:#E6F4EA;color:#1E6B3A}
.sample{display:inline-block;font-family:var(--mono);font-size:.7rem;background:var(--core-soft);color:var(--core-ink);padding:2px 8px;border-radius:4px;margin-bottom:6px}
.case-meta{display:grid;grid-template-columns:repeat(3,auto);gap:4px 14px;margin:6px 0;justify-content:start;font-size:.85rem}
.case-meta dt{color:var(--muted);font-size:.75rem}.case-meta dd{margin:0;font-weight:700}
.case picture img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.filters{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:24px}
.filters label{display:grid;gap:4px;font-size:.85rem;color:var(--muted)}
.filters select{font:inherit;padding:8px 12px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.empty{background:var(--surface);border:1px dashed var(--line);border-radius:10px;padding:22px;color:var(--muted)}
.author{margin-top:40px;background:var(--surface);border-radius:10px;padding:20px;border-left:3px solid var(--core)}
.author p{color:var(--muted);font-size:.92rem;margin-top:6px}
.svc-link{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-top:28px;padding:16px 20px;background:var(--core-soft);border-radius:10px}
.svc-link span{font-size:.85rem;color:var(--muted)}.svc-link a{font-weight:700;color:var(--ink)}
.includes{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.includes li{background:var(--surface);border-radius:8px;padding:12px 14px}
.includes li::before{content:"✓";color:var(--core-ink);font-weight:700;margin-right:8px}
.city-links{display:flex;flex-wrap:wrap;gap:10px}
.city-links a{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 14px;color:var(--ink);text-decoration:none;font-weight:500}
.city-links a:hover{border-color:var(--core)}
.mbar{display:none}
@media (max-width:760px){
 .mbar{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 12px calc(env(safe-area-inset-bottom,0px) + 10px);background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -6px 18px rgb(0 0 0/.08)}
 .mbar a{display:flex;align-items:center;justify-content:center;gap:6px;padding:11px 8px;border-radius:999px;font-weight:700;text-decoration:none;font-size:.95rem}
 .mbar .line{background:#06C755;color:#fff}.mbar .tel{background:var(--wood);color:var(--wood-ink);border:1px solid var(--wood-line)}.mbar .quote{background:var(--core);color:var(--on-core)}
 body{padding-bottom:76px}
}

.lines{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.line-card{background:var(--surface);border-radius:12px;padding:24px;display:grid;gap:6px;align-content:start;border:1px solid var(--line)}
.line-card.durable{border-top:6px solid var(--core)}
.line-card.original{border-top:6px solid var(--oak)}
.line-card .kind{font-family:var(--mono);font-size:.75rem;color:var(--core-ink);letter-spacing:.1em}
.line-card .series-names{color:var(--muted)}
.line-card dl{display:grid;gap:10px;margin:12px 0 0}
.line-card dl div{display:grid;grid-template-columns:7em 1fr;gap:10px;border-top:1px solid var(--line);padding-top:10px}
.line-card dt{color:var(--muted);font-size:.88rem}.line-card dd{margin:0;font-weight:700}
.cert-chips{display:flex;flex-wrap:wrap;gap:8px}
.cert-chips span{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:.9rem}
.upgrade{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.upgrade div{background:var(--surface);border-radius:10px;padding:16px;border:1px solid var(--line)}
.upgrade b{display:block;margin-bottom:4px}.upgrade span{color:var(--muted);font-size:.9rem}
@media (max-width:760px){.lines{grid-template-columns:1fr}}

.sw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.sw{display:grid;gap:8px;text-decoration:none;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden;transition:transform .15s,box-shadow .15s}
.sw:hover{transform:translateY(-3px);box-shadow:0 12px 24px -16px rgb(0 0 0/.35)}
.sw .img{aspect-ratio:1/1;background:var(--bg);display:grid;place-items:center;position:relative;overflow:hidden}
.sw .img img{width:100%;height:100%;object-fit:cover;display:block}
.sw .img .ph{font-size:.78rem;color:var(--muted);text-align:center;padding:10px;line-height:1.5}
.sw .img .has-case{position:absolute;right:8px;top:8px;background:var(--core);color:var(--on-core);font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:999px}
.sw .t{padding:0 14px 14px;display:grid;gap:2px}
.sw .t b{font-size:1rem}.sw .t span{font-size:.8rem;color:var(--muted)}
.sw .t code{font-family:var(--mono);font-size:.75rem;color:var(--core-ink)}
.sw-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.brand-tabs{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 12px;margin-bottom:14px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.brand-tabs .bt{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-weight:700;cursor:pointer;white-space:nowrap}
.brand-tabs .bt span{font-family:var(--mono);font-size:.75rem;font-weight:500;color:var(--muted);background:var(--bg);border-radius:999px;padding:1px 8px}
.brand-tabs .bt:hover{border-color:var(--core)}
.brand-tabs .bt.on{background:var(--ink);color:#fff;border-color:var(--ink)}.brand-tabs .bt.on span{background:var(--core);color:var(--on-core)}
.color-hero{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.color-hero figure{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.color-hero .frame{aspect-ratio:4/3;display:grid;place-items:center;background:var(--bg);overflow:hidden}
.color-hero .frame img{width:100%;height:100%;object-fit:cover;display:block}
.color-hero .frame .ph{color:var(--muted);text-align:center;padding:20px;line-height:1.7}
.color-hero figcaption{padding:12px 16px;font-size:.88rem;color:var(--muted)}
.color-hero figcaption b{color:var(--ink);margin-right:6px}
.spec-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin:0}
.spec-list div{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:12px 14px}
.spec-list dt{font-size:.8rem;color:var(--muted)}.spec-list dd{margin:2px 0 0;font-weight:700}
.room-more{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.room-more{align-items:start}
.room-item{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.room-item img{width:100%;height:auto;display:block}
.pcap{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:10px 14px;font-size:.82rem;color:var(--muted);border-top:1px solid var(--line)}
.color-hero figcaption .pcap{padding:10px 0 0;margin-top:10px}
.pcap .pill{background:var(--core-soft);color:var(--core-ink);border-radius:999px;padding:2px 10px;font-weight:700}
.pcap b{font-family:var(--mono);color:var(--ink);font-weight:500}
.pcap .sz{margin-left:auto;font-family:var(--mono)}
@media (max-width:700px){.color-hero{grid-template-columns:1fr}}

.has-sub{position:relative}
.has-sub .sub{display:none;position:absolute;right:0;top:100%;min-width:150px;list-style:none;margin:0;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 30px -18px rgb(0 0 0/.35);z-index:20}
@media (min-width:761px){nav.main{overflow:visible}.has-sub:hover .sub,.has-sub:focus-within .sub{display:grid}}
.has-sub .sub a{padding:8px 12px}