.filejip-target-500kb,
.filejip-target-500kb * { box-sizing: border-box; }

.filejip-target-500kb {
    --fj-blue:#2563eb;
    --fj-blue-dark:#1d4ed8;
    --fj-navy:#0f172a;
    --fj-text:#334155;
    --fj-muted:#64748b;
    --fj-bg:#f8fafc;
    --fj-soft:#eff6ff;
    --fj-border:#e2e8f0;
    --fj-green:#15803d;
    --fj-amber:#b45309;
    width:100%;
    margin:28px auto;
    color:var(--fj-text);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR","Apple SD Gothic Neo",Arial,sans-serif;
}

.filejip-target-500kb button,
.filejip-target-500kb input { font:inherit; }

.fj500-card {
    overflow:hidden;
    max-width:900px;
    margin:0 auto;
    padding:clamp(22px,4vw,42px);
    border:1px solid var(--fj-border);
    border-radius:26px;
    background:#fff;
    box-shadow:0 18px 55px rgba(15,23,42,.07);
}

.fj500-intro { margin-bottom:26px; }
.fj500-badge {
    display:inline-flex;
    padding:7px 11px;
    border-radius:999px;
    background:var(--fj-soft);
    color:var(--fj-blue);
    font-size:12px;
    font-weight:800;
    letter-spacing:.05em;
}
.fj500-intro h2 {
    margin:13px 0 8px;
    color:var(--fj-navy);
    font-size:clamp(27px,4vw,38px);
    line-height:1.25;
    letter-spacing:-1px;
}
.fj500-intro p {
    max-width:760px;
    margin:0;
    color:var(--fj-muted);
    line-height:1.75;
}

.fj500-dropzone {
    padding:34px 22px;
    border:2px dashed #bfdbfe;
    border-radius:21px;
    background:linear-gradient(180deg,#f8fbff,#eff6ff);
    text-align:center;
    transition:border-color .18s ease,background .18s ease,transform .18s ease;
}
.fj500-dropzone:focus { outline:3px solid rgba(37,99,235,.18); outline-offset:3px; }
.fj500-dropzone.is-dragging { border-color:var(--fj-blue); background:#dbeafe; transform:scale(1.005); }
.fj500-drop-icon {
    display:flex;
    align-items:center;
    justify-content:center;
    width:66px;
    height:66px;
    margin:0 auto 15px;
    border-radius:19px;
    background:var(--fj-blue);
    color:#fff;
    font-size:14px;
    font-weight:900;
}
.fj500-dropzone strong { display:block; color:var(--fj-navy); font-size:17px; }
.fj500-dropzone > span { display:block; margin-top:6px; color:var(--fj-muted); font-size:13px; }
.fj500-choose-file {
    margin-top:18px;
    padding:12px 20px;
    border:0;
    border-radius:12px;
    background:var(--fj-blue);
    color:#fff;
    font-weight:800;
    cursor:pointer;
}
.fj500-choose-file:hover { background:var(--fj-blue-dark); }
.fj500-choose-file:disabled { opacity:.55; cursor:not-allowed; }
.fj500-file-name { margin-top:13px; color:var(--fj-muted); font-size:13px; overflow-wrap:anywhere; }

.fj500-error,
.fj500-status {
    margin-top:14px;
    padding:12px 14px;
    border-radius:12px;
    font-size:13px;
    line-height:1.55;
}
.fj500-error { background:#fef2f2; color:#b91c1c; }
.fj500-status:empty { display:none; }
.fj500-status { background:#f8fafc; color:var(--fj-muted); }

.fj500-preview-wrap {
    margin-top:20px;
    padding:15px;
    border:1px solid var(--fj-border);
    border-radius:18px;
    background:#f8fafc;
    text-align:center;
}
.fj500-preview { display:block; max-width:100%; max-height:380px; margin:0 auto; border-radius:12px; object-fit:contain; }

.fj500-auto-box {
    display:flex;
    gap:20px;
    align-items:center;
    justify-content:space-between;
    margin-top:20px;
    padding:20px 22px;
    border:1px solid var(--fj-border);
    border-radius:18px;
    background:#fff;
}
.fj500-auto-box strong { display:block; color:var(--fj-navy); font-size:15px; }
.fj500-auto-box p { margin:6px 0 0; color:var(--fj-muted); font-size:13px; line-height:1.6; }
.fj500-target-chip {
    flex:0 0 auto;
    padding:10px 13px;
    border-radius:999px;
    background:#dcfce7;
    color:#166534;
    font-size:13px;
    font-weight:900;
}

.fj500-action-row { display:flex; gap:10px; margin-top:18px; }
.fj500-process-button,
.fj500-reset-button {
    min-height:49px;
    padding:0 20px;
    border-radius:12px;
    font-weight:800;
    cursor:pointer;
}
.fj500-process-button { flex:1; border:0; background:var(--fj-blue); color:#fff; }
.fj500-process-button:hover:not(:disabled) { background:var(--fj-blue-dark); }
.fj500-process-button:disabled { opacity:.48; cursor:not-allowed; }
.fj500-reset-button { border:1px solid var(--fj-border); background:#fff; color:var(--fj-text); }

.fj500-result {
    margin-top:22px;
    padding:24px;
    border:1px solid #bfdbfe;
    border-radius:20px;
    background:#f8fbff;
}
.fj500-result-head { display:flex; gap:18px; align-items:flex-start; justify-content:space-between; }
.fj500-result-head span { color:var(--fj-blue); font-size:12px; font-weight:850; }
.fj500-result-head h3 { margin:4px 0 0; color:var(--fj-navy); font-size:21px; }
.fj500-result-message { max-width:380px; color:var(--fj-muted); font-size:13px; text-align:right; }
.fj500-result-message.is-success { color:var(--fj-green); }
.fj500-result-message.is-warning { color:var(--fj-amber); }
.fj500-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:20px; }
.fj500-stat { padding:15px; border:1px solid var(--fj-border); border-radius:13px; background:#fff; }
.fj500-stat span { display:block; color:var(--fj-muted); font-size:12px; }
.fj500-stat strong { display:block; margin-top:4px; color:var(--fj-navy); font-size:15px; overflow-wrap:anywhere; }
.fj500-download {
    display:block;
    margin-top:16px;
    padding:14px 18px;
    border-radius:13px;
    background:var(--fj-blue);
    color:#fff !important;
    font-weight:850;
    text-align:center;
    text-decoration:none !important;
}
.fj500-download:hover { background:var(--fj-blue-dark); color:#fff !important; }

.fj500-privacy-note { margin-top:20px; padding:17px 19px; border-radius:15px; background:var(--fj-bg); }
.fj500-privacy-note strong { color:var(--fj-navy); font-size:14px; }
.fj500-privacy-note p { margin:5px 0 0; color:var(--fj-muted); font-size:13px; line-height:1.65; }

@media(max-width:700px) {
    .fj500-card { border-radius:20px; }
    .fj500-auto-box { align-items:flex-start; flex-direction:column; }
    .fj500-action-row { flex-direction:column; }
    .fj500-result-head { flex-direction:column; }
    .fj500-result-message { text-align:left; }
    .fj500-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media(max-width:420px) {
    .filejip-target-500kb { margin:18px auto; }
    .fj500-card { padding:18px; }
    .fj500-dropzone { padding:27px 15px; }
    .fj500-result { padding:18px; }
    .fj500-stats { grid-template-columns:1fr; }
}