@charset "UTF-8";
/* ============================================================================
   config.scss  —  똑똑수학 공통 디자인 토큰 (Single Source of Truth)
   ----------------------------------------------------------------------------
   · 색상 / 버튼 치수 / 폰트 / breakpoint 등 "여러 파일에서 공통으로 쓰이는 값"을
     이 파일 한 곳에서만 정의합니다.
   · 각 scss 파일 최상단에서  @import 'config';  로 불러와 사용합니다.
   ※ 색상 토큰 접두사는 $c- 로 통일 (각 파일의 로컬 변수명과 충돌 방지)
   ============================================================================ */
/* ── 브랜드 · 퍼플 (2025 기존) ──────────────────────────────────────────── */
/* ── 브랜드 · 인디고 (버튼/포인트) ──────────────────────────────────────── */
/* ── 브랜드 · 바이올렛 (2026 리뉴얼 메인) ───────────────────────────────── */
/* ── 브랜드 · 보라 틴트(보조) ───────────────────────────────────────────── */
/* ── 액센트 ────────────────────────────────────────────────────────────── */
/* ── gray ────────────────────────────────────────────────────────────── */
/* ── 버튼 치수 · 폰트 토큰 ─────────────────────────────────────────────── */
/* ── 공통 믹스인 ───────────────────────────────────────────────────────── */
/* ── 반응형 breakpoint (신규 작업용 표준값) ────────────────────────────────
   ※ 기존 미디어쿼리는 값이 제각각(1200/1440/770/768/500/640…)이라 자동 치환하지
      않았습니다. 앞으로 새로 작성하는 반응형은 아래 믹스인 사용을 권장합니다.
      예)  @include respond-to($bp-sm) { ... }   또는   @include respond-to(600px) { ... }
   ------------------------------------------------------------------------- */
/* 공통 토큰 로드 */
/* popup -----------------------------------------------------------------------------------------*/
.popup_wrap {
  width: 100%;
  height: auto;
  max-height: 880px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  background: #fff;
  min-width: 500px; /*20260630 넓이고정 */
  border-radius: 10px 10px 0 0;
}
.popup_wrap.w100vh {
  height: calc(100vh - 100px) !important;
}

/* 타이틀 */
.pop_tit {
  width: 100%;
  height: 60px;
  padding: 0 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: #865dd5; /*색상변경*/
  border-radius: 10px 10px 0 0;
}
.pop_tit.fullbg {
  border-radius: 0 !important; /*20260707 팝업타이틀 좌우둥근모양 제거*/
  padding: 20px;
}
.pop_tit {
  /*20260703 팝업타이틀 상단여백 삭제*/
}
.pop_tit h1 {
  font-size: 20px;
  color: #fff;
  font-weight: 500;
}
.pop_tit .btn_close {
  display: block;
  width: 30px;
  height: 30px;
  cursor: pointer;
  background: url(/resources/toctocmath/userImages/common/icon_popup_close-3e16ebc7961fb5bb2fa592c8982e9259.png) 50% 50% no-repeat;
}

/* 팝업내용 */
.pop_con {
  background: #fff;
  padding: 20px;
}
.pop_con .box_wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: auto;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.pop_con .box_wrap > * {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -webkit-box-flex: 1;
      -ms-flex: 1 1;
          flex: 1 1;
}

/* 비밀번호 생성 탭 */
.tab_pwd {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  color: #333;
}
.tab_pwd li {
  width: 33.3%;
  /*20260703 tab 가운데 정렬 padding 값모두삭제*/
}
.tab_pwd li a {
  height: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border: 1px solid #ddd;
  border-right: 0;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  font-size: 18px;
}
.tab_pwd li a.on {
  background: #5743cb;
  border: 1px solid #5743cb;
  color: #fff;
}
.tab_pwd li:last-of-type a {
  border-right: 1px solid #ddd;
}

/*초대코드+구성원 영역*/
.code_wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.code_wrap > div {
  width: 49%;
  margin-top: 0px; /*여백줄이기*/
}
.code_wrap > div > div {
  padding: 20px;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.code_wrap > div > div > button {
  width: 200px;
  height: 50px;
  font-size: 18px;
}
.code_wrap > div > div > button.disabled {
  background: gray;
  cursor: auto;
}
.code_wrap .code_txt {
  text-align: center;
  font-size: 20px;
  padding: 30px 0;
  word-break: keep-all;
}
.code_wrap .code_txt span {
  color: #5743cb;
}

/*초대코드*/
.input_code {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 30px;
}
.input_code div {
  margin: 0 4px;
  background: #efefef;
  border-radius: 10px;
  height: 80px;
  width: 80px;
  line-height: 85px;
  color: #333;
  text-align: center;
  font-size: 30px;
  font-weight: 700;
}

/*오류개선의견등록*/
.view_wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.view_wrap > div {
  width: 50%;
  padding: 20px;
}
.view_wrap > div > div {
  padding: 20px;
}
.view_wrap > div > div > button {
  width: 200px;
  height: 50px;
  font-size: 18px;
}

/*프로그레스바*/
.info_wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  opacity: 0;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  margin-bottom: 20px;
  width: 90%; /* 20260703 progress bar 넓이조절 */
}
.info_wrap.active {
  opacity: 1;
}
.info_wrap .progress_bar_wrap {
  width: 100%;
  padding: 20px 40px;
  background: #F5F5F5;
  border-radius: 37px;
}
.info_wrap .progress_bar2 {
  -progress-bar-per: 100%;
  position: relative;
  width: 100%;
  height: 18px;
  background: #E2E2E2;
  border-radius: 10px;
  overflow: hidden;
}
.info_wrap .time_info {
  color: #A4A4A4;
  font-size: 20px;
  margin-top: 20px;
}
.info_wrap .time_info em {
  color: #db5200;
  font-weight: 700;
  font-style: normal;
}

.progress_bar2 .active_bar {
  position: absolute;
  width: 100%;
  height: 18px;
  border-radius: 10px;
  right: calc(100% - var(--progress-bar-per));
  background: #db5200;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

/*구성원*/
.code_member {
  height: 350px;
  overflow: auto;
  border: 1px solid #ddd;
  border-top: 2px solid #4d399c;
  width: 100%; /* 20260702 교실입장구성원 넓이 100% 변경*/
}
.code_member li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 10px;
  padding: 5px;
  border-bottom: 1px solid #ddd;
}
.code_member li:last-child {
  border-bottom: none;
}
.code_member li button {
  font-size: 14px;
}
.code_member li .stu_state {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 0px;
}
.code_member li .stu_state li {
  border-bottom: none;
  margin: 0;
}
.code_member li .stu_state li span {
  font-size: 14px;
  font-weight: 500;
  border-radius: 30px;
  padding: 4px 16px;
}
.code_member li .stu_state li span.connect {
  color: #599e00;
  background-color: #e2f3e6;
}
.code_member li .stu_state li span.unconnect {
  color: #565656;
  background-color: #edeff1;
}
.code_member li .stu_state li:last-child {
  width: 90px;
}
.code_member .profile {
  width: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
.code_member .profile .profile_img {
  width: 50px;
  height: 50px; /*padding: 5px;*/
  border: 1px solid #bababa;
  margin: 0;
}
.code_member .profile > .name {
  text-align: left;
  padding-left: 10px;
}

/*버튼*/ /* 20260629 jys 버튼 사이즈 */
.popup_btn button {
  min-width: 120px;
  font-size: 22px;
  padding: 6px 50px;
}
.popup_btn button:nth-of-type(2n) {
  margin-left: 10px;
}
.popup_btn button:first-of-type {
  margin-left: 0px;
}

.popup_btn2 button {
  min-width: 120px;
  font-size: 22px;
  padding: 6px 50px;
}
.popup_btn2 button:nth-of-type(2n) {
  margin-left: 10px;
}
.popup_btn2 button:first-of-type {
  margin-left: 0px;
}

.popup_btn3 {
  text-align: right;
  margin-bottom: 10px;
}
.popup_btn3 button {
  padding: 0 20px;
}

/* 모달팝업 */
.body_fixed {
  height: 100%;
  min-height: 100%;
  overflow: hidden !important;
}

.overlay {
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 99998;
}

.modal_box {
  position: fixed;
  z-index: 99999;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-box-shadow: 0 0 50px 5px rgba(0, 0, 0, 0.3);
          box-shadow: 0 0 50px 5px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
.modal_box.login {
  width: 90%;
  max-width: 400px;
  height: auto;
}
.modal_box.social {
  width: 90%;
  max-width: 650px;
  height: auto;
}
.modal_box.social .pop_con {
  padding: 20px 30px;
}
.modal_box.w700 {
  width: 90%;
  max-width: 700px;
  height: auto;
}
.modal_box.w1200 {
  width: 90%;
  max-width: 1200px;
  height: auto;
}
.modal_box .pop_con {
  height: calc(100% - 60px);
  overflow: hidden;
  overflow-y: auto;
}
.modal_box .pop_con::-webkit-scrollbar {
  width: 8px; /* 스크롤바의 너비 */
}
.modal_box .pop_con::-webkit-scrollbar-thumb {
  height: 30%; /* 스크롤바의 길이 */
  background: #5743cb; /* 스크롤바의 색상 */
  border-radius: 20px;
}
.modal_box .pop_con::-webkit-scrollbar-track {
  background: #e5e5e5; /*스크롤바 뒷 배경 색상*/
}
.modal_box .pop_con .tit {
  font-size: 22px;
  text-align: center;
  line-height: 1.4;
}
.modal_box .pop_con .txt {
  font-size: 20px;
  margin: 15px auto;
  text-align: center;
  line-height: 1.4;
}
.modal_box .pop_con .txt_s {
  font-size: 16px;
  margin: 10px auto;
  text-align: center;
  line-height: 1.4;
}
.modal_box .pop_con p i {
  color: #322192;
  font-style: normal;
}
.modal_box .pop_con .warning_s {
  display: block;
  margin: 10px auto 0;
}
.modal_box .tbl_form td, .modal_box .tbl_form th {
  padding: 12px;
}
.modal_box .tbl_form td select {
  margin-bottom: 5px;
}

.social_btn {
  display: inline-block;
  width: 60px;
  height: 60px;
  padding: 5px;
  margin-right: 30px;
}
.social_btn:last-of-type {
  margin-right: 0px;
}
.social_btn img {
  width: 100%;
}

/*학교 찾기 리스트*/
.school_list {
  height: 250px;
  overflow: hidden;
  overflow-y: auto;
  border: 1px solid #ddd;
  border-top: 2px solid #5743cb;
}

/*커버이미지 변경*/
.img_change {
  width: 100%;
  height: 400px;
  overflow: auto;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 1px solid #ddd;
}
.img_change img {
  width: 100%;
}
.img_change p {
  width: 100%;
  height: 100%;
  background: #e6e9ec url("/resources/toctocmath/userImages/sub/fallback-c23841cf8947e62be05d578ad6798632.png") 50% 50% no-repeat;
  background-size: 250px;
}

/* 미디어쿼리 -----------------------------------------------------------------------------------------*/
/* 1500 */
@media (max-width: 1500px) {
  /*오류개선의견등록*/
  .view_wrap > div {
    width: 100%;
  }
}
/* 770 */
@media (max-width: 770px) {
  .modal_box .tbl_form .text, .modal_box .tbl_form select {
    width: 100%;
    margin-bottom: 5px;
  }
  /*초대코드+구성원 영역*/
  .code_wrap {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column nowrap;
            flex-flow: column nowrap;
    gap: 20px;
  }
  .code_wrap > div {
    width: 100%;
  }
  .code_wrap > div > div {
    padding: 15px;
  }
  .popup_wrap {
    min-width: 360px; /*20260703 넓이고정 */
  }
  .tbl_form th {
    font-size: 16px;
  }
  .popup_btn button {
    min-width: 100px;
    font-size: 20px;
    padding: 6px 30px;
  }
  .popup_btn2 button {
    min-width: 100px;
    font-size: 20px;
    padding: 6px 30px;
  }
}
/* 600 */
@media (max-width: 530px) {
  .modal_box .tbl_form .text, .modal_box .tbl_form select {
    width: 100%;
    margin-bottom: 5px;
  }
  .modal_box .tbl_form .text:last-of-type, .modal_box .tbl_form select:last-of-type {
    margin-bottom: 0;
  }
  .modal_box.scroll {
    height: 90%;
  }
}
/* 500 */
@media (max-width: 500px) {
  /* 비밀번호 생성 탭 */
  .tab_pwd li a {
    height: 50px;
    font-size: 15px;
  }
  /*초대코드*/
  .input_code {
    margin-bottom: 20px;
  }
  .input_code div {
    margin: 0 2px;
    background: #efefef;
    border-radius: 7px;
    height: 50px;
    width: 80px;
    line-height: 55px;
    font-size: 25px;
  }
  /*구성원*/
  .code_member {
    height: 250px;
  }
  /*버튼*/
  .popup_btn button {
    width: 100%;
    font-size: 18px;
    padding: 10px;
  }
  .popup_btn button:nth-of-type(2n) {
    margin-left: 0px;
    margin-top: 5px;
  }
  .popup_btn button:first-of-type {
    margin-left: 0px;
    margin-top: 0px;
  }
  .popup_btn2 button {
    width: 100%;
    font-size: 18px;
  }
  .popup_btn2 button:nth-of-type(2n) {
    margin-left: 0px;
    margin-top: 5px;
  }
  .popup_btn2 button:first-of-type {
    margin-left: 0px;
    margin-top: 0px;
  }
  .social_btn {
    margin-right: 10px;
  }
  /*커버이미지 변경*/
  .img_change {
    width: 100%;
    height: 300px;
    overflow: auto;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    border: 1px solid #ddd;
  }
}
/* 핸드폰 가로모드 팝업 세로길이 적용 */
@media (orientation: landscape) and (max-width: 850px) {
  .modal_box.scroll {
    height: 90%;
  }
}
/** 메인화면 팝업 */
.popup-root {
  border: 3px solid #389ADB;
  display: none;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: fixed;
  z-index: 10000;
  background-color: #fff;
  overflow: hidden;
  border-radius: 20px;
  overflow: auto;
  max-height: 90vh;
}
.popup-root .popup-header {
  padding: 8px;
  background-color: #389ADB;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}
.popup-root .popup-body {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-size: 20px;
  overflow: auto;
}
.popup-root .popup-footer {
  padding: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.popup-root .popup-footer label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.popup-root .popup-footer input {
  margin: 8px;
}
.popup-root .popup-close-button {
  padding: 4px 14px;
  background-color: #000;
  color: #fff;
  border: none;
  border-radius: 8px;
  margin-left: 12px;
  font-size: 16px;
  cursor: pointer;
}
.popup-root .popup-close-button:focus, .popup-root .popup-close-button:active {
  outline: none;
}

/* 20250926 수정- 팝업에서 헤더는 스크롤에 제외하기 위함.

.popup-root::-webkit-scrollbar {width: 12px;}
.popup-root::-webkit-scrollbar-track {background-color: #F5F5F5; border-radius: 10px;}
.popup-root::-webkit-scrollbar-thumb {border-radius: 10px; background-color: $c-yellow;}
.popup-root::-webkit-scrollbar-button {width: 0; height: 0;}
*/
.popup-body::-webkit-scrollbar {
  width: 12px;
}
.popup-body::-webkit-scrollbar-track {
  background-color: #F5F5F5;
  border-radius: 10px;
}
.popup-body::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #ffdf3d;
}
.popup-body::-webkit-scrollbar-button {
  width: 0;
  height: 0;
}

#popup-dim {
  position: fixed;
  left: 0;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  z-index: 9999999;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5607843137);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

/*모바일 & 테블릿용 팝업*/
@media screen and (max-width: 1200px) {
  .popup-root {
    display: none;
    position: fixed;
    top: 50% !important;
    left: 50% !important;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    min-width: 350px;
    max-height: 90%;
    max-width: 90% !important;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }
  .popup-root .popup-body {
    font-size: 15px;
  }
  .popup-body img {
    width: -webkit-fill-available !important;
  }
}
@media screen and (max-width: 270px) {
  .popup-root {
    display: none !important;
  }
}