/* RW-037: 팔레트 재설정(04_자료\참고자료\팔레트_재설정_방향.md 후보 A 샴페인 아이보리) */
:root{
  --bg:#faf6ef; --text:#3a2e22; --muted:#766553;
  --accent:#8f6a2e; --accent2:#d4a373; --border:#e8ddc9;
  --card:#ffffff; --shadow:0 4px 18px rgba(120,90,40,.12);
  --bubble-bot:#ffffff; --bubble-user:linear-gradient(135deg,var(--accent),var(--accent2));
  --banner-ad-height:0px; /* ads.js가 네이티브에서 실측 배너 높이로 갱신(RW-017) */
}
@media (prefers-color-scheme: dark){
  :root{
    /*  2026-09-12 사람 지시 [곳곳에 남은 브라운 창 모두 삭제] — 다크모드 표면을 브라운에서 남색으로.
        옛 값 --bg:#211a12 / --card:#2c2318 / --border:#40331f 는 리뉴얼 전 갈색 테마의 잔재였고,
        리뉴얼된 화면들(phys-landing #100c1c · 사주집 랜딩 navy · village night)이 그 위를 덮고 있어
        **안 덮은 자리에서만 갈색이 드러났다**(2026-09-12 실측: 청운 화면 픽셀 89.9% 가 #211a12).
        새 값은 지어낸 색이 아니라 이 앱이 이미 쓰는 village.css 의 [night] 팔레트 그대로다.
        대비는 오히려 좋아졌다(재계산): text 14.30→15.20 · muted 7.47→7.94 · accent 4.11→4.37.
        ★ 금색 계열(--accent/--accent2)은 그대로 둔다 — 샴페인골드는 이 앱의 정체성이고
          사람이 지운 것은 [브라운 창(표면)]이지 금색 포인트가 아니다. */
    --bg:#10132a; --text:#f3e9d8; --muted:#b9a98c;
    --accent:#a37236; --accent2:#a8823c; --border:#262c57;
    --card:#1a1f3d; --shadow:0 4px 20px rgba(0,0,0,.5);
    --bubble-bot:#2c2318;
  }
}
*{box-sizing:border-box;}
body{
  margin:0; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column;
  background:var(--bg); color:var(--text);
  font-family:var(--font-ui,"Malgun Gothic",sans-serif);
}
header{
  padding:16px 20px; text-align:center; border-bottom:1px solid var(--border);
  position:sticky; top:0; background:var(--bg); z-index:5;
}
header h1{ margin:4px 0 0; font-size:1.2rem; }
header .back{
  position:absolute; left:16px; top:18px; color:var(--muted);
  text-decoration:none; font-size:.78rem; white-space:nowrap;
  /* M6-4 계약 §6-2 확장: 상점 화면 뒤로가기도 44px 터치영역 하한(마을 .village-back과 동일 원칙) */
  min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center;
}

/* 캐릭터 채팅방 헤더 (카카오톡형 UI) - 아바타는 임시 이모지, 최종 캐릭터 일러스트는
   디자인팀 결정 대기(신규 결재 항목, 제작규격서.md §7 참고) */
/* RW-039 → #98-B 재구성: 우측 160px 고정 여백 방식은 360px 폭에서 이름 칸이 21px만 남아
   부제가 다줄로 꺾이고 이름이 은화 배지(coins.js fixed 우상단, 실측 폭 ~152px)에 가렸다.
   2단 구성 — 1행 뒤로가기(그 우측 빈자리가 배지 자리), 2행 아바타+이름/부제(한 줄 말줄임).
   ::before(flex-basis:100%)가 줄바꿈, .back의 order:-1 이 1행 배치를 만든다 */
