/* site/pages/main.css — 메인 전용
   원천: 목업 추출 샘플 CSS. KV 슬라이더 · 메인 팝업 · 퀵메뉴 · 공지/검색/TOPIK 위젯 · 프로그램 카드 · 갤러리 위젯. */

/* ── KV 슬라이더 + 퀵링크 ── */
/* 배너 이미지를 KV 자리 전체에 채운다. 슬라이드는 겹쳐 두고 보이는 하나만 드러내며, 감춘 슬라이드는 visibility로 탭 순서·읽기에서 뺀다.
   점은 아래에 겹치는 퀵링크 바를 피해 그 위에 둔다. 점의 모양은 퍼블리싱 히어로의 점을 그대로 옮겼다 */
.kv { position: relative; overflow: hidden; height: calc(460px + var(--sp-24)); background: var(--grad-hero-photo); touch-action: pan-y; user-select: none; }
.kv__slide { position: absolute; inset: 0; display: block; opacity: 0; visibility: hidden; transition: opacity var(--dur-slow) var(--ease), visibility var(--dur-slow) var(--ease); }
.kv__slide.is-active { opacity: 1; visibility: visible; }
/* 끄는 동안은 배너가 손을 그대로 따라오고, 놓은 뒤에는 위치만 움직여 자리를 잡는다 */
.kv.is-dragging .kv__slide { transition: none; cursor: grabbing; }
.kv.is-settling .kv__slide { transition: transform var(--dur-base) var(--ease); }
.kv__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kv__dots { position: absolute; left: 0; right: 0; bottom: calc(var(--sp-16) + var(--sp-6)); z-index: 1; display: flex; justify-content: center; align-items: center; gap: var(--sp-2); }
.kv__dot { width: 10px; height: 10px; border-radius: var(--r-full); background: var(--c-navy-200); border: none; padding: 0; cursor: pointer; transition: width var(--dur-base) var(--ease); }
.kv__dot.is-active { width: 28px; background: var(--c-primary); }

/* ── 메인 팝업 ──
   PC는 관리자가 정한 위치·크기로 문서 왼쪽 위를 기준 삼아 띄우고, 값은 main.js가 팝업마다 변수(--pp-*)로 건다. 나중에 실은 팝업이 위에 놓인다.
   헤더보다 위, 모바일 드로어보다 아래에 둔다. 이미지는 지정한 크기의 칸 안에 잘리지 않게 담는다 */
/* 팝업은 관리자가 정한 위치·크기에 놓되, 창이 좁아 오른쪽 끝을 넘으면 넘는 만큼 왼쪽으로 당기고 창보다 넓으면 창 폭에 맞춰 줄인다 —
   그 계산의 100%가 화면 폭이 되도록 틀을 좌우 끝까지 편다(높이는 0이라 아래 화면을 가리지 않는다) */
.main-popups { position: absolute; top: 0; left: 0; right: 0; z-index: calc(var(--z-header) + 1); }
.main-popup {
  position: absolute; top: var(--pp-top, 0);
  left: max(0px, min(var(--pp-left, 0px), calc(100% - min(var(--pp-width, 0px), 100% - 2 * var(--gutter)) - var(--gutter))));
  width: var(--pp-width, auto); max-width: calc(100% - 2 * var(--gutter)); background: var(--c-white); border: var(--bd); border-radius: var(--r-md); box-shadow: var(--shadow-lg); overflow: hidden; }
.main-popup[hidden] { display: none; }
.main-popup__media { display: block; height: var(--pp-height, auto); background: var(--c-white); }
.main-popup__media picture { display: block; width: 100%; height: 100%; }
.main-popup__img { display: block; width: 100%; height: 100%; object-fit: contain; }
.main-popup__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); background: var(--c-navy-800); color: var(--c-text-invert); font-size: var(--fs-13); }
.main-popup__today { border: none; background: none; padding: var(--sp-1) 0; color: inherit; font: inherit; cursor: pointer; }
.main-popup__close { border: none; background: none; padding: var(--sp-1) var(--sp-2); color: inherit; font: inherit; font-weight: var(--fw-semibold); cursor: pointer; }

.quickbar {
  background: var(--c-white); border-radius: var(--r-3xl); box-shadow: var(--shadow-lg);
  display: flex; position: relative; z-index: var(--z-raised);
  max-width: calc(var(--container) - var(--gutter) * 2);
  margin: calc(-1 * var(--sp-16)) auto 0;
  padding: var(--sp-6) var(--sp-4);
}
.quickbar__item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-4); color: var(--c-primary); border-left: 1px solid var(--c-line-strong); }
.quickbar__item:first-child { border-left: none; }
.quickbar__label { font-size: var(--fs-15); font-weight: var(--fw-semibold); color: var(--c-primary); text-align: center; }

