@charset "utf-8";
/* ==================================================
   festivals.css
   PC 축제·행사 개별 상세 (/festivals/{id}) V1

   View : app/Views/_pc/front/pages/festivals/show.php
   JS   : /assets/front/pc/js/pages/festivals.js (메인 필터·상세 공유/주소 복사 — 데이터는 서버가 그린다)

   [격리]
     모든 Class 는 pc-festival- 접두어를 쓴다.
     메인 축제 섹션(.main-event / .event-*)과 공통 CSS(layout / components / tokens)는 수정하지 않았다.
     관련 행사 카드만 components.css 의 .event-card Markup·스타일을 재사용하고,
     카드 배지 색은 .pc-festival-status--* (이 파일)로 칠한다.
     .event-* 를 덮는 규칙은 .pc-festival-related 아래로 범위를 한정한 이미지 비율·여백 2개뿐이다.
     메인(home.php)도 종료·개최 예정 배지 색(.pc-festival-status--ended/upcoming)을 위해 이 파일을 불러온다.
     — 모든 규칙이 pc-festival- 범위라 메인 다른 섹션에는 걸리지 않는다.

   [Layout] — /popular · /notices 와 같은 바깥 골격, 좌측 사이드바 없음
     main-layout__inner = 1680 (Content 1400 + Gap 40 + Wing 240)
     Hero              = 이미지 600(4:3) + Gap 40 + 행사 정보  (기존 축제 이미지가 600~1280px 라 전체폭 확대 금지)
     Body              = 본문 980 + Gap 40 + Sticky 핵심 정보 패널 380
     관련 행사          = Content 1400 전체폭 3열
     body min-width 1680 정책(layout.css)을 그대로 따른다 — 1680 미만은 가로 Scroll.
================================================== */


/* ---------- 공통 ---------- */

.pc-festival-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.pc-festival-icon {
  display: inline-block;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
}

.pc-festival-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.pc-festival__breadcrumb {
  padding-top: var(--space-5);
}

/* 목록 페이지가 없어 링크가 아닌 중간 경로 — .breadcrumb__item 색을 그대로 따른다 */
.pc-festival__crumb-text {
  color: inherit;
}

.pc-festival__noscript {
  margin-top: var(--space-6);
  color: var(--text-secondary);
  font-size: var(--font-size-base);
}


/* ==================================================
   상태 배지 — 메인 카드(.event-card__badge--*)와 같은 의미·색
     dday(D-n)    : Error   (= --soon)
     weekend      : Warning (= --period)
     ongoing      : Success (= --ongoing)
     ended        : Neutral  — 메인에 없는 상태
     upcoming     : Info     — 메인에 없는 상태
================================================== */

.pc-festival-status--dday {
  background-color: var(--error-bg);
  color: var(--error);
}

.pc-festival-status--weekend {
  background-color: var(--warning-bg);
  color: var(--warning);
}

.pc-festival-status--ongoing {
  background-color: var(--success-bg);
  color: var(--success);
}

.pc-festival-status--ended {
  background-color: var(--status-neutral-bg);
  color: var(--status-neutral);
}

.pc-festival-status--upcoming {
  background-color: var(--info-bg);
  color: var(--info);
}


/* ==================================================
   Hero : 이미지 + 행사 정보 분할
================================================== */

.pc-festival-hero {
  display: grid;
  grid-template-columns: 600px minmax(0, 1fr);
  column-gap: var(--space-10);
  margin-top: var(--space-5);
  padding: var(--space-6);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  background-color: var(--surface-default);
}

/* 600 x 450 (4:3). 원본 600x405 / 600x450 / 1280x960 가 거의 원래 크기로 보이고
   cover 로 잘리는 폭은 좌우 최대 약 5% 이내다. 피사체 위치는 목업 image.position 으로 보정한다. */
.pc-festival-hero__media {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  background-color: var(--bg-muted);
}

.pc-festival-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.pc-festival-hero.is-ended .pc-festival-hero__image {
  filter: grayscale(0.35);
}

/* V1.1 : 버튼을 맨 아래(margin-top:auto)에 붙이던 방식을 없애고, 정보 묶음 전체를
   이미지 높이(450) 안에서 세로 가운데에 둔다. Hero 높이는 이미지가 정하므로 늘어나지 않는다. */
.pc-festival-hero__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: var(--space-2) 0;
}

.pc-festival-hero__labels {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.pc-festival-hero__type {
  color: var(--brand-secondary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
}

.pc-festival-hero__badge {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  white-space: nowrap;
}

.pc-festival-hero__title {
  margin-top: var(--space-3);
  color: var(--text-primary);
  font-size: var(--text-page-title-size);
  font-weight: var(--text-page-title-weight);
  line-height: var(--text-page-title-line-height);
  word-break: keep-all;
}

/* 메인 카드 .event-card__tag 와 같은 Neutral 표현 */
.pc-festival-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--space-4);
}

.pc-festival-hero__tag {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  background-color: var(--bg-subtle);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1;
}

.pc-festival-hero__facts {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-light);
}

