/* Layout */
#center { width: 100%; max-width: 2100px; margin: auto; transition: padding .5s ease-in-out, top .3s ease-in-out; }
#center.opened { padding: 30px 10% 0 415px; }
#center.closed { padding: 40px 10% 0 20%; width:90%}
#top { width: 100%; padding-left: 2%; height: calc(100vh - 130px); margin-bottom:2rem; overflow-y: auto;}
/* 공통 변수: 트리 폭과 간격 */
:root { --tree-width: 400px; --tree-gap: 8px; }
@media (max-width: 1920px){ :root { --tree-width: 340px; } }
@media (max-width: 1600px){ :root { --tree-width: 300px; } }

/* 검색 안내 메뉴 */
/* 공통 */
.search-option-content { display: none; }

.section-header { display: flex; align-items: center; gap: 10px; }
.section-title { margin: 0; font-size: 26px; }

.desc { font-size: 17px; margin-top: 14px; line-height: 1.6; color: #333; }

.subhead { font-weight: 700; font-size: 18px; }
.subhead--orange { color: #ff6a00; }
.subhead--blue   { color: #2667ff; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.chip {
    background: #f2f4f7; border: 1px solid #e6e8eb; border-radius: 16px;
    padding: 6px 12px; font-size: 15px; font-weight: 600; color: #444;
}

.mt-22 { margin-top: 22px; }

/* GUIDE 배지 */
.guide-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px; border-radius: 18px; font-weight: 700; font-size: 15px; border: 1px solid;
}
.guide-badge--orange { background: #fff3e9; border-color: #ffd7bf; color: #ff6a00; }
.guide-badge--blue   { background: #eaf1ff; border-color: #cfe0ff; color: #2667ff; }

/* 사용 방법(ol) */
.guide-ol { font-size: 17px; margin-top: 8px; color: #333; }
.guide-ol .hint { color: #666; font-size: 15px; }

/* 검색 팁 */
.tip-row { display: flex; align-items: center; margin-bottom: 10px; gap: 15px; }
.tip-pill {
    display: flex; align-items: center; gap: 6px;
    background: #f8f9fa; padding: 6px 10px; border-radius: 16px; border: 1px solid #e9ecef;
}
.tip-text { font-size: 14px; color: #6c757d; font-weight: 500; }
.icon-muted { color: #6c757d; }

/* 예시 버튼 */
.examples { display: flex; gap: 8px; flex-wrap: wrap; }
.example-btn {
    border: 1px solid #e6e8eb; background: #fff; border-radius: 18px;
    padding: 8px 12px; font-size: 15px; cursor: pointer;
}

/* 공지 박스 */
.notice {
    margin-top: 22px; padding: 14px; background: #f8f9fa; border: 1px solid #eef0f2;
    border-radius: 8px; display: flex; align-items: center; gap: 8px;
}
.notice-dot  { display: inline-flex; width: 8px; height: 8px; background: #28a745; border-radius: 50%; }
.notice-text { font-size: 15px; margin: 0; color: #2b6e37; font-weight: 600; }


/* 트리 패널 */
#industryTree, #sectorCodeTree, #harmonyCodeTree {
  position: fixed; z-index: 1; top:165px;
  width: var(--tree-width);
  height: calc(100% - 165px);
  left: 0; overflow-y: auto; overflow-x: hidden;
  margin-left: 15px;
  transition: left .5s, width .5s, top .5s, height .3s;
}
#industryTree.closed, #sectorCodeTree.closed, #harmonyCodeTree.closed { left: calc(-1 * var(--tree-width)); }
#industryTree.opened, #sectorCodeTree.opened, #harmonyCodeTree.opened { left: 0; }

/* 트리 열림시 표/컨텐츠 오프셋 */
body.with-tree #harmonyGrid {
  margin-left: calc(var(--tree-width) + var(--tree-gap));
  width: calc(100% - (var(--tree-width) + var(--tree-gap)));
  table-layout: fixed;
}
/* 트리 열림시 표/컨텐츠 오프셋 */
body.with-tree #sectorGrid {
  margin-left: calc(var(--tree-width) + var(--tree-gap));
  width: calc(100% - (var(--tree-width) + var(--tree-gap)));
  table-layout: fixed;
}
/* 트리 열림시 표/컨텐츠 오프셋 */
body.with-tree #industryGird {
  margin-left: calc(var(--tree-width) + var(--tree-gap));
  width: calc(100% - (var(--tree-width) + var(--tree-gap)));
  table-layout: fixed;
}

/* 트리 '열림'일 때만 표를 오른쪽으로 밀고, 폭도 그만큼 줄임 (Chrome 105+ 지원 :has 사용) */
body:has(#industryTree.opened) #harmonyGrid,
body:has(#sectorCodeTree.opened) #harmonyGrid,
body:has(#harmonyCodeTree.opened) #harmonyGrid {
  margin-left: calc(var(--tree-width) + var(--tree-gap));
  width: calc(100% - (var(--tree-width) + var(--tree-gap)));
}

/* 트리 '닫힘'이면 표는 전체 폭 사용 */
body:has(#industryTree.closed) #harmonyGrid,
body:has(#sectorCodeTree.closed) #harmonyGrid,
body:has(#harmonyCodeTree.closed) #harmonyGrid {
  margin-left: 0;
  width: 100%;
}

/* (옵션) 표 내용 표시 품질 */
#harmonyGrid th, #harmonyGrid td { overflow: hidden; text-overflow: ellipsis; }
#harmonyGrid td.hs-expl { white-space: pre-line; word-break: break-word; line-height: 1.4; }


#industryCdTree { width: 90%; }
.treeToggleBtn { display: flex; flex-direction: row; position: fixed; top: 50vh; cursor: pointer; justify-content: center; align-items: center; transition: left .5s ease-in-out; gap: 10px; padding-left: 15px}
.treeToggleBtn.treeOpen { left: 5px }
.treeToggleBtn.start::after { content: ""; position: absolute; top: -40px; left: 5px; width: 138px; display: block; opacity: 1; color: #afafae; transform: scaleX(1); line-height: 1rem; transition: opacity 0.3s ease, transform 0.5s ease; word-break: keep-all}
.treeToggleBtn.treeClose { left: 400px; gap: 0 }
.treeToggleBtn.start.treeClose::after { opacity: 0; transform: scaleX(0);}
.treeToggleBtn .right_arrow2,
.treeToggleBtn .right_arrow3 { transition: transform 0.5s ease, opacity 0.5s ease; display: block; transform: scaleX(1); opacity: 1}
.treeToggleBtn div div { position: relative; width: 4px; height: 12px; background: #afafae; visibility: visible; transition: transform .5s ease, visibility 0.5s ease-in-out, right 0.5s ease; border-radius: 10px; animation: fade-arrow 1s infinite; }

/* 초기 상태: right_arrow1만 세로선(|) 형태로 - start 클래스가 있을 때만 */
.treeToggleBtn.start .right_arrow1 div:nth-child(1) { 
    transform: translateY(0.15rem) rotate(0deg) translateZ(0px); 
    background: rgb(175, 175, 174);
}
.treeToggleBtn.start .right_arrow1 div:nth-child(2) { 
    transform: translateY(-0.15rem) rotate(0deg) translateZ(0px); 
    background: rgb(175, 175, 174);
}

/* treeClose 상태: 화살표 형태 */
.treeToggleBtn.treeClose .right_arrow1 div:nth-child(1) { transform: translateY(0.15rem) rotate(-30deg) translateZ(0px); }
.treeToggleBtn.treeClose .right_arrow1 div:nth-child(2) { transform: translateY(-0.15rem) rotate(30deg) translateZ(0px); }
/* treeOpen 상태: 화살표 형태 */
.treeToggleBtn.treeOpen .right_arrow1 div:nth-child(1) { transform: translateY(0.15rem) rotate(-30deg) translateZ(0px); }
.treeToggleBtn.treeOpen .right_arrow1 div:nth-child(2) { transform: translateY(-0.15rem) rotate(30deg) translateZ(0px); }
.treeToggleBtn .right_arrow2 div:nth-child(1) { transform: translateY(0.15rem) rotate(-30deg) translateZ(0px); }
.treeToggleBtn .right_arrow2 div:nth-child(2) { transform: translateY(-0.15rem) rotate(30deg) translateZ(0px); }
.treeToggleBtn .right_arrow3 div:nth-child(1) { transform: translateY(0.15rem) rotate(-30deg) translateZ(0px); }
.treeToggleBtn .right_arrow3 div:nth-child(2) { transform: translateY(-0.15rem) rotate(30deg) translateZ(0px); }
.treeToggleBtn div.right_arrow1 div { animation-delay: .2s; animation-direction: alternate; }
.treeToggleBtn div.right_arrow2 div { animation-delay: .4s; animation-direction: alternate; }
.treeToggleBtn div.right_arrow3 div { animation-delay: .6s; animation-direction: alternate; }
.treeToggleBtn.treeClose .right_arrow2,
.treeToggleBtn.treeClose .right_arrow3 { transform: scaleX(0); opacity: 0}
.treeToggleBtn.treeClose .right_arrow2 div,
.treeToggleBtn.treeClose .right_arrow3 div { visibility: hidden; }
#searchWrapParent { 
    width: 100%; 
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 0;
    margin-bottom: 1.5rem;
    position: relative;
}

#searchWrap { 
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}
/* 값 셀을 좌/우 1:1로 */
#searchResult .bizpair{
    display:grid;
    grid-template-columns:1fr 1fr; /* 좌우 반반 */
    column-gap:24px;
    align-items:center;
}

/* 각 칸을 가로로: 라벨 옆에 값 한 줄 */
#searchResult .pair{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;                 /* ellipsis 위해 필요 */
}

/* 미니 라벨(회색 태그) */
#searchResult .miniLabel{
    background:#EDEDED;
    border:1px solid #ddd;
    border-radius:4px;
    padding:2px 6px;
    font-size:12px;
    line-height:20px;
    white-space:nowrap;
}

/* 값: 한 줄 + 말줄임 */
#searchResult .value{
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* 모바일에선 위/아래로 쌓기 */
@media (max-width:640px){
    #searchResult .bizpair{ grid-template-columns:1fr; row-gap:6px; }
}
.search-keyword-text.text-muted.small.mt-1{
    TEXT-ALIGN: LEFT;
    MARGIN-LEFT: 10PX;
    color: #ff601e !important;
    font-size: 18px;
    font-weight: 700;
}
#표준-연계코드5 > div > div:nth-child(1) > table > thead > tr > th:nth-child(4){
    display: none;
}
.cc-section{
    padding:10px;
}
.cc-title{
    font-weight: 600;
    margin-bottom: 5px;
}
.cc-explain-cell { width:auto; }
.cc-meta:empty { color: transparent; display: none } /* 내용 비었을 때 공간은 유지, 텍스트만 감춤 */
/* 탭 라벨 오른쪽 원형 배지 */
.count-badge{
    display:inline-block;
    min-width:20px;
    height:20px;
    line-height:20px;
    padding:0 6px;
    margin-left:6px;
    border-radius:999px;
    background:#FFFFFF;
    color:#f34400;
    font-size:12px;
    text-align:center;
    vertical-align:middle;
}
.cc-strong { font-weight: 700; color: var(--color-new-orange); }
.cc-head{
    background-color: #EDEDED;
    text-align: center;
}
.cc-code{
    text-align: center;
}

/*!* 배지 색(선택/비선택에 맞춰 가독성 유지) *!*/
/*.code-change .clickable-text .count-badge{*/
/*    background:rgba(255,255,255,.25);*/
/*    color:#fff;*/
/*}*/
/*.code-change .clickable-text.onCode .count-badge{*/
/*    background:#ffe8d6;*/
/*    color:#ff6b00;*/
/*    border:1px solid #ffb27a;*/
/*}*/


.search-container {
    position: relative;
    width: 100%;
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: #f8f9fa;
    border: 1px solid #e6e6e6;
    border-radius: 30px;
    padding: 0.3rem 0.4rem;
    transition: all 0.1s ease;
}

.search-input-wrapper:focus-within {
    border: transparent;
    box-shadow: 0 2px 10px rgba(255, 107, 0, 0.15), 0 0 0 2px rgba(255, 107, 0, 0.1);
}

.search-icon {
    display: flex;
    align-items: center;
    color: #6c757d;
    margin: 0.5rem 0.75rem 0.5rem 0.5rem;
}

.search-input-wrapper:focus-within .search-icon {
    color: var(--color-new-orange);
}

#searchBox {
    flex: 1;
    border: none;
    outline: none;
    font-size: 1rem;
    padding: 0.5rem 0;
    background: transparent;
    color: #333;
    font-weight: 500;
}

#searchBox::placeholder {
    color: #adb5bd;
    font-weight: 400;
}

.search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: var(--color-new-orange);
    color: white;
    border: none;
    border-radius: 20px;
    padding: 0.6rem 1.2rem;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(255, 107, 0, 0.25);
    min-width: 80px;
    height: 40px;
}

.search-btn:hover {
    background: #ef5519;
}

/* 추가 UX 효과 스타일 */
.search-input-wrapper.focused {
    border-color: var(--color-new-orange);
    box-shadow: 0 2px 10px rgba(255, 107, 0, 0.15), 0 0 0 2px rgba(255, 107, 0, 0.1);
    transform: translateY(-1px);
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    #searchWrapParent {
        padding: 0.8rem 1rem;
        margin-bottom: 1rem;
    }
    
    .search-input-wrapper {
        flex-direction: column;
        gap: 0.6rem;
        padding: 0.8rem;
        border-radius: 20px;
    }
    
    .search-icon {
        margin-right: 0;
        margin-bottom: 0.3rem;
    }
    
    #searchBox {
        text-align: center;
        font-size: 0.95rem;
        padding: 0.4rem 0;
    }
    
    .search-btn {
        width: 100%;
        justify-content: center;
        padding: 0.8rem;
        border-radius: 15px;
        height: 44px;
    }
    
    .suggestion-tags {
        gap: 0.3rem;
    }
    
    .suggestion-tags .tag {
        font-size: 0.8rem;
        padding: 0.35rem 0.7rem;
    }
}
#searchOpt,#searchOptAi { width: 100%; overflow: auto; padding: 1rem 1.5rem; margin-bottom: 1rem; border: 1px solid var(--border-color);  border-radius: 5px; }
#searchOptWord.loading { display: flex; align-items: center }
.search-table { width: 100%; height: auto; overflow: auto; padding: 1rem 1.5rem; border: 1px solid var(--border-color);  border-radius: 5px;}
.search-table.loading { display: flex; align-items: center }
#supportSearch { height: 100%; width: 100%; border: 1px solid var(--border-color); border-radius: 5px;}
#searchResult { height: auto; width: 100%; padding-left: 2%; padding-right: 2%; font-size: 15px; flex-direction: column; margin-top: 1rem; }
#searchOptTop { display: flex; align-items: center; justify-content: space-between; font-size: 15px; }
#searchResult > #SICode, #searchResult > #CCode, #searchResult > #HSCode, #searchResult > #SPCode { width: 100%; height: 100%; border: 1px solid var(--border-color);
  overflow: auto; margin-top: 10px; padding: .75rem 1.5rem; position: relative; background-color: #FFF; border-radius: 5px; }
