/* ---------- 2027년 풀이 대화 화면(talk.html) ----------
   내손내운 인생 풀이 대화(content/insaeng/result.css의 .talk)에서 옮겨 밝은 한지 화면으로 바꿨습니다. theme.css 다음에 불러오고
   색·글꼴·로고·단추·손 그림은 theme.css 것을 씁니다. 여기에는 이 화면 모양만 두고 .chat 안의 t- 이름만 씁니다. */

.t-body { overflow: hidden; overscroll-behavior: none; }
.t-body .app { height: 100vh; height: 100svh; overflow: hidden; font-family: var(--font-ui); }

.chat {
  position: absolute; z-index: 6; left: 0; right: 0; top: 0; height: 100%; display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(rgba(245, 238, 227, 0.5), rgba(245, 238, 227, 0.5)), url(assets/bg-ivory.webp) center top / cover no-repeat, var(--paper);
}

/* 위 머리: 카톡 대화방처럼 뒤로 가기(결과 카드 결제 장)와 방 이름만 */
.chat .t-top {
  flex: none; display: flex; align-items: center; gap: 4px; padding: max(8px, env(safe-area-inset-top)) 12px 8px 6px;
  background: rgba(245, 238, 227, 0.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule);
}
.chat .t-back { flex: none; display: grid; place-items: center; width: 40px; height: 40px; color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.chat .t-back svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.chat .t-brand { display: flex; align-items: center; gap: 4px; }
.chat .t-brand .logo { height: 20px; }

/* 대화 */
.chat .t-chat { position: relative; flex: 1; overflow-y: auto; overflow-x: hidden; padding: 6px 16px 18px; overscroll-behavior: contain; scrollbar-width: none; }
.chat .t-chat::-webkit-scrollbar { display: none; }
.chat .t-chat > section { padding-bottom: 4px; }

/* 아씨 얼굴: 캐릭터 그림(세로 720)의 머리 쪽을 둥글게 */
.chat .t-face { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--paper-2) 50% 6% / auto 240% no-repeat; border: 1.5px solid var(--gold); }
.chat .t-row { display: flex; gap: 8px; align-items: flex-start; margin-top: 5px; }
.chat .t-row.t-first { margin-top: 12px; }
.chat .t-row .t-face { visibility: hidden; }
.chat .t-row.t-first .t-face { visibility: visible; }
.chat .t-row .t-col { min-width: 0; max-width: calc(100% - 42px); display: flex; flex-direction: column; align-items: flex-start; }
.chat .t-name { font-size: 12.5px; font-weight: 700; color: var(--ink-2); margin: 1px 0 4px 2px; }

.chat .t-msg { animation: t-rise 0.38s var(--ease-out) both; }
.chat .t-instant .t-msg, .chat .t-instant .t-msg * { animation: none !important; transition: none !important; }
@keyframes t-rise { from { opacity: 0; transform: translateY(10px) scale(0.97); } }
@keyframes t-fade { from { opacity: 0; } }

/* 말풍선과 카드는 한지 위 흰 면(--card)에 먹색 글 */
.chat .t-bubble {
  background: var(--card); color: var(--ink); font-size: 15px; line-height: 1.5; padding: 9px 13px; border-radius: 4px 18px 18px 18px;
  box-shadow: 0 0 0 1px var(--rule), 0 2px 6px rgba(74, 46, 24, 0.06); word-break: keep-all; overflow-wrap: anywhere;
}
.chat .t-row:not(.t-first) .t-bubble { border-radius: 18px; }

/* 내 말(오른쪽): 다홍 면에 흰 글 */
.chat .t-me { display: flex; justify-content: flex-end; margin-top: 16px; }
.chat .t-me .t-bubble { background: var(--red); color: #fff; border-radius: 18px 4px 18px 18px; font-weight: 700; max-width: 82%; box-shadow: 0 3px 10px rgba(179, 38, 46, 0.2); }

/* 쓰는 중 */
.chat .t-typing { display: inline-flex; gap: 4px; padding: 13px 14px; }
.chat .t-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); animation: t-dot 1s infinite ease-in-out; }
.chat .t-typing i:nth-child(2) { animation-delay: 0.15s; }
.chat .t-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes t-dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* 카드 말풍선 공통 */
.chat .t-pic, .chat .t-lgraph, .chat .t-rows-card {
  width: min(314px, calc(100vw - 74px)); border-radius: 4px 18px 18px 18px; background: var(--card); color: var(--ink);
  box-shadow: 0 0 0 1px var(--rule), var(--shadow-sm);
}
.chat .t-row:not(.t-first) :is(.t-pic, .t-lgraph, .t-rows-card) { border-radius: 18px; }

