/* 쭈삐여퐈 테마: 로그인·회원가입·승인 대기·비밀번호 변경 화면 */
:root {
  color-scheme: light; /* 휴대폰 다크 모드에서도 시안 색 유지 */
  --cream: #fdf3db;
  --cream-deep: #fdeccb;
  --cloud: #fdd683;
  --cloud-soft: #fee5ad;
  --card: #fffaf0;
  --card-line: #f4dfb3;
  --ink: #4a2e1f;
  --ink-soft: #5e4231;
  --muted: #85674d; /* 크림 배경에서도 또렷하게 (대비 4.5:1 이상) */
  --input: #fffdf7;
  --input-line: #eedcbc;
  --yellow: #fdcf6b;
  --yellow-deep: #fbc555;
  --err: #c4452f;
  --ok: #4f8a3c;
}

[hidden] { display: none !important; }

html, body { margin: 0; min-height: 100%; }

body.auth {
  min-height: 100vh;
  overflow-x: hidden;
  /* 본문은 시스템 글꼴(윈도우: 맑은 고딕) — 작은 글씨가 가장 선명. 제목·버튼만 Jua */
  font-family: system-ui, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif;
  color: var(--ink);
  word-break: keep-all; /* 한글을 단어 단위로 줄바꿈 */
  overflow-wrap: anywhere;
  background-color: var(--cream);
  /* 그림 밖은 시안과 비슷한 구름 배경으로 채운다 (그림은 원본 크기 이상으로 늘리지 않음) */
  background-image:
    radial-gradient(ellipse 34% 26% at 0% 100%, var(--cloud) 0 60%, transparent 61%),
    radial-gradient(ellipse 30% 24% at 100% 100%, var(--cloud) 0 60%, transparent 61%),
    radial-gradient(ellipse 60% 22% at 50% 108%, var(--cloud-soft) 0 60%, transparent 61%),
    radial-gradient(ellipse 22% 30% at 0% 52%, var(--cloud-soft) 0 60%, transparent 61%),
    radial-gradient(ellipse 20% 28% at 100% 46%, var(--cloud-soft) 0 60%, transparent 61%),
    radial-gradient(ellipse 18% 16% at 8% 4%, #fee9bd 0 60%, transparent 61%),
    radial-gradient(ellipse 16% 14% at 94% 6%, #fee9bd 0 60%, transparent 61%),
    linear-gradient(var(--cream), var(--cream-deep));
}

.auth-wrap {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  max-width: 500px;
  margin: 0 auto;
  padding: 16px 16px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.auth-logo {
  display: block;
  width: 100%;
  max-width: 500px; /* 원본 크기 */
  height: auto;
  margin-bottom: -14px; /* 시안처럼 카드 위에 살짝 걸치게 */
  pointer-events: none;
  user-select: none;
}

.auth-card {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 440px;
  padding: 28px 26px 24px;
  background: var(--card);
  border: 2px solid var(--card-line);
  border-radius: 24px;
  box-shadow: 0 10px 28px rgba(190, 140, 50, .16);
}

.auth-title {
  margin: 0 0 6px;
  text-align: center;
  font-family: 'Jua', sans-serif;
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--ink-soft);
}
.auth-title b { color: var(--ink); font-weight: 400; }
.auth-title .spark { color: var(--yellow-deep); }

.auth-desc {
  margin: 0 0 18px;
  text-align: center;
  font-size: .92rem;
  color: var(--muted);
  line-height: 1.5;
}

.msg {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: .9rem;
  line-height: 1.45;
}
.msg.err { background: #fdebe5; color: var(--err); }
.msg.ok { background: #eef6e6; color: var(--ok); }

.field {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 0 18px;
  margin-top: 12px;
  background: var(--input);
  border: 1.5px solid var(--input-line);
  border-radius: 999px;
  transition: border-color .15s, box-shadow .15s;
}
.field:first-of-type { margin-top: 0; }
.field:focus-within {
  border-color: var(--yellow-deep);
  box-shadow: 0 0 0 3px rgba(251, 197, 85, .3);
}
.field.invalid { border-color: var(--err); }
.field svg { flex: none; width: 18px; height: 18px; fill: var(--ink); }
.field input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 16px; /* 16px 미만이면 아이폰이 입력할 때 화면을 확대함 */
  color: var(--ink);
}
.field input::placeholder { color: var(--muted); }

.field-err { margin: 6px 18px 0; font-size: .82rem; color: var(--err); }
.field-hint { margin: 6px 18px 0; font-size: .82rem; color: var(--muted); }

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 52px;
  border-radius: 999px;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .08s, filter .15s;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  position: relative;
  margin-top: 18px;
  border: 2px solid var(--ink);
  background: var(--yellow);
  color: var(--ink);
  font-family: 'Jua', sans-serif;
  font-size: 1.2rem;
}
.btn-primary::after {
  content: '→';
  position: absolute;
  right: 22px;
  font-size: 1rem;
  color: var(--ink-soft);
}
.btn-primary:hover { filter: brightness(1.04); }

.btn-secondary {
  height: 50px;
  border: 1.5px solid var(--input-line);
  background: var(--input);
  color: var(--ink);
  font-weight: 600;
}
.btn-secondary:hover { border-color: var(--yellow-deep); }

.auth-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-top: 14px;
  font-size: .88rem;
}
.auth-row .check { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.auth-row input[type=checkbox] { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); }
.auth-row .hint { color: var(--muted); }

.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 14px;
  font-size: .85rem;
  color: var(--muted);
}
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--input-line); }

