/* 노트리 공통 모양 — 메인 색 #46353a · 나이테. 화면 규칙 S1~S8 (.claude/rules/screen.md) */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

:root {
  --paper:#f5f3f1;   /* 물푸레나무 — 회색빛 바탕 */
  --sheet:#ffffff;   /* 칸 · 카드 */
  --ink:#2a2023;     /* 글자 */
  --soft:#76696d;    /* 보조 글자 */
  --line:#e4dcde;    /* 선 */
  --walnut:#46353a;  /* 메인 색 rgb(70,53,58) — 위 막대 · 로그인 판 (사용자 지정 2026-11-11) */
  --on-walnut:#f4ecee;
  --bark:#46353a;    /* 버튼 · 링크 · 초점도 메인 색 */
  --on-bark:#ffffff;
  --sap:#ece4e6;     /* 메인 색의 아주 연한 톤 — 초점 테두리 · 알림 바탕 */
  --err:#a8322a; --err-bg:#f9e7e5;
  --radius:10px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#161214; --sheet:#201a1c; --ink:#ede4e6; --soft:#a8999d; --line:#362c2f;
    --walnut:#2e2427; --on-walnut:#efe6e8;
    --bark:#c7aab2; --on-bark:#2a1f22;
    --sap:#3a2e31; --err:#f19a90; --err-bg:#3a1f1c;
    color-scheme: dark;
  }
}

* { box-sizing:border-box; }
[hidden] { display:none !important; }   /* display:flex 같은 규칙이 hidden 속성을 이기지 않게 */
html { -webkit-text-size-adjust:100%; word-break:keep-all; }   /* 한국어는 단어(어절) 단위로 줄바꿈 */
body {
  margin:0; min-height:100dvh;                                   /* S7 */
  background:var(--paper); color:var(--ink);
  font:16px/1.65 "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", sans-serif;
}
a { color:var(--bark); }
:focus-visible { outline:3px solid var(--bark); outline-offset:2px; }
h1, h2 { letter-spacing:-.02em; line-height:1.2; }

.mark { display:block; flex:none; }

/* 버튼 · 입력칸: 44px 이상(S3), 글자 16px 이상(S4) */
button, input { font:inherit; color:inherit; }
button {
  min-height:44px; padding:0 16px; border-radius:var(--radius);
  border:1px solid var(--line); background:var(--sheet); cursor:pointer; white-space:nowrap;   /* S8 */
}
button.primary { background:var(--bark); color:var(--on-bark); border-color:var(--bark); font-weight:600; }
input[type=text], input[type=password], select {
  width:100%; min-height:48px; padding:0 14px; font-size:17px;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--sheet);
}
input[type=text]:focus, input[type=password]:focus, select:focus { border-color:var(--bark); outline:none; box-shadow:0 0 0 3px var(--sap); }
@media (hover:hover) {                                           /* S5 — 오버는 꾸밈만 */
  button:hover { border-color:var(--bark); }
  button.primary:hover { filter:brightness(1.1); }
}

.flash { margin:0 0 16px; padding:10px 14px; border-radius:var(--radius); font-size:15px; }
.flash.err { background:var(--err-bg); color:var(--err); }
.flash.ok { background:var(--sap); color:var(--ink); }

/* ── 로그인: 폰 · iPad 세로 = 위 나무 띠 + 아래 입력 ── */
.auth-band {
  background:var(--walnut); color:var(--on-walnut);
  padding:calc(36px + env(safe-area-inset-top)) calc(24px + env(safe-area-inset-right)) 32px calc(24px + env(safe-area-inset-left));   /* S6 */
  /* 넓은 세로 화면(iPad 세로)에서 띠 안 글자를 아래 입력칸(가운데 420px)과 같은 세로줄에 맞춘다 */
  padding-left:max(calc(24px + env(safe-area-inset-left)), calc((100% - 420px) / 2 + 24px));
}
.auth-band .mark { width:64px; height:64px; margin-bottom:18px; }
.auth-band h1 { margin:0; font-size:32px; font-weight:800; }
.auth-band p { margin:6px 0 0; opacity:.82; }
.auth-form {
  width:100%; max-width:420px; margin:0 auto;
  padding:28px calc(24px + env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) calc(24px + env(safe-area-inset-left));
}
.auth-form h2 { margin:0 0 18px; font-size:22px; }
.auth-form form { display:grid; gap:6px; }
.auth-form label { font-size:15px; font-weight:600; margin-top:10px; }
.auth-form .keep { display:flex; align-items:center; gap:10px; min-height:44px; font-weight:400; color:var(--soft); cursor:pointer; }   /* 누르는 곳은 44px 높이의 label 전체 */
.auth-form .keep input { width:22px; height:22px; margin:0; font-size:16px; accent-color:var(--bark); }
.auth-form button.primary { margin-top:10px; min-height:50px; font-size:17px; }

