@charset "UTF-8";

/* ==================================================== */
/* 아이백의원 - Main Page                                 */
/* 폰트: Montserrat(영문 제목) / Pretendard(한글)        */
/* ==================================================== */

.ibaek-main {
	overflow-x: hidden;
}

/* ====================================================
   Figma leading-trim 재현
   - Figma는 [text-box-trim:trim-both]로 폰트 위아래 여백을 잘라
     글자(cap~baseline)만 기준으로 배치 → 간격이 시안값 그대로.
   - 브라우저 기본은 line-height 여백을 남겨 더 벌어져 보임.
   - 제목/라벨류에 trim 적용해 시안과 간격 일치시킴.
   - 미지원 브라우저(Chrome<133 등)는 자동 무시(=기존 동작), 깨지지 않음.
   ==================================================== */
/* ⚠️ 단일 라인(줄바꿈 없는) 요소에만 적용.
   여러 줄 제목에 적용하면 줄간격까지 잘려 텍스트가 겹침 → 제외. */
.ibaek-main .sec-label,
.ibaek-main .hero-title-kr,
.ibaek-main .philosophy-label,
.ibaek-main .sig-en,
.ibaek-main .sig-kr,
.ibaek-main .standard-en,
.ibaek-main .standard-kr,
.ibaek-main .menu-card-en,
.ibaek-main .menu-card-kr,
.ibaek-main .menu-card-num,
.ibaek-main .director-name-main,
.ibaek-main .visit-sub {
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

/* Scroll Animation (fade-in) */
.ibaek-main .aos {
	opacity: 0;
	transform: translateY(32px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.ibaek-main .aos.aos-in {
	opacity: 1;
	transform: translateY(0);
}

/* 공통 폰트 헬퍼 */
.ibaek-main .en,
.sec-label,
.sig-en,
.standard-en,
.menu-card-en,
.menu-card-num,
.sig-item dt,
.visit-sub,
.director-en,
.sec-heading--en {
	font-family: 'Montserrat', 'Pretendard', serif;
	font-weight: 400;
}

/* ==================== */
/* Section Title 공통    */
/* ==================== */
.sec-title {
	display: flex;
	flex-direction: column;
	gap: 36px;
}

.sec-title--center {
	align-items: center;
	text-align: center;
}

.sec-label {
	font-size: 24px;
	color: var(--brown-01);
	line-height: 1;
}

.sec-heading {
	font-size: 56px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--black-02);
}

.sec-heading .kr {
	display: block;
	font-family: 'Pretendard', sans-serif;
	font-weight: 500;
}

.sec-heading .en {
	display: block;
	margin-top: 8px;
	font-family: 'Montserrat', serif;
	color: var(--brown-01);
}

.sec-heading--block {
	line-height: 1.4;
}

.sec-heading--block .dark,
.sec-heading--block .brown {
	display: block;
	font-family: 'Pretendard', sans-serif;
	font-weight: 500;
}

.sec-heading--block .dark { color: var(--black-02); }
.sec-heading--block .brown { color: var(--brown-01); }

.sec-heading--en {
	color: var(--black-02);
}

.sec-desc {
	font-size: 20px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--black-02);
	text-align: center;
}

/* ==================== */
/* 공통 버튼 (Pill)      */
/* ==================== */
.btn-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 20px 40px;
	border-radius: 50px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	transition: all var(--transition-normal);
}

.btn-pill .arrow {
	font-size: 16px;
	line-height: 1;
}

.btn-pill--fill {
	background: var(--brown-01);
	color: var(--beige-01);
}

.btn-pill--fill:hover {
	background: var(--brown-02);
}

.btn-pill--outline {
	background: var(--white);
	border: 1px solid var(--brown-01);
	color: var(--brown-02);
}

.btn-pill--outline:hover {
	background: var(--brown-01);
	color: var(--beige-01);
}

/* ==================== */
/* Hero                 */
/* ==================== */
.hero {
	position: relative;
	min-height: 928px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 200px 260px 120px;
	overflow: hidden;
}

.hero-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	z-index: 0;
}

.hero-inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 172px;
	width: 100%;
	text-align: center;
}

.hero-title {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 62px;
}

.hero-title-en {
	font-family: 'Montserrat', serif;
	font-weight: 400;
	font-size: 100px;
	line-height: 1;
	color: var(--brown-02);
	display: inline-block;
	text-align: center;   /* 시안(20260707): "Back to White." 1줄 중앙 */
}

.hero-title-kr {
	font-size: 44px;
	font-weight: 400;
	line-height: 1;
	color: var(--brown-02);
}

.hero-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 52px;
}

.hero-desc {
	font-size: 24px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--black-02);
}

.hero-buttons {
	display: flex;
	gap: 20px;
}

