:root {
  /* 메인 컬러 */
  --color-primary: #7e4f40;
  --color-sub-dark: #a47768;
  --color-sub-light: #fff1ec;
  --color-primary-shadow: rgba(126, 79, 64, 0.4);
  --color-primary-shadow-light: rgba(126, 79, 64, 0.2);
}

/* 배경 메인 */
.bgMain article {
  background-color: #fbf6f2;
}
.prot .findBtn {
  background-color: #7e4f40;
}
.prot .findBtn:hover {
  background-color: #542819;
}
.iconBtn.view:not(.tutorialTour):before,
.iconBtn.select:not(.tutorialTour):before {
  display: none;
}
.iconBtn.view:before,
.iconBtn.select:before {
  background: none;
}
.iconBtn.view span {
  padding-left: 24px;
  background: url(../imagesPro/iconView.svg) no-repeat left center/16px;
}
.iconBtn.select span {
  padding-left: 24px;
  background: url(../imagesPro/iconSelect.svg) no-repeat left center/16px;
}
/* 튜토리얼 페이지 타이틀 */
.tutorialPageTit {
  top: 50px;
}
main:has(.tutorialPageTit) {
  margin-top: 50px !important;
}
main:has(.tutorialPageTit).mt0 .basicWrap {
  min-height: calc(100vh - 50px);
}

main:has(.tutorialPageTit) .pageTit {
  padding-top: 32px;
}

main:has(.tutorialPageTit):has(.notifiStep) .notifiStep {
  position: relative;
  top: 0;
  padding-top: 25px;
}

main:has(.tutorialPageTit):has(.notifiStep) .notifiStep:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 28px;
  background-color: #fff;
}

main:has(.tutorialPageTit):has(.notifiStep) .pageTit {
  padding-top: 0;
  margin-top: -15px;
}

main:has(.tutorialPageTit) .patientInfo {
  padding-top: 0;
}

main:has(.tutorialPageTit) .patientInfo__care--tit {
  margin-top: 24px;
}

main:has(.tutorialPageTit) .notifiComple__txt {
  padding-top: 90px;
}

main:has(.tutorialPageTit) .notifiComple__txt .compleCheck {
  margin-bottom: 22px;
  position: relative;
  top: 0;
  left: 0;
  width: 60px;
  height: 60px;
  transform: none;
  animation: none;
}

main:has(.tutorialPageTit) .notifiComple__txt .compleCheck:before {
  display: none;
  animation: none;
}

main:has(.tutorialPageTit) .headerFilter {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 600px;
  transform: none;
  background-color: #fff;
}

main:has(.tutorialPageTit) .headerFilter + .careList__item ul {
  padding-top: 24px !important;
}
.radioCheckSel input[type="radio"]:disabled + label {
  background-color: #fff;
  color: inherit;
}
textarea:disabled {
  background-color: #fff;
  font-weight: 400;
}
.autoMatch__pickBox--list .radioCheckSel input:disabled ~ div {
  background-color: #fff;
}
.autoMatch__pickBox--list .radioCheckSel input:disabled ~ div p {
  color: #111;
}
.autoMatch__pickBox--list .radioCheckSel input:disabled ~ div span {
  color: #111;
}
.map__wrap {
  position: relative;
  background: url(../imgTuto/img_mapPro.png) no-repeat center;
}
.map__wrap:before {
  position: absolute;
  content: "";
  display: block;
  width: 38px;
  height: 43px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url(../imgTuto/ic_mapMarker.svg) no-repeat center;
}
.alyCagivDet__data--chart {
  text-align: center;
  height: auto;
}
.alyCagivDet__data--chart img {
  display: inline-block;
  max-height: 268px;
}
header.tutorial .headerWrap > div .closeBtn {
  background-size: 14px;
}
.introTuto {
  padding-top: 50px;
}
.introTuto .introTuto__tit h2 {
  margin-top: 24px;
  font-size: 22px;
  line-height: 1.36;
  letter-spacing: -1.5px;
}
.introTuto .introTuto__tit p {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.42;
  letter-spacing: -0.7px;
}
.introTuto.start .introTuto__tit {
  padding-top: 30px;
}
.introTuto.start .introTuto__tit h2 {
  margin-top: 0;
}
.introTuto .introTuto__step {
  margin-top: 20px;
}
.introTuto .introTuto__step ol li ~ li {
  padding-top: 12px;
}
.introTuto.start .introTuto__step--start {
  margin-top: 32px;
  padding: 0 20px;
}
.introTuto.start .introTuto__step--start ol {
  display: flex;
}
.introTuto.start .introTuto__step--start ol li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(100% / 3);
  gap: 8px;
  text-align: center;
}
.introTuto.start .introTuto__step--start ol li ~ li:before {
  content: "";
  position: absolute;
  top: 35px;
  left: -8px;
  width: 16px;
  height: 16px;
  background: url(../imagesPro/arrowStep.svg) no-repeat center / contain;
}
.introTuto.start .introTuto__step--start ol li figure {
  position: relative;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 44px;
  box-shadow: 0 0 10px var(--color-primary-shadow-light);
}
.introTuto.start .introTuto__step--start ol li figure:before {
  content: "";
  position: absolute;
  top: 0;
  left: 8px;
  transform: translateX(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  line-height: 24px;
  text-align: center;
  z-index: 1;
}
.introTuto.start .introTuto__step--start ol li div h3 {
  font-size: 14px;
  line-height: 1.42;
  font-weight: bold;
  letter-spacing: -0.7px;
}
.introTuto.start .introTuto__step--start ol li:nth-child(1) figure {
  background-image: url(../imagesPro/ic_tutoStep01.svg);
}
.introTuto.start .introTuto__step--start ol li:nth-child(1) figure:before {
  content: "01";
}
.introTuto.start .introTuto__step--start ol li:nth-child(2) figure {
  background-image: url(../imagesPro/ic_tutoStep02.svg);
}
.introTuto.start .introTuto__step--start ol li:nth-child(2) figure:before {
  content: "02";
}
.introTuto.start .introTuto__step--start ol li:nth-child(3) figure {
  background-image: url(../imagesPro/ic_tutoStep03.svg);
}
.introTuto.start .introTuto__step--start ol li:nth-child(3) figure:before {
  content: "03";
}
.introTuto.start .introTuto__step--btn {
  margin-top: 30px;
  padding: 0 20px;
}
.introTuto.start .introTuto__step--btn button {
  cursor: pointer;
}
.introTuto.start .introTuto__step--btn button ~ button {
  margin-top: 12px;
}
.tutorialPageTit .tutorialProgress__bar--fill {
  background-color: #a47768;
}
.notifiPlace__result ul li .tutorialTour:before {
  left: 0;
  width: 100%;
}

.popup .popupWrap__tutoTit {
  padding-top: 32px;
  text-align: center;
}
.tutorialEnd__tit {
  position: relative;
  padding-bottom: 62px;
  text-align: center;
}
.tutorialEnd__tit p {
  margin-top: 24px;
  font-size: 22px;
  line-height: 1.36;
  letter-spacing: -1.1px;
}
.tutorialEnd__tit span {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.43;
  letter-spacing: -0.7px;
}
/* 보호자 포인터 위치 값 */
.iconBtn.tutorialTour:after {
  top: 16px;
  right: -23px;
  animation: tutorialPointerFloat 1s ease-in-out infinite;
}

.radioSelectCheck__box.tutorialTour:after {
  top: 100px;
  right: -20px;
  animation: tutorialPointerFloat 1s ease-in-out infinite;
}
.radioSelectCheck__box.timeCare.tutorialTour:after {
  right: 6px;
  animation: tutorialPointerFloat 1s ease-in-out infinite;
}

.radioCheckSel.tutorialTour:after {
  top: 12px;
  right: 20px;
  animation: tutorialPointerFloat 1s ease-in-out infinite;
}

.checkBoxSel.tutorialTour:after {
  top: 11px;
  right: 8px;
  animation: tutorialPointerFloat 1s ease-in-out infinite;
}

.notifiCustom__sel.second .radioSelectCheck__box.tutorialTour:after {
  right: 6px;
  animation: tutorialPointerFloat 1s ease-in-out infinite;
}

.solidBtn.tutorialTour:after {
  top: 2px;
  right: 16px;
  animation: tutorialPointerFloat 1s ease-in-out infinite;
}

.notifiSearch__form--input.tutorialTour:after {
  top: 4px;
  right: 58px;
  animation: tutorialPointerFloat 1s ease-in-out infinite;
}
.notifiSearch__form--input.tutorialTour.brown:after {
  top: 0;
  right: -14px;
  animation: tutorialPointerFloat 1s ease-in-out infinite;
}
.notifiSearch__form--input .tutorialTour:after {
  top: 4px;
  right: 10px;
  animation: tutorialPointerFloat 1s ease-in-out infinite;
}

.notifiPlace__result > ul li button.tutorialTour:after {
  top: 12px;
  right: 18px;
  animation: tutorialPointerFloat 1s ease-in-out infinite;
}

.notifiRegis__pait--form li .tutorialTour:after {
  top: 5px;
  right: 30px;
  animation: tutorialPointerFloat 1s ease-in-out infinite;
}
.notifiRegis__pait--form li:nth-child(2) .tutorialTour:after {
  top: 11px;
  right: 3px;
  animation: tutorialPointerFloat 1s ease-in-out infinite;
}
.notifiRegis__pait--form li:nth-child(6) .tutorialTour {
  overflow: visible;
}
.notifiRegis__pait--form li:nth-child(6) .tutorialTour:after {
  top: 6px;
  right: 28px;
  animation: tutorialPointerFloat 1s ease-in-out infinite;
}

.notifiRegis__paitDet .radioCheckSel.tutorialTour:after,
.notifiRegis__paitDet .checkBoxSel.tutorialTour:after {
  top: 11px;
  right: 8px;
  animation: tutorialPointerFloat 1s ease-in-out infinite;
}

.autoMatch__pickBox--list .radioCheckSel.tutorialTour input + label {
  border: 0;
}
.autoMatch__pickBox--list .radioCheckSel.tutorialTour:after {
  top: auto;
  right: 16px;
  bottom: -30px;
  animation: tutorialPointerFloat 1s ease-in-out infinite;
}

.popup.tutorial .popupWrap__btn button.tutorialTour:after {
  top: 14px;
  right: 28px;
  animation: tutorialPointerFloat 1s ease-in-out infinite;
}

.date-start.tutorialTour:after {
  top: 7px;
  right: 29px;
  animation: tutorialPointerFloat 1s ease-in-out infinite;
}

.btnWrap:has(:nth-child(2)) button.tutorialTour:after {
  top: 7px;
  right: 1px;
  animation: tutorialPointerFloat 1s ease-in-out infinite;
}

.myPageList ul li.tutorialTour:after {
  top: 4px;
  right: 50%;
  animation: tutorialPointerFloat 1s ease-in-out infinite;
}

.notifiItems.tutorialTour:after {
  top: 91px;
  right: 50%;
  animation: tutorialPointerFloat 1s ease-in-out infinite;
}
@media screen and (max-width: 321px) {
  .introTuto.start .introTuto__step--start ol li figure {
    width: 66px;
    height: 66px;
    background-size: 30px;
  }
  .introTuto.start .introTuto__step--start ol li div h3 {
    font-size: 12px;
  }
  .introTuto.start .introTuto__step--start ol li ~ li:before {
    top: 25px;
  }
}