:root {
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* 배경 사진 불투명도 — 메인과 하위 페이지를 따로 조절합니다 */
  --hero-photo-opacity: 0.82;      /* index.html 히어로 하단 파노라마 */
  --subhead-photo-opacity: 0.5;    /* 하위 페이지 상단 헤더 */
}

/* 서명용 손글씨 폰트 — 회장 성함에만 사용 */
@font-face {
  font-family: "Yeongwol";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2507-2@1.0/YeongwolTTF-Regular.woff2") format("woff2");
  font-weight: normal;
  font-display: swap;
}
.font-sign {
  font-family: "Yeongwol", "Pretendard", sans-serif;
  font-weight: normal;
  letter-spacing: 0.02em;
}
html { scroll-behavior: smooth; font-size: 17px; }
html.text-lg-mode { font-size: 19px; }
body {
  word-break: keep-all;
  overflow-wrap: break-word;
  font-size: 1.059rem;
  letter-spacing: -0.3px;
  -webkit-font-smoothing: antialiased;
}
/* 종이 질감 노이즈 오버레이 */
.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: 0.035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
a, button, .tap { transition: all 0.5s var(--ease); }
/* 스크롤 진입 애니메이션 — 스크립트가 동작할 때만 숨김 상태를 적용합니다 */
.js .reveal { opacity: 0; transform: translateY(2rem); filter: blur(4px); }
.js .reveal.in {
  animation: fadeInUp 0.9s var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 80ms);
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(2rem); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
/* 히어로 교정 사진: 상단이 배경으로 녹아들도록 마스크 + 로드 시 페이드인 */
.hero-photo {
  opacity: var(--hero-photo-opacity);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.45) 34%, #000 78%);
          mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.45) 34%, #000 78%);
}
.js .hero-photo {
  opacity: 0;
  transform: scale(1.05);
  transform-origin: center bottom;
  animation: heroPhotoIn 2s var(--ease) 0.25s forwards;
}
@keyframes heroPhotoIn {
  from { opacity: 0;    transform: scale(1.05); }
  to   { opacity: var(--hero-photo-opacity); transform: scale(1); }
}

/* 하위 페이지 헤더 사진 — 마스크 없이 은은하게 페이드인 */
.subhead-photo { opacity: var(--subhead-photo-opacity); }
.js .subhead-photo {
  opacity: 0;
  transform: scale(1.04);
  animation: subheadPhotoIn 1.4s var(--ease) 0.15s forwards;
}
@keyframes subheadPhotoIn {
  from { opacity: 0;    transform: scale(1.04); }
  to   { opacity: var(--subhead-photo-opacity); transform: scale(1); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-15px); }
}
.floaty { animation: float 9s ease-in-out infinite; }
.floaty-slow { animation: float 13s ease-in-out infinite; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-track { animation: marquee 40s linear infinite; }
.marquee-track:hover { animation-play-state: paused; }
.marquee-slow { animation: marquee 60s linear infinite; }
/* 메가 메뉴 */
.navitem > .mega {
  opacity: 0; visibility: hidden; transform: translateY(-8px) translateX(-50%);
  transition: all 0.4s var(--ease);
}
.navitem:hover > .mega, .navitem:focus-within > .mega {
  opacity: 1; visibility: visible; transform: translateY(0) translateX(-50%);
}
.underline-gold {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.5s var(--ease);
}
.underline-gold:hover { background-size: 100% 1px; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; filter: none; animation: none !important; }
  .floaty, .floaty-slow, .marquee-track, .marquee-slow { animation: none !important; }
  .js .hero-photo { opacity: var(--hero-photo-opacity); transform: none; animation: none !important; }
  .js .subhead-photo { opacity: var(--subhead-photo-opacity); transform: none; animation: none !important; }
  html { scroll-behavior: auto; }
}