/* ==========================================================================
   GLOW ACCOUNT — 로그인 · 회원가입 · 아이디 찾기 · 비밀번호 재설정 (Auth UX 2026-09)
   glow-account.css(OIDC 로그인/동의 화면)의 토큰·카드·라벨·버튼을 그대로 쓰고,
   입력 폼에 필요한 부품만 여기서 더한다. 모든 선택자는 ga- 접두사. 외부 CSS 프레임워크 없음.
   ========================================================================== */
.ga { --danger-bg: #fbf1f1; --ok: #1f6b43; --ring: rgba(48, 93, 67, .16); }
/* hidden 속성은 컴포넌트의 display 지정보다 항상 우선 */
.ga [hidden] { display: none !important; }

/* 상단: 로고 + 보조 링크 */
.ga-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ga-top-link { font-size: 13.5px; font-weight: 600; color: var(--glow-600); text-decoration: none; }
.ga-top-link:hover { text-decoration: underline; text-underline-offset: 4px; }

.ga-card--wide { max-width: 480px; }
.ga-auth .ga-main { padding-top: 2vh; }
.ga-auth .ga-title { font-size: 23px; }

/* 안내 · 오류 */
.ga-notice {
  margin-top: 16px; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--glow-50); font-size: 13.5px; color: var(--muted);
}
.ga-notice a { color: var(--glow-600); font-weight: 600; }
.ga-form-error {
  padding: 10px 12px; border-radius: var(--radius-sm); background: var(--danger-bg);
  color: var(--danger); font-size: 13.5px; line-height: 1.5;
}
.ga-form-ok {
  padding: 12px 14px; border-radius: var(--radius-sm); background: var(--glow-100);
  color: var(--glow-900); font-size: 14px; line-height: 1.55;
}

/* 폼 */
.ga-form { margin-top: 24px; display: grid; gap: 18px; }
.ga-form[hidden], .ga-field[hidden], [data-ga-step][hidden] { display: none; }
.ga-field { display: grid; gap: 6px; min-width: 0; }
.ga-field-label { font-size: 13.5px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.ga-field-hint { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.ga-field-msg { font-size: 12.5px; line-height: 1.5; color: var(--danger); min-height: 0; }
.ga-field-msg:empty { display: none; }
.ga-field-msg.is-ok { color: var(--ok); }
.ga-field-msg.is-info { color: var(--muted); }

.ga-input {
  width: 100%; min-width: 0; height: 46px; padding: 0 13px;
  font: inherit; font-size: 15px; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  -webkit-appearance: none; appearance: none;
}
.ga-input::placeholder { color: #8a968e; }
.ga-input:hover { border-color: #a9bcb0; }
.ga-input:focus { outline: none; border-color: var(--glow-600); box-shadow: 0 0 0 3px var(--ring); }
.ga-input[readonly] { background: var(--glow-50); color: var(--glow-900); }
.ga-input[aria-invalid="true"] { border-color: var(--danger); }
.ga-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(155, 44, 44, .12); }
.ga-input--code { font-family: var(--font-mono); font-size: 18px; letter-spacing: .32em; }

/* 입력 + 버튼 한 줄 */
.ga-inline { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: stretch; }
.ga-btn--sm { width: auto; min-height: 46px; padding: 0 14px; font-size: 14px; white-space: nowrap; }
.ga-btn[disabled], .ga-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.ga-btn--ghost[disabled]:hover { background: transparent; border-color: var(--line-2); }
.ga-btn:not(.ga-btn--ghost)[disabled]:hover { background: var(--glow-600); border-color: var(--glow-600); }

/* 비밀번호 보기 */
.ga-pw { position: relative; }
.ga-pw .ga-input { padding-right: 58px; }
.ga-pw-toggle {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  height: 34px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer;
}
.ga-pw-toggle:hover { color: var(--glow-900); background: var(--glow-50); }

/* 이메일 인증 */
.ga-verify { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--glow-50); }
.ga-verify[hidden] { display: none; }
.ga-verify-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--muted); }
.ga-timer { font-family: var(--font-mono); font-size: 12.5px; color: var(--glow-600); font-weight: 600; }
.ga-timer.is-over { color: var(--danger); }
.ga-linkbtn {
  padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--glow-600); cursor: pointer; text-decoration: none;
}
.ga-linkbtn:hover { text-decoration: underline; text-underline-offset: 3px; }
.ga-linkbtn[disabled] { color: var(--muted); cursor: default; text-decoration: none; }
.ga-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px;
  background: var(--glow-100); color: var(--glow-900); font-size: 12px; font-weight: 600; line-height: 1.6;
}
.ga-chip::before {
  content: ""; width: 9px; height: 5px; border: 1.8px solid currentColor; border-top: 0; border-right: 0;
  transform: rotate(-45deg) translate(1px, -1px);
}

