.welcome-page {
  --welcome-ink: #172e4b; --welcome-muted: #566b80;
  --welcome-blue: #2456d6; --welcome-border: #d9e3ed;
  margin: 0; background: #f6f8fb; color: var(--welcome-ink);
  font-family: "Noto Sans TC", "Microsoft JhengHei", Arial, sans-serif; line-height: 1.7;
}
.welcome-page *, .welcome-page *::before, .welcome-page *::after { box-sizing: border-box; }
.welcome-page a { color: var(--welcome-blue); text-underline-offset: 4px; }
.welcome-page a:focus-visible, .welcome-page button:focus-visible, .welcome-page summary:focus-visible { outline: 3px solid #e2a23d; outline-offset: 4px; }
.welcome-page p, .welcome-page h1, .welcome-page h2, .welcome-page h3 { margin: 0; }
.welcome-page .welcome-skip { position: absolute; top: -80px; left: 16px; padding: 12px; z-index: 10; background: white; }
.welcome-page .welcome-skip:focus { top: 8px; }
.welcome-page .welcome-header, .welcome-page .welcome-main, .welcome-page .welcome-footer { width: min(1200px, calc(100% - 64px)); margin-inline: auto; }
.welcome-page .welcome-header { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 100px; border-bottom: 1px solid var(--welcome-border); }
.welcome-page .welcome-brand { display: flex; align-items: center; gap: 12px; color: var(--welcome-ink); text-decoration: none; font-weight: 800; line-height: 1.4; }
.welcome-page .welcome-brand__mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px 14px 14px 4px; color: white; background: var(--welcome-blue); font-size: 18px; letter-spacing: -1px; }
.welcome-page .welcome-brand small { display: block; margin-top: 4px; font-size: 11px; color: var(--welcome-muted); font-weight: 500; letter-spacing: .12em; }
.welcome-page .welcome-header nav, .welcome-page .welcome-footer nav { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; }
.welcome-page .welcome-header nav a { font-size: 14px; color: var(--welcome-muted); text-decoration: none; }
.welcome-page .welcome-header nav a:hover { color: var(--welcome-blue); }
.welcome-page .welcome-header a.welcome-header__login { padding: 8px 16px; border: 1px solid var(--welcome-border); border-radius: 8px; color: var(--welcome-blue); background: white; font-weight: 700; }
.welcome-page .welcome-hero { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 64px; align-items: center; padding: 64px 0; }
.welcome-page .welcome-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .12em; color: var(--welcome-blue); margin-bottom: 12px; }
.welcome-page .welcome-hero h1 { font-size: clamp(28px, 3.2vw, 42px); line-height: 1.3; letter-spacing: -.03em; margin-bottom: 16px; }
.welcome-page .welcome-hero__copy > h2 { font-size: clamp(24px, 2.8vw, 36px); font-weight: 500; line-height: 1.5; letter-spacing: .02em; color: #375775; }
.welcome-page .welcome-intro { margin: 24px 0; max-width: 530px; color: var(--welcome-muted); font-size: 16px; line-height: 1.9; }
.welcome-page .welcome-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 24px 0; margin: 0 0 24px; border-top: 1px solid var(--welcome-border); border-bottom: 1px solid var(--welcome-border); list-style: none; }
.welcome-page .welcome-benefits li { display: flex; gap: 8px; align-items: baseline; }
.welcome-page .welcome-benefits li > span { color: #7188a2; font-size: 11px; font-variant-numeric: tabular-nums; }
.welcome-page .welcome-benefits strong { display: block; font-size: 15px; }
.welcome-page .welcome-benefits small { display: block; margin-top: 4px; font-size: 12px; color: var(--welcome-muted); }
.welcome-page .welcome-text-link { display: inline-flex; align-items: center; gap: 16px; font-size: 14px; font-weight: 700; text-decoration: none; }
.welcome-page .welcome-text-link:hover { text-decoration: underline; }
.welcome-page .welcome-login { min-width: 0; scroll-margin-top: 24px; padding: 32px; border: 1px solid var(--welcome-border); border-radius: 20px; background: white; box-shadow: 0 16px 40px #172e4b0a; border-top: 4px solid var(--welcome-blue); }
.welcome-page .welcome-login h2 { font-size: 26px; margin-bottom: 8px; }
.welcome-page .welcome-login__intro { color: var(--welcome-muted); font-size: 14px; line-height: 1.8; }
.welcome-page .welcome-login__providers { margin-top: 24px; }
.welcome-page .welcome-login__method { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; font-size: 13px; margin-bottom: 8px; }
.welcome-page .welcome-login__method span { color: var(--welcome-muted); font-size: 12px; }
.welcome-page .welcome-login__hint { margin-top: 8px; color: var(--welcome-muted); font-size: 12px; line-height: 1.7; }
.welcome-page .welcome-login__line { margin-top: 20px; padding-top: 20px; border-top: 1px solid #edf1f5; }
.welcome-page .line-btn { display: block; padding: 10px 16px; border: 1px solid #c3dfcf; border-radius: 8px; color: #156c39; background: #f1faf4; font-weight: 700; font-size: 14px; text-align: center; text-decoration: none; }
.welcome-page .line-btn:hover { background: #e2f4e9; border-color: #7fbf96; }
.welcome-page .login-help { margin-top: 20px; font-size: 12px; }
.welcome-page .login-help summary { cursor: pointer; color: var(--welcome-blue); font-weight: 700; }
.welcome-page .login-help p { margin-top: 8px; color: var(--welcome-muted); }
.welcome-page .welcome-login__footnote { font-size: 12px; color: var(--welcome-muted); padding-top: 16px; margin-top: 20px; border-top: 1px solid #edf1f5; }
.welcome-page .welcome-notice { padding: 12px; margin-top: 16px; border: 1px solid #eedaba; border-radius: 8px; background: #fff8ed; color: #78520b; font-size: 13px; }
.welcome-page .welcome-notice a { color: #78520b; }
.welcome-page #login-error { color: #a92a4f; margin-top: 16px; font-size: 13px; }
.welcome-page .welcome-guide { padding-top: 40px; border-top: 1px solid var(--welcome-border); scroll-margin-top: 24px; }
.welcome-page .welcome-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 32px; }
.welcome-page .welcome-section-head h2 { font-size: 28px; line-height: 1.4; }
.welcome-page .welcome-section-head > p { flex-shrink: 0; color: var(--welcome-muted); font-size: 12px; }
.welcome-page .welcome-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; }
.welcome-page .welcome-step { min-width: 0; display: flex; flex-direction: column; background: white; border: 1px solid var(--welcome-border); border-radius: 16px; overflow: hidden; }
.welcome-page .welcome-step__copy { padding: 24px; }
.welcome-page .welcome-step__number { display: inline-flex; margin-bottom: 12px; color: var(--welcome-blue); background: #edf3ff; padding: 2px 10px; font-size: 13px; font-weight: 800; border-radius: 6px; }
.welcome-page .welcome-step h3 { font-size: 22px; line-height: 1.5; margin-bottom: 12px; }
.welcome-page .welcome-step__copy > p { font-size: 14px; color: var(--welcome-muted); line-height: 1.85; }
.welcome-page .welcome-step__copy > .welcome-step__tip { border-left: 2px solid #cddbf4; margin-top: 16px; padding-left: 12px; color: #375775; font-size: 12px; }
.welcome-page .welcome-shot { display: block; margin: auto 16px 16px; border: 1px solid var(--welcome-border); border-radius: 10px; overflow: hidden; text-decoration: none; background: #f5f7fb; transition: border-color .15s, box-shadow .15s; }
.welcome-page .welcome-shot:hover { border-color: var(--welcome-blue); box-shadow: 0 4px 16px #2456d614; }
.welcome-page .welcome-shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; object-position: top; }
.welcome-page .welcome-shot > span { display: flex; justify-content: space-between; padding: 8px 12px; border-top: 1px solid var(--welcome-border); background: #fbfcff; font-size: 12px; }
.welcome-page .welcome-help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; }
.welcome-page .welcome-help-card { padding: 24px; border-radius: 12px; background: #edf2f8; }
.welcome-page .welcome-help-card h2 { font-size: 19px; line-height: 1.5; margin-bottom: 12px; }
.welcome-page .welcome-help-card p:not(.welcome-eyebrow) { color: var(--welcome-muted); font-size: 14px; line-height: 1.8; }
.welcome-page .welcome-help-card .welcome-text-link { margin-top: 16px; }
.welcome-page .welcome-help-card--staff { background: #eaf2f1; }
.welcome-page .welcome-help-card--staff .welcome-eyebrow { color: #256e60; }
.welcome-page .welcome-help-card p.welcome-help-card__note { margin-top: 16px; font-size: 12px; }
.welcome-page .welcome-bottom-cta { display: flex; justify-content: center; align-items: center; gap: 24px; padding: 48px 0; }
.welcome-page .welcome-bottom-cta p { color: var(--welcome-muted); font-size: 15px; }
.welcome-page .welcome-bottom-cta a { padding: 10px 24px; color: white; border-radius: 8px; background: var(--welcome-blue); font-size: 14px; font-weight: 700; text-decoration: none; }
.welcome-page .welcome-footer { padding: 24px 0; border-top: 1px solid var(--welcome-border); display: flex; justify-content: space-between; gap: 16px; color: var(--welcome-muted); font-size: 12px; }
.welcome-page .welcome-footer a { color: var(--welcome-muted); }
.welcome-page .welcome-lightbox { max-width: min(1100px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--welcome-border); border-radius: 12px; color: var(--welcome-ink); background: #fff; }
.welcome-page .welcome-lightbox::backdrop { background: #0e2135b8; }
.welcome-page .welcome-lightbox__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; border-bottom: 1px solid var(--welcome-border); }
.welcome-page .welcome-lightbox__head p { font-size: 14px; }
.welcome-page .welcome-lightbox__actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.welcome-page .welcome-lightbox__original { font-size: 13px; }
.welcome-page .welcome-lightbox__head button { padding: 8px 12px; border-radius: 6px; border: 1px solid var(--welcome-border); background: white; color: var(--welcome-ink); cursor: pointer; white-space: nowrap; font: inherit; font-size: 13px; }
.welcome-page .welcome-lightbox > img { display: block; width: 100%; height: auto; }
@media (max-width: 960px) {
  .welcome-page .welcome-hero { grid-template-columns: minmax(0, 1fr) 344px; gap: 32px; padding: 48px 0; }
  .welcome-page .welcome-login { padding: 24px; }
  .welcome-page .welcome-benefits { grid-template-columns: 1fr; gap: 12px; padding: 16px 0; }
  .welcome-page .welcome-benefits li > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
  .welcome-page .welcome-benefits small { margin-top: 0; }
  .welcome-page .welcome-section-head { align-items: flex-start; flex-direction: column; gap: 12px; }
}
@media (max-width: 768px) {
  .welcome-page .welcome-header, .welcome-page .welcome-main, .welcome-page .welcome-footer { width: calc(100% - 32px); }
  .welcome-page .welcome-header { min-height: 88px; gap: 16px; }
  .welcome-page .welcome-header nav { gap: 12px; }
  .welcome-page .welcome-header nav a { font-size: 12px; }
  .welcome-page .welcome-hero { grid-template-columns: 1fr; gap: 32px; padding: 32px 0; }
  .welcome-page .welcome-hero__copy { max-width: 540px; }
  .welcome-page .welcome-benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .welcome-page .welcome-benefits li > div { display: block; }
  .welcome-page .welcome-login { width: 100%; }
  .welcome-page .welcome-section-head h2 { font-size: 24px; }
  .welcome-page .welcome-steps, .welcome-page .welcome-help-grid { grid-template-columns: 1fr; }
  .welcome-page .welcome-guide { padding-top: 32px; }
  .welcome-page .welcome-help-grid { margin-top: 32px; }
  .welcome-page .welcome-footer { flex-direction: column; }
  .welcome-page .welcome-lightbox__head { align-items: flex-start; flex-direction: column; gap: 12px; }
  .welcome-page .welcome-lightbox__actions { width: 100%; justify-content: space-between; }
}
@media (max-width: 420px) {
  .welcome-page .welcome-header { flex-wrap: wrap; padding: 16px 0; }
  .welcome-page .welcome-header nav { width: 100%; justify-content: flex-end; }
  .welcome-page .welcome-intro { font-size: 15px; }
  .welcome-page .welcome-benefits { gap: 8px; }
  .welcome-page .welcome-benefits li { display: block; }
  .welcome-page .welcome-benefits small { margin-top: 4px; }
  .welcome-page .welcome-step__copy { padding: 20px; }
  .welcome-page .welcome-bottom-cta { flex-direction: column; gap: 16px; padding: 32px 0; }
}