*,
*::before,
*::after { box-sizing: border-box; }

/* 큰 글씨(제목·유형 이름·넘김 안내)는 여기어때 잘난체, 나머지 글씨(설명·말풍선·꼬리표)는 나눔스퀘어라운드 */
@font-face { font-family: "Jalnan"; src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff") format("woff"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "NanumSquareRound"; src: url("https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareRound/NanumSquareRoundR.woff2") format("woff2"); font-weight: 100 500; font-display: swap; }
@font-face { font-family: "NanumSquareRound"; src: url("https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareRound/NanumSquareRoundB.woff2") format("woff2"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: "NanumSquareRound"; src: url("https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareRound/NanumSquareRoundEB.woff2") format("woff2"); font-weight: 800 900; font-display: swap; }
/* 공유 그림(손금 감정서)의 작은 글씨는 페이퍼로지(그림을 만들 때만 받음) */
@font-face { font-family: "Paperlogy"; src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Paperlogy"; src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Paperlogy"; src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-9Black.woff2") format("woff2"); font-weight: 900; font-display: swap; }

:root {
  /* 먹·인주(2026-10-21 사용자 선택): 미색 바탕, 먹 글씨·제목·체크·진행 표시, 손금 선과 작은 머리말은 인주색,
     연애는 산호색, 돈은 금색. 공유 그림은 짙은 먹 바탕. 뿌연 바탕 그림은 쓰지 않습니다.
     색은 쓰임새 이름으로 둡니다. 여기 값만 바꾸면 결과·대화 화면 전체가 바뀝니다.
     바탕(bg)·면(surface)·선(line), 글씨(ink) 세 단계, 큰 제목(title), 강조(accent: 진행 표시·고른 칸·체크·꼬리표),
     손금 선(palm), 두 손이 같음(same), 주요 버튼(inju), 연애(coral), 돈(gold). -rgb는 같은 색을 투명도와 함께 쓸 때 */
  --bg: #faf7f2;
  --bg-rgb: 250, 247, 242;
  --surface: #fff;
  --surface-2: #f3eee7;
  --surface-2-rgb: 243, 238, 231;
  --line: #e8e0d6;
  --veil: rgba(250, 247, 242, 0.97);   /* 감정서를 크게 볼 때 뒤 */
  --ink: #26211e;
  --ink-rgb: 38, 33, 30;
  --ink-2: #5b524c;
  --ink-3: #978d85;
  --ink-3-rgb: 151, 141, 133;
  --title: #26211e;
  --title-flash: #b0a59c;   /* 1장 넘김 안내 글자가 한 자씩 뒤집힐 때 */
  --accent: #26211e;
  --accent-rgb: 38, 33, 30;
  --accent-d: #3a322d;   /* 강조색 글씨(작은 머리말·꼬리표·굵은 낱말) */
  --accent-weak: #f1ebe4;
  --accent-on: #f0a493;  /* 강조색 바탕 위 작은 글자(고른 질문의 Q) */
  --label: #c8402f;      /* 작은 머리말('평소의 나는', '생각할 때' 등) */
  --shade-rgb: 70, 48, 34;   /* 그림자 */
  --palm: #c8402f;       /* 손 그림 위 이 장의 선 */
  --palm-rgb: 200, 64, 47;
  --palm-d: #b8392a;     /* 선 이름표 글씨 */
  --palm-edge: #9e2f22;  /* 대화 속 손 그림의 선: 테두리와 가운데 */
  --palm-hl: #d9533d;
  --same: #26211e;       /* 두 손이 같을 때(달라짐은 산호색) */
  --same-weak: #efe9e2;
  --same-ink: #3a322d;
  --dots: #c0b6ad;       /* 입력 중 점 */
  --faint: #c5bcb3;      /* 흐린 판정 스티커 */
  --chip-off: #efeae4;
  --inju: #c8402f;   /* 주요 버튼: 인생손금 첫 화면의 인주색 */
  --inju-shadow: rgba(200, 64, 47, 0.28);
  --coral: #e2705f;
  --coral-d: #c9584a;
  --coral-weak: #fbebe7;
  --gold: #d9a441;
  --gold-d: #9a7024;
  --me: #fde68a;   /* 내가 보낸 말풍선(노랑, 카톡처럼) */
  --shadow: 0 6px 24px rgba(var(--shade-rgb), 0.1);
  --font-ui: "NanumSquareRound", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --font-title: "Jalnan", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  /* one set of movements for the whole result: things settle softly (out), small things pop a little past (spring) */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --turn: 0.55s;   /* one card to the next */
}

html, body { margin: 0; height: 100%; }

/* moving between the site's pages (first screens ↔ results): the old page cross-fades into the new one; browsers
   without view transitions, and reduced motion, just change page */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.3s; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }

body {
  overflow: hidden;
  overscroll-behavior: none;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 장을 넘길 때 화면 읽기 프로그램용으로 제목에 옮기는 초점은 테두리를 그리지 않음 */
[tabindex="-1"]:focus { outline: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Phone-sized column; on wide screens a centered 480px column on white. */
.app {
  position: relative;
  max-width: 480px;
  height: 100vh;
  height: 100svh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--bg);
}

/* ---------- top: story bars and brand ---------- */

.top {
  position: absolute; z-index: 5; top: 0; left: 0; right: 0;
  padding-top: max(10px, env(safe-area-inset-top));
  pointer-events: none;
}

.bars { display: flex; gap: 5px; padding: 4px 18px 0; }
.bars i { position: relative; flex: 1; height: 3px; border-radius: 2px; overflow: hidden; background: rgba(var(--shade-rgb), 0.14); }
.bars i::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--turn) var(--ease-out); }
.bars i.on::after { transform: none; }

/* 로고만 눌려 홈페이지로 갑니다(머리 줄은 카드 넘기기를 막지 않게 눌리지 않음) */
.brand { display: flex; width: fit-content; align-items: center; gap: 6px; padding: 11px 20px 0; pointer-events: auto; -webkit-tap-highlight-color: transparent; }
.brand .logo { display: block; width: auto; height: 20px; }   /* 까치 + 글자 + 手相 인장을 구운 로고 한 장 */

/* ---------- stage: free result cards side by side ---------- */

/* the cards turn under a finger or a mouse: no text or picture selection, no long-press picture menu */
.stage { position: absolute; inset: 0; overflow: hidden; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.track { display: flex; height: 100%; transition: transform var(--turn) var(--ease-out); will-change: transform; }
/* while a finger drags, everything follows it directly; 'still' jumps without moving (opening a card from the address) */
.stage.dragging .track, .stage.dragging .card::after,
.stage.still .track, .stage.still .card::after, .stage.still .bars i::after { transition: none; }
.status { position: absolute; left: 0; right: 0; top: 46%; margin: 0; text-align: center; color: var(--ink-3); font-size: 15px; }
.app:not([data-state="loading"]):not([data-state="error"]) .status { display: none; }

.card {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: calc(max(10px, env(safe-area-inset-top)) + 54px) 0 calc(max(10px, env(safe-area-inset-bottom)) + 40px);
  background: var(--bg);
  overflow: hidden;
  /* the room between the blocks of a card: about 16px on a 641px-tall phone, up to 22px on tall ones */
  --gap: clamp(12px, 2.5vh, 22px);
  --gap: clamp(12px, 2.5svh, 22px);
}

/* the card that is leaving dims (--shade, 0 for the card in view; result.js) */
.card::after {
  content: "";
  position: absolute; inset: 0; z-index: 3;
  background: var(--bg);
  opacity: var(--shade, 0);
  transition: opacity var(--turn) var(--ease-out);
  pointer-events: none;
}

.card > * { position: relative; }
/* 1~4장은 남는 높이를 손 그림(.art)이 가져갑니다. 그림이 한도(카드 폭)까지 커지고도 남는 키 큰 화면에서만 남는 자리를
   이야기 위아래로 나눕니다(아래쪽은 맨 아래 블록, 다음 장 줄 .next는 카드 바닥에 따로 붙음). */
.card > :first-child { margin-top: auto; }
.story > :last-child:not(.next), .story > :nth-last-child(2):has(+ .next) { margin-bottom: auto; }

/* ---------- 1-4: the big line, the hand with this card's lines, then the boxes ---------- */

.title { flex: none; margin: 0 20px; text-align: center; font: 700 25px/1.3 var(--font-title); color: var(--title); letter-spacing: -0.5px; word-break: keep-all; text-wrap: balance; }
.c-twist .title { color: var(--coral-d); }

.card > .title { align-self: center; max-width: 270px; }

/* ---------- hand picture with the reader's lines ---------- */

.art {
  position: relative;
  align-self: center;
  flex: 1 1 0;
  min-height: 120px;
  max-height: calc((min(100vw, 480px) - 36px) * 4 / 3);   /* 그림 폭이 카드 폭(양옆 18px)까지 */
  aspect-ratio: 3 / 4;
  margin: var(--gap) 0 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 98%);
  mask-image: linear-gradient(to bottom, #000 80%, transparent 98%);
}

/* the 2:3 picture is 1.125 box heights tall, so its sleeve falls below the fade */
.art-in { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 2 / 3; }
/* a right hand uses the mirrored picture file and mirrored line points (result.js), never a CSS flip */
.art-in img, .art-in svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.art svg g { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.art .l-faint { stroke: rgba(120, 72, 52, 0.45); stroke-width: 8; }
.art .l-soft { stroke: rgba(var(--palm-rgb), 0.6); stroke-width: 8; filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9)); }
.art .l-gold { stroke: var(--palm); stroke-width: 11; filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px rgba(255, 255, 255, 0.85)); }
.art .l-pink { stroke: var(--coral); stroke-width: 11; filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px rgba(255, 255, 255, 0.85)); }

.tag {
  position: absolute; z-index: 1;
  transform: translate(-50%, -50%);
  padding: 3px 9px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(var(--palm-rgb), 0.28);
  color: var(--palm-d);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(var(--shade-rgb), 0.12);
}
.tag.pink { border-color: rgba(226, 112, 95, 0.45); color: var(--coral-d); }

/* close-up window on this card's lines (2장) */
.art.lens {
  flex: 1 1 0; aspect-ratio: 4 / 3; min-height: 96px; max-height: calc((min(100vw, 480px) - 36px) * 3 / 4); margin: var(--gap) 0 0;
  border-radius: 22px; overflow: hidden; -webkit-mask-image: none; mask-image: none;
  background: var(--surface-2);
  box-shadow: 0 0 0 1px var(--line), var(--shadow);
}
.art.lens::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 18px 4px rgba(var(--bg-rgb), 0.55); pointer-events: none; }
.art-z { position: absolute; inset: 0; transform-origin: 0 0; }
.art-z .tag { transform: translate(-50%, -50%) scale(var(--unzoom, 1)); }

/* ---------- 1장: the type is revealed ---------- */

