/*
 * 멤버십 라이브 클래스 — /membership/?view=live (inc/live-classes.php).
 *   목록 = 10/13 운영자 시안 2 「유데미」(아티팩트 KoaGQtPD4UgL1VkJypFWg1 · db picks/list4) — 머리 숫자 · 처음이라면 여기부터 ·
 *          왼쪽 거르개 + 찾기 + 정렬 + 가로 목록 · 주제별 모음. 값은 시안 사진 그대로(C:\tmp\msh23\mock4.css .mk2-*).
 *          같은 날 메뉴를 멤버십 클래스(?view=class) · 라이브 다시보기(?view=live) 두 화면으로 나눴고, 클래스 화면의 「이어 보기」 줄은 운영자 「제외」로 뺐다.
 *          폰의 거르개 = 공용 하단 판(css/mobile-chrome.css .omc-sheet)과 같은 모양 — 위 모서리 12px · 손잡이 · ✕ · 열면 바탕 스크롤 잠금.
 *          같은 날 넓은 화면 후속(아티팩트 LL65mQ7DkKk4cUmRRL9E4P · db picks/wide1): 시안 A 「남는 폭을 다 쓴다」(2400 에서 멈춤) + 메모 「왼쪽 거르개가 늘 보이게」 —
 *          거르개 = 머리 아래 왼쪽 칸(.mlL-body), 거르거나 찾으면 위 줄들이 접히고 결과가 맨 위로(.mlL.is-res — js). 카드 줄 칸 수 = css/membership.css .msh-cols.
 *          (그 전 목록 C′ — H1 그림 배너 + M1 움직임 + S3 띠 + 줄 열 개 — 는 git 10/13 이전 판. 명조 부분 글꼴·배너 그림도 그때 같이 걷었다)
 *   카드 = 10/13 썸네일 A(띠 그림 + 그라데이션 + 두 줄 제목을 그림에 구웠다 — scripts/live-classes/thumbs.cjs. 그라데이션은 그림 안이라 CSS 예외가 아니다).
 *          멤버십 홈 줄(inc/membership-hub.php .msh-lcgrid)도 같은 카드를 쓴다.
 *   상세 = N2(오른쪽 카드는 띠 아래에서 시작 · 띠는 짙은 그라데이션 + 클래스마다 프로그램 화면 그림 · 카드 표지는 10/13 뺐다)
 * ⚠️ 운영자 예외(CLAUDE.md 「그라디언트·blur」 예외 줄): 상세 띠 그림 위 왼쪽 짙은 그라데이션(글자 자리). 이 자리 하나뿐이다.
 * 별점 별 = 정규 클래스와 같은 #F5A623(사이트 규칙 「별점은 코너 기존 색」).
 */

/* 1. 바탕 */
.aih .mlC * { box-sizing: border-box; }
.aih .mlC { color: var(--gray-900); word-break: keep-all; overflow-wrap: anywhere; font-size: 15px; }
.aih .mlC :where(h1, h2, h3, p, ul, dl, dd) { margin: 0; padding: 0; color: inherit; } /* :where — 아래 클래스 규칙(.mlC-subt 여백 등)이 이기게 */
.aih .mlC a, .aih .mlC a:hover, .aih .mlC a:focus, .aih .mlC a:active { color: inherit; text-decoration: none; }
.aih .mlC img { display: block; max-width: none; }
.aih .mlC ul { list-style: none; }
.aih .mlC :where(button) { margin: 0; font: inherit; color: inherit; cursor: pointer; }

