*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }      :root {       --pet-primary: #ff6b6b;       --pet-primary-dark: #e85555;       --pet-primary-light: #ffe8e8;       --pet-bg: #faf8f6;       --pet-card: rgba(255,255,255,0.88);       --pet-text: #2d3436;       --pet-sub: #636e72;       --pet-muted: #9aa4a8;       --pet-border: #eee8e4;       --pet-gradient: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);       --pet-paw-coin-image: url('../images/paw-coin.svg');     }      .petple-paw-coin {       --paw-coin-size: 1em;       display: inline-block;       width: var(--paw-coin-size);       height: var(--paw-coin-size);       vertical-align: middle;       background: center / contain no-repeat var(--pet-paw-coin-image);       flex-shrink: 0;     }      body {       font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;       background:         radial-gradient(circle at 12% 15%, rgba(255,107,107,0.22), transparent 34%),         radial-gradient(circle at 88% 10%, rgba(255,182,102,0.20), transparent 34%),         radial-gradient(circle at 78% 82%, rgba(255,107,107,0.16), transparent 30%),         var(--pet-bg);       color: var(--pet-text);       min-height: 100vh;       display: flex;       align-items: center;       justify-content: center;       padding: 16px;       line-height: 1.5;     }      /* ── Shell ── */     .login-shell {       width: 100%;       max-width: 480px;       position: relative;     }      .login-hero { display: none; }      .bg-orb {       position: absolute;       border-radius: 50%;       filter: blur(6px);       pointer-events: none;       z-index: 0;       opacity: 0.75;     }     .bg-orb.orb-1 { width: 120px; height: 120px; background: rgba(255,107,107,0.24); top: -26px; left: -20px; }     .bg-orb.orb-2 { width: 150px; height: 150px; background: rgba(255,197,117,0.24); right: -26px; bottom: -28px; }      /* ── Card ── */     .login-card {       position: relative;       z-index: 1;       width: 100%;       background: rgba(255, 255, 255, 0.82);       backdrop-filter: blur(24px) saturate(1.4);       -webkit-backdrop-filter: blur(24px) saturate(1.4);       border: 1px solid rgba(255, 255, 255, 0.5);       border-radius: 28px;       box-shadow:         0 4px 6px rgba(0, 0, 0, 0.02),         0 12px 28px rgba(255, 107, 107, 0.10),         0 32px 64px rgba(255, 107, 107, 0.12);       padding: 32px 26px 28px;     }      /* ── Brand ── */     .brand-wrap {       text-align: center;       margin-bottom: 24px;       padding-bottom: 20px;       border-bottom: 1px solid rgba(238, 232, 228, 0.6);     }     .brand-title {       font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em;       display: inline-flex; align-items: center; gap: 10px;     }     .brand-title .icon {       width: 38px;       height: 38px;       border-radius: 14px;       display: block;       object-fit: contain;       flex-shrink: 0;       box-shadow: 0 6px 16px rgba(255, 107, 107, 0.22);     }     .brand-sub { margin-top: 8px; font-size: 0.84rem; color: var(--pet-sub); }      /* ── Tabs ── */     .tabs {       background: #fff; border: 1px solid var(--pet-border);       border-radius: 14px; padding: 4px; margin-bottom: 18px;       display: grid; grid-template-columns: 1fr 1fr; gap: 4px;     }     .tabs button {       border: none; border-radius: 10px; padding: 11px 10px;       background: transparent; color: var(--pet-sub);       font-size: 0.92rem; font-weight: 700; cursor: pointer;       transition: all 0.22s ease; font-family: inherit;     }     .tabs button.active {       background: var(--pet-gradient); color: #fff;       box-shadow: 0 8px 18px rgba(255,107,107,0.28);     }      /* ── Form ── */     .form-group { margin-bottom: 12px; }     label {       font-size: 0.82rem; font-weight: 700; color: var(--pet-sub);       margin-bottom: 6px; display: block;     }     .req { color: var(--pet-primary); margin-left: 2px; }      input[type="text"],     input[type="password"],     input[type="email"],     input[type="tel"] {       display: block;       width: 100%;       padding: 12px 14px;       border-radius: 14px;       border: 1.5px solid var(--pet-border);       font-size: 0.94rem;       background: rgba(255,255,255,0.9);       color: var(--pet-text);       font-family: inherit;       transition: border-color .18s, box-shadow .18s;     }     input::placeholder { color: #b7c0c3; }     input:focus {       outline: none;       border-color: var(--pet-primary);       box-shadow: 0 0 0 4px var(--pet-primary-light);     }      /* 회원가입 아이디 중복 확인 상태 (낮은 채도 테두리) */     input#regMbrId.id-check-taken {       border-color: #c95a65;       box-shadow: 0 0 0 3px rgba(209, 78, 90, 0.2);     }     input#regMbrId.id-check-taken:focus {       border-color: #c95a65;       box-shadow: 0 0 0 4px rgba(209, 78, 90, 0.22);     }     input#regMbrId.id-check-available {       border-color: #2a9d6c;       box-shadow: 0 0 0 3px rgba(30, 140, 98, 0.18);     }     input#regMbrId.id-check-available:focus {       border-color: #2a9d6c;       box-shadow: 0 0 0 4px rgba(30, 140, 98, 0.22);     }      .btn {       display: block;       width: 100%;       border-radius: 12px;       padding: 13px;       font-size: 0.95rem;       font-weight: 800;       border: none;       cursor: pointer;       font-family: inherit;       transition: transform .2s, box-shadow .2s, opacity .2s;     }     .btn-primary {       background: var(--pet-gradient); color: #fff;       box-shadow: 0 14px 24px rgba(255,107,107,0.28);     }     .btn-primary:hover {       transform: translateY(-1px);       box-shadow: 0 18px 28px rgba(255,107,107,0.34);     }     .btn-primary:disabled {       opacity: 0.56; cursor: default;       transform: none; box-shadow: none;     }      .pw-match-msg {       font-size: 0.78rem; margin-top: 6px;       min-height: 1.2em; padding-left: 2px; font-weight: 600;     }     .pw-match-msg.error { color: #d14e5a; }     .pw-match-msg.ok { color: #1e8c62; }     .pw-policy-hint {       font-size: 0.72rem; margin: 4px 0 0; padding-left: 2px;       color: var(--pet-text-sub, #636E72); line-height: 1.35; font-weight: 500;     }      .login-top-nav {       display: flex;       justify-content: flex-start;       margin-bottom: 14px;     }     .link-home {       font-size: 0.8125rem;       font-weight: 600;       letter-spacing: -0.02em;       color: var(--pet-text);       text-decoration: none;       display: inline-flex;       align-items: center;       gap: 8px;       padding: 9px 16px 9px 12px;       border-radius: 999px;       background: rgba(255, 255, 255, 0.72);       border: 1px solid rgba(238, 232, 228, 0.95);       box-shadow:         0 2px 10px rgba(45, 52, 54, 0.05),         0 1px 0 rgba(255, 255, 255, 0.8) inset;       backdrop-filter: blur(12px) saturate(1.15);       -webkit-backdrop-filter: blur(12px) saturate(1.15);       transition: color .2s ease, border-color .2s ease, box-shadow .22s ease, transform .22s ease, background .2s ease;     }     .link-home i {       font-size: 0.72rem;       width: 1.65rem;       height: 1.65rem;       display: inline-flex;       align-items: center;       justify-content: center;       border-radius: 50%;       color: var(--pet-primary);       background: linear-gradient(145deg, rgba(255, 107, 107, 0.14), rgba(255, 142, 83, 0.1));       box-shadow: 0 1px 3px rgba(255, 107, 107, 0.12);     }     .link-home:hover {       color: var(--pet-primary-dark);       border-color: rgba(255, 107, 107, 0.32);       background: rgba(255, 255, 255, 0.92);       box-shadow:         0 6px 24px rgba(255, 107, 107, 0.12),         0 1px 0 rgba(255, 255, 255, 0.9) inset;       transform: translateX(-2px);     }     .link-home:focus-visible {       outline: none;       box-shadow:         0 0 0 3px var(--pet-primary-light),         0 6px 20px rgba(255, 107, 107, 0.1);     }      .btn-secondary {       display: block;       width: 100%;       border-radius: 12px;       padding: 11px 12px;       font-size: 0.88rem;       font-weight: 700;       border: 1.5px solid var(--pet-border);       background: rgba(255,255,255,0.95);       color: var(--pet-primary);       cursor: pointer;       font-family: inherit;       transition: transform .2s, box-shadow .2s, opacity .2s;     }     .btn-secondary:hover:not(:disabled) {       border-color: var(--pet-primary);       background: var(--pet-primary-light);     }     .btn-secondary:disabled {       opacity: 0.5;       cursor: not-allowed;     }     .email-verify-actions {       display: flex;       flex-wrap: wrap;       gap: 8px;       margin-top: 10px;     }     .email-verify-actions .btn-secondary { flex: 1; min-width: 112px; }     .email-countdown {       font-size: 0.82rem;       margin-top: 8px;       font-weight: 600;     }     .email-countdown.expire { color: var(--pet-sub); }     .email-countdown.lock { color: #d14e5a; }     .email-verified-badge {       margin-top: 10px;       padding: 10px 12px;       border-radius: 12px;       font-size: 0.88rem;       font-weight: 700;       background: #e8fff5;       color: #1e8c62;       border: 1px solid #c8f2e1;       display: none;     }     .email-verified-badge.show { display: block; }      /* ── 소셜 로그인 섹션 ── */     .social-section {       margin-bottom: 16px;       overflow: hidden;       opacity: 1;       will-change: height, opacity, margin-bottom;       transition: height 450ms cubic-bezier(0.32, 0.72, 0, 1),                   opacity 300ms ease,                   margin-bottom 450ms cubic-bezier(0.32, 0.72, 0, 1);     }     .social-section.collapsed {       height: 0 !important;       opacity: 0;       margin-bottom: 0;       pointer-events: none;     }     .social-section .btn + .btn {       margin-top: 8px;     }     .social-section .btn {       border-radius: 14px;       transition: transform 0.2s ease, box-shadow 0.2s ease;     }     .social-section .btn:hover {       transform: translateY(-1px);       box-shadow: 0 4px 12px rgba(0,0,0,0.10);     }     .btn-local-toggle {       background: transparent;       color: var(--pet-primary);       border: 2px solid var(--pet-primary);       transition: all 0.3s ease;     }     .btn-local-toggle:hover {       background: var(--pet-primary-light);       transform: translateY(-1px);     }     .btn-local-toggle.active {       background: var(--pet-gradient);       color: #fff;       border-color: transparent;       box-shadow: 0 8px 20px rgba(255,107,107,0.3);     }     .btn-local-toggle.active:hover {       background: var(--pet-gradient);       transform: translateY(-1px);       box-shadow: 0 10px 24px rgba(255,107,107,0.36);     }      .btn-local-toggle .petple-paw-coin {       --paw-coin-size: 1rem;       margin-right: 0.35rem;     }      /* ── 로컬 로그인 섹션 ── */     .local-section {       height: 0;       overflow: hidden;       opacity: 0;       will-change: height, opacity;       transition: height 450ms cubic-bezier(0.32, 0.72, 0, 1),                   opacity 300ms ease 80ms;     }     .local-section.open {       opacity: 1;     }      /* ── Panel slide ── */     .panels-viewport {       position: relative;       overflow: hidden;       transition: height 380ms cubic-bezier(0.22, 1, 0.36, 1);     }      .panel {       width: 100%;       transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1),                   opacity 320ms ease;     }      .panel.is-hidden {       position: absolute;       top: 0; left: 0; right: 0;       opacity: 0;       pointer-events: none;     }      .panel.is-hidden.to-left  { transform: translateX(-28px); }     .panel.is-hidden.to-right { transform: translateX(28px); }      .panel.is-visible {       position: relative;       opacity: 1;       transform: translateX(0);       pointer-events: auto;     }      /* ── Responsive ── */     @media (max-width: 380px) {       body { padding: 10px; }       .login-card { border-radius: 20px; padding: 24px 18px 20px; }       .brand-title { font-size: 1.4rem; }     }      @media (min-width: 640px) {       body { padding: 28px; }       .login-shell { max-width: 540px; }       .login-card { border-radius: 30px; padding: 36px 32px 30px; }       .brand-title { font-size: 1.75rem; }       .brand-sub { font-size: 0.9rem; }       .tabs button { padding: 12px 10px; font-size: 0.95rem; }       input[type="text"],       input[type="password"],       input[type="email"],       input[type="tel"] { font-size: 0.97rem; padding: 13px 15px; }     }      @media (min-width: 1024px) {       body {         padding: 36px;         background:           radial-gradient(circle at 8% 18%, rgba(255,107,107,0.24), transparent 34%),           radial-gradient(circle at 92% 14%, rgba(255,182,102,0.22), transparent 34%),           radial-gradient(circle at 80% 84%, rgba(255,107,107,0.18), transparent 34%),           var(--pet-bg);       }       .login-shell {         max-width: 1060px;         display: grid;         grid-template-columns: 1fr 480px;         gap: 28px;         align-items: stretch;       }       .login-card { width: 100%; }       .login-hero {         display: flex; position: relative; z-index: 1;         border-radius: 30px;         background: linear-gradient(145deg, rgba(255,255,255,0.72), rgba(255,255,255,0.36)), var(--pet-gradient);         border: 1px solid rgba(255,255,255,0.62);         box-shadow: 0 28px 58px rgba(255,107,107,0.20);         overflow: hidden; padding: 36px; color: #fff;         flex-direction: column; justify-content: space-between;       }       .login-hero::before,       .login-hero::after {         content: ''; position: absolute; border-radius: 50%; pointer-events: none;       }       .login-hero::before { width: 220px; height: 220px; right: -70px; top: -70px; background: rgba(255,255,255,0.20); }       .login-hero::after { width: 190px; height: 190px; left: -60px; bottom: -76px; background: rgba(255,255,255,0.16); }       .hero-paw {         position: relative; z-index: 1;         width: 56px; height: 56px; border-radius: 50%;         background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3);         display: inline-flex; align-items: center; justify-content: center;       }       .hero-paw .petple-paw-coin { --paw-coin-size: 1.7rem; }       .hero-title {         position: relative; z-index: 1; margin: 0;         font-size: 2rem; line-height: 1.25; font-weight: 800;         letter-spacing: -0.02em; white-space: pre-line;       }       .hero-sub {         position: relative; z-index: 1; margin: 14px 0 0;         font-size: 1rem; line-height: 1.7; color: rgba(255,255,255,0.92);       }       .hero-badges {         position: relative; z-index: 1; margin-top: 24px;         display: flex; flex-wrap: wrap; gap: 10px;       }       .hero-badge {         background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.28);         backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);         border-radius: 999px; padding: 8px 12px;         font-size: 0.8rem; font-weight: 600;         display: inline-flex; align-items: center; gap: 6px;       }       .hero-badge .petple-paw-coin { --paw-coin-size: 1rem; }       .bg-orb.orb-1 { width: 170px; height: 170px; top: -36px; left: auto; right: 30%; }       .bg-orb.orb-2 { width: 190px; height: 190px; right: -36px; bottom: -34px; }     }      @media (min-width: 1440px) {       .login-shell { max-width: 1200px; grid-template-columns: 1fr 520px; gap: 36px; }       .login-hero { padding: 42px; }       .hero-title { font-size: 2.25rem; }     }      @media (prefers-reduced-motion: reduce) {       .panels-viewport, .panel, .tabs button, .btn, .local-section, .social-section {         transition: none !important;       }     }      /* toast-common.js — 로그인 페이지는 main.css 미로드이므로 동일 톤으로 정의 */     .app-toast {       position: fixed;       bottom: 24px;       left: 50%;       transform: translateX(-50%) translateY(20px);       background: var(--pet-text);       color: #fff;       padding: 12px 20px;       border-radius: 30px;       font-size: 0.88rem;       font-weight: 600;       z-index: 9990;       opacity: 0;       pointer-events: none;       transition: opacity 0.3s, transform 0.3s;       max-width: min(92vw, 420px);       text-align: center;       line-height: 1.45;       white-space: normal;       box-shadow: 0 8px 24px rgba(0,0,0,0.15);     }     .app-toast.show {       opacity: 1;       transform: translateX(-50%) translateY(0);       pointer-events: auto;     }     .app-toast-success { background: #27ae60; }     .app-toast-error { background: var(--pet-primary-dark); }

.social-login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.93rem;
}

