/* 소통 · 클래쓰 보기 · 말킴 영어 앱 — 홈과 같은 글래스 디자인 규칙
   되돌리려면 각 페이지의 page-glass.css <link> 한 줄을 지우면 돼요 (body 의 pg-* 클래스는 남아 있어도 괜찮아요) */

/* 1) 배경: 홈과 같은 파스텔 그라데이션 (화면에 고정) */
html:has(body.pg-glass){background:#f2f3f7}
body.pg-glass{background:transparent!important;word-break:keep-all;overflow-wrap:break-word}
body.pg-glass::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-color:#f2f3f7;background-image:
   radial-gradient(48vw 40vw at 6% 18%,rgba(0,113,227,.17),transparent 70%),
   radial-gradient(44vw 38vw at 96% 12%,rgba(175,82,222,.14),transparent 70%),
   radial-gradient(52vw 44vw at 22% 92%,rgba(90,200,250,.15),transparent 70%),
   radial-gradient(46vw 40vw at 92% 86%,rgba(255,159,10,.10),transparent 70%)}

/* 2) 유리 카드 공통 (홈 카드와 같은 값) */
.pg-posts main>.card,.pg-class .item-wrapper,.pg-class #image1-b .text-wrapper,.pg-class #form4-6 div.mbr-form,.pg-class #features7-5 .card-wrapper,
.pg-class #content16-a .card,.pg-class #contacts4-r .container>.row,
.pg-apps .intro,.pg-apps .app-card,.pg-apps .note,.pg-apps .trial-item,.pg-apps .hero-img{
  background:linear-gradient(160deg,rgba(255,255,255,.70),rgba(255,255,255,.44))!important;
  -webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);
  border:1px solid rgba(255,255,255,.75)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 10px 30px -12px rgba(30,40,80,.18),0 2px 6px rgba(30,40,80,.05)!important}


