/* ==========================================================
   공지사항 · 이벤트 (notice.html · event.html) + 메인 팝업
   ========================================================== */

.bd-section { padding-top: clamp(20px, 4vw, 48px); min-height: 50vh; }
.bd-loading { color: var(--muted); font-size: 15px; padding: 40px 0; }
.bd-demo {
  margin-bottom: 28px; padding: 14px 18px; border-radius: var(--radius-sm); font-size: 14px; color: var(--text-2);
  background: rgba(207, 197, 172, .07); border: 1px dashed var(--line-strong);
}
.bd-demo b { color: var(--gold); font-weight: 600; }
.bd-empty { padding: clamp(56px, 8vw, 96px) 0; text-align: center; color: var(--text-2); border-top: 2px solid var(--line); }
.bd-empty p { font-size: 17px; line-height: 1.8; }
.bd-empty .btn { margin-top: 28px; }

/* 표시: 공지(고정) · 진행 중 · 예정 · 종료 */
.bd-pill {
  display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 999px;
  font-size: 13px; font-weight: 600; letter-spacing: .02em; white-space: nowrap;
}
.bd-pill.is-pin, .bd-pill.is-live { background: var(--gold); color: var(--bg); }
.bd-pill.is-soon { background: rgba(207, 197, 172, .14); color: var(--gold); border: 1px solid var(--line-strong); }
.bd-pill.is-ended { background: rgba(10, 10, 11, .78); color: var(--text-2); border: 1px solid rgba(255, 255, 255, .18); }

/* ---------- 공지사항 목록 ---------- */
.nb-list { border-top: 2px solid var(--gold); }
.nb-list li { border-bottom: 1px solid var(--line); }
.nb-list a {
  display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: 20px;
  padding: 24px 8px; transition: background .3s var(--ease);
}
.nb-list a:hover { background: rgba(207, 197, 172, .05); }
.nb-no { font-size: 15px; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.nb-title { font-size: 18px; font-weight: 500; color: var(--text); line-height: 1.5; min-width: 0; transition: color .3s; }
.nb-list a:hover .nb-title { color: var(--gold); }
.nb-list li.is-pin .nb-title { font-weight: 700; }
.nb-ico { display: inline-block; vertical-align: -3px; margin-left: 6px; color: var(--muted); }
.nb-ico svg { width: 17px; height: 17px; }
.nb-list time { font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .nb-list a { grid-template-columns: 1fr; gap: 6px; padding: 20px 4px; }
  .nb-no { display: none; }
  .nb-list li.is-pin .nb-no { display: block; text-align: left; margin-bottom: 2px; }
  .nb-title { font-size: 17px; }
  .nb-list time { font-size: 14px; }
}

/* ---------- 이벤트 목록 ---------- */
.ev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3vw, 44px) clamp(20px, 2.4vw, 32px); }
.ev-grid > .bd-empty { grid-column: 1 / -1; }
.ev-card { display: block; }
.ev-ph { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.ev-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .5s; }
.ev-card:hover .ev-ph img { transform: scale(1.04); }
.ev-ph .bd-pill { position: absolute; left: 16px; top: 16px; }
.ev-noimg { position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; font-weight: 700; letter-spacing: .4em; color: var(--gold); opacity: .5; }
.ev-card h3 { margin-top: 20px; font-size: 20px; font-weight: 700; line-height: 1.45; letter-spacing: -.02em; transition: color .3s; }
.ev-card:hover h3 { color: var(--gold); }
.ev-period { margin-top: 8px; font-size: 15px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.ev-card.is-ended .ev-ph img { filter: grayscale(.85) brightness(.6); }
.ev-card.is-ended h3, .ev-card.is-ended .ev-period { color: var(--muted); }
@media (max-width: 1024px) { .ev-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ev-grid { grid-template-columns: 1fr; } .ev-card h3 { font-size: 19px; } }

/* ---------- 글 보기 ---------- */
.post { max-width: 880px; margin: 0 auto; }
.post-head { padding-bottom: 28px; border-bottom: 2px solid var(--gold); }
.post-head h2 { margin-top: 14px; font-size: clamp(26px, 3.2vw, 38px); font-weight: 700; line-height: 1.35; letter-spacing: -.03em; text-wrap: balance; }
.post-head .bd-pill:empty { display: none; }
.post-meta { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 16px; font-size: 15px; color: var(--muted); }
.post-meta b { color: var(--text-2); font-weight: 500; margin-left: 6px; }
.post-imgs { display: grid; gap: 16px; margin-top: 40px; }
.post-img { display: block; width: 100%; padding: 0; border-radius: var(--radius); overflow: hidden; background: var(--surface); cursor: zoom-in; }
.post-img img { width: 100%; height: auto; }
.post-body { margin-top: 40px; font-size: 17px; line-height: 1.95; color: var(--text); text-wrap: pretty; overflow-wrap: anywhere; }
.post-body p + p { margin-top: 1.2em; }
.post-body a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.post-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); }
.post-foot .btn svg { width: 16px; height: 16px; }
@media (max-width: 560px) { .post-foot .btn { flex: 1 1 100%; } .post-body { font-size: 16px; } }

