/* =====================================================================
   ksound 스타일시트  (편집 안내는 DESIGN.md 참고)

   [목차]
     1) 디자인 변수(:root)  ← 색·글꼴·너비를 여기서 한 번에 바꿈
     2) 공통 요소           .btn / input / .field / .msg 등
     3) 로그인·회원가입      #login-view, #signup-view
     4) 메인(리스트)         #main-view, .list
     5) 상세                #detail-view
     6) 추가 창(모달)        #add-modal
     7) 사진 확대 팝업        #photo-popup
     8) 페이지별 커스터마이즈  ← 특정 페이지만 따로 손볼 때 여기에!
   ===================================================================== */

:root {
  /* ---- (1) 색상: 값만 바꾸면 앱 전체 색이 바뀝니다 ---- */
  --bg: #0f1220;           /* 전체 배경 */
  --card: #1a1f36;         /* 카드·헤더·리스트 항목 배경 */
  --panel: #232a4a;        /* 입력창 배경 */
  --line: #333c63;         /* 테두리·구분선 */
  --text: #e8ebf7;         /* 기본 글자색 */
  --muted: #8b93b8;        /* 흐린 글자(라벨·설명) */
  --primary: #4f7cff;      /* 강조색(주요 버튼·브랜드) */
  --primary-2: #3a63e0;    /* 강조색 호버/눌림 */
  --danger: #e0533a;       /* 삭제 버튼 */
  --ok: #34c77b;           /* 성공 메시지 */
  --warn: #e0a83a;         /* 임시 보관(미전송) 표시 */
  --brand: var(--primary); /* 'ksound' 로고 글자색 */

  /* ---- 글꼴 ---- */
  --font-family: "Segoe UI", "Malgun Gothic", system-ui, sans-serif;

  /* ---- 각 페이지 최대 너비 (키우면 더 넓게 퍼짐) ---- */
  --w-auth: 380px;         /* 로그인·회원가입 카드 */
  --w-content: 720px;      /* 메인 리스트 영역 */
  --w-detail: 560px;       /* 상세 화면 */
  --w-modal: 420px;        /* 추가 창(모달) */

  /* ---- 모서리 둥글기 ---- */
  --radius-card: 16px;     /* 카드·모달 */
  --radius-box: 12px;      /* 사진·카메라 박스 */
  --radius-input: 10px;    /* 입력창·버튼 */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-family);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

.view { min-height: 100vh; }
.hidden { display: none !important; }

/* ---------- 로그인/회원가입 ---------- */
#login-view, #signup-view {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
#login-view.hidden, #signup-view.hidden { display: none; }

.card {
  width: 100%;
  max-width: var(--w-auth);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 28px 24px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .4);
}

.brand {
  margin: 0 0 20px;
  text-align: center;
  font-size: 30px;
  letter-spacing: 1px;
  color: var(--brand);
}
.brand.small { font-size: 20px; margin: 0; }

.panel h2 {
  margin: 0 0 12px;
  font-size: 16px;
  color: var(--muted);
}

form { display: flex; flex-direction: column; gap: 10px; }

input {
  width: 100%;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-input);
  color: var(--text);
  font-size: 15px;
  outline: none;
}
input:focus { border-color: var(--primary); }
input[readonly] { color: var(--muted); }

.btn {
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-input);
  background: var(--panel);
  color: var(--text);
  font-size: 15px;
  cursor: pointer;
  transition: filter .15s, background .15s;
}
.btn:hover { filter: brightness(1.12); }
.btn.primary { background: var(--primary); border-color: var(--primary); }
.btn.primary:hover { background: var(--primary-2); }
.btn.danger { background: var(--danger); border-color: var(--danger); }
.btn.ghost { background: transparent; }
.btn.wide { width: 100%; }
/* <a> 로 만든 버튼(NAS 폴더 열기)도 <button> 과 같은 모양으로 */
a.btn { display: block; text-align: center; text-decoration: none; box-sizing: border-box; }

.divider {
  position: relative;
  text-align: center;
  margin: 22px 0 16px;
  color: var(--muted);
  font-size: 13px;
}
.divider::before {
  content: "";
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 1px;
  background: var(--line);
}
.divider span {
  position: relative;
  background: var(--card);
  padding: 0 12px;
}

