:root{
  --bg:#f5f7fb;
  --card:#ffffff;
  --text:#101828;
  --muted:#667085;
  --line:#eaecf0;
  --brand:#2e6bff;
  --brand2:#15b79e;
  --warn:#f79009;
  --danger:#f04438;

  --shadow: 0 10px 30px rgba(16,24,40,.08);
  --radius: 16px;
  --radius2: 22px;
  --focus: 0 0 0 3px rgba(46,107,255,.18);
}

[data-theme="dark"]{
  --bg:#0b1220;
  --card:#0f1a2c;
  --text:#e6e9ef;
  --muted:#a6b0c2;
  --line:#1f2a3d;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --focus: 0 0 0 3px rgba(46,107,255,.25);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  font-family:"Noto Sans KR", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  /* ✅ 사이트 전체 배경은 그누보드 테마가 관리(여기서 건드리지 않음) */
  color:var(--text);
}

.zzoa-iq-wrap{
  max-width:980px;margin:0 auto;padding:16px 16px 28px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius2);
  box-shadow:var(--shadow);
}

/* 타이틀 박스 */
.zzoa-titlebox{
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(135deg, rgba(46,107,255,.12), rgba(21,183,158,.10));
  border:1px solid var(--line);
  border-radius:var(--radius2);
  padding:12px 14px;
  box-shadow:0 6px 18px rgba(16,24,40,.06);
}
.tb-left{display:flex;align-items:center;gap:12px}
.tb-badge{
  width:40px;height:40px;border-radius:14px;
  display:grid;place-items:center;
  background:rgba(46,107,255,.16);
  border:1px solid rgba(46,107,255,.20);
}
.tb-badge i{font-size:18px;color:var(--brand)}
.tb-text h1{margin:0;font-size:18px;line-height:1.2}
.tb-text p{margin:4px 0 0;color:var(--muted);font-size:12.5px}
.tb-right{display:flex;gap:8px}
.tb-iconbtn{
  border:1px solid var(--line);
  background:rgba(255,255,255,.6);
  color:var(--text);
  width:38px;height:38px;border-radius:14px;
  display:grid;place-items:center;
  cursor:pointer;
}
[data-theme="dark"] .tb-iconbtn{background:rgba(15,26,44,.6)}
.tb-iconbtn:focus{outline:none;box-shadow:var(--focus)}

/* 아이콘 메뉴 */
.zzoa-menu{
  margin-top:10px;
  display:flex;gap:10px;flex-wrap:wrap;
}
.m-btn{
  display:flex;align-items:center;gap:8px;
  border:1px solid var(--line);
  background:var(--card);
  color:var(--text);
  border-radius:14px;
  padding:10px 12px;
  cursor:pointer;
  box-shadow:0 6px 16px rgba(16,24,40,.06);
}
.m-btn i{color:var(--brand)}
.m-btn span{font-size:13px;font-weight:600}
.m-btn:focus{outline:none;box-shadow:var(--focus)}
.m-btn[disabled]{opacity:.5;cursor:not-allowed}

/* 공유 메시지 */
.zzoa-sharemsg{
  margin-top:10px;
  display:none;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(46,107,255,.25);
  background:rgba(46,107,255,.10);
  color:var(--text);
  font-size:13px;
  line-height:1.35;
  white-space:pre-line;
}

/* 단일 컬럼 레이아웃 */
.zzoa-grid{
  margin-top:12px;
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
}

/* 카드 */
.zzoa-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius2);
  box-shadow:0 10px 24px rgba(16,24,40,.06);
  overflow:hidden;
}
.card-head{
  padding:12px 14px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-bottom:1px solid var(--line);
}
.head-title{display:flex;align-items:center;gap:8px;font-weight:800}
.head-title i{color:var(--brand)}
.head-sub{margin-top:4px;color:var(--muted);font-size:12.5px}
.head-left{display:flex;flex-direction:column}
.head-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pill{
  display:flex;align-items:center;gap:6px;
  border:1px solid var(--line);
  background:rgba(16,24,40,.03);
  padding:8px 10px;
  border-radius:999px;
  font-size:13px;
}
[data-theme="dark"] .pill{background:rgba(255,255,255,.05)}
.pill i{color:var(--muted)}
.card-body{padding:14px}
.hidden{display:none !important}

/* 인트로 */
.intro-stack{display:grid;gap:12px}
.intro-panel{
  border:1px solid var(--line);
  border-radius:18px;
  padding:12px;
  background:rgba(16,24,40,.02);
}
[data-theme="dark"] .intro-panel{background:rgba(255,255,255,.03)}
.intro-panel h3{margin:0 0 10px;font-size:14px;display:flex;align-items:center;gap:8px}
.intro-panel h3 i{color:var(--brand)}

.kv-list{display:grid;gap:8px;margin:8px 0 10px}
.kv{
  display:flex;justify-content:space-between;gap:12px;align-items:flex-start;
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 10px;
  background:rgba(255,255,255,.55);
}
[data-theme="dark"] .kv{background:rgba(15,26,44,.6)}
.kv .k{font-size:12.5px;color:var(--muted);font-weight:900}
.kv .v{font-size:13px;color:var(--text);font-weight:700}

