/* 호스팅 페이지(시안 1-3) — 패턴 host-*. functions.php 가 모든 페이지에 싣는다.
   선택자는 섹션 클래스 host-page·host-* 로만 건다(다른 페이지·메인 섹션과 공유하지 않는다).
   값은 theme.json 프리셋·커스텀을 먼저 쓰고, 이 페이지에만 있는 색(히어로·보안 띠·마지막 띠)만 아래 변수로 둔다. */
.ch.host-page {
	/* 시안 1-3 제목 서체. 테마 폰트 주소에 Noto Serif KR 이 들어오면(BACKEND CONTACT 작업) 그대로 적용된다. */
	--host-serif: "Noto Serif KR", var(--wp--preset--font-family--serif);
	--host-edge: max(6vw, var(--ch-edge));
	/* 시안 크기 그대로 — 프리셋 display-page·title-page(4.1vw·3vw)는 한 줄 넘김이 달라진다. */
	--host-display: clamp(38px, 3.9vw, 65px);
	--host-title: clamp(30px, 3.1vw, 48px);
	--host-title-final: clamp(27px, 2.6vw, 40px);
	--host-hero-bg: #f4f1e9;
	--host-icon: #1d4a66;
	--host-step-hover: #63859a;
	--host-sec-a: #2e4d62;
	--host-sec-b: #0d3046;
	--host-sec-c: #0b273b;
	--host-sec-line: #b8c8d058;
	--host-sec-card: #ffffff0b;
	--host-sec-card-hover: #ffffff1e;
	--host-sec-mark: #ffffff0a;
	--host-sec-rule: #ffffff06;
	--host-final-bg: #edd8bd;
	--host-final-veil: #eadac6;
	--host-final-veil-mid: #eadac6d9;
	--host-final-veil-end: #eadac600;
	/* 흰 배경 작은 글자 대비 4.5:1 이상(WCAG 1.4.3). 공용 eyebrow·tech-sub 와 같은 색조에서 명도만 낮췄다 — 공용 값은 D 단계 몫. */
	--host-eyebrow: #69777e;
	--host-sub: #647680;
}
.ch.host-page .eyebrow:not(.is-light) { color: var(--host-eyebrow); }
.ch.host-page :is(h1, h2, h3, p) { margin-top: 0; }
.ch.host-page :is(h1, h2) { font-family: var(--host-serif); font-weight: 700; letter-spacing: -.07em; }
.ch.host-page h2 { font-size: var(--host-title); line-height: 1.4; }
.ch.host-page h3 { font-weight: 700; line-height: normal; letter-spacing: -.055em; }
.ch.host-page p { line-height: 1.75; }
.ch.host-page .eyebrow { line-height: normal; letter-spacing: .19em; }

