/* ════════════════════════════════════════════════════════════════════
   saju-ui.css — 사주집 (하연) 화면
   ────────────────────────────────────────────────────────────────────
   2026-08-27 사람 지시(사주집 전용). §9 색 규칙:
     따뜻한 다크 브라운 · 크림 · 저채도 앰버 · 한지 베이지 · 샴페인 골드 소량
   금지: 네온 · 강한 Glow · 두꺼운 금색 프레임 · SALE 풍 · 상품마다 다른 색 · 과한 이모지

   ★ 상단 HUD(‹ 마을 · ⓘ · 미니 플레이어 · 은화)는 premium-hud.css 가 정한다.
     이 파일은 [사주집에서만 다른 것] — 상담사 줄과 상품 카드 다섯 장만 적는다.
   ★ 타로집(reading-ui.css)과 색이 다르다. 건물마다 정체성은 다르되 규격은 같다.
   ════════════════════════════════════════════════════════════════════ */

body.premium-hud{
  /* ★ 2026-09-10 사람 지시 [사주관 AI 상담화면 전체 UI 리뉴얼] — 라벤더/보라 계열을 걷고
     warm ivory · soft peach · apricot pink · champagne gold · subtle blue-hour navy 로.
     타로의 집(라일락)과 색 정체성이 겹치지 않게 한다(스펙 §색상 체계). 하연·세계관은 그대로다
     (팔레트만 바뀐다) — #207 채택 배경 그림은 무대(영상) 안에서만 보인다(saju.js 무대세우기()
     의 배경 옵션). 화면 전체를 그 사진으로 덮지 않는다. */
  --sj-ink:#53372c;              /* 짙은 브라운 — 아이보리 배경 위 글자(스펙 "짙은 차콜 브라운") */
  --sj-sub:#9c8268;              /* 보조 문구 — saju-landing.css 카드 서브텍스트와 같은 톤 */
  --sj-card:rgba(255,255,255,.88); /* 아이보리/화이트 카드 */
  --sj-card-hi:rgba(255,255,255,.98);
  --sj-line:rgba(217,183,123,.32); /* 샴페인 골드 라인 */
  --sj-gold:#d9b77b;             /* 샴페인 골드 — 소량 강조 그대로 */
  --sj-mint:#cdeadd;             /* 연한 민트 포인트(그대로 둔다 — 쓰는 자리 없음) */
  --sj-lav:#fbe3d8;              /* (옛 이름 유지) 연한 피치 포인트 — 태그·칩 배경 */
  --sj-user:#fdece2;             /* 손님 말풍선 — 연피치 */
  --sj-peach:#f8d7c4;            /* 소프트 피치 */
  --sj-apricot:#f3b9aa;          /* 애프리콧 핑크 */
  --sj-navy:#53657a;             /* subtle blue-hour navy — 보조 텍스트용 대안 */
}
body.premium-hud{
  background: linear-gradient(180deg, #fff8ef 0%, #fdf0e4 55%, #f8e4d6 100%);
}
body.premium-hud .sg-disclaimer[data-screen="saju"]{
  color:var(--sj-sub); background:rgba(255,255,255,.6);
}

/* ── 상단 상담사 줄 (타로집과 같은 규격) ─────────────────────────── */
body.premium-hud header.char-header{
  position:fixed; z-index:21; top:0; left:0; right:0;
  padding:var(--pg-row1) 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(--sj-ink); font-size:.95rem; font-weight:600; letter-spacing:.04em;
  text-shadow:0 1px 6px rgba(24,14,6,.5);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
body.premium-hud .char-name span{
  display:block; margin-top:1px;
  color:var(--sj-sub); font-size:.66rem; line-height:1.2;
  text-shadow:0 1px 5px rgba(24,14,6,.5);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
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; }

/* ── 상품 카드 다섯 장 ───────────────────────────────────────────
   [이름 / 분석 기준 / 이용 방식] 세 줄. 다섯 장이 **같은 규격**이다 —
   상품마다 다른 색을 주지 않는다(§9 금지). 다른 것은 [대표 상담] 한 장의 테두리뿐. */
.choices.saju-products{
  display:flex; flex-direction:column; gap:8px;
  align-self:stretch; margin:0 4px; width:auto;
}
.saju-products .saju-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  width:100%; min-height:0; padding:11px 14px;
  border:1px solid var(--sj-line); border-radius:14px;
  background:var(--sj-card); color:var(--sj-ink);
  font-family:inherit; text-align:left; cursor:pointer;
  box-shadow:0 2px 10px rgba(24,14,6,.22);
  transition:background-color .18s ease, transform .18s ease;
}
.saju-products .saju-card:active{ transform:translateY(1px); background:var(--sj-card-hi); }
.saju-products .sc-top{ display:flex; align-items:center; gap:8px; width:100%; }
.saju-products .sc-name{ font-size:.92rem; font-weight:600; letter-spacing:.01em; }
.saju-products .sc-base{ color:var(--sj-sub); font-size:.72rem; line-height:1.35; }
.saju-products .sc-use{ color:var(--sj-sub); font-size:.68rem; opacity:.86; }

/* 대표 상담 — 얇은 샴페인 골드 1px + 아주 약간 높은 대비. 그게 전부다. */
.saju-products .saju-card.is-featured{
  border-color:rgba(201,169,97,.5);
  background:var(--sj-card-hi);
}
.saju-products .sc-badge{
  margin-left:auto; flex:0 0 auto;
  padding:2px 8px; border-radius:999px;
  border:1px solid rgba(201,169,97,.5);
  color:var(--sj-gold); font-size:.6rem; font-weight:600; letter-spacing:.02em;
}

/* 하연 말풍선 — 타로집과 같은 규격, 색만 사주집 결로.
   2026-09-10 2차 보정 §3 — 폭을 84%→76%(340→300px) 로 줄인다 · [절대 유지] AI 응답
   말풍선도 같은 클래스를 쓰므로(챗 UI 공용) 여기서 줄여도 대화 로직은 안 바뀐다. */
/*  2026-09-10 3차 보정 §3 — padding·line-height 를 더 줄여 1~2줄 중심으로 보이게 한다. */
body.premium-hud #chat .msg.bot{
  max-width:min(76%, 300px);
  border-radius:16px; padding:9px 13px;
  border:1px solid var(--sj-line);
  background:var(--sj-card); color:var(--sj-ink);
  box-shadow:0 2px 10px rgba(120,100,90,.14);
  font-size:.88rem; line-height:1.45;
}
body.premium-hud #chat .msg.user{
  border-radius:18px; border:1px solid rgba(217,183,123,.28);
  background:var(--sj-user); color:var(--sj-ink); box-shadow:none;
}

