/**
 * kb-blocks.css
 * 
 * 워드프레스 플러그인용 콘텐츠 블록 스타일 시트
 * 
 * 이 파일은 .kb-wrapper 하위의 실제 콘텐츠 블록 스타일만 포함합니다.
 * 빌더 UI(사이드바, 버튼 등) 스타일은 포함하지 않습니다.
 * 
 * 워드프레스 플러그인 폴더에 이 파일을 그대로 덮어쓰기하여 사용할 수 있습니다.
 */

/* 워드프레스: 본문 컬럼(lg:col-span-9) 안에서 사이드바 밀림 방지용 격리 래퍼 */
.kb-html-root {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* 기본 래퍼 스타일 */
.kb-wrapper { 
    line-height: 1.6; 
    color: #333333; 
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; 
    font-size: 17px; 
    width: 100%; 
    max-width: 100%; 
    min-width: 0; 
    overflow-x: hidden; 
    box-sizing: border-box; 
    overflow-wrap: break-word; 
}
.kb-wrapper * { 
    box-sizing: border-box; 
}
/* 워드프레스: 본문 영역 내 수용, 사이드바 밀림 방지 */
.kb-wrapper img,
.kb-wrapper canvas { 
    max-width: 100% !important; 
    height: auto !important; 
}
.kb-wrapper video,
.kb-wrapper embed,
.kb-wrapper object { 
    max-width: 100% !important; 
}
.kb-wrapper .swiper,
.kb-wrapper .swiper-container { 
    max-width: 100% !important; 
}

/* 섹션 스타일 */
.kb-section { 
    margin-top: 10px; 
    margin-bottom: 30px; 
    width: 100% !important; 
    flex: 0 0 100% !important; 
    max-width: 100% !important; 
    box-sizing: border-box !important; 
}
/* 워드프레스: 테이블 overflow로 가로 확장·사이드바 밀림 방지 */
.kb-tbl-area,
.kb-section:has(.kb-nt-table),
.kb-wrapper > div:has(table) { 
    overflow-x: auto !important; 
    -webkit-overflow-scrolling: touch; 
}
.kb-section:has(.kb-head-box) { 
    margin-top: 10px; 
}

/* 타이틀 스타일 */
.kb-head-box { 
    text-align: center !important; 
    margin-bottom: 30px; 
    width: 100% !important; 
    display: block !important; 
    box-sizing: border-box !important; 
}
.kb-head-tit { 
    font-size: 36px; 
    font-weight: 900; 
    color: #002870; 
    position: relative; 
    display: inline-block; 
    padding-bottom: 15px; 
    margin: 0; 
    line-height: 1.3; 
    letter-spacing: -1px; 
}
.kb-head-tit::after { 
    content: ''; 
    position: absolute; 
    bottom: 0; 
    left: 50%; 
    transform: translateX(-50%); 
    width: 60px; 
    height: 4px; 
    background: #002870; 
}
.kb-head-sub { 
    font-size: 19px; 
    color: #666; 
    margin: 12px 0 0 0; 
}
.kb-head-box.kb-head-left { 
    text-align: left !important; 
}
.kb-head-box.kb-head-center { 
    text-align: center !important; 
}
.kb-head-box.kb-head-right { 
    text-align: right !important; 
}
.kb-head-tit.kb-head-tit-left::after { 
    left: 0 !important; 
    transform: none !important; 
}
.kb-head-tit.kb-head-tit-right::after { 
    left: auto !important; 
    right: 0 !important; 
    transform: none !important; 
}

/* 표 스타일 */
.kb-grid-table { 
    display: grid; 
    gap: 20px; 
    border: 1px solid #e5e7eb; 
    padding: 25px; 
    grid-template-columns: 1fr 1fr; 
    margin-top: 10px !important;
}
.kb-row { 
    display: flex; 
    flex-direction: column; 
    border-bottom: 1px solid #eee; 
    padding-bottom: 8px; 
}
.kb-key { 
    font-size: 15px; 
    color: #777; 
    font-weight: 500; 
}
.kb-val { 
    font-size: 17px; 
    font-weight: 700; 
    color: #333333; 
}
.kb-grid-table.kb-table-align-left .kb-key, 
.kb-grid-table.kb-table-align-left .kb-val { 
    text-align: left !important; 
}
.kb-grid-table.kb-table-align-center .kb-key, 
.kb-grid-table.kb-table-align-center .kb-val { 
    text-align: center !important; 
}
.kb-grid-table.kb-table-align-right .kb-key, 
.kb-grid-table.kb-table-align-right .kb-val { 
    text-align: right !important; 
}

/* 카드 그리드 스타일 */
.kb-grid-3 { 
    display: grid; 
    gap: 15px; 
    grid-template-columns: repeat(3, 1fr);
}
.kb-grid-3 .kb-badge {
    background: #002870 !important;
}
.kb-grid-3 .kb-card.active .kb-badge {
    background: #e53935 !important;
}
.kb-grid-3 .kb-card:hover,
.kb-grid-3 a.kb-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
    border-color: #006dbb !important;
}
.kb-grid-2 { 
    display: grid !important; 
    gap: 10px !important; 
    grid-template-columns: 1fr 1fr !important; 
    margin-top: 10px !important; 
}
.kb-card { 
    border: 1px solid #e5e7eb; 
    padding: 20px; 
    background: #fff; 
    word-break: keep-all; 
    transition: 0.2s; 
}
.kb-card:hover, 
a.kb-card:hover { 
    transform: translateY(-3px); 
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); 
    border-color: #006dbb; 
}
.kb-card.active, 
a.kb-card.active { 
    border: 1px solid #e53935; 
    background: #fff5f5; 
}
a.kb-card { 
    border: 1px solid #e5e7eb; 
    padding: 20px; 
    background: #fff; 
    word-break: keep-all; 
    transition: 0.2s; 
    text-decoration: none; 
    color: inherit; 
    display: block; 
}
.kb-badge { 
    display: inline-block; 
    background: #006dbb; 
    color: white; 
    padding: 2px 8px; 
    font-size: 13px; 
    font-weight: 700; 
    margin-bottom: 10px; 
}
.kb-card.active .kb-badge { 
    background: #e53935; 
}
.kb-card-tit { 
    font-size: 17px; 
    font-weight: 400; 
    color: #333333; 
}
.kb-card-sub { 
    display: block; 
    margin-top: 6px; 
    font-size: 15px; 
    font-weight: 400; 
    color: #666; 
    line-height: 1.4; 
}

