/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

/******************************************************************************/




/* <==== 여기부터 커스텀 스타일 시트 ====>
   ========================================================================== */

@font-face {
	font-family:'Plex-Text';
	src: url(../../fonts/IBMPlexSansKR-Text.woff2) format('woff2');
}

@font-face {
	font-family:'Plex-Medium';
	src: url(../../fonts/IBMPlexSansKR-Medium.woff2) format('woff2');
}

@font-face {
	font-family:'Plex-SemiBold';
	src: url(../../fonts/IBMPlexSansKR-SemiBold.woff2) format('woff2');
}


/* 공통
   ========================================================================== */
:root {
    --body--horizontal-margin: 0.5rem;
    --panel--border-radius: 0.5rem;
    --background--soft-blue: rgba(9, 100, 133, 0.5);
    --background--semi-hard-blue: rgba(9, 100, 133, 0.8);
    --background--hard-blue: rgb(13, 121, 161);
    --color--skyBlue: rgb(6, 161, 218);
    --color--soft-red: rgba(199, 8, 8, 0.5);
	--color--soft-orange: rgba(255, 127, 0, 0.7);
}

/* 모바일
   ========================================================================== */
@media (max-width: 480px) and (orientation: portrait), (max-height: 480px) and (orientation: landscape) {
   :root {
       --root--font-size: 6vmin;
       --logo--height: 2.5rem;
       --panel--border-width: 0.07rem;
   }
}
/*
on first load:
var deviceWidth = innerWidth;

// 모바일 가로모드일 때
if (innerHeight < innerWidth && innerHeight =< 480) {
    if (innerHeight < deviceWidth) {
        document.querySelector(':root').style.setProperty('--root--font-size', 
}
*/

/* 모바일 키보드 올라왔을 때, 가로방향이 되더라도 여전히 너비를 기준으로 폰트 크기 설정 */
/*
1. 모바일이다. (vmax <= 480px)
2. 높이가 디바이스-너비보다 작다. <- 이 부분이 문제.
*/
/* 일단은 내버려두기. sass나 자바스크립트를 이용해서 어떻게든 할 수 있을 거 같기는 한데.. 키보드가 올라올 때 화면이 너무 좁아지는 기기라면 root--font-size가 작아지는 게 오히려 나은 것일 수 있음.
@media (max-height: 480px) and (orientation: landscape) and (max-width: 480px) {
    :root {
        --root--font-size: 6vw;
    }
}
*/

/* 데스크톱
   ========================================================================== */
@media (min-width: 481px) and (orientation: portrait), (min-height: 481px) and (orientation: landscape) {
    :root {
        --root--font-size: 26px;
        --logo--height: 85px;
        --panel--border-width: 0.05rem;
    }
}


@media (min-width: 700px) and (orientation: portrait), (min-height: 700px) and (orientation: landscape) {
    :root {
        --root--font-size: 28px;
    }
}


/* 스크롤바
   ================================================== */
*::-webkit-scrollbar {
	width: 0.25rem;
    height: 0.25rem;
}
.modal *::-webkit-scrollbar {
    display: none;
}

*::-webkit-scrollbar-track {
	background-color: rgba(28, 112, 176, 0.4);
}

*::-webkit-scrollbar-thumb {
	background-color: rgba(28, 112, 176, 0.4);
	transition: background-color 0.2s ease;
}

*::-webkit-scrollbar-thumb:hover {
	background-color: rgba(28, 112, 176, 1);
}

*::-webkit-scrollbar-button {
	display: none;
}

/* 웹페이지 본문
   ================================================== */

html {
    background-color: #000;             /* 검정색 배경                                 */
	color: white;                       /* 하얀색 글자                                 */
	font-family: 'Noto Sans KR';        /* 기본 폰트는 고딕                             */
    font-size: var(--root--font-size);  /* 글자 크기는 사용 환경에 따라 달라짐              */
    
    -webkit-user-select: none;          /* 화면의 글자를 드래그하지 못하도록 함.                       */    
	   -moz-user-select: none;          /* 모바일에서 더블탭 시 글자가 선택되거나,                      */
	    -ms-user-select: none;          /* PC에서 포인터 모양이 글자 위에서 변하는 걸 막음               */
	        user-select: none;          /* 기본적으로 텍스트를 복사할 일이 없기 때문에 이렇게 하는 것이 유리 */
}

