/* 기본 스타일 - 관광지 페이지 CSS에서 필요 부분만 유지 */
body { font-family: "Gowun Dodum", sans-serif; margin: 0; background-color: #111111; color: #333; } /* 배경/텍스트 색상 조정 */
.help_wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    margin-top: 0px;
    height: auto;
    min-height: calc(100vh); /* 풋터 높이만큼 뺀 값 */
}
#help-headerSection {
    margin-top: 80px;
    background-color: white;
    color: #fd7e14;
    padding:  20px;
    text-align: center;
    margin-bottom: 5px;
    border-radius: 8px;
    position: relative;
    z-index: 10;
}
#help-headerSection h1 {
    font-family: "Gowun Dodum", sans-serif;
    margin: 0;
    font-size: 35px;
    font-weight: 700;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}
#help-headerSection p {
    margin-top: 4px;
    font-size: 15px;
    opacity: 0.9;
    margin-bottom: 4px;

}
/* 퀵 메뉴 숨김 처리 */
.quick_menu{
    display: none !important;
}

/* --- 섹션 1: 카테고리 네비게이션 --- */
.help_category_nav { margin-top: 10px; margin-bottom: 20px; padding: 15px; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

.help_category_nav_btn {
    padding: 8px 15px;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    text-decoration: none;
    color: #495057;
    display: inline-block;
    font-weight: 600;
}

.help_category_nav_btn:hover {
    background-color: #fff0e6;
    border-color: #fdac7a;
    box-shadow: 0 2px 5px rgba(253, 126, 20, 0.1);
}
/* --- 섹션 2: 문제 유형별 상세 정보 (아코디언) --- */
.help_categories { margin-top: 20px; }
.help_category_section { max-height: 750px; margin-bottom: 15px; border-radius: 8px; overflow: hidden; background-color: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.help_category_toggle {
    display: block;
    width: 100%;
    padding: 15px ;
    background-color: #fd7e14;
    color: white; border: none;
    font-size: 18px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    border: none;
    border-radius: 8px;
    position: relative;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
    font-family: "Gowun Dodum", sans-serif;
}
.help_category_toggle:hover { background-color: #e8700f; } /* 색상 변경 */
.help_category_toggle .arrow { position: absolute; right: 20px; top: 50%; transform: translateY(-50%) rotate(0deg); transition: transform 0.4s ease; font-size: 16px; display: inline-block; animation: arrow-down-bounce 0.5s forwards; opacity: 0; }
@keyframes arrow-down-bounce { 0% { transform: translateY(-80%) rotate(0deg); opacity: 0; } 60% { transform: translateY(-45%) rotate(0deg); opacity: 1; } 100% { transform: translateY(-50%) rotate(0deg); opacity: 1; } }
.help_category_toggle.active .arrow { transform: translateY(-50%) rotate(180deg); animation: none; opacity: 1; }

/* 펼쳐지는 내용 영역 */
.help_category_content { max-height: 0; overflow: hidden; transition: max-height 0.5s ease-out, padding 0.3s ease; background-color: #fff; padding: 0 20px; display: flex; }
/* .help_category_content.active 높이는 JS에서 계산 */


/* --- 카테고리 내부 좌우 분할 --- */
.help_detail_panel { flex: 7; padding-right: 20px; border-right: 1px solid #e9ecef; display: flex; flex-direction: column; overflow-y: auto; } /* 높이 JS에서 계산 */
.help_item_list { flex: 2; padding-left: 20px; background-color: #f8f9fa; overflow-y: auto; } /* 높이 JS에서 계산 */

/* PC에서는 패널 및 리스트 최소 높이 설정 */
@media (min-width: 769px) {
    .help_detail_panel, .help_item_list {
        min-height: 400px; /* 최소 높이 설정 */
    }

}

/* --- 오른쪽 리스트 아이템 --- */
.help_item { display: flex; align-items: center; padding: 10px 5px; margin-bottom: 5px; background-color: white; border-radius: 5px; cursor: pointer; transition: all 0.3s ease; border-left: 5px solid transparent; font-size: 14px; }
.help_item_title { font-weight: bold; flex-grow: 1; padding-left: 5px;}
.help_item:hover { background-color: #eef; transform: translateX(3px); }
.help_item.active { background-color: #f8f0ff; border-left: 10px solid #fd7e14; font-weight: 600; color: #fd7e14; } /* 색상 변경 */

/* 스크롤바 스타일 (PC) */
.help_item_list::-webkit-scrollbar { width: 6px; }
.help_item_list::-webkit-scrollbar-track { background: #f8f9fa; border-radius: 3px; }
.help_item_list::-webkit-scrollbar-thumb { background-color: #fd7e14; border-radius: 3px; border: 1px solid #f8f9fa; } /* 색상 변경 */
.help_item_list { scrollbar-width: thin; scrollbar-color: #fd7e14 #f8f9fa; } /* 색상 변경 */


/* --- 왼쪽 상세 정보 패널 내부 --- */
.help_detail_content { display: flex; flex-direction: column; height: 100%; }
.help_detail_placeholder { display: flex; justify-content: center; align-items: center; height: 100%; color: #adb5bd; text-align: center; font-size: 16px; flex-grow: 1; }
.help_detail_title { font-size: 22px; font-weight: 700; margin: 0 0 15px 0; color: #fd7e14; } /* 색상 변경 */
.help_detail_info { overflow-y: auto; line-height: 1.7; font-size: 14px; margin-bottom: 15px; flex-grow: 1; min-height: 100px; /* 텍스트 영역 최소 높이 */}
.help_detail_info p { margin: 0 0 10px 0; }
.help_detail_info strong { display: inline-block; min-width: 35px; font-weight: 600; color: #495057; margin-right: 5px; } /* 사용자 코드 반영 */
.help_detail_info > p:first-of-type { margin: 0 0 15px 0; }
.help_detail_info .info_item { display: flex; margin-bottom: 8px; line-height: 1.6; }
.help_detail_info .info_label { flex: 0 0 120px; font-weight: 600; color: #495057; margin-right: 15px; display: inline-block; vertical-align: top; } /* 레이블 너비 조정 (PC) */
.help_detail_info .info_value { flex: 1; min-width: 0; vertical-align: top; }
.help_detail_info .info_value ul,
.help_detail_info .info_value ol { margin: 0; padding-left: 20px; } /* 목록 스타일 */
.help_detail_info .info_value li { margin-bottom: 5px; }
.help_detail_info .info_value a { color: #fd7e14; font-weight: bold; text-decoration: underline; } /* 링크 스타일 */
.help_detail_info .important_note {
    margin-top: 20px;
    padding: 15px;
    border: 1px solid #ffc107; /* 경고/주의 색상 */
    background-color: #fff3cd; /* 경고/주의 배경색 */
    border-radius: 5px;
    font-size: 13px;
    line-height: 1.5;
    color: #856404;
}

/* --- 상세 정보 - 이미지 및 지도 섹션 (PC) --- */
.help_media_container {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: nowrap;
}

.help_image_wrapper {
    flex: 0 0 250px; /* 이미지 고정 너비 */
    width: 250px; /* 폴백 */
    height: 250px; /* 이미지 고정 높이 */
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.help_image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 이미지를 컨테이너에 꽉 채우면서 비율 유지 */
    display: block; /* 이미지 하단 공백 제거 */
}

.help_map_wrapper {
    width: 600px;    /* 지도 고정 너비 */
    height: 250px;   /* 지도 고정 높이 (이미지와 동일) */
    /* flex: 1; Removed - 고정 너비이므로 flex 필요 없음 */
    /* min-width: Removed - 고정 너비이므로 필요 없음 */
    /* min-height: Removed - 고정 높이이므로 필요 없음 */
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.help_map_iframe {
    width: 100%; /* 부모 컨테이너(help_map_wrapper) 크기에 맞춤 */
    height: 100%; /* 부모 컨테이너(help_map_wrapper) 크기에 맞춤 */
    border: 0; /* iframe 기본 테두리 제거 */
}

/* --- 스크롤바 숨기기 --- */
.help_detail_panel::-webkit-scrollbar,
.help_item_list::-webkit-scrollbar {

}

.help_detail_panel,
.help_item_list {

}


/* --- 퀵 메뉴 스타일 ---
.quick_menu {
    position: fixed;
    right: 20px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1000;
}

.quick_menu button {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: none;
    background-color: rgba(253, 126, 20, 0.9);
    color: white;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    transition: background-color 0.3s ease, transform 0.2s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
}

.quick_menu button:hover {
    background-color: rgba(232, 112, 15, 0.95);
    transform: scale(1.05);
}
*/

/* 반응형 (Mobile) */
@media (max-width: 768px) {
    #help-headerSection {
        margin-top: 0px;
        background-color: white;
        color: #fd7e14;
        padding:  10px;
        text-align: center;
        margin-bottom: 5px;
        border-radius: 8px;
        position: relative;
        z-index: 10;
    }
    #help-headerSection h1 {
        font-family: "Gowun Dodum", sans-serif;
        margin: 0;
        font-size: 24px;
        font-weight: 600;
        text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
    }
    .help_wrapper { padding: 10px; margin-top: 0px; min-height: calc(100vh - 138px); /* 모바일 풋터 높이 고려 */ }
    .help_category_nav { margin-top: 5px; margin-bottom: 5px; padding: 8px; gap: 5px; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
    .help_category_nav_btn { font-size: 12px; padding: 6px 10px; flex-shrink: 0;}
    /* 모바일 아코디언 높이는 CSS에서 관리 */
    .help_category_content.active { height: auto; max-height: 85vh !important; padding: 8px!important; flex-direction: column; }
    .help_category_content { flex-direction: column; height: auto; }

    .help_detail_panel { border-right: none; border-bottom: 5px solid #fd7e14; padding-right: 0; padding-bottom: 10px; margin-bottom: 10px; height: auto; max-height: 60vh; } /* 색상 변경 */
    /* 모바일 리스트 가로 스크롤 */
    .help_item_list { padding-left: 0; height: 25vh; overflow-x: auto; overflow-y: hidden; display: flex; flex-direction: row; gap: 5px; padding-bottom: 5px;}
    .help_item { font-size: 12px; padding: 8px; flex-shrink: 0; width: 120px; display: block; text-align: center;}
    .help_item_title { padding-left: 0; }

    .help_detail_title { font-size: 18px; margin-bottom: 10px;}
    .help_detail_info { font-size: 12px; min-height: auto; margin-bottom: 5px;}
    /* 모바일 상세 정보 레이블 세로 배치 */
    .help_detail_info .info_item{ margin-bottom: 5px; flex-direction: column; align-items: flex-start; }
    .help_detail_info .info_label{ flex: none; width: auto; margin-right: 0; margin-bottom: 3px; font-size: 13px; }
    .help_detail_info .info_value{ font-size: 12px; }
    .help_detail_info .info_value ul,
    .help_detail_info .info_value ol { padding-left: 15px; }

    .help_detail_info .important_note { margin-top: 15px; padding: 10px; font-size: 11px; }

    .help_category_toggle{ padding: 10px; font-size: 16px; }

    /* 모바일 이미지/지도 세로 배치 및 크기 */
    .help_media_container { flex-direction: column; gap: 10px; }
    .help_image_wrapper { flex: none; width: 100%; height: 150px; }
    .help_map_wrapper { flex: none; width: 100%; height: 150px; min-width: auto; } /* 모바일에서는 min-width 제거 */

    /* Quick menu removed based on user code */
    /*
    .quick_menu { right: 15px; bottom: 15px; gap: 8px; }
    .quick_menu button { width: 40px; height: 40px; font-size: 16px; }
    */
}
/* 모바일 가로 스크롤바 스타일 (오른쪽 리스트) */
.help_item_list::-webkit-scrollbar { height: 6px; width: 0; } /* 모바일 가로 스크롤바 높이, 세로는 숨김 */
.help_item_list::-webkit-scrollbar-track { background: #f8f9fa; border-radius: 3px; }
.help_item_list::-webkit-scrollbar-thumb { background-color: #fd7e14; border-radius: 3px; border: 1px solid #f8f9fa; }

/* PC에서만 퀵메뉴 표시 (모바일에서는 기본 표시) */
/* Quick menu removed based on user code */
/*
@media (min-width: 769px) {
    .quick_menu { display: flex; }
}
*/

/* PC에서 아코디언 내용 높이를 JS로 제어 */
@media (min-width: 769px) {
    .help_category_content.active {
        max-height: none !important; /* JS에서 계산하도록 */
        height: auto;
    }
    /* 패널과 리스트 높이도 JS에서 관리 */
    .help_detail_panel, .help_item_list {
        height: auto;
    }
}