body {

	background-color: #E6E6E6;
	color: LightGray;
	font-size: 14px;
	font-family: "Noto Sans KR", sans-serif;
	letter-spacing: 0;
	word-spacing: 0;
	line-height: 1.7;
	text-align: left;
	word-break: keep-all;
	display: flex; /* 자식 요소들을 Flexbox 레이아웃으로 */
  justify-content: center; /* 수평 방향으로 여백 설정(flex-direction의 방향에 영향을 받음) */
	/* align-items: center는 자식요소 방향을 기준으로 수직 방향 위치 설정 */
	margin-top: 30px;
	}

.result {
	width: 400px;
  height: 300px;
	background-color: white;
	display: flex;
	flex-direction: column; /* 자식 요소 세로 배열 */
	max-width: 372px;
	margin: auto;
	padding: 4px 6px;
  overflow: auto; /* 콘텐츠가 넘칠 때 어떻게 처리할건지 */
	
	}


a { 
	display: inline-block; /* transition 효과 주려고 사용함 (transition은 block 속성을 가진 태그에만 사용 가능) */
	text-decoration: none;
	color: inherit;
	}

.tran strong {
	display: inline-block;
  transition: transform 0.01s;
}

.tran strong:hover {

	transform: rotate(7deg);
	transition-duration: 0.01s;
	}

h1{ 
	font-weight: normal;
	font-size: 14px;
	margin-top: 0px;
	margin-bottom: 0px;
	
	}

p{
	margin-top: 0px;
	margin-bottom: 3px;
}

button {
	 background-color: white;
	 color: LightGray;
	 font-size: 14px;
 	 border: 0px ;
	 padding: 0px;
	 text-align: left;
	}

dialog {
  border: none;
  text-align: center;
  color: DimGray;
  background-color: transparent; /* 투명하게 */

}

::backdrop {
	background: rgba(255, 255, 255, 0.3); /* a 해당값은 투명도 (1은 불투명 0 투명) */
}


::-moz-selection {
		background-color: whitesmoke;
		color: whitesmoke;
	}
::selection {
		background-color : whitesmoke;
		color: whitesmoke;

} /* 글 긁었을 때 나타나는 스타일, ::는 의사요소(내용이 아닌 요소) */

.result::-webkit-scrollbar {
  width: 0px; /* 스크롤바 안 보이게 */
}