@charset "UTF-8";
/* ============================================================
   themes/erp/style/layout.css
   상단바 · 로고/검색 · 분류네비 · 빵가루 · 푸터
   ------------------------------------------------------------
   전 페이지 고정 로드 (header.php). base.css 다음에 읽힌다.
   → base.css 의 --토큰을 참조하므로 순서 바뀌면 색이 안 나옴.
   ============================================================ */


/* ============================================================
   1. 상단 유틸 바
   주문조회 / 견적함 / 이용안내 / 고객센터
   ============================================================ */
.topbar{
  background:var(--ink);
  color:#C9D0D6;
  font-size:12.5px;
}
.topbar .wrap{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:22px;
  height:34px;
}
.topbar a:hover{ color:#fff; }


/* ============================================================
   2. 로고 + 검색 + 회원메뉴
   ============================================================ */
.masthead{
  background:var(--surface);
  border-bottom:1px solid var(--line);
}
.masthead .wrap{
  display:flex;
  align-items:center;
  gap:40px;
  padding-block:14px;      /* 22 → 14. 헤더 높이를 낮춰 본문을 위로 */
}

/* ── 2-1. 로고 ── */
.logo{
  display:flex;
  align-items:baseline;   /* 한글 로고와 영문 부제의 밑선을 맞춤 */
  gap:10px;
  flex-shrink:0;
}
.logo b{
  font-family:var(--f-display);
  font-weight:700;
  font-size:27px;
  line-height:1;
  letter-spacing:-.02em;
}
.logo span{
  font-family:var(--f-mono);
  font-size:10.5px;
  letter-spacing:.14em;
  color:var(--ink-faint);
}
/* 이미지 로고를 쓸 경우 */
.logo img{ height:34px; width:auto; object-fit:contain; }

/* ── 2-2. 검색 ──
   B2B는 이름보다 상품코드로 찾는다. 그래서 헤더에서 가장 넓다. */
.search{
  flex:1;
  display:flex;
  border:1.5px solid var(--ink);
  border-radius:var(--r);
  background:#fff;
  overflow:hidden;        /* 안쪽 버튼 모서리가 테두리를 넘지 않게 */
}
.search input{
  flex:1;
  min-width:0;            /* flex 안에서 input이 안 줄어드는 문제 방지 */
  border:0;
  padding:11px 15px;
  font-size:14px;
  background:transparent;
}
.search input::placeholder{ color:var(--ink-faint); }
.search input:focus{ outline:none; }   /* 테두리는 .search 가 이미 그림 */

.search button{
  border:0;
  background:var(--ink);
  color:#fff;
  padding-inline:22px;
  font-size:13.5px;
  font-weight:500;
  letter-spacing:.02em;
  cursor:pointer;
}
.search button:hover{ background:var(--accent-hi); }

/* ── 2-3. 로그인 / 회원가입 / 장바구니 ── */
.util{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}
.util a{
  padding:9px 15px;
  font-size:13px;
  color:var(--ink-soft);
  border:1px solid var(--line);
  border-radius:var(--r);
  white-space:nowrap;
}
.util a:hover{ border-color:var(--ink); color:var(--ink); }

/* 강조 버튼 (기관 회원가입) */
.util a.solid{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}
.util a.solid:hover{ background:var(--accent-hi); }

/* 맞춤결제 — 우측 메뉴에서 유일하게 채운 버튼.
   견적 확정 건 결제라 일반 메뉴와 성격이 달라 색으로 구분한다. */
.util a.point{
  background:var(--warn);
  border-color:var(--warn);
  color:#fff;
  font-weight:500;
}
.util a.point:hover{
  background:#713B25;      /* --warn 보다 한 단계 어둡게 */
  border-color:#713B25;
}

/* 장바구니 — 아이콘 + 개수 뱃지 */
.util .cart{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.util .cart .material-symbols-outlined{ font-size:20px; }
.util .cart-badge{
  min-width:18px;
  height:18px;
  padding:0 5px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--warn);
  color:#fff;
  border-radius:9px;
  font-family:var(--f-mono);
  font-size:10.5px;
  line-height:1;
}
/* 0개일 때는 뱃지를 숨긴다 (PHP에서 hidden 붙임) */


/* ============================================================
   3. 대분류 네비
   청구기호처럼 "코드 + 이름" 순서.
   가로가 넘치면 스와이프 (스크롤바는 숨김)
   ============================================================ */
.classnav{
  background:var(--surface);
  border-bottom:1px solid var(--line);
  overflow-x:auto;
  scrollbar-width:none;              /* 파이어폭스 */
}
.classnav::-webkit-scrollbar{ display:none; }   /* 크롬·사파리 */

.classnav ul{
  display:flex;
  margin:0;
  padding:0;
  list-style:none;
  min-width:max-content;             /* 줄바꿈 대신 가로 스크롤 */
}
.classnav a{
  display:flex;
  align-items:baseline;
  gap:7px;
  padding:12px 17px;
  font-size:13.5px;
  color:var(--ink-soft);
  white-space:nowrap;
  border-bottom:2px solid transparent;   /* hover 때 두께가 안 변하도록 미리 자리 확보 */
}
/* 분류코드 (010, 020 …) */
.classnav a i{
  font-family:var(--f-mono);
  font-style:normal;
  font-size:10.5px;
  letter-spacing:.04em;
  color:var(--ink-faint);
}
.classnav a:hover{
  color:var(--ink);
  background:var(--band-lt);
  border-bottom-color:var(--band);
}
/* 현재 보고 있는 분류
   <li class="cat-2"> 로 감싸면 그 카테고리 색이 나온다 */
.classnav a[aria-current]{
  color:var(--ink);
  font-weight:500;
  background:var(--band-lt);
  border-bottom-color:var(--band);
}


/* ============================================================
   4. 빵가루 (인라인)
   제목 줄 앞에 작게 붙는다.  홈 › 분류색띠라벨 › [큰제목]
   ------------------------------------------------------------
   따로 한 줄을 차지하지 않아 세로 공간을 아끼고,
   경로와 제목이 한눈에 이어져 읽힌다.
   목록·상세 공용 → components/_crumb.php
   ============================================================ */
.crumb-inline{
  display:inline;
  font-size:15px;
  font-weight:400;
  color:var(--ink-faint);
  letter-spacing:-.01em;
}
.crumb-inline a:hover{ color:var(--ink); text-decoration:underline; }
.crumb-inline .sep{
  margin:0 5px;
  color:var(--shelf-dark);
}

/* ── 빵가루 바 (한 줄짜리 — 장바구니·회원·검색 등 일반 페이지용)
     카테고리·상세는 제목에 합쳐진 인라인(crumb-inline)을 쓰고,
     나머지는 이 바가 메뉴와 page-head 사이 완충이 된다 ── */
.crumb-bar{
  background:var(--surface);
  border-bottom:1px solid var(--line-soft);
}
.crumb-bar .wrap{
  display:flex;
  align-items:center;
  gap:8px;
  height:36px;
  font-size:12.5px;
  color:var(--ink-faint);
  white-space:nowrap;
  overflow-x:auto;
  scrollbar-width:none;
}
.crumb-bar .wrap::-webkit-scrollbar{ display:none; }
.crumb-bar a:hover{ color:var(--ink); }
.crumb-bar .sep{ color:var(--shelf-dark); }
.crumb-bar b{ color:var(--ink); font-weight:500; } 

/* ============================================================
   5. 섹션 머리
   "새로 들어온 품목" 같은 제목 + 오른쪽 더보기
   여러 페이지에서 쓰이므로 layout 에 둔다.
   ============================================================ */
.sec-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:28px;
  padding-bottom:13px;
  border-bottom:1px solid var(--ink);
}
.sec-head h2{
  margin:0;
  font-family:var(--f-display);
  font-weight:600;
  font-size:21px;
  letter-spacing:-.02em;
}
.sec-head .more{
  font-size:13px;
  color:var(--ink-soft);
  white-space:nowrap;
}
.sec-head .more:hover{ color:var(--accent-hi); }


