/* AgentDesk 導入大樓 — CorporateVIP front end.
   The first viewport is laid out on the approved comp's 1536x1024 grid: every
   region sits at its measured box in % of the frame, and type scales with the
   frame through container query units (--u = one comp pixel). */

@font-face { font-family: "YJ Serif"; src: url("../assets/fonts/noto-serif-tc-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "YJ Serif"; src: url("../assets/fonts/noto-serif-tc-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "YJ Sans"; src: url("../assets/fonts/noto-sans-tc-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "YJ Sans"; src: url("../assets/fonts/noto-sans-tc-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --navy: #142A6E;
  --navy-deep: #0E2160;
  --navy-soft: #4A5C8E;
  --indigo: #3A36C9;
  --indigo-hover: #2E2AB3;
  --indigo-glow: rgb(58 54 201 / .28);
  --gold: #8A6A20;
  --gold-metal: #A98236;
  --ground: #F0F0F2;
  --ground-top: #ECEEF4;
  --band: #F6F5F3;
  --hairline: #D8DDE8;
  --blank: #B7C1D8;
  --indigo-wash: rgb(58 54 201 / .1);
  --white: #FFFFFF;
  --serif: "YJ Serif", "Noto Serif TC", "Source Han Serif TC", "PMingLiU", serif;
  --sans: "YJ Sans", "Noto Sans TC", "Source Han Sans TC", "Microsoft JhengHei", sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--navy);
  font-family: var(--sans);
  font-feature-settings: "palt" 0;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: rgb(58 54 201 / .18); color: var(--navy-deep); }
:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; border-radius: 4px; }

.ic { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -48px; z-index: 10; padding: 10px 16px; background: var(--navy); color: var(--white); text-decoration: none; border-radius: 8px; transition: top .2s var(--ease-out); }
.skip:focus { top: 12px; }

/* ---------- the comp frame ---------- */
.frame {
  --u: calc(100cqw / 1536);
  position: relative;
  width: 100%;
  aspect-ratio: 1536 / 1024;
  container-type: inline-size;
  overflow: hidden;
  background:
    linear-gradient(180deg, var(--ground-top) 0%, var(--ground) 42%, #EFEFF1 66.6%, var(--band) 66.7%, var(--band) 100%);
}
.frame main, .frame section { position: static; }

/* ---------- top bar ---------- */
.topbar {
  position: absolute; inset: 0 0 auto 0; height: 5.08%;
  background: rgb(255 255 255 / .92);
  border-bottom: 1px solid var(--hairline);
  z-index: 3;
}
.wordmark {
  position: absolute; left: 2.86%; top: 18%; height: 64%;
  display: flex; align-items: center;
  font-family: var(--sans); font-weight: 600;
  font-size: calc(var(--u) * 24); letter-spacing: -.01em;
  color: var(--navy); text-decoration: none;
}
.wordmark img { height: 100%; width: auto; }
.steps {
  position: absolute; left: 61.07%; width: 35.68%; top: 26%; height: 54%;
  display: flex; align-items: center; justify-content: space-between;
}
.steps a {
  font-family: var(--sans); font-weight: 600;
  font-size: calc(var(--u) * 13.5); letter-spacing: .04em;
  color: var(--navy); text-decoration: none;
  padding: calc(var(--u) * 4) 0;
  background: linear-gradient(var(--indigo), var(--indigo)) left bottom / 0 1.5px no-repeat;
  transition: color .2s var(--ease-out), background-size .3s var(--ease-out);
}
.steps a:hover { color: var(--indigo); background-size: 100% 1.5px; }

/* ---------- exterior ---------- */
.ground {
  position: absolute; left: 59.9%; top: 60.55%; width: 40.1%; height: 6.84%;
  background: linear-gradient(180deg, rgb(255 255 255 / 0) 0%, rgb(224 225 231 / .55) 45%, rgb(236 236 239 / .2) 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
}
.tower {
  position: absolute; left: 3.78%; top: 5.27%; width: 56.12%; height: 59.96%;
  margin: 0;
}
.tower img { width: 100%; height: 100%; object-fit: cover; }

.roof-sign {
  position: absolute; left: 25.26%; top: 5.86%; width: 19.27%; height: 4.49%;
  margin: 0; display: flex; align-items: baseline; justify-content: center; gap: calc(var(--u) * 12);
  color: var(--gold-metal);
  transform: rotate(1.6deg);
  transform-origin: left center;
  text-shadow: 0 1px 0 rgb(255 255 255 / .85), 0 calc(var(--u) * 2) calc(var(--u) * 3) rgb(110 80 20 / .18);
  white-space: nowrap;
}
.roof-latin { font-family: var(--sans); font-weight: 600; font-size: calc(var(--u) * 32); letter-spacing: -.005em; }
.roof-cjk { font-family: var(--serif); font-weight: 700; font-size: calc(var(--u) * 23); letter-spacing: .08em; }

.floors { list-style: none; margin: 0; padding: 0; }
.floor { position: absolute; left: 27.3%; height: 3.4%; }
.floor a {
  display: flex; align-items: center; gap: calc(var(--u) * 22); height: 100%;
  text-decoration: none; color: var(--navy);
  text-shadow: 0 0 calc(var(--u) * 3) rgb(255 255 255 / .8);
  transition: color .2s var(--ease-out);
}
.floor .fl { font-family: var(--serif); font-weight: 700; font-size: calc(var(--u) * 24); letter-spacing: .02em; }
.floor .fq { font-family: var(--serif); font-weight: 700; font-size: calc(var(--u) * 21.5); letter-spacing: .06em; }
.floor a:hover { color: var(--indigo); }
.f5 { top: 14.25%; }
.f4 { top: 23.35%; }
.f3 { top: 32.3%; }
.f2 { top: 41.7%; }
.f1 { left: 26.69%; top: 50.39%; width: 15.36%; height: 3.71%; }
.f1 a {
  color: var(--white); gap: calc(var(--u) * 16); justify-content: center;
  text-shadow: 0 1px calc(var(--u) * 2) rgb(30 24 140 / .45);
  background: radial-gradient(ellipse 62% 70% at 50% 50%, rgb(92 82 226 / .96) 55%, rgb(92 82 226 / 0) 100%);
}
.f1 a:hover { color: var(--white); }

.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 10);
  background: var(--indigo); color: var(--white); text-decoration: none;
  font-family: var(--serif); font-weight: 700; letter-spacing: .08em;
  border-radius: 999px;
  box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 18) rgb(40 34 160 / .32), inset 0 1px 0 rgb(255 255 255 / .22);
  transition: background-color .2s var(--ease-out), transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.btn-primary:hover { background: var(--indigo-hover); transform: translateY(-1px); box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 24) rgb(40 34 160 / .36), inset 0 1px 0 rgb(255 255 255 / .22); }
