/* ─────────────────────────────────────────────
   실제 앱에서만 쓰는 조각들
   (목업 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; }

/* ── 번호 인증 화면은 전부 가운데 정렬 ──────
   .fld 는 원래 왼쪽 정렬(폼 기본값)이라 라벨·도움말만 왼쪽으로 붙어
   가운데 정렬된 제목·입력칸과 축이 어긋나 보였습니다. */
#view-verify .fld,
#view-verify .fld-help,
#view-verify .fld-err { text-align: center; }

#view-verify .fld-label { justify-content: center; }
#view-verify .a-msg     { justify-content: center; text-align: center; }
#view-verify .code-row  { justify-content: center; }
#view-verify .dev-code  { text-align: center; }

/* ── 온보딩 슬라이드 높이 ──────────────────
   .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; }

/* ── 비밀번호 입력 ─────────────────────────
   눈 버튼은 입력칸 안에 겹쳐 둡니다. 옆에 두면 칸이 좁아집니다. */
.pw-row { position: relative; }
.pw-row .fld-input { padding-right: 50px; }
.pw-eye {
  position: absolute; right: 6px; top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 0; border-radius: 10px;
  background: transparent; cursor: pointer;
  font-size: 17px; opacity: .5;
  transition: opacity .2s ease, background .2s ease;
}
.pw-eye:hover { opacity: .9; background: rgba(255, 255, 255, .06); }
.pw-eye.is-on { opacity: 1; }

/* ── 로그인 화면 ───────────────────────────── */
#view-login, #view-setpw {
  justify-content: flex-start;
  padding-top: calc(var(--safe-t) + 76px);
}
#view-login .fld, #view-login .fld-help,
#view-setpw .fld, #view-setpw .fld-help { text-align: center; }
#view-login .fld-label, #view-setpw .fld-label { justify-content: center; }
#view-login .a-msg, #view-setpw .a-msg { justify-content: center; text-align: center; }

.login-god { margin-bottom: -10px; }
.login-god .god-img { width: 130px; height: auto; }

.login-links {
  width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  margin-top: 4px;
}

/* ── 게시판 ────────────────────────────────── */
.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; }

/* ── 매칭 성공 화면의 안테로스 ──────────────
   기존 💘 이모지 자리를 캐릭터가 대신합니다.
   서로 사랑할 때만 나타나는 신이라는 설정이 이 화면에서 완성됩니다.
   애니메이션은 기존 어휘(popIn·glowPulse·orbit)를 그대로 씁니다. */
.hit-mark.is-god { width: 260px; height: 250px; }

.hit-mark.is-god .hit-glow {
  width: 190px; height: 190px;
  background: radial-gradient(circle, rgba(255, 61, 129, .78), transparent 70%);
}

.hit-god {
  position: relative; z-index: 1;
  width: 200px; height: auto;
  filter: drop-shadow(0 14px 30px rgba(255, 61, 129, .55));
  animation: popIn .8s cubic-bezier(.2, 1.5, .4, 1) both,
             godFloat 3.6s ease-in-out .8s infinite;
}
@keyframes godFloat {
  50% { transform: translateY(-9px); }
}

/* 배달된 하트 — 캐릭터 오른쪽 아래에 둡니다.
   위쪽은 활·화살과 겹쳐 지저분해집니다. */
.hit-badge {
  position: absolute; z-index: 2;
  right: 16px; bottom: 40px;
  font-size: 40px;
  filter: drop-shadow(0 0 16px rgba(255, 61, 129, .95));
  animation: popIn .7s cubic-bezier(.2, 1.6, .4, 1) .35s both,
             beat 1.7s ease-in-out 1.4s infinite;
}

