.auth-page #header a { border-bottom:none; text-decoration:none; box-shadow:none; }

/* ===== 계정 페이지 레이아웃 고정 ===== */
body.auth-page #header {
  position: relative;
  height: auto;
  min-height: unset;
  padding: 3rem 1rem 0.5rem;
  text-align: center;
}

/* Dimension 데코 라인/애니메이션 영향 제거 */
body.auth-page #header:before,
body.auth-page #header:after { display: none !important; }
body.auth-page #header .content .inner { transform: none !important; opacity: 1 !important; }

/* 뒤에 깔리는 메인 article 확실히 보이게 */
body.auth-page #main { 
  display: block !important;
  padding: 0 1rem 3rem;
  margin-top: 0.75rem;            /* 헤더와 간격 */
}
body.auth-page #main > article {
  display: block !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ===== 카드 ===== */
.auth-card {
  max-width: 640px;               /* 한 화면에 수렴 */
  margin: 1rem auto 3rem;
  padding: 1.5rem;
  border-radius: 10px;
  background: rgba(12,16,22,0.88);/* 테마 톤 유지 */
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}

/* ===== 폼 ===== */
.auth-card .fields { gap: 1rem; }
.auth-card .field { margin-bottom: 1.1rem; }
.auth-card .field label { display: block; margin-bottom: .35rem; }
.auth-card input[type="text"],
.auth-card input[type="password"],
.auth-card input[type="email"],
.auth-card textarea,
.auth-card select {
  width: 100%;
  box-sizing: border-box;
}

/* 버튼 영역 중앙 정렬 */
.auth-card .actions {
  display: flex; 
  gap: .5rem; 
  justify-content: center; 
  flex-wrap: wrap;
}

/* ===== Back 링크 - 겹침 방지, 중앙 배치 ===== */
.auth-nav { 
  margin: .75rem 0 0;
  text-align: center;
}
.auth-nav .back-link {
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  border-bottom: 1px dotted rgba(255,255,255,0.5);
}

