/* organizer.css의 기본 body 규칙(display:flex + align-items:center + padding:3rem 1.5rem,
   원래 auth-card 단독 폼 페이지용)이 크루 페이지(mypage-page 클래스 없음)에도 그대로
   걸려서 두 가지 문제가 있었다.
   1) body 자체가 좌우 24px/위아래 48px 패딩을 가져 position:sticky인 header가 그
      패딩만큼 밀려 들어가고 폭도 좁아져 풀블리드가 아니게 됐다(다른 페이지 헤더와
      폭/위치가 달라짐).
   2) body가 display:flex(align-items:center)라 그 자식인 main이 뷰포트에 맞춰 채우는
      일반 블록이 아니라 내용에 맞춰 줄어드는(shrink-to-fit) 플렉스 아이템이 돼버려서,
      가로 스크롤을 의도한 .crew-view-tab-nav(flex-nowrap) 내부 콘텐츠의 실제(max-content)
      너비만큼 main 자체가 넓어지고, 그 결과 뷰포트보다 넓게 렌더링됐다(overflow-x:hidden으로
      가려뒀던 증상이 바로 이거다).
   다른 일반 페이지(ssotoktok-feed.html 등)처럼 body는 그냥 block이고, 좌우 여백은
   main 자체 padding(styles.css의 기본값)만으로 처리하도록 되돌린다. */
body {
  display: block;
  padding: 0;
}

/* 쏘-크루 "일정"/"정산" 메뉴 전용 스타일. 캘린더/보드는 이 프로젝트에 기존 관례가 없어
   새로 만든다 — 나머지(카드/뱃지/탭/버튼/모달)는 organizer.css 기존 클래스를 그대로 쓴다.
   .category-card는 admin.css에만 정의돼 있고 이 페이지들은 admin.css를 링크하지 않으므로
   (admin 전용 스타일을 통째로 끌어오면 안 맞으므로) 여기 직접 옮겨 둔다(admin.css:1151 동일). */
.category-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
}

/* 폭 상한은 따로 두지 않고 본문(main, --content-max-width)을 그대로 따른다. 예전엔
   1100px 상한이 있었지만 본문이 960px라 실제로는 걸린 적이 없었다 — 본문을 넓히자
   이 틀만 1100에서 멈춰 헤더·푸터와 오른쪽 끝선이 어긋나게 됐다. */
.crew-meetups-shell {
  width: 100%;
}

/* .hint는 여러 crew/ 화면에서 두루 쓰이는데 organizer.css에는 특정 부모(.field,
   .ocr-floating-bar) 밑에서만 스타일이 정의돼 있어, 그 밖(제목 아래 크루명·역할 보조
   텍스트 등)에서는 그냥 검은 기본 글자로 보였다. 여기서 기본값을 깔아 어디서든 톤이
   같게 한다(색/크기는 organizer.css의 기존 .field .hint 값과 동일). */
.hint {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.78rem;
}

/* --- 정산 공개 리포트: 대시보드 카드 / 영수증 갤러리 --- */

.ledger-dashboard-value {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0.3rem 0 0;
}

/* 정산 장부 탭 위 요약 카드 — 모든 탭에서 늘 보이므로 폰에서는 세 칸을 한 줄에 좁게 둔다
   (세로로 쌓이면 탭 메뉴가 화면 아래로 밀린다). */
#ledgerDashboardCards {
  margin-bottom: 0.75rem;
}

/* 월 선택칸(정산 장부 기준월·월 마감, 정산 공개 리포트 조회월) — 한 줄 전체로 늘어나지 않게 폭을 고정한다
   (2026-09-14 사용자 지적: PC에서 너무 길게 나옴). 폰에서는 화면 폭을 넘지 않는다. */
.name-check-row input[type='month'] {
  flex: 0 0 auto;
  width: 11rem;
  max-width: 100%;
}

.name-check-row:has(> input[type='month']) {
  align-items: center;
}

@media (max-width: 640px) {
  #ledgerDashboardCards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
  }

  #ledgerDashboardCards .crew-board-column {
    min-width: 0;
    padding: 0.5rem 0.45rem;
    gap: 0.2rem;
  }

  #ledgerDashboardCards .crew-board-column-title {
    font-size: 0.72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #ledgerDashboardCards .ledger-dashboard-value {
    font-size: 1rem;
    margin: 0;
    overflow-wrap: anywhere;
  }
}

