/* ===========================
   Relight scoped stylesheet
   (function-step3 최적화 버전)
   - global.css / Tailwind와 충돌 방지
   - #relight-root 또는 .relight-root 내부에만 적용
   =========================== */

#relight-root, .relight-root {
  /* Theme tokens */
  --bg:           #f6f7fb;
  --panel:        #ffffff;
  --line:         #e5e7eb;
  --text:         #111827;
  --muted:        #6b7280;
  --accent:       #2563eb;
  --accent-ink:   #1e3a8a;
  --canvas-bg:    #bfbfbf;
  --shadow-sm:    0 1px 2px rgba(0,0,0,.04);
  --radius-lg:    14px;
  --radius-md:    12px;

  font: 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", Arial, sans-serif;
  color: var(--text);
}

/* ---------- 공통 카드/툴바 ---------- */
#relight-root .card,
.relight-root .card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

#relight-root .toolbar,
.relight-root .toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
}

#relight-root .toolbar .spacer,
.relight-root .toolbar .spacer {
  flex: 1;
}

/* ---------- 중앙 캔버스 스테이지 ---------- */
/* function-step3에서는 상단/우측 요소를 고려해 높이를 페이지에서 결정하므로
   여기서는 오버플로우/배경/안티앨리어싱만 책임집니다. */
#relight-root #stage,
.relight-root #stage {
  position: relative;
  overflow: hidden;
  background: transparent; /* 부모(회색 영역/Tailwind)에 의존 */
}

/* 실제 렌더 캔버스 */
#relight-root canvas,
.relight-root canvas {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
  image-rendering: optimizeQuality;
}

/* 포토샵처럼 캔버스 주변 배경(체커보드 대신 은은한 회색) */
#relight-root #viewer,
.relight-root #viewer {
  background: var(--canvas-bg);
}

/* 고해상도 선명도(선택) */
@media (min-resolution: 2dppx) {
  #relight-root canvas,
  .relight-root canvas {
    image-rendering: -webkit-optimize-contrast;
  }
}

