/* 대화형 입력(재회사주·연애사주). 질문은 왼쪽 말풍선, 내 답은 오른쪽, 입력은 아래 한 곳에서만 받는다. */
#conv-input[hidden] { display: none; }
#input-screen[data-conv="on"] #input-pitch,
#input-screen[data-conv="on"] .input-hero,
#input-screen[data-conv="on"] #input-juwol-bubble,
#input-screen[data-conv="on"] #birth-form,
#input-screen[data-conv="on"] .input-step-nav,
#input-screen[data-conv="on"] #compatibility-people,
#input-screen:has(#conv-input:not([hidden])) #input-pitch,
#input-screen:has(#conv-input:not([hidden])) .input-hero,
#input-screen:has(#conv-input:not([hidden])) #input-juwol-bubble,
#input-screen:has(#conv-input:not([hidden])) #birth-form,
#input-screen:has(#conv-input:not([hidden])) .input-step-nav,
#input-screen:has(#conv-input:not([hidden])) #compatibility-people { display: none !important; }
#conv-input { display: flex; flex-direction: column; min-height: calc(100dvh - var(--site-header-height, 56px) - 24px); padding-bottom: 28px; color: var(--report-ink, #2b251f); }
.conv-head { position: sticky; top: var(--site-header-height, 0px); z-index: 2; display: flex; align-items: center; gap: 4px; padding: 8px 16px 10px; max-width: 440px; margin: 0 auto; width: 100%; box-sizing: border-box; background: linear-gradient(var(--paper, #f4eee3) 82%, transparent); }
.conv-back { width: 40px; height: 40px; border: 0; background: transparent; color: inherit; font-size: 28px; line-height: 1; cursor: pointer; }
.conv-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.conv-who img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: #efe7d8; box-shadow: 0 0 0 2px #fff, 0 1px 6px rgba(58,51,42,.2); }
.conv-who b { display: block; font: 800 16px/1.2 var(--sans); letter-spacing: -.02em; }
.conv-title { display: block; margin-top: 2px; color: var(--report-meta, #8a7f70); font: 500 12px/1.2 var(--sans); }
.conv-progress { position: absolute; left: 0; right: 0; bottom: 4px; display: block; height: 3px; border-radius: 3px; background: var(--ui-line, #e3dccf); overflow: hidden; }
.conv-progress::after { content: ""; position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--p, 0)); background: var(--accent, #8a2a24); transition: transform .35s ease; }

/* 주월 사진 전송 카드 (메시지 스레드 내 사진 전송 형태) */
.conv-photo { margin: 0; padding: 0; max-width: 250px; border-radius: 18px; overflow: hidden; background: #231c17; border: 1px solid var(--ui-line, #e3dccf); box-shadow: 0 4px 16px rgba(58,51,42,.12); animation: conv-in .28s cubic-bezier(0.16, 1, 0.3, 1) both; }
.conv-photo-frame { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: #1c1715; }
.conv-photo-img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block; transition: transform .35s ease; }
.conv-photo-caption { display: block; padding: 8px 12px; background: #fffaf2; border-top: 1px solid #ebdccb; color: #5c4e3f; font: 600 12.5px/1.4 var(--sans); letter-spacing: -.02em; word-break: keep-all; }



.conv-thread { display: flex; flex-direction: column; gap: 10px; padding: 10px 16px 8px; max-width: 440px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.conv-bubble { max-width: 84%; margin: 0; padding: 11px 15px; border-radius: 18px; font: 500 16px/1.55 var(--sans); letter-spacing: -.02em; word-break: keep-all; animation: conv-in .28s cubic-bezier(0.16, 1, 0.3, 1) both; }
.conv-bot { border-top-left-radius: 6px; background: var(--ui-surface, #fff); border: 1px solid var(--ui-line, #e3dccf); }
.conv-me { border-top-right-radius: 6px; background: var(--accent, #8a2a24); color: #fff; font-weight: 600; }
.conv-pop { animation: conv-pop .32s cubic-bezier(0.16, 1, 0.3, 1) both !important; }
.conv-answer { position: sticky; bottom: 0; margin: 4px auto 0; max-width: 440px; width: 100%; box-sizing: border-box; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(transparent, var(--paper, #f4eee3) 22%); }
.conv-chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; width: 100%; }
.conv-chips button { min-height: 42px; padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--accent, #8a2a24) 30%, transparent); border-radius: 12px; background: var(--ui-surface, #fff); color: var(--report-ink, #2b251f); font: 600 13.5px/1.3 var(--sans); letter-spacing: -.02em; cursor: pointer; box-shadow: 0 1px 4px rgba(58,51,42,.05); transition: transform .12s ease, background .15s ease, border-color .15s ease; text-align: center; word-break: keep-all; }
.conv-chips button:active { background: color-mix(in srgb, var(--accent, #8a2a24) 10%, #fff); transform: scale(0.98); }
.conv-chips button.is-wide { grid-column: span 1; }
.conv-quick { justify-content: flex-start; margin-top: 10px; }
.conv-quick button { min-height: 36px; padding: 0 13px; font-size: 13px; color: var(--report-meta, #6f6558); border-color: var(--ui-line, #e3dccf); }
.conv-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.conv-input { box-sizing: border-box; width: 100%; height: 50px; padding: 0 16px; border: 1px solid var(--ui-line, #d8cbb7); border-radius: 14px; background: #fff; font: 600 18px/1 var(--sans); letter-spacing: .05em; font-variant-numeric: tabular-nums; }
.conv-input::placeholder { color: #a99d8c; font-weight: 400; letter-spacing: 0; font-size: 15px; }
.conv-input:focus { outline: 2px solid var(--accent, #8a2a24); outline-offset: 0; }
.conv-send { min-width: 76px; height: 50px; border: 0; border-radius: 14px; background: var(--accent, #8a2a24); color: #fff; font: 800 16px/1 var(--sans); cursor: pointer; }
.conv-error { min-height: 18px; margin: 6px 4px 0; color: #b3261e; font: 500 13px/1.4 var(--sans); }
@keyframes conv-in { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes conv-pop { 0% { opacity: 0; transform: translateY(6px) scale(0.96); } 60% { opacity: 1; transform: translateY(-1px) scale(1.01); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .conv-bubble, .conv-pop { animation: none !important; } .conv-progress::after { transition: none; } }

.conv-line { display: flex; align-items: flex-end; gap: 8px; }
.conv-line-me { justify-content: flex-end; }
.conv-line-bot { align-items: flex-start; }
.conv-col { display: flex; flex-direction: column; gap: 3px; min-width: 0; max-width: 84%; }
.conv-line-me .conv-col { align-items: flex-end; }
.conv-col .conv-bubble { max-width: 100%; }
.conv-avatar { flex: 0 0 38px; width: 38px; height: 38px; overflow: hidden; border-radius: 50%; background: #efe7d8; box-shadow: 0 0 0 2px #fff, 0 1px 5px rgba(58,51,42,.18); }
.conv-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.conv-avatar.is-spacer { visibility: hidden; box-shadow: none; }
.conv-name { margin: 0 0 1px 2px; color: var(--report-meta, #6f6558); font: 700 12px/1.2 var(--sans); }
.conv-typing { display: inline-flex; align-items: center; gap: 5px; padding: 13px 18px; min-height: 18px; animation: conv-in .25s ease both; }
.conv-typing::before, .conv-typing::after, .conv-typing > i { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #b3a794; animation: conv-dot 1s infinite ease-in-out; }
.conv-typing > i { animation-delay: .18s; }
.conv-typing::after { animation-delay: .36s; }
@keyframes conv-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0) scale(0.85); } 40% { opacity: 1; transform: translateY(-4px) scale(1.15); background: var(--accent, #8a2a24); } }
.conv-answer { position: sticky; bottom: 0; margin: 4px -4px 0; padding: 12px 4px calc(10px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(transparent, var(--paper, #f4eee3) 22%); }

/* 채팅방 틀: 화면을 꽉 채운 한 칸짜리 방. 머리는 위, 답하는 줄은 아래에 붙고 가운데 대화만 스크롤한다.
   넓은 화면에서는 앱 폭(448px)으로 가운데에 서고 양옆은 사이트 종이 배경이 보인다. */
body.conv-open { overflow: hidden; }
#conv-input { position: fixed; inset: 0; z-index: 70; width: min(100%, var(--app-max-width, 448px)); margin: 0 auto; min-height: 0; padding: 0; display: flex; flex-direction: column; background: #f6f0e4; border-inline: 1px solid var(--ui-line, #e3dccf); box-shadow: 0 0 32px rgba(58,51,42,.12); }
#conv-input[hidden] { display: none; }
.conv-head { position: relative; z-index: 2; flex: 0 0 auto; top: auto; margin: 0; padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 12px 8px; border-bottom: 1px solid var(--ui-line, #e3dccf); background: rgba(255, 250, 241, 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.conv-progress { left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 0; }
.conv-back { width: 36px; height: 40px; }
.conv-who img { width: 40px; height: 40px; box-shadow: 0 0 0 1px var(--ui-line, #e3dccf); }
.conv-who b { font-size: 15px; }
.conv-title { color: var(--report-meta, #7b6f5f); }
.conv-thread { position: relative; z-index: 2; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 14px 12px; gap: 10px; }
.conv-bot { background: #fff; border: 1px solid #ebe3d3; }
.conv-answer { position: relative; z-index: 2; flex: 0 0 auto; margin: 0; padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--ui-line, #e3dccf); background: #fffaf1; }
.conv-answer:empty { display: none; }
.conv-quick { margin: 0 0 10px; justify-content: flex-end; }
.conv-error { min-height: 0; margin: 4px 4px 0; }
.conv-error:empty { display: none; }
.conv-row { grid-template-columns: 1fr; }
.conv-back { width: 44px; height: 44px; margin-left: -2px; font-size: 34px; }

/* 마지막 고민 입력칸과 주월 리액션 */
.conv-compose { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.conv-compose .conv-input { min-width: 0; }
.conv-textarea { box-sizing: border-box; width: 100%; min-height: 50px; max-height: 120px; padding: 13px 14px; border: 1px solid var(--ui-line, #d8cbb7); border-radius: 14px; background: #fff; color: var(--report-ink, #2b251f); font: 500 16px/1.45 var(--sans); resize: none; }
.conv-textarea:focus { outline: 2px solid var(--accent, #8a2a24); outline-offset: 0; }
.conv-compose .conv-send:disabled { opacity: .4; }
.conv-live { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 8px 12px; border-radius: 14px; background: #fff; border: 1px solid #ebe3d3; }
.conv-live[hidden] { display: none; }
.conv-live .live-face { position: relative; flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: #f3ede2; box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(139,105,65,.35); }
.conv-live .live-face img { position: absolute; max-width: none; height: auto; transition: opacity .25s ease; }
.conv-live-line { margin: 0; min-width: 0; font: italic 500 13.5px/1.55 var(--sans); word-break: keep-all; overflow-wrap: anywhere; }
.conv-live-line b { font-style: normal; font-weight: 700; color: #65483b; }

/* 주월이 보내는 장면 그림(계산 직전 "사주 원국을 세우는 중" 등)은 말풍선 크기가 아니라 방 폭 전체로 펼친다. */
.conv-thread { max-width: none; }
.conv-line-bot:has(.conv-photo) { width: calc(100% + 28px); margin-inline: -14px; }
.conv-line-bot:has(.conv-photo) > .conv-avatar { display: none; }
.conv-line-bot:has(.conv-photo) .conv-col { width: 100%; max-width: none; }
.conv-line-bot:has(.conv-photo) .conv-name { display: none; }
.conv-line-bot:has(.conv-photo) .conv-photo { width: 100%; max-width: none; border-radius: 0; border-inline: 0; box-shadow: none; }
.conv-line-bot:has(.conv-photo) .conv-photo-frame { aspect-ratio: 16 / 10; }