header.char-header{
  display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; text-align:left;
  padding:12px 12px 12px 16px;
}
header.char-header::before{ content:""; flex-basis:100%; height:0; }
header.char-header .back{ position:static; padding:4px 6px; font-size:.78rem; white-space:nowrap; flex-shrink:0; order:-1; }
.char-avatar{
  width:38px; height:38px; border-radius:50%; object-fit:cover; flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),var(--accent2)); box-shadow:var(--shadow);
}
.char-name{ display:flex; flex-direction:column; line-height:1.2; flex:1; min-width:0; }
.char-name strong{ font-size:.98rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.char-name span{ font-size:.74rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

#chat{
  flex:1; overflow-y:auto; padding:20px 16px 8px;
  max-width:520px; width:100%; margin:0 auto;
  display:flex; flex-direction:column; gap:12px;
}

.msg{
  max-width:82%; padding:12px 14px; border-radius:16px; font-size:.92rem;
  line-height:1.55; box-shadow:var(--shadow); animation:pop .25s ease;
}
.msg.bot{
  align-self:flex-start; background:var(--bubble-bot); border:1px solid var(--border);
  border-bottom-left-radius:4px; margin-left:34px; position:relative;
}
.msg.bot::before{
  content:"🔮"; position:absolute; left:-34px; bottom:0; width:26px; height:26px;
  border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:flex; align-items:center; justify-content:center; font-size:.85rem;
}
.msg.user{
  align-self:flex-end; background:var(--bubble-user); color:#fff;
  border-bottom-right-radius:4px;
}
.msg.system{
  align-self:center; color:var(--muted); font-size:.78rem; background:none; box-shadow:none;
}

.msg .card-reveal{
  display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:4px;
}
.msg .card-reveal img{
  width:150px; height:auto; border-radius:12px; border:1px solid var(--border);
  box-shadow:var(--shadow);
}
.msg .card-reveal img.reversed{ transform:rotate(180deg); }
/* M7-④(업무지시_대장 #88): 카드 공개 3D 플립 - 뒷면(back.webp)에서 앞면으로 뒤집힌다.
   신규 에셋 없이 기존 카드 뒷면 일러스트(RW-018) 재사용. reduced-motion이면 전환 없이
   앞면 즉시 표시(아래 미디어쿼리). */
.card-flip{ perspective:900px; }
.card-flip-inner{
  position:relative; transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.3,.7,.25,1);
}
.card-flip-inner.flipped{ transform:rotateY(180deg); }
.card-face-front{
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  transform:rotateY(180deg);
}
/* 인라인 img 베이스라인 갭(≈6px) 때문에 뒷면(inset:0)이 앞면보다 길어지는 것 방지 */
.card-face-front img{ display:block; }
.card-face-back{
  position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  background:url("assets/cards/back.webp") center/cover no-repeat;
  border-radius:12px; border:1px solid var(--border); box-shadow:var(--shadow);
}
@media (prefers-reduced-motion: reduce){
  .card-flip-inner{ transition:none; }
}
.msg .card-reveal .card-title{ font-weight:700; }
.msg .card-reveal .card-sub{ font-size:.78rem; color:var(--muted); }
/* 3카드 스프레드(RW-007) - 과거/현재/미래 포지션 라벨 */
.msg .card-reveal .card-position{
  font-size:.72rem; font-weight:700; color:var(--accent); letter-spacing:.02em;
  text-transform:uppercase;
}

.choices{
  display:flex; gap:8px; flex-wrap:wrap; align-self:flex-start; margin-left:4px;
}
/*  ★ 2026-08-31 — **마지막** 선택지 줄만 좌하단 음악 위젯 자리를 비운다.
      `.tarot-audio-widget`(audio.js · position:fixed · z:30)은 412px 실측으로
      x12~55 · y865~901 에 떠 있다 — 이 좌표는 village-fullbleed.css:173 에도 같은 값으로
      적혀 있다. 선택지가 **두 줄로 접히면** 둘째 줄이 x20 부터 시작해 그 위젯 위에 앉고,
      그 자리를 누르면 버튼이 아니라 음악이 켜진다(실측: 도사집 마무리의 [마을로] 20~93 ·
      863~907 왼쪽 절반이 위젯이었다 — elementFromPoint 로 확인).
      ★ z-index 를 올려 위젯과 싸우지 않는다. 눌리기는 해도 **글자는 여전히 가려진다.**
      ★ `:last-child` 를 붙였지만 **지금은 사실상 모든 선택지에 걸린다** — 이 화면은 선택지
        묶음을 한 번에 하나만 두고 고르면 지우기 때문에 `.choices` 는 언제나 마지막이다
        (2026-08-31 실측: 대화 중이든 마무리든 묶음 수가 늘 1). 그래도 선택자를 남겨 두는 것은,
        나중에 선택지를 남겨 두는 흐름이 생기면 그때 자동으로 마지막 줄에만 걸리게 하기 위해서다.
      ★ 마을(village-fullbleed.css:173)은 `justify-content:center` 로 같은 위젯을 피했다.
        여기서 가운데 정렬로 바꾸지 않는 것은 상담 5화면의 선택지가 전부 왼쪽 정렬이라
        그 하나를 위해 다섯 화면의 결을 바꾸게 되기 때문이다.
      ★ 루나(.tj-acts)는 이미 가운데 정렬이라 이 문제가 없다 — 손대지 않는다. */
