*{box-sizing:border-box}
:root{
  /* 사이트와 같은 크림 팔레트(2026-09-27). 예전 어두운 값은 git 기록에 있다. */
  --bg:#f2efe7;--panel:#f8f6f0;--panel-2:#fbfaf6;--panel-3:#ece8de;
  --ink:#171d1a;--ink-2:#4f5a51;--ink-3:#666f68;--line:#d9d5ca;
  --mark:#2a7353;--mark-deep:#e1efe7;--amber:#8a5a10;--danger:#b8453d;
  --paper:#ffffff;--paper-ink:#171a1e;--shadow:0 18px 50px rgba(23,29,26,.10);
  color-scheme:light;
}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-variant-numeric:tabular-nums;line-height:1.6;-webkit-font-smoothing:antialiased}
button,input,select{font:inherit}
button,a,input,select{outline-offset:3px}
:focus-visible{outline:2px solid var(--mark)}
a{color:inherit}
.skip{position:fixed;z-index:100;left:16px;top:10px;padding:9px 13px;background:var(--paper);color:var(--paper-ink);transform:translateY(-160%)}
.skip:focus{transform:none}
.tools-header{height:72px;border-bottom:1px solid var(--line)}
.header-inner{max-width:1260px;height:100%;margin:auto;padding:0 24px;display:flex;align-items:center;gap:14px}
.brand{color:var(--ink);font-size:18px;font-weight:900;letter-spacing:-.04em;text-decoration:none;white-space:nowrap}
.brand em{color:var(--mark);font-style:normal}
.brand-divider{width:1px;height:16px;background:var(--line)}
.tools-name{color:var(--ink-2);font-size:13px;font-weight:850;text-decoration:none}
.tools-header nav{display:flex;margin-left:34px;gap:4px}
.tools-header nav a{padding:8px 12px;color:var(--ink-3);border-radius:8px;font-size:13px;font-weight:760;text-decoration:none}
.tools-header nav a:hover,.tools-header nav a.active{background:var(--panel);color:var(--ink)}
.local-state{margin-left:auto;color:var(--ink-3);font:700 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.03em;white-space:nowrap}
.local-state i{display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:var(--mark);box-shadow:0 0 0 4px rgba(42,115,83,.12)}
main{max-width:1320px;margin:auto;padding:0 30px 100px}
.tool-intro{min-height:310px;padding:62px 0 42px;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr);align-items:end;gap:80px}
.tool-intro.compact{min-height:270px;padding-top:50px}
.eyebrow{margin:0 0 16px;color:var(--mark);font:800 11px/1.25 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em}
.tool-intro h1,.method-grid h2,.tool-notes h2{margin:0;font-size:clamp(40px,5.2vw,70px);font-weight:900;letter-spacing:-.065em;line-height:1.04}
.tool-intro h1 em{color:var(--mark);font-style:normal}
.intro-copy{max-width:430px;padding-bottom:4px}
.intro-copy p{margin:0;color:var(--ink-2);font-size:16px;line-height:1.75}
.intro-copy a{display:inline-flex;margin-top:20px;gap:18px;color:var(--ink);font-size:13px;font-weight:850;text-decoration:none;border-bottom:1px solid var(--ink-3)}
.intro-copy a span{color:var(--mark)}

