/* ==========================================================
   VERS - 종로 프리미엄 가라오케 바 & 클럽
   ========================================================== */

:root {
  --black: #060608;
  --black-soft: #0d0d12;
  --charcoal: #16161c;
  --charcoal-light: #1f1f28;
  --purple: #a855f7;
  --purple-light: #d8b4fe;
  --purple-deep: #7c3aed;
  --pink-neon: #ff4dd8;
  --white: #f5f5f7;
  --gray: #9a9aa5;
  --font-en: 'Orbitron', sans-serif;
  --font-kr: 'Noto Sans KR', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

/* ---------- Scroll Reveal Animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(56px) scale(0.97);
  filter: blur(4px);
  transition: opacity 0.9s cubic-bezier(.16,.84,.44,1),
              transform 0.9s cubic-bezier(.16,.84,.44,1),
              filter 0.9s ease;
  will-change: opacity, transform, filter;
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(46px) scale(0.95);
  transition: opacity 0.8s cubic-bezier(.16,.84,.44,1),
              transform 0.8s cubic-bezier(.16,.84,.44,1);
}
.reveal-stagger.in-view > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.in-view > *:nth-child(2) { transition-delay: 0.2s; }
.reveal-stagger.in-view > *:nth-child(3) { transition-delay: 0.35s; }
.reveal-stagger.in-view > *:nth-child(4) { transition-delay: 0.5s; }
.reveal-stagger.in-view > * {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.section-header { margin-bottom: 50px; }

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-kr);
  line-height: 1.7;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* HTML의 hidden 속성이 항상 이기도록 합니다.
   브라우저 기본 스타일(hidden = display:none)은 우선순위가 가장 낮아서,
   위의 `img { display:block }` 이나 `.popup-notice-overlay { display:flex }`
   같은 규칙이 있으면 hidden을 붙여도 요소가 그대로 보입니다.
   특히 화면 전체를 덮는 팝업 오버레이가 이 상태로 남으면, 눈에는 보이지
   않아도(opacity:0) 그 아래 버튼·링크의 클릭을 모두 가로챕니다. */
[hidden] { display: none !important; }

.only-desktop { display: inline; }
@media (max-width: 700px) { .only-desktop { display: none; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: 40px;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  cursor: pointer;
  border: none;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.btn-neon {
  background: linear-gradient(135deg, var(--purple-deep), var(--pink-neon));
  color: #fff;
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.6), 0 0 40px rgba(255, 77, 216, 0.25);
}
.btn-neon:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 30px rgba(168, 85, 247, 0.9), 0 0 60px rgba(255, 77, 216, 0.4);
}

.btn-outline {
  background: transparent;
  color: var(--purple-light);
  border: 1.5px solid var(--purple);
}
.btn-outline:hover {
  background: rgba(168, 85, 247, 0.12);
  transform: translateY(-2px);
}

.btn-block { width: 100%; padding: 16px; font-size: 1.05rem; }

/* ---------- Section shared ---------- */
.section-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 100px 24px;
}

.section-tag {
  font-family: var(--font-en);
  color: var(--purple-light);
  letter-spacing: 3px;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 14px;
  text-align: center;
}
.section-tag.light { color: #fff; opacity: 0.85; }

.section-title {
  font-size: 2.1rem;
  font-weight: 900;
  text-align: center;
  margin-bottom: 22px;
  line-height: 1.4;
}
.section-title.light { color: #fff; }

.section-desc {
  text-align: center;
  color: var(--gray);
  max-width: 720px;
  margin: 0 auto 50px;
  font-size: 1.02rem;
}
.section-desc.light { color: rgba(255,255,255,0.8); }
.section-desc a { color: var(--purple-light); text-decoration: underline; }

/* ---------- 우측 상단 컨트롤 묶음 (배경음악 + 언어) ---------- */
.top-controls {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ---------- Language Switcher ---------- */
.lang-switcher {
  position: relative;   /* 모바일 드롭다운의 기준점 */
  display: flex;
  align-items: center;
  gap: 6px;
}
.lang-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid rgba(168, 85, 247, 0.25);
  border-radius: 50%;
  background: rgba(6, 6, 8, 0.55);
  backdrop-filter: blur(10px);
  color: var(--purple-light);
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.25s ease;
}
.lang-toggle:hover { color: #fff; border-color: rgba(168,85,247,0.5); }
.lang-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  background: rgba(6, 6, 8, 0.55);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(168, 85, 247, 0.25);
  border-radius: 30px;
  padding: 6px;
}
.lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: var(--gray);
  font-family: var(--font-en), var(--font-kr);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 7px 12px;
  border-radius: 20px;
  cursor: pointer;      /* 눌러서 언어를 바꿀 수 있습니다 */
  user-select: none;
  white-space: nowrap;
  line-height: 1.2;
  transition: all 0.25s ease;
}
.lang-btn:hover { color: var(--purple-light); background: rgba(168,85,247,0.14); }
.lang-btn.active {
  background: linear-gradient(135deg, var(--purple-deep), var(--pink-neon));
  color: #fff;
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.6);
}

