/* =========================================================
    우리반 백과 - style.css
    4차시 최종본
    ========================================================= */


/* =========================================================
   기본 색상 변수
   ========================================================= */

:root {

  /* 나만의 기본 색상 */
  --bg: #f4f7ff;
  --text: #20243a;
  --sub-text: #626a80;

  --link: #4f6edb;
  --link-visited: #8056b8;

  --border: #aeb8d0;
  --line: #d8deed;

  --box-bg: #ffffff;
  --box-head: #dbe5ff;


  /* 글자 크기 */
  --font-scale: 1;


  /* 화면 최대 너비 */
  --content-max: 1200px;
}


/* =========================================================
   글자 크기
   ========================================================= */

html[data-fontsize="small"] {
  --font-scale: 0.875;
}

html[data-fontsize="large"] {
  --font-scale: 1.25;
}


/* =========================================================
   화면 너비
   ========================================================= */

html[data-width="wide"] {
  --content-max: 100%;
}


/* =========================================================
   다크 모드
   ========================================================= */

html[data-theme="dark"] {

  --bg: #101522;
  --text: #edf1ff;
  --sub-text: #aab3ca;

  --link: #8fb0ff;
  --link-visited: #c9a7ee;

  --border: #4f5a73;
  --line: #30384b;

  --box-bg: #1a2030;
  --box-head: #293752;
}


/* =========================================================
   자동 다크 모드
   ========================================================= */

@media (prefers-color-scheme: dark) {

  html[data-theme="auto"] {

    --bg: #101522;
    --text: #edf1ff;
    --sub-text: #aab3ca;

    --link: #8fb0ff;
    --link-visited: #c9a7ee;

    --border: #4f5a73;
    --line: #30384b;

    --box-bg: #1a2030;
    --box-head: #293752;
  }

}


/* =========================================================
   HTML 기본
   ========================================================= */

html {

  font-size: calc(16px * var(--font-scale));

  scroll-behavior: smooth;
}


/* =========================================================
   BODY
   ========================================================= */

body {

  margin: 0;

  background: var(--bg);
  color: var(--text);

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Noto Sans KR",
    Arial,
    sans-serif;

  line-height: 1.8;

  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}


/* =========================================================
   링크
   ========================================================= */

a {

  color: var(--link);

  text-decoration: none;
}

a:hover {

  text-decoration: underline;
}

a:visited {

  color: var(--link-visited);
}


/* =========================================================
   상단 머리글
   ========================================================= */

.topbar {

  display: flex;

  align-items: center;

  height: 64px;

  padding: 0 1.5rem;

  border-bottom: 1px solid var(--line);

  background: var(--box-bg);
}


/* 로고 */

.logo {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 40px;
  height: 40px;

  margin-right: 0.8rem;

  background: #5b75d6;

  color: white;

  border-radius: 8px;

  font-size: 1.3rem;

  font-weight: bold;
}


/* 사이트 이름 */

.sitename {

  display: flex;

  flex-direction: column;
}

.sitename strong {

  font-size: 1rem;
}

.sitename span {

  color: var(--sub-text);

  font-size: 0.75rem;
}


/* =========================================================
   전체 3분할
   ========================================================= */

.wrap {

  max-width: var(--content-max);

  margin: 0 auto;

  padding: 2rem 1.5rem;

  display: grid;

  grid-template-columns:
    180px
    minmax(0, 1fr)
    200px;

  gap: 2rem;

  align-items: start;
}


/* =========================================================
   왼쪽 목차
   ========================================================= */

.toc {

  position: sticky;

  top: 1rem;
}


.toc h2 {

  margin: 0 0 0.8rem;

  padding-bottom: 0.4rem;

  border-bottom: 1px solid var(--line);

  font-size: 0.875rem;
}


.toc ul {

  margin: 0;

  padding: 0;

  list-style: none;
}


.toc li {

  margin-bottom: 0.4rem;
}


.toc a {

  font-size: 0.875rem;
}


/* =========================================================
   가운데 본문
   ========================================================= */

