:root { color-scheme: light dark; }
body { max-width: 760px; margin: 0 auto; padding: 1.5rem 1rem 4rem;
       font-family: -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; line-height: 1.7; }
body::after { content: ""; display: block; clear: both; }
input, button { font: inherit; }
h1 { font-family: Georgia, 'Nanum Myeongjo', serif; font-weight: 400;
     border-bottom: 1px solid #8886; padding-bottom: .4rem; margin-bottom: .4rem; }
h2 { margin-top: 2rem; }
a.wl { text-decoration: none; border-bottom: 1px solid currentColor; }
a.wl.missing { color: #b04a4a; color: light-dark(#b04a4a, #e08a8a); }
.katex-display { overflow-x: auto; overflow-y: hidden; padding: .2em 0; }
table { border-collapse: collapse; max-width: 100%; display: block; overflow-x: auto; }
th, td { border: 1px solid #8885; padding: .3em .8em; }
.prereq, blockquote, details, .fplot { display: flow-root; }
header { border-bottom: 2px solid #8884; margin-bottom: 1.5rem; padding-bottom: .5rem; }
header a { text-decoration: none; font-weight: 700; }
.meta { font-size: .85rem; opacity: .7; margin: .3rem 0 1rem; }
.area-tag { display: inline-block; padding: .25em .7em; border: 1px solid #8886; border-radius: 1em; font-size: .8rem; }
.chip { display: inline-block; border: 1px solid #8885; border-radius: 1em; padding: .15em .7em; text-decoration: none; }
.snippet { font-size: .9rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
ul.index { columns: 2; }
@media (max-width: 600px) {
  body { padding: 1rem .8rem 3rem; }
  ul.index { columns: 1; }
  header { flex-wrap: wrap; }
  header form { margin-left: 0; width: 100%; }
  header input { width: 100%; box-sizing: border-box; }
}
blockquote { border-left: 3px solid #8886; margin-left: 0; padding-left: 1em; opacity: .85; }
.prereq { border: 1px solid #8885; border-radius: 8px; padding: .6rem .9rem;
  margin: 1rem 0; font-size: .92rem; background: #8881; }
.figurebox { float: right; width: 190px; margin: 0 0 1rem 1.2rem; padding: .6rem;
  border: 1px solid #8885; border-radius: 8px; background: #8881;
  font-size: .8rem; text-align: center; }
/* 로드 전 공간을 미리 예약해 레이아웃 밀림(CLS) 방지: 4:5 비율 박스, 얼굴이 잘리지 않게 상단 정렬 */
.figurebox img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  object-position: center top; border-radius: 4px; background: #8882; }
.figurebox .src { display: block; opacity: .65; margin-top: .3rem; }
.fplot { background: #fff; border: 1px solid #8885; border-radius: 8px;
  margin: .2rem 0 1rem; overflow: hidden; max-width: 100%; }
.fplot svg { max-width: 100%; height: auto; display: block; }
/* 플롯은 흰 배경 고정이므로 눈금·축 글자는 어두운 색으로 강제 (다크 테마에서 흰 글자 상속 방지) */
.fplot text { fill: #444 !important; }
.fplot .domain, .fplot .tick line { stroke: #aaa !important; }
.fplot-legend { margin-top: 1rem; font-size: .85rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.fplot-legend span::before { content: '━ '; font-weight: 700; }
details { border: 1px solid #8885; border-radius: 8px; padding: .5rem .9rem; margin: .8rem 0; }
details summary { cursor: pointer; font-weight: 600; opacity: .8; }
details[open] summary { margin-bottom: .4rem; }
@media (max-width: 600px) {
  .figurebox { float: none; width: auto; max-width: 320px; margin: 1rem auto; box-sizing: border-box; }
}