/* 공용 — 문의폼 커스텀 드롭다운 (데스크탑 전용; 모바일은 네이티브 <select> 유지)
   - 닫힌 트리거는 .section-inquiry__input--select 클래스를 그대로 써서 필드와 디자인 동일
   - 펼친 목록(panel) 배경/글자색은 custom-select.js 가 네이티브 select 계산값을 주입 → 스킨별 색 자동 일치 */

.section-inquiry__cselect { position: relative; }

/* 데스크탑: 네이티브 숨기고 커스텀 표시 (스킨의 .section-inquiry-skin-N .section-inquiry__input{display:block}
   (0,2,0)를 이기도록 (0,2,1) 명시도) */
@media (min-width: 768px) {
    .section-inquiry__cselect > select.section-inquiry__input { display: none; }
}
/* 모바일: 커스텀 숨기고 네이티브 표시 */
@media (max-width: 767px) {
    .section-inquiry__cselect-trigger,
    .section-inquiry__cselect-panel { display: none !important; }
}

/* 트리거 레이아웃 — JS가 원본 select 의 className 을 복사하므로 배경/높이/테두리/패딩/화살표 등은
   각 스킨 필드 스타일을 그대로 상속한다. display 만 스킨의 block(0,2,0)을 이기도록 (0,3,0)으로 덮음
   (클래스 2번 반복 트릭 → 스킨 클래스명에 의존하지 않음) */
.section-inquiry__cselect .section-inquiry__cselect-trigger.section-inquiry__cselect-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    text-align: left;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
}
.section-inquiry__cselect-trigger .cselect-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.section-inquiry__cselect-trigger.is-placeholder .cselect-label { opacity: 0.6; }

.section-inquiry__cselect-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 50;
    margin: 0;
    padding: 4px;
    list-style: none;
    max-height: 240px;
    overflow-y: auto;
    border: var(--inq-input-border, 1px) solid var(--inq-input-border-color, #d1d1d1);
    border-radius: var(--inq-input-radius, 4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
    /* background-color / color 는 JS 가 네이티브 select 계산값으로 주입 */
    display: none;
}
/* 위로 펼침(아래 공간 부족·하단 고정바 스킨 대응) */
.section-inquiry__cselect.is-up .section-inquiry__cselect-panel {
    top: auto;
    bottom: calc(100% + 4px);
}
.section-inquiry__cselect.is-open .section-inquiry__cselect-panel { display: block; }

.section-inquiry__cselect-option {
    padding: 9px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: var(--inq-input-font-size, 15px);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 라이트·다크 배경 모두에서 보이는 반투명 회색 오버레이로 hover/활성 표시 */
.section-inquiry__cselect-option:hover,
.section-inquiry__cselect-option.is-active {
    box-shadow: inset 0 0 0 999px rgba(128, 128, 128, 0.18);
}
.section-inquiry__cselect-option.is-selected {
    box-shadow: inset 0 0 0 999px rgba(128, 128, 128, 0.28);
    font-weight: 600;
}