/* 포털 상단 메뉴 전용 스타일 — app.css 에서 분리한 단일 소스.
 * base.html 과 cost.html(독립 HTML)이 함께 링크한다. app.css 전체를 링크하면 cost.html 의 .btn/.card/.g2 가 덮여
 * 깨지므로 내비 규칙만 여기로 뽑았다. 모든 선택자가 .topnav / .nav-inner / .navgrp 아래로 스코프되어 있다.
 *
 * v3.191 디자인 통일 — DESIGN.md(Attio, 밝은 테마) 토큰. 어두운 띠 대신 흰 바탕 + Mist 50 하단 선, 활성 항목은
 * Haze 채움 + Ink 글자, 브랜드의 'ERP' 만 Cobalt(포인트 하나). cost.html 도 이 파일만 링크하므로 값은 직접 적는다. */
.topnav{position:sticky; top:0; z-index:40; background:#ffffff;                      /* Page Canvas */
  border-bottom:1px solid #e4e7ec;                                                   /* Mist 50 */
  font-family:"Pretendard Variable",Pretendard,Inter,-apple-system,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;
  line-height:1.5; font-weight:500; letter-spacing:-0.01em;}
.nav-inner{max-width:1440px; margin:0 auto; padding:0 16px; display:flex; align-items:center; gap:2px; height:52px;}   /* max-width 1440 */
.topnav a{color:#6f7988; font-weight:500; font-size:13.5px; padding:6px 10px; border-radius:10px; white-space:nowrap; text-decoration:none;}   /* Slate 600 · radius 10 */
.topnav a.on,.topnav a:hover{background:#eeeff1; color:#1c1d1f;}                    /* Haze · Ink Black */
.topnav .brand{font-weight:600; color:#1c1d1f; font-size:15px; margin-right:12px; letter-spacing:-0.15px;}
.topnav .brand span{color:#266df0; margin-left:3px;}                                 /* Cobalt Core — 포인트 하나 */
.topnav .brand:hover{background:transparent;}
.topnav .spacer{flex:1;}
.topnav .who{color:#8f99a8; font-size:12.5px; white-space:nowrap;}                   /* Slate 700 */
.topnav a.ghost{font-size:12.5px; color:#8f99a8;}

/* 카테고리 드롭다운(재고/CS 센터/재무/시스템) */
.navgrp{position:relative;}
.navgrp .navcat{background:none; border:none; cursor:pointer; font:inherit;
  color:#6f7988; font-weight:500; font-size:13.5px; padding:6px 10px; border-radius:10px; white-space:nowrap;}
.navgrp.on .navcat,.navgrp:hover .navcat,.navgrp:focus-within .navcat{background:#eeeff1; color:#1c1d1f;}
/* v3.209.3 사장님(9/23) "서브 메뉴로 내려가면 자꾸 사라진다" — 원인: 버튼과 메뉴 사이 4px 틈에서 hover 가 끊김.
   ① ::before 로 틈을 덮는 투명 다리 ② display 대신 visibility 로 여닫고 닫힐 때만 0.3초 늦춘다(대각선으로 내려가도 유지)
   ③ 다른 카테고리에 올리면 이전 메뉴는 기다리지 않고 바로 닫는다(:has). */
.navgrp .navmenu{visibility:hidden; opacity:0; position:absolute; top:100%; left:0; min-width:176px; margin-top:4px;
  background:#ffffff; border:1px solid #d3d8df; border-radius:12px; padding:6px;   /* Cloud 100 · cards 12 */
  box-shadow:0 8px 24px rgba(28,40,64,.10); z-index:50;                              /* 파랑 기운 그림자 */
  transition:opacity .12s ease .3s, visibility 0s linear .42s;}
.navgrp .navmenu::before{content:""; position:absolute; left:-8px; right:-8px; top:-10px; height:10px;}
.navgrp:hover .navmenu,.navgrp:focus-within .navmenu,.navgrp.open .navmenu{visibility:visible; opacity:1;
  transition:opacity .08s ease 0s, visibility 0s linear 0s; z-index:51;}
.nav-inner:has(.navgrp:hover) .navgrp:not(:hover):not(.open) .navmenu{transition:none; visibility:hidden; opacity:0;}
@media (prefers-reduced-motion: reduce){ .navgrp .navmenu{transition:visibility 0s linear .3s;} }
/* .open: 톡(탭)으로 연 상태 — iOS 사파리는 버튼을 탭해도 focus 를 안 줘 :focus-within 이 안 걸린다(app.js wmsNavTap) */
.navgrp.open .navcat{background:#eeeff1; color:#1c1d1f;}
.navgrp .navmenu a{display:block; padding:8px 12px; font-size:13.5px; border-radius:8px; color:#2e3238;}   /* Carbon */
.navgrp .navmenu a:hover,.navgrp .navmenu a.on{background:#e4edff; color:#266df0;}   /* Ice Wash · Cobalt */
.navmenu .navsep{border-top:1px solid #e4e7ec; margin:4px 6px;}
/* v3.303 사장님(9/28) "서브 메뉴 들어갈 때 커서가 올라가면 선택할 수 있게" — 상단 재고·구매·판매·CS 센터·재무·시스템은 링크(누르면 첫 화면)
   그대로 두고 올리면 같은 서브 항목(_nav.html 매크로)이 드롭다운으로. 터치 기기는 탭 = 이동이 먼저라 드롭다운을 안 띄운다(서브 메뉴 줄로 충분). */
.navgrp:hover > a,.navgrp:focus-within > a{background:#eeeff1; color:#1c1d1f;}
@media (hover: none){ .navgrp .navmenu{display:none;} }
/* v3.208.2 물류 서브 메뉴 줄(.subnav) — 상단 메뉴 바로 아래 한 줄. 재고/발주 화면에서만 나온다. 색: Paper 바탕·Mist 선·Cobalt 활성 */
.subnav{background:#f4f5f6; border-bottom:1px solid #e4e7ec;}
.subnav .nav-inner{display:flex; align-items:center; gap:4px; height:auto; min-height:38px; flex-wrap:wrap;}   /* .nav-inner 의 52px 고정 높이를 푼다 */
.subnav .subnav-title{font-size:12.5px; font-weight:600; color:#8f99a8; padding:0 10px 0 4px;}
.subnav a{display:inline-block; padding:6px 12px; font-size:13.5px; font-weight:500; border-radius:8px; color:#2e3238;}
.subnav a:hover{background:#eeeff1; color:#1c1d1f;}
.subnav a.on{background:#e4edff; color:#266df0;}   /* Ice Wash · Cobalt */

.navlinks{display:contents;}
/* ── 좁은 화면(휴대폰·태블릿 세로) — v3.309 첫 줄 = 로고·환율·계정, 둘째 줄 = 메뉴 한 줄 가로 스크롤, 서브 메뉴도 한 줄 스크롤.
   메뉴가 네 줄로 쌓여 화면 1/4 을 먹던 것을 두 줄로. 폰에서는 상단 고정을 풀어 내리면 본문만 보이게. ── */
@media (max-width:860px){
  .topnav{position:static;}
  .nav-inner{flex-wrap:wrap; height:auto; padding:8px 12px 0; gap:4px;}          /* spacing 4·8·12 */
  .topnav .brand{margin-right:4px; order:0;}
  .topnav .spacer{flex:1 1 0; order:1; height:0;}
  .topnav .fx{order:2; margin-right:0;}
  .topnav .who{display:none;}
  .topnav a.ghost, .topnav form{order:3;}
  .topnav a.ghost, .topnav form button{padding:6px 8px !important;}
  .navlinks{display:flex; align-items:center; order:9; flex:1 0 100%; overflow-x:auto; gap:4px; padding:4px 0 8px; margin:0 -12px; padding-left:12px; padding-right:12px;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;}
  .navlinks::-webkit-scrollbar{display:none;}
  .navlinks > a, .navlinks > .navgrp{flex:0 0 auto;}
  .navgrp .navmenu{display:none;}                         /* 좁은 폭에서 드롭다운은 잘리므로 서브 메뉴 줄만 쓴다 */
  .subnav .nav-inner{flex-wrap:nowrap; overflow-x:auto; padding:4px 12px; min-height:0; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
  .subnav .nav-inner::-webkit-scrollbar{display:none;}
  .subnav .nav-inner > *{flex:0 0 auto;}
  .subnav .subnav-title{display:none;}
}
@media (max-width:420px){
  .topnav .fx .fxu, .topnav .fx .fxr{display:none;}       /* 폰에서는 통화 단추·값만 */
  .topnav .fx .fxv{min-width:0;}
  .topnav .fx .fxc:not(.on){display:none;}               /* 고른 통화 하나만 — 눌러 바꾸는 건 넓은 화면에서 */
  .topnav .brand{font-size:14px; margin-right:0;}
  .topnav a.ghost, .topnav form button{padding:6px 4px !important;}
}

/* ── v3.263 환율 위젯(.fx) — 사장님(9/26) 공통 표시. 토큰: Mist 50 테두리·7px(badge)·Slate 600/700 글자·Ink 값·활성 Ice Wash+Cobalt(포인트 하나) ── */
.topnav .fx{display:inline-flex; align-items:center; gap:6px; margin-right:12px; padding:3px 6px 3px 3px; border:1px solid #e4e7ec; border-radius:7px; white-space:nowrap;}   /* Mist 50 · radius 7 */
.topnav .fx .fxc{font:inherit; font-size:11.5px; font-weight:600; color:#6f7988; background:transparent; border:1px solid transparent; border-radius:7px; padding:2px 7px; cursor:pointer; line-height:1.4;}   /* Slate 600 */
.topnav .fx .fxc.on{color:#266df0; background:#e4edff; border-color:#bad0fa;}                 /* Cobalt Core · Ice Wash · Periwinkle */
.topnav .fx .fxv{font-size:13.5px; font-weight:600; color:#1c1d1f; min-width:62px; text-align:right; letter-spacing:-0.2px;}   /* Ink Black */
.topnav .fx .fxu{font-style:normal; font-size:11px; color:#8f99a8;}                          /* Slate 700 · caption */
.topnav .fx .fxb{font-style:normal; font-size:11px; color:#8f99a8; padding:1px 6px; border-radius:7px; background:#f4f5f6;}   /* Paper */
.topnav .fx .fxb.live{color:#1f7a4d; background:#e8f4ec;}
.topnav .fx .fxb.ref{color:#b7791f; background:#fbf3e3;}
.topnav .fx .fxb.err{color:#c53030; background:#fbeaea;}
.topnav .fx .fxr{font:inherit; font-size:12px; background:transparent; border:none; cursor:pointer; padding:0 2px; color:#6f7988;}
.topnav .fx .fxr:hover{color:#1c1d1f;}
@media (max-width: 900px){ .topnav .fx .fxb{display:none;} }

/* v3.371 상단 메뉴 '메일' 안 읽은 숫자 — 글자 오른쪽 위의 빨간 동그라미 */
.topnav a[href="/mail"], .topnav a[href="/cs/tickets"]{position:relative;}   /* v3.494 CS 센터 안 읽은 상담 숫자도 */
.topnav .mail-badge{position:absolute; top:-3px; right:-6px; min-width:16px; height:16px; padding:0 4px; box-sizing:border-box; border-radius:8px;
  background:#e5484d; color:#fff; font-size:11px; font-weight:700; line-height:16px; text-align:center; pointer-events:none;}
.mtabbar .mtab{position:relative;}
.mtabbar .mail-badge{position:absolute; top:4px; left:calc(50% + 6px); min-width:16px; height:16px; padding:0 4px; box-sizing:border-box; border-radius:8px;
  background:#e5484d; color:#fff; font-size:11px; font-weight:700; line-height:16px; text-align:center; pointer-events:none;}   /* v3.494 폰 아래 탭 CS */

/* ══ v3.440 폰 전용 내비(≤760px) — 사장님(10/10) "모바일 화면을 PC 와 전혀 다르게 설계해도 괜찮아".
   상단은 로고·환율 한 줄(스크롤하면 사라짐), 메뉴는 아래 고정 탭 막대 5개 + '더보기' 시트. 서브 메뉴는 칩 한 줄.
   PC(>760px)에서는 막대·시트가 display:none 이라 화면이 그대로다. cost.html 같은 독립 앱도 이 파일을 링크하므로 같이 적용된다. ══ */
.mtabbar,.msheet{display:none;}
@media (max-width:760px){
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom));}
  .topnav{position:static;}
  .nav-inner{flex-wrap:nowrap; height:48px; padding:0 14px; gap:8px;}
  .navlinks,.topnav .who,.topnav a.ghost,.topnav > .nav-inner > form{display:none !important;}   /* 메뉴·계정은 탭 막대와 더보기 시트로 */
  .topnav .brand{font-size:16px; margin:0; padding:6px 0;}
  .topnav .spacer{flex:1 1 0; order:0; height:auto;}
  .topnav .fx{order:0; margin:0; padding:2px 4px 2px 2px;}
  .topnav .fx .fxv{font-size:14px; min-width:0;}
  .subnav{background:#fff; border-bottom:1px solid #e4e7ec;}
  .subnav .nav-inner{height:auto; min-height:0; padding:8px 12px; gap:8px;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);}
  .subnav a{padding:0 14px; min-height:36px; display:inline-flex; align-items:center; font-size:14px; border-radius:18px; background:#f4f5f6; color:#2e3238;}
  .subnav a.on{background:#e4edff; color:#266df0; font-weight:600;}
  .subnav .subnav-sep{display:none;}

  /* 아래 고정 탭 막대 — iOS 스타일: 아이콘 위·글자 아래, 활성은 Cobalt */
  .mtabbar{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60; background:rgba(255,255,255,.96);
    -webkit-backdrop-filter:saturate(1.6) blur(14px); backdrop-filter:saturate(1.6) blur(14px);
    border-top:1px solid #e4e7ec; padding:6px 4px calc(6px + env(safe-area-inset-bottom));}
  .mtabbar .mtab{flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:48px;
    background:none; border:none; font:inherit; color:#8f99a8; padding:2px 0; border-radius:12px; text-decoration:none; cursor:pointer; -webkit-tap-highlight-color:transparent;}
  .mtabbar .mtab svg{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
  .mtabbar .mtab span{font-size:11px; font-weight:600; letter-spacing:-.2px;}
  .topnav .mtabbar a.mtab,.topnav .mtabbar a.mtab:hover,.topnav .mtabbar a.mtab.on{background:none; padding:2px 0; border-radius:12px;}   /* .topnav a.on 의 회색 채움 제거 */
  .mtabbar .mtab.on{color:#266df0;}
  .mtabbar .mtab.on svg{fill:#e4edff;}
  .topnav .mtabbar a.mtab:active,.mtabbar button.mtab:active{background:#f4f5f6;}

  /* '더보기' 시트 — 아래에서 올라오는 전체 메뉴 */
  .msheet{display:block; position:fixed; inset:0; z-index:80; visibility:hidden; pointer-events:none;}
  .msheet.open{visibility:visible; pointer-events:auto;}
  .msheet-bg{position:absolute; inset:0; background:rgba(28,29,31,.45); opacity:0; transition:opacity .2s;}
  .msheet.open .msheet-bg{opacity:1;}
  .msheet-panel{position:absolute; left:0; right:0; bottom:0; max-height:86vh; max-height:86dvh; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
    background:#fff; border-radius:20px 20px 0 0; padding:0 16px calc(24px + env(safe-area-inset-bottom)); transform:translateY(100%); transition:transform .24s cubic-bezier(.2,.8,.2,1);
    box-shadow:0 -8px 32px rgba(28,40,64,.14);}
  .msheet.open .msheet-panel{transform:none;}
  .msheet-grip{width:40px; height:4px; border-radius:2px; background:#d3d8df; margin:8px auto 4px;}
  .msheet-head{position:sticky; top:0; z-index:1; display:flex; align-items:baseline; gap:8px; background:#fff; padding:8px 0 10px;}
  .msheet-head b{font-size:17px; font-weight:600; color:#1c1d1f;}
  .msheet-head span{font-size:13px; color:#8f99a8;}
  .msheet-x{margin-left:auto; width:40px; height:40px; border:none; border-radius:20px; background:#f4f5f6; color:#6f7988; font-size:15px; cursor:pointer;}
  .msheet-sec{margin-top:14px;}
  .msheet-sec h4{font-size:12px; font-weight:600; color:#8f99a8; letter-spacing:0; margin:0 2px 8px;}
  .msheet-links{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;}
  .msheet-links .navsep,.msheet-links .subnav-sep{display:none;}
  .msheet-links a,.msheet-links button{display:flex; align-items:center; min-height:48px; padding:0 14px; border-radius:12px; background:#f4f5f6; color:#1c1d1f; font:inherit; font-size:14.5px; font-weight:500;
    border:none; text-align:left; text-decoration:none; width:100%; cursor:pointer; white-space:normal; line-height:1.3;}
  .msheet-links a.on{background:#e4edff; color:#266df0; font-weight:600;}
  .msheet-links form{margin:0;}
  .msheet-links form button{color:#c53030;}
  html.mlock,html.mlock body{overflow:hidden;}
}