/* 온라인 강의 페이지 전용 — 커리큘럼·강사·후기·FAQ
   sub.css 의 clamp 유동 크기 규칙을 그대로 따른다. 기존 클래스는 건드리지 않는다. */

/* ── 커리큘럼 ─────────────────────────────────────────── */
.ol-curri{ padding:clamp(34px,4.4vw,88px) 0 clamp(30px,3.6vw,72px) }
.ol-head{ display:flex;flex-wrap:wrap;align-items:baseline;gap:clamp(10px,1.4vw,26px);
  margin-bottom:clamp(18px,2.2vw,42px) }
.ol-head .sec-title{ margin-bottom:0 }
.ol-sum{ font-size:clamp(12px,1.05vw,20px);font-weight:600;color:var(--green) }
.ol-note{ font-size:clamp(11.5px,.98vw,18px);color:#8A8A8A;line-height:1.7;
  margin:0 0 clamp(16px,2vw,36px) }

/* 챕터 한 칸 = 카드. 줄줄이 선만 있는 목록보다 정돈돼 보인다. */
.ol-ch{
  background:var(--ink); border:1px solid rgba(255,255,255,.09);
  border-radius:clamp(12px,1.2vw,20px); overflow:hidden;
  transition:border-color .18s, background .18s;
}
.ol-ch + .ol-ch{ margin-top:clamp(8px,.9vw,16px) }
.ol-ch[open]{ border-color:rgba(44,255,5,.32) }
.ol-ch > summary{
  list-style:none; cursor:pointer;
  display:grid; grid-template-columns:auto minmax(0,1fr) auto auto;
  align-items:center; gap:clamp(12px,1.4vw,26px);
  padding:clamp(14px,1.5vw,26px) clamp(16px,1.8vw,34px);
}
.ol-ch > summary:hover{ background:rgba(255,255,255,.028) }
.ol-ch > summary:focus-visible{ outline:2px solid var(--green); outline-offset:-3px }
.ol-ch > summary::-webkit-details-marker{ display:none }
.ol-no{
  font-family:Unbounded,Pretendard,sans-serif; font-weight:800;
  font-size:clamp(13px,1.15vw,22px); color:var(--green);
  min-width:1.4em; text-align:center; font-variant-numeric:tabular-nums;
}
.ol-ttl{ font-size:clamp(13.5px,1.3vw,25px); font-weight:700;
  line-height:1.45; letter-spacing:-.02em; color:#fff }
.ol-cnt{ font-size:clamp(11px,.9vw,17px); color:#7E7E7E; white-space:nowrap }
.ol-arw{ color:#7E7E7E; font-size:clamp(13px,1.1vw,21px); transition:transform .2s }
.ol-ch[open] .ol-arw{ transform:rotate(180deg); color:var(--green) }
.ol-ch[open] .ol-ttl{ color:var(--green) }

/* 챕터별 강의 화면 4컷 — 접혀 있어도 보이는 자리 */
/* 컷 수가 4개가 아닌 챕터(0장 1컷, 1장 3컷)도 빈칸 없이 꽉 차게 — 그리드 대신 플렉스 */
.ol-shots{
  grid-column:1 / -1; display:flex; gap:clamp(5px,.55vw,10px);
  margin-bottom:clamp(12px,1.3vw,22px);
}
.ol-shots img{
  /* 컷이 1개든 4개든 한 컷의 크기는 항상 같게 — 챕터마다 높이가 들쭉날쭉하면 지저분해진다 */
  flex:1 1 0; min-width:0; max-width:calc(25% - clamp(4px,.42vw,8px));
  width:100%; height:auto; display:block;
  aspect-ratio:16/9; object-fit:cover;
  border-radius:clamp(5px,.5vw,9px);
  filter:saturate(.88) brightness(.82); transition:filter .2s;
}
.ol-ch[open] .ol-shots img,
.ol-ch > summary:hover .ol-shots img{ filter:none }

.ol-ses{
  list-style:none; margin:0;
  padding:0 clamp(16px,1.8vw,34px) clamp(12px,1.4vw,24px);
  border-top:1px solid rgba(255,255,255,.07);
}
.ol-ses li{
  display:flex; align-items:center; gap:clamp(9px,1vw,18px);
  padding:clamp(9px,.9vw,17px) 0;
  font-size:clamp(12.5px,1.06vw,20px); line-height:1.6; color:#C9C9C9;
}
.ol-ses li + li{ border-top:1px solid rgba(255,255,255,.055) }
.ol-sn{ flex:0 0 auto;min-width:3.1em;color:#6E6E6E;font-weight:600;
  font-size:clamp(11px,.92vw,17px) }
.ol-st{ flex:1 1 auto }
.ol-dur{ flex:0 0 auto;color:#6E6E6E;font-variant-numeric:tabular-nums;
  font-size:clamp(11px,.92vw,17px) }
.ol-free{
  flex:0 0 auto;background:var(--green);color:#000;font-weight:800;
  font-size:clamp(9.5px,.76vw,14px);padding:.32em .8em;border-radius:999px;
}

/* ── 강사 ─────────────────────────────────────────────── */
.ol-tutor{ padding:clamp(34px,4.4vw,88px) 0;border-top:1px solid rgba(255,255,255,.1) }
.ol-tutor-grid{ display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(20px,3vw,64px);align-items:start }
.ol-tutor-grid img{ width:100%;height:auto;border-radius:clamp(12px,1.2vw,22px);display:block }
.ol-tutor h3{ font-size:clamp(17px,1.85vw,36px);font-weight:800;color:#fff;
  letter-spacing:-.02em;margin-bottom:clamp(12px,1.4vw,26px) }
.ol-tutor p{ font-size:clamp(12.5px,1.1vw,21px);line-height:1.85;color:#B9B9B9 }
.ol-tutor p + p{ margin-top:clamp(10px,1.1vw,20px) }
.ol-cred{ list-style:none;margin:clamp(16px,2vw,36px) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:clamp(7px,.8vw,14px) }
.ol-cred li{ border:1px solid rgba(255,255,255,.22);border-radius:999px;
  padding:.5em 1.05em;font-size:clamp(11px,.95vw,18px);color:#EAEAEA }

/* ── 후기 ─────────────────────────────────────────────── */
.ol-rev{ padding:clamp(34px,4.4vw,88px) 0;border-top:1px solid rgba(255,255,255,.1) }
.ol-score{ display:flex;align-items:baseline;gap:clamp(8px,.9vw,16px);
  margin-bottom:clamp(6px,.7vw,12px) }
.ol-score b{ font-family:Unbounded,Pretendard,sans-serif;font-weight:800;
  font-size:clamp(26px,3vw,58px);color:var(--green);line-height:1 }
.ol-score span{ font-size:clamp(12px,1.05vw,20px);color:#8A8A8A }
.ol-rev-grid{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.4vw,26px);margin-top:clamp(18px,2.2vw,42px) }
.ol-rev-card{ background:var(--ink);border:1px solid rgba(255,255,255,.1);
  border-radius:clamp(12px,1.2vw,22px);padding:clamp(16px,1.9vw,38px);
  display:flex;flex-direction:column;gap:clamp(10px,1.1vw,20px) }
.ol-stars{ color:var(--green);font-size:clamp(12px,1vw,19px);letter-spacing:.12em }
.ol-rev-card p{ flex:1 1 auto;font-size:clamp(12px,1.02vw,20px);line-height:1.8;color:#C9C9C9 }
.ol-rev-meta{ font-size:clamp(10.5px,.88vw,16px);color:#6E6E6E;line-height:1.6 }
.ol-rev-meta em{ font-style:normal;display:block;margin-top:.35em;color:#5A5A5A }

/* ── FAQ ──────────────────────────────────────────────── */
.ol-faq{ padding:clamp(34px,4.4vw,88px) 0;border-top:1px solid rgba(255,255,255,.1) }
.ol-faq details{ border-bottom:1px solid rgba(255,255,255,.13) }
.ol-faq summary{ list-style:none;cursor:pointer;position:relative;
  padding:clamp(15px,1.7vw,32px) clamp(30px,2.6vw,50px) clamp(15px,1.7vw,32px) 0;
  font-size:clamp(13px,1.2vw,24px);font-weight:700;color:#fff;line-height:1.5 }
.ol-faq summary::-webkit-details-marker{ display:none }
.ol-faq summary::after{ content:'+';position:absolute;right:0;top:50%;
  transform:translateY(-50%);color:var(--green);font-weight:700;
  font-size:clamp(15px,1.3vw,26px) }
.ol-faq details[open] summary::after{ content:'−' }
.ol-faq .answer{ padding:0 0 clamp(16px,1.9vw,36px);
  font-size:clamp(12.5px,1.08vw,21px);line-height:1.85;color:#B9B9B9;max-width:78ch }
.ol-faq .answer a{ color:var(--green);text-decoration:underline;text-underline-offset:3px }

@media (max-width:900px){
  .ol-tutor-grid{ grid-template-columns:1fr;gap:clamp(16px,4vw,28px) }
  .ol-rev-grid{ grid-template-columns:1fr }
  .ol-ses li{ flex-wrap:wrap }
  .ol-ch > summary{ grid-template-columns:auto minmax(0,1fr) auto; gap:10px }
  .ol-cnt{ display:none }
  .ol-st{ flex:1 1 60% }
}

/* ── 히어로에 강의 커버 깔기 (오프라인 페이지처럼 사진이 먼저 보이게) ── */
.ol-hero{ position:relative; overflow:hidden; isolation:isolate }
.ol-hero-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:-1; opacity:.42; filter:saturate(.85);
}
.ol-hero::after{            /* 글자가 사진 위에서 읽히도록 아래를 어둡게 */
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.78) 62%, var(--black) 100%);
}
.ol-hero .lede{ color:#D2D2D2 }


@media (max-width:900px){
  .ol-taste-box{ grid-template-columns:1fr; padding-right:clamp(22px,2.8vw,56px) }
  .ol-taste-box > img{ max-width:340px; margin:0 auto }
  .ol-hero-bg{ opacity:.34 }
  .ol-shots{ flex-wrap:wrap }
  .ol-shots img{ flex:1 1 calc(50% - 5px); max-width:calc(50% - 5px) }
}

/* ── 섹션 제목을 TLAB 잉크로 (사이트 다른 페이지와 같은 방식) ── */
.ol-h{
  line-height:0; text-align:left; margin-bottom:0;
}
.ol-h svg.tlab{
  display:inline-block; height:auto; fill:currentColor; color:#fff;
  width:calc(var(--pagew) * var(--dwn, 400)/1920);
  max-width:calc(100% - 16px);
}
.ol-head{ align-items:center }
  font-size:clamp(13px,1.25vw,24px); font-weight:700; color:#fff;
  letter-spacing:-.02em; line-height:1.4;
  margin:clamp(10px,1.1vw,20px) 0 clamp(10px,1.2vw,22px);
}

/* 히어로 — 사진 때문에 위가 너무 높아졌다. 높이를 줄이고 사진을 밝게. */
.ol-hero{ padding:clamp(34px,4vw,84px) 0 clamp(26px,3vw,58px) }
.ol-hero-bg{ opacity:.55 }
.ol-hero::after{
  background:linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.72) 58%, var(--black) 100%);
}
.ol-hero h1{ font-size:clamp(24px,3.4vw,64px) }
.ol-hero .lede{ margin-top:clamp(12px,1.4vw,26px); max-width:52ch }
.ol-hero .hero-actions{ margin-top:clamp(18px,2vw,38px) }

/* ── 전체 압축 — 스크롤을 짧게 ────────────────────────────
   섹션 여백·이미지 크기를 한 번에 줄인다. 위의 규칙보다 뒤에 있어 이긴다. */
.ol-curri,.ol-tutor,.ol-rev,.ol-faq{ padding:clamp(24px,2.6vw,52px) 0 }
.ol-hero{ padding:clamp(26px,2.8vw,58px) 0 clamp(18px,2vw,40px) }
.ol-hero h1{ font-size:clamp(21px,2.6vw,48px) }
.ol-hero .lede{ font-size:clamp(12.5px,1.05vw,19px); margin-top:clamp(10px,1vw,18px) }
.ol-hero .hero-actions{ margin-top:clamp(14px,1.5vw,28px) }

/* 강의 화면 컷 — 한 단 더 작게 */
.ol-shots{ margin-bottom:clamp(9px,.95vw,16px) }
.ol-shots img{ max-width:calc(20% - clamp(4px,.42vw,8px)) }
.ol-ch > summary{ padding:clamp(11px,1.15vw,20px) clamp(13px,1.4vw,26px) }
.ol-ch + .ol-ch{ margin-top:clamp(6px,.65vw,11px) }
.ol-ses li{ padding:clamp(7px,.7vw,13px) 0 }
.ol-note{ margin-bottom:clamp(12px,1.3vw,24px) }
.ol-head{ margin-bottom:clamp(12px,1.4vw,26px) }

/* 강사 — 세로로 긴 사진이 화면을 잡아먹었다. 폭을 줄이고 높이를 잘라 가로형으로. */
.ol-tutor-grid{ grid-template-columns:minmax(0,.52fr) minmax(0,1fr); gap:clamp(16px,2vw,40px) }
.ol-tutor-grid img{ object-fit:cover; object-position:50% 30% }
.ol-tutor h3{ font-size:clamp(15px,1.5vw,28px); margin-bottom:clamp(9px,1vw,18px) }
.ol-tutor p{ font-size:clamp(12px,1.02vw,19px); line-height:1.75 }
.ol-cred{ margin-top:clamp(12px,1.3vw,24px) }


/* 후기·FAQ 여백 */
.ol-rev-grid{ margin-top:clamp(12px,1.4vw,26px); gap:clamp(10px,1.1vw,20px) }
.ol-rev-card{ padding:clamp(14px,1.5vw,28px); gap:clamp(8px,.9vw,15px) }
.ol-faq summary{ padding:clamp(12px,1.3vw,24px) clamp(30px,2.6vw,50px) clamp(12px,1.3vw,24px) 0 }
.ol-faq .answer{ padding-bottom:clamp(12px,1.4vw,26px) }

@media (max-width:900px){
  .ol-tutor-grid{ grid-template-columns:1fr }
  .ol-tutor-grid img{ aspect-ratio:16/10; max-height:44vw }
  .ol-shots img{ max-width:calc(50% - 5px) }
}

/* ══════════════════════════════════════════════════════════
   홈(index.html)의 리듬을 그대로 가져온다.
   홈은 제목을 크게 가운데 두고, 섹션 여백을 페이지 폭에 비례시킨다.
   ══════════════════════════════════════════════════════════ */
.ol-curri,.ol-tutor,.ol-rev,.ol-faq{
  --u:var(--pagew);
  padding:calc(var(--u) * 150/1920) 0 calc(var(--u) * 60/1920);
  border-top:0;                       /* 홈은 섹션 사이에 선을 긋지 않는다 */
}

/* 제목 — 홈과 같은 가운데 정렬 큰 잉크 */
.ol-h{ text-align:center; line-height:0; margin:0 }
.ol-h svg.tlab{
  display:inline-block; height:auto; fill:currentColor; color:#fff;
  width:calc(var(--pagew) * var(--dwn, 900)/1920);
  max-width:calc(100% - 16px);
}
.ol-head{
  display:block; text-align:center;
  margin-bottom:calc(var(--u) * 40/1920);
}
.ol-sum{
  display:block; margin-top:calc(var(--u) * 22/1920);
  font-size:clamp(12px,1.05vw,20px); font-weight:600; color:var(--green);
}
.ol-note{
  text-align:center; max-width:62ch; margin:0 auto calc(var(--u) * 44/1920);
  font-size:clamp(11.5px,.98vw,18px); color:#8A8A8A;
}
.ol-rev .ol-h,.ol-tutor .ol-h,.ol-faq .ol-h{ margin-bottom:calc(var(--u) * 40/1920) }

/* 후기 점수 — 제목 아래 가운데 */
.ol-score{ justify-content:center; margin-bottom:calc(var(--u) * 10/1920) }
.ol-rev .hero-actions{ justify-content:center }

  grid-template-columns:1fr minmax(0,.55fr);
  padding:calc(var(--u) * 46/1920); padding-right:0;
}

/* 강사 — 사진을 작게, 글을 넓게 */
.ol-tutor-grid{ grid-template-columns:minmax(0,.42fr) minmax(0,1fr) }

@media (max-width:900px){
  .ol-curri,.ol-tutor,.ol-rev,.ol-faq{ padding:clamp(30px,9vw,60px) 0 clamp(16px,4vw,32px) }
  .ol-taste-box{ grid-template-columns:1fr; padding:clamp(18px,5vw,34px) }
  .ol-note{ margin-bottom:clamp(14px,4vw,26px) }
}

/* ══════════════════════════════════════════════════════════
   맛보기 배너 — 간격을 하나의 단위(--gap)로만 쌓는다.
   여기저기서 margin 을 따로 주면 정렬이 어긋나므로
   세로 간격은 flex + gap 하나로만 만든다.
   ══════════════════════════════════════════════════════════ */
.ol-taste{ --u:var(--pagew); padding:calc(var(--u) * 40/1920) 0 }
.ol-taste-box{
  --pad:calc(var(--u) * 56/1920);
  --gap:calc(var(--u) * 20/1920);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.62fr);
  align-items:center; gap:calc(var(--u) * 40/1920);
  background:var(--ink); border:1px solid rgba(255,255,255,.1);
  border-radius:clamp(14px,1.4vw,26px);
  padding:var(--pad);
}
.ol-taste-txt{
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--gap);
}
/* 제목 — 글 컬럼 폭에 맞춰 억제한다 */
.ol-taste-h{ line-height:0; margin:0; max-width:100% }
.ol-taste-h svg.tlab{
  display:block; height:auto; fill:currentColor; color:var(--green);
  width:calc(var(--pagew) * var(--dwn, 300)/1920); max-width:100%;
}
.ol-taste-lead{
  font-size:clamp(15px,1.32vw,26px); font-weight:700; line-height:1.45;
  letter-spacing:-.02em; color:#fff;
}
.ol-taste-body{
  font-size:clamp(12.5px,1.05vw,19px); line-height:1.8; color:#A8A8A8;
  max-width:34ch;
}
.ol-taste-btn{ margin-top:calc(var(--u) * 8/1920) }
.ol-taste-art{ display:flex; justify-content:flex-end; align-items:center }
.ol-taste-art .ol-taste-artlink{ width:100%; max-width:calc(var(--u) * 420/1920) }
.ol-taste-art img{
  width:100%; height:auto; display:block;
  border-radius:clamp(10px,1vw,18px);
}

@media (max-width:900px){
  .ol-taste{ padding:clamp(14px,4vw,28px) 0 }
  .ol-taste-box{
    --pad:clamp(20px,5.5vw,34px); --gap:clamp(12px,3.4vw,20px);
    grid-template-columns:1fr; gap:clamp(18px,5vw,28px);
  }
  .ol-taste-h svg.tlab{ width:min(62%, 240px) }
  .ol-taste-body{ max-width:none }
  .ol-taste-art{ justify-content:center }
  .ol-taste-art .ol-taste-artlink{ width:min(84%, 340px); max-width:none; margin-inline:auto }
}

/* ══════════════════════════════════════════════════════════
   커리큘럼을 2열로 — curriculum.html 이 표를 3열로 놓아 압축한 것과 같은 방식.
   8개 챕터가 세로로만 쌓여 전체 높이의 3분의 1을 차지하고 있었다.
   ══════════════════════════════════════════════════════════ */
.ol-list{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:calc(var(--u) * 14/1920); align-items:start;
}
.ol-list .ol-ch + .ol-ch{ margin-top:0 }
.ol-shots img{ max-width:calc(25% - clamp(4px,.42vw,8px)) }

/* 섹션 여백 — curriculum.html 처럼 촘촘하게 */
.ol-curri,.ol-tutor,.ol-rev,.ol-faq{ padding:calc(var(--u) * 96/1920) 0 calc(var(--u) * 30/1920) }
.ol-head{ margin-bottom:calc(var(--u) * 26/1920) }
.ol-note{ margin-bottom:calc(var(--u) * 30/1920) }
.ol-rev .ol-h,.ol-tutor .ol-h,.ol-faq .ol-h{ margin-bottom:calc(var(--u) * 26/1920) }
.ol-tutor-grid{ grid-template-columns:minmax(0,.34fr) minmax(0,1fr) }

@media (max-width:900px){
  .ol-list{ grid-template-columns:1fr; gap:8px }
  .ol-tutor-grid{ grid-template-columns:1fr }
}

/* ══════════════════════════════════════════════════════════
   모바일 보정
   ══════════════════════════════════════════════════════════ */
@media (max-width:900px){
  /* 제목 — 데스크탑 비례식(--dwn)을 그대로 쓰면 좁은 화면에서 너무 작아진다.
     「맛보기 강의」와 같은 크기로 맞춘다. */
  .ol-h svg.tlab{ width:min(62%, 250px) }
  .ol-taste-h svg.tlab{ width:min(62%, 250px) }
  .ol-h{ overflow:visible }                 /* 위아래 잘림 방지 */
  .ol-h svg.tlab{ overflow:visible }

  /* 강사 — 얼굴이 화면을 꽉 채워 답답했다. 가로형으로 눕히고 위쪽을 남긴다. */
  .ol-tutor-grid img{
    aspect-ratio:auto; object-fit:contain;   /* 새 사진은 자르지 않는다 */
    max-height:none; width:100%;
  }
  .ol-tutor-grid{ gap:clamp(14px,4vw,24px) }
}

/* 별점 — 흰색이라 눈에 안 띄었다. 브랜드 그린으로 크게. */
.ol-stars{
  color:var(--green); font-size:clamp(15px,1.35vw,24px);
  letter-spacing:.16em; line-height:1;
  text-shadow:0 0 14px rgba(44,255,5,.45);
}
.ol-score b{ text-shadow:0 0 20px rgba(44,255,5,.4) }

/* 버튼 — 한글은 글자 아래 여백이 커서 위로 치우쳐 보인다.
   inline-flex 로 세로 가운데를 강제한다. */
.btn-primary,.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center;
  line-height:1; padding-top:.95em; padding-bottom:.95em;
}

/* 줄바꿈 — 마지막 줄만 짧게 남는 걸 막는다. 브라우저가 줄 길이를 고르게 나눈다. */
.ol-note,.ol-taste-lead,.ol-taste-body,.ol-tutor h3,.ol-sum,
.sub-hero .lede,.also-lede,.sec-title{ text-wrap:balance }
.ol-faq summary{ text-wrap:balance }

/* ── 제목과 본문 사이 숨 트이게 · 모바일 제목 한 단 축소 ── */
.ol-curri,.ol-tutor,.ol-rev,.ol-faq{ --u:var(--pagew) }
.ol-head,
.ol-rev .ol-h,.ol-tutor .ol-h,.ol-faq .ol-h{
  margin-bottom:calc(var(--u) * 56/1920);
}
.ol-score{ margin-top:calc(var(--u) * 10/1920) }
.ol-note{ margin-top:calc(var(--u) * 18/1920); margin-bottom:calc(var(--u) * 52/1920) }
.ol-rev-grid{ margin-top:calc(var(--u) * 40/1920) }
.ol-tutor-grid{ margin-top:calc(var(--u) * 12/1920) }
.ol-faq details:first-of-type{ border-top:1px solid rgba(255,255,255,.13) }

@media (max-width:900px){
  /* 제목이 여전히 컸다. 한 단 더 줄인다. */
  .ol-h svg.tlab, .ol-taste-h svg.tlab{ width:min(48%, 190px) }
  /* 제목 → 본문 간격을 넉넉히 */
  .ol-head,
  .ol-rev .ol-h,.ol-tutor .ol-h,.ol-faq .ol-h{ margin-bottom:clamp(20px,6vw,34px) }
  .ol-note{ margin-top:clamp(10px,3vw,18px); margin-bottom:clamp(20px,6vw,34px) }
  .ol-rev-grid{ margin-top:clamp(18px,5vw,30px) }
  .ol-score{ margin-top:clamp(8px,2.5vw,14px); margin-bottom:clamp(4px,1.5vw,10px) }
  .ol-tutor-grid{ margin-top:clamp(10px,3vw,18px) }
  .ol-curri,.ol-tutor,.ol-rev,.ol-faq{ padding:clamp(38px,11vw,72px) 0 clamp(18px,5vw,34px) }
}

/* ══════════════════════════════════════════════════════════
   섹션 제목 높이 통일 (1024px 아래)
   ──────────────────────────────────────────────────────────
   제목이 SVG 잉크라 「폭」을 맞추면 글자 수가 적은 제목일수록
   세로로 커진다. 실측: 390px 에서 강사 183px vs 수강생후기 70px.
   폭이 아니라 「높이」를 고정해야 네 제목이 나란히 보인다.
   ══════════════════════════════════════════════════════════ */
@media (max-width:1023px){
  .ol-curri .ol-h svg.tlab,
  .ol-tutor .ol-h svg.tlab,
  .ol-rev   .ol-h svg.tlab,
  .ol-faq   .ol-h svg.tlab{
    width:auto;
    height:clamp(34px, 9.5vw, 76px);
    max-width:calc(100% - 24px);
  }
}

/* ══════════════════════════════════════════════════════════
   본문 호흡 — 행간과 문단 간격을 넓힌다 (사용자 요청)
   ══════════════════════════════════════════════════════════ */
.ol-tutor p{ line-height:2.0 }
.ol-tutor p + p{ margin-top:clamp(16px,1.7vw,30px) }
.ol-tutor h3{ line-height:1.45; margin-bottom:clamp(14px,1.5vw,26px) }
.ol-cred{ margin-top:clamp(18px,2vw,34px); line-height:2.0 }
.ol-note{ line-height:1.95 }
.ol-faq .answer{ line-height:2.0 }
.ol-rev-card p{ line-height:1.95 }
.ol-hero .lede{ line-height:1.9 }

/* ══════════════════════════════════════════════════════════
   강사 사진 — 얼굴이 너무 크게 잡혀 부담스럽다는 피드백
   ──────────────────────────────────────────────────────────
   원본 1440×2775(세로 1:1.93)을 4/5 로 자르니 세로의 65%만 보이고
   그 안에서 얼굴이 절반을 차지했다. 액자를 세로로 늘려 더 많이
   보여주면 같은 사진이라도 얼굴 비중이 내려간다.
   ══════════════════════════════════════════════════════════ */
.ol-tutor-grid img{
  aspect-ratio:3/5;              /* 4/5 → 3/5 : 세로 86% 노출 */
  object-fit:cover;
  object-position:50% 30%;       /* 22% → 30% : 상체를 더 넣는다 */
}
@media (max-width:900px){
  .ol-tutor-grid img{
    aspect-ratio:4/5;            /* 16/10 은 얼굴만 잘려 나온다 */
    max-height:none;
    object-position:50% 28%;
    /* 1단이 되면 폭을 다 먹어 사진만 화면을 채운다. 실측 768px 에서
       704×879 까지 커졌다. 가운데 정렬로 묶어둔다. */
    max-width:min(100%, 340px);
    margin-inline:auto;
  }
}