*{
			box-sizing: border-box;
			padding: 0;
			margin: 0;
			
		}


		body{
			background-color: white;
			width: 100vw;
			height: 100vh;
			font-size: 15px;
			line-height: 1.68;
			word-break: keep-all;
			display: grid;
			grid-template-columns: 6% 44% 44% 6%;
    		justify-content: center;
 			overflow: hidden;
 			font-family: agchoijeongho-screen, serif;
		}

		p{	
			padding: 4px 15px;
			line-height: 1.71;

		}

		.pp{
			padding: 14px 0px 0px 0px;
		}

		.ppp{
			padding: 0px;
			margin: 0px;
			margin-bottom: 3px;
		}

		.pppp{
			padding: 0px;
			margin: 0px;
			margin-bottom: 3px;
			font-size: 12px;
		}
		

		header{
			position: fixed;
			top: 0px;
			display: flex;
			width: 100vw;
			display: flex;
			justify-content: center;
			margin: 0px;
			padding-bottom: 11.8px;
			border-bottom: 0.6px solid black;
			background-color: white;
			z-index: 1000;

		}

		footer{
			position: fixed;
			bottom: 8px;
			width: 100vw;
			display: flex;
			justify-content: center;
		}

		.a1{
			font-weight: normal;
			padding: 8px 0px 0px 15px;
			color: black;
			text-decoration: none;
		}
		.a1:hover{
			color: #919191;
		}
		.a22:hover{
			color: #919191;
		}

		.a2{
			font-weight: normal;
			padding: 8px 0px 0px 15px;
			color: black;
		}


		.a22{
			padding: 0px;
			margin: 0px;
			font-weight: normal;
			color: black;
			background-color: #E3E3E3;
		}

		.i{
			line-height: 1.8;
			border-bottom: 0.6px solid black;
			border-right: 0.6px solid black;
			border-left: 0.6px solid black;
			padding: 16px 22px;

		}
		.i_img{
			width: 70%;
			align-items: center;
			margin-top: 10px;
		}
		.i2{
			padding: 16px 22px;
			border-bottom: 0.6px solid black;
			border-right: 0.6px solid black;
		}

		.i3{
			padding: 2px 22px;
			border-bottom: 0.6px solid black;
			border-right: 0.6px solid black;
			height: 180px;
			 margin-bottom: 0; /* 공백 제거 */

		}
		

		.mix1{
			margin: 44px 0px 0px 0px;
			grid-column-start:2;
			font-size: 15px;
			line-height: 1.65;

		}
		.mix2{
			margin: 44px 0px 0px 0px;
			grid-column-start:3;
			font-size: 15px;
			line-height: 1.65;

		}

		content{
		    /* .r의 절대 위치 기준점이 되도록 relative를 추가합니다. */
		    position: relative; 
		    /* content의 display 속성이 명확하지 않아 block으로 가정합니다. */
		    display: block; 


		}

		.second-column{
			margin-top: 44px;
		}

		.row{
			grid-column-start:2;
		}


		#contentFrame,
		.content-iframe{
		    display: none; 
		    width: 100%;
		    height: 100vh;
		    border: none;
		    margin: 12px 0px;
		    padding: 0px;
}
.container {
    grid-column-start: 2;
    display: flex;
    flex-direction: column;
}
		

		.col1{
			display: flex;
			flex-direction: column;
			border-right: 0.6px solid black;
			height: 230px;
			width: 50px;

		}

		.row{
    display: flex; /* 추가 */
    flex-direction: row; /* 가로 배치 */
    gap: 0; /* 간격 제거 */
    margin-top: 44px;
    height: 90%;
}

#print{
    width: 790px;
    height: 90vh;
    max-width: 830px;
    padding: 12px 14px;
    border: 0.6px solid black;
    margin: 0px;
    resize: none;
    overflow: auto;
    outline: none;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    line-height: 1.65;
    flex-shrink: 0; /* print가 줄어들지 않도록 */
}

