/* 우리 집(m/house.html)과 가족 초대 받기(m/join.html)에만 쓰는 꼴. 공용 꼴은 m.css에 있다.
   색은 lm-tokens.css의 --lm- 변수만 쓴다. CSP가 style 속성을 막으므로 모두 클래스로 준다. */

/* [근거 보기]: 원문 단추 꼴을 빌리되 보이는 높이도 누르는 자리 56px로 한다(DESIGN.md) */
.m-src-btn.house-basis {
  min-height: var(--rd-tap);
}

/* 초대받은 곳: 줄마다 이름(작게) 위, 값(굵게) 아래 */
.house-facts {
  display: grid;
  gap: var(--lm-space-12);
  margin: 0;
}

.house-facts > div {
  display: grid;
  gap: 2px;
}

.house-facts dt {
  color: var(--lm-text-muted);
  font-size: var(--rd-fs-small);
  line-height: 1.6;
}

.house-facts dd {
  margin: 0;
  color: var(--lm-text-strong);
  font-weight: 600;
}

.house-facts .house-code {
  font-family: "JetBrains Mono", var(--lm-font-mono);
  letter-spacing: 0.06em;
}

.house-facts-title {
  color: var(--lm-text-strong);
  font-weight: 700;
  line-height: 1.5;
}

/* 가족 초대 받기 2단계: 이름 | 값 두 칸으로 줄여 [우리 집에 들어가기]가 첫 화면에 남게 한다.
   이름 칸은 가장 긴 이름 폭에 맞춘다(줄 묶음 div는 칸을 나누지 않게 풀어 둔다).
   아주 큰 글자에서는 값 칸이 너무 좁아지므로 위아래로 쌓는다 */
.house-facts.is-pairs {
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: baseline;
  gap: var(--lm-space-8) var(--lm-space-16);
}

.house-facts.is-pairs > div {
  display: contents;
}

html.fs-xl .house-facts.is-pairs {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--lm-space-12);
}

html.fs-xl .house-facts.is-pairs > div {
  display: grid;
}

/* ── 우리 집 목록(질문·함께 보는 사람·쓰지 않은 초대·확인할 것·노트·메모) ──
   줄마다 안쪽 여백을 두어 글과 단추가 테두리와 둥근 모서리에 닿지 않게 한다. 총회 홈의 날짜 묶음(.m-dates)과 겉모습은 같되 꼴을 빌리지 않는다 */
.house-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius-card);
  background: var(--lm-bg-surface);
}

.house-list > li + li {
  border-top: 1px solid var(--lm-hairline);
}

.house-row {
  display: grid;
  gap: var(--lm-space-4);
  min-width: 0;
  padding: var(--lm-space-12) var(--lm-space-16);
}

/* 글 + 오른쪽 단추(지우기·내보내기·취소) */
.house-row.has-action {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--lm-space-12);
}

/* 아주 큰 글자에서는 단추가 글 아래로 내려간다(360px에서 글 칸이 여섯 자 폭으로 줄지 않게) */
html.fs-xl .house-row.has-action {
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
}

/* 글 아래로 내려온 글자 단추([지우기])는 글 첫머리와 맞춘다(단추 안쪽 여백만큼 당긴다) */
html.fs-xl .house-row.has-action > .btn.quiet {
  margin-inline-start: calc(-1 * var(--lm-space-20));
}

.house-row-title {
  color: var(--lm-text-strong);
  font-weight: 700;
  line-height: 1.5;
}

.house-row-title .house-code {
  font-family: "JetBrains Mono", var(--lm-font-mono);
  letter-spacing: 0.04em;
}

/* 바로 가기로 온 작은 제목이 화면 맨 위에 붙지 않게(절 제목 h2와 같은 여백) */
#houseInvites {
  scroll-margin-top: var(--lm-space-16);
}

.house-memo {
  white-space: pre-line;
}

/* ── 절 안의 작은 제목(h3)은 절 제목(h2)보다 작게. 글자 크기 세 단계 모두 본문 크기 굵게(18·21·24px < 20·23·26px) ── */
body[data-page="house"] .m-field h3 {
  font-size: var(--rd-fs-body);
  font-weight: 700;
  line-height: 1.5;
}

/* 작은 제목 위는 넉넉히, 아래 목록과는 붙여서 */
body[data-page="house"] .m-field > .m-section {
  margin-top: var(--lm-space-8);
}

/* ── 열쇠 화면: 열쇠와 [적어 두었어요][열쇠 복사]를 한 묶음으로 붙여 첫 화면에 들어가게 ──
   360px '아주 크게'에서 [열쇠 복사]가 아래 막대에 10px 가려져, 제목과의 사이와 상자 위아래 여백을 줄였다 */
.m-flow > .house-key {
  margin-top: var(--lm-space-16);
}

.house-key {
  display: grid;
  gap: var(--lm-space-12);
}

.house-key > .m-empty {
  padding-block: var(--lm-space-16);
}

/* 같은 초대 코드를 다시 보일 때의 안내 */
.house-invite-again {
  color: var(--lm-text-strong);
  font-weight: 600;
}

/* ── 닫힌 우리 집: 보내지 못한 글 ── */
.house-draft {
  padding: var(--lm-space-16) var(--lm-space-20);
  border: 1px dashed var(--lm-border);
  border-radius: var(--lm-radius-card);
  background: var(--lm-bg-surface);
  white-space: pre-line;
}

