@font-face {
  font-family: "HeirofLight";
  src: url("fonts/HeirofLightRegular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "HeirofLight";
  src: url("fonts/HeirofLightBold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* 먹색 배경 위에 경면주사(鏡面朱砂) — 부적에 쓰는 선명한 주색 — 를 포인트로 올린 톤 */
  --bg: #0a0908;
  --bg-panel: #161110;
  --bg-panel-2: #1f1916;
  --ink: #f3e8db;
  --ink-muted: #a8988a;
  --border: #332a25;

  --brand-saju: #ff3b3b;
  --brand-tarot: #ef3f66;
  --brand-sinjeom: #ff1f1f;
  --red: #ff3131;
  --red-deep: #700d0d;
  --red-soft: rgba(255, 49, 49, 0.14);

  /* 이전 라이트 테마와의 호환을 위해 유지하는 별칭 — 모두 다크 서피스를 가리킨다 */
  --surface-100: var(--bg);
  --surface-200: var(--bg-panel);
  --accent-gold: var(--red);

  /* 제목용 폰트 — 명조체 대신 얇은 고딕체로 통일 */
  --font-serif: "Noto Sans KR", system-ui, sans-serif;
  --font-sans: "Noto Sans KR", system-ui, sans-serif;
  /* 캐릭터 이름 / 설명 전용 — 본문·UI 텍스트에는 쓰지 않는다 */
  --font-heiroflight: "HeirofLight", "Noto Sans KR", system-ui, sans-serif;

  --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px;
  --space-24: 24px; --space-32: 32px; --space-48: 48px;

  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* 2026-10-28(성후님 지시 — "모바일앱 실행할때 가끔 화면이 확대되어 손가락으로 다시
   축소해야하는경우가있어"): 아이폰 사파리/PWA는 글자 크기가 16px보다 작은 입력창에
   포커스가 가면 "읽기 편하게" 자동으로 화면을 확대한다 — 이 앱은 본문이 15px라
   font-size를 안 정해준 입력창마다 그 확대가 걸렸던 것. 모든 입력창을 16px 이상으로
   강제해서 그 자동 확대 자체가 안 일어나게 막는다(위의 개별 .xxx input 규칙들이
   먼저 적용되지만, 혹시 빠뜨린 입력창이 있어도 여기서 최종 안전망 역할을 한다).
   화면 밖으로 안 나가게(바깥 레이아웃 깨짐 방지)는 index.html의 viewport
   maximum-scale/user-scalable 설정과 짝을 이룬다. */
input:not([type="checkbox"]):not([type="radio"]), textarea, select { font-size: max(16px, 1em); }
body {
  background: var(--bg);
  background-image:
    radial-gradient(640px 420px at 85% -10%, rgba(255, 49, 49, 0.10), transparent 60%),
    radial-gradient(520px 360px at -10% 30%, rgba(255, 49, 49, 0.06), transparent 60%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
img, svg { display: block; }

.app-shell { max-width: 1040px; margin: 0 auto; padding: 0 var(--space-24) calc(88px + env(safe-area-inset-bottom, 0px)); }

/* ---------- Top bar ---------- */
/* 로고는 페이지가 바뀌어도 항상 화면 상단 정중앙에 고정 — 아이콘/뒤로가기 버튼 너비와 상관없이
   position:absolute + left:50%로 중앙을 고정하고, 나머지 요소는 양옆 flex로 흘려보낸다.
   2026-10-29(성후님 지시 — "상단이 화면밖으로 나갔어. 상단하단은 고정되어있어야해"):
   PWA standalone 모드(apple-mobile-web-app-status-bar-style=black-translucent)에서는
   기기 상태표시줄이 투명하게 웹뷰 위로 그대로 덮이는데, 지금까지 .topbar가 그 영역만큼
   padding-top을 안 챙겨서 시계·배터리 아이콘과 SIGNAL 로고·잔액 배지가 겹쳐 보였다
   (env(safe-area-inset-top) 추가로 해결). 또한 .topbar가 position:relative라 일반
   문서 흐름대로 스크롤을 따라 같이 밀려 올라가 화면 밖으로 사라졌는데, 하단 탭바
   (.bottom-nav)처럼 position:sticky로 상단에 고정해 하단바와 대칭을 맞춘다. */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: flex-end;
  /* .app-shell의 좌우 패딩(24px)만큼 바깥으로 음수 마진을 줘서 배경이 화면 끝까지 꽉 차게
     하고, 그만큼을 자체 padding으로 다시 넣어 내용물(로고·아이콘) 위치는 그대로 유지한다
     — 그러지 않으면 고정된 .topbar의 좌우 24px 틈으로 스크롤되는 콘텐츠가 비쳐 보인다. */
  margin: 0 calc(var(--space-24) * -1);
  padding: calc(var(--space-20, 20px) + env(safe-area-inset-top, 0px)) var(--space-24) var(--space-16);
  min-height: 56px;
  background: rgba(10, 9, 8, 0.92);
  backdrop-filter: blur(10px);
}
.wordmark {
  display: flex; align-items: center;
  font-family: var(--font-serif); font-weight: 500; font-size: 22px;
  letter-spacing: 0.01em; color: var(--red);
}
.topbar > .wordmark {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.wordmark-img { height: 25px; width: auto; display: block; }
.wordmark small { font-family: var(--font-sans); font-weight: 400; font-size: 12px; color: var(--ink-muted); margin-left: var(--space-8); }
.topbar-icons { display: flex; align-items: center; gap: var(--space-16); }
.icon-btn { color: var(--ink-muted); display: flex; align-items: center; justify-content: center; }
.icon-btn:hover, .icon-btn.active { color: var(--red); }

/* 2026-10-27 — 로그인 페이지의 "회원가입" 유도 링크. 기존 .form-note(12px)의 두 배 크기로
   키워서 눈에 잘 띄게 한다(성후님 지시). */
.login-signup-link {
  display: block; text-align: center; text-decoration: none;
  margin-top: var(--space-16); color: var(--ink-muted); font-size: 24px;
}
.login-signup-link b { color: var(--red); font-weight: 700; }
.login-signup-link:hover { color: var(--red); }

/* 2026-10-27 추가 — 세줄(햄버거) 메뉴 옆, 예전에 "오늘의일진" 원형 아이콘이 있던 자리에 로그인
   버튼을 둔다(그 아이콘은 하단 탭 "만세력"과 기능이 겹쳐 삭제). 로그인 버튼 옆에 회원가입 배지를
   따로 붙였다가 중앙 로고(SIGNAL)와 겹치는 문제가 반복돼(성후님 지적), 결국 로그인은 다른
   아이콘들과 똑같은 아이콘 버튼 하나만 남기고 회원가입 배지는 없앴다 — 회원가입 유도는 로그인
   페이지(#/login) 안의 "계정이 없어요 → 회원가입" 링크를 크게 키우는 쪽으로 옮겼다(아래
   .login-signup-link). */

/* ---------- 홈: 전문분야 필터 칩 ---------- */
.spec-filter-row {
  display: flex; gap: var(--space-8); overflow-x: auto; padding: var(--space-8) 0 var(--space-20, 20px);
  scrollbar-width: none;
}
.spec-filter-row::-webkit-scrollbar { display: none; }
.spec-chip {
  flex: none; padding: 9px 18px; border-radius: var(--radius-pill); border: 1px solid var(--border);
  background: transparent; color: var(--ink-muted); font-size: 14px; font-weight: 600; white-space: nowrap;
}
.spec-chip.active { background: var(--red); color: #140403; border-color: var(--red); }

/* ---------- 홈: 선생님 배너 캐러셀 ---------- */
.banner-wrap { position: relative; }
.banner-card {
  position: relative; display: block; width: 100%;
  aspect-ratio: 9 / 17.5;
  /* 196px는 .topbar+.spec-filter-row가 차지하는 높이를 어림한 값이다. .topbar가
     env(safe-area-inset-top)만큼 더 커졌으니(위 .topbar 수정 참고), 그만큼을 여기서도
     빼줘야 "배너까지 포함한 첫 화면"이 기기와 무관하게 한 화면 안에 들어온다 —
     안 빼주면 노치/다이나믹아일랜드가 있는 기기에서 배너가 그 높이만큼 더 길어져
     스크롤이 생긴다(2026-10-29, 성후님 지시). */
  height: calc(100dvh - 196px - env(safe-area-inset-top, 0px));
  max-height: calc(100dvh - 196px - env(safe-area-inset-top, 0px));
  min-height: 420px;
  border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border);
  background: var(--bg-panel);
}
.banner-bg {
  position: absolute; inset: 0; background-size: cover; background-position: top center;
  transform: scale(1.01);
}
.banner-bg.no-img { background-image: linear-gradient(165deg, var(--cat-color, var(--red-deep)), #0a0908 75%); }
/* 이벤트 슬라이드 배경 — 영화 포스터처럼 시그널 선생님들의 얼굴을 타일로 깔아준다(2026-10-25).
   .banner-scrim이 그 위에 그대로 덮여서 아래쪽 텍스트는 평소처럼 또렷하게 읽힌다. */
.banner-bg--poster { background-image: none; background-color: #0a0908; }
.banner-poster-grid {
  position: absolute; inset: 0; display: grid;
  grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr);
  gap: 1px; filter: grayscale(0.55) brightness(0.62) contrast(1.05);
}
.banner-poster-face { background-size: cover; background-position: top center; }
.banner-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(10,9,8,0.05) 0%, rgba(10,9,8,0.1) 45%, rgba(10,9,8,0.9) 82%, rgba(10,9,8,0.98) 100%);
}
.banner-counter {
  position: absolute; top: var(--space-16); right: var(--space-16); z-index: 2;
  background: rgba(10,9,8,0.55); border: 1px solid rgba(255,255,255,0.18);
  color: #fff; font-size: 12px; padding: 5px 12px; border-radius: var(--radius-pill);
  backdrop-filter: blur(4px);
}
.banner-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: var(--space-24); }
.banner-card .banner-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(10,9,8,0.45); border: 1px solid rgba(255,255,255,0.25); color: #fff;
  backdrop-filter: blur(3px);
}
.banner-card .banner-nav.prev { left: var(--space-12); }
.banner-card .banner-nav.next { right: var(--space-12); }
.banner-card .banner-nav:hover { background: rgba(255, 49, 49, 0.55); border-color: var(--red); color: #fff; }
.banner-spec {
  display: inline-block; font-size: 12px; font-weight: 700; color: var(--cat-color, var(--red));
  background: rgba(255,255,255,0.08); border: 1px solid var(--cat-color, var(--red));
  border-radius: var(--radius-pill); padding: 4px 12px; margin-bottom: var(--space-12);
}
.banner-name { font-family: var(--font-heiroflight); font-size: 60px; line-height: 1.1; letter-spacing: -0.07em; font-weight: 400; color: #fff; margin: 0 0 4px; text-shadow: 0 2px 14px rgba(0,0,0,0.6); white-space: nowrap; }
/* "옥황상제의 딸"처럼 긴 이름은 60px 그대로는 한 줄에 안 들어온다 — 글자 수가 많을 때만
   (app.js에서 길이로 판단해 이 클래스를 붙인다) 크기를 줄이고 자간을 더 좁혀 한 줄을 지킨다. */
.banner-name--long { font-size: 38px; letter-spacing: -0.04em; }
/* 이벤트 슬라이드 제목 — 캐릭터 이름(2~6자)과 달리 문장형 제목이라 한 줄 고정폭(nowrap)이 아니라
   카드 폭 안에서 최대 2줄까지 자연스럽게 줄바꿈되게 한다(2026-10-25). */
.banner-name--event {
  font-family: var(--font-serif); font-size: 28px; line-height: 1.35; letter-spacing: -0.01em;
  font-weight: 800; white-space: normal; word-break: keep-all; overflow-wrap: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.banner-cat {
  display: inline-block; font-family: var(--font-serif); font-size: 22px; font-weight: 700;
  color: var(--cat-color, var(--red)); letter-spacing: 0.02em; margin-top: 4px;
  text-shadow: 0 2px 16px rgba(0,0,0,0.55);
}
.banner-nav {
  flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--bg-panel); color: var(--ink-muted); font-size: 18px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.banner-nav:hover { color: var(--red); border-color: var(--red); }
.banner-empty { padding: var(--space-48) var(--space-16); text-align: center; color: var(--ink-muted); border: 1px dashed var(--border); border-radius: var(--radius-lg); }


/* ---------- 하단 고정 탭바 ---------- */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; justify-content: space-around;
  background: rgba(10,9,8,0.92); backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
  padding: 10px var(--space-8) calc(10px + env(safe-area-inset-bottom, 0px));
}
.bottom-nav-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--ink-muted); font-size: 11px; flex: 1; padding: 4px 0;
}
.bottom-nav-item.active { color: var(--red); }
.bottom-nav-item svg { flex: none; }
/* 2026-10-26 추가 — "말걸기" 탭만 다른 선 아이콘들 사이에서 눈에 띄도록, 동그란 포인트 배지
   안에 아이콘을 넣어 하이라이트했다(다른 탭보다 먼저 눌러보고 싶게 만드는 용도). */
.bottom-nav-item--accent { gap: 5px; }
.bottom-nav-icon-badge {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(145deg, var(--red), var(--red-deep));
  color: #faf6ef;
  box-shadow: 0 3px 10px rgba(255, 49, 49, 0.35);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.bottom-nav-icon-badge svg { width: 19px; height: 19px; }
.bottom-nav-item--accent:active .bottom-nav-icon-badge { transform: scale(0.94); }
.bottom-nav-item--accent.active .bottom-nav-icon-badge { box-shadow: 0 3px 14px rgba(255, 49, 49, 0.55); }
.bottom-nav-item--accent.active { color: var(--red); }

/* ---------- Specialty chips ---------- */
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-8); padding: var(--space-24) 0; }
.chip {
  padding: 7px 16px; border-radius: var(--radius-pill); border: 1px solid var(--border);
  font-size: 13px; color: var(--ink-muted); background: var(--bg-panel);
}
.chip.active { background: var(--cat-color, var(--red)); color: #140403; border-color: var(--cat-color, var(--red)); font-weight: 600; }

/* ---------- Character grid ---------- */
.char-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-16); padding-bottom: var(--space-48); }
.char-card {
  background: var(--bg-panel); border-radius: var(--radius-md); padding: var(--space-16);
  border: 1px solid var(--border); transition: border-color 0.15s ease;
}
.char-card:hover { border-color: var(--cat-color, var(--red)); }
.char-avatar {
  width: 48px; height: 48px; border-radius: 50%; background: var(--cat-color, var(--red));
  color: #140403; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-weight: 700; font-size: 18px; margin-bottom: var(--space-12);
  overflow: hidden; box-shadow: 0 0 0 1px var(--border);
}
.char-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.char-card .spec-tag { font-size: 12px; color: var(--cat-color, var(--red)); font-weight: 600; margin-bottom: 2px; }
.char-card h3 { font-family: var(--font-heiroflight); font-weight: 400; font-size: 38px; line-height: 1.15; letter-spacing: -0.07em; margin: 0 0 var(--space-8); color: var(--ink); }
.char-card .look { font-family: var(--font-heiroflight); color: var(--ink-muted); font-size: 13px; margin: 0; }

/* ---------- Page header (category/character) ---------- */
.page-head { padding: var(--space-32) 0 var(--space-8); }
.page-head .crumb { font-size: 13px; color: var(--ink-muted); margin-bottom: var(--space-8); }
.page-head h1 { font-family: var(--font-serif); font-weight: 300; font-size: 28px; margin: 0; color: var(--ink); }

/* ---------- Character detail / consultation ---------- */
.char-detail { display: grid; grid-template-columns: 220px 1fr; gap: var(--space-32); padding: var(--space-24) 0 var(--space-48); }
.char-detail .side { text-align: left; }
.char-detail .side .char-avatar { width: 96px; height: 96px; font-size: 32px; margin-bottom: var(--space-16); }
.char-detail .side h2 { font-family: var(--font-heiroflight); font-weight: 400; font-size: 25px; margin: 0 0 var(--space-4); color: var(--ink); }
.char-detail .side .spec-tag { font-size: 13px; color: var(--cat-color, var(--red)); font-weight: 600; margin-bottom: var(--space-16); display: block; }
.char-detail .side .meta { font-family: var(--font-heiroflight); font-size: 13px; color: var(--ink-muted); margin-bottom: var(--space-12); }
.char-detail .side .meta b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }

.chat-panel { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-24); }
.chat-messages { max-height: 440px; overflow-y: auto; padding-right: var(--space-4); }
.bubble { max-width: 80%; padding: 12px 16px; border-radius: var(--radius-md); margin-bottom: var(--space-12); font-size: 16.8px; } /* 채팅 글자 20% 확대(2026-10-27, 가독성 개선 요청) */
.bubble.char { background: var(--bg-panel-2); border: 1px solid var(--border); color: var(--ink); }
.bubble.user { background: var(--red); color: #140403; margin-left: auto; font-weight: 500; }
.chat-input-row { display: flex; gap: var(--space-8); margin-top: var(--space-16); }
.chat-input-row input {
  flex: 1; padding: 11px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  font-size: 16px; background: var(--bg-panel-2); color: var(--ink);
}
.chat-input-row input::placeholder { color: var(--ink-muted); }
.chat-input-row button { background: var(--cat-color, var(--red)); color: #140403; padding: 11px 20px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 700; }
.hero-cta {
  display: inline-block; background: var(--red); color: #140403;
  padding: 11px 22px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 700;
  box-shadow: 0 8px 24px rgba(255, 49, 49, 0.25);
}
.hero-cta:hover { background: #ff4747; }

.consult-cta { margin-top: var(--space-24); text-align: center; }
/* .btn-main은 .consult-cta 안에서만이 아니라 카드/챕터 본문 등 어디서든 같은 모습으로 보이게
   전역 클래스로 둔다(2026-10-29 수정 — 이전엔 .consult-cta .btn-main으로만 걸려 있어서, 관상의
   "내게 어울리는 이상형" 챕터 안에 있는 "이상형 모습 보기" 버튼은 스타일이 전혀 먹지 않고
   그냥 밑줄 없는 글자처럼만 보였다). */
.btn-main {
  display: inline-block; background: var(--red); color: #140403;
  padding: 13px 32px; border-radius: var(--radius-sm); font-weight: 700; font-size: 15px;
  border: none; box-shadow: 0 8px 24px rgba(255, 49, 49, 0.25);
}
.btn-main:disabled { opacity: 0.45; box-shadow: none; }

/* 캐릭터 상담 — 빠른 응답 / 분석 진행바 / 결제 카드 */
.quick-replies { display: flex; gap: var(--space-8); margin-top: var(--space-16); }
.quick-reply {
  padding: 9px 20px; border-radius: var(--radius-pill); border: 1px solid var(--border);
  background: var(--bg-panel-2); font-size: 14px; color: var(--ink);
}
.quick-reply:hover { background: var(--cat-color, var(--red)); color: #140403; border-color: var(--cat-color, var(--red)); }
.quick-reply.selected { background: var(--cat-color, var(--red)); color: #140403; border-color: var(--cat-color, var(--red)); font-weight: 700; }
/* 생년월일 입력 화면의 양력/음력 토글 — 입력창 바로 위, 살짝 더 붙여서 한 세트처럼 보이게 */
.caltype-toggle { margin-top: 0; margin-bottom: 4px; }
.caltype-toggle .quick-reply { flex: 1; text-align: center; padding: 8px 0; }

.progress-wrap { margin-top: var(--space-16); }
.progress-track { height: 4px; background: var(--border); border-radius: var(--radius-pill); overflow: hidden; }
.progress-fill { height: 100%; background: var(--cat-color, var(--red)); transition: width 0.4s ease; }
.progress-label { font-size: 12px; color: var(--ink-muted); margin-top: var(--space-8); }

.pay-card { background: var(--bg-panel-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-24); margin-top: var(--space-16); }
.pay-card .plan-name { font-family: var(--font-serif); font-weight: 500; font-size: 18px; margin-bottom: 4px; color: var(--ink); }
.pay-card .plan-price { font-size: 26px; font-weight: 700; margin-bottom: var(--space-16); color: var(--red); }
.pay-card .pay-methods { display: flex; gap: var(--space-8); margin-bottom: var(--space-16); }
.pay-card .pay-method {
  flex: 1; padding: var(--space-12); border: 1px solid var(--border); border-radius: var(--radius-sm);
  text-align: center; font-size: 13px; color: var(--ink-muted);
}
.pay-card .pay-method.selected { border-color: var(--cat-color, var(--red)); color: var(--ink); background: var(--red-soft); font-weight: 600; }
.pay-card .pay-btn { width: 100%; background: var(--cat-color, var(--red)); color: #140403; padding: 13px; border-radius: var(--radius-sm); font-weight: 700; font-size: 15px; }
.pay-card .pay-note { font-size: 12px; color: var(--ink-muted); margin-top: var(--space-12); text-align: center; }

/* ---------- 만세력 기록 / 보관함 ---------- */
.manse-section { margin-top: var(--space-32); }
.manse-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-12); }
.manse-section-head h2 { font-family: var(--font-serif); font-weight: 500; font-size: 17px; margin: 0; color: var(--ink); }
.manse-more { font-size: 13px; color: var(--ink-muted); }
.manse-more:hover { color: var(--red); }
.manse-list { display: flex; flex-direction: column; gap: var(--space-12); margin-bottom: var(--space-32); }
.manse-list--archive { margin-top: var(--space-16); }
.manse-card {
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: 16px;
  padding: var(--space-16);
}
.manse-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.manse-label {
  font-size: 12px; font-weight: 700; color: var(--cat-color, var(--red));
  background: var(--red-soft); padding: 3px 10px; border-radius: var(--radius-pill);
}
.manse-date { font-size: 12px; color: var(--ink-muted); }
.manse-char { font-family: var(--font-serif); font-size: 15px; color: var(--ink); margin-bottom: 4px; }
.manse-birth { font-size: 12px; color: var(--ink-muted); margin-bottom: 4px; }
.manse-concern { font-size: 13px; color: var(--ink-muted); margin-bottom: 6px; }
.manse-form-field { margin-bottom: var(--space-16); }
.manse-form-field label { display: block; font-size: 13px; color: var(--ink-muted); margin-bottom: 6px; }
.manse-form-field input[type="text"] { width: 100%; }
.manse-form-error { font-size: 13px; color: var(--red); margin-bottom: var(--space-12); }
.manse-strength { font-size: 13px; color: var(--ink); margin-bottom: var(--space-12); line-height: 1.5; }
.manse-card-actions { display: flex; flex-direction: column; gap: var(--space-8); }
.manse-card .quick-reply { width: 100%; text-align: center; }
.manse-card .quick-reply.ghost { background: transparent; border-color: var(--border); color: var(--ink-muted); }
.manse-card .quick-reply.ghost:hover { background: transparent; color: var(--cat-color, var(--red)); border-color: var(--cat-color, var(--red)); }
/* 2026-10-27 추가(성후님 지시 — 만세력 사주명식 삭제·사주팔자 보기) */
.manse-card .quick-reply.danger { color: var(--red); border-color: var(--red); }
.manse-card .quick-reply.danger:hover { background: var(--red); color: #fff; border-color: var(--red); }
.manse-pillars-box { display: none; margin-top: var(--space-12); padding-top: var(--space-12); border-top: 1px dashed var(--border); }
.manse-pillars-box.open { display: block; }

/* ---------- 오늘의운세 ---------- */
.fortune-tabs { display: flex; gap: var(--space-8); padding: var(--space-24) 0; }
.fortune-tab {
  padding: 9px 18px; border-radius: var(--radius-pill); border: 1px solid var(--border);
  font-size: 13px; color: var(--ink-muted); background: var(--bg-panel);
}
.fortune-tab.active { background: var(--red); color: #140403; border-color: var(--red); font-weight: 600; }
.fortune-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-32); margin-bottom: var(--space-48); }
.fortune-card .pillar-small { font-family: var(--font-serif); font-weight: 300; font-size: 22px; color: var(--red); margin-bottom: var(--space-16); }
.fortune-card .reading { font-size: 16px; line-height: 1.8; margin-bottom: var(--space-24); color: var(--ink); }
.fortune-card .speaker { font-size: 13px; color: var(--ink-muted); margin-top: var(--space-16); }

.app-footer {
  border-top: 1px solid var(--border); padding: var(--space-24) 0 var(--space-32);
  text-align: center;
}
.footer-copy {
  font-family: "Georgia", "Times New Roman", serif; font-style: italic; font-size: 13px;
  letter-spacing: 0.03em; color: var(--ink-muted); margin-bottom: 6px;
}
.footer-director { font-size: 11px; letter-spacing: 0.08em; color: var(--ink-muted); opacity: 0.7; text-transform: uppercase; }
/* 전자상거래법상 사업자 정보 표기 — 눈에 띌 필요는 없지만 읽을 수는 있어야 하므로 footer-copy보다는 살짝 더 또렷하게 둔다 */
.footer-biz { font-size: 11px; line-height: 1.6; color: var(--ink-muted); opacity: 0.75; letter-spacing: 0.01em; margin-top: 4px; }

/* 메뉴 화면 맨 아래의 작은 회사/개발자 저작권 표기 — 화면 전체에서 떠들썩하게 노출되지 않도록 메뉴 탭에만 조용히 둔다 */
.menu-legal { text-align: center; font-size: 11px; color: var(--ink-muted); opacity: 0.6; margin-top: var(--space-24); letter-spacing: 0.02em; }

@media (max-width: 720px) {
  .hero { grid-template-columns: 1fr; }
  .char-grid { grid-template-columns: repeat(2, 1fr); }
  .char-detail { grid-template-columns: 1fr; }
  .cat-band { grid-template-columns: 40px 1fr; }
  .cat-band .go { display: none; }
}
@media (max-width: 480px) {
  .char-grid { grid-template-columns: 1fr; }
}

/* ---------- 몰입형 상담 화면 (타이트사주류 풀스크린 메신저 UI) ---------- */
/* 캐릭터 이미지가 화면 전체를 채우는 배경이 되고, 그 위에 말풍선이 하단에 쌓인다.
   .char-detail/.side 박스형 레이아웃은 이 화면에서는 더 이상 쓰지 않는다. */
.consult-stage {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column;
  background: #000;
  overflow: hidden;
}
.consult-bg-wrap { position: absolute; inset: 0; z-index: 0; }
.consult-bg-room {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  background-color: #0a0908; filter: saturate(1.05);
}
.consult-bg-char {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  transition: opacity 0.26s ease;
}
.consult-bg-char.fading { opacity: 0; }
.consult-bg-char.no-pose { object-position: center 20%; }
/* 응용동작 탭 넘김 안내 — 하단 채팅 영역 바로 위, 화면 가운데에 은은하게 떠 있는다 */
.char-stage-dots {
  position: absolute; left: 0; right: 0; bottom: calc(58vh + var(--space-12));
  display: flex; justify-content: center; gap: 6px; z-index: 1; pointer-events: none;
}
.char-stage-dots .dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.35); transition: background 0.2s ease, width 0.2s ease; }
.char-stage-dots .dot.on { background: var(--ink); width: 14px; border-radius: var(--radius-pill); }
.char-stage-hint {
  position: absolute; left: 0; right: 0; bottom: calc(58vh + var(--space-24)); z-index: 1; pointer-events: none;
  text-align: center; font-size: 11px; color: var(--ink-muted); letter-spacing: 0.02em;
  text-shadow: 0 1px 6px rgba(0,0,0,0.7);
}
.consult-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(10,9,8,0.5) 0%, rgba(10,9,8,0.03) 22%, rgba(10,9,8,0.03) 52%, rgba(10,9,8,0.62) 76%, rgba(10,9,8,0.9) 100%);
}

