/* ---------- 결과 화면: 옆으로 넘기는 카드 일곱 장 ----------
   카드 틀(바탕 그림과 그늘, 넘길 때 깊이감, 장마다 들어오는 차례)은 내손내운 결과 화면(content/insaeng/result.css)에서 옮겼습니다.
   첫 화면 쪽 style.css와 함께 불러오므로 그쪽 이름(.top·.brand·.kicker·.talk·.line·.step·.hero·.page)은 쓰지 않습니다. */

.r-body { overflow: hidden; overscroll-behavior: none; }

.app {
  --ink: var(--meok);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --turn: 0.55s;   /* 한 장 넘기는 시간 */
  position: relative;
  max-width: 480px;
  height: 100vh;
  height: 100svh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--paper);
  font-family: var(--font-ui);
}

/* 다른 브라우저로 돌아와 결제를 확인하지 못했을 때 한 줄 */
.r-fail { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; margin: 0; padding: 0 32px; text-align: center; color: var(--meok-3); font: 700 16px/1.6 var(--font-ui); word-break: keep-all; }
.r-fail > p { margin: 0; }
.r-fail > .cta { width: min(100%, 240px); margin-top: 20px; }   /* 결제를 확인하지 못했을 때 다시 확인 단추 */

.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;
}

/* ---------- 위: 장 막대와 글씨 로고 ---------- */

.r-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(38, 33, 30, 0.13); }
.bars i::after { content: ""; position: absolute; inset: 0; background: var(--acc-text); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--turn) var(--ease-out); }
.bars i.on::after { transform: none; }
/* 로고만 눌려 홈페이지로 갑니다(머리 줄은 카드 넘기기를 막지 않게 눌리지 않음) */
.r-brand { display: flex; width: fit-content; align-items: center; gap: 4px; padding: 11px 20px 0; pointer-events: auto; -webkit-tap-highlight-color: transparent; }
.r-brand .logo { height: 20px; }

/* ---------- 카드 여섯 장을 옆으로 나란히 ---------- */

/* 손가락이나 마우스로 넘기므로 글씨·그림이 잡히거나 길게 눌러 그림 메뉴가 뜨지 않게 합니다 */
.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; }
/* 끄는 동안은 손가락을 바로 따라가고, still은 움직이지 않고 건너뜁니다(주소로 바로 열 때) */
.stage.dragging .track, .stage.dragging .card::before, .stage.dragging .card::after,
.stage.still .track, .stage.still .card::before, .stage.still .card::after, .stage.still .bars i::after { transition: 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(--paper);
  overflow: hidden;
  /* 덩어리 사이 간격: 높이 641px 휴대폰에서 16px쯤, 긴 휴대폰에서 22px까지 */
  --gap: clamp(12px, 2.5vh, 22px);
  --gap: clamp(12px, 2.5svh, 22px);
}

/* 바탕 그림(꽃집)은 한지빛으로 아주 옅게 덮고 색을 조금 빼서 글이 잘 읽히게 합니다. --off는 지금 보는 장에서 몇 장 떨어졌는지(result.js): 그림은 카드보다 느리게 움직여 깊이감이 나고,
   보는 동안에는 아주 천천히 다가옵니다 */
.card::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(251, 246, 238, 0.86) 0%, rgba(251, 246, 238, 0.8) 40%, rgba(251, 246, 238, 0.93) 100%),
    var(--bg, none) center / cover no-repeat;
  filter: saturate(0.7);
  translate: calc(var(--off, 0) * -38%) 0;
  scale: 1.06;
  transition: translate var(--turn) var(--ease-out);
  animation: drift 28s ease-in-out infinite alternate paused;
  pointer-events: none;
}
.card.current::before { animation-play-state: running; }
@keyframes drift { from { scale: 1.06; } to { scale: 1.13; } }
/* 떠나는 장은 바탕색으로 흐려집니다(--shade, 보는 장은 0) */
.card::after {
  content: "";
  position: absolute; inset: 0; z-index: 3;
  background: var(--paper);
  opacity: var(--shade, 0);
  transition: opacity var(--turn) var(--ease-out);
  pointer-events: none;
}

.card > * { position: relative; }
/* 긴 휴대폰: 그림이 다 커진 뒤 남는 자리는 맨 위와 맨 아래에 나눕니다(2~4장과 좋은 날은 마지막 덩어리 아래, 다음 장 한 줄은 카드 바닥에 떠 있음) */
.card > :first-child { margin-top: auto; }
:is(.c-love, .c-mind, .c-open, .c-day) > :last-child:not(.next),
:is(.c-love, .c-mind, .c-open, .c-day) > :nth-last-child(2):has(+ .next) { margin-bottom: auto; }

/* ---------- 큰 제목 ---------- */

.title { flex: none; margin: 0 20px; text-align: center; font: 700 25px/1.3 var(--font-title); color: var(--meok); letter-spacing: -0.5px; word-break: keep-all; text-wrap: balance; }
.card > .title { align-self: center; max-width: 290px; }

.type-head { flex: none; position: relative; text-align: center; }
.kick { margin: 0 20px; font-size: 13px; font-weight: 700; letter-spacing: 0.3px; color: var(--meok-3); }
.type-head .title { margin-top: 4px; }

