/* 공유 브랜드 스타일 — 전체 폰트 시스템 + 접이식 페이지 설명(.pinfo).
   본문/UI = Pretendard, 페이지 제목(.ctitle) = 에이투지체(A2Z).
   모든 페이지가 <head>에서 이 파일을 링크한다(인라인 <style> 뒤에 와서 본문 폰트를 덮어씀).
   var()는 페이지 inline :root에 의존하되, 없을 때를 대비해 폴백값을 둔다. */

/* Pretendard — 본문/UI 기본 폰트(가변 woff2, 전 무게 1파일). 인박스/다운로드분 자체호스팅(오프라인 OK) */
@font-face {
  font-family: 'Pretendard';
  src: url('/static/fonts/PretendardVariable.woff2') format('woff2');
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}

/* 에이투지체 — 페이지 제목용 한 무게(SemiBold, ExtraBold는 너무 두꺼워 교체). ?v=2=폰트 캐시 무효화 */
@font-face {
  font-family: 'A2Z';
  src: url('/static/fonts/a2z.ttf?v=2') format('truetype');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* 본문/UI 전체에 Pretendard 적용(인라인 <style>의 맑은 고딕을 덮어씀 — 링크 순서상 이 파일이 뒤) */
body {
  font-family: 'Pretendard', 'Apple SD Gothic Neo', '맑은 고딕', 'Malgun Gothic', system-ui, -apple-system, sans-serif;
}

/* 페이지 제목(.ctitle)에 에이투지체 적용 — 두께는 SemiBold(600)로 얇게 */
.ctitle { font-family: 'A2Z', 'Pretendard', '맑은 고딕', 'Malgun Gothic', system-ui, sans-serif; font-weight: 600; }
/* orders.html은 .chan-ctx .ctitle 가 더 구체적이라 두께가 안 먹음 → 동일 두께로 맞춤 */
.chan-ctx .ctitle { font-weight: 600; }

/* 페이지 설명 — 동그라미 ▾ 를 눌러 펼치는 박스. 네이티브 <details>라 JS 0 */
details.pinfo { margin: 0 0 16px; }
details.pinfo > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ink-2, #44403c);
  background: var(--soft, #faf9f7);
  border: 1px solid var(--line-2, #ddd8d1);
  border-radius: 999px;
  padding: 6px 14px 6px 8px;
  user-select: none;
}
details.pinfo > summary::-webkit-details-marker { display: none; }  /* 기본 삼각형 숨김 */
details.pinfo > summary::marker { content: ''; }
details.pinfo > summary:hover { background: var(--neutral-bg, #f2f1ee); }
.pinfo-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--coral, #ea580c);
  color: #fff;
  font-size: 17px;     /* 화살표 글리프 키움 */
  line-height: 1;
  transition: transform .2s ease;
}
details.pinfo[open] .pinfo-ic { transform: rotate(180deg); }
.pinfo-body {
  margin-top: 10px;
  font-size: 13px;
  color: var(--ink-2, #44403c);
  background: var(--soft, #faf9f7);
  border: 1px solid var(--line, #ece8e3);
  border-left: 3px solid var(--teal, #0d9488);
  border-radius: 9px;
  padding: 11px 14px;
  line-height: 1.6;
  max-width: 820px;
}
.pinfo-body b { color: var(--ink, #1c1917); }
.pinfo-body i { color: var(--ink-3, #78716c); }

/* 관리자 영역 하위탭 — admin.html · orders_mappings.html 공유.
   양쪽 페이지가 토큰 출처가 달라(style.css vs 인라인 :root) var() 폴백을 둔다. */
nav.adminsub { display:flex; gap:4px; flex-wrap:wrap; align-items:flex-end;
  margin:2px 0 18px; border-bottom:1px solid var(--line-2,#ddd8d1); }
nav.adminsub a { text-decoration:none; font-size:14.5px; font-weight:700;
  color:var(--ink-3,#78716c); padding:9px 16px; border-bottom:2.5px solid transparent;
  margin-bottom:-1px; border-radius:8px 8px 0 0; }
nav.adminsub a:hover { background:var(--neutral-bg,#f2f1ee); color:var(--ink-2,#44403c); }
nav.adminsub a.active { color:var(--coral-d,#c2410c); border-bottom-color:var(--coral,#ea580c); }

/* ===== 반응형 — 모바일/태블릿 ===== */
/* nav-scroll.js가 상단탭을 .navscroll로 감싸고 ‹ › 버튼을 넣는다.
   데스크탑: 래퍼는 투명(display:contents), 화살표 숨김 → 기존 레이아웃 유지. */
.navscroll { display:contents; }
.navarrow { display:none; }

@media (max-width:1024px) {
  /* 헤더 한 줄(브랜드+사용자) + 그 아래 한 줄로 스크롤되는 탭 띠.
     여백을 줄여 브랜드+사용자칩이 실제로 한 줄에 들어오게 한다(예전엔 몇 px 모자라 사용자칩이
     다음 줄로 밀려 헤더가 3줄=137px로 높아졌다 → 2줄≈93px로 흰 띠 축소). */
  header.top .top-in { gap:6px; row-gap:8px; padding:8px 12px; }
  .navscroll { display:flex; align-items:center; gap:6px; min-width:0; }
  .top-in .navscroll { order:3; flex:1 1 100%; }   /* 상단탭만 한 줄 전체로 내림(서브탭엔 미적용) */
  .user-box { flex-wrap:nowrap; }                   /* 칩·톱니·로그아웃 한 줄 유지 */
  /* 가로 스크롤 대상: 상단탭 + 화면 안 서브탭 */
  header.top .top-in nav.topnav, header.top .top-in nav.tabs, .subtabs {
    flex:1 1 auto; min-width:0; flex-wrap:nowrap; overflow-x:auto; scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; cursor:grab; }
  header.top .top-in nav.topnav::-webkit-scrollbar,
  header.top .top-in nav.tabs::-webkit-scrollbar,
  .subtabs::-webkit-scrollbar { display:none; }
  .navscroll.dragging { cursor:grabbing; }
  .gtab, nav.tabs > a, nav.tabs > button, .gdrop, .subtabs > .tab { flex:0 0 auto; white-space:nowrap; }

  /* 좌우 원형 화살표 — 흰 바탕 + 테두리 + 검정 화살표(주황 아님) */
  .navarrow { display:none; align-items:center; justify-content:center; flex:0 0 auto;
    width:30px; height:30px; padding:0; border-radius:50%; border:1px solid var(--line-2,#ddd8d1);
    background:#fff; color:var(--ink,#1c1917); font-size:19px; line-height:1; cursor:pointer;
    box-shadow:0 1px 2px rgba(60,50,40,.08); }
  .navarrow:hover { background:var(--neutral-bg,#f2f1ee); }
  .navarrow:active { transform:scale(.94); }

  /* 모바일에선 상단 드롭다운(품목·거래처)을 끈다.
     터치에선 :hover가 고착돼 떠다니는 fixed 박스가 상단 탭을 덮는 버그가 났다.
     품목/거래처 탭을 누르면 아래 서브탭 띠가 같은 항목을 보여주므로(=모바일 하위 내비)
     드롭다운은 불필요. ponytail: 서브탭 띠가 이미 같은 역할 → 드롭다운만 제거가 최소수정. */
  .gdrop .gmenu, .gdrop:hover .gmenu, .gdrop.open .gmenu { display:none !important; }

  /* 본문 여백 축소 */
  .wrap, main { padding-left:14px; padding-right:14px; }
}

@media (max-width:560px) {
  .gtab, nav.tabs > a, nav.tabs > button { padding:8px 11px; font-size:13.5px; }
  .brand .sb { display:none; }                 /* 좁으면 브랜드 부제 숨겨 폭 확보 */
  .brand .nm { display:none; }                  /* 제목 텍스트도 숨기고 로고만 — 로고+컨트롤이 한 줄에 들어오게(로고 PNG가 브랜드 식별) */
  .brand img { height:26px !important; }         /* 로고 살짝 축소(템플릿 인라인 height:30px 덮음). 폭 확보 */
  .uchip .un { display:none; }                  /* 사용자 칩은 아바타만 */
  /* 컨트롤 묶음(알림·칩·톱니·로그아웃) 여백 미세 축소 → 작은 폰(≈360px)도 로고와 한 줄 유지 */
  .user-box { gap:5px; }
  .uchip { padding:3px 5px 3px 9px; gap:6px; }
  .bell { padding:2px; }
  .gear { padding:5px; }
  .logout { padding:6px 9px; }
  nav.adminsub a { padding:8px 13px; font-size:13.5px; }
}
