/* ==========================================================================
   페이지 골격 — 모든 화면이 똑같이 생긴 이유

   어느 페이지를 열어도 순서와 크기가 같습니다.

     .page
       .pagetitle     제목 · 부제 · 주 동작        높이 고정
       .toolrow       건수 · 필터 · 정렬           높이 고정 (둘 다 비면 생략)
       .page__body    표 / 카드 / 폼 / 분할        나머지 전부

   화면을 만드는 쪽에서 직접 div 를 짜지 않고 빌더 함수만 부릅니다.
   그래야 화면을 새로 추가해도 크기가 어긋나지 않습니다.
   ========================================================================== */

.page {
  display: flex; flex-direction: column;
  gap: var(--sp-5);
  min-width: 0;
}
/* 본문 안의 덩어리끼리는 늘 같은 간격을 둡니다 */
.page__body {
  display: flex; flex-direction: column;
  gap: var(--sp-6);
  min-width: 0;
}

/* ------------------------------------------------------- 머리 고정
   목록이 길어도 제목과 주 동작 버튼은 늘 보입니다.
   구성원 104명 중 아래쪽에서 사람을 고른 뒤 "복사" 를 누르려고
   맨 위까지 다시 올라가는 일이 없게 하려는 것입니다.               */
.page__top {
  position: sticky;
  top: var(--top-h);
  z-index: 20;
  display: flex; flex-direction: column; gap: var(--sp-5);
  padding-top: var(--content-py);
  margin-top: calc(var(--content-py) * -1);
  padding-bottom: var(--sp-4);
  background: var(--bg);
}
/* 고정된 머리와 본문 사이에 경계를 둡니다 — 겹쳐 보이지 않게 */
.page__top::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--border);
}
.page__top .pagetitle { border-bottom: 0; padding-bottom: 0; }

/* ------------------------------------------------------------ 페이지 머리 */
.pagetitle {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-6); flex-wrap: wrap;
  min-height: 44px;
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--border);
}
.pagetitle__text { min-width: 0; }
.pagetitle__h {
  font-size: var(--fs-xl); font-weight: var(--fw-mid);
  letter-spacing: -.01em; line-height: var(--lh-tight);
}
.pagetitle__sub {
  font-size: var(--fs-sm); color: var(--text-3); margin-top: var(--sp-1);
}
.pagetitle__act {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  flex: 0 0 auto;
}

/* ------------------------------------------------------------ 도구줄
   검색·필터는 왼쪽, 정렬·보기는 오른쪽. 어느 화면에서나 같은 자리입니다. */
.toolrow {
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--sp-4); flex-wrap: wrap;
  min-height: var(--ctl-h);
}
.toolrow__left {
  margin-right: auto; display: flex; align-items: center;
  gap: var(--sp-4); flex-wrap: wrap; min-width: 0;
}
/* 필터는 접히고, 정렬은 한 줄로 붙어 있습니다 */
.sortbar {
  display: flex; align-items: center; gap: var(--sp-3);
  flex: 0 0 auto; flex-wrap: nowrap;
}
.sortbar .select { max-width: 170px; }

/* --------------------------------------------------------------- 구역 */
.section { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }

.sectionhead {
  display: flex; align-items: center; gap: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border-2);
}
.sectionhead__title {
  font-size: var(--fs-lg); font-weight: var(--fw-bold); min-width: 0;
}

.group { display: flex; flex-direction: column; gap: var(--sp-5); }

/* ----------------------------------------------------------- 패널 · 블록
   설정처럼 폼이 들어가는 화면은 전부 이 상자 하나만 씁니다.              */
.panel, .block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: var(--card-p);
  display: flex; flex-direction: column; gap: var(--sp-5);
  min-width: 0;
}


/* --------------------------------------------------------------- 카드 격자 */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: var(--sp-5);
  align-items: stretch;
}

.card {
  position: relative;
  display: flex; flex-direction: column;
  min-width: 0;
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow);
  transition: border-color .12s, box-shadow .12s;
}
.card:hover { border-color: var(--accent); box-shadow: var(--shadow-h); }
.card.is-pending { opacity: .72; }
.card.is-pending:hover { border-color: var(--border); box-shadow: var(--shadow); }

.card__top {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-4); min-width: 0;
}
.card__fav {
  position: relative; z-index: 2;
  margin-left: auto; flex: 0 0 24px;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: var(--radius-s);
  color: var(--text-3); cursor: pointer;
}
.card__fav:hover { background: var(--border-2); color: var(--text); }
.card__fav[aria-pressed='true'] { color: #eab308; }
.card__fav svg { width: var(--icon-sm); height: var(--icon-sm); }

.card__title {
  font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: 1.35;
  min-height: calc(1.35em * 2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.card__link::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius-l); }

.card__desc {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm); color: var(--text-2); line-height: var(--lh-body);
  min-height: calc(1.5em * 2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.card__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-top: var(--sp-4); min-width: 0;
}
.card__foot {
  display: flex; align-items: center; gap: var(--sp-4);
  margin-top: var(--sp-4); padding-top: var(--sp-4);
  border-top: 1px solid var(--border-2);
  min-width: 0;
}
.card__host {
  font-size: var(--fs-xs); color: var(--text-3);
  flex: 0 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-align: right;
}

.caps { display: flex; gap: var(--sp-2); flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }
.cap {
  font-size: var(--fs-xs); color: var(--text-2);
  padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-s);
  background: var(--surface-2); white-space: nowrap;
}
.cap--edit, .cap--create, .cap--delete {
  color: var(--accent); background: var(--accent-bg); font-weight: var(--fw-mid);
}

/* ------------------------------------------------------------ 비어 있을 때
   빈 화면도 같은 크기로 — 페이지마다 높이가 널뛰지 않게 합니다. */
.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-2);
  min-height: 200px; padding: var(--sp-8) var(--sp-6); text-align: center;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius-l);
}
.empty__title { font-size: var(--fs-lg); font-weight: var(--fw-mid); }
.empty__desc  { font-size: var(--fs-sm); color: var(--text-2); }

/* ------------------------------------------------------------------ 안내문 */
.callout {
  display: flex; flex-direction: column; gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  font-size: var(--fs-sm); color: var(--text-2); line-height: var(--lh-body);
}
.callout b { font-weight: var(--fw-bold); }
/* 수정요청처럼 사람이 반드시 읽어야 하는 것은 붉게 표시합니다 */
.callout--warn {
  border-color: transparent; border-left-color: var(--danger);
  background: var(--danger-bg); color: var(--danger);
}
.callout--warn span { color: var(--text-2); }


@media (max-width: 720px) {
  .grid { grid-template-columns: 1fr; }
}