/* IHWIZ 테마 커스텀 스타일 (T099). theme.json 프리셋 변수(--wp--preset--*)를 그대로 쓴다. */

/* ── 세로 리듬 토큰 (T116, SPEC.md '세로 리듬 규칙'이 단일 원본) ──
   섹션마다 간격을 따로 정하지 않는다 — 여기 정의한 3단계(섹션 간격/제목-내용 간격/그리드
   gap·카드 안쪽 여백)만 전 페이지에서 재사용한다. 값을 바꿀 일이 있으면 여기만 고친다. */
:root {
	/* T131: 사용자 지시로 섹션 간격을 고정 50px로 통일(데스크톱·모바일 동일 — 상대값이 아니라
	   지정된 절대값이므로 임의로 나누지 않는다). 이전 88/56px 상대 리듬은 폐기. 카드 gap·패딩은
	   그대로 유지 — 섹션 경계는 이제 간격보다 배경 전환(전체폭 몰입 밴드 등)이 주된 구분 수단.
	   값은 theme.json 의 spacing 프리셋 slug "section-gap"(기존 "50" 슬러그와 다른 값이라
	   Pane1이 새로 만듦)을 참조한다 — 여기 직접 50px를 박지 않는다. */
	--ihwiz-rhythm-section: var(--wp--preset--spacing--section-gap);
	--ihwiz-rhythm-section-mobile: var(--wp--preset--spacing--section-gap);
	--ihwiz-rhythm-heading: 24px;
	--ihwiz-rhythm-heading-mobile: 20px;
	--ihwiz-rhythm-gap: 24px;
	--ihwiz-rhythm-gap-mobile: 16px;
	--ihwiz-rhythm-card-pad: 24px;
	--ihwiz-rhythm-card-pad-mobile: 20px;
	--ihwiz-rhythm-hero-first: 72px;
	--ihwiz-rhythm-hero-first-mobile: 48px;
}
/* T116.1: 그리드가 1열로 붕괴하는 지점(900px, scope-grid 의 max-width:900px 미디어쿼리)과
   맞춘다 — 전환점이 어긋나면 600~900px 구간에서 "카드는 1열인데 간격은 데스크톱 88px"
   같은 불일치가 생긴다(Opus 지적). */
@media (max-width: 900px) {
	:root {
		--ihwiz-rhythm-section: var(--ihwiz-rhythm-section-mobile);
		--ihwiz-rhythm-heading: var(--ihwiz-rhythm-heading-mobile);
		--ihwiz-rhythm-gap: var(--ihwiz-rhythm-gap-mobile);
		--ihwiz-rhythm-card-pad: var(--ihwiz-rhythm-card-pad-mobile);
		--ihwiz-rhythm-hero-first: var(--ihwiz-rhythm-hero-first-mobile);
	}
}
/* 제목은 이전 섹션과 멀게(섹션 간격), 바로 다음 내용과는 가깝게(제목 간격) — 이 비대칭이
   "어디까지가 한 섹션인지"를 눈으로 읽히게 한다. 히어로 바로 다음 첫 제목만 예외(72px,
   히어로 자체 padding-bottom 과는 별개로 섹션 사이 숨 쉴 공간). */
main .wp-block-post-content > h2 {
	margin-top: var(--ihwiz-rhythm-section);
	margin-bottom: 0;
}
main .wp-block-post-content > h2 + * {
	margin-top: var(--ihwiz-rhythm-heading);
}
main .wp-block-post-content > .ihwiz-service-hero + h2,
main .wp-block-post-content > .ihwiz-hero + h2 {
	margin-top: var(--ihwiz-rhythm-hero-first);
}

/* T118: 홈(front-page.html)은 post-content 를 안 거치고 <main class="wp-block-group"> 의
   직계 자식으로 섹션들이 바로 온다 — 위 규칙과 부모 선택자가 달라 별도로 잡는다. 같은
   토큰(88/72/24)을 그대로 쓴다(페이지마다 리듬이 다르면 그것대로 어색하다는 원칙). */
main.wp-block-group > .ihwiz-hero + * {
	margin-top: var(--ihwiz-rhythm-hero-first);
}
main.wp-block-group > h2 {
	margin-top: var(--ihwiz-rhythm-section);
	margin-bottom: 0;
}
main.wp-block-group > h2 + * {
	margin-top: var(--ihwiz-rhythm-heading);
}
main.wp-block-group > .ihwiz-stats,
main.wp-block-group > .ihwiz-stats + section,
main.wp-block-group > .ihwiz-features {
	margin-top: var(--ihwiz-rhythm-section);
}
/* "구축과 운영을 나누지 않는 이유" 섹션은 h2 가 섹션 안에 중첩돼 있다(위 top-level h2 규칙이
   안 걸린다) — 섹션 자체가 큰 간격을 이미 받으므로 내부 h2 는 붙이고, 그 다음 p 만 제목
   간격만큼 띄운다. */
main.wp-block-group > .ihwiz-stats + section > h2 {
	margin-top: 0;
}
main.wp-block-group > .ihwiz-stats + section > h2 + p {
	margin-top: var(--ihwiz-rhythm-heading);
}
/* CTA 밴드는 페이지마다 바로 앞 섹션이 다르다(허브는 features, 8섹션 하위페이지는 FAQ) —
   무엇이 오든 "마지막 섹션과 CTA 밴드 사이는 88/56px" 이 목적이므로 앞 형제를 가리지 않고
   무조건 적용한다. */
.ihwiz-cta-band {
	margin-top: var(--ihwiz-rhythm-section);
}

/* ── 기본 ── */
html {
	scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}
/* 한글 어절이 중간에서 끊기지 않게(T103 결함3) — 제목·본문 전반. overflow-wrap 은 그대로 둬서
   아주 긴 토큰(URL 등)은 필요하면 여전히 줄바꿈된다.
   h1.wp-block-post-title / .wp-block-heading 을 별도로 넣는 이유(T103.1): 코어가
   .wp-block-post-title{word-break:break-word} 를 클래스 선택자(특이도 0,1,0)로 내는데,
   이 규칙의 순수 요소 선택자(h1 등, 특이도 0,0,1)는 특이도로 져서 하위 페이지 제목에
   안 먹혔다(홈 히어로는 .wp-block-post-title 이 아니라 .wp-block-heading 이라 우연히 안 걸렸을
   뿐). 아래 두 클래스를 명시해 특이도 0,1,1 로 코어를 이긴다. */
