/* consult-v2.css — 상담 화면 전면 교체(청운 대기·대화 · 하연 책방·입력) + 하연 새 메뉴 창 (1.1.1 · 2026-10-11 · consult-v2.js 와 한 쌍)
   ★ 겉모습만 바꾼다. 기능·대사·저장·iOS 숨김 규칙은 각 화면 파일이 그대로 갖는다. consult-chibi.css 뒤에 싣고 같은 선택자를 이 파일이 덮는다.
   ★ 새 그림 11장(assets/consult_v2/)이 오기 전에는 기존 전신 칸을 위쪽 절반만 보여 주는 [상반신 자리표]로 그린다 — 그림이 오면 consult-v2.js 가
     <html> 에 cv2-has-cheong · cv2-has-hayeon 을 붙이고 --cv2-<주인>-img 를 채워 자동으로 바뀐다(코드 수정 없음).
   ★ 본문 글자는 15px 이상 · 360폭에서 잘리지 않는다. 한지 종이 = assets/ui/news/notice_paper_v2.png (글자·버튼은 앱이 그린다). */

:root{
  --cv2-ink: #3b2a20;
  --cv2-ink-soft: #6f5a49;
  --cv2-cream: #fffaf0;
  --cv2-line: #ead9b8;
  --cv2-accent: #a9553f;
  --cv2-paper: url("assets/ui/news/notice_paper_v2.png");
}

/* ══ 공통: 상반신 칸 ═══════════════════════════════════════════════════
   .cv2-bust = 새로 만든 칸(하연 책방) · .cs-chibi.cs-oracle/.tj-chibi-fig = 기존 전신 칸(청운) — 둘 다 같은 모양으로 그린다.
   그림이 없으면 전신 아틀라스 정면 칸(400x640)의 위쪽 53% 만 보인다. */
