/* css/courts.css — 사법부는 어떻게 일하나. civics.css 위에 얹는다. */

/* ── 법원의 층 ── */
/* 위가 좁고 아래가 넓다 — 사건이 아래에서 시작해 위로 올라간다 */
.ct-tiers { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ct-tier {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  border: 1px solid var(--line); border-radius: 12px; background: var(--paper-card);
  padding: 15px 18px; cursor: pointer; font-family: inherit; color: inherit;
  transition: border-color .15s, transform .1s;
}
.ct-tier:hover { border-color: var(--gold); transform: translateY(-2px); }
.ct-tier:first-child { border-color: var(--gold); background: var(--gold-soft); }
.ct-tier-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ct-tier-name { font-family: var(--serif); font-weight: 700; font-size: 17px; color: var(--ink); }
.ct-tier:hover .ct-tier-name { color: var(--gold); }
.ct-tier-badge {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; color: var(--gold);
  border: 1px solid var(--gold); border-radius: 3px; padding: 1px 5px; white-space: nowrap;
}
.ct-tier-one { font-size: 13px; color: var(--ink-dim); word-break: keep-all; }
.ct-tier-count { font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); }
.ct-updown {
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint);
  letter-spacing: .1em; margin-top: 4px;
}

.ct-sub-h {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--ink-faint);
  margin: 30px 0 12px; font-weight: 400; padding-top: 18px; border-top: 1px solid var(--line);
}
.ct-sp-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ct-sp {
  display: flex; flex-direction: column; gap: 3px;
  border: 1px dashed var(--line); border-radius: 9px; padding: 12px 14px;
}
.ct-sp b { font-size: 13.5px; color: var(--ink); }
.ct-sp span { font-size: 12.5px; color: var(--ink-dim); line-height: 1.7; word-break: keep-all; }

/* ── 재판의 종류 ── */
.ct-kinds { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.ct-kind {
  border: 1px solid var(--line); border-radius: 12px; background: var(--paper-card);
  padding: 16px 18px;
}
.ct-kind-who {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; color: var(--gold);
}
.ct-kind-n { font-family: var(--serif); font-size: 16px; margin: 5px 0 7px; color: var(--ink); }
.ct-kind p { font-size: 13px; line-height: 1.85; color: var(--ink-dim); margin: 0 0 8px;
  word-break: keep-all; }
.ct-kind-out {
  display: block; font-size: 12px; color: var(--ink-faint);
  border-top: 1px solid var(--line); padding-top: 8px; word-break: keep-all;
}

/* ── 형사재판의 흐름 ── */
.ct-flow { list-style: none; margin: 0; padding: 0; counter-reset: ct; }
.ct-step {
  position: relative; counter-increment: ct; padding: 0 0 8px 38px; margin-left: 11px;
  border-left: 1px solid var(--line);
}
.ct-step:last-child { border-left-color: transparent; padding-bottom: 0; }
.ct-step::before {
  content: counter(ct); position: absolute; left: -11px; top: 8px; z-index: 1;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--gold); color: var(--gold);
  font-family: var(--mono); font-size: 10.5px;
  display: flex; align-items: center; justify-content: center;
}
.ct-step > button {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start; width: 100%;
  text-align: left; border: 1px solid var(--line); border-radius: 11px;
  background: var(--paper-card); padding: 12px 15px; cursor: pointer;
  font-family: inherit; color: inherit; transition: border-color .15s, transform .1s;
}
.ct-step > button:hover { border-color: var(--gold); transform: translateX(2px); }
.ct-step.is-hot > button { border-color: var(--gold); background: var(--gold-soft); }
.ct-step-t {
  font-family: var(--serif); font-weight: 700; font-size: 15px; color: var(--ink);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.ct-step > button:hover .ct-step-t { color: var(--gold); }
.ct-step-t em {
  font-style: normal; font-family: var(--mono); font-size: 9px; letter-spacing: .06em;
  color: var(--gold); border: 1px solid var(--gold); border-radius: 3px; padding: 1px 4px;
}
.ct-step-who { font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); }