/* ── 위젯: 공지 + 통합검색 + TOPIK ── */
.home-widgets { display: grid; grid-template-columns: 1.55fr 1fr; gap: var(--sp-8); align-items: start; margin-top: var(--sp-16); }
.notice-panel { border: var(--bd); border-radius: var(--r-xl); padding: var(--sp-panel-pad); }
.notice-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
.notice-panel-head h2 { margin: 0; font-size: var(--fs-panel); font-weight: var(--fw-bold); color: var(--c-text); }
.notice-list { list-style: none; margin: 0; padding: 0; }
.notice-item { display: flex; align-items: center; gap: var(--sp-3); padding: 14px 0; border-bottom: 1px solid var(--c-line); }
.notice-list > li:last-child .notice-item { border-bottom: none; }
.notice-dot { flex: none; width: 4px; height: 4px; border-radius: var(--r-full); background: var(--c-text-mute); }
.notice-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-17); color: var(--c-text); }
.notice-item:hover .notice-title { color: var(--c-primary); }
.notice-date { flex: none; width: 96px; text-align: right; font-size: var(--fs-14); color: var(--c-text-cap); }
/* 공지·갤러리 위젯에 실을 글이 없을 때의 안내 */
.widget-empty { margin: 0; padding: var(--sp-10) 0; text-align: center; font-size: var(--fs-15); color: var(--c-text-mute); }

.side-stack { display: flex; flex-direction: column; gap: var(--sp-6); }
.search-panel { background: var(--c-surface-tint); border-radius: var(--r-xl); padding: var(--sp-6) var(--sp-panel-pad); }
.search-panel .lbl-row { display: flex; align-items: baseline; gap: var(--sp-4); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.search-panel .lbl { font-size: var(--fs-panel); font-weight: var(--fw-bold); color: var(--c-primary); }
.search-panel .hint { font-size: var(--fs-14); color: var(--c-text-mute); }
.search-input-box { position: relative; display: flex; align-items: center; }
.search-input-box input { width: 100%; height: 48px; border-radius: var(--r-sm); border: var(--bd); background: var(--c-white); padding: 0 var(--sp-4) 0 var(--sp-10); font-size: var(--fs-16); font-family: inherit; color: var(--c-text); }
.search-input-box input:focus { outline: none; border-color: var(--c-accent); box-shadow: var(--shadow-focus); }
.search-input-box svg { position: absolute; left: var(--sp-3); color: var(--c-text-cap); }

.topik-panel { background: var(--c-surface-tint); border-radius: var(--r-xl); padding: var(--sp-6) var(--sp-panel-pad); display: flex; gap: var(--sp-6); align-items: flex-start; }
.topik-illust { flex-shrink: 0; width: 96px; height: 96px; }
.topik-body { flex: 1; min-width: 0; }
.topik-body h2 { font-size: var(--fs-panel); font-weight: var(--fw-bold); color: var(--c-primary); margin: 0 0 var(--sp-3); }
.topik-body p { font-size: var(--fs-15); line-height: var(--lh-base); color: var(--c-text-mute); margin: 0 0 var(--sp-4); }
.topik-btns { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* ── 휴무일 안내 — 왼쪽 이번 달 달력, 오른쪽 올해 목록(넘치면 안에서 스크롤), 아래 범례.
      달력·목록 줄의 모양은 holiday-calendar.css가 갖고 여기는 섹션의 배치만 둔다. ── */
.holiday-notice { border: var(--bd); border-radius: var(--r-xl); padding: var(--sp-panel-pad); }
.holiday-notice__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-5); }
.holiday-notice__head h2 { margin: 0; font-size: var(--fs-panel); font-weight: var(--fw-bold); color: var(--c-text); }
.holiday-notice__body { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: stretch; margin-bottom: var(--sp-5); }
.holiday-notice__list { display: flex; flex-direction: column; min-height: 0; }
.holiday-notice__year { margin: 0 0 var(--sp-3); font-size: var(--fs-17); font-weight: var(--fw-bold); color: var(--c-primary); }
/* 목록은 달력 높이에 맞춰 그 안에서 스크롤한다 — 섹션이 메인을 늘리지 않는다 */
.holiday-notice__items { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; border-top: 2px solid var(--c-primary); }
.holiday-notice__items li { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2); border-bottom: var(--bd); font-size: var(--fs-15); }
.holiday-notice__country { flex: none; display: inline-flex; align-items: center; height: 24px; padding: 0 var(--sp-2); border-radius: var(--r-full); font-size: var(--fs-12); font-weight: var(--fw-bold); color: var(--c-on-primary); }
.holiday-notice__country.is-kr { background: var(--c-primary); }
.holiday-notice__country.is-vn { background: var(--c-accent); }
.holiday-notice__items .hlist__date { flex: none; color: var(--c-text-mute); font-variant-numeric: tabular-nums; }
.holiday-notice__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-text); }

