/*********************************************************/
/* 테마 관련 less(CSS Preprocessor) 변수
/*********************************************************/
/* 배경 색상 */
@bg-color:                                  #f3f5f6;

/* 시작메뉴 스타일 */
@startmenu-bg-color:                        none;
@startmenu-icon-color:                      #353535;
@startmenu-active-icon-color:               #fff;
@startmenu-box-shadow:                      none;
@startmenu-active-bg-color:                 #4387f8;

@landscape-startmenu-bg-color:              #4387f8;
@landscape-startmenu-icon-color:            #fff;
@landscape-startmenu-active-icon-color:     #fff;
@landscape-startmenu-box-shadow:            0 4px 11px rgba(0,0,0,0.3);
@landscape-startmenu-active-bg-color:       #4387f8;

/* 가로모드일때 컨트롤바 배경색 */
@landscape-control-bar-bg-color:            rgba(255, 255, 255, 1.0);

/* 상.하단 바 배경 색상 및 그림자 */
@bar-bg-color:                              #fff;
@bar-box-shadow:                            0 0 5px rgba(0,0,0,.2);

/* 가로모드 전환시 시작메뉴 버튼 */
@landscape-mode-start-menu-btn-bg-color:    #1b1b1b;
@landscape-mode-start-menu-btn-icon-color:  white;
/*********************************************************/

/* 전역 */
html, body { cursor: pointer; }

/* 배경 */
.toast {
  background-color: @bg-color; }

/* 상.하단 바*/
.navbar,
.controlbar {
  height: 44px;
  min-height: 44px;
  z-index: 5001; }

.navbar .translucent,
.controlbar  .translucent {
  background: @bar-bg-color;
  box-shadow: @bar-box-shadow; }
  
.bookzoom-activate .navbar,
.bookzoom-activate .controls {
  border: 0; }
.navbar .label,
.controlbar .label {
  display: none; }

/* 페이지 레이블 */
.navigate .btn.btn-pagelabel {
  width: 80px;
  margin-left: 10px;
  margin-right: 10px;
}
.navigate .btn.btn-pagelabel > .label-group {
  font-size: 13px; }

/* 검색 바*/
.searchbar {
  height: 44px; }
.searchbar .searchinput {
  padding: 10px 55px 10px 55px;
  font-size: 16px; }
.searchbar.has-search-result .searchinput {
    padding: 10px 100px 10px 55px; }

/* 버튼 */
.btn[command] {
  width: 44px;
}

.btn-toolbar .navigate .btn[command] .icon {
  padding: 2px; }

/* 시작 메뉴 버튼 */
.start-menu {
  width: 44px;
  height: 44px;
  padding: 0;
}
.start-menu .start-menu-toggle {
  background: @startmenu-bg-color;
  box-shadow: @startmenu-box-shadow;
}
.start-menu .start-menu-toggle > .svg-icon {
  fill: @startmenu-icon-color;
}

.modal-wrapper {
  overflow: hidden;
  -webkit-overflow-scrolling: auto;
}
/* 공유하기 */
.modal.popup-modal.popup-share-modal .modal-dialog {
  max-width: 320px; }
.popup-share-modal .btn-group.btn-share-group {
  padding-left: 12px;
  padding-right: 12px;
}
.popup-share-modal .btn-group.btn-share-group > .btn {
  width: 45px;
  height: 45px;
  padding-left: 0;
  padding-right: 0;
  margin: 7px;
  padding: 0; }
.popup-share-modal .btn-group.btn-share-group > .btn > span {
  display: none; }

.popup-share-modal .share-icon {
  width: 45px;
  height: 45px; }
html[lang="ko"] .popup-share-modal button[command="sendKakaotalk"] { display: block; }
.modal.popup-modal.popup-share-modal .modal-content .close {
  right: 5px; }

/* 모바일 일때 비활성화 */
.btn[command="toggleDoublePage"],
.btn[command="firstPage"],
.btn[command="lastPage"],
[command="fullscreen"],
[command="print"] {
  display: none; }

/* 북 컨테이터 */
.book-container {
  top: 50px;
  bottom: 50px; }

/* 줌툴바 */
.zoom-bar {
  top: 60px;

  -webkit-transform: none;
      -ms-transform: none;
          transform: none;

  .main-btn-group { display: none; }

  .mobile-btn-group {
    background: none;
    box-shadow: none;

    .btn {
      left: 50%;
      -webkit-transform: translate(-50%, 0);
        -moz-transition: translate(-50%, 0);
          -ms-transform: translate(-50%, 0);
              transform: translate(-50%, 0);

      font-size: 16px;
      width: 44px;
      height: 44px;
      padding: 6px 0;
      border-radius: 50%;
      cursor: pointer;
      box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
    }
  }
}

/* 목차리스트 */
.toast-toc {
  width: 320px;
  left: -320px;
}

/* 목차리스트 모바일 Bug fix */
.jstree-wholerowex {
  z-index: -1; }

/* 보관함 */ 
.toast-mystorage {
  width: 320px;
  left: -320px; }

.side-page-navigate-buttons {
  display: none; }
.side-page-navigate-buttons .btn {
  width: 32px;
  font-size: 18px;
}
/* 디바이스 대응 */
@media (min-width: 480px) {
  .btn[command="firstPage"],
  .btn[command="lastPage"] {
    display: block;
  }
}

@media (min-width: 768px) {
  .btn[command="toggleDoublePage"] {
    display: block;
  }
  .navigate .btn.btn-pagelabel > .label-group {
  font-size: 15px; }
}

/* 가로 모드 일때 */
@media (orientation: landscape) {
  .toast.landscape .start-menu .dropdown-menu {
    width: 410px; }
  .toast.landscape .start-menu [command="startmenu"] > .svg-icon {
    fill: @landscape-mode-start-menu-btn-icon-color; }

  .toast.landscape .start-menu {
    width: 50px;
    height: 50px;
    padding: 5px; }
  .toast.landscape .start-menu .start-menu-toggle {
    width: 100%;
    height: 100%;
    background: @landscape-startmenu-bg-color;
    box-shadow: @landscape-startmenu-box-shadow; }
  .toast.landscape .start-menu.open .start-menu-toggle,
  .toast.landscape .start-menu:active .start-menu-toggle {
    box-shadow: none; }
  .toast.landscape .start-menu .start-menu-toggle > .svg-icon {
    fill: @landscape-startmenu-icon-color; }

  .toast.landscape .book-container {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; }
  .toast.landscape.has-book-bg:not(.bookzoom-activate) .book-container {
    top: 10px;
    bottom: 10px; }
  .toast.landscape .navbar {
    top: -60px; }
  .toast.landscape .controlbar {
    bottom: -60px; }
  
  .toast.landscape .side-page-navigate-buttons {
    display: block; }

  .toast.landscape .zoom-bar {
    top: 10px;
  }
}

@media (orientation: landscape) and (min-width: 768px) {
  .toast.landscape .start-menu .dropdown-menu {
    width: 224px; }
  .toast.landscape .start-menu {
    width: 60px;
    height: 60px;
    padding: 10px; }
}