/* ==========================================================================
   3BTN 사이트 전체 헤더/푸터 스킨 (모든 페이지 공통, head.php/tail.php 용)
   랜딩(.btn3-landing)과 동일한 색상/폰트 토큰을 사용해 전체 사이트를 하나의
   디자인으로 통일한다. 기존 검색/로그인/GNB 메뉴 기능과 JS 동작은 그대로 둔다.
   ========================================================================== */

:root {
  --btn3-primary: #2f73f2;
  --btn3-primary-hover: #2560d9;
  --btn3-primary-light: #eaf2fe;
  --btn3-accent: #6366f1;
  --btn3-grad: linear-gradient(135deg, #2f73f2 0%, #6366f1 100%);
  --btn3-sky-1: #f0f9ff;
  --btn3-sky-2: #e0f2fe;
  --btn3-sky-3: #bae6fd;
  --btn3-bg: #f7faff;
  --btn3-surface: #ffffff;
  --btn3-border: #e5e9f0;
  --btn3-text-1: #0f172a;
  --btn3-text-2: #475569;
  --btn3-text-3: #94a3b8;
}

body {
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
  color: var(--btn3-text-1);
  background: var(--btn3-bg);
}

/* ===== 레이아웃 폭 =====
   막대/배경 요소(#hd, #gnb, #ft, #container_wr)는 화면 전체 폭으로 칠하고,
   그 안의 내용물만 1200px 로 중앙 정렬한다 (헤더/푸터와 동일한 패턴).
   index.php 랜딩 섹션들은 자체적으로 .btn3-section-inner(max-width:1200px)를
   가지고 있어 배경은 화면 끝까지, 글자/버튼은 1200px 안에 정렬된다.
   default.css 가 이 요소들을 width:1200px 로 못박아 두고 있어서,
   같은 만큼(또는 더 높은) 우선순위로 덮어써야 실제로 적용된다. */
#hd, #wrapper, #ft { min-width: 0; }
#hd_wrapper, #tnb .inner, #gnb .gnb_wrap, #ft_wr {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  box-sizing: border-box;
}
#container_wr {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 24px;
  box-sizing: border-box;
}
#container {
  float: none !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto 24px !important;
  padding-top: 24px;
  box-sizing: border-box;
}
/* 메인 화면(랜딩)만 예외: 섹션 배경이 화면 끝까지 꽉 차야 하므로 폭 제한을 풀어준다 */
#container.btn3-container-full {
  max-width: none !important;
  margin: 0 0 24px !important;
}
#aside { display: none !important; }

/* 메인 화면(랜딩)은 #container 의 위쪽 패딩과 #container_wr 의 좌우 패딩을
   상쇄해 히어로 등 섹션 배경이 헤더 바로 아래부터 화면 끝까지 꽉 차게 만들고,
   내부 콘텐츠는 .btn3-section-inner 가 정렬한다.
   좌우 음수 마진은 #container_wr 이 있는 PC 테마에서만 상쇄 대상이 있다 —
   모바일 테마(theme/3btn/mobile/head.php)에는 #container_wr 이 없어서
   그대로 적용하면 화면 폭보다 32px 넓어지며 오른쪽 내용이 잘린다. */
.btn3-landing { margin: -24px 0 0; }
#container_wr .btn3-landing { margin: -24px -24px 0; }

