:root{
      --bg:#f3f1ee;
      --card:#ffffff;
      --text:#111;
      --muted:#666;
      --border:#e7e4df;
      --shadow: 0 18px 50px rgba(0,0,0,.07);
      --previewBg:#fbfaf7;
    }
    *{ box-sizing:border-box; }
    body{
      margin:0;
      font-family: system-ui, -apple-system, "Noto Sans KR", Segoe UI, Roboto, sans-serif;
      background: var(--bg);
      color: var(--text);
      min-height: 100vh;
      padding: 22px;
    }
    .shell{ width: min(980px, 100%); margin: 0 auto; }
    .card{
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 22px;
      box-shadow: var(--shadow);
      margin-bottom: 18px;
    }
    .hidden{ display:none !important; }

    /* Cover */
    .cover{
      min-height: 560px;
      display:flex;
      flex-direction: column;
      justify-content: center;
      gap: 14px;
      padding: 56px 48px;
    }
    .cover h1{
      margin:0;
      font-size: 44px;
      letter-spacing: -0.02em;
      line-height: 1.15;
    }
    .cover h2{
      margin:0;
      font-size: 22px;
      font-weight: 700;
      opacity:.9;
    }
    .cover p{
      margin: 8px 0 0;
      color: var(--muted);
      line-height: 1.75;
      font-size: 15px;
      white-space: pre-wrap;
    }
    .ctaWrap{ margin-top: 22px; display:flex; justify-content:center; }

    button{
      border: 1px solid var(--border);
      background: #fff;
      padding: 14px 22px;
      border-radius: 14px;
      font-weight: 900;
      cursor:pointer;
      min-width: 160px;
    }
    button:disabled{ opacity:.45; cursor:not-allowed; }

    /* 결과 페이지 버튼 공통 */
.resultBtn{
  min-width: 220px;
  padding: 16px 24px;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 900;
}

/* 메인 버튼 */
.resultBtn.primary{
  background: #111;
  color: #fff;
  border: none;
}

.resultBtn.primary:hover{
  background: #000;
}

/* 서브 버튼 */
.resultBtn.secondary{
  background: #fff;
  color: #111;
  border: 1px solid #ddd;
}

.resultBtn.secondary:hover{
  background: #f6f6f6;
}

    /* Quiz */
    .quizHeader{
      display:flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      margin-bottom: 16px;
    }
    .progressDots{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
    .dot{ width:10px; height:10px; border-radius:999px; background:#ddd; }
    .dot.active{ background:#111; opacity:.55; }
    .dot.done{ background:#111; }

    .qNo{ font-size: 18px; font-weight: 900; }
    .block{
      margin-top: 10px;
      padding: 14px 14px;
      border-radius: 14px;
      border: 1px solid var(--border);
      background: #fbfbfa;
    }
    .label{
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .02em;
      color: var(--muted);
      margin-bottom: 8px;
    }

    /* 학생 화면에서는 '질문/지문' 라벨 숨김 */
    #studentWrap .label{ display:none; }

    .text{
      white-space: pre-wrap;
      line-height: 1.7;
      font-size: 16px;
    }

    .choices{ display:grid; gap: 10px; margin-top: 14px; }
    .choice{
      display:flex;
      gap:12px;
      align-items:flex-start;
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 12px 12px;
      background: #fff;
      cursor:pointer;
    }
    .choiceNum{ width: 26px; font-weight: 900; opacity:.7; flex: 0 0 auto; }
    .choice input[type="radio"]{
      transform: scale(1.2);
      margin-top: 2px;
      flex: 0 0 auto;
    }
    .choiceText{
      white-space: pre-wrap;
      line-height: 1.6;
      flex: 1 1 auto;
    }
    .navRow{ display:flex; justify-content: space-between; gap: 10px; margin-top: 18px; }

    /* 결과 페이지 문구: 드래그 박스가 텍스트 길이만큼만 잡히게 */
  #studentWrap .resultCover p{
    display: inline-block;   /* ✅ 핵심 */
    text-align: center;
    margin: 0 0 28px;        /* 필요하면 숫자 조절 */
    }