/* ---------- 손 그림과 판독한 선 ---------- */

.art {
  position: relative;
  align-self: center;
  flex: 1 1 0;
  min-height: 120px;
  max-height: 380px;
  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%);
}
/* 2:3 그림이 상자 높이의 1.125배라서 소매는 흐려지는 곳 아래로 빠집니다 */
.art-in { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 2 / 3; }
/* 오른손은 뒤집어 저장한 그림 파일과 뒤집은 선 좌표를 씁니다(CSS로 뒤집지 않음) */
.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(196, 149, 47, 0.6); stroke-width: 8; filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9)); }
.art .l-gold { stroke: var(--pa); 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(--pb); 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 var(--pa-line);
  color: var(--pa-text);
  box-shadow: 0 2px 8px rgba(60, 40, 20, 0.12);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.tag.pink { border-color: var(--pb-line); color: var(--pb-text); }

/* 이 장의 선을 가까이 보여 주는 창 */
.art.lens {
  flex: 1 1 0; aspect-ratio: 4 / 3; min-height: 96px; max-height: 250px; margin: var(--gap) 0 0;
  border-radius: 22px; overflow: hidden; -webkit-mask-image: none; mask-image: none;
  background: var(--paper-2);
  box-shadow: 0 0 0 1px var(--line-b), 0 6px 22px rgba(60, 40, 20, 0.1);
}
.art.lens::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 18px 4px rgba(251, 246, 238, 0.5); pointer-events: none; }
.art-z { position: absolute; inset: 0; transform-origin: 0 0; }

/* ---------- 1장: 궁합 이름 공개 ---------- */

.type-head .nowrap { white-space: nowrap; }
.c-intro .type-head .title { font-size: 28px; }
.stamp { display: inline-block; width: auto; height: 32px; margin-left: 6px; vertical-align: -4px; transform: rotate(-12deg); opacity: 0.92; }
.score { margin: 6px 20px 0; font-size: 14px; font-weight: 800; color: var(--meok-2); }
.score b { margin: 0 2px 0 4px; font: 700 26px/1 var(--font-title); color: var(--acc-text); vertical-align: -2px; }
.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: var(--acc-soft); border: 1px solid var(--acc-line); color: var(--acc-text); font-size: 13px; font-weight: 800; }

/* 두 사람 손을 나란히(손바닥이 닿을 듯 말 듯). 상자 비율은 그림 비율(--ar, result.js pairArt)이라 손이 늘어나지 않습니다.
   높이는 남는 자리만큼 커지되 카드 폭을 넘지 않습니다. 두 손 감정선 끝을 붉은 실로 잇고 실 가운데에 하트 매듭을 답니다. */
