/* KSVF 2026 — Timetable
 *
 * 구조:
 *   .tt-controls  → 일자 탭 + 카테고리 필터
 *   .tt-grid      → 좌측 시간축 + 룸 컬럼 N개
 *   .tt-card      → 세션 카드 (grid-row span으로 길이 조절)
 *
 * 요구사항 반영:
 *   - 13:00 시작 (그 위 시간 미렌더)
 *   - 30분당 카드 높이 ↑ (--tt-slot-h = 80px)
 *   - 카드 클릭→상세 (TODO: 어드민 데이터 연결)
 *   - 카테고리 필터 (스페셜프로그램·세션·전시·행사 in 행사)
 */

.schedule { padding-bottom: 80px; }

/* ============================================================
   상단 컨트롤 — 일자 탭 + 카테고리 필터
   ============================================================ */
.tt-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.day-tabs {
  display: inline-flex;
  padding: 4px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-pill);
}
.day-tab {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 18px;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-on-dark-2);
  cursor: pointer;
  transition: background .15s, color .15s;
  border: none;
  background: transparent;
}
.day-tab .day-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-on-dark-3);
  letter-spacing: .04em;
}
.day-tab:hover { color: var(--ink-on-dark-0); }
.day-tab.active {
  background: var(--ink-on-dark-0);
  color: var(--bg-0);
}
.day-tab.active .day-num { color: rgba(5,10,31,.6); }

.tt-legend {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}
.tt-cat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.03);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-on-dark-2);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  text-transform: uppercase;
}
.tt-cat::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}
.tt-cat:hover { color: var(--ink-on-dark-0); border-color: rgba(255,255,255,.2); }
.tt-cat.active { color: var(--bg-0); border-color: transparent; }

.tt-cat[data-cat="all"]            { color: var(--ink-on-dark-1); }
.tt-cat[data-cat="all"]::before    { background: var(--ink-on-dark-1); box-shadow: none; }
.tt-cat[data-cat="all"].active     { background: var(--ink-on-dark-0); color: var(--bg-0); }

.tt-cat[data-cat="special"]        { color: var(--accent-mint); }
.tt-cat[data-cat="special"].active { background: var(--accent-mint); }

.tt-cat[data-cat="session"]        { color: var(--accent-cyan); }
.tt-cat[data-cat="session"].active { background: var(--accent-cyan); }

.tt-cat[data-cat="exhibition"]     { color: var(--accent-pink); }
.tt-cat[data-cat="exhibition"].active { background: var(--accent-pink); }

.tt-cat[data-cat="event"]          { color: var(--accent-violet); }
.tt-cat[data-cat="event"].active   { background: var(--accent-violet); }

/* ============================================================
   타임테이블 그리드
   ============================================================ */
.tt-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: var(--r-md);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.15);
}

.tt-grid {
  --tt-slot-h: 80px;       /* 30분당 카드 높이 — 기본 56px → 80px로 확장 */
  --tt-time-w: 84px;       /* 시간축 컬럼 너비 */

  display: grid;
  grid-template-columns: var(--tt-time-w) repeat(var(--tt-rooms, 5), minmax(180px, 1fr));
  /* row 1 = 룸 헤더, 이후 row N = 30분 슬롯 */
  grid-auto-rows: var(--tt-slot-h);
  min-width: 1000px;
}

/* 룸 헤더 (row 1) */
.tt-room-head {
  grid-row: 1;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.1);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-on-dark-0);
  letter-spacing: -.005em;
  text-align: center;
  position: sticky; top: 0;
  z-index: 5;
}
.tt-room-head .room-cap {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-on-dark-3);
  letter-spacing: .08em;
}
.tt-room-head.timecorner { background: rgba(0,0,0,.2); }

/* 시간 레이블 (col 1) */
.tt-time {
  grid-column: 1;
  padding: 8px 14px 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-on-dark-3);
  letter-spacing: .04em;
  border-top: 1px dashed rgba(255,255,255,.06);
  background: rgba(0,0,0,.2);
}

