/* 캐릭터 목록은 공용 그리드를, 상세는 왼쪽 3:4 프로필과 오른쪽 blog-post를 쓴다. */
/* 목록 창은 그림/영화와 같은 공용 window-content 여백을 쓰고, 자체 패딩을
   가진 상세 화면만 바깥 패딩을 제거한다. */
.window[data-root="character"]:not([data-main="1"]) .window-content {
  padding: 0;
  /* container: profile-detail / size — profile.css에서 user/character 공통 정의 */
}

/* 사용자 프로필과 동일하게 상세 창을 좁게 리사이즈할 수 있게 한다. */
.window[data-root="character"]:not([data-main="1"]) {
  min-width: 360px;
  min-height: 360px;
}

/* 상세 창도 사용자 프로필과 같은 유동 너비 공통 레이아웃을 쓴다. */

.character-card-avatar-wrap {
  display: flex;
  justify-content: center;
  padding: 10px 0 6px;
}

.character-card-avatar {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background-color: rgba(128, 128, 128, .18);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  border: 1px solid rgba(var(--system-c-rgb), var(--system-c-alpha));
}

.character-avatar-empty svg {
  width: 60%;
  height: 60%;
}

.character-profile-card-meta {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--system-c-desc-color) !important;
}

.character-profile-relations {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 10px;
  border-radius: 14px;
  background: rgba(var(--system-c-content-rgb), var(--system-c-content-alpha)) !important;
  border: 0 !important;
}

.character-profile-relations-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  padding-left: 5px;
}

.character-profile-relations-head > strong {
  font-weight: 400;
}

.character-relation-edit-actions:not([hidden]) {
  display: flex;
  gap: 4px;
}

