/* 조합원 화면(public/m/·들어오기 화면) 전용. base.css 다음에 읽는다.
   틀(shell.js)이 그리는 머리·돌아가기 줄·안내 바닥, 총회 홈·안건 해설·원문 창·인쇄본·정정 이력의 꼴을 둔다.
   색은 lm-tokens.css의 --lm- 변수만, 크기는 base.css의 --rd- 변수와 아래 --rd-m- 변수만 쓴다. hex를 두지 않는다. */

:root {
  --rd-m-card-title: 22px;
  --rd-m-summary: 17px;
  --rd-m-num: 40px;
}

html.fs-l {
  --rd-m-card-title: 25px;
  --rd-m-summary: 20px;
  --rd-m-num: 44px;
}

html.fs-xl {
  --rd-m-card-title: 28px;
  --rd-m-summary: 23px;
  --rd-m-num: 48px;
}

/* 우리말은 낱말 단위로 줄을 바꾼다(조사가 줄 머리로 넘어가지 않게). 한 칸에 안 들어가는 긴 글만 쪼갠다.
   base.css의 overflow-wrap: anywhere는 좁은 칸의 최소 폭 셈에서도 글자마다 끊을 수 있게 해 낱말이 쪼개지므로 바꾼다 */
body,
dialog,
button,
input,
textarea,
select {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ── 머리: 작은 로고 + 글자 크기 [가][가][가], 아래 줄에 총회 이름 ── */

.m-head {
  border-bottom: 1px solid var(--lm-hairline);
  background: var(--lm-bg-surface);
}

.m-head-inner {
  max-width: var(--rd-page-max);
  margin: 0 auto;
  padding: 0 var(--rd-gutter) var(--lm-space-12);
}

.m-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lm-space-12);
  min-height: 72px;
}

.m-brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--rd-tap);
  border-radius: var(--lm-radius-inner);
}

.m-logo.brand-logo {
  height: 16px;
}

.m-meeting {
  color: var(--lm-text-strong);
  font-size: var(--rd-fs-small);
  font-weight: 700;
  line-height: 1.45;
}

/* '글자 크기' 글자 + 세 단추. 글자는 단추 묶음 위에 둔다(360px 화면에서도 로고와 한 줄에 들어가게) */
.m-font-wrap {
  display: grid;
  flex: 0 0 auto;
  justify-items: center;
  gap: 2px;
  padding: var(--lm-space-4) 0;
}

.m-font-label {
  color: var(--lm-text-strong);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}

/* 글자 크기 세 단추. 한 덩어리 단추(누르는 자리 56px), 고른 단추는 aria-pressed로 칠한다 */
.m-font {
  display: inline-flex;
  flex: 0 0 auto;
  border: 1px solid var(--lm-border-strong);
  border-radius: var(--lm-radius-control);
  background: var(--lm-bg-surface);
  overflow: hidden;
}

.m-font-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: var(--rd-tap);
  padding: 0;
  border: 0;
  border-left: 1px solid var(--lm-hairline);
  background: transparent;
  color: var(--lm-text-strong);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--rd-duration-color) var(--lm-ease-out), color var(--rd-duration-color) var(--lm-ease-out);
}

.m-font-btn:first-child {
  border-left: 0;
}

.m-font-btn.is-m {
  font-size: 16px;
}

.m-font-btn.is-l {
  font-size: 20px;
}

.m-font-btn.is-xl {
  font-size: 25px;
}

.m-font-btn[aria-pressed="true"] {
  background: var(--lm-bg-selected);
  color: var(--lm-primary);
  box-shadow: inset 0 -3px 0 var(--lm-primary);
}

.m-font-btn:focus-visible {
  outline-offset: -3px;
}

@media (hover: hover) {
  .m-font-btn:hover {
    background: var(--lm-bg-subtle);
  }

  .m-font-btn[aria-pressed="true"]:hover {
    background: var(--lm-bg-selected);
  }
}

/* ── 아래 고정 막대. 그 칸에 속한 다른 화면(안건 해설·인쇄본 등)도 칸을 칠한다. 입력칸에 초점이 가면 숨긴다 ── */

.bottom-bar a[aria-current="true"] {
  color: var(--lm-primary);
}

.bottom-bar a[aria-current="true"]::before {
  content: "";
  position: absolute;
  top: 0;
  right: 20%;
  left: 20%;
  height: 3px;
  background: var(--lm-primary);
}

body.is-typing .bottom-bar {
  display: none;
}

/* ── 돌아가기 줄(첫 화면이 아닌 화면) ── */

.m-back {
  max-width: var(--rd-page-max);
  margin: 0 auto;
  padding: var(--lm-space-4) var(--rd-gutter) 0;
}

.m-back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--lm-space-8);
  min-height: var(--rd-tap);
  padding-right: var(--lm-space-12);
  color: var(--lm-primary);
  font-size: var(--rd-fs-body);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--lm-radius-inner);
}

/* ── 본문과 안내 바닥. 아래 막대가 있으면 안내 바닥이 막대 뒤에 숨지 않게 띄운다 ── */