.check-row{display:flex;align-items:center;gap:8px;margin:10px 0 4px}
.check-row label{font-size:13px;color:var(--text)}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.btn-primary,.btn-ghost{
  border-radius:14px;
  padding:11px 12px;
  cursor:pointer;
  border:1px solid var(--line);
  font-weight:800;
  display:inline-flex;align-items:center;gap:8px;
}
.btn-primary{
  background:linear-gradient(135deg, rgba(46,107,255,1), rgba(21,183,158,1));
  color:#fff;border:none;
}
.btn-ghost{background:var(--card);color:var(--text)}
.btn-primary:focus,.btn-ghost:focus{outline:none;box-shadow:var(--focus)}
.btn-ghost[disabled], .btn-primary[disabled]{opacity:.55;cursor:not-allowed}
.tiny-note{margin-top:10px;font-size:12px;color:var(--muted);line-height:1.35}

.bullets{margin:0;padding-left:18px;color:var(--text);font-size:13px;line-height:1.5}
.bullets li{margin:6px 0}
.domain-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{
  font-size:12px;
  border:1px solid var(--line);
  background:var(--card);
  padding:7px 10px;border-radius:999px;
  display:flex;align-items:center;gap:7px;
}
.chip i{color:var(--brand)}

/* 퀴즈 */
.quiz-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 10px;border-radius:999px;
  border:1px solid rgba(46,107,255,.25);
  background:rgba(46,107,255,.10);
  color:var(--text);font-weight:800;font-size:12px;
}
.tag.soft{
  border:1px solid rgba(21,183,158,.25);
  background:rgba(21,183,158,.10);
}
.quiz-actions{display:flex;gap:8px}
.iconbtn{
  width:38px;height:38px;border-radius:14px;
  border:1px solid var(--line);
  background:var(--card);
  cursor:pointer;color:var(--text);
  display:grid;place-items:center;
}
.iconbtn:focus{outline:none;box-shadow:var(--focus)}
.progressbar{
  height:10px;border-radius:999px;
  background:rgba(16,24,40,.06);
  border:1px solid var(--line);
  overflow:hidden;
  margin-bottom:12px;
}
[data-theme="dark"] .progressbar{background:rgba(255,255,255,.06)}
.bar{height:100%;width:0%;background:linear-gradient(135deg, rgba(46,107,255,1), rgba(21,183,158,1))}
.question-box{
  border:1px solid var(--line);
  border-radius:18px;
  padding:12px;
  background:rgba(16,24,40,.02);
}
[data-theme="dark"] .question-box{background:rgba(255,255,255,.03)}
.qnum{font-size:12px;color:var(--muted);font-weight:800;margin-bottom:6px}
.qtext{margin:0 0 8px;font-size:18px;line-height:1.35}
.options{display:grid;gap:10px;margin-top:10px}
.opt{
  border:1px solid var(--line);
  background:var(--card);
  border-radius:16px;
  padding:12px 12px;
  display:flex;align-items:flex-start;gap:10px;
  cursor:pointer;
}
.opt:hover{transform:translateY(-1px)}
.opt input{margin-top:3px}
.opt .otxt{font-size:14px;line-height:1.35}
.opt.selected{border-color:rgba(46,107,255,.55);box-shadow:0 0 0 3px rgba(46,107,255,.12)}

/* ✅ 하단 버튼 라인 */
.quiz-bottom{
  margin-top:12px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.quiz-nav{display:flex;gap:10px;flex-wrap:wrap}
.quiz-tools{display:flex;gap:10px;flex-wrap:wrap}

/* 점프 모달 */
.jump-modal{
  position:fixed;inset:0;
  background:rgba(0,0,0,.45);
  display:grid;place-items:center;
  padding:16px;
  z-index:9999;
}
.jump-card{
  width:min(680px, 100%);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.jump-head{
  padding:12px 14px;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--line);
}
.muted{color:var(--muted);font-size:12px;margin-left:6px}
.jump-grid{
  padding:14px;
  display:grid;
  grid-template-columns:repeat(10,1fr);
  gap:8px;
}
@media (max-width: 680px){
  .jump-grid{grid-template-columns:repeat(6,1fr)}
}
.jbtn{
  border:1px solid var(--line);
  background:var(--card);
  border-radius:14px;
  padding:10px 0;
  cursor:pointer;
  font-weight:900;
}
.jbtn.answered{border-color:rgba(21,183,158,.45);background:rgba(21,183,158,.12)}
.jbtn.flagged{border-color:rgba(247,144,9,.55);background:rgba(247,144,9,.12)}
.jbtn:focus{outline:none;box-shadow:var(--focus)}

/* 결과 */
.empty-result{display:flex;gap:12px;align-items:flex-start}
.empty-ico{
  width:46px;height:46px;border-radius:16px;
  display:grid;place-items:center;
  border:1px solid var(--line);
  background:rgba(16,24,40,.03);
}
[data-theme="dark"] .empty-ico{background:rgba(255,255,255,.05)}
.empty-ico i{color:var(--brand);font-size:18px}
.empty-txt p{margin:6px 0 0;color:var(--muted);font-size:13px;line-height:1.45}

.result-hero{
  border:1px solid var(--line);
  border-radius:18px;
  padding:12px;
  background:linear-gradient(135deg, rgba(46,107,255,.10), rgba(21,183,158,.08));
}
.result-top{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:flex-start}
.big-iq{
  font-size:44px;font-weight:1000;letter-spacing:-1px;
  color:var(--brand);
  line-height:1;
}
.big-label{font-size:12px;color:var(--muted);font-weight:800}
.badge-line{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap}
.badge{
  font-size:12px;font-weight:900;
  border-radius:999px;
  padding:7px 10px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.55);
}
[data-theme="dark"] .badge{background:rgba(15,26,44,.6)}
.badge.good{border-color:rgba(21,183,158,.35);background:rgba(21,183,158,.10)}
.badge.warn{border-color:rgba(247,144,9,.35);background:rgba(247,144,9,.10)}
.badge.high{border-color:rgba(46,107,255,.35);background:rgba(46,107,255,.10)}
.badge.danger{border-color:rgba(240,68,56,.35);background:rgba(240,68,56,.10)}

