/* 마우스 커서 그림 — "Photoshop CC Black" (RIDDLER, rw-designer.com/user/70600).
   라이선스가 개인·비영리로 제한돼 있다. 파는 물건에 넣으면 안 된다.
   자세한 것은 docs/cursor-license.md 를 볼 것. */
.editor, .editor button, .editor .panel, .editor .modal {
  cursor: url("/cursors/normal-select.png") 0 0, default;
}
.editor button:disabled { cursor: url("/cursors/unavailable.png") 8 9, not-allowed; }

/* LayerPhoto 에디터 레이아웃 — UI 스펙의 5구역 구조, 다크 고정 */

body.editor-body {
  --panel-col: var(--panels-w, 272px);
  margin: 0;
  background: var(--deep);
  color: var(--text);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", system-ui, sans-serif;
  font-size: 12.5px;
  overflow: hidden;
  /* 브라우저가 그리는 것들(<select> 펼친 목록·기본 스크롤 막대·색 고르개 창)을
     어둡게 그리게 한다. 이 한 줄이 없으면 옵션 막대는 어두운데 글꼴 목록만
     흰 종이처럼 튀어나온다 — 우리가 CSS 로는 못 칠하는 자리다. */
  color-scheme: dark;

  /* 기본 = Photoshop 기본 테마인 Dark Grey. CS6 이후 포토샵이 켜지면 나오는 그 회색이다.
     사이트 공통 팔레트(application.css :root)보다 밝아서, 에디터에서만 이 값을 쓴다. */
  /* 2026-08-31: 사장님이 주신 포토샵 화면 두 장(속성 패널·레이어 패널)에서
     화소 색을 그대로 뽑아 맞췄다. 우리 값이 통째로 한 단 어두웠다 —
     패널 바탕이 #383838 이었는데 실제는 #535353 이다. */
  --canvas-bg: #282828;  /* 캔버스 바깥 — 그림에 눈이 가도록 가장 어둡게 */
  --deep: #424242;    /* 들어간 면 — 탭 줄·꺼진 탭·찾기 줄 */
  --panel: #535353;   /* 패널 바탕 · 켜진 탭 · 레이어 줄 · 아래 단추 줄 */
  --panel2: #5e5e5e;  /* 떠 있는 막대처럼 한 단 올라온 면 */
  --sunken: #454545;  /* 입력칸처럼 파인 면 (패널보다 어둡다) */
  --list-bg: #4d4d4d; /* 목록의 빈 자리 */
  --row-on: #6b6b6b;  /* 고른 줄 — 포토샵은 파랑이 아니라 밝은 회색이다 */
  --line: #454545;    /* 줄 사이 구분선 1px */
  /* 슬라이더 홈 — 구분선(--line)과 따로 둔다.
     기본 테마는 --line 과 --sunken 이 둘 다 #454545 라, 홈을 --line 으로 그리면
     파인 면(입력칸·팝업) 위에서 바탕과 색이 똑같아져 줄이 통째로 사라졌다
     (사장님 지적 2026-09-04, 레이어 패널 불투명도 슬라이더). 홈은 어느 면 위에
     올려도 보이도록 패널보다 한참 어둡게 잡는다. */
  --slider-track: #2f2f2f;
  /* 글자도 사장님 그림에서 뽑았다 — 우리 것이 조금 어두웠다.
     떠 있는 레이어 패널 그림에서 잰 값:
       값·이름(표준 · 100 · 레이어 이름 · 배경)  #f0f0f0
       이름표(불투명도: · 잠그기:)               #d6d6d6
       안 고른 탭                               #a0a0a0
     밝은 글자 #d3d3d3 → #f0f0f0, 흐린 글자 #969696 → #d6d6d6.
     이름표가 값보다 살짝 어두울 뿐 크게 안 죽는다 — 전에는 너무 흐렸다. */
  --text: #f0f0f0;
  --text-dim: #d6d6d6;
  --text-faint: #a0a0a0;   /* 안 고른 탭처럼 더 물러나야 하는 것 */
}

/* ── 테마 ──
   앞의 넷은 Photoshop 인터페이스 환경 설정과 같은 구성·같은 순서(어두운 것부터).
   뒤의 둘은 우리가 더한 것이다. */
