/* 공용 사진 편집기 — 자르기·돌리기·보정
   지금은 작품등록(인스타 사진)에서 쓰고, 나중에 사진대지에도 붙일 수 있게 따로 뒀다.
   사진대지(staff/helper.html)의 편집창 스타일을 기준으로 맞췄다 — 두 곳이 같아 보이도록. */

.pe-modal{display:none;position:fixed;inset:0;z-index:10600;pointer-events:none;
  align-items:center;justify-content:center}
.pe-modal.on{display:flex}
.pe-modal::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.55);pointer-events:auto}
.pe-box{position:relative;background:#fff;border-radius:8px;width:min(94vw,760px);max-height:94vh;
  display:flex;flex-direction:column;overflow:hidden;pointer-events:auto;
  box-shadow:0 18px 60px rgba(0,0,0,.3);font-family:'Noto Sans KR',sans-serif}

.pe-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 16px;border-bottom:1px solid #eee;font-size:13px;color:#444;cursor:move;
  background:#fafafa;user-select:none}
.pe-head b{color:#1a1a1a}
.pe-x{border:0;background:none;font-size:18px;cursor:pointer;color:#888;line-height:1}

/* 비율 고르기 줄 */
.pe-ratio{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 16px;
  border-bottom:1px solid #eee;font-size:12px;color:#555}
.pe-ratio b{font-size:12px;color:#1a1a1a}
.pe-chip{border:1.5px solid #c9c5b8;background:#fff;border-radius:3px;padding:6px 12px;cursor:pointer;
  font-family:inherit;font-size:12px;font-weight:700;color:#444}
.pe-chip.on{background:#1a1a1a;color:#fff;border-color:#1a1a1a}
.pe-hint{font-size:11.5px;color:#999;flex-basis:100%;margin:0}

.pe-main{flex:1;display:flex;min-height:0}
/* 여러 장 편집 — 왼쪽 목록 */
.pe-strip{width:96px;flex-shrink:0;overflow-y:auto;background:#111;padding:6px;
  display:flex;flex-direction:column;gap:6px;max-height:58vh}
.pe-strip img{width:100%;display:block;border-radius:3px;cursor:pointer;
  border:2px solid transparent;opacity:.55}
.pe-strip img.on{border-color:#c0392b;opacity:1}
.pe-strip .pe-done{outline:2px solid #27ae60;outline-offset:-2px}
.pe-canvas{flex:1;background:#222;display:flex;align-items:center;justify-content:center;
  min-height:300px;max-height:58vh;overflow:hidden}
.pe-canvas img{max-width:100%;display:block}

/* 보정 */
.pe-adj{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding:10px 16px;
  border-top:1px solid #eee;background:#fafafa}
.pe-adj label{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#555}
.pe-adj input[type=range]{width:100px}

.pe-tools{display:flex;gap:8px;align-items:center;padding:12px 16px;border-top:1px solid #eee;
  flex-wrap:wrap}
.pe-btn{border:1.5px solid #c9c5b8;background:#fff;border-radius:3px;padding:8px 14px;cursor:pointer;
  font-family:inherit;font-size:12.5px;font-weight:700;color:#333}
.pe-btn:hover{border-color:#1a1a1a}
.pe-btn.save{background:#1a1a1a;color:#fff;border-color:#1a1a1a}
.pe-btn:disabled{opacity:.5;cursor:default}
.pe-spacer{flex:1}
.pe-msg{font-size:12px;color:#666;padding:0 16px 10px;min-height:14px}