.character-relation-profiles {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* 이동 가능한 행은 content-input-box 대신 자체 배경(System C 컨텐츠)을 쓴다. */
.character-relation-edit-row {
  display: grid;
  grid-template-columns: 24px 34px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 3px;
  min-height: 38px;
  padding: 3px 2px 3px 5px;
  border-radius: 5px;
  background: rgba(var(--system-c-content-rgb), var(--system-c-content-alpha)) !important;
}

.character-relation-edit-row .character-relation-profile-avatar {
  width: 34px;
}

.character-relation-edit-row .character-relation-profile-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.character-relation-edit-row .character-relation-profile-text > strong {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.character-relation-edit-row [data-character-relation-add],
.character-relation-edit-row [data-character-relation-remove] {
  min-width: 40px;
  padding-inline: 4px;
}

/* 빈 상태의 "추가" 버튼: 다른 행과 같은 높이, 글자는 정가운데. */
.character-relation-add-row {
  min-height: 38px;
  padding: 4px 8px;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.character-relation-search-dialog {
  width: min(560px, calc(100% - 24px));
  max-height: calc(100% - 24px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.character-relation-search-head,
.character-relation-search-head > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
}

/* [hidden]이 위 display:flex보다 특이도가 낮아 무시되던 문제 — 캐릭터 선택 상태에서
   검색 도구줄을 확실히 숨긴다. */
[data-character-relation-search-tools][hidden] {
  display: none !important;
}

.character-relation-search-list {
  max-height: 310px;
  overflow-y: auto;
}

/* normal-button 으로 hover 효과를 받되 테두리는 그리지 않는다. */
.character-relation-search-row {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 5px;
  border: 0 !important;
  border-radius: 7px;
  text-align: left;
}

.character-relation-search-row .character-relation-profile-avatar {
  width: 46px;
}

.character-relation-search-row > span,
.character-relation-search-row > span > span,
.character-relation-search-selected > span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.character-relation-search-selected:not([hidden]) {
  display: grid;
  justify-items: center;
  gap: 8px;
}

.character-relation-search-selected-actions {
  display: flex;
  gap: 6px;
}

.character-relation-search-avatar {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background-position: center;
  background-size: cover;
}

.character-relation-profile {
  min-width: 0;
  display: grid;
  grid-template-columns: 10cqi minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 4px;
  border: 0 !important;
  text-align: left;
}

.character-relation-profile-text {
  min-width: 0;
}

.character-relation-profile-text > span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.character-relation-profile-label {
  color: var(--system-c-desc-color) !important;
}

.character-relation-profile-avatar {
  width: 10cqi;
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background-position: center;
  background-size: cover;
  overflow: hidden;
}

.character-color-groups {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-self: end;
  gap: 0;
  margin: 0;
}

.profile-character-extra {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.character-profile-card-relations {
  display: none;
  margin-top: 8px;
  text-align: left;
}

.character-profile-card-relations-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}

.character-profile-card-relations-head > strong,
.character-profile-card-relations > strong {
  color: var(--system-c-title-color) !important;
  font-weight: 400;
}

.character-relation-empty {
  color: var(--system-c-desc-color) !important;
  font-size: .9em;
}

.character-profile-card-relation-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin-top: 5px;
}

.character-profile-card-relation {
  flex: 0 0 auto;
  width: 10cqi;
  aspect-ratio: 1;
  padding: 0;
  border: 0 !important;
}

/* 공통 좁은 창 규칙(레이아웃 접힘·카드 전폭)은 profile.css @container profile-detail.
   여기는 캐릭터 전용(관계 표시 전환, 색 그룹 등)만. */
@container profile-detail (max-width: 840px) {
  /* 접힌 화면의 캐릭터 상세: 관계는 카드 안 컴팩트 버전(라벨+아바타 가로)만.
     사이드바 관계 섹션은 숨기고 수정은 팝업으로 — 단 이 전환은 상세 창
     ([data-character-uuid]) 안에서만. 관계 수정 팝업의 window-content도
     profile-detail 컨테이너라, 스코프를 안 좁히면 팝업 내용까지 숨겨진다. */
  .window[data-character-uuid] .character-profile-relations { display: none; }

  /* 수정 모드일 때만: 사이드바 관계 섹션을 상세 창 위 중앙 팝업으로 띄운다
     (별도 창을 새로 열지 않는다 — 화면이 넓어지면 그대로 사이드바 인라인
     수정 모드로 돌아간다). */
  .window[data-character-uuid] .character-profile-relations.is-editing {
    display: flex;
    flex-direction: column;
    position: fixed;
    z-index: 60;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(92cqw, 420px);
    max-height: 82cqh;
    overflow-y: auto;
    /* 창 배경(alpha < 1 테마)이 딤을 통과해 보이지 않게 불투명하게 깐 뒤
       테마 색을 덧입힌다. 딤은 별도 요소 없이 box-shadow 스프레드로 —
       .window(overflow:hidden, backdrop-filter)가 상세 창 안으로 클리핑한다. */
    background:
      linear-gradient(rgba(var(--system-c-content-rgb), var(--system-c-content-alpha)),
                      rgba(var(--system-c-content-rgb), var(--system-c-content-alpha))),
      rgb(var(--system-c-content-rgb)) !important;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .38), 0 16px 40px -10px rgba(var(--system-c-font-rgb), .55);
  }

  .window[data-character-uuid] .character-profile-card-relations { display: block; }

  .character-profile-card-relation-list {
    margin-top: 0;
    justify-content: flex-start;
  }

  .character-profile-card-relation,
  .character-relation-profile-avatar {
    width: 7cqi;
  }

  .character-color-groups {
    grid-column: 2;
  }

  .character-editor-main {
    flex-direction: column;
  }
}

.character-color-square {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 0;
}

/* 이름(+공개범위 아이콘)은 첫 줄, 설명(bio)은 다음 줄로 내린다. */
.character-card-title-row {
  flex-wrap: wrap;
}

.character-card-title-row .grid-cell-title,
.character-card-inline-meta {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.character-card-title-row .grid-cell-title {
  flex: 0 1 auto;
}

.character-card-inline-meta {
  flex: 1 1 100%;
  margin-top: 1px;
}

.character-card-post-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.character-tab-toolbar {
  display: flex;
  margin-bottom: 10px;
}

/* 이미지 탭 */
.character-images-grid {
  margin-top: 0;
}

.character-image-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.character-image-thumb {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  object-fit: cover;
}

/* 셀 좌하단 출처 라벨 — sys-c 컨텐츠 테마(.window-tooltip과 같은 레시피). */
.character-image-source-label {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 1px 6px;
  font-size: 11px;
  line-height: 1.5;
  border-radius: 6px;
  pointer-events: none;
  color: var(--system-c-title-color);
  background: rgba(var(--system-c-content-rgb), var(--system-c-content-alpha));
  border: 1px solid rgba(var(--system-c-content-border-rgb), var(--system-c-content-border-alpha));
}

/* 상세 이미지 탭 그리드 — 사용자 활동 탭(.activity-list)과 완전히 같은
   마스너리 방식: 한 줄 최대 5개(그 이상 폭이 남으면 썸네일이 넓어짐),
   각 이미지는 원본 비율 그대로 유지하고 세로 위치는 JS가 grid-row 스팬을
   계산해 채운다(layoutCharacterImagesGrid) — CSS 다단(column-*)은 이미지가
   적고 비율 편차가 크면 뒤쪽 열을 비워서 아마리 3장 케이스가 깨졌다. */
[data-character-images-grid] {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fill, minmax(min(max(230px, calc((100% - 12px) / 5)), 100%), 1fr));
  grid-auto-flow: row dense;
  grid-auto-rows: 1px;
  align-items: start;
  gap: 3px;
}

[data-character-images-grid] > .character-image-cell {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
}

[data-character-images-grid] > .character-image-cell:hover {
  background: transparent !important;
  box-shadow: none !important;
}

[data-character-images-grid] .character-image-thumb {
  display: block;
  height: auto;
  aspect-ratio: auto;
  border-radius: 0;
}

/* '이미지 연결하기' 모달 — 그리드/체크박스 자체는 목록 창 선택모드 CSS
   (.grid-cell.is-selectable 등, homepage.css)를 그대로 재사용하고, 여기선
   취소/연결 버튼을 스크롤을 따라오는 하단 고정 바로 둔다. */
.character-image-link-actions {
  position: sticky;
  bottom: 0;
  z-index: 6;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 8px 0 0;
  padding: 10px;
  border-radius: 10px;
  background: rgba(var(--system-c-content-rgb), var(--system-c-content-alpha));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Shift+클릭 범위 선택 시 이미지/텍스트가 드래그 선택되지 않게. */
[data-character-image-link-grid] {
  user-select: none;
  -webkit-user-select: none;
}

/* 소유자 "이미지 관리" 팝업 */
.character-owner-image-manager {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 100%;
}
.character-owner-image-toolbar {
  position: sticky;
  top: 0;
  z-index: 3;
  gap: 6px;
  padding-bottom: 6px;
  background: rgba(var(--system-c-content-rgb), var(--system-c-content-alpha));
}
.character-owner-image-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(max(150px, calc((100% - 16px) / 5)), 100%), 1fr));
  gap: 4px;
  align-content: start;
  user-select: none;
  -webkit-user-select: none;
}
.character-owner-image-cell {
  position: relative;
  padding: 0;
  border: 2px solid transparent !important;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: transparent !important;
}
.character-owner-image-cell.is-linked { border-color: var(--focus-color) !important; }
.character-owner-image-cell.is-checked { outline: 2px solid var(--focus-color); outline-offset: -2px; }
.character-owner-image-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
.character-owner-image-check {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  margin: 0;
  pointer-events: none; /* 셀 클릭이 선택을 처리 — 체크박스는 표시만 */
  accent-color: var(--focus-color);
}
.character-owner-image-linked-badge {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.5;
  pointer-events: none;
  color: var(--system-c-title-color);
  background: rgba(var(--system-c-content-rgb), var(--system-c-content-alpha));
  border: 1px solid rgba(var(--system-c-content-border-rgb), var(--system-c-content-border-alpha));
}

