@charset "utf-8";
/* [Common] Pagination - 모든 리스트 하단 공통 */
.pagination { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 8rem 0 0; }
.pagination a, .pagination span {
   display: flex !important;
    align-items: center !important;     /* 수직 중앙 정렬 */
    justify-content: center !important;   /* 수평 중앙 정렬 */
    line-height: 1 !important;
    width: 38px; height: 38px;
    border: 1px solid var(--gray_dd); font-size: 14px; color: var(--gray_6);
    text-decoration: none !important; border-radius: 4px; background-color: var(--white);
    transition: all 0.2s ease;
}
/* ★ 중요: 아이콘 자체의 위치 보정 */
.pagination a i, .pagination a svg {
    display: block !important;
    line-height: 0 !important; /* 아이콘 텍스트 여백 제거 */
    margin: 0 !important;
}
.pagination a:hover { border-color: var(--point); color: var(--point); background-color: #f8f9fa; }
.pagination .active, .pagination .on {
    background-color: var(--point) !important; color: var(--white) !important;
    border-color: var(--point) !important; font-weight: 700; cursor: default;
}
.pagination .pg_control { background-color: var(--gray_f9); color: var(--gray_3); font-size: 12px; }

@media screen and (max-width: 768px) {
    .pagination { gap: 4px; margin: 30px 0; }
    .pagination a, .pagination span { width: 32px; height: 32px; font-size: 13px; }
}
.wrap.cms_board form {
    padding-bottom: 3rem;
    box-shadow: var(--shadow_lg) !important;
    border-radius: 0 0 var(--br_l) var(--br_l);
}
/* [핵심] 셀렉트 박스 화살표 강제 노출 */
.cms_board .write_input select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;

    /* 화살표 아이콘: 색상을 더 진하게(#333), 굵기를 3으로 조정하여 시인성 확보 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: calc(100% - 10px) center !important; /* 우측 끝에서 10px 지점 */
    background-size: 14px !important;

    padding-right: 30px !important; /* 화살표와 텍스트 겹침 방지 */
    background-color: #ffffff !important;
    cursor: pointer;

    /* 기존 스타일 유지 */
    height: 45px;
    border: 1px solid var(--gray_dd);
    border-radius: var(--br_s);
    box-sizing: border-box;
}

/* IE 10, 11에서 기본 화살표 숨기기 */
.cms_board .write_input select::-ms-expand {
    display: none;
}

/* 포커스 되었을 때 테두리 색상 (선택 사항) */
.cms_board .write_input select:focus {
    border-color: var(--point);
    outline: none;
}
/* [1] 게시판 큰 틀 (Common) */
.cms_board { width: 100%;}

/* [2] 리스트 모드 (List) */
.cms_board .board_grid {
    display: grid;
    grid-template-columns: 90px 1fr 140px 100px;
    align-items: center;
    border-bottom: var(--border_g) !important;
}

/* 항목 숨기기 유틸리티 */
.cms_board .board_grid.no_num { grid-template-columns: 0 1fr 140px 100px; }
.cms_board .board_grid.no_date { grid-template-columns: 90px 1fr 0 100px; }
.cms_board .board_grid.no_hit { grid-template-columns: 90px 1fr 140px 0; }

.cms_board .no_num .grid_num,
.cms_board .no_date .grid_date,
.cms_board .no_hit .grid_hit { display: none !important; }

