/* ========================
   view/common에 있는 CSS들!!!!!!
   ======================== */


/* ========================
   공통 표 스타일 (kv형 / group형 / multi_group형 공용)
   ======================== */
#sub_content{
    padding: 260px 0 100px;
}

/* ========================
   sub_layout : 사이드바(20%) + 콘텐츠(80%) 2단 레이아웃
   ※ .center는 폭/margin만 담당, 이 레이아웃 구조와는 분리
   ======================== */
.sub_layout {
    display: flex;
    align-items: flex-start;
    gap: 0 40px;
}

.sub_layout_side {
    width: 20%;
    flex-shrink: 0;
}

.sub_layout_content {
    width: 100%;
    flex: 1;
    min-width: 0;
}

.sub_table {
    width: 100%;
    border-collapse: collapse;
    border-top: 3px solid var(--blue);
}

.sub_table th {
    background-color: #F8F8F8;
    color: var(--blue);
    font-weight: bold;
    padding: 18px 24px;
    border-bottom: 1px solid #D7D7D7;
    text-align: center;
    border-right: 1px solid #D7D7D7;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.sub_table th:last-child {
    border-right: none;
}
.sub_table td {
    padding: 20px 24px;
    border-bottom: 1px solid #D7D7D7;
    vertical-align: middle;
    color: #222;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.sub_table td.td_label,
.sub_table td.td_group {
    width: 20%;
    background-color: #F8F8F8;
    color: var(--blue);
    font-weight: bold;
    text-align: left;
}

.sub_table td.td_group.td_group2{
    background-color: #FFF;
    text-align: center;
    color: #222;
    font-weight: 400;
}

.sub_table td.td_label,
.sub_table td.td_group{
    border-right: 1px solid #D7D7D7;
}

.multi_group_table,
.sub_table.group_table td.td_group,
.group_table{
    text-align: center;
}
.sub_table.multi_group_table td.td_group {
    text-align: center;
}

/* ========================
   sub_title / breadcrumb 공통
   ======================== */
.sub_title_wrap {
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
}

.sub_title {
    color: #111111;
}

.sub_share_btn {
    width: 44px;
    height: 44px;
    border: 1px solid #dddddd;
    border-radius: 8px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    display: none;
}

.sub_share_btn i {
    color: #555555;
}

.sub_breadcrumb {
    gap: 0 8px;
    margin-bottom: 30px;
    color: #555555;
}

.bc_home i,
.bc_arrow i {
    color: #555555;
}

.sub_breadcrumb li {
    cursor: pointer;
}

.bc_current {
    color: #555555;
    cursor: default;
}

/* ========================
   side_menu 공통 (모바일/서브 아코디언)
   ======================== */
.side_menu {
    width: 100%;
    background-color: #fff;
    border-radius: 16px;
    overflow: hidden;

}
.sm_head {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    height: 160px;
    padding: 24px 30px;
    display: flex;
    align-items: flex-end;
    background-image: url(../images/sm_head_bg.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 16px;
    overflow: hidden;
}


.sm_head_title {
    position: relative;
    z-index: 1;
    color: #fff;
}

.sm_group_list {
    border:1px solid #D7D7D7;
    border-radius: 15px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.sm_group + .sm_group {
    border-top: 1px solid #eeeeee;
}

.sm_group_head {
    width: 100%;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: transparent;
    border: 0;
    color: #222222;
    cursor: pointer;
}

.sm_arrow {
    color: #999999;
    transition: transform .3s;
}

/* 열린 그룹: 밑줄 강조 + 화살표 위로 회전 */
.sm_group.on .sm_group_head {
    border-bottom: 2px solid var(--blue);
    color: var(--blue);
    background-color: #F8F8F8;
}

.sm_group.on .sm_arrow {
    color: var(--blue);
    transform: rotate(180deg);
}

.sm_link_list {
    display: none;
    flex-direction: column;
    padding: 4px 0 10px;
}

.sm_group.on .sm_link_list {
    display: flex;
}

.sm_link {
    padding: 12px;
    color: #555555;
    cursor: pointer;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.sm_link:hover{
    color: var(--blue);
}
.sm_dot {
    color: #cccccc;
    margin-right: 6px;
}

/* 현재 보고 있는 페이지: 연하늘 배경 + 파란 굵은 글씨 */
.sm_link.active {
    font-weight: bold;
}

.sm_link.active .sm_dot {
    color: var(--blue);
}

/* ========================
   intro_box 공통 (아이콘 + 제목 + 설명)
   ======================== */

.intro_box {
    align-items: flex-start;
    gap: 0 24px;
    padding: 30px 40px;
    background-color: #eef4fb;
    border-radius: 12px;
}

.intro_icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.intro_icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.intro_title {
    color: #111111;
    margin-bottom: 12px;
}

.intro_subtitle {
    color: #111111;
    margin-bottom: 12px;
}

.intro_desc p {
    color: #333333;
    line-height: 1.7;
}

.intro_desc strong {
    color: #111111;
}

.sub_sec_title {
    display: flex;
    gap: 10px;
    margin-bottom: 35px;
    margin-top: 70px;
}

/* ========================
   step_flow 공통 (Step 01~N 절차)
   ======================== */
.step_flow {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 50px 0;
    margin-bottom: 40px;
}

.step_row {
    display: flex;
    align-items: center;
}

/* 2번째 줄은 첫 줄보다 절반 폭만큼 오른쪽으로 밀림 */

.step_item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0 16px;
    padding-right: 60px; /* 점선 들어갈 공간 확보 */
}

/* 각 줄의 마지막 아이템은 점선/여백 불필요 */
.step_item:last-child {
    padding-right: 0;
}

.step_item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 12px;
    width: 36px;
    border-top: 2px dashed #cccccc;
    transform: translateY(-50%);
}

.step_circle {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.step_circle img {
    object-fit: contain;
}


.step_text {
    display: flex;
    flex-direction: column;
    gap: 4px 0;
    white-space: nowrap;
}

.step_label {
    color: var(--blue);
}

.step_name {
    color: #111111;
}

.step_btn_wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 60px;
}

.step_btn {
    display: inline-flex;
    align-items: center;
    gap: 0 8px;
    height: 54px;
    padding: 0 26px;
    border: 1px solid #dddddd;
    border-radius: 6px;
    background-color: #fff;
    color: #333333;
    cursor: pointer;
}

.sub_cta_box {
    display: flex;
    gap: 20px;
    background-image: url("../images/cta_box_bg.png");
    background-repeat: no-repeat;
    background-position: bottom right;
    padding: 60px 40px;
    box-sizing: border-box;
    border: 2px solid #EEEEEE;
}

.sub_cta_box .cta_desc{
    color: #777777;
    line-height: 25px;
    margin: 20px 0 30px;
}


.sub_cta_box button{
    padding: 15px 25px;
    background-color: var(--blue);
    color: #fff;
    border-radius: 5px;
}

/* ========================
   sub_stats : 통계 3개 + 인증바
   ======================== */
.sub_stats_wrap {
    margin-bottom: 40px;
}

.sub_stat_list {
    gap: 0 24px;
    margin-bottom: 24px;
}

.sub_stat_list li {
    flex: 1;
    text-align: center;
    padding: 40px 20px;
    border: 1px solid var(--blue);
    border-radius: 15px;
    box-sizing: border-box;
}

.stat_icon_circle {
    margin: 0 auto 20px;
    border-radius: 50%;
    background-color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.stat_icon_circle img {
    object-fit: contain;
}

.stat_num {
    color: var(--blue);
    margin-bottom: 10px;
}

.stat_desc {
    color: #777777;
    line-height: 1.5;
}

.sub_cert_bar {
    display: flex;
    align-items: center;
    padding: 35px 40px;
    background-color: #f7f8fa;
    border-radius: 8px;
}
.sub_cert_bar.sub_cert_bar_sub{
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    color: #777777;
    margin-bottom: 35px;
}
.sub_cert_bar.sub_cert_bar_sub p{
    color: #777777;
}
.sub_cert_bar.sub_cert_bar_sub .inner{
    margin-bottom: 5px;
    gap: 10px;
}

.sub_cert_bar i {
    color: #999999;
    flex-shrink: 0;
}

.sub_cert_bar strong {
    color: var(--blue);
}

.sub_cert_bar p {
    display: flex;
    color: #222222;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
    line-height: 25px;
}
.sub_cert_bar p img{
    margin-right: 5px;
}

.grid_table th {
    color: var(--blue);
    background-color: #f7f8fa;
}

.grid_table td {
    text-align: center;
    border-right: 1px solid #D7D7D7;
}

.grid_table td:last-child {
    border-right: none;
}

/* ========================
   table_scroll : 표가 화면보다 넓을 때 가로 스크롤
   ======================== */
.table_scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table_scroll .sub_table {
    min-width: 900px; /* 표 최소 폭 - 이보다 화면이 좁아지면 스크롤 발생 */
}

/* 스크롤바 스타일 (선택사항) */
.table_scroll::-webkit-scrollbar {
    height: 6px;
}

.table_scroll::-webkit-scrollbar-thumb {
    background-color: #cccccc;
    border-radius: 3px;
}

.table_scroll::-webkit-scrollbar-track {
    background-color: #f5f5f5;
}

.sub_table.multi_group_table td.td_group_plain {
    width: 200px;
    background-color: #fff;
    color: var(--blue);
    font-weight: bold;
    text-align: center;
    word-break: keep-all;
    border-left: 1px solid #D7D7D7;
}



/* ========================
   consult_flow (컨설팅 과정 - sub1_1 전용, 하드코딩)
   ======================== */
.consult_flow {
    gap: 0 60px;
    padding: 60px 50px;
    background-color: #F8F8F8;
    border-radius: 16px;
    margin-bottom: 60px;
    border: 1px solid #D7D7D7;
}

.cf_side {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.cf_circle {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}


.cf_circle_person {
    background-color: #4a90d9;
}

.cf_circle_building {
    background-color: var(--blue);
}

.cf_title {
    color: #111111;
    margin-bottom: 20px;
}

.cf_line {
    margin-bottom: 20px;
}

.cf_desc_box {
    width: 100%;
    padding: 45px 25px;
    background-color: #fff;
    border-radius: 8px;
    box-sizing: border-box;
}

.cf_desc_box p {
    color: #333333;
    line-height: 1.6;
}

.cf_desc_box strong {
    color: #111111;
}

.cf_arrows {
    display: flex;
    flex-direction: column;
    gap: 8px 0;
    flex-shrink: 0;
}

.cf_arrow_row {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cf_arrow_svg {
    width: 220px;
    height: 24px;
    display: block;
}

.cf_arrow_label {
    color: #111111;
    margin-top: 4px;
}

/* ========================
   number_list (01~N 번호 리스트)
   ======================== */
.number_list {
    border: 1px solid #D7D7D7;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
    background-image: url("../images/number_list_bg.png");
    background-repeat: no-repeat;
    background-position: bottom left;
    padding: 40px;
}

.nl_item {
    display: flex;
    align-items: center;
    gap: 0 20px;
    padding: 10px 0;
}


.nl_badge {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 5px;
    background-color: var(--blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nl_text {
    color: #333333;
}




/* ========================
   bar_heading : 파란/오렌지 세로바 + 제목 (여러 곳에서 재사용)
   ======================== */
.bar_heading {
    display: flex;
    align-items: center;
    gap: 0 8px;
    margin-bottom: 16px;
}

.bar_heading .bar {
    width: 4px;
    height: 18px;
    background: linear-gradient(
            to bottom,
            #F58322 0%,
            #F58322 25%,
            var(--blue) 25%,
            var(--blue) 100%
    );
    border-radius: 2px;
    flex-shrink: 0;
}


/* ========================================================
   반응형 - 태블릿 (768px ~ 1024px)
======================================================== */
@media screen and (min-width: 768px) and (max-width: 1024px) {

    #sub_content {
        padding: 200px 0 80px;
    }

    .sub_layout {
        gap: 0 24px;
    }

    .sub_layout_side {
        width: 28%;
    }

    .sub_table th,
    .sub_table td {
        padding: 14px 16px;
    }

    .sub_table td.td_label,
    .sub_table td.td_group {
        width: 26%;
    }

    .sm_head {
        height: 130px;
        padding: 20px 24px;
    }

    .intro_box {
        padding: 24px 30px;
        gap: 0 20px;
    }

    .consult_flow {
        gap: 0 30px;
        padding: 50px 30px;
    }

    .cf_arrow_svg {
        width: 160px;
        height: auto;
    }

    .sub_cta_box {
        padding: 40px 30px;
        gap: 16px;
    }

    .sub_stat_list li {
        padding: 28px 16px;
    }

    .sub_cert_bar {
        padding: 24px 30px;
    }

    .number_list {
        padding: 30px;
    }
}


/* ========================================================
   반응형 - 모바일 (~767px)
   ※ 기종 상관없이 유연하게 대응하도록 고정 px보다 %/max-width/flex-wrap 위주로 처리
======================================================== */
@media screen and (max-width: 767px) {

    /* ---- 페이지 공통 ---- */
    #sub_content {
        padding: 165px 0 60px;
    }

    /* ---- sub_layout : 사이드바+콘텐츠 2단 → 세로 스택 ---- */
    .sub_layout {
        flex-direction: column;
        gap: 20px 0;
    }

    .sub_layout_side,
    .sub_layout_content {
        width: 100%;
    }

    /* ---- sub_title / breadcrumb ---- */
    .sub_title_wrap {
        align-items: flex-start;
        gap: 10px;
    }

    .sub_breadcrumb {
        flex-wrap: wrap;
        gap: 4px 8px;
        margin-bottom: 20px;
    }

    /* ---- 표 : 패딩/여백 축소, 셀 폭은 %로 유연하게 ---- */
    .sub_table th,
    .sub_table td {
        padding: 10px 12px;
    }

    .sub_table td.td_label,
    .sub_table td.td_group {
        width: 32%;
    }

    .sub_table.multi_group_table td.td_group_plain {
        width: auto;
    }

    /* .table_scroll로 감싸지 않은 표도 모바일에서 최소한 가로 스크롤은 되도록 */
    .sub_table:not(.table_scroll .sub_table) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ---- side_menu : 아코디언 헤더 축소 ---- */
    .sm_head {
        height: 100px;
        padding: 18px 50px;
        border-radius: 10px;
        background: linear-gradient(to right, #124B99, #3E87C7);

    }

    .sm_group_head {
        padding: 14px 18px;
    }

    .sm_link {
        padding: 10px 12px;
    }

    /* ---- intro_box : 아이콘+텍스트 가로 → 세로 ---- */
    .intro_box {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px 0;
        padding: 20px 22px;
    }

    .intro_icon {
        width: 44px;
        height: 44px;
    }

    /* ---- sub_sec_title : 여백 축소 ---- */
    .sub_sec_title {
        margin-top: 40px;
        margin-bottom: 20px;
        gap: 6px;
    }

    /* ---- step_flow : 가로 배치 → 세로 스택, 점선 커넥터를 세로로 전환 ---- */
    .step_flow {
        gap: 24px 0;
    }

    .step_row {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px 0;
        width: 100%;
    }

    .step_item {
        justify-content: center;
        padding-right: 0;
        padding-bottom: 24px;
        width: 100%;
    }

    .step_item:last-child {
        padding-bottom: 0;
    }

    /* 가로 점선(오른쪽) → 세로 점선(아래쪽)으로 전환 */
    .step_item:not(:last-child)::after {
        top: auto;
        right: auto;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 20px;
        border-top: 0;
        border-left: 2px dashed #cccccc;
    }

    .step_btn_wrap {
        margin-bottom: 40px;
    }

    /* ---- sub_cta_box : 아이콘+설명 가로 → 세로, 배경이미지는 시각적 방해라 숨김 ---- */
    .sub_cta_box {
        flex-direction: column !important;
        padding: 28px 24px;
        gap: 12px;
        background-image: none;
    }

    .sub_cta_box button {
        width: 100%;
        text-align: center;
    }

    /* ---- sub_stats : 통계 3개 가로 → 세로 스택 ---- */
    .sub_stat_list {
        flex-direction: column !important;
        gap: 12px 0;
        margin-bottom: 16px;
    }

    .sub_stat_list li {
        padding: 24px 16px;
    }

    /* ---- sub_cert_bar : 가로 → 세로 (아이콘 위, 텍스트 아래) ---- */
    .sub_cert_bar {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px 22px;
        gap: 8px 0;
    }

    .sub_cert_bar i {
        margin-bottom: 4px;
    }

    .sub_cert_bar p{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .sub_cert_bar img{
        display: none;
    }

    /* ---- grid_table 안 텍스트 정렬 유지, 여백만 축소 ---- */
    .grid_table th,
    .grid_table td {
        padding: 10px 8px;
    }

    /* ---- consult_flow : 사람↔기관 카드 + 화살표 → 완전 세로 스택 ---- */
    .consult_flow {
        flex-direction: column !important;
        gap: 20px;
        padding: 32px 20px;
    }

    .cf_circle {
    }
    .cf_circle img{
        width: 100%;
    }

    .cf_desc_box {
        padding: 24px 18px;
    }

    /* 화살표 SVG: 가로형이라 세로 스택에서는 90도 회전해서 위→아래 흐름으로 표현 */
    .cf_arrows {
        justify-content: center;
        gap: 16px;
    }
    .cf_arrows img{
        width: 30px;
    }

    .cf_arrow_row {
        transform: rotate(90deg);
    }

    /* 회전된 상태라 라벨 텍스트도 같이 돌아가므로 다시 원위치로 되돌림 */
    .cf_arrow_label {
        transform: rotate(-90deg);
        white-space: nowrap;
    }

    /* ---- number_list : 배경이미지 숨기고(텍스트 겹침 방지), 여백 축소 ---- */
    .number_list {
        padding: 20px;
        background-image: none;
    }

    .nl_item {
        gap: 0 12px;
        align-items: flex-start;
    }

    .nl_badge {
        width: 26px;
        height: 26px;
        flex-shrink: 0;
    }

    /* ---- bar_heading : 여백만 축소 ---- */
    .bar_heading {
        margin-bottom: 12px;
    }



}