/*
 * 렌탈마켓 공개 GLOBAL SHELL — .sh-* 전용
 *
 * 설계 정본 PUBLIC-UI-004-GLOBAL-SHELL-DESIGN-v0.1.0.md
 *
 *   정의 범위  .pub-root 하위의 .sh-* 만
 *   금지      .hd* / .ft* / .pd-* / .dt-* / .hm-* / .pc-* / .pdt-* 재정의
 *             :root 에서 --pub-* 재정의
 *             !important
 *
 * 헤더·푸터의 기존 규칙은 public-base.css 가 제공한다.
 * 이 파일은 그 위에 PUBLIC-UI-004 가 더한 요소만 얹는다.
 *   skip link · 전역 GNB · 모바일 메뉴 · footer 서비스 내비
 *
 * breakpoint  768px
 *   < 768px   메뉴 버튼 + <details> 패널
 *   >= 768px  인라인 GNB + 인라인 브랜드 nav
 * display:none 은 접근성 트리에서도 제거되므로 한 번에 한 세트만 읽힌다.
 *
 * 색 규칙  마젠타는 돈과 행동 전용이다. shell 은 잉크와 중립만 쓴다.
 */

/* ── skip link ──────────────────────────────────────────
 * display:none 을 쓰지 않는다. 포커스를 받을 수 없게 된다.
 * 화면 밖에 두었다가 :focus 에서 끌어온다.
 */
.pub-root .sh-skip{position:absolute;left:var(--gutter);top:-100px;z-index:var(--z-modal);
  display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s4);
  border:1px solid var(--pub-line-2);border-radius:var(--r1);
  background:var(--pub-bg);color:var(--pub-ink);
  font-size:var(--fs-label);font-weight:var(--fw-sb);
  transition:top .12s ease;}
.pub-root .sh-skip:focus{top:var(--s3);text-decoration:none;}

/* ── 로고 축소·줄바꿈 방어 (RC5 P1) ─────────────────────
 * public-base.css 의 .hd__inner 는 >=768px 에서 flex-wrap:nowrap 이다.
 * .hd__logo 에 flex-shrink 방어가 없어 로고가 눌리고
 * 한국어 텍스트가 "렌탈 / 마켓" 으로 접힌다(768~900px 실측).
 *
 * public-base.css 와 .hd__logo 공통 규칙은 건드리지 않는다.
 * GLOBAL SHELL 보조 class 로만 flex 축소를 막고 한 줄을 유지한다.
 * 폰트 크기 · 헤더 높이 · breakpoint 를 바꾸지 않는다.
 */
.pub-root .sh-logo{flex:0 0 auto;white-space:nowrap;}
/*
 * 이미지 로고 (PUBLIC-SHELL-POLISH-001).
 *
 * 로고 파일이 있는 사이트에서만 이 수식자가 붙는다. 없는 사이트는 글자 그대로다.
 * .hd__logo 의 글자 속성(크기·굵기)은 그대로 둔다 — 그 선언은 public-base.css(GLOBAL SHELL) 소유다.
 * 여기서는 img 하나만 다룬다.
 *
 * height 를 고정하고 width:auto 로 둬서 파일 비율이 바뀌어도 헤더 높이가 흔들리지 않는다.
 * markup 의 width/height 속성은 로고가 늦게 떠도 자리를 미리 잡게 한다.
 */
.pub-root .sh-logo--img{display:inline-flex;align-items:center;line-height:0;}
.pub-root .sh-logo--img img{display:block;height:24px;width:auto;}

/* ── 전역 GNB (>=768px) ─────────────────────────────────
 * 좁은 화면에서는 모바일 메뉴 패널이 같은 링크를 제공한다.
 */
/*
 * GNB 가로 배치 (SHELL-GNB-BALANCE-001 · 2026-10-19).
 *
 * 전에는 남는 폭이 전부 **제휴카드와 검색창 사이 한 자리에** 고였다.
 *   .sh-search 가 margin-left:auto 로 오른쪽 끝에 붙고 max-width:300px 로 묶여 있어서다.
 *   1920 실측: 로고~GNB 24 · GNB~유틸 24 · 유틸~검색 191  ← 한쪽만 벌어진다
 *
 * margin-inline:auto 를 더해 auto 마진을 세 자리로 늘린다.
 *   남는 폭이 세 간격에 균등하게 갈린다. 1920 실측: 80 · 80 · 80.
 *
 * 이것은 "GNB 를 화면 중앙에 고정"하는 것이 **아니다.** 남는 폭의 균등 분배다.
 *   그래서 카테고리가 하나 늘어도 세 간격이 **함께** 줄어든다. 한쪽만 깨지지 않는다.
 *   엄밀한 중앙 고정이었다면 항목 수에 따라 로고와의 거리가 혼자 달라졌을 것이다.
 *
 * 미디어쿼리를 두지 않는다. 768 미만에서는 이 규칙의 display 가 none 이라 효과가 없고,
 * 1280 미만에서는 남는 폭이 0 이라 분배할 것이 없다(768·900·1024 실측 — 현재와 동일).
 *
 * 검색 max-width:300px 는 그대로 둔다. PUBLIC-SHELL-POLISH-001 이 420→300 으로 내리며
 * "남는 폭은 메뉴가 쓰는 편이 낫다"고 적어 둔 결정이고, 이 변경이 바로 그 방향이다.
 */