/* ---------- 우측 패널(‘AI 기능’) ---------- */
#relight-root aside,
.relight-root aside {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#relight-root .panel,
.relight-root .panel {
  padding: 12px;
}

#relight-root .panel h3,
.relight-root .panel h3 {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
}

/* 패널 상단 마스터 불투명도 바 */
.relight-root #masterOpacityRow { margin-bottom: 6px; }
.relight-root #masterOpacityRow .range { width: 100%; }
.relight-root #masterOpacity:disabled { opacity: .5; cursor: not-allowed; }

/* 업로드 드롭존 */
#relight-root .dropzone,
.relight-root .dropzone {
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  padding: 14px;
  text-align: center;
  color: var(--muted);
  background: #fafafa;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  user-select: none;
}
#relight-root .dropzone.dragover,
.relight-root .dropzone.dragover {
  border-color: var(--accent);
  background: #eef2ff;
  color: var(--accent-ink);
}

/* 숨김 파일 입력 */
#relight-root input[type="file"],
.relight-root input[type="file"] {
  display: none;
}

/* ---------- 버튼 ---------- */
#relight-root .btn,
.relight-root .btn {
  appearance: none;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  transition: transform .04s ease, box-shadow .12s ease, border-color .12s ease;
}
#relight-root .btn:hover,
.relight-root .btn:hover {
  border-color: #cbd5e1;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
#relight-root .btn:active,
.relight-root .btn:active {
  transform: translateY(1px);
}
#relight-root .btn.btn-xs,
.relight-root .btn.btn-xs {
  padding: 4px 6px;
  font-size: 11px;
}
#relight-root .btn.primary,
.relight-root .btn.primary {
  border-color: #666666;
  background: #ffffff;
  color: #000000;
}

/* ---------- 레이어 리스트 ---------- */
#relight-root .layers,
.relight-root .layers {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 50vh;   /* 패널 높이 제한이 있을 때 내부 스크롤 */
  overflow: auto;
}

/* 스크롤바(선택) */
#relight-root .layers::-webkit-scrollbar,
.relight-root .layers::-webkit-scrollbar { width: 10px; height: 10px; }
#relight-root .layers::-webkit-scrollbar-thumb,
.relight-root .layers::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 9999px;
  border: 2px solid #f3f4f6;
}
#relight-root .layers::-webkit-scrollbar-track,
.relight-root .layers::-webkit-scrollbar-track { background: #f9fafb; }

#relight-root .layer-item,
.relight-root .layer-item {
  display: flex;
  align-items: flex-start;
  padding: 8px 12px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid transparent; /* hover 대비 여백 유지 */
  transition: background-color .12s, border-color .12s;
}
#relight-root .layer-item:hover,
.relight-root .layer-item:hover {
  background: #fbfbfb;
  border-color: #f1f5f9;
}

#relight-root .layer-item .left,
.relight-root .layer-item .left {
  width: 56px;
  flex: 0 0 56px;
}

#relight-root .layer-item .right.drag-zone,
.relight-root .layer-item .right.drag-zone {
  flex: 1;
  cursor: grab;
}
#relight-root .layer-item .right.drag-zone:active,
.relight-root .layer-item .right.drag-zone:active {
  cursor: grabbing;
}

#relight-root .layer-item.is-active,
.relight-root .layer-item.is-active {
  background: rgba(0,0,0,0.06);
  outline: 1px solid rgba(0,0,0,0.15);
}

#relight-root .layer-item.dragging,
.relight-root .layer-item.dragging {
  opacity: .6;
}

#relight-root .layer-item.drag-over-before,
.relight-root .layer-item.drag-over-before {
  box-shadow: 0 -2px 0 0 currentColor inset;
}
#relight-root .layer-item.drag-over-after,
.relight-root .layer-item.drag-over-after {
  box-shadow: 0 2px 0 0 currentColor inset;
}

/* 레이어 카드 안의 불투명도 UI 전체 숨김 */
.relight-root .layer-item .range,      /* 슬라이더 */
.relight-root .layer-item .pct,        /* % 숫자 */
.relight-root .layer-item .muted {     /* '불투명도' 글자 (muted 클래스) */
  display: none !important;
}

#relight-root .layer-name,
.relight-root .layer-name {
  flex: 0 0 130px;
  max-width: 130px;
  width: 130px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#relight-root .vis-wrap,
.relight-root .vis-wrap {
  display: block;
  padding: 10px 12px;
  margin: -6px 6px -6px -6px;
  border-radius: 6px;
}
#relight-root .vis-wrap:hover,
.relight-root .vis-wrap:hover {
  background: rgba(0,0,0,0.04);
}

/* 말줄임이 제대로 동작하도록 부모 flex 컨테이너에 최소폭 0 지정(권장) */
#relight-root .layer-item .right,
.relight-root .layer-item .right {
  min-width: 0;
}

/* ---------- 유틸리티 ---------- */
#relight-root .muted,
.relight-root .muted { color: var(--muted); }

#relight-root .row,
.relight-root .row { display: flex; align-items: center; gap: 8px; }

#relight-root .range,
.relight-root .range { width: 100%; }

/* 드래그 중 텍스트 선택 방지 */
#relight-root .no-drag, #relight-root .no-drag * ,
.relight-root .no-drag, .relight-root .no-drag * {
  user-select: none !important;
}

/* ---------- 반응형/환경 대응(선택) ---------- */
/* 다크 모드 기조가 있다면 약한 명도 보정 */
@media (prefers-color-scheme: dark) {
  #relight-root, .relight-root {
    --panel: #0b0b0d;
    --line:  #22242a;
    --text:  #f5f5f6;
    --muted: #9aa0a6;
    --canvas-bg: #3a3a3a;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.6);
  }
  #relight-root .dropzone,
  .relight-root .dropzone {
    background: #121317;
    color: var(--muted);
  }
  #relight-root .layers::-webkit-scrollbar-track,
  .relight-root .layers::-webkit-scrollbar-track { background: #0e0f12; }
  #relight-root .layers::-webkit-scrollbar-thumb,
  .relight-root .layers::-webkit-scrollbar-thumb { background: #2a2d34; border-color:#0e0f12; }
}

/* 고감도 포인터 환경에서 hover hit area를 조금 부드럽게 */
@media (hover: hover) and (pointer: fine) {
  #relight-root .btn:hover,
  .relight-root .btn:hover {
    filter: brightness(0.98);
  }
}

/* 캔버스에 파일 드래그 중일 때 하이라이트 */
.relight-root #viewer.canvas-dragover,
.relight-root #imageCanvas.canvas-dragover {
  outline: 2px dashed rgba(255,255,255,0.35);
  outline-offset: -4px;
}

/* 우측 패널 하단 업로드 아이콘 영역 */
.relight-root #uploadFooter {
  position: sticky; bottom: 0; z-index: 5;
  padding: 8px 10px;
  background: var(--panel);
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex; justify-content: flex-end;
}
.relight-root #uploadFooter .icon-btn {
  width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: #555454; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.relight-root #uploadFooter .icon-btn:hover { background: rgba(255,255,255,0.08); }