/* 裕豐苑選樓助手 — tokens & styles
   Palette: navy #023341 · orange #FD5E02 · cream #FCF5E3
   Orange is the single accent. Small orange text uses --accent-ink (AA on cream). */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+TC:wght@400;500;700;900&display=swap');

:root{
  --navy:#023341;
  --navy-2:#0A4556;
  --orange:#FD5E02;
  --cream:#FCF5E3;

  --bg:#FCF5E3;
  --surface:#FFFCF5;
  --surface-2:#F5ECD6;
  --fg:#023341;
  --fg-2:#2C5563;
  --muted:#5B7680;
  --border:#E6DAC0;
  --border-strong:#CDBE9E;
  --accent:#FD5E02;
  --accent-ink:#B84300;          /* orange for small text on cream: 5.0:1 */
  --accent-soft:#FFE3CF;
  --on-accent:#023341;           /* navy on orange: used only at ≥19px bold */
  --primary:#023341;             /* buttons, active pills */
  --on-primary:#FCF5E3;

  --ok:#16704F;      --ok-soft:#DCEFE4;
  --sel:#5A3FA8;     --sel-soft:#E8E2F7;
  --sold:#6B6457;    --sold-soft:#ECE6D8;
  --warn:#9A4A00;    --warn-soft:#FFE9D6;

  --radius-sm:8px; --radius-md:14px; --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(2,51,65,.06);
  --shadow-md:0 8px 24px rgba(2,51,65,.08);
  --shadow-lg:0 20px 48px rgba(2,51,65,.16);
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:72px;
  --font-latin:'Inter', system-ui, sans-serif;
  --font-cjk:'Noto Sans TC','PingFang HK','Microsoft JhengHei', sans-serif;
  --header-h:64px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.4,.64,1);
}

:root[data-theme="dark"]{
  --bg:#011A22; --surface:#022833; --surface-2:#03313E; --fg:#FCF5E3; --fg-2:#D9D2BF; --muted:#9DB4BA;
  --border:#0E4050; --border-strong:#1B5868; --accent-ink:#FF8A47; --accent-soft:#3A2412;
  --primary:#FD5E02; --on-primary:#011A22;
  --ok:#5FD3A1; --ok-soft:#0D3A2C; --sel:#B9A4F5; --sel-soft:#2A2350; --sold:#B3AA98; --sold-soft:#2A2A26;
  --warn:#FFB27A; --warn-soft:#3A2412;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow-md:0 8px 24px rgba(0,0,0,.35); --shadow-lg:0 20px 48px rgba(0,0,0,.5);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#011A22; --surface:#022833; --surface-2:#03313E; --fg:#FCF5E3; --fg-2:#D9D2BF; --muted:#9DB4BA;
    --border:#0E4050; --border-strong:#1B5868; --accent-ink:#FF8A47; --accent-soft:#3A2412;
    --primary:#FD5E02; --on-primary:#011A22;
    --ok:#5FD3A1; --ok-soft:#0D3A2C; --sel:#B9A4F5; --sel-soft:#2A2350; --sold:#B3AA98; --sold-soft:#2A2A26;
    --warn:#FFB27A; --warn-soft:#3A2412;
    --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow-md:0 8px 24px rgba(0,0,0,.35); --shadow-lg:0 20px 48px rgba(0,0,0,.5);
  }
}

*{box-sizing:border-box}
[hidden]{display:none !important}   /* components set display:flex; hidden must still win */
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--font-cjk), var(--font-latin); background:var(--bg); color:var(--fg);
  line-height:1.65; font-size:16px; -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,h4{font-family:var(--font-cjk); margin:0 0 var(--space-3); font-weight:900; letter-spacing:.01em; line-height:1.25}
p{margin:0 0 var(--space-3)}
a{color:inherit}
img{max-width:100%; height:auto; display:block}
button{font-family:inherit; touch-action:manipulation}
.num{font-family:var(--font-latin); font-variant-numeric:tabular-nums}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:6px}
.container{max-width:1120px; margin:0 auto; padding:0 var(--space-4)}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.skip-link{position:absolute; left:-999px; top:8px; z-index:200; background:var(--primary); color:var(--on-primary); padding:8px 14px; border-radius:8px}
.skip-link:focus{left:8px}

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky; top:0; z-index:100; height:var(--header-h);
  background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.site-header .container{height:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--space-4)}
