/* 계산 과정 보기(.dv) — PC(lab 변수)·모바일(site 변수) 공용. 변수는 각 사이트 것을 먼저 쓰고 없으면 기본값. 글자: PC 14px 이상, 모바일 15px 이상(라이브 실측). */
.dv { --d-line: var(--lx-line, var(--line, #d9dde7)); --d-acc: var(--lx-accent, var(--ai-blue, #164ed8)); --d-aline: var(--lx-aline, var(--ai-blue-line, #bcd3f5)); --d-mut: var(--lx-muted, var(--muted, #5b6475)); --d-soft: var(--lx-soft, var(--ai-blue-soft, #e6eefc)); }
details.dv { border: 0.8px solid var(--d-aline); border-radius: 8px; background: #fff; margin: 0 0 12px; }
details.dv > summary { cursor: pointer; padding: 8px 12px; font-weight: 700; color: var(--d-acc); list-style: none; font-size: 15px; } details.dv > summary::-webkit-details-marker { display: none; }
details.dv > summary::before { content: "▸ "; } details.dv[open] > summary::before { content: "▾ "; } details.dv > summary small { font-weight: 400; color: var(--d-mut); margin-left: 6px; font-size: 13.5px; }
.dv-flow { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 0 12px 8px; font-size: 13.76px; } .dv-flow span { border: 0.8px solid var(--d-line); border-radius: 999px; padding: 1px 9px; background: #f7f9fc; } .dv-flow i { color: var(--d-mut); font-style: normal; }
ol.dv-steps { list-style: none; margin: 0; padding: 0 12px 10px; }
.dv-step { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px dashed var(--d-line); }
.dv-n { width: 26px; height: 26px; border-radius: 50%; background: var(--d-soft); color: var(--d-acc); font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.dv-step.dec .dv-n { background: #fff5dd; color: #6b4a06; }
.dv-l { font-weight: 600; margin: 0 0 4px; font-size: 15px; } .dv-expr { font-family: ui-monospace, Consolas, monospace !important; font-size: 13.5px; background: #f6f8fb; border-radius: 6px; padding: 4px 8px; display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
.dv-io { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 10px; margin-top: 6px; } .dv-io table { width: 100%; border-collapse: collapse; font-size: 13.76px; } .dv-io td { padding: 3px 6px; border-bottom: 1px solid #f0f2f5; vertical-align: top; } .dv-val { text-align: right; }
.dv-res { font-size: 14px; } .dv-res b { font-size: 16px; } .dv-src, .dv-dec, .dv-miss { font-size: 13.5px; } .dv-src { color: var(--d-mut); margin-top: 4px; }
.dv-sub { font-size: 13.76px; color: var(--d-mut); } .dv code, .dv-miss code { font-size: 12.5px; color: #3d4556; }
.dv-st { font-size: 13px; font-weight: 700; border-radius: 999px; padding: 0 7px; border: 1px dashed #7d8696; color: #4a5263; white-space: nowrap; }
.dv-more summary { cursor: pointer; font-size: 13.76px; color: var(--d-acc); } .dv-dec { background: #fffaf0; border: 1px solid #e7cf8f; border-radius: 6px; padding: 4px 8px; display: inline-block; }
.dv-q { display: flex; align-items: flex-end; gap: 1px; height: 46px; margin: 4px 0; } .dv-q i { flex: 1; background: #c9d6ee; min-width: 2px; } .dv-q i.min { background: #b88a1e; }
.dv-miss { border: 1px dashed #b9b2a2; border-radius: 8px; padding: 8px 12px; color: #4a5263; background: #fbfaf6; margin: 0 0 10px; }
@media (max-width: 700px) { .dv-io { grid-template-columns: minmax(0, 1fr); } .dv-step { grid-template-columns: 26px minmax(0, 1fr); gap: 8px; } details.dv > summary small { display: block; margin-left: 0; } }

.dvm { margin: 16px 0; } .dvm h2 { font-size: 18px; margin: 0 0 4px; } .dvm .note { margin: 0 0 8px; } .dvm details.dv > summary { font-size: 16px; } .dvm .dv-l { font-size: 16px; }
@media (max-width: 700px) { .dv-io table, .dv-io tbody, .dv-io tr, .dv-io td { display: block; width: 100%; } .dv-io tr { padding: 5px 0; border-bottom: 1px solid #eef0f4; } .dv-io td { border: 0; padding: 1px 0; } .dv-io td.dv-val { text-align: left; font-weight: 700; } .dv-io td:first-child { display: inline; } .dv-sub { overflow-wrap: anywhere; } }