/* 공유 기록 모달 (modal-shared.html / modals/shared.js) */

/* 사용자/기념일/메뉴/본문 네 블록 모두 캐릭터 상세의 "관계"란과 같은 컨텐츠
   카드(.character-profile-relations, character.css)를 쓴다 — 이 레포에 공용
   "컨텐츠 블록" 클래스가 따로 없어서, 같은 표면을 다시 선언하는 대신 그 컴포넌트를
   그대로 재사용한다. 그래서 사이드바 구분선 대신 카드 사이 간격으로 나눈다. */
/* 창 본문의 기본 패딩(14px)은 지우고 여백은 .shared-record가 직접 준다 — 그
   패딩이 남아 있으면 좁은 창 drawer/backdrop이 본문 영역을 다 못 덮어 가장자리에
   안 덮인 띠가 그대로 보인다(아래 inset:-10px가 .shared-record 패딩과 짝). */
.window-content:has(> .shared-record) { padding: 0; }
.shared-record { height: 100%; overflow: hidden; padding: 10px; box-sizing: border-box; }
.shared-layout { position: relative; display: flex; height: 100%; gap: 10px; }
.shared-content { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; gap: 8px; }
/* 프로필 카드의 아바타/이름 여백이 20cqi·10cqi라 컨테이너 쿼리 조상이 필요하다
   (사용자/캐릭터 모달은 .profile-sidebar가 그 역할). 여긴 사이드바가 맡는다.
   폭은 .profile-detail-layout의 grid-template-columns:minmax(280px,320px)
   (profile.css)와 맞춘다 — 예전엔 236px로 더 좁아서 같은 cqi 기준 아바타/이름이
   사용자·캐릭터 프로필 카드보다 눈에 띄게 작게 보였다. */
.shared-side {
  width: 320px; flex: 0 0 320px; height: 100%; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
  container-type: inline-size;
}
.shared-main { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; padding: 14px 16px; }

/* 네이티브 스크롤바는 폭을 차지하고(사이드바 카드 폭을 밀어냄) 모서리 곡선을
   가로질러 사이드바 밖으로 삐져나와 보인다 — 창 본문·다이어리 캘린더 등과 같이
   숨기고 UI.bindWindowOverlayScrollbar 오버레이만 쓴다(shared.js). */
.shared-side,
.shared-main,
.shared-movie-results { scrollbar-width: none; }
.shared-side::-webkit-scrollbar,
.shared-main::-webkit-scrollbar,
.shared-movie-results::-webkit-scrollbar { display: none; }

/* 좁은 창(모바일 등): 본문이 화면 전체를 쓰고, 사이드바는 본문 위 ☰ 바를 누르거나
   좌우 스와이프로 여는 overlay drawer가 된다. 클래스 토글(is-nav-small /
   is-nav-drawer-open)은 UI.bindNavDrawer가, 위치·전환은 여기가 담당한다
   — 환경설정 앱의 .settings-shell.is-nav-small 규칙과 같은 구조.
   inset의 -10px는 .shared-record의 padding과 짝이다(콘텐츠 영역 전체를 덮도록). */
.shared-topbar,
.shared-nav-backdrop { display: none; }

.shared-layout.is-nav-small .shared-topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 2px;
}
.shared-nav-toggle { display: inline-flex; align-items: center; justify-content: center; padding: 4px; cursor: pointer; }
.shared-nav-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.shared-layout.is-nav-small .shared-side {
  position: absolute;
  inset: -10px auto -10px -10px;
  height: auto;
  z-index: 5;
  width: 260px;
  max-width: 80%;
  padding: 10px;
  border-radius: 0 10px 10px 0;
  background: rgba(var(--system-c-rgb), var(--system-c-alpha));
  box-shadow: 4px 0 18px rgba(0, 0, 0, .25);
  transform: translateX(-100%);
  transition: transform .18s ease;
}
.shared-layout.is-nav-small.is-nav-drawer-open .shared-side { transform: translateX(0); }
.shared-layout.is-nav-small.is-nav-drawer-open .shared-nav-backdrop {
  display: block;
  position: absolute;
  inset: -10px;
  z-index: 4;
  margin: 0;
  border: 0;
  padding: 0;
  background: rgba(0, 0, 0, .32);
  cursor: pointer;
}

