@charset "utf-8";

/* ======================================
   기본 리셋
   ====================================== */
* {
  margin: 0;
  padding: 0;
  -webkit-touch-callout: none;
}

/* ======================================
   HTML 기본 설정
   ====================================== */
html {
  -ms-text-size-adjust: 100%;
  scroll-behavior: smooth;
  -webkit-font-size-adjust: none;
  -webkit-text-size-adjust: 100%;
  word-break: keep-all;
}

/* ======================================
   Body & 기본 폰트/레이아웃 설정
   ====================================== */
html,
body {
  color: #000;
  font-family: "Noto Serif KR", serif;
  font-size: 16px;
  font-style: normal;
  font-optical-sizing: auto;
  font-weight: 400;
  height: 100%;
  min-width: 320px;
  letter-spacing: -0.03em;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}

/* ======================================
   요소별 초기화 (Reset)
   ====================================== */
html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, a, abbr, address, cite, em, img,
strong, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot,
thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header,
hgroup, menu, nav, section, summary, audio, video {
  border: 0;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}

/* 헤딩 기본 스타일 */
h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal;
  line-height: normal;
}

/* 기타 요소 마진/패딩 초기화 */
dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p,
blockquote {
  margin: 0;
  padding: 0;
}

/* ======================================
   폼 요소 기본 스타일
   ====================================== */
/* 폰트 상속 및 수직 정렬 */
input, textarea, select,
label, select, input, button {
  font-family: inherit;
  vertical-align: baseline;
}

select {
  -webkit-border-radius: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

input[type="text"],
input[type="password"],
input[type="submit"] {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
}

input[type="image"] {
  border: 0;
  height: auto;
}

input[type="file"] {
  background: none;
  border: 0;
}

textarea {
  overflow-y: auto;
}

input[type="checkbox"],
input[type="radio"] {
  vertical-align: middle;
}

label {
  cursor: pointer;
}

/* ======================================
   테이블 및 리스트 스타일
   ====================================== */
table {
  border-collapse: collapse;
  border-spacing: 0;
  display: table;
}

caption {
  display: table-caption;
}

colgroup {
  display: table-column-group;
}

col {
  display: table-column;
}

thead {
  display: table-header-group;
}

tbody {
  display: table-row-group;
}

tfoot {
  display: table-footer-group;
}

tr {
  display: table-row;
}

td, th {
  display: table-cell;
}

ol, ul, li {
  list-style: none;
  display: list-item;
}

/* ======================================
   이미지 및 기타 엘리먼트 스타일
   ====================================== */
img {
  border: 0;
  image-rendering: auto;
  vertical-align: middle;
}

img,
fieldset {
  border: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

a:link,
a:visited,
a:hover,
a:active {
  text-decoration: none;
}

/* 인용문 스타일 */
blockquote, q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

/* 텍스트 스타일 */
em, address {
  font-style: normal;
}

/* ======================================
   기타 유틸리티 스타일
   ====================================== */
hr {
  clear: both;
  display: none;
  height: 0;
}

legend, caption {
  height: 0;
  line-height: 0;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  visibility: hidden;
  width: 0;
}

/* 숨김 처리할 요소들 */
[hidden],
area,
base,
basefont,
command,
datalist,
head,
input[type="hidden"],
link,
menu[type="context"],
meta,
noembed,
noframes,
param,
script,
source,
style,
track,
title {
  display: none;
}

/* 블록 요소 강제 설정 */
address, article, aside, blockquote, body, center, dd, dir, div, dl, dt, figure, figcaption,
footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, html, legend, listing, menu, nav, ol,
p, plaintext, pre, section, summary, ul, xmp {
  display: block;
}

/* 루비 텍스트 */
ruby {
  display: ruby;
}
rt {
  display: inline;
  display: ruby-text;
}

/* ======================================
   선택 영역 및 기타 효과
   ====================================== */
/* 텍스트 선택 영역 */
::selection {
  background: #222;
  color: #fff;
}

/* clearfix */
.clearfix::after {
  clear: both;
  content: '';
  display: block;
}

/* placeholder 색상 */
::-webkit-input-placeholder {
  color: #666 !important;
}
:-moz-placeholder {
  color: #666 !important;
  opacity: 1;
}
::-moz-placeholder {
  color: #666 !important;
  opacity: 1;
}
:-ms-input-placeholder {
  color: #666 !important;
}

/* 포커스 시 테두리 */
select:focus,
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus {
  border: 1px solid #222;
  outline: none;
}

/* autofill 시 박스 쉐도우 제거 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0px 1000px rgba(0, 0, 0, 0) inset !important;
}

/* ======================================
   스크롤바 스타일 (Webkit)
   ====================================== */
html::-webkit-scrollbar {
  width: 2px;
}

html::-webkit-scrollbar-track {
  background: #111;
}

html::-webkit-scrollbar-thumb {
  background-color: #e60012;
  border-radius: 100px;
}