.kpi{
  display:grid;gap:8px;
  min-width: 180px;
}
.kpi .k{
  border:1px solid var(--line);
  border-radius:16px;
  padding:10px 10px;
  background:rgba(255,255,255,.55);
}
[data-theme="dark"] .kpi .k{background:rgba(15,26,44,.6)}
.k .kt{font-size:11.5px;color:var(--muted);font-weight:900}
.k .kv{font-size:14px;font-weight:1000;margin-top:2px}
.k .kv strong{color:var(--brand)}

.section{margin-top:12px}
.section h3{
  margin:0 0 8px;
  font-size:14px;
  display:flex;align-items:center;gap:8px;
}
.section h3 i{color:var(--brand)}
.subbars{display:grid;gap:10px}
.subbar{
  border:1px solid var(--line);
  border-radius:16px;
  padding:10px;
  background:rgba(16,24,40,.02);
}
[data-theme="dark"] .subbar{background:rgba(255,255,255,.03)}
.sb-top{display:flex;justify-content:space-between;gap:10px;align-items:center}
.sb-name{font-weight:1000}
.sb-val{font-size:12px;color:var(--muted);font-weight:900}
.sb-track{
  margin-top:8px;height:10px;border-radius:999px;
  background:rgba(16,24,40,.06);
  border:1px solid var(--line);
  overflow:hidden;
}
[data-theme="dark"] .sb-track{background:rgba(255,255,255,.06)}
.sb-fill{height:100%;width:0%;background:linear-gradient(135deg, rgba(46,107,255,1), rgba(21,183,158,1))}

.typebox{
  border:1px solid var(--line);
  border-radius:18px;
  padding:12px;
  background:rgba(46,107,255,.07);
}
.typebox .tname{font-size:16px;font-weight:1000;margin-bottom:6px}
.typebox .tdesc{font-size:13px;color:var(--text);line-height:1.5}
.hl{
  font-weight:1000;
  padding:2px 6px;
  border-radius:8px;
  background:rgba(46,107,255,.16);
  border:1px solid rgba(46,107,255,.18);
}
.hl2{
  font-weight:1000;
  padding:2px 6px;
  border-radius:8px;
  background:rgba(21,183,158,.16);
  border:1px solid rgba(21,183,158,.18);
}
.tipgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width: 980px){.tipgrid{grid-template-columns:1fr}}
.tip{
  border:1px solid var(--line);
  border-radius:18px;
  padding:12px;
  background:rgba(16,24,40,.02);
}
[data-theme="dark"] .tip{background:rgba(255,255,255,.03)}
.tip b{display:block;margin-bottom:6px}
.tip ul{margin:0;padding-left:18px;color:var(--text);font-size:13px;line-height:1.5}
.tip li{margin:5px 0}

.review{
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
}
.rev-head{
  padding:10px 12px;
  border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
}
.rev-body{padding:12px;display:grid;gap:10px}
.rev-item{
  border:1px solid var(--line);
  border-radius:16px;
  padding:10px;
  background:rgba(255,255,255,.55);
}
[data-theme="dark"] .rev-item{background:rgba(15,26,44,.6)}
.rev-q{font-weight:1000;margin-bottom:6px}
.rev-a{font-size:13px;line-height:1.5}
.ok{color:var(--brand2);font-weight:1000}
.no{color:var(--danger);font-weight:1000}
.explain{margin-top:6px;color:var(--muted);font-size:12.5px;line-height:1.45}

/* 푸터 */
.zzoa-footer{
  margin-top:12px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius2);
  box-shadow:0 10px 24px rgba(16,24,40,.06);
  padding:14px;
}
.foot-guide h4{margin:0 0 10px;font-size:14px;display:flex;align-items:center;gap:8px}
.foot-guide h4 i{color:var(--brand)}
.foot-guide ul{margin:0;padding-left:18px;font-size:13px;line-height:1.6}
.foot-mini{
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:11.5px;
  text-align:center;
}