.msg { margin: 10px 0 0; font-size: 13px; text-align: center; }
.msg.err { color: var(--danger); }
.msg.ok { color: var(--ok); }
/* 내용 없는 상태 메시지는 공간을 차지하지 않음 (간격 뒤틀림 방지) */
.msg:empty { display: none; }

/* ---------- 메인 ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--card);
}
.topbar-right { display: flex; align-items: center; gap: 12px; }
#hello { color: var(--muted); font-size: 14px; }

.toolbar {
  display: flex;
  gap: 10px;
  padding: 16px 20px;
  max-width: var(--w-content);
  margin: 0 auto;
  width: 100%;
}
/* 추가는 왼쪽에 두고, 삭제(선택 모드에서는 '확인')는 오른쪽 끝으로 민다 */
.toolbar #delete-btn { margin-left: auto; }

.list {
  list-style: none;
  margin: 0 auto;
  padding: 0 20px 40px;
  max-width: var(--w-content);
}
.list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  margin-bottom: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.list li.selected { border-color: var(--primary); background: #202a52; }
/* 목록에는 썸네일을 띄우지 않는다 (제목·날짜·시간·음원 파일명만) */
.list .info { flex: 1 1 auto; min-width: 0; }
.list .info .title { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.list .info .meta { font-size: 12px; color: var(--muted); line-height: 1.5; }
/* 체크박스는 '삭제'를 눌러 선택 모드에 들어갔을 때만 보인다 */
.list input[type="checkbox"].sel { display: none; }
.list.select-mode input[type="checkbox"].sel { display: block; }
.list input[type="checkbox"] { width: 20px; height: 20px; flex: 0 0 auto; }

.empty { text-align: center; color: var(--muted); margin-top: 40px; }

/* ---------- 임시 보관함 (서버에 못 올린 항목) ---------- */
.outbox-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  margin: 0 auto 12px;
  max-width: var(--w-content);
  width: calc(100% - 40px);
  background: var(--panel);
  border: 1px solid var(--warn, #b98a2e);
  border-radius: 12px;
  font-size: 14px;
}
.outbox-bar #outbox-count { flex: 1 1 auto; min-width: 0; }
.outbox-bar .btn { flex: 0 0 auto; padding: 8px 14px; font-size: 14px; }

/* 미전송 항목 카드 — 서버 항목과 구분되게 점선 테두리 */
.list li.pending {
  border-style: dashed;
  border-color: var(--warn, #b98a2e);
}
.list .badge {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--warn, #b98a2e);
  color: #1a1a1a;
  font-size: 11px; font-weight: 700;
  vertical-align: 1px;
}

/* ---------- 모달 ---------- */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .6);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; z-index: 50;
}
.modal {
  width: 100%; max-width: var(--w-modal);
  max-height: 92vh;
  display: flex; flex-direction: column;   /* 제목 고정 / 본문 스크롤 / 버튼 고정 */
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 22px;
}
.modal h2 { margin: 0 0 16px; font-size: 18px; flex: 0 0 auto; }

/* 본문만 스크롤 → 스크롤바가 둥근 모서리를 가로지르지 않음 */
.modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  padding-right: 8px;                       /* 스크롤바가 내용과 겹치지 않게 */
  scrollbar-width: thin;                    /* Firefox */
  scrollbar-color: var(--line) transparent;
}
.modal-body::-webkit-scrollbar { width: 8px; }
.modal-body::-webkit-scrollbar-thumb {
  background: var(--line); border-radius: 8px;
}
.modal-body::-webkit-scrollbar-track { background: transparent; }

/* 촬영 / 다시 촬영 버튼 줄 */
.cam-actions { display: flex; gap: 10px; margin-bottom: 4px; }
.cam-actions .btn { flex: 1; }
.cam-actions .btn.hidden { display: none; }

/* 음원 업로드 */
.audio-preview { width: 100%; margin-top: 6px; }
.field audio { flex: 1 1 auto; height: 40px; min-width: 0; }

/* AI 이미지 생성 줄 (프롬프트 입력 + 생성 버튼) */
.gen-row { display: flex; gap: 10px; margin: 10px 0 4px; }
.gen-row input { flex: 1 1 auto; min-width: 0; }
.gen-row .btn { flex: 0 0 auto; padding: 12px 20px; }