h1, h2, h3, h4, h5, h6, p, li, a, .ihwiz-hero__sub, .ihwiz-lead,
h1.wp-block-post-title, .wp-block-heading {
	word-break: keep-all;
	overflow-wrap: break-word;
}

.ihwiz-mono {
	font-family: var(--wp--preset--font-family--mono);
	letter-spacing: -0.01em;
}

/* ── 스크롤 리빌: JS 붙기 전엔 항상 보이는 상태(no-FOUC, JS 죽어도 콘텐츠는 읽힌다) ──
   scroll-reveal.js 가 로드되고 나서야 body 에 .ihwiz-js-ready 를 붙이고, 그 다음부터만
   초기 숨김 상태(.ihwiz-reveal)를 적용한다. */
.ihwiz-reveal {
	opacity: 1;
	transform: none;
}
/* scroll-reveal.js 가 이 클래스를 붙인 뒤부터만 초기 숨김 상태로 바뀐다. 그 뒤 실제 등장
   애니메이션(투명도·이동)은 GSAP 이 인라인 스타일로 직접 구동한다(아래는 JS 로딩 전
   깜빡임을 막기 위한 초기값일 뿐, transition 은 CSS 가 아니라 GSAP 쪽에서 건다). */
body.ihwiz-js-ready .ihwiz-reveal {
	opacity: 0;
	transform: translateY(16px);
}
@media (prefers-reduced-motion: reduce) {
	body.ihwiz-js-ready .ihwiz-reveal {
		opacity: 1;
		transform: none;
	}
}

/* ── 헤더 (스티키 + 드롭다운) ── */
/* sticky 는 .ihwiz-header(안쪽) 가 아니라 WP 가 템플릿파트를 감싸는 <header
   class="wp-block-template-part"> 래퍼(바깥쪽)에 건다. 실측으로 확인한 원인: 래퍼가
   안쪽 헤더 높이에 딱 맞게 auto 로 감싸면(부모 높이 == 자식 높이) sticky 자식이 "붙어 있을
   여유 공간"이 부모 안에 전혀 없어 — 부모가 뷰포트를 벗어나는 순간 자식도 그대로 같이
   끌려나간다(겉보기엔 position:relative 처럼 동작). 태그명(header)으로만 특정해도 충분한 게,
   이 테마에서 tagName:"header" 템플릿파트는 parts/header.html 하나뿐이다(footer 는
   tagName:"footer" 라 이 선택자와 안 겹친다). backdrop-filter/::before 분리는 무관한
   시도였지만 어차피 유지한다 — 흐림 효과를 별도 레이어로 두는 것 자체는 이득이라서. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 40;
}
.ihwiz-header {
	position: relative;
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding-block: var(--wp--preset--spacing--20);
	/* 헤더는 layout:flex 라 "constrained" 블록처럼 루트 패딩을 자동으로 물려받지 않는다 —
	   그래서 명시적으로 좌우 여백을 준다(T103 결함1: 사이트 타이틀·드롭다운 화살표 잘림). */
	padding-inline: clamp(1rem, 5vw, 3rem);
}
.ihwiz-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
	backdrop-filter: saturate(140%) blur(10px);
	-webkit-backdrop-filter: saturate(140%) blur(10px);
}
.ihwiz-header .wp-block-site-title a {
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.ihwiz-header .wp-block-navigation {
	--wp--style--block-gap: 1.75rem;
}
.ihwiz-header .wp-block-navigation-item > a,
.ihwiz-header .wp-block-navigation-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--muted);
	font-weight: 500;
	font-size: 0.95rem;
	padding: 0.4rem 0;
}
.ihwiz-header .wp-block-navigation-item > a:hover,
.ihwiz-header .wp-block-navigation-item.current-menu-item > a {
	color: var(--wp--preset--color--contrast);
}
/* 하위메뉴 드롭다운: 코어 Navigation 블록의 submenu 를 다크 카드로 스타일 */
.ihwiz-header .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	padding: 0.5rem;
	box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
	min-width: 240px;
}
.ihwiz-header .wp-block-navigation__submenu-container .wp-block-navigation-item > a {
	padding: 0.55rem 0.75rem;
	border-radius: 6px;
	font-size: 0.9rem;
	display: block;
}
.ihwiz-header .wp-block-navigation__submenu-container .wp-block-navigation-item > a:hover {
	background: var(--wp--preset--color--surface-2);
}
.ihwiz-header .wp-block-navigation__responsive-container-open svg,
.ihwiz-header .wp-block-navigation__responsive-container-close svg {
	fill: var(--wp--preset--color--contrast);
}
.ihwiz-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--base);
}

/* ── 히어로 ── */
.ihwiz-hero {
	position: relative;
	overflow: hidden;
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	isolation: isolate;
}
/* 정적 대체 배경: three.js 로드 전(또는 실패/reduced-motion)에 항상 보이는 그라디언트.
   레이아웃 이동 없이 캔버스가 같은 자리에 겹쳐 그려진다(CLS 0). */
