/* 첫 화면(index.html)만의 모양. lp.css(두 첫 화면 공통: 결과·신청 창) 위에 얹는다. 무료 결과 판은 lp2-result.css.
색: 흰 바탕에 검정, 무료 확인 칸만 짙은 남색, 금은 여덟 글자·후기 별에만. 글꼴은 전부 고딕(로고만 그림). - 사장 결정 9/30 */
body.v2 { --pb: 24px;
--v2-black: #111; --v2-black-2: #333; --v2-night: #0e0f13; --v2-night-2: #23252c; --v2-page: #fff; --v2-soft: #f4f4f2;
--card: #fff; --ink: #111; --sub: #6b6b6b; --line: #e8e8e4; --gold: #d4a53a; --gold-2: #f0d585; --red: #e03a2f;
--bg: var(--v2-page); --soft: #fff;
background: var(--v2-page); color: var(--ink); padding-bottom: var(--pb);
}
/* 머리: 로고는 왼쪽 붉은 낙관(兀人圓) + 붓글씨 올인원사주.
머리는 화면을 덜 먹게 낮게. 머리 높이(--hh)는 여기 한 곳에서 정한다(결과로 건너뛸 때도 이만큼 띄운다).
갈래 탭은 10/3 사장 결정으로 없앴다(카드 네 장이 한눈에 보인다) - 탭 높이(--th)는 0. */
body.v2 { --hh: 42px; --th: 0px; }
/* 전광판: 별점과 후기 한 줄이 흘러간다. 양 끝은 글자가 부드럽게 사라진다(10/2: 빨간 점·회색 띠 대신).
별은 후기마다 받은 별점 그대로(꽉 찬 별 = 받은 수, 흐린 별 = 나머지). */
.v2-ticker { position: relative; overflow: hidden; background: #fff; border-bottom: 1px solid var(--line); color: #333; font-size: 13px; font-weight: 500; }
.v2-ticker::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; z-index: 1; width: 28px; background: linear-gradient(90deg, #fff, rgba(255,255,255,0)); }
.v2-ticker::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; z-index: 1; width: 28px; background: linear-gradient(270deg, #fff, rgba(255,255,255,0)); }
.v2-ticker-track { display: flex; gap: 40px; width: max-content; padding: 6px 0; line-height: 1.4; animation: v2-tick var(--dur, 40s) linear infinite; }
.v2-ticker-track > span { white-space: nowrap; }
.v2-ticker-track .v2-tk-star { margin-right: 7px; font-size: 11px; font-style: normal; letter-spacing: 1px; color: var(--star); }
.v2-ticker-track .v2-tk-star s { color: #e2e2de; text-decoration: none; }
.v2-ticker-track .v2-tk-star, .v2-ticker-track .v2-tk-star s { display: inline-flex; vertical-align: -1px; }
.v2-ticker-track .v2-tk-star .rv-stars { gap: 1px; color: inherit; }
.v2-ticker-track .v2-tk-star .rv-stars svg { width: 12px; height: 12px; }
.v2-ticker-track .v2-tk-who { margin-left: 6px; font-weight: 500; color: #9a9a96; }
@keyframes v2-tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .v2-ticker-track { animation: none; } }
/* 카드 줄 */
.v2-row { padding: 26px 16px 4px; }
.v2-products { padding-top: 16px; }
/* 첫 화면 한 줄(10/5 사장): 작고 차분하게 - 포스터 네 장이 첫 화면에 거의 다 보이도록. 반응 한마디(바탕체) → 이유(붉은 글씨) → 정체(굵은 고딕) */
.v2-tagline { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.v2-products .v2-dots { margin-top: 6px; }
.v2-row-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.v2-row-head h2 { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 800; letter-spacing: -.02em; }
.v2-row-head p { font-size: 13px; color: var(--sub); }
.v2-row-head .rv-all { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--sub); text-decoration: none; }
/* 카드 네 장을 2×2 로 펼쳐 둔다(10/3 사장 - 넘기지 않아도 상품이 한눈에) */
.v2-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 4px 0 10px; }
.v2-card { text-align: left; background: transparent; border: 0; padding: 0; font: inherit; color: var(--ink); cursor: pointer; }
.v2-card:focus-visible { outline: 2px solid var(--v2-black); outline-offset: 3px; border-radius: 16px; }
.v2-poster { position: relative; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; background: linear-gradient(160deg, var(--v2-night-2) 0%, var(--v2-black) 100%); box-shadow: 0 10px 26px rgba(0,0,0,.14); }
.v2-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v2-poster video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.v2-new-ribbon {
position: absolute;
z-index: 2;
transform: rotate(-45deg);
background: #a62622;
color: #fff7e8;
border-block: 1px solid rgba(255, 236, 208, .72);
line-height: 1;
text-align: center;
text-shadow: 0 1px 1px rgba(66, 12, 10, .2);
box-shadow: 0 2px 5px rgba(35, 10, 10, .2);
pointer-events: none;
overflow: hidden;
}
.v2-new-ribbon::after {
content: "";
position: absolute;
top: -2px;
bottom: -2px;
left: -30px;
width: 24px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent);
transform: skewX(-20deg);
opacity: 0;
animation: v2-new-shine 4s linear -0.32s infinite;
}
@keyframes v2-new-shine {
0% { left: -30px; opacity: 0; }
3% { opacity: .85; }
17% { left: 108px; opacity: .85; }
19%, 100% { left: 108px; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.v2-new-ribbon::after { animation: none; opacity: 0; }
}
/* 무료 사주 확인(#check): 위에 그림 한 장(글자까지 그림 안에), 아래 짙은 남색 판에 밑줄 입력칸.
입력칸 줄마다 오른쪽 위에 고르는 것(여자·남자 / 양력·음력·윤달 / 시간 모름)을 작은 동그라미로 둔다.
여덟 글자는 여기서 미리 보여 주지 않는다(의식 장면에서 처음). 입력칸 이름·ID 는 lp.js 와 같아야 한다(계산·신청이 읽는다). */
body.v2 .v2-hero { --hero-bg: #111e31; --hero-line: #647083; --hero-sub: #a0aab9; --hero-cream: #f3e5cb;
position: relative; overflow: hidden; margin: 28px 16px 0; padding: 0; border-radius: 20px; background: var(--hero-bg); color: #fff; box-shadow: 0 12px 40px #192c450d; scroll-margin-top: calc(var(--hh) + var(--th) + 8px); }
.v2-hero-in { box-sizing: border-box; display: flex; flex-direction: column; width: min(100%, 400px); margin: 0 auto; padding: 20px 24px 22px; }
.v2-hero #lp-form { order: 1; margin: 0; }
/* 이름 칸: 전에 넣은 이름 목록(datalist)의 ▼ 단추는 숨긴다 - 칸을 누르면 목록은 그대로 뜬다 */
body.v2 .v2-form input[list]::-webkit-calendar-picker-indicator { display: none !important; opacity: 0; }
/* 입력칸: 밑줄만 */
.v2-f-row { position: relative; margin-top: 14px; }
.v2-f-row:first-child { margin-top: 0; }
body.v2 .v2-f { min-width: 0; margin: 0; }
body.v2 .v2-f > span { margin-bottom: 4px; font-size: 13px; font-weight: 650; letter-spacing: 0; color: #f4f5f7; transition: color 180ms ease, transform 180ms ease; }
body.v2 .v2-f:focus-within > span { color: #fff; transform: translateX(2px); }
body.v2 .v2-f input:not([type=radio]):not([type=checkbox]) { box-sizing: border-box; width: 100%; height: 40px; padding: 0 2px; border: 0; border-bottom: 1px solid var(--hero-line); border-radius: 0; background: transparent; color: #fff; font: inherit; font-size: 16px; font-weight: 500; outline: none; transition: border-color 180ms ease, box-shadow 180ms ease; }
body.v2 .v2-f input:not([type=radio]):not([type=checkbox]):focus { border-color: #e7edf8; box-shadow: 0 1px 0 #e7edf8; }
body.v2 .v2-f input::placeholder { color: var(--hero-sub); font-size: 14px; }
body.v2 .v2-f input:disabled { color: #7d8999; opacity: .55; }
body.v2 .v2-f input.is-bad { border-color: #ffb7b7; }
/* 브라우저 자동완성이 칸을 흰·하늘색으로 칠하지 않게: 크롬은 바탕색을 못 바꾸게 막아 두어서, 칸 안쪽을 판과 같은 색으로 덮고 글자를 흰색으로 고정한다. */
body.v2 .v2-f input:-webkit-autofill, body.v2 .v2-f input:-webkit-autofill:hover, body.v2 .v2-f input:-webkit-autofill:focus {
-webkit-text-fill-color: #fff; caret-color: #fff; -webkit-box-shadow: 0 0 0 100px var(--hero-bg) inset; box-shadow: 0 0 0 100px var(--hero-bg) inset; transition: background-color 100000s 0s; }
body.v2 .v2-f .field-hint, body.v2 .v2-form .form-error { color: #ffb7b7; }
/* 고르는 것: 줄 오른쪽 위, 작은 동그라미 + 글자 */
.v2-f-row > .v2-f-seg { position: absolute; right: 0; top: -13px; }
body.v2 .v2-seg { display: flex; gap: 10px; margin: 0; }
body.v2 .v2-seg label { position: relative; flex: none; min-width: 0; cursor: pointer; }
body.v2 .v2-seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; }
body.v2 .v2-seg span { display: flex; align-items: center; gap: 5px; height: 44px; min-width: 0; padding: 0 2px; border: 0; border-radius: 0; background: transparent; line-height: 1; white-space: nowrap; font-size: 13px; font-weight: 500; color: var(--hero-sub); transition: color 180ms ease; }
body.v2 .v2-seg span::before { content: ""; box-sizing: border-box; width: 14px; height: 14px; border: 1.5px solid #94a0b2; border-radius: 50%; transition: background 160ms ease, box-shadow 160ms ease; }
body.v2 .v2-seg input:checked + span { background: transparent; color: #fff; font-weight: 750; }
body.v2 .v2-seg input:checked + span::before { border-color: #fff; background: #fff; box-shadow: inset 0 0 0 3px var(--hero-bg); }
body.v2 .v2-seg input:focus-visible + span { outline: 2px solid #e7edf8; outline-offset: 3px; }
/* 단추 */
body.v2 .v2-open { width: 100%; min-height: 52px; margin-top: 18px; padding: 14px; border: 0; border-radius: 10px; background: var(--hero-cream); color: #192c45; box-shadow: none; font-size: 16px; font-weight: 700; letter-spacing: -.02em; transition: background 180ms ease, transform 150ms ease; }
body.v2 .v2-open:hover { background: #fff0d6; }
body.v2 .v2-open:active { transform: scale(.99); }
body.v2 .v2-open:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
@media (max-width: 390px) { .v2-hero-in { padding: 20px; } }
@media (prefers-reduced-motion: reduce) {
.v2-hero *, .v2-hero *::before { transition: none !important; animation: none !important; }
body.v2 .v2-f:focus-within > span, body.v2 .v2-open:active { transform: none; }
}
/* 리뷰: 옆으로 넘김 */
.v2-rating { font-size: 14px; font-weight: 800; color: var(--ink); }
.v2-rating { display: inline-flex; align-items: center; gap: 6px; }
.v2-rating b { font-size: 16px; }
.v2-rating small { font-weight: 600; color: var(--sub); }
.v2-slide { display: flex; gap: 12px; margin: 0 -16px; padding: 4px 16px 6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.v2-slide::-webkit-scrollbar { display: none; }
.v2-rv { flex: 0 0 84%; scroll-snap-align: center; padding: 18px 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(0,0,0,.05); }
.v2-rv p:not(.v2-rv-star) { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; font-size: 14.5px; line-height: 1.7; color: #333; word-break: keep-all; overflow-wrap: anywhere; }
.v2-dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.v2-dots i { width: 6px; height: 6px; border-radius: 50%; background: #ddd; transition: background .2s ease, width .2s ease; }
.v2-dots i.is-on { width: 18px; border-radius: 3px; background: var(--v2-black); }
.v2-sample-video-slot:empty { height: 96px; }
/* 무료 결과(압축판): 흰 바탕, 칸 사이 간격은 적당히, 태그는 검정 */
body.v2 .result { background: #fff; padding-bottom: 8px; }
body.v2 .result .r-block { margin-top: 30px; }
body.v2 .result .r-tag { margin-bottom: 8px; }
body.v2 .result .ans { font-size: 20px; }
body.v2 .result .txt { font-size: 15.5px; line-height: 1.7; }
body.v2 .result .locked { margin-top: 34px; }
/* 무료 결과(압축판)의 원국 표: 지장간·12운성·신살 줄은 풀이집에서. 여기선 여덟 글자와 십성만 */
body.v2 .result .wg tr:has(td.hid), body.v2 .result .wg tr:has(td.stage), body.v2 .result .wg tr:has(td.sal) { display: none; }
/* 후기 머리: "받아 본 분들 후기 ★4.9 ··· 전체 보기" 한 줄 */
.v2-reviews .v2-row-head h2 { font-size: 18px; white-space: nowrap; }
.v2-reviews .v2-rating, .v2-reviews .rv-all { white-space: nowrap; }
/* 글꼴: 전부 고딕(Pretendard). 로고는 붓글씨 그림이다 - 사장 결정 9/30.
무료 결과의 사주표(lp.css .wg)는 서진 첫 화면과 같이 쓰는 규칙이라 여기서 고딕으로 돌린다. */
body.v2 .wg td.gz b, body.v2 .wg td.hid span { font-family: inherit; }
/* 윤달 물음: 생년월일 줄 바로 아래, 작은 글 한 줄 + 두 선택 */
.v2-leap { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: #ffffff0d; }
.v2-leap .v2-seg { gap: 16px; }
.v2-leap p { margin: 0 0 4px; font-size: 13px; line-height: 1.5; color: #f4f5f7; word-break: keep-all; }
/* 풀이집 맛보기 덮개: 화면 전체를 풀이집으로 바꾼다 */
.v2-teaser { position: fixed; inset: 0; z-index: 1500; background: #0c111d; } /* 맛보기 바탕과 같은 먹남색 - 흰 바탕이 가장자리에 줄로 비쳤다(10/9 사장) */
.v2-teaser iframe { display: block; width: 100%; height: 100%; border: 0; }
html.v2-teaser-open, html.v2-teaser-open body { overflow: hidden; }
/* 맛보기를 여는 동안 어둠(.v2-veil)이 덮었다가 걷힌다 - 네 상품 모두 의식 장면 없이 바로 해설서(10/9 사장: 신년 세수 장면 뺌) */
.v2-teaser.is-rite { background: #070a12; }
/* 신청 창(10/3 사장): 가격은 영수증처럼, 손님이 넣은 것은 '정보 확인'에서 모두 다시 보고 고친다 */
.pay-check { margin: 4px 0 14px; padding: 14px 0 2px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: left; }
.pay-check h4 { margin: 0 0 10px; font-size: 16px; font-weight: 800; }
/* 약관 팝업(신청 창 위에 뜬다) */
.pay-legal { width: min(100% - 32px, var(--phone-w)); max-height: 82vh; margin: auto; padding: 22px 20px 18px; border: 0; border-radius: 16px; color: var(--ink); overflow-x: hidden; overflow-y: auto; }
.pay-legal[open] { display: block; }
.pay-legal::backdrop { background: rgba(0, 0, 0, .5); }
.pay-legal h3 { margin: 0 32px 14px 0; font-size: 19px; font-weight: 800; }
/* 좁은 팝업 한 장, 길면 창 안에서 세로로 내려 본다(10/3 사장) */
.pay-legal article { white-space: pre-wrap; font-size: 14px; line-height: 1.8; color: #333; overflow-wrap: anywhere; }
/* 정보 확인: 한지 쪽지에 적어 둔 메모. 붓 단추로 고치는 칸을 연다 */
.pay-memo-edit { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 10px; border: 0; border-radius: 16px; background: #f1ebde; color: #5a4a35; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.pay-memo-edit:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
/* 쪽지 한 장: 위에는 적어 둔 정보(#pay-memo), 아래에는 질문을 적는 칸. 고칠 때는 정보만 접힌다 */
.pay-note { position: relative; margin: 0 0 14px; color: #1a1a1a; }
.pay-memo { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px 18px; margin: 0 0 12px; padding: 0 2px 12px; border-bottom: 1px dashed rgba(60, 40, 10, .25); }
.pay-memo[hidden] { display: none; }
.pay-memo p { margin: 0; font-size: 15px; line-height: 1.7; }
.pay-memo .pm-k { font-size: 12.5px; color: #a8322a; }
.pay-memo .pm-name { font-size: 20px; font-weight: 600; line-height: 1.4; }
.pay-memo .pm-rows { grid-column: 1 / -1; margin: 0; }
.pay-memo .pm-who:only-of-type { grid-column: 1 / -1; }
.pay-note .pay-memo-edit { position: absolute; top: 12px; right: 12px; z-index: 1; background: rgba(168, 50, 42, .1); color: #8a2a23; font-family: inherit; }
.pay-note .pay-memo-edit svg { width: 16px; height: 16px; }
.pay-chk { display: inline-flex; align-items: center; gap: 6px; height: 42px; flex: none; font-size: 14px; font-weight: 700; white-space: nowrap; }
.pay-chk input { width: 18px; height: 18px; margin: 0; }
.pay-since { display: flex; flex-wrap: wrap; gap: 6px; }
.pay-since label { flex: 1 1 auto; }
.pay-since input { position: absolute; opacity: 0; pointer-events: none; }
.pay-since span { display: block; height: 38px; line-height: 36px; padding: 0 10px; border: 1.5px solid #cfcfcf; border-radius: 10px; background: #fff; text-align: center; font-size: 14px; font-weight: 600; white-space: nowrap; }
.pay-since input:checked + span { border-color: var(--ink); background: var(--ink); color: #fff; }
.pay-since input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
/* 신청 창 다이어트(10/3 사장: 가로 스크롤 없이, 세로 스크롤도 되도록 없이). 제목에 상품 이름이 있으니 가격표의 이름 줄은 뺀다. */
#pay { overflow-x: hidden; padding: 22px 20px 18px; }
#pay #pay-body > h3 { margin-bottom: 8px; }
#pay .pay-check h4 { margin-bottom: 6px; }
#pay .btn.red { margin-top: 12px; padding-top: 14px; padding-bottom: 14px; }
/* 신청 창의 알림: 화면 위쪽에 떠 있는 딱지(창 길이를 바꾸지 않는다) */
#pay .form-error { position: fixed; top: var(--err-y, 50%); left: 50%; z-index: 5; width: max-content; max-width: calc(100vw - 40px); margin: 0; padding: 12px 20px; border-radius: 999px; background: #c9302a; color: #fff; font-size: 15px; font-weight: 700; text-align: center; transform: translate(-50%, -50%); box-shadow: 0 12px 24px -10px rgba(0, 0, 0, .6); animation: pay-err-in .25s ease both; } /* 보이는 화면 한가운데(자판이 올라와도 - lp.js 가 --err-y 를 맞춘다, 10/9 사장: 위에 떠서 자판에 가렸다) */
#pay .form-error[hidden] { display: none; }
#pay .form-error { pointer-events: none; } /* 알림은 눌리지 않는다 - 가리킨 칸(연애 알약 등)이 화면 가운데 알림 밑에 있어도 바로 누를 수 있게(10/10) */
@keyframes pay-err-in { from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)); } to { opacity: 1; transform: translate(-50%, -50%); } }
.pay-mood-q { display: block; margin: 12px 0 5px; font-size: 13.5px; font-weight: 700; }
.pay-note { font-weight: 700; }
/* 쪽지 안에서 고치기: 메모 자리 그대로, 글자가 칸·드롭박스로 바뀐다(밑줄만 있는 작은 칸) */
.pay-note .pay-edit[hidden] { display: none; }
/* 풀이집에서 넘어온 신청 화면: 팝업이 아니라 다음 쪽처럼(화면 가득, 한지 바탕) */
#pay.is-page { width: 100%; max-width: var(--phone-w); height: 100dvh; max-height: none; margin: 0 auto; border-radius: 0; }
#pay.is-page #pay-body > h3 { font-family: 'MaruBuri', serif; font-size: 26px; }
/* 신청 화면 머리: 올인 얼굴과 한마디(10/4 사장: 더 마음이 가게). 제목 줄 옆에 붙여 높이는 거의 늘지 않게 */
/* 쪽지 속 질문 칸: 공용 textarea 의 최소 높이(108px)가 정해 둔 높이(64px)를 이기고 있었다 - 신청 화면이 넘쳐 스크롤이 생기던 원인 */
#pay.is-page { padding-top: 12px; padding-bottom: 10px; }
#pay.is-page .pay-check > h4 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* 쪽지가 곧 정보 확인 - 제목 줄은 화면에서 빼고 읽어 주기만 */
#pay.is-page .pay-bill > div { padding-block: 3px; }
#pay.is-page .pay-form > .field { margin-bottom: 10px; }
#pay.is-page .agree { margin-block: 6px; }
/* 수정 칸 드롭박스의 목록(10/10 사장: 한지·명조 굵은 글씨가 옛날 것 같고 글자가 컸다) - 결제 창 칸과 같은 결: 흰 카드·옅은 테두리·13.5px, 고른 값은 붉은 글씨 */
.pay-note .pe-pop { position: absolute; z-index: 5; box-sizing: border-box; min-width: 150px; max-width: 240px; max-height: 260px; overflow-y: auto; padding: 4px; border: 1px solid #e4e2dc; border-radius: 10px; background: #fff; box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .28); }
.pay-note .pe-pop button { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px; background: none; text-align: left; font: inherit; font-size: 13.5px; font-weight: 500; line-height: 1.35; color: #222; cursor: pointer; }
.pay-note .pe-pop button:hover { background: #f5f4f1; }
.pay-note .pe-pop button[aria-selected="true"] { color: #a8322a; font-weight: 700; }
/* 고치는 칸도 한 화면에(스크롤 없이): 줄 높이·간격을 줄이고 '시간 모름' 이 같은 줄에 서게 */
/* 쪽지의 빈칸(연애 상태를 안 고름): 붉은 점선 밑줄로 눈에 띄게, 누르면 고르는 칸이 열린다 */
.pay-note .pm-rows dd.is-missing button { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: #a8322a; cursor: pointer; }
/* ── 신청 창(10/4 사장: 난잡하다 - 한 가지 결로 다시) ───────────────────
흰 바탕, 글자는 모두 고딕, 입력 칸은 모두 같은 회색 칸, 테두리·종이·테이프·분홍 띠 없음.
위에서 아래로: 제목 · 배너 · 값 한 줄 · 연락처 · 내 정보 · 질문 · 쿠폰 · 동의 · 결제 */
#pay, #pay * { font-family: "Pretendard Variable", "Pretendard", "Apple SD Gothic Neo", sans-serif !important; }
#pay.is-page, #pay.is-page::backdrop { background: #fff; }
#pay.is-page { padding: 12px 16px 24px; scrollbar-width: none; }
#pay.is-page::-webkit-scrollbar { display: none; }
#pay .pay-close .pay-x { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; background: none; color: #333; font-size: 0; cursor: pointer; }
#pay .pay-close .pay-x:focus-visible { outline-offset: 2px; }
#pay .pay-title { margin: 2px 44px 2px 0; font-size: 17px; font-weight: 700; line-height: 1.4; color: #111; }
#pay .pay-poster { margin: 0 0 12px; border-radius: 10px; overflow: hidden; } /* 아래 카드(목차·정보 확인·값)와 같은 폭·여백·모서리(10/10 사장: 배너만 화면 끝까지 붙어 있었다) */
#pay .pay-poster img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 2; object-fit: cover; }
/* 값: 왼쪽 할인 내용, 오른쪽 최종 금액. 남은 시간은 작은 회색 글씨 */
/* 입력 칸: 모두 같은 회색 칸 */
#pay .field input, #pay .gift-row input { box-sizing: border-box; width: 100%; border: 0; border-radius: 10px; background: #f4f4f2; font-size: 15px; font-weight: 400; color: #111; }
#pay .field input, #pay .gift-row input { height: 46px; padding: 0 14px; }
#pay .field input::placeholder, #pay .gift-row input::placeholder { color: #9a9a9a; }
/* 내 정보: 종이 대신 회색 칸 하나 */
#pay .pay-check { margin: 0; padding: 0; border: 0; }
#pay .pay-check h4 { display: none; }
#pay .pay-note { margin: 0 0 10px; border-radius: 10px; background: #f4f4f2; }
#pay .pay-note .pay-memo-edit { top: 10px; right: 10px; height: 28px; padding: 0 10px; border-radius: 14px; background: #fff; color: #333; font-size: 13px; font-weight: 600; }
#pay .pay-memo { gap: 2px 14px; margin: 0; padding: 0; border: 0; }
#pay .pay-memo p { font-size: 14.5px; line-height: 1.6; color: #333; }
#pay .pay-memo .pm-name { font-size: 17px; font-weight: 700; color: #111; }
/* 질문: 정보 칸 아래 따로 한 칸 */
/* 쿠폰 */
#pay .pay-cps { display: grid; gap: 0; margin: 0 0 6px; }
#pay .pay-cp { padding: 8px 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; font-size: 14.5px; }
#pay .pay-cp b { color: #c8322a; font-weight: 700; }
#pay .pay-cp-nm { margin-left: 4px; color: #888; font-weight: 400; }
#pay .gift-row { display: flex; gap: 8px; }
#pay .gift-row input { flex: 1; min-width: 0; height: 42px; }
#pay .gift-row button { flex: none; height: 42px; padding: 0 16px; border: 0; border-radius: 10px; background: #e9e9e6; color: #333; font-size: 14px; font-weight: 600; }
/* 동의·결제·약관 */
#pay .agree { display: flex; align-items: center; gap: 10px; margin: 12px 0; font-weight: 400; line-height: 1.5; }
#pay .agree input[type="checkbox"] { flex: none; width: 22px; height: 22px; margin: 0; accent-color: #c8322a; }
#pay form > .btn.red { width: 100%; min-height: 54px; margin: 0; border-radius: 12px; font-size: 17px; font-weight: 700; }
#pay .pay-legal { display: flex; justify-content: center; gap: 8px; margin: 10px 0 0; font-size: 12.5px; color: #999; }
#pay .pay-legal a { color: #888; text-decoration: underline; }
/* 값(10/4 사장): 영수증처럼 한 덩이. 정가 → 할인 하나씩(쿠폰은 그 줄에서 고른다) → 최종 결제 금액 */
/* 가격표(10/9 사장: 회색 판에 영수증처럼 깔끔하게) - ○○ 복채(취소선) → 특별 타임할인(남은 시간·붉은 할인율) → 쿠폰 → 최종 결제 금액 */
#pay .pay-sum { margin: 4px 0 12px; padding: 6px 14px; border-radius: 10px; background: #f6f6f4; }
#pay .ps-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 32px; font-size: 14px; color: #333; }
#pay .ps-k { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
#pay .ps-v { font-weight: 600; white-space: nowrap; }
#pay .ps-row.is-off .ps-v { color: #c8322a; }
/* 타임할인 줄: 시계는 '타임할인' 바로 옆(10/10 사장) - 이름을 '타임할인'으로 줄여 할인 금액까지 한 줄에 들어가게 */
#pay .ps-row s { color: #8a8a8a; text-decoration-color: rgba(224, 50, 42, .45); text-decoration-thickness: 1px; }
#pay .ps-pct { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 999px; background: #d93a2b; color: #fff; font-style: normal; font-size: 13px; font-weight: 800; line-height: 1.5; vertical-align: 1px; }
#pay .ps-clock { padding: 1px 6px; border-radius: 999px; background: #fdeeec; white-space: nowrap; }
#pay .ps-clock, #pay .ps-clock b { margin: 0; font-size: 11.5px; font-weight: 700; color: #c8322a; font-variant-numeric: tabular-nums; }
#pay .ps-total { margin-top: 6px; padding: 8px 0 4px; border-top: 1px solid #e4e4e0; font-weight: 700; color: #111; }
#pay .ps-total b { font-size: 24px; font-weight: 800; color: #c8322a; }
#pay .cp-sum { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 40px; padding: 0; border: 0; background: none; color: #333; font: inherit; font-size: 14.5px; text-align: left; cursor: pointer; }
#pay .cp-sum-k { flex: none; }
#pay .cp-sum svg { flex: none; color: #999; transition: transform .2s; }
#pay .cp-sum[aria-expanded="true"] svg { transform: rotate(180deg); }
#pay .cp-sum-v { display: flex; flex: 1; min-width: 0; align-items: center; justify-content: flex-end; gap: 8px; order: 3; }
#pay .cp-sum-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #888; font-size: 13px; }
#pay .cp-sum-v b { flex: none; color: #c8322a; font-weight: 600; }
#pay .cp-sum svg { order: 2; }
#pay .cp-sum:focus-visible { outline: 2px solid #c8322a; outline-offset: 2px; }
#pay .cp-more { margin: 0 0 8px; padding: 4px 12px 10px; border-radius: 10px; background: #fff; }
#pay .cp-more[hidden] { display: none; }
#pay .gift-msg { margin: 0 0 6px; font-size: 13px; color: #666; }
/* 정보 확인 · 연락처 · 동의(10/4 사장) */
#pay .pay-note { padding: 4px 14px 0; }
#pay .pay-memo { display: block; }
#pay .pay-memo .pm-rows { margin: 0; }
#pay .pay-memo .pm-rows div { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 38px; font-size: 14.5px; line-height: 1.4; }
#pay .pay-memo .pm-rows dt { flex: none; color: #777; }
#pay .pay-memo .pm-rows dd { margin: 0; text-align: right; font-weight: 600; color: #111; }
#pay .pay-memo .pm-rows small { margin: 0 0 0 4px; color: #888; font-size: 12.5px; font-weight: 400; }
#pay .pay-memo .pm-k { margin: 8px 0 0; font-size: 12.5px; color: #c8322a; font-weight: 600; }
#pay .agree { justify-content: center; text-align: center; font-size: 15px; color: #333; }
#pay .pay-note .pay-edit { position: relative; margin: 0; border: 0; }
#pay .pay-note .pay-who { margin: 0; padding: 0; border: 0; }
#pay .pay-note .pay-who legend { margin: 8px 0 2px; padding: 0; font-size: 12.5px; font-weight: 600; color: #c8322a; }
#pay .pay-note .pay-who legend:empty { display: none; }
/* 정가 취소선은 가늘고 옅게 - 원래 값이 읽히게 */
/* 10/5 사장: 수정하기는 정보 칸 안 맨 위 줄, 연락처는 회색 칸 안에 이름표, 정가 취소선 더 가늘고 옅게 */
#pay .pay-note .pay-check-h { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin: 0 0 2px; padding: 4px 0 6px; border-bottom: 1px solid #e6e6e2; font-size: 14.5px; font-weight: 700; color: #111; }
#pay .pay-note .pay-check-h .pay-memo-edit { position: static; display: inline-flex; align-items: center; gap: 4px; border: 0; cursor: pointer; }
#pay .pay-phone { display: flex; align-items: center; gap: 12px; min-height: 52px; margin: 4px 0 12px; padding: 0 14px; border-radius: 10px; background: #f4f4f2; }
#pay .pay-phone > span { position: static !important; width: auto !important; height: auto !important; clip: auto !important; overflow: visible !important; flex: none; margin: 0 !important; font-size: 14.5px; font-weight: 700; color: #111; }
#pay .pay-phone input { flex: 1; min-width: 0; height: 52px !important; padding: 0 !important; border: 0; background: none !important; font-size: 15.5px; }
/* 10/5 사장: 수정하기는 글자만, 연락처 번호 가운데, 질문은 보기 화면의 한 줄 */
#pay .pay-note .pay-check-h .pay-memo-edit { height: auto; padding: 4px 2px; border-radius: 0; background: none; color: #777; font-size: 13.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
#pay .pay-note .pay-check-h .pay-memo-edit:hover { color: #111; }
#pay .pay-phone input { text-align: center; }
#pay .pay-memo .pm-rows dd { white-space: pre-wrap; word-break: keep-all; }
/* 브라우저 자동 채우기의 파란 바탕을 칸 색으로 덮는다(10/5 사장) */
#pay input:-webkit-autofill, #pay input:-webkit-autofill:hover, #pay input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 40px #f4f4f2 inset !important; -webkit-text-fill-color: #111 !important; caret-color: #111; }
#pay input:autofill { background: inherit !important; }
/* 값 줄 간격 좁게(10/5 사장) */
#pay .pay-sum .cp-sum { min-height: 32px; }
#pay .pay-note { padding-bottom: 20px !important; }
/* 카카오 친구 추가 쿠폰 알림(10/5) */
.ch-pop { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 20px; background: rgba(20, 16, 10, .55); }
.ch-in { position: relative; width: min(100%, 340px); padding: 30px 22px 22px; border-radius: 16px; background: #fffaf0; text-align: center; box-shadow: 0 20px 50px rgba(0, 0, 0, .3); }
.ch-t { margin: 0 0 8px; font-size: 18px; font-weight: 800; color: #1d1710; word-break: keep-all; }
.ch-s { margin: 0 0 18px; font-size: 14.5px; color: #6b5d48; word-break: keep-all; }
.ch-go { display: block; width: 100%; margin-top: 14px; padding: 14px; border: 0; border-radius: 12px; background: #fee500; color: #191600; font-size: 16px; font-weight: 800; text-decoration: none; cursor: pointer; }
.ch-again { display: block; margin-top: 12px; font-size: 14px; color: #6b5d48; text-decoration: underline; text-underline-offset: 3px; }
.ch-in.is-kc { padding: 0 22px 22px; overflow: hidden; }
/* 위 노란 띠에 쿠폰 한 장(첫 화면 카카오 띠와 같은 쿠폰) */
.ch-hero { display: grid; place-items: center; margin: 0 -22px 18px; padding: 26px 0 22px; background: #fee500; }
.ch-ticket { position: relative; display: grid; justify-items: center; width: 150px; padding: 14px 0 12px; border-radius: 12px; background: #fff; transform: rotate(-5deg); box-shadow: 0 8px 18px rgba(60, 30, 30, .2); }
.ch-ticket::before, .ch-ticket::after { content: ""; position: absolute; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: #fee500; }
.ch-ticket::before { left: -9px; } .ch-ticket::after { right: -9px; }
.ch-ticket b { font-size: 32px; line-height: 1; font-weight: 900; letter-spacing: -.03em; color: #3c1e1e; }
.ch-ticket b em { font-size: .55em; font-style: normal; margin-left: 2px; }
.ch-ticket small { margin-top: 5px; font-size: 12px; font-weight: 700; color: #8a6a3a; }
.ch-stamp { position: absolute; right: 22%; top: 14px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 2.5px solid #c8322a; color: #c8322a; font-style: normal; font-size: 13px; font-weight: 900; transform: rotate(14deg); background: rgba(255, 255, 255, .85); z-index: 1; }
.ch-in.is-kc .ch-t { font-size: 19px; line-height: 1.4; }
.ch-in.is-kc .ch-s { margin-bottom: 4px; font-size: 14px; line-height: 1.6; }
.ch-in.is-kc .ch-go { background: #3c1e1e; color: #fee500; }
.ch-in.is-kc .ch-x:not(.ch-go) { z-index: 2; color: #3c1e1e; }
.ch-x:not(.ch-go) { position: absolute; top: 8px; right: 10px; width: 34px; height: 34px; border: 0; background: none; font-size: 22px; color: #6b5d48; cursor: pointer; }
/* 정통사주 무료: 의식 장면 없이 웹툰으로. 어둠 속에서 등불 켜지듯 서서히 밝아지며 열린다(10/5 사장) */
.v2-teaser.is-rite.is-quick { background: #060507; }
.v2-veil { position: absolute; inset: 0; z-index: 2; background: radial-gradient(ellipse 70% 55% at 50% 42%, #2a1f14 0%, #0b0907 62%, #050406 100%); transition: opacity 1.9s cubic-bezier(.45, 0, .2, 1); }
.v2-veil.is-out { opacity: 0; pointer-events: none; }
.v2-teaser.is-quick iframe { opacity: 0; filter: brightness(.35) saturate(.7); transition: opacity 1.3s ease, filter 2.4s ease; } /* 크기는 그대로, 어둠에서 밝아지기만 - 커졌다 줄어드는 게 '사진이 작아졌다'로 보였다(10/9 사장) */
.v2-teaser.is-quick iframe.is-in { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) { .v2-teaser.is-quick iframe { opacity: 1; transform: none; filter: none; transition: none; } }
/* 무료 행운 부적 띠(10/7 사장: 카카오 띠와 같은 꼴·같은 높이) - 붉은 바탕, 글자, 오른쪽에 부적 석 장을 부채꼴로 */
.v2-charm { display: block; background: #b52b24; color: #fff6e6; text-decoration: none; container-type: inline-size; box-shadow: 0 8px 20px -12px rgba(120, 20, 10, .6); }
.v2-charm-in { position: relative; display: flex; align-items: center; }
.v2-charm-l { flex: 1; min-width: 0; position: relative; z-index: 1; }
.v2-charm-k { display: block; font-weight: 700; color: #ffd9c2; } /* 둥근 상자 없이 한 줄(10/7 사장: 아래 단추와 헷갈렸다) - 카카오 띠의 '카카오톡 채널' 줄과 같은 자리 */
.v2-charm-l > b { display: block; font-weight: 800; letter-spacing: -0.03em; word-break: keep-all; }
.v2-charm-l > i { display: inline-block; border-radius: 999px; background: #fff6e6; color: #b52b24; font-style: normal; font-weight: 800; }
.v2-charm-pics { position: absolute; right: 7cqw; top: 50%; width: 40cqw; height: 100%; transform: translateY(-50%); pointer-events: none; }
.v2-charm-pics > span { position: absolute; bottom: 4%; width: 46%; aspect-ratio: 2 / 3; border-radius: 1.2cqw; overflow: hidden; container-type: inline-size; box-shadow: 0 6px 14px rgba(60, 10, 5, .4); transform-origin: bottom center; }
.v2-charm-pics img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 부적 아래 빈 칸에 이름(lp.js 가 '나' 이름으로 바꾼다) - 실제 부적처럼 */
.v2-charm-pics em { position: absolute; left: 6%; right: 6%; top: 77%; bottom: 4%; display: grid; place-items: center; color: #8a1f17; font-size: 8.4cqw; font-style: normal; font-weight: 900; line-height: 1.2; white-space: nowrap; } /* 썸네일은 이름 한 줄만 크게(10/9 사장: 세 줄은 작아서 뭉개졌다) - 글자 크기는 부적 한 장 폭 기준 */
.v2-charm-pics em b { font-weight: 900; }
.v2-charm-pics > span:nth-child(1) { left: 0; transform: rotate(-12deg) translateY(6%); }
.v2-charm-pics > span:nth-child(2) { left: 27%; z-index: 1; transform: translateY(-2%); }
.v2-charm-pics > span:nth-child(3) { left: 54%; transform: rotate(12deg) translateY(6%); }
/* 카카오 친구 추가 2,000원 쿠폰 띠(10/7) - 부적 띠 아래, 같은 꼴·같은 높이. 카카오 노랑·글자·쿠폰 한 장(그림 배너 금지, 10/5 사장) */
/* cqw 는 조상 컨테이너 기준이라 크기 가둠(container)은 바깥 a 에, 안쪽 칸(.v2-kc-in)이 cqw 로 잰다(같은 요소에 두면 화면 폭으로 재서 띠가 커졌다, 10/7) */
.v2-kc { display: block; background: #fee500; color: #191600; text-decoration: none; container-type: inline-size; box-shadow: 0 8px 20px -12px rgba(60, 30, 30, .45); }
.v2-kc[hidden] { display: none; }
.v2-kc-in { display: flex; align-items: center; gap: 4cqw; }
.v2-kc-l { flex: 1; min-width: 0; }
.v2-kc-k { display: inline-flex; align-items: center; gap: 1.6cqw; font-weight: 700; color: #3c1e1e; }
.v2-kc-k svg { width: 5.2cqw; height: 5.2cqw; }
.v2-kc-l > b { display: block; font-weight: 800; letter-spacing: -0.03em; word-break: keep-all; }
.v2-kc-l > i { display: inline-block; border-radius: 999px; background: #3c1e1e; color: #fee500; font-style: normal; font-weight: 800; }
.v2-kc-cp { flex: none; position: relative; width: 32cqw; margin: 0 1cqw 0 0; padding: 3cqw 1cqw 2.8cqw; border-radius: 3cqw; background: #fff; text-align: center; transform: rotate(-6deg); box-shadow: 0 6px 14px rgba(60, 30, 30, .18); }
.v2-kc-cp::before, .v2-kc-cp::after { content: ""; position: absolute; top: 50%; width: 5cqw; height: 5cqw; margin-top: -2.5cqw; border-radius: 50%; background: #fee500; }
.v2-kc-cp::before { left: -2.5cqw; } .v2-kc-cp::after { right: -2.5cqw; }
.v2-kc-cp b { display: block; font-size: 6.4cqw; line-height: 1; font-weight: 900; color: #3c1e1e; letter-spacing: -0.03em; white-space: nowrap; }
.v2-kc-cp em { font-size: .62em; font-style: normal; font-weight: 800; margin-left: .05em; }
.v2-kc-cp small { display: block; margin-top: 1.6cqw; font-size: 3cqw; font-weight: 700; color: #8a6a3a; }
/* 결제창 고르기 칸(10/5 사장: 드롭박스가 구렸다) - 깔끔한 흰 칸, 연한 테두리, 오른쪽에 가는 꺾쇠 하나 */
#pay select:not([multiple]):not([size]):not(.pe-in) { /* 수정 칸(.pe-in)은 아래 정보 고치기 한 벌이 그린다 */
-webkit-appearance: none; appearance: none; box-sizing: border-box; height: 40px; line-height: normal; padding: 0 34px 0 12px;
border: 1px solid #dcdcd8; border-radius: 10px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%23777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center / 16px;
font-family: inherit; font-size: 15px; font-weight: 600; color: #111; text-align-last: left; cursor: pointer; box-shadow: none;
}
#pay select:not([multiple]):not([size]):not(.pe-in):focus { border-color: #a8322a; outline: none; }
/* 닫기 X: 동그라미 없이 X 만(10/5 사장) - 창이 열릴 때 X 에 초점이 가며 동그란 테두리가 그려졌다 */
#pay .pay-close .pay-x { border-radius: 0; }
#pay .pay-close .pay-x:focus, #pay .pay-close .pay-x:focus-visible { outline: none; box-shadow: none; }
/* 정보 고치기(10/10 사장: 지저분하다 - 밑줄 칸·네모 고르기·체크박스가 섞이고 줄마다 높이·정렬이 달랐다). 한 벌로:
한 줄 = 왼쪽 이름표 + 오른쪽 값(오른쪽 끝 맞춤), 줄 높이 같게. 적는 칸·고르는 칸은 같은 옅은 흰 칸(.pe-in),
보기가 적은 값(성별·달력·모름·연애 상태)은 알약 단추(.pe-pill), 연애에 딸린 칸(기간·마음·자녀)은 아래 한 줄에 같은 폭으로. */
#pay .pe-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 3px 0; }
#pay .pe-k { flex: none; color: #777; font-size: 13.5px; }
#pay .pe-v { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; }
#pay .pay-edit .pe-in { box-sizing: border-box; height: 30px; margin: 0; padding: 0 8px; border: 1px solid #e4e2dc; border-radius: 8px; background: #fff; font: inherit; font-size: 13.5px; font-weight: 600; line-height: normal; color: #111; text-align: left; box-shadow: none; outline: none; }
#pay .pay-edit .pe-in:focus { border-color: #a8322a; }
#pay .pay-edit .pe-in::placeholder { color: #aaa; font-weight: 500; }
#pay .pay-edit input.pe-in:disabled { background: #f7f6f3; color: #aaa; }
#pay .pay-edit input.pe-in:-webkit-autofill, #pay .pay-edit input.pe-in:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 40px #fff inset !important; }
#pay .pay-edit .pe-name { width: 80px; }
#pay .pay-edit .pe-birth { width: calc(10ch + 18px); font-variant-numeric: tabular-nums; }
#pay .pay-edit .pe-time { width: calc(5ch + 18px); font-variant-numeric: tabular-nums; }
#pay .pay-edit .pe-line select.pe-in { width: 150px; } /* 고르는 칸은 줄마다 같은 폭(긴 보기는 말줄임 - 펼친 목록에는 다 보인다) */
#pay .pay-edit select.pe-in { -webkit-appearance: none; appearance: none; max-width: 100%; padding-right: 26px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 7px center / 14px; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; color-scheme: light; }
#pay .pe-seg { display: inline-flex; gap: 3px; }
#pay .pe-pill { position: relative; display: inline-flex; flex: none; cursor: pointer; }
#pay .pe-pill input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
#pay .pe-pill span { display: inline-flex; align-items: center; height: 28px; padding: 0 8px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px #e4e2dc; font-size: 12px; font-weight: 600; color: #666; white-space: nowrap; transition: background-color .15s, color .15s; }
#pay .pe-pill input:checked + span { background: #a8322a; box-shadow: none; color: #fff; }
#pay .pe-pill input:focus-visible + span { outline: 2px solid #a8322a; outline-offset: 2px; }
#pay .pay-edit .pe-since { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; padding: 0 0 7px; }
#pay .pay-edit .pe-since[hidden], #pay .pay-edit .pe-since:empty { display: none; }
#pay .pay-edit .pe-since .pe-in { width: 100%; font-size: 13px; }
#pay .pay-edit .pe-q { align-items: flex-start; }
#pay .pay-edit .pe-q .pe-k { line-height: 30px; }
#pay .pay-edit .pe-q .pe-v { flex: 1; flex-direction: column; align-items: flex-end; gap: 2px; }
#pay .pay-edit .pe-q textarea.pe-in { display: block; width: 100%; min-height: calc(3 * 1.4em + 10px); padding: 5px 10px; line-height: 1.4; resize: none; overflow: hidden; } /* 세 줄 높이(10/10 사장) */
#pay .pay-edit .pe-count { font-size: 11px; line-height: 1.2; font-weight: 400; color: #aaa; font-variant-numeric: tabular-nums; }
/* 펼쳐지는 보기 목록도 흰 바탕(10/5 사장: 누리끼리했다 - 폰이 페이지 바탕색을 따라 목록을 칠했다) */
#pay select { color-scheme: light; }
#pay select option { background: #fff; color: #111; }
/* 부제(10/7 사장: 예쁘게) - 명조, 양옆에 가는 금빛 줄, 자간 넉넉히. 괄호는 그리지 않는다(lp.js 가 빼고 넣는다) */
#pay .pay-sub { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 2px 0 12px; font-family: "Noto Serif KR", serif; font-weight: 600; font-size: 14.5px; letter-spacing: .14em; color: #8a6a2e; }
#pay .pay-sub::before, #pay .pay-sub::after { content: ""; width: 28px; height: 1px; background: linear-gradient(90deg, transparent, #c9a24a); }
#pay .pay-sub::after { background: linear-gradient(90deg, #c9a24a, transparent); }
/* 부적 세 장·쿠폰이 둥실둥실(10/7 사장: 산만하지 않게) - 기울기(transform)는 그대로 두고 translate 만 천천히 오르내린다. 장마다 박자를 어긋나게. */
@keyframes v2-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5%; } }
@keyframes v2-bob-cp { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -1.6cqw; rotate: 2deg; } }
.v2-charm-pics > span { animation: v2-bob 3.6s ease-in-out infinite; }
.v2-charm-pics > span:nth-child(2) { animation-delay: -1.2s; animation-duration: 4s; }
.v2-charm-pics > span:nth-child(3) { animation-delay: -2.4s; animation-duration: 3.8s; }
.v2-kc-cp { animation: v2-bob-cp 3.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .v2-charm-pics > span, .v2-kc-cp { animation: none; } }
/* 배너 대신 세로 포스터를 쓸 때(위 lp.js payBanner) - 얼굴이 들어오게 위쪽을 잡는다 */
#pay .pay-poster img[src*="/poster-"] { object-position: center 18%; }
/* 부적·친구 추가 단추에 생동감(10/7 사장): 빛 한 줄이 3.6초마다 쓸고 지나가고, 단추가 아주 살짝 숨 쉰다. 두 띠는 박자를 어긋나게. */
@keyframes v2-btn-shine { 0%, 55% { transform: translateX(-120%) skewX(-20deg); } 85%, 100% { transform: translateX(260%) skewX(-20deg); } }
@keyframes v2-btn-breath { 0%, 100% { scale: 1; } 50% { scale: 1.045; } }
.v2-charm-l > i, .v2-kc-l > i { position: relative; overflow: hidden; animation: v2-btn-breath 2.4s ease-in-out infinite; transform-origin: left center; }
.v2-charm-l > i::after, .v2-kc-l > i::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent); animation: v2-btn-shine 3.6s ease-in-out infinite; pointer-events: none; }
.v2-kc-l > i::after { background: linear-gradient(90deg, transparent, rgba(254,229,0,.45), transparent); }
.v2-kc-l > i, .v2-kc-l > i::after { animation-delay: -1.2s; }
@media (prefers-reduced-motion: reduce) { .v2-charm-l > i, .v2-kc-l > i, .v2-charm-l > i::after, .v2-kc-l > i::after { animation: none; } }
/* 숨은 치비 찾기 배너(10/7 사장): 부적·카카오 띠와 다른 색 - 밤하늘 남색에 금빛, 오른쪽에 진행자 동물 셋과 찾은 수 */
.v2-hunt { display: block; padding: 0; border: 0; background: radial-gradient(120% 140% at 85% 30%, #2c3f7a 0%, #16224a 55%, #0e1633 100%); color: #fff; text-align: left; font: inherit; cursor: pointer; container-type: inline-size; }
.v2-hunt-in { display: flex; align-items: center; gap: 3cqw; }
.v2-hunt-l { flex: 1; }
.v2-hunt-k { display: inline-block; font-weight: 700; color: #f2c96b; }
.v2-hunt-l > b { display: block; font-weight: 800; letter-spacing: -0.03em; word-break: keep-all; }
.v2-hunt-l > i { display: inline-block; border-radius: 999px; background: #f2c96b; color: #16224a; font-style: normal; font-weight: 800; }
.v2-hunt-pics { flex: none; }
.v2-hunt-pics img:nth-child(1) { transform: rotate(-8deg); }
.v2-hunt-pics img:nth-child(2) { transform: rotate(5deg); }
.v2-hunt-pics img:nth-child(3) { transform: rotate(10deg); }
.v2-hunt-pics em { position: absolute; right: 0; bottom: 0; padding: 0.8cqw 2.4cqw; border-radius: 999px; background: #a8322a; color: #fff; font-style: normal; font-size: 3.2cqw; font-weight: 800; }
/* 어디 숨었는지 창 */
.hunt-pop { position: fixed; inset: 0; z-index: 9998; display: grid; place-items: center; padding: 20px; background: rgba(10, 14, 30, .55); }
.hunt-pop-in { width: 100%; max-width: 360px; padding: 22px 20px 18px; border-radius: 18px; background: #fff; color: #1b1713; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .6); }
.hunt-pop-t { margin: 0 0 4px; font-size: 18px; font-weight: 800; }
.hunt-pop-s { margin: 0 0 14px; font-size: 13.5px; color: #6f665a; line-height: 1.6; }
.hunt-pop-dots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 0 0 14px; }
.hunt-pop-dots span { aspect-ratio: 1; border-radius: 50%; background: #efe9dd; box-shadow: inset 0 0 0 1.5px #ddd3c2; }
.hunt-pop-dots span.is-on { background-color: #fff; background-position: center; background-size: 92%; background-repeat: no-repeat; box-shadow: 0 0 0 2px #c8a24a; }
.hunt-pop-list { margin: 0 0 16px; padding-left: 18px; font-size: 14px; line-height: 1.8; }
.hunt-pop-x { display: block; width: 100%; height: 46px; border: 0; border-radius: 12px; background: #16224a; color: #fff; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; } .hunt-pop a.hunt-pop-x { display: flex; align-items: center; justify-content: center; text-decoration: none; }
/* 배너 치비: 동그라미 없이 그림 모양 그대로, 아래 그림자로 바탕과 떼어 보이게(10/7 사장). 찾은 수는 단추 안에 */
.v2-hunt-pics img { border-radius: 0; box-shadow: none; object-fit: contain; }
.v2-hunt-l > i em { margin-left: 1cqw; border-radius: 999px; background: #16224a; color: #f2c96b; font-style: normal; }
/* 이벤트 배너도 위 두 띠와 같은 생동감(10/7 사장): 단추가 숨 쉬고 빛이 쓸고, 치비는 둥실 - 박자는 또 어긋나게 */
.v2-hunt-l > i { position: relative; overflow: hidden; animation: v2-btn-breath 2.4s ease-in-out infinite; animation-delay: -.6s; transform-origin: left center; }
.v2-hunt-l > i::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent); animation: v2-btn-shine 3.6s ease-in-out infinite; animation-delay: -2.4s; pointer-events: none; }
.v2-hunt-pics img { animation: v2-bob 3.6s ease-in-out infinite; }
.v2-hunt-pics img:nth-child(2) { animation-delay: -1.2s; animation-duration: 4s; }
.v2-hunt-pics img:nth-child(3) { animation-delay: -2.4s; animation-duration: 3.8s; }
@media (prefers-reduced-motion: reduce) { .v2-hunt-l > i, .v2-hunt-l > i::after, .v2-hunt-pics img { animation: none; } }
.v2-hunt-pics img { width: 22cqw; }
/* 세 띠 규격 통일(10/7 사장): 같은 비율·높이·안쪽 여백·글자·단추 크기 */
.v2-charm, .v2-kc, .v2-hunt { box-sizing: border-box; width: calc(100% - 32px); aspect-ratio: 1200 / 450; height: auto; min-height: 0; margin: 10px 16px 0; border-radius: 12px; overflow: hidden; }
.v2-charm { margin-top: 18px; }
.v2-hunt { margin-bottom: 6px; }
.v2-charm-in, .v2-kc-in, .v2-hunt-in { height: 100%; padding: 0 5cqw 0 6cqw; }
.v2-charm-k, .v2-kc-k, .v2-hunt-k { margin: 0 0 1.2cqw; font-size: 3cqw; line-height: 1.3; }
.v2-charm-l > b, .v2-kc-l > b, .v2-hunt-l > b { font-size: 5.4cqw; line-height: 1.28; }
.v2-charm-l > i, .v2-kc-l > i, .v2-hunt-l > i { margin-top: 2.2cqw; padding: 1.8cqw 4cqw; font-size: 3.5cqw; line-height: 1.3; }
.v2-charm-l > i, .v2-kc-l > i, .v2-hunt-l > i { box-sizing: border-box; min-width: 0; padding-left: 2cqw; padding-right: 2cqw; white-space: nowrap; text-align: center; }
.v2-hunt-l > i em { padding: 0 1.4cqw; font-size: 2.9cqw; line-height: 1.3; }
/* 사인방 소개 띠(10/7 사장) - 한지 미색에 먹 글자, 오른쪽에 네 사람 그림. 규격은 위 세 띠와 같다 */
.v2-cast { display: block; box-sizing: border-box; width: calc(100% - 32px); aspect-ratio: 1200 / 450; margin: 10px 16px 6px; border-radius: 12px; overflow: hidden; color: #1b1713; text-decoration: none; container-type: inline-size; }
.v2-cast-in { position: relative; display: flex; align-items: center; height: 100%; padding: 0 5cqw 0 6cqw; }
.v2-cast-l { flex: 1; min-width: 0; }
.v2-cast-k { display: block; margin: 0 0 1.2cqw; font-size: 3cqw; line-height: 1.3; font-weight: 700; color: #a8322a; }
.v2-cast-l > b { display: block; font-size: 5.4cqw; line-height: 1.28; font-weight: 800; letter-spacing: -0.03em; }
.v2-cast-l > i { position: relative; overflow: hidden; display: inline-block; box-sizing: border-box; margin-top: 2.2cqw; padding: 1.8cqw 2cqw; font-size: 3.5cqw; line-height: 1.3; text-align: center; white-space: nowrap; border-radius: 999px; background: #1b1713; color: #f3ead8; font-style: normal; font-weight: 800; animation: v2-btn-breath 2.4s ease-in-out infinite; animation-delay: -1.8s; transform-origin: left center; }
.v2-cast-l > i::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); animation: v2-btn-shine 3.6s ease-in-out infinite; animation-delay: -.6s; pointer-events: none; }
.v2-cast-pic { position: absolute; }
@media (prefers-reduced-motion: reduce) { .v2-cast-l > i, .v2-cast-l > i::after { animation: none; } } /* 그림을 올리고 줄여 단추가 올인의 책을 가리지 않게(10/7 사장) */
.v2-cast { background: linear-gradient(135deg, #fbf7ef 0%, #f3e9d6 100%); background-blend-mode: normal; box-shadow: inset 0 0 0 1px rgba(168, 130, 58, .3); }
.v2-charm-l > i, .v2-kc-l > i, .v2-hunt-l > i, .v2-cast-l > i { width: 36cqw; }
/* NEW 리본 크게, 글자 사이 띄움(10/7 사장) */
.v2-new-ribbon { letter-spacing: .24em; text-indent: .24em; }
.v2-cast-l { max-width: 46cqw; }
.hunt-pop-in { position: relative; } .hunt-pop-close { position: absolute; right: 8px; top: 6px; width: 36px; height: 36px; border: 0; background: none; font: 400 26px/1 sans-serif; color: #6f665a; cursor: pointer; }
/* 사인방 띠(10/7 사장: 얼굴 가득, 위로, 아래는 바닥에 딱) - 허리까지 자른 그림을 크게, 바닥에 붙이고 왼쪽 끝은 글자 뒤로 스르르 */
.v2-cast-pic { max-height: none; filter: none; }
.v2-cast-l { position: relative; z-index: 2; }
.v2-hunt-pics img { z-index: 1 !important; }
.v2-hunt-l { min-width: 0; }
/* 스티커 그림은 글자 칸과 따로(오른쪽에 떠 있게) - 글자가 세 줄로 밀리지 않게, 셋 모두 조금 더 크게 */
.v2-hunt-in { position: relative; }
.v2-hunt-pics img:nth-child(1) { height: 16cqw; }
.v2-hunt-pics img:nth-child(3) { height: 22cqw; }
.v2-hunt-pics img:nth-child(2) { height: 15cqw; }
/* 사인방 그림: 단추 오른쪽에서 시작해 올인이 가려지거나 흐려지지 않게 */
.v2-cast-pic { -webkit-mask-image: none; mask-image: none; }
/* 스티커 배치 다시(10/7 사장: 프로처럼) - 오른쪽에 한 무더기로 붙여 놓은 스티커: 가운데 올인을 크게 세우고,
해인은 뒤 왼쪽, 삽살개는 앞 오른쪽에서 몸 끝만 살짝 겹친다(얼굴은 안 가림). 각자 다른 기울기, 아래는 띠 끝에 살짝 잘린다 */
.v2-hunt-pics { position: absolute; transform: none; }
.v2-hunt-pics img { position: absolute; height: auto !important; filter: drop-shadow(0 1.4cqw 1.6cqw rgba(0, 0, 0, .5)); }
.v2-hunt-pics img:nth-child(1) { right: auto; top: auto; }
.v2-hunt-pics img:nth-child(3) { right: auto; top: auto; }
.v2-hunt-pics img:nth-child(2) { top: auto; }
/* 사인방 띠: 머리부터 신발까지 전신 그림(10/7) - 바닥에 딱 붙이고 단추 오른쪽에 */
.v2-cast-pic { right: 2cqw; bottom: 0; object-fit: contain; object-position: right bottom; }
.v2-cast-pic { content: normal; height: 94%; width: auto; max-width: 60cqw; }
/* 스티커 셋(10/7 다시): 잘리지 않게 바닥선을 맞춘 카드 부채꼴 - 올인 가운데 가장 크게 앞, 해인 뒤 왼쪽, 삽살개 앞 오른쪽 */
.v2-hunt-pics { top: auto; height: 32cqw; overflow: visible; }
.v2-hunt-pics img:nth-child(1) { rotate: -9deg; z-index: 1 !important; }
.v2-hunt-pics img:nth-child(3) { rotate: 2deg; z-index: 2 !important; }
.v2-hunt-pics img:nth-child(2) { left: auto; rotate: 8deg; z-index: 3 !important; }
/* 사인방 띠 그림도 둥실(10/7 사장) - 바닥에 붙은 채 위아래로 살짝 */
.v2-cast-pic { animation: v2-cast-float 3.6s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes v2-cast-float { 0%, 100% { translate: 0 -8px; } 50% { translate: 0 -11px; } } /* 바닥에서 조금 띄우고, 3px 만 오르내림 */
@media (prefers-reduced-motion: reduce) { .v2-cast-pic { animation: none; } }
/* 스티커 셋 조금 크게·약간 위로(10/7 사장) - 배치는 그대로 */
.v2-hunt-pics { right: 1cqw; width: 50cqw; bottom: 5cqw; }
.v2-hunt-pics img:nth-child(1) { left: 0; bottom: 2cqw; width: 21cqw; }
.v2-hunt-pics img:nth-child(3) { left: 13cqw; bottom: 0; width: 29cqw; }
.v2-hunt-pics img:nth-child(2) { right: 0; bottom: 0; width: 18.5cqw; }
.v2-new-ribbon { top: 13px; left: -32px; width: 116px; padding: 6px 0 5px; font-size: 13px; font-weight: 800; } /* 10/7 사장: 왼쪽 위 모서리 바깥쪽으로 */
/* 결제 창 그림 위 상품 이름·부제(10/7 사장) - 포스터 글자 결: 굵은 명조, 흰 글자에 짙은 테, 아래로 어둡게 */
#pay .pay-poster { position: relative; }
#pay .pay-poster:has(.pay-poster-t)::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(12, 10, 20, .72)); pointer-events: none; }
.pay-poster-t { position: absolute; left: 0; right: 0; bottom: 10px; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; color: #fff; pointer-events: none; }
.pay-poster-t b { font-family: "Noto Serif KR", serif; font-size: clamp(30px, 9vw, 40px); font-weight: 900; line-height: 1.1; letter-spacing: .02em; text-shadow: 0 2px 0 rgba(0,0,0,.45), 0 0 14px rgba(0,0,0,.55); }
.pay-poster-t small { font-family: "Noto Serif KR", serif; font-size: clamp(13px, 3.6vw, 16px); font-weight: 700; color: #fbefd2; text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.pay-poster-t.is-newyear b { color: #fff3c4; } .pay-poster-t.is-gunghap b { color: #ffe1ea; } .pay-poster-t.is-reunion b { color: #e3efff; }
/* 사인방 띠도 위 스티커와 같은 폭으로 둥실(10/7 사장: 두리둥실) - 스티커 v2-bob 과 같은 5%, 같은 3.6초 */
@keyframes v2-cast-float { 0%, 100% { translate: 0 -8px; } 50% { translate: 0 calc(-8px - 5%); } }
/* 신청 창 받는 것 한 줄(10/8) */
/* 사이트 공통(10/9 사장): 끝말 한두 글자만 다음 줄로 떨어지는 외톨이 줄 없이, 낱말 단위로 줄을 바꾼다. 구체성 0 이라 칸마다 따로 정한 줄맞춤이 이긴다 */
:where(p, li, h1, h2, h3, h4, h5, h6, figcaption, blockquote, dd, dt, label, button, td, th, summary, small) { text-wrap: pretty; word-break: keep-all; overflow-wrap: break-word; }