.m-main {
  padding-top: var(--lm-space-24);
}

body.has-bar .page.m-main,
.page.m-main {
  padding-bottom: var(--lm-space-8);
}

.m-flow > * + * {
  margin-top: var(--lm-space-32);
}

.m-foot {
  max-width: var(--rd-page-max);
  margin: 0 auto;
  padding: 0 var(--rd-gutter) var(--lm-space-32);
}

.m-foot .notice-foot {
  margin-top: var(--lm-space-32);
}

body.has-bar .m-foot {
  padding-bottom: calc(var(--rd-bar-height) + var(--lm-safe-bottom) + var(--lm-space-24));
}

.m-loading {
  color: var(--lm-text-muted);
  font-size: var(--rd-fs-small);
}

/* 오류 상태: 무엇이 안 됐는지와 다시 해 볼 단추 */
.m-problem {
  display: grid;
  justify-items: start;
  gap: var(--lm-space-12);
  padding: var(--lm-space-20);
  border: 1px solid var(--lm-danger);
  border-radius: var(--lm-radius-card);
  background: var(--lm-danger-surface);
}

.m-problem-title {
  display: flex;
  align-items: flex-start;
  gap: var(--lm-space-8);
  color: var(--lm-danger);
  font-size: var(--rd-fs-h2);
}

.m-problem-title .icon {
  margin-top: 0.15em;
}

/* 아무것도 없을 때 */
.m-empty {
  padding: var(--lm-space-20);
  border: 1px solid var(--lm-hairline);
  border-radius: var(--lm-radius-card);
  background: var(--lm-bg-surface);
}

.m-section {
  display: grid;
  gap: var(--lm-space-12);
}

.m-section-lead {
  margin-top: calc(-1 * var(--lm-space-4));
}

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

/* ── 들어오기 화면 ── */

.m-enter {
  display: grid;
  gap: var(--lm-space-20);
}

.m-enter .code-input {
  max-width: none;
}

.m-intro {
  display: grid;
  gap: var(--lm-space-12);
}

/* 코드가 없는 사람의 길: 제목 바로 아래 한 줄. 좁거나 글자가 크면 단추가 다음 줄로 내려간다 */
.m-example-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lm-space-8) var(--lm-space-12);
  padding-top: var(--lm-space-12);
  border-top: 1px solid var(--lm-hairline);
}

.m-example-lead {
  color: var(--lm-text-strong);
  font-weight: 600;
}

.m-example-btn {
  padding-right: var(--lm-space-12);
}

.m-example-btn .icon {
  color: var(--lm-text-muted);
}

.m-example-line .m-status {
  flex-basis: 100%;
}

/* 알려 드리는 줄(오류 아님): 코발트 옅은 바탕, 본문 색, 안내 아이콘 */
.m-note {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: var(--lm-space-8);
  padding: var(--lm-space-12) var(--lm-space-16);
  border: 1px solid var(--lm-hairline);
  border-radius: var(--lm-radius-control);
  background: var(--lm-trust-soft);
  color: var(--lm-text-strong);
  line-height: 1.6;
}

.m-note > .icon {
  margin-top: calc((1.6em - 24px) / 2);
  color: var(--lm-trust);
}

/* 예시 총회라 알려 드리는 줄: 예시 띠와 같은 색 */
.m-note.is-example {
  border-color: var(--lm-warning-accent);
  background: var(--lm-warning-surface);
  color: var(--lm-warning-text);
}

.m-note.is-example > .icon {
  color: var(--lm-warning-text);
}

/* 코드를 모를 때 할 일: 접지 않고 한 줄로 보인다 */
.m-help-line {
  display: flex;
  align-items: flex-start;
  gap: var(--lm-space-8);
  padding: var(--lm-space-12) 0;
  border-top: 1px solid var(--lm-hairline);
  border-bottom: 1px solid var(--lm-hairline);
  color: var(--lm-text-strong);
  font-weight: 600;
}

.m-help-line .icon {
  margin-top: 0.2em;
}

.m-help {
  border-top: 1px solid var(--lm-hairline);
  border-bottom: 1px solid var(--lm-hairline);
}

