/* ===================================================================
   케토톱 마이크로사이트 — GNB + 섹션 스캐폴드
   GNB 토큰은 피그마 node 2386:403 실측값 기준
   =================================================================== */

:root {
	--gnb-bg: #042d86;
	--gnb-text: #5f8ae8;
	--gnb-text-active: #ffffff;
	--header-h-pc: 74px;
	--header-h-mo: 79px;
	--content-max: 1920px;
}

* { box-sizing: border-box; }

/* 각주번호(sup) 전역 기본 크기 — 브라우저 기본(약 0.83em)보다 한 단계 작게 통일.
   섹션별로 sup 크기를 별도 지정한 곳(story-tech-card-eyebrow/title, detail-info-title)은
   이후 규칙에서 각자 자기 컨텍스트에 맞는 크기로 재정의한다. */
sup {
	font-size: 0.6em;
}

/* 모바일 전용 강제 개행 — PC/모바일 공용 마크업(.detail-info-warn/.detail-info-3 등
   긴 문장)에서 Figma 모바일 원본과 동일한 줄바꿈을 재현하되 PC는 그대로 자동
   줄바꿈에 맡기기 위한 토글. 기본은 숨김, 767.98px 이하에서만 개행으로 노출. */
.br-mo {
	display: none;
}

/* "2022-45호."처럼 하이픈을 포함한 구간이 강제 개행(.br-mo) 지점보다 먼저
   그 하이픈에서 줄바꿈되는 문제 방지용 — word-break:keep-all은 CJK 텍스트
   단어 단위만 제어할 뿐 라틴 하이픈(유니코드 line-breaking 규칙상 항상
   break 기회)에는 영향이 없어 별도로 필요하다. PC에서도 이 구간이 한 줄에
   붙어 있는 게 자연스러우므로 미디어쿼리 없이 전역 적용. */
.nowrap-mo {
	white-space: nowrap;
}

/* 광고심의필 각주 베이스 — 섹션별 -noti 클래스(.section1-noti, .finder-noti 등)가
   font-size/기타 속성을 오버라이드한다. 반드시 그 규칙들보다 파일 앞쪽에 있어야
   한다 — 동일 특이성(단일 클래스)인 두 규칙이 충돌하면 CSS는 나중에 선언된 쪽을
   적용하므로, 이 규칙이 뒤에 있으면 섹션별 오버라이드가 전부 무효화된다(실제로
   .section1-noti/.finder-noti가 이 규칙보다 앞에 있어 font-size clamp가 씹히던
   버그가 있었음 — 2026-08-31 발견 및 수정). */
.noti {
	font-size: 11.5px;
	color: #999;
	text-align: right;
	margin-top: 16px;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
	letter-spacing: -0.4px;
	word-break: keep-all;
	overflow-x: hidden;
	color: #171c61;
}

.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ── 폰트 (Pretendard, 자체 호스팅) ── */
@font-face {
	font-family: 'Pretendard';
	font-weight: 400;
	font-display: swap;
	src: local('Pretendard Regular'),
	     url('../fonts/Pretendard/Pretendard-Regular.woff2') format('woff2'),
	     url('../fonts/Pretendard/Pretendard-Regular.woff') format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 500;
	font-display: swap;
	src: local('Pretendard Medium'),
	     url('../fonts/Pretendard/Pretendard-Medium.woff2') format('woff2'),
	     url('../fonts/Pretendard/Pretendard-Medium.woff') format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 600;
	font-display: swap;
	src: local('Pretendard SemiBold'),
	     url('../fonts/Pretendard/Pretendard-SemiBold.woff2') format('woff2'),
	     url('../fonts/Pretendard/Pretendard-SemiBold.woff') format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 700;
	font-display: swap;
	src: local('Pretendard Bold'),
	     url('../fonts/Pretendard/Pretendard-Bold.woff2') format('woff2'),
	     url('../fonts/Pretendard/Pretendard-Bold.woff') format('woff');
}

/* ===================================================================
   GNB
   =================================================================== */

.site-header {
	position: fixed;
	top: 0; left: 0;
	width: 100%;
	height: var(--header-h-pc);
	background-color: var(--gnb-bg);
	z-index: 100;
}

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

.site-header .logo {
	display: block;
	flex-shrink: 0;
	width: 80px;
	height: 30px;
	background-image: url('../images/logo.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* 로고를 제외한 나머지 폭 전체를 차지한 뒤, 그 안에서 메뉴를 중앙정렬
   (피그마: 로고 옆 Frame이 flex-1로 남은 폭을 채우고 justify-center) */
.gnb {
	display: flex;
	flex: 1 1 auto;
	justify-content: center;
	min-width: 0;
}

.gnb ul {
	display: flex;
	align-items: center;
	gap: 56px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gnb .nav-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px 0;
	font-family: 'Pretendard', sans-serif;
	font-weight: 500;
	font-size: 18px;
	line-height: 1.2;
	letter-spacing: -0.18px;
	color: var(--gnb-text);
	text-decoration: none;
	white-space: nowrap;
	transition: color .15s ease;
}

.gnb .nav-link:hover,
.gnb .nav-link:focus {
	color: var(--gnb-text-active);
}

.gnb .nav-link.is-active {
	color: var(--gnb-text-active);
}

/* 햄버거 버튼 — PC에서는 숨김 */
.btn-hamburger {
	display: none;
	width: 32px;
	height: 32px;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
}
.btn-hamburger .icon-hamburger {
	position: relative;
	display: block;
	width: 22px;
	height: 16px;
	margin: 0 auto;
}
.btn-hamburger .icon-hamburger i {
	position: absolute;
	left: 0; right: 0;
	height: 2px;
	background: #ffffff;
	transition: transform .2s ease, opacity .2s ease;
}
.btn-hamburger .icon-hamburger i:nth-child(1) { top: 0; }
.btn-hamburger .icon-hamburger i:nth-child(2) { top: 7px; }
.btn-hamburger .icon-hamburger i:nth-child(3) { top: 14px; }
.btn-hamburger[aria-expanded="true"] .icon-hamburger i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.btn-hamburger[aria-expanded="true"] .icon-hamburger i:nth-child(2) { opacity: 0; }
.btn-hamburger[aria-expanded="true"] .icon-hamburger i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 모바일 드로어 (기본 숨김) */
.gnb-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(4, 45, 134, 0.4);
	z-index: 98;
}
.gnb-overlay.is-open { display: block; }

.gnb-drawer {
	display: none;
	position: fixed;
	top: var(--header-h-mo);
	left: 0; right: 0;
	background: var(--gnb-bg);
	padding: 8px 0;
	box-shadow: 0 4px 12px rgba(0,0,0,.2);
	z-index: 99;
}
.gnb-drawer.is-open { display: block; }
.gnb-drawer ul { margin: 0; padding: 0; list-style: none; }
.gnb-drawer .nav-link {
	display: block;
	padding: 14px 24px;
	font-size: 16px;
	font-weight: 500;
	color: var(--gnb-text);
	text-decoration: none;
}
.gnb-drawer .nav-link.is-active,
.gnb-drawer .nav-link:hover {
	color: var(--gnb-text-active);
}

/* ===================================================================
   레이아웃 / 섹션 스캐폴드
   =================================================================== */

main {
	padding-top: var(--header-h-pc);
}

.page-section {
	scroll-margin-top: var(--header-h-pc);
}

/* ===================================================================
   Section 1 — 나에게 맞는 케토톱 (피그마 node 161:72, PC 1920x930)
   bg.png(순수 배경, 3840x1860 = 1920x930의 2x)는 화면 폭 전체로 풀블리드.
   타이틀/제품/아이콘/각주는 좌표를 1920x930 캔버스 기준 %로 환산해
   .section1-stage(1920 캡, 중앙정렬) 위에 개별 레이어로 배치.
   폰트/보더radius 등 px 수치는 vw 기반 clamp()로 스테이지 크기에 비례.
   TODO: 모바일 레이아웃(Frame 10/11, 430px 폭)은 별도 작업으로 분리.
   ================================================================= */

.section1 {
	position: relative;
	background: #ffffff;
}

/* .section1-stage: 배경 + 전경(제품/타이틀/각주 등)을 1920:930 비율 하나로 묶어
   화면 폭 전체(max-width 없음)에 맞춰 함께 확대/축소한다. 배경의 사각 장식이 제품
   이미지와 항상 정확히 겹치도록 모든 좌표가 %(스테이지 기준) — 그래서 배경/전경을
   분리해 배경만 풀블리드하는 방식은 스케일 기준이 어긋나 쓰지 않는다.
   container-type: inline-size로 이 요소를 컨테이너 쿼리 컨테이너로 선언 — 텍스트
   font-size 등을 vw 대신 cqw(컨테이너 폭 기준)로 주면 스크롤바 유무와 무관하게
   %좌표와 정확히 같은 기준으로 스케일된다(vw는 스크롤바 폭을 포함해 미세하게 다른
   기준이 됨). aspect-ratio는 size containment가 아닌 inline-size containment라
   충돌하지 않고, layout containment로 만들어지는 containing block도 이미
   position:relative라 동작 변화가 없다. */
.section1-inner {
	position: relative;
	width: 100%;
}

.section1-stage {
	position: relative;
	width: 100%;
	aspect-ratio: 1920 / 930;
	overflow: hidden;
	container-type: inline-size;
}

.section1-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.section1-stage > img,
.section1-stage > div {
	position: absolute;
}

.section1-product {
	left: 59.4792%;
	top: 25.1613%;
	width: 21.9271%;
	height: 62.6882%;
	border-radius: clamp(2px, 0.26vw, 5px);
	border-radius: clamp(2px, 0.26cqw, 9999px);
	overflow: hidden;
}
.section1-product img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.section1-title {
	left: 18.5938%;
	top: 35.2688%;
	width: 37.9688%;
	height: 17.5269%;
}
.section1-title img:first-child {
	position: absolute;
	left: 0;
	top: 0;
	width: 71.875%;   /* 524/729 */
	height: 89.5706%; /* 146/163 */
}
.section1-cool-badge {
	position: absolute;
	left: 73.9370%;   /* (896-357)/729 */
	top: 0;
	width: 26.0631%;  /* 190/729 */
	height: 100%;
}

.section1-copy {
	left: 18.9583%;
	top: 12.3656%;
	width: 45%;
}

.section1-eyebrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: clamp(40px, 8.4946vw, 79px);
	height: clamp(40px, 4.1146cqw, 9999px);
	padding: 0 clamp(14px, 2.5vw, 32px);
	padding: 0 clamp(14px, 1.6667cqw, 9999px);
	margin: 0;
	background-color: #0d7c2e;
	border-radius: clamp(14px, 2.94vw, 28.214px);
	border-radius: clamp(14px, 1.4695cqw, 9999px);
}
.section1-eyebrow span {
	font-family: 'Paperlogy', 'Pretendard', sans-serif;
	font-weight: 600;
	font-size: clamp(18px, 2.141vw, 41.107px);
	font-size: clamp(18px, 2.141cqw, 9999px);
	letter-spacing: -0.03em;
	color: #ffffff;
	white-space: nowrap;
}

.section1-headline {
	margin: clamp(8px, 1.5vw, 16px) 0 0;
	margin: clamp(8px, 0.8333cqw, 9999px) 0 0;
	font-family: 'Paperlogy', 'Pretendard', sans-serif;
	font-weight: 700;
	font-size: clamp(33px, 4.2285vw, 81.188px);
	font-size: clamp(33px, 4.2285cqw, 9999px);
	letter-spacing: 0.03em;
	color: #1fae00;
	white-space: nowrap;
	line-height: 1.1;
}

.section1-decor {
	left: 75.4167%;
	top: 17.2043%;
	width: 10.2083%;
	height: 21.1828%;
}

.section1-icon {
	left: 18.5938%;
	top: 56.6667%;
	width: 25.1563%;
	height: 23.0308%;
}

/* 광고심의필 각주 — 배경 위에 바로 얹힌 텍스트, 별도 박스/바 없음 */
.section1-noti {
	position: absolute;
	right: 2.3958%;
	top: 91.0753%;
	left: auto;
	text-align: right;
	font-size: clamp(10px, 0.78125vw, 15px);
	font-size: clamp(10px, 0.78125cqw, 9999px);
	color: #474747;
	line-height: 1.5;
	margin: 0;
	max-width: 40%;
}

/* PC/모바일 히어로 전환 — 기본은 PC 표시, 모바일 전용은 숨김 */
.section1-inner-mo { display: none; }

@media (max-width: 767.98px) {
	.section1-inner-pc { display: none; }
	.section1-inner-mo { display: block; }
}

/* ===================================================================
   모바일 히어로 — 피그마 Frame 11(430x810, node 403:74) 기준.
   ⚠️ Frame 10(161:232)은 930px 높이였지만 Frame 11은 810px로 다르다 —
   두 프레임을 혼동해 930 기준으로 좌표를 잡았다가(2026-08-31) 배경
   이미지의 실제 높이(430x810)와 어긋나 사각 네온 프레임 등 배경 자체의
   효과가 위치를 벗어나 안 보이는 문제가 있었다. 반드시 810 기준으로
   계산할 것. PC와 동일한 패턴: .section1-stage-mo를 430:810 비율
   컨테이너로 두고 그 안의 모든 요소를 %(스테이지 기준) 절대좌표로
   배치, 텍스트는 cqw로 스케일해 이미지와 같은 기준을 공유(vw 폴백 병기). */
.section1-stage-mo {
	position: relative;
	width: 100%;
	aspect-ratio: 430 / 810;
	overflow: hidden;
	container-type: inline-size;
}

