/* ============================================================
   gb-universal — 쇼핑몰 (default_shop.css)
   Editorial Warmth: 절제된 에디토리얼 무드의 이커머스 테마
   ============================================================ */

/* ------- 레이아웃 골격 -------
   HTML: <body>
           <div id="hd">…</div>                ← 전폭 (내부 inner/hd_wrapper/ft_wr 중앙정렬)
           <div id="wrapper"><div id="container">…</div></div>  ← 본문 래퍼
           <div id="ft">…</div>                ← 전폭 (내부 ft_wr 중앙정렬)
         </body>

   일부 페이지에만 #container_wr가 있고, 메인(shop/index.php)에는 #wrapper>#container 만 있음.
   따라서 둘 다 폭 제한을 걸어두는 게 안전.
*/
#wrapper {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-8) var(--space-5) var(--space-9);
}

#container_wr {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-8) var(--space-5);
}

#container {
  width: 100%;
}

/* ------- 상단 TNB ------- */
#hd {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  position: relative;
  z-index: var(--z-header);
}

#hd_h1 { display: none; }
#skip_to_container { display: none; }

#tnb {
  background: var(--color-text);
  color: var(--color-bg);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
}
#tnb .inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 36px;
}
#hd_define, #hd_qnb {
  display: flex;
  gap: var(--space-5);
}
#hd_define li, #hd_qnb li { display: inline-flex; }
#hd_define a, #hd_qnb a {
  color: var(--color-bg);
  opacity: 0.72;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.12em;
  padding: 10px 0;
  transition: opacity var(--dur-fast) var(--ease);
}
#hd_define li.active a,
#hd_define a:hover,
#hd_qnb a:hover { opacity: 1; color: var(--color-bg); }
#hd_qnb .bd a { color: var(--color-accent-soft); opacity: 1; }

/* ------- 로고·검색·로그인 영역 ------- */
#hd_wrapper {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-6) var(--space-5);
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  align-items: center;
  gap: var(--space-6);
}

#logo {
  grid-column: 1;
  justify-self: start;
}
#logo a {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
#logo img {
  max-height: 56px;
  width: auto;
}

.hd_sch_wr {
  grid-column: 2;
  width: 100%;
}
#hd_sch {
  margin: 0;
  padding: 0;
  border: 0;
}
#hd_sch form {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
#hd_sch form:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px var(--color-accent-soft);
}
#hd_sch input[type=text] {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 14px 20px;
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--color-text);
  outline: none;
}
#hd_sch input[type=text]::placeholder {
  color: var(--color-text-soft);
  letter-spacing: 0.02em;
}
#sch_submit {
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  padding: 0 20px;
  height: 100%;
  font-size: 16px;
  transition: color var(--dur-fast) var(--ease);
}
#sch_submit:hover { color: var(--color-accent); }

.hd_login {
  grid-column: 3;
  display: flex;
  justify-content: flex-end;
  gap: var(--space-4);
  font-size: var(--fs-sm);
}
.hd_login li a {
  display: inline-block;
  padding: 8px 0;
  letter-spacing: 0.02em;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.hd_login li a:hover {
  border-bottom-color: var(--color-accent);
  color: var(--color-accent);
}

/* ------- 메뉴바 ------- */
#hd_menu {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
  position: relative;
}
#hd_menu > .hd_menu,
#hd_menu > #menu_open {
  max-width: var(--container);
  margin: 0 auto;
}
#hd_menu .hd_menu {
  padding: 0 var(--space-5);
  display: flex;
  gap: var(--space-7);
  min-height: 56px;
  align-items: center;
}
.hd_menu li a {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text);
  padding: 18px 0;
  position: relative;
  transition: color var(--dur-fast) var(--ease);
}
.hd_menu li a::after {
  content: "";
  position: absolute;
  left: 50%; right: 50%; bottom: 10px;
  height: 1px;
  background: var(--color-accent);
  transition: left var(--dur) var(--ease), right var(--dur) var(--ease);
}
.hd_menu li a:hover { color: var(--color-accent); }
.hd_menu li a:hover::after { left: 0; right: 0; }

