@charset "utf-8";
/* =========================================================================
 * 브랜드스토리 > JDH Skin & Aesthetic (www/brand/story.jsp 전용)
 * Figma node 593:3347 (1920w light)
 * 로드 순서: main_hero.css → jdh_sub.css → 이 파일
 *
 * 구성 : 히어로 → 성과(노화 본질치료) → 진단카드(양방/한방) + Precision × Origin
 *        → GROWTH STORY(면적 차트 + 4단계) → 병원센터 슬라이더
 *        ※ 간편예약/병원정보는 공통 /include/footer.jsp 가 담당(중복 작성 금지)
 * 선택자는 모두 .story 하위로 스코프 한정 → 다른 페이지 오염 없음
 * ========================================================================= */

/* headHtml·main_hero.css 에 없는 서체만 이 페이지에서 로드 */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Noto+Serif+KR:wght@400;500;600;700;800&display=swap');

.story {
	--st-green:       #3B5843;   /* 브랜드 그린 */
	--st-gold:        #C2A878;   /* 포인트 골드 */
	--st-gold-lite:   #D8BD8B;   /* 히어로 아이브로우 */
	--st-gold-deep:   #B0966A;   /* Precision 아이브로우 */
	--st-ink:         #1C1E1A;
	--st-body:        #5B615A;
	--st-line:        #E7E2D8;

	font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
	color: var(--st-ink);
	overflow-x: clip;
}
.story .story_inner        { max-width: 1320px; margin: 0 auto; padding: 0 40px; }
.story .story_inner--wide  { max-width: 1680px; }

/* =========================================================================
 * 1. 히어로 (Figma 593:3403) — 건물 전경 + 중앙 카피
 * ========================================================================= */
.story_hero {
	position: relative;
	height: 58.3vw;              /* Figma 1920×1119 비율 */
	min-height: 620px;
	max-height: 1119px;
	padding: 180px 40px 0;        /* 텍스트 상단 패딩을 180px로 조정 */
	display: flex;
	align-items: flex-start;     /* 상단 정렬로 변경 */
	justify-content: center;
	text-align: center;
	color: #fff;
	/* 2026-08-26 교체: /img/jd_brand_hero.jpg로 변경 */
	background: #23281F url('/img/jd_brand_hero.jpg') center center / cover no-repeat;
	overflow: hidden;
}
/* 스크림 — 새 배경이 거의 흰색에 가까워 흰 카피가 묻힌다.
 * 이전 건물 컷(어두운 하늘)에서는 중앙 0 으로 두고 상/하단만 눌렀지만,
 * 지금은 화면 전체를 고르게 눌러야 글자가 읽힌다. 값을 낮추면 카피가 사라진다. */