/* ── 2026년 10월 개편 ── */
.ct-notyet {
  border: 1px solid var(--gold); border-radius: 11px; background: var(--gold-soft);
  padding: 14px 17px; margin: 0 0 16px;
  font-size: 13px; line-height: 1.85; color: var(--ink-dim); word-break: keep-all;
}
.ct-notyet b {
  display: block; font-family: var(--serif); font-size: 15px; color: var(--gold);
  margin-bottom: 5px;
}
.ct-cols { display: flex; align-items: stretch; gap: 10px; margin-bottom: 20px; }
.ct-col {
  flex: 1; border: 1px solid var(--line); border-radius: 12px; padding: 15px 16px;
  background: var(--paper-card);
}
.ct-col.is-after { border-style: dashed; border-color: var(--gold); }
.ct-col h3 {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; margin: 0 0 12px;
  font-weight: 500; color: var(--ink-faint);
}
.ct-col.is-after h3 { color: var(--gold); }
.ct-org { display: flex; flex-direction: column; gap: 3px; padding: 9px 0;
  border-bottom: 1px solid var(--line); }
.ct-org:last-child { border-bottom: 0; padding-bottom: 0; }
.ct-org b { font-size: 13.5px; color: var(--ink); }
.ct-org span { font-size: 12px; line-height: 1.7; color: var(--ink-dim); word-break: keep-all; }
.ct-cols-arrow { display: flex; align-items: center; color: var(--gold); font-size: 18px; }

.ct-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0; }
.ct-side { border: 1px solid var(--line); border-radius: 11px; padding: 15px 17px; }
.ct-side h4 { font-family: var(--serif); font-size: 14px; margin: 0 0 7px; color: var(--ink); }
.ct-side p { font-size: 13px; line-height: 1.85; color: var(--ink-dim); margin: 0;
  word-break: keep-all; }
.ct-reform-note {
  border-left: 2px solid var(--line); padding-left: 13px; margin: 0;
  font-size: 12.5px; line-height: 1.85; color: var(--ink-faint); word-break: keep-all;
}

/* ── 영장 · 독립 ── */
.ct-why {
  border: 1px solid var(--gold); border-radius: 11px; background: var(--gold-soft);
  padding: 16px 18px; margin-bottom: 12px;
}
.ct-why h3 { font-family: var(--serif); font-size: 15px; margin: 0 0 7px; color: var(--gold); }
.ct-why p { font-size: 13.5px; line-height: 1.9; color: var(--ink-dim); margin: 0;
  word-break: keep-all; }
.ct-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ct-two-c { border: 1px dashed var(--line); border-radius: 11px; padding: 14px 16px; }
.ct-two-c h4 { font-family: var(--serif); font-size: 14px; margin: 0 0 6px; color: var(--ink); }
.ct-two-c p { font-size: 13px; line-height: 1.85; color: var(--ink-dim); margin: 0;
  word-break: keep-all; }

.ct-quote {
  margin: 0 0 18px; padding: 18px 22px;
  border-left: 3px solid var(--gold); background: var(--gold-soft);
  border-radius: 0 10px 10px 0;
  font-family: var(--serif); font-size: 15px; line-height: 1.9; color: var(--ink);
  word-break: keep-all;
}
.ct-balance {
  border-left: 2px solid var(--line); padding-left: 13px; margin: 14px 0 0;
  font-size: 13.5px; line-height: 1.9; color: var(--ink-dim); word-break: keep-all;
}

/* ── 재판의 원칙 ── */
.ct-rules { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.ct-rule {
  display: flex; flex-direction: column; gap: 5px; text-align: left;
  border: 1px solid var(--line); border-radius: 11px; background: var(--paper-card);
  padding: 14px 16px; cursor: pointer; font-family: inherit; color: inherit;
  transition: border-color .15s, transform .1s;
}
.ct-rule:hover { border-color: var(--gold); transform: translateY(-2px); }
.ct-rule-n { font-family: var(--serif); font-weight: 700; font-size: 15px; color: var(--ink); }
.ct-rule:hover .ct-rule-n { color: var(--gold); }
.ct-rule-d { font-size: 12.5px; line-height: 1.75; color: var(--ink-dim); word-break: keep-all; }

/* ── 국민참여재판 ── */
.ct-jury-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.ct-jc { border: 1px solid var(--line); border-radius: 11px; padding: 15px 17px;
  background: var(--paper-card); }
.ct-jc h4 {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; color: var(--gold);
  margin: 0 0 7px; font-weight: 500;
}
.ct-jc p { font-size: 13px; line-height: 1.85; color: var(--ink-dim); margin: 0;
  word-break: keep-all; }

@media (max-width: 640px) {
  .ct-tier { width: 100% !important; }
  .ct-sp-list, .ct-kinds, .ct-rules, .ct-two, .ct-sides, .ct-jury-grid {
    grid-template-columns: 1fr;
  }
  .ct-cols { flex-direction: column; }
  .ct-cols-arrow { justify-content: center; transform: rotate(90deg); }
}