/* ============================================================
   6. 페이지 머리
   장바구니·주문서 등 분류가 아닌 페이지의 제목 영역
   ============================================================ */
.page-head{
  background:var(--surface);
  border-top:5px solid var(--ink);     /* 분류 페이지는 여기가 카테고리 색 */
  border-bottom:1px solid var(--line);
}
.page-head .wrap{ padding-block:26px 22px; }
.page-head h1{
  margin:0;
  font-family:var(--f-display);
  font-weight:600;
  font-size:29px;
  line-height:1.3;
  letter-spacing:-.025em;
}
.page-head p{
  margin:6px 0 0;
  font-size:13.5px;
  font-weight:300;
  color:var(--ink-soft);
}


/* ============================================================
   7. 푸터
   ============================================================ */
footer{
  background:var(--ink);
  color:#96A2AB;
  font-size:12.5px;
  font-weight:300;
  padding-block:44px 52px;
}
.foot-top{
  display:flex;
  justify-content:space-between;
  gap:30px;
  flex-wrap:wrap;
  padding-bottom:22px;
  margin-bottom:22px;
  border-bottom:1px solid rgba(255,255,255,.11);
}
.foot-top .logo b{ color:#fff; }
.foot-top .logo span{ color:#6E7C86; }

.foot-links{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}
.foot-links a:hover{ color:#fff; }

/* 사업자정보 — Site::company() 값이 들어오는 자리 */
.foot-biz{ line-height:1.9; }
.foot-biz b{ color:#C9D0D6; font-weight:500; }


/* ============================================================
   8. 반응형
   980 : 태블릿 — 검색창이 아랫줄로 내려감
   640 : 모바일
   ============================================================ */
@media (max-width:980px){
  .masthead .wrap{
    flex-wrap:wrap;
    gap:16px;
  }
  /* 검색을 3번째 줄로 보내고 폭 100% */
  .search{
    order:3;
    flex:1 0 100%;
    width:100%;
  }
  .util{ margin-left:auto; }
}

@media (max-width:640px){
  .topbar .wrap{
    justify-content:center;
    gap:16px;
  }
  .masthead .wrap{ padding-block:16px; }
  .logo b{ font-size:23px; }
  .logo span{ display:none; }        /* 영문 부제는 모바일에서 숨김 */

  .util a{ padding:8px 11px; font-size:12.5px; }

  .sec-head h2{ font-size:18px; }
  .page-head h1{ font-size:23px; }
}