.choices:last-child{ padding-bottom:48px; }
.choices button{
  background:var(--card); border:1px solid var(--accent); color:var(--accent);
  border-radius:999px; padding:8px 16px; font-size:.85rem; cursor:pointer; font-family:inherit;
  display:inline-flex; align-items:center; gap:6px; min-height:44px; /* RW-074: 탭 영역 44px */
}
.choices button:hover{ background:var(--accent); color:#fff; }
/* 1.1.2 — [🎬 광고 보고 …] 문구가 길어져 버튼 안에서 두 줄로 접히던 것: 글은 한 줄로 두고 줄(.choices)이 접히게 한다 */
.choices button.choice-ad{ white-space:nowrap; }

/* 무료/프리미엄 경계 UI 배지(RW-010, 목표물.md 경쟁 우위 목표) - 표본1의 "무료-유료 혼동
   유도" 최다공감 불만을 반면교사. 프리미엄 진입점에는 항상 이 배지가 붙고, 무료 스프레드
   (싱글/3카드/예스오노) 선택지에는 붙지 않는다. 색상은 기존 팔레트의 골드 포인트(#f6c453)로
   보라 계열 UI와 대비돼 "여긴 유료"임이 한눈에 보이게 함. */
.badge-premium{
  background:#f6c453; color:#241b33; font-size:.65rem; font-weight:800;
  padding:2px 8px; border-radius:999px; line-height:1.4; letter-spacing:.02em;
}

/* AI 생성 콘텐츠 정책 준수(제작규격서.md §4-2) - 신고 UI */
.ai-report{
  margin:2px 0 0 34px; display:flex; align-items:center; gap:8px;
}
.ai-report button{
  background:none; border:none; color:var(--muted); font-size:.72rem;
  cursor:pointer; font-family:inherit; padding:2px 0; text-decoration:underline;
}
.ai-report button:hover{ color:var(--accent); }
.ai-report .sent{ font-size:.72rem; color:var(--muted); }
.report-reasons{
  display:flex; gap:6px; flex-wrap:wrap; margin-left:34px;
}
.report-reasons button{
  background:var(--card); border:1px solid var(--border); color:var(--text);
  border-radius:999px; padding:5px 12px; font-size:.76rem; cursor:pointer; font-family:inherit;
}
.report-reasons button:hover{ border-color:var(--accent); color:var(--accent); }

.typing{ display:inline-flex; gap:4px; align-items:center; }
.typing span{
  width:6px; height:6px; border-radius:50%; background:var(--muted);
  animation:blink 1.1s infinite ease-in-out;
}
.typing span:nth-child(2){ animation-delay:.15s; }
.typing span:nth-child(3){ animation-delay:.3s; }

#composer{
  display:flex; gap:8px; padding:12px 16px; border-top:1px solid var(--border);
  max-width:520px; width:100%; margin:0 auto; background:var(--bg);
}
#user-input{
  flex:1; padding:12px 14px; border-radius:12px; border:1px solid var(--border);
  background:var(--card); color:var(--text); font-family:inherit; font-size:.9rem;
}
#user-input:focus{ outline:2px solid var(--accent2); }
#send-btn{
  background:var(--accent); color:#fff; border:none; border-radius:12px;
  padding:0 18px; font-size:.9rem; font-weight:600; cursor:pointer; font-family:inherit;
  min-height:44px; /* RW-074: WCAG 최소 탭 영역 44px, style.css button 규칙과 동일 원칙 */
}
#send-btn:hover{ filter:brightness(1.08); }
#composer.hidden{ display:none; }