/* ===== 메인 헤더 바 (로고 · 메뉴 · 로그인영역 한 줄) ===== */
#hd { background: var(--btn3-surface); border-bottom: 1px solid var(--btn3-border); }
#hd_wrapper {
  height: auto !important;
  padding: 11px 24px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
}
#hd_login_msg { display: none; }
#logo { float: none !important; padding: 0 !important; display: flex; align-items: center; justify-self: start; }
.btn3-brand {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none; flex-shrink: 0;
}
.btn3-brand-mark {
  width: 34px; height: 34px; flex-shrink: 0;
  background: var(--btn3-grad); color: #fff; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px;
}
.btn3-brand-mark-sm { width: 26px; height: 26px; font-size: 13px; border-radius: 7px; }
.btn3-brand-text-wrap { display: flex; flex-direction: column; line-height: 1.15; }
.btn3-brand-text { font-weight: 800; font-size: 15px; color: var(--btn3-text-1); letter-spacing: -0.02em; }
.btn3-brand-domain { font-size: 10px; color: var(--btn3-text-3); font-weight: 600; }
#logo img { display: none; } /* 로고 이미지 파일이 없는 다른 화면(모바일 등)에서도 깨진 아이콘이 보이지 않도록 방어 */

.hd_login {
  display: flex; align-items: center; gap: 8px;
  justify-self: end; position: static; flex-shrink: 0;
}
.hd_login a.btn3-hd-link {
  display: inline-flex; align-items: center; height: 34px; padding: 0 6px;
  font-size: 13px; font-weight: 600;
  color: var(--btn3-text-2); border-radius: 8px; transition: color 0.15s; white-space: nowrap;
}
.hd_login a.btn3-hd-link:hover { color: var(--btn3-primary); }
.hd_login a.btn3-hd-cta {
  display: inline-flex; align-items: center; height: 34px; padding: 0 16px; border-radius: 9px;
  font-size: 13px; font-weight: 700; white-space: nowrap;
  background: var(--btn3-grad); color: #fff; box-shadow: 0 4px 14px rgba(47,115,242,0.3);
  transition: all 0.15s;
}
.hd_login a.btn3-hd-cta:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(47,115,242,0.4); }

/* ===== GNB 메인 메뉴 (헤더 grid 의 가운데 칸에 위치 → 화면(헤더) 중앙 정렬) =====
   주의: 이 #gnb 는 PC용 인라인 메뉴이지만, 모바일 드로어도 같은 id="gnb" 를 쓴다.
   여기서 display:flex 를 주면 모바일 드로어의 기본 숨김(display:none, mobile.css)을
   이겨버려 메뉴가 클릭 전부터 열린 채로 보인다. 아래 #gnb.hd_div 규칙으로 모바일에서는
   다시 display:none 을 되돌려, 자바스크립트 토글(.show()/.hide())만 열고 닫게 한다. */
/* #shop_gnb: 쇼핑몰 헤더의 동일한 메인메뉴 (id="gnb" 는 쇼핑몰 홈의 카테고리 위젯이
   이미 쓰고 있어 충돌하므로 별도 id를 쓰고, 아래에서 #gnb 와 같은 스타일을 함께 적용한다) */
#gnb, #shop_gnb { background: transparent; border-bottom: none; min-width: 0; display: flex; align-items: center; justify-self: center; }
#gnb.hd_div { display: none; }
#gnb .gnb_wrap, #shop_gnb .gnb_wrap {
  width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important;
}
#gnb #gnb_1dul, #shop_gnb #shop_gnb_1dul { display: flex; align-items: center; justify-content: center; gap: 2px; border-bottom: none; flex-wrap: wrap; }
#gnb .gnb_1dli, #shop_gnb .gnb_1dli { line-height: normal; }
#gnb .gnb_1da, #shop_gnb .gnb_1da {
  display: inline-flex; align-items: center; height: 34px; padding: 0 12px;
  font-size: 13.5px; font-weight: 600;
  color: var(--btn3-text-2); transition: color 0.15s; white-space: nowrap;
}
#gnb .gnb_1da:hover, #gnb .gnb_1dli:hover > .gnb_1da,
#shop_gnb .gnb_1da:hover, #shop_gnb .gnb_1dli:hover > .gnb_1da { color: var(--btn3-primary); }
.gnb_al_a { color: var(--btn3-text-1); font-weight: 700; }
.gnb_al_ul a:hover { color: var(--btn3-primary); }

