@charset "UTF-8";

/* ==================================================== */
/* 아이백의원 - 상세(sub) 페이지 공통 컴포넌트             */
/* main.css에 의존하지 않도록 상세페이지에서 공통으로 쓰는   */
/* 컴포넌트(cta / cta-notice / mood / visit / btn-pill /   */
/* sec-title / 폰트 헬퍼)를 이 파일로 분리.                */
/* 각 상세페이지: sub.css + 전용css(intro.css, clear.css) */
/* ==================================================== */

/* ====================================================
   Figma leading-trim 재현 (단일 라인 요소 전용)
   ==================================================== */
.sub-common .sec-label,
.mood .sec-label,
.visit .sec-label,
.visit-sub {
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

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

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

/* 공통 폰트 헬퍼 */
.en,
.sec-label,
.sec-heading--en,
.visit-sub {
	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);
}

/* ==================== */
/* 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 스타일 — 메인(main.css)과 반드시 동일하게 유지할 것.
   (소개 페이지는 sub.css 만 로드하므로 여기에도 있어야 함. 두 사본이
    달라지면 마퀴가 깨지므로, 수정 시 main.css 와 함께 갱신) */
.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: 1 1 0;
	min-width: 0;
	transition: flex-grow 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.mood-img--sub  { flex-grow: 1; }
.mood-img--main { flex-grow: 3.95; }

/* hover 로 아코디언이 실제 움직이는 동안에만 will-change 부여 → 상시 레이어 방지 */
.mood-gallery:hover .mood-img {
	will-change: flex-grow;
}

.mood-gallery:hover .mood-img:hover {
	flex-grow: 3.95;
}

.mood-gallery:hover .mood-img:not(:hover) {
	flex-grow: 1;
}

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

/* ==================== */
/* 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;
}

/* ==================================================== */
/* Responsive (공통 컴포넌트)                             */
/* ==================================================== */
@media (max-width: 1480px) {
	.cta { padding: 120px 40px; }
	.mood-inner { padding: 0 40px; }
	.visit-text { padding-left: 40px; }
}

@media (max-width: 1280px) {
	.sec-heading { font-size: 44px; }
	.cta-heading { font-size: 44px; }

	/* 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 해제 → 고정폭으로 스크롤) — main.css 와 동일 유지 */
	.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; }
}

@media (max-width: 1024px) {
	.sec-label { font-size: 20px; }
	.sec-heading { font-size: 34px; }
	.sec-desc { font-size: 18px; }

	section.mood, section.cta { padding: 80px 0; }
}

@media (max-width: 767px) {
	.btn-pill { width: 100%; font-size: 16px; padding: 16px 24px; }

	.sec-label { font-size: 14px; }
	.sec-heading { font-size: 28px; }
	.sec-desc { font-size: 15px; }

	/* 모바일: 7장 전부 이음새 없는 무한 마퀴 자동 슬라이드 — main.css 와 동일 유지
	   (JS main.js 의 initMoodMarquee 가 트랙 래핑 + 1벌 복제 → .is-marquee 부여) */
	section.mood { padding: 64px 0; }
	.mood-inner { gap: 48px; padding: 0; }
	.mood-head { gap: 32px; padding: 0 40px; }
	.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; }

	.mood-gallery.is-marquee { display: block; }
	.mood-gallery.is-marquee .mood-marquee-track {
		display: flex;
		width: max-content;
		animation: mood-marquee var(--mood-dur, 30s) linear infinite;
	}
	.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: 제목(중앙) → 지도 → 정보 순 적층 */
	section.visit { padding: 64px 0; gap: 48px; }
	.visit-text { display: contents; }
	.visit .sec-title { order: 1; align-items: center; text-align: center; padding: 0 40px; gap: 20px; }
	.visit-map { order: 2; width: auto; max-width: none; margin: 0 40px; min-height: 0; height: 200px; border-radius: 0; align-self: auto; }
	.visit-body { order: 3; padding: 0 40px; gap: 32px; }
	.visit-block { gap: 20px; }
	.visit-sub { font-size: 15px; }
	.visit-detail { gap: 12px; }
	.visit-detail-main { font-size: 16px; }
	.visit-detail-sub { font-size: 14px; }
	.visit-hours { gap: 16px; }
	.visit-hours-row { font-size: 16px; gap: 16px; }
	.visit-days { min-width: 64px; }
	.visit-phone { font-size: 16px; }
	.visit-links { gap: 24px; }
	.visit-links a { font-size: 16px; }

	/* cta: 버튼 세로 스택(고정폭 중앙 정렬) */
	section.cta { padding: 64px 40px; }
	.cta-inner { gap: 36px; }
	.cta-title { gap: 24px; }
	.cta-heading { font-size: 28px; }
	.cta-sub { font-size: 15px; }
	.cta-buttons { flex-direction: column; width: 240px; gap: 12px; }

	.cta-notice { padding: 32px 0; }
	.cta-notice p { font-size: 13px; line-height: 1.6; text-align: center; padding: 0 20px; word-break: keep-all; }
}

