/* ============================================================
   티티박스 B2B 스킨 — 클린 커머스 (B2 디자인 시스템)
   원칙: 레이아웃·DOM 불변, 시각 속성만 오버라이드 (기능 무손상)
   팔레트: 소스 스왑 완료(그린→블루). 이 파일은 형태·질감 담당.
   ============================================================ */
:root {
  --tt-blue: #006b4f;
  --tt-blue-deep: #00563f;
  --tt-blue-soft: #eff8f4;
  --tt-pink: #cc4d50;
  --tt-pink-soft: #fdeeee;
  --tt-mint: #00b56a;
  --tt-ink: #132b23;
  --tt-muted: #63746d;
  --tt-dim: #8fa39a;
  --tt-bg: #f8fbfa;
  --tt-line: #dce9e3;
  /* 그림자도 그린빛으로 — 소개페이지 rgba(19,43,35,…) 기준 */
  --tt-sh-sm: 0 2px 10px rgba(19, 43, 35, .05);
  --tt-sh-md: 0 10px 28px rgba(19, 43, 35, .07);
  --tt-sh-lg: 0 18px 48px rgba(18, 55, 43, .09);
  --tt-radius: 16px;
  --tt-radius-lg: 24px;  /* 소개페이지 카드 라운드 */
  --tt-radius-btn: 15px; /* 소개페이지 .btn */
}

/* ── 베이스 ─────────────────────────── */
body {
  background: var(--tt-bg);
  font-family: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  color: var(--tt-ink);
  -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(0, 107, 79, .18); }

:focus-visible { outline: 2px solid var(--tt-blue); outline-offset: 2px; }

::-webkit-scrollbar { width: 10px; height: 8px; }
::-webkit-scrollbar-thumb { background: #c5d8ce; border-radius: 99px; }
::-webkit-scrollbar-track { background: transparent; }

/* ── 헤더 (header_b2c.css 계열) ─────── */
.header-container {
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--tt-line);
  box-shadow: none;
}
.header-top { border-bottom: 1px solid var(--tt-line); }
.inp-search {
  border-radius: 12px !important;
  border-color: var(--tt-line) !important;
  background: var(--tt-bg);
  transition: border-color .15s, box-shadow .15s;
}
.inp-search:focus {
  border-color: var(--tt-blue) !important;
  box-shadow: 0 0 0 3px rgba(0, 107, 79, .12);
  background: #fff;
}
.gnb-menu a { transition: color .15s; }

/* ── 버튼 공통 (시각 속성만) ────────── */
button, .btn, a.btn, input[type="submit"], input[type="button"] {
  transition: background-color .15s, border-color .15s, box-shadow .15s, transform .12s, color .15s;
}
button:active, .btn:active { transform: translateY(1px); }

/* ── 카드류: 라운드·소프트섀도 통일 ── */
.stat_box,
.live_item,
.product_section .thumb,
.bh-vc,
.card, .box, .panel,
.prod-card, .product-card, .item-card {
  border-radius: var(--tt-radius);
}
.stat_box, .live_item {
  border: 1px solid var(--tt-line);
  box-shadow: var(--tt-sh-sm);
  background: #fff;
  transition: transform .18s, box-shadow .18s;
}
.stat_box:hover, .live_item:hover {
  transform: translateY(-3px);
  box-shadow: var(--tt-sh-md);
}

/* 상품 썸네일 라운드 */
.thumb img, .prod_img img, .product-thumb img { border-radius: 12px; }

/* ── 뱃지: LIVE는 핑크, 재고는 톤다운 ─ */
.badge { border-radius: 7px; font-weight: 700; }
.live_txt, .badge.live, .badge-live {
  background: var(--tt-pink) !important;
  color: #fff !important;
}
.stock-badge { border-radius: 7px; }

/* ── 섹션 헤더 타이포 ────────────────── */
.section_header h2, .section_header .tit, h2.sec-tit {
  font-weight: 800;
  letter-spacing: -.03em;
}
.btn_text_more, .btn_more_outline {
  border-radius: 11px;
  transition: color .15s, border-color .15s, background .15s;
}
.btn_more_outline:hover { border-color: var(--tt-blue); color: var(--tt-blue); }

/* ── 테이블(마이페이지 등): 클린 스타일 ─ */
table { border-color: var(--tt-line); }
th { font-weight: 700; }
thead th, .table-head { background: var(--tt-bg); }
tr { transition: background .12s; }
tbody tr:hover { background: var(--tt-bg); }

