/* QURI 색 테마: tb.css(나뭇잎 교과서와 같은 바탕)의 색 변수를 QURI 색으로 바꾼다. BRAND.md 4절 */
:root {
  /* IBM Plex Mono에는 한글이 없다. 한글은 Pretendard로 그려 시스템 고정폭 글꼴의 빈 칸(□)을 막는다 */
  --f-mono: "IBM Plex Mono", "Pretendard Variable", Pretendard, ui-monospace, "SFMono-Regular", Menlo, monospace;
  --ink: #1a1d2e;
  --ink-2: #545869;
  --ink-3: #8a8d9b;
  --rule: #dadbe0;
  --grid: rgba(26, 29, 46, .055);
  --paper: #f5f5f2;
  --paper-2: #ecece7;
  --card: #fcfcfa;
  --leaf: #8c8ff0;
  --forest: #4b4fe0;
  --sprout: #c9cbf7;
  --qed: #f2b33d;
  --top-bg: rgba(245, 245, 242, .9);
  --right-bg: #edeefc;
  --hl: #fbe0a0;
  --memo-rule: #e0a92e;
}
[data-theme="dark"] {
  --ink: #e7e8ef;
  --ink-2: #b2b4c2;
  --ink-3: #868999;
  --rule: #33364a;
  --grid: rgba(231, 232, 239, .07);
  --paper: #12131c;
  --paper-2: #1c1e2a;
  --card: #1a1c27;
  --leaf: #7f83f2;
  --forest: #9ea1ff;
  --sprout: #6d70d8;
  --top-bg: rgba(18, 19, 28, .9);
  --raised: #232535;
  --right-bg: #222547;
  --hl: #6b5317;
  --night: #0b0c12;
}

/* 브랜드 이름: QURI는 굵게, 뒤의 설명은 가늘게 */
.brand { gap: 8px; }
.brand .q-name { font-weight: 800; letter-spacing: -.04em; font-size: 19px; }
.brand .q-sub { font-weight: 500; color: var(--ink-2); font-size: 13.5px; }
.brand-mark { color: var(--ink); }
.intro h1 em { font-family: inherit; font-style: normal; font-weight: inherit; color: var(--forest); }   /* 세리프 글꼴엔 한글이 없어 기울임이 가짜로 합성됨: 색으로만 강조 */

/* 성취기준 유형 표시 */
.ty { display: inline-block; padding: 1px 6px; font-size: 10.5px; line-height: 1.5; border: 1px solid currentColor; border-radius: 2px; white-space: nowrap; }
.ty[data-ty="개념"] { color: #4f7fd6; }
.ty[data-ty="계산"] { color: #c98a12; }
.ty[data-ty="증명"] { color: #6b5bc4; }
.ty[data-ty="모형"] { color: #2f9a8f; }
.ty[data-ty="적용"] { color: #c4553c; }
.ty[data-ty="실습"] { color: var(--forest); }
[data-theme="dark"] .ty[data-ty="개념"] { color: #7fa6ea; }
[data-theme="dark"] .ty[data-ty="계산"] { color: #e0aa3e; }
[data-theme="dark"] .ty[data-ty="증명"] { color: #a397ec; }
[data-theme="dark"] .ty[data-ty="모형"] { color: #5cc8bc; }
[data-theme="dark"] .ty[data-ty="적용"] { color: #e58a73; }


/* 상단바의 학과 칩(js/place.js): 좁은 화면에서는 부제와 덜 쓰는 링크를 감추고 칩을 줄인다 */
.place-chip { font-weight: 600; color: var(--ink); }
@media (max-width: 720px) {
  .top .brand .q-sub, .top .brand small, .top-right a[href="#how"], .top-right .u-hs { display: none; }
  .place-chip { display: inline-block; max-width: 10.5em; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
}

/* 학술 용어: 빌드가 넣은 영어형(.tm-en)과 한글형(.tm-ko) 가운데 하나만 보인다(tools/terms.py, js/core.js). 기본은 영어 */
.tm-ko { display: none; }
html[data-terms="ko"] .tm-ko { display: inline; }
html[data-terms="ko"] .tm-en { display: none; }
.tm-en[title] { text-decoration: underline dotted color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; cursor: help; }
.terms-btn {
  height: 28px; margin-left: 14px; padding: 0 8px; vertical-align: middle; font-size: 11.5px;
  border: 1px solid var(--rule); border-radius: 2px; background: none; color: inherit; cursor: pointer;
}
.terms-btn + .theme-btn { margin-left: 6px; }
.terms-btn:hover { border-color: currentColor; }
/* 좁은 화면(휴대폰): 상단바가 한 줄(nowrap)이라 용어 버튼이 더해지면 테마 버튼이 화면 밖으로 나갔다. 간격과 버튼을 줄인다 */
@media (max-width: 480px) {
  .top-right a + a { margin-left: 9px; }
  .terms-btn { margin-left: 8px; padding: 0 5px; font-size: 10.5px; }
  .terms-btn + .theme-btn { margin-left: 4px; }
  .terms-btn .lb-long { display: none; }
  .place-chip { max-width: 7.5em; }
}