/* ==================== */
/* section_02 Philosophy */
/* ==================== */
.philosophy {
	position: relative;
	padding: 120px 0;
	overflow: hidden;
}

.philosophy-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	z-index: 0;
}

.philosophy .inner-wrap {
	position: relative;
	z-index: 1;
}

.philosophy-card {
	position: relative;
	border-radius: 60px;
	background: var(--beige-02-60);
	overflow: hidden;
	/* 시안: pt-320 pb-108 pl-110 pr-58 — 모델 배경 위로 텍스트 하단 배치 */
	padding: 320px 58px 108px 110px;
}

/* 시안: box_text_01 배경 이미지(인물+연보라배경 합성)가 카드 전체를 덮음 */
.philosophy-model {
	position: absolute;
	inset: 0;
	background-size: 122.14%;
	background-position: 62% 86%;   /* 시안 left -13.71% / top -19.02%, size 122.14% 환산 */
	background-repeat: no-repeat;
	z-index: 0;
	pointer-events: none;
}

.philosophy-text {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
}

.philosophy-title {
	display: flex;
	flex-direction: column;
	gap: 44px;
	flex: 1;
}

.philosophy-label {
	font-family: 'Montserrat', serif;
	font-size: 32px;
	color: var(--brown-01);
	line-height: 1;
}

.philosophy-heading {
	font-size: 72px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--brown-01);
}

.philosophy-heading strong { font-weight: 700; }
.philosophy-heading .paren { font-weight: 400; }
.philosophy-heading .dark { color: var(--black-02); font-weight: 700; }

.philosophy-body {
	display: flex;
	flex-direction: column;
	gap: 40px;
	flex-shrink: 0;
	width: 400px;
}

.philosophy-body p {
	font-size: 20px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--black-02);
}

.philosophy-body strong { font-weight: 700; }

/* ==================== */
/* section_03 Signature  */
/* ==================== */
.signature {
	background: var(--beige-01);
	padding-top: 120px;
	display: flex;
	flex-direction: column;
	gap: 100px;
}

.signature-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 52px;
	padding: 0 260px;
}

.signature-body {
	display: flex;
	flex-direction: column;
}

.sig-row {
	display: flex;
	gap: 80px;
	align-items: center;
}

.sig-image {
	width: 50%;
	max-width: 960px;
	height: 900px;
	background-size: cover;
	background-position: center;
	flex-shrink: 0;
}

.sig-content {
	display: flex;
	flex-direction: column;
	gap: 60px;
	width: 620px;
	max-width: calc(50% - 80px);
	padding-right: 40px;
}

.sig-content-head {
	display: flex;
	gap: 40px;
	align-items: center;
}

.sig-icon {
	width: 140px;
	height: 140px;
	flex-shrink: 0;
}

.sig-icon img { width: 100%; height: 100%; object-fit: contain; }

.sig-content-title {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.sig-en {
	font-family: 'Montserrat', serif;
	font-size: 28px;
	color: var(--brown-01);
	line-height: 1;
}

.sig-kr {
	font-size: 32px;
	font-weight: 700;
	color: var(--black-02);
	line-height: 1;
}

.sig-sub {
	font-size: 24px;
	font-weight: 400;
	color: var(--black-02);
	margin-top: 8px;
	line-height: 1.3;
}

.sig-list {
	display: flex;
	flex-direction: column;
}

.sig-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24px 0;
	border-top: 1px solid var(--beige-02);
}

.sig-item:last-child { border-bottom: 1px solid var(--beige-02); }

.sig-item dt {
	font-family: 'Montserrat', serif;
	font-size: 16px;
	color: var(--brown-01);
}

.sig-item dd {
	font-size: 20px;
	font-weight: 700;
	color: var(--brown-02);
	text-align: right;
}

.sig-more {
	font-size: 16px;
	font-weight: 700;
	color: var(--brown-02);
	text-decoration: underline !important;
	text-underline-offset: 4px;
}

/* ==================== */
/* section_04 Menu       */
/* ==================== */
.menu {
	background: var(--white);
	padding: 120px 0;
}

.menu .inner-wrap {
	display: flex;
	flex-direction: column;
	gap: 100px;
	align-items: center;
}

.menu-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	width: 100%;
}

.menu-card {
	position: relative;
	height: 480px;
	display: flex;
	align-items: flex-end;
	padding: 32px;
	overflow: hidden;
	cursor: pointer;
}

/* 배경 이미지 레이어 : 기본 흑백 → hover 컬러 (다크서클 Care 동일 패턴) */
.menu-card-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: center;
	filter: grayscale(100%);
	transition: filter var(--transition-slow, 0.5s ease), transform var(--transition-slow, 0.5s ease);
}

