/* 공통: 탭 컨텐츠 제어 */
   .tab-box {
    display: none;
}
.tab-box.on {
    display: block;
}
/* 드롭박스 기본 스타일 */
.tabs-dropdown {
    display: none;
    margin-bottom: 16px;
}
.tabs-dropdown select {
    width: 100%;
    padding: 12px 14px;
    font-size: 16px;
    line-height: 1.4;
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: #fff;
    /* iOS 기본 화살표 말고 커스텀 하고 싶으면 appearance 없애면 됨 */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="%23222"><path d="M5 7l5 5 5-5"/></svg>');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 16px;
    padding-right: 40px;
    font-weight: 500;
    color: #222;
}

/* PC: 기존 탭 보이기 */
.tabs-box {
    display: block;
}

/* 반응형: 모바일에서 셀렉트만 보이게 */
@media (max-width: 768px) {
    .tabs-box {
        display: none; /* 가로 탭 숨김 */
    }
    .tabs-dropdown {
        display: block;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }
}