/* ==========================================================================
   PA | AI Connect 2026
   컬러/타이포는 디자이너 확정값 — 임의 변경 금지 (프롬프트 문서 1.1, 1.2 참조)
   ========================================================================== */

/* 폰트: NanumSquare_ac (기존 NanumSquare에서 교체) — Bold(700)보다 굵은 웨이트는 사용하지 않음
   29차 예외: 파트너사 등급 타이틀(.partner-tier-name)만 ExtraBold(800) 사용 승인됨 */

:root {
  --color-black: #020202;        /* 메인 다크 배경: 히어로, 세션소개, 주최자/파트너사 */
  --color-gold: #B39E84;         /* 메인 포인트 컬러 (베이지 계열은 전부 이 컬러 베이스에 투명도만 다르게 준 것) */
  --color-beige: #E2DDD7;        /* 베이지 배경: FAQ, 오시는 길, 실습세션/티켓 섹션 */
  --color-beige-shade: #CBC7C1;  /* 베이지 배경 위 짙은 음영(구분선, 비활성 요소, 서브 배경) */
  --color-beige-light: #F5F3F1;  /* 27차: 쉬는시간/점심(--color-beige)과 같은 계열이되 더 옅게 — 사회자 행 배경 */
  --color-gray-hover: #F2F2F2;   /* 회색 배경 / hover 상태 */
  --color-white: #FFFFFF;        /* 화이트 카드 */
  --color-text-dark: #1A1A1A;    /* 라이트 배경 위 기본 텍스트 */
  --color-text-muted: #6B6B6B;   /* 보조/캡션 텍스트 */
  --color-grid-line: rgba(255, 255, 255, 0.6); /* 16차: 회색→화이트 계열로 변경, 배경과 자연스럽게 어우러지는 은은한 격자선 */
  --color-workshop-a-bg: #F6F6F5; /* 15차: 워크숍A 컬럼 배경(옅은 회색 톤1) */
  --color-workshop-b-bg: #EFEEEC; /* 15차: 워크숍B 컬럼 배경(옅은 회색 톤2, 톤1과 미세하게 다름) */

  /* 각진(sharp corner) 디자인 확정 — radius는 항상 0으로 전역 통일, 재도입 금지 */
  --radius: 0;
  --header-height: 76px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-weight: 400;
  word-break: keep-all;
  background: var(--color-white);
  color: var(--color-text-dark);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }

.container {
  width: 100%; /* 28차: 부모가 flex(align-items:center)인 섹션(팀/티켓/워크숍/오시는길)에서
                  flex item의 main-axis 폭이 콘텐츠 크기로 줄어들지 않도록 명시 —
                  일반 block 부모에서는 기존 width:auto와 동일하게 렌더링되어 영향 없음 */
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

.section-eyebrow {
  display: inline-block;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-gold);
  font-size: 14px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.section-title {
  font-weight: 700;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.35;
}

.pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 15px;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), background-color 0.25s;
}
.pill-btn--gold {
  background: var(--color-gold);
  color: var(--color-white);
}
.pill-btn--gold:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(179, 158, 132, 0.35); }
.pill-btn--black {
  background: var(--color-black);
  color: var(--color-white);
}
.pill-btn--black:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(2, 2, 2, 0.25); }

/* ==========================================================================
   스크롤 리빌 (IntersectionObserver 대상)
   ========================================================================== */
.reveal {
  /* 16차: 체감이 안 될 정도로 빨랐던 리빌 모션을 늘림 — 지속시간 0.6s→1.1s, 시작 지연 0.12s, 이동거리 20px→36px */
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 1.1s ease-out 0.12s, transform 1.1s ease-out 0.12s;
  will-change: transform, opacity;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* 19차: 한 섹션 안에서 여러 리빌 요소가 순서대로 나타나도록 하는 stagger 지연 (기본 0.12s 위에 누적) */
.reveal.reveal-stagger-2 { transition-delay: 0.3s; }
.reveal.reveal-stagger-3 { transition-delay: 0.48s; }

/* ==========================================================================
   4.1 상단바 (고정, sticky)
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  z-index: 1000;
  background: transparent;
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
}
.site-header.is-scrolled {
  background: rgba(2, 2, 2, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.site-header.is-subpage {
  background: rgba(2, 2, 2, 0.9);
}
.header-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header-back {
  display: none;
  align-items: center;
  margin-right: 12px;
  color: var(--color-white);
  font-size: 20px;
}
.logo-link { display: flex; align-items: center; }
.logo-link img { height: 28px; width: auto; object-fit: contain; flex-shrink: 0; }
.logo-link .logo-mobile { display: none; }

/* 14차: 세션 6개→7개로 늘어나 한 줄 유지를 위해 gap 축소 + 폰트 1px 축소 */
.main-nav { display: flex; gap: 22px; }
.main-nav a {
  color: var(--color-white);
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  opacity: 0.85;
  transition: opacity 0.2s, color 0.2s;
}
.main-nav a:hover { opacity: 1; color: var(--color-gold); }

.header-actions { display: flex; align-items: center; gap: 8px; }

/* 헤더 신청하기: 박스 없이 골드 텍스트 + 밑줄/화살표, 클릭 영역은 기존 버튼 크기 유지 */
.header-cta {
  display: inline-flex;
  align-items: center;
  padding: 10px 0;
  font-weight: 700;
  font-size: 14px;
  color: var(--color-gold);
  white-space: nowrap;
  border-bottom: 1px solid var(--color-gold);
  transition: opacity 0.2s ease;
}
.header-cta:hover { opacity: 0.85; }
.icon-btn {
  /* 11차: hover 시 배경 박스 대신 아이콘 색상만 골드로 변경
     12차 버그 수정: <button> 기본 UA padding(약 1px 6px)이 box-sizing:border-box와 맞물려
     flex 자식(icon-mask)을 20px→16px로 짜부라뜨린 것이 원인이었음 → padding:0으로 명시 고정.
     "간격 축소"는 버튼 크기가 아니라 header-actions/footer-icons의 gap으로만 담당 */
  width: 28px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  flex: none;
  transition: color 0.2s;
}
.icon-btn:hover { color: var(--color-gold); background: none; }
.icon-mask {
  /* 17+18차: 버튼 크기는 유지, 아이콘 자체만 20px→24px로 확대 */
  display: inline-block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.icon-mask--share { -webkit-mask-image: url('../assets/icon/btn_40x40_share.svg'); mask-image: url('../assets/icon/btn_40x40_share.svg'); }
.icon-mask--mypage { -webkit-mask-image: url('../assets/icon/btn_40x40_my.svg'); mask-image: url('../assets/icon/btn_40x40_my.svg'); }
.icon-mask--tel { -webkit-mask-image: url('../assets/icon/btn_40x40_call.svg'); mask-image: url('../assets/icon/btn_40x40_call.svg'); }
.icon-mask--mail { -webkit-mask-image: url('../assets/icon/btn_40x40_mail.svg'); mask-image: url('../assets/icon/btn_40x40_mail.svg'); }

.nav-toggle {
  display: none;
  width: 32px;
  height: 32px;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--color-white);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ==========================================================================
   4.2 히어로
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  background: var(--color-black);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-bg-symbol {
  /* 12차: 좌상단/우하단 분할 배치 중단, 화면 정중앙 배치로 단순화 (new-pa_middle.png) */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(90vw, 930px); /* 14차: 기존 대비 1.5배 확대 */
  max-width: none; /* 전역 img{max-width:100%} 규칙이 워터마크 확대를 가로막는 것 방지 */
  height: auto;
  pointer-events: none;
  /* 19차: 페이지 로드 시 타이틀보다 살짝 늦게 천천히 페이드인 */
  opacity: 0;
  animation: hero-watermark-fade 1.8s ease-out 0.2s forwards;
}
@keyframes hero-watermark-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes hero-watermark-fade-mobile {
  from { opacity: 0; }
  to { opacity: 1; }
}
.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--color-white);
  padding: 140px 24px 80px;
}
.hero-title-graphic {
  width: 260px;
  max-width: 70vw;
  margin: 0 auto 28px;
}
.hero-subcopy {
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 36px;
  letter-spacing: -0.01em;
}
.hero-datetime {
  font-size: 15px;
  color: var(--color-gold);
  font-weight: 700;
  margin-bottom: 40px;
  line-height: 1.8;
}
.hero-datetime span { display: block; }