.consult-wordmark-bar {
  position: relative; z-index: 2;
  display: flex; justify-content: center;
  padding: calc(var(--space-8) + env(safe-area-inset-top, 0px)) var(--space-16) 0;
}
.consult-wordmark-bar .wordmark--consult .wordmark-img { height: 18px; filter: drop-shadow(0 1px 6px rgba(0,0,0,0.6)); }
.consult-top {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: var(--space-12);
  padding: var(--space-8) var(--space-16) var(--space-12);
}
.consult-back {
  width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(10,9,8,0.45); color: var(--ink); backdrop-filter: blur(6px); flex: none;
}
.consult-top-name {
  flex: 1; font-family: var(--font-heiroflight); font-weight: 400; font-size: 34px; line-height: 1.2; letter-spacing: -0.07em; color: var(--ink);
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px;
}
.consult-top-name > span { font-family: var(--font-sans); font-weight: 400; font-size: 13px; letter-spacing: normal; color: var(--ink-muted); }
.consult-info-btn {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: rgba(10,9,8,0.45); color: var(--ink); font-size: 15px; backdrop-filter: blur(6px);
}
.consult-info-btn:hover { background: var(--cat-color, var(--red)); color: #140403; }

.char-info-sheet {
  position: relative; z-index: 2; margin: 0 var(--space-16) var(--space-12);
  background: rgba(10,9,8,0.72); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: var(--space-16); backdrop-filter: blur(8px);
}
.char-info-sheet .meta { font-family: var(--font-heiroflight); font-size: 13px; color: var(--ink-muted); margin-bottom: var(--space-8); }
.char-info-sheet .meta:last-child { margin-bottom: 0; }
.char-info-sheet .meta b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }
.char-info-sheet[hidden] { display: none; }