.pc-festival-hero__fact {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
}

.pc-festival-hero__fact-label {
  display: inline-flex;
  flex: 0 0 112px;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
}

/* 메인 카드와 같은 events/*.svg (viewBox 62) — CSS 로만 축소 */
.pc-festival-hero__fact-icon {
  display: block;
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.pc-festival-hero__fact-value {
  min-width: 0;
  color: var(--text-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
}

.pc-festival-hero__ended {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background-color: var(--bg-subtle);
  color: var(--text-secondary);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
}

/* 기간·장소 바로 아래 (V1.1) */
.pc-festival-hero__actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.pc-festival-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: 132px;
  height: 48px;
  padding: 0 var(--space-5);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background-color: var(--surface-default);
  color: var(--text-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast);
}

.pc-festival-action:hover {
  border-color: var(--border-strong);
  background-color: var(--surface-hover);
}

.pc-festival-action:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 3px;
}

.pc-festival-action__icon {
  display: inline-flex;
  font-size: 20px;
}

/* 찜 : 공용 Favorite 규칙(components.css .fav-heart)과 같이 On 이면 --error 빨간 하트 */
.pc-festival-action--favorite .pc-festival-action__icon--on {
  display: none;
}

.pc-festival-action--favorite[aria-pressed="true"] {
  border-color: var(--error);
  background-color: var(--error-bg);
  color: var(--error);
}

.pc-festival-action--favorite[aria-pressed="true"] .pc-festival-action__icon--off {
  display: none;
}

.pc-festival-action--favorite[aria-pressed="true"] .pc-festival-action__icon--on {
  display: inline-flex;
}


/* ==================================================
   Body : 본문 980 + Gap 40 + Sticky 패널 380
================================================== */

.pc-festival-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  column-gap: var(--space-10);
  align-items: start;
  margin-top: var(--space-10);
}

.pc-festival-body--single {
  grid-template-columns: minmax(0, 1fr);
}

.pc-festival-main {
  min-width: 0;
}

.pc-festival-section + .pc-festival-section {
  margin-top: var(--space-10);
  padding-top: var(--space-10);
  border-top: 1px solid var(--border-light);
}

.pc-festival-section__title {
  color: var(--text-primary);
  font-size: var(--text-section-title-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--text-section-title-line-height);
}


/* ---------- 축제 소개 ---------- */

.pc-festival-intro {
  margin-top: var(--space-5);
}

.pc-festival-intro__text {
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  word-break: keep-all;
}

.pc-festival-intro__text + .pc-festival-intro__text {
  margin-top: var(--space-4);
}


/* ---------- 주요 프로그램 (텍스트 중심 Timeline) ---------- */

.pc-festival-program {
  margin-top: var(--space-5);
  border-top: 1px solid var(--border-default);
}

.pc-festival-program__item {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  column-gap: var(--space-6);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--border-light);
}

