/* ── 레이아웃 기본 ── */
html { overflow-x: auto; }
body { height: 100vh; overflow: hidden; min-width: 1000px; }

/* ── pretty-scrollbar 배경 자동 감지용 ── */
#manual-list { background: #111827; padding-right: 15px; }
#decal-list  { background: #ffffff; }

/* 왼쪽 사이드바 접기/펼치기 너비 트랜지션 */
#sidebar { transition: width 0.2s ease; overflow: hidden; border-right: 1px solid #6b7280; }

/* 사용자 페이지 오른쪽 사이드바 트랜지션 */
#right-sidebar { transition: width 0.2s ease; overflow: hidden; border-left: 1px solid #6b7280; }

/* 데칼 마커 절대 위치 기준 오버레이 */
#decal-overlay { position: absolute; inset: 0; pointer-events: none; }

/* PDF 스크롤 영역 */
#pdf-scroll { width: 100%; height: 100%; overflow: auto; }

/* PDF 캔버스 wrapper: 캔버스와 데칼 오버레이를 함께 감쌈 */
#pdf-sizer { position: relative; display: inline-block; line-height: 0; }

/* ── 줌 오버레이 패널 ── */
/* display:none 이 초기값이며 JS에서 display:flex 로 변경 */
#zoom-overlay {
  position: absolute; top: 8px; left: 8px; z-index: 20;
  display: none; align-items: center; gap: 8px;
  background: rgba(0,0,0,0.6); padding: 5px 10px;
  border-radius: 8px; user-select: none;
}
/* 줌 비율 텍스트 */
#zoom-label { color: #fff; font-size: 12px; font-weight: 700; min-width: 36px; text-align: right; }
/* 줌 레이블·슬라이더 사이 구분선 */
.zoom-divider { width: 1px; height: 14px; background: rgba(255,255,255,0.3); flex-shrink: 0; }

/* ── 줌 슬라이더 ── */
#zoom-slider { -webkit-appearance: none; width: 100px; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.3); outline: none; cursor: pointer; }
#zoom-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; border-radius: 50%; background: #fff; cursor: pointer; }
#zoom-slider::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: #fff; border: none; cursor: pointer; }

/* ── 게시 버튼 (zoom-overlay 내) ── */
#publish-btn {
  display: flex; align-items: center; gap: 4px;
  background: none; border: none; padding: 0 2px; cursor: pointer;
}
#publish-btn i,
#publish-btn span { font-size: 12px; color: rgba(255,255,255,0.4); transition: color 0.15s; }
#publish-btn:hover i,
#publish-btn:hover span { color: #fff; }
#publish-btn.published i,
#publish-btn.published span { color: #4ade80; }

/* ── Tippy 툴팁 ── */
.tippy-box { font-size: 12px; }

/* ── 링크 복사 버튼 ── */
#copy-link-btn {
  display: flex; align-items: center;
  background: none; border: none; padding: 0 2px; cursor: pointer;
}
#copy-link-btn i { font-size: 12px; color: rgba(255,255,255,0.4); transition: color 0.15s; }
#copy-link-btn:hover i { color: #fff; }

/* ── 가로/세로 맞춤 버튼 ── */
#fit-width-btn, #fit-height-btn {
  background: none; border: none; padding: 0 2px;
  color: rgba(255,255,255,0.6); font-size: 12px; cursor: pointer; line-height: 1;
}
#fit-width-btn:hover, #fit-height-btn:hover { color: #fff; }

/* ── 단축키 버튼 ── */
#shortcut-btn {
  background: none; border: none; padding: 0 2px;
  color: rgba(255,255,255,0.6); font-size: 12px; cursor: pointer; line-height: 1;
}
#shortcut-btn:hover { color: #fff; }

/* ── 전체화면 버튼 ── */
#fullscreen-btn {
  display: flex; align-items: center; gap: 4px;
  background: none; border: none; padding: 0 2px; cursor: pointer;
}
#fullscreen-btn i,
#fullscreen-btn span { font-size: 12px; color: rgba(255,255,255,0.6); transition: color 0.15s; }
#fullscreen-btn:hover i,
#fullscreen-btn:hover span { color: #fff; }

