/* 전체화면 스타일 적용 */
*{margin:0;padding:0;}
a{text-decoration:none;}
li{list-style:none;}
body{width:1200px;margin:0 auto;font-family: 'Nanum Gothic', sans-serif;}
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
/* 전체화면 기본 초기화 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 패딩/테두리가 너비 계산을 방해하지 않도록 설정 */
}

a { text-decoration: none; }
li { list-style: none; }

html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden; /* 넘치는 요소로 인한 좌우 스크롤 강제 차단 */
}

body {
    max-width: 1200px; /* 최대 폭 고정 */
    margin: 0 auto;
    padding: 10px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* 검색창 영역 */
.Find {
    display: flex;
    align-items: center;
    width: 600px;           /* 검색창 전체 너비 600px 고정 */
    max-width: 100%;        /* (선택) 모바일 화면 등에서 600px보다 작아질 경우 스크롤 방지 */
    margin: 0 auto 10px auto; /* 좌우 margin을 auto로 설정하여 중앙 정렬 (왼쪽 정렬을 원하시면 0 0 10px 0 으로 변경) */
}

.suggest-input {
    flex: 1;                /* 버튼(36px)을 제외한 남은 영역을 꽉 채움 */
    width: 100%;            /* 기존의 고정 width: 600px 제거 후 flex에 맞춤 */
    height: 36px;
    padding: 0 10px;
    font-size: 14px;
}

.suggest-button {
    width: 36px;            /* 버튼 고정 크기 */
    height: 36px;
    padding: 6px;
    background-color: transparent;
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    flex-shrink: 0;
}

#topMenu {
    width: 100%;
    margin-bottom: 15px;
}

#topMenu ul {
    display: flex;
    flex-wrap: wrap; /* 버튼이 들어갈 공간이 부족하면 자동으로 다음 줄로 이동 */
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 8px; /* 버튼 사이 간격 */
}

#topMenu li {
    flex: 1 1 auto; /* 창 크기가 좁아지면 줄바꿈되며, 남는 공간을 유연하게 채움 */
    min-width: 80px; /* 창이 극단적으로 작아질 때 버튼의 최소 폭 */
    max-width: 120px; /* 버튼이 너무 커지지 않도록 상한선 지정 */
}

#topMenu a,
#topMenu a.GroupMenu,
#topMenu a.GroupMenuSelect {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; /* li 요소의 너비에 맞춰 100% 가득 차게 설정 */
    height: 38px;
    padding: 0 10px;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 20px;
    box-sizing: border-box;
    white-space: nowrap; /* 텍스트 자체 줄바꿈 방지 */
    cursor: pointer;
    touch-action: manipulation;
}

/* 선택 안 된 버튼 */
#topMenu a.GroupMenu, 
#topMenu a:not(.GroupMenuSelect) {
    background-color: #f1f1f1;
    color: #333;
}

/* 선택된 버튼 */
#topMenu a.GroupMenuSelect {
    background-color: #007bff;
    color: #fff;
}
 /* ==================================================
   1. 기본 스타일: 모바일 (화면 폭이 좁을 때 -> 1줄에 1개)
================================================== */
.Help_list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 10px;
}

.HelpItem {
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    width: 100%; /* 부모 너비에 맞춤 */
}

/* 이미지 감싸는 영역 */
.HelpItem-media {
    width: 30%; /* 고정 px 대신 비율(%)로 설정하여 화면 줄어들 때 같이 줄어듦 */
    max-width: 160px; /* 너무 커지는 것 방지 상한선 */
    min-width: 90px;  /* 너무 작아지는 것 방지 하한선 */
    aspect-ratio: 16 / 9; /* 비율 자동 유지 (높이 고정 제거) */
    flex-shrink: 0; /* 이미지가 찌그러지는 것 방지 */
    background-color: #f5f5f5;
    overflow: hidden;
}

.HelpItem-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 비율 깨짐 없이 꽉 차게 */
    display: block;
}

.HelpItem-content {
    padding: 10px 12px;
    flex: 1;
    min-width: 0; /* 텍스트 줄바꿈/말줄임 필수 속성 */
}

