*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{color-scheme:light dark;--bg: #f7f8fa;--bg2: #ffffff;--bg3: #f1f3f6;--surface: #ffffff;--surface-hover: #f4f6f9;--border: #e5e8ec;--border-strong: #d1d6dd;--text: #191f28;--text2: #4e5968;--muted: #8b95a1;--accent: #3182f6;--accent-hover: #1b64da;--accent-soft: #e8f3ff;--accent2: #1b64da;--green: #03b26c;--green-soft: #e5f8ef;--red: #f04452;--red-soft: #ffeeee;--radius: 14px;--radius-lg: 20px;--shadow-sm: 0 1px 2px rgba(0, 23, 51, .04), 0 1px 3px rgba(0, 23, 51, .04);--shadow: 0 2px 4px rgba(0, 23, 51, .04), 0 8px 24px rgba(0, 23, 51, .06);--trans: .16s cubic-bezier(.2, .8, .2, 1);--font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif}@media (prefers-color-scheme: dark){:root{--bg: #0f1115;--bg2: #17191f;--bg3: #1e2129;--surface: #17191f;--surface-hover: #1f222a;--border: #2a2e37;--border-strong: #3a3f4a;--text: #f2f4f6;--text2: #b0b8c1;--muted: #7e8794;--accent: #4593fc;--accent-hover: #6aa8ff;--accent-soft: rgba(69, 147, 252, .14);--accent2: #6aa8ff;--green: #1fc67f;--green-soft: rgba(31, 198, 127, .14);--red: #ff5c69;--red-soft: rgba(255, 92, 105, .12);--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow: 0 8px 24px rgba(0, 0, 0, .35)}}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:15px;line-height:1.6;letter-spacing:-.01em;min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:none;background:none;font:inherit;color:inherit;letter-spacing:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}.app{overflow-x:clip;display:flex;flex-direction:column;min-height:100vh}.main-content{flex:1;width:100%;max-width:1040px;margin:0 auto;padding:0 24px 80px}.site-header{display:flex;align-items:center;gap:14px;height:60px;padding:0 max(24px,calc((100% - 1040px)/2 + 24px));background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid color-mix(in srgb,var(--border) 70%,transparent);position:sticky;top:0;z-index:100}.logo-btn{display:inline-flex;align-items:center;gap:8px;font-size:1.12rem;font-weight:800;letter-spacing:-.03em;color:var(--text);transition:opacity var(--trans)}.logo-btn:before{content:"";width:24px;height:24px;border-radius:7px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 9h10l-3-3M17 15H7l3 3'/%3E%3C/svg%3E") center / 16px no-repeat,linear-gradient(140deg,#4f9bff,#1b64da)}.logo-btn:hover{opacity:.75}.yt-dl-btn{margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:10px;background:var(--bg3);color:var(--text2);font-size:.82rem;font-weight:600;white-space:nowrap;transition:background var(--trans),color var(--trans)}.yt-dl-btn:hover{background:var(--border);color:var(--text);text-decoration:none}.site-footer{text-align:center;padding:32px 24px 40px;border-top:1px solid var(--border);color:var(--muted);font-size:.78rem;line-height:1.9}.site-footer p:first-child{color:var(--text2);font-weight:500;margin-bottom:6px}.site-footer a{color:var(--text2);text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:3px}.hero{position:relative;text-align:center;padding:56px 0 28px;container-type:inline-size}.hero-glow{position:absolute;top:0;right:-50vw;bottom:0;left:-50vw;background:radial-gradient(ellipse 50% 70% at 50% 0%,var(--accent-soft) 0%,transparent 70%);pointer-events:none;z-index:-1}.hero-title{white-space:nowrap;font-size:clamp(1.6rem,7cqi,2.75rem);font-weight:800;letter-spacing:-.045em;line-height:1.2;margin-bottom:28px}.hero-accent{color:var(--accent)}.search-wrap{position:relative;max-width:560px;margin:0 auto}.search-icon{position:absolute;left:18px;top:50%;transform:translateY(-50%);display:flex;color:var(--muted);pointer-events:none}.search-input{width:100%;height:52px;padding:0 20px 0 46px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font:inherit;font-size:.95rem;outline:none;box-shadow:var(--shadow-sm);transition:border-color var(--trans),box-shadow var(--trans)}.search-input::placeholder{color:var(--muted)}.search-input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}.cat-pills{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:4px 0 36px}.cat-pill{height:36px;padding:0 16px;border-radius:999px;background:var(--surface);border:1px solid var(--border);color:var(--text2);font-size:.86rem;font-weight:600;white-space:nowrap;transition:background var(--trans),color var(--trans),border-color var(--trans)}.cat-pill:hover{background:var(--surface-hover);color:var(--text)}.cat-pill.active{background:var(--text);border-color:var(--text);color:var(--bg2)}.cat-section{margin-bottom:44px}.cat-title{font-size:1.08rem;font-weight:700;letter-spacing:-.02em;color:var(--text);margin-bottom:14px;display:flex;align-items:center;gap:8px}.cat-icon{font-size:1.05rem}.conv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}.conv-card{display:flex;align-items:center;justify-content:center;gap:8px;height:54px;padding:0 12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);font-size:.9rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text);box-shadow:var(--shadow-sm);transition:transform var(--trans),box-shadow var(--trans),border-color var(--trans)}.conv-card:hover{border-color:color-mix(in srgb,var(--bc) 45%,var(--border));box-shadow:var(--shadow);transform:translateY(-2px)}.conv-card:active{transform:scale(.97)}.conv-from{color:var(--text2)}.conv-arrow{color:var(--muted);font-weight:400}.conv-to{color:color-mix(in srgb,var(--bc) 85%,var(--text))}.no-results{text-align:center;color:var(--muted);padding:72px 0}.home-page{position:relative}.drag-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;background:color-mix(in srgb,var(--bg) 85%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;pointer-events:none}.drag-overlay-inner{border:2px dashed var(--accent);border-radius:28px;padding:64px 88px;text-align:center;background:var(--accent-soft)}.drag-overlay-icon{font-size:2.6rem;margin-bottom:12px;color:var(--accent)}.drag-overlay-text{font-size:1.15rem;font-weight:700;color:var(--text)}.hero-dropzone{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:560px;margin:0 auto 14px;padding:36px 24px;border:1.5px dashed var(--border-strong);border-radius:var(--radius-lg);background:var(--surface);cursor:pointer;transition:border-color var(--trans),background var(--trans)}.hero-dropzone:hover,.hero-dropzone-active{border-color:var(--accent);background:var(--accent-soft)}.hero-dropzone-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--accent-soft);color:var(--accent);font-size:1.3rem;font-weight:700}.hero-dropzone-text{font-size:.92rem;font-weight:600;color:var(--text2)}.drop-suggestions{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:22px 24px 24px;margin-bottom:36px;animation:rise .25s ease-out}@keyframes rise{0%{opacity:0;transform:translateY(8px)}}.drop-suggestions-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.drop-suggestions-title{display:flex;align-items:center;gap:10px;font-size:1rem;font-weight:700;flex-wrap:wrap}.drop-ext-badge{background:var(--accent-soft);color:var(--accent);padding:3px 10px;border-radius:8px;font-size:.85rem;font-weight:700}.drop-clear-btn,.btn-reset{width:32px;height:32px;border-radius:10px;background:var(--bg3);color:var(--muted);font-size:.8rem;flex-shrink:0;display:grid;place-items:center;transition:background var(--trans),color var(--trans)}.drop-clear-btn:hover,.btn-reset:hover{background:var(--red-soft);color:var(--red)}.drop-suggestion-card{box-shadow:none;background:var(--bg3);border-color:transparent}.drop-suggestion-card:hover{background:var(--surface)}.conv-card-same{background:var(--green-soft);border-color:transparent}.conv-card-same:hover{border-color:color-mix(in srgb,var(--green) 50%,transparent);background:var(--green-soft)}.conv-card-same .conv-arrow,.conv-same-label{color:var(--green)}.conv-same-label{font-size:.8rem;font-weight:700}.zip-item-err{border-color:transparent;background:var(--red-soft)}.zip-err-label{font-size:.78rem;color:var(--red);flex-shrink:0}.convert-page{max-width:600px;margin:0 auto;padding-top:28px}.back-btn{display:inline-flex;align-items:center;height:36px;padding:0 12px 0 8px;margin:0 0 20px -8px;border-radius:10px;color:var(--text2);font-size:.9rem;font-weight:600;transition:background var(--trans),color var(--trans)}.back-btn:hover{background:var(--bg3);color:var(--text)}.convert-header{text-align:center;margin-bottom:28px}.convert-cat-pill{display:inline-block;font-size:.78rem;font-weight:600;padding:4px 12px;border-radius:999px;background:var(--bg3);color:var(--text2);margin-bottom:14px}.convert-title{font-size:clamp(1.5rem,5vw,2rem);font-weight:800;letter-spacing:-.03em;display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:10px}.ext-badge{background:color-mix(in srgb,var(--bc, var(--accent)) 12%,var(--surface));color:color-mix(in srgb,var(--bc, var(--accent)) 85%,var(--text));padding:4px 16px;border-radius:12px;font-size:.85em}.convert-arrow{color:var(--muted);font-weight:400;font-size:1.3rem}.convert-desc{color:var(--text2);font-size:.92rem}.widget{background:var(--surface);border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadow);padding:24px;display:flex;flex-direction:column;gap:16px}.dropzone{border:1.5px dashed var(--border-strong);border-radius:18px;padding:44px 20px;text-align:center;cursor:pointer;background:var(--bg3);transition:border-color var(--trans),background var(--trans)}.dropzone:hover,.dropzone.drag-over{border-color:var(--accent);background:var(--accent-soft)}.dropzone.has-file{border:1px solid var(--border);background:var(--bg3);padding:14px 16px;cursor:default}.drop-icon{display:grid;place-items:center;width:48px;height:48px;margin:0 auto 14px;border-radius:14px;background:var(--surface);box-shadow:var(--shadow-sm);color:var(--accent);font-size:1.3rem;font-weight:700}.drop-label{font-size:.98rem;font-weight:700;margin-bottom:4px}.drop-sub{font-size:.82rem;color:var(--muted)}.file-info{display:flex;align-items:center;gap:12px;text-align:left}.file-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--surface);color:var(--accent);flex-shrink:0}.file-details{flex:1;min-width:0}.file-name{display:block;font-weight:700;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-size{font-size:.8rem;color:var(--muted)}.quality-row{display:flex;align-items:center;gap:14px;font-size:.88rem;font-weight:600;color:var(--text2)}.quality-row input[type=range]{flex:1;accent-color:var(--accent)}.quality-row span{min-width:40px;text-align:right;color:var(--text);font-variant-numeric:tabular-nums}.resize-section{display:flex;flex-direction:column;gap:10px;font-size:.88rem}.resize-toggle{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--text2);cursor:pointer;-webkit-user-select:none;user-select:none}.resize-toggle input[type=checkbox]{accent-color:var(--accent);width:18px;height:18px;cursor:pointer}.resize-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.resize-input,.resize-mode{height:40px;padding:0 12px;background:var(--bg3);border:1px solid transparent;border-radius:10px;color:var(--text);font:inherit;font-size:.88rem;transition:border-color var(--trans),background var(--trans)}.resize-input{width:92px;text-align:center;font-variant-numeric:tabular-nums}.resize-mode{cursor:pointer}.resize-input:focus,.resize-mode:focus{outline:none;border-color:var(--accent);background:var(--surface)}.resize-input::placeholder{color:var(--muted)}.resize-x,.resize-px{color:var(--muted);font-weight:600}.resize-hint{color:var(--text2);font-size:.8rem;padding:10px 12px;background:var(--accent-soft);border-radius:10px}.prog-bar{height:6px;background:var(--bg3);border-radius:999px;overflow:hidden}.prog-fill{height:100%;background:var(--accent);border-radius:999px;transition:width .2s linear}.prog-fill-done{background:var(--green)}.prog-fill-err{background:var(--red)}.err-msg{background:var(--red-soft);border-radius:12px;padding:12px 16px;color:var(--red);font-size:.88rem;font-weight:500}.btn-convert,.btn-dl{width:100%;height:56px;border-radius:16px;background:var(--accent);color:#fff;font-size:1.02rem;font-weight:700;transition:background var(--trans),transform var(--trans)}.btn-convert:hover:not(:disabled),.btn-dl:hover{background:var(--accent-hover)}.btn-convert:active:not(:disabled),.btn-dl:active{transform:scale(.98)}.btn-convert:disabled{opacity:.45;cursor:not-allowed}.dl-auto-msg{display:flex;align-items:center;justify-content:center;padding:16px;border-radius:14px;background:var(--green-soft);color:var(--green);font-weight:700;font-size:.95rem}.btn-reset-full,.btn-secondary{height:48px;padding:0 18px;border-radius:14px;background:var(--bg3);color:var(--text2);font-size:.92rem;font-weight:600;transition:background var(--trans),color var(--trans)}.btn-reset-full{width:100%}.btn-secondary{height:40px;font-size:.86rem}.btn-reset-full:hover,.btn-secondary:hover{background:var(--border);color:var(--text)}.result-area{display:flex;flex-direction:column;gap:10px;border-radius:var(--radius);transition:box-shadow var(--trans)}.result-area.drag-over-result{box-shadow:0 0 0 2px var(--accent)}.zip-header{font-size:.9rem;font-weight:600;color:var(--text2)}.zip-list{list-style:none;display:flex;flex-direction:column;gap:6px;max-height:300px;overflow-y:auto}.zip-item{display:flex;align-items:center;gap:10px;background:var(--bg3);border:1px solid transparent;border-radius:12px;padding:10px 12px 10px 14px;font-size:.85rem}.zip-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}.zip-size{color:var(--muted);flex-shrink:0;font-variant-numeric:tabular-nums}.btn-dl-small{flex-shrink:0;height:30px;padding:0 12px;background:var(--accent-soft);border-radius:8px;color:var(--accent);font-size:.8rem;font-weight:700;transition:background var(--trans)}.btn-dl-small:hover{background:color-mix(in srgb,var(--accent) 22%,transparent)}.convert-page:has(.viewer-pages){max-width:860px}.viewer-loading{display:flex;flex-direction:column;align-items:center;gap:16px;padding:64px 0;color:var(--text2);font-size:.92rem}.spinner{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.viewer-toolbar{position:sticky;top:72px;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 8px 16px;margin-bottom:20px;background:color-mix(in srgb,var(--surface) 88%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-sm)}.viewer-meta{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.88rem;font-weight:600;color:var(--text2)}.viewer-pages{display:flex;flex-direction:column;align-items:center;gap:20px}.viewer-page{width:100%;background:#fff;border-radius:6px;box-shadow:var(--shadow);overflow:hidden}.viewer-page svg{display:block;width:100%;height:auto}@media (max-width: 600px){.site-header{height:54px;padding:0 16px}.main-content{padding:0 16px 56px}.hero{padding:32px 0 20px}.hero-dropzone{padding:28px 16px}.cat-pills{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;margin:0 -16px;padding:4px 16px 28px;scrollbar-width:none}.cat-pills::-webkit-scrollbar{display:none}.conv-grid{grid-template-columns:repeat(2,1fr);gap:8px}.widget{padding:16px;border-radius:20px}.drop-suggestions{padding:18px 16px}.convert-title{gap:8px}.viewer-toolbar{top:62px}}@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}