.pair-wrap {
  position: relative; flex: 1 1 0; align-self: center;
  aspect-ratio: var(--ar);
  min-height: 150px;
  max-height: min(350px, calc(min(100vw, 480px) / var(--ar)));
  margin: var(--gap) 0 0;
}
/* align-self를 normal로 되돌려야 절대 위치 상자가 inset 0으로 늘어납니다(center면 높이가 0으로 줄어듦) */
.art.pair { position: absolute; inset: 0; align-self: normal; margin: 0; min-height: 0; max-height: none; aspect-ratio: auto; }
.art.pair .art-in { aspect-ratio: auto; }
.pair-thread { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pair-thread .thread { fill: none; stroke: #e0405f; stroke-width: 13; stroke-linecap: round; filter: drop-shadow(0 0 2px #fff) drop-shadow(0 2px 8px rgba(224, 64, 95, 0.45)); }
.pair-thread .thread.core { stroke: #ffc2cf; stroke-width: 4; filter: none; }
.pair-thread .knot { fill: #e8607c; filter: drop-shadow(0 0 3px #fff); transform-box: fill-box; transform-origin: center; }
.pair-thread .knot-heart { fill: #e0405f; stroke: #fff; stroke-width: 1.4; filter: drop-shadow(0 2px 6px rgba(224, 64, 95, 0.5)); transform-box: fill-box; transform-origin: center; }
.pair-names { position: absolute; left: 0; right: 0; bottom: 5%; height: 0; }
.pair-names .tag { top: auto; bottom: 0; transform: translateX(-50%); padding: 4px 11px; font-size: 13px; }

/* 1장 넘김 안내(손 그림 아래): 장식 없는 글씨가 한 글자씩 뒤집힙니다(세 번 뒤 멈춤). 긴 휴대폰에서는 남는 자리
   가운데 쪽으로 올립니다 */
.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, 40px)); }
.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(--meok-2);
  -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; }

/* ---------- 2·3장: 두 사람 칸(선을 가까이 본 창, 이름, 한마디) ---------- */

.duo { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: var(--gap) 18px 0; }
.duo-col { min-width: 0; display: flex; flex-direction: column; }
.duo .art.lens { flex: none; width: 100%; min-height: 0; max-height: none; margin: 0; border-radius: 18px; }
/* 2·3장 두 창은 남는 자리만큼 세로로 커집니다(칸 폭의 1.5배 높이까지, 짧은 화면에서는 80px까지 줄어듦).
   칸을 두 줄 격자로 놓아 두 창 높이와 두 한마디 칸 높이가 늘 같습니다(한마디가 두 줄인 쪽이 있어도). 창 속 손은 실제 창 비율로 다시 맞춥니다(common.js handArt) */
:is(.c-love, .c-mind) > .duo {
  flex: 0 1 auto; min-height: 0; grid-auto-flow: column; row-gap: 8px;
  grid-template-rows: minmax(80px, calc((min(100vw, 480px) - 44px) / 2 * 3 / 2)) auto;
}
:is(.c-love, .c-mind) > .duo > .duo-col { display: contents; }
:is(.c-love, .c-mind) > .duo .art.lens { align-self: stretch; height: auto; aspect-ratio: auto; }
:is(.c-love, .c-mind) > .duo .side { margin-top: 0; }
.duo-col.pb .art.lens { box-shadow: 0 0 0 1px var(--pb-line), 0 6px 22px rgba(60, 40, 20, 0.1); }
.lens-name { position: absolute; z-index: 2; left: 8px; top: 8px; padding: 3px 9px; border-radius: 999px; background: #fff; border: 1px solid var(--pa-line); color: var(--pa-text); font-size: 12px; font-weight: 800; white-space: nowrap; }
.pb .lens-name { border-color: var(--pb-line); color: var(--pb-text); }
/* 칸 안의 글은 가운데에 둬서 한 줄 이름과 두 줄 이름이 같아 보입니다 */
.side { flex: 1; display: flex; flex-direction: column; justify-content: center; margin-top: 8px; padding: 9px 8px; border-radius: 14px; text-align: center; }
.side small { display: block; font-size: 11.5px; font-weight: 700; opacity: 0.85; word-break: keep-all; }
.side b { display: block; margin-top: 2px; font: 700 15.5px/1.3 var(--font-title); letter-spacing: -0.3px; word-break: keep-all; }
.side .nb { white-space: nowrap; }
.pa .side { background: var(--pa-soft); border: 1px solid var(--pa-line); color: var(--pa-text); }
.pb .side { background: var(--pb-soft); border: 1px solid var(--pb-line); color: var(--pb-text); }

/* 2장 '둘이 사귀면': 체크 상자 세 줄 */
.ticks { flex: none; align-self: center; display: grid; gap: 8px; margin: var(--gap) 16px auto; padding: 16px 22px; border-radius: 18px; background: rgba(255, 255, 255, 0.8); border: 1px solid var(--line-b); }
.ticks-h { margin: 0; font-size: 12.5px; font-weight: 800; color: var(--acc-text); }
.ticks ul { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.ticks li { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--meok); word-break: keep-all; }
.ticks .box { flex: none; width: 22px; height: 22px; border-radius: 7px; background: var(--acc); 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장 막대 둘(내손내운 결과 2장과 같은 막대): 금색 점은 앞사람, 분홍 동그라미는 뒷사람(같은 자리면 겹침) */
.scales { flex: none; display: grid; gap: 10px; margin: var(--gap) 18px 0; padding: 11px 14px 13px; border-radius: 16px; background: rgba(255, 255, 255, 0.8); border: 1px solid var(--line-b); }
.legend { display: flex; justify-content: center; gap: 14px; font-size: 12px; font-weight: 800; color: var(--meok-2); }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.mk { display: inline-block; flex: none; width: 11px; height: 11px; border-radius: 50%; }
.pa .mk { background: var(--pa); }
.pb .mk { box-shadow: inset 0 0 0 2px var(--pb); }
.scale-h { display: block; margin-bottom: 4px; font-size: 12.5px; font-weight: 800; color: var(--meok-2); }
.scale-track { display: grid; grid-template-columns: 50px 1fr 50px; align-items: center; gap: 8px; }
.scale-track span { font-size: 13px; font-weight: 800; color: var(--meok); white-space: nowrap; }
.scale-track span:last-child { text-align: right; }
.scale-line { position: relative; height: 8px; border-radius: 99px; background: linear-gradient(90deg, rgba(196, 149, 47, 0.3), rgba(208, 88, 122, 0.3)); }
.scale-line i { position: absolute; top: 50%; border-radius: 50%; }
.scale-line .dot-b { width: 26px; height: 26px; margin: -13px 0 0 -13px; box-shadow: inset 0 0 0 2.5px var(--pb), 0 0 0 2px #fff; }
.scale-line .dot-a { width: 16px; height: 16px; margin: -8px 0 0 -8px; background: var(--pa); box-shadow: 0 0 0 3px #fff; }

/* ---------- 4장: 서로 마음 여는 법(사람마다 감정선 창, 부탁, 성향) ---------- */

/* 사람마다 칸 하나: 감정선을 가로로 길게 본 창(칸 폭을 다 쓰고 높이는 폭의 절반까지) 아래에 부탁과 성향.
   창 높이가 남는 자리만큼 커져서 휴대폰 길이와 상관없이 칸 둘이 카드를 채웁니다(창 속 손은 실제 창 비율로 다시 맞춤) */
.opens { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 12px; margin: var(--gap) 18px 0; padding: 0; list-style: none; }
.open-row { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 10px 10px 14px; border-radius: 20px; background: rgba(255, 255, 255, 0.82); border: 1px solid var(--pa-line); text-align: center; }
.open-row.pb { border-color: var(--pb-line); }
.open-row .art.lens { flex: 1 1 0; align-self: stretch; aspect-ratio: auto; min-height: 56px; max-height: calc((min(100vw, 480px) - 56px) / 2); margin: 0; border-radius: 14px; }
.open-row.pb .art.lens { box-shadow: 0 0 0 1px var(--pb-line), 0 6px 18px rgba(60, 40, 20, 0.1); }
.open-tx { flex: none; min-width: 0; padding: 0 8px; }
.oh { margin: 0; font-size: 12.5px; font-weight: 800; color: var(--pa-text); }
.pb .oh { color: var(--pb-text); }
.oa { margin: 3px 0 0; font: 700 18px/1.35 var(--font-title); letter-spacing: -0.3px; color: var(--meok); word-break: keep-all; text-wrap: balance; }
.ot { margin: 5px 0 0; font-size: 13.5px; font-weight: 600; line-height: 1.45; color: var(--meok-3); word-break: keep-all; }
/* 두 사람 감정선 유형이 같을 때: 한 칸에 두 사람 창(2장·3장처럼 나란히, 이름표)과 그 아래 글 한 번. 칸은 늘이지 않고 가운데에 둡니다 */
.opens.one { flex: 0 1 auto; }   /* 칸이 다 커지고 남는 자리는 2·3장처럼 제목 위와 칸 아래에 나눔 */
.open-row.same { flex: 0 1 auto; gap: 12px; padding: 12px 12px 16px; border-color: var(--line-b); }
.open-row .duo { width: 100%; margin: 0; }
.open-row .duo .art.lens { flex: none; aspect-ratio: 1 / 1; min-height: 0; max-height: none; border-radius: 14px; }
/* 같은 칸의 두 창도 남는 자리만큼 세로로 커집니다(창 폭의 1.5배 높이까지, 짧은 화면에서는 80px까지 줄어듦) */
.open-row.same .duo { flex: 0 1 auto; min-height: 0; grid-template-rows: minmax(80px, calc((min(100vw, 480px) - 70px) / 2 * 3 / 2)); }
.open-row.same .duo .art.lens { flex: 1 1 0; height: auto; aspect-ratio: auto; }
.open-row.same .oh { color: var(--meok-2); }

/* ---------- 각 장 아래 다음 장으로 이끄는 한 줄 ---------- */

.next {
  position: absolute; left: 0; right: 0;
  bottom: calc(max(10px, env(safe-area-inset-bottom)) + 10px);
  margin: 0;
  text-align: center;
  color: var(--meok-3);
  font-size: 12.5px;
}
.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); } }

/* ---------- 4장 뒤: 두 분 다음 좋은 날(연애손금 결과 4장 도장과 같은 짜임, 색은 궁합손금 인주색) ---------- */

/* 도장은 제목·날짜·자물쇠 칸을 놓고 남는 자리(.dday-room)를 채웁니다: 그 자리에 드는 가장 큰 원(340px까지, 테두리 몫 24px을 뺌, 연애손금 4장과 같음) */
.c-day .dday-room { flex: 1 1 0; min-height: 150px; align-self: stretch; display: grid; place-items: center; margin: var(--gap) 18px 0; container-type: size; }
.c-day .type-head + .dday-room { margin-top: 18px; }
.c-day .dday {
  --dd: clamp(124px, 21vh, 200px); --dd: clamp(124px, 21svh, 200px);
  display: grid; place-items: center; width: var(--dd); height: var(--dd); border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 3px var(--acc), 0 0 0 9px #fff, 0 0 0 10.5px color-mix(in srgb, var(--acc) 55%, transparent), 0 10px 28px rgba(60, 40, 20, 0.12);
}
@supports (width: 1cqh) { .c-day .dday { --dd: min(100cqh - 24px, 100cqw - 24px, 340px); } }
.c-day .dday .title { margin: 0; font-size: calc(var(--dd) * 0.27); line-height: 1.1; letter-spacing: -1px; color: var(--acc-text); }
.c-day .dday .title.on-date { font-size: calc(var(--dd) * 0.15); line-height: 1.3; letter-spacing: 0; text-align: center; }   /* 지난 날: 흐린 날짜 두 줄 */
.c-day .dday-date {
  flex: none; align-self: center; margin: 18px 18px 0; padding: 7px 16px; border-radius: 999px; background: color-mix(in srgb, #fff 80%, var(--acc));
  color: var(--acc-text); font: 800 15px/1.35 var(--font-ui); text-align: center; word-break: keep-all;
}
.c-day .gd-lock {
  flex: none; align-self: center; display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 12px 18px 0;
  padding: 9px 18px; border-radius: 16px; background: rgba(255, 255, 255, 0.8); border: 1px solid var(--line-b);
}
.c-day .gd-row { display: flex; align-items: baseline; gap: 10px; }
.c-day .gd-k { font-size: 13px; font-weight: 800; color: var(--meok-3); }
.c-day .gd-v { font: 400 20px/1.2 var(--font-title); color: var(--meok); }
.c-day .gd-lkw {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 2px 8px rgba(60, 40, 20, 0.16); color: var(--meok); font-size: 12px; font-weight: 800; white-space: nowrap;
}
.c-day .gd-lkw svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.blur { display: inline-block; filter: blur(4.5px); }   /* [[ ]] 안 흐리게 가린 글자 */
.c-day .dday .blur { filter: blur(0.16em); }   /* 결제 전 도장 속 큰 글자는 글씨 크기에 맞춰 더 흐리게(2026-10-27) */

/* ---------- 5장: 궁합 감정서 ---------- */

/* 화면에도 공유 그림(감정서 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; -webkit-touch-callout: default; }
.card-thumb.ready img { opacity: 1; }
.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%; }
.btns { display: grid; gap: 6px; }
.btns button { height: 40px; border-radius: 10px; border: 0; font-size: 13.5px; font-weight: 800; cursor: pointer; transition: transform 0.18s var(--ease-out), filter 0.18s ease; }
.btns button:active { transform: scale(0.97); filter: brightness(0.94); }
.btns .a { background: var(--acc); color: #fff; }
.btns .b { background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(38, 33, 30, 0.28); color: var(--meok); }
.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; }
}
/* ---------- 6장: 결제(내손내운 결과 6장과 같은 틀) ----------
   질문 넷을 두 줄 두 칸에 두고(고른 칸은 인주색) 그 아래 작은 대화: 고른 질문과 흐리게 가린 언니 답 위 자물쇠. 맨 아래 흰 결제 판에
   값 비교·값 단추·환불 안내·사업자 정보 */
/* 다 들어가지 않는 짧은 화면(가로로 든 휴대폰 568×320 등)에서는 결제 장만 위아래로 밀어 결제 단추·환불 안내·사업자 줄을 볼 수 있게
   합니다. 들어가는 화면에서는 밀리지 않습니다(2026-10-28 리뷰). 바탕 그림 아래끝은 한지빛으로 거의 덮여 밀어도 이음매가 드러나지 않습니다. */
.c-pay { padding-bottom: calc(max(10px, env(safe-area-inset-bottom)) + 4px); }
@media (max-height: 560px) { .c-pay { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; } .c-pay::-webkit-scrollbar { display: none; } }   /* 바탕 그림을 키워 둔 만큼(scale) 긴 화면에서도 조금 밀리므로 짧은 화면에만 */
.c-pay > .title { font-size: 28px; max-width: none; }
/* 제목은 두 단: 윗줄 작게, 아랫줄 크게. 이름은 강조색, **…** 낱말에는 3,900원과 같은 노란 형광펜(result.js payTitle, 인생손금 결과 6장과 같음) */
.c-pay > .title { line-height: 1.25; }
.c-pay > .title .tl1 { display: block; font-size: 0.8em; }
.c-pay > .title .tl2 { display: block; margin-top: 2px; font-size: 1.2em; }
.c-pay > .title .nm { color: var(--acc); }
.c-pay > .title .hl { position: relative; z-index: 0; }
.c-pay > .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, #fde68a); transform: rotate(-2deg) skewX(-14deg); }
.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-b); background: rgba(255, 255, 255, 0.92); color: var(--meok); 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(--acc-text); }
.qs button[aria-pressed="true"] { background: var(--acc); border-color: var(--acc); color: #fff; }
.qs button[aria-pressed="true"]::before { color: rgba(255, 255, 255, 0.75); }
.qs button:active { transform: scale(0.97); }
.live .qs button { animation: rise 0.5s var(--ease-out) calc(var(--t, 0ms) + var(--i) * 70ms) both; }
.ans { flex: none; display: flex; flex-direction: column; gap: 9px; margin: 14px 18px 0; padding: 14px 12px 12px; border-radius: 18px; background: rgba(255, 255, 255, 0.66); border: 1px solid var(--line-b); }
.ans .q { align-self: flex-end; max-width: 80%; margin: 0; padding: 9px 13px; border-radius: 16px 16px 4px 16px; background: var(--acc); color: #fff; 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.css .chat .t-face)과 같은 자르기 */
.ans .av { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #fdf3ec 50% 2px / 155% auto no-repeat; border: 1.5px solid #fff; box-shadow: 0 1px 4px rgba(60, 40, 20, 0.2); }
.ans .b { display: grid; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(60, 40, 20, 0.08); font: 700 13.5px/1.5 var(--font-ui); word-break: keep-all; overflow: hidden; transform-origin: 0 100%; }
.ans .tx, .ans .lkw { grid-area: 1 / 1; }   /* 자물쇠가 흐린 답 위에 얹히고 말풍선은 둘 가운데 넓은 쪽에 맞춥니다 */
.ans .tx { filter: blur(4.5px); }
/* 두 분 좋은 날이 있을 때 때·싸움 답: 이름·개수는 보이고 [[ ]] 자리만 흐리게. 자물쇠는 답 바로 위 줄로(가운데 얹으면 보이는 글을 가림) */
.ans .tx.part { filter: none; }
.ans .b.part { row-gap: 6px; }
.ans .b.part .lkw { grid-area: 1 / 1; justify-items: start; }
.ans .b.part .tx { grid-area: 2 / 1; }
.ans .nb { white-space: nowrap; }
.ans .lkw { display: grid; place-items: center; color: var(--meok); }
.ans .lkw span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 2px 8px rgba(60, 40, 20, 0.16); font-size: 12px; font-weight: 800; white-space: nowrap; }
.ans .lkw svg { width: 13px; height: 13px; 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 { width: 7px; height: 7px; border-radius: 50%; background: #b8aca0; animation: hop 1.1s ease-in-out infinite; }
.ans .dots i:nth-child(2) { animation-delay: 0.15s; }
.ans .dots i:nth-child(3) { animation-delay: 0.3s; }
.ans .cnt { align-self: center; margin: 2px 0 0; font-size: 12px; font-weight: 800; color: var(--meok-3); }
/* 답이 오면 쓰는 중 말풍선이 꼬리에서부터 답 크기로 커지고(result.js pickQuestion) 흐린 답이 더 흐린 데서 나온 뒤 자물쇠가 뜹니다 */
.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 msg-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
@keyframes hop { 0%, 60%, 100% { transform: none; opacity: 0.45; } 30% { transform: translateY(-5px); opacity: 1; } }
@keyframes unblur { from { opacity: 0; filter: blur(12px); } }
@keyframes lock-in { from { opacity: 0; transform: scale(0.94); } }
/* 장 아래 흰 결제 판(result.js paySheet): 값 비교·결제 단추·환불 안내·사업자 줄을 한 판에 모아 위의 질문·대화와 나눕니다(인생손금 결과 6장과
   같음, 사용자 2026-10-31). 판은 장 바닥(아래 여백 자리)까지 내려가 닿고, 남는 높이는 제목 위와 판 위에 반씩 둡니다. */
.c-pay > .ans { margin-bottom: 10px; }
.c-pay > .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(60, 40, 20, 0.3); }
@media (max-height: 720px) { .c-pay > .ans { margin-bottom: 4px; } .c-pay > .pay-sheet { padding-top: 8px; } }
@media (max-height: 680px) { .c-pay > .pay-sheet { padding-top: 6px; } }
@media (max-height: 600px) { .c-pay > .pay-sheet { padding-top: 5px; } }
/* 결제 전 값 비교: 오프라인 칸(연한 회색, 값에 강조색 줄)과 내손내운 칸(흰 바탕·강조색 테두리, 3,900원에 노란 형광펜) 사이에 강조색 붓 화살표 */
.c-pay .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; }
.c-pay .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; }
.c-pay .price-row span { white-space: nowrap; }
.c-pay .price-row span:first-child { font-weight: 700; }
.c-pay .price-row span:last-child { position: relative; font-size: var(--p1); font-weight: 800; line-height: 1.2; }
.c-pay .price-row.own span:first-child { font-weight: 800; }
.c-pay .price-row.own span:last-child { font-size: var(--p2); font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; }
.c-pay .pay-sheet > .price-compare + .cta { margin-top: 12px; }
.c-pay .price-row:not(.own) { background: color-mix(in srgb, var(--ink) 8%, var(--paper)); }
.c-pay .price-row:not(.own) span:last-child { color: color-mix(in srgb, var(--ink) 75%, var(--paper)); text-decoration-line: line-through; text-decoration-color: var(--acc); text-decoration-thickness: 2.5px; }
.c-pay .price-row.own { z-index: 1; border: 2.5px solid var(--acc); background: #fff; }
.c-pay .price-row.own span:last-child { color: var(--acc); font-family: var(--font-title); font-weight: 700; }
.c-pay .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); }
.c-pay .price-row.own::before { content: ''; position: absolute; top: 50%; left: -28px; width: 26px; height: 19px; margin-top: -10px; background: var(--acc); -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) { .c-pay .pay-sheet > .price-compare { --pv: 6px; --fs: 12px; --p1: 15px; --p2: 22px; } .c-pay .pay-sheet > .price-compare + .cta { margin-top: 7px; } }
@media (max-height: 600px) { .c-pay .pay-sheet > .price-compare { --pv: 4px; --p2: 19px; } .c-pay .pay-sheet > .price-compare + .cta { margin-top: 6px; } }
@media (max-width: 359px) { .c-pay .pay-sheet > .price-compare { --fs: 12px; --p1: 14px; } }
.c-pay .pay-sheet > .cta { flex: none; margin-top: 0; }
.c-pay .pay-sheet > .cta:disabled { opacity: 0.7; }
.c-pay .cta.shine::after { animation-play-state: paused; }
.c-pay.current .cta.shine::after { animation-play-state: running; }
/* 결제 단추 움직임: 숨 쉬듯 커졌다 작아지고 붉은 빛 고리가 퍼지며 빛이 자주 지나갑니다(지인 피드백 '결제 단추가 잘 안 보임', 사용자 2026-10-24 G안).
   보고 있는 장에서만 움직이고, 결제창을 여는 동안은 멈춥니다. */
.c-pay .pay-sheet > .cta[data-act="pay"] { animation: pay-pulse 1.6s ease-in-out infinite, pay-ring 1.6s ease-out infinite; }
.c-pay .pay-sheet > .cta[data-act="pay"]::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; }
.c-pay:not(.current) .pay-sheet > .cta[data-act="pay"], .c-pay:not(.current) .pay-sheet > .cta[data-act="pay"]::after, .c-pay .pay-sheet > .cta[data-act="pay"]:disabled, .c-pay .pay-sheet > .cta[data-act="pay"]: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; } }
/* 값 단추 아래: 환불 안내 한 줄(환불 규정 링크) */
.pay-note { flex: none; margin: 8px 0 0; text-align: center; color: var(--meok-3); font-size: 12px; word-break: keep-all; }
.pay-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* 맨 아래 사업자 정보(작은 글씨) */
.c-pay .pay-sheet > .biz { flex: none; margin: 8px 0 0; text-align: center; color: rgba(38, 33, 30, 0.45); font-size: 9.5px; line-height: 1.4; word-break: keep-all; }
.c-pay .pay-sheet > .biz span { white-space: nowrap; }   /* 항목 하나는 중간에서 줄이 바뀌지 않음(070-8098-/8971) */