.content {

  min-width: 0;
}


.content h1 {

  margin: 0 0 0.2rem;

  color: var(--text);

  font-size: 2.1rem;

  line-height: 1.3;
}


.subtitle {

  margin-top: 0;

  color: var(--sub-text);

  font-size: 0.875rem;
}


.content section {

  margin-top: 2.5rem;
}


.content section h2 {

  margin-bottom: 0.8rem;

  padding-bottom: 0.35rem;

  border-bottom: 2px solid var(--line);

  font-size: 1.35rem;
}


.content p {

  font-size: 1rem;
}


.content li {

  font-size: 1rem;
}


/* =========================================================
   인물 정보 상자
   ========================================================= */

.infobox {

  float: right;

  width: 260px;

  margin: 0 0 1rem 1.5rem;

  overflow: hidden;

  border: 1px solid var(--border);

  border-radius: 8px;

  background: var(--box-bg);

  box-shadow: 0 3px 10px rgba(50, 70, 110, 0.08);
}


.infobox-title {

  padding: 0.8rem;

  background: var(--box-head);

  text-align: center;

  font-size: 1.1rem;

  font-weight: bold;
}


.infobox img {

  display: block;

  width: 100%;

  height: auto;
}


.infobox table {

  width: 100%;

  border-collapse: collapse;

  font-size: 0.8125rem;
}


.infobox caption {

  padding: 0.5rem;

  text-align: left;

  font-weight: bold;
}


.infobox th,
.infobox td {

  padding: 0.5rem;

  border-top: 1px solid var(--line);

  vertical-align: top;
}


.infobox th {

  width: 30%;

  background: var(--box-head);

  text-align: left;
}


/* =========================================================
   오른쪽 외관 패널
   ========================================================= */

.appearance {

  position: sticky;

  top: 1rem;

  padding: 1rem;

  border: 1px solid var(--line);

  border-radius: 8px;

  background: var(--box-bg);
}


.appearance h2 {

  margin: 0 0 1rem;

  padding-bottom: 0.5rem;

  border-bottom: 1px solid var(--line);

  font-size: 0.9rem;
}


/* 패널 */

.panel-group {

  border: 0;

  margin: 0 0 1.3rem;

  padding: 0;
}


.panel-group legend {

  padding: 0;

  margin-bottom: 0.35rem;

  color: var(--sub-text);

  font-size: 0.75rem;

  font-weight: bold;
}


.panel-group label {

  display: flex;

  align-items: center;

  gap: 0.45rem;

  padding: 0.3rem 0;

  font-size: 0.8125rem;

  cursor: pointer;
}


.panel-group input {

  accent-color: #5b75d6;
}


/* =========================================================
   각주
   ========================================================= */

.footnote {

  margin-top: 2rem;

  padding-top: 1rem;

  border-top: 1px solid var(--line);

  color: var(--sub-text);

  font-size: 0.75rem !important;
}


/* =========================================================
   모바일
   ========================================================= */

@media (max-width: 900px) {

  .wrap {

    grid-template-columns: 1fr;

    gap: 1.5rem;
  }


  .toc,
  .appearance {

    position: static;
  }


  .appearance {

    order: 3;
  }


  .infobox {

    float: none;

    width: 100%;

    margin: 0 0 1.5rem;
  }

}


/* =========================================================
   작은 모바일
   ========================================================= */

@media (max-width: 600px) {

  .topbar {

    padding: 0 1rem;
  }


  .wrap {

    padding: 1rem;
  }


  .content h1 {

    font-size: 1.7rem;
  }

}


/* =========================================================
   인쇄용 스타일
   Ctrl + P로 인쇄할 때 적용
   ========================================================= */

@media print {

  .toc,
  .appearance {

    display: none;
  }


  .wrap {

    max-width: 100%;

    display: block;

    padding: 0;
  }


  .topbar {

    border-bottom: 1px solid #000;

    background: white;

    color: black;
  }


  .content {

    width: 100%;
  }


  .infobox {

    box-shadow: none;
  }

}