.brand{display:flex; align-items:center; gap:10px; font-weight:900; font-size:1.05rem; white-space:nowrap; text-decoration:none}
.brand-badge{
  width:36px; height:36px; border-radius:10px; background:var(--navy); color:var(--cream); position:relative;
  display:flex; align-items:center; justify-content:center; font-weight:900; font-size:1.05rem; flex:none; overflow:hidden;
}
.brand-badge::after{content:""; position:absolute; right:0; bottom:0; width:12px; height:12px; background:var(--orange); border-top-left-radius:4px}
:root[data-theme="dark"] .brand-badge{background:var(--cream); color:var(--navy)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .brand-badge{background:var(--cream); color:var(--navy)} }

nav.tabs{position:relative; display:flex; gap:2px; background:var(--surface-2); padding:4px; border-radius:999px}
nav.tabs .tabs-pill{
  position:absolute; top:4px; bottom:4px; left:0; width:var(--pw,0); transform:translateX(var(--px,0));
  background:var(--primary); border-radius:999px; box-shadow:var(--shadow-sm);
  transition:transform .45s var(--ease-spring), width .45s var(--ease-spring);
}
nav.tabs button{
  position:relative; z-index:1; border:none; background:transparent; padding:8px 15px; border-radius:999px; min-height:40px;
  font-size:.92rem; font-weight:700; color:var(--fg-2); cursor:pointer; white-space:nowrap; transition:color .25s ease;
  display:flex; align-items:center; gap:6px;
}
nav.tabs button svg{width:17px; height:17px; flex:none}
nav.tabs button[aria-current="page"]{color:var(--on-primary)}
nav.tabs button:hover:not([aria-current="page"]){color:var(--fg)}

.theme-toggle{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--border); background:var(--surface); cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:var(--fg); flex:none;
}
.theme-toggle svg{width:18px; height:18px}
@media (max-width:980px) and (min-width:761px){.brand-text{display:none} nav.tabs button{padding:8px 12px}}

@media (max-width:760px){
  .site-header{backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--bg)}   /* a backdrop-filter would trap the fixed tab bar */
  .brand-text{display:none}
  nav.tabs{position:fixed; left:0; right:0; bottom:0; z-index:100; border-radius:0; justify-content:space-around; gap:0;
    padding:6px 6px calc(6px + env(safe-area-inset-bottom)); background:var(--surface); border-top:1px solid var(--border); box-shadow:0 -6px 18px rgba(2,51,65,.08)}
  nav.tabs button{flex:1; flex-direction:column; gap:2px; padding:6px 2px; font-size:.72rem; min-height:52px; border-radius:12px}
  nav.tabs .tabs-pill{top:6px; bottom:calc(6px + env(safe-area-inset-bottom)); border-radius:12px}
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
}

/* ---------- Pages ---------- */
.page{display:none}
.page.active{display:block}
html.motion .page.is-entering{animation:pageIn .45s var(--ease-out)}
@keyframes pageIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