.ihwiz-hero__bg,
.ihwiz-hero__canvas {
	/* WP 의 is-layout-constrained 가 이 섹션의 직계 자식에 contentSize 만큼 max-width 를
	   건다(wp:html 로 넣은 raw 마크업이라 align:full 같은 블록 속성 지원을 못 받음) — 그래서
	   명시적으로 풀어준다. 실측(T103 재검증)에서 740px 로 갇혀 있던 걸 확인해 추가. */
	max-width: none;
	width: 100%;
}
.ihwiz-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		radial-gradient(60% 60% at 80% 10%, color-mix(in srgb, var(--wp--preset--color--accent) 14%, transparent), transparent 60%),
		radial-gradient(50% 50% at 10% 90%, color-mix(in srgb, var(--wp--preset--color--accent) 8%, transparent), transparent 60%),
		var(--wp--preset--color--base);
}
.ihwiz-hero__canvas {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	display: block;
	opacity: 0;
	transition: opacity 0.6s ease-out;
	/* 텍스트 칼럼(왼쪽, 대략 24~55% 지점)에서는 네트워크가 페이드아웃되고 그 오른쪽에서만
	   선명하게 보이도록 마스크로 가린다(T104 다듬기 — 투명도를 낮추는 대신 텍스트 영역만
	   비켜나게 해서, 밝은 배경에서 필요한 가시성은 유지하면서 헤드라인과 겹치지 않게 한다). */
	mask-image: linear-gradient(90deg, transparent 0%, transparent 40%, rgba(0, 0, 0, 0.55) 54%, #000 68%);
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 40%, rgba(0, 0, 0, 0.55) 54%, #000 68%);
}
.ihwiz-hero__canvas.is-active {
	opacity: 1;
}
.ihwiz-hero__inner {
	/* T115: WP 코어의 기본 constrained 레이아웃이 이 블록을 contentSize(800px)로 가운데
	   가둔다 — 그래서 헤드라인·CTA·컨트롤이 1600px 화면에서 x=400 근처에 떠 있었다.
	   max-width 를 풀어 다른 섹션의 h2/그리드 왼쪽 끝(x≈48)과 맞춘다. 글줄 길이는
	   .ihwiz-hero__headline(min(34ch,820px))·.ihwiz-hero__sub(52ch)가 이미 제한하므로
	   컨테이너를 넓혀도 텍스트 자체가 늘어지지 않는다.
	   T115.2: 처음엔 여기 padding-inline 을 직접 줬었는데 틀렸다 — 라이브 마크업을 보니
	   .ihwiz-hero__inner 자신이 이미 WP 의 has-global-padding 클래스를 달고 나온다(부모
	   .ihwiz-hero 도 align:full+has-global-padding 이라 루트패딩이 걸려 있다). 그 위에 내가
	   또 padding-inline 을 주면 48px 인셋이 두 겹(부모 48 + 여기 48 = 96)이 되어 안쪽
	   콘텐츠가 x=96 에서 시작하는 버그가 났다(Guardian 실측으로 발견). 부모가 이미 올바른
	   위치(x=48)를 잡아주므로 여기서는 padding 을 0으로 없앤다. */
	position: relative;
	z-index: 2;
	max-width: none;
	padding-inline: 0;
}
.ihwiz-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8rem;
	color: var(--wp--preset--color--accent);
	letter-spacing: 0.04em;
	margin-bottom: 1rem;
}
.ihwiz-hero__eyebrow::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--wp--preset--color--accent) 20%, transparent);
}
.ihwiz-hero__headline {
	font-size: var(--wp--preset--font-size--hero);
	font-weight: 700;
	line-height: 1.25;
	color: var(--wp--preset--color--contrast);
	/* T107: 슬라이드 헤드라인은 짧은 한 줄 문장으로 설계했으므로(18~24자) 예전의 18ch 제한을
	   풀었다 — 그 값은 4줄로 접히던 긴 헤드라인 시절 기준이라 지금 쓰면 오히려 불필요하게
	   일찍 꺾인다.
	   T115.1: ch 단위만으로는 폰트가 커지면(히어로 폰트 64px) 상한이 사실상 무력화된다
	   (34ch=1514px인데 T115로 넓어진 컨테이너가 1489px라 34ch에 전혀 안 닿아 한 줄로 펴짐,
	   Guardian 실측). ch 와 px 상한을 함께 걸어 폰트 크기와 무관하게 2줄 내외를 유지한다 —
	   820px 는 "구축과 인프라, 한 팀이 함께 책임집니다." 기준으로 2줄로 접히는 값이자, 마스크
	   완전노출 경계(1078px)보다 안쪽이라 캔버스와 겹치지도 않는다(부수 효과). */
	max-width: min(34ch, 820px);
	margin: 0 0 1.25rem;
}
.ihwiz-hero__sub {
	color: var(--wp--preset--color--muted);
	font-size: 1.15rem;
	max-width: 52ch;
	margin: 0 0 2rem;
}
.ihwiz-hero .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
}
.ihwiz-btn-secondary a,
.wp-block-button.is-style-ihwiz-secondary .wp-block-button__link {
	background: transparent !important;
	color: var(--wp--preset--color--contrast) !important;
	border: 1px solid var(--wp--preset--color--border);
}
.wp-block-button.is-style-ihwiz-secondary .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent) !important;
}

/* ── 히어로 4슬라이드(T107) ──
   .ihwiz-hero__slides 를 grid 로 만들고 모든 슬라이드를 같은 셀(1/1)에 겹쳐 쌓는다 — 이러면
   숨겨진 슬라이드도 grid 트랙 크기 계산에는 계속 참여해서, 컨테이너 높이가 "가장 큰 슬라이드"
   기준으로 고정된다(전환할 때 레이아웃이 흔들리지 않는다, CLS 0). 보이기/숨기기는 display 가
   아니라 opacity+visibility 로만 하는 이유가 이것 — display:none 이면 그 슬라이드가 grid
   높이 계산에서 빠져버린다. */
/* T115.2: .ihwiz-hero__inner 를 넓혀도(T115) 그 직계 자식들(.ihwiz-hero__slides,
   .ihwiz-hero__controls)은 WP 의 `.is-layout-constrained > *` 기본 규칙에 다시 걸려
   800px 로 갇힌다 — inner 자신의 max-width 를 푼 것과 별개로, inner 의 "자식"에게 붙는
   그 규칙은 자식 하나하나를 따로 풀어줘야 한다(FAQ 를 고칠 때와 같은 구조의 버그,
   Guardian 실측으로 발견). */
.ihwiz-hero__slides {
	display: grid;
	max-width: none;
}
.ihwiz-hero__slide {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.5s ease;
}
.ihwiz-hero__slide.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
	.ihwiz-hero__slide {
		transition: none;
	}
}