body {
    height: 100%;               /* 화면에 꽉 차게    */
	margin: 0 var(--body--horizontal-margin);   /* 약간의 좌우 마진  */
}

/****************** 페이지 로더 시작 ******************/
#loader {
    z-index: 99999;
}
#loader.hidden {
    display: none !important;
}

/* 확장하는 선형 */
.loader-line {
    display: inline-block;
    position: fixed;
    left: calc(50% - 1px); top: calc(50% - 2px);
    width: /*80px;*/2px;
    /*height: 80px;*/height: 4px; background-color: #096485;
    opacity: 0;
    transition: opacity 0.7s;
    animation: loader-line 1.2s ease-in-out 1.2s infinite; /* 페이지 로딩이 1.2초 이상 지연되면 로딩 애니메이션 표시 */
}

@keyframes loader-line {
    0% {
      opacity: 1;
      transform: scaleX(0.1);
    }
    100% {
      transform: scaleX(100);
    }
}
/****************** 페이지 로더 끝 ******************/

#content-body {
    transition: opacity 0.3s;    /* 페이지 전환 시 fade-in 효과를 주기 위해 */
    opacity: 0;                 /* 페이지 전환 시 fade-in 효과를 주기 위해 */
}

#content-body.loaded {
    opacity: 1;
}

a {
	color: white;               /* 링크 텍스트도 일반 텍스트와 동일한 모양으로 표시 */
	text-decoration: none;
    font-weight: 700;           /* 굵게                                    */
    transition: background 0.15s;
}

a.external-link {               /* 외부 링크 텍스트는 강조 */
    border-radius: 0.2rem;
    transition: background 0.3s;
    background: var(--background--semi-hard-blue);/*rgba(3, 130, 156, 0.5);*/
    padding: 0.1em 0.4em;
}

a.external-link:hover {
    background: var(--background--hard-blue);
}

a.content-link {
    font-weight: 500;
    text-decoration: underline;
    color: var(--color--skyBlue);
}

hr,
.hr {
    display: block;              /* 패딩, 마진 없는 하얀색 얇은 수평선 */
    /*position: relative;*/
    padding: 0;
    margin: 0;
    height: 0;
    width: 100%;
    max-height: 0;
    line-height: 0;
    clear: both;
    border: none;
    border-top: 0.04rem solid #bbb;
}

hr.dotted,
.hr.dotted {
    border-top-style: dotted;
}

.vr {                           /* 패딩, 마진 없는 하얀색 얇은 수직선 */
    display: inline-block;
    width: 0px;
    clear: both;
    border: none;
    border-right: 0.04rem solid #bbb;
}

.vr.dotted {
    border-right-style: dotted;
}

.subtitle {
    text-align: center;
    font-family: 'Plex-Text', sans-serif;
    /*font-family: 'Noto Sans KR', sans-serif;*/
    font-size: 0.8rem;
    font-weight: 700;
}

.dbversion {
    display: inline-block;
    position: relative;
    top: -0.25em;
    color: #aaa;/*var(--color--skyBlue);/*rgb(255, 127, 0);*/
    /*padding: 2px 4px;*/
    /*margin: 0 auto;*/
    /*background-color: var(--background--semi-hard-blue);*/
    /*border-radius: 4px;*/
    text-align: center;
    width: 100%;
    /*height: 0.25rem;*/
    font-family: 'Plex-Text', sans-serif;
    /*font-family: 'Noto Sans KR', sans-serif;*/
    font-size: 0.45rem;
    font-weight: 700;
	color: var(--background--hard-blue); /*var(--color--soft-orange)*/
}

.panel {
	margin: 0.5rem auto;        /* 약간의 상하 마진, 그리고 화면 가운데 정렬 */
	
    width: 15rem;
	border: var(--panel--border-width) solid white;
	border-radius: var(--panel--border-radius);
    
    overflow: hidden;
}

/* 버튼
   ================================================== */

.button.square {
    width: 100%;
	max-width: 100%;
	margin: 0.5em 0;
	border: 0;
	border-radius: 0;
}
.button.square.no-margin {
    margin: 0;
}

.button.caution {
    background-color: red;
}

.button.caution:hover,
.button.hover-caution:hover {
    background-color: rgba(255, 0, 0, 0.6);
}

.checkboxButton {
	display: none;
}

