/* css/lawmaking.css — 법은 어떻게 만들어지나.
   civics.css를 함께 싣고 그 위에 이 지면만의 것을 얹는다. */

/* ── 법의 위계 ── */
/* 위에서 아래로 좁아지는 계단. 위가 아래를 덮는다는 관계를 폭으로 보여준다. */
.lm-tiers { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.lm-tier {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--paper-card);
  padding: 14px 18px; cursor: pointer; font-family: inherit; color: inherit;
  transition: border-color .15s, background .15s;
}
.lm-tier:first-child { border-color: var(--gold); background: var(--gold-soft); }
.lm-tier:hover { border-color: var(--gold); background: var(--gold-soft); }
.lm-tier-name {
  font-family: var(--serif); font-weight: 700; font-size: 16px; color: var(--ink);
  white-space: nowrap;
}
.lm-tier:hover .lm-tier-name { color: var(--gold); }
.lm-tier-who {
  font-family: var(--mono); font-size: 11px; color: var(--ink-faint);
  text-align: right; word-break: keep-all;
}

/* ── 아홉 걸음 ── */
.lm-path { list-style: none; margin: 0; padding: 0; counter-reset: lm; }
.lm-step { position: relative; counter-increment: lm; padding-left: 40px; margin-left: 12px;
  border-left: 1px solid var(--line); padding-bottom: 10px; }
.lm-step:last-child { border-left-color: transparent; padding-bottom: 0; }
.lm-step::before {
  content: counter(lm); position: absolute; left: -12px; top: 8px;
  width: 24px; height: 24px; border-radius: 50%; z-index: 1;
  background: var(--paper); border: 1px solid var(--gold); color: var(--gold);
  font-family: var(--mono); font-size: 11px;
  display: flex; align-items: center; justify-content: center;
}
.lm-step > button {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start; width: 100%;
  text-align: left; border: 1px solid var(--line); border-radius: 11px;
  background: var(--paper-card); padding: 13px 16px; cursor: pointer;
  font-family: inherit; color: inherit; transition: border-color .15s, transform .1s;
}
.lm-step > button:hover { border-color: var(--gold); transform: translateX(2px); }
.lm-step-t {
  font-family: var(--serif); font-weight: 700; font-size: 15.5px; color: var(--ink);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; word-break: keep-all;
}
.lm-step > button:hover .lm-step-t { color: var(--gold); }
.lm-step-t em {
  font-style: normal; font-family: var(--mono); font-size: 9px; letter-spacing: .08em;
  color: var(--gold); border: 1px solid var(--gold); border-radius: 3px; padding: 1px 4px;
}
.lm-step-who { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); }
.lm-step.is-hot > button { border-color: var(--gold); background: var(--gold-soft); }

/* ── 법사위 ── */
.lm-bottle, .lm-valve {
  border-radius: 11px; padding: 16px 18px; margin-bottom: 12px;
}
.lm-bottle { border: 1px solid var(--gold); background: var(--gold-soft); }
.lm-valve { border: 1px dashed var(--line); }
.lm-bottle h3, .lm-valve h3 {
  font-family: var(--serif); font-size: 15px; margin: 0 0 7px; word-break: keep-all;
}
.lm-bottle h3 { color: var(--gold); }
.lm-valve h3 { color: var(--ink); }
.lm-bottle p, .lm-valve p {
  font-size: 13.5px; line-height: 1.9; color: var(--ink-dim); margin: 0; word-break: keep-all;
}
.lm-now {
  border-left: 2px solid var(--gold); padding-left: 14px; margin: 16px 0 0;
  font-size: 13.5px; line-height: 1.9; color: var(--ink-dim); word-break: keep-all;
}
.lm-now b { color: var(--gold); display: block; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .12em; margin-bottom: 4px; }

/* ── 장치들 ── */
.lm-tools { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.lm-tool {
  display: flex; flex-direction: column; gap: 5px; text-align: left;
  border: 1px solid var(--line); border-radius: 11px; background: var(--paper-card);
  padding: 16px 18px; cursor: pointer; font-family: inherit; color: inherit;
  transition: border-color .15s, transform .1s;
}
.lm-tool:hover { border-color: var(--gold); transform: translateY(-2px); }
.lm-tool-n { font-family: var(--serif); font-weight: 700; font-size: 15.5px; color: var(--ink);
  word-break: keep-all; }
.lm-tool:hover .lm-tool-n { color: var(--gold); }
.lm-tool-k { font-size: 12.5px; color: var(--ink-dim); word-break: keep-all; }

/* ── 정족수 ── */
.lm-quorum { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.lm-q {
  display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 12px;
  padding: 13px 16px; border-bottom: 1px solid var(--line); align-items: baseline;
}
.lm-q:last-child { border-bottom: 0; }
.lm-q:nth-child(odd) { background: var(--paper-card); }
.lm-q-what { font-size: 13.5px; font-weight: 700; color: var(--ink); word-break: keep-all; }
.lm-q-need {
  font-family: var(--mono); font-size: 11.5px; color: var(--gold); word-break: keep-all;
  line-height: 1.65;
}
.lm-q-ex { font-size: 12px; color: var(--ink-faint); word-break: keep-all; line-height: 1.65; }

/* ── 시민의 자리 ── */
.lm-citizen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.lm-cit { border: 1px solid var(--line); border-radius: 11px; padding: 15px 17px; }
.lm-cit h3 { font-family: var(--serif); font-size: 14.5px; margin: 0 0 6px; color: var(--ink); }
.lm-cit p { font-size: 13px; line-height: 1.85; color: var(--ink-dim); margin: 0;
  word-break: keep-all; }

@media (max-width: 640px) {
  .lm-tier { width: 100% !important; padding: 12px 14px; }
  .lm-tier-who { font-size: 10px; }
  .lm-tools, .lm-citizen { grid-template-columns: 1fr; }
  .lm-q { grid-template-columns: 1fr; gap: 4px; }
  .lm-q-ex { font-size: 12px; }
}