/* 기술 역량 페이지 /tech/ (설계 docs/design/T20260929_WEB-CH5-plan.md 1절) — 패턴 tech-*.
   빌려 온 시안 섹션: 1-3 .hero·.service-choice·.security·.workflow, 1-4 .split-band·.feature-list, 1-5 .detail.
   functions.php 가 모든 페이지에 싣는다. 메인의 기술 띠(.stack .tech·.tech-mark)와 겹치지 않게 전부 .ch.tech-page 아래에 건다. */
.ch.tech-page {
	/* 시안 1-3·1-4·1-5 제목 서체. 테마 폰트 주소에 Noto Serif KR 이 들어오면 그대로 적용된다. */
	--tech-serif: "Noto Serif KR", var(--wp--preset--font-family--serif);
	--tech-edge: max(6vw, var(--ch-edge));
	/* 시안 크기 그대로 — 프리셋 display-page·title-page(4.1vw·3vw)와 한 줄 넘김이 달라진다. */
	--tech-display: clamp(38px, 3.9vw, 65px);
	--tech-title: clamp(30px, 3.1vw, 48px);
	--tech-hero-bg: #f4f1e9;
	--tech-icon: #1d4a66;
	--tech-chip-icon: #28506a;
	--tech-item-bg: #667a65; /* 1-5 #80957e 는 흰 글자 대비 3.22 — 같은 색조로 어둡게 */
	--tech-step-hover: #63859a;
	--tech-sec-a: #2e4d62;
	--tech-sec-b: #0d3046;
	--tech-sec-c: #0b273b;
	--tech-sec-line: #b8c8d058;
	--tech-sec-card: #ffffff0b;
	--tech-sec-card-hover: #ffffff1e;
	--tech-sec-mark: #ffffff0a;
	--tech-sec-rule: #ffffff06;
}
.ch.tech-page :is(h1, h2, h3, p, ul) { margin-top: 0; }
.ch.tech-page :is(h1, h2) { font-family: var(--tech-serif); font-weight: 700; letter-spacing: -.07em; }
.ch.tech-page h2 { font-size: var(--tech-title); line-height: 1.4; }
.ch.tech-page h3 { font-weight: 700; line-height: normal; letter-spacing: -.055em; }
.ch.tech-page p { line-height: 1.75; }
.ch.tech-page .eyebrow { line-height: normal; letter-spacing: .19em; }
.tech-page .tech-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"); }
.tech-page .tech-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"); }
.tech-page .tech-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.3'%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"); }
.tech-page .tech-chips li::before { content: ""; flex: none; width: 23px; height: 23px; background: var(--tech-chip-icon); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='black' stroke-width='1.55'%3E%3Ccircle cx='14' cy='14' r='10'/%3E%3Cpath d='M9 14h10m-5-5v10'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='black' stroke-width='1.55'%3E%3Ccircle cx='14' cy='14' r='10'/%3E%3Cpath d='M9 14h10m-5-5v10'/%3E%3C/svg%3E") center / contain no-repeat; }
.tech-page .tech-security-card::before { content: ""; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }

/* 텍스트 링크(설계의 "→ 링크") */
.tech-page .tech-more { margin: 24px 0 0; font-size: var(--wp--preset--font-size--small); font-weight: 700; }
.tech-page .tech-more a { display: inline-block; padding-bottom: 3px; border-bottom: 1px solid currentColor; transition: transform .3s, color .3s; }
.tech-page .tech-more a:hover { transform: translateX(4px); color: var(--wp--preset--color--steel); }
.ch.tech-security .tech-more a:hover { color: var(--wp--preset--color--white); }

/* ── 히어로(1-3 .hero) ── */
.ch.tech-hero { display: grid; grid-template-columns: 42% 58%; min-height: clamp(445px, 33vw, 620px); overflow: hidden; background: var(--tech-hero-bg); }
.tech-hero .tech-hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 60px 0 60px var(--tech-edge); }
.tech-hero .tech-hero-copy::after { content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: 125px; background: linear-gradient(90deg, var(--tech-hero-bg), transparent); pointer-events: none; }
.tech-hero .tech-hero-copy .eyebrow { margin-bottom: 16px; }
/* 1-3 히어로 제목보다 긴 문장이라 시안 크기(3.9vw)면 4줄이 된다 — 설계의 2줄에 맞춰 줄인다. 높이는 min-height 로 두어 잘리지 않게. */
.tech-hero h1 { margin: 0 0 18px; font-size: clamp(32px, 2.75vw, 48px); line-height: 1.37; color: var(--wp--preset--color--heading); }
.tech-hero .tech-hero-lead { margin: 0 0 23px; font-size: var(--wp--preset--font-size--tagline); color: var(--wp--custom--color--hero-lead); }
.tech-hero .tech-hero-photo { min-width: 0; }

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

