/* [2026-07-20] 이미지 합성(레이어 합성) 에디터 스타일
   사이트(QR·removebg)와 어울리도록 라이트 테마로 통일. .cmp 스코프로 main.css와 충돌 방지. */

.cmp{
  --border:#e0e0e0;--border2:#d0d0d0;
  --accent:#37be69;--accent-dark:#0d8339;--accent2:#e5f6ec;
  --panel:#fff;--soft:#f5f5f5;--soft2:#fafafa;
  --text:#333;--text2:#888;--text3:#aaa;
  --radius:12px;
  color:var(--text);font-size:14px;
  width:1080px;max-width:100%;margin:48px auto;padding:0 20px 40px;
}
.cmp *{box-sizing:border-box;}
.cmp-inner{width:100%;margin:0 auto;}
.cmp-hidden{display:none !important;}

/* 인라인 아이콘(Feather 스타일, currentColor 상속) */
.cmp .ico{width:16px;height:16px;flex:none;vertical-align:-3px;margin-right:6px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.cmp .ico--lg{width:40px;height:40px;stroke-width:1.5;margin:0;vertical-align:middle;}
.cmp .layer-vis .ico{width:15px;height:15px;margin:0;vertical-align:-2px;}

/* 페이지 타이틀 */
.cmp .page-title{margin-bottom:36px;text-align:center;}
.cmp .page-title h1{font-size:28px;font-weight:700;margin-bottom:8px;color:#16181d;letter-spacing:-.02em;}
.cmp .page-title p{font-size:15px;color:#5b6270;line-height:1.6;}

/* 에디터 레이아웃 */
.cmp .editor{display:grid;grid-template-columns:250px 1fr;gap:16px;align-items:start;}

/* 사이드바 */
.cmp .sidebar{display:flex;flex-direction:column;gap:12px;}
.cmp .panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);}
.cmp .panel--flex{flex:1;}
.cmp .panel-head{padding:11px 14px;border-bottom:1px solid var(--border);font-size:15px;font-weight:500;color:var(--text);letter-spacing:.02em;display:flex;align-items:center;justify-content:space-between;}
.cmp .panel-count{font-size:13px;color:var(--text3);font-weight:400;}

/* 배경 선택 */
.cmp .bg-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px;}
.cmp .bg-thumb{width:100%;aspect-ratio:16/9;border-radius:8px;cursor:pointer;border:2px solid transparent;object-fit:cover;transition:.15s;}
.cmp .bg-thumb:hover{border-color:var(--border2);}
.cmp .bg-thumb.sel{border-color:var(--accent);}
.cmp .bg-white-thumb{background:#f0f0f0;display:flex;align-items:center;justify-content:center;font-size:12px;color:#999;border-radius:8px;aspect-ratio:16/9;cursor:pointer;border:2px solid transparent;transition:.15s;}
.cmp .bg-white-thumb:hover{border-color:var(--border2);}
.cmp .bg-white-thumb.sel{border-color:var(--accent);}
.cmp .bg-upload-lbl{width:100%;aspect-ratio:16/9;border-radius:8px;border:1.5px dashed var(--border2);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;gap:4px;background:var(--soft2);color:var(--text2);transition:.15s;}
.cmp .bg-upload-lbl:hover{border-color:var(--accent);background:var(--accent2);color:var(--accent-dark);}
.cmp .bg-upload-lbl span{font-size:12px;color:var(--text3);}

/* 레이어 추가 버튼 */
.cmp .add-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px;}
.cmp .add-btn{padding:9px 6px;border-radius:8px;border:1px solid var(--border2);background:var(--soft);color:var(--text2);font-size:12px;cursor:pointer;text-align:center;transition:.15s;}
.cmp .add-btn:hover{border-color:var(--accent);color:var(--accent-dark);background:var(--accent2);}

/* 파일 입력 숨김 */
.cmp input[type=file]{display:none;}

