/*
 * 컬렉션 — collections/index(목록)와 collections/show(보드) 전용.
 *
 * 이 파일은 stylesheet_link_tag :app 이 모든 화면에 함께 싣습니다. 그래서 모든
 * 규칙이 .collections-page / .collection-board 안에서만 성립하도록 이름을 짓고,
 * body 를 건드리는 규칙은 :has() 로 잠급니다. 값은 전부 tokens.css 를 씁니다.
 *
 * 색 주의: --brand-pink(#b08a91)는 연한 와인이라 글자에 쓰면 대비가 모자랍니다.
 * 읽는 와인은 --brand-pink-strong(#6d4a51) 입니다. 연한 쪽은 채움·링에만 씁니다.
 */

/* ── 페이지 셸 ─────────────────────────────────────── */

/* application.css 의 html, body { height: 100% } 는 스크롤 페이지에서 방해가 됩니다. */
html body:has(.collections-page),
html body:has(.collection-board) {
  height: auto;
  min-height: 100%;
}

/* 종이 그라데이션은 칼럼이 아니라 지면(body)이 깔아야 합니다. 칼럼에 깔면 내용이
   짧을 때 칼럼이 끝나는 자리에 색 이음매가 보입니다. */
body:has(.collections-page),
body:has(.collection-board) {
  background: linear-gradient(180deg, var(--gray-50), var(--gray-100)) fixed;
  background-color: var(--surface-page);
}

/* 액션바 높이는 body 에 둡니다. 커스텀 속성은 아래로만 흐르므로 자식에 선언하면
   body 의 padding-bottom 이 이 값을 읽지 못합니다. */
body:has(.collection-board) {
  --collection-actions-height: 72px;

  padding-bottom: calc(var(--collection-actions-height) + env(safe-area-inset-bottom, 0px));
}

.collections-page,
.collection-board {
  --collection-gutter: 20px;
  --collection-column: 520px;

  position: relative;
  max-width: var(--collection-column);
  margin: 0 auto;
  padding-bottom: var(--space-8);
}

/* ── 목록 헤더 52px ────────────────────────────────── */

.collections-page__bar {
  position: sticky;
  z-index: var(--z-sticky);
  top: 0;
  display: grid;
  height: 52px;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  padding: 0 var(--space-2);
  border-bottom: 1px solid var(--border-default);
  background: var(--surface-veil);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 14px rgb(28 26 23 / 5%);
}

.collections-page__title {
  margin: 0;
  color: var(--gray-900);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  letter-spacing: 0.02em;
  text-align: center;
}

.collections-page__new {
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  color: var(--gray-900);
  background: none;
  cursor: pointer;
  place-items: center;
}

/* ── 검색줄 ───────────────────────────────────────── */

.collections-search {
  padding: var(--space-3) var(--collection-gutter) var(--space-1);
}

.collections-search__field {
  display: flex;
  height: 38px;
  gap: var(--space-2);
  align-items: center;
  padding: 0 14px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  color: var(--gray-500);
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
}

.collections-search__input {
  min-width: 0;
  flex: 1;
  border: 0;
  color: var(--gray-900);
  font-family: inherit;
  font-size: var(--text-xs);
  background: none;
}

.collections-search__input:focus {
  outline: none;
}

/* 검색창 기본 지우기 버튼은 종이 톤에서 튀어서 감춥니다. */
.collections-search__input::-webkit-search-cancel-button {
  display: none;
}

/* ── 목록 — 대화방 리스트 ──────────────────────────── */

.collections-list {
  display: block;
  padding: var(--space-2) var(--collection-gutter) var(--space-7);
}

.collections-row {
  display: grid;
  width: 100%;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid var(--border-default);
  color: var(--gray-900);
  font-family: inherit;
  text-align: left;
  background: none;
  cursor: pointer;
  grid-template-columns: 56px minmax(0, 1fr) auto;
}

.collections-row[hidden] {
  display: none;
}

a.collections-row {
  text-decoration: none;
}

a.collections-row:hover .collections-row__title {
  color: var(--brand-pink-strong);
}

.collections-row--new {
  color: var(--gray-500);
  border-bottom: 0;
  grid-template-columns: 56px minmax(0, 1fr);
}

/* 커버 — 첫 항목 사진 위에 사람/자물쇠 뱃지가 걸칩니다. */
.collections-row__cover {
  position: relative;
  display: block;
  width: 56px;
  height: 56px;
}

.collections-row__cover--new {
  display: grid;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-4);
  background: var(--surface-card);
  place-items: center;
}

.collections-row__thumb {
  display: block;
  overflow: hidden;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-4);
  background: var(--gray-200);
}

.collections-row__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.collections-row__thumb-fallback {
  display: grid;
  width: 100%;
  height: 100%;
  color: var(--gray-500);
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  place-items: center;
}