#menu_open {
  position: absolute;
  left: var(--space-5);
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 1px solid var(--color-border-strong);
  color: var(--color-text);
  padding: 8px 14px;
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  display: none;
}

/* ------- 사이드 위젯 비활성 (에디토리얼 무드에서 불필요) ------- */
#aside,
#gnb,
#side_pd { display: none !important; }
/* #hd_pop(팝업레이어)은 KFA 에서 사용 — kfa.css */

/* ------- 카테고리 드로어 ------- */
#category {
  position: fixed !important;
  top: 0; left: 0;
  width: 320px;
  height: 100vh;
  background: var(--color-surface);
  padding: var(--space-7) var(--space-6);
  box-shadow: var(--shadow-hover);
  z-index: var(--z-drawer);
  display: none !important;
}
/* 드로어 열릴 때 JS로 .is_open 클래스 부여한다고 가정 (현재는 닫힘 유지) */
#category.is_open { display: block !important; }
#category h2 {
  font-size: var(--fs-xl);
  font-style: italic;
  margin-bottom: var(--space-6);
}
#category .close_btn {
  position: absolute;
  top: var(--space-5); right: var(--space-5);
  background: transparent;
  border: 0;
  color: var(--color-text-muted);
  font-size: 22px;
}
#category_all_bg {
  position: fixed; inset: 0;
  background: rgba(30, 24, 20, 0.4);
  z-index: calc(var(--z-drawer) - 1);
  display: none;
}

/* ------- 쇼핑몰 섹션 ------- */
.sct_wrap {
  margin: var(--space-9) 0;
}
.sct_wrap > header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.sct_wrap > header h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-2xl);
  font-weight: 300;
  margin: 0;
  letter-spacing: -0.02em;
}
.sct_wrap > header h2 a { color: inherit; }
.sct_wrap > header h2 a:hover { color: var(--color-accent); }

/* 상품 리스트 grid — 메인·listtype·category 모든 상품 그리드 공통화
   레거시 skin/shop/basic/style.css의 float/width 고정 규칙을 덮어씀. */
/* ul 직접 li 구조 (main.10, main.40, main.50 → <ul class="smt smt_10">) */
ul.sct,
ul.smt,
ul.sct.sct_10, ul.sct.sct_40, ul.sct.sct_50,
ul.smt.smt_10, ul.smt.smt_40, ul.smt.smt_50 {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: var(--space-6) var(--space-5) !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  width: 100% !important;
  float: none !important;
}

/* div > ul > li 구조 (main.20, main.30 → <div class="sct smt_20"><ul class="sct_ul">) */
div.sct.smt_20,
div.sct.smt_30,
div.sct.smt_50 {
  display: block !important;
  position: static !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}
div.sct.smt_20 > .sct_ul,
div.sct.smt_30 > .sct_ul,
div.sct.smt_50 > .sct_ul,
.smt_20 .sct_ul, .smt_30 .sct_ul, .smt_50 .sct_ul {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: var(--space-6) var(--space-5) !important;
  position: static !important;
  width: 100% !important;
  top: auto !important;
  left: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.sctrl,                       /* '효과재생' 등 스크립트 UI */
.smt_20 .sctrl, .smt_20 #btn_smt_2,
.smt_30 .sctrl, .smt_50 .sctrl { display: none !important; }

.sct li,
.sct_li,
.smt_10 .sct_li, .smt_20 .sct_li, .smt_30 .sct_li,
.smt_40 .sct_li, .smt_50 .sct_li,
.sct_ul > li {
  list-style: none !important;
  float: none !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  position: relative !important;
  text-align: left !important;
}

/* 리스트 페이지의 상품 레이아웃 전환 버튼 — 에디토리얼 무드에서 불필요 */
.sct_mod, .sct_modbtn, .list_mod, .list-modbtn {
  display: none !important;
}

/* 영카트 접근성용 "글자크기 조정"(작게/기본/크게) 버튼 — 기본 숨김 */
#text_size,
#text_size button,
.no_text_resize { display: none !important; }

/* 리스트 페이지 타이틀 */
#wrapper_title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-2xl);
  font-weight: 300;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.shop-content { width: 100%; }

/* ============================================================
   상품 상세 페이지 (item.php) — sit_* 접두 클래스
   ============================================================ */

/* 사이드바 위젯(간편 장바구니·위시) 숨김 */
#sbsk, #wish,
aside#sbsk, aside#wish { display: none !important; }

/* 상세 상단: 이미지 | 정보 2단 그리드 — 공통 부모는 #sit_ov_wrap */
#sit_ov_wrap {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
  margin: var(--space-6) 0 var(--space-8);
}
.sit_info { padding: var(--space-3) 0; }
#sit_pvi, #sit_pvi_big {
  width: 100% !important;
  max-width: 100% !important;
  background: var(--color-bg-alt);
  position: relative;
}
#sit_pvi_big img,
#sit_pvi_big a img {
  width: 100% !important;
  height: auto !important;
  display: block;
}
/* 썸네일 리스트 */
#sit_pvi_thumb {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: 0;
}
#sit_pvi_thumb li { list-style: none; }
#sit_pvi_thumb img {
  width: 60px !important;
  height: 60px !important;
  object-fit: cover;
  border: 1px solid var(--color-border);
}

