@charset "UTF-8";
/* =============================================================================
   KOHBS Global (kohbs.com · WordPress · Woodmart 8.2.7) — 스타일가이드 4차 맞춤
   - 기준: kohbs-shopby docs/planning/design-v02/tokens.json (4차) · docs/decisions/0004-design-direction.md 5절
   - 원본 수정안: kohbs-shopby docs/global/kohbs-global.css · README.md (2026-11-14)
   - 로드: functions.php 가 style.css 다음, Woodmart 테마 설정 CSS 다음에 enqueue (filemtime 버전)
   - Pretendard(한글)는 functions.php 에서 별도 enqueue — @import 는 렌더를 막아서 뺐다
   ============================================================================= */

/* 0-1. 영문·숫자 Satoshi — 400·500·700 (Fontshare ITF Free Font License, 자체 호스팅)
   파일: 이 테마의 fonts/Satoshi-{Regular,Medium,Bold}.woff2 · 라이선스 fonts/Satoshi-LICENSE-FFL.txt
   테마 옵션 › Custom fonts 의 Satoshi(500 woff · Bold 를 600 으로 등록)는 그대로 둬도 충돌 없음 */
@font-face { font-family: "Satoshi"; src: url("fonts/Satoshi-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/Satoshi-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/Satoshi-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* 1. 기준 토큰 (tokens.json 값 그대로 — 바꾸려면 tokens.json 부터) */
:root {
  --k-ink: #000021;
  --k-ink-2: #14143A;
  --k-ink-soft: #E8E8F0;
  --k-util: #242424;
  --k-footer: #000000;
  --k-text-1: #1F1F2B;
  --k-text-2: #4B4B57;
  --k-text-3: #6B6B75;
  --k-line: #E7E8EC;
  --k-line-2: #D4D6DC;
  --k-bg: #FFFFFF;
  --k-bg-soft: #F5F7F8;
  --k-bg-soft-2: #EEF0F3;
  --k-accent: #0E7C86;
  --k-accent-soft: #E6F3F4;
  --k-danger: #E03E3E;
  --k-warning: #A65A0B;
  --k-warning-soft: #FFF5E8;
  --k-on-ink-line-2: #4A4A70;
  --k-on-ink: #FFFFFF;
  --k-on-ink-2: #A9A9C2;
  --k-on-ink-body: #C4C4D6;
  --k-on-ink-accent: #8FD3D8;
  --k-util-text: #CFCFD4;
  --k-footer-text: #A8A8B3;
  --k-footer-text-2: #8E8E98;
  --k-footer-line: #2A2A2A;

  --k-font: Satoshi, Pretendard, -apple-system, "Apple SD Gothic Neo", sans-serif;
  --k-fw-regular: 400;
  --k-fw-medium: 500;
  --k-fw-bold: 700;

  --k-container: 1600px;
  --k-gutter: 30px;
  --k-gutter-m: 16px;

  --k-h-lg: 48px;
  --k-h-md: 40px;
  --k-h-sm: 34px;
  --k-r-pill: 999px;
  --k-r-xl: 14px;
}

/* 2. Woodmart 전역 변수 → 토큰 (테마 옵션에 없는 것만)
   테마 컴파일 CSS(:root)보다 뒤에서 이기도록 특이도 (0,4,0) */
:root:root:root:root {
  /* 글꼴 — 테마 옵션(Typography)은 "Satoshi", Arial 이라 한글 대체 글꼴(Pretendard)을 여기서 붙인다.
     굵기·글자색·주색·링크·버튼 바탕/굵기/대문자는 2026-11-14 테마 옵션으로 옮겨 이 절에서 뺐다 */
  --wd-text-font: var(--k-font);
  --wd-title-font: var(--k-font);
  --wd-entities-title-font: var(--k-font);
  --wd-widget-title-font: var(--k-font);
  --wd-header-el-font: var(--k-font);

  /* 버튼 모양 — 테마 옵션 Rounded 는 35px. 토큰은 알약(999) */
  --btn-default-brd-radius: var(--k-r-pill);
  --btn-accented-brd-radius: var(--k-r-pill);

  /* 입력 — 테마 옵션에 테두리색 칸이 비어 있어 여기서 정한다 (토큰 「입력 테두리」 line-2) */
  --wd-form-brd-color: var(--k-line-2);
  --wd-form-color: var(--k-text-1);
}

/* 2-1. Woodmart 회색 단계(--color-gray-*) — 위젯·이동 경로·탭·날짜·브랜드 글자가 여기서 온다
   흰 바탕 문맥(:root · .color-scheme-dark)만 바꾼다. 어두운 바탕용(color-scheme-light)은 테마 값 유지 */
:root:root:root:root,
.color-scheme-dark.color-scheme-dark {
  --color-gray-300: var(--k-text-3);   /* #BBBBBB */
  --color-gray-400: var(--k-text-3);   /* #A5A5A5 */
  --color-gray-500: var(--k-text-2);   /* #767676 */
  --color-gray-600: var(--k-text-2);   /* #666 */
  --color-gray-700: var(--k-text-2);   /* #555 */
  --color-gray-800: var(--k-text-1);   /* #333 */
  --color-gray-900: var(--k-text-1);   /* #242424 */
}
.mobile-tab-title .nav-link-text { color: var(--k-text-2); }   /* 모바일 메뉴 탭 「Menu」 #909090 */

/* 3. 본문 폭 — 컨테이너 1660(테마 옵션 그대로) + 옆 여백 15 → 30 = 본문 최대 1600
   좁은 화면(1024 미만)은 모바일 여백 16 */
.container,
.container-fluid { padding-inline: var(--k-gutter); }
@media (max-width: 1024px) {
  .container,
  .container-fluid { padding-inline: var(--k-gutter-m); }
}
/* Elementor 「섹션 늘이기」 블록도 같은 폭으로 (테마는 15×2 를 빼고 계산한다) */
.e-con-boxed.wd-section-stretch { --container-max-width: min(calc(var(--wd-container-w) - var(--k-gutter) * 2)); }
.elementor-section.wd-section-stretch > .elementor-container { max-width: calc(var(--wd-container-w) - var(--k-gutter) * 2 + var(--wd-el-column-gap, .0001px)); }
@media (min-width: 1025px) {
  [class*="wd-section-stretch"].wd-negative-gap { --padding-left: var(--k-gutter); --padding-right: var(--k-gutter); }
  [class*="wd-section-stretch"].wd-negative-gap:where(.elementor-section) { padding-inline: var(--k-gutter); }
}
@media (max-width: 1024px) {
  [class*="wd-section-stretch"].wd-negative-gap { --padding-left: var(--k-gutter-m); --padding-right: var(--k-gutter-m); }
}

/* 4. 글꼴 */
body { font-family: var(--k-font); }
.kohbs-desc, .kohbs-desc p, .kohbs-desc li { font-weight: var(--k-fw-regular); }

/* 5. 버튼 3종 — 주(잉크 채움) · 보조(흰 바탕 + line-2) · 어두운 바탕용(흰 테두리), 알약, 700 */
:is(.btn, .button, [type=submit]):not(.btn-style-link):not(.searchsubmit):not(.show-password-input):not(.minus):not(.plus) {
  --btn-brd-radius: var(--k-r-pill);
  --btn-font-weight: var(--k-fw-bold);
  --btn-transform: none;
}
.btn-size-default:not(.btn-style-link) { --btn-height: var(--k-h-md); --btn-padding: 5px 20px; --btn-font-size: 14px; }
.btn-size-small:not(.btn-style-link),
.wd-product .button { --btn-height: var(--k-h-sm); --btn-padding: 5px 14px; --btn-font-size: 13px; }

/* 5-1. 주 버튼: 테마 기본 회색 각진 버튼(#F3F3F3 · 색 지정 없음) · #242424 버튼 → 잉크 */
.btn.btn-style-default:not([class*="btn-color-"]),
.btn-color-black,
.btn-color-default {
  --btn-color: var(--k-on-ink);
  --btn-color-hover: var(--k-on-ink);
  --btn-bgcolor: var(--k-ink);
  --btn-bgcolor-hover: var(--k-ink-2);
  --btn-brd-color: var(--k-ink);
  --btn-brd-color-hover: var(--k-ink-2);
  --btn-box-shadow-hover: none;
}
.btn-shape-rectangle { --btn-brd-radius: var(--k-r-pill); }
.widget_price_filter .button,
.wd-widget .button { --btn-bgcolor: var(--k-ink); --btn-bgcolor-hover: var(--k-ink-2); background-color: var(--k-ink); color: var(--k-on-ink); }

/* 5-2. 보조 버튼: 흰 채움 버튼(btn-color-white) · 「Register」 전환 버튼 · 쇼핑 계속 */
.btn.btn-color-white.btn-style-default,
.wd-switch-to-register,
.woocommerce-MyAccount-content .button.wc-forward {
  --btn-color: var(--k-ink);
  --btn-color-hover: var(--k-ink);
  --btn-bgcolor: var(--k-bg);
  --btn-bgcolor-hover: var(--k-bg-soft);
  --btn-brd-width: 1px;
  --btn-brd-color: var(--k-line-2);
  --btn-brd-color-hover: var(--k-line-2);
  --btn-box-shadow-hover: none;
  background-color: var(--k-bg);
  color: var(--k-ink);
  border: 1px solid var(--k-line-2);
}
.btn.btn-color-white.btn-style-default:hover,
.wd-switch-to-register:hover { background-color: var(--k-bg-soft); color: var(--k-ink); }

/* 5-3. 어두운 바탕용: 사진 배너 · 잉크 띠 · 검정 띠 · 푸터 안 버튼 → 투명 + 흰 테두리 */
.promo-banner .btn.btn-color-white.btn-style-default,
.wd-footer .btn.btn-style-bordered,
.elementor-element-2672800 .btn.btn-color-white,
.elementor-element-93e7d19 .btn,
.color-scheme-light .btn.btn-color-white.btn-style-default {
  --btn-color: var(--k-on-ink);
  --btn-color-hover: var(--k-on-ink);
  --btn-bgcolor: transparent;
  --btn-bgcolor-hover: rgba(255, 255, 255, 0.12);
  --btn-brd-width: 1px;
  --btn-brd-color: var(--k-on-ink);
  --btn-brd-color-hover: var(--k-on-ink);
  --btn-box-shadow-hover: none;
  background-color: transparent;
  color: var(--k-on-ink);
  border: 1px solid var(--k-on-ink);
}
.promo-banner .btn.btn-color-white.btn-style-default:hover,
.wd-footer .btn.btn-style-bordered:hover,
.elementor-element-2672800 .btn.btn-color-white:hover,
.elementor-element-93e7d19 .btn:hover { background-color: rgba(255, 255, 255, 0.12); }
/* 배너 버튼은 lg (48) */
.promo-banner .btn,
.elementor-element-2672800 .btn,
.elementor-element-93e7d19 .btn { --btn-height: var(--k-h-lg); --btn-padding: 5px 28px; --btn-font-size: 15px; }

/* 5-4. 글자 버튼: 「Subscribe」 · 「Create An Account」 · 「Lost your password?」 → 청록 */
.btn.btn-style-link,
.create-account-button,
.woocommerce-LostPassword a,
a.lost_password { --btn-color: var(--k-accent); --btn-color-hover: var(--k-ink); --btn-brd-color: currentColor; color: var(--k-accent); }

/* 5-5. 상품 상세 담기 — 자식 테마 !important 를 같은 값(잉크)으로, 호버만 ink-2 · 알약 · 700 */
.single-product .single_add_to_cart_button,
.single-product .single_add_to_cart_button.alt {
  background-color: var(--k-ink) !important;
  border-color: var(--k-ink) !important;
  border-radius: var(--k-r-pill);
  font-weight: var(--k-fw-bold);
  text-transform: none;
  min-height: var(--k-h-lg);
  padding-inline: 28px;
}
.single-product .single_add_to_cart_button:hover,
.single-product .single_add_to_cart_button.alt:hover { background-color: var(--k-ink-2) !important; border-color: var(--k-ink-2) !important; }
/* 수량 −/+ : 검정 1px → line-2, 글자 잉크 */
.single-product .quantity .minus,
.single-product .quantity .plus,
.single-product .quantity input.qty { border-color: var(--k-line-2) !important; color: var(--k-ink) !important; }
.single-product .quantity .minus,
.single-product .quantity .plus { background-color: var(--k-bg) !important; }
.single-product .quantity .minus:hover,
.single-product .quantity .plus:hover { background-color: var(--k-ink) !important; border-color: var(--k-ink) !important; color: var(--k-on-ink) !important; }

/* 6. 글자 회색 — #767676 · #A5A5A5 · #BBBBBB · #909090 → text-2 / text-3 */
.wd-product-cats a,
.wd-product .wd-product-cats a { color: var(--k-text-3); }                        /* #A5A5A5 상품 카드 분류 */
.recent-posts-info,
.recent-posts-time,
.recent-posts-comment,
.wd-entities-meta,
.wd-post-date { color: var(--k-text-3); }                                           /* #BBBBBB 글 날짜 */
.wd-breadcrumbs, .woocommerce-breadcrumb,
.wd-breadcrumbs a, .woocommerce-breadcrumb a { color: var(--k-text-3); }           /* #767676 이동 경로 */
.wd-breadcrumbs .wd-last, .woocommerce-breadcrumb .wd-last { color: var(--k-text-1); }
.per-page-variation, .wd-products-per-page a { color: var(--k-text-3); }
.per-page-variation.current-variation, .wd-products-per-page .current-variation { color: var(--k-text-1); }
.wd-empty-page-text, .cookies-info-text { color: var(--k-text-2); }
.wd-tools-element .wd-tools-text,
.wd-header-mobile-nav .nav-link-text,
.wd-tabs-title { color: var(--k-text-2); }                                           /* #909090 「Menu」 · 탭 0.7 */
.wd-nav-tabs > li.active .wd-tabs-title,
.wd-nav-tabs > li:hover .wd-tabs-title { color: var(--k-text-1); }
.wd-nav-main > li > a,
.wd-nav-secondary > li > a { color: var(--k-text-1); }                               /* #333 메뉴 */
.whb-top-bar .wd-nav-secondary > li > a,
.whb-top-bar .wd-nav-secondary > li > a .nav-link-text { color: var(--k-util-text); } /* 유틸 바 #242424 위 글자 */
.wd-text-block, .wd-text-block p { color: var(--k-text-2); }
.searchform .searchsubmit { color: var(--k-text-2); }
label .required, .required { color: var(--k-danger); }

/* 6-1. 제목 대문자 → 원문 (LOGIN · REGISTER · 상세 탭 · 관련 상품) */
.wd-login-title, .col-register h2, .col-login h2, .u-column1 h2, .u-column2 h2,
.wd-nav-tabs .wd-tabs-title, .slider-title, .related-products .title,
.wd-el-title .title { text-transform: none; }

/* 6-2 상품 라벨 색 · 6-3 정렬 셀렉트 검정은 테마 옵션(Product labels)과 푸터 블록 수정(2026-11-14)으로 해결돼 뺐다 */

/* 7. 푸터 — 흰 0.9 → footer-text, 구분선 → footer-line */
.wd-footer { color: var(--k-footer-text); }
.wd-footer a:not(.btn),
.wd-footer .wd-text-block,
.wd-footer .wd-text-block p,
.wd-footer li a { color: var(--k-footer-text); }
.wd-footer a:not(.btn):hover { color: var(--k-on-ink); }
.wd-footer :is(h1, h2, h3, h4, h5, .title, .wd-el-toggle-title, .widget-title) { color: var(--k-on-ink); }
.wd-footer .copyrights-wrapper, .wd-footer .wd-copyrights { color: var(--k-footer-text-2); border-color: var(--k-footer-line); }

/* 8. 홈 (page 167) — 배너·강조색
   8-1. 사진 배너 3개 — 흰 글자가 사진 위에서 읽히도록 아래쪽 잉크 그늘 */
.elementor-element-410b3b8 .promo-banner .main-wrapp-img,
.elementor-element-c76081d .promo-banner .main-wrapp-img,
.elementor-element-a29dcbc .promo-banner .main-wrapp-img { position: relative; }
.elementor-element-410b3b8 .promo-banner .main-wrapp-img::after,
.elementor-element-c76081d .promo-banner .main-wrapp-img::after,
.elementor-element-a29dcbc .promo-banner .main-wrapp-img::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 33, 0.78) 0%, rgba(0, 0, 33, 0.35) 45%, rgba(0, 0, 33, 0) 70%);
}
/* 배너 제목·내용·부제 흰색과 버튼 Bordered·White 는 Elementor 블록 값으로 옮겼다 (2026-11-14) */
.elementor-element-410b3b8 .banner-title,
.elementor-element-c76081d .banner-title,
.elementor-element-a29dcbc .banner-title { font-weight: var(--k-fw-bold); }

