/* ============================================================
   인터레스트 토킹 존 — 터치 키오스크 (세로형)
   1080×1920 키오스크 ~ 데스크톱 프리뷰까지 rem 스케일 대응
   ============================================================ */
:root {
  /* 2026 리브랜드: 그라데이션 금지 → 로고 레드 단색 사용 */
  --t-brand: #CC140A;          /* 공식 로고 레드 (배경·버튼 공용) */
  --t-ink: #1B1817;
  --t-pink: #E9B2E6;           /* 대화 주제 관심사 칩 */
  --t-peri: #A6BAE1;
  --t-red: #CC140A;
  --t-red-dark: #9E0E14;
  --t-offwhite: #F0E2ED;       /* 틴더 브랜드 가이드라인 V1.0 p.111 Off-White (PMS 9061 C) */
  --bg: #111418;
  --bg-soft: #1b1f24;
  --ink: #fff;
  --ink-soft: #a5adb8;
  --font: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", sans-serif;
}
/* 키오스크(1920h)에서는 크게, 노트북 프리뷰에서는 적당히 */
html { font-size: clamp(13px, 1.42vh, 24px); }
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* touch-action: pan-y 는 세로 스크롤만 허용하고 핀치 줌을 브라우저 차원에서 뺀다.
   (none 으로 두면 대화 로그 스크롤까지 죽는다 — 0811 '어떤 경우에도 확대 불가' 대응) */
