/* ============================================================
   집테리어 지도 상세 패널 흐름 -- 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[hidden]{ display: none !important; }

/* 앞 화면이 있을 때만 뒤로가 뜬다. 모바일에서는 그때 패널 안 X 를 감춰
   컨트롤이 하나만 남게 한다(PC 는 아래에서 안쪽 X 를 전부 감춘다). */
/* 10-22 집테관리-030: 왼쪽 목록에서 연 상세(data-opened-from-list)도 앞 화면이 있으므로 뒤로(「← 목록」)를 띄운다 */
.portfolio-detail-panel:not([data-opened-from-company="true"]):not([data-opened-from-list="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,
.portfolio-detail-panel[data-opened-from-list="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: 769px){

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

  /* 10-22 집테관리-033: 왼쪽 목록(시공사례 검색 결과 · MY 관심목록 등)에서 연 상세는 목록을 덮지 않고 그 오른쪽 「2차 화면 자리」에.
     --zp-list-right = zp-views 가 연 순간 잰 목록 판 오른쪽 끝(px). 목록이 옆에 보이므로 「← 목록」은 숨기고 바깥 × 로 닫는다. */
  .app:not(.panel-open) .portfolio-detail-panel[data-opened-from-list="true"]{ left: var(--zp-list-right, var(--zp-pane-w, 400px)) !important; }
  .portfolio-detail-panel[data-opened-from-list="true"] #portfolioDetailBack{ display: none !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;
    /* 2026-09-11 2단 폭 통일: 예전엔 min(540px, …) 로 2단 칸인데 폭만 달랐다.
       업체에서 연 포트폴리오(400)가 위에 얹히면 뒤의 업체상세가 140px
       튀어나왔다. 1단·2단 폭 동일 규칙에 맞춘다. */
    width: 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; }
}

/* ============================================================
   터치 기기에서 hover 잔상 방지 — 2026-09-10 모바일 세션
   ------------------------------------------------------------
   손가락에는 커서가 없는데 :hover 규칙이 그대로 살아 있으면,
   탭한 뒤 배경색이 남아 버튼이 계속 눌린 것처럼 보인다.
   마우스가 있는 기기(hover: hover)에서만 적용되게 감싼다 —
   데스크톱 동작은 그대로이고 터치 기기에서만 효과가 빠진다.
   ※ .is-active 같은 선택 상태는 옮기지 않았다(터치에서도 필요).
   ============================================================ */
@media (hover: hover) {
  .zp-panel-back:hover{ border-color: #98b4aa; color: var(--ink); }
}

/* 집테관리-053 10-22(김정훈 팀장 15:57 「맨 좌측 업체 소개 아래 포폴을 상세 보기하면 업체 소개 자리에서 뜸 → 우측 2차 화면 자리에」):
   업체 정보에서 연 시공사례는 업체 정보 칸 위에 얹지 않고 그 오른쪽 칸에 연다(업체 소개 · 포폴 목록이 옆에 그대로 보임).
   업체 정보가 맨 왼쪽이면 두 번째 자리 · 1단이 열려 업체가 두 번째 자리면 세 번째 자리(1240px 이상 — 좁은 창은 지금처럼 같은 칸).
   바깥 × 는 위에 보이는(시공사례) 창부터 닫으므로 닫으면 업체 정보가 그대로 남는다. 휴대폰은 화면 하나라 그대로. */
@media (min-width: 769px){
  .app:not(.panel-open) .portfolio-detail-panel[data-opened-from-company="true"]{ left: var(--panel-width) !important; }
}
@media (min-width: 1240px){
  .app.panel-open .portfolio-detail-panel[data-opened-from-company="true"]{ left: calc(var(--panel-width) * 2) !important; }
}

/* 디자인-023 10-23(📮 김정훈-62 · 김정훈 팀장 10:29 「인테리어업체 첫 화면 목록은 1번 자리 그대로 · 업체 소개는 오른쪽 2번 자리에」):
   왼쪽 판(인테리어업체 · 우리집시공사례 아래 시공 업체 · MY 관심 업체)에서 연 업체 소개는 판을 덮지 않고 그 오른쪽 2번 자리에(디자인-016 · 집테관리-033 과 같은 규칙).
   app.js openCompanyDetail 이 목록 길일 때만 #app.zp-co-beside-list + --zp-co-list-right(연 순간 잰 판 오른쪽 끝)를 붙임 · 지도 · 묶음 목록 길은 지금 그대로.
   그 업체에서 연 시공사례는 업체 오른쪽 3번 자리(1240px 이상 · 화면 밖으로 안 나가게) · 좁은 창은 업체 칸 위(집테관리-053 과 같은 짝). 휴대폰 그대로 */
@media (min-width: 769px){
  .app.zp-co-beside-list:not(.panel-open) .company-detail-panel{ left: var(--zp-co-list-right, var(--zp-pane-w, 400px)); }
  .app.zp-co-beside-list:not(.panel-open) .portfolio-detail-panel[data-opened-from-company="true"]{ left: var(--zp-co-list-right, var(--zp-pane-w, 400px)) !important; }
}
@media (min-width: 1240px){
  .app.zp-co-beside-list:not(.panel-open) .portfolio-detail-panel[data-opened-from-company="true"]{
    left: min(calc(var(--zp-co-list-right, var(--zp-pane-w, 400px)) + var(--zp-pane-w, 400px)), calc(100vw - var(--zp-pane-w, 400px))) !important;
  }
}