/* 서비스 상세 20종 전용 스타일. 팔레트(body[data-theme="svc-NN"])는 파일 하단. */
body.theme-svc-page, body[data-theme^="svc-"]{--radius:4px; --bw:1.5px; --panel:#fff; --line:rgba(0,0,0,.14); --soft:rgba(0,0,0,.045)}
html, body{max-width:100%}
.svc, .svc-hero, .svc-related, .svc-faq{word-break:keep-all; overflow-wrap:anywhere}
.svc-hero{padding:48px 0 36px}
.svc-hero h1{font-size:clamp(1.6rem, 6vw, 3.1rem); overflow-wrap:anywhere; word-break:keep-all; margin-bottom:.6em}
.svc-answer{font-size:1.08rem; max-width:780px; line-height:1.75; margin-bottom:1.4em}
.svc .wrap{padding-top:0}
.svc-sec{margin:0 0 1.2em}
.svc h2{margin-top:1.8em; font-size:clamp(1.3rem,3.6vw,1.9rem)}
.svc h2::after{content:""; display:block; width:40px; height:4px; background:var(--accent); margin-top:.5em}
.svc h3{font-size:1.08rem; margin:0 0 .5em}
.svc p{margin:0 0 1em}
.svc-lead{color:#4a5560; font-size:.98rem; margin-bottom:1em}
.svc-prose p{max-width:820px}

/* ---- 진단 블록 ---- */
.diag-report{margin:0; border:var(--bw) solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--panel)}
.diag-report>div{display:grid; grid-template-columns:minmax(120px,220px) 1fr; border-bottom:1px solid var(--line)}
.diag-report>div:last-child{border-bottom:0}
.diag-report dt{padding:12px 14px; font-weight:800; background:color-mix(in srgb, var(--accent) 12%, #fff); border-right:1px solid var(--line)}
.diag-report dd{margin:0; padding:12px 14px}
.diag-cards{display:grid; grid-template-columns:1fr; gap:12px; margin:0; padding:0}
.diag-cards li{background:var(--panel); border:var(--bw) solid var(--line); border-top:5px solid var(--accent); border-radius:var(--radius); padding:14px 16px; display:flex; flex-direction:column; gap:4px}
.diag-cards strong{color:var(--accent)}
.diag-cards span{font-size:.93rem; color:#3d4852}
.diag-check{display:grid; gap:10px; margin:0; padding:0}
.diag-check li{position:relative; background:var(--panel); border:var(--bw) solid var(--line); border-radius:var(--radius); padding:12px 14px 12px 50px}
.diag-check li::before{content:"✓"; position:absolute; left:12px; top:12px; width:26px; height:26px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:.9rem}
.diag-check strong{display:block}
.diag-check span{font-size:.93rem; color:#3d4852}
.diag-alert{counter-reset:al; display:grid; gap:10px; margin:0; padding:0}
.diag-alert li{counter-increment:al; position:relative; background:color-mix(in srgb, var(--accent) 8%, #fff); border-left:6px solid var(--accent); border-radius:var(--radius); padding:12px 14px 12px 54px}
.diag-alert li::before{content:counter(al); position:absolute; left:14px; top:11px; width:28px; height:28px; border-radius:var(--radius); background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:900}
.diag-alert strong{display:block}
.diag-alert span{font-size:.93rem; color:#3d4852}
@media (min-width:700px){
  .diag-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1000px){
  .diag-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:560px){
  .diag-report>div{grid-template-columns:1fr}
  .diag-report dt{border-right:0; border-bottom:1px solid var(--line)}
}

/* ---- 현장사진: 4장 동일 크기(4:3), 원본 비율 유지(object-fit) ---- */
.ph-case{margin:0 0 1.2em}
.ph-case-h{display:inline-block; margin:0 0 .6em; padding:4px 12px; background:var(--accent); color:#fff; border-radius:var(--radius); font-size:.9rem}
.ph-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.ph-grid figure{margin:0; background:var(--panel); border:var(--bw) solid var(--line); border-radius:var(--radius); overflow:hidden; min-width:0}
.site-photo{display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; background:#dde3e7}
.ph-grid figcaption{font-size:.82rem; line-height:1.5; padding:8px 10px; color:#3d4852}
.ph-note{font-size:.9rem; color:#4a5560; border-left:4px solid var(--accent); padding:8px 12px; background:var(--soft); border-radius:0 var(--radius) var(--radius) 0}
@media (min-width:760px){
  .ph-row .ph-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ph-grid2 .ph-grid, .ph-grid .ph-grid{gap:14px}
}
.ph-grid2 .ph-grid figcaption{font-size:.9rem; padding:10px 12px}
.ph-list .ph-grid{grid-template-columns:1fr; gap:12px}
.ph-list .ph-grid figure{display:grid; grid-template-columns:44% 1fr; align-items:center}
.ph-list .ph-grid figcaption{padding:10px 14px; font-size:.9rem}
@media (min-width:900px){
  .ph-list .ph-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:420px){
  .ph-list .ph-grid figure{grid-template-columns:1fr}
}

/* ---- 표 ---- */
.svc .table-scroll{background:var(--panel); border-radius:var(--radius)}
.svc .table-scroll table{width:100%; border-collapse:collapse; font-size:.93rem; min-width:0}
.svc caption{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.svc .table-scroll th{background:color-mix(in srgb, var(--accent) 14%, #fff); color:var(--fg)}
.svc .table-scroll td:first-child{font-weight:800}
@media (max-width:600px){
  .svc .table-scroll{border:0; background:transparent}
  .svc .table-scroll thead{display:none}
  .svc .table-scroll tr{display:block; background:var(--panel); border:var(--bw) solid var(--line); border-left:5px solid var(--accent); border-radius:var(--radius); margin-bottom:10px; padding:6px 0}
  .svc .table-scroll td{display:block; border:0; padding:5px 14px}
  .svc .table-scroll td::before{content:attr(data-label); display:block; font-size:.75rem; font-weight:800; color:var(--accent); margin-bottom:1px}
}

/* ---- 도식·공정 ---- */
.v-timeline{position:relative; margin:0; padding:0; counter-reset:vt}
.v-timeline::before{content:""; position:absolute; left:15px; top:6px; bottom:6px; width:2px; background:var(--line)}
.v-timeline li{position:relative; counter-increment:vt; padding:0 0 18px 46px; display:flex; flex-direction:column}
.v-timeline li::before{content:counter(vt); position:absolute; left:0; top:0; width:32px; height:32px; border-radius:var(--radius); background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.85rem}
.v-timeline b, .v-steps b, .v-factors b, .v-layer b, .v-node b{display:block}
.v-timeline span, .v-steps span, .v-factors span, .v-layer span, .v-node span{font-size:.92rem; color:#3d4852}

.v-steps{display:grid; grid-template-columns:1fr; gap:10px; margin:0; padding:0; counter-reset:vs}
.v-steps li{counter-increment:vs; position:relative; background:var(--panel); border:var(--bw) solid var(--line); border-top:4px solid var(--accent); border-radius:var(--radius); padding:12px 14px 12px 14px}
.v-steps li::before{content:"STEP " counter(vs); display:block; font-size:.72rem; font-weight:800; letter-spacing:.06em; color:var(--accent); margin-bottom:2px}
@media (min-width:700px){.v-steps{grid-template-columns:repeat(3,minmax(0,1fr))}}

.v-flow{display:flex; flex-direction:column; align-items:stretch; gap:0}
.v-node{position:relative; background:var(--panel); border:var(--bw) solid var(--line); border-left:6px solid var(--accent); border-radius:var(--radius); padding:12px 14px; margin-bottom:26px}
.v-node:last-child{margin-bottom:0}
.v-node:not(:last-child)::after{content:"↓"; position:absolute; left:50%; bottom:-24px; transform:translateX(-50%); font-size:1.3rem; font-weight:900; color:var(--accent); line-height:1}
@media (min-width:1000px){
  .v-flow{flex-direction:row; gap:30px}
  .v-node{flex:1 1 0; margin-bottom:0; border-left:var(--bw) solid var(--line); border-top:6px solid var(--accent)}
  .v-node:not(:last-child)::after{content:"→"; left:auto; right:-24px; bottom:auto; top:50%; transform:translateY(-50%)}
}

.v-layers{display:flex; flex-direction:column; gap:0; border:var(--bw) solid var(--line); border-radius:var(--radius); overflow:hidden}
.v-layer{padding:14px 16px; border-bottom:1px solid var(--line)}
.v-layer:last-child{border-bottom:0}
.v-layer:nth-child(1){background:color-mix(in srgb, var(--accent) 26%, #fff)}
.v-layer:nth-child(2){background:color-mix(in srgb, var(--accent) 17%, #fff)}
.v-layer:nth-child(3){background:color-mix(in srgb, var(--accent) 10%, #fff)}
.v-layer:nth-child(4){background:color-mix(in srgb, var(--accent) 5%, #fff)}
.v-layer b::before{content:"▤ "; color:var(--accent)}

.v-compare{display:grid; grid-template-columns:1fr; gap:14px}
.v-col{background:var(--panel); border:var(--bw) solid var(--line); border-top:5px solid var(--accent); border-radius:var(--radius); padding:14px 16px}
.v-col:nth-child(2){border-top-color:var(--fg)}
.v-col ul{margin:0; padding:0}
.v-col li{position:relative; padding:5px 0 5px 20px; font-size:.94rem}
.v-col li::before{content:""; position:absolute; left:2px; top:.95em; width:8px; height:8px; background:var(--accent); border-radius:1px}
@media (min-width:760px){.v-compare{grid-template-columns:repeat(2,minmax(0,1fr))}}

.v-factors{display:grid; grid-template-columns:1fr; gap:10px; margin:0; padding:0; counter-reset:vf}
.v-factors li{counter-increment:vf; position:relative; background:var(--panel); border:var(--bw) solid var(--line); border-radius:var(--radius); padding:12px 14px 12px 58px}
.v-factors li::before{content:counter(vf, decimal-leading-zero); position:absolute; left:12px; top:10px; font-size:1.4rem; font-weight:900; color:var(--accent); line-height:1.2}
@media (min-width:760px){.v-factors{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- 안내 박스 ---- */
.svc-note{margin:1.6em 0 0; padding:14px 16px; background:color-mix(in srgb, var(--accent) 9%, #fff); border:var(--bw) solid color-mix(in srgb, var(--accent) 45%, #fff); border-radius:var(--radius)}
.svc-note strong{display:block; color:var(--accent); margin-bottom:2px}
.svc-note p{margin:0; font-size:.95rem}

/* ---- 관련페이지 / FAQ ---- */
.svc-related, .svc-faq{padding-top:1.2em}
.svc-related h2, .svc-faq h2{margin-top:1.2em}
.svc-related-list{display:grid; grid-template-columns:1fr; gap:12px; margin:1em 0 0; padding:0}
.svc-related-list a{display:block; background:var(--panel); border:var(--bw) solid var(--line); border-top:5px solid var(--accent); border-radius:var(--radius); padding:14px 16px; text-decoration:none; color:var(--fg); height:100%}
.svc-related-list strong{display:block; color:var(--accent); margin-bottom:2px}
.svc-related-list span{font-size:.9rem; color:#4a5560}
@media (min-width:640px){.svc-related-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:960px){.svc-related-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
.svc-related-all{margin:1em 0 0; font-size:.92rem}
.svc-related-all a{color:var(--accent); font-weight:800}
.svc-faq-item{background:var(--panel); border:var(--bw) solid var(--line); border-left:6px solid var(--accent); border-radius:var(--radius); padding:14px 16px; margin:0 0 12px}
.svc-faq-item h3{margin:0 0 .4em; font-size:1.05rem}
.svc-faq-item p{margin:0; font-size:.96rem; color:#2f3a44}
section.cta .btn{max-width:100%}
@media (max-width:480px){
  .svc-hero{padding:34px 0 26px}
  .cta-buttons .btn{flex:1 1 100%}
}

/* ---- 페이지별 팔레트 ---- */
body[data-theme="svc-01"]{--bg:#E4E7E9; --fg:#14181B; --accent:#1B4965; --radius:4px; --bw:1.5px}
body[data-theme="svc-01"] .svc h1, body[data-theme="svc-01"] .svc h2, body[data-theme="svc-01"] .svc-hero h1{font-weight:800}
body[data-theme="svc-02"]{--bg:#DCE6EA; --fg:#0D1F29; --accent:#146C94; --radius:2px; --bw:1.5px}
body[data-theme="svc-02"] .svc h1, body[data-theme="svc-02"] .svc h2, body[data-theme="svc-02"] .svc-hero h1{font-weight:900}
body[data-theme="svc-03"]{--bg:#DEE2E5; --fg:#171B1E; --accent:#37474F; --radius:0px; --bw:2px}
body[data-theme="svc-03"] .svc h1, body[data-theme="svc-03"] .svc h2, body[data-theme="svc-03"] .svc-hero h1{font-weight:800}
body[data-theme="svc-04"]{--bg:#DCEAE7; --fg:#10201E; --accent:#0F766E; --radius:8px; --bw:1.5px}
body[data-theme="svc-04"] .svc h1, body[data-theme="svc-04"] .svc h2, body[data-theme="svc-04"] .svc-hero h1{font-weight:800}
body[data-theme="svc-05"]{--bg:#E6E9DC; --fg:#1B2010; --accent:#4A5D23; --radius:4px; --bw:1.5px}
body[data-theme="svc-05"] .svc h1, body[data-theme="svc-05"] .svc h2, body[data-theme="svc-05"] .svc-hero h1{font-weight:900}
body[data-theme="svc-06"]{--bg:#EFE3D6; --fg:#201810; --accent:#A64B2A; --radius:6px; --bw:1.5px}
body[data-theme="svc-06"] .svc h1, body[data-theme="svc-06"] .svc h2, body[data-theme="svc-06"] .svc-hero h1{font-weight:800}
body[data-theme="svc-07"]{--bg:#F0E3D5; --fg:#231609; --accent:#B8460E; --radius:2px; --bw:2px}
body[data-theme="svc-07"] .svc h1, body[data-theme="svc-07"] .svc h2, body[data-theme="svc-07"] .svc-hero h1{font-weight:900}
body[data-theme="svc-08"]{--bg:#E7E1EE; --fg:#1D1626; --accent:#6B4E9E; --radius:10px; --bw:1.5px}
body[data-theme="svc-08"] .svc h1, body[data-theme="svc-08"] .svc h2, body[data-theme="svc-08"] .svc-hero h1{font-weight:800}
body[data-theme="svc-09"]{--bg:#EFDFE0; --fg:#261012; --accent:#8B1E2D; --radius:0px; --bw:2px}
body[data-theme="svc-09"] .svc h1, body[data-theme="svc-09"] .svc h2, body[data-theme="svc-09"] .svc-hero h1{font-weight:900}
body[data-theme="svc-10"]{--bg:#EEE6D2; --fg:#231C0A; --accent:#7A5C1E; --radius:4px; --bw:1.5px}
body[data-theme="svc-10"] .svc h1, body[data-theme="svc-10"] .svc h2, body[data-theme="svc-10"] .svc-hero h1{font-weight:800}
body[data-theme="svc-11"]{--bg:#DCE6DE; --fg:#16211B; --accent:#2F6B4F; --radius:6px; --bw:1.5px}
body[data-theme="svc-11"] .svc h1, body[data-theme="svc-11"] .svc h2, body[data-theme="svc-11"] .svc-hero h1{font-weight:900}
body[data-theme="svc-12"]{--bg:#DDE8F0; --fg:#0F1E29; --accent:#1D5F8A; --radius:8px; --bw:1.5px}
body[data-theme="svc-12"] .svc h1, body[data-theme="svc-12"] .svc h2, body[data-theme="svc-12"] .svc-hero h1{font-weight:800}
body[data-theme="svc-13"]{--bg:#E4E4E6; --fg:#18191C; --accent:#4A5058; --radius:0px; --bw:2px}
body[data-theme="svc-13"] .svc h1, body[data-theme="svc-13"] .svc h2, body[data-theme="svc-13"] .svc-hero h1{font-weight:800}
body[data-theme="svc-14"]{--bg:#DDE3E0; --fg:#171E1B; --accent:#2C5875; --radius:4px; --bw:1.5px}
body[data-theme="svc-14"] .svc h1, body[data-theme="svc-14"] .svc h2, body[data-theme="svc-14"] .svc-hero h1{font-weight:900}
body[data-theme="svc-15"]{--bg:#D9EBEE; --fg:#0B2024; --accent:#0B7285; --radius:10px; --bw:1.5px}
body[data-theme="svc-15"] .svc h1, body[data-theme="svc-15"] .svc h2, body[data-theme="svc-15"] .svc-hero h1{font-weight:800}
body[data-theme="svc-16"]{--bg:#EBDDE6; --fg:#26121F; --accent:#7A3E65; --radius:6px; --bw:1.5px}
body[data-theme="svc-16"] .svc h1, body[data-theme="svc-16"] .svc h2, body[data-theme="svc-16"] .svc-hero h1{font-weight:800}
body[data-theme="svc-17"]{--bg:#F2E2DF; --fg:#2A100C; --accent:#B03426; --radius:2px; --bw:2px}
body[data-theme="svc-17"] .svc h1, body[data-theme="svc-17"] .svc h2, body[data-theme="svc-17"] .svc-hero h1{font-weight:900}
body[data-theme="svc-18"]{--bg:#E0E3EF; --fg:#14182B; --accent:#3B4A7A; --radius:4px; --bw:1.5px}
body[data-theme="svc-18"] .svc h1, body[data-theme="svc-18"] .svc h2, body[data-theme="svc-18"] .svc-hero h1{font-weight:800}
body[data-theme="svc-19"]{--bg:#EAE6D8; --fg:#211E12; --accent:#6B5B3E; --radius:6px; --bw:1.5px}
body[data-theme="svc-19"] .svc h1, body[data-theme="svc-19"] .svc h2, body[data-theme="svc-19"] .svc-hero h1{font-weight:900}
body[data-theme="svc-20"]{--bg:#DEE5EC; --fg:#0F1B26; --accent:#234E70; --radius:4px; --bw:1.5px}
body[data-theme="svc-20"] .svc h1, body[data-theme="svc-20"] .svc h2, body[data-theme="svc-20"] .svc-hero h1{font-weight:800}