.crew-receipt-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
}

.crew-receipt-thumb {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem;
  background: var(--surface);
  cursor: pointer;
}

.crew-receipt-thumb img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--bg);
}

.crew-receipt-thumb .crew-receipt-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.crew-receipt-lightbox-panel {
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
}

.crew-receipt-lightbox-panel img {
  max-width: 100%;
  display: block;
  margin: 0 auto 1rem;
}

.crew-header-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* display:flex를 명시한 클래스는 브라우저 기본 [hidden] 규칙을 덮어써버리므로(organizer.css의
   .name-check-row[hidden] 등과 같은 이유) 이 페이지에서 새로 hidden 토글하는 클래스마다
   명시적으로 되돌려야 한다. */
.crew-picker-row[hidden],
.name-check-row[hidden],
.crew-filter-row[hidden],
.crew-member-role-badge[hidden] {
  display: none;
}

/* --- 쏘-크루 탐색(discover.html) --- */

/* "+크루 검색" 필터(#filterRow) — .name-check-row/.field는 기본 flex-wrap:nowrap이라
   좁은 화면에서 종목/성격/지역 3개 필드가 한 줄에 눌려찌그러진다(성격 버튼그룹 글자가
   세로로 쪼개져 보임). 이 필터 영역에서만 줄바꿈을 허용해 필드가 세로로 쌓이게 한다. */
@media (max-width: 640px) {
  #filterRow > .name-check-row {
    flex-wrap: wrap;
  }

  #filterRow > .name-check-row > .field {
    flex: 1 1 100%;
    min-width: 0;
  }

  #filterModeGroup {
    flex-wrap: wrap;
  }
}

.crew-discover-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.crew-discover-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.crew-discover-card-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.crew-discover-name {
  margin: 0;
  font-size: 1rem;
}

.crew-discover-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg);
}

.crew-discover-thumb-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.crew-discover-tags,
.crew-discover-meta {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.crew-discover-join-btn {
  margin-top: 0.4rem;
}

.crew-picker-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* 헤더 우측 액션 행(크루 선택기 + "+ 일정 만들기") — .submit-btn 기본 margin-top이
   같은 줄의 select/label과 높이가 안 맞아 보이게 하므로 이 컨텍스트에서만 지운다. */
.crew-header-row > .name-check-row {
  align-items: center;
  margin-top: 0;
}

/* 제목 줄에서 [크루 홈으로]가 다음 줄로 내려가면 아래 부제목과 붙어(겹쳐) 보였다 — 부제목 위에 여백을 둔다.
   0.6rem으로는 다른 규칙의 음수 여백과 상쇄돼 실제 간격이 3px뿐이라(폰 실측) 넉넉히 준다. */
.crew-header-row .subtitle {
  margin-top: 1.1rem;
}

/* [+ 공지 작성]·[+ 게시물 작성] 버튼이 바로 아래 목록 카드에 붙어 있었다. */
#createNoticeBtn,
#createFeedPostBtn {
  margin-bottom: 0.9rem;
}

/* 공지·게시물 상세의 [← 목록으로]가 바로 아래 본문 카드에 붙어 있었다. */
#noticeBackBtn,
#feedBackBtn {
  margin-bottom: 0.75rem;
}

/* 공지 상세의 [문구 복사] 줄과 [수정·삭제·고정] 줄이 붙어 있었다. */
#noticeDetailActions {
  margin-top: 0.75rem;
}

.crew-header-row > .name-check-row .submit-btn {
  margin-top: 0;
}

/* discover.html "내 크루 보기"(.header-btn)와 "+ 새 크루 생성"(.submit-btn)은 두 클래스의
   padding/font-size가 서로 달라 높이가 안 맞았다 — 이 두 버튼만 같은 높이로 맞춘다. */
#myCrewsToggleBtn,
#createCrewOpenBtn {
  height: 2.25rem;
  padding-top: 0;
  padding-bottom: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.crew-picker-row select {
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}

