/* 천희관 재회 (2026-10-31) — 같은 맑은 유리·꽃잎, 바탕만 밤으로. 와인빛 먹색 + 흰 글자 + 장미 강조 하나.
   기존 stage·ask·load.css 위에 덮는다 (짝사랑 시안 파일은 그대로 두려고 따로 뺐다) */
:root { --ink: #f6e9ed; --sub: rgba(246,233,237,.6); --acc: #f08aa8; }
body { background: #0c0609; }
/* 바탕 = 「한 줄기 빛」 (11/2 주익님 배경 8안 중 5번, 사이트 전체) — 가운데 세로 와인빛 띠, 양옆은 깊게 어둡다 */
.stage { background: #241017 url("c2bg-none.webp?v=2") center / cover no-repeat; } /* 11/2 주익님 「매화 없음으로 통일, 모든 페이지에도」 → 사이트 전체 바탕 = 와인 모시(c2bg-none.webp) */ /* 이전: radial-gradient(62% 150% at 50% 50%, #2c1420 0%, #23101a 38%, #170a10 72%, #0c060a 100%); */ /* 11/2 「가운데 선이 너무 뚜렷」 → 꺾인 선(직선 그라데이션) 대신 세로로 긴 타원으로 부드럽게 */
@media (min-width: 600px) { .stage { box-shadow: 0 30px 90px rgba(0,0,0,.6); } }

/* 밝은 바탕용 흰 빛 그림자 → 어두운 바탕에서는 글자 뒤 그림자 */
.big, .ask-q, .ld-s { text-shadow: 0 2px 14px rgba(0,0,0,.55); }
.taphint { color: rgba(246,233,237,.85); text-shadow: 0 2px 10px rgba(0,0,0,.6); }
/* 두 번째 화면(소희) 배경 5안 (11/2 주익님 「소희 의상·버튼과 배경이 잘 안 맞아 — 조선풍, 5안」) — ?b2=1~5
   Higgsfield GPT Image 2. 소희 화면에 들어오면 그림 배경이 천천히 깔리고, 나가면 걷힌다. 반딧불이 캔버스는 그 위 */
.stage::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity .9s ease;
  background: var(--b2) center / cover no-repeat; pointer-events: none; }
.stage.b2:has(.card.c2:not(.out))::before { opacity: 1; }
.stage.b2-1 { --b2: url("c2bg-1.webp?v=1"); }
.stage.b2-2 { --b2: url("c2bg-2.webp?v=1"); }
.stage.b2-3 { --b2: url("c2bg-3.webp?v=1"); }
.stage.b2-4 { --b2: url("c2bg-4.webp?v=1"); }
.stage.b2-5 { --b2: linear-gradient(180deg, rgba(20,9,14,0) 0%, rgba(20,9,14,0) 44%, rgba(20,9,14,.92) 58%, rgba(20,9,14,.92) 100%), url("c2bg-5.webp?v=1"); }   /* 창문은 소희 뒤까지만, 글 자리는 어둡게 */
.stage.b2-m1 { --b2: url("c2bg-m1.webp?v=1"); }
.stage.b2-m2 { --b2: url("c2bg-m2.webp?v=1"); }
.stage.b2-m3 { --b2: url("c2bg-m3.webp?v=1"); }
.stage.b2-m4 { --b2: url("c2bg-m4.webp?v=1"); }
.stage.b2-m5 { --b2: url("c2bg-m5.webp?v=1"); }
.stage.b2-m6 { --b2: url("c2bg-m6.webp?v=1"); }
/* m6 = 밝은 한지 — 소희 화면 글자만 와인색으로 */
.stage.b2-m6 .card.c2 .big, .stage.b2-m6 .card.c2 .nm { color: #46202d !important; text-shadow: none !important; }
.stage.b2-m6 .card.c2 .big b { color: #a8385a !important; }
/* 매화는 오른쪽 위에서 들어오므로, 폰처럼 좁은 화면에서 잘리지 않게 오른쪽 위에 맞춘다 */
.stage[class*="b2-m"]::before, .stage[class*="b2-w"]::before, .stage[class*="b2-v"]::before { background-position: right top; }
/* 모시 + 매화 스타일 5안 (11/2) — v1 마주 보는 두 가지 · v2 아래에서 올라오는 가지 · v3 금선 · v4 위 테두리 가지 · v5 자수 */
.stage.b2-v1 { --b2: url("c2bg-v1.webp?v=1"); }
.stage.b2-v2 { --b2: url("c2bg-v2.webp?v=1"); }
.stage.b2-v3 { --b2: url("c2bg-v3.webp?v=1"); }
.stage.b2-v4 { --b2: url("c2bg-v4.webp?v=1"); }
.stage.b2-v5 { --b2: url("c2bg-v5.webp?v=1"); }
.stage.b2-v1::before, .stage.b2-v4::before { background-position: center top; }
/* 11/2 주익님 「좀 더 작게, 대칭이 맞게」 — 왼쪽 위 작은 가지 하나를 뽑아 좌우로 뒤집어 붙임(완전 대칭) = 기본 */
.stage.b2-sym { --b2: url("c2bg-sym.webp?v=3"); }
.stage.b2-sym::before { background-position: center top; }
/* 같은 작은 가지, 배치만 다르게 (11/2) — d 오른쪽 위+왼쪽 아래 · tr 오른쪽 위 · bl 왼쪽 아래 · none 가지 없음 */
.stage.b2-d { --b2: url("c2bg-d.webp?v=2"); }
.stage.b2-tr { --b2: url("c2bg-tr.webp?v=2"); }
.stage.b2-bl { --b2: url("c2bg-bl.webp?v=2"); }
.stage.b2-none { --b2: url("c2bg-none.webp?v=2"); }
.stage.b2-v2::before { background-position: left top; }
/* 2번 매화 + 와인 바탕 재질 6안 (11/2) — w1 한지 · w2 비단 · w3 모시 · w4 수묵 번짐 · w5 옻칠 · w6 창살 눌러 찍은 한지 */
.stage.b2-w1 { --b2: url("c2bg-w1.webp?v=1"); }
.stage.b2-w2 { --b2: url("c2bg-w2.webp?v=1"); }
.stage.b2-w3 { --b2: url("c2bg-w3.webp?v=1"); }
.stage.b2-w4 { --b2: url("c2bg-w4.webp?v=1"); }
.stage.b2-w5 { --b2: url("c2bg-w5.webp?v=1"); }
.stage.b2-w6 { --b2: url("c2bg-w6.webp?v=1"); }
.fx { position: absolute; z-index: 1; }

/* 소희 등장 (11/2 「너무 갑작스럽게 뜬다」) — 흐림·아래에서·살짝 작게 → 또렷하게, 1.8초. 한 번만 */
.c2 .hwz.rv, .c2 > .hwaja.rv { filter: blur(10px); translate: 0 16px; scale: .97;
  transition: opacity 1.1s ease, filter 1.1s ease, translate 1.1s cubic-bezier(.2,.7,.2,1), scale 1.1s cubic-bezier(.2,.7,.2,1); }   /* 11/5 주익님 「소희 뜨는 게 너무 느려」 1.8 → 1.1초 */
.c2 .hwz.rv.in, .c2 > .hwaja.rv.in { filter: blur(0); translate: 0 0; scale: 1; }
/* 두 번째 화면(소희) 뒤 둥근 빛 삭제 (11/2 주익님 「배경은 처음부터 끝까지 통일」) — 바탕은 .stage 하나뿐 */
.c2::before { content: none; }
.c2 .nm { color: #f4a3bb; }
.toast, .restart { background: rgba(255,255,255,.08); color: var(--ink); border-color: rgba(255,255,255,.14); }

/* 입력 카드 — 어두운 유리 */
.sk2 .ask-card { background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 24px 48px -24px rgba(0,0,0,.7); }
.sk2 .ask-card::before { background: linear-gradient(128deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 34%, rgba(255,255,255,0) 72%, rgba(255,255,255,.04) 100%); }
.sk2 .row { border-bottom-color: rgba(255,255,255,.1); }
.sk2 .fld input, .sk2 .dbox, .sk2 .pk { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.24); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.sk2 .fld input:focus, .sk2 .dfld:focus-within .dbox { background: rgba(255,255,255,.09); border-color: rgba(240,138,168,.7); box-shadow: 0 0 0 5px rgba(240,138,168,.14); }
.sk2 .dbox.full { border-color: rgba(240,138,168,.7); }
.fld input::placeholder { color: rgba(246,233,237,.28); }
.sk2 .seg i { color: rgba(246,233,237,.2); }
.sk2 .dl, .sk2 .rs, .sk2 .dex, .sk2 .dks, .dbox em { color: var(--sub); }
.sk2 .cal { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.22); box-shadow: none; }
.sk2 .cal button { color: rgba(246,233,237,.45); }
.sk2 .cal button.on { color: #f4a3bb; }
.dv::after { border-color: rgba(240,138,168,.7); }
.hint { color: #ff9cb2; }
.dk { background: rgba(255,255,255,.05); border-color: rgba(240,138,168,.5); color: #f4a3bb; box-shadow: none; }
.dk:active { background: rgba(255,255,255,.1); }

/* 보기 — 장미 물 판(3안)을 어두운 바탕에 맞춰 */
.bt3 .rl, .bt3 .pk, .bt3 .hr { background: linear-gradient(100deg, rgba(240,138,168,.16), rgba(246,178,186,.08)); border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 14px -10px rgba(0,0,0,.6); color: var(--ink); }
.bt3 .pk { color: var(--sub); }
.bt3 .pk.has { color: var(--ink); }
.bt3 .rels.one .rl::after { color: rgba(240,138,168,.85); }
.bt3 .rl.sel, .bt3 .hr.sel { background: linear-gradient(100deg, rgba(240,138,168,.36), rgba(246,166,178,.22)); border: 1.5px solid rgba(240,138,168,.75); color: #fff; }
.bt3 .hr.sel .hn { color: #fff; }
.pk i { border-color: #f08aa8; }

/* 태어난 때 목록 시트 */
.sk2 .sh { background: rgba(36,16,25,.92); border-top: 1px solid rgba(255,255,255,.12); }
.sk2 .sh-dim { background: rgba(0,0,0,.45); }
.sh-bar { background: rgba(255,255,255,.2); }

/* 로딩 — 사주판도 어두운 유리 */
.bd { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 16px 34px -22px rgba(0,0,0,.7); }
.bx { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.bx.q { background: rgba(255,255,255,.02); border-color: rgba(255,255,255,.2); }
.bx.q .hh { color: rgba(246,233,237,.25); }
.hk, .ld-cols, .bd-h span { color: var(--sub); }
.bx.soft { background: rgba(240,130,165,.2); border-color: rgba(240,138,168,.5); }
.bx.soft .hh { color: #ffc3d4; }
.ld-bar { background: rgba(255,255,255,.12); }
.sy-b b { color: var(--acc); }
.sy-c { color: var(--sub) !important; }
.fin-note { color: rgba(246,233,237,.4); }

/* 공포 멘트 "닫히고 있어" 가 뜰 때 — 이어진 선과 두 칸이 한 번 어두워진다 (반복 없음) */
.ld.closing .ln { opacity: .28; transition: opacity 2.6s ease; }
.ld.closing .bx.hit::before { opacity: .42; transition: opacity 2.6s ease; }
.ld.closing .bx.hit { box-shadow: none; transition: box-shadow 2.6s ease; }

/* 공포 멘트 박자 — "닫히고 있어" 는 흰 글자, 한 칸 띄우고 "둘은 진짜 끝나" 만 장미색 (강조 하나) */
.sy-d b { color: var(--ink); }
.sy-e { margin-top: 14px; }

/* 재회 소희 그림 (10/31 주익님 "자르지 말고 배경을 없애고 원본을") — 배경을 지운 원본 그대로, 가장자리 페이드 없음 */
.c2 .hwaja { -webkit-mask-image: none; mask-image: none; }

/* 버튼 글자 — 10/31 주익님 "버튼 → 좋아" 로 되돌려 원래 자간 */

/* ── 어두운 배경용 「좋아」 5안 (10/31 "배경이 바뀌어서 버튼도 바뀌어야") — ?ob=1~5 ──
   모두 .okbtn.cb 위에 얹는다(크기 250×60, 누르면 파문 한 번). 장미색은 하나만 쓴다. 반복 효과 없음 */
.okbtn.ob { color: var(--ink); }
.okbtn.ob span { letter-spacing: .34em; padding-left: .34em; }
.ob .ring { left: 50%; top: 50%; width: 100%; height: 100%; translate: -50% -50%; border-radius: inherit; border: 1.5px solid rgba(240,138,168,.6); opacity: 0; }
.ob.hit .ring { animation: ring .6s ease-out forwards; }
.ob.hit .ring.r2 { animation-delay: .12s; }
/* 1 장미 유리 — 어두운 바탕 위에 장미빛이 살짝 비치는 유리판. 가장 조용함 */
.okbtn.ob1 { border-radius: 14px; background: linear-gradient(180deg, rgba(240,138,168,.2), rgba(240,138,168,.08));
  box-shadow: inset 0 0 0 1px rgba(240,138,168,.55), inset 0 1px 0 rgba(255,255,255,.18), 0 14px 30px -14px rgba(240,138,168,.45);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.okbtn.ob1 span { color: #fbd6e1; }
/* 2 깊은 장미 판 — 밝은 분홍 대신 와인에 가까운 장미로 꽉 채움. 가장 눌러야 할 것처럼 보임 */
.okbtn.ob2 { border-radius: 4px; background: linear-gradient(180deg, #b23f66 0%, #8a2a4d 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 0 0 1px rgba(255,170,195,.25), 0 16px 32px -14px rgba(230,90,140,.6); }
.okbtn.ob2 span { color: #fff; }
/* 3 반딧불이 두 점 — 투명한 둥근 테두리, 양 끝에 장미빛 점 둘(너와 그 사람). 점은 가만히 있음 */
.okbtn.ob3 { border-radius: 30px;
  background: radial-gradient(circle at 26px 50%, rgba(255,236,242,1) 0 2px, rgba(255,160,190,.55) 3px, rgba(255,160,190,0) 11px),
              radial-gradient(circle at calc(100% - 26px) 50%, rgba(255,236,242,1) 0 2px, rgba(255,160,190,.55) 3px, rgba(255,160,190,0) 11px),
              rgba(255,255,255,.03);
  box-shadow: inset 0 0 0 1px rgba(246,233,237,.38); }
.okbtn.ob3 span { color: var(--ink); }
/* 4 아이보리 — 소희 저고리 색 판에 와인 글자. 어두운 화면에서 가장 또렷함 */
.okbtn.ob4 { border-radius: 4px; background: linear-gradient(180deg, #f8eee6 0%, #ead8cb 100%);
  box-shadow: inset 0 1px 0 #fff, 0 16px 30px -14px rgba(0,0,0,.7); }
.okbtn.ob4 span { color: #7a2141; }
.okbtn.ob4 .ring { border-color: rgba(248,238,230,.6); }
/* 5 글자만 — 판 없이 큰 글자 + 장미 밑줄 + 아래 옅은 장미빛 웅덩이. 가장 덜어냄 */
.okbtn.ob5 { background: radial-gradient(60% 70% at 50% 62%, rgba(240,138,168,.22), rgba(240,138,168,0) 72%); }
.okbtn.ob5 span { font-size: 21px; color: #fbe3ea; }
.okbtn.ob5 span::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 34px; height: 1.5px; translate: calc(-50% - .17em) 0;
  background: var(--acc); transition: width .3s ease; }
.okbtn.ob5.hit span::after { width: 60px; }
.okbtn.ob5 .ring { border-radius: 30px; }

/* 버튼 = 아이보리 (10/31 주익님 확정) — 질문 화면 「다음」, 로딩 끝 「어떻게 해야 돼?」 도 같은 판 */
.nx { background: linear-gradient(180deg, #f8eee6 0%, #ead8cb 100%); color: #7a2141; text-shadow: none;
      border-radius: 4px; box-shadow: inset 0 1px 0 #fff, 0 16px 30px -14px rgba(0,0,0,.7); }
.nx:disabled { opacity: .3; filter: none; }

/* 두 번째 화면 얼굴 줌인 5안 (?fz=1~5). 틀 높이는 원래 그림 높이와 같게 두고, 안의 그림만 키운다.
   얼굴(머리 위)은 틀 위에 맞추고, 넘치는 아래·양옆은 부드럽게 흐린다(딱 잘린 선이 안 보이게) */
.c2 .hwz { --H: min(310px, 37svh); --t: 0; --tf: 0%; position: relative; height: var(--H); width: min(330px, 88vw); margin: 0 auto 18px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--tf), #000 80%, transparent 100%), linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, transparent 0, #000 var(--tf), #000 80%, transparent 100%), linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-composite: intersect; }
/* --z 확대 배수, --t 그림 위에서 몇 %를 틀 밖으로 올릴지. 턱(그림의 57%)이 흐림 시작보다 위에 오도록 맞춤 */
.c2 .hwz .hwaja { position: absolute; left: 50%; top: calc(var(--H) * var(--z) * var(--t) * -1); translate: -50% 0; margin: 0; max-width: none; height: calc(var(--H) * var(--z)); }
.c2 .hwz.fz2 { --z: 1.22; }
.c2 .hwz.fz3 { --z: 1.39; --t: .04; }
.c2 .hwz.fz4 { --z: 1.56; --t: .08; --tf: 6%; }
.c2 .hwz.fz5 { --z: 1.79; --t: .12; --tf: 8%; }
/* 1 — 자르지 않고 그림 전체를 크게 (틀·흐림 없음) */
.c2 .hwz.fz1 { --H: min(372px, 44svh); --z: 1; width: auto; -webkit-mask-image: none; mask-image: none; }
.c2 .hwz.fz1 .hwaja { position: static; translate: none; display: block; margin: 0 auto; }
@media (max-height: 620px) { .c2 .hwz { --H: min(310px, 31svh); margin-bottom: 12px; } .c2 .hwz.fz1 { --H: min(372px, 36svh); } }

/* 한지 버튼 에셋 15안 (?btn=1~15) — 그림 위 「좋아」 는 와인색 고운바탕. 누르면 살짝 눌림 */
.okbtn.img.txt span { color: #7a2141; font-size: 19px; text-shadow: none; }
.okbtn.img { transition: transform .12s ease, filter .2s ease; -webkit-tap-highlight-color: transparent; }
.okbtn.img img { filter: drop-shadow(0 14px 22px rgba(0,0,0,.45)); }
.okbtn.img:active, .okbtn.img.hit { transform: translateY(1px) scale(.985); }

/* 「다음」·「어떻게 해야 돼?」 — 「좋아」 와 같은 한지 15안(장미 먹 번짐) 그림 (10/31 주익님 "다른 아이보리 버튼에도 다 적용").
   버튼이 화면 폭만큼 넓어서(약 5.6:1) 같은 한지로 긴 판을 따로 만들었다: nx-hanji.webp */
.nx { background: url("nx-hanji.webp?v=1") center / 100% 100% no-repeat; border-radius: 6px; box-shadow: none;
      filter: drop-shadow(0 12px 18px rgba(0,0,0,.45)); }
.nx:disabled { filter: none; }

/* 보기 오른쪽 화살표 (10/31 "조금 밑으로 내려가 있어") — 글자 › 는 글꼴마다 아래로 처져서, 선 두 개로 그린 꺾쇠로 바꿔 정가운데에 둔다 */
.bt3 .rels.one .rl::after { content: ""; width: 7px; height: 7px; right: 20px; top: 50%; translate: 0 -50%; rotate: 45deg;
  border-top: 1.6px solid rgba(240,138,168,.85); border-right: 1.6px solid rgba(240,138,168,.85); font-size: 0; line-height: 0; }

/* 보기를 고른 순간 (10/31 "더 매끄럽게") — 고른 보기만 남고 나머지는 옅어진다. 그다음 칸이 접히고, 다음 질문이 펼쳐진다 (ask.js slide) */
.rels .rl { transition: opacity .28s ease, background .25s ease, border-color .25s ease, transform .12s ease; }
.rels.picked .rl:not(.sel) { opacity: .3; }

/* 질문 넘기는 방식 (?tr=a·b·c·f) — a·b 는 지난 칸을 숨기고 위에 「‹ 이전 · 1 / 4」, c 는 지난 칸을 그대로 둔다 */
.rows { position: relative; }
.row.done.gone { display: none; }
.pg { display: flex; justify-content: space-between; align-items: center; margin: -6px 0 12px; font: 500 12.5px "Noto Sans KR", sans-serif; color: var(--sub); }
.pg .pb { background: none; border: 0; padding: 4px 6px 4px 0; color: var(--sub); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pg .pb[hidden] { display: inline-block; visibility: hidden; }
.pg span { letter-spacing: .08em; }
.row.kept { pointer-events: none; padding: 18px 2px; }
.row.kept .nx, .row.kept .dk, .row.kept .hint { display: none; }
.row.kept .rels.picked .rl:not(.sel) { opacity: .22; }

/* 머리말 없는 묶음(헤어진 얘기 네 질문, 10/31 삭제) — 빈 머리 자리를 비운다 */
.ask-q:empty { visibility: hidden; }  /* 한 줄 자리는 남겨 카드 높이가 다른 화면(「먼저 너부터 알려줘.」)과 같게 */
.ask-q:empty::before { content: "\00a0"; }

/* ── 입력창 카드 에셋 5안 (11/2) — ?ia=1~5. Higgsfield GPT Image 2, askbg-N.webp
   카드 크기가 칸 수에 따라 바뀌므로 border-image 로 모서리·테두리는 그대로, 가운데만 늘린다 (폭 약 340px 기준 비율 1/3) */
.ia .ask-card { position: relative; background: none !important; border: 0 !important; box-shadow: 0 24px 48px -24px rgba(0,0,0,.75) !important;
  border-radius: 0; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; overflow: visible; }
.ia .ask-card::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: 0 !important; background: none !important;
  border-style: solid; border-color: transparent; border-image-source: var(--ia); border-image-repeat: stretch; }
.ia .ask-card .rows { position: relative; z-index: 1; }
/* 1 한지 번짐 · 3 편지지 · 4 창호 · 5 붉은 실 매듭 = 밝은 종이 → 카드 안 글자는 와인색 */
.ia1 .ask-card::before { --ia: url("askbg-1.webp?v=1"); border-image-slice: 200 fill; border-width: 66px; }
.ia2 .ask-card::before { --ia: url("askbg-2.webp?v=1"); border-image-slice: 130 fill; border-width: 43px; }
.ia3 .ask-card::before { --ia: url("askbg-3.webp?v=1"); border-image-slice: 120 fill; border-width: 40px; }
.ia4 .ask-card::before { --ia: url("askbg-4.webp?v=1"); border-image-slice: 250 70 fill; border-width: 83px 23px; }
.ia5 .ask-card::before { --ia: url("askbg-5.webp?v=1"); border-image-slice: 150 70 70 fill; border-width: 50px 23px 23px; }
.ia1 .ask-card { padding: 14px 26px; } .ia2 .ask-card { padding: 22px 30px; } .ia3 .ask-card { padding: 16px 28px; }
.ia4 .ask-card { padding: 66px 30px 66px; } .ia5 .ask-card { padding: 34px 28px 20px; }
.ia1 .ask-card, .ia3 .ask-card, .ia4 .ask-card, .ia5 .ask-card { --ink: #46202d; --sub: rgba(70,32,45,.62); }
.ia1 .ask-card .rq, .ia3 .ask-card .rq, .ia4 .ask-card .rq, .ia5 .ask-card .rq { text-shadow: none; }
.ia1 .row, .ia3 .row, .ia4 .row, .ia5 .row { border-bottom-color: rgba(70,32,45,.1) !important; }
.ia1 .fld input, .ia1 .dbox, .ia1 .pk, .ia1 .rl, .ia3 .fld input, .ia3 .dbox, .ia3 .pk, .ia3 .rl,
.ia4 .fld input, .ia4 .dbox, .ia4 .pk, .ia4 .rl, .ia5 .fld input, .ia5 .dbox, .ia5 .pk, .ia5 .rl {
  background: rgba(255,252,247,.55) !important; border-color: rgba(122,33,65,.22) !important; box-shadow: none !important; color: #46202d; }
.ia1 .fld input:focus, .ia3 .fld input:focus, .ia4 .fld input:focus, .ia5 .fld input:focus,
.ia1 .dfld:focus-within .dbox, .ia3 .dfld:focus-within .dbox, .ia4 .dfld:focus-within .dbox, .ia5 .dfld:focus-within .dbox {
  background: rgba(255,252,247,.85) !important; border-color: rgba(168,56,90,.6) !important; box-shadow: 0 0 0 4px rgba(168,56,90,.12) !important; }
.ia1 .fld input::placeholder, .ia3 .fld input::placeholder, .ia4 .fld input::placeholder, .ia5 .fld input::placeholder { color: rgba(70,32,45,.3); }
.ia1 .seg i, .ia3 .seg i, .ia4 .seg i, .ia5 .seg i { color: rgba(70,32,45,.2) !important; }
.ia1 .cal, .ia3 .cal, .ia4 .cal, .ia5 .cal { background: rgba(255,252,247,.5) !important; border-color: rgba(122,33,65,.2) !important; }
.ia1 .cal button, .ia3 .cal button, .ia4 .cal button, .ia5 .cal button { color: rgba(70,32,45,.45) !important; }
.ia1 .cal button.on, .ia3 .cal button.on, .ia4 .cal button.on, .ia5 .cal button.on { color: #a8385a !important; }
/* 2 모시 + 단청 모서리 = 어두운 판 → 칸은 지금 유리 그대로, 테만 아이보리 */
.ia2 .fld input, .ia2 .dbox, .ia2 .pk, .ia2 .rl { border-color: rgba(233,217,204,.32) !important; }
/* 밝은 종이 위 「다음」 — 아이보리 버튼이 종이에 묻히므로 와인 바탕 + 아이보리 글자 */
/* 11/4 주익님 「버튼 에셋 어디 갔어? 왜 핑크색이야?」 → 종이 바탕에서도 한지 버튼 에셋(nx-hanji) 그대로 */
.ia1 .nx, .ia3 .nx, .ia4 .nx, .ia5 .nx { background: url("nx-hanji.webp?v=1") center / 100% 100% no-repeat !important; color: #7a2141 !important; }
/* 11/2 주익님 「'그 사람 생일을 몰라' 버튼이 잘 안 보여」 — 밝은 종이 위에선 연분홍 글자가 묻힌다 → 와인 테 + 와인 글자 */
.ia1 .dk, .ia3 .dk, .ia4 .dk, .ia5 .dk { background: rgba(255,252,247,.6) !important; border: 1.5px solid rgba(122,33,65,.5) !important;
  color: #7a2141 !important; font-weight: 700; text-shadow: none; box-shadow: none !important; }
.ia1 .dk:active, .ia3 .dk:active, .ia4 .dk:active, .ia5 .dk:active { background: rgba(255,252,247,.9) !important; }

/* ── 11/4 에셋 다시 뽑기 3안 (?as=A·B·C) — 주익님 「컬러가 배경이랑 너무 달라」. 배경과 같은 와인 계열로 Higgsfield GPT Image 2.5.
   A 구름문 · B 붉은 실·매듭 · C 꽃살 창살. 카드 = card2-X.webp(9칸으로 늘림), 버튼 = btn2-X.webp. 어두운 판이라 글자는 아이보리 ── */
/* 11/4 주익님 「구름문으로, 버튼은 위아래 더 크게」 → A = 기본값. 버튼은 더 두툼한 구름문 판(cloud-btn.webp, 4.7:1) */
html.as-A { --cd: url("card2-A.webp?v=1"); --bt: url("cloud-btn.webp?v=1"); --bth: 70px; --btp: 0; }
html.as-B { --cd: url("card2-B.webp?v=1"); --bt: url("btn2-B.webp?v=1"); --bth: 72px; --btp: 14px; }
html.as-C { --cd: url("card2-C.webp?v=1"); --bt: url("btn2-C.webp?v=1"); --bth: 60px; --btp: 0; }
html[class*="as-"] .nx { background: var(--bt) center / 100% 100% no-repeat !important; color: #f6e9ed !important; height: var(--bth) !important;
  padding-bottom: var(--btp) !important; border-radius: 0 !important; filter: drop-shadow(0 12px 18px rgba(0,0,0,.5)) !important; }
/* 카드 — 결제 목차·후기·잠금 카드·원국표, 로딩 원국표 */
html[class*="as-"] .prod, html[class*="as-"] .rvs, html[class*="as-"] .lockc {
  border-style: solid !important; border-width: 46px 24px !important; border-image: var(--cd) 130 fill / 46px 24px stretch !important; color: #f6e9ed !important; }
html[class*="as-"] .lockc { border-width: 40px 22px !important; border-image: var(--cd) 130 fill / 40px 22px stretch !important; }
html[class*="as-"] .wk { background: none !important; border-style: solid; border-width: 46px 24px; border-image: var(--cd) 130 fill / 46px 24px stretch; padding: 4px 4px 0 !important; }
html[class*="as-"] .ld-wrap::before { background: none !important; border-style: solid; border-width: 46px 24px; border-image: var(--cd) 130 fill / 46px 24px stretch; }
html[class*="as-"] .ld-wrap { padding: 44px 24px 34px; }
/* 어두운 판 위 글자 */
html[class*="as-"] .prod .ti, html[class*="as-"] .tc-i .tt, html[class*="as-"] .rvw h4, html[class*="as-"] .lockc .lk-b, html[class*="as-"] .lockc .bl,
html[class*="as-"] .prod .bl, html[class*="as-"] .wk .bd-h b, html[class*="as-"] .ld-wrap .bd-h b { color: #f6e9ed !important; }
html[class*="as-"] .tc-i .te, html[class*="as-"] .rvw p, html[class*="as-"] .lockc .lk-h, html[class*="as-"] .tc-i .sl,
html[class*="as-"] .rvw .who, html[class*="as-"] .wk .ld-cols, html[class*="as-"] .ld-wrap .ld-cols { color: rgba(246,233,237,.66) !important; }
html[class*="as-"] .rvw .who em { color: #e88aa8 !important; }
html[class*="as-"] .tc-i, html[class*="as-"] .rvw { border-top-color: rgba(246,233,237,.12) !important; }
html[class*="as-"] .wk .bx, html[class*="as-"] .ld-wrap .bx { background: #3b1a28 !important;   /* 실이 칸 뒤로 지나가게 불투명 */ border: 1px solid rgba(246,233,237,.16) !important; }
html[class*="as-"] .wk .bx .hh, html[class*="as-"] .ld-wrap .bx .hh { color: #f6e9ed !important; }
html[class*="as-"] .wk .bx .hk, html[class*="as-"] .ld-wrap .bx .hk { color: rgba(246,233,237,.6) !important; }
html[class*="as-"] .ld-wrap .bx.q { border-style: dashed !important; background: #34171f !important; }
html[class*="as-"] .ld-wrap .bx.q .hh { color: rgba(246,233,237,.3) !important; }
html[class*="as-"] .ld-wrap .bx.soft { background: #5a2238 !important; border-color: rgba(240,138,168,.5) !important; }
html[class*="as-"] .ld-wrap .bx.soft .hh { color: #ffc3d4 !important; }
html[class*="as-"] .bx.hit .hh, html[class*="as-"] .bx.hit .hk { color: #fff !important; }
/* 가격 카드도 같은 판 (예전 아이보리 매화 카드 대신) */
html[class*="as-"].pc .buy .price { border-width: 46px 24px !important; border-image: var(--cd) 130 fill / 46px 24px stretch !important; padding: 10px 8px 8px !important; }
html[class*="as-"].pc .price .was, html[class*="as-"].pc .price .pd { color: rgba(246,233,237,.66) !important; }
html[class*="as-"].pc .price .won { color: #f6e9ed !important; }
html[class*="as-"].pc .price .off { color: #ec4a62 !important; }   /* 11/2 주익님 「87%는 빨간색」 — 어두운 판에서 읽히는 빨강 */
/* 둘째 화면 「좋아」 버튼도 같은 안으로 (그림 버튼 <img> 를 안 그림으로 바꿔 끼운다) */
html[class*="as-"] .okbtn.img img { content: var(--bt); }
html[class*="as-"] .okbtn.img.txt span { color: #f6e9ed !important; }

/* 11/4 구름문 기본값 — 둘째 화면 「좋아」 버튼 크기, 가격 구분선, 질문 화면 카드도 구름문으로 */
html[class*="as-"] .okbtn.img img { width: min(270px, 72vw); max-height: none; }
html.as-A .sep { background-image: url("cloud-sep.webp?v=1"); mix-blend-mode: normal; height: 18px; }
/* 질문 화면 카드(ia1 한지 번짐) → 구름문 판. 판이 어두워서 글자는 아이보리, 입력칸은 어두운 유리 */
html.as-A .ia1 .ask-card::before { --ia: url("card2-A.webp?v=1"); border-image-slice: 130 fill; border-width: 46px 24px; }
html.as-A .ia1 .ask-card { padding: 30px 30px; --ink: #f6e9ed; --sub: rgba(246,233,237,.66); }
html.as-A .ia1 .row { border-bottom-color: rgba(246,233,237,.12) !important; }
html.as-A .ia1 .fld input, html.as-A .ia1 .dbox, html.as-A .ia1 .pk, html.as-A .ia1 .rl {
  background: rgba(255,255,255,.07) !important; border-color: rgba(246,233,237,.22) !important; color: #f6e9ed !important; }
html.as-A .ia1 .fld input:focus, html.as-A .ia1 .dfld:focus-within .dbox {
  background: rgba(255,255,255,.12) !important; border-color: rgba(240,138,168,.6) !important; box-shadow: 0 0 0 4px rgba(240,138,168,.14) !important; }
html.as-A .ia1 .fld input::placeholder { color: rgba(246,233,237,.35) !important; }
html.as-A .ia1 .seg i { color: rgba(246,233,237,.3) !important; }
html.as-A .ia1 .cal { background: rgba(36,16,25,.92) !important; border-color: rgba(246,233,237,.2) !important; }
html.as-A .ia1 .cal button { color: rgba(246,233,237,.6) !important; }
html.as-A .ia1 .cal button.on { color: #f08aa8 !important; }
html.as-A .ia1 .dk { background: rgba(255,255,255,.06) !important; border: 1.5px solid rgba(246,233,237,.35) !important; color: #f6e9ed !important; }
/* 11/4 생시 고르기 시트도 구름문 — 판 위쪽에 구름문 테(카드 그림의 위·양옆만), 칸은 원국표 칸처럼 어두운 유리 + 장미 테, 고른 칸은 장미 */
html.as-A .stage .sh { border-radius: 0 !important; border-style: solid; border-width: 30px 18px 0; border-image: url("card2-A.webp?v=1") 130 130 0 fill / 30px 18px 0 stretch;   /* 11/5 「생시 글·버튼이 밑으로 가 있어」 위 테 46 → 30px */
  background: none !important; padding-top: 0 !important; padding-bottom: calc(env(safe-area-inset-bottom) + 26px) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.as-A .stage .sh-q { margin-bottom: 12px; }
html.as-A .stage .sh .sh-bar { display: none; }
html.as-A .sh-q b { color: #f6e9ed; } html.as-A .sh-q span { color: rgba(246,233,237,.62); }
html.as-A .hr { background: rgba(255,255,255,.06) !important; border: 1px solid rgba(196,106,138,.42) !important; border-radius: 6px !important; box-shadow: none !important; }
html.as-A .hr .hn { color: #f6e9ed !important; } html.as-A .hr .ht { color: rgba(246,233,237,.55) !important; }
html.as-A .hr.sel { background: linear-gradient(180deg, rgba(213,95,134,.55), rgba(150,40,80,.55)) !important; border-color: rgba(240,138,168,.8) !important; }
html.as-A .hr.sel .hn, html.as-A .hr.sel .ht { color: #fff !important; }

/* 11/4 카드 톤 6종 비교 (?cd=1~6) — 어두운 톤 → 밝은 톤. 같은 구름문 틀(card-tN.webp). 1~3은 아이보리 글자, 4~6은 와인 글자 */
html.cd1 { --cd: url("card-t1.webp?v=1") !important; } html.cd2 { --cd: url("card-t2.webp?v=1") !important; } html.cd3 { --cd: url("card-t3.webp?v=1") !important; }
html.cd4 { --cd: url("card-t4.webp?v=1") !important; } html.cd5 { --cd: url("card-t5.webp?v=1") !important; } html.cd6 { --cd: url("card-t6.webp?v=1") !important; }
html[class*="cd"] .prod, html[class*="cd"] .rvs, html[class*="cd"] .lockc, html[class*="cd"] .wk, html[class*="cd"].pc .buy .price { border-image-slice: 110 fill !important; }
html.as-A.cd1 .ia1 .ask-card::before, html.as-A.cd2 .ia1 .ask-card::before, html.as-A.cd3 .ia1 .ask-card::before { --ia: var(--cd); border-image-slice: 110 fill; }
/* 밝은 판(4~6) — 글자·칸을 와인으로 */
html.cd4 :is(.prod .ti, .tc-i .tt, .rvw h4, .lockc .lk-b, .lockc .bl, .prod .bl, .wk .bd-h b, .wk .bx .hh),
html.cd5 :is(.prod .ti, .tc-i .tt, .rvw h4, .lockc .lk-b, .lockc .bl, .prod .bl, .wk .bd-h b, .wk .bx .hh),
html.cd6 :is(.prod .ti, .tc-i .tt, .rvw h4, .lockc .lk-b, .lockc .bl, .prod .bl, .wk .bd-h b, .wk .bx .hh) { color: #7a2141 !important; }
html.cd4 :is(.tc-i .te, .rvw p, .lockc .lk-h, .rvw .who, .wk .ld-cols, .wk .bx .hk),
html.cd5 :is(.tc-i .te, .rvw p, .lockc .lk-h, .rvw .who, .wk .ld-cols, .wk .bx .hk),
html.cd6 :is(.tc-i .te, .rvw p, .lockc .lk-h, .rvw .who, .wk .ld-cols, .wk .bx .hk) { color: rgba(122,33,65,.66) !important; }
html.cd4 :is(.tc-i, .rvw), html.cd5 :is(.tc-i, .rvw), html.cd6 :is(.tc-i, .rvw) { border-top-color: rgba(122,33,65,.14) !important; }
html.cd4 .wk .bx, html.cd5 .wk .bx, html.cd6 .wk .bx { background: rgba(255,255,255,.55) !important; border-color: rgba(122,33,65,.18) !important; }
html.cd4.pc .price :is(.was, .pd), html.cd5.pc .price :is(.was, .pd), html.cd6.pc .price :is(.was, .pd) { color: rgba(122,33,65,.66) !important; }
html.cd4.pc .price .won, html.cd5.pc .price .won, html.cd6.pc .price .won { color: #7a2141 !important; }
html.cd4.pc .price .off, html.cd5.pc .price .off, html.cd6.pc .price .off { color: #d0283e !important; }

/* 11/4 가격 카드 6안 (?pcard=1~6) — 주익님 「가격 카드만 디자인·색 다양하게」. 그림 비율(4:3) 그대로 깔고 글자는 가운데.
   1 진사 옻칠 · 2 연분홍 한지+매듭 · 3 아이보리+낙관 · 4 먹+자개 · 5 장미 비단 보자기 · 6 와인+은빛 모란 */
html[class*="pcard"].pc .buy .price { border: 0 !important; border-image: none !important; background: var(--pcd) center / 100% 100% no-repeat !important;
  aspect-ratio: 1168 / 880; display: flex; flex-direction: column; justify-content: center; padding: 0 30px !important; margin: 44px -4px 0 !important; filter: drop-shadow(0 18px 26px rgba(0,0,0,.55)); }
html.pcard1 { --pcd: url("price-n1.webp?v=1"); } html.pcard2 { --pcd: url("price-n2.webp?v=1"); } html.pcard3 { --pcd: url("price-n3.webp?v=1"); }
html.pcard4 { --pcd: url("price-n4.webp?v=1"); } html.pcard5 { --pcd: url("price-n5.webp?v=1"); } html.pcard6 { --pcd: url("price-n6.webp?v=1"); }
html.pcard5.pc .buy .price { padding-top: 40px !important; }   /* 보자기 매듭 아래로 */
html.pcard2.pc .buy .price { padding-top: 26px !important; }
/* 밝은 판(2·3) — 와인 글자 */
html.pcard2.pc .price :is(.was, .pd), html.pcard3.pc .price :is(.was, .pd) { color: rgba(122,33,65,.66) !important; }
html.pcard2.pc .price .won, html.pcard3.pc .price .won { color: #7a2141 !important; }
html.pcard2.pc .price .off, html.pcard3.pc .price .off { color: #d0283e !important; }
/* 진사(1) 위 87%는 흰빛 분홍으로(빨강 위 빨강이 묻힘) */
html.pcard1.pc .price .off { color: #ffd2c8 !important; }
html.pcard5.pc .price :is(.won, .was, .pd) { text-shadow: 0 1px 6px rgba(80,20,40,.45); }
html.pcard5.pc .price .off { color: #fff0f3 !important; }

/* 11/4 가격 카드 더 — 7 청자 · 8 남색 밤하늘 · 9 나무 현판 · 10 검정+장밋빛 금박 · 11 붉은 실 꼬리표 · 12 자두빛 노을 · 13 한옥 창호 · 14 진홍 벨벳 자수 */
html.pcard7 { --pcd: url("price-n7.webp?v=1"); } html.pcard8 { --pcd: url("price-n8.webp?v=1"); } html.pcard9 { --pcd: url("price-n9.webp?v=1"); }
html.pcard10 { --pcd: url("price-n10.webp?v=1"); } html.pcard11 { --pcd: url("price-n11.webp?v=1"); } html.pcard12 { --pcd: url("price-n12.webp?v=1"); }
html.pcard13 { --pcd: url("price-n13.webp?v=1"); } html.pcard14 { --pcd: url("price-n14.webp?v=1"); }
html:is(.pcard7, .pcard11, .pcard13).pc .price :is(.was, .pd) { color: rgba(70,32,45,.7) !important; }
html:is(.pcard7, .pcard11, .pcard13).pc .price .won { color: #46202d !important; }
html:is(.pcard7, .pcard11, .pcard13).pc .price .off { color: #d0283e !important; }
html.pcard14.pc .price .off { color: #ffd2c8 !important; }
/* 11/4 가격 카드 컨셉판(재회·소희) — 15 흰 저고리+붉은 고름 · 16 붉은 댕기 두 가닥 · 17 무녀 방울 · 18 연분홍 부적지 · 19 두 조각 맞춤 · 20 겹친 모시 · 21 봉한 연서 · 22 구름문+붉은 실 */
html.pcard15 { --pcd: url("price-n15.webp?v=1"); } html.pcard16 { --pcd: url("price-n16.webp?v=1"); } html.pcard17 { --pcd: url("price-n17.webp?v=1"); }
html.pcard18 { --pcd: url("price-n18.webp?v=1"); } html.pcard19 { --pcd: url("price-n19.webp?v=1"); } html.pcard20 { --pcd: url("price-n20.webp?v=1"); }
html.pcard21 { --pcd: url("price-n21.webp?v=1"); } html.pcard22 { --pcd: url("price-n22.webp?v=1"); }
html:is(.pcard15, .pcard18, .pcard20).pc .price :is(.was, .pd) { color: rgba(70,32,45,.7) !important; }
html:is(.pcard15, .pcard18, .pcard20).pc .price .won { color: #46202d !important; }
html:is(.pcard15, .pcard18, .pcard20).pc .price .off { color: #d0283e !important; }
html:is(.pcard16, .pcard17).pc .buy .price { padding-top: 34px !important; }
html.pcard21.pc .buy .price { padding-top: 64px !important; }
html.pcard15.pc .buy .price { padding-left: 54px !important; }

/* 11/4 첫 화면 제목 글자 이미지 */
.brand.bimg { line-height: 0; margin-bottom: 6px; }
.brand.bimg img { display: block; width: min(320px, 82vw); height: auto; margin: 0 auto; filter: drop-shadow(0 6px 18px rgba(0,0,0,.45)); }

/* 11/5 폴드 펼침·태블릿·PC — 첫 화면~로딩도 같은 고정 비율(폭 = min(480px, 높이×0.62)), 바깥은 순검정 */
@media (min-width: 600px) {
  html, body { background: #000 !important; }
  .stage { max-width: min(480px, 62vh); max-width: min(480px, 62dvh); }
}