body[data-editor-theme="black"] {
  --canvas-bg: #141414; --deep: #1b1b1b; --panel: #262626; --panel2: #303030;
  --line: #131313; --text: #cccccc; --text-dim: #8c8c8c;
  --slider-track: #0d0d0d;
  --sunken: #2b2b2b; --list-bg: #303030; --row-on: #454545;
  --text-faint: #8c8c8c;
}
body[data-editor-theme="medium"] {
  --canvas-bg: #454545; --deep: #535353; --panel: #5b5b5b; --panel2: #666666;
  --line: #3c3c3c; --text: #e8e8e8; --text-dim: #b4b4b4;
  --slider-track: #333333;
  --sunken: #4d4d4d; --list-bg: #565656; --row-on: #7d7d7d;
  --text-faint: #b4b4b4;
}
body[data-editor-theme="light"], body[data-editor-theme="white"] { color-scheme: light; }
body[data-editor-theme="light"] {
  --canvas-bg: #9e9e9e; --deep: #b8b8b8; --panel: #d4d4d4; --panel2: #dedede;
  --line: #a0a0a0; --text: #262626; --text-dim: #5e5e5e;
  --slider-track: #8a8a8a;
  --sunken: #c8c8c8; --list-bg: #cdcdcd; --row-on: #b0b0b0;
  --text-faint: #5e5e5e;
}
body[data-editor-theme="white"] {
  --canvas-bg: #d8d9dd; --deep: #e8e9ec; --panel: #f6f7f9; --panel2: #ffffff;
  --line: #d0d2d8; --text: #1b1c1f; --text-dim: #5e626b;
  --slider-track: #b6bac3;
  --sunken: #eceef1; --list-bg: #f0f1f4; --row-on: #dfe1e6;
  --text-faint: #5e626b;
}
body[data-editor-theme="darkblue"] {
  --canvas-bg: #080c15; --deep: #0d1320; --panel: #141c2d; --panel2: #1b2539;
  --line: #2b3852; --text: #d9e0ee; --text-dim: #8a94a8;
  --slider-track: #0a0f1a;
  --sunken: #2f3440; --list-bg: #333947; --row-on: #4a5364;
  --text-faint: #8f929b;
}
.theme-item.checked::before, .unit-item.checked::before, .snap-item.checked::before { content: "✓ "; }
/* 라디오 줄 (문자 메뉴의 앤티앨리어싱 다섯·방향 둘) — 지금 값에만 ✓ 가 붙는다.
   원문 문자 메뉴가 그렇고, 책 814쪽 그림 26.23 의 패널 메뉴도 켜진 것에 ✓ 를 낸다.
   체크가 없는 줄도 자리를 비워 둬야 글자가 들쭉날쭉하지 않는다 */
.radio-item::before { content: "✓"; visibility: hidden; margin-right: 4px; }
.radio-item.checked::before { visibility: visible; }

/* 편집기 화면의 글자는 읽는 것이지 고르는 것이 아니다.
   도구를 길게 눌러 목록을 열고 항목까지 끌어갈 때, 막아 두지 않으면 브라우저가
   "사각형 선택"·"타원 선택" 같은 이름을 파랗게 긁어 버린다. 긁힌 글자가 생기면
   그 뒤 마우스 조작이 글자 고르기로 이어져 항목을 못 고른다.
   글을 실제로 고쳐야 하는 곳(입력칸·글 쓰는 상자)만 다시 열어 준다. */
.editor {
  user-select: none;
  -webkit-user-select: none;
}
.editor input, .editor textarea, .editor [contenteditable="true"], .text-overlay {
  user-select: text;
  -webkit-user-select: text;
}

.editor {
  display: grid;
  height: 100vh;
  height: 100dvh;
  /* 툭 나온 패널(아이콘 도크)이 이 안에 겹쳐 뜬다 */
  position: relative;
  grid-template-rows: 36px 32px 1fr 24px;
  /* 오른쪽 패널 칸 폭은 늘 --panel-col 하나가 정한다 (펼침 = --panels-w, 접힘 = --dock-w).
     **기본값을 꼭 적는다** — 변수가 비면 이 선언이 통째로 무효가 되어 칸이 자동으로 잡힌다
     (실측: 40px 1192px 268px → 180px 105px 1199px 로 화면이 무너졌다). */
  /* 도구 막대 오른쪽에 **왼쪽 도크** 칸이 하나 더 있다. 비어 있으면 0px 이라 안 보인다.
     근거: 책 175쪽 옆 상자 — 도구 막대 옆에도 패널을 붙일 수 있다. */
  grid-template-columns: 40px var(--left-dock, 0px) 1fr var(--panel-col, 272px);
  grid-template-areas:
    "menu   menu     menu   menu"
    "opts   opts     opts   opts"
    "tools  leftdock canvas panels"
    "status status   status status";
}

/* ── 광고 레일 (ADSENSE_CLIENT 설정 시에만 렌더링) ── */
/* 광고 레일은 화면이 충분히 넓을 때만 (편집기 공간 우선) */
@media (min-width: 1551px) {
  body.with-ads .editor {
    grid-template-columns: 40px var(--left-dock, 0px) 1fr var(--panel-col, 272px) 316px;
    grid-template-areas:
      "menu   menu     menu   menu   ads"
      "opts   opts     opts   opts   ads"
      "tools  leftdock canvas panels ads"
      "status status   status status ads";
  }
}
@media (max-width: 1550px) {
  .ad-rail { display: none; }
}
.ad-rail {
  grid-area: ads;
  background: var(--panel);
  border-left: 1px solid var(--line);
  padding: 8px;
  overflow-y: auto;
}
.ad-label { display: block; font-size: 10px; color: var(--text-dim); margin: 8px 0 3px; }
.ad-slot {
  width: 300px; border: 1px dashed var(--line); border-radius: 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--text-dim); font-size: 13px; text-align: center; gap: 4px;
}
.ad-slot small { font-size: 11px; }
.ad-remove { margin-top: 14px; font-size: 11.5px; color: var(--text-dim); }
.ad-pro { color: var(--blue); }