/* ============================================================
   평택시문화재단 — MAIN STYLESHEET
   ============================================================ */

/* ==================== 프로젝트 고유 변수 ==================== */
/*
  DS tokens.css의 토큰을 직접 사용합니다.
  여기엔 DS에 없는 프로젝트 고유 값만 선언합니다.
*/
:root {
  /* ---- 브랜드 & 포인트 (DS에 없는 프로젝트 고유색만) ---- */
  --color-green-dark:   #1a8400;           /* 축제 태그 진초록 */
  --color-yellow-dark:  #d88500;           /* 전시 태그 진노랑 */

  /* ---- 섹션별 배경색 (메인 페이지 전용) ---- */
  --color-nav-bg:       #343a48;           /* #section-quicklinks 배경 */
  --color-cal-bg:       #252525;           /* #section-calendar 배경 */
  --color-card-bg:      #f1f4f9;           /* #section-featured 배경 */
  --color-bg-lighter:   #fbfbfb;           /* #section-venue 좌측 패널 */
  --color-border:       #3a3a3a;           /* 공연장 아코디언 구분선 */

  /* ---- 레이아웃 ---- */
  --page-width:    1920px;
  --content-width: min(1860px, calc(100% - 60px));

  /* ---- 트랜지션 ---- */
  --ease-base:   0.3s ease;
  --ease-smooth: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==================== Font Weight Utilities ==================== */
.fw-bold       { font-weight: 700; }
.fw-semibold   { font-weight: 600; }
.fw-medium     { font-weight: 500; }
.fw-regular    { font-weight: 400; }
.fw-light      { font-weight: 300; }
.fw-extralight { font-weight: 200; }

/* ==================== 접근성 유틸리티 ==================== */

/* 스크린리더 전용 숨김 텍스트 */
.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 건너뛰기 링크 */
.skip-nav {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10000;
}
.skip-nav a {
  position: absolute;
  top: -100px;
  left: 0;
  padding: 8px 16px;
  background: var(--ds-color-gray-90);
  color: var(--ds-color-gray-0);
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}
.skip-nav a:focus {
  top: 0;
}

/* 플로팅 버튼 — 숨김 상태에서 Tab 제외 */
.floating-btns {
  visibility: hidden;
}
.floating-btns.is-visible {
  visibility: visible;
}

/* 카드 오버레이 링크 (카드 전체 클릭 영역) */
.event-card-link {
  position: absolute;
  inset: 0;
  z-index: 4;
}
.event-card-link:focus-visible {
  outline-offset: -2px;
  border-radius: inherit;
}

/* 뉴스 아이템 링크 */
a.news-item {
  color: inherit;
  text-decoration: none;
}

/* 찾아가는 연주회 제목·날짜 링크 */
a.arts-company-bar__info {
  color: inherit;
  text-decoration: none;
}
a.arts-company-bar__info:focus-visible {
  outline-offset: 2px;
  border-radius: var(--ds-number-2);
}

/* 경영공시 배너 링크 */
a.marquee-banner {
  color: inherit;
  text-decoration: none;
}

/* ==================== 프로젝트 추가 리셋 (reset.css에 없는 것만) ==================== */
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
address { font-style: normal; }

/* ==================== MAIN LAYOUT ==================== */
.site-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 0;
  background: var(--ds-color-gray-0);
}


/* 헤더 CSS → resources/css/header.css로 분리됨 */


/* ============================================================
   주요 공연·전시 하이라이트  #section-featured
   좌측 소개 패널 + 우측 카드 슬라이더 + 하단 컨트롤
   ============================================================ */
.featured-section {
  position: relative;
  width: var(--content-width);
  height: clamp(660px, 46.4vw, 890px);
  background: var(--color-card-bg);
  border-radius: var(--ds-number-10);                    /* 20px */
  overflow: hidden;
  flex-shrink: 0;
}

/* Large background marquee text */
.featured-bg-marquee {
  position: absolute;
  top: clamp(490px, 34.4vw, 660px);
  left: 0;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  z-index: 0;
}
.featured-bg-marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 50s linear infinite;
  will-change: transform;
}
.featured-bg-text {
  display: inline-block;
  white-space: nowrap;
  font-weight: 900;
  font-size: clamp(200px, 16vw, 307.2px);
  letter-spacing: clamp(-10px, -0.8vw, -15.36px);
  color: rgba(17,17,17,0.05);
  line-height: 0.8;
  flex-shrink: 0;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Top info bar (소개 텍스트 + 버튼) */
.featured-info {
  position: absolute;
  left: clamp(44px, 3.125vw, 60px);
  right: clamp(44px, 3.125vw, 60px);
  top: clamp(51px, 3.59vw, 69px);
  z-index: 2;
}
.featured-info-content {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(32px, 3.07vw, 59px);
}
.featured-subtitle {
  font-weight: var(--ds-typo-font-weight-bold);          /* 700 */
  font-size: clamp(16px, 1.04vw, 20px);
  color: var(--ds-color-brand-blue);
  line-height: 1;
  margin-bottom: var(--ds-number-6);                     /* 12px */
}
.featured-title {
  font-size: clamp(48px, 3.75vw, 72px);
  font-weight: 300;                                      /* light 기본값 */
  letter-spacing: -1px;
  line-height: 1;
  white-space: nowrap;
  color: var(--ds-color-gray-90);
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-number-4);                               /* 8px */
  background: var(--ds-color-gray-90);
  color: var(--ds-color-gray-0);
  font-weight: var(--ds-typo-font-weight-bold);          /* 700 */
  font-size: clamp(14px, 0.83vw, 16px);
  letter-spacing: -0.152px;
  border-radius: var(--ds-radius-max);                   /* pill */
  padding: 0 23px;
  height: 45px;
  white-space: nowrap;
  transition: background var(--ease-base), transform var(--ease-base);
}
.btn-primary:hover { background: var(--ds-color-gray-70); transform: translateY(-1px); }
.btn-primary--hidden { display: none; }

/* Cards area */
.featured-cards-wrapper {
  position: absolute;
  left: clamp(44px, 3.125vw, 60px);
  top: clamp(176px, 12.34vw, 237px);
  right: 0;
  overflow: hidden;
  z-index: 2;
}
.featured-cards {
  display: flex;
  align-items: flex-start;
  gap: clamp(20px, 2.08vw, 40px);
  will-change: transform;
}

/* ---- Event Card (무한 슬라이더) ---- */
/* 기본 = 비활성 상태 (clamp 스케일링, 블랙 40% 오버레이, 텍스트 숨김) */
.event-card {
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  cursor: pointer;
  border-radius: clamp(9px, 0.64vw, 12px);
  width: clamp(217px, 15.26vw, 293px);
  height: clamp(305px, 21.46vw, 412px);
  box-shadow: 0 15px 31px rgba(0,0,0,0.1);
  transition: width 0.3s ease, height 0.3s ease,
              border-radius var(--ease-smooth), box-shadow var(--ease-smooth);
}
/* 활성 = 대형 카드 (clamp 스케일링, 그라데이션 + 텍스트 노출) */
.event-card--active {
  width: clamp(296px, 20.83vw, 400px);
  height: clamp(437px, 30.73vw, 590px);
  border-radius: clamp(13px, 0.96vw, 18px);
  box-shadow: 0 23px 46px rgba(0,0,0,0.1);
}

.event-card-image {
  position: absolute;
  inset: 0;
}
.event-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 하단 그라데이션 — 활성 카드에서만 표시 */
.event-card-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: clamp(199px, 14vw, 269px);
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--ease-smooth);
  z-index: 1;
}
.event-card--active .event-card-gradient {
  opacity: 1;
}
/* 비활성 카드 hover 시 그라데이션 노출 */
.event-card:not(.event-card--active):hover .event-card-gradient {
  opacity: 1;
}

/* 어두운 오버레이 — 비활성 카드에서만 표시 (40% 블랙) */
.event-card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  transition: opacity var(--ease-smooth);
  z-index: 1;
}
.event-card--active .event-card-overlay {
  opacity: 0;
  pointer-events: none;
}
/* 비활성 카드 hover 시 오버레이 약화 */
.event-card:not(.event-card--active):hover .event-card-overlay {
  opacity: 0.15;
}

