:root{font-family:Inter,Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#252b27;background:#f5f4ef;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
header{width:100%;max-width:1200px;margin:0 auto;padding:clamp(12px,3vh,24px) 28px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;gap:10px;align-items:center;color:inherit;text-decoration:none;font-size:21px;font-weight:700;letter-spacing:-1px;white-space:nowrap}
.mark{display:grid;place-items:center;background:#375f48;color:white;width:32px;height:32px;border-radius:9px}
.beta{font-size:9px;letter-spacing:1px;border:1px solid #d5d8cd;padding:5px 7px;margin-left:7px;color:#7c8177}
.retention{font-size:12px;color:#626e61;white-space:nowrap}
.retention i{display:inline-block;width:6px;height:6px;background:#54805b;border-radius:50%;margin-right:6px}
main{width:100%;max-width:640px;flex:1;margin:0 auto;padding:clamp(8px,2vh,20px) 24px;display:flex;flex-direction:column;justify-content:center;text-align:center;min-width:0}
.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;color:#6c7966}
h1{font-size:clamp(36px,6vh,54px);letter-spacing:-3px;line-height:1.12;margin:clamp(8px,1.8vh,16px) 0}
h1 span{color:#547250}
.intro{font-size:13px;line-height:1.65;color:#7a7f75;margin:0 0 clamp(12px,2vh,20px)}
#drop{position:relative;background:#fdfdf9;border:1.5px dashed #bec7b4;border-radius:16px;padding:clamp(12px,2vh,20px) 16px;transition:.2s;min-width:0}
#drop.drag,#drop:focus-visible{border-color:#406f49;background:#edf3e7;outline:3px solid #dbe6d2}
.paste-icon{position:relative;width:38px;margin:auto;color:#748e66;font-size:34px;line-height:1}
.paste-icon span{position:absolute;right:-6px;bottom:1px;background:#e5ecd9;border:3px solid #fdfdf9;border-radius:50%;font-size:16px;width:23px;height:23px;line-height:17px}
h2{font-size:16px;margin:12px 0 10px}
#drop p{font-size:12px;color:#8a8d81;margin:10px 0}
kbd{font-family:inherit;font-size:11px;padding:3px 6px;border:1px solid #dedfd6;border-bottom-width:2px;border-radius:5px;background:#fff}
.or{margin-left:12px}
button{cursor:pointer;font:inherit;border:0}
button:focus-visible,a:focus-visible{outline:3px solid #a1ba89;outline-offset:4px}
.secondary{margin:8px 0 12px;padding:8px 16px;background:#edf0e7;color:#4f6844;border:1px solid #dce1d2;border-radius:8px;font-size:12px}
.secondary span{margin-left:16px}
small{display:block;font-size:10px;color:#9b9f93;letter-spacing:.2px}
#preview{display:block;width:100%;height:clamp(60px,22vh,200px);border-radius:8px;object-fit:contain}
#busy{position:absolute;inset:0;display:grid;place-items:center;background:#f5f4efe8;border-radius:16px;font-size:14px;color:#426048}
[hidden]{display:none!important}
#result{text-align:left;background:#eaf0e3;border:1px solid #dbe4d3;padding:12px;border-radius:12px;margin-top:10px;min-width:0}
.result-label{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:#5a7150;margin-bottom:8px}
.url-row{display:flex;gap:8px;min-width:0}
#url{min-width:0;width:0;flex:1;border:1px solid #d8dfd0;border-radius:6px;padding:8px;font-size:12px;color:#465f3c;background:#fcfff8}
#copy{border-radius:6px;background:#416447;color:white;padding:8px 12px;white-space:nowrap;font-size:12px}
#copyhint{font-size:11px;color:#73836a;margin:8px 0 0}
#status{min-height:16px;font-size:12px;line-height:1.4;color:#78836e;margin:10px 0 0;overflow-wrap:anywhere}
.details{display:flex;justify-content:center;align-items:center;gap:12px;margin:clamp(10px,2vh,20px) 0 0;font-size:11px;color:#8a8f80}
.details b{font-weight:500;color:#6e825f;margin-right:5px}
.line{width:24px;height:1px;background:#d8ddcf}
footer{width:calc(100% - 56px);max-width:1128px;margin:0 auto;border-top:1px solid #dfe1d7;padding:14px 0;display:flex;justify-content:space-between;gap:8px;font-size:10px;line-height:1.5;color:#969b8e}
@media(max-width:700px){header{padding:14px 20px}.beta{display:none}.brand{font-size:19px}main{padding:8px 20px}.details{gap:8px}.line{width:16px}footer{width:calc(100% - 40px);flex-wrap:wrap;padding:10px 0}}
@media(max-width:360px){header{padding:12px 16px}.brand{gap:6px;font-size:17px}.retention{font-size:10px}main{padding-right:16px;padding-left:16px}h2{font-size:14px}.or{margin-left:8px}.details{gap:6px;font-size:10px}.line{width:12px}footer{width:calc(100% - 32px);font-size:9px;gap:2px}}
@media(max-height:600px){header{padding-top:10px;padding-bottom:10px}main{padding-top:4px;padding-bottom:8px}h1{font-size:34px;margin:8px 0}.intro{font-size:12px;margin-bottom:10px}#drop{padding:12px}.paste-icon{font-size:28px;width:32px}h2{margin:8px 0}#drop p{margin:8px 0}.secondary{margin:4px 0 8px}.details{margin-top:10px}footer{padding-top:8px;padding-bottom:8px}}
@media(max-height:480px) and (min-width:600px){main{max-width:900px;display:grid;grid-template-columns:1fr 1.2fr;column-gap:24px;align-content:center;align-items:center}.eyebrow,h1,.intro{grid-column:1}h1{grid-row:2}.intro{grid-row:3;margin-bottom:0}#drop{grid-column:2;grid-row:1 / 4}#result{grid-column:2;grid-row:4 / 6}#status{grid-column:1;grid-row:4}.details{grid-column:1;grid-row:5}#preview{height:100px}footer{padding-top:6px;padding-bottom:6px}}