/* 플렉스 카드 스타일 */
.kb-flex-card { 
    display: flex !important; 
    align-items: flex-start !important; 
    padding: 15px !important; 
    border: 1px solid #e5e7eb !important; 
    background: #fff !important; 
    transition: 0.2s; 
}
.kb-flex-card:hover, 
a.kb-flex-card:hover { 
    transform: translateY(-3px); 
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); 
    border-color: #006dbb; 
}
.kb-flex-card.active, 
a.kb-flex-card.active { 
    border: 1px solid #e53935 !important; 
    background: #fff5f5 !important; 
    padding: 15px !important; 
}
a.kb-flex-card { 
    display: flex !important; 
    align-items: flex-start !important; 
    padding: 15px !important; 
    border: 1px solid #e5e7eb !important; 
    background: #fff !important; 
    transition: 0.2s; 
    text-decoration: none; 
    color: inherit; 
}
.kb-icon { 
    font-size: 38px !important; 
    margin-right: 20px !important; 
    line-height: 1 !important; 
    flex-shrink: 0 !important; 
}
.kb-flex-content { 
    flex: 1 !important; 
    display: flex !important; 
    flex-direction: column !important; 
    justify-content: center !important; 
}
.kb-flex-tit { 
    margin: 0 0 8px 0 !important; 
    font-size: 19px !important; 
    font-weight: 700 !important; 
    color: #002870 !important; 
    line-height: 1.3 !important; 
    border-left: none !important; 
    padding-left: 0 !important; 
}
.kb-flex-tit::before, 
.kb-flex-tit::after { 
    content: none !important; 
    display: none !important; 
}
.kb-flex-desc { 
    margin: 0 !important; 
    font-size: 17px !important; 
    color: #555 !important; 
    line-height: 1.5 !important; 
}

/* 1열 카드 스타일 */
.kb-grid-onecol { 
    display: grid !important; 
    grid-template-columns: 1fr !important; 
    gap: 15px !important; 
    margin-top: 10px !important; 
}
.kb-onecol-card {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    padding: 25px !important;
    border-radius: 0 !important;
    transition: 0.2s !important;
}
.kb-onecol-card:hover, 
a.kb-onecol-card:hover { 
    transform: translateY(-3px) !important; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important; 
    border-color: #006dbb !important; 
}
.kb-onecol-card.active, 
a.kb-onecol-card.active { 
    border: 1px solid #e53935 !important; 
    background: #fff5f5 !important; 
}
a.kb-onecol-card {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    padding: 25px !important;
    border-radius: 0 !important;
    transition: 0.2s !important;
    text-decoration: none !important;
    color: inherit !important;
    display: block !important;
}
.kb-onecol-code { 
    display: inline-block !important; 
    background-color: #006dbb !important; 
    color: #ffffff !important; 
    font-size: 15px !important; 
    font-weight: 700 !important; 
    padding: 4px 8px !important; 
    margin-bottom: 12px !important; 
    line-height: 1 !important; 
}
.kb-onecol-card.active .kb-onecol-code, 
a.kb-onecol-card.active .kb-onecol-code { 
    background-color: #e53935 !important; 
}
.kb-onecol-name { 
    font-size: 19px !important; 
    font-weight: 700 !important; 
    color: #1f2937 !important; 
    margin-bottom: 8px !important; 
    line-height: 1.4 !important; 
}
.kb-onecol-desc { 
    display: block !important; 
    font-size: 17px !important; 
    color: #4b5563 !important; 
    line-height: 1.5 !important; 
    font-weight: 400 !important; 
}

/* 1열 카드(2) 스타일 */
.kb-grid-onecol2 { 
    display: grid !important; 
    grid-template-columns: 1fr !important; 
    gap: 15px !important; 
    margin-top: 10px !important; 
}
.kb-onecol2-card {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    padding: 20px !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    transition: 0.2s !important;
}
.kb-onecol2-card:hover, 
a.kb-onecol2-card:hover { 
    transform: translateY(-3px) !important; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important; 
    border-color: #006dbb !important; 
}
.kb-onecol2-card.active, 
a.kb-onecol2-card.active { 
    border: 1px solid #e53935 !important; 
    background: #fff5f5 !important; 
}
a.kb-onecol2-card {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    padding: 20px !important;
    border-radius: 0 !important;
    transition: 0.2s !important;
    text-decoration: none !important;
    color: inherit !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
}
.kb-onecol2-icon { 
    font-size: 22px !important; 
    line-height: 1 !important; 
    flex-shrink: 0 !important; 
    margin-top: 2px !important; 
}
.kb-onecol2-content { 
    flex: 1 !important; 
    min-width: 0 !important; 
}
.kb-onecol2-title { 
    font-size: 17px !important; 
    font-weight: 700 !important; 
    color: #006dbb !important; 
    margin: 0 0 8px 0 !important; 
    line-height: 1.4 !important; 
}
.kb-onecol2-desc { 
    font-size: 15px !important; 
    color: #6b7280 !important; 
    line-height: 1.6 !important; 
    margin: 0 !important; 
}

/* 통계 카드 스타일 */
.kb-grid-statcard { 
    display: grid !important; 
    gap: 20px !important; 
    width: 100% !important; 
}
.kb-grid-statcard.cols-2 { 
    grid-template-columns: repeat(2, 1fr) !important; 
}
.kb-grid-statcard.cols-3 { 
    grid-template-columns: repeat(3, 1fr) !important; 
}
.kb-grid-statcard.cols-4 { 
    grid-template-columns: repeat(4, 1fr) !important; 
}
.kb-statcard {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    padding: 25px !important;
    border-radius: 0 !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    transition: 0.2s !important;
}
a.kb-statcard {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    padding: 25px !important;
    border-radius: 0 !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    transition: 0.2s !important;
    text-decoration: none !important;
    color: inherit !important;
}
.kb-statcard.active,
a.kb-statcard.active {
    border: 1px solid #e53935 !important;
    background: #fff5f5 !important;
}
a.kb-statcard:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
    border-color: #006dbb !important;
}
/* 호버 효과 - 웹모드/보고서모드 모두 적용 (링크가 없는 경우에도 적용) */
.kb-statcard:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
    border-color: #006dbb !important;
}
.kb-statcard-icon { 
    width: 60px !important; 
    height: 60px !important; 
    border-radius: 50% !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    font-size: 26px !important; 
    margin-bottom: 16px !important; 
}
.kb-statcard-title { 
    font-size: 17px !important; 
    font-weight: 700 !important; 
    color: #1f2937 !important; 
    margin-bottom: 8px !important; 
    line-height: 1.4 !important; 
}
.kb-statcard-desc { 
    font-size: 15px !important; 
    color: #6b7280 !important; 
    margin-bottom: 16px !important; 
    line-height: 1.5 !important; 
}
.kb-statcard-value-box { 
    padding: 16px !important; 
    border-radius: 0 !important; 
    width: 100% !important; 
    box-sizing: border-box !important; 
}
.kb-statcard-main-value { 
    font-size: 22px !important; 
    font-weight: 700 !important; 
    margin-bottom: 4px !important; 
    line-height: 1.2 !important; 
}
.kb-statcard-sub-value { 
    font-size: 15px !important; 
    opacity: 0.8 !important; 
    line-height: 1.3 !important; 
}