/* ── 서비스 카드(1-3 .choice-card, 사진 없음) ── */
.tech-choice .tech-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp--preset--spacing--grid); }
.tech-cards .tech-card { position: relative; display: grid; grid-template-columns: 49px 1fr 16px; column-gap: 13px; align-content: start; min-height: 120px; padding: 25px 27px 22px; 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; }
.tech-cards .tech-card:hover { transform: translateY(-8px); box-shadow: var(--wp--preset--shadow--lift); }
.tech-cards .tech-card::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; }
.tech-cards .tech-card:hover::after { transform: translateX(4px); }
.tech-card .tech-mark { grid-row: 1 / span 2; display: grid; place-items: center; width: 42px; height: 42px; margin: 0; border: 1px solid var(--wp--custom--color--tech-border); border-radius: 50%; font-family: var(--wp--preset--font-family--serif); font-size: var(--wp--preset--font-size--subtitle); font-weight: 700; line-height: 1; color: var(--tech-icon); }
.tech-card h3 { grid-column: 2; margin: 0 0 5px; font-size: var(--wp--preset--font-size--subtitle-lg); }
.tech-card p:not(.tech-mark) { 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) — 제목 링크를 카드 크기로 늘린다. */
.tech-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.tech-card h3 a:focus-visible { outline: none; }
.tech-card h3 a:focus-visible::after { outline: 2px solid var(--wp--preset--color--navy); outline-offset: 3px; }

/* ── 좌우 띠(1-4·1-5 .split-band) ── */
.ch.tech-wordpress, .ch.tech-custom { padding: 0 0 var(--wp--preset--spacing--section-lg); background: var(--wp--preset--color--white); }
.tech-page .tech-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 465px; }
.tech-split .tech-split-copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 60px clamp(38px, 6vw, 110px) 60px var(--tech-edge); }
.tech-split .tech-split-copy.is-right { padding: 60px var(--tech-edge) 60px clamp(38px, 6vw, 110px); }
.tech-split .tech-split-copy h2 { margin: 10px 0 13px; }
.tech-split .tech-split-copy .tech-intro { margin: 0 0 22px; font-size: var(--wp--preset--font-size--ui); line-height: 1.8; color: var(--wp--preset--color--muted); }
.tech-split .tech-split-photo { min-width: 0; min-height: 465px; }
.tech-split .tech-chips { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; }
.tech-chips li { display: flex; align-items: center; gap: 11px; font-size: var(--wp--preset--font-size--small); font-weight: 600; line-height: 1.55; }
.tech-split .tech-items { display: grid; gap: 16px; margin-bottom: 22px; }
.tech-items .tech-item { display: grid; grid-template-columns: 39px 1fr; column-gap: 12px; align-content: start; }
.tech-items .tech-item-mark { grid-row: 1 / span 2; display: grid; place-items: center; width: 34px; height: 34px; margin: 0; border-radius: 50%; background: var(--tech-item-bg); color: var(--wp--preset--color--white); font-size: 17px; line-height: 1; transition: transform .3s; }
.tech-items .tech-item:hover .tech-item-mark { transform: rotate(-9deg) scale(1.05); }
.tech-items .tech-item h3 { grid-column: 2; margin: 0 0 4px; font-size: var(--wp--preset--font-size--body); }
.tech-items .tech-item p:not(.tech-item-mark) { grid-column: 2; margin: 0; font-size: var(--wp--preset--font-size--eyebrow); line-height: 1.6; color: var(--wp--custom--color--tech-sub); }

/* ── 백업·보안 띠(1-3 .security, 카드 3장) ── */
.ch.tech-security { position: relative; overflow: hidden; display: flex; align-items: center; min-height: 340px; background: radial-gradient(circle at 88% 20%, var(--tech-sec-a) 0, var(--tech-sec-b) 45%, var(--tech-sec-c) 100%); background-color: var(--tech-sec-a); color: var(--wp--preset--color--white); }
.ch.tech-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(--tech-sec-mark); transform: rotate(-5deg); pointer-events: none; }
.ch.tech-security::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(100deg, transparent 0 80px, var(--tech-sec-rule) 81px 82px); pointer-events: none; }
.tech-security .tech-security-content { position: relative; z-index: 1; padding: 55px 0; text-align: center; }
.tech-security .tech-security-content h2 { margin: 12px 0 9px; }
.tech-security .tech-security-lead { margin: 0 0 25px; font-size: var(--wp--preset--font-size--ui); color: var(--wp--custom--color--on-navy); }
.tech-security .tech-security-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 1120px; margin: auto; text-align: left; }
.tech-security .tech-security-card { display: grid; grid-template-columns: 55px 1fr; column-gap: 18px; align-content: center; padding: 20px 26px; border: 1px solid var(--tech-sec-line); background: var(--tech-sec-card); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); transition: background-color .35s, transform .35s; }
.tech-security .tech-security-card:hover { background: var(--tech-sec-card-hover); transform: translateY(-4px); }
.tech-security .tech-security-card::before { grid-row: 1 / span 2; align-self: center; width: 42px; height: 42px; background: var(--wp--preset--color--white); }
.tech-security .tech-security-card h3 { grid-column: 2; margin: 0 0 5px; font-size: var(--wp--preset--font-size--tagline); }
.tech-security .tech-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); }