@media (max-width: 700px) {
  .top-controls { top: 14px; right: 14px; gap: 8px; }
  .lang-toggle { display: flex; }
  .lang-list {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    display: none;
  }
  .lang-switcher.is-open .lang-list { display: flex; }
  .lang-btn { padding: 7px 14px; font-size: 0.68rem; text-align: center; min-width: 44px; white-space: nowrap; }
}

/* ---------- Membership Badge ---------- */
.membership-badge {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(6, 6, 8, 0.55);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(168, 85, 247, 0.4);
  border-radius: 30px;
  padding: 8px 18px;
  font-family: var(--font-en);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--purple-light);
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.35);
  white-space: nowrap;
}
.membership-badge i {
  font-size: 0.78rem;
  color: var(--pink-neon);
  filter: drop-shadow(0 0 6px rgba(255, 77, 216, 0.7));
}

@media (max-width: 700px) {
  .membership-badge { padding: 6px 12px; font-size: 0.58rem; gap: 5px; letter-spacing: 0.8px; }
  .membership-badge i { font-size: 0.62rem; }
}
@media (max-width: 420px) {
  .membership-badge { padding: 5px 10px; font-size: 0.48rem; gap: 4px; letter-spacing: 0.4px; }
  .membership-badge i { font-size: 0.55rem; }
}

/* ---------- Top Logo ---------- */
.top-logo {
  position: fixed;
  top: 20px;
  left: 24px;
  z-index: 1000;
  display: block;
}
.top-logo img {
  height: 48px;
  width: auto;
  filter: drop-shadow(0 0 12px rgba(168, 85, 247, 0.5));
  transition: transform 0.25s ease;
}
.top-logo:hover img { transform: scale(1.05); }

@media (max-width: 560px) {
  .top-logo { top: 14px; left: 16px; }
  .top-logo img { height: 36px; }
}

/* ---------- 배경음악 플레이어 (우측 상단, 언어 선택 옆) ----------
   재생/정지 버튼 + 음악이 흐르는 동안 움직이는 이퀄라이저 막대 */
.bgm-player {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;          /* 알약 전체가 재생/정지 스위치입니다 */
  padding: 4px 13px 4px 4px;
  border: 1px solid rgba(168,85,247,0.28);
  border-radius: 999px;
  background: rgba(6,6,8,0.55);
  backdrop-filter: blur(10px);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.bgm-player:hover { border-color: rgba(168,85,247,0.55); }
.bgm-player.is-playing {
  border-color: rgba(168,85,247,0.6);
  box-shadow: 0 0 18px rgba(168,85,247,0.28);
}

.bgm-btn {
  width: 30px; height: 30px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--purple-deep), var(--purple));
  color: #fff;
  font-size: 0.72rem;
  padding-left: 2px;          /* ▶ 아이콘 시각 보정 */
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bgm-player.is-playing .bgm-btn { padding-left: 0; }
.bgm-btn:hover { transform: scale(1.08); box-shadow: 0 0 14px rgba(168,85,247,0.6); }

/* 이퀄라이저 막대 — 재생 중에만 움직입니다 */
.bgm-eq {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}
.bgm-eq i {
  width: 2px;
  height: 3px;
  border-radius: 1px;
  background: rgba(216,180,254,0.45);
  transition: height 0.2s ease, background 0.25s ease;
}
.bgm-player.is-playing .bgm-eq i {
  background: var(--purple-light);
  animation: bgmEq 0.9s ease-in-out infinite;
}
.bgm-player.is-playing .bgm-eq i:nth-child(2) { animation-delay: 0.18s; }
.bgm-player.is-playing .bgm-eq i:nth-child(3) { animation-delay: 0.36s; }
.bgm-player.is-playing .bgm-eq i:nth-child(4) { animation-delay: 0.54s; }
@keyframes bgmEq {
  0%, 100% { height: 3px; }
  50%      { height: 14px; }
}

@media (max-width: 560px) {
  .bgm-player { gap: 7px; padding: 3px 10px 3px 3px; }
  .bgm-btn { width: 28px; height: 28px; font-size: 0.68rem; }
  .bgm-eq { height: 12px; }
  @keyframes bgmEq { 0%, 100% { height: 3px; } 50% { height: 12px; } }
}
/* 브라우저가 자동재생을 막았을 때 — 눌러서 켤 수 있다는 걸 알리는 은은한 깜빡임 */
.bgm-player.needs-gesture {
  animation: bgmHint 2s ease-in-out infinite;
}
@keyframes bgmHint {
  0%, 100% { box-shadow: 0 0 0 rgba(168,85,247,0); border-color: rgba(168,85,247,0.28); }
  50%      { box-shadow: 0 0 20px rgba(168,85,247,0.55); border-color: rgba(168,85,247,0.85); }
}

/* 움직임을 줄이도록 설정한 사용자에게는 애니메이션을 멈춥니다 */
@media (prefers-reduced-motion: reduce) {
  .bgm-player.is-playing .bgm-eq i { animation: none; height: 9px; }
  .bgm-player.needs-gesture { animation: none; border-color: rgba(168,85,247,0.8); }
}