.menu-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(17,17,17,0) 30%, var(--brown-02-80));
	z-index: 1;
	pointer-events: none;
}

.menu-card-inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
	text-align: right;
	align-items: flex-end;
}

.menu-card-head {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	color: var(--beige-02);
	transition: color var(--transition-normal, 0.3s ease);
}

/* hover : 이미지 컬러 + 살짝 확대, 제목 골드 포인트 */
.menu-card:hover .menu-card-bg {
	filter: grayscale(0);
	transform: scale(1.04);
}

.menu-card:hover .menu-card-head {
	color: var(--beige-light);
}

.menu-card-num {
	font-family: 'Montserrat', serif;
	font-size: 16px;
	line-height: 1;
}

.menu-card-en {
	font-family: 'Montserrat', serif;
	font-size: 32px;
	line-height: 1;
}

.menu-card-kr {
	font-size: 20px;
	font-weight: 500;
	line-height: 1;
}

.menu-card-desc {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--white);
}

/* ==================== */
/* section_05 Director   */
/* ==================== */
.director {
	background: var(--ivory-01);
	padding: 120px 0;
	overflow: hidden;
}

.director .inner-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
}

.director-text {
	display: flex;
	flex-direction: column;
	gap: 100px;
	flex: 1;
	max-width: 700px;
	position: relative;
	z-index: 1;
}

.director-head {
	display: flex;
	flex-direction: column;
	gap: 52px;
}

.director-en {
	font-family: 'Montserrat', serif;
	font-weight: 400;
	font-size: 56px;
	line-height: 1;
	color: var(--brown-02);
}

.director-en .brown { color: var(--brown-01); }

.director-slogan {
	font-size: 44px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--brown-02);
}

.director-body {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.director-intro {
	font-size: 20px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--black-02);
}

.director-name {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.director-name-main {
	font-size: 36px;
	font-weight: 500;
	color: var(--brown-01);
	line-height: 1;
}

.director-name-main strong {
	font-weight: 700;
	color: var(--brown-02);
}

.director-name-sub {
	font-size: 20px;
	font-weight: 400;
	color: var(--black-02);
	line-height: 1;
}

.director-career {
	/* 시안: 2열 배치 (왼쪽 열 → 오른쪽 열 순으로 채움) */
	column-count: 2;
	column-gap: 48px;
}

.director-career li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 16px;
	font-weight: 400;
	color: var(--black-02);
	line-height: 1.5;
	/* 한 항목이 두 열에 걸쳐 쪼개지지 않도록 */
	break-inside: avoid;
	margin-bottom: 16px;
	word-break: keep-all;
}
.director-career li:last-child { margin-bottom: 0; }

.director-career .career-icon { line-height: 1.5; }

.career-icon { color: var(--brown-01); }

.director-image {
	position: relative;
	width: 714px;
	flex-shrink: 0;
	align-self: stretch;
}

.director-pattern {
	position: absolute;
	top: 32px;
	right: -300px;
	width: 717px;
	height: 794px;
	background-size: contain;
	background-repeat: no-repeat;
	z-index: 0;
	opacity: 1;   /* 시안: 아주 연한 로고 패턴 */
}

.director-photo {
	position: absolute;
	bottom: -120px;
	right: 80px;
	height: calc(100% + 152px);
	width: auto;
	object-fit: contain;
	object-position: bottom;
	z-index: 1;
}

/* ==================== */
/* section_06 Standards  */
/* ==================== */
.standards {
	background: var(--white);
	padding: 120px 0;
}

.standards .inner-wrap {
	display: flex;
	flex-direction: column;
	gap: 100px;
	align-items: center;
}

.standards-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	max-width: 1304px;
	width: 100%;
}

.standard-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	padding: 100px 40px;
	text-align: center;
	position: relative;
	background: linear-gradient(to bottom, rgba(255,250,245,0) 0%, var(--beige-02-60) 50%, rgba(255,250,245,0) 100%);
}

.standard-item:nth-child(2) {
	background: linear-gradient(to bottom, rgba(255,250,245,0) 0%, var(--beige-02) 50%, rgba(255,250,245,0) 100%);
}

/* 세로 구분선 */
.standard-item:not(:last-child)::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 1px;
	height: 100%;
	background: linear-gradient(to bottom, rgba(255,250,245,0.8) 0%, rgba(170,147,113,0.8) 50%, rgba(255,250,245,0.8) 100%);
}

.standard-object {
	width: 51px;
	height: 68px;
	position: relative;
}

/* 시안: 4점 별(스파클) 윤곽선 — 인라인 SVG */
.standard-star {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.standard-num {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: 'Montserrat', serif;
	font-size: 16px;
	color: var(--brown-01);
	line-height: 1;
}

.standard-title {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	color: var(--brown-02);
}

.standard-en {
	font-family: 'Montserrat', serif;
	font-size: 32px;
	line-height: 1;
}

.standard-kr {
	font-size: 20px;
	font-weight: 500;
	line-height: 1;
}

.standard-desc {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--black-02);
}