html.cv2-on .cv2-bust,
html.cv2-on.cs-chibi-on .cs-chibi.cs-oracle,
html.cv2-on.cs-chibi-on .tj-stage.tj-chibi .cs-chibi.tj-chibi-fig{
  aspect-ratio: 400 / 340;
  background-repeat: no-repeat;
  background-size: 400% auto;
  background-position: 0 0;
  filter: drop-shadow(0 8px 10px rgba(30,18,8,.34));
  -webkit-mask-image: linear-gradient(#000 86%, rgba(0,0,0,0));
          mask-image: linear-gradient(#000 86%, rgba(0,0,0,0));
}
html.cv2-on .cv2-bust.cv2-hayeon{ background-image: url("assets/owners/hayeon/hayeon_full_atlas.webp"); }
/* 새 그림이 있으면 — 통짜 그림 한 장(투명 배경 상반신)을 그대로 */
html.cv2-on.cv2-has-hayeon .cv2-bust.cv2-hayeon{
  background-image: var(--cv2-hayeon-img);
  background-size: contain; background-position: center bottom;
  aspect-ratio: auto; -webkit-mask-image: none; mask-image: none;
}
/* .tj-chibi-fig 는 하연(body.sj-on)·루나(body.tj-on)와 칸 이름을 같이 쓴다 — 청운 그림은 청운 화면(body.dj-on)에서만 입힌다
   (2026-10-12 — 범위가 넓어 하연 칸의 aspect-ratio 가 auto 로 덮여 폭이 0 이 됐다). 비율은 그림 실제 크기(1189x1323)로 명시한다. */
html.cv2-on.cs-chibi-on.cv2-has-cheong .cs-chibi.cs-oracle,
html.cv2-on.cs-chibi-on.cv2-has-cheong body.dj-on .tj-stage.tj-chibi .cs-chibi.tj-chibi-fig{
  background-image: var(--cv2-cheong-img) !important;
  background-size: contain; background-position: center bottom;
  aspect-ratio: 1189 / 1323; -webkit-mask-image: none; mask-image: none;
}

/* ══ 한지 종이 — 공용 틀 ═════════════════════════════════════════════════ */
.cv2-paper-frame,
.cv2-paper{
  background: var(--cv2-paper) center / 100% 100% no-repeat;
}

/* ══ 하연 책방 (saju.html #sj-landing) ═══════════════════════════════════ */
html.cv2-on body.sj-landing-active .sj-landing-bg{ filter: blur(4px) brightness(.95); }
html.cv2-on.cv2-has-bg-hayeon body.sj-landing-active .sj-landing-bg{
  background: #3a2a22 var(--cv2-bg-hayeon) center / cover no-repeat !important;
  filter: none;
}
html.cv2-on body.sj-landing-active .cs-chibi.cs-saju{ display: none; }      /* 기존 전신 칸은 지우지 않고 가린다(하연 책방은 상반신 칸을 쓴다) */
html.cv2-on body.sj-landing-active .sj-landing-stage{ min-height: 0; overflow: hidden; }
html.cv2-on body.sj-landing-active .cv2-bust.cv2-hayeon{
  position: absolute; z-index: 3; pointer-events: none;
  left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(88%, 340px);
  max-height: 100%;
}
html.cv2-on.cv2-has-hayeon body.sj-landing-active .cv2-bust.cv2-hayeon{ width: min(92%, 380px); height: 100%; }
/* 말풍선 — 상반신 위쪽 오른쪽 */
html.cv2-on body.sj-landing-active .sj-landing-bubble{
  left: auto; right: 5%; top: 13%; max-width: min(62vw, 260px); z-index: 7;
  padding: 10px 14px 11px; border-radius: 18px; border-bottom-right-radius: 6px;
}
html.cv2-on body.sj-landing-active .sj-landing-bubble::after{
  left: auto; right: 12px; bottom: -6px; clip-path: polygon(0 0, 100% 0, 100% 100%);
}
html.cv2-on body.sj-landing-active .sj-landing-bubble p{ font-size: 16px; line-height: 1.45; }
html.cv2-on body.sj-landing-active .sj-landing-bubble-name{ font-size: 14px; }

/* 카드 묶음 — 오늘의 책갈피(크게) / 하연과 이야기하기 · 짧은 힐링 문장 / 오늘 운세(작은 줄) / 도장 안내 */
html.cv2-on body.sj-landing-active .sj-landing-panel{
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
  padding: 8px 14px calc(10px + env(safe-area-inset-bottom, 0px) + var(--banner-ad-height, 0px));
}
html.cv2-on body.sj-landing-active .sj-landing-panel > *{ min-width: 0; }
html.cv2-on body.sj-landing-active .cv2-book{ grid-column: 1 / -1; order: 1; }
html.cv2-on body.sj-landing-active .sj-landing-ai.cv2-talk{ grid-column: 1; order: 2; }
html.cv2-on body.sj-landing-active .cv2-heal{ grid-column: 2; order: 3; }
html.cv2-on body.sj-landing-active .sj-landing-cards{ grid-column: 1 / -1; order: 4; }
html.cv2-on body.sj-landing-active .sj-landing-cards2{ grid-column: 1 / -1; order: 5; }
html.cv2-on body.sj-landing-active .cv2-hint{ grid-column: 1 / -1; order: 6; }
html.cv2-on.cv2-ios body.sj-landing-active .sj-landing-ai.cv2-talk{ grid-column: 1 / -1; }

html.cv2-on .cv2-card{
  display: flex; align-items: center; gap: 10px; text-align: left;
  box-sizing: border-box; min-height: 64px; padding: 8px 12px 8px 10px;
  border: 1.5px solid var(--cv2-line); border-radius: 20px;
  background: var(--cv2-cream) url("assets/ui/paper_tile.webp") 0 0 / 256px 256px; background-blend-mode: multiply;
  box-shadow: 0 5px 14px rgba(40,24,10,.22);
  color: var(--cv2-ink); font-family: var(--font-ui, "Malgun Gothic", sans-serif); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html.cv2-on .cv2-card:active{ transform: translateY(1px) scale(.99); filter: brightness(.97); }
html.cv2-on .cv2-card-ico{ flex: none; display: grid; place-items: center; width: 44px; height: 44px; }
html.cv2-on .cv2-card-ico img{ width: 100%; height: 100%; object-fit: contain; }
html.cv2-on.cv2-has-ico-bookmark .cv2-book .cv2-card-ico img{ content: var(--cv2-ico-bookmark); }
html.cv2-on.cv2-has-ico-healing .cv2-heal .cv2-card-ico img{ content: var(--cv2-ico-healing); }
html.cv2-on .cv2-card-tx{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html.cv2-on .cv2-card-tx b{ font-size: 17px; line-height: 1.25; font-weight: 800; word-break: keep-all; }
html.cv2-on .cv2-card-tx small{ font-size: 15px; line-height: 1.3; color: var(--cv2-ink-soft); word-break: keep-all; }
html.cv2-on .cv2-book{ min-height: 84px; padding: 10px 14px 10px 12px; }
html.cv2-on .cv2-book .cv2-card-ico{ width: 60px; height: 60px; }
html.cv2-on .cv2-book .cv2-card-tx b{ font-size: 20px; }
html.cv2-on .cv2-heal .cv2-card-tx b,
html.cv2-on body.sj-landing-active .sj-landing-ai.cv2-talk .sjl-tx{ font-size: 16px; }
html.cv2-on .cv2-heal,
html.cv2-on body.sj-landing-active .sj-landing-ai.cv2-talk{ min-height: 72px; }
html.cv2-on .cv2-heal .cv2-card-ico{ width: 38px; height: 38px; }

/* 하연과 이야기하기 — 기존 [하연에게 물어보기] 버튼(.sj-landing-ai)을 같은 카드 모양으로 */
html.cv2-on body.sj-landing-active .sj-landing-ai.cv2-talk{
  display: flex; align-items: center; gap: 8px; box-sizing: border-box; width: auto; margin: 0; padding: 8px 10px;
  border: 1.5px solid var(--cv2-line); border-radius: 20px;
  background: var(--cv2-cream) url("assets/ui/paper_tile.webp") 0 0 / 256px 256px; background-blend-mode: multiply;
  box-shadow: 0 5px 14px rgba(40,24,10,.22); color: var(--cv2-ink);
}
html.cv2-on body.sj-landing-active .sj-landing-ai.cv2-talk .sj-ai-ico{ flex: none; width: 38px; height: 38px; object-fit: contain; }
html.cv2-on body.sj-landing-active .sj-landing-ai.cv2-talk .sjl-tx{ flex: 1; min-width: 0; font-size: 17px; line-height: 1.25; font-weight: 800; color: var(--cv2-ink); white-space: normal; word-break: keep-all; text-align: left; }
html.cv2-on body.sj-landing-active .sj-landing-ai.cv2-talk .sj-ai-arrow{ flex: none; width: 24px; height: 24px; font-size: 20px; line-height: 24px; text-align: center; border-radius: 50%; background: rgba(255,255,255,.7); color: #8a6a55; }
/* 반폭 카드(2열)라 글자 칸이 좁다 — "이야기하기"(keep-all 이라 못 끊김)가 › 위로 넘치던 것(320 실측 2026-10-12).
   ≤375px: 아이콘 38→32 · 간격 8→5 로 글자 칸을 12px 넓힌다(화살표 크기·자리는 그대로) · ≤355px: 아이콘을 접는다 · 그래도 모자라면(글꼴 배율) 글자만 끊어 화살표를 안 덮는다. */
html.cv2-on body.sj-landing-active .sj-landing-ai.cv2-talk .sjl-tx{ overflow-wrap: anywhere; }
@media (max-width: 375px){
  html.cv2-on body.sj-landing-active .sj-landing-ai.cv2-talk{ gap: 5px; }
  html.cv2-on body.sj-landing-active .sj-landing-ai.cv2-talk .sj-ai-ico{ width: 32px; height: 32px; }
}
@media (max-width: 355px){
  html.cv2-on body.sj-landing-active .sj-landing-ai.cv2-talk .sj-ai-ico{ display: none; }
}

/* 오늘 운세 — 카드 아래 작은 줄(지우지 않는다) */
html.cv2-on body.sj-landing-active .sj-landing-cards{ display: block; margin: 0; padding: 0; }
html.cv2-on body.sj-landing-active .sj-landing-cards .sj-card[data-cat="daily"]{
  display: flex; flex-direction: row; align-items: center; gap: 8px; width: 100%; min-height: 44px; margin: 0; padding: 6px 14px;
  border: 1px solid rgba(255,255,255,.45); border-radius: 22px; background: rgba(40,26,18,.58);
  box-shadow: none; color: #fff7e6; text-align: left;
}
html.cv2-on body.sj-landing-active .sj-landing-cards .sj-card[data-cat="daily"] .sj-card-ico-wrap{ display: none; }
html.cv2-on body.sj-landing-active .sj-landing-cards .sj-card[data-cat="daily"] .sj-card-badge{ display: none; }
html.cv2-on body.sj-landing-active .sj-landing-cards .sj-card[data-cat="daily"] .sj-card-tt{ flex: none; margin: 0; font-size: 15px; font-weight: 800; color: #fff7e6; }
html.cv2-on body.sj-landing-active .sj-landing-cards .sj-card[data-cat="daily"] .sj-card-sub{
  flex: 1; min-width: 0; margin: 0; font-size: 15px; font-weight: 500; color: rgba(255,247,230,.82);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left;
}
html.cv2-on body.sj-landing-active .sj-landing-cards .sj-card[data-cat="daily"]::after{ content: ""; flex: none; width: 9px; height: 9px; margin-right: 4px; border-top: 2px solid rgba(255,247,230,.9); border-right: 2px solid rgba(255,247,230,.9); transform: rotate(45deg); }

html.cv2-on .cv2-hint{
  margin: 0; padding: 2px 6px 0; text-align: center; font-size: 15px; line-height: 1.35;
  color: #fff3dc; text-shadow: 0 1px 3px rgba(20,10,4,.7); font-family: var(--font-ui, "Malgun Gothic", sans-serif);
}
@media (max-height: 700px){
  html.cv2-on .cv2-book{ min-height: 70px; }
  html.cv2-on .cv2-book .cv2-card-ico{ width: 48px; height: 48px; }
  html.cv2-on .cv2-hint{ display: none; }
}

/* ══ 새 메뉴 창 — 한지 종이 위에 글을 올린다 ═══════════════════════════ */
.cv2-veil{
  position: fixed; inset: 0; z-index: 9600; display: flex; align-items: center; justify-content: center;
  padding: 18px 14px; background: rgba(14,9,6,.6);
  padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}
.cv2-paper{
  position: relative; box-sizing: border-box; width: min(100%, 360px); max-height: 100%;
  aspect-ratio: 1102 / 1428; min-height: 0;
  color: var(--cv2-ink); font-family: var(--font-ui, "Malgun Gothic", sans-serif);
  filter: drop-shadow(0 14px 26px rgba(0,0,0,.5));
}
.cv2-paper-in{
  position: absolute; left: 11%; right: 11%; top: 8%; bottom: 16%;
  display: flex; flex-direction: column; align-items: stretch; gap: 10px; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; text-align: center;
}
.cv2-paper-title{ margin: 0; font-size: 19px; line-height: 1.3; font-weight: 800; color: #7a3b2a; }
.cv2-paper-date{ margin: 0; font-size: 15px; line-height: 1.3; color: var(--cv2-ink-soft); font-weight: 700; }
.cv2-paper-text{ margin: 0; font-size: 16px; line-height: 1.6; white-space: pre-line; word-break: keep-all; color: var(--cv2-ink); }
.cv2-paper-big{ font-size: 18px; line-height: 1.7; font-weight: 700; padding: 6px 0; }
.cv2-paper-note{ margin: 0; font-size: 15px; color: var(--cv2-accent); font-weight: 700; }
.cv2-paper-actions{ display: flex; gap: 8px; margin-top: auto; }
.cv2-paper-actions .cv2-btn{ flex: 1 1 0; min-width: 0; }
.cv2-paper-list{ display: flex; flex-direction: column; gap: 10px; text-align: left; }
.cv2-paper-item{ padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.5); border: 1px solid rgba(160,120,80,.25); }
.cv2-paper-item .cv2-paper-text{ font-size: 15px; line-height: 1.5; }
.cv2-btn{
  box-sizing: border-box; min-height: 46px; padding: 8px 10px; border-radius: 23px;
  border: 1.5px solid #cfae82; background: rgba(255,255,255,.75); color: var(--cv2-ink);
  font: 700 15px/1.2 var(--font-ui, "Malgun Gothic", sans-serif); cursor: pointer; word-break: keep-all;
}
.cv2-btn-main{ background: #b9633f; border-color: #a9553f; color: #fff; }
.cv2-btn-quiet{ background: transparent; border-color: transparent; color: var(--cv2-ink-soft); text-decoration: underline; }
.cv2-btn:active{ filter: brightness(.95); }
.cv2-mood-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 6px 0; }
.cv2-mood{ min-height: 64px; font-size: 17px; background: rgba(255,255,255,.8); }
@media (max-height: 640px){
  .cv2-paper{ width: min(100%, 330px); }
  .cv2-paper-text, .cv2-paper-big{ font-size: 16px; line-height: 1.5; }
}

/* ══ 청운 대기 (reading.html?shop=oracle · body.dj-landing) ══════════════════
   배경 = 찻집 방(그림이 오면 찻상 배경) · 청운 상반신(왼쪽 아래) · 말풍선 · 카드 둘 · 오늘의 숫자 줄 · [오늘 무료 대화 n회 남음] */
html.cv2-on.cs-chibi-on body.dj-on.dj-landing .tj-stage.tj-chibi .cs-chibi.tj-chibi-fig{ visibility: hidden; }   /* 대기 화면에는 상반신 칸 하나만 선다(대화가 시작되면 이 칸이 되살아난다) */
html.cv2-on.cs-chibi-on body.dj-on.dj-landing .cs-chibi.cs-oracle{
  left: 3%; bottom: 0; top: auto; height: auto; width: min(76%, 300px);
  transform: none; z-index: 6;
}
html.cv2-on.cs-chibi-on.cv2-has-cheong body.dj-on.dj-landing .cs-chibi.cs-oracle{ height: 92%; width: min(86%, 340px); }
html.cv2-on.cs-chibi-on body.dj-on.dj-landing .dj-landing-scene.is-room{ filter: blur(3px) brightness(.9); transform: scale(1.04); }
html.cv2-on.cv2-has-bg-cheong body.dj-on .dj-landing-scene.is-room{ content: var(--cv2-bg-cheong); filter: none; transform: none; object-fit: cover; }
html.cv2-on.cv2-has-bg-cheong body.dj-on .tj-stage.tj-chibi .tj-chibi-bg{ background-image: var(--cv2-bg-cheong) !important; filter: blur(2px) brightness(.9); }
html.cv2-on body.dj-on.dj-landing .dj-bubble .npc-bubble-text,
html.cv2-on body.dj-on.dj-landing .dj-bubble p{ font-size: 16px; line-height: 1.45; }
html.cv2-on body.dj-on.dj-landing .dj-topic-text strong{ font-size: 16px; }
html.cv2-on body.dj-on.dj-landing .dj-topic-primary{ padding-left: 8px; padding-right: 8px; }
html.cv2-on body.dj-on.dj-landing .dj-topic-sub{ font-size: 15px; }
html.cv2-on body.dj-on.dj-landing .dj-cta-badge{ font-size: 15px; }

/* ══ 청운 대화 — 위쪽 상반신 + 아래 한지 종이 패널 안에 대화 ═══════════════════ */
html.cv2-on.cs-chibi-on body.dj-on:not(.dj-landing) .tj-stage.tj-chibi .cs-chibi.tj-chibi-fig{
  left: 50%; bottom: 0; top: auto; height: auto; width: min(66%, 250px);
  transform: translateX(-50%); z-index: 6;
}
html.cv2-on.cs-chibi-on.cv2-has-cheong body.dj-on:not(.dj-landing) .tj-stage.tj-chibi .cs-chibi.tj-chibi-fig{ height: calc(100% - 52px); width: min(80%, 300px); }
html.cv2-on.cs-chibi-on body.dj-on:not(.dj-landing)::before{
  content: ""; position: fixed; z-index: 1; pointer-events: none;
  left: 4px; right: 4px; top: calc(var(--dj-stage-h) - 18px); bottom: var(--banner-ad-height, 0px);
  background: var(--cv2-paper) center / 100% 100% no-repeat;
  filter: drop-shadow(0 -4px 10px rgba(0,0,0,.28));
}
html.cv2-on.cs-chibi-on body.dj-on:not(.dj-landing) #chat{
  left: 16px; right: 16px; width: auto; top: calc(var(--dj-stage-h) + 6px);
  padding-left: 14px; padding-right: 14px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}
html.cv2-on.cs-chibi-on body.dj-on:not(.dj-landing) #chat .msg.bot,
html.cv2-on.cs-chibi-on body.dj-on:not(.dj-landing) #chat .msg.user{ font-size: 15px; line-height: 1.55; }
html.cv2-on.cs-chibi-on body.dj-on:not(.dj-landing) #chat .sg-disclaimer{
  position: sticky; top: -12px; z-index: 3; box-sizing: border-box; width: 100%; max-width: 100%; margin: 0 0 6px; padding: 5px 8px;
  border-radius: 10px; background: #fff8ec; border: 1px solid rgba(160,120,80,.3);
  color: #5d4636; font-size: 13px; line-height: 1.35; word-break: keep-all;
}
html.cv2-on.cs-chibi-on body.dj-on:not(.dj-landing) .dj-bottom{ left: 12px; right: 12px; }
html.cv2-on.cs-chibi-on body.dj-on:not(.dj-landing) .dj-free-badge{ color: #5d4636; font-size: 15px; }

/* ══ 하연 입력 — 상반신 + 한지 종이 폼 (Android 전용 · saju.html 상담 화면) ═══════════════ */
html.cv2-on.cs-chibi-on body.sj-on .tj-stage.tj-chibi .cs-chibi.tj-chibi-fig{
  left: 50%; bottom: 30px; top: auto; width: auto; height: max(0px, calc(100% - 60px - env(safe-area-inset-top, 0px) - 30px));   /* 바 아래 · 알약 줄 위쪽에서만 서게(360폭 머리 잘림 방지) */
  transform: translateX(-50%); z-index: 6;
}
html.cv2-on.cs-chibi-on.cv2-has-hayeon body.sj-on .tj-stage.tj-chibi .cs-chibi.tj-chibi-fig{
  width: auto; aspect-ratio: 1189 / 1323;                 /* 높이만 정해 둔 칸 — 폭은 그림 비율에서 나온다(폭 0 방지) */
  background-image: var(--cv2-hayeon-img) !important;
  background-size: contain; background-position: center bottom;
  -webkit-mask-image: none; mask-image: none;
}
html.cv2-on.cs-chibi-on body.sj-on .birth-form{
  box-sizing: border-box; border: 0; border-radius: 0; box-shadow: none;
  background: var(--cv2-paper) center / 100% 100% no-repeat;
  padding: 8% 12% 36%;
  filter: drop-shadow(0 8px 14px rgba(60,36,16,.28));
}
html.cv2-on.cs-chibi-on body.sj-on .birth-form::before{ display: none; }
html.cv2-on.cs-chibi-on body.sj-on .birth-form .birth-intro,
html.cv2-on.cs-chibi-on body.sj-on .birth-form .sj-birth-sub{ color: var(--cv2-ink); }
html.cv2-on.cs-chibi-on body.sj-on .birth-form label{ font-size: 15px; }
html.cv2-on.cs-chibi-on body.sj-on .birth-form .sj-birth-privacy{ font-size: 13px; line-height: 1.35; word-break: keep-all; }
/* 폼이 화면보다 길어 스크롤돼도 하연의 첫 말풍선이 무대 띠 뒤로 들어가지 않는다 — 대화 칸 맨 위에 붙여 둔다 */
@supports selector(:has(a)){
  html.cv2-on.cs-chibi-on body.sj-on #chat:has(.birth-form) > .msg.bot:first-child{ position: sticky; top: 0; z-index: 4; }
}

/* ══ 하연 대화 v2 — 두 줄 머리 + 상반신 + 한지 종이 패널 안 대화 (Android 전용 · CSS 만 · 2026-10-12) ═══════════════
   범위 = body.sj-on.sj-composer-on(상담이 시작된 뒤) · iOS(cv2-ios) 제외. saju.js·저장·AI 요청은 그대로다.
   ① 1줄 = 뒤로(알약)·하연·AI 사주상담(헤더 52px) / 2줄 = 음악·마이크(왼쪽) · 은화·불꽃·ⓘ(오른쪽) / 그 아래 상반신 / 한지 패널.
   ② 키보드(sj-compact)는 기존 그대로 — 아래 규칙은 :not(.sj-compact) 이거나 var(--sj-stage-h) 를 따라간다.
   ③ 무대 높이를 스크롤로 바꾸지 않는다(sj-scroll-compact 의 150px 를 덮는다) — 상반신이 54x60 으로 줄던 원인.
   ④ 세로가 짧은 폰(≤630px · 상반신 칸이 120px 미만)은 상반신을 숨기고 기존 컴팩트 머리(아바타 줄)로 쓴다. */
html.cv2-on:not(.cv2-ios).cs-chibi-on body.sj-on.sj-composer-on:not(.sj-compact){
  --cv2-hbust: min(19dvh, 190px);
  --sj-stage-h: calc(104px + env(safe-area-inset-top, 0px) + var(--cv2-hbust));
}
/* 2줄째 칩 — 무대 아래가 아니라 헤더 바로 밑(상반신 위)에 선다 */
html.cv2-on:not(.cv2-ios).cs-chibi-on body.sj-on.sj-composer-on.premium-hud:not(.sj-compact) .bgm-chip,
html.cv2-on:not(.cv2-ios).cs-chibi-on body.sj-on.sj-composer-on.premium-hud.bgm-chip-on:not(.sj-compact) .bgm-chip,
html.cv2-on:not(.cv2-ios).cs-chibi-on body.sj-on.sj-composer-on.premium-hud:not(.sj-compact) .tarot-audio-widget,
html.cv2-on:not(.cv2-ios).cs-chibi-on body.sj-on.sj-composer-on.premium-hud:not(.sj-compact) .tarot-coin-widget{
  top: calc(58px + env(safe-area-inset-top, 0px)); bottom: auto;
}
html.cv2-on:not(.cv2-ios).cs-chibi-on body.sj-on.sj-composer-on:not(.sj-compact) .hud-info{
  top: calc(60px + env(safe-area-inset-top, 0px)); bottom: auto;
}
/* 상반신 — 2줄 아래부터 종이 위쪽 끝까지(아래 18px 는 종이가 덮는다 · 청운과 같다) */
html.cv2-on:not(.cv2-ios).cs-chibi-on body.sj-on.sj-composer-on:not(.sj-compact) .tj-stage.tj-chibi .cs-chibi.tj-chibi-fig{
  top: auto; bottom: 0; height: var(--cv2-hbust);
}
/* 한지 종이 패널 — 청운 대화와 같은 틀(::before) */
html.cv2-on:not(.cv2-ios).cs-chibi-on body.sj-on.sj-composer-on::before{
  content: ""; position: fixed; z-index: 1; pointer-events: none;
  left: 4px; right: 4px; top: calc(var(--sj-stage-h) - 18px); bottom: calc(var(--banner-ad-height, 0px) - 17dvh);   /* 종이를 화면 아래로 더 늘려 아래쪽 벚꽃 매듭이 칩·입력칸 뒤로 안 비치게(키보드 접힘 때 칸이 길어져 값이 모자라지 않게 dvh) */
  background: var(--cv2-paper) center / 100% 100% no-repeat;
  filter: drop-shadow(0 -4px 10px rgba(0,0,0,.28));
}
/* 무대 아랫단의 아이보리 페이드(방 그림용)는 종이가 덮으므로 상반신만 뿌옇게 만든다 — 끈다 */
html.cv2-on:not(.cv2-ios).cs-chibi-on body.sj-on.sj-composer-on:not(.sj-compact) .tj-stage::after{ display: none; }
/* 키보드(sj-compact) — 음악·마이크가 [뒤로] 알약(12~56px) 밑에 깔려 안 보이던 것: 머리를 12px 늘려(88→100) 2줄째로 내린다.
   아바타 줄(아래 8px 위)은 가운데라 왼쪽 칩과 안 겹친다. 짧은 폰(아래 @media)도 같은 값을 써서 키보드가 떠도 채팅 위치가 안 뛴다. */
html.cv2-on:not(.cv2-ios).cs-chibi-on body.sj-on.sj-composer-on.sj-compact{ --sj-stage-h: calc(100px + env(safe-area-inset-top, 0px)); }
html.cv2-on:not(.cv2-ios).cs-chibi-on body.sj-on.sj-composer-on.sj-compact header.char-header{ height: calc(100px + env(safe-area-inset-top, 0px)); }
html.cv2-on:not(.cv2-ios).cs-chibi-on body.sj-on.sj-composer-on.premium-hud.sj-compact .bgm-chip,
html.cv2-on:not(.cv2-ios).cs-chibi-on body.sj-on.sj-composer-on.premium-hud.bgm-chip-on.sj-compact .bgm-chip,
html.cv2-on:not(.cv2-ios).cs-chibi-on body.sj-on.sj-composer-on.premium-hud.sj-compact .tarot-audio-widget{
  top: calc(env(safe-area-inset-top, 0px) + 56px) !important; bottom: auto !important;
}
html.cv2-on:not(.cv2-ios).cs-chibi-on body.sj-on.sj-composer-on #chat{
  left: 16px; right: 16px; width: auto; top: calc(var(--sj-stage-h) + 6px);
  padding-left: 14px; padding-right: 14px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}
html.cv2-on:not(.cv2-ios).cs-chibi-on body.sj-on.sj-composer-on .sj-bottom{ left: 12px; right: 12px; background: transparent; }
html.cv2-on:not(.cv2-ios).cs-chibi-on body.sj-on.sj-composer-on #send-btn{ white-space: nowrap; flex: 0 0 auto; }   /* 320폭에서 [보내기] 가 두 줄로 접히던 것 */
@media (max-height: 630px){
  /* 상반신 칸 120px 미만 — 상반신을 숨기고 기존 컴팩트 머리(위 44px 칩·뒤로 / 아래 아바타+이름)로 */
  html.cv2-on:not(.cv2-ios).cs-chibi-on body.sj-on.sj-composer-on:not(.sj-compact){ --sj-stage-h: calc(100px + env(safe-area-inset-top, 0px)); }
  html.cv2-on:not(.cv2-ios).cs-chibi-on body.sj-on.sj-composer-on:not(.sj-compact) .tj-stage{ visibility: hidden; }
  html.cv2-on:not(.cv2-ios).cs-chibi-on body.sj-on.sj-composer-on:not(.sj-compact) header.char-header{
    height: calc(100px + env(safe-area-inset-top, 0px)); align-items: flex-end; padding-bottom: 8px;
  }
  html.cv2-on:not(.cv2-ios).cs-chibi-on body.sj-on.sj-composer-on:not(.sj-compact) header.char-header .char-avatar{
    display: block; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; object-position: center 15%;
    margin-right: 7px; border: 1px solid rgba(217,183,123,.4); flex: 0 0 auto;
  }
  html.cv2-on:not(.cv2-ios).cs-chibi-on body.sj-on.sj-composer-on:not(.sj-compact) header.char-header .char-name{ display: flex; align-items: baseline; gap: 4px; max-width: min(70vw, 320px); }
  html.cv2-on:not(.cv2-ios).cs-chibi-on body.sj-on.sj-composer-on.premium-hud:not(.sj-compact) .tarot-coin-widget,
  html.cv2-on:not(.cv2-ios).cs-chibi-on body.sj-on.sj-composer-on:not(.sj-compact) .hud-info{
    top: calc(env(safe-area-inset-top, 0px) + 8px); bottom: auto;
  }
  html.cv2-on:not(.cv2-ios).cs-chibi-on body.sj-on.sj-composer-on.premium-hud:not(.sj-compact) .bgm-chip,
  html.cv2-on:not(.cv2-ios).cs-chibi-on body.sj-on.sj-composer-on.premium-hud.bgm-chip-on:not(.sj-compact) .bgm-chip,
  html.cv2-on:not(.cv2-ios).cs-chibi-on body.sj-on.sj-composer-on.premium-hud:not(.sj-compact) .tarot-audio-widget{
    top: calc(env(safe-area-inset-top, 0px) + 56px); bottom: auto;
  }
}

/* ══ 단어 중간 줄바꿈 방지 (2026-10-12 · 범위 = 상담 v2 화면 안 · body 전체에는 안 건다) ═══════════════════════
   "원칙이 뚜렷한 타/입" · "생년월일(양력)부/터" · "10월 12/일" 처럼 한글이 글자 단위로 끊기던 것 — 어절 단위로 줄을 바꾸고,
   긴 영문·숫자만 칸을 넘지 않게 anywhere 로 끊는다. 하연 책방 고정 안내 줄(.cv2-hint)도 같다. */
html.cv2-on.cs-chibi-on body.sj-on #chat,
html.cv2-on.cs-chibi-on body.sj-on #chat *,
html.cv2-on.cs-chibi-on body.dj-on #chat,
html.cv2-on.cs-chibi-on body.dj-on #chat *,
html.cv2-on .cv2-hint{
  word-break: keep-all; overflow-wrap: anywhere;
}