button,
.button {   /* 버튼처럼 작동하는 엘리먼트 */
    display: inline-block;
    cursor: pointer;
    -webkit-appearance: button;
    appearance: button;
    
    text-align: center;
    
	/*font-family: 'Noto Sans KR', sans-serif;*/
    /*font-family: 'Nanum Myeongjo', serif;*/
	font-weight: 500;
	font-size: 0.8rem;
	color: #fff;
    
    width: auto;
    
    transition: background-color 0.2s ease;
	background-color: #000;
    
	padding: 0.2rem 0.7rem;
    
	border: 0.025rem solid #fff;
	border-radius: 0.1rem;
}

input,
select,
textarea {
    transition: border-color 0.3s, background-color 0.3s, opacity 0.3s;
}

@media (any-hover: hover) {
	button:hover:enabled,
    .checkboxButton:enabled + label.button:hover {
		background-color: var(--background--semi-hard-blue); /*rgba(13, 121, 161, 0.5)*/; /*#0d79a1;*/
	}
    
    .checkboxButton:checked:enabled + label.button:hover {
        background-color: var(--background--hard-blue);
    }
    
    input:hover:enabled,
    input:focus:enabled,
    textarea:hover:enabled,
    textarea:focus:enabled,
    select:hover:enabled {
        outline: none;
        border-color: var(--background--hard-blue);/*rgba(28, 112, 176, 0.7);*/
    }
    
    input:hover:disabled,
    input:focus:disabled,
    textarea:hover:disabled,
    textarea:focus:disabled,
    select:hover:disabled {
        border-color: var(--color--soft-red);
        background-color: var(--color--soft-red);
        opacity: 0.5;
    }
    
    /* 모바일에선 이 효과가 오히려 반응성을 해치므로, PC 등에서만 기능하도록 함 */
    button:active:enabled,
    .checkboxButton:not(:checked):enabled + label.button:active {
        background-color: var(--color--skyBlue); /*#11a0d9;*/
    }

    .checkboxButton:checked:enabled + label.button:active {
        background-color: #000; /*rgba(13, 121, 161, 0.2);*/
    }
}

.checkboxButton:checked + label.button {
	background-color: var(--background--hard-blue); /*#0d79a1;*/
}

.tag {
	/*font-family: 'Noto Sans KR', sans-serif;*/
	display: inline-block;
    
	width: auto;
    line-height: 100%;
    font-size: 0.6rem;
    
    padding: 0.15rem 0.25rem;
    
    border: 0.05rem solid #333; /*rgba(68, 68, 68, 0.9);*/
	border-radius: 0.25rem;
    
    background-color: #000;/*#333;*/
    text-align: center;
	word-break: keep-all;
}

.checkboxButton + label.tag {
    margin: 0 0.2rem 0.3rem 0;
    
	width: auto;
	font-size: 0.6rem;
    
	border-color: #333;
    
	transition: border-color 0.2s ease, background-color 0.2s ease;
	background-color: #000;
	text-align: center;
	word-break: keep-all;
}

.checkboxButton:checked + label.tag {
    background-color: rgba(9, 100, 133, 0.4);
	border-color: #0c93c4;
}

@media (any-hover:hover) {
	/* 선택가능한 태그류 */
	.checkboxButton:not(:checked) + label.tag:hover {
		background-color: rgba(9, 100, 133, 0.5);
		border-color: #096485;
	}
	
	.checkboxButton:checked + label.tag:hover {
		background-color: rgba(9, 100, 133, 0.8);
	}
}

/* 데스크톱 */
@media (min-width: 481px) and (orientation: portrait), (min-height: 481px) and (orientation: landscape) {
    /* 모바일에선 이 효과가 오히려 반응성을 해침. */
    .checkboxButton:not(:checked) + label.tag:active {
        background-color: #0d79a1;
        border-color: #096485;
    }

    .checkboxButton:checked + label.tag:active {
        background-color: black;
        border-color: #111;
    }
}

/* 툴팁 */
.tooltip {
    font-size: 90%;
    cursor: pointer;
	display: inline-block;
	line-height: 100%;
	z-index: 99;
	position: absolute;
	border: 0.04rem solid var(--background--semi-hard-blue);
	border-radius: 0.2em;
	color: #ddd;
	background-color: #000;
	padding: 0.1rem;
    text-align: center;
    transition: opacity 0.3s;
}

.tooltip.error {
    font-size: 0.7rem;
    border-width: 0.07rem;
    border-color: var(--color--soft-red);
    background-color: var(--color--soft-red);
}