#searchResult .search-result-title { border-bottom: 2px solid #000; padding-bottom: .5rem; margin-bottom: 0}
#searchResult .pdf-btn { display: flex; align-items: center; flex: 1; cursor: pointer; }
#searchResult .code-change { position: relative; border-bottom: 1px solid var(--border-color); margin-top: 2rem}
#searchResult .code-change > div { display: inline-flex; gap: 2px; width: 100%; justify-content: left; }
#searchResult .code-change .clickable-text { padding: 0 1rem; }
#searchResult .code-shortcut-change { border-bottom: 2px solid #000; padding: 2rem 0; display: flex; flex-direction: column; gap: 1rem; position: relative}
#searchResult .code-shortcut-change > div { display: flex; position: relative}
#searchResult .code-shortcut-change > div span.clickable-text { position: relative; width: 25%; height: 2rem; padding-right: 5%; z-index: 1; border-radius: 10px; border: 1px solid #7F8080;}
#searchResult .code-shortcut-change > div span.clickable-text.onCode { border: 1px solid var(--color-new-orange)}
/*#searchResult .code-shortcut-change > div div.code-shortcut-div { position: absolute; display: block; width: 80%; height: 2rem; right: 0; z-index: 2; background-color: #fff; border: 1px solid #7F8080; border-radius: 10px; padding: 4px 1.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis}*/
/* 기본(펼침) 상태: 제한 해제 + 줄바꿈 허용 */
#searchResult .code-shortcut-change > div .code-shortcut-div {
  right: 0;
  position: absolute;
  display: block;
  width: 80%;
  height: auto;
  max-height: none;
  padding: 4px 1.5rem;
  background-color: #fff;
  border: 1px solid #7F8080;
  border-radius: 10px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  z-index: 3;
}

/* 접힘(요약) 상태: 한 줄 + 말줄임 + 높이 제한 */
#searchResult .code-shortcut-change > div .code-shortcut-div.is-clamped {
  position: absolute;
  width: 80%;
  max-height: 2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  right: 0;
  z-index: 2;
}

#searchResult .code-shortcut-change > div div.code-shortcut-div.onCode { border: 1px solid var(--color-new-orange)}
#searchResult .code-shortcut-change > div div.code-shortcut-div a.code-shortcut { display: inline-block; }
#searchResult .code-shortcut-change > div div.code-shortcut-div a.code-shortcut:not(:first-of-type) { margin-left: 1rem }
#searchResult .code-shortcut-change > div div.code-shortcut-div a.code-shortcut:hover { cursor: pointer }
#searchResult  .name { color: #3E3A39; font-weight: 700; margin-bottom: 0;}
#searchResult  .code { color: var(--color-new-orange); font-weight: 700; margin-right: 0.5rem; }
#searchResult .code-shortcut-change > div.code-shortcut-hs-div div.code-shortcut-div a.code-shortcut p span { margin-right: 0.2rem; }
#searchResult.special .code-shortcut-change { padding: 1.5rem 0; }
#searchResult.special .code-shortcut-change > .code-shortcut-sec-div { display: none }
#searchResult.special .code-shortcut-change > .code-shortcut-hs-div { display: none }
#searchResult.special .code-change .revenue { display: none }
#searchResult.special .code-change .customs { display: none }
.hs-table pre { white-space: pre-line; max-height: 600px; }
.hs-table pre p { font-size: 14px; margin: 8px 0 0 0; }
.hs-table pre .title { font-weight: bold; font-size: 17px; }
.hs-table pre .center { text-align: center; }
.hs-table pre .subtitle { text-align: center; font-weight: bold; font-size: 17px; }
.hs-table pre p.hotype4_ke { margin-left: 79px; text-indent: -12px; }
.hs-table pre p.hotype2_ke { text-indent: -60px; margin: 0px 0px 0px 68px; }
.hs-table pre p.hotype1_ke { font-weight: bold; margin: 15px 0px 25px 0px; }
.hs-table pre a { color: #1D94D0; text-decoration: underline; }
.hs-table pre a:hover { color: #1985b9; }
.no-data-tab td { text-align: center;  font-weight: 700; }
#goExpert { display: flex; align-items: center; margin: 3rem auto 4rem auto; }
#goExpert a { margin: auto }
#goExpert img { height: auto;}
#goConsulting { height: 80px; display: flex; align-items: center; }
#goConsulting a { display: inline-block; padding: 10px 20px; background-color: var(--font-green); color: #fff;
  text-decoration: none; border-radius: 15px; box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.30), 0px 4px 8px 3px rgba(0, 0, 0, 0.15);
  transition: background-color 0.3s ease; cursor: pointer; }
#goConsulting a:hover { background-color: var(--hover-green); }
#goConsulting a img { height: 40px; padding-right: 10px; }
.form-check input, .form-check label { cursor: pointer; }
#datatableDiv {border: 1px solid #e9e9e9; border-radius: 5px; padding: 0.5rem 1rem; overflow-y: auto; max-height: 508.656px}
#datatable { margin-bottom: 0; font-size: .9rem}
#datatable .form-check-input, #datatable2 tbody tr { cursor: pointer; }
#datatable label { cursor: pointer; }
#datatable tbody tr:nth-child(1) td { border-top: none; }
#datatable2 { font-size: 1rem; }
#datatable2 * { font-weight: 600; }
#datatable2 thead tr th:nth-child(1) {width: 80%;}
#datatable2 thead tr th:nth-child(2) {width: 20%;}
/*#datatable2 tbody td:nth-child(1) { padding-left: 1.5rem; padding-right: 5rem; position: relative }*/
/*#searchOptAi .ai-code{*/
/*  text-align: right;*/
/*}*/
/* 분류항목명 셀을 아이콘 기준 컨테이너로 */
#datatable2 td.name-cell {
  position: relative;
}

/* 텍스트 뒤에 아이콘 공간 확보 */
#datatable2 .popup-link {
   position: relative;
   display: block;           /* ← 핵심: 블록으로 변경 */
   width: 100%;              /* ← 셀 전체를 차지 */
   padding-right: 28px;      /* 아이콘 자리 확보 */
   line-height: 1.4;
   text-decoration: none;
   color: inherit;
   white-space: nowrap;      /* 필요 시 줄바꿈 방지 */
   overflow: hidden;         /* 텍스트 넘침 처리 */
   text-overflow: ellipsis;  /* ... 처리 */
 }

/* 아이콘을 셀의 맨 오른쪽에 고정 */
#datatable2 .popup-link::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;                 /* ← 셀의 오른쪽 끝 */
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  background: url("/industry/img/icon/popup_icon-1ec5fef2336aa8ee9d90eff48a2c96e7.svg") no-repeat center / contain;
  opacity: 0.7;
  pointer-events: none;
  transition: opacity .15s ease;
}

#datatable2 .popup-link:hover::after {
  opacity: 1;
}
#datatable2 tbody td:nth-child(2) { vertical-align: middle; }
#datatable2 .tdExample { font-size: 15px; white-space: nowrap; text-overflow: ellipsis; }
#excelDownload { cursor: pointer; }
#searchWrapParentTop { display: none; }
#industryTitle { display: none; margin-left: 5rem; align-items: center; position: relative; top : 3px; }
#industryTitle p { display: inline-block; font-weight: 700; color: #1D192B; font-size: 1.2rem; margin-bottom: 0;}
#industryTitle select { margin-left: 7px; height: 28px; border:none; background: none; cursor: pointer; font-size: 1.2rem; text-align: center}
#industryTitle select option { font-size: 1rem}
#industryTitle select:focus { outline: none}