/* ---------- 이미지 좌우 슬라이드 (촬영 사진 ↔ 생성 이미지) ---------- */
.slide-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  border: none; background: rgba(0, 0, 0, .55); color: #fff;
  font-size: 26px; line-height: 1; cursor: pointer; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  padding: 0 0 3px;
}
.slide-btn:hover { background: rgba(0, 0, 0, .75); }
.slide-btn.left { left: 8px; }
.slide-btn.right { right: 8px; }
.slide-btn.hidden { display: none; }
.slide-count {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  background: rgba(0, 0, 0, .6); color: #fff;
  font-size: 12px; padding: 4px 10px; border-radius: 20px;
  pointer-events: none;
}
.slide-count.hidden { display: none; }

/* 섹션 사이 상단 여백 (사진/생성/음원 구역 구분).
   .detail-wrap .cam-actions 규칙보다 우선하도록 선택자를 맞춰 적는다. */
.section-top,
.detail-wrap .cam-actions.section-top { margin-top: 14px; }

/* ---------- 사진 삭제 확인 팝업 ---------- */
.confirm-box { max-width: 320px; text-align: center; }
.confirm-text { margin: 4px 0 12px; font-size: 15px; }
.confirm-sub { margin: -6px 0 14px; font-size: 13px; color: var(--muted); }
.confirm-preview {
  width: 100%; max-height: 180px; object-fit: cover;
  border-radius: var(--radius-box); border: 1px solid var(--line);
  display: block; margin-bottom: 4px;
}
/* 길게 누르기 대상에서 브라우저 기본 동작(이미지 저장 메뉴 등) 방지 */
.camera-box img, .detail-photo img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ---------- AMBEO 마이크 설정 그룹 ---------- */
.ambeo-box {
  border: 1px solid var(--line);
  border-radius: var(--radius-box);
  background: var(--panel);
  padding: 12px 14px;
  margin-top: 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.ambeo-title {
  font-size: 12px; font-weight: 700; letter-spacing: .6px; color: #8fb7e0;
}
.ambeo-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ambeo-lab { width: 62px; flex: 0 0 auto; color: var(--muted); font-size: 13px; }
.ambeo-check {
  display: flex; align-items: center; gap: 7px;
  font-size: 13.5px; cursor: pointer; user-select: none;
}
.ambeo-check input {
  accent-color: var(--primary); width: 16px; height: 16px;
  cursor: pointer; flex: 0 0 auto;
}
.ambeo-gain { width: 110px; flex: 0 0 auto; }
.ambeo-unit { color: var(--muted); font-size: 13px; }
.ambeo-text { flex: 1 1 auto; min-width: 0; }

/* ---------- MICROPHONE SET 늘리기/지우기 ---------- */
/* DOUBLE MS 아래의 '+' — 빨간 사각 박스 */
.ms-add {
  width: 44px; height: 44px;
  margin-top: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--danger);
  border: 1px solid var(--danger);
  border-radius: var(--radius-input);
  color: #fff; font-size: 26px; line-height: 1;
  cursor: pointer;
}
.ms-add:hover { filter: brightness(1.12); }

/* 각 MICROPHONE SET 제목 줄: 제목은 왼쪽, '−' 는 오른쪽 끝 */
.ms-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ms-del {
  width: 24px; height: 24px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--danger);
  border: none; border-radius: 50%;
  color: #fff; font-size: 18px; line-height: 1;
  cursor: pointer;
}
.ms-del:hover { filter: brightness(1.12); }

