:root{
  --bg:#0f1724;
  --card:#0b1220;
  --accent:#6ee7b7;
  --muted:#94a3b8;
  --glass: rgba(255,255,255,0.03);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter, "Noto Sans KR", Arial, sans-serif;color:#e6eef8;background:
  radial-gradient(900px 600px at 10% 10%,rgba(99,102,241,0.08),transparent),
  linear-gradient(180deg,#071123,#071020 60%);}

.app{max-width:1100px;margin:36px auto;padding:22px;border-radius:14px;background:
  linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  box-shadow: 0 10px 40px rgba(2,6,23,0.7); transform:translateY(20px); opacity:0; animation:intro .7s forwards;}
@keyframes intro{to{transform:none;opacity:1}}

.header{display:flex;gap:14px;align-items:center;margin-bottom:12px}
.logo{width:56px;height:56px;border-radius:12px;display:grid;place-items:center;font-weight:800;color:var(--accent);
  background:linear-gradient(135deg,#0b1220,#122434); box-shadow:0 8px 30px rgba(2,6,23,0.6); transform:translateY(-8px); animation:float 2000ms infinite alternate;}
@keyframes float{to{transform:translateY(-12px)}}
h1{margin:0;font-size:20px}
p.sub{margin:0;color:var(--muted);font-size:13px}

/* layout */
main{display:grid;grid-template-columns:1fr 380px;gap:18px;margin-top:16px}
@media(max-width:980px){main{grid-template-columns:1fr}}

/* cards & small */
.card{background:var(--card);padding:18px;border-radius:12px}
.small{padding:12px}
.top-row{display:flex;gap:8px;margin-bottom:12px;align-items:center}
.mode-buttons{display:flex;gap:8px}
.school-select{margin-left:auto;min-width:220px}
.options-row{display:flex;gap:12px;align-items:end;justify-content:space-between;margin-bottom:12px}
.round-select{flex:1}
.normalize-btn{width:120px}

/* buttons */
.btn{padding:10px 12px;border-radius:10px;cursor:pointer;font-weight:700;border:1px solid rgba(255,255,255,0.03);
  background:linear-gradient(180deg,#0f1724,#071428); color:var(--accent); transition:transform .12s, box-shadow .12s;}
.btn:hover{transform:translateY(-5px); box-shadow:0 18px 40px rgba(2,6,23,0.6)}
.btn.primary{background:linear-gradient(90deg,#10b981,#06b6d4); color:#04201a; border:none}
.btn.ghost{background:transparent;color:var(--muted);border:1px dashed rgba(255,255,255,0.03); box-shadow:none}

/* inputs */
label{display:block;color:var(--muted);font-size:13px;margin-bottom:6px}
input[type="text"], input[type="number"]{
  width:100%; padding:8px 10px; border-radius:8px; border:1px solid rgba(255,255,255,0.03);
  background:transparent; color:inherit; outline:none;
}
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

/* subjects */
.subject{background:var(--glass);Padding:12px;border-radius:10px;margin-bottom:10px}
.subject .row{display:flex;gap:8px;align-items:center;margin-top:8px}
.subject .row label{min-width:150px;color:var(--muted);font-size:13px}

/* dropdown */
.dropdown{position:relative}
.dropdown .current{padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,0.03);display:flex;justify-content:space-between;cursor:pointer;background:transparent}
.dropdown .list{position:absolute;left:0;right:0;margin-top:8px;background:var(--card);border-radius:10px;box-shadow:0 16px 40px rgba(2,6,23,0.6);display:none;z-index:60;overflow:hidden}
.dropdown .list.show{display:block}
.dropdown .item{padding:10px;border-bottom:1px solid rgba(255,255,255,0.02);cursor:pointer}
.dropdown .item:hover{background:rgba(255,255,255,0.02)}
.caret{opacity:.7}

/* overlay */
.overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;backdrop-filter: blur(6px);z-index:80}
.overlay.show{display:flex}
.calc-card{background:rgba(7,10,20,0.7);padding:24px;border-radius:12px;text-align:center;border:1px solid rgba(255,255,255,0.03)}
.calc-title{font-weight:700;margin-bottom:8px}
.loading-track{width:260px;height:8px;background:rgba(255,255,255,0.02);border-radius:8px;overflow:hidden;margin-top:12px}
.loading-bar{height:8px;width:0%;background:linear-gradient(90deg,#06b6d4,#10b981);transition:width 900ms ease}

/* toast */
.toasts{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;gap:8px;z-index:120}
.toast{min-width:260px;padding:12px;border-radius:10px;background:#0b1220;border:1px solid rgba(255,255,255,0.03);box-shadow:0 10px 30px rgba(2,6,23,0.6);
  display:flex;gap:12px;align-items:center;justify-content:space-between;transform:translateY(16px);opacity:0;animation:toast-in .28s forwards;}
@keyframes toast-in{to{transform:none;opacity:1}}

/* ==== 전체 화면을 덮는 블러 배경 ==== */
.toast-overlay {
  position: fixed;
  inset: 0;
  backdrop-filter: blur(6px);
  background: rgba(0, 0, 0, 0.25);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  z-index: 9999;
}

.toast-overlay.active {
  opacity: 1;
  pointer-events: all;
}

/* ==== 중앙 Toast 박스 ==== */
.center-toast {
  background: var(--bg-color, #f5f5f5);   /* HTML 배경색을 그대로 사용 */
  color: #fff;                             /* 텍스트 밝은 흰색 */
  padding: 20px 28px;
  border-radius: 14px;
  font-size: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  transform: scale(0.85);
  opacity: 0;
  transition: transform 0.35s ease, opacity 0.35s ease;
}

.center-toast.show {
  transform: scale(1);
  opacity: 1;
}

.center-toast.hide {
  transform: scale(0.8);
  opacity: 0;
}
/* grade gradations */
/* ===== 등급 직사각형(그라데이션) 스타일 ===== */
.grade-rect {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:68px;
  height:40px;
  border-radius:8px;
  color:#fff;
  font-weight:900;
  letter-spacing:0.6px;
  box-shadow: 0 8px 24px rgba(2,6,23,0.4);
  transform: scale(.92);
  opacity:0;
  transition: transform .36s cubic-bezier(.16,.9,.3,1), opacity .28s ease;
}
.grade-rect.pop { transform: scale(1); opacity:1; }

/* A: 초록 */
.grade-rect.A { background: linear-gradient(90deg,#10b981,#06b6d4); }
/* B: 파랑 */
.grade-rect.B { background: linear-gradient(90deg,#3b82f6,#06b6d4); }
/* C: 노랑 */
.grade-rect.C { background: linear-gradient(90deg,#facc15,#f59e0b); color:#082032; }
/* D: 주황 */
.grade-rect.D { background: linear-gradient(90deg,#fb923c,#f97316); }
/* F: 빨강 */
.grade-rect.F { background: linear-gradient(90deg,#ef4444,#dc2626); }

/* result */
.result-card{display:flex;flex-direction:column;gap:12px;align-items:center;min-height:250px}
.result-header{text-align:center}
.result-main{text-align:center}
.final-score{font-size:28px;font-weight:800;color:var(--accent)}
.final-grade{font-size:22px;margin-top:6px}
.break-area{width:100%}
.subject-breakdown{margin-top:10px;padding:8px;border-radius:10px; background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));max-height:360px;overflow:auto}
.muted{color:var(--muted);font-size:13px}
.small{font-size:12px}
.action-row{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}