/* Hyper-Reference — 화면 규칙
   참고: fala atelier(여백·불규칙 배치) · Are.na(숫자를 앞에) · Divisare(사진가 표기)
   색은 뜻이 정해져 있다 — 초록=확정된 영역 · 주황=처리 중 · 회색=메모 없음 · 갈색=AI가 바꾼 영어 · 연한 먹색 선=끄는 중 맞춤 안내선 */
:root {
  --bg: #fcfcfa; --paper: #fff; --sunk: #f6f5f1;
  --ink: #111110; --ink-2: #3a3a35; --mut: #8a8a82; --faint: #bdbcb4; --line: #e6e5df; --line-2: #f0efea;
  --mark: #7a5c2e;   /* AI 가 바꾼 영어 검색어 */
  --pick: #2f7d4f;   /* 확정된 영역 */
  --pend: #c4622d;   /* 처리 중 */
  --off: #a9a8a0;    /* 메모 없음 */
  --link: #3f6b52; --link-line: #cfe0d5;
  --danger: #b3261e;
  --guide: rgba(17,17,16,.45); /* 끄는 중 맞춤 안내선 — 처음엔 빨강이었는데 "너무 거슬린다"(2026-09-26 사용자)고 해서 연한 먹색. 어두운 사진 위에서는 흐리다 */
  --f: "Pretendard Variable", Pretendard, -apple-system, "Helvetica Neue", "Segoe UI", "Malgun Gothic", sans-serif;
  --rail: 52px; --bar: 50px; --panel: 384px;
  --ease: cubic-bezier(.4, 0, .2, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font: 13px/1.6 var(--f); -webkit-font-smoothing: antialiased;
  word-break: keep-all; overflow-wrap: anywhere;
  font-feature-settings: "tnum" 0;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }
a { color: inherit; }
.num { font-variant-numeric: tabular-nums; }
.mut { color: var(--mut); }
.faint { color: var(--faint); }
.en { color: var(--mark); }
.cap { font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--mut); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ── 공통 막대 ─────────────────────────────── */
.bar { height: var(--bar); display: flex; align-items: center; gap: 18px; padding: 0 24px; border-bottom: 1px solid var(--line); background: var(--bg); position: relative; z-index: 20; }
.brand { font-size: 13px; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.brand a { text-decoration: none; }
.brand .sep { color: var(--faint); margin: 0 6px; }
.brand em { font-style: normal; color: var(--mut); }
.bar .grow { flex: 1; }
.tabs { display: flex; gap: 16px; font-size: 12px; white-space: nowrap; flex-shrink: 0; }
.tabs button { color: var(--faint); letter-spacing: .02em; padding: 4px 0; border-bottom: 1px solid transparent; }
.tabs button:hover { color: var(--mut); }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.links { display: flex; gap: 16px; align-items: center; font-size: 12px; color: var(--mut); }
.links a { text-decoration: none; white-space: nowrap; } /* 좁으면 "사전"이 한 글자씩 꺾였다 (390px) */
.links button:hover, .links a:hover { color: var(--ink); }
.pill { font-size: 10px; letter-spacing: .06em; padding: 1px 7px; border: 1px solid var(--line); border-radius: 20px; color: var(--mut); background: var(--paper); white-space: nowrap; }

.btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 3px; background: var(--paper); font-size: 12px; white-space: nowrap; }
.btn:hover:not(:disabled) { border-color: var(--mut); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn.ink:hover:not(:disabled) { background: #333; }
.btn.small { height: 24px; padding: 0 8px; font-size: 11px; }
.btn.danger { color: var(--danger); }
.lnk { color: var(--link); border-bottom: 1px solid var(--link-line); cursor: pointer; }
.lnk:hover { border-bottom-color: var(--link); }
.lnk.dead { color: var(--mut); border-bottom-style: dashed; border-bottom-color: var(--faint); }

/* ── 첫 화면 — 아카이브 갤러리 ───────────────── */
.gallery { min-height: 100%; }
.gallery-about[hidden] { display: none; }
.gallery-about { border-bottom: 1px solid var(--line); padding-bottom: 26px; }
.gallery-summary, .about-close { max-width: 1180px; margin: 24px auto 0; padding: 0 40px; }
.gallery-summary summary { cursor: pointer; color: var(--mut); font-size: 12px; width: fit-content; }
.gallery-summary .meta { margin-top: 18px; padding: 0; }
.gallery-tools { max-width: 1360px; margin: 30px auto 0; padding: 0 40px; display: flex; align-items: flex-start; gap: 24px; }
.gallery-tools .find { flex: 1; min-width: 0; margin: 0; padding: 0; }
.gallery-tools .find-box { max-width: none; }
.gallery-new { flex: 0 0 auto; }
.gallery-new .anew { min-height: 34px; height: auto; padding: 6px 12px; width: auto; min-width: 110px; border-style: solid; }
.gallery-new input { min-width: 210px; }
.gallery-empty { grid-column: 1 / -1; color: var(--mut); }
@media (max-width: 750px) {
  .gallery > .bar { height: auto; min-height: var(--bar); flex-wrap: wrap; padding: 12px 16px; gap: 10px; }
  .gallery > .bar .links { flex-wrap: wrap; gap: 12px; }
  .gallery-tools { padding: 0 16px; gap: 12px; flex-wrap: wrap; }
  .gallery-tools .find { flex-basis: 100%; }
  .gallery .intro, .gallery .example-note, .gallery .foot, .gallery-summary, .about-close { padding-left: 16px; padding-right: 16px; }
}
.intro { max-width: 1180px; margin: 0 auto; padding: 44px 40px 0; }
.intro h1 { font-size: 30px; font-weight: 500; letter-spacing: -.02em; line-height: 1.25; margin: 0 0 14px; }
.intro h1 span { color: var(--faint); }
.intro p { margin: 0; max-width: 620px; color: var(--mut); font-size: 13px; }
.intro p b { color: var(--ink); font-weight: 500; }
.meta { max-width: 1180px; margin: 36px auto 0; padding: 0 40px; display: flex; gap: 44px; flex-wrap: wrap; }
.meta .col { min-width: 140px; }
.meta .colh { padding-bottom: 5px; border-bottom: 1px solid var(--line); margin-bottom: 7px; }
.kv { display: flex; justify-content: space-between; gap: 16px; font-size: 11.5px; padding: 1px 0; }
.kv span { color: var(--mut); font-variant-numeric: tabular-nums; }
.example-note { max-width: 1180px; margin: 26px auto 0; padding: 0 40px; font-size: 11.5px; color: var(--mut); }
.example-note b { color: var(--ink-2); font-weight: 500; }

/* 내 자료에서 찾기 — 쓴 글자로 되찾는다 (gallery.js FindMine) */
.find { max-width: 1180px; margin: 30px auto 0; padding: 0 40px; }
.find-box { display: flex; align-items: center; gap: 10px; max-width: 620px; border-bottom: 1px solid var(--line); padding: 6px 0; color: var(--faint); cursor: text; }
.find-box:focus-within { border-bottom-color: var(--ink); color: var(--ink-2); }
.find-box input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: 13px; padding: 3px 0; color: var(--ink); }
.find-box input::placeholder { color: var(--faint); }
.find-box button { color: var(--mut); display: inline-flex; padding: 4px; }
.find-res { margin: 16px 0 90px; max-width: 820px; }
.find-count { font-size: 11px; color: var(--mut); margin-bottom: 14px; font-variant-numeric: tabular-nums; }
.find-group { margin-bottom: 18px; }
.find-head { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; font-weight: 500; color: var(--ink); padding: 0 8px 4px; border-bottom: 1px solid var(--line-2); margin-bottom: 4px; width: 100%; text-align: left; }
button.find-head:hover { color: var(--link); }
.find-hit { display: grid; grid-template-columns: 38px 1fr; gap: 10px; width: 100%; text-align: left; padding: 5px 8px; border-radius: 3px; font-size: 12px; line-height: 1.6; color: var(--ink-2); }
.find-hit:hover { background: var(--sunk); }
.find-hit .k { color: var(--faint); font-size: 10.5px; padding-top: 1px; }
.find-hit .en { font-style: normal; font-size: 11px; }
.find mark { background: #efe6cf; color: inherit; border-radius: 2px; padding: 0 1px; }
@media (max-width: 750px) { .find { padding: 0 16px; } }

/* 12칸 중 일부는 비워 둔다 — 세 장의 크기·위치 차이와 넉넉한 여백. */
.gallery { --archive-columns: 12; }
.scatter { max-width: 1360px; margin: 46px auto 0; padding: 0 40px 90px; display: grid; grid-template-columns: repeat(var(--archive-columns), minmax(0, 1fr)); column-gap: 24px; row-gap: 68px; align-items: start; }
.acard { display: block; text-align: left; cursor: pointer; text-decoration: none; color: inherit; }
/* 핀(상단 고정) — 카드 오른쪽 위의 아이콘 하나. 평소엔 올리거나 초점일 때만, 고정된 카드는 늘 (속이 찬 핀) */
.acard-wrap { position: relative; min-width: 0; width: 100%; overflow-wrap: anywhere; }
.pin-btn { position: absolute; top: 8px; right: 8px; z-index: 2; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #ffffffe6; color: var(--ink-2); border: 1px solid var(--line); opacity: 0; transition: opacity .15s; }
.acard-wrap:hover .pin-btn, .pin-btn:focus-visible, .pin-btn[aria-pressed="true"] { opacity: 1; }
.pin-btn:hover { color: var(--ink); border-color: var(--mut); }
.pin-btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pin-btn[aria-pressed="true"] svg path { fill: currentColor; }
.archive-actions { position: absolute; top: 8px; left: 8px; z-index: 3; }
.archive-actions summary { list-style: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: #ffffffe6; color: var(--ink-2); font-size: 16px; line-height: 1; cursor: pointer; opacity: .72; }
.archive-actions summary::-webkit-details-marker { display: none; }
.acard-wrap:hover .archive-actions summary, .archive-actions summary:focus-visible, .archive-actions[open] summary { opacity: 1; }
.archive-actions-menu { position: absolute; top: 32px; left: 0; min-width: 155px; padding: 4px; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 5px 20px #0002; }
.archive-actions-menu button { width: 100%; padding: 8px 10px; text-align: left; white-space: nowrap; font-size: 11px; color: var(--danger); }
.archive-actions-menu button:hover { background: var(--sunk); }
@media (hover: none) { .pin-btn { opacity: 1; } } /* 터치 기기엔 올림이 없다 */
@media (hover: none) { .archive-actions summary { opacity: 1; } }
.acard .shot { position: relative; line-height: 0; background: var(--sunk); overflow: hidden; }
.acard .shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease), filter .4s; }
.acard:hover .shot img { transform: scale(1.02); }
.acard .shot .empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--faint); line-height: 1.4; }
.acard .name { font-size: 14px; margin-top: 10px; letter-spacing: -.005em; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.acard .by { font-size: 10.5px; color: var(--faint); margin-top: 1px; }
.acard .nums { font-size: 10.5px; color: var(--mut); margin-top: 8px; font-variant-numeric: tabular-nums; }
.acard .words { margin-top: 5px; font-size: 11px; color: var(--mark); line-height: 1.6; }
/* 프로젝트 묶음 — 같은 이름표를 단 아카이브가 둘 이상이면 겹친 카드 한 벌 (뒤의 두 장은 그림자로 그린다) */
.acard.stack { background: none; border: 0; padding: 0; width: 100%; font: inherit; color: inherit; }
.acard.stack .shot { box-shadow: 7px -7px 0 -1px var(--paper), 7px -7px 0 0 var(--line), 14px -14px 0 -1px var(--paper), 14px -14px 0 0 var(--line); }
.acard.stack:hover .shot { box-shadow: 7px -7px 0 -1px var(--paper), 7px -7px 0 0 var(--mut), 14px -14px 0 -1px var(--paper), 14px -14px 0 0 var(--mut); }
.acard .proj-line { font-size: 10.5px; color: var(--mark); margin-top: 10px; }
.acard .proj-line + .name { margin-top: 2px; }
.proj-group { grid-column: 1 / -1; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); padding: 10px 0 40px; } /* 펼친 묶음 — 위아래 선으로 경계 */
.proj-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.proj-cards { display: grid; grid-template-columns: repeat(var(--archive-columns), minmax(0, 1fr)); column-gap: 24px; row-gap: 68px; align-items: start; margin-top: 36px; }
.proj-head .cap { font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--mut); }
.proj-head .grow { flex: 1; }
.proj-chip { margin-left: 10px; font-size: 11px; color: var(--mut); border: 1px dashed var(--line); border-radius: 20px; padding: 1px 9px; background: transparent; cursor: pointer; }
.proj-chip:hover { color: var(--ink); border-color: var(--mut); }
.proj-chip.on { color: var(--mark); border-style: solid; }
.proj-edit input { margin-left: 10px; width: 190px; height: 24px; font-size: 12px; border: 1px solid var(--line); border-radius: 3px; padding: 0 8px; outline: none; background: var(--paper); }
.proj-edit input:focus { border-color: var(--mut); }
.anew { border: 1px dashed var(--line); height: 150px; display: flex; align-items: center; justify-content: center; color: var(--mut); font-size: 12px; background: transparent; width: 100%; }
.anew:hover { border-color: var(--mut); color: var(--ink); }
.foot { max-width: 1180px; margin: 0 auto; padding: 26px 40px 60px; border-top: 1px solid var(--line); color: var(--faint); font-size: 11px; line-height: 1.8; }
.foot a { color: var(--mut); }

/* ── 아카이브 화면 ─────────────────────────── */
.arch { position: fixed; inset: 0; display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); }
.arch > .bar { grid-column: 1 / 3; }
.arch .links button { white-space: nowrap; }
.archive-context { grid-column: 2; min-width: 0; }
.archive-guide { padding: 8px 24px 10px; border-bottom: 1px solid var(--line); background: var(--paper); font-size: 11px; }
.guide-head { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; color: var(--mut); }
.guide-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 12px 0 6px; padding: 0; }
.guide-steps button { font-size: 12px; font-weight: 600; border-bottom: 1px solid var(--link-line); color: var(--link); text-align: left; }
.guide-steps p { margin: 5px 0; color: var(--mut); line-height: 1.6; }
.guide-foot { color: var(--mut); display: flex; flex-wrap: wrap; gap: 8px 18px; }
@media (max-width: 1050px) {
  .arch > .bar { height: auto; min-height: var(--bar); flex-wrap: wrap; gap: 8px 16px; padding: 8px 12px; }
  .arch > .bar .brand { flex: 1 1 100%; }
  .arch > .bar .links { gap: 12px; flex-wrap: wrap; }
}
@media (max-width: 650px) {
  .archive-guide { padding: 8px 12px; max-height: 28vh; overflow-y: auto; }
  .guide-steps { grid-template-columns: 1fr; gap: 8px; }
  .guide-head > span { display: none; }
}
.rail { grid-row: 2 / 4; border-right: 1px solid var(--line); background: var(--bg); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0; z-index: 15; }
.rail .gap { flex: 1; }
.rbtn { width: 36px; height: 36px; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: var(--mut); position: relative; }
.rbtn:hover { background: var(--sunk); color: var(--ink); }
.rbtn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.rbtn .k { position: absolute; right: 2px; bottom: 1px; font-size: 8.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.rbtn[aria-pressed="true"] .k { color: #777; }
.rbtn .tip { position: absolute; left: 44px; top: 50%; transform: translateY(-50%); background: var(--ink); color: var(--paper); font-size: 11px; padding: 3px 8px; border-radius: 3px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s; z-index: 50; }
.rbtn:hover .tip { opacity: 1; }
.stage { grid-column: 2; position: relative; overflow: hidden; }
.stage.search-open > .plane { left: var(--canvas-inset); }
.aname { border: 0; background: transparent; font-size: 13px; padding: 2px 4px; margin: -2px -4px; border-radius: 3px; min-width: 60px; }
.aname:hover { background: var(--sunk); }
.aname:focus { background: var(--paper); outline: 1px solid var(--line); }

/* ── 평면 ─────────────────────────────────── */
.plane { position: absolute; inset: 0; overflow: hidden; background-color: var(--paper); touch-action: none; user-select: none; }
.plane.pan { cursor: grab; }
.plane.panning { cursor: grabbing; }
.plane.region-tool .shot { cursor: crosshair; }
.world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.o { position: absolute; }
.o.sel { outline: 1px solid var(--ink); outline-offset: 6px; }
.o.locked.sel { outline-style: dashed; }
.o.drop-hl { outline: 1px dashed var(--pick); outline-offset: 6px; }
.o.lift { z-index: 40; } /* 끄는 동안만 위로 보인다 — 겹친 순서(맨 앞·맨 뒤)는 그대로 */
.selection-frame { position: absolute; border: 1px dashed var(--ink); outline: 4px solid rgba(17,17,16,.04); pointer-events: none; }
.shot { position: relative; line-height: 0; background: var(--sunk); }
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
/* 사진 틀 — 자른 사진은 원본을 이 틀보다 크게 놓고 넘치는 곳을 숨긴다. 영역 번호(위로 튀어나옴)는 틀 밖이라 안 잘린다.
   누르기는 통과시킨다 — .shot 이 받아야 영역 그리기·시험의 elementFromPoint 가 그대로 맞는다 */
.shot .frame { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.shot .loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--faint); line-height: 1.3; text-align: center; padding: 8px; }
.shot .gen-badge { position: absolute; left: 6px; top: 6px; line-height: 1.4; font-size: 9.5px; letter-spacing: .06em; background: rgba(255,255,255,.9); color: var(--ink-2); padding: 1px 6px; border-radius: 2px; }
.lock-badge { position: absolute; right: 6px; top: 6px; line-height: 1.5; font-size: 9px; letter-spacing: .04em; background: rgba(17,17,16,.82); color: #fff; padding: 1px 6px; border-radius: 2px; pointer-events: none; }
.note-lock { top: -22px; right: 0; }
.region { position: absolute; border: 1.5px solid var(--pick); border-radius: 1px; cursor: pointer; }
.region::after { content: attr(data-n); position: absolute; left: -1px; top: -16px; font-size: 9.5px; line-height: 14px; padding: 0 4px; background: var(--pick); color: #fff; border-radius: 1px; font-variant-numeric: tabular-nums; }
.region.pend { border-color: var(--pend); border-style: dashed; animation: pulse 1.1s var(--ease) infinite; }
.region.pend::after { background: var(--pend); }
.region.nomemo { border-color: var(--off); border-style: dashed; }
.region.nomemo::after { background: var(--off); }
.region.off { opacity: .75; border-color: var(--off); border-style: dashed; background: rgba(169,168,160,.12); }
.region.off::after { background: var(--off); }
.region.draft { border: 1.5px dashed var(--pend); cursor: crosshair; pointer-events: none; }
.region.draft::after { display: none; }
.region.hl { box-shadow: 0 0 0 3px rgba(47,125,79,.18); }
.region.cut { opacity: .5; border-style: dashed; } /* 자른 틀 밖에 걸친 영역 — 틀 안 부분만 흐리게 */
@keyframes pulse { 50% { opacity: .45; } }
.caption { margin-top: 6px; min-height: 16px; display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--faint); letter-spacing: .03em; line-height: 1.5; white-space: nowrap; }
.credit-line { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; opacity: 0; pointer-events: none; }
.o:hover .credit-line, .o:focus-within .credit-line { opacity: 1; pointer-events: auto; }
.credit-info { position: relative; flex: none; width: 16px; text-align: right; }
.credit-info summary { list-style: none; cursor: pointer; color: var(--mut); font-size: 12px; line-height: 16px; }
.credit-info summary::-webkit-details-marker { display: none; }
.credit-info summary:hover, .credit-info[open] summary { color: var(--ink); }
.credit-pop { position: absolute; z-index: 2; right: 0; bottom: calc(100% + 4px); width: 230px; max-width: 80vw; padding: 10px 12px; display: grid; gap: 5px; white-space: normal; text-align: left; line-height: 1.5; color: var(--ink-2); background: var(--paper); border: 1px solid var(--line); box-shadow: 0 5px 20px #0002; }
.credit-pop strong { font-weight: 500; }
.credit-pop a { text-decoration: underline; text-underline-offset: 2px; }
.o:has(.credit-info[open]) { z-index: 42; }
.caption b { color: var(--mut); font-weight: 400; }
.caption a { text-decoration: none; }
.caption a:hover b { color: var(--ink); text-decoration: underline; }
.memos { margin-top: 5px; }
.memo { display: flex; gap: 6px; font-size: 11px; line-height: 1.5; padding: 2px 0; cursor: pointer; }
.memo .n { flex: 0 0 auto; font-size: 9.5px; line-height: 16px; min-width: 16px; text-align: center; background: var(--pick); color: #fff; border-radius: 1px; height: 16px; margin-top: 1px; font-variant-numeric: tabular-nums; }
.memo.off { opacity: .42; }
.memo.cut { opacity: .6; } /* 영역이 자른 틀 밖에 걸침 */
.memo.nomemo .n { background: var(--off); }
.memo.pend .n { background: var(--pend); }
.memo .t { min-width: 0; }
.memo em { font-style: normal; display: block; color: var(--mark); font-size: 10px; }
.memo:hover .t > span:first-child { text-decoration: underline; text-decoration-color: var(--faint); }
.del { position: absolute; right: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--paper); border: 1px solid var(--line); color: var(--mut); font-size: 13px; line-height: 15px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.del:hover { color: var(--danger); border-color: var(--danger); }
.rs { position: absolute; right: -7px; bottom: -7px; width: 12px; height: 12px; background: var(--paper); border: 1px solid var(--ink); cursor: nwse-resize; }

/* 글 — 배경도 테두리도 없다 */
.note { font-size: 12px; line-height: 1.75; color: var(--ink-2); cursor: default; }
.note .body { min-height: 20px; }
.note h3 { font-size: 12.5px; margin: 0 0 5px; font-weight: 600; color: var(--ink); }
.note h4 { font-size: 11.5px; margin: 10px 0 4px; font-weight: 600; color: var(--ink); }
.note p { margin: 0 0 6px; }
.note blockquote { margin: 0 0 6px; border-left: 2px solid var(--line); padding-left: 10px; color: var(--mut); }
.note ul { margin: 0 0 6px; padding-left: 16px; }
.note .when { font-size: 10px; color: var(--faint); letter-spacing: .04em; margin-bottom: 4px; }
.note textarea { width: 100%; border: 1px solid var(--line); background: var(--paper); padding: 8px 10px; resize: none; font-size: 12px; line-height: 1.7; border-radius: 2px; outline: none; min-height: 90px; }
.note textarea:focus { border-color: var(--mut); }
.note .empty { color: var(--faint); font-style: normal; }
.plane .hint { position: absolute; font-size: 10.5px; color: var(--faint); pointer-events: none; }
.selection-bar { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 65; display: flex; align-items: center; gap: 3px; padding: 4px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); box-shadow: 0 5px 18px rgba(17,17,16,.09); font-size: 10.5px; white-space: nowrap; }
.selection-bar > span { padding: 0 8px; color: var(--mut); }
.selection-bar button { padding: 5px 8px; border-radius: 2px; color: var(--ink-2); }
.selection-bar button:hover, .selection-bar button.on { background: var(--sunk); color: var(--ink); }
.selection-bar button.remove-selected { color: var(--danger); }
.selection-bar .shortcut { margin-left: 4px; color: var(--faint); font-size: 8.5px; }
.selection-bar .sep { align-self: stretch; width: 1px; margin: 3px 2px; background: var(--line); }
.selection-bar button.ic { display: inline-flex; padding: 4px 6px; }
.marquee { position: absolute; z-index: 60; border: 1px solid var(--mut); background: rgba(17,17,16,.035); pointer-events: none; } /* 선택 테두리(점선)와 가린다 */
/* 맞춤 안내선 — 화면 좌표에 그려서 확대·축소와 상관없이 늘 1px */
.snap-guide { position: absolute; z-index: 61; background: var(--guide); pointer-events: none; }
.snap-guide.v { width: 1px; transform: translateX(-.5px); }
.snap-guide.h { height: 1px; transform: translateY(-.5px); }
.kbd { display: inline-block; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 3px; padding: 0 5px; font-size: 10px; line-height: 15px; background: var(--paper); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.zoomer { position: absolute; right: 16px; bottom: 16px; display: flex; align-items: center; border: 1px solid var(--line); background: var(--paper); border-radius: 3px; font-size: 11px; z-index: 5; }
.zoomer button { width: 28px; height: 26px; color: var(--mut); }
.zoomer button:hover { color: var(--ink); background: var(--sunk); }
.zoomer span { min-width: 42px; text-align: center; color: var(--mut); font-variant-numeric: tabular-nums; }
/* 집중 화면 — 사진 한 장과 사진 메모 (plane.js FocusView). 배경을 흐리게 */
.focus-scrim { position: absolute; inset: 0; z-index: 90; background: rgba(17,17,16,.55); display: flex; align-items: center; justify-content: center; padding: 24px; }
.focus-box { display: grid; grid-template-columns: minmax(0, 1fr) 300px; max-width: min(1200px, 100%); max-height: 100%; background: var(--paper); border-radius: 6px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.focus-shot { position: relative; background: #161615; display: flex; align-items: center; justify-content: center; min-height: 280px; }
/* 자르기 틀 — 사진과 같은 자리·크기로 얹는다(재서 놓음). 틀 밖은 그림자로 어둡게, 넘치는 그림자는 숨긴다 */
.fover { position: absolute; overflow: hidden; pointer-events: none; }
.fover.on { pointer-events: auto; cursor: crosshair; touch-action: none; }
.fcrop { position: absolute; box-shadow: 0 0 0 9999px rgba(17,17,16,.42); outline: 1px solid rgba(255,255,255,.8); }
.fover.on .fcrop { box-shadow: 0 0 0 9999px rgba(17,17,16,.62); cursor: move; }
.fh { position: absolute; width: 12px; height: 12px; background: #fff; border: 1px solid var(--ink); } /* 모서리 — 틀 안쪽에 두어 사진 끝에서도 안 잘린다 */
.fh.nw { left: -1px; top: -1px; cursor: nwse-resize; } .fh.ne { right: -1px; top: -1px; cursor: nesw-resize; }
.fh.sw { left: -1px; bottom: -1px; cursor: nesw-resize; } .fh.se { right: -1px; bottom: -1px; cursor: nwse-resize; }
.freg { position: absolute; border: 1px dashed rgba(140,215,165,.95); pointer-events: none; } /* 영역 — 틀 밖 부분은 그림자에 덮여 흐려진다 */
.freg.cut { border-color: rgba(255,196,130,.95); }
.fcrop-bar { display: flex; flex-direction: column; gap: 6px; }
.focus-side .origin { display: flex; flex-direction: column; gap: 6px; } /* 올린 사진의 출처 */
.focus-side .origin input { width: 100%; height: 30px; border: 1px solid var(--line); border-radius: 3px; padding: 0 9px; font-size: 12px; outline: none; background: #fff; }
.focus-side .origin input:focus { border-color: var(--mut); }
.fcrop-bar .row { display: flex; gap: 6px; flex-wrap: wrap; }
.focus-shot img { display: block; max-width: 100%; max-height: calc(100vh - 170px); object-fit: contain; }
.focus-side { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; font-size: 12px; }
.focus-side .cap { display: flex; justify-content: space-between; align-items: center; }
.focus-side textarea { width: 100%; border: 1px solid var(--line); border-radius: 3px; padding: 8px 10px; font-size: 12.5px; line-height: 1.7; resize: vertical; outline: none; min-height: 120px; background: #fff; }
.focus-side textarea:focus { border-color: var(--mut); }
.focus-side .help { font-size: 10.5px; color: var(--mut); line-height: 1.6; }
.focus-prefs .fp { font-size: 11.5px; color: var(--ink-2); padding: 2px 0; }
.focus-prefs .fp .n { display: inline-block; min-width: 16px; padding: 0 3px; background: var(--pick); color: #fff; font-size: 10px; text-align: center; border-radius: 2px; margin-right: 4px; }
.focus-side .src { margin-top: auto; font-size: 10px; color: var(--faint); line-height: 1.5; }
.imemo { margin-top: 4px; font-size: 11px; color: var(--ink-2); line-height: 1.5; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.imemo:hover { color: var(--ink); }
.lrow .imemo-line { margin-top: 5px; font-size: 12px; color: var(--ink-2); line-height: 1.6; white-space: pre-wrap; }
@media (max-width: 750px) { .focus-box { grid-template-columns: 1fr; } .focus-shot img { max-height: 45vh; } }
/* 단축키 표 (?) — 오른쪽 위. 아래에 두면 모델 상태 알림·확대 막대와 겹쳤다 */
.pop.keys-help { right: 16px; top: 12px; width: 300px; max-height: calc(100% - 96px); overflow-y: auto; }
.keys-help .cap { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
.kh-group { margin-top: 9px; }
.kh-h { font-size: 10px; letter-spacing: .06em; color: var(--mut); margin-bottom: 2px; }
.kh-row { display: grid; grid-template-columns: 136px 1fr; gap: 8px; padding: 2px 0; font-size: 11.5px; color: var(--ink-2); }
.kh-k { color: var(--ink); font-variant-numeric: tabular-nums; }
.empty-plane { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); text-align: center; color: var(--mut); font-size: 12.5px; line-height: 1.9; pointer-events: none; }
.empty-plane b { color: var(--ink); font-weight: 500; }
.dropzone { position: absolute; inset: 10px; border: 1.5px dashed var(--pick); border-radius: 4px; background: rgba(47,125,79,.04); pointer-events: none; display: flex; align-items: center; justify-content: center; color: var(--pick); font-size: 12px; z-index: 6; }

/* 팝오버 (메모 쓰기 · 영역 보기) */
.pop { position: absolute; z-index: 70; width: 290px; background: var(--paper); border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 10px 30px rgba(17,17,16,.10); padding: 12px 12px 10px; font-size: 12px; }
.pop .cap { margin-bottom: 6px; display: flex; justify-content: space-between; }
.pop textarea { width: 100%; border: 1px solid var(--line); border-radius: 3px; padding: 7px 9px; resize: none; line-height: 1.6; outline: none; min-height: 58px; font-size: 12.5px; }
.pop textarea:focus { border-color: var(--mut); }
.pop .help { font-size: 10.5px; color: var(--mut); margin-top: 6px; line-height: 1.55; }
.pop .row { display: flex; gap: 6px; margin-top: 9px; align-items: center; }
.pop .row .grow { flex: 1; }
.pop .err { margin-top: 7px; font-size: 11px; color: var(--danger); line-height: 1.5; }
.pop .memo-big { font-size: 13px; line-height: 1.6; }
.pop .memo-big em { display: block; font-style: normal; color: var(--mark); font-size: 11px; margin-top: 3px; }

/* ── 검색 패널 ─────────────────────────────── */
.panel { position: absolute; left: 0; top: 0; bottom: 0; width: var(--search-width, var(--panel)); max-width: 100%; min-width: 0; background: var(--bg); border-right: 1px solid var(--line); z-index: 12; display: flex; flex-direction: column; visibility: hidden; pointer-events: none; }
.panel.open { visibility: visible; pointer-events: auto; }
.panel .ph { padding: 14px 16px 10px; border-bottom: 1px solid var(--line); }
.panel .ph, .panel .gen, .results-tools { flex-shrink: 0; }
.search-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.search-heading b { font-size: 13px; font-weight: 500; }
.search-heading > div { display: flex; align-items: center; gap: 8px; }
.search-close { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 3px; }
.search-close:hover { background: var(--sunk); }
.qrow { display: flex; gap: 6px; }
.qrow input { flex: 1; min-width: 0; height: 34px; border: 1px solid var(--line); border-radius: 3px; padding: 0 10px; background: var(--paper); outline: none; font-size: 13px; }
.qrow input:focus { border-color: var(--mut); }
.interp { margin-top: 8px; font-size: 11px; color: var(--mut); line-height: 1.55; min-height: 17px; }
.interp .en { font-size: 11px; }
.interp.warn { color: var(--pend); }
.interp.err { color: var(--danger); }
.scope-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; color: var(--mut); font-size: 10.5px; }
/* 검색 범위 셋 — PD·CC0(기본) · + CC BY · 전체 (common.js ScopePicker, 검색 패널·사전) */
.scope-pick { display: flex; flex: 1 1 100%; min-width: 0; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; background: var(--paper); }
.scope-pick button { flex: 1; min-width: 0; padding: 5px 4px; font-size: 10.5px; color: var(--mut); border-left: 1px solid var(--line); white-space: nowrap; }
.scope-pick button:first-child { border-left: 0; }
.scope-pick button:hover { color: var(--ink); background: var(--sunk); }
.scope-pick button.on { background: var(--ink); color: var(--paper); }
.scope-pick button span { display: block; opacity: .65; font-variant-numeric: tabular-nums; }
.scope-note { margin-top: 5px; font-size: 10.5px; line-height: 1.5; color: var(--mut); }
.scope-note.warn { color: var(--pend); }
.dict-scope { margin: -2px 0 10px; }
.dict-scope .scope-row { justify-content: flex-start; gap: 8px; margin-top: 0; }
.alpha { display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; align-items: center; margin-top: 10px; font-size: 11px; color: var(--mut); }
.alpha input { width: 100%; accent-color: var(--ink); }
.alpha b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; min-width: 30px; text-align: right; }
.alpha-quick { white-space: nowrap; padding: 3px 6px; border: 1px solid var(--line); border-radius: 3px; color: var(--mut); font-size: 10px; }
.alpha-quick:hover { color: var(--ink); border-color: var(--mut); }
.search-settings-line { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 10px; }
.settings-summary { font-size: 11px; color: var(--ink-2); text-align: left; }
.settings-summary span { margin-left: 6px; color: var(--mut); }
.prefs { border-bottom: 1px solid var(--line); max-height: 32%; overflow-y: auto; flex-shrink: 0; }
.prefs > .alpha { grid-template-columns: auto minmax(0, 1fr) auto; padding: 0 16px; margin-bottom: 8px; }
.prefs .h { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px 6px; position: sticky; top: 0; background: var(--bg); }
.prefs.collapsed { max-height: none; overflow: hidden; }
.prefs-toggle { width: 100%; text-align: left; padding-bottom: 9px !important; }
.prefs-toggle:hover { background: var(--sunk); }
.prefs-toggle .cap:last-child { display: flex; align-items: center; gap: 7px; }
.prefs-toggle b { color: var(--mut); font-size: 10px; font-weight: 400; }
.prow { display: grid; grid-template-columns: 18px 42px 1fr auto; gap: 9px; align-items: center; padding: 6px 16px; font-size: 11.5px; line-height: 1.45; }
.prow:hover { background: var(--sunk); }
.prow.off .txt, .prow.off .thumb { opacity: .45; }
.prow .thumb { width: 42px; height: 32px; border-radius: 2px; background-color: var(--sunk); background-repeat: no-repeat; }
.prow em { display: block; font-style: normal; color: var(--mark); font-size: 10px; }
.prow input[type=checkbox] { accent-color: var(--ink); margin: 0; }
.tog { width: 28px; height: 16px; border-radius: 10px; background: var(--line); position: relative; transition: background .15s; flex: 0 0 auto; }
.tog::after { content: ''; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: transform .15s var(--ease); box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.tog[aria-checked="true"] { background: var(--pick); }
.tog[aria-checked="true"]::after { transform: translateX(12px); }
.gen { padding: 10px 16px 12px; border-bottom: 1px solid var(--line); font-size: 11px; color: var(--mut); }
.gen .prompt { margin-top: 6px; font-size: 10.5px; color: var(--mark); line-height: 1.5; }
.progress { height: 2px; background: var(--line); margin-top: 8px; overflow: hidden; border-radius: 1px; }
.progress i { display: block; height: 100%; background: var(--ink); transition: width .5s linear; }
.results-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 16px 0; font-size: 10px; color: var(--mut); }
.results-tools [role=group] { display: flex; gap: 2px; padding: 2px; background: var(--sunk); border-radius: 4px; }
.results-tools button { padding: 3px 8px; border-radius: 3px; }
.results-tools button[aria-pressed=true] { color: var(--ink); background: var(--paper); box-shadow: 0 1px 3px #0001; }
.results-hint { margin-left: auto; }
.results { --thumb-min: 140px; flex: 1; min-height: 0; min-width: 0; overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; padding: 14px 12px 30px 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--thumb-min)), 1fr)); grid-auto-rows: 4px; gap: 8px 12px; align-content: start; align-items: start; overscroll-behavior: contain; }
.results:has(.pempty), .results[aria-busy=true]:not(:has(.rcard)) { grid-auto-rows: auto; }
.results.density-small { --thumb-min: 120px; }
.results.density-large { --thumb-min: 240px; }
.rcard { cursor: grab; position: relative; min-width: 0; }
.rcard .shot { width: 100%; display: block; overflow: hidden; border-radius: 3px; min-height: 80px; }
.rcard .shot img { width: 100%; height: auto; object-fit: contain; }
.rcard .preview-trigger { cursor: zoom-in; user-select: none; }
.search-drag-preview { position: fixed; z-index: 100; width: 110px; transform: translate(-50%, -50%); pointer-events: none; padding: 5px; border-radius: 4px; background: var(--paper); box-shadow: 0 4px 20px #0003; font-size: 10px; text-align: center; opacity: .9; }
.search-drag-preview img { width: 100%; height: 70px; object-fit: contain; display: block; margin-bottom: 4px; }
.preview-hint { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); border-radius: 3px; background: #111b; color: white; padding: 6px 9px; line-height: 1.2; font-size: 10px; white-space: nowrap; opacity: 0; pointer-events: none; }
.preview-trigger:hover .preview-hint, .preview-trigger:focus-visible .preview-hint { opacity: 1; }
.rcard .rk { position: absolute; left: 0; top: 0; line-height: 1.5; font-size: 10px; padding: 1px 6px; background: rgba(255,255,255,.92); color: var(--ink-2); font-variant-numeric: tabular-nums; z-index: 1; pointer-events: none; }
.rcard .mv { font-size: 9.5px; margin-left: 4px; }
.rcard .mv.up { color: var(--pick); }
.rcard .mv.dn { color: var(--pend); }
.rcard .mv.nw { color: var(--mark); }
.rcard .add { position: absolute; right: 5px; top: 5px; width: 26px; height: 26px; border-radius: 3px; border: 1px solid #0001; background: rgba(255,255,255,.92); color: var(--ink); display: flex; align-items: center; justify-content: center; opacity: 1; z-index: 1; line-height: 1; }
.rcard:hover .add, .rcard .add:focus-visible { opacity: 1; }
.rcard .placed { position: absolute; right: 5px; bottom: 5px; font-size: 9.5px; line-height: 1.5; padding: 0 5px; background: var(--pick); color: #fff; border-radius: 1px; z-index: 1; }
.rcard .cred { margin-top: 4px; font-size: 10px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.5; }
.rcard .cred b { color: var(--mut); font-weight: 400; }
.rcard .cred a { text-decoration: none; }
.rcard .cred a:hover b { color: var(--ink); text-decoration: underline; }
.rcard .cred .license:hover { color: var(--ink); text-decoration: underline; }
.similar-trigger { margin-top: 3px; padding: 4px 0; font-size: 10px; color: var(--mut); cursor: pointer; }
.similar-trigger:hover { color: var(--ink); text-decoration: underline; }
.rcard .placed { top: 38px; bottom: auto; pointer-events: none; }
.rcard .used { position: absolute; right: 5px; top: 38px; z-index: 1; font-size: 9.5px; line-height: 1.5; padding: 0 5px; background: #fffffff0; color: var(--ink-2); border: 1px solid var(--line); border-radius: 1px; cursor: help; } /* 다른 아카이브에서 쓴 사진 */
.rcard .used.below { top: 58px; }
.selection-bar button.elsewhere { color: var(--link); } /* 누르면 그 아카이브로 건너간다 */
.similar-source { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.similar-source img { width: 40px; height: 40px; object-fit: cover; border-radius: 3px; }
.similar-source > div { flex: 1; min-width: 0; font-size: 11px; }
.similar-source span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mut); }
.similar-source .btn { flex-shrink: 0; }
.results-more { grid-column: 1 / -1; grid-row-end: span 9; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; padding: 16px 0; font-size: 11px; color: var(--mut); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip { font-size: 11px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); color: var(--ink-2); }
.chip:hover { border-color: var(--mut); }
.pempty { grid-column: 1 / -1; color: var(--mut); font-size: 12px; line-height: 1.8; padding: 20px 4px; }
.search-resizer { position: absolute; top: 0; bottom: 0; right: -5px; width: 10px; cursor: col-resize; touch-action: none; z-index: 3; display: flex; align-items: center; justify-content: center; }
.search-resizer span { width: 3px; height: 40px; border-radius: 3px; background: var(--faint); }
.search-resizer:hover, .search-resizer:focus-visible { background: #2f7d4f18; }
.search-resizer:hover span { background: var(--pick); }
.search-preview { padding: 0; border: 1px solid var(--line); border-radius: 8px; width: min(1100px, 94vw); max-width: 94vw; max-height: 94vh; background: var(--paper); color: var(--ink); box-shadow: 0 20px 80px #0003; }
.search-preview::backdrop { background: #181916b8; }
.preview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; color: var(--mut); font-size: 11px; }
.preview-image { position: relative; height: min(65vh, 720px); display: flex; align-items: center; justify-content: center; background: var(--sunk); padding: 10px 48px; }
.preview-image img { max-width: 100%; max-height: 100%; object-fit: contain; }
.preview-image .preview-full { position: absolute; inset: 10px 48px; width: calc(100% - 96px); height: calc(100% - 20px); }
.preview-loading { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); max-width: 85%; border-radius: 4px; padding: 4px 10px; background: #ffffffe8; color: var(--mut); font-size: 11px; }
.preview-image > button { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 44px; border-radius: 4px; background: #fffffff2; border: 1px solid var(--line); font-size: 28px; line-height: 1; }
.preview-image > button:disabled { opacity: .25; cursor: default; }
.preview-prev { left: 8px; }
.preview-next { right: 8px; }
.preview-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; font-size: 11px; }
.preview-foot > div:first-child { min-width: 0; }
.preview-title { font-size: 13px; margin-bottom: 4px; max-height: 3.2em; overflow: auto; }
.preview-actions { display: flex; flex-shrink: 0; flex-wrap: wrap; gap: 8px; }
@media (max-width: 750px) {
  .results-hint { display: none; }
  .preview-foot { flex-direction: column; align-items: stretch; gap: 8px; }
  .preview-image { height: 52vh; padding: 6px 40px; }
  .selection-bar .shortcut, .selection-bar > span { display: none; }
  .selection-bar { max-width: calc(100% - 16px); flex-wrap: wrap; justify-content: center; }
}
@media (max-width: 600px) {
  .plane .hint.keys { display: none; } /* 단축키 안내만 — 좁으면 확대 단추와 겹치고, 터치 기기엔 쓸모가 없다. 영역 그리기 안내는 남긴다 */
}
@media (max-width: 450px) {
  .results.density-medium { --thumb-min: 110px; }
  .panel .ph { padding-left: 12px; padding-right: 12px; }
}
.pempty b { color: var(--ink); font-weight: 500; }
.skel { background: linear-gradient(90deg, var(--sunk), var(--line-2), var(--sunk)); background-size: 200% 100%; animation: sh 1.2s linear infinite; }
@keyframes sh { to { background-position: -200% 0; } }

/* ── 목록 · 기록 보기 ──────────────────────── */
.doc { position: absolute; inset: 0; overflow-y: auto; background: var(--paper); }
.doc-in { max-width: 820px; margin: 0 auto; padding: 34px 40px 80px; }
.doc h2 { font-size: 15px; font-weight: 500; margin: 34px 0 12px; letter-spacing: -.01em; display: flex; justify-content: space-between; align-items: baseline; }
.doc h2:first-child { margin-top: 0; }
.lrow { display: grid; grid-template-columns: 128px 1fr; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.lrow .shot { height: 96px; overflow: hidden; }
.lrow .ttl { font-size: 12.5px; }
.lrow .sub { font-size: 10.5px; color: var(--faint); margin-top: 1px; }
.lrow .sub.elsewhere-line { color: var(--mut); margin-top: 3px; } /* 같은 사진을 쓴 다른 아카이브 */
.timeline { border-left: 1px solid var(--line); margin-left: 6px; }
.tl { position: relative; padding: 0 0 14px 18px; font-size: 12px; }
.tl::before { content: ''; position: absolute; left: -3.5px; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); }
.tl.pref::before { background: var(--pick); }
.tl.gen::before { background: var(--ink); }
.tl.search::before { background: var(--mark); }
.tl .t { font-size: 10px; color: var(--faint); font-variant-numeric: tabular-nums; letter-spacing: .03em; }
pre.md { white-space: pre-wrap; font: 11.5px/1.7 ui-monospace, "Cascadia Code", Consolas, monospace; background: var(--sunk); border: 1px solid var(--line); padding: 16px 18px; border-radius: 3px; color: var(--ink-2); max-height: 520px; overflow: auto; }

/* ── 사전 (그래프) ─────────────────────────── */
.dict { position: fixed; inset: 0; display: grid; grid-template-rows: var(--bar) 1fr; }
.dict .body { position: relative; display: grid; grid-template-columns: 1fr; overflow: hidden; }
.dict .body.with-side { grid-template-columns: 1fr 400px; }
/* 사전 목록 보기 (dict.js TermList) — 그래프는 관계, 목록은 찾기 */
.tlist-wrap { overflow-y: auto; background: var(--paper); padding: 28px 36px 60px; }
.tlist-head h1 { font-size: 20px; font-weight: 500; margin: 0 0 12px; letter-spacing: -.01em; }
.tlist-head h1 .faint { font-size: 12px; font-weight: 400; margin-left: 6px; }
.tlist-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tlist-tools input { flex: 1 1 220px; max-width: 360px; height: 30px; border: 1px solid var(--line); border-radius: 3px; padding: 0 10px; background: #fff; outline: none; font-size: 12px; }
.tlist-tools input:focus { border-color: var(--mut); }
.tlist-tools select { height: 30px; border: 1px solid var(--line); border-radius: 3px; background: #fff; font-size: 12px; padding: 0 6px; max-width: 200px; }
.tlist-count { font-size: 11px; margin-top: 8px; }
.tlist { margin-top: 14px; max-width: 860px; }
.trow { display: grid; grid-template-columns: minmax(90px, 180px) 48px 1fr; gap: 4px 12px; width: 100%; text-align: left; padding: 8px 8px; border-bottom: 1px solid var(--line-2); font-size: 12.5px; align-items: baseline; }
.trow:hover { background: var(--sunk); }
.trow.on { background: var(--sunk); box-shadow: inset 2px 0 0 var(--mark); }
.trow .tname { color: var(--link); display: inline-flex; align-items: center; gap: 6px; }
.trow .tbody-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mark); }
.trow .tuses { color: var(--mut); font-size: 11px; font-variant-numeric: tabular-nums; }
.trow .tarcs { color: var(--mut); font-size: 11px; }
.trow .tbody { grid-column: 1 / -1; color: var(--ink-2); font-size: 11.5px; line-height: 1.6; }
@media (max-width: 750px) { .tlist-wrap { padding: 20px 16px 60px; } .trow { grid-template-columns: 1fr 44px; } .trow .tarcs { grid-column: 1 / -1; } }
.gwrap { position: relative; overflow: hidden; background: var(--paper); }
.gwrap svg { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.gwrap svg.dragging { cursor: grabbing; }
.gl { stroke: var(--line); }
.gl.uses { stroke: #dcdad2; }
.gl.co { stroke: #ebe9e2; stroke-dasharray: 2 3; }
.gl.archive { stroke: var(--link); stroke-opacity: .5; }
.gl.hl { stroke: var(--mark); stroke-opacity: .9; }
.gn text { font-size: 11px; fill: var(--ink-2); paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
.gn.archive text { font-size: 12px; fill: var(--ink); font-weight: 500; }
.gn circle { cursor: pointer; }
.gn.term circle { fill: var(--paper); stroke: var(--mut); stroke-width: 1.2; }
.gn.term.has-body circle { fill: var(--mark); stroke: var(--mark); }
.gn.archive circle { fill: var(--ink); }
.gn.sel circle { stroke: var(--mark); stroke-width: 3; }
.gn.dim { opacity: .22; }
.gl.dim { opacity: .15; }
.glegend { position: absolute; left: 24px; bottom: 20px; font-size: 10.5px; color: var(--mut); display: flex; gap: 16px; align-items: center; background: rgba(255,255,255,.85); padding: 4px 8px; border-radius: 3px; }
.glegend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.gtitle { position: absolute; left: 24px; top: 22px; max-width: 420px; pointer-events: none; }
.gtitle h1 { font-size: 22px; font-weight: 500; letter-spacing: -.02em; margin: 0 0 6px; }
.gtitle p { margin: 0; font-size: 12px; color: var(--mut); line-height: 1.7; }
.side { border-left: 1px solid var(--line); background: var(--bg); overflow-y: auto; }
.side-in { padding: 22px 24px 60px; }
.side h2 { font-size: 22px; font-weight: 500; letter-spacing: -.02em; margin: 4px 0 2px; }
.side .sub { font-size: 11px; color: var(--mut); }
.side h3 { font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--mut); font-weight: 400; margin: 26px 0 8px; padding-bottom: 5px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; }
.side textarea { width: 100%; min-height: 96px; border: 1px solid var(--line); border-radius: 3px; padding: 9px 11px; resize: vertical; outline: none; background: var(--paper); line-height: 1.7; font-size: 12.5px; }
.side textarea:focus { border-color: var(--mut); }
.mention { padding: 9px 0; border-bottom: 1px solid var(--line-2); font-size: 12px; line-height: 1.65; display: grid; grid-template-columns: auto 1fr; gap: 10px; }
.mention .mthumb { width: 54px; height: 40px; border-radius: 2px; background-color: var(--sunk); background-repeat: no-repeat; }
.mention .where { font-size: 10.5px; color: var(--mut); }
.mention .where button { color: var(--link); }
.mention .where button:hover { text-decoration: underline; }
.mention mark { background: rgba(122,92,46,.14); color: inherit; padding: 0 1px; border-radius: 2px; }
.minigrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.minigrid .shot { aspect-ratio: 1; overflow: hidden; }

/* ── 모달 · 상태 · 알림 ────────────────────── */
.scrim { position: fixed; inset: 0; background: rgba(17,17,16,.22); z-index: 80; display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; padding-bottom: 24px; overflow-y: auto; }
.modal { width: min(520px, calc(100vw - 32px)); background: var(--paper); border: 1px solid var(--line); border-radius: 5px; box-shadow: 0 20px 60px rgba(17,17,16,.18); padding: 22px 24px 20px; font-size: 12.5px; }
.modal h2 { font-size: 15px; font-weight: 500; margin: 0 0 4px; }
.modal h3 { font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--mut); font-weight: 400; margin: 22px 0 8px; }
.modal p { margin: 0 0 8px; color: var(--ink-2); line-height: 1.7; }
.modal .fine { font-size: 11px; color: var(--mut); line-height: 1.7; }
.modal .fine code { background: var(--sunk); border-radius: 2px; padding: 0 4px; font-family: inherit; font-size: 10.5px; color: var(--ink-2); }
.modal .restore { margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 3px; background: var(--sunk); }
.modal label.btn { cursor: pointer; }
.modal .fine b { color: var(--ink-2); font-weight: 500; }
.modal .fine b.warn { color: var(--pend); }
.modal input[type=password], .modal input[type=text] { width: 100%; height: 34px; border: 1px solid var(--line); border-radius: 3px; padding: 0 10px; outline: none; font-size: 12.5px; }
.modal input:focus { border-color: var(--mut); }
.modal .row { display: flex; gap: 8px; margin-top: 10px; align-items: center; flex-wrap: wrap; }
.modal .row .grow { flex: 1; }
/* 안 쓰는 사진 미리 보기 (설정 → 저장 공간) — 지우기 전에 무엇이 지워지는지 본다 */
.modal .blob-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; margin-top: 10px; max-height: 240px; overflow-y: auto; }
.modal .blob-grid figure { margin: 0; }
.modal .blob-grid img, .modal .blob-grid .nb { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--sunk); border-radius: 2px; }
.modal .blob-grid .nb { display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--faint); }
.modal .blob-grid figcaption { font-size: 9.5px; color: var(--faint); margin-top: 2px; font-variant-numeric: tabular-nums; }
.status { position: fixed; right: 16px; bottom: 50px; z-index: 60; font-size: 10.5px; color: var(--mut); background: rgba(255,255,255,.94); border: 1px solid var(--line); border-radius: 3px; padding: 4px 9px; display: flex; gap: 7px; align-items: center; font-variant-numeric: tabular-nums; }
.status i { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); display: inline-block; }
.status.loading i { background: var(--pend); animation: pulse 1s infinite; }
.status.ready i { background: var(--pick); }
.status.error i { background: var(--danger); }
.status button { color: var(--link); }
.toasts { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.toast { background: var(--ink); color: var(--paper); font-size: 12px; padding: 8px 14px; border-radius: 4px; box-shadow: 0 6px 20px rgba(0,0,0,.14); max-width: min(560px, 90vw); line-height: 1.55; pointer-events: auto; animation: tin .18s var(--ease); }
.toast.err { background: var(--danger); }
.toast.warn { background: var(--pend); }
@keyframes tin { from { opacity: 0; transform: translateY(6px); } }

@media (max-width: 880px) {
  .gallery { --archive-columns: 2; }
  .scatter { padding-left: 24px; padding-right: 24px; column-gap: 24px; }
  .scatter > .acard-wrap, .proj-cards > .acard-wrap { grid-column: auto !important; margin-top: 0 !important; }
  .acard-wrap:nth-child(even) { width: 86%; justify-self: end; }
  .meta { gap: 24px; }
  .dict .body.with-side { grid-template-columns: 1fr; }
  .dict .side { position: absolute; right: 0; top: 0; bottom: 0; width: min(400px, 92vw); box-shadow: -8px 0 24px rgba(0,0,0,.08); }
}
@media (max-width: 520px) {
  .gallery { --archive-columns: 1; }
  .scatter { padding-left: 24px; padding-right: 24px; }
  .acard-wrap { max-width: 360px; }
}

/* ── 나의 언어 — 닮은 참조 · 이어 붙인 말 · 보통의 T / 나의 T ── */
.sim { margin-top: 10px; border-top: 1px solid var(--line-2); padding-top: 8px; }
.sim .cap { display: flex; justify-content: space-between; margin-bottom: 4px; }
.simrow { display: grid; grid-template-columns: 44px 1fr; gap: 8px; padding: 5px 0; font-size: 11px; line-height: 1.45; border-bottom: 1px solid var(--line-2); }
.simrow:last-child { border-bottom: 0; }
.simrow .thumb { width: 44px; height: 33px; border-radius: 2px; background-color: var(--sunk); background-repeat: no-repeat; padding: 0; border: 0; cursor: pointer; }
.simrow .thumb:hover { outline: 1px solid var(--ink); outline-offset: 1px; }
.simrow .txt { min-width: 0; }
.simrow .where { color: var(--faint); font-size: 10px; margin-top: 1px; }
.simrow.close .where b { color: var(--pick); }
.adds { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.chip-add { font-size: 10px; line-height: 16px; padding: 0 6px; border: 1px solid var(--link-line); border-radius: 20px; color: var(--link); background: var(--paper); }
.chip-add:hover { border-color: var(--link); }
.chip-add.on { display: inline-flex; align-items: center; gap: 4px; border-style: solid; background: #f4f8f5; }
.chip-add.on .lnk { border: 0; cursor: pointer; }
.chip-add.on button { color: var(--faint); font-size: 11px; line-height: 1; }
.chip-add.on button:hover { color: var(--danger); }
.memo em.linked { color: var(--link); }
.memo em.linked .lnk { border-bottom: 0; }
.rowlabel { font-size: 11px; color: var(--ink-2); margin: 0 0 6px; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.rowlabel .en { font-size: 10.5px; }
.mcell { position: relative; }
.mcell .shot { aspect-ratio: 1; overflow: hidden; }
.mine-badge { position: absolute; left: 0; bottom: 0; font-size: 9px; line-height: 1.6; padding: 0 4px; background: var(--mark); color: #fff; }
.madd { position: absolute; right: 3px; top: 3px; width: 18px; height: 18px; border-radius: 2px; background: rgba(255,255,255,.92); color: var(--ink); font-size: 13px; line-height: 16px; opacity: 0; transition: opacity .12s; }
.mcell:hover .madd, .madd:focus-visible { opacity: 1; }
.side select { height: 24px; border: 1px solid var(--line); border-radius: 3px; background: var(--paper); font-size: 11px; padding: 0 4px; }
.board-frame { width: 100%; height: 72vh; min-height: 420px; border: 1px solid var(--line); background: #fff; }
/* 좁으면 단추 줄이 제목 아래로 — 제목이 한 글자씩 꺾이고 인쇄 단추가 잘렸다 (390px, 2026-09-24) */
.doc h2.board-head { flex-wrap: wrap; row-gap: 10px; align-items: center; white-space: nowrap; }
.board-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.board-only { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 400; color: var(--ink-2); margin-right: 6px; cursor: pointer; white-space: nowrap; }

/* ── 렌즈 — DESIGN.md 처럼 AI 에게 주는 나의 설계 취향 명세 (js/ui/lens.js) ── */
.lens { min-height: 100%; }
.lens-in { max-width: 980px; margin: 0 auto; padding: 34px 40px 90px; }
.lens-head h1 { font-size: 26px; font-weight: 500; letter-spacing: -.02em; margin: 0 0 10px; }
.lens-head .lead { color: var(--mut); font-size: 13px; max-width: 720px; margin: 0 0 8px; }
.lens-head .lead b { color: var(--ink); font-weight: 500; }
.lens-head .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 14px 0 6px; }
.lens .fine { font-size: 11px; color: var(--mut); line-height: 1.7; }
.lens-secs { margin-top: 26px; border-top: 1px solid var(--ink); }
.lens-sec { padding: 16px 0; border-bottom: 1px solid var(--line-2); }
.lens-sec-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.lens-sec-h h2 { font-size: 14px; font-weight: 600; margin: 0; }
.lens .by { font-size: 10px; padding: 1px 7px; border-radius: 20px; border: 1px solid var(--line); color: var(--mut); white-space: nowrap; }
.lens .by.ai { color: var(--mark); border-color: #e3d6bf; background: #fbf7ef; }
.lens .by.me { color: var(--pick); border-color: #cfe0d5; background: #f3f9f5; }
.lens-text { width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 3px; padding: 8px 10px; font-size: 13px; line-height: 1.7; resize: vertical; outline: none; background: #fff; overflow: hidden; }
.lens-text:focus { border-color: var(--mut); }
.lens-terms { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.lens-terms .t { font-size: 11.5px; border: 1px solid var(--line); border-radius: 20px; padding: 1px 8px; color: var(--ink-2); }
.lens-terms .t em, .lens-kinds em { font-style: normal; color: var(--faint); font-size: 10.5px; margin-left: 2px; }
.lens-rules { margin: 0 0 8px; padding-left: 18px; font-size: 13px; line-height: 1.8; }
.lens-ev { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; }
.lens-ev .chip { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; border: 1px solid var(--line); border-radius: 3px; padding: 1px 5px 1px 1px; background: #fff; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.lens-ev .chip:not(.taste) { padding-left: 5px; }
.lens-ev .chip:hover { border-color: var(--mut); }
.lens-ev .chip.gone { color: var(--faint); padding-left: 5px; }
.lens-ev .chip.more { color: var(--mut); border-style: dashed; cursor: default; }
.lens-ev .th { width: 26px; height: 20px; border-radius: 2px; background-color: var(--sunk); background-repeat: no-repeat; }
.lens-block { margin-top: 30px; }
.lens-block h2 { font-size: 14px; font-weight: 600; margin: 0 0 10px; }
.lens-block h2 .fine { font-weight: 400; }
.lens-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 16px; }
.lens-kinds .kh { font-size: 11px; color: var(--mut); border-bottom: 1px solid var(--line); padding-bottom: 4px; margin-bottom: 6px; }
.lens-kinds .kt { display: flex; align-items: center; gap: 4px; font-size: 12.5px; padding: 2px 0; }
.lens-kinds .kt > span:first-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lens-kinds select { margin-left: auto; font-size: 10.5px; border: 1px solid var(--line); border-radius: 3px; background: #fff; color: var(--mut); padding: 1px 2px; }
.lens-pal { display: flex; flex-wrap: wrap; gap: 14px; }
.lens-pal .sw { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.lens-pal .sw span { width: 28px; height: 28px; border-radius: 3px; border: 1px solid var(--line); }
.lens-pal code, .lens-frag code { font-size: 11.5px; }
.lens-bar { display: flex; height: 14px; margin: 10px 0 4px; border-radius: 2px; overflow: hidden; border: 1px solid var(--line); }
.lens-frag { margin: 0; padding-left: 18px; font-size: 12px; line-height: 1.9; }
.lens-evs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.lens-evs .ev { display: flex; gap: 8px; text-align: left; align-items: flex-start; padding: 6px; border: 1px solid var(--line-2); border-radius: 3px; background: #fff; }
.lens-evs .ev:hover { border-color: var(--mut); }
.lens-evs .th { flex: 0 0 96px; width: 96px; height: 72px; border-radius: 2px; background-color: var(--sunk); background-repeat: no-repeat; }
.lens-evs .tx { font-size: 11.5px; line-height: 1.55; color: var(--ink-2); }
.lens-evs .tx b { color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 750px) { .lens-in { padding: 24px 16px 70px; } }
/* 수동 그룹 — 기본은 이미지 우선. 함께 보기는 카메라를 바꾸지 않는 넓은 읽기 화면. */
.plane.group-open{right:0}
.group-frame{position:absolute;background:var(--group-tint);border:1px solid var(--group-edge);border-radius:8px;pointer-events:none}
.group-frame.active{border-color:var(--group-active);box-shadow:0 0 0 1px var(--group-edge)}
.group-frame.active>button{color:var(--ink)}
.group-frame>button{position:absolute;left:8px;top:5px;max-width:calc(100% - 16px);height:26px;padding:2px 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;background:transparent;color:var(--ink-2,#555);font-size:12px;text-align:left;border:0}
.group-frame>button span{margin-left:10px;color:var(--muted,#888)}
.group-color-control{display:inline-flex;align-items:center;gap:5px;padding:2px 6px;font-size:11px;color:var(--ink-2);white-space:nowrap}
.group-color-control>i{width:13px;height:13px;border:1px solid #0002;border-radius:50%;flex-shrink:0}
.group-color-control select{max-width:100px;padding:4px 2px;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer}
.group-color-control select:focus-visible{outline:2px solid var(--pick);outline-offset:2px;border-radius:2px}
.spread-summary .group-color-control{margin:0 0 16px}
.group-nav{position:absolute;left:16px;top:12px;z-index:21;max-width:170px}
.group-nav select{width:100%;max-width:170px;background:var(--paper,#fafaf7);border:1px solid var(--line,#ddd);border-radius:4px;padding:6px 8px;font:inherit;font-size:12px;color:var(--ink-2,#555)}
.plane:has(.group-nav) .selection-bar{top:52px}
.group-panel{position:absolute;inset:0;max-width:100%;box-sizing:border-box;z-index:75;overflow-y:auto;padding:28px 36px 48px;background:var(--paper,#fafaf7);user-select:text;touch-action:auto}
.group-panel header{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;gap:12px}
.group-panel .eyebrow{font-size:11px;color:var(--muted,#888)}
.group-panel h2{font-size:20px;font-weight:500;margin:6px 0 0;overflow-wrap:anywhere}
.group-panel header>div{min-width:0}
.group-panel header>button{flex-shrink:0}
.group-field{display:block;margin-bottom:18px}
.group-field>span{display:block;font-size:12px;margin-bottom:8px;color:var(--ink-2,#555)}
.group-field input,.group-field textarea{box-sizing:border-box;width:100%;padding:10px 12px;background:transparent;border:1px solid var(--line,#ddd);border-radius:4px;font:inherit;line-height:1.65;color:inherit;user-select:text}
.group-field textarea{min-height:170px;resize:vertical;font-size:14px}
.group-field input:focus,.group-field textarea:focus{outline:2px solid #819778;outline-offset:2px}
.group-fine{font-size:11px;line-height:1.65;color:var(--muted,#888);overflow-wrap:anywhere}
.group-panel h3{margin:28px 0 12px;font-size:13px;font-weight:500}
.group-panel h3 span{margin-left:6px;color:var(--muted,#888)}
.group-members{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:32px 24px;align-items:start}
.group-member{padding:16px 0;min-width:0;max-width:640px}
.group-locate{display:flex;align-items:center;gap:10px;width:100%;padding:0;background:transparent;border:0;text-align:left;font-size:12px}
.group-locate{margin-top:12px}
.group-locate>span:first-of-type{flex:1;min-width:0}
.group-locate small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted,#888);margin-top:5px}
.group-member-text{font-size:14px;line-height:1.85;margin-top:12px;overflow-wrap:anywhere}
.group-panel footer{display:flex;align-items:center;gap:12px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line,#ddd)}
.group-panel footer button{font-size:12px;padding:6px 10px}
.group-panel footer span{font-size:11px;color:var(--muted,#888)}
.spread-summary{max-width:680px;margin-bottom:24px}
.spread-summary summary{font-size:12px;color:var(--mut);cursor:pointer;margin-bottom:12px}
.group-member .group-field textarea{min-height:115px;border:0;border-bottom:1px solid var(--line);padding:8px 0}
.spread-image{position:relative;width:100%;overflow:hidden;background:var(--sunk);display:flex;align-items:center;justify-content:center}
.spread-image img{display:block;width:100%;height:100%;object-fit:contain}
.spread-image>span{font-size:12px;padding:18px;color:var(--mut)}
.canvas-display{position:absolute;right:16px;top:12px;z-index:21;display:flex;gap:6px}
.canvas-display button{padding:6px 10px;background:var(--paper);border:1px solid var(--line);border-radius:4px;font-size:12px;color:var(--mut)}
.plane:has(.canvas-details) .selection-bar{top:52px;max-width:calc(100% - 24px);flex-wrap:wrap;justify-content:center;white-space:normal}
.plane .o[hidden]{display:none!important}
.memo-peek{display:none;margin-top:6px;color:var(--mut);font-size:11px;border-bottom:1px dotted var(--line)}
.plane.calm:not(.region-tool) .o:not(.sel) .memos,.plane.calm .o:not(.sel) .imemo{display:none}
.plane.regions-hidden:not(.region-tool) .region:not(.hl){visibility:hidden}
.plane.calm .o:not(.sel) .memo-peek{display:block}
.canvas-stack{position:absolute;padding:10px 12px;background:linear-gradient(var(--group-tint),var(--group-tint)),var(--paper);border:1px solid var(--group-edge);box-shadow:4px 4px 0 var(--paper),5px 5px 0 var(--group-edge),8px 8px 0 var(--paper),9px 9px 0 var(--group-edge);box-sizing:border-box;cursor:grab}
.canvas-stack.sel{outline:1px solid var(--pick);outline-offset:6px}
.stack-cover{display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--sunk);pointer-events:none}
.stack-note{white-space:pre-wrap;overflow:hidden;padding:12px;font-size:13px;line-height:1.7;max-height:100%;overflow-wrap:anywhere}
.stack-name{font-size:12px;margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stack-credit{font-size:10px;line-height:16px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stack-actions{display:flex;gap:8px;margin-top:6px}
.stack-actions button{padding:3px 6px;font-size:11px;background:var(--sunk);border-radius:3px}
@media(max-width:800px){.group-panel{padding:20px}.group-nav{max-width:130px}.group-nav select{max-width:130px}}
@media(max-width:480px){.group-panel header{align-items:flex-start;flex-direction:column}.group-members{grid-template-columns:1fr}.canvas-display{right:10px}.canvas-display button{font-size:11px;padding:6px}.group-nav{left:10px;top:50px}}