/**
 	Copyright(c) 2022, MindConnect. All rights reserved.
	treenote@snu.ac.kr
	
	/Inc/mcStyle.css
*/

/* Serif Korean, 명조 */
/* noto-serif-kr-v20-latin_korean-regular */
@font-face {
  font-family: 'serif';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('/WebFonts/noto-serif-kr-v20-latin_korean-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/WebFonts/noto-serif-kr-v20-latin_korean-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* noto-serif-kr-v20-latin_korean-600 */
@font-face {
  font-family: 'serif';
  font-style: normal;
  font-weight: 600;
  src: local(''),
       url('/WebFonts/noto-serif-kr-v20-latin_korean-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/WebFonts/noto-serif-kr-v20-latin_korean-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* Sans Serif Korean, 돋움(고딕) */
/* ibm-plex-sans-kr-regular - latin_korean */
@font-face {
  font-family: 'sans';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('/WebFonts/ibm-plex-sans-kr-v7-latin_korean-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/WebFonts/ibm-plex-sans-kr-v7-latin_korean-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* ibm-plex-sans-kr-600 - latin_korean */
@font-face {
  font-family: 'sans';
  font-style: normal;
  font-weight: 600;
  src: local(''),
       url('/WebFonts/ibm-plex-sans-kr-v7-latin_korean-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/WebFonts/ibm-plex-sans-kr-v7-latin_korean-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* Monaco */
@font-face {
	font-family: 'Monaco';
	font-style: normal;
	font-weight: 400;
	src: url('/WebFonts/monaco-webfont.woff') format('woff');
}

html {
	font-size: 0.875em;
	box-sizing: border-box;
}

*,
::before,
::after {
	box-sizing: inherit;
}

* > *:first-child {
  margin-top: 0;
} 

body {
	margin: 0; padding: 0;
	color: #222;
	font-family: "sans";
	font-size: 1rem;
	line-height: 1.6;
}

p, li {
	font-family: "serif";
}
p.block {
	margin-left: 2.5em;
	margin-right: 2.5em;
}
p.en {
	line-height: 1.3;
}

pre {
	color: dimgray;
	font-family: Monaco, Consolas, Menlo;
	font-size: 0.9em;
	line-height: 1.4;
	tab-size: 2;
	margin-top: 0.8em; margin-bottom: 0.8em;
}
pre.sm {
	font-size: 0.8rem;
}
.code {
	font-family: Monaco, Consolas, Menlo;
	font-size: 0.9em;
	color: dimgray;
}
.code.sm {
	font-size: 0.8em;
}

h1,h2,h3,h4,h5,h6 { font-family: sans; }
h1 { font-size: 2em; margin: 1.2rem 0; }
h2 { font-size: 1.6em; margin: 1.1rem 0; }
h3 { font-size: 1.4em; margin: 1.0rem 0; }
h4 { font-size: 1.2em; margin: .9rem 0; }
h5 { font-size: 1.0em; margin: .8rem 0; }
h6 { font-size: 0.9em; margin: .72rem 0; }

ol.paren {
	list-style-type: none;
	margin-left: 1.7em;
}
ol.paren li {
	counter-increment: item; 
	text-indent: -1.7em;
}
ol.paren li::before {
	content: "(" counter(item) ") ";
}

hr {
	border: dotted 1px gainsboro;
	margin: .75em 5% .65em;
}
hr.wide {
	margin: 0.75em 1em .65em;
}
hr.left {
	margin-left: 1em;
	max-width: 33%;
}

A:link { color: steelblue; text-decoration: none; }
A:visited { color: steelblue; text-decoration: none; }
A:hover { color: hotpink; text-decoration: underline; }
A:active { color: yellowgreen; text-decoration: none; }

table { border-collapse: collapse; }
td, th { 
  border: 1px solid darkgray; 
  padding: 3px 4px; 
  line-height: 1.25; 
}
th { 
  background-color: #DEF; 
  text-align: center;
}
td.l { text-align: left; }
td.c { text-align: center; }
td.r { text-align: right; }

table.form {
	margin-top: 0; margin-bottom: 0;
}
table.form td {
	border: 0;
	color: rgb(102, 102, 102);
}
table.form td.idBold { 
	font-weight: bold; 
	text-align: left; color: goldenrod; 
}

input::placeholder { color: #CCC; }
input[type="text"], input[type="password"] { 
	color: #444;
	font-family: Helvetica; 
	letter-spacing: 0.08em; 
}
input[name=withdrawInput] { color: goldenrod; }
label:hover {
	color: tomato;
}
/* inputGroup is the wrapper for an input element and a span element,
		We use this for the purpose of implementing clearing function.
		Span element is fa-xmark, which is used as the button. */
.inputGroup {
	display: inline-block;
  position: relative;
}
.inputGroup span {
	color: gray;
  position: absolute;
  right: 10px; bottom: 4px;
  cursor: pointer;
}

.button {
	background-color: #fafafa;
	color: #444;
	border: 1px solid darkgray;
	border-radius: 2px;
	padding: 3px 8px 1px;
	cursor: pointer;
}
.button:hover {
	color: hotpink;
}

.emph { color: red; }
.emph_bg { background-color: #fff400; color: black; }
.emu { text-decoration: underline; }