/* 알림 한 줄(결제를 확인하지 못했을 때 등). 결제 단추 바로 위에 뜹니다(result.js toast) */
.r-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(38, 33, 30, 0.92); border: 0; color: #fff;
  font-size: 14px; font-weight: 600; text-align: center; word-break: keep-all;
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease;
}
.r-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 결제 장 안내 줄 ---------- */

.end-sub { flex: none; margin: 8px 24px 0; text-align: center; font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--meok-2); word-break: keep-all; }

/* ---------- 감정서 크게 보기(길게 눌러 저장) ---------- */

.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(251, 246, 238, 0.97);
  opacity: 0; transition: opacity 0.26s ease;
}
.viewer.open { opacity: 1; }
.viewer:not(.open) { pointer-events: none; }
.viewer img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100% - 50px); 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-note { flex: none; margin: 0; font: 700 14px var(--font-ui); color: var(--meok); text-align: center; }
.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(38, 33, 30, 0.08); color: var(--meok); display: grid; place-items: center; cursor: pointer; }
.viewer-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 장마다 처음 볼 때 한 번 들어오는 움직임(.live) ----------
   1장은 따로(손바닥에 빛이 지나가고 선이 그려지고 붉은 실이 이어진 뒤 궁합 이름이 도장처럼 찍힘). 다른 장은 읽는 차례대로
   들어옵니다(result.js가 덩어리마다 시작 시각 --t를 줌): 큰 제목이 흐림에서 떠오르고, 그림이 자리 잡으며 선이 그려지고,
   그다음 칸들이 들어옵니다. */
