/* Narrow viewports: portrait iPad and phones.
   The exterior leaves the comp grid and reflows into a reading column; the
   interior already moved the lift to the top and the card into a drawer
   (interior.css, ≤1179px). */

.f1-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -8px; padding: 0 8px; }

@media (max-width: 899px) {
  /* ---------- exterior ---------- */
  .frame {
    aspect-ratio: auto; overflow: visible; container-type: normal;
    background: linear-gradient(180deg, var(--ground-top), var(--ground) 60%);
  }
  .topbar { position: sticky; top: 0; height: 56px; }
  .wordmark { position: absolute; left: 16px; top: 12px; height: 32px; }
  .steps { display: none; }

  .exterior { display: flex; flex-direction: column; padding: 28px 16px 8px; }
  .exterior > .ground { display: none; }
  .exterior > .roof-sign { order: 3; position: relative; z-index: 1; left: auto; top: auto; width: auto; height: auto; margin: 22px 0 -40px; justify-content: center; gap: 10px; transform: rotate(1deg); }
  .roof-latin { font-size: 23px; }
  .roof-cjk { font-size: 16px; }
  .headline {
    order: 1; position: static; width: auto; height: auto; padding: 0;
    font-size: clamp(26px, 7vw, 34px); line-height: 1.35; letter-spacing: .04em; white-space: normal; text-wrap: balance;
  }
  .subline { order: 2; position: static; width: auto; height: auto; margin-top: 10px; font-size: 15px; line-height: 1.75; letter-spacing: .06em; white-space: normal; }
  .tower { order: 4; position: static; width: auto; height: auto; margin: 8px -16px 0; }
  .tower img { height: auto; object-fit: contain; }
  .floors { order: 5; display: grid; gap: 8px; margin-top: 4px; }
  .floor, .f1 { position: static; left: auto; top: auto; width: auto; height: auto; }
  .floor a, .f1 a {
    gap: 14px; justify-content: flex-start; min-height: 52px; padding: 10px 16px;
    background: var(--white); border: 1px solid var(--hairline); border-radius: 12px; text-shadow: none; color: var(--navy);
  }
  .floor .fl { font-size: 20px; min-width: 1.6em; }
  .floor .fq { font-size: 17px; }
  .f1 a { background: var(--indigo); border-color: transparent; color: var(--white); }
  .diagnosis {
    order: 6; position: static; translate: none; align-self: flex-start; min-height: 40px; margin-top: 16px; padding: 0 18px;
    font-size: 14px; border-width: 0;
  }
  .plan { order: 7; position: relative; left: auto; top: auto; width: 112%; height: auto; aspect-ratio: 583.5 / 480; margin: 16px 0 0 -6%; --cu: calc(100cqw / 470); }

  .floor-band { display: block; padding: 36px 16px 44px; }
  .band-head { position: static; width: auto; }
  .band-floor { height: auto; font-size: 48px; }
  .band-rule { margin: 12px 0 0 4px; width: 26px; height: 2px; }
  .band-title { height: auto; margin-top: 12px; font-size: 22px; white-space: normal; }
  .band-sub { height: auto; margin: 4px 0 0; font-size: 14px; white-space: normal; }
  .floorplan { position: static; width: auto; height: auto; aspect-ratio: 1222 / 320; margin: 18px -16px 0; }
  .rooms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
  .room { position: static; width: auto; transform: none; align-items: stretch; }
  .only-wide { display: none; }
  .room a { flex-direction: row; gap: 10px; padding: 12px 14px; background: var(--white); border: 1px solid var(--hairline); border-radius: 12px; }
  .room .rn { font-size: 15px; color: var(--indigo); }
  .room .rt { font-size: 15.5px; }
  .room .ic { order: -1; margin: 0; font-size: 22px; }
  .r1 a { border-color: var(--indigo); }

  /* ---------- lobby ---------- */
  .lobby-stage { aspect-ratio: auto; overflow: visible; container-type: normal; display: flex; flex-direction: column; padding: 0 16px 8px; }
  .lobby-stage > * { position: static; width: auto; }
  /* max-width:none：全站 img 有 max-width:100%，不解除的話寬度被卡住，圖會靠左、右邊空 32px */
  .lobby-plate { margin: 0 -16px; width: calc(100% + 32px); max-width: none; height: auto; aspect-ratio: 2048 / 928; }
  .lobby-sign { margin-top: 22px; flex-wrap: wrap; gap: 4px 12px; transform: none; }
  .ls-latin { font-size: 32px; }
  .ls-cjk { font-size: 28px; }
  .lobby-rule { width: 100%; margin-top: 14px; }
  .lobby-rule i { width: 10px; height: 10px; }
  .lobby-parties { margin-top: 14px; flex-wrap: wrap; gap: 6px 16px; font-size: 15px; letter-spacing: .08em; white-space: normal; }
  .lobby-parties .sep { display: none; }
  .desk-ask { margin-top: 22px; flex-direction: column; align-items: stretch; gap: 8px; }
  .desk-ask label { font-size: 17px; }
  .desk-ask input { width: 100%; height: 50px; font-size: 16px; }
  .desk-actions { margin-top: 14px; flex-direction: column; gap: 10px; }
  .interior .desk-actions .btn-primary, .desk-actions .btn-line { min-height: 52px; font-size: 16px; padding: 0 18px; }
  .interior .desk-actions .btn-primary { align-self: center; min-height: 40px; font-size: 14px; }
  .directory { margin-top: 24px; aspect-ratio: auto; background: var(--white); border: 2px solid #C9AC6E; border-radius: 10px; padding-bottom: 16px; overflow: hidden; }
  .directory h2, .directory ol, .interior .directory .dir-card { position: static; }
  .directory h2 { height: auto; padding: 14px 18px; font-size: 20px; background: var(--navy); }
  .directory ol { padding: 4px 14px; }
  .directory a { gap: 14px; padding: 12px 4px; }
  .directory b { font-size: 18px; }
  .directory .d-q { font-size: 16px; }
  .directory .d-s { font-size: 13px; }
  .interior .directory .dir-card { margin: 8px 16px 0; width: calc(100% - 32px); min-height: 48px; font-size: 15px; border-radius: 999px; }
  .lobby-band { display: none; }
  .lobby-note { margin: 16px 16px 0; }

  /* ---------- floors ---------- */
  .floor-scene, .proposal-scene { padding: 22px 16px 48px; }
  .floor-head { gap: 14px; margin-bottom: 22px; }
  .fh-n { font-size: 46px; }
  .fh-title { font-size: 23px; }
  .fh-sub { font-size: 14px; }
  .floor-scene > section, .floor-scene > aside { margin-top: 36px; }
  .h2 { font-size: 22px; }
  .f1-plan { min-width: 760px; }
  .stage-detail { padding: 22px 18px; }
  .sd-name { font-size: 23px; }
  .sd-body { font-size: 16px; }
  .sd-facts { grid-template-columns: minmax(0, 1fr); }
  .sd-facts div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--hairline); }
  .choice-tiles { grid-template-columns: minmax(0, 1fr); }
  .q legend { font-size: 18px; align-items: flex-start; }
  .q-n { flex: none; }
  .recommend { padding: 22px 20px; }
  .rec-plan { font-size: 25px; }
  .fee-figs { grid-template-columns: minmax(0, 1fr); }
  .fee-figs div + div { border-left: 0; border-top: 1px solid var(--hairline); }
  .fee-figs b { font-size: 34px; }
  .ladder { grid-template-columns: minmax(0, 1fr); }
  .step.s1, .step.s2, .step.s3 { min-height: 0; }
  .gate-track { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-left: 28px; }
  .gate-track::before { left: 7px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; background: linear-gradient(180deg, #C9AC6E, #E6D7B4); }
  .gate { padding: 0; }
  .gate .diamond { position: absolute; left: -28px; top: 4px; }
  .gate-when { margin-top: 0; }
  .paybar { height: auto; }
  .paybar > div { padding: 12px 12px; }
  .paybar b { font-size: 20px; }
  .paybar span { font-size: 12px; white-space: normal; }
  .guarantee-list { grid-template-columns: minmax(0, 1fr); }
  .start-path { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .start-path li { padding: 0 0 0 56px; }
  .start-path li:not(:last-child)::after { top: 46px; bottom: -18px; left: 19px; right: auto; width: 2px; height: auto; background: repeating-linear-gradient(180deg, #B7C1D8 0 6px, transparent 6px 11px); }
  .sp-n { position: absolute; left: 0; top: 0; }
  .start-path b { margin-top: 6px; }
  .f5-grid { grid-template-columns: minmax(0, 1fr); }
  .f5-grid > section { padding: 22px 18px; }
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .floor-next { flex-direction: column-reverse; }
  .floor-next > * { width: 100%; }

  /* overview: building on top, floors as a list */
  .section-stage { --labels: 0px; height: auto; padding: 0; width: 100%; margin-top: 18px; }
  .section-plate, .section-box .section-plate { width: 100%; height: auto; }
  .section-box { height: auto; width: 100%; container-type: inline-size; }
  .section-sign { gap: 1.8cqw; }
  .section-sign .s-latin { font-size: 2.8cqw; }
  .section-sign .s-cjk { font-size: 2.2cqw; }
  .interior .section-cta { display: none; }
  .section-floors { position: static; display: grid; gap: 8px; margin-top: 12px; }
  .sf { position: static; width: auto; transform: none; }
  .sf a { padding: 10px 14px; background: var(--white); border: 1px solid var(--hairline); border-radius: 12px; }
  .sf-line { display: none; }

  /* proposal */
  .doc { padding: 26px 20px; }
  .doc h1 { font-size: 28px; }
  .doc-parties, .doc-grid { grid-template-columns: minmax(0, 1fr); }
  .doc-stages li { grid-template-columns: 2em 5.5em minmax(0, 1fr); }
  .doc-foot { flex-direction: column; gap: 6px; }
  .doc-brand { flex-direction: column-reverse; align-items: flex-start; }
  .doc-by { align-items: flex-start; }
  .sf-in { padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
  .bar-mark .brand-logo { height: 28px; }
  .bar-mark span, .card-toggle { white-space: nowrap; }

  .ride-shaft { height: auto; width: min(86vw, 480px); }
  .ride-label b { font-size: 32px; }
  .ride-label span { font-size: 19px; }
}

@media (max-width: 899px) and (min-width: 600px) {
  .exterior, .floor-band { padding-left: 32px; padding-right: 32px; }
  .floors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .f1 { grid-column: 1 / -1; }
  .rooms { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plan { width: min(100%, 560px); align-self: center; }
}

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