/* 관리·운영 전문 상세페이지 17종 — 테마(색) × 히어로 × 스킨(섹션 배치)으로 페이지마다 다른 레이아웃 */
.pro { --pfont: 'Pretendard','Apple SD Gothic Neo',sans-serif; --pink:#1f2a27; --pr:14px; --pline:rgba(0,0,0,.12); background: var(--pbg); color: var(--pink); font-family: var(--pfont); }
.pro .wrap { max-width: 1120px; margin: 0 auto; padding-inline: 20px; }
.pro h1, .pro h2, .pro h3 { font-family: var(--pfont); }
.pro .lead { font-size: 17px; color: #33403c; margin-bottom: 20px; }
.pro .note { font-size: 13px; color: #5a6560; margin-top: 12px; }

/* 테마 색 (pa=진한 주색, pb=포인트, pc=보조, palt=대체 배경) */
.t01 { --pa:#0b3a72; --pb:#1e88e5; --pc:#00a3b8; --pbg:#f3f8fc; --palt:#e3eff9; }
.t02 { --pa:#1b5e3b; --pb:#2e9e5b; --pc:#d98e00; --pbg:#f4faf5; --palt:#e2f1e6; }
.t03 { --pa:#0d5c4d; --pb:#14a38b; --pc:#5b52e0; --pbg:#f2f9f7; --palt:#ddf0ec; --pfont:'Pretendard',ui-monospace,monospace; }
.t04 { --pa:#0e5fa8; --pb:#29b6f6; --pc:#7e57c2; --pbg:#f0f8fd; --palt:#dbeefa; }
.t05 { --pa:#6a2c91; --pb:#ab47bc; --pc:#e67e00; --pbg:#faf5fc; --palt:#f0e3f6; }
.t06 { --pa:#1f5a2e; --pb:#5fa32f; --pc:#2b8fb5; --pbg:#f3f8f0; --palt:#e3efdb; }
.t07 { --pa:#0f6b73; --pb:#1a9aa6; --pc:#6fa32d; --pbg:#f1f8f8; --palt:#dcefef; }
.t08 { --pa:#a12349; --pb:#d9436b; --pc:#3e8e41; --pbg:#fdf4f6; --palt:#f9e1e8; }
.t09 { --pa:#1d5b34; --pb:#43a047; --pc:#8d6e63; --pbg:#f4f7f1; --palt:#e5edde; }
.t10 { --pa:#b04f06; --pb:#e8801a; --pc:#2e7d32; --pbg:#fff8f1; --palt:#fdebd8; }
.t11 { --pa:#11306b; --pb:#2f6bff; --pc:#00a893; --pbg:#f2f5fc; --palt:#e0e8f9; --pfont:'Pretendard',ui-monospace,monospace; }
.t12 { --pa:#28307f; --pb:#4a56e2; --pc:#d06a10; --pbg:#f4f5fb; --palt:#e4e6f7; }
.t13 { --pa:#6b4226; --pb:#a8742f; --pc:#2f8f9a; --pbg:#fbf7f2; --palt:#f1e6d8; }
.t14 { --pa:#0e5aa7; --pb:#1d9bf0; --pc:#1f9a63; --pbg:#f1f7fd; --palt:#dcebf8; }
.t15 { --pa:#124d3a; --pb:#2fa67a; --pc:#c98f00; --pbg:#f2f8f5; --palt:#dcede4; }
.t16 { --pa:#b3261e; --pb:#e5483a; --pc:#b88700; --pbg:#fdf5f3; --palt:#f9e2dd; }
.t17 { --pa:#3b2a8f; --pb:#6a55e0; --pc:#1b9482; --pbg:#f5f3fc; --palt:#e6e1f7; }

/* ---------- 히어로 ---------- */
.ph { background: var(--pa); color: #fff; padding: 92px 0 36px; }
.ph .ph-grid { display: grid; gap: 22px; }
.ph-media { order: -1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pfig { position: relative; margin: 0; overflow: hidden; border-radius: var(--pr); background: var(--palt); }
.pfig img.pimg { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.pfig figcaption { padding: 8px 10px; font-size: 13px; line-height: 1.45; color: #3b4743; background: #fff; }
.ph .eb { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.16); margin-bottom: 14px; }
.ph h1 { font-size: clamp(32px, 8vw, 54px); font-weight: 800; line-height: 1.15; margin-bottom: 14px; }
.ph .ans { font-size: 16px; line-height: 1.7; color: rgba(255,255,255,.94); max-width: 38em; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chips li { font-size: 13px; font-weight: 600; padding: 7px 13px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.32); }

.ph-split { background: linear-gradient(135deg, var(--pa), color-mix(in srgb, var(--pa) 60%, #000)); }
.ph-rsplit { background: linear-gradient(200deg, var(--pa) 55%, var(--pb) 140%); }
.ph-stack { background: radial-gradient(120% 90% at 50% 0%, var(--pb) -30%, var(--pa) 60%); text-align: center; }
.ph-stack .ans { margin-inline: auto; }
.ph-stack .chips { justify-content: center; }
.ph-stack .ph-media { max-width: 560px; margin-inline: auto; }
.ph-dash { background: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 36px), repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 36px), var(--pa); }
.ph-dash .chips li { border-radius: 8px; background: rgba(0,0,0,.28); font-family: ui-monospace, 'Pretendard', monospace; }
.ph-dash .ph-media .pfig { border: 2px solid rgba(255,255,255,.35); }
.ph-band { padding-top: 64px; background: var(--pa); }
.ph-band .ph-grid { gap: 0; }
.ph-band .ph-media { margin-inline: -20px; gap: 0; }
.ph-band .pfig { border-radius: 0; }
.ph-band .ph-text { padding-top: 26px; border-left: 6px solid var(--pb); padding-left: 16px; margin-top: 22px; }

.crumb { font-size: 13px; padding: 12px 0; color: #55605b; border-bottom: 1px solid var(--pline); background: #fff; }
.crumb a { color: var(--pa); font-weight: 600; }

@media (min-width: 900px) {
  .ph { padding: 120px 0 64px; }
  .ph .ans { font-size: 18px; }
  .ph-split .ph-grid, .ph-dash .ph-grid { grid-template-columns: 1.1fr .9fr; align-items: center; gap: 48px; }
  .ph-rsplit .ph-grid { grid-template-columns: .9fr 1.1fr; align-items: center; gap: 48px; }
  .ph-split .ph-media, .ph-dash .ph-media, .ph-rsplit .ph-media { order: 0; }
  .ph-rsplit .ph-media { order: -1; }
  .ph-band { padding-top: 64px; }
  .ph-band .ph-media { margin-inline: calc(50% - 50vw); }
  .ph-band .ph-text { max-width: 1120px; margin-inline: auto; }
}

/* ---------- 공통 섹션 ---------- */
.ps { padding: 44px 0; }
.ps h2 { font-size: clamp(22px, 4.6vw, 30px); font-weight: 800; margin-bottom: 16px; color: var(--pa); }
.ps h3 { font-size: 18px; font-weight: 700; margin: 22px 0 8px; color: var(--pa); }
.ps p { color: #36423e; margin-bottom: 14px; }
.ps-prose p { max-width: 46em; }

.pcards { display: grid; grid-template-columns: 1fr; gap: 14px; }
.pcard { background: #fff; border: 1px solid var(--pline); border-radius: var(--pr); padding: 18px; border-top: 4px solid var(--pb); }
.pcard h3 { margin: 6px 0 6px; font-size: 17px; }
.pcard p { font-size: 15px; margin: 0; }
.pn { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .08em; color: #fff; background: var(--pb); border-radius: 6px; padding: 2px 8px; }
.pcard .pn, .pcase .pn { color: #10201a; background: color-mix(in srgb, var(--pb) 30%, #fff); }

.ptable { margin-block: 8px; }
.ptable table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--pr); overflow: hidden; font-size: 15px; }
.ptable caption { text-align: left; font-weight: 700; padding: 0 0 8px; color: var(--pa); }
.ptable th { background: var(--pa); color: #fff; text-align: left; padding: 12px 14px; font-size: 14px; }
.ptable td { padding: 12px 14px; border-bottom: 1px solid var(--pline); vertical-align: top; }
.ptable tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--palt) 55%, #fff); }
.ptable td:first-child { font-weight: 700; color: var(--pa); }
@media (max-width: 640px) {
  .ptable table, .ptable tbody, .ptable tr, .ptable td { display: block; width: 100%; }
  .ptable thead { display: none; }
  .ptable caption { display: block; width: 100%; }
  .ptable tr { margin-bottom: 12px; border: 1px solid var(--pline); border-radius: var(--pr); overflow: hidden; background: #fff; }
  .ptable td { border: 0; padding: 9px 14px; }
  .ptable td::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 700; color: #5a6560; }
  .ptable td:first-child { background: var(--palt); }
}

.pchart { background: #fff; border: 1px solid var(--pline); border-radius: var(--pr); padding: 14px; margin: 0; }
.pchart figcaption { font-weight: 700; color: var(--pa); margin-bottom: 6px; }
.pchart svg { max-width: 640px; margin-inline: auto; width: 100%; height: auto; display: block; }
.pchart .gl { stroke: rgba(0,0,0,.12); stroke-width: 1; }
.pchart .ax { font-size: 13px; fill: #4d5a55; }
.pchart .lb { font-size: 14px; fill: #26332e; font-weight: 700; }
.pchart .vl { font-size: 13px; fill: #fff; font-weight: 700; }
.pchart .vl2 { font-size: 13px; fill: #26332e; font-weight: 700; }
.pchart rect.s0 { fill: var(--pa); } .pchart rect.s1 { fill: var(--pb); } .pchart rect.s2 { fill: var(--pc); }
.pchart .ln { fill: none; stroke-width: 3; stroke-linejoin: round; }
.pchart .ln.s0, .pchart .dt.s0 { stroke: var(--pa); } .pchart .ln.s1, .pchart .dt.s1 { stroke: var(--pb); } .pchart .ln.s2, .pchart .dt.s2 { stroke: var(--pc); }
.pchart .dt { fill: #fff; stroke-width: 3; }

.pflow { display: grid; gap: 0; counter-reset: f; }
.pflow li { position: relative; background: #fff; border: 2px solid var(--pb); border-radius: var(--pr); padding: 14px 16px; margin-bottom: 26px; display: grid; gap: 4px; }
.pflow li:not(:last-child)::after { content: '↓'; position: absolute; left: 50%; bottom: -26px; width: 26px; text-align: center; transform: translateX(-50%); font-size: 20px; font-weight: 800; color: var(--pb); }
.pflow b { color: var(--pa); font-size: 16px; }
.pflow span { font-size: 14px; color: #44504b; }
@media (min-width: 900px) {
  .pflow { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 26px; }
  .pflow li { margin-bottom: 0; }
  .pflow li:not(:last-child)::after { content: '→'; left: auto; right: -24px; bottom: auto; top: 50%; transform: translateY(-50%); }
}

.psteps { counter-reset: s; display: grid; gap: 12px; }
.psteps li { counter-increment: s; position: relative; background: #fff; border: 1px solid var(--pline); border-radius: var(--pr); padding: 16px 16px 16px 62px; }
.psteps li::before { content: counter(s); position: absolute; left: 14px; top: 14px; width: 34px; height: 34px; border-radius: 50%; background: var(--pb); color: #10201a; font-weight: 800; display: grid; place-items: center; }
.psteps h3 { margin: 0 0 4px; font-size: 16px; } .psteps p { margin: 0; font-size: 15px; }

.pchecks { display: grid; gap: 14px; }
.pcheck { background: #fff; border: 1px solid var(--pline); border-radius: var(--pr); padding: 16px 18px; }
.pcheck h3 { margin: 0 0 8px; font-size: 16px; }
.pcheck li { position: relative; padding: 6px 0 6px 30px; font-size: 15px; border-bottom: 1px dashed var(--pline); }
.pcheck li:last-child { border-bottom: 0; }
.pcheck li::before { content: ''; position: absolute; left: 2px; top: 9px; width: 17px; height: 17px; border: 2px solid var(--pb); border-radius: 4px; }
.pcheck li::after { content: ''; position: absolute; left: 7px; top: 12px; width: 5px; height: 9px; border: solid var(--pa); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }

.pcmp { display: grid; gap: 14px; }
.pcmp-col { border-radius: var(--pr); padding: 16px 18px; background: #fff; border: 1px solid var(--pline); }
.pcmp-col:first-child { border-top: 5px solid var(--pb); } .pcmp-col:nth-child(2) { border-top: 5px solid var(--pc); } .pcmp-col:nth-child(3) { border-top: 5px solid var(--pa); }
.pcmp-col h3 { margin: 0 0 8px; }
.pcmp-col li { padding: 5px 0 5px 16px; position: relative; font-size: 15px; }
.pcmp-col li::before { content: ''; position: absolute; left: 0; top: 14px; width: 7px; height: 7px; border-radius: 50%; background: var(--pb); }

.pphotos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pphotos.n1 { grid-template-columns: 1fr; max-width: 520px; }
.pcases { display: grid; gap: 16px; }
.pcase { display: grid; gap: 12px; background: #fff; border: 1px solid var(--pline); border-radius: var(--pr); padding: 12px; }
.pcase h3 { margin: 8px 0 4px; font-size: 17px; } .pcase p { margin: 0; font-size: 15px; }

.pops { background: #fff; border: 1px solid var(--pline); border-radius: var(--pr); padding: 20px; }
.pops h3 { margin-top: 18px; }
.pops-sites { display: grid; gap: 8px; }
.pops-sites a { display: block; padding: 11px 14px; border-radius: 10px; background: var(--palt); }
.pops-sites b { display: block; color: var(--pa); } .pops-sites span { font-size: 13px; color: #44504b; }
.pops address { margin-top: 18px; font-style: normal; font-size: 14px; color: #44504b; padding-top: 14px; border-top: 1px solid var(--pline); }
.pops a, .prel a { text-decoration: underline; text-underline-offset: 3px; }
.pops-sites a { text-decoration: none; }
.prel { display: grid; gap: 8px; }
.prel li a { display: block; padding: 13px 16px; background: #fff; border: 1px solid var(--pline); border-radius: 10px; font-weight: 700; color: var(--pa); text-decoration: none; min-height: 46px; }
.prel li a span { display: block; font-weight: 400; font-size: 13px; color: #55605b; margin-top: 2px; }

.pfaq .faq-item { background: #fff; border: 1px solid var(--pline); border-radius: 10px; margin-bottom: 10px; padding-inline: 16px; }
.pfaq .faq-q h3 { color: var(--pa); margin: 0; font-size: 16px; }

.ps-cta { padding-bottom: 56px; }
.pcta { display: grid; gap: 18px; align-items: center; padding: 26px 22px; border-radius: 20px; background: var(--pa); color: #fff; }
.pcta h2, .pcta p { color: #fff; margin-bottom: 6px; }
.pcta .btn { min-height: 48px; }
.pcta .btn-outline { color: #fff; }
@media (min-width: 900px) {
  .pcards { grid-template-columns: repeat(3, 1fr); } .pcards:has(.pcard:nth-child(4):last-child), .pcards:has(.pcard:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
  .pchecks, .pcmp { grid-template-columns: repeat(2, 1fr); } .pcmp:has(.pcmp-col:nth-child(3)), .pchecks:has(.pcheck:nth-child(3)) { grid-template-columns: repeat(3, 1fr); }
  .pphotos.n2 { grid-template-columns: repeat(2, 1fr); max-width: 760px; } .pphotos.n3 { grid-template-columns: repeat(3, 1fr); } .pphotos.n4 { grid-template-columns: repeat(4, 1fr); }
  .pcases { grid-template-columns: repeat(2, 1fr); } .pcase { grid-template-columns: 180px 1fr; align-items: center; }
  .pops-sites { grid-template-columns: repeat(2, 1fr); }
  .prel { grid-template-columns: repeat(2, 1fr); }
  .pcta { grid-template-columns: 1fr auto; padding: 36px 40px; }
  .psteps { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 스킨 (섹션 배치) ---------- */
/* band: 전폭 띠 배경이 번갈아 */
.sk-band .ps:nth-of-type(even) { background: var(--palt); }
/* card: 섹션 자체가 흰 카드 */
.sk-card article { padding: 18px 0 30px; background: var(--palt); }
.sk-card .ps { padding: 14px 0; }
.sk-card .ps > .wrap { background: var(--pbg); border-radius: 22px; padding: 26px 20px; box-shadow: 0 6px 24px rgba(0,0,0,.07); }
.sk-card .ps-cta > .wrap { background: transparent; box-shadow: none; padding: 0 20px; }
/* doc: 좁은 단 + 명조 + 번호 매긴 매뉴얼 */
.sk-doc { --pfont: 'Pretendard', sans-serif; }
.sk-doc article { counter-reset: d; max-width: 820px; margin: 0 auto; padding: 14px 20px 10px; }
.sk-doc .ps > .wrap { padding-inline: 0; }
.sk-doc .ps h2 { font-family: 'Noto Serif KR','Nanum Myeongjo','Batang',serif; counter-increment: d; border-bottom: 2px solid var(--pa); padding-bottom: 8px; }
.sk-doc .ps h2::before { content: counter(d, decimal-leading-zero) '. '; color: var(--pb); }
.sk-doc .ps p, .sk-doc .lead { font-family: 'Noto Serif KR','Nanum Myeongjo','Batang',serif; line-height: 1.85; }
/* dash: 대시보드 패널 */
.sk-dash { background: repeating-linear-gradient(0deg, rgba(0,0,0,.035) 0 1px, transparent 1px 32px), var(--pbg); }
.sk-dash .ps h2 { display: flex; align-items: center; gap: 10px; font-size: clamp(20px, 4vw, 26px); }
.sk-dash .ps h2::before { content: ''; width: 8px; height: 26px; background: var(--pb); border-radius: 3px; }
.sk-dash .pcard, .sk-dash .pcheck, .sk-dash .pchart, .sk-dash .pcmp-col, .sk-dash .ptable table { border-radius: 6px; box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 8px 18px -10px rgba(0,0,0,.25); }
.sk-dash .pn, .sk-dash .ptable th { font-family: ui-monospace, 'Pretendard', monospace; }
/* rail: 데스크톱에서 좌측에 고정 제목 */
@media (min-width: 900px) {
  .sk-rail .ps > .wrap { display: grid; grid-template-columns: 230px 1fr; column-gap: 40px; }
  .sk-rail .ps h2 { grid-column: 1; grid-row: 1 / span 30; position: sticky; top: 84px; align-self: start; border-left: 5px solid var(--pb); padding-left: 12px; }
  .sk-rail .ps > .wrap > :not(h2) { grid-column: 2; }
  .sk-rail .ps-cta > .wrap, .sk-rail .ps-related > .wrap { display: block; }
}
.sk-rail .ps { border-bottom: 1px solid var(--pline); }
.pcta h2 { border: 0 !important; display: block !important; counter-increment: none !important; }
.pcta h2::before { content: none !important; }