.m-help > summary {
  display: flex;
  align-items: center;
  gap: var(--lm-space-8);
  min-height: var(--rd-tap);
  color: var(--lm-text-strong);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.m-help > summary::-webkit-details-marker {
  display: none;
}

.m-help > summary .icon {
  transition: transform var(--lm-duration) var(--lm-ease-out);
}

.m-help[open] > summary .icon {
  transform: rotate(90deg);
}

.m-help > p {
  padding-bottom: var(--lm-space-16);
}

/* 다른 길로 들어가기: 글자 두 줄짜리 링크 줄 */
.m-path {
  display: grid;
  grid-template-columns: 24px 1fr 24px;
  align-items: center;
  gap: var(--lm-space-12);
  min-height: 76px;
  padding: var(--lm-space-12) var(--lm-space-16);
  border: 1px solid var(--lm-border-strong);
  border-radius: var(--lm-radius-control);
  background: var(--lm-bg-surface);
  color: var(--lm-text-strong);
  text-decoration: none;
  transition: background-color var(--rd-duration-color) var(--lm-ease-out), border-color var(--rd-duration-color) var(--lm-ease-out);
}

.m-path-text {
  display: grid;
  gap: 2px;
}

.m-path-title {
  font-size: var(--rd-fs-control);
  font-weight: 600;
  line-height: 1.35;
}

.m-path .small {
  line-height: 1.45;
}

.m-path > .icon:last-child {
  color: var(--lm-text-muted);
}

@media (hover: hover) {
  .m-path:hover {
    border-color: var(--lm-text);
    background: var(--lm-bg-subtle);
  }
}

/* ── 총회 홈 ── */

.m-when {
  display: grid;
  justify-items: start;
  gap: var(--lm-space-8);
}

.m-dday {
  display: inline-flex;
  align-items: center;
  gap: var(--lm-space-8);
  min-height: 40px;
  padding: var(--lm-space-4) var(--lm-space-16);
  border-radius: var(--lm-radius-pill);
  background: var(--lm-trust);
  color: var(--lm-on-primary);
  font-size: var(--rd-fs-body);
  font-weight: 700;
  line-height: 1.3;
}

/* 총회 이름(작은 줄) + 날짜·시각(큰 줄)을 한 제목으로 */
.m-when-title {
  display: grid;
  gap: 2px;
}

.m-when-name {
  font-size: var(--rd-fs-body);
  font-weight: 700;
  line-height: 1.45;
}

.m-when-date {
  display: block;
}

.m-place {
  display: flex;
  align-items: flex-start;
  gap: var(--lm-space-8);
  color: var(--lm-text-strong);
  font-weight: 600;
  line-height: 1.55;
}

.m-place-label {
  flex: 0 0 auto;
  margin-top: 0.1em;
  padding: 0 var(--lm-space-8);
  border: 1px solid var(--lm-border-strong);
  border-radius: var(--lm-radius-pill);
  color: var(--lm-text);
  font-size: var(--rd-fs-small);
  font-weight: 600;
  line-height: 1.6;
}

.m-place > span:last-child {
  min-width: 0;
}

.m-dday.is-past {
  background: var(--lm-bg-subtle);
  color: var(--lm-text-strong);
}

.m-num {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--rd-m-num);
  height: var(--rd-m-num);
  border-radius: var(--lm-radius-pill);
  background: var(--lm-trust);
  color: var(--lm-on-primary);
  font-size: calc(var(--rd-m-num) * 0.5);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* 안건 카드. 카드 전체가 링크 */
.m-agenda {
  display: grid;
  grid-template-columns: var(--rd-m-num) 1fr 24px;
  align-items: start;
  gap: var(--lm-space-16);
  min-height: 88px;
  padding: var(--lm-space-20) var(--lm-space-16);
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius-card);
  background: var(--lm-bg-surface);
  color: var(--lm-text);
  text-decoration: none;
  transition: border-color var(--rd-duration-color) var(--lm-ease-out), background-color var(--rd-duration-color) var(--lm-ease-out);
}

.m-agenda > .icon {
  align-self: center;
  color: var(--lm-text-muted);
}

/* 아주 큰 글자에서는 글줄이 너무 좁아지지 않게 오른쪽 화살표를 뺀다(카드 전체가 링크라 뜻은 그대로다) */
html.fs-xl .m-agenda {
  grid-template-columns: var(--rd-m-num) 1fr;
  gap: var(--lm-space-12);
}

html.fs-xl .m-agenda > .icon {
  display: none;
}

.m-agenda-body {
  display: grid;
  gap: var(--lm-space-4);
  min-width: 0;
}

.m-agenda-title {
  color: var(--lm-text-strong);
  font-size: var(--rd-m-card-title);
  font-weight: 700;
  line-height: 1.4;
}

.m-agenda-summary {
  font-size: var(--rd-m-summary);
  line-height: 1.6;
}

@media (hover: hover) {
  .m-agenda:hover {
    border-color: var(--lm-text);
  }
}

.m-agenda:active {
  background: var(--lm-bg-subtle);
}

.m-read {
  display: inline-flex;
  align-items: center;
  gap: var(--lm-space-4);
  margin-top: var(--lm-space-4);
  color: var(--lm-success-text);
  font-size: var(--rd-fs-small);
  font-weight: 600;
  line-height: 1.4;
}

.m-read.is-updated {
  color: var(--lm-warning-text);
}

.m-read .icon {
  width: 20px;
  height: 20px;
}

/* 다른 분들이 물은 질문과 답: 수 두 줄 + 질문과 답 보기 */
.m-qna-counts {
  display: grid;
  gap: 2px;
}

.m-count {
  display: block;
}

.m-count strong {
  font-weight: 700;
}

/* 날짜 묶음: 줄마다 단추(날짜 | 이름), 누르면 아래에 풀이가 펼쳐진다 */
.m-dates {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius-card);
  background: var(--lm-bg-surface);
}

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

