:root{--rail:224px;--ink:#203349;--muted:#778390;--line:#e5eaf0;--paper:#f6f8fa;--brand:#1279ce}
body{padding-left:var(--rail)}
a,button{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #319be3;outline-offset:4px}
.site-nav{position:fixed;inset:0 auto 0 0;width:var(--rail);z-index:1100;display:flex;flex-direction:column;padding:26px 14px 20px;background:#fff;color:var(--ink);border-right:1px solid var(--line);overflow:auto;scrollbar-width:thin;scrollbar-color:#d6dfe7 transparent}
.site-nav a{text-decoration:none;color:inherit}
.nav-brand,.home-brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.nav-brand{margin:0 13px 32px}
.nakmap-mark{display:block;width:46px;height:46px;flex:none;object-fit:contain}
.brand-word{display:block;font-size:29px;font-weight:850;line-height:1.08;letter-spacing:-1.6px}
.brand-word>b:first-child{color:#1279ce}.brand-word>b:nth-child(2){color:#099b87}
.brand-word small{display:block;font-size:8px;font-weight:650;letter-spacing:2.2px;color:#7c8996;margin-top:7px}
.site-nav .nav-links{display:grid;gap:5px}
.site-nav .nav-links>a,.site-nav .nav-links>button{display:flex;align-items:center;gap:12px;position:relative;min-height:47px;padding:7px 12px;border:0;border-radius:9px;background:none;font:600 13px/1.4 system-ui,-apple-system,'Malgun Gothic',sans-serif;color:#526173;text-align:left;white-space:nowrap;transition:background .15s,color .15s}
.site-nav .nav-links>a:hover,.site-nav .nav-links>button:hover{background:#f4f7fa;color:#233a50}
.site-nav .nav-links [aria-current]{background:#ecf5fc;color:#1167aa;border:0}
.site-nav .nav-links [aria-current]::after{content:'';position:absolute;right:12px;top:calc(50% - 2.5px);width:5px;height:5px;border-radius:50%;background:#1279ce}
.site-nav .nav-links .menu-icon{position:static;display:grid;place-items:center;flex:none;width:31px;height:31px;border-radius:8px;background:var(--icon-bg);color:var(--icon)}
.menu-icon svg{width:21px;height:21px;display:block}
.menu-home{--icon:#e67751;--icon-bg:#fff0e9}.menu-map{--icon:#2387d9;--icon-bg:#e9f4ff}.menu-points{--icon:#dca631;--icon-bg:#fff8e5}.menu-hydro{--icon:#16a1bf;--icon-bg:#e7f8fc}
.menu-weather{--icon:#e89d24;--icon-bg:#fff7e3}.menu-sea{--icon:#6581cd;--icon-bg:#eff1fd}.menu-places{--icon:#2da879;--icon-bg:#eaf8f1}.menu-platform{--icon:#1595b9;--icon-bg:#e6f7fb}
.menu-board{--icon:#8a74c6;--icon-bg:#f4efff}.menu-notice{--icon:#d07688;--icon-bg:#fff0f4}.menu-guide{--icon:#5e98a4;--icon-bg:#edf7f8}.menu-source{--icon:#8592a2;--icon-bg:#f0f3f6}
.nav-contact{margin-top:auto;padding:28px 14px 0;font-size:11px}
.nav-contact .instagram-link{display:flex;justify-content:space-between;font-size:12px;font-weight:700;color:#566679}
.contact-email{display:block;margin:12px 0;font-size:10px;color:#7d8996!important}
.nav-contact>small{font-size:10px;color:#9aa4ae}

.site-nav{box-sizing:border-box}.site-nav *{box-sizing:border-box}.board-page .board-header{padding-left:24px;padding-right:24px}.board-page .platform-shell{width:100%;box-sizing:border-box}.board-page .board-header nav{flex-wrap:wrap}
@media(min-width:721px) and (max-width:1100px){
 :root{--rail:190px}.site-nav{padding:23px 9px 18px}.nav-brand{margin-left:10px;gap:8px}.nav-brand .nakmap-mark{width:40px;height:40px}.nav-brand .brand-word{font-size:27px}
 .site-nav .nav-links>a,.site-nav .nav-links>button{font-size:11px;gap:8px;padding-left:10px;padding-right:10px}.nav-contact{padding-left:10px;padding-right:8px}
}
@media(max-width:720px){
 :root{--rail:0px}body{padding:0 0 calc(68px + env(safe-area-inset-bottom))}
 .site-nav{inset:auto 0 0;width:100%;height:calc(68px + env(safe-area-inset-bottom));padding:5px 8px;border-right:0;border-top:1px solid var(--line);overflow:hidden;display:block;background:#fff}
 .site-nav .nav-brand,.nav-contact{display:none}
 .site-nav .nav-links{display:flex;height:58px;gap:4px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
 .site-nav .nav-links>a,.site-nav .nav-links>a[href^="board.php"],.site-nav .nav-links>button{display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:72px;min-height:54px;padding:4px 8px;flex:none;font-size:9px;line-height:1.3;border-radius:7px}
 .site-nav .nav-links .menu-icon{width:28px;height:28px;border-radius:7px}.menu-icon svg{width:19px;height:19px}.site-nav .nav-links [aria-current]::after{display:none}
.board-page .board-header{padding-left:18px;padding-right:18px}
}