/* ---------- Hero (fullscreen video) ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  height: 100vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
  padding: 24px;
  padding-bottom: 110px;
  overflow: hidden;
  background: var(--black);
}

.hero-video {
  position: absolute;
  top: 50%; left: 50%;
  width: 100%; height: 100%;
  min-width: 100%; min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 0;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(6,6,8,0.55) 0%, rgba(6,6,8,0.35) 40%, rgba(6,6,8,0.75) 100%),
    radial-gradient(circle at 15% 20%, rgba(255, 77, 216, 0.15), transparent 40%),
    radial-gradient(circle at 85% 75%, rgba(168, 85, 247, 0.18), transparent 45%);
  pointer-events: none;
}

/* 데스크톱에서는 숨기고, 모바일 화면에서만 히어로 상단에 로고 노출 (투명 배경 PNG)
   ※ 컨테이너(.hero-logo-wrap) 크기를 미디어쿼리에서 '고정 px'로 지정해두고,
     이미지는 그 안에서 object-fit: contain으로 비율을 유지한 채 맞춰지도록 함.
     → 느린 모바일 네트워크에서 이미지가 늦게 로드되어도 컨테이너 크기/중앙 위치(left:50% + translateX(-50%))가
       로딩 전후로 절대 바뀌지 않아, 그림자가 우측으로 밀리거나 재로딩이 필요한 문제가 발생하지 않음 */
.hero-logo-wrap {
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  align-items: center;
  justify-content: center;
}
.hero-logo {
  position: relative;
  z-index: 2;
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* 이미지 자체와 무관하게, 로고 뒤에 항상 확실하게 보이는 네온 그림자(halo)를 별도 레이어로 배치.
   흐릿한 blur 대신 여러 겹의 box-shadow(네온사인 스타일)로 또렷하고 선명하게 표현 */
.hero-logo-shadow {
  position: absolute;
  left: 50%; top: 50%;
  width: 62%; height: 62%;
  transform: translate(-50%, -50%);
  z-index: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(216, 180, 254, 0.9), rgba(168, 85, 247, 0.7) 35%, transparent 70%);
  box-shadow:
    0 0 30px 10px rgba(168, 85, 247, 0.7),
    0 0 60px 22px rgba(255, 77, 216, 0.45);
  animation: heroLogoGlow 2.6s ease-in-out infinite;
}

@keyframes heroLogoGlow {
  0%, 100% {
    opacity: 0.75;
    transform: translate(-50%, -50%) scale(0.92);
    box-shadow:
      0 0 24px 8px rgba(168, 85, 247, 0.6),
      0 0 48px 16px rgba(255, 77, 216, 0.35);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.12);
    box-shadow:
      0 0 42px 16px rgba(168, 85, 247, 0.95),
      0 0 85px 30px rgba(255, 77, 216, 0.65);
  }
}

@media (max-width: 700px) {
  .hero-logo-wrap { display: flex; top: 170px; width: 280px; height: 192px; }
}
@media (max-width: 420px) {
  .hero-logo-wrap { top: 155px; width: 240px; height: 162px; }
}

.hero-glow-ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 60vw; height: 60vw;
  max-width: 700px; max-height: 700px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168,85,247,0.25), transparent 65%);
  z-index: 1;
  pointer-events: none;
  animation: heroGlowPulse 6s ease-in-out infinite;
}
@keyframes heroGlowPulse {
  0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
}

.hero-content { max-width: 900px; z-index: 2; position: relative; }

.hero-anim {
  opacity: 0;
  transform: translateY(34px);
  animation: heroFadeUp 1.1s cubic-bezier(.16,.84,.44,1) forwards;
}
.hero-content .hero-tagline.hero-anim { animation-delay: 0.55s; }
.scroll-down.hero-anim { animation-delay: 1s; }
@keyframes heroFadeUp {
  to { opacity: 1; transform: translateY(0); }
}