.ihwiz-hero__controls {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin-top: var(--wp--preset--spacing--40);
	max-width: none;
}
.ihwiz-hero__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	flex: none;
}
.ihwiz-hero__arrow:hover,
.ihwiz-hero__arrow:focus-visible {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-2);
}
/* 자동전환 일시정지/재생 토글(T107.1 — WCAG 2.2.2, hover/focus 로 못 멈추는 터치·키보드
   사용자를 위한 명시적 정지 수단). 아이콘은 "누르면 일어날 동작"을 보인다(재생 중엔
   일시정지 아이콘, 멈춘 뒤엔 재생 아이콘 — 일반적인 미디어 플레이어 관례). */
.ihwiz-hero__playpause::before {
	content: "\23F8";
	font-size: 0.9rem;
}
.ihwiz-hero__playpause.is-paused::before {
	content: "\25B6";
}
.ihwiz-hero__playpause:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}
.ihwiz-hero__dots {
	display: flex;
	gap: 0.6rem;
}
.ihwiz-hero__dot {
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	border: none;
	padding: 0;
	background: var(--wp--preset--color--border);
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}
.ihwiz-hero__dot:hover,
.ihwiz-hero__dot:focus-visible {
	background: var(--wp--preset--color--accent);
}
.ihwiz-hero__dot.is-active {
	background: var(--wp--preset--color--accent);
	transform: scale(1.3);
}
.ihwiz-hero__arrow:focus-visible,
.ihwiz-hero__dot:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

@media (max-width: 600px) {
	.ihwiz-hero {
		padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	}
}

/* ── 서비스 카드 그리드 (허브 페이지) ── */
.ihwiz-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.25rem;
}
.ihwiz-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	padding: 1.75rem;
	transition: border-color 0.2s ease-out, transform 0.2s ease-out;
}
.ihwiz-card:hover {
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 50%, var(--wp--preset--color--border));
	transform: translateY(-2px);
}
.ihwiz-card__index {
	font-family: var(--wp--preset--font-family--mono);
	color: var(--wp--preset--color--accent);
	font-size: 0.85rem;
	display: block;
	margin-bottom: 0.75rem;
}
.ihwiz-card h3 {
	font-size: 1.15rem;
	margin: 0 0 0.6rem;
}
.ihwiz-card p {
	color: var(--wp--preset--color--muted);
	font-size: 0.95rem;
	margin: 0 0 1rem;
}
.ihwiz-card a.ihwiz-card__link {
	color: var(--wp--preset--color--contrast);
	font-size: 0.9rem;
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding-bottom: 2px;
}
.ihwiz-card a.ihwiz-card__link:hover {
	/* 본문 링크 취급(T104 후속) — accent-2 로 AAA 대비 확보 */
	color: var(--wp--preset--color--accent-2);
	border-color: var(--wp--preset--color--accent-2);
}

/* ── 특징 3~4단 ── */
.ihwiz-features {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--ihwiz-rhythm-gap);
}
.ihwiz-feature__num {
	font-family: var(--wp--preset--font-family--mono);
	color: var(--wp--preset--color--muted);
	font-size: 0.85rem;
	display: block;
	margin-bottom: 0.5rem;
}
.ihwiz-feature h3 {
	font-size: 1.05rem;
	margin: 0 0 0.5rem;
}
.ihwiz-feature p {
	color: var(--wp--preset--color--muted);
	font-size: 0.9rem;
	margin: 0;
}

/* ── 숫자 지표 행 (홈) ── */
.ihwiz-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1.5rem;
	border-top: 1px solid var(--wp--preset--color--border);
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding-block: 1.75rem;
}
.ihwiz-stat__value {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--wp--preset--color--accent);
	display: block;
}
.ihwiz-stat__label {
	color: var(--wp--preset--color--muted);
	font-size: 0.85rem;
	margin-top: 0.3rem;
}

/* ── CTA 밴드 ── */
/* 라이트 테마의 유일한 '리듬용 다크 섹션'(SPEC 2단계) — 잉크 네이비 배경, 순검정 아님.
   기본 h2/p 색(contrast=ink, muted=회색)은 밝은 배경 기준이라 이 안에서는 안 보이므로
   명시적으로 밝은 텍스트로 덮어쓴다.
   T113: '밴드'라는 이름대로 화면 전체 폭을 가로지르도록 align:full 로 바꿨다(히어로와 같은
   구조 재사용) — 그래서 모서리를 둥글릴 이유가 없어 border-radius 를 뺐다. 안쪽 글자는
   .ihwiz-cta-band__inner 가 담당하는데, 부모(.ihwiz-cta-band)의 layout:constrained 속성
   덕분에 WP 코어가 그 직계 자식에 자동으로 contentSize(800px) max-width 를 걸어준다(홈
   히어로의 .ihwiz-hero__inner 와 동일한 원리) — 별도 CSS 없이 그대로 좁게 읽힌다. */
/* T116.1: 하위 페이지 CTA 밴드는 apply-copy.py 의 cta_band_block() 이 align 속성 없이
   내보낸다(파서 산출물, 직접 확인함 — class="...ihwiz-cta-band ihwiz-reveal
   has-global-padding is-layout-constrained..." 뿐, alignfull/alignwide 없음). 파서를 고치는
   대신 홈의 .ihwiz-service-hero 와 같은 방식으로 클래스 선택자만으로 폭을 넓힌다 — 안쪽
   글자(p, 아래 h2/p 규칙의 48ch)는 이미 좁게 고정돼 있어 그대로 유지된다. 진짜 뷰포트
   끝까지 닿는 홈의 alignfull과는 다르고(부모 .wp-block-post-content 자체가
   has-global-padding 이라 루트 패딩 안쪽에서만 넓어진다), 다른 광폭 섹션(scope-grid 등)과
   같은 폭이라 "밴드로 안 읽힌다"는 원래 문제는 해소된다. */