/* 2. 카드 — 멤버십 클래스 「처음이라면 여기부터」·「주제별 모음」 · 멤버십 홈 줄 */
.aih .mlC-card { position: relative; display: block; min-width: 0; scroll-snap-align: start; } /* position — 카드 안 화면 낭독용 글자(.aih-sr, 절대 위치)가 줄 밖 감싸개를 기준으로 잡혀 문서 폭을 늘리던 것을 막는다 */
.aih .mlC-img { position: relative; display: block; aspect-ratio: 16 / 9; border: 1px solid var(--gray-200); border-radius: 8px; overflow: hidden; }
.aih .mlC-img > img { width: 100%; height: 100%; object-fit: cover; } /* 10/13 썸네일 A — 제목이 그림 안에 있어 옛 꼬리표(.mlC-kw)는 걷었다 */
.aih .mlC-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 10px; font-size: 16px; line-height: 1.3; font-weight: 700; }
.aih .mlC-card:hover .mlC-t { text-decoration: underline; text-underline-offset: 3px; }
.aih .mlC-by { display: block; margin-top: 4px; font-size: 12px; color: var(--gray-500); }
.aih .mlC-rate { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 14px; }
.aih .mlC-rate b { color: var(--gray-900); font-weight: 700; }
.aih .mlC-stars { position: relative; display: inline-block; font-size: 13px; letter-spacing: 1px; line-height: 1; color: var(--gray-200); }
.aih .mlC-stars i { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: #F5A623; font-style: normal; }
.aih .mlC-rc { font-size: 12px; color: var(--gray-500); }
.aih .mlC-meta { display: block; margin-top: 4px; font-size: 12px; color: var(--gray-500); }
.aih .mlC-badge { display: inline-block; margin-top: 8px; padding: 3px 8px; border-radius: 6px; background: var(--gray-100); color: var(--gray-800); font-size: 12px; line-height: 18px; font-weight: 700; }
.aih .mlC-badge--new { background: var(--primary-50); color: var(--primary-700); }

/* 3. 목록 — 시안 2 「유데미」 */
.aih .mlL { --ll-top: calc(var(--aih-top, 60px) + 20px); }
@media (min-width: 783px) {
  body.admin-bar .aih .mlL { --ll-top: calc(var(--aih-top, 60px) + 52px); }
}
/* 목록 머리(큰 제목 · 탭 줄 · 숫자 한 줄)는 다른 멤버십 화면과 한 벌 — css/membership.css 「머리」 절(2026-10-14 26·28차). 옛 .mlL-head · 숫자 칸 규칙은 지웠다 */
.aih .mlL-sec { margin-top: 36px; }
.aih .mlL h2 { display: flex; align-items: baseline; gap: 10px; font-size: 22px; line-height: 1.3; font-weight: 700; }
.aih .mlL h2 small { font-size: 14px; font-weight: 500; color: var(--gray-500); }
.aih .mlL-tabs { display: flex; gap: 24px; margin-top: 12px; box-shadow: inset 0 -1px 0 var(--gray-200); }
.aih .mlL .mlL-tabs button { padding: 8px 0 10px; border: 0; background: none; font-size: 15px; font-weight: 600; color: var(--gray-500); white-space: nowrap; }
.aih .mlL .mlL-tabs button:hover { color: var(--gray-900); }
.aih .mlL .mlL-tabs button[aria-selected="true"] { color: var(--gray-900); box-shadow: inset 0 -2px 0 var(--gray-900); }
.aih .mlL-track { display: grid; gap: 16px; margin-top: 18px; } /* 칸 수 = .msh-cols(css/membership.css — 본문 칸 폭에 따라 2~6) */
.aih .mlL-track[hidden] { display: none; }
/* 머리 아래 = 왼쪽 거르개 칸 | 본문 칸(멤버십 클래스: 처음이라면 · 전체 클래스 · 주제별 모음 — 이어 보기 줄은 10/13 운영자 「제외」로 뺐다 · 라이브 다시보기: 전체 라이브).
   거르개는 처음부터 보이고 따라 내려온다(넓은 화면 후속 메모). 거르거나 찾으면(.is-res — js) 위 줄들은 접히고 전체 목록이 본문 칸 맨 위로 온다 */
.aih .mlL-body { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 40px; align-items: start; margin-top: 28px; } /* 거르개 280 — 10/13 운영자 「스크롤 때문에 가독성이 떨어진다 · 너비 넓히자」(그 전 232) · 위 28 = 탭 줄 아래 여백과 같게(29차 — 36 이라 다른 탭보다 8px 내려가 있었다) */
.aih .mlL-col { min-width: 0; }
.aih .mlL-col > .mlL-sec:first-child { margin-top: 0; }
.aih .mlL.is-res .mlL-start, .aih .mlL.is-res .mlL-picks { display: none; }
.aih .mlL.is-res .mlL-all { margin-top: 0; }
/* 전체 목록 — 머리 줄(찾기 · 거르기(폰) · 정렬) · 가로 목록 */
.aih .mlL-all { margin-top: 56px; scroll-margin-top: var(--ll-top); }
.aih .mlL-bar { display: flex; align-items: center; gap: 16px; }
.aih .mlL-bar h2 { flex: none; white-space: nowrap; } /* 좁은 PC(1100)에서 「전체 / 클래스 26 / 개」로 꺾이던 것 — 대신 찾기 칸이 줄어든다 */
.aih .mlL-bar h2 em { font-style: normal; font-size: 16px; font-weight: 600; color: var(--gray-500); font-variant-numeric: tabular-nums; }
.aih .mlL-tools { display: flex; align-items: center; gap: 8px; min-width: 0; margin-left: auto; }
.aih .mlL-q { display: inline-flex; flex: 0 1 auto; align-items: center; gap: 8px; width: 260px; min-width: 150px; height: 44px; padding: 0 12px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--gray-300); color: var(--gray-500); cursor: text; }
.aih .mlL-q:focus-within { box-shadow: inset 0 0 0 2px var(--primary); }
.aih .mlL .mlL-q input { flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font: inherit; font-size: 14px; color: var(--gray-900); outline: 0; }
.aih .mlL .mlL-fbtn, .aih .mlL-sort { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 14px; border: 0; border-radius: 6px; background: none; box-shadow: inset 0 0 0 1px var(--gray-300); font-size: 14px; font-weight: 700; color: var(--gray-900); }
.aih .mlL .mlL-fbtn { display: none; }
.aih .mlL .mlL-fbtn:hover, .aih .mlL-sort:hover { background: var(--gray-50); }
.aih .mlL-fbtn b { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 6px; background: var(--brand-action); color: var(--surface-white); font-size: 12px; line-height: 20px; }
.aih .mlL-fbtn b[hidden] { display: none; }
/* 정렬 — 고르기 칸(select)이 상자를 다 채운다: 펼친 목록이 상자 왼쪽 끝·폭에 맞춰 열린다(그 전엔 글자 칸 폭으로 좁게 열려 상자와 어긋났다 — 10/13 운영자 「필터 열었을 때 css」).
   「정렬」 글자와 아래 화살은 그 위에 얹는다(누르면 고르기 칸이 받는다) */
