/* ============================================================
   「횃불」(torch) — 검은 배경 / 흰 텍스트 / 앰버 강조 테마
   접두어 hb-  (다른 게임과 충돌 방지)
   ============================================================ */
:root{
  --hb-bg:      #0b0b0d;
  --hb-bg2:     #141417;
  --hb-bg3:     #1c1c21;
  --hb-text:    #e9e6df;
  --hb-muted:   #8a867d;
  --hb-accent:  #ff9d3c;   /* 횃불 불빛 */
  --hb-accent2: #ffd18a;   /* 밝은 불꽃 */
  --hb-danger:  #e0533d;
  --hb-ok:      #7bbf6a;
  --hb-line:    #26262b;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
.hb-body{
  background:var(--hb-bg);
  color:var(--hb-text);
  font-family:-apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
              "Malgun Gothic", "Noto Sans KR", sans-serif;
  font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}

/* 로그인 전 배경 이미지 (게임 화면에는 적용 안 함) */
.hb-body-auth{
  background-color:var(--hb-bg);
  background-image:
    linear-gradient(180deg, rgba(11,11,13,.68) 0%, rgba(11,11,13,.50) 42%, rgba(11,11,13,.92) 100%),
    url(../img/bg.jpg);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;
}

/* 모바일 세로 기준 중앙 컬럼 */
.hb-app{
  max-width:480px;
  min-height:100%;
  margin:0 auto;
  padding:28px 20px 40px;
  display:flex; flex-direction:column;
}

/* ── 로고 / 헤더 ─────────────────────────────── */
.hb-brand{ text-align:center; margin-bottom:22px; }
.hb-flame{
  width:56px; height:56px; display:inline-block;
  filter:drop-shadow(0 0 10px rgba(255,157,60,.45));
  animation:hb-flicker 2.6s ease-in-out infinite;
}
@keyframes hb-flicker{
  0%,100%{ opacity:1;   transform:scale(1); }
  45%    { opacity:.86; transform:scale(1.04) translateY(-1px); }
  70%    { opacity:.95; transform:scale(.98); }
}
.hb-flame-outer{ fill:var(--hb-accent); }
.hb-flame-inner{ fill:var(--hb-accent2); }
.hb-title{
  font-size:28px; font-weight:800; letter-spacing:.22em;
  margin-top:8px; color:var(--hb-text);
}
.hb-subtitle{ color:var(--hb-muted); font-size:13px; letter-spacing:.05em; margin-top:4px; }

/* ── 카드 ─────────────────────────────────────── */
.hb-card{
  background:var(--hb-bg2);
  border:1px solid var(--hb-line);
  border-radius:14px;
  padding:22px 20px;
}

/* ── 탭 ───────────────────────────────────────── */
.hb-tabs{ display:flex; gap:6px; margin-bottom:18px; }
.hb-tab{
  flex:1; padding:11px 0; text-align:center; cursor:pointer;
  background:transparent; color:var(--hb-muted);
  border:1px solid var(--hb-line); border-radius:10px;
  font-size:15px; font-weight:600; transition:.15s;
}
.hb-tab.is-active{
  color:var(--hb-bg); background:var(--hb-accent);
  border-color:var(--hb-accent);
}

/* ── 폼 ───────────────────────────────────────── */
.hb-field{ margin-bottom:14px; }
.hb-label{ display:block; font-size:13px; color:var(--hb-muted); margin-bottom:6px; }
.hb-input{
  width:100%; padding:13px 14px;
  background:var(--hb-bg3); color:var(--hb-text);
  border:1px solid var(--hb-line); border-radius:10px;
  font-size:16px; /* iOS 확대 방지 */
}
.hb-input:focus{ outline:none; border-color:var(--hb-accent); }
.hb-input::placeholder{ color:#55524c; }

/* 허니팟 — 화면 밖으로 숨김 */
.hb-hp{
  position:absolute !important; left:-9999px !important;
  width:1px; height:1px; overflow:hidden; opacity:0;
}

/* ── 버튼 ─────────────────────────────────────── */
.hb-btn{
  width:100%; padding:14px 0; margin-top:4px;
  background:var(--hb-accent); color:#1a1206;
  border:none; border-radius:10px;
  font-size:16px; font-weight:800; letter-spacing:.03em;
  cursor:pointer; transition:.15s;
}
.hb-btn:hover{ background:var(--hb-accent2); }
.hb-btn:disabled{ opacity:.5; cursor:default; }
.hb-btn-ghost{
  background:transparent; color:var(--hb-muted);
  border:1px solid var(--hb-line);
}
.hb-btn-ghost:hover{ background:var(--hb-bg3); color:var(--hb-text); }

/* ── 메시지 ───────────────────────────────────── */
.hb-msg{ min-height:20px; margin-top:12px; font-size:13px; text-align:center; color:var(--hb-muted); }
.hb-msg-err{ color:var(--hb-danger); }
.hb-msg-ok{ color:var(--hb-ok); }

.hb-help{ margin-top:14px; font-size:12px; color:var(--hb-muted); text-align:center; line-height:1.7; }

/* ── 로그인 후 placeholder(임시) ───────────────── */
.hb-welcome{ text-align:center; }
.hb-welcome .hb-name{ color:var(--hb-accent); font-weight:800; }
.hb-note{
  margin:18px 0; padding:14px; border:1px dashed var(--hb-line);
  border-radius:10px; color:var(--hb-muted); font-size:13px;
}
.hb-foot{ margin-top:26px; text-align:center; }
.hb-link{ color:var(--hb-muted); font-size:13px; text-decoration:none; border-bottom:1px solid var(--hb-line); }
.hb-link:hover{ color:var(--hb-accent); }

/* ── 회원가입 중복확인 ── */
.hb-checkrow{ display:flex; gap:6px; align-items:stretch; }
.hb-checkrow .hb-input{ flex:1; min-width:0; }
.hb-checkbtn{
  flex-shrink:0; padding:0 12px; font-size:12.5px; font-weight:700; font-family:inherit;
  background:transparent; color:var(--hb-muted);
  border:1px solid var(--hb-line); border-radius:10px; cursor:pointer; transition:.15s; white-space:nowrap;
}
.hb-checkbtn:hover{ color:var(--hb-accent); border-color:var(--hb-accent); }
.hb-checkbtn:disabled{ opacity:.5; cursor:default; }
.hb-checkmsg{ font-size:12px; margin-top:5px; min-height:14px; }
.hb-checkmsg.is-ok{ color:var(--hb-ok); }
.hb-checkmsg.is-err{ color:var(--hb-danger); }