/* 영카트 하단 플로팅 구매바 — 에디토리얼 무드에서 불필요 */
#sit_buy, #sit_buy.fix, .sit_buy_inner { display: none !important; }

/* 관련상품 섹션이 비어있을 때 공간 과다 점유 방지 */
#sit_rel { margin: var(--space-6) 0; }
#sit_rel:has(.empty_list) { display: none; }

/* 상단 공유·위시 바(sit_star_sns) */
#sit_star_sns {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: var(--space-3) 0 var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
#sit_btn_opt {
  display: inline-flex;
  gap: var(--space-3);
  align-items: center;
}
#btn_wish, .btn_sns_share {
  background: transparent !important;
  border: 0 !important;
  color: var(--color-text) !important;
  padding: 4px 8px !important;
  font-size: 16px !important;
}
#btn_wish:hover, .btn_sns_share:hover { color: var(--color-accent) !important; }

/* 상품명 */
#sit_title, .sit_title, .sit_desc h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-2xl);
  font-weight: 300;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-3);
}

/* 가격 영역 */
#sit_tot_price, #it_price, .sit_tot_price, .sit_price {
  font-family: var(--font-body);
  font-size: var(--fs-xl);
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: -0.01em;
  margin: var(--space-2) 0;
}

/* 정보 표(배송·적립금·제조사 등) */
.sit_ov_tbl, .sit_tbl {
  width: 100% !important;
  border-collapse: collapse;
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-sm);
  margin: var(--space-4) 0;
}
.sit_ov_tbl th, .sit_ov_tbl td,
.sit_tbl th, .sit_tbl td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}
.sit_ov_tbl th, .sit_tbl th {
  font-weight: 500;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  width: 120px;
}

/* 옵션 선택 */
.sit_sel_option, .sit_opt_subj, .sit_opt_list {
  margin: var(--space-3) 0;
}
.sit_sel_option select, .sit_opt_list select {
  width: 100%;
}
.sit_opt_added {
  background: var(--color-bg-alt);
  padding: var(--space-3) var(--space-4);
  margin-top: var(--space-3);
}

/* 수량 증감 */
.sit_qty_minus, .sit_qty_plus {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border: 1px solid var(--color-border-strong) !important;
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  border-radius: var(--radius-sm) !important;
  font-size: 14px !important;
}
.sit_qty_minus:hover, .sit_qty_plus:hover {
  background: var(--color-text) !important;
  color: var(--color-bg) !important;
}

/* 구매/장바구니/위시 버튼 바 */
.sit_order_btn, .sit_btn_wr {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.sit_btn_buy, .sit_btn_cart, .sit_btn_wish {
  flex: 1;
}
.sit_btn_buy {
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
}
.sit_btn_cart {
  background: var(--color-text) !important;
  border-color: var(--color-text) !important;
}
.sit_btn_wish {
  flex: 0 0 auto !important;
  width: 56px !important;
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border-strong) !important;
}

/* 상품 상세 하단 탭(상세설명/사용후기/문의 등) */
#itemqa, #itemuse, #sit_desc, #sit_inf, #sit_pvi_thumb {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}
#itemqa h2, #itemuse h2, #sit_desc h2, #sit_inf h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-xl);
  font-weight: 400;
  margin: 0 0 var(--space-4);
}