.story_hero::after {
	content: '';
	position: absolute;
	inset: 0;
	/* 2026-08-04 배경을 살짝 밝게 — 스크림을 8%p 정도 걷어냈다.
	 * 카피는 .story_hero__t1/t2 의 3중 text-shadow 가 받쳐 주므로 이 정도는 버틴다.
	 * 더 낮추면 흰 글자가 배경에 묻히기 시작한다. */
	background: linear-gradient(180deg,
		rgba(16,22,18,.44) 0%,
		rgba(16,22,18,.32) 22%,
		rgba(16,22,18,.28) 48%,
		rgba(16,22,18,.32) 76%,
		rgba(16,22,18,.42) 100%);
}
.story_hero__inner {
	position: relative;
	z-index: 2;
	max-width: 900px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
/* 카피 뒤에만 넓고 부드러운 음영 — 밝은 유리면 위에서도 글자가 뜨게.
 * 경계가 보이지 않도록 요소보다 크게 잡고 falloff 를 길게 둔다. */
.story_hero__inner::before {
	content: '';
	position: absolute;
	z-index: -1;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 190%;
	height: 260%;
	background: radial-gradient(closest-side ellipse,
		rgba(10,16,12,.42) 0%,
		rgba(10,16,12,.28) 42%,
		rgba(10,16,12,.10) 72%,
		rgba(10,16,12,0)   100%);
	pointer-events: none;
}
.story_hero__label {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
	font-size: 17px;
	line-height: 1.21;
	letter-spacing: 5.1px;
	text-transform: uppercase;
	color: #EFD5A4;                /* 밝은 하늘·유리면 대비 위해 골드를 한 톤 밝게 */
	/* 2026-08-04 — 3겹으로 쌓았던 그림자를 한 겹으로 줄였다.
	 * 여러 겹을 겹치면 글자 둘레에 검은 후광이 생겨 배경과 따로 논다.
	 * 대비는 .story_hero::after 스크림이 맡고, 여기는 번짐만 최소로 남긴다. */
	text-shadow: 0 1px 16px rgba(0,0,0,.55);
}
.story_hero__desc {
	margin: 8px 0 0;
	font-weight: 400;
	font-size: 17px;
	line-height: 1.8;
	color: rgba(255,255,255,.94);
	text-shadow: 0 1px 14px rgba(0,0,0,.5);
	word-break: keep-all;
}
.story_hero__title {
	margin: 30px 0 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.story_hero__t1,
.story_hero__t2 { text-shadow: 0 2px 20px rgba(0,0,0,.5); }
/* 얇은 웨이트(400) 라 밝은 유리면 위에서 가장 약함 → 번짐만 한 단계 넓게 */
.story_hero__t1 { text-shadow: 0 2px 24px rgba(0,0,0,.58); }
.story_hero__t1 {
	font-weight: 400;
	font-size: 40px;
	line-height: 1.24;
	letter-spacing: .8px;
}
.story_hero__t2 {
	font-weight: 800;
	/* 2026-08-20 사용자 지시로 52 → 62px (Figma 원본 52px 보다 크다 — 되돌리지 말 것).
	   이 페이지의 폰트 상한이 곧 이 값이다 → [[font-size-cap-hero-title]] */
	font-size: 62px;
	line-height: 1.24;
	letter-spacing: .52px;
}
.story_hero__t2 em { font-style: normal; color: #E6CDA4; }
/* 2026-08-20 — 문장 끝 'JDH' 는 텍스트가 아니라 **로고 이미지**다(사용자 지시).
 * 높이는 em 기준이라 t2 폰트 크기를 바꾸면 로고도 함께 따라온다(반응형 별도 지정 불필요).
 * 대문자 높이(≈.72em) 보다 살짝 크게 잡아 워드마크가 문장에 눌리지 않게 했다. */
.story_hero__logo {
	display: inline-block;
	height: .8em;
	width: auto;
	margin-left: .16em;
	vertical-align: -.02em;
	filter: drop-shadow(0 2px 18px rgba(0,0,0,.55));
}

/* 히어로 하단 세로선 — 다음 섹션으로 시선을 끌어내리는 장치(2026-08-20 사용자 지시).
 * ⚠ .story_hero 가 overflow:hidden 이라 선은 히어로 밖으로 나갈 수 없다.
 *   길이를 키우려면 height 를 올릴 것(밖으로 빼려면 히어로 overflow 부터 풀어야 한다).
 * 선 자체는 위→아래로 밝아지는 그라디언트, 그 위를 골드 광점이 흘러내린다. */
.story_hero__flow {
	position: absolute;
	left: 50%;
	bottom: 0;
	z-index: 3;
	width: 180px;                       /* 선 자체는 2px, 이 폭은 뒤에 깔리는 스크림 몫이다 */
	height: clamp(210px, 26vw, 360px);
	transform: translateX(-50%);
	overflow: hidden;
	pointer-events: none;
	/* ⚠ 흰 선만 두면 히어로 하단의 밝은 유리·바닥면에 그대로 묻힌다(2026-08-20 확인).
	 *   선 뒤에 아래로 짙어지는 세로 스크림을 깔아 대비를 만들고, 좌우는 mask 로 지운다.
	 *   mask 는 자식(선·광점)에도 적용되지만 둘 다 중앙이라 영향이 없다. */
	background: linear-gradient(180deg,
		rgba(12,18,14,0)   0%,
		rgba(12,18,14,.20) 38%,
		rgba(12,18,14,.48) 100%);
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%, #000 74%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 26%, #000 74%, transparent 100%);
}
/* 선 */
.story_hero__flow::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	width: 3px;
	height: 100%;
	transform: translateX(-50%);
	background: linear-gradient(180deg,
		rgba(255,255,255,0)   0%,
		rgba(255,255,255,.34) 12%,
		rgba(255,255,255,.85) 52%,
		#fff                  100%);
	box-shadow: 0 0 14px rgba(0,0,0,.45);
}
/* 선 위를 흘러내리는 광점 */
.story_hero__flow::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	width: 3px;
	height: 34%;
	border-radius: 3px;
	background: linear-gradient(180deg,
		rgba(246,231,203,0) 0%,
		#FFF3DA 66%,
		rgba(246,231,203,0) 100%);
	box-shadow: 0 0 12px rgba(255,236,199,.85);
	animation: story-flow 2.6s cubic-bezier(.42,0,.58,1) infinite;
}
@keyframes story-flow {
	0%   { transform: translate(-50%, -120%); opacity: 0; }
	18%  { opacity: 1; }
	82%  { opacity: 1; }
	100% { transform: translate(-50%, 300%);  opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.story_hero__flow::after { animation: none; opacity: .9; }
}

/* =========================================================================
 * 2. 성과 — 노화에 대한 본질적인 치료 (Figma 593:3370)
 *    상단 헤어라인 + 짧은 그린 마커로만 구획한 에디토리얼 4열 (레이아웃 유지)
 *    밝아진 히어로와 이어지도록 다크그린 → 라이트 베이스로 전환하고,
 *    포인트 컬러만 브랜드 그린(--st-green)을 쓴다.
 *    위(하늘·쿨톤) → 아래(크림·웜톤) 로 흐르게 배경을 잡아 다음 섹션과도 연결.
 * ========================================================================= */
.story_essential {
	position: relative;
	/* 2026-08-06 "섹션 크기 커져도 된다" — 카드형으로 바뀌면서 위아래 숨통을 넓혔다 */
	padding: 104px 0 96px;
	/* 아래 실크 섹션(평균 #DDC5AE)과 같은 웜 아이보리 계열이되, 거의 화이트에서 시작한다.
	 * 페이드로 뭉개지 않고 색 계열만 맞춰 경계는 또렷하게 둔다.
	 * ⚠ 하단(100%)만은 다음 실크 섹션과 이어지는 지점이라 웜 톤을 남겨 둔다 — 여기까지
	 *   화이트로 올리면 경계가 끊겨 보인다. */
	background: linear-gradient(180deg, #FFFEFC 0%, #FCF9F3 54%, #F6EFE1 100%);
	color: var(--st-ink);
	overflow: hidden;
}
.story_essential::before {   /* 좌상단 은은한 광원 — 웜 배경에 맞춰 골드 톤 */
	content: '';
	position: absolute;
	left: -12%;
	top: -62%;
	width: 900px;
	height: 900px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 70%);
	pointer-events: none;
}
.story_essential > .story_inner { position: relative; z-index: 1; }
/* 아이브로우 — 아래 GROWTH STORY 섹션(.story_growth__eyebrow)과 같은 규격.
 * 2026-08-06: 세로 연결선을 걷어내고(디자인 지적) 이것으로 가운데 축을 잡는다. */
.story_essential__eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin: 0;
}
.story_essential__eyebrow::before,
.story_essential__eyebrow::after {
	content: '';
	width: 52px;
	height: 1px;
}
.story_essential__eyebrow::before { background: linear-gradient(90deg, rgba(168,146,102,0), rgba(168,146,102,.75)); }
.story_essential__eyebrow::after  { background: linear-gradient(90deg, rgba(168,146,102,.75), rgba(168,146,102,0)); }
.story_essential__eyebrow span {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
	font-size: 17px;
	line-height: 1.44;
	letter-spacing: 4.6px;
	text-transform: uppercase;
	color: #A89266;
}
.story_essential__title {
	margin: 20px 0 0;
	text-align: center;
	font-weight: 700;
	font-size: 42px;
	line-height: 1.24;
	letter-spacing: -.6px;
	color: var(--st-green);
}
.story_essential__lead {
	margin: 20px 0 0;
	text-align: center;
	font-weight: 400;
	font-size: 18px;
	line-height: 1.78;
	letter-spacing: -.2px;
	color: #71786D;
	word-break: keep-all;
}
.story_essential__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin-top: 64px;
}
/* 독립 카드 — 표처럼 칸을 나누던 헤어라인·세로선 방식에서 2026-08-06 전환.
 * ⚠ 메인의 같은 카드(main_content.css .jdh_infra__card)는 아직 옛 형태다.
 *   메인까지 손볼 때 두 곳을 같이 맞출 것. */
.story_essential__card {
	position: relative;
	padding: 40px 30px 38px;
	text-align: center;
	background: linear-gradient(180deg, #FFFFFF 0%, #FFFDF9 100%);
	border: 1px solid rgba(120,105,72,.13);
	border-radius: 18px;
	box-shadow: 0 20px 44px -32px rgba(74,66,44,.42);
	overflow: hidden;
	transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s ease, border-color .45s ease;
}
/* 상단 골드 라인 — 기본은 짧게, hover 시 카드 폭 전체로 퍼진다 */
.story_essential__card::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	width: 42px;
	height: 3px;
	background: linear-gradient(90deg, rgba(168,146,102,.2) 0%, #A89266 50%, rgba(168,146,102,.2) 100%);
	transition: width .55s cubic-bezier(.22,.61,.36,1);
}
.story_essential__card:hover {
	transform: translateY(-6px);
	border-color: rgba(120,105,72,.24);
	box-shadow: 0 30px 56px -30px rgba(74,66,44,.5);
}
.story_essential__card:hover::before { width: 100%; }
/* 영문 키 — 네 카드가 서로 다른 축(공간/장비/진료/진단)이라는 표식 */
.story_essential__card-key {
	display: block;
	margin-bottom: 14px;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
	font-size: 14px;
	line-height: 1;
	letter-spacing: 3.4px;
	text-transform: uppercase;
	color: rgba(168,146,102,.9);
}
.story_essential__card-title {
	margin: 0 0 14px;
	font-weight: 800;
	font-size: 26px;
	line-height: 1.3;
	letter-spacing: -.5px;
	color: #24382C;
	transition: color .3s ease;
}
.story_essential__card:hover .story_essential__card-title { color: var(--st-green); }
/* 설명은 한 단계 물린다 — 18px/1.8 은 4열에서 제목과 무게가 비슷해 위계가 흐렸다 */
.story_essential__card-desc {
	margin: 0;
	font-weight: 400;
	font-size: 17px;
	line-height: 1.76;
	letter-spacing: -.2px;
	color: #6B7267;
	word-break: keep-all;
	transition: color .3s ease;
}
.story_essential__card:hover .story_essential__card-desc { color: #545B51; }
/* 각주는 가운데에서 오른쪽 끝으로 — 가운데 정렬이면 본문처럼 읽혀 시선을 뺏는다
 * ※ 2026-08-04 현재 마크업에서 이 요소는 빠져 있다(근거로 삼을 수치 카드가 없어졌다).
 *   수치 카드를 되살릴 때 함께 쓰라고 규칙만 남겨 둔다. */
.story_essential__note {
	margin: 40px 0 0;
	text-align: right;
	font-size: 12.5px;
	line-height: 1.4;
	letter-spacing: -.1px;
	color: #9DA69B;
}

/* =========================================================================
 * 3. 크림 섹션 — Precision × Origin (Figma 593:3431 / 593:3445)
 *    ※ 모델 컷 하단은 아래 GROWTH 섹션 경계에 맞닿게 두어 '잘린 느낌'을 없앤다
 *      → 이 섹션의 padding-bottom 은 0, 우측(본문) 컬럼만 자체 하단 여백을 갖는다
 * ========================================================================= */
/* 아이보리 실크 드레이프 배경(Figma 443:1340) — 좌측 소용돌이가 모델 컷 뒤에 오고,
 * 카피·영상이 놓이는 우측은 천의 평평한 밝은 면이 받는다. 색은 폴백. */
.story_light {
	position: relative;
	padding: 150px 0 0;
	background: #FBFAF3 url('/img/brand/story/precision_bg.jpg') center top / cover no-repeat;
	overflow: hidden;
}
/* 우측 카피 영역 가독성용 화이트 스크림 — 천의 결은 남기고 대비만 확보한다 */
.story_light::before {
	content: '';
	position: absolute;
	inset: 0;
	/* 상단 페이드는 두지 않는다 — 위 성과 섹션을 같은 웜 아이보리 계열로 맞춰
	 * 색으로 이어지게 하고, 경계는 또렷한 직선으로 남긴다(2026-07-31 사용자 지시). */
	background:
		radial-gradient(64% 52% at 68% 22%, rgba(255,253,247,.62) 0%, rgba(255,253,247,0) 100%),
		/* 천 전체를 살짝 연하게 눌러 카피가 더 앞으로 나오게 한다 */
		linear-gradient(rgba(255,253,247,.30), rgba(255,253,247,.30));
	pointer-events: none;
}
.story_light > .story_inner { position: relative; z-index: 1; }

/* ----- Precision × Origin ----- */
/* 정렬 축을 하나로 —— 텍스트(중앙정렬)와 영상(컬럼 전폭)이 따로 놀던 구조를
 * 좌측 정렬 한 축으로 모으고, 영상 카드를 모델 쪽으로 당겨 두 요소를 겹친다. */
.story_precision__grid {
	display: grid;
	grid-template-columns: 0.82fr 1.18fr;
	gap: 30px;
	align-items: end;
}
.story_precision__model { position: relative; align-self: end; }
/* 모델 뒤 원형 아웃라인은 제거(2026-07-31) — 배경이 실크 사진으로 바뀌면서
 * 천의 곡선과 원호가 겹쳐 어수선해진다. Figma 443:1340 시안에도 없다. */
/* 모델 컷은 배경 제거된 투명 PNG(Figma 원본 컷아웃) → 블렌드 모드 불필요 */
.story_precision__model img {
	display: block;
	width: 100%;
	height: auto;
}
/* 모델은 섹션 하단에 맞닿으므로, 하단 여백은 본문 컬럼에서만 확보.
 * 컬럼째 모델 쪽으로 당겨 카피와 영상이 같은 좌측 축을 쓰면서 모델과 겹치게 한다. */
.story_precision__body {
	position: relative;
	z-index: 2;
	margin-left: -96px;
	padding-bottom: 96px;
}
/* 영문 아이브로우 공통 규격 — Cormorant Garamond 700 / 17px / 4.6px / UPPER (전 페이지 동일, 2026-08-03) */
.story_precision__eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
	font-size: 17px;
	line-height: 1.44;
	letter-spacing: 4.6px;
	text-transform: uppercase;
	color: var(--st-gold-deep);
}
.story_precision__eyebrow::before {
	content: '';
	width: 30px;
	height: 1px;
	background: var(--st-gold);
	flex: 0 0 auto;
}
.story_precision__title {
	margin: 16px 0 0;
	font-weight: 700;
	font-size: 40px;
	line-height: 1.18;
	letter-spacing: -.32px;
	color: var(--st-ink);
	word-break: keep-all;
}
/* 2026-08-05 가독성 보강 — 16px/1.95 는 40px 타이틀 옆에서 너무 잘아 보였다.
   본문은 서브페이지 타이포 스케일의 body 값(18px)으로 올리고, 글자가 커진 만큼
   행간은 1.95 → 1.8 로 줄여 문단이 흩어지지 않게 한다. 폭도 아래 3열(640)에 맞춘다. */
.story_precision__desc {
	margin: 20px 0 0;
	max-width: 720px;
	font-size: 18px;
	line-height: 1.8;
	color: var(--st-body);
	word-break: keep-all;
}
/* ----- 진단 축 3열 -----
 * 카피와 영상 사이가 빈 여백뿐이라 섹션이 헐거웠다. 본문에 뭉쳐 있던 진단 방식을
 * 3열로 끊어 정보 밀도를 만들고, 아래 영상 카드와 같은 좌측 축에 세운다. */
.story_precision__keys {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0 26px;
	/* 640 → 720. 설명 글자를 15px 로 키우면서 "망(望)·문(聞)·문(問)·절(切)" 이 열 폭을 넘겨
	   "절(切)" 만 다음 줄로 떨어졌다. 위 desc 와 같은 폭이라 좌우 축도 그대로 맞는다. */
	max-width: 720px;
	margin: 34px 0 0;
	padding: 22px 0 0;
	list-style: none;
	border-top: 1px solid rgba(176,150,106,.34);
}
.story_precision__keys li {
	position: relative;
	padding-left: 14px;
	word-break: keep-all;
}
/* 항목 앞 골드 점 — 아이콘을 쓰면 톤이 무거워져 최소 표식만 둔다 */
.story_precision__keys li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 9px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--st-gold);
}
.story_precision__keys b {
	display: block;
	font-weight: 700;
	font-size: 17px;
	line-height: 1.4;
	letter-spacing: -.3px;
	color: var(--st-ink);
}
/* 13.5px + 연한 회갈(#8A8271)은 크기·대비가 둘 다 모자라 읽히지 않았다 →
   15px + 한 단계 진한 색. 스케일 하한(13px)은 캡션 전용으로 남긴다. */