/* ── 근거 창: 날짜는 한 덩어리로 둔다('2025년 6월' / '4일'로 갈리지 않게) ── */
.house-nowrap {
  white-space: nowrap;
}

/* ── 화면이 바뀔 때 스크립트가 제목으로 옮긴 초점은 테두리를 그리지 않는다. 자판으로 옮겨 다닐 때(:focus-visible)는 그대로 그린다 ── */
.m-main h1[tabindex="-1"]:focus:not(:focus-visible) {
  outline: none;
}

/* ── 안건별 준비: 안건 이름 줄 전체가 그 안건 화면으로 가는 자리(56px), 오른쪽 화살표 ── */
.house-prep-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  align-items: center;
  gap: var(--lm-space-8);
  min-height: var(--rd-tap);
  margin-block: calc(-1 * var(--lm-space-8)) 0;
  color: var(--lm-text-strong);
  text-decoration: none;
}

.house-prep-title {
  font-weight: 700;
  line-height: 1.5;
  text-decoration: underline;
  text-decoration-color: var(--lm-border-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.house-prep-link .icon {
  color: var(--lm-primary);
}

@media (hover: hover) {
  .house-prep-link:hover .house-prep-title {
    text-decoration-color: var(--lm-primary);
  }
}

/* [생각 적기]: 줄 끝에서 칸 폭만큼 늘이지 않는다 */
.house-prep-write {
  justify-self: start;
  margin-top: var(--lm-space-8);
}

/* ── 확인할 것: 항목 밑 이번 총회의 날짜와 책자 문장. 체크 상자 칸만큼 들여 글과 줄을 맞춘다 ── */
.house-check-extra {
  display: grid;
  gap: var(--lm-space-8);
  margin-left: 40px;
  padding: var(--lm-space-12) var(--lm-space-16);
  border-radius: var(--lm-radius-inner);
  background: var(--lm-bg-subtle);
}

html.fs-xl .house-check-extra {
  margin-left: 0;
}

.house-check-date {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--lm-space-8);
  align-items: start;
  color: var(--lm-text-strong);
  font-weight: 600;
}

.house-check-date .icon {
  margin-top: 0.3em;
  color: var(--lm-primary);
}

.house-check-from {
  color: var(--lm-text-strong);
  font-size: var(--rd-fs-small);
  font-weight: 700;
}

.house-check-answer {
  display: grid;
  gap: var(--lm-space-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

.house-check-answer li {
  display: grid;
  gap: 2px;
}

/* 자료 쪽('조합 책자 2쪽'): 원문 창 머리의 쪽 표지와 같은 꼴 */
.house-check-src,
.house-quote-page {
  justify-self: start;
  padding: 0 var(--lm-space-8);
  border-radius: var(--lm-radius-pill);
  background: var(--lm-trust-soft);
  color: var(--lm-trust);
  font-size: var(--rd-fs-small);
  line-height: 1.6;
  white-space: nowrap;
}

/* 근거 창의 책자 구간 */
.house-quote {
  display: grid;
  gap: var(--lm-space-8);
}

/* ── 우리 집 준비표(m/house-print.html). 인쇄본(m.css .p-*) 꼴을 쓰고 준비표에만 있는 줄만 더한다 ── */
.house-print-part li:has(.house-print-who) {
  display: grid;
  gap: 2px;
}

.house-print-who {
  color: var(--lm-text-strong);
  font-size: var(--rd-fs-small);
  font-weight: 600;
}

.house-print-src {
  color: var(--lm-text-muted);
  font-size: var(--rd-fs-small);
}

/* 답 요지: 질문 아래 한 칸 들여 1px 선으로 묶는다 */
.house-print-gist {
  margin-top: var(--lm-space-4);
  padding-left: var(--lm-space-12);
  border-left: 1px solid var(--lm-border-strong);
}

.house-print-end {
  display: grid;
  gap: var(--lm-space-12);
}

/* 이름 | 값 두 칸은 좁은 화면과 아주 큰 글자에서 위아래로 쌓는다('서면결의서·책자에 적힌 이름'이 길어 값 칸이 화면 밖으로 밀렸다) */
@media screen and (max-width: 480px) {
  body[data-page="house-print"] .p-facts {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  body[data-page="house-print"] .p-facts dd + dt {
    margin-top: var(--lm-space-8);
  }
}

html.fs-xl body[data-page="house-print"] .p-facts {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

html.fs-xl body[data-page="house-print"] .p-facts dd + dt {
  margin-top: var(--lm-space-8);
}

@media print {
  .house-print-src {
    color: var(--lm-text-strong);
  }

  .house-print-end {
    margin-top: 16pt;
    break-inside: avoid;
  }

  /* 준비표는 안건마다 새 쪽을 쓰지 않고 이어 싣는다(짧은 안건이 쪽마다 비고, 넘친 여백이 빈 쪽을 만들었다).
     격자 대신 블록으로 쌓아 쪽 사이에서 제목 위 여백이 사라지지 않게 한다 */
  body[data-page="house-print"] .p-agenda {
    display: block;
    margin-top: 18pt;
    padding-top: 12pt;
    border-top: 1px solid var(--lm-text-strong);
    break-before: auto;
  }

  body[data-page="house-print"] .p-cover + .p-agenda {
    border-top: 0;
  }

  body[data-page="house-print"] .p-agenda > * + * {
    margin-top: 8pt;
  }

  body[data-page="house-print"] .p-agenda h3 {
    margin-top: 12pt;
  }
}