/* Workbench */
.workbench{scroll-margin-top:18px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--panel-2);box-shadow:var(--shadow)}
.bench-bar{min-height:58px;padding:9px 13px 9px 18px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);background:var(--panel)}
.bench-title{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:850}
.bench-title .mark{width:26px;height:26px;display:grid;place-items:center;border-radius:7px;background:var(--mark);color:#fff;font-size:14px}
.bench-title small{color:var(--ink-3);font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.09em}
.bench-actions{margin-left:auto;display:flex;gap:6px}
.quiet-button,.mode-button,.icon-button{border:1px solid var(--line);background:var(--panel-3);color:var(--ink-2);cursor:pointer}
.quiet-button{min-height:36px;padding:0 12px;border-radius:8px;font-size:12px;font-weight:800}
.quiet-button:hover{border-color:var(--ink-3);color:var(--ink)}
.bench-grid{display:grid;grid-template-columns:270px minmax(390px,1fr) 350px;min-height:720px}
.preset-pane,.inspector-pane{padding:21px;background:var(--panel)}
.preset-pane{border-right:1px solid var(--line)}
.inspector-pane{border-left:1px solid var(--line)}
.pane-heading{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:14px}
.pane-heading h2,.pane-heading h3{margin:0;font-size:13px;font-weight:850;letter-spacing:-.02em}
.pane-heading span{color:var(--ink-3);font:700 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em}
.preset-group+.preset-group{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.group-label{margin:0 0 9px;color:var(--ink-3);font:800 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em}
.preset-list{display:grid;gap:6px}
.preset-button{width:100%;min-height:64px;padding:11px 12px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 8px;text-align:left;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--ink);cursor:pointer}
.preset-button:hover{background:var(--panel-3)}
.preset-button.active{border-color:rgba(42,115,83,.35);background:var(--mark-deep);box-shadow:inset 3px 0 var(--mark)}
.preset-button strong{display:block;font-size:13px;font-weight:850}
.preset-button small{display:block;margin-top:3px;color:var(--ink-3);font:650 10px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace}
.preset-button .source-badge{align-self:start;padding:3px 6px;border:1px solid rgba(42,115,83,.3);border-radius:99px;color:var(--mark);font-size:9px;font-weight:850}
.preset-note{margin:18px 0 0;padding:12px;border:1px solid var(--line);border-radius:9px;color:var(--ink-3);font-size:11px;line-height:1.55}
.preset-note strong{display:block;margin-bottom:3px;color:var(--ink-2)}

.canvas-pane{--ink-3:#59625b;min-width:0;padding:22px;display:flex;flex-direction:column;background-color:#ebe7dd;background-image:radial-gradient(rgba(23,29,26,.08) 1px,transparent 1px);background-size:18px 18px}
.drop-zone{min-height:190px;display:grid;place-items:center;padding:28px;border:1px dashed #a9b0a6;border-radius:13px;background:rgba(255,255,255,.62);text-align:center;cursor:pointer;transition:.16s ease}
.drop-zone:hover,.drop-zone.dragging{border-color:var(--mark);background:rgba(42,115,83,.07)}
.drop-icon{width:48px;height:48px;margin:0 auto 14px;display:grid;place-items:center;border:1px solid var(--line);border-radius:12px;background:var(--panel-3);color:var(--mark);font-size:23px}
.drop-zone h2{margin:0;font-size:20px;line-height:1.3;letter-spacing:-.035em}
.drop-zone p{margin:7px 0 0;color:var(--ink-3);font-size:12px}
.drop-zone.has-files{min-height:54px;padding:10px 13px;display:flex;justify-content:space-between;text-align:left;border-style:solid}
.drop-zone.has-files .drop-empty{display:none}
.drop-summary{display:none;align-items:center;gap:9px}
.drop-zone.has-files .drop-summary{display:flex}
.drop-summary b{width:28px;height:28px;display:grid;place-items:center;border-radius:7px;background:var(--mark);color:#fff;font-size:12px}
.drop-summary span{display:grid}
.drop-summary strong{font-size:12px}
.drop-summary small{color:var(--ink-3);font-size:10px}
.add-files{color:var(--mark);font-size:11px;font-weight:850}
.queue{display:none;margin-top:12px}
.queue.has-files{display:block}
.queue-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.queue-head strong{font-size:11px}.queue-head span{color:var(--ink-3);font-size:10px}
.file-rail{display:flex;gap:7px;overflow:auto;padding-bottom:3px}
.file-card{position:relative;width:132px;min-width:132px;padding:7px;display:grid;grid-template-columns:34px 1fr;gap:8px;align-items:center;text-align:left;border:1px solid var(--line);border-radius:9px;background:var(--panel-2);color:var(--ink);cursor:pointer}
.file-card.active{border-color:var(--mark);background:var(--mark-deep)}
.file-card img{width:34px;height:34px;object-fit:cover;border-radius:6px}
.file-card span{min-width:0}.file-card strong,.file-card small{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.file-card strong{font-size:10px}.file-card small{margin-top:2px;color:var(--ink-3);font-size:8px}
.file-remove{position:absolute;right:2px;top:0;padding:2px 5px;border:0;background:transparent;color:var(--ink-3);cursor:pointer}
.preview-shell{display:none;min-height:0;flex:1;margin-top:14px}
.preview-shell.visible{display:flex;flex-direction:column}
.preview-head{min-height:33px;display:flex;align-items:center;gap:8px}
.preview-head strong{font-size:11px}.preview-meta{color:var(--ink-3);font:650 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace}
.sample-button{margin-left:auto;padding:5px 8px;border:1px solid var(--line);border-radius:7px;background:var(--panel-3);color:var(--ink-2);font-size:9px;font-weight:800;cursor:pointer}
.sample-button.active{border-color:var(--amber);color:var(--amber)}
.compare-stage{position:relative;min-height:360px;flex:1;display:grid;place-items:center;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:#e4e0d5}
.compare-frame{position:relative;max-width:calc(100% - 32px);max-height:410px;background:#fff;box-shadow:0 14px 40px rgba(23,29,26,.22);overflow:hidden;cursor:crosshair}
.compare-frame img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.compare-frame .before-image{z-index:1}
.compare-frame .after-wrap{position:absolute;z-index:2;inset:0;overflow:visible;width:100%;clip-path:inset(0 50% 0 0);border-right:0}
.compare-frame .after-image{width:100%;height:100%;max-width:none}
.compare-handle{position:absolute;z-index:3;top:50%;left:50%;width:27px;height:27px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.9);border-radius:50%;background:rgba(14,16,20,.78);color:#fff;font-size:9px;transform:translate(-50%,-50%);pointer-events:none}
.compare-label{position:absolute;z-index:4;top:9px;padding:4px 7px;border-radius:5px;background:rgba(14,16,20,.76);color:#fff;font:750 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.07em;pointer-events:none}
.compare-label.before{left:9px}.compare-label.after{right:9px}
.compare-slider{width:100%;margin-top:11px;accent-color:var(--mark)}
.preview-empty{flex:1;display:grid;place-items:center;min-height:330px;color:var(--ink-3);font-size:12px;text-align:center}
.preview-loading{position:absolute;z-index:8;inset:0;display:grid;place-items:center;background:rgba(242,239,231,.84);color:var(--mark);font-size:12px;font-weight:850}

.mode-switch{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-bottom:18px;padding:4px;border:1px solid var(--line);border-radius:9px;background:var(--panel-2)}
.mode-button{min-height:32px;padding:0 5px;border:0;border-radius:6px;background:transparent;font-size:10px;font-weight:800}
.mode-button.active{background:var(--panel-3);color:var(--ink);box-shadow:0 0 0 1px var(--line)}
.control-section{padding:15px 0;border-top:1px solid var(--line)}
.control-section:first-of-type{padding-top:0;border:0}
.section-label{margin:0 0 11px;color:var(--ink-3);font:800 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em}
.fields-2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.field{display:grid;gap:5px;margin-bottom:10px}
.field>span,.toggle-row>span{color:var(--ink-2);font-size:10px;font-weight:780}
.field input[type="number"],.field input[type="text"],.field select{width:100%;height:37px;padding:0 9px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);color:var(--ink);font-size:11px}
.field input:focus,.field select:focus{border-color:var(--mark);outline:none;box-shadow:0 0 0 2px rgba(42,115,83,.14)}
.range-row{display:grid;grid-template-columns:1fr 45px;align-items:center;gap:9px}
.range-row input{width:100%;accent-color:var(--mark)}
.range-row output{text-align:right;color:var(--mark);font:750 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace}
.toggle-row{min-height:38px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.switch{appearance:none;width:38px;height:21px;position:relative;border:1px solid #b9bfb5;border-radius:99px;background:#e4e0d5;cursor:pointer}
.switch::after{content:"";position:absolute;left:3px;top:3px;width:13px;height:13px;border-radius:50%;background:#8c948d;transition:.15s}
.switch:checked{border-color:var(--mark);background:var(--mark-deep)}
.switch:checked::after{left:20px;background:var(--mark)}
.color-row{display:grid;grid-template-columns:1fr 38px;gap:9px}
.color-row input[type="color"]{width:38px;height:37px;padding:3px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2)}
.help{margin:4px 0 0;color:var(--ink-3);font-size:9px;line-height:1.5}
.actions{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:3px}
.primary-button{min-height:46px;padding:0 16px;border:0;border-radius:9px;background:var(--mark);color:#fff;font-size:12px;font-weight:900;cursor:pointer}
.primary-button:hover{background:#225f44}.primary-button:disabled{opacity:.38;cursor:not-allowed}
.secondary-button{min-width:46px;padding:0 12px;border:1px solid var(--line);border-radius:9px;background:var(--panel-3);color:var(--ink);font-size:11px;font-weight:850;cursor:pointer}

.receipt{margin-top:18px;border-top:1px solid var(--line);color:var(--paper-ink);background:var(--paper);clip-path:polygon(0 0,100% 0,100% calc(100% - 7px),96% 100%,92% calc(100% - 7px),88% 100%,84% calc(100% - 7px),80% 100%,76% calc(100% - 7px),72% 100%,68% calc(100% - 7px),64% 100%,60% calc(100% - 7px),56% 100%,52% calc(100% - 7px),48% 100%,44% calc(100% - 7px),40% 100%,36% calc(100% - 7px),32% 100%,28% calc(100% - 7px),24% 100%,20% calc(100% - 7px),16% 100%,12% calc(100% - 7px),8% 100%,4% calc(100% - 7px),0 100%)}
.receipt-inner{padding:16px 16px 22px}
.receipt-head{display:flex;justify-content:space-between;gap:12px;padding-bottom:11px;border-bottom:1px dashed #9b9b92}
.receipt-head strong{font-size:12px}.receipt-head small{text-align:right;color:#626771;font:700 8px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace}
.verdict{margin:13px 0;padding:10px 11px;border:1px solid #9c9b93;border-radius:7px;background:#dfdcd3}
.verdict[data-state="pass"]{border-color:#177451;background:#ccefdc}.verdict[data-state="warn"]{border-color:#ac7116;background:#f5ddb1}
.verdict b{display:block;font-size:14px;letter-spacing:-.03em}.verdict span{display:block;margin-top:2px;color:#565b63;font-size:9px}
.checks{display:grid;gap:6px}
.check-row{display:grid;grid-template-columns:15px 1fr auto;gap:7px;align-items:center;font-size:9px}
.check-mark{width:14px;height:14px;display:grid;place-items:center;border-radius:50%;background:#d3d0c8;color:#6c7077;font-size:8px;font-weight:900}
.check-mark.pass{background:#258760;color:#fff}.check-mark.warn{background:#c17d19;color:#fff}
.check-row em{color:#5e636a;font-style:normal;font:650 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace}
.receipt-foot{margin:12px 0 0;padding-top:10px;border-top:1px dashed #9b9b92;color:#5d6269;font-size:8px;line-height:1.55;text-align:center}
.receipt-foot a{color:#273c34;font-weight:850}
.results{display:grid;gap:6px;margin-top:10px}
.result-item{padding:8px 9px;display:grid;grid-template-columns:1fr auto;gap:7px;align-items:center;border:1px solid var(--line);border-radius:8px;background:var(--panel-2)}
.result-item span{min-width:0}.result-item strong,.result-item small{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.result-item strong{font-size:9px}.result-item small{margin-top:2px;color:var(--ink-3);font-size:8px}
.result-item button{border:0;background:transparent;color:var(--mark);font-size:9px;font-weight:850;cursor:pointer}
.save-all{width:100%;min-height:36px;margin-top:7px;border:1px solid var(--line);border-radius:8px;background:var(--panel-3);color:var(--ink);font-size:10px;font-weight:850;cursor:pointer}
.privacy-line{margin:12px 0 0;color:var(--ink-3);font-size:9px;line-height:1.55;text-align:center}

.method-grid,.tool-notes{margin-top:110px;display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:start}
.method-grid h2,.tool-notes h2{font-size:clamp(34px,4.4vw,58px)}
.method-list{border-top:1px solid var(--line)}
.method-list article{padding:22px 0;display:grid;grid-template-columns:100px 1fr;gap:4px 20px;border-bottom:1px solid var(--line)}
.method-list span{grid-row:1 / span 2;color:var(--mark);font:750 10px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace}
.method-list h3{margin:0;font-size:15px;letter-spacing:-.02em}
.method-list p,.tool-notes>div:last-child p{margin:5px 0 0;color:var(--ink-2);font-size:13px;line-height:1.7}
.tool-notes{padding-top:44px;border-top:1px solid var(--line)}
.tool-notes>div:last-child{padding-top:24px}
.tool-notes>div:last-child a{display:inline-block;margin-top:16px;color:var(--mark);font-size:12px;font-weight:850;text-decoration:none}
.tools-footer{max-width:1260px;margin:0 auto;padding:26px 24px 55px;display:flex;align-items:center;gap:24px;border-top:1px solid var(--line)}
.tools-footer p{margin:0;color:var(--ink-3);font-size:11px}
.tools-footer nav{margin-left:auto;display:flex;gap:18px}.tools-footer nav a{color:var(--ink-3);font-size:11px;text-decoration:none}
.toast{position:fixed;z-index:90;right:20px;bottom:20px;max-width:340px;padding:11px 14px;border:1px solid rgba(42,115,83,.35);border-radius:9px;background:var(--mark-deep);color:var(--ink);box-shadow:var(--shadow);font-size:11px;font-weight:800}

@media(max-width:1100px){
  .bench-grid{grid-template-columns:235px minmax(390px,1fr)}
  .inspector-pane{grid-column:1 / -1;border-left:0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
  .inspector-pane>.pane-heading,.mode-switch{grid-column:1 / -1}
  .inspector-pane .receipt{grid-column:2;grid-row:3 / span 6;margin:0}
  .inspector-pane .results,.inspector-pane .save-all,.inspector-pane .privacy-line{grid-column:2}
}
@media(max-width:780px){
  .tools-header{height:auto}.header-inner{min-height:68px;flex-wrap:wrap;padding:14px 18px;gap:10px}.tools-header nav{order:4;width:100%;margin:0;overflow:auto}.tools-header nav a{white-space:nowrap;padding-left:8px}.local-state{font-size:9px}
  main{padding:0 14px 70px}.tool-intro{min-height:0;padding:45px 4px 30px;grid-template-columns:1fr;gap:22px}.tool-intro.compact{padding-top:42px}.tool-intro h1{font-size:clamp(38px,11vw,62px)}
  .bench-bar{flex-wrap:wrap}.bench-title{width:100%}.bench-actions{margin-left:0;width:100%}.quiet-button{flex:1}
  .bench-grid{display:block}.preset-pane{border-right:0;border-bottom:1px solid var(--line)}.preset-list{grid-template-columns:1fr 1fr}.preset-button{min-height:60px}
  .canvas-pane{min-height:590px;padding:14px}.compare-stage{min-height:330px}
  .inspector-pane{display:block;border-left:0}.inspector-pane .receipt{margin-top:18px}
  .method-grid,.tool-notes{margin-top:72px;grid-template-columns:1fr;gap:28px}.method-list article{grid-template-columns:80px 1fr}.tool-notes>div:last-child{padding-top:0}
  .tools-footer{margin:0 14px;padding:24px 4px 50px;flex-wrap:wrap}.tools-footer nav{width:100%;margin-left:0}
}
@media(max-width:470px){
  .local-state{display:none}.preset-list{grid-template-columns:1fr}.canvas-pane{min-height:520px}.drop-zone{min-height:165px}.compare-stage{min-height:280px}.fields-2{grid-template-columns:1fr}.method-list article{display:block}.method-list span{display:block;margin-bottom:7px}
}
@media(prefers-reduced-motion:no-preference){.drop-zone,.preset-button,.switch::after{transition:.16s ease}}

/* 설명 칸 — 도구 페이지 본문이 415~443자뿐이라 애드센스 심사에서
   "도구만 있고 읽을 게 없는" 페이지로 보였다(2026-09-22). 코드와 공식
   출처로 확인한 사실만 싣는다. .tool-notes 칸을 그대로 쓰고 표·목록만 더한다. */
.tool-guide{margin-top:72px}
.tool-guide h3{margin:26px 0 0;font-size:15px;font-weight:900;letter-spacing:-.02em;color:var(--ink)}
.tool-guide>div:last-child h3:first-child{margin-top:0}
.tool-guide ol{margin:8px 0 0;padding-left:18px;color:var(--ink-2);font-size:13px;line-height:1.7}
.tool-guide li+li{margin-top:4px}
.tool-guide table{width:100%;margin-top:12px;border-collapse:collapse;font-size:13px}
.tool-guide th,.tool-guide td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tool-guide th{color:var(--ink-3);font-weight:800;white-space:nowrap}
.tool-guide td{color:var(--ink-2)}
.tool-guide .src{margin-top:10px;font-size:12px;color:var(--ink-3)}