.consult-bottom {
  position: relative; z-index: 2; margin-top: auto;
  padding: 0 var(--space-16) calc(var(--space-16) + env(safe-area-inset-bottom, 0px));
  max-height: 84vh; display: flex; flex-direction: column;
  /* 결제카드처럼 내용이 길어지면(특히 작은 모바일 화면) 채팅 말풍선 영역(.chat-messages)만으로는
     다 안 담겨서 결제 버튼이 화면 아래로 밀려 잘려버렸다 — 바깥 .consult-stage가 overflow:hidden이라
     스크롤도 안 되고 보이지도 않던 버그. 이 패널 자체를 세로 스크롤 가능하게 만들어 해결한다. */
  overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0;
}

/* 풀스크린 배경 위에 얹히는 말풍선 — 불투명 패널 대신 반투명 유리 질감으로 가독성만 확보한다.
   캐릭터·배경이 채팅창에 가려지지 않도록 전체적으로 더 투명하게 하고, 스크롤되는 말풍선 목록의
   맨 위쪽만 마스크로 자연스럽게 사라지게 해서 그 위로 배경이 비쳐 보이게 한다.
   2026-10-27(성후님 지시 — "글자가 사라지는 부분이 화면 중간이라 더 위로 늘려달라, 스크롤해도
   이동하는 부분을 최소화해야 글 읽기가 수월해질듯"): 읽는 중간에 문장이 자꾸 희미해지며 다시
   스크롤해 올려야 하는 피로감을 줄이기 위해 — (1) 채팅 영역 자체를 36vh→58vh로 늘려 한 번에
   보이는 분량을 키우고, (2) 흐려지는 구간(마스크 그라데이션)도 상대적으로 훨씬 짧게 줄여서
   화면 위쪽 일부만 배경에 자연스럽게 녹아들고 나머지 대부분은 끝까지 또렷하게 보이게 했다. */
