/* ================================================================
   contact_form/form.css
   f_inp_txt / f_inp_ara / f_inp_sbx / f_inp_rdo / f_inp_cbx
   ================================================================ */

/* ── 기본 레이아웃 (디자인은 여기서 수정) ─────────────────────── */
.contact_form_wp {width: 100%; max-width: 1000px; margin: 0 auto; padding: 20px; font-size: var(--cf-font-size-md);}
.cat_form_inner {width: 100%; display: flex; flex-direction: column; gap: 20px;}
.cat_form_btn {display: flex; justify-content: center; align-items: center; gap: 1rem;}
.cf-choice-wrap {display: flex; flex-direction: column; gap: 10px;}
.cf-email-wrap {display: flex; align-items: center; gap: 10px;}
.cf-date-wrap {display: flex; flex-direction: column; gap: 10px;}
.cf-date-inputs {display: flex; align-items: center; gap: 10px;}
.cf-date-inputs .cf-date-input,
.cf-date-inputs .cf-date-start,
.cf-date-inputs .cf-date-end {flex: 1; min-width: 0; width: auto;}
.cf-tilde {font-size: var(--cf-font-size-md); white-space: nowrap; color: var(--point-color-3); padding: 0 2px;}
.cat_form_ck {background-color: red;}

input[type="date"].f_inp_txt {cursor: pointer;}
.f_inp_sbx {cursor: pointer;}

/* ── 텍스트 입력 (f_inp_txt) · 텍스트에어리어 (f_inp_ara) · 셀렉트박스 (f_inp_sbx) ─ */
/* 여기에 스타일 추가 */
.f_inp_txt {width: 100%; height: 58px; border: 1px solid #A1A1A1; background-color: #fff; color: #000; border-radius: 6px; padding: 5px 10px; font-size: var(--cf-font-size-md); line-height: 120%;}
.f_inp_ara {width: 100%; height: 100vh; max-height: 300px; border: 1px solid #A1A1A1; background-color: #fff; color: #000; border-radius: 6px; padding: 10px 10px; font-size: var(--cf-font-size-md); line-height: 120%; outline: none;}
.f_inp_sbx {width: 100%; height: 58px; border: 1px solid #A1A1A1; background-color: #fff; color: #000; border-radius: 6px; padding: 5px 10px; font-size: var(--cf-font-size-md); line-height: 120%;}

/* ================================================================
   라디오 토글 (f_inp_rdo) — 세그먼트 컨트롤 스타일
   선택된 항목: 검정 배경 + 흰 글씨 / 미선택: 글씨만
   ================================================================ */
.f_inp_rdo {
    display: inline-flex;
    background: #f0f0f0;
    border-radius: 6px;
    padding: 4px;
    gap: 2px;
    overflow-y: auto;
}
.f_inp_rdo .cf-opt-label {
    flex: 1;
    text-align: center;
    padding: 12px 18px;
    border-radius: 6px;
    cursor: pointer;
    color: #888;    
    transition: background 0.15s, box-shadow 0.15s, color 0.15s;
    user-select: none;
    white-space: nowrap;
}
.f_inp_rdo .cf-opt-label input[type="radio"] {
    display: none;
}
.f_inp_rdo .cf-opt-label span {
    pointer-events: none;
}
.f_inp_rdo .cf-opt-label.is-active {
    background-color: var(--point-color-1);
    color: var(--white-color-1);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* ================================================================
   체크박스 (f_inp_cbx) — 필 버튼 스타일
   선택됨: 검정 배경 + 흰 체크마크 + 흰 글씨 / 미선택: 테두리만
   ================================================================ */
.f_inp_cbx {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.f_inp_cbx .cf-opt-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border: 1.5px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    color: #555;
    background: #fff;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    user-select: none;
}
.f_inp_cbx .cf-opt-label input[type="checkbox"] {
    display: none;
}
/* 체크 아이콘 박스 */
.f_inp_cbx .cf-opt-label::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 1.5px solid #ccc;
    border-radius: 6px;
    flex-shrink: 0;
    background: #fff;
    transition: background 0.15s, border-color 0.15s;
}
/* 선택된 상태 */
.f_inp_cbx .cf-opt-label.is-active {
    border: 1.5px solid var(--point-color-3);
    background-color: var(--point-color-1);
    color: var(--white-color-1);
    color: #fff;
}
.f_inp_cbx .cf-opt-label.is-active::before {
    border-color: transparent;
    background-color: var(--point-color-3);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: 12px 12px;
    background-repeat: no-repeat;
    background-position: center;
}

/* 버튼 */
.fom_bt1 {width: 100%; height: 58px; display: flex; justify-content: center; align-items: center; border-radius: 6px; background-color: var(--point-color-1); color: var(--white-color-1); font-size: var(--cf-font-size-md); transition: all 0.5s;}
.fom_bt1:hover {background-color: var(--point-color-3);}