/* 서비스 상세 20페이지 — 5개 계열(A~E). 헤더·푸터는 사이트 공통(style.css) 사용. */
.svc{--p:#294D40;--a:#AF4B2D;--bg:#F5F7F5;background:var(--bg);color:#222;font-size:1rem;line-height:1.8;overflow-wrap:anywhere;word-break:keep-all}
.svc-a{--p:#294D40;--a:#AF4B2D;--bg:#F5F7F5}
.svc-b{--p:#49394F;--a:#7E4C63;--bg:#F7F5F8}
.svc-c{--p:#653C32;--a:#9C4832;--bg:#FBF6F4}
.svc-d{--p:#303B3B;--a:#466B60;--bg:#F4F7F7}
.svc-e{--p:#574B24;--a:#725D1A;--bg:#F8F8F2}
.svc *{box-sizing:border-box}
.svc section{padding:0}
.svc img{max-width:100%;height:auto;display:block}
.svc .container{width:100%;max-width:1040px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.svc-hero{background:var(--p);color:#fff;padding:clamp(36px,7vw,84px) 0}
.svc-hero-in{display:grid;gap:28px;grid-template-columns:minmax(0,1fr)}
.svc-hero h1{margin:.4em 0 .5em;font-size:clamp(1.8rem,5vw,3.4rem);line-height:1.22;font-weight:800;color:#fff}
.svc-badge{display:inline-block;font-size:.85rem;font-weight:700;letter-spacing:.02em;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.16)}
.svc-answer{font-size:clamp(1rem,2.2vw,1.15rem);max-width:46em;color:#fff;margin:0 0 22px}
.svc-tel{display:inline-flex;align-items:center;min-height:48px;padding:12px 22px;border-radius:12px;background:#fff;color:var(--p);font-weight:800;text-decoration:none}
.svc-tel:focus-visible,.svc-related a:focus-visible{outline:3px solid var(--a);outline-offset:3px}
.svc-hero-img{width:100%;max-width:320px;aspect-ratio:3/4;object-fit:cover;border-radius:18px;justify-self:center}
.svc-body{padding-block:clamp(28px,5vw,56px)}
.svc h2{margin:0 0 14px;font-size:clamp(1.3rem,3vw,1.7rem);line-height:1.35;color:var(--p)}
.svc h3{margin:0 0 8px;font-size:1.05rem;color:var(--p)}
.svc p{margin:0 0 14px}
.svc-sec{margin:0 0 clamp(32px,5vw,52px)}
.svc-note{font-size:.88rem;color:#666}
/* 사진 */
.svc-cases{margin:0 0 clamp(32px,5vw,52px)}
.svc-cases-grid{display:grid;gap:28px;grid-template-columns:repeat(2,minmax(0,1fr))}
.svc-set{margin:0;padding:18px;background:#fff;border-radius:18px;box-shadow:0 4px 16px rgba(0,0,0,.06)}
.svc-tag{font-size:.82rem;font-weight:700;margin:0 0 12px!important;color:var(--a)}
.svc-tag.ref{color:#666;font-weight:500}
.svc-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.svc-ph{position:relative;aspect-ratio:3/4;border-radius:12px;overflow:hidden;background:#e9e9e9}
.svc-ph img{width:100%;height:100%;object-fit:cover}
.svc-lab{position:absolute;left:8px;top:8px;padding:2px 10px;border-radius:999px;background:rgba(0,0,0,.65);color:#fff;font-size:.8rem;font-weight:700}
.svc-lab.after{background:var(--a)}
/* 표 */
.svc-table-wrap{overflow-x:auto}
.svc-table{width:100%;border-collapse:collapse;background:#fff;border-radius:14px;overflow:hidden}
.svc-table th,.svc-table td{padding:12px 14px;border-bottom:1px solid #e6e6e6;text-align:left;font-size:.94rem;vertical-align:top}
.svc-table thead th{background:var(--p);color:#fff}
.svc-table tbody th{background:color-mix(in srgb,var(--p) 8%,white);color:var(--p);font-weight:700}
/* 흐름 도식 */
.svc-flow{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));counter-reset:s}
.svc-flow li{position:relative;padding:16px;background:#fff;border-radius:14px;border-top:4px solid var(--a);display:flex;flex-direction:column;gap:6px;font-size:.92rem}
.svc-flow .n{width:28px;height:28px;border-radius:50%;background:var(--a);color:#fff;font-weight:800;font-size:.85rem;display:inline-flex;align-items:center;justify-content:center}
.svc-flow strong{color:var(--p)}
/* 체크리스트 */
.svc-check{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
.svc-check li{position:relative;padding:12px 14px 12px 40px;background:#fff;border-radius:12px;font-size:.94rem}
.svc-check li::before{content:"✓";position:absolute;left:14px;top:12px;color:var(--a);font-weight:800}
/* 관련 링크 */
.svc-related{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr))}
.svc-related a{display:flex;flex-direction:column;gap:4px;padding:16px;background:#fff;border-radius:14px;text-decoration:none;color:inherit;border:1px solid #e6e6e6}
.svc-related strong{color:var(--p)}
.svc-related span{font-size:.85rem;color:#666}
.svc-related a:hover{border-color:var(--a)}
/* FAQ (기본 펼침 텍스트형) */
.svc-faq h3{margin-top:22px;padding-top:18px;border-top:1px solid #e0e0e0}
.svc-faq h3:first-of-type{border-top:0;padding-top:0}
/* 계열별 변주 */
.svc-a .svc-hero-in{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:center}
.svc-a .svc-hero{border-bottom:6px solid var(--a)}
.svc-b .svc-hero{background:linear-gradient(135deg,var(--p),var(--a));text-align:center}
.svc-b .svc-answer{margin-inline:auto}
.svc-b .svc-set,.svc-b .svc-flow li{border-radius:26px}
.svc-c .svc-hero{background:var(--bg);color:var(--p);border-bottom:2px solid var(--p)}
.svc-c .svc-hero h1,.svc-c h2{font-family:'Noto Serif KR',serif;color:var(--p)}
.svc-c .svc-hero h1{color:var(--p);font-size:clamp(2rem,6vw,4rem)}
.svc-c .svc-answer{color:#3b2a25}
.svc-c .svc-badge{background:var(--a);color:#fff}
.svc-c .svc-tel{background:var(--p);color:#fff}
.svc-d .svc-hero{background:var(--p)}
.svc-d .svc-hero-in>div{border-left:6px solid #9fd0c2;padding-left:clamp(14px,3vw,28px)}
.svc-d .svc-sec{border-left:4px solid var(--a);padding-left:clamp(12px,2vw,22px)}
.svc-d .svc-table thead th{background:var(--a)}
.svc-e .svc-hero{background:var(--p);padding-block:clamp(48px,9vw,110px)}
.svc-e .svc-hero h1,.svc-e h2{font-family:'Noto Serif KR',serif}
.svc-e .svc-sec h2{display:inline-block;padding-bottom:4px;border-bottom:3px solid var(--a)}
.svc-e .svc-flow li{border-top:0;border-left:4px solid var(--a)}
@media(max-width:860px){
  .svc-a .svc-hero-in{grid-template-columns:minmax(0,1fr)}
  .svc-related{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .svc-cases-grid,.svc-check,.svc-related{grid-template-columns:minmax(0,1fr)}
  .svc-set{padding:14px}
  .svc-table thead{position:absolute;left:-9999px}
  .svc-table,.svc-table tbody,.svc-table tr,.svc-table th,.svc-table td{display:block;width:100%}
  .svc-table tr{margin-bottom:12px;border-radius:12px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.06)}
  .svc-table td::before{content:attr(data-l) " · ";font-weight:700;color:var(--p)}
  .svc-table th,.svc-table td{border-bottom:1px solid #eee}
}
@media(max-width:359px){.svc-pair{grid-template-columns:minmax(0,1fr)}}