/* ---------- Hero ---------- */
.hero{position:relative; overflow:hidden; background:var(--navy); color:var(--cream); padding:var(--space-7) 0 0}
.hero .container{position:relative; z-index:2}
.hero-grid{display:grid; grid-template-columns:1.05fr 1fr; gap:var(--space-6); align-items:end}
@media (max-width:880px){.hero-grid{grid-template-columns:1fr}}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:.8rem; font-weight:700; letter-spacing:.06em;
  color:var(--cream); border:1px solid rgba(252,245,227,.28); padding:6px 14px; border-radius:999px; margin-bottom:var(--space-5);
}
.eyebrow .dot{width:8px; height:8px; border-radius:50%; background:var(--orange)}
.hero h1{display:inline-block; font-size:clamp(3rem, 9vw, 6.2rem); line-height:1; margin-bottom:var(--space-3); letter-spacing:.04em}
.hero h1 .accent-bar{display:block; width:100%; height:8px; background:var(--orange); border-radius:2px; margin-top:18px}
.hero .en-name{font-family:var(--font-latin); font-weight:700; letter-spacing:.16em; font-size:.9rem; opacity:.85; margin-bottom:var(--space-5); text-transform:uppercase}
.hero p.lead{max-width:56ch; font-size:1.02rem; color:rgba(252,245,227,.88)}
.hero-cta{display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-5)}
.hero-photo{margin:0; border-radius:var(--radius-lg) var(--radius-lg) 0 0; overflow:hidden; aspect-ratio:4/3; background:#06404F; position:relative}
.hero-photo img{width:100%; height:100%; object-fit:cover}
.hero-photo figcaption{position:absolute; left:12px; bottom:12px; font-size:.75rem; background:rgba(2,51,65,.72); color:var(--cream); padding:4px 10px; border-radius:999px}

.hero-stats{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(252,245,227,.18); margin-top:var(--space-6)}
.hero-stat{padding:var(--space-5) var(--space-4) var(--space-5) 0}
.hero-stat + .hero-stat{padding-left:var(--space-4); border-left:1px solid rgba(252,245,227,.18)}
.hero-stat b{display:block; font-family:var(--font-latin); font-size:clamp(1.5rem,3.2vw,2.2rem); font-weight:800; font-variant-numeric:tabular-nums; line-height:1.15}
.hero-stat b small{font-size:.55em; font-weight:700; margin-left:2px}
.hero-stat span{font-size:.82rem; color:rgba(252,245,227,.78)}
@media (max-width:640px){
  .hero-stats{grid-template-columns:repeat(2,1fr)}
  .hero-stat:nth-child(3){padding-left:0; border-left:none}
  .hero-stat:nth-child(n+3){border-top:1px solid rgba(252,245,227,.18)}
}

/* Pattern band: the one marquee (brand pattern, drifts with scroll) */
.pattern-band{background:var(--orange); color:var(--cream); overflow:hidden; white-space:nowrap; padding:10px 0; user-select:none}
.pattern-band .row{display:inline-block; font-weight:900; font-size:1.3rem; letter-spacing:.12em; transform:translateX(var(--mx,0)); will-change:transform}
.pattern-band .row span{display:inline-block; margin-right:28px}
.pattern-band .row span:nth-child(odd){text-shadow:0 1px 0 rgba(2,51,65,.18)}
.pattern-band .row span:nth-child(even){color:var(--navy)}

/* ---------- Sections ---------- */
.section{padding-top:var(--space-8); padding-bottom:var(--space-8)}
.section.tight{padding-top:0}
@media (max-width:560px){.section{padding-top:var(--space-7); padding-bottom:var(--space-7)}}
.section-head{margin-bottom:var(--space-5); max-width:720px}
.kicker{color:var(--accent-ink); font-weight:800; font-size:.8rem; text-transform:uppercase; letter-spacing:.12em; font-family:var(--font-latin); display:flex; align-items:center; gap:8px}
.kicker::before{content:""; width:18px; height:3px; background:var(--accent); border-radius:2px}
.section-head h2{font-size:clamp(1.55rem,3.4vw,2.2rem); margin-top:6px}
.section-head p{color:var(--muted)}

.grid{display:grid; gap:var(--space-4)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:880px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-5); box-shadow:var(--shadow-sm)}
.card h3{font-size:1.02rem; margin-bottom:6px}
.card p{color:var(--muted); font-size:.92rem; margin-bottom:0}
.card .big{font-family:var(--font-latin); font-weight:800; font-size:1.35rem; font-variant-numeric:tabular-nums; color:var(--fg)}
.icon-badge{width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--accent-soft); color:var(--accent-ink); margin-bottom:var(--space-3)}
.icon-badge svg{width:22px; height:22px}

.callout{border-radius:var(--radius-md); padding:var(--space-5); display:flex; gap:var(--space-4); align-items:flex-start; border:1px solid var(--border); background:var(--surface)}
.callout .icon-badge{margin:0; flex:none}
.callout h3,.callout h4{margin-bottom:4px; font-size:1.02rem}
.callout p{margin-bottom:0; font-size:.92rem; color:var(--fg-2)}
.callout p + p{margin-top:8px}
.callout.accent{background:var(--navy); color:var(--cream); border-color:transparent}
.callout.accent p{color:rgba(252,245,227,.86)}
.callout.accent .icon-badge{background:var(--orange); color:var(--navy)}
.callout.accent .quota{font-family:var(--font-latin); font-weight:800; font-size:2.2rem; color:var(--orange); line-height:1; font-variant-numeric:tabular-nums}
.callout.muted{background:var(--surface-2)}

