/*
Theme Name: dailyseop 무료도구
Description: 가입도, 업로드도 없는 무료 도구. 브라우저 안에서 처리. 외부 JS 0(애드센스 제외), 시스템 글꼴, hex 는 아래 토큰 7개뿐.
Version: 1.0
*/
/* ---------- 토큰(중앙 정의 — 컴포넌트에 hex 를 쓰지 않는다) ---------- */
:root{
  --c1:#1d5fd6;            /* brand: 링크·주 버튼·선택 상태 */
  --c2:#1b2230;            /* ink: 본문 글자 */
  --cat-pdf:#d93b3b; --cat-image:#1f9d6a; --cat-text:#2f6fd8; --cat-file:#d78a12; --cat-video:#7b4fd0; /* 카테고리 5색 */
  --cat:var(--c1);
  --bg:color-mix(in srgb,var(--c2) 3%,white); --paper:white;
  --ink:var(--c2); --mute:color-mix(in srgb,var(--c2) 66%,white); --line:color-mix(in srgb,var(--c2) 12%,white);
  --soft:color-mix(in srgb,var(--cat) 8%,white); --soft2:color-mix(in srgb,var(--cat) 16%,white);
  --ok:var(--cat-image); --bad:var(--cat-pdf);
  --r:10px; --gap:16px; --w:1120px; --prose:720px;
  --mono:ui-monospace,Consolas,"Malgun Gothic",monospace;
}
.cat-pdf{--cat:var(--cat-pdf)} .cat-image{--cat:var(--cat-image)} .cat-text{--cat:var(--cat-text)} .cat-file{--cat:var(--cat-file)} .cat-video{--cat:var(--cat-video)}
*{box-sizing:border-box} html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",Roboto,sans-serif;word-break:keep-all;overflow-wrap:anywhere}
a{color:var(--c1)} a:hover{text-decoration-thickness:2px}
.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--gap)}
.skip{position:absolute;left:-999px;top:0;background:var(--paper);padding:8px} .skip:focus{left:8px;z-index:9}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
h1{font-size:clamp(28px,2.2vw + 18px,40px);line-height:1.25;margin:8px 0 10px;letter-spacing:-.01em}
h2{font-size:clamp(21px,1.2vw + 15px,26px);line-height:1.3;margin:36px 0 12px}
h3{font-size:18px;margin:22px 0 8px}
p{margin:0 0 12px}
code{font-family:var(--mono);font-size:.92em;background:var(--soft);padding:1px 5px;border-radius:5px}
small,.small{font-size:14px;color:var(--mute)}
img{max-width:100%;height:auto}
/* 헤더 */
.hd{background:var(--paper);border-bottom:1px solid var(--line)}
.hd .wrap{display:flex;align-items:center;gap:14px;min-height:60px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:700;font-size:19px;min-height:44px}
.logo b{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--c1);color:white;font-size:18px}
.logo small{font-weight:400;color:var(--mute);font-size:13px;margin-left:2px}
.nav{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:15px}
.nav a:hover{background:var(--soft)} .nav a[aria-current]{color:var(--cat);font-weight:700;box-shadow:inset 0 -3px 0 var(--cat)}
/* 홈 */
.hero{padding:32px 0 8px;max-width:820px}
.hero .lead{font-size:18px;color:var(--mute);margin-bottom:18px} .hero em{font-style:normal;color:var(--c1);font-weight:700}
.find{display:flex;align-items:center;gap:8px;background:var(--paper);border:2px solid var(--line);border-radius:12px;padding:6px 12px;max-width:640px}
.find:focus-within{border-color:var(--c1)} .find .ic{color:var(--mute);flex:none}
.find input{flex:1;border:0;outline:0;font:inherit;font-size:17px;min-height:44px;background:transparent;color:var(--ink)}
.find-none{margin-top:10px;color:var(--mute)}
.sec{margin:28px 0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--gap)}
.grid-big{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.card{display:flex;flex-direction:column;gap:6px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:12px;color:var(--ink);text-decoration:none;transition:border-color .18s,transform .18s,box-shadow .18s}
.card:hover{border-color:var(--cat);transform:translateY(-2px);box-shadow:0 6px 16px color-mix(in srgb,var(--c2) 8%,transparent)}
.card .thumb{display:grid;place-items:center;aspect-ratio:16/9;background:var(--soft);border-radius:8px;color:var(--cat);overflow:hidden}
.card .thumb img{width:100%;height:100%;object-fit:cover;display:block} .card .thumb .ic{width:40px;height:40px}
.card .ttl{font-weight:700;font-size:17px;line-height:1.3;margin-top:4px}
.card .desc{font-size:14px;color:var(--mute);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .io{font-size:13px;color:var(--cat);margin-top:auto}
.card.hide{display:none}
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--gap)}
.catc{display:flex;flex-direction:column;gap:2px;align-items:flex-start;padding:14px;border:1px solid var(--line);border-left:5px solid var(--cat);border-radius:var(--r);background:var(--paper);color:var(--ink);text-decoration:none;min-height:44px}
.catc .ic{color:var(--cat)} .catc span{font-size:13px;color:var(--mute)}
.plist{list-style:none;padding:0;margin:0} .plist li{padding:10px 0;border-bottom:1px solid var(--line)} .plist time{font-size:13px;color:var(--mute);margin-left:8px}
/* 약속 */
.promises{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;padding:12px 14px;margin:14px 0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r)}
.promises li{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:600;min-height:28px}
.promises .ic{width:18px;height:18px;color:var(--ok)}
.promises .verify{font-weight:400;font-size:14px;margin-left:2px;display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
/* 도구 페이지 */
.crumb{font-size:14px;color:var(--mute);margin:14px 0 0} .crumb a{color:var(--mute)}
.tool .short{font-size:18px;color:var(--mute);max-width:var(--prose)}
.after{font-size:14px;color:var(--mute);margin:10px 0 0}
.prose{max-width:var(--prose)} .prose h2{scroll-margin-top:12px} .prose ol,.prose ul{padding-left:22px}
.prose .limits{background:var(--soft);border-left:4px solid var(--cat);padding:10px 14px;border-radius:0 8px 8px 0}
.prose .steps{counter-reset:s;list-style:none;padding:0} .prose .steps li{position:relative;padding-left:44px;margin-bottom:10px;min-height:32px}
.prose .steps li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:var(--cat);color:white;display:grid;place-items:center;font-weight:700}
.prose .faq h3{font-size:17px} .prose .two{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)} .prose .two>div{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.prose .two h3{margin-top:0}
.tw{overflow-x:auto} .tbl{border-collapse:collapse;width:100%;font-size:14px} .tbl th,.tbl td{border:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}
.meas{font-variant-numeric:tabular-nums}
.related .small{margin-top:10px}
.ad-space{min-height:280px;margin:200px 0 28px} .ad-space-2{margin-top:36px} .ad-space[data-ad-reserved]{min-height:0;margin:0}
@media(min-width:768px){.ad-space{min-height:250px}}
/* 셸이 없는 페이지(안내 글·허브·홈)는 200px 이격이 필요 없다. 높이는 정본 ADSENSE.md §3-3 값. */
.ad-flow{margin:28px 0;max-width:100%;overflow:hidden} .ad-flow-inarticle{min-height:280px} .ad-flow-multiplex{min-height:600px} .ad-flow-display{min-height:280px}
@media(min-width:768px){.ad-flow-inarticle{min-height:250px} .ad-flow-display{min-height:250px}}
@media(max-width:767px){.ad-flow-multiplex{min-height:400px}}
body.ds-busy .ad-space .ad-slot,body.ds-error .ad-space .ad-slot{display:none}
.meta{font-size:14px;color:var(--mute)}
/* 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:9px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:inherit;font-weight:600;cursor:pointer;text-decoration:none;transition:background .16s,border-color .16s,transform .16s}
.btn:hover{border-color:var(--cat);transform:translateY(-1px)} .btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn-p{background:var(--cat);border-color:var(--cat);color:white} .btn-p:hover{background:color-mix(in srgb,var(--cat) 88%,black)}
.btn-run,.btn-cancel{min-width:180px;height:48px} .btn-cancel{border-color:var(--bad);color:var(--bad)}
.run{min-height:48px}
.lnk{color:var(--c1);text-decoration:underline;cursor:pointer}
/* 셸 */
.shell{display:grid;grid-template-columns:2fr 1fr;gap:var(--gap);min-width:0;max-width:100%;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:var(--gap);margin:12px 0 0}
.shell>.status,.shell>.result,.shell>.err,.shell>noscript{grid-column:1/-1}
/* 결과 자리 예약 — 결과·오류가 나타나도 아래 산문이 밀리지 않는다(CLS) */
.shell>.res-hold{grid-column:1/-1;min-height:260px;display:grid;grid-template-columns:minmax(0,1fr);min-width:0;max-width:100%}
.shell>.res-hold>.result,.shell>.res-hold>.err{grid-area:1/1;align-self:start;min-width:0;max-width:100%}
@media(max-width:767px){.shell>.res-hold{min-height:320px}}
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;min-height:176px;border:2px dashed color-mix(in srgb,var(--cat) 45%,white);background:var(--soft);border-radius:12px;padding:16px;transition:border-color .12s,background .12s;cursor:pointer}
.drop:focus{outline:3px solid color-mix(in srgb,var(--c1) 40%,white)} .drop.over{border-color:var(--cat);background:var(--soft2)}
.drop .ic{width:40px;height:40px;color:var(--cat)} .drop-t{margin:0} .drop-s{margin:0;font-size:13px;color:var(--mute)} .drop-g{margin:0;font-size:13px;color:var(--ok);font-weight:600}
.drop input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.tin{display:flex;flex-direction:column;gap:6px} .tin textarea{width:100%;font:inherit;font-size:15px;line-height:1.5;padding:10px;border:1px solid var(--line);border-radius:8px;resize:vertical;min-height:160px;background:var(--paper);color:var(--ink)}
.tin input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.tpair{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.form-only .drop-s{font-size:15px;color:var(--ink)}
.files{list-style:none;padding:0;margin:10px 0 0;max-height:320px;overflow:auto;border-top:1px solid var(--line)}
.files li{display:flex;align-items:center;gap:8px;min-height:56px;padding:6px 0;border-bottom:1px solid var(--line);font-size:14px}
.files .ic{flex:none;color:var(--cat)} .files .fn{flex:1;min-width:0;display:flex;align-items:baseline;gap:6px;overflow:hidden} .files .fn b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} .files .fn i{font-style:normal;flex:none}
.files .fs{flex:none;color:var(--mute);font-variant-numeric:tabular-nums;width:72px;text-align:right} .files .fi{flex:none;color:var(--mute)}
.files .rng{width:110px;font:inherit;font-size:13px;padding:6px;border:1px solid var(--line);border-radius:6px}
.files button{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);cursor:pointer;flex:none} .files button:hover{border-color:var(--cat)} .files button:disabled{opacity:.35}
.files li.bad{background:color-mix(in srgb,var(--bad) 8%,white)}
.opts{display:flex;flex-direction:column;gap:10px} .opt{display:flex;flex-direction:column;gap:4px} .opt[hidden]{display:none}
.opt label,.opt .lab{font-size:14px;font-weight:600} .opt small{color:var(--mute);font-size:13px}
.opt input:not([type=checkbox]):not([type=color]),.opt select,.opt textarea{font:inherit;font-size:15px;min-height:44px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);width:100%}
.opt input[type=color]{width:56px;height:44px;padding:2px;border:1px solid var(--line);border-radius:8px;background:var(--paper)}
.opt-checkbox label{display:flex;align-items:center;gap:8px;min-height:32px;font-weight:500} .opt-checkbox input{width:20px;height:20px;accent-color:var(--cat)}
.run{margin-top:14px;display:flex;flex-direction:column;gap:8px} .run .why{margin:0;font-size:13px;color:var(--mute);min-height:20px}
.mem{font-size:13px;background:var(--soft);border-radius:8px;padding:8px 10px;margin-top:10px}
.status{min-height:44px;margin-top:4px} .status .bar{height:5px;background:var(--line);border-radius:3px;overflow:hidden;max-width:100%;contain:paint} .status .fill{display:block;height:100%;width:100%;background:var(--cat);transform:translateX(-100%);transition:transform .2s}
.status .bar.indet .fill{animation:indet 1.2s linear infinite} @keyframes indet{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.status .msg{margin:6px 0 0;font-size:14px;color:var(--mute);font-variant-numeric:tabular-nums}
.result{border-top:1px solid var(--line);padding-top:14px;animation:fade .14s} .err{border-top:1px solid var(--line);padding-top:14px;animation:fade .14s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.result h2,.err h2{margin:0 0 10px;font-size:20px;display:flex;align-items:center;gap:8px} .result h2 .ic{color:var(--ok)} .err h2 .ic{color:var(--bad)}
.res-main{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px;max-width:100%;min-width:0}
.res-main .btn{max-width:100%;min-width:0;overflow:hidden}
.res-main .btn>:not(svg){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.res-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.res-list li{border:1px solid var(--line);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:6px;font-size:14px;background:var(--bg);min-width:0}
.res-list .pv{height:180px;display:grid;place-items:center;background:var(--paper);border-radius:8px;overflow:hidden} .res-list .pv img{max-height:100%;object-fit:contain}
.res-list .nm{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .res-list .mt{color:var(--mute);font-variant-numeric:tabular-nums}
.res-frame{height:240px;border:1px solid var(--line);border-radius:10px;background:var(--paper);overflow:auto;padding:10px;font-family:var(--mono);font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere;margin-bottom:12px;max-width:100%}
.res-frame.img{display:grid;place-items:center;padding:0} .res-frame.img img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain}
.diff{font-family:var(--mono);font-size:13px;white-space:pre-wrap} .diff .a{background:color-mix(in srgb,var(--ok) 20%,white)} .diff .r{background:color-mix(in srgb,var(--bad) 18%,white);text-decoration:line-through}
.res-note{font-size:14px;color:var(--mute)} .res-sub{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.err ul{margin:0 0 10px;padding-left:20px} .err .acts{display:flex;gap:8px;flex-wrap:wrap}
.pages{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;max-height:420px;overflow:auto;padding:4px}
.pages .pg{border:1px solid var(--line);border-radius:8px;padding:6px;background:var(--paper);display:flex;flex-direction:column;gap:4px;align-items:center;font-size:12px;cursor:grab}
.pages .pg img{max-width:100%;border:1px solid var(--line)} .pages .pg.del{opacity:.35} .pages .pg.sel{outline:2px solid var(--c1)} .pages .pg .pa{display:flex;gap:2px} .pages .pg .pa{flex-wrap:wrap;justify-content:center} .pages .pg .pa button{width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--paper);cursor:pointer;display:grid;place-items:center}
.pages .pg .pa button .ic{width:18px;height:18px}
.crop{position:relative;user-select:none;touch-action:none;background:var(--bg);border-radius:8px;overflow:hidden;display:grid;place-items:center} .crop canvas{display:block;max-width:100%}
.crop .box{position:absolute;border:2px solid var(--c1);box-shadow:0 0 0 9999px color-mix(in srgb,var(--c2) 45%,transparent);cursor:move}
.crop .h{position:absolute;width:20px;height:20px;background:var(--c1);border-radius:50%;right:-10px;bottom:-10px;cursor:nwse-resize}
.crop-info{font-size:13px;color:var(--mute);font-variant-numeric:tabular-nums}
/* 푸터 */
.ft{margin-top:56px;border-top:1px solid var(--line);background:var(--paper);padding:24px 0 32px;font-size:14px;color:var(--mute)}
.ft-nav{display:flex;flex-wrap:wrap;gap:6px 16px;margin:6px 0} .ft-nav a{color:var(--mute);min-height:32px;display:inline-flex;align-items:center}
.nojs{background:var(--soft);padding:12px;border-radius:8px}
/* 모바일 */
@media(max-width:767px){
  .shell{grid-template-columns:1fr;padding:12px}
  .shell>*,.shell-work>*,.shell-side>*{min-width:0;max-width:100%}
  .res-frame{height:180px}
  .res-list{grid-template-columns:1fr} .drop{min-height:144px} .tpair{grid-template-columns:1fr} .prose .two{grid-template-columns:1fr}
  .hd .wrap{gap:6px;max-width:100%}
  .nav{margin-left:0;width:100%;min-width:0;max-width:100%;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap;padding:0 10px;flex:0 0 auto}
  .grid,.grid-big{grid-template-columns:1fr 1fr} .card .desc{-webkit-line-clamp:3} .promises{gap:4px 12px} .promises li{font-size:14px}
  .files .rng{width:80px} .ad-space{margin-top:200px}
}
@media(max-width:480px){.grid,.grid-big{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important} .status .bar.indet .fill{transform:none;opacity:.5}}