.m-date-row {
  display: grid;
  grid-template-columns: 1fr 24px;
  align-items: center;
  gap: var(--lm-space-12);
  width: 100%;
  min-height: 72px;
  padding: var(--lm-space-12) var(--lm-space-16);
  border: 0;
  border-radius: var(--lm-radius-card);
  background: transparent;
  color: var(--lm-text);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--rd-duration-color) var(--lm-ease-out);
}

.m-date-row > .icon {
  color: var(--lm-text-muted);
  transition: transform var(--lm-duration) var(--lm-ease-out);
}

.m-date-row[aria-expanded="true"] > .icon {
  transform: rotate(90deg);
}

.m-date-row:active {
  background: var(--lm-bg-subtle);
}

@media (hover: hover) {
  .m-date-row:hover {
    background: var(--lm-bg-subtle);
  }
}

.m-date-row:focus-visible {
  outline-offset: -3px;
}

.m-date-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.m-dates-date {
  display: block;
  color: var(--lm-text-strong);
  font-weight: 700;
  line-height: 1.5;
}

.m-date-label {
  display: block;
  line-height: 1.55;
}

.m-nowrap {
  white-space: nowrap;
}

.m-date-detail {
  display: grid;
  gap: var(--lm-space-8);
  margin: 0 var(--lm-space-16) var(--lm-space-16);
  padding: var(--lm-space-12) var(--lm-space-16);
  border-left: 3px solid var(--lm-trust);
  border-radius: 0 var(--lm-radius-inner) var(--lm-radius-inner) 0;
  background: var(--lm-bg-subtle);
}

.m-date-lead {
  color: var(--lm-text-strong);
  font-weight: 600;
}

.m-chip {
  display: inline-flex;
  align-items: center;
  margin-left: var(--lm-space-8);
  padding: 0 var(--lm-space-8);
  border-radius: var(--lm-radius-pill);
  background: var(--lm-warning-surface);
  color: var(--lm-warning-text);
  font-size: var(--rd-fs-small);
  font-weight: 600;
  line-height: 1.6;
  vertical-align: 0.1em;
}

.m-more {
  display: grid;
  justify-items: start;
  gap: var(--lm-space-8);
  padding-top: var(--lm-space-16);
  border-top: 1px solid var(--lm-hairline);
}

.m-more .btn.quiet {
  padding-left: 0;
  padding-right: 0;
}

/* ── 안건 해설 ── */

.m-agenda-head {
  display: grid;
  gap: var(--lm-space-12);
}

.m-seq-line {
  display: flex;
  align-items: center;
  gap: var(--lm-space-12);
  color: var(--lm-text-strong);
  font-weight: 600;
}

.m-meta {
  display: grid;
  gap: var(--lm-space-4);
}

.m-listen[aria-pressed="true"] {
  border-color: var(--lm-primary);
  background: var(--lm-bg-selected);
  color: var(--lm-primary);
}

.m-field {
  display: grid;
  gap: var(--lm-space-16);
  padding-top: var(--lm-space-24);
  border-top: 1px solid var(--lm-hairline);
}

.m-field h2 {
  scroll-margin-top: var(--lm-space-16);
}

.m-sentences {
  display: grid;
  gap: var(--lm-space-20);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 소리로 듣기에서 지금 읽는 자리. 여백을 미리 두어 강조가 켜져도 글이 움직이지 않는다 */
.m-speakable {
  margin: calc(-1 * var(--lm-space-8)) calc(-1 * var(--lm-space-12));
  padding: var(--lm-space-8) var(--lm-space-12);
  border-radius: var(--lm-radius-control);
  transition: background-color var(--rd-duration-color) var(--lm-ease-out), box-shadow var(--rd-duration-color) var(--lm-ease-out);
  scroll-margin: 120px 0 calc(var(--rd-bar-height) + 48px);
}

.m-speakable.is-speaking {
  background: var(--lm-trust-soft);
  box-shadow: inset 0 0 0 1px var(--lm-trust);
}

.m-sentence {
  display: grid;
  justify-items: start;
  gap: var(--lm-space-8);
}

.m-sentence-text {
  color: var(--lm-text-strong);
}

/* [원문 12쪽] 단추. 높이 56px, 글자는 글자 크기 단계를 따라 커진다(16·18·20px) */
.m-src-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--lm-space-8);
  min-height: var(--rd-tap);
  padding: var(--lm-space-8) var(--lm-space-16) var(--lm-space-8) var(--lm-space-12);
  border: 1px solid var(--lm-border-strong);
  border-radius: var(--lm-radius-control);
  background: var(--lm-bg-surface);
  color: var(--lm-primary);
  font-size: var(--rd-fs-small);
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--rd-duration-color) var(--lm-ease-out), border-color var(--rd-duration-color) var(--lm-ease-out);
}

.m-src-btn .icon {
  width: 20px;
  height: 20px;
}

@media (hover: hover) {
  .m-src-btn:hover {
    border-color: var(--lm-primary);
    background: var(--lm-bg-selected);
  }
}

