/* ============================================================
   집테리어 지도 상세 패널 흐름 -- 2026-09-06 (25차)

   24차에서 3단 가로 스택(A안)을 넣었다가 되돌린다.
   근거: 레퍼런스인 집팔고360 지도(/srv/zippalgo360/apps/web/src/app/map/
   page.tsx)도 InteriorComplexPanel + InteriorPortfolioPanel 2단까지만
   깔고(각 w-[28rem]), 매물 쪽도 2단, 그보다 깊은 문의는 모달(fixed
   inset-0 bg-black/40)로 처리한다. 3단 패널은 어디에도 없다.
   3단은 1410px 을 요구해 지도가 510px 밖에 안 남는 것도 문제였다.

   [C안] 지도 위 패널은 최대 2단. 두 번째 칸 하나를 돌려 쓴다.

       1단 단지정보(430) | 2단 칸(540): 시공사례 <-> 업체정보 | 지도

       - 업체정보가 화면 오른쪽 끝이 아니라 2단 칸에 들어온다.
       - 업체정보에서 시공사례를 열면 같은 2단 칸 위에 덮인다
         (업체정보는 아래에 남아 있다가 뒤로 누르면 그대로 드러난다).
       - 앞 화면이 있으면 헤더 왼쪽에 "<- 시공사례" / "<- 업체정보" 가 뜬다.
         (모바일은 패널이 전면 오버레이라 이 뒤로 버튼과 패널 안 X 만 쓴다)

   [닫기] 27차 -- 부대표 지시로 X 를 패널 안이 아니라 "그 단 오른쪽 지도 위"에
       하나만 둔다(.pc-outer-panel-close). 바깥쪽 단부터 순서대로 닫힌다.
         1단만 열림      -> 1단 오른쪽 지도 위 X -> 1단 닫힘
         2단 칸까지 열림 -> 2단 오른쪽 지도 위 X -> 2단만 닫히고 X 가 1단 옆으로
       24차에 이 버튼을 없앴던 이유(헤더 로고/햄버거와 겹침)는 23차의
       top:94px 로 이미 해결돼 있었다. 패널 안쪽 X 3개는 전부 숨긴다.

       역할 분담: 바깥 X = 그 단을 닫는다 / 헤더 왼쪽 뒤로 = 한 단계 되돌린다.

   로드 순서상 이 파일이 마지막이다(style.css -> zp-portal-header.css
   -> zp-map-rail.css -> zp-panel-flow.css).
   ============================================================ */

/* ---------------- 뒤로 버튼 (PC/모바일 공통) ---------------- */

.zp-panel-back{
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
  height: 32px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: #5b6560;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.zp-panel-back:hover{ border-color: #98b4aa; color: var(--ink); }
.zp-panel-back[hidden]{ display: none !important; }

/* 앞 화면이 있을 때만 뒤로가 뜬다. 모바일에서는 그때 패널 안 X 를 감춰
   컨트롤이 하나만 남게 한다(PC 는 아래에서 안쪽 X 를 전부 감춘다). */
.portfolio-detail-panel:not([data-opened-from-company="true"]) #portfolioDetailBack,
.company-detail-panel:not([data-return-portfolio="true"]) #companyDetailBack{
  display: none !important;
}
.portfolio-detail-panel[data-opened-from-company="true"] .portfolio-detail-close,
.company-detail-panel[data-return-portfolio="true"] .company-detail-close{
  display: none !important;
}

/* 헤더 줄: [뒤로] [제목] ......... [X] */
.portfolio-detail-head,
.company-detail-head{ justify-content: flex-start; gap: 10px; }
.portfolio-detail-head-actions{ margin-left: auto; }
.company-detail-head .company-detail-close{ margin-left: auto; }
.portfolio-detail-head h2,
.company-detail-head h2{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ---------------- PC 레이아웃 ---------------- */

@media (min-width: 761px){

  /* 2단 칸 -- 1단이 닫혀 있으면 왼쪽 끝에서 시작한다. */
  .app:not(.panel-open) .portfolio-detail-panel{ left: 0 !important; }

  /* 업체정보에서 연 시공사례도 2단 칸을 지킨다(1단 자리를 덮지 않게).
     style.css 의 [data-opened-from-company]{left:0!important} 무력화. */
  .app.panel-open .portfolio-detail-panel[data-opened-from-company="true"]{
    left: var(--panel-width) !important;
  }

  /* 업체정보 -- 화면 오른쪽 고정을 풀고 시공사례와 같은 2단 칸에 넣는다.
     오른쪽에서 나오던 패널이라 테두리/그림자/진입방향도 뒤집는다. */
  .company-detail-panel{
    right: auto;
    left: 0;
    width: min(540px, calc(100vw - var(--panel-width)));
    border-left: 0;
    border-right: 1px solid var(--line);
    box-shadow: 14px 0 38px rgba(18,45,37,.18);
    transform: translateX(-18px);
    transition: opacity .2s ease,
                transform .3s cubic-bezier(.22,1,.36,1),
                left .32s cubic-bezier(.22,1,.36,1);
  }
  .company-detail-panel.open{ transform: none; }
  .app.panel-open .company-detail-panel{ left: var(--panel-width); }

  /* 같은 칸을 쓰므로, 업체정보에서 연 시공사례는 업체정보 위에 얹는다.
     (업체정보 z-index 2300 > 시공사례 2200 이라 그냥 두면 뒤로 숨는다) */
  .portfolio-detail-panel[data-opened-from-company="true"]{ z-index: 2400; }

  /* ---------------- 닫기 버튼 (27차) ---------------- */

  /* 패널 안쪽 X 3개는 모두 숨긴다. 닫기는 지도 쪽 바깥 X 하나로만 한다. */
  .detail-panel .panel-close,
  .portfolio-detail-panel .portfolio-detail-close,
  .company-detail-panel .company-detail-close{ display: none !important; }

  /* 바깥 X 는 app.js 가 "가장 바깥 패널의 오른쪽 + 16px" 로 위치를 잡는다.
     세로 위치(top:94px)는 zp-portal-header.css 23차 규칙이 잡아 준다. */
  .pc-outer-panel-close.visible{ display: grid !important; }

  /* 28차: 원 40 -> 38, 표식은 '×' 문자(잉크 20x20, 원의 50%) 대신 SVG 로.
     문자는 잉크가 baseline 위쪽에 몰려 있어(ascent 21 / descent -1) 아무리
     가운데 정렬해도 위로 치우쳤다. SVG 는 path 가 (7,7) 대칭이라 정확히 중앙. */
  .pc-outer-panel-close{
    width: 38px;
    height: 38px;
    box-shadow: 0 6px 16px rgba(0,0,0,.15);
  }
  .pc-outer-panel-close svg{
    display: block;   /* inline 기본값이면 baseline 여백이 생겨 또 치우친다 */
    width: 14px;
    height: 14px;
  }

  /* 바깥 X 는 position:fixed 라 패널 밖에 있어도 잘린다. 패널의 transform 이
     containing block 을 만들기 때문. 그래서 overflow 는 visible 로 둔다. */
  .detail-panel,
  .portfolio-detail-panel,
  .company-detail-panel{ overflow: visible; }
}