/* ════════════════════════════════════════════════════════════════════
   전면 재배치(2026-09-05) — 새 컴포넌트 다섯
   ════════════════════════════════════════════════════════════════════ */

/* ── "내 사주 한 줄" 카드 (§6) — 작고 밝게, 첫 인사이트 직후 ─────────── */
body.premium-hud .sj-mini{
  max-width:min(88%, 360px); align-self:flex-start; margin-left:34px;
  padding:12px 14px; border-radius:16px;
  background:var(--sj-card); border:1px solid var(--sj-line);
  box-shadow:0 2px 10px rgba(120,100,90,.14);
}
body.premium-hud .sj-mini-title{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:.78rem; font-weight:700; color:var(--sj-sub); margin-bottom:4px;
}
body.premium-hud .sj-mini-line{ font-size:.92rem; color:var(--sj-ink); line-height:1.5; margin:0 0 8px; }
body.premium-hud .sj-mini-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
body.premium-hud .sj-mini-tags span{
  font-size:.72rem; color:var(--sj-sub); background:var(--sj-lav);
  border-radius:999px; padding:2px 9px;
}
body.premium-hud .sj-mini-open{
  align-self:flex-end; border:1px solid var(--sj-line); background:var(--sj-card-hi);
  color:var(--sj-ink); font:inherit; font-size:.8rem; font-weight:600;
  border-radius:999px; padding:6px 12px; cursor:pointer;
}

/* ── "하연이 발견했어요" 카드 (§11 · 2026-09-05 2차 감리 #10 — 과하지 않게 톤 다운) ──── */
body.premium-hud .sj-discover{
  max-width:min(84%, 340px); align-self:flex-start; margin-left:34px;
  padding:12px 14px; border-radius:16px; border-bottom-left-radius:4px;
  background:var(--sj-card); border:1px solid rgba(217,183,123,.35);
  border-left:3px solid var(--sj-gold);
  box-shadow:0 2px 10px rgba(120,100,90,.12);
}
body.premium-hud .sj-discover h4{
  margin:0 0 6px; font-size:.76rem; font-weight:700; color:#a86a3a; letter-spacing:.01em;
}
body.premium-hud .sj-discover p{ margin:0 0 10px; font-size:.9rem; color:var(--sj-ink); line-height:1.55; }

