@charset "UTF-8";
/* 독립 폼 전용 래퍼 CSS
 * - layout.css(사이트 헤더/푸터 전체)는 가져오지 않고, 폼 렌더링에 필요한 :root 변수만 발췌
 * - 원본: css/template/basic/layout.css :root
 */
:root{
    --tit_black: #111;
    --text_black: #444;
    --white: #fff;
    --blue: #1172F1;
    --light_blue: #EAF3FF;
    --bg_blue: #F3F8FC;
    --orange: #E55902;
    --tit: 'SUITE';
    --line: 1px solid #DDD;
}
*{box-sizing: border-box;}
body{
    margin: 0;
    background: var(--bg_blue);
    font-family: 'SUIT', 'pretendard GOV', 'Dotum', "돋움", sans-serif;
    color: var(--text_black);
    line-height: 1.5;
}

/* 폼 중앙 카드 레이아웃 (사이트 chrome 대체) */
.mf_wrap{max-width: 1200px; margin: 0 auto; padding: 40px 24px 80px;}
.mf_head{text-align: center; margin-bottom: 24px;}
.mf_head h1{font-size: 28px; font-weight: 800; color: var(--tit_black); margin: 0 0 8px;}
.mf_head p{font-size: 15px; color: var(--text_black); margin: 0;}
.mf_card{background: var(--white); border-radius: 12px; padding: 8px 32px 32px; box-shadow: 0 4px 20px rgba(0,0,0,.06);}

/* form_box 는 content.css 규칙을 그대로 사용하되, 데스크톱 좌우배치를 항상 적용 */
.join_form .form_box{flex-direction: row; gap: 0; align-items: flex-start; padding: 24px 0;}
.join_form .form_box .tit{font-size: 16px; width: 200px; flex-shrink: 0; padding-top: 8px;}
.join_form .form_box .con{width: auto; flex: 1; padding: 0 0 0 20px;}
.join_form .form_box:last-child{border-bottom: none;}