/* 정보 카드 스타일 */
.kb-grid-infocard { 
    display: grid !important; 
    gap: 20px !important; 
    width: 100% !important; 
}
.kb-grid-infocard.cols-2 { 
    grid-template-columns: repeat(2, 1fr) !important; 
}
.kb-grid-infocard.cols-3 { 
    grid-template-columns: repeat(3, 1fr) !important; 
}
.kb-grid-infocard.cols-4 { 
    grid-template-columns: repeat(4, 1fr) !important; 
}
.kb-infocard {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    padding: 25px !important;
    border-radius: 0 !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    transition: 0.2s !important;
}
a.kb-infocard {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    padding: 25px !important;
    border-radius: 0 !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    transition: 0.2s !important;
    text-decoration: none !important;
    color: inherit !important;
}
.kb-infocard.active,
a.kb-infocard.active {
    border: 1px solid #e53935 !important;
    background: #fff5f5 !important;
}
a.kb-infocard:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
    border-color: #006dbb !important;
}
/* 호버 효과 - 웹모드/보고서모드 모두 적용 (링크가 없는 경우에도 적용) */
.kb-infocard:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
    border-color: #006dbb !important;
}
.kb-infocard-number { 
    width: 32px !important; 
    height: 32px !important; 
    border-radius: 50% !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    font-size: 17px !important; 
    font-weight: 700 !important; 
    color: #fff !important; 
    margin-bottom: 12px !important; 
    border: 2px solid !important; 
}
.kb-infocard-icon { 
    width: 80px !important; 
    height: 80px !important; 
    border-radius: 50% !important; 
    border-width: 2px !important; 
    border-style: solid !important; 
    background-color: #fff !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    font-size: 34px !important; 
    margin-bottom: 16px !important; 
}
.kb-infocard-title { 
    font-size: 19px !important; 
    font-weight: 700 !important; 
    color: #1f2937 !important; 
    margin-bottom: 8px !important; 
    line-height: 1.4 !important; 
}
.kb-infocard-subtitle { 
    font-size: 15px !important; 
    color: #4b5563 !important; 
    line-height: 1.5 !important; 
}

/* 정보카드(2) 스타일 */
.kb-grid-infocard2 {
    display: grid !important;
    gap: 20px !important;
    width: 100% !important;
}
.kb-grid-infocard2.cols-2 {
    grid-template-columns: repeat(2, 1fr) !important;
}
.kb-grid-infocard2.cols-3 {
    grid-template-columns: repeat(3, 1fr) !important;
}
.kb-grid-infocard2.cols-4 {
    grid-template-columns: repeat(4, 1fr) !important;
}
.kb-infocard2 {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    padding: 24px !important;
    border-radius: 4px !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    transition: 0.2s !important;
}
.kb-infocard2:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
    border-color: #006dbb !important;
}
.kb-infocard2-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    margin-bottom: 16px !important;
}
.kb-infocard2-icon i {
    font-size: 22px !important;
}
.kb-infocard2-emoji {
    font-size: 24px !important;
}
.kb-infocard2-line1 {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    margin-bottom: 6px !important;
    line-height: 1.4 !important;
}
.kb-infocard2-line2 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    margin-bottom: 10px !important;
    line-height: 1.4 !important;
}
.kb-infocard2-line3 {
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #6b7280 !important;
    line-height: 1.6 !important;
}

/* 업종코드 카드 스타일 */
.kb-grid-industry-code {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    width: 100% !important;
    align-items: stretch !important;
}
.kb-industry-code-card {
    display: flex !important;
    flex-direction: column !important;
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 4px !important;
    padding: 20px !important;
    transition: 0.2s !important;
}
.kb-industry-code-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
    border-color: #006dbb !important;
}
.kb-industry-code-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
}
.kb-industry-code-icon {
    flex-shrink: 0 !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
}
.kb-industry-code-icon i {
    font-size: 18px !important;
}
.kb-industry-code-emoji {
    font-size: 20px !important;
}
.kb-industry-code-title {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    line-height: 1.3 !important;
}
.kb-industry-code-items {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    flex: 1 !important;
}
.kb-industry-code-item {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 8px !important;
}
.kb-industry-code-badge {
    display: inline-block !important;
    background: #dbeafe !important;
    color: #002870 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
}
.kb-industry-code-badge-highlight {
    background: #b91c1c !important;
    color: #ffffff !important;
}
.kb-industry-code-content {
    font-size: 15px !important;
    color: #374151 !important;
    line-height: 1.5 !important;
}
.kb-industry-code-note {
    font-size: 13px !important;
    color: #6b7280 !important;
}
.kb-industry-code-note-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    background: #9ca3af !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

/* 비디오 스타일 */
.kb-video { 
    position: relative; 
    padding-bottom: 56.25%; 
    height: 0; 
    overflow: hidden; 
    width: 100% !important; 
    background: #333333;
    margin-bottom: 0 !important;
}
.kb-video iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100% !important; 
    height: 100% !important; 
}
.kb-caption { 
    padding: 12px; 
    background: #f8f9fa; 
    border-top: 1px solid #eee; 
    font-size: 15px; 
    color: #666; 
    text-align: center; 
}
.kb-caption:empty { 
    display: none; 
}

/* Swiper 슬라이더 스타일 */
.swiper-button-next, 
.swiper-button-prev { 
    color: #fff !important; 
    width: 32px !important; 
    height: 32px !important; 
}
.swiper-button-next::after, 
.swiper-button-prev::after { 
    color: #fff !important; 
    font-size: 17px !important; 
    text-shadow: 0 2px 8px rgba(0,0,0,0.5) !important; 
}
.swiper-pagination-bullet { 
    background: #fff !important; 
    opacity: 0.5 !important; 
}
.swiper-pagination-bullet-active { 
    opacity: 1 !important; 
}

