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

/* ── 세로 리듬 토큰 (SPEC.md '세로 리듬 규칙'이 단일 원본) ──
   섹션마다 간격을 따로 정하지 않는다 — 여기 정의한 3단계(섹션 간격/제목-내용 간격/그리드
   gap·카드 안쪽 여백)만 전 페이지에서 재사용한다. 값을 바꿀 일이 있으면 여기만 고친다. */
:root {
	/* 사용자 지시로 섹션 간격을 고정 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;
}
/* 그리드가 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);
}

/* 홈(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;
	}
}
/* 한글 어절이 중간에서 끊기지 않게(실측 결함 대응) — 제목·본문 전반. overflow-wrap 은 그대로 둬서
   아주 긴 토큰(URL 등)은 필요하면 여전히 줄바꿈된다.
   h1.wp-block-post-title / .wp-block-heading 을 별도로 넣는 이유: 코어가
   .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,
.ihwiz-situations,
.ihwiz-scope-grid,
.ihwiz-steps,
.ihwiz-deliverables,
.ihwiz-actions,
.ihwiz-outcomes,
.ihwiz-compare-grid {
	opacity: 1;
	transform: none;
}
/* scroll-reveal.js 가 이 클래스를 붙인 뒤부터만 초기 숨김 상태로 바뀐다. 그 뒤 실제 등장
   애니메이션(투명도·이동)은 GSAP 이 인라인 스타일로 직접 구동한다(아래는 JS 로딩 전
   깜빡임을 막기 위한 초기값일 뿐, transition 은 CSS 가 아니라 GSAP 쪽에서 건다).
   카드 격자 4종(scope-grid/steps/deliverables/actions/outcomes/compare-grid)은 .ihwiz-reveal
   클래스 없이도 scroll-reveal.js 가 직접 선택자로 잡으므로 여기서도 같이 선언해야
   JS 로딩 직후 순간적으로 드러났다 사라지는 깜빡임이 없다. */
body.ihwiz-js-ready .ihwiz-reveal,
body.ihwiz-js-ready .ihwiz-situations,
body.ihwiz-js-ready .ihwiz-scope-grid,
body.ihwiz-js-ready .ihwiz-steps,
body.ihwiz-js-ready .ihwiz-deliverables,
body.ihwiz-js-ready .ihwiz-actions,
body.ihwiz-js-ready .ihwiz-outcomes,
body.ihwiz-js-ready .ihwiz-compare-grid {
	opacity: 0;
	transform: translateY(16px);
}
@media (prefers-reduced-motion: reduce) {
	body.ihwiz-js-ready .ihwiz-reveal,
	body.ihwiz-js-ready .ihwiz-situations,
	body.ihwiz-js-ready .ihwiz-scope-grid,
	body.ihwiz-js-ready .ihwiz-steps,
	body.ihwiz-js-ready .ihwiz-deliverables,
	body.ihwiz-js-ready .ihwiz-actions,
	body.ihwiz-js-ready .ihwiz-outcomes,
	body.ihwiz-js-ready .ihwiz-compare-grid {
		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" 블록처럼 루트 패딩을 자동으로 물려받지 않는다 —
	   그래서 명시적으로 좌우 여백을 준다(실측 결함: 사이트 타이틀·드롭다운 화살표 잘림). */
	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 같은 블록 속성 지원을 못 받음) — 그래서
	   명시적으로 풀어준다. 재검증 실측에서 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% 지점)에서는 네트워크가 페이드아웃되고 그 오른쪽에서만
	   선명하게 보이도록 마스크로 가린다(다듬기 — 투명도를 낮추는 대신 텍스트 영역만
	   비켜나게 해서, 밝은 배경에서 필요한 가시성은 유지하면서 헤드라인과 겹치지 않게 한다). */
	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;
}
/* 히어로 일러스트 — 그라디언트(z0)보다 위, three.js 네트워크(z1)보다 아래에 둔다.
   네트워크 캔버스가 이미 왼쪽 텍스트 영역을 마스크로 비켜가므로(위 .ihwiz-hero__canvas
   mask-image 참조), 같은 오른쪽 구역에 배치하면 겹쳐도 자연스럽다 — 캔버스 로드 전에는
   이 그림이 유일한 시각 요소, 로드 후에는 그 위로 네트워크 애니메이션이 얹힌다. */
.ihwiz-hero__illustration {
	position: absolute;
	z-index: 0;
	top: 50%;
	right: 2%;
	transform: translateY(-50%);
	width: min(42%, 560px);
	height: auto;
	opacity: 0.92;
	/* 경미한 다듬기 — 이미지 자체가 불투명 사각형이라 그라디언트 위에 얹으면 가장자리가 배경과
	   딱 잘려 옅은 경계선으로 보였다(Guardian 실측, 경계 위아래 229 대 253). 네 모서리를
	   투명으로 페이드시켜 그라디언트에 자연스럽게 섞이게 한다 — 이미지 내용 자체는 그대로,
	   테두리만 부드럽게. */
	mask-image: radial-gradient(circle at center, #000 62%, transparent 100%);
	-webkit-mask-image: radial-gradient(circle at center, #000 62%, transparent 100%);
}
@media (max-width: 767px) {
	/* 좁은 화면은 three.js 캔버스도 안 뜬다(hero-canvas.js 의 767px 컷) — 같은 원칙으로
	   정적 일러스트도 숨겨 텍스트에 화면을 온전히 내준다. 컷 지점을 767px 로 캔버스와
	   맞춘다(Opus 지적 — 원래 900px 로 썼던 건 다른 컴포넌트의 관용값을 그대로 가져온
	   것일 뿐 의도한 차이가 아니었다). */
	.ihwiz-hero__illustration {
		display: none;
	}
}
.ihwiz-hero__inner {
	/* WP 코어의 기본 constrained 레이아웃이 이 블록을 contentSize(800px)로 가운데
	   가둔다 — 그래서 헤드라인·CTA·컨트롤이 1600px 화면에서 x=400 근처에 떠 있었다.
	   max-width 를 풀어 다른 섹션의 h2/그리드 왼쪽 끝(x≈48)과 맞춘다. 글줄 길이는
	   .ihwiz-hero__headline(min(34ch,820px))·.ihwiz-hero__sub(52ch)가 이미 제한하므로
	   컨테이너를 넓혀도 텍스트 자체가 늘어지지 않는다.
	   처음엔 여기 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);
	/* 슬라이드 헤드라인은 짧은 한 줄 문장으로 설계했으므로(18~24자) 예전의 18ch 제한을
	   풀었다 — 그 값은 4줄로 접히던 긴 헤드라인 시절 기준이라 지금 쓰면 오히려 불필요하게
	   일찍 꺾인다.
	   ch 단위만으로는 폰트가 커지면(히어로 폰트 64px) 상한이 사실상 무력화된다
	   (34ch=1514px인데 앞서 넓어진 컨테이너가 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슬라이드 ──
   .ihwiz-hero__slides 를 grid 로 만들고 모든 슬라이드를 같은 셀(1/1)에 겹쳐 쌓는다 — 이러면
   숨겨진 슬라이드도 grid 트랙 크기 계산에는 계속 참여해서, 컨테이너 높이가 "가장 큰 슬라이드"
   기준으로 고정된다(전환할 때 레이아웃이 흔들리지 않는다, CLS 0). 보이기/숨기기는 display 가
   아니라 opacity+visibility 로만 하는 이유가 이것 — display:none 이면 그 슬라이드가 grid
   높이 계산에서 빠져버린다. */
/* .ihwiz-hero__inner 를 넓혀도 그 직계 자식들(.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);
}
/* 자동전환 일시정지/재생 토글(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 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 {
	/* 본문 링크 취급 — 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 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=회색)은 밝은 배경 기준이라 이 안에서는 안 보이므로
   명시적으로 밝은 텍스트로 덮어쓴다.
   '밴드'라는 이름대로 화면 전체 폭을 가로지르도록 align:full 로 바꿨다(히어로와 같은
   구조 재사용) — 그래서 모서리를 둥글릴 이유가 없어 border-radius 를 뺐다. 안쪽 글자는
   .ihwiz-cta-band__inner 가 담당하는데, 부모(.ihwiz-cta-band)의 layout:constrained 속성
   덕분에 WP 코어가 그 직계 자식에 자동으로 contentSize(800px) max-width 를 걸어준다(홈
   히어로의 .ihwiz-hero__inner 와 동일한 원리) — 별도 CSS 없이 그대로 좁게 읽힌다. */
/* 하위 페이지 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 p {
	color: color-mix(in srgb, var(--wp--preset--color--base) 72%, transparent);
	max-width: 48ch;
	margin: 0 auto 1.5rem;
}
/* T313(시안 재대조): 버튼 기본값(accent #090C9B 배경, theme.json)이 이 밴드의 진남색
   (#03045E) 배경과 톤이 비슷해 존재감이 약했다 — 시안은 흰 배경 알약형 버튼 + 화살표다.
   Pane1(T312)이 이 밴드에 표준 wp:buttons 마크업을 넣은 것을 실측 확인(class="wp-block-button
   wp-block-button__link", 커스텀 클래스 없음) — 그래서 밴드 스코프로 기본 버튼을 덮어쓴다. */
.ihwiz-cta-band .wp-block-button__link {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
	border-radius: 999px;
	padding: 0.75rem 1.5rem;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}
.ihwiz-cta-band .wp-block-button__link:hover,
.ihwiz-cta-band .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--surface-2);
	color: var(--wp--preset--color--primary);
}
.ihwiz-cta-band .wp-block-button__link::after {
	content: "\2192"; /* → 화살표, 시안 대조 */
	font-weight: 700;
}

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

/* 섹션 제목(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) {
	/* 새 컴포넌트 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 은 그대로 둬도 무해하다.
	   이 섹션은 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, 균등폭)을 카드 그리드로 덮어쓴다.
   항목 수가 페이지마다 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 h3 {
	/* T309: 파서가 h4->h3로 바꿨다(제목 단계 건너뜀 접근성 수정, T308 실측 지적).
	   .ihwiz-step/.ihwiz-action/.ihwiz-outcome 의 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;
}

/* 이런 상황이라면 — 시안 정합(T313): 카드 박스를 걷어내고 큰 아이콘+캡션형으로 바꿨다.
   실측 확인: 라이브 마크업은 <li class="ihwiz-situation" data-icon="...">문장</li> 처럼
   텍스트가 li 에 바로 들어간다(중첩 <p> 없음) — 예전 .ihwiz-situation p 규칙은 애초에
   걸린 적 없는 죽은 선택자였다(삭제, 대신 li 자체에 텍스트 스타일을 준다). 아이콘은
   기존 CSS 드로잉 체크 표시(border 회전) 대신 다른 카드들과 같은 mask 아이콘 방식을
   쓴다 — 이유는 아래 [data-icon] 절 주석 참고(border 체크는 mask 와 같이 못 쓴다는 게
   먼저 실측으로 밝혀졌었다). */
.ihwiz-situations {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--ihwiz-rhythm-gap) 1.5rem;
	margin: 0;
	padding: 0;
}
.ihwiz-situation {
	position: relative;
	padding-top: 3.25rem;
	text-align: center;
	color: var(--wp--preset--color--contrast);
	font-size: 0.95rem;
	line-height: 1.5;
}

