/* ---------- 연애 풀이 대화 화면(talk.html) ----------
   내손내운 인생 풀이 대화(content/insaeng/result.css의 .talk)에서 옮겨 밝은 한지 화면으로 바꿨습니다. theme.css 다음에 불러오고
   색·글꼴·로고·단추·손 그림은 theme.css 것을 씁니다. 여기에는 이 화면 모양만 두고 .chat 안의 t- 이름만 씁니다
   (감정서 그림 .card-thumb와 크게 보기 .viewer만 결과 화면과 같은 이름: cert.js가 두 화면에 같은 것을 만듦). */

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

.chat {
  position: absolute; z-index: 6; left: 0; right: 0; top: 0; height: 100%; display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(rgba(245, 238, 227, 0.5), rgba(245, 238, 227, 0.5)), url(assets/bg-ivory.webp) center top / cover no-repeat, var(--paper);   /* 상아 한지 결 위에 반투명 한지 막(신년손금 대화와 같음) */
}

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

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

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

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

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

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

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

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

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

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

/* 앞으로 3년 연애 그래프: 이름 → 큰 제목 → 연애 기운 선(큰 기회 띠와 번호, 달마다 점) → 눈금('지금'과 해) → 범례 → 칸 세 줄.
   움직임은 2초 안에 끝나고(선이 그려지고 점이 왼쪽부터 하나씩 뜸), 큰 글씨와 칸은 처음부터 보입니다.
   큰 기회와 연애 기운은 다홍, 조심할 달은 자주(--c-charm), 다음 연애 기운은 금빛입니다. */