.character-manager-search,
.character-manager-list {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
}

.character-manager-row,
.character-manager-select-row,
.character-relation-target {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  border: 0 !important;
}

.character-manager-row {
  justify-content: space-between;
  padding: 8px;
}

.character-manager-select-row {
  align-items: flex-start;
}

.character-manager-select-row > article,
.character-manager-select-row > details {
  flex: 1 1 auto;
  border: 0 !important;
}

.character-manager-entry > summary {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px;
}

.character-manager-entry > .post-markdown-body {
  padding: 10px;
}

/* 탭 헤더 고정은 profile.css .profile-tabs / .profile-activity-panes 규칙. */

/* 캐릭터 탭 버튼은 탭 개수와 무관하게 최대 1/3 폭 — 이미지 탭 하나만 남아도
   전폭으로 늘어나지 않고 좌측 1/3만 채우며 가장 먼저 표시된다. */
.window[data-root="character"] .profile-tabs .bg-region-tab {
  flex: 1 1 0;
  max-width: 33.333%;
}

/* 이미지 탭 연결/해제 버튼 — 스크롤되는 이미지 팬 안에서 상단에 고정되고 상시
   표시된다. height:0 이라 그리드 레이아웃은 건드리지 않는다. 권한 없으면 hidden. */
.character-images-admin-actions {
  position: sticky;
  top: 6px;
  z-index: 5;
  height: 0;
  overflow: visible;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding-right: 6px;
}
/* 이미지 위에서도 버튼이 떠 보이게 그림자만 살짝. */
.character-images-admin-actions > button {
  box-shadow: 0 1px 6px -2px rgba(var(--system-c-font-rgb), .4);
}
.character-images-admin-actions[hidden] {
  display: none;
}
/* 좁은 창: 이미지 팬이 .window-content와 함께 스크롤되고 탭은 sticky top:0 이므로
   버튼은 탭 높이만큼 내려 붙는다(넓은 창은 팬이 독립 스크롤이라 top:6px). */
@container profile-detail (max-width: 840px) {
  .character-images-admin-actions { top: 36px; }
}

.character-image-unlink-actions {
  position: sticky;
  right: 12px;
  bottom: 12px;
  z-index: 5;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}

.character-image-unlink-actions > button {
  pointer-events: auto;
}