/* ---------- Buttons / form controls ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px;
  border-radius:999px; padding:12px 24px; font-weight:800; font-size:1rem; border:none; cursor:pointer; text-decoration:none;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--primary); color:var(--on-primary)}
.btn-primary:hover{box-shadow:0 8px 20px color-mix(in srgb, var(--primary) 35%, transparent)}
.btn-accent{background:var(--orange); color:var(--navy); font-size:1.2rem; padding:14px 30px}   /* ≥19px bold: large text */
.btn-accent:hover{box-shadow:0 10px 24px rgba(253,94,2,.35)}
.btn-ghost{background:var(--surface-2); color:var(--fg)}
.btn-ghost:hover{background:var(--border)}
.btn-outline-light{background:transparent; color:var(--cream); border:1.5px solid rgba(252,245,227,.4)}
.btn-outline-light:hover{border-color:var(--cream)}
.btn-sm{min-height:40px; padding:8px 16px; font-size:.88rem}
.btn[disabled]{opacity:.45; cursor:not-allowed}
.btn .arrow{transition:transform .25s var(--ease-out)}
.btn:hover .arrow{transform:translateX(4px)}

.pill-group{position:relative; display:inline-flex; flex-wrap:wrap; background:var(--surface-2); padding:5px; border-radius:999px; gap:4px}
.pill-group .pill-ind{position:absolute; top:5px; left:0; height:calc(100% - 10px); width:var(--pw,0); transform:translateX(var(--px,0)); background:var(--primary); border-radius:999px; transition:transform .4s var(--ease-spring), width .4s var(--ease-spring)}
.pill-group button{
  position:relative; z-index:1; border:none; background:transparent; padding:10px 22px; border-radius:999px; font-weight:800; font-size:1rem;
  cursor:pointer; color:var(--fg-2); min-height:44px; min-width:72px; transition:color .25s ease;
}
.pill-group button[aria-pressed="true"]{color:var(--on-primary)}
@media (max-width:560px){
  .pill-group{display:grid; grid-template-columns:repeat(4,1fr); width:100%; border-radius:16px}
  .pill-group .pill-ind{border-radius:12px}
  .pill-group button{min-width:0; padding:8px 4px; border-radius:12px}
}
.pill-group button .sub{display:block; font-size:.7rem; font-weight:600; opacity:.75; font-family:var(--font-latin)}

label.field-label{display:block; font-weight:700; font-size:.85rem; margin-bottom:6px; color:var(--fg-2)}
.hint{font-size:.8rem; color:var(--muted); margin-top:6px}
select, input[type=number], input[type=text]{
  width:100%; min-height:48px; padding:12px 14px; border-radius:var(--radius-sm); border:1.5px solid var(--border-strong);
  background:var(--surface); color:var(--fg); font-size:1rem; font-family:inherit;
}
select:focus, input:focus{outline:3px solid color-mix(in srgb, var(--accent) 35%, transparent); border-color:var(--accent)}
select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%235B7680' stroke-width='2'%3E%3Cpath d='M5 7l5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:40px; cursor:pointer}
select:disabled{opacity:.5; cursor:not-allowed}
input[type=range]{width:100%; accent-color:var(--orange); height:28px}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3)}
@media (max-width:560px){.field-row{grid-template-columns:1fr}}

/* ---------- Badges ---------- */
.badge{display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; font-size:.8rem; font-weight:800; white-space:nowrap}
.badge-dot{width:8px; height:8px; border-radius:50%; background:currentColor}
.badge-available{background:var(--ok-soft); color:var(--ok)}
.badge-selected{background:var(--sel-soft); color:var(--sel)}
.badge-sold{background:var(--sold-soft); color:var(--sold)}
.badge-sold .badge-dot{background:transparent; border:1.5px solid currentColor}
.badge-info{background:var(--accent-soft); color:var(--accent-ink)}
.badge-plain{background:var(--surface-2); color:var(--fg-2)}

