/* 로딩부터는 뒤 물결·꽃잎 캔버스를 걷는다 (10/28) — 바탕 분홍(.stage 배경)만 */
.stage.calm .fx { opacity: 0; transition: opacity .9s ease; }

/* 천희관 로딩 화면 (2026-10-28) — 2안 맑은 유리와 같은 재질. 색은 먹·장미·흰 유리 셋, 가장 센 연결만 H-1 장미 그라데이션 */
.ld { width: 100%; display: flex; flex-direction: column; align-items: center; padding-top: 22px; }
.ld-top { width: 100%; max-width: 300px; text-align: center; margin-top: 24px; transition: opacity .6s ease; }   /* 그 사람 카드 아래 (10/28) */
.ld.done .ld-top { opacity: 0; }
.ld.gone .ld-top { display: none; }
.ld-s { font: 700 18px/1.5 "Gowun Batang", serif; color: var(--ink); text-shadow: 0 1px 12px rgba(255,255,255,.8); min-height: 27px; }
.ld-s.sw { animation: ldSw .45s ease both; }
@keyframes ldSw { from { opacity: 0; translate: 0 6px; } }
.ld-bar { height: 2px; margin: 12px auto 0; width: 150px; border-radius: 2px; background: rgba(255,255,255,.6); overflow: hidden; }
.ld-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #c2477a, #ee8f9a); transition: width 11s linear; }

/* 사주판 두 장 — 위가 나, 아래가 그 사람. 칸은 시·일·월·년 */
.ld-wrap { position: relative; width: 100%; max-width: 300px; }
.ld-svg { position: absolute; left: 0; top: 0; z-index: 0; overflow: visible; pointer-events: none; }
.ld-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-bottom: 5px; text-align: center;
           font: 500 11.5px "Noto Sans KR", sans-serif; color: rgba(70,32,45,.5); }
/* 두 사람 카드 — 따로 떨어진 유리 카드 두 장 (10/28). 사이 빈 곳에만 선이 지나간다 */
.bd { position: relative; z-index: 1; padding: 12px 12px 14px; border-radius: 20px;
      background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.8);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 16px 34px -22px rgba(150,50,85,.4);
      -webkit-backdrop-filter: blur(8px) saturate(1.4); backdrop-filter: blur(8px) saturate(1.4);
      opacity: 0; translate: 0 10px; transition: opacity .7s ease, translate .7s cubic-bezier(.2,.7,.2,1); }
.bd.in { opacity: 1; translate: 0 0; }
/* 재회 (10/31): 반딧불이가 닿은 점에서 판이 피어난다 — 작게 시작해 한 번 커지고 멈춘다 */
.ld.morph .bd { translate: 0 0; scale: .35; transition: opacity .6s ease, scale .9s cubic-bezier(.2,.8,.2,1); }
.ld.morph .bd.in { scale: 1; }
.bd.B { margin-top: 96px; }
.bd-h { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 0 2px 8px; }
.bd-h b { font: 700 15px "Gowun Batang", serif; color: var(--ink); }
.bd-h span { font: 400 11.5px "Noto Sans KR", sans-serif; color: rgba(70,32,45,.5); }
.bd-g { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.bx { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 52px; border-radius: 12px;
      background: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.9); box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
      -webkit-backdrop-filter: blur(6px) saturate(1.4); backdrop-filter: blur(6px) saturate(1.4);
      opacity: 0; scale: .9; transition: opacity .6s ease, scale .6s cubic-bezier(.2,.8,.2,1), background 1.4s ease, border-color 1.4s ease, box-shadow 1.6s ease; }