@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 heart-pop { 0% { opacity: 0; transform: scale(0.2); } 60% { opacity: 1; transform: scale(1.25); } 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(--meok-2); animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1); }
  12% { color: var(--meok-4); }
  24%, 100% { transform: rotateY(-360deg); color: var(--meok-2); }
}
@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); } }
@keyframes slide-in { from { left: 50%; opacity: 0; } }

/* 아직 안 본 장은 들어올 차례를 기다립니다(끌 때 가장자리에서만 보임) */
.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-in 안). 1장 붉은 실과 하트 매듭은 따로 움직입니다 */
.art.draw .art-in path { stroke-dasharray: 1 1; }
/* 그림이 자리 잡으면 이 장의 선이 그려집니다(두 사람 칸은 앞사람 먼저) */
.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) .duo-col.pb .art.draw .l-gold path, .live:not(.reveal) .duo-col.pb .art.draw .l-pink path { animation-delay: calc(var(--t, 0ms) + 460ms); }
/* 창은 손 전체에서 이 장의 선 쪽으로 다가갑니다 */
.live .art.lens .art-z { animation: push-in 1.3s var(--ease-out) calc(var(--t, 0ms) + 80ms) both; }
.live .duo-col.pb .art.lens .art-z { animation-delay: calc(var(--t, 0ms) + 260ms); }
.live .lens-name { animation: fade-in 0.4s ease calc(var(--t, 0ms) + 900ms) both; }
.live .duo-col.pa .side { animation: rise 0.55s var(--ease-out) calc(var(--t) + 520ms) both; }
.live .duo-col.pb .side { animation: flip-in 0.6s var(--ease-spring) calc(var(--t) + 820ms) both; }

