@charset "utf-8";
/**
 * sub02 전용 스타일 (sub0201 등)
 * - sub-inner-full: 화면 100% 전체 영역
 * - sub-inner-max1600: 1600px 영역 가운데
 */

/* 서브 본문 레이아웃 옵션: 100% 전체 화면 (.sub-inner 기본값 덮어씀) */
/* 내부 스크롤 방지: 문서 전체만 스크롤되도록, 뷰포트 고정 높이 해제 */
html:has(.sub-inner.sub-inner-full) {
    height: auto !important;
    min-height: 100%;
    overflow-x: hidden;
}

body:has(.sub-inner.sub-inner-full) {
    overflow: visible !important;
    min-height: 100%;
}

#wrapper:has(.sub-inner.sub-inner-full),
#container_wr:has(.sub-inner.sub-inner-full),
#container:has(.sub-inner.sub-inner-full) {
    height: auto !important;
    min-height: 0;
    overflow: visible !important;
}

/* 패딩 사용 시 내부 스크롤 발생 → 상단 간격만 margin으로 적용 */
/* overflow를 주지 않음: overflow-x: hidden만 넣어도 CSS 규칙상 overflow-y가 auto로 바뀌어 내부 스크롤 생김 */
.sub-inner.sub-inner-full {
    width: 100% !important;
    max-width: none !important;
    margin: 50px 0 0 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    min-height: 0;
}

.sub-inner.sub-inner-full #contents.sub02 {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: visible;
}

/* PC: 모든 이미지 가로 100% (화면 전체 폭) */
.sub-inner.sub-inner-full #contents.sub02 img {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    height: auto;
    vertical-align: top;
    box-sizing: border-box;
}

/* 발생할 수 있는 문제점 섹션 (이미지 3개) */
#contents.sub02 .sub02-problem {
    padding: 0 0px 0px;
    box-sizing: border-box;
}

/* 제목·캡션: 화면에 미표시 */
#contents.sub02 .sub02-problem-tit,
#contents.sub02 .sub02-problem-caption {
    display: none !important;
}

#contents.sub02 .sub02-problem-tit {
    font-size: 24px;
    font-weight: 600;
    color: #1a1a1a;
    text-align: center;
    margin: 0 0 40px;
    letter-spacing: -0.02em;
}

#contents.sub02 .sub02-problem-list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
}

#contents.sub02 .sub02-problem-item {
    margin-bottom: 0px;
}

#contents.sub02 .sub02-problem-item:last-child {
    margin-bottom: 0;
}

#contents.sub02 .sub02-problem-img {
    width: 100%;
    margin-bottom: 0px;
}

/* PC: 콘텐츠 이미지 가로 100% (필요 시 작게 쓰는 곳은 별도 클래스로 지정) */
#contents.sub02 .sub02-problem-img img {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    height: auto;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
}

#contents.sub02 .sub02-problem-caption {
    font-size: 16px;
    color: #3e3e3e;
    margin: 0;
    padding: 12px 16px;
    background-color: #f5f5f5;
    border-radius: 4px;
}

/* sub0402 등 이미지 없음: 빈 공간 플레이스홀더 */
#contents.sub02 .sub02-problem-img-empty {
    min-height: 280px;
    background-color: #f9f9f9;
    display: flex;
    align-items: center;
    justify-content: center;
}

#contents.sub02 .sub02-problem-img-empty .empty-placeholder {
    display: block;
    width: 100%;
    min-height: 280px;
}

/* 서브 본문 레이아웃 옵션: 1600px 영역(가운데) */
.sub-inner.sub-inner-max1600 {
    max-width: 1600px;
    padding: 0;
}

.sub-inner.sub-inner-max1600 #contents.sub02 {
    width: 100%;
    margin: 0;
    padding: 0;
}

.sub-inner.sub-inner-max1600 #contents.sub02 img {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: top;
}

/* PC 전용 영역: 모바일에서 숨김 */
@media (max-width: 768px) {
    #contents.sub02 .sub02-pc {
        display: none !important;
    }
}

/* 980px 이하: 레이아웃이 980px로 넓어지는 현상 방지 (모바일/태블릿 최적화) */
@media (max-width: 980px) {

    .sub-inner.sub-inner-full,
    .sub-inner.sub-inner-full #contents.sub02,
    .sub-inner.sub-inner-full #contents.sub02 .sub02-problem-list {
        max-width: 100% !important;
        min-width: 0 !important;
        width: 100% !important;
        box-sizing: border-box;
    }
}

/* 모바일 전용 영역: PC에서 숨김 (추가 시 사용) */
@media (min-width: 769px) {
    #contents.sub02 .sub02-mobile {
        display: none !important;
    }
}