.hero-title {
  font-size: 3.4rem;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: -0.5px;
  margin-bottom: 22px;
  background: linear-gradient(135deg, #fff, var(--purple-light), var(--pink-neon), #fff);
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  transform: translateY(34px);
  animation:
    heroFadeUp 1.1s cubic-bezier(.16,.84,.44,1) 0.25s forwards,
    heroTitleShine 7s linear infinite 1.4s;
}
@keyframes heroTitleShine {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

.hero-tagline {
  font-family: var(--font-en);
  color: var(--purple-light);
  letter-spacing: 5px;
  font-size: 1rem;
  text-transform: uppercase;
}

.scroll-down {
  position: absolute;
  bottom: 30px; left: 50%;
  transform: translateX(-50%);
  color: var(--gray);
  font-size: 0.75rem;
  letter-spacing: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.scroll-down span {
  width: 1px; height: 30px;
  background: linear-gradient(to bottom, var(--purple), transparent);
  animation: scrollMove 2s infinite;
}
@keyframes scrollMove {
  0% { opacity: 0; transform: translateY(-10px); }
  50% { opacity: 1; }
  100% { opacity: 0; transform: translateY(10px); }
}

/* ---------- About ---------- */
.about { background: var(--black-soft); }

.about-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 60px;
}

.about-card {
  position: relative;
  background: var(--charcoal);
  border: 1px solid rgba(168, 85, 247, 0.15);
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
  overflow: hidden;
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.about-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(168,85,247,0.18), transparent 60%);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.about-card:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: rgba(168, 85, 247, 0.6);
  box-shadow: 0 16px 40px rgba(168, 85, 247, 0.25);
}
.about-card:hover::before { opacity: 1; }
.about-card i {
  font-size: 1.8rem;
  color: var(--purple-light);
  margin-bottom: 16px;
  position: relative;
  transition: transform 0.35s ease, filter 0.35s ease;
}
.about-card:hover i { transform: scale(1.15) rotate(-4deg); filter: drop-shadow(0 0 10px rgba(168,85,247,0.8)); }
.about-card h3 { font-size: 1.1rem; margin-bottom: 10px; }
.about-card p { color: var(--gray); font-size: 0.92rem; }

.photo-placeholder-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.photo-placeholder {
  aspect-ratio: 4/3;
  background: repeating-linear-gradient(45deg, var(--charcoal), var(--charcoal) 10px, var(--charcoal-light) 10px, var(--charcoal-light) 20px);
  border: 1px dashed rgba(168, 85, 247, 0.35);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--gray);
  font-size: 0.85rem;
  text-align: center;
  padding: 10px;
}
.photo-placeholder i { font-size: 1.8rem; color: rgba(168,85,247,0.6); }
.photo-placeholder.large { aspect-ratio: unset; min-height: 340px; flex: 1; }

/* ---------- 대관 공간 사진 (한 장) ---------- */
.rental-photo {
  position: relative;
  flex: 1;
  min-height: 340px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--charcoal);
}
/* 이미지를 흐름에서 빼(absolute) 박스 높이가 사진 비율에 끌려가지 않게 합니다.
   (세로로 긴 사진을 넣으면 박스가 세로로 과하게 늘어나던 문제 방지)
   박스 높이는 왼쪽 정보 컬럼에 맞춰지고, 사진은 그 안을 채우며 위아래를 살짝 잘라 보여줍니다. */
.rental-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 사진이 없을 때 자리를 지키는 placeholder 는 흐름에 따라 크기를 갖도록 */
.rental-photo > .photo-placeholder { position: relative; }
.rental-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px 18px 14px;
  font-size: 0.85rem;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
}

/* ---------- Interior ---------- */
.interior { background: var(--black); position: relative; overflow: hidden; }
.interior-glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(168, 85, 247, 0.16), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(255, 77, 216, 0.14), transparent 45%);
  pointer-events: none;
}
.interior .section-inner { position: relative; z-index: 2; }

/* ---------- Film-strip Gallery Carousel ---------- */
/* 중앙 슬라이드는 크고 선명하게, 좌우 슬라이드는 절반만 보이며 필름처럼 흐르는 형태 */
.film-carousel {
  max-width: 900px;
  margin: 0 auto;
}
.film-carousel.wide { max-width: 1080px; }

.film-track-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 26px 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(168,85,247,0.06), transparent 70%),
    #050506;
  box-shadow:
    inset 0 0 0 1px rgba(168,85,247,0.18),
    0 25px 60px rgba(0,0,0,0.55),
    0 0 50px rgba(168,85,247,0.15);
}

.film-perf {
  position: absolute;
  left: 0; right: 0;
  height: 20px;
  z-index: 3;
  background-image: repeating-linear-gradient(90deg, transparent 0 6px, rgba(0,0,0,0.85) 6px 16px);
  background-color: #0a0a0d;
  background-size: 26px 20px;
}
.film-perf-top { top: 0; box-shadow: 0 4px 10px rgba(0,0,0,0.4); }
.film-perf-bottom { bottom: 0; box-shadow: 0 -4px 10px rgba(0,0,0,0.4); }

.film-track {
  display: flex;
  align-items: center;
  gap: 18px;
  will-change: transform;
}

.film-slide {
  position: relative;
  flex: 0 0 42%;
  aspect-ratio: 16/12;   /* 세로를 키움 (기존 16/10 → 16/12, 약 20% 높아짐) */
  border-radius: 14px;
  overflow: hidden;
  will-change: transform, opacity, filter;
  transition: box-shadow 0.5s ease;
  box-shadow: 0 0 0 1px rgba(168,85,247,0.15);
  z-index: 1;
}
.film-slide.is-center {
  box-shadow:
    0 0 0 2px rgba(168,85,247,0.6),
    0 25px 50px rgba(0,0,0,0.6),
    0 0 45px rgba(168,85,247,0.4);
  z-index: 3;
}
.film-slide.is-adjacent {
  z-index: 2;
}