/* 차트 스타일 */
.kb-chart-wrap { 
    display: flex; 
    align-items: center; 
    gap: 30px; 
    justify-content: center; 
    width: 100%; 
    min-width: 0; 
    overflow-x: auto; 
    box-sizing: border-box; 
    -webkit-overflow-scrolling: touch; 
}
.kb-chart-area { 
    flex: 0 1 50%; 
    min-width: 0; 
    min-height: 220px; 
    position: relative; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    box-sizing: border-box; 
}
.kb-chart-area canvas { 
    flex-shrink: 0; 
    max-width: 100%; 
    height: auto; 
}
.kb-chart-area-pie { 
    width: 220px; 
    flex: 0 0 auto; 
    min-width: 220px; 
}
.kb-chart-center { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    text-align: center; 
    pointer-events: none; 
    z-index: 10; 
    width: 100%; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
}
.kb-chart-center-name { 
    font-size: 22px; 
    font-weight: 700; 
    color: #002870; 
    margin-bottom: 6px; 
    line-height: 1.3; 
}
.kb-chart-center-percent { 
    font-size: 26px; 
    font-weight: 700; 
    color: #002870; 
    line-height: 1.3; 
}
.kb-tbl-area { 
    flex: 0 1 50%; 
    min-width: 0; 
    box-sizing: border-box; 
}
.kb-tbl-area-pie { 
    flex: 1; 
    min-width: 0; 
}
.kb-tbl-area table { 
    width: 100%; 
    border-collapse: collapse; 
    font-size: 15px; 
    text-align: center; 
}
.kb-tbl-area th { 
    background: #f8fafc; 
    padding: 10px; 
    border-bottom: 1px solid #eee; 
}
.kb-tbl-area td { 
    padding: 10px; 
    border-bottom: 1px solid #f1f1f1; 
}
.kb-legend { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 10px; 
    justify-content: center; 
    margin-top: 15px; 
    width: 100%; 
}
.kb-leg-itm { 
    display: flex; 
    align-items: center; 
    font-size: 13px; 
    color: #555; 
}
.kb-leg-dot { 
    width: 10px; 
    height: 10px; 
    border-radius: 50%; 
    margin-right: 5px; 
}

/* 공지사항 스타일 */
.kb-nt-head { 
    background-color: #004098; 
    color: white; 
    padding: 20px 24px; 
    text-align: left; 
    width: 100% !important; 
    display: block !important; 
    box-sizing: border-box !important; 
}
.kb-nt-tit { 
    font-size: 19px; 
    font-weight: 700; 
    margin: 0; 
}
.kb-nt-head.kb-nt-head-left { 
    text-align: left !important; 
}
.kb-nt-head.kb-nt-head-center { 
    text-align: center !important; 
}
.kb-nt-head.kb-nt-head-right { 
    text-align: right !important; 
}
.kb-nt-sec-tit { 
    font-size: 26px; 
    font-weight: 800; 
    color: #333333; 
    margin: 24px 0 30px 0 !important; 
    padding-bottom: 8px; 
    border-bottom: 2px solid #e0e0e0; 
}
.kb-nt-sec-tit-small {
    font-size: 15px;
    font-weight: 400;
    color: #495057;
    margin-left: 4px;
}
.kb-nt-sec-tit-line2 {
    display: block;
    font-size: 17px;
    font-weight: 400;
    color: #6b7280;
    margin-top: 4px;
}
.kb-nt-sec-tit.kb-nt-sec-tit-left { 
    text-align: left !important; 
}
.kb-nt-sec-tit.kb-nt-sec-tit-center { 
    text-align: center !important; 
}
.kb-nt-sec-tit.kb-nt-sec-tit-right { 
    text-align: right !important; 
}
.kb-nt-sec-tit.kb-nt-sec-tit-none { 
    border-bottom: none !important; 
    padding-bottom: 0 !important; 
}
.kb-nt-table { 
    width: 100%; 
    border-collapse: collapse; 
    font-size: 17px; 
    margin-top: 10px; 
    margin-bottom: 30px; 
    table-layout: auto; 
}
.kb-nt-table th { 
    background-color: #f0f4f8; 
    padding: 10px 8px; 
    text-align: left; 
    border-bottom: 2px solid #ddd; 
    color: #495057; 
    font-weight: 700; 
    white-space: nowrap; 
}

.kb-nt-table td { 
    padding: 10px 8px; 
    border-bottom: 1px solid #eee; 
    vertical-align: middle; 
}
.kb-nt-table-emphasis-row { 
    background-color: transparent !important; 
    font-weight: 400 !important; 
}
.kb-nt-table-emphasis-row td { 
    border-bottom: 1px solid #eee !important; 
}
/* 1열 강조 스타일 */
.kb-table-col-emphasis th { 
    background-color: transparent !important; 
    border-bottom: 1px solid #eee !important; 
    font-weight: 400 !important; 
}
.kb-table-col-emphasis th.kb-col-emphasis { 
    background-color: #f0f4f8 !important; 
    font-weight: 700 !important; 
    color: #212529 !important; 
    border-right: 2px solid #ddd !important; 
}
.kb-table-col-emphasis td { 
    font-weight: 400 !important; 
}
.kb-table-col-emphasis td.kb-col-emphasis { 
    background-color: #f0f4f8 !important; 
    font-weight: 700 !important; 
    color: #212529 !important; 
    border-right: 2px solid #ddd !important; 
}
.kb-table-align-left th, 
.kb-table-align-left td { 
    text-align: left !important; 
}
.kb-table-align-center th, 
.kb-table-align-center td { 
    text-align: center !important; 
}
.kb-table-align-right th, 
.kb-table-align-right td { 
    text-align: right !important; 
}

/* 강조표 스타일 */
.kb-emphasis-table th {
    background-color: #343A40 !important;
    color: white !important;
}

.kb-emphasis-table th.kb-emphasis-header {
    background-color: #2F6FFC !important;
    color: white !important;
}

.kb-emphasis-table td.kb-emphasis-col1 {
    background-color: #F8F9FA !important;
    color: #212529 !important;
}

.kb-emphasis-table td.kb-emphasis-col {
    color: #212529 !important;
}

.kb-emphasis-table td.kb-emphasis-col strong {
    font-weight: 700 !important;
    color: #212529 !important;
}

