/* ============================================================
   themes/dodon/style/_base.css

    로드: layouts/header.php (전 페이지 상시)
   ============================================================ */
   
   /* ============================================================
   _base.css — 전역 토큰 · 카테고리 테마색 · 레이아웃/버튼 기본
   전 페이지가 항상 로드한다. 여기 고치면 사이트 전체가 바뀐다.
   ============================================================ */

:root{
  --accent:#2F8F7B;
  --accent2:#23695A;
  --soft:#EAF4F1;            /* 카테고리 아닌 페이지 기본값 */
  --ink:#243247;
  --muted:#61707A;
  --line:#D8DDD8;
  --navy:#1F2B3A;
  --header-bg:#F4F5F1;
  --kick_red:#2F8F7B;
  --kick_red_glow:rgba(47,143,123,.18);
  --container:1180px;
  --r-soft:6px;
  --r-search:36px;
  --hero_scale:1.6;
  --price_red:#243247;
  --quote_green:#23695A;
/* 페이지 배경 — product-list / product-detail / subcategory 가 쓴다.
     :root 중복 정리 때 빠졌던 값. 없으면 배경이 흰색으로 떨어진다. */
  --background:#F4F5F1;
  --hero-tint:rgba(47,143,123,.14);
  --hero-tint-2:rgba(36,50,71,.06);  
  /* 리스트·카드가 var(--price)/var(--quote) 로 참조한다.
     이름을 한쪽으로 맞추기 전까지 별칭으로 연결. */
  --price:var(--price_red);
  --quote:var(--quote_green);
}

/* ------------------------------------------------------------
   카테고리 색 (구 category-colors.php 대체)
   body 에 .cat-{대분류id} 를 붙이면 아래 3개가 통째로 바뀐다.
   매핑 없는 id 는 :root 기본색(청록)으로 나온다. 안 죽음.
   카테고리 추가 시 여기 1줄만 추가.
   ------------------------------------------------------------ */
.cat-1   { --accent:#2F8F7B; --accent2:#25705F; --soft:#EAF4F1; } /* 정리용품 청록 */
.cat-2   { --accent:#C6603D; --accent2:#A34D2F; --soft:#F7ECE7; } /* 분류색띠라벨 테라코타 */
.cat-3   { --accent:#3F6DB5; --accent2:#31568F; --soft:#EAF0F8; } /* RFID·EM·RF 블루 */
.cat-4   { --accent:#7A8450; --accent2:#616A40; --soft:#F0F2E9; } /* 보수용품 올리브 */
.cat-5   { --accent:#4E7D8C; --accent2:#3D6470; --soft:#EAF2F4; } /* 도서관용품 틸 */
.cat-6   { --accent:#B08A3E; --accent2:#8E6F32; --soft:#F6F0E4; } /* 사인시스템 골드 */
.cat-7   { --accent:#6C6FB0; --accent2:#56588D; --soft:#EEEEF6; } /* 도서관리시스템 인디고 */
.cat-56  { --accent:#8A7048; --accent2:#6F5A39; --soft:#F3EDE3; } /* 문구·잡화 브라운 */
.cat-215 { --accent:#8C4E6A; --accent2:#6F3D53; --soft:#F5EAF0; } /* 맞춤결제 플럼 */

/* ------------------------------------------------------------
   리셋 / 타이포
   ------------------------------------------------------------ */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:"Noto Sans KR", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--ink);
  line-height:1.55;
  letter-spacing:-.1px;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; height:auto; }
button,input,select,textarea{ font:inherit; }

/* ------------------------------------------------------------
   레이아웃 유틸 — 헤더·푸터가 쓰므로 반드시 여기 있어야 한다
   ------------------------------------------------------------ */
.container{ width:min(var(--container), calc(100% - 40px)); margin:0 auto; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

/* JS 가 요소를 감출 때 쓰는 공용 클래스.
   dox3 는 Tailwind 가 제공하지만 dodon 은 없어서 직접 정의한다.
   쓰는 곳: member_find.js(번호칸), member_register.js(인증코드칸·메시지),
           앞으로 만들 폼들도 같은 이름을 쓴다. */
.hidden{ display:none !important; }
.muted{ color:var(--muted); }
.no-break{ white-space:nowrap; }

@media (max-width:640px){
  .container{ width:min(var(--container), calc(100% - 24px)); }
}

/* ------------------------------------------------------------
   버튼 기본 — 헤더 Search 버튼이 이걸 쓴다
   ------------------------------------------------------------ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:10px 14px;
  border:1px solid transparent;
  background:#fff;
  cursor:pointer;
  font-weight:800;
}
.btn-accent{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn-accent:hover{ background:var(--accent2); border-color:var(--accent2); color:#fff; }
.btn-ghost-onwhite{
  border:1px solid var(--line);
  border-radius:var(--r-soft);
  padding:9px 12px;
  background:#fff;
  color:var(--ink);
}

/* ------------------------------------------------------------
   빵가루 영역 — 전 페이지 공용
   category/list, product/detail, 앞으로 만들 cart·board 도 같이 쓴다.
   페이지별 CSS 에 각각 두면 값이 갈라지므로 여기 한 벌만 둔다.
   ------------------------------------------------------------ */
.page-top{
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.86);
}
.breadcrumb{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  padding:16px 0;
  font-size:13px;
  color:var(--muted);
}
.breadcrumb a:hover{ color:var(--ink); }
.breadcrumb strong{ color:var(--ink); }

/* ------------------------------------------------------------
   세부 분류 버튼바 (3차)
   리스트와 상세가 같이 쓴다. 상세에서도 같은 규격 목록을 보여줘야
   "다른 규격 보기"가 되기 때문.
   현재 항목 색은 body.cat-* 가 정한 --accent 를 따라간다.
   ------------------------------------------------------------ */
.sub-nav-bar{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:14px 0 0;
}
.sub-nav-link{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:5px 12px;
  border:1px solid var(--line);
  border-radius:var(--r-soft);
  background:#fff;
  color:var(--ink);
  font-size:13px;
  font-weight:800;
  white-space:nowrap;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.sub-nav-link:hover{ border-color:var(--accent); color:var(--accent); }
.sub-nav-link.is-active{
  border-color:var(--accent);
  background:var(--accent);
  color:#fff;
}

@media (max-width:640px){
  .sub-nav-bar{ gap:5px; }
  .sub-nav-link{ min-height:28px; padding:4px 10px; font-size:12px; }
}

/* ------------------------------------------------------------
   수량 조절 — 상세·장바구니 공용. 앞으로 주문서도 쓴다.
   --sm 은 좁은 자리(선택목록 줄 안)용 축소판.
   ------------------------------------------------------------ */
.qty-control{
  display:flex;
  align-items:center;
  border:1px solid var(--line);
  background:#fff;
  overflow:hidden;
}
.qty-control button{
  width:40px;
  height:42px;
  border:0;
  background:#fff;
  font-size:17px;
  font-weight:900;
  color:var(--muted);
  cursor:pointer;
}
.qty-control button:hover{ background:var(--soft); color:var(--accent2); }
.qty-control input{
  width:62px;
  height:42px;
  border:0;
  border-left:1px solid var(--line);
  border-right:1px solid var(--line);
  text-align:center;
  font-weight:800;
  outline:none;
}
.qty-control--sm button{ width:28px; height:30px; font-size:14px; }
.qty-control--sm input{ width:40px; height:30px; font-size:12px; }