/* 넓은 화면 (iPad 가로 · PC): 왼쪽 나무 판 | 오른쪽 입력 */
@media (min-width:900px) {
  .auth-page { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .auth-band { display:flex; flex-direction:column; justify-content:center; padding:48px 8vw; }
  .auth-band .mark { width:120px; height:120px; margin-bottom:28px; }
  .auth-band h1 { font-size:44px; }
  .auth-form { align-self:center; }
}

/* ── 위 막대 = 책장 윗판 ── */
.topbar {
  display:flex; align-items:center; gap:12px;
  padding:calc(6px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) 6px calc(16px + env(safe-area-inset-left));   /* S6 */
  background:var(--walnut); color:var(--on-walnut);
}
.topbar .brand { display:flex; align-items:center; gap:10px; min-height:44px; color:inherit; text-decoration:none; font-weight:700; font-size:18px; white-space:nowrap; }
.topbar .brand .mark { width:30px; height:30px; }
.topbar form { margin-left:auto; }
.topbar .menu { display:flex; gap:2px; margin-left:8px; flex:1 1 auto; min-width:0; }
.topbar .menu a { display:flex; align-items:center; min-height:44px; padding:0 12px; border-radius:8px; color:inherit; text-decoration:none; opacity:.85; white-space:nowrap; }
@media (hover:hover) { .topbar .menu a:hover { opacity:1; background:rgba(255,255,255,.1); } }
.topbar button { border-color:transparent; background:none; color:inherit; opacity:.85; }
.topbar .find { display:none; flex:1 1 auto; max-width:340px; margin-left:auto; }
.topbar .menu .set-link { margin-left:auto; }
.topbar .find input { width:100%; min-height:40px; padding:0 12px; font-size:16px; border-radius:8px; border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08); color:inherit; }
.topbar .find input::placeholder { color:inherit; opacity:.6; }
@media (min-width:810px) {
  .topbar .find { display:block; order:2; }
  .topbar .menu { display:contents; }   /* 넓으면 메뉴 · 검색 칸 · 설정을 한 줄에: 설정은 맨 끝 */
  .topbar .menu a { order:1; }
  .topbar .menu .set-link { order:3; margin-left:12px; }
  .topbar .find-link { display:none !important; }
}
/* 좁으면 이름 글자는 빼고 그루터기만 — 메뉴 넷 + 로그아웃이 393px 에 들어가게 */
@media (max-width:480px) {
  .topbar { gap:6px; }
  .topbar .brand { font-size:0; gap:0; }
  .topbar .menu { margin-left:0; }
  .topbar .menu a { padding:0 9px; }
}
@media (hover:hover) { .topbar button:hover { opacity:1; border-color:rgba(255,255,255,.35); } }

.page {
  max-width:1080px; margin:0 auto;
  padding:28px calc(20px + env(safe-area-inset-right)) calc(48px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));
}
.page h1 { margin:0 0 20px; font-size:26px; }

/* 빈 서재 = 아무것도 꽂히지 않은 선반 (아래 두꺼운 선은 선반판) */
.empty {
  margin:0; padding:44px 24px 40px; text-align:center; color:var(--soft);
  background:var(--sheet); border-radius:var(--radius) var(--radius) 0 0;
  border-bottom:8px solid var(--walnut);
}
.empty b { display:block; color:var(--ink); font-size:18px; margin-bottom:4px; }

@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }

/* ── 다크 고정 (읽기 화면 Aa 에서 '어둡게'를 고르면 html[data-theme=dark]) ── */
:root[data-theme="dark"] {
  --paper:#161214; --sheet:#201a1c; --ink:#ede4e6; --soft:#a8999d; --line:#362c2f;
  --walnut:#2e2427; --on-walnut:#efe6e8;
  --bark:#c7aab2; --on-bark:#2a1f22;
  --sap:#3a2e31; --err:#f19a90; --err-bg:#3a1f1c;
  color-scheme: dark;
}

/* ── 서재 ── */
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 16px; border-radius:var(--radius);
  border:1px solid var(--line); background:var(--sheet); font-weight:600; cursor:pointer; white-space:nowrap; list-style:none; }
