/* 41~60 전문 원페이지 — 모바일 우선. 테마는 변수 4개만 바꿔 페이지별 색감을 구분한다. */
.pro { --pa:#C8102E; --pa2:#12233a; --pbg:#fff; --palt:#F3F5F8; --pt:#1f2a37; color:var(--pt); }
.pro-theme-blue  { --pa:#1C64C8; --pa2:#0d2a52; --palt:#EAF2FC; }
.pro-theme-lab   { --pa:#C8102E; --pa2:#2b3a4a; --palt:#F4F9FB; --pbg:#FBFEFF; }
.pro-theme-cold  { --pa:#2E86C1; --pa2:#1b3a57; --palt:#E8F1F8; }
.pro-theme-rust  { --pa:#B5541C; --pa2:#3b2a20; --palt:#F6EFE9; }
.pro-theme-steel { --pa:#C8102E; --pa2:#25323f; --palt:#EDF0F3; }
.pro-theme-dark  { --pa:#E0213A; --pa2:#0f1720; --palt:#EEF0F2; }
.pro h1,.pro h2,.pro h3 { line-height:1.3; }
.pro-sec { padding:40px 0; background:var(--pbg); }
.pro-sec-tight { padding:16px 0; }
.pro-sec-alt { background:var(--palt); }
.pro-sec-dark { background:var(--pa2); color:#fff; }
.pro-sec h2 { font-size:24px; margin-bottom:20px; padding-left:12px; border-left:5px solid var(--pa); }
.pro-note { font-size:14px; opacity:.75; margin-top:16px; }
.pro-ph { margin:0; }
.pro-ph img { width:100%; height:100%; object-fit:cover; border-radius:10px; max-height:420px; }
.pro-ph figcaption { font-size:13px; opacity:.7; margin-top:6px; }

/* ----- Hero ----- */
.pro-hero { position:relative; background:var(--pa2); color:#fff; overflow:hidden; }
.pro-hero .breadcrumb a { opacity:.85; }
.pro-hero h1 { font-size:32px; margin-bottom:12px; }
.pro-hero-sub { font-size:17px; opacity:.92; margin-bottom:20px; }
.pro-hero-in { position:relative; z-index:2; padding-top:40px; padding-bottom:40px; display:grid; gap:24px; }
.pro-hero-bg { position:absolute; inset:0; }
.pro-hero-bg img { width:100%; height:100%; object-fit:cover; }
.pro-hero-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(10,18,30,.85),rgba(10,18,30,.35)); }
.pro-hero-full .pro-hero-in { min-height:420px; align-content:center; }
.pro-hero-banner .pro-hero-in { min-height:300px; align-content:end; }
.pro-hero-plant .pro-hero-in { min-height:480px; align-content:end; }
.pro-hero-plant .pro-hero-bg::after { background:linear-gradient(0deg,rgba(10,18,30,.92),rgba(10,18,30,.2) 70%); }
.pro-hero-closeup .pro-hero-p .pro-ph img { aspect-ratio:1/1; border:4px solid var(--pa); border-radius:50%; max-height:none; }
.pro-hero-lab, .pro-hero-stacked.pro-hero { background:var(--palt); color:var(--pt); }
.pro-hero-lab .pro-hero-p img { border-radius:24px 24px 24px 80px; aspect-ratio:4/3; }
.pro-hero-split-l .pro-hero-p, .pro-hero-split-r .pro-hero-p { }
.pro-hero-split-r .pro-hero-p img, .pro-hero-split-l .pro-hero-p img { aspect-ratio:4/3; }
.pro-hero-stacked .pro-hero-p img { aspect-ratio:16/9; }
.pro-hero-triptych .pro-hero-p { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.pro-hero-triptych .pro-hero-p figure:nth-child(2) { margin-top:16px; }
.pro-hero-triptych .pro-hero-p img { aspect-ratio:3/4; }

/* ----- 본문 블록 ----- */
.pro-lead p { font-size:19px; font-weight:600; margin:0; padding:20px; background:var(--palt); border-left:5px solid var(--pa); border-radius:8px; }
.pro-prose p, .pro-split-t p, .pro-callout p { margin-bottom:14px; }
.pro-split { display:grid; gap:20px; align-items:center; }
.pro-photo-sm { max-width:420px; } .pro-photo-md { max-width:720px; } .pro-photo-lg { max-width:100%; }
.pro-photo-lg .pro-ph img { aspect-ratio:21/9; max-height:none; }

.pro-gal { display:grid; gap:10px; grid-template-columns:repeat(2,1fr); }
.pro-gal .pro-ph img { aspect-ratio:1/1; }
.pro-gal-1\+5 .pro-ph:first-child { grid-column:1/-1; } .pro-gal-1\+5 .pro-ph:first-child img { aspect-ratio:16/9; }
.pro-gal-2\+4 .pro-ph:nth-child(-n+2) img { aspect-ratio:4/3; }
.pro-gal-masonry { display:block; column-count:2; column-gap:10px; } .pro-gal-masonry .pro-ph { break-inside:avoid; margin-bottom:10px; } .pro-gal-masonry .pro-ph img { aspect-ratio:auto; }
.pro-gal-strip { display:flex; overflow-x:auto; gap:10px; scroll-snap-type:x mandatory; } .pro-gal-strip .pro-ph { flex:0 0 70%; scroll-snap-align:start; } .pro-gal-strip .pro-ph img { aspect-ratio:4/3; }

.pro-cards { display:grid; gap:14px; grid-template-columns:1fr; }
.pro-card { background:#fff; border:1px solid #dfe5ec; border-top:4px solid var(--pa); border-radius:10px; padding:18px; position:relative; }
.pro-sec-alt .pro-card { background:#fff; }
.pro-mark { display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; border-radius:20px; background:var(--pa); color:#fff; font-weight:800; margin-bottom:10px; padding:0 8px; }
.pro-card p { margin:0; font-size:15px; }

.pro-check li { display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border-bottom:1px solid #e3e8ee; }
.pro-check li::before { content:"✓"; flex:0 0 26px; height:26px; border-radius:50%; background:var(--pa); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; }
.pro-check-warn li::before { content:"!"; background:#d97706; }
.pro-check-steps li::before { display:none; } .pro-check-steps b { flex:0 0 28px; height:28px; border-radius:6px; background:var(--pa2); color:#fff; display:flex; align-items:center; justify-content:center; }

.pro-tl { list-style:none; margin:0; padding:0; border-left:3px solid var(--pa); margin-left:14px; }
.pro-tl li { position:relative; padding:0 0 22px 28px; }
.pro-tl-n { position:absolute; left:-17px; top:0; width:30px; height:30px; border-radius:50%; background:var(--pa); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; font-size:14px; }
.pro-tl p { margin:0; font-size:15px; }

.pro-flow { display:grid; gap:8px; }
.pro-step { background:#fff; border:2px solid var(--pa); border-radius:12px; padding:16px; }
.pro-step p { margin:0; font-size:15px; }
.pro-arrow { justify-self:center; width:0; height:0; border-left:10px solid transparent; border-right:10px solid transparent; border-top:14px solid var(--pa); }
.pro-flow-system .pro-step { border-style:dashed; background:var(--pa2); color:#fff; border-color:var(--pa); }

.pro-cmp { display:grid; gap:16px; }
.pro-cmp > div { border-radius:12px; padding:14px; background:#fff; border:1px solid #dfe5ec; }
.pro-cmp-a { border-top:5px solid #6b7280 !important; } .pro-cmp-b { border-top:5px solid var(--pa) !important; }
.pro-tag { display:inline-block; font-weight:800; font-size:13px; padding:4px 12px; border-radius:20px; background:var(--pa2); color:#fff; margin-bottom:10px; }
.pro-cmp ul { margin-top:12px; } .pro-cmp li { padding:6px 0 6px 18px; position:relative; font-size:15px; } .pro-cmp li::before { content:"•"; position:absolute; left:4px; color:var(--pa); }

.pro-tbl-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.pro-tbl { width:100%; border-collapse:collapse; min-width:520px; background:#fff; }
.pro-tbl th, .pro-tbl td { padding:12px; border:1px solid #dfe5ec; text-align:left; font-size:15px; vertical-align:top; }
.pro-tbl thead th { background:var(--pa2); color:#fff; } .pro-tbl tbody th { background:var(--palt); color:var(--pa2); width:26%; }

.pro-gauges { display:grid; gap:14px; grid-template-columns:repeat(2,1fr); }
.pro-gauge { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18); border-radius:12px; padding:14px; text-align:center; color:#fff; }
.pro-gauge svg { width:100%; max-width:120px; color:var(--pa); margin:0 auto 6px; display:block; } .pro-gauge h3 { font-size:16px; } .pro-gauge p { font-size:14px; opacity:.85; margin:0; }

.pro-zones { display:grid; gap:12px; }
.pro-zone { padding:16px; border-radius:10px; border-left:8px solid var(--pa); background:#fff; } .pro-zone-1 { border-color:#d97706; } .pro-zone-2 { border-color:#2E86C1; } .pro-zone-3 { border-color:#6b7280; } .pro-zone p { margin:0; font-size:15px; }

.pro-answer { background:var(--pa2); color:#fff; border-radius:14px; padding:22px; } .pro-answer h2 { color:#fff; border-color:var(--pa); font-size:20px; margin-bottom:10px; } .pro-answer p { margin:0; }
.pro-callout { border-radius:12px; padding:18px; background:#EAF2FC; border:1px solid #bcd3f0; } .pro-callout-warn { background:#FFF4E5; border-color:#f5cf93; } .pro-callout h2 { font-size:20px; }

.pro-company .container { background:var(--palt); border-radius:14px; padding:24px; }
.pro-domains { display:grid; gap:10px; margin-top:12px; }
.pro-domains a { display:flex; flex-direction:column; gap:2px; min-height:44px; padding:12px 14px; background:#fff; border:1px solid #dfe5ec; border-radius:10px; } .pro-domains span { font-size:14px; opacity:.75; }
.pro-related { display:flex; flex-wrap:wrap; gap:10px; } .pro-related a { display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border-radius:999px; background:var(--palt); font-weight:700; border:1px solid #dfe5ec; }
.pro-cta { background:var(--pa2); color:#fff; text-align:center; } .pro-cta h2 { color:#fff; border:0; padding:0; } .pro-cta .cta-group { justify-content:center; }

@media (min-width:768px) {
	.pro-cols-2 { grid-template-columns:repeat(2,1fr); } .pro-cols-3 { grid-template-columns:repeat(3,1fr); } .pro-cols-4 { grid-template-columns:repeat(2,1fr); }
	.pro-gal-3x2 { grid-template-columns:repeat(3,1fr); } .pro-gal-2x2x2 { grid-template-columns:repeat(2,1fr); }
	.pro-gal-1\+5 { grid-template-columns:repeat(5,1fr); } .pro-gal-1\+5 .pro-ph:first-child { grid-column:1/-1; }
	.pro-gal-2\+4 { grid-template-columns:repeat(4,1fr); } .pro-gal-2\+4 .pro-ph:nth-child(-n+2) { grid-column:span 2; }
	.pro-gal-masonry { column-count:3; } .pro-gal-strip .pro-ph { flex-basis:32%; }
	.pro-split { grid-template-columns:1fr 1fr; gap:36px; } .pro-split-l .pro-split-t { order:2; }
	.pro-flow-h { grid-template-columns:1fr; } .pro-gauges { grid-template-columns:repeat(4,1fr); }
	.pro-cmp { grid-template-columns:1fr 1fr; } .pro-zones { grid-template-columns:repeat(2,1fr); }
	.pro-domains { grid-template-columns:repeat(2,1fr); }
	.pro-tl-h { display:grid; grid-template-columns:repeat(4,1fr); border-left:0; border-top:3px solid var(--pa); margin-left:0; padding-top:24px; gap:16px; }
	.pro-tl-h li { padding:0; } .pro-tl-h .pro-tl-n { left:0; top:-40px; }
	.pro-sec { padding:64px 0; } .pro-sec-tight { padding:24px 0; }
}
@media (min-width:900px) {
	.pro-hero h1 { font-size:46px; }
	.pro-hero-in { padding-top:72px; padding-bottom:72px; }
	.pro-hero-split-r .pro-hero-in, .pro-hero-lab .pro-hero-in, .pro-hero-closeup .pro-hero-in { grid-template-columns:1.1fr .9fr; align-items:center; }
	.pro-hero-split-l .pro-hero-in { grid-template-columns:.9fr 1.1fr; align-items:center; } .pro-hero-split-l .pro-hero-t { order:2; }
	.pro-hero-full .pro-hero-in { min-height:520px; } .pro-hero-plant .pro-hero-in { min-height:620px; } .pro-hero-banner .pro-hero-in { min-height:380px; }
	.pro-hero-triptych .pro-hero-in { grid-template-columns:1fr 1fr; align-items:center; }
	.pro-hero-stacked .pro-hero-in { grid-template-columns:1fr; } .pro-hero-stacked .pro-hero-p { max-width:880px; }
	.pro-hero-bg::after { background:linear-gradient(90deg,rgba(10,18,30,.88) 0%,rgba(10,18,30,.55) 45%,rgba(10,18,30,.1) 100%); }
	.pro-flow-h { grid-auto-flow:column; grid-auto-columns:1fr; align-items:stretch; gap:0; } .pro-flow-h .pro-arrow { align-self:center; border:0; border-top:10px solid transparent; border-bottom:10px solid transparent; border-left:14px solid var(--pa); margin:0 6px; width:0; }
	.pro-cols-4 { grid-template-columns:repeat(4,1fr); }
}