@charset "UTF-8";
/* ============================================================
   상세 페이지 공용 액션 — 공유 드롭다운 + 북마크 토글
   ------------------------------------------------------------
   기준: 공모 > 공모전 상세(viewDetailCptt.do) 의 히어로 액션.
   모든 상세 페이지가 같은 모양·동작을 쓰도록 이 파일을 공용으로 둔다.
   (건축사사무소 상세 / 건축인 상세 / 이후 추가되는 상세 화면)

   ※ 같은 규칙이 ps-competition.css 에도 있다(원본, 공모 메뉴 전용).
     공모 메뉴는 담당자가 달라 손대지 않았다. 나중에 협의되면
     ps-competition.css 에서 아래 블록을 빼고 이 파일로 일원화할 것.

   마크업은 /WEB-INF/views/viewmgmt/inc/psDetailActions.jsp 참조.
   ============================================================ */

/* 액션 묶음 — 히어로 우측 정렬 */
.ps-cptd-hero-icons { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* 아이콘 버튼 (공유·북마크 공통) */
.ps-cptd-hero-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; width: 36px; border: 1px solid var(--ps-ink);
  background: var(--ps-paper); color: var(--ps-ink); cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.ps-cptd-hero-iconbtn:hover { background: var(--ps-ink); color: var(--ps-paper); }
.ps-cptd-hero-iconbtn:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
.ps-cptd-hero-iconbtn:disabled { opacity: 0.5; cursor: default; }

/* 북마크 담김 — ink 반전 + 아이콘 채움 */
.ps-cptd-hero-iconbtn.is-marked { background: var(--ps-ink); color: var(--ps-paper); }
.ps-cptd-hero-iconbtn.is-marked svg { fill: var(--ps-paper); }

/* 공유 드롭다운 */
.ps-cptd-share { position: relative; }
.ps-cptd-share-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 11.5rem;
  background: var(--ps-paper); color: var(--ps-ink); border: 1px solid var(--ps-ink);
  box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.4);
}
.ps-cptd-share-panel[hidden] { display: none; }
.ps-cptd-share-item {
  display: flex; width: 100%; align-items: center; gap: 10px; text-align: left;
  background: none; border: 0; cursor: pointer; color: inherit;
  padding: 10px 12px; font-size: 13px; font-weight: 600;
  text-decoration: none; 
  transition: background 140ms ease, color 140ms ease;
}
.ps-cptd-share-item:hover { background: var(--ps-ink); color: var(--ps-paper); text-decoration: none; }
.ps-cptd-share-item:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: -2px; }
.ps-cptd-share-item .dot { width: 12px; height: 12px; flex: 0 0 auto; border-radius: 9999px; }
/* 노란 배경(카카오)은 흰 패널에서 경계가 안 보여 얇은 링을 준다 */
.ps-cptd-share-item .dot.has-ring { box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.15); }
/* 인스타그램 PC 안내('링크 복사됨 — 인스타에 붙여넣기')가 두 줄로 접히지 않게 한다.
   패널이 잠깐 넓어지지만 right:0 기준이라 왼쪽으로만 늘어난다 */
.ps-cptd-share-item .txt { white-space: nowrap; }