/* 화면 안의 보조 탭(가로 스크롤 + 밑줄) — "일정별 결제/참석"의 다가오는/지난 일정 탭과 ledger.html 탭이 쓴다.
   크루 화면의 메인 메뉴는 2026-09-14부터 아래 "크루 메뉴"(.crew-nav, 버튼 + 드롭다운 + 운영진 띠)로 바뀌었다. */
.crew-view-tab-nav {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  gap: 1.25rem;
  border-bottom: 1px solid var(--border);
  /* overflow-x:auto가 걸리면 overflow-y도 암묵적으로 auto가 돼서, 탭 배지(.ssotalk-unread-badge)의
     top:-0.3rem 오프셋이 이 컨테이너의 스크롤 영역 위쪽에서 잘린다. 위쪽 공백을 margin 대신
     padding으로 옮겨 배지가 잘리지 않는 여유를 컨테이너 안쪽에 확보한다(위 요소와의 전체 간격은
     margin-top을 그만큼 줄여서 동일하게 유지). */
  padding-top: 0.4rem;
  padding-bottom: 0;
  margin: 0.35rem 0 0;
  scrollbar-width: thin;
}

.crew-view-tab-nav::-webkit-scrollbar {
  height: 4px;
}

.crew-view-tab-nav .tab-btn {
  position: relative;
  flex: 0 0 auto;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0.6rem 0.1rem;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.crew-view-tab-nav .tab-btn:hover {
  color: var(--text);
  background: none;
}

.crew-view-tab-nav .tab-btn.active {
  background: none;
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

/* --- 캘린더 --- */

.crew-calendar-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.crew-applied-filter-row {
  margin-bottom: 0.75rem;
}

.crew-cal-label {
  font-weight: 600;
  min-width: 7rem;
  text-align: center;
  display: inline-block;
}

.crew-calendar-grid {
  display: grid;
  /* 1fr은 칸 안 글자(일정 칩)보다 좁아지지 않아 폰에서 7칸이 화면 밖으로 밀렸다(칸당 116px) —
     minmax(0, 1fr)로 칸이 화면 폭에 맞춰 줄고, 칩 글자는 말줄임(…)으로 잘린다. */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.crew-cal-dow {
  background: var(--bg);
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.4rem 0;
  color: var(--text-muted);
}

.crew-cal-cell {
  min-width: 0;
  background: var(--surface);
  min-height: 5.5rem;
  padding: 0.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  cursor: pointer;
}

.crew-cal-cell.crew-cal-cell-week {
  min-height: 9rem;
}

.crew-cal-cell.outside-month {
  background: var(--bg);
  opacity: 0.55;
}

.crew-cal-cell.today {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.crew-cal-cell-date {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
}

.crew-cal-chip {
  font-size: 0.72rem;
  padding: 0.1rem 0.35rem;
  border-radius: 6px;
  color: #1a1a1a;
  background: #e9ecef;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crew-day-detail {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--border);
}

/* 유형별 색상(캘린더 칩 + 유형 뱃지 공용) */
.crew-type-정기런 { background: #2F6FED; }
.crew-type-번개런 { background: #E0A100; }
.crew-type-LSD { background: #4CAF7D; }
.crew-type-인터벌 { background: #E0574A; }
.crew-type-트랙 { background: #7B5EC7; }
.crew-type-트레일 { background: #8A5A32; }
.crew-type-대회 { background: #D6336C; }
.crew-type-행사 { background: #17A2B8; }
.crew-type-뒷풀이 { background: #6C757D; }

/* 내가 참가 신청한 일정은 유형 색상과 무관하게 캘린더에서 파란색으로 강조한다(유형별
   색상 규칙보다 아래에 둬서 동일 특정성에서도 이 규칙이 우선 적용되게 한다). */
.crew-cal-chip-applied {
  background: #2F6FED;
  color: #fff;
}

.crew-type-chip {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  color: #fff;
  background: #6C757D;
  font-size: 0.75rem;
}

/* --- 진행 상태 뱃지 색(F5) --- */
.crew-status-draft { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }
.crew-status-canceled { background: var(--error-bg); color: var(--error-text); }
.crew-status-needs_attendance { background: #FFF3CD; color: #8A6100; }
.crew-status-completed { background: var(--success-bg); color: var(--success-text); }
.crew-status-closed { background: var(--error-bg); color: var(--error-text); }
.crew-status-full { background: #FDE7E0; color: #B24A1E; }
.crew-status-open { background: #FFF6D8; color: #8A6D00; }

/* --- 리스트/카드 --- */

.crew-meetup-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.crew-meetup-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.9rem 1rem;
}

/* 본인이 신청한 일정에 한해 붙는 개인화 말풍선(미납/완납/환불대기) — "참여" 메뉴 카드 전용. */
.crew-meetup-payment-bubble {
  position: absolute;
  top: -0.55rem;
  right: 0.7rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
.crew-meetup-payment-bubble-unpaid {
  background: #e0263f;
}
.crew-meetup-payment-bubble-paid {
  background: #2f9e44;
}
.crew-meetup-payment-bubble-refund-pending {
  background: #868e96;
}

/* .crew-meetup-card-head는 justify-content:space-between으로 자식 2개(유형 칩 / 오른쪽)만
 * 가정한다 — 새 배지들을 상태 배지 옆에 붙이려면 이 래퍼로 묶어 하나의 오른쪽 그룹으로
 * 만들어야 한다(그냥 사이에 끼워 넣으면 3분할되어 상태 배지와 떨어져 보인다). */
.ops-card-head-right {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

/* "운영 > 일정별 결제/참석 관리" 카드(접힌 상태)에 붙는 처리 필요 건수 배지 — 카드를
 * 펼치지 않아도 그 일정 안에 미납/취소요청/참석미처리가 있는지 한눈에 보이게 한다.
 * .badge(공용 pill)에 색상만 얹는다. */
.ops-card-badge-unpaid {
  background: #ffe3e3;
  color: #c92a2a;
}
.ops-card-badge-cancel {
  background: #ffe8cc;
  color: #d9480f;
}
.ops-card-badge-attendance {
  background: #e9ecef;
  color: #495057;
}

.crew-meetup-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.4rem;
}

.crew-meetup-title {
  margin: 0.2rem 0;
  font-size: 1rem;
}

.crew-meetup-meta {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.crew-meetup-notice {
  margin: 0.35rem 0;
  font-size: 0.85rem;
}

.crew-meetup-expand {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--border);
  font-size: 0.85rem;
}

.crew-meetup-expand[hidden] {
  display: none;
}

.crew-participant-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
}

.crew-participant-row:last-child {
  border-bottom: none;
}

/* --- 보드(진행상태/유형별) --- */

.crew-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
  align-items: start;
}

.crew-board-column {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.crew-board-column-title {
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
}

.crew-board-column .crew-meetup-card {
  padding: 0.6rem 0.7rem;
}

/* --- 모달 폼 --- */

.crew-modal-panel {
  max-width: 36rem;
}

.crew-modal-panel .field {
  margin-bottom: 0.75rem;
  flex: 1;
}

.crew-modal-panel .name-check-row {
  align-items: flex-start;
}

/* --- 멤버 목록 --- */

.crew-member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.crew-member-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.75rem;
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
}

.crew-member-info {
  flex: 1;
  min-width: 0;
}

.crew-member-name-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
  flex-wrap: wrap;
}

.crew-member-name {
  font-weight: 600;
}

.crew-member-role-badge {
  background: var(--status-before-bg);
  color: var(--status-before-text);
}

.crew-danger-btn {
  border-color: var(--error-text);
  color: var(--error-text);
}

/* --- 공지 --- */

.crew-notice-pinned-badge {
  background: var(--status-open-bg);
  color: var(--status-open-text);
}

.crew-notice-pinned-badge[hidden] {
  display: none;
}

/* --- 오픈톡 --- */

/* 오픈톡은 PC/모바일 모두 모달 — 뒤 페이지는 body.crew-opentalk-open으로 스크롤을 막고,
   채팅 목록은 끝에 닿아도 스크롤이 바깥으로 이어지지 않게(overscroll-behavior: contain) 한다. */
body.crew-opentalk-open {
  overflow: hidden;
}

.crew-opentalk-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  overscroll-behavior: contain;
}

.crew-opentalk-modal[hidden] {
  display: none;
}

.crew-opentalk-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  touch-action: none;
}

.crew-opentalk-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(520px, calc(100vw - 2rem));
  height: min(80vh, 720px);
  min-height: 320px;
  box-sizing: border-box;
  padding: 0.75rem;
  border-radius: 14px;
  background: var(--surface, #fff);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.crew-opentalk-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.crew-opentalk-header h2 {
  margin: 0;
  font-size: 1.05rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crew-opentalk-close {
  flex-shrink: 0;
  padding: 0 0.35rem;
  border: 0;
  background: none;
  color: inherit;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}

/* 입력창은 둥근 필드 + 쏘톡 로고 파란색(--brand-sso) 진한 테두리, 전송은 알약 버튼(2026-09-14 사용자 요청). */
.crew-opentalk-input-row {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.crew-opentalk-input-row input {
  flex: 1;
  min-width: 0;
  height: 2.9rem;
  box-sizing: border-box;
  padding: 0 1.1rem;
  border: 2px solid var(--brand-sso, #2f6fed);
  border-radius: 999px;
  background: var(--surface, #fff);
  color: var(--text);
  /* 16px 미만이면 아이폰이 입력할 때 화면을 확대해 버린다. */
  font-size: 1rem;
  outline: none;
  box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.12);
}

.crew-opentalk-input-row input:focus {
  box-shadow: 0 0 0 4px rgba(47, 111, 237, 0.25);
}

.crew-opentalk-input-row input::placeholder {
  color: var(--text-muted);
}

.crew-opentalk-input-row #opentalkSendBtn {
  flex-shrink: 0;
  height: 2.9rem;
  padding: 0 1.3rem;
  border: 0;
  border-radius: 999px;
  background: var(--brand-sso, #2f6fed);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}

.crew-opentalk-input-row #opentalkSendBtn:hover {
  filter: brightness(0.92);
}

.crew-opentalk-input-row #opentalkSendBtn:disabled {
  opacity: 0.6;
  cursor: default;
}

@media (max-width: 640px) {
  .crew-opentalk-modal {
    align-items: stretch;
  }

  .crew-opentalk-shell {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    border-radius: 0;
    padding: 0.75rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom));
  }
}

.crew-opentalk-messages {
  flex: 1;
  min-height: 0;
  overscroll-behavior: contain;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 0.5rem;
  background: var(--bg);
}

.crew-opentalk-row {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
}

.crew-opentalk-row.own {
  flex-direction: row-reverse;
}

.crew-opentalk-bubble {
  max-width: 70%;
  /* 안에 든 카드·사진이 말풍선 폭을 밀어내지 못하게(flex 항목 기본 최소 폭은 내용 폭이다). */
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.4rem 0.6rem;
  position: relative;
}

.crew-opentalk-row.own .crew-opentalk-bubble {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.crew-opentalk-meta {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-bottom: 0.15rem;
}

.crew-opentalk-row.own .crew-opentalk-meta {
  color: rgba(255, 255, 255, 0.85);
}

.crew-opentalk-content {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.9rem;
}

/* 내 말풍선은 파란 바탕이라 링크를 흰 글자로. */
.crew-opentalk-row.own .chat-link {
  color: #fff;
}

/* 오픈톡 사진(2026-09-15) — 1장은 크게, 여러 장은 2열 격자. 누르면 크게보기. */
.crew-opentalk-images {
  display: grid;
  gap: 3px;
  margin: 0.2rem 0;
  width: 15rem;
  max-width: 100%;
}

.crew-opentalk-images.count-2,
.crew-opentalk-images.count-3,
.crew-opentalk-images.count-4 {
  grid-template-columns: 1fr 1fr;
}

.crew-opentalk-image-btn {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.06);
  cursor: zoom-in;
  aspect-ratio: 1;
}

.crew-opentalk-images.count-1 .crew-opentalk-image-btn {
  aspect-ratio: auto;
  max-height: 18rem;
}

.crew-opentalk-image-btn img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.crew-opentalk-image-expired {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 4.5rem;
  padding: 0.4rem;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.08);
  font-size: 0.72rem;
  text-align: center;
  opacity: 0.8;
}

.crew-opentalk-photo-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.9rem;
  height: 2.9rem;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface, #fff);
  color: var(--brand-sso, #2f6fed);
  cursor: pointer;
}

.crew-opentalk-photo-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.crew-opentalk-attach-preview {
  flex-shrink: 0;
  display: flex;
  gap: 0.4rem;
  padding: 0.4rem 0.1rem 0.5rem;
  overflow-x: auto;
}

.crew-opentalk-attach-item {
  position: relative;
  flex-shrink: 0;
  width: 4rem;
  height: 4rem;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.06);
}

.crew-opentalk-attach-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.crew-opentalk-attach-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 1.3rem;
  height: 1.3rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 0.9rem;
  line-height: 1.3rem;
  cursor: pointer;
}

.crew-opentalk-deleted {
  font-style: italic;
  opacity: 0.7;
}

.crew-opentalk-time {
  font-size: 0.66rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

.crew-opentalk-row.own .crew-opentalk-time {
  color: rgba(255, 255, 255, 0.75);
}

.crew-opentalk-delete-btn {
  display: block;
  margin-top: 0.25rem;
  background: none;
  border: none;
  padding: 0;
  font-size: 0.68rem;
  color: inherit;
  opacity: 0.7;
  text-decoration: underline;
  cursor: pointer;
}

/* --- 크루 메뉴(2026-09-14) -------------------------------------------------------------
   일반 메뉴: 아이콘 알약 버튼 + 성격별 드롭다운(일정/크루). 운영진 메뉴: 아래 어두운 띠로 분리.
   모바일은 버튼을 3칸 격자로 두 줄에 담고, 드롭다운은 버튼 줄 아래 전체 폭으로 펼친다
   (가로 스크롤 줄 안에 드롭다운을 두면 메뉴가 잘리므로 스크롤 없이 격자로 배치한다). */

.crew-nav {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.crew-nav [hidden] {
  display: none !important;
}

.crew-nav [data-icon] {
  display: inline-flex;
  flex-shrink: 0;
}

.crew-nav-main {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.crew-nav .crew-nav-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface, #fff);
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}

.crew-nav .crew-nav-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--surface, #fff);
}

.crew-nav .crew-nav-btn.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.crew-nav-current {
  max-width: 7.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

.crew-nav-current:not(:empty)::before {
  content: '· ';
}

.crew-nav-chevron {
  transition: transform 0.15s ease;
}

.crew-nav-dropdown-btn[aria-expanded='true'] .crew-nav-chevron,
.crew-staff-toggle[aria-expanded='true'] .crew-nav-chevron {
  transform: rotate(180deg);
}

.crew-nav-dropdown {
  position: relative;
}

.crew-nav-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  min-width: 13rem;
  padding: 0.35rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface, #fff);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.crew-nav .crew-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  margin: 0;
  padding: 0.65rem 0.75rem;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.crew-nav .crew-nav-item:hover {
  background: var(--bg);
}

.crew-nav .crew-nav-item.active {
  background: #eff6ff;
  color: var(--accent);
  font-weight: 700;
}

.crew-nav-item .ssotalk-unread-badge,
.crew-staff-toggle .ssotalk-unread-badge,
.crew-staff-item .ssotalk-unread-badge {
  position: static;
  margin-left: auto;
}

/* 운영진 메뉴 — 일반 메뉴와 확실히 다른 어두운 띠 */
.crew-staff-zone {
  border-radius: 14px;
  background: #1f2937;
  color: #f9fafb;
  overflow: hidden;
}

.crew-staff-toggle {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  margin: 0;
  padding: 0.75rem 1rem;
  border: 0;
  background: none;
  color: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.crew-staff-hint {
  color: #9ca3af;
  font-size: 0.76rem;
  font-weight: 500;
}

/* 제목·안내 뒤를 비워 배지와 화살표를 오른쪽 끝으로 민다. */
.crew-staff-hint {
  margin-right: auto;
}

.crew-staff-toggle.active .crew-staff-title {
  color: #fbbf24;
}

.crew-staff-menu {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.5rem;
  padding: 0 0.75rem 0.85rem;
}

.crew-nav .crew-staff-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: #f9fafb;
  font-size: 0.87rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.crew-nav .crew-staff-item:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.crew-nav .crew-staff-item.active {
  border-color: #fbbf24;
  background: #fbbf24;
  color: #1f2937;
}

@media (max-width: 640px) {
  .crew-nav-main {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .crew-nav .crew-nav-btn {
    width: 100%;
    padding: 0.6rem 0.35rem;
    font-size: 0.85rem;
  }

  /* 드롭다운 메뉴를 버튼 기준이 아니라 버튼 줄 전체 기준으로 펼친다. */
  .crew-nav-dropdown {
    position: static;
  }

  .crew-nav-menu {
    right: 0;
    min-width: 0;
  }

  .crew-nav-current,
  .crew-staff-hint {
    display: none;
  }

  .crew-staff-title {
    margin-right: auto;
  }

  .crew-staff-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- 쏘크루 화면 폰 최적화(2026-09-14) --------------------------------------------------
   크루 홈·정산 장부·정산 공개 리포트에서 폰 폭(640px 이하)일 때:
   1) 한 줄에 여러 칸을 늘어놓은 입력 줄(.name-check-row)은 칸마다 한 줄씩 쌓는다(날짜칸이 화면 밖으로 밀리던 문제).
   2) 보조 탭(.crew-view-tab-nav: 정산 장부 탭, 일정별 결제/참석의 다가오는/지난 탭)은 가로 스크롤 대신 알약 버튼으로 줄바꿈.
   3) 표(.schedules-table)는 responsiveTables.js가 붙인 data-label로 줄마다 "머리글: 값" 카드로 쌓는다. */
@media (max-width: 640px) {
  .crew-meetups-shell .name-check-row,
  #ledgerContentSection .name-check-row,
  .crew-report-shell .name-check-row {
    flex-wrap: wrap;
    align-items: flex-end;
  }

  .crew-meetups-shell .name-check-row > .field,
  #ledgerContentSection .name-check-row > .field {
    flex: 1 1 100%;
    min-width: 0;
  }

  .crew-meetups-shell .name-check-row input,
  .crew-meetups-shell .name-check-row select,
  #ledgerContentSection .name-check-row input,
  #ledgerContentSection .name-check-row select {
    width: 100%;
    max-width: 100% !important;
    min-width: 0;
    box-sizing: border-box;
  }

  .crew-view-tab-nav {
    flex-wrap: wrap;
    overflow: visible;
    gap: 0.4rem;
    padding: 0 0 0.75rem;
    margin: 0.35rem 0 1rem;
  }

  .crew-view-tab-nav .tab-btn {
    padding: 0.45rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface, #fff);
    color: var(--text);
    font-size: 0.84rem;
  }

  .crew-view-tab-nav .tab-btn.active {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
  }

  table.schedules-table[data-cards],
  table.schedules-table[data-cards] tbody,
  table.schedules-table[data-cards] tr,
  table.schedules-table[data-cards] td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  table.schedules-table[data-cards] {
    border: 0;
    background: none;
  }

  table.schedules-table[data-cards] thead {
    display: none;
  }

  table.schedules-table[data-cards] tr {
    margin-bottom: 0.6rem;
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface, #fff);
  }

  table.schedules-table[data-cards] td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.45rem 0;
    border-bottom: 1px dashed var(--border);
    text-align: right;
    overflow-wrap: anywhere;
  }

  table.schedules-table[data-cards] td:last-child {
    border-bottom: 0;
  }

  table.schedules-table[data-cards] td[data-label]::before {
    content: attr(data-label);
    flex-shrink: 0;
    max-width: 45%;
    color: var(--text-muted);
    font-size: 0.8rem;
    text-align: left;
  }

  /* 머리글이 빈 열(버튼 칸 등)과 여러 칸을 합친 안내 줄은 이름표 없이 한 줄로 */
  table.schedules-table[data-cards] td[data-label='']::before {
    content: none;
  }

  table.schedules-table[data-cards] td[data-label=''],
  table.schedules-table[data-cards] td[data-span] {
    justify-content: flex-end;
    text-align: left;
  }

  table.schedules-table[data-cards] td[data-span] {
    justify-content: flex-start;
  }

  table.schedules-table[data-cards] td input,
  table.schedules-table[data-cards] td select {
    min-width: 0;
    max-width: 60%;
  }
}