/* ==========================================================================
설문조사 페이지 전체 CSS
========================================================================== */

.vote_wrap{margin:0 auto;padding-bottom:120px;max-width:640px;}
.vote_wrap *{font-family: 'bodyfriendM';}

/* 1. 기본 레이아웃 및 카드 */
.user-info-card { margin-top:16px;padding: 0 16px; }
.question-card{margin-top:32px;padding:0 16px;}
.question-type  { display:none; font-size: 12px; color: #888; margin-bottom: 12px; }
.form-error     { color: #d33; font-size: 12px; margin-top: 4px; display: none; }
.is-hidden      { display: none !important; }

.user-info-title,
.question-title{font-weight: bold; margin-bottom: 4px;line-height:1.6; }
.question-title > b{color:#B4875E;font-weight:bold;}
.question-title.step3{padding:12px 16px 0 16px;border-top:1px solid #f3f5f9;}
.question-title.title{padding-top:12px;border-top:1px solid #f3f5f9; letter-spacing: 1px;}
.question-title.sub{font-size:16px;border:0;}
.question-card .question-title{margin-top:inherit;}
.question-card .tip{font-size:14px;margin-top:8px;}
.question-card .tip > i{display:inline-block;margin-right:4px;padding:2px 6px;border-radius: 40px;color:#fff;font-size:11px; border: 1px solid #FFF;  background: linear-gradient(90deg, #8072E3 0%, #FF7CFF 100%);}
/* 사용자 정보 */
.user-info-title{ font-size:18px; }
.user-info-card .form-group dl{display:flex; flex-wrap: wrap;}
.user-info-card .form-group dt,
.user-info-card .form-group dd{margin:7.5px 0;}
.user-info-card .form-group dt{width:30%;color:#8A8B8D;}
.user-info-card .form-group dd{width:70%;}

.question-title{font-size:18px;}
.eval-empty-msg{display: block; margin:15px 0; padding: 18px;border-radius: 8px; border: 1px solid #F3F5F9; background: #F3F5F9;color:#999; font-size:16px;}

/* 2. 라디오/체크박스 기본 아이콘 숨김 */
input[type="checkbox"],
input[type="radio"] {width: 0 !important; height: 0 !important; opacity: 0 !important;padding: 0 !important; border: 0 !important; margin: 0 !important;position:absolute;left:-9999px;}

/* 3. 모든 선택지 라벨 — 버튼 형태 */
.option-label > label {display: inline-block;padding: 10px 16px 10px 26px;margin: 2px; border: 1px solid #ddd; border-radius: 20px;
cursor: pointer; font-size: 16px; transition: all 0.2s;background-color: #fff; text-indent: 0 !important;}
input[type="checkbox"]:checked + label,
input[type="radio"]:checked + label {background-color: #0793FF;color: #fff;border-color:#0793FF;}
/* 라벨 내부 기본 아이콘(::before) 제거 */
.option-label > label::before { display: none !important; }
.question-card .option-label > label{padding:12px 5px;width:100%;text-align:center;background:#F3F5F9;color:#999; border-color:#f3f5f9; border-radius: 14px;}

.question-options{display: grid;grid-gap: 8px;}
.question-options.row2{grid-template-columns: repeat(2, 1fr);}
.question-options.row3{grid-template-columns: repeat(3, 1fr);}

.subjective-input{padding:10px;width:100%;min-height:48px;border: 1px solid #F3F5F9;border-radius:8px;font-size:14px;}


/* 4. COURSE_STEP */

/* 1단계: 카테고리 — 버튼형 */
.course-category-options { display: flex; flex-wrap: wrap; margin-bottom: 8px; gap: 8px;}
.course-category-options input + label {display: inline-block; padding: 16px 20px !important; background:#F3F5F9;color:#999; border-color:#f3f5f9; border-radius:40px !important; cursor: pointer; font-size: 16px; text-indent: 0 !important;}
.course-category-options input + label::before { display: none !important; }
.course-category-options input:checked + label { background: #333; color: #fff; border-color: #333; }

/* 2단계: 프로그램 목록 — 체크박스 아이콘 */
.course-program-options { display:flex;flex-wrap:wrap;justify-content: space-around;margin-bottom: 8px; }
.course-program-options .option-label { display: flex; margin-bottom: 8px;width:calc(50% - 10px); word-break: keep-all;}
.course-program-options input[type="checkbox"],
.course-program-options input[type="radio"] {width: 0 !important; height: 0 !important; opacity: 0 !important;padding: 0 !important; border: 0 !important; margin: 0 !important;}
.course-program-options input[type="checkbox"] + label {
padding:12px 20px 12px 30px;cursor: pointer; border-radius: 8px;color:#000;display:flex;align-items: center;
text-align:left;border: 1px solid #F3F3F3;background:url(https://bodyfriend.speedgabia.com/img/bodyfriend/vote/vote733/icon-chk-off.svg)no-repeat 10px center;}
.course-program-options input[type="checkbox"]:checked + label {background:url(https://bodyfriend.speedgabia.com/img/bodyfriend/vote/vote733/icon-chk-on.svg)no-repeat 10px center;color: #0793FF;border-color: transparent;border: 1px solid #0793FF;}

/* 3단계: 평가 카드 내 시간 선택 라디오 — 버튼형 */
.course-eval-time-options { display: grid;grid-template-columns: repeat(3, 1fr);gap: 8px; }
.course-eval-time-options input + label {
padding: 10px 20px; color:#999; background:#F3F5F9;borer-radius:20px;border-color:#F3F5F9;
cursor: pointer; font-size: 14px; text-indent: 0 !important;
}
.course-eval-time-options input + label::before { display: none !important; }
.course-eval-time-options input:checked + label { background: #0793FF; color: #fff; border-color: #0793FF; }

/* 평가 카드 (아코디언) */
.course-eval-card { margin-bottom: 10px;border-radius:8px; transition: all 0.3s; }
.course-eval-card.is-closed .course-eval-content { display: none; }
.course-eval-title { cursor: pointer; font-weight: bold; padding:15px;background:#F3F5F9;border-radius:8px;}
.course-eval-title::after { content: '';width:14px;height:14px;background:url(https://bodyfriend.speedgabia.com/img/bodyfriend/icon/icon_arrow_up.svg)no-repeat center; float: right; }
.course-eval-card.is-closed .course-eval-title::after { transform:rotate(180deg); }
.course-eval-card .course-eval-content{margin-top:10px;padding:15px;border:1px solid #F3F5F9;border-radius:8px;}
.course-eval-row {margin-bottom: 8px; }
.course-eval-row-label { display: block;margin-top:16px;margin-bottom:8px; font-size: 14px; color: #000; min-width: 84px; }


/* 5. 별점 */
.star-rating {display: grid; gap: 16px; grid-template-columns: repeat(5, 1fr); max-width:320px; }
.star-rating .star-btn {
display:block;padding:0;width: 45px; height:45px; line-height:45px;border: none; background: transparent;
cursor: pointer; font-size: 45px; color: #ddd;text-align:center;
}
.star-rating .star-btn.is-filled { color: #0793FF; }


/* 6. 색상 선택 */
.color-option-item { position:relative; text-align: center; cursor: pointer; }
.color-option-item img {margin:0 auto;max-height:133px; border-radius: 8px;display: block; margin-bottom: 6px;}
.color-option-item input + label{border:1px solid #333;color:#000;font-size:16px;}
.color-option-item input:checked + label{border:1px solid #0793FF;background:#fff;color:#0793FF;font-weight:bold;}
.color-option-item label { font-size: 13px; display: block !important; border-radius:10px;}
.color-option-item label em{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);}
.btn-submit{display:block;margin-top:20px;margin-left:16px;padding:10px;max-width:calc(640px - 32px);width:100%;line-height:48px;background:#0793FF;color:#fff;font-size:14px;border-radius:8px;text-align:center;}

/* 8. 파일 첨부 */
.input_file_wrap{display:flex;margin-top:12px;}
.input_file_wrap .btn_file{position:relative;display:inline-block;margin-right:8px;padding:20px;width:80px;height:80px;text-indent:-9999px;border: 1px solid #F3F5F9;background:url(https://bodyfriend.speedgabia.com/img/bodyfriend/vote/ico_add_photo.svg)no-repeat center;border-radius:12px;cursor:pointer;}
.input_file_wrap .btn_file.hdtxt{display:none}
.input_file_wrap .btn_file.loading{opacity:.5;cursor:not-allowed;pointer-events:none}
.input_file_wrap .btn_file.loading::after{content:'';display:inline-block;width:12px;height:12px;margin-left:8px;border:2px solid #ccc;border-top-color:#666;border-radius:50%;vertical-align:middle;animation:file-upload-spin .7s linear infinite}
@keyframes file-upload-spin {
to{transform:rotate(360deg)}
}
input.get_file{display:none!important}
.file_list{display:flex;flex-wrap:wrap;margin-top:0;}
.file_list > div{position:relative;width:80px;height:80px;border-radius:12px;overflow:hidden;border:1px solid #F3F5F9;background:#fff;gap:8;}
.file_list > div img{display:block;width:100%;height:100%;object-fit:cover}
.file_list > div .file_name,.file_list > div .file_size{position:absolute;left:0;right:0;bottom:0;padding:2px 4px;font-size:9px;line-height:1.3;color:#fff;background:#0000008c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file_list > div .file_name{bottom:14px}
.file_list > div .remove_file{position:absolute;top:4px;right:4px;width:20px;height:20px;background:#000 url(https://bodyfriend.speedgabia.com/img/bodyfriend/icon/icon_close_white.svg) no-repeat center / 10px;color:transparent;border-radius:50%;border:none;font-size:0;cursor:pointer;display:flex;align-items:center;justify-content:center;text-decoration:none}

/* 7. 모달 */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 9999;
    display: flex; align-items: center; justify-content: center;
}
.modal-overlay.is-hidden { display: none; }
.modal-content { background: #fff; width: 80%; max-width: 320px; border-radius: 12px; text-align: center; overflow: hidden;}
/* 텍스트 영역 */
.modal-body { padding: 24px 20px; font-size: 14px;color: #333; line-height: 1.5;}
/* 버튼 그룹 영역 */
.btn-group { display: flex; border-top: 1px solid #eee;}
.btn-group button { flex: 1; padding: 16px 0;border: none; background: #fff; font-size: 15px;color: #7663a8; cursor: pointer;}

/* 버튼 사이 구분선 (버튼이 2개일 때) */
.btn-group button:not(:last-child) {border-right: 1px solid #eee;}
.btn-group  { display: flex; gap: 10px; margin-top: 15px; }
.btn-confirm { flex: 1; padding: 10px; background: #333; color: #fff; border-radius: 6px; }
.btn-cancel  { flex: 1; padding: 10px; background: #eee; border-radius: 6px; }

/* 포인트 적립 완료 모달 */
.modal-point{align-items: end;padding-bottom:10px;}
.modal-point .modal-content{position:relative;width:calc(100% - 20px);max-width:640px;height:224px;border-radius:0;}
.modal-point .modal-content img{padding-top:30px;padding-bottom:20px;width:60px;}
.modal-point .modal-content p strong{color:#8B634B;}
.modal-point .modal-content .btn-confirm{position:absolute;bottom:10px;left:10px; width:calc(100% - 20px);padding: 16px 0;background: linear-gradient(90deg, #d4b483 0%, #a88a64 100%);color: #ffffff;font-size:18px;font-weight: bold; text-align: center;}
.close-right{position:absolute;top:20px;right:20px;width:20px;height:20px;background:url('https://bodyfriend.speedgabia.com/img/bodyfriend/icon/icon_close.svg')no-repeat center;opacity:.5;}



@media all and (max-width:640px){
    .eval-empty-msg,
    .option-label > label{font-size:14px;}
    .course-category-options input + label{padding:10px 20px !important;font-size:14px;}


    .color-option-item img{max-height:113px;}
    .color-option-item input + label{font-size:14px;}
    .color-option-item label em{white-space: pre;}
    .btn-submit{max-width:inherit;width:calc(100% - 32px);line-height:40px;font-size:18px;}
}