.story_precision__keys span {
	display: block;
	margin-top: 6px;
	font-size: 15px;
	line-height: 1.6;
	color: #736B5C;
}

/* ----- 영상 카드 ----- */
.story_precision__media {
	position: relative;
	z-index: 2;
	margin: 44px 0 0;
}
/* 골드 오프셋 액자(.story_precision__frame)는 2026-08-04 제거 — 카드 밖으로 어긋난 선이
 * 배경 실크 결과 겹쳐 지저분했고, 지금 톤에서는 장식이 낡아 보인다. 되살리지 말 것. */
.story_precision__video {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	border-radius: 8px;      /* 이미지 박스 공통 radius */
	overflow: hidden;
	background: #2E3D2C;
	box-shadow: 0 26px 54px rgba(44,58,43,.20);
}
/* 2026-08-10: 정지 이미지 → <video> 로 교체. img 규칙도 남겨 둔다(영상 미지원 폴백). */
.story_precision__video img,
.story_precision__video > video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .7s cubic-bezier(.22,.61,.36,1);
}
.story_precision__video:hover > video { transform: scale(1.03); }
/* 하단 큐가 유리 스트립으로 바뀌면서 틴트는 아주 옅게만 남긴다 — 사진이 더 살아난다 */
.story_precision__video::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(26,36,26,.06) 0%, rgba(26,36,26,.04) 52%, rgba(22,32,23,.30) 100%);
}
/* 재생 큐 — 카드 하단 전폭을 쓰는 유리 스트립.
 * 사진 위에 작게 떠 있던 이전 방식보다 눌러야 할 대상이 분명해지고,
 * 라벨·보조문구·유도문구를 한 줄에 담을 수 있어 정보가 정리된다. */
