/* ==========================================================================
   밸류업 클래스 — 디자인 시스템
   색: 잉크(짙은 남색 검정) · 종이(따뜻한 미색) · 코발트(메인) · 코랄(LIVE·긴급)
   글꼴: Paperlogy(제목) + Pretendard(본문)
   ========================================================================== */

:root {
  --paper: #F5F3EE;
  --paper-2: #ECE8DF;
  --card: #FFFFFF;
  --ink: #0B0E17;
  --ink-2: #161B29;
  --ink-3: #242B3D;
  --text: #121620;
  --text-2: #4A5060;
  --text-3: #8A8F9C;
  --line: #E4E0D6;
  --line-2: #D6D1C4;
  --cobalt: #2448FF;
  --cobalt-600: #1A37E0;
  --cobalt-700: #1229B8;
  --cobalt-300: #8FA1FF;
  --cobalt-100: #DCE2FF;
  --cobalt-50: #EEF1FF;
  --coral: #FF5533;
  --coral-50: #FFEFEA;
  --green: #0FA968;
  --star: #FFB400;
  --kakao: #FEE500;
  --kakao-text: #191919;

  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  --shadow-1: 0 1px 2px rgba(11, 14, 23, .05), 0 3px 10px rgba(11, 14, 23, .04);
  --shadow-2: 0 18px 40px -18px rgba(11, 14, 23, .35);
  --shadow-3: 0 30px 80px -24px rgba(11, 14, 23, .45);

  --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  --display: 'Paperlogy', 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', sans-serif;

  --container: 1200px;
  --gutter: 20px;
  --header-h: 68px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

@font-face { font-family: 'Paperlogy'; font-weight: 800; font-display: swap; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2'); }
@font-face { font-family: 'Paperlogy'; font-weight: 600; font-display: swap; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2') format('woff2'); }

/* ---------- 기본 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--paper);
  letter-spacing: -0.01em;
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.no-scroll { overflow: hidden; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2.5px solid var(--cobalt); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--cobalt); color: #fff; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.display { font-family: var(--display); font-weight: 800; letter-spacing: -0.03em; }
.hide { display: none !important; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; }
.center { text-align: center; }
.muted { color: var(--text-3); }
.nowrap { white-space: nowrap; }

/* ---------- 버튼 ---------- */
.btn {
  --h: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--h); padding: 0 20px; border-radius: 12px;
  font-weight: 700; font-size: 15.5px; line-height: 1; white-space: nowrap;
  border: 1px solid transparent;
  transition: transform .15s var(--ease), background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.btn:active { transform: scale(.98); }
.btn[disabled], .btn.is-loading { opacity: .55; pointer-events: none; }
.btn-sm { --h: 38px; padding: 0 14px; font-size: 14px; border-radius: 10px; }
.btn-lg { --h: 56px; padding: 0 26px; font-size: 17px; border-radius: 14px; }
.btn-xl { --h: 62px; padding: 0 28px; font-size: 18px; border-radius: 14px; }
.btn-block { display: flex; width: 100%; }
.btn-primary { background: var(--cobalt); color: #fff; box-shadow: 0 8px 22px -10px rgba(36, 72, 255, .75); }
.btn-primary:hover { background: var(--cobalt-600); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: var(--ink-3); }
.btn-white { background: #fff; color: var(--ink); }
.btn-white:hover { background: var(--cobalt-50); }
.btn-outline { background: #fff; color: var(--text); border-color: var(--line-2); }
.btn-outline:hover { border-color: var(--ink); }
.btn-ghost-light { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .22); }
.btn-ghost-light:hover { background: rgba(255, 255, 255, .16); }
.btn-kakao { background: var(--kakao); color: var(--kakao-text); }
.btn-kakao:hover { background: #F5DC00; }
.btn .arrow { transition: transform .2s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.link-more { display: inline-flex; align-items: center; gap: 4px; font-size: 14.5px; font-weight: 600; color: var(--text-2); }
.link-more:hover { color: var(--cobalt); }
.link-more svg { width: 16px; height: 16px; transition: transform .2s; }
.link-more:hover svg { transform: translateX(3px); }

/* ---------- 배지 ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 9px; border-radius: 999px;
  font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap;
  background: var(--paper-2); color: var(--text-2);
}
.badge-live { background: var(--coral); color: #fff; }
.badge-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: pulse 1.4s infinite; }
.badge-free { background: var(--cobalt-50); color: var(--cobalt); }
.badge-premium { background: var(--ink); color: #fff; }
.badge-vod { background: #E9F7F0; color: var(--green); }
.badge-soon { background: var(--paper-2); color: var(--text-3); }
.badge-coral { background: var(--coral-50); color: var(--coral); }
.badge-sample { height: 20px; padding: 0 7px; font-size: 11px; background: rgba(11, 14, 23, .06); color: var(--text-3); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* ---------- 상단 공지 띠 ---------- */
.topbar { position: relative; background: var(--ink); color: rgba(255, 255, 255, .92); font-size: 13.5px; }
.topbar a { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 40px; padding: 8px 48px; text-align: center; }
.topbar .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 4px rgba(255, 85, 51, .22); animation: pulse 1.4s infinite; flex: none; }
.topbar b { color: #fff; font-weight: 700; white-space: nowrap; }
.topbar .go { color: var(--cobalt-300); font-weight: 700; white-space: nowrap; }
.topbar-close { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: grid; place-items: center; color: rgba(255, 255, 255, .6); border-radius: 8px; }
.topbar-close:hover { color: #fff; background: rgba(255, 255, 255, .08); }

/* ---------- 헤더 ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(245, 243, 238, .86);
  backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, box-shadow .2s;
}
.header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 6px 24px -18px rgba(11, 14, 23, .4); }
.header-inner { height: var(--header-h); display: flex; align-items: center; gap: 28px; }
.logo { display: inline-flex; align-items: center; gap: 9px; flex: none; }
.logo-mark { width: 32px; height: 32px; flex: none; }
.logo-word { font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: -0.04em; color: var(--ink); line-height: 1; white-space: nowrap; }
.logo-word em { font-style: normal; color: var(--cobalt); }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a { position: relative; padding: 8px 12px; border-radius: 10px; font-size: 15.5px; font-weight: 600; color: var(--text-2); transition: color .15s, background .15s; }
.nav a:hover { color: var(--ink); background: rgba(11, 14, 23, .04); }
.nav a.is-active { color: var(--ink); }
.nav a.is-active::after { content: ''; position: absolute; left: 50%; bottom: 1px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--cobalt); }
.nav .nav-new { position: absolute; top: 5px; right: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--coral); }
.header-spacer { flex: 1; }
.search { position: relative; width: 250px; }
.search input { width: 100%; height: 42px; padding: 0 42px 0 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 14px; outline: none; transition: border-color .2s, box-shadow .2s; }
.search input::placeholder { color: var(--text-3); }
.search input:focus { border-color: var(--cobalt); box-shadow: 0 0 0 4px var(--cobalt-50); }
.search button { position: absolute; right: 5px; top: 5px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: var(--text-2); }
.search button:hover { color: var(--cobalt); }
.header-actions { display: flex; align-items: center; gap: 8px; }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: var(--ink); }
.icon-btn:hover { background: rgba(11, 14, 23, .05); }
.icon-btn svg { width: 22px; height: 22px; }
.m-only { display: none !important; }

.user-menu { position: relative; }
.user-btn { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px 0 5px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 14.5px; font-weight: 700; }
.user-btn:hover { border-color: var(--line-2); }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--cobalt), #6C7FFF); color: #fff; font-size: 13.5px; font-weight: 800; overflow: hidden; flex: none; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.dropdown { position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; padding: 8px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-2); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .18s, transform .18s var(--ease); }
.user-menu.is-open .dropdown { opacity: 1; transform: none; pointer-events: auto; }
.dropdown .who { padding: 10px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.dropdown .who b { display: block; font-size: 15px; }
.dropdown .who span { font-size: 12.5px; color: var(--text-3); }
.dropdown a, .dropdown button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; font-size: 14.5px; font-weight: 600; color: var(--text-2); text-align: left; }
.dropdown a:hover, .dropdown button:hover { background: var(--paper); color: var(--ink); }

/* 모바일 메뉴 (서랍) */
.drawer { position: fixed; inset: 0; z-index: 90; pointer-events: none; overflow: hidden; }
.drawer-dim { position: absolute; inset: 0; background: rgba(11, 14, 23, .45); opacity: 0; transition: opacity .25s; }
.drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(86vw, 360px); background: var(--paper); transform: translateX(100%); transition: transform .3s var(--ease); display: flex; flex-direction: column; overflow-y: auto; }
.drawer.is-open { pointer-events: auto; }
.drawer.is-open .drawer-dim { opacity: 1; }
.drawer.is-open .drawer-panel { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 12px 0 20px; border-bottom: 1px solid var(--line); }
.drawer-user { margin: 16px 20px 8px; padding: 18px; border-radius: 18px; background: var(--ink); color: #fff; }
.drawer-user p { font-size: 13.5px; color: rgba(255, 255, 255, .7); margin-bottom: 12px; }
.drawer-user .who { display: flex; align-items: center; gap: 10px; font-weight: 700; margin-bottom: 14px; }
.drawer-nav { padding: 8px 12px; }
.drawer-nav a { display: flex; align-items: center; justify-content: space-between; padding: 15px 12px; border-radius: 12px; font-size: 17px; font-weight: 700; }
.drawer-nav a:hover { background: #fff; }
.drawer-nav a svg { width: 18px; height: 18px; color: var(--text-3); }
.drawer-foot { margin-top: auto; padding: 18px 24px 28px; font-size: 13px; color: var(--text-3); border-top: 1px solid var(--line); }
.drawer-foot a { display: inline-block; margin-right: 14px; margin-bottom: 6px; font-weight: 600; color: var(--text-2); }

/* 검색 오버레이 (모바일) */
.search-sheet { position: fixed; inset: 0; z-index: 95; background: var(--paper); padding: 14px 16px; display: none; }
.search-sheet.is-open { display: block; }
.search-sheet form { display: flex; gap: 8px; align-items: center; }
.search-sheet input { flex: 1; height: 48px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line-2); background: #fff; font-size: 16px; outline: none; }
.search-sheet .hint { margin-top: 22px; font-size: 13px; color: var(--text-3); font-weight: 600; }
.search-sheet .chips { margin-top: 10px; }

/* ---------- 섹션 공통 ---------- */
.section { padding: 76px 0; }
.section-tight { padding: 48px 0; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 12.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--cobalt); }
.eyebrow i { font-style: normal; color: var(--text-3); font-weight: 700; }
.eyebrow::before { content: ''; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }
.sec-title { font-family: var(--display); font-weight: 800; font-size: 32px; line-height: 1.28; letter-spacing: -0.035em; color: var(--ink); }
.sec-desc { margin-top: 8px; font-size: 16px; color: var(--text-2); }

/* ---------- 히어로 슬라이더 ---------- */
.hero { padding-top: 20px; overflow-x: hidden; overflow-x: clip; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.grid-lines::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 75%); }
.grain::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .09; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: overlay; }


/* 라이브 티켓 (신청 완료 페이지) */
.ticket { position: relative; width: 340px; padding: 26px; border-radius: 24px; background: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04)); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); transform: rotate(2deg); }
.ticket::before, .ticket::after { content: ''; position: absolute; top: 58%; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); }
.ticket::before { left: -11px; } .ticket::after { right: -11px; }
.ticket-top { display: flex; justify-content: space-between; align-items: center; }
.ticket-date { margin-top: 18px; font-family: var(--display); font-size: 64px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
.ticket-date small { display: block; margin-top: 8px; font-family: var(--font); font-size: 15px; font-weight: 600; letter-spacing: 0; color: rgba(255, 255, 255, .72); }
.ticket-sep { margin: 22px -26px 18px; border-top: 1.5px dashed rgba(255, 255, 255, .22); }
.countdown { display: flex; gap: 8px; }
.countdown div { flex: 1; text-align: center; padding: 10px 0 8px; border-radius: 12px; background: rgba(0, 0, 0, .28); }
.countdown b { display: block; font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.countdown span { font-size: 11px; color: rgba(255, 255, 255, .6); font-weight: 600; }
.ticket-foot { margin-top: 16px; display: flex; justify-content: space-between; font-size: 14px; color: rgba(255, 255, 255, .75); }
.ticket-foot b { color: #fff; }



/* ---------- 바로가기 메뉴 ---------- */
.quick { margin-top: 20px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.quick a { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 8px 18px; border-radius: 20px; background: #fff; border: 1px solid var(--line); font-size: 14.5px; font-weight: 700; color: var(--text); transition: transform .2s var(--ease), box-shadow .2s, border-color .2s; }
.quick a:hover { transform: translateY(-3px); box-shadow: var(--shadow-1); border-color: var(--line-2); }
.quick .qi { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--cobalt-50); color: var(--cobalt); position: relative; }
.quick .qi svg { width: 26px; height: 26px; }
.quick .qi .new { position: absolute; top: -4px; right: -6px; padding: 2px 6px; border-radius: 999px; background: var(--coral); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .02em; }
.quick a:nth-child(2) .qi { background: var(--ink); color: #fff; }

/* ---------- 강의 카드 ---------- */
.row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.row-4 { grid-template-columns: repeat(4, 1fr); gap: 20px; }
.cc { position: relative; display: flex; flex-direction: column; border-radius: 20px; background: var(--card); border: 1px solid var(--line); overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s, border-color .25s; }
.cc:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--line-2); }
.cc:hover .thumb-inner { transform: scale(1.035); }
.cc-body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 20px; flex: 1; }
.cc-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-3); font-weight: 600; }
.cc-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--line-2); }
.cc-title { font-size: 17.5px; font-weight: 700; line-height: 1.45; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cc-sub { font-size: 14px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.cc-foot { margin-top: auto; padding-top: 12px; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.cc-teacher { font-size: 13.5px; color: var(--text-3); font-weight: 600; }
.price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.price .pct { color: var(--coral); font-weight: 800; font-size: 17px; }
.price .now { color: var(--ink); font-weight: 800; font-size: 18px; letter-spacing: -0.02em; }
.price .list { color: var(--text-3); font-size: 13px; text-decoration: line-through; }
.price .free { color: var(--cobalt); font-weight: 800; font-size: 18px; }
.price .monthly { width: 100%; text-align: right; font-size: 12.5px; color: var(--text-3); font-weight: 600; }
.cc-flag { position: absolute; top: 12px; left: 12px; z-index: 2; display: flex; gap: 6px; }
.cc.is-soon { opacity: .9; }
.cc.is-soon .thumb-inner { filter: saturate(.3); }

/* ---------- 썸네일 (이미지 없이 글자로 만드는 배너) ---------- */
.thumb { position: relative; aspect-ratio: 16 / 10; overflow: hidden; container-type: inline-size; background: var(--ink); }
.thumb-inner { position: absolute; inset: 0; transition: transform .6s var(--ease); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.th { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 7cqi 7.5cqi; color: #fff; }
.th-brand { display: flex; align-items: center; gap: 1.6cqi; font-size: 2.7cqi; font-weight: 800; letter-spacing: .12em; opacity: .75; text-transform: uppercase; }
.th-brand svg { width: 4.4cqi; height: 4.4cqi; }
.th-kicker { margin-top: auto; font-size: 4.1cqi; font-weight: 700; opacity: .85; }
.th-title { margin-top: 1.4cqi; font-family: var(--display); font-weight: 800; font-size: 8.2cqi; line-height: 1.16; letter-spacing: -0.04em; }
.th-title em { font-style: normal; color: var(--th-hl, var(--cobalt-300)); }
.th-date { align-self: flex-start; margin-top: 3.4cqi; padding: 1.3cqi 2.6cqi; border-radius: 1.6cqi; background: #fff; color: var(--ink); font-size: 3.7cqi; font-weight: 800; }
.th-date b { color: var(--th-date, var(--cobalt)); }
.th-art { position: absolute; right: -4cqi; top: -4cqi; width: 50cqi; height: 50cqi; opacity: .9; pointer-events: none; }
.th-big { position: absolute; right: 5cqi; top: 4.5cqi; font-family: var(--display); font-weight: 800; font-size: 20cqi; line-height: 1; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: .35cqi rgba(255, 255, 255, .35); }
.th--ink { background: radial-gradient(70cqi 60cqi at 100% 0%, rgba(36, 72, 255, .7), transparent 70%), radial-gradient(60cqi 50cqi at 0% 100%, rgba(255, 85, 51, .22), transparent 70%), var(--ink); }
.th--cobalt { background: radial-gradient(70cqi 60cqi at 100% 0%, rgba(255, 255, 255, .28), transparent 60%), linear-gradient(135deg, #2A4DFF, #0F22A8); --th-hl: #FFE45C; --th-date: #1733D6; }
.th--coral { background: radial-gradient(70cqi 60cqi at 100% 0%, rgba(255, 255, 255, .3), transparent 60%), linear-gradient(135deg, #FF6A4A, #E0391A); --th-hl: var(--ink); --th-date: var(--coral); }
.th--paper { background: radial-gradient(70cqi 60cqi at 100% 0%, rgba(36, 72, 255, .16), transparent 65%), #EFEBE2; color: var(--ink); --th-hl: var(--cobalt); }
.th--paper .th-date { background: var(--ink); color: #fff; }
.th--paper .th-date b { color: #FFE45C; }
.th--paper .th-big { -webkit-text-stroke-color: rgba(11, 14, 23, .14); }
.th--deep { background: radial-gradient(70cqi 60cqi at 100% 100%, rgba(255, 85, 51, .45), transparent 65%), radial-gradient(60cqi 50cqi at 0% 0%, rgba(36, 72, 255, .45), transparent 70%), #0A0C14; --th-hl: #FF8A70; }
.th-grid::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 8cqi 8cqi; mask-image: linear-gradient(120deg, transparent 30%, #000 100%); -webkit-mask-image: linear-gradient(120deg, transparent 30%, #000 100%); }
.th--paper.th-grid::before { background-image: linear-gradient(rgba(11, 14, 23, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 14, 23, .06) 1px, transparent 1px); }

/* ---------- 가로 스크롤 줄 (모바일) ---------- */
.scroller { display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); padding: 4px var(--gutter) 18px; margin: 0 calc(var(--gutter) * -1); scrollbar-width: none; }
.scroller::-webkit-scrollbar { display: none; }
.scroller > * { scroll-snap-align: start; }

/* ---------- 칩 필터 ---------- */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { height: 38px; padding: 0 16px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 14.5px; font-weight: 600; color: var(--text-2); white-space: nowrap; transition: all .15s; }
.chip:hover { border-color: var(--line-2); color: var(--ink); }
.chip.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.chips-scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 2px var(--gutter); }
.chips-scroll::-webkit-scrollbar { display: none; }

/* ---------- 왜 밸류업 (어두운 띠) ---------- */
.why { position: relative; background: var(--ink); color: #fff; overflow: hidden; }
.why .container { position: relative; z-index: 1; display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: start; }
.why .eyebrow { color: var(--cobalt-300); }
.why .sec-title { color: #fff; font-size: 40px; }
.why .sec-desc { color: rgba(255, 255, 255, .66); margin-top: 16px; font-size: 17px; }
.why-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .1); border-radius: 24px; overflow: hidden; }
.why-item { background: var(--ink); padding: 30px 28px 32px; transition: background .25s; }
.why-item:hover { background: #121728; }
.why-num { font-family: var(--display); font-weight: 800; font-size: 44px; line-height: 1; color: transparent; -webkit-text-stroke: 1.2px rgba(143, 161, 255, .8); letter-spacing: -0.03em; }
.why-item h3 { margin-top: 18px; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.why-item p { margin-top: 8px; font-size: 15px; color: rgba(255, 255, 255, .62); line-height: 1.65; }
.why-cta { margin-top: 32px; display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- 강사 ---------- */
.tc { position: relative; border-radius: 20px; overflow: hidden; background: #fff; border: 1px solid var(--line); transition: transform .25s var(--ease), box-shadow .25s; }
.tc:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.tc-photo { position: relative; aspect-ratio: 4 / 5; background: var(--paper-2); overflow: hidden; container-type: inline-size; }
.tc-photo img { width: 100%; height: 100%; object-fit: cover; }
.mono { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(80cqi 70cqi at 80% 10%, rgba(36, 72, 255, .75), transparent 70%), var(--ink); color: #fff; }
.mono b { font-family: var(--display); font-weight: 800; font-size: 38cqi; line-height: 1; letter-spacing: -0.06em; }
.mono small { position: absolute; left: 7cqi; bottom: 7cqi; font-size: 4.6cqi; font-weight: 800; letter-spacing: .16em; opacity: .7; }
.mono::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 10cqi 10cqi; }
.tc-soon .tc-photo { display: grid; place-items: center; background: repeating-linear-gradient(-45deg, var(--paper), var(--paper) 10px, var(--paper-2) 10px, var(--paper-2) 20px); }
.tc-soon .tc-photo span { font-family: var(--display); font-weight: 800; font-size: 20px; color: var(--text-3); letter-spacing: .02em; }
.tc-body { padding: 16px 18px 20px; }
.tc-role { font-size: 13px; font-weight: 700; color: var(--cobalt); }
.tc-name { margin-top: 4px; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.tc-name small { margin-left: 6px; font-size: 13px; font-weight: 600; color: var(--text-3); }
.tc-tags { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.tc-tags span { font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 8px; background: var(--paper); color: var(--text-2); }
.tc-apply { display: flex; flex-direction: column; justify-content: space-between; padding: 26px; border-radius: 20px; background: var(--cobalt); color: #fff; min-height: 100%; transition: transform .25s var(--ease), box-shadow .25s; }
.tc-apply:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -24px rgba(36, 72, 255, .8); }
.tc-apply h3 { font-family: var(--display); font-weight: 800; font-size: 26px; line-height: 1.3; letter-spacing: -0.03em; }
.tc-apply p { margin-top: 10px; color: rgba(255, 255, 255, .78); font-size: 15px; }
.tc-apply .go { margin-top: 24px; display: inline-flex; align-items: center; gap: 8px; font-weight: 800; }

/* 강사 상세 (강사진 페이지) */
.tfeature { display: grid; grid-template-columns: 380px 1fr; gap: 48px; align-items: center; padding: 36px; border-radius: 28px; background: #fff; border: 1px solid var(--line); }
.tfeature .tc-photo { border-radius: 20px; }
.tfeature h2 { font-family: var(--display); font-weight: 800; font-size: 36px; letter-spacing: -0.03em; }
.tfeature h2 small { font-family: var(--font); font-size: 16px; font-weight: 600; color: var(--text-3); margin-left: 10px; letter-spacing: 0; }
.tfeature .lead { margin-top: 6px; font-size: 17px; font-weight: 700; color: var(--cobalt); }
.bullets { margin-top: 20px; display: grid; gap: 10px; }
.bullets li { position: relative; padding-left: 28px; color: var(--text-2); font-size: 16px; }
.bullets li::before { content: ''; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 6px; background: var(--cobalt-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232448FF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }

/* ---------- 후기 ---------- */
.marquee { position: relative; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee-track { display: flex; gap: 16px; width: max-content; animation: marquee var(--dur, 60s) linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee.rev .marquee-track { animation-direction: reverse; }
@keyframes marquee { to { transform: translateX(-50%); } }
.rc { position: relative; width: 340px; flex: none; padding: 22px 22px 20px; border-radius: 20px; background: #fff; border: 1px solid var(--line); }
.rc-stars { display: flex; gap: 2px; color: var(--star); }
.rc-stars svg { width: 16px; height: 16px; }
.rc-text { margin-top: 12px; font-size: 15px; line-height: 1.7; color: var(--text); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; min-height: 102px; }
.rc-who { margin-top: 16px; display: flex; align-items: center; gap: 10px; }
.rc-who .avatar { width: 36px; height: 36px; font-size: 14px; background: var(--paper-2); color: var(--text-2); }
.rc-who b { font-size: 14.5px; display: block; line-height: 1.3; }
.rc-who span { font-size: 12.5px; color: var(--text-3); }
.rc .badge-sample { position: absolute; top: 18px; right: 18px; }
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.review-grid .rc { width: auto; }
.review-grid .rc-text { -webkit-line-clamp: unset; min-height: 0; }

/* ---------- 브랜드 흐르는 띠 ---------- */
.brandband { position: relative; background: var(--ink); color: #fff; padding: 72px 0 64px; overflow: hidden; }
.brandband .lead { position: relative; z-index: 1; text-align: center; font-size: 18px; color: rgba(255, 255, 255, .7); }
.brandband .lead b { color: #fff; font-weight: 700; }
.bigtype { position: relative; z-index: 1; margin-top: 26px; display: flex; width: max-content; animation: marquee 38s linear infinite; }
.bigtype span { display: inline-flex; align-items: center; gap: 36px; padding-right: 36px; font-family: var(--display); font-weight: 800; font-size: 118px; line-height: 1; letter-spacing: -0.04em; white-space: nowrap; }
.bigtype .o { color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, .5); }
.bigtype svg { width: 84px; height: 84px; color: var(--cobalt); flex: none; }
.brandband .cta { position: relative; z-index: 1; margin-top: 36px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }

/* ---------- FAQ ---------- */
.faq { max-width: 880px; margin: 0 auto; border-top: 1px solid var(--line-2); }
.faq-item { border-bottom: 1px solid var(--line-2); }
.faq-q { display: flex; width: 100%; align-items: center; gap: 14px; padding: 22px 4px; text-align: left; font-size: 17px; font-weight: 700; color: var(--ink); }
.faq-q .q { font-family: var(--display); font-weight: 800; color: var(--cobalt); font-size: 18px; }
.faq-q .pm { margin-left: auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); flex: none; transition: transform .25s var(--ease), background .2s; }
.faq-q .pm svg { width: 14px; height: 14px; }
.faq-item.is-open .pm { transform: rotate(45deg); background: var(--ink); color: #fff; border-color: var(--ink); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); }
.faq-a > div { overflow: hidden; }
.faq-a p { padding: 0 48px 24px 36px; color: var(--text-2); font-size: 15.5px; line-height: 1.75; white-space: pre-line; }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }

/* ---------- 푸터 ---------- */
.footer { background: var(--ink); color: rgba(255, 255, 255, .62); font-size: 14px; }
.footer-cs { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.footer-cs .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 36px; padding-bottom: 36px; }
.footer-cs h3 { font-family: var(--display); font-weight: 800; font-size: 24px; color: #fff; letter-spacing: -0.03em; }
.footer-cs p { margin-top: 6px; font-size: 14.5px; }
.footer-cs .btns { display: flex; gap: 10px; flex-wrap: wrap; }
.footer-main { padding: 48px 0 44px; text-align: center; }
.footer-logo { display: inline-flex; align-items: center; gap: 12px; }
.footer-logo .logo-mark { width: 44px; height: 44px; }
.footer-logo .logo-word { font-size: 30px; color: #fff; }
.footer-logo .logo-word em { color: var(--cobalt-300); }
.footer-info { margin-top: 26px; display: grid; gap: 6px; line-height: 1.7; }
.footer-info p { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 0; row-gap: 2px; }
.footer-info p > span { padding: 0 14px; position: relative; }
.footer-info p > span + span::before { content: ''; position: absolute; left: 0; top: 50%; width: 1px; height: 12px; margin-top: -6px; background: rgba(255, 255, 255, .22); }
.footer-info a { color: rgba(255, 255, 255, .82); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .25); }
.footer-info .todo { color: #FF8A70; }
.footer-links { margin-top: 22px; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px; font-weight: 700; color: rgba(255, 255, 255, .86); }
.footer-links a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer-links .strong { color: #fff; }
.footer-copy { margin-top: 28px; font-size: 13px; color: rgba(255, 255, 255, .42); }

/* ---------- 떠 있는 버튼 ---------- */
.fab { position: fixed; right: 20px; bottom: 24px; z-index: 40; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.fab a, .fab button { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 12px 28px -10px rgba(11, 14, 23, .45); transition: transform .2s var(--ease), opacity .2s; }
.fab a:hover, .fab button:hover { transform: translateY(-2px); }
.fab .fab-kakao { background: var(--kakao); color: var(--kakao-text); }
.fab .fab-kakao svg { width: 28px; height: 28px; }
.fab .fab-top { width: 46px; height: 46px; background: #fff; color: var(--ink); border: 1px solid var(--line); opacity: 0; pointer-events: none; }
.fab .fab-top.is-show { opacity: 1; pointer-events: auto; }
.fab .fab-top svg { width: 20px; height: 20px; }
body.has-cta-bar .fab { bottom: 96px; }

/* ---------- 폼 ---------- */
.field { display: grid; gap: 8px; }
.field + .field { margin-top: 18px; }
.field > label, .field-label { font-size: 14.5px; font-weight: 700; color: var(--text); }
.field > label .req { color: var(--coral); margin-right: 2px; }
.input { position: relative; }
.input input, .input select, .input textarea { width: 100%; height: 52px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line-2); background: #fff; font-size: 16px; outline: none; transition: border-color .2s, box-shadow .2s; }
.input textarea { height: auto; min-height: 120px; padding: 14px 16px; resize: vertical; line-height: 1.6; }
.input input::placeholder, .input textarea::placeholder { color: #A9ADB8; }
.input input:focus, .input select:focus, .input textarea:focus { border-color: var(--cobalt); box-shadow: 0 0 0 4px var(--cobalt-50); }
.input.is-error input { border-color: var(--coral); box-shadow: 0 0 0 4px var(--coral-50); }
.input .eye { position: absolute; right: 8px; top: 8px; width: 36px; height: 36px; display: grid; place-items: center; color: var(--text-3); border-radius: 8px; }
.input .eye:hover { color: var(--ink); }
.input .eye svg { width: 20px; height: 20px; }
.help { font-size: 13px; color: var(--text-3); }
.err { font-size: 13px; color: var(--coral); font-weight: 600; }
.form-error { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--coral-50); color: #C8321A; font-size: 14px; font-weight: 600; }
.form-ok { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--cobalt-50); color: var(--cobalt-700); font-size: 14px; font-weight: 600; }

.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 15px; line-height: 1.5; user-select: none; }
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check .ck { width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--line-2); background: #fff; display: grid; place-items: center; flex: none; margin-top: 0; transition: all .15s; }
.check .ck svg { width: 13px; height: 13px; color: #fff; opacity: 0; }
.check input:checked + .ck { background: var(--cobalt); border-color: var(--cobalt); }
.check input:checked + .ck svg { opacity: 1; }
.check input:focus-visible + .ck { outline: 2.5px solid var(--cobalt); outline-offset: 2px; }
.check .opt { color: var(--text-3); font-weight: 600; }
.check .req-t { color: var(--cobalt); font-weight: 700; }
.agree { border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden; }
.agree-all { padding: 16px; background: var(--paper); font-weight: 800; }
.agree-list { padding: 14px 16px; display: grid; gap: 12px; }
.agree-list .check { font-size: 14.5px; }
.agree-list .view { margin-left: auto; font-size: 13px; color: var(--text-3); text-decoration: underline; text-underline-offset: 3px; flex: none; }

/* ---------- 로그인 ---------- */
.auth-page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; background: var(--paper); padding: 40px 20px 60px; }
.auth-logo { margin: 8px 0 28px; }
.auth-card { width: 100%; max-width: 480px; padding: 34px 40px 40px; border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.auth-back { width: 40px; height: 40px; margin: -6px 0 0 -10px; display: grid; place-items: center; border-radius: 10px; color: var(--ink); }
.auth-back:hover { background: var(--paper); }
.auth-back svg { width: 24px; height: 24px; }
.auth-title { margin-top: 42px; font-size: 26px; font-weight: 800; line-height: 1.45; letter-spacing: -0.03em; color: #000; }
.auth-title.sm { margin-top: 28px; font-size: 22px; }
.auth-desc { margin-top: 10px; font-size: 15px; color: var(--text-2); }
.auth-gap { height: 72px; }
.auth-actions { display: grid; gap: 14px; }
.btn-kakao-lg { height: 64px; border-radius: 12px; font-size: 18px; font-weight: 800; gap: 12px; }
.kakao-ico { width: 38px; height: 38px; border-radius: 50%; background: #FFE812; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04); }
.kakao-ico svg { width: 30px; height: 30px; }
.btn-other { height: 64px; border-radius: 12px; font-size: 17px; font-weight: 600; color: #333; background: #fff; border: 1px solid #D9D9D9; }
.btn-other:hover { border-color: #999; }
.auth-note { margin-top: 22px; text-align: center; font-size: 13.5px; color: var(--text-3); line-height: 1.6; }
.auth-note a { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
.auth-links { margin: 26px 0 30px; display: flex; justify-content: center; gap: 30px; font-size: 15px; }
.auth-links button:hover { color: var(--cobalt); }
.auth-switch { margin-top: 20px; text-align: center; font-size: 14.5px; color: var(--text-3); }
.auth-switch button { color: var(--cobalt); font-weight: 700; margin-left: 4px; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0; font-size: 13px; color: var(--text-3); }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.found { margin-top: 20px; padding: 18px; border-radius: 14px; background: var(--paper); display: grid; gap: 8px; }
.found b { font-size: 17px; }
.demo-bar { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 200; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 10px 14px 10px 12px; border-radius: 999px; background: rgba(11, 14, 23, .9); color: #fff; font-size: 12.5px; box-shadow: var(--shadow-2); backdrop-filter: blur(8px); }
.demo-bar b { color: #FFD34D; }
.demo-bar button { color: rgba(255, 255, 255, .6); padding: 0 4px; }
.setup-bar { background: #FFF4E5; color: #8A4B00; font-size: 13px; border-bottom: 1px solid #F5D9AE; }
.setup-bar .container { padding-top: 9px; padding-bottom: 9px; }
.setup-bar b { color: #6A3900; }

/* ---------- 모달 ---------- */
.modal { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal-dim { position: absolute; inset: 0; background: rgba(11, 14, 23, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: fade .2s both; }
.modal-box { position: relative; width: 100%; max-width: 460px; max-height: calc(100vh - 40px); overflow-y: auto; border-radius: 24px; background: #fff; padding: 30px 32px 32px; box-shadow: var(--shadow-3); animation: pop .28s var(--ease) both; }
.modal-close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; color: var(--text-2); z-index: 2; }
.modal-close:hover { background: var(--paper); color: var(--ink); }
.modal-close svg { width: 22px; height: 22px; }
.modal .auth-card { border: 0; box-shadow: none; padding: 0; max-width: none; }
.modal .auth-title { margin-top: 26px; }
.modal .auth-gap { height: 36px; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.98); } }

/* 카카오 동의 화면 (미리보기 전용) */
.ksim { border-radius: 18px; overflow: hidden; border: 1px solid var(--line); }
.ksim-head { background: var(--kakao); padding: 16px 18px; font-weight: 800; color: var(--kakao-text); display: flex; align-items: center; gap: 10px; }
.ksim-head small { margin-left: auto; font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: rgba(0, 0, 0, .08); }
.ksim-body { padding: 18px; }
.ksim-body p { font-size: 14.5px; color: var(--text-2); margin-bottom: 14px; }

/* ---------- 토스트 ---------- */
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 300; transform: translate(-50%, 20px); max-width: calc(100vw - 32px); padding: 14px 20px; border-radius: 14px; background: var(--ink); color: #fff; font-size: 15px; font-weight: 600; box-shadow: var(--shadow-2); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s var(--ease); }
.toast.is-show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 페이지 머리 ---------- */
.page-head { padding: 52px 0 28px; }
.page-head h1 { font-family: var(--display); font-weight: 800; font-size: 40px; letter-spacing: -0.04em; line-height: 1.2; color: var(--ink); }
.page-head p { margin-top: 10px; font-size: 17px; color: var(--text-2); }
.crumb { display: flex; gap: 6px; align-items: center; font-size: 13.5px; color: var(--text-3); font-weight: 600; margin-bottom: 14px; }
.crumb a:hover { color: var(--ink); }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.tabs { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--paper-2); }
.tabs button { height: 40px; padding: 0 16px; border-radius: 10px; font-size: 15px; font-weight: 700; color: var(--text-2); white-space: nowrap; }
.tabs button.is-on { background: #fff; color: var(--ink); box-shadow: var(--shadow-1); }
.select { height: 40px; padding: 0 36px 0 14px; border-radius: 10px; border: 1px solid var(--line); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5060' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 10px center / 16px no-repeat; font-size: 14.5px; font-weight: 600; appearance: none; -webkit-appearance: none; }
.empty { padding: 72px 20px; text-align: center; border-radius: 24px; border: 1.5px dashed var(--line-2); color: var(--text-3); }
.empty b { display: block; font-size: 18px; color: var(--text); margin-bottom: 6px; }
.empty .btn { margin-top: 20px; }
.result-count { font-size: 14.5px; color: var(--text-3); font-weight: 600; }
.result-count b { color: var(--ink); }

/* ---------- 강의 상세 ---------- */
.detail { padding-top: 28px; padding-bottom: 80px; }
.detail-top { display: grid; grid-template-columns: 1fr 400px; gap: 40px; align-items: start; }
.detail-thumb { border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-2); }
.buybox { position: sticky; top: calc(var(--header-h) + 20px); padding: 28px; border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.buybox .badges { display: flex; gap: 6px; flex-wrap: wrap; }
.buybox h1 { margin-top: 14px; font-size: 25px; line-height: 1.38; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }
.buybox .sub { margin-top: 8px; font-size: 15.5px; color: var(--text-2); }
.facts { margin: 22px 0; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; gap: 12px; }
.facts div { display: flex; gap: 12px; font-size: 14.5px; }
.facts dt { width: 64px; flex: none; color: var(--text-3); font-weight: 600; }
.facts dd { margin: 0; color: var(--text); font-weight: 600; }
.buybox .price { justify-content: flex-start; }
.buybox .price .now, .buybox .price .free { font-size: 28px; }
.buybox .price .pct { font-size: 22px; }
.buybox .price .monthly { text-align: left; font-size: 13.5px; }
.buybox .cta { margin-top: 20px; display: grid; gap: 10px; }
.buybox .mini { margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; color: var(--text-3); }
.buybox .mini svg { width: 14px; height: 14px; }
.live-box { margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.live-box .cd { font-weight: 800; font-variant-numeric: tabular-nums; font-size: 15px; color: #FFD34D; }
.dtabs { position: sticky; top: var(--header-h); z-index: 30; margin-top: 48px; background: rgba(245, 243, 238, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-2); }
.dtabs .inner { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.dtabs .inner::-webkit-scrollbar { display: none; }
.dtabs a { position: relative; padding: 16px 14px; font-weight: 700; font-size: 15.5px; color: var(--text-3); white-space: nowrap; }
.dtabs a.is-on { color: var(--ink); }
.dtabs a.is-on::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2.5px; background: var(--ink); border-radius: 2px; }
.dsec { padding-top: 56px; scroll-margin-top: calc(var(--header-h) + 60px); }
.dsec > h2 { font-family: var(--display); font-weight: 800; font-size: 26px; letter-spacing: -0.03em; color: var(--ink); margin-bottom: 20px; }
.dbody { max-width: 800px; }
.pitch { padding: 36px; border-radius: 24px; background: var(--ink); color: #fff; position: relative; overflow: hidden; }
.pitch h3 { position: relative; z-index: 1; font-family: var(--display); font-weight: 800; font-size: 30px; line-height: 1.32; letter-spacing: -0.035em; }
.pitch h3 em { font-style: normal; color: var(--cobalt-300); }
.pitch p { position: relative; z-index: 1; margin-top: 14px; color: rgba(255, 255, 255, .7); font-size: 16.5px; }
.cards2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.box { padding: 22px; border-radius: 20px; background: #fff; border: 1px solid var(--line); }
.box h4 { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }
.box p { margin-top: 6px; font-size: 15px; color: var(--text-2); }
.box .n { font-family: var(--display); font-weight: 800; color: var(--cobalt); font-size: 15px; margin-bottom: 8px; }
.gift { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.gift .box { text-align: center; padding: 26px 18px; }
.gift .gi { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 16px; display: grid; place-items: center; background: var(--cobalt-50); color: var(--cobalt); }
.gift .gi svg { width: 28px; height: 28px; }
.gift small { display: inline-block; margin-top: 10px; font-size: 12.5px; font-weight: 800; color: var(--coral); }
.target { display: grid; gap: 10px; }
.target li { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 16px; background: #fff; border: 1px solid var(--line); font-size: 16px; font-weight: 600; }
.target li svg { width: 22px; height: 22px; color: var(--cobalt); flex: none; margin-top: 1px; }
.curri { border-radius: 20px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.curri-ch + .curri-ch { border-top: 1px solid var(--line); }
.curri-h { display: flex; align-items: center; gap: 14px; width: 100%; padding: 20px 22px; text-align: left; }
.curri-h .no { font-family: var(--display); font-weight: 800; color: var(--cobalt); font-size: 15px; width: 36px; flex: none; }
.curri-h b { font-size: 16.5px; font-weight: 800; }
.curri-h .cnt { margin-left: auto; font-size: 13.5px; color: var(--text-3); font-weight: 600; white-space: nowrap; }
.curri-h .chev { width: 18px; height: 18px; color: var(--text-3); transition: transform .25s; flex: none; }
.curri-ch.is-open .chev { transform: rotate(180deg); }
.curri-list { display: none; padding: 0 22px 16px 72px; }
.curri-ch.is-open .curri-list { display: block; }
.curri-list li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: 15px; color: var(--text-2); border-top: 1px dashed var(--line); }
.curri-list li span:last-child { color: var(--text-3); font-size: 13.5px; white-space: nowrap; }
.cta-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: none; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96); border-top: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.cta-bar .inner { display: flex; align-items: center; gap: 12px; }
.cta-bar .info { min-width: 0; }
.cta-bar .info b { display: block; font-size: 16px; font-weight: 800; color: var(--ink); }
.cta-bar .info span { font-size: 12.5px; color: var(--coral); font-weight: 700; font-variant-numeric: tabular-nums; }
.cta-bar .btn { margin-left: auto; flex: 1; max-width: 240px; }

/* ---------- 내 강의실 ---------- */
.my { display: grid; grid-template-columns: 280px 1fr; gap: 32px; padding-top: 36px; padding-bottom: 80px; align-items: start; }
.my-side { position: sticky; top: calc(var(--header-h) + 20px); padding: 24px; border-radius: 24px; background: var(--ink); color: #fff; }
.my-side .avatar { width: 56px; height: 56px; font-size: 22px; }
.my-side h2 { margin-top: 14px; font-size: 21px; font-weight: 800; }
.my-side .em { font-size: 13.5px; color: rgba(255, 255, 255, .6); word-break: break-all; }
.my-side .prov { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .1); }
.my-nav { margin-top: 20px; display: grid; gap: 4px; }
.my-nav button { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 12px; font-size: 15px; font-weight: 700; color: rgba(255, 255, 255, .72); text-align: left; }
.my-nav button:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.my-nav button.is-on { background: #fff; color: var(--ink); }
.my-nav .cnt { font-size: 12.5px; padding: 2px 8px; border-radius: 999px; background: var(--cobalt); color: #fff; }
.my-panel h2 { font-family: var(--display); font-weight: 800; font-size: 26px; letter-spacing: -0.03em; margin-bottom: 18px; }
.apl { display: grid; grid-template-columns: 200px 1fr auto; gap: 20px; align-items: center; padding: 18px; border-radius: 20px; background: #fff; border: 1px solid var(--line); }
.apl + .apl { margin-top: 14px; }
.apl .thumb { border-radius: 14px; }
.apl h3 { font-size: 17.5px; font-weight: 800; line-height: 1.4; }
.apl .when { margin-top: 6px; font-size: 14px; color: var(--text-2); font-weight: 600; }
.apl .when b { color: var(--coral); }
.apl .acts { display: grid; gap: 8px; }
.card-form { padding: 28px; border-radius: 24px; background: #fff; border: 1px solid var(--line); max-width: 640px; }
.card-form + .card-form { margin-top: 18px; }
.card-form h3 { font-size: 18px; font-weight: 800; margin-bottom: 18px; }
.kv { display: grid; grid-template-columns: 120px 1fr; gap: 14px 16px; font-size: 15px; }
.kv dt { color: var(--text-3); font-weight: 600; }
.kv dd { margin: 0; font-weight: 600; }
.danger-link { font-size: 14px; color: var(--text-3); text-decoration: underline; text-underline-offset: 3px; }
.danger-link:hover { color: var(--coral); }

/* ---------- 신청 완료 ---------- */
.done { max-width: 600px; margin: 0 auto; padding-top: 56px; padding-bottom: 90px; text-align: center; }
.done-ico { width: 84px; height: 84px; margin: 0 auto; border-radius: 28px; display: grid; place-items: center; background: var(--cobalt); color: #fff; box-shadow: 0 20px 40px -18px rgba(36, 72, 255, .9); animation: pop .5s var(--ease) both; }
.done-ico svg { width: 42px; height: 42px; }
.done h1 { margin-top: 26px; font-family: var(--display); font-weight: 800; font-size: 34px; letter-spacing: -0.04em; line-height: 1.3; }
.done .lead { margin-top: 10px; font-size: 17px; color: var(--text-2); }
.done .ticket { margin: 34px auto 0; transform: none; background: var(--ink); text-align: left; width: 100%; max-width: 420px; }
.done .ticket::before, .done .ticket::after { background: var(--paper); }
.done .steps { margin-top: 28px; display: grid; gap: 10px; text-align: left; }
.done .steps li { display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 16px; background: #fff; border: 1px solid var(--line); font-weight: 600; font-size: 15px; }
.done .steps .no { width: 28px; height: 28px; border-radius: 50%; background: var(--cobalt-50); color: var(--cobalt); display: grid; place-items: center; font-weight: 800; font-size: 13.5px; flex: none; }
.done .btns { margin-top: 26px; display: grid; gap: 10px; }

/* ---------- 고객센터 / 약관 ---------- */
.cs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cs-card { padding: 26px; border-radius: 22px; background: #fff; border: 1px solid var(--line); }
.cs-card .ci { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--cobalt-50); color: var(--cobalt); margin-bottom: 16px; }
.cs-card .ci svg { width: 24px; height: 24px; }
.cs-card h3 { font-size: 18px; font-weight: 800; }
.cs-card p { margin-top: 6px; font-size: 15px; color: var(--text-2); }
.cs-card .btn { margin-top: 18px; }
.notice-list { border-top: 1px solid var(--line-2); }
.notice-list details { border-bottom: 1px solid var(--line-2); }
.notice-list summary { display: flex; gap: 16px; align-items: center; padding: 18px 4px; cursor: pointer; list-style: none; font-weight: 700; }
.notice-list summary::-webkit-details-marker { display: none; }
.notice-list summary time { margin-left: auto; font-size: 13.5px; color: var(--text-3); font-weight: 600; flex: none; }
.notice-list details p { padding: 0 4px 20px; color: var(--text-2); white-space: pre-line; font-size: 15px; }
.legal { max-width: 860px; padding: 8px 0 90px; }
.legal h2 { margin: 36px 0 12px; font-size: 19px; font-weight: 800; color: var(--ink); }
.legal p, .legal li { font-size: 15px; color: var(--text-2); line-height: 1.8; }
.legal ol, .legal ul { padding-left: 20px; list-style: decimal; margin: 8px 0; }
.legal ul { list-style: disc; }
.legal table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 14.5px; background: #fff; }
.legal th, .legal td { border: 1px solid var(--line-2); padding: 10px 12px; text-align: left; vertical-align: top; }
.legal th { background: var(--paper-2); font-weight: 700; }
.legal .note { padding: 14px 16px; border-radius: 12px; background: #FFF4E5; color: #8A4B00; font-size: 14px; }

/* ---------- 나타나기 효과 ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .marquee-track, .bigtype { animation: none !important; }
}

/* ==========================================================================
   반응형
   ========================================================================== */
@media (max-width: 1100px) {
  .search { width: 200px; }
  .nav a { padding: 8px 9px; font-size: 15px; }
  .header-inner { gap: 18px; }
  .row-4 { grid-template-columns: repeat(2, 1fr); }
  .why .container { grid-template-columns: 1fr; gap: 36px; }
  .detail-top { grid-template-columns: 1fr 360px; gap: 28px; }
}
@media (max-width: 900px) {
  .nav, .search, .d-only { display: none !important; }
  .m-only { display: grid !important; }
  :root { --header-h: 58px; }
  .logo-mark { width: 28px; height: 28px; }
  .logo-word { font-size: 18px; }
  .header-inner { gap: 6px; }
  .header-actions { gap: 2px; margin-right: -8px; }
  .row { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .detail-top { grid-template-columns: 1fr; }
  .buybox { position: static; }
  .cta-bar { display: block; }
  .my { grid-template-columns: 1fr; gap: 20px; padding-top: 20px; }
  .my-side { position: static; }
  .tfeature { grid-template-columns: 1fr; padding: 24px; gap: 24px; }
  .tfeature .tc-photo { max-width: 360px; }
  .cs-grid { grid-template-columns: 1fr; }
  .review-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  body { font-size: 15.5px; }
  .section { padding: 52px 0; }
  .sec-head { margin-bottom: 18px; align-items: flex-end; }
  .sec-title { font-size: 24px; }
  .sec-desc { font-size: 15px; }
  .eyebrow { font-size: 11.5px; margin-bottom: 8px; }

  .hero { padding-top: 12px; }
  .ticket { width: 290px; padding: 20px; transform: rotate(-2deg) scale(.92); }
  .ticket-date { font-size: 48px; margin-top: 12px; }
  .ticket-sep { margin: 16px -20px 14px; }
  .countdown b { font-size: 20px; }

  .quick { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
  .quick a { padding: 16px 4px 14px; border-radius: 18px; font-size: 13.5px; gap: 8px; }
  .quick .qi { width: 46px; height: 46px; border-radius: 14px; }
  .quick .qi svg { width: 23px; height: 23px; }

  .row, .row-4 { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 82%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); padding: 4px var(--gutter) 18px; margin: 0 calc(var(--gutter) * -1); scrollbar-width: none; }
  .row::-webkit-scrollbar, .row-4::-webkit-scrollbar { display: none; }
  .row > *, .row-4 > * { scroll-snap-align: start; }
  .row-4 { grid-auto-columns: 62%; }
  .row.as-grid { display: grid; grid-auto-flow: row; grid-template-columns: 1fr; overflow: visible; margin: 0; padding: 0; gap: 16px; }
  .cc-title { font-size: 16.5px; }

  .why .sec-title { font-size: 28px; }
  .why-list { grid-template-columns: 1fr; border-radius: 20px; }
  .why-item { padding: 24px 22px; }
  .why-num { font-size: 36px; }

  .rc { width: 290px; padding: 20px; }
  .review-grid { grid-template-columns: 1fr; }
  .brandband { padding: 52px 0 48px; }
  .brandband .lead { font-size: 15.5px; padding: 0 20px; }
  .bigtype span { font-size: 64px; gap: 20px; padding-right: 20px; }
  .bigtype svg { width: 48px; height: 48px; }

  .faq-q { font-size: 15.5px; padding: 18px 2px; gap: 10px; }
  .faq-a p { padding: 0 8px 20px 28px; font-size: 15px; }

  .footer-cs .container { flex-direction: column; align-items: flex-start; padding-top: 30px; padding-bottom: 30px; }
  .footer-cs h3 { font-size: 21px; }
  .footer-main { padding: 36px 0 110px; }
  .footer-logo .logo-mark { width: 36px; height: 36px; }
  .footer-logo .logo-word { font-size: 24px; }
  .footer-info { font-size: 13px; text-align: center; }
  .footer-info p > span { padding: 0 9px; }

  .auth-page { padding: 16px 0 40px; background: #fff; }
  .auth-logo { margin: 8px 0 8px; }
  .auth-card { border: 0; box-shadow: none; padding: 16px 24px 32px; border-radius: 0; }
  .auth-title { margin-top: 26px; font-size: 23px; }
  .auth-gap { height: 48px; }
  .btn-kakao-lg, .btn-other { height: 58px; font-size: 16.5px; }

  .modal { align-items: flex-end; padding: 0; }
  .modal-box { max-width: none; border-radius: 24px 24px 0 0; padding: 24px 22px calc(28px + env(safe-area-inset-bottom)); max-height: 92vh; animation: sheet .32s var(--ease) both; }
  @keyframes sheet { from { transform: translateY(100%); } }

  .page-head { padding: 32px 0 18px; }
  .page-head h1 { font-size: 30px; }
  .page-head p { font-size: 15.5px; }
  .toolbar { gap: 12px; }
  .tabs { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .tabs button { flex: 1; padding: 0 12px; font-size: 14px; }

  .detail { padding-top: 12px; }
  .detail-thumb { border-radius: 18px; }
  .buybox { padding: 22px 20px; border-radius: 20px; }
  .buybox h1 { font-size: 22px; }
  .buybox .cta { display: none; }
  .dsec > h2 { font-size: 22px; }
  .pitch { padding: 26px 22px; }
  .pitch h3 { font-size: 23px; }
  .cards2, .gift { grid-template-columns: 1fr; }
  .curri-list { padding-left: 22px; }

  .apl { grid-template-columns: 1fr; gap: 14px; }
  .apl .acts { grid-template-columns: 1fr 1fr; }
  .kv { grid-template-columns: 96px 1fr; }
  .card-form { padding: 22px 20px; }
  .done h1 { font-size: 27px; }
  .fab { right: 14px; bottom: 18px; }
  .fab a, .fab button { width: 50px; height: 50px; }
  .fab .fab-top { width: 42px; height: 42px; }
  body.has-cta-bar .fab { bottom: 92px; }
}
@media (max-width: 720px) { .topbar a { padding: 8px 44px 8px 14px; font-size: 12.5px; gap: 8px; } .topbar .dot { display: none; } }
@media (max-width: 380px) {
  .logo-word { font-size: 17px; }
}

/* ==========================================================================
   강사진 7인 구성용 추가 요소
   ========================================================================== */
/* 썸네일·모노그램 위 글자가 격자선 아래로 깔리지 않게 */
.th > * { position: relative; z-index: 1; }
.th > .th-big { position: absolute; z-index: 0; }
.mono > b { position: relative; z-index: 1; }
.mono > small { z-index: 1; }
.th--green { background: radial-gradient(70cqi 60cqi at 100% 0%, rgba(255, 255, 255, .24), transparent 60%), linear-gradient(135deg, #10B981, #047857); --th-hl: #FFF06A; --th-date: #047857; }

/* 모노그램 색 (강사별 tone) */
.mono--ink { background: radial-gradient(80cqi 70cqi at 80% 10%, rgba(36, 72, 255, .75), transparent 70%), var(--ink); }
.mono--cobalt { background: radial-gradient(80cqi 70cqi at 85% 5%, rgba(255, 255, 255, .28), transparent 60%), linear-gradient(150deg, #3556FF, #1229B8); }
.mono--coral { background: radial-gradient(80cqi 70cqi at 85% 5%, rgba(255, 255, 255, .3), transparent 60%), linear-gradient(150deg, #FF6A4A, #D9361A); }
.mono--green { background: radial-gradient(80cqi 70cqi at 85% 5%, rgba(255, 255, 255, .26), transparent 60%), linear-gradient(150deg, #13C08A, #047857); }
.mono--deep { background: radial-gradient(80cqi 70cqi at 90% 100%, rgba(255, 85, 51, .55), transparent 65%), radial-gradient(70cqi 60cqi at 0% 0%, rgba(36, 72, 255, .5), transparent 70%), #0A0C14; }
.mono--paper { background: radial-gradient(80cqi 70cqi at 85% 5%, rgba(36, 72, 255, .2), transparent 65%), #EAE5DA; color: var(--ink); }
.mono--paper::before { background-image: linear-gradient(rgba(11, 14, 23, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 14, 23, .06) 1px, transparent 1px); }
.tc-more { margin-top: 12px; display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 700; color: var(--text-2); }
.tc:hover .tc-more { color: var(--cobalt); }


/* 분야별 타일 */
.cats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.cat { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 20px 18px 18px; border-radius: 20px; background: #fff; border: 1px solid var(--line); transition: transform .2s var(--ease), box-shadow .2s, border-color .2s; min-width: 0; }
.cat:hover { transform: translateY(-3px); box-shadow: var(--shadow-1); border-color: var(--line-2); }
.cat-ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--cobalt-50); color: var(--cobalt); margin-bottom: 10px; }
.cat-ic svg { width: 23px; height: 23px; }
.cat:nth-child(2n) .cat-ic { background: var(--coral-50); color: var(--coral); }
.cat:nth-child(3n) .cat-ic { background: #E7F8F0; color: var(--green); }
.cat b { font-size: 16.5px; font-weight: 800; letter-spacing: -0.02em; }
.cat-sub { font-size: 12.5px; color: var(--text-3); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-n { position: absolute; top: 16px; right: 16px; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; display: grid; place-items: center; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 800; }

/* 강의 상세: 강사 한 줄 소개 · 사전 신청 흐름 */
.tline { display: grid; grid-template-columns: 132px 1fr; gap: 24px; align-items: center; padding: 20px; border-radius: 22px; background: #fff; border: 1px solid var(--line); }
.tline .tc-photo { aspect-ratio: 1; border-radius: 18px; }
.tline h3 { margin-top: 4px; font-family: var(--display); font-weight: 800; font-size: 26px; letter-spacing: -0.03em; }
.tline h3 small { font-family: var(--font); font-size: 15px; font-weight: 600; color: var(--text-3); letter-spacing: 0; }
.tline .link-more { display: inline-flex; }
.flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; counter-reset: none; }
.flow li { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 20px; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.flow li b { font-family: var(--display); font-weight: 800; font-size: 15px; color: var(--cobalt); }
.flow li span { font-size: 16px; font-weight: 800; }
.flow li small { font-size: 13.5px; color: var(--text-3); font-weight: 600; }
.flow li + li::before { content: ''; position: absolute; left: -12px; top: 50%; width: 12px; height: 2px; background: var(--line-2); }

@media (max-width: 1100px) {
  .cats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .cats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .cat { padding: 16px 14px 14px; border-radius: 18px; }
  .cat-ic { width: 40px; height: 40px; margin-bottom: 8px; }
  .cat b { font-size: 15.5px; }
  .cat-n { top: 12px; right: 12px; }
  .tline { grid-template-columns: 88px 1fr; gap: 16px; padding: 16px; }
  .tline h3 { font-size: 22px; }
  .flow { grid-template-columns: 1fr; }
  .flow li + li::before { display: none; }
}

/* ==========================================================================
   강사 카드 캐러셀 · 경력 목록 · 밝은 WHY
   ========================================================================== */
.tflow-sec { position: relative; background: #06080D; color: #fff; padding: 80px 0 56px; overflow: hidden; isolation: isolate; }
.tflow-sec::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(600px 380px at 50% 45%, rgba(36, 72, 255, .22), transparent 70%); }
.tflow-sec .eyebrow { color: var(--cobalt-300); }
.tflow-sec .sec-title { color: #fff; }
.tflow-sec .sec-desc { color: rgba(255, 255, 255, .62); }
.tflow-sec .link-more { color: rgba(255, 255, 255, .7); }
.tflow-sec .link-more:hover { color: #fff; }
.tflow { position: relative; max-width: 1440px; margin: 8px auto 0; outline: none; touch-action: pan-y; }
.tflow-stage { position: relative; height: 660px; }
.tfc { position: absolute; left: 50%; top: 50%; width: 360px; border-radius: 16px; overflow: hidden; background: #111319; border: 1px solid rgba(255, 255, 255, .1); transform: translate(-50%, -50%); transition: transform .7s var(--ease), opacity .6s, box-shadow .6s; will-change: transform; cursor: pointer; }
.tfc::after { content: ''; position: absolute; inset: 0; z-index: 3; background: rgba(4, 6, 12, var(--dim, 0)); transition: background .6s; pointer-events: none; }
.tfc.is-active { cursor: pointer; box-shadow: 0 40px 90px -34px rgba(36, 72, 255, .6), 0 0 0 1px rgba(143, 161, 255, .28); }
.tfc-link { position: absolute; inset: 0; z-index: 4; border-radius: inherit; }
.tfc-photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #1A1D26; container-type: inline-size; }
.tfc-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; transition: transform .8s var(--ease); }
.tfc.is-active:hover .tfc-photo img { transform: scale(1.03); }
.tfc-body { padding: 20px 22px 24px; min-height: 176px; }
.tfc-field { display: inline-block; padding: 4px 10px; border-radius: 999px; background: rgba(36, 72, 255, .2); color: var(--cobalt-300); font-size: 12px; font-weight: 800; }
.tfc h3 { margin-top: 10px; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.tfc .bio { margin-top: 10px; }
.tfc .bio li { color: rgba(255, 255, 255, .78); }
.tfc-apply { background: linear-gradient(165deg, #2A4DFF, #0E1F9E); border-color: rgba(255, 255, 255, .22); }
.tfc-apply .tfc-photo { background: transparent; }
.tfc-join { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 9cqi; background-image: linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px); background-size: 10cqi 10cqi; }
.tfc-join b { font-family: var(--display); font-weight: 800; font-size: 25cqi; line-height: .95; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: .5cqi rgba(255, 255, 255, .85); }
.tfc-join svg { align-self: flex-end; width: 22cqi; height: 22cqi; color: #fff; stroke-width: 1.6; }
.tfc-apply .tfc-field { background: rgba(255, 255, 255, .16); color: #fff; }
.tflow-nav { position: absolute; top: calc(50% - 26px); z-index: 40; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .2s; }
.tflow-nav:hover { background: rgba(255, 255, 255, .16); }
.tflow-nav svg { width: 24px; height: 24px; }
.tflow-nav.prev { left: max(20px, calc(50% - 600px)); }
.tflow-nav.next { right: max(20px, calc(50% - 600px)); }
.tflow-dots { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.tflow-dots button { position: relative; width: 9px; height: 9px; border-radius: 999px; background: rgba(255, 255, 255, .26); transition: width .35s var(--ease), background .3s; }
.tflow-dots button::before { content: ''; position: absolute; inset: -8px -3px; }
.tflow-dots button.is-on { width: 30px; background: var(--cobalt); }
.tflow-cta { margin-top: 30px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }

/* 경력 목록 */
.bio { display: grid; gap: 6px; }
.bio li { position: relative; padding-left: 13px; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.bio li::before { content: ''; position: absolute; left: 1px; top: .72em; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .65; }
.bio li small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-3); }
.bio-short li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bio-short li small { display: none; }
.bio-full { margin-top: 14px; gap: 9px; }
.bio-full li { font-size: 15px; }
.tc .bio { margin-top: 10px; }
.tc-photo img { object-position: center 22%; }
.tline { align-items: start; }
.tline .tc-photo { aspect-ratio: 4 / 5; }

/* 밝은 WHY 섹션 */
.why.light { background: var(--paper-2); color: var(--ink); }
.why.light .eyebrow { color: var(--cobalt); }
.why.light .sec-title { color: var(--ink); }
.why.light .sec-desc { color: var(--text-2); }
.why.light .why-list { background: var(--line-2); border-color: var(--line-2); }
.why.light .why-item { background: #fff; }
.why.light .why-item:hover { background: #FBFAF7; }
.why.light .why-item p { color: var(--text-2); }
.why.light .why-num { -webkit-text-stroke-color: var(--cobalt); }

@media (max-width: 720px) {
  .tflow-sec { padding: 56px 0 44px; }
  .tflow-stage { height: 540px; }
  .tfc { width: 268px; border-radius: 14px; }
  .tfc-body { padding: 16px 16px 18px; min-height: 150px; }
  .tfc h3 { font-size: 19px; }
  .tfc .bio li { font-size: 13px; }
  .tflow-nav { display: none; }
  .tline .tc-photo { aspect-ratio: 4 / 5; }
}

/* 카드 안 썸네일은 배지와 겹치지 않게 브랜드 표기를 숨김 */
.cc .th-brand, .apl .th-brand { visibility: hidden; }
.show-m { display: none !important; }
@media (max-width: 720px) { .show-m { display: flex !important; } .row.as-grid.cols-2 { grid-template-columns: 1fr 1fr; gap: 12px; } .as-grid.cols-2 .tc-apply { grid-column: 1 / -1; } .as-grid.cols-2 .tc-body { padding: 12px 12px 14px; } .as-grid.cols-2 .tc-name { font-size: 17px; } .as-grid.cols-2 .bio { display: none; } }


/* ==========================================================================
   메인 배너 — 강의 썸네일 슬라이드 (16:9, 가운데 크게 · 양옆 살짝)
   ========================================================================== */
.bnr { position: relative; container-type: inline-size; --bn-w: 74cqi; --bn-gap: 18px; touch-action: pan-y; }
.bnr.is-dragging .bn { transition: none; }
.bnr-stage { position: relative; height: calc(var(--bn-w) * 9 / 16); }
.bn { position: absolute; top: 0; left: 50%; width: var(--bn-w); aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; container-type: inline-size; transform: translateX(-50%); transition: transform .7s var(--ease), opacity .6s, filter .6s; background: #0B1433; color: #fff; box-shadow: var(--shadow-2); cursor: pointer; }
.bn.is-side { filter: brightness(.5) saturate(.8); }
.bn.is-far { opacity: 0; pointer-events: none; }
.bn-link { position: absolute; inset: 0; z-index: 6; border-radius: inherit; }
.bn picture, .bn-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.bn-img { object-fit: cover; }
.bn-bg { position: absolute; inset: 0; }
.bn-bg::after { content: ''; position: absolute; inset: 0; opacity: .8; background-image: radial-gradient(.25cqi .25cqi at 12% 22%, #fff, transparent), radial-gradient(.18cqi .18cqi at 34% 78%, #fff, transparent), radial-gradient(.22cqi .22cqi at 58% 14%, #fff, transparent), radial-gradient(.16cqi .16cqi at 71% 64%, #fff, transparent), radial-gradient(.2cqi .2cqi at 88% 30%, #fff, transparent), radial-gradient(.15cqi .15cqi at 46% 46%, #fff, transparent), radial-gradient(.2cqi .2cqi at 22% 58%, #fff, transparent), radial-gradient(.14cqi .14cqi at 93% 86%, #fff, transparent); }
.bn--navy .bn-bg { background: radial-gradient(60cqi 45cqi at 22% 18%, rgba(88, 130, 255, .38), transparent 70%), linear-gradient(160deg, #10286A 0%, #0B1A47 55%, #070F2C 100%); }
.bn--coral .bn-bg { background: radial-gradient(55cqi 45cqi at 30% 35%, rgba(255, 170, 130, .45), transparent 70%), linear-gradient(155deg, #F4674A 0%, #EC4A33 60%, #E03B27 100%); }
.bn--coral .bn-bg::before { content: ''; position: absolute; right: -8cqi; top: -6cqi; width: 34cqi; height: 12cqi; border-radius: 99px; background: rgba(255, 140, 80, .55); transform: rotate(-35deg); }
.bn--violet .bn-bg { background: radial-gradient(60cqi 45cqi at 24% 20%, rgba(190, 120, 255, .35), transparent 70%), linear-gradient(160deg, #2C1A63 0%, #1A1142 55%, #0E0A28 100%); }
.bn--teal .bn-bg { background: radial-gradient(60cqi 45cqi at 24% 20%, rgba(80, 220, 190, .28), transparent 70%), linear-gradient(160deg, #0F4A45 0%, #0A302E 55%, #061D1C 100%); }
.bn--ink .bn-bg { background: radial-gradient(60cqi 45cqi at 24% 20%, rgba(62, 224, 161, .22), transparent 70%), linear-gradient(160deg, #1A2233 0%, #10151F 55%, #090C13 100%); }
.bn-top { position: absolute; z-index: 3; left: 5cqi; top: 5.2cqi; display: flex; align-items: center; gap: 1.6cqi; }
.bn-pill { padding: .8cqi 1.9cqi; border-radius: 99px; background: var(--acc); color: #0B1433; font-weight: 800; font-size: 2cqi; letter-spacing: -0.02em; }
.bn--coral .bn-pill { background: #fff; color: #E8432E; }
.bn-when { font-size: 2.6cqi; font-weight: 800; letter-spacing: -0.02em; }
.bn-copy { position: absolute; z-index: 3; left: 5cqi; top: 12.6cqi; width: 60%; pointer-events: none; }
.bn-sub { margin-bottom: 1.6cqi; font-size: 2.9cqi; font-weight: 800; color: var(--acc); letter-spacing: -0.02em; }
.bn-title { font-family: var(--font); font-weight: 900; line-height: 1.18; letter-spacing: -0.04em; text-shadow: 0 .4cqi 1.6cqi rgba(0, 0, 0, .22); }
.bn-title span { display: block; font-size: 5.6cqi; }
.bn-title span:empty { display: none; }
.bn-title .acc { font-size: 7.2cqi; color: var(--acc); margin: .6cqi 0; }
.bn-cta { position: absolute; z-index: 7; left: 4.6cqi; bottom: 4.6cqi; padding: 1.7cqi 4.4cqi; border-radius: 99px; background: var(--acc); color: #0B1433; font-weight: 900; font-size: 2.8cqi; letter-spacing: -0.03em; box-shadow: 0 1cqi 2.6cqi rgba(0, 0, 0, .28); transition: transform .2s var(--ease); }
.bn-cta:hover { transform: translateY(-2px); }
.bn-person { position: absolute; z-index: 2; right: 3cqi; bottom: 0; height: 90%; aspect-ratio: 4 / 5; }
.bn-person img { width: 100%; height: 100%; object-fit: contain; object-position: bottom center; filter: drop-shadow(0 1.6cqi 3cqi rgba(0, 0, 0, .35)); }
.bn-mono { display: grid; place-items: center; height: 62%; bottom: 17%; }
.bn-mono span { width: 100%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 13cqi; color: #fff; background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--acc) 55%, transparent), rgba(255, 255, 255, .06) 70%); border: .35cqi solid color-mix(in srgb, var(--acc) 70%, transparent); box-shadow: 0 0 8cqi color-mix(in srgb, var(--acc) 30%, transparent); }
.bn.is-active .bn-copy, .bn.is-active .bn-top { animation: rise .8s var(--ease) both; }
.bnr-nav { position: absolute; top: 50%; z-index: 20; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: rgba(11, 14, 23, .55); border: 1px solid rgba(255, 255, 255, .2); color: #fff; transform: translateY(-50%); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background .2s; }
.bnr-nav:hover { background: rgba(11, 14, 23, .8); }
.bnr-nav svg { width: 22px; height: 22px; }
.bnr-nav.prev { left: calc((100cqi - var(--bn-w)) / 2 - 25px); }
.bnr-nav.next { right: calc((100cqi - var(--bn-w)) / 2 - 25px); }
.bnr-count { position: absolute; z-index: 20; right: calc((100cqi - var(--bn-w)) / 2 + 16px); bottom: 16px; padding: 6px 12px; border-radius: 99px; background: rgba(0, 0, 0, .5); color: #fff; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; pointer-events: none; }
@media (max-width: 720px) {
  .bnr { --bn-w: 86cqi; --bn-gap: 10px; }
  .bn { border-radius: 14px; }
  .bnr-nav { display: none; }
  .bnr-count { right: calc(5cqi + 8px); bottom: 8px; font-size: 11.5px; padding: 4px 9px; }
}


/* ==========================================================================
   모바일 최적화 (2026-09-27 검수)
   ========================================================================== */
.tb-short { display: none; }
.topbar-close svg { width: 18px; height: 18px; }
.bio.is-folded .bio-more-item { display: none; }
.bio-more { margin-top: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); font-size: 13px; font-weight: 700; color: var(--text-2); }
.bio-more:hover { color: var(--ink); border-color: var(--line-2); }
.table-wrap { margin: 12px 0; }
.table-wrap table { margin: 0; }

@media (max-width: 720px) {
  /* 공지 띠: 짧은 문구 한 줄 */
  .topbar a { justify-content: flex-start; min-height: 40px; padding: 8px 46px 8px 16px; gap: 8px; }
  .tb-full { display: none; }
  .tb-short { display: block; flex: 1; min-width: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar-close { width: 40px; height: 40px; right: 3px; }

  /* 바로가기: 작은 세로형 타일 (3칸 × 2줄, 좁은 폰에서도 칸이 넘치지 않게) */
  .quick { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
  .quick a { justify-content: center; gap: 6px; padding: 12px 4px 11px; border-radius: 16px; font-size: 13px; letter-spacing: -0.02em; white-space: nowrap; }
  .quick .qi { width: 38px; height: 38px; border-radius: 12px; }
  .quick .qi svg { width: 20px; height: 20px; }
  .quick .qi .new { top: -6px; right: -8px; padding: 1px 5px; }

  /* 분야: 3칸 */
  .cats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .cat { align-items: center; text-align: center; gap: 0; padding: 14px 6px 12px; border-radius: 16px; }
  .cat-ic { width: 38px; height: 38px; margin: 0 auto 6px; }
  .cat-ic svg { width: 20px; height: 20px; }
  .cat b { font-size: 14px; }
  .cat-sub { display: none; }
  .cat-n { top: 7px; right: 7px; min-width: 20px; height: 20px; padding: 0 6px; font-size: 11px; }

  /* 왜 밸류업: 2 × 2 */
  .why-list { grid-template-columns: 1fr 1fr; }
  .why-item { padding: 18px 14px 20px; }
  .why-num { font-size: 28px; }
  .why-item h3 { margin-top: 10px; font-size: 15px; line-height: 1.35; }
  .why-item p { margin-top: 6px; font-size: 13px; line-height: 1.6; }

  /* 자동 생성 배너: 휴대폰에서 읽히게 */
  .bn-sub { display: none; }
  .bn-copy { top: 14.5cqi; width: 64%; }
  .bn-top { top: 4.6cqi; gap: 2cqi; }
  .bn-pill { padding: 1cqi 2.6cqi; font-size: 4cqi; }
  .bn-when { font-size: 4cqi; }
  .bn-cta { padding: 2cqi 4.6cqi; font-size: 4.4cqi; }

  /* 강의 목록: 2칸 */
  .row.as-grid.cols-2m { grid-template-columns: 1fr 1fr; gap: 12px; }
  .cols-2m .cc { border-radius: 16px; }
  .cols-2m .cc-body { padding: 10px 11px 12px; gap: 4px; }
  .cols-2m .cc-sub, .cols-2m .cc-meta { display: none; }
  .cols-2m .cc-title { font-size: 14px; line-height: 1.42; }
  .cols-2m .cc-foot { flex-direction: column; align-items: flex-start; gap: 2px; padding-top: 6px; }
  .cols-2m .cc-teacher { font-size: 12px; }
  .cols-2m .price { justify-content: flex-start; }
  .cols-2m .price .free, .cols-2m .price .now { font-size: 15px; }
  .cols-2m .cc-flag { top: 8px; left: 8px; gap: 4px; }
  .cols-2m .cc-flag .badge { height: 22px; padding: 0 8px; font-size: 11.5px; }
  .cols-2m .th-kicker, .cols-2m .th-date, .cols-2m .th-brand { display: none; }
  .cols-2m .th-title { margin-top: auto; }

  /* 썸네일 글씨 최소 크기 · 강사 카드 영문 라벨 */
  .th-kicker { font-size: max(12px, 4.2cqi); }
  .th-date { font-size: max(11.5px, 3.9cqi); }
  .th-brand { font-size: max(10px, 2.7cqi); }
  .eyebrow { font-size: 12px; }
  .bnr-count { font-size: 12px; }
  .quick .qi .new { font-size: 10px; }
  .header .logo, .auth-logo .logo, a.auth-logo { padding: 8px 0; }
  .tflow-dots button::before { inset: -14px -4px; }
  .crumb a { padding: 8px 10px; margin: -8px -10px; }
  .auth-note a { display: inline-block; padding: 6px 0; margin: -6px 0; }

  /* 푸터: 항목마다 한 줄 */
  .footer-info { gap: 1px; font-size: 12.5px; line-height: 1.75; }
  .footer-info p { display: block; }
  .footer-info p > span { display: block; padding: 0; }
  .footer-info p > span + span::before { display: none; }
  .footer-links { gap: 0 16px; margin-top: 14px; }
  .footer-links a { padding: 8px 2px; }

  /* 누르기 쉬운 크기 · 아이폰 입력 확대 방지 */
  .select { height: 42px; font-size: 16px; }
  .link-more { padding: 6px 0; }

  /* 강의 상세: 강사 소개는 사진+이름 한 줄, 경력은 전체 폭 */
  .dtabs { margin-top: 28px; }
  .tline { grid-template-columns: 72px 1fr; column-gap: 14px; row-gap: 0; align-items: center; padding: 18px; }
  .tline > div:not(.tc-photo) { display: contents; }
  .tline .tc-photo { grid-row: 1 / span 2; width: 72px; border-radius: 14px; }
  .tline .tc-role { grid-column: 2; align-self: end; }
  .tline h3 { grid-column: 2; align-self: start; font-size: 22px; }
  .tline .bio, .tline .bio-more, .tline .link-more { grid-column: 1 / -1; justify-self: start; }
  .tline .bio { margin-top: 16px; }
  .tline .bio-full li { font-size: 14.5px; }

  /* 하단 문의 안내: 운영시간과 안내 문구를 줄 나눔 */
  .footer-cs p > span { display: block; }
  .footer-cs .cs-sep { display: none; }

  /* 내 강의실: 프로필 영역 압축 */
  .my-side { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; padding: 18px; border-radius: 20px; }
  .my-side .avatar { grid-row: span 2; width: 46px; height: 46px; font-size: 18px; }
  .my-side h2 { margin-top: 0; font-size: 18px; }
  .my-side .em { grid-column: 2; }
  .my-side .prov { display: none; }
  .my-nav { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 14px; }
  .my-nav button { justify-content: center; gap: 6px; padding: 10px 4px; font-size: 14px; }
  .my-panel h2 { font-size: 22px; margin-bottom: 14px; }
  .apl { grid-template-columns: 112px 1fr; gap: 12px; padding: 12px; align-items: start; }
  .apl .thumb { border-radius: 10px; }
  .apl h3 { margin-top: 6px !important; font-size: 15px; }
  .apl .when { font-size: 13px; }
  .apl .acts { grid-column: 1 / -1; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }

  /* 고객센터: 좁은 폰에서 메일 주소 버튼이 칸을 넘지 않게 */
  .cs-grid { grid-template-columns: minmax(0, 1fr); }
  .cs-card { padding: 22px 20px; }
  .cs-card .btn { max-width: 100%; height: auto; min-height: 44px; padding-top: 10px; padding-bottom: 10px; white-space: normal; word-break: break-all; text-align: center; }

  /* 약관 표: 좌우로 넘겨 보기 */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 12px calc(var(--gutter) * -1); padding: 0 var(--gutter); }
  .table-wrap table { min-width: 540px; }
}

/* 좁은 사진 칸(가로 160px 이하)에서는 모노그램 영문 라벨 숨김 */
.mono small { font-size: max(10px, 4.6cqi); }
@container (max-width: 140px) { .mono small { display: none; } }
/* 작은 썸네일(가로 200px 이하: 강의 목록 2칸·내 강의실)에서는 제목만 남김 */
@container (max-width: 200px) {
  .th-kicker, .th-date, .th-brand { display: none; }
  .th-title { margin-top: auto; }
}