/* 진행 방식 — 번호가 큰 단계 카드. 카드 사이 화살표는 그리드가 폭에 따라 줄바꿈되면
   위치가 어긋나 오히려 지저분해지므로, 카드마다 같은 강조색 상단 테두리로 "같은 트랙 위의
   단계"라는 연결감을 낸다(어떤 폭에서도 안 깨지는 방식). */
.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);
}

/* 산출물 — 박스 목록, 문서/자료를 받는 느낌(왼쪽 강조 바)
   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 전용)
   컨테이너가 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 {
	/* .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__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);
}

/* ── 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;
	/* 아래 [data-icon]::before 목록의 mask-image 규칙과 겹친다: 파서가 이 요소에도 data-icon
	   을 붙이므로(예: monitor, code) 텍스트 화살표 대신 해당 아이콘을 마스크로 그린다.
	   .ihwiz-situation 과 같은 이유(특이도로 정리) — 아래 [data-icon] 규칙 참고. */
	color: var(--wp--preset--color--accent);
	font-weight: 700;
}

/* 무엇을 하는가 / 무엇을 받는가 — 같은 목록 패턴을 공유하는 두 컴포넌트(Pane1 합의 클래스).
   기존 deliverables(산출물, 8섹션용)와 별개로, 밀도 보강용 신규 섹션 쌍이다. 공통 규칙을
   함께 선택자로 묶고, 나중에 한쪽만 바꿀 수 있게 개별 클래스도 남겨둔다. */
/* 시안 정합(T313): 이 두 컴포넌트도 situations 와 같은 원칙 — 카드 박스 제거, 큰 아이콘+
   캡션형. 실측 확인: 라이브 마크업은 <li class="ihwiz-action" data-icon="..."><strong>라벨
   </strong>: 설명</li> 또는 <li ...><a href="...">텍스트</a></li> 처럼 li 안에 직접
   들어간다(중첩 <h4>/<p> 없음) — 예전 .ihwiz-action h4/p, .ihwiz-outcome h4/p 규칙은
   걸린 적 없는 죽은 선택자였다(삭제). */
.ihwiz-actions,
.ihwiz-outcomes {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--ihwiz-rhythm-gap) 1.5rem;
	margin: 0;
	padding: 0;
}
.ihwiz-action,
.ihwiz-outcome {
	position: relative;
	padding-top: 3.25rem;
	text-align: center;
	font-size: 0.95rem;
	color: var(--wp--preset--color--contrast);
	line-height: 1.5;
}
.ihwiz-action a {
	color: inherit;
	text-decoration: none;
}
.ihwiz-action a:hover,
.ihwiz-action a:focus-visible {
	color: var(--wp--preset--color--accent);
}

/* 전체폭 몰입 밴드 — 시안에 두 가지 성격이 섞여 있다(재조사, 픽셀 실측):
   '## 문제 제기'(허브 페이지) = 연한 파랑 배경 밴드 / '## 몰입 밴드'(상세 페이지 인용구) =
   거의 흰 배경 + 따옴표 표현. 파서가 후자에만 .ihwiz-immersive-band--quote 를 더 낸다
   (Pane1 확정) — 그래서 공통 골격(여백·정렬)은 기본 클래스에 두고 배경·인용 표현만
   수식자로 덮어쓴다(회귀 방지, 기존 규칙은 안 지움).
   기본 배경은 시안 실측값(#C4DAFD)을 직접 박지 않고 팔레트 토큰 surface-tint(#ABC4FF)를
   기준으로 color-mix 해 톤을 낮춘다 — 색 관리를 theme.json 한 곳에 유지하기 위함. ABC4FF
   가 글자색으로는 못 쓰는 토큰이라(실측: 대비 실패) 배경 위 글자는 그대로 contrast(짙은
   남색)로 덮어쓴다. */
main .wp-block-post-content > .ihwiz-immersive-band {
	/* 위와 동일한 이유 — 파서가 align 속성 없이 낼 가능성에 대비해 클래스로 직접 넓힌다. */
	max-width: none;
}
.ihwiz-immersive-band {
	background: color-mix(in srgb, var(--wp--preset--color--surface-tint) 60%, var(--wp--preset--color--base));
	padding-block: var(--wp--preset--spacing--50);
	text-align: center;
}
/* 인용구형(--quote) — 시안이 거의 흰 배경(실측 254,254,254)에 큰 따옴표 장식만 있다.
   about-vision.webp 기준: 여는 따옴표는 헤드라인 왼쪽 위, 닫는 따옴표는 오른쪽 아래에
   걸쳐 있다. 별도 마크업 없이 CSS 생성 콘텐츠(quotes)만으로 구현 — 파서가 여는/닫는
   따옴표용 엘리먼트를 새로 안 내도 된다.
   T313 실측 수정: 홈의 인용 밴드가 "작은 회색 한 줄"로 존재감이 없다는 지적을 받고 실제
   라이브 마크업을 열어보니 원인이 있었다 — 이 문단은 <h2>/<h3> 가 아니라 그냥 <p> 하나였다
   (홈은 immersive_band_block() 이 헤딩 없이 문단만 낸다). 아래 h2/h3 전용 규칙은 이 케이스에
   전혀 안 걸리고 있었다 — p 를 추가해서 실제로 걸리게 한다(h2/h3 쓰는 다른 페이지가 있다면
   그쪽도 계속 스타일을 받으므로 회귀 없음, 선택자만 넓힌 것). 시안 대조로 글자 크기도
   키운다(기존 기본 문단 크기 → 큰 헤드라인급). */
.ihwiz-immersive-band--quote {
	background: var(--wp--preset--color--base);
}
.ihwiz-immersive-band--quote h2,
.ihwiz-immersive-band--quote h3,
.ihwiz-immersive-band.ihwiz-immersive-band--quote p {
	/* p 선택자만 두 클래스로 묶어 특이도를 올린다 — 뒤에 나오는 .ihwiz-immersive-band p
	   (기본 muted 색상 규칙, 1클래스+타입, 특이도 동률)에 소스 순서로 밀려 색이 도로
	   muted 로 돌아가던 것을 실측(getComputedStyle)으로 잡았다. h2/h3 는 밀릴 대상인
	   .ihwiz-immersive-band h2,h3 규칙이 이 규칙보다 앞에 있어 원래도 안전했다. */
	position: relative;
	display: inline-block;
	padding-inline: 2.2rem;
	margin: 0;
	font-size: clamp(1.4rem, 1vw + 1.2rem, 1.9rem);
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	max-width: 44ch;
}
.ihwiz-immersive-band--quote h2::before,
.ihwiz-immersive-band--quote h3::before,
.ihwiz-immersive-band--quote p::before,
.ihwiz-immersive-band--quote h2::after,
.ihwiz-immersive-band--quote h3::after,
.ihwiz-immersive-band--quote p::after {
	position: absolute;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 2.6em;
	line-height: 1;
	color: var(--wp--preset--color--accent);
}
.ihwiz-immersive-band--quote h2::before,
.ihwiz-immersive-band--quote h3::before,
.ihwiz-immersive-band--quote p::before {
	content: "\201C";
	left: -0.1em;
	top: -0.15em;
}
.ihwiz-immersive-band--quote h2::after,
.ihwiz-immersive-band--quote h3::after,
.ihwiz-immersive-band--quote p::after {
	content: "\201D";
	right: -0.1em;
	bottom: -0.55em;
}
/* 진남색 배경 아이콘형(--steps) — 5단계를 가로 일렬, 원형 배지 안에 숫자 대신 아이콘.
   T307(Pane1 요청): 시안은 원형 아이콘+화살표 연결이었으나, 화살표 연결선은 이번
   세션에서 세 차례 수정 끝에 폭에 따라 허공에 뻗는 문제로 이미 제거한 적이 있어(B2
   경위 참고) 다시 넣지 않는다 — 가로 배치·여백만으로 흐름을 표현한다(Pane1 합의,
   순서는 왼쪽부터 읽는 순서와 라벨로 충분). 이 변형은 B2의 숫자 배지 대신 각 항목의
   data-icon을 원형 배지 안에 그린다(아래 counter-increment:none으로 숫자 표시를 끈다).
   li 하나가 ::before(원형 배경)·::after(아이콘 마스크) 두 pseudo-element를 나눠 쓴다 —
   mask-image는 요소 전체의 가시 영역을 그 모양대로 잘라내므로, 흰 원 배경과 그 위의
   아이콘을 같은 요소 하나로는 동시에 표현할 수 없다(마스크가 원 배경까지 지워버린다). */
.ihwiz-immersive-band--steps {
	background: var(--wp--preset--color--primary);
}
.ihwiz-immersive-band--steps h2,
.ihwiz-immersive-band--steps h3 {
	color: var(--wp--preset--color--base);
}
.ihwiz-immersive-band.ihwiz-immersive-band--steps p {
	/* 특이도를 두 클래스로 올려둔다 — 실측으로 확인한 특이도 사고(T132)와 같은 이유:
	   아래 .ihwiz-immersive-band p(1클래스)가 소스 순서상 이 규칙 뒤에 있어, 클래스 1개로만
	   쓰면 특이도가 같아 소스 순서로 뒤엣것(muted 색)이 이겨버린다. */
	color: color-mix(in srgb, var(--wp--preset--color--base) 78%, transparent);
}
.ihwiz-immersive-band--steps .ihwiz-steps {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2rem 2.5rem;
	margin-top: var(--wp--preset--spacing--40);
	position: relative;
	container-type: inline-size;
	container-name: ihwiz-start-band;
}
/* T313(시안 재대조): 화살표를 다시 넣는다 — 이 밴드는 항상 정확히 5개 고정이라(진행방식
   처럼 페이지마다 3/4/5개로 갈리는 경우와 다르다) 안전폭 계산이 한 번으로 끝난다.
   1차 계산 오류(실측으로 발견) — width:8.5rem 을 그대로 136px 로 썼는데, 이 요소는
   box-sizing 기본값(content-box)이라 padding-inline(0.5rem×2=16px)이 width 위에 "더해져"
   실제 렌더 폭은 152px 였다(puppeteer getBoundingClientRect 로 직접 재서 확인). 아래는
   실측값(152px)으로 다시 계산한 것이다: 원 중심 간 거리 = 항목폭(152px) + 열간격(2.5rem=
   40px) = 192px, 5개 한 줄에 필요한 폭 = 4×192+152 = 920px — 여유를 두고 940px 이상에서만
   켠다(미만이면 줄바꿈 가능성이 있어 선을 아예 숨긴다 — B2 에서 검증된 것과 같은 원칙,
   표시 안 함이 허공에 뻗는 것보다 낫다). 선은 뷰포트가 아니라 원 중심 간 고정폭
   (4×192=768px)으로 그리고 컨테이너 안에서 좌우 중앙정렬해, 컨테이너가 940px보다
   넓어져도(가운데 정렬된 줄 자체는 폭이 안 바뀌므로) 정확히 원들 사이만 지나가게 한다.
   실측 검증: 940~1600px 구간을 여러 폭에서 직접 렌더해 rowCount(항목이 실제로 몇 줄에
   걸치는지)와 화살표 표시 여부를 대조했다(전부 rowCount=1 일 때만 표시됨 확인, 완료
   보고에 표 첨부). */