/* 1장: 두 손바닥에 빛 띠가 지나가는 동안(손이 있는 곳만) 선이 그려지고, 붉은 실이 이어진 뒤 하트 매듭이 맺힙니다 */
.reveal .art.draw .art-in::after {
  content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 40%, rgba(255, 232, 170, 0.6) 50%, transparent 60%) 0 100% / 100% 250% no-repeat;
  -webkit-mask: url(assets/hand-art.webp) center / 100% 100% no-repeat; mask: url(assets/hand-art.webp) center / 100% 100% no-repeat;
}
.reveal .art.draw .art-in.mirror::after { -webkit-mask-image: url(assets/hand-art-r.webp); mask-image: url(assets/hand-art-r.webp); }
.reveal.live .art.draw .art-in::after { animation: scan 0.8s ease-in-out both; }
.reveal.live .art.draw .art-in + .art-in::after { animation-delay: 0.12s; }
.reveal.live .art.draw .art-in path { animation: draw 0.45s 0.2s ease-out both; }
.reveal.live .art.draw .art-in .l-pink path { animation-duration: 0.55s; animation-delay: 0.5s; }
.reveal.live .pair-thread .thread { stroke-dasharray: 1 1; animation: draw 0.6s var(--ease-in-out) 0.95s both; }
.reveal.live .pair-thread .knot { animation: pop 0.3s 0.95s both; }
.reveal.live .pair-thread .knot + .knot { animation-delay: 1.45s; }
.reveal.live .pair-thread .knot-heart { animation: heart-pop 0.5s var(--ease-spring) 1.5s both; }
.reveal.live .pair-names .tag { animation: fade-in 0.35s 1.1s both; }
.reveal.live .type-head .kick { animation: fade-in 0.35s 1.25s both; }
.reveal.live .type-head .title { animation: stamp-title 0.45s 1.35s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
.reveal.live .type-head .stamp { animation: stamp-seal 0.35s 1.65s ease-out both; }
.reveal.live .type-head .score { animation: pop 0.3s 1.7s both; }
.reveal.live .type-head .keys li { animation: pop 0.3s calc(1.75s + var(--i) * 0.08s) both; }
.reveal.live > .swipe-cta { animation: fade-in 0.5s 2.15s both; }
.reveal.live .swipe-cta .flip span { animation: flip-letter 2.6s calc(2.8s + var(--i) * 0.055s) 3 both; }

/* 칸이 하나씩 들어오는 덩어리(덩어리의 시작 --t부터) */
.live .ticks-h { animation: rise 0.45s var(--ease-out) var(--t) both; }
.live .ticks li { animation: rise 0.45s var(--ease-out) calc(var(--t) + 140ms + var(--i) * 0.26s) both; }
.live .ticks .box { animation: pop 0.3s calc(var(--t) + 240ms + var(--i) * 0.26s) both; }
.live .ticks .box path { animation: draw 0.25s calc(var(--t) + 390ms + var(--i) * 0.26s) both; }
.live .legend { animation: fade-in 0.4s ease var(--t) both; }
.live .scale { animation: rise 0.45s var(--ease-out) calc(var(--t) + 80ms + var(--i) * 140ms) both; }
.live .scale-line .dot-b { animation: slide-in 0.7s var(--ease-out) calc(var(--t) + 260ms + var(--i) * 140ms) both; }
.live .scale-line .dot-a { animation: slide-in 0.7s var(--ease-out) calc(var(--t) + 380ms + var(--i) * 140ms) both; }
.live .open-row { animation: rise 0.5s var(--ease-out) calc(var(--t) + var(--i) * 300ms) both; }
.live .open-row .art.lens .art-z { animation-delay: calc(var(--t) + 120ms + var(--i) * 300ms); }
.live:not(.reveal) .open-row .art.draw .l-pink path { animation-delay: calc(var(--t) + 320ms + var(--i) * 300ms); }

/* 짧은 휴대폰(예: 아이폰 SE): 글씨와 칸을 줄여 손 그림 자리를 남깁니다 */
@media (max-height: 720px) {
  .title { font-size: 22px; }
  .c-intro .type-head .title { font-size: 25px; }
  .score { margin-top: 4px; }
  .keys { margin-top: 8px; }
  .swipe-cta { padding: 6px 16px; font-size: 16px; }
  .side { padding: 7px 6px; }
  .side b { font-size: 14px; }
  .ticks { gap: 6px; padding: 12px 18px; }
  .ticks ul { gap: 9px; }
  .ticks li { font-size: 14px; }
  .scales { gap: 7px; padding: 9px 12px 11px; }
  .scale-h { margin-bottom: 2px; font-size: 12px; }
  .oa { font-size: 16.5px; }
  .ot { font-size: 12.5px; }
  .open-row { gap: 8px; padding: 8px 8px 11px; }
}
/* 아주 짧은 화면(예: 사파리 안의 아이폰 SE): 간격을 줄여 모든 장이 들어가게 합니다 */
@media (max-height: 600px) {
  .card { --gap: 9px; }
  .art { min-height: 96px; }
  .c-day .dday-room { min-height: 120px; }
}

/* 6장(결제)이 짧은 휴대폰에서도 맨 아래 사업자 줄까지 들어가게 제목·질문 칸·대화 칸을 줄입니다(내손내운 결과 6장과 같음) */
@media (max-height: 720px) {
  .c-pay > .title { font-size: 24px; }
  .c-pay .ans .cnt { display: none; }
  .c-pay .pay-sheet > .biz { margin-top: 6px; font-size: 9px; }
}
@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) {
  .c-pay > .title { font-size: 22px; }
  .c-pay .end-sub { margin-top: 4px; font-size: 13px; }
  .c-pay .pay-sheet > .cta { height: 44px; }
  .pay-note { margin-top: 6px; }
}

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