.col0{
    display: flex;
    flex-direction: column;
    margin-top: 0;
    flex-shrink: 0;
    width: 540px;
    max-width: 540px;
    overflow: visible; /* hidden에서 visible로 변경 */
}




		.center{
			display: grid;
			grid-template-columns: 7% 90% 5%;
    		justify-content: center;
		}


		option{
			outline: none;

		}



		.fb{
			background-color: transparent;
			color: black;
			border: 1px solid black;
		}

		.scroll{
			overflow-y: auto;
		}

		.b{
			padding: 4px 7px 3px 7px;
			margin-right: 3.5px;
			margin-bottom: 8px;
			margin-top: 0px;

	}

		button,
		select,
		label{
			padding: 7px 7px 7px 9px;
			margin: 0px;
			border: none;
			background-color: transparent;
			font-family: "agchoijeongho-screen", serif;
		}

		input{
			padding: 6.75px;
			margin: 0px;
			border: none;
			background-color: transparent;
			font-family: "agchoijeongho-screen", serif;
		}

		button{	
			background-color: #F0F0F0;
			height: 100%;
			font-size: 12px;

			}

		.down1{
			padding: 8px 7px 7px 9px;
			margin: 0px;
			width: 100%;
			height: 40px;
			border-bottom: 0.6px solid black;
			border-right: 0.6px solid black;
			border-left: 0.6px solid black;
			font-family: "agchoijeongho-screen", serif;
}

.custom-button {
    /* 버튼처럼 보이게 하기 위한 기본 스타일 */
    font-size: 14px;
    text-align: center;
}
/* 기존의 전역 input 스타일은 그대로 두되, file input만 별도 처리 */
input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    padding: 0;
    margin: 0;
}

.custom-button {
    position: relative;
    display: inline-block;
    cursor: pointer;
    z-index: 1;
}
	#english-font-upload,
	#korean-font-upload,
	#number-font-upload,
	#punct-font-upload {
    /* 시각적으로 숨기지만 접근성 및 클릭 가능성은 유지 */
    opacity: 0;
    position: absolute; /* .list를 relative로 설정했을 때, 이 input이 자유롭게 움직일 수 있도록 */
    width: 100%; /* 부모(list) 영역 전체를 차지하게 하여 어디를 클릭하든 파일 선택이 되도록 */
    height: 100%;
    cursor: pointer;
    top: 0;
    left: 0;
    z-index: 10; /* 커스텀 버튼 위에 위치하도록 */
}

		input{
			margin: 0px;
			border: none;
			background-color: transparent;
			font-family: "agchoijeongho-screen", serif;
			outline: none;
		    display: inline-block;
		    width: 100%;
		    cursor: pointer;
		    font-size: 14px;
		    padding-left: 18px;
		}

		.list{
			display: flex;
			border-bottom:0.6px solid lightgray;
    		position: relative; /* 자식 요소인 input의 absolute 기준점 */
			height: 32px;                 /* 고정 높이 추가 */
		    align-items: center;          /* 세로 중앙 정렬 */
		}


		.title1{
			font-size: 12px;
			text-align: center;
			border-bottom:0.6px solid lightgray;

		}

		.title2{
			text-align: center;
			margin: 0px;
			border-bottom: 0.6px solid lightgray;
		}

.file-name{
    font-size: 9.8px;
    color: dimgray;
    padding-right: 6px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;                  /* 100%로 변경 */
    max-width: 100px;             /* 최대 너비 고정 */
    display: block;
    box-sizing: border-box;       /* padding 포함한 너비 계산 */
}

.list{
    display: flex;
    border-bottom:0.6px solid lightgray;
    position: relative;
    height: 32px;
    align-items: center;
    overflow: hidden;             /* 넘치는 내용 숨기기 추가 */
    width: 100%;                  /* 부모 너비 고정 */
}

.col2{
    display: flex;
    flex-direction: column;
    padding: 0px;
    margin: 0px;
    border-right: 0.6px solid lightgray;
    border-bottom: 0.6px solid black;
    height: 192px;
    width: 120px;
    min-width: 108px;             /* 최소 너비 고정 */
    max-width: 108px;             /* 최대 너비 고정 */
}
.title1{
    font-size: 12px;
    text-align: center;
    border-bottom:0.6px solid lightgray;
    height: 32px;              /* 고정 높이 추가 */
    display: flex;             /* flex로 중앙 정렬 */
    align-items: center;       /* 세로 중앙 */
    justify-content: center;   /* 가로 중앙 */
}