@container ihwiz-start-band (min-width: 940px) {
	.ihwiz-immersive-band--steps .ihwiz-steps::before {
		content: "";
		position: absolute;
		top: 1.75rem;
		left: 50%;
		width: 48rem; /* 4 × 192px = 768px */
		transform: translate(-50%, -50%);
		height: 0;
		border-top: 2px dashed color-mix(in srgb, var(--wp--preset--color--base) 40%, transparent);
		z-index: 0;
	}
}
.ihwiz-immersive-band--steps .ihwiz-step {
	position: relative;
	z-index: 1; /* 원형 배경(불투명 흰색)이 뒤의 연결선을 자연스럽게 끊어 보이게 한다 */
}
.ihwiz-immersive-band--steps .ihwiz-step {
	background: none;
	border: none;
	padding: 4.25rem 0.5rem 0;
	margin: 0;
	width: 8.5rem;
	text-align: center;
	color: var(--wp--preset--color--base);
	font-weight: 600;
	counter-increment: none; /* 이 변형은 숫자 대신 아이콘을 쓰므로 카운터 값 자체는 안 그린다 */
}
.ihwiz-immersive-band--steps .ihwiz-step::before {
	/* 원형 배경 */
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--base);
}
.ihwiz-immersive-band--steps .ihwiz-step::after {
	/* 아이콘(마스크) — 원 중앙 */
	content: "";
	position: absolute;
	top: 0.85rem;
	left: 50%;
	transform: translateX(-50%);
	width: 1.8rem;
	height: 1.8rem;
	background-color: var(--wp--preset--color--primary);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-image: url("../icons/mono/check-circle-2.svg"); /* 기본값(default 아이콘) */
	mask-image: url("../icons/mono/check-circle-2.svg");
}
/* data-icon 값별 아이콘 재정의 — 기존 카드형 시스템과 같은 44종, ::after 전용으로 다시 쓴다.
   아래 :nth-child 규칙과 특이도가 동률(둘 다 0,3,1)이라 소스 순서로 갈리므로, 이 블록을
   :nth-child 블록보다 반드시 앞에 둔다(뒤에 있는 규칙이 이긴다 — T132 특이도 사고와 같은
   원리). 다른 페이지는 이 밴드 전용 컨테이너 클래스를 안 쓰므로 여기 값은 사실상 현재
   미사용이지만, 나중에 이 위치의 라벨이 바뀌거나 icon-map.json 에 실제로 등록되면 자동으로
   맞는 아이콘이 나오게 대비해 둔다. */
.ihwiz-immersive-band--steps .ihwiz-step[data-icon="layout-grid"]::after { -webkit-mask-image: url("../icons/mono/layout-grid.svg"); mask-image: url("../icons/mono/layout-grid.svg"); }
.ihwiz-immersive-band--steps .ihwiz-step[data-icon="server"]::after { -webkit-mask-image: url("../icons/mono/server.svg"); mask-image: url("../icons/mono/server.svg"); }
.ihwiz-immersive-band--steps .ihwiz-step[data-icon="wrench"]::after { -webkit-mask-image: url("../icons/mono/wrench.svg"); mask-image: url("../icons/mono/wrench.svg"); }
.ihwiz-immersive-band--steps .ihwiz-step[data-icon="megaphone"]::after { -webkit-mask-image: url("../icons/mono/megaphone.svg"); mask-image: url("../icons/mono/megaphone.svg"); }
.ihwiz-immersive-band--steps .ihwiz-step[data-icon="shield-check"]::after { -webkit-mask-image: url("../icons/mono/shield-check.svg"); mask-image: url("../icons/mono/shield-check.svg"); }
.ihwiz-immersive-band--steps .ihwiz-step[data-icon="building-2"]::after { -webkit-mask-image: url("../icons/mono/building-2.svg"); mask-image: url("../icons/mono/building-2.svg"); }
.ihwiz-immersive-band--steps .ihwiz-step[data-icon="folder"]::after { -webkit-mask-image: url("../icons/mono/folder.svg"); mask-image: url("../icons/mono/folder.svg"); }
.ihwiz-immersive-band--steps .ihwiz-step[data-icon="cloud"]::after { -webkit-mask-image: url("../icons/mono/cloud.svg"); mask-image: url("../icons/mono/cloud.svg"); }
.ihwiz-immersive-band--steps .ihwiz-step[data-icon="calendar"]::after { -webkit-mask-image: url("../icons/mono/calendar.svg"); mask-image: url("../icons/mono/calendar.svg"); }
.ihwiz-immersive-band--steps .ihwiz-step[data-icon="layers"]::after { -webkit-mask-image: url("../icons/mono/layers.svg"); mask-image: url("../icons/mono/layers.svg"); }
.ihwiz-immersive-band--steps .ihwiz-step[data-icon="network"]::after { -webkit-mask-image: url("../icons/mono/network.svg"); mask-image: url("../icons/mono/network.svg"); }
.ihwiz-immersive-band--steps .ihwiz-step[data-icon="globe"]::after { -webkit-mask-image: url("../icons/mono/globe.svg"); mask-image: url("../icons/mono/globe.svg"); }
.ihwiz-immersive-band--steps .ihwiz-step[data-icon="hard-drive"]::after { -webkit-mask-image: url("../icons/mono/hard-drive.svg"); mask-image: url("../icons/mono/hard-drive.svg"); }
.ihwiz-immersive-band--steps .ihwiz-step[data-icon="circle-dollar-sign"]::after { -webkit-mask-image: url("../icons/mono/circle-dollar-sign.svg"); mask-image: url("../icons/mono/circle-dollar-sign.svg"); }
.ihwiz-immersive-band--steps .ihwiz-step[data-icon="refresh-cw"]::after { -webkit-mask-image: url("../icons/mono/refresh-cw.svg"); mask-image: url("../icons/mono/refresh-cw.svg"); }
.ihwiz-immersive-band--steps .ihwiz-step[data-icon="search"]::after { -webkit-mask-image: url("../icons/mono/search.svg"); mask-image: url("../icons/mono/search.svg"); }
.ihwiz-immersive-band--steps .ihwiz-step[data-icon="gauge"]::after { -webkit-mask-image: url("../icons/mono/gauge.svg"); mask-image: url("../icons/mono/gauge.svg"); }
.ihwiz-immersive-band--steps .ihwiz-step[data-icon="zap"]::after { -webkit-mask-image: url("../icons/mono/zap.svg"); mask-image: url("../icons/mono/zap.svg"); }
.ihwiz-immersive-band--steps .ihwiz-step[data-icon="trending-up"]::after { -webkit-mask-image: url("../icons/mono/trending-up.svg"); mask-image: url("../icons/mono/trending-up.svg"); }
.ihwiz-immersive-band--steps .ihwiz-step[data-icon="shield"]::after { -webkit-mask-image: url("../icons/mono/shield.svg"); mask-image: url("../icons/mono/shield.svg"); }
.ihwiz-immersive-band--steps .ihwiz-step[data-icon="settings"]::after { -webkit-mask-image: url("../icons/mono/settings.svg"); mask-image: url("../icons/mono/settings.svg"); }
.ihwiz-immersive-band--steps .ihwiz-step[data-icon="calendar-check"]::after { -webkit-mask-image: url("../icons/mono/calendar-check.svg"); mask-image: url("../icons/mono/calendar-check.svg"); }
.ihwiz-immersive-band--steps .ihwiz-step[data-icon="users"]::after { -webkit-mask-image: url("../icons/mono/users.svg"); mask-image: url("../icons/mono/users.svg"); }
.ihwiz-immersive-band--steps .ihwiz-step[data-icon="message-square"]::after { -webkit-mask-image: url("../icons/mono/message-square.svg"); mask-image: url("../icons/mono/message-square.svg"); }
.ihwiz-immersive-band--steps .ihwiz-step[data-icon="handshake"]::after { -webkit-mask-image: url("../icons/mono/handshake.svg"); mask-image: url("../icons/mono/handshake.svg"); }
.ihwiz-immersive-band--steps .ihwiz-step[data-icon="workflow"]::after { -webkit-mask-image: url("../icons/mono/workflow.svg"); mask-image: url("../icons/mono/workflow.svg"); }
.ihwiz-immersive-band--steps .ihwiz-step[data-icon="list-checks"]::after { -webkit-mask-image: url("../icons/mono/list-checks.svg"); mask-image: url("../icons/mono/list-checks.svg"); }
.ihwiz-immersive-band--steps .ihwiz-step[data-icon="send"]::after { -webkit-mask-image: url("../icons/mono/send.svg"); mask-image: url("../icons/mono/send.svg"); }
.ihwiz-immersive-band--steps .ihwiz-step[data-icon="phone-call"]::after { -webkit-mask-image: url("../icons/mono/phone-call.svg"); mask-image: url("../icons/mono/phone-call.svg"); }
.ihwiz-immersive-band--steps .ihwiz-step[data-icon="puzzle"]::after { -webkit-mask-image: url("../icons/mono/puzzle.svg"); mask-image: url("../icons/mono/puzzle.svg"); }
.ihwiz-immersive-band--steps .ihwiz-step[data-icon="git-branch"]::after { -webkit-mask-image: url("../icons/mono/git-branch.svg"); mask-image: url("../icons/mono/git-branch.svg"); }
.ihwiz-immersive-band--steps .ihwiz-step[data-icon="graduation-cap"]::after { -webkit-mask-image: url("../icons/mono/graduation-cap.svg"); mask-image: url("../icons/mono/graduation-cap.svg"); }
.ihwiz-immersive-band--steps .ihwiz-step[data-icon="rocket"]::after { -webkit-mask-image: url("../icons/mono/rocket.svg"); mask-image: url("../icons/mono/rocket.svg"); }
.ihwiz-immersive-band--steps .ihwiz-step[data-icon="smartphone"]::after { -webkit-mask-image: url("../icons/mono/smartphone.svg"); mask-image: url("../icons/mono/smartphone.svg"); }
.ihwiz-immersive-band--steps .ihwiz-step[data-icon="tablet"]::after { -webkit-mask-image: url("../icons/mono/tablet.svg"); mask-image: url("../icons/mono/tablet.svg"); }
.ihwiz-immersive-band--steps .ihwiz-step[data-icon="store"]::after { -webkit-mask-image: url("../icons/mono/store.svg"); mask-image: url("../icons/mono/store.svg"); }
.ihwiz-immersive-band--steps .ihwiz-step[data-icon="code"]::after { -webkit-mask-image: url("../icons/mono/code.svg"); mask-image: url("../icons/mono/code.svg"); }
.ihwiz-immersive-band--steps .ihwiz-step[data-icon="shopping-cart"]::after { -webkit-mask-image: url("../icons/mono/shopping-cart.svg"); mask-image: url("../icons/mono/shopping-cart.svg"); }
.ihwiz-immersive-band--steps .ihwiz-step[data-icon="book-open"]::after { -webkit-mask-image: url("../icons/mono/book-open.svg"); mask-image: url("../icons/mono/book-open.svg"); }
.ihwiz-immersive-band--steps .ihwiz-step[data-icon="boxes"]::after { -webkit-mask-image: url("../icons/mono/boxes.svg"); mask-image: url("../icons/mono/boxes.svg"); }
.ihwiz-immersive-band--steps .ihwiz-step[data-icon="target"]::after { -webkit-mask-image: url("../icons/mono/target.svg"); mask-image: url("../icons/mono/target.svg"); }
.ihwiz-immersive-band--steps .ihwiz-step[data-icon="monitor"]::after { -webkit-mask-image: url("../icons/mono/monitor.svg"); mask-image: url("../icons/mono/monitor.svg"); }
.ihwiz-immersive-band--steps .ihwiz-step[data-icon="file-text"]::after { -webkit-mask-image: url("../icons/mono/file-text.svg"); mask-image: url("../icons/mono/file-text.svg"); }
.ihwiz-immersive-band--steps .ihwiz-step[data-icon="badge-check"]::after { -webkit-mask-image: url("../icons/mono/badge-check.svg"); mask-image: url("../icons/mono/badge-check.svg"); }
.ihwiz-immersive-band--steps .ihwiz-step[data-icon="circle-help"]::after { -webkit-mask-image: url("../icons/mono/circle-help.svg"); mask-image: url("../icons/mono/circle-help.svg"); }
.ihwiz-immersive-band--steps .ihwiz-step[data-icon="factory"]::after { -webkit-mask-image: url("../icons/mono/factory.svg"); mask-image: url("../icons/mono/factory.svg"); }
/* 실측(Opus 지적): 5개 라벨(기획/구축/인프라/운영/성과)이 icon-map.json 에 없어 전부 기본값
   (check-circle-2) 하나로 떨어진다 — 원형 5개가 전부 같은 체크 아이콘이라 화면상 밋밋하다.
   icon-map.json 에 이 라벨들을 그대로 추가하는 건 이미 검토 후 보류했다(부분일치 매칭이라
   '개발과 인프라가 따로 움직여...' 같은 무관한 문장에도 우연히 걸려 다른 페이지 아이콘이
   조용히 바뀐다 — T307 경위 참고). 대신 이 밴드는 항상 고정 5개·고정 순서(기획→구축→인프라
   →운영→성과)라 위치(:nth-child)로 지정한다 — icon-map.json 을 안 건드리므로 다른 곳에
   영향이 전혀 없다. 위 data-icon 규칙과 특이도가 동률(0,3,1)이라 소스 순서로 갈린다 — 이
   블록을 반드시 뒤에 둬야 :nth-child 가 이긴다(지금은 다 check-circle-2 라 실질적으로는
   특이도만 높은 base ::after 규칙과 붙는 셈이라 순서 상관없이 이기지만, 나중에 이 위치의
   data-icon 값이 달라지는 경우까지 대비해 순서를 명시적으로 맞춰 둔다). */
