/* ─────────────────────────────────────────────
   실제 앱에서만 쓰는 조각들
   (목업 4종에는 없던 화면 — 번호 인증 · 게시판 · 초대 · 토스트)
   ───────────────────────────────────────────── */

/* ── 부팅 가림막 ───────────────────────────
   토큰을 확인하고 첫 화면을 정하기 전까지 잠깐 덮습니다.
   없으면 온보딩이 번쩍 보였다가 홈으로 바뀝니다. */
.boot {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  background: var(--bg, #0a0612);
  transition: opacity .35s ease;
}
.boot.is-off { opacity: 0; pointer-events: none; }
.boot-heart { font-size: 40px; animation: bootBeat 1.1s ease-in-out infinite; }
@keyframes bootBeat {
  0%, 100% { transform: scale(1);    opacity: .55; }
  50%      { transform: scale(1.18); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .boot-heart { animation: none; } }

/* ── [hidden] 이 실제로 숨기게 만듭니다 ──────
   브라우저 기본값은 [hidden]{display:none} 이지만 명시적인 display 규칙이
   전부 이깁니다(.fld{display:flex} 같은 것). 그래서 JS 로 .hidden=true 를
   줘도 그대로 보이는 요소가 여럿 있었습니다 — 인증번호 칸이 처음부터
   노출되던 게 그 탓입니다. 한 줄로 전부 막습니다. */
[hidden] { display: none !important; }

/* 가로 스크롤 차단은 body 에만 걸려 있어 일부 환경에서 배경 blob 이
   문서 폭을 늘리고 가운데 정렬이 밀립니다. html 에도 함께 겁니다. */
html { overflow-x: hidden; max-width: 100%; }


/* 스캐너로 가는 카드는 실제 링크(<a>)입니다 — 목업에서는 button 이었습니다 */
a.dw-feature { text-decoration: none; }

/* ── 상단 헤더 ─────────────────────────────
   모든 화면에서 같은 자리에 있습니다. 어디서든 돌아갈 길이 보이게. */
.appbar {
  position: fixed; z-index: 72; top: 0; left: 0; right: 0;
  height: calc(var(--safe-t) + 58px);
  padding: var(--safe-t) 62px 0 8px;   /* 오른쪽은 메뉴 버튼 자리 */
  display: flex; align-items: center; gap: 4px;
  background: linear-gradient(180deg, rgba(10, 6, 18, .92), rgba(10, 6, 18, 0));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  pointer-events: none;                /* 배경은 통과, 버튼만 받습니다 */
}
.appbar > * { pointer-events: auto; }

.ab-back {
  width: 42px; height: 42px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 13px;
  background: rgba(20, 8, 34, .7);
  border: 1px solid var(--card-line);
  color: var(--ink); font: inherit; font-size: 17px; cursor: pointer;
  transition: transform .16s ease, border-color .2s ease;
}
.ab-back:active { transform: scale(.94); }
.ab-back:hover { border-color: rgba(255, 61, 129, .5); }

.ab-title {
  display: flex; align-items: center; gap: 6px;
  height: 42px; padding: 0 12px;
  border: 0; border-radius: 13px;
  background: transparent;
  color: var(--ink); font: inherit; cursor: pointer;
  transition: transform .16s ease, background .2s ease;
}
.ab-title:active { transform: scale(.96); }
.ab-title:hover { background: rgba(255, 255, 255, .06); }
.ab-logo { font-size: 16px; line-height: 1; }
.ab-title b { font-size: 14.5px; font-weight: 800; letter-spacing: -.02em; }

/* ── 가입 흐름 정렬 ────────────────────────
   1단계(번호 인증)는 내용이 적어 세로 가운데 정렬하면 단계 표시가
   화면 한참 아래에 놓이고, 내용이 많은 2단계(프로필)에서는 위로 올라옵니다.
   같은 흐름인데 헤더가 100px 가까이 튀어서 화면이 어긋나 보였습니다.
   두 화면 모두 위에서부터 쌓아 단계 표시 위치를 고정합니다. */
#view-verify, #view-join {
  justify-content: flex-start;
}

/* 헤더가 뜨는 화면(온보딩·초대 랜딩 제외)은 그 아래에서 내용이 시작해야 합니다 */
#view-verify, #view-join, #view-home, #view-hit, #view-add, #view-done,
#view-log, #view-board, #view-edit, #view-block, #view-noti, #view-invite {
  padding-top: calc(var(--safe-t) + 76px);
}

/* 빈 메시지 자리를 40px 통째로 비워두면 입력칸과 버튼 사이가 벌어집니다.
   자리는 유지하되(메시지가 떠도 화면이 튀지 않게) 위 간격을 줄입니다. */
#form-verify .a-msg { min-height: 22px; margin-top: -8px; }

/* ── 온보딩 슬라이드 높이 ──────────────────
   .ob-slide 은 position:absolute 라 내용이 .ob-track 밖으로 넘칩니다.
   안테로스 이미지가 250px 인데 .ob-art 는 168px 이라 위아래로 삐져나오고,
   그 결과 첫 장의 배지가 아래 점(dots)과 겹쳐 보였습니다. */
.ob-track { min-height: 470px; }