/* 더보기 스타일 */
.kb-more-box { 
    width: 100%; 
    margin: 10px 0 30px 0; 
}
.kb-more-head { 
    margin-bottom: 15px; 
    padding-top: 10px; 
}
.kb-more-tit { 
    font-size: 22px !important; 
    font-weight: 700 !important; 
    color: #333333 !important; 
    margin: 0 !important; 
}
.kb-more-list { 
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
}
.kb-more-link { 
    text-decoration: none !important; 
    color: inherit !important; 
    display: block; 
}
.kb-more-inner { 
    background: #fff; 
    border: 1px solid #e5e5e5; 
    border-radius: 4px; 
    padding: 18px 20px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    transition: 0.2s; 
}
/* 호버 효과 - 웹모드/보고서모드 모두 적용 */
.kb-more-link:hover .kb-more-inner { 
    transform: translateY(-2px); 
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); 
    border-color: #006dbb; 
}
.kb-more-content { 
    flex: 1; 
    display: flex; 
    align-items: center; 
    flex-wrap: wrap; 
    gap: 12px; 
}
.kb-more-badge { 
    display: inline-block; 
    font-size: 13px; 
    font-weight: 600; 
    color: #fff; 
    background-color: #007bff; 
    padding: 5px 10px; 
    border-radius: 4px; 
}
.kb-more-sep { 
    display: inline-block; 
    width: 1px; 
    height: 14px; 
    background-color: #d1d1d1; 
    margin: 0 2px; 
}
.kb-more-txt { 
    font-size: 17px; 
    font-weight: 500; 
    color: #333333; 
    margin: 0; 
    line-height: 1.4; 
    word-break: keep-all; 
}
.kb-more-icon { 
    color: #ccc; 
    font-size: 15px; 
    margin-left: 15px; 
}

/* 파일 다운로드 스타일 */
.kb-filedownload-wrap {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 0 !important;
}
.kb-filedownload-wrap.kb-filedownload-left { justify-content: flex-start; }
.kb-filedownload-wrap.kb-filedownload-center { justify-content: center; }
.kb-filedownload-wrap.kb-filedownload-right { justify-content: flex-end; }
.kb-filedownload-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    color: inherit !important;
}
.kb-filedownload-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 12px 18px;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 17px;
    font-weight: 500;
    color: #333333;
    transition: 0.2s;
    width: fit-content;
}
.kb-filedownload-link:hover .kb-filedownload-inner {
    background: #D32F2F !important;
    border-color: #D32F2F !important;
    color: #ffffff !important;
}
.kb-filedownload-link:hover .kb-filedownload-icon,
.kb-filedownload-link:hover .kb-filedownload-txt {
    color: #ffffff !important;
}
.kb-filedownload-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #374151;
}
.kb-filedownload-icon svg {
    width: 20px;
    height: 20px;
}
.kb-filedownload-txt {
    color: #333333;
    line-height: 1;
}

/* 위치확인 (네이버지도) 스타일 */
.kb-location-check-wrap {
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 0 !important;
}
.kb-location-check-wrap.kb-location-check-left { justify-content: flex-start !important; }
.kb-location-check-wrap.kb-location-check-center { justify-content: center !important; }
.kb-location-check-wrap.kb-location-check-right { justify-content: flex-end !important; }
.kb-location-check-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: #002870 !important;
    color: #ffffff !important;
    padding: 12px 20px !important;
    border-radius: 2px !important;
    text-decoration: none !important;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    transition: 0.2s !important;
}
.kb-location-check-link:hover {
    filter: brightness(1.08) !important;
    color: #ffffff !important;
}
.kb-location-check-txt {
    color: #ffffff !important;
    line-height: 1 !important;
}
.kb-location-check-icon {
    display: flex !important;
    align-items: center !important;
    color: #ffffff !important;
}
.kb-location-check-no-link {
    cursor: default !important;
}

/* 수직 타이틀 스타일 */
.kb-paragraph-box { 
    width: 100% !important; 
    margin-top: 10px !important; 
    margin-bottom: 30px !important; 
}
.kb-paragraph-title { 
    font-size: 22px !important; 
    font-weight: 700 !important; 
    color: #002870 !important; 
    margin: 0 0 15px 0 !important; 
    line-height: 1.4 !important; 
    border: none !important; 
    border-left: none !important; 
    border-right: none !important; 
    padding-left: 0 !important; 
}
.kb-paragraph-title-small {
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #495057 !important;
    margin-left: 4px !important;
}
.kb-paragraph-title::before, 
.kb-paragraph-title::after { 
    display: none !important; 
    content: none !important; 
}
.kb-paragraph-title.kb-paragraph-left { 
    text-align: left !important; 
}
.kb-paragraph-title.kb-paragraph-center { 
    text-align: center !important; 
}
.kb-paragraph-title.kb-paragraph-right { 
    text-align: right !important; 
}
.kb-paragraph-content { 
    font-size: 17px !important; 
    line-height: 1.8 !important; 
    color: #333333 !important; 
    margin: 0 !important; 
}
.kb-paragraph-content.kb-paragraph-left { 
    text-align: left !important; 
}
.kb-paragraph-content.kb-paragraph-center { 
    text-align: center !important; 
}
.kb-paragraph-content.kb-paragraph-right { 
    text-align: right !important; 
}
.kb-paragraph-content a, 
/* 모든 블록의 링크 스타일 통일 (텍스트블록과 동일) */
a.link-marker {
    color: #1e293b !important; 
    text-decoration: none !important; 
    font-weight: 600 !important; 
    background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%) !important; 
    background-repeat: no-repeat !important; 
    background-size: 100% 0.2em !important; 
    background-position: 0 88% !important; 
    transition: background-size 0.25s ease-in !important; 
}

a.link-marker:hover {
    background-size: 100% 88% !important; 
}

/* 텍스트블록 스타일 (하위 호환성 유지) */
.kb-textblock-box a { 
    color: #1e293b !important; 
    text-decoration: none !important; 
    font-weight: 600 !important; 
}
.kb-paragraph-content a.link-marker, 
.kb-textblock-box a.link-marker { 
    background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%) !important; 
    background-repeat: no-repeat !important; 
    background-size: 100% 0.2em !important; 
    background-position: 0 88% !important; 
    transition: background-size 0.25s ease-in !important; 
}
.kb-paragraph-content a.link-marker:hover, 
.kb-textblock-box a.link-marker:hover { 
    background-size: 100% 88% !important; 
}

/* 텍스트 블록 스타일 */
.kb-textblock-box { 
    width: 100% !important; 
    margin-top: 10px !important; 
    margin-bottom: 30px !important; 
    font-size: 17px !important; 
    color: #333333 !important; 
    line-height: 1.8 !important; 
}
.kb-textblock-left { 
    text-align: left !important; 
}
.kb-textblock-center { 
    text-align: center !important; 
}
.kb-textblock-right { 
    text-align: right !important; 
}

