/* 레이아웃: 리소 인쇄물 한 장. 위 도형 띠 → 두툼한 로고 → 2단(설명+줄이기 / 큰 키우기). 모든 잉크는 곱하기로 겹치고 입자 마스크로 거칠게 */
:root{
  --paper:#f4efdc;
  --news:#ecebe4;
  --zz:26px;
  --ink:#2b2a33;
  --pink:#ff4fa3;
  --aqua:#4fc3dc;
  --yellow:#ffe02e;
  --orange:#ff6a2b;
  --purple:#7a4bb3;
  --blue:#2a5fb8;
  --muted:#6b6672;
  --f-display:"Bagel Fat One","Black Han Sans",sans-serif;
  --f-body:"IBM Plex Sans KR","IBM Plex Sans JP","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --f-label:"Oswald","Arial Narrow",sans-serif;
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -3.2 0 0 0 2.75'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  color-scheme:light;
}
html,body{background:var(--paper);color:var(--ink)}
body{
  font-family:var(--f-body);font-size:15px;line-height:1.6;
  background-image:
    radial-gradient(ellipse at 15% 10%,rgba(255,79,163,.07),transparent 40%),
    radial-gradient(ellipse at 90% 70%,rgba(79,195,220,.08),transparent 45%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .3  0 0 0 0 .25  0 0 0 .22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.wrap{max-width:1100px;margin:0 auto;padding-block:22px 0;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* 오려 낸 신문지: 위아래 지그재그 */
.sheet-wrap{filter:drop-shadow(0 3px 4px rgba(60,50,40,.18));margin-block:4px 22px}
.sheet{background:var(--news);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .3  0 0 0 0 .3  0 0 0 .2 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  padding:calc(var(--zz) + 14px) clamp(14px,3vw,30px);
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/var(--zz) 51% repeat-x,conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/var(--zz) 51% repeat-x;
  mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/var(--zz) 51% repeat-x,conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/var(--zz) 51% repeat-x}
.sheet main{padding-block:0}
/* 잉크 공통: 곱하기 + 입자 */
.ink{mix-blend-mode:multiply;-webkit-mask-image:var(--grain);mask-image:var(--grain);-webkit-mask-size:180px;mask-size:180px}

/* 도형 띠 */
.strip{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;height:clamp(54px,9vw,96px)}
.strip svg{width:100%;height:100%;display:block}
@media (max-width:560px){.strip{grid-template-columns:repeat(4,1fr)}.strip>:nth-child(n+5){display:none}}

/* 로고 */
header{display:flex;flex-direction:column;gap:6px;padding-block:18px 10px}
.logo{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(52px,11vw,128px);line-height:.92;letter-spacing:.01em;position:relative;display:inline-block;align-self:flex-start}
.logo .l{display:block;white-space:nowrap}
.logo .l1{color:var(--orange)}
.logo .sh{position:absolute;inset:0;pointer-events:none}
.logo .sh.p{color:var(--pink);transform:translate(-.035em,.04em)}
.logo .sh.y{color:var(--yellow);transform:translate(.03em,.065em)}
.logo .main{position:relative}
.logo .l2{color:var(--aqua);font-size:.62em}
.sub{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;font-family:var(--f-label);font-size:clamp(14px,1.8vw,19px);letter-spacing:.08em;text-transform:uppercase;color:var(--pink)}
.sub b{font-weight:500;color:var(--purple)}

main{display:grid;grid-template-columns:1fr 1.15fr;gap:26px;padding-block:22px 30px}
@media (max-width:760px){main{grid-template-columns:1fr}}
.left{display:flex;flex-direction:column;gap:20px;min-width:0}
.lede{isolation:isolate;font-size:clamp(20px,2.6vw,26px);font-weight:600;line-height:1.4;margin:0;text-wrap:balance}
.hl{position:relative;white-space:nowrap}
.hl::before{content:"";position:absolute;left:-3px;right:-3px;top:52%;bottom:2%;background:var(--yellow);z-index:-1;mix-blend-mode:multiply;transform:rotate(-1deg)}
.hl.b::before{background:var(--aqua);opacity:.7}
.copy{margin:0;color:var(--muted);max-width:42ch}

/* 확장자 아이콘 */
.fmts{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.fmt{position:relative;width:50px;height:60px}
.fmt i{position:absolute;inset:0;background:var(--c);clip-path:polygon(0 0,68% 0,100% 24%,100% 100%,0 100%)}
.fmt i.off{background:var(--d);opacity:.8;transform:translate(3px,3px)}
.fmt span{position:absolute;left:0;right:0;bottom:7px;text-align:center;font-family:var(--f-label);font-size:13px;letter-spacing:.06em;color:var(--paper);z-index:2}

/* 드롭 영역 */
.zone{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:8px;padding:44px 24px;cursor:pointer;outline:none;isolation:isolate}
.zone:focus-visible .frame{outline:4px solid var(--ink);outline-offset:3px}
.zone .frame{position:absolute;inset:0;z-index:-1}
.zone .fill{position:absolute;inset:0}
.zone .fill2{position:absolute;inset:0;transform:translate(7px,7px)}
.down .fill{background:var(--aqua);opacity:.55}
.down .fill2{background:radial-gradient(var(--purple) 1.3px,transparent 1.8px) 0 0/8px 8px;opacity:.45}
.up .fill{background:var(--pink);opacity:.42}
.up .fill2{background:conic-gradient(var(--yellow) 25%,transparent 0 50%,var(--yellow) 0 75%,transparent 0) 0 0/36px 36px;opacity:.55}
.zone h2{font-family:var(--f-display);font-weight:400;margin:0;line-height:1;position:relative}
.down h2{font-size:clamp(40px,6vw,56px);color:var(--purple)}
.up h2{font-size:clamp(58px,10vw,104px);color:var(--orange)}
.zone .lbl{position:relative;display:block;font-family:var(--f-label);font-weight:500;font-size:16px;letter-spacing:.08em;color:var(--ink);margin-top:10px}
.zone p{margin:0;margin-top:10px;font-size:14px!important;position:relative;font-size:13px;color:var(--ink)}
.down{min-height:250px}
.right{display:flex;flex-direction:column;gap:16px;min-width:0}
.right .zone{flex:1;min-height:460px}
.zone.over .fill{opacity:.8}

.dnd{position:relative;display:flex;align-items:center;gap:8px;margin-bottom:6px}
.dnd svg{width:46px;height:46px}
.dnd .hand{width:26px;height:26px;animation:drop 1.4s ease-in-out infinite}
.dnd b{border:0!important;background:none!important;padding:0!important;font-family:var(--f-label);font-weight:500;font-size:15px;letter-spacing:.14em;padding:4px 10px;border:2px dashed var(--ink);background:var(--paper)}
.up .dnd .x{width:58px;height:58px}
.zone.over .dnd b{border:0!important;background:none!important;padding:0!important;background:var(--yellow)}
@keyframes drop{0%,100%{translate:0 -3px}50%{translate:0 3px}}
@media (prefers-reduced-motion:reduce){.dnd .hand{animation:none}}
.dnd{flex-direction:column;gap:6px}
.dnd .pic{width:92px;height:70px}
.up .dnd .pic{width:120px;height:92px}
.dnd .hand{position:absolute;right:-30px;top:8px}
.pickbtn{position:relative;font:600 15px var(--f-body);padding:10px 20px;background:var(--ink);color:var(--paper);box-shadow:4px 4px 0 var(--yellow);margin-top:8px}
.zone:hover .pickbtn{background:var(--purple)}
.down h2{font-size:clamp(34px,5vw,46px)}
.up h2{font-size:clamp(44px,7.5vw,78px)}
:root:lang(ja){--f-body:"IBM Plex Sans JP","Hiragino Sans","Yu Gothic",sans-serif;--f-display:"Bagel Fat One","Dela Gothic One",sans-serif}
.lang{display:inline-flex;margin-left:auto;border:2px solid var(--ink)}
.lang button{font:500 13px var(--f-label);letter-spacing:.08em;padding:3px 10px;border:0;background:transparent;color:var(--ink);cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.lang button:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
.info{display:flex;flex-direction:column;gap:12px;padding-top:6px}
.info h3{margin:0;display:flex;align-items:baseline;gap:10px;font-weight:400}
.info h3 .ink{font-family:var(--f-display);font-size:30px;color:var(--pink);line-height:1}
.info h3 small{font-family:var(--f-label);font-size:14px;letter-spacing:.08em;color:var(--muted)}
.info dl{margin:0;display:grid;gap:12px}
.info dl div{display:grid;gap:2px;padding-left:14px;border-left:4px solid var(--aqua)}
.info dl div:nth-child(2){border-color:var(--pink)}.info dl div:nth-child(3){border-color:var(--yellow)}.info dl div:nth-child(4){border-color:var(--purple)}
.info dt{font-weight:600}
.info dd{margin:0;color:var(--muted);font-size:14px;max-width:48ch}
.sub{align-items:center}
.titlerow{display:flex;align-items:center;gap:clamp(12px,2vw,22px);flex-wrap:wrap}
.scaler{font-family:var(--f-label);font-weight:500;font-size:clamp(13px,1.6vw,18px);line-height:1.15;letter-spacing:.18em;color:var(--ink);border:1.5px solid var(--ink);padding:8px 12px;align-self:center}
.titlerow .lang{margin-left:auto;align-self:flex-start}
.sub.bottom{padding-block:2px 10px;justify-content:center;text-align:center;font-size:13px;gap:2px 10px}
.sub.bottom .brw{flex-basis:100%;font-family:var(--f-body);font-size:12px;letter-spacing:0;text-transform:none;color:var(--muted)}
.stamp{position:absolute;z-index:3;display:grid;place-items:center;pointer-events:none}
.stamp svg{grid-area:1/1;width:100%;height:100%}
.stamp b{grid-area:1/1;position:relative;font-family:var(--f-display);font-weight:400;line-height:.85;text-align:center;color:var(--paper)}
.stamp small{display:block;font-family:var(--f-label);font-weight:500;letter-spacing:.2em;font-size:.32em;margin-top:4px}
.sd{width:104px;height:104px;top:-22px;right:56px;transform:rotate(-10deg)}
.sd b{font-size:40px}
.su{width:150px;height:150px;top:-40px;right:60px;transform:rotate(8deg)}
.su b{font-size:44px;color:var(--ink)}
@media (max-width:560px){.sd{width:84px;height:84px;right:44px}.sd b{font-size:32px}.su{width:116px;height:116px;right:44px}.su b{font-size:34px}}
.info dt b{color:var(--pink)}
.zone .well{position:absolute;inset:44px;background:var(--paper);border:3px dashed var(--ink)}
.zone.over .well{background:#fffbe6;border-style:solid}
.zone{padding:76px 60px}
.arw{width:28px;height:28px}
.tl{top:8px;left:8px}.tr{top:8px;right:8px}.br{bottom:8px;right:8px}.bl{bottom:8px;left:8px}
.dpi{position:relative;display:inline-flex;align-items:baseline;gap:3px;font-family:var(--f-display);font-size:30px;line-height:1;padding:6px 14px 8px;border-radius:999px;color:var(--paper);margin-top:4px}
.dpi small{font-family:var(--f-label);font-weight:500;font-size:14px;letter-spacing:.1em}
.dd{background:var(--purple)}.du{background:var(--orange);font-size:36px}
.dnd .hand{right:-34px}
@media (max-width:560px){.zone .well{inset:30px}.zone{padding:56px 40px}}
.papers{list-style:none;margin:0;padding:8px 0 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;align-items:stretch}
.pp{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;text-align:center;gap:2px;min-width:0}
.sheet-fig{display:flex;align-items:center;justify-content:center;max-width:100%;background:transparent;border:2.5px solid var(--ink);border-radius:4px;margin-bottom:8px}
.sheet-fig i{font-style:normal;font-family:var(--f-label);font-weight:500;font-size:13px;letter-spacing:.04em;line-height:1.1;padding:2px}

.sheet-fig.banner i{font-size:12px;writing-mode:vertical-rl;letter-spacing:.2em}
.star .sheet-fig{background:color-mix(in srgb,var(--orange) 22%,var(--paper))}
.best .sheet-fig,.ok .sheet-fig{background:color-mix(in srgb,var(--aqua) 30%,var(--paper))}
.maybe .sheet-fig:not(.banner){background:color-mix(in srgb,var(--yellow) 40%,var(--paper))}
.no .sheet-fig{border-style:dashed;border-color:var(--muted);background:transparent;box-shadow:none}
.pp .mk{font:600 26px/1 var(--f-body)}
.pp b{font-size:14px;font-weight:600;line-height:1.2}
.pp small{font-family:var(--f-label);font-size:12px;color:var(--muted);line-height:1.3;overflow-wrap:anywhere}
.pp small.px{color:var(--ink)}
.star .mk{color:var(--orange)}.best .mk{color:var(--blue)}.ok .mk{color:#2a8fb0}.maybe .mk{color:#d99a00}.no .mk{color:var(--pink)}
.no b,.no small{color:var(--muted)!important}
@media (max-width:520px){.papers{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:16px}}
.sheet-fig.dog{position:relative;border:0;border-radius:0;background:transparent!important}
.sheet-fig.dog svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sheet-fig.dog i{position:relative}
.pp{--fig:var(--paper)}
.pp:first-child .sheet-fig i{font-size:11px;letter-spacing:0;line-height:1}
.no .sheet-fig.dog path{stroke-dasharray:4 3;stroke:var(--muted)}
.sheet-fig.xb{position:relative;border:0;border-radius:0;background:transparent!important}
.sheet-fig.xb svg{position:absolute;inset:0;width:100%;height:100%}
.sheet-fig.xb i{position:relative;font-size:11px;line-height:1.25;text-align:center;font-style:normal}
.cardgrp{position:relative;display:block;width:40px;height:40px;margin-bottom:8px}
.cardgrp .sheet-fig{position:absolute;right:0;top:0;margin:0}
.cardgrp .nc{position:absolute;left:0;bottom:0;background:var(--fig);border:1.5px solid var(--ink);border-radius:1px}
.pp .nm{font-size:12px;font-weight:600;margin:-4px 0 2px}
.pp[role="button"]{cursor:pointer;border-radius:6px;padding:8px 2px 6px;outline:none;transition:background .15s}
.pp[role="button"]:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.pp[aria-pressed="true"]{background:color-mix(in srgb,var(--ink) 7%,transparent);box-shadow:inset 0 0 0 2px var(--ink)}
.pp[role="button"]:focus-visible{box-shadow:inset 0 0 0 3px var(--pink)}
.no{padding:8px 2px 6px}
.hint{font-size:12px;color:var(--muted)}
.btns{justify-content:center}
#bMain{flex:0 1 320px;font-size:16px;padding:15px 24px}
.pp{position:relative}
.rec{position:relative;align-self:center;margin-bottom:6px;transform:rotate(-4deg);font:600 12px/1 var(--f-body);color:var(--paper);background:var(--pink);padding:4px 8px;border-radius:3px;white-space:nowrap;z-index:2}
.stack{position:relative;display:block;margin-bottom:8px}
.stack>span{position:absolute}
.stack .sheet-fig{margin:0}
.stack .s3{left:10px;top:0}.stack .s2{left:5px;top:5px}.stack .s1{left:0;top:10px}
.word{position:absolute;left:50%;bottom:5px;translate:-50% 0;font-family:var(--f-display);font-size:34px;line-height:1;letter-spacing:.06em;pointer-events:none;z-index:1}
.wd{color:var(--paper);text-shadow:2px 2px 0 var(--purple),-1px -1px 0 var(--purple),1px -1px 0 var(--purple),-1px 1px 0 var(--purple);animation:beatD 1.4s ease-in-out infinite}
.wu{bottom:auto;top:4px;color:var(--paper);font-size:36px;text-shadow:2px 2px 0 var(--orange),-1px -1px 0 var(--orange),1px -1px 0 var(--orange),-1px 1px 0 var(--orange);animation:beatU 1.4s ease-in-out infinite}
.zone.over .word{animation-duration:.6s}
@keyframes beatD{0%,40%,100%{scale:1}15%{scale:.82}28%{scale:.92}}
@keyframes beatU{0%,40%,100%{scale:1}15%{scale:1.22}28%{scale:1.08}}
@media (prefers-reduced-motion:reduce){.word{animation:none!important}}
@media (max-width:560px){.word{font-size:24px}.wu{font-size:26px}}
footer .brw{margin:0;text-align:center;font-size:12px;color:var(--muted)}
@media (min-width:761px){body footer{display:grid;grid-template-columns:1fr auto 1fr}footer .coded{justify-self:end}}
@media (max-width:760px){footer .brw{flex-basis:100%;order:3;text-align:left}}
.result .legend,.result .mock,.result .note{text-align:center}
.result .note{margin:0;font-size:12px;color:var(--ink)}
/* 모서리 화살표 */
.arw{position:absolute;width:34px;height:34px}
.arw svg{width:100%;height:100%;display:block;transform:rotate(var(--r))}
.tl{top:14px;left:14px;--r:0deg}.tr{top:14px;right:14px;--r:90deg}
.br{bottom:14px;right:14px;--r:180deg}.bl{bottom:14px;left:14px;--r:270deg}
.down .arw{color:var(--purple);animation:inward 1.4s ease-in-out infinite}
.up .arw{color:var(--orange);animation:outward 1.4s ease-in-out infinite}
.zone.over .arw{animation-duration:.55s}
@keyframes inward{0%,100%{translate:0 0}50%{translate:var(--ix) var(--iy)}}
@keyframes outward{0%,100%{translate:0 0}50%{translate:var(--ox) var(--oy)}}
.tl{--ix:9px;--iy:9px;--ox:-7px;--oy:-7px}.tr{--ix:-9px;--iy:9px;--ox:7px;--oy:-7px}
.br{--ix:-9px;--iy:-9px;--ox:7px;--oy:7px}.bl{--ix:9px;--iy:-9px;--ox:-7px;--oy:7px}
@media (prefers-reduced-motion:reduce){.arw{animation:none!important}}

/* 결과 */
.result{position:relative;padding:18px 20px;display:flex;flex-direction:column;gap:10px;isolation:isolate}
.result::before{content:"";position:absolute;inset:0;border:2.5px solid var(--ink);z-index:-1}
.result .tag{font-family:var(--f-label);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--pink)}
.result .file{font-family:var(--f-label);font-size:15px;letter-spacing:.03em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.verdicts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.verdicts li{display:grid;grid-template-columns:22px 1fr;gap:8px;align-items:start}
.verdicts .dot{width:16px;height:16px;border-radius:50%;margin-top:4px}
.ok .dot{background:var(--aqua)}.maybe .dot{background:var(--yellow)}.no .dot{box-shadow:inset 0 0 0 2px var(--muted)}
.verdicts li{grid-template-columns:auto 1fr auto!important;align-items:center!important;gap:12px!important;padding-block:8px;border-top:1px solid color-mix(in srgb,var(--ink) 15%,transparent)}
.chip{font:600 22px/1 var(--f-body);width:28px;text-align:center}
.star .chip{color:var(--orange)}.best .chip{color:var(--blue,#2b6cb0)}.ok .chip{color:#2a8fb0}.maybe .chip{color:#d99a00}
.no .chip{color:var(--pink)}
.legend{margin:0;font-size:12px;color:var(--muted);padding-top:6px;border-top:1px solid color-mix(in srgb,var(--ink) 15%,transparent)}
.use{font-weight:600}.use small{display:block;font-weight:400;font-family:var(--f-label);font-size:12px;letter-spacing:.03em;color:var(--muted)}
.out{font-family:var(--f-label);font-size:14px;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.out em{display:block;font-style:normal;font-size:12px;color:var(--pink)}
.no .use,.no .out{color:var(--muted)}

.result .head{margin:0;font-size:18px;font-weight:600;line-height:1.4}
.result .head b{background:linear-gradient(transparent 55%,var(--aqua) 55%)}
@media (max-width:440px){.out{font-size:12px}}
.no{color:var(--muted)}
.sz{display:block;font-family:var(--f-label);font-size:13px;letter-spacing:.02em;font-variant-numeric:tabular-nums;margin-top:1px}
.sz b{font-weight:500;color:var(--ink)}
.sz em{font-style:normal;color:var(--pink);margin-left:4px}
.no .sz b{color:var(--muted)}
.result .file b{font-weight:500;color:var(--pink)}
.ban .dot{background:var(--pink)}

.verdicts small{display:block;font-family:var(--f-label);font-size:12px;letter-spacing:.03em;color:var(--muted)}
.btns{display:flex;flex-wrap:wrap;gap:10px}
.btn{font:600 14px var(--f-body);padding:11px 18px;border:0;background:var(--orange);color:var(--paper);cursor:pointer;box-shadow:4px 4px 0 var(--pink)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.mock{font-size:12px;color:var(--muted);margin:0}

footer{align-items:baseline;padding-block:4px 28px;border-top:1px solid color-mix(in srgb,var(--ink) 25%,transparent);padding-top:10px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px}
footer nav{display:flex;gap:6px;flex-wrap:wrap}
footer a{color:var(--ink);text-decoration:none}
footer a:hover,footer .fb:hover{color:var(--pink)}
footer .fb{font:inherit;color:var(--ink);background:none;border:0;padding:0;cursor:pointer}
footer .fb:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.ftoast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));translate:-50% 0;background:var(--ink);color:var(--paper);font-size:13px;padding:8px 14px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:9}
.ftoast.on{opacity:1}
footer .sep{color:var(--muted)}

.dres{margin-top:4px}
.dres .btn{text-decoration:none;display:inline-block}
.btn:disabled{opacity:.45;cursor:not-allowed}
[hidden]{display:none!important}
:root:lang(ko) body{word-break:keep-all}
:root:lang(ja) body{line-break:strict;overflow-wrap:anywhere}
@media (max-width:420px){.up h2{font-size:40px}.down h2{font-size:32px}.zone .lbl{font-size:14px}}
.kind{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font-size:14px}
.kind b{background:linear-gradient(transparent 55%,var(--yellow) 55%)}
.kind .swap{font:inherit;font-size:12px;color:var(--muted);background:none;border:0;text-decoration:underline;cursor:pointer;padding:2px}
.kind .pair{display:grid;grid-template-columns:repeat(2,minmax(0,150px));gap:12px;justify-content:center}
.kind .pair button{display:flex;flex-direction:column;gap:6px;align-items:center;padding:6px;border:0;background:none;cursor:pointer;font:600 13px var(--f-body);color:var(--ink);border-radius:6px}
.kind .pair button[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--ink);background:color-mix(in srgb,var(--ink) 7%,transparent)}
.kind .pair canvas{width:100%;aspect-ratio:1;object-fit:cover;background:var(--paper);image-rendering:auto}
.kind .pair .wait{width:100%;aspect-ratio:1;display:grid;place-items:center;font-size:12px;color:var(--muted);border:1.5px dashed var(--muted)}
.prog{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center}
.prog .bar{grid-column:1/-1;height:12px;border:2px solid var(--ink);background:var(--paper)}
.prog .bar i{display:block;height:100%;width:0;background:var(--pink);transition:width .2s}
.prog span{font-size:13px;font-variant-numeric:tabular-nums}
.prog .btn{padding:6px 12px;font-size:13px}
.done{margin:0;text-align:center;font-size:13px;font-weight:600}
a.btn{text-decoration:none;display:inline-block}

/* 넣은 사진 미리보기: 점선 상자 안을 사진으로 채우고 아래에 파일 이름 띠 */
.zone .thumb{position:absolute;inset:47px;display:flex;align-items:center;justify-content:center;padding:12px 12px 52px;background:var(--paper);z-index:0;pointer-events:none}
.zone .thumb canvas{max-width:100%;max-height:100%;width:auto;height:auto;display:block;box-shadow:0 0 0 2px var(--ink);background:repeating-conic-gradient(#e6e1d6 0 25%,#fff 0 50%) 0 0/16px 16px}
.zone .thumb .tcap{position:absolute;left:12px;right:12px;bottom:10px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:13px;line-height:1.35;color:var(--ink);text-align:center}
.zone .thumb .tcap .nm{font-family:var(--f-label);font-weight:500;letter-spacing:.02em;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zone .thumb .tcap i{font-style:normal}
.zone .thumb .tcap i:first-child{color:var(--pink);font-weight:700}
.zone .thumb .tcap i:first-child::before{content:"✓ "}
.zone.has>.dnd,.zone.has>h2,.zone.has>.dpi,.zone.has>.lbl,.zone.has>p{visibility:hidden}
.zone.pop .thumb{animation:thumbIn .35s ease-out}
@keyframes thumbIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@media (max-width:560px){.zone .thumb{inset:33px}}

/* 전/후 비교 슬라이더 */
.cmp{display:flex;flex-direction:column;gap:6px}
.cmp .ct,.cmp .ch{margin:0;text-align:center;font-size:13px;color:var(--ink)}
.cmp .ch{font-size:12px;color:var(--muted)}
.cmp .view{position:relative;width:100%;max-width:420px;margin:0 auto;aspect-ratio:1;box-shadow:0 0 0 2.5px var(--ink);overflow:hidden;touch-action:pan-y}
.cmp .view canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.cmp .view .b{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.cmp .view .hd{position:absolute;top:0;bottom:0;left:var(--x);width:3px;margin-left:-1.5px;background:var(--paper);box-shadow:0 0 0 1.5px var(--ink);pointer-events:none}
.cmp .view .hd::after{content:"◀ ▶";position:absolute;top:50%;left:50%;translate:-50% -50%;white-space:nowrap;font-size:11px;letter-spacing:-.1em;padding:6px 7px;border-radius:999px;background:var(--paper);border:2px solid var(--ink);color:var(--ink)}
.cmp .view .lb{position:absolute;top:8px;font-family:var(--f-label);font-size:12px;padding:3px 8px;background:var(--paper);border:1.5px solid var(--ink);pointer-events:none}
.cmp .view .lb.l{left:8px}.cmp .view .lb.r{right:8px;background:var(--yellow)}
.cmp .view input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}

/* 사진/그림 AI 고르기: 아이콘 단추 */
.kind .say{font-size:14px}
.kind .pair:not(.pv){grid-template-columns:repeat(2,96px)}
.kind .pair button{border:2px solid transparent}
.kind .pair:not(.pv) button{padding:8px 6px 6px;border-color:color-mix(in srgb,var(--ink) 25%,transparent);background:var(--paper)}
.kind .pair:not(.pv) button[aria-pressed="false"]{opacity:.55}
.kind .pair:not(.pv) button[aria-pressed="false"]:hover{opacity:.85}
.kind .pair button[aria-pressed="true"]{border-color:var(--ink)}
.kind .pair button svg{width:44px;height:37px;display:block}
.kind .pair button .nm{font-size:13px}
.kind .hint2{font-size:12px;color:var(--muted)}

/* 줄이기 내려받기: 키우기 단추보다 조금 작게, 너무 작지 않게 */
.dres .btns{justify-content:center}
#dSave{flex:0 1 260px;text-align:center;font-size:15px;padding:13px 22px}
@media (max-width:560px){.zone .thumb .tcap .dot{display:none}.zone .thumb .tcap i{display:block}.zone .thumb{padding-bottom:62px}}
.pp .x{font-family:var(--f-body);font-size:1.6em;font-weight:700;line-height:0;vertical-align:-.12em;margin-right:2px}
/* 종이 칸: 같은 폭 칸 대신 내용 폭으로 모아서 작은 종이 사이가 벌어지지 않게(PC) */
@media (min-width:521px){.papers{display:flex;gap:0}.papers .pp{flex-basis:0;flex-shrink:1;min-width:78px;padding-left:0;padding-right:0}}
/* 얇게: 보조 단추·사진/그림 선택 테두리 */
.btn.ghost{box-shadow:inset 0 0 0 1px #999;font-weight:500;color:#777}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px #555;color:#444}
.kind .pair:not(.pv){grid-template-columns:repeat(2,72px)}
.kind .pair:not(.pv) button{padding:8px;border-width:1px}
.kind .pair button[aria-pressed="true"]{border-width:1px;box-shadow:none}
.kind .pair:not(.pv) button[aria-pressed="true"]{border-color:var(--ink);background:color-mix(in srgb,var(--ink) 5%,var(--paper))}
.kind .pair button svg{width:46px;height:38px}
/* 키우기 단추줄: 줄이기처럼 내려받기·사진 빼기 나란히 */
.right .btns{flex-wrap:nowrap;align-items:stretch}
.right .btns .btn{white-space:nowrap}
#bMain{min-width:0;white-space:normal!important}
@media (max-width:420px){.right .btns .btn.ghost{padding:11px 12px}#bMain{padding:13px 14px;font-size:15px}}
.kind{gap:4px}
.kind .ki{display:inline-block;vertical-align:-.3em;margin-right:6px}
.kind .ki svg{width:20px;height:16px;display:block}
.kind .swap{display:inline-flex;align-items:center;font-size:12px}
.kind .swap .ki{margin-right:4px}
.kind .swap .ki svg{width:20px;height:16px}
.kind:not(:has(.pv)){flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:2px 10px}
@media (max-width:520px){.right .btns{flex-wrap:wrap}.right .btns #bMain{flex:1 1 100%}.right .btns .btn.ghost{flex:1 1 0}}
#bMain{text-wrap:balance}
#upAgain{flex:0 1 260px;text-align:center;font-size:15px;padding:13px 22px}
@media (max-width:520px){.right .btns #upAgain{flex:1 1 0}}
/* 점선 안 전/후 슬라이더 */
.zone .thumb .view{position:relative;flex:0 0 auto;max-width:100%;max-height:100%;box-shadow:0 0 0 2px var(--ink);overflow:hidden;pointer-events:auto;touch-action:pan-y;cursor:ew-resize}
.zone .thumb .view canvas{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;box-shadow:none}
.zone .thumb .view .b{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.zone .thumb .view .hd{position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:var(--paper);box-shadow:0 0 0 1px var(--ink);pointer-events:none}
.zone .thumb .view .hd::after{content:"◀ ▶";position:absolute;top:50%;left:50%;translate:-50% -50%;white-space:nowrap;font-size:10px;letter-spacing:-.1em;padding:5px 6px;border-radius:999px;background:var(--paper);border:1.5px solid var(--ink);color:var(--ink)}
.zone .thumb .view .lb{position:absolute;top:6px;font-family:var(--f-label);font-size:11px;letter-spacing:.08em;padding:2px 6px;background:var(--paper);border:1px solid var(--ink);pointer-events:none}
.zone .thumb .view .lb.l{left:6px}.zone .thumb .view .lb.r{right:6px;background:var(--yellow)}
.zone .thumb .view input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
/* 줄이기 단추줄도 한 줄로 */
.dres .btns{flex-wrap:nowrap}
#dSave{flex:1 1 auto;max-width:260px;min-width:0}
.dres .btns .btn.ghost{flex:0 0 auto;white-space:nowrap}
/* 버전 표시: IMAGE SCALER 아래 작게 */
.scw{align-self:center;display:flex;flex-direction:column;align-items:center;gap:4px}
.scw .scaler{align-self:auto}
.ver{font-family:var(--f-label);font-size:11px;letter-spacing:.12em;color:var(--muted);line-height:1}
/* 전/후 미리보기 확대 단추 */
.zone .thumb .view.zoomed{cursor:grab}
.zone .thumb .view .zm{position:absolute;right:6px;bottom:6px;display:flex;align-items:center;gap:2px;background:var(--paper);border:1px solid var(--ink);border-radius:999px;padding:2px;z-index:2}
.zone .thumb .view .zm button{width:26px;height:26px;border:0;border-radius:50%;background:transparent;font:600 16px/1 var(--f-body);color:var(--ink);cursor:pointer;padding:0}
.zone .thumb .view .zm button:hover{background:color-mix(in srgb,var(--ink) 10%,transparent)}
.zone .thumb .view .zv{font:500 11px/1 var(--f-label);min-width:24px;text-align:center}
.zone .thumb .view.zoomed{touch-action:none}