@charset "utf-8";
/* =========================================================================
 * JDH 우측 퀵메뉴 (include/quickmenu.jsp 전용) — 2026-08-11 신설
 *
 * 순서는 **아래부터** [닫기 · 맨위로 · 전화상담 · 네이버톡톡 · 카카오톡] 이다(사용자 지정).
 * 마크업이 위→아래로 카카오→네이버→전화→TOP→닫기 순이라 그대로 쌓으면 지시대로 놓인다.
 * flex-direction 을 뒤집지 말 것 — DOM 순서가 곧 화면 순서다.
 *
 * 2026-08-11(2차) 원형 버튼을 따로따로 띄우는 형식이었다(카드·구분선 없음).
 * 2026-08-21(3차) **캡슐 카드형으로 재교체** — 사용자 참고 이미지 + "가독성 더 좋게".
 *   · 채널 3개를 흰 캡슐 카드 한 장에 쌓고 항목 사이를 얇은 선으로 나눈다.
 *   · 항목 = 라운드 사각 아이콘(딥그린 채움) + 그 아래 한글 라벨(12.5px/700).
 *     라벨이 카드 안에 놓여 배경과 싸우지 않으므로, 예전에 라벨 뒤에 깔던
 *     **반투명 흰 알약은 제거**했다(그게 있으면 카드 안에서 이중 배경이 된다).
 *   · TOP·닫기는 카드 밖 아래에 딥그린 원으로 둔다 — 카드는 '채널'만 담는다.
 *   ⚠ 원형 낱개 배치로 되돌리지 말 것. 지금 형식이 사용자가 고른 참고 이미지다.
 *
 * ⚠ bottom 값은 JSP 의 스크립트가 하단 간편예약 바 높이에 맞춰 넣는다.
 *   여기 적힌 값은 스크립트가 돌기 전 초기값일 뿐이다.
 * ========================================================================= */
.jdh_quick {
	position: fixed;
	right: 18px;
	bottom: 100px;
	z-index: 900;            /* 간편예약 바(=1000 계열)보다는 아래, 본문보다는 위 */
	font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
}
.jdh_quick * { box-sizing: border-box; }

/* 채널 카드 — 폭 하나로 항목·라벨 크기가 정해진다.
   ⚠ '네이버톡톡'(5글자)이 한 줄에 들어가는 최소 폭이 96px 이다. 더 줄이면 라벨이 접힌다.
   2026-08-21(2차) — 사용자 지시 "PC 에서 퀵메뉴 좀 더 크게" → 96 → 112px.
   아이콘 타일·라벨·TOP 원도 함께 키웠다(아래 각 규칙 참조). 모바일 값은 그대로 둔다. */
.jdh_quick__box {
	--qw: 112px;
	width: var(--qw);
	display: flex;
	flex-direction: column;
	padding: 4px 0;
	background: #fff;
	border: 1px solid #E3E7EA;
	border-radius: 28px;
	box-shadow: 0 14px 30px -14px rgba(28,30,26,.30);
	overflow: hidden;         /* 항목 hover 배경이 카드 라운드를 넘지 않게 */
}
/* 닫힌 상태 — 채널 카드와 닫기 버튼만 접는다.
   ⚠ **TOP 은 남긴다**(2026-08-28 사용자 지시: "x 를 눌러도 TOP 은 항상 나오도록").
     예전처럼 .jdh_quick__tools 를 통째로 display:none 하면 그 안의 TOP 까지 사라진다 →
     닫기 버튼만 집어서 숨길 것. 닫으면 [TOP] + [열기(+)] 두 원이 남는다. */
.jdh_quick.is-closed .jdh_quick__box,
.jdh_quick.is-closed .jdh_quick__tool--close { display: none; }
/* 닫히면 위에 카드가 없으므로 tools 의 윗여백을 걷고,
   TOP 과 열기(+) 사이는 tools 의 gap 과 같은 간격으로 맞춘다(열기 버튼은 tools 밖 형제다). */