/* 손 그림: 읽은 선 전부가 그려지는 손바닥 창(SN.handArt 창, 가로세로 1:1) */
.chat .t-hand { width: min(262px, calc(100vw - 74px)); padding: 7px; }
.chat .t-hand.t-two { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: min(300px, calc(100vw - 74px)); }
.chat .t-hand .art { width: 100%; min-height: 0; max-height: none; }
.chat .t-hand .art.lens { aspect-ratio: 1 / 1; border-radius: 13px; box-shadow: 0 0 0 1px rgba(183, 134, 44, 0.45); }
.chat .t-two .art.lens { aspect-ratio: 4 / 5; border-radius: 11px; }
.chat .t-hand .art.draw .art-in path { animation: draw 0.9s var(--ease-out) 0.25s both; }

/* #태그(그래프 카드·줄 카드) */
.chat .t-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.chat .t-chips span { padding: 3px 9px 4px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); font-size: 12.5px; font-weight: 800; }

/* 2027년 열두 달 흐름 그래프: 이름 → 올해의 유형(큰 글씨)과 #키워드 → 운의 흐름 선 → 달 눈금 → 분야 칸.
   움직임은 2초 안에 끝나고(선이 그려지고 점이 하나씩 뜸), 큰 글씨와 칸은 처음부터 보입니다. 운 색은 theme.css의 --c-love·--c-work·--c-money */