/* ── 단축키 팝업 ── */
#shortcut-popup {
  display: none;
  flex-direction: column;
  gap: 6px;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: rgba(0,0,0,0.88);
  border-radius: 6px;
  padding: 8px 12px;
  white-space: nowrap;
  z-index: 30;
}
.sp-row { display: flex; align-items: center; gap: 10px; font-size: 11px; }
.sp-keys { display: flex; align-items: center; gap: 3px; width: 44px; flex-shrink: 0; justify-content: flex-start; }
.sp-keys kbd {
  font-family: monospace; font-size: 10px; color: #fff;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 3px; padding: 1px 5px;
}
.sp-keys > span { color: rgba(255,255,255,0.5); font-size: 10px; }
.sp-desc { color: rgba(255,255,255,0.8); text-align: left; }

/* ── 마커 보이기/숨기기 토글 ── */
#marker-toggle { display: flex; align-items: center; gap: 4px; cursor: pointer; }
#marker-toggle input { display: none; }
#marker-toggle i,
#marker-toggle span { font-size: 12px; color: rgba(255,255,255,0.35); transition: color 0.15s; }
#marker-toggle input:checked ~ i,
#marker-toggle input:checked ~ span { color: #fff; }

/* ── PDF 컨테이너 커서 ── */
/* body에 page-viewer 또는 page-admin 클래스로 페이지 구분 */
.page-viewer #pdf-container { cursor: grab; }
.page-admin  #pdf-container { cursor: crosshair; }
#pdf-container.dragging { cursor: grabbing; }

/* ── 데칼 마커 (오버레이 위 핀, 원/네모는 인라인 스타일로 결정) ── */
.decal-marker {
  position: absolute;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  cursor: pointer; pointer-events: auto;
  user-select: none; transform-origin: 50% 50%;
}
/* 사용자/관리자 페이지 공통: 23×23 */
.page-viewer .decal-marker,
.page-admin  .decal-marker { width: 28px; height: 28px; }
.page-admin .decal-marker:hover { opacity: 0.85; }

/* 사용자 페이지: 클릭 선택된 데칼 강조 펄스 애니메이션 */
.decal-marker.highlight { animation: pop 0.7s ease-in-out infinite; }
@keyframes pop {
  0%,100% { box-shadow: 0 1px 4px rgba(0,0,0,0.4); }
  50%      { box-shadow: 0 0 0 10px rgba(239,68,68,0.35); }
}

/* ── 썸네일 스트립 ── */
.thumb-item {
  flex-shrink: 0; cursor: pointer;
  border: 2px solid transparent; border-radius: 3px;
  overflow: hidden; position: relative;
}
.thumb-item.active { border-color: #3b82f6; }
.thumb-item canvas { display: block; }
.thumb-item img { display: block; }
/* 페이지 번호 레이블 */
.thumb-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,0.55); color: #fff;
  font-size: 9px; text-align: center; padding: 1px 0;
}
.strip-inner { display: flex; align-items: center; gap: 4px; height: 100%; padding: 0 8px; }