/* 아이콘: 시안의 인라인 SVG 선을 마스크로(색은 currentColor 대신 배경색). */
.host-page :is(.host-choice-text, .host-detail, .host-security-card)::before { content: ""; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.host-page .host-ico-rack { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='black' stroke-width='1.55'%3E%3Crect x='5' y='7' width='30' height='10' rx='2'/%3E%3Crect x='5' y='23' width='30' height='10' rx='2'/%3E%3Cpath d='M11 12h2m-2 16h2m7-16h9m-9 16h9'/%3E%3C/svg%3E"); }
.host-page .host-ico-cloud { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='black' stroke-width='1.55'%3E%3Cpath d='M7 30h25a7 7 0 0 0 0-14 12 12 0 0 0-23-1A8 8 0 0 0 7 30Z'/%3E%3C/svg%3E"); }
.host-page .host-ico-sun { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='black' stroke-width='1.55'%3E%3Ccircle cx='20' cy='20' r='8'/%3E%3Cpath d='M20 2v6m0 24v6M2 20h6m24 0h6M7 7l5 5m16 16 5 5M33 7l-5 5M12 28l-5 5'/%3E%3C/svg%3E"); }
.host-page .host-ico-monitor { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none' stroke='black' stroke-width='1.55'%3E%3Crect x='3' y='6' width='30' height='21' rx='2'/%3E%3Cpath d='M12 32h12M18 27v5'/%3E%3C/svg%3E"); }
.host-page .host-ico-db { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none' stroke='black' stroke-width='1.55'%3E%3Cellipse cx='18' cy='8' rx='12' ry='4'/%3E%3Cpath d='M6 8v8c0 2 5 4 12 4s12-2 12-4V8M6 16v8c0 2 5 4 12 4s12-2 12-4v-8'/%3E%3C/svg%3E"); }
.host-page .host-ico-shield { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none' stroke='black' stroke-width='1.55'%3E%3Cpath d='M18 2 32 8v10c0 8-5 13-14 16C9 31 4 26 4 18V8Z'/%3E%3C/svg%3E"); }
.host-page .host-ico-box { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none' stroke='black' stroke-width='1.55'%3E%3Cpath d='m5 13 13-7 13 7-13 7Zm0 0v9l13 8 13-8v-9M18 20v10'/%3E%3C/svg%3E"); }
.host-page .host-ico-gear { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none' stroke='black' stroke-width='1.55'%3E%3Ccircle cx='18' cy='18' r='7'/%3E%3Cpath d='M18 2v7m0 18v7M2 18h7m18 0h7M7 7l5 5m12 12 5 5M29 7l-5 5M12 24l-5 5'/%3E%3C/svg%3E"); }
.host-page .host-ico-person { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none' stroke='black' stroke-width='1.55'%3E%3Ccircle cx='18' cy='10' r='6'/%3E%3Cpath d='M5 33c0-8 5-13 13-13s13 5 13 13Z'/%3E%3C/svg%3E"); }
.host-page .host-ico-refresh { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none' stroke='black' stroke-width='1.55'%3E%3Cpath d='M5 15a13 13 0 0 1 23-7l3 3M31 21a13 13 0 0 1-23 7l-3-3'/%3E%3Cpath d='M31 3v8h-8M5 33v-8h8'/%3E%3C/svg%3E"); }
.host-page .host-ico-doc { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none' stroke='black' stroke-width='1.55'%3E%3Crect x='7' y='3' width='22' height='30' rx='2'/%3E%3Cpath d='M12 11h12m-12 6h12m-12 6h9'/%3E%3C/svg%3E"); }
.host-page .host-ico-chat { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none' stroke='black' stroke-width='1.55'%3E%3Cpath d='M18 4C10 4 4 9 4 16c0 5 3 8 6 10l-1 7 7-4h2c8 0 14-5 14-13S26 4 18 4Z'/%3E%3Cpath d='M11 17h2m4 0h2m4 0h2'/%3E%3C/svg%3E"); }
.host-page .host-ico-vault { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='1.4'%3E%3Cellipse cx='24' cy='9' rx='16' ry='5'/%3E%3Cpath d='M8 9v12c0 3 7 5 16 5s16-2 16-5V9M8 21v12c0 3 7 5 16 5s16-2 16-5V21'/%3E%3C/svg%3E"); }
.host-page .host-ico-guard { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='1.4'%3E%3Cpath d='M24 3 42 11v13c0 10-7 17-18 21C13 41 6 34 6 24V11Z'/%3E%3Cpath d='m17 24 5 5 10-11'/%3E%3C/svg%3E"); }

/* 사진: 화면에 들어오면 살짝 당겨졌다 제자리로(hosting.js 가 is-zoom·is-in-view 를 붙인다). 스크립트가 없으면 최종 상태. */
.ch.host-page .crop img, .ch.host-page .crop:hover img { transform: none; filter: none; }
.ch.host-page .crop.is-zoom img { transform: scale(1.035); filter: saturate(.88); transition: none; }
.ch.host-page .crop.is-zoom:is(.is-in-view, :hover) img { transform: none; filter: none; transition: transform 1.6s cubic-bezier(.16, .72, .18, 1), filter 1.2s; }

/* ── 히어로 ── */
.ch.host-hero { display: grid; grid-template-columns: 42% 58%; height: clamp(445px, 33vw, 620px); overflow: hidden; background: var(--host-hero-bg); }
.host-hero .host-hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 60px 0 60px var(--host-edge); }
.host-hero .host-hero-copy::after { content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: 125px; background: linear-gradient(90deg, var(--host-hero-bg), transparent); pointer-events: none; }
.host-hero h1 { margin: 0 0 18px; font-size: var(--host-display); line-height: 1.37; color: var(--wp--preset--color--heading); }
.host-hero .host-hero-lead { margin: 0 0 23px; font-size: var(--wp--preset--font-size--tagline); color: var(--wp--custom--color--hero-lead); }
.host-hero .host-hero-photo { min-width: 0; }

/* ── 제목(가운데) ── */
.ch.host-services, .ch.host-workflow { padding: var(--wp--preset--spacing--section-lg) 0; background: var(--wp--preset--color--white); }
.host-page .host-head { margin: 0 auto 36px; text-align: center; }
/* 시안은 가운데 제목의 eyebrow 가 줄 안 span 이라 부모 줄 높이(16px 본문 normal ≈ 23px)를 차지한다. */
.host-page .host-head .eyebrow, .host-security .host-security-content > .eyebrow { line-height: 23px; }
.host-page .host-head h2 { margin: 9px 0 10px; }
.host-page .host-head p:not(.eyebrow) { margin: 0; font-size: var(--wp--preset--font-size--body); color: var(--wp--preset--color--muted); }

/* ── 운영 방식 선택 카드 ── */
.host-services .host-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp--preset--spacing--grid); }
.host-services .host-choice { position: relative; display: flex; flex-direction: column; background: var(--wp--preset--color--white); border: 1px solid var(--wp--custom--color--card-border); box-shadow: var(--wp--preset--shadow--soft); transition: transform .35s, box-shadow .35s; }
.host-services .host-choice:hover { transform: translateY(-8px); box-shadow: var(--wp--preset--shadow--lift); }
.host-choice .host-choice-text { display: grid; grid-template-columns: 49px 1fr 16px; column-gap: 13px; align-content: start; min-height: 120px; padding: 25px 27px 18px; }
.host-choice .host-choice-text::before { grid-row: 1 / span 2; justify-self: center; width: 42px; height: 42px; background: var(--host-icon); }
.host-choice .host-choice-text::after { content: "›"; grid-column: 3; grid-row: 1 / span 2; font-size: var(--wp--preset--font-size--icon); line-height: 1.15; transition: transform .3s; }
.host-services .host-choice:hover .host-choice-text::after { transform: translateX(4px); }
.host-choice .host-choice-text h3 { grid-column: 2; margin: 0 0 5px; font-size: var(--wp--preset--font-size--subtitle-lg); }
.host-choice .host-choice-text p { grid-column: 2; margin: 0; font-size: var(--wp--preset--font-size--xs); line-height: 1.6; color: var(--wp--preset--color--muted); }
/* 카드 전체가 링크(시안 a.choice-card) — 제목 링크를 카드 크기로 늘린다. */
.host-choice h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.host-choice h3 a:focus-visible { outline: none; }
.host-choice h3 a:focus-visible::after { outline: 2px solid var(--wp--preset--color--navy); outline-offset: 3px; }
.host-choice .host-choice-photo { flex: none; height: 138px; }

/* ── 좌우 띠(웹호스팅·서버호스팅·유지관리) ── */
.ch.host-web, .ch.host-server, .ch.host-care { padding: 0 0 var(--wp--preset--spacing--section-lg); background: var(--wp--preset--color--white); }
.host-page .host-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 465px; }
.host-split .host-split-copy { display: flex; flex-direction: column; justify-content: center; padding: 60px clamp(38px, 6vw, 110px) 60px var(--host-edge); }
.host-split .host-split-copy.is-right { padding: 60px var(--host-edge) 60px clamp(38px, 6vw, 110px); }
.host-split .host-split-copy h2 { margin: 10px 0 13px; }
.host-split .host-split-copy .host-intro { margin: 0 0 22px; font-size: var(--wp--preset--font-size--ui); line-height: 1.8; color: var(--wp--preset--color--muted); }
.host-split .host-split-photo { min-width: 0; min-height: 465px; }
.host-split .host-details { display: grid; gap: 18px; margin-top: 1px; }
.host-details .host-detail { display: grid; grid-template-columns: 47px 1fr; column-gap: 14px; align-content: start; }
.host-details .host-detail::before { grid-row: 1 / span 2; width: 31px; height: 31px; margin: 2.5px; background: var(--host-icon); }
.host-details .host-detail h3 { grid-column: 2; margin: 0 0 4px; font-size: var(--wp--preset--font-size--lead-lg); }
.host-details .host-detail p { grid-column: 2; margin: 0; font-size: var(--wp--preset--font-size--xs); line-height: 1.6; color: var(--host-sub); }

/* ── 백업·보안 띠 ── */
/* 단색 바탕은 그라디언트가 못 그려질 때의 대비책 — 가장 밝은 정지점이라 대비 측정도 최악값으로 잡힌다. */
.ch.host-security { position: relative; overflow: hidden; display: flex; align-items: center; min-height: 340px; background: radial-gradient(circle at 88% 20%, var(--host-sec-a) 0, var(--host-sec-b) 45%, var(--host-sec-c) 100%); background-color: var(--host-sec-a); color: var(--wp--preset--color--white); }
.ch.host-security::before { content: "✝"; position: absolute; right: 4%; bottom: -60px; font-family: var(--wp--preset--font-family--serif); font-size: 360px; font-weight: 300; color: var(--host-sec-mark); transform: rotate(-5deg); pointer-events: none; }
.ch.host-security::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(100deg, transparent 0 80px, var(--host-sec-rule) 81px 82px); pointer-events: none; }
.host-security .host-security-content { position: relative; z-index: 1; padding: 55px 0; text-align: center; }
.host-security .host-security-content h2 { margin: 12px 0 9px; }
.host-security .host-security-lead { margin: 0 0 25px; font-size: var(--wp--preset--font-size--ui); color: var(--wp--custom--color--on-navy); }
.host-security .host-security-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 940px; margin: auto; text-align: left; }
.host-security .host-security-card { display: grid; grid-template-columns: 55px 1fr; column-gap: 18px; align-content: center; padding: 20px 26px; border: 1px solid var(--host-sec-line); background: var(--host-sec-card); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); transition: background-color .35s, transform .35s; }
.host-security .host-security-card:hover { background: var(--host-sec-card-hover); transform: translateY(-4px); }
.host-security .host-security-card::before { grid-row: 1 / span 2; align-self: center; width: 42px; height: 42px; background: var(--wp--preset--color--white); }
.host-security .host-security-card h3 { grid-column: 2; margin: 0 0 5px; font-size: var(--wp--preset--font-size--tagline); }
.host-security .host-security-card p { grid-column: 2; margin: 0; font-size: var(--wp--preset--font-size--xs); line-height: 1.6; color: var(--wp--custom--color--on-navy); }

/* ── 진행 흐름 ── */
.host-workflow .host-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
.host-steps .host-step { position: relative; display: grid; grid-template-columns: 67px 1fr; gap: 13px; align-items: start; }
.host-steps .host-step:not(:last-child)::after { content: "→"; position: absolute; top: 20px; right: -30px; font-size: 23px; font-weight: 300; color: var(--wp--custom--color--caption); }
.host-steps .host-step-icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0; border: 1px solid var(--wp--preset--color--line); border-radius: 50%; font-size: 27px; line-height: 1; color: var(--wp--preset--color--heading); transition: transform .35s, border-color .35s; }
.host-steps .host-step:hover .host-step-icon { transform: translateY(-5px); border-color: var(--host-step-hover); }
.host-steps .host-step-copy .host-step-num { margin: 0 0 4px; font-family: var(--wp--preset--font-family--latin); font-size: var(--wp--preset--font-size--tagline); font-weight: 700; line-height: 1.3; }
.host-steps .host-step-copy h3 { margin: 0 0 5px; font-size: var(--wp--preset--font-size--lead-lg); }
.host-steps .host-step-copy p:not(.host-step-num) { margin: 0; font-size: var(--wp--preset--font-size--eyebrow); line-height: 1.65; color: var(--host-sub); }

/* ── 마지막 상담 띠(자기 패턴 — 공통 cta 파트를 쓰지 않는다) ── */
.ch.host-final { display: grid; grid-template-columns: 48% 52%; min-height: 240px; background: var(--host-final-bg); }
.host-final .host-final-copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 40px 20px 40px var(--host-edge); background: linear-gradient(90deg, var(--host-final-veil) 65%, var(--host-final-veil-mid) 89%, var(--host-final-veil-end)); }
.host-final .host-final-copy h2 { margin: 0 0 8px; font-size: var(--host-title-final); }
.host-final .host-final-copy p { margin: 0 0 18px; font-size: var(--wp--preset--font-size--small); }
.host-final .host-final-photo { min-width: 0; }

/* 시안 1-3 의 구간(1100·780·540)을 그대로 쓴다. */
@media (max-width: 1100px) {
	.host-services .host-choices { gap: 15px; }
	.host-choice .host-choice-text { grid-template-columns: 41px 1fr 10px; column-gap: 8px; padding: 20px 15px; }
	.host-choice .host-choice-text::before { width: 36px; height: 36px; }
	.host-choice .host-choice-text h3 { font-size: var(--wp--preset--font-size--lead-lg); }
	.host-split .host-split-copy, .host-split .host-split-copy.is-right { padding-inline: 6vw; }
	.host-workflow .host-steps { gap: 24px; }
	.host-steps .host-step { grid-template-columns: 1fr; gap: 8px; }
	.host-steps .host-step:not(:last-child)::after { right: -19px; }
}

@media (max-width: 780px) {
	.ch.host-hero { display: flex; flex-direction: column; height: auto; }
	.host-hero .host-hero-copy { padding: 65px 24px 45px; }
	.host-hero .host-hero-copy::after { display: none; }
	.host-hero .host-hero-photo { flex: none; height: 350px; }
	.ch.host-services, .ch.host-workflow { padding: 85px 0; }
	.host-services .host-choices { grid-template-columns: 1fr; gap: 16px; }
	.host-services .host-choice { display: grid; grid-template-columns: 1fr 44%; }
	.host-choice .host-choice-photo { order: 2; height: auto; min-height: 160px; }
	.host-choice .host-choice-text { order: 1; align-content: center; min-height: 160px; }
	.host-page .host-split { display: flex; flex-direction: column; }
	.host-split .host-split-copy, .host-split .host-split-copy.is-right { padding: 55px 26px; }
	.host-split .host-split-photo { flex: none; height: 340px; min-height: 0; }
	.host-split.is-photo-first .host-split-photo { order: 2; }
	.ch.host-web, .ch.host-server, .ch.host-care { padding-bottom: 85px; }
	.ch.host-security { min-height: 0; }
	.host-security .host-security-content { padding: 70px 0; }
	.host-workflow .host-steps { grid-template-columns: 1fr 1fr; gap: 25px; }
	.host-steps .host-step { grid-template-columns: 62px 1fr; }
	.host-steps .host-step:not(:last-child)::after { display: none; }
	.ch.host-final { grid-template-columns: 1fr 1fr; }
	.host-final .host-final-copy { padding: 35px 25px; }
}

@media (max-width: 540px) {
	.host-hero h1 { font-size: 37px; }
	.host-hero .host-hero-lead { font-size: var(--wp--preset--font-size--ui); }
	.host-hero .host-hero-photo { height: 240px; }
	.ch.host-page .host-head h2, .ch.host-security h2 { font-size: 29px; }
	.host-services .host-choice { grid-template-columns: 1fr; }
	.host-choice .host-choice-text { min-height: 108px; padding: 20px; }
	.host-choice .host-choice-photo { height: 155px; min-height: 0; }
	.host-split .host-split-copy, .host-split .host-split-copy.is-right { padding: 48px 22px; }
	.host-split .host-split-photo { height: 270px; }
	.host-security .host-security-grid { grid-template-columns: 1fr; }
	.host-security .host-security-content { padding: 65px 0; }
	.host-security .host-security-card { padding: 15px 20px; }
	.host-workflow .host-steps { grid-template-columns: 1fr; gap: 26px; }
	.host-steps .host-step { grid-template-columns: 66px 1fr; }
	.ch.host-final { display: flex; flex-direction: column; }
	.host-final .host-final-copy { padding: 44px 23px 27px; background: var(--host-final-veil); }
	.host-final .host-final-photo { flex: none; height: 165px; }
}