/* 클래스권 카드 선택 시 아래에 뜨는 섹션 — class101 svod 페이지 .vbr-1hbj07w 구조·스타일 원본 복제(레벨8·관리자 전용, 이후 수정 예정). 원본 rem(16px 기준)은 사이트 루트 글자 크기와 달라 px로 옮겼다. _subscribe_class_plus.inc.php */
#v2-class-plus[hidden] {display:none;}
#v2-class-plus h1:not(.n-h2), #v2-class-plus h3 {margin:0;padding:0;font-size:100%;font-weight:normal;} /* 원본 전역 초기화(h1~h6) — 아래 클래스 규칙이 크기·굵기를 다시 준다 */
#v2-class-plus .vbr-17len9o {display:flex;place-content:stretch flex-start;flex-shrink:1;flex-direction:column;box-sizing:border-box;position:relative;width:100%;-webkit-box-pack:start;-webkit-box-align:center;align-items:center;}
#v2-class-plus .vbr-1gn6ajq {display:flex;place-content:stretch flex-start;flex-shrink:1;flex-direction:column;box-sizing:border-box;position:relative;max-width:1312px;width:100%;padding-left:20px;padding-right:20px;-webkit-box-pack:start;-webkit-box-align:stretch;align-items:stretch;}
@media screen and (min-width: 1024px) {#v2-class-plus .vbr-1gn6ajq {padding-left:40px;padding-right:40px;}}
#v2-class-plus .vbr-89cr9q {display:flex;place-content:stretch flex-start;flex-shrink:1;flex-direction:column;box-sizing:border-box;position:relative;-webkit-box-pack:start;-webkit-box-align:center;align-items:center;}
#v2-class-plus .vbr-1mze4m7 {display:flex;place-content:stretch flex-start;flex-shrink:1;flex-direction:row;box-sizing:border-box;position:relative;-webkit-box-pack:start;-webkit-box-align:stretch;align-items:stretch;}
#v2-class-plus .vbr-anef6w {display:flex;align-content:stretch;flex-shrink:1;flex-direction:column;box-sizing:border-box;position:absolute;overflow:hidden;background-color:rgb(252, 245, 241);width:100%;height:100%;}
#v2-class-plus .vbr-1p26s3e {display:flex;align-content:stretch;flex-shrink:1;flex-direction:column;box-sizing:border-box;position:absolute;overflow:hidden;background:linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.004) 8.3%, rgba(255, 255, 255, 0.024) 15.51%, rgba(255, 255, 255, 0.05) 21.85%, rgba(255, 255, 255, 0.09) 27.49%, rgba(255, 255, 255, 0.137) 32.64%, rgba(255, 255, 255, 0.192) 37.49%, rgba(255, 255, 255, 0.255) 42.25%, rgba(255, 255, 255, 0.33) 47.09%, rgba(255, 255, 255, 0.408) 52.22%, rgba(255, 255, 255, 0.494) 57.83%, rgba(255, 255, 255, 0.584) 64.13%, rgba(255, 255, 255, 0.682) 71.3%, rgba(255, 255, 255, 0.784) 79.53%, rgba(255, 255, 255, 0.89) 89.04%, rgb(255, 255, 255) 100%);width:100%;height:100%;}
#v2-class-plus .vbr-4p7vvu {display:flex;place-content:stretch flex-start;flex-shrink:1;flex-direction:row;box-sizing:border-box;position:relative;gap:8px;-webkit-box-pack:start;-webkit-box-align:center;align-items:center;}
#v2-class-plus .vbr-rmvwpe {display:flex;place-content:stretch center;flex-shrink:1;flex-direction:column;box-sizing:border-box;position:relative;height:40px;-webkit-box-pack:center;-webkit-box-align:center;align-items:center;}
#v2-class-plus .vbr-2xwds2 {display:flex;align-content:stretch;flex-shrink:1;flex-direction:column;box-sizing:border-box;position:relative;overflow:hidden;height:1px;width:100%;background-color:rgba(0, 0, 0, 0.03);margin-top:8px;margin-bottom:8px;}
#v2-class-plus .vbr-q7gj0e {text-align:left;color:var(--vibrant-on-color);-webkit-text-fill-color:var(--vibrant-on-color);font-size:16px;line-height:20px;letter-spacing:-0.24px;font-weight:700;}
@media screen and (min-width: 640px) {#v2-class-plus .vbr-q7gj0e {font-size:18px;line-height:22px;letter-spacing:-0.288px;}}
#v2-class-plus .vbr-e7qetr {display:flex;place-content:stretch center;flex-shrink:1;flex-direction:column;box-sizing:border-box;position:relative;height:48px;-webkit-box-pack:center;-webkit-box-align:center;align-items:center;}
#v2-class-plus .vbr-a3lxwe {display:flex;place-content:stretch flex-start;flex-shrink:0;flex-direction:column;box-sizing:border-box;position:relative;padding-top:12px;padding-bottom:12px;width:128px;margin-right:8px;-webkit-box-pack:start;-webkit-box-align:stretch;align-items:stretch;}
@media screen and (min-width: 640px) {#v2-class-plus .vbr-a3lxwe {width:152px;}}
#v2-class-plus .vbr-4000ps {text-align:left;color:rgba(55, 55, 55, 0.8);-webkit-text-fill-color:rgba(55, 55, 55, 0.8);font-size:16px;line-height:20px;letter-spacing:-0.24px;font-weight:500;}
#v2-class-plus .vbr-t0tbmq {display:none;place-content:stretch flex-start;flex-direction:column;box-sizing:border-box;position:relative;padding-top:12px;padding-bottom:12px;flex:1 1 0%;-webkit-box-pack:start;-webkit-box-align:stretch;align-items:stretch;}
@media screen and (min-width: 640px) {#v2-class-plus .vbr-t0tbmq {display:flex;}}
#v2-class-plus .vbr-abo4re {flex-direction:row;position:static;display:inline;fill:rgb(255, 255, 255);}
#v2-class-plus .vbr-1tcatft {flex-direction:row;position:static;display:block;width:auto;height:100%;fill:none;}
#v2-class-plus .vbr-uh2en0 {flex-direction:row;position:static;display:block;width:auto;height:22px;}
#v2-class-plus .vbr-1je4cvy {display:flex;align-content:stretch;flex-shrink:1;flex-direction:column;box-sizing:border-box;position:relative;overflow:hidden;height:1px;width:100%;background-color:rgba(255, 255, 255, 0.12);margin-top:8px;margin-bottom:8px;}
#v2-class-plus .vbr-1uvqtl7 {text-align:left;color:rgb(255, 255, 255);-webkit-text-fill-color:rgb(255, 255, 255);font-size:16px;line-height:20px;letter-spacing:-0.24px;font-weight:700;}
@media screen and (min-width: 640px) {#v2-class-plus .vbr-1uvqtl7 {font-size:18px;line-height:22px;letter-spacing:-0.288px;}}
#v2-class-plus .vbr-8aq0gw {text-align:left;color:var(--brand-dark,#3A2A14);-webkit-text-fill-color:var(--brand-dark,#3A2A14);font-size:16px;line-height:20px;letter-spacing:-0.24px;font-weight:700;}
@media screen and (min-width: 640px) {#v2-class-plus .vbr-8aq0gw {font-size:18px;line-height:22px;letter-spacing:-0.288px;}}
#v2-class-plus .vbr-1gpaa6i {display:flex;place-content:stretch flex-start;flex-shrink:1;flex-direction:row;box-sizing:border-box;position:relative;gap:3px;-webkit-box-pack:start;-webkit-box-align:center;align-items:center;}
/* 표 강조 열 — 원본 class101 주황→검정 세로 그라데이션 대신 가을 브랜드 그라데이션(구독 CTA·BASIC 카드 머리 .n04-cta 와 같은 색, 방향만 위→아래 180deg). 밝은 배경이라 강조 글자는 브랜드 다크, 구분선은 진하게 */
#v2-class-plus .vbr-107dljm {display:flex;align-content:stretch;flex-direction:column;box-sizing:border-box;position:relative;flex:1 1 0%;background:linear-gradient(180deg, #FF5F3D 0%, #FF9224 50%, #FFC53D 100%);border-radius:16px;padding-top:12px;padding-bottom:12px;border-color:#FF5F3D;border-style:solid;border-width:2px;box-shadow:rgba(255, 146, 36, 0) 27px 47px 15px 0px;}
@media screen and (min-width: 640px) {#v2-class-plus .vbr-107dljm {box-shadow:rgba(255, 146, 36, 0.02) 17px 30px 14px 0px;}}
@media screen and (min-width: 1024px) {#v2-class-plus .vbr-107dljm {box-shadow:rgba(255, 146, 36, 0.08) 10px 17px 12px 0px;}}
@media screen and (min-width: 1312px) {#v2-class-plus .vbr-107dljm {box-shadow:rgba(255, 146, 36, 0.14) 4px 8px 9px 0px;}}
#v2-class-plus .vbr-1xvi8d0 {display:flex;align-content:stretch;flex-shrink:1;flex-direction:column;box-sizing:border-box;position:relative;overflow:hidden;border-width:1px;background-color:rgb(255, 255, 255);border-radius:24px;padding:8px;width:100%;max-width:800px;}
@media screen and (min-width: 640px) {#v2-class-plus .vbr-1xvi8d0 {border-radius:32px;padding:16px;}}
#v2-class-plus.vbr-1hbj07w {display:flex;align-content:stretch;flex-shrink:1;flex-direction:column;box-sizing:border-box;position:relative;padding-top:40px;padding-bottom:40px;gap:40px;}
#v2-class-plus .v2-plus-brand {font-size:20px;line-height:24px;} /* 원본 CLASS101+ 로고(높이 22px) 자리에 들어간 클래스 이름 */
/* 제목 — 원본은 짧은 문구('무제한으로 해결') 전제라 여백·정렬이 없다. 긴 클래스별 문구가 표 밖으로 넘치지 않게 표 영역(.vbr-1gn6ajq 좌우 20/40px·.vbr-1xvi8d0 최대 800px)과 같은 폭으로 가두고 가운데·단어 단위 줄바꿈 */
#v2-class-plus.vbr-1hbj07w > .vbr-89cr9q {width:100%;max-width:880px;margin:0 auto;padding:0 20px;}
#v2-class-plus.vbr-1hbj07w > .vbr-89cr9q .vbr-4p7vvu {justify-content:center;max-width:100%;}
#v2-class-plus .n-h2 {margin:0;text-align:center;} /* 제목 두 줄은 구독 페이지 공통 .n-h2 글자 크기·굵기를 그대로 쓴다(2026-09-30 사용자 요청) */
#v2-class-plus .v2-plus-solve {color:rgb(255, 93, 0);}
@media screen and (min-width: 1024px) {#v2-class-plus.vbr-1hbj07w > .vbr-89cr9q {padding:0 40px;}}
#v2-class-plus.vbr-1hbj07w > .vbr-89cr9q .vbr-4p7vvu {display:block;text-align:center;text-wrap:balance;} /* 꺾여도 두 줄 길이가 비슷하게 */
#v2-class-plus.vbr-1hbj07w > .vbr-89cr9q .v2-plus-solve {display:inline;}
/* 표 폭 = 위 클래스 카드(PC: 카드 목록 전체 1084px, 모바일: 카드와 같은 목록의 90%·왼쪽 정렬) */
#v2-class-plus.vbr-1hbj07w > .vbr-89cr9q, #v2-class-plus .vbr-1gn6ajq {max-width:1084px;padding-left:0;padding-right:0;}
#v2-class-plus .vbr-1gn6ajq > .vbr-89cr9q {align-items:stretch;}
#v2-class-plus .vbr-1xvi8d0 {max-width:none;}
@media screen and (min-width: 1024px) {#v2-class-plus.vbr-1hbj07w > .vbr-89cr9q, #v2-class-plus .vbr-1gn6ajq {padding-left:0;padding-right:0;}}
@media (max-width:600px) {#v2-class-plus .vbr-1xvi8d0, #v2-class-plus .v2-plus-features {width:90%;margin-left:auto;margin-right:auto;}} /* subscribe-tabs.css 모바일 카드 폭(grid-auto-columns:90%)과 같게. 좌우 auto — 부모가 align-items:stretch(50행)라 폭 지정 자식은 왼쪽에 붙어서 가운데로. 기능 확인하기도 표와 같은 선 (2026-09-30) */
/* 배경 — 원본처럼 화면 양끝까지(100vw, html overflow-x:hidden) 깔되 원본 살구색(rgb(252,245,241)) 대신 가을 브랜드 크림(--surface-soft). 위쪽 흰 그라데이션(.vbr-1p26s3e)은 원본 그대로 */
#v2-class-plus .vbr-anef6w, #v2-class-plus .vbr-1p26s3e {top:0;left:50%;width:100vw;transform:translateX(-50%);} /* top:0 — 없으면 위 여백(100px)만큼 내려가 섹션 밖으로 삐져나와 아래 기능 비교표를 덮는다 */
#v2-class-plus .vbr-anef6w {background-color:var(--surface-soft,#FAF4E9);}
/* 간격 — 구독 페이지 섹션 규칙(subscribe.css .n-section padding 100px·768px 이하 64px, .n-section-head margin-bottom 60px)에 맞춤. 원본은 위아래 40px·제목→표 40px */
#v2-class-plus.vbr-1hbj07w {padding-top:100px;padding-bottom:100px;gap:60px;}
@media (max-width:768px) {#v2-class-plus.vbr-1hbj07w {padding-top:64px;padding-bottom:64px;}}
/* 강조 열 글자 */
#v2-class-plus .vbr-107dljm .vbr-1uvqtl7 {color:#fff;-webkit-text-fill-color:#fff;} /* 설명(콘텐츠·이용 가능 등) 흰색 — 원본과 같음 */
#v2-class-plus .vbr-107dljm .vbr-8aq0gw {color:#FFE3A3;-webkit-text-fill-color:#FFE3A3;} /* 숫자·핵심어 — 앰버 위에서 가장 또렷한 연한 노랑 */
#v2-class-plus .vbr-107dljm .v2-plus-perk {flex-wrap:wrap;justify-content:center;}
#v2-class-plus .vbr-107dljm .v2-plus-perk h3 {text-align:center;word-break:keep-all;} /* 개별 구매 혜택 — 취업 문구(자소서 생성 및 병원 합격 예측 제공)가 길어 좁은 폭에서 가운데로 줄바꿈 */
#v2-class-plus .vbr-107dljm {background:linear-gradient(180deg, var(--brand,#C1701A) 0%, var(--primary-dark,#A05812) 14%, color-mix(in srgb, var(--primary-dark,#A05812) 45%, var(--brand-dark,#3A2A14)) 32%, var(--brand-dark,#3A2A14) 50%, var(--brand-dark,#3A2A14) 100%);border-color:var(--brand,#C1701A);} /* 그라데이션 정도만 class101(머리 밝음 → 첫 줄 뒤 반쯤 어두움 → 둘째 줄부터 어두움), 색은 브랜드 토큰만 — --brand → --primary-dark → 섞은 중간색 → --brand-dark */
/* 기능 확인하기 — 표 아래 왼쪽, 카드의 '콘텐츠 둘러보기'(.v2-class-link)와 같은 글자 버튼. 펼치면 옮겨 온 「등급별 기능 비교」를 흰 카드 안에 */
#v2-class-plus .v2-plus-features {align-self:stretch;margin-top:20px;}
#v2-class-plus .v2-plus-features-btn {display:inline-flex;align-items:center;gap:8px;padding:8px 0;border:0;background:none;color:var(--brand);font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;}
#v2-class-plus .v2-plus-features-btn {margin-left:24px;} /* 카드 모서리가 곧아지는 지점(.vbr-1xvi8d0 border-radius 24px)에서 시작 (2026-09-30) */
@media screen and (min-width: 640px) {#v2-class-plus .v2-plus-features-btn {margin-left:32px;}} /* 640px 이상 border-radius 32px */
#v2-class-plus .v2-plus-features-btn i {font-size:12px;transition:transform .2s;}
#v2-class-plus .v2-plus-features-btn[aria-expanded="true"] i {transform:rotate(90deg);} /* 닫힘 → 오른쪽, 펼침 → 아래 */
#v2-class-plus .v2-plus-features-body {margin-top:12px;} /* 상자 없이 섹션 배경 위에 표만(2026-09-29 사용자 요청) */
body.v2-subscribe-class #v2Subscribe #v2-class-plus .v2-feature-compare {max-width:none;margin:0;padding:0;} /* 원래 자리용 여백(subscribe-tabs.css 58·61행)을 여기선 뺀다 */
#v2Subscribe #v2-class-plus .v2-feature-compare h3 {display:none;} /* 버튼이 제목 역할 */