/* ── 내부 쪽 v9(2026-10-26): 목업 04 구성, 색은 지금 분홍 테마 그대로 ──
   s24-theme-v7.css 뒤에 붙인다. 범위: <main class="s24-v9 v9-<종류>">(transform.py가 붙임). 토큰: --pink --rose --wine --blush --petal --ink --slate */

.s24-v9 :is(a,button,summary,input):focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.s24-v9 .section__subtitle{display:none}

/* 버튼: 전화는 s24-callbtn(머리 띠와 같은 모양), 사진 상담은 같은 크기의 노란 알약 */
.s24-v9 .v9-cta{display:flex!important;flex-wrap:wrap;gap:12px;align-items:center;margin-top:18px}
.s24-v9 .v9-kakao{display:inline-flex;align-items:center;gap:12px;min-height:60px;padding:6px 26px 6px 8px;border-radius:999px;background:#FEE500;color:#191919!important;border:2px solid rgba(255,255,255,.95);box-shadow:0 6px 18px rgba(90,10,40,.22);font-size:1.12rem;font-weight:900;letter-spacing:-.02em;text-decoration:none!important;transition:transform .15s ease}
.s24-v9 .v9-kakao__ico{flex:none;width:46px;height:46px;border-radius:50%;background:#fff url("https://sewer24.com/_static/icons3d/ico-chat-96.webp") center/38px no-repeat}
.s24-v9 .v9-kakao:hover{transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.s24-v9 .v9-kakao{transition:none}.s24-v9 .v9-kakao:hover{transform:none}}

/* 1) 히어로(지역·서비스): 제목 + 버튼 왼쪽, 서비스 3D 그림 오른쪽 */
.s24-v9 .v9-hero--split .hero__container{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:32px;align-items:center;max-width:1168px;margin:0 auto;padding-left:16px;padding-right:16px}
.s24-v9 .v9-hero--split .hero__content{margin:0!important;max-width:none!important}
.s24-v9 .v9-hero-fig{margin:0!important;justify-self:end;width:100%;max-width:340px;float:none!important}
.s24-v9 .v9-hero-fig img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:24px;box-shadow:0 18px 40px rgba(60,6,30,.25)}
.s24-v9 .v9-hero .hero__cta{justify-content:flex-start}
.s24-v9 .s24-hero-split .hero__cta{margin-top:20px}
/* 지역 쪽: 본문에서 서비스 그림을 뺐으니 대표 썸네일은 계속 숨김(운영 규칙과 같게) */
.s24-v9:has(.v9-hero-fig) .page-content .single__thumbnail{display:none!important}

/* 옆 상자: 전화·카톡도 같은 모양(폭에 맞춤) */
.s24-v9 .s24-side__card .s24-callbtn,.s24-v9 .s24-side__card .v9-kakao{width:100%;margin-top:10px;justify-content:flex-start}
.s24-v9 .s24-side__card .s24-callbtn__verb{font-size:1.1rem!important}
.s24-v9 .s24-side__card .v9-kakao{font-size:1rem;min-height:56px}

/* 2) 증상 사진 카드 */
.s24-v9 .page-content ul.v9-symgrid,.s24-v9 ul.v9-symgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:14px 0 28px!important;padding:0!important;list-style:none!important}
.s24-v9 .v9-symgrid li{margin:0!important;padding:0!important}
.s24-v9 .v9-symgrid li::before{display:none!important}
.s24-v9 .v9-sym{display:flex;flex-direction:column;height:100%;background:#fff;border:1.5px solid var(--petal);border-radius:18px;overflow:hidden;text-decoration:none!important;transition:transform .15s ease}
.s24-v9 .v9-sym:hover{transform:translateY(-3px);border-color:var(--pink)}
.s24-v9 .v9-sym__img{display:block;aspect-ratio:1/1;background:var(--blush)}
.s24-v9 .v9-sym__img img{display:block;width:100%!important;height:100%!important;object-fit:cover;margin:0!important;border-radius:0!important}
.s24-v9 .v9-sym__name{display:flex;align-items:center;justify-content:center;min-height:48px;padding:6px 8px;font-size:16px;font-weight:800;color:var(--ink);text-align:center;word-break:keep-all}
.s24-v9 .v9-svcsec{text-align:left}
.v9-svc .section--alt:has(.v9-symgrid) .v9-symgrid{max-width:1000px;margin-left:auto!important;margin-right:auto!important;grid-template-columns:repeat(auto-fit,minmax(150px,190px));justify-content:center}

/* 칩(다른 지역·관련 서비스·다른 작업): 누르기 영역 44px */
.s24-v9 .v9-chip,.s24-v9 .s24-links a,.s24-v9 .area-link-tag,.s24-v9 .category-hub__link{display:inline-flex!important;align-items:center;min-height:44px!important;padding:0 16px!important;border-radius:999px!important;border:1.5px solid var(--petal)!important;background:#fff!important;color:var(--ink)!important;font-size:15px!important;font-weight:700;text-decoration:none!important;box-shadow:none!important}
.s24-v9 .v9-chip:hover,.s24-v9 .s24-links a:hover,.s24-v9 .area-link-tag:hover,.s24-v9 .category-hub__link:hover{border-color:var(--pink)!important;background:var(--blush)!important;color:var(--rose)!important}
.s24-v9 .area-links{display:flex!important;flex-wrap:wrap;gap:10px}
.s24-v9 .dd-nearby-card{min-height:48px}

/* 3) 과정 단계 카드(글은 그대로, 번호만 표시) */
.s24-v9 .page-content ol.v9-steps{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:14px 0 28px!important;padding:0!important;list-style:none!important;counter-reset:v9st}
.s24-v9 .page-content ol.v9-steps>li{counter-increment:v9st;position:relative;margin:0!important;padding:56px 18px 18px!important;background:#fff;border:1.5px solid var(--petal);border-radius:18px;line-height:1.6}
.s24-v9 .page-content ol.v9-steps>li::before{content:counter(v9st)!important;position:absolute;left:18px;top:16px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--wine),var(--pink))!important;color:#fff!important;font-size:15px;font-weight:900}

/* 4) FAQ 펼침 상자(지역 쪽 목록을 바꾼 것) */
.s24-v9 .v9-faqlist{margin:12px 0 28px}
.s24-v9 .v9-faq{margin:0 0 10px;background:#fff;border:1.5px solid var(--petal);border-radius:16px}
.s24-v9 .v9-faq>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:10px 18px;font-weight:800;color:var(--ink);cursor:pointer;list-style:none}
.s24-v9 .v9-faq>summary::-webkit-details-marker{display:none}
.s24-v9 .v9-faq>summary::after{content:"+";flex:none;font-size:22px;line-height:1;color:var(--rose)}
.s24-v9 .v9-faq[open]>summary::after{content:"−"}
.s24-v9 .v9-faq>p{margin:0;padding:0 18px 16px;color:var(--slate);line-height:1.75}

/* 5) 관련 가이드 그림 카드 */
.s24-v9 ul.v9-maggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin:14px 0 28px!important;padding:0!important;list-style:none!important}
.s24-v9 .v9-maggrid li{margin:0!important;padding:0!important}
.s24-v9 .v9-maggrid li::before{display:none!important}
.s24-v9 .v9-mag{display:flex;flex-direction:column;height:100%;background:#fff;border:1.5px solid var(--petal);border-radius:16px;overflow:hidden;text-decoration:none!important}
.s24-v9 .v9-mag:hover{border-color:var(--pink)}
.s24-v9 .v9-mag__img{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--blush)}
.s24-v9 .v9-mag__img img{display:block;width:100%!important;height:100%!important;aspect-ratio:auto!important;object-fit:cover;margin:0!important;border-radius:0!important}
.s24-v9 .v9-mag__t{display:flex;align-items:center;min-height:52px;padding:10px 14px;font-weight:800;color:var(--ink);line-height:1.4;word-break:keep-all}
.s24-v9 .v9-related{margin:8px 0 28px}
.s24-v9 .v9-related__t{margin:0 0 4px}

/* 6) 서비스 쪽: 장비 3장을 가로 작은 카드로, 비용 구역 */
.v9-svc .equipment-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important}
.v9-svc .equipment-card{display:grid!important;grid-template-columns:minmax(0,1fr) 112px;grid-template-areas:"name img" "desc img" "use use" "more more";gap:4px 14px;align-items:start;padding:18px!important;border:1.5px solid var(--petal)!important;border-radius:18px!important;background:#fff!important}
.v9-svc .equipment-card__image{grid-area:img;width:112px;height:112px;margin:0!important;border-radius:14px;overflow:hidden;background:var(--blush)}
.v9-svc .equipment-card__image img{width:100%!important;height:100%!important;object-fit:contain!important}
.v9-svc .equipment-card__name{grid-area:name;margin:0!important;font-size:18px!important}
.v9-svc .equipment-card__desc{grid-area:desc;margin:0!important;font-size:14.5px!important;line-height:1.6}
.v9-svc .equipment-card__use{grid-area:use;font-size:13.5px}
.v9-svc .equipment-card__more{grid-area:more;display:inline-flex!important;align-items:center;min-height:44px}
.v9-svc .s24-equip-more a{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;border:1.5px solid var(--petal);background:#fff}
.v9-cost .container{max-width:880px}
.s24-v9 ul.v9-factors{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 0 18px;padding:0;list-style:none}
.s24-v9 .v9-factors li{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;background:var(--blush);border:1.5px solid var(--petal);color:var(--rose);font-weight:800}
.s24-v9 .v9-factors li::before{display:none}
.s24-v9 .v9-cost__qa{padding:18px 20px;background:#fff;border:1.5px solid var(--petal);border-radius:18px}
.s24-v9 .v9-cost__qa h3{margin:0 0 6px;font-size:17px;color:var(--ink)}
.s24-v9 .v9-cost__qa p{margin:0;color:var(--slate);line-height:1.75}

/* 7) 가이드 히어로 + 이 쪽의 내용 + 번호 단계 */
.s24-v9 .v9-ghero{background:linear-gradient(180deg,#FFF6F9 0%,#FFE6EF 100%);padding:clamp(24px,4vw,48px) 0}
.s24-v9 .v9-ghero__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:32px;align-items:center;max-width:1168px;margin:0 auto}
.s24-v9 .v9-ghero .single__header{margin:0 0 10px!important;padding:0!important;text-align:left}
.s24-v9 .v9-ghero .section__title{margin:0;text-align:left;font-size:clamp(28px,1rem + 2vw,44px)}
.s24-v9 .v9-ghero__txt>p{margin:0;color:var(--slate);line-height:1.75;font-size:16px;word-break:keep-all}
.s24-v9 .v9-ghero .single__thumbnail{margin:0!important;width:100%!important;max-width:460px;justify-self:end;float:none!important}
.s24-v9 .v9-ghero .single__thumbnail img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:20px}
.s24-v9 .v9-toc{background:var(--blush);border:1px solid var(--petal);border-radius:18px;padding:14px 18px}
.s24-v9 .v9-toc>summary{font-weight:900;color:var(--ink);min-height:44px;display:flex;align-items:center}
.s24-v9 .v9-toc ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 18px;margin:6px 0 0!important}
.s24-v9 .v9-toc a{display:inline-flex;align-items:center;min-height:44px}
.v9-guide .page-content{counter-reset:v9h}
.v9-guide .page-content>h2{counter-increment:v9h;display:flex;align-items:center;gap:12px}
.v9-guide .page-content>h2::before{content:counter(v9h,decimal-leading-zero)!important;flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--wine),var(--pink))!important;color:#fff!important;font-size:16px;font-weight:900;position:static!important;border:0!important}
.v9-guide .page-content>h2.v9-related__t::before{content:none!important}
.s24-v9 .s24-side__toc a{display:inline-flex;align-items:center;min-height:44px}

/* 8) 사진 상담 띠 */
.s24-v9 .v9-band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:20px 32px;align-items:center;margin:32px 0 8px;padding:clamp(22px,3.5vw,36px);border-radius:26px;background:linear-gradient(135deg,var(--wine) 0%,var(--rose) 55%,var(--pink) 100%);color:#fff;grid-column:1/-1!important}
.s24-v9 .v9-band__title{margin:0 0 8px!important;padding:0!important;border:0!important;font-size:clamp(22px,1rem + 1.4vw,32px);color:#fff!important}
.s24-v9 .v9-band__title::before{display:none!important}
.s24-v9 .v9-band__desc{margin:0;color:rgba(255,255,255,.92);line-height:1.7}
.s24-v9 .v9-band__art{margin:0;justify-self:end;width:100%;max-width:360px}
.s24-v9 .v9-band__art img{display:block;width:100%;height:auto;border-radius:18px;margin:0!important}
.v9-svc .section:has(>.container>.v9-band) .container{max-width:1168px}

/* 사이 폭 */
@media (max-width:1100px){
  .v9-svc .equipment-grid{grid-template-columns:1fr!important;max-width:680px;margin:0 auto}
}
@media (max-width:900px){
  .s24-v9 .v9-hero--split .hero__container{grid-template-columns:1fr}
  .s24-v9 .v9-hero-fig{order:-1;justify-self:start;max-width:220px}
  .s24-v9 .v9-ghero__in{grid-template-columns:1fr}
  .s24-v9 .v9-ghero .single__thumbnail{order:-1;justify-self:start;max-width:560px}
  .s24-v9 .v9-band{grid-template-columns:1fr}
  .s24-v9 .v9-band__art{order:-1;justify-self:start;max-width:420px}
}
@media (max-width:767px){
  .s24-v9 .v9-cta{flex-direction:column;align-items:stretch;width:100%}
  .s24-v9 .v9-cta .s24-callbtn,.s24-v9 .v9-cta .v9-kakao{width:100%;max-width:none}
  .s24-v9 .v9-kakao{min-height:56px;padding:5px 18px 5px 6px;font-size:1.06rem}
  .s24-v9 .v9-kakao__ico{width:44px;height:44px}
  .s24-v9 .v9-hero-fig{max-width:160px}
  .s24-v9 .page-content ul.v9-symgrid,.s24-v9 ul.v9-symgrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .s24-v9 .v9-toc ol{grid-template-columns:1fr}
  .s24-v9 .v9-band__art img{aspect-ratio:16/9;object-fit:cover;object-position:center 40%}
  .v9-svc .equipment-card{grid-template-columns:minmax(0,1fr) 88px}
  .v9-svc .equipment-card__image{width:88px;height:88px}
  /* 하단 고정 바: 히어로 전화 버튼이 보이는 동안 숨김(스크립트 없으면 그대로) */
  html.v9-cf-hide .cta-float{transform:translateY(110%)!important;visibility:hidden;transition:transform .3s,visibility 0s .3s}
  html:not(.v9-cf-hide) .cta-float{transition:transform .3s,visibility 0s}
}
@media (prefers-reduced-motion:reduce){html .cta-float{transition:none!important}}
/* 작은 링크: 현재 위치 줄, 제목 속 링크도 44px */
.s24-v9 :is(.s24-crumb,.s24-hcrumb) a{display:inline-flex;align-items:center;min-height:44px}
.s24-v9 .section__title>a{display:inline-flex;align-items:center;min-height:44px}
/* 768~900: 히어로 버튼은 제목과 같은 왼쪽 줄, 서비스 그림 크기 상한 */
@media (min-width:768px){.s24-v9 .v9-hero .hero__cta.v9-cta{flex-direction:row!important;align-items:center!important;justify-content:flex-start!important}}
@media (max-width:900px){.s24-v9 .s24-hero-figure{max-width:280px!important;justify-self:start!important;margin-left:0!important}}
@media (max-width:767px){.s24-v9 .v9-hero .hero__cta.v9-cta{align-items:stretch!important}.s24-v9 .s24-hero-figure{max-width:200px!important}}
.s24-v9 .s24-hcrumb ol,.s24-v9 .s24-hcrumb li{display:flex;flex-wrap:wrap;align-items:center}
.s24-v9 .s24-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:0 4px}
@media (max-width:900px){.s24-v9 .s24-hero-figure{order:-1}}
/* 증상 카드 수에 맞춰 칸 수를 정해 마지막 줄 빈칸이 남지 않게(768px 이상) */
@media (min-width:768px){
.s24-v9 .page-content ul.v9-symgrid:has(>li:last-child:nth-child(3n)),.s24-v9 ul.v9-symgrid:has(>li:last-child:nth-child(3n)){grid-template-columns:repeat(3,minmax(0,1fr))}
.s24-v9 .page-content ul.v9-symgrid:has(>li:last-child:nth-child(4n)),.s24-v9 ul.v9-symgrid:has(>li:last-child:nth-child(4n)){grid-template-columns:repeat(4,minmax(0,1fr))}
.s24-v9 .page-content ul.v9-symgrid:has(>li:last-child:nth-child(5)),.s24-v9 ul.v9-symgrid:has(>li:last-child:nth-child(5)){grid-template-columns:repeat(5,minmax(0,1fr))}
}
/* v9b: 지역 히어로 제목 키움(1920 52px, 390 26px) + 그림 카드 높이 균형 */
.s24-v9 .v9-hero--split .hero__title{font-size:clamp(26px,1rem + 1.9vw,52px)!important;line-height:1.2!important;letter-spacing:-.035em;text-wrap:balance}
@media (min-width:901px){
  .s24-v9 .v9-hero--split .hero__container{grid-template-columns:minmax(0,1fr) minmax(0,280px);padding-top:clamp(28px,3vw,44px)!important;padding-bottom:clamp(28px,3vw,44px)!important}
  .s24-v9 .v9-hero--split .v9-hero-fig{max-width:280px}
}
.v9-svc .v9-process .container{max-width:1000px}
.v9-svc .v9-process ol.v9-steps{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:0!important;padding:0!important;list-style:none!important;counter-reset:v9st}
.v9-svc .v9-process ol.v9-steps>li{counter-increment:v9st;position:relative;margin:0!important;padding:58px 18px 18px!important;background:#fff;border:1.5px solid var(--petal);border-radius:18px;line-height:1.6;color:var(--slate)}
.v9-svc .v9-process ol.v9-steps>li strong{color:var(--ink);font-size:18px}
.v9-svc .v9-process ol.v9-steps>li::before{content:counter(v9st);position:absolute;left:18px;top:16px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--wine),var(--pink));color:#fff;font-size:15px;font-weight:900}