/* 어려운 말 풀이 */
.m-gloss {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: var(--lm-space-8) var(--lm-space-12);
  border-radius: var(--lm-radius-inner);
  background: var(--lm-bg-subtle);
  color: var(--lm-text);
  font-size: var(--rd-fs-small);
  line-height: 1.55;
}

.m-gloss dt {
  display: inline;
  color: var(--lm-text-strong);
  font-weight: 700;
}

.m-gloss dt::after {
  content: " ";
}

.m-gloss dd {
  display: inline;
  margin: 0;
}

.m-gloss dd::after {
  content: "\A";
  white-space: pre;
}

.m-gloss dd:last-child::after {
  content: none;
}

/* 확인 안 된 것: 점선 상자. 읽혀야 하므로 글은 흐리게 하지 않는다 */
.m-unknown {
  padding: var(--lm-space-20);
  border: 1px dashed var(--lm-border-strong);
  border-top-style: dashed;
  border-radius: var(--lm-radius-card);
  background: var(--lm-bg-surface);
}

.m-unknown h2 {
  display: flex;
  align-items: flex-start;
  gap: var(--lm-space-8);
}

.m-unknown h2 .icon {
  margin-top: 0.15em;
}

.m-unknown .m-sentence-text {
  color: var(--lm-text);
}

.m-field-empty {
  color: var(--lm-text);
}

.m-actions {
  display: grid;
  gap: var(--lm-space-12);
}

.m-status {
  font-size: var(--rd-fs-small);
  line-height: 1.6;
}

.m-status:empty {
  display: none;
}

.m-copy-box {
  min-height: 120px;
  font-size: var(--rd-fs-small);
}

.m-pager {
  display: grid;
  gap: var(--lm-space-12);
  padding-top: var(--lm-space-24);
  border-top: 1px solid var(--lm-hairline);
}

.m-pager .btn {
  flex-direction: column;
  gap: 2px;
  padding-top: var(--lm-space-12);
  padding-bottom: var(--lm-space-12);
}

.m-pager-sub {
  font-size: var(--rd-fs-small);
  font-weight: 500;
  line-height: 1.45;
}

/* ── 원문 창(quote-sheet.js). 창은 화면의 92%까지, 머리는 자료 이름과 쪽 한 덩이로 작게 ── */

dialog.sheet.m-quote-sheet {
  max-height: 92vh;
  max-height: 92dvh;
}

.m-quote-head {
  display: grid;
  gap: var(--lm-space-4);
  padding-top: var(--lm-space-16);
  padding-bottom: var(--lm-space-8);
}

.m-quote-title {
  font-size: var(--rd-fs-body);
  line-height: 1.4;
}

.m-quote-page {
  display: inline-block;
  margin-left: var(--lm-space-4);
  padding: 0 var(--lm-space-8);
  border-radius: var(--lm-radius-pill);
  background: var(--lm-trust-soft);
  color: var(--lm-trust);
  white-space: nowrap;
}

.m-quote-page:empty {
  display: none;
}

.m-quote-body {
  display: grid;
  align-content: start;
  gap: var(--lm-space-12);
}

html.fs-l .m-quote-head,
html.fs-xl .m-quote-head {
  padding-top: var(--lm-space-12);
}

html.fs-xl .m-quote-sheet .sheet-actions {
  padding-top: var(--lm-space-8);
}

.m-quote-sentence {
  padding: var(--lm-space-12);
  border-radius: var(--lm-radius-inner);
  background: var(--lm-bg-subtle);
  font-size: var(--rd-fs-small);
  line-height: 1.6;
}

/* 원문의 줄바꿈(표의 줄, 번호 목록, 문단)을 그대로 보인다. 인용 바로 앞뒤의 줄바꿈도 같다 */
.m-quote-ctx {
  color: var(--lm-text);
  line-height: 1.85;
  white-space: pre-line;
}

mark.m-quote-hit {
  padding: 0 2px;
  border-bottom: 2px solid var(--lm-primary);
  background: var(--lm-trust-soft);
  color: var(--lm-text-strong);
  font-weight: 600;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ── 정정 이력 ── */

.m-change {
  display: grid;
  gap: var(--lm-space-12);
  padding: var(--lm-space-20);
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius-card);
  background: var(--lm-bg-surface);
}

.m-change h2 {
  font-size: var(--rd-fs-body);
}

.m-change-part {
  display: grid;
  justify-items: start;
  gap: var(--lm-space-4);
}

.m-tag {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--lm-space-8);
  border-radius: var(--lm-radius-pill);
  background: var(--lm-bg-subtle);
  color: var(--lm-text-strong);
  font-size: var(--rd-fs-small);
  font-weight: 600;
  line-height: 1.6;
}

.m-tag.is-after {
  background: var(--lm-trust-soft);
  color: var(--lm-trust);
}

.m-history {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius-card);
  background: var(--lm-bg-surface);
}

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