/* ==================== */
/* section_07 Review     */
/* ==================== */
.review {
	background: var(--beige-01);
	padding: 120px 0;
}

.review .inner-wrap {
	display: flex;
	flex-direction: column;
	gap: 100px;
	align-items: center;
}

.review-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 52px;
}

.review-slider {
	display: flex;
	align-items: center;
	gap: 60px;
	width: 100%;
	justify-content: center;
}

.review-track {
	display: flex;
	gap: 20px;
	overflow: hidden;
}

.review-card {
	position: relative;
	display: flex;
	flex-shrink: 0;
}

.review-before,
.review-after {
	width: 274px;
	height: 326px;
	background-size: cover;
	background-position: center;
}

.review-after {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px 40px;
}

.review-after::before {
	content: '';
	position: absolute;
	inset: 0;
	/* 잠금 상태: 뒤 이미지 식별 불가하게 — 진한 오버레이 + 블러 (로그인 카드 .review-card--open은 ::before 자체가 제거됨) */
	background: rgba(68, 58, 53, 0.92);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.review-lock {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	text-align: center;
}

.review-lock-icon {
	width: 60px;
	height: 60px;
	border-radius: 30px;
	background: rgba(255,255,255,0.3);
	display: flex;
	align-items: center;
	justify-content: center;
}

.review-lock-icon svg {
	width: 24px;
	height: 30px;
	display: block;
}

.review-lock-text {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--white);
}

.review-login {
	display: flex;
	gap: 15px;
	justify-content: center;
}

.review-login-icon {
	width: 30px;
	height: 30px;
	display: block;
}

.review-cycle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 40px;
	height: 40px;
	opacity: 0.8;   /* 시안: 경계의 겹화살표(»), 반투명 */
}

.review-cycle svg {
	width: 100%;
	height: 100%;
	display: block;
}

.review-arrow {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--brown-02);
	color: var(--beige-01);
	font-size: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background var(--transition-normal);
}

.review-arrow:hover { background: var(--brown-01); }

/* 로그인 회원: 전후사진 게시판 연동 카드([iback_main_reviews]) — 실사진 노출, 잠금 오버레이 제거 */
.review-card--open .review-after {
	padding: 0;
}

.review-card--open .review-after::before {
	content: none;
}

/* 로그인 카드: Before/After 뱃지 (게시판 스킨 .ba-badge와 동일 톤) */
.review-card--open .review-before {
	position: relative;
}

.review-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 16px;
	border-radius: 100px;
	background: var(--brown-02);
	color: var(--beige-01);
	font-family: 'Montserrat', serif;
	font-weight: 400;
	font-size: 13px;
	line-height: 1;
}

/* ==================== */
/* section_08 Mood       */
/* ==================== */
.mood {
	background: var(--white);
	padding: 120px 0;
}

.mood-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 100px;
	padding: 0 78px;
}

.mood-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 52px;
}

.mood-gallery {
	display: flex;
	gap: 12px;
	align-items: center;
	width: 100%;
	justify-content: center;
}

.mood-img {
	position: relative;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	height: 420px;
	/* flex-grow 로 폭을 배분 → 전체 갤러리 폭 고정, 레이아웃 튐/움찔 최소화 */
	flex: 1 1 0;
	min-width: 0;
	/* flex-grow 만 전환 (width 직접 애니메이션 X → reflow 떨림 감소) */
	transition: flex-grow 0.6s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: flex-grow;
}

/* 기본 비율: sub=1, main≈3.95 (시안 170:672 비율) */
.mood-img--sub  { flex-grow: 1; }
.mood-img--main { flex-grow: 3.95; }

/* hover 규칙: 갤러리에 마우스가 있을 때만 동작 */
/* 1) hover한 이미지(sub든 main이든)는 메인 비율로 확대 */
.mood-gallery:hover .mood-img:hover {
	flex-grow: 3.95;
}

/* 2) hover하지 않은 이미지는 모두 sub 비율로 축소 (원래 큰 main도 포함) */
.mood-gallery:hover .mood-img:not(:hover) {
	flex-grow: 1;
}

@media (prefers-reduced-motion: reduce) {
	.mood-img { transition: none; }
}

/* ==================== */
/* section_09 Visit      */
/* ==================== */
.visit {
	background: var(--white);
	display: flex;
	align-items: stretch;   /* 텍스트·지도 높이 맞춤 */
	justify-content: space-between;
	padding: 120px 0;
	gap: 60px;
}

