/* 전문가 모드 · 작업실 추가 요소 · 전시 모드 · 인쇄 */

body.paper-light .dock::before,
body.paper-light .trash::before {
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.06) 45%, rgba(255, 255, 255, 0.02) 72%),
    rgba(44, 44, 54, 0.78);
}

/* ---------- 도구 레일 ---------- */
.rail {
  position: fixed;
  z-index: 4;
  left: calc(var(--sl) + 14px);
  /* 위쪽 메뉴 버튼과 겹치지 않게 조금 아래로 */
  top: calc(50% + 44px);
  transform: translateY(-50%);
  max-height: calc(100% - 210px);
  display: flex;
  align-items: stretch;
  touch-action: none;
  transition: transform 0.35s cubic-bezier(0.3, 1.2, 0.4, 1), opacity 0.3s ease;
}

.rail[hidden] { display: none; }

body.side-left .rail {
  left: auto;
  right: calc(var(--sr) + 14px);
  flex-direction: row-reverse;
}

.rail-body {
  width: 78px;
  padding: 8px 0 10px;
  border-radius: 41px;
  background: rgba(38, 38, 48, 0.78);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.07);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  overflow-y: auto;
  scrollbar-width: none;
  transition: opacity 0.25s ease;
}

.rail-body::-webkit-scrollbar { display: none; }

.ri { display: flex; flex-direction: column; align-items: center; gap: 2px; }

.rl {
  font-size: 11px;
  font-weight: 600;
  color: rgba(245, 244, 250, 0.6);
  letter-spacing: -0.02em;
}

.rb {
  position: relative;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.07);
  color: #f2f1f7;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}

.rb:active { transform: scale(0.93); }
.rb:disabled { opacity: 0.35; }

.rb.on,
.rb.open {
  background: rgba(201, 184, 255, 0.28);
  box-shadow: 0 0 0 2px rgba(201, 184, 255, 0.7), 0 0 18px rgba(201, 184, 255, 0.35);
}

.rb .ico {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rb-color .swatch {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.3), 0 0 16px rgba(255, 255, 255, 0.2);
}

.rb-color .swatch.auto { animation: spin 8s linear infinite; }

.rb .badge {
  position: absolute;
  right: 4px;
  bottom: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--lavender);
  color: #1d1d24;
  font-size: 11px;
  font-weight: 800;
  line-height: 18px;
}

.rb .dot {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 8px var(--mint);
  opacity: 0;
}

.rb.flag .dot { opacity: 1; }

/* 세로 슬라이더 */
.vs {
  width: 54px;
  height: 100px;
  display: grid;
  place-items: center;
  cursor: ns-resize;
  touch-action: none;
}

.vs-track {
  position: relative;
  width: 12px;
  height: 86px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
}

.vs-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 6px;
  background: linear-gradient(to top, var(--lavender), var(--mint));
}

.vs-knob {
  position: absolute;
  left: 50%;
  width: 28px;
  height: 28px;
  margin: 0 0 -14px -14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}

.vs-bubble {
  position: absolute;
  left: 96px;
  transform: translateY(-50%);
  min-width: 70px;
  min-height: 70px;
  padding: 10px 14px;
  border-radius: 20px;
  background: rgba(30, 30, 38, 0.92);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  white-space: nowrap;
}

body.side-left .vs-bubble { left: auto; right: 96px; }
.vs-bubble[hidden] { display: none; }

.vs-bubble i {
  display: block;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}

.vs-bubble i.op { width: 44px; height: 44px; }
.vs-bubble b { font-size: 15px; }

/* 접기 손잡이 */
.rail-handle {
  align-self: center;
  width: 26px;
  height: 64px;
  margin-left: 4px;
  padding: 0;
  border: 0;
  border-radius: 13px;
  background: rgba(38, 38, 48, 0.6);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.rail-handle span {
  width: 5px;
  height: 30px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.45);
}

body.side-left .rail-handle { margin-left: 0; margin-right: 4px; }

body.rail-closed .rail { transform: translate(calc(-100% + 34px), -50%); }
body.rail-closed.side-left .rail { transform: translate(calc(100% - 34px), -50%); }
body.rail-closed .rail-body { opacity: 0; pointer-events: none; }

/* ---------- 레일 옆 패널 ---------- */
.pop {
  position: fixed;
  z-index: 5;
  left: calc(var(--sl) + 128px);
  width: min(400px, calc(100vw - 150px));
  max-height: calc(100% - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 16px 18px;
  border-radius: 26px;
  background: rgba(36, 36, 46, 0.92);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.07);
  touch-action: pan-y;
  animation: popIn 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.15);
  color: var(--ink);
}

body.side-left .pop { left: auto; right: calc(var(--sr) + 128px); }
.pop[hidden] { display: none; }

@keyframes popIn {
  from { opacity: 0; transform: translateX(-10px) scale(0.97); }
}

.pop h4 {
  margin: 14px 2px 8px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(245, 244, 250, 0.72);
}