/* 트리 선택 경로(선택 노드 + 상위 010까지) 연분홍 */
.jstree-anchor.hl-trail {
  background: #ffe6f0;
  border-radius: 6px;
}
.jstree-anchor.jstree-clicked.hl-trail {
  background: #ffcfe3;
}

/* 그리드 선택(노란 하이라이트) */
#harmonyGridBody tr.highlight {
  background: #fff9c4; /* light yellow */
}
#harmonyGridBody td.hs-expl {
  white-space: pre-line;   /* \n을 줄바꿈으로 렌더 */
  word-break: break-word;  /* 긴 단어 줄바꿈 */
  line-height: 1.4;
  text-align: left;
}
/* 그리드 선택(노란 하이라이트) */
#sectorGridBody tr.highlight {
  background: #fff9c4; /* light yellow */
}
#sectorGridBody td.sec-expl {
  white-space: pre-line;   /* \n을 줄바꿈으로 렌더 */
  word-break: break-word;  /* 긴 단어 줄바꿈 */
  line-height: 1.4;
  text-align: left;
}


/* 050 밑줄 표시 */
.hl-underline {
  text-decoration: underline;
  font-weight: 600;
}



/* 로그인 유도 모달 */
.dark-overlay { position: fixed; top: 130px; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 4; }
.guide-div { color: black; position: fixed; z-index: 4; top: 46%; left: 50%; transform: translate(-50%, -46%); background-color: #FFF; border-radius: 16px; width: 550px; height: 440px; text-align: center; padding: 3rem;}
.guide-div .guide-title-div { margin-top:1rem }
.guide-div .guide-title-div img { width: 164px; height: 32px }
.guide-div .guide-content-div { margin-top: 3.5rem }
.guide-div .guide-foot-div { margin-top: 4.5rem }
.guide-div .guide-foot-div button { width: 150px; height: 42px; border-radius: 50px; margin: 0 0.5rem ; font-size: 1.1rem; transition: 0.3s ease-in-out}
.guide-div .guide-foot-div button:first-child { background-color: var(--color-new-orange); color: white; border: 2px solid var(--color-new-orange-active) }
.guide-div .guide-foot-div button:first-child:focus
, .guide-div .guide-foot-div button:first-child:active { outline: none; border-color: var(--color-new-orange-active)}
.guide-div .guide-foot-div button:last-child { background-color: white; color: var(--color-new-orange); border: 2px solid var(--color-new-orange-active) }
.guide-div .guide-foot-div button:last-child:focus
, .guide-div .guide-foot-div button:last-child:active { outline: none; border-color: var(--color-new-orange-active)}
.guide-div p { font-weight: 500; font-size: 1rem;}
.guide-div .guide-content-div-1 p {
  font-family: Freesentation-8ExtraBold, Helvetica; font-weight: 800; font-size: 32px; letter-spacing: 0; line-height: 40px; white-space: nowrap; color: var(--color-new-orange); word-break: keep-all}
.guide-div .guide-content-div-2 p { font-family: Freesentation-5Medium, Helvetica; font-weight: 500; font-size: 20px; letter-spacing: 0; line-height: 26px; text-align: center; margin-bottom: 0; word-break: keep-all; color: #1a1a1a}
.login-button { position: fixed; top: 61%; left: 50%; transform: translate(-50%, -61%); z-index: 4; font-size: 1rem; }

/* hs pop */
#hsPop { height: auto; width: 100%; padding: 2%; font-size: 13px; flex-direction: column; }
#hsPop > #HSCode { width: 100%; height: 100%; overflow: auto; padding: 0 10px; position: relative; background-color: #FFF; }
#hsPop .div-title { font-weight: 600; }
#hsPop .flexibleTd { width: 70px; }
#hsPop .flexibleTd2 { width: 130px; }
#hsPop .hs-table pre { height: 485px; overflow-y: scroll; }
#hsPop .top-category { border-bottom: 1px solid #d7d7d7; }
#hsPop ul a { background-color: #ededed; border-radius: 0; border: 1px solid #cfd2d2; border-left: 1px solid #dee1e1;
  color: #000; padding: .41875rem .9375rem; line-height: 21px; }
#hsPop ul a.active { background-color: #1D94D0; color: #FFF; border: 1px solid #1D94D0; }
#hsPop .top-li { width: 100px; text-align: center; font-size: 14px; height: 36px; }
#hsPop .general-li a { padding: .31875rem .9375rem; line-height: 19px; margin-right: 3px; }
#hsPop .table-bordered th, #hsPop .table-bordered td { border: 1px solid #cfd2d2; }
#hsPop .hs-input-div { background-color: antiquewhite; border-radius: 5px; margin: 30px 10px 10px 10px; padding: 1rem;
  border: 1px solid #cfd2d2; }
#hsPop .hs-input-div label { margin: 0 1rem; font-family: 'Pretendard Variable'; font-weight: 700; }
#hsPop .hs-input-div input { width: 300px; border: 1px solid #CDCDCD; height: 29px; outline: none; padding-left: 10px; }
#hsPop .hs-search { padding: .25rem .7rem; margin-left: .5rem; }
#hsPop .category-div { position: absolute; top: 66px; right: 15px; }
#hsPop .highlight { background: yellow; color: red;  font-weight: 700; }
.mt-44px { margin-top: 44px; }

/* pdf result */
.pdf-result { position: relative }
.pdf-result > h4 { margin-top: 2rem; border-bottom: 1px solid var(--border-color) }
.pdf-result #표준-색인어5 > div { max-height: none; }
.pdf-result .hs-table pre { max-height: none !important; }
.pdf-result .div-title-pdf { width: 100%; margin: 0 auto 20px auto; border-bottom: 2px solid #222; padding-bottom: 1rem;
  display: flex; align-items: center; justify-content: center; text-align: center; line-height: 30px; letter-spacing: 1px;  }
.pdf-result .div-title-pdf p { display: flex; justify-content: center; align-items: center; width: 200px; height: 40px; font-weight: 700; font-size: 25px; color: #222; margin-bottom: 0;}
.pdf-result .pdf-title-img-div { position: absolute; left: 3rem; top: 0.5rem; }
.pdf-result .pdf-title-img-div img { width: 120px }
.pdf-result .pdf-title-text-div { position: absolute; right: 2rem; top: 1.5rem; font-size: 12px; line-height: 0.5px; text-align: right }
.pdf-result .pdf-title-text-div p:nth-child(1) { font-weight: 700 }
.pdf-result .clickable-text-pdf{ background-color: var(--color-new-orange); color: #fff; text-decoration: none; display: inline-block;
  padding: 8px 15px; border-radius: 5px 5px 0 0; transition: background-color 0.3s ease; cursor: pointer; font-size: 1rem; font-weight: 700}
.pdf-result .pdf-bottom-div { width: 100%; display: block; margin-top :1rem; text-align: right}
.pdf-result .pdf-bottom-div p { margin-bottom: 0}

/* Popover */
.search-open-popover { border-radius: 100%; background-color: #d5d5d5; padding: 0.1rem 0.5rem;
  line-height: 19px; position: absolute; top: 21px; right: -22px; color: #FFF; }
.search-popover { max-width: none; }

/* OverRide */
input.form-check-input { margin-top: 0.1rem; }
#datatable input.form-check-input { margin-left: 0; }

/*searchOpt*/
#center .div-title { flex: 12; display: flex; align-items: center; justify-content: start; margin: 0.5rem;
  color: #1D192B; text-align: left;  font-weight: 700; font-size: 24px !important; line-height: 30px; letter-spacing: 1px; position: inherit; }
.selectBtn { height: 35px; width: 70px; display: flex; align-items: center; border-radius: 15px; cursor: pointer;
  justify-content: center; background-color: #cbcbcb; color: #FFF; }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: transparent; }
.btnSelected{ background-color: var(--color-new-orange); }
.search-title { width: 100%; background-color: deepskyblue; color: white; padding-left: 15px; }
.filter-sub-title { display: flex; align-items: center; justify-content: space-between; }
.filter-sub-title > div { display: flex; align-items: center; font-weight: 700; }
.filter-sub-title .left-rect { color: #cbcbcb; font-size: 12px; padding-right: 5px; }
#searchResultBox .card { border-radius: 10px; border-bottom: 1px solid var(--border-color); font-size: .9rem}
#searchAiBtn {position: absolute; top: -7px; right: 1rem; width: 310px; height: 40px; background-color: var(--color-new-orange); border-radius: 20px; display: flex; justify-content: center; align-items: center; color: white; font-family: 'Freesentation-8ExtraBold', Helvetica; font-size: 1rem;}
#searchAiBtn:hover {cursor: pointer}
#searchAiBtn img:nth-of-type(1) {width: 1.3rem}
#searchAiBtn img:nth-of-type(2) {margin-left: 1rem; width: 0.6rem}
#searchAiBtn p {margin-bottom: 0; margin-left: 5px;}
#searchAiBtn p strong {font-weight: 700}
.div-search-menu { display: flex; align-items: center; justify-content: space-between; font-size: 15px; font-weight: 600}
.div-search-menu .search-menu-btn {height: 35px;  width: 110px;  display: flex;  align-items: center;  border-radius: 15px;  cursor: pointer;  justify-content: center; font-size: 15px; letter-spacing: normal; border: 2px solid}
.div-search-menu .search-menu-btn:nth-child(2) { margin-left: 5px;}
.div-search-menu .search-menu-btn.keyword-menu { background-color: #cbcbcb; border-color: #cbcbcb; color: #fff; font-weight: 500; border:none}
.div-search-menu .search-menu-btn.keyword-menu:hover { background-color: #cbcbcb; }
.div-search-menu .search-menu-btn.keyword-menu.selected { background-color: var(--color-new-orange); color: #fff; font-weight: 500 ; cursor: inherit}
.div-search-menu .search-menu-btn.keyword-menu:focus
, .div-search-menu .search-menu-btn.keyword-menu:active { outline: none }
.div-search-menu .search-menu-btn.ai-menu { background-color: #cbcbcb; border-color: #cbcbcb; color: #fff; font-weight: 500; border: none}
.div-search-menu .search-menu-btn.ai-menu:hover { background-color: #cbcbcb;}
.div-search-menu .search-menu-btn.ai-menu.selected { background-color: var(--color-new-orange);  color: #fff; font-weight: 500; cursor: inherit}
.div-search-menu .search-menu-btn.ai-menu:focus
, .div-search-menu .search-menu-btn.ai-menu:active { outline: none }
#defaultDiv h4 { font-weight: 600 }
#defaultDiv h4 span { font-weight: 600 }

/* search result Table */
#resultCount { margin-bottom: 1rem; height: 40px; font-size: 20px; display: flex; align-items: center; justify-content: space-between; }
#resultCount span { font-weight: 600; }

/* searchTable 내부 단어 필터 스타일 */
#searchTable #searchResultBox {
    margin: 0.5rem 0;
    padding: 0 1rem;
}

#searchTable #searchResultBox .filter-sub-title {
    margin-bottom: 0.5rem;
}

#searchTable #searchResultBox .card {
    border: 1px solid #e9e9e9;
    border-radius: 5px;
    margin-bottom: 1rem;
}
.sort-select-p { font-weight: bold; }
#searchTable .code-sort-div { position: relative; display: inline-block; font-size: 15px; }
#searchTable .select-sort { height: 40px; width: 100px; cursor: pointer;
  position: relative; padding: 10px 15px; border-radius: 5px; line-height: 16px; }
#searchTable .select-sort::before { content: url("/industry/img/cust/select_icon-9065740fd8d714dd551b00168932309d.png"); position: absolute; right: 20px; top: 10px;
  width: 10px; height: 20px; }
#searchTable .select-sort.open::before { right: 22px; top:9px; transform: rotate(180deg); }
#searchTable .code-sort-div-select { border: 1px solid #eeeeee; width: 100px; height: fit-content; position: absolute;
  left: 0px; z-index: 10; display: none; background-color: white; border-bottom: 1px solid lightgray;
  border-radius: 5px; box-shadow: 0px 2px 5px rgba(0,0,0,0.1); }
#searchTable .code-sort-div-select.open { display: block; }
#searchTable .code-sort-select { display: inline-block; width: 100%; height: 2.5rem; padding: 10px 15px;
  font-size: 1rem; cursor: pointer; }
#searchTable .code-sort-select:hover { background-color: #ebebeb; }
#searchTable .code-sort-select:last-child { border-bottom: none; }

.limit-select-p { font-weight: bold; }
#searchTable .code-limit-div { position: relative; float: right; top: -5px; font-size: 15px; }
#searchTable .select-limit { border: 1px solid var(--border-color); height: 40px; width: 100px; cursor: pointer;
  position: relative; padding: 10px 15px; border-radius: 5px; line-height: 16px; }
#searchTable .select-limit::before { content: url("/industry/img/cust/select_icon-9065740fd8d714dd551b00168932309d.png"); position: absolute; right: 20px; top: 10px;
  width: 10px; height: 20px; }
#searchTable .select-limit.open::before { right: 22px; top:9px; transform: rotate(180deg); }
#searchTable .code-limit-div-select { border: 1px solid #eeeeee; width: 100px; height: fit-content; position: absolute;
  left: 0px; z-index: 10; display: none; background-color: white; border-bottom: 1px solid lightgray;
  border-radius: 5px; box-shadow: 0px 2px 5px rgba(0,0,0,0.1); }
#searchTable .code-limit-div-select.open { display: block; }
#searchTable .code-limit-select { display: inline-block; width: 100%; height: 2.5rem; padding: 10px 15px;
  font-size: 1rem; cursor: pointer; }
#searchTable .code-limit-select:hover { background-color: #ebebeb; }
#searchTable .code-limit-select:last-child { border-bottom: none; }

/*#searchTable .div-title { justify-content: space-between; }*/
/*#searchTable .div-title p { margin-top: 0; margin-bottom: 0; font-weight: 700 }*/
#searchOpt .div-title { justify-content: space-between; }
#searchOpt .div-title p { margin-top: 0; margin-bottom: 0; font-weight: 700 }

#datatable td { vertical-align: middle; padding: 0.6rem 0.5rem}
#datatable td label { margin-bottom: 0;}
#datatable .form-check-input {position: relative}
#datatable .show-middle-category { cursor: pointer; background-repeat: no-repeat; background-size: 10px 10px; background-position: center; padding: 0 1rem}
#datatable .show-middle-category.opened { background-image: url(/industry/img/icon/minus-1480067b45411bb15303cfed57824950.svg);}
#datatable .show-middle-category.closed { background-image: url(/industry/img/icon/plus-50dcd5d2de0efa19c3e0ea5f79152f56.svg);}
#datatable .show-middle-category:hover {  font-weight: 700; }
#datatable tbody tr[class^="show-middle-"] td:nth-child(1) {text-align: center; position: relative; left: 5%}
#datatable tbody tr[class^="show-middle-"] td:nth-child(2), #datatable tbody tr[class^="show-middle-"] td:nth-child(3) { display: none !important;}
#datatable tbody tr[class^="show-middle-"] td:nth-child(4) {text-align: left; padding-left: 6%}
#datatable2 .selectData { background: rgba(255, 182, 146, 0.2); }
#datatable2 tbody tr:hover { background: rgba(153, 221, 255, 0.2); }
#searchResult .flexibleTd { width: 100px; text-align: center; background-color: #EDEDED; vertical-align: middle; word-break: keep-all}
#searchResult .flexibleTd2 { width: 150px; text-align: center; background-color: #EDEDED; }
#searchResult .flexibleTd *, #searchResult .flexibleTd2 * { font-weight: 700; }
#searchResult .zoom-div { flex: 1; display: flex; align-items: center; justify-content: center; }
#searchResult .zoom-div > div { height: 45px; width: 45px; display: flex; align-items: center; justify-content: center;
  background-color: #EDEDED; border-radius: 8px; cursor: pointer; }
#searchResult .upper-code-td > span { display: none; }
#searchResult .round-brackets:before { content: "("; }
#searchResult .round-brackets:after { content: ")"; }
b.highlight, b.highlighter {  font-weight: 800 !important;}
b.synonym_highlight { text-decoration: underline; }
.code-shortcut-change b.synonym_highlight { font-weight: 700 }
#searchResult .nav-pills { gap: 1rem; display: flex; }
#searchResult .changeBtn { height: 35px; display: flex; align-items: center; border-radius: 15px; cursor: pointer;
  justify-content: center; color: #000; background-color: #EDEDED; width: 95px; }
#searchResult .changeBtn.active { background-color: var(--color-new-orange); color: #FFF; }
#searchResult .hs-detail-btn.changeBtn.active { background-color: var(--color-new-orange); }
#searchResult .description { padding: .40rem 1rem; }
#searchResult .description > pre { margin: 0 !important; }

#표준-색인어5 > div { max-height: 400px; overflow: auto; }
#표준-연계코드1 a, #표준-연계코드2 a, #표준-연계코드3 a, #표준-연계코드4 a, #표준-연계코드5 a {color: var(--color-new-orange)}
#표준-연계코드1 a:hover, #표준-연계코드2 a:hover, #표준-연계코드3 a:hover, #표준-연계코드4 a:hover, #표준-연계코드5 a:hover { text-decoration: none; }

  /* code post */
#codePostSide { width: 375px; height: calc(100% - 130px); position: fixed; z-index: 1; top: 130px; background: white;
  left: 15px; border-right: 1px solid #cacdcd; transition: left .5s ease-in-out, top .5s ease-in-out; padding-top: 1rem}
#codePostSide.opened { left: 415px }
#codePostSide.closed { left: 22px }
.code-side-content { background-color: #f6f6f6; overflow-y: auto; height: calc(100% - 100px); }
.code-post { border-radius: 10px; margin-top: 2rem; margin-bottom: 2rem; margin-left: 2%; width: 98%; height: auto; background-color: #f6f6f6; }
.code-post-title { width: 100%; height: 50px; border-radius: 10px; margin: auto 0;
  display: flex; justify-content: space-around; align-items: center; position: relative; padding-top: 1rem}
.code-post-title * {  font-weight: 700; }
.code-post-title .code-post-left-side { position: absolute; left: 25px; }
.code-post-title .code-post-left-side img { width: 30px; cursor: pointer; }
.carousel-control-button { background: transparent; border: none; width: 5%; top: 50px; }
.carousel-control-button > span { filter: invert(1) grayscale(100); }
.code-post .code-post-inner { width: 100%; height: auto; padding: 20px 1% 10px 1%; overflow-x: auto; }
.code-post-inner .code-post-div { width: 100%; white-space: nowrap; overflow-x: auto; text-align: center; }
.code-post-inner .code-card-title { text-align: left; color: rgb(125, 125, 125); }
.code-post-inner .code-card-title > svg { opacity: 0.5; }
.code-post-inner .code-card-title-content { padding: 4% 3% 1% 0%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left;}
.code-post-inner .code-card-title-content > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700}
.code-post-inner .code-card-content { padding: 3% 0 5% 0; height: 40%; min-height: 84px; overflow-y: auto; text-align: left; }
.code-post-inner .code-card-content > div { overflow: auto; word-break: break-all; max-height: 100px; scrollbar-width: thin}
.code-post-inner .code-card-time { height: 21px; font-size: 14px; text-align: left; color: rgba(148,148,148,0.9); margin-bottom: 10px;}
.code-post-inner .code-post-card { background-color: #FFF; border-radius: 5px; width: 32%; min-width: 360px;
  display: inline-block; margin: 0 5px; padding: 3% 3% 2% 3%; white-space: normal; }
.code-card-time .like-div { position: absolute; right: 0; color: rgb(100, 100, 100); cursor: pointer; }
#codePostSide .code-post-inner .code-card-title-content { font-size: 14px }
#codePostSide .code-post-inner .code-card-content { font-size: 14px }
.like-img-large { width: 20px; opacity: 0.7; cursor: pointer; }
.like-img-small { width: 15px; opacity: 0.7; cursor: pointer; }
.like-count[data-val="0"] { display: none; }
.more-img-medium { width: 15px; opacity: 0.3; cursor: pointer; }
.more-img-small { width: 13px; opacity: 0.3; cursor: pointer; }
.code-post-inner b.community { font-size: 2rem; padding: 1rem; }
.code-post-inner p.green-line { height: 1rem; width: 4rem; border-bottom: 1px solid var(--font-green); margin: 1rem auto; }
.code-post-inner .code-card-input { padding-top: 10px; position: relative; }
.code-post-inner .code-card-input > textarea { color: #919191; box-sizing: border-box; width: 100%; padding: 11px 16px;
  line-height: 1.4; height: 42px; font-size: 14px; background-color: #FFF; resize: none; border-radius: 6px;
  border: 1px solid #E5E5E5; overflow: hidden; outline: none; }
.code-post-inner .code-card-input > .edit-svg { position: absolute; right: 10px; bottom: 18px; }
.code-post-inner .code-card-reply { color: #8C8C8C; }
.code-post-inner .code-card-reply[data-post-lv="1"] { padding-top: 15px; border-top: 1px solid #E6E6E6; }
.code-post-inner .code-card-reply[data-post-lv="2"] { font-size: 14px; padding-top: 3%; }
.code-post-inner .post-bottom-btn { text-align: center; margin: 2rem auto 1rem auto; display: flex; width: 300px;
  justify-content: center; align-items: center; border-radius: 25px; height: 52px; font-size: 16px; border: 1px solid;
  line-height: 21px; color: #FFF; background-color: #222223; cursor: pointer; font-weight: bold; }
.code-post-inner .post-bottom-btn:hover { background-color: #FFF; color: #222223; }
.code-side-content .code-post-card { background-color: #FFF; display: block; height: auto; width: 100%; margin: 7px auto; border-radius: 0;
  padding: 7%; white-space: normal; }
.code-side-content .code-post-card:nth-child(1) { margin-top: 0; }
.code-side-content .code-card-reply { text-align: left; color: #000 }
.code-side-content .code-card-reply-box { padding: 12px 15px; border-radius: 6px; background-color: #F0F0F0; }
.code-side-content .code-card-reply-title { opacity: 0.6; }
#codePostSide .reply-title { padding: 0 5px 5px 5px; }
#codePostSide .reply-title .reg-time { color: rgba(148,148,148,0.9); }
#codePostSide .reply-content { max-height: 100px; overflow: auto; scrollbar-width: thin; }
#codePostSide .sub-category { font-size: 12px; white-space: nowrap; color: var(--color-new-orange); }
#codePostSide .code-post-title { height: 45px; border-radius: initial; padding: 0 15px; background-color: #FFF; }
#codePostSide h3.m-0 { width: 80%; padding: 10px 0 5px 0; text-align: center; }
#codePostSide .code-post-inner .code-post-div { height: auto; font-size: 15px; }
#codePostSide .reply-open { color: #8C8C8C; text-align: center;}
#codePostModal * { font-size: 1rem; }
#codePostModal .code-post-modal-explain { background-color: #F6F6F6; padding: 15px; color: var(--color-new-orange); }
#codePostModal .btn-reg { color: #FFF; background-color: var(--color-new-orange); border-color: var(--color-new-orange); }
#codePostModal .btn-reg:hover { color: #FFF; background-color: var(--color-new-orange); border-color: var(--color-new-orange); }
#codePostModal .modal-title { font-size: 1.3rem; }
#codePostModal textarea { resize : none; height: 250px; }
#codePostModal .modal-body { padding: 0 1.25rem; }
#codePostModal .form-div { display: flex; }
#codePostModal .form-control { flex: 2; }
#codePostModal .col-form-label { flex: 1; text-align: center; }
#codePostModal .form-control:focus { border-color: var(--color-new-orange); }
#codePostModal .error-message { color: #FF3C2A;  font-weight: 700; font-size: 15px; }
.code-post-filter { background-color: #FFF; padding: 10px 0 10px 0; overflow: hidden; border-bottom: 1px solid var(--border-color);}
.code-post-filter > div { display: flex; padding: 0 15px; align-items: center; width: 188%; }
.code-post-filter > div > span { display: flex; align-items: center; transition: transform 0.6s ease-in-out; transform: translateX(-325px); }
.code-post-filter .input-span > div.side-input-div { flex: 3; opacity: 0; position: relative; }
.code-post-filter .input-span > .zoom-svg { flex: 1; }
.code-post-filter .input-span > .prev-svg { cursor: pointer; flex: 1; }
.code-post-filter .gap-5 { gap: 5px; }
.code-post-filter-button { display: flex; align-items: center; height: 30px; justify-content: center;
  background: #fff; border: 1px solid #dadce0; box-sizing: border-box; border-radius: 20px;
  min-width: 70px; line-height: 1; cursor: pointer; }
.code-post-filter-button.on { background: var(--color-new-orange); color: rgb(232, 240, 254); border: none; }
.code-post-filter .side-input-div { border-radius: 32px; border: 1px solid transparent; padding: 1px 30px 1px 10px;
  box-shadow: 0 2px 5px 1px rgba(64,60,67,.16); background: #FFF; height: 30px; width: 300px; }
.code-post-filter .side-input-div input { width: 225px; height: 90%; color: rgba(0, 0, 0, 0.50);
  border: none; outline: none; line-height: 19px; padding-top: 7px;}
.code-post-filter .side-input-div .cancel-div { position: absolute; right: 5px; top: 2px; cursor: pointer;
  display: none; opacity: 0.75; }
.code-reply:not[data-post-lv="2"] { padding-bottom: 10px; }
.code-reply .code-reply-card { background-color: #f3f3f3; border-radius: 10px; padding: 12px 15px; }
.code-reply .code-reply-card p { margin-bottom: 0 }
.code-card-input[data-post-lv="2"] { padding: 1% 0 0 40px; }
.code-reply[data-post-lv="3"] { font-size: 13px; margin-left: 40px; }
.code-reply .reply-button { padding: 5px 15px; color: rgb(93 93 93); font-size: 13px; }
.like-font-blue { color: #2196F3; }


/* AI 검색필터 */
#resultCountAi {
    height: 40px;
    margin-bottom: 0;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*.ai-filter { margin-top: 25px }*/
/*.ai-filter #datatableDiv { height: 462px }*/
.ai-result { height: fit-content; }

/* AI 추천 배지 스타일 - 기존 페이지와 어울리는 색상 */
.ai-result-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 0.5rem 0;
    width: 100%;
}

.ai-badge {
    display: inline-flex;
    align-items: center;
    justify-content: end;
    gap: 0.6rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

/*AI 검색결과 테이블 CSS*/
.ai-result table { width:100%; table-layout: fixed}
.ai-result table * { font-size: 1.1rem; font-weight: 600; }
.ai-result table th { vertical-align: middle }
.ai-result table tbody tr.on-click { cursor: pointer; background: rgba(255, 182, 146, 0.2); }
.ai-result table tbody tr:hover { cursor: pointer; background: rgba(153, 221, 255, 0.2); }
/*.ai-result table td { border:1px solid #66CCFF; padding: 10px; font-size: 1rem;}*/
.ai-result table td:nth-child(1) { text-align:center; }
.ai-result table td:nth-child(2) { text-align:center; }
.ai-result table td:nth-child(3) { padding: .40rem 4rem .40rem 1rem; position: relative; overflow:hidden; text-overflow: ellipsis; white-space: nowrap}
/*.ai-result table td:nth-child(3)::after { background-image: url("/industry/img/icon/popup_icon-1ec5fef2336aa8ee9d90eff48a2c96e7.svg"); position: absolute; top: calc(50% - 10px); right: 1.5rem; display: inline-block; content: ""; width: 20px; height: 20px}*/
.ai-result table td:nth-child(4) { text-align:center; padding: .40rem 1rem; }
.ai-result table td:nth-child(5) { text-align:center; }
.ai-result table td:nth-child(6) { text-align:center; }
.ai-result table td:nth-child(7) { text-align:center; }
.popup-link {
    position: relative;
    display: block;
    width: 100%;
    padding-right: 28px;
    line-height: 1.4;
    text-decoration: none;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.popup-link::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 20px;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    background: url(/industry/img/icon/popup_icon-1ec5fef2336aa8ee9d90eff48a2c96e7.svg) no-repeat center / contain;
    opacity: 0.7;
    pointer-events: none;
    transition: opacity .15s
    ease;
}

.toggleExpandBtn{
  position: absolute; top: 6px; right: 10px; z-index: 3;
}

/* 코드 번호 검색 */
#industryTree .selectCode button,#sectorCodeTree .selectCode button { height: 30px; color: #000; background: #fff; border: 1px solid #dadce0; outline: none;
  box-sizing: border-box; border-radius: 20px; min-width: 70px; line-height: 1; cursor: pointer; font: 13px 'Pretendard Variable'; font-weight: 400; }
#industryTree .selectCode button.selected { background: var(--font-green); color: rgb(232, 240, 254); border: none; }
#sectorCodeTree .selectCode button.selected { background: var(--font-green); color: rgb(232, 240, 254); border: none; }
.code-number-top th { font-size: 1rem; }
.code-number-top td { font-size: 0.8rem; }
.code-number-top .page-list { position: absolute; bottom: 35px; width: calc(100% - 20px); }
.code-num-table tbody tr.selectData { background: rgba(255, 153, 102, 0.2); }
.code-num-table tbody tr:hover:not(.no-data-tr) { cursor: pointer; background: rgba(102, 204, 255, 0.2); }
.nav-link.on { background-color: #886ab5; color: #FFF; }
/*#sectorCodeTree { width: 90%; min-height: 500px}*/

/* 엑셀 다운로드 버튼*/
#excelDiv { width: 100%; display: flex; justify-content: center; padding: 1rem; }

/* jstree css*/

.jstree .jstree-container-ul .jstree-node {
  position: relative;
  background: 0 0 !important
}

.jstree .jstree-container-ul .jstree-node:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 1px;
  left: .70312rem;
  border-left: 1px dotted #adb5bd
}

.jstree .jstree-container-ul .jstree-node:last-child:before {
  bottom: 11px
}

.jstree .jstree-container-ul .jstree-node > .jstree-icon.jstree-ocl {
  position: relative;
  background: 0 0
}

.jstree .jstree-container-ul .jstree-node > .jstree-icon.jstree-ocl:before {
  content: '';
  position: absolute;
  left: 50%;
  right: 1px;
  top: 50%;
  border-top: 1px dotted #adb5bd
}

.jstree .jstree-container-ul .jstree-node > .jstree-icon.jstree-ocl:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -3px;
  margin-top: -3px;
  border: 5px solid transparent;
  -webkit-transition: all .2s linear;
  -moz-transition: all .2s linear;
  -ms-transition: all .2s linear;
  -o-transition: all .2s linear;
  transition: all .2s linear
}

.jstree .jstree-container-ul .jstree-node .jstree-anchor {
  color: #495057;
  font-weight: 500;
  margin: 3px 0 2px;
}

.jstree .jstree-container-ul .jstree-node .jstree-anchor .jstree-icon.jstree-checkbox {
  background: 0 0
}

.jstree .jstree-container-ul .jstree-node .jstree-anchor .jstree-icon.jstree-checkbox:before {
  content: '';
  position: absolute;
  left: 4px;
  top: 4px;
  right: 4px;
  bottom: 4px;
  border: 1px solid #ced4da;
  display: block;
  background: #fff;
  border-radius: 3px
}

.jstree .jstree-container-ul .jstree-node .jstree-anchor .jstree-icon.jstree-checkbox:after {
  content: '';
  position: absolute;
  left: 7px;
  top: 7px;
  right: 7px;
  bottom: 7px;
  display: block;
  font-family: Font Awesome\ 5 Free, Font Awesome\ 5 Pro, FontAwesome !important;
  font-weight: 900;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto
}

.jstree .jstree-container-ul .jstree-node .jstree-anchor .jstree-icon.jstree-checkbox.jstree-undetermined:after {
  background: #c4cbd2
}

.jstree .jstree-container-ul .jstree-node .jstree-anchor.jstree-clicked {
  color: #20252a
}

.jstree .jstree-container-ul .jstree-node .jstree-anchor.jstree-clicked .jstree-icon.jstree-checkbox:after {
  content: '\f00c';
  font-size: 10px;
  line-height: 15px;
  color: #495057;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px
}

.jstree .jstree-container-ul .jstree-node .jstree-anchor.jstree-disabled {
  color: #8a98a6
}

.jstree .jstree-container-ul .jstree-node .jstree-anchor.jstree-disabled > .jstree-icon {
  opacity: .4;
  -webkit-filter: none;
  filter: none
}

.jstree .jstree-container-ul .jstree-node .jstree-hovered, .jstree .jstree-container-ul .jstree-node .jstree-wholerow-hovered {
  background: 0 0;
  color: #20252a;
  -webkit-box-shadow: none;
  box-shadow: none
}

.jstree .jstree-container-ul .jstree-node .jstree-clicked, .jstree .jstree-container-ul .jstree-node .jstree-wholerow-clicked {
  background: rgba(255, 153, 102, 0.2);
  -webkit-box-shadow: none;
  box-shadow: none
}

.jstree .jstree-container-ul .jstree-node.jstree-open .jstree-anchor > .fa-folder:before {
  content: '\f07c';
  color: #adb5bd
}

.jstree .jstree-container-ul .jstree-node.jstree-open .jstree-anchor.jstree-clicked > .fa-folder:before {
  color: #2d353c
}

.jstree .jstree-container-ul .jstree-node.jstree-open > .jstree-ocl:after {
  border-left-color: #adb5bd;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg)
}

.jstree .jstree-container-ul .jstree-node.jstree-closed > .jstree-ocl:after {
  border-left-color: #adb5bd;
  margin-top: -5px;
  -webkit-transform: rotate(0);
  -moz-transform: rotate(0);
  -ms-transform: rotate(0);
  -o-transform: rotate(0);
  transform: rotate(0)
}


.nav.nav-tabs.nav-tabs-inverse {
  background-color: #20252a;
  border-radius: 4px 4px 0 0
}

.nav.nav-tabs.nav-tabs-inverse .nav-item .nav-link {
  color: rgba(255, 255, 255, .65)
}

.nav.nav-tabs.nav-tabs-inverse .nav-item .nav-link:focus, .nav.nav-tabs.nav-tabs-inverse .nav-item .nav-link:hover {
  color: #fff
}

.nav.nav-tabs.nav-tabs-inverse .nav-item .nav-link.active {
  color: #2d353c
}

.nav.nav-pills .nav-item .nav-link {
  padding: .61875rem .9375rem;
  font-weight: 500;
  color: #6f8293
}

.nav.nav-pills .nav-item .nav-link:focus, .nav.nav-pills .nav-item .nav-link:hover {
  color: #2d353c
}

.nav.nav-pills .nav-item .nav-link.active {
  color: #fff
}

@media (max-width: 767.98px) {
  .nav-wizards-container {
    overflow: scroll
  }

  .nav-wizards-container .nav.nav-wizards-1, .nav-wizards-container .nav.nav-wizards-2, .nav-wizards-container .nav.nav-wizards-3 {
    min-width: 600px
  }
}

.nav.nav-wizards-1 {
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap
}

.nav.nav-wizards-1 .nav-item {
  padding: 0
}

.nav.nav-wizards-1 .nav-item .nav-link {
  position: relative;
  color: #495057
}

.nav.nav-wizards-1 .nav-item .nav-link .nav-no {
  width: 40px;
  height: 40px;
  margin: 0 auto;
  font-weight: 500;
  background: 0 0;
  border: 2px solid #ced4da;
  position: relative;
  z-index: 10;
  font-size: .875rem;
  border-radius: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transition: all .2s linear;
  -moz-transition: all .2s linear;
  -ms-transition: all .2s linear;
  -o-transition: all .2s linear;
  transition: all .2s linear
}

.nav.nav-wizards-1 .nav-item .nav-link .nav-text {
  text-align: center;
  margin-top: .46875rem;
  font-weight: 500;
  font-size: .75rem
}

.nav.nav-wizards-1 .nav-item .nav-link.active, .nav.nav-wizards-1 .nav-item .nav-link.completed {
  color: #348fe2
}

.nav.nav-wizards-1 .nav-item .nav-link.active .nav-no, .nav.nav-wizards-1 .nav-item .nav-link.completed .nav-no {
  border-color: #348fe2;
  color: #348fe2
}

.nav.nav-wizards-1 .nav-item .nav-link.active:after, .nav.nav-wizards-1 .nav-item .nav-link.active:before, .nav.nav-wizards-1 .nav-item .nav-link.completed:after, .nav.nav-wizards-1 .nav-item .nav-link.completed:before {
  background: #348fe2
}

.nav.nav-wizards-1 .nav-item .nav-link.active:after, .nav.nav-wizards-1 .nav-item .nav-link.completed:after {
  width: calc(50% - 20px)
}

.nav.nav-wizards-1 .nav-item .nav-link.active .nav-no {
  -webkit-box-shadow: 0 0 0 5px rgba(52, 143, 226, .2);
  box-shadow: 0 0 0 5px rgba(52, 143, 226, .2)
}

.nav.nav-wizards-1 .nav-item .nav-link.disabled {
  color: #adb5bd
}

.nav.nav-wizards-1 .nav-item .nav-link:after, .nav.nav-wizards-1 .nav-item .nav-link:before {
  content: '';
  position: absolute;
  top: 1.6875rem;
  height: 2px;
  background: #ced4da;
  left: 0;
  right: calc(50% + 20px)
}

.nav.nav-wizards-1 .nav-item .nav-link:after {
  left: calc(50% + 20px);
  right: 0;
  -webkit-transition: all .2s linear;
  -moz-transition: all .2s linear;
  -ms-transition: all .2s linear;
  -o-transition: all .2s linear;
  transition: all .2s linear
}

.nav.nav-wizards-1 .nav-item:first-child .nav-link:after, .nav.nav-wizards-1 .nav-item:first-child .nav-link:before {
  left: calc(50% + 20px)
}

.nav.nav-wizards-1 .nav-item:last-child .nav-link:before {
  right: calc(50% + 20px)
}

.nav.nav-wizards-1 .nav-item:last-child .nav-link.active:before, .nav.nav-wizards-1 .nav-item:last-child .nav-link.completed:before {
  background: #348fe2
}

.nav.nav-wizards-1 .nav-item:last-child .nav-link:after {
  display: none
}

.nav.nav-wizards-2 {
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap
}

.nav.nav-wizards-2 .nav-item {
  padding: 0 1rem
}

.nav.nav-wizards-2 .nav-item .nav-link {
  position: relative;
  color: #2d353c;
  background: #e9ecef;
  border-radius: 60px
}

.nav.nav-wizards-2 .nav-item .nav-link .nav-text {
  text-align: center;
  font-weight: 500;
  font-size: .75rem;
  position: relative;
  z-index: 10;
  background: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.nav.nav-wizards-2 .nav-item .nav-link:after, .nav.nav-wizards-2 .nav-item .nav-link:before {
  content: '';
  position: absolute;
  left: -1rem;
  right: -1rem;
  height: 2px;
  top: 50%;
  margin-top: -1px;
  background-color: #e9ecef;
  -webkit-transition: all .2s linear;
  -moz-transition: all .2s linear;
  -ms-transition: all .2s linear;
  -o-transition: all .2s linear;
  transition: all .2s linear
}

.nav.nav-wizards-2 .nav-item .nav-link:after {
  width: 0%;
  background: #348fe2
}

.nav.nav-wizards-2 .nav-item .nav-link.disabled {
  color: #ced4da
}

.nav.nav-wizards-2 .nav-item .nav-link.active, .nav.nav-wizards-2 .nav-item .nav-link.completed {
  background: #348fe2;
  color: #fff
}

.nav.nav-wizards-2 .nav-item .nav-link.active:after, .nav.nav-wizards-2 .nav-item .nav-link.completed:after {
  width: calc(100% + 2rem)
}

.nav.nav-wizards-2 .nav-item .nav-link.active {
  -webkit-box-shadow: 0 0 0 4px rgba(52, 143, 226, .2);
  box-shadow: 0 0 0 4px rgba(52, 143, 226, .2)
}

.nav.nav-wizards-2 .nav-item:first-child .nav-link:after, .nav.nav-wizards-2 .nav-item:first-child .nav-link:before {
  left: 50%
}

.nav.nav-wizards-2 .nav-item:last-child .nav-link:before {
  right: 50%
}

.nav.nav-wizards-2 .nav-item:last-child .nav-link.active:before, .nav.nav-wizards-2 .nav-item:last-child .nav-link.completed:before {
  background: #348fe2
}

.nav.nav-wizards-2 .nav-item:last-child .nav-link:after {
  display: none
}

.nav.nav-wizards-3 {
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap
}

.nav.nav-wizards-3 .nav-item {
  padding: 0
}

.nav.nav-wizards-3 .nav-item .nav-link {
  position: relative;
  color: #495057
}

.nav.nav-wizards-3 .nav-item .nav-link .nav-dot {
  width: 16px;
  height: 16px;
  margin: 0 auto;
  font-weight: 500;
  border: 3px solid #ced4da;
  position: relative;
  z-index: 10;
  border-radius: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transition: all .2s linear;
  -moz-transition: all .2s linear;
  -ms-transition: all .2s linear;
  -o-transition: all .2s linear;
  transition: all .2s linear
}

.nav.nav-wizards-3 .nav-item .nav-link .nav-title {
  margin-top: .46875rem;
  font-weight: 500;
  text-align: center;
  font-size: .875rem
}

.nav.nav-wizards-3 .nav-item .nav-link .nav-text {
  text-align: center;
  font-size: .75rem;
  color: #6c757d;
  font-weight: 500
}

.nav.nav-wizards-3 .nav-item .nav-link.active, .nav.nav-wizards-3 .nav-item .nav-link.completed {
  color: #20252a
}

.nav.nav-wizards-3 .nav-item .nav-link.active .nav-dot, .nav.nav-wizards-3 .nav-item .nav-link.completed .nav-dot {
  border-color: #348fe2;
  color: #348fe2
}

.nav.nav-wizards-3 .nav-item .nav-link.active:after, .nav.nav-wizards-3 .nav-item .nav-link.active:before, .nav.nav-wizards-3 .nav-item .nav-link.completed:after, .nav.nav-wizards-3 .nav-item .nav-link.completed:before {
  background: #348fe2
}

.nav.nav-wizards-3 .nav-item .nav-link.active:after, .nav.nav-wizards-3 .nav-item .nav-link.completed:after {
  width: calc(50% - 8px)
}

.nav.nav-wizards-3 .nav-item .nav-link.active .nav-dot {
  -webkit-box-shadow: 0 0 0 5px rgba(52, 143, 226, .2);
  box-shadow: 0 0 0 5px rgba(52, 143, 226, .2)
}

.nav.nav-wizards-3 .nav-item .nav-link.disabled {
  color: #adb5bd
}

.nav.nav-wizards-3 .nav-item .nav-link.disabled .nav-text {
  color: inherit
}

.nav.nav-wizards-3 .nav-item .nav-link:after, .nav.nav-wizards-3 .nav-item .nav-link:before {
  content: '';
  position: absolute;
  top: .875rem;
  height: 3px;
  background: #ced4da;
  left: 0;
  right: calc(50% + 8px)
}

.nav.nav-wizards-3 .nav-item .nav-link:after {
  left: calc(50% + 8px);
  right: 0;
  -webkit-transition: all .2s linear;
  -moz-transition: all .2s linear;
  -ms-transition: all .2s linear;
  -o-transition: all .2s linear;
  transition: all .2s linear
}

.nav.nav-wizards-3 .nav-item:first-child .nav-link:after, .nav.nav-wizards-3 .nav-item:first-child .nav-link:before {
  left: calc(50% + 8px)
}

.nav.nav-wizards-3 .nav-item:last-child .nav-link:before {
  right: calc(50% + 8px)
}

.nav.nav-wizards-3 .nav-item:last-child .nav-link.active:before, .nav.nav-wizards-3 .nav-item:last-child .nav-link.completed:before {
  background: #348fe2
}

.nav.nav-wizards-3 .nav-item:last-child .nav-link:after {
  display: none
}

.navbar.navbar-sticky {
  top: 70px;
  position: sticky;
  border-left: 1px solid #ced4da;
  padding: 0;
  padding-left: .46875rem;
  margin-left: .46875rem
}

.navbar.navbar-sticky .nav {
  width: 100%;
  position: relative;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column
}

.navbar.navbar-sticky .nav .nav-link {
  color: #6c757d;
  padding: .25rem 1rem
}

.navbar.navbar-sticky .nav .nav-link:hover {
  color: #495057
}

.navbar.navbar-sticky .nav .nav-link.active {
  color: #20252a;
  font-weight: 700
}

.fade {
  transition: opacity .15s linear
}

@media (prefers-reduced-motion: reduce) {
  .fade {
    transition: none
  }
}

.fade:not(.show) {
  opacity: 0;
  display: none;
}

.tab-content > .tab-pane {
  display: none
}

.tab-content > .active {
  display: block
}

/* bottom */
#bottom { width: 100%; padding: 50px;}
#ctrlLine { margin-top: 3rem; }
.box-subtitle > h2 {  font-weight: 700; }
#searchHistoryBtn { width: 70px; height: 40px; color: white; background-color: var(--color-new-orange); border: none; }
/*#searchHistory { height: 500px; }*/
#searchHistory .search-input-box { width: 210px; height: 48px; border-top-left-radius: 4px; border-top-right-radius: 4px;
  flex-direction: column; justify-content: flex-start; align-items: flex-start; display: inline-flex; }
#searchHistory .search-input-box > div { align-self: stretch; height: 40px; border-radius: 4px; border: 3px var(--color-new-orange) solid;
  flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 10px; display: flex; }
#searchHistory .search-input-box > div > div { align-self: stretch; flex: 1 1 0; border-top-left-radius: 4px;
  border-top-right-radius: 4px; justify-content: flex-start; align-items: flex-start; display: inline-flex; }
#searchHistory .search-svg { width: 48px; height: 32px; flex-direction: column; justify-content: center;
  align-items: center; gap: 10px; display: inline-flex; }
#searchHistory .search-svg > div { border-radius: 100px; overflow: hidden; justify-content: center;
  align-items: center; gap: 10px; display: inline-flex; }
#searchHistory .search-svg > div > div { padding: 8px; justify-content: center; align-items: center; gap: 10px; display: flex; }
#searchHistory .search-input { flex: 1 1 0; height: 32px; padding-top: 4px; flex-direction: column; justify-content: center;
  outline: none; align-items: flex-start; display: inline-flex; font-size: 16px; border: none; width: 100%; }
.input-cancel svg { cursor: pointer; }

/* scroll */
#industryTree::-webkit-scrollbar,
.code-side-content::-webkit-scrollbar,
.code-post-inner .code-card-content::-webkit-scrollbar {
  width: 8px;
}


#industryTree::-webkit-scrollbar-thumb,
.code-side-content::-webkit-scrollbar-thumb,
.code-post-inner .code-card-content::-webkit-scrollbar-thumb {
  background-color: transparent; border-radius: 5px;
}
#industryTree::-webkit-scrollbar-track,
.code-side-content::-webkit-scrollbar-track,
.code-post-inner .code-card-content::-webkit-scrollbar-track {
  background-color: transparent;
}
#industryTree::-webkit-scrollbar-thumb:vertical,
.code-side-content::-webkit-scrollbar-thumb:vertical,
.code-post-inner .code-card-content::-webkit-scrollbar-thumb:vertical {
  height: 50px;
}
#industryTree::-webkit-scrollbar-button:vertical:start:decrement,
.code-side-content::-webkit-scrollbar-button:vertical:start:decrement,
.code-post-inner .code-card-content::-webkit-scrollbar-button:vertical:start:decrement {
  height: 15px;
  background-color: transparent;
}
#industryTree::-webkit-scrollbar-button:vertical:end:increment,
.code-side-content::-webkit-scrollbar-button:vertical:end:increment,
.code-post-inner .code-card-content::-webkit-scrollbar-button:vertical:end:increment {
  height: 15px;
  background-color: transparent;
}
#sectorCodeTree::-webkit-scrollbar,
.code-side-content::-webkit-scrollbar,
.code-post-inner .code-card-content::-webkit-scrollbar {
  width: 8px;
}

#sectorCodeTree::-webkit-scrollbar-thumb,
.code-side-content::-webkit-scrollbar-thumb,
.code-post-inner .code-card-content::-webkit-scrollbar-thumb {
  background-color: transparent; border-radius: 5px;
}
#sectorCodeTree::-webkit-scrollbar-track,
.code-side-content::-webkit-scrollbar-track,
.code-post-inner .code-card-content::-webkit-scrollbar-track {
  background-color: transparent;
}
#sectorCodeTree::-webkit-scrollbar-thumb:vertical,
.code-side-content::-webkit-scrollbar-thumb:vertical,
.code-post-inner .code-card-content::-webkit-scrollbar-thumb:vertical {
  height: 50px;
}
#sectorCodeTree::-webkit-scrollbar-button:vertical:start:decrement,
.code-side-content::-webkit-scrollbar-button:vertical:start:decrement,
.code-post-inner .code-card-content::-webkit-scrollbar-button:vertical:start:decrement {
  height: 15px;
  background-color: transparent;
}
#industryTree::-webkit-scrollbar-button:vertical:end:increment,
.code-side-content::-webkit-scrollbar-button:vertical:end:increment,
.code-post-inner .code-card-content::-webkit-scrollbar-button:vertical:end:increment {
  height: 15px;
  background-color: transparent;
}
.gray-scrollbar::-webkit-scrollbar-thumb { background-color: #dcdcdc !important; }
.gray-scrollbar::-webkit-scrollbar-thumb:hover { background-color: #cdcdcd !important; }


/* 4K 해상도 (3840x2160) */
@media (min-width: 3840px) {
  #center { max-width: 3600px; }
  #center.opened { padding: 30px 6% 0 450px; }
  #center.closed { padding: 40px 6% 0 6%; }
  :root { --tree-width: 420px; }
  #industryTree, #sectorCodeTree, #harmonyCodeTree { 
    width: var(--tree-width); 
  }
  .treeToggleBtn.treeClose { left: 420px; }
  #searchOpt, #searchTable { font-size: 0.9rem; }
  .div-title { font-size: 25px !important; }
  #searchOpt { min-height: 300px; }
  #searchTable { min-height: 350px; }
  .ai-result table * { font-size: 1.1rem; }
  #datatable2 * { font-size: 1.1rem; }
}

/* 2K 해상도 (2560x1440) */
@media (min-width: 2560px) and (max-width: 3839px) {
  #center { max-width: 2400px; }
  #center.opened { padding: 25px 0 0 400px; }
  #center.closed { padding: 35px 6% 0 6%; }
  :root { --tree-width: 380px; }
  #industryTree, #sectorCodeTree, #harmonyCodeTree { 
    width: var(--tree-width); 
  }
  .treeToggleBtn.treeClose { left: 380px; }
  #searchOpt, #searchTable { font-size: 0.85rem; }
  .div-title { font-size: 18px !important; }
  #searchOpt { min-height: 280px; }
  #searchTable { min-height: 320px; }
  .ai-result table * { font-size: 0.95rem; }
  #datatable2 * { font-size: 0.95rem; }
}

/* FHD 해상도 (1920x1080) - 기본 */
@media (min-width: 1920px) and (max-width: 2559px) {
  #center { max-width: 1800px; }
  #center.opened { padding: 20px 0 0 380px; }
  #center.closed { padding: 30px 0 0 8%; }
  :root { --tree-width: 360px; }
  #industryTree, #sectorCodeTree, #harmonyCodeTree { 
    width: var(--tree-width); 
  }
  .treeToggleBtn.treeClose { left: 360px; }
  #searchOpt, #searchTable { font-size: 0.8rem; }
  .div-title { font-size: 16px !important; }
  #searchOpt { min-height: 250px; }
  #searchTable { min-height: 300px; }
  .ai-result table * { font-size: 0.9rem; }
  #datatable2 * { font-size: 0.9rem; }
}

/* HD+ 해상도 (1600x900) */
@media (min-width: 1600px) and (max-width: 1919px) {
  #center { max-width: 1500px; }
  #center.opened { padding: 15px 0 0 340px; }
  #center.closed { padding: 25px 6% 0 6%; }
  :root { --tree-width: 320px; }
  #industryTree, #sectorCodeTree, #harmonyCodeTree { 
    width: var(--tree-width); 
  }
  .treeToggleBtn.treeClose { left: 320px; }
  #searchOpt, #searchTable { font-size: 0.75rem; }
  .div-title { font-size: 14px !important; }
  #searchOpt { min-height: 220px; }
  #searchTable { min-height: 280px; }
  .ai-result table * { font-size: 0.85rem; }
  #datatable2 * { font-size: 0.85rem; }
}

/* HD 해상도 (1366x768) */
@media (min-width: 1366px) and (max-width: 1599px) {
  #center { max-width: 1200px; }
  #center.opened { padding: 10px 0 0 300px; }
  #center.closed { padding: 20px 4% 0 4%; }
  :root { --tree-width: 280px; }
  #industryTree, #sectorCodeTree, #harmonyCodeTree { 
    width: var(--tree-width); 
  }
  .treeToggleBtn.treeClose { left: 280px; }
  #searchOpt, #searchTable { font-size: 0.7rem; }
  .div-title { font-size: 12px !important; }
  #searchOpt { min-height: 200px; }
  #searchTable { min-height: 250px; }
  .ai-result table * { font-size: 0.8rem; }
  #datatable2 * { font-size: 0.8rem; }
}

/* 작은 해상도 (1280x720) */
@media (min-width: 1280px) and (max-width: 1365px) {
  #center { max-width: 1100px; }
  #center.opened { padding: 8px 0 0 260px; }
  #center.closed { padding: 15px 3% 0 3%; }
  :root { --tree-width: 240px; }
  #industryTree, #sectorCodeTree, #harmonyCodeTree { 
    width: var(--tree-width); 
  }
  .treeToggleBtn.treeClose { left: 240px; }
  #searchOpt, #searchTable { font-size: 0.65rem; }
  .div-title { font-size: 10px !important; }
  #searchOpt { min-height: 180px; }
  #searchTable { min-height: 220px; }
  .ai-result table * { font-size: 0.75rem; }
  #datatable2 * { font-size: 0.75rem; }
}

/* 노트북 해상도 (1200~1279px) */
@media (min-width: 1200px) and (max-width: 1279px) {
  #center { max-width: 1000px; }
  #center.opened { padding: 5px 0 0 220px; }
  #center.closed { padding: 10px 2% 0 2%; }
  :root { --tree-width: 200px; }
  #industryTree, #sectorCodeTree, #harmonyCodeTree { 
    width: var(--tree-width); 
  }
  .treeToggleBtn.treeClose { left: 200px; }
  #searchOpt, #searchTable { font-size: 0.6rem; }
  .div-title { font-size: 8px !important; }
  #searchOpt { min-height: 150px; }
  #searchTable { min-height: 200px; }
  .ai-result table * { font-size: 0.7rem; }
  #datatable2 * { font-size: 0.7rem; }
}

@media (max-width: 1679px) {
  /*#searchWrap { left: 55% }*/
}

@media (min-width: 768px) and (max-width: 1599px) {
  #top {display: block !important;}
  #searchOpt {width: 100% !important; margin-right: 0 !important;}
  #searchTable {width: 100%; margin-top : 1rem}
  #datatable2 tbody td:nth-child(1)::after { right: 2rem; }
  #datatable tbody tr[class^="show-middle-"] td:nth-child(1) {width: 20px; left: 3%}
  #datatable tbody tr td[class^="main-category-td"] {padding-left: 2%}
  #datatable .show-middle-category {padding: 0 0.5rem}
}

@media (max-width: 1279px) {
  #industryTitle {margin-left: 3rem;}
  .treeToggleBtn::after {display: none}
}

@media (min-width: 768px) and (max-width: 1151px) {
  #industryTitle {margin-left: 2rem;}
}

@media (min-width: 992px) and (max-width: 1023px) {
  /*#searchWrap { left: 60% }*/
}

/* 미디엄 디바이스용 스타일 */
@media (min-width: 768px) and (max-width: 991px) {
  /* 미디엄 디바이스에 적용할 스타일 */
  #center.opened { padding: 135px 10% 0 345px; }
  #center.closed { padding: 135px 10% 0 9% }
  #industryTree , #sectorCodeTree{ width: 330px; top: 120px; }
  .treeToggleBtn.treeClose {left : 325px}
  .clickable-text {font-size: 16px}
  #codePostSide{ top: 80px; }
  #codePostSide.opened {left : 345px;}
  #center .div-title {font-size: 22px !important; word-break: keep-all}
  #industryTitle { display: none !important; }
  #searchResult .code-shortcut-change {padding: 1rem 0;}
  #datatable .show-middle-category {padding: 0 0.7rem}
  #searchWrap { left: 50%; width: 45% }
}

/* 스몰 디바이스용 스타일 */
@media (max-width: 767px) {
  html, body { margin: 0; padding: 0; height:calc(var(--vh, 1vh) * 100); }
  .mob-popover { display: none; }
  .dark-overlay { top: 60px; }
  .guide-div { width: 80%; }
  .guide-div p { font-size: 1.2rem; }
  .login-button { top: 64%; transform: translate(-50%, -64%); }
  /* mob search Keyword */
  #searchResult > #SICode, #searchResult > #CCode, #searchResult > #HSCode { padding: .3rem; }
  .mob-wrapper { height: calc(100% - 155px); position: relative; top: 65px; overflow: auto; background: #FAFAFA;
    display: flex; flex-direction: column; }
  
  /* 모바일에서 top 영역 높이 조정 */
  #top { height: calc(100vh - 100px); }
  #searchWrap { position: absolute; top: 80px; height: 40px; width: 70vw; left: 50%; margin: 0; transform: translateX(-50%); }
  #industryTitle { display: none !important;}
  #searchBox { padding-top: 0; margin-top: 2px; }
  #defaultDiv ul { padding: 0; }

  /* search Option */
  #searchOpt { width: 90vw; margin: 20px auto; border: 1px solid #cacdcd; overflow: auto; padding: 0;
    border-radius: 15px; position: relative; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); background: #FFF;}
  #searchOptTop { font-size: 13px; }
  .filter-sub-title { justify-content: initial; font-size: 1.2rem; font-weight: 600 }
  .d-flex.search-toggle-box.mb-1 { position: absolute; right: 15px; font-size: 11px; gap: 5px; }
  .selectBtn { width: 55px; height: 25px; }
  /* search Table */
  #searchTable { width: 90vw; position: relative; height: auto; border: 1px solid #cacdcd; overflow: auto; min-height: 250px;
    border-radius: 15px; bottom: 5px; margin: 0 auto; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); background: #FFF; padding: 0; padding-bottom: 1rem}
  #datatable tbody tr[class^="show-middle-"] td:nth-child(1) {left: 7%}
  #datatable tbody tr[class^="show-middle-"] td:nth-child(4) {padding-left: 10%; font-size: 0.8rem}
  #datatable .show-middle-category {padding: 0 1.5rem; background-size : 8px 8px;}
  #datatable2 { font-size: inherit; }
  #datatable2 .tdExample { white-space: normal; font-size: 13px; }
  #datatable2 th { white-space: nowrap; }
  #datatable2 tbody td { vertical-align: middle; }
  #datatable2 tbody td:nth-child(1) { padding-left: 1rem; padding-right: 0.5rem}
  #datatable2 tbody td:nth-child(1)::after { display: none }
  #searchTable .select-limit { height: 30px; padding: 5px 15px; }
  #searchTable .select-limit.open::before, #searchTable .select-limit::before { top: 4px; }
  #excelDownload { margin-top: 10px; }
  #excelDiv { padding-top: 0; }
  /* search Result */
  .clickable-text { padding: 7px 7px; font-size: 12px; }
  #searchResult { display: none; height: auto; padding: 0; font-size: 14px; }
  #searchResult .code-shortcut-change {padding: 1rem 0;}
  #searchResult .code-change { margin-top: 1rem }
  #searchResult .code-change > div { gap: 2px; }
  #searchResult .nav-pills { gap: 5px; }
  #searchResult .changeBtn { font-size: 3.3vw; width: 20.3vw; }
  #searchResult > div:not(#industryTree, #goConsulting) { width: 90vw; height: auto; margin: 15px auto; border-radius: 15px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); }
  #resultCount { height: 30px; font-size: 18px; margin-bottom: 1rem;}
  .tab-content h4 { font-size: 0.9rem; }
  .hs-table pre { margin: auto !important; padding: 0; }
  .hs-table pre p { font-size: 13px; }
  .hs-table pre p img { width: 100% !important; }
  #goConsulting { display: none; }
  .mob-nodata-ul { padding-left: 6%; }
  #searchResult .description { padding: .5rem; }
  .associated-code .clickable-text { background: rgba(255, 93, 26, 0.08); border-radius: 10px; color: var(--color-new-orange);
    height: auto; padding: 7px 10px; justify-content: flex-start; }
  #searchResult .flexibleTd { width: 70px; }
  #searchResult .flexibleTd2 { width: 75px; }

  #업종-일반율1, #업종-초과율1, #업종-자가율1, #업종-일반율2, #업종-초과율2, #업종-자가율2, #업종-일반율3, #업종-초과율3, #업종-자가율3, #업종-일반율4, #업종-초과율4, #업종-자가율4, #업종-일반율5, #업종-초과율5, #업종-자가율5, #업종-일반율6, #업종-초과율6, #업종-자가율6 {vertical-align: middle}

  /* code-post */
  .code-post-filter > div { width: 197%; }
  .code-post-inner b.community { font-size: 6vw; }
  .code-post-inner .no-post-explain { font-size: 4vw; width: 90%; white-space: break-spaces; margin: 0 auto; }
  #codePostModal * { font-size: 0.9rem; }


  /* mob ai div */
  /* search Option */
  #searchOpt.ai-div { height: auto; }
  .ai-div #resultCount { font-size: 1.3rem; }
  .ai-div .ai-code { font-size: 1rem; padding-bottom: 0.5rem; }
  .ai-div .search-title { display: none; }
  .ai-div .card-body { padding-bottom: 10px !important; }
  .ai-div #aiResultTable th { white-space: nowrap; vertical-align: middle}
  .ai-div #aiResultTable tr td { vertical-align: middle ; word-break: keep-all}
  .ai-result table * { font-size: 1rem; }
  .ai-div .ai-result table td { font-size: 1rem; }
  .ai-result { height: auto}
  .ai-result table td:nth-child(3) { padding: .40rem; overflow: unset; text-overflow: unset; white-space: unset}
  .ai-result table td:nth-child(3)::after { display: none}
  .ai-result table colgroup col:nth-child(1) {width: 10% !important;}
  .ai-result table colgroup col:nth-child(2) {width: 20% !important;}
  .ai-result table colgroup col:nth-child(3) {width: 50% !important;}
  .ai-result table colgroup col:nth-child(4) {width: 20% !important;}
  .ai-filter { margin-bottom: 1rem }
  .ai-filter #datatableDiv { height: auto}
  
  /* 모바일에서 AI 배지 스타일 조정 */
  .ai-result-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .ai-badge {
    font-size: 0.8rem;
    padding: 0.6rem 1.2rem;
    gap: 0.4rem;
  }
  
  #resultCountAi {
    width: 100%;
    flex: none;
  }

  /* hs code modal */
  #hsPop .hs-input-div input { width: 50%; }
  #hsPop .top-li { width: 25%; }

  /* code post */
  #codePostSide { border: 1px solid #cacdcd; overflow: auto; background-color: #FFF; position: static; }
  .code-post-card:last-child { margin: auto; }

  /* my page */
  #searchHistory .search-input-box { width: 100% }
}