/* 8-2. 히어로 슬라이드 글자 #000 0.78 → text-1 */
.wd-slide .title, .wd-slide .woodmart-title-container,
.elementor-element-3e6e7ab .title { color: var(--k-text-1) !important; }
.elementor-element-e4d2c10 .wd-text-block, .elementor-element-e4d2c10 .wd-text-block p { color: var(--k-text-2); }

/* 8-3. SHALABS 띠 글자 (바탕은 블록 값 #000021 · 머리표 #0E7C86) */
/* 띠 바탕 잉크 · 머리표 청록은 블록 값으로 옮겼다 */
.elementor-element-b0b4646 .wd-text-block, .elementor-element-b0b4646 p { color: var(--k-on-ink) !important; }
.elementor-element-2672800 .wd-text-block, .elementor-element-2672800 .wd-text-block p { color: var(--k-on-ink-body); }
.elementor-element-2672800 .title { color: var(--k-on-ink); }

/* 9. About (page 171) — 띠 글자. 바탕(잉크 · 잉크 · 검정)과 부제 #A9A9C2 는 블록 값으로 옮겼다 (2026-11-14) */
.elementor-element-24ea206 .wd-text-block, .elementor-element-24ea206 .wd-text-block p,
.elementor-element-24ea206 li, .elementor-element-24ea206 .wd-list-content { color: var(--k-on-ink-body) !important; }
.elementor-element-24ea206 strong, .elementor-element-24ea206 b,
.elementor-element-24ea206 .title { color: var(--k-on-ink) !important; }
.elementor-element-cf31a5e .wd-text-block, .elementor-element-cf31a5e .wd-text-block p { color: var(--k-on-ink-body); }
.elementor-element-e0982c1 .wd-text-block, .elementor-element-e0982c1 .wd-text-block p { color: var(--k-on-ink-body); }
.elementor-element-e0982c1 strong, .elementor-element-e0982c1 b { color: var(--k-on-ink); }
/* 9-1. 「Why KOHBS」 사진 카드(el-62f33ae, 배경 사진 위 흰 제목·부제) — 홈 배너처럼 아래쪽 잉크 그늘.
   제목·부제가 세로 가운데라 그늘을 카드 위끝까지 옅게 이어 올린다 */