.collections-row__faces {
  position: absolute;
  right: -4px;
  bottom: -4px;
  display: flex;
}

.collections-row__faces .collections-avatar + .collections-avatar {
  margin-left: -7px;
}

.collections-row__lock {
  position: absolute;
  right: -4px;
  bottom: -4px;
  display: grid;
  width: 20px;
  height: 20px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  color: var(--gray-500);
  background: var(--surface-card);
  box-shadow: 0 0 0 2px var(--gray-50);
  place-items: center;
}

.collections-row__body {
  min-width: 0;
  color: var(--gray-500);
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
}

.collections-row__headline {
  display: flex;
  gap: var(--space-1);
  align-items: baseline;
}

.collections-row__title {
  overflow: hidden;
  color: var(--gray-900);
  font-size: var(--text-md);
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-body);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.collections-row__scale {
  flex: none;
  color: var(--gray-500);
  font-size: 10px;
  font-style: normal;
  font-weight: var(--weight-regular);
}

.collections-row__preview {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: var(--gray-500);
  font-size: 11.5px;
  font-style: normal;
  font-weight: var(--weight-regular);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.collections-row__aside {
  display: grid;
  gap: 5px;
  justify-items: end;
}

.collections-row__time {
  color: var(--gray-400);
  font-size: 10px;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

.collections-row__badge {
  display: grid;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  color: var(--gray-50);
  font-size: 9px;
  font-weight: var(--weight-label);
  font-variant-numeric: tabular-nums;
  background: var(--brand-pink-strong);
  place-items: center;
}

.collections-list__blank {
  margin: 0;
  padding: var(--space-7) 0;
  color: var(--gray-500);
  font-size: var(--text-xs);
  text-align: center;
}

/* ── 아바타 — 목록·보드 공용 ───────────────────────── */

.collections-avatar {
  display: grid;
  width: 28px;
  height: 28px;
  color: var(--gray-50);
  font-size: 10px;
  font-weight: var(--weight-label);
  border-radius: var(--radius-full);
  box-shadow: 0 0 0 2px var(--gray-50);
  place-items: center;
}

.collections-avatar--sm {
  width: 20px;
  height: 20px;
  font-size: 8px;
}

.collections-avatar--ink {
  background: var(--ink-gradient);
}

.collections-avatar--wine {
  background: var(--brand-pink-strong);
}

.collections-avatar--gray {
  background: var(--gray-500);
}

.collections-avatar--soft {
  background: var(--brand-pink);
}

/* ── 보드 헤더 56px ────────────────────────────────── */

.collection-board__bar {
  position: sticky;
  z-index: var(--z-sticky);
  top: 0;
  display: grid;
  height: 56px;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  padding: 0 var(--space-4) 0 var(--space-1);
  border-bottom: 1px solid var(--border-default);
  background: var(--surface-veil);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 14px rgb(28 26 23 / 5%);
}

.collection-board__back {
  display: grid;
  width: 44px;
  height: 44px;
  color: var(--gray-900);
  place-items: center;
}

.collection-board__heading {
  min-width: 0;
}

.collection-board__title {
  display: block;
  overflow: hidden;
  color: var(--gray-900);
  font-size: var(--text-md);
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-body);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.collection-board__scale {
  display: block;
  margin-top: 1px;
  color: var(--gray-500);
  font-size: 10px;
  font-style: normal;
}

.collection-board__people {
  display: flex;
  align-items: center;
}

.collection-board__people .collections-avatar + .collections-avatar {
  margin-left: -8px;
}

.collection-board__invite {
  display: grid;
  width: 28px;
  height: 28px;
  margin-left: var(--space-1);
  padding: 0;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-full);
  color: var(--gray-500);
  background: var(--surface-card);
  cursor: pointer;
  place-items: center;
}

/* ── 소개문 · 태그 ─────────────────────────────────── */

.collection-board__intro {
  padding: 18px var(--collection-gutter) 0;
}

.collection-board__lead {
  margin: 0;
  color: var(--gray-600);
  font-size: var(--text-xs);
  line-height: 1.8;
  word-break: keep-all;
}

.collection-board__tags {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
  margin: var(--space-2) 0 0;
}

.collection-board__tag {
  display: inline-flex;
  height: 24px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  color: var(--gray-600);
  font-size: 10px;
  font-weight: var(--weight-strong);
  background: var(--surface-card);
}

/* ── 정렬줄 ───────────────────────────────────────── */

.collection-board__sort {
  display: flex;
  align-items: baseline;
  padding: 18px var(--collection-gutter) var(--space-1);
}

.collection-board__count {
  color: var(--gray-500);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums;
}

.collection-board__order {
  margin-left: auto;
  color: var(--gray-500);
  font-size: var(--text-2xs);
  font-weight: var(--weight-strong);
  letter-spacing: 0.04em;
}

/* ── 공간 행 ──────────────────────────────────────── */

.collection-board__items {
  margin: 0;
  padding: 0 var(--collection-gutter) var(--space-4);
  list-style: none;
}

.collection-board__row {
  display: grid;
  gap: var(--space-1);
  align-items: center;
  border-top: 1px solid var(--border-default);
  grid-template-columns: minmax(0, 1fr) auto;
}

.collection-board__item {
  display: grid;
  min-width: 0;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  color: inherit;
  text-decoration: none;
  grid-template-columns: 56px minmax(0, 1fr) auto;
}

.collection-board__item:hover .collection-board__name {
  color: var(--brand-pink-strong);
}

.collection-board__thumb {
  display: block;
  overflow: hidden;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-3);
  background: var(--gray-200);
}

