/**
 * Annotation 캔버스 + 툴바 스타일
 * 경로: /common/annotation/annotation.css
 * 테마 변수(var(--t-*)) 기반, Material Symbols 아이콘
 */

/* ══════════════════════════════════════════
   캔버스 오버레이
   ══════════════════════════════════════════ */
.annotation-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  overflow: hidden;
}

.annotation-overlay[data-state="active"] {
  pointer-events: auto;
}

/* 비활성 시 내부 캔버스도 이벤트 차단 (data-layer-active 오버라이드 방지) */
.annotation-overlay[data-state="inactive"] .annotation-canvas {
  pointer-events: none !important;
}

.annotation-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.annotation-canvas[data-layer-visible="false"] {
  display: none;
}

/* 활성 레이어만 이벤트 수신 */
.annotation-canvas[data-layer-active="true"] {
  pointer-events: auto;
  z-index: 53;
}
.annotation-canvas[data-layer-active="false"] {
  pointer-events: none;
}

/* ── 마우스 모드: 캔버스 이벤트 비활성화 + 반투명 ── */
.annotation-overlay[data-state="active"][data-pointer-mode="mouse"] {
  pointer-events: none;
}

.annotation-overlay[data-pointer-mode="mouse"] .annotation-canvas {
  pointer-events: none !important;
  opacity: 0.35;
  transition: opacity 0.25s ease;
}

.annotation-overlay[data-pointer-mode="pen"] .annotation-canvas {
  opacity: 1;
  transition: opacity 0.25s ease;
}

/* ════════════════════════════════════════════
   플로팅 툴바
   ════════════════════════════════════════════ */
.annotation-toolbar {
  position: fixed;
  z-index: var(--t-z-whiteboard, 2300);
  display: flex;
  background: color-mix(in srgb, var(--t-paper) 92%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--t-line);
  border-radius: 14px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.04);
  padding: 4px;
  user-select: none;
  touch-action: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.annotation-toolbar[data-state="visible"] {
  opacity: 1;
  pointer-events: auto;
}

/* ── 상단 모드 (가로) ── */
.annotation-toolbar--horizontal {
  flex-direction: row;
  align-items: center;
  gap: 2px;
  top: 12px;
  left: 50%;
  transform: translateX(-50%) translateY(-30px);
}

.annotation-toolbar--horizontal[data-state="visible"] {
  transform: translateX(-50%) translateY(0);
}

/* ── 좌측 모드 (세로) ── */
.annotation-toolbar--vertical {
  flex-direction: column;
  align-items: center;
  gap: 2px;
  top: 80px;
  left: 12px;
  transform: translateX(-30px);
}

.annotation-toolbar--vertical[data-state="visible"] {
  transform: translateX(0);
}

/* ── 태블릿(≤768px): 버튼 크기 조정 ── */
@media (max-width: 768px) {
  .annotation-tool-btn {
    min-width: 36px;
    min-height: 36px;
    width: 36px;
    height: 36px;
    border-radius: 8px;
  }
  .annotation-toolbar {
    padding: 3px;
    border-radius: 10px;
  }
}

/* ── 스마트폰(≤480px): 최소 버튼만 표시 ── */
@media (max-width: 480px) {
  .annotation-toolbar [data-phone-hide="true"] {
    display: none !important;
  }
  .annotation-tool-btn {
    min-width: 32px;
    min-height: 32px;
    width: 32px;
    height: 32px;
    border-radius: 6px;
  }
  .annotation-tool-btn .material-symbols-outlined {
    width: 16px;
    height: 16px;
  }
  .annotation-toolbar {
    padding: 2px;
    border-radius: 8px;
  }
}

/* ── 도구 버튼 ── */
.annotation-tool-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--t-text-sub);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.1s;
  position: relative;
  padding: 0;
  flex-shrink: 0;
}

.annotation-tool-btn:hover {
  background: var(--t-bg);
  color: var(--t-ink);
}

.annotation-tool-btn[data-state="active"] {
  background: var(--t-clay-500);
  color: var(--t-paper);
}