/* 카드 정보 — 활성 카드에서만 슬라이드업 등장 */
.event-card-info {
  position: absolute;
  bottom: clamp(27px, 1.92vw, 37px);
  left: clamp(27px, 1.92vw, 37px);
  right: var(--ds-number-10);                            /* 20px */
  z-index: 2;
  opacity: 0;
  transform: translateY(var(--ds-number-6));             /* 12px */
  transition: opacity var(--ease-smooth), transform var(--ease-smooth);
}
.event-card--active .event-card-info {
  opacity: 1;
  transform: translateY(0);
}
/* 비활성 카드 hover — 타이틀만 노출 (태그·메타 숨김) */
.event-card:not(.event-card--active):hover .event-card-info {
  opacity: 1;
  transform: translateY(0);
}
.event-card:not(.event-card--active) .event-tag,
.event-card:not(.event-card--active) .event-card-meta {
  display: none;
}
/* 비활성 hover 시 타이틀 축소 */
.event-card:not(.event-card--active) .event-card-title {
  font-size: clamp(18px, 1.5vw, 28px);
}

.event-tag {
  display: inline-block;
  border-radius: var(--ds-radius-max);                   /* pill */
  padding: 5px var(--ds-number-8);                      /* 5px 16px */
  font-weight: var(--ds-typo-font-weight-bold);          /* 700 */
  font-size: clamp(12px, 0.82vw, 16px);
  margin-bottom: var(--ds-number-7);                     /* 14px */
}
.event-tag--white {
  background: var(--ds-color-gray-0);
  color: var(--ds-color-brand-orange);
}

.event-card-title {
  font-weight: var(--ds-typo-font-weight-bold);          /* 700 */
  font-size: clamp(32px, 2.19vw, 42px);
  color: var(--ds-color-gray-0);
  line-height: 1.2;
  margin-bottom: var(--ds-number-3);                     /* 6px */
}

.event-card-meta {
  font-size: clamp(14px, 0.96vw, 18px);
  color: var(--ds-color-gray-0);
  line-height: 1.5;
}

/* Slider controls */
.featured-controls {
  position: absolute;
  left: clamp(370px, 25.99vw, 499px);
  top: clamp(569px, 40vw, 768px);
  display: flex;
  align-items: center;
  gap: var(--ds-number-6);                               /* 12px */
  z-index: 3;
}
.slider-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ds-color-gray-0);
  border-radius: var(--ds-radius-max);                   /* pill */
  padding: clamp(14px, 1.04vw, 20px);
  transition: background var(--ease-base), transform var(--ease-base);
}
.slider-btn:hover { background: var(--ds-light-color-background-gray-subtler); transform: scale(1.05); }
.slider-btn img { width: clamp(18px, 1.25vw, 24px); height: clamp(18px, 1.25vw, 24px); display: block; }

/* ============================================================
   반응형 — #section-featured  Tablet (768px ~ 1199px)
   PC 레이아웃을 그대로 사용 — desktop clamp의 최소값이 적용됨.
   제목 nowrap 폭 넘침만 방지.
   ============================================================ */
@media (max-width: 1199px) {
  .featured-title { font-size: clamp(40px, 4.6vw, 48px); }
}

/* ============================================================
   반응형 — #section-featured  Mobile (~767px)
   flex column: 타이틀+버튼 가로배치 → 카드 → 컨트롤
   ============================================================ */
@media (max-width: 767px) {
  .featured-section {
    position: relative;
    width: calc(100% - 32px);
    height: auto;
    border-radius: 16px;
    padding: 32px 0 24px;
    overflow: hidden;
  }

  /* 정보 바 → 상단으로 (static) */
  .featured-info {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
    width: auto;
    padding: 0 24px;
    margin-bottom: 24px;
  }
  .featured-info-content {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
  }
  .featured-subtitle { font-size: 12px; margin-bottom: 6px; }
  .featured-title { font-size: 24px; line-height: 1.15; white-space: normal; }
  .btn-primary {
    font-size: 13px;
    height: 36px;
    padding: 0 14px;
    flex-shrink: 0;
  }

  /* 카드 영역 → 상대 배치, 높이 고정 (활성 카드 기준) */
  .featured-cards-wrapper {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    right: auto;
    margin-bottom: 20px;
    height: 320px;                                           /* 활성 카드 높이 고정 */
    overflow: hidden;
  }
  /* 캐러셀 — 활성 카드(220px)를 화면 정중앙에, 좌우로 이웃 카드가 살짝 보이게 */
  .featured-cards {
    gap: 16px;
    align-items: center;
    /* 좌측 peek 카드(180) + gap(16) + 활성 절반(110) 만큼 당겨 활성 카드를 중앙에 */
    margin-left: calc(50% - 306px);
  }
  /* 마지막 카드(직전 활성 카드)를 활성 카드 왼쪽으로 — 좌측 peek 생성 */
  .featured-cards .event-card:last-child {
    order: -1;
  }
  .event-card { width: 180px; height: 260px; border-radius: 10px; box-shadow: none; }
  .event-card--active { width: 220px; height: 320px; border-radius: 12px; box-shadow: none; }

  /* 카드 내부 텍스트 */
  .event-card-info { bottom: 16px; left: 16px; right: 12px; }
  .event-card-title { font-size: 18px; margin-bottom: 4px; }
  .event-card-meta { font-size: 12px; }
  .event-tag { font-size: 11px; padding: 4px 10px; margin-bottom: 8px; border-radius: 20px; }
  .event-card-gradient { height: 140px; }

  /* 컨트롤 → 하단 가운데 정렬 (모바일은 버튼도 작게) */
  .featured-controls {
    position: relative;
    left: auto;
    bottom: auto;
    top: auto;
    justify-content: center;
    margin-top: var(--ds-number-6);                      /* 12px */
    gap: 8px;
  }
  .slider-btn { padding: 9px; }
  .slider-btn img { width: 16px; height: 16px; }

  /* 마키 텍스트 */
  .featured-bg-marquee {
    top: auto;
    bottom: -10px;
  }
  .featured-bg-text {
    font-size: 100px;
    letter-spacing: -4px;
    line-height: 90px;
  }
}


/* ============================================================
   공연장 안내  #section-venue
   좌측 아코디언 + 우측 이미지 크로스페이드, sticky 스크롤
   ============================================================ */
.venue-sticky-wrapper {
  width: var(--content-width);
  height: 900px;                                         /* sticky 스크롤 공간 단축 */
  flex-shrink: 0;
  position: relative;
}

.venue-section {
  position: sticky;
  top: 80px; /* below sticky header */
  width: 100%;
  height: 859px;                                         /* 고정 높이로 복원 */
  display: grid;
  grid-template-columns: 1fr 2fr;                        /* 비율로 변경 (1:2) */
  gap: 20px;
  overflow: hidden;
  border-radius: 0;
  background: transparent;
}

/* Right: Image Slideshow */
.venue-slideshow {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  overflow: hidden;
  background: transparent;
  border-radius: 16px;
}
.venue-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--ease-smooth);
}
.venue-slide--active { opacity: 1; }
.venue-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}
.venue-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 55%);
  pointer-events: none;
}

/* Left: Venue list panel */
.venue-list {
  grid-column: 1;
  grid-row: 1;
  background: var(--color-bg-lighter);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 2;
  height: 100%;                                          /* 전체 높이 채우기 */
}

.venue-item {
  border-top: 1px solid var(--color-border);
  cursor: pointer;
  transition: background var(--ease-base);
  flex-shrink: 0;
}
.venue-item:last-child { border-bottom: 1px solid var(--color-border); }
.venue-item:hover:not(.venue-item--active) { background: rgba(0,0,0,0.02); }

/* 활성 아이템이 남은 공간을 채우도록 */
.venue-item--active {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;                                         /* flex 오버플로우 방지 */
}
.venue-item--active .venue-detail {
  flex: 1;
  min-height: 0;                                         /* flex 오버플로우 방지 */
}