/* 캐릭터가 커진 만큼 반짝이도 더 넓게 돕니다 */
.hit-mark.is-god .orbit { font-size: 19px; }
.hit-mark.is-god .o1 { animation-delay: 0s; }
.hit-mark.is-god .o2 { animation-delay: -1.6s; }
.hit-mark.is-god .o3 { animation-delay: -3.2s; }
.hit-mark.is-god .o4 { animation-delay: -4.8s; }
.hit-mark.is-god .orbit { animation-name: orbitWide; }
@keyframes orbitWide {
  from { transform: rotate(0deg)   translateX(112px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(112px) rotate(-360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hit-god, .hit-badge { animation: none; }
  .hit-mark.is-god .orbit { animation: none; opacity: .5; }
}

/* 화면이 좁으면 캐릭터를 줄여 제목과 겹치지 않게 */
@media (max-width: 360px), (max-height: 720px) {
  .hit-mark.is-god { width: 220px; height: 210px; }
  .hit-god { width: 168px; }
  .hit-badge { font-size: 34px; right: 8px; bottom: 34px; }
  .hit-mark.is-god .orbit { animation-name: orbit; }
}

/* ── 등록 자리 칩 (평상 화면) ──────────────── */
.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;
}

/* ── 첫 화면 ───────────────────────────────
   허들을 낮추는 화면입니다. 안테로스를 크게 두고 입력은 하나만 받습니다.
   설명을 길게 붙이면 그 순간 허들이 다시 올라갑니다. */
#view-start {
  /* 다른 화면과 동일하게 세로 중앙 정렬. (예전엔 위쪽 정렬이라 화면이 떠 보였습니다) */
  justify-content: center;
  padding-top: calc(var(--safe-t) + 54px);
  gap: 14px;
}

/* 첫 화면의 두 상태(#start-new / #start-mine)는 그냥 div 라서 자식을 가운데로
   모으지 않습니다. 제목처럼 폭 100% 인 것은 괜찮지만 .ob-art 같은 고정폭
   블록(228px)은 왼쪽에 붙습니다. 화면 컨테이너와 같은 정렬을 물려줍니다. */
#start-new, #start-mine,
#home-idle, #home-miss {
  width: 100%;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 14px;
}
/* "적어두기" 버튼과 "🔒 서로 적었을 때만" 배지가 붙어 보이지 않게 사이를 띄웁니다 */
#view-start .ob-badge { margin-top: 12px; }
.start-god { width: 210px; height: 210px; margin-bottom: -4px; }
.start-god .god-img { width: 190px; height: auto; }

.start-title {
  font-size: 27px; font-weight: 800; line-height: 1.32;
  letter-spacing: -.04em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.start-lede {
  font-size: 14.5px; line-height: 1.7; color: var(--ink-dim);
}
.start-lede b { color: var(--ink); font-weight: 700; }

#view-start .acc-form { gap: 10px; }
#view-start .a-msg { justify-content: center; text-align: center; min-height: 26px; }

/* ── 첫 화면: 이미 적어둔 사람 ────────────── */
.mine-god { width: 150px; height: 150px; }
.mine-god .god-img { width: 132px; }

.mine-list { width: 100%; display: flex; flex-direction: column; gap: 8px; list-style: none; }
.mine-item {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 4px 10px;
  padding: 13px 15px;
  border-radius: var(--r-md, 12px);
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--card-line);
  text-align: left;
}
.mine-item b { font-size: 15.5px; font-variant-numeric: tabular-nums; }
.mine-item small { grid-column: 1; font-size: 11.5px; color: var(--ink-faint); }
.mine-item small.is-locked { color: #ffd166; }
.mine-change {
  grid-row: 1 / span 2; grid-column: 2;
  padding: 9px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid var(--card-line);
  color: var(--ink-dim); font: inherit; font-size: 12.5px; font-weight: 700;
  cursor: pointer;
}
.mine-change:disabled { opacity: .38; cursor: not-allowed; }

/* 변경이 막힌 항목 — 비활성이 아니라 "눌러서 이유 보기" 로 둡니다 */
.mine-change.is-locked {
  opacity: .72;
  border-color: rgba(255, 209, 102, .45);
  color: #ffd166;
}
.nc-rhythm { font-size: 11.5px; color: var(--ink-faint); margin-top: 4px; font-variant-numeric: tabular-nums; }
.nc-rhythm.is-locked { color: rgba(255, 209, 102, .8); }

/* ── 나를 적어둔 사람 ───────────────────────
   🚨 누구인지는 절대 보여주지 않습니다. 숫자까지가 끝입니다.
   확인 수단이 둘(광고 쿠폰 / 구매 기간권)이라 지갑을 나눠 그립니다. */
.rv {
  width: 100%;
  padding: 18px 16px;
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(255,61,129,.10), rgba(168,85,247,.07));
  border: 1px solid rgba(255,61,129,.24);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}

.rv-top { display: flex; align-items: center; gap: 7px; }
.rv-ico { font-size: 16px; }
.rv-label { font-size: 12.5px; font-weight: 800; color: var(--ink-dim); letter-spacing: -.01em; }