main .wp-block-post-content > .ihwiz-cta-band {
	max-width: var(--wp--style--global--wide-size);
}
.ihwiz-cta-band {
	background: var(--wp--preset--color--primary);
	padding-block: var(--wp--preset--spacing--40);
	text-align: center;
}
.ihwiz-cta-band h2 {
	color: var(--wp--preset--color--base);
	font-size: 1.6rem;
	margin: 0 0 0.75rem;
}
.ihwiz-cta-band p {
	color: color-mix(in srgb, var(--wp--preset--color--base) 72%, transparent);
	max-width: 48ch;
	margin: 0 auto 1.5rem;
}

/* ── 본문 삽화 이미지 높이 상한 (T110) ──
   LUNA-IMG 생성 이미지는 원본 가로세로비가 페이지마다 들쭉날쭉하다(생성 단계에서 정확한
   비율을 강제하기 어렵다는 걸 여러 차례 시도 끝에 확인했다) — 그래서 원본 비율은 그대로
   두고, 화면에 보이는 "높이"만 상한을 걸어 페이지마다 이미지 크기가 3배씩 차이 나는 걸
   막는다. object-fit 은 쓰지 않는다(크롭이 생겨 구도가 다시 잘린다) — width:auto 로
   원본 비율을 유지한 채 높이만 줄인다. */
main .wp-block-post-content .wp-block-image img {
	max-height: 420px;
	width: auto;
	height: auto;
	display: block;
	margin-inline: auto;
}

/* ── 하위서비스 본문 기본형 ── */
.ihwiz-service-body .ihwiz-lead {
	font-size: 1.1rem;
	color: var(--wp--preset--color--muted);
}
.ihwiz-service-body .ihwiz-block-list li {
	margin-bottom: 0.5rem;
}

/* ── 서비스 상세 8섹션 시각 처리 (T109, SPEC.md '8섹션 시각 처리 계약'이 단일 원본) ──
   클래스 이름은 파서(Pane 1, apply-copy.py)와 여기가 계약으로 공유한다. T111(Pane 1)에서
   ihwiz-situations/situation, ihwiz-steps/step, ihwiz-deliverables/deliverable,
   ihwiz-scope(항목) 클래스를 전부 파서 쪽에 붙여 계약대로 맞춰졌다 — 아래는 전부 실제
   마크업 클래스만 스코프한다(과도기 우회 선택자는 T111에서 걷어냈다).
   ihwiz-faq: T111에서 컨테이너 클래스(.ihwiz-faq, div로 details 여러 개를 감싼다)가 파서
   쪽에 붙었다 — T116.1 이전엔 이걸 놓치고 h2:has(+ .wp-block-details) 로 짰는데 h2 바로
   다음 형제는 details 가 아니라 .ihwiz-faq 래퍼라 매치가 안 됐다(라이브 마크업 직접
   확인으로 발견, Guardian 지적). 아래는 .ihwiz-faq 래퍼 기준으로 다시 짠 것이다. */

/* T114: 섹션 제목(h2)이 800px 상자에 갇혀 있으면 그 아래 광폭(1504px) 카드그리드와 왼쪽
   끝이 안 맞아 "제목과 내용이 끊겨 보인다"(Guardian 실측 지적). 산문 섹션(리드 문단 뒤에
   오는 일반 텍스트, FAQ)은 그대로 800px 를 유지해야 하므로 전체 h2 를 일괄로 넓히지 않고,
   광폭 그리드가 바로 뒤에 오는 제목만 :has() 로 골라서 넓힌다 — 파서가 h2 에 별도 클래스를
   붙이지 않아도 CSS만으로 해결된다(계약 변경 불필요). */
main .wp-block-post-content > h2:has(+ .ihwiz-scope-grid),
main .wp-block-post-content > h2:has(+ .ihwiz-situations),
main .wp-block-post-content > h2:has(+ .ihwiz-steps),
main .wp-block-post-content > h2:has(+ .ihwiz-deliverables),
main .wp-block-post-content > h2:has(+ .ihwiz-features),
main .wp-block-post-content > h2:has(+ .ihwiz-actions),
main .wp-block-post-content > h2:has(+ .ihwiz-outcomes),
main .wp-block-post-content > h2:has(+ .ihwiz-compare-grid) {
	/* T131: 새 컴포넌트 3종(무엇을 하는가/받는가, 비교표 그리드)도 광폭 그리드라 기존
	   scope-grid 등과 같은 이유로 앞 제목만 넓힌다. 판단기준(.ihwiz-decision-points)은
	   목록형(62ch 읽기폭 유지)이라 여기 포함하지 않는다. */
	max-width: var(--wp--style--global--wide-size);
}

.ihwiz-service-hero {
	/* .ihwiz-hero 기본값(홈 히어로 기준 padding-block: spacing--60/50)을 낮은 높이로 덮어쓴다.
	   three.js 캔버스가 없는 하위 페이지 히어로라 overflow/isolation 은 그대로 둬도 무해하다.
	   T114: 이 섹션은 apply-copy.py 가 align 속성 없이 내보내(800px 로 갇힘) 아래 광폭
	   카드그리드와 왼쪽 끝이 안 맞았다 — 파서를 건드리지 않고 클래스 선택자로 직접
	   max-width 를 덮어써서 밴드 자체를 그리드와 같은 폭으로 맞춘다(WP 의
	   `.is-layout-constrained > *` 기본 규칙이 이미 margin:auto !important 로 중앙 정렬을
	   해주므로 max-width 만 이겨도 충분하다). 안쪽 리드문단은 .ihwiz-lead 의 62ch 제한이
	   그대로 유지돼 읽기 폭은 좁게 남는다. */
	max-width: var(--wp--style--global--wide-size);
	padding-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--surface-2);
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.ihwiz-service-hero .ihwiz-lead {
	font-size: 1.15rem;
	max-width: 62ch;
	margin: 0 0 1.5rem;
	color: var(--wp--preset--color--muted);
}
.ihwiz-service-hero .wp-block-buttons {
	margin: 0;
}

