/*
 * K-BOOKS · Learning Tools Navigation v1
 * 정보처리 학습도구 공통 상단 레이어
 * CBT/기출/실기/LAB 내부 기능에는 관여하지 않습니다.
 */

.kblt{
  --ink:#173849;
  --teal:#0b8583;
  --gold:#927238;
  --line:#dbe4e5;
  --muted:#6b7d83;
  width:100%;
  border-bottom:1px solid var(--line);
  background:#fff;
  color:var(--ink);
}
.kblt *{box-sizing:border-box}
.kblt a{text-decoration:none}
.kblt-shell{
  width:min(1180px,calc(100% - 40px));
  margin:0 auto;
  padding:13px 0 12px;
}
.kblt-context{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:10px;
}
.kblt-context>a{color:var(--ink)}
.kblt-context small{
  display:block;
  color:var(--teal);
  font-size:8px;
  font-weight:900;
  letter-spacing:.12em;
}
.kblt-context strong{
  display:block;
  margin-top:3px;
  font-size:15px;
  letter-spacing:-.025em;
}
.kblt-context>span{
  color:var(--muted);
  font-size:9px;
  line-height:1.5;
}
.kblt-nav{
  display:grid;
  grid-template-columns:repeat(10,minmax(0,1fr));
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.kblt-nav>a{
  min-width:0;
  min-height:54px;
  padding:9px 10px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#fff;
  color:#50676f;
}
.kblt-nav small{
  color:#8a999d;
  font-size:7px;
  font-weight:900;
  letter-spacing:.08em;
}
.kblt-nav b{
  margin-top:3px;
  overflow:hidden;
  color:#3d555d;
  font-size:10px;
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.kblt-nav>a:hover{
  background:#f5f8f8;
  color:var(--ink);
}
.kblt-nav>a.is-active{
  border-color:var(--ink);
  background:var(--ink);
}
.kblt-nav>a.is-active small{color:#72ded8}
.kblt-nav>a.is-active b{color:#fff}
.kblt-nav>a.kblt-review small{color:var(--gold)}
.kblt-nav>a.kblt-review b{color:var(--ink)}

/* 공통 페이지와 바로 이어질 때 빈 제목/기본 wrapper가 과도해 보이지 않도록 최소 보정 */
body:has(.kblt) #container_title{
  width:min(1180px,calc(100% - 40px));
  margin:18px auto 0;
  padding:0;
  border:0;
  color:#738187;
  font-size:11px;
  font-weight:700;
}
body:has(.kblt) #container_title span{
  display:block;
  padding:0;
}

/* 모바일: 별도 메뉴를 또 접지 않고 좌우 스크롤로 즉시 이동 */
@media(max-width:900px){
  .kblt-shell{width:calc(100% - 28px)}
  .kblt-context{
    align-items:flex-start;
    flex-direction:column;
    gap:4px;
  }
  .kblt-context>span{font-size:9px}
  .kblt-nav{
    display:flex;
    overflow-x:auto;
    overflow-y:hidden;
    border-left:1px solid var(--line);
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    scroll-snap-type:x proximity;
  }
  .kblt-nav::-webkit-scrollbar{display:none}
  .kblt-nav>a{
    flex:0 0 102px;
    scroll-snap-align:start;
  }
  body:has(.kblt) #container_title{width:calc(100% - 28px)}
}
@media(max-width:520px){
  .kblt-shell{width:calc(100% - 22px);padding:10px 0}
  .kblt-context{margin-bottom:8px}
  .kblt-context strong{font-size:14px}
  .kblt-context>span{display:none}
  .kblt-nav>a{
    flex-basis:92px;
    min-height:50px;
    padding:8px;
  }
  .kblt-nav b{font-size:9.5px}
  body:has(.kblt) #container_title{width:calc(100% - 22px)}
}

/* :has 미지원 브라우저에서도 내비 자체는 정상 동작 */