.title2{
    text-align: center;
    margin: 0px;
    border-bottom: 0.6px solid lightgray;
    height: 32px;              /* 고정 높이 추가 */
    display: flex;             /* flex로 중앙 정렬 */
    align-items: center;       /* 세로 중앙 */
    justify-content: center;   /* 가로 중앙 */
}

/* 왼쪽 라벨 컬럼도 같은 높이로 맞추기 */
.col2[style*="width: 100px"] .title2 {
    height: 32px;
}

/* button도 같은 높이로 */
.col2 > button {
    height: 32px;
}

		a{
			color: black;
			text-decoration: none;
		}

		span{
			font-size: 20px;
			line-height: 1;
		}

		#text{
			padding: 5px 5px;
		}

		.flex{
			display: flex;
		}

		.q{
			font-size: 11.5px;
			color: dimgray;
			padding: 4px 2px 0px 0px;
		}

		.r{
			position: absolute;
    
		    /* x축: content 영역의 오른쪽 끝에 위치하도록 설정 */
		    right: 0;
		    /* y축: content 영역의 상단에 위치하도록 설정 (필요에 따라 조절) */
		    top: -12px; 

		}

        /* 예시 텍스트 공통 스타일 */
.text1 {
    padding: 14px 0px 0px 0px;
    word-break: keep-all;
}

/* 조화 예시 - 국문 */
.example-harmony .text1 .ml-ko1 {
    font-family: "Nanum Myeongjo", serif !important;
}

/* 조화 예시 - 영문 */
.example-harmony .text1 .ml-en1 {
    font-family: Georgia, serif !important;
    font-size: 11pt !important;
    letter-spacing: -0.2px !important;

}

/* 조화 예시 - 숫자/기호 */
.example-harmony .text1 .ml-num,
.example-harmony .text1 .ml-punct {
    font-family: Georgia, serif !important;
    font-size: 11pt !important;
}

/* 조화 예시 - 국문 */
.example-contrast .text1 .ml-ko {
    font-family: "Noto Sans KR", sans-serif !important;
    font-size: 11pt !important;
    font-weight: 400 !important;
        line-height: 1.8;

}

/* 조화 예시 - 영문 */
.example-contrast .text1 .ml-en {
    font-family: "Helvetica Neue", sans-serif !important;
    font-weight: 400 !important;
    font-size: 11pt !important;
    letter-spacing: 0.3px !important;
        line-height: 1.7;

}

/* 대비 예시 - 숫자/기호 */
.example-contrast .text1 .ml-num1,
.example-contrast .text1 .ml-punct1 {
    font-family: "futura-pt-condensed", sans-serif !important;
    font-size: 13pt !important;
    font-weight: 300 !important;
    padding: 0px;
    margin: 0px;
}
.example-contrast .text1 .ml-en1 {
    font-family: "futura-pt-condensed", sans-serif !important;
    font-weight: 400 !important;
    font-size: 13pt !important;
    letter-spacing: 0.3px !important;
        line-height: 1.7;

}
.example-contrast .text1 .ml-ko1 {
    font-family: "Noto Sans KR", sans-serif !important;
    font-size: 11pt !important;
    font-weight: 400 !important;
        line-height: 1.8;

}

	#resize-prompt-overlay1,
	#resize-prompt-overlay2{
    /* 화면 전체를 덮도록 설정 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white; /* 배경을 어둡게 처리 */
    color: black;
    z-index: 1000; /* 다른 콘텐츠 위에 표시 */
    display: none; /* 기본적으로 숨김 */
}
    
    /* 메시지를 중앙에 배치 */
    .message-box p {
    display: flex;
    justify-content: center;
    align-items: center;
}


.scroll::-webkit-scrollbar {
    display: none; /* 스크롤 바 자체를 숨김 */
}
div[id^="extension-"] {
    display: none !important;
    border: none !important;
}

/* WebKit (Chrome, Safari) 스크롤바 숨김을 위한 추가 */
#capture-results::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}
@media (max-width: 1000px) {
    #resize-prompt-overlay1,
    #resize-prompt-overlay2
     {
        display: flex; /* 숨겨진 오버레이를 화면에 표시 */
        justify-content: center;
        align-items: center;
        text-align: center;

    }
}