.ihwiz-immersive-band--steps .ihwiz-step:nth-child(1)::after { -webkit-mask-image: url("../icons/mono/target.svg"); mask-image: url("../icons/mono/target.svg"); }
.ihwiz-immersive-band--steps .ihwiz-step:nth-child(2)::after { -webkit-mask-image: url("../icons/mono/code.svg"); mask-image: url("../icons/mono/code.svg"); }
.ihwiz-immersive-band--steps .ihwiz-step:nth-child(3)::after { -webkit-mask-image: url("../icons/mono/server.svg"); mask-image: url("../icons/mono/server.svg"); }
.ihwiz-immersive-band--steps .ihwiz-step:nth-child(4)::after { -webkit-mask-image: url("../icons/mono/settings.svg"); mask-image: url("../icons/mono/settings.svg"); }
.ihwiz-immersive-band--steps .ihwiz-step:nth-child(5)::after { -webkit-mask-image: url("../icons/mono/trending-up.svg"); mask-image: url("../icons/mono/trending-up.svg"); }

/* 홈 "다루는 기술"(T315, Opus 지적 — 항목마다 아이콘이 달라야 하는데 5개 섹션이 전부 기본
   체크 아이콘으로 떨어짐). 4개 항목(워드프레스 블록테마/HestiaCP/클라우드 매니지먼트/
   코로케이션)은 icon-map.json 키로 넣기엔 짧은 기술용어라 위험하다 — 실측 확인: '클라우드
   매니지먼트'를 키로 추가하면 홈 '6대 서비스'의 '인프라 구축' 항목(현재 '인프라 구축' 키로
   매칭돼 server 아이콘)을 더 긴 키가 최장매칭으로 덮어써 cloud 로 바뀌는 충돌이 실제로
   발생한다(32페이지 li 스코프 전수 대조로 확인). 대신 이 목록도 항상 고정 4개·고정 순서라
   위치(:nth-child)로 지정한다 — icon-map.json 은 이 섹션에 대해 그대로 두어 다른 곳에 영향
   없음. .ihwiz-actions 는 사이트 전역 공유 클래스라 :nth-child 를 무제한으로 쓰면 다른
   페이지 액션 목록까지 덮어쓴다 — 홈의 이 목록 바로 뒤에는 .ihwiz-immersive-band--steps
   섹션이 항상 오고(다른 곳엔 이 밴드 자체가 없음), 그 조합은 홈 이 자리 하나뿐이라 :has()
   로 안전하게 스코프한다. body.home 접두는 이중 방어(밴드가 항상 홈 전용이라 실질적으로는
   불필요하지만 명시적으로 남겨 둔다). */
body.home ul.ihwiz-actions:has(+ .ihwiz-immersive-band--steps) .ihwiz-action:nth-child(1)::before { -webkit-mask-image: url("../icons/mono/monitor.svg"); mask-image: url("../icons/mono/monitor.svg"); }
body.home ul.ihwiz-actions:has(+ .ihwiz-immersive-band--steps) .ihwiz-action:nth-child(2)::before { -webkit-mask-image: url("../icons/mono/server.svg"); mask-image: url("../icons/mono/server.svg"); }
body.home ul.ihwiz-actions:has(+ .ihwiz-immersive-band--steps) .ihwiz-action:nth-child(3)::before { -webkit-mask-image: url("../icons/mono/cloud.svg"); mask-image: url("../icons/mono/cloud.svg"); }
body.home ul.ihwiz-actions:has(+ .ihwiz-immersive-band--steps) .ihwiz-action:nth-child(4)::before { -webkit-mask-image: url("../icons/mono/building-2.svg"); mask-image: url("../icons/mono/building-2.svg"); }

/* ── 홈 "시작하는 방법"(T313, 시안 재대조) — 원형 아이콘 + 화살표 + 1단계 보라 강조.
   .ihwiz-steps--start 는 Pane1(SONNET)이 이 특정 섹션에만 붙이기로 한 수식자 클래스다
   (T307과 같은 선례 — 항목 수만으로는 다른 페이지의 3개짜리 .ihwiz-steps, 예: maintenance
   허브의 매일/매주/매월과 구분이 안 돼서 요청했다). 배포 전까지는 이 블록 전체가 어떤
   라이브 요소에도 안 걸려 무해하다(선택 기능 원칙).
   "지금 여기"는 라이브 텍스트가 "상담 신청(지금 여기)" 한 덩어리라(파서가 괄호를 별도
   요소로 안 뗀다) 시안처럼 독립 배지로 떼어내지 않는다 — 대신 1단계 카드 전체(원+아이콘+
   글자색)를 보라로 강조해 같은 의도를 전달한다(마크업을 더 건드리지 않는 절충). */
.ihwiz-steps--start {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2rem 2.5rem;
	list-style: none;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
	position: relative;
	container-type: inline-size;
	container-name: ihwiz-start-steps;
}
.ihwiz-steps--start .ihwiz-step {
	background: none;
	border: none;
	padding: 4.25rem 0.5rem 0;
	margin: 0;
	width: 9rem;
	text-align: center;
	position: relative;
	z-index: 1;
	font-weight: 600;
	counter-increment: none; /* 숫자 대신 아이콘을 쓴다 */
}
.ihwiz-steps--start .ihwiz-step::before {
	/* 원형 배경 — 카드형과 달리 배경이 흰색(base)이 아니라 옅은 서피스라 테두리를 준다 */
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	border: 2px solid var(--wp--preset--color--accent);
	background-color: var(--wp--preset--color--base);
}
.ihwiz-steps--start .ihwiz-step::after {
	content: "";
	position: absolute;
	top: 0.85rem;
	left: 50%;
	transform: translateX(-50%);
	width: 1.7rem;
	height: 1.7rem;
	background-color: var(--wp--preset--color--accent);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-image: url("../icons/mono/check-circle-2.svg"); /* 기본값 */
	mask-image: url("../icons/mono/check-circle-2.svg");
}
/* 위치 기반 아이콘(icon-map.json 미변경, T307과 같은 이유 — 3개 고정·고정 순서라 라벨
   매칭보다 위치 지정이 다른 페이지에 안전하다) */
.ihwiz-steps--start .ihwiz-step:nth-child(1)::after { -webkit-mask-image: url("../icons/mono/message-square.svg"); mask-image: url("../icons/mono/message-square.svg"); }
.ihwiz-steps--start .ihwiz-step:nth-child(2)::after { -webkit-mask-image: url("../icons/mono/list-checks.svg"); mask-image: url("../icons/mono/list-checks.svg"); }
.ihwiz-steps--start .ihwiz-step:nth-child(3)::after { -webkit-mask-image: url("../icons/mono/file-text.svg"); mask-image: url("../icons/mono/file-text.svg"); }
/* 1단계 = "지금 여기" 보라 강조 */
.ihwiz-steps--start .ihwiz-step:first-child {
	color: var(--wp--preset--color--accent-purple);
}
.ihwiz-steps--start .ihwiz-step:first-child::before {
	border-color: var(--wp--preset--color--accent-purple);
	background-color: var(--wp--preset--color--accent-purple);
}
.ihwiz-steps--start .ihwiz-step:first-child::after {
	background-color: var(--wp--preset--color--base); /* 보라 배경 위 흰 아이콘 */
}
/* 화살표 연결선 — 3개 고정이라 안전폭 계산이 한 번으로 끝난다(B2/한팀이맡는범위와 같은
   원칙). 1차 계산 오류(실측으로 발견, 한팀이맡는범위와 같은 원인) — width:9rem 을 그대로
   144px 로 썼는데 box-sizing 기본값(content-box)이라 padding-inline(0.5rem×2=16px)이
   더해져 실제 렌더 폭은 160px 다(puppeteer 로 확인). 실측값으로 다시 계산: 원 중심 간
   거리 = 항목폭(160px)+열간격(2.5rem=40px) = 200px, 3개 한 줄에 필요한 최소 폭 =
   2×200+160 = 560px — 정확히 경계값이라 서브픽셀 반올림 위험을 피하려 580px 이상에서만
   켠다. */
