:root { --ink:#1f2937; --muted:#6b7280; --line:#e5e7eb; --soft:#f8fafc; --accent:#165dff; --accent-dark:#0f4dd8; --warn:#c93f3f; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:linear-gradient(180deg,#f8fbff 0,#fff 420px); font-family:Inter,"Noto Sans KR","Apple SD Gothic Neo",Arial,sans-serif; }
button,input,select { font:inherit; } button { cursor:pointer; } .page-shell { width:min(960px,calc(100% - 40px)); margin:auto; padding:24px 0 64px; }
.site-header { display:flex; align-items:center; justify-content:space-between; } .brand { display:flex; align-items:center; gap:9px; color:var(--ink); text-decoration:none; font-size:18px; font-weight:800; } .brand-mark { display:grid; place-items:center; width:29px; height:29px; color:white; background:var(--accent); border-radius:9px; font-size:21px; line-height:1; }
.privacy-chip { padding:7px 11px; border:1px solid #cce4d6; border-radius:100px; background:#f1fbf4; color:#33714a; font-size:12px; font-weight:700; }
.hero { padding:76px 0 34px; text-align:center; } .eyebrow,.section-label { margin:0 0 9px; color:var(--accent); font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; } h1 { margin:0; font-size:clamp(32px,5vw,52px); line-height:1.15; letter-spacing:-.05em; } .hero-copy { max-width:510px; margin:18px auto 0; color:var(--muted); font-size:16px; line-height:1.65; }
.converter-card { overflow:hidden; border:1px solid var(--line); border-radius:20px; background:#fff; box-shadow:0 18px 42px rgba(42,73,112,.09); } .drop-zone { display:flex; min-height:270px; flex-direction:column; align-items:center; justify-content:center; gap:9px; padding:30px; border:2px dashed #bdd0fb; background:#f7faff; text-align:center; outline:none; transition:.2s; } .drop-zone:hover,.drop-zone:focus,.drop-zone.dragging { border-color:var(--accent); background:#edf4ff; } .drop-zone strong { font-size:19px; } .drop-zone span { color:var(--muted); font-size:14px; } .upload-icon { display:grid; place-items:center; width:48px; height:48px; margin-bottom:7px; border-radius:15px; background:#dbe9ff; color:var(--accent); font-size:28px; font-weight:500; }
.text-button { padding:0; border:0; color:var(--accent); background:transparent; font-weight:700; text-decoration:underline; text-underline-offset:2px; } .workspace { padding:32px; } .toolbar,.file-heading,.action-row { display:flex; align-items:center; justify-content:space-between; gap:20px; } h2 { margin:0; font-size:20px; letter-spacing:-.03em; } .secondary-button,.primary-button { border:0; border-radius:10px; font-weight:800; } .secondary-button { padding:10px 13px; color:#3059a7; background:#edf4ff; } .settings-grid { display:grid; grid-template-columns:1.1fr 1.8fr 1fr 1fr; gap:14px; margin-top:25px; padding:19px; border:1px solid var(--line); border-radius:13px; background:var(--soft); } label { min-width:0; } label span { display:flex; justify-content:space-between; margin-bottom:7px; color:#4b5563; font-size:13px; font-weight:700; } select,input[type=number] { width:100%; height:40px; padding:0 10px; border:1px solid #d4d9e1; border-radius:8px; background:#fff; color:var(--ink); } input[type=range] { width:100%; accent-color:var(--accent); } .setting-note { margin:10px 2px 27px; color:var(--muted); font-size:12px; } .file-heading { padding-bottom:12px; border-bottom:1px solid var(--line); } .danger { color:var(--warn); font-size:13px; } .file-list { display:grid; gap:10px; margin:14px 0 0; padding:0; list-style:none; } .file-row { display:flex; align-items:center; gap:12px; padding:9px; border:1px solid var(--line); border-radius:11px; } .thumbnail { display:grid; flex:0 0 48px; place-items:center; width:48px; height:48px; overflow:hidden; border-radius:7px; background:#eff3f8; } .thumbnail img { width:100%; height:100%; object-fit:cover; } .file-details { display:grid; flex:1; gap:3px; min-width:0; } .file-name { overflow:hidden; font-size:14px; text-overflow:ellipsis; white-space:nowrap; } .file-meta,.file-state { color:var(--muted); font-size:12px; } .file-state.ready { color:#33714a; font-weight:700; } .file-state.error { color:var(--warn); } .remove-button { width:29px; height:29px; border:0; border-radius:7px; color:#6b7280; background:transparent; font-size:22px; } .remove-button:hover { background:#f3f4f6; }
.action-row { margin-top:25px; padding-top:19px; border-top:1px solid var(--line); } .action-row p { margin:0; color:var(--muted); font-size:13px; } .primary-button { padding:13px 17px; color:white; background:var(--accent); box-shadow:0 5px 13px rgba(22,93,255,.23); } .primary-button:hover { background:var(--accent-dark); } .primary-button:disabled { cursor:not-allowed; background:#9dbaf7; box-shadow:none; }
.privacy-note { display:flex; justify-content:center; gap:12px; margin:28px auto 0; color:#58705f; text-align:left; } .privacy-note > span { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#eff8f1; font-size:21px; } .privacy-note strong { font-size:13px; } .privacy-note p { margin:2px 0 0; color:#7a8580; font-size:12px; }
@media (max-width:680px) { .page-shell { width:min(100% - 24px,960px); padding-top:16px; } .hero { padding:54px 0 25px; } .workspace { padding:20px; } .settings-grid { grid-template-columns:1fr 1fr; } #qualityGroup { grid-column:span 2; } .toolbar,.file-heading { align-items:flex-start; } .action-row { align-items:flex-end; } .action-row p { max-width:48%; } .drop-zone { min-height:240px; } }