.venue-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: clamp(16px, 2.2vw, 33px) clamp(16px, 2.6vw, 40px) clamp(16px, 2.1vw, 32px);
}
.venue-name {
  font-size: clamp(16px, 1.5vw, 24px);
  font-weight: 500;
  letter-spacing: -1px;
  color: var(--ds-color-gray-90);
}

/* Venue detail (expanded panel) */
.venue-detail {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), padding var(--ease-smooth);
  padding: 0 40px;
  background: var(--ds-color-gray-0);
}
.venue-item--active .venue-detail {
  max-height: 100%;                                      /* 100%로 변경 */
  padding: clamp(20px, 2.6vw, 40px) clamp(16px, 2.6vw, 40px) clamp(24px, 3vw, 48px);
  border-top: 1px solid var(--ds-color-gray-90);
}

.venue-detail-content {
  flex: 0 0 auto;
}

.venue-detail-title {
  font-size: clamp(28px, 3.8vw, 60px);
  font-weight: 700;
  letter-spacing: -1px;
  color: var(--ds-color-gray-90);
  line-height: 1.1;
  margin-bottom: clamp(8px, 1vw, 16px);
}
.venue-detail-desc {
  font-size: clamp(14px, 1.3vw, 20px);
  font-weight: 400;
  color: var(--ds-color-gray-50);
  letter-spacing: -0.8px;
  line-height: 1.4;
}
.venue-detail-addr {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--ds-pc-font-size-body-medium);           /* 1.7rem = 17px */
  color: #757575;
  letter-spacing: -0.8px;
  line-height: 22.4px;
  margin-top: auto;
  padding-top: 16px;
}
.venue-detail-addr img { width: 15.2px; height: 16px; flex-shrink: 0; }

/* ── 공연장 안내 — 태블릿 (768px ~ 1199px) ── */
@media (max-width: 1199px) {
  .venue-section {
    grid-template-columns: 45% 1fr;
  }
  .venue-detail-addr {
    font-size: var(--ds-mobile-font-size-body-small);    /* 1.5rem = 15px */
  }
}

/* ── 공연장 안내 — 모바일 (~767px) ── */
@media (max-width: 767px) {
  .venue-sticky-wrapper {
    height: auto;
  }
  .venue-section {
    position: relative;
    top: auto;
    height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto 250px;
    border-radius: 12px;
  }
  /* 모바일: 텍스트(리스트) 위, 이미지 아래 */
  .venue-list {
    grid-column: 1;
    grid-row: 1;
  }
  .venue-slideshow {
    grid-column: 1;
    grid-row: 2;
  }
  .venue-item--active {
    flex: 0 0 auto;
  }
  .venue-item--active .venue-detail {
    max-height: 300px;
  }
  .venue-detail-addr {
    font-size: var(--ds-mobile-font-size-body-small);    /* 1.5rem = 15px */
  }
}


/* ============================================================
   바로가기  #section-quicklinks
   4개 아이콘 링크 (공연·전시 / 대관 신청 / 프로그램 신청 / 후원하기)
   ============================================================ */
.quick-links {
  width: var(--content-width);
  min-height: 180px;                                   /* Figma 프레임 14837:25594 고정 높이 180px */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--ds-number-10);                             /* 20px */
  background: var(--ds-color-brand-dark);
  border-radius: var(--ds-number-10);                   /* 20px */
  padding: var(--ds-number-24) var(--ds-number-20);    /* 48px 40px */
  overflow: hidden;
  flex-shrink: 0;
}

/* 가로형 카드: 아이콘(좌) + 텍스트 2줄(우) — grid로 아이콘이 두 행을 가로지름 */
.quick-link-item {
  flex: 0 1 344px;                                       /* 카드 폭 344px (TOBE) */
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: var(--ds-number-12);                      /* 24px (아이콘↔텍스트) */
  row-gap: var(--ds-number-1);                          /* 2px (제목↔설명) */
  padding: 0 var(--ds-number-8);                        /* 0 16px */
  border-radius: var(--ds-number-10);                   /* 20px */
  text-align: left;
  transition: background var(--ease-base);
}
.quick-link-item:hover { background: rgba(255,255,255,0.07); }

.quick-link-icon {
  grid-column: 1;
  grid-row: 1 / span 2;                                 /* 아이콘이 제목+설명 두 행을 가로지름 */
  width: 62px;                                           /* TOBE 아이콘 폭 */
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
}
.quick-link-title {
  grid-column: 2;
  grid-row: 1;
  font-size: var(--ds-font-size-24);                    /* 2.4rem = 24px */
  font-weight: var(--ds-typo-font-weight-bold);         /* 700 */
  letter-spacing: var(--ds-typo-letter-spacing);        /* -0.01em */
  color: var(--ds-light-color-text-inverse-static);     /* white (gray-0) */
  line-height: 1.5;
}
.quick-link-desc {
  grid-column: 2;
  grid-row: 2;
  font-size: var(--ds-number-9);                        /* 1.8rem = 18px */
  font-weight: var(--ds-typo-font-weight-regular);      /* 400 */
  color: var(--ds-light-color-text-inverse-static);     /* white (gray-0) */
  letter-spacing: var(--ds-typo-letter-spacing);        /* -0.01em */
  line-height: 1.2;
}

/* ============================================================
   바로가기  데스크톱-태블릿 경계 (1200px ~ 1449px)
   4열 유지하되 카드 폭이 344px 미만이라 폰트를 폭에 따라 점진 축소(설명 2줄 유지)
   ============================================================ */
@media (min-width: 1200px) and (max-width: 1449px) {
  .quick-link-title { font-size: clamp(2rem, 1.6vw + 0.08rem, 2.4rem); }   /* 20→24px */
  .quick-link-desc  { font-size: clamp(1.4rem, 1.6vw - 0.52rem, 1.8rem); } /* 14→18px */
  .quick-link-icon  { width: clamp(52px, 4vw + 4px, 62px); }               /* 52→62px */
}

/* ============================================================
   바로가기  Tablet (768px ~ 1199px) — 2×2 그리드(가로형 카드 유지)
   ============================================================ */
@media (max-width: 1199px) {
  .quick-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ds-number-6);                            /* 12px — 카드 간 */
    align-items: stretch;
    padding: var(--ds-number-12) var(--ds-number-12);  /* 24px */
    min-height: 0;                                       /* PC 180px 프레임값 해제 */
  }
  .quick-link-item {
    flex: initial;                                       /* flex 해제(그리드 셀) */
    column-gap: var(--ds-number-8);                     /* 16px */
    padding: var(--ds-number-6) var(--ds-number-8);    /* 12px 16px */
    min-width: 0;                                        /* 텍스트 줄바꿈 허용 */
  }
  .quick-link-icon {
    width: 44px;                                         /* 아이콘 축소 */
  }
  .quick-link-title {
    font-size: var(--ds-font-size-20);                  /* 2.0rem = 20px */
    line-height: 1.3;
    white-space: nowrap;                                /* 제목은 한 줄 유지(2×2 폭이면 충분) */
  }
  .quick-link-desc {
    font-size: var(--ds-pc-font-size-body-small);       /* 1.6rem = 16px */
    line-height: 1.3;
  }
}

/* ============================================================
   바로가기  Mobile (~767px) — 4열 세로 스택(아이콘 위 / 제목)
   ============================================================ */
@media (max-width: 767px) {
  .quick-links {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--ds-number-2);                            /* 4px */
    padding: var(--ds-number-4) var(--ds-number-4);    /* 8px */
    border-radius: var(--ds-number-8);                  /* 16px */
    width: calc(100% - 32px);                            /* 좌우 16px 여백 */
    min-height: 0;                                       /* PC 180px 프레임값 해제 */
  }
  .quick-link-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--ds-number-6);                            /* 12px */
    padding: var(--ds-number-8) var(--ds-number-2);    /* 16px 4px */
    border-radius: var(--ds-number-7);                  /* 14px */
  }
  .quick-link-icon {
    width: auto;
    height: var(--ds-number-14);                          /* 28px 고정 영역 */
  }
  .quick-link-title {
    font-size: var(--ds-mobile-font-size-body-xsmall);  /* 1.3rem = 13px */
    line-height: 1.2;
    letter-spacing: var(--ds-typo-letter-spacing);      /* -0.01em */
  }
  .quick-link-desc {
    display: none;
  }
}