/* 제공 범위 — wp:columns 기본(flex, 균등폭)을 카드 그리드로 덮어쓴다.
   T114: 항목 수가 페이지마다 5개 또는 6개다(실측, PLACEHOLDERS 조사). auto-fit 을 좁은
   minmax 로 두면 1504px 폭에서 5열이 나와 6개짜리 페이지는 5+1 로 마지막 한 칸이 혼자
   남는다. 고정 3열로 바꾸면 5개=3+2, 6개=3+3 이라 어떤 경우도 마지막 줄에 1개만 남지
   않는다. 좁은 화면에서 3열이 비좁아지는 지점(약 900px)부터는 아예 1열로 떨어뜨려
   — 2열 중간 단계를 넣으면 5개짜리가 2+2+1 로 다시 같은 문제가 생기기 때문에 건너뛴다. */
.ihwiz-scope-grid.wp-block-columns {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--ihwiz-rhythm-gap);
}
@media (max-width: 900px) {
	.ihwiz-scope-grid.wp-block-columns {
		grid-template-columns: 1fr;
	}
}
.ihwiz-scope-grid .ihwiz-scope {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	padding: var(--ihwiz-rhythm-card-pad);
	margin: 0;
}
.ihwiz-scope-grid .ihwiz-scope h4 {
	font-size: 1rem;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 0.5rem;
}
.ihwiz-scope-grid .ihwiz-scope p {
	color: var(--wp--preset--color--muted);
	font-size: 0.92rem;
	margin: 0;
}

/* 이런 상황이라면 — 체크 표시가 붙은 카드 목록 */
.ihwiz-situations {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--ihwiz-rhythm-gap);
	margin: 0;
	padding: 0;
}
.ihwiz-situation {
	position: relative;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	padding: var(--ihwiz-rhythm-card-pad) var(--ihwiz-rhythm-card-pad) var(--ihwiz-rhythm-card-pad) 2.75rem;
}
.ihwiz-situation::before {
	/* 아이콘 이미지 없이 순수 CSS 로 그리는 체크 표시(꺾은선 두 변을 45도 회전) */
	content: "";
	position: absolute;
	left: 1.35rem;
	top: 1.5rem;
	width: 0.55rem;
	height: 0.95rem;
	border: solid var(--wp--preset--color--accent);
	border-width: 0 3px 3px 0;
	transform: rotate(45deg);
}
.ihwiz-situation p {
	margin: 0;
	color: var(--wp--preset--color--contrast);
	font-size: 0.95rem;
}

/* 진행 방식 — 번호가 큰 단계 카드. 카드 사이 화살표는 그리드가 폭에 따라 줄바꿈되면
   위치가 어긋나 오히려 지저분해지므로, 카드마다 같은 강조색 상단 테두리로 "같은 트랙 위의
   단계"라는 연결감을 낸다(어떤 폭에서도 안 깨지는 방식). */
.ihwiz-steps {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--ihwiz-rhythm-gap);
	margin: 0;
	padding: 0;
}
.ihwiz-step {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-top: 3px solid var(--wp--preset--color--accent);
	border-radius: 10px;
	padding: var(--ihwiz-rhythm-card-pad);
}
.ihwiz-step__num {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--wp--preset--color--accent);
	display: block;
	margin-bottom: 0.5rem;
}
.ihwiz-step h3,
.ihwiz-step h4 {
	font-size: 1rem;
	margin: 0 0 0.4rem;
}
.ihwiz-step p {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: 0.92rem;
}

/* 산출물 — 박스 목록, 문서/자료를 받는 느낌(왼쪽 강조 바)
   T114 1차: repeat(6,1fr) 고정으로 orphan(5,6,8,9,10,12 전부 마지막 줄에 1개만 남는 경우
   없음)을 없앴으나, Guardian 실측으로 칸 폭이 1024px→132px, 900px 근처→114px 까지
   좁아져 '워드프레스 블록 테마 기반 웹사이트(스테이징 URL 포함)' 같은 긴 항목이 읽을 수
   없게 잘리는 걸 확인. **가독성이 orphan 회피보다 우선**이라는 판단(Opus)에 따라
   auto-fit(minmax(200px,1fr))로 되돌린다 — 칸이 200px 아래로는 절대 안 좁아지고, 대신
   항목 수에 따라 마지막 줄에 orphan 이 다시 생길 수 있음을 감수한다. */
.ihwiz-deliverables {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--ihwiz-rhythm-gap);
	margin: 0;
	padding: 0;
}
.ihwiz-deliverable {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-left: 3px solid var(--wp--preset--color--accent);
	border-radius: 10px;
	padding: var(--ihwiz-rhythm-card-pad);
	font-size: 0.95rem;
	color: var(--wp--preset--color--contrast);
}

/* 자주 묻는 질문 — core/details 아코디언 경계선·여백 정리(사이트 전체에서 FAQ 전용)
   T116: 컨테이너가 800px로 갇혀 다른 섹션(1504px)보다 안쪽에서 시작해 "다른 페이지에서
   옮겨온 것처럼" 보였다 — 컨테이너는 다른 섹션과 같은 폭으로 넓히고, 답변 본문(p)만
   읽기 폭(70ch)으로 제한해 "컨테이너는 넓게, 글은 좁게" 원칙을 그대로 따른다. */
