/* 사주야 대문 — 대운 D-day. 폰 390폭 우선. 시스템 폰트만 쓴다(외부 폰트·CDN 없음).
 * v2 2026-09-19 — 거의 검정 바탕 · 그라데이션 빛 덩어리 · 탭 카드 · 하단 탭 바로 새로 입혔다
 * v3 2026-09-19 — 캐릭터 둘(결과 맨 위) · 친구 방 목록 · 들어가기 알림. 친구 넣기 칸(.ff)은 뺐다 */
:root {
  --bg: #0b0d12; --card: #10131b; --card2: #161a24; --line: rgba(255,255,255,.09); --line2: rgba(255,255,255,.14);
  --ink: #f2f4f8; --mute: #9ba2b3; --dim: #666d7e;
  --pink: #ff5e9b; --pinkbg: rgba(255,94,155,.12); --pinkln: rgba(255,94,155,.55);
  --grad: linear-gradient(95deg, #3ee8c8 0%, #a58bff 48%, #ff9a52 100%);
  --r: 24px;
  --tabbar: 66px;
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { color-scheme: dark; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font-size: 15px; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere;
  -webkit-text-size-adjust: 100%; }
/* ★ 여백을 body 에 두지 않는다 — 애드센스 상단 앵커가 뜨면 구글이 body 에 인라인 `padding: 149px 0 0` 을 박아
 *   body 의 padding 이 통째로 지워진다(2026-09-19 실측). 그래서 위 safe-area 는 .top 이, 아래 탭 바 몫은 main 이 진다 */
main { max-width: 480px; margin: 0 auto; padding: 0 16px calc(24px + var(--tabbar) + env(safe-area-inset-bottom) + 12px); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--ink); }
[hidden] { display: none !important; }
p { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pink { color: var(--pink); }
.grad { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ── 머리 ── */
.top { max-width: 480px; margin: 0 auto; padding: calc(12px + env(safe-area-inset-top)) 16px 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 900; font-size: 20px; letter-spacing: -.03em; }
/* 표식 — 반은 해, 반은 달. 10년마다 도는 판을 그렸다 */
.mark { width: 22px; height: 22px; border-radius: 50%; display: inline-block; position: relative;
  background: conic-gradient(from 200deg, #3ee8c8, #a58bff, #ff9a52, #3ee8c8); }
.mark::after { content: ""; position: absolute; inset: 5px 3px 5px 9px; border-radius: 50%; background: var(--bg); }
.pill { position: relative; }
.pill select { appearance: none; -webkit-appearance: none; background: var(--card2); border: 1px solid var(--line2);
  border-radius: 99px; padding: 7px 30px 7px 14px; font-size: 14px; font-weight: 700; }
.pill::after { content: "⌄"; position: absolute; right: 12px; top: 3px; font-size: 14px; color: var(--mute); pointer-events: none; }

/* ── 상단 탭 카드 셋 ── */
.tabs { max-width: 480px; margin: 0 auto; padding: 0 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tab { display: flex; flex-direction: column; gap: 6px; padding: 10px 10px 11px; border-radius: 16px; text-decoration: none;
  background: var(--card); border: 1px solid var(--line); min-width: 0; }
.tab .ic { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-size: 16px; background: var(--card2); }
.tab b { display: block; font-size: 13.5px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tab small { display: block; font-size: 11px; color: var(--mute); line-height: 1.3; }
.tab.on { border-color: var(--pinkln); background: var(--pinkbg); }
.tab.on .ic { background: rgba(255,94,155,.18); }

/* ── 히어로 ── */
.hero { position: relative; margin: 14px -16px 0; padding: 38px 20px 26px; overflow: hidden; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: -30% -20% -10%; z-index: -2;
  background:
    radial-gradient(40% 45% at 18% 35%, rgba(52,227,196,.55), transparent 70%),
    radial-gradient(38% 42% at 58% 22%, rgba(155,123,255,.50), transparent 70%),
    radial-gradient(40% 48% at 92% 55%, rgba(255,140,70,.50), transparent 72%);
  filter: blur(26px); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 34px 34px; mask-image: linear-gradient(180deg, #000 30%, transparent); -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent); }
.hero h1 { font-size: 40px; line-height: 1.14; letter-spacing: -.045em; margin: 0 0 12px; font-weight: 900; }
.lead { color: #c5cad6; font-size: 15.5px; }

/* ── 입력 ── */
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 16px 16px; margin: 4px 0 18px; }
.fld { display: block; margin: 0 0 12px; }
.fld > span { display: block; font-size: 13px; color: var(--mute); margin: 0 0 6px; font-weight: 700; }
.fld i { font-style: normal; color: var(--dim); font-weight: 600; margin-left: 4px; }
.fld input { width: 100%; background: var(--card2); border: 1px solid var(--line2); border-radius: 16px;
  padding: 13px 16px; font-size: 22px; font-weight: 800; letter-spacing: .05em; outline: none; min-height: 56px; }
.fld input::placeholder { color: #454b5a; }
.fld input:focus { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(255,94,155,.18); }
.fld.opt input { font-size: 18px; letter-spacing: 0; font-weight: 700; }
.leap { display: flex; gap: 6px; align-items: center; font-size: 14px; color: var(--mute); margin: -4px 0 12px 2px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; background: var(--card2); border: 1px solid var(--line); border-radius: 18px; margin: 0 0 12px; }
.seg button { border: 0; background: none; border-radius: 13px; padding: 11px; font-size: 16px; font-weight: 800; color: var(--mute); }
.seg button.on { background: #262b38; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line2); }
.err { color: #ff8fb4; font-size: 14px; margin: 0 0 10px; }
.go { width: 100%; border: 0; border-radius: 18px; padding: 16px; color: #0b0d12; background: #fff;
  font-size: 18px; font-weight: 900; letter-spacing: -.02em; margin: 4px 0 10px; }
.go:active { transform: translateY(1px); }
.go.small { padding: 13px; font-size: 16px; }
.safe { font-size: 12.5px; color: var(--dim); text-align: center; }

/* 초대받은 첫 화면 */
.invite { display: flex; gap: 12px; align-items: center; background: var(--pinkbg); border: 1px solid var(--pinkln); border-radius: 18px; padding: 12px 14px; margin: 14px 0 0; }
.inv-who { font-size: 15px; color: #d8dce6; }
.inv-who b { color: var(--ink); }
.inv-who b.pink { color: var(--pink); font-variant-numeric: tabular-nums; }
.inv-sub { font-size: 12.5px; color: var(--mute); margin-top: 2px; }

/* ── 결과 카드 ── */
.back { margin: 14px 0 8px; }
.link { background: none; border: 0; color: var(--mute); font-size: 14px; padding: 4px 0; }
.card { position: relative; background:
    radial-gradient(90% 60% at 100% 0%, rgba(255,94,155,.20), transparent 60%),
    radial-gradient(70% 50% at 0% 0%, rgba(52,227,196,.08), transparent 60%), var(--card);
  border: 1px solid var(--line); border-radius: 28px; padding: 18px; margin: 0 0 10px; }
.who { display: flex; align-items: center; gap: 12px; }
.ava { width: 52px; height: 52px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 27px; font-weight: 900;
  background: radial-gradient(circle at 30% 25%, #2b3142, #171b26); box-shadow: inset 0 0 0 1px var(--line2), 0 0 0 3px rgba(255,94,155,.18); }
.ava.sm { width: 40px; height: 40px; font-size: 19px; }
.who-t { min-width: 0; }
.who-n { font-size: 19px; font-weight: 900; letter-spacing: -.03em; }
.who-s { font-size: 13px; color: var(--mute); }
.rankline { margin: 14px 0 6px; font-size: 13.5px; color: #d8dce6; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.rankline::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 8px var(--pink); }
.rankline b { color: var(--pink); }

.count { margin: 8px 0 6px; font-variant-numeric: tabular-nums; }
.ymd { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 2px; line-height: 1; }
.ymd b { font-size: 58px; font-weight: 900; letter-spacing: -.05em; }
.ymd span { font-size: 17px; font-weight: 800; color: var(--pink); margin: 0 10px 0 3px; }
.ymd span:last-child { margin-right: 0; }
.hms { font-size: 30px; font-weight: 900; letter-spacing: -.02em; margin-top: 6px; }
.cap { font-size: 14px; color: var(--mute); margin: 4px 0 14px; }

.bar { height: 8px; background: rgba(255,255,255,.08); border-radius: 99px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--grad); border-radius: 99px; }
.barcap { font-size: 12.5px; color: var(--mute); margin: 6px 0 14px; }

.next { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 18px; padding: 14px; }
.pair { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.gz { display: inline-flex; align-items: baseline; gap: 5px; background: var(--card2); border: 1px solid var(--line); border-radius: 99px; padding: 5px 12px; font-weight: 900; font-size: 16px; }
.gz small { font-size: 12px; color: var(--mute); font-weight: 700; }
.gz.on { border-color: var(--pinkln); background: var(--pinkbg); }
.arrow { color: var(--pink); font-weight: 900; }
.next-h { font-size: 16.5px; font-weight: 800; letter-spacing: -.02em; line-height: 1.45; }
.next-s { font-size: 13.5px; color: var(--mute); margin-top: 6px; }
.fine { font-size: 12.5px; color: var(--dim); margin: 10px 0 0; }
.fine.center { text-align: center; min-height: 1em; }
.basis { font-size: 12.5px; color: var(--dim); margin: 2px 4px 16px; }
.basis a { color: var(--mute); }

/* ★ 캐릭터 둘 — 결과 맨 위. 한눈에 보이게 크게 (어명 2026-09-19) */
.chars { padding: 14px 12px 14px; }
.duo { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; }
.ch { text-align: center; background: rgba(255,255,255,.05); border: 1px solid var(--line2); border-radius: 22px; padding: 12px 6px 10px; min-width: 0; height: 100%; }
.ch.nx { background: var(--pinkbg); border-color: var(--pinkln); }
.ch .lbl { font-size: 12.5px; font-weight: 800; color: var(--mute); letter-spacing: -.01em; }
.ch.nx .lbl { color: #ff8fb8; }
.emo { display: block; font-size: 66px; line-height: 1.15; margin: 4px 0 4px; }
.cn { display: block; font-size: 19px; font-weight: 900; line-height: 1.22; letter-spacing: -.04em; min-height: 2.44em; display: flex; align-items: center; justify-content: center; }
.gzs { display: block; font-size: 12px; color: var(--mute); font-weight: 700; margin-top: 4px; }
.to { color: var(--pink); font-weight: 900; font-size: 20px; }
.cl { display: flex; gap: 8px; align-items: baseline; font-size: 15px; font-weight: 700; line-height: 1.4; margin: 12px 4px 0; letter-spacing: -.02em; }
.cl + .cl { margin-top: 6px; }
.cl b { flex: none; font-size: 11.5px; font-weight: 900; color: var(--mute); background: var(--card2); border: 1px solid var(--line2); border-radius: 99px; padding: 1px 8px; }
.cl.nx b { color: var(--pink); border-color: var(--pinkln); background: var(--pinkbg); }

/* 초대받고 들어와 계산한 뒤 맨 위 한 줄 */
.vstop { background: var(--pinkbg); border: 1px solid var(--pinkln); border-radius: 18px; padding: 12px 14px; margin: 0 0 10px; font-size: 15px; }
.vstop b { color: var(--pink); }

/* ── 공유 단추 셋 ── */
.share { margin: 0 0 18px; }
.share .nick input { font-size: 16px; letter-spacing: 0; font-weight: 700; min-height: 48px; padding: 10px 14px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.row2 > * { min-width: 0; }
.btn { border: 1px solid var(--line2); background: var(--card2); border-radius: 16px; padding: 14px 8px; font-size: 15px; font-weight: 800; letter-spacing: -.02em; }
.btn.white { background: #fff; color: #0b0d12; border-color: #fff; }
.btn.wide { width: 100%; margin-top: 8px; }

/* ── 누가 먼저 바뀌나 ── */
h2 { font-size: 21px; line-height: 1.3; letter-spacing: -.03em; margin: 0 0 4px; font-weight: 900; }
.sub { color: var(--mute); margin: 0 0 12px; font-size: 14px; }
.rank { list-style: none; margin: 0 0 14px; padding: 0; }
.rank li { display: grid; grid-template-columns: 22px 38px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 10px; border-radius: 16px; border: 1px solid transparent; }
.rank li + li { margin-top: 4px; }
.rank li.me { background: var(--pinkbg); border-color: var(--pinkln); }
.rank .n { font-size: 15px; font-weight: 900; color: var(--mute); text-align: center; font-variant-numeric: tabular-nums; }
.rank li.me .n { color: var(--pink); }
.rank .ava { width: 38px; height: 38px; font-size: 17px; box-shadow: inset 0 0 0 1px var(--line2); }
.rank .nm { min-width: 0; }
.rank .nm b { display: flex; align-items: center; gap: 6px; font-size: 15.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank .nm small { display: block; font-size: 12px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank .dd { text-align: right; font-variant-numeric: tabular-nums; }
.rank .dd b { display: block; font-size: 16px; font-weight: 900; }
.rank li.me .dd b { color: var(--pink); }
.rank .dd small { display: block; font-size: 11.5px; color: var(--mute); }
.badge { font-size: 11px; font-weight: 800; color: var(--pink); background: rgba(255,94,155,.16); border-radius: 99px; padding: 0 7px; flex: none; }
.badge.g { color: var(--mute); background: rgba(255,255,255,.07); }
.rank .x { background: none; border: 0; color: var(--dim); font-size: 12px; padding: 0 0 0 4px; }

/* 방 목록 — 캐릭터 이모지 짝(지금 → 다음) */
.rank li:has(.pair2) { grid-template-columns: 22px auto minmax(0, 1fr) auto; }
.pair2 { display: inline-flex; align-items: center; gap: 2px; font-size: 22px; line-height: 1; }
.pair2 .ar { font-size: 11px; color: var(--pink); font-weight: 900; }
.rank li.ghost { border-style: dashed; background: transparent; }
.rank li.more { display: block; text-align: center; color: var(--mute); font-size: 13px; padding: 6px; }
.rank.mini { margin: 10px 0 0; }
.rank.mini li { padding: 8px; }
.rank.mini .pair2 { font-size: 19px; }

/* 방 링크로 처음 온 화면 — 방 사람들 */
.roombox { background: var(--card); border: 1px solid var(--pinkln); border-radius: 22px; padding: 14px 12px 10px; margin: 14px 0 0; }
.rb-h { font-size: 19px; font-weight: 900; letter-spacing: -.03em; padding: 0 4px; }
.rb-s { font-size: 13.5px; color: var(--mute); padding: 2px 4px 0; }

/* 들어가기 · 방 만들기 알림 */
.ask { background: var(--pinkbg); border: 1px solid var(--pinkln); border-radius: 22px; padding: 14px; margin: 0 0 10px; }
.ask-h { font-size: 17px; font-weight: 900; letter-spacing: -.02em; margin: 0 0 4px; }
.ask-s { font-size: 13.5px; color: #d8dce6; margin: 0 0 10px; }
.ask .fld { margin-bottom: 10px; }
.ask .err { margin: 10px 0 0; }
.share .ask .btn.wide { margin-top: 0; }
.share > .btn.wide:first-of-type { margin-top: 0; }
.btn:disabled { opacity: .6; }

/* ── 더 보기 ── */
.more { margin: 26px 0 0; }
.more-h { font-size: 17px; margin: 0 0 10px; }
.mcard { display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); text-decoration: none; }
.mcard .ic { font-size: 22px; margin-bottom: 4px; }
.mcard b { font-size: 15.5px; font-weight: 800; }
.mcard small { font-size: 12.5px; color: var(--mute); }

/* ── 접힌 칸 ── */
details#how { margin: 22px 0 0; border-top: 1px solid var(--line); padding-top: 10px; }
details#how summary { color: var(--mute); font-size: 14px; cursor: pointer; padding: 6px 0; }
.how { font-size: 13.5px; color: var(--mute); }
.how h3 { font-size: 14px; color: var(--ink); margin: 18px 0 4px; }
.how p, .how ul { margin: 0 0 8px; }
.how ul { padding-left: 18px; }
.how li { margin: 0 0 4px; }
.how b { color: var(--ink); font-weight: 700; }
.how a { color: var(--mute); }

/* ── 하단 탭 바 ── */
.bottom { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  padding: 8px max(12px, calc(50% - 228px)) calc(8px + env(safe-area-inset-bottom));
  background: rgba(11,13,18,.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
.bottom a { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px; border-radius: 16px; text-decoration: none;
  font-size: 12px; font-weight: 700; color: var(--mute); }
.bottom .ic { font-size: 18px; line-height: 1.2; }
.bottom a.on { background: rgba(255,94,155,.16); color: #ff8fb8; box-shadow: inset 0 0 0 1px rgba(255,94,155,.35); }

@media (max-width: 360px) {
  .emo { font-size: 54px; }
  .cn { font-size: 17px; }
  .hero h1 { font-size: 34px; }
  .ymd b { font-size: 48px; }
  .hms { font-size: 25px; }
  .tab small { display: none; }
}
/* 낱말이 줄 끝에서 쪼개지지 않게 */
.basis a, .nw, .cap b { white-space: nowrap; }
.ask .err#joinNameErr, .ask .err#nickErr { margin: -4px 0 10px; }