/* ============================================================
   이달의 공연·전시 일정  #section-calendar
   월별 주간 캘린더 + 필터(전체/공연/전시/축제·행사)
   ============================================================ */
.calendar-section {
  position: relative;
  width: var(--content-width);
  background: var(--color-cal-bg);
  border-radius: clamp(12px, 1.5vw, 20px);
  padding: clamp(8px, 3vw, 80px);
  flex-shrink: 0;
}

.calendar-bg {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.calendar-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2;
}

/* White inner box */
.calendar-white-box {
  position: relative;
  z-index: 1;
  background: var(--ds-color-gray-0);
  border-radius: 20px;
  width: 100%;
}

.calendar-content {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(20px, 4vw, 60px);
  padding: clamp(16px, 4vw, 60px);
}

/* Filter heading + view all row */
.calendar-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  width: 100%;
  gap: clamp(6px, 1vw, 10px);
}
.cal-header-title {
  grid-column: 1;
  grid-row: 1;
  font-size: clamp(24px, 3.8vw, 60px);
  font-weight: 700;
  color: var(--ds-color-gray-90);
  letter-spacing: -1px;
  white-space: nowrap;
}
.cal-tab-group {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(4px, 0.5vw, 8px);
  padding: 0;
  align-items: center;
}
.calendar-viewall {
  grid-column: 3;
  grid-row: 1;
  align-self: center;  
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: clamp(4px, 0.5vw, 8px);
  font-size: clamp(13px, 1.2vw, 18px);
  font-weight: 500;
  letter-spacing: -1px;
  color: var(--ds-color-gray-40);
  white-space: nowrap;
  flex-shrink: 0;
  transition: color var(--ease-base);
}
/* 좁은 화면: 탭이 아래줄로 떨어짐 */
@media (max-width: 900px) {
  .calendar-header {
    grid-template-columns: 1fr auto;
  }
  .cal-header-title {
    grid-column: 1;
    grid-row: 1;
  }
  .calendar-viewall {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
  }
  .cal-tab-group {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}
.cal-tab {
  padding: clamp(6px, 0.8vw, 12px) clamp(10px, 1.5vw, 24px);
  border-radius: var(--ds-radius-max);
  font-size: clamp(1.5rem, 2vw, 3.2rem);
  font-weight: 300;
  color: var(--ds-light-color-text-subtle);             /* gray-70 */
  background: var(--ds-color-alpha-black0);             /* transparent */
  border: var(--ds-border-width-thin) solid var(--ds-light-color-border-gray-light);  /* 1px, gray-20 */
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.cal-tab:hover {
  background: var(--ds-light-color-background-gray-subtler); /* gray-5 */
  color: var(--ds-light-color-text-basic);              /* gray-90 */
  border-color: var(--ds-light-color-border-gray);      /* gray-30 */
}
.cal-tab.is-active {
  background: var(--ds-light-color-brand-red);
  color: var(--ds-light-color-text-inverse-static);     /* white (gray-0) */
  border-color: var(--ds-light-color-brand-red);
  font-weight: var(--ds-typo-font-weight-bold);         /* 700 */
}
.calendar-viewall:hover { color: var(--ds-color-gray-60); }

/* Calendar body (nav + grid) */
.calendar-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  width: 100%;
  overflow: hidden;
}

/* Month navigation */
.calendar-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 20px 0;
  border-top: 1px solid var(--ds-light-color-border-gray-light);
  border-bottom: 1px solid var(--ds-light-color-border-gray-light);
}
.cal-nav-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: opacity var(--ease-base);
}
.cal-nav-btn:hover { opacity: 0.7; }
.cal-nav-label {
  font-size: clamp(14px, 1.5vw, 24px);
  font-weight: 400;
  letter-spacing: -1px;
  color: var(--ds-color-gray-30);
  white-space: nowrap;
}
.cal-current-month {
  font-size: clamp(18px, 2vw, 32px);
  font-weight: 700;
  letter-spacing: -1px;
  color: var(--ds-color-gray-70);
}

/* Monthly calendar grid — CSS Grid 7열 균일 */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  width: 100%;
  gap: 0;
}

/* Day-of-week headers row */
.cal-day-headers {
  display: contents;
}
.cal-day-hdr {
  padding: 12px 10px;
  font-size: clamp(12px, 1.3vw, 20px);
  font-weight: 500;
  letter-spacing: -1px;
  color: var(--ds-color-gray-70);
  text-align: left;
}

/* Week row (7 day cells) — contents로 풀어서 grid에 편입 */
.cal-week-row {
  display: contents;
}

/* Individual day cell */
.cal-cell {
  position: relative;
  padding: 16px 10px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  background: var(--ds-color-gray-0);
  min-height: 130px;
  overflow: hidden;
}
.cal-cell::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--ds-light-color-border-gray-light);
}
.cal-cell--active {
  background: var(--ds-color-gray-5);
}
.cal-cell--active::before {
  height: 2px;
  background: var(--ds-color-gray-90);
}

/* Date number */
.cal-date {
  font-size: clamp(20px, 2.1vw, 40px);
  font-weight: 300;
  letter-spacing: -1px;
  color: var(--ds-color-gray-70);
  line-height: 1;
  white-space: nowrap;
}
.cal-cell--active .cal-date { font-weight: 700; color: var(--ds-color-gray-90); }
.cal-cell--other-month .cal-date { font-weight: 200; }

/* Event row within a cell */
.cal-event-row {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
}
.cal-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  padding: 0 6px;
  line-height: 1.6;
  font-size: clamp(10px, 0.8vw, 15px);
  font-weight: 500;
  letter-spacing: -0.5px;
  border: 1px solid currentColor;
  white-space: nowrap;
  flex-shrink: 0;
}
.cal-tag--perf    { color: var(--ds-color-brand-red-aa); }
.cal-tag--exhibit { color: var(--ds-color-brand-yellow-aa); border-color: var(--ds-color-brand-yellow); }
.cal-tag--event   { color: var(--ds-color-brand-blue-aa); }
.cal-tag--festival { color: var(--ds-color-brand-green-aa); border-color: var(--ds-color-brand-green-aa); }
.cal-tag--etc      { color: var(--ds-color-brand-dark); }

.cal-event-name {
  font-size: clamp(11px, 0.9vw, 18px);
  font-weight: 500;
  letter-spacing: -0.5px;
  color: var(--ds-color-gray-70);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}

/* 이전달/다음달 날짜 — 흐리게 */
.cal-cell--other-month { opacity: 0.35; }
.cal-cell--other-month::before { background: var(--ds-color-gray-30); }

