/* ★★★★바로빌딩 ★사이트 보정 (작업 01 · 2026-09-26)
   ★★★미리보기 기준. ★운영 미반영.
   ─────────────────────────────────────────────────────────
   ★★잰 것 (localhost 미리보기 1440×900)

     마디 차례   bbai2 820 → building-hero 649 → land-search 243 → results 1605 → bottom 193
     히어로 속   .photo-hero-copy 540×★585   vs  .external-hero-photo 625×★352
                 → ★★233px 가 ★빈다. ★대표가 ★캡처로 짚으신 ★바로 그 자리다.
     히어로 배경 #E9ECED (회색)  ·  하단 배경 #EAEDEE (회색)
                 → ★크림 계열 판에 ★회색 덩어리 둘이 ★끼어 있다

   ★★★원인 (추측 아님 · DOM 으로 확인)
     .photo-hero-copy 안에 ★글(301) + ★남색 설명 박스(284) 가 ★세로로 쌓여 585.
     오른쪽 사진은 ★16:9 라 352. ★두 칸을 ★한 줄에 놓으니 ★오른쪽 밑이 ★233 남는다.

   ★★★고침 — ★★«억지 고정 높이로 맞추지 않는다»(지시 [줄 맞춤] 3번)
     ★.photo-hero-copy 를 display:contents 로 ★풀어
       ①글 = 1열 1행  ②사진 = 2열 1행  ③남색 박스 = ★아래 줄 전체
     ★★남색 박스를 ★지우지 않는다 — ★가로 띠로 ★눕혀 ★두 칸 밑에 ★깐다.
       ★«설명 박스를 없앤 자리에 ★또 다른 빈 박스»를 ★만들지 않는다(지시 01-2)
     ★사진은 ★16:9 그대로 — ★찌그러뜨리지 않는다(지시 [이미지])
     ★「이미지 예시」 글은 ★그대로 두고 ★자리만 ★사진 안쪽으로
   ───────────────────────────────────────────────────────── */

/* ── 히어로 ── */
/* ★★★잰 것 — ★.building-hero 는 ★1425 폭이고 ★max-width 가 ★none 이었다.
     ★그래서 ★공통 컨테이너 규칙이 ★안 걸렸다. ★여기서 ★직접 건다 */
.building-hero{
  background: var(--바로크림2);
  max-width: var(--바로폭);
  margin-left: auto; margin-right: auto;
  padding-left: var(--바로갓); padding-right: var(--바로갓);
  padding-top: var(--바로섹);
  padding-bottom: var(--바로섹);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 22px 34px;
  align-items: start;
  border-bottom: 1px solid var(--바로선);
}
/* ★★껍데기를 ★풀어 ★속 셋을 ★직접 ★칸에 앉힌다 */
.building-hero > .photo-hero-copy{ display: contents; }

.building-hero .building-hero-copy{ grid-column: 1; grid-row: 1; align-self: center; }
.building-hero .external-hero-photo{ grid-column: 2; grid-row: 1; margin: 0; }
.building-hero .building-hero-panel{
  grid-column: 1 / -1; grid-row: 2;
  /* ★★세로 284px 짜리 상자를 ★가로 띠로 ★눕힌다 */
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 8px 18px;
  padding: 16px 20px;
  border-radius: var(--바로둥금);
}
/* ★★캡처에서 ★띠 오른쪽 아래에 ★정체불명 선이 보였다 —
     ★장식 아이콘이 ★칸을 ★못 잡아 ★p 뒤로 ★밀려 있었다. ★자리를 ★못 박는다 */
.building-hero .building-hero-panel .building-line-icon{ grid-column: 1; grid-row: 1 / span 2; }
.building-hero .building-hero-panel span{ grid-column: 2; align-self: end; }
.building-hero .building-hero-panel h2{
  grid-column: 2; grid-row: 2; align-self: start;
  font-size: 19px; line-height: 1.35; letter-spacing: -.035em; margin: 0;
}
/* ★★★2026-09-26 캡처에서 ★잡은 것 — ★br 을 감췄더니
     ★★「층수그리고, 수입과 비용」으로 ★붙어 버렸다. ★글자가 ★붙으면 ★안 읽힌다.
   ○ ★줄바꿈을 ★되살린다. ★띠 높이 84px 안에 ★두 줄이 ★들어간다 */
.building-hero .building-hero-panel h2 br{ display: inline; }
.building-hero .building-hero-panel p{
  grid-column: 3; grid-row: 1 / span 2;
  justify-self: end; text-align: right; margin: 0;
  font-size: 13px; line-height: 1.6;
}

/* ★사진 — ★비율 그대로, ★찌그러뜨리지 않는다 */
.building-hero .external-hero-photo{ position: relative; }
.building-hero .external-hero-photo img{
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--바로둥금);
}
/* ★「이미지 예시」 — ★글은 ★그대로. ★자리만 ★사진 안쪽 아래로 */
.building-hero .external-hero-photo figcaption{
  position: absolute; right: 10px; bottom: 10px;
  background: rgba(26,29,33,.72); color: #fff;
  font-size: 11.5px; font-weight: 600; letter-spacing: -.02em;
  padding: 5px 9px; border-radius: 7px;
}

/* ── 맨 아래 마디 — ★회색을 ★크림 계열로 (배경 4단계 안에서) ── */
.building-bottom{
  background: var(--바로크림2);
  border-top: 1px solid var(--바로선);
  padding-top: var(--바로섹작);
  padding-bottom: var(--바로섹작);
}