/* ── "왜 이렇게 봐" 근거 카드 (§13) ──────────────────────────────── */
body.premium-hud .sj-why{
  max-width:min(88%, 360px); align-self:flex-start; margin-left:34px;
  padding:12px 14px; border-radius:14px;
  background:var(--sj-card-hi); border:1px solid var(--sj-line);
}
body.premium-hud .sj-why h4{ margin:0 0 6px; font-size:.78rem; font-weight:700; color:var(--sj-sub); }
body.premium-hud .sj-why ul{ margin:0; padding-left:18px; }
body.premium-hud .sj-why li{ font-size:.84rem; color:var(--sj-ink); line-height:1.5; }

/* ── 종료 화면 [✦ 하연의 한마디 · ✦ 오늘 하연이 짚은 포인트] (상담 몰입감 고급화 1차 §6·§7) ──
   옛 .sj-memo(dl 형태 "오늘의 하연 메모")를 스펙 형태 두 카드로 갈랐다 — 같은 톤(아이보리 카드 ·
   샴페인골드 제목)을 그대로 물려받는다(새 색 발명 금지). */
body.premium-hud .sj-oneliner{
  align-self:stretch; margin:6px 0 2px; padding:14px 16px; border-radius:16px;
  background:var(--sj-card); border:1px solid var(--sj-line);
  box-shadow:0 4px 16px rgba(120,100,90,.16);
}
body.premium-hud .sj-oneliner h3{ margin:0 0 8px; font-size:.86rem; font-weight:700; color:var(--sj-gold); }
body.premium-hud .sj-oneliner-text{ margin:0; font-size:.96rem; line-height:1.6; color:var(--sj-ink); font-weight:600; }
body.premium-hud .sj-oneliner-next{ margin:8px 0 0; font-size:.74rem; color:var(--sj-sub); }

/*  §7·§8 — 정보량이 많은 프리미엄 4종 완료 때만 뜬다(saju.js SAJU_LONGFORM_CATEGORIES).
    .sj-why(§13 "왜 이렇게 봐" 근거 카드)와 같은 톤이지만 자리·트리거가 다르므로 클래스는 분리한다. */
body.premium-hud .sj-highlights{
  align-self:stretch; margin:2px 0 2px; padding:12px 16px; border-radius:14px;
  background:var(--sj-card-hi); border:1px solid var(--sj-line);
}
body.premium-hud .sj-highlights h4{ margin:0 0 6px; font-size:.78rem; font-weight:700; color:var(--sj-sub); }
body.premium-hud .sj-highlights ul{ margin:0; padding-left:18px; }
body.premium-hud .sj-highlights li{ font-size:.84rem; color:var(--sj-ink); line-height:1.5; margin-bottom:4px; }
body.premium-hud .sj-highlights li:last-child{ margin-bottom:0; }

/* ── ♡ 운명의 기록에 저장 (5차 · 2026-09-13) — 새 색·새 장식 없이 기존 카드 톤 그대로 ── */
body.premium-hud .sj-save-record{ align-self:stretch; margin:2px 0 4px; }
body.premium-hud .sj-save-btn{
  width:100%; padding:12px; border-radius:14px;
  background:var(--sj-card-hi); border:1px solid var(--sj-line);
  font-family:var(--vt-font-body); font-size:.86rem; font-weight:600; color:var(--sj-ink);
  cursor:pointer;
}
body.premium-hud .sj-save-btn:active{ transform:translateY(1px); }
body.premium-hud .sj-save-btn.is-saved{
  background:var(--sj-card); border-color:var(--sj-gold); color:var(--sj-gold); cursor:default;
}
body.premium-hud .sj-save-btn.is-saved:active{ transform:none; }