.consult-bottom .chat-panel { background: none; border: none; padding: 0; }
.consult-bottom .chat-messages {
  max-height: 58vh;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.6) 10%, #000 22%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.6) 10%, #000 22%);
  padding-top: var(--space-16);
}
.consult-bottom .bubble {
  max-width: 78%; backdrop-filter: blur(12px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.consult-bottom .bubble.char { background: rgba(10,9,8,0.4); border: 1px solid rgba(255,255,255,0.1); color: var(--ink); }
.consult-bottom .bubble.user { background: color-mix(in srgb, var(--cat-color, var(--red)) 82%, transparent); color: #140403; }
.consult-bottom .chat-input-row input { background: rgba(10,9,8,0.45); border: 1px solid rgba(255,255,255,0.14); backdrop-filter: blur(10px); }
.consult-bottom .tarot-drawn-strip,
.consult-bottom .tarot-shuffle-wrap,
.consult-bottom .tarot-spread,
.consult-bottom .pay-card { background: rgba(10,9,8,0.4); border-radius: var(--radius-md); padding: var(--space-12); backdrop-filter: blur(10px); }
.consult-bottom .pay-card { background: rgba(10,9,8,0.58); padding: var(--space-24); border: 1px solid rgba(255,255,255,0.1); }
.consult-bottom .analyzing-panel { background: rgba(10,9,8,0.46); }

.notes-toggle {
  display: block; margin-bottom: var(--space-12);
  padding: 9px 16px; border-radius: var(--radius-pill); border: 1px solid rgba(255,255,255,0.15);
  background: rgba(10,9,8,0.5); color: var(--ink); font-size: 13px; backdrop-filter: blur(8px);
  align-self: flex-start;
}
.notes-toggle:hover { border-color: var(--cat-color, var(--red)); color: var(--cat-color, var(--red)); }

/* ---------- 분석 중 — 캐릭터 가상 스토리 패널 ---------- */
.analyzing-panel {
  background: rgba(10,9,8,0.62); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-lg);
  padding: var(--space-24); backdrop-filter: blur(10px);
}
.analyzing-badge {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--cat-color, var(--red)); background: var(--red-soft); padding: 4px 12px;
  border-radius: var(--radius-pill); margin-bottom: var(--space-12);
}
.analyzing-story { font-size: 15px; line-height: 1.75; color: var(--ink); margin: 0 0 var(--space-8); }

/* 사주 원국 기둥 표 — 분석 중 단계에서 실제 계산된 년/월/일/시주를 보여준다(타이트사주 벤치마킹).
   실제 만세력 앱처럼 글자 타일을 오행 색으로 구분하되, 전통 먹색/적색 대신 더 밝고 채도 높은
   "젊은" 팔레트를 쓰고, 타일 모양도 각진 사각이 아니라 코너가 둥근 사각(rounded square)으로 통일한다. */
.pillar-grid { display: flex; gap: 8px; margin-bottom: var(--space-16); }
.pillar-col {
  flex: 1; text-align: center; min-width: 0;
}
.pillar-sipseong { font-size: 10px; color: var(--ink-muted); line-height: 1.3; min-height: 13px; font-weight: 600; letter-spacing: 0.02em; }
.pillar-sipseong.sub { margin-top: 6px; }
/* 2026-10-15 수정: 원국 간지는 한자가 들어가는 게 맞다 — 한자를 큰 글자로, 한글 음은
   그 아래 작게 같이 적는다(세로로 쌓음). */
.pillar-char {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: relative; aspect-ratio: 1 / 1; width: 100%; margin-top: 4px; gap: 1px;
  font-family: var(--font-serif); line-height: 1;
  border-radius: 14px; box-shadow: 0 3px 10px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.08); color: var(--ink);
}
.pillar-char-hanja { font-size: 20px; font-weight: 800; }
.pillar-char-ko { font-size: 10px; font-weight: 600; opacity: 0.75; }
.pillar-char.el-wood  { background: linear-gradient(155deg, #4ee08a, #1fb866); color: #0a2b17; }
.pillar-char.el-fire  { background: linear-gradient(155deg, #ff7a8a, #ff4d6a); color: #3a0009; }
.pillar-char.el-earth { background: linear-gradient(155deg, #ffd166, #ffab2e); color: #3a2400; }
.pillar-char.el-metal { background: linear-gradient(155deg, #f3f3fb, #d7d8ea); color: #2a2a3a; }
.pillar-char.el-water { background: linear-gradient(155deg, #6f7dff, #4452e8); color: #fff; }
.pillar-title { font-size: 10px; color: var(--ink-muted); margin-top: 6px; font-weight: 600; }
/* 2026-10-15 수정: 년주/월주/일주/시주 이름을 기둥 아래가 아니라 위로 올린다(성후님 지적). */
.pillar-title-top { margin-top: 0; margin-bottom: 6px; font-size: 11px; }

/* 만세력 정밀보기 전용 — 지장간/12운성/납음오행/공망/신살까지 더 보여주는 확장판.
   천간(위)·지지(아래) 배치는 pillar-grid와 동일하게 두고, 그 아래에 작은 글자로 덧붙인다. */
.pillar-grid--rich .pillar-extra { margin-top: 8px; border-top: 1px dashed var(--border); padding-top: 6px; }
.pillar-extra-row { font-size: 10px; line-height: 1.5; color: var(--ink-muted); word-break: keep-all; }
.pillar-extra-row:first-child { color: var(--ink); font-weight: 600; }
.pillar-grid-summary { font-size: 12px; color: var(--ink-muted); text-align: center; margin-top: 4px; }

/* 분석 진행 — 구간형(세그먼트) 진행바 */
.analyzing-segments { display: flex; gap: 4px; margin-top: var(--space-16); }
.analyzing-segments .seg { flex: 1; height: 4px; border-radius: var(--radius-pill); background: var(--border); overflow: hidden; }
.analyzing-segments .seg.done, .analyzing-segments .seg.current { background: var(--cat-color, var(--red)); }

/* 타이틀 카드 — 분석 직후 잠깐 떴다 사라지는 전환 연출(타이트사주 벤치마킹) */
.title-flash {
  position: fixed; inset: 0; z-index: 998; opacity: 0; transition: opacity 0.38s ease; pointer-events: none;
}
.title-flash.show { opacity: 1; }
.title-flash-bg {
  position: absolute; inset: 0; background-size: cover; background-position: top center;
  background-color: #0a0908; transform: scale(1.03);
}
.title-flash-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,9,8,0.55) 0%, rgba(10,9,8,0.82) 60%, rgba(10,9,8,0.96) 100%);
}
.title-flash-body {
  position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 0 24px;
}
.title-flash-name { font-family: var(--font-heiroflight); font-size: 30px; color: var(--ink-muted); letter-spacing: -0.06em; }
/* 2026-10-15 추가: 타로 캐릭터는 이름 뒤에 "마스터" 호칭이 붙는데, 이름과 같은 크기로
   나란히 쓰면 묻혀 보인다는 지적 — 이름은 그대로 두고 "마스터"만 한 줄 아래로 내려
   절반 크기의 보조 글자로 분리한다(charNameDisplayHtml, app.js). */
.char-name-wrap { display: inline-block; }
.char-title-sub { display: block; font-size: 0.5em; line-height: 1.3; letter-spacing: 0; opacity: 0.75; margin-top: 2px; }
.title-flash-word { font-family: var(--font-serif); font-weight: 700; font-size: 34px; color: var(--ink); text-shadow: 0 2px 20px rgba(0,0,0,0.6); }

/* ---------- 풀이 노트 시트 ---------- */
.notes-sheet { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-end; }
.notes-sheet-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); }
.notes-sheet-panel {
  position: relative; z-index: 1; width: 100%; max-height: 96vh; margin: 0 auto;
  max-width: 1040px; background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: calc(var(--space-24) + env(safe-area-inset-top, 0px)) var(--space-24) var(--space-24);
  display: flex; flex-direction: column; gap: var(--space-16);
  animation: notes-sheet-up 0.22s ease;
  overflow: hidden; /* 내부 스크롤은 .notes-sheet-body가 전담하고, 패널 자체는 96vh를 넘지 않게 자른다 */
  /* 2026-10-27(성후님 지시 — "뒤에 캐릭터를 다 가려도 되니 풀이노트 내용이 가득 차도록 늘려달라"):
     78vh였던 걸 거의 전체화면(96vh)까지 키웠다. 뒤에 깔린 캐릭터 배경이 거의 다 가려지더라도,
     읽을 수 있는 영역을 최대한 넓혀 스크롤을 덜 하게 하는 쪽을 택했다. */
}
@keyframes notes-sheet-up { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.notes-sheet-head { flex: none; display: flex; align-items: center; justify-content: space-between; }
.notes-sheet-head h3 { font-family: var(--font-serif); font-weight: 500; font-size: 21.6px; margin: 0; color: var(--ink); }
.notes-sheet-close {
  width: 30px; height: 30px; border-radius: 50%; background: var(--bg-panel-2); color: var(--ink-muted); font-size: 14px;
}
.notes-sheet-close:hover { color: var(--ink); }
/* flex 컬럼 안에서 overflow:auto가 먹히려면 min-height:0이 꼭 필요하다 — 이게 없으면 자식이
   콘텐츠 크기만큼 늘어나 버려서 패널 밖으로 넘치기만 하고 스크롤은 생기지 않는다
   (풀이노트 12개가 쌓였을 때 "스크롤이 밑으로 안 내려간다"던 버그의 원인, 2026-10-27 수정). */
.notes-sheet-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; gap: var(--space-16);
}
.notes-sheet-ask { flex: none; padding-top: var(--space-16); border-top: 1px solid var(--border); }
.notes-sheet-ask .chat-input-row { margin-top: 0; }
.note-entry { border-left: 2px solid var(--cat-color, var(--red)); padding-left: var(--space-12); }
.note-label { font-size: 14.4px; font-weight: 700; color: var(--cat-color, var(--red)); margin-bottom: 4px; }
.note-text { font-size: 16.8px; line-height: 1.7; color: var(--ink); white-space: pre-line; }
.note-text strong { color: var(--cat-color, var(--red)); }

/* 풀이노트 보강(2026-10-16): 아이콘 헤더 · 캐릭터 말투 · 한눈요약 칩 · 키워드 태그 */
/* 풀이노트·채팅 글자 20% 확대(2026-10-27, "글자가 너무 작다"는 의견 반영) — 아이콘/배지류는
   그대로 두고 실제로 읽는 본문 글자 크기만 전부 ×1.2 했다. */
.note-head { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.note-head .note-label { margin-bottom: 0; }
.note-icon { font-size: 15px; line-height: 1; }
.note-voice {
  font-size: 15px; font-style: italic; color: var(--ink-muted); margin: 2px 0 8px;
}
.note-summary {
  font-size: 16.2px; font-weight: 600; line-height: 1.5; color: var(--ink);
  background: color-mix(in srgb, var(--cat-color, var(--red)) 10%, transparent);
  border-radius: 8px; padding: 7px 10px; margin-bottom: 8px;
}
.note-keywords { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.note-chip {
  font-size: 13.8px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--cat-color, var(--red)) 16%, transparent);
  color: var(--cat-color, var(--red));
}

/* 풀이노트 주제별 챕터(2026-10-27, 성후님 지시 — 경쟁앱 비교 후 "헬로우봇형 주제별 챕터 +
   포스텔러형 가벼운 카드" 결정): 시간순 로그 대신, 연애·재물·건강 같은 주제 카드를 쌓아두고
   눌러서 펼쳐보는 구조. 노트 본문(.note-entry)은 그대로 재사용한다. */
.note-chapter {
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-panel-2);
  overflow: hidden;
  /* .notes-sheet-body(flex 컬럼, overflow-y:auto) 안의 flex 아이템인데, 이 요소 자신도
     overflow:hidden이라 flexbox 자동 최소 크기 규칙에 따라 min-height가 0으로 계산돼
     내용 크기만큼 못 늘어나고 눌려 버렸다 — 그래서 시트가 콘텐츠를 다 담지 못한 채 스크롤도
     안 생기는 버그였다(2026-10-27 수정). flex-shrink:0으로 항상 내용 높이 그대로 유지하고,
     넘치는 부분은 전부 .notes-sheet-body 쪽 스크롤에 맡긴다. */
  flex-shrink: 0;
}
.note-chapter-head {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: var(--space-12) var(--space-16);
  background: transparent; text-align: left; cursor: pointer;
}
.note-chapter-icon {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 14px;
  background: color-mix(in srgb, var(--cat-color, var(--red)) 14%, transparent);
}
.note-chapter-title { flex: none; font-size: 16.2px; font-weight: 700; color: var(--ink); }
.note-chapter-count {
  flex: none; font-size: 13.2px; font-weight: 700; color: var(--cat-color, var(--red));
  background: color-mix(in srgb, var(--cat-color, var(--red)) 16%, transparent);
  border-radius: 999px; padding: 1px 7px;
}
.note-chapter-preview {
  flex: 1; min-width: 0; font-size: 15px; color: var(--ink-muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.note-chapter-chevron { flex: none; font-size: 16px; color: var(--ink-muted); transform: rotate(90deg); transition: transform 0.15s ease; }
.note-chapter-body {
  display: none; flex-direction: column; gap: var(--space-12);
  padding: 0 var(--space-16) var(--space-16); border-top: 1px dashed var(--border); margin-top: -1px;
  padding-top: var(--space-12);
}
.note-chapter-body.open { display: flex; }
.note-chapter-head.open .note-chapter-chevron { transform: rotate(270deg); }

@media (max-width: 480px) {
  .consult-bottom { max-height: 78vh; }
}

/* ---------- 스토리형 풀스크린 리빌 (선생 캐릭터 전면 등장) ---------- */
.story-overlay { position: fixed; inset: 0; z-index: 999; background: #000; }
.story-chapter {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  opacity: 0; pointer-events: none; transition: opacity 0.45s ease;
}
.story-chapter.active { opacity: 1; pointer-events: auto; }
.story-bg {
  position: absolute; inset: 0; background-size: cover; background-position: top center;
  background-color: #0a0908; transform: scale(1.02);
}
.story-bg.no-img { background-image: linear-gradient(160deg, var(--cat-color, var(--red-deep)), #0a0908 72%); }
.story-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(10,9,8,0.05) 0%, rgba(10,9,8,0.15) 38%, rgba(10,9,8,0.88) 76%, rgba(10,9,8,0.98) 100%);
}
.story-scrim::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(520px 320px at 50% 115%, rgba(255, 49, 49, 0.28), transparent 70%);
}
.story-tapzone { position: absolute; inset: 0; display: flex; z-index: 1; }
.story-tapzone span { flex: 1; }
.story-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; align-items: center; gap: var(--space-16);
  padding: calc(var(--space-16) + env(safe-area-inset-top, 0px)) var(--space-16) 0;
}
.story-progress { display: flex; gap: 6px; flex: 1; }
.story-progress .seg { flex: 1; height: 3px; background: rgba(255,255,255,0.22); border-radius: 2px; overflow: hidden; }
.story-progress .seg .fill { height: 100%; width: 0; background: var(--red); }
.story-progress .seg.done .fill { width: 100%; }
.story-progress .seg.current .fill { width: 55%; }
.story-skip { color: rgba(255,255,255,0.75); font-size: 13px; background: none; border: none; white-space: nowrap; }
.story-body { position: relative; z-index: 2; padding: 0 var(--space-24) calc(var(--space-32) + env(safe-area-inset-bottom, 0px)); color: #fff; }
.story-badge {
  display: inline-block; font-family: var(--font-serif); font-size: 13px; letter-spacing: 0.06em;
  color: var(--red); border: 1px solid rgba(255, 49, 49, 0.55); background: rgba(255, 49, 49, 0.1);
  border-radius: var(--radius-pill); padding: 4px 14px; margin-bottom: var(--space-16);
}
.story-headline {
  font-family: var(--font-serif); font-size: 23px; line-height: 1.5; font-weight: 400;
  margin: 0 0 var(--space-24); text-shadow: 0 2px 14px rgba(0,0,0,0.6); color: #fff;
}
.story-bullets { list-style: none; margin: 0 0 var(--space-24); padding: 0; display: flex; flex-direction: column; gap: var(--space-12); }
.story-bullets li { font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,0.88); padding-left: var(--space-16); position: relative; }
.story-bullets li::before {
  content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--red); box-shadow: 0 0 8px rgba(255, 49, 49, 0.8);
}
.story-bullets li b { color: #fff; }
.story-cta-wrap { position: relative; z-index: 3; }
.story-cta { width: 100%; background: var(--red); color: #140403; font-weight: 700; font-size: 15px; padding: 14px; border-radius: var(--radius-sm); box-shadow: 0 10px 28px rgba(255, 49, 49, 0.35); }
.story-hint { text-align: center; font-size: 12px; color: rgba(255,255,255,0.5); margin-top: var(--space-12); }

@media (max-width: 480px) {
  .story-headline { font-size: 20px; }
}

/* ---------- 캐릭터 입장 시퀀스 (문 열고 들어가기 → 환영인사 → 캐릭터 소개) ---------- */
/* story-overlay와 구조는 비슷하지만, 탭으로 넘기는 게 아니라 하단 버튼을 눌러야만 다음 장면으로
   넘어간다 — 그래서 탭존(story-tapzone)이 없고, 대신 대사·발걸음 점이 다 나타난 뒤에야 버튼이
   눌리도록(opacity+pointer-events를 함께 애니메이션) 의도적으로 "들어서는 시간"을 늘린다. */
.entry-overlay { position: fixed; inset: 0; z-index: 999; background: #000; display: flex; flex-direction: column; justify-content: flex-end; }
.entry-bg {
  position: absolute; inset: 0; background-size: cover; background-position: top center;
  background-color: #0a0908;
  animation: entryBgReveal 2.6s ease-out forwards;
}
.entry-bg.no-img { background-image: linear-gradient(160deg, var(--cat-color, var(--red-deep)), #0a0908 72%); }
@keyframes entryBgReveal {
  0% { opacity: 0; transform: scale(1.12); filter: brightness(0.3) blur(6px); }
  100% { opacity: 1; transform: scale(1); filter: brightness(0.62) blur(0px); }
}
.entry-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(10,9,8,0.12) 0%, rgba(10,9,8,0.28) 40%, rgba(10,9,8,0.9) 76%, rgba(10,9,8,0.98) 100%);
}
.entry-skip {
  position: absolute; z-index: 3; top: calc(var(--space-16) + env(safe-area-inset-top, 0px)); right: var(--space-16);
  color: rgba(255,255,255,0.65); font-size: 13px; background: none; border: none;
}
.entry-steps {
  position: absolute; z-index: 3; top: calc(var(--space-16) + env(safe-area-inset-top, 0px)); left: var(--space-16);
  display: flex; gap: 6px; width: 120px;
}
.entry-steps .tick { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.22); }
.entry-steps .tick.done, .entry-steps .tick.current { background: var(--cat-color, var(--red)); }
.entry-body { position: relative; z-index: 2; padding: 0 var(--space-24) calc(var(--space-32) + env(safe-area-inset-bottom, 0px)); color: #fff; }
.entry-badge {
  display: inline-block; font-family: var(--font-serif); font-size: 13px; letter-spacing: 0.06em;
  color: var(--cat-color, var(--red)); border: 1px solid color-mix(in srgb, var(--cat-color, var(--red)) 55%, transparent);
  background: color-mix(in srgb, var(--cat-color, var(--red)) 12%, transparent);
  border-radius: var(--radius-pill); padding: 4px 14px; margin-bottom: var(--space-16);
}
.entry-line {
  font-family: var(--font-serif); font-size: 17px; line-height: 1.7; color: #fff; margin: 0 0 var(--space-12);
  text-shadow: 0 2px 10px rgba(0,0,0,0.6);
  opacity: 0; animation: entryLineIn 0.8s ease forwards;
}
@keyframes entryLineIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.entry-footsteps { display: flex; gap: 8px; margin: var(--space-12) 0 var(--space-16); }
.entry-footsteps span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--cat-color, var(--red));
  opacity: 0; animation: entryDotIn 0.5s ease forwards;
}
@keyframes entryDotIn { from { opacity: 0; } to { opacity: 0.85; } }
.entry-next {
  width: 100%; background: var(--cat-color, var(--red)); color: #140403; font-weight: 700; font-size: 15px;
  padding: 14px; border-radius: var(--radius-sm); box-shadow: 0 10px 28px rgba(0,0,0,0.4);
  opacity: 0; pointer-events: none;
  animation: entryBtnIn 0.6s ease forwards;
}
/* pointer-events는 보간되지 않고 끝 프레임에서 한 번에 바뀌는 성질을 이용해, 대사가 다 나타나기
   전에는(= 애니메이션 끝나기 전에는) 버튼이 보여도 눌리지 않게 막아둔다. */
@keyframes entryBtnIn {
  0% { opacity: 0; pointer-events: none; }
  99% { opacity: 1; pointer-events: none; }
  100% { opacity: 1; pointer-events: auto; }
}
.entry-hint { text-align: center; font-size: 12px; color: rgba(255,255,255,0.45); margin-top: var(--space-12); }

@media (max-width: 480px) {
  .entry-line { font-size: 15.5px; }
}

/* ---------- 서브 페이지 공통 (메뉴/회원가입/가격정책/보관함/검색) ---------- */
/* 로고는 .topbar의 absolute 중앙 정렬로 이미 고정되므로, 여기서는 뒤로가기 버튼만 왼쪽에 둔다. */
.topbar--sub { display: flex; align-items: center; justify-content: space-between; }
.wordmark--center { font-size: 18px; }
.icon-btn-spacer { width: 32px; }
.page-sub { color: var(--ink-muted); font-size: 13px; margin: 4px 0 0; }

.menu-section-label { font-size: 12px; color: var(--ink-muted); letter-spacing: 0.04em; padding: var(--space-16) 0 var(--space-8); }
.menu-row {
  width: 100%; display: flex; align-items: center; gap: var(--space-12);
  padding: var(--space-16) var(--space-8); border-radius: var(--radius-md);
  color: var(--ink); font-size: 15px; text-align: left; border-bottom: 1px solid var(--border);
}
.menu-row svg:first-child { color: var(--ink-muted); flex: none; }
.menu-row svg:last-child { margin-left: auto; color: var(--ink-muted); flex: none; }
.menu-row span:not(.menu-row-badge) { flex: 1; }
.menu-row-badge { color: var(--red); font-weight: 700; font-size: 13px; }
.menu-divider { height: var(--space-16); }

.menu-promo {
  display: block; margin: var(--space-16) 0; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border); position: relative; min-height: 140px;
  background: linear-gradient(135deg, var(--red-deep) 0%, #140403 85%);
  display: flex; align-items: center;
}
.menu-promo-text { padding: var(--space-24); }
.menu-promo-title { font-size: 17px; font-weight: 500; color: #fff; line-height: 1.5; margin-bottom: var(--space-12); }
.menu-promo-cta { font-size: 13px; color: var(--red); font-weight: 700; }

.form-card { display: flex; flex-direction: column; gap: var(--space-16); margin-top: var(--space-16); }
.form-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-muted); }
.form-field input {
  padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--bg-panel-2); color: var(--ink); font-size: 16px;
}
.form-check { display: flex; align-items: center; gap: var(--space-8); font-size: 13px; color: var(--ink-muted); }
.form-submit { width: 100%; text-align: center; margin-top: var(--space-8); }
.form-note { font-size: 12px; color: var(--ink-muted); margin-top: var(--space-16); line-height: 1.6; }

/* 카카오 로그인(2026-10-26 추가) — 카카오 브랜드 가이드의 기본 노란 버튼(#FEE500 배경, 검정 텍스트). */
.kakao-login-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 16px; border-radius: var(--radius-sm); border: none; background: #fee500;
  color: #191919; font-size: 15px; font-weight: 600; cursor: pointer;
}
.kakao-login-btn:active { opacity: 0.85; }
.form-divider {
  display: flex; align-items: center; gap: 10px; margin: var(--space-16) 0;
  font-size: 12px; color: var(--ink-muted);
}
.form-divider::before, .form-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.price-list { display: flex; flex-direction: column; gap: var(--space-12); margin-top: var(--space-16); }
.price-card {
  position: relative; background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: var(--space-20, 20px);
}
.price-badge {
  position: absolute; top: var(--space-16); right: var(--space-16);
  background: var(--red-soft); color: var(--red); font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: var(--radius-pill);
}
.price-name { font-size: 17px; font-weight: 500; color: var(--ink); margin-bottom: 4px; }
.price-desc { font-size: 13px; color: var(--ink-muted); margin-bottom: var(--space-16); }
.price-amount { font-size: 24px; font-weight: 700; color: var(--red); margin-bottom: var(--space-16); }
.charge-btn { width: 100%; background: var(--red); color: #140403; padding: 12px; border-radius: var(--radius-sm); font-weight: 700; font-size: 14px; }

.archive-empty { text-align: center; padding: var(--space-48) var(--space-16); color: var(--ink-muted); }
.archive-empty-icon { color: var(--ink-muted); opacity: 0.5; display: flex; justify-content: center; margin-bottom: var(--space-16); }
.archive-empty-icon svg { width: 40px; height: 40px; }
.archive-empty p { margin: 0 0 var(--space-8); }
.archive-empty-sub { font-size: 13px; margin-bottom: var(--space-24) !important; }

:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* ---------- 타로: 실제 상담소처럼 카드를 섞고 뽑는 인터랙션 ---------- */

.tarot-card-face-svg, .tarot-card-back-svg { width: 100%; height: 100%; display: block; }
/* 천명타로 — 실제 일러스트 카드(이미지 기반) 공용 스타일. SVG 카드와 같은 컨테이너에서 꽉 차게 보이도록 맞춘다. */
/* 8%(퍼센트 값)로 둬서 실제 렌더 크기가 84px든 224px든(덱선택/뽑기/리빌 등 위치마다 다르다)
   항상 카드 크기에 비례해 둥글게 보인다 — 실제 카드 그림 자체의 둥근 테두리 프레임이 사각 캔버스
   모서리에 남기는 아주 작은 여백 삼각형도 이 라운딩으로 함께 가려진다. */
.tarot-card-face-img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 8%; }
/* 카드마다 원본 그림의 여백/테두리 질감이 제각각이라 생기는 "통일성 없는" 느낌을 없애기 위해,
   모든 카드 표시 지점에 동일한 금박 톤 테두리를 둘러 실제 타로덱의 카드 베젤처럼 통일한다
   (2026-10-21). box-sizing: border-box로 둬서 테두리가 카드 크기를 벗어나지 않게 한다. */
:root { --tarot-frame-clr: rgba(199, 164, 101, 0.6); }
.deck-choice-visual, .tarot-mini-face, .tarot-slot-back, .tarot-slot-front, .tarot-reveal-card, .note-card-img {
  box-sizing: border-box;
  border: 3px solid var(--tarot-frame-clr);
}
.tarot-mini-face { border-width: 2px; }
.tarot-reveal-card { border-width: 5px; }
.tc-frame { fill: var(--bg-panel-2); stroke: var(--red); stroke-width: 2; }
.tc-inner { fill: none; stroke: var(--border); stroke-width: 1; }
.tc-corner {
  font-size: 11px; font-weight: 700; fill: var(--ink-muted); font-family: var(--font-sans);
}
.tc-corner-br { text-anchor: end; }
.tc-icon {
  fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  color: var(--red);
}
.tc-major .tc-icon, .tc-major .tc-corner { color: var(--red); }
.tc-wands .tc-icon { color: #ff9a4d; }
.tc-cups .tc-icon { color: #6db8ff; }
.tc-swords .tc-icon { color: #cfd3dc; }
.tc-pentacles .tc-icon { color: #e0b949; }
.tc-name {
  font-size: 9.5px; fill: var(--ink); font-family: var(--font-serif); font-weight: 500;
}
.tc-back-frame { fill: var(--bg-panel-2); stroke: var(--red); stroke-width: 2; }
.tc-back-inner { fill: var(--bg); stroke: var(--red-soft); stroke-width: 1; }
.tc-back-ring { fill: none; stroke: var(--red); stroke-width: 1.4; opacity: 0.8; }

/* 프리미엄 벡터 라인아트 업그레이드 — 할로 링 · 코트 모티프 · 핍 배치 · 장식 요소 */
.tc-hairline { fill: none; stroke: currentColor; stroke-width: 0.5; opacity: 0.28; color: var(--ink-muted); }
.tc-glow-fill { pointer-events: none; }
.tc-corner-flourish { fill: none; stroke: var(--red-soft); stroke-width: 1; stroke-linecap: round; opacity: 0.85; }
.tc-halo { fill: none; stroke: currentColor; stroke-width: 0.6; opacity: 0.35; }
.tc-halo-tick { stroke: currentColor; stroke-width: 0.8; opacity: 0.5; }
.tc-court-motif { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.95; }
.tc-pips { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.9; }
.tc-name-rule { stroke: currentColor; stroke-width: 0.6; opacity: 0.3; color: var(--ink-muted); }

/* 마야·카이 전용 — 상담 시작 전 유니버셜/천명 덱을 고르는 화면 */
.deck-choice-wrap { display: flex; justify-content: center; gap: var(--space-16); margin-top: var(--space-16); flex-wrap: wrap; }
.deck-choice-card {
  width: 128px; display: flex; flex-direction: column; align-items: center; gap: var(--space-8);
  cursor: pointer; padding: var(--space-12); border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--bg-panel-2); transition: border-color 0.2s ease, transform 0.2s ease;
}
.deck-choice-card:hover { border-color: var(--red-soft); transform: translateY(-2px); }
.deck-choice-visual { width: 84px; height: 134px; border-radius: 8%; overflow: hidden; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5); }
.deck-choice-label { font-size: 13px; font-weight: 600; color: var(--ink); }
.deck-choice-sub { font-size: 11px; color: var(--ink-muted); text-align: center; line-height: 1.3; }

/* 운세 기간(1/3/6/10년) 선택 카드 — deck-choice-card와 같은 톤, 2열 그리드로 배치 */
.sewoon-plan-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); margin-top: var(--space-16); }
.sewoon-plan-card {
  position: relative; cursor: pointer; padding: var(--space-16) var(--space-12); border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--bg-panel-2); text-align: center;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.sewoon-plan-card:hover { border-color: var(--red-soft); transform: translateY(-2px); }
.sewoon-plan-badge {
  position: absolute; top: -8px; right: 10px; background: var(--red); color: #140403;
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill);
}
.sewoon-plan-label { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.sewoon-plan-desc { font-size: 11px; color: var(--ink-muted); line-height: 1.4; margin-bottom: 8px; }
.sewoon-plan-price { font-size: 15px; font-weight: 700; color: var(--cat-color, var(--red)); }

/* 셔플 연출 — 뒷면 카드 5장을 살짝 겹쳐두고, 흔들며 리플(riffle)하듯 섞는다 */
.tarot-shuffle-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--space-16); margin-top: var(--space-16); }
.tarot-deck { position: relative; width: 110px; height: 176px; }
.tarot-deck-card {
  position: absolute; inset: 0; width: 100px; height: 160px; margin: auto;
  transform: translateX(calc((var(--n) - 2) * 3px)) rotate(calc((var(--n) - 2) * 2.4deg));
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
  transition: transform 0.3s ease;
}
.tarot-deck.is-shuffling .tarot-deck-card {
  animation: tarotRiffle 1.3s ease-in-out;
  animation-delay: calc(var(--n) * 0.06s);
}
@keyframes tarotRiffle {
  0% { transform: translateX(calc((var(--n) - 2) * 3px)) rotate(calc((var(--n) - 2) * 2.4deg)); }
  30% { transform: translateX(calc((var(--n) - 2) * 26px)) rotate(calc((var(--n) - 2) * 14deg)) translateY(-10px); }
  60% { transform: translateX(calc((var(--n) - 2) * -16px)) rotate(calc((var(--n) - 2) * -10deg)) translateY(6px); }
  100% { transform: translateX(calc((var(--n) - 2) * 3px)) rotate(calc((var(--n) - 2) * 2.4deg)); }
}

