/* 나의 창작실 v0.2 - 이미지 편집기 확장(비율 5종, 이미지 레이어) 및 스케치 패드.
   styles.css 다음에 불러온다. 색과 모양은 styles.css 의 변수를 그대로 쓴다. */

/* ---------- 비율 5종 ---------- */
.seg-ratios { grid-template-columns: repeat(3, 1fr); }
.ratio-glyph.r3 { width: 20px; height: 15px; }
.ratio-glyph.r4 { width: 15px; height: 20px; }

/* ---------- 이미지 레이어 ---------- */
.inline-pick { display: flex; gap: 8px; align-items: center; }
.inline-pick .input { flex: 1; min-width: 0; }
.layer-thumb {
  flex: none; width: 28px; height: 28px; object-fit: cover; border-radius: 4px;
  border: 1px solid var(--line-2); background: var(--paper-2);
}
.layer-asset-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 스케치 패드 ---------- */
.sketch-overlay {
  position: fixed; inset: 0; z-index: 300; display: flex; padding: 12px;
  background: rgba(36, 34, 30, .55);
}
.sketch-shell {
  position: relative; flex: 1; min-width: 0; min-height: 0;
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  background: var(--paper); border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 10px 40px rgba(36, 34, 30, .3);
}
.sketch-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
}
.sketch-title { font-family: var(--font-serif); font-size: 19px; font-weight: 700; }
.sketch-body { display: grid; grid-template-columns: minmax(0, 1fr) 290px; min-height: 0; }
.sketch-stage {
  display: flex; align-items: center; justify-content: center; padding: 18px;
  min-width: 0; min-height: 0; overflow: hidden; background: var(--desk);
}
.sketch-board {
  position: relative; flex: none; width: 320px; height: 180px;
  box-shadow: 0 2px 4px rgba(36, 34, 30, .12), 0 12px 32px rgba(36, 34, 30, .16);
}
.sketch-board > canvas, .sketch-paper { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sketch-paper { background: #fff; }
.sketch-paper.is-transparent {
  background: repeating-conic-gradient(#e6dfd1 0% 25%, #fbf8f2 0% 50%) 0 0 / 18px 18px;
}
.sketch-guide { opacity: .35; pointer-events: none; }
.sketch-live { pointer-events: none; }
.sketch-draw { touch-action: none; cursor: crosshair; }
.sketch-draw.is-eraser { cursor: cell; }
.sketch-tools {
  display: grid; gap: 14px; align-content: start; padding: 16px; overflow: auto;
  border-left: 1px solid var(--line); background: var(--paper);
}
.sketch-tools .check { font-size: 13.5px; }
.sketch-tools .field .check { margin-top: 4px; }
.sketch-note {
  display: flex; gap: 6px; align-items: flex-start; padding: 9px 11px; border-radius: var(--radius-sm);
  background: var(--amber-soft); color: #6d4c0e; font-size: 12.5px;
}
.sketch-note .icon { margin-top: 2px; }
.sketch-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; padding-top: 4px; }
.sketch-actions .btn { flex: 1 1 auto; }
.sketch-confirm {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  width: min(380px, calc(100% - 32px)); display: grid; gap: 14px; padding: 18px;
  background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(36, 34, 30, .28);
}

@media (max-width: 760px) {
  .sketch-overlay { padding: 0; }
  .sketch-shell { border-radius: 0; }
  .sketch-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .sketch-stage { padding: 10px; }
  .sketch-tools { max-height: 44vh; border-left: 0; border-top: 1px solid var(--line); }
}