@charset "UTF-8";

/* ==================== */
/* Header               */
/* ==================== */
.ibaek-header {
	position: fixed !important;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--header-height);
	background: transparent;
	z-index: 1000;
	transition: background var(--transition-normal), box-shadow var(--transition-normal),
		height var(--transition-normal);
}

/* 스크롤 시 — 응축(condense): 반투명 베이지 + 블러 + 높이 축소 */
.ibaek-header.scrolled {
	height: 72px;
	background: rgba(255, 250, 245, 0.82);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: 0 2px 16px rgba(68, 58, 53, 0.08);
}

.ibaek-header .header-inner {
	position: relative;
	height: 100%;
	max-width: 1920px;
	margin: 0 auto;
	padding: 0 260px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* Header Logo */
.ibaek-header .header-logo {
	display: flex;
	align-items: center;
	height: 100%;
	z-index: 2;
}

.ibaek-header .header-logo a {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 100%;
}

/* SVG에 preserveAspectRatio="none" 박혀 있어 width/height 둘 다 비율대로 명시 */
.ibaek-header .logo-symbol {
	height: 44px; width: 39.9px;
	transition: height var(--transition-normal), width var(--transition-normal);
}
.ibaek-header .logo-type {
	height: 24px; width: 120.4px;
	transition: height var(--transition-normal), width var(--transition-normal);
}

/* 스크롤 응축 시 로고 미세 축소 (비율 유지) */
.ibaek-header.scrolled .logo-symbol { height: 38px; width: 34.5px; }
.ibaek-header.scrolled .logo-type { height: 21px; width: 105.4px; }

/* GNB (Global Navigation) - 중앙 */
.ibaek-header .gnb {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: max-content;
}

.ibaek-header .gnb > ul {
	display: flex;
	gap: 64px;
}

.ibaek-header .gnb > ul > li > a {
	display: block;
	font-size: 16px;
	font-weight: 600;
	color: var(--black-01, #111111);
	white-space: nowrap;
	transition: color var(--transition-normal);
}

.ibaek-header .gnb > ul > li > a:hover {
	color: var(--brown-01, #aa9371);
}

/* Depth2 Dropdown */
.ibaek-header .gnb > ul > li {
	position: relative;
}

.ibaek-header .gnb .has-depth2 > a::after {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform var(--transition-normal);
}

.ibaek-header .gnb .depth2 {
	display: none;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	min-width: 160px;
	padding: 16px 0;
	margin-top: 18px;
	background: var(--beige-01, #fffaf5);
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(68, 58, 53, 0.12);
}

/* 헤더와 드롭다운 사이 빈틈 hover 유지용 */
.ibaek-header .gnb .has-depth2::before {
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 18px;
}

.ibaek-header .gnb .has-depth2:hover .depth2 {
	display: block;
}

.ibaek-header .gnb .has-depth2:hover > a::after {
	transform: translateY(1px) rotate(-135deg);
}

.ibaek-header .gnb .depth2 li a {
	display: block;
	padding: 10px 24px;
	font-size: 15px;
	font-weight: 500;
	color: var(--brown-02, #443a35);
	white-space: nowrap;
	text-align: center;
	transition: color var(--transition-normal), background var(--transition-normal);
}

.ibaek-header .gnb .depth2 li a:hover {
	color: var(--brown-01, #aa9371);
	background: rgba(170, 147, 113, 0.08);
}

/* 우측 버튼 */
.ibaek-header .header-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	z-index: 2;
}

.header-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 32px;
	border-radius: 50px;
	font-size: 18px;
	line-height: 1;
	white-space: nowrap;
	transition: all var(--transition-normal);
}

.header-btn--outline {
	background: var(--white);
	border: 1px solid var(--brown-01, #aa9371);
	color: var(--brown-02, #443a35);
	font-weight: 400;
}

.header-btn--outline:hover {
	background: var(--brown-01, #aa9371);
	color: var(--beige-01, #fffaf5);
}

.header-btn--fill {
	background: var(--brown-01, #aa9371);
	color: var(--beige-01, #fffaf5);
	font-weight: 700;
}

.header-btn--fill:hover {
	background: var(--brown-02, #443a35);
}

/* 헤더 우측: 텍스트 버튼 → 아이콘 원형 버튼 (20260713 KEVIN 승인)
   가로폭 축소로 GNB "전후사진"과 간섭 제거 + 로그인 아이콘(FSL 주입) 자리 확보.
   ⚠️ .header-actions 스코프 한정 — 사이드바(.sidebar-actions)는 텍스트 링크 유지 */
.ibaek-header .header-actions .header-btn {
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 50%;
	font-size: 0;
	line-height: 0;
}

.ibaek-header .header-actions .header-btn::before {
	content: '';
	width: 22px;
	height: 22px;
	background-color: currentColor;
	transition: background-color var(--transition-normal);
	-webkit-mask: var(--btn-icon) center / contain no-repeat;
	mask: var(--btn-icon) center / contain no-repeat;
}

/* 카카오 문의: 말풍선 — 상담문의와 동일한 브라운 채움 스타일로 통일 */
.ibaek-header .header-actions .header-btn--outline {
	--btn-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3.2C6.7 3.2 2.4 6.6 2.4 10.8c0 2.7 1.8 5.1 4.5 6.4l-.9 3.4c-.1.4.3.7.6.5l4-2.7c.4.1.9.1 1.4.1 5.3 0 9.6-3.4 9.6-7.6S17.3 3.2 12 3.2z'/></svg>");
	background: var(--brown-01, #aa9371);
	border-color: var(--brown-01, #aa9371);
	color: var(--beige-01, #fffaf5);
}

.ibaek-header .header-actions .header-btn--outline:hover {
	background: var(--brown-02, #443a35);
	border-color: var(--brown-02, #443a35);
	color: var(--beige-01, #fffaf5);
}

/* 소개(intro-header-white) 인라인 스타일이 outline 버튼을 고스트로 바꾸는 것보다 우선 — 채움 유지 */
body.intro-header-white .ibaek-header:not(.scrolled) .header-actions .header-btn--outline {
	background: var(--brown-01, #aa9371);
	border-color: var(--brown-01, #aa9371);
	color: var(--beige-01, #fffaf5);
}

body.intro-header-white .ibaek-header:not(.scrolled) .header-actions .header-btn--outline:hover {
	background: var(--brown-02, #443a35);
	border-color: var(--brown-02, #443a35);
}

/* 상담문의(예약): 캘린더 체크 */
.ibaek-header .header-actions .header-btn--fill {
	--btn-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='5' width='17' height='15.5' rx='2.5'/><path d='M3.5 9.5h17M8 2.8V6M16 2.8V6M9 14.5l2.2 2.2 3.8-3.8'/></svg>");
}

/* Mobile Menu Button */
.btn-menu {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
}

.btn-menu span {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--brown-02, #443a35);
	position: relative;
	transition: all var(--transition-normal);
}

.btn-menu span::before,
.btn-menu span::after {
	content: '';
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--brown-02, #443a35);
	transition: all var(--transition-normal);
}

.btn-menu span::before {
	top: -8px;
}

.btn-menu span::after {
	top: 8px;
}

/* Mobile Menu Open State */
.btn-menu.active span {
	background: transparent;
}

.btn-menu.active span::before {
	top: 0;
	transform: rotate(45deg);
}

.btn-menu.active span::after {
	top: 0;
	transform: rotate(-45deg);
}

/* ==================== */
/* Mobile Sidebar       */
/* ==================== */
.sidebar {
	position: fixed;
	top: 0;
	right: -100%;
	width: 100%;
	max-width: 340px;
	height: 100vh;
	background: var(--beige-02, #e3dbcc);   /* 시안: 밝은 베이지 패널 */
	z-index: 1001;
	transition: right var(--transition-slow), max-width var(--transition-slow);
	overflow-y: auto;
}

.sidebar.active,
.sidebar.is-open {
	right: 0;
}

/* 서브 열렸을 때 사이드바 넓혀서 우측 서브 칸 확보 (한 패널 2컬럼) */
.sidebar.sub-open {
	max-width: 560px;
}

/* 모바일: 화면 폭 넘지 않게 (2컬럼이 화면 안에 들어오도록) */
@media (max-width: 600px) {
	.sidebar.sub-open { max-width: 100%; }
	.sidebar.sub-open .sidebar-main-menu { width: 130px; }
	.sidebar.sub-open .sidebar-content { gap: 20px; }
	.sidebar.sub-open .sidebar-sub-menu { padding-left: 20px; }
	.sidebar.sub-open .sidebar-main-menu li a { font-size: 17px; }
	.sidebar.sub-open .sidebar-sub-menu .sub-menu-btn { font-size: 16px; }
}

.sidebar-inner {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	padding: 80px 40px;
}

/* 좌(대메뉴) / 우(서브) 2컬럼 */
.sidebar-content {
	flex: 0 0 auto;
	display: flex;
	gap: 40px;
	align-items: flex-start;
}

.sidebar-main-menu {
	flex: 0 0 auto;
	width: 220px;
}

.sidebar-main-menu ul {
	display: flex;
	flex-direction: column;
	gap: 48px;   /* 시안: 메뉴 항목 간격 48px */
}

.sidebar-main-menu li.has-sub.active > a {
	color: var(--brown-01, #aa9371);   /* 선택된 대메뉴 강조 */
}

.sidebar-main-menu li a {
	font-size: 20px;
	font-weight: 500;
	color: var(--brown-02, #443a35);
	transition: color var(--transition-normal);
}

.sidebar-main-menu li a:hover {
	color: var(--brown-01, #aa9371);
}

/* 서브 칸: 같은 사이드바 안 우측 컬럼 (별도 슬라이드 패널 아님) */
.sidebar-sub-menu {
	flex: 1 1 auto;
	min-width: 0;
	padding-left: 40px;
	border-left: 1px solid rgba(68, 58, 53, 0.15);
	/* 서브 열리기 전엔 접힘 */
	display: none;
}

.sidebar.sub-open .sidebar-sub-menu {
	display: block;
}

.sidebar-sub-menu .sub-menu-group {
	display: none;
	flex-direction: column;
	gap: 28px;
}

.sidebar-sub-menu .sub-menu-group.active {
	display: flex;
}

.sidebar-sub-menu .sub-menu-btn {
	font-size: 18px;
	font-weight: 500;
	color: var(--brown-02, #443a35);
	transition: color var(--transition-normal);
}

.sidebar-sub-menu .sub-menu-btn:hover {
	color: var(--brown-01, #aa9371);
}

/* 뒤로 버튼: 2컬럼에선 불필요하므로 숨김 (대메뉴 다시 탭하면 토글) */
.sub-menu-back { display: none; }

/* 시안(20260707): 대메뉴는 플랫 리스트 — 서브 화살표 없음, 탭 시 첫 서브 페이지로 이동 */

.sidebar-footer {
	margin-top: 40px;
	padding-top: 40px;
	border-top: 1px solid rgba(68, 58, 53, 0.15);
}

.sidebar-logo img {
	height: 32px;
}

.sidebar-actions {
	display: flex;
	flex-direction: column-reverse;   /* DOM: 카카오→예약 순 / reverse로 예약하기 위, 카카오 문의 아래 (시안) */
	align-items: flex-start;
	gap: 24px;
}

/* 시안: pill 버튼이 아니라 브라운 텍스트 링크 */
.sidebar-actions .header-btn {
	width: auto;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	font-size: 16px;
	font-weight: 500;
	color: var(--brown-02, #443a35);
}

.sidebar-actions .header-btn:hover {
	background: none;
	color: var(--brown-01, #aa9371);
}

/* Close Button — 시안: 20px 아이콘, 우상단 32px 지점 (터치영역 40px 유지) */
.btn-close {
	position: absolute;
	top: 22px;
	right: 22px;
	width: 40px;
	height: 40px;
}

.btn-close span {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 2px;
	background: var(--brown-02, #443a35);
}

.btn-close span:first-child {
	transform: translate(-50%, -50%) rotate(45deg);
}

.btn-close span:last-child {
	transform: translate(-50%, -50%) rotate(-45deg);
}

/* Sidebar Overlay */
.sidebar-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(17, 17, 17, 0.4);   /* 시안: bg_black_02_40 */
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	transition: all var(--transition-normal);
}

.sidebar-overlay.active,
.sidebar-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

/* ==================== */
/* Footer (아이백 - Dark) */
/* ==================== */
.footer {
	position: relative;
	background: var(--black-01, #111111);
	padding: 120px 0;
}

.footer .footer-body {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 120px;
}

.footer .footer-info {
	display: flex;
	flex-direction: column;
	gap: 52px;
	flex-shrink: 0;
}

/* Signature */
.footer .footer-signature {
	display: flex;
	flex-direction: column;
	gap: 32px;
	width: 251px;
}

.footer .footer-logo {
	display: flex;
	align-items: center;
	gap: 12px;
	/* SVG(브라운/블랙) → 흰색으로 반전 */
	filter: brightness(0) invert(1);
}

.footer .footer-logo-symbol { height: 48px; width: 43.5px; }
.footer .footer-logo-type { height: 26px; width: 130.4px; }

.footer .footer-logo-en {
	font-family: 'Montserrat', serif;
	font-size: 20px;
	line-height: 1.6;
	color: var(--white);
}

.footer .footer-desc {
	font-size: 20px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: -0.16px;
	color: var(--white);
}

/* Meta */
.footer .footer-meta {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.footer .footer-meta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	font-size: 16px;
	color: var(--gray-01, #7c7c7c);
}

.footer .footer-meta-item b {
	font-weight: 700;
	margin-right: 12px;
}

.footer .footer-policy {
	display: flex;
	gap: 25px;
}

.footer .footer-policy a {
	font-size: 16px;
	color: var(--black-03, #515151);
	transition: color var(--transition-normal);
}

.footer .footer-policy a:hover { color: var(--gray-01, #7c7c7c); }

.footer .footer-copy {
	font-size: 16px;
	color: var(--black-03, #515151);
}

/* Contact */
.footer .footer-contact {
	display: flex;
	flex-direction: column;
	gap: 40px;
	flex-shrink: 0;
}

.footer .footer-phone {
	display: flex;
	flex-direction: column;
	gap: 20px;
	color: var(--white);
}

.footer .footer-phone-label {
	font-size: 20px;
	font-weight: 700;
}

.footer .footer-phone-num {
	font-size: 44px;
	font-weight: 700;
	white-space: nowrap;
}

.footer .footer-social {
	display: flex;
	gap: 20px;
	align-items: center;
}

.footer .footer-sns {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity var(--transition-normal);
}

/* 카카오: SVG에 원형 테두리 포함 → 40px 꽉 채움 */
.footer .footer-sns--kakao svg {
	width: 40px;
	height: 40px;
	display: block;
}

/* 인스타·유튜브: CSS 둥근 사각 테두리 + 내부 아이콘 20px */
.footer .footer-sns--outline {
	border: 1px solid var(--beige-01, #fffaf5);
	border-radius: 20px;
}

.footer .footer-sns--outline svg {
	width: 20px;
	height: 20px;
	display: block;
}

.footer .footer-sns:hover { opacity: 0.7; }

/* Menu */
.footer .footer-menu {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 154px;
	flex-shrink: 0;
}

.footer .footer-menu-title {
	font-size: 20px;
	font-weight: 700;
	color: var(--white);
}

.footer .footer-menu-list {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.footer .footer-menu-list a {
	font-size: 16px;
	font-weight: 400;
	color: var(--white);
	transition: color var(--transition-normal);
}

.footer .footer-menu-list a:hover { color: var(--brown-01, #aa9371); }

/* ==================== */
/* Common Buttons       */
/* ==================== */
.btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 32px;
	background: var(--primary);
	border-radius: var(--radius-lg);
	font-size: 16px;
	font-weight: 600;
	color: var(--white);
	transition: all var(--transition-normal);
}

.btn-primary:hover {
	background: var(--primary-dark);
	transform: translateY(-2px);
}

.btn-outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 32px;
	background: transparent;
	border: 1px solid var(--primary);
	border-radius: var(--radius-lg);
	font-size: 16px;
	font-weight: 600;
	color: var(--primary);
	transition: all var(--transition-normal);
}

.btn-outline:hover {
	background: var(--primary);
	color: var(--white);
}

.btn-white {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 32px;
	background: var(--white);
	border-radius: var(--radius-lg);
	font-size: 16px;
	font-weight: 600;
	color: var(--primary);
	transition: all var(--transition-normal);
}

.btn-white:hover {
	background: var(--gray-100);
	transform: translateY(-2px);
}

/* ==================== */
/* Responsive           */
/* ==================== */
@media (max-width: 1480px) {
	.ibaek-header .header-inner {
		padding: 0 40px;
	}

	.ibaek-header .gnb > ul {
		gap: 40px;
	}
}

@media (max-width: 1280px) {
	.ibaek-header .gnb > ul {
		gap: 28px;
	}

	.ibaek-header .gnb > ul > li > a {
		font-size: 15px;
	}

	.header-btn {
		padding: 10px 24px;
		font-size: 16px;
	}
}

@media (max-width: 1024px) {
	.ibaek-header .header-inner {
		padding: 0 24px;
	}

	.ibaek-header .gnb {
		display: none;
	}

	.ibaek-header .header-actions {
		display: none;
	}

	/* 모바일: 헤더는 PC와 동일하게 최초 투명, 스크롤 시 .scrolled 베이지 응축 */
	.ibaek-header .logo-symbol { height: 36px; width: 32.6px; }
	.ibaek-header .logo-type { height: 20px; width: 100.3px; }

	.btn-menu {
		display: flex;
	}

	.footer {
		padding: 80px 0;
	}

	.footer .footer-body {
		flex-direction: column;
		gap: 60px;
	}

	.footer .footer-info {
		gap: 40px;
	}
}

@media (max-width: 767px) {
	/* 시안: 패널 340px — 340px이 안 나오는 좁은 화면에서도 좌측 50px은 페이지가 보이게 */
	.sidebar {
		max-width: min(340px, 100% - 50px);
	}

	.sidebar-inner {
		padding: 80px 40px 40px;
	}

	.sidebar-main-menu li a {
		font-size: 20px;
	}

	/* footer: 시안 모바일 — 시그니처→소개→연락처→메뉴→사업자정보 순.
	   display:contents 로 .footer-info 자식들을 .footer-body 플렉스 아이템으로 승격해 재배치 */
	.footer { padding: 60px 0; }
	.footer .inner-wrap { padding: 0 40px; }
	.footer .footer-body { gap: 40px; }
	.footer .footer-info { display: contents; }
	.footer .footer-signature { order: 1; width: 100%; }
	.footer .footer-logo-symbol { height: 40px; width: 36.3px; }
	.footer .footer-logo-en { font-size: 16px; }
	.footer .footer-desc { order: 2; font-size: 16px; }
	.footer .footer-contact { order: 3; gap: 24px; }
	.footer .footer-phone-label { font-size: 16px; }
	.footer .footer-phone-num { font-size: 32px; }
	.footer .footer-sns { width: 32px; height: 32px; }
	.footer .footer-sns--kakao svg { width: 32px; height: 32px; }
	.footer .footer-sns--outline { border-radius: 16px; }
	.footer .footer-sns--outline svg { width: 16px; height: 16px; }
	.footer .footer-menu { order: 4; width: 100%; gap: 20px; }
	.footer .footer-menu-title { font-size: 16px; }
	.footer .footer-menu-list { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
	.footer .footer-meta { order: 5; gap: 20px; }
	.footer .footer-meta-row { gap: 20px 32px; font-size: 16px; }
	.footer .footer-policy { flex-wrap: wrap; justify-content: space-between; width: 100%; gap: 16px; }
}

/* ==================== */
/* Mobile BR Control    */
/* ==================== */
@media (max-width: 767px) {
	/* 긴 설명 문단 — br 숨기고 자연스럽게 흘림 */
	.section-desc br,
	.who-we-are-desc br,
	.community-main-desc br,
	.cm-hero-desc br,
	.fi-page-desc br,
	.fi-other-desc br,
	.re-page-desc br,
	.re-other-desc br,
	.wm-page-desc br,
	.wm-other-desc br,
	.ct-desc br,
	.about-who-desc br,
	.nw-card-desc br {
		display: none;
	}

	/* 긴 설명 문단 — 단어 단위 줄바꿈 */
	.section-desc,
	.who-we-are-desc,
	.community-main-desc,
	.cm-hero-desc,
	.fi-page-desc,
	.fi-other-desc,
	.re-page-desc,
	.re-other-desc,
	.wm-page-desc,
	.wm-other-desc,
	.ct-desc,
	.about-who-desc,
	.nw-card-desc {
		word-break: keep-all;
	}
}

/* ==================================================== */
/* 위챗 QR — 푸터 아이콘 버튼 + 퀵메뉴 버튼 공용 모달        */
/* footer/quick 은 전 페이지 공통이라 common.css 에 둔다.  */
/* ==================================================== */

/* 푸터 위챗 버튼: <button> 이라 브라우저 기본 스타일 제거 */
.footer .footer-sns--wechat {
	padding: 0;
	background: none;
	border: 1px solid var(--beige-01, #fffaf5);
	border-radius: 20px;
	cursor: pointer;
	color: inherit;
}

/* 퀵메뉴 위챗 버튼: <button> → .float-btn 과 동일 정렬 맞춤 */
.float-btn--wechat {
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
	font: inherit;
	color: inherit;
}

/* --- 모달(라이트박스) --- */
.qr-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	/* 기본 숨김: 표시 시 JS 가 .is-open 부여 */
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}
.qr-modal.is-open {
	opacity: 1;
	visibility: visible;
}

.qr-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(17, 17, 17, 0.6);
}

.qr-modal-dialog {
	position: relative;
	background: var(--white, #fff);
	border-radius: 16px;
	padding: 20px;
	max-width: 360px;
	width: 100%;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
	transform: translateY(12px) scale(0.98);
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.qr-modal.is-open .qr-modal-dialog {
	transform: translateY(0) scale(1);
}

.qr-modal-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}

.qr-modal-close {
	position: absolute;
	top: -14px;
	right: -14px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--brown-01, #aa9371);
	color: var(--beige-01, #fffaf5);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	transition: background var(--transition-normal, 0.3s ease);
}
.qr-modal-close:hover { background: var(--brown-02, #786244); }

@media (max-width: 767px) {
	.qr-modal-dialog { max-width: 300px; padding: 16px; }
	.qr-modal-close { top: -10px; right: -10px; width: 36px; height: 36px; }
}