/* 스냅샷 기록카드 — 화면 조각 (모듈 D:\snapshot 소유).
   호스트의 CSS 변수(--border · --card-bg · --link · --text-muted)만 빌려 쓰고,
   선택자는 전부 `snap-` 로 시작한다 — 호스트 스타일과 섞이지 않게. */

/* ---- 머리 줄 단추 둘 ---- */
.snap-cam, .snap-log { padding: 0 5px; min-height: 24px; line-height: 1; vertical-align: middle; }
.snap-cam svg, .snap-log svg { vertical-align: middle; stroke: currentColor; }
.snap-cam:disabled { opacity: .45; cursor: default; }
/* 머리 줄 그림 단추는 **다 같은 색**이다 (대표님 2026-09-28). 이 쪽에 카드가 있나는
   흐리기가 아니라 **파랑 + 개수**로만 가른다 — 흐린 색은 꺼진 단추로 읽힌다. */
.snap-log.snap-has { color: var(--link, #1a5fb4); border-color: var(--link, #1a5fb4); font-weight: 600; opacity: 1; }
.snap-log-n { font-size: 11px; margin-left: 3px; }

/* ---- 창 (카드 · 불러오기) ---- */
.snap-win { position: fixed; z-index: 80; background: var(--card-bg, #fff); color: inherit;
            border: 1px solid var(--border, #d0d7de); border-radius: 8px;
            box-shadow: 0 8px 28px rgba(0,0,0,.22); display: flex; flex-direction: column; }
.snap-win.hidden { display: none; }
.snap-card { width: min(1080px, 94vw); max-height: 92vh; top: 4vh; left: 50%; transform: translateX(-50%); }
.snap-list { width: min(560px, 92vw); max-height: 70vh; top: 12vh; left: 50%; transform: translateX(-50%); }

.snap-head { display: flex; align-items: center; gap: 8px; padding: 7px 10px;
             border-bottom: 1px solid var(--border, #d0d7de); cursor: move; user-select: none; }
.snap-head b { font-size: 13px; }
.snap-sub { font-size: 12px; color: var(--text-muted, #6b7280); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snap-x { margin-left: auto; border: 0; background: transparent; cursor: pointer; font-size: 15px; line-height: 1; color: inherit; padding: 0 2px; }

.snap-body { display: flex; gap: 12px; padding: 10px; overflow: auto; }
.snap-shot { flex: 1 1 58%; min-width: 0; background: #e9ecef; border: 1px solid var(--border, #d0d7de);
             border-radius: 4px; display: flex; align-items: flex-start; justify-content: center; overflow: auto; max-height: 72vh; }
.snap-shot canvas, .snap-shot img { max-width: 100%; height: auto; display: block; background: #fff; }
.snap-form { flex: 1 1 42%; min-width: 300px; display: flex; flex-direction: column; gap: 7px; }

.snap-row { display: flex; flex-direction: column; gap: 3px; }
.snap-row > label { font-size: 11px; color: var(--text-muted, #6b7280); }
.snap-row input, .snap-row textarea { font: inherit; font-size: 13px; padding: 4px 6px;
             border: 1px solid var(--border, #d0d7de); border-radius: 4px; background: var(--card-bg, #fff); color: inherit; width: 100%; box-sizing: border-box; }
.snap-row textarea { resize: vertical; min-height: 44px; }
.snap-note { display: flex; gap: 4px; align-items: flex-start; }
.snap-note textarea { min-height: 38px; }
.snap-note-x { border: 1px solid var(--border, #d0d7de); border-radius: 4px; background: var(--card-bg, #fff);
               cursor: pointer; font-size: 12px; line-height: 1; padding: 4px 6px; color: inherit; }
.snap-note-add { align-self: flex-start; font: inherit; font-size: 11px; padding: 2px 8px;
                 border: 1px solid var(--border, #d0d7de); border-radius: 4px; background: var(--card-bg, #fff); cursor: pointer; color: inherit; }

.snap-foot { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--border, #d0d7de); }
.snap-foot .snap-hint { font-size: 11px; color: var(--text-muted, #6b7280); margin-right: auto; }
.snap-foot button { font: inherit; font-size: 12px; padding: 4px 10px; border: 1px solid var(--border, #d0d7de);
                    border-radius: 6px; background: var(--card-bg, #fff); color: inherit; cursor: pointer; }
.snap-foot .snap-save { background: var(--link, #1a5fb4); color: #fff; border-color: var(--link, #1a5fb4); font-weight: 600; }
.snap-foot .snap-del { color: #b3261e; }

/* ---- 불러오기 줄 [날짜 · 제목 · 경유] ---- */
.snap-rows { padding: 6px; overflow: auto; }
.snap-r { display: flex; gap: 8px; align-items: baseline; padding: 5px 7px; border-radius: 4px; cursor: pointer; }
.snap-r:hover { background: var(--header-bg, #f2f4f7); }
.snap-r-d { font-size: 11px; color: var(--text-muted, #6b7280); white-space: nowrap; }
.snap-r-t { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snap-r-v { font-size: 11px; color: var(--text-muted, #6b7280); white-space: nowrap; }
.snap-empty { padding: 14px; font-size: 12px; color: var(--text-muted, #6b7280); text-align: center; }

@media (max-width: 760px) {
  .snap-body { flex-direction: column; }
  .snap-form { min-width: 0; }
  .snap-shot { max-height: 40vh; }
}

/* ---- 사례 층 (2026-09-27) ---- */
.snap-sec { font-size: 11px; font-weight: 700; color: var(--text-muted, #6b7280);
            border-bottom: 1px solid var(--border, #d0d7de); padding-bottom: 3px; margin-top: 4px; }
.snap-sec:first-child { margin-top: 0; }
.snap-pick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px;
             background: var(--header-bg, #f2f4f7); border-radius: 6px; padding: 6px 8px; }
.snap-pick label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.snap-pick-sel { font: inherit; font-size: 12px; flex: 1 1 160px; min-width: 0; padding: 3px 5px;
                 border: 1px solid var(--border, #d0d7de); border-radius: 4px; background: var(--card-bg, #fff); color: inherit; }

.snap-r-s { color: var(--text-muted, #6b7280); }

/* ---- [사례] 탭 ---- */
.snap-cases { display: flex; gap: 12px; align-items: flex-start; }
.snap-cases-left { flex: 0 0 340px; max-width: 40%; }
.snap-cases-right { flex: 1 1 auto; min-width: 0; max-height: calc(100vh - 130px); overflow: auto; }
.snap-cases-find { display: flex; gap: 4px; }
.snap-cases-find input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 13px; padding: 4px 6px;
                         border: 1px solid var(--border, #d0d7de); border-radius: 4px; background: var(--card-bg, #fff); color: inherit; }
.snap-cases-find button { font: inherit; font-size: 12px; padding: 3px 10px; border: 1px solid var(--border, #d0d7de);
                          border-radius: 4px; background: var(--card-bg, #fff); color: inherit; cursor: pointer; }
.snap-cases-count { font-size: 11px; color: var(--text-muted, #6b7280); padding: 6px 2px; }
.snap-cases-list { max-height: calc(100vh - 175px); overflow: auto; }
.snap-case-r { padding: 6px 8px; border-radius: 4px; cursor: pointer; border-bottom: 1px solid var(--border, #d0d7de); }
.snap-case-r:hover { background: var(--header-bg, #f2f4f7); }
.snap-case-r.snap-on { background: var(--link, #1a5fb4); color: #fff; }
.snap-case-r.snap-on .snap-case-m span { color: #dbe7ff; }
.snap-case-t { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snap-case-m { display: flex; gap: 8px; flex-wrap: wrap; font-size: 11px; color: var(--text-muted, #6b7280); margin-top: 2px; }
.snap-case-head { border-bottom: 1px solid var(--border, #d0d7de); padding-bottom: 8px; margin-bottom: 10px; }
.snap-case-head h3 { margin: 0 0 4px; font-size: 15px; }
.snap-case-p { font-size: 13px; margin-top: 4px; }
.snap-case-p b { font-size: 11px; color: var(--text-muted, #6b7280); margin-right: 5px; }
.snap-case-card { margin-bottom: 16px; }
/* 줄은 **가운데 맞춤**이다 — 글자 밑줄(baseline)로 맞추면 그림이 든 단추만 어긋난다
   (대표님 2026-09-28 "버튼 너무 삐뚤삐뚤해"). 단추 넷은 높이·여백을 하나로 둔다. */
.snap-case-cn { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 4px; flex-wrap: wrap; }
.snap-case-src { font-size: 11px; color: var(--text-muted, #6b7280); }
.snap-case-go, .snap-case-dl, .snap-case-draw, .snap-case-edit {
  display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; line-height: 1;
  font: inherit; font-size: 11px; border: 1px solid var(--border, #d0d7de);
  border-radius: 4px; background: var(--card-bg, #fff); color: inherit; cursor: pointer;
  text-decoration: none; white-space: nowrap; box-sizing: border-box; vertical-align: middle; }
.snap-case-draw svg { display: block; width: 13px; height: 13px; flex: 0 0 auto; }
.snap-case-card img { max-width: 100%; height: auto; display: block; border: 1px solid var(--border, #d0d7de); background: #fff; }
.snap-case-notes p { font-size: 13px; margin: 5px 0 0; }

@media (max-width: 900px) {
  .snap-cases { flex-direction: column; }
  .snap-cases-left { flex: 1 1 auto; max-width: none; width: 100%; }
}

/* ---- 스냅샷 상세편집 진입점 · 큰 편집 창 (2026-09-27) ---- */
.snap-sp { flex: 1 1 auto; }
.snap-left { flex: 1 1 58%; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.snap-left .snap-shot { flex: 1 1 auto; }
.snap-edit { font: inherit; font-size: 13px; font-weight: 600; padding: 9px 12px; cursor: pointer;
             border: 1px solid var(--link, #1a5fb4); border-radius: 6px;
             background: var(--link, #1a5fb4); color: #fff; }
.snap-edit.hidden { display: none; }

/* 상세편집은 **고정창**이다 — 화면을 통째로 쓴다(대표님 2026-09-28 "가능한 모든 화면을 다 차지해야돼").
   끌지 않으므로 머리 줄 커서도 화살표, 테두리·모서리·그림자 없음. 여백은 도면에 양보한다. */
.snap-editwin { position: fixed; z-index: 85; inset: 0; width: auto; height: auto;
                max-height: none; top: 0; left: 0; transform: none;
                border: 0; border-radius: 0; box-shadow: none; }
.snap-editwin .snap-head { cursor: default; padding: 5px 10px; }
.snap-editwin .snap-head b { font-size: 12px; }
.snap-edit-save { font: inherit; font-size: 12px; padding: 2px 12px; margin-right: 6px;
                  border: 1px solid var(--border, #d0d7de); background: var(--card-bg, #fff); color: inherit; cursor: pointer; }
.snap-edit-save[disabled] { opacity: .45; cursor: default; }
.snap-edit-tools { display: flex; align-items: center; gap: 6px; padding: 3px 10px;
                   border-bottom: 1px solid var(--border, #d0d7de); font-size: 11px; color: var(--text-muted, #6b7280); }
.snap-edit-stage { flex: 1 1 auto; min-height: 0; overflow: auto; background: #e9ecef; display: flex;
                   align-items: center; justify-content: center; padding: 0; }
.snap-edit-stage img { display: block; background: #fff; }
/* 확대·축소는 IPC 뷰어와 같은 규칙 (+ x1.25 · - /1.25 최소 0.5 · 맞춤). 키운 그림은 스테이지가 스크롤한다. */
.snap-edit-stage.snap-zoomed { align-items: flex-start; justify-content: flex-start; }
.snap-z { font: inherit; font-size: 12px; min-width: 26px; padding: 1px 7px; line-height: 1.5;
          border: 1px solid var(--border, #d0d7de); background: var(--card-bg, #fff); color: inherit; cursor: pointer; }
.snap-z-fit { min-width: 0; }
.snap-z-now { font-size: 11px; color: var(--text-muted, #6b7280); min-width: 38px; }

/* ---- 편집 도구 (항상 열린 줄) ---- */
.snap-bar { width: 1px; height: 16px; background: var(--border, #d0d7de); margin: 0 4px; }
.snap-t, .snap-w, .snap-u, .snap-clr, .snap-sim {
  font: inherit; font-size: 12px; min-width: 26px; padding: 1px 7px; line-height: 1.5;
  border: 1px solid var(--border, #d0d7de); background: var(--card-bg, #fff); color: inherit; cursor: pointer; }
.snap-t svg, .snap-u svg, .snap-clr svg { display: block; margin: 0 auto; }   /* 그림 단추는 IPC 펜과 같은 svg */
.snap-t.on, .snap-w.on { border-color: var(--link, #1a5fb4); color: var(--link, #1a5fb4); font-weight: 600; }
/* 배선 맞춤 단추의 **CTRL** 표시 — Ctrl+왼클릭이 접점에서 접점까지 긋는 길이다 */
.snap-t { position: relative; }
.snap-t-kbd { position: absolute; right: -1px; bottom: -3px; font-size: 7px; line-height: 1;
              letter-spacing: -.02em; padding: 1px 2px; border-radius: 2px;
              background: var(--link, #1a5fb4); color: #fff; font-weight: 600; }
.snap-c { width: 18px; height: 18px; border: 2px solid transparent; border-radius: 50%; cursor: pointer; padding: 0; }
.snap-c.on { border-color: var(--link, #1a5fb4); }
.snap-hint { font-size: 11px; color: var(--text-muted, #6b7280); }
/* 배선 맞춤 시뮬레이터로 가는 문 (관리자만) — 정답지를 만들고 채점하는 낱장 화면 */
.snap-simlink { font-size: 11px; color: var(--text-muted, #6b7280); text-decoration: none;
                border: 1px solid var(--border, #d0d7de); border-radius: 3px; padding: 2px 6px; margin-left: 6px; }
.snap-simlink:hover { color: var(--link, #1a5fb4); border-color: var(--link, #1a5fb4); }
.snap-paint { position: relative; display: inline-block; line-height: 0; background: #fff; }
.snap-cv { position: absolute; left: 0; top: 0; touch-action: none; cursor: crosshair; }
/* 그 자리에 뜨는 입력칸 — 글자·설명 쪽지를 적는다 (Enter 로 확정 · Shift+Enter 줄바꿈 · Esc 버림) */
.snap-input { position: absolute; z-index: 3; min-width: 140px; min-height: 26px; padding: 3px 6px;
              font: inherit; font-size: 13px; line-height: 1.35; resize: both;
              border: 1px solid var(--link, #1a5fb4); background: #fff8c4; color: #222; }
.snap-edit-stage.snap-grabbing { cursor: grabbing; }
.snap-edit-stage.snap-grabbing .snap-cv { cursor: grabbing; }
.memo-sp { flex: 1 1 auto; }