/* 4) 작은 회색 글자 한 단계 진하게 */
.pg-glass .d,.pg-glass .lkhint{color:#4b5563}

/* ---------- 소통 ---------- */
.pg-posts main>.card{border-radius:22px}
.pg-posts .pr{border-top-color:rgba(29,29,31,.08);border-radius:14px;margin:0 -12px;padding:20px 12px;transition:background .2s}
.pg-posts .pr:first-of-type{border-top:0}
.pg-posts .pr:hover{background:rgba(255,255,255,.55)}

/* ---------- 클래쓰 보기 ---------- */
.pg-class #cls-root section{background:transparent!important}
.pg-class .item-wrapper{border-radius:22px!important;overflow:hidden;transition:transform .25s,box-shadow .25s}
.pg-class .item-wrapper:hover{transform:translateY(-3px)}
.pg-class #image1-b .text-wrapper{border-radius:22px;padding:28px 30px!important}
.pg-class #image1-b .image-wrapper img{border-radius:22px}
.pg-class #form4-6 div.mbr-form{border-radius:22px;padding:28px 26px!important}
.pg-class #form4-6 .image-wrapper img{border-radius:22px}
.pg-class #form4-6 .form-control{background:#fff!important;border:1px solid #e5e5ea!important;border-radius:12px!important}
.pg-class #features7-5 .card-wrapper{border-radius:22px!important;overflow:hidden}
.pg-class #content16-a .card{border-radius:16px!important;overflow:hidden}
.pg-class #content16-a .card-header,.pg-class #content16-a .panel-body{background:transparent!important;padding-left:20px!important;padding-right:20px!important}
.pg-class #content16-a .card-header{padding-top:14px!important;padding-bottom:14px!important}
.pg-class #contacts4-r .container>.row{border-radius:22px;padding:28px 24px;margin:0}
.pg-class .btn.btn-info,.pg-class .btn.btn-info:active{background-color:#0071e3!important;border-color:#0071e3!important;color:#fff!important}
.pg-class .btn.btn-info:hover,.pg-class .btn.btn-info:focus{background-color:#0062c4!important;border-color:#0062c4!important;color:#fff!important}
.pg-class .btn.btn-black,.pg-class .btn.btn-black:active{background-color:rgba(255,255,255,.6)!important;border:2px solid #0071e3!important;color:#0071e3!important}
.pg-class .btn.btn-black:hover,.pg-class .btn.btn-black:focus{background-color:rgba(0,113,227,.08)!important;color:#0071e3!important}

/* ---------- 말킴 영어 앱 ---------- */
.pg-apps{--secondary:#4b5563}
.pg-apps .app-card,.pg-apps .trial-item{transition:transform .25s,box-shadow .25s}
.pg-apps .store-btn{-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;filter:none}
.pg-apps .store-btn.apple{background:#0071e3;color:#fff;border:1px solid #0071e3}
.pg-apps .store-btn.apple:hover{background:#0062c4;transform:none;box-shadow:none}
.pg-apps .store-btn.google{background:rgba(255,255,255,.6);color:#0071e3;border:1px solid #0071e3}
.pg-apps .store-btn.google:hover{background:rgba(0,113,227,.08);transform:none;box-shadow:none}
.pg-apps .hero-btn{background:#0071e3!important;box-shadow:none!important;filter:none!important}
.pg-apps .hero-btn:hover{background:#0062c4!important;transform:none}
@media(prefers-reduced-transparency:reduce){.pg-glass .card,.pg-glass .item-wrapper,.pg-apps .app-card{-webkit-backdrop-filter:none;backdrop-filter:none}}

/* ---------- 글 상세 ---------- */
/* 제목 영역 = 유리 카드 (표지 이미지가 있으면 뒤에 은은한 글로우), 본문 = 읽는 곳이라 불투명 흰 카드 */
.pg-post .phd{position:relative;padding:28px 30px 24px;border-radius:22px;
  background:#fff;
  border:1px solid rgba(29,29,31,.05);box-shadow:0 10px 30px -12px rgba(30,40,80,.18)}
.pg-post .phd h1{font-size:36px;line-height:1.25;margin:0 0 12px;color:#0271E3}
.pg-post #adm-slot{position:absolute;top:18px;right:18px}
.pg-post #adm-edit{margin:0;padding:5px 12px;font-size:13px;min-height:0;background:transparent;border:1px solid rgba(29,29,31,.18);color:#4b5563}
.pg-post #adm-edit:hover{border-color:#0071e3;color:#0071e3}
.pg-post .pbody{margin-top:20px;background:#fff;border-radius:22px;padding:32px 34px 14px;box-shadow:0 10px 30px -16px rgba(30,40,80,.14);border:1px solid rgba(29,29,31,.05)}
.pg-post .pbody .lnks{margin:0 0 24px}
.pg-post .pbody .art p:last-child{margin-bottom:18px}
.pg-post .atr{background:#fff}
.pg-post .atb [data-att=dl]{background:#0071e3;color:#fff;border:1px solid #0071e3}
.pg-post .atb [data-att=dl]:hover{background:#0062c4}
.pg-post .atb [data-att=open]{background:#fff;color:#0071e3;border:1px solid #0071e3}
.pg-post .atb [data-att=open]:hover{background:rgba(0,113,227,.06)}
.pg-post #comments .card{background:#fff}
.pg-post #comments .in{border:1px solid #e5e7eb;transition:border-color .15s,box-shadow .15s}
.pg-post #comments .in:focus,.pg-post #comments .in:focus-visible{outline:none;border-color:#0071e3;box-shadow:0 0 0 3px rgba(0,113,227,.18)}
.pg-post main>.card{background:linear-gradient(160deg,rgba(255,255,255,.70),rgba(255,255,255,.44))!important;-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);border:1px solid rgba(255,255,255,.75)}
@media(max-width:640px){
  .pg-post .phd{padding:22px 20px 20px}.pg-post .phd h1{font-size:27px}
    .pg-post .pbody{padding:24px 20px 8px}}

/* ---------- 코스 선택법: 디자인은 guide.html 안 <style>에 있어요 ---------- */

/* ---------- 말킴 소개 ---------- */
/* 머리글 = 유리 카드, 긴 본문 = 읽는 곳이라 불투명 흰 카드 */
.pg-about{--brand:#0071e3;--brand-dark:#0062c4;--ink-soft:#4b5563}
.pg-about .lang-toggle-wrap{background:transparent;border-bottom:0}
.pg-about .lang-toggle{background:rgba(255,255,255,.7);border-color:rgba(29,29,31,.1);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.pg-about header.hero{background:transparent;border-bottom:0;padding:8px 0 0}
.pg-about header.hero>.wrap{padding:30px 32px 32px;border-radius:22px;
  background:linear-gradient(160deg,rgba(255,255,255,.70),rgba(255,255,255,.44));-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);
  border:1px solid rgba(255,255,255,.75);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 10px 30px -12px rgba(30,40,80,.18)}
.pg-about header.hero>.wrap,.pg-about main>.wrap,.pg-about footer>.wrap{max-width:760px;box-sizing:border-box}
.pg-about main{padding:20px 0 0}
.pg-about main>.wrap{background:#fff;border-radius:22px;padding:44px 36px 40px;box-shadow:0 10px 30px -16px rgba(30,40,80,.14);border:1px solid rgba(29,29,31,.05)}
.pg-about section:last-child{margin-bottom:0}
.pg-about footer{border-top:0;padding:24px 0 56px}
.pg-about footer>.wrap{padding:0 12px}
@media(max-width:820px){.pg-about header.hero>.wrap,.pg-about main>.wrap{margin:0 16px}}
@media(max-width:600px){.pg-about header.hero>.wrap{padding:24px 20px}.pg-about main>.wrap{padding:30px 20px 28px}}
@media(max-width:640px){.pg-post #adm-edit{min-height:38px;padding:6px 14px}}

/* 글 상세 제목 박스 구성: ← 소통 링크 / 제목 / 구분선 / 작성자·날짜 + 소통글 */
.pg-post .pback{display:inline-block;margin:2px 0 18px;font-size:13.5px;font-weight:600;color:#4b5563;text-decoration:none}
.pg-post .pback:hover{color:#0271E3}
.pg-post .pmeta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(29,29,31,.08)}
.pg-post .phd h1{margin-bottom:0}
.pg-post .ptag{flex:none;padding:5px 13px;border-radius:99px;background:rgba(2,113,227,.08);border:1px solid rgba(2,113,227,.25);color:#0271E3;font-size:13px;font-weight:700;line-height:1.3}
@media(max-width:640px){.pg-post .ptag{font-size:12px;padding:4px 11px}}

/* (선택) 제목 박스 왼쪽 세로 포인트 막대 — 빼고 싶으면 이 블록만 지우면 돼요 */
.pg-post .phd{overflow:hidden}
.pg-post .phd::after{content:"";position:absolute;left:0;top:22px;bottom:22px;width:4px;border-radius:0 4px 4px 0;background:#0271E3}

/* 본문 시작: 표지 이미지(있을 때) + 첫 문단 리드 */
.pg-post .pbody{overflow:hidden}
.pg-post .pcover{margin:-32px -34px 28px;aspect-ratio:16/7;background:#eef1f5}
.pg-post .pcover img{display:block;width:100%;height:100%;object-fit:cover}
.pg-post .pbody .art>p:first-of-type{font-size:21px;line-height:1.7;color:#1d1d1f;font-weight:600;padding-bottom:22px;margin-bottom:26px;border-bottom:1px solid rgba(29,29,31,.08)}
@media(max-width:640px){
  .pg-post .pcover{margin:-24px -20px 22px;aspect-ratio:16/9}
  .pg-post .pbody .art>p:first-of-type{font-size:18px}}

/* 클래스 카드 "마감" 표시 — 지우려면 이 블록과 class.html의 cl-done을 빼면 돼요. (it.closed===false 로 두면 개별 카드만 표시 안 함) */
.pg-class .item-img{position:relative}
.pg-class .cl-done{position:absolute;top:14px;right:14px;z-index:2;padding:6px 14px;border-radius:99px;background:rgba(17,24,39,.72);color:#fff;font-size:14px;font-weight:700;letter-spacing:.04em;line-height:1.2;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 4px 12px -4px rgba(0,0,0,.35);pointer-events:none}

/* 클래스 지원하기: 서식 카드를 넓히고 여백을 키워 이미지와 높이를 맞춤 */
@media(min-width:992px){
.pg-class #form4-6{padding-top:40px!important;padding-bottom:56px!important}
.pg-class #form4-6 .content-wrapper{align-items:stretch;flex-wrap:nowrap;justify-content:center;gap:48px;margin:0}
.pg-class #form4-6 .content-wrapper>.mbr-form{flex:0 0 46%!important;max-width:46%!important;margin:0!important;padding:52px 52px 48px!important;display:flex;flex-direction:column;justify-content:center}
.pg-class #form4-6 form.mbr-form{padding:0!important;margin:0!important;max-width:none!important;width:100%;flex:none!important}
.pg-class #form4-6 .content-wrapper>.col-lg-6{flex:1 1 0!important;max-width:none!important;margin:0!important;padding:0!important;display:flex}
.pg-class #form4-6 .image-wrapper{width:100%;display:flex}
.pg-class #form4-6 .image-wrapper img{width:100%!important;height:100%;object-fit:cover}
.pg-class #form4-6 .form-group{margin-bottom:10px!important}
.pg-class #form4-6 .mbr-section-title{margin-bottom:22px!important}
.pg-class #form4-6 .form-control{padding:16px 20px!important;min-height:58px}
.pg-class #form4-6 .btn{padding-top:16px!important;padding-bottom:16px!important}
}
@media(max-width:991px){.pg-class #form4-6 .content-wrapper>.mbr-form{padding:32px 26px!important}}

/* 클래스 선택 가이드: 글 상자를 넓히고 이미지와 높이를 맞춤 (이미지는 위아래를 비율 유지로 잘라 맞춰요) */
@media(min-width:992px){
.pg-class #image1-b .row{align-items:stretch!important;flex-wrap:nowrap;gap:40px;justify-content:center;margin:0}
.pg-class #image1-b .row>.col-lg-6{flex:0 0 38%!important;max-width:38%!important;padding:0!important}
.pg-class #image1-b .row>.col-lg{flex:1 1 0!important;max-width:none!important;padding:0!important;display:flex}
.pg-class #image1-b .image-wrapper{position:relative;height:100%;min-height:420px}
.pg-class #image1-b .image-wrapper img{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover;object-position:center bottom}
.pg-class #image1-b .text-wrapper{width:100%;padding:44px 46px!important;display:flex;flex-direction:column;justify-content:center}
}
/* Send Application 버튼만 12px 아래로 (레이아웃은 그대로, 시각 위치만 이동) */
@media(min-width:992px){.pg-class #form4-6 .mbr-section-btn{position:relative;top:12px}}

/* 클래스 페이지 상단(JOIN…) 제목·앱 버튼 색 #0271E3 */
.pg-class #header11-1 .mbr-section-title,.pg-class #header11-1 .mbr-section-title *{color:#0271E3!important}
.pg-class #header11-1 .btn.btn-info,.pg-class #header11-1 .btn.btn-info:active{background-color:#0271E3!important;border-color:#0271E3!important}
.pg-class #header11-1 .btn.btn-info:hover,.pg-class #header11-1 .btn.btn-info:focus{background-color:#0160c2!important;border-color:#0160c2!important}
.pg-class #header11-1 .btn.btn-black,.pg-class #header11-1 .btn.btn-black:active{border-color:#0271E3!important;color:#0271E3!important}
.pg-class #header11-1 .btn.btn-black:hover,.pg-class #header11-1 .btn.btn-black:focus{background-color:rgba(2,113,227,.08)!important;color:#0271E3!important}

/* "말킴 클래스 …개강" 제목과 카드 사이 여백 */
.pg-class #features3-10 .mbr-section-head{margin-bottom:64px}
@media(max-width:767px){.pg-class #features3-10 .mbr-section-head{margin-bottom:40px}}

/* 클래스 선택 가이드 제목 색 — 상단 JOIN 제목과 같은 #0271E3 */
.pg-class #image1-b .mbr-section-title,.pg-class #image1-b .mbr-section-title *{color:#0271E3!important}

/* 후기 목록과 Contact Us 박스 사이 여백 50% 축소 (202px → 약 101px) */
.pg-class #content16-a{padding-bottom:46px!important}
.pg-class #contacts4-r{padding-top:39px!important}

/* 앱 페이지: "모든 앱은 App Store…" 문구 아래 여백 축소 (약 184px → 약 120px) */
.pg-apps #apps-root .container{padding-bottom:16px!important}

/* 소통 목록: 제목 위 "← 홈으로" */
.pg-posts .pback{display:inline-block;margin:0 0 14px;font-size:14px;font-weight:600;color:#4b5563;text-decoration:none}
.pg-posts .pback:hover{color:#0271E3}


/* 소통 목록 제목 줄: 오른쪽에 글 수 · 최근 업데이트 (작은 메타 정보) */
.pg-posts .plhd{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px}
.pg-posts .plmeta{display:inline-flex;align-items:center;gap:10px;padding:7px 14px;border-radius:99px;background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.9);box-shadow:0 4px 14px -8px rgba(30,40,80,.25);font-size:13px;color:#4b5563;white-space:nowrap;margin-bottom:6px}
.pg-posts .plmeta[hidden]{display:none}
.pg-posts .plmeta b{color:#0271E3;font-weight:700}
.pg-posts .plmeta i{width:3px;height:3px;border-radius:50%;background:#9ca3af}

/* 소개·앱 페이지: ← 홈으로 */
.pg-apps .pback,.pg-about .pback{display:inline-block;font-size:14px;font-weight:600;color:#4b5563;text-decoration:none;white-space:nowrap}
.pg-apps .pback:hover,.pg-about .pback:hover{color:#0271E3}
.pg-about .toggle-row{justify-content:space-between!important}
.pg-apps .pbw{max-width:820px;margin:0 auto;padding:26px 20px 0}
.pg-apps .pbw+.hero{padding-top:34px}
@media(max-width:720px){.pg-apps .pbw{padding:18px 16px 0}.pg-apps .pbw+.hero{padding-top:26px}}

/* 클래스 페이지: ← 홈으로 (히어로 위에 겹쳐 놓아서 히어로 위치는 그대로) */
.pg-class .pbw{position:relative;height:0;z-index:5}
.pg-class .pbw .pback{position:absolute;top:24px;left:24px;font-size:14px;font-weight:600;color:#4b5563;text-decoration:none;white-space:nowrap}
.pg-class .pbw .pback:hover{color:#0271E3}
@media(max-width:720px){.pg-class .pbw .pback{top:16px;left:14px}}