/* Font */
.notosans {
    font-family: 'Noto Sans', sans-serif;
}

.lato {
    font-family: 'Lato', 'Helvetica Neue', sans-serif;
}

.m-font {
    font-size: 2rem !important;
}

@media (max-width: 1024px) {
    .window-height{
        height: 55vh;
    }
}

@media (max-width: 768px) {
    .hero-5 .media-column {
        background-position: initial;
        height: 40rem !important;
    }
}

.index-font {
    font-size: 1.8rem;
}

@media (max-width: 640px) {
    .index-font {
        font-size: 1.6rem;
    }
}    


@media (min-width: 768px) {
    .index-font {
        font-size: 1.5rem;
    }
}

.content-font {
    font-size: 1.8rem;
}

@media (min-width: 768px) {
    .content-font {
        font-size: 1.6rem;
    }
}

.main-font {
    font-size: 1.8rem;
}

@media (min-width: 768px) {
    .main-font {
        font-size: 1.7rem;
    }
}

.bullet-font {
    font-size:1.8rem;
}

@media (min-width: 768px) {
    .bullet-font {
        font-size:2.5rem;
    }
}

.index-title {
    font-size: 2.8rem;
}

@media (min-width: 1024px) {
    .index-title {
        font-size: 3.294rem;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .text-hidden {
        display: none;
    }
}

@media (max-width: 768px) {
    .m-hidden {
        display: none;
    }
}

@media (max-width: 360px) {
    .sm-letter {
        letter-spacing: -1.9px;
    }
}

@media (min-width: 370px) and (max-width: 375px) {
    .sm-letter {
        letter-spacing: -1.2px;
    }
}

@media (max-width: 1024px) {
    .banner-title {
        margin-bottom: 0;
    }
}

@media (min-width: 1025px) {
    .banner-title {
        margin-bottom: 2rem;
    }
}

@media (max-width: 640px) {
    .bannerpress {
        text-shadow: 0px 3px 3px #4d4d4d;
    }
}    

.bold-600 {
    font-weight: 600 !important;
}

.bold-500 {
    font-weight: 500 !important;
}

.bold-700 {
    font-weight: 700 !important;
}

/* 앵커 이동 후 상위 여백 지정 CSS */

@media all and (max-width: 640px) {

    a.anchor {
        display: block;
        position: relative;
        top: -5rem;
        visibility: hidden;
      }
}

.line-break { 
    display: block;
}

@media all and (max-width: 640px) {
    .m-break { 
        display: block;
    }
}

@media (min-width: 400px) and (max-width: 640px) {
    .m2-break { 
        display: block;
    }
}

@media (max-width: 399px) {
    .m3-break { 
        display: block;
    }
}

@media all and (min-width: 1280px) {
    .p-break { 
        display: block;
    }
}

@media all and (min-width: 1280px) {
    .break-keep {
        word-break:normal;
        overflow-wrap:break-word;
    }
}

.top-9r { 
    top: -9rem;
}

@media (min-width: 375px) and (max-width: 376px) and (min-height: 812px){
    #index-top { 
        top: -9rem;
    }
    #box-bottom {
        top: -5rem;
    }

    .hero-title {
        top:-35rem !important;
    }
}


@media (max-width: 399px) {
    .w-box { 
        width: 29rem;
    }
}

@media (min-width: 400px) {
    .w-box { 
        width: 31rem;
    }
}

@media (min-width: 768px) and (max-width:800px) {
    .w-box { 
        width: 30rem !important;
    }
}

@media (min-width: 801px) and (max-width:1024px) {
    .w-box { 
        width: 34rem !important;
    }
}

@media (max-width: 767px) {
    .index-position {
        position: relative;
        top:-4rem;
    }
}

@media (min-width:768px) and (max-width: 1024px) {
    .index-position {
        position: relative;
        top:3rem;
    }
}

#banner {
    top: -5rem !important;
}

.hero-title {
    top:-57.5rem;
    z-index: 100;
    padding-left: 1.5rem;
}


@media (max-width: 767px) {
    .hero-title {
        top:-36rem;
    }
}

@media (min-width: 1024px) and (max-width:1025px){
    .hero-title {
        top:-65rem !important;
    }
}

@media (max-width: 1024px) {
    .w-table tr th {
        display: block;
        background: #f7f7f7;
        width: auto;
        text-align: center !important;
        border-width: 1px 0px 1px 0px;
        border-color: #e0e0e0;
        padding: 1.5rem;
    }
}

@media (max-width: 1024px) {
    .w-table tr td {
        display: block;
        width: auto;
        border-width: 0px 0px 1px 0px;
        border-color: #e0e0e0;
        padding: 2rem;
        text-align: center;
    }
}

@media (max-width: 640px) {
    .w-3-table tr td {
        display: block;
        width: auto;
        text-align: center;
    }
}


video {
    outline: none;
    border: none;
 }
  
.letterpress {
text-shadow: 0px 3px 3px #4d4d4d;
}

/* Font Color */

.text-black {
    color: #000 !important;
}

.text-charcoal {
    color: #333 !important;
}

.text-white {
    color: #fff !important;
}

.color-theme-red{
	color: #e93847;
}

/* Font Size */

.text-2-1 {
    font-size: 2.1rem;
}

.text-1-4 {
    font-size: 1.4rem;
}

/* Background Color */

.bg-grey {
    background-color: #c9c9c9!important;
}

.bg-lightgrey {
    background-color: #555555!important;
}

.bg-charcoal {
    background-color: #333!important;
}

/* Width */


.width-66 {
    width: 66%;
}

.width-45 {
    width: 45%;
}

.width-50 {
    width: 50%;
}

.width-55 {
    width: 55%;
}

.width-auto {
    width: auto;
}

/* Border Left */

.border-left {
    border-left: 5px solid black;
    border-bottom: none;
    border-top: none;
    border-right: none;
}

.padding-left-2-5 {
    padding-left: 2.5rem !important;
}

.offset-41 {
    margin-left: 41%;
}

.lineheight-3 {
    line-height: 3 !important;
}

/* Mobile Responsive Tuning */

@media (max-width: 768px) {
    .column .width-3 .offset-4 {
        margin-left:0%;
    }
}

@media (max-width: 768px) {
    .width-50{
        width:auto!important;
    }
    .width-66{
        width:auto!important;
    }
    .width-auto{
        width:auto!important;
    }
    .padding-auto{
        padding:initial!important;
    }
    .line::after{
        width: 50%!important;
    }
}

/* Swing Hover Effect */

@-webkit-keyframes swing
{
    15%
    {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    30%
    {
        -webkit-transform: translateX(-5px);
       transform: translateX(-5px);
    } 
    50%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes swing
{
    15%
    {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    30%
    {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
    }
    50%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

#box-banner:hover{
    -webkit-animation: swing 1s ease;
    animation: swing 1s ease;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

/* Text - Line */

.line {
    width: 100%;
    margin:0;
    padding:0;
    text-align:center;
    font-size:1.2rem;
  }

.line::after{
    display: inline-block;
    margin: 0 0 3px 20px;
    height: 1px;
    content:"";
    text-shadow: none;
    background-color: rgb(194, 194, 194);
    width: 25%;
}

/* DIV Background Image */

#box-bottom{
    width: 100%;
    height: auto;
    background:url('/images/new/index_bottom.png');
}

@media (max-width: 768px) {
    #box-bottom {
        background-size: cover;
    }
}

/* Hover BW Scale Effect */

@media (min-width: 768px) {

  .hovereffect {
    width: 100%;
    height: 100%;
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
  }
  
  .hovereffect .overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    top: 9rem;
    left: 0;
    color:white!important;
  }
  
  .hovereffect img {
    display: block;
    position: relative;
    -webkit-transition: all 0.4s ease-in;
    transition: all 0.4s ease-in;
  }
  
  .hovereffect:hover img {
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" /><feGaussianBlur stdDeviation="3" /></filter></svg>#filter');
    filter: grayscale(1) blur(3px);
    -webkit-filter: grayscale(1) blur(3px);
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
  }
  
  .hovereffect h2 {
    text-transform: uppercase;
    text-align: center;
    position: relative;
    font-size:1.7rem;
    padding: 10px;
    background: #e93847;
    font-weight: 600;
    color:#fff;
  }
  
  .hovereffect a.info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    border: 1px solid #fff;
    margin: 50px 0 0 0;
    background-color: transparent;
  }
  
  .hovereffect a.info:hover {
    box-shadow: 0 0 5px #fff;
  }
  
  .hovereffect a.info, .hovereffect h2 {
    -webkit-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
    -webkit-transition: all 0.4s ease-in;
    transition: all 0.4s ease-in;
    opacity: 0;
    filter: alpha(opacity=0);
    color: #fff;
    text-transform: uppercase;
  }
  
  .hovereffect:hover a.info, .hovereffect:hover h2 {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

}

.navigation .dropdown-list,.navigation .sub-menu-short {
	width:16rem!important;
}

.navigation .dropdown-list,.navigation .sub-menu-medium {
	width:19rem!important;
}


.tms-arrow-nav {
    text-align: center !important;
}

/* Breadcrumb */

.breadcrumb-new {
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
    padding:.75rem 1rem;
    padding-top:3rem;
    padding-left:0rem !important;
    margin-left:0rem !important;
	margin-bottom:1rem;
    list-style:none;
    border-radius:.25rem
}
.breadcrumb-item+.breadcrumb-item {
	padding-left:.5rem
}
.breadcrumb-item+.breadcrumb-item::before {
	display:inline-block;
	padding-right:.5rem;
	color:#333333 !important;
	content:">"
}
.breadcrumb-item+.breadcrumb-item:hover::before {
	text-decoration:underline
}
.breadcrumb-item+.breadcrumb-item:hover::before {
	text-decoration:none
}
.breadcrumb-item.active {
	color:#6c757d
}

/* Map */

.embed-container { 
    position: relative; 
    padding-bottom: 40%; 
    height: 0; 
    overflow: hidden; 
    max-width: 100%; 
} 
.embed-container iframe, .embed-container object, .embed-container embed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}

@media (max-width: 640px) {
    .embed-container {
        padding-bottom: 100%;
    }
}

.w-full {
    width: 100%;
}

/* Contatiner Definition 

.container {
    width: 100%;
}

@media (min-width: 640px) {
    .container {
        max-width: 640px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 768px;
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 1024px;
    }
}

@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
    }
}

*/


/* Responsive Definition */

@media (min-width: 640px) {
    .sm\:w-1\/2 {
        width: 50%;
    }
}

@media (min-width: 768px) {
    .md\:w-1\/2 {
        width: 50%;
    }
}

@media (min-width: 768px) {
    .md\:w-1\/3 {
        width: 33.333333%;
}
}


@media (min-width: 768px) {
    .md\:w-3\/4 {
        width: 75%;
    }
}

@media (min-width: 768px) {
    .md\:w-1\/4 {
        width: 25%;
    }
}

@media (min-width: 768px) {
    .md\:w-1\/5 {
        width: 20%;
    }
}

@media (min-width: 768px) {
    .md\:w-2\/5 {
        width: 40%;
    }
}

@media (min-width: 768px) {
    .md\:w-3\/5 {
        width: 60%;
    }
}

@media (min-width: 768px) {
    .md\:w-4\/5 {
        width: 80%;
    }
}

@media (min-width: 768px) {
    .md\:w-65\/100 {
        width: 65%;
    }
}

@media (min-width: 768px) {
    .md\:w-85\/100 {
        width: 85%;
    }
}

