/**
 * ================================================
 * 서브 상단 배열/위치 CSS (stb = Sub Top Box)
 * ================================================
 *
 * 이 파일은 서브 상단 요소들의 배열/위치만 담당합니다.
 * 색상, 폰트 등 디자인은 style.css에서 조절하세요.
 *
 * ================================================
 * ★★★ 선택 위치별 CSS 수정 가이드 ★★★
 * ================================================
 *
 * ▶ pos1/pos2 (이미지 내 소제목) - top_1.php
 * ─────────────────────────────────────────────
 * .stb_title_area                    전체 타이틀 영역 (위치 조정)
 * .stb_title_area .stb_main_title    대타이틀 (1뎁스)
 * .stb_title_area .stb_main_desc     대제목 설명
 * .stb_subtitle_area.stb_pos1        소제목 영역 (세로 배열)
 * .stb_subtitle_area.stb_pos2        소제목 영역 (가로 배열)
 * .stb_subtitle_area .stb_sub_title  소제목 텍스트
 * .stb_subtitle_area .stb_sub_desc   소제목 설명
 *
 * [경로 위치별 클래스] (.stb_title_area 내) - wrap에 적용 (화살표 포함)
 * .stb_breadcrumb_wrap.bc_title_under     경로 (제목 밑)
 * .stb_breadcrumb_wrap.bc_right_center    경로 (우측 중앙)
 * .stb_breadcrumb_wrap.bc_right_bottom    경로 (우측 하단)
 * .stb_subtitle_area .stb_breadcrumb_wrap 경로 (소제목 영역 내)
 *
 *
 * ▶ pos3 분리 (3뎁스 위 소제목만) - top_3.php
 * ─────────────────────────────────────────────
 * .sub_subtitle_area                 전체 소제목 영역 (배경, 패딩)
 * .sub_subtitle_area .sub_subtitle   소제목 텍스트 (h3)
 * .sub_subtitle_area .sub_desc_txt2  소제목 설명
 *
 * [경로 위치: 소제목 내 (우측)]
 * .sub_subtitle_area.has_breadcrumb                  브레드크럼 포함 영역
 * .sub_subtitle_area .sub_subtitle_inner.with_bc     좌우 flex 래퍼
 * .sub_subtitle_area .sub_subtitle_content           좌측 (소제목+설명)
 * .sub_subtitle_area .stb_breadcrumb.bc_in_subtitle  우측 경로
 * .sub_subtitle_area .stb_breadcrumb.bc_in_subtitle .curr  경로 현재 위치 텍스트
 * .sub_subtitle_area .stb_breadcrumb.bc_in_subtitle .sep   경로 구분자
 * .sub_subtitle_area .stb_breadcrumb.bc_in_subtitle a      경로 링크
 *
 *
 * ▶ pos3 통합 (2뎁스 타이틀 + 3뎁스 탭) - top_3.php
 * ─────────────────────────────────────────────
 * .sub_depth3_area                   전체 영역 (배경, 패딩)
 * .sub_depth3_area .depth3_title_tab_wrap  내부 래퍼
 * .sub_depth3_area .depth2_title     2뎁스 타이틀 (h2)
 * .sub_depth3_area .depth3_tab_list  3뎁스 탭 컨테이너
 * .sub_depth3_area .depth3_tab_item  3뎁스 탭 개별 버튼
 * .sub_depth3_area .depth3_tab_item.active  활성 탭
 *
 *
 * [공통 클래스]
 * .stb_hide                - display: none (스위치 off 시)
 *
 * ================================================
 */


/* ================================================
   기본 리셋 / 공통
   ================================================ */
.stb_title_area,
.stb_subtitle_area,
.stb_main_title,
.stb_main_desc,
.stb_sub_title,
.stb_sub_desc,
.stb_breadcrumb,
.stb_dep2_area,
.stb_dep3_area {
    box-sizing: border-box;
}

/* 스위치 off 시 숨김 */
.stb_hide {
    display: none !important;
}


/* ================================================
   타이틀 영역 (이미지 위)
   ================================================ */

