/* ============================================================
   대화 화면 — 하루와 주고받으며 사주를 본다
   ------------------------------------------------------------
   · 캐릭터 그림이 화면을 가득 채우고, 그 위로 말이 쌓인다.
   · 질문도 결과도 같은 대화 안에서 이어진다. 폼이 따로 없다.
   · 말풍선은 불투명에 가깝게 — 그림이 비쳐 글이 흐려지면 안 된다.
   ============================================================ */
.talk {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column;
  background: #0A0C12; color: #fff;
  overscroll-behavior: contain;
}

.talk-art { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* 얼굴(표정) 전환 — 새 그림이 서서히 올라오고 옛 그림이 서서히 내려간다.
   빠르기는 아래 변수 하나로 조절한다. 1.8초가 기본. */
/* ┌────────────────────────────────────────────────────────────────┐
   │  ★ 조절 (사장님용) — 숫자 뒤 단위(s, px, ms) 필수                    │
   │    --face-fade   새 그림이 떠올라 바뀌는 시간   1.6s  (1s 빠르게 · 2.5s 느리게) │
   │    --face-blur   바뀌는 동안 살짝 흐림          3px   (0px 없음 · 8px 많이)     │
   │    --ch-step     글자 한 자가 나타나는 간격     42ms  (0ms 한 번에 · 60ms 천천히) │
   │  고친 뒤 브라우저에서 Ctrl+F5                                      │
   └────────────────────────────────────────────────────────────────┘ */
.talk { --face-fade: 1.6s; --face-blur: 3px; --ch-step: 42ms; }

/* 그림(표정) 전환 — 옛 그림은 그대로 둔 채, 새 그림이 그 위에서 서서히 짙어진다(그라데이션처럼 녹아듦).
   ★ 두 그림을 동시에 옅히고 짙히면(보통의 크로스페이드) 중간 지점에서 바탕색이 25% 비쳐
     잠깐 어두워졌다 돌아온다(검토 실측 계산). 옛 그림을 불투명하게 깔아 두면 그 틈이 0 이다.
   옛 그림은 새 그림이 다 뜬 뒤(--face-fade 뒤) 한 번에 숨긴다 — 이미 가려져 있어 눈에 안 띈다. (2026-09-03) */
.talk-art .face {
  position: absolute; inset: 0; opacity: 0; z-index: 0;
  filter: blur(var(--face-blur));
  transition: opacity 0s linear var(--face-fade),
              filter  0s linear var(--face-fade);
}
.talk-art .face.show {
  opacity: 1; filter: blur(0); z-index: 1;
  transition: opacity var(--face-fade) ease-out,
              filter  var(--face-fade) ease-out;
}
.talk-art .fg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 10%;
}

.talk-art .wide { display: none; }   /* 넓은 화면에서만 쓴다 */
.talk-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(10,12,18,.55) 0%, rgba(10,12,18,.10) 26%,
                    rgba(10,12,18,.42) 55%, rgba(10,12,18,.88) 82%, rgba(10,12,18,.97) 100%);
}

.talk-top {
  position: relative; z-index: 3; flex: 0 0 auto;
  display: flex; align-items: center; gap: 12px;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px;
  background: linear-gradient(to bottom, rgba(10,12,18,.85), rgba(10,12,18,0));
}
.talk-top .who { flex: 1 1 auto; font-size: 15px; font-weight: 800; letter-spacing: -0.03em; }
.talk-top .who small { display: block; font-size: 11.5px; font-weight: 500; opacity: .62; letter-spacing: 0; }
.talk-x {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.18); border: 0; color: #fff; font-size: 17px; cursor: pointer;
}

.talk-log {
  position: relative; z-index: 2;
  /* ★ 화면을 다 채우면 캐릭터 얼굴이 가린다. 아래쪽 절반만 쓰고 나머지는 그림에 내준다. */
  flex: 0 1 auto; max-height: 48vh;
  transition: max-height .32s ease;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  /* ★ justify-content:flex-end 를 쓰면 넘친 내용이 위로 잘려 스크롤이 안 된다(플렉스박스의 알려진 문제 —
     실측: scrollHeight 가 보이는 높이와 같아 지난 말을 올려 볼 수 없었다). 첫 말에 margin-top:auto 를 줘 아래로 붙인다. */
  display: flex; flex-direction: column; gap: 7px;
  padding: 26px 16px 8px;
  max-width: 560px; width: 100%; margin-left: auto; margin-right: auto;
  /* 위로 밀려 올라간 말은 서서히 사라지게 */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 30px);
}

