/* Shared by the homepage and every page extending base.html. */
/* 고정 메뉴(64px)가 키보드 포커스·앵커 위치를 가리지 않게(WCAG 2.4.11, 10-13). 개별 scroll-margin 은 이 값에 더해진다 */
html{scroll-padding-top:80px}
nav.mono-top{position:fixed;inset:0 0 auto;z-index:1000;background:rgba(10,10,10,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid #242424;color:#f5f5f5;font-family:var(--sans-font);line-height:1.5}
.mono-top .mono-nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:64px;max-width:1440px;margin:0 auto;padding:0 40px;box-sizing:border-box}
.mono-top .mono-logo{display:flex;align-items:center;gap:10px;flex-shrink:0;font:600 15px/1.5 var(--mono-font);letter-spacing:.02em;color:#f5f5f5;text-decoration:none}
.mono-top .mono-logo svg{flex-shrink:0}
.mono-top .mono-nav-links{display:flex;align-items:center;gap:4px}
.mono-top .mono-nav-links>a,.mono-top .mono-dd-trigger{display:flex;align-items:center;gap:8px;padding:12px 16px;min-height:44px;box-sizing:border-box;border:0;border-radius:3px;background:transparent;font:450 15px/1.5 var(--sans-font);color:#b4b4b4;cursor:pointer;text-decoration:none;white-space:nowrap}
.mono-top .mono-nav-links>a:hover,.mono-top .mono-dd-trigger:hover,.mono-top .mono-dd[open]>.mono-dd-trigger{background:#1a1a1a;color:#f5f5f5}
.mono-top .mono-dd{position:relative;margin:0;padding:0;border:0}
.mono-top .mono-dd-trigger{list-style:none}
.mono-top .mono-dd-trigger::-webkit-details-marker{display:none}
.mono-top .mono-dd-trigger::after{content:none}
.mono-top .mono-dd[open]>.mono-dd-trigger svg{transform:rotate(180deg)}
.mono-top .mono-dd-menu{position:absolute;top:calc(100% + 8px);left:0;width:350px;max-width:calc(100vw - 40px);max-height:calc(100vh - 90px);max-height:calc(100dvh - 90px);overflow-y:auto;padding:8px;box-sizing:border-box;background:#111;border:1px solid #303030;border-radius:6px;box-shadow:0 20px 40px -12px #000}
.mono-top .mono-dd-menu a{display:block;padding:14px 16px;border-radius:3px;text-decoration:none;color:#b4b4b4}
.mono-top .mono-dd-menu a:hover{background:#222}
.mono-top .mono-dd-menu strong{display:block;color:#f5f5f5;font-size:15px;font-weight:600;line-height:1.5}
.mono-top .mono-dd-menu a>span{display:block;margin-top:4px;font-size:13px;line-height:1.6;color:#a3a3a3}
.mono-top .mono-service-primary{background:#1a2130}
.mono-top .mono-service-compare{margin-top:6px;border-top:1px solid #303030}
.mono-top .mono-nav-cta{display:flex;align-items:center;gap:10px;flex-shrink:0}
.mono-top .mono-btn-primary{display:inline-flex;align-items:center;justify-content:center;min-height:44px;height:auto;padding:10px 16px;box-sizing:border-box;border:1px solid #f5f5f5;border-radius:3px;background:#f5f5f5;color:#000;font:600 14px/1.5 var(--sans-font);text-decoration:none;white-space:nowrap}
.mono-top .mono-btn-primary:hover{background:#fff}
.mono-top .mono-hamburger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:44px;height:44px;padding:0;border:1px solid #363636;border-radius:3px;background:transparent;cursor:pointer}
.mono-top .mono-hamburger span{display:block;width:16px;height:1px;background:#f5f5f5}
.mono-top .mono-hamburger[hidden]{display:none}
.mono-top a:focus-visible,.mono-top summary:focus-visible,.mono-top button:focus-visible{outline:2px solid #afc6ff;outline-offset:3px}
@media(max-width:1024px){
  nav.mono-top{position:relative}
  .mono-top .mono-nav-wrap{flex-wrap:wrap;gap:8px;padding:10px 24px}
  .mono-top .mono-nav-links{order:3;width:100%;flex-direction:column;align-items:stretch;gap:0}
  .mono-top .mono-nav-links>a,.mono-top .mono-dd-trigger{width:100%;padding:14px 12px;justify-content:space-between}
  .mono-top .mono-nav-links>a,.mono-top .mono-dd{border-bottom:1px solid #242424}
  .mono-top .mono-dd-menu{position:static;width:auto;max-width:none;max-height:none;box-shadow:none;margin:0 0 8px;padding:4px;border:0;background:#111}
  .mono-top:not(.nav-ready)+.mono-nav-spacer{display:none}
  .home-layout .mono-top:not(.nav-ready)~main .hero{padding-top:0}
  nav.mono-top.nav-ready{position:fixed}
  .mono-top.nav-ready .mono-nav-wrap{height:64px;min-height:64px;flex-wrap:nowrap;padding-top:0;padding-bottom:0}
  .mono-top.nav-ready .mono-hamburger{display:flex}
  .mono-top.nav-ready .mono-nav-links{display:none}
  .mono-top.nav-ready .mono-nav-links.mono-open{display:flex;position:absolute;top:64px;left:0;right:0;width:auto;padding:12px 20px;background:#0a0a0a;border-bottom:1px solid #303030;max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);overflow-y:auto}
}
@media(max-width:640px){.mono-top .mono-nav-wrap{padding-left:20px;padding-right:20px}}
@media(max-width:400px){.mono-top .mono-logo{font-size:13px;gap:6px}.mono-top .mono-nav-cta{gap:6px}.mono-top .mono-btn-primary{padding:10px 12px}}
/* 윈도우 고대비: 배경색으로 그린 메뉴 막대가 사라지지 않게(10-13) */
@media (forced-colors: active){.mono-top .mono-hamburger span{background:ButtonText}}