@media (min-width: 1280px) {
    .xl\:w-1\/4 {
        width: 25%;
}
}

@media (min-width: 1280px) {
    .xl\:w-65\/100 {
        width: 65% !important;
    }
}

@media (min-width: 1280px) {
    .xl\:w-75\/100 {
        width: 75% !important;
    }
}

@media (min-width: 1280px) {
    .xl\:w-90\/100 {
        width: 90% !important;
    }
}

.w-9\/10 {
    width: 90%;
}

/*
@media (min-width: 1280px) {
    .xl\:w-1\/4 {
        width: 25%;
    }
}
*/

.flex-display {
    display: flex !important;
}

.flex-wrap {
    flex-wrap: wrap;
}

.parallax-window {
    min-height: 40rem;
    background: transparent;
}

.b-shadow {
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.nav-shadow {
    box-shadow: 0 1px 1px -6px rgba(0, 0, 0, 0.42), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 4px 5px -2px rgba(0, 0, 0, 0.1) !important;
  }

/* 앵커 이동 후 상위 여백 지정 CSS */

a.anchor {
    display: block;
    position: relative;
    top: -70px;
    visibility: hidden;
}
  
/* Image Zoom */ 

#mainVisual{overflow:hidden; width:100%; height:500px; position:relative;}	/* 비주얼높이값 이미지에맞게 수정 */
#mainVisual.full-height{height:1030px;}
#mainVisual .slick-track,
#mainVisual .slick-list {
    -webkit-perspective: 2000;
    -webkit-backface-visibility: hidden;
}
#mainVisual .main-visual-list-con,
#mainVisual .main-visual-con,
#mainVisual .slick-list,
#mainVisual .slick-track,
.main-visual-item{
    height:100%;
    overflow:hidden;
}
.main-visual-con{z-index:1;}

.main-visual-item{position:relative;}
.main-visual-item .main-visual-pc-img, .main-visual-item .main-visual-m-img{
    width:100%;
    height:100%;
    background-size:cover !important;
    -webkit-transform: scale(1.05,1.05);
    transform: scale(1.05,1.05);
    -webkit-transition:transform 5000ms  ease-in-out ;
    transition:transform 5000ms ease-in-out ;	
}

.main-visual-item.active-item .main-visual-pc-img, .main-visual-item .main-visual-m-img{
    -webkit-transform: scale(1.0,1.0) rotate(0.002deg);
    transform: scale(1.0,1.0) rotate(0.002deg);
}

.main-visual-item .main-visual-m-img{display:none;}


@media (max-width: 768px){

.main-visual-item .main-visual-pc-img{display:none;}
.main-visual-item .main-visual-m-img{display:block;}
.main-visual-m-img img{width:100%;}
}

#wrap {overflow:hidden; width:100%; min-width:320px; position:relative; }

/* Table  */

tr {
    width: 100%;
}
.w-table tr th {
    background: #f7f7f7 !important;
    font-weight: 600;
    color: #444444;
    width: 30%;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    padding-right: 2rem;
    padding-left: 2rem;
    text-align: center;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
}

.w-table tr td {
    background: #fff;
    font-weight: 500;
    color: #444444;
    width: 70%;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    padding-right: 2rem;
    padding-left: 6rem;
    text-align: left;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
}

 .w-1-table th {
    background: #f7f7f7;
    font-weight: 600;
    color: #444444;
    width: 13%;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    padding-right: 1rem;
    padding-left: 1rem;
    text-align: center;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
 }

 .w-1-table td {
    background: #fff;
    font-weight: 500;
    color: #444444;
    width: 25%;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    padding-right: 2rem;
    padding-left: 2rem;
    text-align: left;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
 }

 .w-2-table th {
    background: #f7f7f7;
    font-weight: 600;
    color: #444444;
    width: 11%;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    padding-right: 1rem;
    padding-left: 1rem;
    text-align: center;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
 }

 .w-2-table td {
    background: #fff;
    font-weight: 500;
    color: #444444;
    width: 25%;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    padding-right: 2rem;
    padding-left: 2rem;
    text-align: left;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
 }

 .w-3-table td {
    background: #fff;
    font-weight: 500;
    color: #444444;
    width: 25%;
    padding-right: 2rem;
    padding-left: 2rem;
    text-align: center;
 }

/* Responsive */

@media (max-width: 768px) {
    .parallax.page-intro, .page-intro { 
    height: 23rem !important;
    }
}

@media (max-width: 768px) {
    .column { 
    padding-left: 0 !important;
    padding-right: 0 !important;
    }
}

