@import url('https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&family=Noto+Sans+KR:wght@400;500;600;700;800;900&display=swap');
:root { --sans:"Noto Sans KR",sans-serif; --serif:"Gowun Batang",serif; --gold-soft:#87dcff; --cyan:#21d3fe; }
body.static-case-page {padding-top:86px;}
body.static-case-page .site-header {width:100%!important;max-width:none!important;padding:0 clamp(24px,5vw,84px)!important;box-shadow:none!important;border-bottom:1px solid rgba(188,238,255,.2)!important;border-radius:0!important;font-family:var(--sans);}
body.static-case-page .site-header .brand small {display:block;color:#a9dcf4;font-size:9px;letter-spacing:.12em;margin-top:3px;}
body.static-case-page .site-header .brand {min-width:0;}
.site-header { height: 86px; padding: 0 clamp(24px, 5vw, 84px); display: flex; align-items: center; justify-content: space-between; background: rgba(6,26,55,.92); color: #fff; border-bottom: 1px solid rgba(188,238,255,.2); position: fixed; top: 0; left: 0; width: 100%; z-index: 80; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 44px; height: 44px; border-radius: 50%; }
.brand span { display: flex; flex-direction: column; line-height: 1.25; }
.brand b { font-size: 17px; letter-spacing: -.03em; }
.brand small { font-size: 9px; color: #a9dcf4; letter-spacing: .12em; margin-top: 3px; }
.site-header nav { display: flex; align-items: center; gap: clamp(24px,3vw,48px); margin-left: auto; margin-right: 0; }
.site-header nav a { font-size: 14px; color: #dcecff; transition: color .25s; }
.site-header nav a:hover { color: var(--gold-soft); }
.header-call { display: flex; align-items: center; gap: 14px; padding-left: 28px; border-left: 1px solid var(--line); }
.header-call span { font-size: 11px; color: #9fcde6; }
.header-call b { font-size: 19px; letter-spacing: .02em; }
.menu-toggle { display: none; position: relative; z-index: 83; background: none; border: 0; padding: 10px; cursor: pointer; }
.menu-toggle i { display: block; width: 24px; height: 1px; margin: 5px 6px; background: #fff; }
.menu-toggle[aria-expanded="true"] { position: fixed; top: 34px; right: 20px; width: 34px; height: 34px; padding: 0; border: 1px solid rgba(188,238,255,.44); border-radius: 9px; display: block; background: rgba(255,255,255,.06); box-shadow: 0 6px 18px rgba(0,0,0,.14); animation: menuCloseButtonIn .34s cubic-bezier(.22,1,.36,1) .1s both; }
.menu-toggle[aria-expanded="true"] i { position: absolute; top: 16px; left: 7px; width: 18px; margin: 0; }
.menu-toggle[aria-expanded="true"] i:first-child { transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] i:last-child { transform: rotate(-45deg); }
.menu-toggle:focus-visible { outline: 1px solid rgba(188,238,255,.7); outline-offset: 2px; border-radius: 5px; }
.menu-backdrop { position: fixed; z-index: 79; inset: 0; border: 0; padding: 0; opacity: 0; visibility: hidden; background: rgba(2,10,28,.62); backdrop-filter: blur(3px); transition: opacity .35s ease,visibility .35s; }
.menu-backdrop.open { opacity: 1; visibility: visible; }
body.menu-open { overflow: hidden; }
body.menu-open .site-header .brand { opacity: 0; pointer-events: none; }


@media(max-width:1100px){
  .site-header { height: 78px; }
  .site-header nav { position: fixed; z-index: 82; top: 8px; right: 0; bottom: auto; width: min(290px,78vw); height: calc(100vh - 16px); height: calc(100dvh - 16px); padding: 136px 24px 28px; border-radius: 36px 0 0 36px; display: flex; align-items: stretch; gap: 8px; flex-direction: column; margin: 0; overflow-y: auto; visibility: hidden; color: #fff; background: linear-gradient(155deg,rgba(10,42,86,.99),rgba(18,35,78,.99) 60%,rgba(61,30,106,.99)); border-left: 1px solid rgba(188,238,255,.25); box-shadow: -20px 0 54px rgba(0,0,0,.3); transform: translateX(105%); transition: transform .46s cubic-bezier(.22,1,.36,1),visibility .46s; }
  .site-header nav::before { content: "부산이혼전문변호사"; position: absolute; top: 22px; left: 24px; min-height: 44px; padding: 4px 0 0 50px; display: flex; align-items: flex-start; color: #fff; background: url("assets/yulmaru-logo.webp") left center / 42px 42px no-repeat; font: 800 14px/1.35 var(--sans); letter-spacing: -.025em; }
  .site-header nav::after { content: "법무법인 율마루"; position: absolute; top: 45px; left: 74px; color: #86a6c2; font: 600 10px/1.3 var(--sans); letter-spacing: .03em; }
  .site-header nav a { position: relative; padding: 14px 0; border-bottom: 0; display: flex; align-items: center; font: 700 17px var(--serif); opacity: 0; transform: translateX(22px); transition: color .25s,opacity .3s ease,transform .4s ease; }
  .site-header nav a::after { content: none; }
  .site-header nav a:first-child::before { content: "MENU"; position: absolute; left: 0; bottom: calc(100% + 14px); color: var(--cyan); font: 800 10px/1 var(--sans); letter-spacing: .25em; }
  .site-header nav a:first-child::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% + 46px); height: 1px; background: rgba(255,255,255,.22); }
  .site-header nav.open { visibility: visible; transform: translateX(0); }
  .site-header nav.open a { opacity: 1; transform: translateX(0); }
  .site-header nav.open a:nth-child(2) { transition-delay: .07s; }
  .site-header nav.open a:nth-child(3) { transition-delay: .14s; }
  .menu-toggle { display: block; }
  .site-header { height: 70px; padding: 0 18px; position: fixed; }
  .menu-toggle[aria-expanded="true"] { top: 28px; }
  .brand img { width: 38px; height: 38px; }
  .brand b { font-size: 14px; }
  .brand small { font-size: 7px; }
  .site-header nav { padding-top: 128px; }
  .site-header nav::before { top: 16px; }
  .site-header nav::after { top: 39px; }
}
.site-header .brand {text-decoration:none;}
.site-header .brand span {background:none;border:0;padding:0;}
.site-header nav a {border:0;}