/* 홈페이지 제작 페이지 전용 */

.cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.case {
  padding: 24px 26px; border-radius: var(--r-lg);
  background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-card);
}
.case-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.case-head .mono { font-size: 14.5px; font-weight: 600; color: var(--cyan-ink); word-break: break-all; }
.case .kv { grid-template-columns: 104px 1fr; }
.case .kv dd b { color: var(--miss); font-weight: 700; }

.case-quote {
  margin-top: 16px; padding: 14px 16px; border-radius: var(--r);
  background: var(--cyan-50); border: 1px solid var(--cyan-100);
}
.case-quote.plain { background: var(--g50); border-color: var(--line); }
.case-quote .lbl { font-size: 11.5px; font-weight: 700; color: var(--cyan-ink); margin-bottom: 8px; }
.case-quote.plain .lbl { color: var(--muted); }
.case-quote p { font-size: 13.5px; line-height: 1.85; color: var(--ink-2); }
.case-quote p b { color: var(--ink); font-weight: 600; }

/* ── 바이트 비교 ───────────────────────────────────────────────────── */

.bytes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 840px; }
.byte { padding: 24px 26px; border-radius: var(--r-lg); border: 1px solid var(--line); }
.byte.ok  { background: var(--cyan-50); border-color: var(--cyan-100); }
.byte.bad { background: var(--miss-bg); border-color: #f5d9d4; }
.byte-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.byte-h .byte-k { font-size: 13.5px; font-weight: 600; color: var(--ink-3); }
.byte b {
  display: block; font-size: 42px; font-weight: 800; line-height: 1.1;
  letter-spacing: -.045em;
}
.byte.ok  b { color: var(--navy); }
.byte.bad b { color: var(--miss); }
.byte b span { font-size: 17px; font-weight: 600; color: var(--muted); margin-left: 4px; }
.byte-l { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.byte-l li { display: flex; gap: 9px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.byte-l i { font-style: normal; font-weight: 700; flex-shrink: 0; }
.byte.ok  .byte-l i { color: var(--cyan-ink); }
.byte.bad .byte-l i { color: var(--miss); }

/* ── 걸린 글 제목 목록 ─────────────────────────────────────────────── */

.titles {
  max-width: 880px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--paper); overflow: hidden;
}
.titles li { padding: 15px 22px; border-bottom: 1px solid var(--hair); }
.titles li:last-child { border-bottom: 0; }
.titles .t { display: block; font-size: 15.5px; line-height: 1.6; color: var(--ink); font-weight: 500; }
.titles .m { display: block; font-size: 12.5px; color: var(--muted); margin-top: 5px; }
.titles .m .mono { color: var(--cyan-ink); }

@media (max-width: 900px) {
  .cases, .bytes { grid-template-columns: 1fr; }
}
/* 좁은 폰 — 카드 속 표를 한 칸으로. 104px 이름 칸 때문에 320px 에서 카드가 넘쳤다 */
@media (max-width: 560px) {
  .case { padding: 20px; }
  .case .kv { grid-template-columns: 1fr; }
  .case .kv dt { padding-bottom: 0; border-bottom: 0; }
}