/* 빈 상태 메시지 */
.sit_empty, .empty_list, .empty_table {
  padding: var(--space-7) var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
  background: var(--color-bg-alt);
  font-size: var(--fs-sm);
}

/* ============================================================
   장바구니/주문 공통 — tbl_head03
   ============================================================ */
table.tbl_head03, .tbl_head03 table {
  width: 100% !important;
  border-collapse: collapse;
  border-top: 2px solid var(--color-text);
  font-size: var(--fs-sm);
  margin: var(--space-4) 0;
}
table.tbl_head03 th, table.tbl_head03 td,
.tbl_head03 table th, .tbl_head03 table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: middle;
}
table.tbl_head03 thead th, .tbl_head03 thead th {
  background: var(--color-bg-alt);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.btn_cart_del {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin: var(--space-3) 0;
}

/* 반응형 */
@media (max-width: 768px) {
  .sit_buy_inner { grid-template-columns: 1fr; gap: var(--space-4); }
  .sit_btn_wish { width: 52px !important; }
}

/* 상품 카드 */
.sct_img {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-bg-alt);
  margin-bottom: var(--space-4);
}
.sct_img a { display: block; height: 100%; }
.sct_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.sct_img:hover img { transform: scale(1.04); }

.sct_txt {
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: var(--lh-snug);
  margin-bottom: 6px;
}
.sct_txt a { color: var(--color-text); }
.sct_txt a:hover { color: var(--color-accent); }

.sct_basic {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  line-height: var(--lh-snug);
  margin-bottom: 8px;
}

.sct_cost {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--color-price);
  letter-spacing: -0.01em;
}
.sct_cust_price {
  font-size: var(--fs-xs);
  color: var(--color-text-soft);
  text-decoration: line-through;
  margin-right: var(--space-2);
}

.sct_icon {
  position: absolute;
  top: var(--space-3); left: var(--space-3);
  display: flex;
  gap: 6px;
}
.sct_icon img,
.sct_icon span {
  background: var(--color-text);
  color: var(--color-bg);
  padding: 4px 8px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* 레거시 컬러 뱃지(히트/할인/신상/추천 등) — 테마 팔레트로 통일 */
.sct_icon_hit, .sct_icon_best, .sct_icon_new, .sct_icon_rec,
.sct_icon_sale, .sct_icon_soldout, .sct_icon_notax,
.sit_icon_hit, .sit_icon_new, .sit_icon_rec, .sit_icon_sale {
  background: var(--color-text) !important;
  color: var(--color-bg) !important;
  border: 0 !important;
  padding: 4px 8px !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  line-height: 1.2 !important;
}
.sct_icon_sale, .sit_icon_sale { background: var(--color-accent) !important; }
.sct_icon_soldout { background: var(--color-text-muted) !important; }

/* 할인율 원형 뱃지 */
.sct_sale_per, .sit_sale_per {
  background: var(--color-accent) !important;
  color: var(--color-bg) !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  border-radius: var(--radius-pill) !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
}

/* 카드 하단 노이즈 제거 (SNS 공유, 별점, 위시 아이콘 등) */
.sct_sns, .sct_star, .sct_op_btn,
.sct_wish, .sct_snsbtn, .sct_sharebtn,
.sct_li .sct_sns, .sct_li .sct_star,
.sct_li .sct_op_btn { display: none !important; }

/* owl carousel 조정 */
.sct_wrap .owl-nav button {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text) !important;
  width: 40px; height: 40px;
  border-radius: var(--radius-pill) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--dur) var(--ease);
}
.sct_wrap .owl-nav button:hover {
  background: var(--color-text) !important;
  color: var(--color-bg) !important;
}
.sct_wrap .owl-dots { text-align: center; margin-top: var(--space-4); }
.sct_wrap .owl-dots .owl-dot span {
  background: var(--color-border-strong) !important;
  width: 8px; height: 8px;
}
.sct_wrap .owl-dots .owl-dot.active span {
  background: var(--color-accent) !important;
  width: 24px;
  transition: width var(--dur) var(--ease);
}