.note{display:flex; gap:10px; align-items:flex-start; margin-top:var(--space-3); background:var(--accent-soft); border-radius:var(--radius-sm); padding:10px 12px; font-size:.84rem; line-height:1.55; color:var(--fg)}
.note svg{flex:none; width:18px; height:18px; margin-top:2px; color:var(--accent-ink)}

/* ---------- Updated strip ---------- */
.update-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-3)}
@media (max-width:760px){.update-grid{grid-template-columns:repeat(2,1fr)}}
.update-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-4); position:relative; overflow:hidden}
.update-card .blk{font-weight:900; font-size:1.05rem}
.update-card .remain{font-family:var(--font-latin); font-weight:800; font-size:1.7rem; font-variant-numeric:tabular-nums; line-height:1.2}
.update-card .remain small{font-size:.5em; color:var(--muted); font-weight:700; margin-left:4px}
.update-card .when{font-size:.78rem; color:var(--muted)}
.update-card .meter{height:6px; background:var(--surface-2); border-radius:999px; margin-top:10px; overflow:hidden; display:flex}
.update-card .meter i{display:block; height:100%; transform-origin:left; transition:transform 1.1s var(--ease-out)}
.meter .m-sold{background:var(--sold)} .meter .m-sel{background:var(--sel)}
.status-banner{display:flex; gap:10px; align-items:center; font-weight:700; font-size:.92rem; margin-bottom:var(--space-4); color:var(--fg-2)}
.status-banner .live{width:10px; height:10px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 4px var(--ok-soft); flex:none}

/* ---------- Sales analysis ---------- */
.table-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); -webkit-overflow-scrolling:touch}
table{width:100%; border-collapse:collapse; font-size:.9rem}
thead th{
  text-align:left; padding:12px 14px; background:var(--surface-2); font-weight:800; font-size:.78rem; color:var(--fg-2);
  letter-spacing:.03em; white-space:nowrap; position:sticky; top:0;
}
th.r, td.r{text-align:right}
tbody td{padding:11px 14px; border-top:1px solid var(--border); white-space:nowrap}
.analysis table{min-width:640px}
.analysis tr.subtotal td{font-weight:800; background:var(--surface-2)}
.analysis tr.grand td{font-weight:900; background:var(--navy); color:var(--cream); border-top:none}
.analysis .bar{display:flex; align-items:center; gap:8px; min-width:120px}
.analysis .bar-track{flex:1; height:8px; background:var(--surface-2); border-radius:999px; overflow:hidden; display:flex}
.analysis tr.subtotal .bar-track{background:var(--border)}
.analysis .bar-track i{display:block; height:100%; transform-origin:left}
.analysis .bar-track .b-sold{background:var(--accent)}
.analysis .bar-track .b-sel{background:var(--sel)}
.analysis tr.grand .bar-track{background:rgba(252,245,227,.18)}
html.motion .analysis .bar-track i{transform:scaleX(0); transition:transform 1s var(--ease-out) var(--d,0ms)}
html.motion .analysis.is-in .bar-track i{transform:scaleX(1)}
.legend{display:flex; flex-wrap:wrap; gap:var(--space-4); font-size:.8rem; color:var(--muted); margin-top:var(--space-3)}
.legend i{display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:6px; vertical-align:-1px}

/* ---------- Finder ---------- */
.finder-controls{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--space-5); box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:var(--space-4)}
.finder-controls .row{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3)}
@media (max-width:560px){.finder-controls .row{grid-template-columns:1fr}}

