/* 분야 틀: 머리(분야 이름·주제 제목), 탭 줄, 도구 단추, 바닥글. 모든 주제 페이지가 쓴다.
   주제 페이지마다 다른 CSS(예: Affect 주제의 원래 Mood Atlas 스타일)와 부딪치지 않게 클래스 이름은 fs- 로 시작한다. */
.fs-wrap { max-width: 1040px; margin: 0 auto; }
.fs-tools { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; padding-top: 14px; }
.fs-tools button, .fs-tools a {
  font: 500 12.5px/1 var(--body, system-ui); padding: 7px 10px; border-radius: 6px; cursor: pointer; text-decoration: none;
  border: 1px solid var(--fs-line, var(--line)); background: transparent; color: var(--fs-mute, var(--mute));
}
.fs-tools button:hover, .fs-tools a:hover { color: var(--fs-fg, var(--fg)); }
.fs-head { padding-block: 18px 14px; display: grid; gap: 8px; }
.fs-field { font: 500 12px/1.4 var(--mono, monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--fs-accent, var(--a2)); text-decoration: none; width: fit-content; }
.fs-field:hover { text-decoration: underline; }
.fs-head h1 { margin: 0; }
.fs-head h1 small { display: block; font: 400 15px/1.4 var(--body, system-ui); color: var(--fs-mute, var(--mute)); margin-top: 6px; letter-spacing: 0; }
html[lang="en"] .fs-head h1 small { display: none; }
.fs-lede { color: var(--fs-mute, var(--mute)); max-width: 700px; margin: 0; }
.fs-tabs {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--fs-bg, var(--bg));
  border-bottom: 1px solid var(--fs-line, var(--line));
  margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px)));
  padding-inline: max(16px, env(safe-area-inset-left, 0px));
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--fs-bg, var(--bg)); }
.fs-tabs .fs-wrap { display: flex; overflow-x: auto; scrollbar-width: thin; }
.fs-tabs button {
  all: unset; box-sizing: border-box; cursor: pointer; flex: 0 0 auto; padding: 12px 14px 10px; display: grid; gap: 1px;
  font: 600 14px/1.25 var(--body, system-ui); color: var(--fs-mute, var(--mute)); border-bottom: 3px solid transparent;
}
.fs-tabs button small { font-weight: 400; font-size: 11px; }
html[lang="en"] .fs-tabs button small { display: none; }
.fs-tabs button[aria-selected="true"] { color: var(--fs-fg, var(--fg)); border-bottom-color: var(--fs-accent2, var(--a1)); }
.fs-tabs button:focus-visible { outline: 2px solid var(--fs-accent, var(--a2)); outline-offset: -2px; }
:root[data-big="1"] .fs-tabs button { font-size: 17px; }
.fs-intro { padding-top: 18px; }
.fs-anchor { opacity: 0; margin-left: .35em; text-decoration: none; font: 500 .6em var(--mono, monospace); color: var(--fs-mute, var(--mute)); cursor: pointer; vertical-align: middle; }
h2:hover .fs-anchor, h3:hover .fs-anchor, .fs-anchor:focus { opacity: 1; }
.fs-pager { display: flex; justify-content: space-between; gap: 8px; padding-block: 8px 28px; }
.fs-pager button { font-size: 13px; max-width: 48%; }
.fs-pager button[disabled] { visibility: hidden; }
.fs-disclaim { color: var(--fs-mute, var(--mute)); font-size: 13px; padding-block: 22px 0; border-top: 1px solid var(--fs-line, var(--line)); margin: 0; }
footer.fs-brand {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding-block: 22px 32px; padding-inline: 0;
  font-size: 12px; color: var(--fs-mute, var(--mute)); border: 0; justify-content: flex-start;
}
footer.fs-brand img { height: 20px; width: auto; display: block; }
footer.fs-brand a { color: var(--fs-mute, var(--mute)); }
footer.fs-brand .wm-dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) footer.fs-brand .wm-light { display: none; } :root:not([data-theme="light"]) footer.fs-brand .wm-dark { display: block; } }
:root[data-theme="dark"] footer.fs-brand .wm-light { display: none; }
:root[data-theme="dark"] footer.fs-brand .wm-dark { display: block; }
:root[data-single-theme="light"] footer.fs-brand .wm-light { display: block !important; }
:root[data-single-theme="light"] footer.fs-brand .wm-dark { display: none !important; }
.fs-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--fs-fg, var(--fg)); color: var(--fs-bg, var(--bg)); padding: 7px 12px; border-radius: 6px; font: 13px var(--body, system-ui); opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 40; }
.fs-toast.on { opacity: 1; }
.fs-park { display: none; }
@media (max-width: 420px) { footer.fs-brand img { height: 18px; } }
@media print {
  .fs-tabs, .fs-tools, .fs-pager, .fs-anchor { display: none !important; }
  section.ftab { display: block !important; break-before: page; }
  section.ftab:first-of-type { break-before: auto; }
}