/* 온라인 도장 만들기 — '도장 공방' (2026-10-22). 작업면 720px 이상: 종류 줄 → [무대 + 저장 | 글자·배치(톤) + 새김 스타일] → 글꼴 갤러리. 미만은 한 열(DOM 순서 그대로). */
.sk-work{padding:0;--sk-gap:18px;--ck1:#ffffff;--ck2:#eeeceb;container:skw/inline-size}
.sk-in{display:grid;grid-template-columns:minmax(0,1fr)}
.sk-in > *{min-width:0}
.sk-colL,.sk-colR{display:flex;flex-direction:column;min-width:0}
.sk-colR > .sk-s2{flex:1 1 auto}
.sk-kinds,.sk-stage,.sk-s1,.sk-s2,.sk-out,.sk-gal{padding:var(--sk-gap)}
.sk-stage,.sk-s1,.sk-s2,.sk-out,.sk-gal{border-top:1px solid var(--soft)}
.sk-grp{display:grid;gap:6px;min-width:0}
.sk-k{display:grid;gap:14px}
.sk-k[hidden]{display:none}
.sk-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.sk-work .v2-input input[type="text"]{text-align:left;font-size:16px}
.sk-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sk-two > .v2-f:nth-child(n+3){grid-column:1 / -1} /* 날짜·표기 칸은 한 줄 전체(표기 'OCT 23, 2026'·날짜 칸이 반 칸에서 잘림) */
.sk-sel{width:100%;height:var(--v2-ctl,42px);padding:0 30px 0 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:15px;font-weight:600;color:var(--ink)}
.sk-ta{display:block;width:100%;min-height:68px;padding:9px 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:16px;font-weight:600;line-height:1.45;color:var(--ink);resize:vertical}
.sk-ta:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 2px var(--accent-wash)}
.v2-f.is-invalid .sk-ta{border-color:var(--accent)}
.sk-work .v2-f > label em{font-family:var(--mono);font-size:11px;color:var(--muted)}
.sk-work .v2-hint{margin:0;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}
.sk-order:empty{display:none}
.sk-work .v2-hint + .v2-hint{margin-top:2px}
.v2-f > .v2-hint{margin-top:5px}