.film-slide-inner {
  position: relative;
  width: 100%; height: 100%;
  background: repeating-linear-gradient(45deg, var(--charcoal), var(--charcoal) 12px, var(--charcoal-light) 12px, var(--charcoal-light) 24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--gray);
}
.film-slide-inner::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg, rgba(168,85,247,0.16), transparent 55%),
    linear-gradient(-45deg, rgba(255,77,216,0.12), transparent 55%);
}
.film-slide-inner i {
  font-size: 2.6rem;
  color: rgba(216,180,254,0.75);
  filter: drop-shadow(0 0 18px rgba(168,85,247,0.5));
  position: relative; z-index: 1;
  transition: font-size 0.65s ease;
}
.film-slide.is-center .film-slide-inner i { font-size: 3.4rem; }
.film-caption {
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  position: relative; z-index: 1;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
  opacity: 0;
  transition: opacity 0.5s ease;
  text-align: center;
  padding: 0 12px;
}
.film-slide.is-center .film-caption { font-size: 1rem; opacity: 1; }
.film-badge {
  position: absolute;
  top: 16px; left: 16px;
  font-family: var(--font-en);
  font-size: 0.7rem;
  letter-spacing: 2px;
  color: var(--purple-light);
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(168,85,247,0.4);
  border-radius: 20px;
  padding: 4px 10px;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.film-slide.is-center .film-badge { opacity: 1; }

/* 관리자 페이지에서 업로드한 실제 사진이 표시되는 슬라이드 (아이콘 placeholder 대신) */
.film-slide-inner.film-slide-photo {
  background: #000;
  padding: 0;
}
.film-slide-inner.film-slide-photo img,
.film-slide-inner.film-slide-photo video,
.film-slide-inner.film-slide-photo .film-embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  z-index: 0;
}
/* 영상 슬라이드의 재생 버튼 (클릭하면 확대 보기에서 재생됩니다) */
.film-slide-inner.film-slide-photo .film-play-badge {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 54px; height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10,6,18,0.62);
  border: 1px solid rgba(168,85,247,0.75);
  box-shadow: 0 0 24px rgba(168,85,247,0.5);
  color: #fff;
  font-size: 1.05rem;
  padding-left: 4px;   /* 삼각형 아이콘 시각 보정 */
  z-index: 2;
  pointer-events: none;
  transition: transform 0.25s ease, background 0.25s ease;
}
.film-slide-inner.film-slide-photo:hover .film-play-badge {
  transform: translate(-50%, -50%) scale(1.08);
  background: rgba(168,85,247,0.55);
}
/* 썸네일을 못 가져오는 영상 링크(비메오 등)용 배경 */
.film-slide-inner.film-slide-photo .film-video-fallback {
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, rgba(124,58,237,0.35), rgba(0,0,0,0.75));
  z-index: 0;
}
.film-caption.is-photo {
  position: absolute;
  left: 0; right: 0; bottom: 14px;
  z-index: 2;
}