/* 줄 전체가 그 안건 해설로 가는 링크(누르는 자리 56px 이상) */
.m-history-row {
  display: grid;
  grid-template-columns: 1fr 24px;
  align-items: center;
  gap: var(--lm-space-12);
  min-height: 72px;
  padding: var(--lm-space-12) var(--lm-space-16);
  color: var(--lm-text);
  text-decoration: none;
  transition: background-color var(--rd-duration-color) var(--lm-ease-out);
}

.m-history > li:first-child .m-history-row {
  border-radius: var(--lm-radius-card) var(--lm-radius-card) 0 0;
}

.m-history > li:last-child .m-history-row {
  border-radius: 0 0 var(--lm-radius-card) var(--lm-radius-card);
}

.m-history-row > .icon {
  color: var(--lm-text-muted);
}

.m-history-row:active {
  background: var(--lm-bg-subtle);
}

@media (hover: hover) {
  .m-history-row:hover {
    background: var(--lm-bg-subtle);
  }
}

.m-history-text {
  display: grid;
  gap: 2px;
}

.m-history-title {
  color: var(--lm-text-strong);
  font-weight: 700;
}

/* ── 결정 여정: 내가 할 일, 뜻을 전하는 방법 카드, 칸 안의 작은 제목, 이 안건의 질문과 답, 잘못된 곳 알리기 ── */

/* 안내 바닥의 링크 둘(이 서비스가 지키는 것·개인정보 처리방침). 누르는 자리 56px */
.m-foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--lm-space-16);
  margin: var(--lm-space-8) 0 0;
  padding: 0;
  list-style: none;
}

.m-foot-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--rd-tap);
  font-size: var(--rd-fs-small);
}

/* 홈 주 단추 자리: 남은 날 아래, 내가 할 일 위. 폭을 다 쓰고 위아래 단추·상자와 16px 떨어진다 */
.m-home-next {
  display: grid;
  gap: var(--lm-space-12);
  justify-self: stretch;
  width: 100%;
  margin-block: var(--lm-space-8);
}

.m-home-next[hidden] {
  display: none;
}

/* 홈 D-day 아래 '내가 할 일' 한 줄. 날짜는 원문 대조를 마친 정관 줄에서만 */
.m-task {
  display: grid;
  justify-items: start;
  gap: var(--lm-space-8);
  width: 100%;
  padding: var(--lm-space-8) var(--lm-space-12);
  border: 1px solid var(--lm-border);
  border-left: 3px solid var(--lm-trust);
  border-radius: 0 var(--lm-radius-inner) var(--lm-radius-inner) 0;
  background: var(--lm-bg-surface);
}

.m-task-line {
  color: var(--lm-text-strong);
  line-height: 1.6;
}

.m-task-label {
  margin-right: var(--lm-space-8);
  color: var(--lm-trust);
  font-weight: 700;
}

.m-task-days {
  display: inline-block;
  margin-left: var(--lm-space-8);
  font-weight: 700;
  white-space: nowrap;
}

/* 안건 카드 안의 책자·서면결의서 번호 */
.m-agenda-book {
  color: var(--lm-text-muted);
  font-size: var(--rd-fs-small);
  line-height: 1.5;
}

/* 뜻을 전하는 방법 카드: 번호 원 자리에 목록 표시 */
.m-agenda.is-guide {
  border-color: var(--lm-border-strong);
}

.m-guide-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--rd-m-num);
  height: var(--rd-m-num);
  border: 1px solid var(--lm-trust);
  border-radius: var(--lm-radius-pill);
  color: var(--lm-trust);
}

/* 안건 머리의 '언제 정하는지'와 서면결의서 내는 기간 */
.m-decide {
  display: grid;
  justify-items: start;
  gap: var(--lm-space-8);
  padding: var(--lm-space-12) var(--lm-space-16);
  border-left: 3px solid var(--lm-trust);
  border-radius: 0 var(--lm-radius-inner) var(--lm-radius-inner) 0;
  background: var(--lm-bg-subtle);
}

.m-decide-when {
  color: var(--lm-text-strong);
  font-weight: 700;
}

.m-decide-vote {
  display: grid;
  justify-items: start;
  gap: var(--lm-space-8);
}

.m-decide-link,
.m-qa-link {
  display: inline-flex;
  align-items: center;
  gap: var(--lm-space-8);
  min-height: var(--rd-tap);
  font-weight: 600;
}

/* 칸이 둘인 묶음(누가 올렸고·정한 뒤에는): 칸마다 작은 제목 */
.m-subfield {
  display: grid;
  gap: var(--lm-space-12);
}

.m-subfield + .m-subfield {
  padding-top: var(--lm-space-16);
  border-top: 1px dashed var(--lm-hairline);
}

.m-subfield h3 {
  color: var(--lm-text-strong);
  font-size: var(--rd-fs-body);
  font-weight: 700;
  line-height: 1.5;
}

a.m-src-btn {
  text-decoration: none;
}

/* 확인 안 된 것 줄을 풀어 준 답 */
.m-closed {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lm-space-4) var(--lm-space-8);
  color: var(--lm-success-text);
  font-size: var(--rd-fs-small);
  font-weight: 600;
  line-height: 1.5;
}