.aih .mlL-sort { padding: 0; cursor: pointer; }
.aih .mlL-sort span { position: absolute; inset-block: 0; left: 14px; display: flex; align-items: center; font-size: 12px; font-weight: 500; color: var(--gray-500); pointer-events: none; }
.aih .mlL .mlL-sort select { appearance: none; -webkit-appearance: none; width: 100%; height: 100%; margin: 0; padding: 0 34px 0 50px; border: 0; border-radius: 6px; background: none; box-shadow: none; font: inherit; font-weight: 700; color: var(--gray-900); outline: 0; cursor: pointer; }
.aih .mlL-sort svg { position: absolute; right: 12px; top: 50%; margin-top: -8px; pointer-events: none; }
.aih .mlL-sort:focus-within { box-shadow: inset 0 0 0 2px var(--primary); }
/* 펼친 목록 꾸미기 — 꾸밀 수 있는 고르기 칸(appearance: base-select)을 아는 브라우저(Chrome·Edge 135~)의 PC 에서만. 나머지·폰은 브라우저 기본 목록(위 규칙으로 폭·자리만 맞는다).
   흰 판 + 그림자(테두리 없이) · 칸 6px · 마우스 올림 = 회색 50 · 고른 칸 = 굵은 글자 + 오른쪽 체크(색 면 대신 글자·표시 — v3) */
@supports (appearance: base-select) {
  @media (min-width: 1025px) {
    .aih .mlL-sort { width: 168px; } /* 이 모드의 고르기 칸은 고른 글자 길이만큼만 넓어져 정렬을 바꾸면 상자가 줄고 늘었다(163↔138) — 가장 긴 「새로 올라온 순」 폭으로 고정 */
    .aih .mlL .mlL-sort select, .aih .mlL .mlL-sort select::picker(select) { appearance: base-select; }
    .aih .mlL .mlL-sort select { display: flex; align-items: center; }
    .aih .mlL .mlL-sort select::picker-icon { display: none; }
    .aih .mlL .mlL-sort select::picker(select) { margin-block: 6px; padding: 6px; border: 0; border-radius: 8px; background: var(--surface-white); box-shadow: var(--shadow-lg); }
    .aih .mlL .mlL-sort option { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px; border-radius: 6px; font-size: 14px; font-weight: 500; color: var(--gray-700); cursor: pointer; }
    .aih .mlL .mlL-sort option:hover, .aih .mlL .mlL-sort option:focus-visible { background: var(--gray-50); color: var(--gray-900); outline: 0; }
    .aih .mlL .mlL-sort option:checked { font-weight: 700; color: var(--gray-900); }
    .aih .mlL .mlL-sort option::checkmark { order: 1; margin-left: auto; color: var(--brand-action); }
  }
}
.aih .mlL-list { margin-top: 16px; }
/* 거르개 칸 — 따라 내려오고, 화면보다 길면 칸 안에서 스크롤(높이는 js 3-4 가 칸 위끝에 맞춰 다시 잰다 · 이 max-height 는 붙은 뒤 높이 = 스크립트가 없을 때의 받침).
   스크롤 막대는 늘 자리를 잡아 두고(scrollbar-gutter — 막대가 생기고 사라져도 글자가 안 밀린다) 개수 숫자와 14px 띄운다 — 10/13 운영자 「스크롤 때문에 가독성이 떨어진다」 */