.auth-foot {
  margin: 24px 0 0;
  font-size: .95rem;
  color: var(--ink-soft); /* 진한 구름 위에 놓여서 한 단계 진하게 */
  text-align: center;
}
.auth-foot .heart { color: var(--yellow-deep); }

/* 구석 병아리: 원본 크기를 넘지 않게, 카드 뒤(z-index 0)에서 고개를 내민다 */
.auth-corner {
  position: fixed;
  bottom: 0;
  z-index: 0;
  height: auto;
  pointer-events: none;
  user-select: none;
}
.auth-corner.left { left: 0; width: min(30vw, 450px); }
.auth-corner.right { right: 0; width: min(24vw, 366px); }

/* 모바일: 구석 병아리는 입력칸을 가리므로 숨기고, 로고는 화면 폭에 맞춘다 */
@media (max-width: 760px) {
  .auth-corner { display: none; }
  .auth-wrap { padding-top: 8px; }
  .auth-card { padding: 24px 18px 20px; border-radius: 22px; }
}

/* 낮은 화면(가로 모드 휴대폰 등): 로고를 줄여 카드가 바로 보이게 */
@media (max-height: 560px) {
  .auth-logo { max-width: 260px; }
  .auth-corner { display: none; }
}

/* ---- 유저 홈 ---- */
.topbar {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 10px 16px;
  background: var(--card); /* 흐림 효과(backdrop-filter)는 글자까지 흐리게 렌더링되는 경우가 있어 단색 */
  border-bottom: 1.5px solid var(--card-line);
}
.topbar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Jua', sans-serif;
  font-size: 1.25rem;
  color: var(--ink);
  text-decoration: none;
}
.topbar-brand img { border-radius: 10px; }
.topbar-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: .92rem; }
.topbar-nav a { color: var(--ink-soft); text-decoration: none; }
.topbar-nav a:hover { color: var(--ink); text-decoration: underline; }
.topbar-nav .who { color: var(--muted); }
.topbar-nav form { margin: 0; }
.topbar-nav button {
  padding: 5px 12px;
  border: 1.5px solid var(--input-line);
  border-radius: 999px;
  background: var(--input);
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}

.home-wrap {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  max-width: 980px;
  margin: 0 auto;
  padding: 12px 16px 48px;
}
.home-hero { display: flex; flex-direction: column; align-items: center; text-align: center; }
.home-hero .auth-logo { max-width: 300px; margin-bottom: 0; }
.home-hero h1 { margin: 4px 0 4px; font-family: 'Jua', sans-serif; font-weight: 400; font-size: 1.5rem; }
.home-hero p { margin: 0 0 20px; color: var(--muted); }

.server-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
}
.server-card {
  box-sizing: border-box;
  padding: 20px 20px 18px;
  background: var(--card);
  border: 2px solid var(--card-line);
  border-radius: 22px;
  box-shadow: 0 8px 22px rgba(190, 140, 50, .14);
}
.server-head { display: flex; align-items: center; gap: 10px; }
.server-head h2 { margin: 0; font-family: 'Jua', sans-serif; font-weight: 400; font-size: 1.35rem; }
.badge {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 700; /* 작은 글씨는 Jua 대신 시스템 글꼴 굵게 (Jua 는 작으면 뭉개짐) */
}
.badge.on { background: #e6f4dc; color: var(--ok); }
.badge.off { background: #f1ece3; color: var(--muted); }
.dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.dot.on { background: #5cb85c; box-shadow: 0 0 0 4px rgba(92, 184, 92, .2); }
.dot.off { background: #c9bba8; }
.server-desc { margin: 8px 0 0; color: var(--ink-soft); font-size: .92rem; }

.address {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 6px 6px 6px 14px;
  background: var(--input);
  border: 1.5px solid var(--input-line);
  border-radius: 999px;
}
.address code {
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word; /* 자르지 않는다. 줄바꿈은 ':' 앞(<wbr>)에서만 */
  font-family: ui-monospace, Consolas, monospace;
  font-size: .95rem;
  color: var(--ink);
}
.address button {
  flex: none;
  padding: 7px 14px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--yellow);
  font: inherit;
  font-size: .92rem;
  font-weight: 700; /* 좁은 버튼 안 작은 글씨: 시스템 글꼴 굵게가 가장 또렷 */
  color: var(--ink);
  cursor: pointer;
}

.players { margin-top: 14px; }
.players-count { margin: 0 0 8px; font-weight: 700; color: var(--ink-soft); }
.players-empty { margin: 0; color: var(--muted); font-size: .92rem; }
.player-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.player-list li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 4px 4px;
  background: var(--input);
  border: 1.5px solid var(--input-line);
  border-radius: 999px;
  font-size: .92rem;
}
.player-list img { width: 24px; height: 24px; border-radius: 6px; image-rendering: pixelated; }
.home-updated { margin-top: 18px; text-align: center; font-size: .82rem; color: var(--ink-soft); }
@media (max-width: 420px) {
  .address code { font-size: .84rem; }
}