/* 입력요소 기본 높이 보정 (원본은 사이트 전역 reset 의존) */
.join_form input[type="text"],
.join_form input[type="url"],
.join_form input[type="tel"],
.join_form select{width: 100%; height: 44px; border: 1px solid #CECECE; border-radius: 4px; padding: 0 10px;}
.join_form textarea{width: 100%; border: 1px solid #CECECE; border-radius: 4px; padding: 10px; min-height: 140px; resize: vertical;}

/* 제품분류 3-select (분류1·2·3) */
.cate_row{display: flex; gap: 6px;}
.cate_row select{flex: 1; min-width: 0;}
/* 표 내부 select/파일 */
.detail_table td select{width: 100%;}
.detail_table td input[type="file"]{width: 100%; font-size: 13px;}

/* 업종 슬롯 / 반복행 */
.mf_ind_slots{display: flex; flex-direction: column; gap: 8px;}
.mf_ind_slots input{cursor: pointer; background: #fafafa;}
.detail_table{width: 100%; border-collapse: collapse; margin-top: 8px;}
.detail_table th, .detail_table td{border: 1px solid #e2e2e2; padding: 8px; font-size: 14px;}
.detail_table th{text-align: center;}
.detail_table thead th{background: #f3f6f8;}
.detail_table td input{width: 100%;}

/* 체크박스/라디오 묶음 */
.input_check{display: flex; flex-wrap: wrap; gap: 10px 20px;}
.input_check span{display: inline-flex; gap: 4px; align-items: center;}
.input_check input{width: auto;}

/* 모달 (mypageCorp 업종검색 모달 구조 차용) */
.modal{position: fixed; inset: 0; z-index: 1000;}
.modal_overlay{position: absolute; inset: 0; background: rgba(0,0,0,.4);}
.modal_box{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: #fff; border-radius: 10px; padding: 10px 20px 20px; box-shadow: 0 10px 40px rgba(0,0,0,.2);}
.modal_header{display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;}
.modal_header h4{margin: 0; font-size: 18px; font-weight: 700;}
/* 모달 닫기: 원본 .modal_box .btn_close 의 font-size:0 + 아이콘스프라이트를 무력화하고 글자 노출 */
.modal_box .btn_close{position: static; width: auto; height: auto; padding: 4px 8px; margin: 0;
    border: none; background: none; font-size: 14px; overflow: visible; cursor: pointer; color: #333;}
/* .btn_form: 원본은 주황배경/흰글자. 여기선 흰배경으로 바꾸므로 글자색도 반드시 함께 지정(흰글자→안보임 방지) */
.btn_form{height: 44px; padding: 0 16px; border: 1px solid #999; background: #fff; color: #333; border-radius: 4px; cursor: pointer; white-space: nowrap;}
.btn_form:hover{background: #f2f2f2;}
.input_row{display: flex; gap: 6px;}
.input_row input{flex: 1;}

/* 섹션 구분 */
.mf_section{margin-top: 36px;}
.mf_section > h2{font-size: 20px; font-weight: 800; color: var(--tit_black); border-bottom: 2px solid var(--blue); padding-bottom: 8px; margin: 0 0 4px;}
.mf_agree_box{padding: 8px 0 4px;}
.mf_agree_box .agree_tit{font-weight: 700; margin: 16px 0 6px;}
.mf_agree_box .agree_desc{font-size: 14px; color: #555; margin: 0 0 8px; line-height: 1.6;}
/* 동의 항목 박스 + 선택 오른쪽 정렬 */
.agree_card{border: 1px solid #ddd; border-radius: 8px; padding: 16px 20px; margin-bottom: 12px; background: #fafbfc;}
.agree_card .agree_tit{margin-top: 0;}
.agree_choice{justify-content: flex-end; margin: 8px 2px 14px;}
/* [기업정보 제공] 카드와 동의 라디오 사이 경고 문구 */
.mf_note{font-size: 13px; color: #d91737; margin: 0 0 8px;}

/* 파일 입력 */
.join_form input[type="file"]{border: 1px solid #ccc; padding: 6px; border-radius: 4px; background: #fff; height: auto;}
.etc_input{margin-top: 8px;}

/* 임시저장 불러오기 버튼 (상단 우측 고정) */
#loadDraftBtn{position: fixed; top: 16px; right: 16px; z-index: 900; padding: 10px 16px; background: var(--blue); color: #fff; border: none; border-radius: 6px; font-size: 14px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.2);}
#loadDraftBtn:hover{background: #0d5fce;}
/* [시연용] 입력양식 세팅 버튼 — 오른쪽 상단 구석 고정 */
#demoFillBtn{position: fixed; top: 16px; right: 16px; z-index: 901; padding: 10px 16px; background: #555; color: #fff; border: none; border-radius: 6px; font-size: 14px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.2);}
#demoFillBtn:hover{background: #333;}
/* 기존 첨부됨 표시 */
.file_saved{margin-left: 8px; font-size: 12px; color: #2ecc71; font-weight: 600;}

/* 커스텀 파일 박스 (파일명 표시 + 선택 버튼) */
.file_box{display: flex; gap: 6px; align-items: center;}
.file_box .file_name{flex: 1; min-width: 0; background: #fff;}

/* 제품·서비스 분야 (선택 + 기타 직접입력) */
.fld_row{display: flex; gap: 6px; margin-bottom: 6px;}
.fld_row select{flex: 0 0 40%;}
.fld_row .fld_etc{flex: 1; min-width: 0;}

/* 글자수 카운터 */
.char_cnt{font-size: 12px; color: #888;}

/* 필수/선택 배지 */
.req{display: inline-block; margin-left: 6px; font-size: 12px; font-weight: 700; color: #d91737; vertical-align: middle;}
.opt{display: inline-block; margin-left: 6px; font-size: 12px; font-weight: 600; color: #888; vertical-align: middle;}

/* 도움말/에러 (content.css 규칙 보조) */
.help{color: var(--text_black);}
.error{color: #d91737;}

/* 이미지·표 가로 넘침 방지 (모든 화면 공통) */
img{max-width: 100%;}

/* ============================================================
   반응형 (태블릿·모바일) — 데스크톱 좌우배치(.tit 200px + .con)를
   좁은 화면에서는 세로 스택으로 전환
   ============================================================ */
@media (max-width: 768px){
    .mf_wrap{padding: 20px 12px 64px;}
    .mf_head{margin-bottom: 16px;}
    .mf_head h1{font-size: 21px; line-height: 1.3;}
    .mf_head p{font-size: 13px;}
    .mf_card{padding: 4px 14px 20px;}

    /* form_box 세로 스택: 라벨 위 / 입력 아래 */
    .join_form .form_box{flex-direction: column; align-items: stretch; padding: 16px 0;}
    .join_form .form_box .tit{width: 100%; padding-top: 0; margin-bottom: 8px;}
    .join_form .form_box .con{width: 100%; flex: none; padding: 0;}

    /* 입력요소는 화면 폭에 맞춤 + iOS 포커스 확대 방지(16px) */
    .join_form input[type="text"],
    .join_form input[type="url"],
    .join_form input[type="tel"],
    .join_form select,
    .join_form textarea{font-size: 16px;}

    /* 섹션 제목 */
    .mf_section{margin-top: 28px;}
    .mf_section > h2{font-size: 18px;}

    /* 동의 카드 */
    .agree_card{padding: 14px 14px;}
    .agree_choice{justify-content: flex-start; margin: 8px 0 12px;}

    /* 제품·서비스 분야: select + 기타입력 세로 스택 */
    .fld_row{flex-direction: column; gap: 6px;}
    .fld_row select{flex: none; width: 100%;}
    .fld_row .fld_etc{width: 100%;}

    /* 제품분류 3-select 등 가로 그룹은 줄바꿈 허용 */
    .cate_row{flex-wrap: wrap;}

    /* 커스텀 파일 박스: 파일명 + 버튼 줄바꿈 */
    .file_box{flex-wrap: wrap;}
    .file_box .file_name{flex: 1 1 100%;}
    .file_box .btn_form{flex: 0 0 auto;}

    /* 인증/수상 표: 셀 여백 축소, 첨부 내부 요소 줄바꿈 */
    .detail_table th, .detail_table td{padding: 6px 5px; font-size: 13px;}
    .detail_table td .file_box{gap: 4px;}
    .detail_table td .btn_form{height: 40px; padding: 0 10px;}

    /* 하단 버튼: 세로 풀폭 스택 */
    .btn_wrap{display: flex; flex-direction: column; gap: 10px;}
    .btn_wrap .btn_big{width: 100%;}

    /* 상단 고정 버튼(불러오기/시연 세팅) 축소 */
    #loadDraftBtn, #demoFillBtn{top: 8px; right: 8px; padding: 8px 12px; font-size: 13px;}

    /* 모달: 화면 폭에 맞추고 세로 스크롤 */
    .modal_box{width: 92vw; max-width: 92vw; max-height: 85vh; overflow-y: auto; padding: 10px 14px 16px;}
    .input_row{flex-wrap: wrap;}
}

/* 초소형(≈360px) 추가 보정 */
@media (max-width: 400px){
    .mf_wrap{padding: 16px 8px 56px;}
    .mf_card{padding: 4px 10px 16px;}
    .mf_head h1{font-size: 19px;}
    .input_check{gap: 8px 12px;}
}

/* ============================================================
   인증/수상 표(.detail_table) — 모바일에서 3열 표를 카드형 세로 스택으로
   (thead 숨김, 각 행을 박스로, 셀을 세로로 쌓고 라벨을 붙임)
   ============================================================ */
@media (max-width: 600px){
    .detail_table{border: none; margin-top: 8px;}
    .detail_table thead{display: none;}                 /* 헤더 숨김 */
    .detail_table, .detail_table tbody, .detail_table tr, .detail_table td{
        display: block; width: 100%;
    }
    .detail_table tr{
        border: 1px solid #e2e2e2; border-radius: 8px;
        padding: 10px 12px; margin-bottom: 10px; background: #fff;
    }
    .detail_table td{border: none; padding: 6px 0; font-size: 14px;}
    /* 셀 위에 항목 라벨 표시(헤더가 숨겨졌으므로) */
    .detail_table td:nth-child(1)::before{content: "명칭"; display: block; font-size: 12px; color: #888; margin-bottom: 4px;}
    .detail_table td:nth-child(2)::before{content: "첨부파일"; display: block; font-size: 12px; color: #888; margin-bottom: 4px;}
    /* 삭제 버튼: 라벨 없이 오른쪽 정렬, 자동 폭 */
    .detail_table td:last-child{text-align: right; padding-top: 2px;}
    .detail_table td:last-child .btn_del{width: auto; height: 38px; padding: 0 14px;}
    .detail_table td input{width: 100%;}
    .detail_table td .file_box{flex-wrap: wrap; gap: 6px;}
    .detail_table td .file_box .file_name{flex: 1 1 100%;}
}