/* ========== content title ========== */
.content_title {position: relative; overflow: hidden; background: linear-gradient(90deg, #001845 0%, #00205C 100%); color: #fff; letter-spacing: -0.34px;}
.content_title:before {content: ''; position: absolute; right: 12%; top: 50%; width: 314px; height: 304px; transform: translateY(-50%); background: url('https://www.korea.kr/images/v5/common/bg_content_title.svg') center no-repeat; z-index: 0;}
.content_title .container {position: relative; display: flex; flex-wrap: wrap; align-items: center; width: 1280px; min-height: 100px; margin: 0 auto; padding: 30px 0; z-index: 1;}
.content_title .title {margin-right: 32px; font-size:3.2rem; color: #fff; font-weight: 700;}
.content_title .cont_desc {font-size:1.7rem; color: #fff;}
.content_title .category_lst {display: flex; align-items: center; gap: 20px; font-size:1.8rem;}
.content_title .category_lst li.active a {display: inline-flex; align-items: center; height: 40px; padding: 0 15px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.1); border-radius: 20px; font-weight: 700;}
.content_title .category_lst li a:hover,
.content_title .category_lst li a:focus {text-decoration: underline; text-underline-position: under; text-underline-offset: 1px;}
.content_title .category_lst li.active a:hover,
.content_title .category_lst li.active a:focus {text-decoration: none;}
.content_title .btn_back {display: inline-flex; align-items: center; height: 38px; padding: 0 19px; border: 1px solid rgba(255,255,255,.5); border-radius: 19px; color: #fff; font-weight: 500; letter-spacing: -.3px; transition: all .2s;}
.content_title .btn_back:hover,
.content_title .btn_back:focus {background: #fff; border-color: #fff; color: #1d1d1d;}
.content_title.st2:before {top: 25%;}
.content_title.st2 .container > div:not(.title) {width:100%;}
.content_title.st3 {display: none;}
.content_title2 {background: #F3F3F6;}
.content_title2 .container {position: relative; display: flex; flex-wrap: wrap; align-items: center; width: 1280px; min-height: 120px; margin: 0 auto;}
.content_title2 .icon {flex-shrink: 0; margin-right: 28px;}
.content_title2 .text {flex: 1;}
.content_title2 .text .title {font-size:2.8rem; font-weight: 700; color: #1d1d1d;}
.content_title2 .text .cont_desc {margin-top: 8px; font-size:1.6rem; color: #2d2d2d; line-height: 1.6;}

/* ebook mobile icon */ 

/* 모바일에서 메뉴 버튼 크기 키우기 예시 */
@media (max-width: 768px) {
  .side-nav-hide a,
  .navigation-show.side-nav-show {
    font-size: 2rem !important;
    padding: 1rem !important;
  }

  .navigation-show.side-nav-show .icon-menu {
    font-size: 3rem !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
  }
  .flipbook-menu-btn-wrapper .flipbook-menu-btn .skin-color .flipbook-has-tooltip {
    padding : 0rem !important;
    width: 3rem !important;
    height: 5rem !important;
  }

}

/* Menu-Top Padding */

.menu-top{
    padding-top:8rem !important;
}


@media (max-width: 768px) {
    .menu-top{
    padding-top:2rem !important;
}
}


/* YouTube */

.embed-youtube {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25% !important;
}

.embed-youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Anchor Link */

#section1 {
  scroll-margin-top: 5rem; /* 헤더 높이에 따라 조정 */
}

#section2 {
  scroll-margin-top: 80px; /* 헤더 높이에 따라 조정 */
}

html{
    scroll-behavior: smooth !important;
}

.side-navigation-wrapper {
  display: none;
  transform: translateX(100%);
}

.side-navigation-wrapper.reveal-side-navigation {
  display: block;
  transform: translateX(0%);
  transition: transform 0.4s ease-in-out;
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}




/* =========================================================
   index_2026 전용 디자인 v4.0
   body.page-home-2026 범위에서만 적용
   ========================================================= */
/* index_2026 전용 디자인 */
html.page-home-2026-root{scroll-behavior:smooth;scroll-padding-top:96px;}
		body.page-home-2026 #section1,
body.page-home-2026 #section2,
body.page-home-2026 #section3,
body.page-home-2026 #section3-biocide{scroll-margin-top:96px;}

		body.page-home-2026{
			--db-navy:#005693;
			--db-navy-deep:#003A63;
			--db-ink:#1B2733;
			--db-sub:#5B6572;
			--db-line:#E7EAEE;
			--db-bg-soft:#F5F7F9;
			--db-badge-bg:#EEF2F6;
			--db-badge-ink:#5B6572;
			--type-manual:#2B6CDB;
			--type-manual-tint:#EAF1FE;
			--type-leaflet:#C98A00;
			--type-leaflet-tint:#FFF6E0;
			--type-guide:#0A8A2E;
			--type-guide-tint:#E9F8ED;
			--type-case:#7454C7;
			--type-case-tint:#F2EEFC;
			--type-video:#D9601A;
			--type-video-tint:#FDEEE3;
		}

		/* Type badges (문서 유형별 색상 구분 — 네비게이터와 동일하게 표지 좌상단에 배치) */
		body.page-home-2026 .db-badge{
			position:absolute;
			z-index:4;
			top:10px;
			left:14px;
			min-width:44px;
			height:26px;padding:0 12px;
			display:inline-flex;align-items:center;justify-content:center;
			border:0;border-radius:6px;
			color:#fff;font-size:1.2rem;font-weight:700;line-height:1;
			white-space:nowrap;box-shadow:0 1px 4px rgba(0,0,0,.15);
		}
		body.page-home-2026 .db-badge.type-manual{background:var(--type-manual);}
		body.page-home-2026 .db-badge.type-leaflet{background:var(--type-leaflet);}
		body.page-home-2026 .db-badge.type-guide{background:var(--type-guide);}
		body.page-home-2026 .db-badge.type-case{background:var(--type-case);}

		/* ── 상단 헤더: 네비게이터와 동일한 크기·간격 ──
		   기존 테마의 .header/.logo/.navigation 규칙과 겹치지 않도록 전용 클래스를 사용한다. */
		body.page-home-2026 .side-navigation-wrapper{display:none !important;}
		/* 기존 테마의 overflow:hidden이 sticky 헤더를 잘라내지 않도록 해제 */
		body.page-home-2026 .wrapper,
body.page-home-2026 .wrapper-inner{overflow:visible !important;}
		body.page-home-2026 .db-site-header{
			width:100%;
			margin:0;
			padding:0;
			background:#fff;
			border-bottom:1px solid #E4E7EB;
			box-shadow:0 2px 8px rgba(15,28,46,0.12);
			position:sticky;
			top:0;
			z-index:50;
			box-sizing:border-box;
		}
		body.page-home-2026 .db-site-header-inner{
			width:100%;
			max-width:1110px;
			height:80px;
			margin:0 auto;
			padding:0;
			display:flex;
			align-items:center;
			justify-content:space-between;
			box-sizing:border-box;
		}
		body.page-home-2026 .db-site-logo,
body.page-home-2026 .db-site-logo a{margin:0;padding:0;}
		body.page-home-2026 .db-site-logo a{display:inline-block;text-decoration:none;}
		body.page-home-2026 .db-site-logo img{
			width:190px;
			max-width:190px;
			height:auto;
			display:block;
			margin:0;
		}
		body.page-home-2026 .db-site-nav{margin:0;padding:0;}
		body.page-home-2026 .db-site-nav ul{
			list-style:none;
			margin:0;
			padding:0;
			display:flex;
			align-items:center;
			gap:44px;
		}
		body.page-home-2026 .db-site-nav li{margin:0;padding:0;list-style:none;}
		body.page-home-2026 .db-site-nav a{
			display:inline-block;
			margin:0;
			padding:6px 0;
			font-size:1.6rem;
			font-weight:700;
			line-height:normal;
			color:#111827;
			text-decoration:none;
			border-bottom:2px solid transparent;
			transition:color .15s, border-color .15s;
		}
		body.page-home-2026 .db-site-nav a:hover{color:#1B3E73;border-bottom-color:#1B3E73;}
		body.page-home-2026 .mobile-menu-toggle{
			display:none;width:44px;height:44px;margin:0 0 0 auto;padding:10px;
			align-items:center;justify-content:center;flex-direction:column;gap:5px;
			border:0;border-radius:6px;background:transparent;color:#111827;cursor:pointer;
		}
		body.page-home-2026 .mobile-menu-toggle span{display:block;width:23px;height:2px;border-radius:2px;background:currentColor;transition:transform .18s ease,opacity .18s ease;}
		body.page-home-2026 .mobile-menu-toggle:focus-visible{outline:3px solid rgba(0,86,147,.22);outline-offset:2px;}
		body.page-home-2026 .mobile-menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
		body.page-home-2026 .mobile-menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
		body.page-home-2026 .mobile-menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
		@media (max-width:1180px){
			body.page-home-2026 .db-site-header-inner{padding:0 32px;}
		}
		@media (max-width:760px){
			body.page-home-2026 .db-site-header-inner{height:80px;min-height:80px;gap:12px;align-items:center;flex-direction:row;padding:0 20px;position:relative;}
			body.page-home-2026 .db-site-logo img{width:190px;max-width:190px;}
			body.page-home-2026 .mobile-menu-toggle{display:inline-flex;flex:none;}
			body.page-home-2026 .db-site-nav{display:none;position:absolute;top:100%;left:0;right:0;z-index:60;background:#fff;border-top:1px solid #E4E7EB;box-shadow:0 8px 18px rgba(15,28,46,.14);}
			body.page-home-2026 .db-site-nav.is-open{display:block;}
			body.page-home-2026 .db-site-nav ul{display:flex;align-items:stretch;flex-direction:column;gap:0;padding:8px 20px 14px;}
			body.page-home-2026 .db-site-nav li{width:100%;}
			body.page-home-2026 .db-site-nav a{display:block;width:100%;padding:13px 0;font-size:1.4rem;border-bottom:1px solid #EEF0F3;}
			body.page-home-2026 .db-site-nav li:last-child a{border-bottom:0;}
		}
		/* ── 콘텐츠 컨테이너: 헤더(nav-bar-inner)와 동일한 폭·좌우 여백으로 통일 ── */
		body.page-home-2026 .db-hero,
body.page-home-2026 .section-block{
			max-width:1110px !important;
			margin:0 auto !important;
			padding-left:0 !important;
			padding-right:0 !important;
			width:auto !important;
			float:none !important;
			box-sizing:border-box !important;
		}
		@media (max-width:1180px){
			body.page-home-2026 .db-hero,
body.page-home-2026 .section-block{padding-left:32px !important;padding-right:32px !important;}
		}
		@media (max-width:760px){
			body.page-home-2026 .db-hero,
body.page-home-2026 .section-block{padding-left:20px !important;padding-right:20px !important;}
		}

		/* Breadcrumb */
		body.page-home-2026 .db-breadcrumb{display:flex;align-items:center;gap:.5rem;margin-bottom:2rem;font-size:1.4rem;color:var(--db-sub);}
		body.page-home-2026 .db-breadcrumb a{display:inline-flex;align-items:center;gap:.5rem;color:var(--db-sub);text-decoration:none;}
		body.page-home-2026 .db-breadcrumb a:hover{color:var(--db-navy);}
		body.page-home-2026 .db-breadcrumb svg{width:1.6rem;height:1.6rem;flex:none;}

		/* Hero */
		body.page-home-2026 .db-hero{padding-top:5.6rem;padding-bottom:3.6rem;}
		body.page-home-2026 .db-hero h1{font-size:2.8rem;font-weight:700;color:var(--db-ink);letter-spacing:-0.01em;margin-bottom:1.4rem;line-height:1.35;}
		body.page-home-2026 .db-hero p{font-size:1.6rem;color:var(--db-sub);line-height:1.7;max-width:64rem;word-break:normal;overflow-wrap:break-word;margin-bottom:2.6rem;}
		body.page-home-2026 .db-hero-actions{display:flex;flex-wrap:wrap;gap:1rem;}
		body.page-home-2026 .db-btn-primary{display:inline-flex;align-items:center;gap:.8rem;background:var(--db-navy);color:#fff !important;font-size:1.5rem;font-weight:600;padding:1.3rem 2.2rem;border-radius:.7rem;text-decoration:none;transition:background .15s ease, transform .1s ease;}
		body.page-home-2026 .db-btn-primary:hover{background:var(--db-navy-deep);}
		body.page-home-2026 .db-btn-primary:active{transform:scale(.98);}
		body.page-home-2026 .db-btn-primary svg{width:1.8rem;height:1.8rem;flex:none;}

		/* Section intro (keeps existing h2/p styling, just spacing tweak) */
		body.page-home-2026 .db-section-intro{margin-bottom:3.2rem;}

		/* Card grid wrapper */
		body.page-home-2026 .db-card-list{display:flex;flex-direction:column;gap:2rem;}

		/* Doc card */
		body.page-home-2026 .db-card{
			display:flex;
			align-items:stretch;
			gap:2.8rem;
			background:#fff;
			border:1px solid var(--db-line);
			border-radius:1.4rem;
			padding:3.2rem;
			transition:box-shadow .18s ease, border-color .18s ease, transform .18s ease;
		}
		body.page-home-2026 .db-card:hover{box-shadow:0 .8rem 2.4rem rgba(19,44,74,.08);border-color:#D7DEE6;transform:translateY(-2px);}
		body.page-home-2026 .db-card-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;}
		body.page-home-2026 .db-card-top{display:flex;align-items:flex-start;margin-bottom:1.2rem;}
		body.page-home-2026 .db-card-titlewrap{flex:1;min-width:0;}
		body.page-home-2026 .db-card-titlewrap h3{font-size:2rem;font-weight:700;color:var(--db-ink);line-height:1.4;display:inline;word-break:keep-all;}
		body.page-home-2026 .db-card-summary{font-size:1.62rem;color:var(--db-ink);font-weight:600;margin-bottom:1.3rem;padding-bottom:1.3rem;border-bottom:1px solid var(--db-line);word-break:normal;overflow-wrap:break-word;}
		body.page-home-2026 .db-card-desc{font-size:1.5rem;color:var(--db-sub);line-height:1.85;word-break:normal;overflow-wrap:break-word;}
		body.page-home-2026 .db-card-desc p{margin-bottom:1rem;}
		body.page-home-2026 .db-card-desc p:last-of-type{margin-bottom:0;}
		body.page-home-2026 .db-card-meta{font-size:1.32rem;color:#8A93A0;margin-top:1.4rem;}
		body.page-home-2026 .db-card-actions{display:flex;align-items:center;flex-wrap:wrap;gap:1.2rem;margin-top:2.2rem;}
		body.page-home-2026 .db-btn-action{
			display:inline-flex;align-items:center;gap:.7rem;
			background:#fff;color:var(--db-sub) !important;
			border:1px solid #D8DCE3;
			font-size:1.4rem;font-weight:600;padding:1rem 1.8rem;border-radius:.7rem;
			text-decoration:none;transition:color .15s ease, border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
		}
		body.page-home-2026 .db-btn-action:hover{color:var(--db-navy) !important;border-color:#9DB8DC;background:#F3F7FD;box-shadow:0 .2rem .7rem rgba(36,92,207,.1);}
		body.page-home-2026 .db-btn-action:active{transform:scale(.98);}
		body.page-home-2026 .db-btn-action svg{width:1.7rem;height:1.7rem;flex:none;}

		/* Thumbnail */
		body.page-home-2026 .db-card-thumb{flex:none;width:15rem;align-self:center;}
		body.page-home-2026 .db-thumb-frame{
			position:relative;display:block;border-radius:.8rem;overflow:hidden;
			box-shadow:0 .4rem 1.6rem rgba(19,44,74,.14);border:1px solid var(--db-line);
			background:#fff;
		}
		body.page-home-2026 .db-thumb-frame img{display:block;width:100%;height:auto;}
		body.page-home-2026 .db-thumb-overlay{
			position:absolute;inset:0;background:rgba(11,29,49,.55);
			display:flex;align-items:center;justify-content:center;
			opacity:0;transition:opacity .18s ease;
		}
		body.page-home-2026 .db-thumb-frame:hover .db-thumb-overlay{opacity:1;}
		body.page-home-2026 .db-thumb-overlay span{color:#fff;font-size:1.4rem;font-weight:700;letter-spacing:-.01em;}

		/* Video card */
		body.page-home-2026 .db-video-card{
			background:#fff;border:1px solid var(--db-line);border-radius:1.4rem;
			padding:3.2rem;display:flex;flex-wrap:wrap;gap:2.8rem;align-items:center;
			transition:box-shadow .18s ease, border-color .18s ease;
		}
		body.page-home-2026 .db-video-card:hover{box-shadow:0 .8rem 2.4rem rgba(19,44,74,.08);border-color:#D7DEE6;}
		body.page-home-2026 .db-video-badge{
			display:inline-flex;align-items:center;justify-content:center;
			background:var(--type-video-tint);color:var(--type-video);
			font-size:1.3rem;font-weight:700;padding:.5rem 1.2rem;border-radius:999px;
			margin-bottom:1.2rem;
		}
		body.page-home-2026 .db-video-info h3{font-size:2.2rem;font-weight:700;color:var(--db-ink);margin-bottom:.9rem;line-height:1.4;word-break:keep-all;}
		body.page-home-2026 .db-video-info .db-card-summary{margin-bottom:1.3rem;}

		@media (max-width: 767px){
			body.page-home-2026 .db-hero{padding:2.8rem 0 2rem;}
			body.page-home-2026 .db-hero h1{font-size:2.6rem;}
			body.page-home-2026 .db-hero p{font-size:1.5rem;}
			body.page-home-2026 .db-hero p,
body.page-home-2026 .section-block p{
                text-align:left !important;
                text-justify:auto;
                word-break:normal !important;
                overflow-wrap:break-word !important;
            }
			body.page-home-2026 .db-hero h1,
body.page-home-2026 .section-block h2,
body.page-home-2026 .section-block h3{
				word-break:keep-all !important;
				overflow-wrap:normal;
			}
			body.page-home-2026 .db-card{flex-direction:column-reverse;padding:2rem;gap:1.8rem;}
			body.page-home-2026 .db-card-thumb{width:100%;max-width:16rem;margin:0 auto;}
			body.page-home-2026 .db-card-actions{flex-wrap:wrap;}
			body.page-home-2026 .db-video-card{padding:2rem;}
		}

/* HTML 인라인 style 대체 클래스 */
body.page-home-2026 .db-section-first{border-top:1px solid var(--db-line);padding-top:.2rem}
body.page-home-2026 .db-section-divider{border-top:1px solid var(--db-line);padding-top:4rem}
body.page-home-2026 .db-section-title{font-size:2.8rem;color:#005693}
body.page-home-2026 .db-section-lead{font-size:1.7rem;color:#555;word-break:normal;overflow-wrap:break-word}
body.page-home-2026 .db-card-list-spaced{padding-top:2rem}
body.page-home-2026 .db-video-copy{flex:1 1 40rem;min-width:26rem}
body.page-home-2026 .db-video-media{flex:1 1 30rem;min-width:26rem}
body.page-home-2026 .db-video-embed{border:none;border-radius:.8rem;overflow:hidden}
body.page-home-2026 .db-site-footer{border-top:1px solid #eee}
body.page-home-2026 .db-footer-row{justify-content:space-between}


/* =========================================================
   navigator_2026 전용 디자인 v4.0
   body.page-navigator-2026 범위에서만 적용
   ========================================================= */
/* navigator_2026 전용 디자인 */
body.page-navigator-2026{
    --ink:#0F1C2E;
    --ink-soft:#4A5568;
    --line:#E2E6EC;
    --bg:#FFFFFF;
    --card:#FFFFFF;
    --blue:#005693;
    --blue-dim:#EAF3F8;
    --blue-deep:#003A63;
    --amber:#B8790A;
    --amber-bg:#FBF1DE;
    --green:#1C7A4D;
    --green-bg:#E8F6EE;
    --red:#C2362B;
    --red-bg:#FBEAE8;
    --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  }
  body.page-navigator-2026, body.page-navigator-2026 *{box-sizing:border-box;}
  html.page-navigator-2026-root{overflow-y:scroll;scrollbar-gutter:stable;}
  body.page-navigator-2026{
    margin:0;
    font-family:-apple-system,BlinkMacSystemFont,"Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
    background:var(--bg);
    color:var(--ink);
    padding:0 0 6rem;
  }
  body.page-navigator-2026 .wrap{
    width:100%;
    max-width:111rem;
    margin:0 auto;
    padding:5.6rem 0 0;
  }

  body.page-navigator-2026 .navigator-breadcrumb{
    display:flex;
    align-items:center;
    gap:0.8rem;
    margin:0 0 3.2rem;
    font-size:1.4rem;
    color:var(--ink-soft);
  }
  body.page-navigator-2026 .navigator-breadcrumb a{
    color:inherit;
    text-decoration:none;
  }
  body.page-navigator-2026 .navigator-breadcrumb a:hover{color:var(--blue);}
  body.page-navigator-2026 .navigator-breadcrumb-separator{color:#A7B0BC;}
  body.page-navigator-2026 .masthead{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    border-bottom:0.1rem solid var(--line);
    padding-bottom:3.2rem;
    margin-bottom:3.2rem;
    flex-wrap:wrap;
    gap:1.2rem;
  }
  body.page-navigator-2026 .masthead h1{
    font-size:2.8rem;
    font-weight:700;
    margin:0 0 1.2rem;
    letter-spacing:-0.01em;
    line-height:1.35;
  }
  body.page-navigator-2026 .masthead p{
    margin:0;
    font-size:1.6rem;
    color:var(--ink-soft);
    line-height:1.7;
    word-break:normal;
    overflow-wrap:break-word;
  }
  body.page-navigator-2026 .badge{
    font-family:var(--mono);
    font-size:1.1rem;
    background:var(--ink);
    color:#fff;
    padding:0.4rem 1rem;
    border-radius:0.3rem;
    letter-spacing:0.02em;
  }



  /* ===== SIMULATOR ===== */
  body.page-navigator-2026 .selector-card{
    background:var(--card);
    border:0.1rem solid var(--line);
    border-radius:1.4rem;
    padding:2.4rem 2.6rem 2.2rem;
    margin-bottom:2rem;
  }
  body.page-navigator-2026 .selector-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:1.8rem;
  }
  body.page-navigator-2026 .selector-title{
    font-size:1.6rem;
    font-weight:700;
    color:var(--blue-deep);
    margin:0;
  }
  body.page-navigator-2026 .sel-row{
    display:grid;
    grid-template-columns:11rem 1fr;
    align-items:start;
    gap:1.4rem;
    padding:1.4rem 0;
    border-bottom:0.1rem solid var(--line);
  }
  body.page-navigator-2026 .sel-row:last-child{border-bottom:none;padding-bottom:0;}
  body.page-navigator-2026 .sel-label{
    display:flex;
    align-items:center;
    gap:0.5rem;
    font-size:1.35008rem;
    font-weight:700;
    color:var(--ink);
    padding-top:0.7rem;
  }
  body.page-navigator-2026 .sel-label .info-dot{
    width:1.4rem;
    height:1.4rem;
    border-radius:50%;
    border:0.1rem solid #C2C7D0;
    color:#A0A8B4;
    font-size:0.9rem;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-style:normal;
    font-weight:400;
  }
  body.page-navigator-2026 .sel-options{
    display:flex;
    flex-wrap:wrap;
    gap:0.8rem;
  }
  body.page-navigator-2026 .opt-btn{
    font-family:inherit;
    font-size:1.3rem;
    padding:0.9rem 1.6rem;
    border-radius:0.8rem;
    border:0.13008rem solid var(--line);
    background:#fff;
    color:var(--ink);
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:0.7rem;
    transition:border-color .15s, background .15s, color .15s, box-shadow .15s;
  }
  body.page-navigator-2026 .opt-btn .opt-icon{
    width:1.4rem;
    height:1.4rem;
    flex-shrink:0;
    color:#A0A8B4;
    transition:color .15s;
  }
  body.page-navigator-2026 .opt-btn:hover{
    border-color:var(--blue);
    background:var(--blue-dim);
  }
  body.page-navigator-2026 .opt-btn.selected{
    border-color:var(--blue);
    background:var(--blue-dim);
    color:var(--blue-deep);
    font-weight:700;
    box-shadow:0 0 0 0.2rem rgba(31,79,209,0.20);
  }
  body.page-navigator-2026 .opt-btn.selected .opt-icon{color:var(--blue-deep);}

  body.page-navigator-2026 .selector-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:1.8rem;
  }
  body.page-navigator-2026 .reset-btn{
    font-family:inherit;
    font-size:1.25008rem;
    color:var(--ink-soft);
    background:none;
    border:0.1rem solid var(--line);
    border-radius:0.6rem;
    padding:0.7rem 1.3rem;
    cursor:pointer;
    transition:border-color 0.15s, color 0.15s;
  }
  body.page-navigator-2026 .reset-btn:hover{border-color:var(--ink-soft);}

  body.page-navigator-2026 .search-btn{
    font-family:inherit;
    font-size:1.35008rem;
    font-weight:700;
    color:#fff;
    background:var(--blue);
    border:none;
    border-radius:0.8rem;
    padding:1.1rem 2.6rem;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:0.8rem;
    transition:background 0.15s, transform 0.1s;
  }
  body.page-navigator-2026 .search-btn:hover{background:var(--blue-deep);}
  body.page-navigator-2026 .search-btn:active{transform:scale(0.97);}
  body.page-navigator-2026 .search-btn .search-icon{width:1.5rem;height:1.5rem;}

  body.page-navigator-2026 .sel-hint{
    font-size:1.2rem;
    color:#A0A8B4;
  }

  body.page-navigator-2026 .empty-state{
    background:var(--card);
    border:0.1rem dashed var(--line);
    border-radius:1.2rem;
    padding:5rem 2rem;
    text-align:center;
    color:var(--ink-soft);
    font-size:1.35008rem;
  }

  body.page-navigator-2026 .result-meta{
    display:flex;
    align-items:center;
    gap:1rem;
    margin:0.4rem 0 1.6rem;
    font-size:1.25008rem;
    color:var(--ink-soft);
    flex-wrap:wrap;
  }
  body.page-navigator-2026 .chip{
    font-family:var(--mono);
    background:var(--blue-dim);
    color:var(--blue-deep);
    padding:0.3rem 0.9rem;
    border-radius:0.5rem;
    font-size:1.15008rem;
  }

  body.page-navigator-2026 .sort-toggle{
    margin-left:auto;
    display:flex;
    gap:0.2rem;
    background:var(--line);
    padding:0.2rem;
    border-radius:0.6rem;
  }
  body.page-navigator-2026 .sort-btn{
    font-family:inherit;
    font-size:1.15008rem;
    font-weight:600;
    border:none;
    background:transparent;
    color:var(--ink-soft);
    padding:0.5rem 1rem;
    border-radius:0.4rem;
    cursor:pointer;
    transition:background 0.12s, color 0.12s;
  }
  body.page-navigator-2026 .sort-btn.active{
    background:#fff;
    color:var(--blue-deep);
  }

  body.page-navigator-2026 .chapter-info{
    font-size:1.1rem;
    color:var(--ink-soft);
    background:#F5F6F8;
    border-radius:0.6rem;
    padding:0.6rem 0.9rem;
    margin-bottom:0.8rem;
    line-height:1.5;
  }
  body.page-navigator-2026 .chapter-info b{
    color:var(--ink);
    font-weight:600;
  }

  body.page-navigator-2026 .kw-tags{
    display:flex;
    flex-wrap:wrap;
    gap:0.4rem;
    margin-bottom:0.9rem;
  }
  body.page-navigator-2026 .kw-tag{
    font-size:1rem;
    background:#F0F2F5;
    color:var(--ink-soft);
    padding:0.2rem 0.7rem;
    border-radius:1rem;
  }

  body.page-navigator-2026 .summary-sentence{
    font-size:1.3rem;
    color:var(--ink-soft);
    text-align:right;
    margin:0 0 1.8rem;
    line-height:1.6;
  }
  body.page-navigator-2026 .sum-tag{
    font-weight:700;
    color:var(--blue);
  }

  body.page-navigator-2026 .rec-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:1.4rem;
  }
  body.page-navigator-2026 .rec-title{
    font-size:1.5rem;
    font-weight:700;
    color:var(--ink);
    margin:0;
  }
  body.page-navigator-2026 .rec-head-right{
    display:flex;
    align-items:center;
    gap:1.2rem;
  }
  body.page-navigator-2026 .rec-count{
    font-size:1.2rem;
    color:#A0A8B4;
  }

  /* 추천 자료 카드 */
  body.page-navigator-2026 .rec-title{margin:0;color:#2455C3;font-size:1.8rem;font-weight:800;line-height:1.3;}
  body.page-navigator-2026 .card-grid{
  width:100%;
  display:grid;
  grid-template-columns:repeat(4,22rem);
  justify-content:space-between;
  align-items:start;

  column-gap:3.2rem; /* 좌우 카드 간격 */
  row-gap:6rem;    /* 위아래 카드 간격 */
  } 
  body.page-navigator-2026 .doc-card{width:22rem;min-width:0;overflow:visible;display:flex;flex-direction:column;background:transparent;border:0;box-shadow:none;transition:transform .18s ease;}
  body.page-navigator-2026 .doc-card:hover{transform:translateY(-0.3rem);}
  body.page-navigator-2026 .doc-card:active{transform:translateY(-0.1rem) scale(.994);}
  body.page-navigator-2026 .doc-card:focus-within{outline:0.3rem solid rgba(49,103,232,.14);outline-offset:0.4rem;border-radius:0.6rem;}
  body.page-navigator-2026 .doc-media{position:relative;width:22rem;height:29.3rem;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:0;background:#EEF2F7; border-radius:0.8rem;}
  body.page-navigator-2026 .doc-thumb-link,
body.page-navigator-2026 .doc-thumb-frame{position:absolute;inset:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:inherit;text-decoration:none;}
  body.page-navigator-2026 .doc-thumb,
body.page-navigator-2026 .doc-thumb-book,
body.page-navigator-2026 .doc-thumb-video{width:100%;height:100%;max-width:100%;max-height:100%;display:block;object-fit:cover;object-position:center;border-radius:0;transition:transform .2s ease,filter .2s ease;}
  body.page-navigator-2026 .doc-thumb-video{object-fit:cover;padding:0;background:#080B10;}
  body.page-navigator-2026 .doc-card:hover .doc-thumb{transform:scale(1.012);filter:saturate(1.03);}
  body.page-navigator-2026 .doc-media::after{display:none;}
  body.page-navigator-2026 .doc-media.white-thumb{
    background:#fff;
    border:0.03rem solid #D8DDE5;
  }
  body.page-navigator-2026 .doc-type{
    position:absolute;
    z-index:4;
    top:1rem;
    left:1.4rem;
    min-width:6.1rem;
    height:2.6rem;padding:0 1.2rem;
    display:inline-flex;align-items:center;
    justify-content:center;
    border:0;border-radius:0.6rem;
    color:#fff;font-size:1.2rem;
    font-weight:600;line-height:1;box-shadow:none;}
  body.page-navigator-2026 .type-해설서{background:#3177DF;color:#fff}body.page-navigator-2026 .type-가이드{background:#008A1E;color:#fff}body.page-navigator-2026 .type-사례집{background:#7454C7;color:#fff}body.page-navigator-2026 .type-리플릿{background:#ECAE00;color:#fff}body.page-navigator-2026 .type-교육영상{background:#E46A22;color:#fff}
  body.page-navigator-2026 .doc-overlay{display:none;}
  body.page-navigator-2026 .doc-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem;padding:0.9rem 0 0;background:#fff;border:0;}
  body.page-navigator-2026 .doc-actions.single-action{grid-template-columns:1fr;}
  body.page-navigator-2026 .act-text-link,
body.page-navigator-2026 .act-text-disabled{position:relative;height:2.8rem;min-width:0;padding:0 0.6rem;display:flex;align-items:center;justify-content:center;gap:0.5rem;border:0.1rem solid rgba(159,166,176,.55);border-radius:0.5rem;background:#fff;color:#69717D;font-size:1.2rem;font-weight:600;line-height:1;text-decoration:none;transition:color .15s ease,border-color .15s ease,background-color .15s ease,box-shadow .15s ease,transform .08s ease;}
  body.page-navigator-2026 .act-text-link::before,
body.page-navigator-2026 .act-text-disabled::before{display: none;}
  body.page-navigator-2026 .act-text-link:hover{color:#245CCF;border-color:#8EB4FF;background:rgba(236,244,255,.92);box-shadow:0 0.2rem 0.7rem rgba(36,92,207,.1);}
  body.page-navigator-2026 .act-text-link:active{transform:scale(.97);color:#1748B4;border-color:#6897EF;background:#DDEBFF;}
  body.page-navigator-2026 .act-text-link:focus-visible{outline:0.3rem solid rgba(57,118,232,.2);outline-offset:0.2rem;}
  body.page-navigator-2026 .act-text-disabled{opacity:.42;cursor:not-allowed}body.page-navigator-2026 .act-text-link::after{display:none}
  body.page-navigator-2026 .doc-card-text{display:flex;flex-direction:column;gap:0.1rem;padding:1rem 0 0;}
  body.page-navigator-2026 .doc-name{margin:0;color:#111827;font-size:1.5rem;font-weight:700;line-height:1.3;word-break:keep-all;}
  body.page-navigator-2026 .doc-subtitle{display:-webkit-box;margin:0.2rem 0 0;overflow:hidden;color:#4B5563;font-size:1.4rem;font-weight:500;line-height:1.32;word-break:normal;overflow-wrap:break-word;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
  body.page-navigator-2026 .doc-mini-meta,
body.page-navigator-2026 .doc-desc,
body.page-navigator-2026 .doc-meta,
body.page-navigator-2026 .doc-divider,
body.page-navigator-2026 .act-sep{display:none}
  body.page-navigator-2026 .doc-thumb-empty{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#667085;font-size:1.2rem;font-weight:600;line-height:1.5;text-align:center;background:#EEF2F7;}
  @media(max-width:1020px){
  body.page-navigator-2026 .card-grid{
    grid-template-columns:repeat(3,22rem);
    justify-content:space-between;
    column-gap:2.6rem;
    row-gap:5.5rem;
    }
  }

  @media(max-width:760px){
  body.page-navigator-2026 .card-grid{
    grid-template-columns:repeat(2,22rem);
    justify-content:space-between;
    column-gap:2.2rem;
    row-gap:5rem;
    }
  }
  @media(max-width:500px){body.page-navigator-2026 .card-grid{grid-template-columns:22rem;justify-content:center}}
  @media(prefers-reduced-motion:reduce){body.page-navigator-2026 .doc-card,
body.page-navigator-2026 .doc-thumb,
body.page-navigator-2026 .act-text-link{transition:none}body.page-navigator-2026 .doc-card:hover,
body.page-navigator-2026 .doc-card:active,
body.page-navigator-2026 .doc-card:hover .doc-thumb{transform:none}}


  /* ── 반응형 UI/UX ── */

    /* 결과 카드 진입 애니메이션 - 속도 개선 */
    @keyframes cardFadeUp{
    from{opacity:0;transform:translateY(0.375rem);}
    to{opacity:1;transform:translateY(0);}
    }

    body.page-navigator-2026 .card-grid .doc-card{
    animation:none;
    }


  /* 유형 모름 버튼 */
  body.page-navigator-2026 .type-unknown-btn{
    font-family:inherit;
    font-size:1.25008rem;
    color:var(--ink-soft);
    background:none;
    border:0.13008rem dashed #C2C7D0;
    border-radius:0.8rem;
    padding:0.9rem 1.4rem;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:0.6rem;
    position:relative;
    transition:border-color .15s, color .15s;
  }
  body.page-navigator-2026 .type-unknown-btn:hover{border-color:var(--blue);color:var(--blue-deep);}

  /* ── 상단 헤더 (홈화면 동일 스타일) ── */
  body.page-navigator-2026 .side-navigation-wrapper{
    display:none;
  }
  body.page-navigator-2026 .wrapper,
body.page-navigator-2026 .wrapper-inner{
    width:100%;
  }
  body.page-navigator-2026 .header{
    background:#fff;
    border-bottom:0.1rem solid #E4E7EB;
    box-shadow:0 0.2rem 0.8rem rgba(15,28,46,0.12);
    position:sticky;
    top:0;
    z-index:50;
  }
  body.page-navigator-2026 .header-inner,
body.page-navigator-2026 .nav-bar,
body.page-navigator-2026 .nav-bar-inner{
    width:100%;
  }
  body.page-navigator-2026 .nav-bar-inner{
    max-width:111rem;
    margin:0 auto;
    padding:0;
    height:8rem;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  body.page-navigator-2026 .logo a{
    display:inline-block;
    text-decoration:none;
  }
  body.page-navigator-2026 .logo img{
    width:19rem;
    max-width:19rem;
    height:auto;
    display:block;
  }
  body.page-navigator-2026 .navigation ul{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    align-items:center;
    gap:4.4rem;
  }
  body.page-navigator-2026 .navigation a{
    font-size:1.6rem;
    font-weight:700;
    color:#111827;
    text-decoration:none;
    padding:0.6rem 0;
    border-bottom:0.2rem solid transparent;
    transition:color .15s, border-color .15s;
  }
  body.page-navigator-2026 .navigation a:hover{
    color:#1B3E73;
    border-bottom-color:#1B3E73;
  }
  body.page-navigator-2026 .navigation a.active{
    color:#173B7A;
    font-weight:800;
  }
  body.page-navigator-2026 .secondary-navigation,
body.page-navigator-2026 .aux-navigation.hide{
    display:none;
  }
  body.page-navigator-2026 .mobile-menu-toggle{
    display:none;width:4.4rem;height:4.4rem;margin:0 0 0 auto;padding:1rem;
    align-items:center;justify-content:center;flex-direction:column;gap:0.5rem;
    border:0;border-radius:0.6rem;background:transparent;color:#111827;cursor:pointer;
  }
  body.page-navigator-2026 .mobile-menu-toggle span{display:block;width:2.3rem;height:0.2rem;border-radius:0.2rem;background:currentColor;transition:transform .18s ease,opacity .18s ease;}
  body.page-navigator-2026 .mobile-menu-toggle:focus-visible{outline:0.3rem solid rgba(0,86,147,.22);outline-offset:0.2rem;}
  body.page-navigator-2026 .mobile-menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(0.7rem) rotate(45deg);}
  body.page-navigator-2026 .mobile-menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
  body.page-navigator-2026 .mobile-menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-0.7rem) rotate(-45deg);}
  @media (max-width:1180px){
    body.page-navigator-2026 .nav-bar-inner{padding:0 3.2rem;}
    body.page-navigator-2026 .wrap{padding:5.6rem 3.2rem 0;}
  }
  @media (max-width:760px){
    body.page-navigator-2026 .nav-bar-inner{height:8rem;min-height:8rem;gap:1.2rem;align-items:center;flex-direction:row;padding:0 2rem;position:relative;}
    body.page-navigator-2026 .logo img{width:19rem;max-width:19rem;}
    body.page-navigator-2026 .mobile-menu-toggle{display:inline-flex;flex:none;}
    body.page-navigator-2026 .primary-navigation{display:none !important;position:absolute;top:100%;left:0;right:0;z-index:60;float:none;background:#fff;border-top:0.1rem solid #E4E7EB;box-shadow:0 0.8rem 1.8rem rgba(15,28,46,.14);}
    body.page-navigator-2026 .primary-navigation.is-open{display:block !important;}
    body.page-navigator-2026 .primary-navigation ul{display:flex;align-items:stretch;flex-direction:column;gap:0;padding:0.8rem 2rem 1.4rem;}
    body.page-navigator-2026 .primary-navigation li{width:100%;}
    body.page-navigator-2026 .primary-navigation a{display:block;width:100%;padding:1.3rem 0;font-size:1.4rem;border-bottom:0.1rem solid #EEF0F3;}
    body.page-navigator-2026 .primary-navigation li:last-child a{border-bottom:0;}
    body.page-navigator-2026 .wrap{padding:3.2rem 2rem 0;}
    body.page-navigator-2026 .navigator-breadcrumb{margin-bottom:2.4rem;}
    body.page-navigator-2026 .masthead h1{font-size:2.4rem;}
    body.page-navigator-2026 .selector-card{padding:2rem;}
    body.page-navigator-2026 .sel-row{grid-template-columns:minmax(0,1fr);gap:1rem;padding:1.6rem 0;}
    body.page-navigator-2026 .sel-label{padding-top:0;font-size:1.4rem;}
    body.page-navigator-2026 .sel-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.8rem;width:100%;}
    body.page-navigator-2026 .opt-btn{width:100%;min-height:4.8rem;padding:1rem;justify-content:flex-start;text-align:left;line-height:1.35;white-space:normal;word-break:normal;overflow-wrap:break-word;}
  }
  @media (max-width:340px){
    body.page-navigator-2026 .sel-options{grid-template-columns:minmax(0,1fr);}
  }

  @keyframes navFadeIn{
    from{opacity:0;transform:translateY(1.2rem);}
    to{opacity:1;transform:translateY(0);}
  }
  body.page-navigator-2026 .wrap{animation:navFadeIn 0.3s ease both;}
  body.page-navigator-2026 .header{animation:navFadeIn 0.2s ease both;}

  body.page-navigator-2026 .reference-section{
    margin-top:6.4rem;
    padding-top:3.2rem;
    border-top:0.1rem solid var(--line);
  }
  body.page-navigator-2026 .reference-title{
    margin:0;
    color:#53657D;
    font-size:1.8rem;
    font-weight:800;
    line-height:1.3;
  }
  body.page-navigator-2026 .section-empty{
    padding:2.8rem 0;
    color:var(--ink-soft);
    font-size:1.4rem;
    line-height:1.6;
  }

/* 자바스크립트 상태 표시 클래스 */
body.page-navigator-2026 .selector-error{color:var(--red)}


/* =========================================================
   2026 통합 자료집 공통 UI v4.4
   - 기존 유틸리티는 유지하고 신규 페이지 전용 규칙만 추가합니다.
   - 반응형 분기값은 px 절댓값으로 관리합니다.
   ========================================================= */
body.page-home-2026{padding-top:80px!important}
body.page-navigator-2026{padding-top:80px!important}
.page-home-2026 .db-site-header{position:fixed!important;top:0!important;right:0!important;left:0!important;width:100%!important;height:80px!important;z-index:1000!important;background:#fff!important;transform:none!important;opacity:1!important;visibility:visible!important;animation:none!important}
.page-navigator-2026 .header{position:fixed!important;top:0!important;right:0!important;left:0!important;width:100%!important;height:80px!important;z-index:1000!important;background:#fff!important;transform:none!important;opacity:1!important;visibility:visible!important;animation:none!important}
.page-home-2026 .db-site-header-inner{width:100%!important;max-width:1110px!important;height:80px!important;min-height:80px!important;margin:0 auto!important}
.page-navigator-2026 .nav-bar-inner{width:100%!important;max-width:1110px!important;height:80px!important;min-height:80px!important;margin:0 auto!important}
.page-home-2026 .db-site-logo img{display:block!important;width:220px!important;max-width:220px!important;height:auto!important}
.page-navigator-2026 .logo img{display:block!important;width:220px!important;max-width:220px!important;height:auto!important}
.page-home-2026 .db-breadcrumb{display:none!important}
.page-navigator-2026 .navigator-breadcrumb{display:none!important}
.page-home-2026 .db-hero,.page-home-2026 .section-block{width:100%!important;max-width:1110px!important;margin-right:auto!important;margin-left:auto!important;box-sizing:border-box!important}
.page-navigator-2026 .wrap{width:100%!important;max-width:1110px!important;margin-right:auto!important;margin-left:auto!important;box-sizing:border-box!important}
/* 같은 역할의 설명 문구는 같은 크기와 색으로 통일 */
.page-home-2026 .db-hero p,.page-home-2026 .section-block>.left>p{color:#5B6572!important;font-size:1.6rem!important;font-weight:400!important;line-height:1.75!important;letter-spacing:-.01em;word-break:normal!important;overflow-wrap:break-word!important}
.page-navigator-2026 .masthead p{color:#5B6572!important;font-size:2.56rem!important;font-weight:400!important;line-height:1.75!important;letter-spacing:-.01em;word-break:normal!important;overflow-wrap:break-word!important}
.page-home-2026 .db-card-summary{color:#334155!important;font-size:1.5rem!important;font-weight:600!important;line-height:1.55!important;word-break:normal!important;overflow-wrap:break-word!important}
.page-navigator-2026 .doc-subtitle{color:#334155!important;font-size:2.4rem!important;font-weight:600!important;line-height:1.55!important;word-break:normal!important;overflow-wrap:break-word!important}
.page-home-2026 .db-card-desc{color:#5B6572!important;font-size:1.5rem!important;line-height:1.8!important}
.page-home-2026 .db-card-meta{color:#8A93A0!important;font-size:1.3rem!important;line-height:1.65!important}
.page-home-2026 .db-hero{padding-top:48px!important;padding-bottom:32px!important}
.page-home-2026 #section1{padding-top:16px!important}
.page-navigator-2026 .wrap{padding-top:48px!important}
.page-navigator-2026 .masthead{margin-bottom:32px!important;padding-bottom:28px!important}
@media (max-width:1180px){.page-home-2026 .db-site-header-inner,.page-home-2026 .db-hero,.page-home-2026 .section-block{padding-right:32px!important;padding-left:32px!important}
.page-navigator-2026 .nav-bar-inner,.page-navigator-2026 .wrap{padding-right:32px!important;padding-left:32px!important}}
@media (max-width:760px){body.page-home-2026{padding-top:80px!important}
body.page-navigator-2026{padding-top:80px!important}.page-home-2026 .db-site-header-inner,.page-home-2026 .db-hero,.page-home-2026 .section-block{padding-right:20px!important;padding-left:20px!important}
.page-navigator-2026 .nav-bar-inner,.page-navigator-2026 .wrap{padding-right:20px!important;padding-left:20px!important}.page-home-2026 .db-site-logo img{width:195px!important;max-width:195px!important}
.page-navigator-2026 .logo img{width:195px!important;max-width:195px!important}.page-home-2026 .db-hero{padding-top:32px!important;padding-bottom:24px!important}.page-home-2026 #section1{padding-top:12px!important}.page-home-2026 .db-hero p,.page-home-2026 .section-block>.left>p{font-size:1.5rem!important;text-align:left!important;text-justify:auto!important}
.page-navigator-2026 .masthead p{font-size:2.4rem!important;text-align:left!important;text-justify:auto!important}.page-home-2026 .db-card-desc{text-align:left!important;text-justify:auto!important}.page-navigator-2026 .wrap{padding-top:32px!important}.page-navigator-2026 .masthead{margin-bottom:24px!important;padding-bottom:24px!important}.page-navigator-2026 .selector-card{padding:20px!important}.page-navigator-2026 .sel-row{grid-template-columns:minmax(0,1fr)!important;gap:10px!important;padding:16px 0!important}.page-navigator-2026 .sel-options{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;width:100%!important}.page-navigator-2026 .opt-btn{width:100%!important;min-height:48px!important;padding:10px!important;justify-content:flex-start!important;white-space:normal!important;word-break:normal!important;overflow-wrap:break-word!important}}
@media (max-width:340px){.page-home-2026 .db-site-header-inner{padding-right:14px!important;padding-left:14px!important}
.page-navigator-2026 .nav-bar-inner{padding-right:14px!important;padding-left:14px!important}.page-home-2026 .db-site-logo img{width:180px!important;max-width:180px!important}
.page-navigator-2026 .logo img{width:180px!important;max-width:180px!important}.page-navigator-2026 .sel-options{grid-template-columns:minmax(0,1fr)!important}}
/* =========================================================
   섹션 간격 및 앵커 위치 v4.1
   - 고정 헤더 여백은 html scroll-padding 한 곳에서만 관리
   - 섹션 자체의 중복 scroll-margin 제거
   ========================================================= */
html.page-home-2026-root{
  scroll-padding-top:88px !important;
}
body.page-home-2026 #section1,
body.page-home-2026 #section2,
body.page-home-2026 #section3,
body.page-home-2026 #section3-biocide{
  scroll-margin-top:0 !important;
}
body.page-home-2026 .db-hero{
  padding-bottom:24px !important;
}
body.page-home-2026 #section1{
  padding-top:24px !important;
}
body.page-home-2026 #section1 .menu-top{
  padding-top:0 !important;
}
body.page-home-2026 .db-section-divider{
  padding-top:24px !important;
}
@media (max-width:760px){
  html.page-home-2026-root{
    scroll-padding-top:88px !important;
  }
  body.page-home-2026 .db-hero{
    padding-bottom:20px !important;
  }
  body.page-home-2026 #section1,
  body.page-home-2026 .db-section-divider{
    padding-top:20px !important;
  }
}
/* =========================================================
   모바일 선택 칩 줄바꿈 v4.2
   - 화면 분기값은 px로 유지
   - 2열 그리드 안에서 긴 한국어 문구가 칸을 넘지 않도록 처리
   ========================================================= */
@media (max-width:760px){
  body.page-navigator-2026 .sel-options{
    min-width:0 !important;
  }
  body.page-navigator-2026 .opt-btn{
    min-width:0 !important;
    max-width:100% !important;
    height:auto !important;
    padding:10px !important;
    gap:6px !important;
    font-size:1.3rem !important;
    line-height:1.35 !important;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:break-word !important;
    line-break:strict;
  }
  body.page-navigator-2026 .opt-btn .opt-icon{
    width:14px !important;
    height:14px !important;
  }
}
/* =========================================================
   모바일 추천 카드 전체 폭 v4.3
   - PC 카드 폭은 유지
   - 모바일에서만 한 줄 한 카드, 콘텐츠 영역 100% 사용
   ========================================================= */
@media (max-width:760px){
  body.page-navigator-2026 .card-grid{
    grid-template-columns:minmax(0,1fr) !important;
    justify-content:stretch !important;
    width:100% !important;
    column-gap:0 !important;
    row-gap:48px !important;
  }
  body.page-navigator-2026 .doc-card{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
  }
  body.page-navigator-2026 .doc-media{
    width:100% !important;
    height:auto !important;
    aspect-ratio:440 / 586;
    border-radius:8px !important;
  }
  body.page-navigator-2026 .doc-thumb-link,
  body.page-navigator-2026 .doc-thumb-frame,
  body.page-navigator-2026 .doc-thumb,
  body.page-navigator-2026 .doc-thumb-book,
  body.page-navigator-2026 .doc-thumb-video{
    width:100% !important;
    max-width:100% !important;
  }
  body.page-navigator-2026 .doc-actions{
    width:100% !important;
    gap:10px !important;
    padding-top:10px !important;
  }
  body.page-navigator-2026 .act-text-link,
  body.page-navigator-2026 .act-text-disabled{
    min-height:40px !important;
    height:auto !important;
    font-size:1.4rem !important;
  }
  body.page-navigator-2026 .doc-card-text{
    width:100% !important;
    padding:14px 2px 0 !important;
    gap:5px !important;
  }
  body.page-navigator-2026 .doc-name{
    font-size:1.8rem !important;
    line-height:1.45 !important;
  }
  body.page-navigator-2026 .doc-subtitle{
    font-size:1.4rem !important;
    line-height:1.55 !important;
    -webkit-line-clamp:initial !important;
  }
}
/* =========================================================
   모바일 자료 유형 태그 확대 v4.4
   - 확대된 썸네일 비율에 맞춰 유형 태그 크기와 위치 조정
   ========================================================= */
@media (max-width:760px){
  body.page-navigator-2026 .doc-type{
    top:14px !important;
    left:16px !important;
    min-width:90px !important;
    height:36px !important;
    padding:0 16px !important;
    border-radius:8px !important;
    font-size:1.5rem !important;
    font-weight:700 !important;
    line-height:1 !important;
  }
}
/* =========================================================
   선행 감지형 고속 AOS 모션 v4.9
   - 제목은 고정하고 카드만 짧고 부드럽게 등장
   ========================================================= */
body.page-home-2026 [data-aos="fade-up"]{
  will-change:opacity,transform;
  backface-visibility:hidden;
  transform:translate3d(0,18px,0);
}
body.page-home-2026 [data-aos="fade-up"].aos-animate{
  transform:translate3d(0,0,0);
}
body.page-home-2026 [data-aos="fade-left"]{
  will-change:opacity,transform;
  backface-visibility:hidden;
  transform:translate3d(18px,0,0);
}
body.page-home-2026 [data-aos="fade-left"].aos-animate{
  transform:translate3d(0,0,0);
}
/* =========================================================
   모바일 타이포그래피·썸네일·줄바꿈 정리 v5.0
   - 반응형 분기와 고정 헤더 값은 px, 디자인 단위는 rem 사용
   ========================================================= */
body.page-home-2026 .db-copy-break{
  display:block;
}
.page-home-2026 .db-hero p,
.page-home-2026 .section-block>.left>p,
.page-home-2026 .db-card-summary,
.page-home-2026 .db-card-desc{
  font-size:1.4rem !important;
}

.page-navigator-2026 .masthead p,
.page-navigator-2026 .doc-subtitle{
  font-size:2.24rem !important;
}
.page-home-2026 .db-card-meta{
  font-size:1.3rem !important;
}
.page-home-2026 .db-hero h1,
.page-home-2026 .db-section-title{
  font-size:2.6rem !important;
}

.page-navigator-2026 .masthead h1{
  font-size:4.16rem !important;
}
@media (max-width:760px){
  .page-home-2026 .db-hero p,
  .page-home-2026 .section-block>.left>p,
  .page-home-2026 .db-card-summary,
  .page-home-2026 .db-card-desc,
  .page-home-2026 .db-card-desc p,
  .page-home-2026 .db-card-meta{
    word-break:normal !important;
    overflow-wrap:break-word !important;
    line-break:auto !important;
  }

  .page-navigator-2026 .masthead p,
  .page-navigator-2026 .doc-subtitle,
  .page-navigator-2026 .doc-card-text p{
    word-break:normal !important;
    overflow-wrap:break-word !important;
    line-break:auto !important;
  }
  .page-home-2026 .db-hero h1,
  .page-home-2026 .db-section-title,
  .page-home-2026 .db-card-titlewrap h3,
  .page-home-2026 .db-video-info h3{
    word-break:keep-all !important;
    overflow-wrap:normal !important;
  }

  .page-navigator-2026 .masthead h1,
  .page-navigator-2026 .doc-name{
    word-break:keep-all !important;
    overflow-wrap:normal !important;
  }
  .page-home-2026 .db-card-thumb{
    width:24rem !important;
    max-width:75% !important;
    margin-right:auto !important;
    margin-left:auto !important;
  }

  .page-navigator-2026 .doc-media{
    width:38.4rem !important;
    max-width:75% !important;
    margin-right:auto !important;
    margin-left:auto !important;
  }
  .page-navigator-2026 .doc-media{
    aspect-ratio:440 / 586;
  }
  .page-navigator-2026 .opt-btn,
  .page-navigator-2026 .act-text-link,
  .page-navigator-2026 .act-text-disabled,
  .page-navigator-2026 .doc-subtitle{
    font-size:2.24rem !important;
  }
  html.page-home-2026-root{
    scroll-padding-top:96px !important;
  }
}
/* =========================================================
   네비게이터 글자 크기 홈 기준 통일 v5.2
   - navigator 루트 16px 기준으로 홈의 실제 px 크기를 rem 환산
   ========================================================= */
body.page-navigator-2026 .masthead h1{
  font-size:2.6rem !important;
  line-height:1.35 !important;
}
body.page-navigator-2026 .masthead p,
body.page-navigator-2026 .navigator-breadcrumb,
body.page-navigator-2026 .sel-label,
body.page-navigator-2026 .opt-btn,
body.page-navigator-2026 .search-btn,
body.page-navigator-2026 .result-meta,
body.page-navigator-2026 .sort-btn,
body.page-navigator-2026 .summary-sentence,
body.page-navigator-2026 .doc-subtitle,
body.page-navigator-2026 .act-text-link,
body.page-navigator-2026 .act-text-disabled,
body.page-navigator-2026 .type-unknown-btn,
body.page-navigator-2026 .section-empty{
  font-size:1.4rem !important;
}
body.page-navigator-2026 .selector-title{
  font-size:1.6rem !important;
}
body.page-navigator-2026 .reset-btn,
body.page-navigator-2026 .chapter-info,
body.page-navigator-2026 .doc-thumb-empty{
  font-size:1.3rem !important;
}
body.page-navigator-2026 .kw-tag{
  font-size:1.2rem !important;
}
body.page-navigator-2026 .rec-title{
  font-size:2.6rem !important;
}
body.page-navigator-2026 .rec-count{
  font-size:1.4rem !important;
}
body.page-navigator-2026 .doc-name,
body.page-navigator-2026 .reference-title{
  font-size:2rem !important;
  line-height:1.4 !important;
}
body.page-navigator-2026 .doc-type{
  font-size:1.4rem !important;
}
@media (max-width:760px){
  body.page-navigator-2026 .masthead h1{
    font-size:2.6rem !important;
    line-height:1.4 !important;
  }
  body.page-navigator-2026 .masthead p,
  body.page-navigator-2026 .selector-title,
  body.page-navigator-2026 .sel-label,
  body.page-navigator-2026 .opt-btn,
  body.page-navigator-2026 .search-btn,
  body.page-navigator-2026 .doc-subtitle,
  body.page-navigator-2026 .act-text-link,
  body.page-navigator-2026 .act-text-disabled{
    font-size:1.4rem !important;
  }
  body.page-navigator-2026 .doc-name{
    font-size:2rem !important;
    line-height:1.4 !important;
  }
  body.page-navigator-2026 .doc-type{
    font-size:1.4rem !important;
  }
}
/* =========================================================
   네비게이터 섹션 위계·동일 역할 글자 통일 v5.3
   - 빨강 26px 제목 / 노랑·초록 14px 본문과 선택 항목
   ========================================================= */
body.page-navigator-2026 .masthead h1,
body.page-navigator-2026 .rec-title,
body.page-navigator-2026 .reference-title{
  font-size:2.6rem !important;
  line-height:1.35 !important;
}
body.page-navigator-2026 .masthead p,
body.page-navigator-2026 .sel-label,
body.page-navigator-2026 .opt-btn,
body.page-navigator-2026 .search-btn,
body.page-navigator-2026 .result-meta,
body.page-navigator-2026 .rec-count,
body.page-navigator-2026 .sort-btn,
body.page-navigator-2026 .summary-sentence,
body.page-navigator-2026 .doc-subtitle,
body.page-navigator-2026 .act-text-link,
body.page-navigator-2026 .act-text-disabled,
body.page-navigator-2026 .type-unknown-btn,
body.page-navigator-2026 .section-empty{
  font-size:1.4rem !important;
}
body.page-navigator-2026 #simOutput{
  margin-top:6.4rem;
}
body.page-navigator-2026 #simOutput>.rec-head,
body.page-navigator-2026 .reference-section>.rec-head{
  margin-bottom:3.84rem;
  padding-bottom:1.92rem;
  border-bottom:0.1rem solid var(--line);
}
body.page-navigator-2026 .reference-section{
  margin-top:8rem;
  padding-top:4.8rem;
  border-top:0.1rem solid var(--line);
}
@media (max-width:760px){
  body.page-navigator-2026 #simOutput{
    margin-top:7.68rem;
  }
  body.page-navigator-2026 #simOutput>.rec-head,
  body.page-navigator-2026 .reference-section>.rec-head{
    margin-bottom:3.84rem;
    padding-bottom:2.24rem;
  }
  body.page-navigator-2026 .reference-section{
    margin-top:8.96rem;
    padding-top:5.12rem;
  }
  body.page-navigator-2026 .masthead h1,
  body.page-navigator-2026 .rec-title,
  body.page-navigator-2026 .reference-title{
    font-size:2.6rem !important;
    line-height:1.4 !important;
  }
  body.page-navigator-2026 .masthead p,
  body.page-navigator-2026 .sel-label,
  body.page-navigator-2026 .opt-btn,
  body.page-navigator-2026 .search-btn,
  body.page-navigator-2026 .rec-count,
  body.page-navigator-2026 .sort-btn,
  body.page-navigator-2026 .doc-subtitle,
  body.page-navigator-2026 .act-text-link,
  body.page-navigator-2026 .act-text-disabled{
    font-size:1.4rem !important;
  }
}

/* navigator rem 기준 통일 v5.4: 홈과 동일하게 1rem = 10px */
html.page-navigator-2026-root{font-size:62.5%;}

/* =========================================================
   카드·영상·네비게이터 제목 크기 통일 v5.5
   ========================================================= */
body.page-home-2026 .db-card-titlewrap h3,
body.page-home-2026 .db-video-info h3,
body.page-navigator-2026 .doc-name{
  font-size:2rem !important;
  line-height:1.4 !important;
}
body.page-navigator-2026 .rec-title,
body.page-navigator-2026 .reference-title{
  font-size:2.4rem !important;
  line-height:1.4 !important;
}
@media (max-width:760px){
  body.page-home-2026 .db-card-titlewrap h3,
  body.page-home-2026 .db-video-info h3,
  body.page-navigator-2026 .doc-name{
    font-size:2rem !important;
    line-height:1.4 !important;
  }
  body.page-navigator-2026 .rec-title,
  body.page-navigator-2026 .reference-title{
    font-size:2.4rem !important;
    line-height:1.4 !important;
  }
}

/* =========================================================
   홈 모바일 본문 가독성·자료 구분 정리 v5.7
   - 홈 모바일 본문만 1.6rem
   - 네비게이터 본문은 PC·모바일 모두 1.4rem 유지
   - 추천·참고 자료 제목 색상 통일 및 중복 구분선 제거
   ========================================================= */
body.page-navigator-2026 .reference-title{
  color:#2455C3 !important;
}
body.page-navigator-2026 .reference-section{
  border-top:0 !important;
}
@media (max-width:760px){
  body.page-home-2026 .db-hero p,
  body.page-home-2026 .section-block>.left>p,
  body.page-home-2026 .db-card-summary,
  body.page-home-2026 .db-card-desc,
  body.page-home-2026 .db-card-desc p{
    font-size:1.6rem !important;
  }
}
/* =========================================================
   모바일 섹션 흐름·원본 썸네일 비율 보존 v5.9
   - PC 설명문의 지정 줄바꿈 유지, 모바일에서는 자연 줄바꿈
   - 구분선 위치는 유지하고 교육영상 제목만 4px 위로 조정
   - 원본 비율로 재생성한 440:586 경량 썸네일을 왜곡 없이 표시
   ========================================================= */
body.page-navigator-2026 .doc-thumb-book{
  object-fit:cover !important;
  object-position:center center !important;
}
@media (max-width:760px){
  body.page-home-2026 .db-copy-break{
    display:none !important;
  }
  body.page-home-2026 #section2{
    padding-top:2rem !important;
  }
  body.page-home-2026 #section2 .db-section-title{
    transform:translateY(-.4rem);
  }
}
/* =========================================================
   모바일 비율·정렬·결과 카드 폭 통일 v6.0
   - 홈과 네비게이터가 동일한 비율 보존 경량 썸네일 사용
   - 본문은 강제 줄바꿈 없이 문자 간 양쪽 정렬
   - 썸네일·버튼·제목을 동일한 유동 폭으로 정렬
   ========================================================= */
@media (max-width:760px){
  body.page-home-2026 .db-hero p,
  body.page-home-2026 .section-block>.left>p,
  body.page-home-2026 .db-card-desc,
  body.page-home-2026 .db-card-desc p,
  body.page-navigator-2026 .masthead p{
    text-align:justify !important;
    text-align-last:left !important;
    text-justify:inter-character;
    word-break:normal !important;
    overflow-wrap:break-word !important;
  }

  body.page-navigator-2026 .doc-card{
    align-items:center !important;
  }
  body.page-navigator-2026 .doc-media,
  body.page-navigator-2026 .doc-actions,
  body.page-navigator-2026 .doc-card-text{
    width:min(24rem,75%) !important;
    max-width:none !important;
    margin-right:auto !important;
    margin-left:auto !important;
    box-sizing:border-box !important;
  }
  body.page-navigator-2026 .doc-media{
    height:auto !important;
    aspect-ratio:auto !important;
  }
  body.page-navigator-2026 .doc-thumb-link,
  body.page-navigator-2026 .doc-thumb-frame{
    position:relative !important;
    inset:auto !important;
    display:block !important;
    width:100% !important;
    height:auto !important;
  }
  body.page-navigator-2026 .doc-thumb,
  body.page-navigator-2026 .doc-thumb-book,
  body.page-navigator-2026 .doc-thumb-video{
    display:block !important;
    width:100% !important;
    height:auto !important;
    object-fit:contain !important;
    object-position:center !important;
  }
  body.page-navigator-2026 .doc-actions{
    gap:1rem !important;
    padding-top:1rem !important;
  }
  body.page-navigator-2026 .doc-card-text{
    padding:1.4rem 0 0 !important;
  }
}
/* 모바일 이행 가이드 구분선·제목 간격 보정 v6.1 */
@media (max-width:760px){
  body.page-home-2026 #section3{
    padding-top:3.2rem !important;
  }
}
/* 모바일 전체 섹션 구분선 상단 간격 보정 v6.2 */
@media (max-width:760px){
  body.page-home-2026 .db-section-divider{
    margin-top:3.2rem !important;
  }
}
/* =========================================================
   홈·네비게이터 완전 공통 고정 상단바 v6.3
   - 동일 HTML 클래스, 동일 높이·폭·로고·메뉴 규칙 사용
   ========================================================= */
body.page-home-2026,
body.page-navigator-2026{
  padding-top:80px !important;
}
body.page-home-2026 .db-site-header,
body.page-navigator-2026 .db-site-header{
  position:fixed !important;
  inset:0 0 auto 0 !important;
  z-index:1000 !important;
  width:100% !important;
  height:80px !important;
  min-height:80px !important;
  max-height:80px !important;
  margin:0 !important;
  padding:0 !important;
  box-sizing:border-box !important;
  background:#fff !important;
  border-bottom:1px solid #E4E7EB !important;
  box-shadow:0 2px 8px rgba(15,28,46,.12) !important;
  transform:none !important;
}
body.page-home-2026 .db-site-header-inner,
body.page-navigator-2026 .db-site-header-inner{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  width:100% !important;
  max-width:1110px !important;
  height:80px !important;
  min-height:80px !important;
  max-height:80px !important;
  margin:0 auto !important;
  padding:0 !important;
  box-sizing:border-box !important;
}
body.page-home-2026 .db-site-logo,
body.page-navigator-2026 .db-site-logo,
body.page-home-2026 .db-site-logo a,
body.page-navigator-2026 .db-site-logo a{
  position:static !important;
  display:block !important;
  flex:none !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  line-height:1 !important;
}
body.page-home-2026 .db-site-logo img,
body.page-navigator-2026 .db-site-logo img{
  display:block !important;
  width:220px !important;
  max-width:220px !important;
  height:auto !important;
  margin:0 !important;
}
body.page-home-2026 .db-site-nav,
body.page-navigator-2026 .db-site-nav{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
}
body.page-home-2026 .db-site-nav ul,
body.page-navigator-2026 .db-site-nav ul{
  display:flex !important;
  align-items:center !important;
  gap:44px !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
}
body.page-home-2026 .db-site-nav li,
body.page-navigator-2026 .db-site-nav li{
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
}
body.page-home-2026 .db-site-nav a,
body.page-navigator-2026 .db-site-nav a{
  display:inline-block !important;
  margin:0 !important;
  padding:6px 0 !important;
  color:#111827 !important;
  font-size:1.6rem !important;
  font-weight:700 !important;
  line-height:1.4 !important;
  text-decoration:none !important;
  border-bottom:2px solid transparent !important;
}
body.page-home-2026 .db-site-nav a:hover,
body.page-navigator-2026 .db-site-nav a:hover,
body.page-navigator-2026 .db-site-nav a.active{
  color:#173B7A !important;
  border-bottom-color:#173B7A !important;
}
body.page-home-2026 .mobile-menu-toggle,
body.page-navigator-2026 .mobile-menu-toggle{
  display:none !important;
  flex:none !important;
  width:44px !important;
  height:44px !important;
  margin:0 0 0 auto !important;
  padding:10px !important;
  align-items:center !important;
  justify-content:center !important;
  flex-direction:column !important;
  gap:5px !important;
  border:0 !important;
  border-radius:6px !important;
  background:transparent !important;
  color:#111827 !important;
}
body.page-home-2026 .mobile-menu-toggle span,
body.page-navigator-2026 .mobile-menu-toggle span{
  display:block !important;
  width:23px !important;
  height:2px !important;
  border-radius:2px !important;
  background:currentColor !important;
}
@media (max-width:1180px){
  body.page-home-2026 .db-site-header-inner,
  body.page-navigator-2026 .db-site-header-inner{
    padding-right:32px !important;
    padding-left:32px !important;
  }
}
@media (max-width:760px){
  body.page-home-2026 .db-site-header-inner,
  body.page-navigator-2026 .db-site-header-inner{
    padding-right:20px !important;
    padding-left:20px !important;
  }
  body.page-home-2026 .db-site-logo img,
  body.page-navigator-2026 .db-site-logo img{
    width:195px !important;
    max-width:195px !important;
  }
  body.page-home-2026 .mobile-menu-toggle,
  body.page-navigator-2026 .mobile-menu-toggle{
    display:inline-flex !important;
  }
  body.page-home-2026 .db-site-nav,
  body.page-navigator-2026 .db-site-nav{
    display:none !important;
    position:absolute !important;
    top:100% !important;
    right:0 !important;
    left:0 !important;
    z-index:60 !important;
    background:#fff !important;
    border-top:1px solid #E4E7EB !important;
    box-shadow:0 8px 18px rgba(15,28,46,.14) !important;
  }
  body.page-home-2026 .db-site-nav.is-open,
  body.page-navigator-2026 .db-site-nav.is-open{
    display:block !important;
  }
  body.page-home-2026 .db-site-nav ul,
  body.page-navigator-2026 .db-site-nav ul{
    flex-direction:column !important;
    align-items:stretch !important;
    gap:0 !important;
    padding:8px 20px 14px !important;
  }
  body.page-home-2026 .db-site-nav a,
  body.page-navigator-2026 .db-site-nav a{
    display:block !important;
    width:100% !important;
    padding:13px 0 !important;
    font-size:1.4rem !important;
    border-bottom:1px solid #EEF0F3 !important;
  }
  body.page-home-2026 .db-site-nav li:last-child a,
  body.page-navigator-2026 .db-site-nav li:last-child a{
    border-bottom:0 !important;
  }
}
@media (max-width:340px){
  body.page-home-2026 .db-site-header-inner,
  body.page-navigator-2026 .db-site-header-inner{
    padding-right:14px !important;
    padding-left:14px !important;
  }
  body.page-home-2026 .db-site-logo img,
  body.page-navigator-2026 .db-site-logo img{
    width:180px !important;
    max-width:180px !important;
  }
}
/* 홈·네비게이터 상단 메뉴 글자 절대 크기 통일 v6.4 */
body.page-home-2026 .db-site-nav a,
body.page-navigator-2026 .db-site-nav a{
  font-size:16px !important;
  line-height:22px !important;
  letter-spacing:-.01em !important;
}
@media (max-width:760px){
  body.page-home-2026 .db-site-nav a,
  body.page-navigator-2026 .db-site-nav a{
    font-size:14px !important;
    line-height:20px !important;
  }
}
/* 홈·네비게이터 상단바 완전 고정 v6.5
   페이지 고유의 글자 상속·확대/축소가 상단바에 영향을 주지 않도록 동일 규격을 강제합니다. */
body.page-home-2026 .db-site-header,
body.page-navigator-2026 .db-site-header,
body.page-home-2026 .db-site-header *,
body.page-navigator-2026 .db-site-header *{
  box-sizing:border-box !important;
  -webkit-text-size-adjust:100% !important;
  text-size-adjust:100% !important;
  transform:none !important;
  zoom:1 !important;
}
body.page-home-2026 .db-site-header,
body.page-navigator-2026 .db-site-header,
body.page-home-2026 .db-site-header-inner,
body.page-navigator-2026 .db-site-header-inner{
  height:80px !important;
  min-height:80px !important;
  max-height:80px !important;
}
body.page-home-2026 .db-site-logo,
body.page-navigator-2026 .db-site-logo{
  display:flex !important;
  width:220px !important;
  min-width:220px !important;
  max-width:220px !important;
  align-items:center !important;
}
body.page-home-2026 .db-site-logo img,
body.page-navigator-2026 .db-site-logo img{
  display:block !important;
  width:220px !important;
  min-width:220px !important;
  max-width:220px !important;
  height:auto !important;
}
body.page-home-2026 .db-site-nav,
body.page-navigator-2026 .db-site-nav,
body.page-home-2026 .db-site-nav ul,
body.page-navigator-2026 .db-site-nav ul,
body.page-home-2026 .db-site-nav li,
body.page-navigator-2026 .db-site-nav li{
  font-family:"Pretendard","Noto Sans KR",Arial,sans-serif !important;
  font-size:16px !important;
  line-height:22px !important;
}
body.page-home-2026 .db-site-nav a,
body.page-navigator-2026 .db-site-nav a{
  display:flex !important;
  min-height:34px !important;
  align-items:center !important;
  font-family:"Pretendard","Noto Sans KR",Arial,sans-serif !important;
  font-size:16px !important;
  font-weight:700 !important;
  line-height:22px !important;
  letter-spacing:-.01em !important;
  white-space:nowrap !important;
}
@media (max-width:760px){
  body.page-home-2026 .db-site-logo,
  body.page-navigator-2026 .db-site-logo,
  body.page-home-2026 .db-site-logo img,
  body.page-navigator-2026 .db-site-logo img{
    width:195px !important;
    min-width:195px !important;
    max-width:195px !important;
  }
  body.page-home-2026 .db-site-nav a,
  body.page-navigator-2026 .db-site-nav a{
    min-height:46px !important;
    font-size:14px !important;
    line-height:20px !important;
  }
}
@media (max-width:340px){
  body.page-home-2026 .db-site-logo,
  body.page-navigator-2026 .db-site-logo,
  body.page-home-2026 .db-site-logo img,
  body.page-navigator-2026 .db-site-logo img{
    width:180px !important;
    min-width:180px !important;
    max-width:180px !important;
  }
}