.pub-root .sh-gnb{display:none;gap:var(--s5);align-items:center;margin-inline:auto;}
/* GNB 글씨를 키운다(PATCH-002).
   헤더에서 전화번호를 빼 여유가 생겼고, 카테고리 진입이 헤더의 주 역할이다. */
/* [PUBLIC-SHELL-POLISH-001] 16px → 17px.
   검색바를 줄여 생긴 자리를 메뉴가 쓴다. 카테고리 진입이 헤더의 주 역할이다. */
.pub-root .sh-gnb a{display:inline-flex;align-items:center;min-height:44px;
  white-space:nowrap;
  font-size:1.1875rem;font-weight:var(--fw-sb);color:var(--pub-ink-2);}
.pub-root .sh-gnb a:hover{color:var(--pub-ink);text-decoration:none;}
.pub-root .sh-gnb a[aria-current="page"]{color:var(--pub-ink);font-weight:var(--fw-b);}

/* ── 모바일 메뉴 (<768px) ───────────────────────────────
 * <details>/<summary> 네이티브. JS 가 없어도 열린다.
 */
.pub-root .sh-menu{margin-left:auto;}
/*
 * 메뉴 버튼 (DESIGN-REFINEMENT).
 *
 * 아이콘만 남기고 테두리와 "메뉴" 글자를 뺐다.
 * 헤더에는 로고와 이 버튼 둘뿐이라 무엇인지 헷갈리지 않는다.
 * 글자는 sr-only 로 남겨 보조기기가 읽는다.
 *
 * 44px 손가락 규칙은 지킨다. 상자만 안 보일 뿐 누르는 자리는 그대로다.
 */
.pub-root .sh-menu__btn{display:inline-grid;place-items:center;
  width:44px;height:44px;padding:0;
  border:0;border-radius:var(--r1);background:transparent;
  -webkit-appearance:none;appearance:none;
  color:var(--pub-ink);cursor:pointer;list-style:none;}
.pub-root .sh-menu__btn:hover{background:var(--pub-bg-2);}
.pub-root .sh-menu__btn::-webkit-details-marker{display:none;}
.pub-root .sh-menu__bars{position:relative;display:block;width:16px;height:2px;
  background:var(--pub-ink);}
.pub-root .sh-menu__bars::before,
.pub-root .sh-menu__bars::after{content:"";position:absolute;left:0;width:16px;height:2px;
  background:var(--pub-ink);}
.pub-root .sh-menu__bars::before{top:-5px;}
.pub-root .sh-menu__bars::after{top:5px;}

/* 모바일 내비게이션 오버레이 레이어 (설계 v0.1.2 §1).
 *
 * position:absolute 라 문서 흐름을 벗어난다.
 * PRODUCT DETAIL 의 .cta-bar 가 --z-sticky(200) 로 하단에 고정돼 있어,
 * 패널이 --z-header(100) 이면 메뉴가 길어졌을 때 CTA 가 마지막 링크를 덮는다.
 *
 * 00 결정 — 메뉴가 열린 동안에는 GLOBAL NAV 가 sticky CTA 보다 우선한다.
 *   메뉴 패널  --z-overlay(300)
 *   sticky CTA --z-sticky(200)
 * .cta-bar 와 public-product.css 는 수정하지 않는다.
 *
 * 시각 dim backdrop 을 두지 않는다. body scroll lock 도 걸지 않는다.
 * 대신 패널 자체가 스크롤한다. 짧은 viewport 에서도 모든 링크에 닿을 수 있어야 한다.
 *
 * 높이 상한 = viewport - 헤더(60px, public-base.css 의 .hd__inner min-height)
 * dvh 미지원 브라우저를 위해 vh 를 먼저 선언한다. 지원하면 뒤 선언이 이긴다.
 */
/*
 * 메뉴 패널 (DESIGN-REFINEMENT).
 *
 * fixed 로 화면에 붙인다.
 *   absolute 였을 때는 스크롤하면 패널이 본문과 함께 올라가
 *   메뉴가 위로 사라지고 아래 상품이 비쳐 보였다.
 *
 * 헤더 아래부터 화면 끝까지 덮는다.
 * 뒤 배경은 ::before 로 어둡게 깔아 메뉴에 집중하게 한다.
 */