.section1-mo-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.section1-stage-mo > p,
.section1-stage-mo > img,
.section1-stage-mo > div {
	position: absolute;
}

.section1-mo-eyebrow {
	left: 19.3023%;
	top: 6.4198%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 61.6279%;
	height: 5.1852%;
	margin: 0;
	background-color: #0d7c2e;
	border-radius: 999px;
	white-space: nowrap;
}
.section1-mo-eyebrow span {
	font-family: 'Paperlogy', 'Pretendard', sans-serif;
	font-weight: 600;
	font-size: clamp(14px, 5.084vw, 9999px);
	font-size: clamp(14px, 5.084cqw, 9999px);
	letter-spacing: -0.03em;
	color: #ffffff;
	white-space: nowrap;
}

.section1-mo-headline {
	left: 10%;
	top: 13.3601%;
	margin: 0;
	font-family: 'Paperlogy', 'Pretendard', sans-serif;
	font-weight: 700;
	font-size: clamp(24px, 9.2035vw, 9999px);
	font-size: clamp(24px, 9.2035cqw, 9999px);
	letter-spacing: 0.03em;
	color: #1fae00;
	white-space: nowrap;
	line-height: 1.1;
}

.section1-mo-title {
	left: 9.7903%;
	top: 20.1999%;
	width: 83.9306%;
	height: 9.9624%;
}
.section1-mo-title img:first-child {
	position: absolute;
	left: 0;
	top: 0;
	width: 71.875%;
	height: 89.5706%;
}
.section1-mo-cool-badge {
	position: absolute;
	left: 73.9370%;
	top: 0;
	width: 26.0631%;
	height: 100%;
}

.section1-mo-people {
	left: 13.2558%;
	top: 33.3333%;
	width: 78.1395%;
	height: 18.3951%;
}

.section1-mo-product {
	left: 20.4651%;
	top: 50.2469%;
	width: 60%;
	height: 44.0741%;
	border-radius: clamp(1px, 0.35cqw, 9999px);
	overflow: hidden;
}
.section1-mo-product img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.section1-mo-decor {
	left: 63.4884%;
	top: 43.8272%;
	width: 30.2326%;
	height: 16.1728%;
}

.section1-mo-noti {
	right: 1.8605%;
	top: 95.1852%; /* 배경 이미지 하단 회색 바(94.5%부터 시작) 안쪽 */
	left: auto;
	text-align: right;
	font-size: clamp(8px, 2.093vw, 9999px);
	font-size: clamp(8px, 2.093cqw, 9999px);
	color: #474747;
	line-height: 1.4;
	margin: 0;
	max-width: 76.2791%;
}

/* ===================================================================
   "지금 나에게 맞는 케토톱은?" 제품 파인더 (피그마 node 2386:393)
   히어로와 달리 풀블리드 사진 배경이 없는 일반 콘텐츠 섹션이라
   max-width 중앙정렬 컨테이너만으로 1920px~대형 모니터까지 자연 대응된다
   (여백은 흰 배경으로 남고 콘텐츠 폭 자체는 1200px로 고정 — 원본 디자인 그대로).
   ================================================================= */

@font-face {
	font-family: 'Paperlogy';
	font-weight: 700;
	font-display: swap;
	src: local('Paperlogy Bold'),
	     url('../fonts/Paperlogy/Paperlogy-7Bold.woff2') format('woff2');
}

@font-face {
	font-family: 'Paperlogy';
	font-weight: 600;
	font-display: swap;
	src: local('Paperlogy SemiBold'),
	     url('../fonts/Paperlogy/Paperlogy-6SemiBold.woff2') format('woff2');
}

.finder {
	scroll-margin-top: var(--header-h-pc);
	background: #ffffff;
	padding: 80px 24px;
}

.finder-inner {
	max-width: 1200px;
	margin: 0 auto;
}

.finder-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-bottom: clamp(32px, 4.5vw, 48px);
	text-align: center;
}

.finder-title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	margin: 0;
	font-family: 'Paperlogy', 'Pretendard', sans-serif;
	font-weight: 700;
	font-size: clamp(28px, 2.865vw, 55px);
	letter-spacing: -0.55px;
	line-height: 1.2;
	color: #111111;
}

.finder-arrow {
	width: clamp(48px, 4.635vw, 89px);
	height: auto;
	flex-shrink: 0;
}

.finder-sub {
	margin: 0;
	font-family: 'Pretendard', sans-serif;
	font-weight: 600;
	font-size: clamp(15px, 1.0417vw, 20px);
	letter-spacing: -0.2px;
	line-height: 1.6;
	color: #333333;
}

.finder-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px 24px;
}

.finder-card {
	position: relative;
	display: flex;
	align-items: stretch;
	gap: 12px;
	min-height: 250px;
	text-decoration: none;
	color: inherit;
}

.finder-tag {
	flex-shrink: 0;
	width: 55px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: var(--card-accent);
	color: #ffffff;
	font-family: 'Pretendard', sans-serif;
	font-weight: 600;
	font-size: 18px;
	letter-spacing: -0.18px;
	line-height: 1.3;
}

.finder-body {
	position: relative;
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	min-width: 0;
	padding: 12px 24px;
	padding-right: 192px; /* 우측 패키지 이미지 영역만큼 여백 확보 */
	border-radius: 12px;
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	overflow: hidden;
}

.finder-name {
	font-family: 'Pretendard', sans-serif;
	font-weight: 700;
	font-size: clamp(22px, 1.667vw, 32px);
	letter-spacing: -0.32px;
	color: var(--card-accent);
}

.finder-desc {
	font-family: 'Pretendard', sans-serif;
	font-weight: 500;
	font-size: clamp(14px, 0.9375vw, 18px);
	letter-spacing: -0.4px;
	line-height: 1.8;
	color: #333333;
}

.finder-pkg-single {
	position: absolute;
	right: -1px;
	top: -1px;
	width: 192px;
	height: 250px;
	pointer-events: none;
	overflow: hidden;
}
.finder-pkg-single img {
	position: absolute;
	pointer-events: none;
	width: 130px;
	height: 181.36px;
	left: 31px;
	top: 34.32px;
}
.finder-card[data-detail-tab="original"] .finder-pkg-single img {
	width: 129px;
	height: 180px;
	left: 31.5px;
	top: 35px;
}

.finder-pkg-dual {
	position: absolute;
	right: -1px;
	top: -1px;
	width: 192px;
	height: 250px;
	pointer-events: none;
}
.finder-pkg-dual img {
	position: absolute;
	object-fit: contain;
}
.finder-pkg-dual img:nth-child(1) {
	left: 24.75px;
	top: 35px;
	width: 90px;
	height: auto;
}
.finder-pkg-dual img:nth-child(2) {
	left: 78.43px;
	top: 78.82px;
	width: 88.816px;
	height: auto;
}

.finder-noti {
	margin-top: 24px;
	text-align: right;
	font-family: 'Pretendard', sans-serif;
	font-weight: 400;
	font-size: 13px;
	letter-spacing: -0.13px;
	line-height: 1.5;
	color: #999999;
}

@media (max-width: 991.98px) {
	.finder-grid {
		grid-template-columns: 1fr;
	}
}

/* 모바일 — 피그마 node 2388:9002(@내게맞는케토톱, 375px 프레임) 기준.
   PC와 동일한 가로 배치(왼쪽 색상 탭 + 오른쪽 카드, 카드 우측 상단에 작은
   패키지 이미지)를 유지하되 치수만 모바일 값으로 축소한다 — 태그를 세로
   스택으로 바꾸거나 이미지를 하단으로 내리는 예전 임시 대응은 실제 디자인과
   달라 폐기. */
@media (max-width: 767.98px) {
	.finder {
		padding: 48px 20px;
	}
	.finder-title {
		font-size: 26px;
		gap: 4px;
	}
	.finder-arrow {
		width: 42px;
	}
	.finder-sub {
		font-size: 16px;
	}
	.finder-grid {
		gap: 16px;
	}
	.finder-card {
		gap: 8px;
		min-height: 130px;
	}
	.finder-tag {
		width: 27px;
		border-radius: 6px;
		font-size: 13px;
	}
	.finder-body {
		padding: 12px;
		padding-right: 100px; /* 우측 패키지 이미지 영역(100px)만큼 여백 */
		border-radius: 12px;
		gap: 6px;
	}
	.finder-name {
		font-size: 18px;
	}
	.finder-desc {
		font-size: 13px;
		letter-spacing: -0.65px;
		line-height: 1.8;
	}
	.finder-pkg-single,
	.finder-pkg-dual {
		width: 100px;
		height: 130px;
	}
	.finder-pkg-single img {
		width: 74px;
		height: 104px;
		left: 13px;
		top: 13px;
	}
	.finder-card[data-detail-tab="original"] .finder-pkg-single img {
		width: 74px;
		height: 104px;
		left: 13px;
		top: 13px;
	}
	.finder-pkg-dual img:nth-child(1) {
		left: 8.5px;
		top: 13px;
		width: 53px;
	}
	.finder-pkg-dual img:nth-child(2) {
		left: 39.5px;
		top: 38px;
		width: 52px;
	}
	.finder-noti {
		font-size: 11px;
		letter-spacing: -0.11px;
		margin-top: 20px;
	}
}

.stub-note {
	font-size: 14px;
	color: #888;
	margin: 0;
}

/* ===================================================================
   약국찾기 (피그마 node 2386:451) — /pharmacy/getPharmacyList DB 연동
   ================================================================= */

.pharmacy {
	background: #ffffff;
	padding: 80px 24px;
}

.pharmacy-inner {
	max-width: 1200px;
	margin: 0 auto;
}

.pharmacy-head {
	text-align: center;
	margin-bottom: clamp(32px, 4.5vw, 48px);
}

.pharmacy-title {
	margin: 0;
	font-family: 'Paperlogy', 'Pretendard', sans-serif;
	font-weight: 400;
	font-size: clamp(26px, 2.865vw, 55px);
	letter-spacing: -0.55px;
	line-height: 1.2;
	color: #111111;
}

.pharmacy-title-strong {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	font-weight: 800;
}

.pharmacy-arrow {
	width: clamp(48px, 4.635vw, 89px);
	height: auto;
	flex-shrink: 0;
}

.pharmacy-search {
	display: flex;
	align-items: flex-end;
	gap: 12px;
	background: #f9f9f9;
	border-radius: 12px;
	padding: 12px 24px;
	flex-wrap: wrap;
}

.pharmacy-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pharmacy-field label {
	font-family: 'Pretendard', sans-serif;
	font-weight: 500;
	font-size: 15px;
	letter-spacing: -0.18px;
	color: #111111;
}

.pharmacy-field-product {
	width: 240px;
}

.pharmacy-field-region {
	width: 200px;
}

.pharmacy-field-keyword {
	flex: 1 1 0;
	min-width: 200px;
}

.pharmacy-field select,
.pharmacy-input-wrap {
	background: #ffffff;
	border: 1px solid #e5e8eb;
	border-radius: 12px;
	padding: 14px 16px;
}

.pharmacy-field select {
	width: 100%;
	height: 56px;
	font-family: 'Pretendard', sans-serif;
	font-weight: 500;
	font-size: 17px;
	color: #333333;
	appearance: none;
	background-image: url('../images/section2/dropdown-arrow.svg');
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 16px;
	cursor: pointer;
}

.pharmacy-input-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 56px;
	padding-top: 0;
	padding-bottom: 0;
}

.pharmacy-input-wrap input {
	flex: 1 1 0;
	min-width: 0;
	border: 0;
	outline: none;
	font-family: 'Pretendard', sans-serif;
	font-weight: 500;
	font-size: 17px;
	color: #333333;
}
.pharmacy-input-wrap input::placeholder {
	color: #999999;
}