/* ── 긴 풀이 목차형 리포트 (상담 몰입감 고급화 3차 · 사람 지시 2026-09-12) ─────────────────
   "탭 메뉴·강한 네비게이션이 아니라 책갈피·챕터 안내처럼 조용하게"(지시 §3) — 새 색을 안 쓰고
   기존 --sj-* 토큰만 쓴다. 목차는 항목이 많을 수 있어(토정비결 13개) 가로 스크롤 chapter rail
   로 만든다(지시 §14 우선순위 1). "카드 안에 카드" 를 피하려고(§8) 섹션은 한 표면(.sj-report-body)
   위에서 구분선(hr)만으로 나뉜다 — 절마다 다시 박스를 두르지 않는다. */
body.premium-hud .sj-report{
  align-self:stretch; margin:6px 0 2px; border-radius:16px;
  background:var(--sj-card); border:1px solid var(--sj-line);
  box-shadow:0 4px 16px rgba(120,100,90,.16);
  /*  ★ 2026-09-13 실기기 실측 버그 — 여기 있던 `overflow:hidden`(목차 가로스크롤이 카드
      모서리 밖으로 안 삐져나가게 하려던 것)이 #chat(reading.css #chat{display:flex;
      flex-direction:column}) 안에서 이 카드를 **flex 자동 최소크기(overflow≠visible 이면
      min-height 가 auto 대신 0 이 된다)** 규칙에 걸리게 해, 본문 5591px 짜리 리포트가
      129px 로 찌그러져 그 아래가 통째로 잘렸다(13섹션 다 만들어졌는데 안 보였다 — #chat
      의 scrollHeight 도 552 로 쪼그라들어 목차 클릭 스크롤 이동조차 안 먹었다). 클리핑은
      `.sj-report-toc` 자신의 모서리 둥글림(border-radius)으로 대신하고, 이 카드는 다른
      카드들(.sj-oneliner 등)과 같이 overflow 를 안 건드린다. flex-shrink:0 은 혹시 모를
      재발을 막는 안전장치로 남긴다. */
  flex-shrink:0;
}
body.premium-hud .sj-report-toc{
  position:sticky; top:0; z-index:2;
  display:flex; gap:4px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding:9px 12px; background:var(--sj-card-hi);
  border-bottom:1px solid var(--sj-line);
  border-radius:16px 16px 0 0;   /* 부모의 overflow:hidden 없이 위쪽 모서리만 직접 둥글린다 */
  scrollbar-width:none;
}
body.premium-hud .sj-report-toc::-webkit-scrollbar{ display:none; }
body.premium-hud .sj-report-toc-item{
  flex:0 0 auto; display:flex; align-items:center; gap:5px;
  padding:7px 12px; min-height:34px;   /* §20 — 터치 타깃 34px, 너무 작지 않게 */
  border-radius:999px; border:1px solid transparent; background:transparent;
  font-family:var(--vt-font-body); font-size:.78rem; font-weight:500; color:var(--sj-sub);
  white-space:nowrap; cursor:pointer;
}
body.premium-hud .sj-report-toc-dot{
  width:5px; height:5px; border-radius:50%; background:var(--sj-line); flex:0 0 auto;
}
/*  §20 접근성 — 색만으로 활성 구분하지 않는다: 밑줄(underline) + dot 색 + font-weight 셋을 같이 쓴다. */
body.premium-hud .sj-report-toc-item.is-active{
  color:var(--sj-ink); font-weight:700; border-color:var(--sj-line);
  text-decoration:underline; text-decoration-color:var(--sj-gold); text-underline-offset:3px;
}
body.premium-hud .sj-report-toc-item.is-active .sj-report-toc-dot{ background:var(--sj-gold); }

body.premium-hud .sj-report-body{ padding:15px 17px 18px; }
body.premium-hud .sj-report-section{ scroll-margin-top:54px; }   /* 목차 바에 안 가리게 */
body.premium-hud .sj-report-h{
  margin:0 0 3px; font-family:var(--vt-font-display); font-size:1.02rem; font-weight:700; color:var(--sj-ink);
}
body.premium-hud .sj-report-sub{ margin:0 0 10px; font-size:.76rem; color:var(--sj-sub); }
body.premium-hud .sj-report-p{ margin:0; font-size:.92rem; line-height:1.7; color:var(--sj-ink); white-space:pre-wrap; }
body.premium-hud .sj-report-divider{ margin:18px 0; border:0; border-top:1px solid var(--sj-line); }