.countdown {
  display: inline-flex;
  gap: 16px;
}
.countdown-unit {
  /* radius 전면 제거의 예외: 카운트다운 카드만 둥근 모서리 유지 (다른 요소로 번지지 않도록 이 클래스에 한정) */
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 72px;
  padding: 14px 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}
.countdown-value {
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: opacity 0.2s ease;
}
.countdown-value.is-tick { opacity: 0.35; }
.countdown-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--color-gold);
  margin-top: 6px;
  text-transform: uppercase;
}

/* ==========================================================================
   4.3 세션 소개
   ========================================================================== */
.session-intro {
  position: relative;
  background: var(--color-black);
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 160px 0;
  overflow: hidden;
}
.session-intro-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.session-intro-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
  color: var(--color-white);
}
.session-intro-inner .section-title { margin-bottom: 36px; }
.session-intro-body p {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 20px;
}

/* ==========================================================================
   4.4 타임테이블
   ========================================================================== */
.timetable {
  padding: 160px 0;
  background: var(--color-white);
}
.timetable-header {
  text-align: center;
  margin-bottom: 48px;
}
.timetable-toggle {
  display: inline-flex;
  margin-top: 28px;
  border: 1px solid var(--color-beige-shade);
  border-radius: var(--radius);
  padding: 4px;
}
.timetable-toggle button {
  padding: 10px 24px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 14px;
  color: var(--color-text-muted);
  transition: background-color 0.25s, color 0.25s;
}
.timetable-toggle button.is-active {
  background: var(--color-black);
  color: var(--color-white);
}

.timetable-view { display: none; opacity: 1; transition: opacity 0.25s ease; }
.timetable-view.is-active { display: block; }

/* --- 시안 A: 클래식 세로 테이블 --- */
.timetable-a-scroll { overflow-x: auto; }
.timetable-a-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  table-layout: fixed;
}
/* 11차: 워크숍A/B 컬럼 폭을 서로 동일하게, 트랙A는 더 넓게 유지
   14차 버그 수정: table-layout:fixed 상태에서 TIME 컬럼(첫 번째 열)에 너비가 지정되지 않아
   A(38%)+B(31%)+C(31%)=100%로 TIME 컬럼이 0으로 짜부라지고, white-space:nowrap 시간 텍스트가
   옆 셀(트랙A 세션 제목) 위로 겹쳐 보이던 버그 — TIME에도 너비를 지정해 4열 합이 100%가 되도록 수정 */
.timetable-a-table thead th:first-child,
.timetable-a-table td.time-cell { width: 12%; }
.timetable-a-table th[data-track="A"],
.timetable-a-table td[data-track="A"] { width: 36%; }
.timetable-a-table th[data-track="B"],
.timetable-a-table td[data-track="B"],
.timetable-a-table th[data-track="C"],
.timetable-a-table td[data-track="C"] { width: 26%; }
.timetable-a-table th,
.timetable-a-table td {
  /* 15차: 골드 계열(beige-shade) 구분선을 전부 걷어내고, 중립 회색 실선으로 행/열 전체를 격자처럼 통일
     17+18차: 두께 증가 요청 — 1.5px는 브라우저에서 1px로 반올림되어 2px로 적용(색상은 16차의 화이트 계열 그대로 유지) */
  border: none;
  border-right: 2px solid var(--color-grid-line);
  border-bottom: 2px solid var(--color-grid-line);
  padding: 14px;
  vertical-align: top;
  text-align: left;
}
.timetable-a-table th:last-child,
.timetable-a-table td:last-child { border-right: none; }
.timetable-a-table tbody tr:last-child td { border-bottom: none; }
.timetable-a-table th {
  background: var(--color-black);
  color: var(--color-white);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-align: center;
  border-right-color: rgba(255, 255, 255, 0.16);
}
.timetable-a-table th .th-sub {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  opacity: 0.75;
}
.timetable-a-table .time-cell {
  width: 110px;
  background: var(--color-gray-hover);
  font-weight: 700;
  font-size: 13px;
  text-align: center;
  white-space: nowrap;
}
/* 15차: 사회자 행 — 세션 행과 구분되는 옅은 배경 + 굵은 이름
   27차: 쉬는시간/점심(--color-beige) 계열의 더 옅은 색으로 변경 — tr 태그를 selector에 포함시켜
   특이도를 (0,2,2)로 올려 트랙B/C 컬럼 배경(td[data-track], (0,2,1))보다 우선 적용되게 함 */
