/* =========================================================
   custom.css  —  유지보수 추가 스타일 (style.css 이후 로드)
   목적: 필터교체문의 / 자료실 페이지의 폰트 위계를
         기존 사이트(f-body-*, f-heading-*)에 맞게 상향.
   ※ 각 페이지의 인라인 <style> 보다 나중에 로드되며,
     더 구체적인 선택자로 우선 적용한다.
   ========================================================= */

/* ---------------------------------------------------------
   1. 필터 교체 문의 (pages/contact/filter-inquiry.php)
   --------------------------------------------------------- */

/* 안내 박스: 0.88rem → f-body-2 위계 */
.no-sub-contact .filter-inquiry-notice {
    font-size: clamp(1.3rem, .3236245955vw + 1.1786407767rem, 1.6rem);
    line-height: 1.75;
    padding: 1.4rem 1.6rem;
    margin-bottom: 2rem;
}
.no-sub-contact .filter-inquiry-notice ul {
    margin: .6rem 0 0 1.4rem;
}
.no-sub-contact .filter-inquiry-notice li {
    margin-bottom: .35rem;
}

/* 섹션 라벨(전처리/결제 정보 등): 0.78rem → f-body-4 위계 (uppercase 유지) */
.no-sub-contact .no-form-section-label {
    font-size: clamp(1.2rem, .2588996764vw + 1.1029126214rem, 1.4rem);
    color: #777;
    margin: 2.2rem 0 .7rem;
    padding-bottom: .45rem;
}

/* 라디오 / 체크 라벨: 0.95rem → input 폰트와 통일(f-body-3 급) */
.no-sub-contact .no-form-radio-group label,
.no-sub-contact .no-form-check-group label {
    font-size: clamp(1.4rem, .1294498382vw + 1.3514563107rem, 1.6rem);
    gap: .5rem;
}
.no-sub-contact .no-form-radio-group input[type="radio"],
.no-sub-contact .no-form-check-group input[type="checkbox"] {
    width: 1.5rem;
    height: 1.5rem;
}

/* 폼 라벨 / 부가 안내(small): 본문 위계로 상향 */
.no-sub-contact .no-form-control label {
    font-size: clamp(1.4rem, .1294498382vw + 1.3514563107rem, 1.6rem);
}
.no-sub-contact .no-form-control small {
    font-size: clamp(1.2rem, .2588996764vw + 1.1029126214rem, 1.4rem);
}

/* ---------------------------------------------------------
   2. 자료실 (pages/cs/library.php)
   --------------------------------------------------------- */

