/* 수강권 상세페이지 컷 시스템 — v2 디자인. 버전 2 컷에만 로드된다 (vcut_render $ver>=2 · 패널 미리보기 EDIT_VER>=2) */
/* 정본: docs/planning/VOUCHER_DETAIL_CUT_SYSTEM_PLAN.md §15 — vcut_base.css 는 건드리지 않는다(버전 1 페이지 픽셀 불변, §15-8). 토큰(--p-*)은 테마 파일이 정의 */
@import url('https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&display=swap');
/* ══ 타이포 웨이트 토큰 — v2 의 유일한 웨이트 규칙. 모든 font-weight 는 이 세 변수만 쓴다(리터럴 금지). 바꾸려면 여기 한 곳만 ══ */
#vcut_root.vcut-v2 { --fw-body: 400; --fw-mid: 500; --fw-head: 600; --ln: color-mix(in srgb, var(--p-ink) 22%, transparent); }
/* 단어 단위 줄바꿈 — v2 컷 전체 상속 (한글이 글자 중간에서 꺾이지 않게. 긴 영단어는 break-word 로 넘침 방지) */
#vcut_root.vcut-v2 .pcut { word-break: keep-all; overflow-wrap: break-word; }
/* 감성 한 줄용 명조 (§15-9 시안 — 마무리·전환 문구에만 아껴 쓴다): <h3 class="ph serif">…</h3> */
#vcut_root .serif { font-family: "Gowun Batang", "Nanum Myeongjo", serif; letter-spacing: -0.2px; font-weight: 700; }
#vcut_root .bdots { color: var(--p-blue); letter-spacing: 8px; font-size: 11px; margin-bottom: 18px; }
/* ── 스크롤 리빌 (§15-9 "스르륵" — JS 가 vz-anim 을 붙인 뒤에만 숨김·JS 실패 시 무영향, prefers-reduced-motion 은 JS 에서 제외) ── */
#vcut_root.vz-anim .pcut { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
#vcut_root.vz-anim .pcut.vz-in { opacity: 1; transform: none; }
/* ── E. 인라인 강조 (모든 블록 HTML 에서 사용 · 컷당 1곳 권장) — .hl 형광펜 · .hlu 언더라인 · .hlb 박스 반전 ── */
#vcut_root .hl { background: linear-gradient(180deg, transparent 55%, var(--p-tint) 0); padding: 0 3px; border-radius: 3px; font-weight: var(--fw-head); }
#vcut_root .hlu { box-shadow: inset 0 -2px 0 var(--p-blue); font-weight: var(--fw-head); }
#vcut_root .hlb { background: var(--p-blue); color: #fff; padding: 2px 10px; border-radius: 7px; font-weight: var(--fw-head); }
#vcut_root .pcut.bg-navy .hl { background: linear-gradient(180deg, transparent 55%, rgba(255,255,255,.22) 0); }
#vcut_root .pcut.bg-navy .hlu { box-shadow: inset 0 -2px 0 var(--p-navy-hi); }
#vcut_root .pcut.bg-navy .hlb { background: #fff; color: var(--p-navy); }
/* ── 타이포·리듬 (밀도 개선) — 히어로 확대 · 눈치는 필 배지 · 히어로 컷 여백 확대 ── */
#vcut_root .peb { display: inline-block; align-self: center; font-size: 46px; padding: 0; background: transparent; border-radius: 0; margin: 0 auto 20px; letter-spacing: -1px; line-height: 1.3; }
#vcut_root .pcut.bg-navy .peb { background: transparent; }
#vcut_root .bzigrow .peb { font-size: 40px; margin-bottom: 8px; }
/* 그라데이션은 UPDATE 섹션 눈치에만 (사장님 2026-09-03 — 나머지 눈치는 테마 단색) */
#vcut_root .bupdcut .peb { color: var(--p-blue); background: linear-gradient(100deg, color-mix(in oklch, var(--p-blue) 50%, #7c3aed) 0%, var(--p-blue) 50%, color-mix(in oklch, var(--p-blue) 40%, #2bffd6) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
#vcut_root .pcut.hero-cut { padding-top: 110px; padding-bottom: 110px; }
#vcut_root .pcut.hero-cut .ph { font-size: 44px; font-weight: var(--fw-head); letter-spacing: -1px; }
#vcut_root .pcut.bg-navy { background-image: linear-gradient(168deg, rgba(255,255,255,.07), rgba(0,0,0,.22)); }
#vcut_root .bcard, #vcut_root .bstep, #vcut_root .btable, #vcut_root .bcmp { box-shadow: 0 8px 22px -16px rgba(16,32,47,.35); }
/* ── A. 숫자 전환 (bigstat 개편 — 작은 회색 옛 값 → 큰 액센트 새 값) ── */
#vcut_root .bstat .f { font-size: 20px; font-weight: var(--fw-head); color: var(--p-mut); }
#vcut_root .bstat .ar { font-size: 26px; font-weight: var(--fw-head); color: var(--p-blue); }
#vcut_root .bstat .t { font-size: 52px; font-weight: var(--fw-head); color: var(--p-blue); letter-spacing: -1.5px; }
#vcut_root .pcut.bg-navy .bstat .ar { color: var(--p-navy-hi); }
/* ── B. "이런 적 있지 않나요?" (painlist 개편 — 카드 나열 → 한 컨테이너 + 체크 아이콘 칸 + 구분선 리스트) ── */
#vcut_root .bpain { gap: 0; margin: 26px 0 0; border: 0; border-top: 1px solid var(--ln); border-radius: 0; background: transparent; text-align: left; }
#vcut_root .bpainrow { background: transparent; border: 0; border-bottom: 1px solid var(--ln); border-radius: 0; justify-content: flex-start; text-align: left; padding: 0 10px 0 0; min-height: 84px; font-weight: var(--fw-head); line-height: 1.6; }
#vcut_root .pcut.bg-white .bpainrow { background: transparent; border-color: var(--ln); }
#vcut_root .pcut.bg-gray .bpainrow { background: transparent; border-color: var(--ln); }
#vcut_root .bpainrow em { font-size: 0; line-height: 0; width: 64px; height: auto; flex: none; background: transparent; border-radius: 0; align-self: stretch; display: flex; align-items: center; justify-content: center; padding: 0; margin-right: 18px; border-right: 1px solid var(--ln); }
#vcut_root .bpainrow em::before { content: '✓'; font-size: 15px; line-height: 1; font-weight: var(--fw-head); color: var(--p-blue); background: var(--p-bg); border: 1px solid var(--p-line); border-radius: 6px; padding: 5px 7px; }
#vcut_root .pcut.bg-navy .bpain { background: transparent; border-top-color: rgba(255,255,255,.18); }
#vcut_root .pcut.bg-navy .bpainrow { background: transparent; border-bottom-color: rgba(255,255,255,.18); }
#vcut_root .pcut.bg-navy .bpainrow em { background: transparent; border-right-color: rgba(255,255,255,.18); }
#vcut_root .pcut.bg-navy .bpainrow em::before { background: #fff; border-color: transparent; color: var(--p-blue); }
/* ── D. 아이콘+키워드 베네핏 리스트 (신규 마크업 — <div class="bben"><div class="bbenrow"><div class="bben-k"><i>✍️</i><b>쉽다</b></div><div class="bben-t">설명</div></div>…</div>) ── */
#vcut_root .bben { margin-top: 26px; border-top: 1px solid var(--p-line); text-align: left; }
#vcut_root .bbenrow { display: flex; align-items: center; gap: 18px; padding: 22px 8px; border-bottom: 1px solid var(--p-line); }
#vcut_root .bben-k { flex: none; width: 86px; display: flex; flex-direction: column; align-items: center; gap: 7px; }
#vcut_root .bben-k i { font-style: normal; font-size: 26px; line-height: 1; }
#vcut_root .bben-k b { font-size: 16px; font-weight: var(--fw-head); color: var(--p-blue); }
#vcut_root .bben-t { flex: 1; font-size: 15px; line-height: 1.7; color: var(--p-ink2); word-break: keep-all; }
#vcut_root .bben-t b { color: var(--p-ink); }
#vcut_root .pcut.bg-navy .bben { border-top-color: rgba(255,255,255,.18); }
#vcut_root .pcut.bg-navy .bbenrow { border-bottom-color: rgba(255,255,255,.18); }
#vcut_root .pcut.bg-navy .bben-k b { color: var(--p-navy-hi); }
#vcut_root .pcut.bg-navy .bben-t { color: rgba(255,255,255,.72); }
#vcut_root .pcut.bg-navy .bben-t b { color: #fff; }
/* ── C. BEFORE/AFTER 텍스트 2카드 (§15-2 beforeafter — 어두운 BEFORE vs 액센트 AFTER, 사진 불필요) ── */
#vcut_root .bba { margin-top: 26px; display: flex; align-items: stretch; gap: 12px; text-align: left; }
#vcut_root .bba-c { flex: 1; min-width: 0; border-radius: 16px; padding: 22px 18px; display: flex; flex-direction: column; gap: 9px; word-break: keep-all; }
#vcut_root .bba-before { background: var(--p-soft); border: 1px solid var(--p-line); filter: grayscale(.35); }
#vcut_root .bba-after { background: var(--p-bg); border: 2px solid var(--p-blue); box-shadow: 0 14px 32px -18px rgba(16,32,47,.4); }
#vcut_root .bba-tag { align-self: flex-start; font-size: 10px; font-weight: var(--fw-head); letter-spacing: .1em; border-radius: 999px; padding: 5px 12px; }
#vcut_root .bba-before .bba-tag { background: var(--p-line); color: var(--p-mut); }
#vcut_root .bba-after .bba-tag { background: var(--p-blue); color: #fff; }
#vcut_root .bba-c b { font-size: 18px; font-weight: var(--fw-head); line-height: 1.4; color: var(--p-ink); }
#vcut_root .bba-before b { color: var(--p-ink2); }
#vcut_root .bba-c p { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--p-ink2); }
#vcut_root .bba-ar { align-self: center; font-size: 24px; font-weight: var(--fw-head); color: var(--p-blue); flex: none; }
#vcut_root .pcut.bg-navy .bba-before { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); }
#vcut_root .pcut.bg-navy .bba-before b, #vcut_root .pcut.bg-navy .bba-c p { color: rgba(255,255,255,.72); }
#vcut_root .pcut.bg-navy .bba-after { background: rgba(255,255,255,.1); border-color: var(--p-navy-hi); }
#vcut_root .pcut.bg-navy .bba-after b { color: #fff; }
#vcut_root .pcut.bg-navy .bba-ar { color: var(--p-navy-hi); }
@media (max-width: 640px) { #vcut_root .bba { flex-direction: column; } #vcut_root .bba-ar { transform: rotate(90deg); } }
/* ── thumbcta 중간 상기 컷 (§15-2 — 썸네일은 myLibrary 표준 16:9 + cover) ── */
#vcut_root .btcta { margin-top: 24px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
#vcut_root .btcta-img { width: 100%; max-width: 420px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; box-shadow: 0 16px 38px -18px rgba(16,32,47,.5); }
#vcut_root .btcta-meta { display: flex; align-items: baseline; gap: 10px; }
#vcut_root .btcta-meta b { font-size: 26px; font-weight: var(--fw-head); color: var(--p-ink); letter-spacing: -0.5px; }
#vcut_root .btcta-meta span { font-size: 13px; color: var(--p-mut); }
#vcut_root .btcta .bbtn { width: 100%; max-width: 420px; }
#vcut_root .pcut.bg-navy .btcta-meta b { color: #fff; }
#vcut_root .pcut.bg-navy .btcta-meta span { color: rgba(255,255,255,.6); }
/* (클로비 구분선 .bdiv 는 2026-09-03 사장님 지시로 폐지) */
/* ── 기능 모아보기 (§15-9 ③ — vcut_feature_grid(): 구성 내역 리스트. 아이콘·이모지 금지) ── */
#vcut_root .fll { margin: 26px auto 0; max-width: 430px; border: 1px solid var(--p-line); border-radius: 16px; background: var(--p-bg); overflow: hidden; text-align: left; }
#vcut_root .fll .r { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 13px 17px; border-bottom: 1px solid var(--p-rule); font-size: 14px; font-weight: var(--fw-head); color: var(--p-ink); }
#vcut_root .fll .r:last-child { border-bottom: 0; }
#vcut_root .fll .r b { flex: none; font-size: 12px; font-weight: var(--fw-head); color: var(--p-blue); }
#vcut_root .fll .r.app { font-weight: var(--fw-mid); color: var(--p-ink2); }
#vcut_root .fll .r.app b { color: var(--p-mut); font-weight: var(--fw-mid); }
/* ── 표 계열 폭 — 아래 단계 카드(.bsteps 의 0 30px)와 같은 양옆 30px 들여쓰기 (사장님 2026-09-03) ── */
#vcut_root .btable, #vcut_root .bcmp { margin-left: 30px; margin-right: 30px; }
/* ── 비교표 v2 다듬기 (시안 §15-9 — 헤더·우리 칸 강조. 칸은 고정 120px 대신 비율 — 긴 문구가 좁게 접혀 표가 쪼그라들어 보이던 문제) ── */
#vcut_root .bcmp { border-radius: 16px; }
#vcut_root .bcmp .r { grid-template-columns: 78px 1fr 1.35fr; }
@media (min-width: 900px) { #vcut_root .bcmp .r { grid-template-columns: 100px 1fr 1.35fr; font-size: 14px; } }
#vcut_root .bcmp .r.h { font-size: 14px; }
#vcut_root .bcmp .r.h .b { color: var(--p-blue); font-weight: var(--fw-mid); }
#vcut_root .bcmp .b { font-weight: var(--fw-mid); }
/* ── 업데이트 소식 (§15-9 ①) — 최상단 자동 섹션(.bupdcut: 가운데 배지+큰 날짜+형광펜) + 어디서나 쓰는 스트립(.bupd) ── */
#vcut_root .pcut.bupdcut { min-height: 0; padding: 52px 24px 48px; }
#vcut_root .bupd-d { font-size: 21px; font-weight: var(--fw-head); color: var(--p-ink); line-height: 1.45; letter-spacing: -0.6px; margin-bottom: 12px; }
#vcut_root .bupd em { display: block; font-style: normal; font-weight: var(--fw-head); color: var(--p-ink); font-size: 13.5px; margin-bottom: 3px; }
#vcut_root .bupd { margin: 30px auto 0; max-width: 430px; background: transparent; border: 0; padding: 14px 16px; display: flex; gap: 12px; align-items: center; text-align: left; }
#vcut_root .bupd b { flex: none; background: var(--p-blue); color: #fff; font-size: 10px; font-weight: var(--fw-head); border-radius: 6px; padding: 4px 8px; letter-spacing: .04em; }
#vcut_root .bupd span { font-size: 12.5px; color: var(--p-ink2); line-height: 1.6; }
#vcut_root .pcut.bg-gray .bupd { background: var(--p-bg); }
/* beforeafter 인물 3D 캐릭터 (§15-9 ② — 렌더러가 resources/img/vcut/persona/default_*.webp 실재 시 자동 삽입) */
#vcut_root .bba-img { width: 100%; border-radius: 12px; display: block; }
#vcut_root .bba-face { width: 64px; height: 64px; border-radius: 50%; align-self: center; overflow: hidden; background: var(--p-tint); display: grid; place-items: center; }
#vcut_root .bba-face img { width: 100%; height: 100%; object-fit: cover; }
#vcut_root .bba-before .bba-face { background: var(--p-line); }
@media (min-width: 900px) { #vcut_root .pcut.hero-cut .ph { font-size: 46px; } #vcut_root .bstat .t { font-size: 60px; } #vcut_root .bstat .f { font-size: 24px; } #vcut_root .bpainrow { font-size: 17px; } #vcut_root .bben-t { font-size: 17px; } #vcut_root .bben-k b { font-size: 18px; } #vcut_root .peb { font-size: 46px; } #vcut_root .pcut.bupdcut { padding: 64px 24px 58px; } #vcut_root .bupd-d { font-size: 27px; } #vcut_root .bupd { max-width: 660px; gap: 16px; } #vcut_root .bupd em { font-size: 19px; margin-bottom: 5px; } #vcut_root .bupd span { font-size: 15.5px; line-height: 1.75; } #vcut_root .bupd b { font-size: 12px; padding: 6px 11px; } #vcut_root .fll { max-width: 560px; } #vcut_root .fll .r { font-size: 16px; padding: 15px 20px; } #vcut_root .fll .r b { font-size: 13px; } #vcut_root .bba-c b { font-size: 20px; } #vcut_root .bba-c p { font-size: 15px; } #vcut_root .bba-tag { font-size: 11px; } #vcut_root .btcta-meta b { font-size: 30px; } #vcut_root .btcta-meta span { font-size: 14px; } #vcut_root .btcta-img { max-width: 480px; } #vcut_root .btcta .bbtn { max-width: 480px; } }
@media (max-width: 899px) { #vcut_root .pcut.hero-cut { padding-top: 84px; padding-bottom: 84px; } #vcut_root .pcut.hero-cut .ph { font-size: 33px; } #vcut_root .bstat .t { font-size: 42px; } #vcut_root .bben-k { width: 72px; } }
/* ══ 라운드 금지 (사장님 2026-09-03) — 폰 목업 프레임(.fdev-phone)만 예외, 나머지는 전부 각지게. 파일 끝쪽 = 최종 판정 ══ */
#vcut_root.vcut-v2 .btable, #vcut_root.vcut-v2 .bcmp, #vcut_root.vcut-v2 .fll, #vcut_root.vcut-v2 .bba-c, #vcut_root.vcut-v2 .bupd, #vcut_root.vcut-v2 .bupd b, #vcut_root.vcut-v2 .bcard, #vcut_root.vcut-v2 .bpainend, #vcut_root.vcut-v2 .bchip, #vcut_root.vcut-v2 .bbtn, #vcut_root.vcut-v2 .buybtn, #vcut_root.vcut-v2 .prc-badge, #vcut_root.vcut-v2 .bba-tag, #vcut_root.vcut-v2 .bnew, #vcut_root.vcut-v2 .rel, #vcut_root.vcut-v2 .rel-th, #vcut_root.vcut-v2 .fbadge, #vcut_root.vcut-v2 .fdev, #vcut_root.vcut-v2 .bpainrow em::before { border-radius: 0; }
/* ══ v2 타이포 시스템 (2026-09-03 확정, 파일 맨 끝 = 최종 판정) — 규칙: 본문 400 · 중간 강조 500 · 제목/핵심/라벨/버튼 600 · 700 이상 금지. 예외: 사장님 직접 지정값(.bcmp 500)과 .serif(고운바탕은 400/700 두 웨이트뿐) ══ */
#vcut_root.vcut-v2 .ph, #vcut_root.vcut-v2 .fname, #vcut_root.vcut-v2 .bupd-d, #vcut_root.vcut-v2 .peb, #vcut_root.vcut-v2 .fstep, #vcut_root.vcut-v2 .fbadge, #vcut_root.vcut-v2 .bstat .t, #vcut_root.vcut-v2 .bstats b, #vcut_root.vcut-v2 .bpainend b, #vcut_root.vcut-v2 .bcard .bl, #vcut_root.vcut-v2 .btr b, #vcut_root.vcut-v2 .btr.tot span, #vcut_root.vcut-v2 .bchip b, #vcut_root.vcut-v2 .bstep .bl, #vcut_root.vcut-v2 .bzigh, #vcut_root.vcut-v2 .fll .r b, #vcut_root.vcut-v2 .bben-k b, #vcut_root.vcut-v2 .bben-t b, #vcut_root.vcut-v2 .bba-tag, #vcut_root.vcut-v2 .bba-c b, #vcut_root.vcut-v2 .btcta-meta b, #vcut_root.vcut-v2 .buybtn, #vcut_root.vcut-v2 .bbtn, #vcut_root.vcut-v2 .bnew, #vcut_root.vcut-v2 .bupd b, #vcut_root.vcut-v2 .bupd em, #vcut_root.vcut-v2 .hl, #vcut_root.vcut-v2 .hlu, #vcut_root.vcut-v2 .hlb, #vcut_root.vcut-v2 .rel-b em { font-weight: var(--fw-head); }
#vcut_root.vcut-v2 .bpainrow, #vcut_root.vcut-v2 .fll .r, #vcut_root.vcut-v2 .bchip, #vcut_root.vcut-v2 .rel-b b, #vcut_root.vcut-v2 .bstats b em, #vcut_root.vcut-v2 .fbar { font-weight: var(--fw-mid); }
#vcut_root.vcut-v2 .pp, #vcut_root.vcut-v2 .bstat .f, #vcut_root.vcut-v2 .bcard .br, #vcut_root.vcut-v2 .bstep .bt, #vcut_root.vcut-v2 .bben-t, #vcut_root.vcut-v2 .bba-c p, #vcut_root.vcut-v2 .btr, #vcut_root.vcut-v2 .bupd span { font-weight: var(--fw-body); }