/* ===== 좌측 메뉴 + 서브페이지 레이아웃 (리뉴얼) ===== */

/* ── 전체 컨테이너 (서브페이지에서만 flex 적용) ── */
#contanTs {
    font-family: 'Noto Sans KR', sans-serif !important;
    font-size: 15px;
    color: #374151;
    line-height: 1.6;
}
/* .subLeft가 있는 서브페이지에서만 flex 레이아웃 */
#contanTs:has(.subLeft) {
    max-width: 1280px;
    margin: 0 auto;
    padding: 32px 24px 48px;
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

/* ── renewal.css 구 스타일 덮어쓰기 ── */
.realCon {
    width: 100% !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
}

/* ── 좌측 메뉴 ── */
.subLeft {
    flex-shrink: 0;
    width: 200px;
    float: none !important;
}
.subLeft h2 {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #fff !important;
    background: #1F2937 !important;
    padding: 14px 18px !important;
    border-radius: 8px 8px 0 0 !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    border-top: none !important;
    border-bottom: none !important;
    font-family: 'Noto Sans KR', sans-serif !important;
    line-height: 1.4 !important;
}
.subLeft .snb {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid #E5E7EB;
    border-top: none;
    border-radius: 0 0 8px 8px;
    overflow: hidden;
    width: auto !important;
}
.subLeft .snb li {
    border-bottom: 1px solid #F3F4F6;
}
.subLeft .snb li:last-child { border-bottom: none; }
.subLeft .snb li a {
    display: block;
    padding: 11px 18px !important;
    font-size: 14px !important;
    color: #4B5563;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    font-family: 'Noto Sans KR', sans-serif !important;
    width: auto !important;
    background: none !important;
}
.subLeft .snb li a:hover {
    background: #FFF5F5 !important;
    color: #C8102E !important;
    font-weight: 600;
}
/* 현재 메뉴 활성화 - PHP에서 클래스 추가 */
.subLeft .snb li.active > a,
.subLeft .snb li.on > a {
    background: #C8102E !important;
    color: #fff !important;
    font-weight: 700 !important;
}

