/* @fileoverview Auth Panel 모달 스타일 (탭 세이버 모달 스타일 참조) */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&display=swap');

/* 컨테이너 및 표시 상태 */
.auth-modal{ position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2147483649; opacity: 0; visibility: hidden; transition: opacity .2s cubic-bezier(.4,0,.2,1), visibility .2s cubic-bezier(.4,0,.2,1); }
.auth-modal.is-visible{ opacity: 1; visibility: visible; }

/* 오버레이 */
.auth-modal__backdrop{ position: absolute; inset: 0; background: var(--overlay-scrim); }

/* 다이얼로그 */
.auth-modal__dialog{ position: relative; background: var(--sp-surface); color: var(--sp-fg); border: 1px solid var(--sp-border); border-radius: 12px; box-shadow: var(--sp-shadow); width: 360px; max-width: min(360px, 96vw); height: auto; max-height: min(80vh, 560px); display: flex; flex-direction: column; overflow: hidden; transform: scale(.95); transition: transform .2s cubic-bezier(.4,0,.2,1); }
.auth-modal.is-visible .auth-modal__dialog{ transform: scale(1); }

/* 헤더 */
.auth-modal__header{ display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: none; }
.auth-modal__header h3{ margin: 0; font-size: 14px; font-weight: 600; opacity: .95; }

/* 바디 */
.auth-modal__body{ padding: 24px 14px; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.auth-modal__placeholder{ height: 100%; display: grid; place-items: center; color: var(--sp-muted); font-size: 13px; }

/* ===== 문서 디자인 매핑 (경량) ===== */
.auth-container{ max-width: 360px; width: 100%; margin: 0 auto; }
.auth-brand{ width:128px; height:128px; margin: 0 auto 16px auto; display:flex; align-items:center; justify-content:center; }
.auth-brand img{ width:100%; height:100%; display:block; object-fit:contain; }
.auth-brand-title{ text-align:center; font-weight:700; font-size:24px; line-height:32px; margin: 16px 0 19px 0; color: var(--sp-fg); font-family: "Fredoka", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif; }
.auth-buttons{ display: grid; gap: 12px; margin-top: 12px; width: 90%; max-width: 324px; margin-left: auto; margin-right: auto; }
.auth-button{ position: relative; height: 52px; border-radius: 14px; padding: 0 12px; display: grid; grid-template-columns: 32px 1fr 32px; align-items: center; gap: 0; font-size: 14px; line-height: 20px; font-weight: 500; box-shadow: 0 4px 12px rgba(0,0,0,0.12); transition: all 120ms ease-out; border: 1px solid var(--sp-border); background: var(--sp-surface); color: var(--sp-fg); font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; width: 100%; }
.auth-button .auth-btn-text{ text-align: center; justify-self: center; grid-column: 2; font-size: 16px; line-height: 24px; }
.auth-btn-icon{ grid-column: 1; justify-self: center; align-self: center; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin: 0; transform: translateX(15px); }
.auth-btn-icon{ width: 20px; height: 20px; }
.auth-btn-icon svg{ width: 20px; height: 20px; }
.auth-button:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(59,130,246,.1); border-color: var(--sp-border); }
.auth-button:hover{ background: color-mix(in lab, var(--sp-surface) 96%, var(--sp-fg)); }
.auth-button:active{ transform: translateY(1px); }
.auth-button-google{ background: #FFFFFF; color: #1F1F1F; border-color: #747775; }
.auth-button-google:hover{ background: #F9FAFB; }
.auth-button-google:active{ background: #F3F4F6; }
.auth-button-google[disabled]{ opacity: .6; }
.auth-spinner{ grid-column: 3; justify-self: end; align-self: center; width: 16px; height: 16px; border-radius: 50%; border: 2px solid transparent; border-top-color: currentColor; display: none; margin-right: 21px; }
.auth-button.loading .auth-spinner{ display: inline-block; animation: authspin 1s linear infinite; }
.auth-button.loading{ opacity: .6; pointer-events: none; }
.auth-button.loading{ opacity: .6; pointer-events: none; }
.auth-help{ text-align: center; font-size: 14px; color: var(--sp-muted); margin-top: 12px; }
.auth-help a{ color: var(--sp-accent); font-weight: 600; text-decoration: none; }
.auth-help a:hover{ text-decoration: underline; }
.auth-terms{ margin-top: 8px; text-align: center; font-size: 11px; line-height: 14px; color: #6b7280; opacity: .6; }
.auth-terms a{ color: var(--sp-accent); text-decoration: underline; }

/* 폼 (회원가입) */
.auth-form{ display: grid; gap: 10px; }
.auth-field{ display: grid; gap: 6px; }
.auth-label{ font-size: 12px; color: var(--sp-muted); }
.auth-input{ padding: 8px 10px; border: 1px solid var(--sp-border); border-radius: 6px; background: var(--sp-surface); color: var(--sp-fg); }
.auth-submit{ padding: 8px 12px; background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: 6px; color: var(--sp-muted); cursor: not-allowed; }
.auth-note{ font-size: 12px; color: var(--sp-muted); }

@keyframes authspin{ from{ transform: rotate(0deg);} to{ transform: rotate(360deg);} }

/* 닫기 버튼 (X) */
.auth-modal__close{ appearance: none; border: 0; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; color: inherit; border-radius: 8px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; outline: none; opacity:.6; transition: opacity .15s ease; }
.auth-modal__close:hover{ opacity: 1; }
.auth-modal__close:focus, .auth-modal__close:focus-visible{ outline: none; }

/* 스크롤바 일관 스타일 (옵션) */
.auth-modal__body::-webkit-scrollbar{ width: 4px; background: transparent; }
.auth-modal__body::-webkit-scrollbar-thumb{ background-color: rgba(0,0,0,0.1); border-radius: 4px; }
[data-theme="dark"] .auth-modal__body::-webkit-scrollbar-thumb{ background-color: rgba(255,255,255,0.12); }