/* ---------- 관리자 화면 ---------- */
.admin-wrap {
  max-width: var(--w-content);
  margin: 0 auto;
  padding: 16px 20px 40px;
  width: 100%;
}
.admin-user {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 14px;
}
.admin-user-head {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 8px; margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.admin-user-head .au-id { color: var(--muted); font-size: 13px; }
.admin-user-head .au-count { margin-left: auto; color: var(--muted); font-size: 13px; }
.admin-empty { color: var(--muted); font-size: 13px; padding: 4px 2px; }
.admin-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.admin-item .ai-info { flex: 1 1 auto; min-width: 0; }
.admin-item .ai-title { font-size: 14.5px; font-weight: 600; margin-bottom: 2px; }
.admin-item .ai-meta { font-size: 12px; color: var(--muted); line-height: 1.5; }
.admin-item .ai-analysis {
  font-size: 12px; color: var(--text); opacity: .85;
  margin-top: 3px; line-height: 1.5; word-break: break-all;
}
.admin-item .ai-ucs { color: #8fb7e0; }
.admin-item { cursor: pointer; }
.admin-item:hover { border-color: var(--primary); }
.admin-item .ai-qc,
.admin-item .ai-del { flex: 0 0 auto; padding: 8px 12px; font-size: 13.5px; }
.admin-user-head .au-del { padding: 6px 10px; font-size: 12.5px; }

/* 사진을 바꿔 끼우는 동안(로딩) 이전 사진이 비쳐 보이지 않게 감춘다 */
img.img-loading { visibility: hidden; }

/* 관리자 항목 상세는 사용자 상세 화면(detail-view)을 관리자 모드로 그대로 쓴다 */

/* 라벨 + 값 한 줄 (관리자 상세·사진 정보 공용) */
.ad-row {
  display: flex; gap: 12px; padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px; text-align: left;
}
.ad-row:last-child { border-bottom: none; }
.ad-lab { flex: 0 0 86px; color: var(--muted); }
.ad-val { flex: 1 1 auto; min-width: 0; word-break: break-all; line-height: 1.5; }

/* 사진 정보 팝업 — confirm-box 의 가운데 정렬을 쓰지 않는다 */
#photo-info-popup .confirm-box { max-width: 400px; text-align: left; }
#photo-info-popup .qc-popup-head h2 { margin: 0; font-size: 16px; }
#photo-info-popup #photo-info-close { padding: 6px 12px; }

/* ---------- 파형 검사 단독 페이지 (/qc) ---------- */
.qc-page-wrap {
  max-width: var(--w-content);
  margin: 0 auto;
  padding: 16px 20px 40px;
  width: 100%;
}
.qc-page-wrap .audio-preview { margin-top: 10px; }
.qc-page-wrap .empty a { color: var(--primary); }

/* ---------- 파형(QC) 보드: 파형 + 이상 구간(튐·끊김·고음) ---------- */
.qc-board {
  margin-top: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-box);
  padding: 12px;
}
.qc-canvas { width: 100%; height: 150px; display: block; border-radius: 8px; }
.qc-canvas.small { cursor: zoom-in; }          /* 누르면 팝업으로 크게 */
.qc-canvas.big { height: 46vh; min-height: 240px; cursor: crosshair; }

/* 파형 크게 보기 팝업 — 화면 폭을 최대한 쓴다 */
.qc-popup-box { max-width: min(96vw, 1100px); }
.qc-popup-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px; flex: 0 0 auto;
}
.qc-popup-head h2 { margin: 0; font-size: 17px; }
#qc-popup-close { padding: 6px 12px; flex: 0 0 auto; }
#qc-popup-body .qc-board { margin-top: 0; border: none; padding: 0; background: none; }
.qc-legend {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 8px; font-size: 12.5px; color: var(--muted);
}
.qc-legend .chip { display: flex; align-items: center; gap: 5px; }
.qc-legend .dot { width: 10px; height: 10px; border-radius: 3px; }
.qc-note { margin-top: 6px; font-size: 12px; color: var(--muted); }
.qc-time {
  margin-top: 6px; font-size: 12.5px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* 파형 팝업의 재생/볼륨 조절 줄 */
.qc-ctrl {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px;
}
.qc-play { flex: 0 0 auto; width: 48px; padding: 8px 0; font-size: 16px; }
.qc-vol-ic { flex: 0 0 auto; font-size: 14px; }
.qc-vol {
  flex: 1 1 auto; min-width: 0;
  accent-color: var(--primary);
  height: 22px; padding: 0; border: none; background: transparent;
}
.qc-vol-lab {
  flex: 0 0 auto; width: 44px; text-align: right;
  font-size: 12.5px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.qc-vol-lab.boost { color: var(--warn, #e0a83a); font-weight: 700; }
.qc-events { list-style: none; margin: 8px 0 0; padding: 0; }
.qc-events li {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; margin-bottom: 4px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; font-size: 13px; cursor: pointer;
}
.qc-events li:hover { border-color: var(--primary); }
.qc-events .t { color: var(--muted); font-variant-numeric: tabular-nums; }
.qc-events .dur {
  margin-left: auto; color: var(--muted); font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.qc-ok { margin-top: 8px; font-size: 13px; color: var(--ok); }

/* ---------- 첨부 파일 목록 ---------- */
.attach-list { list-style: none; margin: 8px 0 0; padding: 0; }
.attach-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; margin-bottom: 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-input);
  font-size: 14px;
}
.attach-list .at-name {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text); text-decoration: none;
}
.attach-list a.at-name:hover { text-decoration: underline; }
.attach-list .at-size { flex: 0 0 auto; color: var(--muted); font-size: 12.5px; }
.attach-list .at-del {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  background: var(--danger); border: none; border-radius: 50%;
  color: #fff; font-size: 13px; line-height: 1; cursor: pointer;
}
.attach-list .at-del:hover { filter: brightness(1.12); }
.attach-list .at-wait { flex: 0 0 auto; color: var(--muted); font-size: 12.5px; }

/* ---------- Description (자유 입력 메모) ---------- */
.desc-box {
  border: 1px solid var(--line);
  border-radius: var(--radius-box);
  background: var(--panel);
  padding: 12px 14px;
  margin-top: 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.desc-title {
  font-size: 12px; font-weight: 700; letter-spacing: .6px; color: #8fb7e0;
}
/* 내용이 길어지면 JS(autoGrow)가 높이를 늘린다 → 칸 안에서 스크롤되지 않는다 */
.desc-input {
  display: block;
  width: 100%;
  min-height: 76px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-input);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.6;
  outline: none;
  resize: none;            /* 크기는 내용에 맞춰 자동으로 늘어난다 */
  overflow: hidden;        /* 칸 안에서 스크롤되지 않게 */
  white-space: pre-wrap;
  word-break: break-word;
  box-sizing: border-box;
}
.desc-input:focus { border-color: var(--primary); }

/* ---------- 분석표 (타임라인 · 순위 · 분류 테이블) ---------- */
.analysis-board { margin-top: 14px; display: flex; flex-direction: column; gap: 14px; }
.ab-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-box); padding: 12px;
}
.ab-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.ab-title { font-size: 13px; color: var(--muted); flex: 1; min-width: 180px; }
.ab-title b { color: var(--text); }
.ab-sort { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.ab-sort select {
  font: inherit; background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: 7px; padding: 4px 8px;
}

/* 타임라인 */
.ab-tl { position: relative; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel); }
.ab-lane { display: grid; grid-template-columns: 150px 1fr; align-items: center; border-top: 1px solid var(--line); height: 26px; }
.ab-lane:first-child { border-top: none; }
.ab-lane.dom { height: 32px; background: rgba(0,0,0,.25); }
.ab-lane .ab-lab {
  display: flex; align-items: center; gap: 6px; padding: 0 8px;
  font-size: 12px; overflow: hidden; white-space: nowrap;
}
/* 일반 lane 라벨: 고정폭 그리드 → 체크박스·색·CatID·이름 열이 모든 줄에서 정렬됨 */
.ab-lane .ab-lab.cols {
  display: grid; grid-template-columns: 15px 12px 58px 1fr;
  gap: 5px; align-items: center;
}
.ab-lane .ab-lab input { accent-color: var(--primary); cursor: pointer; flex: none; }
.ab-sw { width: 11px; height: 11px; border-radius: 3px; flex: none; display: inline-block; }
.ab-cid {
  font-size: 10px; font-weight: 700; color: #7fd4ff; background: rgba(30,80,120,.35);
  padding: 1px 4px; border-radius: 4px; flex: none; font-family: Consolas, monospace;
}
/* lane 라벨의 CatID 칩: 폭 고정(이름 시작 위치 통일), 없는 경우 흐리게 */
.ab-lab.cols .ab-cid {
  width: 58px; box-sizing: border-box; overflow: hidden;
  text-overflow: ellipsis; text-align: center; padding: 1px 2px;
}
.ab-lab.cols .ab-cid.none { opacity: .35; background: transparent; }
.ab-lane .ab-nm { overflow: hidden; text-overflow: ellipsis; }
.ab-lane.off { opacity: .32; }
.ab-lane canvas { display: block; width: 100%; height: 100%; cursor: pointer; }
.ab-catsep {
  padding: 4px 9px; font-size: 10.5px; font-weight: 700; letter-spacing: .4px;
  color: #8fb7e0; background: rgba(0,0,0,.3); border-top: 1px solid var(--line);
}
.ab-axis { display: grid; grid-template-columns: 150px 1fr; height: 20px; border-top: 1px solid var(--line); background: rgba(0,0,0,.25); }
.ab-axis canvas { width: 100%; height: 100%; cursor: pointer; }
.ab-playhead {
  position: absolute; top: 0; bottom: 20px; width: 2px; background: #ff5a5a;
  pointer-events: none; left: 150px; box-shadow: 0 0 6px rgba(255,90,90,.8);
}

