/* ============================================================
   sessions.css — 세션 모집현황 카드 (White & Gold)
   ============================================================ */

:root {
  --sc-gold:     #C9A35B;
  --sc-gold-lt:  #E8C97A;
  --sc-gold-bg:  #FBF5E9;
  --sc-gold-mid: #F0E0B8;
  --sc-black:    #111111;
  --sc-gray:     #555555;
  --sc-border:   rgba(201, 163, 91, 0.35);
  --sc-dur:      0.22s;
  --sc-ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ── 탭 래퍼 ─────────────────────────────────────────────── */
.st-tabs-wrap {
  margin-bottom: 1.75rem;
}

.st-tabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.st-tabs::-webkit-scrollbar { display: none; }

/* ── 탭 버튼 ─────────────────────────────────────────────── */
.st-tab {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.6rem 1.1rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #999;
  background: #fff;
  border: 1px solid rgba(201,163,91,0.3);
  cursor: pointer;
  transition: color var(--sc-dur) var(--sc-ease),
              border-color var(--sc-dur) var(--sc-ease),
              background var(--sc-dur) var(--sc-ease);
}

.st-tab-day {
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  opacity: 0.7;
}

.st-tab:hover:not(.is-active) {
  color: var(--sc-gold);
  border-color: var(--sc-gold);
}

.st-tab.is-active {
  color: #fff;
  background: var(--sc-gold);
  border-color: var(--sc-gold);
}

/* ── 카드 래퍼 & 트랜지션 ────────────────────────────────── */
#session-card {
  transition: opacity var(--sc-dur) var(--sc-ease),
              transform var(--sc-dur) var(--sc-ease);
}

#session-card.st-fading {
  opacity: 0;
  transform: translateY(10px);
}

/* ── 카드 외곽 ───────────────────────────────────────────── */
.sc-premium {
  position: relative;
  background: #fff;
  border: 1.5px solid var(--sc-gold);
  padding: 2.25rem 2rem;
  max-width: 700px;
  margin: 0 auto;
}

.sc-premium::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(201,163,91,0.2);
  pointer-events: none;
}

/* ── 코너 장식 ───────────────────────────────────────────── */
.sc-corner {
  position: absolute;
  width: 13px;
  height: 13px;
  border-style: solid;
  border-color: var(--sc-gold);
  border-width: 0;
  pointer-events: none;
}

.sc-corner--tl { top: 8px;    left: 8px;   border-top-width: 2px;    border-left-width: 2px; }
.sc-corner--tr { top: 8px;    right: 8px;  border-top-width: 2px;    border-right-width: 2px; }
.sc-corner--bl { bottom: 8px; left: 8px;   border-bottom-width: 2px; border-left-width: 2px; }
.sc-corner--br { bottom: 8px; right: 8px;  border-bottom-width: 2px; border-right-width: 2px; }

/* ── 카드 바디 ───────────────────────────────────────────── */
.sc-body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ── 헤더 ────────────────────────────────────────────────── */
.sc-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.sc-brand-name {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sc-gold);
}

.sc-gold-line {
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--sc-gold), transparent);
  margin: 0.3rem auto;
}

.sc-datetime {
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--sc-black);
}

.sc-location {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--sc-gray);
}

.sc-status-text {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-top: 0.2rem;
}

/* 상태별 색상 */
.sc-status--recruiting  .sc-status-text { color: var(--sc-gold); }
.sc-status--almost_full .sc-status-text { color: #D4813A; }
.sc-status--full        .sc-status-text { color: #888; }
.sc-status--closed      .sc-status-text { color: #bbb; }
.sc-status--soon        .sc-status-text { color: rgba(201,163,91,0.55); }

/* ── 컬럼 레이아웃 ───────────────────────────────────────── */
.sc-columns {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0 1.5rem;
  align-items: start;
}

.sc-col-sep {
  background: linear-gradient(to bottom, transparent, var(--sc-gold), transparent);
  opacity: 0.4;
  align-self: stretch;
}

/* ── 컬럼 내부 ───────────────────────────────────────────── */
.sc-col {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* MEN / WOMEN 타이틀 — 골드 배경 */
.sc-col-title {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  background: var(--sc-gold);
  padding: 0.45rem 0.75rem;
  margin-bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sc-col-max {
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  opacity: 0.75;
}

/* 직업/나이 라벨 행 — 연한 골드 배경 */
.sc-col-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sc-black);
  background: var(--sc-gold-mid);
  padding: 0.3rem 0.75rem;
  border-bottom: 1px solid var(--sc-border);
}

/* ── 참가자 목록 ─────────────────────────────────────────── */
.sc-participants {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
}

.sc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.45rem 0.75rem;
  border-bottom: 1px solid rgba(201,163,91,0.15);
  transition: background var(--sc-dur) var(--sc-ease);
}

.sc-row:last-child { border-bottom: none; }

.sc-row:hover { background: var(--sc-gold-bg); }

.sc-occ {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--sc-black);
  letter-spacing: 0.02em;
}

.sc-age {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--sc-gray);
  font-variant-numeric: tabular-nums;
}

/* 빈 상태 */
.sc-row--empty { justify-content: flex-start; padding: 0.65rem 0.75rem; }

.sc-occ-empty {
  font-size: 0.7rem;
  color: #bbb;
  letter-spacing: 0.05em;
  font-style: italic;
}

/* ── 잔여석 행 ───────────────────────────────────────────── */
.sc-total {
  padding: 0.5rem 0.75rem;
  background: var(--sc-gold);
  text-align: right;
}

.sc-seat-remain {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #fff;
}

.sc-seat-closed {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

/* ── 빈 상태 (SOON) ──────────────────────────────────────── */
.sc-empty-state {
  text-align: center;
  padding: 2rem 0 1rem;
}

.sc-empty-state p {
  font-size: 0.78rem;
  color: #aaa;
  letter-spacing: 0.06em;
  line-height: 1.85;
}

.sc-empty-state p:first-child {
  font-size: 0.82rem;
  color: var(--sc-gold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}

/* ── 푸터 ────────────────────────────────────────────────── */
.sc-footer {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.sc-footer-text {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(201,163,91,0.5);
}

/* ── 모바일 ──────────────────────────────────────────────── */
@media (max-width: 599px) {
  .sc-premium { padding: 1.75rem 1.25rem; }

  .sc-columns {
    grid-template-columns: 1fr;
    gap: 1.25rem 0;
  }

  .sc-col-sep { display: none; }

  .sc-col:last-child { margin-top: 0.25rem; }

  .sc-corner { width: 10px; height: 10px; }
}

@media (max-width: 399px) {
  .sc-premium { padding: 1.5rem 1rem; }
  .sc-premium::before { inset: 3px; }
}