/* 자료실 — 브랜드(대분류)별 섹션 */
.no-sub-library .library-group {
    margin-bottom: 4rem;
}
.no-sub-library .library-group:last-child {
    margin-bottom: 0;
}
/* 브랜드 소제목 (페이지 제목 Library 보다 한 단계 작게) */
.no-sub-library .library-group-title {
    font-size: clamp(1.8rem, .4vw + 1.6rem, 2.2rem);
    font-weight: 700;
    line-height: 1.4;
    color: #111;
    margin-bottom: 1.2rem;
    word-break: keep-all;
}
/* 자료실 — 브랜드별 ul/li 리스트 */
.no-sub-library .library-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 2px solid #111;
}
/* 2열 그리드: 자료명(1fr) + 우측 상태(auto, 항상 같은 라인 정렬) */
.no-sub-library .library-item {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1.6rem;
    padding: 1.6rem .4rem;
    border-bottom: 1px solid #e0e0e0;
}
/* 자료명 — f-body-1 급으로 확실히 크게 */
.no-sub-library .library-title {
    font-size: clamp(1.6rem, .3236245955vw + 1.4786407767rem, 2rem);
    line-height: 1.5;
    color: #222;
    min-width: 0;            /* 긴 텍스트 줄바꿈 허용 */
    word-break: keep-all;
}
/* 우측 영역(다운로드/준비중) — 항상 오른쪽 끝 고정 */
.no-sub-library .library-download,
.no-sub-library .library-empty {
    justify-self: end;
}
/* 다운로드 버튼 (아이콘 + 텍스트) */
.no-sub-library .library-download {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .8rem 1.4rem;
    border: 1px solid #005baa;
    border-radius: 6px;
    color: #005baa;
    text-decoration: none;
    font-size: clamp(1.3rem, .3vw + 1.2rem, 1.5rem);
    font-weight: 600;
    white-space: nowrap;
    transition: all .15s;
}
.no-sub-library .library-download:hover { background: #005baa; color: #fff; }
.no-sub-library .library-download svg { width: 1.7rem; height: 1.7rem; }
/* 준비중 표시 */
.no-sub-library .library-empty {
    color: #aaa;
    font-size: clamp(1.3rem, .3vw + 1.2rem, 1.5rem);
    white-space: nowrap;
}

@media (max-width: 768px) {
    .no-sub-library .library-download-text { display: none; } /* 모바일은 아이콘만 */
}

/* ---------------------------------------------------------
   3. 필터 교체 접수 — 조건 분기형 단계 폼
   --------------------------------------------------------- */

/* 단계 블록 */
.fi-step {
    margin-bottom: 2.5rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid #ececec;
}
.fi-step:last-of-type { border-bottom: 0; }
.fi-step[hidden] { display: none !important; }

.fi-step-title {
    display: flex;
    align-items: center;
    gap: .8rem;
    font-size: clamp(1.6rem, .4530744337vw + 1.43rem, 2rem);
    font-weight: 700;
    color: #111;
    margin-bottom: 1.2rem;
}
.fi-step-title .fi-step-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    background: #005baa;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    flex-shrink: 0;
}
.fi-step-desc {
    font-size: clamp(1.3rem, .3236245955vw + 1.18rem, 1.6rem);
    color: #666;
    line-height: 1.7;
    margin-bottom: 1.2rem;
}

