:root{
  --bg:#F4F6F9; --card:#FFFFFF; --ink:#1F2937; --ink2:#5A6472; --muted:#8B94A3;
  --line:#E4E8EE; --accent:#3B7DD8; --accent-d:#2F63AE; --danger:#C0392B;
  --radius:12px;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Malgun Gothic','Apple SD Gothic Neo','Noto Sans KR',sans-serif;
  font-size:15px; line-height:1.6; -webkit-text-size-adjust:100%;
}
.wrap{max-width:860px; margin:0 auto; padding:28px 16px 60px}
h1{font-size:22px; margin:0 0 8px; letter-spacing:-.3px}
h2{font-size:17px; margin:0 0 14px; letter-spacing:-.2px}
a{color:var(--accent); text-decoration:none}

.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; margin-bottom:16px;
}
.hero{border-top:3px solid var(--accent)}
.hero.compact{padding-bottom:16px}
.badge{
  display:inline-block; font-size:12px; font-weight:700; color:var(--accent);
  background:#EAF1FC; padding:3px 10px; border-radius:20px; margin-bottom:10px;
}
.desc{color:var(--ink2); margin:0 0 4px}
.desc.small{font-size:13px}
.foot{text-align:center; color:var(--muted); font-size:12px; margin-top:24px}

/* 입력 */
.field{display:block; margin-bottom:14px}
.lbl{display:block; font-size:13px; font-weight:700; color:var(--ink2); margin-bottom:6px}
.opt{font-weight:400; color:var(--muted)}
.req{color:var(--danger); font-style:normal}
input[type=text], input[type=password], textarea{
  width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:8px;
  font-size:15px; font-family:inherit; background:#fff; color:var(--ink);
}
input[type=text]:focus, input[type=password]:focus, textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(59,125,216,.15);
}
textarea{resize:vertical}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media(max-width:560px){.grid2{grid-template-columns:1fr}}

.btn{
  display:inline-block; background:var(--accent); color:#fff; border:none;
  padding:12px 20px; border-radius:8px; font-size:15px; font-weight:700;
  cursor:pointer; font-family:inherit;
}
.btn:hover{background:var(--accent-d)}
.btn.ghost{background:#fff; color:var(--ink2); border:1px solid var(--line)}
.btn.ghost:hover{background:#F7F9FC; color:var(--ink)}
.btn.tiny{padding:6px 12px; font-size:13px}
.btn.danger{background:var(--danger)}
.submit-card{text-align:center}
.submit-card .btn{min-width:220px}

.flash{
  background:#FEF3E8; border:1px solid #F5D9BA; color:#8A5A20;
  padding:12px 14px; border-radius:8px; margin-bottom:14px; font-size:14px;
}

/* 진행률 */
.progress{height:6px; background:var(--line); border-radius:6px; overflow:hidden; margin-top:12px}
.progress .bar{height:100%; width:0; background:var(--accent); transition:width .25s}
.progress-txt{font-size:12px; color:var(--muted); margin-top:6px; text-align:right}

/* 문항 */
.q{padding:16px 0; border-bottom:1px dashed var(--line)}
.q:last-child{border-bottom:none; padding-bottom:0}
.q.missing{background:#FFF7F6; border-left:3px solid var(--danger); padding-left:12px; margin-left:-12px}
.qtext{font-weight:700; margin-bottom:10px}
.hint{font-size:12px; color:var(--muted); margin-bottom:6px}
.opt-row{
  display:flex; align-items:center; gap:9px; padding:9px 12px; margin-bottom:6px;
  border:1px solid var(--line); border-radius:8px; cursor:pointer; background:#fff;
}
.opt-row:hover{border-color:var(--accent); background:#F8FBFF}
.opt-row input{width:17px; height:17px; accent-color:var(--accent); flex:none}
.other-input{margin-top:4px}
.scale{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.slabel{font-size:12px; color:var(--muted); flex:none}
.scale-opts{display:flex; gap:8px; flex:1; justify-content:center}
.scale-box{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:8px 0; width:52px; border:1px solid var(--line); border-radius:8px; cursor:pointer;
}
.scale-box:hover{border-color:var(--accent); background:#F8FBFF}
.scale-box input{accent-color:var(--accent)}
.scale-box span{font-size:13px; font-weight:700; color:var(--ink2)}

/* 완료 */
.done{text-align:center}
.done .check{
  width:56px; height:56px; margin:4px auto 12px; border-radius:50%;
  background:#E7F5EC; color:#2E9C58; font-size:30px; line-height:56px; font-weight:700;
}
.login{max-width:380px; margin:60px auto 0}

/* 관리자 */
.adminbar{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  flex-wrap:wrap; margin-bottom:16px;
}
.atitle{font-size:18px; font-weight:700}
.atitle .sub{font-size:13px; font-weight:400; color:var(--muted); margin-left:6px}
.adminbar nav{display:flex; gap:6px; flex-wrap:wrap}
.tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:16px}
@media(max-width:560px){.tiles{grid-template-columns:1fr}}
.tile{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px}
.tval{font-size:28px; font-weight:700; letter-spacing:-1px}
.tval.small{font-size:15px; font-weight:600; padding:8px 0}
.tlbl{font-size:12px; color:var(--muted)}

.chart-card .chead{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:12px}
.csec{font-size:12px; color:var(--muted); margin-bottom:2px}
.chead h2{margin:0; font-size:16px}
.cmeta{font-size:12px; color:var(--muted); white-space:nowrap}
.avg{display:inline-block; margin-left:6px; background:#EAF1FC; color:var(--accent-d);
     padding:2px 8px; border-radius:10px; font-weight:700}
.chart-box{position:relative; margin-bottom:12px}

.dtable{width:100%; border-collapse:collapse; font-size:14px}
.dtable th{text-align:left; color:var(--ink2); font-weight:700; font-size:13px;
           border-bottom:1px solid var(--line); padding:8px 6px; background:#FAFBFD}
.dtable td{padding:8px 6px; border-bottom:1px solid var(--line)}
.dtable .num{text-align:right}
.dtable tr:last-child td{border-bottom:none}
.dtable.meta th{width:110px; background:transparent}

.textlist{list-style:none; margin:0; padding:0}
.textlist li{padding:10px 12px; background:#FAFBFD; border:1px solid var(--line);
             border-radius:8px; margin-bottom:6px; font-size:14px}
.textlist .tc{display:inline-block; font-weight:700; color:var(--accent-d);
              margin-right:8px; font-size:12px}
.searchbar{display:flex; gap:6px; margin-bottom:14px}
.searchbar input{flex:1}