.story_precision__cue {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 26px;
	background: rgba(24,33,25,.42);
	-webkit-backdrop-filter: blur(14px) saturate(1.25);
	backdrop-filter: blur(14px) saturate(1.25);
	border-top: 1px solid rgba(255,255,255,.16);
	transition: background .35s ease;
}
/* 우측 유도 문구 — 화살표는 ::after 로 붙여 hover 시 살짝 밀린다 */
.story_precision__cue-go {
	margin-left: auto;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -.2px;
	color: rgba(255,255,255,.86);
}
.story_precision__cue-go::after {
	content: '';
	width: 8px;
	height: 8px;
	border-top: 1.6px solid currentColor;
	border-right: 1.6px solid currentColor;
	transform: rotate(45deg);
	transition: transform .3s ease;
}
.story_precision__video:hover .story_precision__cue { background: rgba(24,33,25,.56); }
.story_precision__video:hover .story_precision__cue-go::after { transform: rotate(45deg) translate(3px, -3px); }
.story_precision__play {
	position: relative;
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(255,255,255,.94);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .3s ease, background .3s ease;
}
.story_precision__play::before {
	content: '';
	display: block;
	width: 0;
	height: 0;
	margin-left: 4px;
	border-left: 14px solid #2C3A2B;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
}
/* 재생 버튼에서 퍼지는 옅은 링 */
.story_precision__play::after {
	content: '';
	position: absolute;
	inset: -1px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,.7);
	animation: storyPlayPulse 2.6s ease-out infinite;
}
@keyframes storyPlayPulse {
	0%   { transform: scale(1);    opacity: .75; }
	70%  { transform: scale(1.45); opacity: 0; }
	100% { transform: scale(1.45); opacity: 0; }
}
.story_precision__cue-txt { display: block; color: #fff; }
.story_precision__cue-txt b {
	display: block;
	font-weight: 600;
	font-size: 17px;
	letter-spacing: -.3px;
}
.story_precision__cue-txt i {
	display: block;
	margin-top: 3px;
	font-style: normal;
	font-size: 13px;
	color: rgba(255,255,255,.72);
}
.story_precision__video:hover img { transform: scale(1.045); }
.story_precision__video:hover .story_precision__play { transform: scale(1.08); background: #fff; }

/* =========================================================================
 * 4. GROWTH STORY (Figma 593:3451) — 면적 차트 + 4단계 타임라인
 * ========================================================================= */
.story_growth {
	position: relative;
	/* 2026-08-06 "세로로 너무 길다" — 패딩·차트 높이·타임라인 간격을 함께 줄였다.
	 * 한 곳만 줄이면 비율이 무너지니 아래 --st-bd-h / .story_steps margin-top 과 같이 볼 것. */
	padding: 72px 0 78px;
	background: linear-gradient(170deg, #466345 0%, #1E2C1E 40%, #141D15 76%, #101710 100%);
	color: #F6F8F3;
	overflow: hidden;
}
.story_growth::before,
.story_growth::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}
.story_growth::before {
	width: 1200px;
	height: 1200px;
	left: 16%;
	top: -680px;
	background: radial-gradient(circle, rgba(216,187,138,.09) 0%, rgba(216,187,138,0) 66%);
}
.story_growth::after {
	width: 1100px;
	height: 1100px;
	right: -8%;
	bottom: -460px;
	background: radial-gradient(circle, rgba(140,190,155,.08) 0%, rgba(140,190,155,0) 68%);
}
.story_growth > .story_inner { position: relative; z-index: 1; }

.story_growth__eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
}
.story_growth__eyebrow::before,
.story_growth__eyebrow::after {
	content: '';
	width: 64px;
	height: 1px;
}
.story_growth__eyebrow::before { background: linear-gradient(90deg, rgba(226,198,155,0), rgba(226,198,155,.8)); }
.story_growth__eyebrow::after  { background: linear-gradient(90deg, rgba(226,198,155,.8), rgba(226,198,155,0)); }
.story_growth__eyebrow span {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
	font-size: 17px;
	line-height: 1.44;
	letter-spacing: 4.6px;
	text-transform: uppercase;
	color: #D8BB8A;
}
.story_growth__title {
	margin: 22px 0 0;
	text-align: center;
	font-family: 'Noto Sans KR', sans-serif;
	font-weight: 700;
	/* 히어로 타이틀(52px)보다 커서 위계가 뒤집혔던 것을 낮춘다 — 페이지 내 최대 크기는 히어로가 갖는다 */
	font-size: 52px;
	line-height: 1.34;
	letter-spacing: -2px;
	color: #F6F8F3;
	word-break: keep-all;
}
.story_growth__title em { font-style: normal; color: #E6CDA4; }
.story_growth__desc {
	margin: 16px 0 0;
	text-align: center;
	font-family: 'Noto Sans KR', sans-serif;
	font-weight: 500;
	font-size: 22px;
	line-height: 1.7;
	letter-spacing: -.36px;
	color: rgba(236,242,232,.62);
	word-break: keep-all;
}

/* ----- 4-1. FLOOR AREA — 건물이 자라나는 세로 차트 -----
 * 2026-08-06 교체. 이전에는 가로 막대 2개(100평 / 300평)였는데
 * "그래프보다 직관적인, 작은 건물에서 빌딩으로 발전하는 형태 / 가로보다 세로로" 요청을 받았다.
 * 구조 : head(제목/단위) → list(4단계 건물) → note
 *        네 건물이 같은 지면선 위에 서고, 높이가 곧 평수다.
 * ⚠ 높이 = --h ÷ --st-bd-max × --st-bd-h. --h(평수)는 마크업 style 에 있다.
 *   평수를 바꾸면 마크업의 --h 와 data-count, 그리고 아래 타임라인(.story_step__area)을 함께 고칠 것. */
.story_bldg {
	--st-bd-max: 300;      /* 기준(가장 큰) 평수 */
	--st-bd-h: 268px;      /* 그 평수일 때의 건물 높이 */
	/* 지면선의 바닥 오프셋 = **건물 밑단부터 리스트 바닥까지의 거리**.
	   ⚠ 2026-08-10: 88px 이었는데 실제 건물 밑단은 62px 지점이라 선이 건물을 26px 관통했다
	     (사용자 지적 "가로선이 그래프에 안 겹치게 딱 맞아 보이게"). 실측해서 맞춘 값이다.
	   ⚠ 이 값은 지면선 아래 라벨(층 표기 + 한 줄 설명)의 높이와 같아야 한다.
	     설명 문구가 **두 줄로 늘어나면 라벨이 높아져 선이 다시 어긋난다** — 문구를 고치면
	     이 값(반응형 4곳 포함)을 다시 실측할 것. 재는 법: 리스트 bottom − 건물 bottom. */
	--st-bd-base: 62px;
	/* 아래 셋은 지면선 길이 계산에 그대로 들어간다(::after 참고).
	   반응형에서 값을 바꿀 때 list gap / tower max-width 를 직접 쓰지 말고 이 변수를 고칠 것 —
	   따로 놀면 지면선이 건물 끝에 안 맞는다. */
	--st-bd-gap: 30px;     /* 건물 사이 간격 */
	--st-bd-tw: 150px;     /* 일반 건물 최대 폭 */
	--st-bd-tw-on: 168px;  /* 강조(마지막) 건물 최대 폭 */
	max-width: 1270px;
	margin: 48px auto 0;
}
/* ⚠ 좌/우 라벨에 flex:1 을 주는 이유 — 가운데 "단, 1년"(2026-08-24 추가)을 **정확히 중앙**에 세우기 위해서다.
   space-between 만으로는 좌우 텍스트 길이가 달라 가운데 항목이 한쪽으로 밀린다.
   absolute 중앙 정렬은 쓰지 않았다 — 가운데 문구가 좌우 라벨보다 커서 머리 높이를 밀어내야 하는데,
   빼내면 위 desc 와 겹친다. */
.story_bldg__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	padding-bottom: 21px;
	border-bottom: 1px solid rgba(226,198,155,.22);
}
.story_bldg__head-tit {
	flex: 1 1 0;
	font-family: 'Noto Serif KR', serif;
	font-weight: 800;
	font-size: 14px;
	line-height: 1.44;
	letter-spacing: 4.5px;
	color: rgba(226,198,155,.85);
}
/* 가운데 강조 — 확장 3번이 걸린 기간.
   ⚠ 폰트는 바로 위 .story_growth__desc("작은 4층 50평에서 시작해…")와 **같은 계열**이어야 한다
     (2026-08-24 사용자 지시). 두 문장이 한 호흡으로 읽히는 자리라 서체가 갈리면 따로 논다.
     → Noto Sans KR 로 통일하고, 굵기(700)와 크기(desc 22 → 36)로만 강조한다. 세리프로 되돌리지 말 것.
   ⚠ 색은 흰 계열 유지 — 골드는 이 차트에서 최종 300평 자리의 색이라 경합한다.
   ⚠ 크기 상한은 섹션 타이틀(52px) — 그보다 키우면 위계가 뒤집힌다.
   ⚠ align-self:flex-start + 음수 margin-top 은 **desc 쪽으로 끌어올리기 위한 것**(2026-08-24 사용자 지시:
     "위의 내용과 이어지는 느낌"). 머리 줄의 기본 정렬은 flex-end 라 그대로 두면 desc 와 48px 떨어져
     차트 축 라벨처럼 읽힌다. 음수 마진만큼 머리 줄 높이도 함께 줄어 차트가 위로 따라 올라온다.
     ⚠ 좌우 라벨과 밑선이 어긋나는 건 의도다 — 이 문구는 축 라벨이 아니라 위 문장의 연장이다. */
.story_bldg__head-term {
	flex: 0 0 auto;
	align-self: flex-start;
	margin-top: -30px;
	font-family: 'Noto Sans KR', sans-serif;
	font-weight: 700;
	font-size: 36px;
	line-height: 1.2;
	letter-spacing: -1px;
	color: #F6F8F3;
}
.story_bldg__head-unit {
	flex: 1 1 0;
	text-align: right;
	font-family: 'Noto Sans KR', sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: .32px;
	color: rgba(236,242,232,.42);
}

.story_bldg__list {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0 var(--st-bd-gap);
	align-items: end;      /* 바닥 정렬 — 네 건물이 한 지면에 선다 */
	margin: 0;
	padding: 44px 0 0;
	list-style: none;
}
/* 지면선 — 건물 밑단과 라벨 사이. bottom 값은 --st-bd-base 와 짝이다.
 * ⚠ 2026-08-10: 예전에는 left/right:0 (리스트 폭 전체) + 양 끝 8% 페이드였는데,
 *   선이 첫/마지막 건물 바깥으로 삐져나온 채 흐려져 "그래프 끝에 안 붙는다"는 지적을 받았다.
 *   지금은 선의 양 끝을 **첫 건물의 왼쪽 모서리 ~ 마지막 건물의 오른쪽 모서리**에 맞춘다.
 *   건물은 컬럼 가운데 정렬이므로 남는 여백 = (컬럼폭 - 건물폭) / 2 이고, 좌우 건물 폭이
 *   달라서(150 vs 168) left 와 right 값도 다르다. 컬럼이 건물보다 좁아지는 화면에서는
 *   계산이 음수가 되므로 max(0px, …) 로 막는다. */
.story_bldg__list::after {
	--st-bd-col: calc((100% - var(--st-bd-gap) * 3) / 4);
	content: '';
	position: absolute;
	left:  max(0px, calc((var(--st-bd-col) - var(--st-bd-tw))    / 2));
	right: max(0px, calc((var(--st-bd-col) - var(--st-bd-tw-on)) / 2));
	bottom: var(--st-bd-base);
	height: 1px;
	background: rgba(226,198,155,.45);
}
.story_bldg__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	text-align: center;
}
/* 건물 — 층 구분선을 반복해 높이가 곧 규모로 읽히게 한다.
 * position:relative 는 --on 의 옥상 빛기둥(::before)이 기준으로 삼는다. */