.jdh_quick.is-closed .jdh_quick__tools { margin-top: 0; }
.jdh_quick.is-closed .jdh_quick__open { margin-top: 8px; }

/* 2026-08-12 — 모바일에서 푸터에 닿으면 감춘다(quickmenu.jsp 의 place() 가 토글).
 * 푸터 본문 위에 얹혀 로고·주소·약관 링크를 가리던 문제를 막는 장치다.
 * ⚠ display:none 이 아니라 visibility 로 감춘다 — 높이를 유지해야 place() 의 outerHeight 계산이 흔들리지 않고,
 *   페이드로 사라져야 스크롤 중 갑자기 사라진 것처럼 보이지 않는다.
 * ⚠ 닫기 후 남는 열기(+) 버튼도 같이 감춰야 한다 — 이 버튼이 푸터를 가린다는 지적이었다. */
.jdh_quick.is-hidden,
.jdh_quick.is-hidden .jdh_quick__open {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .28s ease, visibility .28s ease;
}
.jdh_quick { transition: opacity .28s ease, visibility .28s ease; }

/* 채널 항목 — 카드 한 칸. 아이콘 + 라벨이 세로 한 세트다. */
.jdh_quick__btn {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 18px 6px 16px;
	background: none;
	border: 0;
	cursor: pointer;
	text-decoration: none;
	color: #3B5843;
	transition: background .22s ease;
}
.jdh_quick__btn:hover { background: #F7F5EF; }
/* 항목 사이 구분선 — 좌우를 띄워 카드 테두리에 닿지 않게 한다(참고 이미지의 짧은 선) */
.jdh_quick__btn + .jdh_quick__btn::before {
	content: '';
	position: absolute;
	top: 0; left: 18px; right: 18px;
	height: 1px;
	background: #ECEEEA;
}
/* 아이콘 타일 — 딥그린으로 채운 라운드 사각. 라벨과 대비를 만들어 한눈에 구분된다. */
.jdh_quick__ic {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	background: #3B5843;
	color: #FFFDF8;
	line-height: 0;
	transition: background .25s ease, color .25s ease;
}
.jdh_quick__ic svg { width: 25px; height: 25px; }

/* 채널 라벨 — 카드 안이라 배경 알약이 필요 없다(2026-08-21). 크기·굵기를 올려 가독성을 확보한다. */
.jdh_quick__label {
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: -0.5px;
	line-height: 1.15;
	white-space: nowrap;
	color: #2F3A33;
}

/* 채널 색은 hover 에서만 낸다 — 평소엔 딥그린으로 통일해야 줄이 정돈돼 보인다 */
.jdh_quick__btn--kakao:hover .jdh_quick__ic { background: #FEE500; color: #3C1E1E; }
.jdh_quick__btn--naver:hover .jdh_quick__ic { background: #03C75A; color: #fff; }
.jdh_quick__btn--tel:hover .jdh_quick__ic,
.jdh_quick__btn--tel.is-on .jdh_quick__ic { background: #24382C; }
.jdh_quick__btn--tel.is-on { background: #F7F5EF; }

/* ── TOP·닫기 — 카드 밖, 딥그린 원 ───────────────────────────────── */
.jdh_quick__tools {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
}
.jdh_quick__tool {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	width: 54px;
	height: 54px;
	padding: 0;
	background: #3B5843;
	border: 1px solid #3B5843;
	border-radius: 50%;
	box-shadow: 0 8px 18px -8px rgba(28,30,26,.34);
	color: #FFFDF8;
	cursor: pointer;
	transition: background .25s ease, transform .2s ease, opacity .25s ease;
}
.jdh_quick__tool:hover { background: #2F4736; border-color: #2F4736; transform: translateY(-2px); }
.jdh_quick__tool svg { width: 18px; height: 18px; }
.jdh_quick__tool--close svg { width: 21px; height: 21px; }
.jdh_quick__in { font-size: 10.5px; font-weight: 800; letter-spacing: .4px; line-height: 1; }
/* 최상단에서는 눌러도 갈 곳이 없으므로 흐리게 — 숨기면 줄 전체가 널뛴다 */
.jdh_quick__tool--top.is-off { opacity: .45; }

/* 닫은 뒤 남는 열기 버튼 — 닫기 버튼과 같은 자리·같은 크기 */
.jdh_quick__open {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;            /* 닫기(.jdh_quick__tool)와 같은 크기 — 같은 자리에 남는 버튼이다 */
	height: 54px;
	padding: 0;
	background: #3B5843;
	border: 1px solid #3B5843;
	border-radius: 50%;
	box-shadow: 0 8px 18px -8px rgba(28,30,26,.34);
	color: #FFFDF8;
	cursor: pointer;
	transition: background .25s ease, transform .2s ease;
}
.jdh_quick__open[hidden] { display: none; }
.jdh_quick__open:hover { background: #2F4736; transform: translateY(-2px); }
.jdh_quick__open svg { width: 24px; height: 24px; }

/* ── 전화 상담 카드 ─────────────────────────────────────────────────
   퀵메뉴 왼쪽에 뜬다. 꼬리(::after)가 전화 항목을 정확히 가리켜야 하므로
   **bottom 은 JSP 의 placeCall() 이 버튼 위치를 재서 넣는다**(2026-08-21).
   여기 값은 스크립트가 돌기 전 초기값일 뿐이니 고정값으로 되돌리지 말 것. */
.jdh_quick__call {
	position: absolute;
	right: 128px;            /* 카드 폭 112 + 여백 16 */
	bottom: 60px;
	width: 250px;
	padding: 22px 22px 20px;
	background: #fff;
	border: 1px solid #E7E2D8;
	border-radius: 12px;
	box-shadow: 0 16px 34px -14px rgba(28,30,26,.34);
	text-align: center;
}
.jdh_quick__call[hidden] { display: none; }
.jdh_quick__call::after {
	content: '';
	position: absolute;
	right: -6px;
	bottom: 34px;
	width: 10px; height: 10px;
	background: #fff;
	border-right: 1px solid #E7E2D8;
	border-top: 1px solid #E7E2D8;
	transform: rotate(45deg);
}
.jdh_quick__call-close {
	position: absolute;
	top: 6px; right: 8px;
	padding: 2px 6px;
	background: none; border: 0; cursor: pointer;
	font-size: 17px; line-height: 1; color: #A9A296;
}
.jdh_quick__call-close:hover { color: #5B615A; }
.jdh_quick__call-title {
	display: block;
	font-size: 17px; font-weight: 700; letter-spacing: -0.3px; color: #1C1E1A;
}
.jdh_quick__call-sub {
	display: block; margin-top: 6px;
	font-size: 13.5px; color: #8A9089; word-break: keep-all;
}
.jdh_quick__call-num {
	display: block; margin-top: 14px;
	padding: 12px 0;
	background: #03C75A;
	border-radius: 6px;
	font-size: 19px; font-weight: 700; letter-spacing: .4px;
	color: #fff !important;      /* 전역 a 색상 규칙이 이기므로 명시 */
	text-decoration: none;
}
.jdh_quick__call-num:hover { background: #02B152; }

@media all and (max-width: 768px) {
	.jdh_quick { right: 10px; }
	/* ⚠ 모바일은 데스크톱과 같은 크기로 두면 안 된다 — 390px 화면에서 본문을 크게 덮는다.
	   카드 폭을 줄이고 아이콘·라벨·여백을 함께 낮춘다(라벨은 한 줄을 유지하는 선까지만). */
	.jdh_quick__box { --qw: 78px; border-radius: 24px; }
	.jdh_quick__btn { padding: 11px 4px 10px; gap: 5px; }
	.jdh_quick__btn + .jdh_quick__btn::before { left: 13px; right: 13px; }
	.jdh_quick__ic { width: 32px; height: 32px; border-radius: 10px; }
	.jdh_quick__ic svg { width: 18px; height: 18px; }
	.jdh_quick__label { font-size: 11px; letter-spacing: -0.7px; }
	.jdh_quick__tools { gap: 7px; margin-top: 8px; }
	.jdh_quick__tool { width: 40px; height: 40px; }
	.jdh_quick__tool svg { width: 14px; height: 14px; }
	.jdh_quick__tool--close svg { width: 16px; height: 16px; }
	.jdh_quick__in { font-size: 8.5px; }
	/* ⚠ 2026-08-28 — 46 → 40px. 닫아도 TOP 이 남게 되면서 두 원이 항상 나란히 보이는데,
	   크기가 다르면 한쪽만 부풀어 보인다(데스크톱은 원래부터 54/54 로 같았다). */
	.jdh_quick__open { width: 40px; height: 40px; }
	.jdh_quick__open svg { width: 18px; height: 18px; }
	.jdh_quick.is-closed .jdh_quick__open { margin-top: 7px; }   /* 모바일 tools gap 과 동일 */
	.jdh_quick__call { right: 88px; width: 206px; padding: 18px 18px 16px; }
	.jdh_quick__call::after { bottom: 26px; }
}

/* ══ 언어별 채널 — 영어 WhatsApp·Facebook·Instagram·Google Maps / 중국어 Instagram·TikTok·微博·微信 /
   일본어 Instagram·X·YouTube·LINE ══
   ⚠ 브랜드 색은 hover(와 모달이 열린 동안)에만 쓴다. 평소 아이콘 타일은 다른 채널과 같은
     딥그린이어야 카드가 정돈돼 보인다(위 .jdh_quick__ic 주석과 같은 원칙). */
.jdh_quick__btn--whatsapp:hover .jdh_quick__ic,
.jdh_quick__btn--whatsapp.is-on .jdh_quick__ic { background: #25D366; color: #fff; }
.jdh_quick__btn--facebook:hover .jdh_quick__ic  { background: #1877F2; color: #fff; }
.jdh_quick__btn--googlemap:hover .jdh_quick__ic { background: #4285F4; color: #fff; }
.jdh_quick__btn--instagram:hover .jdh_quick__ic { background: #E1306C; color: #fff; }
.jdh_quick__btn--tiktok:hover .jdh_quick__ic    { background: #121212; color: #fff; }
.jdh_quick__btn--weibo:hover .jdh_quick__ic     { background: #E6162D; color: #fff; }
.jdh_quick__btn--wechat:hover .jdh_quick__ic,
.jdh_quick__btn--wechat.is-on .jdh_quick__ic    { background: #07C160; color: #fff; }
.jdh_quick__btn--twitter:hover .jdh_quick__ic   { background: #121212; color: #fff; }
.jdh_quick__btn--youtube:hover .jdh_quick__ic   { background: #FF0000; color: #fff; }
.jdh_quick__btn--line:hover .jdh_quick__ic      { background: #06C755; color: #fff; }
.jdh_quick__btn--ameblo:hover .jdh_quick__ic    { background: #2D8C3C; color: #fff; }   /* 2026-09-16 일본어 Ameblo(아메바 그린) */
.jdh_quick__btn[data-qr].is-on { background: #F7F5EF; }

/* ── 연락처 QR 모달 (WhatsApp · WeChat 공용) ─────────────────────────
   ⚠ 전화 카드(.jdh_quick__call)처럼 퀵메뉴 옆에 붙이지 않는다 — QR 이 커서 좁은 화면에서 넘친다. */
.jdh_qr {
	position: fixed;
	inset: 0;
	z-index: 1200;          /* 퀵메뉴(.jdh_quick z-index 900)·하단 예약바보다 위 */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.jdh_qr[hidden] { display: none; }
.jdh_qr__dim {
	position: absolute;
	inset: 0;
	background: rgba(16,22,18,.62);
}
.jdh_qr__card {
	position: relative;
	width: 100%;
	max-width: 360px;
	padding: 46px 22px 26px;   /* 위 여백은 카드 위로 걸치는 아바타 자리 */
	background: #2BB741;
	border-radius: 18px;
	box-shadow: 0 26px 60px -20px rgba(12,16,12,.6);
	text-align: center;
	animation: jdhQrIn .26s ease both;
}
/* 카드 바탕은 그 채널의 브랜드 초록 — 기본값은 WhatsApp, WeChat 만 갈아 끼운다 */
.jdh_qr__card--wechat { background: #07C160; }
@keyframes jdhQrIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .jdh_qr__card { animation: none; } }

.jdh_qr__close {
	position: absolute;
	top: 14px; right: 14px;
	display: flex; align-items: center; justify-content: center;
	width: 30px; height: 30px;
	padding: 0;
	background: none; border: 0; cursor: pointer;
	color: #fff;
	opacity: .92;
}
.jdh_qr__close:hover { opacity: 1; }
.jdh_qr__close svg { width: 19px; height: 19px; }

/* 아바타 — 흰 시트 위로 반쯤 걸친다(WhatsApp 연락처 화면과 같은 구성) */
.jdh_qr__avatar {
	position: absolute;
	top: 18px; left: 50%;
	transform: translateX(-50%);
	display: flex; align-items: center; justify-content: center;
	width: 66px; height: 66px;
	border-radius: 50%;
	background: #F2DFC4;
	color: #6B5B45;
	z-index: 1;
}
.jdh_qr__avatar svg { width: 34px; height: 34px; }

.jdh_qr__sheet {
	position: relative;
	padding: 40px 22px 24px;   /* 위 여백 = 아바타가 겹치는 만큼 */
	background: #fff;
	border-radius: 12px;
}
.jdh_qr__name {
	display: block;
	font-size: 19px; font-weight: 700; letter-spacing: -0.3px; line-height: 1.3;
	color: #16191A;
}
.jdh_qr__sub {
	display: block;
	margin-top: 4px;
	font-size: 13.5px; color: #7D8480;
}
.jdh_qr__img {
	display: block;
	width: 100%;
	max-width: 250px;
	margin: 18px auto 0;
	aspect-ratio: 1 / 1;       /* 파일이 정사각이 아니어도 칸이 흔들리지 않게 */
	object-fit: contain;
}
/* QR 폴백 — 이미지가 뜨면 감춰 둔다(onerror 가 카드에 is-noqr 를 달면 서로 바뀐다) */
.jdh_qr__none {
	display: none;
	margin: 22px 0 6px;
	font-size: 13.5px; line-height: 1.55; color: #7D8480;
}
.jdh_qr__card.is-noqr .jdh_qr__img { display: none; }
.jdh_qr__card.is-noqr .jdh_qr__none { display: block; }
.jdh_qr__card.is-noqr .jdh_qr__hint { display: none; }

.jdh_qr__hint {
	margin: 18px 4px 0;
	font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.94);
}
.jdh_qr__link {
	display: inline-block;
	margin-top: 16px;
	padding: 11px 22px;
	background: #fff;
	border-radius: 999px;
	font-size: 14px; font-weight: 700; color: #1B7F35;
	text-decoration: none;
}
.jdh_qr__link[hidden] { display: none; }
.jdh_qr__link:hover { background: #F2F7F3; }

/* 모달이 열린 동안 뒤 페이지가 밀리지 않게 */
body.jdh-qr-lock { overflow: hidden; }

@media all and (max-width: 768px) {
	.jdh_qr__card { max-width: 320px; padding: 42px 16px 22px; }
	.jdh_qr__sheet { padding: 36px 16px 20px; }
	.jdh_qr__name { font-size: 17px; }
	.jdh_qr__img { max-width: 216px; }
	.jdh_qr__hint { font-size: 13px; }
}