.social-login-btn--google {
  background: #fff;
  color: #3c4043;
  border: 1px solid #dadce0;
}

.social-login-btn--naver {
  background: #03C75A;
  color: #fff;
  border: 1px solid #03C75A;
}

.social-login-btn--kakao {
  background: #FEE500;
  color: #000;
  border: 1px solid #FEE500;
  margin-top: 8px;
}

.social-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 0;
}

.social-divider-line {
  flex: 1;
  height: 1px;
  background: var(--pet-border);
}

.social-divider-text {
  font-size: 0.82rem;
  color: var(--pet-muted);
  font-weight: 600;
}

.btn-local-toggle-spaced {
  margin-bottom: 16px;
}

.form-group--compact {
  margin-top: 12px;
  margin-bottom: 0;
}

.btn-secondary--spaced {
  margin-top: 8px;
}

/* 개인정보처리방침 등 정책 링크 — 로그인 카드 최하단 */
.login-policy-links {
  margin: 20px 0 0;
  text-align: center;
  font-size: 13px;
  color: #9ca3af;
}
.login-policy-links a {
  color: #6b7280;
  text-decoration: none;
  padding: 4px 8px;
}
.login-policy-links a:hover {
  color: var(--pet-primary, #ff8c42);
  text-decoration: underline;
}

/* 로그인 전환은 레이아웃 높이를 애니메이션하지 않고 합성 가능한 속성만 사용한다. */
.social-section {
  height: auto;
  will-change: auto;
  transition: opacity 180ms ease;
}

.social-section.collapsed {
  display: none;
}

.local-section {
  display: none;
  overflow: visible;
  opacity: 1;
  height: auto;
  transition: none;
  will-change: auto;
}

.local-section.open {
  display: block;
}

.panels-viewport {
  position: relative;
  overflow: hidden;
}

.panel {
  width: 100%;
  transition: transform 200ms ease, opacity 180ms ease;
}

/* 모바일 WebView에서는 카드 전체를 다시 합성하는 블러와 큰 그림자를 피한다. */
@media (max-width: 639px) {
  body {
    align-items: flex-start;
  }

  .login-card {
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 8px 24px rgba(45, 52, 54, 0.08);
  }

  .link-home {
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .bg-orb {
    filter: none;
  }
}