/* =========================
   공통 타이포 & 유틸
========================= */
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; }

/* =========================
   상단 로고/레이아웃
========================= */
#logoWrap{ opacity:1; }
#logoWrap *{ display:block; }
#main_top{ background:#F2F4F8; }
.main-bottom{ padding:150px 20%; }

/* =========================
   변수 (노치/배너)
========================= */
:root{
    --body-bg:#fff;
    --radius:20px;
    --banner-h:200px;
    --notch-size:28px;
    --notch-offset:16px;
    --color-new-orange:#FF5D1A;
    --color-new-orange-active:#F04F0F;
}


/*.introTop::before,*/
/*.introTop::after{*/
/*    content:"";*/
/*    position:absolute;*/
/*    bottom: calc(-1 * var(--notch-size) / 2);*/
/*    width:var(--notch-size); height:var(--notch-size);*/
/*    background:var(--body-bg);*/
/*    border-radius:50%;*/
/*    box-shadow:0 -0.5px 0 rgba(0,0,0,.08);*/
/*    z-index:1;*/
/*}*/
/*.introTop::before{ left:var(--notch-offset); }*/
/*.introTop::after{  right:var(--notch-offset); }*/

.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;
}
.introBold{ font-weight:800; }

/* =========================
   특수분류 인트로 레이아웃
========================= */
/* 컨테이너: 좌우 동일 패딩 + flex 간격 */
/* 컨테이너: 3:9 비율 그리드 */
#industrySpeIntro{
    display: grid;
    grid-template-columns: minmax(220px, 25%) minmax(0, 75%); /* ≈ 3:9 */
    gap: 2rem;
    max-width: 1920px;
    width: 95%;
    margin: 0 auto;
    padding: 60px 5% 90px 5%;      /* 좌우 대칭 패딩 */
    color: #222;
    font-weight: 400;
    font-size: 1rem;
}

/* 왼쪽 트리: 고정폭 하한 + 자동 높이 */
#categoryNameTree{
    width: 100%;                   /* 그리드 셀 너비 채우기 */
    padding: 0 1rem;
}

/* 오른쪽 본문: 남는 공간 전부 */
#industrySpeIntro .ind-intro-container{
    width: 100%;
    min-width: 0;                  /* 긴 제목/표 줄바꿈 허용 */
}

/* 필요하면 트리 고정(스크롤 시 따라오게) */
@media (min-width: 992px){
    #categoryNameTree{
        position: sticky;
        top: 110px;                  /* 상단 공통헤더 높이에 맞추어 조정 */
    }
}

/* 태블릿/모바일: 1열로 전환 */
@media (max-width: 991px){
    #industrySpeIntro{
        grid-template-columns: 1fr;  /* 단일 컬럼 */
        padding: 135px 15% 90px 15%; /* 네가 쓰던 모바일 패딩 유지 */
        gap: 1.25rem;
    }
    #categoryNameTree{ display: none; }  /* 모바일에선 숨김(필요 시 표시) */
    #industrySpeIntro .ind-intro-container{ width: 100%; }
}

#categoryNameTree ul{ list-style:none; padding-left:5%; padding-top:5px; }
#categoryNameTree ul li a{ font-family:'Freesentation-6SemiBold'; font-size:17px; line-height:30px; color:#000; }
#categoryNameTree ul li a:hover{ text-decoration:none; }
#categoryNameTree ul li.selected a{ font-family:'Freesentation-8ExtraBold'; color:var(--color-new-orange); }
#categoryNameTree ul li.selected a:hover{ cursor:default; }

.ind-intro-container{ max-width:none; position:relative; padding-left:0; padding-right:0; }
#industrySpeIntro .ind-intro-container{ width: calc(100% - 250px); }
.ind-intro-title-div{
    display:flex; justify-content:space-between;
    border-bottom:2px solid #222; padding-bottom:.5rem;
}
.ind-intro-title-div h2{ font-weight:700; font-size:1.7rem; }
.ind-intro-subtitle-div{ word-break:keep-all; }
.ind-intro-subtitle-div h2{ font-weight:700; font-size:1.7rem; margin-top:3rem; }
.ind-intro-container p{ word-break:keep-all; }

/* 상단 우측 바로가기 버튼 (필요 시 노출) */
#to-classification{ position:absolute; top:0; right:1rem; }
#to-classification a{
    display:flex; gap:15px; justify-content:center; align-items:center;
    width:200px; height:40px; padding:0 10px 0 20px;
    background-color:var(--color-new-orange); border-radius:15px; color:#fff; border:none;
}
#to-classification a:hover{ text-decoration:none; }
#to-classification img{ width:15px; height:15px; }

