:root {
  --gold: #ffd700;
  --header-bg: #232324ee;
  --scroll-bg: #323435ef;
}
html, body {margin:0;padding:0;}
body {background: #f8fafc; font-family: 'Pretendard','Noto Sans KR',Arial,sans-serif;}

/* --- PC/태블릿 헤더 --- */
.main-header {
  position: fixed; left:0; right:0; top:0; height:56px; z-index:1102;
  background: var(--header-bg); display: flex; align-items: center; box-shadow: 0 2px 12px #0002;
}
.header-inner {width:100%;max-width:1240px;margin:0 auto;display:flex;align-items:center;padding:0 24px;}
.logo { color:var(--gold); font-size:1.36rem; font-weight:900; text-decoration:none; margin-right:38px;}
.main-menu { display: flex; gap: 30px; flex:1; justify-content:flex-end;}
.main-menu a { color:#fffde0; text-decoration:none; padding: 11px 9px; font-weight:800; border-bottom:2px solid transparent; }
.main-menu a.active {color:var(--gold);border-bottom:2px solid var(--gold);}

.sub-scroll-menu {
  position:fixed;top:56px;left:0;right:0;height:44px;z-index:1101;
  background:var(--scroll-bg); display:flex; align-items:center; border-bottom:1px solid #ffd70040;
}
.sub-menu-scroll {
  display: flex !important; flex-direction: row !important;justify-content: center !important;
  gap: 2px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; width: 100vw;
  padding: 3px 4px 3px 8px; background: none;
}
.sub-menu-scroll a {
  display: inline-block; font-size: 0.93rem; padding: 7px 10px 7px 10px;
  background: #ffd700cc; color: #232324; margin: 0 3px 0 0; border-radius: 2em; font-weight: 700;
  transition: background 0.14s, color 0.14s; letter-spacing: 0.01em; min-width: 62px; text-align: center;
}
.sub-menu-scroll a.active, .sub-menu-scroll a:focus, .sub-menu-scroll a:hover {background: #232324; color: #ffd700;}
/* 본문 컨테이너 */
.page-container {
  max-width: 1200px; margin: 0 auto; padding-top: 86px; /* PC용 */
  padding-left: 16px; padding-right: 16px; padding-bottom: 80px;
  display: flex; flex-direction: column; align-items: center;
}

/* --- 모바일 레이아웃 --- */
@media (max-width: 700px) {
  .main-header { display: none !important; }
  .mobile-logo-bar {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 48px;
    background: var(--header-bg);
    z-index: 2001;
    box-shadow: 0 2px 10px #0002;
  }
  .mobile-logo-bar .logo {
    margin: 0;
    font-size: 1.28rem;
    letter-spacing: 0.03em;
    color: var(--gold);
    font-weight: bold;
  }
  .sub-scroll-menu {
    display: flex !important;
    align-items: center;
    min-height: 44px;
    height: 44px;
    background: var(--scroll-bg);
    border-bottom: 2px solid #ffd70044;
    box-shadow: none;
    position: fixed;
    top: 48px;
    left: 0; right: 0;
    z-index: 2000;
    width: 100vw;
    justify-content: flex-start;
  }
  .page-container {
    padding-top: 102px !important; /* 48px(로고)+44px(메뉴)+10px여유 */
  }
  .mobile-bottom-nav { display: flex !important; }
}
@media (min-width:701px) {
  .mobile-bottom-nav, .mobile-logo-bar {display:none !important;}
}

/* 모바일 바텀 메뉴 */
.mobile-bottom-nav {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0;
  height: 54px;
  background: #232324f2;
  z-index: 1104;
  border-top: 2px solid var(--gold);
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 0 24px #ffd9002d;
  backdrop-filter: blur(8px) brightness(1.08);
}
.mobile-bottom-nav a {
  color: #fffde2;
  text-decoration: none;
  font-size: 1.06rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  font-weight: 800;
  letter-spacing: 0.03em;
  border-radius: 8px;
  padding: 4px 0 2px 0;
}
.mobile-bottom-nav a span { font-size: 1.32em; }
.mobile-bottom-nav a.active, .mobile-bottom-nav a:hover { color: var(--gold); }

/* 2. 모든 메뉴 밑줄(border, underline) 완전히 제거! */
.sub-menu-scroll a,
.main-menu a {
  text-decoration: none !important;
  border-bottom: none !important;
  outline: none !important;
}
/* 2.-------------------------------------------------------------------------- */
.scroll-blink {
  animation: blinkScale 0.35s cubic-bezier(.4,1.6,.6,1) 1;
}
@keyframes blinkScale {
  0% { background: #ffd700; transform: scale(1);}
  60% { background: #fff600; transform: scale(1.11);}
  90% { background: #ffd700; transform: scale(0.98);}
  100% { background: #ffd700; transform: scale(1);}
}
/* 폭죽(파이어웍) 파티클 효과 */
.firework-particle {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 22222;
  box-shadow: 0 0 7px #fff8, 0 0 2px #fff;
  opacity: 0.87;
  transition: opacity 0.15s;
}