/* 필체 작업실·고객 주문 화면 공통 */
:root{--paper:#f6f6f1;--card:#fff;--line:#dadbd4;--ink:#1e2b4a;--ink-soft:#3d5a8c;--graphite:#5b6068;--warn:#b42318;--ok:#1d6b3a;--synth:#b0601f;--tint:#eef2f8;
  --f-sans:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;--f-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.6 var(--f-sans)}
header{padding:20px 16px 8px;max-width:1180px;margin:0 auto}
header h1{margin:0;font-size:22px}
header p{margin:4px 0 0;color:var(--graphite);font-size:13.5px}
main{max-width:1180px;margin:0 auto;padding:0 16px 60px;display:grid;gap:16px}
section{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px}
h2{margin:0 0 4px;font-size:17px}
h2 .n{font-family:var(--f-mono);font-size:12px;color:var(--ink-soft);margin-right:8px}
h3{margin:0;font-size:15px}
.muted{color:var(--graphite);font-size:13.5px;margin:0 0 12px}
label{display:block;font-size:13px;font-weight:600;margin-bottom:4px}
textarea,input[type=text],input[type=number],input[type=email],input[type=tel],input[type=date],select{width:100%;font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
textarea{min-height:96px;resize:vertical}
#msg{min-height:132px}
.btn{font:600 14px/1 var(--f-sans);padding:10px 14px;border-radius:8px;border:1px solid var(--ink);background:#fff;color:var(--ink);cursor:pointer;min-height:40px;display:inline-flex;align-items:center;gap:6px}
.btn.primary{background:var(--ink);color:#fff}
.btn.small{padding:6px 10px;min-height:32px;font-size:13px}
.btn.ghost{border-color:var(--line)}
.btn.danger{border-color:#f0c4c0;color:var(--warn)}
.btn:disabled{opacity:.45;cursor:default}
.bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.grow{flex:1}
.stat{font-family:var(--f-mono);font-size:12.5px;color:var(--graphite)}
.warn{color:var(--warn)} .ok{color:var(--ok)}

/* 공통 문구 + 오른쪽 A6 미리보기 */
/* 문구와 미리보기를 반반으로 늘 같이 보여요. 입력 칸은 카드 높이만큼 늘어나요 */
.msgrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
.msgrow>div{display:flex;flex-direction:column}
.msgrow #msg{flex:1}
@media (max-width:760px){.msgrow{grid-template-columns:1fr}}
.mini{margin:0}
.mini-tools{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:7px;overflow:hidden;background:#fff}
.seg button{border:0;background:none;padding:4px 6px;cursor:pointer;color:var(--graphite);display:flex}
.seg button+button{border-left:1px solid var(--line)}
.seg button[aria-pressed="true"]{background:var(--ink);color:#fff}
.seg svg,.zoomb svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.zoomb{display:inline-flex;align-items:center;gap:4px;font:500 12.5px var(--f-sans);border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:7px;padding:4px 8px;cursor:pointer}
.zoomb:hover,.seg button:hover:not([aria-pressed="true"]){background:var(--tint)}
.mini-card{background:#e9e7e0;border-radius:8px;padding:10px;cursor:zoom-in}
.mini-card svg{display:block;width:100%;height:auto;box-shadow:0 1px 6px rgba(0,0,0,.12)}
.mini figcaption{margin-top:6px;text-align:center}
dialog.zoom{max-width:min(1000px,calc(100% - 32px))}
.zoom-card{background:#e9e7e0;border-radius:10px;padding:20px}
.zoom-card svg{display:block;width:100%;height:auto;max-height:72vh;box-shadow:0 2px 10px rgba(0,0,0,.14)}
.paste-hint{margin:6px 0 0;font-size:13px;color:var(--graphite);background:#f7f8fa;border:1px solid #e6e8ee;border-radius:8px;padding:8px 10px}
.paste-hint b{color:var(--ink)}
.paste-hint.ready{background:#eef6f0;border-color:#cfe5d6}
.paste-hint .linkb{border:0;background:none;padding:0;font:inherit;color:var(--ink-soft);text-decoration:underline;cursor:pointer}

/* 받는 분: 이름만 촘촘하게. 많아지면 이 안에서 스크롤 */
.rcpts{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px;margin-top:10px;max-height:330px;overflow:auto;padding:2px}
.rc{display:flex;align-items:center;gap:4px;padding:3px 4px 3px 8px;border:1px solid var(--line);border-radius:8px;background:#fff}
.rc.cur{border-color:var(--ink-soft);box-shadow:0 0 0 2px rgba(61,90,140,.15)}
.rc .no{font-family:var(--f-mono);font-size:11.5px;color:var(--graphite);min-width:24px;cursor:pointer;text-align:right}
.rc .nm{border:0;padding:6px;font-weight:600;min-width:0;flex:1;border-radius:6px}
.rc .nm:focus{outline:2px solid var(--ink-soft);outline-offset:-1px}
.rc .ownb{font:500 12px var(--f-sans);border:1px solid var(--line);background:#fff;color:var(--graphite);border-radius:999px;padding:3px 8px;cursor:pointer;white-space:nowrap}
.rc .ownb.on{background:var(--tint);border-color:var(--ink-soft);color:var(--ink)}
.rc .ownb.over{border-color:var(--warn);color:var(--warn)}
.rc .x{border:0;background:none;color:var(--graphite);font-size:17px;line-height:1;cursor:pointer;padding:4px 6px;border-radius:6px}
.rc .x:hover{color:var(--warn);background:#fdf0ef}
.toggle{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;margin:0;cursor:pointer}
dialog{border:1px solid var(--line);border-radius:12px;padding:18px;max-width:560px;width:calc(100% - 32px)}
dialog::backdrop{background:rgba(20,25,40,.4)}

/* 필체 고르기 */
.choice{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 16px}
@media (max-width:620px){.choice{grid-template-columns:1fr}}
.opt{display:block;border:1.5px solid var(--line);border-radius:10px;padding:14px;cursor:pointer;margin:0;font-weight:400}
.opt:has(input:checked){border-color:var(--ink);background:var(--tint)}
.opt input{margin-right:6px}
.opt b{font-size:15px}
.opt p{margin:4px 0 0 22px;font-size:13px;color:var(--graphite)}
.styles{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.style{border:1.5px solid var(--line);border-radius:10px;padding:10px;cursor:pointer;background:#fff;text-align:left;font:inherit;color:inherit}
.style[aria-pressed="true"]{border-color:var(--ink);background:var(--tint)}
.style .sample{height:56px;display:flex;align-items:center;justify-content:center;background:#fffdf8;border-radius:6px;margin-bottom:6px}
.style .sample svg{width:100%;height:100%}
.style small{color:var(--graphite)}
.hands{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.hand{border:1.5px solid var(--line);border-radius:10px;padding:12px;display:grid;gap:6px}
.hand.on{border-color:var(--ink);background:var(--tint)}
.hand .bar{margin-top:2px}
.secure{border:1px solid #cfd8e6;background:#f3f6fb;border-radius:10px;padding:12px 14px;font-size:13px;margin:14px 0}
.secure strong{display:block;margin-bottom:4px;font-size:13.5px}
.secure ul{margin:0;padding-left:18px}
.secure li{margin:2px 0}
.letters{display:grid;gap:14px;margin-top:12px}
.lt{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:14px;border:1px solid var(--line);border-radius:10px;padding:12px}
@media (max-width:820px){.lt{grid-template-columns:1fr}}
.lt canvas{width:100%;display:block;border-radius:6px;background:#eee}
.lt textarea{min-height:240px;font-size:14px;line-height:1.7}
.lines{font-family:var(--f-mono);font-size:12px;max-height:120px;overflow:auto;margin-top:6px}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:6px;margin-top:10px;max-height:300px;overflow:auto}
.gl{border:1px solid var(--line);border-radius:6px;background:#fffdf8;text-align:center;font-size:11px;color:var(--graphite);cursor:pointer;padding:2px;font-family:inherit}
.gl:hover{border-color:var(--warn)}
.gl svg{display:block;margin:0 auto;width:100%;height:auto}
.empty{grid-column:1/-1;color:var(--graphite);font-size:13.5px;padding:14px;border:1px dashed var(--line);border-radius:10px;text-align:center}

/* 미리보기 */
.compose{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:18px}
@media (max-width:820px){.compose{grid-template-columns:1fr}}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.preview{background:#e9e7e0;border-radius:10px;padding:16px;display:flex;align-items:center;justify-content:center;min-height:300px}
.preview svg{width:100%;height:auto;max-height:70vh;box-shadow:0 2px 10px rgba(0,0,0,.12)}
.legend{display:flex;flex-wrap:wrap;gap:12px;font-size:12.5px;color:var(--graphite);margin-top:8px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:-1px}
.chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.chip{font-size:13px;padding:2px 8px;border-radius:999px;background:#fde8e8;color:var(--warn)}
.cover{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;font-size:13px;margin-top:14px}
.cover dd{margin:0;font-family:var(--f-mono)}

/* 고객 주문 화면·작업실 주문 목록 */
[hidden]{display:none!important}
.mini-card img,.zoom-card img{display:block;width:100%;height:auto;box-shadow:0 1px 6px rgba(0,0,0,.12)}
.zoom-card img{max-height:72vh;object-fit:contain}
fieldset.edit{border:0;padding:0;margin:0;min-width:0;display:grid;gap:16px}
.banner{border:1px solid #cfd8e6;background:#f3f6fb;border-radius:12px;padding:14px 16px;font-size:14px}
.banner b{display:block;font-size:15px;margin-bottom:2px}
.banner.ok{border-color:#cfe5d6;background:#eef6f0}
.banner.warn{border-color:#f0c4c0;background:#fdf0ef}
.tag{display:inline-block;font-size:12px;border:1px solid var(--line);border-radius:999px;padding:1px 9px;color:var(--graphite);white-space:nowrap}
.tag.draft{border-color:var(--ink-soft);color:var(--ink-soft)}
.tag.waiting{border-color:#d9a441;color:#8a5a00;background:#fff7e6}
.tag.submitted{border-color:var(--ink);color:#fff;background:var(--ink)}
.tag.done{border-color:#cfe5d6;color:var(--ok);background:#eef6f0}
.busy{opacity:.55;transition:opacity .2s}
.phb{font:500 12.5px var(--f-sans);border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:7px;padding:3px 8px;cursor:pointer;margin-left:6px}