.collection-board__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.collection-board__thumb-fallback {
  display: grid;
  width: 100%;
  height: 100%;
  color: var(--gray-500);
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  place-items: center;
}

.collection-board__body {
  min-width: 0;
}

.collection-board__name-line {
  display: flex;
  gap: var(--space-1);
  align-items: center;
}

.collection-board__name {
  overflow: hidden;
  color: var(--gray-900);
  font-size: 13.5px;
  font-weight: var(--weight-strong);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 내가 마지막으로 본 뒤에 남이 담은 공간 */
.collection-board__new {
  display: block;
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: var(--radius-full);
  background: var(--brand-pink-strong);
}

.collection-board__meta {
  display: block;
  margin-top: 2px;
  color: var(--gray-500);
  font-size: 10.5px;
  font-style: normal;
}

.collection-board__memo {
  display: block;
  overflow: hidden;
  margin-top: var(--space-1);
  color: var(--gray-600);
  font-size: var(--text-2xs);
  font-style: normal;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.collection-board__aside {
  display: grid;
  gap: var(--space-1);
  justify-items: end;
}

.collection-board__time {
  color: var(--gray-400);
  font-size: 10px;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

/* button_to 가 감싸는 form 은 자리만 차지하지 않게 눕힙니다. */
.collection-board__remove-form {
  display: grid;
}

.collection-board__remove {
  display: grid;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  color: var(--gray-400);
  background: none;
  cursor: pointer;
  place-items: center;
}

.collection-board__remove:hover {
  color: var(--gray-900);
  background: var(--surface-sunken);
}

.collection-board__empty {
  padding: var(--space-9) var(--collection-gutter);
  text-align: center;
}

.collection-board__empty h2 {
  margin: 0;
  color: var(--gray-900);
  font-family: var(--font-serif);
  font-size: var(--text-base);
  font-weight: var(--weight-strong);
}

/* ── 하단 액션바 ──────────────────────────────────── */

.collection-board__actions {
  position: fixed;
  z-index: var(--z-header);
  bottom: 0;
  left: 50%;
  width: min(var(--collection-column, 520px), 100%);
  padding: var(--space-3) var(--collection-gutter) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-veil);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 -6px 20px rgb(28 26 23 / 7%);
  transform: translateX(-50%);
}

.collection-board__cta {
  display: inline-flex;
  width: 100%;
  height: 48px;
  gap: 7px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-full);
  color: var(--gray-50);
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  letter-spacing: 0.02em;
  background: var(--ink-gradient);
  box-shadow: var(--shadow-float);
  cursor: pointer;
}

/* ── 하단 시트 — 새 컬렉션 · 공간 담기 · 초대 ──────── */

/* 공용 탭바가 아직 z-index 2000 리터럴을 쓰고 있어(tokens.css 13장의 이관 목록),
   시트는 그 위로 올라와야 배경 딤이 탭바를 덮습니다. */
.collection-sheet {
  position: fixed;
  z-index: 3000;
  inset: 0;
}

.collection-sheet[hidden] {
  display: none;
}

.collection-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgb(28 26 23 / 40%);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.collection-sheet__panel {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  width: min(var(--collection-column, 520px), 100%);
  max-height: 84vh;
  flex-direction: column;
  padding: var(--space-2) var(--collection-gutter) calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  background: var(--surface-page);
  box-shadow: 0 -20px 50px rgb(28 26 23 / 30%);
  transform: translateX(-50%);
}

@media (prefers-reduced-motion: no-preference) {
  .collection-sheet__panel {
    animation: collection-sheet-rise var(--duration-base) var(--ease-standard);
  }
}

@keyframes collection-sheet-rise {
  from {
    transform: translate(-50%, 12%);
    opacity: 0;
  }

  to {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}

.collection-sheet__handle {
  width: 36px;
  height: 4px;
  flex: none;
  align-self: center;
  margin: var(--space-2) 0;
  border-radius: var(--radius-full);
  background: rgb(28 26 23 / 18%);
}

.collection-sheet__head {
  display: flex;
  flex: none;
  gap: var(--space-2);
  align-items: center;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-default);
}

.collection-sheet__title {
  color: var(--gray-900);
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: var(--weight-strong);
}

.collection-sheet__close {
  display: grid;
  width: 32px;
  height: 32px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  color: var(--gray-900);
  background: var(--surface-sunken);
  cursor: pointer;
  place-items: center;
}

/* ── 시트 안의 폼 ─────────────────────────────────── */

.collection-form,
.collection-add {
  display: flex;
  min-height: 0;
  flex-direction: column;
  padding-top: var(--space-4);
}

.collection-form__label {
  margin-bottom: var(--space-2);
  color: var(--gray-500);
  font-size: var(--text-2xs);
  font-weight: var(--weight-strong);
}

.collection-form__input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-3);
  color: var(--gray-900);
  font-family: inherit;
  font-size: var(--text-sm);
  background: var(--surface-card);
}

