/* 扛扛 KangKang — 會員登入頁（login.html）
   左邊標題＋扛仔，右邊登入卡（LINE 鍵；用 email 登入：填 email 寄驗證碼 → 填 6 位數驗證碼）。 */

.lg { overflow: hidden; padding-top: clamp(36px, 6vw, 88px); }
/* 手機、平板：外框星星固定在標題右邊的空白（用 % 的話，卡片內容一變高，星星就會壓到字；登入頁和會員中心共用） */
@media (max-width: 899.98px) {
  .lg > .sparkle--abs:not(.sparkle--red) { left: auto; right: 20px; top: 104px; }
}
.lg__grid { display: grid; gap: var(--space-7); align-items: start; }
@media (min-width: 900px) {
  .lg__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: clamp(48px, 6vw, 96px); }
}
.lg__intro .lead { max-width: 24em; }
.lg__mascot { width: min(220px, 46vw); }
@media (max-width: 899.98px) {
  .lg__mascot { display: none; }
}

.lg__card { display: grid; gap: var(--space-5); padding: clamp(20px, 4vw, 36px); }
.lg__notice { margin: 0; }



.lg__status { margin: 0; font-weight: var(--fw-bold); line-height: 1.6; }
.lg__status:empty { display: none; }
/* 沒有 JS 時登出回來（#logged-out）才顯示；有 JS 時 login.js 把同一句念在 .lg__status */
.lg__bye { display: none; margin: 0; font-weight: var(--fw-bold); line-height: 1.6; }
html:not(.js) .lg__bye:target { display: block; }

/* LINE 鍵：顏色在 components.css 的 .key--line（LINE 的綠色，品牌色以外唯一例外）。
   LINE 登入還沒設定好（/api/me 的 lineReady:false）：login.js／account.js 加 aria-disabled，按了只顯示說明 */
.key--line[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

.lg__or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--fg-muted);
}
.lg__or::before,
.lg__or::after { content: ""; flex: 1; height: 0; border-top: 2px dashed currentColor; opacity: 0.5; }


.lg__row { margin: -6px 0 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; }
.lg__link:disabled { color: var(--fg-muted); text-decoration: none; cursor: default; }
.lg__link {
  min-height: 44px;
  padding: 0 2px;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* LINE 鍵下面的小字（只拿名稱和頭像、會員條款準備中） */
.lg__fine { display: grid; gap: 2px; margin-top: -4px; font-size: var(--fs-tiny); line-height: 1.6; color: var(--fg-muted); }
.lg__fine p { margin: 0; text-wrap: pretty; }
.lg__keep { white-space: nowrap; }   /* 小字裡不要拆開的詞組（「LINE 名稱、頭像，」「和一組用來認出你的編號。」），換行才不會只剩幾個字 */

/* 已經登入：頭像＋「你已經登入了」、到會員中心、登出；分頁和表單藏起來 */
.lg__card.is-in [data-signed-out] { display: none !important; }
.lg__in { --stack-gap: var(--space-4); }
.lg__who { display: flex; align-items: center; gap: 16px; min-width: 0; }
.lg__avatar { --size: 64px; }
.lg__who-text { min-width: 0; }
.lg__in-title { margin: 0; font-size: var(--fs-h3); line-height: 1.3; font-weight: var(--fw-black); }
.lg__in-name { margin: 0; color: var(--fg-muted); font-weight: var(--fw-bold); overflow-wrap: anywhere; }
.lg__in form { display: block; }

/* 登入過的人：等 /api/me 回來之前卡片裡先藏起來（最多 2.5 秒），不會先閃過登入表單 */
html.kk-member-wait .lg__card > * { visibility: hidden; }

/* 用 email 登入（驗證碼）：寄到哪個 email 的那一句、驗證碼欄位（數字放大、字距拉開，好對照信裡的碼） */
.lg__email { --stack-gap: var(--space-4); }
.lg__sent { margin: 0; line-height: 1.7; text-wrap: pretty; }
.lg__to { overflow-wrap: anywhere; }
.lg__code { font-size: 1.5rem; font-weight: var(--fw-black); letter-spacing: 0.3em; font-variant-numeric: tabular-nums; text-align: center; }
.lg__code::placeholder { letter-spacing: normal; }
.lg__status--email { color: var(--ink); }
/* email 打錯常見網域時的「是不是要填 …？ 改成這個」（login.js） */
.lg__suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; color: var(--ink); font-weight: var(--fw-bold); }
.lg__suggest .lg__link { min-height: 36px; }