/* ------------------ 공통/타이포 ------------------ */
h2{ font-weight:700; word-break:keep-all }
p{ margin-bottom:0; word-break:keep-all }
span{ font-weight:700 }

.introUnderLine{
    background: linear-gradient(to top, #e5e5e5 40%, transparent 40%);
}

.guide-qna-pre{ color:#FF5D1A; }

#categoryNameSelect{ display:none; position:absolute; top:0; right:1rem; }
#categoryNameSelect .com-select{
    width:200px; padding:10px 15px 10px 0; text-align:center; border-radius:9999px;
}
#categoryNameSelect .com-select-cont-div{
    width:200px; text-align:center; border-radius:24px;
}

/* ------------------ 변수 ------------------ */
:root{
    --body-bg:#fff;
    --radius:20px;
    --notch-size:28px;      /* 양쪽 ‘바이트’ 크기 */
    --notch-offset:16px;    /* 좌우 가장자리로부터 거리 */
    --banner-h:200px;       /* 배너 높이 */
}

/* ------------------ 배너 ------------------ */
.introTop{
    position:relative;
    border-radius:var(--radius);
    overflow:hidden;
    padding:32px 40px;
    color:#fff;
    min-height:var(--banner-h);
    background:
            url("/industry/img/intro_background1-da0ad9df891f20b2374890d55232d0f8.png") center/cover no-repeat;
}
.treeTop{
    position:relative;
    border-radius:var(--radius);
    overflow:hidden;
    padding:16px 16px;
    margin-top:190px;
    color:#fff;
    min-height: 110px;
    /* 배경: 이미지 + 오버레이 그라데이션(가독성 강화) */
    background:
            url("/industry/img/speIntroTree-76843c0e3ed8b502154388095b5a76ff.png") center/cover no-repeat;
}
.treeTop h3{
    margin:0;
    font-weight:500;
    font-size:1.2rem;
    line-height:1.4; /* 기존 1.0 → 가독성 향상 */
    opacity:.98;
}

/* 배너 텍스트 */
.introInner{ max-width:1080px; }
.introTop h1{
    margin:0 0 10px 0;
    font-weight:800;
    font-size:2rem;
    line-height:1.2;
    text-shadow:0 1px 2px rgba(0,0,0,.15);
}
.introTop h3{
    word-break: keep-all;
    margin:0;
    font-weight:500;
    font-size:1.1rem;
    line-height:1.4; /* 기존 1.0 → 가독성 향상 */
    opacity:.98;
}
.introBold{ font-weight:800; }

/* 섹션 여백/본문 라인 높이 */
#bizCodeGuide .mt-4{ margin-top:3.5rem !important; margin-bottom:3.5rem; }
#bizCodeGuide .mt-4 p{ line-height:1.5; } /* 기존 1.2 → 가독성 보정 */
#bizCodeGuide .container{
    margin-left:3rem !important;
    margin-right:3rem !important;
    max-width:100%;
}

/* ------------------ 번호 배지 + 텍스트(겹침) ------------------ */
/* 래퍼: 기준점 */
.introOverlap{
    position:relative;
    padding-left:72px;      /* 텍스트 좌측 여유(배지 직경+여백) */
    min-height:56px;        /* 배지 높이만큼 확보 */
}

/* 숫자 원(텍스트를 살짝 침범) */
.introNumber{
    position:absolute;
    left:24px;              /* 리스트 안쪽으로 */
    top:-6px;               /* 살짝 내려와 텍스트 침범 */
    z-index:0;              /* 텍스트 아래 */
    width:56px; height:56px;
    border-radius:50%;
    background:#f2f2f2;
    color:#ff6600;
    font-weight:800;
    font-size:1.6rem;
    display:flex; align-items:center; justify-content:center; /* 정중앙 정렬 */
    margin:0;
    pointer-events:none;
}

/* 텍스트(숫자 위에 오도록) */
.introText{
    position:relative;
    z-index:1;              /* 배지 위 */
    margin:0;
    font-weight:800;
    font-size:1.2rem;
    color:#111;
    line-height:1.25;
    /* 필요하면 미세조정: margin-top:-2px; */
}

/* 불릿 강조 */
.intro-pre-dot{
    font-size:1.6rem;       /* 살짝 줄여 균형 */
    color:#FF5D1A;
}

/* ------------------ 레이아웃 공통 ------------------ */
#ksicGuide, #industryIntro, #bizCodeGuide, #codeGuide,#industrySpeIntro{
    font-size:1.125rem;
    line-height:1.75;
    letter-spacing:0.01em;
    padding:3rem 5rem 5rem;
    max-width:100rem;
    width:min(100%, 100rem);
    margin:0 auto;
}
#ksicGuide h2, #industryIntro h2, #bizCodeGuide h2, #codeGuide h2{ font-size:1.875rem; margin-top:20px; }
#ksicGuide h3, #industryIntro h3, #bizCodeGuide h3, #codeGuide h3,#industrySpeIntro h3{ font-size:1.375rem; }

.tbl-st-2{ width:100%; }
.row .introText{ font-weight:800; }

/* ------------------ 반응형 ------------------ */
@media (max-width:991px){
    .ind-intro-title-div{ margin-bottom:9rem; }
    #categoryNameSelect{ display:block; top:4rem; right:0; width:100%; }
    #categoryNameSelect .com-select{ width:100%; height:2.5rem; padding:5px 15px 5px 0; }
    #categoryNameSelect .com-select::before{ top:7px; }
    #categoryNameSelect .com-select.open::before{ top:14px; }
    #categoryNameSelect .com-select-cont-div{ width:100%; top:2.5rem; }
    #categoryNameSelect .com-select-cont{ height:2.5rem; padding:5px 15px; }

    #ksicGuide, #industryIntro, #bizCodeGuide, #codeGuide{ font-size:1.0625rem; }
    #ksicGuide h2, #industryIntro h2, #bizCodeGuide h2, #codeGuide h2,#industrySpeIntro h2{ font-size:1.625rem; }
    #ksicGuide h3, #industryIntro h3, #bizCodeGuide h3,#industrySpeIntro h3{ font-size:1.25rem; }

    :root{
        --notch-size:24px;
        --notch-offset:14px;
        --radius:16px;
    }
    .introTop{ padding:22px 20px; }
}

