@font-face {
            font-family: 'NotoSerifKR';
            src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NotoSerifKR.woff') format('woff');
            font-weight: normal;
            font-style: normal;
        }

        @font-face {
            font-family: 'Pretendard-Regular';
            src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
            font-weight: 400;
            font-style: normal;
        }
       
       body {
           font-family: 'Pretendard-Regular';font-size: 16pt;
        justify-content:center;display:flex;padding-top:60px;padding-bottom:60px;
        }                       
        .container{
            max-width:900px;
            width:95vw;
            font-family: 'Pretendard-Regular'; font-size: 16pt; line-height: 1.6;
        }  

        

        .question {
            padding: 20px;
            font-size: 16pt;
            font-family: 'NotoSerifKR';
            line-height: 1.6;
            background-size: auto;
            background-position: left top;
            background-repeat: no-repeat;
        }

        .question input[type="radio"] {
            margin-right: 10px;
            width: 15px; 
            height: 15px; 
            accent-color: #0078D6;
       }           

        .question.correct {
            background-image: url('./images/check-O.png');
        }

        .question.wrong {
            background-image: url('./images/check-X.png');
        }

        .moonje {
            font-family: 'Pretendard-Regular';
            font-size: 20pt;
            margin-bottom: 15px;
        }

        .number {
            font-family: 'Pretendard-Regular';
            font-size: 20pt;
            margin-bottom: 15px;
            margin-right: 10px;
            color: #0078D6;
            font-weight: bold;
            vertical-align: top;
            width: 40px;
        }

        .question label {
            display: block;
            margin-bottom: 10px;
            padding: 5px;
            border-radius: 10px;
        }
       
        .question label.selected {
            background-color: rgba(230, 230, 230, 0.7);
        }

        input[type="text"] {
            padding: 20px;
            width: calc(95% - 20pt);
            border-radius: 15pt;
            background-color: rgba(230, 230, 230, 0.7);
            border: none;
            margin-bottom: 15pt;
            font-family:'Pretendard-Regular';font-size: 16pt;
        }

        textarea {
            width: calc(100% - 25pt);
            height: 100px;
            font-family: 'Pretendard-Regular';
            font-size:16pt;
            border-radius:20pt;
            resize:none; 
            padding:10pt;
        }

        button  {
            background-color: #0078D4;
            color: white;
            font-size: 16pt;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            margin-right: 10px;
            align-items: center;
            gap: 8px;
        }

        button:hover {
            background-color: #005a9e;
        }