/* 라디오/체크 옵션 (큰 버튼형) */
.fi-options { display: flex; flex-wrap: wrap; gap: 1rem; }
.fi-option {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: 1.1rem 1.6rem;
    border: 1px solid #d3d8e0;
    border-radius: 8px;
    cursor: pointer;
    font-size: clamp(1.4rem, .12vw + 1.35rem, 1.6rem);
    color: #333;
    transition: all .15s;
    user-select: none;
}
.fi-option:hover { border-color: #005baa; }
.fi-option input { width: 1.6rem; height: 1.6rem; accent-color: #005baa; cursor: pointer; }
.fi-option:has(input:checked) { border-color: #005baa; background: #f1f7ff; font-weight: 600; }

/* 안내 박스 (분기 노출) */
.fi-notice {
    background: #f4f8ff;
    border-left: 4px solid #005baa;
    border-radius: 0 6px 6px 0;
    padding: 1.4rem 1.6rem;
    margin-top: 1.4rem;
    font-size: clamp(1.3rem, .3236245955vw + 1.18rem, 1.6rem);
    color: #333;
    line-height: 1.75;
}
.fi-notice.warn { background: #fff6f0; border-left-color: #e07b39; }
.fi-notice strong { color: #005baa; }
.fi-notice.warn strong { color: #d2691e; }
.fi-notice ul { margin: .5rem 0 0 1.4rem; }
.fi-notice li { margin-bottom: .3rem; }

/* 체크박스 리스트(확인 항목) */
.fi-checklist { margin-top: 1.2rem; display: flex; flex-direction: column; gap: .8rem; }
.fi-check {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    font-size: clamp(1.3rem, .3236245955vw + 1.18rem, 1.6rem);
    color: #333;
    line-height: 1.6;
    cursor: pointer;
}
.fi-check input { margin-top: .35rem; width: 1.6rem; height: 1.6rem; accent-color: #005baa; flex-shrink: 0; cursor: pointer; }

/* 참고 이미지 */
.fi-ref-images {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin: 1.2rem 0;
}
.fi-ref-images figure { margin: 0; }
.fi-ref-images img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid #e2e2e2;
    display: block;
}
.fi-ref-images figcaption {
    margin-top: .5rem;
    font-size: clamp(1.2rem, .25vw + 1.1rem, 1.4rem);
    color: #777;
    text-align: center;
}

/* 매장정보 그리드 */
.fi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem 1.6rem; }
.fi-field { display: flex; flex-direction: column; gap: .5rem; }
.fi-field.full { grid-column: 1 / -1; }
.fi-field label {
    font-size: clamp(1.3rem, .3236245955vw + 1.18rem, 1.5rem);
    font-weight: 600;
    color: #333;
}
.fi-field label .req { color: #e23b3b; margin-left: .2rem; }
.fi-field input[type="text"],
.fi-field input[type="tel"],
.fi-field input[type="date"],
.fi-field select,
.fi-field textarea {
    width: 100%;
    padding: 1rem 1.2rem;
    border: 1px solid #d3d8e0;
    border-radius: 6px;
    font-size: clamp(1.4rem, .12vw + 1.35rem, 1.6rem);
    color: #333;
    background: #fff;
}
.fi-field textarea { min-height: 9rem; resize: vertical; }
.fi-inline-check {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: clamp(1.2rem, .25vw + 1.1rem, 1.4rem); color: #666; font-weight: 400;
    cursor: pointer;
}

/* 출장비 자동 표시 */
.fi-trip-fee {
    margin-top: 1.2rem;
    padding: 1.2rem 1.6rem;
    border-radius: 8px;
    background: #eef5ff;
    font-size: clamp(1.4rem, .12vw + 1.35rem, 1.7rem);
    color: #004a8f;
    font-weight: 600;
}

/* 사진 첨부 — 커스텀 버튼 + 썸네일 + 개별 삭제 */
.fi-upload { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.fi-upload-btn {
    display: inline-flex; align-items: center; gap: .6rem;
    padding: 1rem 1.6rem;
    border: 1px solid #005baa; border-radius: 8px;
    background: #f1f7ff; color: #005baa; font-weight: 600;
    font-size: clamp(1.3rem, .3vw + 1.2rem, 1.5rem);
    cursor: pointer; transition: all .15s;
}
.fi-upload-btn:hover { background: #005baa; color: #fff; }
.fi-upload-count { font-size: clamp(1.2rem, .25vw + 1.1rem, 1.4rem); color: #888; }
.fi-preview { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.2rem; }
.fi-thumb { position: relative; width: 9rem; height: 9rem; }
.fi-thumb img {
    width: 100%; height: 100%; object-fit: cover;
    border-radius: 8px; border: 1px solid #ddd; display: block;
}
.fi-thumb-del {
    position: absolute; top: -.7rem; right: -.7rem;
    width: 2.2rem; height: 2.2rem; border-radius: 50%;
    background: #e23b3b; color: #fff; border: 2px solid #fff;
    font-size: 1.5rem; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}

/* 제출 영역 */
.fi-submit-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem;
    margin-top: 1rem;
}
/* 캡차: 어두운 배경 figure 위 흰 글씨 보이도록 */
.fi-captcha { display: flex; align-items: center; gap: .8rem; flex-wrap: nowrap; }
.fi-captcha figure {
    margin: 0;
    width: 13rem; height: 4.6rem; padding: .4rem;
    background: #2b2b2b; border: 1px solid #d3d8e0; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; overflow: hidden;
}
/* 전역 img{object-fit:cover} 무력화 — 캡차 비율 유지 */
.fi-captcha figure img {
    max-width: 100%; max-height: 100%;
    width: auto; height: auto;
    object-fit: contain; display: block;
}
.fi-captcha input {
    padding: 1rem 1.2rem; border: 1px solid #d3d8e0; border-radius: 6px;
    font-size: clamp(1.4rem, .12vw + 1.35rem, 1.6rem);
    flex: 1 1 22rem; min-width: 0; height: 4.6rem;
}
.fi-btn-reload {
    width: 4.6rem; height: 4.6rem; flex-shrink: 0;
    border: 1px solid #d3d8e0; border-radius: 6px;
    background: #fff; cursor: pointer; color: #555;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
}
.fi-btn-reload:hover { background: #f4f8ff; color: #005baa; }
.fi-btn-submit {
    padding: 1.3rem 3rem; background: #005baa; color: #fff; border: 0;
    border-radius: 8px; font-size: clamp(1.5rem, .2vw + 1.4rem, 1.8rem);
    font-weight: 700; cursor: pointer; transition: background .15s;
}
.fi-btn-submit:hover { background: #004a8f; }
.fi-btn-submit:disabled { background: #9bb8d4; cursor: default; }

/* ---- 라디오/체크 미건 스타일 강화 ---- */
/* 라디오(버튼형): 선택 시 파란 채움 */
.fi-option:has(input[type="radio"]:checked) {
    border-color: #005baa; background: #005baa; color: #fff; font-weight: 600;
}
.fi-option input[type="radio"] { accent-color: #fff; }
.fi-option:has(input:checked) input { accent-color: #fff; }
/* 커스텀 체크박스 (체크리스트/동의/옵션 공통) */
.fi-check input[type="checkbox"],
.fi-option input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    width: 2rem; height: 2rem;
    flex-shrink: 0;
    border: 1.5px solid #c2cad6;
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
    transition: all .15s;
    margin: 0;
}
.fi-check input[type="checkbox"] { margin-top: .15rem; }
.fi-check input[type="checkbox"]:hover,
.fi-option input[type="checkbox"]:hover { border-color: #005baa; }
.fi-check input[type="checkbox"]:checked,
.fi-option input[type="checkbox"]:checked {
    background: #005baa; border-color: #005baa;
}
/* 흰색 체크표시(✓) */
.fi-check input[type="checkbox"]:checked::after,
.fi-option input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 50%; top: 46%;
    width: .5rem; height: .9rem;
    border: solid #fff;
    border-width: 0 .25rem .25rem 0;
    transform: translate(-50%, -55%) rotate(45deg);
}
.fi-check input[type="checkbox"]:focus-visible,
.fi-option input[type="checkbox"]:focus-visible {
    outline: 2px solid #80b3e0; outline-offset: 1px;
}

/* ---- 지역 드롭다운(.fi-dropdown) 라이트 테마 오버라이드 ---- */
.fi-dropdown {
    border: 1px solid #d3d8e0; border-radius: 6px; height: auto;
    background: #fff;
}
.fi-dropdown .select {
    padding: 1rem 1.2rem;
    font-size: clamp(1.4rem, .12vw + 1.35rem, 1.6rem); color: #333;
}
.fi-dropdown .dropdown-menu {
    background: #fff; border: 1px solid #d3d8e0; border-top: 0;
    box-shadow: 0 6px 16px rgba(0,0,0,.08);
}
.fi-dropdown .dropdown-menu li {
    padding: 1.1rem 1.4rem; color: #333;
    font-size: clamp(1.3rem, .3vw + 1.2rem, 1.5rem);
}
.fi-dropdown .dropdown-menu li:hover { background: #f1f7ff; color: #005baa; }

/* ---- flatpickr 입력칸(방문 희망일) ---- */
.fi-field input#visit_date {
    cursor: pointer;
    background: #fff;            /* readonly 회색조 방지 */
    -webkit-text-fill-color: #333;
    opacity: 1;
}
/* flatpickr 달력 팝업 폰트(rem 베이스 1rem=10px라 살짝 키움) */
.flatpickr-calendar { font-size: 1.4rem; }

@media (max-width: 768px) {
    .fi-grid { grid-template-columns: 1fr; }
    .fi-ref-images { grid-template-columns: 1fr; }
    .fi-submit-row { flex-direction: column; align-items: stretch; }
    .fi-captcha input { flex: 1 1 auto; }
    .fi-btn-submit { width: 100%; }
}

/* ---------------------------------------------------------
   4. 일반문의(어두운 contact 섹션) 입력 글자 가독성
   — 어두운 배경에 입력 텍스트/캡차 글자가 안 보이는 문제 보정
   --------------------------------------------------------- */
.no-main-contact .no-form-control input,
.no-main-contact .no-form-control textarea,
.no-main-contact .no-form-captcha input {
    color: #fff;
}
.no-main-contact .no-form-control input::placeholder,
.no-main-contact .no-form-control textarea::placeholder,
.no-main-contact .no-form-captcha input::placeholder {
    color: rgba(255, 255, 255, .5);
}