.character-timeline-manager {
  display: grid;
  min-height: 100%;
  grid-template-columns: minmax(240px, 42%) minmax(0, 1fr);
  gap: 20px;
}

/* 왼쪽 세로 라인 색은 .focus-border 유틸리티(광역 * {border-color …!important}에
   지지 않도록) — 여기선 굵기/모양만. */
.character-timeline-track {
  position: relative;
  min-height: 520px;
  cursor: crosshair;
  margin-left: 26px;
  border-left: 4px solid;
}

.character-timeline-node {
  position: absolute;
  left: -10px;
  display: flex;
  align-items: center;
  width: calc(100% + 10px);
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  transform: translateY(-50%);
}

.character-timeline-node::before {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--focus-color);
  content: '';
}

.character-timeline-node > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.character-timeline-preview {
  min-width: 0;
  overflow: auto;
  padding: 12px;
  background: rgba(var(--system-c-content-rgb), var(--system-c-content-alpha));
}

/* 타임라인 탭 */
.character-timeline-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.character-entry-card,
.character-timeline-entry {
  padding: 10px 15px;
  border-radius: 5px;
  box-shadow: 0 0 5px -2px rgba(0, 0, 0, .14);
  background: rgba(var(--system-c-content-rgb), var(--system-c-content-alpha)) !important;
  border: 2px solid rgba(var(--system-c-content-border-rgb), var(--system-c-content-border-alpha)) !important;
}

.character-entry-card .post-markdown-body {
  margin-top: 8px;
}

.character-entry-date-input {
  flex: 0 1 180px;
  min-width: 120px;
}

.character-timeline-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.character-timeline-title {
  margin: 0;
  font-size: 13px;
  flex: 1 1 auto;
  min-width: 0;
}

.character-timeline-admin-actions:not([hidden]) {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

/* 인라인 타임라인/관계 추가·수정 폼 — post-editor-form류와 달리 별도 창 없이
   탭 목록 안에 바로 끼워 넣는 작은 폼. */
.character-inline-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 15px;
  border-radius: 5px;
  border: 1px dashed rgba(128, 128, 128, .4);
}

.character-inline-form textarea {
  min-height: 60px;
  resize: vertical;
}

.character-inline-form-actions {
  display: flex;
  gap: 8px;
}

.character-editor-top-row {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  background: rgba(var(--system-c-content-rgb), var(--system-c-content-alpha)) !important;
}

.character-editor-head-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

.character-editor-top-row h2 {
  margin: 0;
}

.character-editor-main {
  display: grid;
  gap: 14px;
  padding: 14px;
}

.character-inline-profile-form{width:100%;}

.character-editor-profile-card {
  width: 100%;
}

.character-editor-fields-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.character-editor-profile-card .profile-name-row {
  width: 100%;
  gap: 8px;
}

.character-color-editor {
  width: 100%;
  margin-bottom: 0;
}

.character-color-rows {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* 이동 가능한 행은 content-input-box 대신 자체 배경(System C 컨텐츠)을 쓴다. */
.character-color-row {
  display: grid;
  grid-template-columns: 24px 23px minmax(50px, 1fr) auto auto;
  align-items: center;
  gap: 0;
  width: 100%;
  box-sizing: border-box;
  min-height: 30px;
  padding: 2px 2px 2px 8px;
  border-radius: 5px;
  background: rgba(var(--system-c-content-rgb), var(--system-c-content-alpha)) !important;
  user-select: none;
}

.character-color-drag-handle {
  width: 24px;
  height: 27px;
  padding: 0;
  border: 0;
  color: var(--system-c-desc-color);
  cursor: grab;
  touch-action: none;
}

.character-color-drag-handle:active {
  cursor: grabbing;
}

.character-color-row [data-character-color-add-after],
.character-color-row [data-character-color-remove] {
  min-width: 40px;
  padding-inline: 4px;
}

/* 빈 상태의 "추가" 버튼: 다른 행과 같은 높이, 글자는 정가운데. */
.character-color-add-row {
  width: 100%;
  min-height: 30px;
  padding: 4px 8px;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.character-color-row.is-drag-source { display: none; }

.character-color-input {
  width: 23px !important;
  height: 27px;
  aspect-ratio: 1;
  padding: 0;
  border: 0!important;
  border-radius: 0;
  background: none;
  cursor: pointer;
}

.character-color-code-input {
  width: 90px;
  border: 0!important;
  outline: 0!important;
  background: transparent!important;
  box-shadow: none!important;
  font-family: monospace;
}

.character-color-input:hover,
.character-color-input:focus,
.character-color-code-input:hover,
.character-color-code-input:focus {
  border: 0!important;
  outline: 0!important;
  box-shadow: none!important;
}