/* 공통 CSS */

/*  폰트 */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

/* 태나다체 */
@font-face {
    font-family: 'Tenada';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2210-2@1.0/Tenada.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* 초기화 코드 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
ul, li {
  list-style: none;
}
a {
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
body {
  width: 100%;
  max-width: 800px;
  height: 100vh;
  margin: 0 auto;
  font-family: "Pretendard Variable",'Pretendard', Pretendard, 'Noto Sans KR', -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  background: #ebeff2;
  -ms-overflow-style: none; /* 인터넷 익스플로러 */
  scrollbar-width: none; /* 파이어폭스 */
}
body::-webkit-scrollbar {
    display: none;
}
img {
  width: 100%;
}
input {
  outline: none;
  font-family: 'Pretendard', "Pretendard Variable";
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
}
textarea {
  outline: none;
  resize: none;
  font-family: 'Pretendard', "Pretendard Variable";
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
}
select {
  outline: none;
  font-family: 'Pretendard', "Pretendard Variable";
}
button {
  font-family: 'Pretendard', "Pretendard Variable";
}

/* 색상변수 */
:root {
  --mainColor: #FF7B00;

  --blueColor: #2744FF;
  --blueGColor: #6590FF;
  --redColor: #ED2024;
  --redGColor: #910B0D;
  --greenColor: #009F0B;
  --greenGColor: #59CE72;
  --pinkColor: #ff6557;

  /* 폰트 색상 */
  --titColor: #333;
  --txtColor: #555;
  --txtGColor: #A6A6A6;
  --grayBtn: #9D9D9D;

  /* 박스 색상 */
  --borderLine: #e9e9e9;
  --borderBack: #f5f5f5;
  --disabledBack: #cacaca;
  --bottomLine: #DEDEDE;

  --backOrange: #FFD9B5;
  --backBlue: #B5D8FF;
  --backOrange2: #FFF4EA;
  --backBlue2: #EDF2FF;
  --backGreen: #eeffef;
  --backPink: #ffd3cf;
  --backPink2: #ffeceb;
}

/* 공통요소 */

/* 전체 레이아웃 */
.frame {
  width: 100%;
  min-height: 100vh;
  background-color: white;
}

.frameInner {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* 헤더 */
header {
  width: 100%;
  height: 56px;
  border-bottom: 1px solid var(--bottomLine);
  padding: 0 16px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 9999;
}
.headerInner {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 5px;
}
.headerInner span {
  font-size: 1.125rem;
  color: var(--titColor);
  font-weight: 600;
}

.headerLogo {
  height: 22px;
  margin: 0 auto;
}
.headerLogo > img {
  width: auto;
  height: 100%;
}

/* 내용 영역 */
.contentsArt {
  flex: 1;
  padding: 0 0 40px 0;
  -ms-overflow-style: none; /* 인터넷 익스플로러 */
  scrollbar-width: none; /* 파이어폭스 */
}
.contentsArt::-webkit-scrollbar {
    display: none;
}

/* 하단바 */
.bottomNav {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 65px;
  border-top: 1px solid var(--bottomLine);
  padding: 5px 20px;
  position: sticky;
  bottom: 0;
  background-color: white;
  flex-shrink: 0;
}
.bottomUl {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px
}

.bottomUl li {
  width: 25%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bottomMenus {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 0.8125rem;
  font-weight: 500;
}
.bottomMenus span {
  color: #CECECE;
  font-weight: 600;
}

.bottomIcon {
  width: 25px;
  height: 25px;
}

/* 뒤로가기 버튼 */
.backArrow {
  width: 24px;
  height: 24px;
  cursor: pointer;
}

@media screen and (max-width: 350px) {
  .bottomMenus {
    font-size: 0.75rem;
  }
}

/* 로딩 팝업 */
.loadingFrame {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  /* display: flex; */
  align-items: center;
  justify-content: center;
  display: none;
}

.loadingArt {
  display: flex;
  justify-content: center;
  align-items: center;
}

.loadingIcon {
  width: 90px;
  height: 90px;
}

/* 푸터 */
footer {
  background-color: #F2F2F2;
  padding: 20px;
}

.footerInner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.footerLogo {
  height: 20px;
}
.footerLogo img {
  width: auto;
  height: 100%;
}

.footerText {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
  font-size: 0.75rem;
  color: #999;
}

.footerLink {
  display: flex;
  align-items: center;
  gap: 5px;
}

.footerLink > li a {
  color: #888;
  font-size: 0.75rem;
  font-weight: 600;
}

.footerLink > li {
  display: flex;
  align-items: center;
  gap: 5px;
}
.footerLink > li:nth-child(2)::before {
  content: '';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1px;
  height: 10px;
  background-color: #888;
}

.footerCopy {
  font-size: 0.75rem;
  color: #aaa;
}