.btn.primary { background:var(--bark); color:var(--on-bark); border-color:var(--bark); }
summary::-webkit-details-marker { display:none; }
input[type=file] { width:100%; min-height:48px; padding:10px 0; font-size:16px; }
button.danger { color:var(--err); }

.shelf-head { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:20px; }
.shelf-head h1 { margin:6px 0 0; }
.upload { flex:1 1 100%; max-width:100%; }
.upload > summary { float:right; margin-top:-56px; }
.upload[open] > summary { opacity:.7; }
.sheet-form { display:grid; gap:10px; margin-top:8px; padding:18px; background:var(--sheet); border:1px solid var(--line); border-radius:var(--radius); }
.sheet-form label, .tools label { display:grid; gap:4px; font-size:15px; font-weight:600; }
.sheet-form small, .tools small { font-weight:400; color:var(--soft); font-size:14px; }
.sheet-form button { justify-self:start; }

.shelf { margin-top:28px; }
.shelf h2 { margin:0 0 12px; font-size:19px; }
/* 책장 = 책 칸들 + 아래 선반판 */
.books { list-style:none; margin:0; padding:0 0 14px; display:grid; gap:16px 14px;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); border-bottom:8px solid var(--walnut); align-items:start; }
.book { min-width:0; }
.cover { display:flex; align-items:flex-end; aspect-ratio:3/4; padding:14px 12px 14px 18px; border-radius:4px 8px 8px 4px;
  background:var(--cover); color:#f6eff0; text-decoration:none; font-weight:700; font-size:16px; line-height:1.35;
  box-shadow:inset 6px 0 0 rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.12); overflow-wrap:anywhere; }   /* 왼쪽 짙은 띠 = 책등 */
.cover span { display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; }
.meta { margin-top:8px; font-size:13px; color:var(--soft); }
.bar { height:4px; border-radius:2px; background:var(--line); overflow:hidden; margin-bottom:4px; }
.bar i { display:block; height:100%; background:var(--bark); }
.tools > summary { display:flex; align-items:center; min-height:44px; font-size:14px; color:var(--soft); cursor:pointer; list-style:none; }
.tools > summary::before { content:"⋯"; margin-right:6px; font-size:18px; }
/* 관리를 열면 그 책이 한 줄을 다 쓴다: 왼쪽 표지 · 오른쪽 폼 */
.book:has(.tools[open]) { grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,150px) minmax(0,1fr); gap:0 16px; align-items:start; }
.book:has(.tools[open]) .tools { grid-column:2; grid-row:1 / span 3; }
.tools form { display:grid; gap:6px; padding:10px 0; border-top:1px solid var(--line); }
.tools form button { justify-self:start; }
/* 책장 고르기 — "새 책장 만들기…" 를 고를 때만 이름 칸이 열린다 */
.shelf-pick { display:grid; gap:10px; }
.shelf-pick select { color:inherit; }
.shelf-pick .new-shelf { display:none; }
.shelf-pick:has(option[value="__new"]:checked) .new-shelf { display:grid; }
@media (hover:hover) { .cover:hover { filter:brightness(1.08); } }