.annotation-tool-btn:active {
  transform: scale(0.93);
}

/* 마우스 모드 활성 버튼: 주황색 배경 */
.annotation-tool-btn[data-tool="pointer"][data-state="active"] {
  background: var(--t-mustard-500);
  color: var(--t-paper);
}

.annotation-tool-btn:disabled {
  opacity: 0.35;
  cursor: default;
  transform: none;
}

.annotation-tool-btn .material-symbols-outlined {
  width: 22px; height: 22px;
}

/* ── 구분선 ── */
.annotation-toolbar__divider {
  width: 1px;
  height: 24px;
  background: var(--t-line);
  margin: 0 2px;
  flex-shrink: 0;
}

.annotation-toolbar--vertical .annotation-toolbar__divider {
  width: 24px;
  height: 1px;
  margin: 2px 0;
}

/* ── 색상 버튼 ── */
.annotation-color-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s;
  padding: 0;
  flex-shrink: 0;
}

.annotation-color-btn:hover {
  transform: scale(1.15);
}

.annotation-color-btn[data-state="active"] {
  border-color: var(--t-ink);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--t-paper) 80%, transparent);
}

/* ── 색상 팝오버 ── */
.annotation-color-popover {
  position: absolute;
  display: none;
  background: color-mix(in srgb, var(--t-paper) 95%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--t-line);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  padding: 8px;
  gap: 6px;
  z-index: 510;
}

.annotation-color-popover[data-state="open"] {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

/* ── 굵기 버튼 ── */
.annotation-size-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s;
  padding: 0;
  flex-shrink: 0;
}

.annotation-size-btn:hover {
  background: var(--t-bg);
}

.annotation-size-btn[data-state="active"] {
  background: var(--t-clay-50);
}

.annotation-size-btn__dot {
  border-radius: 50%;
  background: var(--t-ink);
}

/* ── 굵기 팝오버 ── */
.annotation-size-popover {
  position: absolute;
  display: none;
  background: color-mix(in srgb, var(--t-paper) 95%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--t-line);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  padding: 8px;
  gap: 4px;
  z-index: 510;
}

.annotation-size-popover[data-state="open"] {
  display: flex;
}

/* ── 레이어 패널 ── */
.annotation-layer-panel {
  position: absolute;
  display: none;
  flex-direction: column;
  background: color-mix(in srgb, var(--t-paper) 95%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--t-line);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  padding: 8px;
  min-width: 180px;
  z-index: 510;
}

.annotation-layer-panel[data-state="open"] {
  display: flex;
}

.annotation-layer-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  font-size: 13px;
  color: var(--t-ink);
}

.annotation-layer-item:hover {
  background: var(--t-bg);
}

.annotation-layer-item[data-state="active"] {
  background: var(--t-clay-50);
  border: 1px solid var(--t-clay-500);
}

.annotation-layer-item__eye {
  font-size: 18px;
  color: var(--t-text-muted);
  cursor: pointer;
  transition: color 0.15s;
}

.annotation-layer-item__eye[data-visible="true"] {
  color: var(--t-clay-500);
}

.annotation-layer-item__indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--t-line);
  flex-shrink: 0;
}

.annotation-layer-item__indicator[data-has-strokes="true"] {
  background: var(--t-success, #22c55e);
}

/* 레이어 비우기(삭제) 아이콘 */
.annotation-layer-item__clear {
  font-size: 16px;
  color: var(--t-text-muted);
  cursor: pointer;
  transition: color 0.15s;
  padding: 2px;
  border-radius: 4px;
  flex-shrink: 0;
}

.annotation-layer-item__clear:hover {
  color: var(--t-danger, #ef4444);
  background: var(--t-danger-soft, rgba(239, 68, 68, 0.1));
}

/* ── 화이트보드 헤더 아이콘 활성 표시 ── */
#annotation-toggle-header[data-state="active"],
#whiteboard-toggle-header[data-state="active"] {
  color: var(--t-clay-500);
  background: var(--t-clay-50);
}

/* ── FAB 필기도구 버튼 활성 표시 ── */
#fab-annotation [data-action="toggle-toolbar"][data-state="active"] {
  background-color: #16a34a;
}