@container ihwiz-start-steps (min-width: 580px) {
	.ihwiz-steps--start::before {
		content: "";
		position: absolute;
		top: 1.75rem;
		left: 50%;
		width: 25rem; /* 2 × 200px = 400px */
		transform: translate(-50%, -50%);
		height: 0;
		border-top: 2px dashed var(--wp--preset--color--border);
		z-index: 0;
	}
}

.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 와 .ihwiz-compare-row 는 특이도가 같은 클래스 1개라
   소스 순서(row 가 뒤)가 이겨 남색 머리글 배경이 흰색으로 덮여 사라졌었다(Guardian 실측,
   30개 페이지 전수). 순서에 기대지 않고 .ihwiz-compare-grid 를 앞에 붙여 특이도로 이기게
   한다 — 나중에 규칙 순서가 재배치돼도 안 깨진다. */
/* 발견된 결함 — WP constrained 레이아웃의 max-width:800px + margin-inline:auto 가
   auto-margin 인 순간 flex 의 stretch 를 꺼버려, 내용이 짧으면(단어뿐인 머리글, 문장이
   짧은 일부 데이터 행) 800px 를 못 채우고 shrink-to-fit 으로 좁게 앉는다(Guardian 실측:
   머리글 522px 1건 + 짧은 데이터 행 2건에서 336~788px 로 어긋남 — 대부분 행은 문장이
   길어 우연히 800 을 채웠을 뿐이다). max-width 는 그대로 두고 width만 100%로 강제해
   길든 짧든 항상 같은 800px·같은 left 로 맞춘다 — 이미 800 을 채우던 행은 시각 변화 없음. */
.ihwiz-compare-grid .ihwiz-compare-head,
.ihwiz-compare-grid .ihwiz-compare-row {
	width: 100%;
}
.ihwiz-compare-grid .ihwiz-compare-head {
	/* 특이도(0,2,0)를 유지해야 한다 — 이 규칙을 .ihwiz-compare-head 단독(0,1,0)으로 쪼개면
	   .ihwiz-compare-row 와 특이도가 같아져 원래 결함(흰 배경이 남색을 덮던 것)이 되살아난다. */
	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%;
	}
	/* 기본 규칙(.ihwiz-compare-value)이 display:flex 라 라벨(::before, block)이 값 텍스트와
	   같은 줄에 나란히 붙어버렸다("유리한 경우필요한 페이지만…"의 원인) — 모바일에서는
	   일반 블록으로 되돌려 라벨이 자기 줄을 차지하고 값 텍스트가 그 아래로 자연스럽게
	   줄바꿈되게 한다. */
	.ihwiz-compare-row .ihwiz-compare-value {
		display: block;
	}
	/* 수정 배경: nth-of-type 은 태그 순서로 세서(아이콘·라벨 칸까지 p 로 함께 잡힘) 3열 표
	   기준으로만 우연히 맞았고, 실제로는 엉뚱한 값에 라벨이 붙는 결함이었다(Guardian 실측).
	   파서가 값 칸에 직접 data-label 을 내주므로(Pane1 반영 확인) 그걸 그대로 읽는다 — 열이
	   3개든 5개든, 헤더 없는 표든 전부 맞는다. [data-label] 없는 칸은 속성 자체가 없어
	   ::before 가 생기지 않는다(빈 attr() 상자 방지). */
	.ihwiz-compare-value[data-label]::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 0.15rem;
		font-weight: 700;
		color: var(--wp--preset--color--accent);
	}
}

/* 크로스셀 — 서비스 간 다음 단계 흐름, "현재 단계"만 보라(accent-purple, theme.json 전용
   토큰)로 표시한다. 이 색은 전 페이지 팔레트(블루 계열)의 예외로, 크로스셀 배지 하나에만
   쓰기로 확정된 값이다.
   후속 변경 — 마크업 구조 변경(Pane1 통보): 이전엔 배지가 목록과 무관하게 뜨는 별도 문단
   이라 "몇 번째가 현재인지"가 마크업에 없었다(현재 단계 값이 항상 1이라 우연히 안 드러난
   버그). 지금은 현재 항목의 <li> 자체에 .ihwiz-cross-sell__current 가 붙고, 그 안의
   .ihwiz-cross-sell__badge 는 인라인 <span>이다 — 블록(p) 전제 스타일을 걷어낸다. */
.ihwiz-cross-sell {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}
.ihwiz-cross-sell > li {
	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 > li:not(:last-child) {
	padding-right: 1.5rem;
	position: relative;
}
.ihwiz-cross-sell > li:not(:last-child)::after {
	content: "\2192"; /* → */
	position: absolute;
	right: 0.15rem;
	color: var(--wp--preset--color--border);
}
.ihwiz-cross-sell__current {
	color: var(--wp--preset--color--accent-purple);
	font-weight: 700;
}
.ihwiz-cross-sell__badge {
	display: inline-block;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	background: var(--wp--preset--color--accent-purple);
	color: var(--wp--preset--color--base);
	font-size: 0.78rem;
	font-weight: 700;
}
@media (max-width: 900px) {
	.ihwiz-cross-sell {
		flex-direction: column;
		align-items: flex-start;
	}
	.ihwiz-cross-sell > li:not(:last-child) {
		padding-right: 0;
	}
	.ihwiz-cross-sell > li: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 사용(후속 조정) — 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;
}

/* ── 아이콘 시스템 — Lucide(ISC/MIT) 자체탑재, mask-image 로 단색 렌더 ──
   원본·라이선스: assets/icons/LICENSE-lucide.txt, 개별 파일: assets/icons/mono/<키>.svg.
   <svg><use> 대신 mask 를 쓰는 이유: 이 아이콘들은 전부 장식(라벨 옆 보조 표시)이라 접근성
   트리에 새 노드가 필요 없고(스크린리더는 라벨 텍스트만 읽으면 충분), 파서(Pane1, apply-copy.py)가
   이미 카드 요소에 data-icon="<키>" 속성만 얹는 방식으로 구현했다(icon-map.json 조회 결과) —
   ::before + mask-image 는 속성값만으로 그릴 수 있어 파서 쪽 마크업 변경이 최소화된다. */
.ihwiz-scope,
.ihwiz-deliverable,
.ihwiz-action,
.ihwiz-outcome,
.ihwiz-situation,
.ihwiz-decision-point,
.ihwiz-feature {
	position: relative;
}
.ihwiz-scope[data-icon],
.ihwiz-deliverable[data-icon] {
	padding-left: calc(var(--ihwiz-rhythm-card-pad) + 2.1rem);
}
.ihwiz-decision-point[data-icon]::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.1rem;
	width: 1.1rem;
	height: 1.1rem;
	background-color: var(--wp--preset--color--accent);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}
.ihwiz-feature[data-icon] {
	/* 기술·운영 기준 카드는 이미 큰 번호(.ihwiz-feature__num)가 있어 왼쪽 여백을 더 뺏지 않는다 —
	   아이콘은 번호 위, 카드 맨 위에 작게 얹혀 번호·아이콘이 함께 이 카드의 정체성을 보여준다. */
	padding-left: var(--ihwiz-rhythm-card-pad);
}
.ihwiz-feature[data-icon]::before {
	margin-bottom: 0.5rem;
}
/* 공통 뼈대 — mask 아이콘을 쓰는 카드 6종 전부 공유(마스크 속성만, 크기·위치는 아래에서
   그룹별로 갈린다). */
.ihwiz-scope[data-icon]::before,
.ihwiz-deliverable[data-icon]::before,
.ihwiz-action[data-icon]::before,
.ihwiz-outcome[data-icon]::before,
.ihwiz-situation[data-icon]::before,
.ihwiz-feature[data-icon]::before {
	content: "";
	display: inline-block;
	background-color: var(--wp--preset--color--accent);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}
/* 그룹 A — 8섹션 상세페이지 카드(제공 범위/산출물): 기존 좌상단 작은 아이콘 그대로 유지
   (이번 T313 은 홈 mockup 대조 작업이라 이 두 컴포넌트는 범위 밖). */
.ihwiz-scope[data-icon]::before,
.ihwiz-deliverable[data-icon]::before {
	position: absolute;
	top: var(--ihwiz-rhythm-card-pad);
	left: var(--ihwiz-rhythm-card-pad);
	width: 1.5rem;
	height: 1.5rem;
}
/* 그룹 B — 시안 정합(T313): 상황/액션/아웃컴은 카드 박스를 걷어내고 위쪽 중앙에 큰
   아이콘을 얹는 형태로 바꿨다(situations/actions/outcomes 컨테이너 규칙과 세트). */
.ihwiz-action[data-icon]::before,
.ihwiz-outcome[data-icon]::before,
.ihwiz-situation[data-icon]::before {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 2.5rem;
	height: 2.5rem;
}
.ihwiz-outcome[data-icon]::before {
	background-color: var(--wp--preset--color--accent-2); /* outcome 은 기존에도 보조색으로 구분 */
}

/* 항목별 아이콘 — icon-map.json 라벨 매핑 결과(44종). data-icon 값이 아래 목록에 없으면
   (icon-map.json 이 없거나 파서가 매칭 못 한 경우) mask-image 가 비어 아이콘만 안 보이고
   레이아웃·텍스트는 그대로 읽힌다(선택 기능 원칙 유지, 회귀 없음).

   :where(...) 로 7개 클래스에만 배타적으로 스코프하는 이유(실측으로 발견한 결함, 2단계로 고침):
   파서는 "이런 상황이라면"(.ihwiz-situation)과 "판단 기준"(.ihwiz-decision-point)에도 라벨
   매핑 결과로 data-icon 을 붙인다 — 플레인 불릿도 아이콘 매핑 대상이기 때문이다. 1차본에서
   [data-icon="x"]::before 를 클래스 제한 없이 전역으로 뒀더니, situation 의 기존 체크마크
   (border 트릭, position:absolute)와 decision-point 의 화살표(content:"→") 위에 같은 특이도로
   mask-image 만 얹혀 border/화살표가 mask 알파에 잘려 깨진 점 무늬로 보였다(라이브 스크린샷으로
   발견). 대안은 두 가지였다 — (a) situation/decision-point 를 이 목록에서 완전히 빼고 원래
   마커를 지킨다, (b) 아예 마스크 아이콘 체계로 통일해 라벨별로 실제로 다른 아이콘(예: 모니터·
   코드)이 보이게 한다. 카드 5종과 통일감을 주는 게 "문서처럼 보인다"는 원 지적에 더 맞는
   방향이라 판단해 (b)를 택했다 — 아래 .ihwiz-situation[data-icon]::before /
   .ihwiz-decision-point[data-icon]::before 규칙이 border/화살표를 걷어내고 같은 mask 방식으로
   덮어쓴다. :where() 는 특이도에 기여하지 않으므로(0,1,1 유지) 이 7개 클래스 밖으로는 절대
   안 새면서도, 위 두 재정의 규칙(class+attr+pseudo, 특이도 0,2,1)이 원래 .ihwiz-situation::before /
   .ihwiz-decision-point::before(class+pseudo, 0,1,1)보다 항상 이긴다 — 소스 순서에 기대지 않는다. */