/* Theme-aligned auth layout */
body.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ct-body-bg, #f5f7fb); /* use theme background (light by default) */
}
#wrapper { width: 100%; }
/* Header with logo and a quick link to main page */
#header.auth-header {
  display:flex; align-items:center; justify-content:space-between;
  max-width: 560px; margin: 0 auto 12px; padding: 0 8px;
}
#main { display:flex; justify-content:center; padding: 16px; }
.auth-card {
  width: 100%;
  max-width: 560px;
  padding: 24px 28px;
  border-radius: 14px;
  background: var(--ct-card-bg, #ffffff);
  border: 1px solid var(--ct-border-color, rgba(0,0,0,0.06));
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}
#footer { text-align:center; margin-top: 18px; color: #6b7280; }
.flash { font-size:.8rem; padding:.6rem .75rem; border-radius:8px; margin-bottom:.6rem; line-height:1.25; font-weight:500; letter-spacing:.02em; }
.flash-info { background:#e8f2ff; color:#1e3a8a; border:1px solid #bfdbfe; }
.flash-success { background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0; }
.flash-warning { background:#fffbeb; color:#92400e; border:1px solid #fde68a; }
.flash-error, .flash-danger { background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }
/* Normalize app-specific .button */
.button { display:inline-flex; align-items:center; justify-content:center; border-radius:10px; padding:.65rem 1rem; font-weight:600; border:1px solid transparent; transition: box-shadow .12s ease, transform .06s ease, filter .12s ease; }
.button.primary {
  color: #fff;
  background: linear-gradient(135deg, #6C5CE7 0%, #4A6CF7 100%);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 6px 14px rgba(76, 99, 247, 0.25);
}
.button.primary:hover { filter: none; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(76, 99, 247, 0.33); }
.button.primary:active { transform: translateY(0); box-shadow: 0 4px 10px rgba(76, 99, 247, 0.22); }
.button.primary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(74,108,247,.24), 0 6px 14px rgba(76, 99, 247, 0.25); }
/* Distinct color for '메인으로' buttons */
.button.home {
  color: #fff;
  background: linear-gradient(135deg, #06b6d4 0%, #10b981 100%); /* cyan → emerald */
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 6px 14px rgba(16, 185, 129, 0.25);
}
.button.home:hover { filter: none; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(16, 185, 129, 0.33); }
.button.home:active { transform: translateY(0); box-shadow: 0 4px 10px rgba(16, 185, 129, 0.22); }
.button.home:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(16,185,129,.24), 0 6px 14px rgba(16, 185, 129, 0.25); }
.button.secondary { 
  background: transparent; 
  color: var(--ct-body-color, #111827); 
  border-color: var(--ct-border-color, rgba(0,0,0,0.12)); 
}
.button.secondary:hover { background: rgba(0,0,0,0.03); }

/* Danger button styling for account deletion */
.button.danger {
  color: #fff;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); /* red gradient */
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 6px 14px rgba(239, 68, 68, 0.25);
}
.button.danger:hover { 
  filter: none; 
  transform: translateY(-1px); 
  box-shadow: 0 8px 18px rgba(239, 68, 68, 0.33); 
}
.button.danger:active { 
  transform: translateY(0); 
  box-shadow: 0 4px 10px rgba(239, 68, 68, 0.22); 
}
.button.danger:focus-visible { 
  outline: none; 
  box-shadow: 0 0 0 3px rgba(239,68,68,.24), 0 6px 14px rgba(239, 68, 68, 0.25); 
}

/* Logout button styling - teal/cyan gradient */
.button.logout {
  color: #fff;
  background: linear-gradient(135deg, #14b8a6 0%, #0891b2 100%); /* teal to sky blue gradient */
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 6px 14px rgba(20, 184, 166, 0.25);
}
.button.logout:hover { 
  filter: none; 
  transform: translateY(-1px); 
  box-shadow: 0 8px 18px rgba(20, 184, 166, 0.33); 
}
.button.logout:active { 
  transform: translateY(0); 
  box-shadow: 0 4px 10px rgba(20, 184, 166, 0.22); 
}
.button.logout:focus-visible { 
  outline: none; 
  box-shadow: 0 0 0 3px rgba(20,184,166,.24), 0 6px 14px rgba(20, 184, 166, 0.25); 
}

/* Enhanced secondary button for password change */
.button.secondary.accent {
  color: #fff;
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); /* violet gradient */
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 6px 14px rgba(139, 92, 246, 0.25);
}
.button.secondary.accent:hover { 
  filter: none; 
  transform: translateY(-1px); 
  box-shadow: 0 8px 18px rgba(139, 92, 246, 0.33); 
}
.button.secondary.accent:active { 
  transform: translateY(0); 
  box-shadow: 0 4px 10px rgba(139, 92, 246, 0.22); 
}
.button.secondary.accent:focus-visible { 
  outline: none; 
  box-shadow: 0 0 0 3px rgba(139,92,246,.24), 0 6px 14px rgba(139, 92, 246, 0.25); 
}

.go-home.btn { padding: .35rem .6rem; border-radius: 8px; }
/* Slim variant for stacked auth actions */
.button.thin { padding: .38rem .8rem !important; border-radius: 8px; font-size: .9rem; line-height: 1.15; }
/* Auth input restyle */
.fields { margin-top: .25rem; }
.fields .field { margin-bottom: .8rem; }
.field label { display:block; font-weight:600; font-size:.85rem; margin-bottom:.35rem; color: #374151; }
.field .error { color: #b91c1c; font-size: .8rem; margin-top: .3rem; }
.auth-card input[type="text"],
.auth-card input[type="password"],
.auth-card input[type="email"],
.auth-card input[type="tel"] {
  appearance: none;
  width: 100%;
  padding: .56rem .9rem .56rem 2.2rem; /* extra left for icon */
  border: 1px solid var(--ct-border-color, rgba(0,0,0,0.14));
  background: var(--ct-input-bg, #fff);
  color: var(--ct-body-color, #111827);
  border-radius: 12px;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
  font-size: .95rem;
}
.auth-card input::placeholder { color: #9ca3af; }
.auth-card input:hover { background: rgba(0,0,0,0.02); }
.auth-card input:focus {
  outline: none;
  border-color: var(--ct-primary, #4a6cf7);
  box-shadow: 0 0 0 3px rgba(74,108,247,.14);
  background: var(--ct-input-bg, #fff);
}
/* Subtle field icons */
.auth-card input[name="user_id"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%2399a3b0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M20 21a8 8 0 1 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: .7rem center;
  background-size: 1rem;
}
.auth-card input[name="password"],
.auth-card input[type="password"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%2399a3b0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: .7rem center;
  background-size: 1rem;
}

/* ===== 모바일 최적화 ===== */
@media (max-width: 768px) {
  body.auth-page #header { padding-top: 2.2rem; }
  .auth-card { margin: .5rem auto 2rem; padding: 1.1rem; max-width: 92vw; }
}

/* 아주 작은 화면에서 폰트/간격 약간 축소 */
@media (max-width: 420px) {
  .auth-card { padding: .9rem; }
  .auth-card .field { margin-bottom: .85rem; }
}