/* 카드 뽑기 — 자리별로 뒷면 카드가 깔려 있고, 탭하면 3D로 뒤집힌다 */
.tarot-spread { display: flex; justify-content: center; gap: var(--space-16); margin-top: var(--space-16); flex-wrap: wrap; }
.tarot-slot { width: 84px; display: flex; flex-direction: column; align-items: center; gap: var(--space-8); }
.tarot-slot-inner {
  position: relative; width: 84px; height: 134px; perspective: 800px;
  transform-style: preserve-3d; transition: transform 0.65s cubic-bezier(0.3, 0.1, 0.2, 1);
}
.tarot-slot.flipped .tarot-slot-inner { transform: rotateY(180deg); }
.tarot-slot-back, .tarot-slot-front {
  position: absolute; inset: 0; backface-visibility: hidden; border-radius: 8%; overflow: hidden;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}
.tarot-slot-front { transform: rotateY(180deg); }
.tarot-slot-front.reversed .tarot-card-face-svg, .tarot-slot-front.reversed .tarot-card-face-img { transform: rotate(180deg); }
.tarot-slot.is-next { cursor: pointer; }
.tarot-slot.is-next .tarot-slot-back { animation: tarotGlow 1.6s ease-in-out infinite; }
@keyframes tarotGlow {
  0%, 100% { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--red-soft); }
  50% { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), 0 0 0 3px var(--red); }
}
.tarot-slot-label { font-size: 12px; color: var(--ink-muted); text-align: center; }

/* 뽑은 카드가 상담 내내 작게 남아있는 띠 — 상담소에 카드를 펼쳐둔 느낌을 유지한다 */
.tarot-drawn-strip { display: flex; gap: var(--space-12); margin-bottom: var(--space-16); overflow-x: auto; padding-bottom: 4px; }
.tarot-mini-card { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tarot-mini-face { width: 46px; height: 74px; border-radius: 8%; overflow: hidden; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45); }
.tarot-mini-face.reversed .tarot-card-face-svg, .tarot-mini-face.reversed .tarot-card-face-img { transform: rotate(180deg); }
.tarot-mini-label { font-size: 10px; color: var(--ink-muted); max-width: 54px; text-align: center; line-height: 1.3; }

/* ---------- 타로 풀스크린 셔플/뽑기 무대 (2026-10-20) ----------
   "카드를 섞고 뽑는 액션이 기대감·재미·흥분을 줘야 한다"는 요청에 맞춰, 셔플/뽑기 단계는
   채팅창 안의 작은 위젯이 아니라 화면 전체를 덮는 무대로 바뀐다. 실제 뽑을 카드는 2배 크기로
   키우고, 장식용 카드를 더해 늘 꽉 찬 덱처럼 보이게 한다(실제 자리 수와 무관하게 풍성함 유지). */
.tarot-fullstage {
  position: fixed; inset: 0; z-index: 300;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse 60% 45% at 50% 28%, rgba(167, 40, 34, 0.26), transparent 70%),
    linear-gradient(180deg, #0b0807 0%, #070504 55%, #030202 100%);
  overflow: hidden; padding: var(--space-24) var(--space-16);
  animation: tarotStageFadeIn 0.35s ease both;
}
@keyframes tarotStageFadeIn { from { opacity: 0; } to { opacity: 1; } }
.tarot-fullstage-title {
  font-family: var(--font-serif); font-size: 19px; font-weight: 600; color: var(--ink); text-align: center;
  margin-bottom: 6px; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.65);
}
.tarot-fullstage-sub { font-size: 12.5px; color: var(--ink-muted); text-align: center; margin-bottom: var(--space-24); }

/* 셔플 단계 — 장식 카드만으로 꽉 찬 무지개 모양 부채꼴을 깔아둔다(실제로 뽑을 카드는 아직
   정해지지 않은 상태로 보여준다). 2026-10-21: 더 뚜렷한 "무지개" 곡선이 되도록 회전각을 넓혔다. */
.tarot-fan { position: relative; width: min(94vw, 600px); height: 196px; margin: 0 auto var(--space-20); }
.tarot-fan-card {
  position: absolute; left: 50%; bottom: 0; width: 88px; height: 141px; margin-left: -44px;
  transform-origin: 50% 118%;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.55));
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tarot-fan.is-shuffling .tarot-fan-card { animation: tarotFanRiffle 1.3s ease-in-out; }
@keyframes tarotFanRiffle {
  0%, 100% { transform: rotate(var(--rot, 0deg)) translateY(0) scale(1); }
  25% { transform: rotate(calc(var(--rot, 0deg) * -1.4)) translateY(-22px) scale(1.05); }
  55% { transform: rotate(calc(var(--rot, 0deg) * 1.6)) translateY(8px) scale(0.97); }
  80% { transform: rotate(calc(var(--rot, 0deg) * -0.6)) translateY(-10px) scale(1.02); }
}

/* 뽑기 단계 — "진짜 카드"와 "장식 카드"를 따로 두지 않고, 뒷면 카드 전체를 하나의 넓은 무지개
   부채꼴로 펼쳐 그중 아무 카드나 짚으면 뽑히게 한다(실제 상담에서 손님이 손 가는 대로 짚는
   느낌을 살리기 위해 2026-10-21 재설계 — 어떤 자리가 "진짜"인지는 짚는 순간에 정해진다). */
.tarot-draw-fan { position: relative; width: min(97vw, 860px); height: 320px; margin: 0 auto; }
.tarot-draw-fan .tarot-fan-card.pick {
  width: 104px; height: 166px; margin-left: -52px;
  cursor: pointer; transition: transform 0.25s ease, filter 0.25s ease;
}
.tarot-draw-fan .tarot-fan-card.pick:hover { filter: drop-shadow(0 16px 28px rgba(167, 40, 34, 0.55)) brightness(1.08); }
.tarot-draw-fan .tarot-fan-card.pick:not(.picked) { animation: tarotRainbowBeckon 3.1s ease-in-out infinite; }
@keyframes tarotRainbowBeckon {
  0%, 100% { transform: rotate(var(--rot, 0deg)) translateY(0); }
  50% { transform: rotate(var(--rot, 0deg)) translateY(-10px); }
}
.tarot-draw-fan .tarot-fan-card.picked {
  transition: transform 0.4s cubic-bezier(0.3, 0.8, 0.2, 1), opacity 0.4s ease, filter 0.4s ease;
  transform: rotate(var(--rot, 0deg)) translateY(-72px) scale(1.2) !important;
  opacity: 0; filter: brightness(1.5); pointer-events: none;
}

/* 카드를 뽑는 순간 — 화면 전체를 덮는 스포트라이트로 그 한 장만 확 떠오르며 집중시킨다
   (설렘·기대감을 살리기 위해 자동으로 넘어가지 않고, 직접 "다음 카드" 버튼을 눌러야 이어간다). */
.tarot-reveal-spotlight {
  position: fixed; inset: 0; z-index: 320;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(3, 2, 2, 0.8); backdrop-filter: blur(3px);
  animation: tarotStageFadeIn 0.2s ease both;
}
.tarot-reveal-card {
  width: 224px; height: 358px; border-radius: 8%; overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.75), 0 0 0 1px var(--red-soft);
  animation: tarotRevealPop 0.5s cubic-bezier(0.22, 1.4, 0.4, 1) both;
}
.tarot-reveal-card.reversed .tarot-card-face-img { transform: rotate(180deg); }
@keyframes tarotRevealPop {
  0% { transform: scale(0.35) rotateY(85deg); opacity: 0; }
  65% { transform: scale(1.07) rotateY(0deg); opacity: 1; }
  100% { transform: scale(1) rotateY(0deg); }
}
.tarot-reveal-label { margin-top: var(--space-16); font-size: 13px; color: var(--ink-muted); text-align: center; }
.tarot-reveal-name {
  margin-top: 4px; font-family: var(--font-serif); font-size: 21px; font-weight: 600; color: var(--ink);
  text-align: center; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}
.tarot-reveal-cta { margin-top: var(--space-24); }

