.canvas{
	/* border:1px solid red; */
	width:100%;
	max-width:1170px;
	margin:0 auto;
	margin-top:50px;
	margin-bottom:50px;
}
@media(max-width:1200px){
	.canvas{padding:0 10px;}
}



.flex-table {

  display:flex;
  flex-direction:column;
  width:100%;
  margin-top:40px;

  border:1px solid #e6e9ef;
  border-radius:12px;
  overflow:hidden;        /* 둥근 모서리 끊김 방지 */
  background:#fff;
  font-family:'Noto Sans KR', sans-serif;
}

.flex-header{
  display:flex;
  width:100%;
  background:#fff;                 /* ← 스티키일 때 배경 불투명 */
  font-size:13px;
  font-weight:700;
  height:auto;
  border-bottom:1px solid #e6e9ef;
  position:sticky; top:0; z-index:10; /* ← z-index 올리고 */
  backdrop-filter: saturate(1.2);      /* 가벼운 보정(옵션) */
}

.flex-table > .flex-row{
  display:flex;
  width:100%;
  border-bottom:1px solid #f1f3f8;
  transition:background .15s ease;
}


.flex-cell{
  flex:1;
  padding:9px 12px;             /* <-- compact 핵심 */
  box-sizing:border-box;
  text-align:center;
  font-size:13px;
  display:flex; align-items:center; justify-content:center;
  min-width:0;                  /* 말줄임 대비 */
}

