/* ============================================================
   GALLA UI — 공용 디자인 시스템 오버라이드 (게임 톤앤매너)
   설정/대전모드 팔레트: 파랑 #3d6bff / 빨강 #ff4d67 / 골드 #c9d1e0 / 배경 #0a0a0b
   각 페이지의 기존 CSS "뒤에" 로드해 기존 클래스명을 재스킨한다.
   대상: account-edit, galla-type, grade, quest, change-password,
         login-history, support, terms, privacy
============================================================ */

/* ===== 베이스 ===== */
body {
  background: radial-gradient(120% 80% at 50% -10%, #14141a 0%, #0a0a0b 55%) !important;
  color: #f5f5f2 !important;
  -webkit-font-smoothing: antialiased;
}

/* ===== 통일 헤더 (st-header — 설정 페이지와 동일) ===== */
.st-header {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  min-height: 56px; padding: 0 10px;
  padding-top: env(safe-area-inset-top); /* 노치/상태바 아래로 — 없으면 뒤로가기 버튼이 상태바에 깔림(사장님 제보) */
  box-sizing: border-box;
  background: rgba(10,10,11,.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.st-back {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; color: #e7e9ef;
}
.st-back svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.st-back:active { background: #14161d; }
.st-title { font-size: 16px; font-weight: 900; letter-spacing: -.2px; color: #f5f5f2; }
.st-main { padding: 14px 16px 130px; }
.st-label { margin: 24px 4px 10px; font-size: 12px; font-weight: 900; letter-spacing: .5px; color: #8b8b93; }

/* ===== 섹션 라벨 ===== */
.section-title {
  font-size: 12px !important; font-weight: 900 !important;
  letter-spacing: .5px; color: #8b8b93 !important;
  margin-bottom: 10px !important;
}

/* ===== 카드류 공통 ===== */
.card, .info-box, .log-card {
  background: linear-gradient(180deg, #131418, #0c0c0f) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 16px !important;
}

/* ===== 입력 ===== */
.input-label { font-size: 12px !important; font-weight: 800 !important; color: #8b90a0 !important; }
.input-field {
  background: #101116 !important;
  border: 1px solid #23252f !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-size: 15px !important;
}
.input-field:focus {
  outline: none;
  border-color: #3d6bff !important;
  box-shadow: 0 0 0 3px rgba(61,107,255,.15);
}
.input-field::placeholder { color: #4c5061; }

/* ===== 버튼 ===== */
.save-btn, .primary-btn {
  background: linear-gradient(135deg, #3d6bff, #2b4fd0) !important;
  border-radius: 12px !important;
  font-weight: 900 !important;
  box-shadow: 0 8px 22px -8px rgba(61,107,255,.55);
  transition: transform .1s ease;
}
.save-btn:active, .primary-btn:active { transform: scale(.985); }

/* ============================================================
   페이지별 하모나이즈
============================================================ */

/* ---- 로그인 기록 ---- */
.log-date { color: #c9d1e0 !important; font-weight: 800; font-size: 12px !important; }
.log-agent { color: #c9c9cf !important; font-size: 13px !important; line-height: 1.5; }
.log-card { padding: 15px 16px !important; }

/* ---- 등급/퀘스트/성향: 각 페이지 CSS(grade.css/quest.css/galla-type.css)가
        게임 톤을 자체 구현 — 여기선 오버라이드하지 않는다 ---- */

/* ---- 약관/개인정보 (문서 페이지: .terms / .policy) ---- */
.terms, .policy {
  color: #c9c9cf !important; font-size: 13.5px !important; line-height: 1.75 !important;
  background: linear-gradient(180deg, #131418, #0c0c0f);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px; padding: 18px 16px;
}
.terms h2, .policy h2, .terms h3, .policy h3 {
  font-size: 14px !important; font-weight: 900 !important; color: #f5f5f2 !important;
  margin: 20px 0 8px !important;
}
.terms h2:first-child, .policy h2:first-child { margin-top: 0 !important; }
.terms ul, .policy ul, .terms ol, .policy ol { padding-left: 18px; }
.policy .meta, .terms .meta { color: #6c6c72; font-size: 12px; }

/* ---- 문의하기 ---- */
.textarea { min-height: 120px; }
.info-box { color: #9a9aa0 !important; font-size: 13px !important; line-height: 1.6 !important; padding: 15px 16px !important; }

/* ============================================================
   🎨 닉네임 골드(nick_deco) — 보유자 닉네임 골드 반짝임 (전역)
   supabase.js가 닉네임 요소에 .nick-gold 를 자동 부여
   ============================================================ */
.nick-gold {
  background: linear-gradient(92deg, #f7d774 0%, #fff2b8 20%, #e8a93a 45%, #ffe89a 65%, #d98f24 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  font-weight: 900 !important;
  text-shadow: 0 0 10px rgba(201,209,224,.35);
  animation: nickGoldShine 3.4s linear infinite;
}
.nick-gold::after { content: " 👑"; -webkit-text-fill-color: initial; color: #c9d1e0; font-size: .82em; text-shadow: none; }
@keyframes nickGoldShine { 0% { background-position: 0% 0; } 100% { background-position: 220% 0; } }
@media (prefers-reduced-motion: reduce) { .nick-gold { animation: none; } }

/* 🏷️ 장착 칭호 배지 (닉네임 앞) — supabase.js가 자동 삽입 */
.nick-title {
  display: inline-block; font-size: .72em; font-weight: 900; vertical-align: middle;
  color: #c9d1e0; background: rgba(201,209,224,.14); border: 1px solid rgba(201,209,224,.35);
  border-radius: 99px; padding: 1px 7px; margin-right: 5px; line-height: 1.5; white-space: nowrap;
}

/* 🎨 닉네임 스타일 팩 (ns-*) — supabase.js가 장착 스타일 클래스 자동 부여 */
.ns-neon, .ns-ice, .ns-fire, .ns-toxic, .ns-royal, .ns-rainbow {
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  font-weight: 900 !important; background-size: 200% 100%;
}
.ns-neon  { background-image: linear-gradient(92deg,#00e5ff,#3d6bff,#00e5ff); text-shadow: 0 0 10px rgba(0,229,255,.5); animation: nsShine 3s linear infinite; }
.ns-ice   { background-image: linear-gradient(92deg,#bfefff,#7fd4ff,#e8f8ff,#9fd8ff); text-shadow: 0 0 8px rgba(150,220,255,.45); animation: nsShine 4s linear infinite; }
.ns-fire  { background-image: linear-gradient(92deg,#ffd24a,#ff6a00,#ff2d2d,#ff9a3d); text-shadow: 0 0 10px rgba(255,90,0,.5); animation: nsShine 2.2s linear infinite; }
.ns-toxic { background-image: linear-gradient(92deg,#b6ff2e,#39d17a,#c9ff4a); text-shadow: 0 0 9px rgba(120,230,80,.5); animation: nsShine 3s linear infinite; }
.ns-royal { background-image: linear-gradient(92deg,#c9a3ff,#7b5cff,#a17bff,#e0c9ff); text-shadow: 0 0 10px rgba(150,110,255,.5); animation: nsShine 3.4s linear infinite; }
.ns-rainbow { background-image: linear-gradient(92deg,#ff4f6e,#ffcf6b,#4fd17a,#4fc3f7,#a17bff,#ff4f6e); background-size:300% 100%; animation: nsShine 2.4s linear infinite; }
@keyframes nsShine { 0%{background-position:0% 0} 100%{background-position:200% 0} }
@media (prefers-reduced-motion: reduce){ .ns-neon,.ns-ice,.ns-fire,.ns-toxic,.ns-royal,.ns-rainbow{ animation:none; } }