/* bsn-page-service.css — 사업영역 전용 규칙(원래 bsn-design-system.css 20절).
 * bsn-design-system.css 다음에 해당 화면에서만 로드(functions.php bsn_page_style_slugs()). */

/* ============================================================
 * 20. 사업영역 · 공통 FAQ 블록
 * 사업영역 마크업(DB 템플릿)은 그대로 두고 12단 배치로 재구성한다.
 * 데스크톱 상세는 요약 4단 · 설명 4단 · 하는 일 4단, 서비스 화면 패널은 5~12단.
 * ============================================================ */

/* 20.2 히어로 — 제목 전폭, 리드 7단 · 버튼 9~12단 */
.bsn-services-page .bsn-services-page__hero{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px;align-items:end;
  max-width:calc(var(--measure-shell) + 2 * var(--bsn-gutter));padding-top:96px}
.bsn-services-page .bsn-services-page__hero>*{grid-column:1/-1}
.bsn-services-page .bsn-services-page__hero>.bsn-rule{width:32px;height:2px;margin:0 0 28px;background:var(--bsn-ink)}
.bsn-services-page .bsn-services-page__hero h1{max-width:900px;margin:0;font-size:clamp(34px,3.8vw,54px);font-weight:700;line-height:1.24;letter-spacing:-.042em;color:var(--bsn-ink)}
.bsn-services-page .bsn-services-page__hero .bsn-lead{grid-column:1/span 7;max-width:none;margin:32px 0 0;font-size:18px;line-height:1.8;letter-spacing:-.015em;color:var(--bsn-text-secondary)}
.bsn-services-page .bsn-services-page__hero-actions{grid-column:9/span 4;justify-content:flex-end;gap:12px;margin:32px 0 0}
.bsn-services-page__hero-actions a[href^="tel:"]{gap:8px;padding-inline:22px 24px;font-weight:500;letter-spacing:0;font-variant-numeric:tabular-nums}
.bsn-services-page__hero-actions a[href^="tel:"]::before{content:"";width:18px;height:18px;background:currentColor;
  -webkit-mask:var(--bsn-phone-icon) center/18px no-repeat;mask:var(--bsn-phone-icon) center/18px no-repeat}

/* 20.3 협업 흐름 — 선 위의 단계 점 */
.bsn-services-page .bsn-services-flow{margin-top:112px;padding:104px 0 112px;background:var(--bsn-bg-subtle)}
.bsn-services-flow>.bsn-shell{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px;row-gap:16px;align-items:end}
.bsn-services-flow>.bsn-shell>*{grid-column:1/-1}
.bsn-services-page .bsn-services-flow h2{grid-column:1/span 7;margin:0;font-size:clamp(26px,2.6vw,36px);font-weight:600;line-height:1.38;letter-spacing:-.032em;color:var(--bsn-ink)}
.bsn-services-page .bsn-services-flow__lead{grid-column:8/span 5;max-width:none;margin:0;font-size:17px;line-height:1.75;color:var(--bsn-text-secondary)}
.bsn-services-page .bsn-services-flow__list{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:40px 0;margin:48px 0 0;padding:0;border:0;overflow:visible}
.bsn-services-page .bsn-services-flow__list article,.bsn-services-page .bsn-services-flow__list article:first-child{position:relative;min-width:0;padding:28px 24px 0 0;
  border:0;border-top:1px solid var(--bsn-border-strong);border-radius:0;background:none}
.bsn-services-flow__list article::before{content:"";position:absolute;top:-5px;inset-inline-start:0;width:9px;height:9px;border-radius:999px;background:var(--bsn-accent);
  box-shadow:0 0 0 4px var(--bsn-bg-subtle)}
.bsn-services-page .bsn-services-flow__num{margin:0;font-size:13px;font-weight:500;letter-spacing:0;color:var(--bsn-text-tertiary)}
.bsn-services-page .bsn-services-flow__list h3{margin:10px 0 0;font-size:24px;font-weight:600;line-height:1.4;letter-spacing:-.03em;color:var(--bsn-ink)}
.bsn-services-page .bsn-services-flow__list article>p:not(.bsn-services-flow__num){margin:6px 0 0;font-size:15px;line-height:1.6;color:var(--bsn-text-secondary)}
.bsn-services-page .bsn-services-flow__list strong{display:inline-flex;margin:16px 0 0;padding:4px 10px;border:1px solid var(--bsn-line-soft);border-radius:999px;background:#fff;
  font-size:13px;font-weight:600;line-height:1.5;color:var(--bsn-accent)}