/* PC 더보기 버튼 */
.cal-events-hidden {
  display: none;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.cal-events-hidden.is-open { display: flex; }
.cal-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 20px;
  border: 1px solid var(--ds-color-brand-dark);
  border-radius: var(--ds-radius-max);
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  color: var(--ds-color-brand-dark);
  cursor: pointer;
  align-self: stretch;
  width: 100%;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.cal-more-btn:hover {
  background: var(--ds-color-brand-dark);
  color: var(--ds-color-gray-0);
}

/* ── 모바일 주간 뷰 ── */
/* 주간 네비게이션 — calendar-nav 내부에 삽입됨 */
.cal-week-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.cal-week-nav-btn:disabled {
  opacity: 0.3;
  cursor: default;
}
.cal-week-nav-label {
  font-size: clamp(18px, 2vw, 32px);
  font-weight: 700;
  letter-spacing: -1px;
  color: var(--ds-color-gray-70);
}

/* 모바일 요일+날짜 행 */
.cal-mobile-days {
  display: flex;
  gap: 4px;
  width: 100%;
}
.cal-mobile-day {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 4px;
  border: none;
  border-radius: 12px;
  background: none;
  cursor: pointer;
  transition: background 0.15s;
}
.cal-mobile-day:hover { background: var(--ds-color-gray-5); }
/* 오늘(active) — red 테두리(line) */
.cal-mobile-day--active {
  background: none;
  border: 1px solid var(--ds-color-brand-red);
}
.cal-mobile-day--active .cal-mobile-day-label { color: var(--ds-color-brand-red); }
.cal-mobile-day--active .cal-mobile-day-num { color: var(--ds-color-brand-red); font-weight: 700; }
/* 선택된 날짜 — red 채움(fill) */
.cal-mobile-day--selected {
  background: var(--ds-color-brand-red);
  border: 1px solid var(--ds-color-brand-red);
}
.cal-mobile-day--selected .cal-mobile-day-label,
.cal-mobile-day--selected .cal-mobile-day-num {
  color: var(--ds-color-gray-0);
}
/* 오늘이면서 선택된 경우 — fill 우선 */
.cal-mobile-day--active.cal-mobile-day--selected {
  background: var(--ds-color-brand-red);
}
.cal-mobile-day--active.cal-mobile-day--selected .cal-mobile-day-label,
.cal-mobile-day--active.cal-mobile-day--selected .cal-mobile-day-num {
  color: var(--ds-color-gray-0);
}
/* hover 시 상태 유지 */
.cal-mobile-day--active:hover { background: none; }
.cal-mobile-day--selected:hover { background: var(--ds-color-brand-red); }
.cal-mobile-day--other { opacity: 0.35; }
.cal-mobile-day--has-events .cal-mobile-day-num { font-weight: 700; }
.cal-mobile-day-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--ds-color-gray-30);
  text-transform: uppercase;
}
.cal-mobile-day-num {
  font-size: 18px;
  font-weight: 400;
  color: var(--ds-color-gray-70);
  line-height: 1;
}

/* 모바일 이벤트 리스트 */
.cal-mobile-events {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  margin-top: 16px;
}
.cal-mobile-event {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--ds-light-color-border-gray-light);
}
.cal-mobile-event:first-child {
  border-top: 1px solid var(--ds-light-color-border-gray-light);
}
.cal-mobile-event--hidden { display: none; }
.cal-mobile-event--hidden.is-open { display: flex; }
.cal-mobile-event-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--ds-color-gray-90);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.cal-mobile-event-period {
  font-size: 12px;
  font-weight: 400;
  color: var(--ds-color-gray-30);
  white-space: nowrap;
  flex-shrink: 0;
}
.cal-mobile-empty {
  text-align: center;
  padding: 32px 0;
  font-size: 14px;
  color: var(--ds-color-gray-30);
}

/* 모바일 더보기 버튼 */
.cal-mobile-more-btn {
  display: block;
  width: 100%;
  padding: 14px;
  margin-top: 4px;
  border: 1px solid var(--ds-light-color-border-gray-light);
  border-radius: 8px;
  background: var(--ds-color-gray-5);
  font-size: 14px;
  font-weight: 500;
  color: var(--ds-color-gray-50);
  cursor: pointer;
  text-align: center;
  transition: background 0.15s;
}
.cal-mobile-more-btn:hover {
  background: var(--ds-light-color-border-gray-light);
}

/* PC에서는 모바일 전용 요소 숨김 */
.cal-week-nav,
.cal-mobile-days,
.cal-mobile-events,
.cal-mobile-more-btn {
  display: none;
}


/* ============================================================
   문화 프로모션 배너 (마키 배너)  #section-marquee
   가로형 띠 배너: CULTURE 텍스트 + 시즌 뱃지 + 공연 정보 + 예매 버튼
   ============================================================ */
.marquee-banner {
  position: relative;
  width: var(--content-width);
  height: 140px;
  background: var(--ds-color-gray-100) url('../img/evnet-bannerbg.jpg') center / cover no-repeat;
  border-radius: var(--ds-number-6);                     /* 12px — 토큰 적용 */
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--ds-number-20) 0 var(--ds-number-30); /* 0 40px 0 60px — 토큰 적용 */
}
.marquee-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);                         /* 이미지 위 오버레이 — 텍스트 가독성 */
  z-index: 1;
}
.marquee-banner > * {
  position: relative;
  z-index: 2;
}

.marquee-banner__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.marquee-culture {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--ds-number-15);                              /* 30px — 토큰 적용 */
  flex-shrink: 0;
}
.marquee-culture__sub {
  font-family: var(--ds-typo-font-type-body);
  font-weight: 400;
  font-size: 20px;
  color: var(--ds-color-gray-0);
  white-space: nowrap;
  line-height: 1;
  opacity: 0.85;
}
.marquee-culture__main {
  font-family: var(--ds-typo-font-type-body);
  font-weight: 700;
  font-size: 40px;
  color: var(--ds-color-gray-0);
  white-space: nowrap;
  line-height: 1;
}


/* Ticket button */
.marquee-ticket-btn {
  flex-shrink: 0;
  width: auto;
  height: 49px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-number-3);                               /* 6px — 토큰 적용 */
  padding: 0 var(--ds-number-12);                        /* 0 24px — 좌우 여백 */
  background: var(--ds-color-gray-0);
  border-radius: var(--ds-radius-max);                   /* 50px — 토큰 적용 */
  font-size: 16px;
  font-weight: 500;
  color: var(--ds-color-gray-100);
  white-space: nowrap;
  transition: background var(--ease-base);
}
.marquee-ticket-btn:hover { background: #f0f0f0; }
.marquee-ticket-icon {
  width: var(--ds-number-8);                             /* 16px — 토큰 적용 */
  height: var(--ds-number-8);                            /* 16px — 토큰 적용 */
  flex-shrink: 0;
}


/* ============================================================
   공지사항 / 언론보도 / 채용공고  #section-news
   리스트 형태: 뱃지 + 제목 + 설명 + 날짜 + 화살표 버튼
   ============================================================ */
.news-section {
  width: var(--content-width);
  background: var(--ds-light-color-background-gray-subtler); /* gray-5 = #f4f5f6 */
  border-radius: var(--ds-number-10);                    /* 20px — radius-xlarge(16px) 초과, primitive 사용 */
  padding: var(--ds-number-30);                          /* 60px — 상하좌우 동일 */
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ds-gap-5);                                  /* 32px (= number-16) */
  margin-bottom: var(--ds-number-20);                    /* 40px — footer 간격 */
}

/* Tab 헤더 */
.news-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.news-tab-group {
  display: flex;
  gap: var(--ds-gap-1);                                  /* 8px */
  padding: 0;
  align-items: center;
}
.news-tab {
  padding: clamp(6px, 0.8vw, 12px) clamp(10px, 1.5vw, 24px);
  border-radius: var(--ds-radius-small);
  font-size: clamp(1.5rem, 2vw, 3.2rem);                /* 캘린더 탭과 동일한 clamp */
  font-weight: 300;
  color: var(--ds-light-color-text-subtle);              /* gray-70 */
  background: var(--ds-color-alpha-black0);              /* transparent */
  border: var(--ds-border-width-thin) solid var(--ds-light-color-border-gray-light); /* 1px gray-20 */
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.news-tab:hover {
  background: var(--ds-light-color-background-gray-subtler); /* gray-5 */
  color: var(--ds-light-color-text-basic);               /* gray-90 */
  border-color: var(--ds-light-color-border-gray);       /* gray-30 */
}
.news-tab.is-active {
  background: var(--ds-light-color-brand-primary);       /* #027BC1 주조색 */
  color: var(--ds-light-color-text-inverse-static);      /* white */
  border-color: var(--ds-light-color-brand-primary);
  font-weight: var(--ds-typo-font-weight-bold);          /* 700 */
}

/* List — ds-board-list 패턴 참조 */
.news-list {
  display: flex;
  flex-direction: column;
  border-top: var(--ds-border-width-thin) solid var(--ds-light-color-border-gray-darker); /* 1px gray-90 */
}

/* Row */
.news-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--ds-number-17) 0;                        /* 34px ≈ 33px, nearest primitive */
  border-top: var(--ds-border-width-thin) solid var(--ds-light-color-border-gray-light); /* 1px gray-20 */
  cursor: pointer;
  transition: background-color 0.15s;
}
.news-item:first-child { border-top-color: var(--ds-light-color-border-gray-darker); }
.news-item:hover { background-color: var(--ds-light-color-surface-gray-subtler); }