.pub-root .sh-menu__panel{position:fixed;left:0;right:0;
  top:var(--header-h,61px);bottom:0;z-index:var(--z-overlay);
  margin-top:0;padding:var(--s5) var(--gutter) var(--s8);
  border-top:1px solid var(--pub-line);
  background:var(--pub-bg);
  box-shadow:0 8px 24px rgba(30,23,35,.10);
  max-height:none;
  /* dvh 미지원 브라우저를 위해 vh 를 먼저 선언한다. */
  height:calc(100vh - var(--header-h,61px));
  height:calc(100dvh - var(--header-h,61px));
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;}
.pub-root .sh-menu__nav{display:flex;flex-direction:column;}
/*
 * 그룹 사이는 여백으로 나눈다 (DESIGN-REFINEMENT).
 *
 * 굵은 구분선을 두니 목록이 카드 묶음처럼 보였다.
 * 선을 얇게 하고 여백을 줄이면 한 덩어리로 읽힌다.
 */
.pub-root .sh-menu__nav + .sh-menu__nav{margin-top:var(--s3);padding-top:var(--s3);
  border-top:1px solid var(--pub-line);}
/*
 * 메뉴 항목 (DESIGN-REFINEMENT).
 *
 * 아이콘 없이 글자만 둔다.
 *   항목이 브랜드까지 열 개가 넘는데 아이콘을 달면
 *   왼쪽에 잡다한 도형이 늘어서 오히려 읽기 어렵다.
 *   브랜드 이름에는 어울리는 아이콘도 없다.
 *
 * 현재 페이지는 연한 accent 면으로 알린다.
 * 글자 굵기만으로는 어느 화면에 있는지 눈에 잘 안 들어왔다.
 */
.pub-root .sh-menu__nav a{display:flex;align-items:center;
  min-height:48px;padding:0 var(--s3);border-radius:var(--r1);
  font-size:var(--fs-body);font-weight:var(--fw-m);color:var(--pub-ink-2);}
/*
 * 항목 사이 간격을 균일하게 둔다.
 *   현재 페이지에만 면이 있어 그 칸만 커 보이고 리듬이 깨졌다.
 *   면은 padding 안에서 그려지므로 바깥 간격은 모두 같다.
 */
.pub-root .sh-menu__nav a + a{margin-top:2px;}
.pub-root .sh-menu__nav a:hover{background:var(--pub-bg-2);color:var(--pub-ink);
  text-decoration:none;}

/* 현재 페이지. 면으로 알린다. */
.pub-root .sh-menu__nav a[aria-current="page"]{
  background:var(--pub-accent-bg);color:var(--pub-accent);font-weight:var(--fw-b);}
/* 마우스·터치로 눌렀을 때는 테두리를 그리지 않는다. */
.pub-root .sh-menu__nav a:focus{outline:none;}
.pub-root .sh-menu__nav a:focus-visible{outline:2px solid var(--pub-accent);outline-offset:-2px;}

/*
 * 검색 (메뉴 안).
 *
 * 메뉴를 열면 첫 줄에 온다. 찾으러 온 사람이 먼저 만난다.
 */
/*
 * 상담 박스 (DESIGN-REFINEMENT).
 *
 * 가운데 정렬이라 두 줄이 되면 들쭉날쭉했다.
 * 제목 · 설명 · 링크를 세로로 쌓고 왼쪽에 맞춘다.
 */
/*
 * 상담 박스 (DESIGN-REFINEMENT).
 *
 * 회색 바탕에 검은 테두리와 그림자가 겹쳐 무거웠다.
 *   button 의 브라우저 기본 스타일이 그대로 나온 탓이다.
 *   appearance 를 지우고 흰 바탕에 얇은 선만 남긴다.
 *
 * "상담 신청" 을 오른쪽 끝으로 보내 제목과 마주 보게 한다.
 * 글이 왼쪽, 행동이 오른쪽이면 무엇을 누르는지 바로 안다.
 */
.pub-root .sh-menu__counsel{display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;column-gap:var(--s4);
  width:100%;margin:0 0 var(--s3);padding:var(--s4);
  border:0;border-radius:var(--r1);
  -webkit-appearance:none;appearance:none;
  background:var(--pub-accent-bg);
  box-shadow:none;
  font-family:inherit;text-align:left;cursor:pointer;}
