/*
 * K-BOOKS MODERN UI v2.1
 * MAIN BANNER + ICT LEARNING TOOLBAR
 * 2026-09-30
 */

/* ---------------------------------------------------------
   MAIN HERO · dedicated K-BOOKS banner
   --------------------------------------------------------- */
.kbh-v2-hero{
  background:#0d2d3a!important;
  min-height:500px!important;
}
.kbh-v2-hero-bg{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
  opacity:1!important;
  filter:none!important;
}
.kbh-v2-hero:after{
  background:
    linear-gradient(90deg,
      rgba(6,31,42,.92) 0%,
      rgba(6,31,42,.82) 25%,
      rgba(6,31,42,.53) 47%,
      rgba(6,31,42,.13) 70%,
      rgba(6,31,42,.04) 100%)!important;
}
.kbh-v2-hero .kbh-shell{min-height:500px!important}
.kbh-v2-hero-copy{
  max-width:660px!important;
  padding:58px 0 68px!important;
}
.kbh-v2-hero-copy h1{
  max-width:650px;
  text-shadow:0 2px 14px rgba(0,0,0,.18);
}
.kbh-v2-hero-copy p{
  max-width:585px!important;
  color:rgba(255,255,255,.84)!important;
}
.kbh-v2-hero-actions a{
  backdrop-filter:blur(2px);
}
.kbh-v2-shortcuts{
  margin-top:-26px!important;
}

/* ---------------------------------------------------------
   ICT LEARNING TOOLBAR
   정보처리 학습 네비와 같은 역할의 정보통신 전용 학습 바
   --------------------------------------------------------- */
.kblc{
  position:relative;
  z-index:30;
  width:100%;
  border-bottom:1px solid #e6ebea;
  background:#fff;
  color:#173943;
}
.kblc-shell{
  width:min(1180px,calc(100% - 40px));
  margin:0 auto;
  padding:13px 0 14px;
}
.kblc-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:10px;
}
.kblc-head>div>small{
  display:block;
  margin-bottom:4px;
  color:#0b7d79;
  font-size:8px;
  font-weight:900;
  letter-spacing:.14em;
}
.kblc-head strong{
  color:#163946;
  font-size:14px;
  font-weight:900;
  letter-spacing:-.025em;
}
.kblc-head>span{
  color:#829095;
  font-size:9px;
  line-height:1.45;
  text-align:right;
}
.kblc-scroll{
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:#d6dfdf transparent;
}
.kblc-nav{
  display:grid;
  grid-template-columns:repeat(10,minmax(96px,1fr));
  min-width:1000px;
  margin:0;
  padding:0;
  border-top:1px solid #dce4e4;
  border-bottom:1px solid #dce4e4;
  border-right:1px solid #dce4e4;
  background:#fff;
}
.kblc-nav>a{
  min-width:0;
  min-height:57px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:3px;
  padding:8px 10px 9px;
  border-left:1px solid #dce4e4;
  color:#566a71;
  text-decoration:none;
  white-space:nowrap;
}
.kblc-nav>a small{
  display:block;
  color:#879599;
  font-size:7px;
  font-weight:900;
  letter-spacing:.08em;
  line-height:1.2;
}
.kblc-nav>a b{
  display:block;
  overflow:hidden;
  color:#23424c;
  font-size:10px;
  font-weight:850;
  line-height:1.3;
  text-overflow:ellipsis;
}
.kblc-nav>a:hover{
  background:#f4f8f7;
}
.kblc-nav>a.is-active{
  border-left-color:#153d4b;
  background:#153d4b;
}
.kblc-nav>a.is-active small{color:#75d6d1}
.kblc-nav>a.is-active b{color:#fff}
.kblc-nav>a.kblc-review small{color:#9a7a43}
.kblc-nav>a.kblc-review.is-active small{color:#e4c77f}

/* 콘텐츠와 툴바 사이 리듬 */
.kblc + main,
.kblc + .icd-learn,
.kblc + .icd-ice-study-page{
  margin-top:0!important;
}

@media(max-width:900px){
  .kblc-shell{
    width:100%;
    padding:10px 0 11px;
  }
  .kblc-head{
    padding:0 14px;
    margin-bottom:9px;
  }
  .kblc-head>span{display:none}
  .kblc-head strong{font-size:13px}
  .kblc-head>div>small{font-size:8px}
  .kblc-scroll{
    padding:0 14px 2px;
    scrollbar-width:none;
  }
  .kblc-scroll::-webkit-scrollbar{display:none}
  .kblc-nav{
    min-width:920px;
    grid-template-columns:repeat(10,92px);
  }
  .kblc-nav>a{
    min-height:55px;
    padding:8px 9px;
    scroll-snap-align:start;
  }
  .kblc-nav>a small{font-size:7px}
  .kblc-nav>a b{font-size:10px}
  .kblc-scroll{scroll-snap-type:x proximity}

  .kbh-v2-hero,
  .kbh-v2-hero .kbh-shell{min-height:470px!important}
  .kbh-v2-hero-bg{object-position:62% center!important}
  .kbh-v2-hero:after{
    background:linear-gradient(90deg,rgba(6,31,42,.92),rgba(6,31,42,.63) 68%,rgba(6,31,42,.24))!important;
  }
}
@media(max-width:560px){
  .kblc-head{padding:0 12px}
  .kblc-scroll{padding-left:12px;padding-right:12px}
  .kbh-v2-hero{
    min-height:440px!important;
  }
  .kbh-v2-hero .kbh-shell{
    min-height:440px!important;
    align-items:flex-end!important;
  }
  .kbh-v2-hero-bg{
    object-position:68% center!important;
  }
  .kbh-v2-hero:after{
    background:
      linear-gradient(0deg,rgba(6,31,42,.94) 0%,rgba(6,31,42,.68) 58%,rgba(6,31,42,.28) 100%)!important;
  }
  .kbh-v2-hero-copy{
    padding:125px 0 42px!important;
  }
  .kbh-v2-hero-note{gap:8px!important}
}