/* 화면이 낮으면 이미지를 줄여 겹침을 막습니다 */
@media (max-height: 760px) {
  .ob-track { min-height: 400px; }
  .ob-art.is-god .god-img { width: 176px; height: auto; }
}

/* ── 토스트 ────────────────────────────────
   alert() 는 흐름을 끊습니다. 결과만 조용히 알려줍니다. */
.toast {
  position: fixed; z-index: 95;
  left: 50%; bottom: calc(var(--safe-b, 0px) + 24px);
  transform: translate(-50%, 12px);
  max-width: min(90vw, 420px);
  padding: 13px 18px;
  border-radius: 999px;
  background: rgba(20, 8, 34, .95);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
  font-size: 13.5px; font-weight: 600; line-height: 1.5;
  text-align: center;
  opacity: 0; transition: opacity .25s ease, transform .25s ease;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.toast.is-bad { border-color: rgba(255, 107, 139, .5); }
.toast[hidden] { display: none; }

/* ── 동의 체크박스 ─────────────────────────
   목업에는 기본 렌더에 기대고 있어 실제 화면에서 줄이 흐트러졌습니다. */
.check {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; line-height: 1.5;
  cursor: pointer;
}
.check input[type="checkbox"] {
  width: 20px; height: 20px;
  flex: 0 0 auto;
  accent-color: #ff3d81;
  cursor: pointer;
}
.check span { flex: 1; }

/* ── 번호 · 인증번호 입력 ───────────────────
   가입은 preview-account 의 폼 스타일을 따릅니다.
   번호 인증도 가입의 1단계이므로 같은 상자형 입력으로 맞춥니다.
   (스캐너의 32px 히어로 입력은 이 폼 안에서 혼자 튀었습니다) */
.phone-field {
  font-size: 19px; font-weight: 800;
  letter-spacing: .06em; text-align: center;
  font-variant-numeric: tabular-nums;
}
.phone-field::placeholder { font-weight: 700; letter-spacing: .04em; }

.code-row { display: flex; gap: 8px; align-items: stretch; }
.code-row .fld-input {
  flex: 1; min-width: 0;
  font-size: 19px; font-weight: 800;
  letter-spacing: .3em; text-align: center;
  font-variant-numeric: tabular-nums;
}
/* 자간을 그대로 두면 placeholder 가 "6 자 리" 로 벌어집니다 */
.code-row .fld-input::placeholder { letter-spacing: normal; font-weight: 600; }
.code-row .mini-btn { flex: 0 0 auto; white-space: nowrap; }

/* 개발 모드에서만 화면에 뜨는 인증번호 안내 */
.dev-code {
  width: 100%;
  margin-top: 2px; padding: 10px 12px;
  border-radius: var(--r-md, 12px);
  background: rgba(255, 209, 102, .1);
  border: 1px dashed rgba(255, 209, 102, .5);
  color: #ffd166; font-size: 12.5px; text-align: center;
}
.dev-code b { font-size: 16px; letter-spacing: .18em; }

/* ── 게시판 ────────────────────────────────── */
.board-input {
  width: 100%; resize: vertical; min-height: 84px;
  font-family: inherit; line-height: 1.6;
}
.board-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 6px;
}
.board-count { font-size: 11.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.board-badges { display: flex; gap: 4px; flex-wrap: wrap; }

.board-list { width: 100%; display: flex; flex-direction: column; gap: 10px; list-style: none; }
.board-item {
  padding: 14px 16px;
  border-radius: var(--r-lg, 16px);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--card-line, rgba(255,255,255,.1));
  text-align: left;
}
.board-item.is-mine { border-color: rgba(255, 61, 129, .4); background: rgba(255, 61, 129, .07); }
.bi-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--ink-faint); margin-bottom: 6px;
}
.bi-author { font-weight: 700; color: var(--ink-dim); }
.bi-text { font-size: 14px; line-height: 1.65; white-space: pre-wrap; word-break: break-word; }
.bi-actions { display: flex; justify-content: flex-end; margin-top: 8px; }
.bi-report {
  background: none; border: 0; cursor: pointer;
  font-size: 11.5px; color: var(--ink-faint); text-decoration: underline;
}
.badge-chip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  font-size: 10.5px; font-weight: 700; color: var(--ink-dim);
}

/* 검수 대기 — 사용자에게는 보이되 상태를 숨기지 않습니다 */
.bi-review {
  display: inline-block; margin-left: 4px;
  color: #ffd166; font-size: 10.5px; font-weight: 700;
}

/* ── 초대 링크 ─────────────────────────────── */
.invite-link {
  font-size: 13px; font-weight: 700;
  word-break: break-all; line-height: 1.5;
  color: var(--ink, #fff);
  margin: 4px 0 8px;
}

/* ── 평상 화면의 안테로스 ──────────────────── */
.home-god { margin-bottom: -6px; }
.home-god .god-img { width: 150px; height: auto; }

/* ── 등록 자리 칩 (평상 화면) ──────────────── */
.slot.is-filled span { font-variant-numeric: tabular-nums; }
.slot-release {
  display: block; margin-top: 4px;
  background: none; border: 0; cursor: pointer;
  font-size: 10.5px; color: var(--ink-faint); text-decoration: underline;
}