@charset "utf-8";
.quiz .quiz-list {display: grid;grid-template-columns: repeat(3, 1fr);gap: 20px 25px;}
.quiz .quiz-item label {position: relative;display: block;}
.quiz .quiz-item label:hover {cursor: pointer;}
.quiz .quiz-item label:hover:has(input[type="checkbox"][disabled]) {cursor: auto;}
.quiz .quiz-item .quiz-img-judge {display: none;position: absolute;width: 100%;height: auto;top: 0;left: 50%;transform: translateX(-50%);}
.quiz .quiz-item input {position: absolute;top: 10px;right: 10px;}
.quiz .quiz-inputInner {display: block;position: relative;}
.quiz input[type="checkbox"] {width: 22px;height: 22px;border: 1px solid #ccc;border-radius: 2px;background: linear-gradient(180deg, #DDD 0%, #F8F8F8 30.85%, #FFF 60.6%);}
.quiz input[type="checkbox"]:focus-visible {outline: 2px solid #000;}
.quiz input[type="checkbox"]:checked:before {content: '';position: absolute;top: 2.5px;left: 7px;transform: rotate(50deg);width: 6px;	height: 11px;border-right: 2px solid #2A344B;border-bottom: 2px solid #2A344B;}
.quiz:has(input[type="checkbox"][disabled]) .quiz-inputInner::before {content: "";display: block;width: 100%;height: 100%;position: absolute;background: rgba(255,255,255,0.6);}
.quiz .quiz-item .quiz-txt {display: none;margin-top: 8px;font-weight: 700;}
.quiz .quiz-result .quiz-result-read {font-size: 18px;}

.quiz .quiz-item.is-correct .quiz-img-correct,
.quiz .quiz-item.is-incorrect .quiz-img-incorrect,
.quiz .quiz-item label:has(input[type="checkbox"][disabled]) .quiz-txt {display: block;}
.quiz .quiz-txt__text {font-weight: normal;}

@media (max-width: 768px) {
  .quiz .quiz-list {grid-template-columns: 1fr;gap: 20px;}
}