/* ══════════════════════════════════════════
   화이트보드 배경 오버레이 (모든 콘텐츠 위)
   ══════════════════════════════════════════ */
#whiteboard-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--t-z-whiteboard, 2300);
  background-color: var(--t-paper);
  background-image: radial-gradient(circle, rgba(0,0,0,0.06) 1px, transparent 1px);
  background-size: 50px 50px;
}

/* backdrop 안의 overlay/canvas가 정상 동작 */
#whiteboard-backdrop .annotation-overlay {
  pointer-events: auto;
  z-index: 1;
}

#whiteboard-backdrop .annotation-canvas {
  width: 100% !important;
  height: 100% !important;
}

/* ── 2분할 모드: 모달(좌) + 화이트보드(우) ── */
#ezy-modal.split-mode {
  width: 50% !important;
  right: auto !important;
  left: 0 !important;
  background: transparent !important;
}

#ezy-modal.split-mode [data-modal-sizer] {
  max-width: 100% !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  padding: 0 !important;
}

#ezy-modal.split-mode [data-modal-container] {
  height: 100%;
  border-radius: 0 !important;
  display: flex;
  flex-direction: column;
}

#ezy-modal.split-mode [data-modal-body] {
  flex: 1;
  max-height: none !important;
  overflow-y: auto;
}

#ezy-modal.split-mode [data-modal-footer] {
  margin-top: auto;
}

#whiteboard-backdrop.split-mode {
  left: 50% !important;
  border-left: 3px solid var(--t-line);
}

/* ── 줌 컨트롤 그룹 ── */
.annotation-zoom-group {
  display: flex;
  align-items: center;
  gap: 0;
}

.annotation-zoom-label {
  font-size: 11px !important;
  font-weight: 600;
  font-family: 'SF Mono', 'Consolas', monospace;
  min-width: 48px !important;
  width: auto !important;
  padding: 0 4px;
  color: var(--t-text-sub) !important;
  background: transparent !important;
}

.annotation-zoom-label:hover {
  color: var(--t-ink) !important;
  background: var(--t-bg) !important;
}

/* ── 팬 모드 커서 ── */
.annotation-overlay[data-pan-mode="true"],
.annotation-overlay[data-pan-mode="true"] .annotation-canvas {
  cursor: grab !important;
}

.annotation-overlay[data-panning="true"],
.annotation-overlay[data-panning="true"] .annotation-canvas {
  cursor: grabbing !important;
}

/* ══════════════════════════════════════════
   다크 오션 테마
   ══════════════════════════════════════════ */
[data-theme="dark-ocean"] .annotation-toolbar {
  background: rgba(25, 42, 49, 0.92);
  border-color: var(--t-line);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

[data-theme="dark-ocean"] .annotation-tool-btn {
  color: var(--t-text-sub);
}

[data-theme="dark-ocean"] .annotation-tool-btn:hover {
  background: var(--t-surface-alt);
  color: var(--t-ink);
}

[data-theme="dark-ocean"] .annotation-tool-btn[data-state="active"] {
  background: var(--t-primary);
  color: var(--t-paper);
}

[data-theme="dark-ocean"] .annotation-tool-btn[data-tool="pointer"][data-state="active"] {
  background: #d97706;
  color: var(--t-paper);
}

[data-theme="dark-ocean"] .annotation-color-btn[data-state="active"] {
  border-color: var(--t-ink);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4);
}

