/* ============================================================
   무료 A4 안내문 만들기 — Studio UI
   프리미엄 디자인툴 룩: 그라디언트 브랜드, 필 탭, 도트그리드 작업영역,
   플로팅 줌 컨트롤, 글래스 속성바, 썸네일 호버 인터랙션
   ============================================================ */
:root{
  --bg:#eef0f6;--surface:#ffffff;--line:#e4e7ef;--ink:#191b22;--ink-soft:#5d6373;
  --primary:#4f56e3;--primary-2:#8b5cf6;--primary-soft:#edeeff;
  --accent:#ff5a3c;--accent-2:#ff3d77;
  --radius:14px;
  --grad:linear-gradient(135deg,var(--primary),var(--primary-2));
  --grad-accent:linear-gradient(135deg,var(--accent),var(--accent-2));
  --shadow-1:0 1px 2px rgba(18,20,30,.05),0 4px 14px rgba(18,20,30,.06);
  --shadow-2:0 2px 6px rgba(18,20,30,.07),0 14px 38px rgba(18,20,30,.12);
  --font:"Pretendard","Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{font-family:var(--font);color:var(--ink);background:var(--bg);display:flex;flex-direction:column;overflow:hidden}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;transition:background .15s,color .15s,border-color .15s,box-shadow .15s,transform .12s,filter .15s}
button:active{transform:scale(.97)}

/* ---------------- header ---------------- */
header{height:60px;flex:0 0 60px;background:rgba(255,255,255,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:0 18px;z-index:30}
.logo{width:34px;height:34px;border-radius:10px;background:var(--grad);color:#fff;font-size:13px;font-weight:900;letter-spacing:-.02em;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(79,86,227,.35);flex:0 0 auto}
.brand{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.brand b{font-size:15px;font-weight:800;letter-spacing:-.01em}
.brand span{font-size:11px;color:var(--ink-soft);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.head-tools{margin-left:auto;display:flex;align-items:center;gap:8px}

.seg{display:flex;background:#e9ebf3;border-radius:11px;padding:3px;gap:2px}
.seg button{font-size:12.5px;font-weight:700;color:var(--ink-soft);padding:7px 13px;border-radius:9px;display:flex;align-items:center;gap:6px}
.seg button.on{background:var(--surface);color:var(--primary);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.seg i{display:block;border:1.8px solid currentColor;border-radius:2.5px;opacity:.85}
.seg .ori-p{width:9px;height:12px}
.seg .ori-l{width:12px;height:9px}

.btn{font-size:13px;font-weight:700;padding:9px 14px;border-radius:11px;border:1px solid var(--line);background:var(--surface);color:var(--ink);display:inline-flex;align-items:center;gap:7px}
.btn:hover{border-color:#cdd2e0;box-shadow:var(--shadow-1)}
.btn.ghost{border-color:transparent;color:var(--ink-soft);background:transparent}
.btn.ghost:hover{background:#e9ebf3;box-shadow:none;color:var(--ink)}
.btn.save{background:var(--grad-accent);color:#fff;border-color:transparent;box-shadow:0 4px 16px rgba(255,77,90,.4)}
.btn.save:hover{filter:brightness(1.06);box-shadow:0 6px 20px rgba(255,77,90,.5)}

/* ---------------- layout ---------------- */
.main{flex:1;display:flex;min-height:0}
.sidebar{width:284px;flex:0 0 284px;background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}

/* pill tabs */
.tabs{display:flex;flex:0 0 auto;margin:12px 14px 0;background:#e9ebf3;border-radius:12px;padding:3px;gap:2px}
.tabs button{flex:1;font-size:13px;font-weight:700;color:var(--ink-soft);padding:9px 0;border-radius:10px;position:relative}
.tabs button.on{background:var(--surface);color:var(--primary);box-shadow:0 1px 3px rgba(0,0,0,.1)}

.panel{flex:1;overflow-y:auto;padding:14px 16px 18px}
.panel.hide{display:none}
.panel::-webkit-scrollbar{width:8px}
.panel::-webkit-scrollbar-thumb{background:#d6dae6;border-radius:4px}
.panel::-webkit-scrollbar-thumb:hover{background:#c3c9d9}

.group-label{font-size:11px;font-weight:800;color:var(--ink-soft);letter-spacing:.05em;margin:6px 2px 10px;display:flex;align-items:center;gap:7px}
.group-label::before{content:"";width:7px;height:7px;border-radius:3px;background:var(--grad);flex:0 0 auto}
.group-label:not(:first-child){margin-top:8px}

/* search */
.tpl-search{position:sticky;top:-14px;z-index:5;background:var(--surface);padding:4px 0 12px;margin:-6px 0 4px}
.tpl-search input{width:100%;font-family:inherit;font-size:13px;color:var(--ink);border:1.5px solid var(--line);border-radius:11px;padding:10px 13px 10px 34px;background:#f7f8fb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239aa0b4' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.6' y2='16.6'/%3E%3C/svg%3E") 12px center no-repeat;outline:none;transition:border-color .15s,box-shadow .15s,background-color .15s}
.tpl-search input:focus{border-color:var(--primary);background-color:#fff;box-shadow:0 0 0 3.5px var(--primary-soft)}

/* template cards */
.tpl-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.tpl{border:1px solid var(--line);border-radius:13px;overflow:hidden;background:#fbfbfd;text-align:left;transition:border-color .15s,transform .15s,box-shadow .15s;padding:0;position:relative}
.tpl:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow-2)}
.tpl::after{content:"클릭해서 적용";position:absolute;left:0;right:0;top:0;bottom:33px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(79,86,227,.78),rgba(139,92,246,.78));color:#fff;font-size:12px;font-weight:800;letter-spacing:.02em;opacity:0;transition:opacity .15s;pointer-events:none}
.tpl:hover::after{opacity:1}
.tpl .thumb{height:110px;display:block;width:100%;object-fit:cover;object-position:top;background:#fff}
.tpl .thumb.skeleton{background:linear-gradient(100deg,#f1f2f6 30%,#e7e9f0 50%,#f1f2f6 70%);background-size:200% 100%;animation:shimmer 1.1s infinite}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
.tpl .name{font-size:12px;font-weight:700;padding:8px 10px;border-top:1px solid var(--line);background:var(--surface);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* materials */
.add-row{display:flex;flex-direction:column;gap:8px}
.add-row .btn{width:100%;justify-content:center;display:flex;align-items:center;gap:7px;padding:12px;border-radius:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{width:46px;height:46px;border:1px solid var(--line);border-radius:12px;background:#f7f8fb;font-size:22px;display:flex;align-items:center;justify-content:center}
.chip:hover{border-color:var(--primary);background:var(--primary-soft);transform:translateY(-1px);box-shadow:var(--shadow-1)}
.chip.shape i{display:block}

.note{font-size:12px;color:var(--ink-soft);line-height:1.6;border:1px solid var(--line);border-radius:12px;padding:12px;background:#f7f8fb}
.note code{background:var(--primary-soft);color:var(--primary);padding:2px 6px;border-radius:5px;font-size:11px}

/* ads */
.ad{border:1px dashed #c9cedb;border-radius:12px;background:repeating-linear-gradient(45deg,#f6f7fa,#f6f7fa 10px,#f0f1f6 10px,#f0f1f6 20px);color:#9aa0b4;font-size:11px;font-weight:600;text-align:center;display:flex;align-items:center;justify-content:center;line-height:1.6}
.ad b{font-weight:800;color:#8a90a4}
/* 사이드바 패널 내 광고: 분류(그룹)가 끝나는 지점마다 — PC 300x250 */
.ad-rect{width:100%;max-width:300px;height:250px;margin:14px auto 20px}
/* 캔버스 하단: PC 728x90 리더보드, 모바일 320x100 배너 */
.ad-strip{flex:0 0 auto;display:flex;justify-content:center;padding:6px 16px 10px}
.ad-banner{width:728px;max-width:100%;height:90px}
.ad-mo{display:none}

/* 사이드바 하단 사이트 정보 링크 */
.foot-links{flex:0 0 auto;display:flex;justify-content:center;align-items:center;gap:7px;padding:9px 12px;border-top:1px solid var(--line);font-size:11px;background:var(--surface)}
.foot-links a{color:var(--ink-soft);text-decoration:none;font-weight:600}
.foot-links a:hover{color:var(--primary)}
.foot-links span{color:#c3c8d6}

/* ---------------- workspace ---------------- */
.workspace{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg)}
.canvas-wrap{flex:1;display:flex;align-items:center;justify-content:center;overflow:auto;padding:30px;position:relative;background-image:radial-gradient(circle,#cdd2e0 1px,transparent 1.2px);background-size:24px 24px}
.sizer{position:relative}
.stage{position:absolute;top:0;left:0;transform-origin:top left;background:#fff;box-shadow:0 1px 3px rgba(18,20,30,.12),0 18px 50px rgba(18,20,30,.18);overflow:hidden}

/* 플로팅 페이지 배지 & 줌 컨트롤 */
.page-badge{position:absolute;left:16px;top:14px;z-index:21;background:rgba(255,255,255,.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:11.5px;font-weight:700;color:var(--ink-soft);box-shadow:var(--shadow-1);pointer-events:none}
.zoombar{position:absolute;right:16px;bottom:14px;z-index:21;display:flex;align-items:center;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-1);overflow:hidden}
.zoombar button{font-size:14px;font-weight:800;color:var(--ink-soft);padding:8px 11px}
.zoombar button:hover{background:#eef0f6;color:var(--ink)}
.zoombar #zoomPct{font-size:11.5px;min-width:52px;text-align:center;border-left:1px solid var(--line);border-right:1px solid var(--line);color:var(--ink)}

/* elements on stage */
.el{position:absolute;cursor:grab;user-select:none}
.el.sel{outline:2px solid var(--primary);outline-offset:1px}
.el.dragging{cursor:grabbing}
.el-text{white-space:pre-wrap;word-break:break-word;line-height:1.3;padding:2px}
.el-sticker{line-height:1;white-space:nowrap}
.el-img img{display:block;width:100%;height:100%;pointer-events:none}
.el-shape{width:100%;height:100%}
.el-qr{overflow:hidden}
.el-qr canvas{display:block;width:100%;height:100%}
.handle{position:absolute;right:-7px;bottom:-7px;width:15px;height:15px;background:#fff;border:2px solid var(--primary);border-radius:50%;cursor:nwse-resize;box-shadow:0 1px 4px rgba(0,0,0,.2)}

/* 텍스트 변경 다이얼로그(텍스트 더블클릭) */
.dlg-back{position:fixed;inset:0;background:rgba(18,20,30,.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);z-index:100;display:flex;align-items:center;justify-content:center;animation:fade .15s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.dlg{background:#fff;border-radius:18px;padding:20px;width:min(440px,90vw);box-shadow:0 18px 60px rgba(0,0,0,.35);animation:pop .18s ease}
@keyframes pop{from{transform:translateY(10px) scale(.98);opacity:.6}to{transform:none;opacity:1}}
.dlg h3{margin:0 0 12px;font-size:15px;font-weight:800}
.dlg textarea{width:100%;min-height:104px;font-family:inherit;font-size:14px;line-height:1.5;border:1.5px solid var(--line);border-radius:12px;padding:11px 13px;resize:vertical;box-sizing:border-box;outline:none;transition:border-color .15s,box-shadow .15s}
.dlg textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3.5px var(--primary-soft)}
.dlg .row{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}

/* ---------------- property bar (floating glass) ---------------- */
.propbar{flex:0 0 auto;min-height:58px;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:16px;display:flex;align-items:center;gap:14px;padding:10px 16px;overflow-x:auto;z-index:20;margin:0 14px 12px;box-shadow:var(--shadow-2)}
.propbar::-webkit-scrollbar{height:6px}
.propbar::-webkit-scrollbar-thumb{background:#d6dae6;border-radius:3px}
.prop-tag{font-size:12px;font-weight:800;color:#fff;background:var(--grad);padding:6px 11px;border-radius:9px;flex:0 0 auto;box-shadow:0 2px 8px rgba(79,86,227,.3)}
.prop-empty{font-size:13px;color:var(--ink-soft)}
.ctl{display:flex;align-items:center;gap:7px;flex:0 0 auto;font-size:12px;color:var(--ink-soft);font-weight:600}
.ctl input[type="text"]{font-family:inherit;font-size:13px;border:1.5px solid var(--line);border-radius:9px;padding:7px 10px;width:170px;color:var(--ink);outline:none;transition:border-color .15s,box-shadow .15s}
.ctl input[type="text"]:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.ctl input[type="range"]{width:96px;accent-color:var(--primary)}
.ctl input[type="color"]{width:30px;height:30px;border:1px solid var(--line);border-radius:9px;padding:2px;background:#fff;cursor:pointer}
.mini{border:1px solid var(--line);border-radius:9px;background:#fff;padding:7px 11px;font-size:12px;font-weight:700;color:var(--ink-soft)}
.mini:hover{border-color:#cdd2e0;color:var(--ink)}
.mini.on{background:var(--primary);color:#fff;border-color:var(--primary)}
.mini.danger{color:#e23b2e;border-color:#f3c7c2}
.mini.danger:hover{background:#fdeeed}
.alignset{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.alignset button{padding:7px 11px;font-size:12px;font-weight:700;color:var(--ink-soft)}
.alignset button.on{background:var(--primary);color:#fff}

/* ---------------- mobile ---------------- */
.mtab{display:none}
@media (max-width:880px){
  header{padding:0 10px;gap:8px}.brand span{display:none}.head-tools .btn.ghost{display:none}
  .brand b{font-size:13.5px}
  .seg button{padding:7px 9px}
  .btn.save{padding:9px 11px}
  .main{flex-direction:column}
  .sidebar{position:fixed;left:0;right:0;bottom:52px;top:auto;width:auto;flex:none;max-height:62vh;border-right:none;border-top:1px solid var(--line);border-radius:20px 20px 0 0;transform:translateY(110%);transition:transform .22s ease;z-index:40;box-shadow:0 -10px 36px rgba(0,0,0,.16)}
  .sidebar.open{transform:translateY(0)}
  .workspace{flex:1}.canvas-wrap{padding:14px}
  .propbar{margin:0 8px 60px;padding-bottom:10px}
  .page-badge{left:10px;top:10px}
  .zoombar{right:10px;bottom:10px}
  .ad-banner{width:320px;height:100px}
  .ad-rect{max-width:320px;height:100px}
  .ad-pc{display:none}.ad-mo{display:inline}
  .mtab{display:flex;position:fixed;left:0;right:0;bottom:0;height:52px;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);z-index:50}
  .mtab button{flex:1;font-size:12px;font-weight:700;color:var(--ink-soft);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
  .mtab button.on{color:var(--primary)}.mtab button span{font-size:17px}
}
@media (max-width:520px){
  .brand{display:none}
}

/* ---------------- print ---------------- */
@media print{
  header,.sidebar,.propbar,.mtab,.ad-strip,.zoombar,.page-badge{display:none!important}
  .workspace,.canvas-wrap{padding:0;overflow:visible;background:none}
  .stage{box-shadow:none;transform:none!important}
  .sizer{width:auto!important;height:auto!important}
  .handle{display:none}.el.sel{outline:none!important}
}