main .wp-block-post-content > h2:has(+ .ihwiz-faq) {
	max-width: var(--wp--style--global--wide-size);
}
main .wp-block-post-content > .ihwiz-faq {
	max-width: var(--wp--style--global--wide-size);
}
main .wp-block-details {
	/* T115.3: .ihwiz-faq 래퍼는 넓혔지만(1600) 그 자신도 is-layout-constrained 라
	   자식(.wp-block-details, 실제로 눈에 보이는 아코디언 박스)이 다시 800px 기본값에
	   갇혔다 — 히어로 slides/controls 와 같은 중첩 버그. 여기서 직접 풀어준다. */
	max-width: none;
	border-top: 1px solid var(--wp--preset--color--border);
	padding: 1.1rem 0;
	margin: 0;
}
main .wp-block-details:last-of-type {
	border-bottom: 1px solid var(--wp--preset--color--border);
}
main .wp-block-details summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	list-style: none;
	position: relative;
	padding-right: 1.75rem;
}
main .wp-block-details summary::-webkit-details-marker {
	display: none;
}
main .wp-block-details summary::after {
	content: "+";
	position: absolute;
	right: 0;
	top: 0;
	color: var(--wp--preset--color--accent);
	font-size: 1.2rem;
	line-height: 1;
}
main .wp-block-details[open] summary::after {
	content: "\2212";
}
main .wp-block-details p {
	max-width: 70ch;
	margin: 0.75rem 0 0;
	color: var(--wp--preset--color--muted);
}
main .wp-block-details summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* ── 포트폴리오 사례 카드 ── */
.ihwiz-case {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	padding: 1.75rem;
}
.ihwiz-case__tag {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8rem;
	color: var(--wp--preset--color--accent);
	display: block;
	margin-bottom: 0.6rem;
}
.ihwiz-case h3 {
	font-size: 1.1rem;
	margin: 0 0 0.5rem;
}
.ihwiz-case p {
	color: var(--wp--preset--color--muted);
	font-size: 0.92rem;
}
.ihwiz-case__result {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--wp--preset--color--border);
	font-size: 0.85rem;
	color: var(--wp--preset--color--contrast);
}

/* ── T131: v5 시안 12~15섹션 밀도를 위한 신규 컴포넌트 5종 (Pane1 과 클래스명 합의 완료) ──
   기존 8섹션 컴포넌트(scope-grid/situations/steps/deliverables)는 그대로 두고, 아래는
   시안에만 있고 지금까지 파서에 없던 섹션 유형을 추가한다. */

/* 판단 기준 — 비교표 바로 아래 요약 규칙 목록. 카드가 아니라 짧은 목록형이라 다른 그리드처럼
   넓히지 않고 읽기 폭(62ch)을 유지한다. */
.ihwiz-decision-points {
	list-style: none;
	display: grid;
	gap: calc(var(--ihwiz-rhythm-gap) / 2);
	margin: 0;
	padding: 0;
	max-width: 62ch;
}
.ihwiz-decision-point {
	position: relative;
	padding-left: 1.75rem;
	color: var(--wp--preset--color--contrast);
	font-size: 0.98rem;
	font-weight: 600;
}
.ihwiz-decision-point::before {
	content: "\2192"; /* →, situation 의 체크 표시와 구분되는 화살표 — "이 조건이면 이 유형" */
	position: absolute;
	left: 0;
	color: var(--wp--preset--color--accent);
	font-weight: 700;
}

/* 무엇을 하는가 / 무엇을 받는가 — 같은 목록 패턴을 공유하는 두 컴포넌트(Pane1 합의 클래스).
   기존 deliverables(산출물, 8섹션용)와 별개로, 밀도 보강용 신규 섹션 쌍이다. 공통 규칙을
   함께 선택자로 묶고, 나중에 한쪽만 바꿀 수 있게 개별 클래스도 남겨둔다. */
.ihwiz-actions,
.ihwiz-outcomes {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--ihwiz-rhythm-gap);
	margin: 0;
	padding: 0;
}
.ihwiz-action,
.ihwiz-outcome {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-left: 3px solid var(--wp--preset--color--accent);
	border-radius: 10px;
	padding: var(--ihwiz-rhythm-card-pad);
	font-size: 0.95rem;
	color: var(--wp--preset--color--contrast);
}
.ihwiz-action h4,
.ihwiz-outcome h4 {
	font-size: 1rem;
	margin: 0 0 0.4rem;
}
.ihwiz-action p,
.ihwiz-outcome p {
	color: var(--wp--preset--color--muted);
	font-size: 0.92rem;
	margin: 0;
}
/* "받는가"(outcomes)는 산출물류라 보조색으로만 살짝 구분 — 구분은 앞의 h2 제목이 이미
   의미로 나누므로 색은 보조 신호일 뿐이다. */
.ihwiz-outcome {
	border-left-color: var(--wp--preset--color--accent-2);
}

/* 전체폭 몰입 밴드 — 시안의 두 번째 몰입 섹션(유형별 고유 시각화: 타임라인/VS비교/대시보드/
   페르소나 등이 들어갈 자리). GSAP·three.js 는 아직 넣지 않는다(T131 지시) — 구조와 배경만
   지금 확보해둔다. 배경은 밝은 톤(surface-2)만 쓴다 — ABC4FF/87BFFF 는 글자색 금지라 배경
   위 글자는 반드시 contrast(짙은 남색)로 덮어쓴다. */
