/* ═══════════════════════════════════════════════════════════════════════
   MONC 특강 카드 — 디자인 스펙(2026-07-24)
   lectures.html · index.html(#lectures-home) · lecture.html 공용.
   원칙: 일곱 카드가 한 가족. 커버 배경은 7개 전부 동일(아이보리 한 단계 진하게),
   항공사별로 바뀌는 건 '영문 사명 색'과 '커버 하단 1px 룰 색' 두 가지뿐.
   한글 제목은 항상 네이비. 굵기는 400·500만. 그림자·글로우·리프트·그라디언트 금지.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  /* 항공사별 액센트 — 스펙 시작값을 아이보리 커버(--lx-cover) 위 4.5:1 이상으로 미세조정
     (7C·LJ·RF 소폭 하향). 실제 운영값은 각 항공사 공식 CI로 추후 조정 가능. */
  --air-ke: #14375E;  /* 대한항공 */
  --air-lj: #3A6440;  /* 진에어 */
  --air-7c: #8C4318;  /* 제주항공 */
  --air-tw: #9E3B34;  /* 티웨이 */
  --air-ze: #97323A;  /* 이스타 */
  --air-yp: #2E3D63;  /* 에어프레미아 */
  --air-rf: #8E4064;  /* 에어로케이 */

  --lx-cover:   #E4DDC9;        /* 커버 톤 — 7개 카드 전부 동일 */
  --lx-info:    #FBF9F4;        /* 정보부 — 밝은 웜화이트 */
  --lx-navy:    #1B2E4E;        /* 한글 제목 — 항공사 무관 항상 네이비 */
  --lx-body:    #4A4640;        /* 서브 카피 본문색 */
  /* 메타 보조색 — ⚠️ 구 #7A756C 는 정보부(#FBF9F4) 위 4.35:1 로 4.5:1 미달이었다.
     활자를 14px 로 올리면서 같이 낮췄다(원칙 4). 더 밝게 되돌리지 말 것. */
  --lx-metac:   #736E64;
  --lx-bd:      rgba(38, 34, 28, .12);
  --lx-bd-h:    rgba(38, 34, 28, .30);
}

/* ── 그리드: 1024+ 3열 / 640~1023 2열 / 640- 1열 ── */
.lx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 1023px) { .lx-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px)  { .lx-grid { grid-template-columns: 1fr; } }

/* ── 카드 ── */
.lx-card {
  --lx-accent: var(--lx-navy);                 /* 항공사 미지정 시 기본 네이비 */
  display: flex; flex-direction: column;
  background: var(--lx-info);
  border: 1px solid var(--lx-bd); border-radius: 14px; overflow: hidden;
  text-decoration: none; color: var(--lx-body);
  transition: border-color .18s ease;          /* 리프트·확대 금지, 테두리만 */
}
.lx-card:hover { border-color: var(--lx-bd-h); }
.lx-card:focus-visible { outline: 2px solid var(--lx-accent); outline-offset: 2px; }
.lx-card.is-out { opacity: .55; }              /* 마감·품절 — 카드는 계속 노출 */

/* 커버부(톤 배경) — 사진이 없을 때의 기본 모습 */
.lx-cover { position: relative; background: var(--lx-cover); padding: 28px 24px 24px; }
.lx-en {
  /* 구 12px — 원칙 1(최소 12pt)의 바닥이라 13px 로. 색·굵기·자간은 스펙 그대로. */
  font-size: 13px; font-weight: 400; letter-spacing: .14em; line-height: 1.2;
  color: var(--lx-accent); text-transform: uppercase;
}
/* ⚠️ 제목은 카드에서 2줄까지만(전체 제목은 상세페이지에 나온다).
   3줄이 되면 사진 커버에서 글자 블록이 220px까지 자라 사진이 32px만 남는다 — 사진을 넣은 의미가 사라진다. */