/* Left side: badge + title + desc */
.news-item-body {
  display: flex;
  align-items: center;
  gap: var(--ds-number-6);                               /* 12px */
  min-width: 0;
}
.news-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--ds-border-width-thin) solid var(--ds-light-color-border-gray-darker); /* 1px gray-90 */
  border-radius: var(--ds-radius-max);                   /* pill */
  padding: var(--ds-number-1) var(--ds-number-6);       /* 2px 12px — 토큰 사용 */
  font-size: var(--ds-pc-font-size-label-large);         /* 1.9rem ≈ 18px; label 시맨틱 해당 */
  font-weight: var(--ds-typo-font-weight-medium);        /* 500 */
  letter-spacing: var(--ds-typo-letter-spacing);         /* -0.01em */
  color: var(--ds-light-color-text-bolder);              /* gray-95 */
  white-space: nowrap;
  flex-shrink: 0;
}
.news-item-title {
  font-size: var(--ds-pc-font-size-heading-large);       /* 3.2rem = 32px ✔ */
  font-weight: var(--ds-typo-font-weight-medium);        /* 500 */
  letter-spacing: var(--ds-typo-letter-spacing);         /* -0.01em */
  color: var(--ds-light-color-text-bolder);              /* gray-95 */
  white-space: nowrap;
}
.news-item-desc {
  font-size: var(--ds-pc-font-size-body-large);          /* 1.9rem ≈ 20px; 시맨틱 최근접 */
  font-weight: var(--ds-typo-font-weight-regular);       /* 400 */
  letter-spacing: var(--ds-typo-letter-spacing);
  color: var(--ds-color-gray-30);                        /* #b1b8be — 시맨틱 없음, primitive 집접 */
  white-space: nowrap;
}

/* Right side: date + circle button */
.news-item-tail {
  display: flex;
  align-items: center;
  gap: var(--ds-pc-padding-8);                           /* 40px (= number-20) */
  flex-shrink: 0;
  padding-left: var(--ds-pc-padding-8);                  /* 40px */
}
.news-date {
  font-size: var(--ds-pc-font-size-body-large);          /* 1.9rem ≈ 20px */
  font-weight: var(--ds-typo-font-weight-regular);       /* 400 */
  letter-spacing: var(--ds-typo-letter-spacing);
  color: var(--ds-color-gray-30);                        /* #b1b8be */
  white-space: nowrap;
  line-height: 1;
}
.news-arrow-btn {
  width: var(--ds-size-height-5);                        /* 4.8rem = 48px ✔ */
  height: var(--ds-size-height-5);
  border-radius: var(--ds-radius-max);                   /* pill */
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  background: var(--ds-light-color-surface-inverse);     /* gray-90 — 기본 */
  color: var(--ds-light-color-text-inverse-static);      /* 흰색 화살표 — 기본 */
  transition: background-color 0.15s, transform 0.15s;
}
.news-arrow-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.news-arrow-btn:hover,
.news-item:hover .news-arrow-btn {
  background: var(--ds-light-color-brand-primary);       /* 주조색 — hover */
  transform: scale(1.05);
}


/* ============================================================
   반응형 — 공연장·캘린더·배너·공지  Mobile (~767px)
   각 섹션 가로: calc(100% - 32px)
   ============================================================ */
@media (max-width: 767px) {
  .venue-sticky-wrapper { width: calc(100% - 32px); }
  .calendar-section     { width: calc(100% - 32px); }
  .marquee-banner       { width: calc(100% - 32px); height: auto; min-height: 80px; padding: var(--ds-number-8) var(--ds-number-8); border-radius: var(--ds-number-4); flex-wrap: wrap; gap: var(--ds-number-5); } /* wrap + 좌우여백 축소 */
  .marquee-culture      { flex-direction: column; align-items: flex-start; gap: var(--ds-number-3); } /* 6px — 토큰 적용 */
  .marquee-culture__sub  { font-size: 12px; }
  .marquee-culture__main { font-size: 16px; }
  .marquee-ticket-btn   { width: auto; padding: 0 var(--ds-number-6); height: 32px; font-size: 12px; gap: var(--ds-number-2); } /* 0 12px — 패딩 축소 */
  .news-section         { width: calc(100% - 32px); }
  .cal-tab-group {
    padding: 0;
    gap: 3px;
  }
  .cal-tab {
    padding: 5px 8px;
    font-size: 1.3rem;
  }

  /* 주차↔날짜 gap 줄이기 */
  .calendar-body { gap: 8px; }
  .cal-mobile-events { margin-top: 8px; }

  /* PC 그리드 → 모바일 세로 배치로 전환 */
  .calendar-grid {
    display: flex;
    flex-direction: column;
  }
  .cal-day-headers,
  .cal-week-row { display: none; }

  /* 년월 네비 기존 요소 숨기고 주차 네비만 표시 */
  .calendar-nav {
    padding: 12px 0;
  }
  .calendar-nav > .cal-nav-btn,
  .calendar-nav > .cal-current-month { display: none; }

  /* 모바일 전용 요소 표시 */
  .cal-week-nav { display: flex; }
  .cal-mobile-days { display: flex; justify-content: space-between; gap: 0; }
  .cal-mobile-events { display: flex; }
  .cal-mobile-more-btn { display: block; }
}


/* ============================================================
   마키 배너 — Tablet (768px ~ 1199px)
   ============================================================ */
@media (max-width: 1199px) {
  .marquee-banner     { height: auto; min-height: 110px; padding: var(--ds-number-10) var(--ds-number-12) var(--ds-number-10) var(--ds-number-15); flex-wrap: wrap; gap: var(--ds-number-8); } /* wrap + 좌여백 축소 */
  .marquee-culture    { flex-direction: column; align-items: flex-start; gap: var(--ds-number-4); } /* 8px — 토큰 적용 */
  .marquee-culture__sub  { font-size: 15px; }
  .marquee-culture__main { font-size: 28px; }
  .marquee-ticket-btn { width: auto; padding: 0 var(--ds-number-8); height: 40px; font-size: 14px; } /* 0 16px — 패딩 축소 */
}

/* ============================================================
   공지사항 — Tablet (768px ~ 1199px)
   ============================================================ */
@media (max-width: 1199px) {
  .cal-tab-group {
    padding: 0;
  }
  .news-section {
    padding: var(--ds-number-20);                       /* 40px — 상하좌우 동일 */
    gap: var(--ds-mobile-gap-5);                        /* 16px */
  }
  .news-tab-group {
    gap: var(--ds-mobile-gap-1);                        /* 4px */
    padding: 0;
  }
  .news-item {
    padding: var(--ds-number-14) 0;                     /* 28px */
  }
  .news-badge {
    font-size: var(--ds-pc-font-size-label-medium);     /* 1.7rem */
    padding: var(--ds-number-1) var(--ds-number-5);    /* 2px 10px — 토큰 사용 */
  }
  .news-item-desc {
    display: none;                                       /* 태블릿 — 서브텍스트 숨김 */
  }
  .news-item-title {
    font-size: var(--ds-pc-font-size-heading-medium);   /* 2.4rem */
  }
  .news-item-desc {
    font-size: var(--ds-pc-font-size-body-medium);      /* 1.7rem */
  }
  .news-item-tail {
    gap: var(--ds-number-14);                           /* 28px */
    padding-left: var(--ds-number-14);                  /* 28px */
  }
  .news-date {
    font-size: var(--ds-pc-font-size-body-small);       /* 1.5rem */
    line-height: 1;
  }
  .news-arrow-btn {
    width: 40px;
    height: 40px;
  }
  .news-arrow-btn svg {
    width: 16px;
    height: 16px;
  }
}