/* 종류 줄 */
.sk-kinds{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.sk-kinds button{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:8px;align-items:center;min-height:54px;padding:8px 10px;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)}
.sk-kinds button .i{grid-row:1 / 3;width:24px;height:24px;color:var(--muted)}
.sk-kinds button b{font-family:var(--sans);font-size:13px;font-weight:700;line-height:1.25}
.sk-work:lang(ko) .sk-kinds button small,.sk-work:lang(ko) .sk-kinds button b{word-break:keep-all}
.sk-kinds 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}
.sk-kinds button:hover{background:var(--btn)}
.sk-kinds button[aria-pressed="true"]{border-color:var(--fill);background:var(--fill);color:var(--on-fill)}
.sk-kinds button[aria-pressed="true"] .i,.sk-kinds button[aria-pressed="true"] small{color:var(--on-fill)}
.sk-kinds button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* 무대 */
.sk-stage{display:grid;gap:10px;align-content:start}
.sk-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.sk-bar-r{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px;margin-left:auto}
.sk-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sk-board{position:relative;aspect-ratio:1 / 1;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}
/* 다크: 검정·남색 잉크도 보이게 중간 밝기 체크무늬(투명 자리 표시) */
:root[data-theme="dark"] .sk-work{--ck1:#b9b4ac;--ck2:#a7a199;--sk-tile:#b9b4ac}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .sk-work{--ck1:#b9b4ac;--ck2:#a7a199;--sk-tile:#b9b4ac}}
.sk-cv{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:none;image-rendering:auto}
.sk-paper{position:absolute;inset:0;display:none;padding:calc(var(--pxmm,4px) * 9) calc(var(--pxmm,4px) * 10);background:#fbfaf6;color:#2b2b2b;font-family:var(--serif);box-sizing:border-box}
.sk-board[data-view="paper"]{background:#fbfaf6;border-color:var(--line)}
.sk-board[data-view="paper"] .sk-paper{display:block}
.sk-board[data-view="paper"] .sk-cv{mix-blend-mode:multiply}
.sk-p-title{margin:0 0 calc(var(--pxmm,4px) * 8);text-align:center;font-size:calc(var(--pxmm,4px) * 6);font-weight:700;letter-spacing:.1em}
.sk-p-bar{display:block;height:calc(var(--pxmm,4px) * 1.3);margin:0 0 calc(var(--pxmm,4px) * 3.4);border-radius:2px;background:#d9d6cf}
.sk-p-bar--s{width:62%}
.sk-p-date{margin:calc(var(--pxmm,4px) * 9) 0 calc(var(--pxmm,4px) * 6);text-align:center;font-size:calc(var(--pxmm,4px) * 3.6)}
.sk-p-sig{margin:0;text-align:right;font-size:calc(var(--pxmm,4px) * 4);white-space:nowrap}
.sk-mark{display:inline-block;margin-left:calc(var(--pxmm,4px) * 2);color:#555}
.sk-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)}
.sk-loading[hidden]{display:none}
.sk-msg{min-height:1.5em;margin:0;line-height:1.5}
@keyframes sk-press{0%{transform:translate(-50%,-50%) translateY(-22%) scale(1.22);opacity:0}52%{transform:translate(-50%,-50%) scale(.95);opacity:1}74%{transform:translate(-50%,-50%) scale(1.015)}100%{transform:translate(-50%,-50%) scale(1)}}
.sk-cv.is-press{animation:sk-press .48s cubic-bezier(.22,.8,.24,1)}
@media (prefers-reduced-motion: reduce){.sk-cv.is-press{animation:none}}
.sk-press[hidden]{display:none}

/* 글자·배치 */
.sk-shapes{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:6px}
.sk-shapes button{display:grid;justify-items:center;gap:3px;padding:7px 4px 6px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted);cursor:pointer}
.sk-shapes button .i{width:24px;height:24px}
.sk-shapes button span{max-width:100%;overflow-wrap:anywhere;text-align:center;line-height:1.2}
.sk-shapes button[aria-pressed="true"]{border-color:var(--fill);background:var(--fill);color:var(--on-fill)}
.sk-shapes button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sk-chips{display:flex;flex-wrap:wrap;gap:5px}
.sk-chips button{height:28px;padding:0 10px;border:1px solid var(--soft);border-radius:999px;background:var(--paper);font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--ink);cursor:pointer}
.sk-chips button:hover{background:var(--btn)}

/* 새김 스타일 */
.sk-s2{display:grid;gap:14px;align-content:start}
.sk-font{display:grid;gap:6px}
.sk-s2head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:26px}
.sk-mini{height:26px;padding:0 9px;font-size:12px}
.sk-mini .i{width:13px;height:13px}
.sk-mini:disabled{opacity:.45;cursor:default}
.sk-fnav{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:stretch;gap:6px}
.sk-fnav .v2-btn{height:auto;min-height:42px;padding:0 10px}
.sk-fname{display:grid;align-content:center;min-height:42px;padding:3px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);text-decoration:none;color:var(--ink)}
.sk-fname b{font-family:var(--sans);font-size:14px;font-weight:700;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sk-fname small{font-family:var(--sans);font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sk-fname:hover{border-color:var(--ink)}
.sk-sws{display:grid;gap:8px}
.sk-rngs{display:grid;grid-template-columns:minmax(5.6em,auto) minmax(0,1fr) minmax(4.4em,auto) 30px;align-items:center;gap:4px 10px}
.sk-rng{display:contents}
.sk-rng[hidden] > *{display:none}
.sk-rng > output:last-child{grid-column:3 / 5}
.sk-rng label{font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--ink)}
.sk-rng input[type=range]{width:100%;height:28px;margin:0;accent-color:var(--accent)}
.sk-rng output{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.sk-inks{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.sk-sws2{display:flex;flex-wrap:wrap;gap:6px}
.sk-sws2 button{position:relative;width:28px;height:28px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--ink-c);cursor:pointer}
.sk-sws2 button span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sk-sws2 button[aria-pressed="true"]{outline:2px solid var(--ink);outline-offset:2px}
.sk-sws2 button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sk-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}
.sk-well input{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);padding:0;border:0;opacity:0;cursor:pointer}
.sk-well:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.sk-reseed{width:30px;height:30px;padding:0;justify-content:center}

