/* ============================================
   판촉물 시안 편집기 — 스타일시트 (2026-06-22 고도화)
   프리툴박스 톤 통일: 화이트 배경, 1px 테두리, 오렌지 액센트, 그림자 없음
   홍보 랜딩페이지(Pretendard·둥근 카드·주황) 톤으로 전 화면 통일
   ============================================ */
:root{
  --bg:#ffffff;
  --surface:#ffffff;
  --panel:#f8fafc;
  --panel-2:#f1f5f9;
  --border:#e5e7eb;
  --border-strong:#d1d5db;
  --text:#111827;
  --text-dim:#374151;
  --text-muted:#6b7280;
  --accent:#ff9700;
  --accent-hover:#f08c00;
  --accent-bg:#fff7ed;
  --accent-line:#fed7aa;
  --accent-ink:#c2410c;
  --danger:#b91c1c;
  --green:#16a34a;
  --radius:12px;
  --radius-lg:16px;
}
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');
@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Nanum+Myeongjo:wght@400;700&family=Noto+Sans+KR:wght@400;500;700&display=swap');

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{
  font-family:'Pretendard','Apple SD Gothic Neo','Noto Sans KR',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

/* --- 헤더 --- */
.app-header{
  height:62px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 22px;
  border-bottom:1px solid var(--border);
  background:#fff;
}
.brand{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:800;letter-spacing:-.01em}
.brand svg{flex-shrink:0}
.brand-logo{max-height:34px;max-width:160px;object-fit:contain;display:block}
.brand-tag{font-size:12px;font-weight:600;color:var(--text-muted);padding-left:9px;margin-left:5px;border-left:1px solid var(--border)}
.header-actions{display:flex;align-items:center;gap:8px}

/* --- 버튼 --- */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  font-family:inherit;font-size:13.5px;font-weight:600;
  padding:9px 15px;border-radius:10px;cursor:pointer;
  border:1px solid var(--border);background:#fff;color:var(--text-dim);
  transition:background .13s,border-color .13s,color .13s;
}
.btn:hover{background:var(--panel);border-color:var(--border-strong)}
.btn-accent{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
.btn-accent:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn-ghost{background:#fff}
/* 아직 누를 수 없는 단추(예: 인쇄 안내에 동의하기 전 「시안 받기」) */
.btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}

/* --- 본문 3단 레이아웃 --- */
.app-body{
  display:grid;
  grid-template-columns:212px 1fr 282px;
  height:calc(100% - 62px);
}

/* --- 좌측 도구 막대 --- */
.toolbar{
  border-right:1px solid var(--border);
  padding:16px 14px;
  display:flex;flex-direction:column;gap:8px;
  overflow-y:auto;
  background:#fff;
}
.tool-btn{
  display:flex;align-items:center;gap:10px;
  width:100%;text-align:left;
  font-family:inherit;font-size:14px;font-weight:600;color:var(--text-dim);
  padding:12px 13px;border-radius:11px;cursor:pointer;
  border:1px solid var(--border);background:#fff;
  transition:background .13s,border-color .13s,color .13s;
}
.tool-btn:hover{background:var(--accent-bg);border-color:var(--accent-line);color:var(--accent-ink)}
.tool-btn svg{width:19px;height:19px;flex-shrink:0}
.tool-divider{height:1px;background:var(--border);margin:8px 0}
.tool-label{font-size:11.5px;font-weight:700;color:var(--text-muted);margin-top:4px;letter-spacing:.01em}
.tool-select,.tool-color{
  width:100%;font-family:inherit;font-size:13.5px;
  padding:9px 10px;border:1px solid var(--border);border-radius:9px;background:#fff;color:var(--text);
  cursor:pointer;
}
.tool-color{height:40px;padding:4px}

/* --- 인쇄 사양 (판매하는 곳이 열어 둔 것만) --- */
.po-slot{border:1px solid var(--border);border-radius:9px;padding:9px 10px;margin-top:6px;background:#fff}
.po-kind{font-size:12.5px;font-weight:700;color:var(--text);margin-bottom:6px}
.po-row{display:flex;align-items:center;gap:7px;margin-top:5px}
.po-row > span{font-size:11.5px;color:var(--text-muted);width:30px;flex:0 0 30px}
.po-row select{flex:1;font-family:inherit;font-size:13px;padding:6px 8px;border:1px solid var(--border);
  border-radius:7px;background:#fff;color:var(--text);cursor:pointer;min-width:0}
.po-sides{display:flex;flex-wrap:wrap;gap:4px 10px;flex:1}
.po-sides label{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;cursor:pointer}

/* --- 중앙 캔버스 --- */
.canvas-wrap{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:24px;
  background:#ffffff;
  overflow:auto;
}
/* 눈금자 포함 캔버스 무대 — 코너 + 상단자 + 좌측자 + 캔버스 */
.canvas-stage{
  display:grid;
  grid-template-columns:26px auto;
  grid-template-rows:26px auto;
  border:1px solid var(--border-strong);
  border-radius:6px;
  overflow:hidden;
  background:#fff;
  line-height:0;
}
.ruler-corner{
  display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:700;color:var(--text-muted);
  background:var(--panel-2);
  border-right:1px solid var(--border);border-bottom:1px solid var(--border);
}
.ruler{background:var(--panel);display:block}
.ruler-top{border-bottom:1px solid var(--border)}
.ruler-left{border-right:1px solid var(--border)}
.canvas-holder{line-height:0;background:#fff}
.canvas-hint{font-size:12.5px;color:var(--text-muted);text-align:center;max-width:580px;background:rgba(255,255,255,.9);padding:7px 14px;border-radius:10px;border:1px solid var(--border)}
.canvas-size-badge{font-size:12.5px;font-weight:700;color:var(--accent-ink);background:var(--accent-bg);border:1px solid var(--accent-line);border-radius:20px;padding:5px 15px}
.mock-size-label{font-size:15px;font-weight:800;color:var(--accent);padding:2px 0 4px;letter-spacing:-.01em}
.canvas-hint b{color:var(--text-dim)}

/* --- 우측 속성 패널 --- */
.props{
  border-left:1px solid var(--border);
  padding:18px 16px;
  overflow-y:auto;
  background:#fff;
}
.props-empty{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  text-align:center;color:var(--text-muted);font-size:13px;padding:40px 10px;
}
.props-group{margin-bottom:22px}
.props-title{font-size:14px;font-weight:800;color:var(--text);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.field-label{display:block;font-size:11.5px;font-weight:700;color:var(--text-muted);margin:10px 0 5px}
.field-input{
  width:100%;font-family:inherit;font-size:13.5px;
  padding:9px 11px;border:1px solid var(--border);border-radius:9px;background:#fff;color:var(--text);
  resize:vertical;transition:border-color .13s;
}
.field-input:focus{outline:none;border-color:var(--accent)}
.field-range{width:100%;accent-color:var(--accent);cursor:pointer}
.field-color{width:100%;height:38px;padding:3px;border:1px solid var(--border);border-radius:9px;background:#fff;cursor:pointer}
.field-row{display:flex;gap:10px;flex-wrap:wrap}
.field-row>div{flex:1;min-width:0}
.btn-row{margin-top:10px}
.mini-btn{
  flex:1;min-width:64px;
  font-family:inherit;font-size:12.5px;font-weight:600;color:var(--text-dim);
  padding:8px 6px;border:1px solid var(--border);border-radius:9px;background:#fff;cursor:pointer;
  transition:background .13s,border-color .13s,color .13s;
}
.mini-btn:hover{background:var(--panel);border-color:var(--border-strong)}
.mini-btn.active{background:var(--accent-bg);border-color:var(--accent-line);color:var(--accent-ink)}
.mini-btn-danger{color:var(--danger);border-color:#fecaca}
.mini-btn-danger:hover{background:#fef2f2;border-color:#fca5a5}

/* --- 좁은 화면 --- */
@media (max-width:900px){
  body{overflow:auto}
  .app-body{grid-template-columns:1fr;height:auto}
  .toolbar{flex-direction:row;flex-wrap:wrap;border-right:none;border-bottom:1px solid var(--border)}
  .tool-btn{width:auto}
  .props{border-left:none;border-top:1px solid var(--border)}
}

/* --- 모달 --- */
.modal-back{position:fixed;inset:0;background:rgba(17,24,39,.5);backdrop-filter:none;display:flex;align-items:center;justify-content:center;z-index:100;padding:20px}
.modal{background:#fff;border-radius:var(--radius-lg);max-width:720px;width:100%;max-height:90vh;overflow:auto;padding:24px;border:1px solid var(--border)}
.modal h3{font-size:17px;font-weight:800;margin-bottom:6px;letter-spacing:-.01em}
.modal-hint{font-size:13px;color:var(--text-muted);margin-bottom:16px;line-height:1.6}
.mock-pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.mock-pick-card{border:1px solid var(--border);border-radius:12px;overflow:hidden;cursor:pointer;background:#fff;transition:border-color .13s,background .13s}
.mock-pick-card:hover{border-color:var(--accent);background:var(--accent-bg)}
.mock-pick-thumb{position:relative;height:120px;display:flex;align-items:center;justify-content:center;
  background:
    linear-gradient(45deg,#eef1f4 25%,transparent 25%,transparent 75%,#eef1f4 75%),
    linear-gradient(45deg,#eef1f4 25%,#f7f9fb 25%,#f7f9fb 75%,#eef1f4 75%);
  background-size:16px 16px;background-position:0 0,8px 8px}
.mock-pick-thumb img{max-width:100%;max-height:100%}
.mock-pick-name{padding:9px 10px;font-size:13px;font-weight:600;text-align:center;border-top:1px solid var(--border)}
.mock-pick-empty{color:var(--text-muted);font-size:14px;padding:30px 0;text-align:center;line-height:1.6}
.modal-btns{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;align-items:center;flex-wrap:wrap}
.header-link{font-size:12.5px;color:var(--text-muted);text-decoration:none;padding:6px 8px;border-radius:7px}
.header-link:hover{color:var(--accent);background:var(--accent-bg)}

/* ============================================
   진입 허브 화면 (home.html)
   ============================================ */
.hub-body{
  display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px;overflow:auto;
  background:linear-gradient(180deg,var(--accent-bg) 0%,#fff 220px);
}
.hub{max-width:760px;width:100%}
.hub-head{text-align:center;margin-bottom:34px}
.hub-eyebrow{display:inline-block;font-size:12px;font-weight:700;color:var(--accent-ink);background:var(--accent-bg);border:1px solid var(--accent-line);padding:4px 12px;border-radius:20px;margin-bottom:16px;letter-spacing:.01em}
.hub-title{display:inline-flex;align-items:center;gap:11px;font-size:27px;font-weight:800;color:var(--text);letter-spacing:-.02em}
.hub-head p{color:var(--text-muted);font-size:14.5px;margin-top:14px;line-height:1.7}
.hub-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.hub-card{display:block;border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px 24px;text-decoration:none;color:var(--text);background:#fff;transition:border-color .14s,background .14s,transform .14s}
.hub-card:hover{border-color:var(--accent);background:var(--accent-bg);transform:translateY(-2px)}
.hub-ico{width:44px;height:44px;color:#fff;background:var(--accent);border-radius:12px;padding:10px;margin-bottom:16px;display:block}
.hub-card-title{font-size:18px;font-weight:800;display:flex;align-items:center;gap:8px;letter-spacing:-.01em}
.hub-badge{font-size:11px;font-weight:700;padding:2px 9px;border-radius:20px;background:var(--accent-bg);color:var(--accent-ink);border:1px solid var(--accent-line)}
.hub-card p{color:var(--text-muted);font-size:13px;margin-top:11px;line-height:1.65}
.hub-foot{text-align:center;margin-top:30px;font-size:12.5px;color:var(--text-muted)}
@media (max-width:640px){.hub-cards{grid-template-columns:1fr}.hub-title{font-size:22px}}

/* ============================================
   편집기 화면(index.html)만 — 「김비서 노트」 결
   2026-08-16 사장님 지시 「에디터부분 유아이가 내가 준 링크 스타일이였음 좋겠어」
   본보기: https://bossnote.hnksoft.com/ko (벤치마킹 목록 BOSSNEOTE 칸에 캡처·실측 있음)

   ★ 이 블록은 body.ed 안에서만 듣는다.
     style.css 는 관리자·상품목록·시안·가입·약관까지 여덟 화면이 함께 쓰므로
     위쪽 :root 를 건드리면 시키지 않은 화면까지 같이 바뀐다.
   ★ 색은 짐작하지 않았다. 본보기를 브라우저로 열어 잰 값
     (파랑 #3b5ef5 · 옅은 바탕 #f5f7fb · 알약 단추 · 큰 제목 자간 -0.04em · 그림자 없음)에 맞추되,
     파랑만은 사장님이 2026-08-16에 정하신 우리 랜딩 색 #2b4bf2 를 그대로 쓴다.
     두 색은 사실상 같은 계열이고, 랜딩과 편집기가 서로 다른 파랑이면 따로 논다.
   ★ 그림자는 한 곳도 쓰지 않는다(사장님 디자인 규칙).
     깊이는 1픽셀 테두리로, 구역 구분은 옅은 바탕색으로만 낸다.
   ============================================ */
body.ed{
  /* 랜딩(home.html)과 같은 값 */
  --accent:#2b4bf2;
  --accent-hover:#2340d8;
  --accent-bg:#eef1fe;
  --accent-line:#c5cffb;
  --accent-ink:#1c34b8;
  --border:#e6e9f0;
  --border-strong:#d3d8e3;
  --panel:#f5f7fa;
  --panel-2:#eef1f6;
  --text:#14161a;
  --text-dim:#44474e;
  --text-muted:#8b8f97;
  --danger:#d0342c;
  --pill:999px;
  letter-spacing:-.01em;
}

/* --- 머리줄 --- */
body.ed .app-header{height:64px;padding:0 24px;background:#fff}
body.ed .brand{font-size:17px;font-weight:700;letter-spacing:-.025em;gap:10px}
body.ed #brandIcon{stroke:var(--accent)}
body.ed .brand-tag{color:var(--text-muted);font-weight:500}
body.ed .header-actions{gap:8px}

/* --- 단추: 본보기와 같은 알약 모양 --- */
body.ed .btn{
  font-size:14px;font-weight:600;
  padding:10px 18px;border-radius:var(--pill);
  border:1px solid var(--border);background:#fff;color:var(--text-dim);
  letter-spacing:-.01em;
}
body.ed .btn:hover{background:var(--panel);border-color:var(--border-strong);color:var(--text)}
body.ed .btn-accent{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
body.ed .btn-accent:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff}

/* --- 3단 짜임: 양옆은 옅은 바탕, 가운데 작업대는 흰색 --- */
body.ed .app-body{grid-template-columns:228px 1fr 296px;height:calc(100% - 64px)}
body.ed .toolbar,
body.ed .props{background:var(--panel);padding:18px 16px}
body.ed .canvas-wrap{background:#fff}
/* 왼쪽 칸은 세로로 쌓이는 flex 라, 상품이 얹혀 내용이 길어지면 아래쪽 칸이 눌린다.
   「여백 색」 칸이 42px 에서 20px 로 찌그러져 있었다(2026-08-16 실측). 눌리지 않게 못 박는다. */
body.ed .toolbar > *{flex:none}

/* --- 왼쪽 도구: 옅은 바탕 위 흰 카드 --- */
body.ed .tool-btn{
  font-size:14px;font-weight:600;
  padding:13px 14px;border-radius:14px;background:#fff;border:1px solid var(--border);
  letter-spacing:-.01em;
}
body.ed .tool-btn:hover{background:var(--accent-bg);border-color:var(--accent-line);color:var(--accent-ink)}
body.ed .tool-label{font-size:12px;font-weight:600;color:var(--text-muted);margin-top:6px;letter-spacing:0}
body.ed .tool-divider{background:var(--border);margin:10px 0}
body.ed .tool-select{border-radius:12px;padding:10px 12px;font-size:14px;background:#fff}
body.ed .tool-color{height:42px;border-radius:12px;background:#fff}
body.ed .po-slot,
body.ed #dieRuleWrap{border:1px solid var(--border);border-radius:14px;background:#fff;padding:12px 13px;margin-top:6px}
body.ed .po-row select{border-radius:10px;padding:7px 9px}

/* --- 입력칸 --- */
body.ed .field-input,
body.ed .ed-input{
  width:100%;font-family:inherit;font-size:14px;
  padding:10px 13px;border:1px solid var(--border);border-radius:12px;
  background:#fff;color:var(--text);line-height:1.5;
  transition:border-color .13s;
}
body.ed .ed-input{resize:vertical}
body.ed .field-input:focus,
body.ed .ed-input:focus{outline:none;border-color:var(--accent)}
body.ed .ed-num{
  font-family:inherit;font-size:13.5px;width:66px;
  padding:7px 9px;border:1px solid var(--border);border-radius:10px;background:#fff;color:var(--text);
}
body.ed .ed-num:focus{outline:none;border-color:var(--accent)}
/* 입력칸 밑 도움말 한 줄 */
body.ed .ed-hint{font-size:12px;color:var(--text-muted);line-height:1.6;margin-top:6px}
body.ed .ed-hint b{color:var(--text-dim);font-weight:600}
body.ed .field-label{font-size:12px;font-weight:600;color:var(--text-muted);margin:12px 0 6px;letter-spacing:0}
body.ed .field-color{height:40px;border-radius:12px}

/* --- 가운데 작업대 --- */
body.ed .canvas-stage{border-radius:12px;border-color:var(--border-strong)}
body.ed .ruler-corner{background:var(--panel-2);color:var(--text-muted)}
body.ed .canvas-hint{
  font-size:13px;color:var(--text-muted);line-height:1.7;
  background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:12px 18px;max-width:640px;
}
body.ed .canvas-size-badge{
  border-radius:var(--pill);padding:6px 16px;font-size:13px;font-weight:600;
  color:var(--accent-ink);background:var(--accent-bg);border:1px solid var(--accent-line);
}
body.ed .mock-size-label{font-size:15px;font-weight:700;color:var(--accent);letter-spacing:-.02em}
body.ed #noProduct{border-radius:20px;border:1px solid var(--border);background:var(--panel);padding:40px 28px}

/* --- 오른쪽 속성 --- */
body.ed .props-title{font-size:15px;font-weight:700;letter-spacing:-.025em;padding-bottom:10px}
body.ed .props-empty{font-size:13.5px;line-height:1.7}
/* 알약이 되며 폭이 늘어 「굵게·왼쪽·가운데·오른쪽」 넉 줄 중 하나가 아래로 밀렸다.
   오른쪽 칸 안쪽 폭이 264px 라 네 개가 들어가려면 한 개가 52px 를 넘으면 안 된다. */
body.ed .mini-btn{
  font-size:13px;font-weight:600;padding:9px 6px;border-radius:var(--pill);background:#fff;
  min-width:52px;
}
body.ed .mini-btn:hover{background:var(--panel-2);border-color:var(--border-strong)}
body.ed .mini-btn.active{background:var(--accent-bg);border-color:var(--accent-line);color:var(--accent-ink)}
body.ed .mini-btn-danger{color:var(--danger);border-color:#f3cdc9}
body.ed .mini-btn-danger:hover{background:#fdf3f2;border-color:#e8a9a3}
body.ed .field-range{accent-color:var(--accent)}

/* --- 창(모달) --- */
body.ed .modal{border-radius:24px;padding:28px}
body.ed .modal h3{font-size:19px;font-weight:700;letter-spacing:-.03em;margin-bottom:8px}
body.ed .modal-hint{font-size:13.5px;line-height:1.7}
body.ed .modal-back{background:rgba(20,22,26,.5)}
body.ed .mock-pick-card{border-radius:14px}
body.ed .mock-pick-card:hover{border-color:var(--accent);background:var(--accent-bg)}
/* 창 안의 묶음 상자 — 본보기의 옅은 회색 카드 */
body.ed .ed-box{border:1px solid var(--border);border-radius:16px;padding:14px 16px;background:var(--panel);margin-bottom:14px}
body.ed .ed-box-title{font-weight:600;font-size:14px;letter-spacing:-.02em;margin-bottom:8px}
body.ed .modal .btn{width:100%;justify-content:center}
body.ed .modal-btns .btn{width:auto}

/* --- 벡터 이미지로 변환 창 (2026-08-17) ---
   시험 도구(_audit/20260713_imgtrace)에 있던 화면을 편집기 톤(파랑·그림자 없음)으로 옮겼다. */
body.ed .vec-modal{max-width:1040px}
body.ed .vec-grid{display:grid;grid-template-columns:250px 1fr;gap:18px;align-items:start}
body.ed .vec-ctl{border:1px solid var(--border);border-radius:16px;padding:16px;background:var(--panel)}
body.ed .vec-fld{margin-bottom:13px}
body.ed .vec-fld label{display:flex;justify-content:space-between;font-size:12.5px;font-weight:600;color:var(--text-dim);margin-bottom:5px}
body.ed .vec-fld label b{color:var(--accent);font-weight:700}
body.ed .vec-ends{display:flex;justify-content:space-between;font-size:11px;color:var(--text-muted);margin-top:2px}
body.ed .vec-chk{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--text-dim);margin-top:10px;cursor:pointer}
body.ed .vec-chk input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
body.ed .vec-busy{font-size:12.5px;color:var(--accent);text-align:center;margin-top:9px}

body.ed .vec-view{display:grid;grid-template-columns:1fr 1fr;gap:12px}
body.ed .vec-card{border:1px solid var(--border);border-radius:16px;overflow:hidden;background:#fff}
body.ed .vec-cap{font-size:12px;font-weight:700;padding:9px 12px;border-bottom:1px solid var(--border);background:var(--panel);display:flex;justify-content:space-between;align-items:center;gap:6px}
body.ed .vec-stage{height:300px;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;padding:12px;
  background-image:linear-gradient(45deg,#eef0f4 25%,transparent 25%),linear-gradient(-45deg,#eef0f4 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eef0f4 75%),linear-gradient(-45deg,transparent 75%,#eef0f4 75%);
  background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0}
body.ed .vec-stage img,body.ed .vec-stage svg{max-width:100%;max-height:276px;display:block}
body.ed .vec-stage.pen{cursor:crosshair}
body.ed .vec-stage.eraser{cursor:cell}
body.ed .vec-stage.hand{cursor:grab}
body.ed .vec-stage.panning{cursor:grabbing}
body.ed .vec-empty{font-size:12.5px;color:var(--text-muted);text-align:center;line-height:1.6}

body.ed .vec-tools{display:flex;gap:5px;padding:8px 10px;border-bottom:1px solid var(--border);align-items:center;flex-wrap:wrap;background:#fff}
body.ed .vec-tool{display:inline-flex;align-items:center;gap:4px;padding:6px 9px;border:1px solid var(--border);background:#fff;border-radius:9px;font-size:11.5px;font-weight:600;color:var(--text-muted);cursor:pointer}
body.ed .vec-tool:hover{border-color:var(--accent-line);color:var(--accent-ink)}
body.ed .vec-tool.act{border-color:var(--accent-line);background:var(--accent-bg);color:var(--accent-ink)}
body.ed .vec-tool svg{width:13px;height:13px;flex:none}
body.ed .vec-sub{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-muted);margin-left:auto}
body.ed .vec-sub input[type=color]{width:24px;height:24px;border:1px solid var(--border);border-radius:6px;padding:0;background:none;cursor:pointer}
body.ed .vec-sub input[type=range]{width:78px;accent-color:var(--accent)}
body.ed .vec-tip{font-size:11.5px;color:var(--text-muted);padding:7px 12px;border-bottom:1px solid var(--border);background:var(--panel);line-height:1.55}

body.ed .vec-zoom{display:inline-flex;align-items:center;gap:2px}
body.ed .vec-zoom button{width:25px;height:23px;border:1px solid var(--border);background:#fff;border-radius:7px;font-size:14px;font-weight:700;line-height:1;color:var(--text-dim);cursor:pointer}
body.ed .vec-zoom button:hover{border-color:var(--accent-line);color:var(--accent-ink)}
body.ed .vec-zoom button.fit{width:auto;padding:0 8px;font-size:11px}
body.ed .vec-zval{font-size:11px;color:var(--text-muted);min-width:40px;text-align:center}

body.ed .vec-colors{border:1px solid var(--border);border-radius:16px;padding:14px 16px;background:var(--panel);margin-top:12px}
body.ed .vec-colors-title{font-size:12.5px;font-weight:600;color:var(--text-dim);margin-bottom:9px}
body.ed .vec-swatches{display:flex;flex-wrap:wrap;gap:8px}
body.ed .vec-sw{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:10px;padding:5px 9px;font-size:11.5px;color:var(--text-muted);background:#fff}
body.ed .vec-sw input[type=color]{width:24px;height:24px;border:1px solid var(--border);border-radius:6px;padding:0;background:none;cursor:pointer}
body.ed .vec-note{font-size:12px;color:var(--text-muted);margin-right:auto;line-height:1.5}

/* --- 좁은 화면(휴대폰·태블릿) — 2026-08-17 다시 만듦 ---
   ★고치기 전 실측(아이폰 폭 390px): 머리줄이 62px 한 줄에 묶여 있어
     「판촉물 시안 편집기」와 단추 넷이 들어갈 자리가 없자 **글자가 세로로 짓눌려 잘렸다.**
     또 왼쪽 도구 칸을 가로(row wrap)로 눕혀 두어 「우리 회사 이름」 입력칸과
     「여백 색」 라벨이 서로 다른 줄로 흩어지고, 그 칸이 제 스크롤 막대를 따로 가져
     화면에 막대가 둘씩 생겼다.
   ★그래서 좁은 화면에서는 **가로로 욱여넣지 않고 위에서 아래로 흐르게** 한다. */
@media (max-width:900px){
  html,body{height:auto}
  body.ed{overflow-x:hidden;overflow-y:auto}

  /* 머리줄 — 두 줄로 편다(첫 줄 이름, 둘째 줄 단추 넷) */
  body.ed .app-header{height:auto;padding:10px 12px 12px;flex-wrap:wrap;gap:9px}
  body.ed .brand{flex:1 1 100%;font-size:15.5px;gap:8px}
  body.ed .brand-logo{max-height:28px;max-width:120px}
  body.ed .brand-tag{display:none}
  body.ed .header-actions{flex:1 1 100%;gap:6px}
  /* 넷이 폭을 똑같이 나눠 갖고, 글자는 한 줄로 붙어 있게 한다 */
  body.ed .header-actions .btn{
    flex:1 1 0;min-width:0;justify-content:center;
    padding:10px 4px;font-size:13px;white-space:nowrap;
  }
  body.ed .header-actions .btn svg{display:none}   /* 아이콘 자리를 빼야 글자가 안 눌린다 */

  /* 본문 — 3단(도구·작업대·속성)을 위에서 아래 차례로.
     ★차례를 바꾼다: 넓은 화면은 왼쪽부터 「도구 → 작업대 → 속성」이지만,
       좁은 화면에서 그대로 쌓으면 **편집할 제품 사진이 화면 1,034px 아래**에 놓여
       입력칸을 한참 지나야 나온다(2026-08-17 실측). 휴대폰에서는 열자마자
       작업대가 보여야 하므로 「작업대 → 도구 → 속성」으로 세운다. */
  body.ed .app-body{display:flex;flex-direction:column;height:auto}
  body.ed .canvas-wrap{order:1}
  body.ed .toolbar{order:2}
  body.ed .props{order:3}
  body.ed .toolbar,
  body.ed .props{
    flex-direction:column;flex-wrap:nowrap;
    height:auto;max-height:none;overflow:visible;
    padding:14px 14px 18px;
  }
  body.ed .toolbar{border:none;border-bottom:1px solid var(--border)}

  /* 속성 칸 — 로고·문구를 고르는 동안만 화면 아래에서 올라온다.
     ★그냥 아래에 쌓아 두면 화면 **1,725px 아래**에 놓여, 글자 크기·색을 바꾸려면
       한참 내려갔다 다시 올라와야 한다(390px 실측, 2026-08-17). 그래서 붙여 띄운다.
     ★고른 것이 없으면 내려가 있어 작업대를 가리지 않는다. */
  body.ed .props{
    position:fixed;left:0;right:0;bottom:0;z-index:40;
    max-height:48vh;overflow-y:auto;
    background:#fff;border:none;border-top:1px solid var(--border-strong);
    padding:14px 14px 22px;
    transform:translateY(101%);transition:transform .16s ease-out;
  }
  body.ed.picked .props{transform:translateY(0)}
  body.ed .props-empty{display:none}   /* 판이 올라온 때는 늘 고른 것이 있다 */
  body.ed .tool-btn{width:100%}
  body.ed .canvas-wrap{padding:14px 12px 20px;height:auto;overflow:visible}
  body.ed .canvas-stage{max-width:100%}
  body.ed .canvas-hint{font-size:12.5px;padding:11px 14px;line-height:1.65}
  body.ed #noProduct{padding:30px 20px}

  /* 창(모달)도 좁은 화면에 맞춘다 */
  body.ed .modal-back{padding:12px}
  body.ed .modal{padding:20px;border-radius:18px;max-height:88vh}
  body.ed .mock-pick-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}

  /* 벡터 변환 창 — 좁은 화면에서는 조절판과 그림을 위아래로 세운다 */
  body.ed .vec-grid{grid-template-columns:1fr;gap:12px}
  body.ed .vec-view{grid-template-columns:1fr}
  body.ed .vec-stage{height:210px}
  body.ed .vec-stage img,body.ed .vec-stage svg{max-height:186px}
  body.ed .vec-tools{gap:4px;padding:7px 8px}
  body.ed .vec-sub{margin-left:0;width:100%}
}