.bsn-services-page .bsn-services-flow .bsn-snap__dots{display:none}

/* 20.4 상세 — 그룹 머리 잉크 선, 항목 3열 */
.bsn-services-page .bsn-services-page__details{padding-top:136px}
.bsn-services-page .bsn-services-page__groups{max-width:none}
.bsn-services-page .bsn-services-page__group+.bsn-services-page__group{margin-top:120px}
.bsn-services-page .bsn-services-page__group>header{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px;row-gap:12px;align-items:baseline;
  padding:36px 0 0;border:0;border-top:1px solid var(--bsn-ink)}
.bsn-services-page .bsn-services-page__group>header h2{grid-column:1/span 4;margin:0;font-size:clamp(24px,2.2vw,30px);font-weight:600;line-height:1.42;letter-spacing:-.028em;color:var(--bsn-ink)}
.bsn-services-page .bsn-services-page__group>header p{grid-column:5/span 8;margin:0;font-size:17px;line-height:1.7;color:var(--bsn-text-secondary)}
.bsn-services-page .bsn-services-page__item{margin:0;padding:40px 0 48px;border:0;border-top:1px solid var(--bsn-border);background:none}
.bsn-services-page .bsn-services-page__group>header+.bsn-services-page__item{margin-top:40px}
.bsn-services-page .bsn-services-page__group .bsn-services-page__item:last-child{border-bottom:1px solid var(--bsn-border)}
.bsn-services-page .bsn-services-page__item:target{margin-inline-start:0;padding-inline-start:0;border-inline-start:0;background:none}
.bsn-services-page .bsn-services-page__item-num{margin:0;font-size:13px;font-weight:500;letter-spacing:0;color:var(--bsn-text-tertiary)}
.bsn-services-page .bsn-services-page__item-title{margin-top:12px;font-size:26px;font-weight:600;line-height:1.4;letter-spacing:-.03em;color:var(--bsn-ink)}
.bsn-services-page .bsn-services-page__item-copy p{margin:0;font-size:16px;line-height:1.8;color:var(--bsn-text-secondary);text-wrap:pretty}
.bsn-services-page .bsn-services-page__item-copy>a{margin-top:20px}
.bsn-services-page .bsn-services-page__item-copy a{display:inline-flex;align-items:center;gap:6px;min-height:36px;margin-top:0;font-size:15px;font-weight:600;color:var(--bsn-accent);text-decoration:none}
.bsn-services-page .bsn-services-page__item-copy a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.bsn-services-page .bsn-services-page__item-copy a[target=_blank]{font-weight:500;color:var(--bsn-text-secondary)}
.bsn-services-page .bsn-services-page__item-copy a[target=_blank]::after{content:"";width:16px;height:16px;background:currentColor;
  -webkit-mask:var(--bsn-external-icon) center/16px no-repeat;mask:var(--bsn-external-icon) center/16px no-repeat}
.bsn-services-page .bsn-services-page__item-copy .bsn-arrow{display:none}
/* 담당 계열사 BI — 설명 끝 서명. 계열사 사이트가 있으면 새 창 링크(아이콘), 스터디는 표시만 */
.bsn-services-page .bsn-services-page__item-copy .bsn-services-page__brand,.bsn-services-page .bsn-services-page__item-copy a.bsn-services-page__brand{display:flex;align-items:center;gap:8px;width:fit-content;min-height:36px;margin-top:12px;color:var(--bsn-text-tertiary)}
.bsn-services-page .bsn-services-page__item-copy>p+a{margin-top:12px}
.bsn-services-page .bsn-services-page__item-copy>a:not(.bsn-services-page__brand)+.bsn-services-page__brand{margin-top:4px}
.bsn-services-page .bsn-services-page__item-copy a.bsn-services-page__brand:hover{color:var(--bsn-accent)}
.bsn-services-page .bsn-services-page__item-bi{display:block;width:auto;height:18px}
.bsn-services-page .bsn-services-page__work{margin:0;padding:0;border:0;list-style:none}
.bsn-services-page .bsn-services-page__work::before{content:"하는 일";display:block;margin-bottom:12px;font-size:13px;font-weight:600;line-height:1.5;color:var(--bsn-text-tertiary)}
.bsn-services-page .bsn-services-page__work li,.bsn-services-page .bsn-services-page__work li:last-child{display:flex;align-items:center;gap:12px;padding:12px 0;
  border-bottom:1px solid var(--bsn-border);font-size:15px;font-weight:500;line-height:1.5;color:var(--bsn-text)}