/* 구분 -----------------------------------*/
/**** PC ****/
@media only all and (min-width:768px) {
    .stb_title_area {
        width: 100%;
        float: left;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: var(--stb-title-area-align, flex-start);
        gap: clamp(8px, calc(0.625vw + 6px), 16px);
        z-index: 10;
    }
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
    .stb_title_area {
        width: 100%;
        float: left;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: var(--stb-title-area-align, flex-start);
        gap: 8px;
        z-index: 10;
    }
}
/* 구분 //end -----------------------------------*/


/* ================================================
   대타이틀 / 대제목 설명
   ================================================ */
.stb_main_title {
    width: auto;
    float: left;
    position: relative;
    order: var(--stb-main-title-order, 1);
    text-align: var(--stb-main-title-text-align, left);
}

.stb_main_desc {
    width: auto;
    float: left;
    position: relative;
    order: var(--stb-main-desc-order, 2);
    text-align: var(--stb-main-desc-text-align, left);
}


/* ================================================
   소제목 영역 (.stb_subtitle_area)
   ================================================ */

/* ----- pos1: 세로 배열 (이미지 내) ----- */
.stb_subtitle_area.stb_pos1 {
    width: 100%;
    float: left;
    display: flex;
    flex-direction: column;
    align-items: var(--stb-sub-title-align, flex-start);
    gap: clamp(5px, calc(0.391vw + 3.75px), 10px);
    order: var(--stb-subtitle-order, 3);
    position: relative;
}

/* ----- pos2: 가로 배열 (대타이틀/소제목 한줄) ----- */
/**** PC ****/
@media only all and (min-width:768px) {
    .stb_subtitle_area.stb_pos2 {
        width: 100%;
        float: left;
        display: flex;
        flex-direction: column;
        gap: clamp(5px, calc(0.391vw + 3.75px), 10px);
        position: relative;
        order: 1; /* 경로보다 먼저 */
    }

    /* 대타이틀 / 소제목 한줄 래퍼 */
    .stb_subtitle_area.stb_pos2 .stb_title_row {
        display: flex;
        flex-direction: row;
        align-items: baseline; /* baseline 정렬로 텍스트 라인 맞춤 */
        gap: clamp(10px, calc(0.781vw + 7.5px), 20px);
    }

    /* pos2 title_row 내 순서 고정 (전역 order 오버라이드) */
    .stb_subtitle_area.stb_pos2 .stb_title_row .stb_main_title { order: 1; }
    .stb_subtitle_area.stb_pos2 .stb_title_row .stb_divider {
        order: 2;
        color: rgba(255,255,255,0.5);
        font-weight: 300;
        font-size: 1.5em;
        line-height: 1;
    }
    .stb_subtitle_area.stb_pos2 .stb_title_row .stb_sub_title { order: 3; }

    /* 대제목설명, 소제목설명은 아래로 */
    .stb_subtitle_area.stb_pos2 .stb_main_desc,
    .stb_subtitle_area.stb_pos2 .stb_sub_desc {
        width: 100%;
    }
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
    .stb_subtitle_area.stb_pos2 {
        width: 100%;
        float: left;
        display: flex;
        flex-direction: column;
        gap: 5px;
        position: relative;
        order: 1; /* 경로보다 먼저 */
    }

    .stb_subtitle_area.stb_pos2 .stb_title_row {
        display: flex;
        flex-direction: row;
        align-items: baseline; /* baseline 정렬로 텍스트 라인 맞춤 */
        gap: 8px;
        flex-wrap: wrap;
    }

    /* pos2 title_row 내 순서 고정 (전역 order 오버라이드) */
    .stb_subtitle_area.stb_pos2 .stb_title_row .stb_main_title { order: 1; }
    .stb_subtitle_area.stb_pos2 .stb_title_row .stb_divider {
        order: 2;
        color: rgba(255,255,255,0.5);
        font-weight: 300;
        font-size: 1.3em;
        line-height: 1;
    }
    .stb_subtitle_area.stb_pos2 .stb_title_row .stb_sub_title { order: 3; }
}