.pharmacy-btn {
	flex-shrink: 0;
	height: 56px;
	padding: 0 28px;
	border: 0;
	border-radius: 12px;
	background: linear-gradient(128.66deg, #00a143 0%, #48b3e7 100%);
	color: #ffffff;
	font-family: 'Pretendard', sans-serif;
	font-weight: 500;
	font-size: 18px;
	letter-spacing: -0.2px;
	cursor: pointer;
	transition: opacity 0.15s ease;
}
.pharmacy-btn:hover { opacity: 0.9; }

.pharmacy-result {
	margin-top: 24px;
}

.pharmacy-result-count {
	margin: 0 0 16px;
	font-family: 'Pretendard', sans-serif;
	font-size: 16px;
	color: #999999;
}
.pharmacy-result-count strong {
	font-weight: 600;
	color: #222222;
}

.pharmacy-table-wrap {
	overflow-x: auto;
}

.pharmacy-table {
	width: 100%;
	min-width: 720px;
	border-collapse: collapse;
	font-family: 'Pretendard', sans-serif;
	font-size: 15px;
}

.pharmacy-table thead th {
	background: #f9f9f9;
	color: #111111;
	font-weight: 500;
	text-align: center;
	padding: 18px 16px;
	white-space: nowrap;
}

.pharmacy-table tbody td {
	padding: 14px 16px;
	border-bottom: 1px solid #eeeeee;
	vertical-align: top;
}

.pharmacy-table .pharmacy-name {
	font-weight: 600;
	white-space: nowrap;
}

.pharmacy-table .pharmacy-address a {
	color: #333333;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.pharmacy-table .pharmacy-phone {
	color: #333333;
	text-decoration: none;
}

.pharmacy-table .pharmacy-product {
	color: #333333;
	line-height: 1.5;
}

.pharmacy-table .pharmacy-empty {
	text-align: center;
	padding: 48px 16px;
	color: #999999;
}

.pharmacy-paging {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin-top: 24px;
}

.pharmacy-paging button {
	min-width: 36px;
	height: 36px;
	padding: 0 8px;
	border: 1px solid #e5e8eb;
	border-radius: 8px;
	background: #ffffff;
	color: #333333;
	font-family: 'Pretendard', sans-serif;
	font-size: 14px;
	cursor: pointer;
}
.pharmacy-paging button.is-active {
	background: #042d86;
	border-color: #042d86;
	color: #ffffff;
}
.pharmacy-paging button[disabled] {
	opacity: 0.4;
	cursor: not-allowed;
}

/* 모바일 — 피그마 node 2388:5695(@약국찾기, 375px 프레임) 기준.
   검색 폼은 PC와 마찬가지로 가로 한 줄(시/도 드롭다운 + 지역명 입력 + 검색
   버튼)을 유지하되 치수만 축소한다 — 세로 스택으로 쌓던 예전 임시 대응은
   실제 디자인과 달라 폐기. */
@media (max-width: 767.98px) {
	.pharmacy {
		padding: 48px 20px;
	}
	.pharmacy-title {
		font-size: 26px;
	}
	.pharmacy-title-strong {
		font-weight: 800;
	}
	.pharmacy-arrow {
		width: 42px;
	}
	.pharmacy-search {
		gap: 10px;
		padding: 12px;
	}
	.pharmacy-field {
		gap: 8px;
	}
	.pharmacy-field label {
		font-size: 14px;
	}
	.pharmacy-field-product {
		flex: 1 1 100%;
		width: auto;
	}
	.pharmacy-field-region {
		width: 80px;
	}
	.pharmacy-field-keyword {
		min-width: 0;
	}
	.pharmacy-field select,
	.pharmacy-input-wrap {
		height: 48px;
		padding: 0 12px;
		border-radius: 12px;
	}
	.pharmacy-field select {
		font-size: 16px;
		background-position: right 12px center;
	}
	.pharmacy-input-wrap input {
		font-size: 16px;
	}
	.pharmacy-btn {
		width: 52px;
		height: 48px;
		padding: 0;
		font-size: 16px;
	}

	.pharmacy-result-count {
		font-size: 14px;
	}
	/* Figma 모바일 원본(node 2388:5695)은 약국명/주소/연락처/판매제품 4컬럼을
	   335px 폭에 균등분배(75.75px씩)한다 — PC용 min-width(720px)가 그대로면
	   화면보다 넓어져 가로 스크롤이 생기므로, 모바일에서는 min-width를 없애고
	   table-layout:fixed로 4컬럼을 뷰포트 폭 안에서 분배한다. Figma는 정확히
	   균등(25%×4)이지만, 실측 결과 연락처(짧은 숫자)에 25%는 과하고 주소(가장
	   긴 텍스트)에는 부족해 실사용성 기준으로 22/33/20/25%로 재조정했다 —
	   실제 다건 판매제품(줄바꿈 최대 5줄) 데이터로 가로 스크롤 없이 정상
	   렌더링됨을 확인(2026-09-02). */
	.pharmacy-table {
		min-width: 0;
		table-layout: fixed;
	}
	.pharmacy-table thead th:nth-child(1),
	.pharmacy-table tbody td:nth-child(1) { width: 22%; }
	.pharmacy-table thead th:nth-child(2),
	.pharmacy-table tbody td:nth-child(2) { width: 33%; }
	.pharmacy-table thead th:nth-child(3),
	.pharmacy-table tbody td:nth-child(3) { width: 20%; }
	.pharmacy-table thead th:nth-child(4),
	.pharmacy-table tbody td:nth-child(4) { width: 25%; }
	.pharmacy-table thead th {
		height: 50px;
		padding: 0 4px;
		font-size: 12px;
	}
	.pharmacy-table tbody td {
		padding: 8px 4px;
		font-size: 11px;
		word-break: break-all;
		white-space: normal;
	}
	.pharmacy-table .pharmacy-name,
	.pharmacy-table .pharmacy-empty {
		white-space: normal;
	}
}

/* 제품정보 상세보기 버튼 */
.btn-product-detail {
	margin-top: 24px;
	padding: 14px 32px;
	font-family: 'Pretendard', sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: #ffffff;
	background-color: var(--gnb-bg);
	border: 0;
	border-radius: 4px;
	cursor: pointer;
	transition: opacity .15s ease;
}
.btn-product-detail:hover { opacity: .85; }

/* ===================================================================
   식약처 제품정보 iframe 섹션
   =================================================================== */

.iframe-section {
	position: fixed;
	top: var(--header-h-pc);
	left: 0; right: 0; bottom: 0;
	z-index: 50;
	background: #fff;
	display: flex;
	flex-direction: column;
}
.iframe-section[hidden] { display: none; }

.iframe-toolbar {
	flex-shrink: 0;
	padding: 10px 20px;
	background: #f2f4fa;
	border-bottom: 1px solid #dde1ee;
}

.btn-back {
	padding: 8px 16px;
	font-family: 'Pretendard', sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: var(--gnb-bg);
	background: #fff;
	border: 1px solid var(--gnb-bg);
	border-radius: 4px;
	cursor: pointer;
}
.btn-back:hover { background: var(--gnb-bg); color: #fff; }

/* iframe만 감싸는 위치 기준 컨테이너 — 로딩 오버레이가 툴바(돌아가기 버튼)는 가리지
   않고 iframe 영역만 정확히 덮도록 분리 */
.iframe-viewport {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
}

.ext-frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* 탭 전환 직후 새 URL 로딩이 끝나기 전까지 이전 페이지가 그대로 비쳐 보이는 것을
   막기 위한 오버레이 — iframe 영역 전체를 흰 화면 + 스피너로 덮는다. */
.iframe-loading {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	background: #ffffff;
}
.iframe-loading[hidden] { display: none; }
.iframe-loading p {
	margin: 0;
	font-family: 'Pretendard', sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: #666666;
}
.iframe-spinner {
	width: 36px;
	height: 36px;
	border: 4px solid #e5e5e5;
	border-top-color: var(--gnb-bg);
	border-radius: 50%;
	animation: iframe-spin 0.8s linear infinite;
}
@keyframes iframe-spin {
	to { transform: rotate(360deg); }
}

/* ===================================================================
   브랜드 스토리 (피그마 node 2386:490)
   히어로와 동일한 아키텍처: 배경(장식 벡터+제품컷)은 통짜 이미지로 풀블리드,
   타이틀/탭/영상카드/각주는 같은 1920:1006 스테이지 위에 % 좌표로 개별 배치해서
   화면 폭에 따라 배경과 함께 정확히 스케일된다(히어로에서 검증된 패턴 재사용).
   ================================================================= */

.story {
	position: relative;
	background: #ffffff;
}

/* PC/모바일 전환 — 기본은 PC 표시, 모바일 전용은 숨김(section1 히어로와 동일 패턴) */
.story-inner-mo { display: none; }

@media (max-width: 767.98px) {
	.story-inner-pc { display: none; }
	.story-inner-mo { display: block; }
}

.story-inner {
	position: relative;
	width: 100%;
}

.story-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.story-stage {
	position: relative;
	z-index: 1;
	width: 100%;
	aspect-ratio: 1920 / 1006;
	overflow: hidden;
}

.story-title {
	position: absolute;
	left: 17.5%;
	top: 18.888%;
	width: 62.5%;
	text-align: center;
}
.story-title-sub,
.story-title-strong {
	margin: 0;
	font-family: 'Paperlogy', 'Pretendard', sans-serif;
	font-size: clamp(22px, 2.865vw, 55px);
	letter-spacing: -0.55px;
	line-height: 1.2;
	color: #111111;
}
.story-title-sub { font-weight: 400; }
.story-title-strong { font-weight: 700; }

.story-tabs {
	position: absolute;
	left: 34.375%;
	top: 9.94%;
	width: 31.25%;
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 8px 4px;
	background: #e6f6ed;
	border-radius: 999px;
}
.story-tab {
	flex: 1 1 0;
	padding: 11px 4px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	font-family: 'Pretendard', sans-serif;
	font-weight: 600;
	font-size: clamp(13px, 0.9375vw, 18px);
	letter-spacing: -0.18px;
	color: #333333;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.story-tab.is-active {
	background: linear-gradient(100.48deg, #00a143 0%, #48b3e7 99.69%);
	color: #ffffff;
}

.story-panel {
	position: absolute;
	left: 24.74%;
	top: 35.39%;
	width: 50.52%;
	height: 54.27%;
}
/* "케토톱의 기술력" 패널은 4카드 2x2 그리드라 영상 패널보다 폭이 넓다(피그마 2386:2038 기준) */
.story-panel[data-panel="tech"] {
	left: 18.75%;
	top: 34.99%;
	width: 62.5%;
	height: 58.05%;
}

.story-video-card {
	position: relative;
	width: 100%;
	height: 100%;
	background: #111111;
	border-radius: 12px;
	overflow: hidden;
}

.story-video-thumb {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.story-video-card iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.story-play-btn {
	position: absolute;
	left: 50.05%;
	top: 50.09%;
	transform: translate(-50%, -50%);
	width: clamp(48px, 3.9vw, 75px);
	height: clamp(48px, 3.9vw, 75px);
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	z-index: 1;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	cursor: pointer;
	transition: transform 0.15s ease, background 0.15s ease;
}
.story-play-btn:hover {
	background: rgba(255, 255, 255, 0.25);
	transform: translate(-50%, -50%) scale(1.06);
}
.story-play-btn img {
	width: 42%;
	height: 42%;
}

.story-noti {
	position: absolute;
	left: 24.74%;
	top: 92.05%;
	margin: 0;
	font-family: 'Pretendard', sans-serif;
	font-size: clamp(10px, 0.78125vw, 15px);
	color: #474747;
}

/* ── 케토톱의 기술력 탭: 4카드 2x2 그리드(피그마 2386:2038) ──
   카드 588x280(스테이지 1920x1006 기준) 4개, 가로/세로 24px 간격.
   그리드 컨테이너 폭 1200px 기준 gap 24px=2%, 높이 584px 기준 gap 24px=4.11%
   → gap % 기준이 축과 컨테이너 크기에 따라 다르므로 row-gap/column-gap 분리 지정. */
.story-tech-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	row-gap: 4.11%;
	column-gap: 2%;
	width: 100%;
	height: 100%;
}

.story-tech-card {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	background: #ffffff;
	border: 1px solid #eaeaea;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	text-decoration: none;
}

.story-tech-card-body {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	box-sizing: border-box;
	padding: clamp(10px, 1.25vw, 24px);
	display: flex;
	flex-direction: column;
	gap: clamp(3px, 0.3125vw, 6px);
}
.story-tech-card-eyebrow,
.story-tech-card-title {
	margin: 0;
	font-family: 'Pretendard', sans-serif;
	line-height: 1.2;
	color: #111111;
}
.story-tech-card-eyebrow {
	font-weight: 500;
	font-size: clamp(11px, 0.9375vw, 18px);
	letter-spacing: -0.18px;
}
.story-tech-card-eyebrow .accent { color: #48b3e7; }
.story-tech-card-eyebrow sup {
	font-weight: 400;
	font-size: clamp(8px, 0.729vw, 14px);
}
.story-tech-card-title {
	font-weight: 700;
	font-size: clamp(18px, 1.667vw, 32px);
	letter-spacing: -0.32px;
}
.story-tech-card-title sup {
	font-weight: 400;
	font-size: clamp(8px, 0.729vw, 14px);
}

.story-tech-card-plus {
	position: absolute;
	right: clamp(10px, 0.99vw, 19px);
	top: 81.07%;
	width: clamp(20px, 1.667vw, 32px);
	height: clamp(20px, 1.667vw, 32px);
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid rgba(255, 255, 255, 0.2);
	border-radius: 999px;
	background: #e6f6ed;
}
.story-tech-card-plus img { width: 50%; height: 50%; }

/* 카드1: 처음 등장한 붙이는 관절염 치료제 */
.story-tech-card1-photo {
	position: absolute;
	left: 40.65%;
	top: 14.29%;
	width: 59.23%;
	height: 81.1%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.story-tech-card1-photo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transform: rotate(-6.15deg);
	filter: drop-shadow(0 4px 9px rgba(0, 0, 0, 0.25));
}

/* 카드2: 30년 넘게 함께한 판매 1위 파스 */
.story-tech-card2 {
	background-image: url('../images/section3-tech/dot.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
.story-tech-card2-photo {
	position: absolute;
	left: 55.61%;
	top: 12.14%;
	width: 33.84%;
	height: 98.93%;
}
.story-tech-card2-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	box-shadow: 0 4px 9px rgba(0, 0, 0, 0.25);
}
.story-tech-card2-badge {
	position: absolute;
	left: 47.45%;
	top: 56.07%;
	width: 16.33%;
	height: 34.29%;
}
.story-tech-card2-badge img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 4px 9px rgba(0, 0, 0, 0.25));
}

/* 카드3: 국내최대 생산력, 품질이 곧 신뢰(배경 사진 + 상단 화이트 그라데이션) */
.story-tech-card3-photo {
	position: absolute;
	left: -1.53%;
	top: -24.29%;
	width: 115.31%;
	height: 146.43%;
	object-fit: cover;
}
.story-tech-card3-scrim {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 51.79%;
	background: linear-gradient(167deg, #ffffff 9.65%, rgba(255, 255, 255, 0.874) 13.94%, rgba(255, 255, 255, 0) 65.11%);
}

/* 카드4: 사용자를 생각하는 케토톱, 멈추지 않고 캐냅니다(제품 4종 회전 클러스터)
   .story-tech-card4-item(바깥 정렬 컨테이너)는 회전 후 바운딩박스 크기 — 이건
   맞았다. img의 width/height %는 "이 컨테이너(=바운딩박스) 대비, 회전 전
   이미지가 차지해야 할 비율"이어야 하는데, 지금까지 두 차례(2026-09-02,
   2026-09-04) 잘못된 값이 들어가 있었다: 이번에 실제로 렌더링해 비교해보니
   PC에서 이미지가 원본 종횡비와 다르게 늘어나 찌그러져 보였다(2026-09-07,
   사용자 확인). 원인은 계산 자체 — "회전 전 이미지 크기"를 구할 때 컨테이너
   크기(bbox)로 나누는 분모를 잘못 잡은 것.
   ⚠️ 2026-09-07 f7bb261에서 모바일 값(2231행 부근)을 이 PC값으로 "맞바꿔"
   넣었으나 이는 잘못 — PC와 모바일은 카드 종횡비가 달라도 항목 컨테이너
   bbox 비율이 동일(1.305:1)하므로 img %는 PC=모바일로 동일해야 한다. 당시
   모바일에 넣었던 86.314%/100.008% 등은 찌그러짐을 유발해 즉시 되돌렸다.
   (모바일 Figma 원본 2388:7541로 재검산: 올바른 모바일 % = 아래 PC값과 동일.)
   정확한 계산법: 컨테이너의 회전 후 bbox(bw,bh)와 회전각(rot), 그리고
   이미지 원본 종횡비(ratio=w/h)를 알면 "bw=h·ratio·|cosθ|+h·|sinθ|,
   bh=h·ratio·|sinθ|+h·|cosθ|"를 h에 대해 풀 수 있다(정회전이든 역회전이든
   |cos|,|sin|만 쓰므로 부호 무관). 구한 실제 이미지 크기(w,h)를 다시
   컨테이너(bw,bh)로 나눈 %가 img에 줄 값이다. 이 방식으로 재계산한 값이
   실제 파일 원본 비율(item1/4: 1500x2086, item2: 2936x4096(구버전 기준,
   리사이즈 후에도 비율은 동일), item3: 1421x2151)로 되돌려도 정확히
   일치함을 검산했다. */
.story-tech-card4-item {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
}
.story-tech-card4-item1 { left: 44.4%; top: 65.06%; width: 29.82%; height: 47.96%; }
.story-tech-card4-item1 img { width: 67.245%; height: 122.105%; transform: rotate(-84.04deg); }
.story-tech-card4-item2 { left: 48.1%; top: 21.59%; width: 34.34%; height: 67.43%; }
.story-tech-card4-item2 img { width: 58.299%; height: 86.982%; transform: rotate(-56.5deg); }
.story-tech-card4-item3 { left: 63.76%; top: 4.23%; width: 26.84%; height: 67.48%; }
.story-tech-card4-item3 img { width: 67.500%; height: 85.345%; transform: rotate(-21.3deg); }
.story-tech-card4-item4 { left: 79.59%; top: 3.32%; width: 26.67%; height: 67.57%; }
.story-tech-card4-item4 img { width: 75.184%; height: 86.664%; transform: rotate(15.23deg); }

.story-tech-note {
	position: relative;
	z-index: 1;
	width: 100%;
	box-sizing: border-box;
	margin: clamp(8px, 1.25vw, 24px) 0 0;
	padding-right: 18.54%;
	text-align: right;
	font-family: 'Pretendard', sans-serif;
	font-weight: 400;
	font-size: clamp(9px, 0.677vw, 13px);
	line-height: 1.5;
	letter-spacing: -0.13px;
	color: #999999;
}

/* ── 케토톱의 기술력 카드 4개: 마우스오버(PC)/터치(모바일) 상세 콘텐츠
   (피그마 2386:3844) ── PC는 :hover만으로, 모바일은 JS가 붙이는
   .is-touch-active 클래스로 노출을 제어(자세한 동작은 ketotop.js 참고). */
.story-tech-card-hover {
	position: absolute;
	inset: 0;
	z-index: 2;
	overflow: hidden;
	border-radius: 8px;
	background: #ffffff;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease;
	pointer-events: none;
}
@media (hover: hover) {
	.story-tech-card:hover .story-tech-card-hover {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}
}
.story-tech-card.is-touch-active .story-tech-card-hover {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.story-tech-hover-body {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: clamp(10px, 1.25vw, 24px);
	font-family: 'Pretendard', sans-serif;
	font-weight: 500;
	font-size: clamp(10px, 0.9375vw, 18px);
	line-height: 1.4;
	letter-spacing: -0.18px;
	color: #111111;
}
.story-tech-hover-body .accent { color: #48b3e7; font-weight: 600; }

/* 카드1 호버: 흰 배경 + 은은한 블루 웜톤 그라데이션 + 제품 박스 사진(우하단) */
.story-tech-hover1 {
	background: linear-gradient(180deg, rgba(72, 179, 231, 0.2) 0%, rgba(72, 179, 231, 0) 44.8%), #ffffff;
}
/* 모바일 카드는 뒷면이 rotateY(180deg)로 회전된 상태에서 렌더링되는데,
   backface-visibility:hidden 요소 위의 배경 그라데이션은 브라우저가
   로컬이 아닌 화면 좌표계로 그려 세로 방향이 실제로 뒤집혀 보인다
   (실측 확인: 상단 blue/하단 white 의도였는데 상단 white/하단 blue로
   렌더링됨, 텍스트는 이중 회전으로 정상 표시되는 것과 대비됨).
   모바일에서만 각도를 반전시켜 보정한다. */
.story-tech-grid-mo .story-tech-hover1 {
	background: linear-gradient(0deg, rgba(72, 179, 231, 0.2) 0%, rgba(72, 179, 231, 0) 44.8%), #ffffff;
}
.story-tech-hover-photo {
	position: absolute;
	right: 3.23%;
	bottom: 6.43%;
	width: 34.69%;
	height: 51.43%;
}
.story-tech-hover-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 카드2 호버: 네이비 배경 + 흰 텍스트 + 수상 연혁 + 메달 아이콘 */
.story-tech-hover2 {
	background-color: #042d86;
	background-image: url('../images/section3-tech/dot.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
.story-tech-hover2 .story-tech-hover-body {
	width: 52.89%;
	color: #ffffff;
}
.story-tech-hover2 .story-tech-hover-body .accent { color: #6bcaf8; }
.story-tech-hover-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: clamp(8px, 0.833vw, 16px);
	font-size: clamp(10px, 0.9375vw, 18px);
}
.story-tech-hover-list span { display: block; font-weight: 500; }
.story-tech-hover-list b { font-weight: 600; margin-right: 4px; }
.story-tech-hover-medals {
	position: absolute;
	right: 11.05%;
	top: 59.64%;
	display: flex;
	gap: clamp(2px, 0.208vw, 4px);
}
.story-tech-hover-medals img {
	width: clamp(46px, 4.792vw, 92px);
	height: clamp(46px, 4.792vw, 92px);
	object-fit: contain;
}

/* 카드3 호버: 네이비 톤 오버레이 + 공장 사진(더 밝게, 잘 보이도록) + 흰 텍스트 + 각주 */
.story-tech-hover3 {
	background: #042d86;
}
.story-tech-hover3-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: bottom;
	opacity: 0.65;
}
.story-tech-hover3-scrim {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 51.79%;
	opacity: 0.5;
	background: linear-gradient(172deg, #042d86 15.233%, rgba(4, 45, 134, 0.874) 9.834%, rgba(4, 45, 134, 0.176) 64.195%);
}
.story-tech-hover3 .story-tech-hover-body {
	width: 52.89%;
	color: #ffffff;
}
.story-tech-hover3 .story-tech-hover-body .accent { color: #48b3e7; }
.story-tech-hover3-note {
	display: block;
	margin-top: clamp(6px, 0.625vw, 12px);
	color: #cccccc;
	font-size: clamp(8px, 0.781vw, 15px);
	letter-spacing: -0.15px;
}
.story-tech-hover3-footnote {
	position: absolute;
	left: clamp(10px, 1.25vw, 24px);
	top: calc(81.07% + clamp(10px, 0.8335vw, 16px));
	transform: translateY(-50%);
	font-family: 'Pretendard', sans-serif;
	font-weight: 400;
	font-size: clamp(7px, 0.625vw, 12px);
	letter-spacing: -0.12px;
	color: #cccccc;
	white-space: nowrap;
}

/* 카드4 호버: 흰 배경 + 태그 뱃지 2줄 + 원형 제품사진 2x2 */
.story-tech-hover-tags {
	position: absolute;
	left: 3.91%;
	top: 70.71%;
	display: flex;
	flex-direction: column;
	gap: clamp(3px, 0.26vw, 5px);
}
.story-tech-hover-tag-row {
	display: flex;
	gap: clamp(3px, 0.26vw, 5px);
}
.story-tech-hover-tag {
	padding: 2px 6px;
	background: #f5f5f5;
	border-radius: 999px;
	font-family: 'Pretendard', sans-serif;
	font-weight: 500;
	font-size: clamp(8px, 0.729vw, 14px);
	letter-spacing: -0.14px;
	color: #444444;
	white-space: nowrap;
}
.story-tech-hover4-photos {
	position: absolute;
	left: 58.84%;
	top: 13.57%;
	width: clamp(108px, 11.302vw, 217px);
	height: clamp(108px, 11.302vw, 217px);
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: clamp(4px, 0.411vw, 8px);
}
.story-tech-hover4-photos img {
	/* 4장의 원본 종횡비가 서로 다른데(1:1, 1139:1381, 780:1010, 779:1012),
	   grid item(=img 자체)의 min-height 기본값이 auto라 이미지의 고유
	   종횡비가 트랙 높이(1fr)보다 우선 적용돼 각 행이 콘텐츠 크기(126.75px/
	   135.81px)로 벌어지고, 그 결과 정사각형이 아닌 세로로 긴 셀이 되어
	   border-radius:999px를 줘도 원이 아니라 알약 모양이 되며 사진마다
	   크롭 위치(파스 세로 위치)가 제각각으로 어긋나 보였다(2026-09-02,
	   사용자 확인: "4개 이미지가 위아래 정렬이 안 되어 있다"). min-width/
	   min-height:0으로 grid item이 트랙 크기를 그대로 따르게 해 4장 모두
	   동일한 정사각형 셀이 되도록 고정한다. */
	min-width: 0;
	min-height: 0;
	width: 100%;
	height: 100%;
	border-radius: 999px;
	object-fit: cover;
	background: #eeeeee;
}
/* 2026-09-07: hover4-photo1(손가락 사진)이 원본 파일 자체에 은은한 둥근
   사각형 프레임을 갖고 있어(1:1 정사각형이라 object-fit:cover가 거의
   크롭을 안 함) border-radius:999px로 원 크롭 시 그 프레임 모서리와 겹쳐
   8각형처럼 각져 보이는 문제가 있었다(scale(1.35) 임시 확대로 시도했으나
   grid item + transform 조합에서 border-radius 클리핑 자체가 깨지는
   별개의 브라우저 렌더링 문제까지 겹쳐 해결 안 됨). 사용자가 4개 원이
   이미 완벽하게 합성된 참고 이미지(ketotop/ref/4circle.png, 220x220,
   각 원 106x106 + gap 8px)를 제공해 이걸 4등분 크롭해 hover4-photo1~4.webp
   기존 파일명 그대로 교체 — 마크업/CSS 변경 없이 파일 내용만 교체로 해결. */

/* ===================================================================
   모바일 브랜드 스토리 — video 탭: 피그마 node 2388:5724(@브랜드스토리, 375x812).
   tech 탭: node 2388:6328/2388:7555(@케토톱의 기술력, 375x1521, 기본/활성 상태).
   두 탭은 세로 비율이 달라 .story-mo-stage[data-tab]으로 aspect-ratio를 전환한다
   (JS: switchMobileStoryTab, ketotop.js). .story-mo-panel이 각 탭의 좌표 기준
   컨테이너(스테이지 전체를 덮는 inset:0) 역할을 해서, 각 탭 내부 요소는 기존처럼
   패널 기준 %로 배치한다.
   ================================================================= */
/* Figma 노드(video 375x812, tech 375x1521)는 참조용 @gnb(height 117px)를
   프레임 안에 함께 포함하고 있다 — 실제 사이트의 .story는 GNB 다음
   문서 흐름에서 시작해 GNB를 포함하지 않으므로, 노드 좌표를 그대로 옮기면
   GNB(117px) 높이만큼 상단에 불필요한 빈 공간이 생긴다(사용자 확인:
   "약국찾기-브랜드스토리 사이 빈공간이 너무 넓다"). 스테이지 자체의
   aspect-ratio에서 117px를 뺀 높이(video 695, tech 1404)를 쓰고, 모든
   자식 좌표도 이 기준으로 재계산한다. */
.story-mo-stage {
	position: relative;
	width: 100%;
	aspect-ratio: 375 / 695;
	container-type: inline-size;
}
.story-mo-stage[data-tab="tech"] {
	aspect-ratio: 375 / 1404;
}

/* 탭 pill은 video/tech 두 탭에서 완전히 동일한 위치/크기여야 한다(사용자 확정,
   2026-08-31 — Figma 노드 원본은 탭마다 폭이 달랐으나 실제 UI는 탭 전환 시
   pill이 움직이면 안 됨). top%만 스테이지 높이가 달라 별도 계산, 나머지
   (left/width/height/font-size)는 video 탭 값 그대로 공유한다. */
.story-mo-tabs {
	/* 원본 Figma 노드는 이 story 섹션 프레임 안에 GNB(@gnb, height 117px)를
	   참조용으로 함께 포함하고 있어, 탭 pill의 노드 좌표(y147)를 그대로 %로
	   옮기면 실제 사이트(.story가 GNB 다음 문서 흐름에서 시작, GNB를
	   포함하지 않음)에서 GNB 아래 117px가 통째로 빈 여백이 되어버린다
	   (사용자 확인: "약국찾기-브랜드스토리 사이 빈공간이 너무 넓다").
	   GNB 높이(117px)를 뺀 순수 콘텐츠 좌표(top=(147-117)/812=3.6946%)로
	   재계산 — 이 섹션의 모든 top 좌표(title/video-card/noti/products)에
	   동일하게 적용. */
	position: absolute;
	left: 5.3333%;
	top: 4.3165%;
	width: 89.3333%;
	height: 5.7554%;
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 4px;
	background: #e6f6ed;
	border-radius: 999px;
	box-sizing: border-box;
	z-index: 3;
}
.story-mo-stage[data-tab="tech"] .story-mo-tabs {
	/* 스테이지 높이가 1404(video 695)로 달라 같은 절대 px(40px)이 나오도록 top/height만 재계산 */
	top: 2.1368%;
	height: 2.849%;
}
.story-mo-tab {
	flex: 1 1 0;
	height: 100%;
	padding: 0 4px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	font-family: 'Pretendard', sans-serif;
	font-weight: 600;
	font-size: clamp(11px, 3.733vw, 9999px);
	font-size: clamp(11px, 3.733cqw, 9999px);
	letter-spacing: -0.14px;
	color: #333333;
	cursor: pointer;
}
.story-mo-tab.is-active {
	background: linear-gradient(97.99deg, #00a143 0%, #48b3e7 99.69%);
	color: #ffffff;
}

.story-mo-panel {
	position: absolute;
	inset: 0;
}

.story-mo-title {
	position: absolute;
	left: 5.3333%;
	top: 12.9496%;
	width: 89.3333%;
	text-align: center;
}
.story-mo-title-sub,
.story-mo-title-strong {
	margin: 0;
	font-family: 'Paperlogy', 'Pretendard', sans-serif;
	font-size: clamp(18px, 6.933vw, 9999px);
	font-size: clamp(18px, 6.933cqw, 9999px);
	letter-spacing: -0.26px;
	line-height: 1.2;
	color: #111111;
}
.story-mo-title-sub { font-weight: 400; }
.story-mo-title-strong { font-weight: 800; }

/* tech 탭 타이틀: GNB(117px) 제외 스테이지(1404) 기준 top=(207-117)/1404,
   좌우 여백 없이 375 풀폭 중앙정렬 */
.story-mo-panel[data-mo-panel="tech"] .story-mo-title {
	left: 0;
	top: 6.4103%;
	width: 100%;
}

.story-mo-video-card {
	position: absolute;
	left: 5.3333%;
	top: 25.3237%;
	width: 89.3333%;
	height: 27.0504%;
	background: #111111;
	border-radius: 12px;
	overflow: hidden;
}
.story-mo-video-thumb {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.story-mo-video-card iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.story-mo-play-btn {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 13.7313%;
	height: 24.4681%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	cursor: pointer;
}
.story-mo-play-btn img {
	width: 42%;
	height: 42%;
}

.story-mo-noti {
	position: absolute;
	left: 5.3333%;
	top: 54.1007%;
	width: 89.3333%;
	margin: 0;
	text-align: left;
	font-family: 'Pretendard', sans-serif;
	font-size: clamp(9px, 2.933vw, 9999px);
	font-size: clamp(9px, 2.933cqw, 9999px);
	letter-spacing: -0.11px;
	line-height: 1.5;
	color: #999999;
	z-index: 1;
}

.story-mo-products {
	position: absolute;
	left: 0;
	top: 52.3741%;
	width: 100%;
	height: 47.6259%;
	object-fit: cover;
	object-position: top;
	z-index: 0;
}

/* ── tech 탭 카드 그리드(모바일, 세로 1열 스택) — 피그마 카드 컨테이너
   Frame 2117908842(콘텐츠프레임 자식, x0 y182 w375) → GNB(117px) 제외
   스테이지(1404) 기준 top=(147+182-117)/1404, 카드 자체는 x20/w335
   (375 기준 5.3333%/89.3333%), 카드 4개 각 height 250, gap 15px ──*/
.story-tech-grid-mo {
	position: absolute;
	left: 5.3333%;
	top: 15.0997%;
	width: 89.3333%;
	display: flex;
	flex-direction: column;
	gap: 15px;
	perspective: 1200px; /* 카드 플립 원근감 */
	/* 카드4 제품 이미지가 카드 우측 밖으로 나가 페이지 가로 스크롤을 만드는 것을
	   막는다. overflow:hidden은 3D 변환을 평면화해 플립이 깨지지만,
	   overflow-x:clip은 스크롤 컨테이너를 만들지 않아 3D가 유지된다. */
	overflow-x: clip;
}
/* 카드는 좌→우 Y축 회전(플립)으로 앞/뒷면을 전환한다(사용자 요청 2026-08-31).
   .story-tech-card가 회전 컨테이너(preserve-3d)가 되고, 카드의 흰 배경·테두리·
   라운드는 앞면 레이어(::before)로 옮긴다. 앞면 콘텐츠(사진/텍스트/+버튼)와
   뒷면(.story-tech-card-hover)은 각각 backface-hidden이라 회전에 따라 한쪽만
   보인다. 뒷면은 미리 rotateY(180deg) 시켜둬 회전 완료 시 정면이 된다.
   overflow:hidden은 3D 변환을 평면화(flatten)시켜 플립이 깨지므로 쓸 수 없다 —
   대신 앞/뒷면 레이어에 각각 border-radius+overflow를 걸어 클리핑한다. */
.story-tech-grid-mo .story-tech-card {
	width: 100%;
	height: 0;
	padding-bottom: 74.6269%; /* 250 / 335 */
	background: transparent;
	border: 0;
	box-shadow: none;
	overflow: visible;
	transform-style: preserve-3d;
	transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
}
.story-tech-grid-mo .story-tech-card.is-touch-active {
	transform: rotateY(180deg);
}
/* 앞면 배경 레이어 */
.story-tech-grid-mo .story-tech-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: #ffffff;
	border: 1px solid #eaeaea;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	backface-visibility: hidden;
	z-index: 0;
}
.story-tech-grid-mo .story-tech-card2::before {
	background-image: url('../images/section3-tech/dot.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
/* 앞면 콘텐츠: 카드와 함께 돌고, 뒤를 보일 땐 숨는다.
   카드 밖으로 흘러나가는 이미지(카드1 사진 하단, 카드4 제품 우측)는
   overflow:hidden을 쓸 수 없으므로(3D 평면화) clip-path로 카드 영역에 가둔다. */
.story-tech-grid-mo .story-tech-card > *:not(.story-tech-card-hover) {
	position: absolute;
	backface-visibility: hidden;
	z-index: 1;
}
/* 카드 아래로 살짝 나가는 앞면 이미지는 clip-path로 카드 경계에 맞춰 잘라낸다
   (세로 방향은 페이지 가로 스크롤과 무관하므로 clip-path로 충분).
   초과분: 카드1 하단 5.13%, 카드2 하단 5.7%.
   가로로 넘치는 카드3·카드4는 clip-path로는 레이아웃 박스가 남아 가로 스크롤이
   생기므로 각각 object-fit(카드3)·컨테이너 클리핑(카드4)으로 따로 처리한다. */
.story-tech-grid-mo .story-tech-card2-photo { clip-path: inset(0 0 5.26% 0); }
.story-tech-grid-mo .story-tech-card-body {
	/* 원본: left/right 11px(3.284%), top 19px(7.6%), 항목 간 gap 6px.
	   base 규칙의 padding(top/left/right/bottom 동일값)을 방향별로 재정의. */
	padding-top: 7.6%;
	padding-left: 3.284%;
	padding-right: 3.284%;
	padding-bottom: 0;
	gap: 6px;
	z-index: 2;
}
/* cqw는 .story-mo-stage(폭 375px)를 기준으로 계산되므로, 여기 모든 계수는
   "실제px / 375 * 100"이다. 카드 자체 폭(335px)로 나눈 값이 아니다 —
   1차 수정 때 이 기준을 착각해 텍스트가 실제보다 커지는(카드1 active 텍스트가
   제품 이미지와 겹침) 문제가 있었음. */
.story-tech-grid-mo .story-tech-card-eyebrow {
	/* 16px / 375 * 100 */
	font-size: clamp(13px, 4.267vw, 9999px);
	font-size: clamp(13px, 4.267cqw, 9999px);
}
.story-tech-grid-mo .story-tech-card-eyebrow sup {
	/* Figma 원본은 위첨자에 유니코드 위첨자 글리프(⁴, U+2074 등 — 그 자체로
	   작게 그려지는 문자)를 써서 폰트 크기(16px)가 본문과 같아도 작아 보였다.
	   우리 마크업은 일반 숫자 + <sup> 태그를 쓰므로 실제로 폰트를 축소해야
	   같은 시각적 결과가 난다(사용자 확인: "각주번호가 너무 커, 글자보다
	   확실히 작아야해") — 본문의 약 0.65배로 축소. */
	font-size: 0.65em;
}
.story-tech-grid-mo .story-tech-card-title {
	/* 24px / 375 * 100 */
	font-size: clamp(20px, 6.4vw, 9999px);
	font-size: clamp(20px, 6.4cqw, 9999px);
}
.story-tech-grid-mo .story-tech-card-title sup {
	/* 위 eyebrow sup과 동일한 이유로 실제 축소 — title(24px) 기준 0.5배 */
	font-size: 0.5em;
}
/* + 버튼은 기본/active 두 상태 모두 카드 우하단 같은 자리(x291 y198 32x32) */
.story-tech-grid-mo .story-tech-card-plus {
	right: 3.582%;
	top: 79.2%;
	width: 9.552%;
	height: 12.8%;
	z-index: 3;
}

/* ── 앞면 제품 이미지: 모바일 카드(335x250) 실측 좌표로 재계산 ──
   PC 카드(588x280)용 %를 그대로 쓰면 비율이 달라 어긋난다. */
/* 카드1 기본: 사진 정렬 컨테이너(x89 y80 w234.735 h153.063, 카드 335x250 기준).
   이전에는 회전된 이미지의 바운딩박스 좌표(rounded-rectangle, y104.79)를 컨테이너
   좌표로 착각해 사진이 카드 하단에 딱 붙어(여백 없음) 보이는 버그가 있었다 —
   실제 컨테이너(정렬용 flex box, get_design_context로 재확인)는 top 80px이라
   하단에 6.77%(약 17px) 여백이 남는 게 정상. */
.story-tech-grid-mo .story-tech-card1-photo {
	left: 26.567%;
	top: 32%;
	width: 70.07%;
	height: 61.225%;
}
.story-tech-grid-mo .story-tech-card1-photo img {
	transform: none;
	filter: drop-shadow(0 3px 7px rgba(0, 0, 0, 0.22));
}
/* 카드2 기본: 오리지날34매(x158 y34 w164 h228, get_design_context 재확인값) +
   ujhj 뱃지(x118 y143 w81 h81). 사진이 하단으로 4.8%p 넘쳐 clip-path로 처리. */
.story-tech-grid-mo .story-tech-card2-photo {
	left: 47.164%;
	top: 13.6%;
	width: 48.955%;
	height: 91.2%;
}
.story-tech-grid-mo .story-tech-card2-photo img {
	object-fit: contain;
	box-shadow: none;
}
.story-tech-grid-mo .story-tech-card2-badge {
	left: 35.522%;
	top: 57.6%;
	width: 24.179%;
	height: 32.4%;
	z-index: 2;
}
/* 카드3 기본: 생산공장 사진. 원본(x-46 y-14 w554 h335)은 카드 밖으로 크게
   넘치는데, 3D 플립 때문에 부모에 overflow:hidden을 쓸 수 없어(평면화됨)
   레이아웃 박스가 그대로 남아 페이지 가로 스크롤을 유발한다. 같은 화면을
   내는 object-fit:cover + 카드 크기 박스로 대체(시각 결과 동일, 넘침 없음). */
.story-tech-grid-mo .story-tech-card3-photo {
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 62%;
	border-radius: 8px;
}
.story-tech-grid-mo .story-tech-card3-scrim {
	height: 58%;
}
/* 카드4 기본: 제품 4종 회전 클러스터 — 컨테이너 좌표(left/top/width/height)는
   모바일 카드(335x250) 기준으로 정확하다(회전각+bbox+원본 종횡비 역산으로
   재검산 완료). img의 width/height %는 2026-09-07 커밋(f7bb261)에서 PC값과
   "맞바꿔" 넣은 게 잘못이었다 — PC와 모바일은 카드 종횡비(588x280 vs 335x250)가
   달라도 카드4 항목 컨테이너의 bbox 비율은 동일(1.305:1, 모바일 123.74x94.77 =
   PC 175.34x134.29의 정비례)하므로 img %는 PC와 같아야 정상이다. 모바일
   Figma 원본(2388:7541, 카드 335x250 기준 bbox 123.74x94.77 등)으로 회전각과
   이미지 원본 종횡비(item1 429x597, item2 564x787, item3 504x763, item4 522x726)를
   역산해 확인: 올바른 %는 PC 규칙(1632~1639행)과 정확히 동일. 렌더 실측으로도
   확인 — 수정 전 모바일 렌더 bbox 비율 0.908(정답 1.306), PC는 1.301로 정상
   (2026-09-07, 사용자 지적). */
.story-tech-grid-mo .story-tech-card4-item1 { left: 32.836%; top: 72%;    width: 36.939%; height: 37.908%; clip-path: inset(0 0 26.14% 0); }
.story-tech-grid-mo .story-tech-card4-item1 img { width: 67.245%; height: 122.105%; transform: rotate(-84.04deg); }
.story-tech-grid-mo .story-tech-card4-item2 { left: 37.418%; top: 37.64%; width: 42.539%; height: 53.3%; }
.story-tech-grid-mo .story-tech-card4-item2 img { width: 58.299%; height: 86.982%; transform: rotate(-56.5deg); }
.story-tech-grid-mo .story-tech-card4-item3 { left: 56.812%; top: 23.916%; width: 33.25%; height: 53.337%; }
.story-tech-grid-mo .story-tech-card4-item3 img { width: 67.500%; height: 85.345%; transform: rotate(-21.3deg); }
.story-tech-grid-mo .story-tech-card4-item4 { left: 76.418%; top: 23.2%;  width: 33.041%; height: 53.41%; clip-path: inset(0 28.63% 0 0); }
.story-tech-grid-mo .story-tech-card4-item4 img { width: 75.184%; height: 86.664%; transform: rotate(15.23deg); }

/* ── 뒷면(active): 플립의 뒤쪽 면 ── */
.story-tech-grid-mo .story-tech-card-hover {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: rotateY(180deg);
	backface-visibility: hidden;
	overflow: hidden;
	border-radius: 8px;
	border: 1px solid #eaeaea;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	transition: none;
	z-index: 4;
}
.story-tech-grid-mo .story-tech-card-hover > * {
	position: absolute;
}
/* 본문 텍스트: 전 카드 공통 x12 y20 w311 (카드 기준 left 3.582% / top 8%),
   Figma 원본 폰트 16px -> 16/375*100=4.267cqw(스테이지 폭 기준) */
.story-tech-grid-mo .story-tech-hover-body {
	left: 3.582%;
	top: 8%;
	width: 92.836%;
	padding: 0;
	font-size: clamp(13px, 4.267vw, 9999px);
	font-size: clamp(13px, 4.267cqw, 9999px);
	line-height: 1.4;
}
/* 카드1 active: 케토톱단상자(x181 y142 w138 h97) — 우하단, +버튼 위로 겹침 */
.story-tech-grid-mo .story-tech-hover-photo {
	left: 54.03%;
	top: 56.8%;
	right: auto;
	bottom: auto;
	width: 41.194%;
	height: 38.8%;
}
.story-tech-grid-mo .story-tech-hover-photo img {
	object-fit: contain;
}
/* 카드2 active: 본문(h80) + 장영실상 마크(x12 y143 w87 h87, 좌하단) */
.story-tech-grid-mo .story-tech-hover2 .story-tech-hover-body {
	width: 92.836%;
}
.story-tech-grid-mo .story-tech-hover-list {
	/* Figma 원본 14px -> 14/375*100=3.733cqw — 본문(16px)보다 작은 별도 크기 */
	font-size: clamp(11px, 3.733vw, 9999px);
	font-size: clamp(11px, 3.733cqw, 9999px);
	margin-top: 16px;
}
.story-tech-grid-mo .story-tech-hover-medals {
	left: 3.582%;
	top: 57.2%;
	right: auto;
	gap: 0;
}
.story-tech-grid-mo .story-tech-hover-medals img {
	width: 100%;
	height: 100%;
	max-width: none;
}
.story-tech-grid-mo .story-tech-hover-medals {
	width: 25.97%;
	height: 34.8%;
}
/* 카드3 active: 배경사진(x-8 y-20 w433 h289) + 상단 스크림(h145) + 본문(h118) + 각주 */
.story-tech-grid-mo .story-tech-hover3 .story-tech-hover-body {
	width: 92.836%;
}
.story-tech-grid-mo .story-tech-hover3-scrim {
	height: 58%;
}
.story-tech-grid-mo .story-tech-hover3-note {
	/* Figma 원본 14px — cqw는 .story-mo-stage(375px 폭) 기준이므로
	   14/375*100=3.733cqw (카드 335px 기준 4.179는 틀린 계산이었음) */
	margin-top: 12px;
	font-size: clamp(11px, 3.733vw, 9999px);
	font-size: clamp(11px, 3.733cqw, 9999px);
}
.story-tech-grid-mo .story-tech-hover3-footnote {
	left: 3.582%;
	top: 86.4%;
	transform: none;
	/* Figma 원본 12px -> 12/375*100=3.2cqw */
	font-size: clamp(10px, 3.2vw, 9999px);
	font-size: clamp(10px, 3.2cqw, 9999px);
}
/* 카드4 active: 주의 — .story-tech-hover4는 별도 래퍼가 아니라
   .story-tech-card-hover 자신과 같은 요소(마크업: <span class="story-
   tech-card-hover story-tech-hover4">)다. 카드 뒷면 배경 전체를 덮어야
   하는 요소라서 여기에 display:flex+position:absolute(inset 좁힘)를
   걸면 뒷면 카드 자체가 335x250이 아니라 그 안쪽으로 줄어든 크기가
   되어 텍스트가 카드 가장자리에 여백 없이 붙어버린다(2026-09-02,
   "뒤집힌 카드 크기가 작아졌다" 확인 — 직전 커밋의 회귀).
   .story-tech-hover4는 그대로 두고(카드 전체 크기 유지), 본문(top 고정)과
   태그(bottom 고정)를 각각 absolute로 컨테이너 양 끝에 배치해
   원본의 justify-content:space-between 효과를 재현한다. */
.story-tech-grid-mo .story-tech-hover4 .story-tech-hover-body {
	/* 원본은 각 문장이 개별 <p>(width 100%)이고, 문장 자체가 짧아 자연스럽게
	   사진 영역과 안 겹친다 — 박스 폭을 좁히는 접근(min-content/%)은 오히려
	   <br/> 줄이 강제로 2차 줄바꿈되어 줄 수가 늘어나는 역효과만 냈다(실측
	   확인). 대신 안 겹치는 원인 자체(줄 수)를 해결한다: 아래 accent 줄바꿈
	   조정 참고.
	   두 가지가 이중으로 폭을 줄이고 있었음:
	   1) base .story-tech-hover-body의 padding(PC용, clamp 10~24px)이 부모
	      .story-tech-hover4의 padding과 겹침 → padding:0으로 리셋.
	   2) 공용 규칙(모든 카드 대상) .story-tech-grid-mo .story-tech-hover-body
	      { width: 92.836% }이 카드4에도 적용돼 폭이 92.836%로 줄어 "열감을
	      더한 핫, 국소용 핫 미니, 감아 쓰는 밴드형,"이 원본(311px 풀폭)과
	      달리 한 줄에 안 들어가고 자동 줄바꿈됨 → width:100%로 재정의. */
	position: absolute;
	left: 3.582%;
	top: 8%;
	padding: 0;
	width: 92.836%;
	/* Figma 원본 스펙(line-height 1.4, 5줄)대로면 본문 하단(20+112=132px)과
	   사진 상단(132px)이 정확히 경계선상에서 맞닿는데, 실제 웹폰트 렌더링은
	   더 크게 나와 근소하게 겹친다(2026-09-02, "필요에 맞춰 케토톱도
	   다양해졌습니다"의 "양"자가 사진과 겹침 확인). 자간/폰트 크기는 원본
	   그대로 유지한 채 줄 간격만 좁혀(1.4→1.22) 5줄 전체 높이를 줄여
	   안전 여백을 확보한다. */
	line-height: 1.22;
}
.story-tech-grid-mo .story-tech-hover-tags {
	left: 3.582%;
	top: 58%;
	gap: 4px;
}
.story-tech-grid-mo .story-tech-hover4 .story-tech-hover-tags {
	/* 본문은 top 고정(위), 태그는 bottom 고정(아래) — 원본의
	   justify-content:space-between이 컨테이너(top:8%~92%) 양 끝에
	   붙이는 효과를 각각 절대좌표로 재현. bottom 8%는 카드 하단
	   여백(원본 컨테이너 top:8%+height:84%=92%, 즉 하단 여백 8%)과 동일. */
	position: absolute;
	left: 3.582%;
	top: auto;
	bottom: 8%;
}
.story-tech-grid-mo .story-tech-hover-tag-row {
	gap: 4px;
}
.story-tech-grid-mo .story-tech-hover-tag {
	/* Figma 원본 13px -> 13/375*100=3.467cqw */
	font-size: clamp(10px, 3.467vw, 9999px);
	font-size: clamp(10px, 3.467cqw, 9999px);
}
.story-tech-grid-mo .story-tech-hover4-photos {
	left: 55.224%;
	top: 52.8%;
	width: 32.836%;
	height: 44%;
	gap: 4px;
	z-index: 1;
}
/* 뒷면의 + 버튼은 사진 위에 보여야 한다(카드1 제품박스·카드4 사진그리드 위) */
.story-tech-grid-mo .story-tech-card-hover .story-tech-card-plus {
	z-index: 5;
}
/* 카드4 태그블록: 원본(모바일)은 태그가 한 줄에 하나씩 3줄로 쌓이고
   x12~x141(42.09%)까지만 차지해 사진(55.22%~)과 겹치지 않는다.
   PC는 2줄(2개+1개) 배치라 모바일에서만 세로 스택으로 바꾼다. */
.story-tech-grid-mo .story-tech-hover4 .story-tech-hover-tags {
	width: 44%;
	gap: 5px;
}
.story-tech-grid-mo .story-tech-hover4 .story-tech-hover-tag-row {
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
}

/* 각주 배경의 연한 민트색 원형 도트 패턴(Frame 2117908843, x0 y1190 w375 h331,
   GNB 117px 제외 스테이지(1404) 기준 top=(1190-117)/1404, height=331/1404).
   회전된 벡터 마스크 그룹이라 CSS로 재현하지 않고 Figma에서 직접 익스포트한
   이미지를 씀. 각주 텍스트보다 뒤에 깔려야 하므로 마크업상 앞에 두고
   z-index로 순서 고정. */
.story-tech-note-dots-mo {
	position: absolute;
	left: 0;
	top: 76.4245%;
	width: 100%;
	height: 23.5755%;
	object-fit: cover;
	object-position: bottom;
	z-index: 0;
	pointer-events: none;
}

.story-tech-note-mo {
	z-index: 1;
	/* Figma 원본(Frame 2117908868, x20 y1060 w335 h102)은 실제로 우측 정렬
	   (text-right, Tailwind)이었다 — 이전에 "좌측 정렬이어야 한다"고 잘못
	   판단해 바꿨던 것을 사용자 재확인으로 원복. 컨테이너는 좌우 padding
	   10px씩을 추가로 갖고 있어(px-[10px]) 카드 여백(20px)과 합쳐 좌우
	   30px, 폭 315px — left 8%/width 84%로 재계산. 폰트도 11px(2.933cqw,
	   기존 9px는 오차)로 정정, letter-spacing도 -0.11px로 정정. */
	position: absolute;
	left: 8%;
	top: 90.5983%;
	width: 84%;
	margin: 0;
	text-align: right;
	font-family: 'Pretendard', sans-serif;
	font-weight: 400;
	/* 11px(2.933cqw)가 정확한 Figma 스펙이지만, 실제 웹폰트 렌더링 폭이
	   Figma보다 약간 넓어(실측 8px 초과) 6줄 중 5번째 줄("8) 장영실상
	   홈페이지 > 수상제품 > 1996년 06주차 장영실상 수상제품")만 315px
	   컨테이너를 넘어 한 단어가 다음 줄로 밀려났다. 육안 차이가 거의
	   없는 선(0.974배)에서만 축소해 그 줄도 원본처럼 한 줄에 들어가게 함. */
	font-size: clamp(9px, 2.857vw, 9999px);
	font-size: clamp(9px, 2.857cqw, 9999px);
	line-height: 1.5;
	letter-spacing: -0.11px;
	color: #999999;
}

/* ===================================================================
   Section 4 — 궁금해요 (피그마 node 2386:1936, FAQ 아코디언)
   파인더와 동일하게 배경 없는 콘텐츠 섹션 — max-width 중앙정렬.
   ================================================================= */

.faq {
	scroll-margin-top: var(--header-h-pc);
	background: #ffffff;
	padding: 80px 24px;
}

.faq-inner {
	max-width: 1200px;
	margin: 0 auto;
}

.faq-head {
	display: flex;
	justify-content: center;
	margin-bottom: clamp(32px, 4.5vw, 48px);
}

.faq-title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	margin: 0;
	font-family: 'Paperlogy', 'Pretendard', sans-serif;
	font-weight: 700;
	font-size: clamp(28px, 2.865vw, 55px);
	letter-spacing: -0.55px;
	line-height: 1.2;
	color: #111111;
}

.faq-arrow {
	width: clamp(48px, 4.635vw, 89px);
	height: auto;
	flex-shrink: 0;
}

.faq-list {
	border-top: 2px solid #111111;
}

.faq-item {
	border-bottom: 1px solid #e6e6ec;
}

.faq-q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 24px 16px;
	background: transparent;
	border: 0;
	text-align: left;
	cursor: pointer;
	font-family: 'Pretendard', sans-serif;
	font-weight: 600;
	font-size: clamp(16px, 1.0417vw, 20px);
	letter-spacing: -0.2px;
	color: #111111;
}

.faq-arrow-icon {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	position: relative;
	transition: transform 0.2s ease;
}
.faq-arrow-icon::before,
.faq-arrow-icon::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	background: #666666;
	border-radius: 1px;
}
.faq-arrow-icon::before {
	width: 10px;
	height: 2px;
	transform: translate(-50%, -50%);
}
.faq-arrow-icon::after {
	width: 2px;
	height: 10px;
	transform: translate(-50%, -50%);
}
.faq-q[aria-expanded="true"] .faq-arrow-icon {
	transform: rotate(180deg);
}
.faq-q[aria-expanded="true"] .faq-arrow-icon::after {
	opacity: 0;
}

.faq-a {
	padding: 0 16px 24px;
}
.faq-a p {
	margin: 0;
	font-family: 'Pretendard', sans-serif;
	font-weight: 400;
	font-size: clamp(14px, 0.9375vw, 18px);
	letter-spacing: -0.2px;
	line-height: 1.7;
	color: #555555;
}
.faq-inline-link {
	color: var(--gnb-bg);
	font-weight: 600;
	text-decoration: underline;
}

.faq-noti {
	max-width: 1200px;
	margin: 24px auto 0;
	padding: 0 24px;
	box-sizing: border-box;
	text-align: right;
	font-family: 'Pretendard', sans-serif;
	font-weight: 400;
	font-size: 13px;
	letter-spacing: -0.13px;
	line-height: 1.5;
	color: #999999;
}

/* ===================================================================
   Section 5 — 제품정보 (피그마 node 2386:1770~1897, @상세정보_1~4)
   쿨타입/오리지널/밴드타입/핫타입 4탭. 파인더 카드(data-detail-tab)에서
   진입 시 ketotop.js initDetailTabs()가 해당 탭을 활성화하고 스크롤.

   피그마 원본은 flex 흐름형이 아니라 절대좌표 배치 — 패키지(좌측 420px 고정),
   정보카드 2~3개(우측 780px 폭, 개별 카드), "제품 정보 더보기"(정보카드 우하단
   안쪽 작은 필 버튼), 각주(하단 우측정렬)가 전부 지정 좌표에 놓인다.
   .detail-stage(1200x599 비율, 브랜드스토리 .story-stage와 동일 원리)로
   재현하고 좌표는 피그마 원시값을 스테이지 기준 %로 환산했다. 밴드타입은
   정보카드가 3개(경고박스 포함)라 세로로 더 길어 .detail-stage-tall로 분리.
   ================================================================= */

.detail {
	scroll-margin-top: var(--header-h-pc);
	background: #ffffff;
	padding: 80px 24px 40px;
	position: relative;
}

.detail-inner {
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
}

.detail-tabs {
	display: flex;
	justify-content: center;
	gap: 0;
	margin: 0 auto clamp(32px, 4.5vw, 48px);
	width: fit-content;
	background: #f2f3f6;
	border-radius: 999px;
	padding: 8px;
}

.detail-tab {
	padding: 11px 24px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	font-family: 'Pretendard', sans-serif;
	font-weight: 600;
	font-size: clamp(14px, 0.9375vw, 18px);
	letter-spacing: -0.18px;
	color: #666666;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
	white-space: nowrap;
}
.detail-tab.is-active {
	color: #ffffff;
}
.detail-tab[data-detail-tab="cool"].is-active { background: #00a143; }
.detail-tab[data-detail-tab="original"].is-active { background: #042d86; }
.detail-tab[data-detail-tab="band"].is-active { background: #ec5f0e; }
.detail-tab[data-detail-tab="hot"].is-active { background: #df0011; }

.detail-name {
	margin: 0 0 clamp(20px, 2.6vw, 32px);
	text-align: center;
	font-family: 'Paperlogy', 'Pretendard', sans-serif;
	font-weight: 600;
	font-size: clamp(26px, 2.5vw, 48px);
	letter-spacing: -0.48px;
	color: #111111;
}

.detail-stage {
	position: relative;
	width: 100%;
	aspect-ratio: 1200 / 599;
}
/* 밴드타입만 정보카드 3개(경고박스 포함) — 경고문구가 피그마 원본 카드 높이보다
   실제로 더 필요해(2줄 줄바꿈) 스테이지 자체를 키우고 좌표를 재계산했다. */
.detail-stage-tall {
	aspect-ratio: 1200 / 660;
}

.detail-stage > * {
	position: absolute;
}

/* 패키지 이미지: 피그마는 좌측 420px 영역 안에 제품을 top:0 기준으로 가로 중앙정렬한다
   (쿨 278x388 / 오리지널 279x388 / 밴드 280x387 / 핫 307.5x388).
   에셋 webp는 피그마 노드를 2x로 내보낸 것을 그림자 여백까지 잘라낸 상태라
   height만 지정하고 width:auto로 두면 4종 전부 피그마 실측 크기와 정확히 일치한다.
   그림자는 이미지에 굽지 않고 CSS filter(피그마 스펙과 동일한 값)로 준다. */
.detail-pkg {
	left: 17.5%; /* 좌측 420px 영역의 중심(210/1200) */
	top: 0;
	transform: translateX(-50%);
	height: 64.7746%; /* 388 / 599 */
	width: auto;
	filter: drop-shadow(0px 6px 20px rgba(0, 0, 0, 0.25));
}
.detail-stage-tall .detail-pkg {
	height: 58.6364%; /* 387 / 660 */
}

.detail-info {
	position: absolute;
	left: 35%;
	width: 65%;
	background: #f9f9f9;
	border-radius: 12px;
	padding: clamp(14px, 1.667vw, 24px);
	box-sizing: border-box;
	overflow: hidden;
}
.detail-info-1 { top: 0; height: 30.5%; }
.detail-info-2 { top: 33.18%; height: 22.04%; }
.detail-info-3 { top: 44.41%; height: 25.88%; }
.detail-info-warn {
	top: 25.54%;
	height: 16.86%;
	background: #fffcfa;
}
.detail-stage-tall .detail-info-1 { height: 22.5%; }
.detail-stage-tall .detail-info-warn { top: 24.5%; height: 18.79%; }
.detail-stage-tall .detail-info-3 { top: 44.5%; height: 23.48%; }

.detail-info-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
	font-family: 'Pretendard', sans-serif;
	font-weight: 700;
	font-size: clamp(14px, 1.25vw, 24px);
	letter-spacing: -0.24px;
	color: #00a143;
}
.detail-panel[data-detail-panel="original"] .detail-info-1 .detail-info-title { color: #042d86; }
.detail-panel[data-detail-panel="band"] .detail-info-1 .detail-info-title { color: #ec5f0e; }
.detail-panel[data-detail-panel="hot"] .detail-info-1 .detail-info-title { color: #df0011; }
.detail-info-title sup {
	font-weight: 500;
	font-size: 0.5em;
	line-height: 0;
}
.detail-info-2 .detail-info-title,
.detail-info-3 .detail-info-title {
	font-size: clamp(12px, 0.729vw, 14px);
	font-weight: 600;
	color: #333333;
}

.detail-info-list {
	margin: 0;
	padding: 0 0 0 6px;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: clamp(4px, 0.417vw, 8px);
}
.detail-info-list li {
	font-family: 'Pretendard', sans-serif;
	font-weight: 500;
	font-size: clamp(11px, 0.9375vw, 18px);
	letter-spacing: -0.18px;
	line-height: 1.3;
	color: #111111;
}
.detail-info-list li::before {
	content: '•';
	margin-right: 2px;
}

.detail-info-warn .detail-info-title {
	color: #111111;
	font-size: clamp(13px, 0.9375vw, 18px);
	font-weight: 700;
}
.detail-info-warn .detail-info-title::before {
	content: '';
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	background: url('../images/section5/warning-icon.svg') no-repeat center / contain;
}
.detail-warn-text {
	margin: 0;
	padding-left: 6px;
	font-family: 'Pretendard', sans-serif;
	font-weight: 500;
	font-size: clamp(11px, 0.9375vw, 18px);
	letter-spacing: -0.18px;
	line-height: 1.3;
	color: #111111;
}

/* "제품 정보 더보기": 피그마에서 정보카드 *바깥*, 마지막 카드 바로 아래에 있고
   우측 끝은 카드/스테이지 오른쪽 변에 정확히 맞춰진다(피그마 x=1445+115=1560=스테이지 우변).
   카드 안에 넣으면 안 된다. top은 마지막 카드 하단 + 피그마 갭(일반 16px / 밴드 12px). */
.detail-more {
	position: absolute;
	right: 0;
	top: 57.9%; /* .detail-info-2 하단(33.18+22.04=55.22%) + 16px */
	padding: 4px 12px;
	border: 1px solid #e5e5e5;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.8);
	font-family: 'Pretendard', sans-serif;
	font-weight: 600;
	font-size: clamp(10px, 0.729vw, 14px);
	letter-spacing: -0.14px;
	color: #999999;
	cursor: pointer;
	white-space: nowrap;
}
.detail-more-tall {
	top: 69.8%; /* .detail-info-3 하단(44.5+23.48=67.98%) + 12px */
}

.detail-noti {
	left: 0;
	top: 85.31%;
	width: 100%;
	margin: 0;
	text-align: right;
	font-family: 'Pretendard', sans-serif;
	font-weight: 400;
	font-size: clamp(10px, 0.677vw, 13px);
	letter-spacing: -0.13px;
	line-height: 1.5;
	color: #999999;
}
.detail-noti-tall {
	top: 76%;
}

/* 우측 고정 플로팅 버튼(제품 전체/약국 찾기, 피그마 node 2386:1803) —
   뷰포트 기준 fixed. #section5가 실제로 화면에 보일 때만 노출되도록
   ketotop.js의 initDetailFloatVisibility()(IntersectionObserver)가
   .is-visible 클래스를 토글한다 — 기본은 숨김. */
.detail-float {
	position: fixed;
	right: clamp(16px, 3.125vw, 60px);
	bottom: clamp(24px, 8.8vw, 169px);
	z-index: 40;
	display: flex;
	flex-direction: column;
	gap: 10px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}
.detail-float.is-visible {
	opacity: 1;
	pointer-events: auto;
}
.detail-float-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(52px, 3.9vw, 75px);
	height: clamp(52px, 3.9vw, 75px);
	border: 0;
	border-radius: 999px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
	cursor: pointer;
	text-decoration: none;
}
.detail-float-btn span {
	font-family: 'Pretendard', sans-serif;
	font-weight: 600;
	font-size: clamp(12px, 0.9375vw, 18px);
	letter-spacing: -0.18px;
	line-height: 1.2;
	text-align: center;
}
.detail-float-all {
	background: var(--gnb-bg);
}
.detail-float-all span {
	color: #ffffff;
}
.detail-float-pharmacy {
	background: #e6eaf3;
}
.detail-float-pharmacy span {
	color: var(--gnb-bg);
}

/* 991.98px 이하 임시 대충 반응형(flex 흐름형 전환)은 767.98px 블록 안의
   Figma 모바일 원본(node 2388:5519~5652) 기반 정확한 구현으로 교체됨.
   992~767.99px 구간은 PC .detail-stage 절대좌표 레이아웃을 그대로 쓴다
   (그 폭에서도 좌표 비율이 자연스럽게 유지되는 절대좌표 스테이지 설계라
   별도 브레이크포인트가 필요 없음 — 브랜드스토리 .story-stage와 동일 원리). */

/* ===================================================================
   Footer (피그마 node 2386:384, 전 섹션 공통)
   ================================================================= */

.site-footer {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	max-width: 1920px;
	margin: 0 auto;
	padding: 30px 80px;
	border-top: 1px solid #eaeaea;
	background: #ffffff;
}

.site-footer-ci {
	flex-shrink: 0;
	width: 120px;
	height: auto;
}

.site-footer-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.site-footer-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 12px;
	margin: 0;
	font-family: 'Pretendard', sans-serif;
	font-weight: 500;
	font-size: clamp(12px, 0.9375vw, 18px);
	letter-spacing: -0.18px;
	line-height: 1.2;
	color: #999999;
}
.site-footer-row span::after {
	content: '';
}

.site-footer-copy {
	margin: 0;
	font-family: 'Pretendard', sans-serif;
	font-weight: 500;
	font-size: clamp(12px, 0.9375vw, 18px);
	letter-spacing: -0.18px;
	line-height: 1.2;
	color: #999999;
}

/* Figma 모바일 원본(node 2388:234, 여러 @상세정보/@궁금해요 프레임에 공통
   인스턴스로 포함)은 items-start — 로고와 텍스트 모두 좌측정렬이다. PC의
   중앙정렬(justify-content:center)을 그대로 옮겨써서 실제로는 원본과 다르게
   중앙정렬돼 있던 것을 좌측정렬로 정정. */
@media (max-width: 767.98px) {
	.site-footer {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
		padding: 30px 20px;
		text-align: left;
	}
	/* Figma 모바일 원본(node 2388:234)은 로고 77x44px, 대표자/주소/TEL/
	   사업자등록번호/Copyright 5개가 각각 완전히 별도 줄(15px, gap 8px)
	   — PC는 앞 4개가 한 줄에 이어지는 디자인이라 .site-footer-row가
	   flex-wrap 컨테이너로 만들어져 있는데, 마크업(4개 <span>)은 그대로
	   두고 모바일만 column으로 바꿔 각 span을 완전한 줄로 분리한다. */
	.site-footer-ci {
		width: 77px;
		height: 44px;
	}
	.site-footer-info {
		align-items: flex-start;
		gap: 24px;
	}
	.site-footer-row {
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		gap: 8px;
		font-size: 15px;
		letter-spacing: -0.15px;
	}
	.site-footer-copy {
		font-size: 15px;
		letter-spacing: -0.15px;
	}
}

/* ===================================================================
   반응형
   =================================================================== */

@media (max-width: 1199.98px) {
	.header-inner { padding: 0 32px; }
	.gnb ul { gap: 32px; }
	.gnb .nav-link { font-size: 16px; }
}

/* 모바일 GNB — 피그마 node 2388:9047(@gnb 인스턴스, 375px 프레임) 기준.
   PC는 로고+메뉴가 한 줄(74px)에 나란히 있고 767.98px 이하에서 햄버거로
   축약했었는데, 실제 모바일 디자인은 햄버거가 없고 로고 줄(29px)과 메뉴 줄
   (50px)이 위아래로 나뉜 2단 구조 — 5개 메뉴 전부가 항상 노출된다. */
@media (max-width: 767.98px) {
	:root {
		--header-h-pc: var(--header-h-mo);
	}

	.site-header {
		display: flex;
		flex-direction: column;
	}
	.header-inner {
		flex: 0 0 auto;
		width: 100%;
		min-width: 0;
		height: auto;
		padding: 7px 20px;
		justify-content: flex-start;
	}
	.site-header .logo { width: 40px; height: 15px; }
	.btn-hamburger { display: none; }

	/* .gnb는 마크업상 .header-inner의 자식(로고와 같은 flex row)이라, 그냥
	   두면 로고 옆으로 배치되며 335px 폭이 헤더 밖으로 넘친다. absolute로
	   빼서 .header-inner(position:relative) 바로 아래 "다음 줄"에 고정 —
	   피그마처럼 로고 줄과 메뉴 줄이 위아래로 분리된 모양이 된다. */
	.gnb {
		display: flex;
		position: absolute;
		left: 0;
		top: 100%;
		justify-content: stretch;
		width: 100%;
		min-width: 0;
		height: 50px;
		padding: 0 20px;
	}
	.gnb ul {
		display: flex;
		align-items: stretch;
		width: 100%;
		min-width: 0;
		gap: 0;
	}
	.gnb li {
		flex: 1 1 0;
		min-width: 0;
	}
	.gnb li:first-child {
		flex: 0 0 67px;
	}
	.gnb .nav-link {
		width: 100%;
		height: 100%;
		padding: 8px 0;
		font-size: 14px;
		letter-spacing: -0.14px;
		line-height: 1.2;
		text-align: center;
		white-space: normal;
		word-break: keep-all;
	}

	.faq { padding: 48px 16px; }
	/* Figma 모바일 원본(node 2388:8792)은 타이틀+손가락 아이콘이 한 줄(가로)
	   이고 아이콘도 PC보다 상대적으로 큼(42x24, 카드 335px 기준 12.5%) —
	   기존 column 배치를 원본대로 되돌린다. */
	.faq-title { flex-direction: row; gap: 8px; font-size: clamp(24px, 7.467vw, 9999px); }
	.faq-arrow { width: 12.537vw; max-width: 42px; }

	/* ── FAQ 아코디언을 리스트(구분선)에서 카드(회색 배경+테두리+둥근 모서리,
	   항목마다 12px 간격)로 전환 — Figma 원본 실측(Frame 1410117304 등,
	   bg #f9f9f9, border #eee, radius 12px, padding 16px, gap 12px,
	   질문 폰트 14px). PC는 기존 리스트 스타일 그대로 유지, 모바일만 전환. */
	.faq-list {
		border-top: 0;
		display: flex;
		flex-direction: column;
		gap: 12px;
	}
	.faq-item {
		border-bottom: 0;
		background: #f9f9f9;
		border: 1px solid #eeeeee;
		border-radius: 12px;
		overflow: hidden;
	}
	.faq-q {
		padding: 16px;
		font-size: 14px;
		font-weight: 600;
		letter-spacing: -0.14px;
	}
	.faq-a { padding: 0 16px 16px; }
	.faq-a p { font-size: 13px; line-height: 1.6; }

	/* 아이콘을 +/-(faq-arrow-icon 가로/세로 막대 교차)에서 Figma의 v자 모양
	   chevron-down으로 교체 — 막대 2개를 각각 45deg/-45deg 회전해 ∨ 모양을
	   만들고(기존 +자 배치의 left/top:50%, translate(-50%,-50%)는 유지한
	   채 rotate만 추가), 펼침 시 아이콘 전체를 180deg 회전(기존 로직 유지)
	   시켜 위쪽을 향하게 한다. */
	/* CSS ::before/::after 막대 조합(+/- 자로 밖에 안 나옴)으로는 Figma의
	   부드러운 곡선 chevron(stroke-linecap:round, stroke-width 1.5)을
	   재현할 수 없어 원본 SVG를 그대로 background-image로 사용 — 색상은
	   SVG 자체에 stroke="#111111"로 고정돼 있음(마크업 변경 없이 PC의
	   +/- 로직은 그대로 두고 모바일만 이 아이콘으로 교체). */
	.faq-arrow-icon {
		width: 16px;
		height: 16px;
		background-image: url('../images/section4-faq/arrow-chevron.svg');
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
	}
	.faq-arrow-icon::before,
	.faq-arrow-icon::after {
		content: none;
	}

	/* ── 제품정보(Section5) 모바일 — Figma node 2388:5519(쿨)/5560(오리지널)/
	   5602(밴드)/5652(핫) 실측 기준. PC .detail-stage는 절대좌표 스테이지지만
	   모바일 원본은 순수 세로 흐름(flex column)이라 좌표 재현이 아니라
	   흐름형으로 새로 작성 — 탭마다 카드 개수/구성이 달라도(쿨/오리지널/핫=
	   카드 2개, 밴드=카드 2개+경고박스) 기존 마크업 순서를 그대로 흐르게
	   두면 각 탭이 자연히 재현된다. */
	/* 2026-09-02: "한 화면에 나오도록" 요청 — GNB(79px) 제외 실제 가용
	   높이(812px 뷰포트 기준 733px)에 맞춰 상하 패딩/카드 간격/이미지
	   크기를 전반적으로 압축. 원본 Figma는 PC 기준 룩앤필이라 이 압축은
	   모바일 전용 실용적 조정이며 PC에는 영향 없음. */
	.detail { padding: 20px 16px 24px; }
	.detail-inner {
		max-width: 335px;
	}
	.detail-tabs {
		width: 100%;
		max-width: 335px;
		padding: 4px;
		margin-bottom: 14px;
	}
	.detail-tab {
		flex: 1 1 0;
		padding: 0;
		height: 32px;
		font-size: 14px;
		letter-spacing: -0.14px;
	}
	.detail-name {
		margin-bottom: 14px;
		font-size: 26px;
		letter-spacing: -0.26px;
	}
	.detail-stage,
	.detail-stage-tall {
		aspect-ratio: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8px;
	}
	.detail-stage > * {
		position: static;
		width: auto;
		height: auto;
	}
	.detail-pkg,
	.detail-stage-tall .detail-pkg {
		height: 140px;
		width: auto;
		transform: none; /* PC의 가로 중앙정렬용 translateX 해제 */
		margin: 10px 0 8px; /* 원본은 26px/14px(합 40px) — "한 화면" 압축을 위해 축소 */
	}
	.detail-info {
		width: 100%;
		padding: 10px 14px;
	}
	.detail-info-title {
		margin-bottom: 6px;
		font-size: 15px;
		letter-spacing: -0.15px;
	}
	.detail-info-2 .detail-info-title,
	.detail-info-3 .detail-info-title {
		font-size: 12px;
		letter-spacing: -0.12px;
	}
	.detail-info-list {
		gap: 5px;
	}
	.detail-info-list li {
		font-size: 13px;
		letter-spacing: -0.13px;
		line-height: 1.25;
	}
	.detail-info-warn .detail-info-title {
		font-size: 13px;
	}
	.detail-warn-text {
		font-size: 13px;
		letter-spacing: -0.13px;
		line-height: 1.25;
	}
	.br-mo {
		display: block;
	}
	.detail-more,
	.detail-more-tall {
		align-self: center;
		margin-top: 8px;
		font-size: 13px;
		letter-spacing: -0.13px;
	}
	/* Figma 원본(Frame 2117908868)은 각주가 375px 풀폭 컨테이너(px-10) 안에
	   있어 텍스트 폭이 355px인데, .detail-noti의 실제 부모는 .detail-stage
	   (max 335px, .detail-inner 여백 안쪽)라 그대로 두면 텍스트 폭이 부족해져
	   줄바꿈 지점이 전부 밀린다. 375px 뷰포트에서 필요한 상쇄값은 -20px
	   (.detail 패딩 16px + .detail-inner가 335px로 clamp되며 남는 잔여
	   4px)이지만, 뷰포트가 335px보다 좁아지면(예: 320px) .detail-inner가
	   더 이상 max-width에 걸리지 않고 .detail 패딩(16px)만 남아 필요한
	   상쇄값이 -16px로 바뀐다 — 375px 기준 고정값(-20px)을 그대로 쓰면
	   320px에서 뷰포트 밖으로 4px 넘쳐 가로 스크롤이 생겼다(2026-09-02).
	   (참고: left:50%/margin-left:-50vw 풀블리드 트릭은 containing block이
	   .detail-inner(position:relative)라 여기서는 쓸 수 없어 시도 후 폐기.)
	   335px 미만 구간만 별도 미디어쿼리로 상쇄값을 -16px로 낮춰 대응한다. */
	.detail-noti,
	.detail-noti-tall {
		/* Figma 텍스트 폭(355px)과 첫 줄 실측 텍스트 폭이 정확히 355px로
		   0px 여유 — 서브픽셀 반올림만으로도 다음 줄로 밀릴 수 있는
		   경계선상 값이라 +6px 여유(361px)를 둔다. .nowrap-mo(아래)로
		   "2022-45호."를 통째로 한 토큰 취급하므로, 여유가 없으면 이
		   토큰 전체가 밀려 <br class="br-mo"> 의도한 지점보다 한 줄
		   앞에서 개행되는 문제가 있었다(2026-09-02). */
		width: calc(100% + 40px);
		margin-left: -20px;
		margin-right: -20px;
		padding: 16px 4px 0; /* 원본 30px — "한 화면" 압축을 위해 축소 */
		font-size: 11px;
		letter-spacing: -0.11px;
		/* 브라우저가 "2022-45호."의 하이픈을 줄바꿈 기회로 취급해
		   "2022-" / "45호."로 의도치 않게 갈라지던 문제(폭 355px과 무관 —
		   경계선상이 아니어도 재현됨) — keep-all로 하이픈 지점 줄바꿈을
		   막고 <br class="br-mo">로 지정한 위치에서만 개행되게 한다. */
		word-break: keep-all;
	}
	.detail-float {
		right: 12px;
		bottom: 90px;
	}

	/* FAQ 하단 각주(Figma Frame 2117908868, x0 y1207 w335, 내부 px-[10px])
	   — .faq-noti 공용 규칙(padding 0 24px, 13px)을 그대로 쓰면 실제 폭이
	   343px(.faq 콘텐츠 폭 그대로, 24px 패딩이 방향을 좁히지 못함)가 되어
	   원본(315px, 11px)과 줄바꿈 지점이 완전히 어긋난다(6줄→8줄).
	   .faq 콘텐츠 폭(343px) 기준 좌우 14px씩 추가 패딩으로 315px를 맞추고
	   폰트/자간도 원본 값(11px, -0.11px)으로 정정. 마크업도 브랜드스토리
	   각주와 동일하게 6줄 전체를 <br/>로 강제 개행(자동 줄바꿈에 맡기면
	   컨테이너 폭 계산이 1px만 달라도 줄이 밀리는 문제가 반복됐음). */
	.faq-noti {
		padding: 0 14px;
		/* 11px가 정확한 Figma 스펙이지만 실측 결과 1번째 줄(영문 위주라
		   Pretendard 웹폰트 자간이 Figma보다 눈에 띄게 넓게 렌더링됨)이
		   컨테이너(315px)를 초과해 "of"만 다음 줄로 밀려나는 문제가
		   있었다. 선형 비례 예측(0.973배→10.7px)으로는 부족해(실측
		   322.75px, 여전히 초과) 실제 렌더링 폭을 반복 실측하며 10.3px로
		   확정 — 6줄 전부 원본과 동일한 줄바꿈이 되는 가장 큰 폰트 크기. */
		font-size: 10.3px;
		letter-spacing: -0.11px;
	}
}

/* 375px보다 좁은 화면(예: 320px)에서는 균등분배된 각 메뉴 항목 폭이 "궁금해요"
   등 4글자 텍스트가 14px로 줄바꿈 없이 들어가기엔 부족해 서로 겹친다 —
   폰트만 살짝 낮춰 같은 레이아웃(고정폭 없는 균등분배)을 유지한 채 해결. */
@media (max-width: 374.98px) {
	.gnb .nav-link {
		font-size: 12px;
		letter-spacing: -0.12px;
	}
}

/* .detail-inner(max-width:335px) + .detail 좌우 패딩(16px×2=32px) = 367px
   미만에서는 .detail-inner가 더 이상 335px로 clamp되지 않고 뷰포트를 꽉
   채운다 — 이 구간에서는 .detail-noti의 부모 여백이 .detail 패딩(16px)뿐
   이라, 375px 기준으로 만든 -20px 네거티브 마진(위 767.98px 블록)이 4px
   과하게 커져 뷰포트 밖으로 넘치며 가로 스크롤이 생겼다(320px 실측,
   2026-09-02). 이 구간만 실제 필요값(-16px)으로 낮춘다. */
@media (max-width: 366.98px) {
	.detail-noti,
	.detail-noti-tall {
		width: calc(100% + 32px);
		margin-left: -16px;
		margin-right: -16px;
	}
}