.timetable-a-table tr.mc-row td { background: var(--color-beige-light); font-size: 13px; }
.timetable-a-table .mc-row .mc-cell strong { font-weight: 700; }
/* 26차: 태블릿/모바일에서는 이름·소속을 2줄로 보여주고 가운데 점을 뗌 — 데스크탑 기본값은 점 표시 + 줄바꿈 숨김 */
.mc-cell .mc-break { display: none; }
.timetable-a-table .mc-cell { cursor: pointer; } /* 16차: 세션 카드와 동일하게 클릭 가능 */
/* 쉬는시간/점심/Closing 행: 시간 뱃지와 같은 스타일로 압축 — 한 줄 높이, 격자선은 유지 */
.timetable-a-table .break-row td { padding: 6px 14px; }
.timetable-a-table .break-row .time-cell { background: var(--color-gray-hover); }
.timetable-a-table .break-cell {
  background: var(--color-beige);
  text-align: center;
  font-weight: 700;
  font-size: 13px;
  color: var(--color-text-muted);
  white-space: nowrap;
}
/* 15차: 워크숍A/B 컬럼 전체를 톤이 다른 옅은 회색으로 통일해 트랙A(화이트)와 구분 */
.timetable-a-table td[data-track="B"] { background: var(--color-workshop-a-bg); }
.timetable-a-table td[data-track="C"] { background: var(--color-workshop-b-bg); }
.session-card-a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
}
.session-card-a .s-time { font-size: 12px; font-weight: 700; color: var(--color-gold); }
.session-card-a .s-title { font-weight: 700; font-size: 14px; }
.session-card-a .s-speaker { font-size: 13px; color: var(--color-text-muted); }
.session-card-a .s-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.session-card-a .s-tags span {
  font-size: 11px;
  color: var(--color-gold);
  font-weight: 700;
}

/* 모바일: 트랙별 탭 전환 */
.track-tabs {
  display: none;
  justify-content: center;
  gap: 8px;
  overflow-x: auto;
  margin-bottom: 20px;
  padding-bottom: 4px;
}
.track-tabs button {
  /* 19+20차: "radius 전면 제거" 원칙의 예외 — 탭/필터 버튼 그룹에 한정해 완전한 pill 형태 적용
     21차: 필터형 뷰(.track-filter)와 스타일이 서로 달라 보이던 것을 동일한 개별 outline pill로 통일 */
  flex: none;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--color-beige-shade);
  font-weight: 700;
  font-size: 14px;
  color: var(--color-text-dark);
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.track-tabs button.is-active { background: var(--color-gold); border-color: var(--color-gold); color: var(--color-white); }

/* --- 시안 B: 필터형 카드 그리드 --- */
.timetable-b-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 32px;
}
.track-filter { display: flex; flex-wrap: wrap; gap: 10px; }
.track-filter button {
  /* 19+20차: pill 형태로 변경("radius 전면 제거" 원칙의 예외) */
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--color-beige-shade);
  font-weight: 700;
  font-size: 14px;
  color: var(--color-text-dark);
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.track-filter button.is-active {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-white);
}
.my-timetable-btn {
  padding: 10px 22px;
  border-radius: var(--radius);
  background: var(--color-black);
  color: var(--color-white);
  font-weight: 700;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.session-grid-b {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.session-card-b {
  background: var(--color-white);
  border: 1px solid var(--color-beige-shade);
  border-radius: var(--radius);
  padding: 22px;
  cursor: pointer;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
  position: relative;
}
.session-card-b:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(2, 2, 2, 0.08);
}
.session-card-b.is-hidden { display: none; }
.session-card-b .b-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.track-badge {
  display: inline-flex;
  padding: 4px 12px;
  border-radius: var(--radius);
  background: var(--color-black);
  color: var(--color-white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.b-time { font-size: 13px; color: var(--color-text-muted); font-weight: 700; }
.bookmark-btn {
  color: var(--color-beige-shade);
  font-size: 20px;
  line-height: 1;
  transition: color 0.2s, transform 0.2s;
}
.bookmark-btn.is-bookmarked { color: var(--color-gold); transform: scale(1.1); }
.session-card-b .b-title { font-weight: 700; font-size: 16px; margin-bottom: 8px; }
.session-card-b .b-speaker { font-size: 14px; color: var(--color-text-muted); margin-bottom: 10px; }
.session-card-b .b-speaker strong { color: var(--color-text-dark); }
.session-card-b .b-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.session-card-b .b-tags span { font-size: 12px; color: var(--color-gold); font-weight: 700; }

/* ==========================================================================
   4.5 / 4.6 연사·팀 소개 (공유 그리드/모달 스타일)
   ========================================================================== */
.people-section { padding: 160px 0; }
/* 28차: "함께 만드는 사람" 섹션만 히어로/세션소개처럼 100vh 풀페이지 + 세로 중앙 정렬
   (연사소개는 동일한 .people-section 클래스를 공유하므로 영향 없도록 #team으로 스코프) */
#team { min-height: 100vh; display: flex; align-items: center; }
.people-section.on-gray { background: var(--color-gray-hover); }
.people-section-header { text-align: center; max-width: 640px; margin: 0 auto 56px; }
.people-section-header p { color: var(--color-text-muted); margin-top: 16px; }
.people-group-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 24px;
  text-align: center;
}
.people-group-title:not(:first-of-type) { margin-top: 56px; }

.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 32px 24px;
}
/* 14차: 사회자 그룹(인원 적음)은 팀 섹션과 동일한 방식으로 가운데 정렬 */
#mcGrid {
  grid-template-columns: repeat(auto-fit, 140px);
  justify-content: center;
}
/* 함께 만드는 사람: 인원이 적을 때 카드가 흩어져 보이지 않도록 고정폭 트랙 + 중앙 압축 배치 */
#teamGrid {
  grid-template-columns: repeat(auto-fit, 140px);
  justify-content: center;
  gap: 16px 20px;
}
.people-card {
  text-align: center;
  cursor: pointer;
  position: relative;
}
.people-avatar {
  /* radius 전면 제거의 예외: 인물 사진만 원형 유지 */
  width: 108px;
  height: 108px;
  border-radius: 50%;
  margin: 0 auto 14px;
  overflow: hidden;
  background: var(--color-beige-shade);
  transition: transform 0.25s var(--ease-out);
}
.people-card:hover .people-avatar { transform: translateY(-4px); }
.people-avatar img { width: 100%; height: 100%; object-fit: cover; }
.people-avatar img.img-fallback { opacity: 0; }
.people-name { font-weight: 700; font-size: 15px; }
.people-org { font-size: 13px; color: var(--color-text-muted); margin-top: 4px; }