.lx-ko {
  margin-top: 12px;
  font-size: 28px; font-weight: 500; line-height: 1.25; color: var(--lx-navy);
  letter-spacing: -.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lx-en + .lx-ko { margin-top: 12px; }
.lx-rule { margin: 20px 0 0; height: 1px; border: 0; background: var(--lx-accent); opacity: .6; }

/* ── 사진 커버(2026-07-24 오너가 목업 4종 중 ③ 선택) ──────────────────────────
   thumb_url 이 있으면 커버가 '사진 + 아래로 갈수록 아이보리에 녹아드는 그라디언트'가 된다.
   글자는 그라디언트가 거의 불투명해지는 아래쪽에 앉으므로 사진이 밝든 어둡든 읽힌다.
   ⚠️ 사진과 글자를 선으로 자르지 말 것 — 잘라 놓으면 흔한 썸네일 카드(목업 ④안)가 되고,
      ③안을 고른 이유(사진과 카드가 한 덩어리로 보이는 것)가 사라진다.
   ⚠️ backdrop-filter 로 글자 뒤만 흐리는 방식은 검토 후 버렸다 — 블러가 뒤 사진을 완전히
      뭉개 ④안과 똑같아 보였고, 구형 아이폰 지원이 불안정한 데다 카드 수만큼 블러 레이어가 생긴다.
   사진이 없으면 위의 기본 아이보리 커버가 그대로 나온다(폴백). */
/* padding-top 88px = '사진이 최소 이만큼은 보인다'는 약속.
   min-height 만으로는 제목이 길어질 때 글자 블록이 커버를 다 먹어 사진이 사라진다. */
.lx-card.has-shot .lx-cover {
  min-height: 252px; padding: 88px 0 0;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.lx-card.has-shot .lx-cover::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background-image: var(--lx-shot); background-size: cover;
  background-position: center 34%;   /* 인물 눈높이가 대충 맞는 지점 — 카드마다 통일 */
}
/* ⚠️ 페이드는 커버 높이의 %가 아니라 **글자 블록 자체**에 px로 건다.
   %로 걸면 제목 줄 수에 따라 글자가 앉는 높이가 달라져(2줄 45% · 3줄 35%) 어떤 카드는
   반투명 구간에 글자가 얹힌다 — 실제로 항공사 영문명이 이 때문에 흐렸다.
   글자 블록 기준이면 줄 수가 몇이든 위 46px에서 페이드가 끝나고 글자는 늘 불투명 위에 앉는다.
   ⚠️ `.lx-cover > *` 로 뭉뚱그리지 말 것 — 배지가 absolute 인데 relative 로 덮여 자리가 무너진다. */
.lx-card.has-shot .lx-txt {
  position: relative; z-index: 2;
  padding: 46px 24px 22px;
  background: linear-gradient(180deg,
    rgba(251,249,244, 0)    0,
    rgba(251,249,244, .55) 22px,
    rgba(251,249,244, .94) 42px,
    rgba(251,249,244, 1)   54px);
}
/* (구 .lx-badge — 커버 우상단 가격 알약. 2026-07-24 폐기하고 가격은 정보부 맨 아래
   .lx-price 한 줄로 옮겼다. 사진 위 알약 대비를 맞추던 규칙들도 같이 제거.) */

/* 정보부(밝은 배경) */
.lx-info { padding: 16px 24px 20px; }
.lx-copy { font-size: 14px; font-weight: 400; line-height: 1.6; color: var(--lx-body); }
.lx-meta {
  margin-top: 10px; display: flex; flex-wrap: wrap; gap: 5px 12px;
  font-size: 14px; font-weight: 400; color: var(--lx-metac);
}
.lx-copy + .lx-meta { margin-top: 12px; }
.lx-meta .mi { display: inline-flex; align-items: center; gap: 5px; }
.lx-meta .mi svg { width: 14px; height: 14px; opacity: .7; flex: 0 0 auto; }
.lx-meta .seats-low { color: var(--lx-accent); font-weight: 500; }   /* 잔여 5석 이하: 텍스트만 강조 */
.lx-meta .seats-low svg { opacity: 1; }

/* ── 가격: 카드를 닫는 마지막 줄 (2026-07-24 오너가 목업 3안 중 A안 선택) ──────
   커머스 카드 표준 위치(무신사·29CM·클래스101). 정보를 다 읽고 가격에서 끝맺는다.
   ⚠️ 커버 우상단 배지로 되돌리지 말 것 — 시선은 큰 제목부터 가는데 가격은 반대쪽
      구석 11px 회색이라 끝까지 눈에 안 걸렸다(오너 지적). 배지 자체를 폐기했다.
   ⚠️ 무료 특강도 이 줄 하나로만 말한다 — 구 버전은 우상단 '무료' 배지와 이 줄이
      같은 말을 두 번 했다(오너 "무료를 굳이 두 개 둘 필요가 있을까"). */
.lx-price {
  margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--lx-bd);
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.lx-price .l { font-size: 14px; font-weight: 400; color: var(--lx-metac); }
.lx-price .v { font-size: 20px; font-weight: 500; color: var(--lx-navy); letter-spacing: -.01em; }
.lx-price .v.free { color: #2E6E42; }   /* 아이보리 위 5.4:1 */

/* ── 로딩 스켈레톤 ── */
.lx-sk { background: var(--lx-info); border: 1px solid var(--lx-bd); border-radius: 14px; overflow: hidden; }
/* 사진 커버(252px)와 기본 커버(약 130px)의 중간 — 로딩이 끝나며 카드가 확 튀는 걸 줄인다 */
.lx-sk .sk-cover { background: var(--lx-cover); height: 190px; }
.lx-sk .sk-lines { padding: 18px 24px 22px; }
.lx-sk .sk-line { height: 12px; border-radius: 6px; background: rgba(38, 34, 28, .09); margin-bottom: 12px; }
.lx-sk .sk-line.s2 { width: 58%; margin-bottom: 0; }
.lx-sk-pulse { animation: lxpulse 1.7s ease-in-out infinite; }
@keyframes lxpulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

/* ── 모바일(639-) ── */
@media (max-width: 639px) {
  .lx-ko { font-size: 24px; }
  .lx-cover { padding: 24px 20px 20px; }
  .lx-info { padding: 14px 20px 18px; }
  /* 사진 커버: 1열이라 카드가 넓어진 만큼 사진도 조금 더 보여준다 */
  .lx-card.has-shot .lx-cover { padding: 96px 0 0; min-height: 264px; }
  .lx-card.has-shot .lx-txt { padding: 46px 20px 20px; }   /* 위 46px = 페이드 구간, 줄이지 말 것 */
}
@media (prefers-reduced-motion: reduce) {
  .lx-card { transition: none; }
  .lx-sk-pulse { animation: none; }
}