.bsn-services-page .bsn-services-page__work li:first-child{border-top:1px solid var(--bsn-border)}
.bsn-services-page .bsn-services-page__work li::before{content:"";flex:0 0 auto;width:18px;height:18px;background:var(--bsn-accent);
  -webkit-mask:var(--bsn-check-icon) center/18px no-repeat;mask:var(--bsn-check-icon) center/18px no-repeat}
@media(min-width:1024px){
  .bsn-services-page .bsn-services-page__item{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px;row-gap:40px}
  .bsn-services-page .bsn-services-page__item summary{grid-column:1/span 4;grid-row:1}
  .bsn-services-page .bsn-services-page__item-copy{grid-column:5/span 4;grid-row:1}
  .bsn-services-page .bsn-services-page__work{grid-column:9/span 4;grid-row:1}
  .bsn-services-page .bsn-services-page__item>.bsn-family-service{grid-column:5/span 8;grid-row:2}
}

/* 20.5 서비스 화면 패널 — 앱 화면 · 최근 실거래 · 바로가기 */
.bsn-services-page .bsn-family-service{display:flex;flex-direction:row;flex-wrap:wrap;align-items:stretch;gap:20px 32px;justify-self:start;margin:0;padding:32px;border-radius:10px;background:var(--bsn-bg-subtle)}
.bsn-family-service__label{flex:0 0 100%;margin:0;font-size:13px;font-weight:600;line-height:1.5;color:var(--bsn-text-tertiary)}
.bsn-services-page .bsn-family-service__shots{display:flex;gap:32px;margin:0}
.bsn-services-page .bsn-family-service__shots figure{flex:0 0 140px;margin:0}
.bsn-services-page .bsn-family-phone{padding:5px;border-radius:22px;background:var(--bsn-band);box-shadow:none}
.bsn-services-page .bsn-family-phone>img{border-radius:17px}
.bsn-services-page .bsn-family-service__shots figcaption{display:flex;gap:8px;margin-top:12px;font-size:13px;font-weight:500;line-height:1.5;color:var(--bsn-text)}
.bsn-services-page .bsn-family-service__shots figcaption span{font-family:var(--bsn-mono);letter-spacing:0;color:var(--bsn-text-tertiary)}
.bsn-services-page .bsn-family-service__recent{display:flex;flex:1 1 260px;flex-direction:column;min-width:0;margin:0}
.bsn-services-page .bsn-family-service__recent h3{margin:0;font-size:16px;font-weight:600;line-height:1.5;color:var(--bsn-ink)}
.bsn-family-service__recent ol{margin:12px 0 0;padding:0;border-top:1px solid var(--bsn-line-soft);list-style:none}
.bsn-family-service__recent li{border-bottom:1px solid var(--bsn-line-soft)}
.bsn-family-service__recent li a{display:block;padding:14px 0;color:inherit}
.bsn-family-service__trade{display:flex;align-items:baseline;gap:10px;min-width:0}
.bsn-family-service__trade strong{flex:0 0 auto;font-size:17px;font-weight:700;line-height:1.4;color:var(--bsn-ink);font-variant-numeric:tabular-nums}
.bsn-family-service__trade span{overflow:hidden;font-size:14px;font-weight:500;color:var(--bsn-text);text-overflow:ellipsis;white-space:nowrap}
.bsn-family-service__recent li a:hover .bsn-family-service__trade span{text-decoration:underline;text-underline-offset:4px}
.bsn-family-service__meta{display:block;margin-top:2px;font-size:13px;line-height:1.55;color:var(--bsn-text-tertiary)}
.bsn-services-page .bsn-family-service--b0{justify-self:stretch}
.bsn-services-page .bsn-family-service__recent>ol{margin-bottom:20px}
.bsn-services-page .bsn-family-service__recent>.bsn-family__cta{align-self:flex-start;width:auto;height:48px;margin:auto 0 0;padding-inline:22px 20px;font-size:15px}
/* 그룹사 대표 사진 — 건축·건설·관리 사이트의 사례 최대 8장 가로 스크롤, 4:5 사진 + 제목·보조 2줄.
   다음 사진 일부가 보이도록 한 화면에 데스크톱·태블릿 4.25장, 폰 2.3장 */
