/* 하위 페이지 공통 (온라인·오프라인·작품·뉴스) */

.sub-hero{padding:clamp(44px,5.6vw,120px) 0 clamp(30px,3.6vw,72px)}
.eyebrow-line{
  font-family:Unbounded,Pretendard,sans-serif;font-weight:800;
  font-size:clamp(11px,.95vw,18px);letter-spacing:.18em;color:var(--green);
  margin-bottom:clamp(14px,1.6vw,30px);
}
.sub-hero h1{
  font-size:clamp(26px,4vw,78px);font-weight:800;line-height:1.22;
  letter-spacing:-.03em;color:#fff;
}
.sub-hero .lede{
  margin-top:clamp(16px,1.9vw,36px);max-width:60ch;
  font-size:clamp(13px,1.2vw,23px);font-weight:500;line-height:1.8;color:#B9B9B9;
}
.hero-actions{
  display:flex;flex-wrap:wrap;gap:clamp(8px,1vw,16px);
  margin-top:clamp(22px,2.6vw,50px);
}
.btn-primary,.btn-ghost{
  display:inline-block;font-weight:800;
  font-size:clamp(12.5px,1.05vw,20px);
  padding:.85em 1.9em;border-radius:999px;
  transition:transform .12s,filter .15s,background .15s;
}
.btn-primary{background:var(--green);color:#000}
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.08)}
.btn-ghost{border:1.5px solid rgba(255,255,255,.35);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.09)}
.block{display:block;text-align:center;width:100%}
.block + .block{margin-top:8px}

.sec-title{
  font-size:clamp(20px,2.6vw,50px);font-weight:800;letter-spacing:-.02em;color:#fff;
  margin-bottom:clamp(16px,2vw,38px);
}

/* ── 강의 카드 ─────────────────────────────────────────── */
.course-card-sec{padding:clamp(20px,2.6vw,50px) 0 clamp(40px,5vw,96px)}
.course-card{
  display:grid;grid-template-columns:1fr minmax(260px,.5fr);
  gap:clamp(20px,2.6vw,54px);
  background:var(--ink);border:1px solid rgba(255,255,255,.1);
  border-radius:clamp(14px,1.4vw,26px);
  padding:clamp(22px,2.8vw,56px);
}
.badge-row{margin-bottom:clamp(12px,1.3vw,24px)}
.badge-hot{
  background:var(--green);color:#000;font-weight:800;
  font-size:clamp(10.5px,.82vw,15px);padding:.4em 1em;border-radius:999px;
}
.course-info h2{
  font-size:clamp(17px,1.85vw,36px);font-weight:800;line-height:1.35;color:#fff;
}
.course-meta{margin-top:clamp(16px,1.9vw,36px);display:grid;gap:.85em}
.course-meta > div{
  display:grid;grid-template-columns:5.5em 1fr;gap:1em;
  font-size:clamp(12px,1vw,19px);
}
.course-meta dt{color:var(--muted);font-weight:600}
.course-meta dd{color:#DEDEDE;font-weight:600}

.course-buy{
  background:var(--black);border:1px solid rgba(255,255,255,.1);
  border-radius:clamp(12px,1.2vw,22px);
  padding:clamp(18px,2.2vw,42px);
  display:flex;flex-direction:column;justify-content:center;
}
.price-off{
  font-family:Unbounded,Pretendard,sans-serif;font-weight:800;color:var(--green);
  font-size:clamp(20px,2.2vw,42px);line-height:1;
}
.price-was{
  margin-top:.4em;font-size:clamp(12px,1vw,19px);color:var(--muted);
  text-decoration:line-through;font-weight:600;
}
.price-now{
  margin:.15em 0 clamp(16px,1.9vw,34px);
  font-family:Unbounded,Pretendard,sans-serif;font-weight:800;color:#fff;
  font-size:clamp(26px,2.9vw,56px);line-height:1;letter-spacing:-.03em;
}
.price-now span{font-size:.45em;margin-left:.15em;font-weight:800}
.buy-lead{
  font-size:clamp(12.5px,1.05vw,20px);font-weight:700;line-height:1.6;color:#DEDEDE;
  margin-bottom:clamp(16px,1.9vw,34px);
}
.buy-note{
  margin-top:.9em;text-align:center;
  font-size:clamp(10.5px,.82vw,15px);color:var(--muted);font-weight:500;
}

/* ── 3열 설명 ──────────────────────────────────────────── */
.why{padding:clamp(40px,5vw,100px) 0;background:var(--ink)}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.5vw,28px)}
.why-grid article{
  background:var(--black);border:1px solid rgba(255,255,255,.08);
  border-radius:clamp(12px,1.2vw,22px);padding:clamp(18px,2.2vw,42px);
}
.why-grid h3{
  font-size:clamp(14.5px,1.45vw,28px);font-weight:800;color:var(--green);
  margin-bottom:.7em;line-height:1.35;
}
.why-grid p{
  font-size:clamp(12px,1vw,19px);font-weight:500;line-height:1.75;color:#B9B9B9;
}

