*{box-sizing:border-box}
html{background:#fff;color:#111}
body{margin:0;font-family:"Gulim","굴림","Dotum","돋움",Arial,sans-serif;background:#fff}
.hidden{display:none!important}
button,input,select{font:inherit}
.shell{width:min(900px,calc(100% - 28px));margin:auto;min-height:100vh}

.topbar{height:58px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ddd;font-size:12px;color:#777}
.brand{border:0;background:none;padding:0;font-weight:700;color:#111;cursor:pointer}

.hero{min-height:calc(100vh - 58px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 0}
.eyebrow{font-size:13px;color:#777;margin:0 0 14px}
.hero h1{font-size:clamp(50px,10vw,100px);line-height:.95;letter-spacing:-7px;margin:0;font-weight:900}
.hero h1 em{font-style:normal;background:#111;color:#fff;padding:0 .08em}
.hero-copy{max-width:620px;font-size:15px;line-height:1.8;color:#555;margin:28px 0}
.hero-cta,.primary{border:1px solid #111;background:#111;color:#fff;padding:15px 24px;font-weight:700;cursor:pointer}
.hero-cta{min-width:240px}
.tiny{font-size:11px;color:#aaa;margin-top:14px}

.form-view,.result-view{padding:44px 0 70px}
.step-head,.result-top{display:flex;justify-content:space-between;font-size:12px;margin-bottom:10px}
.result-top button{border:0;background:none;text-decoration:underline;cursor:pointer}

.paper{border:1px solid #111;padding:28px;box-shadow:7px 7px 0 #efefef;background:#fff}
.paper-title{text-align:center;font-size:26px;font-weight:800;padding-bottom:20px;border-bottom:2px solid #111;margin-bottom:6px}
.paper-title small{display:block;font-size:11px;color:#999;font-weight:400;margin-top:7px}

.form-section{padding:22px 0;border-bottom:1px dashed #bbb}
.section-head{display:flex;align-items:center;gap:9px;margin-bottom:15px}
.section-head b{display:inline-grid;place-items:center;width:28px;height:28px;background:#111;color:#fff;font-size:11px}
.section-head span{font-size:14px;font-weight:800}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.grid label{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:700}
.grid input,.grid select{border:1px solid #aaa;border-radius:0;padding:12px;background:#fff;min-height:45px;width:100%}
.grid input:focus,.grid select:focus{outline:2px solid #111;outline-offset:-2px}
.grid small{font-weight:400;color:#999}

.sub-title{font-size:12px;font-weight:700;margin:24px 0 10px}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:22px}
.checks label{display:flex;align-items:center;gap:8px;border:1px solid #ccc;padding:11px;font-size:13px;cursor:pointer}
.checks input{accent-color:#111}
.paper>.primary{width:100%;margin-top:4px;font-size:15px}

.loading-view{min-height:calc(100vh - 58px);display:grid;place-items:center}
.loader-card{text-align:center;width:min(560px,100%);border:1px solid #111;padding:45px 28px}
.loader-mark{width:94px;height:94px;margin:auto;display:grid;place-items:center;background:#111;color:#fff;font-weight:900;line-height:1.05}
.loader-card h2{font-size:22px;margin:24px 0 18px}
.scan{height:13px;border:1px solid #111;overflow:hidden}
.scan i{display:block;width:14%;height:100%;background:#111;animation:scan 1s linear infinite}
.loader-card p{font-size:13px;color:#666;min-height:20px}
.percent{font-size:38px;font-weight:900;margin-top:15px}
@keyframes scan{from{transform:translateX(-100%)}to{transform:translateX(800%)}}

.receipt{border:1px solid #111;padding:28px;position:relative;background:#fff}
.receipt:before,.receipt:after{content:"";position:absolute;left:0;right:0;height:8px;background:repeating-linear-gradient(90deg,#111 0 8px,#fff 8px 16px)}
.receipt:before{top:0}.receipt:after{bottom:0}
.receipt>header{text-align:center;padding:16px 0 22px;border-bottom:1px dashed #aaa}
.receipt>header span{font-size:11px;color:#777}
.receipt>header h2{font-size:24px;margin:8px 0 0}

.price-section{text-align:center;padding:30px 0}
.normal{text-decoration:line-through;color:#999;font-size:14px}
.price{font-size:clamp(44px,8vw,72px);font-weight:900;letter-spacing:-4px;margin:7px 0}
.grade{display:inline-block;border:1px solid #111;padding:7px 11px;font-size:12px;font-weight:700}

.score-section,.spec-summary{border-top:1px dashed #aaa;padding-top:22px;margin-top:4px}
.score-section h3,.spec-summary h3,.two-col h3{font-size:13px;margin:0 0 12px}
.score-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.score-card{border:1px solid #ccc;padding:11px;background:#fafafa;min-width:0}
.score-name{display:flex;justify-content:space-between;gap:4px;font-size:11px;margin-bottom:9px}
.score-name b{font-size:12px}
.score-name span{font-weight:800}
.score-bar{height:7px;border:1px solid #111;background:#fff;overflow:hidden}
.score-bar i{display:block;height:100%;background:#111}
.score-card small{display:block;color:#888;font-size:9px;line-height:1.4;margin-top:7px}

.spec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.spec-grid div{border:1px solid #ccc;padding:10px;background:#fff}
.spec-grid small{display:block;color:#777;font-size:10px;margin-bottom:5px}
.spec-grid strong{font-size:12px;line-height:1.4}

.two-col{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;border-top:1px dashed #aaa;padding-top:22px;margin-top:22px}
.reason-list{list-style:none;padding:0;margin:0}
.reason-list li{display:flex;justify-content:space-between;gap:14px;border-bottom:1px dotted #ddd;padding:9px 0;font-size:13px}
.reason-list li b{white-space:nowrap}
.reason-list li.plus b:before{content:"▲ ";font-size:9px}
.reason-list li.minus b:before{content:"▼ ";font-size:9px}

.badges{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.badges div{border:1px solid #ccc;padding:9px;background:#fafafa}
.badges small{display:block;color:#777;font-size:10px;margin-bottom:4px}
.badges strong{font-size:12px;line-height:1.35}

.dealer{margin-top:22px;border:2px solid #111;padding:18px;text-align:center;overflow:hidden}
.dealer p{font-size:11px;color:#777;margin:0 0 7px}
.dealer strong{display:block;font-size:22px}
.dealer span{display:block;color:#666;font-size:12px;margin-top:6px}
.stamp{display:inline-block;border:4px solid #111;padding:8px 13px;font-size:22px;margin-top:13px;transform:rotate(-8deg) scale(2.7);opacity:0}
.stamp.show{animation:stamp .5s cubic-bezier(.22,1.7,.36,1) forwards}
.shake{animation:shake .45s linear}

.receipt blockquote{margin:18px 0 0;background:#f7f7f7;border:1px solid #ddd;padding:14px;font-size:13px;line-height:1.6}
.receipt footer{font-size:10px;color:#aaa;text-align:center;margin-top:22px}

.actions{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:8px;margin-top:12px}
.actions button{padding:13px;border:1px solid #111;background:#fff;font-weight:700;cursor:pointer}
.actions .primary{background:#111;color:#fff}
.counter{text-align:center;font-size:12px;color:#777;margin-top:22px}

@keyframes stamp{
  0%{opacity:0;transform:rotate(-8deg) scale(2.7)}
  70%{opacity:1;transform:rotate(-8deg) scale(.85)}
  100%{opacity:1;transform:rotate(-8deg) scale(1)}
}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-8px)}
  40%{transform:translateX(8px)}
  60%{transform:translateX(-5px)}
  80%{transform:translateX(5px)}
}

@media(max-width:760px){
  .score-grid{grid-template-columns:repeat(2,1fr)}
  .score-card:last-child{grid-column:1/-1}
}

@media(max-width:650px){
  .shell{width:min(100% - 18px,900px)}
  .topbar{height:50px}
  .hero{min-height:calc(100vh - 50px);padding:35px 0}
  .hero h1{letter-spacing:-4px}
  .paper,.receipt{padding:18px 14px}
  .grid,.checks,.two-col{grid-template-columns:1fr}
  .two-col{gap:12px}
  .actions{grid-template-columns:1fr}
  .badges{grid-template-columns:1fr 1fr}
  .spec-grid{grid-template-columns:1fr 1fr}
  .paper-title{font-size:20px}
  .receipt>header h2{font-size:19px}
  .form-section{padding:18px 0}
}

@media(max-width:410px){
  .score-grid,.spec-grid,.badges{grid-template-columns:1fr}
  .score-card:last-child{grid-column:auto}
}