[data-theme="dark-ocean"] .annotation-color-popover,
[data-theme="dark-ocean"] .annotation-size-popover,
[data-theme="dark-ocean"] .annotation-layer-panel {
  background: rgba(25, 42, 49, 0.95);
  border-color: var(--t-line);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

[data-theme="dark-ocean"] .annotation-layer-item {
  color: var(--t-ink);
}

[data-theme="dark-ocean"] .annotation-layer-item:hover {
  background: var(--t-surface-alt);
}

[data-theme="dark-ocean"] .annotation-layer-item[data-state="active"] {
  background: var(--t-primary-soft);
  border-color: var(--t-primary);
}

[data-theme="dark-ocean"] .annotation-size-btn__dot {
  background: var(--t-ink);
}

[data-theme="dark-ocean"] .annotation-size-btn[data-state="active"] {
  background: var(--t-primary-soft);
}

[data-theme="dark-ocean"] #whiteboard-backdrop {
  background-color: #1a1a2e;
  background-image: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px);
}

/* ── 레이저 포인터 glow ── */
.annotation-laser-stroke {
  filter: drop-shadow(0 0 6px currentColor) drop-shadow(0 0 12px currentColor);
}

/* ── 화이트보드 모드 ON 시 본문 커서 변경 ── */
[data-annotation-mode="on"] .annotation-canvas[data-layer-active="true"] {
  cursor: crosshair;
}

/* ══════════════════════════════════════════
   항목 3: 도구별 커서 분화 (Material Symbols SVG)
   ══════════════════════════════════════════ */

/* 펜 — Material: draw (hotspot: 좌하단 펜끝 2,30) */
.annotation-overlay[data-current-tool="pen"] ~ .annotation-canvas[data-layer-active="true"],
.annotation-overlay[data-current-tool="pen"] .annotation-canvas[data-layer-active="true"] {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 -960 960 960'%3E%3Cdefs%3E%3Cfilter id='s'%3E%3CfeDropShadow dx='0' dy='0' stdDeviation='18' flood-color='white' flood-opacity='0.9'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M160-120v-170l527-526q12-12 27-18t30-6q16 0 30.5 6t25.5 18l56 56q12 11 18 25.5t6 30.5q0 15-6 30t-18 27L330-120H160Zm80-80h56l393-392-28-29-29-28-392 393v56Z' fill='%23333' filter='url(%23s)'/%3E%3C/svg%3E") 2 30, crosshair;
}

/* 형광펜 — Material: ink_highlighter (hotspot: 좌하단 마커팁 3,30) */
.annotation-overlay[data-current-tool="highlighter"] ~ .annotation-canvas[data-layer-active="true"],
.annotation-overlay[data-current-tool="highlighter"] .annotation-canvas[data-layer-active="true"] {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 -960 960 960'%3E%3Cdefs%3E%3Cfilter id='s'%3E%3CfeDropShadow dx='0' dy='0' stdDeviation='18' flood-color='white' flood-opacity='0.9'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M544-400 440-504 240-304l104 104 200-200Zm-47-161 104 104 199-199-104-104-199 199Zm-84-28 216 216-229 229q-24 24-56 24t-56-24l-2-2-26 26H60l126-126-2-2q-24-24-24-56t24-56l229-229Zm0 0 227-227q24-24 56-24t56 24l104 104q24 24 24 56t-24 56L629-373 413-589Z' fill='%23D4A00A' filter='url(%23s)'/%3E%3C/svg%3E") 3 30, text;
}

/* 지우개 — 네이티브 커서 숨김. 영향 범위는 .annotation-eraser-cursor (점선 원) 로 표시 */
.annotation-overlay[data-current-tool="eraser"] ~ .annotation-canvas[data-layer-active="true"],
.annotation-overlay[data-current-tool="eraser"] .annotation-canvas[data-layer-active="true"] {
  cursor: none;
}

/* 지우개 영향 범위 표시 — 점선 원 (canvas.js 가 위치/크기 동적 갱신) */
.annotation-eraser-cursor {
  position: fixed;
  pointer-events: none;
  border: 1.5px dashed rgba(40, 40, 40, 0.85);
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.7),
    inset 0 0 0 1px rgba(255, 255, 255, 0.7);
  background: transparent;
  transform: translate(-50%, -50%);
  z-index: 10000;
  transition: width 80ms ease, height 80ms ease;
  will-change: left, top, width, height;
}
.annotation-eraser-cursor[data-state="hidden"] { display: none; }