/* floor × unit availability map */
.floor-map-wrap{margin-top:var(--space-4)}
.floor-map-head{display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:8px; margin-bottom:8px}
.floor-map-head h3{font-size:1rem; margin:0}
.floor-map{overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); padding:8px}
.floor-map table{border-collapse:separate; border-spacing:3px; font-size:.7rem; width:auto; min-width:0}
.floor-map th{font-family:var(--font-latin); font-weight:700; color:var(--muted); padding:0 4px; background:none; font-size:.7rem}
.floor-map th.fl{position:sticky; left:0; background:var(--surface); text-align:right; z-index:1}
.floor-map thead th{background:var(--surface)}
.floor-map td{padding:0; border:none}
.floor-map button{
  width:28px; height:22px; border-radius:4px; border:none; cursor:pointer; padding:0; display:block;
  font-family:var(--font-latin); font-size:.62rem; font-weight:700; color:transparent; transition:transform .15s ease;
}
.floor-map button:hover,.floor-map button:focus-visible{transform:scale(1.2); position:relative; z-index:2}
.floor-map button.s-available.t-細{background:#F6B98F} .floor-map button.s-available.t-中{background:#E67A35} .floor-map button.s-available.t-大{background:#A84300}
.floor-map button.s-selected{background:transparent; box-shadow:inset 0 0 0 2px var(--sel)}
.floor-map button.s-sold{background:var(--sold-soft); background-image:linear-gradient(45deg, transparent 46%, var(--sold) 47% 53%, transparent 54%)}
.floor-map button.is-current{outline:3px solid var(--navy); outline-offset:1px}
:root[data-theme="dark"] .floor-map button.is-current{outline-color:var(--cream)}
.floor-map .gap{width:28px; height:22px}
@media (min-width:900px){.floor-map button,.floor-map .gap{width:40px; height:24px}}

.result-card{margin-top:var(--space-5); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md)}
html.motion .result-card.is-entering{animation:cardIn .55s var(--ease-spring)}
@keyframes cardIn{from{opacity:0; transform:translateY(18px) scale(.985)} to{opacity:1; transform:none}}
.result-head{padding:var(--space-5); display:flex; justify-content:space-between; align-items:flex-start; gap:var(--space-3); flex-wrap:wrap; border-bottom:1px solid var(--border); background:linear-gradient(135deg, var(--accent-soft), transparent 60%)}
.result-head h3{font-size:1.6rem; margin-bottom:2px}
.result-head .sub{color:var(--muted); font-size:.9rem}
.result-head .actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.result-body{padding:var(--space-5); display:grid; grid-template-columns:1.1fr 1fr; gap:var(--space-6)}
@media (max-width:780px){.result-body{grid-template-columns:1fr}}
.stat-list{display:grid; grid-template-columns:1fr 1fr; gap:0 var(--space-4)}
.stat{padding:var(--space-3) 0; border-bottom:1px dashed var(--border)}
.stat .k{font-size:.8rem; color:var(--muted); font-weight:700; margin-bottom:2px}
.stat .v{font-size:1.15rem; font-weight:800}
.stat .v.price{font-size:1.5rem; color:var(--fg)}
.stat .v small{font-size:.8rem; color:var(--muted); font-weight:600}
.compass{display:inline-flex; align-items:center; gap:10px}
.compass svg{width:40px; height:40px; flex:none}
html.motion .compass .needle{transition:transform .9s var(--ease-spring)}
.plan-frame{border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; background:#fff}
.plan-frame img{width:100%; height:auto}
.plan-caption{font-size:.78rem; color:var(--muted); text-align:center; padding:8px; background:var(--surface-2)}

.fav-btn{border:1.5px solid var(--border-strong); background:var(--surface); width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--muted); flex:none; transition:all .2s ease}
.fav-btn svg{width:20px; height:20px}
.fav-btn[aria-pressed="true"]{color:var(--accent); border-color:var(--accent); background:var(--accent-soft)}
html.motion .fav-btn.pop svg{animation:pop .45s var(--ease-spring)}
@keyframes pop{0%{transform:scale(.6)} 100%{transform:scale(1)}}

/* ---------- Browse table ---------- */
.table-toolbar{display:grid; grid-template-columns:repeat(5,1fr); gap:var(--space-3); margin-bottom:var(--space-4)}
@media (max-width:880px){.table-toolbar{grid-template-columns:repeat(2,1fr)}}
.browse table{min-width:820px}
.browse tbody tr{cursor:pointer; transition:background .12s ease}
.browse tbody tr:hover{background:var(--surface-2)}
.browse tbody tr.is-fav td:first-child{color:var(--accent)}
.browse th button{all:unset; cursor:pointer}
.table-foot{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-3); margin-top:var(--space-3); font-size:.85rem; color:var(--muted)}
.table-foot .btns{display:flex; gap:var(--space-2)}