/* 저장 */
.sk-out{display:grid;gap:12px;align-content:start}
.sk-outrow{display:flex;flex-wrap:wrap;align-items:end;gap:12px 18px}
.sk-outrow--save{flex-wrap:nowrap;gap:8px}
.sk-mmf{flex:0 1 150px;min-width:118px}
.sk-mmf .v2-input input{text-align:right}
.sk-save{flex:1 1 auto;justify-content:center}
.sk-copy{flex:0 1 auto;justify-content:center}
.sk-file{min-height:1.5em}

/* 글꼴 갤러리 */
.sk-gal{display:grid;gap:12px}
.sk-galhead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px}
.sk-galt{margin:0;font-family:var(--sans);font-size:13px;color:var(--muted)}
.sk-galt b{margin-right:6px;font-size:14px;color:var(--ink)}
.sk-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.sk-tile{display:grid;grid-template-rows:auto auto auto;gap:2px;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)}
.sk-tile[hidden]{display:none}
.sk-tcv{display:grid;place-items:center;aspect-ratio:1 / 1;border-radius:calc(var(--radius) - 2px);background:var(--sk-tile,color-mix(in srgb,var(--wash) 60%,var(--paper)));overflow:hidden}
.sk-tile canvas{display:block}
.sk-tile b{font-family:var(--sans);font-size:12px;font-weight:700;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sk-tile small{font-family:var(--sans);font-size:10.5px;line-height:1.3;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sk-tile:hover{border-color:var(--line)}
.sk-tile[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.sk-tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sk-tile.is-miss canvas,.sk-tile.is-off canvas{visibility:hidden}
.sk-tile.is-miss{opacity:.5}
.sk-tiles:not(.is-all) .sk-tile.is-miss{display:none}
.sk-galsw[hidden]{display:none}
.sk-tile.is-miss small{color:var(--accent)}

/* 넓은 작업면: 두 칸 */
@container skw (min-width: 780px){
  .sk-in{grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);grid-template-areas:"kinds kinds" "L R" "gal gal"}
  .sk-kinds{grid-area:kinds}
  .sk-colL{grid-area:L}
  .sk-colR{grid-area:R;border-left:1px solid var(--soft)}
  /* 오른쪽 칸이 더 길면 무대가 남는 높이만큼 세로로 늘어 왼쪽 아래가 비지 않게(도장 크기는 무대 폭 기준 그대로) */
  .sk-colL > .sk-stage{flex:1 1 auto;display:flex;flex-direction:column}
  .sk-colL > .sk-stage > .sk-board{flex:1 1 auto}
  .sk-gal{grid-area:gal}
}
@container skw (min-width: 540px) and (max-width: 779px){
  .sk-board{aspect-ratio:3 / 2}
}
@container skw (max-width: 719px){
  .sk-kinds{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
  .sk-kinds button{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;row-gap:3px;padding:7px 3px;min-height:58px}
  .sk-kinds button .i{grid-row:auto}
  .sk-kinds button b{font-size:11.5px;overflow-wrap:anywhere}
  .sk-kinds button small{display:none}
}
@container skw (max-width: 420px){
  .sk-two{grid-template-columns:minmax(0,1fr)}
  .sk-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sk-outrow--save{flex-wrap:wrap}
  .sk-mmf{flex:1 1 100%}
}