.bsn-services-page .bsn-family-service--photos{justify-self:stretch;min-width:0}
.bsn-family-service__photos{display:flex;flex:1 1 100%;gap:20px;min-width:0;margin:0;padding:0 0 10px;list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.bsn-family-service__photos>li{flex:0 0 calc((100% - 60px) / 4.25);min-width:0;scroll-snap-align:start}
.bsn-family-service__photos a{display:block;color:inherit;text-decoration:none}
.bsn-family-service__photos img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:6px;background:var(--bsn-line-soft)}
.bsn-family-service__photo-title{display:-webkit-box;margin-top:12px;overflow:hidden;font-size:14px;font-weight:500;line-height:1.5;color:var(--bsn-ink);-webkit-box-orient:vertical;-webkit-line-clamp:2}
.bsn-family-service__photo-meta{display:block;margin-top:2px;font-size:12px;line-height:1.5;color:var(--bsn-text-tertiary)}
.bsn-family-service__photos a:hover .bsn-family-service__photo-title{text-decoration:underline;text-underline-offset:4px}

/* 20.6 폰·태블릿 — 흐름은 세로 타임라인, 상세는 아코디언 */
@media(max-width:1023px){
  .bsn-services-page .bsn-services-page__hero{display:block;padding:44px var(--bsn-gutter) 0}
  .bsn-services-page .bsn-services-page__hero>.bsn-rule{width:24px;margin-bottom:20px}
  .bsn-services-page .bsn-services-page__hero h1{font-size:28px;line-height:1.36;letter-spacing:-.038em}
  .bsn-services-page .bsn-services-page__hero .bsn-lead{margin-top:14px;font-size:15px;line-height:1.75}
  .bsn-services-page .bsn-services-page__hero-actions{display:flex;flex-direction:column;gap:8px;margin-top:24px}
  .bsn-services-page .bsn-services-page__hero-actions .bsn-btn{width:100%;height:52px;font-size:16px}

  .bsn-services-page .bsn-services-flow{margin-top:56px;padding:48px 0 44px}
  .bsn-services-flow>.bsn-shell{display:block;padding-inline:var(--bsn-gutter)}
  .bsn-services-page .bsn-services-flow h2{font-size:22px;line-height:1.45}
  .bsn-services-page .bsn-services-flow__lead{margin-top:10px;font-size:15px;line-height:1.7}
  .bsn-services-page .bsn-services-flow__list{display:block;max-width:520px;margin:28px 0 0;padding:0}
  /* 한 줄: 번호 · 단계 · 설명(좁으면 설명 칸 안에서 줄바꿈) · 담당 조직(오른쪽 끝 정렬) */
  .bsn-services-page .bsn-services-flow__list article,.bsn-services-page .bsn-services-flow__list article:first-child{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:baseline;column-gap:8px;
    padding:0 0 22px 25px;border:0;background:linear-gradient(var(--bsn-border-strong),var(--bsn-border-strong)) 4px 17px/1px calc(100% - 9px) no-repeat}
  .bsn-services-page .bsn-services-flow__list article:last-child{padding-bottom:0;background:none}
  .bsn-services-flow__list article::before{top:8px;box-shadow:none}
  .bsn-services-flow__list article::after{content:none}
  .bsn-services-page .bsn-services-flow__num{grid-column:1;grid-row:1;font-size:12px}
  .bsn-services-page .bsn-services-flow__list h3{grid-column:2;grid-row:1;margin:0;font-size:18px}
  .bsn-services-page .bsn-services-flow__list article>p:not(.bsn-services-flow__num){grid-column:3;grid-row:1;margin:0;font-size:14px;line-height:1.5}
  .bsn-services-page .bsn-services-flow__list strong{grid-column:4;grid-row:1;justify-self:end;margin:0;padding:2px 9px;font-size:12px;line-height:1.6;white-space:nowrap}

  .bsn-services-page .bsn-services-page__details{padding:76px var(--bsn-gutter) 0}
  .bsn-services-page .bsn-services-page__group+.bsn-services-page__group{margin-top:64px}
  .bsn-services-page .bsn-services-page__group>header{display:block;padding-top:24px}
  .bsn-services-page .bsn-services-page__group>header h2{font-size:22px;line-height:1.45}
  .bsn-services-page .bsn-services-page__group>header p{margin-top:8px;font-size:15px}
  .bsn-services-page .bsn-services-page__item,.bsn-services-page .bsn-services-page__group>header+.bsn-services-page__item{margin:0;padding:0;border-top:0;border-bottom:1px solid var(--bsn-border)}
  .bsn-services-page .bsn-services-page__group>header+.bsn-services-page__item{margin-top:8px}
  .bsn-services-page .bsn-services-page__item summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:0;padding:18px 0}
  .bsn-services-page .bsn-services-page__item summary>.bsn-services-page__item-num{order:0}
  .bsn-services-page .bsn-services-page__item summary>.bsn-services-page__item-title{order:1;flex:1;margin:0;font-size:19px;line-height:1.45;letter-spacing:-.026em}
  .bsn-services-page .bsn-services-page__item-num{font-size:12px}
  .bsn-services-page .bsn-services-page__item-toggle{order:2;display:flex;flex:0 0 28px;align-items:center;justify-content:center;width:28px;height:28px;min-width:0;
    border:1px solid var(--bsn-border-strong);border-radius:8px;font-size:0}
  /* !important: R6 사업영역 토글 문구 표시 !important 규칙을 덮음 */
  .bsn-services-page .bsn-services-page__item-toggle span{display:none!important}
  .bsn-services-page .bsn-services-page__item-toggle::before{content:"";width:16px;height:16px;background:var(--bsn-ink);
    -webkit-mask:var(--bsn-plus-icon) center/16px no-repeat;mask:var(--bsn-plus-icon) center/16px no-repeat}
  .bsn-services-page .bsn-services-page__item[open] .bsn-services-page__item-toggle::before{-webkit-mask-image:var(--bsn-minus-icon);mask-image:var(--bsn-minus-icon)}
  .bsn-services-page .bsn-services-page__item-copy{padding:0}
  .bsn-services-page .bsn-services-page__item-copy p{font-size:15px;line-height:1.75}
  .bsn-services-page .bsn-services-page__item-copy>a{margin-top:12px}
  .bsn-services-page .bsn-services-page__item-copy a{min-height:40px}
  .bsn-services-page .bsn-services-page__item-copy .bsn-services-page__brand,.bsn-services-page .bsn-services-page__item-copy a.bsn-services-page__brand{min-height:44px;margin-top:8px}
  .bsn-services-page .bsn-services-page__item-copy>a:not(.bsn-services-page__brand)+.bsn-services-page__brand{margin-top:0}
  .bsn-services-page .bsn-services-page__item-bi{height:16px}
  .bsn-services-page .bsn-services-page__work{margin:16px 0 0}
  .bsn-services-page .bsn-services-page__work::before{content:none}
  .bsn-services-page .bsn-services-page__work li,.bsn-services-page .bsn-services-page__work li:last-child{gap:10px;padding:11px 0;font-size:14px}
  .bsn-services-page .bsn-services-page__item>:last-child{margin-bottom:24px}
  .bsn-services-page .bsn-family-service{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:20px;padding:20px}
  .bsn-services-page .bsn-family-service>*{grid-column:1/-1}
  .bsn-services-page .bsn-family-service__shots{display:contents}
  .bsn-services-page .bsn-family-service__shots figure{grid-column:auto}
  .bsn-services-page .bsn-family-phone{padding:4px;border-radius:18px}
  .bsn-services-page .bsn-family-phone>img{border-radius:14px}
  .bsn-services-page .bsn-family-service__shots figcaption{gap:6px;margin-top:10px;font-size:12px}
  .bsn-services-page .bsn-family-service__recent{margin-top:4px}
  .bsn-services-page .bsn-family-service__recent>.bsn-family__cta{width:100%;margin-top:16px}
  .bsn-family-service__photos{gap:12px}
  .bsn-family-service__photos>li{flex-basis:calc((100% - 24px) / 2.3)}
  .bsn-family-service__photo-title{margin-top:10px;font-size:13px}
}
/* 태블릿 — 앱 화면은 160px 2장 가로 배치, 최근 실거래는 옆(공간 부족 시 아래)으로 */
@media(min-width:640px) and (max-width:1023px){
  .bsn-services-page .bsn-family-service{display:flex;flex-wrap:wrap;align-items:flex-start;gap:20px 28px;padding:24px}
  .bsn-services-page .bsn-family-service__shots{display:flex;gap:20px}
  .bsn-services-page .bsn-family-service__shots figure{flex:0 0 160px}
  .bsn-services-page .bsn-family-service__recent{flex:1 1 240px;margin-top:0}
  .bsn-services-page .bsn-family-service__recent>.bsn-family__cta{width:auto;margin-top:16px}
  .bsn-family-service__photos{gap:16px}
  .bsn-family-service__photos>li{flex-basis:calc((100% - 48px) / 4.25)}
}