/* 訪客登記（login.html），Ensemo 那棟：首頁外觀同一個 comp 網格（--u＝1/1536），框高 900（裁掉樓層鍵那一條）。
   首頁的 % 定位以 1024 高為基準；這裡改用 comp px（--u）重新指定（只在 ≥900px）。
   結構與 AgentDesk 那棟 frontend/css/login.css 相同，只換位置與配色。 */

.gate-page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.gate-page .site-foot { margin-top: auto; }
.hl-latin { font-family: var(--serif); font-weight: 700; letter-spacing: .01em; }

/* ---------- 訪客登記卡：白色琺瑯面板 ---------- */
.gate-frame .gate-card {
  background: var(--white); border: 1px solid var(--hairline); border-radius: 16px;
  box-shadow: 0 16px 40px rgb(26 35 64 / .1);
}

/* 桌機：comp 網格（窄螢幕由 responsive.css 改成直排，這些定位不能帶過去） */
@media (min-width: 900px) {
  .gate-frame {
    aspect-ratio: 1536 / 900;
    background: linear-gradient(180deg, var(--ground-top) 0%, var(--ground) 80%, #EDE7DA 100%);
  }
  .gate-frame .topbar { height: calc(var(--u) * 72); }
  .gate-frame .tower { top: calc(var(--u) * 44); height: calc(var(--u) * 860); }
  .gate-frame .ground { top: calc(var(--u) * 850); height: calc(var(--u) * 50); }
  .gate-frame .roof-sign { top: calc(var(--u) * 124); height: calc(var(--u) * 47); }
  .gate-frame .headline { top: calc(var(--u) * 190); font-size: calc(var(--u) * 50); }
  .gate-frame .subline { top: calc(var(--u) * 340); }
  .gate-frame .gate-card {
    position: absolute; left: 70.4%; width: 27%; top: calc(var(--u) * 190);
    padding: calc(var(--u) * 30) calc(var(--u) * 34) calc(var(--u) * 22);
  }
}
.gc-title {
  margin: 0; text-align: center;
  font-family: var(--serif); font-weight: 700; font-size: max(22px, calc(var(--u) * 28));
  letter-spacing: .22em; text-indent: .22em; color: var(--navy);
}
.gc-title::after { content: ""; display: block; width: 36px; height: 2px; margin: calc(var(--u) * 14) auto 0; background: var(--gold-metal); }

.gc-modes {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px;
  margin: calc(var(--u) * 22) 0 calc(var(--u) * 16); padding: 4px;
  background: var(--ground); border-radius: 999px;
}
.gc-modes button {
  min-height: 40px; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  font: inherit; font-family: var(--serif); font-weight: 700; font-size: 15px; letter-spacing: .12em; color: var(--navy-soft);
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out);
}
.gc-modes button:hover { color: var(--navy); }
.gc-modes button[aria-selected="true"] { background: var(--navy); color: var(--champagne); }

.gc-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.gc-form[hidden] { display: none; }
.gc-form label { font-weight: 600; font-size: 14px; letter-spacing: .04em; }
.gc-form input {
  width: 100%; min-width: 0; min-height: 48px; padding: 10px 14px;
  font: inherit; font-size: 16px; color: var(--navy);
  background: #FCFBF8; border: 1.5px solid #DCD3BF; border-radius: 10px;
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out), background-color .2s var(--ease-out);
}
.gc-form input:focus { outline: none; border-color: var(--navy); background: var(--white); box-shadow: 0 0 0 3px var(--indigo-wash); }
.gc-form input[aria-invalid="true"] { border-color: #B3261E; box-shadow: 0 0 0 3px rgb(179 38 30 / .08); }
.gc-form label + input + label { margin-top: 6px; }
.gc-form #gate-password { margin-bottom: 4px; }
.gc-code {
  min-height: 58px !important; text-align: center;
  font-family: var(--serif) !important; font-weight: 700; font-size: 24px !important; letter-spacing: .32em;
  text-indent: .32em; text-transform: uppercase;
}
.gc-code::placeholder { color: var(--blank); letter-spacing: .32em; }
.gc-hint { margin: 0; font-size: 13px; line-height: 1.7; color: var(--navy-soft); }
.gc-error { margin: 4px 0 0; padding: 10px 14px; border-radius: 10px; background: #FCEEEE; color: #8C1D18; font-size: 14px; line-height: 1.7; }
.gc-error[hidden] { display: none; }
.gc-submit { width: 100%; min-height: 50px; margin-top: 8px; gap: 10px; border: 0; font-size: 16px; cursor: pointer; }
.gc-submit[aria-busy="true"] { opacity: .6; pointer-events: none; }
.gc-submit .ic { font-size: 18px; }
.gc-note {
  margin: calc(var(--u) * 16) 0 0; padding-top: calc(var(--u) * 14); border-top: 1px solid var(--hairline);
  text-align: center; font-size: 13.5px; line-height: 1.7; color: var(--navy-soft);
}

/* ---------- 窄螢幕：沿用首頁外觀的直排（responsive.css），登記卡接在大樓後面 ---------- */
@media (max-width: 899px) {
  .gate-frame { aspect-ratio: auto; }
  .gate-frame .headline { font-size: clamp(25px, 6.6vw, 32px); }
  .gate-frame .tower { margin-bottom: -8px; }
  .gate-frame .gate-card { order: 5; position: relative; left: auto; top: auto; width: auto; margin: 0 0 28px; padding: 26px 20px 20px; }
  .gc-title { font-size: 22px; }
  .gc-modes { margin: 20px 0 16px; }
  .gc-note { margin-top: 16px; padding-top: 12px; }
}
@media (max-width: 899px) and (min-width: 600px) {
  .gate-frame .gate-card { width: min(100%, 520px); align-self: center; }
}