/**
 * relations.css — 「관계」 목록 · 사람 더하기 (2026-09-28 · P3b-1② · 아스트라 v5e)
 *
 * ★★★ 시안의 일반 선택자(.row · .page · .field · .chip · .empty …)를 «그대로 옮기지 않았다».
 *   전역으로 놓으면 랜딩·결과·대화·/pass 가 먼저 읽는 maeum.css 위를 덮는다(파운더 §0).
 *   ★ 그래서 값만 가져오고 이름은 rel- 로 바꾸고, 모든 규칙을 .rel-page 안에 가둔다.
 *   ★★ 자(verifyRelScreens)가 「.rel-page 밖에 선택자가 있는가」를 본다.
 *
 * ★ 색·글꼴·단추는 maeum.css 의 토큰과 .m-button 을 그대로 쓴다 — 새 팔레트를 만들지 않는다.
 */

.rel-page { max-width: 1040px; }
.rel-page .m-support { line-height: 1.85; }

/* ── 사람 카드 목록 ────────────────────────────────────────── */
.rel-page .rel-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.rel-page .rel-card {
  width: 100%; min-height: 146px; padding: 23px;
  display: flex; align-items: center; gap: 17px; text-align: left;
  background: var(--paper); border: 1px solid var(--line); border-radius: 22px;
  color: var(--ink); transition: border-color .15s;
}
.rel-page .rel-card:hover { border-color: var(--teal); }
.rel-page .rel-card .rel-grow { flex: 1; min-width: 0; }
.rel-page .rel-card h3 { font-size: 20px; display: inline; margin-right: 6px; }
.rel-page .rel-card p { font-size: 13px; color: var(--muted); margin-top: 8px; }
.rel-page .rel-tag {
  display: inline-block; font-size: 12px; line-height: 1.6;
  padding: 3px 9px; border-radius: 20px; background: var(--soft); color: var(--teal);
}

/* 캐릭터 자리 — ★ 없는 성별·오행을 추정하지 않는다. 모르면 «중립 실루엣»이다 */
.rel-page .rel-face {
  width: 64px; height: 74px; flex: none; position: relative;
  display: inline-flex; align-items: center; justify-content: center;
}
.rel-page .rel-face img { width: 100%; height: 100%; opacity: 1; object-fit: contain; }
.rel-page .rel-face.neutral img { filter: grayscale(1) brightness(.8); opacity: .3; }

/* ── 비어 있을 때 ─────────────────────────────────────────── */
.rel-page .rel-empty {
  padding: 48px 24px; text-align: center;
  display: grid; justify-items: center; gap: 18px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 24px;
}
.rel-page .rel-empty h2 { font-size: 24px; }
.rel-page .rel-empty p { max-width: 360px; }

/* ── 커플 칸 — ★ 관계 리포트와 한 목록으로 섞지 않는다 ────── */
.rel-page .rel-shelf { border-top: 1px solid var(--line); padding-top: 32px; margin-top: 40px; }
.rel-page .rel-couples { list-style: none; margin: 0; padding: 0; }
/* ★★ 2026-10-13 — 한 줄에 단추가 셋(열기 · 대화 · 삭제)이다. 390px 에서 겹치거나 잘리면 안 된다.
   ★ 그래서 줄이 «접히게» 둔다 — 이름이 길면 단추가 다음 줄로 내려간다. */
.rel-page .rel-del { color: var(--muted); }
.rel-page .rel-del:hover { color: var(--ink); }
/* 확인 창의 두 단추 — ★ 선택자는 .rel-page 안에 가둔다(이 파일의 규칙).
   그래서 <dialog> 도 .rel-page «안»에 둔다. showModal 은 DOM 자리와 무관하게 맨 위로 뚜다. */