/* ===== 쇼핑몰 헤더: 메인사이트와 동일한 한 줄(로고 | 메뉴 | 로그인영역) =====
   #shop_gnb 의 "메인메뉴" 제목은 화면에 보이지 않게 숨기고(스크린리더용),
   default_shop.css 의 .hd_login{position:absolute;top:45px} 는 static 으로 되돌린다. */
#shop_gnb h2 { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
/* 쇼핑몰 CSS 가 메뉴 링크에 line-height:48px 를 주어, 34px 높이 안에서 글자가 15px 아래로 밀려
   메인사이트보다 메뉴가 낮게 보였다. 메인사이트와 같은 normal 로 되돌린다. */
#shop_gnb .gnb_1da { line-height: normal !important; }
#hd_wrapper .hd_login { position: static !important; top: auto !important; right: auto !important; }

/* ===== 오른쪽 퀵배너(마이메뉴/오늘본상품/장바구니/위시리스트 플로팅 패널) 숨김 =====
   장바구니는 헤더 로그인영역 아이콘으로 이미 접근 가능하므로 기능 손실 없음.
   단, 이 패널 안에 있던 상단이동(#top_btn) 버튼도 함께 사라진다. */
#side_menu { display: none !important; }

/* ===== 푸터 (noterang.com 참고 스타일: 밝은 배경, 중앙정렬 회사정보) =====
   default.css 의 "#ft_wr .ft_cnt {width:25%;float:left}" 와 "#ft_copy {width:1200px}",
   "#ft_wr {display:inline-block}" 가 남아있어 실제로는 float 2단 레이아웃으로 깨지고
   있었다. .ft_cnt/​#ft_wr/​#ft_copy 의 float·width·display 를 전부 명시적으로
   지워야 의도한 1열 스택 레이아웃이 적용된다. */
#ft { background: var(--btn3-bg); color: var(--btn3-text-2); border-top: 1px solid var(--btn3-border); }
#ft_wr {
  display: block !important;
  max-width: 1200px !important; width: 100% !important; margin: 0 auto !important;
  padding: 32px 24px 28px; box-sizing: border-box;
}
#ft_wr::after { content: none !important; }
#ft_top {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px;
  padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--btn3-border);
}
#ft_brand { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--btn3-text-2); }
.ft_cnt { float: none !important; width: 100% !important; padding: 0 !important; }
#ft_link.ft_cnt { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; width: auto !important; text-align: left; }
#ft_link a { font-size: 13px; font-weight: 600; color: var(--btn3-text-2); }
#ft_link a:hover { color: var(--btn3-primary); }
#ft_link .sep { color: var(--btn3-text-3); font-size: 11px; }
#ft_company.ft_cnt { text-align: center; font-weight: normal; color: var(--btn3-text-3); }
#ft_company .ft_line { font-size: 12.5px; line-height: 2; color: var(--btn3-text-3); }
#ft_company .ft_line strong { color: var(--btn3-text-2); font-weight: 700; }
#ft_company .ft_line a { color: var(--btn3-text-3); text-decoration: none; }
#ft_company .ft_line a:hover { color: var(--btn3-primary); }
#ft_company .dot { margin: 0 6px; color: var(--btn3-text-3); opacity: 0.6; }
#ft_copy {
  width: 100% !important; max-width: none !important; box-sizing: border-box;
  border-top: none !important;
  font-size: 11.5px; color: var(--btn3-text-3); text-align: center; opacity: 0.85;
  padding: 10px 0 0; margin: 8px auto 0;
}
#ft_copy b { color: var(--btn3-text-2); font-weight: 700; }

#top_btn {
  position: fixed; right: 22px; bottom: 22px; width: 44px; height: 44px;
  background: var(--btn3-grad); color: #fff; border-radius: 50%; border: none;
  box-shadow: 0 8px 20px rgba(47,115,242,0.35); z-index: 40;
}

