:root{
  --bg1:#fdf8f1;
  --bg2:#eef6ff;
  --card:#ffffffcc;
  --text:#1f2a37;
  --sub:#6b7280;
  --accent:#0ea5a4;
  --accent2:#2563eb;
  --line:#dbe7f5;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,Apple SD Gothic Neo,sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 400px at 10% -10%, #ffe8c7 0%, transparent 60%),
    radial-gradient(900px 500px at 100% 0%, #dff3ff 0%, transparent 55%),
    linear-gradient(160deg,var(--bg1),var(--bg2));
}
.wrap{max-width:920px;margin:26px auto;padding:0 14px}
h1{margin:0 0 8px;font-size:2rem;letter-spacing:-.3px}
.sub{margin:0 0 16px;color:var(--sub);font-weight:500}

.ad-roller{
  overflow:hidden;
  border-radius:16px;
  margin:0 0 14px;
  background:#ffffffa8;
  border:1px solid var(--line);
  backdrop-filter: blur(8px);
  box-shadow:0 12px 26px rgba(24,39,75,.10);
}
.ad-roller.bottom{margin-top:14px}
.ad-track{display:flex;gap:10px;padding:10px;min-width:max-content;will-change:transform;animation:roll-left 30s linear infinite}
.ad-track.reverse{animation:roll-right 30s linear infinite}
.ad-item{position:relative;flex:0 0 260px;height:126px;border-radius:12px;overflow:hidden;text-decoration:none}
.ad-item::before{content:'롤 분석';position:absolute;top:9px;left:9px;z-index:2;background:linear-gradient(90deg,#ef4444,#dc2626);color:#fff;font-size:.72rem;font-weight:800;padding:3px 8px;border-radius:999px;letter-spacing:.2px}
.ad-item img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.78) saturate(1.05)}
.ad-copy{position:absolute;left:9px;right:9px;bottom:9px;color:#fff;font-size:.87rem;font-weight:700;text-shadow:0 2px 8px rgba(0,0,0,.55)}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:15px;
  box-shadow:0 14px 26px rgba(20,33,80,.08);
  margin-bottom:12px;
  backdrop-filter: blur(10px);
}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
label{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:.96rem}
label small{font-weight:600;color:var(--sub);font-size:.78rem}

.control-row{grid-column:1/-1;display:grid;grid-template-columns:160px 1fr;align-items:center;gap:10px}
.control-row .label-text{text-align:left}
.control-row .field-control{justify-self:end;width:min(100%,360px)}
#efficiencyLabel small{grid-column:1;grid-row:2;color:var(--sub);font-size:.78rem;font-weight:600}
#efficiencyLabel .field-control{grid-column:2;grid-row:1 / span 2;align-self:center}

input,select,button{
  font:inherit;
  padding:11px 12px;
  border:1px solid #cfdaec;
  border-radius:12px;
  background:#fff;
}
input:focus,select:focus{outline:2px solid #bfe8e8;border-color:#8fd7d6}
input:disabled,select:disabled{background:#f3f6fb;color:#94a3b8;cursor:not-allowed}
.actions{display:flex;gap:10px}
button{
  cursor:pointer;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  color:#fff;
  border:none;
  font-weight:800;
}
button.ghost{background:#e9f0ff;color:#35517c}

.result h2{margin:0 0 8px}
.result ul{margin:0;padding-left:18px;line-height:1.8}
.guide{margin-top:8px;color:var(--sub)}
.notice{margin:8px 0 0;color:#6b7280;font-size:.9rem;font-weight:600}

.toggle-extra{
  grid-column:1/-1;
  width:100%;
  display:block;
  text-align:left;
  white-space:normal;
  line-height:1.45;
  padding:10px 12px;
  border-radius:10px;
  border:1px dashed #93c5fd;
  background:#eff6ff;
  color:#1d4ed8;
  font-weight:700;
}
.extra-distance{grid-column:1/-1;display:grid;gap:12px}
.extra-distance[hidden]{display:none !important;}

.modal-backdrop{
  position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(15,23,42,.45);z-index:1000;padding:16px;
}
.modal-backdrop.open{display:flex}
.modal-card{
  width:min(92vw,420px);background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:16px 16px 14px;box-shadow:0 20px 40px rgba(15,23,42,.25)
}
.modal-card h3{margin:0 0 8px;font-size:1.05rem}
.modal-card p{margin:0;color:#475569;line-height:1.5}
.modal-actions{margin-top:14px;display:flex;justify-content:flex-end}
.modal-actions button{min-width:88px}

@keyframes roll-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes roll-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}

@media (max-width:700px){
  .grid{grid-template-columns:1fr}
  .control-row{grid-template-columns:1fr;gap:6px}
  .control-row .field-control{justify-self:stretch;width:100%}
  .ad-item{flex-basis:220px;height:105px}
}