/* ---------- Advisor ---------- */
.advisor-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-4)}
@media (max-width:880px){.advisor-grid{grid-template-columns:1fr}}
.advisor-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-3)}
.advisor-card h3{font-size:1rem; margin:0; display:flex; align-items:center; gap:10px}
.advisor-card h3 .n{width:26px; height:26px; border-radius:8px; background:var(--navy); color:var(--cream); font-family:var(--font-latin); font-size:.8rem; display:inline-flex; align-items:center; justify-content:center; flex:none}
:root[data-theme="dark"] .advisor-card h3 .n{background:var(--orange); color:var(--navy)}
.advisor-card p{color:var(--muted); font-size:.86rem; margin:0}
.seg-control{display:flex; flex-wrap:wrap; gap:6px}
.seg-control button{border:1.5px solid var(--border); background:var(--surface-2); color:var(--fg-2); padding:8px 14px; min-height:40px; border-radius:999px; font-size:.82rem; font-weight:700; cursor:pointer; transition:all .15s ease}
.seg-control button[aria-pressed="true"]{background:var(--primary); border-color:var(--primary); color:var(--on-primary)}
.chip-group{display:flex; flex-wrap:wrap; gap:8px}
.chip{border:1.5px solid var(--border-strong); background:var(--surface); color:var(--fg); padding:8px 16px; min-height:40px; border-radius:999px; font-size:.88rem; font-weight:700; cursor:pointer; transition:all .15s ease}
.chip[aria-pressed="true"]{background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink)}
.advisor-filters{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-3); margin-bottom:var(--space-5)}
@media (max-width:760px){.advisor-filters{grid-template-columns:1fr}}

.advisor-results{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-4)}
@media (max-width:880px){.advisor-results{grid-template-columns:1fr}}
.adv-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-3)}
html.motion .adv-card{animation:cardIn .5s var(--ease-out) both; animation-delay:calc(var(--i) * 45ms)}
.adv-card.top{border:2px solid var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent)}
.adv-rank{font-size:.78rem; font-weight:800; color:var(--muted); letter-spacing:.04em}
.adv-card.top .adv-rank{color:var(--accent-ink)}
.adv-main{display:flex; justify-content:space-between; align-items:flex-start; gap:var(--space-3)}
.adv-main h4{font-size:1.15rem; margin-bottom:2px}
.adv-main .sub{color:var(--muted); font-size:.84rem}
.adv-score{display:flex; align-items:baseline; gap:2px; flex:none}
.adv-score b{font-family:var(--font-latin); font-size:2rem; font-weight:800; font-variant-numeric:tabular-nums; line-height:1}
.adv-score span{font-size:.8rem; color:var(--muted); font-weight:700}
.adv-stats{display:flex; flex-wrap:wrap; gap:var(--space-4); font-size:.86rem; color:var(--muted)}
.adv-stats b{color:var(--fg); margin-left:4px}
.adv-bars{display:flex; flex-direction:column; gap:6px}
.adv-bar{display:grid; grid-template-columns:72px 1fr 32px; align-items:center; gap:8px; font-size:.76rem; color:var(--muted)}
.adv-bar .t{height:6px; border-radius:999px; background:var(--surface-2); overflow:hidden}
.adv-bar .t i{display:block; height:100%; background:var(--navy); border-radius:999px; transform-origin:left}
:root[data-theme="dark"] .adv-bar .t i{background:var(--orange)}
html.motion .adv-bar .t i{animation:grow .8s var(--ease-out) both; animation-delay:calc(var(--i) * 45ms + 200ms)}
@keyframes grow{from{transform:scaleX(0)}}
.adv-bar.off{opacity:.45}