/* 레이어 목록 */
.cmp .layer-list{padding:8px;display:flex;flex-direction:column;gap:4px;max-height:260px;overflow-y:auto;}
.cmp .layer-item{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;cursor:pointer;border:1px solid transparent;transition:.15s;}
.cmp .layer-item:hover{background:var(--soft);}
.cmp .layer-item.active{background:var(--accent2);border-color:rgba(55,190,105,.35);}
.cmp .layer-thumb{width:32px;height:32px;border-radius:6px;background:var(--soft);border:1px solid var(--border2);overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px;}
.cmp .layer-thumb canvas{width:100%;height:100%;}
.cmp .layer-info{flex:1;min-width:0;}
.cmp .layer-name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text);}
.cmp .layer-type{font-size:10px;color:var(--text3);}
.cmp .layer-del{font-size:12px;color:var(--text3);cursor:pointer;padding:3px 5px;border-radius:4px;flex-shrink:0;}
.cmp .layer-del:hover{color:#e23c30;background:rgba(226,60,48,.1);}
.cmp .layer-vis{font-size:13px;color:var(--text3);cursor:pointer;flex-shrink:0;}
.cmp .no-layer{font-size:14px;color:var(--text3);text-align:center;padding:16px 8px;}

/* 속성 패널 */
.cmp .props-body{padding:12px;}
.cmp .prop-row{margin-bottom:12px;}
.cmp .prop-label{font-size:12px;color:var(--text2);margin-bottom:5px;display:flex;justify-content:space-between;}
.cmp .prop-val{color:var(--accent-dark);font-weight:500;}
.cmp select.prop-select,.cmp input.prop-text,.cmp input.prop-color{width:100%;background:#fff;border:1px solid var(--border2);border-radius:8px;color:var(--text);font-size:13px;padding:8px 10px;}
.cmp select.prop-select:focus,.cmp input.prop-text:focus{outline:none;border-color:var(--accent);}
.cmp select.prop-select{cursor:pointer;}
.cmp input.prop-color{height:34px;padding:2px 4px;cursor:pointer;}
.cmp input[type=range]{width:100%;accent-color:var(--accent);}
.cmp .no-sel{font-size:14px;color:var(--text3);text-align:center;padding:16px 8px;}
.cmp .cmp-del-row{margin-top:4px;margin-bottom:0;}
.cmp .cmp-del-btn{width:100%;padding:9px;border-radius:8px;border:1px solid #e2b6b2;background:#fff;color:#e23c30;font-size:12px;font-weight:500;cursor:pointer;transition:.15s;}
.cmp .cmp-del-btn:hover{background:#fdeceb;border-color:#e23c30;}

/* 캔버스 영역 */
.cmp .canvas-wrap{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
.cmp .canvas-toolbar{padding:10px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:8px;}
.cmp .canvas-toolbar span{font-size:15px;color:var(--text2);}
.cmp .canvas-tools{display:flex;gap:8px;}
.cmp .canvas-body{padding:16px;background:var(--soft2);min-height:480px;display:flex;align-items:center;justify-content:center;}
.cmp #canvas-out{display:block;max-width:100%;border-radius:8px;cursor:crosshair;box-shadow:0 1px 6px rgba(0,0,0,.08);}
.cmp .canvas-empty{text-align:center;color:var(--text3);}
.cmp .canvas-empty .icon{font-size:40px;margin-bottom:10px;}
.cmp .canvas-empty p{font-size:15px;line-height:1.5;}

/* 버튼 */
.cmp .btn{padding:9px 18px;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;border:1px solid transparent;transition:.15s;display:inline-flex;align-items:center;gap:5px;}
.cmp .btn-ghost{background:#fff;border:1px solid var(--border2);color:var(--text2);}
.cmp .btn-ghost:hover{color:var(--text);background:var(--soft);}
.cmp .btn-accent{background:var(--accent);color:#fff;}
.cmp .btn-accent:hover{opacity:.92;}
.cmp .btn-sm{padding:7px 12px;font-size:14px;}

/* 텍스트 추가 모달 */
.cmp-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:200;display:none;align-items:center;justify-content:center;}
.cmp-modal-backdrop.open{display:flex;}
.cmp-modal{background:#fff;border:1px solid #e0e0e0;border-radius:14px;padding:24px;width:340px;color:#333;box-shadow:0 10px 40px rgba(0,0,0,.15);}
.cmp-modal h3{font-size:16px;font-weight:700;margin-bottom:18px;}
.cmp-modal input,.cmp-modal select{width:100%;background:#fff;border:1px solid #d0d0d0;border-radius:8px;color:#333;font-size:13px;padding:9px 11px;margin-bottom:10px;}
.cmp-modal input:focus,.cmp-modal select:focus{outline:none;border-color:#37be69;}
.cmp-modal .cmp-modal-color{height:38px;padding:2px 4px;cursor:pointer;}
.cmp-modal-btns{display:flex;gap:8px;justify-content:flex-end;margin-top:8px;}
.cmp-modal .btn{padding:9px 18px;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;border:1px solid transparent;display:inline-flex;align-items:center;gap:5px;}
.cmp-modal .btn-ghost{background:#fff;border:1px solid #d0d0d0;color:#888;}
.cmp-modal .btn-accent{background:#37be69;color:#fff;}

@media(max-width:768px){
  .cmp{margin:clamp(24px,5.2vw,40px) auto;padding:0 clamp(12px,2.6vw,20px) clamp(28px,5.2vw,40px);}
  .cmp .editor{grid-template-columns:1fr;gap:clamp(12px,2.6vw,16px);}
  .cmp .sidebar{flex-direction:row;flex-wrap:wrap;}
  .cmp .panel{flex:1;min-width:clamp(150px,32vw,180px);}
  .cmp .page-title h1{font-size:clamp(20px,4.7vw,28px);}
  .cmp .page-title p{font-size:clamp(13px,2.6vw,15px);}
  .cmp .canvas-body{min-height:clamp(320px,62vw,480px);}
  .cmp .btn{padding:clamp(8px,1.56vw,9px) clamp(14px,2.86vw,18px);font-size:clamp(12px,1.95vw,13px);}
}