/* ==================== */
/* Scroll Reveal (data-reveal) — 뷰포트 진입 시 은은한 fade + slide-up.
   common.js의 IntersectionObserver가 .is-in 을 부여. feat 핀과 톤 통일. */
/* ==================== */
[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);
}
[data-reveal].is-in {
	opacity: 1;
	transform: none;
}

/* stagger : 같은 그룹 안 순차 등장 (recommend 카드 등) */
[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 — 페이지 진입 시 히어로 요소 순차 등장.
   초기 숨김은 html.js(<head> 인라인 스크립트가 첫 프레임부터 부여)로 걸어
   FOUC/중간프레임 없이 처음부터 opacity:0에서 시작.
   common.js가 .pg-hero에 .hero-loaded 부여 → 등장.
   JS 미실행 시 html.js 자체가 안 붙어 히어로 정상 표시(안전). 리빌과 톤 통일. */
/* ==================== */
html.js .pg-hero .pg-hero-en,
html.js .pg-hero .pg-hero-title,
html.js .pg-hero .pg-hero-sub,
html.js .pg-hero .pg-category {
	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;
}

/* 순차 등장 : en → title → sub → category (시작 0.25s 지연 + 간격 0.15s) */
html.js .pg-hero.hero-loaded .pg-hero-en       { transition-delay: 0.25s; }
html.js .pg-hero.hero-loaded .pg-hero-title    { transition-delay: 0.4s; }
html.js .pg-hero.hero-loaded .pg-hero-sub      { transition-delay: 0.55s; }
html.js .pg-hero.hero-loaded .pg-category      { transition-delay: 0.7s; }

html.js .pg-hero.hero-loaded .pg-hero-en,
html.js .pg-hero.hero-loaded .pg-hero-title,
html.js .pg-hero.hero-loaded .pg-hero-sub,
html.js .pg-hero.hero-loaded .pg-category {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html.js .pg-hero .pg-hero-en,
	html.js .pg-hero .pg-hero-title,
	html.js .pg-hero .pg-hero-sub,
	html.js .pg-hero .pg-category {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ==================== */
/* Hero Load Sequence — 소개(.intro-hero) / 아이백클리어(.clear-hero)
   상세 .pg-hero 와 동일 톤(html.js 첫프레임 숨김 → hero-loaded 등장).
   구조가 달라 각 히어로별 요소·순서를 명시. common.js가 hero-loaded 부여. */
/* ==================== */

/* --- 소개: en → kr → desc --- */
html.js .intro-hero .intro-hero-en,
html.js .intro-hero .intro-hero-kr,
html.js .intro-hero .intro-hero-desc,
/* --- 클리어: en → logo → sub → body → category --- */
html.js .clear-hero .clear-hero-en,
html.js .clear-hero .clear-hero-logo,
html.js .clear-hero .clear-hero-sub,
html.js .clear-hero .clear-hero-body,
html.js .clear-hero .clear-category {
	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;
}

/* 소개 순차 등장 (시작 0.25s + 간격 0.15s) */
html.js .intro-hero.hero-loaded .intro-hero-en   { transition-delay: 0.25s; }
html.js .intro-hero.hero-loaded .intro-hero-kr   { transition-delay: 0.4s; }
html.js .intro-hero.hero-loaded .intro-hero-desc { transition-delay: 0.55s; }

/* 클리어 순차 등장 (시작 0.25s + 간격 0.15s) */
html.js .clear-hero.hero-loaded .clear-hero-en    { transition-delay: 0.25s; }
html.js .clear-hero.hero-loaded .clear-hero-logo  { transition-delay: 0.4s; }
html.js .clear-hero.hero-loaded .clear-hero-sub   { transition-delay: 0.55s; }
html.js .clear-hero.hero-loaded .clear-hero-body  { transition-delay: 0.7s; }
html.js .clear-hero.hero-loaded .clear-category   { transition-delay: 0.85s; }

html.js .intro-hero.hero-loaded .intro-hero-en,
html.js .intro-hero.hero-loaded .intro-hero-kr,
html.js .intro-hero.hero-loaded .intro-hero-desc,
html.js .clear-hero.hero-loaded .clear-hero-en,
html.js .clear-hero.hero-loaded .clear-hero-logo,
html.js .clear-hero.hero-loaded .clear-hero-sub,
html.js .clear-hero.hero-loaded .clear-hero-body,
html.js .clear-hero.hero-loaded .clear-category {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html.js .intro-hero .intro-hero-en,
	html.js .intro-hero .intro-hero-kr,
	html.js .intro-hero .intro-hero-desc,
	html.js .clear-hero .clear-hero-en,
	html.js .clear-hero .clear-hero-logo,
	html.js .clear-hero .clear-hero-sub,
	html.js .clear-hero .clear-hero-body,
	html.js .clear-hero .clear-category {
		opacity: 1;
		transform: none;
		transition: none;
	}
}