.visit-text {
	display: flex;
	flex-direction: column;
	gap: 100px;
	flex: 1;
	padding-left: 260px;
	min-width: 0;
}

.visit-body {
	display: flex;
	flex-direction: column;
	gap: 40px;
	/* 시안: 텍스트 블록이 지도(712px) 높이를 채우도록 위·아래 분산 */
	flex: 1;
	justify-content: space-between;
}

.visit-block {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.visit-sub {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: 'Montserrat', serif;
	font-size: 20px;
	color: var(--brown-01);
	line-height: 1;
}

.visit-icon { color: var(--brown-01); }

.visit-detail {
	display: flex;
	flex-direction: column;
	gap: 24px;
	color: var(--brown-02);
}

.visit-detail-main {
	font-size: 20px;
	font-weight: 500;
	line-height: 1.6;
}

.visit-detail-sub {
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
}

.visit-hours {
	display: flex;
	flex-direction: column;
	gap: 24px;
	color: var(--brown-02);
}

.visit-hours-row {
	display: flex;
	align-items: center;
	gap: 32px;
	font-size: 20px;
	font-weight: 500;
}

.visit-days {
	min-width: 83px;
	letter-spacing: 0.1em;
}

.visit-note {
	font-size: 16px;
	font-weight: 400;
	color: var(--brown-02);
	line-height: 1;
}

.visit-contact {
	display: flex;
	flex-direction: column;
	gap: 24px;
	color: var(--brown-02);
}

.visit-phone {
	font-size: 20px;
	font-weight: 500;
	line-height: 1;
}

.visit-links {
	display: flex;
	gap: 30px;
}

.visit-links a {
	font-size: 20px;
	font-weight: 500;
	color: var(--brown-02);
	transition: color var(--transition-normal);
}

.visit-links a:hover { color: var(--brown-01); }

.visit-map {
	width: 1130px;
	max-width: 60%;
	min-height: 712px;   /* 시안 기준 높이, 텍스트가 더 길면 stretch로 늘어남 */
	align-self: stretch; /* 좌측 텍스트 높이에 맞춰 지도도 늘어나 높이 일치 */
	background-size: cover;
	background-position: center;
	flex-shrink: 0;
	position: relative;  /* 카카오맵 캔버스(.visit-map-canvas) 기준점 */
	overflow: hidden;    /* 라운드 밖으로 지도 타일 삐져나옴 방지 */
	border-radius: 20px 0 0 20px;   /* 시안: 좌측만 라운드(우측은 화면 끝까지) */
}

/* 카카오맵 캔버스: common.js(initVisitKakaoMap)가 .visit-map 안에 주입 — 컨테이너 꽉 채움 */
.visit-map-canvas {
	position: absolute;
	inset: 0;
}

/* ==================== */
/* section_CTA_01        */
/* ==================== */
.cta {
	position: relative;
	padding: 120px 260px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.cta-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	z-index: 0;
}

.cta-inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 52px;
	text-align: center;
}

.cta-title {
	display: flex;
	flex-direction: column;
	gap: 52px;
	align-items: center;
	color: var(--brown-02);
}

.cta-heading {
	font-size: 56px;
	font-weight: 700;
	line-height: 1.4;
}

.cta-sub {
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
}

.cta-buttons {
	display: flex;
	gap: 16px;
}

/* ==================== */
/* section_CTA_02 Notice */
/* ==================== */
.cta-notice {
	position: relative;
	background: var(--beige-02);   /* 시안: bg_beige_02 #e3dbcc */
	padding: 40px 0;   /* 좌우 폭은 내부 .inner-wrap(max 1400)이 담당 */
}

/* 시안: 상단 그라데이션 구분선 (베이지→브라운→베이지) */
.cta-notice::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background: linear-gradient(to right, rgba(255,250,245,0.8) 0%, rgba(170,147,113,0.8) 50%, rgba(255,250,245,0.8) 100%);
}

.cta-notice p {
	font-size: 20px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--gray-01);
	text-align: center;
}

/* ==================== */
/* Floating Banner       */
/* ==================== */
/* 사이드바(모바일 메뉴) 열림 시 퀵메뉴 숨김 — 사이드바 위로 안 올라오게 */
.no-scroll .floating-banner { display: none; }

.floating-banner {
	position: fixed;
	right: 30px;
	bottom: 40px;
	z-index: 900;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	padding: 32px 0 0;
	width: 80px;
	background: var(--ivory-01);
	border-radius: 100px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08);
	transition: gap 0.45s cubic-bezier(0.22, 1, 0.36, 1), padding 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 접기/펼치기: 하단 원(화살표) 탭 → 위 메뉴들 접힘 + 화살표 180° 회전 */
.float-menus {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	overflow: hidden;
	max-height: 520px;   /* 접기 애니메이션 상한 — 위챗 추가로 6개 되어 상향(클리핑 방지) */
	opacity: 1;
	transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}