.aih .mlL-filter { position: sticky; top: var(--ll-top); max-height: calc(100vh - var(--ll-top) - 16px); overflow-y: auto; overscroll-behavior: contain; padding-right: 14px; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: var(--gray-300) transparent; }
/* 거르개 머리 — PC 칸: 「거르기」 + 고른 게 있을 때만 [모두 지우기](자리는 늘 잡아 둔다) · 폰 판: 「거르기」 + ✕(아래 5절) */
.aih .mlL-fhead { position: sticky; top: 0; z-index: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 2px 2px 12px 0; background: var(--surface-white); font-size: 17px; font-weight: 700; } /* 칸 안을 스크롤해도 「거르기 · 모두 지우기」는 위에 남는다 */
.aih .mlL .mlL-fclear { padding: 0; border: 0; background: none; font-size: 13px; font-weight: 600; color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.aih .mlL:not(.is-fil) .mlL-fclear { visibility: hidden; }
.aih .mlL .mlL-fx, .aih .mlL-fact { display: none; }
.aih .mlL-fg { padding: 16px 2px 14px 0; box-shadow: inset 0 1px 0 var(--gray-200); }
.aih .mlL-fg summary { display: flex; align-items: center; justify-content: space-between; font-size: 15px; font-weight: 700; list-style: none; cursor: pointer; }
.aih .mlL-fg summary::-webkit-details-marker { display: none; }
.aih .mlL-fg summary svg { transition: transform .15s ease; }
.aih .mlL-fg:not([open]) summary svg { transform: rotate(-90deg); }
.aih .mlL-opt { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 14px; color: var(--gray-800); cursor: pointer; }
.aih .mlL .mlL-opt input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--brand-action); cursor: pointer; }
.aih .mlL-opt em { margin-left: auto; font-style: normal; font-size: 13px; color: var(--gray-500); font-variant-numeric: tabular-nums; }
.aih .mlL-item { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 22px; padding: 20px 0; box-shadow: inset 0 1px 0 var(--gray-200); }
.aih .mlL-item:first-child { padding-top: 6px; box-shadow: none; } /* js 가 보이는 줄을 맨 앞으로 모은다 — 첫 줄 = 맨 위 보이는 줄 */
.aih .mlL-item[hidden] { display: none; }
.aih .mlL-ib { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
.aih .mlL-t { font-size: 17px; line-height: 1.35; font-weight: 700; }
.aih .mlL-item:hover .mlL-t { text-decoration: underline; text-underline-offset: 3px; }
.aih .mlL-sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; line-height: 1.5; color: var(--gray-700); }
.aih .mlL-by { font-size: 12.5px; color: var(--gray-500); }
/* 라이브 다시보기 — 클래스에 든 회차 줄의 「멤버십 클래스 「이름」 3회」(메뉴 칸과 같은 학사모 아이콘) */
.aih .mlL-in { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--gray-700); }
.aih .mlL-in svg { flex: none; color: var(--gray-500); }
.aih .mlL-item .mlC-rate { margin-top: 0; }
.aih .mlL-meta { font-size: 13px; color: var(--gray-500); }
/* Premium — 곁 정보 줄 끝의 보석 아이콘 + 글자, 곁 정보와 같은 색·굵기(10/13 운영자 「밑에 Premium 이 덕지덕지 붙은 것 같다」 — 그 전엔 아래 꼬리표 줄의 회색 칸.
   처음엔 한 단 짙게(회색 700·굵게 600) 했다가 같은 날 「프리미엄이 너무 튄다」) */