/* ------- 사이드 퀵메뉴 ------- */
#side_menu {
  position: fixed;
  right: 20px;
  top: 40%;
  transform: translateY(-50%);
  z-index: 50;
}
#quick {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 8px;
  box-shadow: var(--shadow-soft);
}
#quick .btn_sm {
  background: transparent;
  border: 0;
  width: 44px; height: 44px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
#quick .btn_sm:hover {
  background: var(--color-bg-alt);
  color: var(--color-accent);
}
#quick .qk_tit { display: none; }

#top_btn {
  margin-top: 12px;
  width: 44px; height: 44px;
  background: var(--color-text);
  color: var(--color-bg);
  border: 0;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur) var(--ease);
}
#top_btn:hover { transform: translateY(-4px); }

#tabs_con { display: none; }

/* ------- 버튼 시스템 ------- */
button, input[type=submit], .btn, .btn_b01, .btn_b02, .btn_frmline, .btn_cart, .btn_buy {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 14px 28px;
  border: 1px solid var(--color-text);
  background: var(--color-text);
  color: var(--color-bg);
  text-transform: uppercase;
  transition: all var(--dur) var(--ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-sm);
}
button:hover, .btn:hover, .btn_b01:hover, .btn_b02:hover,
.btn_frmline:hover, .btn_cart:hover, .btn_buy:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}
.btn_b01 {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
.btn_b01:hover {
  background: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-bg);
}
.btn_buy {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.btn_confirm, .win_btn, .btn_box {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  margin: var(--space-6) 0;
  flex-wrap: wrap;
}

/* ------- 폼 ------- */
input[type=text], input[type=password], input[type=email], input[type=tel],
input[type=number], input[type=url], textarea, select {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  padding: 12px 14px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  width: 100%;
  max-width: 100%;
}
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus,
input[type=tel]:focus, input[type=number]:focus, input[type=url]:focus,
textarea:focus, select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px var(--color-accent-soft);
}
textarea { min-height: 120px; resize: vertical; }
label { font-size: var(--fs-sm); font-weight: 500; }

.chk_box input[type=checkbox],
.chk_box input[type=radio] {
  width: 18px; height: 18px;
  accent-color: var(--color-accent);
}

/* ------- 테이블 ------- */
table.tbl_head01 {
  width: 100%;
  border-collapse: collapse;
  border-top: 2px solid var(--color-text);
  font-size: var(--fs-sm);
}
table.tbl_head01 th, table.tbl_head01 td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}
table.tbl_head01 thead th {
  background: var(--color-bg-alt);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

/* ------- 팝업 레이어 ------- */
#hd_pop { position: absolute; z-index: calc(var(--z-header) + 1); }

/* ------- 아웃로그인 ------- */
#s_ol_before {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}
#s_ol_before h2 {
  font-size: var(--fs-lg);
  font-style: italic;
  margin-bottom: var(--space-3);
}
#s_ol_before .join {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-border-strong);
  padding-bottom: 2px;
}

/* ------- 배너 영역 ------- */
.mainbanner, .main_banner, #main_banner {
  margin: 0 calc(-1 * var(--space-5)) var(--space-8);
  overflow: hidden;
}

/* ------- 풋터 ------- */
#ft {
  margin-top: var(--space-9);
  padding: var(--space-8) var(--space-5) var(--space-6);
  background: var(--color-text);
  color: var(--color-bg);
  font-size: var(--fs-sm);
}
#ft a { color: var(--color-bg); opacity: 0.72; }
#ft a:hover { opacity: 1; color: var(--color-bg); }
#ft_wr {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-6);
}
#ft .ft_cs {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-style: italic;
  margin-bottom: var(--space-3);
}
#ft_copy {
  max-width: var(--container);
  margin: var(--space-6) auto 0;
  padding-top: var(--space-5);
  border-top: 1px solid rgba(250, 247, 242, 0.12);
  font-size: var(--fs-xs);
  opacity: 0.5;
  letter-spacing: 0.04em;
}

/* ------- 페이지 제목 ------- */
#sct_ct_title, .new_win_title, .cate_name {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 300;
  font-style: italic;
  letter-spacing: -0.02em;
  margin: var(--space-6) 0 var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