main .wp-block-post-content > .ihwiz-immersive-band {
	/* T116.1과 동일한 이유 — 파서가 align 속성 없이 낼 가능성에 대비해 클래스로 직접 넓힌다. */
	max-width: none;
}
.ihwiz-immersive-band {
	background: var(--wp--preset--color--surface-2);
	padding-block: var(--wp--preset--spacing--50);
	text-align: center;
}
.ihwiz-immersive-band h2,
.ihwiz-immersive-band h3 {
	color: var(--wp--preset--color--contrast);
	margin: 0 0 0.75rem;
}
.ihwiz-immersive-band p {
	color: var(--wp--preset--color--muted);
	max-width: 56ch;
	margin: 0 auto;
}
.ihwiz-immersive-band__inner {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

/* 비교표 그리드 — core/table 대신 반응형 카드형 그리드(Pane1 합의, 클래스 확정본).
   .ihwiz-compare-head(머리글, 아이콘 칸 비어있음) / .ihwiz-compare-row(데이터 행) /
   .ihwiz-compare-icon(첫 열, 선택적) / .ihwiz-compare-label(첫 열 텍스트) /
   .ihwiz-compare-value(값 칸, 행마다 개수가 3~5개로 달라질 수 있음).
   열 개수를 고정 grid-template-columns 로 짜지 말라는 지시라 flex 로 짠다 — 라벨은
   고정폭(flex:0 0 200px), 값 칸들은 flex:1 로 "행 안에서 균등 분배"된다. 같은 표 안에서는
   머리글·모든 행의 값 개수가 항상 같다(파서 계약)라 flex 만으로도 세로 정렬이 맞는다.
   모바일 세로 접힘과 첫 열 아이콘은 전부 CSS 몫이다(Opus 지시). */
.ihwiz-compare-grid {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	overflow: hidden;
	margin: 0;
}
.ihwiz-compare-head,
.ihwiz-compare-row {
	display: flex;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.ihwiz-compare-grid > *:last-child {
	border-bottom: none;
}
.ihwiz-compare-head {
	background: var(--wp--preset--color--primary);
	font-weight: 600;
}
.ihwiz-compare-row {
	background: var(--wp--preset--color--surface);
}
.ihwiz-compare-icon,
.ihwiz-compare-label,
.ihwiz-compare-value {
	padding: 0.9rem 1.1rem;
	font-size: 0.9rem;
	display: flex;
	align-items: center;
	margin: 0;
}
.ihwiz-compare-icon {
	/* 아이콘은 선택 — 없는 행도 있다. 있을 때만 폭을 차지하고 없으면 그 칸 자체가 마크업에
	   없어 flex 흐름에서 자연스럽게 빠진다(레이아웃 무너짐 없음). */
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
	padding-right: 0;
	color: var(--wp--preset--color--accent);
}
.ihwiz-compare-label {
	flex: 0 0 200px;
	gap: 0.6rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}
.ihwiz-compare-value {
	flex: 1 1 0;
	min-width: 0;
	color: var(--wp--preset--color--muted);
}
.ihwiz-compare-head .ihwiz-compare-label,
.ihwiz-compare-head .ihwiz-compare-value {
	color: var(--wp--preset--color--base);
}
@media (max-width: 900px) {
	.ihwiz-compare-head {
		display: none; /* 머리글은 숨기고, 값 칸 앞에 라벨을 인라인으로 붙인다 */
	}
	.ihwiz-compare-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.35rem;
		padding: 0.9rem 1.1rem;
	}
	.ihwiz-compare-row .ihwiz-compare-label,
	.ihwiz-compare-row .ihwiz-compare-value {
		padding: 0;
		flex: none;
		width: 100%;
	}
	/* 파서가 값 칸별 라벨을 따로 안 주므로, 현재 사이트 전체 카피가 통일해서 쓰는 3개 값
	   순서(장점|고려할 점|유리한 경우)를 전제로 CSS에서 라벨을 주입한다 — 앞으로 다른 순서·
	   개수의 비교표가 추가되면 이 nth-of-type 라벨도 함께 검토해야 한다. */
	.ihwiz-compare-value:nth-of-type(1)::before,
	.ihwiz-compare-value:nth-of-type(2)::before,
	.ihwiz-compare-value:nth-of-type(3)::before {
		display: block;
		font-weight: 700;
		color: var(--wp--preset--color--accent);
	}
	.ihwiz-compare-value:nth-of-type(1)::before {
		content: "장점";
	}
	.ihwiz-compare-value:nth-of-type(2)::before {
		content: "고려할 점";
	}
	.ihwiz-compare-value:nth-of-type(3)::before {
		content: "유리한 경우";
	}
}

/* 크로스셀 — 서비스 간 다음 단계 흐름, "현재 단계"만 보라(#613DC1)로 표시한다. 이 색은
   전 페이지 팔레트(블루 계열)의 예외로, v5 시안에서 크로스셀 배지 하나에만 쓰기로 확정된
   값이다(T128) — 지역 변수로 격리해 다른 곳에 새지 않게 한다.
   현재 단계 표기는 .ihwiz-cross-sell__badge 로 확정(Pane1 통보) — 이전 aria-current/
   .is-current 잠정 선택자는 걷어낸다. */
:root {
	--ihwiz-color-current-step: #613dc1;
}
.ihwiz-cross-sell {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}
.ihwiz-cross-sell > * {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding-block: 0.75rem;
	font-size: 0.92rem;
	color: var(--wp--preset--color--muted);
}
.ihwiz-cross-sell > *:not(:last-child) {
	padding-right: 1.5rem;
	position: relative;
}
.ihwiz-cross-sell > *:not(:last-child)::after {
	content: "\2192"; /* → */
	position: absolute;
	right: 0.15rem;
	color: var(--wp--preset--color--border);
}
.ihwiz-cross-sell__badge {
	color: var(--ihwiz-color-current-step);
	font-weight: 700;
}
@media (max-width: 900px) {
	.ihwiz-cross-sell {
		flex-direction: column;
		align-items: flex-start;
	}
	.ihwiz-cross-sell > *:not(:last-child) {
		padding-right: 0;
	}
	.ihwiz-cross-sell > *:not(:last-child)::after {
		content: "\2193"; /* ↓ */
		position: static;
		margin-left: 0.5rem;
	}
}

/* ── 푸터 ── */
/* 밝은 테마 전체 원칙("전 페이지가 밝은 배경") 대로 푸터도 라이트 — surface-2(옅은 회색)로
   본문 배경과 살짝만 구분한다. 다크 섹션은 CTA 밴드 하나로 충분하다. */
.ihwiz-footer {
	border-top: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--surface-2);
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}
.ihwiz-footer h3 {
	font-size: 0.9rem;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 0.75rem;
}
.ihwiz-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ihwiz-footer li {
	margin-bottom: 0.45rem;
}
.ihwiz-footer a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	font-size: 0.9rem;
}
.ihwiz-footer a:hover {
	/* accent-2 사용(T104 후속) — accent(4.53:1, surface-2 대비 여유 0.03)보다
	   accent-2(7.21:1, surface-2 대비)가 AAA 로 훨씬 여유 있다. */
	color: var(--wp--preset--color--accent-2);
}
.ihwiz-footer__bottom {
	border-top: 1px solid var(--wp--preset--color--border);
	margin-top: var(--wp--preset--spacing--40);
	padding-top: 1.5rem;
	color: var(--wp--preset--color--muted);
	font-size: 0.8rem;
}