:where(.ihwiz-scope, .ihwiz-deliverable, .ihwiz-action, .ihwiz-outcome, .ihwiz-feature, .ihwiz-situation, .ihwiz-decision-point)[data-icon="layout-grid"]::before { -webkit-mask-image: url("../icons/mono/layout-grid.svg"); mask-image: url("../icons/mono/layout-grid.svg"); }
:where(.ihwiz-scope, .ihwiz-deliverable, .ihwiz-action, .ihwiz-outcome, .ihwiz-feature, .ihwiz-situation, .ihwiz-decision-point)[data-icon="server"]::before { -webkit-mask-image: url("../icons/mono/server.svg"); mask-image: url("../icons/mono/server.svg"); }
:where(.ihwiz-scope, .ihwiz-deliverable, .ihwiz-action, .ihwiz-outcome, .ihwiz-feature, .ihwiz-situation, .ihwiz-decision-point)[data-icon="wrench"]::before { -webkit-mask-image: url("../icons/mono/wrench.svg"); mask-image: url("../icons/mono/wrench.svg"); }
:where(.ihwiz-scope, .ihwiz-deliverable, .ihwiz-action, .ihwiz-outcome, .ihwiz-feature, .ihwiz-situation, .ihwiz-decision-point)[data-icon="megaphone"]::before { -webkit-mask-image: url("../icons/mono/megaphone.svg"); mask-image: url("../icons/mono/megaphone.svg"); }
:where(.ihwiz-scope, .ihwiz-deliverable, .ihwiz-action, .ihwiz-outcome, .ihwiz-feature, .ihwiz-situation, .ihwiz-decision-point)[data-icon="shield-check"]::before { -webkit-mask-image: url("../icons/mono/shield-check.svg"); mask-image: url("../icons/mono/shield-check.svg"); }
:where(.ihwiz-scope, .ihwiz-deliverable, .ihwiz-action, .ihwiz-outcome, .ihwiz-feature, .ihwiz-situation, .ihwiz-decision-point)[data-icon="building-2"]::before { -webkit-mask-image: url("../icons/mono/building-2.svg"); mask-image: url("../icons/mono/building-2.svg"); }
:where(.ihwiz-scope, .ihwiz-deliverable, .ihwiz-action, .ihwiz-outcome, .ihwiz-feature, .ihwiz-situation, .ihwiz-decision-point)[data-icon="folder"]::before { -webkit-mask-image: url("../icons/mono/folder.svg"); mask-image: url("../icons/mono/folder.svg"); }
:where(.ihwiz-scope, .ihwiz-deliverable, .ihwiz-action, .ihwiz-outcome, .ihwiz-feature, .ihwiz-situation, .ihwiz-decision-point)[data-icon="cloud"]::before { -webkit-mask-image: url("../icons/mono/cloud.svg"); mask-image: url("../icons/mono/cloud.svg"); }
:where(.ihwiz-scope, .ihwiz-deliverable, .ihwiz-action, .ihwiz-outcome, .ihwiz-feature, .ihwiz-situation, .ihwiz-decision-point)[data-icon="calendar"]::before { -webkit-mask-image: url("../icons/mono/calendar.svg"); mask-image: url("../icons/mono/calendar.svg"); }
:where(.ihwiz-scope, .ihwiz-deliverable, .ihwiz-action, .ihwiz-outcome, .ihwiz-feature, .ihwiz-situation, .ihwiz-decision-point)[data-icon="layers"]::before { -webkit-mask-image: url("../icons/mono/layers.svg"); mask-image: url("../icons/mono/layers.svg"); }
:where(.ihwiz-scope, .ihwiz-deliverable, .ihwiz-action, .ihwiz-outcome, .ihwiz-feature, .ihwiz-situation, .ihwiz-decision-point)[data-icon="network"]::before { -webkit-mask-image: url("../icons/mono/network.svg"); mask-image: url("../icons/mono/network.svg"); }
:where(.ihwiz-scope, .ihwiz-deliverable, .ihwiz-action, .ihwiz-outcome, .ihwiz-feature, .ihwiz-situation, .ihwiz-decision-point)[data-icon="globe"]::before { -webkit-mask-image: url("../icons/mono/globe.svg"); mask-image: url("../icons/mono/globe.svg"); }
:where(.ihwiz-scope, .ihwiz-deliverable, .ihwiz-action, .ihwiz-outcome, .ihwiz-feature, .ihwiz-situation, .ihwiz-decision-point)[data-icon="hard-drive"]::before { -webkit-mask-image: url("../icons/mono/hard-drive.svg"); mask-image: url("../icons/mono/hard-drive.svg"); }
:where(.ihwiz-scope, .ihwiz-deliverable, .ihwiz-action, .ihwiz-outcome, .ihwiz-feature, .ihwiz-situation, .ihwiz-decision-point)[data-icon="circle-dollar-sign"]::before { -webkit-mask-image: url("../icons/mono/circle-dollar-sign.svg"); mask-image: url("../icons/mono/circle-dollar-sign.svg"); }
:where(.ihwiz-scope, .ihwiz-deliverable, .ihwiz-action, .ihwiz-outcome, .ihwiz-feature, .ihwiz-situation, .ihwiz-decision-point)[data-icon="refresh-cw"]::before { -webkit-mask-image: url("../icons/mono/refresh-cw.svg"); mask-image: url("../icons/mono/refresh-cw.svg"); }
:where(.ihwiz-scope, .ihwiz-deliverable, .ihwiz-action, .ihwiz-outcome, .ihwiz-feature, .ihwiz-situation, .ihwiz-decision-point)[data-icon="search"]::before { -webkit-mask-image: url("../icons/mono/search.svg"); mask-image: url("../icons/mono/search.svg"); }
:where(.ihwiz-scope, .ihwiz-deliverable, .ihwiz-action, .ihwiz-outcome, .ihwiz-feature, .ihwiz-situation, .ihwiz-decision-point)[data-icon="gauge"]::before { -webkit-mask-image: url("../icons/mono/gauge.svg"); mask-image: url("../icons/mono/gauge.svg"); }
:where(.ihwiz-scope, .ihwiz-deliverable, .ihwiz-action, .ihwiz-outcome, .ihwiz-feature, .ihwiz-situation, .ihwiz-decision-point)[data-icon="zap"]::before { -webkit-mask-image: url("../icons/mono/zap.svg"); mask-image: url("../icons/mono/zap.svg"); }
:where(.ihwiz-scope, .ihwiz-deliverable, .ihwiz-action, .ihwiz-outcome, .ihwiz-feature, .ihwiz-situation, .ihwiz-decision-point)[data-icon="trending-up"]::before { -webkit-mask-image: url("../icons/mono/trending-up.svg"); mask-image: url("../icons/mono/trending-up.svg"); }
:where(.ihwiz-scope, .ihwiz-deliverable, .ihwiz-action, .ihwiz-outcome, .ihwiz-feature, .ihwiz-situation, .ihwiz-decision-point)[data-icon="shield"]::before { -webkit-mask-image: url("../icons/mono/shield.svg"); mask-image: url("../icons/mono/shield.svg"); }
:where(.ihwiz-scope, .ihwiz-deliverable, .ihwiz-action, .ihwiz-outcome, .ihwiz-feature, .ihwiz-situation, .ihwiz-decision-point)[data-icon="settings"]::before { -webkit-mask-image: url("../icons/mono/settings.svg"); mask-image: url("../icons/mono/settings.svg"); }
:where(.ihwiz-scope, .ihwiz-deliverable, .ihwiz-action, .ihwiz-outcome, .ihwiz-feature, .ihwiz-situation, .ihwiz-decision-point)[data-icon="calendar-check"]::before { -webkit-mask-image: url("../icons/mono/calendar-check.svg"); mask-image: url("../icons/mono/calendar-check.svg"); }
:where(.ihwiz-scope, .ihwiz-deliverable, .ihwiz-action, .ihwiz-outcome, .ihwiz-feature, .ihwiz-situation, .ihwiz-decision-point)[data-icon="users"]::before { -webkit-mask-image: url("../icons/mono/users.svg"); mask-image: url("../icons/mono/users.svg"); }
:where(.ihwiz-scope, .ihwiz-deliverable, .ihwiz-action, .ihwiz-outcome, .ihwiz-feature, .ihwiz-situation, .ihwiz-decision-point)[data-icon="message-square"]::before { -webkit-mask-image: url("../icons/mono/message-square.svg"); mask-image: url("../icons/mono/message-square.svg"); }
:where(.ihwiz-scope, .ihwiz-deliverable, .ihwiz-action, .ihwiz-outcome, .ihwiz-feature, .ihwiz-situation, .ihwiz-decision-point)[data-icon="handshake"]::before { -webkit-mask-image: url("../icons/mono/handshake.svg"); mask-image: url("../icons/mono/handshake.svg"); }
:where(.ihwiz-scope, .ihwiz-deliverable, .ihwiz-action, .ihwiz-outcome, .ihwiz-feature, .ihwiz-situation, .ihwiz-decision-point)[data-icon="workflow"]::before { -webkit-mask-image: url("../icons/mono/workflow.svg"); mask-image: url("../icons/mono/workflow.svg"); }
:where(.ihwiz-scope, .ihwiz-deliverable, .ihwiz-action, .ihwiz-outcome, .ihwiz-feature, .ihwiz-situation, .ihwiz-decision-point)[data-icon="list-checks"]::before { -webkit-mask-image: url("../icons/mono/list-checks.svg"); mask-image: url("../icons/mono/list-checks.svg"); }
:where(.ihwiz-scope, .ihwiz-deliverable, .ihwiz-action, .ihwiz-outcome, .ihwiz-feature, .ihwiz-situation, .ihwiz-decision-point)[data-icon="send"]::before { -webkit-mask-image: url("../icons/mono/send.svg"); mask-image: url("../icons/mono/send.svg"); }
:where(.ihwiz-scope, .ihwiz-deliverable, .ihwiz-action, .ihwiz-outcome, .ihwiz-feature, .ihwiz-situation, .ihwiz-decision-point)[data-icon="phone-call"]::before { -webkit-mask-image: url("../icons/mono/phone-call.svg"); mask-image: url("../icons/mono/phone-call.svg"); }
:where(.ihwiz-scope, .ihwiz-deliverable, .ihwiz-action, .ihwiz-outcome, .ihwiz-feature, .ihwiz-situation, .ihwiz-decision-point)[data-icon="puzzle"]::before { -webkit-mask-image: url("../icons/mono/puzzle.svg"); mask-image: url("../icons/mono/puzzle.svg"); }
:where(.ihwiz-scope, .ihwiz-deliverable, .ihwiz-action, .ihwiz-outcome, .ihwiz-feature, .ihwiz-situation, .ihwiz-decision-point)[data-icon="git-branch"]::before { -webkit-mask-image: url("../icons/mono/git-branch.svg"); mask-image: url("../icons/mono/git-branch.svg"); }
:where(.ihwiz-scope, .ihwiz-deliverable, .ihwiz-action, .ihwiz-outcome, .ihwiz-feature, .ihwiz-situation, .ihwiz-decision-point)[data-icon="graduation-cap"]::before { -webkit-mask-image: url("../icons/mono/graduation-cap.svg"); mask-image: url("../icons/mono/graduation-cap.svg"); }
:where(.ihwiz-scope, .ihwiz-deliverable, .ihwiz-action, .ihwiz-outcome, .ihwiz-feature, .ihwiz-situation, .ihwiz-decision-point)[data-icon="rocket"]::before { -webkit-mask-image: url("../icons/mono/rocket.svg"); mask-image: url("../icons/mono/rocket.svg"); }
:where(.ihwiz-scope, .ihwiz-deliverable, .ihwiz-action, .ihwiz-outcome, .ihwiz-feature, .ihwiz-situation, .ihwiz-decision-point)[data-icon="smartphone"]::before { -webkit-mask-image: url("../icons/mono/smartphone.svg"); mask-image: url("../icons/mono/smartphone.svg"); }
:where(.ihwiz-scope, .ihwiz-deliverable, .ihwiz-action, .ihwiz-outcome, .ihwiz-feature, .ihwiz-situation, .ihwiz-decision-point)[data-icon="tablet"]::before { -webkit-mask-image: url("../icons/mono/tablet.svg"); mask-image: url("../icons/mono/tablet.svg"); }
:where(.ihwiz-scope, .ihwiz-deliverable, .ihwiz-action, .ihwiz-outcome, .ihwiz-feature, .ihwiz-situation, .ihwiz-decision-point)[data-icon="store"]::before { -webkit-mask-image: url("../icons/mono/store.svg"); mask-image: url("../icons/mono/store.svg"); }
:where(.ihwiz-scope, .ihwiz-deliverable, .ihwiz-action, .ihwiz-outcome, .ihwiz-feature, .ihwiz-situation, .ihwiz-decision-point)[data-icon="code"]::before { -webkit-mask-image: url("../icons/mono/code.svg"); mask-image: url("../icons/mono/code.svg"); }
:where(.ihwiz-scope, .ihwiz-deliverable, .ihwiz-action, .ihwiz-outcome, .ihwiz-feature, .ihwiz-situation, .ihwiz-decision-point)[data-icon="shopping-cart"]::before { -webkit-mask-image: url("../icons/mono/shopping-cart.svg"); mask-image: url("../icons/mono/shopping-cart.svg"); }
:where(.ihwiz-scope, .ihwiz-deliverable, .ihwiz-action, .ihwiz-outcome, .ihwiz-feature, .ihwiz-situation, .ihwiz-decision-point)[data-icon="book-open"]::before { -webkit-mask-image: url("../icons/mono/book-open.svg"); mask-image: url("../icons/mono/book-open.svg"); }
:where(.ihwiz-scope, .ihwiz-deliverable, .ihwiz-action, .ihwiz-outcome, .ihwiz-feature, .ihwiz-situation, .ihwiz-decision-point)[data-icon="boxes"]::before { -webkit-mask-image: url("../icons/mono/boxes.svg"); mask-image: url("../icons/mono/boxes.svg"); }
:where(.ihwiz-scope, .ihwiz-deliverable, .ihwiz-action, .ihwiz-outcome, .ihwiz-feature, .ihwiz-situation, .ihwiz-decision-point)[data-icon="target"]::before { -webkit-mask-image: url("../icons/mono/target.svg"); mask-image: url("../icons/mono/target.svg"); }
:where(.ihwiz-scope, .ihwiz-deliverable, .ihwiz-action, .ihwiz-outcome, .ihwiz-feature, .ihwiz-situation, .ihwiz-decision-point)[data-icon="monitor"]::before { -webkit-mask-image: url("../icons/mono/monitor.svg"); mask-image: url("../icons/mono/monitor.svg"); }
:where(.ihwiz-scope, .ihwiz-deliverable, .ihwiz-action, .ihwiz-outcome, .ihwiz-feature, .ihwiz-situation, .ihwiz-decision-point)[data-icon="file-text"]::before { -webkit-mask-image: url("../icons/mono/file-text.svg"); mask-image: url("../icons/mono/file-text.svg"); }
:where(.ihwiz-scope, .ihwiz-deliverable, .ihwiz-action, .ihwiz-outcome, .ihwiz-feature, .ihwiz-situation, .ihwiz-decision-point)[data-icon="badge-check"]::before { -webkit-mask-image: url("../icons/mono/badge-check.svg"); mask-image: url("../icons/mono/badge-check.svg"); }
:where(.ihwiz-scope, .ihwiz-deliverable, .ihwiz-action, .ihwiz-outcome, .ihwiz-feature, .ihwiz-situation, .ihwiz-decision-point)[data-icon="circle-help"]::before { -webkit-mask-image: url("../icons/mono/circle-help.svg"); mask-image: url("../icons/mono/circle-help.svg"); }
:where(.ihwiz-scope, .ihwiz-deliverable, .ihwiz-action, .ihwiz-outcome, .ihwiz-feature, .ihwiz-situation, .ihwiz-decision-point)[data-icon="factory"]::before { -webkit-mask-image: url("../icons/mono/factory.svg"); mask-image: url("../icons/mono/factory.svg"); }
:where(.ihwiz-scope, .ihwiz-deliverable, .ihwiz-action, .ihwiz-outcome, .ihwiz-feature, .ihwiz-situation, .ihwiz-decision-point)[data-icon="check-circle-2"]::before { -webkit-mask-image: url("../icons/mono/check-circle-2.svg"); mask-image: url("../icons/mono/check-circle-2.svg"); }