.tooltip.success {
    font-size: 0.7rem;
    border-width: 0.07rem;
    border-color: var(--background--soft-blue);
    background-color: var(--background--soft-blue);
}

/*
.tooltip[data-popper-placement^='top'] > .arrow {
    bottom: -0.15rem;
}
.tooltip[data-popper-placement^='bottom'] > .arrow {
    top: -0.15rem;
}
.tooltip[data-popper-placement^='left'] > .arrow {
    right: -0.15rem;
}
.tooltip[data-popper-placement^='right'] > .arrow {
    left: -0.15rem;
}*/

/* 모달 프롬프트 */
.modal {
	display: none;
    opacity: 0;         /* 애니메이션 효과를 위해 */
    transition: opacity 0.3s;
	position: fixed;
	z-index: 99;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.8);
	overflow: auto;
}

.modal-content {
	margin: 4vh auto;
	padding: 0;
    
    width: 80%;
    max-width: 80%;
	max-height: 90vh;
    
	text-align: center;
	background-color: rgb(16, 16, 16);/*#222;*/
	overflow: auto;
    
    border: 0.03rem solid var(--background--soft-blue)/*rgba(255, 127, 0, 0.2)*/;
    border-radius: 0.25rem;
    box-shadow: 0 0 30px 2px #000;
}

.modal-header {
	/*background-color: rgb(30, 30, 30);/*#333;*/
	width: 100%;
	margin: 0;
    margin-bottom: 0.7em;
    border-bottom: 0.03rem solid var(--background--soft-blue)/*rgba(255, 127, 0, 0.2)*/;
    background-color: #000;
}

.modal .close-btn {
    cursor: pointer;
	float: right;
	padding: 0.07rem;
    margin: 0;
	text-align: center;
    transition: opacity 0.2s;
    height: 1rem;
    width: 1rem;
    border-top-right-radius: 0.25rem;
}

.modal .close-btn:hover,
.modal .close-btn:active {
    opacity: 0.5;
}

.modal-body {
	text-align: left;
    
    font-size: 1rem;
	padding-left: 0.2rem;
	padding-right: 0.2rem;
	padding-bottom: 0.5rem;
	
	height: auto;
}

.modal-footer {
	background-color: rgb(23, 23, 23);/*#666;*/
	width: 100%;
	margin: 0;
	padding: 0;
	padding-top: 0.2em;
	text-align: left;
	overflow: auto;
}

.modal select {
    font-size: 70%;
    background: #000;
    color: #eee;
    border: 0.07rem solid var(--color--skyBlue);
    border-radius: 0.2rem;
    outline: none;
}

/* 동그란 메뉴 버튼
   ================================================== */
.menu-btn {
    cursor: pointer;
    
	position: fixed;
	bottom: 1rem;
	right: 1.3rem;
    
	z-index: 9;
    
	width: 10%;
	max-width: 60px;
    
    border-radius: 100rem;
    
	background-color: #333;
}

/* 로고 이미지
   ================================================== */
.logo {
	display: block;
	height: var(--logo--height);
	margin: 1rem auto;      /* 약간의 상하 마진, 가운데 정렬 */
}

/* 저작권 표시
   ================================================== */
.copyright {
    /*font-family: 'Noto Sans KR', sans-serif;*/
	text-align: left;       /* 왼쪽 정렬   */
	font-size: 0.45rem;      /* 작은 글씨   */
    font-weight: normal;
    margin-top: 1rem;       /* 약간의 마진 */
    margin-bottom: 0.3rem;
    margin-left: 0.3rem;
}

/* 토스트 메시지
   ================================================== */
.toast {
	display: none;
	
    /* 화면 중앙에 위치 */
    position: fixed;
	left: 50%;
	bottom: 50%;
	z-index: 999;
    
	border-radius: 0.1rem;
    padding: 0.2rem 0.4rem;
    text-align: center;
    
	background-color: #333;
	color: #fff;
	font-size: 0.7rem;
}

.toast.show {
	display: inline-block;
    
	        animation: fadein 0.2s, fadeout 0.2s 1s;
	-webkit-animation: fadein 0.3s, fadeout 0.3s 1s;
    
            animation-fill-mode: none, forwards;
	-webkit-animation-fill-mode: none, forwards;
}

/* 애니메이션
   ================================================== */
@keyframes fadein {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@-webkit-keyframes fadein {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes fadeout {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@-webkit-keyframes fadeout {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}