/* ============================================================
   공지사항 — Mobile (~767px)  — ds-board-list 패턴 기반
   ============================================================ */
@media (max-width: 767px) {
  .news-section {
    padding: var(--ds-number-16);                       /* 32px — 상하좌우 동일 */
    gap: var(--ds-mobile-gap-5);                        /* 16px */
  }
  .news-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .news-header .calendar-viewall {
    align-self: flex-end;
  }
  .news-tab-group {
    flex-wrap: nowrap;
    padding: 0;
    gap: 3px;
  }
  .news-tab {
    padding: 5px 8px;
    font-size: 1.3rem;
  }
  .news-item {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--ds-number-8) 0;                      /* 16px */
    gap: var(--ds-number-4);                            /* 8px */
  }
  .news-item-body {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ds-number-2);                            /* 4px — 감소 */
    width: 100%;
  }
  .news-item-desc {
    display: none;                                       /* 모바일 — 공간 부족으로 숨김 */
  }
  .news-badge {
    font-size: 1.2rem;
    padding: 1px var(--ds-number-3);                    /* 1px 6px */
  }
  .news-item-title {
    font-size: 1.6rem;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
  }
  .news-item-tail {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-left: 0;
    gap: var(--ds-number-6);                            /* 12px */
  }
  .news-date {
    font-size: 1.2rem;
    line-height: 1;
  }
  .news-arrow-btn {
    width: 30px;
    height: 30px;
  }
  .news-arrow-btn svg {
    width: 12px;
    height: 12px;
  }
}


/* ============================================================
   SNS 바로가기 (5색 알약 버튼 행)  #section-sns
   ============================================================ */
.sns-section {
  width: var(--content-width);
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  padding-block: clamp(var(--ds-number-8), 0.5rem + 3.4vw, var(--ds-number-24));
}
.sns-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ds-number-10);                              /* 20px */
  list-style: none;
  padding: 0;
  margin: 0;
}
.sns-list > li { display: flex; }
.sns-pill {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-number-6);
  width: 240px;
  height: 67px;
  padding: var(--ds-number-7) var(--ds-number-11) var(--ds-number-7) var(--ds-number-9);
  border-radius: var(--ds-radius-max);
  font-size: 18px;
  font-weight: var(--ds-typo-font-weight-bold);
  letter-spacing: var(--ds-typo-letter-spacing);
  color: var(--ds-color-gray-0);
  white-space: nowrap;
  transition: transform var(--ease-base), box-shadow var(--ease-base);
}
.sns-pill:hover {
  transform: translateY(-2px);
  box-shadow: var(--ds-shadow-m);
}
.sns-pill-main {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-number-6);
  min-width: 0;
}
.sns-pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 39px;
  height: 39px;
  flex-shrink: 0;
}
.sns-pill-icon--circle {
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--ds-radius-max);
  overflow: hidden;
}
.sns-glyph { display: block; }
.sns-glyph--full { width: 100%; height: 100%; }
.sns-glyph--fb   { width: 63%; height: 63%; }
.sns-glyph--ig   { width: 77%; height: 77%; }
.sns-pill-label { line-height: 1; }
.sns-pill-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  flex-shrink: 0;
}
.sns-pill-arrow svg { display: block; }
.sns-pill--facebook  { background: #1877F2; }
.sns-pill--instagram { background: url('../img/sns/ig_gradient.png') center / cover no-repeat; }
.sns-pill--blog      { background: #03C75A; }
.sns-pill--youtube   { background: #FF0000; }
.sns-pill--kakao {
  background: #FEE500;
  color: #000100;
}
@media (max-width: 1199px) {
  .sns-list { gap: var(--ds-number-8); }
  .sns-pill {
    width: auto;
    height: 56px;
    padding: var(--ds-number-5) var(--ds-number-8) var(--ds-number-5) var(--ds-number-7);
    font-size: var(--ds-pc-font-size-body-small);
  }
  .sns-pill-icon { width: 34px; height: 34px; }
}
@media (max-width: 767px) {
  .sns-list { gap: var(--ds-number-4); }
  .sns-pill {
    height: 42px;
    padding: 0 var(--ds-number-6) 0 var(--ds-number-2);
    font-size: 1.3rem;
  }
  .sns-pill-icon { width: 30px; height: 30px; }
}


/* ============================================================
   시립예술단 소개  #section-arts-company
   좌측 뱃지 | 우측(제목+버튼 / 이미지+바) 2컬럼 레이아웃
   ============================================================ */
.arts-company-section {
  width: min(1860px, calc(100% - 60px));                   /* 좌우 30px씩 */
  padding: 0;
}

/* 전체: 좌측 뱃지 + 우측 콘텐츠 */
.arts-company-inner {
  display: flex;
  gap: var(--ds-number-16);                               /* 32px */
  align-items: flex-start;
  padding: var(--ds-number-10);                           /* 20px */
}

@media (min-width: 1200px) {
  .arts-company-inner {
    padding: var(--ds-number-20);                         /* 40px — PC only */
  }
}

/* 좌측 뱃지 영역 */
.arts-company-aside {
  flex-shrink: 0;
  padding-top: var(--ds-number-3);                        /* 6px — 제목과 수직 정렬 보정 */
}
.arts-company-badge {
  display: inline-block;
  padding: var(--ds-number-6) var(--ds-number-11);       /* 12px 22px */
  border: none;
  border-radius: var(--ds-radius-max);                    /* pill */
  background: rgba(52, 58, 72, 0.05);                      /* #343A48 5% — brand-dark 계열 연한 배경 */
  font-family: var(--ds-typo-font-type-body);
  font-size: var(--ds-pc-font-size-body-medium);          /* 1.7rem = 17px */
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-brand-dark);
  line-height: var(--ds-typo-line-height-heading);
  text-align: left;
  white-space: nowrap;
}

/* 우측 콘텐츠 영역 */
.arts-company-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-12);                               /* 24px */
}

/* 상단: 제목+설명 ↔ 버튼 */
.arts-company-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ds-number-15);                               /* 30px */
}
.arts-company-text {
  flex: 1;
  min-width: 400px;
}
.arts-company-title {
  font-size: 3.6rem;
  font-weight: var(--ds-typo-font-weight-extrabold);
  color: var(--ds-light-color-text-basic);                /* gray-90 */
  letter-spacing: var(--ds-typo-letter-spacing);
  line-height: var(--ds-typo-line-height-heading);
  margin-bottom: var(--ds-number-4);                      /* 8px */
}
.arts-company-desc {
  font-size: var(--ds-pc-font-size-body-medium);          /* 1.7rem = 17px */
  color: var(--ds-light-color-text-basic);                /* gray-90 */
  line-height: var(--ds-typo-line-height-body);
  letter-spacing: var(--ds-typo-letter-spacing);
}

/* 버튼 그룹 */
.arts-company-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-number-4);                                /* 8px */
}
.arts-company-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-number-4);                                /* 8px */
  padding: 0 var(--ds-number-12);                         /* 0 24px */
  height: var(--ds-size-height-12);                       /* 44px */
  border-radius: var(--ds-radius-max);                    /* pill */
  font-size: var(--ds-pc-font-size-body-small);           /* 1.5rem */
  font-weight: var(--ds-typo-font-weight-bold);
  letter-spacing: var(--ds-typo-letter-spacing);
  white-space: nowrap;
  transition: background var(--ease-base), color var(--ease-base), transform var(--ease-base);
}
.arts-company-btn:hover {
  transform: translateY(-1px);
}
.arts-company-btn--outline {
  border: var(--ds-border-width-thin) solid var(--ds-color-brand-dark);
  color: var(--ds-color-brand-dark);
  background: transparent;
}
.arts-company-btn--outline:hover {
  background: var(--ds-color-brand-dark);
  color: var(--ds-light-color-surface-white);
}
.arts-company-btn--filled {
  background: var(--ds-color-brand-dark);
  color: var(--ds-light-color-surface-white);
}
.arts-company-btn--filled:hover {
  background: var(--ds-color-brand-dark);
}