/* 서재 카드의 학습 진도 막대 (학습함 이상 = 파랑, 그 위에 완숙 = 초록) */
.study-bar { position:relative; height:5px; margin-top:6px; border-radius:3px; background:var(--line); overflow:hidden; }
.study-bar i { position:absolute; left:0; top:0; bottom:0; border-radius:3px; }
.study-bar .learned { background:#3d7dd8; }
.study-bar .mastered { background:#2f9a4f; }
.map-link { display:flex; align-items:center; min-height:44px; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.study-text { display:block; margin-top:2px; font-size:13px; color:var(--soft); white-space:nowrap; }

/* ── 시험 (exam/list · exam/take) ── */
.exam-form fieldset { margin:0; padding:0; border:0; }
.exam-form legend { margin-bottom:6px; font-size:15px; font-weight:600; }
.seg-group label { display:flex; align-items:center; gap:10px; min-height:44px; font-weight:400; }
.seg-group input, .exam-form .keep input, .pick-tree input { width:22px; height:22px; margin:0; font-size:16px; accent-color:var(--bark); flex:none; }   /* 누르기 대상은 44px label 전체 */
a.btn { text-decoration:none; }
.seg-group small { color:var(--soft); font-size:13px; }
.seg-group.count { display:flex; gap:16px; }
.seg-group.count legend { width:100%; }
.exam-form .keep { display:flex; align-items:center; gap:10px; min-height:44px; font-weight:400; }
.pick-tree { max-height:50dvh; overflow:auto; border:1px solid var(--line); border-radius:var(--radius); padding:6px 10px; }
.pick-tree summary { min-height:40px; display:flex; align-items:center; cursor:pointer; font-weight:600; }
.pick-tree .book-g { margin-left:12px; }
.pick-tree .chapter { margin-left:12px; }
.pick-tree .chapter summary { font-weight:500; font-size:15px; }
.pick-tree .sec { display:flex; align-items:center; gap:8px; min-height:44px; margin-left:12px; font-weight:400; font-size:15px; }
.dot { display:inline-block; width:9px; height:9px; border-radius:50%; border:1.5px solid #9a9a9a; flex:none; }
.dot[data-study="LEARNED"] { background:#3d7dd8; border-color:#3d7dd8; }
.dot[data-study="REVIEW"] { background:#d9b23a; border-color:#d9b23a; }
.dot[data-study="MASTERED"] { background:#2f9a4f; border-color:#2f9a4f; }
.hint { color:var(--soft); font-size:14px; }
.auto-exam { margin-bottom:20px; }
.auto-exam button { width:100%; min-height:50px; font-size:17px; }
.auto-exam .hint { margin:8px 0 0; }
.exam-page h2 { margin-top:32px; font-size:20px; }
.exam-list { list-style:none; margin:0; padding:0; }
.exam-list a { display:flex; justify-content:space-between; gap:12px; min-height:52px; align-items:center; padding:8px 4px; border-bottom:1px solid var(--line); color:inherit; text-decoration:none; }
.exam-list b { font-weight:600; overflow-wrap:anywhere; }
.exam-list span { color:var(--soft); white-space:nowrap; }

.exam-take .exam-head h1 { margin-bottom:4px; }
#exam-state { margin:0 0 16px; color:var(--soft); font-size:14px; }
.exam-body { display:grid; gap:16px; }
.q-nav { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.q-nav button { min-width:44px; min-height:44px; padding:0; border-radius:10px; font-size:15px; }
.q-nav button.done { background:var(--sap); }
.q-nav button[aria-current="true"] { border-color:var(--bark); border-width:2px; font-weight:700; }
.q-card { padding:18px; background:var(--sheet); border:1px solid var(--line); border-radius:var(--radius); }
.q-no { margin:0 0 6px; font-size:13px; color:var(--soft); overflow-wrap:anywhere; }
.q-text { margin:0 0 16px; font-size:19px; line-height:1.55; font-weight:600; overflow-wrap:anywhere; }
.q-opts { display:grid; gap:8px; }
.q-opts .opt { width:100%; min-height:52px; padding:10px 14px; text-align:left; white-space:normal; line-height:1.45; font-size:16px; border-radius:12px; overflow-wrap:anywhere; }
.q-opts .opt[aria-checked="true"] { background:var(--bark); color:var(--on-bark); border-color:var(--bark); }
.q-move { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.q-move .ghost, .r-q .ghost { margin-left:auto; border-color:transparent; background:none; color:var(--soft); font-size:14px; }
.exam-body > .submit { justify-self:start; }
/* 넓으면 왼쪽 번호 목록 + 가운데 문제 */
@media (min-width:810px) {
  .exam-body:has(.q-nav) { grid-template-columns:200px minmax(0, 1fr); align-items:start; }
  .q-nav { grid-row:1 / span 2; display:grid; grid-template-columns:repeat(4, 44px); }
  .exam-body > .submit { grid-column:2; }
}
.r-score { display:flex; align-items:baseline; gap:12px; }
.r-score b { font-size:44px; }
.r-score span { color:var(--soft); }
.r-sections h2, .r-wrong h2 { font-size:18px; margin:8px 0; }
.r-sec { padding:10px 0; border-bottom:1px solid var(--line); }
.r-sec p { margin:0; overflow-wrap:anywhere; }
.r-sec small { color:var(--soft); }
.r-bar { position:relative; height:10px; margin:6px 0 4px; border-radius:5px; background:var(--line); overflow:hidden; }
.r-bar::before { content:""; position:absolute; inset:0 auto 0 0; width:var(--rate); background:#3d7dd8; border-radius:5px; }
.r-sec.won .r-bar::before { background:#2f9a4f; }
.r-bar::after { content:""; position:absolute; top:0; bottom:0; left:var(--pass); width:2px; background:var(--ink); opacity:.6; }   /* 기준선 */
.r-tail { font-size:14px; color:var(--soft); }
.r-q { padding:12px 0; border-bottom:1px solid var(--line); }
.r-q h3 { margin:0 0 6px; font-size:16px; line-height:1.5; overflow-wrap:anywhere; }
.r-q p { margin:2px 0; overflow-wrap:anywhere; }
.r-q .mine { color:#b4532a; }
.r-q .ans { color:#2f9a4f; font-weight:600; }
.r-q .why { color:var(--soft); font-size:15px; }
.r-q .acts { display:flex; gap:8px; margin-top:8px; align-items:center; }

/* ── 검색 (search/search) ── */
.search-form { display:flex; gap:8px; margin-bottom:20px; }
.search-form input { flex:1; min-width:0; min-height:48px; padding:0 14px; font-size:17px; border:1px solid var(--line); border-radius:var(--radius); background:var(--sheet); }
.hits { margin-top:24px; }
.hits h2 { font-size:17px; margin:0 0 6px; }
.hits ol { list-style:none; margin:0; padding:0; }
.hits a { display:block; min-height:48px; padding:10px 4px; border-bottom:1px solid var(--line); color:inherit; text-decoration:none; overflow-wrap:anywhere; }
.hits a b { font-weight:600; }
.hits small { display:block; color:var(--soft); font-size:14px; }
.hits mark { background:#f6e39a; color:#2a2023; border-radius:2px; }
.hits .dot { margin-right:6px; vertical-align:1px; }
.dot[data-study="CONFUSED"] { background:#e07b2a; border-color:#e07b2a; }

/* ── 마인드맵 (map/map) — 그래프 + 오른쪽 패널, 좁으면 위 그래프 · 아래 목록 (설계 5.5) ── */
.map-page { display:grid; grid-template-rows:auto minmax(0,1fr); height:calc(100dvh - 56px - env(safe-area-inset-top)); }
.map-bar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:8px calc(16px + env(safe-area-inset-right)) 8px calc(16px + env(safe-area-inset-left));
  border-bottom:1px solid var(--line); background:var(--sheet); }
.map-bar h1 { margin:0 8px 0 0; font-size:18px; overflow-wrap:anywhere; }
.map-bar .tabs { display:flex; gap:4px; }
.map-bar .tabs a { display:flex; align-items:center; min-height:44px; padding:0 12px; border-radius:8px; color:inherit; text-decoration:none; white-space:nowrap; font-size:15px; }
.map-bar .tabs a[aria-current="page"] { background:var(--sap); font-weight:700; }
.map-bar .hl { flex:1 1 160px; max-width:260px; min-height:44px; padding:0 12px; font-size:16px; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); }
.map-main { display:grid; grid-template-columns:minmax(0,1fr) 360px; min-height:0; }
.graph { position:relative; min-height:0; min-width:0; background:var(--paper); }
.graph-empty { position:absolute; inset:0; display:grid; place-items:center; padding:24px; text-align:center; color:var(--soft); }
.legend { position:absolute; left:8px; bottom:calc(8px + env(safe-area-inset-bottom)); display:flex; flex-wrap:wrap; gap:4px 10px; max-width:calc(100% - 16px);
  padding:4px 8px; font-size:12px; color:var(--soft); background:color-mix(in srgb, var(--sheet) 85%, transparent); border-radius:8px; pointer-events:none; }
.legend .dot { margin-right:3px; vertical-align:0; }
.map-panel { overflow-y:auto; padding:12px 14px calc(24px + env(safe-area-inset-bottom)); border-left:1px solid var(--line); background:var(--sheet); }
.map-panel h2 { margin:0; font-size:20px; overflow-wrap:anywhere; }
.map-panel h3 { margin:18px 0 6px; font-size:14px; color:var(--soft); }
.map-panel .sub { margin:4px 0 0; color:var(--soft); font-size:14px; overflow-wrap:anywhere; }
.map-panel .one { margin:10px 0 0; line-height:1.6; overflow-wrap:anywhere; }
.map-panel ul.pts { margin:6px 0 0; padding-left:18px; }
.map-panel .acts { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.map-panel .acts button, .map-panel .acts a { min-height:44px; font-size:14px; padding:0 12px; }
.chip { display:inline-block; margin-left:6px; padding:1px 8px; border-radius:10px; font-size:12px; font-weight:600; vertical-align:3px; white-space:nowrap; background:var(--sap); }
.rels { list-style:none; margin:0; padding:0; }
.rels li { display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; padding:4px 0; border-bottom:1px solid var(--line); }
.rels li a { flex:1 1 140px; display:flex; align-items:center; min-height:44px; color:inherit; overflow-wrap:anywhere; }
.rels li small { flex-basis:100%; color:var(--soft); font-size:13px; }
.rels li.sug a { opacity:.75; font-style:italic; }
.rels li button { min-height:44px; padding:0 10px; font-size:13px; }
.wheres a { display:block; min-height:44px; padding:6px 0; border-bottom:1px solid var(--line); color:inherit; text-decoration:none; overflow-wrap:anywhere; }
.wheres small { display:block; color:var(--soft); font-size:13px; }
.picker { display:grid; gap:8px; margin-top:12px; padding:10px; border:1px solid var(--line); border-radius:var(--radius); }
.picker input, .picker select { width:100%; min-height:44px; font-size:16px; }
.picker ol { list-style:none; margin:0; padding:0; max-height:220px; overflow:auto; }
.picker ol button { width:100%; text-align:left; white-space:normal; border:0; border-bottom:1px solid var(--line); border-radius:0; background:none; overflow-wrap:anywhere; }
.picker ol button[aria-pressed="true"] { background:var(--sap); font-weight:700; }
.extract { display:grid; gap:8px; }
.extract .chs { max-height:40dvh; overflow:auto; border:1px solid var(--line); border-radius:var(--radius); padding:4px 10px; }
.extract .chs label { display:flex; align-items:center; gap:8px; min-height:44px; font-size:15px; overflow-wrap:anywhere; }
.extract .chs input { width:22px; height:22px; flex:none; accent-color:var(--bark); }
.map-filter { width:100%; }
.map-filter summary { display:inline-flex; align-items:center; min-height:44px; cursor:pointer; font-weight:600; }
.map-filter form { display:grid; gap:8px; padding:6px 0 10px; }
.map-filter fieldset { display:flex; flex-wrap:wrap; gap:0 14px; margin:0; padding:0; border:0; }
.map-filter legend { font-size:13px; font-weight:700; color:var(--soft); }
.map-filter label { display:flex; align-items:center; gap:6px; min-height:44px; font-size:15px; white-space:nowrap; }
.map-filter input[type=checkbox] { width:22px; height:22px; margin:0; font-size:16px; accent-color:var(--bark); flex:none; }   /* 누르기 대상은 44px label 전체 */
.map-filter button { justify-self:start; }
@media (max-width:999px) {
  .map-page { height:auto; display:block; }
  .map-main { display:block; }
  .graph { height:56dvh; border-bottom:1px solid var(--line); }
  .map-panel { border-left:0; overflow:visible; }
}

/* ── 설정 · 사용자 관리 ── */
.settings-page section { margin-top:24px; }
.settings-page h2 { font-size:19px; margin:0 0 8px; }
.settings-page .sheet-form .row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.settings-page input[type=number] { width:120px; min-height:48px; padding:0 12px; font-size:17px; border:1px solid var(--line); border-radius:var(--radius); background:var(--sheet); }
.settings-page textarea { width:100%; padding:10px 12px; font:inherit; font-size:16px; border:1px solid var(--line); border-radius:var(--radius); background:var(--sheet); }
.token-state { display:grid; gap:2px; padding:12px 14px; border-radius:var(--radius); background:var(--sap); overflow-wrap:anywhere; }
.token-state.none { background:var(--err-bg); color:var(--err); }
.token-state code { font-size:15px; }
.howto { margin:6px 0 0; padding-left:20px; color:var(--soft); font-size:14px; }
.howto code { overflow-wrap:anywhere; }
.inline { display:inline; }
.temp-pw { padding:14px; border:2px dashed var(--bark); border-radius:var(--radius); background:var(--sheet); overflow-wrap:anywhere; }
.temp-pw code { font-size:20px; font-weight:700; letter-spacing:.05em; user-select:all; }
.user-list { list-style:none; margin:0; padding:0; }
.user-list > li { padding:12px 0; border-bottom:1px solid var(--line); }
.user-list .who { display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline; }
.user-list .who b { font-size:17px; overflow-wrap:anywhere; }
.user-list small { color:var(--soft); font-size:14px; }
.user-list .acts { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.user-list .acts button { min-height:44px; font-size:14px; padding:0 12px; }