.film-edge {
  position: absolute;
  top: 0; bottom: 0;
  width: 14%;
  z-index: 4;
  pointer-events: none;
}
.film-edge-left { left: 0; background: linear-gradient(90deg, #050506 15%, transparent); }
.film-edge-right { right: 0; background: linear-gradient(-90deg, #050506 15%, transparent); }

/* ---------- Big Screen / Stage ---------- */
.screen-section {
  position: relative;
  background: linear-gradient(135deg, #0d0618, #060608 65%);
  overflow: hidden;
}
.screen-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 25% 25%, rgba(168, 85, 247, 0.22), transparent 45%),
    radial-gradient(circle at 80% 80%, rgba(255, 77, 216, 0.18), transparent 45%);
}
.screen-section .section-inner { position: relative; z-index: 2; }

.screen-box {
  display: flex;
  gap: 32px;
  align-items: stretch;
}
.screen-photo {
  position: relative;
  flex: 1.4;
  min-height: 380px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--charcoal);
}
/* 이미지를 흐름에서 빼(absolute) 박스가 사진 비율에 끌려 세로로 늘어나지 않게 합니다.
   (대관 사진과 동일한 처리) 세로 사진은 가운데를 크게 보이며 위아래를 살짝 잘라 표시합니다. */
.screen-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.screen-photo i { font-size: 2.6rem; }
.screen-feature-card {
  flex: 1;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  padding: 34px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  backdrop-filter: blur(6px);
}
.screen-feature-card i {
  font-size: 2rem;
  color: var(--purple-light);
  margin-bottom: 16px;
}
.screen-feature-card h3 { font-size: 1.2rem; margin-bottom: 12px; color: #fff; }
.screen-feature-card p { color: rgba(255,255,255,0.78); font-size: 0.95rem; }

/* ---------- Events ---------- */
.events { background: var(--black-soft); position: relative; }

/* ---------- Club Day ---------- */
.clubday {
  position: relative;
  background: linear-gradient(135deg, #1a0b2e, #060608 60%);
  overflow: hidden;
}
.clubday-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 77, 216, 0.25), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(124, 58, 237, 0.3), transparent 45%);
}
.clubday .section-inner { position: relative; z-index: 2; }

.clubday-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.clubday-item {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 26px 22px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  backdrop-filter: blur(6px);
}
.clubday-item i { font-size: 1.4rem; color: var(--purple-light); margin-top: 4px; }
.clubday-item h4 { font-size: 1rem; margin-bottom: 6px; color: #fff; }
.clubday-item p { color: rgba(255,255,255,0.75); font-size: 0.9rem; }

/* ---------- Rental ---------- */
.rental { background: var(--black-soft); }

.rental-box {
  display: flex;
  gap: 40px;
  align-items: stretch;
}
.rental-info { flex: 1.1; }

.rental-list { display: flex; flex-direction: column; gap: 22px; margin-bottom: 32px; }
.rental-list li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.rental-list i {
  font-size: 1.3rem;
  color: var(--purple-light);
  margin-top: 4px;
  width: 24px;
  text-align: center;
}
.rental-list strong { display: block; margin-bottom: 4px; color: #fff; font-size: 1rem; }
.rental-list span { color: var(--gray); font-size: 0.92rem; }

.rental-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.rental-cta .btn-neon { animation: rentalPulse 2.6s ease-in-out infinite; }
@keyframes rentalPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(168, 85, 247, 0.6), 0 0 40px rgba(255, 77, 216, 0.25); }
  50% { box-shadow: 0 0 32px rgba(168, 85, 247, 0.95), 0 0 60px rgba(255, 77, 216, 0.45); }
}
.rental-note { color: var(--gray); font-size: 0.82rem; }

/* ---------- Goods (coming soon) ---------- */
.goods { background: var(--black-soft); }

.coming-soon-box {
  position: relative;
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
  background: linear-gradient(160deg, var(--charcoal), var(--black-soft));
  border: 1px dashed rgba(168,85,247,0.4);
  border-radius: 20px;
  padding: 50px 30px;
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.coming-soon-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(168,85,247,0.25);
}
.coming-soon-box::before {
  content: '';
  position: absolute;
  inset: -50%;
  background: conic-gradient(from 0deg, transparent, rgba(168,85,247,0.15), transparent 30%);
  animation: comingSoonSpin 8s linear infinite;
  pointer-events: none;
}
@keyframes comingSoonSpin { to { transform: rotate(360deg); } }
.coming-soon-box i {
  font-size: 2.4rem;
  color: var(--purple-light);
  margin-bottom: 16px;
}
.coming-soon-box h3 {
  font-family: var(--font-en);
  letter-spacing: 3px;
  font-size: 1.3rem;
  margin-bottom: 12px;
  color: #fff;
}
.coming-soon-box p { color: var(--gray); font-size: 0.92rem; }

/* ---------- Location ---------- */
.location-grid {
  display: flex;
  gap: 40px;
  align-items: stretch;
}
.location-info { flex: 1; display: flex; flex-direction: column; gap: 24px; justify-content: center; }
.location-item { display: flex; gap: 16px; align-items: flex-start; }
.location-item i { font-size: 1.3rem; color: var(--purple-light); margin-top: 4px; width: 24px; text-align: center; }
.location-item h4 { font-size: 0.98rem; margin-bottom: 4px; color: #fff; }
.location-item p { color: var(--gray); font-size: 0.92rem; }
.location-item a { color: var(--purple-light); }

.map-placeholder {
  flex: 1;
  min-height: 320px;
  background: repeating-linear-gradient(45deg, var(--charcoal), var(--charcoal) 10px, var(--charcoal-light) 10px, var(--charcoal-light) 20px);
  border: 1px dashed rgba(168,85,247,0.35);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--gray);
  font-size: 0.9rem;
}
.map-placeholder i { font-size: 2rem; color: rgba(168,85,247,0.6); }

/* 매장 위치 지도 (images/map.png)
   컨테이너 비율을 잘라낸 지도 이미지와 똑같이 3:2 로 두어, 어떤 화면 폭에서도
   지도가 잘리지 않고(= 종로3가역 출구 번호가 모두 보이도록) 표시됩니다.
   align-self:center 는 부모의 stretch 를 풀어 비율대로 높이를 갖게 합니다. */
.location-map {
  position: relative;
  flex: 1;
  align-self: center;
  aspect-ratio: 3 / 2;
  border: 1px solid rgba(168,85,247,0.35);
  border-radius: 16px;
  overflow: hidden;
  background: var(--charcoal);
}
.location-map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 지도 핀 아래 매장 이름표.
   핀은 이미지(835x557) 안에서 x 400~422, y 160~190 위치에 있으므로,
   핀 중심(49.2%) 바로 아래(35.2%)에 %로 배치합니다.
   이미지와 컨테이너 비율이 같아(3:2) 화면 크기가 변해도 어긋나지 않습니다. */
.location-map-label {
  position: absolute;
  left: 49.2%;
  top: 35.2%;
  transform: translateX(-50%);
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(8,5,16,0.9);
  border: 1px solid rgba(168,85,247,0.8);
  color: #fff;
  font-family: var(--font-en);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.5;
  white-space: nowrap;
  box-shadow: 0 0 16px rgba(168,85,247,0.6), 0 2px 8px rgba(0,0,0,0.5);
  pointer-events: none;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--black);
  border-top: 1px solid rgba(168,85,247,0.15);
  padding: 50px 24px 30px;
  text-align: center;
}
.footer-logo { height: 40px; margin: 0 auto 16px; }
.footer-desc { color: var(--gray); font-size: 0.9rem; margin-bottom: 20px; }
.footer-social { display: flex; gap: 20px; justify-content: center; margin-bottom: 20px; }
.footer-social a {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.25s;
  color: var(--gray);
}
.footer-social a:hover { border-color: var(--purple); color: var(--purple-light); }
.footer-copy { color: #555; font-size: 0.78rem; }

/* 저작권 문구 줄 — 문구는 가운데, 관리자 링크는 같은 줄 오른쪽 끝.
   오른쪽 아래에는 '맨 위로' 버튼이 고정되어 있어(50px + 여백 24px),
   그 버튼에 가리지 않도록 오른쪽 여백을 비워둡니다. */
.footer-bottom {
  position: relative;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-bottom .footer-copy { margin: 0; }
.footer-bottom .footer-admin-link {
  position: absolute;
  right: 82px;
  top: 50%;
  transform: translateY(-50%);
}
.footer-admin-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  border: 1px solid rgba(168,85,247,0.22);
  border-radius: 999px;
  color: #6a6a76;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.footer-admin-link i { font-size: 0.68rem; }
.footer-admin-link:hover {
  color: var(--purple-light);
  border-color: rgba(168,85,247,0.6);
  background: rgba(168,85,247,0.08);
}

@media (max-width: 860px) {
  /* 화면이 좁아지면 저작권 문구와 겹칠 수 있으므로 아래 줄로 내려 가운데 정렬
     (모바일에서는 '맨 위로' 버튼과 겹칠 여지도 함께 사라집니다) */
  .footer-bottom { flex-direction: column; gap: 16px; }
  .footer-bottom .footer-admin-link {
    position: static;
    transform: none;
  }
}

/* ---------- 갤러리 확대 보기(라이트박스) ----------
   필름스트립의 사진·영상을 클릭하면 화면 가득 크게 봅니다. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 20px;
  background: rgba(4,3,8,0.94);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.lightbox.is-visible { opacity: 1; }
.lightbox-stage {
  max-width: min(1200px, 92vw);
  max-height: 86vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-stage img,
.lightbox-stage video {
  max-width: min(1200px, 92vw);
  max-height: 86vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 30px 90px rgba(0,0,0,0.7), 0 0 70px rgba(168,85,247,0.18);
}
.lightbox-stage iframe {
  width: min(1100px, 92vw);
  aspect-ratio: 16 / 9;
  max-height: 86vh;
  border: 0;
  border-radius: 10px;
}
.lightbox-close,
.lightbox-nav {
  position: absolute;
  border: 1px solid rgba(168,85,247,0.4);
  background: rgba(0,0,0,0.55);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.lightbox-close:hover,
.lightbox-nav:hover { background: rgba(168,85,247,0.5); border-color: var(--purple); }
.lightbox-close {
  top: 18px; right: 18px;
  width: 44px; height: 44px;
  font-size: 1.15rem;
}
.lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 46px; height: 46px;
  font-size: 1.05rem;
}
.lightbox-prev { left: 18px; }
.lightbox-next { right: 18px; }
.lightbox-counter {
  position: absolute;
  bottom: 20px; left: 0; right: 0;
  text-align: center;
  color: var(--gray);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
}
/* 확대해서 볼 수 있는 슬라이드에는 마우스 커서로 표시 */
.film-slide-inner.film-slide-photo.is-zoomable { cursor: zoom-in; }

@media (max-width: 700px) {
  .lightbox { padding: 56px 12px; }
  .lightbox-close { top: 12px; right: 12px; width: 40px; height: 40px; }
  .lightbox-nav { width: 40px; height: 40px; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
}

/* ---------- Scroll to Top Button ---------- */
.scroll-top-btn {
  position: fixed;
  right: 24px;
  bottom: 28px;
  z-index: 999;
  width: 50px; height: 50px;
  border-radius: 50%;
  border: 1px solid rgba(168,85,247,0.45);
  background: linear-gradient(135deg, rgba(124,58,237,0.9), rgba(255,77,216,0.85));
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 26px rgba(168,85,247,0.5);
  opacity: 0;
  transform: translateY(16px) scale(0.85);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease, box-shadow 0.25s ease;
}
.scroll-top-btn.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
/* 맨 아래까지 내려가 푸터의 ADMIN 버튼과 겹칠 때만 살짝 위로 올립니다. */
.scroll-top-btn.is-raised { bottom: 96px; }
.scroll-top-btn:hover {
  box-shadow: 0 10px 30px rgba(0,0,0,0.55), 0 0 36px rgba(168,85,247,0.75);
  transform: translateY(-3px) scale(1.05);
}

@media (max-width: 560px) {
  .scroll-top-btn { right: 16px; bottom: 18px; width: 44px; height: 44px; font-size: 1rem; }
  .scroll-top-btn.is-raised { bottom: 84px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .about-grid, .clubday-info { grid-template-columns: 1fr; }
  .rental-box, .location-grid, .screen-box { flex-direction: column; }
  /* 세로로 쌓일 때는 지도가 가로 폭을 꽉 채우도록 (비율은 그대로 3:2 유지) */
  .location-map { align-self: stretch; width: 100%; }
  .location-map-label { font-size: 0.62rem; padding: 3px 8px; }
  .screen-photo { min-height: 260px; }
  .film-slide { flex-basis: 62%; }
  .film-edge { width: 8%; }
}

@media (max-width: 560px) {
  .section-title { font-size: 1.6rem; }
  .hero { padding-bottom: 90px; }
  .hero-title { font-size: 2.1rem; }
  .hero-tagline { font-size: 0.8rem; letter-spacing: 3px; }
  .section-inner { padding: 70px 20px; }
  .film-slide-inner i { font-size: 1.8rem; }
  .film-slide.is-center .film-slide-inner i { font-size: 2.4rem; }
  .film-slide { flex-basis: 82%; }
  .film-edge { width: 4%; }
}

/* ---------- Popup Notice (관리자 페이지에서 등록한 팝업 공지) ---------- */
/* 팝업 공지
   - height: 100vh + align-items: center → 처음 로딩됐을 때 보이는 첫 화면의
     정중앙에 놓입니다.
   - position: absolute (fixed 아님) → 스크롤을 내리면 화면을 따라오지 않고
     그 자리에 남아 위로 사라집니다.
   - 배경을 어둡게 하거나 흐리게 하지 않습니다.
   - pointer-events: none → 팝업 상자 밖 영역은 클릭이 그대로 통과하므로
     바깥을 눌러도 닫히지 않고, 아래 콘텐츠도 정상적으로 조작됩니다. */
/* 이미지 전용 팝업 공지 (여러 개를 그리드로 표시)
   - position: absolute → 배경을 어둡게 가리지 않고, 스크롤하면 페이지와 함께
     위로 사라집니다. pointer-events:none 이라 팝업 바깥 클릭은 그대로 통과합니다. */
.popup-notice-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 90px 16px 40px;   /* 상단 로고·컨트롤과 겹치지 않도록 */
  background: none;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.popup-notice-overlay.is-visible { opacity: 1; }

@media (max-width: 700px) {
  .popup-notice-overlay { padding: 72px 12px 32px; }
}

/* 팝업 그리드 — 1개는 가운데, 여러 개는 가로로 늘어놓고 넘치면 다음 줄 */
.popup-notice-grid {
  /* 그리드의 빈 공간은 클릭을 통과시키고(=아래 언어 메뉴 등이 눌리게),
     실제 팝업 카드만 클릭을 받도록 합니다. (모바일에서 언어 드롭다운이
     팝업 영역과 겹쳐도 정상 동작하게 하는 핵심) */
  pointer-events: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
  max-width: calc(360px * 3 + 20px * 2);
}

/* 각 공지 = 독립된 이미지 카드 (vers 네온 퍼플 톤) */
.popup-notice-card {
  pointer-events: auto;   /* 카드 자체는 정상적으로 클릭 가능 */
  position: relative;
  flex: 0 0 auto;
  width: fit-content;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--black-soft);
  border: 1px solid rgba(168,85,247,0.35);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6), 0 0 44px rgba(168,85,247,0.2);
  animation: popupNoticeIn 0.35s cubic-bezier(.16,.84,.44,1);
}
@keyframes popupNoticeIn {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* 이미지 (링크가 있으면 <a>, 없으면 <div>) — 원본 비율 그대로 밀착 */
.popup-notice-item { display: block; position: relative; overflow: hidden; line-height: 0; }
.popup-notice-item img {
  display: block;
  width: auto; height: auto;
  max-width: min(clamp(240px, 34vw, 360px), calc(100vw - 44px));
  max-height: 64vh;
  transition: transform 0.5s ease;
}
a.popup-notice-item { cursor: pointer; }
a.popup-notice-item::after {   /* 링크 있음을 알리는 화살표 배지 */
  content: '\f35d';
  font-family: 'Font Awesome 6 Free'; font-weight: 900;
  position: absolute; top: 8px; right: 8px;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(6,4,12,0.65); color: var(--purple-light);
  font-size: 0.7rem;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(-4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
a.popup-notice-item:hover img { transform: scale(1.05); }
a.popup-notice-item:hover::after { opacity: 1; transform: translateY(0); }

/* 하단 조작 줄 — 왼쪽 "오늘 다시 보지 않기", 오른쪽 닫기 X */
.popup-notice-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.popup-notice-dismiss {
  font-size: 0.72rem;
  color: var(--gray);
  text-decoration: underline;
  padding: 2px 0;
  cursor: pointer;
  background: none;
  border: none;
}
.popup-notice-dismiss:hover { color: var(--purple-light); }
.popup-notice-close {
  width: 26px; height: 26px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.06);
  color: var(--gray);
  font-size: 0.9rem;
  cursor: pointer;
}
.popup-notice-close:hover { background: rgba(168,85,247,0.6); color: #fff; }