.also{padding:clamp(40px,5vw,100px) 0;text-align:center}
.also-lede{
  max-width:64ch;margin:0 auto;
  font-size:clamp(12.5px,1.1vw,21px);font-weight:500;line-height:1.8;color:#B9B9B9;
}
.also .hero-actions{justify-content:center}

/* ── 뉴스 ──────────────────────────────────────────────── */
.news-list-sec{padding:clamp(20px,2.6vw,50px) 0 clamp(44px,5.6vw,110px)}
.news-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.5vw,28px)}
.news-card{
  background:var(--ink);border:1px solid rgba(255,255,255,.09);
  border-radius:clamp(12px,1.2vw,22px);padding:clamp(20px,2.4vw,46px);
}
.news-card h2{
  font-size:clamp(16px,1.7vw,33px);font-weight:800;color:#fff;line-height:1.35;
}
.news-date{
  margin:.7em 0 1.1em;font-size:clamp(11px,.88vw,17px);
  color:var(--green);font-weight:700;
}
.news-card p:last-child{
  font-size:clamp(12px,1vw,19px);font-weight:500;line-height:1.8;color:#B9B9B9;
}

.yt{padding:clamp(20px,2.6vw,50px) 0 clamp(44px,5.6vw,110px);text-align:center}
.yt .hero-actions{justify-content:center}

@media (max-width:900px){
  .course-card{grid-template-columns:1fr}
  .why-grid,.news-grid{grid-template-columns:1fr}
}

/* ── 피바뉴스 뎁스 ─────────────────────────────────────── */
a.news-card{display:block;transition:border-color .15s,transform .12s}
a.news-card:hover{border-color:rgba(44,255,5,.45);transform:translateY(-2px)}
.news-more{
  display:inline-block;margin-top:clamp(14px,1.6vw,30px);
  font-size:clamp(11.5px,.95vw,18px);font-weight:800;color:var(--green);
}
.eyebrow-line a{color:var(--green);opacity:.85}
.eyebrow-line a:hover{opacity:1;text-decoration:underline}
.series-meta{
  margin-top:clamp(14px,1.6vw,30px);
  font-size:clamp(11.5px,.95vw,18px);font-weight:700;color:var(--green);
}
.post-list{display:grid;gap:clamp(10px,1.2vw,22px)}
.post{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,1.8vw,34px);
  align-items:start;
  background:var(--ink);border:1px solid rgba(255,255,255,.09);
  border-radius:clamp(12px,1.2vw,22px);padding:clamp(18px,2.2vw,42px);
}
.post-no{
  font-family:Unbounded,Pretendard,sans-serif;font-weight:800;color:var(--green);
  font-size:clamp(18px,2vw,38px);line-height:1;
}
.post h2{font-size:clamp(15px,1.55vw,30px);font-weight:800;color:#fff;line-height:1.35}
.post-sub{margin-top:.5em;font-size:clamp(12px,1vw,19px);font-weight:600;color:#B9B9B9}
.post-topic{
  margin-top:.8em;font-size:clamp(12px,1vw,19px);font-weight:600;color:#DEDEDE;
}
.post-topic b{color:var(--green);font-weight:800;margin-right:.5em}

/* ── 유튜브 ────────────────────────────────────────────── */
.yt{text-align:left}
.yt .also-lede{margin:0 0 clamp(22px,2.6vw,48px);max-width:70ch}
.yt .also-lede b{color:var(--green);font-weight:800}
.yt-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,26px)}
.yt-card figure{position:relative;overflow:hidden;background:var(--ink)}
.yt-card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;transition:transform .5s ease}
.yt-card a:hover img{transform:scale(1.05)}
.yt-play{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:clamp(20px,2.2vw,42px);color:#fff;
  background:rgba(0,0,0,.28);opacity:.85;transition:opacity .15s;
}
.yt-card a:hover .yt-play{opacity:1}
.yt-card h3{
  margin-top:clamp(10px,1.2vw,20px);
  font-size:clamp(12.5px,1.05vw,20px);font-weight:700;line-height:1.45;color:#fff;
}
.yt-card a:hover h3{color:var(--green)}
.yt-meta{margin-top:.45em;font-size:clamp(10.5px,.82vw,15px);color:var(--muted);font-weight:600}