/* ---------- 메인 팝업 ---------- */
.vp {
  position: fixed; inset: 0; z-index: 210; display: grid; place-items: center; padding: 24px 16px;
  background: rgba(4, 4, 5, .72); backdrop-filter: blur(10px) saturate(.8); -webkit-backdrop-filter: blur(10px) saturate(.8);
  opacity: 0; transition: opacity .5s var(--ease);
}
.vp.open { opacity: 1; }
.vp-box {
  position: relative; width: min(480px, 100%); max-height: calc(100svh - 48px); display: flex; flex-direction: column;
  border-radius: 6px; overflow: hidden; background: #0b0b0c;
  box-shadow: 0 0 0 1px rgba(207, 197, 172, .16), 0 40px 100px -20px rgba(0, 0, 0, .8), 0 0 80px -30px rgba(207, 197, 172, .25);
  transform: translateY(24px) scale(.97); opacity: 0;
  transition: transform .8s var(--ease) .05s, opacity .6s var(--ease) .05s;
}
/* 맨 위 금빛 선 */
.vp-box::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 3; background: linear-gradient(90deg, transparent, var(--gold) 30%, #f2e6c4 50%, var(--gold) 70%, transparent); opacity: .9; }
.vp.open .vp-box { transform: none; opacity: 1; }

.vp-x {
  position: absolute; top: 14px; right: 14px; z-index: 4; width: 40px; height: 40px; border-radius: 4px; display: grid; place-items: center;
  color: #fff; background: rgba(10, 10, 11, .55); border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .3s, color .3s, transform .4s var(--ease);
}
.vp-x:hover { background: var(--gold); color: var(--bg); }
.vp-x svg { width: 18px; height: 18px; }

.vp-track { display: flex; align-items: stretch; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; flex: 1 1 auto; min-height: 0; }
.vp-track::-webkit-scrollbar { display: none; }
.vp-slide { flex: 0 0 100%; scroll-snap-align: start; display: flex; flex-direction: column; min-width: 0; }

/* 사진: 글을 겹치지 않고 원래 비율로 (너무 길면 잘라냄), 열릴 때 살짝 줌아웃 */
.vp-media { display: block; position: relative; overflow: hidden; background: #0c0c0d; flex: none; }
.vp-media img { width: 100%; height: auto; max-height: min(52svh, 480px); object-fit: cover; transform: scale(1.06); transition: transform 1.6s var(--ease), filter .6s; }
.vp-media.is-poster img { max-height: min(60svh, 600px); object-fit: contain; }
.vp.open .vp-media img { transform: none; }
.vp-media:hover img { filter: brightness(1.06); }
.vp-media { border-bottom: 3px solid var(--gold); }
.vp-media img { display: block; }

.vp-body { padding: 26px 28px 24px; display: flex; flex-direction: column; flex: 1 1 auto; background: #1a1a1d; }
.vp-slide.is-text .vp-body { background: transparent; }
.vp-nav { background: #1a1a1d; }
/* 사진 없는 글: 은은한 금빛 + 엠블럼 워터마크 */
.vp-slide.is-text { position: relative; isolation: isolate; background: radial-gradient(120% 80% at 100% 0%, rgba(207, 197, 172, .14), transparent 60%), radial-gradient(90% 60% at 0% 100%, rgba(207, 197, 172, .06), transparent 70%); }
.vp-slide.is-text::after { content: ''; position: absolute; right: -34px; bottom: 54px; width: 220px; height: 166px; z-index: -1; background: url("../images/brand/logo_emblem.svg") no-repeat center / contain; opacity: .07; }
.vp-slide.is-text .vp-body { padding-top: 64px; padding-bottom: 32px; justify-content: center; min-height: 300px; }
.vp-kicker { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--text-2); letter-spacing: .02em; }
.vp-kicker span { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 3px; font-size: 11px; font-weight: 800; letter-spacing: .22em; color: var(--bg); background: var(--gold); }
.vp-body h3 { margin-top: 14px; font-size: clamp(21px, 2.2vw, 25px); font-weight: 800; line-height: 1.38; letter-spacing: -.035em; color: #fff; text-wrap: balance; }
.vp-slide.is-text .vp-body h3 { font-size: clamp(24px, 2.6vw, 30px); }
.vp-body h3 a { transition: color .3s; }
.vp-body h3 a:hover { color: var(--gold); }
.vp-excerpt { margin-top: 14px; font-size: 15px; line-height: 1.8; color: var(--text-2); }
.vp-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; }
.vp-meta { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.vp-more {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 18px 0 20px; border-radius: 4px; white-space: nowrap;
  font-size: 14px; font-weight: 700; color: var(--bg); background: var(--gold); transition: background .3s, box-shadow .4s;
}
.vp-more:hover { background: #e6dcc2; box-shadow: 0 8px 24px -8px rgba(207, 197, 172, .6); }
.vp-more svg { width: 16px; height: 16px; transition: transform .4s var(--ease); }
.vp-more:hover svg { transform: translateX(3px); }

/* 여러 개: 진행 막대 + 01 / 02 + 화살표 */
.vp-nav { display: flex; align-items: center; gap: 12px; padding: 0 28px 18px; }
.vp-bars { display: flex; gap: 6px; flex: 1; }
.vp-bars span { flex: 1; height: 2px; border-radius: 0; background: rgba(255, 255, 255, .14); transition: background .4s; }
.vp-bars span.on { background: var(--gold); }
.vp-count { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.vp-count b { color: var(--text); font-weight: 700; }
.vp-arrow { width: 36px; height: 36px; border-radius: 4px; display: grid; place-items: center; color: var(--text); border: 1px solid var(--line-strong); transition: background .3s, color .3s, border-color .3s; }
.vp-arrow:hover { background: var(--gold); color: var(--bg); border-color: var(--gold); }
.vp-arrow svg { width: 16px; height: 16px; }

.vp-foot { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(255, 255, 255, .07); background: #0d0d0e; flex: none; }
.vp-foot button { min-height: 52px; padding: 0 24px; font-size: 14px; color: var(--muted); transition: color .3s; }
.vp-foot button:hover { color: var(--text); }
.vp-today { display: inline-flex; align-items: center; gap: 10px; }
.vp-today i { width: 16px; height: 16px; border-radius: 2px; border: 1px solid rgba(255, 255, 255, .28); position: relative; transition: border-color .3s, background .3s; }
.vp-today:hover i { border-color: var(--gold); background: rgba(207, 197, 172, .15); }
.vp-today:hover i::after { content: ''; position: absolute; left: 5px; top: 1px; width: 4px; height: 9px; border: solid var(--gold); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.vp-foot .vp-close { color: var(--text); font-weight: 600; letter-spacing: .04em; }

@media (max-width: 520px) {
  .vp { padding: 16px 14px; align-items: center; }
  .vp-box { border-radius: 6px; }
  .vp-body { padding: 22px 22px 20px; }
  .vp-nav { padding: 0 22px 16px; }
  .vp-row { margin-top: 18px; }
  .vp-foot button { padding: 0 20px; }
  .vp-media img { max-height: 44svh; }
  .vp-media.is-poster img { max-height: 54svh; }
}
@media (prefers-reduced-motion: reduce) { .vp, .vp-box, .vp-media img { transition: none; } .vp-media img { transform: none; } }

/* 글 보기: 위 제목 영역을 작게 */
.bd-hero.is-compact { padding-top: calc(var(--header-h) + clamp(40px, 6vw, 72px)); padding-bottom: clamp(24px, 3vw, 40px); }
.bd-hero.is-compact h1 { font-size: clamp(32px, 4vw, 52px); }
.bd-hero.is-compact .lead { display: none; }
.bd-hero.is-compact .breadcrumb { margin-top: 20px; }
.vp-box:focus { outline: none; }