/* 룸 셀 (빈 배경) — 30분당 1셀 */
.tt-cell {
  background: transparent;
  border-top: 1px dashed rgba(255,255,255,.04);
  border-left: 1px solid rgba(255,255,255,.05);
}

/* 정각(00분)은 진한 라인 */
.tt-time.hour,
.tt-cell.hour { border-top-color: rgba(255,255,255,.12); border-top-style: solid; }

/* ============================================================
   세션 카드
   ============================================================ */
.tt-card {
  position: relative;
  margin: 4px 6px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.04);
  border-left: 3px solid;
  cursor: pointer;
  transition: transform .15s, background .15s, box-shadow .15s;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
  text-decoration: none;
}
.tt-card:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,.08);
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}
.tt-card .tc-time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-on-dark-3);
  letter-spacing: .04em;
}
.tt-card .tc-title {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-on-dark-0);
  line-height: 1.35;
  letter-spacing: -.005em;
  /* 행사명이 길어도 잘 보이도록 -webkit-line-clamp */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tt-card .tc-speaker {
  margin-top: auto;
  font-size: 11px;
  color: var(--ink-on-dark-2);
}

/* 카테고리별 색상 */
.tt-card.s-special   { border-color: var(--accent-mint);   background: rgba(125,240,160,.08); }
.tt-card.s-session   { border-color: var(--accent-cyan);   background: rgba(62,224,216,.08); }
.tt-card.s-exhibition{ border-color: var(--accent-pink);   background: rgba(255,122,217,.08); }
.tt-card.s-event     { border-color: var(--accent-violet); background: rgba(157,123,255,.08); }

.tt-card.s-special:hover    { background: rgba(125,240,160,.16); }
.tt-card.s-session:hover    { background: rgba(62,224,216,.16); }
.tt-card.s-exhibition:hover { background: rgba(255,122,217,.16); }
.tt-card.s-event:hover      { background: rgba(157,123,255,.16); }

/* 필터링 - 비매칭 카드는 dim */
.tt-grid.filtered .tt-card { opacity: .25; filter: saturate(.4); }
.tt-grid.filtered .tt-card.match { opacity: 1; filter: none; }

/* 일자 분기 — JS가 .tt-grid[data-active-day] 토글 */
.tt-grid[data-active-day="1"] .tt-card[data-day="2"] { display: none; }
.tt-grid[data-active-day="2"] .tt-card[data-day="1"] { display: none; }

/* Empty state — 어드민 미입력 시 */
.tt-empty-state {
  display: block;
  margin: 40px auto;
  padding: 44px 24px;
  text-align: center;
  border: 1px dashed rgba(255,255,255,.15);
  border-radius: var(--r-md);
  color: var(--ink-on-dark-2);
  background: rgba(255,255,255,.02);
  font-size: 15px;
  line-height: 1.6;
}
.tt-empty-state small {
  display: block;
  margin-top: 10px;
  color: var(--ink-on-dark-3);
  font-size: 12px;
}

/* TEMP 라벨 */
.tt-temp-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: rgba(255,209,102,.1);
  border: 1px solid rgba(255,209,102,.3);
  color: var(--accent-yellow);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
}
.tt-temp-note::before {
  content: '◉';
  font-size: 10px;
}

@media (max-width: 960px) {
  .tt-controls { flex-direction: column; align-items: flex-start; }
  .tt-grid { --tt-slot-h: 72px; }
}

/* ============================================================
   svp_mobile 전용 — 폰 화면 반응형 보강 (KSVF 2026)
   (스케줄표 섹션은 현재 index.jsp 에서 주석 처리됨 — 재활성화 대비)
   ============================================================ */
@media (max-width: 640px) {
  .tt-grid { --tt-slot-h: 64px; --tt-time-w: 60px; min-width: 760px; }
  .tt-controls { gap: var(--sp-3); }
  .tt-temp-note { font-size: 10px; }
}