/* ── 섹션 헤더 + 프로그램 카드 + 갤러리 ── */
.home-section { margin-top: var(--sp-20); }
.sechead { text-align: center; max-width: 640px; margin: 0 auto var(--sp-10); }
.sechead__eyebrow { font-size: var(--fs-16); font-weight: var(--fw-medium); color: var(--c-accent); margin: 0 0 var(--sp-3); }
.sechead__title { font-size: var(--fs-32); font-weight: var(--fw-bold); color: var(--c-primary); line-height: var(--lh-snug); margin: 0; word-break: keep-all; }
.program-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-grid-gap); }
.program-card { border-radius: var(--r-lg); overflow: hidden; background: var(--c-white); text-align: center; }
.program-card .photo { display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: var(--r-lg); object-fit: cover; }
.program-card .body { padding: var(--sp-5) var(--sp-3) 0; }
.program-card .title { font-size: var(--fs-card); font-weight: var(--fw-bold); color: var(--c-text); margin-bottom: var(--sp-2); }
.program-card .desc { font-size: var(--fs-15); color: var(--c-text-mute); line-height: var(--lh-base); margin-bottom: var(--sp-4); }
.link-more { display: inline-flex; align-items: center; gap: 4px; color: var(--c-accent); font-weight: var(--fw-semibold); font-size: var(--fs-15); text-decoration: none; background: none; border: none; padding: 0; }
.link-more:hover { color: var(--c-accent-hover); }

.gallery-panel { border: var(--bd); border-radius: var(--r-xl); padding: var(--sp-panel-pad); margin-top: var(--sp-20); }
/* 좁은 폭에서 제목과 단추가 한 줄에 들지 않으면 제목은 꺾지 않고 단추 줄을 아래 오른쪽으로 내린다 */
.gallery-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.gallery-head h2 { margin: 0; font-size: var(--fs-panel); font-weight: var(--fw-bold); color: var(--c-text); white-space: nowrap; }
.gallery-controls { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
/* 창 밖의 카드는 감춘다 — 카드의 display가 hidden 속성의 기본 숨김을 덮지 않게 한다. 창 안의 순서는 main.js가 order로 건다 */
.gallery-card { display: block; }
.gallery-card[hidden] { display: none; }
.gallery-card .photo { display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: var(--r-lg); object-fit: cover; }
.gallery-card .photo-empty { background: var(--c-surface-mute); }
.gallery-card .caption { display: block; margin-top: var(--sp-2); font-size: var(--fs-15); font-weight: var(--fw-bold); color: var(--c-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gallery-card:hover .caption { color: var(--c-primary); }

/* ── 반응형 ── */
@media (max-width: 1023px) {
  .kv { height: 420px; }
  .quickbar { flex-wrap: wrap; border-radius: var(--r-xl); margin-left: var(--gutter-mobile); margin-right: var(--gutter-mobile); gap: var(--sp-4) 0; padding: var(--sp-5) var(--sp-2); }
  .quickbar__item { flex: 1 1 33%; border-left: none; }
  .home-widgets { grid-template-columns: 1fr; }
  /* 휴무일 안내는 달력과 목록이 위아래로 쌓인다 */
  .holiday-notice { padding: var(--sp-6); }
  .holiday-notice__body { grid-template-columns: 1fr; }
  /* 좁은 폭에서는 기간이 줄을 다 차지해 명칭이 잘리므로 명칭을 다음 줄로 내린다 */
  .holiday-notice__items li { flex-wrap: wrap; row-gap: var(--sp-1); }
  .holiday-notice__name { flex-basis: 100%; white-space: normal; }
  .program-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .gallery-grid { grid-template-columns: 1fr; }
  .topik-panel { flex-direction: column; }
}

/* 머리줄이 모바일 머리줄로 바뀌는 폭부터의 메인 팝업 — 위치를 쓰지 않고 헤더 아래 가운데에 위에서부터 차례로 쌓는다.
   태블릿 폭에서 팝업끼리 서로 덮지 않게 하려는 것이다. 폭은 관리자가 정한 폭이되 창보다 넓으면 줄이고, 이미지는 제 비율대로 높이를 갖는다 */
@media (max-width: 1023px) {
  .main-popups { position: absolute; top: calc(var(--header-h-mobile) + var(--sp-4)); left: var(--gutter-mobile); right: var(--gutter-mobile); display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); }
  .main-popup { position: static; max-width: 100%; }
  .main-popup__media { height: auto; }
  .main-popup__media picture, .main-popup__img { height: auto; }
}

/* 휴대폰 폭에서는 팝업을 화면 폭에 맞춘다 */
@media (max-width: 767px) {
  .main-popup { align-self: stretch; width: auto; }
}