/* ── 찾기 마디 — ★위 AI 칸과 ★붙어 보이지 않게 ★선으로 가른다 ── */
.land-search{
  background: var(--바로흰);
  border-top: 1px solid var(--바로선);
  padding-top: var(--바로섹작);
  padding-bottom: var(--바로섹작);
}

/* ── 폰 ── */
@media (max-width: 767px){
  .building-hero{ grid-template-columns: 1fr; gap: 18px; }
  .building-hero .building-hero-copy,
  .building-hero .external-hero-photo,
  .building-hero .building-hero-panel{ grid-column: 1; grid-row: auto; }
  .building-hero .building-hero-panel{
    grid-template-columns: auto 1fr; gap: 6px 14px; padding: 14px 16px;
  }
  .building-hero .building-hero-panel p{
    grid-column: 1 / -1; grid-row: auto; justify-self: start; text-align: left;
  }
  .building-hero .building-hero-panel h2{ font-size: 17px; }
}

/* ★★★★2026-09-26 — ★남색 패널이 ★안 누웠다. ★원인 ★둘을 ★DOM 으로 찾았다.
     ① ★.building-hero-panel 에 ★★min-height: 284px 가 ★박혀 있다.
        ★대표 지시 [구조] 3번 — 「★의미 없이 큰 ★고정 높이와 ★최소 높이부터 ★확인하라」. ★그것이다.
     ② ★.building-line-icon 이 ★167×259 짜리 ★장식 그림이다.
        ★글이 ★셋뿐인 띠에 ★259px 짜리 ★장식이 ★키를 ★정하고 있었다.
   ○ ★최소 높이를 ★푼다. ★장식은 ★지우지 않고 ★띠에 맞는 ★크기로 ★줄인다.
     ★★없애고 ★빈자리를 ★만들지 않는다 — ★줄여서 ★제 몫을 ★하게 둔다 */
.building-hero .building-hero-panel{ min-height: 0; }
.building-hero .building-line-icon{
  /* ★★★잰 것 — 이 장식은 ★position:absolute 로 ★띠 오른쪽에 ★박혀 있었고
       (inset 25px / -5px / 0 / 975px · opacity .3)
       ★자식 셋이 ★49x250 · 49x300 · 49x210 으로 ★띠 밖까지 ★뻗어 있었다.
     ★★캡처에서 ★띠 오른쪽 아래에 보이던 ★«정체불명 선»이 ★이것이다.
     ★grid-column 을 줘도 ★안 먹은 까닭도 ★absolute 라서다.
   ○ ★지우지 않는다. ★흐름 안으로 ★되돌리고 ★띠에 맞는 크기로 ★가둔다 */
  position: static;
  grid-column: 1; grid-row: 1 / span 2;
  width: 46px; height: 46px; min-height: 0;
  inset: auto;
  opacity: .5;
  overflow: hidden;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px;
  align-content: center; justify-items: stretch;
}
.building-hero .building-line-icon > div{
  /* ★★잰 것 — i 가 ★width:100% 인데 ★0px 로 ★나왔다.
       ★칸이 ★auto 라 ★100% 가 ★기댈 ★바탕이 ★없었다. ★1fr 로 ★못 박는다 */
  display: grid; grid-template-columns: 1fr; grid-auto-rows: 3px; gap: 3px;
  align-content: center; justify-items: stretch;
  width: auto; height: auto;
}
.building-hero .building-line-icon i{
  display: block; width: auto; height: 3px; border-radius: 1px;
  background: rgba(255,255,255,.55); border: 0; justify-self: stretch;
}

/* ══════════════ 폰 375 캡처에서 ★잡은 것 (2026-09-26) ══════════════
   ① ★상담 띠 글이 ★오른쪽으로 ★잘렸다 — ★한 줄로 ★붙어 있어서다. ★접히게 한다
   ② ★장식 아이콘이 ★가로 띠에서 ★세로 선 몇 개로만 ★보였다.
      ★★원래는 ★position:absolute 짜리 ★큰 워터마크였고, ★흐름에 넣으니 ★뜻이 ★안 산다.
      ○ ★★치운다. ★aria-hidden 짜리 ★순수 장식이라 ★뜻을 ★잃는 것이 ★없고,
        ★칸이 ★접히므로 ★★«빈 자리»도 ★안 남는다.
        ★대표 지시 [구조] — 「★화면을 채우려고 ★장식 상자를 ★늘리지 마라」 */
.building-hero .building-line-icon{ display: none; }
.building-hero .building-hero-panel{ grid-template-columns: auto 1fr; }
.building-hero .building-hero-panel span{ grid-column: 1; }
.building-hero .building-hero-panel h2{ grid-column: 1; }
.building-hero .building-hero-panel p{ grid-column: 2; }

.baro-consult{
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: center; gap: 4px 12px;
  padding-top: 12px; padding-bottom: 12px;
}
.baro-consult small{ white-space: normal; word-break: keep-all; line-height: 1.55; }
@media (max-width: 767px){
  .baro-consult{ justify-content: flex-start; text-align: left; }
  .building-hero .building-hero-panel{ grid-template-columns: 1fr; }
  .building-hero .building-hero-panel span,
  .building-hero .building-hero-panel h2,
  .building-hero .building-hero-panel p{ grid-column: 1; }
}

/* ★★도해 이미지 — ★확인 못 한 값·개념을 ★그림으로 보강 (2026-09-27) */
figure.detail-figure {
  margin: 14px 0 0;
  padding: 0;
  text-align: center;
}
figure.detail-figure img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--바로선, #EFE5D7);
  display: block;
  margin: 0 auto;
}
figure.detail-figure figcaption {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--바로실, #7A6E62);
}
@media (max-width: 640px) {
  figure.detail-figure img { max-width: 260px; }
}