.pop h4:first-child { margin-top: 0; }

.pop .muted {
  font-weight: 400;
  color: rgba(245, 244, 250, 0.45);
  font-size: 12px;
}

.pop button { font: inherit; color: inherit; cursor: pointer; }

.chips {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
}

.chip {
  aspect-ratio: 1;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s;
}

.chip.on {
  box-shadow: 0 0 0 3px #222, 0 0 0 6px #fff;
  transform: scale(0.9);
}

.hsv { display: grid; gap: 10px; }

.hsv .sv {
  width: 100%;
  aspect-ratio: 440 / 280;
  border-radius: 14px;
  touch-action: none;
}

.hsv .hue {
  width: 100%;
  aspect-ratio: 440 / 40;
  touch-action: none;
}

.prow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  font-size: 14px;
}

.switch {
  position: relative;
  flex: none;
  width: 56px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.16);
  transition: background 0.2s;
}

.switch::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
}

.switch.on { background: #5ecf98; }
.switch.on::after { transform: translateX(24px); }

.wide {
  width: 100%;
  min-height: 52px;
  margin-top: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
}

.wide:disabled { opacity: 0.4; }

.wide .ico,
.pseg .ico,
.blabel .ico,
.lbtns .ico {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 붓 카드 */
.brushes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.bcard {
  padding: 6px 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform 0.15s, box-shadow 0.2s;
}

.bcard:active { transform: scale(0.97); }

.bcard.on { box-shadow: 0 0 0 2px var(--lavender), 0 0 20px rgba(201, 184, 255, 0.3); }

.bprev {
  display: block;
  aspect-ratio: 3 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: #222;
}

.bprev img { width: 100%; height: 100%; display: block; }

.blabel {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 4px;
  font-size: 14px;
  font-weight: 700;
}

/* 버튼 줄 */
.pseg { display: flex; gap: 6px; flex-wrap: wrap; }

.pseg button {
  flex: 1 1 0;
  min-width: 56px;
  min-height: 52px;
  padding: 6px 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 13px;
  font-weight: 600;
}

.pseg button.on {
  background: linear-gradient(135deg, rgba(201, 184, 255, 0.34), rgba(168, 240, 209, 0.24));
  border-color: rgba(255, 255, 255, 0.35);
}

.pseg button:disabled { opacity: 0.35; }
.pseg + .pseg { margin-top: 6px; }

.papers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.papers button {
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
}

.papers button.on { box-shadow: 0 0 0 2px var(--lavender); }

.ptile {
  display: block;
  height: 40px;
  border-radius: 9px;
  background-size: 128px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}

/* 레이어 */
.layers { display: grid; gap: 8px; }

.lrow {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.lrow.on {
  box-shadow: 0 0 0 2px var(--lavender);
  background: rgba(201, 184, 255, 0.12);
}

.lthumb {
  width: 76px;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  background: conic-gradient(#3a3a44 25%, #2c2c34 0 50%, #3a3a44 0 75%, #2c2c34 0) 0 0 / 14px 14px;
}

.lthumb canvas { width: 100%; height: 100%; display: block; object-fit: contain; }

.lmeta { display: grid; gap: 6px; min-width: 0; }
.lmeta b { font-size: 14px; }

.lmeta input {
  width: 100%;
  accent-color: var(--lavender);
  touch-action: pan-x;
}

.lbtns {
  display: grid;
  grid-template-columns: repeat(2, 40px);
  gap: 4px;
}

.lbtns button {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  display: grid;
  place-items: center;
}

.lbtns button:disabled { opacity: 0.3; }

/* 화면 맞추기 */
.fitbtn {
  position: fixed;
  z-index: 3;
  right: calc(var(--sr) + var(--gap));
  bottom: calc(var(--sb) + var(--gap));
  width: 64px;
  height: 64px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(44, 44, 54, 0.75);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  animation: popIn 0.25s ease;
}

.fitbtn[hidden] { display: none; }

.fitbtn svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

body.side-left .fitbtn { right: auto; left: calc(var(--sl) + var(--gap)); }

/* 지금 쓰는 특수 도구 알림 (채우기 · 스포이드) */
.toolhint {
  position: fixed;
  z-index: 3;
  left: 50%;
  bottom: calc(var(--sb) + 22px);
  transform: translateX(-50%);
  padding: 12px 20px;
  border-radius: 999px;
  background: rgba(30, 30, 38, 0.88);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.12);
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  pointer-events: none;
}

.toolhint[hidden] { display: none; }

.toast-msg {
  bottom: calc(var(--sb) + 84px);
  max-width: min(92vw, 520px);
  text-align: center;
  line-height: 1.45;
  animation: toastIn 0.3s ease;
}

@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, 8px); }
}

.panel .action small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
}

