@charset "utf-8";

* { margin:0; box-sizing:border-box; }
html { font-family: 'Noto Sans KR', "맑은 고딕", "Malgun Gothic", "돋움", Dotum, Tahoma, Geneva, sans-serif; font-weight:400; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; word-break:keep-all; } /* IE 및 iOS의 글꼴 크기 조정 방지 */
body { line-height:100%;}










/* ----------------- HTML5 display ----------------- */

article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {display:block;} /* 에지, IE9 이상, 파이어 폭스에서 올바른 표시 추가 */
audio, canvas, progress, video {display:inline-block;}
audio:not([controls]) {display:none; height:0;} /* 아이폰 OS 4-7에서 올바른 표시 추가 */
progress {vertical-align:baseline;} /* 크롬, 파이어 폭스, 오페라 올바른 수직 정렬을 추가 */
template, [hidden] {display:none;} /* IE10 이상 에서 올바른 표시 추가 */









/* ----------------- a link ----------------- */

a {background-color:transparent;} /* IE 10에서 활성 링크에 회색 배경을 제거 */
a:active, a:hover {outline-width:0;} /* a링크 윤각선 제거 */









/* ----------------- Em bedded content ----------------- */

img {border-style:none;} /* 이미지 테두리 제거 */
svg:not(:root) {overflow:hidden;}









/* ----------------- Grouping content ----------------- */

/*code, kbd, pre, samp {font-family:monospace, monospace; font-size:1em;}*/
code, kbd, pre, samp { font-family: 'Noto Sans KR', "맑은 고딕", "Malgun Gothic", "돋움", Dotum, Tahoma, Geneva, sans-serif !important; white-space: pre-wrap !important; line-height: 160%; }


figure {max-width:600px; margin:0 auto;}
hr {box-sizing:content-box; height:0; overflow:visible;}









/* ----------------- Forms 초기화 ----------------- */

ul,li {margin:0; padding:0; list-style: none;}
fieldset {border:0;}
button, input, select, textarea {font:inherit;}
optgroup {font-weight:700;}
button, input, select {overflow:visible;}
button, input, select, textarea {margin:0;}
button, select {text-transform:none;} /* 파이어 폭스에서 변환 텍스트의 상속을 제거 */
button, [type="button"], [type="reset"], [type="submit"] {cursor:pointer;} [disabled] {cursor:default;}
button, html [type="button"], [type="reset"], [type="submit"] {-webkit-appearance:button;}  /* 아이폰 input 디자인 변경가능 */
button::-moz-focus-inner, input::-moz-focus-inner {border:0; padding:0;} /* 파이어 폭스의 내부 테두리와 패딩을 제거 */
button:-moz-focusring, input:-moz-focusring {outline:1px dotted ButtonText;}

textarea {overflow:auto;}
[type="checkbox"], [type="radio"] {box-sizing:border-box; padding:0;}
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {height:auto;}
[type="search"] {-webkit-appearance:textfield;}
[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration {-webkit-appearance:none;}

input { 1-webkit-appearance: none; -webkit-border-radius: 0;}
input::-webkit-input-placeholder { font-size:90%; color: #aaa; }
input::-moz-placeholder { font-size:90%; color: #aaa; }
input:-ms-input-placeholder { font-size:90%; color: #aaa; }
input:not([type='checkbox,radio']):focus::-webkit-input-placeholder { font-size:90%; color: #aaa; }
input[type=submit] {-webkit-appearance:none;}

@media all and (max-width:639px){ /* Mobile 가로버전 최소 */
/*
input::-webkit-input-placeholder {padding:2px 0;}
input::-moz-placeholder {padding:2px 0;}
input:-ms-input-placeholder {padding:2px 0;}
input:not([type='checkbox,radio']):focus::-webkit-input-placeholder {padding:2px 0;}
*/
}



input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}





/* ----------------- 폰트 관련 ----------------- */

abbr[title] {border-bottom:none; text-decoration:underline; text-decoration:underline dotted;} /* 크롬, 에지, IE, 오페라, 사파리에서 올바른 텍스트 장식 추가 */
h1, h2, h3, h4, h5, strong, b {font-weight:bold;}
dfn {font-style:italic;} /* 안드로이드 4.3에서 올바른 글꼴 스타일을 추가 */
small {font-size:80%;}
sub, sup {font-size:75%; line-height:0; position:relative; vertical-align:baseline;}
sub {bottom:-0.25em;}
sup {top:-0.5em;}




/* Korean */
/* @font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 100;
  src: url(../font/NotoSansKR-Light.woff2) format('woff2'),
       url(../font/NotoSansKR-Light.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 300;
  src: url(../font/NotoSansKR-Medium.woff2) format('woff2'),
       url(../font/NotoSansKR-Medium.otf) format('opentype');
}
@font-face {
   font-family: 'Noto Sans KR';
   font-style: 700;
   src: url(../font/NotoSansKR-Bold.woff2) format('woff2'),
        url(../font/NotoSansKR-Bold.otf) format('opentype');
} */


@font-face {
  font-family: "Noto Sans KR";
  font-weight: 200;
  font-style: normal;
  src: url("../font/NotoSansKR/NotoSans-Light.eot?") format("eot"),
  url("../font/NotoSansKR/NotoSans-Light.otf") format("opentype"),
  url("../font/NotoSansKR/NotoSans-Light.woff") format("woff"),
  url("../font/NotoSansKR/NotoSans-Light.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans KR";
  font-weight: 300;
  font-style: normal;
  src: url("../font/NotoSansKR/NotoSans-DemiLight.eot?") format("eot"),
  url("../font/NotoSansKR/NotoSans-DemiLight.otf") format("opentype"),
  url("../font/NotoSansKR/NotoSans-DemiLight.woff") format("woff"),
  url("../font/NotoSansKR/NotoSans-DemiLight.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans KR";
  font-weight: 400;
  font-style: normal;
  src: url("../font/NotoSansKR/NotoSans-Regular.eot?") format("eot"),
  url("../font/NotoSansKR/NotoSans-Regular.otf") format("opentype"),
  url("../font/NotoSansKR/NotoSans-Regular.woff") format("woff"),
  url("../font/NotoSansKR/NotoSans-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans KR";
  font-weight: 500;
  font-style: normal;
  src: url("../font/NotoSansKR/NotoSans-Medium.eot?") format("eot"),
  url("../font/NotoSansKR/NotoSans-Medium.otf") format("opentype"),
  url("../font/NotoSansKR/NotoSans-Medium.woff") format("woff"),
  url("../font/NotoSansKR/NotoSans-Medium.woff2") format("woff2");
}
/* ⚠ 700 은 Bold 다. 예전에는 여기가 NotoSans-Black 을 가리키고 있었다 — 그 파일은
      (fonttools 로 확인) **Noto Sans Black** 이고 usWeightClass=900 에 **한글 음절이 0개**다.
      그래서 굵은 글자에서 :
        · 영문·숫자 -> Black(900) 으로 그려져 과하게 두꺼웠고
        · 한글      -> 그 파일에 없으니 대체 글꼴(맑은 고딕)로 떨어져 가늘었다
      한 줄 안에서 영문/숫자만 유독 두껍고 한글은 가늘어 보이던 원인이다.
      NotoSans-Bold 는 폴더에 있는데도 선언되지 않고 있었다 —
      그쪽이 Noto Sans KR Bold(700), 한글 2349자를 갖는 올바른 파일이다.
      Black 은 한글이 없어 선언하지 않는다(쓰면 같은 문제가 되살아난다). */
@font-face {
  font-family: "Noto Sans KR";
  font-weight: 700;
  font-style: normal;
  src: url("../font/NotoSansKR/NotoSans-Bold.eot?") format("eot"),
  url("../font/NotoSansKR/NotoSans-Bold.otf") format("opentype"),
  url("../font/NotoSansKR/NotoSans-Bold.woff") format("woff"),
  url("../font/NotoSansKR/NotoSans-Bold.woff2") format("woff2");
}


@font-face {
	font-family: 'Pretendard';
	font-weight: 700;
	font-display: swap;
	src: local('Pretendard Bold'), 
  url(../font/Pretendard/Pretendard-Bold.woff2) format('woff2'), 
  url(../font/Pretendard/Pretendard-Bold.woff) format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 600;
	font-display: swap;
	src: local('Pretendard SemiBold'), 
  url(../font/Pretendard/Pretendard-SemiBold.woff2) format('woff2'), 
  url(../font/Pretendard/Pretendard-SemiBold.woff) format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 500;
	font-display: swap;
	src: local('Pretendard Medium'), 
  url(../font/Pretendard/Pretendard-Medium.woff2) format('woff2'), 
  url(../font/Pretendard/Pretendard-Medium.woff) format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 400;
	font-display: swap;
	src: local('Pretendard Regular'), 
  url(../font/Pretendard/Pretendard-Regular.woff2) format('woff2'), 
  url(../font/Pretendard/Pretendard-Regular.woff) format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 300;
	font-display: swap;
	src: local('Pretendard Light'), 
  url(../font/Pretendard/Pretendard-Light.woff2) format('woff2'), 
  url(../font/Pretendard/Pretendard-Light.woff) format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 200;
	font-display: swap;
	src: local('Pretendard ExtraLight'), 
  url(../font/Pretendard/Pretendard-ExtraLight.woff2) format('woff2'), 
  url(../font/Pretendard/Pretendard-ExtraLight.woff) format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 100;
	font-display: swap;
	src: local('Pretendard Thin'), 
  url(../font/Pretendard/Pretendard-Thin.woff2) format('woff2'), 
  url(../font/Pretendard/Pretendard-Thin.woff) format('woff');
}


/* Nanum Gothic 선언은 지웠다.
   여기에 ../font/Nanum-Gothic-*.woff2 를 가리키는 @font-face 두 블록이 있었는데
   **그 파일이 저장소에 없다(실제로 404 확인)**. src 가 실패한 @font-face 는 같은
   이름의 다른 선언까지 덮어써 글꼴이 통째로 대체 글꼴로 떨어지므로, 쓰지 않는
   선언을 남겨 둘 이유가 없다. 본문 글씨체는 Noto Sans KR 이다(위 @font-face + main.jsp). */
/* //Korean */

/* Google Material icons */
 @font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(path/to/MaterialIcons/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(../font/MaterialIcons/MaterialIcons-Regular.woff2) format('woff2'),
    url(../font/MaterialIcons/MaterialIcons-Regular.woff) format('woff'),
    url(../font/MaterialIcons/MaterialIcons-Regular.ttf) format('truetype');
}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga';
}
/* //Google Material icons */

/* Google Material icons New : sidebar icon */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 300;
  font-display: block;
  src: url(../font/MaterialIcons/MaterialSymbolsOutlined.woff2) format('woff2'),
  url(../font/MaterialIcons/MaterialSymbolsOutlined.ttf) format('truetype');
}
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}
/* Google Material icons New */

/* 아이콘 폰트 로딩 중 리거처 원문(영문) 노출 차단
   Material 아이콘은 'health_and_safety' 같은 리거처 이름을 그대로 글자로 넣기 때문에,
   아이콘 폰트(MaterialSymbolsOutlined.woff2, 3MB대)가 도착하기 전에는 그 영문이 대체 폰트로
   그려져 배너 제목줄 등에 잠깐 보였다 사라진다(font-display 차단 구간 3초를 넘길 때).
   → 폰트가 준비될 때까지 글리프 자리(1em)만 잡아 두고 글자는 감춘다.
     클래스 토글은 /WEB-INF/jsp/layout/main.jsp 의 헤드 인라인 스크립트가 한다.
     (스크립트가 못 돌거나 폰트 로드가 실패하면 클래스가 붙지 않으므로 기존 동작 그대로다.) */
html.icon-font-loading .material-symbols-outlined,
html.icon-font-loading .material-icons {
  visibility: hidden !important;
  width: 1em;
  max-width: 1em;
}

/* ----------------- 스크롤 ----------------- */
.nice_scroll_area { overflow: auto; -webkit-overflow-scrolling:touch; }