.pub-root .sh-menu__counsel:hover{background:var(--pub-accent-bg2,#E7EBFF);}

.pub-root .sh-menu__counsel-t{grid-column:1;display:block;
  font-size:var(--fs-label);font-weight:var(--fw-b);color:var(--pub-ink);}
.pub-root .sh-menu__counsel-d{grid-column:1;display:block;margin-top:2px;
  font-size:var(--fs-caption);color:var(--pub-ink-3);line-height:1.5;}
/* 오른쪽 끝. 두 줄을 세로로 가로지른다. */
.pub-root .sh-menu__counsel-go{grid-column:2;grid-row:1 / span 2;
  align-self:center;white-space:nowrap;
  font-size:var(--fs-label);font-weight:var(--fw-b);color:var(--pub-accent);}

.pub-root .sh-menu__search{display:flex;align-items:center;gap:var(--s2);
  margin:0 0 var(--s3);padding:0 var(--s3);
  height:48px;border-radius:var(--r1);background:var(--pub-bg-2);
  box-shadow:none;}
.pub-root .sh-menu__search input{flex:1 1 auto;min-width:0;height:100%;
  border:0;background:transparent;
  font-family:inherit;font-size:var(--fs-control);color:var(--pub-ink);}
.pub-root .sh-menu__search input::placeholder{color:var(--pub-ink-4);}
.pub-root .sh-menu__search button{flex:0 0 auto;display:grid;place-items:center;
  width:36px;height:36px;padding:0;border:0;border-radius:var(--r1);
  background:transparent;cursor:pointer;}
.pub-root .sh-menu__search button:hover{background:var(--pub-bg-3);}
.pub-root .sh-menu__ico{width:20px;height:20px;background:var(--pub-ink-2);
  -webkit-mask:var(--sh-ico-search) center/contain no-repeat;
          mask:var(--sh-ico-search) center/contain no-repeat;}

/*
 * 전화 상담 (DESIGN-REFINEMENT).
 *
 * 규칙이 없어 맨 링크로 나왔다. 밑줄만 그어진 채 목록 끝에 붙어
 * 메뉴 항목인지 안내 문구인지 알 수 없었다.
 *
 * 눌러서 전화가 걸리는 자리이므로 버튼처럼 보이게 한다.
 * 목록 마지막이라 여백을 두고 떼어 놓는다.
 */
.pub-root .sh-menu__tel{display:flex;align-items:center;justify-content:center;
  gap:var(--s2);margin-top:var(--s4);min-height:52px;padding:0 var(--s4);
  border-radius:var(--r1);background:var(--pub-bg-2);
  font-size:var(--fs-label);color:var(--pub-ink-2);}
.pub-root .sh-menu__tel::before{content:"";flex:0 0 auto;
  width:18px;height:18px;background:var(--pub-ink-2);
  -webkit-mask:var(--sh-ico-tel) center/contain no-repeat;
          mask:var(--sh-ico-tel) center/contain no-repeat;}
.pub-root .sh-menu__tel b{font-weight:var(--fw-eb);color:var(--pub-ink);
  font-variant-numeric:tabular-nums;letter-spacing:var(--tr-1);}
.pub-root .sh-menu__tel:hover{background:var(--pub-bg-3);text-decoration:none;}

/*
 * 아이콘 정의.
 * 인라인 SVG 를 mask 로 쓴다. 파일을 늘리지 않는다.
 */
.pub-root{
  --sh-ico-tel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .7-.2 1l-2.3 2.2z'/%3E%3C/svg%3E");
  --sh-ico-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' d='M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14zm5 12 4.5 4.5'/%3E%3C/svg%3E");
}

/* 기존 인라인 브랜드 nav — <768px 에서는 모바일 메뉴가 대체한다.
   public-base.css 의 .hd__nav 규칙을 고치지 않고
   shell 전용 보조 class 로만 제어한다.
   기존 규칙은 <768px 에서 .hd__nav 를 2행(flex:1 0 100%)으로 만들기 때문에
   감추지 않으면 브랜드 줄과 메뉴 버튼이 함께 보인다. */
@media (max-width:767px){
}

@media (min-width:768px){
  .pub-root .sh-gnb{display:flex;}
  .pub-root .sh-menu{display:none;}
}

/* ── footer 서비스 내비 ─────────────────────────────────
 * 모바일에서 한 줄에 압축하지 않는다. 세로로 쌓고 그룹 간격을 준다.
 */
.pub-root .sh-ft-nav{display:grid;gap:var(--s6);margin-bottom:var(--s6);}
.pub-root .sh-ft-nav__group{display:flex;flex-direction:column;gap:var(--s1);min-width:0;}
.pub-root .sh-ft-nav__title{margin-bottom:var(--s1);
  font-size:var(--fs-caption);font-weight:var(--fw-b);color:var(--pub-ink);}
.pub-root .sh-ft-nav a{display:inline-flex;align-items:center;min-height:44px;
  font-size:var(--fs-label);color:var(--pub-ink-3);word-break:keep-all;}
.pub-root .sh-ft-nav a:hover{color:var(--pub-ink);text-decoration:none;}

@media (min-width:768px){
  .pub-root .sh-ft-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s8);}
}
@media (min-width:1024px){
  .pub-root .sh-ft-nav{grid-template-columns:repeat(3,minmax(0,1fr));}
}