.cms_board .board_header {
    border-top: 2px solid var(--point) !important;
    background-color: var(--gray_f9);
    font-weight: 700;
    padding: 15px 0;
    text-align: center;
}
.cms_board .board_item { padding: 18px 0; transition: background 0.2s; }
.cms_board .board_item:hover { background-color: #fcfcfc; }
.cms_board .grid_subject { padding: 0 30px; text-align: left; }
.cms_board .grid_num,
.cms_board .grid_date,
.cms_board .grid_hit { text-align: center; color: var(--gray_6); }
.cms_board .grid_subject a {
    color: var(--gray_3);
    text-decoration: none; /* 기본 상태는 밑줄 없음 */
    transition: color 0.2s;

    /* 한 줄 말줄임표 유지 */
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cms_board .board_item:hover .grid_subject a {
    color: var(--point);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

.cms_board .board_item.notice .grid_subject a {
    font-weight: 700;
    color: var(--gray_3);
}
/* [3] 읽기 모드 (View) */
.cms_board .board_view { border-top: 2px solid var(--point); }
.cms_board .view_head { padding: 30px; background: var(--white); border-bottom: var(--border_g); }
.cms_board .view_head .v_tit { font-size: 24px; font-weight: 700; margin-bottom: 15px; line-height: 1.4; color: var(--gray_2); }
.cms_board .view_info { display: flex; gap: 20px; color: var(--gray_8); font-size: 14px; }
.cms_board .view_info b { color: var(--gray_3); margin-right: 5px; }

.cms_board .view_content { padding: 50px 30px; line-height: 1.8; min-height: 300px; border-bottom: var(--border_g); color: var(--gray_4);}
.cms_board .view_file { padding: 15px 30px; background: #f8f9fa; border-bottom: var(--border_g); font-size: 14px; }

/* [4] 쓰기 모드 (Write/Form) */
.cms_board .board_write { border-top: 2px solid var(--point); }
.cms_board .write_row { display: flex; border-bottom: var(--border_g); align-items: center; }
.cms_board .write_label { width: 160px; background: var(--gray_f9); padding: 20px; font-weight: 600; color: var(--gray_3); align-self: stretch; display: flex; align-items: center; }
.cms_board .write_input { flex: 1; padding: 10px 20px; min-width: 0; } /* min-width 추가로 튕김 방지 */

.cms_board .write_input input[type="text"],
.cms_board .write_input input[type="password"],
.cms_board .write_input select {
    height: 45px; border: 1px solid var(--gray_dd); padding: 0 15px; border-radius: var(--br_s);
    box-sizing: border-box; /* 패딩 포함 너비 계산 */
}
.cms_board .write_input input[type="text"] { width: 100%; }
.cms_board .write_input input[type="password"] { width: 200px; max-width: 100%; } /* 모바일에서 200px보다 작아질 수 있게 */
.cms_board .write_input textarea {
    width: 100%; height: 400px; border: 1px solid var(--gray_dd); padding: 15px; border-radius: var(--br_s); resize: none; margin: 10px 0; display: block;
    box-sizing: border-box;
}
/* 모바일 대응: 3칸이 너무 좁아지지 않게 처리 */
@media screen and (max-width: 600px) {
    .cms_board .write_input .d_flex.gap2 {
        max-width: 100% !important;
    }
    .cms_board .write_input select,
    .cms_board .write_input input[type="text"] {
        padding: 0 5px !important; /* 모바일은 내부 여백을 줄임 */
        font-size: 13px;
    }
    .cms_board .write_input select {
        padding-right: 25px !important; /* 화살표 공간은 유지 */
    }
}

/* [5] 비밀번호 확인 및 로그인 (Password Check & Login) */
.cms_board .board_password_check {
    max-width: 400px;
    margin: 0 auto;
    padding: 40px 30px;
    border: var(--border_g);
    border-top: 3px solid var(--point);
    background: var(--white);
    text-align: center;
    box-shadow: 0 15px 40px rgba(0,0,0,0.05);
    border-radius: 0 0 var(--br_s) var(--br_s);
    box-sizing: border-box; /* 패딩 포함 계산 */
}

.cms_board .pass_icon {
    font-size: 38px;
    color: var(--point);
    margin-bottom: 20px;
}

.cms_board .pass_txt {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--gray_2);
}

.cms_board .pass_sub {
    font-size: 14px;
    color: var(--gray_6);
    line-height: 1.6;
    margin-bottom: 35px;
}

/* 폼 컨테이너: 내부 모든 요소를 100%로 강제 */
.cms_board .pass_form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px; /* 입력창 간 간격 */
    width: 100%;
    max-width: 320px; /* 내부 요소들의 고정 너비 */
    margin: 0 auto;
}

/* 아이디/비밀번호 입력창 통합 스타일 */
.cms_board .pass_form input[type="text"],
.cms_board .pass_form input[type="password"] {
    width: 100% !important;
    max-width: 100% !important;
    height: 48px;
    border: 1px solid var(--gray_dd);
    text-align: center;
    font-size: 16px;
    border-radius: var(--br_s);
    background-color: var(--gray_f9);
    transition: all 0.2s;
    box-sizing: border-box !important; /* 중요: 테두리가 너비를 먹지 않게 */
}

.cms_board .pass_form input:focus {
    border-color: var(--point);
    outline: none;
    background-color: var(--white);
    box-shadow: 0 0 0 3px rgba(var(--point_rgb), 0.1);
}

/* 하단 버튼 영역: 입력창과 동일한 너비 100% 유지 */
.cms_board .pass_btns {
    display: flex;
    gap: 10px;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 10px;
    box-sizing: border-box !important;
}

/* 버튼 개별 스타일: 높이 48px로 입력창과 통일 */
.cms_board .pass_btns .btn_common {
    flex: 1; /* 버튼이 두 개일 때 5:5 비율 */
    height: 48px;
    font-size: 16px;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 포인트 버튼 강제 적용 */
.cms_board .btn_point {
    background-color: var(--point) !important;
    color: var(--white) !important;
    border: 1px solid var(--point) !important;
}

/* 모바일 대응 (768px 이하) */
@media screen and (max-width: 768px) {
    .cms_board .board_password_check {
        margin: 50px 20px;
        padding: 40px 20px;
    }
    .cms_board .pass_form {
        max-width: 100%; /* 모바일에서는 가로 꽉 차게 */
    }
}
/* [6] 버튼 공통 - 높이 값 고정 및 스타일 강화 */
.cms_board .board_btns { display: flex; justify-content: center; gap: 10px; margin-top: 40px; }

.cms_board .btn_common {
    display: inline-flex; align-items: center; justify-content: center;
    height: 48px; /* 높이 명시적 고정 */
    padding: 0 35px; /* 세로 패딩 제거, 가로만 유지 */
    border-radius: var(--br_s);
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
    border: 1px solid var(--gray_dd);
    background: var(--white);
    color: var(--gray_3);
    font-size: 15px;
    box-sizing: border-box; /* 높이 계산 정확하게 */
}

/* btn_point가 안 먹을 때를 대비해 클래스 경로를 명확히 지정 */
.cms_board .btn_point,
.cms_board .btn_common.btn_point {
    background-color: var(--point) !important;
    color: var(--white) !important;
    border: 1px solid var(--point) !important;
}

.cms_board .btn_point:hover { opacity: 0.9; }


/* --- [7] 모바일 반응형 (768px 이하) --- */
@media screen and (max-width: 768px) {
    /* 리스트: 날짜와 조회수 숨기기 (선택사항, 공간 부족 시) */
    .cms_board .board_grid {
        grid-template-columns: 60px 1fr; /* 번호와 제목만 노출하거나 비율 조정 */
    }
    .cms_board .grid_date,
    .cms_board .grid_hit { display: none; }

    /* 글쓰기: 레이블 위로 보내기 (핵심) */
    .cms_board .write_row {
        flex-direction: column;
        align-items: flex-start;
    }
    .cms_board .write_label {
        width: 100%;
        padding: 10px 20px;
        background: var(--gray_f8); /* 모바일용 가벼운 배경 */
        border-bottom: var(--border_g);
        box-sizing: border-box;
    }
    .cms_board .write_input {
        width: 100% ;
        padding: 15px 20px;
        box-sizing: border-box;
    }

    .cms_board .write_input input:not([type="checkbox"]):not([type="radio"]),
    .cms_board .write_input select,
    .cms_board .write_input textarea {
        width: 100% !important;
        box-sizing: border-box;
    }

    .cms_board .write_input input[id="user_zip"] {
        width: calc(100% - 100px) !important; /* 버튼 너비만큼 제외하거나 auto */
        display: inline-block;
        vertical-align: middle;
    }
    .cms_board .write_input .btn_zip,
    .cms_board .write_input button {
        display: inline-block;
        vertical-align: middle;
        margin-left: 5px;
    }
    .cms_board .write_input input[type="password"] {
        width: 100% !important; /* 모바일에서는 비번 창도 넓게 */
    }
    .cms_board .write_input textarea {
        height: 300px; /* 모바일은 조금 짧게 */
    }

    /* 버튼: 가로로 꽉 채우기 */
    .cms_board .board_btns {
        padding: 0 0px;
    }
    .cms_board .btn_common {
        flex: 1; /* 버튼들이 동일한 비율로 가로 꽉 참 */
        padding: 12px 10px;
        font-size: 13px;
    }

    /* 비밀번호 확인 창 */
    .cms_board .pass_check_wrap {
        margin: 50px 20px;
        padding: 30px 20px;
    }
}


/* --- [8] 무료체험 신청현황 전용 (추가) --- */
/* 무료체험 현황 전용: 기존 디자인은 유지하고 비율/정렬만 변경 */
.cms_board .trial_status_grid {
    grid-template-columns: repeat(4, 1fr) !important;
}

.cms_board .trial_status_grid > div {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* 모바일 대응 (전화번호 숨김) */
@media screen and (max-width: 600px) {
    .cms_board .trial_status_grid {
        /* 앞의 3개는 똑같이 나눠 갖고(1fr), 마지막만 100px 고정 */
        grid-template-columns: repeat(3, 1fr) 100px !important;
    }

    /* 혹시 모바일에서 글자가 너무 크면 줄여주는 센스 */
    .cms_board .trial_status_grid > div {
        font-size: 13px;
        padding: 0 5px;
    }
}


/* --- [9] 약관 동의 및 주소 스타일 --- */

/* 1. 공통 여백 및 기본 설정 */
.cur_ptr { cursor: pointer; user-select: none; }

/* 2. 주소 입력창 전용 (필요시 추가) */
.write_input input[readonly] { background-color: var(--gray_f4); cursor: default; }

/* 3. 기타문의 textarea 높이 고정 */
textarea[name="user_memo"] {
    width: 100%;
    height: 100px !important;
    padding: 15px;
    resize: none;
    border: 1px solid var(--gray_dd);
    font-family: inherit;
}

/* 4. 약관 스크롤 박스 */
.agree_row .write_input { padding-top: 25px; padding-bottom: 25px; }

.agree_scroll_txt {
    width: 100%;
    height: 150px;
    overflow-y: scroll;
    background: var(--gray_f9);
    border: 1px solid var(--gray_dd);
    padding: 15px;
    white-space: pre-line; /* 들여쓰기 무시, 줄바꿈 유지 (가장 적절함) */
    text-align: left;
    color: var(--gray_6);
    border-radius: var(--br_s) 0 0 var(--br_s);
}

/* 스크롤바 디자인 (크롬/사파리/엣지) */
.agree_scroll_txt::-webkit-scrollbar { width: 6px; }
.agree_scroll_txt::-webkit-scrollbar-thumb { background: #ccc; border-radius: 10px; }
.agree_scroll_txt::-webkit-scrollbar-track { background: var(--gray_f1); }



/* 약관 공통 스타일 */
.term_content { line-height: 1.6; color: var(--gray_4); }
.term_content h2 { font-size: 18px; margin-bottom: 20px; color: var(--gray_0); border-bottom: 2px solid var(--gray_3); padding-bottom: 10px; }
.term_content h3 { font-size: 15px; margin-top: 25px; margin-bottom: 10px; color: var(--gray_2); }
.term_content p { margin-bottom: 10px; font-size: 14px; }
.term_content ul, .term_content ol { margin-bottom: 15px; padding-left: 20px; font-size: 14px; }
.term_content li { margin-bottom: 5px; }

/* 표 스타일 */
.term_table { width: 100%; border-collapse: collapse; margin: 15px 0; font-size: 13px; }
.term_table caption { text-align: left; font-weight: bold; margin-bottom: 5px; color: var(--gray_6); }
.term_table th, .term_table td { border: 1px solid var(--gray_dd); padding: 10px; text-align: left; }
.term_table th { background: var(--gray_f4); color: var(--gray_3); }
.term_table a { color: #007bff; text-decoration: none; }

/* 부칙 스타일 */
.term_footer { margin-top: 30px; padding-top: 15px; border-top: var(--border_g); font-size: 13px; color: var(--gray_6); }



/* 모바일 대응 */
@media screen and (max-width: 600px) {
    /* 약관 박스 자체 설정 */
    .agree_scroll_txt {
        height: 120px; /* 100px은 너무 답답할 수 있어 살짝 키움 */
        padding: 12px;
        font-size: 13px; /* 모바일 약관은 13px(0.8rem 내외)이 가장 적당합니다 */
        line-height: 1.5;
    }

    /* [핵심] 박스 내부의 개별 태그들 크기를 강제로 줄임 */
    .agree_scroll_txt .term_content h2 {
        font-size: 14px !important;
        margin-bottom: 12px;
        padding-bottom: 5px;
    }
    .agree_scroll_txt .term_content h3 {
        font-size: 13px !important;
        margin-top: 15px;
    }
    .agree_scroll_txt .term_content p,
    .agree_scroll_txt .term_content li,
    .agree_scroll_txt .term_content ul,
    .agree_scroll_txt .term_content ol {
        font-size: 12px !important; /* 본문은 12px로 작게 조정 */
        margin-bottom: 5px;
    }

    /* 표(Table) 자막 및 내용 축소 */
    .agree_scroll_txt .term_table {
        font-size: 11px !important;
    }
    .agree_scroll_txt .term_table th,
    .agree_scroll_txt .term_table td {
        padding: 6px 4px;
    }

    .write_row .write_label { margin-bottom: 0px; }
}
/* [로그인 & 비번확인] 입력창-버튼 너비 100% 일치화 */

.login_box {
    margin-top: 50px !important;
    margin-bottom: 50px !important;
}

/* 폼 컨테이너: 내부 요소들을 중앙으로 모으고 너비 고정 */
.cms_board .pass_form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 320px; /* 메인/리셀러 공통 최적 너비 */
    margin: 0 auto;
}

/* 아이디, 비밀번호 입력창 스타일 통합 */
.cms_board .pass_form input[type="text"],
.cms_board .pass_form input[type="password"],
.cms_board .pass_form .login_input {
    width: 100% !important;
    max-width: 100% !important;
    height: 48px !important; /* 높이 고정 */
    border: 1px solid var(--gray_dd) !important;
    text-align: center;
    font-size: 16px;
    border-radius: var(--br_s);
    background-color: var(--gray_f9);
    transition: all 0.2s;
    box-sizing: border-box !important; /* 테두리가 너비를 먹지 않게 함 */
    padding: 0 15px !important;
}

/* 포커스 효과 */
.cms_board .pass_form input:focus {
    border-color: var(--point) !important;
    outline: none;
    background-color: var(--white);
    box-shadow: 0 0 0 3px rgba(var(--point_rgb), 0.1);
}

/* 버튼 영역: 부모 너비 100% 유지 */
.cms_board .pass_btns {
    display: flex;
    gap: 10px;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 10px !important;
    box-sizing: border-box !important;
}

/* 버튼 개별 스타일: 입력창과 높이/너비 완벽 일치 */
.cms_board .pass_btns .btn_common {
    flex: 1; /* 취소/로그인 버튼이 5:5로 정렬 */
    height: 48px !important; /* 입력창과 높이 통일 */
    font-size: 16px;
    font-weight: 600;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* 포인트 버튼 색상 강제 */
.cms_board .btn_point {
    background-color: var(--point) !important;
    color: var(--white) !important;
    border: 1px solid var(--point) !important;
}

/* 하단 홈으로 | 비번찾기 영역 */
.login_footer {
    width: 100%;
    max-width: 320px;
    margin-top: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    font-size: 14px;
    color: var(--gray_6);
}

.login_footer a { color: var(--gray_6); text-decoration: none; transition: 0.2s; }
.login_footer a:hover { color: var(--point); }

/* 모바일 대응 */
@media screen and (max-width: 768px) {
    .cms_board .pass_form,
    .login_footer {
        max-width: 100%; /* 모바일에서는 여백에 따라 유동적으로 */
    }
}