/* [김수현 11/9] 상단탭(홈~이벤트) 맨 오른쪽 카테고리 단추 + 말풍선(A안 · 김수현 11/9 결정 · 시안 data/작업/김수현/시안/카테고리말풍선_몰얹기_A_1109.js · 처음 비교 시안 data/작업/김수현/시안/메인3건_베스트자동·검색판·카테고리말풍선_시안_1109.html)
   틀 = outline/header/standard.html(.gs-cbwrap · #gsCatBtn · #gsCatBub) · 목록 채우기·열고 닫기 = js/gs_catbub.js
   - 단추 = 하단 네비 «카테고리» 아이콘(img/gs/ic_bar_category.png) · 글자 없음 · 상단탭 선택 색 #00785F · 탭 글자 가운데와 줄 맞춤(탭 글자 아래 투명 밑줄 3px 를 뺀 높이의 가운데)
   - 열리면 = 진초록 동그라미 24px + 흰 ✕(목록 아이콘이 돌며 바뀜)
   - 말풍선 = 흰 바탕 · 진초록 테두리 · 꼬리는 단추 쪽 · 오른쪽 붙임 · 폭 = 이름 길이만큼(두 칸 · 줄바꿈 없음) · 줄 43px · 글자 14.5px(400px 이하 13px) · 이름 앞 아이콘 없음
   - 마우스 올림(PC)·누름(휴대폰) = 이름·› 진초록 #00785F
   - 머리(header)가 넘침 숨김이라 열린 동안만 풀어 준다(안 풀면 말풍선이 잘린다) */

.gs-cbwrap { position: relative; }
.gs-cbwrap > #gsTabs { padding-right: 52px; }   /* 마지막 탭이 단추 밑으로 들어가지 않게(좁은 휴대폰에선 탭이 단추 밑으로 밀려 옆으로 넘김) */

.gs-cbbtn { position: absolute; right: 0; top: 0; bottom: 3px; z-index: 3; width: 48px; margin: 0; padding: 0; border: 0; background: #fff;
  display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.gs-cbbtn::before { content: ''; position: absolute; left: -16px; top: 0; bottom: 0; width: 16px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff); pointer-events: none; }
.gs-cbbtn > span { position: relative; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; transition: background .18s; }
.gs-cbbtn i { display: block; width: 21px; height: 21px; background: #00785F;
  -webkit-mask: url(../img/gs/ic_bar_category.png) center / contain no-repeat; mask: url(../img/gs/ic_bar_category.png) center / contain no-repeat;
  transition: opacity .18s, transform .18s; }
.gs-cbbtn b { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: rotate(-90deg); transition: opacity .18s, transform .18s; }
.gs-cbbtn b::before, .gs-cbbtn b::after { content: ''; position: absolute; width: 11px; height: 1.7px; border-radius: 2px; background: #fff; }
.gs-cbbtn b::before { transform: rotate(45deg); }
.gs-cbbtn b::after { transform: rotate(-45deg); }
.gs-cbbtn[aria-expanded="true"] > span { background: #00785F; }
.gs-cbbtn[aria-expanded="true"] i { opacity: 0; transform: rotate(90deg); }
.gs-cbbtn[aria-expanded="true"] b { opacity: 1; transform: none; }
.gs-cbbtn:active > span { transform: scale(.9); }
.gs-cbbtn:focus-visible { outline: 2px solid #00785F; outline-offset: -6px; border-radius: 10px; }

#header_wrap header:has(.gs-cbub:not([hidden])) { overflow: visible !important; }

.gs-cbub { position: absolute; top: calc(100% + 8px); right: 8px; z-index: 400; width: max-content; max-width: calc(100% - 16px); box-sizing: border-box;
  padding: 2px 16px; border: 1.5px solid #00785F; border-radius: 16px; background: #fff; box-shadow: 0 14px 28px -10px rgba(36, 25, 15, .28);
  letter-spacing: -0.03em; animation: gsCbIn .16s ease-out; transform-origin: calc(100% - 20px) -7px; }
.gs-cbub[hidden] { display: none; }
.gs-cbub::before { content: ''; position: absolute; right: 13px; top: -8px; width: 13px; height: 13px; transform: rotate(45deg); border-radius: 2px 0 0 0;
  background: #fff; border-left: 1.5px solid #00785F; border-top: 1.5px solid #00785F; }
@keyframes gsCbIn { from { opacity: 0; transform: translateY(-3px) scale(.97); } to { opacity: 1; transform: none; } }
.gs-cbub ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, max-content); column-gap: 22px; }
.gs-cbub li { min-width: 0; border-bottom: 1px solid #ECE5DB; }
.gs-cbub li:nth-last-child(-n+2):nth-child(odd), .gs-cbub li:last-child { border-bottom: 0; }   /* 맨 아래 줄만 선 없음(개수가 홀수면 마지막 하나) */
.gs-cbub a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 43px; padding: 4px 0; box-sizing: border-box;
  font-size: 14.5px; font-weight: 700; color: #24190F; text-decoration: none; }
.gs-cbub .nm { flex: none; white-space: nowrap; transition: color .15s; }
.gs-cbub .ar { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: #8A7C6C; transition: color .15s, transform .15s; }
@media (hover: hover) {
  .gs-cbub a:hover .nm, .gs-cbub a:hover .ar { color: #00785F; }
  .gs-cbub a:hover .ar { transform: translateX(2px); }
}
.gs-cbub a:active .nm, .gs-cbub a:active .ar { color: #00785F; }
.gs-cbub a:focus-visible { outline: 2px solid #00785F; outline-offset: 2px; border-radius: 6px; }
@media (max-width: 400px) { .gs-cbub a { font-size: 13px; } }   /* 가장 긴 «닭가슴살 도시락 48종» 14.5px=121px · 13px=109px(11/9 실측) */
@media (prefers-reduced-motion: reduce) { .gs-cbub { animation: none; } .gs-cbbtn i, .gs-cbbtn b, .gs-cbbtn > span { transition: none; } }