.yt-more-h{margin-top:clamp(38px,4.4vw,84px)}
.yt-list{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.2vw,22px)}
.yt-list a{
  display:grid;grid-template-columns:clamp(96px,11vw,200px) 1fr;
  gap:clamp(10px,1.2vw,22px);align-items:center;
  background:var(--ink);border:1px solid rgba(255,255,255,.08);
  padding:clamp(8px,.9vw,16px);transition:border-color .15s;
}
.yt-list a:hover{border-color:rgba(44,255,5,.45)}
.yt-list img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.yt-list h3{font-size:clamp(11.5px,.95vw,18px);font-weight:700;line-height:1.45;color:#EDEDED}
.yt-list a:hover h3{color:var(--green)}

@media (max-width:1024px){ .yt-grid{grid-template-columns:1fr 1fr} }
@media (max-width:700px){ .yt-grid,.yt-list{grid-template-columns:1fr} }

/* ── 문서형 페이지 (개인정보처리방침 등) ──
   읽으라고 만든 페이지지 훑으라고 만든 게 아니다. 한 줄을 짧게 잡고
   제목과 본문 사이를 넉넉히 둔다. 한글은 어절 단위로만 끊는다. */
.doc{padding:56px 0 96px}
.doc .wrap{max-width:720px}
.doc h2{
  font-size:19px;font-weight:800;letter-spacing:-.03em;
  margin:44px 0 12px;line-height:1.35;
}
.doc h2:first-child{margin-top:0}
.doc p{margin:0 0 14px;line-height:1.75;word-break:keep-all;text-wrap:pretty}
.doc ul{margin:0 0 14px;padding-left:18px}
.doc li{margin:0 0 8px;line-height:1.7;word-break:keep-all}
.doc b{font-weight:700}
.doc a{text-decoration:underline;text-underline-offset:2px}
.doc .doc-date{margin-top:44px;font-size:14px;opacity:.6}
.sub-lede{margin-top:14px;line-height:1.7;word-break:keep-all;max-width:44ch}

@media (max-width:720px){
  .doc{padding:36px 0 72px}
  .doc h2{font-size:17px;margin:34px 0 10px}
}

/* ── 살아있는 단추·가격 (2026-08-24, 왕초보반과 같은 결) ─────────────
   ⚠ sub.css 는 여러 페이지가 같이 쓴다. btn-primary(초록 면 단추)와
     가격 표시에만 건다 — 헤더 「즉시 상담하기」는 그대로 둔다. */
.btn-primary{ position:relative; overflow:hidden;
  animation:fv-breathe 2.8s ease-in-out infinite; transition:transform .18s ease }
.btn-primary:hover{ transform:translateY(-2px) }
@keyframes fv-breathe{
  0%,100%{ box-shadow:0 0 0 0 rgba(44,255,5,.22) }
  50%{ box-shadow:0 0 22px 3px rgba(44,255,5,.42) } }
.btn-primary::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 32%, rgba(255,255,255,.45) 50%, transparent 68%);
  transform:translateX(-130%); animation:fv-shine 3.6s ease 1.2s infinite }
@keyframes fv-shine{ 0%{ transform:translateX(-130%) } 45%,100%{ transform:translateX(130%) } }
.price-now{ animation:fv-pricepulse 2.6s ease-in-out infinite }
@keyframes fv-pricepulse{
  0%,100%{ text-shadow:0 0 0 rgba(44,255,5,0) }
  50%{ text-shadow:0 0 18px rgba(44,255,5,.45) } }
.price-off{ display:inline-block; animation:fv-nudge 3.4s ease-in-out 2s infinite }
@keyframes fv-nudge{
  0%,86%,100%{ transform:none }
  90%{ transform:rotate(-2deg) scale(1.06) }
  94%{ transform:rotate(2deg) scale(1.06) }
  97%{ transform:scale(1.03) } }
@media (prefers-reduced-motion: reduce){
  .btn-primary,.btn-primary::after,.price-now,.price-off{ animation:none } }

/* ── 온라인 강의 가격 초강조 (2026-08-24) — 구매 카드 안에서만 ── */
.course-buy .price-off{
  font-size:clamp(30px,3.4vw,60px);
  text-shadow:0 0 22px rgba(44,255,5,.45);
}
.course-buy .price-now{
  color:var(--green);
  font-size:clamp(34px,4.1vw,78px);
  animation:fv-pricepulse-big 2.4s ease-in-out infinite;
}
@keyframes fv-pricepulse-big{
  0%,100%{ text-shadow:0 0 8px rgba(44,255,5,.25) }
  50%{ text-shadow:0 0 34px rgba(44,255,5,.7) } }