.pc-festival-program__when {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pc-festival-program__date {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.pc-festival-program__time {
  color: var(--brand-secondary);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.pc-festival-program__title {
  color: var(--text-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
}

.pc-festival-program__desc {
  margin-top: var(--space-1);
  color: var(--text-secondary);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  word-break: keep-all;
}


/* ---------- 위치 및 교통 : CSS 지도 플레이스홀더 ----------
   지도 SDK 를 부르지 않는다. 실제 지도로 오인되지 않도록 도로·좌표·거리·소요 시간을 그리지 않고
   옅은 점 패턴 위에 장소명 핀만 둔다. */

.pc-festival-map {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  margin-top: var(--space-5);
  overflow: hidden;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background-color: var(--brand-bg-light);
  background-image: radial-gradient(var(--border-default) 1px, transparent 1px);
  background-size: 18px 18px;
}

.pc-festival-map__marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.pc-festival-map__pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: var(--brand-secondary);
  box-shadow: var(--shadow-md);
  color: var(--text-inverse);
  font-size: 26px;
}

.pc-festival-map__name {
  max-width: 420px;
  padding: var(--space-2) var(--space-4);
  overflow: hidden;
  border-radius: var(--radius-pill);
  background-color: var(--surface-default);
  box-shadow: var(--shadow-sm);
  color: var(--text-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pc-festival-map__caption {
  position: absolute;
  bottom: var(--space-3);
  left: var(--space-4);
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
}

.pc-festival-location {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
  margin-top: var(--space-5);
}

.pc-festival-location__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.pc-festival-location__row {
  display: flex;
  gap: var(--space-4);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
}

.pc-festival-location__row dt {
  flex: 0 0 40px;
  color: var(--text-tertiary);
}

.pc-festival-location__row dd {
  min-width: 0;
  color: var(--text-primary);
  word-break: keep-all;
}

.pc-festival-location__actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* 주소 복사 / 카카오맵 / 네이버 지도 — 보조 버튼 */
.pc-festival-map-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 0 var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background-color: var(--surface-default);
  color: var(--text-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.pc-festival-map-link:hover {
  border-color: var(--brand-secondary);
  color: var(--brand-secondary);
}

.pc-festival-map-link:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.pc-festival-map-link__icon {
  font-size: 16px;
}

.pc-festival-map-link--block {
  width: 100%;
  height: 44px;
}


/* ---------- 이용 안내 ---------- */

.pc-festival-guide {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: var(--space-5);
}

.pc-festival-guide__item {
  display: flex;
  gap: var(--space-4);
}

.pc-festival-guide__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--brand-bg-light);
  color: var(--brand-secondary);
  font-size: 20px;
}

.pc-festival-guide__body {
  min-width: 0;
  padding-top: 2px;
}

.pc-festival-guide__label {
  color: var(--text-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
}

.pc-festival-guide__text,
.pc-festival-guide__notes {
  margin-top: var(--space-1);
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  word-break: keep-all;
}

.pc-festival-guide__note {
  position: relative;
  padding-left: 14px;
}

.pc-festival-guide__note + .pc-festival-guide__note {
  margin-top: var(--space-1);
}

.pc-festival-guide__note::before {
  content: "";
  position: absolute;
  top: 0.7em;
  left: 2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--text-tertiary);
}


/* ==================================================
   Sticky 핵심 정보 패널 (380)
   Wing(.main-wing__inner)과 같은 top 32px 에 붙는다. Body Grid 안에서만 따라온다.
================================================== */

.pc-festival-panel {
  position: sticky;
  top: var(--space-8);
  padding: var(--space-6);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background-color: var(--surface-default);
}

.pc-festival-panel__title {
  color: var(--text-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
}

.pc-festival-panel__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.pc-festival-panel__label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.pc-festival-panel__icon {
  color: var(--brand-secondary);
  font-size: 16px;
}

.pc-festival-panel__value {
  margin-top: 2px;
  padding-left: 22px;
  color: var(--text-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  word-break: keep-all;
}

.pc-festival-panel__sub {
  display: block;
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
}

.pc-festival-panel__pair {
  display: block;
}

.pc-festival-panel__pair em {
  margin-right: var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  font-style: normal;
  font-weight: var(--font-weight-regular);
}

.pc-festival-panel__actions {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-light);
}

.pc-festival-panel__actions-title {
  color: var(--text-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
}

.pc-festival-panel__buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
}


/* ==================================================
   함께 즐길 다른 행사 — Content 1400 전체폭 3열
   카드 자체는 components.css .event-card 그대로 (찜 버튼 없음)
================================================== */

.pc-festival-related {
  margin-top: var(--space-16);
  padding-top: var(--space-10);
  border-top: 1px solid var(--border-light);
}

.pc-festival-related__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  align-items: start;
  margin-top: var(--space-5);
}

/* V1.1 : 보조 콘텐츠라 이미지 비중을 줄인다. 메인 카드 10/9(약 451x406) → 16/9(약 451x254).
   이 Section 안에서만 적용되며 메인 축제 카드(.main-event)는 그대로다.
   원본이 4:3·약 3:2 라 위아래만 잘리고, 피사체 위치는 목업 image.position(인라인 object-position)을 따른다. */
.pc-festival-related .event-card__media {
  aspect-ratio: 16 / 9;
}

.pc-festival-related .event-card__body {
  padding: var(--space-4) var(--space-5) var(--space-5);
}


/* ==================================================
   존재하지 않는 목업 ID
================================================== */

.pc-festival-empty {
  margin-top: var(--space-5);
  padding: var(--space-20) var(--space-6);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  background-color: var(--surface-default);
  text-align: center;
}

.pc-festival-empty__title {
  color: var(--text-primary);
  font-size: var(--text-subsection-title-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
}

.pc-festival-empty__desc {
  margin-top: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
}

.pc-festival-empty__button {
  display: inline-flex;
  align-items: center;
  height: 44px;
  margin-top: var(--space-6);
  padding: 0 var(--space-6);
  border-radius: var(--radius-md);
  background-color: var(--brand-secondary);
  color: var(--text-inverse);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

.pc-festival-empty__button:hover {
  background-color: var(--brand-interaction);
}

.pc-festival-empty__button:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 3px;
}


/* ==================================================
   실데이터 연동 추가분 (festivals 테이블)
     현장 사진 : 대표 이미지 외 추가 사진(gallery_json) 3열
     소개 첫 문단 : 한 줄 소개(summary)
     목록으로 : 축제 목록 페이지가 없어 메인 축제 섹션(/#main-event)으로
================================================== */

.pc-festival-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.pc-festival-gallery__item {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  background-color: var(--bg-muted);
}

.pc-festival-gallery__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pc-festival-intro__lead {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}

.pc-festival-panel__link {
  color: var(--brand-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
  word-break: break-all;
}

.pc-festival-back {
  display: flex;
  justify-content: center;
  margin-top: var(--space-10);
}

.pc-festival-back__link {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 var(--space-6);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: var(--font-weight-medium);
}

.pc-festival-back__link:hover {
  border-color: var(--brand-secondary);
  color: var(--brand-secondary);
}