.rel-page .del-actions { display: flex; gap: 10px; margin-top: 14px; }
.rel-page .del-actions .m-button { flex: 1; }
.rel-page .m-button.danger { background: #8c2f2f; color: #fff; border-color: #8c2f2f; }
.rel-page .rel-couple {
  display: flex; gap: 18px; align-items: center;
  padding: 18px 0; border-bottom: 1px solid var(--line);
}
.rel-page .rel-couple .rel-grow { flex: 1; min-width: 0; }
.rel-page .rel-couple h3 { font-size: 18px; }
.rel-page .rel-couple { flex-wrap: wrap; row-gap: 8px; }
.rel-page .rel-couple .rel-grow { flex: 1 1 100%; }
.rel-page .rel-pair { display: flex; flex: none; }
.rel-page .rel-pair img { width: 42px; height: 56px; object-fit: contain; }

/* ── 사람 더하기 ──────────────────────────────────────────── */
.rel-page .rel-formhead { display: flex; gap: 14px; align-items: center; justify-content: space-between; }
.rel-page .rel-formhead .m-label {
  font-size: 13px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 24px; padding: 5px 12px;
}
.rel-page .rel-field { margin-top: 25px; border: 0; padding: 0; }
.rel-page .rel-field > label,
.rel-page .rel-field legend {
  display: block; font-size: 16px; font-weight: 700; color: var(--teal); margin-bottom: 9px;
}
.rel-page .rel-field input:not([type=checkbox]),
.rel-page .rel-field textarea,
.rel-page .rel-field select {
  width: 100%; min-height: 52px; padding: 12px; font-size: 16px;
  border: 1px solid #a8b8b1; border-radius: 12px;
  background: var(--paper); color: var(--ink);
}
.rel-page .rel-field textarea { resize: vertical; min-height: 110px; }
.rel-page .rel-row { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.rel-page .rel-inline { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.rel-page .rel-inline input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--teal); flex: none; }

.rel-page .rel-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.rel-page .rel-chip {
  min-height: 44px; border-radius: 30px; padding: 9px 18px; font-size: 14px;
  border: 1px solid var(--line); background: var(--paper); color: var(--teal);
  font-family: inherit; cursor: pointer;
}
.rel-page .rel-chip[aria-pressed=true] { background: var(--teal); color: #fff; border-color: var(--teal); }
.rel-page .rel-mbti { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 9px; }
.rel-page .rel-mbti .rel-chip { border-radius: 12px; }

/* 상대 허락 — ★ 문장은 서버가 준다. 여기에는 «자리»만 있다 */
.rel-page .rel-permit { padding: 20px; background: var(--soft); border-radius: 16px; margin-top: 28px; }
.rel-page .rel-permit label { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.85; }
.rel-page .rel-permit input { width: 20px; height: 20px; flex: none; margin-top: 5px; accent-color: var(--teal); }
.rel-page .rel-permit a { display: inline-block; margin-top: 10px; font-size: 13px; color: var(--teal); }

.rel-page .rel-error { color: #8d3f38; font-size: 14px; margin-top: 15px; }
.rel-page .rel-actions { display: flex; gap: 12px; margin-top: 32px; }
.rel-page .rel-actions .m-button { flex: 1; }

/* ── 폰 ───────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .rel-page .rel-grid { grid-template-columns: 1fr; gap: 12px; }
  .rel-page .rel-card { min-height: 124px; padding: 20px; }
  .rel-page .rel-face { width: 60px; height: 70px; }
}
/* ★ 320px — 달력 줄이 가로로 넘치던 자리다. 두 칸을 위아래로 푼다 */
@media (max-width: 360px) {
  .rel-page .rel-row { flex-wrap: wrap; }
  .rel-page .rel-row select { width: 100%; }
  .rel-page .rel-actions { flex-wrap: wrap; }
  .rel-page .rel-mbti { grid-template-columns: 1fr; }
}

/* ══ 한 사람 — 관계 리포트 여섯 칸 (2026-09-28 · P3b-2 · v5e personView) ══ */
.rel-page .rel-back { justify-self: start; width: fit-content; padding-left: 0; }
.rel-page .rel-go { color: var(--muted); flex: none; }

.rel-page .rel-hero { text-align: center; padding: 10px 0 28px; }
.rel-page .rel-hero h1 { font-size: 32px; margin-top: 20px; line-height: 1.4; letter-spacing: -.035em; }
.rel-page .rel-duo { display: flex; justify-content: center; align-items: center; gap: 25px; }

.rel-page .rel-intro {
  font-size: 16px; line-height: 1.95; margin: 36px 0;
  border-left: 2px solid #afbeb5; padding-left: 20px;
}

.rel-page .rel-piece {
  border: 1px solid var(--line); border-radius: 24px; background: var(--paper);
  padding: 30px; margin: 24px 0;
}
.rel-page .rel-cat { font-size: 12px; color: var(--muted); margin-bottom: 16px; }
.rel-page .rel-piece h2 { font-size: 24px; line-height: 1.55; margin-bottom: 22px; letter-spacing: -.035em; }

/* ★★★ 강조 한 문장 — «서버가 고른 것»만 여기 온다. 화면이 고르지 않는다 */
.rel-page .rel-land {
  font-size: 21px; font-weight: 700; line-height: 1.85; color: var(--teal);
  margin: 16px 0 24px; padding-left: 17px; border-left: 3px solid #b7c9c1;
}
.rel-page .rel-evi { border-top: 1px solid var(--line); }
.rel-page .rel-evi summary { font-size: 14px; color: var(--muted); min-height: 48px; padding: 13px 0; cursor: pointer; }
.rel-page .rel-body p { font-size: 16px; line-height: 1.95; margin: 18px 0; }
.rel-page .rel-body p:first-child { margin-top: 0; }
/* ★ 「이번 주에 할 일」 — 항상 전체. 바탕만 달리해 맺음임을 보인다 */
.rel-page .rel-action { background: #eef2ed; }

.rel-page .rel-ending { margin: 40px 0 10px; }
.rel-page .rel-questions { list-style: none; margin: 0; padding: 0; }
.rel-page .rel-questions li {
  padding: 18px 0; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.85;
}
.rel-page .rel-foot {
  padding-top: 30px; margin-top: 32px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--muted);
}

/* ══ 기다리기 — ★ 가짜 진행 막대를 두지 않는다(09-27 파운더) ══ */
.rel-page .rel-wait {
  min-height: 60vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: 14px;
}
.rel-page .rel-wait h1 { font-size: 26px; line-height: 1.45; letter-spacing: -.03em; }
/* ★ 걸리는 시간은 «크게» 말한다 — 작은 회색 글씨 금지 */
.rel-page .rel-wait-long { font-size: 19px; font-weight: 700; color: var(--teal); }
.rel-page .rel-wait-el { font-size: 15px; color: var(--muted); }

@media (max-width: 700px) {
  .rel-page .rel-piece { padding: 24px 21px; border-radius: 22px; }
  .rel-page .rel-piece h2 { font-size: 22px; }
  .rel-page .rel-land { font-size: 20px; }
  .rel-page .rel-hero h1 { font-size: 28px; }
}
/* ★★★ 2026-10-13 N16 — 값을 담는 동안 폼을 잠근다.
   ★ inert 가 손을 막지만, 그것을 모르는 판을 위해 pointer-events 를 함께 둔다.
   ★★ 흐리게 하는 것은 «잠겼다»를 눈으로 알리기 위함이다 — 숨기지는 않는다. */
.rel-page #add-form[inert]{opacity:.45;pointer-events:none;user-select:none}
.rel-page #add-busy{color:var(--muted)}
.rel-page #add-offline{display:grid;gap:12px;justify-items:start}

/* ★★ 2026-10-13 — 한 사람 화면의 「수정 · 삭제」 줄. */
.rel-page .rel-person-acts{display:flex;gap:8px;justify-content:flex-end;margin:-6px 0 2px}