/*
 * Geol Diary - layout
 * BOOTSTRA.386 (DOS/EGA) 팔레트 위에 얹는 2단 문서형 레이아웃.
 */

/*
 * 한글 글리프 보충.
 *
 * BOOTSTRA.386 이 쓰는 Px437_IBM_EGA8 은 코드페이지 437 폰트라 한글이 한 글자도 없다.
 * 그대로 두면 한글만 시스템 폰트(맑은 고딕 등)로 폴백돼서 영문/한글이 따로 논다.
 *
 * 그래서 bootstrap.css 가 선언한 것과 '같은 이름'인 'DOS' 패밀리에
 * 한글 영역만 담당하는 face 를 하나 더 얹는다. unicode-range 로 범위를 갈라두면
 *   영문/기호 -> Px437_IBM_EGA8 (bootstrap.css 의 face)
 *   한글      -> Neo둥근모      (아래 face)
 * 로 글자 단위 분배가 되므로, 폰트를 지정하는 CSS 규칙은 하나도 건드릴 필요가 없다.
 *
 * 주의: bootstrap.css 의 Px437 face 는 unicode-range 가 없어 전 범위를 덮는다.
 *       같은 범위가 겹칠 때는 '나중에 선언된' face 가 이기므로,
 *       이 파일이 bootstrap.css 뒤에 로드돼야 한글이 Neo둥근모로 잡힌다.
 */
@font-face {
  font-family: 'DOS';
  src: url('https://cdn.jsdelivr.net/gh/neodgm/neodgm-webfont@1.601/neodgm/neodgm.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/gh/neodgm/neodgm-webfont@1.601/neodgm/neodgm.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+1100-11FF,   /* 한글 자모 */
    U+3000-303F,   /* CJK 문장부호 (전각 괄호 등) */
    U+3130-318F,   /* 한글 호환 자모 */
    U+A960-A97F,   /* 한글 자모 확장-A */
    U+AC00-D7A3,   /* 한글 음절 */
    U+D7B0-D7FF,   /* 한글 자모 확장-B */
    U+FF00-FFEF;   /* 전각 영문/기호 */
}

/* 본문용 명조체. 여기서도 영문은 Px437 이 맡도록 'DOS' 를 앞에 둔다. */
@font-face {
  font-family: 'DOSMyungjo';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_eight@1.0/DOSMyungjo.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --dos-bg: #0000aa;
  --dos-fg: #aaaaaa;
  --dos-panel: #aaaaaa;
  --dos-panel-fg: #000000;
  --dos-white: #ffffff;
  --dos-accent: #ffff55;
  --header-h: 46px;
  --gutter: 24px;
}

.dos-myungjo {
  font-family: 'DOSMyungjo', 'DOS', monospace;
}

/* bootstrap 기본 line-height 가 14px 고정이라 본문 글자가 겹친다. 읽는 영역만 풀어준다. */
.readable,
.readable p,
.readable li,
.readable td,
.readable th {
  line-height: 1.6;
}

.readable p {
  margin-bottom: 1rem;
}

.readable h1,
.readable h2,
.readable h3,
.readable h4 {
  line-height: 1.3;
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
}

.readable > :first-child {
  margin-top: 0;
}

.readable img {
  max-width: 100%;
  height: auto;
}

.readable pre,
.readable table {
  max-width: 100%;
  overflow-x: auto;
}

/* ---------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  padding: 0.25rem 1rem;
}

.site-header .navbar-brand {
  margin-right: 1.5rem;
}

/* ---------------------------------------------------------- layout */

.site-main {
  padding: var(--gutter) 0 4rem;
}

.layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--gutter);
  align-items: start;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* ---------------------------------------------------------- sidebar */

.sidebar {
  position: sticky;
  top: calc(var(--header-h) + var(--gutter));
  max-height: calc(100vh - var(--header-h) - var(--gutter) * 2);
  overflow-y: auto;
  min-width: 0;
}

.sidebar .card {
  margin-bottom: var(--gutter);
}

.sidebar .card-img-top {
  display: block;
  width: 100%;
}

.sidebar-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--dos-white);
  border-bottom: 1px solid var(--dos-fg);
  padding-bottom: 0.35rem;
  margin-bottom: 0.5rem;
}

/* ---------------------------------------------------------- index tree */

.index-tree,
.index-tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.index-tree ul {
  margin-left: 0.75rem;
  border-left: 1px solid rgba(170, 170, 170, 0.4);
}

.index-tree a,
.index-tree .index-branch,
.index-tree .index-empty {
  display: block;
  padding: 0.35rem 0.5rem;
  line-height: 1.4;
  color: var(--dos-fg);
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
}

.index-tree a:hover,
.index-tree .index-branch:hover {
  color: var(--dos-white);
  background: transparent;
  border-color: var(--dos-fg);
  text-decoration: none;
}

/* DOS 선택 하이라이트: 반전 */
.index-tree a.is-active {
  color: var(--dos-panel-fg);
  background: var(--dos-panel);
  border-color: var(--dos-panel);
}

.index-tree ul a {
  padding-left: 1rem;
}

.index-tree .index-empty {
  cursor: default;
}

.index-branch {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.index-branch::after {
  content: '-';
  color: var(--dos-accent);
  flex: none;
}

.index-branch.is-collapsed::after {
  content: '+';
}

.index-branch.is-collapsed + ul {
  display: none;
}

/* ---------------------------------------------------------- content */

.content {
  min-width: 0;
}

.content-title {
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--dos-white);
  border-bottom: 1px solid var(--dos-fg);
  padding-bottom: 0.35rem;
  margin-bottom: var(--gutter);
}

.content-body {
  min-height: 40vh;
}

/* posts/*.html 들이 각자 .container 로 감싸여 있어 본문 안에서 폭이 다시 좁아진다. */
.content-body > .container,
.content-body > .container-fluid {
  max-width: 100%;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}

.content-status {
  color: var(--dos-accent);
}

/* ---------------------------------------------------------- responsive */

@media (max-width: 959.98px) {
  .layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .sidebar .card {
    max-width: 320px;
  }

  .sidebar-toggle {
    display: inline-block;
  }

  .sidebar-title.is-collapsed + .sidebar-nav {
    display: none;
  }
}

@media (min-width: 960px) {
  .sidebar-toggle {
    display: none;
  }
}