/* 배경은 image-set 으로 AVIF 를 먼저 쓰고, 못 읽는 브라우저는 바로 위 url() 의 webp 로 떨어진다.
   classhl.com 스킨. html.skin-hl 이 붙은 페이지(hl.html, all.html)에만 적용된다.
   배경은 사이트와 같은 대리석(본문)·물결(헤더) 이미지를 쓰고, 글이 긴 영역은
   반투명 패널을 깔아 대리석 무늬 위에서도 읽히게 한다. */

html.skin-hl{
  --ink:#000;
  --ground:rgba(8,8,10,.86);
  --panel:rgba(14,14,17,.80);
  --panel-2:rgba(24,24,28,.84);
  --line:rgba(255,255,255,.14);
  --line-soft:rgba(255,255,255,.08);
  --text:#F2F2F2;
  --text-dim:#BDBDBD;
  --text-faint:#858585;
  --brass:#EDBE45;
  --brass-lo:#9A7A2C;
  --brass-wash:rgba(237,190,69,.10);
  background:#000;
}
html.skin-hl body{background:none}
html.skin-hl body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,.25)),url(img/bg-body.webp) center/cover no-repeat;
  background-image:linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,.25)),image-set(url(img/bg-body.avif) type("image/avif"),url(img/bg-body.webp) type("image/webp"));
}

/* 스킨v2: 헤더와 같은 물결 계열의 본문 배경. 이미지 자체가 충분히 어두워 덮개를 걷는다. */
html.skin-v2 body::before{background:url(img/bg-body-v2.webp) center/cover no-repeat;
  background-image:image-set(url(img/bg-body-v2.avif) type("image/avif"),url(img/bg-body-v2.webp) type("image/webp"))}

/* 사이트 상단 바. 물결 이미지를 띠로 자르지 않고 아래로 흐려지게 해서 본문 배경 위에 겹친다. */
.hlbar{position:relative;height:64px;display:flex;align-items:center;justify-content:center}
.hlbar::before{content:"";position:absolute;left:0;right:0;top:0;height:220px;pointer-events:none;
  background:linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.3)),url(img/bg-head.webp) center top/cover no-repeat;
  background-image:linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.3)),image-set(url(img/bg-head.avif) type("image/avif"),url(img/bg-head.webp) type("image/webp"));
  -webkit-mask-image:linear-gradient(to bottom,#000 25%,transparent);mask-image:linear-gradient(to bottom,#000 25%,transparent)}
html.skin-hl .wrap,html.skin-hl .cwrap{position:relative}
.hlbar a{position:relative;z-index:1;font-family:var(--serif);font-weight:700;font-size:22px;letter-spacing:.24em;
  color:var(--brass);text-decoration:none;padding-left:.24em}
html.skin-hl .rail{background:rgba(0,0,0,.82)}
html.skin-hl .brandmark{display:none}

/* 결과 카드: 대표 이미지 + 강의명 + 상품 제목 */
.lec-head{display:grid;grid-template-columns:112px minmax(0,1fr);gap:16px;align-items:start}
.lec-head .lec-top{margin-bottom:0}
.lec-thumb-a{display:block}
.lec-thumb{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:#0B0B0D}
.lec-thumb.ph{display:flex;align-items:center;justify-content:center;border:1px solid var(--line);
  font-family:var(--serif);font-size:15px;color:var(--text-faint)}
.lec-title{margin:8px 0 0;font-size:13.5px;line-height:1.6;color:var(--text-dim)}
@media(max-width:400px){.lec-head{grid-template-columns:84px minmax(0,1fr);gap:12px}}

/* 전체 강의 페이지 */
.cwrap{max-width:64rem;margin:0 auto;padding:0 20px 72px}
.chero{padding-block:clamp(36px,8vw,64px) 8px;max-width:36rem}
.tgroup{margin-top:40px}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 24px}
@media(max-width:960px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}}
.tile{display:flex;flex-direction:column;align-items:center;text-align:center;text-decoration:none;color:var(--text)}
.tile img,.tile-ph{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:#0B0B0D;transition:filter .2s ease}
.tile-ph{display:flex;align-items:center;justify-content:center;border:1px solid var(--line);font-family:var(--serif);font-size:20px;color:var(--text-faint)}
.tile:hover img{filter:brightness(1.12)}
.tile-t{margin-top:12px;font-size:14.5px;font-weight:500;line-height:1.55}
.tile:hover .tile-t{color:var(--brass)}
.tile-s{margin-top:4px;font-size:12.5px;color:var(--text-faint)}
.cat-cards{max-width:36rem;margin:56px auto 0;padding-top:28px;border-top:1px solid var(--line-soft)}
.cat-card{margin-bottom:28px;scroll-margin-top:16px}
.cat-ctx{margin:0 0 8px;font-size:12px;color:var(--text-faint);letter-spacing:.02em}
.cwrap .disclaimer{max-width:36rem;margin-inline:auto}