.floating-banner.folded { gap: 0; padding-top: 0; }
.floating-banner.folded .float-menus { max-height: 0; opacity: 0; }

.float-top svg { transition: transform 0.4s ease; }
.floating-banner.folded .float-top svg { transform: rotate(180deg); }

.float-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.float-icon {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 시안: SNS(유튜브·인스타·블로그)와 문의(카톡·네이버) 사이 구분선 */
.float-divider {
	width: 32px;
	height: 1px;
	background: rgba(170, 147, 113, 0.4);
}

.float-text {
	font-size: 12px;
	font-weight: 500;
	color: var(--brown-01);
}

.float-top {
	width: 80px;
	height: 80px;
	border-radius: 40px;
	background: var(--brown-01);
	border: 1px solid var(--beige-02);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--transition-normal);
}

.float-top:hover { background: var(--brown-02); }

/* ==================================================== */
/* Scroll Reveal (data-reveal) — 상세/소개와 동일 엔진. common.js가 .is-in 부여 */
/* ==================================================== */
[data-reveal] {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}
[data-reveal].is-in {
	opacity: 1;
	transform: none;
}
[data-reveal-delay="1"] { transition-delay: 0.1s; }
[data-reveal-delay="2"] { transition-delay: 0.2s; }
[data-reveal-delay="3"] { transition-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
	[data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ==================================================== */
/* Hero Load Sequence — 메인 .hero (html.js 첫프레임 숨김 → hero-loaded 등장) */
/* ==================================================== */
html.js .ibaek-main .hero .hero-title,
html.js .ibaek-main .hero .hero-body {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}
html.js .ibaek-main .hero.hero-loaded .hero-title { transition-delay: 0.25s; }
html.js .ibaek-main .hero.hero-loaded .hero-body  { transition-delay: 0.45s; }
html.js .ibaek-main .hero.hero-loaded .hero-title,
html.js .ibaek-main .hero.hero-loaded .hero-body {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	html.js .ibaek-main .hero .hero-title,
	html.js .ibaek-main .hero .hero-body {
		opacity: 1; transform: none; transition: none;
	}
}

/* ==================================================== */
/* Responsive                                            */
/* ==================================================== */
@media (max-width: 1480px) {
	.hero { padding: 180px 40px 100px; }
	.signature-head { padding: 0 40px; }
	.sig-row { gap: 40px; padding: 0 40px; }
	.sig-image { height: 720px; }
	.sig-content { max-width: none; }
	.visit-text { padding-left: 40px; }
	.cta { padding: 120px 40px; }
	.mood-inner { padding: 0 40px; }
}

@media (max-width: 1280px) {
	.hero-title-en { font-size: 80px; }
	.hero-title-kr { font-size: 36px; }
	.philosophy-heading { font-size: 56px; }
	.sec-heading { font-size: 44px; }
	.director-en { font-size: 44px; }
	.director-slogan { font-size: 34px; }
	.cta-heading { font-size: 44px; }

	/* 메뉴 2열 */
	.menu-grid { grid-template-columns: repeat(2, 1fr); }

	/* signature 세로 적층 */
	.sig-row { flex-direction: column; align-items: stretch; }
	.sig-image { width: 100%; max-width: none; height: 480px; }
	.sig-content { width: 100%; padding-right: 0; }

	/* director 적층 */
	.director .inner-wrap { flex-direction: column; gap: 60px; }
	.director-text { max-width: none; }
	.director-image { width: 100%; height: 600px; }
	.director-photo { position: relative; bottom: 0; height: 100%; margin: 0 auto; display: block; }
	.director-pattern { right: 0; }

	/* visit 적층 */
	.visit { flex-direction: column; }
	.visit-text { padding-left: 40px; padding-right: 40px; width: 100%; }
	.visit-map { width: 100%; max-width: none; height: 480px; }

	/* mood: 가로 스크롤 (flex-grow 해제 → 고정폭으로 스크롤) */
	.mood-gallery { overflow-x: auto; justify-content: flex-start; padding-bottom: 12px; }
	.mood-img { flex: 0 0 auto; transition: none; }
	.mood-img--sub  { width: 170px; height: 380px; }
	.mood-img--main { width: 320px; height: 420px; }
	.mood-gallery:hover .mood-img:hover,
	.mood-gallery:hover .mood-img:not(:hover) { flex: 0 0 auto; }

	/* philosophy: 모델 뒤로, 텍스트 세로 */
	.philosophy-card { padding: 60px 40px; }
	.philosophy-model { background-size: 160%; background-position: 50% 100%; }
	.philosophy-text { flex-direction: column; align-items: flex-start; gap: 40px; }
	.philosophy-body { max-width: none; }
}

@media (max-width: 1024px) {
	:root { --header-height: 70px; }
	.hero { min-height: 70vh; padding: 140px 24px 80px; }
	.hero-inner { gap: 100px; }
	.hero-title { gap: 40px; }
	.hero-title-en { font-size: 60px; }
	.hero-title-kr { font-size: 28px; }
	.hero-desc { font-size: 18px; }

	.sec-label { font-size: 20px; }
	.sec-heading { font-size: 34px; }
	.sec-desc { font-size: 18px; }
	.philosophy-heading { font-size: 44px; }
	.philosophy-label { font-size: 24px; }

	.standards-grid { grid-template-columns: 1fr; }
	.standard-item:not(:last-child)::after { display: none; }

	.review-slider { gap: 16px; }
	.review-track { overflow-x: auto; }

	section.menu, section.director, section.standards,
	section.review, section.mood, section.cta {padding: 80px 0 120px;}
	.philosophy { padding: 80px 0; }
	.signature { padding-top: 80px; gap: 60px; }
}

@media (max-width: 767px) {
	/* hero: 모바일 여백·타이틀 축소 (390 뷰포트에서 안 잘리게) */
	.hero { min-height: 600px; padding: 120px 40px 60px; }
	.hero-bg { background-position: right; opacity: 0.4; }
	.hero-inner { gap: 60px; }
	.hero-title { gap: 20px; }
	.hero-title-en { font-size: 34px; }
	.hero-title-kr { font-size: 19px; }
	.hero-desc { font-size: 14px; }
	.hero-buttons { flex-direction: column; width: 100%; gap: 12px; }
	.btn-pill { width: 100%; font-size: 16px; padding: 16px 24px; }

	.sec-heading { font-size: 28px; }

	/* philosophy: 시안 모바일 — 풀블리드 카드(섹션=카드), 타이틀 40px, 문단 간격 32px */
	/* ⚠️ 특이도 .philosophy 접두 필수: 파일 끝 1024px 블록(.philosophy-card 패딩/.philosophy-body gap)이 뒤에 있어 이겨야 함 */
	.philosophy { padding: 0; }
	.philosophy .inner-wrap { padding: 0; }
	.philosophy .philosophy-card { border-radius: 0; padding: 60px 40px 340px; }
	.philosophy .philosophy-title { gap: 20px; }
	.philosophy .philosophy-body { gap: 32px; }
	.philosophy-heading { font-size: 40px; }
	.philosophy-label { font-size: 20px; }
	.philosophy-body p { font-size: 16px; }

	.sig-image { height: 320px; }
	.sig-content-head { flex-direction: column; align-items: flex-start; gap: 20px; }
	.sig-icon { width: 80px; height: 80px; }
	.sig-en { font-size: 22px; }
	.sig-kr { font-size: 24px; }
	.sig-sub { font-size: 18px; }
	.sig-item dd { font-size: 16px; }

	.menu-grid { grid-template-columns: 1fr; }
	.menu-card { height: 380px; }

	/* 모바일: hover 불가 → 모든 카드를 항상 컬러로 표시, 탭 시 바로 링크 이동 */
	.menu-card .menu-card-bg {
		filter: grayscale(0);
	}
	.menu-card .menu-card-head {
		color: var(--beige-light);
	}

	.director-en { font-size: 32px; display: block; }
	.director-slogan { font-size: 24px; margin-bottom: 40px; }
	.director-name-main { font-size: 26px; }
	.director-image { height: 420px; }

	/* 모바일: 경력 2열 → 1열 (긴 항목 줄바꿈 여유 확보) */
	.director-career { column-count: 1; }

	.standard-item { padding: 60px 20px; }

	/* review: before/after 세로 적층 + 순환 화살표 90° 회전 (시안 모바일) */
	.review-slider { gap: 8px; }
	/* 트랙이 가용 폭을 다 차지 → 카드는 트랙 폭 100%로 한 장씩 꽉 차게.
	   scroll-snap 으로 스크롤/버튼 이동 시 카드가 딱 멈춤. resize 시 % 기반이라 자동 대응 */
	.review-track {
		flex: 1 1 auto;
		min-width: 0;
		gap: 0;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}
	.review-card {
		flex-direction: column;
		gap: 0;
		flex: 0 0 100%;
		width: 100%;
		scroll-snap-align: center;
	}
	/* 카드 내부 이미지: 274px 고정 해제 → 트랙(=뷰포트 가용) 폭에 맞춰 꽉 차게 */
	.review-before, .review-after { width: 100%; height: 300px; }
	.review-cycle { transform: translate(-50%, -50%) rotate(90deg); }
	.review-arrow { flex-shrink: 0; }

	/* mood: 시안 모바일 — 섹션 60px, 3장 노출 갤러리 풀블리드(60+246+60+12×2=390) */
	section.mood { padding: 60px 0; }
	.mood .sec-label { font-size: 16px; }
	.mood .sec-heading { font-size: 32px; }
	.mood .sec-desc { font-size: 16px; }
	.mood-inner { padding: 0; gap: 60px; }
	.mood-head { gap: 32px; padding: 0 40px; }
	/* 모바일: 7장 전부 이음새 없는 무한 마퀴 자동 슬라이드
	   (JS가 트랙 래핑 + 이미지 1벌 복제 → .is-marquee 부여) */
	.mood-gallery { overflow: hidden; justify-content: flex-start; padding-bottom: 0; gap: 0; width: 100vw; margin-left: calc(50% - 50vw); }
	/* 원본 비율(672×420) 그대로: 높이만 고정, 폭은 auto 로 비율 유지 */
	.mood-img { flex: 0 0 auto; transition: none; width: auto; height: 200px; aspect-ratio: 672 / 420; }
	.mood-img--sub,
	.mood-img--main { width: auto; height: 200px; }

	/* JS 래핑 성공 시 : 트랙이 좌로 흐름, 원본+복제로 seamless */
	.mood-gallery.is-marquee { display: block; }
	.mood-gallery.is-marquee .mood-marquee-track {
		display: flex;
		width: max-content;
		/* 이동 거리 = 원본 1벌 폭(마진 포함) → JS가 --mood-shift 로 실측 주입.
		   -50% 대신 정확한 픽셀 이동이라 폭이 가변이어도 이음새가 안 튐 */
		animation: mood-marquee var(--mood-dur, 30s) linear infinite;
	}
	/* gap 대신 각 이미지 오른쪽 마진 → 마지막 장에도 동일 간격이 붙어 이음새 정확 */
	.mood-gallery.is-marquee .mood-marquee-track > .mood-img { margin-right: 12px; }

	@keyframes mood-marquee {
		from { transform: translateX(0); }
		to   { transform: translateX(calc(-1 * var(--mood-shift, 50%))); }
	}
	@media (prefers-reduced-motion: reduce) {
		.mood-gallery.is-marquee .mood-marquee-track { animation: none; }
	}

	/* visit: 시안 모바일 — 타이틀 → 지도 → 본문 순서, 센터 타이틀 */
	.visit { padding: 60px 40px; gap: 60px; }
	/* display:contents 로 .sec-title/.visit-body 를 .visit 플렉스 아이템으로 승격해 지도와 재배치 */
	.visit-text { display: contents; }
	.visit-text[data-reveal] { opacity: 1; transform: none; transition: none; }
	.visit .sec-title { order: 1; align-items: center; text-align: center; gap: 20px; }
	.visit .sec-label { font-size: 16px; }
	.visit .sec-heading { font-size: 32px; }
	.visit-map { order: 2; height: 200px; min-height: 0; border-radius: 0; }
	.visit-body { order: 3; gap: 32px; justify-content: flex-start; }
	.visit-block { gap: 20px; }
	.visit-detail { gap: 16px; }
	.visit-detail-main { font-size: 20px; line-height: 1.4; }
	.visit-hours-row { font-size: 20px; gap: 32px; }
	.visit-days { min-width: 83px; }
	.visit-phone { font-size: 20px; }
	.visit-links { gap: 30px; }
	.visit-links a { font-size: 20px; }

	.cta-heading { font-size: 28px; }
	.cta-buttons { flex-direction: column; width: 100%; }

	.cta-notice p { font-size: 12px; text-align: left; }

	/* 모바일: 라벨 숨기고 아이콘만 → 폭 52px 로 컴팩트하게 */
	.floating-banner {
		right: 16px;
		bottom: 16px;
		width: 52px;
		gap: 16px;
		padding-top: 20px;
	}
	.float-menus { gap: 16px; }
	.float-text { display: none; }              /* 라벨 숨김 */
	.float-btn { gap: 0; }
	.float-divider { width: 24px; }
	.float-top {
		width: 52px;
		height: 52px;
		border-radius: 26px;
	}
	.float-top svg { width: 22px; height: auto; }
}

@media (max-width: 1024px) {
	.philosophy-card { padding: 60px 40px 280px; background: rgb(235, 239, 247); }
	.philosophy-body { gap: 20px; }
	.signature-head { gap: 20px; }
	.sig-content { gap: 20px; }
	.sig-more { margin-bottom: 20px; }
	.sec-title { gap: 10px; }
	.menu .inner-wrap { gap: 50px; }
	.director-head { gap: 20px; }
	.director-text { gap: 20px; }
	.director-photo {right: 0;height: calc(100% + 300px);bottom: 100px;}
}