.type-head { flex: none; position: relative; text-align: center; }
.kicker { margin: 0 20px; font-size: 13px; font-weight: 700; letter-spacing: 0.3px; color: var(--ink-2); }
.type-head .title { margin-top: 4px; font-size: 28px; }
.type-head .nowrap { white-space: nowrap; }
.stamp { display: inline-block; width: auto; height: 32px; margin-left: 6px; vertical-align: -4px; transform: rotate(-12deg); opacity: 0.92; }
.keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 10px 20px 0; padding: 0; list-style: none; }
.keys li { padding: 4px 11px; border-radius: 999px; background: #fff; border: 1px solid rgba(var(--accent-rgb), 0.2); color: var(--accent-d); font-size: 13px; font-weight: 800; box-shadow: 0 2px 8px rgba(var(--shade-rgb), 0.08); }

/* ---------- 2장: everyday lines ticked off ---------- */

.ticks { flex: none; align-self: center; display: grid; gap: 12px; margin: var(--gap) 16px auto; padding: 18px 22px; list-style: none; border-radius: 18px; background: rgba(255, 255, 255, 0.9); box-shadow: var(--shadow); }
.ticks li { display: flex; align-items: center; gap: 12px; font-size: 15.5px; font-weight: 700; line-height: 1.4; color: var(--ink); word-break: keep-all; }
.ticks .box { flex: none; width: 22px; height: 22px; border-radius: 7px; background: var(--accent); display: grid; place-items: center; }
.ticks .box svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; }
/* 3장 '연애할 때 나는': the same box of ticks under a small pink header */
.ticks.love-ticks { gap: 8px; }
.ticks-h { margin: 0; font-size: 12.5px; font-weight: 800; color: var(--coral-d); }
.love-ticks ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.c-twist .ticks .box { background: var(--coral); }
/* 2장 「○○님은 이런 사람」: three bars, then the everyday lines */
.person-card .type-head .title { font-size: 26px; }
.scales { flex: none; display: grid; gap: 8px; margin: var(--gap) 22px 0; }
.scale-top { display: flex; margin-bottom: 3px; }   /* flex keeps the row as tall as the name alone */
.scale-top b { font-size: 12.5px; font-weight: 800; color: var(--label); }
.scale-track { display: grid; grid-template-columns: 58px 1fr 58px; align-items: center; gap: 8px; }
.scale-track span { font-size: 13px; font-weight: 800; color: var(--ink); }
.scale-track span:last-child { text-align: right; }
.scale-line { position: relative; height: 8px; border-radius: 99px; background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.2), rgba(226, 112, 95, 0.2)); }
.scale-line i { position: absolute; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px #fff, 0 2px 8px rgba(var(--shade-rgb), 0.35); }
.person-card .ticks { padding: 14px 20px; }
.person-card .love-ticks ul { gap: 10px; }
.person-card .ticks-h { color: var(--label); }

/* 1장: the swipe hint sits under the hand. Plain words that flip over one letter at a time (three rounds, then still).
   On tall phones it is lifted toward the middle of the free space. */
.reveal { padding-bottom: calc(max(10px, env(safe-area-inset-bottom)) + 16px); }
.reveal > .swipe-cta { margin-top: auto; top: calc(-1 * clamp(0px, (100vh - 700px) / 3, 44px)); }
.swipe-cta {
  flex: none; align-self: center;
  margin: 0; padding: 8px 18px; border: 0; background: none; cursor: pointer;
  font: 700 17px/1.2 var(--font-title); letter-spacing: -0.3px; color: var(--title);
  -webkit-tap-highlight-color: transparent;
}
.swipe-cta .flip { display: inline-flex; perspective: 300px; }
.swipe-cta .flip span { display: inline-block; }
.swipe-cta .flip .sp { width: 0.28em; }

/* ---------- 3장: the outside (gold) against the inside (pink) ---------- */

.face { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: calc(var(--gap) - 6px) 18px 0; }
/* the words sit in the middle of each box, so a one-line name and a two-line name look alike */
.face .side { display: flex; flex-direction: column; justify-content: center; padding: 12px 10px; border-radius: 14px; text-align: center; }
.face small { display: block; font-size: 12px; font-weight: 700; opacity: 0.85; }
.face b { display: block; margin-top: 2px; font: 700 16px/1.3 var(--font-title); letter-spacing: -0.3px; word-break: keep-all; }
.face .nb { white-space: nowrap; }
.face .out { background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(var(--accent-rgb), 0.28); color: var(--accent-d); }
.face .in { background: #fdf1ee; border: 1px solid rgba(226, 112, 95, 0.45); color: var(--coral-d); }

/* ---------- 4장: the hand in the middle, then fitting work and the ways money comes in side by side ---------- */

.work { flex: none; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; margin: calc(var(--gap) - 6px) 18px 0; }
.panel { display: flex; flex-direction: column; align-items: center; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.9); box-shadow: var(--shadow); text-align: center; }
.panel-h { flex: none; margin: 0 0 7px; font-size: 12px; font-weight: 700; color: var(--ink-3); }
.jobs ul { flex: 1; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.jobs li { padding: 4px 10px; border-radius: 999px; background: var(--accent-weak); color: var(--accent-d); font-size: 13px; font-weight: 800; }
.money svg { display: block; width: 100%; height: 44px; margin-top: auto; overflow: visible; }
.money .strand { fill: none; stroke: var(--accent); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 1 1; }
.money .strand.none { stroke: rgba(var(--ink-rgb), 0.25); stroke-dasharray: 0.07 0.07; filter: none; }
.money-label { margin: 4px 0 auto; text-align: center; font: 700 15px var(--font-title); color: var(--title); }

/* ---------- openings: they play once, the first time a card is shown (.live) ----------
   1장 has its own (light over the palm, the lines drawn in, the type stamped). Every other card brings its parts in, in
   reading order (result.js gives each part its start, --t): the big line rises out of a blur, the picture settles and
   this card's lines are drawn in, the sentences come line by line, then the boxes, then the character pops up and speaks. */
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes pop { 0% { opacity: 0; transform: scale(0.6); } 70% { transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }
@keyframes title-in { from { opacity: 0; transform: translateY(12px); filter: blur(6px); } }
@keyframes pic-in { from { opacity: 0; transform: translateY(16px) scale(0.96); } }
@keyframes push-in { from { transform: none; } }
@keyframes stamp-title { 0% { opacity: 0; transform: scale(1.6); filter: blur(6px); } 60% { opacity: 1; transform: scale(0.96); filter: blur(0); } 100% { transform: scale(1); } }
@keyframes scan { 0% { opacity: 0; background-position: 0 100%; } 15%, 80% { opacity: 1; } 100% { opacity: 0; background-position: 0 0; } }
@keyframes flip-in { from { opacity: 0; transform: perspective(500px) rotateY(85deg); } to { opacity: 1; transform: none; } }
@keyframes flip-letter {
  0% { transform: rotateY(0); color: var(--title); animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1); }
  12% { color: var(--title-flash); }
  24%, 100% { transform: rotateY(-360deg); color: var(--title); }
}
@keyframes stamp-seal { 0% { opacity: 0; transform: rotate(-12deg) scale(2.4); } 70% { opacity: 1; transform: rotate(-12deg) scale(0.92); } 100% { opacity: 0.92; transform: rotate(-12deg) scale(1); } }

/* a card not shown yet waits for its opening (seen only at the edge of a drag) */
.card:not(.live) .rv { opacity: 0; }
.live .rv-title { animation: title-in 0.75s var(--ease-out) var(--t) both; }
.live .rv-pic { animation: pic-in 0.85s var(--ease-out) var(--t) both; }
.live .rv-box { animation: rise 0.6s var(--ease-out) var(--t) both; }
.live .rv-group { animation: fade-in 1ms var(--t) both; }
.live .rv-fade { animation: fade-in 0.6s ease var(--t) both; }

.art.draw path { stroke-dasharray: 1 1; }
/* this card's lines are drawn in once the picture has settled (on the two hands the left one first); their names follow */
.live:not(.reveal) .art.draw .l-gold path, .live:not(.reveal) .art.draw .l-pink path { animation: draw 1s var(--ease-in-out) calc(var(--t, 0ms) + 260ms) both; }
.live:not(.reveal) .art .tag { animation: fade-in 0.4s ease calc(var(--t, 0ms) + 950ms) both; }
/* 2장's close-up window pushes in from the whole hand to its lines */
.live .art.lens .art-z { animation: push-in 1.3s var(--ease-out) calc(var(--t, 0ms) + 80ms) both; }

/* 1장: a band of light passes over the palm (only where the hand is) while the lines are drawn in */
.reveal .art.draw .art-in::after {
  content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 40%, rgba(255, 255, 255, 0.6) 50%, transparent 60%) 0 100% / 100% 250% no-repeat;
  -webkit-mask: url(assets/result/hand-art-cel.webp) center / 100% 100% no-repeat; mask: url(assets/result/hand-art-cel.webp) center / 100% 100% no-repeat;
}
.reveal .art.mirror.draw .art-in::after { -webkit-mask-image: url(assets/result/hand-art-r-cel.webp); mask-image: url(assets/result/hand-art-r-cel.webp); }
.reveal.live .art.draw .art-in::after { animation: scan 0.8s ease-in-out both; }
.reveal.live .art.draw path { animation: draw 0.45s 0.2s ease-out both; }
.reveal.live .art.draw .l-gold path { animation-duration: 0.55s; animation-delay: 0.5s; }
.reveal.live .art.draw .tag { animation: fade-in 0.3s 1s both; }
.live .type-head .kicker { animation: fade-in 0.35s 0.85s both; }
.live .type-head .title { animation: stamp-title 0.45s 0.95s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
.live .type-head .stamp { animation: stamp-seal 0.35s 1.25s ease-out both; }
.live .type-head .keys li { animation: pop 0.3s calc(1.35s + var(--i) * 0.08s) both; }
.reveal.live > .swipe-cta { animation: fade-in 0.5s 1.75s both; }
.reveal.live .swipe-cta .flip span { animation: flip-letter 2.6s calc(2.4s + var(--i) * 0.055s) 3 both; }

/* boxes whose parts come in one by one, from the box's start (--t) */
.live .face .out { animation: rise 0.55s var(--ease-out) var(--t) both; }
.live .face .in { animation: flip-in 0.6s var(--ease-spring) calc(var(--t) + 420ms) both; }
.live .jobs li { animation: pop 0.35s calc(var(--t) + 120ms + var(--i) * 0.1s) both; }
.live .money .strand:not(.none) { animation: draw 0.6s ease-out calc(var(--t) + 300ms + var(--i) * 0.15s) both; }
.live .ticks li { animation: rise 0.45s var(--ease-out) calc(var(--t) + var(--i) * 0.26s) both; }
.live .ticks .box { animation: pop 0.3s calc(var(--t) + 100ms + var(--i) * 0.26s) both; }
.live .ticks .box path { animation: draw 0.25s calc(var(--t) + 250ms + var(--i) * 0.26s) both; }
.live .ticks-h { animation: rise 0.45s var(--ease-out) var(--t) both; }
.live .scale-line i { animation: slide-in 0.7s var(--ease-out) calc(var(--t, 0ms) + 300ms + var(--i, 0) * 120ms) both; }
@keyframes slide-in { from { left: 50%; opacity: 0; } }
.live .love-ticks li { animation-delay: calc(var(--t) + 140ms + var(--i) * 0.26s); }
.live .love-ticks .box { animation-delay: calc(var(--t) + 240ms + var(--i) * 0.26s); }
.live .love-ticks .box path { animation-delay: calc(var(--t) + 390ms + var(--i) * 0.26s); }

/* the line at the bottom that leads on: its arrow nudges toward the next card a few times */
.next .nudge { display: inline-block; font-style: normal; }
.current .next .nudge { animation: nudge 1.3s var(--ease-in-out) calc(var(--t, 0ms) + 1200ms) 3; }
@keyframes nudge { 0%, 100% { transform: none; } 50% { transform: translateX(5px); } }

/* ---------- the line under each card that leads to the next ---------- */

.next {
  position: absolute; left: 0; right: 0;
  bottom: calc(max(10px, env(safe-area-inset-bottom)) + 10px);
  margin: 0;
  text-align: center;
  color: var(--ink-3);
  font-size: 12.5px;
}
.next b { color: var(--accent-d); }


/* 새 4장 궁금증: 시안 dlock, 실제 날짜와 해는 출력하지 않습니다. */
.c-tease .title { color: var(--title); line-height: 1.3; }
.c-tease .dday-room { flex: 1 1 0; min-height: 125px; align-self: stretch; display: grid; place-items: center; margin: var(--gap) 18px 0; container-type: size; }
.c-tease .dday { --dd: clamp(120px, 27svh, 240px); display: grid; place-items: center; width: var(--dd); height: var(--dd); border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 3px var(--gold), 0 0 0 9px #fff, 0 0 0 10.5px rgba(217,164,65,.55), 0 6px 18px rgba(38,33,30,.08); }
@supports (width: 1cqh) { .c-tease .dday { --dd: min(100cqh - 24px, 100cqw - 24px, 300px); } }
.c-tease .dd-num { margin: 0; font: 700 calc(var(--dd) * .25)/1.1 var(--font-title); letter-spacing: -1px; color: var(--ink); }
.c-tease .lk { display: inline-block; flex: none; width: 1em; height: 1em; vertical-align: -.14em; color: var(--gold-d); }
.c-tease .ddlk { display: inline-grid; place-items: center; width: .95em; height: .95em; margin-left: .1em; vertical-align: -.1em; }
.c-tease .ddlk .lk { width: 100%; height: 100%; vertical-align: 0; color: var(--gold); }
.c-tease .dday-sub { flex: none; margin: 18px 24px 0; text-align: center; font-size: 17px; font-weight: 800; color: var(--ink-2); word-break: keep-all; }
.c-tease .dday-date { flex: none; align-self: center; display: inline-flex; align-items: center; gap: .32em; margin: 10px 18px 0; padding: 9px 18px; border-radius: 999px; background: #f3e7cc; color: var(--gold-d); font: 800 17px/1.35 var(--font-ui); white-space: nowrap; }
.c-tease .dday-date .lk { margin-right: .1em; }
.c-tease .bar { display: inline-block; height: .78em; border-radius: .2em; background: #e6d4ad; vertical-align: -.06em; }
.c-tease .bar.b4 { width: 2.3em; }
.c-tease .bar.b2 { width: 1.25em; }
.c-tease .years { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: calc(var(--gap) + 2px) 18px 0; }
.c-tease .yr-box { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border-radius: 14px; background: rgba(255,255,255,.92); box-shadow: 0 4px 14px rgba(38,33,30,.06); text-align: center; }
.c-tease .yr-box small { font-size: 12.5px; font-weight: 800; word-break: keep-all; }
.c-tease .yr-box b { display: inline-flex; align-items: center; gap: .18em; font: 700 20px/1.25 var(--font-title); letter-spacing: -.3px; }
.c-tease .yr-box b .lk { display: block; width: .78em; height: .78em; vertical-align: 0; color: inherit; }
.c-tease .yr-box .bar { margin-right: .12em; }
.c-tease .yr-box.love { color: var(--coral-d); border: 1px solid rgba(226,112,95,.35); }
.c-tease .yr-box.love .bar { background: #f6dcd6; }
.c-tease .yr-box.wealth-year { color: var(--gold-d); border: 1px solid rgba(217,164,65,.45); }
.c-tease .yr-box.wealth-year .bar { background: #f1e3c4; }
@media (max-height: 720px) {
  .c-tease .dday-room { min-height: 100px; margin-top: 10px; }
  .c-tease .dday-sub { margin-top: 10px; font-size: 15px; }
  .c-tease .dday-date { margin-top: 8px; padding: 7px 12px; font-size: 15px; }
  .c-tease .years { margin-top: 12px; }
  .c-tease .yr-box { padding: 9px 5px; }
  .c-tease .yr-box small { font-size: 11.5px; }
  .c-tease .yr-box b { font-size: 18px; }
}

/* ---------- 5. my palm card (the share picture) and the other hand ---------- */

.c-end { padding-bottom: calc(max(10px, env(safe-area-inset-bottom)) + 14px); }

/* the story picture itself, faded in once it is made; it is a button: a tap shows it big */
/* 화면에도 공유 그림(감정서 1080 × 1920) 한 장을 그대로 보여 줍니다 */
.card-thumb { position: relative; flex: none; aspect-ratio: 1080 / 1920; }
.card-thumb img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 8px; opacity: 0; transition: opacity 0.4s ease; }
.card-thumb.ready img { opacity: 1; }
button.card-thumb { padding: 0; border: 0; background: none; cursor: zoom-in; -webkit-tap-highlight-color: transparent; transition: transform 0.18s var(--ease-out); }   /* the small one, a tap shows it big */
button.card-thumb:active { transform: scale(0.96); }
.btns { display: grid; gap: 6px; }
.btns button { height: 40px; border-radius: 10px; border: 0; font-size: 13.5px; font-weight: 800; cursor: pointer; }
.btns .a { background: var(--inju); color: #fff; box-shadow: 0 6px 16px var(--inju-shadow); }
.btns .b { background: #fff; border: 1px solid var(--line); color: var(--ink); }

/* 5장: the picture as large as the card allows, the two buttons under it */
.cert { flex: 1 1 0; min-height: 0; max-height: calc(min(100vw - 36px, 411px) * 1920 / 1080); display: flex; align-items: center; justify-content: center; margin: var(--gap) 18px 0; }
.cert .card-thumb { height: 100%; max-height: 560px; max-width: 100%; }
.cert .card-thumb img { -webkit-touch-callout: default; }   /* 5장 큰 감정서는 길게 눌러 저장할 수 있게(.stage는 막아 둠) */
.c-cert > .btns { flex: none; align-self: center; grid-template-columns: 1.5fr 1fr; gap: 8px; width: calc(100% - 36px); max-width: 330px; margin-top: var(--gap); margin-bottom: auto; }
.c-cert > .btns button { height: 48px; border-radius: 12px; font-size: 15px; }
.c-cert > .btns > :only-child { grid-column: 1 / -1; }   /* 인스타 앱 안에서는 저장 단추 하나만 있어 줄 전체를 씁니다. */
/* 저장 단추 줄 아래 카톡으로 공유하기(site/kakao-share.js, 2026-10-26): 저장 단추 줄과 같은 너비로 붙이고, 그 아래 빈칸은 이 단추가 맡습니다. */
.c-cert > .btns:has(+ .kshare) { margin-bottom: 0; }
.c-cert > .kshare { max-width: 330px; margin: 8px 0 auto; }

/* 5장 감정서는 칸에 드는 가장 큰 크기로(폭 411px까지). 처음 볼 때 떠오르며 인장이 쾅 찍히는 움직임은 site/cert-frame.js가 붙입니다. */
@supports (width: 1cqw) {
  .cert { container-type: size; }
  .cert .card-thumb { width: min(100cqw, 100cqh * 1080 / 1920, 411px); height: auto; max-height: none; }
}
/* the share picture big, over everything, with the same two buttons under it */
.viewer {
  position: absolute; z-index: 8; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: calc(max(10px, env(safe-area-inset-top)) + 50px) 20px calc(max(10px, env(safe-area-inset-bottom)) + 14px);
  background: var(--veil);
  opacity: 0; transition: opacity 0.26s ease;
}
.viewer.open { opacity: 1; }
.viewer:not(.open) { pointer-events: none; }   /* fading out: a quick tap goes to the card, not to a vanishing button */
.viewer img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100% - 60px); transform: translateY(18px) scale(0.94); transition: transform 0.5s var(--ease-out); -webkit-user-select: none; user-select: none; -webkit-touch-callout: default; }
.viewer.open img { transform: none; }
.viewer-btns { flex: none; display: grid; grid-template-columns: 1.5fr 1fr; gap: 8px; width: 100%; max-width: 330px; }
.viewer-btns button { height: 46px; border-radius: 12px; border: 0; font: 800 15px var(--font-ui); cursor: pointer; transition: transform 0.18s var(--ease-out), filter 0.18s ease; }
.viewer-btns button:active { transform: scale(0.97); filter: brightness(0.94); }
.viewer-btns .a { background: var(--inju); color: #fff; }
.viewer-btns .b { background: #fff; border: 1px solid var(--line); color: var(--ink); }
.viewer-btns > :only-child { grid-column: 1 / -1; }
.viewer-x { position: absolute; top: calc(max(10px, env(safe-area-inset-top)) + 2px); right: 12px; }
.viewer.saving img { max-height: calc(100% - 96px); }   /* 길게 눌러 저장 안내가 붙었을 때 */
.viewer-note { flex: none; margin: 0; font: 700 14px var(--font-ui); color: var(--ink); text-align: center; }

.cta { flex: none; width: 100%; margin-top: 14px; height: 48px; border: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--inju); color: #fff; box-shadow: 0 6px 16px var(--inju-shadow); font-size: 16px; font-weight: 800; cursor: pointer; }
.note { flex: none; margin: 8px 0 0; text-align: center; color: var(--ink-3); font-size: 12px; }

/* the free result's last card: the other hand knows what is ahead. Six questions in two columns (the picked one gold),
   then a small chat with the picked question and the other hand's answer blurred under a lock; the button at the foot */
.free-end .title { font-size: 28px; max-width: none; }
/* 제목의 이름은 인주색, **로 감싼 말('대박')은 3,900원과 같은 노란 형광펜. 사주 날짜 제목(.hook)은 윗줄('지우님 인생')을 작게,
   아랫줄('언제 대박날까요?')을 크게 해 아랫줄이 먼저 들어오게 합니다(사용자 2026-10-31). 크기는 제목 글자 크기를 따라 낮은 화면에서 함께 줄어듭니다 */
.free-end .title .nm { color: var(--inju); }
.free-end .title .hl { position: relative; z-index: 0; }
.free-end .title .hl::before { content: ''; position: absolute; z-index: -1; left: -4px; right: -4px; bottom: 0.15em; height: 42%; border-radius: 6px 3px 7px 4px; background: var(--me); transform: rotate(-2deg) skewX(-14deg); }
/* 두 줄은 각자 덩어리(block)로 둬서 작은 윗줄이 큰 제목 글자의 줄 높이를 차지하지 않게 합니다(낮은 화면에서 예전 제목 높이 그대로) */
.free-end .title.hook { line-height: 1.25; }
.free-end .title.hook br { display: none; }
.free-end .title.hook .tl1 { display: block; font-size: 0.8em; }
.free-end .title.hook .tl2 { display: block; margin-top: 2px; font-size: 1.2em; }
/* 질문 칸은 제목 바로 아래에 붙여 한 덩어리로 보이게 하고(제목 아래가 비어 보인다는 지적, 10-31),
   남는 높이는 제목 위와 결제 판 위에 반씩 둡니다 */
.free-end > .qs { margin-top: 0; padding-top: var(--gap); }
@media (min-height: 780px) { .free-end > .qs { padding-top: calc(var(--gap) + 14px); } }
.end-sub { flex: none; margin: 8px 20px 0; text-align: center; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); word-break: keep-all; }
.qs { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: var(--gap) 18px 0; }
.qs button { min-height: 50px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.92); color: var(--ink); font: 800 13.5px/1.35 var(--font-ui); text-align: left; word-break: keep-all; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.18s var(--ease-out); }
.qs button::before { content: "Q"; margin-right: 6px; font: 700 14px var(--font-title); color: var(--label); }
.qs button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.qs button[aria-pressed="true"]::before { color: var(--accent-on); }
.qs button:active { transform: scale(0.97); }
.free-end.live .qs button { animation: rise 0.5s var(--ease-out) calc(var(--t, 0ms) + var(--i) * 0.07s) both; }
.ans { flex: none; display: flex; flex-direction: column; gap: 9px; margin: 14px 18px var(--gap); padding: 14px 12px 12px; border-radius: 18px; background: rgba(var(--surface-2-rgb), 0.92); border: 1px solid var(--line); }
.ans .q { align-self: flex-end; max-width: 80%; margin: 0; padding: 9px 13px; border-radius: 16px 16px 4px 16px; background: var(--me); color: var(--ink); font: 800 14px/1.35 var(--font-ui); word-break: keep-all; animation: msg-in 0.35s var(--ease-out) both; }
.ans .a { align-self: flex-start; display: flex; align-items: flex-end; gap: 7px; max-width: 94%; animation: msg-in 0.35s var(--ease-out) 0.1s both; }
/* 프로필: 인생 풀이 대화의 캐릭터 얼굴(.talk .t-face)과 같은 자르기 */
.ans .av { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-weak) 50% 6% / 125% auto no-repeat; border: 1.5px solid #fff; box-shadow: 0 1px 4px rgba(var(--shade-rgb), 0.2); }
.ans .b { display: grid; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: #fff; color: var(--ink); font: 700 13.5px/1.5 var(--font-ui); overflow: hidden; }
/* 흐린 답 글 아래에 자물쇠 줄을 상자 없이 둡니다. 예전에는 흐린 답 위에 그림자 진 흰 알약을 겹쳐 말풍선 안에 상자가 또 생기고
   흐린 글자가 알약 양옆으로 번져 나와 어지러웠습니다(사용자 2026-10-30 "너무 난잡한 느낌") */
/* 흐린 글은 위로 번져 보여 2px 내리고, 자물쇠 줄은 flex로 글줄 아래 빈자리(약 3px)를 없앱니다. 예전에는 흐린 글 위 약 9px,
   자물쇠 줄 아래 약 16px로 내용이 위로 쏠려 보였음(사용자 2026-10-31 "배치 살짝 안맞잖아") */
.ans .tx { margin-top: 2px; filter: blur(4.5px); }
.ans .lkw { justify-self: center; display: flex; margin-top: 5px; color: var(--ink-2); }   /* 자물쇠 줄은 말풍선 가운데(사용자 2026-10-30 "중앙배치하는게 낫지않겠음?") */
.ans .lkw span { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.ans .lkw svg { flex: none; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ans .dots { display: inline-flex; gap: 4px; padding: 6px 2px; }
.ans .dots i { background: var(--dots); }
/* '내가 원하는 질문도 직접 할 수 있어요'는 3,900원처럼 노란 형광펜을 긋습니다(사용자 2026-10-30 "노란색으로 좀 더 잘보이게") */
.ans .cnt { align-self: center; margin: 3px 0 0; font-size: 13.5px; font-weight: 800; color: var(--ink); }
.ans .cnt span { position: relative; z-index: 0; }
.ans .cnt span::before { content: ''; position: absolute; z-index: -1; left: -6px; right: -6px; bottom: 0; height: 52%; border-radius: 6px 3px 7px 4px; background: var(--me); transform: rotate(-1.5deg) skewX(-14deg); }
/* when the answer comes, the typing bubble grows from its tail into it (result.js pickQuestion): the blurred answer
   comes out of a heavier blur, then the lock */
.ans .b { transform-origin: 0 100%; }
.ans .b.grown .tx { animation: unblur 0.35s var(--ease-out) both; }
.ans .b.grown .lkw span { animation: lock-in 0.3s var(--ease-out) 0.12s both; }
@keyframes unblur { from { opacity: 0; filter: blur(12px); } }
@keyframes lock-in { from { opacity: 0; transform: scale(0.94); } }
/* 장 아래 흰 결제 판(result.js payButton): 값 비교·결제 단추·환불 안내·사업자 줄을 한 판에 모아 위의 질문·대화와 나눕니다.
   예전에는 이것들이 대화 칸 밑에 따로따로 몰려 빽빽해 보였음(사용자 2026-10-31 "여기 정보가 너무 과밀집", 시안 B "b안으로 넣고").
   판은 장 바닥(아래 여백 자리)까지 내려가 닿습니다. 판 위에는 남는 높이의 반을 둡니다(나머지 반은 제목 위). */
.free-end > .pay-sheet { flex: none; display: flex; flex-direction: column; margin-top: auto; margin-bottom: calc(-1 * (max(10px, env(safe-area-inset-bottom)) + 4px)); padding: 16px 18px calc(max(10px, env(safe-area-inset-bottom)) + 4px); border-radius: 24px 24px 0 0; background: #fff; box-shadow: 0 -10px 24px -16px rgba(var(--shade-rgb), 0.3); }
/* 낮은 화면에서는 판 안쪽 위 여백과 판 위 간격을 줄여(판 가장자리가 대화 칸과 나눠 줌) 판을 넣기 전처럼 사업자 줄까지 들어가게 합니다 */
@media (max-height: 720px) {
  .free-end > .ans { margin-bottom: min(var(--gap), 12px); }
  .free-end > .pay-sheet { padding-top: 9px; }
}
@media (max-height: 680px) {
  .free-end > .ans { margin-bottom: 10px; }
  .free-end > .pay-sheet { padding-top: 7px; }
}
@media (max-height: 600px) { .free-end > .pay-sheet { padding-top: 5px; } }
/* 결제 전 값 비교: 오프라인 칸(연한 회색, 값에 강조색 줄)과 내손내운 칸(흰 바탕·강조색 테두리, 3,900원에 노란 형광펜) 사이에 강조색 붓 화살표 */
.pay-sheet > .price-compare { --pv: 7px; --fs: 12.5px; --p1: 16px; --p2: 25px; position: relative; flex: none; display: flex; align-items: center; gap: 26px; font: 400 var(--fs)/1.3 var(--font-ui); word-break: keep-all; }
.free-end .price-row { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; padding: var(--pv) 6px; border-radius: 14px; color: var(--ink); text-align: center; }
.free-end .price-row span { white-space: nowrap; }
.free-end .price-row span:first-child { font-weight: 700; }
.free-end .price-row span:last-child { position: relative; font-size: var(--p1); font-weight: 800; line-height: 1.2; }
.free-end .price-row.own span:first-child { font-weight: 800; }
.free-end .price-row.own span:last-child { font-size: var(--p2); font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; }
.pay-sheet > .price-compare + .cta { margin-top: 12px; }
.free-end .price-row:not(.own) { background: color-mix(in srgb, var(--ink) 8%, var(--bg)); }
.free-end .price-row:not(.own) span:last-child { color: color-mix(in srgb, var(--ink) 75%, var(--bg)); text-decoration-line: line-through; text-decoration-color: var(--inju); text-decoration-thickness: 2.5px; }
/* 흰 판 위라 내손내운 칸을 키우거나 그림자를 주지 않습니다(키우면 판 오른쪽 여백을 먹고 결제 단추와 부딪힘) */
.free-end .price-row.own { z-index: 1; border: 2.5px solid var(--inju); background: #fff; }
.free-end .price-row.own span:last-child { color: var(--inju); font-family: var(--font-title); font-weight: 700; }
.free-end .price-row.own span:last-child::before { content: ''; position: absolute; z-index: -1; left: -7px; right: -7px; bottom: 1px; height: 52%; border-radius: 6px 3px 7px 4px; background: var(--me, #fde68a); transform: rotate(-2deg) skewX(-14deg); }
.free-end .price-row.own::before { content: ''; position: absolute; top: 50%; left: -28px; width: 26px; height: 19px; margin-top: -10px; background: var(--inju); -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2028%2020%27%3E%3Cpath%20d%3D%27M1%2010.8C7%209.6%2012%208.9%2017.5%208.6L15.8%203.2%2027%2010.2%2015.8%2017%2017.5%2012C12%2012.2%207%2012.6%201%2012.8z%27%20fill%3D%27black%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2028%2020%27%3E%3Cpath%20d%3D%27M1%2010.8C7%209.6%2012%208.9%2017.5%208.6L15.8%203.2%2027%2010.2%2015.8%2017%2017.5%2012C12%2012.2%207%2012.6%201%2012.8z%27%20fill%3D%27black%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; }
@media (max-height: 720px) { .pay-sheet > .price-compare { --pv: 6px; --fs: 12px; --p1: 15px; --p2: 22px; } .pay-sheet > .price-compare + .cta { margin-top: 7px; } }
@media (max-height: 600px) { .pay-sheet > .price-compare { --pv: 4px; --p2: 19px; } .pay-sheet > .price-compare + .cta { margin-top: 6px; } }
@media (max-width: 359px) { .pay-sheet > .price-compare { --fs: 12px; --p1: 14px; } }
.pay-sheet > .cta { margin-top: 0; }
/* under the pay button: the no-refund line with a link to the refund rules */
.free-end .note { margin: 8px 0 0; word-break: keep-all; }
.free-end .note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cta:disabled { opacity: 0.7; }
/* the seller's details in the room under the last card (the other cards keep it for the line to the next card) */
/* 아래 줄이기 규칙으로도 다 들어가지 않는 짧은 화면(320×480 등)에서는 결제 장만 위아래로 밀어 결제 단추·환불 안내·사업자 줄을
   볼 수 있게 합니다. 들어가는 화면에서는 밀리지 않습니다(2026-10-28 리뷰). 밀 때도 PC 크롬에 회색 막대가 서지 않게 막대는 숨깁니다. */
.free-end { padding-bottom: calc(max(10px, env(safe-area-inset-bottom)) + 4px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.free-end::-webkit-scrollbar { display: none; }
.pay-sheet > .biz { flex: none; margin: 8px 0 0; text-align: center; color: rgba(var(--ink-rgb), 0.45); font-size: 9.5px; line-height: 1.4; word-break: keep-all; }
.pay-sheet > .biz span { white-space: nowrap; }   /* one item never breaks in the middle (070-8098-/8971) */

/* 예전 두 손 비교의 3·4장 해 줄. 새 4장 잠긴 해 표시는 .c-tease에서 그립니다. */
.sj-when { flex: none; align-self: center; display: flex; align-items: baseline; gap: 7px; margin: calc(var(--gap) - 4px) 18px 0; }
.sj-when small { font-size: 13px; font-weight: 800; }
.sj-when b { font: 700 18px/1.25 var(--font-title); letter-spacing: -0.3px; }
.sj-when.sj-love { color: var(--coral-d); }
.sj-when.sj-money { color: var(--gold-d); }
/* 결제 전 3장·4장 가린 값(result.js blinded): 청월당처럼 이름표와 칸은 그대로 두고 글자만 흐립니다. 흐린 글자는 진짜 값이 아닙니다 */
.blind { display: inline-block; filter: blur(4.5px); user-select: none; -webkit-user-select: none; }
/* 6장 제목의 인생 전성기 날짜 자리(result.js veiledDate): 숫자만 흐림. 큰 굵은 글씨는 검게 번져 무거워 말풍선 모자이크처럼 연한 회색으로 */
.free-end .title .veil-date { white-space: nowrap; }
.free-end .title .veil-date .blind { margin: 0 2px; filter: blur(5px); color: var(--ink-3); }

/* ---------- buttons: a press gives a little; the main button catches the light now and then ---------- */

.cta, .btns button, .chat-x { transition: transform 0.18s var(--ease-out), filter 0.18s ease; }
.cta:active, .btns button:active, .chat-x:active { transform: scale(0.97); filter: brightness(0.94); }
.cta { position: relative; overflow: hidden; }
.cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%); translate: -120% 0; pointer-events: none; }
.current .cta::after { animation: sheen 4.5s var(--ease-in-out) 1.8s infinite; }
/* 결제 단추 움직임: 숨 쉬듯 커졌다 작아지고 붉은 빛 고리가 퍼지며 빛이 자주 지나갑니다(지인 피드백 '결제 단추가 잘 안 보임', 사용자 2026-10-24 G안).
   보고 있는 장에서만 움직이고, 결제창을 여는 동안은 멈춥니다. */
.free-end .cta.pay-go { animation: pay-pulse 1.6s ease-in-out infinite, pay-ring 1.6s ease-out infinite; }
.current .cta.pay-go::after { background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.45) 50%, transparent 65%); animation: pay-sheen 3.2s ease-in-out 0.4s infinite; }
.free-end:not(.current) .cta.pay-go, .cta.pay-go:disabled, .cta.pay-go:disabled::after { animation-play-state: paused; }
@keyframes pay-pulse { 50% { scale: 1.04; } }
@keyframes pay-ring { from { box-shadow: 0 6px 16px rgba(200, 64, 47, 0.28), 0 0 0 0 rgba(200, 64, 47, 0.55); } to { box-shadow: 0 6px 16px rgba(200, 64, 47, 0.28), 0 0 0 14px rgba(200, 64, 47, 0); } }
@keyframes pay-sheen { 0% { translate: -120% 0; } 30%, 100% { translate: 120% 0; } }
@keyframes sheen { 0% { translate: -120% 0; } 30%, 100% { translate: 120% 0; } }

.chat-x { flex: none; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: rgba(var(--ink-rgb), 0.06); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.chat-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@keyframes msg-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: hop 1.1s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: 0.15s; }
.dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes hop { 0%, 60%, 100% { transform: none; opacity: 0.45; } 30% { transform: translateY(-5px); opacity: 1; } }
/* ---------- toast ---------- */

.toast {
  position: absolute; z-index: 9; left: 50%; bottom: calc(max(10px, env(safe-area-inset-bottom)) + 64px);
  transform: translate(-50%, 12px);
  max-width: calc(100% - 40px);
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(var(--ink-rgb), 0.9);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* short phones (e.g. iPhone SE): smaller type so the hand keeps some room */
@media (max-height: 720px) {
  .cta { margin-top: 12px; }
  .title { font-size: 22px; }
  .type-head .title { font-size: 25px; }
  .keys { margin-top: 8px; }
  .ticks { gap: 10px; padding: 15px 18px; }
  .love-ticks ul { gap: 10px; }
  .swipe-cta { padding: 6px 16px; font-size: 16px; }
  .face b { font-size: 14.5px; }
  .ticks li { font-size: 14.5px; }
  /* 2장 has three bars on top of the usual blocks: tighter gaps and type */
  .person-card { --gap: 10px; }
  .person-card .type-head .title { font-size: 22px; }
  .scales { gap: 6px; }
  .scale-top { margin-bottom: 1px; }
  .scale-top b { font-size: 12px; }
  .person-card .ticks { padding: 11px 16px; }
  .person-card .love-ticks ul { gap: 8px; }
}

/* very short screens (e.g. iPhone SE in Safari): smaller gaps so every card still fits */
@media (max-height: 600px) {
  .card { --gap: 10px; }
  .art { min-height: 96px; }   /* the hand picture gives way first */
  .ticks { gap: 7px; padding: 11px 14px; }
  .love-ticks ul { gap: 7px; }
  .face .side { padding: 8px; }
  .face b { font-size: 13.5px; }
}

/* the free result's last card on short phones: smaller type and chips so the button stays on screen */
@media (max-height: 720px) {
  .free-end .title { font-size: 24px; }
  .pay-sheet > .biz { margin-top: 5px; font-size: 9px; }
  .free-end .note { margin-top: 6px; }
  /* 노란 줄('내가 원하는 질문도 …')은 인스타 안 브라우저처럼 낮은 화면에서도 보이게 하고(예전엔 숨김), 그 자리는 질문 칸·대화 칸을 줄여 냅니다 */
  .free-end .ans .cnt { margin-top: 0; font-size: 12.5px; }
  .free-end .qs { gap: 6px; }
  .free-end .qs button { min-height: 40px; padding: 7px 10px; font-size: 12.5px; }
  .free-end .ans { gap: 6px; margin-top: 10px; padding: 10px; }
}
@media (max-height: 660px) {
  .free-end .qs button { min-height: 36px; padding-top: 5px; padding-bottom: 5px; line-height: 1.3; }
  .free-end .ans { gap: 5px; padding: 8px 10px; }
  .free-end .ans .q { padding: 6px 11px; }
  .free-end .ans .b { padding: 7px 11px; }
}
/* 6장이 높이 680px 아래(360×640 안드로이드 등)에서 맨 아래 사업자 줄까지 들어가게 질문 칸과 대화 칸을 줄입니다(사업자 줄은 그대로) */
@media (max-height: 680px) {
  .qs { gap: 6px; }
  .qs button { min-height: 40px; padding: 7px 10px; font-size: 12.5px; }
  .ans { gap: 6px; margin-top: 10px; padding: 10px; }
  .ans .q { padding: 8px 12px; font-size: 13px; }
  .ans .b { padding: 8px 12px; font-size: 12.5px; }
}
@media (max-height: 600px) {
  .free-end .title { font-size: 22px; }
  .end-sub { margin-top: 4px; font-size: 13px; }
  .qs button { min-height: 40px; padding: 7px 10px; font-size: 12.5px; }
  .ans { gap: 6px; margin-top: 10px; padding: 10px; }
  .ans .cnt { display: none; }
  .free-end .cta { height: 44px; }
  .free-end .note { margin-top: 6px; }
}

/* 6장은 날짜 답에서 자물쇠 줄이 날짜 아래로 내려가 답 칸이 한 줄 커지므로 맨 아래 사업자 줄까지 들어가게 600px 아래 화면 규칙을
   당겨 쓰고 답 칸 안쪽 여백을 조금 줄입니다(시안 맞추기_6장). 620px 아래는 제목과 답 칸 간격을 조금 더 줄임 */
@media (max-height: 779px) {
  .free-end.has-dates .title { font-size: 22px; }
  .free-end.has-dates .end-sub { margin-top: 4px; font-size: 13px; }
  .free-end.has-dates .cta { height: 44px; }
  .free-end.has-dates .note { margin-top: 6px; }
  .free-end.has-dates .ans { padding: 8px 10px; }
}
@media (max-height: 620px) {
  .free-end.has-dates .title { font-size: 20px; }
  .free-end.has-dates .ans { gap: 4px; }
  .free-end.has-dates .ans .lkw { margin-top: 2px; }
}
@media (max-height: 580px) {
  .free-end.has-dates .qs button { padding-top: 5px; padding-bottom: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .track, .toast, .bars i::after, .card::after, .viewer, .viewer img { transition: none !important; }
  .live, .live *, .live *::after, .current *, .current *::after { animation: none !important; }
}

/* ---------- 두 손 비교: 캐릭터와 주고받는 대화 화면(result.js talk). 첫 손 카드 화면과 겹치지 않게 t- 이름표와 .talk 안에만 둡니다 ---------- */
.app.talk-mode > .top, .app.talk-mode > .stage { display: none; }
.app.talk-mode .toast { bottom: auto; top: calc(max(10px, env(safe-area-inset-top)) + 60px); }
.talk, .talk *, .talk *::before, .talk *::after { box-sizing: border-box; }
.talk {
  position: absolute; z-index: 6; left: 0; right: 0; top: 0; height: 100%; display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg);
}

/* 위 머리: 카톡 대화방처럼 뒤로 가기(처음 화면)와 방 이름만 */
.talk .t-top { flex: none; display: flex; align-items: center; gap: 4px; padding: max(8px, env(safe-area-inset-top)) 12px 8px 6px; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.talk .t-back { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
.talk .t-back svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.talk .t-face {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent-weak) 50% 6% / 125% auto no-repeat; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(var(--shade-rgb), 0.2);
}
.talk .t-brand { display: flex; align-items: center; gap: 6px; }
.talk .t-brand img { display: block; width: auto; height: 20px; }

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

.talk .t-row { display: flex; gap: 8px; align-items: flex-start; margin-top: 5px; }
.talk .t-row.t-first { margin-top: 12px; }
.talk .t-row .t-face { width: 34px; height: 34px; border-width: 1.5px; visibility: hidden; }
.talk .t-row.t-first .t-face { visibility: visible; }
.talk .t-row .t-col { min-width: 0; max-width: calc(100% - 42px); display: flex; flex-direction: column; align-items: flex-start; }
.talk .t-name { font-size: 12.5px; font-weight: 700; color: var(--ink-2); margin: 1px 0 4px 2px; }

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

.talk .t-bubble {
  background: #fff; color: var(--ink); font-size: 15px; line-height: 1.5; padding: 9px 13px; border-radius: 4px 18px 18px 18px;
  word-break: keep-all; overflow-wrap: anywhere; box-shadow: 0 1px 3px rgba(var(--ink-rgb), 0.07);
}
.talk .t-row:not(.t-first) .t-bubble { border-radius: 18px; }
.talk .t-bubble b { font-weight: 800; background: linear-gradient(transparent 58%, rgba(var(--accent-rgb), 0.2) 58%); }
.talk .t-pink .t-bubble b { background: linear-gradient(transparent 58%, rgba(226, 112, 95, 0.26) 58%); }
.talk .t-bubble.t-para p { margin: 0; }
.talk .t-bubble.t-para p + p { margin-top: 7px; }

/* 사용자 말(오른쪽) */
.talk .t-me { display: flex; justify-content: flex-end; margin-top: 16px; }
.talk .t-me .t-bubble { background: var(--me); border-radius: 18px 4px 18px 18px; font-weight: 700; max-width: 82%; }

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

/* 그림 말풍선: 두 손 나란히 + 판정 + 생김새 + 제목 */
.talk .t-pic, .talk .t-wide-card, .talk .t-cert-card {
  position: relative; width: min(314px, calc(100vw - 74px)); padding: 8px; border-radius: 4px 18px 18px 18px;
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 4px 16px rgba(var(--shade-rgb), 0.08);
}
.talk .t-pic .t-kicker { font-size: 12.5px; font-weight: 800; color: var(--label); padding: 2px 4px 7px; }
.talk .t-pink .t-pic .t-kicker { color: var(--coral-d); }
.talk .t-pair { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.talk .t-panel { position: relative; border-radius: 12px; overflow: hidden; background: var(--surface-2); }
.talk .t-panel svg { display: block; width: 100%; height: auto; }
.talk .t-panel .t-tag {
  position: absolute; left: 6px; bottom: 6px; font-size: 11.5px; font-weight: 800; line-height: 1; padding: 4px 7px 5px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.94); color: var(--ink); white-space: nowrap; box-shadow: 0 1px 4px rgba(var(--ink-rgb), 0.12);
}
.talk .t-panel .t-tag span { color: var(--palm-d); margin-left: 3px; font-weight: 700; }
.talk .t-panel.t-faint svg { filter: grayscale(.7) opacity(.55); }
.talk .t-panel.t-faint::after { content: ""; position: absolute; inset: 0; border: 2px dashed rgba(var(--ink-3-rgb), 0.6); border-radius: 12px; pointer-events: none; }

/* 두 손 사이 표시: = 그대로, .talk → 달라짐 */
.talk .t-mid {
  position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font: 900 18px/1 var(--font-ui); color: #fff;
  background: var(--accent); border: 2.5px solid #fff; box-shadow: 0 3px 10px rgba(var(--shade-rgb), 0.3);
  animation: t-pop .45s var(--ease-spring) .7s both;
}
.talk .t-mid.t-same { background: var(--same); }
.talk .t-mid.t-changed { background: var(--coral); }
@keyframes t-pop { from { opacity: 0; transform: translate(-50%, -50%) scale(.3); } }

/* 손마다 생김새 줄 */
.talk .t-cap { margin-top: 6px; font-size: 13px; font-weight: 700; line-height: 1.35; word-break: keep-all; text-wrap: balance; }
.talk .t-cap.t-same {
  text-align: center; padding: 7px 10px; border-radius: 10px; color: var(--same-ink); background: var(--same-weak);
  position: relative;
}
.talk .t-cap.t-same::before, .talk .t-cap.t-same::after { content: ""; position: absolute; top: -6px; width: 2px; height: 6px; background: var(--same-weak); }
.talk .t-cap.t-same::before { left: 25%; }
.talk .t-cap.t-same::after { right: 25%; }
.talk .t-cap.t-two { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.talk .t-cap.t-two > div { display: flex; flex-direction: column; justify-content: center; padding: 7px 8px; border-radius: 10px; text-align: center; background: var(--surface-2); color: var(--ink-2); }
.talk .t-cap.t-two > .t-other { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 2px var(--accent); }
.talk .t-v-changed .t-cap.t-two > .t-other { box-shadow: inset 0 0 0 2px var(--coral); }
.talk .t-cap.t-two > .t-none { background: transparent; }
.talk .t-cap.t-two > .t-faint, .talk .t-cap.t-faint-both { background: transparent; color: var(--ink-3); box-shadow: inset 0 0 0 1.5px rgba(var(--ink-3-rgb), 0.5); border-radius: 10px; }
.talk .t-cap.t-faint-both { text-align: center; padding: 7px 10px; }
.talk .t-cap.t-two > .t-basis i { display: block; font-style: normal; font-size: 11.5px; font-weight: 800; color: var(--label); margin-bottom: 2px; }
.talk .t-cap.t-chips > div { font-size: 14px; font-weight: 800; background: var(--accent-weak); color: var(--accent-d); }
.talk .t-cap.t-chips > div.t-now { background: var(--accent); color: #fff; box-shadow: none; }

/* 제목 */
.talk .t-ttl { font-family: var(--font-title); font-size: 20px; line-height: 1.35; color: var(--title); word-break: keep-all; text-wrap: balance; padding: 9px 6px 3px; text-align: center; }
.talk .t-ttl.t-big { font-size: 24px; }
.talk .t-pink .t-ttl { color: var(--coral-d); }
.talk .t-ttl.t-from-basis { position: relative; margin-top: 10px; padding-top: 6px; }
.talk .t-ttl.t-from-basis::before {
  content: ""; position: absolute; right: 25%; top: -10px; width: 2px; height: 12px; background: var(--accent);
}

/* 판정 스티커 */
.talk .t-sticker {
  position: absolute; right: 10px; top: -12px; transform: rotate(5deg);
  font-family: var(--font-title); font-size: 16px; white-space: nowrap; padding: 5px 13px 6px; border-radius: 999px;
  color: #fff; background: var(--accent); border: 2.5px solid #fff;
  box-shadow: 0 4px 12px rgba(var(--shade-rgb), 0.28); animation: t-stamp .5s var(--ease-spring) .6s both;
}
.talk .t-sticker.t-same { background: var(--same); }
.talk .t-sticker.t-changed { background: var(--coral); }
.talk .t-sticker.t-faint { background: var(--faint); font-size: 14px; }
.talk .t-pic.t-has-sticker { margin-top: 12px; }
@keyframes t-stamp { 0% { opacity: 0; transform: rotate(-12deg) scale(2); } 100% { opacity: 1; transform: rotate(5deg) scale(1); } }

/* 선 그리기 */
.talk .t-ln { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.talk .t-ln.t-dim { stroke: rgba(120, 72, 52, 0.32); }
.talk .t-ln.t-ref { stroke: rgba(120, 72, 52, 0.7); }
.talk .t-ln.t-glow { stroke: rgba(255, 255, 255, 0.92); }
.talk .t-ln.t-edge { stroke: var(--palm-edge); }
.talk .t-ln.t-hl { stroke: var(--palm-hl); }
.talk .t-ln.t-soft-glow { stroke: rgba(255, 255, 255, 0.7); }
.talk .t-ln.t-soft { stroke: rgba(var(--palm-rgb), 0.6); }
.talk .t-pink .t-ln.t-glow { stroke: rgba(255, 255, 255, 0.92); }
.talk .t-pink .t-ln.t-edge { stroke: #b04434; }
.talk .t-pink .t-ln.t-hl { stroke: var(--coral); }
.talk .t-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: t-draw .8s var(--ease-out) .2s forwards; }
@keyframes t-draw { to { stroke-dashoffset: 0; } }
.talk .t-instant .t-draw { stroke-dashoffset: 0; }
.talk .t-spot { fill: none; stroke: var(--coral); stroke-dasharray: 10 7; animation: t-fade .4s ease .9s both; }
@keyframes t-fade { from { opacity: 0; } }

/* 1단계 판정 표 */
.talk .t-vtable { width: min(314px, calc(100vw - 74px)); padding: 4px 12px; border-radius: 18px; background: #fff; color: var(--ink); border: 1px solid var(--line); }
.talk .t-vr { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px dashed rgba(var(--ink-rgb), 0.13); }
.talk .t-vr:first-child { border-top: 0; }
.talk .t-vr b { font-size: 14.5px; font-weight: 800; }
.talk .t-vr small { font-size: 12px; font-weight: 700; color: var(--ink-3); }
.talk .t-vr em { margin-left: auto; font-style: normal; font-size: 13px; font-weight: 800; padding: 3px 10px 4px; border-radius: 999px; background: var(--accent-weak); color: var(--accent-d); white-space: nowrap; }
.talk .t-vr em.t-same { background: var(--same-weak); color: var(--same-ink); }
.talk .t-vr em.t-changed { background: var(--coral-weak); color: var(--coral-d); }
.talk .t-vr em.t-one, .talk .t-vr em.t-none { background: var(--chip-off); color: var(--ink-3); }

/* 체크와 한마디를 한 카드로 */
.talk .t-box { font-size: 14px; }
.talk .t-box .t-k { font-size: 12px; font-weight: 800; color: var(--label); margin-bottom: 3px; }
.talk .t-pink .t-box .t-k { color: var(--coral-d); }
.talk .t-box ul { list-style: none; margin: 0; padding: 0; }
.talk .t-box li { display: flex; gap: 7px; align-items: flex-start; margin-top: 3px; }
.talk .t-box li::before {
  content: "✓"; flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 6px; background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 900; display: flex; align-items: center; justify-content: center;
}
.talk .t-pink .t-box li::before { background: var(--coral); }
.talk .t-box hr { border: 0; border-top: 1px dashed rgba(var(--ink-rgb), 0.15); margin: 8px 0 7px; }
.talk .t-box .t-adv { margin: 0; font-weight: 700; }

/* 인생 루트 줄 */
.talk .t-rows-card { width: min(314px, calc(100vw - 74px)); padding: 4px 14px; border-radius: 18px; background: #fff; color: var(--ink); border: 1px solid var(--line); }
.talk .t-rows-card .t-r { display: flex; gap: 10px; padding: 8px 0; border-top: 1px dashed rgba(var(--ink-rgb), 0.13); align-items: baseline; }
.talk .t-rows-card .t-r:first-child { border-top: 0; }
.talk .t-rows-card .t-r .t-k { flex: none; width: 64px; font-size: 12px; font-weight: 800; color: var(--label); }
.talk .t-rows-card .t-r .t-v { font-size: 14.5px; font-weight: 700; line-height: 1.45; word-break: keep-all; text-wrap: balance; }
.talk .t-rows-card .t-r.t-warn .t-k { color: var(--coral-d); }
.talk .t-rows-card .t-r.t-when .t-k { color: var(--gold-d); }

/* 결: 인생 시기 */
.talk .t-wide-card { padding: 6px 10px 12px; }
.talk .t-wide-card > .t-ttl { padding-bottom: 6px; }
/* 결제 뒤: 무료 4장에서 잠근 값을 두 손 그림 바로 다음에 푼 카드(확정 시안 10-31). */
.talk .t-open { padding: 18px 14px 16px !important; text-align: center; }
.talk .t-open .o-title { margin: 0; font: 700 22px/1.3 var(--font-title); color: var(--title, var(--ink)); letter-spacing: -.3px; }
.talk .t-open .o-dd { display: grid; place-items: center; width: 168px; height: 168px; margin: 18px auto 0; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 3px var(--gold), 0 0 0 8px #fff, 0 0 0 9.5px rgba(217,164,65,.55), 0 6px 18px rgba(38,33,30,.08); }
.talk .t-open .o-dd p { margin: 0; font: 700 40px/1.1 var(--font-title); letter-spacing: -1px; color: var(--ink); }
.talk .t-open .o-date { display: inline-flex; align-items: center; gap: .32em; max-width: 100%; margin: 18px 0 0; padding: 8px 16px; border-radius: 999px;
  background: #f3e7cc; color: var(--gold-d); font: 800 16px/1.35 var(--font-ui); white-space: nowrap; }
.talk .t-open .lk { display: inline-block; flex: none; width: 1em; height: 1em; color: var(--gold-d); }
.talk .t-open .years { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin: 14px 0 0; }
.talk .t-open .years.n1 { grid-template-columns: minmax(0, 1fr); }
.talk .t-open .yr-box { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 11px 6px; border-radius: 14px; background: #fff;
  box-shadow: 0 4px 14px rgba(38,33,30,.06); }
.talk .t-open .yr-box small { font-size: 12px; font-weight: 800; word-break: keep-all; }
.talk .t-open .yr-box b { display: inline-flex; align-items: center; gap: .2em; font: 700 20px/1.25 var(--font-title); letter-spacing: -.3px; }
.talk .t-open .yr-box b .lk { width: .78em; height: .78em; color: inherit; }
.talk .t-open .yr-box.love { color: var(--coral-d); border: 1px solid rgba(226, 112, 95, .35); }
.talk .t-open .yr-box.wy { color: var(--gold-d); border: 1px solid rgba(217, 164, 65, .45); }
.talk .t-life { display: block; width: 100%; height: auto; overflow: visible; }
.talk .t-life .t-area { fill: rgba(var(--accent-rgb), 0.08); }
.talk .t-life .t-base, .talk .t-life .t-tick { stroke: rgba(var(--ink-rgb), 0.15); stroke-width: 1; }
.talk .t-life .t-year { font-size: 12px; font-weight: 600; fill: var(--ink-3); }
.talk .t-life .t-curve { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 1; animation: t-draw-tl 1s var(--ease-out) .15s both; }
@keyframes t-draw-tl { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.talk .t-life .t-dot { fill: #fff; stroke: var(--accent); stroke-width: 2.5; }
.talk .t-life .t-dot.t-love { fill: #fff; stroke: var(--coral); }
.talk .t-life .t-lbl { font-size: 14px; font-weight: 800; fill: var(--ink); }
.talk .t-life .t-age { font-size: 12px; font-weight: 700; fill: var(--accent-d); }
.talk .t-life .t-now { stroke: rgba(226, 112, 95, 0.85); stroke-width: 1.5; stroke-dasharray: 4 4; }
.talk .t-life .t-now-lbl { font-size: 12.5px; font-weight: 800; fill: var(--coral-d); }
.talk .t-life .t-past { opacity: 0.4; }
.talk .t-life .t-dot.t-next { filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), 0.5)); }
.talk .t-life .t-dot, .talk .t-life .t-lbl, .talk .t-life .t-age { animation: t-fade .35s ease calc(.2s + var(--p, 0) * 1s) both; }
.talk .t-life .t-now, .talk .t-life .t-now-lbl { animation: t-fade .4s ease 1.1s both; }
.talk .t-life .t-ring { fill: none; stroke: var(--accent); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: t-ring 1.6s var(--ease-out) 1.3s 2; }
@keyframes t-ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(3); } }
.talk .t-soon { margin: 6px auto 0; width: fit-content; max-width: 100%; padding: 6px 14px; border-radius: 999px; background: var(--coral-weak); border: 1px solid rgba(226, 112, 95, 0.45); color: var(--coral-d); font-size: 14px; font-weight: 800; word-break: keep-all; text-align: center; }

/* 인생 풀이 첫머리 인생 그래프: 이름·지금 나이 → 다음 기회(큰 글씨) → 운의 흐름 선 → 나이 눈금 → 분야 칸.
   움직임은 2초 안에 끝나고(선이 그려지고 점이 하나씩 뜸), 큰 글씨와 칸은 처음부터 보입니다. */
.talk .t-lgraph { --lg-love: var(--coral); --lg-work: var(--accent); --lg-money: #c08a2c; --lg-num: "Paperlogy", var(--font-ui); padding: 14px 14px 13px; }
.talk .t-lgraph-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.talk .t-lgraph-name { font-family: var(--font-title); font-size: 15px; line-height: 1.2; letter-spacing: -0.2px; word-break: keep-all; }
.talk .t-lgraph-now { flex: none; font-size: 11px; font-weight: 800; line-height: 1.3; color: #fff; background: var(--accent); padding: 3px 8px; border-radius: 99px; }
.talk .t-lgraph-q { margin-top: 12px; }
.talk .t-lgraph-quiet { --c: var(--ink-2); }   /* 10년 안에 시기가 없을 때(지금은 차곡차곡 다지는 때) */
.talk .t-lgraph-lab { font-size: 11.5px; font-weight: 800; line-height: 1.3; color: var(--ink-3); }
.talk .t-lgraph-big { margin-top: 2px; font-family: var(--font-title); font-size: 22px; line-height: 1.2; letter-spacing: -0.4px; color: var(--c); word-break: keep-all; }
.talk .t-lgraph-sub { margin-top: 4px; font-size: 12.5px; font-weight: 700; line-height: 1.35; color: var(--ink-2); word-break: keep-all; }
.talk .t-lgraph-sub b { font-family: var(--lg-num); font-weight: 700; color: var(--ink); margin-right: 4px; }
.talk .t-lgraph-chart { position: relative; margin-top: 12px; }
.talk .t-lgraph-svg { display: block; width: 100%; height: auto; overflow: visible; }
.talk .t-lgraph-svg stop { stop-color: var(--accent); }
.talk .t-lgraph-base { stroke: rgba(var(--ink-rgb), 0.12); }
.talk .t-lgraph-nowline { stroke: rgba(var(--ink-rgb), 0.35); stroke-dasharray: 2 3; }
.talk .t-lgraph-line { fill: none; stroke: var(--accent-d); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1 1; animation: t-draw-tl .9s cubic-bezier(.4, 0, .2, 1) both; }
.talk .t-lgraph-nowdot { fill: var(--accent-d); stroke: #fff; stroke-width: 2; }
.talk .t-lgraph-dot { fill: var(--c); stroke: #fff; stroke-width: 2; }
.talk .t-lgraph-ring { fill: var(--c); opacity: .35; transform-box: fill-box; transform-origin: center; animation: t-lgraph-ring 1.1s ease-out .9s both; }
@keyframes t-lgraph-ring { from { transform: scale(.4); opacity: .9; } to { transform: scale(1); opacity: .35; } }
.talk .t-lgraph-pop { animation: t-fade .35s ease-out both; }
.talk .t-lgraph-nowlbl { position: absolute; top: 0; transform: translateX(-50%); font-size: 11px; font-weight: 800; line-height: 1.2; color: var(--ink); white-space: nowrap; }
.talk .t-lgraph-axis { position: relative; height: 16px; margin-top: 4px; }
.talk .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; }
.talk .t-lgraph-fields { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 6px; margin-top: 10px; }
.talk .t-lgraph-field { min-width: 0; padding: 7px 4px 8px; border-radius: 10px; background: var(--surface-2); border: 1px solid transparent; text-align: center; }
.talk .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; }
.talk .t-lgraph-fn i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.talk .t-lgraph-fa { margin-top: 3px; font-family: var(--lg-num); font-weight: 700; font-size: 15px; line-height: 1.2; color: var(--ink); white-space: nowrap; }
.talk .t-lgraph-fa.t-lgraph-word { font-family: var(--font-ui); font-weight: 800; font-size: 13.5px; white-space: normal; word-break: keep-all; }
/* 사주 날짜가 있으면 나이 눈금 아래에 그 나이가 되는 해(result.js lifeGraphHTML) */
.talk .t-lgraph-axis.sj-years { height: 29px; }
.talk .t-lgraph-axis.sj-years span { text-align: center; }
.talk .t-lgraph-axis .sj-year { display: block; font-style: normal; font-size: 10px; font-weight: 600; color: var(--ink-3); }
.talk .t-lgraph-field.t-lgraph-next { background: color-mix(in srgb, var(--c) 12%, #fff); border-color: var(--c); }

/* 결: 20대부터 60대까지 */
.talk .t-decades { display: grid; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.talk .t-decades li { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 12px; background: #fff; border: 1px solid var(--line); animation: t-rise .4s var(--ease-out) calc(.1s + var(--i) * .07s) both; }
.talk .t-decades li.t-hit { background: var(--accent-weak); border-color: rgba(var(--accent-rgb), 0.4); }
.talk .t-decades b { flex: none; width: 38px; text-align: center; font: 700 15px var(--font-title); color: var(--accent-d); }
.talk .t-decades span { font-size: 14px; line-height: 1.4; font-weight: 600; color: var(--ink); word-break: keep-all; text-wrap: balance; }
.talk .t-decades li.t-past { opacity: 0.55; }
.talk .t-decades li.t-now { background: var(--coral-weak); border-color: rgba(226, 112, 95, 0.6); }
.talk .t-decades li.t-group { align-items: flex-start; }
.talk .t-decades li.t-group > b { padding-top: 1px; }
.talk .t-decades .t-dsubs { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; }
.talk .t-decades .t-dsub { display: flex; align-items: baseline; gap: 7px; margin: 0; }
.talk .t-decades .t-dsub i { flex: none; min-width: 26px; max-width: 80px; white-space: nowrap; font-style: normal; font-size: 12px; font-weight: 700; color: var(--label); }
.talk .t-decades .t-dsub span { flex: 1 1 auto; min-width: 0; font-size: 13.5px; }
.talk .t-decades .t-dsub.t-past { opacity: 0.55; }
.talk .t-decades .t-dsub .t-badge { align-self: center; }
.talk .t-decades .t-badge { flex: none; margin-left: auto; padding: 2px 8px; border-radius: 999px; background: var(--coral); color: #fff; font-size: 12px; font-weight: 800; font-style: normal; }

/* 결: 다음 기회 */
.talk .t-span { display: flex; align-items: center; margin: 12px 2px 0; }
.talk .t-span .t-pt { flex: none; display: flex; flex-direction: column; align-items: center; padding: 8px 11px; border-radius: 14px; background: #fff; border: 1px solid rgba(226, 112, 95, 0.5); animation: t-rise .45s var(--ease-out) .1s both; }
.talk .t-span .t-pt b { font: 700 15px/1.2 var(--font-title); color: var(--coral-d); white-space: nowrap; }
.talk .t-span .t-pt small { margin-top: 3px; font-size: 12.5px; font-weight: 800; color: var(--ink); }
.talk .t-span .t-to { border-color: rgba(var(--accent-rgb), 0.6); background: var(--accent-weak); box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.18); animation-delay: .7s; }
.talk .t-span .t-to b { font-size: 17px; color: var(--accent-d); }
.talk .t-span .t-gap { flex: 1; position: relative; height: 2px; margin: 0 6px; background: linear-gradient(90deg, rgba(226, 112, 95, 0.85), rgba(var(--accent-rgb), 0.9)); transform-origin: 0 50%; animation: t-grow .6s var(--ease-out) .3s both; }
.talk .t-span .t-gap::after { content: ""; position: absolute; right: -2px; top: -4px; border: 5px solid transparent; border-left: 7px solid rgba(var(--accent-rgb), 0.9); border-right: 0; }
.talk .t-span .t-gap i { position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%); font-style: normal; font-size: 13px; font-weight: 800; color: var(--ink); white-space: nowrap; }
@keyframes t-grow { from { transform: scaleX(0); } }
.talk .t-nx-text { margin: 10px 4px 0; font-size: 14.5px; line-height: 1.5; color: var(--ink); text-align: center; word-break: keep-all; }
.talk .t-nx-text p { margin: 0; }
.talk .t-stack { display: grid; gap: 6px; margin-top: 10px; }
.talk .t-stack > div { padding: 8px 12px 9px; border-radius: 12px; background: var(--accent-weak); border: 1px solid rgba(var(--accent-rgb), 0.3); }
.talk .t-stack > div.t-then { background: #fff; border-color: var(--line); }
.talk .t-stack .t-k { font-size: 12px; font-weight: 800; color: var(--label); margin-bottom: 2px; }
.talk .t-stack .t-v { font-size: 14.5px; font-weight: 700; line-height: 1.45; color: var(--ink); word-break: keep-all; }

/* 결: 감정서(실제 공유 그림, 누르면 크게 보기)와 그 아래 올리기·저장 단추 */
.talk .t-cert-card { width: min(250px, calc(100vw - 74px)); padding: 8px 10px 10px; }
.talk .t-cert-card .t-ttl { padding: 2px 4px 8px; font-size: 18px; }
.talk .t-cert-card .card-thumb { display: block; width: 100%; }
.talk .t-share { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; }
.talk .t-cert-card .t-share { margin-top: 10px; }
.talk .t-share button {
  font-family: var(--font-ui); font-size: 14px; font-weight: 800; color: #fff; background: var(--inju); border: 0; border-radius: 999px;
  padding: 10px 6px; cursor: pointer; white-space: nowrap;
}
.talk .t-share button.t-ghost { background: #fff; color: var(--accent-d); border: 1.5px solid rgba(var(--accent-rgb), 0.45); box-shadow: none; }
.talk .t-share button:active { transform: scale(.96); }
.talk .t-share > :only-child { grid-column: 1 / -1; }

/* 맨 아래: 다음 이야기 답장 단추 하나 + 입력칸 */
.talk .t-replies { flex: none; min-height: 62px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; background: rgba(255, 255, 255, 0.9); border-top: 1px solid var(--line); }
.talk .t-replies button {
  font-family: var(--font-ui); font-size: 15px; font-weight: 800; color: #fff; background: var(--inju); border: 0; border-radius: 999px;
  padding: 10px 18px; cursor: pointer; box-shadow: 0 4px 14px rgba(200, 64, 47, 0.25); animation: t-rise .35s var(--ease-spring) both;
}
.talk .t-replies button.t-ghost { background: #fff; color: var(--accent-d); border: 1.5px solid rgba(var(--accent-rgb), 0.45); box-shadow: none; }
.talk .t-replies button:active { transform: scale(.96); }
.talk .t-replies button:disabled { opacity: .45; cursor: default; }

.talk .t-replies.t-ask { flex-direction: column; align-items: stretch; gap: 8px; padding-top: 8px; }
.talk .t-quick { display: flex; justify-content: center; gap: 6px; padding: 2px 0; }
.talk .t-quick button { flex: none; max-width: 100%; font-size: 15px; font-weight: 700; padding: 9px 18px; background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: 0 2px 8px rgba(var(--ink-rgb), 0.1); }
/* 다음 이야기 단추: 크림 바탕 + 금빛→분홍 테두리 + 자두색 글씨(사용자 결정)를 화면 색에 맞춰 크림 바탕 + 금빛→산호색 테두리 + 먹 글씨로.
   빛이 퍼지며 살짝 커졌다 돌아옴(움직임 줄이기 설정이면 멈춤) */
.talk .t-quick button.t-go {
  background: linear-gradient(#fffaf0, #fffaf0) padding-box, linear-gradient(90deg, var(--gold), var(--coral)) border-box;
  border: 2px solid transparent; color: var(--accent-d);
  animation: t-rise .35s var(--ease-spring) both, t-tap 2.2s ease-out .9s infinite;
}
.talk .t-quick button.t-go:disabled { animation: none; }
@keyframes t-tap {
  0% { transform: scale(1); box-shadow: 0 2px 8px rgba(var(--ink-rgb), 0.1), 0 0 0 0 rgba(226, 112, 95, 0.45); }
  35% { transform: scale(1.05); }
  70% { transform: scale(1); box-shadow: 0 2px 8px rgba(var(--ink-rgb), 0.1), 0 0 0 10px rgba(226, 112, 95, 0); }
  100% { transform: scale(1); box-shadow: 0 2px 8px rgba(var(--ink-rgb), 0.1), 0 0 0 0 rgba(226, 112, 95, 0); }
}
.talk .t-input-row { display: flex; align-items: center; gap: 4px; padding: 3px 3px 3px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; }
.talk .t-input-row:focus-within { border-color: var(--accent); }
.talk .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; }
.talk .t-input-row input::placeholder { color: var(--ink-3); font-size: 14px; }
/* 이야기를 다 들은 뒤 질문 시간: 입력칸에 다음 이야기 단추와 같은 금빛→분홍 테두리와 퍼지는 빛(적기 시작하면 멈춤) */
.talk .t-input-row.t-hot {
  border: 2px solid transparent; padding: 4px 4px 4px 15px;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, var(--gold), var(--coral)) border-box;
  animation: t-glow 2.2s ease-out .6s infinite;
}
.talk .t-input-row.t-hot:focus-within { animation: none; box-shadow: 0 0 0 3px rgba(226, 112, 95, 0.18); }
.talk .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(226, 112, 95, 0.4); }
  70%, 100% { box-shadow: 0 0 0 10px rgba(226, 112, 95, 0); }
}
.talk .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; }
.talk .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; }
.talk .t-replies .t-input-row .t-send:disabled { opacity: 1; background: rgba(var(--ink-rgb), 0.08); color: var(--ink-3); box-shadow: none; }
/* 손금 보기가 끝난 뒤: 끝 표시 */
.talk .t-end { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 4px 0 2px; }
.talk .t-end-note { font-size: 14px; color: var(--ink-3); letter-spacing: 0.02em; }
/* 두 손 한눈에 보기 카드(마무리) */
.talk .t-sum { min-width: min(250px, 100%); }
.talk .t-sum-h { font-size: 15px; font-weight: 800; color: var(--label); margin-bottom: 8px; }
.talk .t-sum-r { display: flex; gap: 10px; align-items: baseline; padding: 7px 0; border-top: 1px solid rgba(var(--shade-rgb), 0.12); }
.talk .t-sum-r span { flex: 0 0 64px; font-size: 13px; color: var(--ink-3); }
.talk .t-sum-r b { font-weight: 700; }

/* 아래에 말이 더 있을 때 */
.talk .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: #fff;
  box-shadow: 0 4px 14px rgba(var(--ink-rgb), 0.18); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .25s, transform .25s;
}
.talk .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) {
  .talk *, .talk *::before, .talk *::after { animation: none !important; transition: none !important; }
  .talk .t-draw, .talk .t-life .t-curve { stroke-dashoffset: 0 !important; }
}

/* P01 두 칸 카드: 주제 → 타고난 나 | 지금의 나 → 같은 점 → 제목 */
/* 연애 '썸 탈 때 / 사귀면' 두 칸(무료 결과 3장 .face와 같은 색) */
.talk .t-face2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; }
.talk .t-face2 .t-side { display: flex; flex-direction: column; justify-content: center; padding: 12px 8px; border-radius: 14px; text-align: center; }
.talk .t-face2 small { display: block; font-size: 12px; font-weight: 700; opacity: 0.85; }
.talk .t-face2 b { display: block; margin-top: 3px; font: 400 16px/1.3 var(--font-title); letter-spacing: -0.3px; word-break: keep-all; }
.talk .t-face2 .t-nb { white-space: nowrap; }
.talk .t-face2 .t-out { background: #fff; border: 1px solid rgba(var(--accent-rgb), 0.28); color: var(--accent-d); }
.talk .t-face2 .t-in { background: #fdf1ee; border: 1px solid rgba(226, 112, 95, 0.45); color: var(--coral-d); }
.talk .t-pcard { padding: 10px 10px 8px; }
.talk .t-pcard .t-kicker { font-family: var(--font-title); font-size: 16px; padding: 2px 4px 9px; }
.talk .t-pcard .t-heads { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.talk .t-pcard .t-heads > div:not(.t-mid) { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px 5px; border-radius: 10px; background: var(--surface-2); }
.talk .t-pcard .t-heads b { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.talk .t-pcard .t-heads small { font-size: 11px; font-weight: 700; color: var(--ink-3); }
.talk .t-pcard .t-heads > .t-now { background: var(--accent-weak); }
.talk .t-pcard .t-heads > .t-now b { color: var(--accent-d); }
.talk .t-pcard .t-mid { top: 50%; width: 26px; height: 26px; font-size: 16px; }
.talk .t-pcard .t-cap.t-same { margin-top: 8px; }
.talk .t-pcard .t-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; font-size: 13px; font-weight: 700; line-height: 1.35; word-break: keep-all; }
.talk .t-pcard .t-cell { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 44px; padding: 7px 8px; border-radius: 10px; background: var(--surface-2); color: var(--ink-2); text-wrap: balance; }
.talk .t-pcard .t-cell.t-other { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 2px var(--accent); }
.talk .t-pcard.t-v-changed .t-cell.t-other { box-shadow: inset 0 0 0 2px var(--coral); }
.talk .t-pcard .t-cell.t-dim { background: transparent; color: var(--ink-3); box-shadow: inset 0 0 0 1.5px rgba(var(--ink-3-rgb), 0.45); font-weight: 600; }
.talk .t-pcard.t-v-one .t-cell.t-free:not(.t-dim) { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 2px var(--accent); }
.talk .t-pcard .t-ttl { margin-top: 4px; }
/* 성격 카드 막대: 무료 결과 2장과 같은 막대에 두 손 점. 빈 동그라미 = 타고난 나, 먹 점 = 지금의 나(같은 칸이면 겹침) */
.talk .t-pcard .t-heads b { display: inline-flex; align-items: center; gap: 5px; }
.talk .t-lg { display: inline-block; flex: none; width: 11px; height: 11px; border-radius: 50%; }
.talk .t-lg-f { box-shadow: inset 0 0 0 2px var(--ink-2); }
.talk .t-lg-o { background: var(--accent); box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.4); }
.talk .t-bars { display: grid; gap: 13px; margin-top: 8px; padding: 12px 10px 13px; border-radius: 12px; background: var(--surface-2); }
.talk .t-bar > b { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 800; color: var(--label); }
.talk .t-track { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 9px; }
.talk .t-track span { font-size: 12.5px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.talk .t-track span:last-child { text-align: right; }
.talk .t-line { position: relative; height: 8px; border-radius: 99px; background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.2), rgba(226, 112, 95, 0.2)); }
.talk .t-line i { position: absolute; top: 50%; border-radius: 50%; }
.talk .t-line .t-fd { left: var(--f); width: 26px; height: 26px; margin: -13px 0 0 -13px; box-shadow: inset 0 0 0 2.5px var(--ink-2); }
.talk .t-line .t-od { left: var(--o); width: 16px; height: 16px; margin: -8px 0 0 -8px; background: var(--accent); box-shadow: 0 0 0 3px #fff, 0 2px 8px rgba(var(--shade-rgb), 0.35); }
/* 화살표: 동그라미 가장자리(13px)에서 먹 점 가장자리(11px)까지 */
.talk .t-line em { position: absolute; top: 50%; left: calc(var(--lo) + 13px); width: calc(var(--hi) - var(--lo) - 24px); height: 3px; margin-top: -1.5px; border-radius: 2px; background: var(--coral); }
.talk .t-line em.t-back { left: calc(var(--lo) + 11px); }
.talk .t-line em::after { content: ""; position: absolute; right: -1px; top: 50%; margin-top: -5px; border-style: solid; border-color: transparent; border-width: 5px 0 5px 8px; border-left-color: var(--coral); }
.talk .t-line em.t-back::after { right: auto; left: -1px; border-width: 5px 8px 5px 0; border-left-color: transparent; border-right-color: var(--coral); }
.talk .t-vr em.t-one { background: var(--chip-off); color: var(--ink-3); }

/* 인생 풀이(운영자 미리보기 시안): 연애 두 칸은 카드 안에, 성격·짝·일·돈 카드의 머리와 작은 한 줄, 질문한 나이대 */
.talk .t-lface .t-face2 { padding: 0; }
.talk .t-lrows .t-rhead { padding: 11px 0 9px; border-bottom: 1px solid rgba(var(--ink-rgb), 0.12); }
.talk .t-lrows .t-rkick { font-size: 12.5px; font-weight: 800; color: var(--label); }
.talk .t-lrows .t-rttl { margin-top: 2px; font: 400 19px/1.35 var(--font-title); color: var(--ink); word-break: keep-all; }
.talk .t-lrows .t-sub { margin-top: 3px; font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--ink-3); word-break: keep-all; }
.talk .t-lrows .t-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.talk .t-lrows .t-r .t-k { width: 76px; word-break: keep-all; line-height: 1.35; }
.talk .t-lrows .t-chips span { padding: 3px 9px 4px; border-radius: 999px; background: var(--accent-weak); color: var(--accent-d); font-size: 12.5px; font-weight: 800; }
.talk .t-decades li.t-asked { background: var(--accent-weak); border: 1.5px solid var(--accent); box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.18); opacity: 1; }
.talk .t-decades li.t-asked:not(.t-group) span, .talk .t-decades .t-dsub.t-asked span { color: var(--accent-d); font-weight: 800; }
.talk .t-decades .t-dsub.t-asked { opacity: 1; }