.loading {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 50000000000000;
	background-color: rgba(0, 0, 0, .5)
}
.loading:before {
	content: "";
	position: absolute;
	width: 100px;
	height: 100px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: url('/year/111/img/bx_loader2.gif');
	background-size: 100%;
	background-color: #fff;
	border-radius: 50px
}
.mtyping .top_wrap{display: none;}
.mtyping #main.sec{padding: var(--box-pad2) 0 0 0 !important;}
/*버튼*/
.btn_box1{padding:var(--box-pad2);border-radius: var(--radius5);border:var(--box-border7);text-decoration: none;background-color:var(--color3);color:#fff;font-size: var(--fs2x);min-width: 200px;cursor:pointer}
.btn_box1 em{background-color:#fff;border-radius: var(--radius3);margin-right:var(--box-pad1);font-size: var(--fs2);padding:var(--box-pad1)}
.btn_box2{padding:var(--box-pad5);border-radius: var(--radius3);border:var(--box-border4);text-decoration: none;font-size: var(--fs2x);}
.btn_box2.active{background-color:var(--color1);color:#fff}
.btn_box3{padding:var(--box-pad2) var(--gap1x);border-radius: var(--radius3);border:var(--box-border1);text-decoration: none;background-color: var(--color11);color: var(--color2);}
.circle_btn{border-radius: 50%;border:var(--box-border1);aspect-ratio: 1;display: flex;align-items: center;justify-content: center;}
.btn_icon_box{border-radius: var(--radius1);border:var(--box-border2);display:flex;align-items: center;justify-content: center;width:2em;aspect-ratio: 1;display:block;text-align: center;}
.btn_icon_box:before{content:"+";font-size: var(--fs2x);}
.background_set{background-repeat:no-repeat;background-position:50% 50%;background-size:contain;}
.typing_together,.typing_p_status{max-width: 348px;aspect-ratio: 1;}
.typing_together{background-image:url("/year/111/img/typing1.webp");background-size:contain;max-width: 356px;aspect-ratio: 1;position: relative;margin:0 auto;max-height: 40vh;margin:var(--gap1x) auto}
.typing_p_status{background-image:url("/year/111/img/typing1_on.webp");position:absolute;top:50%;left:50%;z-index:1;transform: translate(-50%,-50%);aspect-ratio: 1;aspect-ratio: 1;border-radius: 50%;max-width: 100%;}
.my_typing{font-size: var(--fs6);background-image:url("/year/111/img/typing_my.webp");width:60%;max-width:128px;height:76px;position:absolute;z-index:10;right:0;text-align: center;padding-top:6%;padding-left:8%;top:0;line-height: 1;background-size: contain;letter-spacing: -1px;}
.typing_finish .content_wrap,.typing_progress,.typing_pcenter,.typing_dic{display: flex;align-items: center;justify-content: center;}
.typing_index .content_wrap,.typing_finish .content_wrap{overflow: auto;}
.center{gap:var(--box-pad2)}
.typing_progress{aspect-ratio: 1;}
.typing_pcenter{position:relative;z-index:2;border-radius: 50%;aspect-ratio: 1;padding:var(--gap1x);max-width: 44%;flex-direction: column;background:#fff url("/year/111/img/typing_tocnt.webp") no-repeat 24% 8%;background-size: 12%;font-size: var(--fs6);width:40%;word-break: keep-all;}
.typing_pcenter strong{font-size:var(--fs2x)}
.typing_dic{gap:var(--gap1x);font-size: var(--fs2x);}
.typing_dic2{font-size: var(--fs2);color: var(--color7);margin:var(--gap1) 0}
.typing_btn{margin-bottom:var(--gap1x);display: flex;flex-wrap: wrap;gap: var(--gap1x);justify-content: center;}
.typing_btn a{min-width: 200px;flex-grow: 1;flex:0 0 auto}

.typing_people{background-image:url("/year/111/img/typing_progress1.webp");position: absolute;width:60%;z-index:2;aspect-ratio: 1;}
.typing_people.typing10{background-image:url("/year/111/img/typing_progress_10.webp")}
.typing_people.typing20{background-image:url("/year/111/img/typing_progress_20.webp")}
.typing_people.typing30{background-image:url("/year/111/img/typing_progress_30.webp")}
.typing_people.typing40{background-image:url("/year/111/img/typing_progress_40.webp")}
.typing_people.typing50{background-image:url("/year/111/img/typing_progress_50.webp")}
.typing_people.typing60{background-image:url("/year/111/img/typing_progress_60.webp")}
.typing_people.typing70{background-image:url("/year/111/img/typing_progress_70.webp")}
.typing_people.typing80{background-image:url("/year/111/img/typing_progress_80.webp")}
.typing_people.typing90{background-image:url("/year/111/img/typing_progress_90.webp")}
.typing_people.typing100{background-image:url("/year/111/img/typing_progress_100.webp")}
.sub_bg{background:url("/year/111/img/sub_bg2.webp") no-repeat 50% 0;background-size:contatin}
#main{container-type: inline-size;  container-name: typing;}
.typing_index .content_wrap{padding:0 var(--gap2x) var(--gap2x) var(--gap2x);display: flex;justify-content: center;}
.typing_main #typing_main{padding:0 var(--gap2x) 4em var(--gap2x);overflow:auto;position: relative;flex-grow: 1;}
.typing_main .content_wrap{background-color:var(--color11)}
.content_wrap{border-radius: var(--radius3);box-shadow:var(--box-shadow1);backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px);border:var(--box-border2);text-align: center;margin:0 var(--box-pad2) 0 var(--box-pad2);height:100%;overflow: hidden;}
.typing_index .im_text{font-size:3.8em}
.typing_finish .im_text{font-size:5vmin}
.im_text_info{font-size:var(--fs4x);font-family:var(--strong1);}
.btn_message{position: absolute;left:var(--gap1x);bottom:var(--gap1x);font-size: var(--fs6);background-color: rgba(255,255,255,.4);}
/*법문쓰기*/
.typing_main  #step2{display: flex;flex-direction: column;height:100%}
.typing_index #typing_main{flex-grow: 1;overflow:auto;min-height: 100%;align-items: center;display: flex;}
.typing_main #typing_header{display: flex;justify-content: space-between;padding:var(--box-pad2);border-bottom: var(--box-border2);background-color:var(--color11_1);align-items: center;}
.mtyping #typing_header{border-top: var(--box-border2);}
.home_link{/*font-size: var(--fs1);*/background-color: var(--color11);border-radius: var(--radius2);padding:2px;align-items: center;vertical-align: 2px;margin-right:var(--box-pad1);border: var(--box-border2);}
.tit_box{font-family:var(--strong1);color:var(--color1)}
.bup_write_box span:nth-child(3){margin-left: var(--box-pad1);}
.mtyping .bup_write_box span:nth-child(3){display: none;}
.Dmain_fbtn{display: flex;gap:var(--box-pad1);font-size: var(--fs2);}
.Dmain_fbtn a, .Dmain_fbtn button{width:28px;height:28px;border: var(--box-border2);border-radius: var(--radius2);color: var(--color2);}
.Dmain_fbtn button.active{background-color:var(--color1) !important;font-family: var(--strong1);color:#efefef !important}
.Dmain_fbtn button.t_end{color:var(--color7) ;background-color:#dfdfdf }
.home_link{display:flex;justify-content: center;align-items: center;}
.home_link:before{content:"";background:url('/year/111/img/typing_sum.png') no-repeat -60px -4px;width:21px;aspect-ratio: 1;display: block;}
.typing_main #typing_main{text-align: left}
#typingDiv,.typing-line{font-size:var(--fs5)}
#typingDiv{border-radius: var(--radius2);border:1px solid var(--color13);overflow:hidden;margin-left:-5px;width:calc(100% + 6px);box-shadow: 2px 2px 4px rgba(0, 0, 0, .2)}
.typing-line{margin:var(--gap1x) 0;color:var(--color7)}
.typing-active-line{color:var(--color13);font-family:var(--strong1);}
.typing-active-line,.typing-line[style*="var(--strong1)"]{margin-bottom:calc(var(--box-pad1) + 4px)!important}
.typing_alert{font-size:var(--fs2x)}
#Dmain:has(.Dmain_com) .typing-line{color:var(--color2)}
.typing_main{background-color:#fafafa}
body:not(#event) .footer{border-top: none;padding:var(--box-pad1) var(--box-pad2);background-color: transparent;}
#typing #main.sec{height: calc(100% - 30px);}
.bup_write_box{display: flex;align-items: center;}
body:not(#event) .footer{position: relative;}
body:not(#event).typing_main .fcopyright:after{content:"사경을 위해 편집되어 원문과 다름이 있습니다.";position: absolute;right:var(--box-pad2);top:6px;font-size: var(--fs1);color:var(--color7)}

#typingLine {
		resize:none;
		color: var(--color13);
		overflow: hidden;
		ime-mode:active;
		word-break:keep-all;
		word-wrap:break-word; 
		font-family:var(--strong1);
		border:0 none;
		background-color: #fbfcfa;
		outline:none;
		padding:var(--box-pad2) var(--box-pad1);
		width:100%;
		white-space: nowrap;
		font-variant-ligatures: none;     /* ‘fi’ 같은 합자 금지 */
		font-kerning: none;               /* 커닝 비활성화 */
		font-feature-settings: "liga" 0, "clig" 0, "kern" 0;
		}

		
	textarea {
	-webkit-appearance: none;
	appearance: none;  
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	outline: none
}
/* ===============================
   사경 단어 판정 스타일
================================ */

/* 맞은 단어 */
.typing-word-correct {
  background-color: var(--color13);
  color: rgb(255, 255, 255);

}

/* 틀린 단어 */
.typing-word-wrong {
  background-color:#fff24d;
  color:  rgb(255, 51, 51);

  text-decoration: rgb(255, 51, 51) wavy underline;
}


#specialCharHelper {
  position: fixed;
  left: var(--gap2x);
  right: var(--gap2x);
  bottom: var(--gap2x); /* JS에서 조정 */
  background: var(--color11_1);
  padding:var(--box-pad1);
  border-top: var(--box-border2);
  z-index: 9999;
  overflow:auto;
  margin:0 0 0 -5px !important;
  display: flex;
  gap:var(--gap1);
  border-radius: var(--radius2);
  border:var(--box-border2);
  align-items: center;
  font-size: var(--fs2);
  box-shadow: 0 2px 1px rgba(0,0,0,.1);
}
#specialCharHelper:has(button){ display: flex;}
.pc #specialCharHelper{left:0;right:0;bottom: 0}
.Dmain_com{background-color:var(--color4);color:#fff;border-radius: var(--radius2);padding:var(--box-pad2);margin: var(--gap1x) 0;display: flex;justify-content: center;align-items: center;gap: var(--gap1x);flex-wrap: wrap;text-align: center;word-break: keep-all;}
.Dmain_com p{display: flex;flex-wrap: wrap;justify-content: center;gap:var(--box-pad1)}
.Dmain_com2{background-color:var(--color14);color: var(--color3);border: var(--box-border2);}
#specialCharHelper:before{content:"※";color:var(--color7);margin-right:var(--box-pad2);position:sticky;left:4px;display: block;min-height: 38px;line-height: 38px;}
#specialCharHelper button{
	border: var(--box-border2); border-radius: var(--radius2); background-color:#fff; padding:var(--box-pad1); cursor: pointer;aspect-ratio: 1;
	min-width:38px;color: var(--color2);
}

.typing-line span {
  display: inline-block;
  letter-spacing: 0;
  font-kerning: none;
  margin: 0;
  padding: 0;
  white-space: pre;          /* ⭐ 공백 유지 */
}

.typing-char {
  display: inline;
  font-kerning: normal;
}

.typing-char.correct {
  color: var(--color13);
  box-shadow: inset 0 -0.18em 0 rgba(88,64,178,0.3);
}
.typing-char.wrong {
  color: #ff3333;
  box-shadow: inset 0 -0.18em 0 rgba(255,51,51,0.35);
  font-weight: 700;
}
.typing-word-correct { background-color:var(--color13); color:#fff;   display: inline;letter-spacing: 0;
  font-kerning: normal;}
.typing-word-wrong   { background-color:fff24d; color:#ff3333;   display: inline;letter-spacing: 0;
  font-kerning: normal;}
  #typing_header {
  padding-left: 20px;
  box-sizing: border-box;
}





@container size1 (max-width: 1000px) {
/*.mtyping #main.sec{padding-top:4em !important;height:100% !important}
.onepage #main.sec, .typing_main  #main.sec{padding-top:4em !important;height:calc(100% - 24px)}*/
.mtyping.typing_main .content_wrap{height:100%;padding:0}
.typing-line{margin:var(--gap2x) 0;}
.im_text{font-size:6.8vw}
.typing_finish .im_text{font-size: 4.8vw;}
.im_text_info{font-size:var(--fs2x)}
.onepage #main.sec{padding-top:3em}
.typing_index .im_text{font-size:7.8vmin}
.typing_index .content_wrap{padding:var(--gap2x);}
.typing_index #typing_main{padding:2em 0}
}


@container size1 (max-width: 600px) {
	.typing_index .im_text,.typing_finish .im_text,.im_text{font-size:8vmin}
	.im_text_info{font-size: 4.4vmin;}
	.typing_pcenter{max-width:none;font-size:var(--fs2)}
	.typing_dic{flex-direction: column;gap:0;font-size: var(--fs6);}
	.content_wrap{padding:var(--gap2x) var(--gap1x)}
	.typing_together{margin:0 auto;max-width: none;}	
	.btn_box1,.btn_box2{font-size: var(--fs3);}
	.typing_btn{margin-bottom: var(--gap1x); }
	.typing_index #typing_main{overflow-x: hidden;}
	.typing_index #typing_main{padding:0}
	
}
@container size1 (max-width: 470px) {
	.typing_btn a.btn_box2{order:2}
	.typing_btn a{min-width: 100%;}

}
@container size1 (max-width: 400px) {
		.my_typing{top:0;padding-top:10%;width:40%;font-size:var(--fs2)}
		
		.typing_main #typing_header{padding:var(--box-pad2) var(--box-pad1)}
		.content_wrap{overflow: auto;}
		
		.typing_progress{margin:0}
		/*.typing_together, .typing_p_status{max-width: calc(100vw - 8vmin - 20px);}*/
		.typing_together{max-width: calc(100vw - 8vmin - 20px);}
		.typing_index .content_wrap, .typing_finish .content_wrap{overflow-x:hidden}
		 .tit_box{font-size: var(--fs2);}
		 .Dmain_fbtn a, .Dmain_fbtn button{width: 24px;height: 24px;}
}


@media (max-width: 50vmax) and (orientation: portrait) {
 /*.typing_index .content_wrap, .typing_finish .content_wrap{
	align-items:center
  }*/
}

@supports (-webkit-touch-callout: none) {/*ios*/
	
	body{
		height:100svh;
		overflow:auto;

	} 
	button, a{touch-action:manipulation}
	.typing_together{max-width:  356px;max-height: 356px;}
	@container size1 (max-width: 400px) {
	.typing_together{max-width:  calc(80vw - 8vmin - 20px);max-height: calc(100vw - 8vmin - 20px);}
	.my_typing{padding-top:8%}
	}
	.main_wrap{margin-top:1em;}
	#typingDiv{font-size: 0;}
	#typingLine{touch-action: manipulation;font-size: var(--fs5);}
	body:not(#event).typing_index .fcopyright:after{content:"세로모드에 최적화 되어 있습니다.";position: absolute;right:var(--box-pad2);top:6px;font-size: var(--fs1);}	
}

@container size1 (min-width: 1921px) {
	.im_text{font-size:4.8em}
}