/* 이미지 영역 */
.arts-company-visual {
  position: relative;
}
.arts-company-image {
  width: 100%;
  aspect-ratio: 1620 / 520;
  border-radius: var(--ds-radius-large);                  /* 12px */
  overflow: hidden;
  background: var(--ds-light-color-surface-gray-subtle);  /* 플레이스홀더 배경 */
}
.arts-company-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 하단 오버랩 바 */
.arts-company-bar {
  position: absolute;
  bottom: var(--ds-number-12);                            /* 24px */
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - var(--ds-number-30));                /* 좌우 60px 여백 */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-number-2) 80px;                           /* row 4px / col 80px */
  padding: var(--ds-number-6) var(--ds-number-15);       /* 12px 30px */
  background: var(--ds-light-color-surface-white);
  border-radius: var(--ds-radius-max);                    /* pill */
  box-shadow: var(--ds-shadow-m);
}
.arts-company-bar__label {
  font-size: var(--ds-pc-font-size-body-medium);          /* 1.7rem */
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-brand-orange);
  white-space: nowrap;
}
.arts-company-bar__info {
  display: flex;
  align-items: center;
  gap: var(--ds-number-3);                                /* 6px */
  min-width: 0;
}
.arts-company-bar__title {
  font-size: var(--ds-pc-font-size-body-large);           /* 1.9rem */
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-brand-dark);
}
.arts-company-bar__date {
  font-size: var(--ds-pc-font-size-body-medium);          /* 1.7rem */
  font-weight: var(--ds-typo-font-weight-medium);
  color: var(--ds-light-color-text-subtle);
  white-space: nowrap;
}

/* ---- 반응형 — Tablet (768px ~ 1199px) ---- */
@media (max-width: 1199px) {
  .arts-company-section {
    width: min(1860px, calc(100% - 40px));                 /* PC와 동일: 좌우 20px씩 */
  }
  .arts-company-inner {
    padding: var(--ds-number-20);                         /* PC와 동일: 40px */
    flex-direction: column;
    gap: var(--ds-number-8);                              /* 16px */
  }
  .arts-company-aside {
    padding-top: 0;
  }
  .arts-company-badge {
    font-size: var(--ds-pc-font-size-body-small);         /* 1.5rem = 15px */
    padding: var(--ds-number-4) var(--ds-number-8);      /* 8px 16px */
  }
  .arts-company-badge br { display: none; }
  .arts-company-text {
    min-width: 0;                                          /* 400px 제거 — 오버플로 방지 */
  }
  .arts-company-top {
    flex-direction: column;
    gap: var(--ds-number-8);                              /* 16px */
  }
  .arts-company-actions {
    align-self: flex-start;
  }
  .arts-company-image {
    aspect-ratio: 16 / 7;
  }
}

/* ---- 반응형 — Mobile (~767px) ---- */
@media (max-width: 767px) {
  .arts-company-section {
    width: min(1860px, calc(100% - 12px));                 /* 좌우 6px씩 */
    padding: 0;
  }
  .arts-company-inner {
    flex-direction: column;
    gap: var(--ds-number-8);                              /* 16px */
    padding: var(--ds-number-10);                         /* 20px */
  }
  .arts-company-aside {
    padding-top: 0;
  }
  .arts-company-badge {
    font-size: var(--ds-mobile-font-size-body-xsmall);    /* 1.3rem */
    padding: var(--ds-number-4) var(--ds-number-8);      /* 8px 16px */
    white-space: nowrap;
  }
  .arts-company-badge br { display: none; }
  .arts-company-top {
    flex-direction: column;
    gap: var(--ds-number-8);                              /* 16px */
  }
  .arts-company-title {
    font-size: var(--ds-mobile-font-size-heading-xlarge); /* 2.8rem */
  }
  .arts-company-desc {
    font-size: var(--ds-mobile-font-size-body-small);     /* 1.5rem */
  }
  .arts-company-btn {
    font-size: var(--ds-mobile-font-size-body-xsmall);    /* 1.3rem */
    height: var(--ds-number-18);                          /* 36px */
    padding: 0 var(--ds-number-8);                        /* 0 16px */
  }
  .arts-company-image {
    aspect-ratio: 16 / 9;
    border-radius: var(--ds-radius-medium);               /* 8px */
  }
  .arts-company-bar {
    bottom: var(--ds-number-6);                           /* 12px */
    width: calc(100% - var(--ds-number-16));              /* 좌우 32px 여백 */
    padding: var(--ds-number-5) var(--ds-number-8);      /* 10px 16px */
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    border-radius: var(--ds-radius-medium);
  }
  .arts-company-bar__label {
    font-size: var(--ds-mobile-font-size-body-small);     /* 1.5rem */
  }
  .arts-company-bar__title,
  .arts-company-bar__date {
    font-size: var(--ds-mobile-font-size-body-small);     /* 1.5rem */
  }
}


/* ============================================================
   공지 2단 레이아웃 (news-section--2col) — #443 퍼블 정본 이식
   좌(공지사항/언론보도) | 우(채용·입찰/경영공시) 독립 블록
   각 컬럼 = [탭 그룹 + 더보기] 헤더 + 리스트(설명/화살표 제거)
   ============================================================ */
.news-group--hidden { display: none; }

.news-section--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--ds-number-40);                       /* 80px — Figma 노드 14725:3895 gap-[80px] (48px → 80px) */
  row-gap: var(--ds-gap-5);                               /* 32px — 모바일 1컬럼 시 컬럼 간 */
  align-items: start;
}
.news-col {
  display: flex;
  flex-direction: column;
  gap: var(--ds-gap-5);                                   /* 32px — 헤더↔리스트 간격 */
  min-width: 0;
}
/* 2컬럼 항목: 화살표 영역 제거되어 우측은 날짜만 */
.news-section--2col .news-item-tail {
  padding-left: var(--ds-number-8);                       /* 16px */
}
/* 2컬럼 제목은 ellipsis로 컬럼 폭에 맞춤 (전 뷰포트 공통) */
.news-section--2col .news-item-title {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
/* PC 전용 — Figma 노드 스펙 (반응형 축소 룰을 덮지 않도록 min-width 가드) */
@media (min-width: 1200px) {
  .news-section--2col .news-tab {
    padding: 13px 25px;                                 /* Figma 노드 14837:26518 py-13/px-25 (고정치수) */
    font-size: var(--ds-font-size-24);                  /* 2.4rem = 24px — Figma 탭 텍스트 (clamp 32px → 24px) */
  }
  .news-section--2col .news-item-title {
    font-size: var(--ds-pc-font-size-heading-medium);   /* 2.8rem = 28px — Figma 노드 14725:3913 (heading-large 36px → 28px) */
  }
  .news-section--2col .news-badge {
    font-size: var(--ds-pc-font-size-label-medium);     /* 1.7rem = 17px — Figma 노드 14725:3911 (label-large 19px → 17px) */
  }
  .news-section--2col .news-item {
    padding: var(--ds-number-12) 0;                     /* 24px 0 — Figma pt-25/pb-24 근사 (34px → 24px) */
  }
}
/* 좁은 데스크톱(1200~1380) — 2컬럼 폭이 좁아 28px 제목이 과도하게 잘림 → 24px로 축소(텍스트 더 노출).
   1381px 이상(1440·1920 등)은 Figma 확정 28px 유지. */
@media (min-width: 1200px) and (max-width: 1380px) {
  .news-section--2col .news-item-title {
    font-size: var(--ds-font-size-24);                  /* 2.4rem = 24px */
  }
}
/* 모바일 — 2컬럼 → 1컬럼으로 쌓기 */
@media (max-width: 767px) {
  .news-section--2col {
    grid-template-columns: 1fr;
    row-gap: var(--ds-number-16);                       /* 32px — 컬럼 간 간격 */
  }
  .news-col {
    gap: var(--ds-mobile-gap-5);                        /* 16px */
  }
}