/* ----- pos3: 3뎁스 위 별도 영역 ----- */
/**** PC ****/
@media only all and (min-width:768px) {
    .stb_subtitle_area.stb_pos3 {
        width: 100%;
        float: left;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: clamp(10px, calc(0.781vw + 7.5px), 20px);
        padding: clamp(20px, calc(1.563vw + 15px), 40px) 0;
        position: relative;
        order: var(--stb-subtitle-order, 3);
    }
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
    .stb_subtitle_area.stb_pos3 {
        width: 100%;
        float: left;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 15px 0;
        position: relative;
        order: var(--stb-subtitle-order, 3);
    }
}


/* ================================================
   소제목 / 소제목 설명 (개별)
   ================================================ */
.stb_sub_title {
    width: auto;
    float: left;
    position: relative;
    text-align: var(--stb-sub-title-text-align, left);
}

.stb_sub_desc {
    width: auto;
    float: left;
    position: relative;
    text-align: var(--stb-sub-desc-text-align, left);
}


/* ================================================
   경로 (브레드크럼)
   ================================================ */

/* 기본: 타이틀 영역 흐름 내 */
.stb_breadcrumb {
    width: auto;
    float: left;
    position: relative;
}

/* ----- 우측 absolute 배치 ----- */
/**** PC ****/
@media only all and (min-width:768px) {
    .stb_breadcrumb.stb_bc_right {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        float: none;
    }

    /* 소제목 영역 내 경로 우측 배치 시 */
    .stb_subtitle_area .stb_breadcrumb.stb_bc_right {
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }
}
/**** 모바일 - 우측 배치 해제, 일반 흐름 ****/
@media only all and (max-width:767px) {
    .stb_breadcrumb.stb_bc_right {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
    }
}

/* ----- 타이틀 밑 배치 ----- */
.stb_breadcrumb.stb_bc_below {
    width: 100%;
    margin-top: clamp(10px, calc(0.781vw + 7.5px), 20px);
}


/* ================================================
   2뎁스 / 3뎁스 탭 영역
   ================================================ */
.stb_dep2_area {
    width: 100%;
    float: left;
    position: relative;
}

.stb_dep3_area {
    width: 100%;
    float: left;
    position: relative;
}


/* ================================================
   Flex Order 커스텀 속성 (CSS 변수)
   스킨에서 오버라이드 가능
   ================================================ */
:root {
    --stb-main-title-order: 1;
    --stb-main-desc-order: 2;
    --stb-subtitle-order: 3;
    --stb-sub-title-order: 1;
    --stb-sub-desc-order: 2;
    --stb-breadcrumb-order: 3;
}

/* 소제목 영역 내 순서 */
.stb_subtitle_area .stb_sub_title {
    order: var(--stb-sub-title-order, 1);
}
.stb_subtitle_area .stb_sub_desc {
    order: var(--stb-sub-desc-order, 2);
}
.stb_subtitle_area .stb_breadcrumb {
    order: var(--stb-breadcrumb-order, 3);
}


/* ================================================
   [참고] 스킨에서 커스터마이징 예시
   ================================================

   // 순서 변경
   .my_skin .stb_title_area {
       --stb-main-title-order: 2;
       --stb-main-desc-order: 1;
   }

   // pos2에서 경로 우측 배치
   .my_skin .stb_subtitle_area.stb_pos2 {
       position: relative;
   }
   .my_skin .stb_subtitle_area.stb_pos2 .stb_breadcrumb {
       position: absolute;
       right: 0;
       top: 50%;
       transform: translateY(-50%);
   }

   // pos3 배경색 추가
   .my_skin .stb_subtitle_area.stb_pos3 {
       background-color: #f8f8f8;
       padding: 30px;
       border-radius: 10px;
   }

   ================================================ */


/* ================================================
   pos3 소제목 영역 (이미지 밖)
   ================================================ */
.sub_subtitle_area {
    padding: 20px 0;
 margin-bottom: 30PX; width: 100%; float: left
}
.sub_subtitle_area .sub_subtitle {
    font-size: clamp(18px, calc(1.25vw + 14px), 24px);
    font-weight: 600;
    color: #333;
    margin: 0 0 8px 0;
}
.sub_subtitle_area .sub_desc_txt2 {
    font-size: clamp(13px, calc(0.5vw + 11px), 15px);
    color: #666;
    line-height: 1.6;
}