@media (max-width: 575px) {
  /* 로그인 유도 모달 */
  .guide-div { padding: 1rem;}
  .guide-div .guide-title-div { margin-top: 3rem }
  .guide-div .guide-title-div img { width: 140px; height: 24px }
  .guide-div .guide-content-div { margin-top: 3.5rem }
  .guide-div .guide-foot-div { margin-top: 4rem }
  .guide-div .guide-foot-div button { width: 100px; height: 35px; border-radius: 50px; margin: 0 0.3rem ; font-size: 0.8rem; transition: 0.3s ease-in-out}
  .guide-div .guide-content-div-1 p { font-size: 20px}
  .guide-div .guide-content-div-2 p { font-size: 15px}
}

/* 출력 시 숨김 처리 */
.print-hide {
  display:block;
}

/* 출력 시 노출 처리 */
.print-show {
  display:none;
}

/* 출력 시 페이지 높이가 크면 자동으로 다음 페이지로 이동 */
.page-break {
  page-break-before: always;
}


/* 프린트 디자인 수정 */
@media print {
  .print-show { display:block;}
  .print-hide {display:none;}

  @page {margin:1.3cm 1.3cm}
  @page :first {margin:0 1.3cm}

  html {margin:1.3cm 0;}
}



/*앵커 태그 밑줄 제거*/
.nav-item > a {
  text-decoration: none;
}

