*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:linear-gradient(180deg,#eef2ff 0,#f8fafc 340px);color:#111827;font-family:Arial,"Apple SD Gothic Neo","Noto Sans KR",sans-serif}
button,input{font:inherit}
.page{width:100%;max-width:780px;margin:0 auto;padding:8px 5px 52px}
.card,.result-card{width:100%;background:#fff;border-radius:22px;box-shadow:0 14px 45px rgba(15,23,42,.09)}
.card{padding:22px 10px}
.brand{font-size:15px;font-weight:1000;color:#4f46e5}
h1{margin:8px 0 0;font-size:32px;line-height:1.2;letter-spacing:-.05em}
.lead{margin:10px 0 18px;color:#475569;line-height:1.55;font-weight:700}
.trust-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.trust-row span{padding:10px 4px;background:#f1f5f9;border-radius:10px;text-align:center;font-size:12px;font-weight:900}
.usage-box{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;margin:12px 0 18px;padding:13px;background:#111827;color:#fff;border-radius:14px}
.usage-box span{font-weight:800}.usage-box strong{letter-spacing:4px;color:#facc15}.usage-box b{font-size:14px}
.select-btn,.analyze-btn,.share-btn,.retry-btn,.save-btn{width:100%;min-height:62px;border-radius:15px;font-size:19px;font-weight:1000;cursor:pointer}
.select-btn{border:2px dashed #a5b4fc;background:#eef2ff;color:#312e81}
.analyze-btn{margin-top:14px;border:0;background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff}
.analyze-btn:disabled{background:#cbd5e1;cursor:not-allowed}
.file-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.file-name{margin:10px 2px 0;color:#64748b;font-size:14px;word-break:break-all}
.preview-wrap{margin-top:14px;border-radius:16px;overflow:hidden;background:#e2e8f0}
.preview-wrap img{display:block;width:100%;max-height:560px;object-fit:contain}
.status-box,.error-box,.limit-box{margin-top:18px;border-radius:16px;padding:18px 14px}
.status-box{background:#eef2ff;text-align:center}
.error-box{background:#fff1f2;color:#be123c;font-weight:900}
.limit-box{background:#fff7ed;text-align:center}
.spinner{width:38px;height:38px;margin:0 auto 10px;border:4px solid #c7d2fe;border-top-color:#4f46e5;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.progress{height:11px;background:#dbeafe;border-radius:999px;overflow:hidden}
#progressFill{height:100%;width:0;background:linear-gradient(90deg,#4f46e5,#8b5cf6);transition:width .45s ease}
.ad-slot{width:100%;min-height:100px;margin:24px 0;overflow:hidden}
.more-tests{display:grid;gap:9px}.more-tests a{display:block;padding:15px;border-radius:12px;background:#fff;color:#111827;text-decoration:none;font-weight:900}
.result-card{margin-top:12px;padding:18px 8px}
.result-title{text-align:center;font-size:13px;font-weight:1000;color:#64748b;letter-spacing:.12em}
.ranking-card{margin-top:14px;padding:18px 10px;border-radius:18px;background:#f8fafc;border:1px solid #e2e8f0}
.ranking-head{display:flex;justify-content:space-between;align-items:center;font-weight:1000}
.ranking-head strong{font-size:23px;color:#4f46e5}
.ranking-track{position:relative;height:26px;margin:20px 4px 8px}
.ranking-gradient{position:absolute;inset:0;border-radius:999px;background:linear-gradient(90deg,#ef4444 0%,#f97316 25%,#facc15 50%,#84cc16 72%,#22c55e 100%)}
.rank-marker{position:absolute;top:-22px;left:50%;transform:translateX(-50%);transition:left 1s ease}
.rank-marker span{font-size:27px;color:#111827}
.ranking-labels{display:flex;justify-content:space-between;font-size:11px;color:#64748b}
.rank-number{margin-top:16px;text-align:center}.rank-number strong{font-size:30px}.rank-number span{display:block;color:#64748b}
.ranking-card p{text-align:center;font-weight:900}
.nickname-card{margin:14px 0;padding:18px 10px;border-radius:18px;background:linear-gradient(135deg,#111827,#312e81);color:#fff;text-align:center}
.nickname-card span{display:block;font-size:13px;opacity:.8}.nickname-card strong{display:block;margin-top:5px;font-size:29px}
.score-hero{text-align:center;padding:14px 8px}.score-big strong{font-size:68px;line-height:1;color:#4f46e5}.score-big span{font-size:24px;font-weight:1000}
.grade-big{margin-top:8px;font-size:40px;font-weight:1000}.stars{margin-top:6px;color:#f59e0b;font-size:26px;letter-spacing:3px}.grade-label{font-weight:1000}.title-badge{display:inline-block;margin:4px auto 0;padding:9px 14px;border-radius:999px;background:#ede9fe;color:#5b21b6;font-weight:1000}
.fun-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fun-grid>div{background:#f8fafc;border:1px solid #e2e8f0;border-radius:15px;padding:14px 7px;text-align:center}
.fun-grid span{display:block;color:#64748b;font-size:12px;font-weight:900}.fun-grid strong{display:block;margin-top:6px;font-size:19px}
.section{margin-top:18px;padding:18px 11px;background:#f8fafc;border-radius:17px}.section h2{margin:0 0 12px;font-size:21px}.verdict{font-size:18px;font-weight:1000;line-height:1.65}.summary,li{line-height:1.7}
.metrics{display:grid;gap:14px}.metric-head{display:flex;justify-content:space-between;margin-bottom:6px;font-weight:900}.metric-bar{height:14px;border-radius:999px;overflow:hidden;background:#e2e8f0}.metric-fill{height:100%;border-radius:999px}
.two-col{display:grid;gap:14px}.style-grid{display:grid;gap:9px}.style-item{background:#fff;padding:14px;border-radius:12px}.style-item strong{display:block;margin-bottom:5px}
.certificate-section{margin-top:18px;padding:18px 10px;border-radius:17px;background:#111827;color:#fff}.certificate-section h2{margin:0 0 12px}.certificate-section canvas{display:block;width:100%;height:auto;border-radius:14px;background:#fff}.save-btn{margin-top:12px;border:0;background:#facc15;color:#111827}
.share-btn{margin-top:20px;border:0;background:#111827;color:#fff}.retry-btn{margin-top:10px;border:1px solid #cbd5e1;background:#fff;color:#334155}
.disclaimer{margin:20px 4px 0;color:#94a3b8;font-size:12px;line-height:1.5}
@media(min-width:700px){.page{padding-top:20px}.card,.result-card{padding-left:22px;padding-right:22px}.two-col{grid-template-columns:1fr 1fr}}