/* 보고서타이틀 스타일 */
.kb-report-title {
    width: 100% !important;
    margin-top: 10px !important;
    margin-bottom: 30px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.kb-report-title.kb-report-title-left {
    align-items: flex-start !important;
}

.kb-report-title.kb-report-title-center {
    align-items: center !important;
}

.kb-report-title.kb-report-title-right {
    align-items: flex-end !important;
}

.kb-report-title-badge {
    display: inline-block !important;
    padding: 6px 12px !important;
    border-radius: 0 !important;
    color: white !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    width: fit-content !important;
}

.kb-report-title-text {
    font-size: 42px !important;
    font-weight: 900 !important;
    color: #002870 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

.kb-report-title-bottom {
    font-size: 17px !important;
    font-weight: 400 !important;
    color: #666 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

/* 핵심 요약 스타일 */
.kb-summary-box { 
    width: 100% !important; 
    margin-top: 10px !important; 
    margin-bottom: 30px !important; 
    background: #e0f2fe !important; 
    border-left: 5px solid #3b82f6 !important; 
    padding: 20px 25px !important; 
    border-radius: 4px !important; 
}
.kb-summary-title { 
    display: flex !important; 
    align-items: center !important; 
    gap: 8px !important; 
    margin-bottom: 12px !important; 
}
.kb-summary-icon { 
    font-size: 19px !important; 
}
.kb-summary-title-text { 
    font-size: 19px !important; 
    font-weight: 700 !important; 
    color: #3b82f6 !important; 
}
.kb-summary-content { 
    font-size: 17px !important; 
    line-height: 1.8 !important; 
    color: #1f2937 !important; 
}
/* .kb-summary-content a 스타일 (하위 호환성 유지, 전역 스타일로 대체됨) */
.kb-summary-content a { 
    color: #1e293b !important; 
    text-decoration: none !important; 
    font-weight: 600 !important; 
}

/* 여백 및 구분선 스타일 */
.kb-spacer { 
    height: 30px !important; 
    width: 100% !important; 
}
.kb-divider { 
    height: 1px; 
    width: 100%; 
    background-color: #e5e7eb; 
    margin: 20px 0; 
}

/* 공정률 블록 스타일 */
.kb-progress-rate {
    width: 100% !important;
    margin-top: 10px !important;
    margin-bottom: 30px !important;
}
.kb-progress-rate-main-row {
    margin-bottom: 16px !important;
    padding-top: 38px !important;
    position: relative !important;
}
.kb-progress-rate-bar-main {
    height: 12px !important;
    position: relative !important;
}
.kb-progress-rate-bar-wrap.kb-progress-rate-bar-main {
    height: 12px !important;
}
.kb-progress-rate-bar-main-fill {
    min-width: 0 !important;
}
.kb-progress-rate-total {
    position: absolute !important;
    top: 0 !important;
    transform: translateX(-50%) !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #002870 !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}
.kb-progress-rate-total.kb-progress-rate-total-visible {
    opacity: 1 !important;
}
.kb-progress-rate-total.kb-progress-rate-total-right {
    left: auto !important;
    right: 0 !important;
    transform: none !important;
}
.kb-progress-rate-total-hidden {
    opacity: 0 !important;
}
.kb-progress-rate-bar-wrap {
    width: 100% !important;
    height: 8px !important;
    background: #e5e7eb !important;
    border-radius: 4px !important;
    overflow: hidden !important;
}
.kb-progress-rate-bar {
    height: 100% !important;
    background: #002870 !important;
    border-radius: 4px !important;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.kb-progress-rate-cards {
    display: grid !important;
    gap: 12px !important;
    grid-template-columns: repeat(2, 1fr) !important;
    width: 100% !important;
}
@media (min-width: 768px) {
    .kb-progress-rate-cards {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}
.kb-progress-rate-card {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 14px !important;
    min-width: 0 !important;
    background: #F8F8FA !important;
    border: 1px solid #E8E8EC !important;
    border-radius: 2px !important;
    transition: 0.2s !important;
}
.kb-progress-rate-card-icon {
    flex-shrink: 0 !important;
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    color: #8FA0BA !important;
}
.kb-progress-rate-card-icon i {
    font-size: 16px !important;
}
.kb-progress-rate-emoji {
    font-size: 18px !important;
    color: #8FA0BA !important;
}
.kb-progress-rate-card-body {
    flex: 1 !important;
    min-width: 0 !important;
}
.kb-progress-rate-card-name {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #5A6B7D !important;
    margin-bottom: 6px !important;
}
.kb-progress-rate-card-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.kb-progress-rate-card-percent {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #5A6B7D !important;
    flex-shrink: 0 !important;
}
.kb-progress-rate-card-row .kb-progress-rate-bar-wrap {
    flex: 1 !important;
    min-width: 0 !important;
    height: 6px !important;
    background: #D3DCE5 !important;
}
.kb-progress-rate-card-row .kb-progress-rate-bar {
    background: #8FA0BA !important;
}

/* 연락처 배너 스타일 */
.kb-contact-banner { 
    width: 100% !important; 
    margin-top: 10px !important; 
    margin-bottom: 30px !important; 
    padding: 16px 0 !important; 
    min-height: 200px !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
}
.kb-contact-banner-inner { 
    width: 100% !important; 
    max-width: 832px !important; 
    background: #fff !important; 
    border: 1px solid #e5e7eb !important; 
    border-radius: 0 !important; 
    padding: 32px !important; 
    display: flex !important; 
    flex-direction: column !important; 
    align-items: center !important; 
    justify-content: space-between !important; 
    gap: 24px !important; 
    transition: 0.2s !important; 
}
/* 호버 효과 - 웹모드/보고서모드 모두 적용 */
.kb-contact-banner:hover .kb-contact-banner-inner { 
    transform: translateY(-3px) !important; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important; 
    border-color: #006dbb !important; 
}
@media (min-width: 768px) {
    .kb-contact-banner-inner { 
        flex-direction: row !important; 
        align-items: center !important; 
    }
}
.kb-contact-banner-content { 
    display: flex !important; 
    align-items: center !important; 
    gap: 20px !important; 
    flex: 1 !important; 
}
.kb-contact-banner-icon { 
    width: 56px !important; 
    height: 56px !important; 
    background: #e0f2fe !important; 
    border-radius: 0 !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    flex-shrink: 0 !important; 
}
.kb-contact-banner-icon svg { 
    width: 28px !important; 
    height: 28px !important; 
    color: #006dbb !important; 
}
.kb-contact-banner-text h4 { 
    margin: 0 0 4px 0 !important; 
    font-size: 19px !important; 
    font-weight: 700 !important; 
    color: #1f2937 !important; 
    letter-spacing: -0.5px !important; 
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important; 
    display: flex !important; 
    flex-direction: column !important; 
    align-items: flex-start !important; 
}
.kb-contact-banner-title-main { 
    font-size: 19px !important; 
    font-weight: 700 !important; 
    color: #1f2937 !important; 
    line-height: 1.3 !important; 
}
.kb-contact-banner-title-sub { 
    font-size: 13px !important; 
    font-weight: 400 !important; 
    color: #6b7280 !important; 
    line-height: 1.4 !important; 
    margin-bottom: 2px !important; 
}
.kb-contact-banner-text p { 
    margin: 0 !important; 
    font-size: 15px !important; 
    color: #4b5563 !important; 
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important; 
}
.kb-contact-banner-buttons { 
    display: flex !important; 
    align-items: center !important; 
    gap: 12px !important; 
    width: 100% !important; 
    margin-top: auto !important; 
}
@media (min-width: 768px) {
    .kb-contact-banner-buttons { 
        width: auto !important; 
        margin-top: 0 !important; 
    }
}
.kb-contact-btn { 
    padding: 12px 24px !important; 
    border-radius: 0 !important; 
    font-weight: 600 !important; 
    font-size: 15px !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    gap: 8px !important; 
    text-decoration: none !important; 
    flex: 1 !important; 
}
@media (min-width: 768px) {
    .kb-contact-btn { 
        flex: none !important; 
    }
}
.kb-contact-btn-email { 
    background: #006dbb !important; 
    color: #fff !important; 
}
.kb-contact-btn-email svg { 
    width: 16px !important; 
    height: 16px !important; 
}
.kb-contact-btn-phone { 
    background: #006dbb !important; 
    color: #fff !important; 
}
.kb-contact-btn-phone svg { 
    width: 16px !important; 
    height: 16px !important; 
}

/* 하이라이트 스타일 - 형광펜 밑줄 느낌 */
.kb-highlight { 
    display: inline !important; 
    background: linear-gradient(to right, rgba(147, 197, 253, 0.5), rgba(147, 197, 253, 0.6)) !important; 
    background-size: 0% 30% !important; 
    background-position: 0 100% !important; 
    background-repeat: no-repeat !important; 
    font-weight: 600 !important; 
    padding: 0 2px !important; 
    padding-bottom: 2px !important; 
    transition: background-size 0.4s ease-out !important; 
    position: relative !important; 
    box-decoration-break: clone !important; 
}
.kb-highlight.visible { 
    background-size: 100% 30% !important; 
    background-position: 0 100% !important; 
}

/* ============================================
   모바일/PC 뷰 전환 스타일 (Web Mode)
   ============================================ */

/* 모바일 뷰(.view-mo) 내부 요소에 직접 스타일 적용 */
.view-mo .kb-grid-table, 
.view-mo .kb-grid-2 { 
    grid-template-columns: 1fr; 
}

.view-mo .kb-grid-3 { 
    grid-template-columns: 1fr 1fr; 
}

.view-mo .kb-chart-wrap { 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
}

.view-mo .kb-chart-area { 
    width: 100%; 
    max-width: 280px; 
    margin: 0 auto; 
}

.view-mo .kb-tbl-area { 
    width: 100%; 
}

.view-mo .kb-grid-table { 
    grid-template-columns: 1fr !important; 
}

.view-mo .kb-grid-2 { 
    grid-template-columns: 1fr !important; 
}

.view-mo .kb-grid-3 { 
    grid-template-columns: 1fr 1fr !important; 
}

.view-mo .kb-progress-rate-cards {
    grid-template-columns: repeat(2, 1fr) !important;
}

.view-mo .kb-nt-row { 
    flex-direction: column; 
}

.view-mo .kb-nt-key { 
    width: 100%; 
    margin-bottom: 4px; 
}

.view-mo .kb-nt-table { 
    font-size: 14px; 
    width: 100% !important; 
    display: table !important; 
    table-layout: auto; 
    box-sizing: border-box; 
}

.view-mo .kb-more-content { 
    flex-direction: column; 
    align-items: flex-start; 
    gap: 5px; 
}

.view-mo .kb-more-sep { 
    display: none; 
}

.view-mo .kb-contact-banner { 
    padding: 12px 0 !important; 
}

.view-mo .kb-contact-banner-inner { 
    padding: 20px !important; 
    gap: 20px !important; 
    flex-direction: column !important; 
}

.view-mo .kb-contact-banner-content { 
    flex-direction: row !important; 
    align-items: center !important; 
    gap: 15px !important; 
}

.view-mo .kb-contact-banner-icon { 
    width: 48px !important; 
    height: 48px !important; 
}

.view-mo .kb-contact-banner-icon svg { 
    width: 24px !important; 
    height: 24px !important; 
}

.view-mo .kb-contact-banner-text h4 { 
    font-size: 16px !important; 
}

.view-mo .kb-contact-banner-text p { 
    font-size: 13px !important; 
}

.view-mo .kb-contact-banner-buttons { 
    flex-direction: column !important; 
    gap: 10px !important; 
    width: 100% !important; 
}

.view-mo .kb-contact-btn { 
    width: 100% !important; 
    flex: none !important; 
    padding: 14px 20px !important; 
    font-size: 14px !important; 
}

/* statcard와 infocard 모바일 뷰 조정 */
.view-mo .kb-grid-statcard.cols-2,
.view-mo .kb-grid-statcard.cols-3,
.view-mo .kb-grid-statcard.cols-4 {
    grid-template-columns: 1fr !important;
}

.view-mo .kb-grid-infocard.cols-2,
.view-mo .kb-grid-infocard.cols-3,
.view-mo .kb-grid-infocard.cols-4 {
    grid-template-columns: 1fr !important;
}
.view-mo .kb-grid-infocard2.cols-2,
.view-mo .kb-grid-infocard2.cols-3,
.view-mo .kb-grid-infocard2.cols-4 {
    grid-template-columns: 1fr !important;
}
.view-mo .kb-grid-industry-code {
    grid-template-columns: 1fr !important;
}

/* PC 뷰에서는 기존 미디어 쿼리 유지 (실제 브라우저 뷰포트 기준) */
@media (max-width: 767px) {
    /* 실제 웹사이트용 일반 선택자 */
    .kb-grid-table, 
    .kb-grid-2 { 
        grid-template-columns: 1fr !important; 
    }
    
    .kb-grid-3 { 
        grid-template-columns: 1fr 1fr !important; 
    }
    
    .kb-grid-statcard.cols-2,
    .kb-grid-statcard.cols-3,
    .kb-grid-statcard.cols-4 {
        grid-template-columns: 1fr !important;
    }
    
    .kb-grid-infocard.cols-2,
    .kb-grid-infocard.cols-3,
    .kb-grid-infocard.cols-4,
    .kb-grid-infocard2.cols-2,
    .kb-grid-infocard2.cols-3,
    .kb-grid-infocard2.cols-4 {
        grid-template-columns: 1fr !important;
    }
    .kb-grid-industry-code {
        grid-template-columns: 1fr !important;
    }
    
    .kb-chart-wrap { 
        flex-direction: column; 
        align-items: center; 
        justify-content: center; 
    }
    
    .kb-chart-area { 
        width: 100%; 
        max-width: 280px; 
        margin: 0 auto; 
    }
    
    .kb-tbl-area { 
        width: 100%; 
    }
    
    .kb-contact-banner-inner { 
        flex-direction: column !important; 
        align-items: flex-start !important; 
    }
    
    /* 웹모드용 .view-pc 선택자 (우선순위 유지) */
    .view-pc .kb-grid-table, 
    .view-pc .kb-grid-2 { 
        grid-template-columns: 1fr; 
    }
    
    .view-pc .kb-grid-3 { 
        grid-template-columns: 1fr 1fr; 
    }
    
    .view-pc .kb-chart-wrap { 
        flex-direction: column; 
        align-items: center; 
        justify-content: center; 
    }
    
    .view-pc .kb-chart-area { 
        width: 100%; 
        max-width: 280px; 
        margin: 0 auto; 
    }
    
    .view-pc .kb-tbl-area { 
        width: 100%; 
    }
    
    .view-pc .kb-contact-banner-inner { 
        flex-direction: column !important; 
        align-items: flex-start !important; 
    }
}

@media (max-width: 480px) {
    /* 실제 웹사이트용 일반 선택자 */
    .kb-grid-table { 
        grid-template-columns: 1fr !important; 
    }
    
    .kb-grid-2 { 
        grid-template-columns: 1fr !important; 
    }
    
    .kb-grid-3 { 
        grid-template-columns: 1fr 1fr !important; 
    }
    
    .kb-grid-statcard.cols-2,
    .kb-grid-statcard.cols-3,
    .kb-grid-statcard.cols-4 {
        grid-template-columns: 1fr !important;
    }
    
    .kb-grid-infocard.cols-2,
    .kb-grid-infocard.cols-3,
    .kb-grid-infocard.cols-4,
    .kb-grid-infocard2.cols-2,
    .kb-grid-infocard2.cols-3,
    .kb-grid-infocard2.cols-4 {
        grid-template-columns: 1fr !important;
    }
    .kb-grid-industry-code {
        grid-template-columns: 1fr !important;
    }
    
    .kb-chart-wrap { 
        flex-direction: column !important; 
        align-items: center !important; 
        justify-content: center !important; 
    }
    
    .kb-chart-area { 
        width: 100% !important; 
        max-width: 280px !important; 
        margin: 0 auto !important; 
    }
    
    .kb-tbl-area { 
        width: 100% !important; 
    }
    
    .kb-nt-row { 
        flex-direction: column; 
    }
    
    .kb-nt-key { 
        width: 100%; 
        margin-bottom: 4px; 
    }
    
    .kb-nt-table { 
        font-size: 14px; 
        display: block; 
        overflow-x: auto; 
        white-space: nowrap; 
    }
    
    .kb-more-content { 
        flex-direction: column; 
        align-items: flex-start; 
        gap: 5px; 
    }
    
    .kb-more-sep { 
        display: none; 
    }
    
    .kb-contact-banner { 
        padding: 12px 0 !important; 
    }
    
    .kb-contact-banner-inner { 
        padding: 20px !important; 
        gap: 20px !important; 
        flex-direction: column !important; 
    }
    
    .kb-contact-banner-content { 
        flex-direction: row !important; 
        align-items: center !important; 
        gap: 15px !important; 
    }
    
    .kb-contact-banner-icon { 
        width: 48px !important; 
        height: 48px !important; 
    }
    
    .kb-contact-banner-icon svg { 
        width: 24px !important; 
        height: 24px !important; 
    }
    
    .kb-contact-banner-text h4 { 
        font-size: 16px !important; 
    }
    
    .kb-contact-banner-text p { 
        font-size: 13px !important; 
    }
    
    .kb-contact-banner-buttons { 
        flex-direction: column !important; 
        gap: 10px !important; 
        width: 100% !important; 
    }
    
    .kb-contact-btn { 
        width: 100% !important; 
        flex: none !important; 
        padding: 14px 20px !important; 
        font-size: 14px !important; 
    }
    
    /* 웹모드용 .view-pc 선택자 (우선순위 유지) */
    .view-pc .kb-grid-table { 
        grid-template-columns: 1fr !important; 
    }
    
    .view-pc .kb-grid-2 { 
        grid-template-columns: 1fr !important; 
    }
    
    .view-pc .kb-grid-3 { 
        grid-template-columns: 1fr 1fr !important; 
    }
    
    .view-pc .kb-chart-wrap { 
        flex-direction: column !important; 
        align-items: center !important; 
        justify-content: center !important; 
    }
    
    .view-pc .kb-chart-area { 
        width: 100% !important; 
        max-width: 280px !important; 
        margin: 0 auto !important; 
    }
    
    .view-pc .kb-tbl-area { 
        width: 100% !important; 
    }
    
    .view-pc .kb-nt-row { 
        flex-direction: column; 
    }
    
    .view-pc .kb-nt-key { 
        width: 100%; 
        margin-bottom: 4px; 
    }
    
    .view-pc .kb-nt-table { 
        font-size: 14px; 
        display: block; 
        overflow-x: auto; 
        white-space: nowrap; 
    }
    
    .view-pc .kb-more-content { 
        flex-direction: column; 
        align-items: flex-start; 
        gap: 5px; 
    }
    
    .view-pc .kb-more-sep { 
        display: none; 
    }
    
    .view-pc .kb-contact-banner { 
        padding: 12px 0 !important; 
    }
    
    .view-pc .kb-contact-banner-inner { 
        padding: 20px !important; 
        gap: 20px !important; 
        flex-direction: column !important; 
    }
    
    .view-pc .kb-contact-banner-content { 
        flex-direction: row !important; 
        align-items: center !important; 
        gap: 15px !important; 
    }
    
    .view-pc .kb-contact-banner-icon { 
        width: 48px !important; 
        height: 48px !important; 
    }
    
    .view-pc .kb-contact-banner-icon svg { 
        width: 24px !important; 
        height: 24px !important; 
    }
    
    .view-pc .kb-contact-banner-text h4 { 
        font-size: 16px !important; 
    }
    
    .view-pc .kb-contact-banner-text p { 
        font-size: 13px !important; 
    }
    
    .view-pc .kb-contact-banner-buttons { 
        flex-direction: column !important; 
        gap: 10px !important; 
        width: 100% !important; 
    }
    
    .view-pc .kb-contact-btn { 
        width: 100% !important; 
        flex: none !important; 
        padding: 14px 20px !important; 
        font-size: 14px !important; 
    }
}