.chat .t-lgraph { --lg-num: "Paperlogy", var(--font-ui); padding: 14px 14px 13px; }
.chat .t-lgraph-name { font-size: 12.5px; font-weight: 800; line-height: 1.3; color: var(--red); }
.chat .t-lgraph-big { margin-top: 3px; font: 400 22px/1.2 var(--font-title); letter-spacing: -0.4px; color: var(--ink); word-break: keep-all; text-wrap: balance; }
.chat .t-lgraph-chart { position: relative; margin-top: 10px; }
.chat .t-lgraph-svg { display: block; width: 100%; height: auto; overflow: visible; }
.chat .t-lgraph-f0 { stop-color: var(--gold); stop-opacity: 0.26; }
.chat .t-lgraph-f1 { stop-color: var(--gold); stop-opacity: 0; }
.chat .t-lgraph-base { stroke: rgba(43, 29, 18, 0.16); }
.chat .t-lgraph-mark { stroke: rgba(179, 38, 46, 0.55); stroke-dasharray: 2 3; }
.chat .t-lgraph-line {
  fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 1 1; animation: t-draw-tl 0.9s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes t-draw-tl { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.chat .t-lgraph-dot { fill: var(--c); stroke: var(--card); stroke-width: 2; }
.chat .t-lgraph-ring { fill: var(--c); opacity: 0.28; transform-box: fill-box; transform-origin: center; animation: t-lgraph-ring 1.1s ease-out 0.9s both; }
@keyframes t-lgraph-ring { from { transform: scale(0.4); opacity: 0.8; } to { transform: scale(1); opacity: 0.28; } }
.chat .t-lgraph-pop { animation: t-fade 0.35s ease-out both; }
.chat .t-lgraph-marklbl {
  position: absolute; top: 0; transform: translateX(-50%); padding: 1px 6px 2px; border-radius: 99px;
  background: var(--red); color: #fff; font-size: 10.5px; font-weight: 800; line-height: 1.2; white-space: nowrap;
}
.chat .t-lgraph-axis { position: relative; height: 16px; margin-top: 4px; }
.chat .t-lgraph-axis span {
  position: absolute; top: 0; transform: translateX(-50%); font-family: var(--lg-num); font-weight: 600; font-size: 11px; line-height: 1.2;
  color: var(--ink-3); white-space: nowrap;
}
.chat .t-lgraph-axis span.t-best { color: var(--red); font-weight: 700; }
/* 칸: 분야 이름과 달. 기회의 달 칸은 그 운 색으로 테두리를 둡니다 */
.chat .t-lgraph-fields { display: grid; grid-template-columns: repeat(var(--n), auto); gap: 6px; margin-top: 10px; }
.chat .t-lgraph-field { min-width: 0; padding: 7px 2px 8px; border-radius: 10px; background: var(--paper); border: 1px solid transparent; text-align: center; }
.chat .t-lgraph-field.t-best { background: color-mix(in srgb, var(--c) 10%, var(--card)); border-color: var(--c); }
.chat .t-lgraph-fn { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 11.5px; font-weight: 800; line-height: 1.3; color: var(--c); white-space: nowrap; }
.chat .t-lgraph-fn i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chat .t-lgraph-fa { margin-top: 3px; font-family: var(--lg-num); font-weight: 700; font-size: 13.5px; line-height: 1.25; letter-spacing: -0.3px; color: var(--ink); word-break: keep-all; }
/* 조심할 달·아껴 쓸 달: 선 위 빈 분홍 점과 둘째 줄 칸(분홍 테두리), 지난 달은 한지 색으로 흐리게 */
.chat .t-lgraph-warn { fill: var(--card); stroke: var(--red); stroke-width: 2.2; }
.chat .t-lgraph-past { fill: var(--card); opacity: 0.6; }
.chat .t-lgraph-axis span.t-past { opacity: 0.45; }
.chat .t-lgraph-warns { margin-top: 6px; }
.chat .t-lgraph-warns .t-lgraph-field { --c: var(--red); background: var(--card); border-color: rgba(179, 38, 46, 0.35); }
.chat .t-lgraph-warns .t-lgraph-fn i { background: var(--card); box-shadow: inset 0 0 0 1.6px currentColor; }

/* 줄 카드: 머리말 → 큰 제목·작은 한 줄·#태그 → 줄마다 이름과 값(때는 금빛, 조심할 점은 다홍) */
.chat .t-rows-card { padding: 4px 14px; }
.chat .t-rhead { padding: 11px 0 9px; border-bottom: 1px solid var(--rule); }
.chat .t-rkick { font-size: 12.5px; font-weight: 800; color: var(--purple); }
.chat .t-rttl { margin-top: 2px; font: 400 19px/1.35 var(--font-title); color: var(--ink); word-break: keep-all; text-wrap: balance; }
.chat .t-rows-card .t-sub { margin-top: 3px; font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--ink-2); word-break: keep-all; }
.chat .t-rows-card .t-r { display: flex; gap: 10px; padding: 8px 0; border-top: 1px dashed rgba(43, 29, 18, 0.16); align-items: baseline; }
.chat .t-rows-card .t-rhead + .t-r { border-top: 0; }
.chat .t-rows-card .t-k { flex: none; width: 76px; font-size: 12px; font-weight: 800; line-height: 1.35; color: var(--purple); word-break: keep-all; }
.chat .t-rows-card .t-v { min-width: 0; font-size: 14.5px; font-weight: 700; line-height: 1.45; word-break: keep-all; text-wrap: balance; }
.chat .t-rows-card .t-r.t-when .t-k { color: #94661a; }
.chat .t-rows-card .t-r.t-warn .t-k { color: var(--red); }
/* 날짜 모음 카드: 줄 이름 앞 분야 색 점(그래프 카드 칸 이름의 점과 같은 값, 조심할 날은 빈 다홍 점) */
.chat .t-fdot { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; vertical-align: 1px; background: var(--c); }
.chat .t-fdot.f-love { --c: var(--c-love); }
.chat .t-fdot.f-work { --c: var(--c-work); }
.chat .t-fdot.f-money { --c: var(--c-money); }
.chat .t-fdot.f-avoid { background: var(--card); box-shadow: inset 0 0 0 1.6px var(--red); }

/* 마무리 정리 카드 */
.chat .t-sum { width: min(314px, calc(100vw - 74px)); }
.chat .t-sum-h { font-size: 15px; font-weight: 800; color: var(--purple); margin-bottom: 6px; }
.chat .t-sum-r { display: flex; gap: 10px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--rule); }
/* 줄 이름 칸은 가장 긴 이름('아껴 쓸 달', 13px 나눔스퀘어라운드 54px·대체 글꼴 55px)이 한 줄에 들도록 60px로 두고, 값 칸이 줄마다 같은 자리에서 시작하게 폭을 고정 */
.chat .t-sum-r span { flex: 0 0 60px; font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.chat .t-sum-r b { min-width: 0; font-weight: 800; word-break: keep-all; text-wrap: balance; }
/* 값 아래 작은 줄(그 운의 좋은 날·조심할 날, 줄 카드 .t-sub와 같은 값) */
.chat .t-sum-v { min-width: 0; }
.chat .t-sum-v b { display: block; font-weight: 800; word-break: keep-all; text-wrap: balance; }
.chat .t-sum-sub { margin-top: 2px; font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--ink-2); word-break: keep-all; }

/* 맨 아래: 다음 이야기 답장 단추 하나 · 끝 표시 · 입력칸 */
.chat .t-replies {
  flex: none; min-height: 62px; display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  padding: 8px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(245, 238, 227, 0.94); border-top: 1px solid var(--rule);
}
.chat .t-replies button {
  font-family: var(--font-ui); font-size: 15px; font-weight: 800; color: #fff; background: var(--red); border: 0; border-radius: 999px;
  padding: 10px 18px; cursor: pointer; box-shadow: 0 4px 14px rgba(179, 38, 46, 0.25); animation: t-rise 0.35s var(--ease-spring) both;
}
.chat .t-replies button:active { transform: scale(0.96); }
.chat .t-replies button:disabled { opacity: 0.45; cursor: default; }
/* 다음 이야기 단추: 흰 면 + 다홍→금빛 테두리 + 짙은 다홍 글씨. 빛이 퍼지며 살짝 커졌다 돌아옴 */
.chat .t-replies button.t-go {
  font-weight: 700; padding: 9px 18px; color: var(--red-2); border: 2px solid transparent; box-shadow: 0 2px 8px rgba(74, 46, 24, 0.12);
  background: linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(90deg, var(--red), var(--gold)) border-box;
}
.chat .t-quick { display: flex; justify-content: center; gap: 6px; padding: 2px 0; }
.chat .t-quick button.t-go { flex: none; max-width: 100%; animation: t-rise 0.35s var(--ease-spring) both, t-tap 2.2s ease-out 0.9s infinite; }
.chat .t-quick button.t-go:disabled { animation: none; }
@keyframes t-tap {
  0% { transform: scale(1); box-shadow: 0 2px 8px rgba(74, 46, 24, 0.12), 0 0 0 0 rgba(179, 38, 46, 0.4); }
  35% { transform: scale(1.05); }
  70% { transform: scale(1); box-shadow: 0 2px 8px rgba(74, 46, 24, 0.12), 0 0 0 10px rgba(179, 38, 46, 0); }
  100% { transform: scale(1); box-shadow: 0 2px 8px rgba(74, 46, 24, 0.12), 0 0 0 0 rgba(179, 38, 46, 0); }
}

/* 질문 입력칸 */
.chat .t-input-row { display: flex; align-items: center; gap: 4px; padding: 3px 3px 3px 14px; border-radius: 999px; border: 1px solid rgba(43, 29, 18, 0.2); background: var(--card); }
.chat .t-input-row:focus-within { border-color: var(--red); }
.chat .t-input-row input { flex: 1; min-width: 0; font: 600 16px var(--font-ui); color: var(--ink); padding: 7px 0; border: 0; background: none; outline: none; }
.chat .t-input-row input::placeholder { color: var(--ink-3); font-size: 14px; }
/* 이야기를 다 들은 뒤 질문 시간: 입력칸에 다음 이야기 단추와 같은 다홍→금빛 테두리와 퍼지는 빛(적기 시작하면 멈춤) */
.chat .t-input-row.t-hot {
  border: 2px solid transparent; padding: 2px 2px 2px 13px;
  background: linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(90deg, var(--red), var(--gold)) border-box;
  animation: t-glow 2.2s ease-out 0.6s infinite;
}
.chat .t-input-row.t-hot:focus-within { animation: none; box-shadow: 0 0 0 3px rgba(179, 38, 46, 0.15); }
.chat .t-input-row.t-hot input::placeholder { color: var(--ink-2); font-weight: 700; }
@keyframes t-glow {
  0% { box-shadow: 0 0 0 0 rgba(179, 38, 46, 0.35); }
  70%, 100% { box-shadow: 0 0 0 10px rgba(179, 38, 46, 0); }
}
.chat .t-replies .t-input-row .t-send { flex: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 50%; animation: none; box-shadow: none; }
.chat .t-replies .t-input-row .t-send svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.chat .t-replies .t-input-row .t-send:disabled { opacity: 1; background: var(--paper-2); color: var(--ink-3); }

/* 손금 보기가 끝난 뒤: 끝 표시 */
.chat .t-end { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 4px 0 2px; }
.chat .t-end-note { font-size: 14px; color: var(--ink-3); letter-spacing: 0.02em; }

/* 아래에 말이 더 있을 때 */
.chat .t-more {
  position: absolute; right: 16px; bottom: 74px; width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--ink); background: var(--card);
  box-shadow: 0 0 0 1px var(--rule), 0 4px 14px rgba(74, 46, 24, 0.18); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 0.25s, transform 0.25s;
}
.chat .t-more svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.chat .t-more.t-on { opacity: 1; transform: none; pointer-events: auto; animation: t-nudge 1.4s ease-in-out infinite; }
@keyframes t-nudge { 50% { transform: translateY(3px); } }

@media (prefers-reduced-motion: reduce) {
  .chat *, .chat *::before, .chat *::after { animation: none !important; transition: none !important; }
}