/* 공문서 작성 규칙 검사 화면. 색·간격은 KAMU 토큰만 쓴다. */
.dc{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);grid-template-areas:'drop result' 'rules result';grid-template-rows:auto 1fr;gap:var(--kamu-space-4) var(--kamu-space-6);align-items:start}
.dc-drop{grid-area:drop}.dc-rules{grid-area:rules}.dc-result{grid-area:result}
.dc h2{font-size:var(--kamu-text-md);font-weight:800;margin:0 0 var(--kamu-space-1)}
.dc p{margin:0}
.dc-drop{border-style:dashed;border-width:2px;border-color:var(--kamu-color-control-border);text-align:center;display:grid;gap:var(--kamu-space-3);justify-items:center;transition:background var(--kamu-duration),border-color var(--kamu-duration)}
.dc-drop.drag{border-color:var(--kamu-color-text);background:var(--kamu-color-subtle)}
.dc-file:empty{display:none}
.dc-file{display:grid;gap:2px;font-size:var(--kamu-text-sm);word-break:break-all}
.dc-file span{color:var(--kamu-color-muted)}
.dc-rules>.muted{font-size:var(--kamu-text-xs);margin-bottom:var(--kamu-space-3)}
.dc-rule{padding:var(--kamu-space-2) 0;border-top:1px solid var(--kamu-color-border)}
.dc-rule>div{min-width:0}
.dc-rule p{font-size:var(--kamu-text-xs);color:var(--kamu-color-muted);margin-top:2px}
.dc-rule a{font-size:var(--kamu-text-xs);color:var(--kamu-color-muted)}
.dc-tags{display:inline-flex;flex-wrap:wrap;gap:var(--kamu-space-1);vertical-align:middle;margin-left:var(--kamu-space-1)}
.dc-result{min-width:0;display:grid;gap:var(--kamu-space-3)}
.dc-result-head{display:flex;align-items:center;gap:var(--kamu-space-3);flex-wrap:wrap}
.dc-result-head h2{margin:0}
.dc-actions{margin-left:auto;display:flex;gap:var(--kamu-space-2);flex-wrap:wrap}
#msg:empty,#summary:empty{display:none}
.dc-sum{display:flex;flex-wrap:wrap;gap:var(--kamu-space-1) var(--kamu-space-3);align-items:baseline}
.dc-sum .muted{font-size:var(--kamu-text-sm)}
#summary .dc-tags{margin:var(--kamu-space-2) 0 0}
.dc-list{display:grid;gap:var(--kamu-space-2)}
.dc-empty{text-align:center;display:grid;gap:var(--kamu-space-1);padding:var(--kamu-space-8) var(--kamu-space-5)}
.dc-item{background:var(--kamu-color-surface);border:1px solid var(--kamu-color-border);border-radius:var(--kamu-radius-md);padding:var(--kamu-space-3) var(--kamu-space-4);display:grid;gap:var(--kamu-space-2);min-width:0}
.dc-item-head{display:flex;align-items:center;gap:var(--kamu-space-2) var(--kamu-space-3);flex-wrap:wrap;font-size:var(--kamu-text-sm)}
.dc-item-head .grow{flex:1}
.dc-pick{align-items:center;font-size:var(--kamu-text-sm)}
.dc-pick input{margin:0}
.dc-diff{margin:0;display:grid;gap:var(--kamu-space-1)}
.dc-diff>div{display:grid;grid-template-columns:4.5em minmax(0,1fr);gap:var(--kamu-space-2);align-items:baseline}
.dc-diff dt{font-size:var(--kamu-text-xs);color:var(--kamu-color-muted);font-weight:700}
.dc-diff dd{margin:0;font-size:var(--kamu-text-sm);overflow-wrap:anywhere;white-space:pre-wrap}
.dc-diff mark{color:inherit;border-radius:var(--kamu-radius-sm);padding:0 2px;font-weight:700}
.dc-cur{background:var(--kamu-color-danger-soft)}
.dc-new{background:var(--kamu-color-success-soft)}
.dc-sp{color:var(--kamu-color-muted);font-weight:400;font-size:.85em}
.dc-note{font-size:var(--kamu-text-xs);color:var(--kamu-color-muted)}
.dc-info{margin-top:var(--kamu-space-8)}
@media (max-width:900px){
  .dc{grid-template-columns:minmax(0,1fr);grid-template-areas:'drop' 'result' 'rules';grid-template-rows:auto}
}
@media (max-width:620px){
  .dc-actions{margin-left:0;width:100%}
  .dc-actions .kamu-button--primary{flex:1}
  .dc-diff>div{grid-template-columns:minmax(0,1fr);gap:0}
}