:root {
        --a4-width-mm: 210mm;
        --a4-height-mm: 297mm;
        --a4-ratio: 210 / 297;
    }

    /* 기본 스타일 */
    body {
        margin: 0;
        padding: 0;
        font-family: 'Segoe UI', sans-serif;
        font-size: clamp(13px, 1.2vw, 16px); /* 크기 자동 조정 */
        background: #f2f2f2;
    }
    .page {
        margin: auto;
        background: #fff;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
        box-sizing: border-box;
        overflow: hidden; /* 넘치는 콘텐츠 잘림 */
        padding: 30px;
        padding-top: 110px; /* 헤더 공간을 위해 상단 패딩 추가 */
        width: 100%;
        max-width: 900px;
        aspect-ratio: var(--a4-ratio);
        height: auto;
        position: relative; /* 자식 요소인 헤더의 absolute 포지셔닝을 위한 기준점 */
    }

    /* Header and Buttons */
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 30px 0px; /* 좌우 패딩을 .page와 동일하게 설정 */
        position: absolute; /* .page 내부에 절대 위치 */
        top: 0;
        left: 0;
        right: 0;
        background: #fff; /* 헤더 배경색 지정 */
        z-index: 10; /* 콘텐츠 위에 오도록 z-index 설정 */
        border-bottom: 1px solid #eee; /* 하단 구분선 */
    }

    .header-logo {
        height: 80px; /* 로고 이미지 높이 조정 */
        max-width: 150px; /* 로고 이미지 최대 너비 */
        object-fit: contain; /* 이미지 비율 유지 */
    }

    .header-right {
        display: flex;
        align-items: center;
        gap: 20px; /* QR 코드와 버튼 그룹 사이 간격 */
    }

    /* QR 코드 컨테이너: PC/모바일에서는 숨김 */
    .qr-code-container {
        display: none; /* 기본적으로 숨김 (PC/모바일에서 보이지 않음) */
        flex-direction: column;
        align-items: center;
        text-align: center;
        font-size: 11px;
        color: #666;
    }

    .qr-code-container img {
        width: 68px; /* QR 코드 크기 조정 */
        height: 68px;
        display: block; /* 이미지 하단 공백 제거 */
    }

    .header-buttons {
        display: flex;
        gap: 15px; /* 버튼 간 간격 */
    }

    .icon-button {
        background: none;
        border: none;
        cursor: pointer;
        color: #555;
        display: flex;
        flex-direction: column; /* 아이콘과 텍스트를 세로로 배치 */
        align-items: center;
        justify-content: center;
        padding: 5px 10px; /* 버튼 내부 패딩 조정 */
        border-radius: 4px;
        transition: background-color 0.2s ease;
        font-size: 13px; /* 버튼 텍스트 크기 */
        white-space: nowrap; /* 텍스트 줄바꿈 방지 */
    }

    .icon-button .material-icons {
        font-size: 24px; /* 아이콘 크기 */
        margin-bottom: 3px; /* 아이콘과 텍스트 사이 간격 */
    }

    .icon-button:hover {
        background-color: #f0f0f0;
    }

    .icon-button:active {
        background-color: #e0e0e0;
    }

    /* 문제 레이아웃을 위한 섹션 */
    section {
        display: flex;
        flex-wrap: wrap; /* 내용이 넘치면 다음 줄로 이동 */
        margin: 0;
        justify-content: flex-start; /* 항목을 시작점에 정렬하여 래핑하기 쉽게 합니다. */
        gap: 40px 20px; /* 문제 레이아웃 간의 세로 및 가로 간격 */
        padding-bottom: 20px; /* 섹션 하단에 약간의 패딩 추가 */
    }

    section > div.layout {
        display: flex;
        justify-content: center;
        align-items: flex-start; /* 각 레이아웃 div 내에서 항목을 상단에 정렬 */
        box-sizing: border-box;
        width: calc(33.33% - 20px); /* 가로 간격을 고려하여 3열로 배치 */
        min-width: 250px; /* 지나치게 좁아지는 것을 방지하기 위한 최소 너비 */
		min-height: 200px;
    }

    table {
        border-collapse: collapse;
        text-align: center;
        font-size: 12px;
        margin-top: 5px; /* 원형 숫자 아래 테이블에 작은 여백 추가 */
    }

    td {
        border: 0.01rem solid #9a878757;
        /* padding: 1%; */
    }
    td.top--line {
        border-top: 2px solid #786b6b7a;
    }
    td.bottom--line {
        border-bottom: 2px solid #786b6b7a;
    }

    .cell.no-border{
        border: 0;
    }
    .cell {
        width: 1.9rem;
        height: 1.9rem;
        font-size: 1.5em;
        text-align: center;
    }
    .cell.result{
        color:#4c8bd9;
        font-weight: 700;
    }

    .circle-number {
        display: inline-block;
        background-color: #4c8bd9;
        color: #ffffff;
        width: 0.9rem;
        height: 0.9rem;
        text-align: center;
        border-radius: 50%;
        font-weight: bold;
        font-size: 0.6rem;
        margin: 6px 5px 0 0;
        line-height: 0.9rem; /* 원 안 텍스트 세로 중앙 정렬 */
    }
    .none_nu { /* 이 클래스는 circle-number의 색상을 덮어쓸 수 있으니 의도 확인 필요 */
        /* color: #666161; */
    }
	.selectbox{
		display: flex;
		justify-content: center;
		margin: 0 auto 5px;
	}
	select.select{
		width: 10rem;
		height: 60px;
		text-align: center;
		border: 1px dotted #000000;
	}
    /* 모바일 스타일: 한 줄에 3개씩 표시 및 td/폰트 크기 조정 */
    @media screen and (max-width: 799px) {
        .page {
            width: 100vw;
            height: 100dvh;
            aspect-ratio: auto;
            max-width: none;
            padding: 10px; /* 모바일 전체 패딩 조정 */
            padding-top: 60px; /* 모바일 헤더 공간을 위해 상단 패딩 조정 */
            font-size: 12px; /* 모바일 기본 폰트 크기 조정 */
        }
        .header {
            padding: 5px 10px; /* 모바일 헤더 패딩 조정 */
        }
        .header-logo {
            height: 45px; /* 모바일 로고 높이 조정 */
            max-width: 80px;
        }
        .header-buttons {
            gap: 5px; /* 모바일 버튼 간 간격 */
        }
        .icon-button {
            padding: 2px 3px; /* 모바일 버튼 내부 패딩 */
            font-size: 10px; /* 모바일 버튼 텍스트 크기 */
        }
        .icon-button .material-icons {
            font-size: 16px; /* 모바일 아이콘 크기 */
            margin-bottom: 0px;
        }
        /* 모바일에서는 텍스트 숨김 */
        .icon-button span:not(.material-icons) {
            /* display: none; */
        }
		.selectbox{
			margin: 5px auto 5px;
		}
		select.select{
			width: 10rem;
			height: 20px;
			text-align: center;
			border: 0;
			border-bottom: 1px dotted #000000;
		}
        /* 모바일 문제 레이아웃: 한 줄에 3개씩 */
        section {
            justify-content: space-between; /* 항목을 고르게 분배 */
            gap: 15px 5px; /* 세로 10px, 가로 5px 간격 */
        }
        section > div.layout {
            width: calc(33.33% - 10px); /* 가로 5px 간격을 고려하여 3열로 배치 */
            min-width: unset; /* 모바일에서는 최소 너비 제한 해제 */
            flex-shrink: 0; /* 공간 부족 시 줄어들지 않도록 함 */
			min-height: 130px; 
        }

        /* td 및 폰트 크기 모바일 조정 */
        table {
            font-size: 8px; /* 모바일 테이블 기본 폰트 크기 */
        }
        .cell {
            width: 1.2rem; /* 모바일 셀 너비 더 줄이기 */
			height: 1.2rem; /* 모바일 셀 높이 더 줄이기 */
			font-size: 0.8rem; /* 모바일 셀 내 폰트 크기 더 줄이기 */
        }
        .circle-number {
            width: 0.7rem; /* 모바일 원형 숫자 너비 */
            height: 0.7rem; /* 모바일 원형 숫자 높이 */
            font-size: 0.45rem; /* 모바일 원형 숫자 폰트 크기 */
            line-height: 0.7rem; /* 모바일 원형 숫자 세로 중앙 정렬 */
            margin: 4px 2px 0 0; /* 모바일 원형 숫자 간격 조정 */
			border-radius: 0%;
        }
    }

    /* 인쇄용 스타일 */
    @media print {
        body {
            background: #fff;
            margin: 0;
        }
        .page {
            width: var(--a4-width-mm);
            height: var(--a4-height-mm);
			padding: 0;
            padding-top: 27mm; /* 헤더 공간 고려 */
            padding-bottom: 15mm;
            /* padding-left: 15mm; */
            /* padding-right: 15mm; */
            box-shadow: none;
            overflow: hidden;
            aspect-ratio: auto;
            page-break-after: always; /* 각 페이지 인쇄 후 페이지 넘김 */
        }
        .header {
            padding: 0px 30px 0px; /* 좌우 패딩을 .page와 동일하게 설정 */
            position: absolute; /* .page 내부에 절대 위치 */
            top: 0;
            left: 0;
            right: 0;
        }
        /* 인쇄 시 버튼 그룹 숨김 */
        .header-buttons , .selectbox{
            display: none !important;
        }

        /* 인쇄 시 QR 코드를 보이도록 설정 */
        .qr-code-container {
            display: flex !important; /* display: none;을 무시하고 보이도록 설정 */
            position: absolute; /* 헤더 내부에 위치 */
            top: 2mm; /* 헤더 상단에서 위치 */
            right: 0mm; /* 헤더 오른쪽에서 위치 */
            z-index: 20;
            background: #fff;
            padding: 1mm; /* QR 코드 주변 여백 줄임 */
            border: 0px dotted #eee; /* 경계선 유지 */
        }

        /* 인쇄 시 문제 간 일관된 간격 확보 */
        section {
            justify-content: space-between; /* 항목을 고르게 분산 */
            /* gap: 20px 8mm;  */
			/* 인쇄 레이아웃에 맞게 간격 조정, 가로 간격을 8mm로 줄였습니다. */
        }
        section > div.layout {
            width: calc(33.33% - 16mm); /* 3열 배치 (가로 간격 8mm를 고려하여 16mm를 뺍니다) */
            margin-bottom: 15mm; /* 문제 행 간의 세로 간격 추가 */
            min-width: unset; /* 인쇄 시 최소 너비 제한 해제 */
            flex-shrink: 0;
			min-width: 250px; /* 지나치게 좁아지는 것을 방지하기 위한 최소 너비 */
			min-height: 160px;
        }
		/*section > div.layout {
			display: flex;
			justify-content: center;
			align-items: flex-start;
			box-sizing: border-box;
			width: calc(33.33% - 20px);
			min-width: 250px;
			min-height: 200px;
		}*/
        /* 인쇄 시 td 및 폰트 크기 조정 */
        table {
            font-size: 11px; /* 인쇄 시 테이블 기본 폰트 크기 */
        }
        .cell {
            width: 1.8rem; /* 인쇄 시 셀 너비 조정 */
            height: 1.8rem; /* 인쇄 시 셀 높이 조정 */
            font-size: 1.4em; /* 인쇄 시 셀 내 폰트 크기 */
        }
        .circle-number {
            width: 0.8rem; /* 인쇄 시 원형 숫자 너비 */
            height: 0.8rem; /* 인쇄 시 원형 숫자 높이 */
            font-size: 0.55rem; /* 인쇄 시 원형 숫자 폰트 크기 */
            line-height: 0.8rem; /* 인쇄 시 원형 숫자 세로 중앙 정렬 */
            margin: 5px 4px 0 0; /* 인쇄 시 원형 숫자 간격 조정 */
            border-radius: 50%; /* 인쇄 시 원형으로 다시 설정 */
        }
    }
h1.quote.tt{
    font-size: 0.9em;
    margin: 0;
    width: 100%;
    justify-content: center;
    display: flex;
    margin: 0;
}
.comment {
    display: inline-block;
    /* background-color: #f0f8ff; */
    /* border: 1px solid #2a7ade; */
    padding: 0.5em 1em;
    border-radius: 6px;
    color: #333;
}

.quote {
    position: relative;
}

.quote_left {
    position: absolute;
    top: -0.5em;
    left: -1.2em;
    font-weight: bold;
    color: #2a7ade;
    font-size: 0.5em;
    font-family: monospace;
}

.quote_right {
    position: absolute;
    bottom: -0.7em;
    right: -0.5em;
    font-weight: bold;
    font-size: 0.5em;
    color: #2a7ade;
    font-family: monospace;
}
.quote_tailer {
    margin: 0 4px;
}