:root{--hanji:#f5f0e5;--paper:#fffcf6;--navy:#1a214b;--navy-2:#3b4566;--muted:#79735f;--line:#ebe2d0;--line-2:#ddd2bb;--soft:#eef1fb;--sky:#a5b4e8;--ok:#1f6f4a;--ok-soft:#e6f2ea;--danger:#b42318;--danger-soft:#fbeae8;--warn-soft:#fbf3dc;--radius:14px;--shadow:0 1px 2px #1a214b0f, 0 6px 18px #1a214b0f;--font:"Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:var(--hanji);min-height:100vh;color:var(--navy);font:15px/1.6 var(--font);word-break:keep-all;overflow-wrap:anywhere;flex-direction:column;margin:0;display:flex}main{outline:none;flex:1;width:100%;max-width:1180px;margin:0 auto;padding:8px 16px 40px}a{color:inherit}button,input,select,textarea{font:inherit;color:inherit}h1,h2,h3{letter-spacing:-.01em;margin:0;line-height:1.3}p{margin:0}.muted{color:var(--muted)}.small{font-size:13px}[hidden]{display:none!important}.top{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;width:100%;max-width:1180px;margin:0 auto;padding:14px 16px 10px;display:flex}.brand{align-items:center;gap:10px;text-decoration:none;display:flex}.brand img{box-shadow:0 0 0 1px var(--line);background:#fff;border-radius:9px}.brand span{flex-direction:column;line-height:1.2;display:flex}.brand b{font-size:17px}.brand small{color:var(--muted);font-size:12px}.safe{background:var(--ok-soft);color:var(--ok);border-radius:999px;align-items:center;gap:10px;padding:7px 14px 7px 10px;display:flex;box-shadow:inset 0 0 0 1px #cfe5d7}.safe svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;flex:none;width:22px;height:22px}.safe span{flex-direction:column;line-height:1.25;display:flex}.safe b{font-size:14px}.safe small{opacity:.85;font-size:12px}.safe.offline small:after{content:" · 지금은 오프라인으로 동작 중"}.btn{appearance:none;background:var(--navy);color:#fff;cursor:pointer;white-space:nowrap;border:0;border-radius:999px;justify-content:center;align-items:center;gap:6px;min-height:42px;padding:10px 18px;font-weight:700;text-decoration:none;transition:background .15s,box-shadow .15s,opacity .15s;display:inline-flex}.btn:hover{background:#262f66}.btn:focus-visible,.chip:focus-visible,.icon-btn:focus-visible,.drop:focus-visible{outline:3px solid var(--sky);outline-offset:2px}.btn.ghost{background:var(--paper);color:var(--navy);box-shadow:inset 0 0 0 1px var(--line-2)}.btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--navy-2);background:#fff}.btn.danger{background:var(--paper);color:var(--danger);box-shadow:inset 0 0 0 1px #efc9c4}.btn.big{min-height:50px;padding:12px 26px;font-size:16px}.btn:disabled{opacity:.45;cursor:not-allowed}.icon-btn{appearance:none;width:32px;height:32px;color:var(--navy);cursor:pointer;box-shadow:0 0 0 1px var(--line-2);background:#fffcf6f0;border:0;border-radius:50%;place-items:center;display:inline-grid}.icon-btn:hover{box-shadow:0 0 0 1px var(--navy-2);background:#fff}.icon-btn svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:17px;height:17px}.icon-btn.del:hover{color:var(--danger)}.hero{padding:18px 0 8px}.hero h1{font-size:clamp(22px,3.2vw,30px)}.hero p{color:var(--navy-2);margin-top:6px}.points{flex-wrap:wrap;gap:8px;margin-top:14px;padding:0;list-style:none;display:flex}.points li{background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);border-radius:999px;padding:5px 12px;font-size:13.5px}.points b{color:var(--ok)}.group{margin-top:26px}.group h2{color:var(--muted);letter-spacing:.02em;margin-bottom:10px;font-size:14px;font-weight:700}.grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;display:grid}.card{border-radius:var(--radius);background:var(--paper);box-shadow:var(--shadow), inset 0 0 0 1px var(--line);align-items:flex-start;gap:12px;padding:16px;text-decoration:none;transition:transform .12s,box-shadow .12s;display:flex}.card:hover{box-shadow:0 10px 26px #1a214b1f, inset 0 0 0 1px var(--line-2);transform:translateY(-2px)}.card .ic{background:var(--soft);border-radius:12px;flex:none;place-items:center;width:42px;height:42px;display:grid}.card .ic svg,.tool-head .ic svg{fill:none;width:24px;height:24px;stroke:var(--navy);stroke-width:1.7px;stroke-linecap:round;stroke-linejoin:round}.card b{font-size:15.5px;display:block}.card span{color:var(--muted);margin-top:2px;font-size:13px;line-height:1.45;display:block}.card .tag{background:var(--warn-soft);color:#7a5a00;vertical-align:2px;border-radius:6px;margin-left:6px;padding:0 6px;font-size:11px;display:inline-block}.home-drop{margin-top:22px}.crumb{color:var(--muted);align-items:center;gap:4px;margin:6px 0 10px;font-size:14px;text-decoration:none;display:inline-flex}.crumb:hover{color:var(--navy)}.tool-head{align-items:center;gap:12px;margin-bottom:14px;display:flex}.tool-head .ic{background:var(--paper);width:46px;height:46px;box-shadow:inset 0 0 0 1px var(--line);border-radius:13px;flex:none;place-items:center;display:grid}.tool-head h1{font-size:22px}.tool-head p{color:var(--muted);font-size:14px}.panel{background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow), inset 0 0 0 1px var(--line);padding:16px}.panel+.panel{margin-top:12px}.panel h2{margin-bottom:10px;font-size:16px}.stack{flex-direction:column;gap:12px;display:flex}.row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.row.end{justify-content:flex-end}.spacer{flex:1}.drop{text-align:center;border-radius:var(--radius);border:2px dashed var(--line-2);background:var(--paper);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:6px;min-height:190px;padding:26px 16px;transition:border-color .15s,background .15s;display:flex}.drop:hover,.drop.over{border-color:var(--navy-2);background:#fff}.drop svg{fill:none;width:40px;height:40px;stroke:var(--navy-2);stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round}.drop b{font-size:17px}.drop span{color:var(--muted);font-size:13.5px}.drop.compact{flex-direction:row;gap:10px;min-height:0;padding:14px}.row>.drop.compact{flex:260px}.selbar{background:var(--soft);border-radius:12px;padding:8px 12px}.filerow{box-shadow:inset 0 0 0 1px var(--line);background:#fff;border-radius:10px;align-items:center;gap:10px;padding:8px 10px;display:flex}.filerow .fname{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.drop.compact svg{width:24px;height:24px}.drop.compact b{font-size:15px}body.dragging .drop{border-color:var(--navy-2);background:var(--soft)}.opts{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px 16px;display:grid}.field{flex-direction:column;gap:5px;min-width:0;display:flex}.field>span,.field>label.lab{color:var(--navy-2);font-size:13px;font-weight:700}.field small{color:var(--muted);font-size:12.5px;line-height:1.4}.input,select.input,textarea.input{border:1px solid var(--line-2);background:#fff;border-radius:10px;outline:none;width:100%;min-height:40px;padding:8px 12px}.input:focus{border-color:var(--navy-2);box-shadow:0 0 0 3px #a5b4e873}.input.err{border-color:var(--danger)}.seg{flex-wrap:wrap;gap:6px;display:flex}.chip{appearance:none;cursor:pointer;min-height:36px;color:var(--navy);box-shadow:inset 0 0 0 1px var(--line-2);background:#fff;border:0;border-radius:999px;padding:7px 13px;font-size:14px}.chip.danger{color:var(--danger);box-shadow:inset 0 0 0 1px #efc9c4}.chip[aria-pressed=true]{background:var(--navy);color:#fff;box-shadow:none;font-weight:700}.check{cursor:pointer;align-items:center;gap:8px;font-size:14px;display:inline-flex}.check input{width:18px;height:18px;accent-color:var(--navy)}.thumbs{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px;display:grid}.thumbs.files{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.thumb{box-shadow:inset 0 0 0 1px var(--line);cursor:grab;-webkit-user-select:none;user-select:none;touch-action:manipulation;background:#fff;border-radius:12px;flex-direction:column;gap:6px;padding:8px;display:flex;position:relative}.thumb:active{cursor:grabbing}.thumb .pic{aspect-ratio:3/4;background:repeating-linear-gradient(45deg,#faf7f0,#faf7f0 8px,#f4efe4 8px 16px);border-radius:6px;place-items:center;display:grid;position:relative;overflow:hidden}.thumb .pic>canvas,.thumb .pic>img{background:#fff;max-width:100%;max-height:100%;transition:transform .2s;box-shadow:0 1px 4px #0000002e}.thumb .pic .spin{border:3px solid var(--line-2);border-top-color:var(--navy-2);border-radius:50%;width:22px;height:22px;animation:.8s linear infinite spin}.thumb .cap{flex-direction:column;min-width:0;font-size:12.5px;line-height:1.35;display:flex}.thumb .cap b{white-space:nowrap;text-overflow:ellipsis;font-weight:600;overflow:hidden}.thumb .cap span{color:var(--muted)}.thumb .no{background:var(--navy);color:#fff;z-index:2;border-radius:999px;place-items:center;min-width:24px;height:24px;padding:0 7px;font-size:12px;font-weight:700;display:grid;position:absolute;top:12px;left:12px}.thumb .tools{z-index:2;opacity:.92;gap:4px;display:flex;position:absolute;top:10px;right:10px}.thumb.removed .pic{opacity:.25}.thumb.removed .cap b{text-decoration:line-through}.thumb.removed:after{content:"삭제";z-index:2;background:var(--danger);color:#fff;border-radius:999px;padding:2px 10px;font-size:13px;font-weight:700;position:absolute;top:42%;left:50%;transform:translate(-50%,-50%)}.thumb.sel{box-shadow:0 0 0 3px var(--navy-2);background:var(--soft)}.thumb.sel .no{background:var(--ok)}.thumb.sel .no:after{content:"✓";margin-left:3px}.thumb.ghost{opacity:.35}.thumb.chosen{box-shadow:0 0 0 2px var(--navy-2)}.thumb[data-group]{box-shadow:inset 0 0 0 2px var(--gc,var(--line))}.thumb .grp{z-index:2;color:#fff;background:var(--gc,var(--navy));border-radius:999px;padding:0 8px;font-size:11.5px;font-weight:700;position:absolute;bottom:44px;right:12px}.thumb.err .pic{background:var(--danger-soft)}.thumb .note{z-index:2;background:var(--warn-soft);color:#7a5a00;text-align:center;border-radius:6px;padding:2px 6px;font-size:11px;position:absolute;bottom:46px;left:12px;right:12px}.actionbar{z-index:20;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-radius:var(--radius) var(--radius) 0 0;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 -6px 18px #1a214b14, inset 0 0 0 1px var(--line);background:#fffcf6f5;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px;display:flex;position:sticky;bottom:0}.actionbar .summary{color:var(--navy-2);font-size:14px}.actionbar .summary b{color:var(--navy)}.namebox{flex:260px;align-items:center;gap:6px;min-width:220px;max-width:460px;display:flex}.namebox .input{min-height:40px}.namebox .ext{color:var(--muted);white-space:nowrap;font-size:14px}.result{background:var(--ok-soft);border-radius:var(--radius);margin-top:14px;padding:16px;box-shadow:inset 0 0 0 1px #cfe5d7}.result h2{color:var(--ok);margin-bottom:4px;font-size:16px}.result .files{flex-direction:column;gap:6px;max-height:320px;margin:10px 0 0;padding:0;list-style:none;display:flex;overflow:auto}.result .files li{background:#fff;border-radius:10px;align-items:center;gap:10px;padding:8px 10px;display:flex}.result .files li span{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-size:14px;overflow:hidden}.result .files li small{color:var(--muted);white-space:nowrap}.result .files .btn{min-height:34px;padding:6px 12px;font-size:13px}.result .row{margin-top:12px}.notice{background:var(--warn-soft);color:#5e4500;border-radius:10px;padding:10px 14px;font-size:14px}.notice.info{background:var(--soft);color:var(--navy-2)}.notice.bad{background:var(--danger-soft);color:var(--danger)}.busy{z-index:100;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#1a214b59;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.busy-card{background:var(--paper);border-radius:18px;flex-direction:column;gap:12px;width:min(420px,100%);padding:22px;display:flex;box-shadow:0 20px 50px #1a214b4d}.busy-card b{font-size:17px}.bar{background:var(--line);border-radius:999px;height:10px;overflow:hidden}.bar-fill{background:var(--navy);border-radius:inherit;width:0;height:100%;transition:width .2s}.bar.indet .bar-fill{animation:1.2s ease-in-out infinite indet;width:35%!important}.busy-text{color:var(--navy-2);min-height:1.6em;font-size:14px}.busy-card .btn{align-self:flex-end}@keyframes indet{0%{transform:translate(-100%)}to{transform:translate(290%)}}@keyframes spin{to{transform:rotate(360deg)}}.toasts{left:50%;bottom:calc(18px + env(safe-area-inset-bottom));z-index:120;pointer-events:none;flex-direction:column;gap:8px;width:min(520px,100% - 32px);display:flex;position:fixed;transform:translate(-50%)}.toast{background:var(--navy);color:#fff;border-radius:12px;padding:12px 16px;font-size:14px;animation:.2s ease-out rise;box-shadow:0 10px 30px #1a214b4d}.toast.bad{background:var(--danger)}.toast.ok{background:var(--ok)}@keyframes rise{0%{opacity:0;transform:translateY(8px)}}dialog.modal{background:var(--paper);width:min(420px,100% - 32px);color:var(--navy);border:0;border-radius:18px;padding:22px;box-shadow:0 20px 50px #1a214b4d}dialog.modal::backdrop{background:#1a214b59}dialog.modal form{flex-direction:column;gap:12px;display:flex}.table-wrap{max-height:480px;box-shadow:inset 0 0 0 1px var(--line);background:#fff;border-radius:10px;overflow:auto}table.t{border-collapse:collapse;width:100%;font-size:13.5px}table.t th,table.t td{border-bottom:1px solid var(--line);text-align:left;vertical-align:middle;white-space:nowrap;padding:7px 10px}table.t th{z-index:1;color:var(--navy-2);background:#faf6ec;font-weight:700;position:sticky;top:0}table.t td.wrap{white-space:normal;min-width:180px}table.t tr.off td{color:var(--muted);text-decoration:line-through}table.t .input{min-height:34px;padding:5px 9px}table.t td.num{text-align:right;font-variant-numeric:tabular-nums}.stage{touch-action:none;-webkit-user-select:none;user-select:none;max-width:100%;display:inline-block;position:relative}.stage canvas{background:#fff;max-width:100%;height:auto;display:block;box-shadow:0 2px 12px #0000002e}.stamp-box{cursor:move;outline:2px dashed var(--navy-2);outline-offset:1px;position:absolute}.stamp-box img{pointer-events:none;width:100%;height:100%;display:block}.stamp-box .handle{background:var(--navy);cursor:nwse-resize;border:2px solid #fff;border-radius:50%;width:18px;height:18px;position:absolute;bottom:-9px;right:-9px}.stamp-preview{width:120px;height:120px;box-shadow:inset 0 0 0 1px var(--line);background:repeating-conic-gradient(#f3eee2 0% 25%,#fff 0% 50%) 50%/16px 16px;border-radius:10px;place-items:center;display:grid}.stamp-preview img{max-width:100%;max-height:100%}.pager{align-items:center;gap:8px;display:flex}.foot{background:var(--navy);color:#e9ebf5;margin-top:30px}.foot-in{max-width:1180px;padding:22px 16px calc(26px + env(safe-area-inset-bottom));flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 30px;margin:0 auto;display:flex}.foot b{color:#fff;font-size:16px}.foot p{margin-top:2px;font-size:13.5px}.foot .muted{color:#b9bdd6;max-width:560px;margin-top:6px}.foot nav{flex-wrap:wrap;gap:8px;display:flex}.foot .btn{color:var(--navy);background:#fff}.foot .btn.ghost{color:#fff;background:0 0;box-shadow:inset 0 0 0 1px #ffffff59}.foot .btn.ghost:hover{box-shadow:inset 0 0 0 1px #fff}@media (max-width:640px){body{font-size:14.5px}.top{padding-top:10px}.safe{border-radius:12px;width:100%}.grid{grid-template-columns:1fr}.thumbs{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}.thumbs.files{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}.thumb{padding:6px}.thumb .tools{top:8px;right:8px}.icon-btn{width:30px;height:30px}.actionbar{border-radius:0;grid-template-columns:1fr auto;gap:8px 10px;margin-left:-16px;margin-right:-16px;padding-top:10px;display:grid}.actionbar .spacer{display:none}.actionbar .summary{grid-area:1/1;align-self:center}.actionbar>.btn{grid-area:1/2}.actionbar .namebox{grid-area:2/1/auto/-1;min-width:0;max-width:none}.actionbar .namebox .input{min-height:36px;padding:6px 10px}.tool-head h1{font-size:19px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}
