/* 수강권 상세페이지 컷 시스템 — 구조 CSS (테마와 무관하게 1벌만) */
/* 정본: docs/planning/VOUCHER_DETAIL_CUT_SYSTEM_PLAN.md · 토큰은 테마 파일(basic.css 등)이 정의 */
#vcut_root { background: var(--p-bg); color: var(--p-ink); font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; letter-spacing: -0.4px; line-height: 1.6; max-width: 900px; margin: 0 auto 32px; }
#vcut_root .pcut { min-height: 340px; padding: 92px 28px; border-bottom: 1px solid var(--p-line); box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; text-align: center; }
#vcut_root .pcut:last-child { border-bottom: 0; }
#vcut_root .pcut.bg-gray { background: var(--p-soft); border-bottom-color: transparent; }
#vcut_root .pcut.bg-navy { background: var(--p-navy); border-bottom-color: transparent; }
#vcut_root .pcut.bg-navy .ph { color: #fff; }
#vcut_root .pcut.bg-navy .pp { color: rgba(255,255,255,.72); }
#vcut_root .pcut.bg-navy .peb { color: var(--p-navy-eye); }
#vcut_root .peb, #vcut_root .fstep { font-size: 20px; font-weight: 700; color: var(--p-blue); margin-bottom: 18px; }
#vcut_root .ph, #vcut_root .fname { font-size: 38px; font-weight: 600; margin: 0 0 18px; line-height: 1.42; color: var(--p-ink); }
#vcut_root .pcut.hero-cut .ph { font-size: 38px; line-height: 1.32; }
#vcut_root .pp { margin: 0 auto; max-width: 24em; font-size: 18px; color: var(--p-ink2); line-height: 1.75; word-break: keep-all; overflow-wrap: break-word; }
#vcut_root .psm { font-size: 10.5px; color: var(--p-mut); margin: 20px 0 0; line-height: 1.65; }
#vcut_root .pcut.bg-navy .psm { color: rgba(255,255,255,.5); }
#vcut_root .bx { padding: 16px 14px; }
#vcut_root .bx-plain { background: var(--p-bg); border: 1px solid var(--p-line); }
#vcut_root .bx-fill { background: var(--p-soft); border: 1px solid transparent; }
#vcut_root .pcut.bg-gray .bx-fill { background: var(--p-bg); }
#vcut_root .bx-tint { background: var(--p-tint); border: 1px solid transparent; }
#vcut_root .bx-rule { background: var(--p-bg); border: 1px solid var(--p-line); border-left: 4px solid var(--p-blue); }
#vcut_root .bx-outline { background: transparent; border: 1.5px solid var(--p-blue); }
#vcut_root .bx-strip { background: var(--p-bg); border: 1px solid var(--p-line); border-top: 4px solid var(--p-blue); }
#vcut_root .bx-navy { background: var(--p-navy); border: 1px solid transparent; color: #fff; }
#vcut_root .bstats { display: flex; gap: 1px; margin-top: 20px; background: var(--p-line); border-radius: var(--p-r); overflow: hidden; }
#vcut_root .bstats div { flex: 1; background: var(--p-soft); padding: 14px 6px; }
#vcut_root .bstats b { display: block; font-size: 19px; font-weight: 800; color: var(--p-ink); }
#vcut_root .bstats b em { font-style: normal; font-size: 11px; font-weight: 700; }
#vcut_root .bstats span { display: block; font-size: 10.5px; color: var(--p-mut); margin-top: 3px; }
#vcut_root .bbtns { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; padding: 0 30px; }
#vcut_root .bbtn { width: 100%; padding: 14px; font-family: inherit; font-size: 14px; font-weight: 700; border: 0; border-radius: var(--p-r); cursor: pointer; }
#vcut_root .bbtn.pri { background: var(--p-blue); color: #fff; }
#vcut_root .bpain { display: flex; flex-direction: column; gap: 9px; margin-top: 20px; text-align: center; }
#vcut_root .bpainrow { display: flex; gap: 12px; align-items: center; justify-content: center; background: var(--p-bg); border: 1px solid var(--p-line); border-radius: var(--p-r); padding: 16px; font-size: 15px; font-weight: 600; color: var(--p-ink); }
#vcut_root .pcut.bg-white .bpainrow { background: var(--p-soft); border-color: transparent; }
#vcut_root .bpainrow em { font-style: normal; font-size: 18px; flex-shrink: 0; }
#vcut_root .bpainend { margin-top: 11px; background: var(--p-tint); border-radius: var(--p-r); padding: 15px; text-align: left; font-size: 12.5px; line-height: 1.65; color: var(--p-ink2); }
#vcut_root .bpainend b { color: var(--p-blue); display: block; }
#vcut_root .bstat { margin-top: 34px; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
#vcut_root .bstat .f { font-size: 22px; font-weight: 600; color: var(--p-mut); }
#vcut_root .bstat .ar { color: var(--p-mut); }
#vcut_root .bstat .t { font-size: 32px; font-weight: 600; color: var(--p-blue); }
#vcut_root .pcut.bg-navy .bstat .f { color: rgba(255,255,255,.4); }
#vcut_root .pcut.bg-navy .bstat .t { color: var(--p-navy-hi); }
/* 네이비(어두운) 배경 — 모든 블록의 글자·칸을 밝은 세트로 (기본 --p-ink 계열은 네이비 위에서 보이지 않는다) */
#vcut_root .pcut.bg-navy .bstep .bl, #vcut_root .pcut.bg-navy .bcard .bl, #vcut_root .pcut.bg-navy .bpainend b, #vcut_root .pcut.bg-navy .bchip b, #vcut_root .pcut.bg-navy .btr b, #vcut_root .pcut.bg-navy .bcmp .b, #vcut_root .pcut.bg-navy .bcmp .r.h .b, #vcut_root .pcut.bg-navy .fstep { color: var(--p-navy-hi); }
#vcut_root .pcut.bg-navy .bzigh, #vcut_root .pcut.bg-navy .bstep .bt, #vcut_root .pcut.bg-navy .bcard .br, #vcut_root .pcut.bg-navy .bpainrow, #vcut_root .pcut.bg-navy .bchip, #vcut_root .pcut.bg-navy .btr, #vcut_root .pcut.bg-navy .bcmp .r, #vcut_root .pcut.bg-navy .bstats b, #vcut_root .pcut.bg-navy .fname { color: #fff; }
#vcut_root .pcut.bg-navy .bcard .br span, #vcut_root .pcut.bg-navy .bpainend, #vcut_root .pcut.bg-navy .bstats span, #vcut_root .pcut.bg-navy .bcmp .a, #vcut_root .pcut.bg-navy .bcmp .r.h, #vcut_root .pcut.bg-navy .bstat .ar { color: rgba(255,255,255,.72); }
#vcut_root .pcut.bg-navy .bstep, #vcut_root .pcut.bg-navy .bcard, #vcut_root .pcut.bg-navy .bpainrow, #vcut_root .pcut.bg-navy .bpainend, #vcut_root .pcut.bg-navy .bchip, #vcut_root .pcut.bg-navy .btable, #vcut_root .pcut.bg-navy .bcmp, #vcut_root .pcut.bg-navy .bstats div, #vcut_root .pcut.bg-navy .bx-plain, #vcut_root .pcut.bg-navy .bx-fill, #vcut_root .pcut.bg-navy .bx-tint, #vcut_root .pcut.bg-navy .bx-rule, #vcut_root .pcut.bg-navy .bx-strip { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); }
#vcut_root .pcut.bg-navy .btr, #vcut_root .pcut.bg-navy .bcmp .r { border-bottom-color: rgba(255,255,255,.14); }
#vcut_root .pcut.bg-navy .btr.tot, #vcut_root .pcut.bg-navy .bcmp .r.h { background: rgba(255,255,255,.10); }
#vcut_root .pcut.bg-navy .bstats { background: rgba(255,255,255,.14); }
#vcut_root .pcut.bg-navy .bx-rule { border-left-color: var(--p-navy-hi); }
#vcut_root .pcut.bg-navy .bx-strip { border-top-color: var(--p-navy-hi); }
#vcut_root .pcut.bg-navy .bx-outline { border-color: var(--p-navy-hi); }
#vcut_root .pcut.bg-navy .bx-navy { background: #fff; color: var(--p-navy); }
#vcut_root .pcut.bg-navy .bx-navy .bl { color: var(--p-blue); }
#vcut_root .pcut.bg-navy .bx-navy .br, #vcut_root .pcut.bg-navy .bx-navy .bt { color: var(--p-navy); }
#vcut_root .pcut.bg-navy .fdev, #vcut_root .pcut.bg-navy .fbar { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); color: #fff; }
#vcut_root .pcut.bg-navy .fbar em { color: rgba(255,255,255,.6); }
#vcut_root .bcards { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; text-align: center; }
#vcut_root .bcard { background: var(--p-bg); padding: 14px; border: 1px solid var(--p-line); border-radius: var(--p-r); }
#vcut_root .pcut.bg-white .bcard { background: var(--p-soft); border-color: transparent; }
#vcut_root .bcard .bl { font-size: 11.5px; font-weight: 800; color: var(--p-blue); margin-bottom: 9px; }
#vcut_root .bcard .br { font-size: 14px; font-weight: 700; line-height: 1.7; color: var(--p-ink); }
#vcut_root .bcard .br span { color: var(--p-ink2); font-weight: 500; }
#vcut_root .btable { margin-top: 16px; border: 1px solid var(--p-line); border-radius: var(--p-r); overflow: hidden; background: var(--p-bg); text-align: left; }
#vcut_root .btr { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--p-rule); font-size: 13px; color: var(--p-ink); }
#vcut_root .btr:last-child { border-bottom: 0; }
#vcut_root .btr b { color: var(--p-blue); font-weight: 700; flex-shrink: 0; }
#vcut_root .btr.tot { background: var(--p-soft); }
#vcut_root .btr.tot span, #vcut_root .btr.tot b { font-weight: 800; }
#vcut_root .bnew { display: inline-block; font-size: 9px; font-weight: 800; background: var(--p-blue); color: #fff; padding: 2px 5px; border-radius: 3px; margin-left: 6px; vertical-align: 2px; }
#vcut_root .bchips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 16px; }
#vcut_root .bchip { background: var(--p-bg); border: 1px solid var(--p-line); border-radius: var(--p-r); padding: 9px 12px; font-size: 13px; font-weight: 700; color: var(--p-ink); }
#vcut_root .pcut.bg-white .bchip { background: var(--p-soft); border-color: transparent; }
#vcut_root .bchip b { color: var(--p-blue); margin-left: 7px; }
#vcut_root .bcmp { margin-top: 20px; border: 1px solid var(--p-line); border-radius: var(--p-r); overflow: hidden; background: var(--p-bg); text-align: left; }
#vcut_root .bcmp .r { display: grid; grid-template-columns: 1fr 84px 84px; gap: 6px; padding: 11px 13px; border-bottom: 1px solid var(--p-line); font-size: 12px; align-items: center; }
#vcut_root .bcmp .r:last-child { border-bottom: 0; }
#vcut_root .bcmp .r.h { background: var(--p-soft); font-size: 10.5px; color: var(--p-mut); font-weight: 700; }
#vcut_root .bcmp .a { text-align: center; color: var(--p-mut); }
#vcut_root .bcmp .b { text-align: center; color: var(--p-blue); font-weight: 700; }
#vcut_root .bsteps { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; text-align: center; padding: 0 30px; }
#vcut_root .bstep { background: var(--p-soft); padding: 18px 16px; border-radius: var(--p-r); }
#vcut_root .pcut.bg-gray .bstep { background: var(--p-bg); }
#vcut_root .bstep .bl { font-size: 11.5px; font-weight: 800; color: var(--p-blue); margin-bottom: 7px; }
#vcut_root .bstep .bt { font-size: 15px; font-weight: 600; line-height: 1.65; color: var(--p-ink); }
#vcut_root .bzig { display: flex; flex-direction: column; gap: 26px; margin-top: 22px; text-align: center; }
#vcut_root .bzigh { font-size: 22px; font-weight: 700; color: var(--p-ink); margin: 3px 0 6px; line-height: 1.4; }
#vcut_root .fhead .fbadge { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .11em; color: var(--p-blue); background: var(--p-bg); border-radius: 999px; padding: 7px 13px; margin: 0 auto 14px; }
#vcut_root .fgroup .fhead { margin-bottom: 8px; }
#vcut_root .fcut { text-align: center; padding-top: 92px; }
#vcut_root .fdev { margin-left: auto; margin-right: auto; max-width: 560px; }
#vcut_root .fdev { margin-top: 18px; border: 1px solid var(--p-line); border-radius: calc(var(--p-r) + 10px); background: var(--p-bg); overflow: hidden; box-shadow: 0 10px 26px -14px rgba(16,32,47,.32); }
#vcut_root .fbar { display: flex; align-items: center; gap: 7px; padding: 10px 13px; border-bottom: 1px solid var(--p-line); font-size: 11.5px; font-weight: 700; color: var(--p-ink); }
#vcut_root .fbar em { font-style: normal; color: var(--p-mut); font-weight: 500; margin-left: auto; font-size: 10.5px; }
/* 목업 캔버스는 430×768 고정(subscribe_mock_base.js 가 뷰포트에 맞춰 축소) → iframe 을 정확히 430×768 로 두고 JS 가 컨테이너 폭에 맞춰 scale 한다. 높이는 JS 가 계산해 넣는다 */
#vcut_root .fdev-phone { position: relative; width: 100%; max-width: 340px; margin: 14px auto; border-radius: 28px; overflow: hidden; background: #fff; box-shadow: 0 12px 30px -14px rgba(16,32,47,.45); }
#vcut_root iframe.vcut-shot { position: absolute; left: 0; top: 0; width: 430px; height: 768px; border: 0; background: #fff; transform-origin: 0 0; }
#vcut_root .pcut.fhead { min-height: 0; padding-top: 56px; padding-bottom: 40px; }
@media (min-width: 900px) { #vcut_root .ph, #vcut_root .fname { font-size: 38px; } #vcut_root .pcut.hero-cut .ph { font-size: 38px; } #vcut_root .pp { font-size: 18px; max-width: 30em; } #vcut_root .peb, #vcut_root .fstep { font-size: 20px; } #vcut_root .psm { font-size: 13px; } #vcut_root .bcard .br { font-size: 16px; } #vcut_root .btr { font-size: 15px; } #vcut_root .bchip { font-size: 15px; } #vcut_root .bcmp .r { font-size: 14px; grid-template-columns: 1fr 120px 120px; } #vcut_root .bstep .bt { font-size: 17px; } #vcut_root .bpainrow { font-size: 17px; } #vcut_root .bstat .t { font-size: 44px; } #vcut_root .bstat .f { font-size: 26px; } #vcut_root .bstats b { font-size: 26px; } #vcut_root .bstats span { font-size: 13px; } #vcut_root .prc-now { font-size: 38px; } #vcut_root .fdev-phone { max-width: 380px; } }
#vcut_root .rels { display: flex; flex-direction: column; gap: 9px; margin-top: 20px; text-align: left; padding: 0 30px; }
#vcut_root .rel { display: flex; gap: 12px; align-items: center; padding: 13px; border: 1px solid var(--p-line); border-radius: var(--p-r); background: var(--p-bg); text-decoration: none; }
#vcut_root .rel:hover { border-color: var(--p-blue); }
#vcut_root .rel-th { width: 96px; height: 54px; border-radius: 8px; flex-shrink: 0; background: var(--p-navy); background-size: cover; background-position: center; }
#vcut_root .rel-b { min-width: 0; display: flex; flex-direction: column; gap: 4px; word-break: keep-all; overflow-wrap: break-word; }
#vcut_root .rel-b b { font-size: 12.5px; font-weight: 700; color: var(--p-ink); line-height: 1.45; }
#vcut_root .rel-b em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--p-blue); }
#vcut_root .prc { margin-top: 6px; }
#vcut_root .prc-badge { display: inline-block; font-size: 14px; font-weight: 400; color: #fff; background: var(--p-cta); border-radius: 999px; padding: 6px 14px; margin: 0 auto 12px; }
#vcut_root .prc-was { font-size: 17px; color: rgba(255,255,255,.45); text-decoration: line-through; }
#vcut_root .prc-now { font-size: 38px; font-weight: 500; color: #fff; line-height: 1.2; margin-top: 2px; }
#vcut_root .prc-meta { font-size: 14px; color: rgba(255,255,255,.6); margin-top: 8px; }
#vcut_root .buybtn { max-width: 420px; width: 85%; margin: 20px auto 0; background: var(--p-cta); color: #fff; font-size: 17px; font-weight: 800; padding: 16px 0; text-align: center; border: 0; border-radius: var(--p-r); cursor: pointer; font-family: inherit; }
#vcut_root .buybtn:hover { filter: brightness(.93); }
@media (max-width: 899px) { #vcut_root .pcut { padding: 60px 20px; min-height: 300px; } #vcut_root .pcut.fhead { padding-bottom: 80px; } #vcut_root .ph, #vcut_root .fname, #vcut_root .pcut.hero-cut .ph { font-size: 28px; } #vcut_root .peb, #vcut_root .fstep { font-size: 18px; } #vcut_root .pp { font-size: 16px; } #vcut_root .bcmp .r { grid-template-columns: 1fr 64px 64px; } }