/* ---- 반응형(두번째씬_마을맵_기획.md §10-4 원칙 - calc()/CSS 변수 기반, 신규
   브레이크포인트 체계 신설 안 함, village.css/style.css와 동일 breakpoint) ----
   RW-074: reading.css는 reading/saju/mbti/physiognomy/playground 5개 채팅형
   화면이 공유하므로 여기 한 곳만 고치면 5개 화면에 전부 반영된다. */
@media (min-width:768px){
  #chat, #composer, .card-fan{ max-width:clamp(520px, 62vw, 640px); }
  .msg{ font-size:clamp(.92rem, 1.5vw, 1rem); }
  .msg .card-reveal img{ width:clamp(150px, 16vw, 190px); }
}
@media (min-width:1024px){
  #chat, #composer, .card-fan{ max-width:clamp(520px, 42vw, 760px); }
  .msg{ font-size:clamp(.92rem, 1vw, 1.05rem); }
  .msg .card-reveal img{ width:clamp(150px, 11vw, 210px); }
}

/* 하단 배너 광고(네이티브 오버레이)가 대화창을 가리지 않도록 여백 확보.
   2026-08-20 사람 직접 지시("상점 대화창이 배너에 짤림") 재설계: 요소별 padding
   (#composer/#chat 각각)은 입력칸만 밀어올리고 대화창 배경·마지막 말풍선은 여전히
   배너 뒤로 들어갔다. body가 flex column(min-height:100dvh)이므로 body 자체에
   배너 높이만큼 padding-bottom을 줘 화면 전체를 배너 위에서 끝낸다 — 대화창·입력창·
   선택지 버튼 전부가 구조적으로 배너와 겹칠 수 없다. reading.css는 reading/saju/
   mbti/physiognomy/playground 5개 채팅 화면 공유라 여기 한 곳으로 전부 해결(RW-074). */
body.has-banner-ad{ padding-bottom:calc(var(--banner-ad-height) + 12px); }
body.has-banner-ad #chat{ padding-bottom:12px; }

@keyframes pop{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }
@keyframes blink{ 0%,80%,100%{ opacity:.25; } 40%{ opacity:1; } }

/* 카드 부채꼴 선택 UI - 카드 뒷면은 디자인팀 확정 일러스트(assets/cards/back.webp, RW-018) */
.card-fan{
  display:flex; justify-content:center; align-items:flex-end; gap:0; padding:10px 8px 18px;
  max-width:520px; width:100%; margin:0 auto; min-height:150px;
}
.card-fan.hidden{ display:none; }
.card-back{
  width:74px; height:118px; border-radius:10px; margin:0 -18px; cursor:pointer;
  background-image:url("assets/cards/back.webp");
  background-size:cover; background-position:center;
  border:2px solid var(--card); box-shadow:var(--shadow);
  transform-origin:bottom center;
  animation:fan-in .45s cubic-bezier(.2,.8,.3,1.2) backwards;
  transition:transform .18s ease, box-shadow .18s ease;
}
.card-back:hover{ transform:translateY(-10px) scale(1.04); }
.card-back:nth-child(1){ transform:rotate(-16deg) translateY(6px); animation-delay:.02s; }
.card-back:nth-child(2){ transform:rotate(-8deg) translateY(-2px); animation-delay:.08s; }
.card-back:nth-child(3){ transform:rotate(0deg) translateY(-8px); animation-delay:.14s; }
.card-back:nth-child(4){ transform:rotate(8deg) translateY(-2px); animation-delay:.2s; }
.card-back:nth-child(5){ transform:rotate(16deg) translateY(6px); animation-delay:.26s; }
.card-back.picked{ outline:3px solid var(--accent); }
.card-back.fade-out{ opacity:0; transform:translateY(30px) scale(.85); transition:all .3s ease; }

.pulse-btn{ animation:pulse 1.4s infinite; }

@keyframes fan-in{ from{ opacity:0; transform:translateY(60px) rotate(0deg) scale(.7); } }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(143,106,46,.45); } 50%{ box-shadow:0 0 0 8px rgba(143,106,46,0); } }