/* 배경/아이콘/이름 카드 — 구조와 스타일은 profile.css의 .profile-* 가 전부
   담당하고, 여기서는 아바타 자리에 들어가는 메뉴 아이콘 크기만 맞춘다
   (프로필은 사진이라 background-size:cover, 여기는 SVG/이미지 아이콘). */
.shared-record-card { flex: 0 0 auto; }
.shared-record-card .profile-avatar-img svg { width: 55%; height: 55%; }
.shared-record-card .profile-avatar-img img { width: 100%; height: 100%; object-fit: cover; }

.shared-mini-btn {
  font-size: 11px; padding: 1px 6px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--system-b-color, rgba(0, 0, 0, .2)); background: transparent; color: inherit;
}

/* 소속 사용자 행 — 관계란의 .character-relation-profile 그대로. 그쪽 아바타
   폭이 10cqi인데 이 칩은 사이드바와 후기 작성자 헤더 두 곳에 나오므로,
   .character-relation-search-row와 같은 방식으로 고정 폭만 덮어쓴다. */
.shared-member { grid-template-columns: 28px minmax(0, 1fr); }
.shared-member .character-relation-profile-avatar { width: 28px; }
.shared-member.is-profile-ref { cursor: pointer; }

.shared-anniv-list { display: flex; flex-direction: column; gap: 4px; }
.shared-anniv { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.shared-anniv-dday { font-weight: 700; font-size: 11px; min-width: 40px; }
.shared-anniv-label { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.shared-anniv-label small { opacity: .5; font-size: 10px; }

/* 항목 자체는 환경설정 앱 셸의 .settings-nav-btn normal-button을 그대로 쓴다
   (hover/is-active/글자색 전부 공용). 여기서는 후기 하위 항목 들여쓰기만. */
.shared-nav { display: flex; flex-direction: column; gap: 2px; }
.shared-nav-item.is-sub { padding-left: 20px; }
.shared-nav-divider { height: 1px; background: var(--system-b-color, rgba(0, 0, 0, .12)); margin: 4px 0; }
.shared-nav-group { font-size: 11px; opacity: .6; padding: 2px 8px; }
/* 페어 메뉴의 타임라인/채팅/백업 — 아직 기능 없음, 눌러도 "준비중" 안내만. */
.shared-nav-item.is-disabled { opacity: .45; cursor: not-allowed; }

/* 캘린더 */
.shared-cal-head { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 8px; }
.shared-cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}
.shared-cal-wd { text-align: center; font-size: 11px; opacity: .6; padding: 2px 0; }
.shared-cal-cell {
  min-height: 62px; border: 1px solid var(--system-b-color, rgba(0, 0, 0, .1));
  border-radius: 5px; padding: 3px; display: flex; flex-direction: column; gap: 2px;
}
.shared-cal-cell.is-empty { border-color: transparent; }
.shared-cal-num { font-size: 11px; opacity: .7; }
.shared-cal-mark {
  font-size: 10px; background: var(--system-a-color, #6a8caf); color: #fff;
  border-radius: 4px; padding: 0 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 후기 */
.shared-review-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
/* 카드는 .grid-cell(그림/영화후기/캐릭터 공용)이 그린다 — 사이드바 때문에
   본문이 좁아 열 최소폭만 좁힌다. */
.shared-review-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.shared-review-meta { font-size: 11px; opacity: .6; }

.shared-back { background: none; border: none; color: inherit; cursor: pointer; opacity: .7; font-size: 12px; margin-bottom: 8px; }
.shared-review-detail-head { display: flex; gap: 12px; margin-bottom: 12px; }
.shared-review-detail-thumb { width: 96px; border-radius: 6px; object-fit: cover; }
.shared-review-detail-head h3 { margin: 0 0 4px; font-size: 15px; }
.shared-review-posts { display: flex; flex-direction: column; gap: 12px; }
.shared-review-post { border: 1px solid var(--system-b-color, rgba(0, 0, 0, .12)); border-radius: 8px; padding: 10px; }
.shared-review-post header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.shared-review-post-actions { display: flex; gap: 4px; }
.shared-review-body { font-size: 13px; line-height: 1.6; }
.shared-review-body img { max-width: 100%; border-radius: 6px; }
.shared-review-ref { display: inline-block; margin-top: 6px; font-size: 12px; }
.shared-movie-results { display: flex; flex-direction: column; gap: 3px; max-height: 160px; overflow-y: auto; margin: 4px 0; }
.shared-movie-result { text-align: left; font-size: 12px; padding: 4px 6px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: inherit; cursor: pointer; }
.shared-movie-result.is-selected { border-color: var(--system-a-color, #6a8caf); }

/* 페어 — 셀 안의 두 프로필은 캐릭터 모달의 .character-relation-profile
   (character.css)을 그대로 쓴다. 그쪽 아바타 폭이 10cqi라 컨테이너 쿼리
   조상이 필요한데 여기엔 없으므로, .character-relation-search-row와 같은
   방식으로 고정 폭만 덮어쓴다. */
.shared-pair-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.shared-pair-cell {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; padding: 10px;
  border: 1px solid var(--system-b-color, rgba(0, 0, 0, .12)); border-radius: 8px;
}
.shared-pair-cell .character-relation-profile { grid-template-columns: 44px minmax(0, 1fr); }
.shared-pair-cell .character-relation-profile-avatar { width: 44px; }
.shared-pair-x { opacity: .4; }

/* 채팅(페어 메뉴 전용) — OWNER는 단일 그룹채팅 로그, CHARACTER는 스레드 미리보기
   목록 + 상세(스레드도 같은 로그+작성창 레이아웃). 아바타는 사이드바 멤버 칩과
   같은 .character-relation-profile-avatar 재사용. */
.shared-chat { display: flex; flex-direction: column; height: 100%; gap: 8px; }
.shared-chat-log { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 2px; }
.shared-chat-msg { display: flex; align-items: flex-start; gap: 8px; }
.shared-chat-msg .character-relation-profile-avatar { width: 28px; flex: 0 0 28px; }
.shared-chat-msg-body { flex: 1; min-width: 0; }
.shared-chat-msg-meta { display: flex; align-items: baseline; gap: 6px; font-size: 11px; opacity: .6; }
.shared-chat-msg-time { font-size: 10px; }
.shared-chat-msg-content { font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.shared-chat-msg.is-mine { flex-direction: row-reverse; text-align: right; }
.shared-chat-msg.is-mine .shared-chat-msg-meta { justify-content: flex-end; }
.shared-chat-msg-actions { display: flex; gap: 4px; flex: 0 0 auto; align-self: flex-start; }
/* 인라인 수정(startInlineEdit) — 본문 div가 textarea+저장/취소로 바뀐다. */
.shared-chat-msg-content textarea { width: 100%; box-sizing: border-box; resize: vertical; font: inherit; }
.shared-chat-edit-actions { display: flex; gap: 4px; margin-top: 4px; }
.shared-chat-compose { flex: 0 0 auto; display: flex; gap: 6px; align-items: flex-end; }
.shared-chat-compose textarea { flex: 1; resize: none; }

.shared-chat-thread-list { display: flex; flex-direction: column; gap: 6px; }
.shared-chat-thread-item {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 8px;
  padding: 8px; border: 1px solid var(--system-b-color, rgba(0, 0, 0, .12)); border-radius: 8px;
  background: transparent; color: inherit; cursor: pointer; text-align: left;
}
.shared-chat-thread-item .character-relation-profile-avatar { width: 32px; }
.shared-chat-thread-text { display: flex; flex-direction: column; min-width: 0; }
.shared-chat-thread-name { font-size: 13px; font-weight: 600; }
.shared-chat-thread-preview { font-size: 12px; opacity: .7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shared-chat-thread-meta { font-size: 11px; opacity: .5; white-space: nowrap; }
.shared-chat-thread-detail { display: flex; flex-direction: column; height: 100%; gap: 8px; }
.shared-chat-thread-op { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--system-b-color, rgba(0, 0, 0, .12)); }
.shared-chat-thread-op .character-relation-profile-avatar { width: 32px; }
.shared-chat-thread-op .shared-chat-thread-text { flex: 1; }
.shared-chat-thread-op [data-thread-delete] { flex: 0 0 auto; }