.msg { max-width: 84%; opacity: 0; transform: translate3d(0, 10px, 0); animation: pop .34s cubic-bezier(.2,.8,.3,1) forwards; }
/* ② 하루의 말은 글자가 한 자씩 나타난다 (타이트사주의 제목 연출) */
.msg.her .ch { opacity: 0; animation: ch-in .32s ease forwards; }
@keyframes ch-in { to { opacity: 1; } }
/* ③ 고를 버튼은 하나씩 뒤따라 떠오른다 */
/* ── 이전 대화 손잡이 ─────────────────────────────────────
   대화창 바로 위에 붙은 작은 손잡이. 누르거나 위로 끌면 .talk.expanded 가 되어 대화창이 화면 대부분을 차지하고
   지난 말을 올려 볼 수 있다. 그림은 뒤에서 어두워진다. (사장님 지시 2026-09-03) */
.talk-log > .msg:first-child { margin-top: auto; }   /* 말이 적을 때는 아래에 붙고, 많으면 위로 스크롤된다 */

.talk-grip {
  position: relative; z-index: 3; margin-top: auto; flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 0 2px; cursor: pointer; user-select: none; touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.talk-grip .bar { width: 44px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.55); }
.talk-grip .txt { font-size: 11.5px; font-weight: 600; letter-spacing: -0.01em; color: rgba(255,255,255,.72); }
.talk-grip:hover .bar, .talk-grip:focus-visible .bar { background: rgba(255,255,255,.85); }
.talk-grip:focus-visible { outline: none; }
.talk.expanded .talk-log { max-height: calc(100vh - 150px); }
.talk-art { transition: opacity .32s ease; }
.talk.expanded .talk-art { opacity: .22; }          /* 지난 말을 읽는 동안 그림은 뒤로 물러난다 */
.talk.expanded .talk-log { -webkit-mask-image: none; mask-image: none; }

.talk-ask .pick { opacity: 0; transform: translate3d(0, 8px, 0); animation: pick-in .38s ease forwards; }
.talk-ask .pick:nth-child(1) { animation-delay: .10s; }
.talk-ask .pick:nth-child(2) { animation-delay: .22s; }
.talk-ask .pick:nth-child(3) { animation-delay: .34s; }
.talk-ask .pick:nth-child(4) { animation-delay: .46s; }
.talk-ask .pick:nth-child(n+5) { animation-delay: .58s; }
@keyframes pick-in { to { opacity: 1; transform: none; } }
@keyframes pop { to { opacity: 1; transform: none; } }