.course-buy .price-was{ font-size:clamp(14px,1.2vw,22px) }
@media (prefers-reduced-motion: reduce){ .course-buy .price-now{ animation:none } }

/* ── 맛보기 강의 — 눌러보고 싶게 (2026-08-24) ── */
.ol-taste-artlink{ display:block; position:relative; border-radius:14px; overflow:hidden }
.ol-taste-artlink img{ display:block; transition:transform .3s ease }
.ol-taste-artlink:hover img{ transform:scale(1.03) }
.ol-taste-play{ position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px; background:rgba(0,0,0,.18) }
.ol-taste-play i{ font-style:normal; width:72px; height:72px; border-radius:50%;
  display:grid; place-items:center; padding-left:6px; font-size:26px;
  background:rgba(0,0,0,.55); border:2px solid var(--green); color:var(--green);
  animation:taste-ring 2.2s ease-out infinite }
@keyframes taste-ring{
  0%{ box-shadow:0 0 0 0 rgba(44,255,5,.4) }
  70%,100%{ box-shadow:0 0 0 16px rgba(44,255,5,0) } }
.ol-taste-play em{ font-style:normal; font-weight:800; font-size:13px; color:#fff;
  background:rgba(0,0,0,.6); border:1px solid var(--green); border-radius:99px; padding:5px 12px }
.ol-taste-artlink:hover .ol-taste-play i{ background:var(--green); color:#031000 }
@media (prefers-reduced-motion: reduce){ .ol-taste-play i{ animation:none } }

/* 99,000원 이 폰에서 「원」만 줄 떨어지던 것 — 한 줄 고정 + 폰 크기 조정 */
.course-buy .price-now{ white-space:nowrap }
@media (max-width:560px){
  .course-buy .price-now{ font-size:clamp(30px,10.5vw,44px) }
  .course-buy .price-off{ font-size:clamp(24px,7.5vw,34px) } }


/* ── 할인 톱니 도장 (2026-08-24) — 포스터 세일 스티커 느낌 ── */
.course-buy{ position:relative }
.course-buy .price-off.burst{
  position:absolute; top:-48px; right:-12px; width:104px; height:104px;
  display:grid; place-items:center; text-align:center;
  background:var(--green); color:#031000;
  clip-path:polygon(50.0% 0.0%, 54.6% 8.8%, 61.1% 1.3%, 63.7% 10.8%, 71.7% 5.0%, 72.1% 14.9%, 81.2% 10.9%, 79.3% 20.7%, 89.1% 18.8%, 85.1% 27.9%, 95.0% 28.3%, 89.2% 36.3%, 98.7% 38.9%, 91.2% 45.4%, 100.0% 50.0%, 91.2% 54.6%, 98.7% 61.1%, 89.2% 63.7%, 95.0% 71.7%, 85.1% 72.1%, 89.1% 81.2%, 79.3% 79.3%, 81.2% 89.1%, 72.1% 85.1%, 71.7% 95.0%, 63.7% 89.2%, 61.1% 98.7%, 54.6% 91.2%, 50.0% 100.0%, 45.4% 91.2%, 38.9% 98.7%, 36.3% 89.2%, 28.3% 95.0%, 27.9% 85.1%, 18.8% 89.1%, 20.7% 79.3%, 10.9% 81.2%, 14.9% 72.1%, 5.0% 71.7%, 10.8% 63.7%, 1.3% 61.1%, 8.8% 54.6%, 0.0% 50.0%, 8.8% 45.4%, 1.3% 38.9%, 10.8% 36.3%, 5.0% 28.3%, 14.9% 27.9%, 10.9% 18.8%, 20.7% 20.7%, 18.8% 10.9%, 27.9% 14.9%, 28.3% 5.0%, 36.3% 10.8%, 38.9% 1.3%, 45.4% 8.8%);
  font-size:26px; line-height:1; font-weight:800; text-shadow:none;
  animation:burst-wobble 3.2s ease-in-out infinite;
  filter:drop-shadow(0 0 14px rgba(44,255,5,.35)); z-index:3 }
.course-buy .price-off.burst span{ transform:rotate(-8deg); display:block }
.course-buy .price-off.burst em{ display:block; font-style:normal; font-size:15px;
  letter-spacing:0; margin-top:3px }
@keyframes burst-wobble{
  0%,100%{ transform:rotate(-6deg) scale(1) }
  50%{ transform:rotate(3deg) scale(1.05) } }
@media (max-width:560px){
  .course-buy .price-off.burst{ width:88px; height:88px; top:-38px; right:-4px; font-size:19px }
  .course-buy .price-off.burst em{ font-size:12.5px } }
@media (prefers-reduced-motion: reduce){ .course-buy .price-off.burst{ animation:none } }