/* ── 입력 요소 ──────────────────────── */
input[type="text"], input[type="password"], input[type="number"], input[type="email"], input[type="tel"],
select, textarea {
  border-radius: 10px;
  transition: border-color .15s, box-shadow .15s;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus,
input[type="email"]:focus, input[type="tel"]:focus, select:focus, textarea:focus {
  border-color: var(--tt-blue);
  box-shadow: 0 0 0 3px rgba(0, 107, 79, .1);
}

/* ── 모달/레이어 ────────────────────── */
.modal-content, .layer, .popup, .modal_wrap .modal_inner { border-radius: 18px; }

/* ── 푸터 ───────────────────────────── */
footer, .footer, .mypg-footer-skin { border-top: 1px solid var(--tt-line); }

/* ============================================================
   페이지별 오버라이드
   각 뷰의 인라인 <style>보다 뒤에 평가되도록 body 접두로 구체성 확보
   ============================================================ */

/* ── 상품 카드 (mainList / bulkList / 메인 / vendorHome 공통) ── */
body .product__item,
body .main_4 .product__item,
body .product_section .product__item {
  border-radius: 18px;
  border: 1px solid var(--tt-line);
  box-shadow: var(--tt-sh-sm);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
body .product__item:hover,
body .main_4 .product__item:hover,
body .product_section .product__item:hover {
  transform: translateY(-5px);
  box-shadow: var(--tt-sh-md);
  border-color: #c5d8ce;
}
body .product__title,
body .main_4 .product__title,
body .product_section .product__title {
  font-weight: 700;
  color: var(--tt-ink);
  letter-spacing: -.02em;
}
body .product__price .price,
body .main_4 .product__price .price,
body .product_section .product__price .price {
  font-weight: 800;
  letter-spacing: -.02em;
}
body .badge, body .main_4 .badge, body .product_section .badge {
  border-radius: 7px;
  font-weight: 700;
}
body .badge--gray, body .main_4 .badge--gray, body .product_section .badge--gray {
  background: #e6f1ec;
  color: var(--tt-muted);
}
/* 버튼 */
body .product__btns .btn,
body .main_4 .product__btns .btn,
body .product_section .product__btns .btn {
  border-radius: 11px;
  font-weight: 700;
}
body .product__btns .btn_sub,
body .main_4 .product__btns .btn_sub,
body .product_section .product__btns .btn_sub {
  background: #fff;
  border: 1px solid var(--tt-line);
  color: var(--tt-muted);
}
body .product__btns .btn_sub:hover,
body .main_4 .product__btns .btn_sub:hover,
body .product_section .product__btns .btn_sub:hover {
  border-color: #c5d8ce;
  background: var(--tt-bg);
  color: var(--tt-blue);
}
body .product__btns .btn_primary:hover,
body .main_4 .product__btns .btn_primary:hover,
body .product_section .product__btns .btn_primary:hover {
  background: var(--tt-blue-deep);
  box-shadow: 0 8px 20px rgba(0, 107, 79, .3);
}
/* 재고 뱃지 */
body .stock-badge {
  background: rgba(19, 43, 35, .74);
  color: #fff;
  border-radius: 8px;
  font-weight: 700;
  backdrop-filter: blur(6px);
}
/* 회원공개 잠금 */
body .member-only {
  background: #e6f1ec;
  color: var(--tt-muted);
  border-radius: 9px;
  font-weight: 700;
}

/* ── 리스트 페이지 타이틀 영역 ────────── */
body .main_4 .title .text h1,
body .main_4 .title h1 {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--tt-ink);
}
body .main_4 .title .text span {
  color: var(--tt-muted);
  font-size: 14.5px;
}
/* 이용안내 토글 버튼 */
body .main_4 .title button {
  border-radius: 12px;
  border: 1px solid var(--tt-line);
  background: #fff;
  box-shadow: var(--tt-sh-sm);
  font-weight: 700;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
body .main_4 .title button:hover {
  border-color: var(--tt-blue);
  color: var(--tt-blue);
  transform: translateY(-1px);
  box-shadow: var(--tt-sh-md);
}

/* ── 페이지네이션 ───────────────────── */
body .paging a, body .paging span, body .pagination a, body .pagination span {
  border-radius: 9px;
  font-weight: 700;
  transition: background .15s, color .15s;
}
body .paging .on, body .pagination .on, body .paging .active, body .pagination .active {
  background: var(--tt-blue);
  color: #fff;
}

/* ── 로그인 / 회원가입 ──────────────── */
body .login-wrap { border-radius: 22px; }
body .login_banner h1 {
  font-weight: 800;
  letter-spacing: -.02em;
}
body .login_banner .login_sub_text { color: var(--tt-muted); }
body .login-form input, body .signup input {
  border-radius: 11px;
}
body .login-btn, body .btn_login, body .signup .btn_submit {
  border-radius: 12px;
  font-weight: 700;
  transition: background .15s, transform .15s, box-shadow .15s;
}
body .login-btn:hover, body .btn_login:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 107, 79, .28);
}