/* 구간 목록 */
.ab-seg { font-size: 12.5px; color: var(--muted); line-height: 1.8; margin-top: 10px; max-height: 150px; overflow: auto; }
.ab-seg b { color: var(--text); }
.ab-seg .ab-t { color: var(--primary); font-variant-numeric: tabular-nums; }

/* 순위 — 이름 칸을 고정폭으로 두어 막대 시작 위치가 모든 줄에서 정렬됨 */
.ab-rk { display: grid; grid-template-columns: 22px 13px 140px 1fr 92px; align-items: center; gap: 8px; padding: 5px 2px; border-top: 1px solid var(--line); }
/* 좁은 모달 안에서는 이름 칸을 줄여 막대 공간 확보 */
.modal .ab-rk { grid-template-columns: 20px 12px 106px 1fr 82px; gap: 6px; }
.modal .ab-lane .ab-lab.cols { grid-template-columns: 15px 12px 52px 1fr; }
.modal .ab-lab.cols .ab-cid { width: 52px; }
.ab-rk:first-child { border-top: none; }
.ab-rk .ab-rn { font-weight: 700; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.ab-rk .ab-nm { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-rk .ab-nm small { color: var(--muted); font-weight: 400; margin-left: 5px; font-family: Consolas, monospace; }
.ab-rk .ab-barw { height: 9px; background: var(--panel); border-radius: 6px; overflow: hidden; }
.ab-rk .ab-barw > i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #4ea1ff, #39d98a); }
.ab-rk .ab-val { font-size: 12px; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.ab-rk .ab-val small { color: var(--muted); }

/* 분류 테이블 */
.ab-tbls { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.ab-tblh { font-size: 12px; font-weight: 700; color: #8fb7e0; margin-bottom: 6px; letter-spacing: .3px; }
.ab-tblwrap { max-height: 320px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.ab-dtbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.ab-dtbl th {
  text-align: left; color: var(--muted); font-weight: 600; padding: 6px 8px;
  border-bottom: 1px solid var(--line); position: sticky; top: 0;
  background: var(--panel); white-space: nowrap; z-index: 1;
}
.ab-dtbl td { padding: 5px 8px; border-bottom: 1px solid var(--line); }
.ab-dtbl tr:last-child td { border-bottom: none; }
.ab-dtbl .c-rn { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.ab-dtbl .c-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ab-dtbl .c-nm { white-space: nowrap; }
.ab-dtbl .ab-cid { display: inline-block; min-width: 56px; text-align: center; box-sizing: border-box; }
.ab-dtbl .c-nm .ab-sw { width: 10px; height: 10px; margin-right: 6px; vertical-align: middle; }
.ab-dtbl .c-cat { color: var(--muted); }

.camera-box {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #000;
  border-radius: var(--radius-box);
  overflow: hidden;
  margin-bottom: 10px;
}
.camera-box { position: relative; cursor: pointer; }
.camera-box video, .camera-box img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.camera-hint {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; color: var(--muted); font-size: 14px; user-select: none;
}
.camera-hint .cam-icon { font-size: 40px; }

.field {
  display: flex; align-items: center; gap: 12px;
  margin-top: 10px;
}
.field span { width: 56px; flex: 0 0 auto; color: var(--muted); font-size: 14px; }
.field input { flex: 1 1 auto; }

/* '더보기' 토글 — 제목·날짜·시간 아래의 나머지 항목을 접었다 편다 */
.more-toggle {
  width: 100%;
  margin-top: 12px;
  font-size: 14px;
  color: var(--muted);
}

.modal-actions {
  display: flex; gap: 10px; margin-top: 16px;
  flex: 0 0 auto;
}
.modal-actions .btn { flex: 1; }

button.btn:disabled { opacity: .45; cursor: not-allowed; filter: none; }

/* ---------- 회원가입 링크/공통 액션줄 ---------- */
.signup-hint {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 18px; color: var(--muted); font-size: 14px;
}
.row-actions { display: flex; gap: 10px; margin-top: 6px; }
.row-actions .btn { flex: 1; }

/* ---------- 상세 화면 ---------- */
.detail-wrap {
  max-width: var(--w-detail); margin: 0 auto; padding: 18px 20px 40px; width: 100%;
}
.detail-photo {
  position: relative; width: 100%; aspect-ratio: 4 / 3;
  background: #000; border-radius: var(--radius-box); overflow: hidden;
  cursor: zoom-in; margin-bottom: 18px;
}
.detail-photo img, .detail-photo video { width: 100%; height: 100%; object-fit: cover; display: block; }
.detail-photo.live { cursor: default; }
.detail-wrap .cam-actions { margin: 0 0 14px; }  /* 음수 마진 제거(겹침 방지) */
.detail-photo .zoom-hint {
  position: absolute; right: 10px; bottom: 10px;
  background: rgba(0,0,0,.55); color: #fff; font-size: 12px;
  padding: 5px 10px; border-radius: 20px; pointer-events: none;
}

/* ---------- 사진 확대 팝업 ---------- */
.photo-popup {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.92);
  display: flex; align-items: center; justify-content: center;
}
.photo-popup.hidden { display: none; }
.photo-stage {
  width: 100%; height: 100%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  touch-action: none;      /* 브라우저 기본 핀치/스크롤 막고 직접 처리 */
}
.photo-stage img {
  max-width: 100%; max-height: 100%;
  transform-origin: center center;
  will-change: transform; user-select: none; -webkit-user-drag: none;
}
.photo-close {
  position: absolute; top: 14px; right: 16px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.15); color: #fff;
  font-size: 20px; cursor: pointer;
}
.photo-tip {
  position: absolute; bottom: 18px; left: 0; right: 0; text-align: center;
  color: rgba(255,255,255,.6); font-size: 12px; pointer-events: none;
}

/* =====================================================================
   (8) 페이지별 커스터마이즈
   --------------------------------------------------------------------
   특정 페이지의 모양만 바꾸고 싶을 때, 다른 페이지에 영향이 가지 않도록
   각 페이지의 "최상위 선택자"로 시작하는 규칙을 여기에 적습니다.

     로그인   → #login-view
     회원가입 → #signup-view
     메인     → #main-view
     상세     → #detail-view
     추가 창  → #add-modal

   아래 예시는 통째로 주석 처리돼 있습니다.
   쓰고 싶은 블록의 첫 줄 여는 주석과 마지막 줄 닫는 주석만 지우면 적용됩니다.
   (주의: CSS 주석은 겹쳐 쓸 수 없으니, 이 블록 안에서는 또 주석을 넣지 마세요.)
   ===================================================================== */

/* 로그인 페이지만 색 바꾸기
#login-view        { background: #101830; }
#login-view .card  { background: #16203c; border-color: #24406e; }
#login-view .brand { color: #7aa2ff; }
*/

/* 회원가입 페이지만 다르게 (로고 초록 / 카드 넓게)
#signup-view .brand { color: #34c77b; }
#signup-view .card  { max-width: 420px; }
*/

/* 메인(리스트) 페이지만 (헤더 색 / 항목 둥글게 / 글자 크게)
#main-view .topbar        { background: #16203c; }
#main-view .list li       { border-radius: 18px; }
#main-view .info .title   { font-size: 18px; }
*/

/* 상세 페이지만 (사진 정사각형 / 라벨 폭 넓게)
#detail-view .detail-photo { aspect-ratio: 1 / 1; }
#detail-view .field span   { width: 72px; }
*/

/* 추가 창(모달)만 (모달 폭 / 카메라 정사각형)
#add-modal .modal      { max-width: 460px; }
#add-modal .camera-box { aspect-ratio: 1 / 1; }
*/