/* Custom CSS */

/* ===== HERO FONT OVERRIDE — force HelveticaLT93 on home hero h2 ===== */
/* app-local.css sets "Fraunces" without !important — this overrides it */
body.home .home-wrap .part-1 h2,
body.home .home-wrap .part-1 h2 * {
  font-family: 'HelveticaLT93', 'Arial Black', sans-serif !important;
  font-weight: 900 !important;
}

/* ===== HERO HEADLINE SCALE — 2026 ===== */
body.home .home-wrap .part-1 h2 .brand-char {
  font-size: clamp(68px, 10.5vw, 138px) !important;
}
@media only screen and (max-width: 809px) {
  body.home .home-wrap .part-1 h2 .brand-char {
    font-size: clamp(52px, 14vw, 80px) !important;
  }
}

/* ===== SIDEBAR BACKDROP — click outside to close =====
   Transparent overlay covers main content when sidebar is open.
   Clicking it fires the JS closeSidebar() handler. */
#sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000; /* below #sidebar (1001) so sidebar stays on top */
  background: transparent;
  cursor: pointer;
}
#sidebar-backdrop.active {
  display: block;
}

/* ===== SIDEBAR SCROLL FIX =====
   iOS Safari bug: transform + overflow:auto on same element breaks scrolling.
   Fix: move overflow to inner wrapper, sidebar becomes a flex column. */
#sidebar {
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}
#sidebar .sidebar-contents {
  flex: 1;
  min-height: 0; /* required: lets flex child shrink so overflow triggers */
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
body.show-sidebar {
  overflow: hidden !important;
}


/* S3 Treatments — new background images with dark overlay for text legibility */
.home-wrap .part-3 .part-3-contents .part-3-content.part-3-1 {
  background: linear-gradient(rgba(30,20,15,0.45), rgba(30,20,15,0.45)),
              url('../img/home/index-s2-1.png') center/cover no-repeat !important;
}
.home-wrap .part-3 .part-3-contents .part-3-content.part-3-2 {
  background: linear-gradient(rgba(30,20,15,0.45), rgba(30,20,15,0.45)),
              url('../img/home/index-s2-2.png') center/cover no-repeat !important;
}
.home-wrap .part-3 .part-3-contents .part-3-content.part-3-3 {
  background: linear-gradient(rgba(30,20,15,0.45), rgba(30,20,15,0.45)),
              url('../img/home/index-s2-3.png') center/cover no-repeat !important;
}

	/*Program-signature*/