/* 사회자/연사 구분 뱃지 (그리드 카드 + 모달 공용) */
.type-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--color-gray-hover);
  color: var(--color-text-dark);
  font-size: 12px;
  font-weight: 700;
  border-radius: var(--radius);
}
.people-card .type-badge { margin-bottom: 10px; }

/* ==========================================================================
   모달 (사회자 / 연사 / 팀 소개) — 참고 목업 이미지 기준 그리드 레이아웃
   ========================================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 2, 2, 0.6);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.modal-overlay.is-open { opacity: 1; visibility: visible; }
.modal-card {
  background: var(--color-white);
  border-radius: var(--radius);
  max-width: 560px;
  width: 100%;
  max-height: 84vh;
  overflow-y: auto;
  padding: 40px;
  transform: scale(0.95);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.modal-card--speaker,
.modal-card--team { max-width: 720px; }
.modal-overlay.is-open .modal-card { transform: scale(1); opacity: 1; }

.modal-close {
  display: block;
  width: 100%;
  margin-top: 28px;
  text-align: center;
  font-size: 22px;
  color: var(--color-text-muted);
}

.modal-photo {
  /* radius 전면 제거의 예외: 인물 사진만 원형 유지 */
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-beige-shade);
}
.modal-photo img { width: 100%; height: 100%; object-fit: cover; }
.modal-photo img.img-fallback { opacity: 0; }

.modal-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.modal-tags span {
  display: inline-flex;
  padding: 5px 12px;
  border-radius: var(--radius);
  background: var(--color-gray-hover);
  color: var(--color-gold);
  font-size: 12px;
  font-weight: 700;
}

/* --- 연사 모달 ---
   19+20차: grid-template-areas의 행(row) 결합을 폐기 — 오른쪽 컬럼(세션정보~연사소개)이
   길어져도 왼쪽 컬럼(사진+이름+약력)은 완전히 독립된 세로 flex라 항상 사진 바로 아래 유지됨 */