@media (max-width: 1000px) {
  /* 좁은 화면에서는 grid 대신 flex로 전환해, 로고 + 로그인/CTA(오른쪽 정렬)를 1행에 두고
     메뉴 5개는 2행 전체 폭에서 가운데 정렬한다 */
  #hd_wrapper { display: flex; flex-wrap: wrap; height: auto; padding: 10px 20px; }
  #logo { justify-self: auto; }
  .hd_login { justify-self: auto; margin-left: auto; }
  #gnb, #shop_gnb { order: 3; flex-basis: 100%; justify-self: auto; }
  #gnb #gnb_1dul, #shop_gnb #shop_gnb_1dul { justify-content: center; padding-left: 0; gap: 2px 8px; }
  .hd_login a.btn3-hd-cta { padding: 0 14px; }
}

@media (max-width: 420px) {
  /* 아주 좁은 화면에서만 로그인/로그아웃 텍스트를 줄여 CTA 버튼과 함께 오른쪽에 붙게 한다 */
  .hd_login a.btn3-hd-link { padding: 0 4px; font-size: 12px; }
  .hd_login a.btn3-hd-cta { padding: 0 10px; font-size: 12px; }
}

@media (max-width: 768px) {
  #hd_wrapper { padding: 10px 16px; gap: 8px; }
  #container_wr { padding: 0 16px; }
  #container_wr .btn3-landing { margin: -24px -16px 0; }
  #ft_wr { padding: 28px 16px 22px; }
  .btn3-brand-domain { display: none; }
  #gnb .gnb_1da, #shop_gnb .gnb_1da { font-size: 13px; height: 30px; padding: 0 8px; }
  /* 푸터 정책 링크: 모바일에서도 한 줄로 유지한다.
     글자 사이 간격과 글자 크기를 줄여 다섯 개가 한 줄에 들어가게 하고,
     flex-wrap 을 nowrap 으로 막아 "FAQ" 만 다음 줄로 떨어지는 일을 없앤다.
     "환불 정책" 처럼 띄어쓰기가 있는 항목도 nowrap 으로 중간에서 꺾이지 않게 한다. */
  #ft_top { flex-direction: column; align-items: center; gap: 12px; }
  #ft_link.ft_cnt { flex-wrap: nowrap; justify-content: center; gap: 0 6px; }
  #ft_link a { font-size: 12px; padding: 2px 0; white-space: nowrap; }
  #ft_link .sep { font-size: 10px; }
}

/* 더 좁은 화면에서는 좌우 여백과 글자를 한 단계씩 더 줄여 한 줄을 유지한다. */
@media (max-width: 400px) {
  #ft_wr { padding-left: 10px; padding-right: 10px; }
  #ft_link.ft_cnt { gap: 0 4px; }
  #ft_link a { font-size: 11px; }
  #ft_link .sep { font-size: 9px; }
}

@media (max-width: 340px) {
  #ft_link.ft_cnt { gap: 0 3px; }
  #ft_link a { font-size: 10px; }
  #ft_link .sep { font-size: 8px; }
}

/* ==========================================================================
   실제 모바일 기기용 헤더/드로어/푸터 (theme/3btn/mobile/head.php, tail.php)
   mobile.css 의 어두운 기본 테마를 3BTN 브랜드 톤으로 덮어쓴다.
   ========================================================================== */
#hd { background: var(--btn3-surface) !important; border-bottom: 1px solid var(--btn3-border); }
#hd_h1 { display: none; }
#logo { height: auto !important; padding: 12px 16px !important; text-align: left !important; }
#logo img { display: none; }

#gnb_open {
  top: 50% !important; left: auto !important; right: 10px !important; transform: translateY(-50%);
  width: 38px !important; height: 38px !important; color: var(--btn3-text-2) !important;
  background: var(--btn3-bg) !important; border-radius: 8px; font-size: 1.4em !important;
}