@media (prefers-reduced-motion: reduce) {
  .tarot-fan.is-shuffling .tarot-fan-card,
  .tarot-draw-fan .tarot-fan-card.pick,
  .tarot-reveal-card { animation: none; }
}

/* 풀이노트에 붙는 카드 그림 — 어떤 카드가 그 해석을 줬는지 글만으론 알기 어려웠던 문제를
   그림으로 바로 보이게 한다(2026-10-20). 2026-10-21: 썸네일로 작게 곁다는 대신, 카드를 그
   풀이의 메인 비주얼로 키워 위쪽 중앙에 두고 글은 그 아래로 내렸다("카드가 메인이 되도록"). */
.note-body-with-card { display: flex; flex-direction: column; align-items: center; gap: var(--space-12); }
.note-card-img {
  flex: none; width: 140px; height: 224px; border-radius: 8%; object-fit: cover;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.55);
}
.note-card-img.reversed { transform: rotate(180deg); }
.note-entry.has-card-img .note-text { flex: none; width: 100%; }

/* 무료 "오늘의일진" 오방기 진입 카드 — 탭하면 풀스크린 실사 이미지 연출(ohbanggiOpenDailyDraw)이
   열린다(2026-10-26, 기존 손그림 깃발 5개 위젯을 실사 이미지 연출로 교체하며 추가). */
.ohbanggi-daily-intro { text-align: center; padding: var(--space-8) 0 var(--space-4); }
.ohbanggi-daily-intro-img {
  width: 100%; aspect-ratio: 4/3; border-radius: var(--radius-lg); background-size: cover; background-position: center 30%;
  margin-bottom: var(--space-16); box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.ohbanggi-daily-intro-title { font-family: var(--font-serif); font-size: 17px; font-weight: 600; color: var(--ink); margin: 0; }

/* ---------- 오방기 풀스크린 뽑기 연출(2026-10-26 — 손그림 SVG 대신 실사 이미지로 교체) ----------
   성후님이 파이어플라이로 직접 만든 4장(제단에 꽂힌 오방기, 손에 쥔 묶음, 색상별로 펼쳐진 깃발
   5장)을 화면 전체에 깐다. 단계: intro(제단, "뽑아볼까?") → bundle(손에 쥔 묶음, "자 뽑아봐~",
   화면 탭하면 뽑기) → revealing(짧게 흔들리는 전환) → revealed(뽑힌 색 깃발 + 해석). */
.ohbanggi-overlay {
  position: fixed; inset: 0; z-index: 999; background: #050404; overflow: hidden;
}
.ohbanggi-stage-img {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  animation: ohbanggiStageIn 0.5s ease both;
}
@keyframes ohbanggiStageIn {
  from { opacity: 0; transform: scale(1.04); }
  to { opacity: 1; transform: scale(1); }
}
.ohbanggi-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(5,4,4,0.15) 0%, rgba(5,4,4,0.08) 45%, rgba(5,4,4,0.88) 86%, rgba(5,4,4,0.97) 100%);
}
.ohbanggi-scrim--light {
  background: linear-gradient(to bottom, rgba(5,4,4,0.05) 0%, rgba(5,4,4,0.05) 55%, rgba(5,4,4,0.82) 90%, rgba(5,4,4,0.96) 100%);
}
.ohbanggi-caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; text-align: center; color: var(--ink);
  padding: 0 var(--space-24) calc(var(--space-32) + 16px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}
.ohbanggi-caption button { pointer-events: auto; }
.ohbanggi-caption-title { font-family: var(--font-serif); font-size: 23px; font-weight: 600; margin: 0 0 6px; text-shadow: 0 2px 12px rgba(0,0,0,0.6); }
.ohbanggi-caption-sub { font-size: 14px; color: rgba(243,232,219,0.82); margin: 0 0 var(--space-20); text-shadow: 0 2px 10px rgba(0,0,0,0.6); }

/* bundle 단계 — 화면 전체가 터치 영역. "여기를 누르라"는 걸 알리는 숨쉬듯 당기는 모션. */
.ohbanggi-tap { cursor: pointer; animation: ohbanggiStageIn 0.5s ease both, ohbanggiBreathe 2.2s ease-in-out 0.6s infinite; }
@keyframes ohbanggiBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.015); }
}

