@charset "utf-8";

.ideology-tit { margin-bottom: clamp(30px, calc(110 / var(--inner) * 100vw), 110px); }
.ideology-tit h2 { margin-top: var(--space-25); font-size: var(--font-size-50); line-height: 1.2em; color: var(--dark-color); }
.ideology-item { display: flex; gap: 20px var(--space-80); align-items: center; }
.ideology-item:not(:last-child) { margin-bottom: var(--space-120); }
.ideology-item .img {width: 49.2857%;}
.ideology-item .txt { flex: 1; }
.ideology-item .wrap { display: flex; flex-direction: column; gap: 10px; }
.ideology-item h3 { margin-bottom: var(--space-25); font-size: var(--font-size-40); line-height: 1.2em; color: var(--primary-color); }
.ideology-item strong { display: block; width: fit-content; font-weight: 600; text-decoration: underline; text-underline-offset: -3px; text-decoration-thickness: 12px; text-decoration-color: #dff3f1; text-decoration-skip-ink: none; }
.sec-ideology-banner {position: relative; padding: var(--space-120) 0; margin-top: var(--space-120); background: url('/images/sub/bg-ideology-banner.jpg') no-repeat center center / cover; color: #fff; text-align: center;}

.sec-ideology-banner strong {font-size: var(--font-size-18);}
.sec-ideology-banner h2 {font-size: var(--font-size-40); line-height: 1.2em; font-weight: 700; margin-bottom: var(--space-25); margin-top: var(--space-15);}
.sec-ideology-banner p {margin-bottom: var(--space-55); opacity: .7; font-size: var(--font-size-19);}

.doctor-name { margin-bottom: var(--space-35); font-size: var(--font-size-48); line-height: 1.2em; font-weight: 700; }
.doctor-name span { margin-left: 20px; }
.doctor-img {width: 36.42857%;}
.doctor-box {position: relative; margin-bottom: var(--space-40); background: var(--secondary-color); padding: var(--space-35); border-radius: 10px; font-size: var(--font-size-18); line-height: 2em; font-weight: 500;}
.doctor-box:before  {content:''; width: 33.33333%; height: 100%; height: 71px; position: absolute; right: 0; bottom: 0; background: url('/images/sub/ideology-banner-deco.png') no-repeat right bottom / contain;}
.doctor-profile { display: flex; gap: clamp(30px, calc(70 / var(--inner) * 100vw), 70px); }
.doctor-info { flex: 1; display: flex; flex-direction: column; gap: var(--space-55); justify-content: center; font-size: var(--font-size-18); font-weight: 500; }
.doctor-info h3 { padding-bottom: var(--space-15); margin-bottom: var(--space-25); width: 220px; height: 50px; border-bottom: 1px solid var(--primary-color); font-size: var(--font-size-22); line-height: 1.2em; }
.doctor-info li:not(:last-child) { margin-bottom: 10px; }

.doctor-name {max-width: 1460px; padding: 0 var(--container-space); margin: 0 auto var(--space-35); font-size: var(--font-size-48); line-height: 1.2em; font-weight: 700; }
.doctor-name span { margin-left: 20px; }
.sec-greetings {padding: var(--space-120) 0;font-family: 'MaruBuriBold'; background: #f9f9f8; font-size: var(--font-size-20); line-height: 1.4em; }
.sec-greetings h2 {position: relative; width: fit-content; padding: 0 40px; font-size: var(--font-size-48); line-height: 1.16667em; font-weight: 400; margin:0 auto var(--space-30); color: var(--dark-color);}
.sec-greetings h2:before, .sec-greetings h2:after {content:''; position: absolute;top: 8px; left: 0; width: 25px; height: 19px; background: url('/images/sub/quote.png') no-repeat center center / contain;}
.sec-greetings h2:after {left: auto; right: 0; transform: scale(-1)}
.sec-greetings h3 {margin-bottom: var(--space-30); font-weight: 500; font-size: var(--font-size-28); line-height: 1.3em; color: var(--dark-color);}
.sec-doctor {display: flex; align-items: center; background: #e6e5e1 url('/images/sub/doctor-moever-txt.png') no-repeat right bottom / 29.114583%;;}
.doctor-img {width: 50%;}
.doctor-profile {flex:1; max-width:750px; padding: var(--space-60) 0; padding-right: var(--container-space);}
.doctor-info-item:not(:last-child) {margin-bottom: var(--space-60);}
.doctor-info-item h3 {margin-bottom: var(--space-20); padding-bottom: var(--space-20); border-bottom: 2px solid var(--primary-color); font-size: var(--font-size-28); line-height: 1.2em; font-weight: 700; color: var(--dark-color);}
.doctor-info-item li {font-size: var(--font-size-20); line-height: 1.5em; font-weight: 500;}
.doctor-info-item li:not(:last-child) {margin-bottom: 10px;}

.page-location { font-size: var(--font-size-18); }
.location-address strong { display: block; margin-bottom: 10px; font-size: var(--font-size-22); line-height: 1.2em; font-weight: 700; }
.btn-naver { display: flex; align-items: center; gap: 10px; width: fit-content; padding: 13px 30px; background: #00c73c; border-radius: 12px; font-size: var(--font-size-16); font-weight: 600; color: #fff; }
.location-map { height: 500px; margin: 30px 0 40px; border-radius: 12px; overflow: hidden; }
.location-cnt { overflow: hidden; }
.location-cnt .group { width: calc((100% - 50px) / 2); float: left; }
.location-cnt .group:nth-child(even) { float: right; }
.location-cnt .group:not(:last-child) { margin-bottom: var(--space-55); }
.location-cnt h3 { padding-bottom: var(--space-15); margin-bottom: var(--space-25); border-bottom: 1px solid var(--primary-color); font-size: var(--font-size-22); line-height: 1.2em; font-weight: 700; color: var(--dark-color); }
.location-cnt strong { display: block; margin-bottom: var(--space-35); font-size: var(--font-size-22); line-height: 1.2em; color: var(--dark-color); }
.location-contacts { display: flex; gap: 10px; }
.location-contact { display: flex; align-items: center; gap: 10px; background: var(--primary-color); color: #fff; font-size: var(--font-size-16); font-weight: 600; padding: 14px 28px; border-radius: 30px; }
.location-cnt li { display: flex; }
.location-cnt li:not(:last-child) {margin-bottom: 10px;}
.location-cnt li span { min-width: 120px; font-weight: 700; }
.page-treatment .contain { position: relative; }
.page-treatment .sec:not(:last-child) { margin-bottom: var(--space-120); }
.sec-welcome .group:not(:last-child) { margin-bottom: var(--space-100); }
.welcome-video {position: relative; width: 100%; padding-bottom: 58.12965%; overflow: hidden; border-radius: 12px;}
.welcome-video video {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center;}
.group-welcome-photo { position: relative}
.group-welcome-photo .welcome-img { margin-left: auto; width: 68%;}
.group-welcome-photo .welcome-img img {width: 100%;}
.group-welcome-photo strong { position: absolute; left: var(--container-space); top: 50%; transform: translateY(-50%); font-size: var(--font-size-64); line-height: 1.09375em; font-weight: 700; color: var(--dark-color); z-index: 1;}
.group-welcome-txt {text-align: center;}
.welcome-large-txt {margin-bottom: var(--space-25); font-size: var(--font-size-30); line-height: 1.466667em; font-weight: 700;}
.welcome-title {gap: clamp(15px, calc(40 / var(--inner) * 100vw), 40px); margin-bottom: var(--space-60); font-size: var(--font-size-64);  line-height: 1em; font-weight: 700;}
.welcome-title strong {color: #fff;}
.welcome-title span { display: block; width: 90px; height: 1px; background: var(--gradient-color); }
.group-welcome-banner { padding: var(--space-120) 0; background: url('/images/sub/bg-method-banner.jpg') no-repeat center center / cover; color: #fff;;}
.sec-doctor-banner {position: relative; background: var(--primary-color);  color: #fff; overflow: hidden;}
.page-treatment .sec-doctor-banner .contain {position: unset;}
.sec-doctor-banner .txt {padding: var(--space-120) 0; flex:1; max-width: 50%;}
.sec-doctor-banner h2 {margin-bottom: var(--space-40); font-size: var(--font-size-40); line-height: 1.35em; font-weight: 700;}
.sec-doctor-banner strong {display: block; font-size: var(--font-size-30);}
.doctor-banner-img {position: absolute; right: 0; top: 0; max-width: 50%; height: 100%; overflow: hidden;}
.doctor-banner-img img {height: 100%; object-fit: cover;}
.group-flex {color: var(--dark-color); display: flex; gap: 20px;}
.group-flex-tit {margin-bottom: var(--space-55);}
.group-flex-tit.group-flex-txt {margin-bottom: 0;}
.group-flex-tit h3 {display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-35); font-size: var(--font-size-40); line-height: 1.2em; font-weight: 700; color: var(--dark-color);}
.circle-num {display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 100%; background:var(--primary-color); font-size: var(--font-size-18); line-height: 1em; font-weight: 700; color: #fff;}
.group-flex .desc p:not(:last-child) {margin-bottom: 1em;}
.group-flex-txt, .group-flex-img {flex:1;}
.group-flex-txt .desc {max-width: 540px;}
.group-flex-txt li {position: relative; padding-left: 24px;}
.group-flex-txt li:before {content: ''; position: absolute; left: 0; top: .4em; width: 12px; height: 14px; background: url('/images/sub/icon-list.png') no-repeat center center / contain; }
.group-flex-txt li:not(:last-child) {margin-bottom: var(--space-15);}
.sec-treatment .group:not(:last-child) {margin-bottom: var(--space-120);}
.sec-treatment .main-reservation {width: fit-content; margin: var(--space-60) auto 0;}
.group-case h3 {margin-bottom: clamp(20px, calc(30 / var(--inner) * 100vw), 30px); font-size: var(--font-size-30); line-height: 1.46667em; font-weight: 700; color: var(--dark-color);}
.case-boxes {display: flex;flex-wrap: wrap; padding: var(--space-60); background: #f5f5f5; border-radius: 12px; text-align: center; font-size: var(--font-size-16);}
.case-imgs, .case-boxes {display: flex; flex-wrap: wrap; gap: 18px; justify-content: center;}
.case-boxes.no-bg {padding: 0; background: transparent;}
.case-box {flex:1 1 auto; max-width:calc((100% - 18px) / 2);}
.case-box.full {max-width: 100%;}
.case-imgs .case-img {flex:1 1 auto; width:calc((100% - 18px) / 2);}
.case-img {flex:1; position: relative; border-radius: 12px; overflow: hidden;}
.case-img .img {position: relative; width: 100%; padding-bottom: 63.65079%; overflow: hidden;}
.case-img .img img {position: absolute; width: 100%; height: auto; max-width: 100%; min-height: 100%; left: 0; top: 50%; transform: translateY(-50%); object-fit: cover;}
.case-txt {margin-top: var(--space-25);}
.group-flex-txt h4 {margin-bottom: var(--space-25); font-size: var(--font-size-30); line-height: 1.2em; font-weight: 700; color: var(--dark-color);}

.page-method .group-flex:not(:last-child) {margin-bottom: var(--space-60);}
.page-method .group-flex-txt {padding-top: 15px;}
.page-method .group-flex-txt > * {padding-left: var(--space-60);}
.case-boxes:not(:last-child) {margin-bottom: var(--space-35);}
.after-cover {display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,.8); font-weight: 600; color: var(--dark-color);}
.after-login .after-cover {opacity: 0;}

.page-transparent .sec:not(:last-child) {margin-bottom: clamp(50px, calc(170 / var(--inner) * 100vw), 170px);}
.sec-rules:not(:last-child) {padding-bottom: clamp(10px, calc(80 / var(--inner) * 100vw), 80px);}
.rules-txt {margin-bottom: var(--space-55); color: var(--dark-color); font-size: var(--font-size-21); line-height: 1.619em;}
.rules-txt h2 {margin-bottom: var(--space-30); font-size: var(--font-size-40); line-height: 1.2em;}
.rules-txt h2 em {color: var(--primary-color); border-bottom: clamp(5px, calc(13 / var(--inner) * 100vw), 13px) solid var(--secondary-color); line-height: 0.5em; display: inline-block;}
.interstitial-text {margin: var(--space-55) 0; font-size: var(--font-size-21); line-height: 1.619em; font-weight: 500; color: var(--dark-color); letter-spacing: -0.04em;}

.accordion-box {padding: clamp(20px, calc(60 / var(--inner) * 100vw), 60px); background: var(--secondary-color); border-radius: var(--radius-20); cursor: pointer;}
.accordion-box:not(:last-child) {margin-bottom: var(--space-40);}
.accordion-question, .accordion-answer {position: relative; padding-left: 80px; color: var(--dark-color);}
.accordion-question {padding-right: 50px; font-size: var(--font-size-22); line-height: 1.2em; font-weight: 700;}
.accordion-answer {display: none; margin-top: clamp(20px, calc(85 / var(--inner) * 100vw), 85px); padding-right: var(--space-30);}
.accordion-question:before, .accordion-answer:before {position: absolute; left: 0; top: 0; font-size: var(--font-size-40); line-height: 1em; color: var(--primary-color); font-family: "Montserrat", sans-serif; font-weight: 700;}
.accordion-question:before {content: 'Q .'; top: 50%; transform: translateY(-50%);}
.accordion-answer:before {content: 'A .';}
.accordion-question:after {content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 22px; height: 11px; background: url('/images/sub/icon-arrow-down.png') no-repeat center center / contain;}
.accordion-answer p {margin-bottom: var(--space-30);}
.answer-cnt:not(:last-child), .answer-flex {margin-bottom: var(--space-35);}
.accordion-photoes {display: flex; gap: var(--space-20); flex-wrap: wrap; justify-content: center;}
.accordion-photo {flex: 1 1 auto; max-width: calc((100% - var(--space-20)) / 2);}
.accordion-photoes-desc {margin-top: var(--space-15); font-size: var(--font-size-16); line-height: 1.5em; letter-spacing: -0.04em; color: #444; text-align: center;}
.answer-flex {display: flex; gap: var(--space-40);}
.answer-flex .img {width: 32.48%;}
.answer-flex .txt {flex:1;}

/* calendar */
.page-reservation {display: flex; gap: 20px;}
.reservation-calender {display: flex; flex-direction: column; justify-content: space-between; gap: 30px; }
.reservation-form, .reservation-calender {width: 67.85715%; padding: clamp(20px, calc(50 / var(--inner) * 100vw), 50px); border: 1px solid #ddd; border-radius: 12px; }
.card {
  width: 500px;
  height: fit-content;
  background-color: #FFFFFF;
  margin: 0 auto;
}

.calendar-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  padding-bottom: 15px;
}

.calendar-toolbar > .current-month {
  font-size: var(--font-size-22);
  font-weight: bold;
  color: var(--dark-color);
}

.calendar-toolbar > [class$="month-btn"] {
  width: 40px;
  aspect-ratio: 1;
  text-align: center;
  line-height: 40px;
  font-size: 24px;
  color: var(--dark-color);
  background: #fff;
  border: none;
  border-radius: 15px;
}

.weekdays,
.calendar-days {
  display: flex;
  flex-wrap: wrap;
  padding-inline: 18px;
  gap: var(--space-30);
}
.weekdays {
  padding-top: 12px;
  margin-bottom: var(--space-30);
}
.calendar-days {
  padding-bottom: 12px;
}

.weekday-name,
[class$="-day"] {
  width: 40px;
  height: 40px;
  color: var(--dark-color);
  text-align: center;
  line-height: 40px;
  font-weight: 500;
  font-size: 1rem;
}

.weekday-name {
  color: var(--dark-color);
  font-weight: 700;
}

.current-day {
  background: var(--primary-color);
  color: #fff;
  border-radius: 100%;
  transition: 0.5s;
  cursor: pointer;
}

.next-month-day {color: #ddd;}

.padding-day {
  color: #a5a5a5;
  user-select: none;
}

.calendar-toolbar > [class$="month-btn"]:hover,
.month-day:hover,
.btn:hover {
  color: var(--primary-color);
  transition: 0.1s;
  cursor: pointer;
}

.calendar-toolbar > [class$="month-btn"]:focus,
.month-day:focus,
.btn:focus {
  border-radius: 15px;
  background-color: var(--primary-color);
  color: #f8f7fa;
}

.goto-buttons {
  border-top: 1px solid #efefef;
  padding-block: 18px;
  display: flex;
  justify-content: space-evenly;
}

.btn {
  background: #f8f7fa;
  border: none;
  border-radius: 15px;
  padding: 11px 13px;
  color: var(--dark-color);
  font-family: "Quicksand", sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  margin-right: 1px;
  box-shadow: 0px 0px 0px #efefef;
}

.reservation-time-list ul, .subjects-list ul {display: flex; flex-wrap: wrap; margin: -6px;}
.reservation-time-list li, .subjects-list li {width: 20%; padding: 6px;}
.reservation-time-list input, .subjects-list input {display: none;}
.reservation-time-list label, .subjects-list label {display: block; padding: 8px 15px; background: #f5f5f5; border-radius: 40px; text-align: center; font-size: var(--font-size-16); line-height: 2em; font-weight: 600; color: #999; cursor: pointer;}
.reservation-time-list input:checked ~ label, .subjects-list input:checked ~ label {background: var(--primary-color); color: #fff;}
.subjects-list li {width: 50%;}
.reservation-form {flex:1;}
.reservation-form .group:not(:last-child) {margin-bottom: var(--space-35);}
.form-group-tit {margin-bottom: var(--space-25); font-size: var(--font-size-18); font-weight: 700; color: var(--dark-color);}
.reservation-form .input {width: 100%; border-radius: 24px;}
.check {margin-bottom: 20px; font-size: var(--font-size-16); color: #454545;}
.check a {margin-left: 5px; font-size: var(--font-size-15); text-decoration: underline; text-underline-offset: 4px;}
.check .checkbox {margin-top: 0;}
.btn-reservation {display: block; width: 100%; border: 1px solid var(--primary-color); text-align: center; padding: 12px; border-radius: 40px; font-size: 16px; font-weight: 600; color: var(--primary-color); cursor: pointer;}
.btn-reservation:hover {background: var(--primary-color); color: #fff;}

/* 시간 선택 안내 박스 */
.time-guide {
    padding: 20px;
    margin-bottom: 20px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    text-align: center;
    color: #6c757d;
    font-size: var(--font-size-16);
    font-weight: 500;
}

/* 달력 날짜 셀 기본 스타일 보정 */
.current-day,
.month-day {
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
}

/* 선택된 날짜 스타일 */
.current-day.selected,
.month-day.selected {
    background: var(--third-color) !important;
    color: #FFF !important;
}

/* 날짜 호버 효과 */
.current-day:hover,
.month-day:hover {
    background: rgba(94, 196, 188, 0.1) !important;
    cursor: pointer;
}

/* 과거 날짜 스타일 */
.current-day.past,
.month-day.past {
    color: #ccc !important;
    background: transparent !important;
    cursor: not-allowed !important;
}

.current-day.past:hover,
.month-day.past:hover {
    background: transparent !important;
    cursor: not-allowed !important;
}