.aih .mlL-pr { white-space: nowrap; }
.aih .mlL-pr svg { display: inline-block; margin-right: 3px; vertical-align: -2px; }
.aih .mlL-bdg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; } /* 꼬리표 줄 = 「새 클래스·새 라이브」만 */
.aih .mlL-bdg b { padding: 3px 8px; border-radius: 6px; background: var(--gray-100); color: var(--gray-800); font-size: 12px; line-height: 18px; font-weight: 700; }
.aih .mlL-bdg b.is-new { background: var(--primary-50); color: var(--primary-700); }
.aih .mlL-empty { padding: 40px 0; text-align: center; font-size: 15px; color: var(--gray-600); }
.aih .mlL-empty[hidden] { display: none; }
.aih .mlL .mlL-empty button { margin-left: 6px; padding: 0; border: 0; background: none; color: var(--primary); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.aih .mlL .mlL-more { display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; margin-top: 8px; border: 0; border-radius: 6px; background: none; box-shadow: inset 0 0 0 1px var(--gray-300); font-size: 15px; font-weight: 700; color: var(--gray-900); }
.aih .mlL .mlL-more:hover { background: var(--gray-50); }
.aih .mlL-more[hidden] { display: none; }
.aih .mlL-dim { display: none; }
.aih .mlL-picks { margin-top: 56px; }
.aih .mlL-picks .mlL-track { margin-top: 16px; }

/* 4. 상세 — N2(Skillshare 학습 경로 머리): 띠 = 그림(오른쪽) + 왼쪽 짙은 그라데이션 · 오른쪽 카드는 띠 아래에서 시작해 따라 내려온다
   10/13 운영자 「양옆으로 벌어진다」 — 본문(--dm)·사이(--dg)·카드(--ds)를 한 덩어리로 묶어 가운데 둔다(Udemy 강좌 페이지처럼).
   예전엔 본문 칸이 1fr 이라 넓은 화면에서 카드만 오른쪽 끝으로 밀려 가운데가 비었다.
   10/14 운영자 「유튜브처럼 메인 썸네일 조정 — 전체 100% 폭으로 채우니 어색」 — 띠도 그 덩어리 폭 안의 둥근 판으로(유튜브 채널 배너처럼 아래 본문·카드와 양끝이 맞는다).
   그 전엔 띠가 화면 오른쪽 끝·머리글 밑까지 깔리고 띠 글자만 본문 왼쪽 끝에 맞췄다.
   칸 = [왼 여백 ≥ --dl][본문][사이][카드][오른 여백] — 남는 폭은 양 여백이 반씩 갖는다. */
.aih .mlC--det { --dm: 720px; --dg: 48px; --ds: 340px; --dl: 40px; display: grid; grid-template-columns: minmax(var(--dl), 1fr) minmax(0, var(--dm)) var(--dg) var(--ds) minmax(0, 1fr); align-items: start; }
/* 띠 = 본문 왼쪽 끝 ~ 카드 오른쪽 끝(2~4칸). --bx = 띠 안 글자 왼쪽 여백 — 그림 폭·그라데이션 멈춤 자리도 이 값에서 잰다(1440 에서 고른 N2 와 거의 같은 셈) */
.aih .mlC-band { --bx: 40px; position: relative; grid-column: 2 / 5; grid-row: 1; overflow: hidden; padding: 40px 40px 44px var(--bx); border-radius: 12px; background: var(--gray-900); color: var(--surface-white); }
.aih .mlC img.mlC-bandbg { position: absolute; top: 0; right: 0; width: calc(100% - var(--bx) - 221px); height: 100%; object-fit: cover; object-position: 100% var(--bfy, 50%); }
/* ⚠️ 그라데이션 = 운영자 예외(이 띠 하나). rgba(24,24,24) = --gray-900. 멈춤 자리는 글자 왼쪽 끝(--bx)에서 잰다 — 1440 화면에서 고른 N2 와 같은 자리(예전 28·50·68·72%).
   그림 왼쪽 끝(--bx + 221)까지는 완전히 덮는다 — 예전엔 거기서 6% 가 비쳐 세로 이음매가 보였다 */
.aih .mlC-band::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgb(24 24 24) 0, rgb(24 24 24) calc(var(--bx) + 221px), rgb(24 24 24 / .92) calc(var(--bx) + 300px), rgb(24 24 24 / .55) calc(var(--bx) + 530px), rgb(24 24 24 / .12) calc(var(--bx) + 735px), rgb(24 24 24 / 0) calc(var(--bx) + 780px)), linear-gradient(0deg, rgb(24 24 24 / .45) 0%, rgb(24 24 24 / 0) 40%); }
.aih .mlC-band-in { position: relative; z-index: 2; max-width: 640px; }
.aih .mlC-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: color-mix(in srgb, var(--brand-bright) 60%, var(--surface-white)); }
.aih .mlC .mlC-crumb a:hover { text-decoration: underline; text-underline-offset: 3px; }
.aih .mlC-band h1 { margin-top: 16px; font-size: 32px; line-height: 1.25; font-weight: 700; }
.aih .mlC-subt { margin-top: 12px; font-size: 19px; line-height: 1.4; }
.aih .mlC-r { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; font-size: 14px; }
.aih .mlC-r b { color: #F5A623; font-weight: 700; }
.aih .mlC-r .mlC-stars { color: var(--gray-600); }
.aih .mlC-rn { color: color-mix(in srgb, var(--brand-bright) 60%, var(--surface-white)); }
.aih .mlC-made { margin-top: 10px; font-size: 14px; }
.aih .mlC .mlC-made a { color: color-mix(in srgb, var(--brand-bright) 60%, var(--surface-white)); text-decoration: underline; text-underline-offset: 3px; }
.aih .mlC-info { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; font-size: 14px; }
.aih .mlC-info span { display: inline-flex; align-items: center; gap: 7px; }
.aih .mlC-aside { position: sticky; top: 76px; z-index: 2; grid-column: 4; grid-row: 2; margin-top: 32px; border-radius: 8px; overflow: hidden; background: var(--surface-white); box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 4px 12px rgba(0, 0, 0, .08); } /* margin-top 32 = 「배우는 것」 상자 윗선과 같게(10/14 — 띠가 둥근 판이 되며 어긋남이 보였다, 그 전 24) */
.aih .mlC-buy { padding: 22px 24px 20px; } /* 10/13 표지 그림(.mlC-cover)은 뺐다 — 띠와 같은 그림이 두 번 보였다 */
.aih .mlC-price { display: flex; align-items: baseline; gap: 8px; font-size: 26px; font-weight: 700; }
.aih .mlC-price span { font-size: 15px; font-weight: 400; color: var(--gray-500); }
.aih .mlC-pnote { margin-top: 6px; font-size: 14px; color: var(--gray-500); }
.aih .mlC a.mlC-cart { display: flex; align-items: center; justify-content: center; height: 48px; margin-top: 18px; border-radius: 6px; background: var(--brand-action); color: var(--surface-white); font-size: 16px; font-weight: 700; }
.aih .mlC a.mlC-cart:hover { background: var(--brand-hover); color: var(--surface-white); }
.aih .mlC a.mlC-now { display: flex; align-items: center; justify-content: center; height: 48px; margin-top: 8px; border: 1px solid var(--gray-200); border-radius: 6px; font-size: 16px; font-weight: 700; }
.aih .mlC a.mlC-now:hover { background: var(--gray-50); }
.aih .mlC-guar { margin-top: 12px; text-align: center; font-size: 12px; color: var(--gray-500); }
.aih .mlC-inc-h { display: block; margin-top: 18px; font-size: 16px; font-weight: 700; }
.aih .mlC-inc { display: grid; gap: 8px; margin-top: 10px; }
.aih .mlC-inc li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: center; font-size: 14px; }
.aih .mlC-share { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; font-size: 14px; font-weight: 700; }
.aih .mlC-share button, .aih .mlC .mlC-share a { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; text-decoration: underline; text-underline-offset: 4px; }
.aih .mlC-body { grid-column: 2; grid-row: 2; padding: 0 0 72px; }
.aih .mlC-learn { margin-top: 32px; padding: 24px; border: 1px solid var(--gray-200); border-radius: 8px; }
.aih .mlC-learn h2, .aih .mlC-content h2, .aih .mlC-inst h2 { font-size: 24px; font-weight: 700; }
.aih .mlC-learn ul { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 26px; margin-top: 18px; }
.aih .mlC-learn li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; font-size: 14px; line-height: 1.45; }
.aih .mlC-learn li svg { margin-top: 1px; color: var(--primary); }
.aih .mlC-content { margin-top: 40px; scroll-margin-top: 80px; }
.aih .mlC-cbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; font-size: 14px; }
.aih .mlC-all { padding: 0; border: 0; background: none; color: var(--primary); font-weight: 700; }
.aih .mlC-acc { margin-top: 10px; border: 1px solid var(--gray-200); border-radius: 8px; overflow: hidden; }
.aih .mlC-sec + .mlC-sec { border-top: 1px solid var(--gray-200); }
.aih .mlC-sh { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; padding: 16px 22px; border: 0; background: var(--gray-50); text-align: left; }
.aih .mlC-sh > svg { transition: transform .15s ease; }
.aih .mlC-sec.is-open .mlC-sh > svg { transform: rotate(180deg); }
.aih .mlC-sh b { font-size: 16px; line-height: 1.4; font-weight: 700; }
.aih .mlC-sh > span { font-size: 14px; color: var(--gray-500); white-space: nowrap; }
.aih .mlC-prem { margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: var(--gray-100); color: var(--gray-700); font-size: 12px; font-style: normal; font-weight: 700; vertical-align: 1px; }
.aih .mlC-chs { display: none; padding: 8px 0; }
.aih .mlC-sec.is-open .mlC-chs { display: block; }
.aih .mlC-lec { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 8px 22px; font-size: 14px; }
.aih .mlC a.mlC-lec:hover { background: var(--gray-50); }
.aih .mlC-lec em { font-style: normal; color: var(--gray-500); }
.aih .mlC-lec > svg { color: var(--gray-500); }
.aih .mlC .mlC-go { color: var(--primary); font-weight: 700; }
.aih .mlC .mlC-go > svg { color: var(--primary); }
.aih .mlC-inst { margin-top: 40px; }
.aih .mlC-inst h3 { margin-top: 14px; font-size: 19px; font-weight: 700; }
.aih .mlC .mlC-inst h3 a { color: var(--primary); text-decoration: underline; text-underline-offset: 4px; }
.aih .mlC-role { margin-top: 2px; font-size: 15px; color: var(--gray-500); }
.aih .mlC-ib { display: grid; grid-template-columns: 112px 1fr; gap: 16px; margin-top: 12px; align-items: center; }
.aih .mlC-ib img { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; } /* 아바타 — 완전 원형 허용 자리 */
.aih .mlC-ib ul { display: grid; gap: 6px; font-size: 14px; }
.aih .mlC-ib li { display: grid; grid-template-columns: 16px 1fr; gap: 12px; align-items: center; }
.aih .mlC-ip { margin-top: 14px; font-size: 14px; line-height: 1.6; }