body.lang-en .page-wrap.page-program.page-program-signature .program-content .part.part-8 .box .title .sub-title {font-family: "ABC Marfa";}
body.lang-en .page-wrap.page-program.page-program-signature .program-content .part.part-10 .box .title .sub-title {font-family: "ABC Marfa";}
.page-wrap.page-program.page-program-signature .program-content .part.part-10 .box {background: var(--iv-50, #fdf8f0); width: 100%; gap: 40px;}
.page-wrap.page-program.page-program-signature .program-content .part.part-10 .box .title {padding-bottom: 20px; border-bottom: 3px solid var(--HOAN_BR, #3d2820);}
.page-wrap.page-program.page-program-signature .program-content .part.part-10 .box .title .sub-title {font-size: 15px; font-weight: 700; line-height: 150%;}
.page-wrap.page-program.page-program-signature .program-content .part.part-10 .box .contents .description {text-align: center; font-size: 15px; font-weight: 400; line-height: 160%; padding-bottom: 40px;}
.page-wrap.page-program.page-program-signature .program-content .part.part-10 .box .contents .content-group {display: flex; flex-direction: column; gap:30px; padding: 0 40px;}
.page-wrap.page-program.page-program-signature .program-content .part.part-10 .box .contents .content-group .description {padding-bottom: 0;}
.page-wrap.page-program.page-program-signature .program-content .part.part-10 .box .contents .icons {display:flex; align-items: center; padding-bottom: 30px;}
.page-wrap.page-program.page-program-signature .program-content .part.part-10 .box .contents .icons .icon {flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 10px;}
.page-wrap.page-program.page-program-signature .program-content .part.part-10 .box .contents .icons .icon h4 {font-size: 13px; font-weight: 700; line-height: 150%; text-align: center;}
.page-wrap.page-program.page-program-signature .program-content .part.part-10 .box .contents .content-1,
.page-wrap.page-program.page-program-signature .program-content .part.part-10 .box .contents .content-2 {padding: 20px 40px; display: flex; flex-direction: column; align-items: center; border-top: 1px solid #f0d3b0; background: linear-gradient(0deg, #fdf8f0 20%, #f8e9d2 100%);}
.page-wrap.page-program.page-program-signature .program-content .part.part-10 .box .contents .content-1 .icons {justify-content: center; max-width: 880px; width: 100%;}
.page-wrap.page-program.page-program-signature .program-content .part.part-10 .box .contents .content-1 .icon-plus {width:24px; height:24px;}
.page-wrap.page-program.page-program-signature .program-content .part.part-10 .box .contents .content-1 .icon-plus img {width:100%; height:100%;}
.page-wrap.page-program.page-program-signature .program-content .part.part-10 .box .contents .content-2 .icons {justify-content: space-between; max-width: 760px; width: 100%;}
.page-wrap.page-program.page-program-signature .program-content .part.part-10 .box .contents .content-2 .icons .image {display: none;}
.page-wrap.page-program.page-program-signature .program-content .part.part-10 .box .contents .content-2 .icons .icon {flex:inherit;}
body.lang-en .page-wrap.page-program.page-program-signature .program-content .part.part-10 .box .contents .content-3 .text {font-family: "ABC Marfa";}
.page-wrap.page-program.page-program-signature .program-content .part.part-10 .box .contents .content-3 .text {color: var(--HOAN_BR, #3d2820); padding: 12px 20px; border-radius: 20px; border: 1px solid var(--HOAN_BR, #3d2820); text-align: center; font-size: 15px; font-weight: 700; line-height: 150%;}
.page-wrap.page-program.page-program-signature .program-content .part.part-10 .box .contents .content-4 {display: flex; flex-direction: column; align-items: center;}
.page-wrap.page-program.page-program-signature .program-content .part.part-10 .box .contents .content-4 .icons {width: 100%; max-width: 560px;}
.page-wrap.page-program.page-program-signature .program-content .part.part-10 .box .contents .content-5 .price-wrap {display: flex; justify-content: center; align-items: center; gap: 2px;}
.page-wrap.page-program.page-program-signature .program-content .part.part-10 .box .contents .content-5 .price-wrap .price {font-size: 20px; font-family: "ABC Marfa"; letter-spacing: .05em; line-height: 140%;}
.page-wrap.page-program.page-program-signature .program-content .part.part-10 .box .contents .content-5 .price-wrap .unit {font-size: 16px; font-weight: 700; line-height: 100%;}


	/*Program-package*/
	.page-wrap.page-program.page-program-package .program-content .part.part-5,
	.page-wrap.page-program.page-program-package .program-content .part.part-6 {max-width:1000px;}
	.page-wrap.page-program.page-program-package .program-content .part.part-6 .box .contents .column-2 .table-wrap .content {min-width:inherit;}
	.page-wrap.page-program.page-program-package .program-content .part.part-6 .box .contents .column-2:last-child {border-bottom: 1px solid var(--HOAN_BR, #3d2820);}

	/*Program-functional*/
	.page-wrap.page-program.page-program-functional-medicine .page-program-content .program-content-data .program-section .section-inner .section-content .content-detail .detail-caption { font-size: 14px; font-family: NanumSquare; font-weight: 700; line-height: 170%;color: #8a7363;}


	/*Blog,Notice*/
	.board-list .board-item a .title {display: -webkit-box; overflow: hidden; text-overflow: ellipsis;flex: 1 0 0; padding-right: 10px;}
	.board-list .board-item a .category {width:114.6px; justify-content:center; margin-right: 40px;}
	.board-list .board-item a .date {width:10%;}
	.board-list .board-item.sticked a .title:before {margin-right: 8px;}

	.page-wrap.page-board.blog .board-detail .board-detail-content img {width:auto;}
	.page-wrap.page-board.blog .board-detail .board-detail-content p {word-break:keep-all;margin-bottom: 20px;}
	.page-wrap.page-board.blog .board-detail .board-detail-content h2 {font-size: 22px;font-family: "ABC Marfa",NanumSquare;font-weight: 800;line-height: 140%;margin-bottom: 30px;}
	.page-wrap.page-board.blog .board-detail .board-detail-content h3 {font-family: "ABC Marfa",NanumSquare;}
	.board-detail .board-detail-content .quotation-container {padding: 30px 0px;position: relative;margin: auto;box-sizing: border-box;}
	.board-detail .board-detail-content .quotation-container::before,
	.board-detail .board-detail-content .quotation-container::after {content: "";position: absolute;right: 0px;left: 0px;margin: auto;}
	.board-detail .board-detail-content .quotation-container::before {background:url(../img/page/blog/quote-before.png) no-repeat center/contain; top: 0px; width: 20px; height: 16px;}
	.board-detail .board-detail-content .quotation-container::after {background:url(../img/page/blog/quote-after.png) no-repeat center/contain; bottom: 0px; width: 20px; height: 16px;}
	.board-detail .board-detail-footer .btn-back {padding: 8px 20px;height: 36px;font-size: 13px;line-height:140%;}

	.board-detail .board-detail-content img {max-width: 950px; width: unset;}
	.board-detail .board-detail-content ul {gap: 4px;display: flex;flex-direction: column; padding-left: 16px;margin-bottom:20px;}
	.board-detail .board-detail-content li {line-height:170%;}
	.board-detail .board-detail-content p+p {margin-top:30px;}
	.board-detail .board-detail-content .list-item {gap: 12px;width: 100%;display: flex;align-items: baseline;flex-shrink: 0; margin:0 auto;}
	.board-detail .board-detail-content .list-item .bullet {display: flex;width: 10px;height: 10px;background-color: var(--mocha, #c9784f);flex: none;}
	
	.page-wrap.page-about .part-5 .part-content .text .info p {font-size:15px;}

	/*Survey*/
	.page-wrap.page-survey .survey .survey-form-wrapper .survey-content .form-group .form-field .field-label {width:90px;}
	.page-wrap .page-header p.type-2 span {text-decoration: underline; text-underline-offset: 6px;}

	/*About*/
	.page-wrap.page-about .part-5 .part-content .text .info{margin-top:24px;}
	.page-wrap.page-about .part-5 .part-content .row {row-gap:60px;}


@media only screen and (min-width: 1920px) {
	.home-wrap .part-2 .part-2-content .part-2-content-item .texts-wrap .view-more:before {pointer-events:none;}
}

@media only screen and (max-width: 1919px) {
	.home-wrap .part-2 .part-2-content .part-2-content-item .texts-wrap .view-more:before {pointer-events:none;}
	.page-wrap.page-program.page-program-signature .program-content .part .info .infos .info-item.info-item-with-sub-title .text {white-space: break-spaces;}
}

@media only screen and (max-width: 1439px) {
	/*Program-functional*/
	.page-wrap.page-program .button-anchor-container {gap:12px; align-items: stretch;}
	.page-wrap.page-program .button-anchor-container>a {width: calc(20% - 10px);}
	.page-wrap.page-program .button-anchor-container>a .program-item {padding: 16px 16px 20px; gap:16px; justify-content: flex-start;}
}

@media only screen and (min-width: 1120px) and (max-width: 1439px) {
	/*About*/
	.col-tablet-4 {width: 20% !important;}
	.col-tablet-6 {width: 30% !important;}
	.page-wrap.page-about .part-5 .part-content .image.index-2 {margin-top:0;}
	.page-wrap.page-about .part-5 .part-content .text {padding: 10px 20px;}
}	

@media only screen and (min-width: 810px) and (max-width: 1119px) {
	.page-wrap.page-program .program-content-header {padding: 96px var(--grid-padding);}
	.page-wrap.page-program.page-program-signature .program-content .part.part-6 .box .contents .column-2 .table-wrap .content {min-width:initial;}
}

@media only screen and (min-width: 810px) and (max-width: 942px) {
	.page-wrap.page-program.page-program-signature .program-content .part.part-10 .box .contents .content-group {padding: 0}
	.page-wrap.page-program.page-program-signature .program-content .part.part-10 .box .contents .content-1 .icons .icon img {height: 80px;}
	.page-wrap.page-program.page-program-signature .program-content .part.part-10 .box .contents .content-1 .icon-plus {width: 20px; height: 20px;}
	.page-wrap.page-program.page-program-signature .program-content .part.part-10 .box .contents .content-2 .icons {max-width: 580px;}
	.page-wrap.page-program.page-program-signature .program-content .part.part-10 .box .contents .content-2 .icons .icon img {height: 120px;}
	.page-wrap.page-program.page-program-signature .program-content .part.part-10 .box .contents .content-3 {padding: 0 40px;}
}	

@media only screen and (max-width: 809px) {
	/*Main*/
	.home-wrap .part-3 .part-3-contents .part-3-content .part-3-content-inner {height:50%;}
	
	/*Popup*/
	.popup {width:calc(100% - var(--grid-padding) * 2); max-width:420px;}
	
	/*About*/
	.page-wrap.page-about .part-full-background-content .part-content .content {font-size:15px;}
	.page-wrap.page-about .part-4 .part-content {aspect-ratio: 375 / 500;}
	.page-wrap.page-about .part-5 .part-content .text .info {margin-top:30px;}
	.page-wrap.page-about .part-5 .part-content .image {margin-bottom:0;}
	.page-wrap.page-about .part-5 .part-content .image.index-2 {margin-top:30px;}
	.page-wrap.page-about .part-5 .part-content .image.index-3 {margin-top:30px;}
	.page-wrap.page-about .part-5 .part-content .row {row-gap:10px;}
	.page-wrap.page-about .part-5 .part-content .image.index-3, .page-wrap.page-about .part-5 .part-content .text.index-3 {width: auto;padding-right: calc(71px - var(--grid-padding));}
	
	/*Reservation*/
	.page-wrap.page-reservation .page-content .part-content .title-wrap p {font-size:15px;}
	.page-wrap.page-reservation .page-content .part-content h4 {font-size:15px;}
	.page-wrap.page-reservation .page-content .part-1 .part-content-1 .content-table .content-item .title {padding-bottom:4px;}
	.page-wrap.page-reservation .page-content .part-1 .part-content-2 .content p {font-size:15px;}
	.page-wrap.page-reservation .page-content .part-2 .part-content-2 .content .content-table .content-item .title {width:100px; font-size:15px;}
	.page-wrap.page-reservation .page-content .part-2 .part-content-2 .content .content-table .content-item .content {font-size:15px;}
	.page-wrap.page-reservation .page-content .part-2 .part-content-2 .content .content-table.index-2 .content-item {gap:2px;}
	.page-wrap.page-reservation .page-content .part-3 .part-content-1 .content a {font-size:15px;}
	
	/*Program-signature*/
	.page-wrap.page-program.page-program-signature .program-content .part.part-8 .box .contents .icons .icon {padding: 10px;}
	.page-wrap.page-program.page-program-signature .program-content .part.part-9 .box {padding: 40px 20px;}
	.page-wrap.page-program.page-program-signature .program-content .part.part-9 .box .contents .content-1 {padding: 40px 10px 0;}
	.page-wrap.page-program.page-program-signature .program-content .part.part-10 .box {padding: 40px 10px;}
	.page-wrap.page-program.page-program-signature .program-content .part.part-10 .box .title {gap: 8px; margin: 0 10px;}
	.page-wrap.page-program.page-program-signature .program-content .part.part-10 .box .contents .description {padding: 0 10px 40px;}
	.page-wrap.page-program.page-program-signature .program-content .part.part-10 .box .contents .content-group {gap:24px; padding: 0;}
	.page-wrap.page-program.page-program-signature .program-content .part.part-10 .box .contents .content-group .description {font-size: 14px; padding: 0 20px;}
	.page-wrap.page-program.page-program-signature .program-content .part.part-10 .box .contents .content-1,
	.page-wrap.page-program.page-program-signature .program-content .part.part-10 .box .contents .content-2 {padding: 20px 0;}
	.page-wrap.page-program.page-program-signature .program-content .part.part-10 .box .contents .content-1 .icons {flex-direction: column; gap: 8px;}
	.page-wrap.page-program.page-program-signature .program-content .part.part-10 .box .contents .content-1 .icons .icon img {height: 80px;}
	.page-wrap.page-program.page-program-signature .program-content .part.part-10 .box .contents .content-1 .icon-plus {width: 20px; height: 20px;}
	.page-wrap.page-program.page-program-signature .program-content .part.part-10 .box .contents .content-2 .icons .icon {display: none;}
	.page-wrap.page-program.page-program-signature .program-content .part.part-10 .box .contents .content-2 .icons .image {display: block; width: 100%; padding: 0 10px;}
	.page-wrap.page-program.page-program-signature .program-content .part.part-10 .box .contents .content-2 .icons .image img {width: 100%;}
	.page-wrap.page-program.page-program-signature .program-content .part.part-10 .box .contents .content-3 {padding: 0 10px;}
	.page-wrap.page-program.page-program-signature .program-content .part.part-10 .box .contents .content-4 {padding: 0 20px;}
	.page-wrap.page-program.page-program-signature .program-content .part.part-10 .box .contents .content-4 .icons .icon {padding: 10px;}
	.page-wrap.page-program.page-program-signature .program-content .part.part-10 .box .contents .content-4 .icons .icon img {width: 60px; height: 60px;}
	
	/*Program-package*/
	.page-wrap.page-program.page-program-package .program-content .part.part-6 .box .contents .content {gap:4px;}
	.page-wrap.page-program.page-program-package .program-content .part.part-6 .box .contents .content .left {text-align:left;}
	.page-wrap.page-program.page-program-package .program-content .part.part-6 .box .contents .content .right {align-items: flex-start;}
	.page-wrap.page-program.page-program-package .program-content .part.part-6 .box .contents .content .right .item {text-align:left;}
	.page-wrap.page-program.page-program-package .program-content .part.part-6 .box .contents .content .right .price-info {align-items: flex-start;gap: 8px;}
	.page-wrap.page-program.page-program-package .program-content .part.part-6 .box .contents .content .right .sub {text-align:left;}
	.page-wrap.page-program.page-program-package .program-content .part.part-6 .box .contents .column-3 {border-bottom:0;}
	
	
	
	/*Program-functional*/
	.page-wrap.page-program .button-anchor-container {gap:12px; align-items: stretch;}
	.page-wrap.page-program .button-anchor-container>a {width: calc(33.333% - 8px);}
	.page-wrap.page-program .button-anchor-container>a .program-item {padding: 16px 16px 20px; gap:16px; justify-content: flex-start;}
	.page-wrap.page-program .button-anchor-container>a .program-item .program-text {gap:6px;}
	.page-wrap.page-program .button-anchor-container>a .program-item .program-text .program-number {font-size:11px;}
	.page-wrap.page-program .button-anchor-container>a .program-item .program-text .program-title {font-size:13px;}
	.page-wrap.page-program .button-anchor-container>a .program-item .program-icon {height:36px; width:36px;}
	.page-wrap.page-program .button-anchor-container>a .program-item .program-icon img {width:100%;}
	
	.page-wrap.page-program.page-program-functional-medicine .page-program-content .program-content-data .program-section .section-inner .section-content {padding-top: 20px;}
	.page-wrap.page-program.page-program-functional-medicine .page-program-content .program-content-data .program-section .section-inner .section-content .content-desc p {font-size: 15px;}
	.page-wrap.page-program.page-program-functional-medicine .page-program-content .program-content-data .program-section .section-inner .section-content .content-detail .detail-title {font-size:13px;line-height: 150%;}
	
	.page-wrap.page-program .board-content-section .board-content .board-title h2 {font-size:28px; line-height:30px;}
	
	/*Program-Aesthetics*/
	.page-wrap.page-program.page-program-medical-aesthetics .page-program-content .program-content-data .program-section-wrap .program-content-section .layer-content .layer-section {gap: 30px;}
	.page-wrap.page-program.page-program-medical-aesthetics .page-program-content .program-content-data .program-section-wrap .program-content-section .layer-content .layer-section .layer-header .layer-title .layer-name {font-size:16px;}
	.page-wrap.page-program.page-program-medical-aesthetics .page-program-content .program-content-data .program-section-wrap .program-content-section .layer-content .layer-section .layer-header .layer-desc .desc-text {font-size:15px;}
	
	
	.page-wrap.page-program.page-program-medical-aesthetics .page-program-content .program-content-data .program-section-wrap .program-content-section .layer-content .layer-section .treatment-list {margin-top: -10px;}
	.page-wrap.page-program.page-program-medical-aesthetics .page-program-content .program-content-data .program-section-wrap .program-content-section .layer-content .layer-section .treatment-list .treatment-item .item-header .item-title {font-size:15px;}
	.page-wrap.page-program.page-program-medical-aesthetics .page-program-content .program-content-data .program-section-wrap .program-content-section .layer-content .layer-section .treatment-list .treatment-item .item-details {font-size:14px;}
	
	/*Program-Wellness*/
	.page-wrap.page-program.page-program-hoan-wellness .program-content-full p {font-size:15px;line-height: 180%;text-align: left;}

	/*Blog,Notice*/
	.board-list .board-item a .title {overflow: visible;}
	.board-list .board-item a .date {width:inherit;}
	.board-detail .board-detail-content li {font-size:15px;}
	.board-detail .board-detail-content img {width: 100%;}
	.board-detail .board-detail-content p+p {margin-top:20px;}
	.page-wrap.page-board.blog .board-detail .board-detail-content p {font-size:15px;line-height: 180%;}

	
}