/* 동의 */
.ga-agree { margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); min-width: 0; }
.ga-agree legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ga-agree-row { display: flex; align-items: center; gap: 10px; padding: 11px 13px; min-height: 46px; }
.ga-agree-row + .ga-agree-row { border-top: 1px solid var(--glow-100); }
.ga-agree-row--all { background: var(--glow-50); border-bottom: 1px solid var(--line); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.ga-agree-row--all + .ga-agree-row { border-top: 0; }
.ga-agree-row label { flex: 1; display: flex; align-items: baseline; gap: 7px; font-size: 14px; cursor: pointer; min-width: 0; }
.ga-agree-row--all label { font-weight: 700; color: var(--glow-900); }
.ga-agree input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; accent-color: var(--glow-600); cursor: pointer; }
.ga-req, .ga-opt { flex: 0 0 auto; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .04em; }
.ga-req { color: var(--glow-600); }
.ga-opt { color: var(--muted); }
.ga-agree-view {
  flex: 0 0 auto; padding: 4px 2px; border: 0; background: none; font: inherit; font-size: 12.5px;
  color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.ga-agree-view:hover { color: var(--glow-900); }
.ga-agree-note { padding: 0 13px 11px 41px; font-size: 12px; color: var(--muted); line-height: 1.5; }

/* 하단 링크 · 구분선 */
.ga-links { margin-top: 18px; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 12px; font-size: 13.5px; }
.ga-links a { color: var(--muted); text-decoration: none; }
.ga-links a:hover { color: var(--glow-900); text-decoration: underline; text-underline-offset: 4px; }
.ga-divider { margin: 24px 0 14px; display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12.5px; }
.ga-divider::before, .ga-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.ga-foot-links { margin-top: 6px; display: flex; justify-content: center; gap: 12px; }
.ga-foot-links a { color: var(--muted); text-decoration: none; }
.ga-foot-links a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* 방법 선택(세그먼트) */
.ga-seg { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--glow-50); }
.ga-seg button {
  min-height: 40px; padding: 0 10px; border: 1px solid transparent; border-radius: 7px; background: transparent;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer;
}
.ga-seg button[aria-selected="true"] { background: var(--paper); border-color: var(--line-2); color: var(--glow-900); }

.ga-step { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em; color: var(--glow-600); font-weight: 600; }
.ga-result { margin-top: 4px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--glow-50); text-align: center; }
.ga-result strong { display: block; margin-top: 4px; font-size: 18px; color: var(--glow-900); letter-spacing: .01em; }
.ga-section { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.ga-section-h { font-size: 15px; font-weight: 700; color: var(--glow-900); }
.ga-section p + p, .ga-section-h + p { margin-top: 6px; }

/* 약관 보기 창 */
.ga-dialog {
  width: min(680px, calc(100vw - 24px)); max-height: min(82vh, 820px); padding: 0;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink);
  box-shadow: 0 1px 2px rgba(23, 33, 27, .06);
}
.ga-dialog::backdrop { background: rgba(23, 33, 27, .38); }
.ga-dialog[open] { display: flex; flex-direction: column; }
.ga-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.ga-dialog-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--glow-900); }
.ga-dialog-close { width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; }
.ga-dialog-close:hover { background: var(--glow-50); color: var(--glow-900); }
.ga-dialog-body { overflow: auto; padding: 4px 20px 20px; font-size: 14px; line-height: 1.7; overscroll-behavior: contain; }
.ga-dialog-body #privacy { padding: 0 !important; }
.ga-dialog-body #privacy h1 { margin: 22px 0 8px !important; font-size: 17px !important; color: var(--glow-900); scroll-margin-top: 12px; }
.ga-dialog-body #privacy h2 { margin: 16px 0 4px !important; font-size: 14.5px !important; color: var(--ink); scroll-margin-top: 12px; }
.ga-dialog-body #privacy p, .ga-dialog-body #privacy li { font-size: 13.5px !important; color: #36433b; }
.ga-dialog-sum { margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--glow-50); font-size: 13px; color: var(--muted); }
.ga-dialog-sum strong { color: var(--glow-900); }
.ga-dialog-foot { padding: 12px 20px 16px; border-top: 1px solid var(--line); }

.ga-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 480px) {
  .ga-auth .ga-title { font-size: 20px; }
  .ga-form { gap: 16px; }
  .ga-agree-note { padding-left: 13px; }
  .ga-dialog { max-height: 88vh; }
  .ga-dialog-body { padding: 2px 16px 16px; }
}

/* 본문 속 링크 */
.ga-text a, .ga-field-hint a { color: var(--glow-600); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }