/* Reset */
/* Font */
@font-face {
    font-family: 'NEXON Lv1 Gothic OTF Light';
    src: url('./font/NEXON Lv1 Gothic OTF Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'NEXON Lv1 Gothic OTF';
    src: url('./font/NEXON Lv1 Gothic OTF.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'NEXON Lv1 Gothic OTF Bold';
    src: url('./font/NEXON Lv1 Gothic OTF Bold.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

html, body {
    font-family: 'NEXON Lv1 Gothic OTF Bold', "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}
body {
    margin: 0;
    background-color: #1E1E1E;
}


::-webkit-scrollbar {
    width: 4px; /* Width for vertical scrollbar */
}

::-webkit-scrollbar-track {
    background: transparent; /* Color of the track */
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #7d7d7d; /* Color of the thumb */
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #4D4D4D; /* Color on hover */
}

.btn_default {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 8px 16px;
    background-color: #BC2113;
    border-radius: 4px;
    color: #EDEDED;
    font-size: 16px;
    font-weight: 600;
    line-height: 150%;
    text-decoration: none;
}
.btn_default img {
    width: 24px;
}
.w_container {
    margin: 0 auto;
    width: 1128px;
}

header {
    display: flex;
    justify-content: center;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 999;
}
header .w_container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 36px;
    height: 64px;
}
header .logo img {
    display: block;
    width: 164px;
}
header .btn_text {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding: 0 12px;
    height: 40px;
    border-radius: 4px;
    font-family: 'NEXON Lv1 Gothic OTF', Arial, sans-serif;
    text-decoration: none;
    color: #EDEDED;
}
header .btn_text span {
    font-size: 14px;
}
header .btn_text:hover {
    background: rgba(213, 213, 213, 0.9);
}
header .btn_text:hover svg {
    color: #222222;
}
header .btn_text:hover span {
    color: #222222;
    font-family: 'NEXON Lv1 Gothic OTF Bold', Arial, sans-serif;
}
header .btn_text.on:hover {
    background: #ebebeb;
}
.top_banner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 420px;
    background: url("../image/wide/img_main_top.png") no-repeat top center;
    background-size: cover;
}
.top_banner:before {
    display: block;
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.7);
}
.top_banner p {
    position: relative;
    margin: 0;
    font-size: 36px;
    color: #EDEDED;
    font-weight: 600;
    line-height: 170%;
    text-align: center;
    z-index: 10;
}

/* Section Common */
.section_common {
    /*padding: 100px 0 80px;*/
    padding: 80px 0 60px;
}

.text_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

/* 제목/본문 컬러를 밝은 회색 배경에 맞게 어두운 톤으로 변경 */
.section_title {
    margin: 0;
    color: #222222;          /* 기존 #EDEDED → 진한 그레이 */
    font-size: 36px;
    line-height: 150%;
    font-weight: 800;
}

.section_text {
    margin: 0;
    font-family: 'NEXON Lv1 Gothic OTF', Arial, sans-serif;
    font-size: 18px;
    color: #555555;
    font-weight: 400;
    text-align: center;
    line-height: 150%;
}

.section_img {
    position: relative;
}

/* 이미지 오버레이도 조금 부드럽게 조정 (너무 어둡지 않게) */
.section_img:before {
    display: block;
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.55);  /* 기존 0.55 → 0.25 */
}

.section_img img {
    display: block;
    width: 100%;
    height: 480px;
    object-fit: cover;
}

.ul_column {
    flex-direction: column;
}

/* 섹션 배경을 다크 → 밝은 회색 그라디언트로 변경 */
.section_service {
    background:linear-gradient(to bottom, #E9ECF3 0%, #D9DEE8 100%);
}

/* Flow Banner */
.flow_banner {
    margin: 80px 0 0;
    position: relative;
    overflow: hidden;
    width: 100%;
}

.flow_banner .list_wrap {
    display: inline-flex;
    white-space: nowrap;
    will-change: transform;
}

.flow_banner .list {
    display: inline-flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.flow_banner .list li {
    display: inline-flex;
    align-items: center;
    position: relative;
    margin-right: 28px;
    /*width: 240px;*/
    /*height: 360px;*/
    width: 180px;
    height: 280px;
    border-radius: 16px;
    overflow: hidden;
    /* 그림자, 보더도 밝은 테마에 맞게 약하게 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08),
    0 10px 24px rgba(0, 0, 0, 0.10);   /* 기존 0.35, 0.25 */
    border: 1px solid rgba(0, 0, 0, 0.06);        /* 기존 rgba(255,255,255,0.06) */
}

/* 카드 위 오버레이는 이미지 대비를 위해 살짝만 어둡게 유지 */
.flow_banner .list li:before {
    display: block;
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.18);        /* 기존 0.2 → 아주 약간만 조정 */
}

.flow_banner .list li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 카드 안 텍스트는 이미지 위라 그대로 밝은 톤 유지 */
.flow_banner .list > li span {
    position: absolute;
    bottom: 16px;
    left: 16px;
    font-size: 18px;
    font-weight: 600;
    line-height: 150%;
    color: #F5F5F5;         /* 기존 #EDEDED와 비슷한 밝은 회색-화이트 */
    z-index: 10;
}


.section_program {
    /* section_service 보다 살짝 쿨톤의 밝은 그레이 그라디언트 */
    background: linear-gradient(to bottom, #E9ECF3 0%, #D9DEE8 100%);
}

.service_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
    margin: 45px auto 0;
    padding: 0;
    list-style: none;
}

/* 카드 전체 톤을 라이트 테마용으로 변경 */
.flip_card {
    position: relative;
    padding: 60px 20px;
    height: 480px;
    box-sizing: border-box;


    color: #EDEDED;       /* 기본 텍스트 컬러: 딥 그레이 */
    background-color: transparent;
    perspective: 1000px;  /* 3D 느낌용 */
}

.flip_card .card_front,
.flip_card .card_back {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    transition: transform 0.6s ease;
    z-index: 1; /* 배경 오버레이 위로 */
    padding: 60px 20px;
    height: 480px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08), 0 18px 40px rgba(15, 23, 42, 0.10);
    border: 1px solid rgba(15, 23, 42, 0.06);
}

/* 앞면: 배경 이미지 위에 밝은 화이트 오버레이 */
.flip_card .card_front::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 0;
}

.flip_card ul,
.flip_card ol {
    position: relative;
    margin: 0;
    padding: 0;
}

.flip_card li {
    list-style-type: none;
}

.flip_card .card_front {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    transform: rotateY(0deg);
}
.flip_card .card_front:hover {
    transform: rotateY(-10deg);
    /*cursor: url("../image/wide/icon_grap.png"), auto;*/
    cursor: pointer;
}
.flip_card .card_back {
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;
    /*gap: 48px;*/
    transform: rotateY(180deg);
    padding: 24px 28px;
}
.flip_card .card_back:hover {
    /*cursor: url("../image/wide/icon_grap.png"), auto;*/
    cursor: pointer;
}

/* 플립 상태 */
.flip_card.on .card_front {
    transform: rotateY(-180deg);
}
.flip_card.on .card_back {
    transform: rotateY(0deg);
}

.card_top {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
}

/* 상단 카테고리 텍스트(예: Business Innovation)용 */
.card_top span {
    font-family: 'NEXON Lv1 Gothic OTF', Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #EDEDED;
}

.card_top h4 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 150%;
    color: #f4f4f4; /* 타이틀은 좀 더 진하게 */
}

.card_summary {
    position: relative;
    margin-top: auto;
}

.card_summary li {
    text-align: right;
    font-family: 'NEXON Lv1 Gothic OTF Light', Arial, sans-serif;
    font-size: 18px;
    line-height: 150%;
    font-weight: 300;
    color: #EDEDED;
}

/* 뒷면 상세 내용 */
.card_back div {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.card_back span {
    font-family: 'NEXON Lv1 Gothic OTF', Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #6B7280;
}

.card_back h4 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 150%;
    color: #111827;
}

.card_back ol {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: auto;
}

.card_back li {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.card_back li h6 {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 140%;
    color: #1F2933;
}

.card_back li p {
    margin: 0;
    font-family: 'NEXON Lv1 Gothic OTF', Arial, sans-serif;
    color: #4B5563;
    font-size: 14px;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: -0.3px;
    word-break: keep-all;
}


.section_inquiry {
    /* 기존 딥 레드톤 → 연한 레드/살구 톤 배경으로 변경 */
    background: linear-gradient(to bottom, #FDF4F4 0%, #F9E3E3 100%);
}

.form_consult {
    margin: 24px auto 0;
    max-width: 780px;
    width: 100%; /* 반응형 보완 */
}

.form_consult ul {
    margin: 0;
    padding: 0;
}

.form_consult li {
    list-style: none;
}

.form_consult_list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form_consult_type_two {
    display: flex;
    gap: 60px;
}

/* 모바일에서 너무 좁아지면 세로 스택도 고려 가능 (옵션)
@media (max-width: 768px) {
    .form_consult_type_two {
        flex-direction: column;
        gap: 20px;
    }
}
*/

.form_consult_item {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 제목/서브텍스트 컬러를 라이트 테마용으로 변경 */
.form_subject {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #111827; /* 진한 다크 그레이 */
}

.form_subject span {
    font-size: 14px;
    font-weight: 400;
    color: #6B7280; /* 서브 정보용 그레이 */
}

.form_subject + p {
    margin: -8px 0 0;
    font-size: 14px;
    line-height: 150%;
    font-weight: 400;
    color: #4B5563; /* 안내 문구 */
}

/* 인풋 공통 스타일 – 라이트 테마 카드 느낌 */
.w_input_type_default {
    padding: 14px 16px;
    width: 360px;
    box-sizing: border-box;
    border-radius: 8px;
    border: 1px solid #D1D5DB;
    font-family: 'NEXON Lv1 Gothic OTF', Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #111827;
    background-color: #FFFFFF;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.w_input_type_default::placeholder {
    color: #9CA3AF;
    font-weight: 400;
}

.w_input_type_default:focus {
    border-color: #DC2626;           /* 포인트 레드 */
    box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.35);
    background-color: #FFFFFF;
}

.w_input_type_full {
    width: 100%;
}

/* 내용/라디오 그룹 정렬 */
.form_content_flex {
    display: flex;
    align-items: center;
    gap: 32px;
}

/* 라디오 + 라벨 */
.label_type_default {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    cursor: pointer;
}

/* 커스텀 라디오 버튼 – 라이트 테마 */
.input_type_radio {
    margin: 0;
    width: 18px;
    height: 18px;
    appearance: none;
    background-color: #FFFFFF;
    border: 2px solid #D1D5DB;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
    flex-shrink: 0;
}

/* 체크 시 가운데가 포인트 레드로 채워진 느낌 */
.input_type_radio:checked {
    border-color: #DC2626; /* 기존 #971919 계열을 조금 밝게 */
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18);
    background-image: radial-gradient(circle, #DC2626 0, #DC2626 45%, transparent 50%);
}

/* 제출 버튼 – 포인트 컬러 유지 + 라이트 테마용 */
.btn_submit {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 40px auto 0;
    width: 200px;
    height: 50px;
    border-radius: 9999px;
    border: none;
    background-color: #DC2626;  /* 포인트 레드 */
    text-decoration: none;
    color: #FFFFFF;
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.08s ease;
}

.btn_submit:hover {
    background-color: #B91C1C;
    box-shadow: 0 8px 18px rgba(220, 38, 38, 0.35);
}

.btn_submit:active {
    transform: translateY(1px);
    box-shadow: 0 4px 10px rgba(220, 38, 38, 0.26);
}

/* Login */
.section_login {
    padding-top: 240px;
    min-height: calc(100dvh - 247px);
    box-sizing: border-box;
    background: linear-gradient(to bottom, #E9ECF3 0%, #D9DEE8 100%);
}
.login_form {
    display: flex;
    flex-direction: column;
    margin: 140px auto 0;
}
.login_form .input_section {
    gap: 36px;
    padding: 48px 0;
    width: 100%;
    max-width: 480px;
    background-color: #FFFFFF;
    border-radius: 16px;
    box-sizing: border-box;
    border: 1px solid #E5E7EB;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
    align-items: center;
}
.section_login .w_input_type_default {
    padding-left: 48px;
    font-size: 16px;
}

/* 전체 랩핑 */
/*.filebox_profile {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    position: absolute;
    top: -90px;
    left: 32px;
}*/


.form_consult_list,
.form_consult_list ul {
    margin: 0;
    padding: 0;
}
.form_consult_list li {
    list-style: none;
}
/*.form_consult_list {
    padding: 140px 32px 80px;
}*/
.form_consult_list .w_input_type_default {
    width: 100%;
}
.form_consult_list ul {
    gap: 16px;
}
.form_consult_type_two .form_consult_item {
    flex: 1;
}
.label_type_button_default {
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: #E5E5E5;
    cursor: pointer;
}
.label_type_button_default.on {
    background-color: #BC2113;
    color: #EDEDED;
}
.label_type_button_default input {
    position: absolute;
    left: -99999999px;
}
.label_type_button {
    display: flex;
    flex: 1;
    height: 52px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 400;
    color: #000;
    cursor: pointer;
}
.label_type_button_inline {
    display: inline-flex;
    padding: 0 16px;
    height: 40px;
    border-radius: 8px;
    font-size: 16px;
    color: #000;
}
.form_content_button {
    display: flex;
    gap: 8px;
}
.form_content_button_inline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.form_content_select {
    display: flex;
    gap: 16px;
}
.form_content_select > div {
    flex: 1;
}
.select_type_default,
#ywSigungu {
    padding: 16px;
    box-sizing: border-box;
    border-radius: 8px;
    border: 1px solid #EDEDED;
    font-size: 16px;
    font-weight: bold;
    color: #EDEDED;
    background: transparent;
    outline: none;
    width: 100%;
    appearance: none;
    background: url("../image/user/icon_arrow_select.png") no-repeat calc(100% - 16px) center;
    background-size: 24px 24px;
}
.form_content_datepicker .flatpickr {
    position: relative;
}
.button_datepicker {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}
.button_datepicker img {
    width: 16px;
}
.textarea_full {
    padding: 16px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 8px;
    border: 1px solid #EDEDED;
    font-size: 16px;
    font-weight: bold;
    color: #EDEDED;
    background: transparent;
    outline: none;
    resize: none;
}
.textarea_full::placeholder {
    font-size: 16px;
    font-weight: bold;
    color: #EDEDED;
}
.w_personal_view .w_input_type_default {
    flex: 1;
}
.w_personal_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background-color: #EDEDED;
    border-radius: 8px;
    cursor: pointer;
}
.w_personal_btn img {
    width: 24px;
}
.btn_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}
.btn_wrap a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 48px;
    background-color: #EDEDED;
    border-radius: 4px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    color: #000;
}
.btn_wrap a:last-of-type {
    background-color: #BC2113;
    color: #EDEDED;
}
.form_content_button_file {
    display: flex;
    align-items: baseline;
    gap: 16px;
}
.filebox_button {
    position: relative;
    flex: 1;
}
.filebox_button .filebox {
    position: relative;
}
.filebox_button label {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #bc2113;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 400;
    color: #EDEDED;
}
.filebox_button .filebox + div {
    margin-top: 4px;
    font-size: 12px;
    color: #EDEDED;
}

.layer_alert .layer_inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #EDEDED;
    padding: 40px;
    border-radius: 12px;
}
.layer_msg {
    margin: 0;
    text-align: center;
    font-size: 24px;
    line-height: 150%;
    font-weight: 600;
}
.btn_layer_ok {
    border: none;
    width: 140px;
    margin: 40px auto 0;
    cursor: pointer;
}




.section_expert {
    /* 전체 배경: 밝은 그레이 그라디언트 유지 */
    background: linear-gradient(to bottom, #F5F5F7, #E4E5EA);
}

/* 상단 히어로 영역 */
.section_top {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 420px;
    background: url("../image/wide/img_expert.jpg") no-repeat center;
    background-size: cover;
}

.section_top:before {
    display: block;
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5); /* 기존 0.3 → 조금 더 밝게 */
}

.section_search {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 860px;
    z-index: 10;
}

.side_search_head {
    display: none;
}

.side_search_bottom {
    display: none;
}

.section_search h1 {
    margin: 0;
    text-align: center;
    font-size: 26px;
    font-weight: 700;
    color: #F9FAFB;
}

/* 전체 레이아웃 */
.section_content {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
    padding: 40px 0 60px;
}

/* 검색바 (라이트 카드 느낌) */
.search_bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    min-height: 44px;
    border-radius: 9999px;
    background-color: #FFFFFF;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
    border: 1px solid rgba(148, 163, 184, 0.35);
}

.search_bar img {
    width: 18px;
    /* 더 이상 invert 필요 없음 */
    filter: none;
    opacity: 0.8;
}

.search_bar input {
    border: none;
    flex: 1;
    font-size: 20px;
    font-weight: 500;
    background-color: transparent;
    color: #111827;
    outline: none;
}

.search_bar input::placeholder {
    color: #9CA3AF;
}

/* 좌측 필터 패널 */
.side_search {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 24px 20px;
    width: 300px;
    background-color: #FFFFFF;
    border-radius: 16px;
    box-sizing: border-box;
    border: 1px solid #E5E7EB;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.btn_filter {
    display: none;
}

.btn_reset {
    display: inline-flex;
    align-items: center;
    color: #6B7280;
    font-size: 13px;
    gap: 8px;
    margin-left: auto;
    margin-bottom: -8px;
    cursor: pointer;
}

/* 필터 항목 */
.search_item {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.search_item h6 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 150%;
    color: #111827;
}

.search_item_list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* 전문가 카드 리스트 */
.expert_list {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    width: 840px;
}

/* 전문가 카드 전체 틀 */
.expert_card {
    width: 264px;
    border-radius: 16px;
    overflow: hidden;
    background-color: #FFFFFF;
    border: 1px solid #E5E7EB;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
    box-sizing: border-box;
    transition: box-shadow 0.18s ease, transform 0.12s ease;
}
.expert_card:hover {
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
    transform: translateY(-2px);
}
.expert_card a {
    text-decoration: none;
}

/* 카드 상단: 프로필 & 라벨 영역 */
.expert_card .card_top {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px 0;
    height: 162px;
    background: url(../image/user/bg_layer_top.png) no-repeat center;
    background-size: cover;
    box-sizing: border-box;
    font-size: 10px;
    font-weight: 400;
    color: #F9FAFB;
}

/*상단 영역에 살짝 오버레이 주고 싶으면 (옵션)*/
.expert_card .card_top::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(15, 23, 42, 0.35),
        rgba(15, 23, 42, 0.6)
    );
    z-index: 0;
}
.expert_card .card_top > * {
    position: relative;
    z-index: 1;
}


.expert_card .card_top img {
    width: 90px;
    height: 90px;
    border-radius: 9999px;
    overflow: hidden;
    object-fit: cover;
}

.expert_card .card_top span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    height: 27px;
    background-color: #DC2626; /* 기존 #BC2113 → 살짝 밝은 레드 */
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 600;
}

/* 카드 하단: 정보 영역 (라이트 카드) */
.card_bottom {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    padding: 20px 20px 32px;
    height: 220px;
    background-color: #FFFFFF;
    box-sizing: border-box;
}

.card_bottom ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.card_bottom ul li {
    list-style: none;
}

/* 이름/직함 */
.nm {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.nm strong {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
}

.nm span {
    font-size: 14px;
    font-weight: 400;
    color: #6B7280;
    line-height: normal;
}

/* 회사/소속 */
.company {
    display: flex;
    gap: 4px;
    font-size: 14px;
    font-weight: 400;
    color: #4B5563;
    line-height: normal;
    font-family: 'NEXON Lv1 Gothic OTF', Arial, sans-serif;
}

/* 태그 */
.tag_wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 12px;
}

.tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    height: 24px;
    border-radius: 9999px;
    border: 1px solid #D1D5DB;
    font-size: 12px;
    font-weight: 400;
    color: #374151;
    background-color: #F9FAFB;
}

.tag_more {
    font-size: 12px;
    font-weight: 600;
    color: #6B7280;
}

/* 하단 설명/경력 등 */
.card_bottom p {
    position: absolute;
    right: 20px;
    bottom: 24px;
    margin: 0;
    text-align: right;
    font-family: 'NEXON Lv1 Gothic OTF', Arial, sans-serif;
    font-size: 13px;
    color: #9CA3AF;
}



.layer_common {
    position: fixed;
    inset: 0;
    z-index: 1000;
}
.layer_common:before {
    display: block;
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.8);
}

.layer_header h4 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: #EDEDED;
    line-height: 150%;
}
.layer_content {
    position: relative;
    padding-left: 24px;
    width: 100%;
    border-left: 1px solid #caccd0;
    overflow-y: auto;
}
.layer_frame {
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0 0 40px;
    width: 100%;
    max-width: 1020px;
    height: 680px;
    background-color: #e5e7eb;
    border-radius: 24px;
    z-index: 999;
}



.profile_content ul {
    display: flex;
    margin: 0;
    padding: 0;
}
.item_profile li span {
    display: inline-flex;
    align-items: center;
    font-family: 'NEXON Lv1 Gothic OTF', Arial, sans-serif;
}
.item_profile .list_keyword {
    flex-direction: row;
}
.personal_list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.table_no_txt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    /*padding: 0 0 0 120px;*/
    padding: 0;
    width: 100%;
    height: 760px;
    background-color: #FFFFFF;
    border-radius: 16px;
    box-sizing: border-box;
    border: 1px solid #E5E7EB;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);

}
.table_no_txt figure {
    margin: 0;
    width: 380px;
}
.table_no_txt figure img {
    display: block;
    width: 100%;
}
.table_no_text_wrap {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
}
.table_no_txt span {
    font-family: 'NEXON Lv1 Gothic OTF', Arial, sans-serif;
    font-size: 20px;
    color: #111827;
}
.table_no_txt strong {
    font-family: 'NEXON Lv1 Gothic OTF Bold', Arial, sans-serif;
}
.table_no_txt p {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 12px 16px;
    background: #f2f4f8;
    font-family: 'NEXON Lv1 Gothic OTF', Arial, sans-serif;
    color: #7d7d7d;
    font-size: 14px;
    border-radius: 8px;
}
.table_no_txt p svg {
    color: #BC2113;
}
.btn_reset_search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid #BC2113;
    color: #BC2113;
    cursor: pointer;
}

.layer_frame {
    box-shadow: 0 24px 60px rgba(0,0,0,.65);
    padding: 32px;
    border-radius: 24px;
}
.btn_circle_close_layer {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -52px;
    right: 0;
    width: 42px;
    height: 42px;
    background-color: #f3f4f6;
    border-radius: 9999px;
    overflow: hidden;
    z-index: 10;
}
.btn_circle_close_layer img {
    width: 70%;
}
.layer_frame .layer_header {
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.layer_expert {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 32px;
    height: 600px;
}
.expert_profile_card {
    justify-content: center;
    align-items: center;
    padding: 24px 20px 20px;
    background: #f9fafb;
    border-radius: 24px;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.16), 0 0 0 1px rgba(148, 163, 184, 0.35);
    box-sizing: border-box;
}
.profile_img {
    /*margin: 0 auto 32px;
    width: 180px;
    height: 180px;
    box-shadow: 0 10px 25px rgba(0,0,0,.45);
    border-radius: 9999px;
    overflow: hidden;*/
    width: 180px;
    height: 180px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #e5e7eb, #f9fafb);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
}
.profile_img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.layer_expert .label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
    padding: 0 20px;
    height: 36px;
    border-radius: 9999px;
    border: none;
    background: #111827;
    color: #f9fafb;
    font-size: 14px;
    font-weight: 600;
}
.profile_basic {
    margin: 32px 0 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: #333;
}
.profile_basic div {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
}
.profile_basic div:last-of-type {
    gap: 2px;
}
.profile_basic strong {
    font-size: 24px;
    font-weight: 700;
    color: #1A1A1A;
}
.profile_content > ul {
    padding: 12px 20px;
    border-bottom: 1px solid #dbdbdb;
}
.item_profile {
    flex: 1;
    padding: 20px 0;
    list-style: none;
}
.item_profile h6 {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 16px;
    font-size: 20px;
    font-weight: 600;
    color: #1A1A1A;
}
.item_profile h6:before {
    display: inline-block;
    content: '';
    width: 4px;
    height: 16px;
    background-color: #bc2113;
    border-radius: 4px;
}
.item_profile ul {
    gap: 4px;
}
.item_profile li {
    display: flex;
    gap: 12px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    color: #333;
    list-style: none;
}
.item_profile li span:first-child svg {
    opacity: .8;
}
.item_profile .list_keyword {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}
.item_profile .item_keyword {
    padding: 6px 12px;
    border-radius: 9999px;
    font-family: 'NEXON Lv1 Gothic OTF', Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #111827;
    background: #e5e7eb;
}
.item_profile .text_div_line {
    line-height: normal;
    align-items: baseline;
}
.item_profile .text_div_line:after {
    display: inline-block;
    content: '';
    width: 2px;
    height: 12px;
    background-color: #c6c6c6;
}
.item_profile .text_div_line:last-of-type:after {
    display: none;
}
.expert_detail {
    padding: 20px 24px 8px;
    background: #f3f4f6;
    border-radius: 24px;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.16), 0 0 0 1px rgba(148, 163, 184, 0.35);
    box-sizing: border-box;
}
.profile_content {
    padding: 24px;
}
.btn_view {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 32px;
    width: 100%;
    height: 46px;
    border-radius: 10px;
    background: #bc2113;
    color: #f9fafb;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 10px 25px rgba(188, 33, 19, 0.35);
    transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.btn_view:hover {
    background-color: #d02b1b;
    transform: translateY(-1px);
    box-shadow: 0 16px 30px rgba(0,0,0,.55);
}

/* Layer Member */
.layer_member {
    padding: 0;
}
.layer_member .w_input_type_default {
    padding-left: 48px;
    font-size: 14px;
}
.layer_member .layer_header {
    align-items: center;
    justify-content: center;
    padding: 32px;
    background: #fff;
    border-top-left-radius: 24px;
    border-bottom-left-radius: 24px;
}
.layer_member .layer_header h4 {
    color: #111827;
    text-align: center;
}
.layer_member .layer_header figure {
    margin: 0;
    width: 360px;
}
.layer_member .layer_header figure img {
    width: 100%;
}
.layer_member .layer_header p {
    margin: 0;
    font-size: 14px;
}
.layer_member .layer_content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 48px;
}
.layer_member .layer_content h4 {
    margin: 0;
    text-align: center;
    color: #111827;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.input_section {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 0 auto;
    width: 360px;
}
.input_type_label {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.input_subject {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: #111827;
}
.input_content {
    position: relative;
}
.input_icon {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    margin-top: -3px;
    color: #969696;
    font-size: 14px;
}
.modal_text {
    display: flex;
    font-size: 14px;
    justify-content: center;
    gap: 4px;
    margin: 36px auto 0;
    font-family: 'NEXON Lv1 Gothic OTF', Arial, sans-serif;
    text-align: center;
    color: #a8a9aa;
}
.btn_text {
    display: block;
    color: #111827;
}
.input_section_join {
    width: 480px;
}
.btn_cert {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 12px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    background: #bc2113;
    color: #f9fafb;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    z-index: 10;
    cursor: pointer;
}
/*.btn_cert.active {
    background: #bc2113;
    color: #f9fafb;
    pointer-events: auto;
}*/
.input_type_label_grid2 {
    display: flex;
    gap: 20px;
}
.input_type_label_grid2 .input_type_label {
    flex: 1;
}
.input_section_join .select_type_default {
    height: 48px;
    color: #9CA3AF;
    font-weight: 400;
}

/* Paging */
.pagination_wrap {
    margin: 40px 0 0;
    text-align: center;
}
.pagination {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 2px;
    background-color: #4D4D4D;
    border-radius: 4px;
    overflow: hidden;
}
.pagination a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
    color: #EDEDED;
}
.pagination a.active {
    font-weight: bold;
    /*color: #BC2113;*/
    color: #4D4D4D;
    background-color: #E5E5E5;
}
.pagination a img {
    width: 50%;
}


/* 상단 헤더 */
.layer_expert_reg {
    flex-direction: column;
    gap: 32px;
    max-width: 780px;
}
.layer_expert_reg .layer_header {
    padding: 0;
}
.layer_expert_reg .layer_header h4 {
    color: #1A1A1A;
}
.layer_expert_reg .btn_circle_close_layer {
    display: none;
}
.layer_content {
    border-left: none;
    padding: 0;
}
/* 프로필 업로드 써클 */
.filebox_profile {

}
/* 실제 파일 input 숨기기 */
.upload-hidden{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    border:0;
}
/*.filebox_profile label{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    width: 164px;
    height: 164px;
    background: radial-gradient(circle at 30% 20%, #777 0, #555 40%, #444 100%);
    !*box-shadow: 0 14px 30px rgba(0,0,0,.55);*!
    border-radius:50%;
    color:#EDEDED;
    cursor:pointer;
}
.filebox_profile .w_label_icon {
    display:block;
    width: 48px;
}
.filebox_profile .w_label_icon img {
    width: 100%;
}
.filebox_profile .w_label_txt{
    display: block;
    font-size: 11px;
    line-height: 150%;
    white-space: pre-line;
    color: #4b5563;
    text-align: center;
}*/

/* 폼 전체 여백 */
/*.form_consult_list {
    padding: 150px 32px 72px;
}*/

/* 한 블록(라벨 + 인풋) */
.form_consult_item {
    margin-bottom: 18px;
}
.form_consult_item:last-of-type {
    margin-bottom: 0;
}

/* 섹션 제목 + 작은 설명 */
.layer_expert_reg .form_subject {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 600;
    color: #f9fafb;
}
.layer_expert_reg .form_subject span {
    font-size: 11px;
    font-weight: 400;
    color: #1A1A1A;
}

/* 설명 텍스트 (ex. 최신 정보가 상단으로...) */
.layer_expert_reg .form_consult_item > p {
    margin: 0 0 8px;
    font-size: 14px;
    color: #1A1A1A;
    opacity: .9;
}

/* 두 칼럼 그룹 간 간격 */
.form_consult_type_two {
    display: flex;
    gap: 16px;
}

/* 기본 인풋 */
.layer_expert_reg .w_input_type_default {
    padding: 14px 16px;
    border-radius: 8px;
    border: 1px solid #4D4D4D;
    background-color: transparent;
    font-size: 14px;
    font-weight: 400;
    color: #4D4D4D;
}
.layer_expert_reg .w_input_type_default::placeholder {
    color: #4D4D4D;
    font-weight: 400;
}

/* 셀렉트 */
.select_type_default,
#ywSigungu {
    padding: 12px 40px 12px 16px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    background-color: #f9fafb;
    background-image: url("../image/user/icon_arrow_select.png");
    background-repeat: no-repeat;
    background-position: calc(100% - 14px) center;
    background-size: 20px 20px;
    font-family: 'NEXON Lv1 Gothic OTF', Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #4D4D4D;
}

/* 텍스트에어리어 */
.layer_expert_reg .textarea_full {
    padding: 14px 16px;
    border-radius: 8px;
    border: 1px solid #4D4D4D;
    font-size: 14px;
    font-weight: 400;
    color: #4D4D4D;
    background-color: transparent;
}
.layer_expert_reg .textarea_full::placeholder {
    font-size: 14px;
    font-weight: 400;
    color: #4D4D4D;
}

/* 공통 버튼형 라벨 */
.label_type_button {
    height: 46px;
    font-size: 14px;
    font-weight: 500;
}

/* 인라인(주전문 영역) */
.label_type_button_inline {
    font-size: 13px;
    height: 38px;
    padding: 0 14px;
}

/* 기본 상태 */
.label_type_button_default {
    font-family: 'NEXON Lv1 Gothic OTF', Arial, sans-serif;
    background-color: #eaeaea;
    color: #626262;
    border-radius: 8px;
    border: none;
}

/* 선택 상태 */
.label_type_button_default.on {
    background-color: #bc2113;
    color: #f9fafb;
    box-shadow: 0 6px 14px rgba(0,0,0,.45);
}

/* 라디오 숨기기 */
.label_type_button_default input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* 주요 경력 리스트 */
#personalsView {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.w_personal_view.root {
    display: flex;
    gap: 8px;
}
.w_personal_view .w_input_type_default {
    flex: 1;
}
.profile_content .personal_list {
    padding-left: 20px;
}
.personal_list .w_personal_view {
    /*display: flex;
    gap: 12px;*/
    list-style-type: disc;
    display: list-item;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: #333;
    /*list-style: none;*/
}
.textarea_content {
    margin: 0;
    white-space: pre-line;
    font-family: 'NEXON Lv1 Gothic OTF', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: #333;
    list-style: none;
}
.text_div {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'NEXON Lv1 Gothic OTF', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: #333;
}
.profile_content .list_info_basic {
    flex-wrap: wrap;
    gap: 12px;
}
.item_info_basic {
    width: calc(50% - 6px);
}

/* + 버튼 */
.w_personal_btn {
    width: 46px;
    height: 46px;
    background-color: #f3f4f6;
    border-radius: 8px;
}
.w_personal_btn img {
    width: 20px;
}

/* 파일 버튼 (이력서/경력/기타 서류) */
.form_content_button_file {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.filebox_button label {
    height: 44px;
    background-color: #bc2113;
    font-size: 14px;
    font-weight: 500;
}
.filebox_button .filebox + div {
    margin-top: 4px;
    font-size: 12px;
    color: #e5e7eb;
}

/* 하단 취소 / 등록 버튼 */
.layer_footer {
    padding: 0;
}
.btn_wrap a {
    width: 130px;
    height: 44px;
    font-size: 14px;
    font-weight: 600;
}
.btn_wrap a:first-of-type {
    background-color: #f3f4f6;
}
.btn_wrap a:last-of-type {
    background-color: #bc2113;
}
.btn_wrap a:last-of-type:hover {
    background-color: #d12a1b;
}

.layer_expert_reg .form_subject {
    color: #1A1A1A;
}


/* 알림 팝업 */
body.modal-open {
    overflow: hidden;
}

.ios-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100000;
}

.ios-modal-hidden {
    display: none;
}

.ios-modal-box {
    display: flex;
    flex-direction: column;
    padding: 24px;
    width: 360px;
    height: 240px;
    box-sizing: border-box;
    background: white;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    text-align: center;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.ios-modal-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.ios-modal-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #000;
    line-height: 140%;
}
.icon_alert {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0 auto;
    background-color: #dddddd;
    border-radius: 9999px;
}

.ios-modal-message {
    margin: 0;
    color: #313131;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    line-height: 150%;
}

.ios-modal-button-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
}

.ios-modal-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 180px;
    width: 200px;
    height: 50px;
    border-radius: 9999px;
    border: none;
    background-color: #DC2626;
    cursor: pointer;
    font-size: 16px;
    color: #fff;
    line-height: normal;
    flex: 1;
}
.ios-modal-btn:hover {
    background-color: #B91C1C;
    box-shadow: 0 8px 18px rgba(220, 38, 38, 0.35);
}
.ios-modal-btn:active {
    transform: translateY(1px);
    box-shadow: 0 4px 10px rgba(220, 38, 38, 0.26);
}

/* 처음엔 숨김 → JS로 필요할 때만 보여줌 */
#modalCancelBtn      { display:none; }

/* 두 개 버튼이 보일 때 가로 배치 */
.ios-modal-button-wrap.two-btns{
    display:flex;
}
.ios-modal-button-wrap.two-btns .ios-modal-btn{
    flex:1 1 50%;
}
.ios-modal-button-wrap.two-btns .ios-modal-btn + .ios-modal-btn{
    border-left:1px solid #ccc;
}

/* 취소 버튼 색상(선택) */
.ios-cancel-btn{ color:#ff3b30; }


@media (max-width: 768px) {
    .layer_frame.layer_expert_reg {
        max-width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
    }

    .layer_frame.layer_expert_reg .layer_header {
        border: none;
    }

    .filebox_profile {
        top: 32px;
        left: 50%;
        transform: translateX(-50%);
    }

    .form_consult_list {
        padding: 160px 18px 64px;
    }

    .form_consult_type_two {
        flex-direction: column;
    }

    .layer_footer {
        padding: 0 18px 8px;
    }
}


footer {
    background:linear-gradient(119.06deg, #ff0000 -0.66%, #DC2626 102.83%);
}
.footer_top {
    display: flex;
    gap: 80px;
    padding: 40px 32px;
}
.logo_footer {
    width: 180px;
}
.logo_footer img {
    width: 100%;
}
.footer_content ul {
    margin: 0;
    padding: 0;
}
.footer_content ul li {
    list-style: none;
    font-size: 14px;
    line-height: 150%;
    font-weight: 600;
    color: #f7f7f7;
}
.footer_content ul li a {
    color: #f7f7f7;
}
.footer_bottom {
    font-size: 12px;
    color: #f7f7f7;
    font-weight: 600;
    text-align: center;
    padding: 24px 0;
}


@media screen and (max-width: 1024px) {
    .w_container {
        margin: 0;
        width: 100%;
    }
    header .w_container {
        padding: 12px;
        height: auto;
    }
    header .logo img {
        width: 128px;
    }
    .gnb {
        display: none;
    }
    header .btn_link_bottom {
        justify-content: center;
        position: fixed;
        right: 20px;
        bottom: 20px;
        left: 20px;
        height: 48px;
        background-color: #BC2113;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
        box-sizing: border-box;
        color: #EDEDED !important;
    }
    header .btn_text.btn_logout {
        width: 36px;
        height: 36px;
        background-color: #4D4D4D;
        box-sizing: border-box;
    }
    .btn_logout span {
        display: none;
    }
    .top_banner {
        height: 300px;
    }
    .top_banner p {
        font-size: 18px;
        line-height: 150%;
    }
    .section_common {
        padding: 32px 0;
    }
    .section_title{
        font-size: 24px;
    }
    .section_text {
        padding: 0 20px;
        font-size: 14px;
        word-break: keep-all;
        line-height: 160%;
    }
    .flow_banner {
        margin-top: 24px;
    }
    .flow_banner .list li {
        margin-right: 12px;
        width: 120px;
        height: 180px;
        border-radius: 8px;
    }
    .flow_banner .list li span {
        font-size: 10px;
        line-height: normal;
    }
    .section_img img {
        height: 250px;
    }

    .service_grid {
        margin-top: 24px;
        padding: 0 20px;
    }
    .flip_card {
        height: 460px;
        padding: 24px 20px;
        border-radius: 20px;
    }
    .card_top h4 {
        font-size: 22px;
    }
    .card_summary li {
        font-size: 16px;
    }
    .card_back span {
        font-size: 14px;
    }
    .card_back h4 {
        font-size: 16px;
    }
    .card_back ol {
        gap: 18px;
    }
    .card_back li {
        gap: 8px;
    }
    .card_back li h6 {
        font-size: 14px;
    }
    .card_back li p {
        font-size: 12px;
    }

    .form_consult {
        padding: 0 20px;
        width: 100%;
        box-sizing: border-box;
    }
    .form_consult_list ul {
        gap: 12px;
    }
    .form_subject {
        font-size: 18px;
    }
    .form_subject span {
        font-size: 12px;
    }
    .form_subject + p {
        word-break: keep-all;
    }
    .form_content_flex {
        flex-wrap: wrap;
        gap: 12px;
    }
    .label_type_default {
        gap: 8px;
        font-size: 13px;
        font-weight: 400;
        line-height: 150%;
    }
    .form_consult_type_two {
        flex-direction: column;
    }
    .w_input_type_default {
        /*padding: 12px 16px;
        font-size: 10px;
        line-height: normal;*/
        font-weight: 400;
    }

    .layer_header {
        height: 240px;
    }
    .filebox_profile {
        margin: 0 auto;
        position: relative;
        top: inherit;
        left: inherit;
        transform: none;
    }
    .filebox_profile label {
        width: 120px;
        height: 120px;
    }
    .filebox_profile .w_label_icon {
        width: 24px;
    }
    .form_consult_list {
        padding: 100px 20px 40px;
    }
    .form_content_select {
        gap: 8px;
    }


    /* 전문가 찾기 */
    .section_top {
        height: 240px;
        align-items: flex-end;
        padding-bottom: 40px;
        box-sizing: border-box;
    }
    .section_search h1 {
        text-align: center;
        font-size: 18px;
    }
    .search_bar {
        margin: 0 auto;
        width: calc(100% - 40px);
        height: auto;
        box-sizing: border-box;
    }
    .search_bar input {
        font-size: 14px;
    }
    .section_content {
        flex-direction: column;
        padding: 40px 20px;
    }
    /*.btn_filter {
        display: flex;
        width: 100%;
        box-sizing: border-box;
        color: #EDEDED;
        background-color: #1A1A1A;
    }*/
    .btn_filter {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;

        width: 100%;
        box-sizing: border-box;
        padding: 10px 14px;

        background-color: #FFFFFF;          /* 흰색 버튼 */
        color: #111827;                     /* 진한 그레이 텍스트 */
        border-radius: 9999px;              /* 알약 형태 */
        border: 1px solid #E5E7EB;          /* 연한 보더 */
        box-shadow: 0 4px 10px rgba(15,23,42,0.06);

        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        text-decoration: none;

        transition: background-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.08s ease;
    }

    .btn_filter:hover {
        background-color: #F9FAFB;
        box-shadow: 0 8px 18px rgba(15,23,42,0.10);
    }

    .btn_filter:active {
        transform: translateY(1px);
        box-shadow: 0 4px 10px rgba(15,23,42,0.08);
    }

    /* 아이콘이 img나 svg라면 너무 진하면 살짝만 연하게 (선택사항) */
    .btn_filter img,
    .btn_filter svg {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        opacity: 0.8;
    }

    .side_search {
        display: none;
        gap: 16px;
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        padding: 18px 16px 24px;
        width: 100%;
        height: 100%;
        z-index: 999;
        border-radius: 0;
        box-sizing: border-box;

        background-color: #F9FAFB; /* 밝은 회색 배경 */
        box-shadow: 0 -8px 30px rgba(15, 23, 42, 0.18); /* 위에서 올라온 패널 느낌 */
    }

    .side_search.on {
        display: flex;
        flex-direction: column;
        overflow-y: auto;
    }

    /* 상단 헤더 영역 */
    .side_search_head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 -16px;
        padding: 0 16px 18px;
        border-bottom: 1px solid #E5E7EB;
        background-color: #F9FAFB;
    }

    .side_search_head h4 {
        display: flex;
        align-items: center;
        gap: 6px;
        margin: 0;
        color: #111827;
        font-size: 16px;
        font-weight: 600;
    }

    .side_search_head a {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .side_search_head a img {
        filter: none;         /* 라이트 테마라 invert 제거 */
        display: block;
        width: 24px;
        opacity: 0.7;
    }

    /* 하단 버튼 영역 */
    .side_search_bottom {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        margin: 32px 0 0;
    }

    /* 버튼 래핑 (초기화 / 적용) */
    .btn_wrap a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 120px;
        height: 48px;
        border-radius: 9999px;
        text-decoration: none;

        font-size: 15px;
        font-weight: 500;
        cursor: pointer;

        background-color: #FFFFFF;
        color: #111827;
        border: 1px solid #E5E7EB;
        box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);

        transition: background-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.08s ease;
    }

    /* 두 번째 버튼(적용) 강조 */
    .btn_wrap a:last-of-type {
        background-color: #DC2626;  /* 포인트 레드 */
        color: #FFFFFF;
        border-color: transparent;
        box-shadow: 0 6px 16px rgba(220, 38, 38, 0.35);
    }

    .btn_wrap a:hover {
        background-color: #F9FAFB;
    }

    .btn_wrap a:last-of-type:hover {
        background-color: #B91C1C;
    }

    .btn_wrap a:active {
        transform: translateY(1px);
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.10);
    }

    /* 모바일 패널에서는 상단에 따로 reset 있으니 숨김 유지 */
    .btn_reset {
        display: none;
    }


    .section_right {
        width: 100%;
    }
    .expert_list {
        gap: 12px;
        width: 100%;
    }
    .expert_card {
        /*width: calc(50% - 6px);*/
        width: 100%;
        height: 320px;
    }
    .card_bottom {
        padding: 12px 12px 48px;
        /*height: 158px;*/
        height: auto;
    }
    .card_bottom p {
        right: 12px;
        bottom: 16px;
    }
    .item_profile h6 {
        font-size: 18px;
    }
    .item_profile li {
        font-size: 14px;
    }
    .table_no_txt {
        height: auto;
    }
    .table_no_txt figure {
        width: 200px;
    }
    .table_no_txt span {
        font-size: 16px;
        word-break: keep-all;
        text-align: center;
        line-height: 150%;
    }
    .table_no_txt p {
        flex-direction: column;
        align-items: baseline;
        margin: 0 20px 20px;
        font-size: 14px;
    }




    .footer_top {
        gap: 16px;
        flex-direction: column;
    }
    .footer_content ul li {
        font-size: 12px;
    }

    .layer_common {
        border-radius: 0;
    }
    .layer_frame {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: none;
        height: auto;
        border-radius: 0;
    }

    .layer_expert {
        grid-template-columns: none;
        padding: 12px 12px 24px;
        box-sizing: border-box;
        overflow-y: auto;
    }
    .expert_profile_card {
        height: auto;
    }
    .expert_detail {
        overflow-y: clip;
    }
    .profile_content {
        display: flex;
        flex-direction: column;
    }
    .profile_content > ul {
        flex-direction: column;
        padding-right: 0;
        padding-left: 0;
    }
    .item_profile {
        border-bottom: 1px solid #dbdbdb;
    }
    .btn_circle_close_layer {
        position: relative;
        order: 3;
        top: inherit;
        margin: 0 auto;
    }
    .w_personal_view {
        font-size: 14px;
    }


    .ios-modal-box {
        width: calc(100vw - 40px);
    }


    .profile_content .list_info_basic {
        flex-direction: column;
    }
    .item_info_basic {
        width: 100%;
        flex: 1;
    }
    .item_profile {
        border: none;
    }

    /* Layer Member */
    .layer_member {
        flex-direction: column;
        inset: 12px 12px 0;
        width: auto;
        border-radius: 24px;
        background-color: transparent;
        overflow: hidden;
    }
    .layer_member .layer_header {
        padding: 16px;
        height: auto;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }
    .layer_member .layer_header figure {
        width: 160px;
    }
    .layer_member .layer_content {
        gap: 24px;
        padding: 24px 0;
        background-color: #e5e7eb;
        border-bottom-right-radius: 24px;
        border-bottom-left-radius: 24px;
        overflow-y: visible;
    }
    .layer_member .layer_content h4 {
        font-size: 18px;
    }
    .input_section {
        padding: 0 20px;
        width: 100%;
        box-sizing: border-box;
    }
    .input_subject {
        font-size: 14px;
    }
    .layer_member .w_input_type_default {
        width: 100%;
    }
    .btn_cert {
        font-size: 12px;
    }
    .modal_text {
        margin-top: 18px;
    }
    .layer_member_join {
        overflow-y: auto;
    }
    .layer_member_join::-webkit-scrollbar {
        width: 0;
    }
    .input_type_label_grid2 {
        flex-direction: column;
    }
    .layer_member_join .btn_circle_close_layer {
        flex: 0 0 auto;
        margin-bottom: 40px;
    }

    .section_login.section_common {
        padding-top: 140px;
    }
    .section_login .w_container {
        padding: 0 24px;
        box-sizing: border-box;
    }
    .login_form {
        margin-top: 70px;
    }
    .login_form .input_section {
        padding: 48px 24px;
    }
    .login_form .input_type_label {
        width: 100%;
    }
    .section_login .w_input_type_default {
        width: 100%;
    }

}
@media screen and (max-width: 320px) {
    .layer_member .layer_header figure {
        width: 120px;
    }
    .layer_member .layer_content {
        gap: 18px;
    }
    .layer_member .layer_content h4 {
        font-size: 16px;
    }
    .input_subject {
        font-size: 12px;
    }
    .layer_member .w_input_type_default {
        padding: 10px 10px 10px 48px;
        font-size: 12px;
    }
    .input_icon {
        font-size: 10px;
    }
    .btn_submit {
        margin-top: 24px;
        width: 180px;
        height: 36px;
        font-size: 12px;
    }
    .modal_text {
        margin-top: 0;
        font-size: 12px;
    }

}