/* ── B1: 섹션 번호 배지(01~08) — SPEC.md 8섹션 구조가 스캔되도록 h2 앞에 순번을 붙인다.
   post-content 의 "직계 자식" h2 만 카운트한다 — 몰입 밴드·CTA 밴드 안의 h2(.ihwiz-immersive-band
   h2, .ihwiz-cta-band h2)는 그 wrapper 의 자식이라 이 선택자에 안 걸린다(의도된 제외: 두 밴드는
   이미 배경색 전환만으로 섹션 구분이 뚜렷해서, 번호 배지를 더하면 오히려 산만해진다 — IDEAS.md
   B1은 "8섹션 구조" 대상이지 몰입 밴드 대상이 아니다). */
.wp-block-post-content {
	counter-reset: ihwiz-section;
}
main .wp-block-post-content > h2 {
	counter-increment: ihwiz-section;
	display: flex;
	align-items: center;
	gap: 0.85rem;
}
main .wp-block-post-content > h2::before {
	content: counter(ihwiz-section, decimal-leading-zero);
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 8px;
	background: color-mix(in srgb, var(--wp--preset--color--surface-tint) 45%, var(--wp--preset--color--base));
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.85rem;
	font-weight: 700;
}
@media (max-width: 900px) {
	main .wp-block-post-content > h2::before {
		width: 1.9rem;
		height: 1.9rem;
		font-size: 0.75rem;
	}
}
/* T313(시안 재대조, 판단): 홈만 번호 배지를 뺀다 — home.webp 시안에는 번호가 전혀 없다.
   전체 사이트에서 빼지 않는 이유: 8섹션 상세페이지(25개)는 섹션이 더 많고 균질해(전부
   "이런 상황이라면/제공 범위/진행 방식/..." 같은 패턴) 번호가 SPEC.md 가 강조해 온 "구조가
   읽힌다"는 목적에 실제로 기여한다고 판단했다 — 그 페이지들의 시안은 이번 대조 대상이
   아니다. 대신 번호가 빠지면서 섹션 구분이 약해지는 것을 막기 위해 대안(짧은 색 막대)을
   넣는다 — 시안에도 있는 장치는 아니지만(시안은 제목 자체의 굵기·크기만으로 구분한다),
   시안처럼 큰 타이포 차이를 h2 스타일 전체에 새로 주는 것보다 위험이 작고 기존 세로
   리듬·타입 스케일(SPEC.md)과 충돌하지 않는 절충안이라 판단했다. body.home 스코프는
   WordPress 가 프론트페이지에 자동으로 붙이는 표준 클래스를 쓴다(실측 확인: 홈 body 클래스
   "home ...", 하위페이지엔 없음). FAQ 제목은 예외로 뺀다(:not(:has(+ .ihwiz-faq))) — B3 의
   물음표 아이콘이 이미 다른 방식의 좋은 구분 장치라 그대로 둔다. */
body.home main .wp-block-post-content > h2:not(:has(+ .ihwiz-faq)) {
	gap: 0.75rem;
}
body.home main .wp-block-post-content > h2:not(:has(+ .ihwiz-faq))::before {
	content: "";
	width: 4px;
	height: 1.4em;
	border-radius: 2px;
	background: var(--wp--preset--color--accent);
}

/* ── B3: FAQ 제목 앞 아이콘 — 번호 대신 물음표 원형 아이콘으로 대체한다(기존 :has() 계약
   그대로 재사용, 이미 검증된 선택자라 파서 변경이 필요 없다). 특이도가 위 규칙과
   같은 (0,1,1)+attr 조합이라, 소스 순서상 이 규칙이 뒤에 있어야 이긴다(과거 특이도 사고 참고). */
main .wp-block-post-content > h2:has(+ .ihwiz-faq)::before {
	content: "";
	background-color: var(--wp--preset--color--accent);
	-webkit-mask-image: url("../icons/mono/circle-help.svg");
	mask-image: url("../icons/mono/circle-help.svg");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 62%;
	mask-size: 62%;
}

/* ── B2: 진행 방식 — 원형 번호 배지(연결선은 시도 후 제외, 아래 경위 참고).
   1차 시도는 .ihwiz-step__num 자식 요소가 있다고 가정하고 짰다가 라이브 마크업을 직접 열어보고
   틀렸다는 걸 확인했다(Opus 지적) — 실제 apply-copy.py 출력은 `<li class="ihwiz-step"
   data-icon="...">​<strong>라벨 — 소요.</strong> 설명…</li>` 처럼 라벨과 설명이 한 줄로 붙은
   평문 li 라 별도 번호 요소가 없다(.ihwiz-step__num CSS 는 애초에 파서가 낸 적 없는 죽은
   규칙이었다 — apply-copy.py 전체를 grep 해서 실제로 확인). 그래서 번호는 CSS 카운터로
   .ihwiz-step::before 에 직접 그린다(li 콘텐츠 앞에 자동으로 삽입되는 블록이라 별도 마크업
   없이도 항상 strong 텍스트 "위"에 앉는다).
   연결선(카드 사이를 잇는 점선)은 최종적으로 빼기로 했다 — 경위를 남긴다. 세 번 고쳤다:
   1차 고정 980px 분기(항목 수가 4개 고정이 아니라 홈 5개/3개도 있다는 걸 놓쳐 5개짜리가
   980~1195px 구간에서 허공에 뻗음, Guardian 실측 지적), 2차 :has() 로 항목 수별 분기(그래도
   뷰포트 폭으로 컨테이너 실제 폭을 역산해야 해서 페이지 좌우 패딩만큼 오차가 남아 1000px
   에서 4개짜리가 또 허공에 뻗음, 재실측으로 발견), 3차 @container 로 컨테이너 자기 폭을
   직접 측정(패딩 오차는 없앴으나, 이 좁은 폭 재검증 과정에서 스크롤 리빌 애니메이션이
   일관되게 완료되지 않는 현상이 반복 관찰돼 — 헤드리스 실측 도구 자체의 변수인지 실제
   결함인지 짧은 시간 안에 확실히 가르기 어려웠다). 카드 장식 하나에 네 번째 시도를 쓸
   값어치가 없다는 판단(Opus 지시) — 순서는 원형 번호 배지만으로 이미 충분히 읽힌다.
   data-icon 은 여전히 일부러 안 쓴다 — 번호가 이 카드의 핵심 정보(순서)라 항목별 아이콘까지
   더하면 카드 하나에 장식이 두 개(번호+아이콘) 겹쳐 오히려 산만해진다. */