.btn-primary:active { transform: translateY(0); }
.btn-primary .ic { stroke-width: 2; }
.diagnosis {
  position: absolute; left: 28.26%; top: 55.27%; width: 11.72%; height: 4.69%;
  font-size: calc(var(--u) * 17);
  padding-left: calc(var(--u) * 15);
  background-color: #4535CF; /* the comp's indigo under the lobby light */
  box-shadow: 0 0 0 calc(var(--u) * 3) rgb(214 200 255 / .45), 0 calc(var(--u) * 6) calc(var(--u) * 18) rgb(40 34 160 / .3);
  border: calc(var(--u) * 1.5) solid rgb(255 255 255 / .78);
}

.headline {
  position: absolute; left: 60.94%; top: 9.57%; width: 34.6%; height: 5.86%;
  margin: 0; display: flex; align-items: center;
  font-family: var(--serif); font-weight: 700;
  font-size: calc(var(--u) * 38); line-height: 1; letter-spacing: .05em; padding-left: calc(var(--u) * 13);
  color: var(--navy); white-space: nowrap;
}
.subline {
  position: absolute; left: 61.07%; top: 15.63%; width: 32%; height: 2.93%;
  margin: 0; display: flex; align-items: center;
  font-family: var(--sans); font-weight: 600;
  font-size: calc(var(--u) * 16.8); letter-spacing: .13em;
  color: var(--navy); white-space: nowrap;
}

/* ---------- the plan card: plate behind live text ----------
   The plate (1120x880) is drawn at 0.521 x 0.5455 so its card lands on the
   comp card (941–1462, 212–620). In plate px: header 69–184, seven rows from
   185 to 812, column divider at 311 — the % below are those, of the plate. */