/* 드로어 메뉴 패널 + 어두운 배경(backdrop) — 배경을 눌러도 닫힘 */
#btn3_gnb_bg {
  display: none; position: fixed; inset: 0; background: rgba(15,23,42,0.5); z-index: 99998;
}
/* PC용 #gnb{display:flex}/#gnb #gnb_1dul{display:flex;flex-wrap:wrap} 규칙이 같은 ID를
   쓰는 모바일 드로어에도 적용되어 메뉴/로그인 목록이 좁은 flex 조각으로 눌리며
   글자가 세로로 깨지는 원인이었다. 드로어에서는 다시 일반 블록 목록으로 되돌린다. */
/* display 는 절대 여기서 강제하지 않는다 — mobile.css 의 기본값(display:none)과
   자바스크립트 토글(.show()/.hide())이 열림/닫힘을 그대로 제어해야 한다 */
#gnb.hd_div {
  background: #fff !important; width: 82% !important; max-width: 340px !important;
  box-shadow: 2px 0 16px rgba(0,0,0,0.15) !important;
}
#gnb.hd_div #gnb_1dul {
  display: block !important; background: #fff !important; padding: 56px 0 8px;
}
#gnb.hd_div .gnb_1dli { display: block !important; width: auto !important; line-height: normal !important; }
.gnb_1da {
  display: block !important; width: auto !important;
  padding: 14px 22px !important; border-bottom: none !important;
  font-weight: 700 !important; font-size: 15px !important; color: var(--btn3-text-1) !important;
  white-space: normal !important;
}
#gnb_close { color: var(--btn3-text-3) !important; }

.btn3-m-login { display: block !important; background: #fff; padding: 10px 22px 24px; border-top: 8px solid var(--btn3-bg); }
.btn3-m-login li { display: block !important; width: auto !important; margin: 0; }
.btn3-m-login a {
  display: block !important; width: auto !important; white-space: normal !important;
  padding: 13px 0; font-size: 14.5px; font-weight: 600; color: var(--btn3-text-2);
}
.btn3-m-login a.btn3-m-cta {
  margin-top: 6px; padding: 13px 0; text-align: center; border-radius: 10px;
  background: var(--btn3-grad); color: #fff !important; font-weight: 700;
}
/* 모바일 헤더 로고 글자(쓰리버튼)만 조금 더 크게 — PC 헤더에는 이 클래스가 없다 */
.btn3-brand-text-m { font-size: 17.5px; }

/* 모바일 푸터: PC와 동일한 #ft_wr/#ft_top/#ft_company 마크업을 재사용하므로
   배경색만 밝게 덮어쓰면 나머지 스타일은 공통 규칙이 그대로 적용된다 */
#ft { background: var(--btn3-bg) !important; padding: 0 !important; border-top: 1px solid var(--btn3-border); }

/* 모바일 헤더 로고 왼쪽 여백 10px.
   `#logo { padding: 12px 16px }` 규칙은 PC/모바일이 같이 쓰므로,
   모바일 head.php 만 <header id="hd"> 를 쓰고 PC head.php 는 <div id="hd"> 라는 점을 이용해
   모바일에만 적용되도록 한다. */
header#hd #logo { padding-left: 10px !important; }

/* ==========================================================================
   회원가입(/bbs/register.php) "SNS 계정으로 가입" — 큰 가로형 버튼 2개
   마크업(#sns_register)과 기본 CSS 는 그누보드 코어 /skin/social/ 에서 오고,
   chrome.css 가 그 뒤에 로드되므로 여기서 덮어쓴다(코어 파일 무수정).
   기본값은 "제목 50% + 30px 아이콘 50%" 한 줄 바 형태라 전부 되돌려야 한다.
   ========================================================================== */
#sns_register {
  float: none; width: auto; margin: 0 0 16px; padding: 0;
  background: none !important; border: 0 !important; text-align: left;
}
#sns_register h2 {
  float: none !important; display: block !important;
  width: auto !important; height: auto !important;
  margin: 0 0 10px !important; padding: 0 !important;
  font-size: 15px !important; line-height: 1.4 !important; font-weight: 700;
  text-align: left !important; color: var(--btn3-text-2);
}
#sns_register .sns-wrap {
  display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  float: none !important; width: auto !important; height: auto !important;
  margin: 0 !important; padding: 0 !important;
  line-height: normal !important; text-align: left !important;
}
#sns_register .sns-icon {
  display: flex !important; align-items: center; justify-content: center;
  width: auto !important; height: 52px !important; min-width: 0;
  margin: 0 !important; padding: 0 14px 0 50px !important;
  line-height: 1 !important; text-align: center !important; border-radius: 8px;
  background-repeat: no-repeat !important;
  background-position: 12px center !important;
  background-size: 30px 30px !important;
  transition: filter .15s ease, transform .15s ease;
}
#sns_register .sns-icon:hover { filter: brightness(0.95); transform: translateY(-1px); }
/* .ico 는 배경 이미지와 겹치므로 숨기고, 숨겨져 있던 .txt 를 실제 글자로 되살린다 */
#sns_register .sns-icon .ico { display: none !important; }
#sns_register .sns-icon .txt {
  position: static !important; display: block;
  overflow: visible !important; white-space: nowrap;
  font-size: 15px !important; line-height: 1.3 !important; font-weight: 700;
}
/* 배경색은 아이콘 png 의 바탕색과 같은 값이라 아이콘이 버튼에 자연스럽게 붙는다 */
#sns_register .sns-naver { background-color: #1ec800 !important; color: #fff !important; }
#sns_register .sns-kakao { background-color: #ffeb00 !important; color: #191600 !important; }