/* ---------- Calculator ---------- */
.calc-wrap{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-6); align-items:start}
@media (max-width:820px){.calc-wrap{grid-template-columns:1fr}}
.calc-form{display:flex; flex-direction:column; gap:var(--space-4)}
.range-out{display:flex; justify-content:space-between; font-size:.86rem; color:var(--muted); margin-top:4px}
.calc-result{background:var(--navy); color:var(--cream); border-radius:var(--radius-lg); padding:var(--space-6); display:flex; flex-direction:column; gap:var(--space-4); position:sticky; top:calc(var(--header-h) + 16px); overflow:hidden}
.calc-result .label{font-size:.85rem; opacity:.8; font-weight:700}
.calc-result .big{font-family:var(--font-latin); font-size:clamp(2.2rem,5vw,3rem); font-weight:800; font-variant-numeric:tabular-nums; line-height:1.1; color:var(--orange)}
.calc-breakdown{display:flex; flex-direction:column; gap:10px; border-top:1px solid rgba(252,245,227,.2); padding-top:var(--space-4)}
.calc-breakdown div{display:flex; justify-content:space-between; gap:12px; font-size:.92rem}
.calc-breakdown b{font-family:var(--font-latin); font-variant-numeric:tabular-nums}
.calc-split{height:10px; border-radius:999px; overflow:hidden; display:flex; background:rgba(252,245,227,.15)}
.calc-split i{display:block; height:100%; transition:width .5s var(--ease-out)}
.calc-split .p{background:var(--cream)} .calc-split .i{background:var(--orange)}
.calc-legend{display:flex; gap:var(--space-4); font-size:.78rem; opacity:.85}
.calc-legend i{display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:6px}
.stress{border-radius:var(--radius-sm); padding:10px 14px; font-size:.86rem; display:flex; gap:8px; align-items:flex-start; background:rgba(252,245,227,.1)}
.stress.bad{background:var(--orange); color:var(--navy); font-weight:700}
.stress svg{flex:none; width:18px; height:18px; margin-top:2px}

/* ---------- Gallery / plans ---------- */
.gallery{display:grid; grid-template-columns:2fr 1fr 1fr; grid-template-rows:auto auto; gap:var(--space-3)}
.gallery figure{margin:0; border-radius:var(--radius-md); overflow:hidden; background:var(--surface-2)}
.gallery figure:first-child{grid-row:span 2}
.gallery img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/3}
.gallery figure:first-child img{aspect-ratio:auto}
@media (max-width:760px){.gallery{grid-template-columns:1fr 1fr} .gallery figure:first-child{grid-column:span 2; grid-row:auto} .gallery figure:first-child img{aspect-ratio:4/3}}
.plan-figure img{width:100%; height:auto}
.plan-figure{margin:0; border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; background:#fff}
.plan-figure figcaption{font-size:.8rem; color:var(--muted); padding:10px 14px; background:var(--surface-2)}
.fact-list{display:grid; grid-template-columns:repeat(2,1fr); gap:0 var(--space-6); margin:0}
@media (max-width:640px){.fact-list{grid-template-columns:1fr}}
.fact-list div{display:flex; justify-content:space-between; gap:var(--space-4); padding:12px 0; border-bottom:1px solid var(--border)}
.fact-list dt{color:var(--muted); font-size:.9rem}
.fact-list dd{margin:0; font-weight:700; text-align:right}

.empty-state{text-align:center; padding:var(--space-7) var(--space-4); color:var(--muted)}
.empty-state svg{width:48px; height:48px; margin:0 auto var(--space-3); opacity:.5}

/* ---------- Footer ---------- */
footer{padding:var(--space-7) 0 var(--space-8); color:var(--muted); font-size:.84rem; border-top:1px solid var(--border); margin-top:var(--space-6)}
footer a{color:var(--accent-ink); font-weight:700}

/* ---------- Motion (gated by html.motion; settles instantly otherwise) ---------- */
.line-mask{display:block; overflow:clip; padding-bottom:.06em}
.line-mask > span{display:block}
html.motion .hero [data-lines] .line-mask > span{transform:translateY(105%); transition:transform .9s var(--ease-out) calc(var(--i) * 110ms)}
html.motion .hero.is-in [data-lines] .line-mask > span{transform:none}
html.motion .hero .accent-bar{transform:scaleX(0); transform-origin:left; transition:transform .9s var(--ease-out) .55s}
html.motion .hero.is-in .accent-bar{transform:none}
html.motion [data-reveal]:not(.is-in){opacity:0; transform:translateY(24px)}
html.motion [data-reveal]{transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); transition-delay:var(--d,0ms)}
html.motion [data-wipe] img{clip-path:inset(100% 0 0 0); transform:scale(1.12); transition:clip-path 1.1s var(--ease-out), transform 1.6s var(--ease-out)}
html.motion [data-wipe].is-in img{clip-path:inset(0 0 0 0); transform:none}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *, *::before, *::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; transition-delay:0s !important; animation-delay:0s !important}
}