/* 전자서명 이미지 만들기 — '서명 책상' (2026-10-23). 방법 줄 → 넓은 서명 패드 → [조절 | 문서 위 실제 크기] → 저장 줄 → 글꼴 갤러리(이름으로만).
   작업면 620px 이상이면 조절·문서 두 칸(문서 미리보기가 조절 칸 높이만큼 늘어 빈 곳이 없게), 미만은 DOM 순서대로 한 열. */
.sg-work{padding:0;--sg-gap:18px;--ck1:#ffffff;--ck2:#efedea;container:sgw/inline-size}
.sg-in{display:grid;grid-template-columns:minmax(0,1fr)}
.sg-in > *{min-width:0}
.sg-modes,.sg-stage,.sg-ctl,.sg-doc,.sg-out,.sg-gal{padding:var(--sg-gap)}
.sg-stage,.sg-ctl,.sg-doc,.sg-out,.sg-gal{border-top:1px solid var(--soft)}
.sg-work [hidden]{display:none !important}
.sg-grp{display:grid;gap:6px;min-width:0}
.sg-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sg-work .v2-input input[type="text"]{text-align:left;font-size:16px}
.sg-work .v2-f > label em{font-family:var(--mono);font-size:11px;color:var(--muted)}
.sg-work .v2-hint{margin:0;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}

/* 방법 줄 */
.sg-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.sg-modes button{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:9px;align-items:center;min-height:54px;padding:8px 11px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);text-align:left;color:var(--ink);cursor:pointer;transition:background var(--ease),border-color var(--ease)}
.sg-modes button .i{grid-row:1 / 3;width:24px;height:24px;color:var(--muted)}
.sg-modes button b{font-family:var(--sans);font-size:13.5px;font-weight:700;line-height:1.25}
.sg-modes button small{font-family:var(--sans);font-size:11px;line-height:1.3;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sg-work:lang(ko) .sg-modes button b,.sg-work:lang(ko) .sg-modes button small{word-break:keep-all}
.sg-modes button:hover{background:var(--btn)}
.sg-modes button[aria-pressed="true"]{border-color:var(--fill);background:var(--fill);color:var(--on-fill)}
.sg-modes button[aria-pressed="true"] .i,.sg-modes button[aria-pressed="true"] small{color:var(--on-fill)}
.sg-modes button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* 패드 */
.sg-stage{display:grid;gap:10px}
.sg-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;min-height:42px}
.sg-bar-l{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0;flex:1 1 auto}
.sg-acts{display:flex;flex-wrap:wrap;gap:6px}
.sg-act .i{width:15px;height:15px}
.sg-act[aria-pressed="true"]{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
.sg-fnav{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:stretch;gap:6px;flex:1 1 300px;max-width:440px;min-width:0}
.sg-fbtn{height:42px;padding:0 11px}
.sg-fname{display:grid;align-content:center;min-height:42px;min-width:0;padding:2px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);text-decoration:none;color:var(--ink)}
.sg-fname b{font-family:var(--sans);font-size:14px;font-weight:700;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sg-fname small{font-family:var(--sans);font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sg-fname:hover{border-color:var(--ink)}
.sg-board{position:relative;aspect-ratio:5 / 2;width:100%;overflow:hidden;border:1px solid var(--soft);border-radius:var(--radius);
  background:conic-gradient(var(--ck2) 25%,var(--ck1) 0 50%,var(--ck2) 0 75%,var(--ck1) 0) 0 0 / 22px 22px;outline:0}
/* 다크: 검정 잉크가 보이게 중간 밝기 체크무늬(투명 자리 표시) */
:root[data-theme="dark"] .sg-work{--ck1:#bdb8b0;--ck2:#aca69e;--sg-tile:#bdb8b0}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .sg-work{--ck1:#bdb8b0;--ck2:#aca69e;--sg-tile:#bdb8b0}}
.sg-board:focus-visible{box-shadow:0 0 0 2px var(--accent)}
.sg-board[data-mode="draw"]{touch-action:none;cursor:crosshair;background:#fdfcf9;border-color:var(--line)}
.sg-board[data-mode="photo"].has-photo{cursor:crosshair;touch-action:none}
.sg-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.sg-ph{position:absolute;left:0;right:0;top:38%;margin:0;text-align:center;font-family:var(--sans);font-size:15px;font-weight:600;color:#8a857c;pointer-events:none}
.sg-drop{position:absolute;inset:10px;display:grid;place-content:center;justify-items:center;gap:10px;padding:12px;border:1.5px dashed var(--line);border-radius:var(--radius);background:color-mix(in srgb,var(--card) 88%,transparent);text-align:center}
.sg-drop p{margin:0;font-family:var(--sans);font-size:14px;font-weight:650;color:var(--ink)}
.sg-drop small{font-family:var(--sans);font-size:11.5px;line-height:1.45;color:var(--muted);max-width:34em}
.sg-drop-b{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.sg-board.is-over .sg-drop{border-color:var(--accent);background:color-mix(in srgb,var(--accent-wash) 70%,var(--card))}
.sg-loading{position:absolute;left:10px;bottom:8px;margin:0;padding:3px 8px;border-radius:var(--radius);background:var(--card);font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.sg-msg{min-height:1.5em;margin:0;line-height:1.5}
/* 이름 글씨가 왼쪽부터 써지는 효과(글꼴·이름을 바꿀 때 한 번) */
@keyframes sg-write{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.sg-board[data-mode="type"] .sg-cv.is-write{animation:sg-write .62s cubic-bezier(.3,.7,.3,1)}
@media (prefers-reduced-motion: reduce){.sg-board .sg-cv.is-write{animation:none}}

/* 조절 */
.sg-ctl{display:grid;gap:14px;align-content:start}
.sg-ctlhead{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:26px}
.sg-mini{height:26px;padding:0 9px;font-size:12px}
.sg-mini .i{width:13px;height:13px}
.sg-p{display:grid;gap:14px}
.sg-rngs{display:grid;grid-template-columns:minmax(5.4em,auto) minmax(0,1fr) minmax(3.6em,auto);align-items:center;gap:4px 10px}
.sg-rng{display:contents}
.sg-rng label{font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--ink)}
.sg-rng input[type=range]{width:100%;height:28px;margin:0;accent-color:var(--accent)}
.sg-rng output{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.sg-pics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.sg-pics button{display:grid;justify-items:center;gap:2px;padding:6px 4px 6px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:12px;font-weight:600;color:var(--muted);cursor:pointer}
.sg-pics button .i{width:40px;height:30px}
.sg-pics button span{max-width:100%;overflow-wrap:anywhere;text-align:center;line-height:1.25}
.sg-pics button:hover{background:var(--btn)}
.sg-pics button[aria-pressed="true"]{border-color:var(--fill);background:var(--fill);color:var(--on-fill)}
.sg-pics button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sg-sws{display:flex;flex-wrap:wrap;gap:8px 18px}
.sg-pfile{margin:0;padding:9px 11px;border:1px dashed var(--line);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sg-pfile.is-on{border-style:solid;color:var(--ink)}
.sg-inks{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.sg-sws2{display:flex;flex-wrap:wrap;gap:6px}
.sg-sws2 button{position:relative;width:28px;height:28px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--ink-c);cursor:pointer}
.sg-sws2 button span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sg-sws2 button[aria-pressed="true"]{outline:2px solid var(--ink);outline-offset:2px}
.sg-sws2 button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sg-sws2 .sg-inkp{width:auto;min-width:28px;padding:0 10px 0 30px;border-radius:14px;background:var(--paper);font-family:var(--sans);font-size:11.5px;font-weight:650;color:var(--ink)}
.sg-sws2 .sg-inkp span{position:static;width:auto;height:auto;overflow:visible;clip:auto}
.sg-sws2 .sg-inkp i{position:absolute;left:4px;top:4px;width:18px;height:18px;border-radius:50%;background:var(--ink-c,#333)}
.sg-well{position:relative;display:inline-block;width:28px;height:28px;overflow:hidden;border:1px solid var(--line);border-radius:50%;background:conic-gradient(#f03e3e,#ffd43b,#69db7c,#4dabf7,#9775fa,#f783ac,#f03e3e);cursor:pointer}
.sg-well input{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);padding:0;border:0;opacity:0;cursor:pointer}
.sg-well:focus-within{outline:2px solid var(--accent);outline-offset:2px}

/* 문서 위 실제 크기 */
.sg-doc{display:flex;flex-direction:column;gap:8px}
.sg-dochead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2px 8px;min-height:26px}
.sg-dochead .v2-label{white-space:nowrap}
.sg-docmm{font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.sg-paper{position:relative;flex:1 1 auto;display:flex;flex-direction:column;min-height:190px;overflow:hidden;padding:calc(var(--pxmm,3px) * 7) calc(var(--pxmm,3px) * 8) calc(var(--pxmm,3px) * 6);border:1px solid var(--line);border-radius:var(--radius);background:#fbfaf6;color:#2b2b2b;font-family:var(--serif);box-shadow:0 1px 0 rgba(0,0,0,.03)}
.sg-pt{margin:0 0 calc(var(--pxmm,3px) * 4);text-align:center;font-size:calc(var(--pxmm,3px) * 4.2);font-weight:700;letter-spacing:.12em;flex:none}
.sg-pbars{flex:1 1 0;min-height:0;overflow:hidden}
.sg-pbars i{display:block;height:calc(var(--pxmm,3px) * 1.1);margin:0 0 calc(var(--pxmm,3px) * 2.6);border-radius:2px;background:#dedad2}
.sg-pbars i:nth-child(4n){width:64%}
.sg-pdate{flex:none;margin:calc(var(--pxmm,3px) * 2) 0 calc(var(--pxmm,3px) * 5);text-align:center;font-size:calc(var(--pxmm,3px) * 3.2)}
.sg-psig{flex:none;display:flex;align-items:flex-end;justify-content:flex-end;gap:calc(var(--pxmm,3px) * 3);font-size:calc(var(--pxmm,3px) * 3.3);white-space:nowrap}
.sg-pname b{font-weight:600}
.sg-pline{position:relative;display:inline-flex;align-items:flex-end;justify-content:flex-end;min-width:calc(var(--pxmm,3px) * 46);padding:0 0 calc(var(--pxmm,3px) * .6);border-bottom:1px solid #5b574f}
.sg-pline em{font-style:normal;color:#77736b}
.sg-pline canvas{position:absolute;left:50%;bottom:calc(var(--pxmm,3px) * -2.2);transform:translateX(-50%);pointer-events:none}
.sg-pline canvas.is-fresh{animation:sg-ink .32s ease-out}
@keyframes sg-ink{from{opacity:.25}to{opacity:1}}
@media (prefers-reduced-motion: reduce){.sg-pline canvas.is-fresh{animation:none}}

/* 저장 */
.sg-out{display:grid;gap:12px}
.sg-orow{display:flex;flex-wrap:wrap;align-items:end;gap:12px 18px}
.sg-orow--save{flex-wrap:nowrap;gap:8px}
.sg-mmf{flex:0 1 150px;min-width:118px}
.sg-mmf .v2-input input{text-align:right}
.sg-save{flex:1 1 auto;justify-content:center}
.sg-copy{flex:0 1 auto;justify-content:center}
.sg-info{min-height:1.5em;font-variant-numeric:tabular-nums}

/* 글꼴 갤러리 */
.sg-gal{display:grid;gap:12px}
.sg-galhead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px}
.sg-galt{margin:0;font-family:var(--sans);font-size:13px;color:var(--muted)}
.sg-galt b{margin-right:6px;font-size:14px;color:var(--ink)}
.sg-galsw{order:3}
.sg-tiles{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:8px}
.sg-tile{display:grid;grid-template-rows:auto auto;gap:3px;min-width:0;padding:6px 6px 7px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);text-align:left;color:var(--ink);cursor:pointer;transition:border-color var(--ease),background var(--ease)}
.sg-tcv{display:block;aspect-ratio:3 / 1;border-radius:calc(var(--radius) - 2px);background:var(--sg-tile,color-mix(in srgb,var(--wash) 55%,var(--paper)));overflow:hidden}
.sg-tile canvas{display:block;width:100%;height:100%}
.sg-tile p{display:grid;gap:0;margin:0;min-width:0} /* 계열 이름은 아래 줄: 긴 라틴 글꼴 이름(Herr Von Muellerhoff)이 타일 폭을 다 쓰게 */
.sg-tile b{font-family:var(--sans);font-size:12px;font-weight:700;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sg-tile small{flex:none;font-family:var(--sans);font-size:10.5px;line-height:1.3;color:var(--muted)}
.sg-tile:hover{border-color:var(--line)}
.sg-tile[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.sg-tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sg-tile.is-miss canvas{visibility:hidden}
.sg-tile.is-miss{opacity:.5}
.sg-tile.is-miss small{color:var(--accent)}

/* 넓은 작업면: 조절 | 문서 */
@container sgw (min-width: 620px){
  .sg-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"modes modes" "stage stage" "ctl doc" "out out" "gal gal"}
  .sg-modes{grid-area:modes}
  .sg-stage{grid-area:stage}
  .sg-ctl{grid-area:ctl}
  .sg-doc{grid-area:doc;border-left:1px solid var(--soft)}
  .sg-out{grid-area:out}
  .sg-gal{grid-area:gal}
}
@container sgw (max-width: 559px){
  .sg-board{aspect-ratio:3 / 2}
  .sg-modes{gap:4px}
  .sg-modes button{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;row-gap:3px;padding:7px 3px;min-height:58px}
  .sg-modes button .i{grid-row:auto}
  .sg-modes button b{font-size:12px;overflow-wrap:anywhere}
  .sg-modes button small{display:none}
  .sg-paper{min-height:0;aspect-ratio:16 / 10}
}
@container sgw (max-width: 420px){
  .sg-orow--save{flex-wrap:wrap}
  .sg-mmf{flex:1 1 100%}
  .sg-act span{display:none}
  .sg-act{padding:0 10px}
}
.sg-fdetails{margin:0 0 14px}
.sg-fdetails summary{cursor:pointer;padding:9px 12px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--card);font-family:var(--sans);font-size:13.5px;font-weight:650;color:var(--ink)}
.sg-fdetails[open] summary{margin-bottom:8px}