.plan {
  position: absolute; left: 59.225%; top: 17.19%; width: 37.99%; height: 46.875%;
  margin: 0;
  container-type: inline-size;
  --cu: calc(100cqw / 583.5);   /* one comp px of the card; the card scales anywhere */
}
.plan-plate { position: absolute; inset: 0; width: 100%; height: 100%; }
.plan-title {
  position: absolute; left: 5.36%; right: 5.36%; top: 7.22%; height: 13.1%;
  margin: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 700;
  font-size: calc(var(--cu) * 34.5); letter-spacing: .22em; text-indent: .48em;
  color: var(--white);
}
.plan-rows { position: absolute; left: 5.36%; right: 5.36%; top: 21.02%; height: 71.4%; margin: 0; display: grid; grid-template-rows: repeat(7, 1fr); }
.plan-rows .row { display: grid; grid-template-columns: 25.1% 1fr; align-items: center; min-width: 0; }
.plan-rows dt {
  justify-self: start; margin-left: 7.1%; width: calc(var(--cu) * 80);
  font-family: var(--serif); font-weight: 700;
  font-size: calc(var(--cu) * 17); color: var(--navy);
  text-align: justify; text-align-last: justify;
}
.plan-rows dd {
  margin: 0 0 0 calc(var(--cu) * 19); min-width: 0;
  font-family: var(--sans); font-weight: 400;
  font-size: calc(var(--cu) * 16.5); letter-spacing: .06em;
  color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.plan-rows dd.is-fresh { animation: fresh 1.6s var(--ease-out); }
@keyframes fresh {
  0% { color: var(--indigo); background: linear-gradient(var(--indigo-wash), var(--indigo-wash)) left center / 100% 70% no-repeat; }
  60% { color: var(--indigo); }
  100% { color: var(--navy); background: linear-gradient(var(--indigo-wash), var(--indigo-wash)) left center / 0% 70% no-repeat; }
}
.blank {
  display: block; width: calc(var(--cu) * 292); max-width: 100%; height: 1px;
  background: repeating-linear-gradient(90deg, var(--blank) 0 calc(var(--cu) * 8), transparent calc(var(--cu) * 8) calc(var(--cu) * 15));
}
body[data-view="floor-4"] [data-row="payment"] dd { color: var(--indigo); font-weight: 600; }
body[data-view="floor-4"] [data-row="payment"] dt { color: var(--indigo); }

/* ---------- 1F band ---------- */
.band-head { position: absolute; left: 2.99%; top: 70.51%; width: 15.4%; }
.band-floor {
  margin: 0; height: calc(var(--u) * 66); display: flex; align-items: center;
  font-family: var(--serif); font-weight: 700;
  font-size: calc(var(--u) * 68); line-height: 1; letter-spacing: -.02em;
  color: var(--navy);
}
.band-rule { display: block; margin-top: calc(var(--u) * 19.5); margin-left: calc(var(--u) * 7); width: calc(var(--u) * 26); height: calc(var(--u) * 2.5); min-height: 2px; background: var(--navy); }
.band-title {
  margin: calc(var(--u) * 12.5) 0 0; height: calc(var(--u) * 44); display: flex; align-items: center;
  font-family: var(--serif); font-weight: 700;
  font-size: calc(var(--u) * 25.5); letter-spacing: .055em; white-space: nowrap;
  color: var(--navy);
}
.band-sub {
  margin: calc(var(--u) * 2) 0 0 calc(var(--u) * 2); height: calc(var(--u) * 28); display: flex; align-items: center;
  font-family: var(--sans); font-weight: 400;
  font-size: calc(var(--u) * 14.5); letter-spacing: .08em; white-space: nowrap;
  color: var(--navy);
}
.floorplan {
  position: absolute; left: 18.49%; top: 68.75%; width: 79.56%; height: 31.25%;
  margin: 0;
}
.floorplan img { width: 100%; height: 100%; object-fit: cover; }
.rooms { list-style: none; margin: 0; padding: 0; }
.room {
  position: absolute; top: 73.05%; width: 9%;
  display: flex; flex-direction: column; align-items: center;
  transform: translateX(-50%);
  color: var(--navy);
}
.room a { display: flex; flex-direction: column; align-items: center; color: inherit; text-decoration: none; border-radius: 6px; transition: color .2s var(--ease-out); }
.room a:hover { color: var(--indigo); }
.room .rn { font-family: var(--serif); font-weight: 700; font-size: calc(var(--u) * 17); line-height: 1.3; letter-spacing: .02em; }
.room .rt { font-family: var(--serif); font-weight: 700; font-size: calc(var(--u) * 16.5); line-height: 1.4; letter-spacing: .08em; white-space: nowrap; }
.room .ic { margin-top: calc(var(--u) * 14); font-size: calc(var(--u) * 32); stroke-width: 1.5; }
.r1 { left: 27.7%; }
.r2 { left: 39.6%; }
.r3 { left: 51.5%; }
.r4 { left: 63.2%; }
.r5 { left: 74.4%; }
.r6 { left: 85.5%; }

/* ---------- brand: logos and the site footer ---------- */
.brand-logo { display: block; width: auto; }
.site-foot { background: var(--white); border-top: 1px solid var(--hairline); color: var(--navy); }
.sf-in { max-width: 1440px; margin: 0 auto; padding: 22px 32px calc(22px + env(safe-area-inset-bottom)); display: flex; justify-content: space-between; align-items: center; gap: 16px 32px; flex-wrap: wrap; }
.sf-by { display: flex; align-items: center; gap: 12px; margin: 0; }
.sf-k { font-size: 13px; letter-spacing: .12em; color: var(--navy-soft); }
.sf-mark { height: 34px; width: auto; }
.sf-name { font-family: var(--serif); font-weight: 700; font-size: 16px; letter-spacing: .08em; }
.sf-links { display: flex; gap: 22px; }
.sf-links a { font-size: 14px; color: var(--navy-soft); text-decoration: none; }
.sf-links a:hover { color: var(--indigo); text-decoration: underline; text-underline-offset: 4px; }
@media print { .site-foot { display: none; } }