/* revealing 단계 — 뽑는 순간 짧게 펄럭이듯 흔들렸다가 다음 단계로 넘어간다 */
.ohbanggi-flutter { animation: ohbanggiShake 0.9s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes ohbanggiShake {
  0% { transform: scale(1) rotate(0deg); }
  20% { transform: scale(1.02) rotate(-0.6deg); }
  40% { transform: scale(1.04) rotate(0.6deg); }
  60% { transform: scale(1.06) rotate(-0.4deg); }
  80% { transform: scale(1.08) rotate(0.3deg); filter: brightness(1.15); }
  100% { transform: scale(1.12) rotate(0deg); filter: brightness(1.3); opacity: 0.35; }
}

/* revealed 단계 — 펼쳐진 뒤엔 실제 깃발처럼 천천히 펄럭인다 */
.ohbanggi-sway { animation: ohbanggiStageIn 0.6s ease both, ohbanggiSwaySlow 3.4s ease-in-out 0.6s infinite; transform-origin: 25% 50%; }
@keyframes ohbanggiSwaySlow {
  0%, 100% { transform: scale(1.02) rotate(0deg); }
  50% { transform: scale(1.04) rotate(0.8deg); }
}

.ohbanggi-result {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; text-align: center; color: var(--ink);
  padding: 0 var(--space-24) calc(var(--space-32) + env(safe-area-inset-bottom, 0px));
  animation: ohbanggiResultIn 0.6s ease forwards;
}
@keyframes ohbanggiResultIn {
  0% { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}
.ohbanggi-result-label { font-family: var(--font-serif); font-size: 20px; font-weight: 600; margin-bottom: 4px; text-shadow: 0 2px 10px rgba(0,0,0,0.6); }
.ohbanggi-result-score { font-size: 13px; color: var(--red); letter-spacing: 0.02em; margin-bottom: var(--space-12); text-shadow: 0 2px 8px rgba(0,0,0,0.6); }
.ohbanggi-result-line { font-size: 14.5px; line-height: 1.6; color: rgba(243, 232, 219, 0.92); margin: 0 0 var(--space-20); text-shadow: 0 2px 8px rgba(0,0,0,0.6); }
.ohbanggi-confirm-btn {
  background: var(--red); color: #140403; font-weight: 700; font-size: 15px; padding: 12px 32px;
  border-radius: var(--radius-pill); box-shadow: 0 10px 28px rgba(255, 49, 49, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- 만세력 정밀보기 (성후명리 엔진) ---------- */
.manse-detail-link {
  background: linear-gradient(155deg, var(--cat-color, var(--red)), color-mix(in srgb, var(--cat-color, var(--red)) 70%, #000));
  color: #140403; font-weight: 700; border-color: transparent; text-align: center;
}
.manse-detail-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 16px; padding: var(--space-16); margin: var(--space-16) 0; }
.manse-detail-section { margin-top: var(--space-24); }
.manse-detail-section h3 { font-family: var(--font-serif); font-weight: 500; font-size: 16px; color: var(--ink); margin: 0 0 var(--space-12); }
.manse-detail-text p { font-size: 14px; line-height: 1.75; color: var(--ink); margin: 0 0 var(--space-12); white-space: pre-line; }

/* 대운 — 10년씩 묶인 리본 타일 */
/* 2026-10-15 수정: 평생 전체(약 100세까지) 대운을 다 보여주다 보니 가로로 길어져서,
   손가락으로 넘기면 카드 단위로 딱딱 멈춰 "슬라이드"하는 느낌이 나도록 scroll-snap을 건다. */
/* 2026-10-15 추가 수정: 카드 사이 간격·내부 여백이 너무 넓다는 지적 — gap과 패딩, 세로
   여백을 전반적으로 좁혀 한눈에 더 조밀하게 들어오도록 한다. */
.daeun-strip { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.daeun-item {
  flex: none; min-width: 72px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 12px;
  padding: var(--space-8) 6px; text-align: center; scroll-snap-align: start;
}
.daeun-age { font-size: 11px; color: var(--ink-muted); margin-bottom: 3px; }
/* 2026-10-15 수정: 대운도 원국 기둥(pillar-grid)과 똑같이 천간을 위 칸, 지지를 아래 칸에
   놓는다 — 가로로 나란히 두면 "위아래 배치가 기본"이라는 성후님 기준과 어긋난다. */
.daeun-gz { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; margin-bottom: 4px; }
.daeun-ch {
  position: relative; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 8px; font-family: var(--font-serif); font-weight: 800; font-size: 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.08); color: var(--ink);
}
.daeun-ch.sm { width: 22px; height: 22px; font-size: 12px; border-radius: 6px; }
.daeun-ch.el-wood  { background: linear-gradient(155deg, #4ee08a, #1fb866); color: #0a2b17; }
.daeun-ch.el-fire  { background: linear-gradient(155deg, #ff7a8a, #ff4d6a); color: #3a0009; }
.daeun-ch.el-earth { background: linear-gradient(155deg, #ffd166, #ffab2e); color: #3a2400; }
.daeun-ch.el-metal { background: linear-gradient(155deg, #f3f3fb, #d7d8ea); color: #2a2a3a; }
.daeun-ch.el-water { background: linear-gradient(155deg, #6f7dff, #4452e8); color: #fff; }
.daeun-year { font-size: 10px; color: var(--ink-muted); }
.daeun-sipseong { font-size: 10px; color: var(--ink-muted); margin-bottom: 1px; }
.daeun-dishi { font-size: 10px; color: var(--ink-muted); margin-top: 1px; margin-bottom: 2px; }

/* 인생그래프 — 세운 구간 전체를 하나로 잇는 명예/재물/건강/학업/연애 꺾은선 그래프
   (2026-10-15 추가: calcYearScores는 이미 있었지만 리포트에 쓰인 적이 없었음) */
.life-graph-svg { width: 100%; height: 150px; color: var(--ink-muted); display: block; }
.life-graph-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; justify-content: center; }
.life-graph-legend-item { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--ink-muted); }
.life-graph-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* 세운 — 연도별 오행 간지 + 5개 생활영역 미니 바그래프 */
/* 2026-10-15 수정: 세운도 대운과 같은 방식으로 손가락으로 넘기면 카드 단위로 슬라이드된다. */
.sewoon-strip { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.sewoon-strip .sewoon-item { scroll-snap-align: start; }
.sewoon-item {
  flex: none; min-width: 58px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 6px 5px; text-align: center;
}
.sewoon-item.now { border-color: var(--cat-color, var(--red)); box-shadow: 0 0 0 1px var(--cat-color, var(--red)); }
.sewoon-year { font-size: 10px; color: var(--ink-muted); margin-bottom: 2px; }
.sewoon-sipseong { font-size: 10px; color: var(--ink-muted); margin-bottom: 1px; }
.sewoon-dishi { font-size: 10px; color: var(--ink-muted); margin-top: 1px; }
.wolwoon-strip .sewoon-item { padding-bottom: var(--space-8); }
/* 세운 카드 아래 작은 막대그래프가 뭘 뜻하는지 안 보인다는 지적 — 스트립 위에 범례를 한 번만
   달아준다(카드마다 반복하지 않고, 인생그래프와 같은 색상·순서를 그대로 써서 서로 연결되게 한다). */
.sewoon-bars-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 0 0 8px; }
.sewoon-bars-legend-item { display: inline-flex; align-items: center; gap: 3px; }
.sewoon-bars-legend-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.sewoon-bars-legend-dot.honor { background: #ffd166; }
.sewoon-bars-legend-dot.wealth { background: #4ee08a; }
.sewoon-bars-legend-dot.health { background: #ff7a8a; }
.sewoon-bars-legend-dot.study { background: #6f7dff; }
.sewoon-bars-legend-dot.love { background: #ef3f66; }
/* 2026-10-15 추가: 월운 카드를 <button>으로 바꿔 클릭으로 그 달의 일진을 펼쳐본다 —
   버튼 기본 스타일을 지워 기존 세운 카드와 똑같이 보이게 한다. */
.wolwoon-click { font-family: inherit; color: inherit; cursor: pointer; appearance: none; }
.wolwoon-click:hover { border-color: var(--cat-color, var(--red)); }
.wolwoon-click.iljin-open { border-color: var(--cat-color, var(--red)); box-shadow: 0 0 0 1px var(--cat-color, var(--red)); }
.iljin-panel:empty { display: none; }
.iljin-panel { margin-top: var(--space-12); }
/* 2026-10-15 수정: 일진 달력이 화면 가운데에 좁게 몰려 보인다는 지적 — 요일 머리글이 있는
   진짜 달력 격자(7열, 1일의 요일에 맞춰 앞칸을 비움)로 바꾸고, grid로 폭 전체를 꽉 채운다. */
.iljin-weekrow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-bottom: 5px; }
.iljin-weekday { text-align: center; font-size: 11px; color: var(--ink-muted); }
.iljin-weekday.sun { color: #ff7a8a; }
.iljin-weekday.sat { color: #6f7dff; }
.iljin-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.iljin-day {
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 6px 2px 7px; text-align: center;
}
.iljin-day-blank { background: none; border: none; }
.iljin-day.sun .iljin-day-num { color: #ff7a8a; }
.iljin-day.sat .iljin-day-num { color: #6f7dff; }
.iljin-day-num { font-size: 11px; color: var(--ink-muted); margin-bottom: 3px; font-weight: 600; }
.iljin-day-gz { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 3px; }
.iljin-day-sipseong { font-size: 10px; color: var(--ink-muted); }
.iljin-ch {
  position: relative; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  border-radius: 7px; font-family: var(--font-serif); font-weight: 800; font-size: 13px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.08); color: var(--ink);
}
.iljin-ch.el-wood  { background: linear-gradient(155deg, #4ee08a, #1fb866); color: #0a2b17; }
.iljin-ch.el-fire  { background: linear-gradient(155deg, #ff7a8a, #ff4d6a); color: #3a0009; }
.iljin-ch.el-earth { background: linear-gradient(155deg, #ffd166, #ffab2e); color: #3a2400; }
.iljin-ch.el-metal { background: linear-gradient(155deg, #f3f3fb, #d7d8ea); color: #2a2a3a; }
.iljin-ch.el-water { background: linear-gradient(155deg, #6f7dff, #4452e8); color: #fff; }
/* 2026-10-15 수정: 띠 아이콘이 글자 옆에 나란히 붙어 있어 칸 안에서 글자가 한쪽으로 쏠려
   보인다는 지적 — 간지 글자는 그대로 가운데 두고, 띠 아이콘은 칸 전체를 채우는 흐릿한
   배경으로 깔아 글자가 또렷이 주인공이 되도록 바꾼다. */
.daeun-animal {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 1.5em; opacity: 0.45; z-index: -1; pointer-events: none;
}
/* 띠 아이콘은 칸 모양을 안 흔들도록 모서리에 작게 겹쳐 보여준다("공간이 되면"만 보이는 보너스) */
.pillar-char-animal { position: absolute; bottom: -4px; right: -4px; font-size: 12px; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4)); }
/* 2026-10-15 수정: 세운·월운도 대운·원국과 동일하게 천간(위)/지지(아래) 상하 배치로 맞춘다. */
.sewoon-gz { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; margin-bottom: 8px; }
.sewoon-bars { display: flex; align-items: flex-end; gap: 2px; height: 36px; }
.sewoon-bar { flex: 1; height: 100%; display: flex; align-items: flex-end; background: rgba(255,255,255,0.06); border-radius: 2px; overflow: hidden; }
.sewoon-bar-fill { width: 100%; border-radius: 2px 2px 0 0; }
.sewoon-bar-fill.honor { background: #ffd166; }
.sewoon-bar-fill.wealth { background: #4ee08a; }
.sewoon-bar-fill.health { background: #ff7a8a; }
.sewoon-bar-fill.study { background: #6f7dff; }
.sewoon-bar-fill.love { background: #ef3f66; }

/* ---------- 리뷰(후기) — 별점 + 캐릭터별 리뷰란 + 홈 하단 "실시간 리뷰" 피드 ---------- */
/* 2026-10-15 추가: 캐릭터별 리뷰란(별점 선택 포함)을 만들고, 30명 캐릭터의 리뷰를 모아
   홈 화면 하단에 "실시간 리뷰"로 배치한다(성후님 요청). */
.star-row { display: inline-flex; gap: 1px; color: rgba(255,255,255,0.2); font-size: 15px; line-height: 1; }
.star-row.sm { font-size: 12px; }
.star-row .star.on { color: #ffd166; }
.review-section-title { font-family: var(--font-heiroflight); font-size: 15px; color: var(--ink); margin: var(--space-16) 0 var(--space-8); }
.review-summary { display: flex; align-items: center; gap: 6px; margin-bottom: var(--space-12); font-size: 13px; color: var(--ink); }
.review-list { display: flex; flex-direction: column; gap: var(--space-8); max-height: 220px; overflow-y: auto; margin-bottom: var(--space-12); }
.review-row { background: rgba(255,255,255,0.04); border-radius: 10px; padding: var(--space-8) var(--space-12); }
.review-row-top { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.review-author { font-size: 12px; color: var(--ink); font-weight: 600; }
.review-time { font-size: 11px; color: var(--ink-muted); margin-left: auto; }
.review-text { font-size: 13px; color: var(--ink); line-height: 1.5; margin: 0; }
.review-form { background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 12px; padding: var(--space-12); }
.review-form-label { font-size: 13px; color: var(--ink); font-weight: 600; margin-bottom: 6px; }
.star-pick-row { display: flex; gap: 4px; margin-bottom: var(--space-8); }
.star-pick {
  background: none; border: none; font-size: 24px; line-height: 1; color: rgba(255,255,255,0.22); cursor: pointer; padding: 2px;
}
.star-pick.on { color: #ffd166; }
.review-textarea {
  width: 100%; min-height: 64px; resize: vertical; background: rgba(255,255,255,0.05); border: 1px solid var(--border);
  border-radius: 8px; padding: var(--space-8); color: var(--ink); font-family: inherit; font-size: 13px; margin-bottom: var(--space-8);
}
.review-submit-btn {
  width: 100%; padding: var(--space-8); border-radius: 8px; border: none; background: var(--cat-color, var(--red));
  color: #faf6ef; font-weight: 600; font-size: 13px; cursor: pointer;
}

/* 홈 보강(2026-10-16) — 무료 체험 티저 + 전문분야별 가로 캐러셀 */
.today-teaser {
  display: flex; align-items: center; gap: var(--space-12); margin-top: var(--space-16);
  background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid var(--border); border-radius: 14px; padding: var(--space-14, 14px) var(--space-16);
  transition: border-color 0.15s ease;
}
.today-teaser:hover { border-color: var(--red); }
.today-teaser-badge {
  flex: none; font-size: 11px; font-weight: 700; color: #faf6ef; background: var(--red);
  border-radius: 999px; padding: 3px 9px;
}
.today-teaser-body { flex: 1; min-width: 0; }
.today-teaser-body h3 { font-family: var(--font-heiroflight); font-weight: 400; font-size: 17px; margin: 0 0 2px; color: var(--ink); }
.today-teaser-body p { font-size: 13px; color: var(--ink-muted); margin: 0; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-teaser-cta { flex: none; font-size: 13px; color: var(--ink-muted); }

.spec-carousel { padding-top: var(--space-24, 24px); }
.spec-carousel-head { margin-bottom: var(--space-12); }
.spec-carousel-eyebrow { font-size: 12px; color: var(--ink-muted); margin: 0 0 2px; }
.spec-carousel-title { font-family: var(--font-heiroflight); font-weight: 400; font-size: 21px; margin: 0; color: var(--ink); }
/* 2026-10-26 수정(성후님 지시 — "우측으로 밀어보는 문제점") — 가로 스크롤 캐러셀(카드 3장 중
   세 번째가 화면 밖으로 잘려 스와이프해야 보임)을 걷어내고, 한 분야의 사주·신점·타로 3장이
   화면 폭 안에 항상 한 번에 들어오는 3열 그리드로 바꿨다. */
.spec-carousel-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8);
}
/* 캐릭터 얼굴이 작은 원형 아이콘으로만 보여 가독성이 떨어진다는 피드백으로, 사각 박스를
   캐릭터 이미지로 꽉 채우는 포스터형 카드로 바꿨다(홈 배너 카드와 같은 배경이미지+스크림 구조).
   고정폭 대신 aspect-ratio를 써서, 그리드 칸 폭(화면폭÷3)에 맞춰 세로 길이도 함께 줄어든다. */
.spec-carousel-card {
  position: relative; width: 100%; aspect-ratio: 3 / 4;
  border-radius: 14px; overflow: hidden; border: 1px solid var(--border);
  background: var(--bg-panel); transition: border-color 0.15s ease;
}
.spec-carousel-card:hover { border-color: var(--cat-color, var(--red)); }
.spec-carousel-bg {
  position: absolute; inset: 0; background-size: cover; background-position: top center;
}
.spec-carousel-bg.no-img {
  background-image: linear-gradient(165deg, var(--cat-color, var(--red-deep)), #0a0908 78%);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-weight: 700; font-size: 28px; color: rgba(250,246,239,0.85);
}
.spec-carousel-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(10,9,8,0) 42%, rgba(10,9,8,0.82) 82%, rgba(10,9,8,0.95) 100%);
}
.spec-carousel-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: var(--space-8) 8px 9px; }
.spec-carousel-card-cat { font-size: 9.5px; font-weight: 600; color: var(--cat-color, var(--red)); margin-bottom: 2px; text-shadow: 0 1px 6px rgba(0,0,0,0.5); }
.spec-carousel-card h3 {
  font-family: var(--font-heiroflight); font-weight: 400; font-size: 15.5px; line-height: 1.15;
  letter-spacing: -0.02em; margin: 0; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.5);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (min-width: 420px) {
  .spec-carousel-card h3 { font-size: 17px; }
}

/* ---------- 이성궁합(2인 궁합) — 독립 메뉴 ---------- */
.compat-entry {
  display: flex; align-items: center; gap: var(--space-12); margin-top: var(--space-12);
  background: linear-gradient(135deg, color-mix(in srgb, var(--red) 18%, transparent), color-mix(in srgb, var(--red) 4%, transparent));
  border: 1px solid color-mix(in srgb, var(--red) 40%, var(--border));
  border-radius: 14px; padding: var(--space-14, 14px) var(--space-16);
  position: relative; overflow: hidden; transition: border-color 0.15s ease;
}
.compat-entry:hover { border-color: var(--red); }
.compat-entry-badge {
  position: absolute; top: 10px; right: 12px; font-size: 10px; font-weight: 700;
  color: #faf6ef; background: var(--red); border-radius: 999px; padding: 2px 8px; letter-spacing: 0.02em;
}
.compat-entry-body { flex: 1; min-width: 0; }
.compat-entry-body h3 { font-family: var(--font-heiroflight); font-weight: 400; font-size: 18px; margin: 0 0 4px; color: var(--ink); }
.compat-entry-body p { font-size: 13px; color: var(--ink-muted); margin: 0; line-height: 1.5; }
.compat-entry-avatar { flex: none; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: var(--bg-panel); }
.compat-entry-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* ---------- 관상(사진 기반 AI 분석) — 독립 메뉴(2026-10-27 추가) ---------- */
.gwansang-entry-emoji { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 26px; }
.gwansang-upload {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-12);
  padding: var(--space-24) var(--space-16); border: 1px dashed var(--border); border-radius: var(--radius-lg);
  background: var(--bg-panel-2); margin: var(--space-16) 0;
}
.gwansang-upload-placeholder {
  display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 40px; color: var(--ink-muted);
}
.gwansang-upload-placeholder span { font-size: 13px; }
.gwansang-preview-img { max-width: 220px; max-height: 220px; border-radius: var(--radius-lg); object-fit: cover; }
.gwansang-ideal-img {
  display: block; width: 100%; max-width: 320px; border-radius: var(--radius-lg); margin-top: var(--space-12);
  border: 1px solid var(--border);
}

.compat-intro { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px 24px 32px; }
.compat-intro-avatar {
  width: 96px; height: 96px; border-radius: 50%; overflow: hidden; margin-bottom: var(--space-16);
  background: var(--bg-panel); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heiroflight); font-size: 32px; color: var(--ink-muted);
}
.compat-intro-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.compat-intro h1 { font-family: var(--font-heiroflight); font-weight: 400; font-size: 32px; margin: 0 0 var(--space-12); color: var(--ink); }
.compat-intro-sub { font-size: 14px; color: var(--ink-muted); line-height: 1.6; margin: 0 0 var(--space-24, 24px); }

.compat-top { display: flex; align-items: center; gap: var(--space-8); padding: var(--space-12) var(--space-16); }
.compat-top .consult-top-name { flex: 1; font-family: var(--font-heiroflight); font-size: 17px; color: var(--ink); }
.compat-top .consult-top-name span { font-size: 12px; color: var(--ink-muted); font-family: "Noto Sans KR", system-ui, sans-serif; }

.compat-panel { padding: 0 var(--space-16) var(--space-16); }

.compat-calculating { display: flex; flex-direction: column; align-items: center; padding: 40px 16px; gap: var(--space-16); text-align: center; }
.char-avatar.lg { width: 88px; height: 88px; font-size: 30px; }

.compat-reveal { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px 16px 8px; }
.compat-pair-label { font-size: 13px; color: var(--ink-muted); margin-bottom: var(--space-16); letter-spacing: 0.01em; }
.compat-pair-label span { margin: 0 6px; opacity: 0.6; }
.compat-score-ring {
  --pct: 0;
  width: 150px; height: 150px; border-radius: 50%; position: relative;
  background: conic-gradient(var(--border) calc(var(--pct) * 0%), var(--border) 0);
  display: flex; align-items: center; justify-content: center;
}
.compat-score-ring.revealed { background: conic-gradient(var(--red) calc(var(--pct) * 1%), var(--border) 0); transition: background 1.1s cubic-bezier(.2,.8,.2,1); }
.compat-score-ring::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--bg-panel); }
.compat-score-num { position: relative; z-index: 1; font-family: var(--font-heiroflight); font-size: 38px; color: var(--ink); }
.compat-score-num span { font-size: 18px; color: var(--ink-muted); margin-left: 2px; }
.compat-tier-label { font-family: var(--font-heiroflight); font-size: 22px; color: var(--ink); margin-top: var(--space-16); }
.compat-tier-desc { font-size: 13.5px; color: var(--ink-muted); margin: 4px 0 0; line-height: 1.5; max-width: 320px; }

/* 속궁합 섹션 — 이성궁합과 같은 패턴을 재사용하되, 구간 제목으로 구분하고 점수 링은 살짝 작게 */
.compat-section-label {
  text-align: center; font-size: 13px; font-weight: 700; color: var(--cat-color, var(--red));
  margin: var(--space-32) 0 0; padding-top: var(--space-24); border-top: 1px solid var(--border);
}
.compat-reveal--sok { padding-top: var(--space-12); }
.compat-score-ring--sok { width: 112px; height: 112px; }
.compat-score-ring--sok .compat-score-num { font-size: 28px; }

.compat-chapters { display: flex; flex-direction: column; gap: var(--space-12); margin-top: var(--space-24, 24px); padding: 0 var(--space-4); }
.compat-chapter { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 12px; padding: var(--space-12) var(--space-14, 14px); }
.compat-chapter-head { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; color: var(--ink); margin-bottom: 6px; }
.compat-chapter p { font-size: 13.5px; color: var(--ink-muted); line-height: 1.6; margin: 0; }
.compat-host-sign { text-align: right; font-size: 12.5px; color: var(--ink-muted); margin: var(--space-16) 4px 0; font-style: italic; }

/* 홈 하단 리뷰 피드 */
.review-feed { padding: var(--space-24, 24px) 0 0; }
.review-feed-head h2 { font-family: var(--font-heiroflight); font-size: 20px; font-weight: 400; margin: 0; color: var(--ink); }
.review-feed-list { display: flex; flex-direction: column; gap: var(--space-8); margin-top: var(--space-12); }
.review-feed-item {
  display: flex; gap: var(--space-12); background: var(--bg-panel); border: 1px solid var(--border); border-radius: 14px;
  padding: var(--space-12); transition: border-color 0.15s ease;
}
.review-feed-item:hover { border-color: var(--cat-color, var(--red)); }
.review-feed-avatar {
  flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-heiroflight); color: var(--ink-muted);
}
.review-feed-avatar img { width: 100%; height: 100%; object-fit: cover; }
.review-feed-body { flex: 1; min-width: 0; }
.review-feed-top { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-bottom: 2px; }
.review-feed-name { font-family: var(--font-heiroflight); font-size: 14px; color: var(--ink); letter-spacing: -0.02em; }
.review-feed-spec { font-size: 11px; color: var(--ink-muted); }
.review-feed-text { font-size: 13px; color: var(--ink); line-height: 1.5; margin: 4px 0 6px; }
.review-feed-meta { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-muted); }

/* 일진비서 — 채팅(2026-10-16, 일반 캐릭터 상담 채팅과 구분되는 "비서" 전용 톤) */
/* 비서 전용 청록 톤으로 --cat-color를 이 패널 안에서만 덮어써, 캐릭터 상담의 레드 톤과 분리한다. */
.assistant-panel-chat { --cat-color: #3fb6a8; }
.assistant-top { gap: var(--space-10, 10px); }
.assistant-top-avatar {
  flex: none; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; background: rgba(255,255,255,0.06);
}
.assistant-top-avatar img { width: 100%; height: 100%; object-fit: cover; }
.assistant-top .consult-top-name { display: flex; align-items: center; gap: 8px; }
.assistant-badge {
  font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; letter-spacing: 0.02em;
  background: color-mix(in srgb, var(--cat-color) 20%, transparent); color: var(--cat-color);
}
.assistant-panel-chat .bubble { position: relative; }
.bubble.assistant-char { background: color-mix(in srgb, var(--cat-color) 12%, var(--bg-panel-2)); border: 1px solid color-mix(in srgb, var(--cat-color) 30%, var(--border)); color: var(--ink); }
.bubble.assistant-user { background: var(--cat-color); color: #0b1413; margin-left: auto; font-weight: 500; }
.bubble-time { display: block; font-size: 10px; color: var(--ink-muted); margin-top: 5px; opacity: 0.8; }
.bubble.assistant-user .bubble-time { color: rgba(11,20,19,0.65); text-align: right; }
.assistant-panel-chat .chat-input-row button { background: var(--cat-color); color: #0b1413; }

/* 만세력 정밀보기 — 리포트 이후 채팅 질문(2026-10-15 추가) */
.manse-ask-box { display: flex; flex-direction: column; gap: var(--space-12, 12px); }
.manse-ask-tickets { display: flex; flex-wrap: wrap; gap: var(--space-8, 8px); }
.manse-ask-ticket {
  font-size: 12px; color: var(--ink-muted); background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: 999px; padding: 6px 10px; display: inline-flex; align-items: center; gap: 6px;
}
.manse-ask-ticket b { color: var(--ink); font-weight: 600; }
.manse-ask-recharge {
  font-size: 11px; color: var(--red); background: none; border: 1px solid var(--red-soft); border-radius: 999px;
  padding: 2px 8px; cursor: pointer;
}
.manse-ask-recharge:hover { background: var(--red-soft); }
.manse-ask-log { display: flex; flex-direction: column; gap: var(--space-8, 8px); }
.manse-ask-item { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.manse-ask-q { font-size: 13px; color: var(--ink); font-weight: 600; margin-bottom: 4px; }
.manse-ask-a { font-size: 13px; color: var(--ink-muted); line-height: 1.6; }
.manse-ask-warn { color: var(--red); }
.manse-ask-input-row { display: flex; gap: var(--space-8, 8px); }
.manse-ask-input {
  flex: 1; background: var(--bg-panel-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; color: var(--ink); font-size: 16px;
}
.manse-ask-btn { flex: none; padding: 10px 16px; font-size: 13px; }

/* 분석 중 화면에서 사주팔자 공개 후 멈추는 지점(2026-10-15 추가) */
.analyzing-reveal { margin-top: var(--space-12, 12px); }
.analyzing-reveal p { font-size: 14px; line-height: 1.7; color: var(--ink); margin: 0 0 6px; }

/* ---------- 오늘의일진 인포그래픽 — 오행별·십성별·시간대별 분석 (2026-10-20 추가) ---------- */
.iljin-infographic {
  margin: var(--space-12, 12px) 0; display: flex; flex-direction: column; gap: var(--space-16, 16px);
}
.iljin-infographic-head { padding: 0 var(--space-4, 4px); }
.iljin-infographic-date { font-size: 11px; color: var(--ink-muted); letter-spacing: 0.01em; }
.iljin-infographic-head h3 { font-size: 17px; margin: 2px 0 0; color: var(--ink); }
.iljin-section {
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: 14px;
  padding: var(--space-14, 14px) var(--space-16, 16px);
}
.iljin-section h4 { font-size: 13px; color: var(--ink); margin: 0 0 var(--space-10, 10px); font-weight: 700; }

.iljin-ohang-chart { display: flex; flex-direction: column; gap: 10px; }
.iljin-ohang-row { display: grid; grid-template-columns: 1fr; gap: 4px; }
.iljin-ohang-label { font-size: 12px; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.iljin-ohang-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.iljin-ohang-dot.el-wood  { background: linear-gradient(155deg, #4ee08a, #1fb866); }
.iljin-ohang-dot.el-fire  { background: linear-gradient(155deg, #ff7a8a, #ff4d6a); }
.iljin-ohang-dot.el-earth { background: linear-gradient(155deg, #ffd166, #ffab2e); }
.iljin-ohang-dot.el-metal { background: linear-gradient(155deg, #f3f3fb, #d7d8ea); }
.iljin-ohang-dot.el-water { background: linear-gradient(155deg, #6f7dff, #4452e8); }
.iljin-ohang-bar-track { height: 8px; border-radius: 999px; background: var(--bg-panel-2); overflow: hidden; }
.iljin-ohang-bar-fill { height: 100%; border-radius: 999px; min-width: 4%; }
.iljin-ohang-bar-fill.el-wood  { background: linear-gradient(90deg, #1fb866, #4ee08a); }
.iljin-ohang-bar-fill.el-fire  { background: linear-gradient(90deg, #ff4d6a, #ff7a8a); }
.iljin-ohang-bar-fill.el-earth { background: linear-gradient(90deg, #ffab2e, #ffd166); }
.iljin-ohang-bar-fill.el-metal { background: linear-gradient(90deg, #b8b9cf, #f3f3fb); }
.iljin-ohang-bar-fill.el-water { background: linear-gradient(90deg, #4452e8, #6f7dff); }
.iljin-ohang-pct { font-size: 11px; color: var(--ink-muted); text-align: right; }
.iljin-ohang-marks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.iljin-ohang-mark {
  font-size: 10.5px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border);
  color: var(--ink-muted); background: var(--bg-panel-2);
}
.iljin-ohang-mark.good { color: #1fb866; border-color: rgba(31,184,102,0.35); background: rgba(31,184,102,0.08); }
.iljin-ohang-mark.bad { color: var(--red); border-color: rgba(255,77,106,0.35); background: var(--red-soft); }
.iljin-ohang-mark.normal { color: var(--ink-muted); }

.iljin-sipseong-card { padding: 2px 0; }
.iljin-sipseong-badge {
  display: inline-block; font-size: 12px; font-weight: 700; color: var(--ink);
  background: var(--bg-panel-2); border: 1px solid var(--border); border-radius: 999px;
  padding: 4px 12px; margin-bottom: 8px;
}
.iljin-sipseong-text { font-size: 13px; color: var(--ink-muted); line-height: 1.6; margin: 0; }

.iljin-sijin-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.iljin-sijin-cell {
  position: relative; border-radius: 10px; padding: 8px 4px; text-align: center;
  border: 1px solid var(--border); background: var(--bg-panel-2);
}
.iljin-sijin-cell.tier-best    { background: rgba(31,184,102,0.22); border-color: rgba(31,184,102,0.5); }
.iljin-sijin-cell.tier-good    { background: rgba(31,184,102,0.12); border-color: rgba(31,184,102,0.3); }
.iljin-sijin-cell.tier-normal  { background: var(--bg-panel-2); }
.iljin-sijin-cell.tier-watch   { background: rgba(255,171,46,0.14); border-color: rgba(255,171,46,0.35); }
.iljin-sijin-cell.tier-caution { background: var(--red-soft); border-color: rgba(255,77,106,0.4); }
.iljin-sijin-cell.now { outline: 2px solid var(--red); outline-offset: 1px; }
.iljin-sijin-label { font-size: 12px; font-weight: 700; color: var(--ink); }
.iljin-sijin-range { font-size: 9.5px; color: var(--ink-muted); margin-top: 1px; }
.iljin-sijin-now-badge {
  position: absolute; top: -7px; left: 50%; transform: translateX(-50%);
  font-size: 9px; color: #fff; background: var(--red); border-radius: 999px; padding: 1px 6px;
}
.iljin-sijin-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; font-size: 10.5px; color: var(--ink-muted); }
.iljin-sijin-legend span { display: inline-flex; align-items: center; gap: 4px; }
.iljin-sijin-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.iljin-sijin-legend i.tier-best    { background: #1fb866; }
.iljin-sijin-legend i.tier-good    { background: rgba(31,184,102,0.5); }
.iljin-sijin-legend i.tier-normal  { background: var(--border); }
.iljin-sijin-legend i.tier-watch   { background: #ffab2e; }
.iljin-sijin-legend i.tier-caution { background: var(--red); }

.iljin-conclusion-card {
  background: linear-gradient(155deg, var(--bg-panel-2), var(--bg-panel));
  border: 1px solid var(--border); border-radius: 14px; padding: var(--space-14, 14px) var(--space-16, 16px);
}
.iljin-conclusion-label { font-size: 11px; font-weight: 700; color: var(--red); letter-spacing: 0.02em; margin-bottom: 6px; }
.iljin-conclusion-card p { font-size: 13px; color: var(--ink); line-height: 1.7; margin: 0; }

@media (max-width: 420px) {
  .iljin-sijin-strip { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- 복채 지갑(과금 정책 전면 개편, 2026-10-20) ---------- */
/* topbar 안에서 로고(중앙 고정)·우측 아이콘과 동선이 겹치지 않도록, 좌측 상단에 작은
   배지로 따로 둔다(2026-10-20 수정 — 처음엔 우측 아이콘 옆이었는데 좁은 화면에서 로고와 겹쳤다). */
/* 2026-10-27 — 성후님 지시: 복채 수를 더 키우고, 숫자 왼쪽 아이콘을 동전 대신 복주머니로 교체. */
.topbar .wallet-balance-badge-link {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 4px; text-decoration: none;
  color: var(--ink-muted); max-width: 108px;
}
.topbar .wallet-balance-badge-link svg { width: 19px; height: 19px; flex: none; }
.topbar .wallet-balance-badge-link:hover { color: var(--red); }
.wallet-balance-badge-link { display: inline-flex; text-decoration: none; }
.wallet-balance-badge {
  font-size: 15px; font-weight: 700; color: var(--ink); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.topbar .wallet-balance-badge-link:hover .wallet-balance-badge { color: var(--red); }

.wallet-balance-card {
  background: linear-gradient(155deg, var(--bg-panel-2), var(--bg-panel));
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-24) var(--space-16); text-align: center; margin-top: var(--space-16);
}
.wallet-balance-label { font-size: 13px; color: var(--ink-muted); margin-bottom: 6px; }
.wallet-balance-amount { font-size: 34px; font-weight: 800; color: var(--red); display: inline-flex; align-items: center; gap: 6px; }
.wallet-balance-amount svg { width: 26px; height: 26px; flex: none; }
.wallet-balance-amount span { font-size: 16px; font-weight: 600; color: var(--ink-muted); margin-left: 2px; }

.wallet-price-table {
  margin-top: var(--space-24); border: 1px solid var(--border); border-radius: var(--radius-md);
  overflow: hidden; background: var(--bg-panel-2);
}
.wallet-price-table-head {
  padding: 10px var(--space-16); font-size: 12px; font-weight: 700; color: var(--ink-muted);
  border-bottom: 1px solid var(--border); letter-spacing: 0.01em;
}
.wallet-price-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-12);
  padding: var(--space-12) var(--space-16); border-bottom: 1px solid var(--border);
}
.wallet-price-row:last-child { border-bottom: none; }
.wallet-price-row-main { min-width: 0; }
.wallet-price-row-label { font-size: 14px; color: var(--ink); font-weight: 600; }
.wallet-price-row-desc { font-size: 12px; color: var(--ink-muted); margin-top: 2px; }
.wallet-price-row-amount { font-size: 14px; font-weight: 700; color: var(--red); white-space: nowrap; }

.wallet-log {
  margin-top: var(--space-24); border: 1px solid var(--border); border-radius: var(--radius-md);
  overflow: hidden; background: var(--bg-panel-2);
}
.wallet-log-head {
  padding: 10px var(--space-16); font-size: 12px; font-weight: 700; color: var(--ink-muted);
  border-bottom: 1px solid var(--border);
}
.wallet-log-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-12);
  padding: 10px var(--space-16); border-bottom: 1px solid var(--border); font-size: 13px; color: var(--ink);
}
.wallet-log-row:last-child { border-bottom: none; }
.wallet-log-plus { color: #1fb866; font-weight: 700; }
.wallet-log-minus { color: var(--ink-muted); font-weight: 700; }

.btn-ghost {
  display: inline-block; background: transparent; color: var(--ink-muted);
  padding: 11px 28px; border-radius: var(--radius-sm); font-weight: 600; font-size: 14px;
  border: 1px solid var(--border);
}
.btn-ghost:hover { color: var(--red); border-color: var(--red); }

/* ---------- 궁합/속궁합 리포트 추가 질문 채팅(2026-10-20 신규) ---------- */
.compat-followup-section { margin-top: var(--space-24); }
.compat-followup-section .chat-messages { max-height: none; }

/* ---------- 월운세(2026-10-20 신규) ---------- */
.wolwoon-month-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-8); margin-top: var(--space-12);
}
.wolwoon-month-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--space-12) 4px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--bg-panel-2); color: var(--ink);
}
.wolwoon-month-btn:hover { border-color: var(--red); }
.wolwoon-month-btn.selected { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.wolwoon-month-btn.unlocked .wolwoon-month-num::after { content: " ✓"; color: #1fb866; }
.wolwoon-month-num { font-size: 13px; font-weight: 700; }
.wolwoon-month-gz { font-size: 11px; color: var(--ink-muted); }

@media (max-width: 420px) {
  .wolwoon-month-grid { grid-template-columns: repeat(3, 1fr); }
}