/* ── 마이페이지 ─────────────────────── */
body .mypage_wrap, body .mypage-container { background: var(--tt-bg); }
/* 좌측 메뉴 */
body .mypage_menu li a, body .mypage-nav a, body .lnb a {
  border-radius: 10px;
  font-weight: 600;
  transition: background .15s, color .15s;
}
body .mypage_menu li a:hover, body .mypage-nav a:hover, body .lnb a:hover {
  background: var(--tt-blue-soft);
  color: var(--tt-blue);
}
body .mypage_menu li.on > a, body .mypage-nav .on, body .lnb .on {
  color: var(--tt-blue);
  font-weight: 700;
}
/* 대시보드 카드 */
body .dash_card, body .mypage_card, body .board_box, body .info_box {
  border-radius: 16px;
  border: 1px solid var(--tt-line);
  box-shadow: var(--tt-sh-sm);
  background: #fff;
}

/* ── 모션 배려 ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ============================================================
   소개페이지(TT BOX V2) 톤 정합 — 2026-08-08
   소개페이지가 b2b 의 진입 관문이 되므로 카드·버튼·타이포의
   질감을 그쪽에 맞춘다. 레이아웃/DOM 은 건드리지 않는다.
   기준값: .card{radius 24 / pad 28 / border var(--line) / shadow 0 10px 28px rgba(19,43,35,.045)}
           .btn{min-height 52 / radius 15 / weight 900}
           h2{clamp(32px,4.3vw,52px) / -.04em}
   ============================================================ */

/* ── 카드: 라운드 확대 + 그린빛 그림자 ── */
body .bh-vcard,
body .vendor-card,
body .dash_card, body .mypage_card, body .board_box, body .info_box,
body .tt-board, body .tt-card {
  border-radius: var(--tt-radius-lg);
  border: 1px solid var(--tt-line);
  box-shadow: 0 10px 28px rgba(19, 43, 35, .045);
}

/* ── 버튼: 소개페이지 .btn 질감 ── */
body .btn_primary, body .tt-btn-primary,
body .btn_more_outline, body .btn_text_more {
  border-radius: var(--tt-radius-btn);
  font-weight: 800;
  letter-spacing: -.01em;
}
body .btn_primary, body .tt-btn-primary { min-height: 52px; }
body .btn_primary:hover, body .tt-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(0, 107, 79, .20);
}

/* ── 섹션 타이포: 소개페이지 h2 스케일 ── */
.section_header h2, .section_header .tit, h2.sec-tit {
  font-size: clamp(28px, 2.6vw, 40px);
  line-height: 1.14;
  letter-spacing: -.04em;
  font-weight: 800;
}
/* eyebrow — 소개페이지 .eyebrow(13px/900/.12em/green) */
.section_header .eyebrow, .tt-eyebrow, .section_inner .eyebrow {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--tt-blue);
  text-transform: uppercase;
}

/* ── 섹션 세로 여백: 소개페이지 .section{padding:104px 0} 에 근접 ── */
.main_wrap .section_inner { padding-top: 84px; padding-bottom: 84px; }
@media (max-width: 1024px) {
  .main_wrap .section_inner { padding-top: 56px; padding-bottom: 56px; }
}

/* ── 전체보기: 회색 텍스트 → 알약 칩(소개페이지 .btn.soft)
   ★ 이 링크의 부모는 .section_header 가 아니라 .title_area 다 ── */
.title_area .btn_text_more,
.section_header .btn_text_more,
.section_header .more,
.section_header a.more_link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 15px;
  border-radius: 999px;
  background: var(--tt-blue-soft);
  color: var(--tt-blue);
  font-weight: 800;
  font-size: 13.5px;
}
.title_area .btn_text_more:hover,
.section_header .btn_text_more:hover,
.section_header .more:hover,
.section_header a.more_link:hover { background: #e2f1ea; }

/* ── 아웃라인 더보기: 소개페이지 .btn.secondary ── */
body .btn_more_outline {
  background: #fff;
  border: 1px solid var(--tt-line);
  color: var(--tt-blue);
  border-radius: var(--tt-radius-btn);
  font-weight: 800;
}
body .btn_more_outline:hover {
  border-color: var(--tt-blue);
  background: var(--tt-blue-soft);
}