/* ---------- 작업실 추가 요소 ---------- */
.panel .actions { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
.panel .actions.two { grid-template-columns: repeat(2, 1fr); }
.panel .actions.three { grid-template-columns: repeat(3, 1fr); margin-top: 14px; }

.settings h3.group {
  margin: 18px 2px 4px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--lavender);
}

.text-input {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.25);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  -webkit-user-select: text;
  user-select: text;
  touch-action: manipulation;
}

.text-input:focus {
  outline: none;
  border-color: var(--lavender);
  box-shadow: 0 0 0 3px rgba(201, 184, 255, 0.25);
}

.ex-preview {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 200px;
  padding: 14px;
  border-radius: 18px;
  background: radial-gradient(circle at 50% 40%, #4a4a56, #26262e);
  margin-bottom: 8px;
}

.ex-preview img {
  max-width: 100%;
  max-height: 46vh;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55);
}

.ex-busy {
  position: absolute;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  font-size: 14px;
}

.ex-busy[hidden] { display: none; }
.viewer-row { margin-top: 10px; }
.panel .action:disabled { opacity: 0.4; }

/* ---------- 전시 모드 ---------- */
.exhibit {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 30;
  background: #15140f;
  overflow: hidden;
  touch-action: none;
  color: #f2ede2;
}

.exhibit[hidden] { display: none; }

.ex-wall {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background:
    radial-gradient(ellipse 60% 55% at 50% 38%, rgba(255, 236, 200, 0.22), rgba(255, 236, 200, 0.05) 55%, transparent 75%),
    linear-gradient(#2a2620, #1a1814 70%, #12110d);
}

.ex-wall::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 16%;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
}

.ex-stage { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

.ex-slide {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3vh;
  opacity: 0;
  transition: opacity 1.4s ease;
}

.ex-slide.show { opacity: 1; }
.ex-slide.show .ex-frame img { animation: kenburns 9s ease-out both; }

.ex-frame {
  padding: 3.2vmin;
  background: #f6f3ec;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(0, 0, 0, 0.3);
  border: 2.6vmin solid #8a5a30;
  border-image: linear-gradient(135deg, #7a4f2a, #a06b3b 50%, #6b4223) 1;
  overflow: hidden;
}

.exhibit.frame-black .ex-frame { border-image: linear-gradient(135deg, #2b2b2f, #141416 50%, #202024) 1; }
.exhibit.frame-mat .ex-frame { border: 0.5vmin solid #d9d4c8; border-image: none; }

.ex-frame img {
  display: block;
  max-width: 70vw;
  max-height: 62vh;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}

@keyframes kenburns {
  from { transform: scale(1); }
  to { transform: scale(1.04); }
}

.ex-label {
  display: grid;
  gap: 4px;
  min-width: 220px;
  padding: 12px 20px;
  border-left: 3px solid rgba(255, 236, 200, 0.6);
  background: rgba(0, 0, 0, 0.25);
}

.ex-label b { font-size: clamp(18px, 2.6vmin, 28px); font-weight: 800; }
.ex-label span { font-size: clamp(13px, 1.8vmin, 18px); color: rgba(242, 237, 226, 0.8); }
.ex-label small { font-size: clamp(11px, 1.4vmin, 14px); color: rgba(242, 237, 226, 0.5); }

.ex-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.ex-zone.prev { left: 0; width: 22%; }
.ex-zone.next { right: 0; width: 22%; }
.ex-zone.mid { left: 22%; right: 22%; }

.ex-dots {
  position: absolute;
  left: 50%;
  bottom: calc(var(--sb) + 18px);
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  pointer-events: none;
}

.ex-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  transition: background 0.3s, transform 0.3s;
}

.ex-dots i.on { background: #ffe9c2; transform: scale(1.3); }

.ex-close {
  position: absolute;
  top: calc(var(--st) + 18px);
  right: calc(var(--sr) + 18px);
  width: 60px;
  height: 60px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 2;
}

.ex-close svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
}

.ex-state {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  opacity: 0;
  pointer-events: none;
}

.ex-state.flash { animation: exFlash 0.9s ease; }

@keyframes exFlash {
  0% { opacity: 0; }
  20% { opacity: 0.8; }
  100% { opacity: 0; }
}

.ex-empty {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  text-align: center;
  font-size: 18px;
  line-height: 1.8;
  color: rgba(242, 237, 226, 0.8);
}

/* ---------- 인쇄 ---------- */
#print-area { display: none; }

@media print {
  @page { margin: 10mm; }

  html,
  body {
    position: static !important;
    overflow: visible !important;
    height: auto !important;
    background: #fff !important;
  }

  body > *:not(#print-area) { display: none !important; }

  #print-area { display: block !important; text-align: center; }

  #print-area img { max-width: 100%; max-height: 92vh; object-fit: contain; }

  #print-area p { margin: 6mm 0 0; font-size: 12pt; color: #333; }
}

@media (max-width: 700px) {
  .pop { left: 12px; right: 12px; width: auto; }
  body.side-left .pop { left: 12px; right: 12px; }
}