.modal-body { display: flex; gap: 32px; align-items: flex-start; text-align: left; }
.modal-col-left { display: flex; flex-direction: column; width: 200px; flex-shrink: 0; }
.modal-col-right { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.modal-col-left .modal-photo { margin-bottom: 14px; }
.modal-name { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.modal-career { font-size: 13px; color: var(--color-text-muted); line-height: 1.7; }
/* 29차: 연사 모달 왼쪽 컬럼 — 영상/아티클 바로가기 링크 (videoUrl/articleUrl 있을 때만 렌더링).
   밑줄+삐침 디자인 폐기, 텍스트 뒤 원형 화살표 아이콘으로 단순화 (1차 버전 — 디테일 추후 조정) */
.modal-links { display: flex; flex-direction: column; gap: 10px; margin-top: 40px; }
.modal-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #B39E84;
  font-size: 12px;
  text-decoration: none;
}
.modal-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-size: 0.85em;
  line-height: 1;
  flex-shrink: 0;
}
.modal-session-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.modal-track { font-size: 13px; color: var(--color-text-muted); text-align: right; }
.modal-session-title { font-size: 19px; font-weight: 700; margin-bottom: 10px; }
.modal-session-subtitle { font-size: 14px; font-weight: 700; color: var(--color-gold); margin-bottom: 10px; }
.modal-session-desc { font-size: 14px; color: var(--color-text-dark); line-height: 1.8; margin-bottom: 10px; }
.modal-curriculum { margin-bottom: 10px; text-align: left; }
.modal-curriculum h4 { font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.modal-curriculum ul { display: flex; flex-direction: column; gap: 8px; }
.modal-curriculum li { font-size: 13px; color: var(--color-text-muted); padding-left: 14px; position: relative; }
.modal-curriculum li::before { content: '·'; position: absolute; left: 0; color: var(--color-gold); font-weight: 700; }
.modal-target { margin-bottom: 10px; font-size: 13px; color: var(--color-text-muted); text-align: left; }
.modal-target strong { color: var(--color-text-dark); margin-right: 6px; }
.modal-col-divider { border: none; height: 12px; margin: 4px 0; } /* 참고 이미지 기준: 선 없이 여백만 */
.modal-bio-title { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.modal-bio { font-size: 14px; color: var(--color-text-dark); line-height: 1.8; margin-bottom: 16px; }
.modal-bio:last-child { margin-bottom: 0; } /* 팀 모달: sec1/sec2 두 블록 사이만 여백, 마지막엔 불필요 */

/* ==========================================================================
   4.7 티켓 가격
   ========================================================================== */
/* 28차: 티켓 가격 섹션 100vh 풀페이지 + 세로 중앙 정렬 (항목이 많아 100vh를 넘으면 min-height라 자연스럽게 늘어남) */
.tickets { background: var(--color-beige); padding: 160px 0; min-height: 100vh; display: flex; align-items: center; }
.tickets-header { text-align: center; margin-bottom: 48px; }
.ticket-card {
  background: var(--color-white);
  border-radius: var(--radius);
  padding: 8px;
  margin-bottom: 24px;
}
.ticket-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 28px;
  border-bottom: 1px solid var(--color-gray-hover);
}
.ticket-row:last-child { border-bottom: none; }
.ticket-phase { display: flex; align-items: center; gap: 16px; }
.ticket-phase-label {
  font-weight: 700;
  font-size: 15px;
  min-width: 56px;
  white-space: nowrap; /* 22차: "실습 세션"이 항상 한 줄로 표시되도록 */
}
.ticket-status {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius);
  background: var(--color-gray-hover);
  color: var(--color-text-muted);
}
.ticket-status.is-open { background: rgba(179, 158, 132, 0.16); color: var(--color-gold); }
.ticket-price-block { text-align: right; display: flex; align-items: center; gap: 20px; }
.ticket-price-stack { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ticket-price { font-weight: 700; font-size: 18px; }
.ticket-discount { font-size: 12px; color: #E53935; font-weight: 700; }
.ticket-price del { color: var(--color-text-muted); font-weight: 400; margin-right: 6px; }
/* 12차: 비활성(SOLD OUT/오픈 예정) 행 — 뱃지·버튼 제거, 가격 자리에 회색 텍스트만 표시
   14차: 행 전체 기준 가운데 정렬 + 기존보다 한 톤 연한 회색으로 변경 */
.ticket-row.is-inactive { position: relative; }
.ticket-row.is-inactive .ticket-price-block { flex: 1; justify-content: flex-end; }
.ticket-status-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  font-weight: 700;
  color: #ADADAD;
}
.ticket-apply-btn {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: var(--color-black);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex: none;
  transition: transform 0.2s;
}
.ticket-apply-btn:hover { transform: scale(1.08); }
.ticket-apply-btn[disabled] { background: var(--color-beige-shade); pointer-events: none; }

.ticket-note {
  margin-top: 24px;
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.9;
}
/* 19+20차: 줄바꿈된 두 번째 줄이 "· " 다음 글자 위치에 맞춰 걸리도록 hanging indent 처리 */
.ticket-note-line { display: block; padding-left: 1em; text-indent: -1em; }
/* 23차: 12차의 줄바꿈 버전은 모바일 전용으로, 데스크탑은 원래대로 한 줄 표시 */
.ticket-note-line--mobile { display: none; }

/* ==========================================================================
   4.8 실습 세션 안내
   ========================================================================== */
/* 28차: 워크숍 안내 섹션 100vh 풀페이지 + 세로 중앙 정렬 */
.workshop-info { background: var(--color-white); padding: 160px 0; min-height: 100vh; display: flex; align-items: center; }
.workshop-card {
  text-align: center;
}
.workshop-card .section-title { margin-bottom: 20px; }
.workshop-card p.desc { color: var(--color-text-muted); margin-bottom: 32px; }
.workshop-highlight {
  background: rgba(179, 158, 132, 0.14);
  border: 1px solid var(--color-gold);
  border-radius: var(--radius);
  padding: 24px;
  text-align: left;
  margin-bottom: 32px;
}
.workshop-highlight h4 { font-weight: 700; margin-bottom: 12px; color: var(--color-text-dark); }
.workshop-highlight ul li {
  font-size: 14px;
  color: var(--color-text-dark);
  padding-left: 16px;
  position: relative;
  margin-bottom: 6px;
}
.workshop-highlight ul li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--color-gold);
  font-weight: 700;
}

/* ==========================================================================
   4.9 주최자 및 파트너사
   ========================================================================== */
.organizer-partners { background: var(--color-black); color: var(--color-white); padding: 160px 0; }
.organizer-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 720px;
  margin: 40px auto 0;
}
.organizer-item {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
}
.organizer-logo {
  /* 12차: 배경 박스 제거, 로고 자체 크기 확대(기존 120x48 대비 약 1.75배) */
  width: 210px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-weight: 700;
  font-size: 13px;
  color: var(--color-white);
  letter-spacing: 0.04em;
}
.organizer-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.organizer-copy strong { display: block; font-size: 16px; margin-bottom: 4px; }
.organizer-copy .organizer-tagline { font-size: 14px; font-weight: 700; color: var(--color-gold); margin: 0 0 8px; }
.organizer-copy span { font-size: 14px; color: rgba(255, 255, 255, 0.6); line-height: 1.7; }

/* 29차: 등급 타이틀을 별도 체계로 — 크고 굵은 반투명 타이포로 존재감을 주고,
   등급 간 구분은 타이틀 아래 작은 밑줄 대신 등급 사이 중앙 정렬된 옅은 구분선으로 대체 */
.partner-tier { margin-bottom: 160px; }
.partner-tier:not(:last-child) {
  position: relative;
  padding-bottom: 36px;
}
.partner-tier:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 70%;
  max-width: 780px;
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
}
.partner-tier:last-child { margin-bottom: 0; }
.partner-tier-name {
  font-size: 72px;
  font-weight: 800;
  color: rgba(179, 158, 132, 0.4);
  text-align: center;
  margin-bottom: 40px;
  letter-spacing: 0.04em;
  line-height: 1;
}
.partner-logo-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
/* 29차: 파트너사 5개 미만인 등급(다이아몬드/실버)은 그리드 대신 가운데 정렬 — 항목 아래
   설명문구가 있으면 함께 표시 (없으면 로고만) */
