/* 상품 목록 위 분류 메뉴(전체 › 여성용 › 흡입형 ▾) 펼침 목록 다듬기 (2026-10-27)
 * 마크업은 js/shop.category.navigation.js(그누보드)가 select를 바꿔 만든 .shop_select_to_html > .current + .menulist > ul > li.option > a
 * 기본 스타일 assets/css/skin/shop/navigation.css(압축본)는 그대로 두고 여기서 덮는다 — theme skin/shop/basic/navigation.skin.php가 불러옴 */

/* 줄 전체: 글씨 15px(기본 16px에서 조금 작게), '전체'와 분류 이름을 같은 높이·세로 가운데로 */
#sct_location { align-items: center; font-size: 15px; line-height: 1.3; }
#sct_location .go_home { display: inline-flex; align-items: center; padding: 4px 0; margin-right: 2px; line-height: inherit; }
#sct_location .shop_select_to_html { cursor: pointer; vertical-align: middle; } /* iOS는 누를 수 있는 요소여야 :hover(펼침)가 탭에 반응 */
/* 제목과 목록 사이 틈(6px)을 지날 때 :hover가 풀려 닫히지 않게 투명 다리 */
#sct_location .shop_select_to_html:hover::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 8px; }

/* 지금 분류 이름 + 아래 화살표 */
#sct_location .shop_select_to_html .category_title {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 4px 6px; border-radius: 8px; line-height: inherit;
    color: #1e1e1e; font-weight: 600; transition: background-color .15s;
}
#sct_location .shop_select_to_html:hover .category_title { background-color: rgba(0, 0, 0, .05); }
#sct_location .shop_select_to_html .category_title svg { flex: 0 0 auto; color: #9a9a9a; transition: transform .2s; }
#sct_location .shop_select_to_html:hover .category_title svg { transform: rotate(180deg); color: #1e1e1e; }

/* 펼침 목록 — 둥근 카드, 한 줄 목록(8개마다 옆 칸으로 나누던 것 대신 세로로, 길면 안에서 스크롤) */
#sct_location .shop_select_to_html .menulist {
    display: block; visibility: hidden; opacity: 0; transform: translateY(-4px); pointer-events: none;
    top: 100%; margin-top: 6px; padding: 6px;
    min-width: 168px; max-width: calc(100vw - 32px); max-height: min(60vh, 420px); overflow-y: auto; overscroll-behavior: contain;
    background-color: #ffffff; border: 1px solid #ececec; border-radius: 14px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .12), 0 2px 6px rgba(0, 0, 0, .06);
    transition: opacity .16s ease-out, transform .16s ease-out, visibility 0s linear .16s;
}
#sct_location .shop_select_to_html:hover .menulist {
    visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto;
    transition: opacity .16s ease-out, transform .16s ease-out, visibility 0s;
}
#sct_location .shop_select_to_html .menulist ul { margin: 0; } /* Bootstrap ul 아래 여백(1rem) 때문에 아래쪽만 길어 보이던 것 — 위아래 모두 카드 안쪽 6px */
#sct_location .shop_select_to_html .menulist ul.wide { display: block !important; min-height: 0; }
#sct_location .shop_select_to_html .menulist ul.left-border { border-left: 0; }

#sct_location .shop_select_to_html .option { padding: 0; border-radius: 9px; }
#sct_location .shop_select_to_html .option a {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 12px; font-size: 14px; line-height: 1.3; color: #444444;
}
#sct_location .shop_select_to_html .option:hover,
#sct_location .shop_select_to_html .option.focus { background-color: #f5f5f5; }
#sct_location .shop_select_to_html .option.selected { background-color: #f2f2f2; }
#sct_location .shop_select_to_html .option.selected a { color: #111111; font-weight: 700; }
/* 지금 분류는 오른쪽에 체크 표시 */
#sct_location .shop_select_to_html .option.selected a::after {
    content: ''; flex: 0 0 auto; width: 14px; height: 14px;
    background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}