/* =========================
   카드 헤더: 번호 배지 + 텍스트 (겹침) (변경)
========================= */
.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;
}
.intro-pre-dot{ font-size:1.6rem; color:#FF5D1A; }

/* 섹션 여백 */
#bizCodeGuide .mt-4{ margin-top:3.5rem !important; margin-bottom:3.5rem; }
#bizCodeGuide .mt-4 p{ line-height:1.5; }
#bizCodeGuide .container{
    margin-left:3rem !important; margin-right:3rem !important; max-width:100%;
}

/* =========================
   셀렉트(우측 드롭다운)
========================= */
#categoryNameSelect{ display:none; position:absolute; top:0; right:1rem; }
#categoryNameSelect .com-select{
    width:200px; height:2.5rem; padding:5px 15px 5px 0;
    text-align:center; border-radius:9999px;
}
#categoryNameSelect .com-select-cont-div{ width:200px; text-align:center; border-radius:24px; }

/* =========================
   Guide 영역 (그대로 유지)
========================= */
.guide-main .guide-background-image{
    height:920px; display:flex; justify-content:center; align-items:center;
    background:url(/industry/img/learn/guide-opacity-background-be23050d9adfa0bcf17333c5457bc71b.png) center/cover no-repeat;
}
.guide-main .guide-content-default{
    max-width:1920px; height:650px; width:1050px; text-align:center;
    margin-top:40px; border:10px solid #436ea5; background-color:#FFF;
}
.guide-main .guide-sub-title{
    color:#2C077C; text-align:center; font-size:25px; line-height:20px; letter-spacing:1px; font-weight:700; padding:60px 0 0 0;
}
.guide-main .guide-sub-title:after{
    content:""; display:block; width:50px; border-bottom:#ff0002 2px solid; margin:20px auto 60px auto;
}
.guide-main .guide-nav-title{ font-size:60px; color:transparent; padding-bottom:40px; }
.guide-main .guide-nav-title span:nth-child(1){ background:linear-gradient(to right top,#861657,#ffa69e); -webkit-background-clip:text; }
.guide-main .guide-nav-title span:nth-child(2){ background:linear-gradient(to right top,#0c1eb7,#28b3ff); -webkit-background-clip:text; }
.guide-main .guide-button-bar{ display:inline-flex; justify-content:center; }
.guide-main .guide-button-bar>div{
    width:190px; height:100px; margin:0 20px; display:flex; align-items:center; justify-content:center;
    box-shadow:0 1px 3px rgba(0,0,0,.30), 0 4px 8px 3px rgba(0,0,0,.15);
    color:#1D192B; text-align:center; font-weight:700; font-size:20px; line-height:30px; letter-spacing:1px; cursor:pointer;
}
.guide-main .guide-button-bar>div.guide-button{ border-radius:16px; background:#E8DEF8; }
.guide-main .guide-button-bar>div.keyword-button{ border-radius:16px; background:#F0A3A3; }
.guide-main .guide-notice{ font-size:18px; text-align:start; margin:75px; }
.guide-main .guide-notice:before{ content:""; display:block; width:880px; border-bottom:#1869B9 2px solid; margin:40px auto 20px 0; }
.guide-main .guide-notice .font-color-blue{ color:#1869B9; }
.guide-main .guide-notice .font-color-red{ color:#ff0002; }
.guide-main .guide-explain{ display:flex; justify-content:center; }
.guide-main .guide-img{ max-width:1920px; padding:100px 0; width:1030px; display:flex; justify-content:center; }
.guide-main .guide-img>img{ width:100%; }

/* =========================
   Exam/ExamView/ExamRegister/ExamEdit
   (기존 유지, 필요 경로만 확인)
========================= */
#exam{ display:flex; max-width:1920px; width:100%; margin:0 auto; padding:30px 10% 90px 10%;
    flex:1; font-weight:400; color:#222; font-size:1rem; }
.exam-container{ display:inline-block; max-width:none; position:relative; padding-right:0; }
.exam-container .row .col-12{ padding-left:0; padding-right:0; }
.exam-title-div{ border-bottom:2px solid #222; padding-bottom:.5rem; }
.exam-title-div h2{ font-weight:700; font-size:1.7rem; }
/* ... (중간 exam 관련 규칙들은 기존 그대로 유지) ... */
.exam-select::before{ content:url("/industry/img/cust/select_icon-9065740fd8d714dd551b00168932309d.png"); position:absolute; right:20px; top:14px; width:10px; height:20px; }
/* 이하 exam/뷰/등록/수정 관련 블록은 네가 준 원본을 그대로 둡니다. */

/* =========================
   반응형
========================= */
@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; }

    /* industry/intro */
    #industrySpeIntro{ padding:135px 15% 90px 15%; }
    #industrySpeIntro .ind-intro-container{ width:100%; }
    #categoryNameTree{ display:none; }



    /* exam 반응형 (원본 유지) */
    /* ... */
}

@media (max-width:767px){
    /* 배너 패딩 축소 */
    .introTop{ padding:22px 20px; }
    :root{ --notch-size:24px; --notch-offset:14px; --radius:16px; }

    /* 산업 특수분류 소개 */
    #industrySpeIntro{ padding:115px 15% 120px 15%; }
    #industrySpeIntro .ind-intro-container{ width:100%; }
    #categoryNameTree{ display:none; }

    /* 기타 기존 반응형 규칙 유지 */
    /* ... */
}

@media (max-width:575px){
    .ind-intro-menu-div div{ font-size:.7rem; }
}
/* Exam View */
#examView{
    max-width: 1920px;
    width: 100%;
    margin: 0 auto;
    padding: 60px 10% 50px 10%;
    font-weight: 400;
    color: #222;
    font-size: 1rem;
}
.exam-view-container{
    max-width: none;
    position: relative;
}
.exam-view-head-div{
    width: 100%;
}
.exam-view-category{
    background-color: var(--color-new-orange);
    width: fit-content;
    min-width: 120px;
    height: 35px;
    border-radius: 5px;
    padding: 7px 20px;
    text-align: center;
}
.exam-view-category p{
    color: white;
    font-size: 1rem;
}
.exam-view-title{
    margin-top: 2rem;
}
.exam-view-title h2{
    font-weight: 700;
    font-size: 1.5rem;
}
.exam-view-info{
    position: relative;
    width: 100%;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    margin-top: 2rem;
}
.exam-info-div-2{
    position: absolute;
    top: 0;
    right: 0;
}
.exam-info{
    display: inline-block;
}
.exam-info-div-1 .exam-info{
    margin-left: 0.5rem;
}
.exam-info-div-2 .exam-info{
    margin-right: 1rem;
}
.exam-info-left{
    display: inline-block;
    padding: 15px 15px;
    padding-top: 17px;
}
.exam-info-right{
    display: inline-block;
    padding: 15px 15px;
    padding-top: 17px;
}
.exam-info-left p{
    margin-bottom: 0;
    font-weight: 700;
}
.exam-info-right p{
    margin-bottom: 0;
}

.exam-view-content-div{
    margin-top: 2rem;
    border-bottom: 1px solid #dee2e6;
}
.exam-view-content{
    width: 100%;
    min-height: 10rem;
    margin: 0 auto;
    padding: 1rem 1rem 3rem 1rem;
}
.exam-view-content.null{
    text-align: center;
    margin-top: 8rem;
}
.exam-view-content img {
    max-width: 100%;
}

/* 이전글 / 다음글 */
.exam-view-foot-div{
    border: 1px solid #dee2e6;
    border-top: 1px solid grey;
    margin-top: 2rem;
}
.exam-view-foot-left{
    height: auto;
    min-height: 4rem;
    background-color: #f6f6f6;
    border-right: 1px solid #dee2e6;
    padding: 1.5rem 1.5rem;
    text-align: center;
}
.exam-view-foot-right{
    height: 4rem;
    padding: 1.5rem 1.5rem;
}
.exam-view-foot-left p{
    margin-bottom: 0;
    font-weight: 700;
}
.exam-view-foot-right a{
    margin-bottom: 0;
    color: grey;
}
.exam-view-foot-right a:hover{
    cursor: pointer;
    color: black;
}

/* 버튼 영역 */
.exam-view-btn-div{
    margin-top: 3rem;
    text-align: center;
}
.exam-reply-btn{
    display: flex;
    width: 150px;
    height: 60px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 5px;
    background-color: var(--color-new-orange);
    border: none;
    color: white;
    position: relative;
    padding-top: 5px;
    transition: background-color 0.2s;
    margin: 0 auto;
}
.exam-reply-btn:active,
.exam-reply-btn:focus{
    outline: none;
}
.exam-list-btn{
    display: flex;
    width: 150px;
    height: 60px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 5px;
    background-color: #9a9a9a;
    border: none;
    color: white;
    position: relative;
    padding-top: 5px;
    transition: background-color 0.2s;
    margin: 0 auto;
}
.exam-list-btn:active,
.exam-list-btn:focus{
    outline: none;
}
.exam-btn-div{
    text-align: right;
    padding-right: 1rem;
    position: relative;
    bottom: 6rem;
}
@media (min-width: 768px) and (max-width: 991px) {
    #examView { padding: 135px 10% 50px 10%; }
}

@media (max-width: 767px) {
    #examView { padding: 115px 3% 30px 3%; }
    .exam-info-div-1 .exam-info { margin-left: 0; }
    .exam-info-div-2 { position: relative; }
    .exam-view-foot-left {
        padding: 1.5rem 0;
    }
}

/* ==========================================================================
   업종코드/산업분류 소개 페이지 공통 플로팅 CTA (리모컨) 모바일 대응 스타일
   ========================================================================== */

/* 1. 플로팅 CTA 기본 (데스크톱/공통) 스타일 */
.intro-floating-cta {
    opacity: 0.95;
    position: fixed;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 9999;
}

.intro-floating-cta .cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    box-shadow: 0 6px 20px rgba(0,0,0,.08);
    font-size: 14px;
    line-height: 1;
    color: #111827;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.intro-floating-cta .cta-btn:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    transform: translateY(-1px);
    color: var(--color-new-orange);
    border-color: var(--color-new-orange);
}

.intro-floating-cta .cta-btn:active {
    transform: none;
    box-shadow: 0 4px 14px rgba(0,0,0,.10);
}

.intro-floating-cta .ico {
    width: 16px !important;
    height: 16px !important;
    margin-right: 6px;
    display: inline-block;
    vertical-align: middle;
}

.intro-floating-cta .cta-toggle {
    display: none;
}

/* 2. 모바일 (991px 이하) Collapsible 및 스타일 대응 */
@media (max-width: 991px) {
    .intro-floating-cta {
        right: 16px;
        top: auto;
        bottom: 80px; /* 모바일 하단 내비게이션/플로터와의 겹침 방지 */
        transform: none;
    }
    
    .intro-floating-cta .cta-btn {
        height: 44px;
        width: 44px;
        min-width: 44px;
        padding: 0;
        border-radius: 50%; /* 모바일에서는 깔끔하게 원형 버블 형태로 통일 */
        justify-content: center;
        background: #ffffff;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    
    .intro-floating-cta .ico {
        margin-right: 0 !important;
    }
    
    .intro-floating-cta .cta-btn span {
        display: none;
    }
    
    /* 햄버거 토글 버튼 */
    .intro-floating-cta .cta-toggle {
        display: inline-flex;
        background: var(--color-new-orange);
        color: #ffffff;
        border-color: var(--color-new-orange);
    }
    
    /* 상태 제어 (is-open) */
    .intro-floating-cta:not(.is-open) .cta-btn:not(.cta-toggle) {
        display: none;
    }
    
    .intro-floating-cta.is-open .cta-toggle {
        display: none;
    }
    
    .intro-floating-cta.is-open .cta-btn:not(.cta-toggle) {
        display: inline-flex;
    }
    
    /* 열렸을 때는 라벨 텍스트도 노출 */
    .intro-floating-cta.is-open .cta-btn {
        width: auto;
        min-width: 44px;
        padding: 0 16px;
        border-radius: 22px;
    }
    
    .intro-floating-cta.is-open .ico {
        margin-right: 8px !important;
    }
    
    .intro-floating-cta.is-open .cta-btn span {
        display: inline;
        font-weight: 600;
    }
}

/* ==========================================================================
   모바일 가이드 내비게이션 탭 (Hero 아래에 붙어 다른 가이드로 즉시 스위칭)
   ========================================================================== */
.m-guide-tabs {
    display: flex;
    background: #ffffff;
    border: 1px solid #ECEFF1;
    border-radius: 16px;
    padding: 6px;
    margin: -10px 0 25px 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.m-guide-tabs::-webkit-scrollbar {
    display: none;
}
.m-guide-tabs .m-tab-item {
    flex: 1;
    text-align: center;
    font-size: 13.5px;
    font-weight: 700;
    color: #666666;
    padding: 10px 4px;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
    border: 1px solid transparent;
}
.m-guide-tabs .m-tab-item:active {
    background: rgba(240, 240, 240, 0.5);
    color: #333333;
}
.m-guide-tabs .m-tab-item.active {
    background: rgba(255, 93, 26, 0.08);
    color: #FF5D1A;
    border: 1px solid rgba(255, 93, 26, 0.15);
}