.partner-logo-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
}
.partner-item { width: 200px; }
.partner-item .partner-logo-cell { width: 100%; }
.partner-item-caption {
  margin-top: 16px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  line-height: 1.6;
}
.partner-logo-cell {
  aspect-ratio: 16/9;
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  filter: grayscale(1);
  opacity: 0.85;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  padding: 8px;
}
.partner-logo-cell:hover { opacity: 1; }
.partner-logo-cell img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ==========================================================================
   배경 영상 쇼케이스 — 주최자 소개/파트너사 소개 사이. 두 섹션 모두 블랙 배경이라
   자연스럽게 이어지도록 검정 배경 기반, 풀블리드 + object-fit:cover, 무채색+톤다운 오버레이
   ========================================================================== */
.video-showcase {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  height: 60vh;
  background: var(--color-black);
  overflow: hidden;
}
.video-showcase video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
}
.video-showcase::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(2, 2, 2, 0.4); /* 톤다운 오버레이 */
}

/* ==========================================================================
   4.10 오시는 길
   ========================================================================== */
/* 28차: 오시는 길 섹션 100vh 풀페이지 + 세로 중앙 정렬 */
.location { background: var(--color-white); padding: 160px 0; min-height: 100vh; display: flex; align-items: center; }
.location-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.location-copy .location-eyebrow { font-size: 14px; font-weight: 700; color: var(--color-text-muted); margin-bottom: 4px; }
.location-copy .section-title { margin-bottom: 16px; }
.location-copy .location-detail { color: var(--color-text-muted); margin-bottom: 28px; }
.location-copy .location-datetime { font-size: 15px; line-height: 1.8; }
.location-copy .location-address { font-size: 14px; line-height: 1.8; margin-top: 2px; }
.location-map {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-gray-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 13px;
}
.location-map img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   4.11 FAQ
   ========================================================================== */