/* ------- 반응형 ------- */
@media (max-width: 960px) {
  #hd_wrapper {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    text-align: center;
  }
  #logo { justify-self: center; }
  .hd_sch_wr { grid-column: 1; }
  .hd_login { grid-column: 1; justify-content: center; }

  #hd_menu .hd_menu { display: none; }
  #menu_open { display: inline-flex; position: static; transform: none; margin: 14px var(--space-5); }

  #ft_wr { grid-template-columns: 1fr 1fr; }
  #side_menu { display: none; }

  .sct_wrap > header { flex-direction: column; gap: var(--space-2); align-items: flex-start; }
  .sct_wrap > header h2 { font-size: var(--fs-xl); }

  .sct { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
}

@media (max-width: 480px) {
  #tnb .inner { flex-direction: column; gap: 0; padding: 4px var(--space-4); }
  #hd_define, #hd_qnb { gap: var(--space-3); font-size: 10px; }
  #ft_wr { grid-template-columns: 1fr; }
  .sct { grid-template-columns: 1fr 1fr; }
}

/* ------- 검색 결과 페이지 하이라이트 톤 통일 ------- */
#ssch h2 { font-family: var(--font-display); font-weight: 500; color: var(--color-text); }
#ssch h2 strong { color: var(--color-accent); font-weight: 600; font-style: italic; }
#ssch h2 .ssch_result_total { color: var(--color-text-muted); font-weight: 400; }

/* ------- 회원가입 약관 안내 배너 톤 통일 ------- */
#fregister p {
  background: var(--color-surface-alt) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm) !important;
  font-weight: 500 !important;
  height: auto !important;
  line-height: 1.5 !important;
  padding: var(--space-4) var(--space-5);
}
#fregister p:before {
  background: var(--color-accent) !important;
  height: 100% !important;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important;
}
#fregister p i { color: var(--color-accent); }
#fregister h2 { font-family: var(--font-display); font-weight: 500; }
#fregister_chkall { background: var(--color-bg-alt) !important; border-color: var(--color-border) !important; }
.register .btn_confirm .btn_submit,
.register input[type="submit"] { background: var(--color-accent) !important; color: #fff !important; border: none !important; }

/* ------- 게시판/FAQ 공통 톤 ------- */
#bo_cate #bo_cate_on { background: var(--color-text) !important; border-color: var(--color-text) !important; color: #fff !important; }
#bo_list h2, #bo_v h2, #bo_w h2, #faq_wrap h2 { font-family: var(--font-display); font-weight: 500; }
.bo_list_title, #container_title { font-family: var(--font-display) !important; font-weight: 500 !important; letter-spacing: -0.01em; }
.btn_b02, .btn_b01 { background: var(--color-text) !important; color: #fff !important; border-color: var(--color-text) !important; border-radius: var(--radius-sm) !important; font-family: var(--font-body) !important; }
.btn_admin { background: var(--color-accent) !important; border-color: var(--color-accent) !important; color: #fff !important; border-radius: var(--radius-sm) !important; }

/* ------- 404 오류 페이지 ------- */
.tpl-404 { max-width: 560px; margin: 8vh auto; padding: var(--space-6) var(--space-5); text-align: center; }
.tpl-404-code { font-family: var(--font-display); font-style: italic; font-size: 6rem; line-height: 1; color: var(--color-accent); margin: 0 0 var(--space-4); font-weight: 400; letter-spacing: -0.04em; }
.tpl-404-title { font-family: var(--font-display); font-weight: 500; font-size: 1.8rem; margin: 0 0 var(--space-3); color: var(--color-text); }
.tpl-404-lede { font-family: var(--font-body); font-size: 1rem; color: var(--color-text-muted); margin: 0 0 var(--space-6); line-height: 1.6; }
.tpl-404-actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
.tpl-404-btn { display: inline-block; padding: 12px 22px; border-radius: var(--radius-sm); font-family: var(--font-body); font-weight: 500; font-size: 0.95rem; text-decoration: none; border: 1px solid var(--color-border); color: var(--color-text); background: var(--color-bg); transition: all .2s; }
.tpl-404-btn.primary { background: var(--color-text); color: #fff; border-color: var(--color-text); }
.tpl-404-btn:hover { opacity: 0.88; }

/* ------- 콘텐츠 페이지 (회사소개/약관/개인정보) ------- */
.tpl-content { max-width: 760px; margin: var(--space-6) auto; padding: 0 var(--space-4); color: var(--color-text); font-family: var(--font-body); line-height: 1.7; }
.tpl-content-title { font-family: var(--font-display); font-weight: 500; font-size: 2rem; letter-spacing: -0.02em; margin: var(--space-5) 0 var(--space-4); color: var(--color-text); }
.tpl-content-lede { font-family: var(--font-display); font-style: italic; font-size: 1.25rem; color: var(--color-text); border-left: 3px solid var(--color-accent); padding-left: var(--space-4); margin: var(--space-4) 0 var(--space-5); }
.tpl-content h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; margin: var(--space-5) 0 var(--space-2); color: var(--color-text); }
.tpl-content ul, .tpl-content ol { padding-left: var(--space-5); margin: var(--space-3) 0; }
.tpl-content li { margin: 4px 0; }
.tpl-content p { margin: var(--space-3) 0; }
.tpl-content-note { font-size: 0.85rem; color: var(--color-text-muted); background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); margin-top: var(--space-5) !important; }

/* ------- 워드마크 로고 ------- */
.tpl-wordmark {
  display: inline-flex;
  align-items: center;
  text-decoration: none !important;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--color-text);
  white-space: nowrap;
}
.tpl-wordmark-name { font-style: italic; }
.tpl-wordmark-ft { color: #fff !important; font-size: 18px; opacity: 0.92; }
#logo .tpl-wordmark { padding: 4px 0; }

/* ============================================================
   브랜드 히어로 (메인 첫 섹션)
   ============================================================ */
.tpl-hero {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-9) var(--space-5) var(--space-8);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}
.tpl-hero-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-5);
}
.tpl-hero-title {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--color-text);
  margin: 0 0 var(--space-5);
}
.tpl-hero-title .tpl-hero-accent {
  font-style: italic;
  color: var(--color-accent);
  font-weight: 400;
}
.tpl-hero-lede {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  color: var(--color-text-muted);
  max-width: 560px;
  margin: 0 auto var(--space-6);
  line-height: var(--lh-body);
}
.tpl-hero-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.tpl-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  background: var(--color-text);
  color: var(--color-bg) !important;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--color-text);
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.tpl-hero-cta:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg) !important;
}
.tpl-hero-cta.ghost {
  background: transparent;
  color: var(--color-text) !important;
}
.tpl-hero-cta.ghost:hover {
  background: var(--color-text);
  color: var(--color-bg) !important;
}