/* 통합 검색 페이지 전용 스타일 */
#main_top_btn { display: none; }
#defaultDiv { padding: 0 10%; }
.form-check-input:checked { background: var(--color-new-orange); border-color: var(--color-new-orange); }
#center .d-flex{
    display: block !important;
}

/* AND / OR 토글 가로 배치 */
#searchOptTop .search-toggle-box{
    display: flex;             /* 이미 d-flex지만, 혹시 모를 덮어쓰기 대비 */
    flex-direction: row !important;   /* ← 세로 쌓임 방지 */
    align-items: center;
    gap: 8px;                  /* 버튼 간 간격 */
    flex-wrap: nowrap;         /* 모바일에서 줄바꿈 원하면 wrap으로 */
}

/* 버튼 모양 정리(선택) */
#searchOptTop .selectBtn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .35rem .8rem;
    border-radius: 16px;
    color: #fff;
    cursor: pointer;
}

/* 로딩 화면 스타일 */
#loadingScreen {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

/* 로딩 화면이 표시될 때 searchOpt 영역과 industryTree 영역 숨기기 */
#loadingScreen.show ~ #top #searchOpt {
    display: none !important;
}

#loadingScreen.show ~ #industryTree {
    display: none !important;
}

.loading-container {
    text-align: center;
    background: white;
    padding: 40px;
    border-radius: 10px;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--color-new-orange);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-text {
    font-size: 18px;
    color: #333;
    margin-bottom: 10px;
}

.loading-sub-text {
    font-size: 14px;
    color: #666;
}