.faq { background: var(--color-beige); padding: 160px 0; }
.faq-category { margin-bottom: 28px; }
.faq-category:last-child { margin-bottom: 0; }
.faq-category-title {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
  margin-bottom: 12px;
  padding-left: 4px;
}
.faq-item {
  background: var(--color-white);
  margin-bottom: 8px;
  overflow: hidden;
}
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
}
.faq-arrow { transition: transform 0.3s var(--ease-out); color: var(--color-gold); font-size: 13px; }
.faq-item.is-open .faq-arrow { transform: rotate(180deg); }
.faq-answer-wrap {
  height: 0;
  overflow: hidden;
  transition: height 0.3s var(--ease-out);
}
.faq-answer {
  padding: 0 20px 14px;
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* ==========================================================================
   4.12 푸터
   ========================================================================== */
.site-footer { background: var(--color-black); color: var(--color-white); padding: 64px 0 40px; }
.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 24px;
}
.footer-left { display: flex; align-items: center; gap: 40px; }
.footer-logo img { height: 44px; width: auto; }
.footer-contact { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.footer-contact span { display: flex; align-items: baseline; gap: 10px; color: var(--color-white); }
.footer-contact strong { color: var(--color-gold); font-weight: 700; min-width: 44px; }
.footer-icons { display: flex; align-items: center; gap: 8px; }
.footer-bottom {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

/* ==========================================================================
   반응형 — 5. 브레이크포인트
   Desktop 1200+, Tablet 768~1199, Mobile ~767
   ========================================================================== */
@media (max-width: 1199px) {
  .session-grid-b { grid-template-columns: repeat(2, 1fr); }
  .location-card { grid-template-columns: 1fr; }
}

/* 26차: 태블릿(768~1199) 전용 — 상단 메뉴를 모바일과 동일한 햄버거 방식으로, 타임테이블 TIME 칸 패딩 축소 */
@media (min-width: 768px) and (max-width: 1199px) {
  .main-nav { display: none; }
  .nav-toggle { display: flex; }

  /* "10:00-10:50" 같은 시간 표기가 칸 밖으로 넘치던 것 — 좌우 패딩을 줄여 칸 안에 들어오게 함 */
  .timetable-a-table td.time-cell,
  .timetable-a-table th:first-child {
    padding-left: 4px;
    padding-right: 4px;
  }
}

/* 26차: 사회자 행 이름·소속 2줄 표기 시 가운데 점 제거 (태블릿+모바일 공통) */
@media (max-width: 1199px) {
  .mc-cell .mc-dot { display: none; }
  .mc-cell .mc-break { display: inline; }
}

@media (max-width: 767px) {
  .header-inner { padding: 0 16px; }
  .logo-link .logo-desktop { display: none; }
  .logo-link .logo-mobile { display: block; height: 32px; width: auto; object-fit: contain; }
  .main-nav { display: none; }
  .header-actions { gap: 8px; }
  .header-cta { padding: 9px 0; font-size: 12px; }
  .icon-btn { width: 26px; height: 32px; }
  .icon-mask { width: 22px; height: 22px; } /* 17+18차: 버튼 크기 유지, 아이콘만 확대 */
  .nav-toggle { display: flex; }
  /* 뒤로가기 화살표는 서브페이지 전용(header-back)이므로 홈에서는 숨김 유지 */

  .hero-content { padding: 120px 20px 60px; }
  /* 12차: 모바일 전용 이미지(white-pa_middle_mobile.png), 화면 하단 중앙에 bottom:-20px로 살짝 걸치게 배치 */
  .hero-bg-symbol {
    top: auto;
    left: 50%;
    bottom: -20px;
    transform: translateX(-50%);
    width: min(127vw, 630px); /* 14차: 기존 대비 1.5배 확대 */
    animation-name: hero-watermark-fade-mobile; /* 26차: opacity 0.5→1로 변경, 잘 안보이던 것 개선 */
  }
  .countdown { gap: 8px; }
  .countdown-unit { min-width: 56px; padding: 10px 4px; }

  .session-intro { padding: 100px 0; }
  .video-showcase { height: 40vh; }
  .intro-br { display: none; } /* 모바일에서는 자연스러운 word-wrap(keep-all)에 맡김 */
  .intro-br.intro-br-keep { display: inline; } /* 단, 인트로 타이틀 줄바꿈은 모바일에서도 유지 (11차) */
  .timetable { padding: 100px 0; }

  .track-tabs { display: flex; }
  .timetable-a-scroll { overflow-x: visible; }
  .timetable-a-table { min-width: 0; }
  .timetable-a-table thead { display: none; }
  .timetable-a-table, .timetable-a-table tbody {
    display: block;
    width: 100%;
  }
  /* 22차 버그 수정: tr/td를 전부 display:block으로 쌓아서 시간·내용이 세로로 겹쳐 보이던 문제 —
     tr을 flex row로 바꿔 왼쪽 고정폭 시간 + 오른쪽 내용이 좌우로 나란히 배치되도록 복구
     21차: align-items를 stretch로 바꿔 좌측 시간 영역이 우측 콘텐츠 높이만큼 늘어나도록 정렬
     23차: margin으로 행 간격을 벌리던 방식(느슨해 보임)을 PC 클래식 테이블처럼 얇은 구분선 방식으로 전환 —
     margin 제거하고 각 행 하단에 옅은 회색 라인만 남겨 촘촘하게 정리
     이번 수정: PC용 th,td 규칙(border-right/bottom: 2px solid var(--color-grid-line), 반투명 흰색)이
     모바일에도 그대로 새어 들어와 있었음 — beige 배경(쉬는시간/점심시간) 위에 반투명 흰색이 겹쳐 비치면서
     옅은 금색처럼 보이고, tr의 구분선과 겹쳐 시간 칸 사이 경계도 흐릿해 보이던 원인.
     반투명 흰색(--color-grid-line)은 배경색 위에서 옅게 "밝아지기만" 해서 흰 바탕에서는 거의 안 보이고
     베이지 위에서는 비쳐서 따뜻한 톤으로 보이는 문제가 있어, 모바일은 검정 기반 반투명 라인(어느 배경 위에서든
     살짝 "어두워지기만" 해서 톤 안 바뀌고 항상 균일하게 보임)으로 통일. td 자체 테두리는 모바일에서 전부
     제거하고, 행(tr) 하나에만 이 구분선을 둠 */
  .timetable-a-table th, .timetable-a-table td { border: none; }
  .timetable-a-table tr {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid rgba(2, 2, 2, 0.1);
  }
  .timetable-a-table tr:last-child { border-bottom: none; }
  .timetable-a-table td[data-track] { display: none; flex: 1; min-width: 0; }
  .timetable-a-table td[data-track].is-active-track {
    /* 23차: 구분선 방식으로 바뀌며 카드 그림자는 불필요해져 제거 (배경색 차이로 구분) */
    display: block;
    background: var(--color-white);
  }
  .timetable-a-table td.time-cell {
    /* PC용 width:12%(td.time-cell) 규칙과 동일한 우선순위를 갖도록 td를 포함시켜 모바일 고정폭이 이기게 함
       21차: stretch로 늘어난 높이 안에서 시간 텍스트가 세로 중앙에 오도록 flex column + justify-content:center
       22차: 세션 행은 줄바꿈, 쉬는시간/점심시간은 한 줄로 나와 행마다 들쭉날쭉하던 것을 — 폭을 넓히고
       폰트를 살짝 줄여 모든 행에서 "10:00-10:50" 형식이 항상 한 줄로 나오도록 통일 */
    flex: none;
    width: 84px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: none;
    text-align: left;
    padding: 10px 8px;
    margin-bottom: 0;
    white-space: nowrap;
    font-size: 11px;
    line-height: 1.3;
  }
  /* 23차: 쉬는시간/점심시간 행 — 세션 카드보다 낮은 한 줄 높이로 다시 축소
     24+25차 재수정: align-items:center + gap:8px 때문에 (1) 시간칸(11px 폰트)과 내용칸(13px 폰트)의
     자연 높이가 달라 배경 박스 높이가 서로 어긋나 보이고 (2) 실제로 8px짜리 빈 간격이 생겨 PC보다
     둘 사이가 멀어 보이던 것 — stretch로 바꿔 높이를 강제로 맞추고 gap을 없애 얇은 경계선만 남김 */
  .timetable-a-table tr.break-row {
    padding-top: 0;
    align-items: stretch;
  }
  .timetable-a-table tr.break-row .time-cell { padding: 4px 8px; }
  .timetable-a-table tr.break-row .break-cell {
    width: auto;
    flex: 1;
    padding: 4px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* break-cell이 is-active-track(흰 배경) 규칙보다 우선하도록 동일 특이도로 재지정 —
     쉬는시간/점심시간 칸이 세션 카드와 같은 흰색이 아니라 원래 의도한 베이지색으로 나오게 함 */
  .timetable-a-table td.break-cell.is-active-track { background: var(--color-beige); }
  /* 27차: 모바일은 트랙 탭 전환 시 활성 컬럼에만 is-active-track(흰 배경)이 붙는데, mc-row의
     활성 컬럼도 이 규칙에 덮여 PC와 달리 사회자 행 배경(--color-beige-light)이 안 보이던 문제 —
     위와 동일한 방식으로 더 높은 특이도로 재지정 */
  .timetable-a-table .mc-row td[data-track].is-active-track { background: var(--color-beige-light); }
  /* 21차: "사회자" 행 — 어색한 그림자 제거, 시간/내용과 동일하게 stretch 정렬로 세로 중앙 정렬
     24+25차: 세로 중앙 정렬만 되어있고 가로 중앙 정렬이 빠져있었음 — text-align:center 추가 */
  .timetable-a-table .mc-row td.is-active-track {
    box-shadow: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  .timetable-a-table .mc-row .time-cell { text-align: center; }

  .timetable-b-controls { flex-direction: column; align-items: stretch; }
  /* 19+20차: 전체/트랙A/워크숍A/워크숍B 4개가 모바일 한 줄에 들어가도록 패딩/폰트 축소 + 가운데 정렬
     22차: 클래식 뷰 트랙 탭에는 이 모바일 축소 규칙이 누락돼 있어 필터형과 사이즈가 달라 보였음 — 동일하게 적용 */
  .track-filter { justify-content: center; flex-wrap: nowrap; gap: 6px; }
  .track-filter button, .track-tabs button { padding: 7px 10px; font-size: 12px; white-space: nowrap; }
  .session-grid-b { grid-template-columns: 1fr; }

  .people-section { padding: 100px 0; }
  .people-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
  #teamGrid { grid-template-columns: repeat(2, 1fr); justify-content: center; gap: 16px 12px; }

  .modal-card { padding: 28px; max-height: 90vh; }

  /* 모달 3종: 모바일 풀스크린 시트형 — 세로 1단 스택, 참고 모바일 목업 기준 */
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal-card { max-width: 100%; max-height: 92vh; border-radius: 0; }

  /* 19+20차: 연사 모달도 flex 2컬럼 구조로 바뀜에 따라 모바일은 세로 1단으로 단순화 —
     사진+이름+약력을 가운데 정렬된 프로필 헤더로, 그 아래 세션 정보~연사소개를 이어서 표시 */
  .modal-body { flex-direction: column; gap: 20px; }
  .modal-col-left { width: 100%; align-items: center; text-align: center; }
  .modal-col-left .modal-photo { width: 120px; margin: 0 auto 14px; }
  .modal-col-right { width: 100%; }
  .modal-session-title, .modal-session-subtitle, .modal-session-desc { text-align: center; }
  .modal-tags { justify-content: center; }

  /* 21차: 연사 모달 모바일 콘텐츠 순서 변경 — 뱃지/트랙 → 사진 → 이름/약력 → 제목~태그 → 연사소개
     순서로 보이도록, 좌/우 컬럼 wrapper를 display:contents로 풀어 모든 콘텐츠를 modal-body의
     직속 flex 자식으로 만들고 order로 재배치 (PC 2컬럼 구조는 이 미디어쿼리 밖이라 영향 없음) */
  .modal-speaker .modal-body { align-items: stretch; gap: 0; }
  .modal-speaker .modal-col-left,
  .modal-speaker .modal-col-right { display: contents; }
  .modal-speaker .modal-session-header { order: 1; margin-bottom: 20px; }
  .modal-speaker .modal-col-left .modal-photo { order: 2; }
  .modal-speaker .modal-name { order: 3; text-align: center; }
  .modal-speaker .modal-career { order: 4; text-align: center; margin-bottom: 20px; }
  /* 29차: 모바일 — 링크 1개면 가운데 정렬, 2개면 가로 나열되도록 항상 row+justify-content:center
     (아이템이 1개든 2개든 이 조합이면 결과적으로 둘 다 만족함). modal-career와 order를 맞춰
     DOM 순서상 그 아래에 표시되고, 다음 콘텐츠(세션 제목)와의 간격은 30px로 별도 지정 */
  .modal-speaker .modal-links { order: 4; flex-direction: row; justify-content: center; gap: 16px; margin-top: 0; margin-bottom: 30px; }
  .modal-speaker .modal-session-title { order: 5; }
  .modal-speaker .modal-session-subtitle { order: 6; }
  .modal-speaker .modal-session-desc { order: 7; }
  .modal-speaker .modal-curriculum { order: 8; }
  .modal-speaker .modal-target { order: 9; }
  .modal-speaker .modal-tags { order: 10; }
  .modal-speaker .modal-col-divider { order: 11; }
  .modal-speaker .modal-bio-title { order: 12; }
  .modal-speaker .modal-bio { order: 13; }

  .tickets, .workshop-info, .location, .faq, .organizer-partners { padding: 100px 0; }
  /* 22차: 모바일 티켓 섹션 콤팩트하게 — 패딩/간격/폰트 축소 */
  .tickets-header { margin-bottom: 28px; }
  .ticket-card { margin-bottom: 16px; }
  .ticket-row { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 16px; }
  .ticket-phase { gap: 10px; }
  .ticket-phase-label { font-size: 14px; min-width: 40px; }
  .ticket-status, .ticket-status-text { font-size: 11px; }
  /* 19+20차: 가격+버튼이 좌우로 벌어져 있던 것을 화살표 버튼 옆에 붙여 우측 정렬 그룹으로 통일 */
  .ticket-price-block { width: 100%; justify-content: flex-end; gap: 12px; }
  .ticket-price-stack { gap: 2px; }
  .ticket-price { font-size: 16px; }
  .ticket-discount { font-size: 11px; }
  .ticket-apply-btn { width: 36px; height: 36px; font-size: 15px; }
  .ticket-note { margin-top: 16px; }
  /* 24+25차: "실습 세션" 행은 콘텐츠가 짧아 굳이 2행으로 쌓일 필요가 없는데, 위의 공통 column 규칙 때문에
     라벨+뱃지 / 가격+버튼이 두 줄로 나뉘어 보이던 문제 — 1차~4차와 달리 가로 한 줄(row)로 유지 */
  .ticket-row--session { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .ticket-row--session .ticket-price-block { width: auto; flex: 1; }
  /* 23차: 모바일에서는 줄바꿈 버전으로 교체 */
  .ticket-note-line--desktop { display: none; }
  .ticket-note-line--mobile { display: block; }

  .workshop-card { padding: 32px 8px; }
  .workshop-highlight { padding: 16px; }

  .organizer-item { flex-direction: column; text-align: center; }
  .partner-logo-grid { grid-template-columns: repeat(2, 1fr); }
  .partner-item { width: 130px; }
  .partner-tier-name { font-size: 42px; margin-bottom: 28px; }
  .partner-tier { margin-bottom: 108px; }
  .partner-tier:not(:last-child) { padding-bottom: 24px; }
  .partner-tier:not(:last-child)::after { width: 85%; }
  .partner-logo-row { gap: 20px; }

  .footer-top { flex-direction: column; align-items: center; text-align: center; gap: 20px; }
  .footer-left { flex-direction: column; gap: 16px; }
  .footer-contact span { justify-content: center; }
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; }
}