/* 물듦 — 그라데이션은 바로 바뀌어 툭 튀므로(10/28 "어색해"), 위에 깐 장미 판의 투명도만 천천히 올린다 */
.bx::before { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity 1.6s cubic-bezier(.4,0,.2,1);
              background: linear-gradient(135deg, #c2477a 0%, #db6a8c 55%, #ee8f9a 100%); }
.hh, .hk { position: relative; }
.bx.in { opacity: 1; scale: 1; }
.hh { font: 700 25px/1 "Noto Serif KR", "Gowun Batang", serif; color: var(--ink); transition: color 1.4s ease; }
.hk { margin-top: 5px; font: 500 11px/1 "Noto Sans KR", sans-serif; color: rgba(70,32,45,.5); transition: color 1.4s ease; }
.bx.q { background: rgba(255,255,255,.16); border-style: dashed; border-color: rgba(255,255,255,.85); }
.bx.q .hh { color: rgba(70,32,45,.25); font-family: "Gowun Batang", serif; font-size: 20px; }
/* 1단계 물듦 — 옅은 장미 (궁합 보는 중) */
.bx.soft { background: rgba(244,170,190,.42); border-color: rgba(219,106,140,.45); }
.bx.soft .hh { color: #8e2f50; }
/* 2단계 — H-1 장미 판이 천천히 차오르고, 칸이 한 번만 살짝 숨 쉬듯 커졌다 돌아온다 */
.bx.hit { border-color: rgba(255,255,255,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 12px 24px -12px rgba(200,70,110,.75);
          animation: breathe 1.6s cubic-bezier(.4,0,.2,1) both; }
.bx.hit::before { opacity: 1; }
.bx.hit .hh, .bx.hit .hk { color: #fff; }
@keyframes breathe { 0% { scale: 1; } 45% { scale: 1.06; } 100% { scale: 1; } }
/* 선 — 내 칸 쪽에서 그 사람 칸 쪽으로 천천히 그어진다. 처음과 끝이 부드럽게 */
.ln { fill: none; stroke: #d55f86; stroke-width: 1.8; stroke-linecap: round; }
.knot { fill: #e88aa8; stroke: rgba(232,138,168,.28); stroke-width: 5; }   /* 11/4 선 양 끝 매듭 점 */
/* 펜 끝 — 선을 이끄는 작은 장미 점 + 옅은 빛. 닿으면 한 번 퍼지며 사라진다 (10/29) */
.pen-d { fill: #c2477a; }
.pen-h { fill: rgba(238,143,154,.38); }
.pen.out .pen-h { animation: penOut .7s ease-out forwards; }
.pen.out .pen-d { animation: penDot .7s ease-out forwards; }
.pen-h, .pen-d { transform-box: fill-box; transform-origin: center; }
@keyframes penOut { to { transform: scale(2.4); opacity: 0; } }
@keyframes penDot { to { opacity: 0; } }

/* 소희의 말 */
.ld-say { width: 100%; max-width: 330px; margin-top: 22px; text-align: center; }
.ld-say p { opacity: 0; translate: 0 8px; transition: opacity .5s ease, translate .5s ease; word-break: keep-all; color: var(--ink); }
.ld-say p.in, .ld-say .more.in { opacity: 1; translate: 0 0; }
.sy-a { font: 700 19px/1.5 "Gowun Batang", serif; }
.sy-b { margin-top: 12px; font: 400 16px/1.75 "Gowun Batang", serif; }
.sy-b b { color: #a8385a; }
.sy-c { margin-top: 8px; font: 400 14.5px/1.7 "Noto Sans KR", sans-serif; color: rgba(70,32,45,.72) !important; }
.sy-d { margin-top: 16px; font: 400 16px/1.7 "Gowun Batang", serif; }
.sy-d b, .sy-e b { font-size: 21px; line-height: 1.55; }   /* 10/29 조금 더 크게 */
.sy-e { font: 400 16px/1.7 "Gowun Batang", serif; }   /* 끝 문장 둘째·셋째 줄 — "너네 둘," 바로 아래 */
.ld-say .more { margin-top: 22px; opacity: 0; translate: 0 8px; transition: opacity .6s ease, translate .6s ease, transform .12s ease; }

@media (max-height: 620px) {
  .ld { padding-top: 8px; } .ld-top { margin-top: 16px; }
  .bx { height: 48px; } .hh { font-size: 21px; } .bd.B { margin-top: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .bx, .ln, .ld-say p, .ld-say .more { transition: none; } .bx.hit, .ld-s.sw { animation: none; } .bx::before { transition: none; }
}

/* 11/4 로딩 끝 두 페이지 — 1쪽: 두 줄 + 「화면을 눌러 계속」 / 2쪽: 소희 그림 + 두 줄 + 「그게 뭔데?」 (반복 효과 없음) */
/* 11/4 주익님 「본문 폰트와 같게, 화면 밑으로」 — 고운바탕 16px, 화면 아래 고정 */
.ld-tap { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 34px); margin: 0; z-index: 8; opacity: 0; transition: opacity .5s ease;
  font: 400 16px/1.5 "Gowun Batang", serif; color: var(--sub); text-align: center; pointer-events: none; }
.ld-tap.in { opacity: .85; }
.ld-say.hastap { padding-bottom: 84px; }   /* 마지막 줄이 아래 고정 글자에 가리지 않게 */
.ld.p2out > * { opacity: 0; transition: opacity .4s ease; }
.ld.p2 { padding-top: 8px; }
.ld-p2 { width: 100%; min-height: calc(100svh - 120px); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ld-sh { height: min(330px, 40svh); opacity: 0; filter: blur(10px); translate: 0 16px; scale: .97;
  transition: opacity .8s ease, filter .8s ease, translate .8s ease, scale .8s ease; }   /* 11/5 1.2 → 0.8초 */
.ld-sh.in { opacity: 1; filter: blur(0); translate: 0 0; scale: 1; }
.ld-sh img { display: block; height: 100%; width: auto; max-width: none; }
.ld-p2 .ld-say { margin-top: 14px; }
.ld-p2 .sy-b { margin-top: 0; }
@media (max-height: 620px) { .ld-sh { height: 32svh; } .ld-p2 { min-height: calc(100svh - 60px); } }
@media (prefers-reduced-motion: reduce) { .ld-sh, .ld.p2out > * { transition: none; } }

/* 11/4 주익님 「연이 안 끊겼다」 강조 — 크고 굵게, 색은 흰 글자 그대로 */
.ld-say p.sy-k { margin-top: 18px; font: 700 21px/1.6 "Gowun Batang", serif; color: var(--ink); }

/* 11/4 주익님 「로딩 원국표 바탕을 우리 에셋으로」 — 결제 페이지 원국표와 같은 한지 「붉은 실 · 매듭」(hanji-thread.webp).
   한지는 첫 판이 나타날 때 함께 떠오른다(반딧불이 변신 전에는 안 보임). 판·칸은 한지가 비치게, 글자는 버튼 와인 #7a2141 */
.ld-wrap { max-width: 316px; padding: 46px 26px 34px; isolation: isolate; }
.ld-wrap::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("hanji-thread.webp?v=1") center / 100% 100% no-repeat;
  filter: drop-shadow(0 18px 26px rgba(0,0,0,.55)); opacity: 0; transition: opacity .9s ease; }
.ld-wrap:has(.bd.in)::before { opacity: 1; }
.ld-wrap .bd { padding: 0; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.ld-wrap .bd.B { margin-top: 58px; }
.ld-wrap .bd-h b { color: #7a2141; }
.ld-wrap .ld-cols { color: rgba(122,33,65,.55); font-family: "Gowun Batang", serif; }
.ld-wrap .bx { background: rgba(255,255,255,.42); border: 1px solid rgba(122,33,65,.14); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.ld-wrap .bx .hh { color: #7a2141; }
.ld-wrap .bx .hk { color: rgba(122,33,65,.6); }
.ld-wrap .bx.q { background: rgba(255,255,255,.25); border: 1px dashed rgba(122,33,65,.35); }
.ld-wrap .bx.q .hh { color: rgba(122,33,65,.35); }
.ld-wrap .bx.soft { background: rgba(240,130,165,.32); border-color: rgba(194,71,122,.45); }
.ld-wrap .bx.soft .hh { color: #8e2f50; }
.ld-wrap .bx.hit .hh, .ld-wrap .bx.hit .hk { color: #fff; }
@media (max-height: 620px) { .ld-wrap { padding: 40px 22px 28px; } .ld-wrap .bd.B { margin-top: 50px; } }

/* 11/4 서스펜스 — 「...근데 네가」 와 「꼭 알아야 할 게 하나 있어.」 를 따로, 더 천천히(1.4초) 흐림에서 또렷하게 */
.ld-p2 .sy-d.sus1, .ld-p2 .sy-d.sus2 { filter: blur(6px); transition: opacity 1.1s ease, translate 1.1s ease, filter 1.1s ease; }
.ld-p2 .sy-d.sus1.in, .ld-p2 .sy-d.sus2.in { filter: blur(0); }
.ld-p2 .sy-d.sus2 { margin-top: 6px; }
.ld-say .more { transition-duration: 1s, 1s, .12s; }