.story_bldg__tower {
	position: relative;
	display: block;
	width: 100%;
	max-width: var(--st-bd-tw);
	height: calc(var(--h) / var(--st-bd-max) * var(--st-bd-h));
	min-height: 44px;
	margin-top: 16px;
	border: 1px solid rgba(198,221,203,.3);
	border-bottom: 0;
	border-radius: 5px 5px 0 0;
	/* ⚠ 2026-08-11 사용자 지시로 26px 간격의 **층 구분선(repeating-linear-gradient)을 제거**했다.
	   면 그라데이션만 남긴다 — 얇은 가로선을 되살리지 말 것(아래 --on 상태도 같다). */
	background: linear-gradient(180deg, rgba(198,221,203,.15) 0%, rgba(198,221,203,.04) 100%);
	transform-origin: bottom center;
	transition: transform 1.05s cubic-bezier(.16,.84,.32,1);
}
/* 마지막 = 현재 규모. 다크 배경에서 이 하나만 '빛나는 빌딩'으로 읽혀야 한다(2026-08-06 요청).
 * 면을 밝히는 것만으로는 부족해서 ①골드 면 ②옥상 하이라이트 ③바깥 글로우 ④숨쉬는 애니메이션
 * 네 가지를 겹쳤다. 값을 낮출 때는 넷을 같이 볼 것 — 하나만 빼면 밋밋해진다. */
.story_bldg__item--on .story_bldg__tower {
	max-width: var(--st-bd-tw-on);
	border-color: rgba(240,220,184,.85);
	background: linear-gradient(180deg, rgba(246,225,180,.62) 0%, rgba(230,205,164,.34) 46%, rgba(214,182,128,.2) 100%);
	box-shadow:
		0 -18px 64px -10px rgba(240,214,160,.6),      /* 위로 퍼지는 빛 */
		0 0 90px -20px rgba(240,214,160,.55),          /* 사방 글로우 */
		inset 0 1px 0 rgba(255,250,235,.75);           /* 옥상 하이라이트 */
	animation: storyTowerGlow 3.6s ease-in-out infinite;
}
/* 빛이 숨쉬듯 미세하게 오르내린다 — 과하면 깜빡임처럼 보이므로 폭을 좁게 둔다 */
@keyframes storyTowerGlow {
	0%, 100% { box-shadow: 0 -18px 64px -10px rgba(240,214,160,.6),  0 0 90px -20px rgba(240,214,160,.55), inset 0 1px 0 rgba(255,250,235,.75); }
	50%      { box-shadow: 0 -22px 78px -8px  rgba(240,214,160,.78), 0 0 112px -16px rgba(240,214,160,.7),  inset 0 1px 0 rgba(255,250,235,.9); }
}
@media (prefers-reduced-motion: reduce) {
	.story_bldg__item--on .story_bldg__tower { animation: none; }
}
/* 옥상 위로 솟는 빛기둥 — 빌딩이 발광하는 인상을 만든다 */
.story_bldg__item--on .story_bldg__tower::before {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 100%;
	width: 70%;
	height: 130px;
	transform: translateX(-50%);
	background: linear-gradient(180deg, rgba(240,214,160,0) 0%, rgba(240,214,160,.16) 60%, rgba(240,214,160,.34) 100%);
	filter: blur(14px);
	pointer-events: none;
}
.story_bldg__val {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 2px;
	color: #E8F1E9;
}
.story_bldg__val b {
	font-family: 'Noto Serif KR', serif;
	font-weight: 600;
	font-size: 34px;
	line-height: 1;
	letter-spacing: -.34px;
	font-variant-numeric: tabular-nums;   /* 카운트업 중 자릿수가 흔들리지 않게 */
}
.story_bldg__val i {
	font-family: 'Noto Sans KR', sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 1;
}
.story_bldg__item--on .story_bldg__val {
	color: #FFFBF2;
	text-shadow: 0 0 18px rgba(246,225,180,.55), 0 0 46px rgba(240,214,160,.4);
}
.story_bldg__item--on .story_bldg__val b { font-size: 52px; letter-spacing: -.78px; }
.story_bldg__item--on .story_bldg__val i { font-size: 21px; }
/* ×6 배지 — 첫 규모 대비 몇 배인지가 이 섹션의 핵심 수치다 */
.story_bldg__badge {
	display: inline-flex;
	align-items: baseline;
	gap: 3px;
	margin-bottom: 12px;
	padding: 5px 15px;
	border: 1px solid rgba(230,205,164,.45);
	border-radius: 999px;
	background: rgba(230,205,164,.07);
	font-family: 'Noto Serif KR', serif;
}
.story_bldg__badge i { font-style: normal; font-weight: 400; font-size: 14px; line-height: 1; color: rgba(232,209,175,.75); }
.story_bldg__badge b { font-weight: 600; font-size: 21px; line-height: 1; color: #E6CDA4; }
/* 지면선 아래 — 층 표기 + 한 줄 설명. 높이를 --st-bd-base 로 고정해 지면선과 어긋나지 않게 한다. */
.story_bldg__floor {
	display: block;
	margin-top: 18px;
	font-family: 'Noto Serif KR', serif;
	font-weight: 800;
	font-size: 13px;
	line-height: 1;
	letter-spacing: 3.2px;
	color: rgba(226,198,155,.85);
}
.story_bldg__item--on .story_bldg__floor { color: #F0DCB8; }
.story_bldg__cap {
	display: block;
	margin-top: 9px;
	font-family: 'Noto Sans KR', sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.5;
	letter-spacing: -.2px;
	color: rgba(236,242,232,.62);
	word-break: keep-all;
}
.story_bldg__item--on .story_bldg__cap { font-weight: 500; color: rgba(246,248,243,.9); }

/* ⚠ 2026-08-24 — 이 캡션은 사용자 요청으로 **마크업에서 빠졌다**(brand/story.jsp).
   규칙만 남겨 둔 것이니 되살릴 때는 JSP 의 <p class="story_bldg__note"> 를 되돌리면 된다. */
.story_bldg__note {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 30px 0 0;
	font-family: 'Noto Sans KR', sans-serif;
	font-weight: 300;
	font-size: 18px;
	line-height: 1.4;
	letter-spacing: -.18px;
	color: rgba(236,242,232,.55);
}
.story_bldg__note::before {
	content: '';
	flex: none;
	width: 26px;
	height: 1px;
	background: rgba(226,198,155,.4);
}

/* 진입 연출 — 건물이 지면에서 위로 자라고, 수치가 뒤따라 뜬다.
 * 초기 숨김은 html.jdh-anim(공통 리빌 스크립트가 붙임) 안에서만 건다.
 * 스크립트가 돌지 않으면 처음부터 완성 상태라 콘텐츠가 사라질 일이 없다. */
.story_bldg__val,
.story_bldg__badge { transition: opacity .5s ease .78s; }
.story_bldg__item:nth-child(2) .story_bldg__tower { transition-delay: .12s; }
.story_bldg__item:nth-child(3) .story_bldg__tower { transition-delay: .24s; }
.story_bldg__item:nth-child(4) .story_bldg__tower { transition-delay: .36s; }

html.jdh-anim .story_bldg:not(.is-in) .story_bldg__tower { transform: scaleY(0); }
html.jdh-anim .story_bldg:not(.is-in) .story_bldg__val,
html.jdh-anim .story_bldg:not(.is-in) .story_bldg__badge { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
	.story_bldg__tower,
	.story_bldg__val,
	.story_bldg__badge { transition: none; }
	html.jdh-anim .story_bldg:not(.is-in) .story_bldg__tower { transform: none; }
	html.jdh-anim .story_bldg:not(.is-in) .story_bldg__val,
	html.jdh-anim .story_bldg:not(.is-in) .story_bldg__badge { opacity: 1; }
}
/* ----- 4-2. 4단계 타임라인 ----- */
.story_steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 56px;
	margin-top: 58px;
	padding-top: 16px;
}
.story_steps::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 72px;
	height: 1px;
	background: linear-gradient(90deg, rgba(226,198,155,.1) 0%, rgba(226,198,155,.42) 12%, rgba(226,198,155,.42) 88%, rgba(226,198,155,.1) 100%);
}
.story_step { position: relative; }
.story_step__num {
	display: block;
	height: 36px;
	font-family: 'Noto Serif KR', serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.44;
	letter-spacing: 3.8px;
	color: rgba(226,198,155,.85);
}
.story_step__dot {
	display: block;
	height: 48px;
	padding: 14px 0 21px;
}
.story_step__dot::before {
	content: '';
	display: block;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: #E6CDA4;
	box-shadow: 0 0 22px rgba(226,198,155,.5), 0 0 0 6px rgba(226,198,155,.14);
	animation: storyDotPulse 2.8s ease-in-out infinite;
}
/* 도트 반짝임 — 후광이 숨쉬듯 번지고 점이 살짝 커진다 */
@keyframes storyDotPulse {
	0%, 100% { box-shadow: 0 0 18px rgba(226,198,155,.42), 0 0 0 5px rgba(226,198,155,.16); transform: scale(1); }
	50%      { box-shadow: 0 0 34px rgba(226,198,155,.9),  0 0 0 13px rgba(226,198,155,.05); transform: scale(1.16); }
}
/* 순차 점등 느낌 */
.story_step:nth-child(1) .story_step__dot::before { animation-delay: 0s; }
.story_step:nth-child(2) .story_step__dot::before { animation-delay: .35s; }
.story_step:nth-child(3) .story_step__dot::before { animation-delay: .7s; }
.story_step:nth-child(4) .story_step__dot::before { animation-delay: 1.05s; }
/* 평수 뱃지(2026-08-06 추가) — 위 Floor Area 차트와 같은 값이다.
 * 제목 위에 두어 "몇 평이었는지"가 먼저 읽히게 한다. */