.elementor-element-62f33ae { position: relative; isolation: isolate; }
.elementor-element-62f33ae::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(to top, rgba(0, 0, 33, 0.82) 0%, rgba(0, 0, 33, 0.6) 50%, rgba(0, 0, 33, 0.3) 80%, rgba(0, 0, 33, 0.1) 100%);
}
.elementor-element-62f33ae > .elementor-element { position: relative; z-index: 1; }
.elementor-element-62f33ae .title-subtitle { font-weight: var(--k-fw-medium); }   /* 색은 블록 값 #FFFFFF */

/* 10. 상품 설명(.kohbs-desc) — 2026-11-14 설명 HTML 287건을 토큰 색 var(--k-*) · 글꼴 상속 · !important 없음으로 바꿔
   인라인 색을 덮던 속성 선택자 다리를 뺐다 (deploy/db/20261114-desc-tokens.py) */

/* 11. 보정 */
/* 11-1. 푸터 검색창(흰 바탕) 안 글자는 푸터 색을 쓰지 않는다 */
.wd-footer .searchform .wd-search-cat > a,
.wd-footer .searchform .wd-search-cat > a span,
.wd-footer .searchform input[type="text"] { color: var(--k-text-1); }
/* 11-2. 분류 사진 카드(Featured Product) 흰 글자 대비 — 아래쪽 잉크 그늘 */
.wd-cat.cat-design-default.color-scheme-light .wd-cat-thumb { position: relative; }
.wd-cat.cat-design-default.color-scheme-light .wd-cat-thumb::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(to top, rgba(0, 0, 33, 0.6) 0%, rgba(0, 0, 33, 0) 45%);
}
.wd-cat.cat-design-default.color-scheme-light .wd-cat-content { z-index: 2; }
.wd-cat.cat-design-default .wd-entities-title { font-weight: var(--k-fw-bold); }
/* 11-3. 모바일 섹션 제목(옆에 「More products」 버튼이 붙는 제목) — h2 모바일 19px, 버튼이 아래로 밀리지 않게 */
@media (max-width: 768px) {
  .elementor-widget__width-auto.elementor-widget-wd_title .woodmart-title-container.wd-fontsize-l { font-size: 19px; }
}
/* 11-4. 헤더 메뉴(#333 — 헤더 빌더 글자색) · 결제 단계 표시(#242424) → text-1 */
.whb-header .wd-nav-main,
.whb-header .wd-nav-main > li > a { --nav-color: var(--k-text-1); --nav-color-hover: var(--k-accent); }
.wd-checkout-steps li, .wd-checkout-steps li a { color: var(--k-text-1); }
.wd-checkout-steps li.step-inactive, .wd-checkout-steps li.step-inactive a { color: var(--k-text-3); }