/* 공통 */

/* 폰트 */
/* 프리텐다드 */
@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");

/* 초기화 코드 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  -webkit-user-select: none;
  user-select: none;
}
ul, li {
  list-style: none;
}
a {
  text-decoration: 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;
}
img {
  width: 100%;
}
input {
  outline: none;
  font-family: 'Pretendard', "Pretendard Variable";
}
textarea {
  outline: none;
  resize: none;
  font-family: 'Pretendard', "Pretendard Variable";
}
select {
  outline: none;
  font-family: 'Pretendard', "Pretendard Variable";
}
button {
  font-family: 'Pretendard', "Pretendard Variable";
}

/* 색상변수 */
:root {
  --mainColor: #0264FD;
  --subColor: #FFC040;
  
  --urgentColor: #D83437;

  /* 기본 */
  --whiteColor: #fff;
  --blackColor: #000;
  --redColor: #ED2024;

  /* 텍스트 색상 */
  --titColor: #222;
  --txtColor: #333;
  --txt6Color: #666;
  --txt9Color: #999;
  --txtGColor: #B6B6B6;

  --txtBottom: #707070;
  --darkTxt: #181F48;

  /* 도형 */
  --borderLine: #CACACA;
  --backColor1: #F8F8F8;
  --backColor2: #eeeeee;
  --backBlue: #EAF4FF;
  --backRed: #FFEAEA;

  --inputLine: #989898;

}

/* 공통사항 */

/* 전체 레이아웃 */
.frame {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.frameInner {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 16px;
  overflow: auto;
}

/* 상단 네비게이션바 */
header {
  width: 100%;
  height: 64px;
  background-color: var(--whiteColor);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: space-between;
  flex-shrink: 0;
}

.headerDiv {
  display: flex;
  align-items: center;
  gap: 2px;
}
.backBtn {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.headerDiv > span {
  font-size: 17px;
  color: var(--titColor);
  font-weight: 600;
}

.headerCate {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 15px 0 0;
  font-size: 14px;
}
.headerCateIcon {
  width: 18px;
  height: 18px;
}

.headerCateM {
  color: var(--mainColor);
  font-weight: 500;
}

/* 타이틀만 있는 경우 */
.headerTitDiv {
  display: flex;
  align-items: center;
  padding: 0 0 0 16px;
}

.headerTitDiv > span {
  font-size: 17px;
  color: var(--titColor);
  font-weight: 600;
}

/* 헤더 버튼 */
.headerBtns {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 0 16px 0 0;
}

.replayBtn {
  width: 24px;
  height: 24px;
}

.noticeBtn {
  width: 24px;
  height: 24px;
  position: relative;
}
.noticeNew {
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 8px;
  background-color: var(--redColor);
  border-radius: 10px;
}

.noticeOn {
  display: none;
}

/* 하단 네비게이션 바 */
.menuList {
  position: fixed;
  bottom: 0;
  width: 100%;
  max-width: 800px;
  height: 56px;
  display: flex;
  background-color: var(--whiteColor);
  justify-content: space-evenly;
  align-items: center;
  gap: 10px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}

.menusIcon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.menus {
  width: 50px;
  height: 45px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 4px;
}
.menus > p {
  font-size: 12px;
  color: var(--txtBottom);
  font-weight: 500;
}

/* 인트로 페이지 */
.introFrame {
  width: 100%;
  height: 100vh;
  background-color: var(--mainColor);
  display: flex;
  align-items: center;
  justify-content: center;
}

.introImg {
  width: 200px;
}

@media screen and (max-width: 600px) {  
  .introImg {
    width: 140px;
  }
}

/* 공통 요소 */
.pointTxt {
  color: var(--mainColor);
}
.redTxt {
  color: var(--redColor);
}

/* 팝업 */
.popupArt {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  /* display: flex; */
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 9;
  display: none;
  margin: 0 auto;
}

/* 팝업 박스 */
.popupBox {
  max-width: 700px;
  background-color: var(--whiteColor);
  width: 90%;
  border-radius: 5px;
  position: relative;
  display: none;
}

/* 팝업 타이틀 */
.popupHeader {
  display: flex;
  flex-direction: column;
  align-items: end;
  padding: 7px;
  gap: 5px;
}
.popupTit {
  width: 100%;
  text-align: center;
  font-size: 15px;
  color: var(--txtColor);
  font-weight: 600;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.popupClose {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 10px;
  right: 10px;
}

/* 팝업 내용 */
.popupContents {
  width: 100%;
  padding: 0 10px 10px 10px;
}

/* 내용 부분 */
.popupInner {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 버튼 */
.popBtns {
  display: flex;
  align-items: center;
  justify-content: center;
}