@media (max-width:767px){
    #introSrc p:nth-child(1){ display:block; }
} /* ====== 기본 타이포 ====== */
html, body {
    margin: 0;
    padding: 0
}

h1, h2, h3 {
    margin: 0
}

h2 {
    font-weight: 700;
    word-break: keep-all
}

p {
    margin: 0;
    word-break: keep-all
}

.introBold {
    font-weight: 800
}

/* ====== 변수 ====== */
:root {
    --body-bg: #fff;
    --radius: 20px;
    --banner-h: 200px;
    --notch-size: 28px;
    --notch-offset: 16px;
    --color-orange: #FF5D1A;
    --color-orange-active: #F04F0F;
}

/* ====== 섹션 래퍼 ====== */
#industrySpeIntro {
    max-width: 1920px;
    width: 100%;
    margin: 0 auto;
    color: #222;
    /*font-size:1rem;*/
    background: #fff;
}


.introInner {
    max-width: 1080px;
}

.introTop h1 {
    margin: 0 0 10px 0;
    font-weight: 800;
    font-size: 2rem;
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}

.introTop h3 {
    margin: 0;
    font-weight: 500;
    /*font-size:1.2rem;*/
    line-height: 1.4;
    opacity: .98;
}

/* ====== 본문 3:9 그리드 ====== */
.spe-grid {
    display: grid;
    grid-template-columns: minmax(240px, 20%) minmax(0, 80%); /* 3:9 */
    gap: 2rem;
    padding: 0 5% 90px 5%;
}

/* 왼쪽 트리 */
#categoryNameTree {
    width: 100%;
    padding: 0 1rem;
}

#categoryNameTree h5 {
    padding: 18px 0 7px 10px;
    font-size: 1.3rem;
    font-weight: 800;
    border-bottom: 1px solid #000;
}

#categoryNameTree ul {
    list-style: none;
    padding: 5px 0 0 5%;
    margin: 0;
}

#categoryNameTree ul li a {
    font-weight: 600;
    font-size: 17px;
    line-height: 40px;
    color: #000;
    text-decoration: none;
}

#categoryNameTree ul li.selected a {
    font-weight: 800;
    color: var(--color-orange);
}

/* 오른쪽 본문 컨테이너 */
.ind-intro-container {
    width: 100%;
    min-width: 0;
}

.ind-intro-title-div {
    display: none;
    justify-content: space-between;
    border-bottom: 2px solid #222;
    padding-bottom: .5rem;
    margin-bottom: 1.25rem;
}

/* ====== 구분 라인 이미지 ====== */
.divider {
    width: 100%;
    height: 1px;
    display: block;
    margin: 2.5rem 0;
}

/* ====== 반응형 ====== */
@media (max-width: 991px) {
    .introTop {
        margin: 135px 15% 20px 15%;
    }

    .spe-grid {
        grid-template-columns:1fr;
        gap: 1.25rem;
        padding: 0 15% 90px 15%;
    }

    #categoryNameTree {
        display: none;
    }
}

@media (max-width: 575px) {
    .introTop {
        margin: 115px 3% 20px 3%;
    }

    .spe-grid {
        padding: 0 3% 80px 3%;
    }
}

/* 오른쪽 본문 각 섹션을 3:9로 분할 */
.ind-intro-container .row {
    display: grid;
    grid-template-columns: minmax(180px, 25%) minmax(0, 75%); /* 3:9 */
    column-gap: 2rem;
    align-items: start;
}

/* 왼쪽 헤더(번호배지+제목) 컬럼: 내부 패딩/포지션 다듬기 */
.ind-intro-container .row .introOverlap {
    padding-left: 56px; /* 배지 여유공간 */
    min-height: 56px;
}

/* 번호 배지 살짝 겹치기 */
/*.ind-intro-container .row .introNumber{*/
/*    left: 0;              !* 그리드 왼쪽에서 시작 *!*/
/*    top: -6px;*/
/*    width: 56px; height: 56px;*/
/*}*/
#industrySpeIntro .introText {
    top: 31px;

}

/* 본문 텍스트 컬럼 */
.ind-intro-container .row .content {
    min-width: 0; /* 긴 문장/표 줄바꿈 */
}

/* 모바일/태블릿에서는 1열로 */
@media (max-width: 991px) {
    .ind-intro-container .row {
        grid-template-columns: 1fr;
        row-gap: .5rem;
    }

    .ind-intro-container .row .introOverlap {
        padding-left: 72px; /* 모바일에선 기존 여백 유지 */
    }
}

.introTop {
    /*margin-bottom: 30px;*/
}
#to-classification{
    position: absolute;
    right: 10rem;
    z-index:1;
}
#to-classification a {
    display: flex
;
    gap: 15px;
    justify-content: center;
    align-items: center;
    width: 209px;
    height: 56px;
    padding: 0 10px 0 20px;
    background-color: var(--color-new-orange);
    border-radius: 15px;
    color: #fff;
    border: none;
}

.box-content { position: relative; padding-top: 40px; }
.box-content:before { content: ""; position: absolute; top: -20px; left: 0; width: 100%; height: 40px; border-top-left-radius: 20px;
    border-top-right-radius: 20px; background-color: #FFFFFF; }