/* 모바일 테마에는 #container_wr 의 좌우 여백이 없어 SNS 영역이 화면 끝에 붙는다.
   모바일 회원가입 스킨의 다른 블록(#fregister > p, #fregister_term)과 같은 15px 여백을 맞춘다.
   모바일 head.php 만 <header id="hd"> + 형제 #wrapper 구조라 PC 에는 적용되지 않는다. */
header#hd ~ #wrapper #sns_register { padding-left: 15px !important; padding-right: 15px !important; }

/* 좁은 화면에서도 두 버튼을 한 줄에 나란히 둔다(참고 시안과 동일).
   줄바꿈 대신 아이콘 여백과 글자만 줄여서 맞춘다. */
@media (max-width: 520px) {
  #sns_register .sns-wrap { gap: 8px; }
  #sns_register .sns-icon {
    height: 48px !important; padding: 0 8px 0 40px !important;
    background-position: 9px center !important; background-size: 26px 26px !important;
  }
  #sns_register .sns-icon .txt { font-size: 13.5px !important; }
}
/* 아주 좁은 기기에서만 세로로 쌓는다 */
@media (max-width: 340px) {
  #sns_register .sns-wrap { grid-template-columns: 1fr; }
}

/* ==========================================================================
   주문 상세(PC) 결제합계 — 미결제액 강조
   기본 스킨은 li.sod_fin_tot 의 금액을 파란색(#3a8afd)으로 칠하므로,
   그보다 선택자를 한 단계 좁혀(.sod_fin_tot.btn3-misu) 빨간 굵은 글씨로 덮어쓴다.
   (모바일은 코어 파일을 못 고쳐 theme/3btn/mobile/shop/shop.tail.php 에서 같은 처리를 한다)
   ========================================================================== */
#sod_bsk_tot2 li.sod_fin_tot.btn3-misu,
#sod_bsk_tot2 li.sod_fin_tot.btn3-misu span,
#sod_bsk_tot2 li.sod_fin_tot.btn3-misu strong { color: #dc2626; font-weight: 700; }