/* ── 제작 흐름(1-3 .workflow) ── */
.tech-flow .tech-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
.tech-steps .tech-step { position: relative; display: grid; grid-template-columns: 67px 1fr; gap: 13px; align-items: start; }
.tech-steps .tech-step:not(:last-child)::after { content: "→"; position: absolute; top: 20px; right: -30px; font-size: 23px; font-weight: 300; color: var(--wp--custom--color--caption); }
.tech-steps .tech-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; }
.tech-steps .tech-step:hover .tech-step-icon { transform: translateY(-5px); border-color: var(--tech-step-hover); }
.tech-steps .tech-step-copy .tech-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; }
.tech-steps .tech-step-copy h3 { margin: 0 0 5px; font-size: var(--wp--preset--font-size--lead-lg); }
.tech-steps .tech-step-copy p:not(.tech-step-num) { margin: 0; font-size: var(--wp--preset--font-size--eyebrow); line-height: 1.65; color: var(--wp--custom--color--tech-sub); }
.tech-flow .container > .tech-more { margin-top: 36px; text-align: center; }

/* 시안 구간(1100·780·540) */
@media (max-width: 1100px) {
	.tech-choice .tech-cards { gap: 15px; }
	.tech-cards .tech-card { grid-template-columns: 41px 1fr 10px; column-gap: 8px; padding: 20px 15px; }
	.tech-card .tech-mark { width: 36px; height: 36px; }
	.tech-card h3 { font-size: var(--wp--preset--font-size--lead-lg); }
	.tech-split .tech-split-copy, .tech-split .tech-split-copy.is-right { padding-inline: 6vw; }
	.tech-security .tech-security-card { grid-template-columns: 44px 1fr; column-gap: 12px; padding: 18px; }
	.tech-security .tech-security-card::before { width: 36px; height: 36px; }
	.tech-flow .tech-steps { gap: 24px; }
	.tech-steps .tech-step { grid-template-columns: 1fr; gap: 8px; }
	.tech-steps .tech-step:not(:last-child)::after { right: -19px; }
}

@media (max-width: 780px) {
	.ch.tech-hero { display: flex; flex-direction: column; height: auto; }
	.tech-hero .tech-hero-copy { padding: 65px 24px 45px; }
	.tech-hero .tech-hero-copy::after { display: none; }
	.tech-hero .tech-hero-photo { flex: none; height: 350px; }
	.ch.tech-choice, .ch.tech-flow { padding: 85px 0; }
	.tech-choice .tech-cards { grid-template-columns: 1fr; gap: 16px; }
	.tech-page .tech-split { display: flex; flex-direction: column; }
	.tech-split .tech-split-copy, .tech-split .tech-split-copy.is-right { padding: 55px 26px; }
	.tech-split .tech-split-photo { flex: none; height: 340px; min-height: 0; }
	.tech-split:not(.is-photo-first) .tech-split-photo { order: -1; }
	.ch.tech-wordpress, .ch.tech-custom { padding-bottom: 85px; }
	.ch.tech-security { min-height: 0; }
	.tech-security .tech-security-content { padding: 70px 0; }
	.tech-security .tech-security-grid { grid-template-columns: 1fr; max-width: 560px; }
	.tech-flow .tech-steps { grid-template-columns: 1fr 1fr; gap: 25px; }
	.tech-steps .tech-step { grid-template-columns: 62px 1fr; }
	.tech-steps .tech-step:not(:last-child)::after { display: none; }
}

@media (max-width: 540px) {
	.tech-hero h1 { font-size: 37px; }
	.tech-hero .tech-hero-lead { font-size: var(--wp--preset--font-size--ui); }
	.tech-hero .tech-hero-photo { height: 240px; }
	.ch.tech-page .tech-head h2, .ch.tech-security h2 { font-size: 29px; }
	.ch.tech-page .tech-split h2 { font-size: 27px; }
	.tech-cards .tech-card { min-height: 108px; padding: 20px; }
	.tech-split .tech-split-copy, .tech-split .tech-split-copy.is-right { padding: 48px 22px; }
	.tech-split .tech-split-photo { height: 270px; }
	.tech-security .tech-security-content { padding: 65px 0; }
	.tech-security .tech-security-card { padding: 15px 20px; }
	.tech-flow .tech-steps { grid-template-columns: 1fr; gap: 26px; }
	.tech-steps .tech-step { grid-template-columns: 66px 1fr; }
}