.ihwiz-steps {
	counter-reset: ihwiz-step-num;
}
.ihwiz-step {
	position: relative;
	counter-increment: ihwiz-step-num;
}
.ihwiz-step::before {
	content: counter(ihwiz-step-num);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 1.05rem;
	font-weight: 700;
	margin-bottom: 0.75rem;
}

/* ── B4: CTA 밴드 아이콘 — 페이지 전체 공통 1개 고정(파서 변경 불필요, IDEAS.md B4).
   1차 시도는 .ihwiz-cta-band h2 를 기준으로 짰다가 라이브 마크업을 확인하고 틀렸다는 걸
   알았다(Opus 지적 이후 재확인) — apply-copy.py 의 cta_band_block() 은 heading_text 인자를
   두 호출부 전부에서 None 으로 넘긴다(코드로 직접 확인). 즉 CTA 밴드에는 h2 가 전혀 없고
   문구는 항상 <p> 하나뿐이다. 그래서 아이콘은 h2 대신 p 앞에 붙인다. */
.ihwiz-cta-band p:first-of-type {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
}
.ihwiz-cta-band p:first-of-type::before {
	content: "";
	display: inline-block;
	width: 1.4rem;
	height: 1.4rem;
	flex: none;
	background-color: var(--wp--preset--color--base);
	-webkit-mask-image: url("../icons/mono/send.svg");
	mask-image: url("../icons/mono/send.svg");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* ===== T330 홈 재디자인 (2026-09-08) — body.home 스코프 한정 ===== */
/* ══════════════════════════════════════════════════════════════════════
   T330 — 홈 재디자인 (시안 정합 폐기, 본문 텍스트 무변경, 디자인만)
   적용 대상: /home/ihwizadmin/web/ihwiz.com/public_html/wp-content/themes/ihwiz/assets/css/theme.css
   적용 방법: 이 파일 전체를 위 theme.css 맨 끝(1826행 뒤)에 그대로 append 한다.
   사용자 지적: "시안과도 안 맞고 허술하다 — 강조가 안 보인다."
   실측 진단: 홈 본문은 h2 + ul.ihwiz-actions(또는 situations) 쌍이 9번 그대로
   반복된다(무엇을 하는가~지금 확인할 수 있는 것) — 전부 흰 배경, 아이콘 1개+캡션
   1줄, 같은 여백. 카드도 배경 구분도 없어 "정보는 있는데 담는 그릇이 없어 빈약해
   보인다"(Opus 실측과 일치). 아래는 마크업을 하나도 안 바꾸고(apply-copy.py 그대로),
   이미 있는 팔레트 토큰만으로 (1)반복을 깨고 (2)위계 있는 강조 지점을 만든다.
   body.home 으로만 스코프해 다른 31페이지(서비스 상세 8섹션 등)는 전혀 건드리지
   않는다 — 그쪽은 이미 scope-grid/deliverables/steps 등 다른 컴포넌트를 써서 이
   문제가 없다.
   홈 선택자 스코프 참고: 홈은 <main class="wp-block-group"> 바로 아래가 아니라
   <div class="entry-content wp-block-post-content"> 를 한 번 더 거친다(실측, T330).
   기존 B1(섹션 배지) 규칙이 쓰는 `main .wp-block-post-content > h2` 패턴을 그대로
   따른다 — 이미 스크린샷으로 실제 작동이 확인된 선택자다. */

/* 1) 반복되는 9개 목록을 "패널"로 묶는다 — 테두리·배경 없이 아이콘만 떠 있던 것을
   홀/짝으로 번갈아 옅은 배경(surface-2) 채움 / 흰 배경+테두리 로 나눠 스크롤 리듬을
   만든다. ul(태그) 개수로만 세므로 ol.ihwiz-steps(진행 방식)는 자동으로 제외된다. */
body.home main .wp-block-post-content > ul.wp-block-list {
	padding: var(--ihwiz-rhythm-card-pad) clamp(1.25rem, 4vw, 2.75rem);
	border-radius: 20px;
}
body.home main .wp-block-post-content > ul.wp-block-list:nth-of-type(odd) {
	background: var(--wp--preset--color--surface-2);
}
body.home main .wp-block-post-content > ul.wp-block-list:nth-of-type(even) {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
}

/* 2) "6대 서비스" 승격 — data-icon="building-2"(회사 소개)는 이 목록에만 나오는
   항목이라, 섹션 순서가 나중에 바뀌어도(문단 추가 등) 안전하게 이 목록만 골라낸다.
   실제 서비스 페이지로 이어지는 링크 6개 = 페이지에서 상업적으로 가장 중요한
   목록이므로 패널이 아니라 낱장 카드 그리드로 승격한다. */
body.home main .wp-block-post-content > ul.ihwiz-actions:has(li[data-icon="building-2"]) {
	background: none;
	border: none;
	padding: 0;
}
body.home main .wp-block-post-content > ul.ihwiz-actions:has(li[data-icon="building-2"]) .ihwiz-action {
	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: 12px;
	padding: 3.75rem 1.25rem 1.75rem;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
body.home main .wp-block-post-content > ul.ihwiz-actions:has(li[data-icon="building-2"]) .ihwiz-action:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(16, 24, 40, .1);
	border-color: var(--wp--preset--color--accent);
}
body.home main .wp-block-post-content > ul.ihwiz-actions:has(li[data-icon="building-2"]) .ihwiz-action[data-icon]::before {
	top: 1rem;
}

/* 3) "만든 사례를 살펴보세요" 승격 — data-icon="folder" 는 이 목록에만 나온다.
   증거 제시 섹션이라 서비스 카드와 톤은 맞추되 강조색만 accent-2(보조 강조)로 바꿔
   "핵심 액션 vs 근거 자료"를 색으로도 구분한다. */
body.home main .wp-block-post-content > ul.ihwiz-actions:has(li[data-icon="folder"]) {
	background: none;
	border: none;
	padding: 0;
}
body.home main .wp-block-post-content > ul.ihwiz-actions:has(li[data-icon="folder"]) .ihwiz-action {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-top: 3px solid var(--wp--preset--color--accent-2);
	border-radius: 12px;
	padding: 3.75rem 1.25rem 1.75rem;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
body.home main .wp-block-post-content > ul.ihwiz-actions:has(li[data-icon="folder"]) .ihwiz-action:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(16, 24, 40, .1);
	border-color: var(--wp--preset--color--accent-2);
}
body.home main .wp-block-post-content > ul.ihwiz-actions:has(li[data-icon="folder"]) .ihwiz-action[data-icon]::before {
	top: 1rem;
}

/* 4) "왜 하나로 다루는가" 승격 — data-icon="puzzle"(문제)·"handshake"(해법) 2항목
   뿐이라 카드 그리드보다 "문제→해법" 2열 대조 배치가 내용과 더 맞는다. 진한 보라
   밴드를 또 만들지 않는다는 원칙(Opus)에 따라 배경은 은은한 틴트만 쓰고, 대신
   왼쪽 색 바(문제=기본 테두리, 해법=accent 톤 테두리)로 "이건 문제, 이건 우리
   해법"이라는 대비를 색으로 보여준다. */
body.home main .wp-block-post-content > ul.ihwiz-actions:has(li[data-icon="handshake"]) {
	background: color-mix(in srgb, var(--wp--preset--color--surface-tint) 22%, var(--wp--preset--color--base));
	border-radius: 20px;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
}
@media (max-width: 640px) {
	body.home main .wp-block-post-content > ul.ihwiz-actions:has(li[data-icon="handshake"]) {
		grid-template-columns: 1fr;
	}
}
body.home main .wp-block-post-content > ul.ihwiz-actions:has(li[data-icon="handshake"]) .ihwiz-action {
	text-align: left;
	background: var(--wp--preset--color--base);
	border-radius: 12px;
	padding: 1.75rem 1.5rem 1.75rem 4.5rem;
	font-size: 1.05rem;
	border-left: 4px solid var(--wp--preset--color--border);
}
body.home main .wp-block-post-content > ul.ihwiz-actions:has(li[data-icon="handshake"]) .ihwiz-action[data-icon="handshake"] {
	border-left-color: var(--wp--preset--color--accent);
}
body.home main .wp-block-post-content > ul.ihwiz-actions:has(li[data-icon="handshake"]) .ihwiz-action[data-icon]::before {
	left: 1.5rem;
	top: 1.75rem;
	transform: none;
}

/* 5) 히어로 강화 — 문구·배치는 그대로, 존재감만 키운다. 헤드라인 상한을 4rem→4.5rem,
   CTA 버튼을 더 크고 확실하게(패딩·글자 확대, 은은한 그림자로 붕 뜬 느낌). */
body.home .ihwiz-hero__headline {
	font-size: clamp(2.4rem, 2.4vw + 2rem, 4.5rem);
}
body.home .ihwiz-hero .wp-block-buttons .wp-block-button__link {
	padding: 1rem 2rem;
	font-size: 1.05rem;
	box-shadow: 0 12px 28px color-mix(in srgb, var(--wp--preset--color--accent) 35%, transparent);
}

/* 6) FAQ — 회색 줄만 이어지던 마무리에 컨테이너 배경을 줘서 "여기서 섹션이 끝난다"를
   눈으로 읽히게 한다(홈 전용 — main .wp-block-details 의 사이트 전역 구분선 규칙은
   그대로 두고 배경만 덧붙인다). */
body.home .ihwiz-faq {
	background: var(--wp--preset--color--surface-2);
	border-radius: 20px;
	padding: 0.5rem clamp(1.25rem, 4vw, 2.75rem);
}

/* 7) 최종 CTA 밴드 — 이미 진한 배경+흰 알약 버튼으로 강한 밴드지만, 문구가 아직
   본문 크기라 마지막 결론치고 존재감이 약하다. 문구는 그대로 두고 크기만 키운다. */
body.home .ihwiz-cta-band p:first-of-type {
	font-size: 1.2rem;
	font-weight: 600;
}
body.home .ihwiz-cta-band .wp-block-button__link {
	padding: 0.9rem 1.9rem;
	font-size: 1.05rem;
}