/* 집행부에 물어 두고 답을 기다리는 줄: 초록(답이 올라옴)이 아니라 본문 색. 글이 두 줄로 길어도 아이콘은 첫 줄 옆에 둔다 */
.m-closed.is-waiting {
  flex-wrap: nowrap;
  align-items: flex-start;
  color: var(--lm-text-strong);
}

.m-closed.is-waiting .icon {
  flex: 0 0 auto;
  margin-top: 0.15em;
}

.m-closed .link {
  display: inline-flex;
  align-items: center;
  min-height: var(--rd-tap);
}

/* 이 안건에 다른 분들이 물은 것 */
.m-qa-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius-card);
  background: var(--lm-bg-surface);
}

.m-qa {
  display: grid;
  justify-items: start;
  gap: var(--lm-space-4);
  padding: var(--lm-space-16);
}

.m-qa + .m-qa {
  border-top: 1px solid var(--lm-hairline);
}

.m-qa-q {
  color: var(--lm-text-strong);
  font-weight: 600;
}

.m-qa-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lm-space-4) var(--lm-space-8);
  color: var(--lm-success-text);
  font-size: var(--rd-fs-small);
  line-height: 1.5;
}

.m-qa-state.is-waiting {
  color: var(--lm-text-strong);
}

.m-qa-state .icon {
  width: 20px;
  height: 20px;
}

.m-qa-state .m-tag {
  margin-left: var(--lm-space-4);
}

/* 서면결의서에 적힌 안건 이름 */
.m-pair-book {
  color: var(--lm-text-strong);
  font-weight: 700;
  line-height: 1.5;
}

/* 총회가 끝난 뒤 묶음 */
.m-ended {
  padding: var(--lm-space-20);
  border: 1px solid var(--lm-border-strong);
  border-radius: var(--lm-radius-card);
  background: var(--lm-bg-surface);
}

.m-ended h3 {
  font-size: var(--rd-fs-h2);
  font-weight: 700;
}

.m-ended .m-section {
  margin-top: var(--lm-space-8);
  padding-top: var(--lm-space-16);
  border-top: 1px solid var(--lm-hairline);
}

/* 원문 창 안의 잘못된 곳 알리기 */
.m-report-open {
  justify-self: start;
  padding-left: 0;
  padding-right: var(--lm-space-8);
  font-size: var(--rd-fs-small);
}

.m-report-title {
  font-size: var(--rd-fs-h2);
  font-weight: 700;
}

.m-report-box {
  min-height: 140px;
}

.m-report-done {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: var(--lm-space-8);
  padding: var(--lm-space-12) var(--lm-space-16);
  border: 1px solid var(--lm-success-text);
  border-radius: var(--lm-radius-control);
  background: var(--lm-success-surface);
  color: var(--lm-text-strong);
  line-height: 1.6;
}

.m-report-done .icon {
  margin-top: calc((1.6em - 24px) / 2);
  color: var(--lm-success-text);
}

/* 이 서비스가 지키는 것·개인정보 처리방침: 문서 꼴 */
.m-doc {
  padding-top: var(--lm-space-24);
  border-top: 1px solid var(--lm-hairline);
}

.m-doc-list {
  display: grid;
  gap: var(--lm-space-8);
  margin: 0;
  padding-left: 1.2em;
}

.m-doc-list li {
  line-height: 1.7;
}

.m-doc-dl {
  display: grid;
  gap: var(--lm-space-4);
  margin: 0;
}

.m-doc-dl dt {
  margin-top: var(--lm-space-12);
  color: var(--lm-text-strong);
  font-weight: 700;
}

.m-doc-dl dt:first-child {
  margin-top: 0;
}

.m-doc-dl dd {
  margin: 0;
  line-height: 1.7;
}

/* ── 인쇄본(화면에서 보는 모양) ── */

.p-doc {
  display: grid;
  gap: var(--lm-space-32);
}

.p-cover {
  display: grid;
  gap: var(--lm-space-12);
  padding-bottom: var(--lm-space-24);
  border-bottom: 2px solid var(--lm-text-strong);
}

.p-agenda {
  display: grid;
  gap: var(--lm-space-16);
}

.p-agenda h2 {
  font-size: var(--rd-fs-h1);
  line-height: 1.35;
}

.p-agenda h3 {
  margin-top: var(--lm-space-8);
  font-size: var(--rd-fs-h2);
}

.p-sentences {
  display: grid;
  gap: var(--lm-space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 각주 번호. 화면에서는 14px보다 작아지지 않게 */
.p-ref {
  margin-left: 2px;
  color: var(--lm-primary);
  font-size: max(14px, 0.75em);
  font-weight: 700;
  line-height: 0;
}

.p-note-no {
  color: var(--lm-text-strong);
  font-weight: 700;
}

/* 표지의 총회 날짜·장소·안건 수 */
.p-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--lm-space-4) var(--lm-space-16);
  margin: 0;
}

.p-facts dt {
  color: var(--lm-text-strong);
  font-weight: 700;
}

.p-facts dd {
  margin: 0;
}