/* 브레드크럼 위치별 스타일 (.stb_title_area 내) - wrap에 적용 (화살표 포함) */
.stb_title_area .stb_breadcrumb_wrap.bc_title_under {
    margin-top: 15px;
    width: auto;
    justify-content: flex-start;
    order: var(--stb-breadcrumb-order, 10); /* 기본값 10: 맨 아래 */
}
.stb_title_area .stb_breadcrumb_wrap.bc_right_center {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
}
.stb_title_area .stb_breadcrumb_wrap.bc_right_bottom {
    position: absolute;
    right: 0;
    bottom: 20px;
    width: auto;
}
/* 소제목 영역 내 브레드크럼 (pos1, pos2) */
.stb_subtitle_area .stb_breadcrumb_wrap {
    margin-top: 10px;
}

/* ================================================
   pos3 좌측정렬 + 소제목 내 경로 (우측 absolute 배치)
   ================================================ */
.stb_subtitle_area.stb_pos3.stb_align_left .stb_subtitle_inner.with_bc {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.stb_subtitle_area.stb_pos3.stb_align_left .stb_subtitle_inner.with_bc .stb_breadcrumb.bc_in_subtitle {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin-top: 0;
}
/* 모바일에서는 absolute 해제 */
@media only all and (max-width: 767px) {
    .stb_subtitle_area.stb_pos3.stb_align_left .stb_subtitle_inner.with_bc {
        flex-direction: column;
        align-items: flex-start;
    }
    .stb_subtitle_area.stb_pos3.stb_align_left .stb_subtitle_inner.with_bc .stb_breadcrumb.bc_in_subtitle {
        position: static;
        transform: none;
        margin-top: 10px;
    }
}

/* ================================================
   브레드크럼 화살표 (이전/다음)
   ================================================ */
/* PC */
@media only all and (min-width:768px) {
    .stb_breadcrumb_wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        position: relative;
        width: 100%;
    }
    .stb_breadcrumb_wrap.has-arrows {
        padding: 0 50px; /* 화살표 공간 확보 */
    }
    .bc_arrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: #f3f4f6;
        box-shadow: 0 1px 2px rgba(0,0,0,.04) inset;
        transition: background 0.15s, transform 0.12s;
        text-decoration: none;
        cursor: pointer;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
    }
    .bc_arrow.bc_prev { left: 0; }
    .bc_arrow.bc_next { right: 0; }
    .bc_arrow:hover {
        background: var(--primary, #2563eb);
    }
    .bc_arrow:hover svg {
        stroke: #fff;
    }
    .bc_arrow svg {
        stroke: #374151;
    }
    .bc_arrow.disabled {
        opacity: 0.28;
        pointer-events: none;
        filter: grayscale(1);
    }
}
/* 모바일 */
@media only all and (max-width:767px) {
    .stb_breadcrumb_wrap {
        display: flex;
        align-items: center;
        gap: 0;
        width: calc(100% + 20px);
        margin-left: -10px;
    }
    .bc_arrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #f3f4f6;
        box-shadow: 0 1px 2px rgba(0,0,0,.04) inset;
        transition: background 0.15s, transform 0.12s;
        text-decoration: none;
        cursor: pointer;
        flex-shrink: 0;
    }
    .bc_arrow:hover {
        background: var(--primary, #2563eb);
    }
    .bc_arrow:hover svg {
        stroke: #fff;
    }
    .bc_arrow svg {
        stroke: #374151;
        width: 12px;
        height: 12px;
    }
    .bc_arrow.disabled {
        opacity: 0.28;
        pointer-events: none;
        filter: grayscale(1);
    }
    .stb_breadcrumb_wrap .stb_breadcrumb {
        flex: 1;
        justify-content: center;
    }
}

/* ================================================
   pos3 소제목 영역 - 브레드크럼 내부 배치
   ================================================ */