/* 4-1. 좁은 PC(1025~1199) — 오른쪽 카드·사이를 줄여 본문 폭을 지킨다 · 목록 거르개도 조금 좁게 */
@media (min-width: 1025px) and (max-width: 1199px) {
  .aih .mlC--det { --dg: 32px; --ds: 300px; }
  .aih .mlL-body { grid-template-columns: 230px minmax(0, 1fr); gap: 28px; }
  .aih .mlL-item { grid-template-columns: 200px minmax(0, 1fr); gap: 18px; }
  .aih .mlL-q { width: 200px; }
}
/* 좁은 PC·폰 — Premium 은 곁 정보 아랫줄로(곁 정보 줄이 넘치면 「중급 ·」처럼 줄 끝에 점이 남았다 · 1100 에서 클래스 7개 중 3개) */
@media (max-width: 1199px) {
  .aih .mlL-sep { display: none; }
  .aih .mlL-pr { display: block; margin-top: 2px; }
}
/* 4-2. 넓은 PC — 목록은 남는 폭을 다 쓰고(넓은 화면 후속 시안 A — 그 전엔 1240 에서 멈추고 가운데라 2386 화면에서 양옆이 415px씩 비었다)
   아주 넓은 모니터에서만 2400 에서 멈추고 가운데. 상세는 읽는 화면이라 4절 그대로 가운데. */
