:root {
  --hdr: 44px;
  --side: 20px;
  --menu-w: 400px;
  --line: #e5e5e5;
  --ease: cubic-bezier(.25,.1,.25,1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: #fff; color: #000; }
/* 스크롤바 자리를 항상 확보해 페이지 길이와 상관없이 헤더·본문 위치를 고정 */
html { overflow-y: scroll; }
/* 가로 넘침은 clip 으로 막음 — hidden 은 body 를 스크롤 상자로 만들어
   결제정보·상품정보의 position: sticky(스크롤 따라오기)가 동작하지 않음 */
body { font: 400 12px/18px Mulish, Pretendard, sans-serif; overflow-x: hidden; overflow-x: clip; /* clip 미지원 브라우저는 hidden */ }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
.serif { font-family: "Libre Baskerville", Pretendard, serif; }

/* ---------- header ---------- */
header {
  position: fixed; inset: 0 0 auto 0; height: var(--hdr); z-index: 50;
  background: #fff; display: flex; align-items: center; padding: 0 var(--side);
}
.menu_btn { width: 18px; height: 14px; position: relative; z-index: 2; }
.menu_btn span {
  position: absolute; left: 0; width: 100%; height: 1px; background: #000;
  transition: transform .35s var(--ease), opacity .2s;
}
.menu_btn span:nth-child(1) { top: 0; }
.menu_btn span:nth-child(2) { top: 6px; }
.menu_btn span:nth-child(3) { top: 12px; }
body.menu-open .menu_btn span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.menu-open .menu_btn span:nth-child(2) { opacity: 0; }
body.menu-open .menu_btn span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.logo { position: absolute; left: 50%; transform: translateX(-50%); }
.logo img, .logo_svg { display: block; height: 15px; width: auto; } /* HALF HITCH 로고는 가로로 길어서 높이를 줄임 (약 111px 폭) */
/* 스크롤하면 앞뒤 H만 남는 모션은 common.js(로고를 HH로 줄임)에서 그림 */
/* My · Search · Cart 를 한 묶음으로 오른쪽 끝에 (항목 사이 20px) */
.util { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.util a, .util button { padding: 0; text-align: left; }
/* 헤더 검색: 입력창 + 입력하는 동안 상품 추천 목록 */
.search_bar {
  position: fixed; top: var(--hdr); left: 0; right: 0; background: #fff; z-index: 49;
  padding: 0 var(--side); max-height: 0; overflow: hidden; transition: max-height .4s var(--ease);
}
.search_bar.on { max-height: 480px; box-shadow: 0 8px 16px rgba(0,0,0,.04); }
.search_bar form { display: flex; align-items: center; gap: 12px; padding-bottom: 8px; }
.search_bar input {
  flex: 1; min-width: 0; height: 44px; padding: 0; border: 0; border-bottom: 1px solid #000; border-radius: 0;
  outline: none; background: transparent; font-size: 12px;
}
.search_bar input::-webkit-search-cancel-button { display: none; }
.search_bar .sch_close { flex: none; font-size: 12px; color: #888; }
.search_bar .sch_close:hover { color: #000; }
.suggest { padding-bottom: 12px; }
.suggest:empty { display: none; }
.suggest li a { display: flex; align-items: center; gap: 12px; padding: 6px 4px; font-size: 12px; }
.suggest li a:hover, .suggest li a.on { background: #f6f6f6; }
.suggest .th { flex: none; width: 36px; height: 48px; background: #f2f2f2 center / cover; }
.suggest .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest .pr { flex: none; color: #555; }
.suggest mark { background: #fff2a8; color: inherit; }
.suggest .all a { justify-content: flex-end; color: #555; text-decoration: underline; text-underline-offset: 3px; }
.suggest .none { padding: 10px 4px; font-size: 12px; color: #888; }
/* 연관 검색어: 회색 글자 + 누르면 그 검색어로 */
.suggest .rel, .rel_terms { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 12px; color: #999; }
.suggest .rel { padding: 4px 4px 8px; }
.suggest .rel a, .rel_terms a { display: inline; padding: 0; color: #000; text-decoration: underline; text-underline-offset: 3px; }
.suggest .rel a:hover, .rel_terms a:hover { background: none; color: #555; }

/* ---------- side menu (pushes page) ---------- */
.side_menu {
  position: fixed; top: var(--hdr); left: 0; bottom: 0; width: var(--menu-w); z-index: 40;
  background: #fff; padding: 40px 30px 0; overflow: hidden;
  transform: translateX(-100%); transition: transform .6s var(--ease);
}
body.menu-open .side_menu { transform: none; }
/* 1뎁스: 13px / 26px, About 앞에 한 줄(26px) 띄움 */
.side_menu .d1 > li > a,
.side_menu .d1 > li > button { display: flex; justify-content: space-between; align-items: center; width: 100%; font-size: 13px; line-height: 26px; text-align: left; }
.side_menu .d1 > li.gap { margin-top: 26px; }
/* 모바일에서만: 헤더에서 숨긴 Login/Logout·My page를 메뉴 맨 아래에 (한 줄 띄움) */
.side_menu .d1 > li.only-m { display: none; }
/* 메뉴 맨 아래 Logout: 로그인했을 때만 */
/* 다른 메뉴와 떨어져 메뉴 패널 맨 아래에 고정 */
.side_menu .d1 > li.logout { position: absolute; left: 30px; bottom: 40px; }
.side_menu .d1 > li.logout a { color: #999; }
.side_menu .d1 > li.logout a:hover { color: #000; }
/* Customer Care: 아래로 펼침 — 상품 상세 Product information 과 같은 → 화살표, 열리면 90도 돌아 아래를 가리킴 */
.side_menu .d1 > li > button i { font-style: normal; font-size: 12px; display: inline-block; transition: transform .3s var(--ease); }
.side_menu .cc.on > button i { transform: rotate(90deg); }
/* 마우스가 있는 기기: 올리기만 해도 펼침 (터치 기기는 눌러서) */
@media (hover: hover) {
  .side_menu .cc:hover > button i, .side_menu .cc:focus-within > button i { transform: rotate(90deg); }
  .side_menu .cc:hover .sub, .side_menu .cc:focus-within .sub { max-height: 200px; }
}
.side_menu .cc .sub { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.side_menu .cc.on .sub { max-height: 200px; }
.side_menu .cc .sub li a { display: block; font-size: 12px; line-height: 24px; color: #555; }
.side_menu .cc .sub li:first-child a { margin-top: 2px; }
.side_menu .cc .sub li a:hover { color: #000; }
.page { transition: transform .6s var(--ease); padding-top: var(--hdr); }
/* 내용이 짧아도 푸터는 화면 맨 아래에: 페이지를 화면 높이만큼 늘리고 푸터를 아래로 밀어냄 */
.page { display: flex; flex-direction: column; min-height: 100vh; }
/* 가운데 정렬(margin: 0 auto) 박스가 내용 폭으로 줄어들지 않게 100%.
   좌우 margin 이 있는 블록은 자기 스타일에서 width: auto 로 되돌릴 것 (예: 메인 .txt_row) */
.page > * { flex-shrink: 0; width: 100%; }
.page > footer { margin-top: auto; }
body.menu-open .page { transform: translateX(var(--menu-w)); }

/* ---------- product card (main carousel + list) ---------- */
.prdImg { display: block; position: relative; aspect-ratio: 344 / 470; overflow: hidden; }
.prdImg .im { position: absolute; inset: 0; transition: opacity .5s var(--ease); }
.prdImg .im2 { opacity: 0; }
.prd:hover .im2 { opacity: 1; }
.prdImg .cart {
  position: absolute; left: 10px; bottom: 10px; font-size: 10px; letter-spacing: .05em;
  opacity: 0; transform: translateY(4px); transition: .35s var(--ease); background: #fff; padding: 2px 8px;
}
.prd:hover .cart { opacity: 1; transform: none; }
/* 품절: 사진을 흐리게 + 왼쪽 아래 SOLD OUT */
.prd.sold .im { opacity: .55; }
.prd.sold .im2 { display: none; }
.sold_tag { position: absolute; left: 10px; bottom: 10px; background: #fff; padding: 2px 8px; font-size: 10px; letter-spacing: .05em; }
.prd_info { display: flex; justify-content: space-between; gap: 8px; padding: 12px 10px 0; height: 40px; }

/* ---------- footer ---------- */
.mid_f {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 var(--side); height: 44px; line-height: 24px;
}
.mid_f .l, .mid_f .r { display: flex; gap: 12px; flex: 1; }
.mid_f .r { justify-content: flex-end; }
.mid_f .c { flex: 1; text-align: center; }
.mid_f .c button { text-decoration: underline; }
.foot_info {
  padding: 0 var(--side); max-height: 0; overflow: hidden; transition: max-height .5s var(--ease), padding .5s;
  color: #555; font-size: 11px;
}
.foot_info.on { max-height: 200px; padding: 10px var(--side) 30px; }

/* ---------- checkbox: 사이트 전체 같은 모양 (브라우저·OS 기본 모양 대신) ---------- */
input[type=checkbox] {
  -webkit-appearance: none; appearance: none; flex: none;
  width: 16px; height: 16px; margin: 0; border: 1px solid #000; border-radius: 0;
  background: #fff center / 10px 8px no-repeat; cursor: pointer; vertical-align: middle;
  transition: background-color .15s;
}
input[type=checkbox]:checked {
  background-color: #000;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E");
}
input[type=checkbox]:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
input[type=checkbox]:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- 입력칸·셀렉트·텍스트영역: 사이트 전체 한 가지 모양 ----------
   높이 36px, 글자 왼쪽 여백 12px, 셀렉트 화살표도 오른쪽 12px.
   :where() 라 우선순위가 0 — 페이지에서는 폭·배치만 덧붙이면 됨 (헤더 검색창은 따로 덮어씀) */
:where(input:is([type=text], [type=password], [type=email], [type=tel], [type=search], [type=number]), select, textarea) {
  display: block; width: 100%; height: 36px; padding: 0 12px; margin: 0;
  background-color: #f4f4f4; border: 1px solid #f4f4f4; border-radius: 0;
  font-size: 12px; line-height: 18px; color: #000; outline: none;
  -webkit-appearance: none; appearance: none; transition: border-color .2s;
}
:where(select) {
  padding-right: 32px; cursor: pointer;
  background: #f4f4f4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5'%3E%3Cpath d='M0 0l4.5 5L9 0' fill='none' stroke='%23000'/%3E%3C/svg%3E") no-repeat right 12px center;
}
:where(textarea) { height: auto; min-height: 120px; padding: 9px 12px; resize: vertical; }
:where(input, select, textarea):focus:not([type=checkbox]) { border-color: #000; }
:where(input, select, textarea).invalid { border-color: #d33; }
:where(input, select, textarea)[readonly] { color: #888; }
:where(input, select, textarea):disabled:not([type=checkbox]) { opacity: .45; cursor: not-allowed; }
/* 위에서 display 를 지정했으므로 hidden 속성이 다시 먹도록 */
[hidden] { display: none !important; }
:where(input[type=search])::-webkit-search-cancel-button { display: none; }
:where(input, textarea)::placeholder { color: #999; }

/* ---------- 좌측 고정 메뉴: 마이페이지(.mynav, common.js 가 넣음) · 게시판(.board_nav, board.css) 공통 ----------
   위치: 헤더 아래 46px, 왼쪽 20px, 폭 180px / 글자: 모두 12px·24px·보통 굵기 / 항목 #999, 현재 페이지 검정+밑줄 */
.mynav {
  position: fixed; top: calc(var(--hdr) + 46px); left: var(--side); z-index: 10; width: 180px;
  font-size: 12px; line-height: 24px;
}
.mynav .home { display: block; width: fit-content; margin-bottom: 22px; }
.mynav h4 { font-size: 12px; font-weight: 400; line-height: 24px; }
.mynav ul + h4 { margin-top: 22px; }
.mynav ul a { color: #999; transition: color .2s; }
.mynav ul a:hover, .mynav a[aria-current=page] { color: #000; }
.mynav ul a[aria-current=page] { text-decoration: underline; text-underline-offset: 3px; }
/* 넓은 화면: 본문 제목을 메뉴 첫 줄과 같은 높이(헤더 아래 46px)에 */
@media (min-width: 1101px) {
  .mynav ~ .myshop, .mynav ~ .acct { padding-top: 46px; }
}
/* 메뉴가 붙는 페이지의 본문 폭: 장바구니(.basket)와 같은 1040px.
   넓은 화면에서는 왼쪽 고정 메뉴(20~200px)와 겹치지 않게 왼쪽 여백을 200px 이상 둠.
   회원정보수정(.acct)·배송지 관리(.narrow)는 회원가입과 같은 540px 가운데 정렬 */
.mynav ~ .myshop:not(.narrow) { max-width: 1040px; }
@media (min-width: 1101px) {
  .mynav ~ .myshop:not(.narrow) {
    width: auto;
    margin-left: max(200px, calc((100% - 1040px) / 2));
    margin-right: max(0px, calc((100% - 1040px) / 2));
  }
}
/* 좁은 화면: 고정하지 않고 본문 위에 두 묶음을 나란히 */
@media (max-width: 1100px) {
  .mynav {
    position: static; width: 100%; max-width: 1040px; margin: 0 auto; padding: 40px var(--side) 0;
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px;
  }
  .mynav .home { grid-column: 1 / -1; margin-bottom: 12px; }
  .mynav ul + h4 { margin-top: 0; }
  .mynav h4:nth-of-type(2) { grid-column: 2; grid-row: 2; }
  .mynav ul:nth-of-type(2) { grid-column: 2; grid-row: 3; }
  .mynav + .myshop, .mynav + .acct { padding-top: 30px !important; }
}
/* 더보기·주문상세 같은 이동 링크: 회색 글자 앞에 선 화살표 (마우스 올리면 검정)
   글꼴 화살표(→)는 글꼴마다 높이가 달라 처져 보여서 선으로 그린 화살표를 씀 (글자색을 따라감) */
.more_link { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; line-height: 18px; color: #999; white-space: nowrap; transition: color .2s; }
.more_link::before {
  content: ''; flex: none; width: 10px; height: 7px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 7'%3E%3Cpath d='M0 3.5h9M6 .5l3 3-3 3' fill='none' stroke='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 7'%3E%3Cpath d='M0 3.5h9M6 .5l3 3-3 3' fill='none' stroke='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
}
.more_link:hover { color: #000; }

/* 택배사 + 송장번호(배송조회 링크) 한 줄 */
.ship_line { font-size: 12px; color: #555; white-space: nowrap; }
.ship_line .trk { color: #0057ff; text-decoration: underline; text-underline-offset: 3px; }
.ship_line .trk:hover { color: #003db3; }

/* 쿠폰 ↔ 적립금, 회원정보 ↔ 배송지 전환 (오른쪽 끝 Logout) */
.subtabs { display: flex; gap: 14px; margin-bottom: 18px; font-size: 12px; }
.subtabs .logout { margin-left: auto; }
.subtabs a { color: #999; }
.subtabs a:hover { color: #000; }
.subtabs a[aria-current=page] { color: #000; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 팝업 안(?embed=1)에서 연 페이지: 본문만 ---------- */
.embed header, .embed .side_menu, .embed .search_bar, .embed footer, .embed .mynav,
.embed .myshop > h2, .embed .subtabs { display: none !important; }
.embed .page { padding-top: 0; min-height: 0; }
.embed .myshop { padding: 20px var(--side) 40px !important; margin: 0 auto !important; }

/* ---------- toast ---------- */
#toast {
  position: fixed; left: 50%; bottom: 30px; z-index: 60; transform: translate(-50%, 12px);
  background: #000; color: #fff; padding: 10px 18px; font-size: 12px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease);
}
#toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#toast a { margin-left: 10px; text-decoration: underline; }

/* ---------- confirm dialog (작성 중 이탈 경고) ---------- */
.dlg_dim {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  padding: var(--side); background: rgba(0,0,0,.35);
  opacity: 0; transition: opacity .2s var(--ease);
}
.dlg_dim.on { opacity: 1; }
.dlg {
  width: 100%; max-width: 340px; padding: 26px 22px 22px; background: #fff;
  transform: translateY(8px); transition: transform .25s var(--ease);
}
.dlg_dim.on .dlg { transform: none; }
.dlg h3 { font-size: 13px; font-weight: 700; line-height: 20px; }
.dlg p { margin-top: 8px; font-size: 12px; line-height: 18px; color: #555; }
.dlg .btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 22px; }
.dlg .btns button { height: 36px; font-size: 12px; border: 1px solid #eee; background: #fff; }
.dlg .btns .stay { background: #777; border-color: #777; color: #fff; }
.dlg .btns .stay:hover { background: #000; border-color: #000; }
.dlg .btns button:focus-visible { outline: 2px solid #000; outline-offset: 2px; }

/* ---------- mobile ---------- */
@media (max-width: 768px) {
  :root { --side: 16px; --menu-w: 78vw; }
  .util a.hide-m { display: none; }
  .side_menu .d1 > li.only-m { display: block; }
  .util { gap: var(--side); }
  .mid_f { flex-wrap: wrap; height: auto; padding: 14px var(--side); gap: 6px; }
  .mid_f .l, .mid_f .c, .mid_f .r { flex: 1 1 100%; justify-content: flex-start; text-align: left; }
}
.opt { margin-top: 2px; font-size: 11px; line-height: 16px; color: #888; }