/* 지브라 */
.flex-table > .flex-row:nth-child(odd){ background:#ffffff; }
.flex-table > .flex-row:nth-child(even){ background:#f9fbff; }
.flex-table > .flex-row:hover{ background:#eef4ff; }

/* 숫자열 탭룰라(점수/평균/등수) */
.flex-row .flex-cell:nth-child(3),
.flex-row .flex-cell:nth-child(4),
.flex-row .flex-cell:nth-child(5){
  font-variant-numeric: tabular-nums;
}



.flex-header > .flex-cell:nth-child(2),
.flex-header > .flex-cell:nth-child(6),
.flex-header > .flex-cell:nth-child(7),
.flex-table  > .flex-row  .flex-cell:nth-child(2),
.flex-table  > .flex-row  .flex-cell:nth-child(6),
.flex-table  > .flex-row  .flex-cell:nth-child(7){
  justify-content: center;   /* flex 정렬 */
  text-align: center;
}

.flex-table > .flex-row .flex-cell:nth-child(1){
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.flex-table > .flex-row:last-child{ border-bottom:0; }
.flex-table > .flex-row .flex-cell:nth-child(7) {
  color: #0ea5e9;        /* 글자색 */
  font-weight: 700;      /* 강조 */
}

/*
.flex-cell button {
  padding: 0.4rem 0.8rem;
  background-color: #007acc;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.flex-cell button:hover {
  background-color: #005fa3;
}
.flex-cell .div-button {
  padding: 0.4rem 0.2rem;
  background-color: #007acc;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display:flex;
  align-items:center;
 
}

.flex-cell .div-button:hover {
  background-color: #005fa3;
}
 */

.mbr {    display: none;}
@media (max-width: 767px) {
    .mbr {display: block !important;    }
  }


  /*flex-table 수직방향================== 기존 카드 테이블 ===
.flex-table-vertical {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  font-family: 'Noto Sans KR', sans-serif;
  margin-top:40px;
}

.flex-record{
  display:flex; flex-direction:column;
  border:1px solid #e6e9ef; border-radius:12px; background:#fff; overflow:hidden;
}


.flex-record.even{ background:#fff; }
.flex-record.odd{ background:#f9fbff; }

.flex-record .flex-row{
  display:flex; align-items:stretch; gap:0;
  border-bottom:1px solid #f1f3f8; padding:0;  
}
.flex-record .flex-row:last-child{ border-bottom:0; }

.label{
  flex:0 0 110px; background:#f4f6fb; padding:9px 12px;
  border-right:1px solid #eef1f6; font-weight:700; font-size:13px;
}

.value{
  flex:1 1 auto; padding:9px 12px; min-width:0; font-size:13px;
  display:flex; align-items:center; justify-content:flex-start;
}
.value .btn{ margin-left:auto; } 
====================================================================*/


/* 주석처리 ===========
.div-button {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  background-color: #007acc;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  white-space: normal;
}

.div-button:hover {
  background-color: #005fa3;
}
*/

.canvas.mobile{display:none;}


@media(max-width:768px){
	.canvas.pc{display:none;}
	.canvas.mobile{display:block;}
}

@media (max-width:480px){
   .label{ flex:0 0 92px; font-weight: 500; }
  .value .btn{ width:100%; margin-left:0; text-align:center; }
}


/* classa-checkbox가 보이도록 강제 설정 */
.classa-checkbox {
    display: inline-block !important;
    visibility: visible !important;
    width: auto !important;
    height: auto !important;
    appearance: checkbox !important; /* 일부 브라우저에서 기본 스타일 복원 */
}

/* 전체 선택 체크박스도 보이게 */
#selectAllCheckbox {
    display: inline-block !important;
    visibility: visible !important;
    width: auto !important;
    height: auto !important;
    appearance: checkbox !important;
}
.unit1-checkbox {
    display: inline-block !important;
    visibility: visible !important;
    width: auto !important;
    height: auto !important;
    appearance: checkbox !important;
}

.palette {
    width:100%;max-width:1190px;margin:0 auto;
}

.palette .palette-inner{
    margin:0 10px;     
    padding:30px 0;
    display:flex;
    justify-content:space-between;
    align-items:center;}

  .palette .course-selection .subjectWrap{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;            /* 폭 좁을 때 자동 줄바꿈 */
  }
/* 화이트 배경 기준 모던 셀렉트 스타일 */
.palette .course-selection .subjectWrap select{
  font-size:15px;
  line-height:1;
  height:42px;                      /* 높이 통일 */
  padding:0 40px 0 14px;            /* 화살표 자리 확보 */
  border:1px solid #dfe3ea;
  border-radius:8px;
  background:#fff;
  color:#555555;
  outline:none;
  cursor:pointer;

  /* 커스텀 화살표 (SVG) */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='none'><path d='M5 7l5 5 5-5' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:14px 14px;

  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}

.palette .course-selection .subjectWrap select:hover{
  filter:brightness(.95);
}

.palette .course-selection .subjectWrap select:focus{
  border-color:#60a5fa;
  box-shadow:0 0 0 3px rgba(96,165,250,.25);  /* 파란 포커스 링 */
}

.palette .course-selection .collect-button{
  cursor:pointer;
  height:42px;                   /* 셀렉트와 높이 맞춤 */
  padding:0 16px;
  background:#ffffff;
  color:#0ea5e9;
  border:1px solid #0ea5e9;
  border-radius:8px;
  font-weight:700;
  letter-spacing:.02em;
  transition:filter .15s ease, transform .02s ease;
}
.palette .course-selection .collect-button:hover{
  background:#f0f9ff;
}
.palette .course-selection .collect-button:active{
  transform:translateY(1px);
}
.palette .course-selection .collect-button:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(14,165,233,.25); 
}

@media (max-width:768px){
  .palette .course-selection .subjectWrap select{
  font-size:14px;
  line-height:1;
  }
  .palette .course-selection .subjectWrap select, 
  .palette .course-selection .collect-button{
    height:40px;
  }
  .palette .palette-inner{
   display:flex;
   justify-content:space-between;
   align-items:flex-end;}

  .palette .course-selection .subjectWrap{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;            /* 폭 좁을 때 자동 줄바꿈 */
  justify-content: flex-end;
  }
}

@media (max-width: 480px) {
  .palette .course-selection .subjectWrap select{
  width: 100%;
  }
  .palette .palette-inner{
    margin:0px; 
}
}


/* 오답노트  다시풀기 / */
.test-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
}

/* 기록 버튼 (흰색 보조버튼) */
.btn-go1 {
  background: #fff;
  color: #0ea5e9;
  border: 1px solid #0ea5e9;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  padding: 10px 28px;
  cursor: pointer;
  transition: all 0.25s ease;
}
.btn-go1:hover {
  background: #f0f9ff;
  box-shadow: 0 4px 10px rgba(14,165,233,0.25);
}

/* 감성형 강조 버튼 */
.btn-go2 {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: linear-gradient(90deg, #0ea5e9, #38bdf8);
  color: white;
  font-size: 15px;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  padding: 9px 11px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(14,165,233,0.3);
  transition: all 0.25s ease;
  position: relative;
}

/* ⚡ 아이콘 (하얀색 + glow) */
.btn-go2::before {
  content: "⚡";
  display: inline-block;
  font-size: 20px;
  color: #fff;
  text-shadow: 0 0 8px rgba(255,255,255,0.8), 0 0 14px rgba(255,255,255,0.6);
  filter: drop-shadow(0 0 2px rgba(255,255,255,0.9));
}

/* hover 효과 */
.btn-go2:hover {
  transform: translateY(-2px);
  background: linear-gradient(90deg, #38bdf8, #0ea5e9);
  box-shadow: 0 6px 16px rgba(14,165,233,0.45);
}


@media(max-width:768px){  
  .palette {
        /* border:1px solid red; */
        flex-direction:column;
        gap:10px;
        margin-top:30px;
        padding:0 10px;
    }
  .palette .palette-inner{flex-direction:column;}
  .palette .course-selection{
        /* border:1px solid blue; */
        align-self:start;
        margin-bottom:1.5rem;
    }
  .test-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: 20px;
  }
  .btn-go1 {margin-top: 10px; font-size: 14px;   padding: 10px 28px;   cursor: pointer;   transition: all 0.25s ease; }
  .btn-go2 {  margin-top: 10px;   font-size: 14px;   box-shadow: 0 4px 12px rgba(14,165,233,0.3);   transition: all 0.25s ease;   position: relative;   }
 
}


.canvas_xnote {
    width:100%; max-width:1190px; margin:0 auto;
    padding:0 10px;
    /* border:1px solid red; */
    margin-top:40px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    align-items:center;
}


.tab-container{ width:100%; max-width:1190px; margin:0 auto; font-family:'Noto Sans KR',sans-serif; }

/* 라디오 숨김 */
.tab-list > input[type="radio"]{
  position:absolute; left:-9999px;
}

/* 탭 라벨 박스(.tab0) ==============================================*/

.tab-container {
  display: flex;
  align-items: flex-end; /* 탭과 버튼 하단선 맞추기 */
  justify-content: space-between;
  border-bottom: 1px solid #e5e7eb; /* 밑줄 유지 */
  margin-bottom: 20px;
}

.tab-list{
  display:flex;
  gap:2px;
  border-bottom: none; /* 밑줄은 tab-container에서 처리 */
}
.tab0{
  flex:0 0 140px; min-width:120px; max-width:160px;
  padding:12px 16px;
  background:#f9fafb;
  color:#555555;
  border:1px solid #e5e7eb;
  border-bottom:none;
  border-radius:8px 8px 0 0;
  font-size:15px; font-weight:400; line-height:1;
  text-align:center; cursor:pointer; transition:.15s;
}
.tab0:hover{ background:#f3f4f6; }

/* 활성 탭: input 바로 다음 label.tab0 */
.tab-list > input[type="radio"]:checked + .tab0{
  background:#fff;
  color:#0ea5e9;                  /* 포커스 색 */
  border-color:#cfd8e3;
  font-weight:600;
  box-shadow:0 -2px 0#0ea5e9 inset;
  position:relative; z-index:1; margin-bottom:-1px;
}

.tab-container .reset0 button{
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid #8e8e8e;
  background: #8e8e8e;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.tab-container .reset0 button:hover{
  background: #717171;
}
.reset0 {
  position: relative;
  z-index: 2; /* 탭보다 위로 */
  background: #fff; /* 배경 흰색으로 덮기 */
}
  
.test-sheet .tool-bin{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:12px 0; border-bottom:1px dashed #e2e8f0;
  color:#334155; font-size:14px;
}
.test-sheet .tool-bin .left{ display:flex; align-items:center; gap:8px; }
.test-sheet .tool-bin .right{ display:flex; align-items:center; gap:8px; }

/* 액션 버튼 공통 */
.test-sheet .tool-bin button{
  height:36px; padding:0 12px; border-radius:8px;
  font-weight:700; font-size:14px; cursor:pointer;
  background:#fff; color:#0ea5e9; border:1px solid #cfd8e3;
  transition:background .15s ease,border-color .15s ease,filter .15s ease;
}
.test-sheet .tool-bin button:hover{
  background:#f0f9ff; border-color:#b6d7ef;
}



@media(max-width:768px){
.tab0 {
  flex: 0 0 clamp(80px, 12vw, 140px); /* 화면 크기에 따라 자동 줄어듦 */
  min-width: 70px;
  padding: 12px 16px;
  background: #f9fafb;
  color: #555;
  border: 1px solid #e5e7eb;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  font-size: clamp(13px, 1.4vw, 15px); /* 글자도 같이 반응형 */
  text-align: center;
  cursor: pointer;
  transition: all 0.15s ease;
  }
.tab-container .reset0 button{
  height: 38px;
  color: #fff;
  font-weight: 600;
  font-size: clamp(11px, 1.4vw, 14px); /* 글자도 같이 반응형 */
}
  .tab-container .reset0{ order:2; width:100%; display:flex; justify-content:flex-end; }
  .tab-container{ display:flex; gap:10px; flex-wrap:nowrap; align-items:flex-start; }
  .tab-list{ order:1; }
  .test-sheet .tool-bin{ flex-wrap:wrap; row-gap:8px; }
  .canvas_xnote {
    margin-top:30px;
}
}

@media(max-width:480px){
}
/* 테스트 시트 =======================================================================================================*/

.canvas_xnote .test-sheet{border:1px solid #e5e7eb;width:100%;max-width:1190px;margin:0 auto; padding:30px 10px;border-radius: 10px;}
.canvas_xnote .test-sheet .tool-bin{margin-bottom:15px;display:flex;justify-content:space-between;align-items:center;}
.canvas_xnote .test-sheet .tool-bin .checked{margin-bottom:3px;color:#007acc}

/* 즐겨찾기 휴지통 버튼*/
.canvas_xnote .test-sheet .tool-bin button{
  font-size:12px;
  color:#8e8e8e;
  font-weight: 500;
  cursor:pointer; 
  border:1px solid #e5e7eb;
  border-radius:10px; 
  background:transparent;}
.canvas_xnote .test-sheet .tool-bin button:hover{background:#f3f4f6;}

/* 오답노트 왼쪽화면 ==========================*/

.boxWrap{ display:flex;justify-content:start;align-items:start;margin-top:30px;margin-bottom:50px;gap:10px;padding:20px 0; scroll-margin-top: 120px;}


  /* 체크박스 */
.boxWrap .chkBox {
  display: flex;
  align-items: flex-start;  
  justify-content: center;
  padding-top: 4px;           /* 위 여백 살짝 */
}
.boxWrap .chkBox input[type="checkbox"] {
  transform: scale(1.3);      /* ✅ 크기 키움 (1.0~1.8 사이로 조정 가능) */
  margin:3px 0px 0 8px;
  cursor: pointer;
  }


@media (max-width: 768px) {
.boxWrap .chkBox input[type="checkbox"] {
  margin:0px;
  }

}

@media (max-width: 480px) {
  .canvas_xnote .test-sheet{padding:10px;}
  .boxWrap .chkBox input[type="checkbox"] {
    transform: scale(1.2);
    margin-right: 6px;
  }
  .boxWrap{ margin-top:0px;}
  .boxWrap .chkBox { flex: none;}
}

.boxWrap .quizBox{flex:9.5;}
.boxWrap .quizBox .meta1{ font-size:18px;font-weight:bold; margin-bottom:5px;}
.boxWrap .quizBox .meta2{ font-size:16px; color:#555;}
.boxWrap .quizBox .meta3{ margin-bottom:20px;}
.boxWrap .quizBox .meta3 img{ max-width:100%; }
.boxWrap .memoBox-plus{flex:5.5;}
.boxWrap .memoBox-plus .memoBox{margin-bottom:50px; margin-left: 30px;}
.boxWrap .memoBox strong{font-size:16px; }
.boxWrap .memoBox textarea{width:100%;height:140px;margin-top:25px;}
.boxWrap .memoBox-plus .memoBox .view-answer{font-size:16px; margin-top:10px;}
.boxWrap .memoBox-plus .memoBox .view-answer a{margin-right:10px;}


.test-sheet .tool-bin .checked{ display:none !important; }
.boxWrap .quizBox .meta1{ display:none}
.boxWrap .quizBox .meta2{ display:none}
/* 체크박스 자체 스타일 */

   
@media (max-width: 768px) {
  .boxWrap .memoBox-plus .memoBox{
    margin:30px 0 30px 0;}
  .boxWrap{flex-direction:column}
  .canvas.mobile .flex-table-vertical{
    background: transparent;
    display:flex; flex-direction:column;
    gap:12px; padding:8px 10px;
  }

  /* 카드: 그림자 삭제, 플랫 보더 */
  .canvas.mobile .flex-record{
    background:#fff;
    border:1px solid #eaedf3;     /* 얇은 회색 */
    border-radius:10px;
    box-shadow:none;               /* ← 플랫 */
    overflow:hidden;
  }

  /* 행: 줄 구분선도 얇게, 배경 없음 */
  .canvas.mobile .flex-record .flex-row{
    display:flex; align-items:stretch;
    border-bottom:1px solid #f1f3f8;
    background:transparent;
  }
  .canvas.mobile .flex-record .flex-row:last-child{ border-bottom:0; }

  /* 라벨: 아주 연한 톤, 굵기 낮춤 */
  .canvas.mobile .flex-record .label{
    flex:0 0 92px;
    background:#f7f9fc;           /* 플랫 연회색 */
    border-right:1px solid #eef1f6;
    color:#374151;
    font-weight:600;               /* 500~600 */
    font-size:13px;
    padding:9px 10px;
    align-content: center;
  }

  /* 값: 흰 배경, 여백만 */
  .canvas.mobile .flex-record .value{
    flex:1 1 auto;
    background:#fff;
    color:#1f2937;
    font-size:13px;
    padding:9px 12px;
    display:flex; align-items:center; justify-content:flex-start;
  }

  /* 버튼: 전체폭, 플랫 보더/배경 */
  .canvas.mobile .flex-record .value .btn{
    width:100%; text-align:center;
    padding:10px 0;
    border-radius:8px;
    font-size:14px; font-weight:700;
  }
  .canvas.mobile .flex-record .value .btn--pri{
    background:#0ea5e9; color:#fff; border:none;
  }
  .canvas.mobile .flex-record .value .btn--pri:hover{ filter:brightness(.95); }
  .canvas.mobile .flex-record .value .btn--ghost{
    background:#fff; color:#0ea5e9; border:1px solid #bae6fd;
  }
  .canvas.mobile .flex-record .value .btn--ghost:hover{ background:#f0f9ff; }

  /* 섹션 타이틀 */
  .canvas.mobile h2{
    font-size:1.6rem; margin:0 0 10px; text-align:center;
  }
  .canvas.mobile .flex-record .flex-row:nth-child(3) .value {
    color:#0ea5e9;
    font-weight:700;  }
  .canvas {    border-color: transparent !important;  }
  .canvas :focus { outline: none !important; }
  
  .boxWrap .memoBox-plus{width: 100%;}
  .boxWrap .quizBox .meta3 img{ max-width:100%; padding-right: 0px;}

}


  /* 아주 작은 폰(<=480px) 미세조정 */
@media (max-width:480px){
    .canvas.mobile .flex-record .label{ flex:0 0 86px; font-weight:500; }
    .canvas.mobile .flex-record .value{ padding:8px 10px; }
    .boxWrap .memoBox textarea{width:100%;height:100px;margin-top:10px;}
  }

    
/* 새로운 스타일 버튼 적용 */
  .btn{
    display:inline-block;
    padding:6px 10px;
    border-radius:7px;
    font-weight:700;
    font-size:12px;
    line-height:1;
    border:1px solid transparent;
    cursor:pointer;
    transition:.2s ease;
    text-decoration:none;
    white-space:nowrap;
  }
  .btn--pri{ background:#0ea5e9; color:#fff; }
  .btn--pri:hover{ filter:brightness(.92); }
  .btn--ghost{ background:#fff; color:#0ea5e9; border-color:#cfe0ff; }
  .btn--ghost:hover{ background:#f3f7ff; }



  /* 전체체크박스 */
  #selectAllCheckbox{ 
  vertical-align:middle;
  transform: scale(1.4);       /* 크기 (1.0~1.5 사이로 취향 조절) */
  transform-origin: center;      /* 가운데 기준으로 확대 */
  margin-right: 10px;            /* 라벨과 간격 */
    /* 지원되는 브라우저에서 체크 색상 */
}
  label[for="selectAllCheckbox"]{
  color:#334155;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
}

/* 선택 개수 칩 */
.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:28px;
  padding:0 10px;
  margin-left:8px;
  border-radius:999px;
  background:#e6f4ff;          /* 연한 블루 배경 */
  color:#0a66c2;               /* 진한 블루 글자 */
  font-size:12px;
  font-weight:700;
  border:1px solid #cfe6ff;
}
.chip::before{
  content:"✔";
  font-size:12px;
  line-height:1;
}
.hidden{ display:none !important; }

/* 전체선택 라벨 정렬 보정 */
.select-all{
  display:flex; align-items:center;
}
.select-all-label{
  display:inline-flex; align-items:center; gap:8px;
  cursor:pointer;
}

/* 정답률 ===========================================================================*/
.xrow--rate .xval--rate{
  display:flex;
  align-items:center;
  gap:10px;            /* 숫자와 바 사이 간격 */
  flex:1;
}

/* 퍼센트 숫자 */
.xrow--rate .rate{
  display:flex;
  align-items:baseline;
  font-weight:600;
  color:#5a6c75;
  min-width:56px;      /* 0~100% 폭 고정 */
  font-size:14px;
}
.xrow--rate .rate em{  /* 숫자 */
  font-style:normal;
  font-size:16px;
  margin-right:2px;
}
.xrow--rate .rate i{   /* % 기호 */
  font-size:13px;
  color:#64748b;
}

/* 바(트랙/필) */
.ratebar{
  max-width:200px;
  position:relative;
  flex:1 1 auto;
  height:10px;
  background:#e5e7eb;
  border-radius:999px;
  overflow:hidden;
}

/* 바 색상 기본 파랑 */
.ratebar__fill{
  position:absolute; left:0; top:0; bottom:0;
  width:var(--p,0%);
  background:linear-gradient(90deg,#0ea5e9,#38bdf8); 
  border-radius:inherit;
  transition:width .3s ease;
}
/* 50% 미만일 땐 빨강/주황 그라데이션 */
.ratebar.is-low .ratebar__fill{
  background:linear-gradient(90deg,#ef4444,#f97316);
}

/* 모바일: 필요 시 줄바꿈 */
@media (max-width:768px){
  .xrow--rate .xval--rate{ flex-wrap:wrap; }
  .xrow--rate .rate{ min-width:auto; }
}


/* 난이도 표시 ===========================================================================*/

.stars {
  color: #0ea5e9;         /* 기본 파랑 별 */
  font-size: 16px;
  letter-spacing: 2px;
}

.level-label {
  margin-left: 5px;
  font-size: 13px;
  color: #555555;
  font-weight: 400;
}

/* '하'는 주황톤, '상'은 진파랑으로 강조 */
.stars[data-score="1"] { color: #0ea5e9; } /* 하 */
.stars[data-score="2"] { color: #0ea5e9; } /* 중 */
.stars[data-score="3"] { color: #0ea5e9; } /* 상 */


/* =========================
   우측 카드(메모 영역) 레이아웃
   ========================= */
/* 카드 자체 */

.memoBox-plus .memoBox{background:#fff; border:1px solid #8e8e8e; border-radius:12px; padding:16px 14px 18px; position:relative; }
.memoBox {
  display: flex;
  flex-direction: column;   /* 수직 정렬 */
  gap: 0px;                /* 도구영역과 본문 사이 여백 */
  background: #fff;
  border: 1px solid #eceff4;
  border-radius: 12px;
  padding: 14px;
  position: relative;
}

.memoBox .xpanel-tools {
  display: flex;
  justify-content: flex-end; 
  align-items: center;
  gap: 6px;
}

.xpanel-tools .icon-btn {
  width: 32px;
  height: 32px;
  border: 1.5px solid #d1d5db;
  border-radius: 10px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s ease;
}
.xpanel-tools .icon-btn svg {
  width: 18px;
  height: 18px;
  stroke: #64748b;
}

/* 오른쪽 상단 작은 버튼 */

.icon-btn--bookmark:hover {
  background: #f0f9ff;
  border-color: #38bdf8;
}
.icon-btn--bookmark:hover svg {
  stroke: #0ea5e9;
}
.icon-btn--trash:hover {
  background: #fff1f2;
  border-color: #fca5a5;
}
.icon-btn--trash:hover svg {
  stroke: #ef4444;
}
.icon-btn[disabled]{
  opacity:.5;
  cursor:not-allowed;
  pointer-events:none;
}

.xpanel-tools .tool-btn{
  width:28px; height:28px;
  border-radius:50%;
  border:1px solid #e5e7eb;
  background:#fff;
  font-size:14px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.xpanel-tools .tool-btn:hover{ background:#f7f7f7; }

/* 표 형태 정보영역 */
.xinfo-table{ margin-top:4px; }
.xrow{
  display:flex; align-items:center; gap:12px;
  padding:6px 0;
  border-bottom:1px solid #eef2f7; /* 줄 구분선 톤 살짝 더 선명 */
}
.xrow:last-child{ border-bottom:0; }

.xlabel{
  flex:0 0 70px;                      /* 라벨 폭 넉넉하게 */
  background:#f7f9fc;                 /* ← 연한 배경으로 구분 */
  border-right:1px solid #eef2f7;     /* 내용과 분리 라인 */
  border-radius:6px;                  /* 모서리 살짝 둥글게 */
  padding:8px 10px;                   /* 안쪽 여백 */
  font-weight:700;
  color:#475569;
  font-size:13px;
  font-weight: 400;
}
.xval{
  flex:1 1 auto;
  min-width:0;
  color:#1d1d1d;
  font-size:14px;
}

/* 난이도/정답률 줄 정렬 */
.xrow--score .xval--score{
  display:flex; align-items:center; gap:10px;
  flex-wrap:wrap;
}

/* 별 색/라벨은 이미 있으니 간격만 살짝 */
.stars{ margin-right:2px; }



/* 메모 영역 */
.xmemo .xlabel{ align-self:flex-start; }
.xmemo .xval{ display:block; }
.xmemo textarea{
  width:100%;
  min-height:120px;
  padding:10px 12px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  font-size:14px;
  resize:vertical;
  background:#fff;
}
.xmemo textarea::placeholder{ color:#9aa3af; }

/* 메모 버튼 */
.xmemo-actions{
  margin-top:10px;
  display:flex; gap:8px; flex-wrap:wrap;
  justify-content: flex-end;
}
.xmemo-actions .btn-save,
.xmemo-actions .btn-del{
  height:36px; padding:0 14px;
  border-radius:8px; border:1px solid #e5e7eb;
  background:#fff; cursor:pointer;
  font-weight:500; font-size:13px;
}
.xmemo-actions .btn-save{ color:#555555; }
.xmemo-actions .btn-save:hover{ filter:brightness(.95); }
.xmemo-actions .btn-del{ color:#555555; }
.xmemo-actions .btn-del:hover{ filter:brightness(.95); }

/* 정답/해설 링크 */
/* 퀴즈 아래 버튼 바 */
.xlinks{
  margin-top:50px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-start;     /* 왼쪽 정렬 */
}
.xlinks .link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:8px;
  font-weight:700;
  font-size:14px;
  line-height:1;
  background:#fff;
  color:#0ea5e9;
  border:1px solid #cfe0ff;
  text-decoration:none;
  transition:background .15s ease, border-color .15s ease, transform .02s ease;
}
.xlinks .link:hover{
  background:#f0f9ff;
  border-color:#b6d7ef;
  text-decoration:none;
}
.xlinks .link:active{ transform:translateY(1px); }

.reveal-panel{
  margin-top:10px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  background:#fff;
  overflow:hidden;
  max-height:0;
  opacity:0;
  transform: translateY(-4px);
  transition: max-height .25s ease, opacity .2s ease, transform .2s ease;
}
.reveal-panel.open{
  max-height:none;    /* 충분히 크게 */
  opacity:1;
  transform: translateY(0);
}
.reveal-panel .panel-inner{
  padding:12px;
  display:grid;
  grid-template-columns: 1fr;
  grid-template-rows:auto auto;
  gap:12px;
}
.reveal-panel .reveal-fig{
  margin:0; background:#fff;
  border:1px dashed #e5e7eb; border-radius:8px;
  padding:10px;
  min-height:70x;
}
.reveal-panel .reveal-fig figcaption{
  font-size:13px; font-weight:700; color:#64748b; margin-bottom:8px;
}
.reveal-panel img{ display:block; max-width:100%; width:100%; height:auto; padding-left: 8px; } /* 스케일 안전 */
.reveal-panel iframe{ display:block; width:100%; height:420px; } /* iframe 강제 보이기 */

.quizBox .reveal-panel{
  font-family: "Pretendard", "Noto Sans KR", system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple SD Gothic Neo", sans-serif;
}

/* 공통 캡션 스타일 */
.quizBox .reveal-panel .reveal-fig figcaption{
  font-weight: 500;
  margin-bottom: 8px;
}

/* 정답 캡션(첫번째 figure) */
.quizBox .reveal-panel .reveal-fig:nth-child(1) figcaption{
  font-size: 15px;
  color: #555555;          /* 파랑 */
}

/* 해설 캡션(두번째 figure) */
.quizBox .reveal-panel .reveal-fig:nth-child(2) figcaption{
  font-size: 15px;
  color: #555555;          /* 짙은 회색 */
}

/* 패널이 열렸을 때만 더 강조하고 싶다면 */
.quizBox .reveal-panel.open .reveal-fig:nth-child(1) figcaption{
  text-shadow: 0 0 1px rgba(14,165,233,.15);
}
.quizBox .reveal-panel.open .reveal-fig:nth-child(2) figcaption{
  text-shadow: 0 0 1px rgba(51,65,85,.12);
}

/* 정답 캡션 구역(이미지랑 어울리게) */
.quizBox .reveal-panel .reveal-fig.is-answer {
  text-align: left;                   /* 필요 시 center로 변경 가능 */
}

/* 캡션(정답/해설 제목) 아래 여백 줄이기 */
.quizBox .reveal-panel .reveal-fig figcaption {
  margin-bottom: 4px !important;      /* 기존 8px → 4px */
  background: #f5f5f5;                /* 선택사항: 캡션 배경 */
  padding: 4px 8px;
  border-radius: 4px;
}

/* 모바일 반응형: 라벨 폭 넓히고 줄바꿈 */
@media (max-width: 992px){
  .reveal-panel .panel-inner{ grid-template-columns: 1fr; }
}

@media (max-width: 768px){
  .xlabel{ flex-basis:72px; }         /* 태블릿 폭 */
  .xrow--score .xval--score{ gap:8px; }
  .xlinks .link{ flex:1 1 160px; text-align:center; }
  .quizBox .reveal-panel .reveal-fig:nth-child(1) figcaption{
  font-size: 12px;
  font-weight: 500;
  color: #555555;          /* 파랑 */
}

/* 해설 캡션(두번째 figure) */
  .quizBox .reveal-panel .reveal-fig:nth-child(2) figcaption{
  font-size: 12px;
  font-weight: 500;
  color: #555555;          /* 짙은 회색 */
}

}

@media (max-width: 480px){
  .xlabel{ flex-basis:66px; }         /* 작은 폰 */
  .xmemo textarea{ min-height:100px; }
  .memoBox .xpanel-tools {    top: 6px;    right: 6px;    gap: 4px;  }
  .xlinks .link{ flex:1 1 100%; padding:12px 14px; }
}

/* 상단으로 바로가기 버튼==================================================== */
.to-top{
  position:fixed;
  left:50px;
  bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  width:44px; height:44px;
  border-radius:50%;
  border:1px solid #cfe0ff;
  background:#0ea5e9;
  color:#fff;
  font-size:16px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 14px rgba(14,165,233,.35);
  opacity:0; transform:translateY(6px);
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  z-index:1000;
}
.to-top.show{ opacity:1; transform:translateY(0); pointer-events:auto; }
.to-top:active{ transform:translateY(1px); }

@media (max-width:768px){
  .to-top{
    right:12px;
    bottom:calc(16px + env(safe-area-inset-bottom, 0px));
    width:40px; height:40px;
    font-size:16px;

    /* 🔹모바일 전용 불투명 효과 */
    background:rgba(142, 142, 142, 0.552);       /* #8e8e8e + 투명도 */
    backdrop-filter:blur(8px) saturate(1.2); /* 유리 느낌 */
    -webkit-backdrop-filter:blur(8px) saturate(1.2); /* iOS 대응 */
    border:1px solid rgba(255,255,255,0.25); /* 살짝 밝은 테두리 */
    box-shadow:0 4px 18px rgba(0,0,0,0.25);  /* 부드러운 그림자 */
  }
}
.reveal-iframe{ width:100%; height:420px; border:1px dashed #d9e2ec; border-radius:10px; background:#fff; }

/* 왼쪽 warp이동 버튼==================================================== */
#jumpNav{
  position: fixed;
  left: max(50px, env(safe-area-inset-left, 0px) + 12px);
  top: 50%;
  transform: translateY(-50%);     /* 항상 같은 기준 */
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 44px;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  /* ★ transform 트랜지션 제거 → 스크롤시 흔들림 방지 */
  transition: opacity .18s ease;
}
#jumpNav.show{ 
  opacity: 1; 
  pointer-events: auto; 
}

#jumpNav .jn-btn{
  width: 44px; 
  height: 44px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e6e9ef;
  display: flex; 
  align-items: center; 
  justify-content: center;
  color: #0f172a;                 /* SVG stroke는 currentColor */
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(2,6,23,.08);
}
#jumpNav .jn-btn:hover{
  background: #f8fafc;
  border-color: #cfd8e3;
}
#jumpNav .jn-btn svg{ display:block; }

/* 작은 화면에서는 숨기고 싶다면 */
@media (max-width: 768px){
  #jumpNav{ display:none !important; }
}

.btn-danger{
  height:36px;
  padding:0 12px;
  border-radius:8px;
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  background:#ef4444;
  color:#fff;
  border:1px solid #ef4444;
  transition:filter .15s ease, opacity .15s ease;
}
.btn-danger:hover{ filter:brightness(.95); }
.btn-danger:disabled{ opacity:.6; cursor:not-allowed; }