/* =========================================================
   맑은클래스 (class.html) 전용 스타일
   product.css/common.css/sub.css 의 공통 클래스(sub_tit, stxt,
   compad, skyblue, width1230, moreBtn 등)를 그대로 사용하고,
   이 페이지에만 필요한 컴포넌트만 mclass_ 접두어로 추가한다.
   ========================================================= */

.mclass_con { overflow:hidden; }

/* ---------- 공통 뱃지/버튼 ---------- */
.mclass_btnArea { text-align:center; margin-top:40px; }
.mclass_btnArea .moreBtn { display:inline-flex; align-items:center; justify-content:center; width:220px; height:56px; margin:0 auto; }
.mclass_btnArea .moreBtn span { width:auto; background:none; padding:0; line-height:1; display:flex; align-items:center; gap:10px; font-size:1.05rem; }
.mclass_btnArea .moreBtn span:after { content:''; width:16px; height:12px; background:url('/img/moreArrow.png') no-repeat center/contain; }

.mclass_subBtns { display:flex; justify-content:center; gap:12px; margin-top:16px; }
.mclass_outlineBtn { display:inline-flex; align-items:center; gap:8px; height:48px; padding:0 24px; border-radius:50px; border:1px solid #e1e5ea; background:#fff; color:#555; font-size:0.95rem; letter-spacing:-0.4pt; transition:all 0.25s ease; }
.mclass_outlineBtn:hover { border-color:#0eb3d3; color:#0eb3d3; box-shadow:0 10px 24px rgba(14,179,211,0.12); }
.mclass_outlineBtn i { width:15px; height:15px; display:inline-block; background:no-repeat center/contain; opacity:0.7; }
.mclass_outlineBtn:hover i { opacity:1; }
.mclass_outlineBtn .ico_down { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v12'/><path d='M6 11l6 6 6-6'/><path d='M4 21h16'/></svg>"); }
.mclass_outlineBtn .ico_search { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.3-4.3'/></svg>"); }
.mclass_outlineBtn .ico_external { background-image:url('/img/blank_icon.gif'); }
.mclass_outlineBtn:hover .ico_down { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230eb3d3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v12'/><path d='M6 11l6 6 6-6'/><path d='M4 21h16'/></svg>"); }
.mclass_outlineBtn:hover .ico_search { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230eb3d3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.3-4.3'/></svg>"); }
.mclass_outlineBtn:hover .ico_external { background-image:url('/img/blank_icon_up.gif'); }

/* ---------- ① 히어로 카피 ---------- */
.mclass_hero { text-align:center; }
.mclass_hero .sub_tit { margin-bottom:18px; }

/* ---------- ② 전환 카피 + 통계 박스 ---------- */
.mclass_switch { text-align:center; }

.mclass_statBox { display:flex; align-items:center; justify-content:space-between; max-width:1030px; margin:56px auto 0; padding:44px 10px; background:#fff; border:1px solid #eef1f4; border-radius:24px; box-shadow:0 20px 45px rgba(20,40,80,0.06); }
.mclass_statBox dl { flex:1; text-align:center; position:relative; }
.mclass_statBox dl:not(:last-child):after { content:''; position:absolute; top:8px; right:0; width:1px; height:52px; background:#ebeef2; }
.mclass_statBox dt { margin-bottom:12px; }
.mclass_statBox dt i { width:26px; height:26px; display:inline-block; background:no-repeat center/contain; }
.mclass_statBox dd strong { display:block; font-size:2.35rem; font-weight:800; color:#1b1f27; letter-spacing:-1pt; line-height:1; }
.mclass_statBox dd strong span { font-size:1.1rem; font-weight:700; margin-left:1px; }
.mclass_statBox dd p { margin-top:12px; font-size:0.92rem; color:#0eb3d3; font-weight:700; letter-spacing:-0.4pt; display:flex; align-items:center; justify-content:center; gap:6px; }
.mclass_statBox dd p i { width:14px; height:14px; display:inline-block; background:no-repeat center/contain; }

.ico_book { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230eb3d3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/><path d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/></svg>"); }
.ico_calendar { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230eb3d3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='3'/><path d='M16 2v4M8 2v4M3 10h18'/></svg>"); }
.ico_flag { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230eb3d3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M5 21V4'/><path d='M5 4h13l-3 4.5L18 13H5'/></svg>"); }
.ico_coin { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230eb3d3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='6' width='20' height='13' rx='2.5'/><circle cx='12' cy='12.5' r='3.2'/><path d='M6 6V5a2 2 0 0 1 2-2h9'/></svg>"); }

/* ---------- ③ Q&A ---------- */
.mclass_faq { background:#f2f6ff; }
.mclass_faq .sub_tit { margin-bottom:14px; }
.mclass_faq .stxt { margin-bottom:56px; }

.mclass_qnaGrid { display:grid; grid-template-columns:1fr 1fr; gap:22px 30px; }
.mclass_qna .q,
.mclass_qna .a { display:flex; align-items:flex-start; gap:14px; }
.mclass_qna .q { margin-bottom:12px; }
.mclass_qna .mark { flex:none; width:30px; height:30px; border-radius:9px; background:#0eb3d3; color:#fff; font-weight:800; font-size:0.95rem; display:flex; align-items:center; justify-content:center; }
.mclass_qna .q p { flex:1; align-self:center; background:#fff; border:1px solid #e6eaf3; border-radius:14px; padding:14px 20px; font-size:0.98rem; color:#333; letter-spacing:-0.4pt; line-height:1.5; }
.mclass_qna .a p { flex:1; background:#0eb3d3; border-radius:14px; padding:16px 22px; font-size:0.98rem; color:#fff; letter-spacing:-0.4pt; line-height:1.55; }
.mclass_qna .a p b { color:#fff159; font-weight:700; }

/* ---------- ④ LMS + 콘텐츠 2단 패키지 ---------- */
.mclass_package .sub_tit { margin-bottom:14px; }
.mclass_package .stxt { margin-bottom:44px; }

.mclass_twoCol { display:flex; gap:22px; }
.mclass_twoCol .col { flex:1; padding:44px 40px; border-radius:24px; box-sizing:border-box; }
.mclass_twoCol .colLms { background:linear-gradient(135deg,#f5f9ff,#eaf1fb); border:1px solid #e9edf5; }
.mclass_twoCol .colContent { background:linear-gradient(135deg,#19c2d6,#0a9fd6); color:#fff; }

.mclass_twoCol .col_ico { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px; margin-bottom:22px; }
.mclass_twoCol .colLms .col_ico { background:#0eb3d3; }
.mclass_twoCol .colContent .col_ico { background:rgba(255,255,255,0.22); }
.mclass_twoCol .col_ico:before { content:''; width:22px; height:22px; display:block; background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/><path d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/></svg>") no-repeat center/contain; }

.mclass_twoCol .label { display:block; font-size:0.9rem; font-weight:700; letter-spacing:-0.3pt; margin-bottom:8px; opacity:0.8; }
.mclass_twoCol h4 { font-size:1.7rem; font-weight:800; letter-spacing:-0.8pt; margin-bottom:18px; }
.mclass_twoCol .colLms h4 { color:#1b1f27; }
.mclass_twoCol > .col > p { font-size:0.95rem; line-height:1.6; letter-spacing:-0.3pt; margin-bottom:26px; }
.mclass_twoCol .colLms > p { color:#666; }
.mclass_twoCol .colContent > p { color:rgba(255,255,255,0.92); }

.mclass_twoCol .checkList li { position:relative; padding-left:26px; font-size:0.95rem; font-weight:600; letter-spacing:-0.3pt; margin-bottom:12px; }
.mclass_twoCol .checkList li:last-child { margin-bottom:0; }
.mclass_twoCol .checkList li:before { content:''; position:absolute; left:0; top:3px; width:16px; height:16px; background:no-repeat center/contain; }
.mclass_twoCol .colLms .checkList li { color:#333; }
.mclass_twoCol .colLms .checkList li:before { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230eb3d3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>"); }
.mclass_twoCol .colContent .checkList li { color:#fff; }
.mclass_twoCol .colContent .checkList li:before { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>"); }

/* ---------- ⑤ 콘텐츠 라인업 ---------- */
.mclass_lineup { background:#eaf7fa; }
.mclass_lineup .sub_tit { margin-bottom:14px; }
.mclass_lineup .stxt { margin-bottom:44px; }

.mclass_categoryGrid { display:grid; grid-template-columns:repeat(4,1fr); background:#fff; border-radius:24px; overflow:hidden; box-shadow:0 20px 45px rgba(20,40,80,0.05); }
.mclass_categoryGrid dl { padding:34px 26px; border-right:1px solid #eef1f4; border-bottom:1px solid #eef1f4; }
.mclass_categoryGrid dl:nth-child(4n) { border-right:0; }
.mclass_categoryGrid dl:nth-child(n+5) { border-bottom:0; }
.mclass_categoryGrid dt { font-size:1.29rem; font-weight:800; color:#1b1f27; letter-spacing:-0.6pt; margin-bottom:10px; }
.mclass_categoryGrid dt i { color:#0eb3d3; font-style:normal; margin-left:2px; }
.mclass_categoryGrid dd { font-size:0.9rem; color:#8a8f98; letter-spacing:-0.3pt; }

.mclass_note { text-align:right; font-size:0.83rem; color:#9aa0a8; letter-spacing:-0.3pt; margin-top:16px; }

/* ---------- ⑥ 구독료 ---------- */
.mclass_pricing .sub_tit { margin-bottom:14px; }
.mclass_pricing .stxt { margin-bottom:44px; }

.mclass_priceBox { display:flex; align-items:center; gap:60px; padding:56px 64px; border-radius:28px; background:linear-gradient(120deg,#22bfc6,#0d9fd8); box-sizing:border-box; }
.mclass_priceBox .priceLeft { flex:1.2; color:#fff; }
.mclass_priceBox .priceLeft .tit { display:block; font-size:1.02rem; font-weight:600; letter-spacing:-0.3pt; opacity:0.92; margin-bottom:10px; }
.mclass_priceBox .priceLeft strong { display:block; font-size:2.7rem; font-weight:800; letter-spacing:-1pt; margin-bottom:20px; }
.mclass_priceBox .priceLeft strong em { font-style:normal; font-size:1.15em; }
.mclass_priceBox .priceLeft p { font-size:0.92rem; line-height:1.7; letter-spacing:-0.3pt; color:rgba(255,255,255,0.92); }
.mclass_priceBox .priceRight { flex:1; display:flex; flex-direction:column; gap:14px; }
.mclass_priceBox .priceRight li { position:relative; padding:16px 22px 16px 46px; background:rgba(255,255,255,0.16); border-radius:14px; color:#fff; font-size:0.95rem; font-weight:700; letter-spacing:-0.3pt; }
.mclass_priceBox .priceRight li:before { content:''; position:absolute; left:20px; top:50%; margin-top:-8px; width:16px; height:16px; background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>") no-repeat center/contain; }

/* ---------- ⑦ 하단 CTA ---------- */
.mclass_cta { position:relative; padding:110px 0; background:linear-gradient(120deg,#1cabe6,#0f8fe0); overflow:hidden; text-align:center; }
.mclass_cta:before,
.mclass_cta:after { content:''; position:absolute; border-radius:50%; background:rgba(255,255,255,0.08); }
.mclass_cta:before { width:340px; height:340px; left:-90px; bottom:-140px; }
.mclass_cta:after { width:220px; height:220px; right:-60px; top:-90px; }
.mclass_cta .width1230 { position:relative; z-index:1; }
.mclass_cta h3 { font-size:2.1rem; font-weight:800; color:#fff; letter-spacing:-1pt; line-height:1.35; margin-bottom:16px; }
.mclass_cta p { font-size:1rem; color:rgba(255,255,255,0.9); letter-spacing:-0.4pt; margin-bottom:36px; }
.mclass_cta .btnArea { display:flex; justify-content:center; gap:14px; }
.mclass_cta .mclass_ctaBtn,
.mclass_cta .mclass_ctaBtnWhite { display:inline-flex; align-items:center; gap:10px; height:56px; padding:0 30px; border-radius:50px; font-size:1rem; font-weight:700; letter-spacing:-0.4pt; }
.mclass_cta .mclass_ctaBtn { background:#0b2b45; color:#fff; }
.mclass_cta .mclass_ctaBtn span:after { content:'→'; margin-left:2px; }
.mclass_cta .mclass_ctaBtnWhite { background:#fff; color:#0f8fe0; }
.mclass_cta .mclass_ctaBtnWhite span { display:flex; align-items:center; gap:8px; }
.mclass_cta .mclass_ctaBtnWhite span:after { content:''; width:14px; height:14px; background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f8fe0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v12'/><path d='M6 11l6 6 6-6'/><path d='M4 21h16'/></svg>") no-repeat center/contain; }
.mclass_cta .mclass_ctaBtn:hover,
.mclass_cta .mclass_ctaBtnWhite:hover { transform:translateY(-2px); transition:transform 0.2s ease; }

/* =========================================================
   반응형
   ========================================================= */
@media all and (max-width:1100px) {
  .mclass_statBox { max-width:100%; flex-wrap:wrap; }
  .mclass_statBox dl { flex:0 0 50%; margin-bottom:26px; }
  .mclass_statBox dl:nth-child(2n):after { display:none; }
  .mclass_categoryGrid { grid-template-columns:repeat(2,1fr); }
  .mclass_categoryGrid dl:nth-child(2n) { border-right:0; }
  .mclass_categoryGrid dl:nth-child(4n) { border-right:1px solid #eef1f4; }
  .mclass_categoryGrid dl:nth-child(n+5) { border-bottom:1px solid #eef1f4; }
  .mclass_categoryGrid dl:nth-last-child(-n+2) { border-bottom:0; }
}

@media all and (max-width:768px) {
  .mclass_qnaGrid { grid-template-columns:1fr; }
  .mclass_twoCol { flex-direction:column; }
  .mclass_priceBox { flex-direction:column; gap:34px; padding:40px 30px; }
  .mclass_priceBox .priceRight { width:100%; }
  .mclass_cta h3 { font-size:1.6rem; }
}

@media all and (max-width:680px) {
  .mclass_subBtns { flex-direction:column; align-items:center; }
  .mclass_statBox { padding:30px 20px; border-radius:18px; }
  .mclass_statBox dd strong { font-size:1.7rem; }
  .mclass_categoryGrid { grid-template-columns:1fr; }
  .mclass_categoryGrid dl:nth-child(2n) { border-right:0; }
  .mclass_categoryGrid dl:nth-child(4n) { border-right:0; }
  .mclass_categoryGrid dl { border-right:0 !important; border-bottom:1px solid #eef1f4 !important; }
  .mclass_categoryGrid dl:last-child { border-bottom:0 !important; }
  .mclass_priceBox .priceLeft strong { font-size:2.1rem; }
  .mclass_cta .btnArea { flex-direction:column; align-items:center; }
}