.msg.her {
  align-self: flex-start;
  background: rgba(16,18,26,.93); border: 1px solid rgba(255,255,255,.16);
  border-radius: 15px 15px 15px 5px; padding: 11px 14px;
  font-size: 15.5px; line-height: 1.7; letter-spacing: -0.02em;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
}
.msg.her.lead { font-size: 18px; font-weight: 800; line-height: 1.55; color: #E9E2FF; }
.msg.me {
  align-self: flex-end; background: #5B4BC4; color: #fff;
  border-radius: 15px 15px 5px 15px; padding: 11px 14px;
  font-size: 15.5px; line-height: 1.7; font-weight: 600; letter-spacing: -0.02em;
  box-shadow: 0 4px 18px rgba(0,0,0,.3);
}
.msg.dots { display: flex; gap: 4px; align-items: center; padding: 13px 15px; }
.msg.dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.7); animation: dot 1.1s ease-in-out infinite; }
.msg.dots i:nth-child(2) { animation-delay: .18s; }
.msg.dots i:nth-child(3) { animation-delay: .36s; }
@keyframes dot { 0%,100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

.msg.panel {
  align-self: stretch; max-width: 100%;
  background: rgba(16,18,26,.93); border: 1px solid rgba(255,255,255,.18);
  border-radius: 15px; padding: 14px; backdrop-filter: blur(8px);
}

.talk-ask {
  position: relative; z-index: 3; flex: 0 0 auto;
  display: flex; flex-direction: column; gap: 9px;
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  max-width: 560px; width: 100%; margin: 0 auto;
}
.pick {
  width: 100%; padding: 15px 18px; border-radius: 14px;
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.26); color: #fff;
  font-family: inherit; font-size: 16px; font-weight: 700; letter-spacing: -0.02em;
  cursor: pointer; backdrop-filter: blur(8px);
  transition: background .14s ease, transform .1s ease;
}
.pick:hover { background: rgba(255,255,255,.22); }
.pick:active { transform: scale(.99); }
.pick.solid { background: #fff; color: #17151F; border-color: #fff; }

.entry { display: flex; gap: 8px; align-items: center; }
.entry .box {
  flex: 1 1 auto; display: flex; gap: 6px; min-width: 0;
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.26);
  border-radius: 14px; padding: 6px 8px; backdrop-filter: blur(8px);
}
.entry input {
  flex: 1 1 auto; min-width: 0; width: 100%;
  background: transparent; border: 0; color: #fff;
  font-family: inherit; font-size: 16.5px; font-weight: 600; text-align: center;
  padding: 9px 4px; appearance: none;
}
.entry input::placeholder { color: rgba(255,255,255,.42); font-weight: 500; }
.entry input:focus { outline: none; background: rgba(255,255,255,.12); border-radius: 9px; }
.entry .send {
  flex: 0 0 auto; padding: 14px 18px; border-radius: 14px; border: 0;
  background: #fff; color: #17151F; font-family: inherit; font-size: 15.5px; font-weight: 800;
  cursor: pointer; white-space: nowrap;
}
.entry .send:disabled { opacity: .45; cursor: default; }
.entry select {
  flex: 1 1 auto; min-width: 0; background: rgba(255,255,255,.13); color: #fff;
  border: 1px solid rgba(255,255,255,.26); border-radius: 14px; padding: 14px 12px;
  font-family: inherit; font-size: 16px; font-weight: 600; appearance: none;
}
.entry select option { background: #14161F; color: #fff; }

.talk-note { font-size: 12.5px; color: rgba(255,255,255,.62); line-height: 1.6; text-align: center; }
.talk-err  { font-size: 13px; color: #FFB4AE; line-height: 1.6; text-align: center; }

/* 대화 안의 작은 자료 */
.mini-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.mini-pillars > div { text-align: center; }
.mini-pillars .p { font-size: 11.5px; opacity: .7; }
.mini-pillars .g { font-size: 26px; font-weight: 700; line-height: 1.2; }
.mini-pillars .k { font-size: 12px; opacity: .7; }
.mini-bars { display: flex; flex-direction: column; gap: 7px; }
.mini-bars .row2 { display: grid; grid-template-columns: 20px 1fr 40px; align-items: center; gap: 9px; font-size: 13px; }
.mini-bars .tr { height: 9px; border-radius: 999px; background: rgba(255,255,255,.16); overflow: hidden; }
.mini-bars .fl { display: block; height: 100%; border-radius: 999px; }
.mini-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mini-scroll table { border-collapse: collapse; font-size: 13px; white-space: nowrap; width: 100%; }
.mini-scroll th, .mini-scroll td { padding: 6px 9px; border-bottom: 1px solid rgba(255,255,255,.14); text-align: center; }
.mini-scroll th { opacity: .7; font-weight: 600; }

/* 넓은 화면 — "화면을 줄였을 때가 가장 보기 좋다"는 말을 그대로 따른다.
   가운데에 휴대폰 폭(580px)의 무대를 세우고, 세로 그림을 그대로 쓴다.
   주변은 큰 그림자로 덮어 무대만 보이게 한다.
   (예전에는 가로 그림 + 왼쪽 말풍선이었는데 가운데가 비어 어색했다) */
@media (min-width: 820px) {
  .talk {
    left: 50%; right: auto; width: 580px; transform: translateX(-50%);
    box-shadow: 0 0 0 100vmax #0A0C12;
  }
  .talk-art .tall { display: block; }
  .talk-art .wide { display: none; }
  .talk-log { max-height: 52vh; }
  .talk.expanded .talk-log { max-height: calc(100vh - 150px); }
}

@media (prefers-reduced-motion: reduce) {
  .talk-art .face { transition: none; }   /* 그림 전환도 즉시 */
  .msg { animation: none; opacity: 1; transform: none; }
  .msg.her .ch, .talk-ask .pick { animation: none; opacity: 1; transform: none; }
  .msg.dots i { animation: none; }
}