/* ── 헤더 검색 (PUBLIC-FINAL-BUNDLE-001) ─────────────────
 * form 이 정본이다. 드롭다운은 JS 가 붙었을 때만 열린다.
 *
 * 검색창을 헤더 가운데 두고 유틸을 오른쪽 끝에 붙인다.
 * 좁은 화면에서는 검색창을 GNB 아래 줄로 내린다.
 * 한 줄에 다 넣으면 입력 폭이 40px 남는다.
 */
/* [PUBLIC-SHELL-POLISH-001] 420 → 300px.
   검색은 아이콘+입력 한 줄이면 충분하고, 남는 폭은 메뉴가 쓰는 편이 낫다. */
.pub-root .sh-search{position:relative;flex:1 1 200px;min-width:0;
  max-width:300px;margin-left:auto;}
.pub-root .sh-search__form{display:flex;align-items:center;
  height:44px;padding:0 var(--s2) 0 var(--s4);
  border-radius:var(--r-pill);
  box-shadow:inset 0 0 0 1px var(--pub-line-2);
  background:var(--pub-bg);
  transition:box-shadow .15s ease;}
.pub-root .sh-search[data-open="on"] .sh-search__form,
.pub-root .sh-search__form:focus-within{box-shadow:inset 0 0 0 2px var(--pub-ink);}
.pub-root .sh-search__form input{flex:1 1 auto;min-width:0;
  border:0;background:none;outline:none;
  font-size:var(--fs-label);color:var(--pub-ink);}
.pub-root .sh-search__form input::placeholder{color:var(--pub-ink-4);}
/* 시각 36px, 터치 44px.
   헤더 높이 안에서 버튼이 답답해 보이지 않게 하되 터치 영역은 확보한다. */
.pub-root .sh-search__btn{position:relative;flex:0 0 auto;display:grid;place-items:center;
  width:36px;height:36px;padding:0;border:0;border-radius:var(--r-pill);
  background:none;cursor:pointer;}
.pub-root .sh-search__btn::after{content:"";position:absolute;
  left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%);}
.pub-root .sh-search__btn:hover{background:var(--pub-bg-3);}

/* 돋보기 아이콘. 아이콘 세트가 없어 인라인 SVG 를 mask 로 쓴다. */
.pub-root .sh-search__ico{width:18px;height:18px;background:var(--pub-ink-2);
  -webkit-mask:var(--sh-ico-search) center/contain no-repeat;
          mask:var(--sh-ico-search) center/contain no-repeat;}
