/* 무료 행운 부적(10/5) - 노랑·빨강 부적 결, 본문은 고딕 */
:root { --ink: #1d1710; --red: #c8322a; --soft: #6b5d48; --gold: #c9a961; }
* { box-sizing: border-box; }
body { margin: 0; background: #f7f3ea; color: var(--ink); font-family: "Pretendard Variable", "Pretendard", "Apple SD Gothic Neo", sans-serif; }
.ch { max-width: var(--phone-w); margin: 0 auto; padding: 0 16px 60px; }
.ch-hero { position: relative; margin: 16px -16px 0; container-type: inline-size; }
.ch-banner { display: block; width: 100%; height: auto; }
.ch-form, .ch-out { margin-top: 22px; padding: 26px 20px 24px; border-radius: 16px; background: #fffdf7; box-shadow: 0 10px 28px -14px rgba(60, 40, 10, .35); }
.ch-h { margin: 0 0 20px; text-align: center; font-size: 23px; line-height: 1.4; font-weight: 900; }
.ch-f { display: block; margin: 0 0 16px; }
.ch-f > span { display: block; margin: 0 0 7px; font-size: 14px; font-weight: 800; color: var(--soft); }
.ch-f small { font-weight: 500; }
.ch-f input[name]:not([type=radio]):not([type=checkbox]) { width: 100%; height: 48px; padding: 0 14px; border: 1.5px solid #e2d6bd; border-radius: 10px; background: #fff; font-family: inherit; font-size: 17px; font-weight: 600; color: var(--ink); }
.ch-row { display: flex; gap: 8px; }
.ch-row input { flex: 1; min-width: 0; }
.ch-seg { display: flex; border: 1.5px solid #e2d6bd; border-radius: 10px; overflow: hidden; background: #fff; }
.ch-seg label { display: grid; place-items: center; min-width: 64px; padding: 0 12px; font-weight: 700; color: var(--soft); cursor: pointer; }
.ch-seg.is-wide label { flex: 1; height: 48px; }
.ch-seg input { position: absolute; opacity: 0; pointer-events: none; }
.ch-seg label:has(input:checked) { background: var(--red); color: #fff; }
.ch-err { margin: 0 0 12px; color: var(--red); font-size: 14px; font-weight: 700; text-align: center; }
.ch-go { display: block; width: 100%; height: 56px; border: 0; border-radius: 14px; background: linear-gradient(135deg, #e0483c, #b3261c); color: #fff; font-family: inherit; font-size: 19px; font-weight: 900; cursor: pointer; box-shadow: 0 0 0 2px #f3d48a, 0 8px 18px rgba(150, 30, 20, .35); animation: ch-beat 1.4s ease-in-out infinite; }
@keyframes ch-beat { 0%, 40%, 100% { transform: scale(1); } 10% { transform: scale(1.04); } 20% { transform: scale(.99); } 30% { transform: scale(1.03); } }
.ch-ghost { display: block; width: 100%; height: 50px; margin-top: 10px; border: 1.5px solid var(--ink); border-radius: 14px; background: #fff; color: var(--ink); font-family: inherit; font-size: 17px; font-weight: 800; cursor: pointer; }
.ch-k { margin: 0 0 14px; text-align: center; font-size: 19px; font-weight: 900; }
.ch-card { position: relative; margin: 0 auto; width: min(100%, 380px); }
.ch-card canvas { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 14px 30px -12px rgba(60, 40, 10, .5); opacity: 0; transform: scale(.92) rotate(-2deg); transition: opacity .6s ease, transform .7s cubic-bezier(.3, 1.4, .5, 1); }
.ch-out.is-on .ch-card canvas { opacity: 1; transform: none; }
.ch-stamp { position: absolute; right: 10.5%; bottom: 10%; width: 4.6%; height: auto; opacity: 0; transform: scale(3) rotate(-16deg); }
.ch-out.is-on .ch-stamp { animation: ch-stamp .5s cubic-bezier(.3, 1.6, .5, 1) 1s forwards; }
@keyframes ch-stamp { 70% { opacity: 1; transform: scale(.9) rotate(-6deg); } 100% { opacity: .95; transform: rotate(-6deg); } }
.ch-why { margin: 18px 4px; font-size: 15.5px; line-height: 1.8; color: #3a3226; word-break: keep-all; text-align: center; }
.ch-btns { margin-top: 6px; }
.ch-more { display: block; margin: 18px 0 0; text-align: center; font-weight: 800; color: #16223a; }
.ch-again { display: block; margin: 12px auto 0; border: 0; background: none; color: var(--soft); text-decoration: underline; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .ch-go { animation: none; } .ch-card canvas { transition: none; } .ch-out.is-on .ch-stamp { animation: none; opacity: .95; transform: rotate(-6deg); } }
/* 배너 빈 자리(제목 아래 가운데)에 한 줄 - 결과가 나오면 이름과 부적 이름으로 바뀐다(10/5 사장) */
.ch-banner-t { position: absolute; left: 4%; top: 47%; width: 46%; margin: 0; text-align: center; text-shadow: 0 0 6px #fff8ea, 0 0 2px #fff8ea; font-size: 3.6cqw; line-height: 1.45; font-weight: 700; color: #3a2a18; word-break: keep-all; }
.ch-banner-t b { color: #c8322a; font-weight: 900; font-size: 1.12em; }

/* 부적 근거: 원국 네 기둥·오행 개수·그래서 이 부적(10/5 사장) */
.ch-basis { margin: 4px 0 18px; padding: 18px 16px; border-radius: 12px; background: #fbf6ea; border: 1px solid #eadfc8; }
.ch-pils { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 12px; }
.ch-pil { display: grid; justify-items: center; gap: 2px; padding: 8px 0; border-radius: 8px; background: #fff; border: 1px solid #eadfc8; }
.ch-pil small { font-size: 12px; font-weight: 700; color: var(--soft); }
.ch-pil b { font-size: 24px; line-height: 1.25; font-weight: 800; color: var(--ink); }
.ch-pil.is-me { background: #fff3c4; border-color: #e3c25a; }
.ch-pil b.el-나무 { color: #2f7a3c; } .ch-pil b.el-불 { color: #c8322a; } .ch-pil b.el-흙 { color: #a87418; } .ch-pil b.el-쇠 { color: #6b6f78; } .ch-pil b.el-물 { color: #1f3f7a; }
.ch-els { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 12px; }
.ch-els span { padding: 4px 10px; border-radius: 99px; background: #fff; border: 1px solid #eadfc8; font-size: 13.5px; font-weight: 700; color: var(--soft); }
.ch-els span.is-yong { background: var(--red); border-color: var(--red); color: #fff; }
.ch-basis p { margin: 0; font-size: 15px; line-height: 1.85; color: #3a3226; word-break: keep-all; text-align: center; }
.ch-basis p b { color: #a8322a; }
.ch-note { display: block; margin-top: 8px; text-align: center; font-size: 12.5px; color: var(--soft); }


/* 부적을 그리는 올인(결과 앞 2.6초) - 영상은 제 비율(9:16) 그대로, 화면 안에 통째로 */

/* 부적 근거를 들려주는 올인(10/5 사장: 얼굴 하나) */
.ch-host { display: flex; align-items: center; gap: 10px; margin: -4px 0 14px; }
.ch-host img { flex: none; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: 50% 22%; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #c9a961; }
.ch-host b { font-size: 15px; font-weight: 800; color: #16130f; }
.ch-host span { font-size: 14px; color: #6b5d48; }

/* 윤달 물음(10/5): 대답 셋을 한 줄에 하나씩 */
.ch-seg.is-col { flex-direction: column; }
.ch-seg.is-col label { min-height: 44px; justify-content: center; }
.ch-seg.is-col label + label { border-top: 1.5px solid #e2d6bd; }
.ch-leap > span { line-height: 1.5; word-break: keep-all; }

/* 결과 아래 단추(10/5 사장): 저장·공유는 반씩 한 줄, 그 아래 무료 풀이로 가는 긴 빨간 단추 */
.ch-btns.is-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ch-btns.is-pair .ch-ghost { margin-top: 0; height: 50px; font-size: 16px; }
.ch-free { display: grid; place-items: center; margin-top: 12px; text-decoration: none; }
/* 정보 칸 = 빈 부적 종이에 직접 적는다(10/9 사장: 입력창 느낌 말고 몰입형). 틀 그림을 위·가운데·아래로 나눠 늘이지 않는다 - 해·구름·도장 자리가 찌그러지지 않고, 글은 해 아래·구름 위에서만 */
@font-face { font-family: "MaruBuri"; src: url("./assets/fonts/MaruBuri-SemiBold-full.woff2") format("woff2"); font-weight: 600 900; font-display: swap; }
.ch-form { position: relative; container-type: inline-size; padding: 25% 12.5% 24%; border-radius: 0;
  background: url("/assets/share/charm/frame-top.webp") top / 100% auto no-repeat, url("/assets/share/charm/frame-bot.webp") center bottom -2px / 100% auto no-repeat, url("/assets/share/charm/frame-mid.webp") top / 100% auto repeat-y;
  box-shadow: 0 16px 30px -18px rgba(120, 40, 10, .5); }
/* 아래 틀(frame-bot)은 2px 내려 깐다: 딱 맞춰 깔면 칸 높이가 소수점일 때 맨 아래 한두 줄이 비어 뒤의 가운데 틀(frame-mid, 세로로 반복) 기둥 선이 붉은 점으로 비쳤다(10/10 전수검사, 폰 3배 화면에서도). 그림 맨 아래는 빈 종이라 2px 잘려도 같다 */
.ch-form, .ch-form input, .ch-form button { font-family: "MaruBuri", "Noto Serif KR", serif; }
.ch-form .ch-h { margin: 0 0 26px; color: #7a1410; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.ch-form .ch-f { margin: 0 0 20px; }
.ch-form .ch-f > span { margin: 0 0 2px; color: #a8322a; font-size: 13px; font-weight: 700; letter-spacing: .12em; }
.ch-form .ch-f > span small { letter-spacing: 0; color: #a8322a99; }
.ch-form .ch-f input[name]:not([type=radio]):not([type=checkbox]) { height: 46px; padding: 0 2px; border: 0; border-bottom: 1.5px dashed #b3261c8c; border-radius: 0; background: transparent; color: #2a1a0e; font-size: 22px; font-weight: 700; caret-color: #b3261c; }
.ch-form .ch-f input[name]:focus { outline: 0; border-bottom: 2px solid #b3261c; }
.ch-form .ch-f input::placeholder { color: #7a141052; font-weight: 600; font-size: 17px; }
.ch-form .ch-row { align-items: center; }
/* 고르는 칸: 상자 없이 글자만, 고른 쪽에 붉은 동그라미 도장 */
.ch-form .ch-seg { border: 0; background: none; gap: 6px; overflow: visible; }
.ch-form .ch-seg label { height: 40px; padding: 0 14px; border-radius: 999px; color: #7a1410a6; font-size: 17px; font-weight: 700; transition: color .2s, box-shadow .2s, background .2s; }
.ch-form .ch-seg.is-wide { justify-content: flex-start; }
.ch-form .ch-seg.is-wide label { flex: 0 1 auto; height: 44px; min-width: 88px; }
.ch-form .ch-seg label:has(input:checked) { background: #b3261c14; color: #b3261c; box-shadow: inset 0 0 0 2px #b3261c; }
.ch-form .ch-seg.is-col { align-items: stretch; }
.ch-form .ch-seg.is-col label + label { border-top: 0; }
/* 부적을 받는 단추 = 붉은 도장 띠. 아래 구름을 덮지 않게 폭을 줄인다 */
.ch-form .ch-go { width: 82%; height: 54px; margin: 8px auto 0; border-radius: 6px; background: #b3261c; box-shadow: inset 0 0 0 2px #b3261c, inset 0 0 0 4px #f3d48a, 0 8px 16px -6px rgba(120, 30, 20, .5); font-size: 19px; font-weight: 800; letter-spacing: .02em; }
/* 아래 빈 네모 = 복(福) 도장 자리(10/9 사장: 빈칸에 뭐 넣지) - 부적을 받으면 꾹 찍힌다 */
.ch-fu { position: absolute; left: 50%; bottom: 6.55cqw; width: 9.85cqw; height: 9.85cqw; display: grid; place-items: center; translate: -50% 0; color: #b3261c; font-family: "Noto Serif KR", "Batang", serif; font-size: 7.4cqw; font-weight: 900; line-height: 1; opacity: .9; pointer-events: none; } /* 틀 그림 안쪽 네모(종이 폭의 가운데 · 아래에서 8.6% · 한 변 7.4%)에 꼭 맞춘다 - cqw 는 좌우 여백(12.5%씩)을 뺀 안쪽 폭 기준이라 ÷0.75 */
.ch-form.is-sealed .ch-fu { animation: ch-fu .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes ch-fu { 0% { transform: scale(2.4) rotate(-14deg); opacity: 0; } 100% { transform: none; opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .ch-form.is-sealed .ch-fu { animation: none; } }
/* 숨은 스티커가 앉은 날은 올인 한마디가 스티커 자리(오른쪽 위)를 비켜 간다 */
.ch-basis:has(> .hunt-c) .ch-host { padding-right: 78px; margin-bottom: 30px; } /* 아래 네 기둥에 '터치' 띠가 걸리지 않게 */
/* 문장 한 덩이씩, 줄은 고르게 - 끝말 한두 글자만 다음 줄로 떨어지지 않게(10/9 사장) */
.ch-ln { display: block; text-wrap: balance; }
.ch-basis p .ch-ln + .ch-ln, .ch-why .ch-ln + .ch-ln { margin-top: .15em; }
/* 사이트 공통(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; }

/* 저장·공유 아이콘: 빨간 단추 바로 위 가운데에 작게 둘(10/9 사장: 부적 위가 아니라 단추 쪽에) */
.ch-ico { display: flex; justify-content: center; gap: 28px; margin: 18px 0 12px; }
.ch-ico button { display: grid; justify-items: center; gap: 4px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--ink); font-family: inherit; }
.ch-ico button svg { box-sizing: border-box; width: 46px; height: 46px; padding: 11px; border-radius: 50%; background: #fff; border: 1.5px solid #e6d9bd; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ch-ico button small { font-size: 12.5px; font-weight: 700; color: #6b5d45; }
.ch-ico button:active svg { background: #f6efe0; }

/* 오늘의 점수(10/9 사장): 부적 아래 한 장 - 큰 점수 → 총운 한 줄 → 분야 막대 넷 → 행운 여섯 칸 → 조심 → 한마디 */
.ch-why { margin: 18px 0 14px; text-align: left; }
.ch-score { padding: 20px 18px 18px; border-radius: 16px; background: #fff; border: 1px solid #eadfc8; box-shadow: 0 10px 24px -18px rgba(60, 40, 10, .35); }
.ch-sc-top { display: grid; justify-items: center; gap: 2px; }
.ch-sc-top small { font-size: 13px; font-weight: 800; color: var(--soft); letter-spacing: .02em; }
.ch-sc-top b { font-size: 54px; line-height: 1; font-weight: 900; color: var(--red); font-variant-numeric: tabular-nums; }
.ch-sc-top b i { margin-left: 2px; font-size: 20px; font-style: normal; font-weight: 800; }
.ch-sc-top span { margin-top: 4px; padding: 3px 10px; border-radius: 99px; background: #fbeee9; color: var(--red); font-size: 13px; font-weight: 800; }
.ch-sc-one { margin: 14px 0 16px; font-size: 15px; line-height: 1.7; color: #3a3226; text-align: center; word-break: keep-all; text-wrap: balance; }
.ch-sc-bars { display: grid; gap: 9px; margin: 0 0 16px; padding: 0; list-style: none; }
.ch-sc-bars li { display: grid; grid-template-columns: 64px 1fr 28px; align-items: center; gap: 10px; }
.ch-sc-bars span { font-size: 13.5px; font-weight: 700; color: var(--soft); }
.ch-sc-bars i { position: relative; height: 8px; border-radius: 99px; background: #f1e9d8; overflow: hidden; }
.ch-sc-bars i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v); border-radius: inherit; background: var(--bar, #b3261c); }
/* 점수 따라 막대 색(10/9 사장) */
.ch-sc-bars .is-top { --bar: linear-gradient(90deg, #e0483c, #b3261c); } .ch-sc-bars .is-top b { color: #b3261c; }
.ch-sc-bars .is-good { --bar: linear-gradient(90deg, #f29a4a, #e0603a); } .ch-sc-bars .is-good b { color: #d0552e; }
.ch-sc-bars .is-mid { --bar: linear-gradient(90deg, #f6cf5e, #e8b13a); } .ch-sc-bars .is-mid b { color: #b8862a; }
.ch-sc-bars .is-low { --bar: linear-gradient(90deg, #c9bfae, #a89c88); } .ch-sc-bars .is-low b { color: #8a7d68; }
/* 공유 링크로 온 사람: 저장·공유 단추는 숨김 */
.ch-out.is-shared .ch-ico, .ch-out.is-shared .ch-free { display: none; }
.ch-sc-bars b { font-size: 14px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.ch-sc-luck { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 0 14px; }
.ch-sc-luck div { padding: 8px 4px; border-radius: 10px; background: #fbf6ea; text-align: center; }
.ch-sc-luck dt { font-size: 11.5px; font-weight: 700; color: var(--soft); }
.ch-sc-luck dd { margin: 2px 0 0; font-size: 14px; font-weight: 800; color: var(--ink); word-break: keep-all; }
.ch-sc-care { display: flex; gap: 8px; align-items: baseline; margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: #fff6f3; font-size: 14px; line-height: 1.55; color: #4a2a22; word-break: keep-all; }
.ch-sc-care b { flex: none; padding: 1px 7px; border-radius: 6px; background: var(--red); color: #fff; font-size: 12px; }
.ch-sc-word { margin: 0; font-family: "MaruBuri", serif; font-size: 15.5px; line-height: 1.6; color: #3a3226; text-align: center; word-break: keep-all; }

/* 입력 칸이 폰 한 화면에 들어오게(10/9 사장) - 칸 사이·입력 높이·글자를 보이는 화면 높이(svh)에 맞춰 늘고 준다. 테두리 그림은 폭 따라 그대로 */
.ch-form .ch-h { margin-bottom: clamp(10px, 2.8svh, 26px); font-size: clamp(20px, 3.6svh, 24px); }
.ch-form .ch-f { margin-bottom: clamp(6px, 1.9svh, 20px); }
.ch-form .ch-f input[name]:not([type=radio]):not([type=checkbox]) { height: clamp(36px, 5.6svh, 46px); font-size: clamp(18px, 3.2svh, 22px); }
.ch-form .ch-seg label { height: clamp(32px, 5svh, 40px); }
.ch-form .ch-seg.is-wide label { height: clamp(34px, 5.4svh, 44px); }
.ch-form .ch-go { height: clamp(44px, 6.6svh, 54px); margin-top: clamp(4px, 1svh, 8px); }
.ch:has(> .ch-form:not([hidden])) .ch-form { margin-top: clamp(8px, 2svh, 22px); }