/* inner wrapper: flexbox로 좌/우 배치 */
.sub_subtitle_area .sub_subtitle_inner {
    width: 100%;
    float: left;
}
.sub_subtitle_area .sub_subtitle_inner.with_bc {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

/* 좌측: 소제목 + 설명 */
.sub_subtitle_area .sub_subtitle_content {
    flex: 1;
    min-width: 0;
}
.sub_subtitle_area .sub_subtitle_content .sub_subtitle {
    margin: 0;
}
.sub_subtitle_area .sub_subtitle_content .sub_desc_txt2 {
    display: block;
    margin-top: 8px;
}

/* 우측: 브레드크럼 (pos3 소제목 내 배치) */
.sub_subtitle_area .stb_breadcrumb.bc_in_subtitle {
    flex-shrink: 0;
}
/* pos3 브레드크럼 내부 요소 색상 (밝은 배경용) */
.sub_subtitle_area .stb_breadcrumb.bc_in_subtitle .curr {
    color: #333;
    font-weight: 600;
}
.sub_subtitle_area .stb_breadcrumb.bc_in_subtitle .sep {
    color: #999;
}
.sub_subtitle_area .stb_breadcrumb.bc_in_subtitle a {
    color: #666;
}
.sub_subtitle_area .stb_breadcrumb.bc_in_subtitle a:hover {
    color: #333;
}
/* ================================================
   pos3 설명만 영역 - 브레드크럼 내부 배치
   ================================================ */
.sub_desc_txt2_area {
    padding: 15px 0;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
}
.sub_desc_txt2_area .sub_desc_inner {
    width: 100%;
    float: left;
}
.sub_desc_txt2_area .sub_desc_inner.with_bc {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}
.sub_desc_txt2_area .sub_desc_inner .sub_desc_txt2 {
    flex: 1;
    min-width: 0;
}
.sub_desc_txt2_area .stb_breadcrumb.bc_in_subtitle {
    flex-shrink: 0;
}

/* ================================================
   pos3 inline 모드 - 소제목 + 3뎁스 탭 한줄
   ================================================ */
/**** PC ****/
@media only all and (min-width:768px) {
    .sub_subtitle_area.pos3_inline {
        padding: 0;
        background: none;
        border-bottom: none;
    }
    .sub_subtitle_area.pos3_inline .sub_subtitle_inner.with_dep3 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
        padding: clamp(15px, calc(1.17vw + 11.25px), 30px) 0;
        background: var(--dynamic-bg-color, #f8f9fa);
        border-bottom: 1px solid #eee;
    }
    .sub_subtitle_area.pos3_inline .sub_subtitle_content {
        flex-shrink: 0;
    }
    .sub_subtitle_area.pos3_inline .sub_subtitle_content .sub_subtitle {
        font-size: clamp(18px, calc(1.25vw + 14px), 26px);
        font-weight: 600;
        color: #333;
    }
    /* 인라인 3뎁스 탭 */
    .sub_subtitle_area.pos3_inline .depth3_tab_list.inline_tabs {
        display: flex;
        gap: clamp(5px, calc(0.39vw + 3.75px), 10px);
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    .sub_subtitle_area.pos3_inline .depth3_tab_item {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: clamp(8px, calc(0.625vw + 6px), 14px) clamp(15px, calc(1.17vw + 11.25px), 25px);
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 6px;
        color: #555;
        font-size: clamp(13px, calc(0.39vw + 11.75px), 15px);
        text-decoration: none;
        transition: all 0.2s ease;
    }
    .sub_subtitle_area.pos3_inline .depth3_tab_item:hover {
        background: #f5f5f5;
        border-color: #bbb;
    }
    .sub_subtitle_area.pos3_inline .depth3_tab_item.active {
        background: var(--dynamic-point-color, #333);
        border-color: var(--dynamic-point-color, #333);
        color: #fff;
    }
}

/**** 모바일: 세로 배열로 전환 ****/
@media only all and (max-width:767px) {
    .sub_subtitle_area .sub_subtitle_inner.with_bc,
    .sub_desc_txt2_area .sub_desc_inner.with_bc {
        flex-direction: column;
        align-items: flex-start;
    }
    .sub_subtitle_area .stb_breadcrumb.bc_in_subtitle,
    .sub_desc_txt2_area .stb_breadcrumb.bc_in_subtitle {
        margin-top: 10px;
        width: 100%;
    }
    /* inline 모드 모바일 */
    .sub_subtitle_area.pos3_inline .sub_subtitle_inner.with_dep3 {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        padding: 15px 0;
    }
    .sub_subtitle_area.pos3_inline .depth3_tab_list.inline_tabs {
        width: 100%;
        justify-content: flex-start;
    }
}