/* ════════════════════════════════════════════════════════════════════
   reading-ui.css — 타로 상담 화면 상단
   ────────────────────────────────────────────────────────────────────
   2026-08-27 사람 지시. 목표 구조:

     ┌──────────────────────────────┐
     │ ‹ 마을          루나       ⓘ │
     │       타로 리더 · AI 상담    │
     │  ♫ The Card Archive      Ⅱ  │
     └──────────────────────────────┘

   정보 우선순위: ① 루나 → ② 상담 → ③ 마을 이동 → ④ 음악·상태
   ★ 공통 조각(‹ 마을 · ⓘ · 미니 플레이어 · 은화)은 premium-hud.css 가 정한다.
     이 파일은 [이 화면에서만 다른 것]만 적는다 — 제목 자리와 본문 여백.
   ★ 본문(상담 대화·카드·입력창·광고·AI 로직)은 손대지 않았다.
   ════════════════════════════════════════════════════════════════════ */

/* ── 헤더를 상단 고정 HUD 로 ────────────────────────────────────
   원래 .char-header 는 흐름 안 flex 헤더였다. 그대로 두면 [뒤로 + 이름]이
   한 줄로 붙어 이름이 중앙에 안 선다. 헤더 자체를 고정 띠로 만들고
   이름 칸만 가운데에 세운다 — 요소를 지우거나 옮기지 않는다. */
body.premium-hud header.char-header{
  position:fixed; z-index:21; top:0; left:0; right:0;
  padding:calc(var(--pg-row1) - 0px) 12px 0;
  display:block; text-align:center;
  background:none; border:0; box-shadow:none;
  pointer-events:none;                  /* 빈 자리는 아래 본문이 받는다 */
}
body.premium-hud header.char-header::before{ display:none; }
body.premium-hud .char-name{
  display:block; margin:0 auto; max-width:calc(100% - 120px);  /* 좌 ‹마을 · 우 ⓘ 자리를 비운다 */
  min-width:0; text-align:center; pointer-events:none;
}
body.premium-hud .char-name strong{
  display:block; height:36px; line-height:36px;
  color:var(--pg-ink); font-size:.95rem; font-weight:600; letter-spacing:.04em;
  text-shadow:0 1px 6px rgba(18,11,32,.5);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
body.premium-hud .char-name span{
  display:block; margin-top:1px;
  color:var(--pg-sub); font-size:.66rem; line-height:1.2; letter-spacing:.01em;
  text-shadow:0 1px 5px rgba(18,11,32,.5);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* 음악 줄은 이름·부제 아래로 한 칸 더 내린다(제목 36 + 부제 16 + 여백 8) */
body.premium-hud .bgm-chip,
body.premium-hud.bgm-chip-on .bgm-chip,
body.premium-hud .tarot-coin-widget{
  top:calc(var(--pg-row1) + 36px + 16px + 8px);
}

/* 상단이 고정이 된 만큼 본문을 그만큼만 내린다 — [상단 때문에 본문이 과도하게 밀리지 않게] */
body.premium-hud{
  padding-top:calc(var(--pg-row1) + 36px + 16px + 8px + 34px + 10px);
}
body.premium-hud #chat{ padding-top:8px; }

/* ══ 첫 대화 카드 · 선택지 (2026-08-27 사람 지시 §8·§9) ═════════════
   [일반 메신저가 아니라 타로 상담 카드처럼 보여야 한다]. */
body.premium-hud #chat .msg.bot{
  max-width:min(84%, 340px);            /* 화면을 통째로 먹지 않게 */
  border-radius:18px; padding:12px 15px;
  border:1px solid rgba(201,169,97,.22); /* 샴페인 골드는 1px 선까지만 */
  background:rgba(46,32,58,.78);         /* 딥 플럼 */
  color:var(--pg-ink);
  box-shadow:0 2px 10px rgba(18,11,32,.22);   /* 강한 그림자 없음 */
  font-size:.9rem; line-height:1.6;
}
body.premium-hud #chat .msg.user{
  border-radius:18px; border:1px solid rgba(255,255,255,.14);
  background:rgba(70,56,84,.72); color:var(--pg-ink);
  box-shadow:none;
}

/* 선택지 — Primary 하나만 채워진 버튼, 나머지는 선만 */
body.premium-hud .choices button{
  border:1px solid rgba(255,255,255,.22);
  background:rgba(38,28,56,.62); color:var(--pg-ink);
  border-radius:999px; font-size:.82rem;
  box-shadow:none;
}
body.premium-hud .choices button:hover{ background:rgba(56,42,76,.8); color:var(--pg-ink); }
body.premium-hud .choices button.choice-primary{
  border-color:rgba(201,169,97,.55);
  background:linear-gradient(180deg, rgba(201,169,97,.24), rgba(201,169,97,.14));
  color:#f8f0df; font-weight:600;
}

/* ══ 빈 공간의 아주 약한 배경 효과 (§15) ═══════════════════════════
   새 라이브러리를 들이지 않는다 — CSS 두 겹이 전부다.
   [UI 보다 절대 강하게 보이지 않음] 이 조문이라 opacity 를 5% 아래로 둔다. */
body.premium-hud::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(60% 42% at 50% 62%, rgba(185,165,217,.13), transparent 70%);
}
body.premium-hud::after{
  content:""; position:fixed; z-index:0; pointer-events:none;
  left:50%; bottom:6%; width:min(72vw, 300px); aspect-ratio:1; transform:translateX(-50%);
  border:1px solid rgba(201,169,97,.05);
  border-radius:50%;
  box-shadow:0 0 0 26px rgba(201,169,97,.035) inset, 0 0 0 1px rgba(201,169,97,.045);
}
/*  ★ 헤더는 여기 넣지 않는다 — 위에서 position:fixed 로 세워 뒀는데
    relative 로 덮으면 흐름으로 돌아가 이름이 128px 아래로 내려간다(2026-08-27 실측).
    헤더는 이미 z-index:21 이라 배경 효과(z-index:0) 위에 있다. */
body.premium-hud #chat,
body.premium-hud #composer,
body.premium-hud .card-fan{ position:relative; z-index:1; }