@media (min-width: 1025px) {
  .aih .mlL { max-width: 2400px; margin: 0 auto; }
}
/* 본문 칸이 넓으면(1700~ — 2386 화면에서 1798) 전체 목록을 두 줄로 나란히. 첫 줄 규칙(위 테두리 없음)도 둘째 칸까지 */
@container (min-width: 1700px) {
  .aih .mlL-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; align-content: start; }
  .aih .mlL-item:nth-child(2) { padding-top: 6px; box-shadow: none; }
}

/* 5. 폰·태블릿 */
@media (max-width: 1024px) {
  .aih .mlC { padding: 0 16px; }
  /* 목록 */
  .aih .mlL-sec { margin-top: 30px; }
  .aih .mlL h2 { font-size: 19px; }
  .aih .mlL-tabs { gap: 18px; overflow-x: auto; scrollbar-width: none; }
  .aih .mlL-track { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62%; gap: 12px; margin-right: -16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .aih .mlL-track::-webkit-scrollbar, .aih .mlL-tabs::-webkit-scrollbar { display: none; }
  .aih .mlL-all, .aih .mlL-picks { margin-top: 40px; }
  .aih .mlL-bar { flex-wrap: wrap; gap: 12px; }
  .aih .mlL-tools { display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin-left: 0; }
  .aih .mlL-q { grid-column: 1 / -1; width: auto; }
  .aih .mlL .mlL-fbtn { display: inline-flex; }
  .aih .mlL-body { display: block; margin-top: 20px; } /* 29차 — 폰 탭 줄 아래 여백(20px)과 같게 */
  .aih .mlL-list { margin-top: 4px; }
  .aih .mlL .mlL-fclear { display: none; } /* 폰 판의 지우기는 아래 [모두 지우기] */
  /* 거르개 = 아래에서 올라오는 판(css/mobile-chrome.css .omc-sheet 와 같은 모양 · 같은 층) */
  .aih .mlL-filter { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: var(--z-modal, 400); display: flex; flex-direction: column; max-height: min(80vh, 640px); max-height: min(80dvh, 640px); overflow: hidden; padding-right: 0; scrollbar-gutter: auto; padding-bottom: env(safe-area-inset-bottom, 0px); border: 1px solid var(--gray-200); border-bottom: 0; border-radius: 12px 12px 0 0; background: var(--surface-white); visibility: hidden; transform: translateY(100%); transition: transform .2s ease, visibility 0s linear .2s; }
  .aih .mlL-filter.is-open { visibility: visible; transform: none; transition: transform .2s ease; }
  .aih .mlL-filter::before { content: ""; flex: none; align-self: center; width: 36px; height: 4px; margin-top: 8px; border-radius: 2px; background: var(--gray-300); } /* 손잡이(공용 하단 판과 같다) */
  .aih .mlL-fhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 4px 4px 16px; font-size: 17px; font-weight: 700; }
  .aih .mlL .mlL-fx { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--gray-700); }
  .aih .mlL-fbody { flex: 1 1 auto; min-height: 0; padding: 0 16px 8px; overflow-y: auto; overscroll-behavior: contain; }
  .aih .mlL-fbody .mlL-fg:first-child { box-shadow: none; }
  .aih .mlL-fact { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; padding: 12px 16px; box-shadow: inset 0 1px 0 var(--gray-200); }
  .aih .mlL .mlL-freset, .aih .mlL .mlL-fdone { height: 48px; padding: 0; border: 0; border-radius: 6px; font-size: 15px; font-weight: 700; }
  .aih .mlL .mlL-freset { background: none; box-shadow: inset 0 0 0 1px var(--gray-300); color: var(--gray-900); }
  .aih .mlL .mlL-fdone { background: var(--brand-action); color: var(--surface-white); }
  .aih .mlL-dim { position: fixed; inset: 0; z-index: var(--z-overlay, 300); display: block; background: rgb(0 0 0 / .4); }
  .aih .mlL-dim[hidden] { display: none; }
  .aih .mlL-item { grid-template-columns: 124px minmax(0, 1fr); gap: 12px; padding: 16px 0; }
  .aih .mlL-item .mlC-img { border-radius: 6px; }
  .aih .mlL-t { font-size: 15px; }
  .aih .mlL-sub, .aih .mlL-by { display: none; }
  .aih .mlL-meta { font-size: 12px; }
  /* 상세 */
  .aih .mlC--det { display: block; padding: 0; }
  .aih .mlC-band { margin: 8px 16px 0; padding: 0 16px 26px; border-radius: 12px; } /* 폰도 둥근 판(그림 위 · 글자 아래) — 10/14 운영자 「어느 게 보기 좋나」 → 검색창·칩·본문 왼쪽 끝(16px)과 맞고 PC 와 같은 모양. 끝까지 채우던 판은 git 10/14 */
  .aih .mlC img.mlC-bandbg { position: relative; inset: auto; display: block; width: calc(100% + 32px); height: 230px; margin: 0 -16px; object-position: 72% 50%; }
  .aih .mlC-band::before { bottom: auto; height: 230px; background: linear-gradient(0deg, rgb(24 24 24) 0%, rgb(24 24 24 / .2) 55%, rgb(24 24 24 / 0) 100%); }
  .aih .mlC-band-in { margin-top: -30px; }
  .aih .mlC-band h1 { font-size: 24px; }
  .aih .mlC-subt { font-size: 16px; }
  .aih .mlC-aside { position: static; margin: 0; border-radius: 0; box-shadow: none; }
  .aih .mlC-buy { padding: 20px 16px 4px; }
  .aih .mlC-body { max-width: none; padding: 0 16px 48px; }
  .aih .mlC-learn ul { grid-template-columns: 1fr; }
  .aih .mlC-sh { padding: 14px; }
  .aih .mlC-sh > span { white-space: normal; text-align: right; }
  .aih .mlC-lec { padding: 8px 14px; }
}

/* 6. 움직임 줄이기 — 회차 펼침 화살 · 거르개 접힘 화살 · 폰 거르개 판도 바로 */
@media (prefers-reduced-motion: reduce) {
  .aih .mlC-sh > svg, .aih .mlL-fg summary svg, .aih .mlL-filter, .aih .mlL-filter.is-open { transition: none; }
}