.pub-root{--sh-ico-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' d='M10.5 3a7.5 7.5 0 1 0 0 15 7.5 7.5 0 0 0 0-15zM21 21l-5.2-5.2'/%3E%3C/svg%3E");}

/* 드롭다운 */
.pub-root .sh-search__pop{position:absolute;left:0;right:0;top:calc(100% + var(--s2));
  z-index:30;
  border-radius:var(--r2);border:1px solid var(--pub-line);
  background:var(--pub-bg);
  box-shadow:0 12px 32px rgba(30,23,35,.16);
  overflow:hidden;}
.pub-root .sh-search__pop[hidden]{display:none;}

.pub-root .sh-search__tabs{display:flex;border-bottom:1px solid var(--pub-line);}
.pub-root .sh-search__tab{flex:1 1 0;min-height:48px;padding:0 var(--s3);
  border:0;background:none;cursor:pointer;
  font-size:var(--fs-label);font-weight:var(--fw-m);color:var(--pub-ink-3);}
.pub-root .sh-search__tab.is-on{color:var(--pub-accent);font-weight:var(--fw-b);
  box-shadow:inset 0 -2px 0 0 var(--pub-accent);}

.pub-root .sh-search__panel{max-height:min(60vh,420px);overflow-y:auto;
  padding:var(--s3) 0;}
.pub-root .sh-search__panel[hidden]{display:none;}

.pub-root .sh-search__list{margin:0;padding:0;list-style:none;}
.pub-root .sh-search__list li{display:flex;align-items:center;}
/*
 * 항목 좌우 여백 (PATCH-007 · P1).
 * 삭제 버튼이 붙는 행은 오른쪽 padding 을 0 으로 둔다.
 * 버튼 자체가 44px 여백을 갖고 있어 이중으로 주면 글자가 더 잘린다.
 */
.pub-root .sh-search__list a{flex:1 1 auto;min-width:0;
  display:flex;align-items:center;gap:var(--s3);
  min-height:44px;padding:0 var(--s5);
  font-size:var(--fs-label);color:var(--pub-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pub-root .sh-search__list a:hover{text-decoration:none;background:var(--pub-bg-2);}

/*
 * 순위 숫자 (PATCH-007 · P1).
 *
 * 1~3위만 강조한다. 전부 강조하면 순위가 안 읽힌다.
 *
 * 폭을 22px 로 잡는다. 이전 16px 은 한 자리 기준이라
 * 10위가 들어오면 숫자가 칸을 넘어 제목을 오른쪽으로 밀었다(실측).
 * 오른쪽 정렬로 자릿수가 달라도 제목 시작점이 같다.
 */
.pub-root .sh-search__n{flex:0 0 auto;width:22px;text-align:right;
  font-size:var(--fs-label);font-weight:var(--fw-b);color:var(--pub-ink-4);
  font-variant-numeric:tabular-nums;}
.pub-root .sh-search__list--rank li:nth-child(-n+3) .sh-search__n{color:var(--pub-accent);}

.pub-root .sh-search__del{flex:0 0 auto;width:44px;height:44px;padding:0;
  border:0;background:none;cursor:pointer;
  font-size:16px;color:var(--pub-ink-4);}
.pub-root .sh-search__del:hover{color:var(--pub-ink-2);}

.pub-root .sh-search__none{padding:var(--s8) var(--s5);text-align:center;
  font-size:var(--fs-caption);color:var(--pub-ink-3);}

.pub-root .sh-search__foot{display:flex;justify-content:flex-end;
  padding:var(--s2) var(--s3);border-top:1px solid var(--pub-line);
  background:var(--pub-bg-2);}
/*
 * 닫기 버튼 (PATCH-007 · P1).
 *
 * 이전에는 "닫기 ×" 가 겹쳐 보였다.
 * inline-flex 로 글자와 기호를 나란히 놓고 사이 간격을 준다.
 * min-height 를 44px 로 올린다. 손가락으로 누르는 자리다.
 */
.pub-root .sh-search__close{display:inline-flex;align-items:center;gap:var(--s2);
  min-height:44px;padding:0 var(--s4);
  border:0;background:none;cursor:pointer;
  font-size:var(--fs-caption);color:var(--pub-ink-3);
  white-space:nowrap;}
.pub-root .sh-search__close:hover{color:var(--pub-ink);}

/* 좁은 화면: 검색창을 GNB 아래 줄로 내린다. */
@media (max-width:767px){
  /*
   * 검색 버튼을 로고·메뉴와 같은 줄에 둔다 (DESIGN-REFINEMENT).
   *
   * 이전에는 flex:1 1 100% 로 한 줄을 통째로 썼다.
   *   헤더가 65 → 125px 로 두 줄이 되어
   *   검색 버튼만 아래에 덩그러니 남았다(실측).
   *
   * 아이콘 버튼 하나라 자리를 많이 쓰지 않는다.
   * order 도 뺀다. 로고 → 검색 → 메뉴 순서가 자연스럽다.
   *
   * 열렸을 때는 아래 .is-open 규칙이 헤더를 덮으므로
   * 그때만 폭을 다 쓴다.
   */
  /*
   * 헤더에서 검색을 감춘다 (DESIGN-REFINEMENT).
   * 메뉴 안 첫 줄로 옮겼다. 헤더에는 로고와 메뉴만 남는다.
   */
  .pub-root .sh-search{display:none;}

  /*
   * 메뉴 버튼이 오른쪽 끝을 잡는다.
   *
   * .sh-menu 도 margin-left:auto 를 갖는다.
   * 검색에도 auto 를 주면 남는 자리를 둘이 나눠 가져
   * 메뉴가 화면 밖으로 밀린다(실측).
   * 검색이 자리를 만들고 메뉴는 그대로 붙는다.
   */
  /*
   * 메뉴는 오른쪽 끝에 둔다.
   * 헤더 검색을 감췄으므로 auto 를 나눠 가질 상대가 없다.
   */
  .pub-root .sh-menu{margin-left:auto;flex:0 0 auto;}
}

/* ── 헤더 오른쪽 유틸 ────────────────────────────────────
 * 브랜드 8개를 헤더에서 뺐다. 한 줄을 다 먹어 카테고리가 묻힌다.
 * 상담 버튼도 뺐다(제작자 지시). 전화번호는 남긴다.
 * 렌탈은 상담 전환이 핵심이라 헤더에 진입점이 하나도 없으면 안 된다.
 */
.pub-root .sh-util{display:none;align-items:center;gap:var(--s4);
  flex:0 0 auto;margin-left:var(--s4);}
@media (min-width:1024px){ .pub-root .sh-util{display:flex;} }

/* [PUBLIC-SHELL-POLISH-001] 15px → 16px. GNB 와 한 단계 차이를 유지한다. */
.pub-root .sh-util__link{display:inline-flex;align-items:center;min-height:44px;
  /* TYPOGRAPHY-007 미결 1건 — A안 채택: 이 선택자에만 18px.
     --fs-subtitle 토큰을 올리면 상세·검색의 부제까지 함께 커진다.
     전역 타이포를 올릴 때 토큰으로 되돌릴 자리다. */
  font-size:18px;color:var(--pub-ink-2);white-space:nowrap;}
.pub-root .sh-util__link:hover{color:var(--pub-ink);text-decoration:none;}

.pub-root .sh-util__tel{display:inline-flex;align-items:center;gap:var(--s2);
  min-height:44px;
  font-size:var(--fs-label);font-weight:var(--fw-b);color:var(--pub-ink);
  white-space:nowrap;font-variant-numeric:tabular-nums;}
.pub-root .sh-util__tel:hover{text-decoration:none;}
.pub-root .sh-util__tel-ico{width:15px;height:15px;flex:0 0 auto;
  background:var(--pub-ink-3);
  -webkit-mask:var(--sh-ico-tel) center/contain no-repeat;
          mask:var(--sh-ico-tel) center/contain no-repeat;}
.pub-root{--sh-ico-tel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .7-.2 1l-2.3 2.2z'/%3E%3C/svg%3E");}


/* ── 헤더 검색 토글 (PATCH-002) ──────────────────────────
 * 이전에는 input 을 항상 펼쳐 뒀다. 카테고리·제휴카드와 폭을 다투고
 * 좁은 화면에서 GNB 를 밀어냈다. 아이콘으로 줄이고 눌러서 연다.
 *
 * openBtn 은 <a href="/search"> 다. JS 가 없으면 검색 화면으로 이동한다.
 * 눌러도 아무 일이 없는 상태를 만들지 않는다.
 */
.pub-root .sh-search__open{display:inline-flex;align-items:center;gap:var(--s2);
  min-height:44px;padding:0 var(--s3);border-radius:var(--r-pill);
  font-size:var(--fs-label);font-weight:var(--fw-sb);color:var(--pub-ink-2);
  cursor:pointer;}
.pub-root .sh-search__open:hover{background:var(--pub-bg-3);text-decoration:none;
  color:var(--pub-ink);}
.pub-root .sh-search__open .sh-search__ico{background:var(--pub-ink-2);}

/*
 * PC 는 검색바를 항상 보여 준다 (DESIGN-REFINEMENT).
 *
 * 이전에는 "검색" 버튼만 두고 누르면 입력창이 나왔다.
 *   버튼이 79px 인데 자리는 420px 이라 오른쪽 341px 이 비었다.
 *   버튼이 그 넓은 자리 왼쪽 끝에 붙어 어중간해 보였다(실측).
 *
 * 넓은 화면에서는 감출 이유가 없다. 자리가 이미 있다.
 * 한 번 덜 누르고 바로 칠 수 있다.
 *
 * 좁은 화면은 아래 media query 에서 기존 토글을 유지한다.
 * 거기서는 입력창을 늘 펴 두면 로고와 메뉴가 밀린다.
 */
.pub-root .sh-search__open{display:none;}
.pub-root .sh-search__form{display:flex;}

/*
 * X 버튼도 PC 에서는 감춘다.
 *   닫을 대상이 없다. 검색바가 늘 떠 있다.
 *   눌러도 아무 일이 없는 버튼을 남기지 않는다.
 * 드롭다운은 ESC · 바깥 클릭 · 하단 "닫기" 로 닫는다.
 */
.pub-root .sh-search__x{display:none;}

/*
 * 검색창 안 닫기 X (PATCH-007 · P1 이름 분리).
 *
 * 이전에는 sh-search__close 였다. 드롭다운 하단의 "닫기 ×" 텍스트 버튼과
 * 같은 이름이라 뒤에 오는 이 규칙이 앞을 덮었다.
 *   텍스트 버튼이 40x40 아이콘 크기로 눌리고 padding 이 0 이 되며
 *   가상요소 X 까지 글자 위에 겹쳐 "닫X ×" 로 보였다(실측).
 *
 * 두 버튼은 생김새도 위치도 다르다. 이름을 나눈다.
 *   sh-search__x      입력창 옆 아이콘 X
 *   sh-search__close  드롭다운 하단 "닫기 ×" 텍스트
 */
.pub-root .sh-search__x{position:relative;flex:0 0 auto;
  width:40px;height:40px;padding:0;border:0;border-radius:var(--r-pill);
  background:transparent;cursor:pointer;}
.pub-root .sh-search__x:hover{background:var(--pub-bg-3);}
.pub-root .sh-search__x::before,
.pub-root .sh-search__x::after{content:"";position:absolute;left:50%;top:50%;
  width:14px;height:2px;background:var(--pub-ink-2);border-radius:2px;
  transform:translate(-50%,-50%) rotate(45deg);}
.pub-root .sh-search__x::after{transform:translate(-50%,-50%) rotate(-45deg);}

/*
 * 빈 질의 제출 피드백.
 *
 * 이전에는 preventDefault + focus 만 해서 화면이 그대로였다.
 * "눌렀는데 아무 일이 없다" 로 보인다. 짧게 흔들어 입력이 필요함을 알린다.
 */
@keyframes rmShake{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-5px);}
  40%{transform:translateX(5px);}
  60%{transform:translateX(-3px);}
  80%{transform:translateX(3px);}
}
.pub-root .sh-search__form.is-empty{animation:rmShake .4s ease;}
.pub-root .sh-search__form.is-empty input{box-shadow:inset 0 0 0 2px var(--pub-accent);}

/* 움직임을 줄이도록 설정한 사용자에게는 흔들지 않는다.
   대신 테두리 강조만 남긴다. 피드백 자체가 사라지지는 않는다. */
@media (prefers-reduced-motion: reduce){
  .pub-root .sh-search__form.is-empty{animation:none;}
}

/* 모바일에서는 열린 검색이 헤더 폭을 전부 쓴다.
   좁은 화면에서 아이콘 옆에 input 을 욱여넣으면 둘 다 못 쓴다. */
@media (max-width:767px){
  /*
   * 좁은 화면은 기존 토글을 유지한다.
   * 입력창을 늘 펴 두면 로고·메뉴와 한 줄에 들어가지 못한다.
   */
  .pub-root .sh-search__open{display:inline-flex;}
  .pub-root .sh-search.is-open .sh-search__open{display:none;}
  .pub-root .sh-search__form{display:none;}
  .pub-root .sh-search.is-open .sh-search__form{display:flex;}
  /* JS 가 붙기 전에는 form 이 정본이다. */
  .pub-root .sh-search:not([data-ready]) .sh-search__open{display:none;}
  .pub-root .sh-search:not([data-ready]) .sh-search__form{display:flex;}
  /* 좁은 화면에서는 X 로 검색을 닫는다. 자리를 되돌려 줘야 한다. */
  .pub-root .sh-search__x{display:block;}

  .pub-root .sh-search.is-open{position:absolute;left:0;right:0;top:0;
    z-index:3;padding:0 var(--gutter);background:var(--pub-bg);
    display:flex;align-items:center;min-height:var(--header-h,64px);}
  .pub-root .sh-search.is-open .sh-search__form{width:100%;}

  /*
   * 드롭다운을 검색창과 같은 폭으로 맞춘다 (PATCH-008 · P0-B).
   *
   * .sh-search.is-open 이 padding:0 var(--gutter) 를 갖는데
   * .sh-search__pop 은 left:0 / right:0 이라 그 padding 을 무시했다.
   * 그래서 드롭다운이 검색창보다 좌우로 gutter 만큼씩 넓게 나왔다.
   *   390px 에서 좌우 16px 씩 어긋남(실측).
   *
   * 검색창 좌우 선과 목록 좌우 선이 다르면
   * 무엇이 무엇에 딸린 목록인지 눈으로 알기 어렵다.
   */
  .pub-root .sh-search.is-open .sh-search__pop{
    left:var(--gutter);right:var(--gutter);}
}

/* ── 하위 분류 내비 ──
 *
 * 지금은 **모바일 메뉴에서만** 하위 분류를 낸다. 들여쓴 계층으로 항상 펼쳐져 있고
 * 여닫는 장치가 없다. 데스크톱 GNB 와 footer 는 루트만 낸다.
 *
 * ── 이력 · 데스크톱 드롭다운 철회 (PUBLIC-SPEC-DETAIL-VISIBILITY-001 · 00 지시 2026-10-15) ──
 *
 * 데스크톱 GNB 의 ⌄ 와 펼침 패널을 걷어냈다. 하위 분류는 카탈로그의 분류 탭이
 * 이미 보여 주고 있어, GNB 에 같은 선택을 한 번 더 두면 여닫는 장치만 늘어난다.
 *
 * 그래서 아래 규칙을 지웠다 — 쓰이지 않는 selector 를 남기면 다음 사람이
 * 「이 기능이 있다」고 읽는다.
 *   .sh-navitem · .sh-sub__open(+::after · ::-webkit-details-marker)
 *   .sh-sub[open] 2건 · .sh-sub__list(+a · a:hover · a[aria-current])
 *
 * .sh-sub 는 남긴다 — 모바일이 `class="sh-sub sh-sub--inline"` 로 함께 쓴다.
 * position·align-items 가 여기서 오므로 지우면 모바일 계층이 틀어진다.
 *
 * 다시 넣게 되면 그때의 설계로 새로 쓴다. 되살릴 유물로 남겨 두지 않는다.
 */
.pub-root .sh-sub{position:relative;display:inline-flex;align-items:center;}

/* 모바일 메뉴 — 이미 펼쳐진 계층. 들여쓰기로 소속을 보인다. */
.pub-root .sh-sub--inline{display:flex;flex-direction:column;padding-left:var(--s5);
  border-left:2px solid var(--pub-line);margin-left:var(--s3);}
.pub-root .sh-sub--inline a{font-size:var(--fs-label);color:var(--pub-ink-3);}
.pub-root .sh-sub--inline a[aria-current="page"]{color:var(--pub-ink);font-weight:var(--fw-b);}