/* ── 왼쪽 사이드바: 아이콘 모드 툴팁 (오른쪽으로 표시) ── */
.sb-icon-tip { position: relative; }
.sb-icon-tip:hover::after {
  content: attr(data-tip);
  position: absolute; left: calc(100% + 8px); top: 50%;
  transform: translateY(-50%);
  background: rgba(17,24,39,0.95); color: #fff;
  font-size: 11px; white-space: pre; padding: 4px 8px;
  border-radius: 4px; pointer-events: none; z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* ── 사용자 페이지: 오른쪽 사이드바 아이콘 모드 툴팁 (왼쪽으로 표시) ── */
.rs-icon-tip { position: relative; }
.rs-icon-tip:hover::after {
  content: attr(data-tip);
  position: absolute; right: calc(100% + 8px); left: auto; top: 50%;
  transform: translateY(-50%);
  background: rgba(17,24,39,0.92); color: #fff;
  font-size: 11px; white-space: pre; padding: 4px 8px;
  border-radius: 4px; pointer-events: none; z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

/* ── 메뉴얼 목록 제품명 툴팁 (position: fixed — overflow 컨테이너 클리핑 회피) ── */
#manual-item-tip {
  display: none; position: fixed;
  background: rgba(17,24,39,0.95); color: #fff;
  font-size: 11px; white-space: pre; padding: 4px 8px;
  border-radius: 4px; pointer-events: none; z-index: 200;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* ── 메뉴얼 아이템 간격 ── */
.manual-item + .manual-item { margin-top: 1px; }

/* ── 등급 뱃지 ── */
.grade-badge {
  font-size: 9px; font-weight: 700; padding: 1px 4px;
  border-radius: 3px; flex-shrink: 0; letter-spacing: 0.02em;
}
.grade-HG  { background: #e5e7eb; color: #374151; }
.grade-RG  { background: #dcfce7; color: #15803d; }
.grade-MG  { background: #dbeafe; color: #1d4ed8; }
.grade-PG  { background: #f3e8ff; color: #7e22ce; }
.grade-ETC { background: #fef3c7; color: #92400e; }

/* ── 관리자 페이지: 십자선 가이드 (클릭 위치 가이드) ── */
#ch-h { position: absolute; left: 0; right: 0; height: 1px; background: rgba(40,40,40,0.4); pointer-events: none; z-index: 15; display: none; }
#ch-v { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(40,40,40,0.4); pointer-events: none; z-index: 15; display: none; }

/* ── 관리자 페이지: 마커 툴팁 (편집/삭제 액션 버튼) ── */
#marker-tooltip {
  position: absolute; z-index: 50;
  background: white;
  border: 1px solid #e5e7eb; border-radius: 8px;
  padding: 4px; display: none;
  gap: 2px; align-items: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
#marker-tooltip button {
  width: 30px; height: 30px;
  border-radius: 6px; border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 13px; outline: none;
}
#tt-edit         { background: #eff6ff; color: #2563eb; }
#tt-edit:hover   { background: #dbeafe; }
#tt-delete       { background: #fff1f2; color: #dc2626; }
#tt-delete:hover { background: #fee2e2; }

/* ── 관리자 페이지: 파일 드롭존 상태 ── */
#drop-zone.drag-over { border-color: #3b82f6; background: #eff6ff; }
#drop-zone.disabled  { pointer-events: none; opacity: 0.5; }

/* ── color input 스와치 ── */
input[type="color"].color-swatch { -webkit-appearance: none; padding: 1px; }
input[type="color"].color-swatch::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"].color-swatch::-webkit-color-swatch { border: none; border-radius: 2px; }

/* ── 데칼 모양 토글 ── */
.shape-toggle .shape-check { display: none; font-size: 0.6rem; }
input[type="radio"]:checked + .shape-toggle { border-color: #3b82f6; background-color: #eff6ff; }
input[type="radio"]:checked + .shape-toggle .shape-check { display: block; color: #3b82f6; }

/* ── 데칼 목록 스켈레톤 ── */
.decal-skel {
  background: rgba(107,114,128,0.2);
  border-radius: 2px;
  animation: skeleton-pulse 1.2s ease-in-out infinite;
}

/* ── PDF 로딩 스켈레톤 ── */
@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.3; }
  50%       { opacity: 0.65; }
}
#pdf-loading {
  position: absolute; inset: 0; z-index: 25;
  display: none; align-items: center; justify-content: center;
  background: #6b7280;
}
#pdf-loading-page {
  width: 52%; max-width: 460px;
  aspect-ratio: 210 / 297;
  background: rgba(255,255,255,0.15);
  border-radius: 4px;
  animation: skeleton-pulse 1.2s ease-in-out infinite;
}