html, body { height: 100%; touch-action: pan-y; }
body {
  background: var(--bg); color: var(--ink); font-family: var(--font);
  overflow: hidden; overscroll-behavior: none; cursor: default;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
#app, .screen { height: 100dvh; width: 100%; position: relative; }
.screen { display: flex; flex-direction: column; align-items: center; overflow: hidden; }
button { font-family: inherit; border: 0; background: none; color: inherit; cursor: pointer; }
img { -webkit-user-drag: none; }
.col { width: min(75vw, 34rem); }

/* ---------- 공통 CTA ---------- */
.cta {
  border-radius: 999px; padding: 1.1rem 1.4rem; font-size: 1.15rem; font-weight: 800; color: #fff;
  background: var(--t-brand);
  box-shadow: 0 .5rem 1.4rem rgba(205, 19, 10, .38);
  transition: transform .12s ease; width: 100%;
}
.cta:active { transform: scale(.96); }
.cta.ghost { background: none; border: 2px solid rgba(255, 255, 255, .6); box-shadow: none; font-weight: 700; }

/* ---------- 대기 화면 (Step 1) ---------- */
.attract {
  background: var(--t-brand);
  justify-content: space-between;
}
.at-hearts { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.at-heart { position: absolute; bottom: -4rem; animation: atRise linear infinite; }
@keyframes atRise {
  0% { transform: translateY(0) rotate(-6deg); opacity: 0 }
  15% { opacity: .5 }
  100% { transform: translateY(-108vh) rotate(8deg); opacity: 0 }
}
.at-top { display: flex; flex-direction: column; align-items: center; margin-top: 8vh; z-index: 2; }
/* 행잉 사인 스타일 타이틀 */
.at-sign {
  /* 0819 요청: 흰 박스 색을 존 타이포('글로벌 채팅존')와 통일 — 실측 #F5E9F3 */
  background: var(--t-offwhite); color: var(--t-red); border-radius: 1rem;
  padding: 1rem 1.8rem; text-align: center;
  box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, .3);
  position: relative; animation: signSwing 5s ease-in-out infinite;
  transform-origin: top center;
}
@keyframes signSwing { 0%, 100% { transform: rotate(-1.2deg) } 50% { transform: rotate(1.2deg) } }
.at-sign .s-brand { display: flex; align-items: center; justify-content: center; gap: .3rem; }
.at-sign .s-brand .bflame { height: 1.5rem; }
.at-sign .s-brand .bmark { height: 1.1rem; }
.at-sign h1 { font-size: 2.6rem; font-weight: 900; letter-spacing: -.08rem; line-height: 1.12; }
/* 존별 타이포그래피 — 원본 비율 유지, 화면 폭에 맞춰 스케일 */
.at-typo { display: block; width: min(58vw, 20rem); height: auto; margin: 1.8rem auto 0; }
.at-tagline { margin-top: 1.4rem; font-size: 1.25rem; font-weight: 600; color: #ffe1e3; text-align: center; line-height: 1.6; }
.at-mid { z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
/* QR 스캔 유도 */
.scan-guide {
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  background: rgba(0, 0, 0, .28); border: 2px dashed rgba(255, 255, 255, .55);
  border-radius: 1.6rem; padding: 1.8rem 2.4rem; backdrop-filter: blur(4px);
}
/* 우측 물리 스캐너를 가리키는 화살표 — 화면 오른쪽 끝에 붙인다 */
.at-mid { position: relative; width: 100%; }
.scan-arrow {
  /* right 여백은 nudge 애니메이션(+.9rem)까지 감안해서 잡는다 */
  position: absolute; right: 2.2rem; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  animation: arrowNudge 1.5s ease-in-out infinite;
}
.scan-arrow svg { width: 6.5rem; height: auto; display: block; filter: drop-shadow(0 .2rem .5rem rgba(0, 0, 0, .4)); }
.scan-arrow span { font-size: 1.25rem; font-weight: 800; color: #fff; letter-spacing: .04em; }
@keyframes arrowNudge {
  0%, 100% { transform: translate(0, -50%); opacity: .8 }
  50% { transform: translate(.9rem, -50%); opacity: 1 }
}

/* 카메라 프리뷰 박스 — 웹캠 동작 시 영상, 없으면 스캔 아이콘 */
.scan-cam {
  position: relative; width: 15rem; height: 15rem; border-radius: 1.2rem;
  overflow: hidden; background: rgba(0, 0, 0, .35);
  transition: box-shadow .3s, background .3s;
}
/* 거울 반전 없음 — QR 카드/글자가 뒤집혀 보이면 오히려 위치 잡기 어렵다 */
.scan-cam video {
  width: 100%; height: 100%; object-fit: cover; display: none;
}
.scan-cam.live video { display: block; }
.scan-cam.live { background: #000; }
.scan-icon {
  position: absolute; inset: 0; margin: auto; width: 7rem; height: 7rem;
  display: flex; align-items: center; justify-content: center;
}
.scan-cam.live .scan-icon { display: none; }
.scan-icon svg { width: 100%; height: 100%; }
/* 조준 코너 4개 */
.scan-corners i {
  position: absolute; width: 2.2rem; height: 2.2rem;
  border: .28rem solid rgba(255, 255, 255, .95); border-radius: .3rem;
}
.scan-corners i:nth-child(1) { top: .9rem; left: .9rem; border-right: 0; border-bottom: 0; }
.scan-corners i:nth-child(2) { top: .9rem; right: .9rem; border-left: 0; border-bottom: 0; }
.scan-corners i:nth-child(3) { bottom: .9rem; left: .9rem; border-right: 0; border-top: 0; }
.scan-corners i:nth-child(4) { bottom: .9rem; right: .9rem; border-left: 0; border-top: 0; }
.scan-line {
  position: absolute; left: 10%; right: 10%; height: .22rem; border-radius: 999px;
  background: linear-gradient(90deg, transparent, #fff, transparent);
  animation: scanMove 1.8s ease-in-out infinite;
}
@keyframes scanMove { 0%, 100% { top: 14% } 50% { top: 82% } }
/* 인식 성공 플래시 */
.scan-cam.hit { box-shadow: 0 0 0 .4rem #2AE38A, 0 0 2.4rem rgba(42, 227, 138, .8); }
.scan-cam.hit .scan-corners i { border-color: #2AE38A; }
.scan-cam.hit .scan-line { display: none; }
/* QR은 읽혔지만 프로필 카드가 아닐 때 */
.scan-cam.miss { box-shadow: 0 0 0 .4rem #F0B435, 0 0 2.4rem rgba(240, 180, 53, .7); }
.scan-cam.miss .scan-corners i { border-color: #F0B435; }
.sg-sub.warn {
  color: #fff; font-weight: 700; background: rgba(0, 0, 0, .35);
  border-radius: .7rem; padding: .55rem .9rem; display: inline-block; line-height: 1.5;
}
.staff-diag {
  font-size: .85rem; color: #a5adb8; margin: -.6rem 0 1rem;
  max-width: 60rem; word-break: break-all; text-align: center;
}
.staff-diag b { color: #2AE38A; font-weight: 600; }
.scan-guide p { font-size: 1.35rem; font-weight: 700; text-align: center; line-height: 1.6; }
.scan-guide p b { font-weight: 900; color: #fff; border-bottom: .2rem solid rgba(255, 255, 255, .55); padding-bottom: .1rem; }
.scan-guide .sg-sub { font-size: 1rem; font-weight: 500; color: #ffd9db; text-align: center; }
.at-bottom { z-index: 2; margin-bottom: 5vh; text-align: center; }
.at-bottom p { font-size: .95rem; color: rgba(255, 255, 255, .75); line-height: 1.6; }

/* 스태프용 캐릭터 선택 패널 */
.staff-panel {
  position: fixed; inset: 0; z-index: 99; background: rgba(10, 12, 14, .96);
  display: flex; flex-direction: column; align-items: center; padding: 3vh 4vw; overflow-y: auto;
}
.staff-panel h2 { font-size: 1.3rem; margin-bottom: 1.2rem; }
.staff-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; width: 100%; max-width: 60rem; }
.staff-item { background: var(--bg-soft); border: 1px solid #2a3038; border-radius: .8rem; padding: .7rem .4rem; font-size: .92rem; font-weight: 700; color: #fff; }
.staff-close { margin-top: 1.4rem; font-size: 1rem; color: var(--ink-soft); text-decoration: underline; }

/* ---------- 인사 화면 (프로필 히어로) ---------- */
.greet { background: var(--bg); justify-content: flex-start; }
.greet-photo { position: relative; width: 100%; height: 49.4dvh; overflow: hidden; }
.greet-photo .g-photo { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.greet-photo .g-scrim { position: absolute; inset: 0; background: linear-gradient(to top, var(--bg) 2%, rgba(17, 20, 24, .25) 30%, transparent 55%); }
/* 도시 표기: 우측 상단, 📍 없이 텍스트만 */
.g-loc {
  position: absolute; top: 1.5rem; right: .9rem;
  max-width: calc(100% - 1.8rem); padding: .32rem .5rem;
  /* 0819 요청: 올리브빛이 초록 박스로 보인다 → 매칭존 프로필 카드와 같은 반투명 검정 */
  border-radius: .18rem; background: rgba(0, 0, 0, .62);
  font-size: .72rem; font-weight: 800; color: #fff; white-space: nowrap;
  text-shadow: 0 1px .35rem rgba(0, 0, 0, .6);
  backdrop-filter: blur(.18rem);
}
.g-flame { position: absolute; top: 1.1rem; right: 1.2rem; height: 2rem; }
/* 0819 시안: 이름 뒤 블랙 박스 삭제. 사진 위 그라디언트(.g-scrim)와 글자 그림자로 가독성을 잡는다. */
.g-name {
  position: absolute; left: .8rem; bottom: 0;
  padding: .3rem .4rem .35rem;
}
.g-name h1 { font-size: 2.05rem; font-weight: 800; letter-spacing: -.05rem; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.g-name h1 span { font-size: 1.65rem; font-weight: 500; }
.g-name p { font-size: .85rem; color: #dfe3e8; margin-top: .16rem; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.g-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .35rem; }
/* 관심사 칩: 아웃라인 제거·검정 채움, 대화 주제(첫 칩)만 핑크 */
.g-tags i { font-style: normal; border: 0; border-radius: 999px; padding: .24rem .65rem; font-size: .72rem; font-weight: 700; background: var(--t-ink); color: #fff; }
.g-tags i.hot { background: var(--t-pink); color: var(--t-ink); }
/* 인증마크 */
.g-name h1 .g-vf { width: 1.2rem; height: 1.2rem; display: inline-block; vertical-align: -.16rem; margin-left: .2rem; }
/* 버튼을 화면 맨 아래로 밀지 않는다 — 세로형 키오스크에서 손이 닿지 않음 */
.greet-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2rem; padding: 2.4rem 0 4vh; }
.greet-bubble {
  position: relative; background: var(--bg-soft); border: 1px solid #2a3038;
  border-radius: 1.4rem; border-top-left-radius: .3rem;
  padding: 1rem 1.2rem; font-size: 1rem; line-height: 1.58; font-weight: 500;
  white-space: pre-line; color: #eef0f2;
  animation: bubbleIn .4s ease both;
}
.greet-hint { font-size: .82rem; color: var(--ink-soft); margin-top: .85rem; }
.greet .cta { padding: .8rem 1.4rem; font-size: 1.05rem; }

/* TINDER PASSPORT 안내 카피 (0819 광고주 요청) — 대화 시작하기 버튼 아래.
   'TINDER PASSPORT'(800) 와 '란?'(400) 의 굵기 차이는 시안 필수 조건이다. */
/* 0819 카피 수정: 긴 설명 대신 한 줄로. 휴대폰에서도 진행하게 되어 화면이 좁다. */
.tp-note { margin-top: 1.5rem; text-align: center; }
.tp-note p { font-size: .7rem; line-height: 1.5; color: var(--ink-soft); }

/* ---------- 채팅 화면 ---------- */
/* 0814 시안: 선택지 아래로 지구 배너 자리를 비워 둔다(버튼 아래끝 = 화면의 83.25%) */
.chat { background: #fff; --opt-lift: 16.75dvh; }
/* 프로필 히어로 (화면 상단) — 첫인사 화면과 같은 구성, 높이만 축소 */
/* 상단 이미지는 스크롤 대상이 아니므로 아예 모든 터치 제스처를 뺀다(0811 확대 지적 지점). */
.chat-hero { position: relative; width: 100%; height: 33.3dvh; overflow: hidden; flex-shrink: 0; touch-action: none; }
.chat-hero .g-photo { pointer-events: none; }
/* 0810 현장 피드백: 좌우 여백 없이 꽉 채우되 바스트까지 보여야 한다.
   cover 는 컨테이너가 세로로 길수록 원본을 더 많이 보여주므로,
   사진을 줄이는 대신 히어로 높이를 키우고(아래 키오스크 미디어쿼리) 대화 UI 를 아래로 민다. */
.chat-hero .g-photo { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.chat-hero .g-scrim { position: absolute; inset: 0; z-index: 2; background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.3) 34%, transparent 62%); }
/* 0819 요청: 관심사 칩 바로 아래에서 흰 대화창이 시작돼 답답해 보인다 → 아래 여백을 준다.
   (첫인사는 아래가 같은 어두운 배경이라 그대로 둔다) */
.chat-hero .g-name { position: absolute; z-index: 3; left: .8rem; bottom: 1rem; }
.chat-hero .g-loc { z-index: 3; }
/* 0810 지적: 사진 크기에 비해 이름·나이·관심사가 너무 작다 → 사이즈 업 */
.chat-hero .g-name h1 { font-size: 2.05rem; }
.chat-hero .g-name h1 span { font-size: 1.65rem; }
.chat-hero .g-name h1 .g-vf { width: 1.2rem; height: 1.2rem; }
.chat-hero .g-tags { margin-top: .45rem; }
.chat-hero .g-tags i { font-size: .72rem; padding: .24rem .65rem; }
/* 라운드 진행 도트 — 히어로 우상단 */
/* 라운드 진행 게이지 — 앱 사진 인디케이터처럼 사진 최상단 (우상단에서 이동) */
.ch-dots {
  position: absolute; top: .7rem; left: .8rem; right: .8rem; display: flex; gap: .3rem;
  padding: 0; z-index: 4;
}
.ch-dots i {
  flex: 1; width: auto; height: .28rem; border-radius: 999px;
  background: rgba(255, 255, 255, .35);
}
.ch-dots i.done { background: #fff; }
.ch-dots i.on { background: #fff; }
/* 0810 현장 피드백: 대화가 위에서부터 쌓이고, 넘치면 스크롤되어야 한다.
   이전엔 justify-content:flex-end 라 말풍선이 아래에 붙었는데,
   그러면 내용이 넘칠 때 위로 삐져나간 부분에 스크롤이 닿지 않는다(플렉스 오버플로 특성).
   flex-start 로 바꿔 '위에서부터 시작'과 '스크롤 가능' 두 가지를 함께 해결한다. */
.chat-log {
  flex: 1; width: min(78vw, 30rem); overflow-y: auto; padding: 1.4rem .2rem 1rem;
  display: flex; flex-direction: column; justify-content: flex-start;
  /* scroll-behavior: smooth 제거 — 스크롤 애니메이션이 진행 중일 때 레이아웃이 바뀌면
     iOS 에서 중간에 멈춰 마지막 대화가 화면 밖에 남는다(0819 지적). 말풍선 등장 모션은 그대로다. */
  gap: .85rem;
  -webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior: contain;
  /* 프로필 사진 경계에서 말풍선이 뚝 잘리지 않도록 상단 페이드 */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 1.2rem);
  mask-image: linear-gradient(to bottom, transparent 0, #000 1.2rem);
}
.msg { flex-shrink: 0; }        /* 대화가 길어져도 말풍선이 눌리지 않게 */
.msg { display: flex; align-items: flex-end; gap: 1.25rem; max-width: 86%; animation: bubbleIn .35s ease both; }
@keyframes bubbleIn { from { transform: translateY(.7rem); opacity: 0 } to { transform: none; opacity: 1 } }
.msg .m-av { width: 1.45rem; height: 1.45rem; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.msg .m-av img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.msg .bubble {
  padding: .78rem 1.15rem; font-size: .82rem; line-height: 1.55; font-weight: 500;
  border-radius: 1.3rem; white-space: pre-line;
}
.msg.npc { align-self: flex-start; }
.msg.npc .bubble { background: #F2F2F3; border: 0; border-bottom-left-radius: .35rem; color: var(--t-ink); }
.msg.me { align-self: flex-end; }
.msg.me .bubble {
  background: var(--t-brand); border-bottom-right-radius: .35rem; color: #fff; font-weight: 600;
}
/* 타이핑 인디케이터 */
.typing .bubble { display: flex; gap: .3rem; padding: 1.1rem 1.2rem; }
.typing .dot { width: .5rem; height: .5rem; border-radius: 50%; background: #A6ACB4; animation: tDot 1.1s infinite; }
.typing .dot:nth-child(2) { animation-delay: .18s; }
.typing .dot:nth-child(3) { animation-delay: .36s; }
@keyframes tDot { 0%, 60%, 100% { transform: none; opacity: .5 } 30% { transform: translateY(-.35rem); opacity: 1 } }
/* 답변 선택 영역 — 하단 여백(--opt-lift)만큼 띄워 손이 닿는 높이에 둔다 */
/* 0810 현장 피드백: 선택지가 대화창을 뚝 자르지 않도록 위에 겹쳐 띄우고,
   윗부분을 투명 → 흰색 그라디언트로 흘려 뒤의 말풍선이 은은하게 비치게 한다.
   겹치는 만큼은 JS 가 로그 아래 여백(padding-bottom)으로 잡아준다. */
.chat-opts {
  /* 0813 시안: 하단 바가 사라지고 선택지 블록이 화면 바닥까지 내려온다.
     흰 배경이 바닥까지 이어져야 그 위에 지구 배너가 얹힌다. */
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; z-index: 5;
  /* 버튼 폭을 '화면' 대비 %로 잡아야 시안과 맞는다.
     그래서 이 블록은 화면 폭 전체로 두고(그라디언트도 끝까지 덮인다),
     실제 폭은 아래 --opt-block 으로 라벨·버튼에만 준다. */
  --opt-block: 87.48%;          /* 두 버튼(42.53%×2) + 사이 간격(2.42%) — 0814 시안 실측 */
  width: 100%;
  padding: 3.4rem 0 calc(var(--opt-lift, 1.6rem) + env(safe-area-inset-bottom));
  /* 시안은 라벨이 버튼에 거의 붙어 있으나(2px), 답답해 보여 10px(키오스크 기준) 띄운다.
     0.77dvh = 1920 기준 14.8px — 기존 4.8px 에서 +10px. */
  display: flex; flex-direction: column; gap: .77dvh;
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, .55) 1.6rem,
    rgba(255, 255, 255, .92) 3.2rem,
    #fff 4.4rem);
  pointer-events: none;                 /* 그라디언트 여백은 통과, 버튼만 터치를 받는다 */
}
/* 버튼만 터치를 받는다 — 버튼 사이/주변 빈 곳은 뒤의 대화창 스크롤이 먹도록 둔다 */
.chat-opts .opt-btn { pointer-events: auto; }
/* 0810 지적: 상하 배치는 '순서'로 읽힌다 → 좌우로 놓아 택1 임을 분명히 한다 */
/* 0814 시안 실측: 버튼 폭 42.53% · 사이 간격 2.42% · 좌우 여백 6.3% (화면 폭 대비).
   gap 의 % 는 이 그리드(=87.48%) 기준이므로 2.42/87.48 = 2.766% 로 환산한다.
   그러면 각 버튼은 (100-2.766)/2 = 48.617% → 화면의 42.53% 로 떨어진다. */
#optBox {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2.766%;
  width: var(--opt-block); margin: 0 auto;
}

/* 화면 최하단 지구 픽토그램 (0813 시안 AFTER B) — 0810 오프화이트 브랜드 바를 대체한다.
   틴더 로고는 화면이 아니라 키오스크 몸통으로 내려갔다.
   에셋을 마스크로 써서 화면 배경에 따라 색만 바꾼다(빨강 배경엔 흰 선, 밝은 배경엔 빨간 선).
   시안 실측: 지구 지름 = 화면폭의 63.2%, 그림 상단 = 화면높이의 88.8% 지점.
   에셋 폭 / 지구 지름 = 1020/991 → 그림 폭 = 63.2% x 1.029 = 65%. */
.globe-banner {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: 88.8%; width: 65%; aspect-ratio: 367.12 / 387.27;
  z-index: 6; pointer-events: none;
  background: var(--t-brand);
  -webkit-mask: url(assets/img/globe_banner.svg) no-repeat center / 100% 100%;
          mask: url(assets/img/globe_banner.svg) no-repeat center / 100% 100%;
}
/* 빨간 배경 화면에서는 흰 선 */
.attract .globe-banner,
.won .globe-banner { background: rgba(255, 255, 255, .92); }
/* 라벨도 버튼 블록과 왼쪽 끝을 맞춘다 (PSD) */
.opts-label { font-size: .95rem; font-weight: 700; color: #8a9099; letter-spacing: .04rem;
  width: var(--opt-block); margin: 0 auto; }
/* 선택지 버튼 — 앱 UI/T&M: 완전 라운드 필 + 브랜드 컬러 */
/* 0814 시안 실측: 버튼 높이 = 화면 높이의 12.73%, 모서리 반경 = 화면 폭의 3.63%(알약 아님).
   선택지 글자 수가 10~28자로 들쭉날쭉해 padding 으로 높이를 잡으면 라운드마다 달라진다.
   높이를 못박고 글자를 가운데 정렬해, 한 줄이든 두 줄이든 버튼 크기가 항상 같게 한다.
   (클라이언트 0814 '대답 버튼 크기가 같아야' 지적) */
.opt-btn {
  min-height: 12.73dvh;
  display: flex; align-items: center; justify-content: center;
  text-align: center; background: var(--t-ink); border: 0;
  border-radius: 4.35vw; padding: .4rem 1.1rem; font-size: .9rem; font-weight: 700;
  color: #fff; line-height: 1.35; transition: transform .1s ease, background .15s;
  animation: bubbleIn .35s ease both;
}
.opt-btn:active { transform: scale(.97); background: var(--t-brand); }
.chat-opts.hidden, .opts-label.hidden { visibility: hidden; }

/* ---------- HEART WON 엔딩 ---------- */
.won {
  background: var(--t-brand);
  justify-content: center; gap: 1.6rem; text-align: center;
}
/* .won-badge(BE FRIENDS) 는 0807 광고주 요청으로 삭제 */
.won h1 { font-size: 2.5rem; font-weight: 900; line-height: 1.3; letter-spacing: -.05rem; animation: bubbleIn .45s .1s ease both; }
.won-photos { display: flex; align-items: center; justify-content: center; margin-top: .6rem; animation: bubbleIn .5s .2s ease both; }
/* 상대방 이미지 한 장만 (내 이모지 없음) */
.wp {
  width: 13rem; height: 17rem; border-radius: 1.2rem; overflow: hidden;
  border: .3rem solid #fff; box-shadow: 0 1rem 2.6rem rgba(0, 0, 0, .35);
  background: var(--t-brand);
}
.wp img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.won-heart {
  z-index: 2; width: 4rem; height: 4rem; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 .6rem 1.6rem rgba(0, 0, 0, .3); animation: heartBeat 1.3s ease infinite;
}
.won-heart svg { width: 2.2rem; height: 2.2rem; }
@keyframes heartBeat { 0%, 100% { transform: scale(1) } 12% { transform: scale(1.18) } 24% { transform: scale(1) } 36% { transform: scale(1.12) } }
.won-quote {
  background: #fff; color: #1b1f24; border-radius: 1.3rem;
  padding: 1.2rem 1.7rem; font-size: 1.2rem; font-weight: 600; line-height: 1.65;
  max-width: min(84vw, 30rem); box-shadow: 0 1rem 2.6rem rgba(0, 0, 0, .28);
  white-space: pre-line; animation: bubbleIn .5s .35s ease both;
}
.won-sub { font-size: 1.02rem; color: #ffd9db; animation: bubbleIn .5s .45s ease both; }
.won .cta { width: min(78vw, 24rem); background: #fff; color: var(--t-red); box-shadow: 0 .6rem 1.8rem rgba(0, 0, 0, .3); animation: bubbleIn .5s .55s ease both; }
.won-stamp-note { font-size: .95rem; color: rgba(255, 255, 255, .8); animation: bubbleIn .5s .6s ease both; }

/* ============================================================
   세로형 키오스크 터치 높이 보정
   1080×1920처럼 큰 세로 화면에서는 화면 최하단이 허리 아래라 누르기 불편하다.
   조작 요소를 화면 아래쪽 여백만큼 끌어올려 손이 닿는 대역에 둔다.
   ============================================================ */
@media (min-height: 900px) {
  :root { --opt-lift: 16dvh; }                     /* 대화 선택지 */
  /* 0810 현장 피드백: 사진이 바스트까지 나와야 한다.
     cover 라 히어로가 세로로 길수록 원본이 더 많이 보인다 → 높이를 키우고,
     그만큼 선택지 띄움값을 줄여 대화창이 눌리지 않게 한다. */
  /* 0814 시안 실측: 선택지 버튼 아래끝 = 화면의 83.25% → 바닥에서 16.75dvh */
  .chat { --opt-lift: 16.75dvh; }
  /* 0813 시안 실측: 히어로(사진+이름+관심사) = 화면 높이의 32.9% */
  .chat-hero { height: 33.3dvh; }
  .greet-body { padding-bottom: 15dvh; gap: 3rem; }  /* 첫인사 '대화 시작하기' */
  .won { padding-bottom: 20dvh; }                   /* 엔딩 '메인 화면으로 돌아가기' (지구 배너 자리 확보) */
  /* 0813 시안: 하단 11%는 지구 배너 자리다. 안내문이 배너에 걸리지 않게 띄운다. */
  .at-bottom { margin-bottom: 18vh; }
}