/* ── 우측 컨텐츠 ── */
.subRight {
    flex: 1;
    min-width: 0;
    width: auto !important;
    float: none !important;
    padding-bottom: 40px !important;
    font-family: 'Noto Sans KR', sans-serif !important;
    font-size: 15px !important;
    color: #374151 !important;
    line-height: 1.6 !important;
}
.subRight h3 {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #1F2937 !important;
    margin: 0 0 8px !important;
    padding-bottom: 16px !important;
    border-bottom: 2px solid #E5E7EB !important;
    height: auto !important;
    font-family: 'Noto Sans KR', sans-serif !important;
    line-height: 1.4 !important;
}
.subRight .nav,
.subRight > p.nav {
    font-size: 12px !important;
    color: #9CA3AF;
    margin: 0 0 24px !important;
    display: flex !important;
    align-items: center;
    gap: 6px;
    height: auto !important;
    text-align: left !important;
    font-family: 'Noto Sans KR', sans-serif !important;
}
.subRight .nav span { color: #6B7280; font-family: 'Noto Sans KR', sans-serif !important; }
.subRight .nav span.active { color: #C8102E; font-weight: 600; }
.subRight .nav span + span::before {
    content: '›';
    margin-right: 6px;
    color: #D1D5DB;
}
.subRight .subRcon {
    width: auto !important;
    clear: none !important;
    margin-top: 0 !important;
    font-family: 'Noto Sans KR', sans-serif !important;
    font-size: 15px !important;
    color: #374151 !important;
    line-height: 1.6 !important;
}
/* 본문 내 테이블 가독성 */
.subRight table,
.subRight .subRcon table {
    font-family: 'Noto Sans KR', sans-serif !important;
    font-size: 14px !important;
    color: #374151 !important;
    line-height: 1.5 !important;
    border-collapse: collapse;
    width: 100%;
}
.subRight table th,
.subRight .subRcon table th {
    font-weight: 600 !important;
    padding: 12px 16px !important;
    background: #F8F9FA !important;
    color: #1F2937 !important;
    border-bottom: 2px solid #E5E7EB !important;
    text-align: left;
}
.subRight table td,
.subRight .subRcon table td {
    padding: 10px 16px !important;
    border-bottom: 1px solid #F3F4F6 !important;
    color: #374151 !important;
}
/* 본문 내 링크 */
.subRight a,
.subRight .subRcon a {
    color: #2563EB !important;
    text-decoration: none;
}
.subRight a:hover,
.subRight .subRcon a:hover {
    text-decoration: underline;
    color: #1D4ED8 !important;
}
/* 본문 내 섹션 제목 */
.subRight .subRcon h4,
.subRight .subRcon h5,
.subRight .subRcon strong {
    color: #111827 !important;
}
/* 본문 문단 간격 */
.subRight .subRcon p {
    margin-bottom: 12px !important;
}
/* 본문 리스트 간격 */
.subRight .subRcon ul,
.subRight .subRcon ol {
    margin-bottom: 16px !important;
    padding-left: 20px !important;
}
.subRight .subRcon li {
    margin-bottom: 6px !important;
}

/* ── 레거시 래퍼 구조 대응 (tpl.m_cscenter-*.php) ── */
/* #MiWrapper > #ContainerArea > #Container > #contents > #LeftMenuArea + #Conts 구조에서
   left-m_cscenter.html이 #LeftMenuArea 안에 include되어 #contanTs가 중첩됨.
   이 경우 flex 레이아웃이 의도대로 작동하지 않으므로 CSS로 보정 */

#MiWrapper {
    width: 100% !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    padding: 0 24px !important;
}
#ContainerArea {
    width: 100% !important;
}
#Container {
    width: 100% !important;
}
#contents {
    display: flex !important;
    gap: 32px !important;
    align-items: flex-start !important;
    width: 100% !important;
    min-height: auto !important;
}
#LeftMenuArea {
    flex-shrink: 0 !important;
    width: 200px !important;
    float: none !important;
}
/* #LeftMenuArea 안에 있는 #contanTs는 flex 해제 */
#LeftMenuArea #contanTs {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
}
/* #LeftMenuArea 안의 .subRight는 컨텐츠 영역으로 활용 */
#LeftMenuArea .subRight {
    float: none !important;
    width: auto !important;
}
#Conts {
    flex: 1 !important;
    min-width: 0 !important;
    float: none !important;
    width: auto !important;
    padding-bottom: 40px !important;
    font-family: 'Noto Sans KR', sans-serif !important;
    font-size: 15px !important;
    color: #374151 !important;
    line-height: 1.6 !important;
}
#Conts table {
    font-family: 'Noto Sans KR', sans-serif !important;
    font-size: 14px !important;
    color: #374151 !important;
    line-height: 1.5 !important;
}
#Conts a {
    color: #374151 !important;
}
#Conts a:hover {
    color: #C8102E !important;
}
#BodyTitle h3 {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #1F2937 !important;
    margin: 0 0 8px !important;
    padding-bottom: 16px !important;
    border-bottom: 2px solid #E5E7EB !important;
    height: auto !important;
    font-family: 'Noto Sans KR', sans-serif !important;
    line-height: 1.4 !important;
}
#BodyTitle .Location {
    font-size: 12px !important;
    color: #9CA3AF !important;
    margin: 0 0 24px !important;
    font-family: 'Noto Sans KR', sans-serif !important;
}
#BodyTitle .Location span {
    color: #C8102E;
    font-weight: 600;
}

/* ── 그누보드 게시판 레이아웃 (#wrap 기반) ── */
#wrap {
    width: 100% !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    font-family: 'Noto Sans KR', sans-serif !important;
    font-size: 15px !important;
    color: #374151 !important;
    line-height: 1.6 !important;
}

/* ── 반응형 ── */
@media (max-width: 768px) {
    #contanTs {
        flex-direction: column;
        padding: 20px 16px 32px;
        gap: 20px;
    }
    .subLeft {
        width: 100%;
    }
    .subLeft .snb {
        display: flex;
        flex-wrap: wrap;
        border-radius: 8px;
        border-top: 1px solid #E5E7EB;
    }
    .subLeft .snb li {
        border-bottom: none;
        border-right: 1px solid #F3F4F6;
    }
    .subLeft .snb li a { padding: 9px 14px; font-size: 13px; }
}