/* ==========================================================================
   서브 콘텐츠 디자인 — 게시판 · 문의 · 회원 · 회사소개 (한국어 서브 레이아웃 전용)
   사용: front/layout/sub_open.php 에서 front.css 다음에 불러옴
   기존 콘텐츠 CSS(board·form·member·contents.css)는 영문 페이지도 쓰므로 직접 고치지 않고,
   이 파일에서 .is-sub 범위로만 새 템플릿 토큰(front.css 2번)에 맞춰 덮어씁니다.
   목차: 1.토큰 연결 2.본문 폭 3.버튼 4.입력 요소 5.게시판 6.문의·폼 7.회원 8.회사소개 9.반응형
   ========================================================================== */

/* ===== 1. 토큰 연결 — 기존 CSS 변수를 새 템플릿 색상(관리자 브랜드 컬러)으로 ===== */
.is-sub {
    --point: var(--c-primary);
    --point-strong: var(--c-primary-dark);
    --point-soft: var(--c-primary-soft);
    --point-faint: color-mix(in srgb, var(--c-primary) 6%, #fff);
    --point-border: color-mix(in srgb, var(--c-primary) 30%, #fff);
    --ink: var(--c-text);
    --ink-2: #3A423E;
    --ink-3: var(--c-muted);
    --ink-4: #9AA19D;
    --line: var(--c-line);
    --line-soft: #EEF0ED;
    --bg-soft: var(--c-bg-soft);
    --input-height: 48px;
    --sub-main: var(--c-primary);          /* contents.css (연혁·비전) */
    --sub-main-p: var(--c-primary-dark);
    --sub-c: var(--c-text);
}

/* ===== 2. 본문 폭 — 기존 .wrap 을 메인과 같은 1200px 컨테이너로 ===== */
.sub-body .sub_contents > .wrap { width: 100%; max-width: calc(var(--inner) + var(--pad-x) * 2); margin: 0 auto; padding: 0 var(--pad-x); }
.sub-body .sub_contents > .wrap .inner { max-width: none; padding: 0; }
.sub-body .sub_container,
.sub-body .sub_contents { padding: 0; margin: 0; }
/* flex·grid 로 바꾼 기존 .clearfix 상자: ::before/::after 가 항목으로 잡혀 간격이 생기므로 숨김 */
.sub-body .bo_top::before, .sub-body .bo_top::after,
.sub-body .btn_wrap::before, .sub-body .btn_wrap::after,
.sub-body .bo_cate_tabs::before, .sub-body .bo_cate_tabs::after,
.sub-body .board_photo_wrap::before { display: none; }

/* ===== 3. 버튼 — 첫 버튼은 주 버튼(메인 .btn-primary), 나머지는 보조(.btn-line) ===== */
.sub-body .btn_wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 40px; }
.sub-body .btn_wrap .btn,
.sub-body .bo_footer .btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 120px; height: 48px; padding: 0 24px; margin: 0;
    border: 1px solid var(--c-line); border-radius: var(--radius-sm);
    background: #fff; color: var(--c-text);
    font-size: var(--fs-sm); font-weight: 600; line-height: 1;
}
.sub-body .btn_wrap .btn:hover,
.sub-body .bo_footer .btn:hover { border-color: var(--c-primary); background: #fff; color: var(--c-primary); }
.sub-body .btn_wrap > .btn:first-child,
.sub-body .bo_footer .btn_right > .btn:only-child {
    border-color: var(--c-primary); background: var(--c-primary); color: #fff;
}
.sub-body .btn_wrap > .btn:first-child:hover,
.sub-body .bo_footer .btn_right > .btn:only-child:hover { border-color: var(--c-primary-dark); background: var(--c-primary-dark); color: #fff; }

/* ===== 4. 입력 요소 ===== */
.sub-body input[type="text"], .sub-body input[type="password"], .sub-body input[type="email"],
.sub-body input[type="tel"], .sub-body input[type="number"], .sub-body select, .sub-body textarea {
    border: 1px solid var(--c-line); border-radius: var(--radius-sm); background-color: #fff; font-size: 15px;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.sub-body input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):focus,
.sub-body select:focus, .sub-body textarea:focus { outline: 0; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-soft); }
.sub-body ::placeholder { color: #9AA19D; }
.sub-body textarea { padding: 14px 16px; line-height: 1.6; }

/* ===== 5. 게시판 ===== */
/* 5-1. 상단 검색 · 카테고리 */
.sub-body .bo_top { display: flex; justify-content: flex-end; margin-bottom: 24px; }
.sub-body .bo_top .search { display: flex; gap: 8px; }
.sub-body .bo_top .search input[type="submit"] { min-width: 88px; height: var(--input-height); border-radius: var(--radius-sm); background: var(--c-text); font-weight: 600; }
.sub-body .bo_top .search input[type="submit"]:hover { background: var(--c-primary); }
.sub-body .bo_cate_tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.sub-body .bo_cate_tabs li { float: none; margin: 0; }
.sub-body .bo_cate_tabs a { display: inline-flex; align-items: center; height: 38px; padding: 0 18px; border: 1px solid var(--c-line); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 600; color: var(--c-muted); }
.sub-body .bo_cate_tabs a:hover { border-color: var(--c-primary); color: var(--c-primary); }
.sub-body .bo_cate_tabs a.on { border-color: var(--c-primary); background: var(--c-primary); color: #fff; }

/* 5-2. 목록 (기본형) */
.sub-body .bo_basic_list table { border-top: 2px solid var(--c-text); }
.sub-body .bo_basic_list thead th { padding: 16px 8px; background: #fff; font-size: 15px; color: var(--c-text); border-bottom: 1px solid var(--c-line); }
.sub-body .bo_basic_list tbody td { padding: 20px 8px; font-size: 15px; color: var(--c-muted); border-bottom: 1px solid var(--c-line); }
.sub-body .bo_basic_list tbody td.tdb a { color: var(--c-text); font-weight: 500; transition: color .2s var(--ease); }
.sub-body .bo_basic_list tbody tr:hover td.tdb a { color: var(--c-primary); }
.sub-body .bo_basic_list .tdb .new,
.sub-body .board_photo_wrap .new { background: var(--c-primary); }
.sub-body .no_reulst,
.sub-body .board_photo_wrap .no_result { padding: 80px 0 !important; text-align: center; color: var(--c-muted); }

/* 5-3. 목록 (갤러리형) — 메인 포트폴리오 카드와 같은 구성 */
.sub-body .board_photo_wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px var(--gap); margin: 0; }
.sub-body .board_photo_wrap::after { display: none; }
.sub-body .board_photo_wrap > li { float: none; width: auto; margin: 0; padding: 0; }
.sub-body .board_photo_wrap > li.no_result { grid-column: 1 / -1; border-top: 2px solid var(--c-text); border-bottom: 1px solid var(--c-line); }
.sub-body .board_photo_wrap .image { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: var(--c-bg-soft); }
.sub-body .board_photo_wrap .image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.sub-body .board_photo_wrap a:hover .image img { transform: scale(1.04); }
.sub-body .board_photo_wrap .tit { display: flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 17px; font-weight: 600; color: var(--c-text); }
.sub-body .board_photo_wrap .tit .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub-body .board_photo_wrap .contents { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 6px; font-size: 14px; color: var(--c-muted); }
.sub-body .board_photo_wrap .date { display: block; margin-top: 10px; font-size: 13px; color: #9AA19D; }

/* 5-4. 하단 페이지 번호 · 버튼 */
.sub-body .bo_footer { margin-top: 40px; }
.sub-body .bo_footer .btn_wrap { justify-content: flex-end; margin-top: 24px; }
.sub-body .bo_footer .btn_right { display: flex; flex-wrap: wrap; gap: 8px; float: none; }
.sub-body .bo_pagenate .paging a { border-radius: var(--radius-sm); color: var(--c-muted); }
.sub-body .bo_pagenate .paging a:hover { background: var(--c-bg-soft); color: var(--c-text); }
.sub-body .bo_pagenate .paging li.current a.on { background: var(--c-primary); color: #fff; }
.sub-body .bo_pagenate .paging a.first, .sub-body .bo_pagenate .paging a.prev,
.sub-body .bo_pagenate .paging a.next, .sub-body .bo_pagenate .paging a.end { color: var(--c-text); }

/* 5-5. 상세 */
.sub-body .bo_basic_view table { border-top: 2px solid var(--c-text); }
.sub-body .bo_basic_view thead th { padding: 32px 8px 28px; background: #fff; text-align: left; border-bottom: 1px solid var(--c-line); }
.sub-body .bo_basic_view thead .tit { display: block; font-size: clamp(20px, 2vw, 26px); font-weight: 700; line-height: 1.4; letter-spacing: -.01em; color: var(--c-text); }
.sub-body .bo_basic_view thead .meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; font-size: 14px; font-weight: 400; color: var(--c-muted); }
.sub-body .bo_basic_view td.con { padding: 40px 8px; border-bottom: 1px solid var(--c-line); }
.sub-body .bo_basic_view .bbs_file_t { margin-top: 40px; padding: 20px 24px; border-radius: var(--radius-sm); background: var(--c-bg-soft); }
.sub-body .bo_basic_view .bbs_file:hover { color: var(--c-primary); }
.sub-body .post_tags a { color: var(--c-primary); }
.sub-body .bo_pn { margin-top: 0; border-bottom: 1px solid var(--c-line); }
.sub-body .bo_pn li { display: flex; gap: 24px; padding: 16px 8px; border-top: 1px solid var(--c-line); }
.sub-body .bo_pn li:first-child { border-top: 0; }
.sub-body .bo_pn .lb { flex: none; width: 56px; font-weight: 600; color: var(--c-text); }
.sub-body .bo_pn a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-muted); }
.sub-body .bo_pn a:hover { color: var(--c-primary); }
.sub-body .bo_footer .btn_left .btn { min-width: 0; }

/* 5-6. 댓글 */
.sub-body .comment_area { margin-top: 64px; }
.sub-body .comment_area .write textarea { border-radius: var(--radius-sm); }
.sub-body .comment_area .write .submit { border-radius: var(--radius-sm); background: var(--c-primary); color: #fff; }
.sub-body .comment_area .write .submit:hover { background: var(--c-primary-dark); }

/* 5-7. 비회원 비밀번호 확인 팝업 */
.is-sub .pw_layer_popup .pwd_popup_wrap { border-radius: var(--radius); }
.is-sub .pw_layer_popup .btn_submit { background: var(--c-primary); }
.is-sub .pw_layer_popup .btn_submit:hover { background: var(--c-primary-dark); }

/* ===== 6. 문의 · 공통 입력 폼 ===== */
.sub-body .form_wrap .form_info { margin-bottom: 32px; padding: 24px 28px; border: 0; border-left: 4px solid var(--c-primary); border-radius: var(--radius-sm); background: var(--c-bg-soft); color: var(--c-muted); }
.sub-body .form_wrap .form_table { border-top: 2px solid var(--c-text); }
.sub-body .form_wrap .form_table tbody tr { border-bottom: 1px solid var(--c-line); }
.sub-body .form_wrap .form_table tbody tr th { background: #fff; color: var(--c-text); font-weight: 600; }
.sub-body .form_wrap .custom-file-btn,
.sub-body .form_wrap .address .postcode .search_btn { border-radius: var(--radius-sm); background: var(--c-text); }
.sub-body .form_wrap .custom-file-btn:hover,
.sub-body .form_wrap .address .postcode .search_btn:hover { background: var(--c-primary); }
.sub-body .form_wrap .agree,
.sub-body .fm_agree_box { border: 1px solid var(--c-line); border-radius: var(--radius-sm); background: var(--c-bg-soft); }

/* ===== 7. 회원 ===== */
.sub-body .member .login_box { border-color: var(--c-line); border-radius: var(--radius); box-shadow: var(--shadow); }
.sub-body .member .login_box .btn_login input { height: 52px; border-radius: var(--radius-sm); background: var(--c-primary); font-weight: 600; }
.sub-body .member .login_box .btn_login input:hover { background: var(--c-primary-dark); }

/* ===== 8. 회사소개 (contents.css 의 고정 색상을 주색으로) ===== */
/* 8-1. 연혁 */
.sub-body .history { font-size: var(--fs-base); }
.sub-body .history_top { font-size: clamp(32px, 3.4vw, 46px); }
.sub-body .history_top::before,
.sub-body .history_top::after { background: var(--c-primary); }
.sub-body .history_top p { background: linear-gradient(145deg, var(--c-primary), var(--c-primary-dark)); box-shadow: 0 30px 50px -20px color-mix(in srgb, var(--c-primary) 60%, transparent); }
.sub-body .history h3 { color: var(--c-text); }
.sub-body .history ol > li:first-child h3,
.sub-body .history ul b { color: var(--c-primary); }
.sub-body .history ul { font-size: 17px; color: var(--c-muted); }
.sub-body .history .imgs img { border-radius: var(--radius); }

/* 8-2. 비전 */
.sub-body .vision_num { background: var(--c-line); color: #fff; }
.sub-body .vision_item.is-active .vision_num { background: var(--c-primary); }
.sub-body .vision_tit h3 { color: #A9B0AC; }
.sub-body .vision_item.is-active .vision_tit h3 { color: var(--c-text); }
.sub-body .vision_desc { color: #A9B0AC; }
.sub-body .vision_desc b { color: color-mix(in srgb, var(--c-primary) 50%, #fff); }
.sub-body .vision_item.is-active .vision_desc { color: var(--c-muted); }
.sub-body .vision_item.is-active .vision_desc b { color: var(--c-primary); }
.sub-body .vision_img img { border-radius: var(--radius); }

/* 8-3. 오시는 길 */
.sub-body .loac_wrap { margin: 0; padding: 0; }   /* 기존 반응형 margin-top 40/30px 제거 */
.sub-body .loac_map { height: clamp(300px, 36vw, 460px); margin: 0 0 40px; border-radius: var(--radius); background: var(--c-bg-soft); }
.sub-body .loac h2 { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -.02em; }
.sub-body .loac h2 b { color: var(--c-primary); }
.sub-body .loac h2::after { margin-top: 20px; background: var(--c-line); }
.sub-body .info-item { align-items: center; margin-bottom: 16px; }
.sub-body .info-item dt { flex-basis: 72px; padding: 6px 0; border-radius: 999px; background: var(--c-primary-soft); color: var(--c-primary-dark); font-size: 13px; font-style: normal; letter-spacing: .08em; }
.sub-body .info-item dd { padding-top: 0; font-size: 17px; font-style: normal; color: var(--c-text); }
.sub-body .loac address { font-style: normal; }

/* ===== 9. 반응형 ===== */
@media (max-width: 1023px) {
    .sub-body .board_photo_wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .sub-body .bo_top { justify-content: stretch; }
    .sub-body .bo_top .search { flex-wrap: wrap; width: 100%; }
    .sub-body .bo_top .search select.bo_field { width: 100%; }
    .sub-body .bo_top .search input[type="text"] { flex: 1; width: auto; min-width: 0; }
    .sub-body .board_photo_wrap { grid-template-columns: 1fr; gap: 32px; }
    .sub-body .bo_basic_view thead th { padding: 24px 4px 20px; }
    .sub-body .bo_basic_view td.con { padding: 28px 4px; }
    .sub-body .bo_footer .btn_wrap { justify-content: center; }
    .sub-body .btn_wrap .btn, .sub-body .bo_footer .btn { min-width: 0; flex: 1 1 auto; height: 46px; padding: 0 16px; }
    .sub-body .form_wrap .form_info { padding: 18px 20px; }
}