/* 슬림 히어로 (2026-09-26) — 메뉴 이름 + 사진 + 아래쪽 그라데이션. 페이지마다 --hero-photo 지정 */
html body section.hero#top.hero-slim{
  min-height:190px !important;height:auto !important;
  padding:0 !important;margin:0 !important;
  display:flex !important;flex-direction:row !important;align-items:center !important;justify-content:center !important;
  text-align:center !important;overflow:hidden;position:relative;
  background:
    linear-gradient(0deg, rgba(3,60,45,.52), rgba(3,60,45,.52)),
    var(--hero-photo) center 30%/cover no-repeat !important;
}
html body section.hero#top.hero-slim::before,
html body section.hero#top.hero-slim::after{display:none !important;content:none !important}
html body section.hero#top.hero-slim .hero-mascot{display:none !important}
html body section.hero#top.hero-slim > .wrap{
  width:100% !important;max-width:1200px !important;margin:0 auto !important;
  display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;gap:10px !important;
  padding:18px 24px !important;position:relative;z-index:1;text-align:center !important;
}
html body section.hero#top.hero-slim h1{
  margin:0 !important;padding:0 !important;
  font-size:clamp(26px,3.2vw,36px) !important;font-weight:900 !important;line-height:1.2 !important;letter-spacing:-.03em !important;
  color:#fff !important;-webkit-text-fill-color:#fff !important;
  text-shadow:0 2px 16px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.35) !important;
}
html body section.hero#top.hero-slim .hero-cta{margin:0 !important;display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
html body section.hero#top.hero-slim .hero-cta a{
  display:inline-flex;align-items:center;
  background:rgba(0,40,30,.35) !important;color:#fff !important;border:1px solid rgba(255,255,255,.45) !important;
  border-radius:999px !important;padding:7px 14px !important;font-size:13px !important;font-weight:700 !important;
  text-decoration:none !important;text-shadow:none !important;box-shadow:none !important;backdrop-filter:blur(4px);
}
html body section.hero#top.hero-slim .hero-cta a:hover{background:rgba(255,255,255,.26) !important}
@media (max-width:640px){
  html body section.hero#top.hero-slim{min-height:169px !important}
  html body section.hero#top.hero-slim > .wrap{padding:14px 16px !important;align-items:center}
  html body section.hero#top.hero-slim h1{font-size:24px !important}
  html body section.hero#top.hero-slim .hero-cta a{padding:6px 11px !important;font-size:12px !important}
}