/* 앱 안 브라우저 안내. 앱 안이면 띠로 눈에 띄게 */
.p-inapp.is-strong {
  display: flex;
  align-items: flex-start;
  gap: var(--lm-space-8);
  padding: var(--lm-space-12) var(--lm-space-16);
  border: 1px solid var(--lm-warning-accent);
  border-radius: var(--lm-radius);
  background: var(--lm-warning-surface);
  color: var(--lm-warning-text);
  font-weight: 600;
}

.p-inapp.is-strong .icon {
  margin-top: 0.2em;
}

.p-unknown {
  padding: var(--lm-space-16);
  border: 1px dashed var(--lm-border-strong);
  border-radius: var(--lm-radius);
}

.p-notes {
  display: grid;
  gap: var(--lm-space-8);
  margin: 0;
  padding: var(--lm-space-16) 0 0;
  border-top: 1px solid var(--lm-hairline);
  font-size: var(--rd-fs-small);
  line-height: 1.6;
  list-style: none;
}

.p-notes li {
  display: grid;
  grid-template-columns: 2.4em 1fr;
}

.p-notice {
  padding: var(--lm-space-12) var(--lm-space-16);
  border: 1px solid var(--lm-text-strong);
  border-radius: var(--lm-radius);
  color: var(--lm-text-strong);
  font-size: var(--rd-fs-small);
  font-weight: 600;
  line-height: 1.6;
}

.p-example {
  color: var(--lm-warning-text);
  font-weight: 700;
}

.p-gloss {
  display: grid;
  gap: var(--lm-space-8);
  margin: 0;
}

.p-gloss dt {
  color: var(--lm-text-strong);
  font-weight: 700;
}

.p-gloss dd {
  margin: 0 0 var(--lm-space-4);
}

/* 인쇄할 때만 보이는 것(안건 끝의 안내 문구: @page 여백 상자를 못 그리는 브라우저를 위해) */
.p-print-only {
  display: none;
}

/* 인쇄본: 칸이 둘인 묶음의 작은 제목, 뜻을 전하는 방법 끝 문장 */
.p-sub {
  color: var(--lm-text-strong);
  font-size: var(--rd-fs-body);
  font-weight: 700;
}

.p-guide-foot {
  padding: var(--lm-space-12) var(--lm-space-16);
  border-left: 3px solid var(--lm-text-strong);
  font-weight: 600;
}

.p-toc {
  display: grid;
  gap: var(--lm-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ── 인쇄 ── */

@page {
  size: A4;
  margin: 16mm 16mm 22mm;

  @bottom-left {
    content: "이 문서의 어떤 표시도 동의나 의결이 아닙니다. 투표·서명은 조합이 정한 방법으로 하세요.";
    font-family: "Pretendard Variable", Pretendard, sans-serif;
    font-size: 9pt;
    vertical-align: middle;
  }

  @bottom-right {
    content: counter(page) " / " counter(pages);
    font-family: "Pretendard Variable", Pretendard, sans-serif;
    font-size: 9pt;
    vertical-align: middle;
  }
}

@media print {
  .m-head,
  .m-back,
  .m-foot,
  .bottom-bar,
  .example-banner,
  .p-screen,
  .m-listen,
  .m-src-btn,
  .m-actions,
  .m-pager,
  .m-report-open {
    display: none !important;
  }

  body,
  body.has-bar {
    min-height: 0;
    background: var(--lm-bg-surface);
    color: var(--lm-text-strong);
    font-size: 14pt;
    line-height: 1.7;
  }

  .page,
  .page.m-main {
    max-width: none;
    padding: 0;
  }

  .m-flow > * + * {
    margin-top: 0;
  }

  .p-doc {
    gap: 0;
  }

  .p-cover h1 {
    font-size: 24pt;
  }

  .p-cover {
    gap: 8pt;
    padding-bottom: 12pt;
  }

  .p-agenda {
    gap: 8pt;
    padding-top: 0;
    break-before: page;
  }

  /* 첫 안건은 표지 바로 뒤에 잇는다(표지 쪽이 목차만 남고 비지 않게) */
  .p-cover + .p-agenda {
    padding-top: 16pt;
    break-before: auto;
  }

  .p-agenda h2 {
    font-size: 19pt;
  }

  .p-agenda h3 {
    margin-top: 10pt;
    font-size: 15pt;
  }

  h2,
  h3 {
    break-after: avoid;
  }

  .p-sentences li,
  .p-notes li,
  .p-unknown,
  .p-notice {
    break-inside: avoid;
  }

  .p-notes,
  .p-notice,
  .p-gloss {
    font-size: 11pt;
  }

  .p-ref {
    color: var(--lm-text-strong);
    font-size: 11pt;
  }

  /* 쪽 아래 여백 상자에도 같은 문장이 있으므로 상자 없이 작게 둔다 */
  .p-print-only {
    display: block;
    margin-top: 12pt;
  }

  .p-notice.p-print-only {
    padding: 0;
    border: 0;
    font-weight: 500;
  }

  a {
    color: inherit;
    text-decoration: none;
  }
}