.rv-body { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rv-big {
  font-size: 44px; font-weight: 800; letter-spacing: -.04em; line-height: 1;
  font-variant-numeric: tabular-nums;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rv-big span { font-size: 19px; font-weight: 700; }
.rv-sub { font-size: 12.5px; color: var(--ink-dim); text-align: center; line-height: 1.6; }
.rv-sub b { color: var(--ink); font-weight: 700; }

/* 지갑 — 광고로 받은 것과 구매한 것을 절대 섞지 않습니다 */
.rv-wallet { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.rv-w {
  padding: 12px 11px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--card-line);
  text-align: center;
}
.rv-w.is-have { border-color: rgba(52,211,153,.4); background: rgba(52,211,153,.08); }

.rv-w-t { font-size: 11px; font-weight: 700; color: var(--ink-dim); margin-bottom: 6px; }
.rv-w-v { font-size: 15px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.rv-w-v b { font-size: 20px; font-weight: 800; }
.rv-w-v small { font-size: 11.5px; font-weight: 600; color: var(--ink-faint); }
.rv-w-s { margin-top: 5px; font-size: 10.5px; color: var(--ink-faint); line-height: 1.5; }

/* 쿠폰으로 본 숫자는 남겨둡니다.
   한 번 보고 나갔다고 사라지면 "산 걸 뺏겼다" 는 기분이 듭니다. */
.rv-last {
  width: 100%;
  padding: 9px 12px; border-radius: var(--r-sm);
  background: rgba(255,255,255,.04);
  font-size: 11.5px; color: var(--ink-faint); text-align: center;
}
.rv-last b { color: var(--ink-dim); font-weight: 700; }

.rv-acts { width: 100%; display: flex; flex-direction: column; gap: 9px; }
.rv-acts .btn { margin: 0; }

@media (max-width: 340px) {
  .rv-wallet { grid-template-columns: 1fr; }
}

/* ── 운세 · 사주 · 궁합 ─────────────────────
   🚨 궁합에는 상대의 생년월일·나이·띠가 절대 오지 않습니다.
      서버가 점수와 해설만 내려줍니다 (server/src/saju.js 참고). */
#view-fortune { justify-content: flex-start; gap: 14px; }

.fo-mark { position: relative; display: grid; place-items: center; width: 104px; height: 104px; }
.fo-glyph { font-size: 46px; animation: floaty 4s ease-in-out infinite; }
.fo-orb {
  position: absolute; width: 88px; height: 88px; border-radius: 50%;
  background: radial-gradient(circle, rgba(168,85,247,.34), transparent 68%);
  filter: blur(10px);
}

.fo-need { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }

.fo-card {
  width: 100%;
  padding: 18px 16px;
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.045);
  border: 1px solid var(--card-line);
  text-align: left;
}
.fo-card.is-today {
  background: linear-gradient(160deg, rgba(168,85,247,.12), rgba(34,211,238,.06));
  border-color: rgba(168,85,247,.28);
}
#fo-body { width: 100%; display: flex; flex-direction: column; gap: 14px; }

.fo-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 800; color: var(--ink-dim); letter-spacing: -.01em;
  margin-bottom: 10px;
}
.fo-label em {
  font-style: normal; font-size: 10px; font-weight: 800;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(52,211,153,.18); color: #34d399;
}

.fo-day { font-size: 11.5px; color: var(--ink-faint); margin-bottom: 4px; }

/* 할머니 말투라 문장이 깁니다. 줄간격을 넉넉히. */
.fo-head { font-size: 18px; font-weight: 800; letter-spacing: -.03em; line-height: 1.45; margin-bottom: 8px; }
.fo-text { font-size: 14px; line-height: 1.75; color: var(--ink-dim); }
.fo-love {
  margin-top: 10px; padding: 11px 13px; border-radius: var(--r-sm);
  background: rgba(255,61,129,.10); border: 1px solid rgba(255,61,129,.22);
  font-size: 13.5px; line-height: 1.7; color: var(--ink);
}
.fo-extra { margin-top: 9px; font-size: 12.5px; line-height: 1.7; color: var(--cyan); }

.fo-notes { list-style: none; margin-top: 10px; display: flex; flex-direction: column; gap: 7px; }
.fo-notes li {
  font-size: 13px; line-height: 1.7; color: var(--ink-dim);
  padding-left: 14px; position: relative;
}
.fo-notes li::before { content: "·"; position: absolute; left: 3px; color: var(--pink); font-weight: 800; }

/* 사주 네 기둥 */
.fo-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-bottom: 14px; }
.fo-p {
  padding: 11px 4px; border-radius: var(--r-sm); text-align: center;
  background: rgba(255,255,255,.05); border: 1px solid var(--card-line);
}
.fo-p b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.fo-p small { font-size: 10px; color: var(--ink-faint); }
.fo-p.is-me { border-color: rgba(255,61,129,.5); background: rgba(255,61,129,.10); }
.fo-p.is-none b { color: var(--ink-faint); font-weight: 600; }