.chat .t-lgraph { --lg-num: "Paperlogy", var(--font-ui); --lg-warn: var(--c-charm); padding: 14px 14px 13px; }
.chat .t-lgraph-name { font-size: 12.5px; font-weight: 800; line-height: 1.3; color: var(--red); }
.chat .t-lgraph-big { margin-top: 3px; font: 400 21px/1.25 var(--font-title); letter-spacing: -0.4px; color: var(--ink); word-break: keep-all; text-wrap: balance; }
.chat .t-lgraph-chart { position: relative; margin-top: 8px; }
.chat .t-lgraph-svg { display: block; width: 100%; height: auto; overflow: visible; }
.chat .t-lgraph-f0 { stop-color: var(--red); stop-opacity: 0.14; }
.chat .t-lgraph-f1 { stop-color: var(--red); stop-opacity: 0; }
.chat .t-lgraph-base { stroke: rgba(43, 29, 18, 0.16); }
.chat .t-lgraph-year { stroke: rgba(43, 29, 18, 0.2); stroke-dasharray: 2 3; }
.chat .t-lgraph-band { fill: var(--red); opacity: 0.1; }
.chat .t-lgraph-line {
  fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 1 1; animation: t-draw-tl 0.9s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes t-draw-tl { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.chat .t-lgraph-dot { fill: var(--red); stroke: var(--card); stroke-width: 1.4; opacity: 0.7; }
.chat .t-lgraph-dot.t-big { stroke-width: 2; opacity: 1; }
.chat .t-lgraph-warn { fill: var(--card); stroke: var(--lg-warn); stroke-width: 2; }
.chat .t-lgraph-next { fill: none; stroke: var(--gold); stroke-width: 2.2; transform-box: fill-box; transform-origin: center; animation: t-lgraph-ring 0.9s var(--ease-spring) 1.15s both; }
@keyframes t-lgraph-ring { from { transform: scale(0.3); opacity: 0; } }
.chat .t-lgraph-pop { animation: t-fade 0.35s ease-out both; }
/* 기회 번호: 띠 가운데 위 다홍 동그라미 */
.chat .t-lgraph-no {
  position: absolute; top: 0; width: 15px; height: 15px; display: grid; place-items: center; border-radius: 50%;
  background: var(--red); color: #fff; font: 800 10px/1 var(--lg-num);
}
.chat .t-lgraph-axis { position: relative; height: 16px; margin-top: 4px; }
.chat .t-lgraph-axis span {
  position: absolute; top: 0; transform: translateX(-50%); font-family: var(--lg-num); font-weight: 600; font-size: 11px; line-height: 1.2;
  color: var(--ink-3); white-space: nowrap;
}
.chat .t-lgraph-axis span.t-now { left: 0; transform: none; font-family: var(--font-ui); font-weight: 800; color: var(--red-2); }
/* 범례와 칸 앞 표시: 그림과 같은 모양(다홍 띠 속 점, 다홍 점, 빈 자주 점, 금빛 고리) */
.chat .t-lgraph-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: 11.5px; font-weight: 700; line-height: 1.3; color: var(--ink-2); }
.chat .t-lgraph-legend span { display: inline-flex; align-items: center; gap: 5px; }
.chat .t-lgraph-legend i, .chat .t-lgraph-ck i { flex: none; display: inline-block; border-radius: 50%; }
.chat .t-lg-band, .chat .t-chance .t-lgraph-ck i {
  width: 12px; height: 11px; border-radius: 2px;
  background: radial-gradient(circle, var(--red) 2.4px, transparent 2.9px), color-mix(in srgb, var(--red) 14%, transparent);
}
.chat .t-lg-dot { width: 6px; height: 6px; background: var(--red); opacity: 0.7; }
.chat .t-lg-warn, .chat .t-caution .t-lgraph-ck i { width: 8px; height: 8px; box-shadow: inset 0 0 0 1.8px var(--lg-warn); }
.chat .t-next .t-lgraph-ck i { width: 10px; height: 10px; box-shadow: inset 0 0 0 2px var(--gold); background: radial-gradient(circle, var(--red) 1.8px, transparent 2.3px); }
/* 칸 세 줄: 이름은 왼쪽(그 표시 색), 때는 오른쪽 굵게 */
.chat .t-lgraph-cells { margin-top: 10px; padding-top: 2px; border-top: 1px solid var(--rule); }
.chat .t-lgraph-cell { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-top: 7px; }
.chat .t-lgraph-ck { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; line-height: 1.3; color: var(--ink-2); }
.chat .t-lgraph-cell b { min-width: 0; text-align: right; font-family: var(--lg-num); font-weight: 700; font-size: 14px; line-height: 1.3; letter-spacing: -0.3px; color: var(--ink); word-break: keep-all; }
.chat .t-next .t-lgraph-ck { color: #94661a; }
.chat .t-chance .t-lgraph-ck { color: var(--red); }
.chat .t-caution .t-lgraph-ck { color: var(--lg-warn); }

/* 줄 카드: 머리말 → 큰 제목·작은 한 줄·#태그 → 줄마다 이름과 값(때는 금빛, 조심할 점은 다홍) */
.chat .t-rows-card { padding: 4px 14px; }
.chat .t-rhead { padding: 11px 0 9px; border-bottom: 1px solid var(--rule); }
.chat .t-rkick { font-size: 12.5px; font-weight: 800; color: var(--purple); }
.chat .t-rttl { margin-top: 2px; font: 400 19px/1.35 var(--font-title); color: var(--ink); word-break: keep-all; }
.chat .t-rows-card .t-sub { margin-top: 3px; font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--ink-2); word-break: keep-all; }
.chat .t-rows-card .t-r { display: flex; gap: 10px; padding: 8px 0; border-top: 1px dashed rgba(43, 29, 18, 0.16); align-items: baseline; }
.chat .t-rows-card .t-rhead + .t-r { border-top: 0; }
.chat .t-rows-card .t-k { flex: none; width: 76px; font-size: 12px; font-weight: 800; line-height: 1.35; color: var(--purple); word-break: keep-all; }
.chat .t-rows-card .t-v { min-width: 0; font-size: 14.5px; font-weight: 700; line-height: 1.45; word-break: keep-all; text-wrap: balance; }
.chat .t-rows-card .t-r.t-when .t-k { color: #94661a; }
.chat .t-rows-card .t-r.t-warn .t-k { color: var(--red); }

/* 마무리 정리 카드 */
.chat .t-sum { width: min(314px, calc(100vw - 74px)); }
.chat .t-sum-h { font-size: 15px; font-weight: 800; color: var(--purple); margin-bottom: 6px; }
.chat .t-sum-r { display: flex; gap: 10px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--rule); }
.chat .t-sum-r span { flex: none; width: 86px; font-size: 13px; color: var(--ink-3); word-break: keep-all; }
.chat .t-sum-r b { min-width: 0; font-weight: 800; word-break: keep-all; text-wrap: balance; }

/* 결제 뒤 감정서 카드(정리 카드 뒤): 이름 → 감정서 그림(결과 5장과 같은 그림, 1080 × 1920) → 스토리에 올리기·저장 단추.
   그림은 다 그려지면 나타나고 길게 눌러 저장할 수 있습니다. 단추 색은 결과 5장 단추와 같습니다(다홍 면, 흰 면에 테두리). */
.chat .t-cert { width: min(260px, calc(100vw - 74px)); padding: 9px 10px 10px; }
.chat .t-cert-h { padding: 2px 4px 8px; font-size: 15px; font-weight: 800; color: var(--purple); }
.chat .t-cert .card-thumb { position: relative; aspect-ratio: 1080 / 1920; }
.chat .t-cert .card-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 6px; opacity: 0; transition: opacity 0.4s ease; -webkit-touch-callout: default; }
.chat .t-cert .card-thumb.ready img { opacity: 1; }
.chat .t-share { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; margin-top: 10px; }
.chat .t-share button {
  height: 40px; padding: 0 6px; border: 0; border-radius: 999px; font: 800 14px var(--font-ui); white-space: nowrap; cursor: pointer;
  transition: transform 0.18s var(--ease-out), filter 0.18s ease;
}
.chat .t-share button:active { transform: scale(0.96); filter: brightness(0.94); }
.chat .t-share .t-share-a { background: var(--red); color: #fff; box-shadow: 0 4px 12px rgba(179, 38, 46, 0.22); }
.chat .t-share .t-share-b { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(43, 29, 18, 0.22); }
.chat .t-share > :only-child { grid-column: 1 / -1; }   /* 인스타 앱 안에서는 저장 단추 하나만 있어 줄 전체를 씁니다. */

/* 감정서 크게 보기(공유도 내려받기도 안 되는 곳에서 길게 눌러 저장, cert.js shareCert). 결과 화면(result.css .viewer)과 같은 모양 */
.t-body .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: rgba(245, 238, 227, 0.97);
  opacity: 0; transition: opacity 0.26s ease;
}
.t-body .viewer.open { opacity: 1; }
.t-body .viewer:not(.open) { pointer-events: none; }
.t-body .viewer img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100% - 50px); border-radius: 6px; box-shadow: var(--shadow); transform: translateY(18px) scale(0.94); transition: transform 0.5s var(--ease-out); -webkit-user-select: none; user-select: none; -webkit-touch-callout: default; }
.t-body .viewer.open img { transform: none; }
.t-body .viewer-note { flex: none; margin: 0; font: 700 14px var(--font-ui); color: var(--ink); text-align: center; }
.t-body .viewer-x { position: absolute; top: calc(max(10px, env(safe-area-inset-top)) + 2px); right: 12px; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: rgba(43, 29, 18, 0.08); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.t-body .viewer-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

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

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

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

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


/* 결제 뒤: 두 손 다음에 무료 4장에서 잠근 값을 푼 카드 */
.t-open { --gd:#8f6a1e;width:min(314px,calc(100vw - 74px));padding:18px 14px 16px;border-radius:18px;background:var(--card);text-align:center;box-shadow:0 0 0 1px var(--rule),var(--shadow-sm); }
.t-open .o-title { margin:0;font:700 22px/1.3 var(--font-title);color:var(--ink);letter-spacing:-.3px; }
.t-open .o-dd { display:grid;place-items:center;width:160px;height:160px;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 color-mix(in srgb,var(--gold) 55%,transparent),0 6px 18px rgba(74,46,24,.08); }
.t-open .o-dd p { margin:0;font:700 40px/1.1 var(--font-title);letter-spacing:-1px;color:var(--ink); }
.t-open .o-date { display:inline-flex;align-items:center;gap:.32em;margin:18px 0 0;padding:8px 16px;border-radius:999px;background:var(--gold-soft);color:var(--gd);font:800 16px/1.35 var(--font-ui);white-space:nowrap; }
.t-open .lk { display:inline-block;flex:none;width:1em;height:1em;color:var(--gd); }
.t-open .years { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0 0; }
.t-open .years.n1 { grid-template-columns:1fr; }
.t-open .yr-box { display:flex;flex-direction:column;align-items:center;gap:4px;padding:11px 6px;border-radius:14px;background:#fff;box-shadow:0 4px 14px rgba(74,46,24,.06); }
.t-open .yr-box small { font-size:12px;font-weight:800;word-break:keep-all; }
.t-open .yr-box b { display:inline-flex;align-items:center;gap:.2em;font:700 20px/1.25 var(--font-title);letter-spacing:-.3px; }
.t-open .yr-box b .lk { width:.78em;height:.78em;color:inherit; }
.t-open .yr-box.love { color:#b4383c;border:1px solid rgba(194,59,59,.3); }
.t-open .yr-box.mar { color:var(--gd);border:1px solid rgba(183,134,44,.42); }

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