/* CaMeDen 공통 설명 화면 틀 (11/2 · 환자와 함께 보는 화면 가독성 통일)
 *
 * 글씨는 4단계만:  큰 한 줄 21 · 카드 제목 18 · 본문 16 · 작은 표시 14   (13~15px 본문 금지)
 * 부품 4개:        ① 단계 버튼 + 높이 고정 그림 칸   ② 큰 한 줄 + [자세히]   ③ 접는 큰 제목   ④ 그림 카드
 * 임플란트(consult-implant.js) · 일반 진료(consult-general.js) · 라미네이트(consult.js)가 함께 씀 → 만드는 코드는 cmd-ui.js
 */
:root {
  --cu-big: 21px; --cu-title: 18px; --cu-body: 16px; --cu-small: 14px;
  --cu-gold: #d6bf8f; --cu-gold-soft: rgba(214, 191, 143, .14); --cu-red: #f0a3a2;
  --cu-ink: #f2eee8; --cu-text: #d6d3d1; --cu-mute: #a19c96;
  --cu-line: #2e2e2e; --cu-surface: #161616; --cu-pic-bg: #121212;
  --cu-pic-h: 360px;   /* 그림 칸 높이 (버튼으로 바꿔도 그대로) */
}
.cu { font-size: var(--cu-body); line-height: 1.65; color: var(--cu-text); }
.cu * { box-sizing: border-box; }

/* ① 단계 버튼 */
.cu-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0 14px; }
.cu-steps button { display: inline-flex; align-items: center; gap: 9px; border: 1.5px solid var(--cu-line); background: #121212; color: var(--cu-text);
  border-radius: 999px; padding: 9px 18px 9px 10px; font: inherit; font-size: var(--cu-title); font-weight: 700; cursor: pointer; }
.cu-steps button i { font-style: normal; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #2a2a2a; color: var(--cu-mute); font-size: var(--cu-small); }
.cu-steps button[aria-selected="true"] { background: var(--cu-gold); border-color: var(--cu-gold); color: #141414; }
.cu-steps button[aria-selected="true"] i { background: #141414; color: var(--cu-gold); }
.cu-steps button.warn[aria-selected="true"] { background: var(--cu-red); border-color: var(--cu-red); }
.cu-steps .sep { margin: 0 2px 0 8px; padding-left: 12px; border-left: 1px solid var(--cu-line); font-size: var(--cu-small); color: var(--cu-mute); }

/* 높이 고정 그림 칸 (그림이 바뀌어도 아래 버튼·글씨가 움직이지 않음) */
.cu-pic { position: relative; height: var(--cu-pic-h); max-width: 760px; margin: 0 auto; background: var(--cu-pic-bg); border: 1px solid var(--cu-line); border-radius: 14px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; }
.cu-pic > img, .cu-pic > svg, .cu-pic > video { max-width: 100%; max-height: 100%; height: 100%; width: 100%; object-fit: contain; display: block; }
.cu-pic .tag { position: absolute; left: 12px; top: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(14, 14, 14, .82); color: var(--cu-gold); font-size: var(--cu-small); font-weight: 700; }

/* ② 큰 한 줄 + [자세히] */
.cu-line { text-align: center; margin: 14px auto 4px; max-width: 760px; }
.cu-line .hd { margin: 0; font-size: var(--cu-big); font-weight: 800; line-height: 1.4; color: var(--cu-ink); }
.cu-line .hd.warn { color: var(--cu-red); }
.cu-line .chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.cu-line .chips li { padding: 4px 12px; border-radius: 999px; background: var(--cu-gold-soft); color: var(--cu-gold); font-size: var(--cu-small); font-weight: 700; }
.cu-more > summary { list-style: none; cursor: pointer; display: inline-block; margin: 10px 0 4px; padding: 4px 14px; border: 1px solid var(--cu-line); border-radius: 999px; font-size: var(--cu-small); color: var(--cu-mute); }
.cu-more > summary::-webkit-details-marker { display: none; }
.cu-more > summary::after { content: ' ▾'; } .cu-more[open] > summary::after { content: ' ▴'; }
.cu-more > div { margin-top: 8px; text-align: left; font-size: var(--cu-body); color: var(--cu-text); }

/* ③ 접는 큰 제목 (표 · 한계 · 주의할 점 · 과정) — 처음엔 접힘 */
.cu-fold { margin-top: 14px; border: 1px solid var(--cu-line); border-radius: 14px; background: var(--cu-surface); }
.cu-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 10px; padding: 16px 20px; font-size: var(--cu-title); font-weight: 800; color: var(--cu-gold); }
.cu-fold > summary::-webkit-details-marker { display: none; }
.cu-fold > summary::before { content: '▸'; } .cu-fold[open] > summary::before { content: '▾'; }
.cu-fold > summary small { font-size: var(--cu-small); font-weight: 500; color: var(--cu-mute); }
.cu-fold > .in { padding: 0 20px 18px; }
.cu-fold.warn > summary { color: var(--cu-red); }

/* 표 (접는 제목 안에서) */
.cu-table { width: 100%; border-collapse: collapse; font-size: var(--cu-body); }
.cu-table th, .cu-table td { border-bottom: 1px solid var(--cu-line); padding: 11px 12px; text-align: left; vertical-align: top; }
.cu-table thead th { color: var(--cu-gold); font-size: var(--cu-body); }
.cu-table tbody th { color: var(--cu-mute); font-weight: 700; width: 20%; }

/* 목록 (좋은 점 · 아쉬운 점) */
.cu-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.cu-list li { position: relative; padding-left: 26px; font-size: var(--cu-body); }
.cu-list li::before { content: '✓'; position: absolute; left: 2px; color: var(--cu-gold); font-weight: 800; }
.cu-list.bad li::before { content: '!'; color: var(--cu-red); left: 7px; }
.cu-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cu-two h4 { margin: 0 0 8px; font-size: var(--cu-title); color: var(--cu-ink); }

/* ④ 그림 카드 (경우 · 단계 나열) */
.cu-cards { display: grid; grid-template-columns: repeat(var(--cu-cols, 4), minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.cu-cards li { background: var(--cu-surface); border: 1px solid var(--cu-line); border-radius: 14px; overflow: hidden; }
.cu-cards .ph { aspect-ratio: 4 / 3; background: var(--cu-pic-bg); display: flex; align-items: center; justify-content: center; }
.cu-cards .ph img, .cu-cards .ph svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.cu-cards b { display: block; padding: 12px 14px 2px; font-size: var(--cu-title); color: var(--cu-ink); line-height: 1.4; }
.cu-cards span { display: block; padding: 0 14px 14px; font-size: var(--cu-small); color: var(--cu-mute); }

/* 작은 안내 (AI 그림 표시 등) */
.cu-note { margin: 10px 0 0; font-size: var(--cu-small); color: var(--cu-mute); text-align: center; }

@media (max-width: 900px) {
  :root { --cu-pic-h: 280px; }
  .cu-two { grid-template-columns: 1fr; } .cu-cards { grid-template-columns: 1fr 1fr; }
}

/* 폰: 접기 제목 옆 작은 설명은 아래 줄로 · 큰 한 줄 조금 작게 */
@media (max-width: 600px) {
  .cu-fold > summary { flex-wrap: wrap; row-gap: 2px; padding: 14px 16px; }
  .cu-fold > summary small { flex-basis: 100%; padding-left: 1.3em; }
}