.collection-form__input:focus {
  border-color: var(--brand-pink);
  outline: none;
  box-shadow: var(--shadow-focus);
}

.collection-form__choices {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  grid-template-columns: repeat(2, 1fr);
}

.collection-form__label + .collection-form__input {
  margin-bottom: var(--space-4);
}

.collection-form__choice {
  display: flex;
  height: 44px;
  gap: var(--space-2);
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  color: var(--gray-600);
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  background: var(--surface-card);
  cursor: pointer;
}

.collection-form__choice:has(input:checked) {
  border-color: var(--gray-900);
  color: var(--gray-900);
}

.collection-form__choice input {
  accent-color: var(--brand-pink-strong);
}

.collection-form__hint {
  margin: 0 0 var(--space-4);
  color: var(--gray-500);
  font-size: var(--text-2xs);
  line-height: var(--leading-body);
  word-break: keep-all;
}

.collection-form__submit {
  width: 100%;
  height: 48px;
  border: 0;
  border-radius: var(--radius-full);
  color: var(--gray-50);
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  letter-spacing: 0.02em;
  background: var(--ink-gradient);
  box-shadow: var(--shadow-float);
  cursor: pointer;
}

/* ── 공간 담기 ────────────────────────────────────── */

.collection-sheet__panel--tall {
  height: 84vh;
}

.collection-add__results {
  overflow-y: auto;
  min-height: 0;
  flex: 1;
  margin: var(--space-3) 0;
  scrollbar-width: none;
}

.collection-add__results::-webkit-scrollbar {
  display: none;
}

.collection-add__result {
  display: grid;
  width: 100%;
  gap: 2px;
  padding: var(--space-3) var(--space-1);
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
  font-family: inherit;
  text-align: left;
  background: none;
  cursor: pointer;
}

.collection-add__result.is-chosen {
  background: var(--brand-pink-tint);
}

.collection-add__result.is-taken {
  cursor: default;
  opacity: 0.5;
}

.collection-add__result-name {
  color: var(--gray-900);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
}

.collection-add__result-meta {
  color: var(--gray-500);
  font-size: var(--text-2xs);
}

.collection-add__blank {
  margin: 0;
  padding: var(--space-6) 0;
  color: var(--gray-500);
  font-size: var(--text-xs);
  text-align: center;
}

.collection-add__chosen {
  display: grid;
  flex: none;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-default);
}

.collection-add__chosen[hidden] {
  display: none;
}

.collection-add__chosen-name {
  margin: 0;
  color: var(--gray-900);
  font-family: var(--font-serif);
  font-size: var(--text-md);
  font-weight: var(--weight-strong);
}

/* ── 초대 ─────────────────────────────────────────── */

.collection-invite__hint {
  margin: var(--space-4) 0 var(--space-3);
  color: var(--gray-500);
  font-size: var(--text-xs);
  line-height: var(--leading-body);
  word-break: keep-all;
}

.collection-invite__link {
  overflow-wrap: anywhere;
  margin: 0 0 var(--space-4);
  padding: var(--space-3) 14px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-3);
  color: var(--gray-600);
  font-size: var(--text-2xs);
  background: var(--surface-card);
}

.collection-invite__toast {
  margin: var(--space-3) 0 0;
  color: var(--brand-pink-strong);
  font-size: var(--text-2xs);
  text-align: center;
}

.collection-invite__toast[hidden] {
  display: none;
}

/* ── 하단 탭바가 뜨는 구간 ─────────────────────────── */

@media (max-width: 699px) {
  body.has-bottom-nav:has(.collection-board) {
    padding-bottom: calc(var(--collection-actions-height, 72px) + var(--bottom-nav-total));
  }

  body.has-bottom-nav .collection-board__actions {
    bottom: var(--bottom-nav-total);
    padding-bottom: var(--space-3);
  }
}