/* 레이저 — 빨간 점 + 글로우 */
.annotation-overlay[data-current-tool="laser"] ~ .annotation-canvas[data-layer-active="true"],
.annotation-overlay[data-current-tool="laser"] .annotation-canvas[data-layer-active="true"] {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='4' fill='%23FF4444'/%3E%3Ccircle cx='8' cy='8' r='7' fill='none' stroke='%23FF4444' stroke-width='1' opacity='0.5'/%3E%3C/svg%3E") 8 8, pointer;
}

/* 직선 / 도형 — 십자선 유지 */
.annotation-overlay[data-current-tool="line"] ~ .annotation-canvas[data-layer-active="true"],
.annotation-overlay[data-current-tool="line"] .annotation-canvas[data-layer-active="true"],
.annotation-overlay[data-current-tool="shape"] ~ .annotation-canvas[data-layer-active="true"],
.annotation-overlay[data-current-tool="shape"] .annotation-canvas[data-layer-active="true"] {
  cursor: crosshair;
}

/* ══════════════════════════════════════════
   항목 4: 필기 목록 모달 CSS 클래스
   ══════════════════════════════════════════ */
.annotation-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.annotation-list__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--t-paper);
  border: 1px solid var(--t-line);
  transition: background 0.15s;
}

.annotation-list__item:hover {
  background: var(--t-bg);
}

.annotation-list__thumb {
  width: 60px;
  height: 45px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--t-bg);
  border: 1px solid var(--t-line);
  flex-shrink: 0;
}

.annotation-list__info {
  flex: 1;
  min-width: 0;
}

.annotation-list__title {
  font-weight: 600;
  color: var(--t-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.annotation-list__meta {
  font-size: 12px;
  color: var(--t-text-sub);
  margin-top: 2px;
}

.annotation-list__meta span + span::before {
  content: '·';
  margin: 0 6px;
}

.annotation-list__delete {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--t-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
}

.annotation-list__delete:hover {
  color: var(--t-danger, #ef4444);
  background: var(--t-danger-soft, rgba(239, 68, 68, 0.1));
}

.annotation-list__delete .material-symbols-outlined {
  width: 18px; height: 18px;
}

.annotation-list__empty {
  text-align: center;
  padding: 32px 0;
  color: var(--t-text-sub);
}

.annotation-list__empty .material-symbols-outlined {
  width: 48px; height: 48px;
  display: block;
  margin-bottom: 12px;
  opacity: 0.5;
}

.annotation-list__empty p {
  margin: 0;
}

.annotation-list__empty p + p {
  font-size: 13px;
  margin-top: 4px;
}

/* ── 로딩 스피너 ── */
.annotation-list__loading {
  text-align: center;
  padding: 32px 0;
  color: var(--t-text-sub);
}

.annotation-list__loading .material-symbols-outlined {
  width: 28px; height: 28px;
  animation: spin 1s linear infinite;
}

.annotation-list__loading p {
  margin-top: 8px;
}

/* ══════════════════════════════════════════
   레이저 포인터 (Alt+Z 독립 토글)
   ══════════════════════════════════════════ */

/* 헤더 레이저 토글 버튼 활성 */
#laser-toggle-header[data-state="active"] {
  color: var(--t-paper);
  background: #EF4444;
  border-radius: 8px;
}

#laser-toggle-header[data-state="active"]:hover {
  background: #DC2626;
}

/* 다크 오션 테마 */
[data-theme="dark-ocean"] #laser-toggle-header[data-state="active"] {
  background: #DC2626;
}

[data-theme="dark-ocean"] #laser-toggle-header[data-state="active"]:hover {
  background: #B91C1C;
}

/* 레이저 캔버스 커서: 빨간 원 */
#laser-pointer-canvas {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='4' fill='%23FF4444'/%3E%3Ccircle cx='8' cy='8' r='7' fill='none' stroke='%23FF4444' stroke-width='1' opacity='0.5'/%3E%3C/svg%3E") 8 8, crosshair;
}