/* ============================================================
   Shop by Category 타일 섹션
   ============================================================ */
.tpl-cat-tiles {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-8) var(--space-5);
}
.tpl-cat-tiles-head {
  text-align: center;
  margin-bottom: var(--space-6);
}
.tpl-cat-tiles-head .tpl-hero-eyebrow {
  margin-bottom: var(--space-3);
}
.tpl-cat-tiles-title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 300;
  margin: 0;
}
.tpl-cat-tiles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}
.tpl-cat-tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-6) var(--space-5);
  min-height: 220px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text) !important;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
  text-decoration: none;
  position: relative;
}
.tpl-cat-tile:hover {
  background: var(--color-text);
  color: var(--color-bg) !important;
  transform: translateY(-2px);
}
.tpl-cat-tile-id {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}
.tpl-cat-tile:hover .tpl-cat-tile-id {
  color: var(--color-bg);
  opacity: 0.6;
}
.tpl-cat-tile-name {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 300;
  letter-spacing: -0.01em;
  margin-top: auto;
}
.tpl-cat-tile-arrow {
  position: absolute;
  right: var(--space-5);
  bottom: var(--space-5);
  font-size: var(--fs-lg);
  color: var(--color-text-muted);
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tpl-cat-tile:hover .tpl-cat-tile-arrow {
  color: var(--color-bg);
  transform: translateX(6px);
}

@media (max-width: 900px) {
  .tpl-cat-tiles-grid { grid-template-columns: repeat(2, 1fr); }
}