/** 로그인 카드 — 사이트 테마 변수와 선택적 이미지로 구성한다. */
.w-login-form {
    --w-login-bg: var(--site-bg, #fff);
    --w-login-text: var(--site-text, #243b38);
    --w-login-muted: var(--site-muted, #667773);
    --w-login-border: var(--site-border, #e1e8e5);
    --w-login-brand: var(--site-brand, #0f766e);
    --w-login-radius: var(--site-card-radius, 14px);
    max-width: 460px;
    margin: 2rem auto;
    container-type: inline-size;
}
.w-login-form[v-cloak] { visibility: hidden; }
.w-login-form--illustrated { max-width: var(--w-login-max, 920px); }
.w-login-form__card {
    display: block;
    --spacing: 0;
    --wa-color-surface-border: var(--w-login-border);
    --wa-panel-border-radius: var(--w-login-radius);
    overflow: hidden;
    background: var(--w-login-bg);
    box-shadow: var(--w-login-shadow, 0 16px 48px rgb(36 59 56 / 6%));
}
.w-login-form__layout { display: grid; min-width: 0; }
.w-login-form--illustrated .w-login-form__layout { grid-template-columns: 0.9fr 1fr; }
.w-login-form__visual {
    position: relative;
    display: flex;
    align-items: end;
    min-width: 0;
    padding: 2.5rem;
    isolation: isolate;
    background: var(--w-login-visual-bg, var(--site-brand-dark, #134e4a));
    color: var(--w-login-on-image, #fff);
}
.w-login-form__image {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--w-login-image-position, 50% center);
}
.w-login-form__visual::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--w-login-image-shade, linear-gradient(180deg, rgb(14 42 38 / 4%) 15%, rgb(14 42 38 / 94%) 100%));
}
.w-login-form__house { font-size: 1.75rem; margin-bottom: 1.1rem; }
.w-login-form__story h2 { margin: 0; font-size: clamp(1.8rem, 4cqi, 2.3rem); line-height: 1.35; letter-spacing: -0.055em; }
.w-login-form__story p { margin: 1rem 0 0; font-size: 0.875rem; line-height: 1.8; word-break: keep-all; }
.w-login-form__content { min-width: 0; padding: 2.5rem; }
.w-login-form__header { margin-bottom: 1.75rem; }
.w-login-form__eyebrow { margin: 0 0 1rem; font-size: 0.625rem; font-weight: 750; letter-spacing: 0.14em; color: var(--w-login-brand); }
.w-login-form__header h1 { margin: 0 0 0.7rem; color: var(--w-login-text); font-size: 1.75rem; line-height: 1.25; letter-spacing: -0.045em; }
.w-login-form__description { margin: 0; color: var(--w-login-muted); font-size: 0.875rem; line-height: 1.75; word-break: keep-all; }
.w-login-form__google, .w-login-form__submit, .w-login-form__fields wa-input { width: 100%; }
/* Google 브랜드 규격: 사이트 색의 영향을 받지 않는 흰 배경·회색 테두리·공식 G.
   https://developers.google.com/identity/branding-guidelines */
.w-login-form__google {
    --wa-color-neutral-fill-normal: #fff;
    --wa-color-neutral-fill-quiet: #fff;
    --wa-color-neutral-border-normal: #747775;
    --wa-color-neutral-on-normal: #1f1f1f;
    --wa-color-neutral-on-quiet: #1f1f1f;
    --wa-form-control-border-radius: 4px;
    font-family: 'Google Sans', Roboto, Arial, sans-serif;
}
.w-login-form__google::part(base) {
    width: 100%;
    min-height: 44px;
    padding-inline: 12px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}
.w-login-form__google::part(start) { margin-inline-end: 10px; }
.w-login-form__google-logo { display: block; width: 20px; height: 20px; object-fit: contain; flex: none; }
.w-login-form__divider { display: flex; align-items: center; gap: 0.9rem; margin: 1.5rem 0; color: var(--w-login-muted); font-size: 0.75rem; }
.w-login-form__divider::before, .w-login-form__divider::after { content: ''; height: 1px; flex: 1; background: var(--w-login-border); }
.w-login-form__fields { display: grid; gap: 1rem; }
.w-login-form__fields wa-input { --wa-form-control-border-radius: 8px; }
.w-login-form__fields wa-input::part(label) { font-size: 0.8125rem; font-weight: 600; }
.w-login-form__fields wa-input i { color: var(--w-login-muted); }
.w-login-form__recovery { display: flex; justify-content: end; margin: -0.65rem -0.5rem -0.45rem 0; }
.w-login-form__recovery wa-button { font-size: 0.75rem; }
.w-login-form__submit::part(base) { width: 100%; min-height: 46px; }
.w-login-form__switch { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.15rem; margin-top: 1rem; font-size: 0.8125rem; color: var(--w-login-muted); }
.w-login-form__note { display: flex; align-items: start; gap: 0.5rem; border-top: 1px solid var(--w-login-border); margin: 1.1rem 0 0; padding-top: 1.25rem; color: var(--w-login-muted); font-size: 0.75rem; line-height: 1.7; word-break: keep-all; }
.w-login-form__note i { margin-top: 0.2rem; color: var(--w-login-brand); }
.w-login-form__back { display: table; margin: 1.25rem auto 0; }
.w-login-form__error { font-size: 0.8125rem; }
@container (max-width: 680px) {
    .w-login-form--illustrated .w-login-form__layout { grid-template-columns: 1fr; }
    .w-login-form__visual { min-height: 190px; padding: 1.5rem; }
    .w-login-form__image { object-position: center 45%; }
    .w-login-form__house { display: none; }
    .w-login-form__story h2 { font-size: 1.6rem; }
    .w-login-form__story p { margin-top: 0.5rem; font-size: 0.8125rem; }
    .w-login-form__content { padding: 1.75rem 1.5rem; }
}
@media (max-width: 640px) { .w-login-form { margin: 0.5rem auto; } }

/* ── 가입 유도 콜아웃 ─────────────────────────────────────────────
   🔴 색을 직접 칠하지 않는다. wa-callout 의 variant(warning·neutral)가
      명암비를 이미 보장한다. 여기서는 간격과 배치만 잡는다. */
.w-login-form__offer { font-size: 0.8125rem; }
.w-login-form__offer-title { display: block; font-size: 0.875rem; font-weight: 700; letter-spacing: -0.02em; }
.w-login-form__offer-text { margin: 0.35rem 0 0; line-height: 1.7; word-break: keep-all; }
.w-login-form__offer-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.9rem; }

/* 확인칸이 열릴 때 위에서 미끄러져 들어온다 — 줄이 늘어난 것을 알아채게 한다. */
.w-login-form__confirm { animation: w-login-slide 0.22s ease-out; }
@keyframes w-login-slide {
    from { opacity: 0; transform: translateY(-0.35rem); }
    to   { opacity: 1; transform: none; }
}
/* 접근성: 움직임을 줄이도록 설정한 사용자에게는 애니메이션을 끈다. */
@media (prefers-reduced-motion: reduce) {
    .w-login-form__confirm { animation: none; }
}