.HelpItem-title {
    margin: 0 0 4px 0;
    font-size: 0.95rem;
    font-weight: bold;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.HelpItem-titlesub {
    margin: 0;
    font-size: 0.8rem;
    color: #666;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.center-box table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important; /* 셀 폭이 글자 길이에 늘어나지 않고 창 크기에 맞춰 고정됨 */
    border-collapse: collapse;
}

/* 2. 셀(td/th) 영역 내부 텍스트 이탈 방지 */
.center-box table td,
.center-box table th {
    container-type: inline-size;
    padding: 6px 8px !important;
    
    /* 텍스트 줄바꿈 및 이탈 강제 차단 */
    white-space: normal !important;            /* 인라인 금지 속성 해제 */
    word-break: break-all !important;          /* 단어/긴 텍스트 가리지 않고 셀 끝에서 무조건 줄바꿈 */
    overflow-wrap: anywhere !important;        /* 모든 텍스트 강제 줄바꿈 허용 */
    overflow: hidden !important;               /* 만약의 이탈 텍스트 숨김 */
    
    font-size: clamp(9px, 8cqw, 15px) !important;
    line-height: 1.3 !important;
}

/* 3. 셀 내부 하위 태그(*), span, p, div 등의 인라인 스타일 강제 무력화 */
.center-box table td *,
.center-box table th * {
    white-space: normal !important;
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
    
    max-width: 100% !important;
    font-size: clamp(9px, 8cqw, 15px) !important;
    line-height: 1.3 !important;
}

/* 하단 로고 영역 */
.bottom-box {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 15px 20px 15px;
    display: flex;
    justify-content: flex-end; /* 우측 정렬 */
    align-items: center;
}

.bottom-logo {
    height: 47px;
    width: auto;
}


/* ==================================================
   🔥 내부 컨텐츠(Contents) 강제 축소 & 리사이징 설정
================================================== */

/* 1. 내부의 모든 요소들의 고정 너비 해제 및 최대 너비 제한 */
.center-box * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* 2. 내부 테이블(표/리스트) 반응형 축소 설정 */
.center-box table {
    width: 100% !important;
    table-layout: fixed; /* 테이블 셀이 창 크기 안에서 균등/축소되도록 설정 */
    border-collapse: collapse;
}

/* 3. 테이블 내부 이미지 및 칸(td, th) 자동 조절 */
.center-box td, 
.center-box th {
    word-break: break-word; /* 표 안의 긴 글자 줄바꿈 */
    height: auto !important;
}

/* 4. 내부 이미지, 비디오 등 미디어 자동 축소 */
.center-box img,
.center-box video,
.center-box iframe {
    max-width: 100% !important;
    height: auto !important;
}

/* 5. inline style로 지정된 고정 width 강제 무효화 */
.center-box [style*="width"] {
    width: 100% !important;
}

/* ==================================================
   2. PC / 태블릿 (화면 폭이 768px 이상일 때 -> 1줄에 2개)
================================================== */
@media (min-width: 768px) {
    .Help_list {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2열 배치 */
        gap: 16px;
    }

    .HelpItem-media {
        width: 35%; /* PC 2열 상태에서 카드 내 이미지 비율 */
        max-width: 200px; /* PC 최대로 커질 수 있는 이미지 폭 제한 */
        min-width: 110px; /* 창을 줄였을 때 작아질 수 있는 최소 폭 */
    }

    .HelpItem-title {
        font-size: 1.05rem;
    }

    .HelpItem-titlesub {
        font-size: 0.85rem;
    }
	#topMenu ul {
        display: flex;
        flex-wrap: wrap; /* 창이 좁아지면 버튼이 다음 줄로 자동으로 넘어가도록 설정 */
        gap: 8px;        /* 버튼 간 간격 */
    }

    #topMenu li {
        flex: 0 0 auto !important; /* 고정 비율 계산 제거 및 자동 너비 적용 */
        width: auto !important;
    }

    #topMenu a,
    #topMenu a.GroupMenu,
    #topMenu a.GroupMenuSelect {
        width: 100px !important;  /* 버튼 가로 폭 고정 (필요시 조절 가능) */
        height: 38px !important; /* 버튼 세로 높이 고정 */
        font-size: 14px;
    }
}