/* 오행 */
.fo-elements { display: flex; gap: 6px; margin-top: 14px; }
.fo-e {
  flex: 1; padding: 8px 2px; border-radius: var(--r-sm); text-align: center;
  background: rgba(255,255,255,.04); border: 1px solid var(--card-line);
}
.fo-e b { display: block; font-size: 14px; font-weight: 800; }
.fo-e small { font-size: 10px; color: var(--ink-faint); }
.fo-e.is-zero { opacity: .42; }
.fo-e.is-many { border-color: rgba(255,209,102,.45); background: rgba(255,209,102,.10); }

.fo-caveat {
  margin-top: 14px; padding: 13px; border-radius: var(--r-md);
  background: rgba(255,209,102,.08); border: 1px solid rgba(255,209,102,.26);
  display: flex; flex-direction: column; gap: 10px;
}
.fo-caveat p { font-size: 12.5px; line-height: 1.7; color: var(--ink-dim); }
.fo-caveat .btn { margin: 0; }

/* 궁합 */
.fo-score { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.fo-score b {
  font-size: 42px; font-weight: 800; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.fo-score span { font-size: 14px; font-weight: 700; color: var(--ink-dim); }

.fo-cn { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.fo-cn div {
  padding: 11px 13px; border-radius: var(--r-sm); font-size: 13px; line-height: 1.65;
  background: rgba(255,255,255,.05); border: 1px solid var(--card-line);
}
.fo-cn div.is-good { border-color: rgba(52,211,153,.32); background: rgba(52,211,153,.08); }
.fo-cn div.is-care { border-color: rgba(255,209,102,.32); background: rgba(255,209,102,.08); }

/* 잠긴 항목 — 약 올리지 않고 "더 있다"만 알립니다 */
.fo-locked {
  margin-top: 10px; padding: 14px; border-radius: var(--r-md); text-align: center;
  background: rgba(255,255,255,.045); border: 1px dashed var(--card-line);
}
.fo-locked p { font-size: 13px; color: var(--ink-dim); line-height: 1.65; }
.fo-locked b { color: var(--ink); font-weight: 700; }
.fo-locked .btn { margin-top: 12px; }

/* 상품 */
.fo-shop { width: 100%; }
.fo-items { display: flex; flex-direction: column; gap: 9px; }

.fo-item {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 15px 15px; border-radius: var(--r-md);
  background: rgba(255,255,255,.05); border: 1px solid var(--card-line);
  color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: border-color .2s ease;
}
.fo-item:hover:not(:disabled) { border-color: rgba(255,61,129,.5); }
.fo-item:disabled { opacity: .45; cursor: default; }

.fo-i-body { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.fo-i-body b { font-size: 14.5px; font-weight: 700; }
.fo-i-body small { font-size: 11.5px; color: var(--ink-faint); line-height: 1.5; }

.fo-price {
  flex: 0 0 auto; font-size: 13.5px; font-weight: 800;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fo-price.is-owned { color: #34d399; font-size: 12px; }

.fo-disc { margin-top: 4px; }

/* 테스트 계정 표시 — 결제 없이 열린 걸 숨기면 그대로 출시하게 됩니다 */
.fo-tester {
  width: 100%;
  padding: 10px 13px; border-radius: var(--r-sm);
  background: rgba(255,209,102,.12); border: 1px solid rgba(255,209,102,.4);
  font-size: 12px; line-height: 1.6; color: #ffd166; text-align: center;
}
.fo-tester b { color: #ffd166; font-weight: 800; }

/* ── 내 화살 ────────────────────────────────
   🏹 금화살(환불 가능)과 🪵 나무화살(환불 불가)을 섞어 보여주지 않습니다.
      섞으면 환불 얘기가 나올 때 바로 분쟁이 됩니다. */
#view-wallet { justify-content: flex-start; gap: 14px; }

.wa-mark { display: grid; place-items: center; width: 88px; height: 88px; }
.wa-mark span { font-size: 44px; animation: floaty 4s ease-in-out infinite; }

.wa-total { display: flex; align-items: baseline; gap: 5px; }
.wa-total b {
  font-size: 52px; font-weight: 800; letter-spacing: -.04em; line-height: 1;
  font-variant-numeric: tabular-nums;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wa-total span { font-size: 19px; font-weight: 700; color: var(--ink-dim); }

.wa-split { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wa-k { padding: 14px 12px; border-radius: var(--r-md); text-align: center; border: 1px solid var(--card-line); }
.wa-k.is-gold { background: rgba(255,209,102,.10); border-color: rgba(255,209,102,.32); }
.wa-k.is-wood { background: rgba(160,120,80,.12);  border-color: rgba(190,150,110,.28); }
.wa-k-t { font-size: 11.5px; font-weight: 700; color: var(--ink-dim); }
.wa-k-v { font-size: 26px; font-weight: 800; margin: 5px 0 3px; font-variant-numeric: tabular-nums; }
.wa-k-s { font-size: 10.5px; color: var(--ink-faint); line-height: 1.5; }

.wa-expire {
  width: 100%; padding: 11px 13px; border-radius: var(--r-sm); text-align: center;
  background: rgba(255,209,102,.10); border: 1px solid rgba(255,209,102,.3);
  font-size: 12.5px; line-height: 1.6; color: #ffd166;
}
.wa-limit {
  width: 100%; padding: 11px 13px; border-radius: var(--r-sm); text-align: center;
  background: rgba(255,255,255,.05); border: 1px solid var(--card-line);
  font-size: 12px; line-height: 1.6; color: var(--ink-dim);
}
.wa-limit b { color: var(--ink); font-weight: 700; }

.wa-sec { width: 100%; }

.wa-packs { display: flex; flex-direction: column; gap: 9px; }
.wa-pack {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 15px; border-radius: var(--r-md);
  background: rgba(255,255,255,.05); border: 1px solid var(--card-line);
  color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: border-color .2s ease;
}
.wa-pack:hover:not(:disabled) { border-color: rgba(255,209,102,.55); }
.wa-pack:disabled { opacity: .45; cursor: default; }
.wa-pack b { flex: 1; font-size: 15px; font-weight: 800; }
.wa-pack em {
  font-style: normal; font-size: 11px; font-weight: 700; color: #d9a441;
  padding: 3px 8px; border-radius: 999px; background: rgba(255,209,102,.16);
}
.wa-pack span { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }

.wa-costs { display: flex; flex-direction: column; gap: 7px; }
.wa-cost {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 13px; border-radius: var(--r-sm);
  background: rgba(255,255,255,.04); border: 1px solid var(--card-line);
  font-size: 13px;
}
.wa-cost b { font-weight: 800; font-variant-numeric: tabular-nums; }

.wa-log { display: flex; flex-direction: column; }
.wa-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 2px; border-bottom: 1px solid var(--card-line);
  font-size: 13px;
}
.wa-row:last-child { border-bottom: 0; }
.wa-row .wl-t { flex: 1; color: var(--ink-dim); }
.wa-row .wl-d { font-weight: 800; font-variant-numeric: tabular-nums; }
.wa-row .wl-d.is-plus { color: #34d399; }
.wa-row .wl-d.is-minus { color: var(--ink-faint); }
.wa-empty { padding: 22px; text-align: center; font-size: 12.5px; color: var(--ink-faint); }

/* 지금까지 낸 돈 — "얼마 썼지" 에 답이 되어야 합니다 */
.wa-paid {
  padding: 10px 12px; margin-bottom: 10px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.05); border: 1px solid var(--card-line);
  font-size: 12.5px; color: var(--ink-dim); text-align: center;
}
.wa-paid b { color: var(--ink); font-weight: 800; }

/* 내역 한 줄 — 무엇을 언제 얼마에 */
.wa-row .wl-t { display: flex; flex-direction: column; gap: 2px; }
.wa-row .wl-t b { font-size: 13px; font-weight: 700; color: var(--ink); }
.wa-row .wl-t small { font-size: 11px; color: var(--ink-faint); }