.story_step__area {
	display: inline-block;
	margin: 0 0 12px;
	padding: 4px 12px;
	border: 1px solid rgba(226,198,155,.32);
	border-radius: 999px;
	font-family: 'Noto Sans KR', sans-serif;
	font-weight: 500;
	font-size: 14px;
	line-height: 1.4;
	letter-spacing: -.2px;
	color: rgba(232,209,175,.9);
	white-space: nowrap;
}
.story_step--on .story_step__area {
	border-color: rgba(230,205,164,.6);
	background: rgba(230,205,164,.1);
	color: #F0DCB8;
}
.story_step__title {
	margin: 0;
	font-family: 'Noto Sans KR', sans-serif;
	font-weight: 700;
	font-size: 24px;
	line-height: 1.75;
	letter-spacing: -.9px;
	color: #F6F8F3;
	word-break: keep-all;
}
.story_step__desc {
	margin: 16px 0 0;
	font-family: 'Noto Sans KR', sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.85;
	color: rgba(236,242,232,.75);
	word-break: keep-all;
}
/* 04 = 현재 단계 강조 */
.story_step--on .story_step__num   { color: #F0DCB8; }
.story_step--on .story_step__title { color: #FDF7EA; }
.story_step--on .story_step__dot   { padding: 11px 0 18px; }
.story_step--on .story_step__dot::before {
	width: 19px;
	height: 19px;
	background: #F6EAD0;
	box-shadow: 0 0 30px rgba(226,198,155,.75), 0 0 0 8px rgba(226,198,155,.2);
	animation: storyDotPulseOn 2.4s ease-in-out infinite;
}
@keyframes storyDotPulseOn {
	0%, 100% { box-shadow: 0 0 26px rgba(226,198,155,.62), 0 0 0 7px rgba(226,198,155,.2);  transform: scale(1); }
	50%      { box-shadow: 0 0 48px rgba(246,234,208,1),   0 0 0 18px rgba(226,198,155,.07); transform: scale(1.18); }
}
/* 애니메이션 최소화 설정 존중 */
@media (prefers-reduced-motion: reduce) {
	.story_step__dot::before,
	.story_step--on .story_step__dot::before,
	.story_precision__play::after { animation: none; }
	.story_precision__video:hover img { transform: none; }
}

/* =========================================================================
 * 5. 병원센터 슬라이더 (Figma 593:3561) — Swiper 풀블리드 캐러셀
 * ========================================================================= */
.story_centers {
	padding: 100px 0 110px;
	/* 단색 크림 대신 위에서 아래로 아주 옅게 떨어지는 결 — 카드가 면 위에 떠 보이게 한다 */
	background:
		radial-gradient(120% 70% at 50% 0%, #FFFFFF 0%, rgba(255,255,255,0) 62%),
		linear-gradient(180deg, #FBFAF7 0%, #F4F1EA 100%);
	overflow-x: clip;
}
/* 헤더 — 라벨 + 타이틀.
 * 우측에 슬라이드 카운터(01 — 04)가 있었으나 2026-08-04 사용자 지시로 제거했다
 * (같은 정보를 슬라이더 하단 페이저가 준다). 마크업·스크립트도 함께 걷어냈다. */
.story_centers__head {
	margin: 0 0 46px;
}
.story_centers__eyebrow {
	display: block;
	margin-bottom: 12px;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
	font-size: 17px;
	letter-spacing: 4.6px;
	text-transform: uppercase;
	color: var(--st-gold);
}
.story_centers__title {
	margin: 0;
	font-weight: 700;
	font-size: 40px;
	line-height: 1.2;
	letter-spacing: -.8px;
	color: var(--st-ink);
}
/* 풀블리드: 슬라이더만 화면 폭까지 확장 (transform 미사용 → .jdh-up 충돌 방지) */
.story_centers__slider {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.story_centers__swiper {
	overflow: hidden;
	padding: 24px 0 2px;
}
/* ⚠ 슬라이드 가로폭 — 26% → 31% 로 넓혔다(2026-08-03 사용자 지시).
 *   이 값은 아래 aspect-ratio(가로:세로)와 함께 봐야 한다. 폭만 키우면 세로도 같이 길어지므로,
 *   비율을 4/5 → 4/4.4 로 함께 눕혀 카드가 지나치게 세로로 자라지 않게 맞췄다. */
.story_centers__slide {
	position: relative;
	width: 31%;
	max-width: 560px;
	height: auto;
	border-radius: 8px;      /* 이미지 박스 공통 radius */
	overflow: hidden;
	background: #EFEAE1;
	box-shadow: 0 6px 18px rgba(34,39,31,.10);
	transition: transform .7s cubic-bezier(.22,.61,.36,1), box-shadow .7s ease, filter .7s ease;
}
/* 양옆(비활성) 처리 — Swiper 기본 .swiper-slide transform 을 이기도록 선택자 강화.
 * ⚠ 이전에는 scale(.752) + opacity(.7) 로 크게 줄이고 흐리게 했는데, 카드 크기 차가 과하고
 *   반투명이라 배경이 비쳐 사진이 탁해 보였다. 축소를 줄이고(.88) 불투명은 유지한 채
 *   채도·명도만 낮춰 위계를 만든다 — 사진이 선명하게 남아 훨씬 정돈돼 보인다. */
.story_centers__swiper .swiper-slide.story_centers__slide {
	transform: scale(.88);
	filter: saturate(.62) brightness(.97);
}
.story_centers__swiper .swiper-slide-active.story_centers__slide {
	transform: scale(1);
	filter: none;
	box-shadow: 0 26px 60px rgba(34,39,31,.24);
}
/* 옆 사진을 누르면 가운데로 온다(slideToClickedSlide) — 누를 수 있다는 걸 커서로도 알린다 */
.story_centers__swiper .swiper-slide.story_centers__slide { cursor: pointer; }
.story_centers__swiper .swiper-slide-active.story_centers__slide { cursor: default; }
.story_centers__slide-media {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 4.4;   /* 폭을 넓힌 만큼 살짝 눕힌다(위 .story_centers__slide 주석 참조) */
	overflow: hidden;
}
.story_centers__slide-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: scale(1.02);
	transition: transform .6s ease;
}
/* 하단 스크림 — 캡션 가독성용. 이전 55% 는 사진 절반을 덮어 답답했다.
 * 42% 로 줄이고 중간 정지점을 낮춰 경계가 눈에 띄지 않는 곡선으로 떨어뜨린다. */
.story_centers__slide::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 42%;
	background: linear-gradient(to top,
		rgba(18,24,18,.78) 0%, rgba(18,24,18,.46) 34%, rgba(18,24,18,.16) 66%, rgba(18,24,18,0) 100%);
	opacity: .82;
	transition: opacity .7s ease;
	pointer-events: none;
}
.story_centers__swiper .swiper-slide-active.story_centers__slide::after { opacity: 1; }
.story_centers__swiper .swiper-slide:hover .story_centers__slide-media img { transform: scale(1.08); }
.story_centers__slide-cap {
	position: absolute;
	left: 26px;
	right: 26px;
	bottom: 24px;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	/* 비활성 카드는 캡션을 살짝 내리고 흐리게 → 활성으로 오는 순간 제자리로 떠오른다 */
	opacity: .58;
	transform: translateY(10px);
	transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
}
.story_centers__swiper .swiper-slide-active .story_centers__slide-cap {
	opacity: 1;
	transform: none;
}
/* 캡션 위 골드 라인 — 활성 카드에서만 좌→우로 그어진다 */
.story_centers__slide-cap::before {
	content: '';
	display: block;
	width: 0;
	height: 2px;
	margin-bottom: 4px;
	background: var(--st-gold);
	transition: width .7s cubic-bezier(.22,.61,.36,1) .1s;
}
.story_centers__swiper .swiper-slide-active .story_centers__slide-cap::before { width: 34px; }
.story_centers__slide-eng {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 2.6px;
	text-transform: uppercase;
	color: #E8D7B6;
}
.story_centers__slide-name {
	font-family: 'Pretendard', sans-serif;
	font-weight: 700;
	font-size: 22px;
	line-height: 1.25;
	letter-spacing: -.3px;
	color: #fff;
	text-shadow: 0 1px 12px rgba(0,0,0,.3);
}
/* 좌우 내비게이션 */
.story_centers__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 54px;
	height: 54px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	/* 꽉 찬 초록 원 + 진한 그림자는 무겁게 읽힌다 → 사진 위에 얹힌 반투명 유리 버튼으로 교체.
	 * 사진이 비쳐 보여 섹션이 가벼워지고, 화살표만 또렷해 조작 대상은 그대로 읽힌다. */
	background: rgba(255,255,255,.62);
	-webkit-backdrop-filter: blur(10px) saturate(1.3);
	backdrop-filter: blur(10px) saturate(1.3);
	border: 1px solid rgba(255,255,255,.75);
	box-shadow: 0 6px 20px rgba(34,39,31,.16);
	cursor: pointer;
	transition: background .25s, box-shadow .25s, transform .25s, border-color .25s;
}
.story_centers__nav::before {
	content: '';
	display: block;
	width: 11px;
	height: 11px;
	margin: 0 auto;
	border-top: 2px solid var(--st-green);
	border-right: 2px solid var(--st-green);
	transition: border-color .25s;
}
.story_centers__nav--prev { left: 28px; }
.story_centers__nav--next { right: 28px; }
.story_centers__nav--prev::before { transform: rotate(-135deg); margin-left: 22px; }
.story_centers__nav--next::before { transform: rotate(45deg); margin-right: 22px; }
.story_centers__nav:hover {
	background: var(--st-gold);
	border-color: rgba(255,255,255,.9);
	box-shadow: 0 10px 26px rgba(34,39,31,.28);
	transform: translateY(-50%) scale(1.06);
}
.story_centers__nav:hover::before { border-color: #fff; }
.story_centers__nav.swiper-button-disabled { opacity: 0; pointer-events: none; }
/* 페이지네이션 */
.story_centers__pager {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 22px;
}
.story_centers__pager .swiper-pagination-bullet {
	position: relative;
	width: 8px;
	height: 8px;
	margin: 0 !important;
	border-radius: 4px;
	background: #D6CFC0;
	opacity: 1;
	overflow: hidden;
	transition: width .35s cubic-bezier(.22,.61,.36,1), background .35s;
}
/* 활성 인디케이터는 '어디까지 왔는지'가 아니라 '언제 넘어가는지'를 보여준다 —
 * autoplay(3800ms)에 맞춰 초록 바가 차오르고, 다 차면 다음 장으로 넘어간다.
 * 슬라이더에 마우스를 올리면 Swiper 가 autoplay 를 멈추므로(pauseOnMouseEnter) 바도 같이 멈춘다. */
.story_centers__pager .swiper-pagination-bullet-active {
	width: 34px;
	background: #E3DCCC;
}
.story_centers__pager .swiper-pagination-bullet-active::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--st-green);
	transform-origin: left center;
	animation: st_pager_fill 3.8s linear forwards;
}
.story_centers__slider:hover .story_centers__pager .swiper-pagination-bullet-active::after {
	animation-play-state: paused;
}
@keyframes st_pager_fill {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
	.story_centers__pager .swiper-pagination-bullet-active::after { animation: none; transform: scaleX(1); }
}

/* =========================================================================
 * 6. 영상 모달 (2026-08-10) — '장덕 프리미엄 영상' 카드 클릭 시
 *    카드는 무음 루프라 소리를 들으려면 이 모달이 필요하다.
 *    ⚠ 열릴 때 body 스크롤을 JS 가 잠근다(story.jsp). 닫기에서 반드시 풀 것.
 * ========================================================================= */
.story_vmodal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px;
	background: rgba(16,22,17,.82);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility .3s ease;
}
.story_vmodal.is-on { opacity: 1; visibility: visible; }
.story_vmodal__box {
	position: relative;
	width: min(1100px, 100%);
	transform: translateY(12px) scale(.99);
	transition: transform .38s cubic-bezier(.22,.61,.36,1);
}
.story_vmodal.is-on .story_vmodal__box { transform: none; }
.story_vmodal__box video {
	display: block;
	width: 100%;
	max-height: calc(100vh - 128px);
	border-radius: 8px;        /* 이미지 박스 공통 radius */
	background: #000;
	box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
/* 닫기 — 영상 바깥 위쪽. 영상 위에 겹치면 컨트롤과 부딪힌다. */
.story_vmodal__close {
	position: absolute;
	right: 0;
	bottom: calc(100% + 14px);
	width: 34px;
	height: 34px;
	border: 0;
	background: none;
	cursor: pointer;
}
.story_vmodal__close::before,
.story_vmodal__close::after {
	content: '';
	position: absolute;
	left: 50%; top: 50%;
	width: 26px; height: 1.6px;
	margin: -.8px 0 0 -13px;
	background: rgba(255,255,255,.9);
	transition: background-color .25s ease;
}
.story_vmodal__close::before { transform: rotate(45deg); }
.story_vmodal__close::after  { transform: rotate(-45deg); }
.story_vmodal__close:hover::before,
.story_vmodal__close:hover::after { background: #fff; }

@media all and (max-width: 768px) {
	.story_vmodal { padding: 20px; }
	.story_vmodal__box video { max-height: calc(100vh - 110px); }
	.story_vmodal__close { width: 30px; height: 30px; bottom: calc(100% + 10px); }
}
@media (prefers-reduced-motion: reduce) {
	.story_vmodal, .story_vmodal__box { transition: none; }
}

/* =========================================================================
 * 반응형
 * ========================================================================= */
@media all and (max-width: 1440px) {
	.story_growth__title { font-size: 46px; }
	.story_bldg { --st-bd-h: 300px; }
	.story_steps { gap: 36px; }
	.story_precision__body { margin-left: -64px; }
}

@media all and (max-width: 1200px) {
	.story .story_inner { padding: 0 24px; }
	.story_hero__t1 { font-size: 34px; }
	.story_hero__t2 { font-size: 52px; }
	.story_essential__title,
	.story_precision__title,
	.story_centers__title { font-size: 34px; }
	.story_essential__grid { gap: 18px; }
	.story_essential__card { padding: 34px 22px 32px; }
	.story_essential__card-title { font-size: 24px; }
	.story_essential__card-desc  { font-size: 16px; }
	.story_precision__body { margin-left: -36px; }
	.story_growth__title { font-size: 44px; }
	.story_growth__desc  { font-size: 20px; }
	.story_bldg__head-term { font-size: 32px; margin-top: -26px; }
	.story_bldg { --st-bd-h: 270px; --st-bd-gap: 20px; }
	.story_bldg__val b { font-size: 30px; }
	.story_bldg__item--on .story_bldg__val b { font-size: 44px; }
	.story_bldg__item--on .story_bldg__val i { font-size: 19px; }
	.story_bldg__cap { font-size: 14px; }
	.story_step__title { font-size: 21px; }
	.story_centers__slide { width: 40%; }
	.story_centers__nav--prev { left: 8px; }
	.story_centers__nav--next { right: 8px; }
}

@media all and (max-width: 1024px) {
	.story_hero { height: auto; min-height: 0; padding: 150px 24px; }
	.story_hero__flow { height: 130px; }   /* 히어로가 콘텐츠 높이로 줄어드는 구간 — 카피와 겹치지 않게 */
	.story_essential { padding: 76px 0 68px; }
	.story_essential__lead { font-size: 17px; }
	.story_essential__grid { grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 48px; }
	.story_light { padding: 96px 0 0; }
	/* 1단 스택 시에는 모델을 위로 올리고 하단 여백을 섹션이 갖는다 */
	.story_precision__grid { grid-template-columns: 1fr; gap: 30px; }
	.story_precision__model { max-width: 420px; margin: 0 auto; }
	.story_precision__model::before { width: 92%; bottom: 8%; }
	/* 1단에서는 겹칠 대상이 없다 → 당김을 반드시 해제(안 하면 카피가 화면 밖으로 잘린다) */
	.story_precision__body { margin-left: 0; padding-bottom: 72px; }
	.story_precision__keys { max-width: none; gap: 0 20px; }
	.story_precision__media { margin: 40px 0 0; }
	.story_growth { padding: 68px 0 76px; }
	.story_growth__title { font-size: 36px; letter-spacing: -1.4px; }
	.story_growth__desc  { font-size: 18px; }
	.story_bldg__head-term { font-size: 28px; margin-top: -22px; }
	/* 차트: 4열은 유지한다 — 네 건물을 나란히 비교하는 것이 이 그래픽의 전부라
	   세로로 쌓으면 '작은 건물 → 빌딩' 이라는 표현 자체가 성립하지 않는다.
	   대신 높이·글자를 줄이고 지면선 아래 라벨 영역도 함께 낮춘다. */
	.story_bldg {
		--st-bd-h: 220px; --st-bd-base: 54px; margin-top: 48px;   /* base = 실측 건물 밑단 오프셋 */
		--st-bd-gap: 14px; --st-bd-tw: 120px; --st-bd-tw-on: 132px;
	}
	.story_bldg__list { padding-top: 44px; }
	.story_bldg__val b { font-size: 26px; }
	.story_bldg__val i { font-size: 14px; }
	.story_bldg__item--on .story_bldg__val b { font-size: 38px; }
	.story_bldg__item--on .story_bldg__val i { font-size: 17px; }
	.story_bldg__badge { margin-bottom: 9px; padding: 4px 12px; }
	.story_bldg__badge b { font-size: 18px; }
	.story_bldg__floor { margin-top: 15px; font-size: 12px; letter-spacing: 2.4px; }
	.story_bldg__cap { margin-top: 7px; font-size: 13px; }
	.story_bldg__note { font-size: 15px; }
	.story_steps { grid-template-columns: repeat(2, 1fr); gap: 44px 32px; margin-top: 62px; }
	.story_steps::before { display: none; }
	.story_step__dot { height: 34px; padding: 8px 0 13px; }
	.story_step--on .story_step__dot { height: 34px; padding: 5px 0 10px; }
	.story_centers { padding: 70px 0 80px; }
	.story_centers__head { margin-bottom: 36px; }
	.story_centers__slide { width: 54%; }
	/* 카드가 화면의 절반을 넘으면 양옆 축소를 조금 더 줘야 가운데가 구분된다 */
	.story_centers__swiper .swiper-slide.story_centers__slide { transform: scale(.9); }
}

@media all and (max-width: 768px) {
	.story_hero { padding: 120px 20px; }
	.story_hero__flow { height: 96px; }
	.story_hero__label { font-size: 14px; letter-spacing: 4px; }
	.story_hero__desc  { font-size: 15px; }
	.story_hero__title { margin-top: 22px; gap: 10px; }
	.story_hero__t1 { font-size: 26px; }
	.story_hero__t2 { font-size: 38px; }
	.story .story_inner { padding: 0 20px; }
	.story_essential__title,
	.story_precision__title,
	.story_centers__title { font-size: 28px; }
	.story_essential__grid { grid-template-columns: 1fr; gap: 14px; margin-top: 40px; }
	.story_essential__card { padding: 30px 22px 28px; }
	.story_essential__eyebrow span { font-size: 15px; letter-spacing: 3.6px; }
	.story_essential__eyebrow::before,
	.story_essential__eyebrow::after { width: 34px; }
	.story_essential__lead { font-size: 16px; margin-top: 16px; }
	.story_essential__note { font-size: 12px; margin-top: 34px; }
	.story_precision__eyebrow { font-size: 14px; letter-spacing: 3.6px; }
	.story_precision__eyebrow::before { width: 20px; }
	.story_precision__desc { font-size: 15px; }
	.story_precision__media { margin-top: 32px; }
	/* 좁은 화면에서는 진단 축을 세로로 쌓고, 스트립의 우측 유도문구는 자리를 못 잡으니 뺀다 */
	.story_precision__keys { grid-template-columns: 1fr; gap: 14px 0; margin-top: 28px; padding-top: 18px; }
	.story_precision__keys b { font-size: 15px; }
	.story_precision__keys span { font-size: 13px; }
	.story_precision__cue { padding: 14px 16px; gap: 12px; }
	.story_precision__cue-go { display: none; }
	.story_precision__play { width: 44px; height: 44px; }
	.story_precision__play::before { border-left-width: 12px; border-top-width: 7px; border-bottom-width: 7px; }
	.story_precision__cue-txt b { font-size: 15px; }
	.story_precision__cue-txt i { font-size: 12px; }
	.story_growth__eyebrow::before,
	.story_growth__eyebrow::after { width: 34px; }
	.story_growth__eyebrow span { font-size: 14px; letter-spacing: 3.6px; }
	.story_growth__title { font-size: 28px; }
	.story_growth__desc  { font-size: 16px; }
	.story_bldg { --st-bd-h: 170px; --st-bd-base: 46px; --st-bd-gap: 8px; }
	.story_bldg__head-tit { font-size: 12px; letter-spacing: 3px; }
	.story_bldg__head-term { font-size: 23px; margin-top: -16px; }
	.story_bldg__head-unit { font-size: 14px; }
	.story_bldg__list { padding-top: 36px; }
	.story_bldg__tower { min-height: 32px; margin-top: 10px; }
	.story_bldg__val b { font-size: 20px; }
	.story_bldg__val i { font-size: 12px; }
	.story_bldg__item--on .story_bldg__val b { font-size: 28px; }
	.story_bldg__item--on .story_bldg__val i { font-size: 14px; }
	.story_bldg__badge { margin-bottom: 7px; padding: 3px 9px; gap: 2px; }
	.story_bldg__badge i { font-size: 12px; }
	.story_bldg__badge b { font-size: 15px; }
	.story_bldg__floor { margin-top: 12px; font-size: 11px; letter-spacing: 1.6px; }
	.story_bldg__cap { margin-top: 6px; font-size: 12px; line-height: 1.42; }
	.story_bldg__note { font-size: 14px; gap: 10px; }
	/* 2026-08-12 — 4단계가 1열로 늘어서면서 이 블록만 화면 1.5개 분량이었다(사용자: "너무 세로로 길다").
	 * → **좌측 레일 타임라인**으로 압축한다. 도트를 글 왼쪽으로 빼내 세로선으로 잇고,
	 *   번호(01)와 평수 뱃지를 한 줄에 묶어 단계마다 두 줄을 줄였다.
	 * ⚠ 가로 슬라이드로 바꾸지 말 것 — 이건 성장 히스토리라 네 단계가 이어져 보여야 한다.
	 * ⚠ .story_steps::before 는 1024 에서 display:none 이었다(데스크톱은 가로 진행선).
	 *   여기서 세로선으로 되살리는 것이므로 left/right/top/bottom/width/height/background 를 모두 다시 잡는다. */
	.story_steps {
		grid-template-columns: 1fr;
		gap: 0;
		margin-top: 40px;
		padding-top: 2px;
		padding-left: 22px;   /* 레일이 들어갈 자리 */
	}
	.story_steps::before {
		display: block;
		left: 5px; right: auto; top: 6px; bottom: 10px;
		width: 1px; height: auto;
		background: linear-gradient(180deg, rgba(226,198,155,.42) 0%, rgba(226,198,155,.42) 82%, rgba(226,198,155,.06) 100%);
	}
	.story_step { padding-bottom: 26px; }
	.story_step:last-child { padding-bottom: 0; }
	/* 도트를 레일 위로 빼낸다(원래는 번호 아래 블록이었다) */
	.story_step__dot,
	.story_step--on .story_step__dot {
		position: absolute; left: -22px; top: 4px;
		height: auto; padding: 0;
	}
	.story_step__dot::before { width: 11px; height: 11px; }
	.story_step--on .story_step__dot::before { width: 13px; height: 13px; margin-left: -1px; }
	/* 번호 + 평수 뱃지 = 한 줄 */
	.story_step__num {
		display: inline-block; height: auto;
		margin-right: 9px;
		font-size: 13px; letter-spacing: 2.6px; vertical-align: middle;
	}
	.story_step__area { margin: 0 0 9px; padding: 3px 10px; font-size: 12.5px; vertical-align: middle; }
	/* ⚠ .story_step__title br 을 display:none 하지 말 것 — 마크업이 '작은 4층,<br />본질에 집중하다'
	   처럼 <br> 자리에 공백이 없어서, 숨기면 '작은 4층,본질에 집중하다' 로 붙는다(2026-08-12 실제 발생). */
	.story_step__title { font-size: 18px; line-height: 1.5; letter-spacing: -.5px; }
	.story_step__desc  { margin-top: 8px; font-size: 14.5px; line-height: 1.72; }
	.story_centers__slide { width: 76%; }
	.story_centers__slide-cap { left: 16px; right: 16px; bottom: 16px; }
	.story_centers__slide-eng  { font-size: 13px; }
	.story_centers__slide-name { font-size: 19px; }
	.story_centers__eyebrow { font-size: 15px; letter-spacing: 3.6px; margin-bottom: 10px; }
	.story_centers__slide-cap { left: 18px; right: 18px; bottom: 18px; }
	.story_centers__nav { width: 44px; height: 44px; }
	.story_centers__nav::before { width: 10px; height: 10px; }
	.story_centers__nav--prev::before { margin-left: 17px; }
	.story_centers__nav--next::before { margin-right: 17px; }
}

@media all and (max-width: 480px) {
	.story_hero__t1 { font-size: 22px; }
	.story_hero__t2 { font-size: 31px; }
	.story_essential__title,
	.story_precision__title,
	.story_centers__title,
	.story_growth__title { font-size: 24px; }
	/* 이 폭에서는 머리 줄 3요소(Floor Area / 단, 1년 / 단위 : 평)가 한 줄에 겨우 들어간다 */
	.story_bldg__head-term { font-size: 19px; margin-top: -12px; }
	.story_essential__card-title { font-size: 21px; }
	/* 이 폭에서는 칸이 70px 남짓이라 한 줄 설명을 담을 수 없다 → 층 표기와 수치만 남긴다 */
	.story_bldg { --st-bd-h: 140px; --st-bd-base: 23px; }
	.story_bldg__val b { font-size: 17px; }
	.story_bldg__item--on .story_bldg__val b { font-size: 23px; }
	.story_bldg__cap { display: none; }
	.story_bldg__note { font-size: 13px; }
	.story_centers__slide { width: 88%; }
}