/* 자료 취합 화면. 색·간격은 KAMU 토큰만 쓴다. */
.fc-start{display:grid;grid-template-columns:1.3fr 1fr;gap:var(--kamu-space-6);align-items:center}
.fc-steps{margin:0;padding:0;list-style:none;counter-reset:s;display:grid;gap:var(--kamu-space-4)}
.fc-steps li{counter-increment:s;display:grid;grid-template-columns:28px 1fr;column-gap:var(--kamu-space-3)}
.fc-steps li::before{content:counter(s);grid-row:span 2;width:28px;height:28px;border-radius:50%;background:var(--kamu-color-brand);color:var(--kamu-color-on-brand);display:grid;place-items:center;font-weight:800;font-size:var(--kamu-text-sm)}
.fc-steps span{color:var(--kamu-color-muted);font-size:var(--kamu-text-sm)}
#notice:not(:empty){margin-bottom:var(--kamu-space-4)}
.fc .kamu-alert a{color:inherit;font-weight:700}
.fc .kamu-alert ul{margin:var(--kamu-space-1) 0 0;padding-left:1.1em;display:grid;gap:2px}
.fc .small{font-size:var(--kamu-text-xs)}

.fc-work{display:grid;grid-template-columns:300px minmax(0,1fr);gap:var(--kamu-space-5);align-items:start}
.fc-side{display:grid;gap:var(--kamu-space-4);position:sticky;top:80px;max-height:calc(100vh - 96px);overflow:auto}
.fc-sum{display:grid;gap:2px}
.fc-sum b{font-size:var(--kamu-text-lg)}
.fc-sum span{font-size:var(--kamu-text-xs)}
.fc-side fieldset{border:0;margin:0;padding:0;display:grid;gap:var(--kamu-space-2)}
.fc-side legend{font-weight:800;margin-bottom:var(--kamu-space-2);padding:0}
.fc-side .kamu-checkbox>div{display:flex;flex-direction:column;flex:1;min-width:0}
.fc-fn{display:grid;grid-template-columns:1fr 1fr;gap:var(--kamu-space-2)}
.fc-out{padding-top:var(--kamu-space-3)!important;border-top:1px solid var(--kamu-color-border)!important}
#result:empty{display:none}

.fc-main{display:grid;gap:var(--kamu-space-4);min-width:0}
.fc-sec{display:grid;gap:var(--kamu-space-3);min-width:0}
.fc-sec h2{font-size:var(--kamu-text-lg);font-weight:800}
.fc-sec h3{font-size:var(--kamu-text-md);font-weight:800;display:flex;align-items:center;gap:var(--kamu-space-2)}
.fc-rowhead{display:flex;align-items:center;gap:var(--kamu-space-2) var(--kamu-space-3);flex-wrap:wrap;justify-content:space-between}
.fc-checks{display:grid;gap:var(--kamu-space-2)}
.fc-checks .kamu-alert-body{overflow-wrap:anywhere}
.fc-alias{width:auto;max-width:100%;display:inline-block;margin:2px 0}
.fc-resub{display:grid;gap:var(--kamu-space-2)}
.fc-resubtext{width:100%;resize:vertical;font-size:var(--kamu-text-sm);line-height:1.6;min-height:0;height:auto}

.fc-picks{display:grid;gap:var(--kamu-space-1)}
.fc-picks>b{margin-top:var(--kamu-space-2)}
.fc-picks>b:first-child{margin-top:0}
.fc-chips{display:flex;flex-wrap:wrap;gap:var(--kamu-space-2);margin-top:var(--kamu-space-1)}
.fc-chip{border:1px solid var(--kamu-color-border);border-radius:var(--kamu-radius-md);padding:var(--kamu-space-1) var(--kamu-space-3);background:var(--kamu-color-surface);align-items:center}
.fc-chip:has(input:checked){border-color:var(--kamu-color-text);background:var(--kamu-color-subtle)}

.fc-scroll{overflow:auto;max-height:520px;border:1px solid var(--kamu-color-border);border-radius:var(--kamu-radius-md)}
.fc-table{border-collapse:collapse;font-size:var(--kamu-text-sm);min-width:100%}
.fc-table th,.fc-table td{padding:var(--kamu-space-1) var(--kamu-space-2);border-bottom:1px solid var(--kamu-color-border);border-right:1px solid var(--kamu-color-border);text-align:left;vertical-align:top;white-space:pre-line;max-width:260px}
.fc-table thead th{position:sticky;top:0;background:var(--kamu-color-subtle);font-weight:700;white-space:nowrap;z-index:1}
.fc-table td.n{text-align:right;color:var(--kamu-color-muted);white-space:nowrap}
.fc-table td.empty{background:var(--kamu-color-warning-soft)}
.fc-table tr.dup td{background:var(--kamu-color-subtle)}
.fc-table tr.dup td.empty{background:var(--kamu-color-warning-soft)}
.fc-files td{vertical-align:middle}
.fc-files tr.base td{background:var(--kamu-color-info-soft)}
.fc-files .fname{min-width:180px;overflow-wrap:anywhere;white-space:normal}
.fc-files .why{display:block;font-size:var(--kamu-text-xs);color:var(--kamu-color-muted)}
.fc-files input[type=radio]{width:18px;height:18px;accent-color:var(--kamu-color-text)}

@media (max-width:900px){
  .fc-start,.fc-work{grid-template-columns:1fr}
  .fc-side{position:static;max-height:none}
}

/* 예시 파일로 해 보기 */
.fc-samples{display:flex;gap:var(--kamu-space-2);flex-wrap:wrap;justify-content:center;align-items:center;margin-top:var(--kamu-space-4);font-size:var(--kamu-text-sm)}
#sampleNote:not(:empty){margin-bottom:var(--kamu-space-4)}
#sampleNote ul{margin:6px 0;padding-left:18px}

/* 어떻게 모이나요(그림 설명) — 시작 화면에서만 보인다 */
#start[hidden] ~ #explain{display:none}
.fc-explain{margin-top:var(--kamu-space-4)}
.fc-explain>h2{font-size:var(--kamu-text-lg);font-weight:800}
.fc-explain>p{margin:4px 0 var(--kamu-space-4)}
.fx-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--kamu-space-4)}
.fx-case{border:1px solid var(--kamu-color-border);border-radius:var(--kamu-radius-md);padding:var(--kamu-space-4);background:var(--kamu-color-canvas);min-width:0}
.fx-case h3{font-size:var(--kamu-text-sm);font-weight:700;margin:0 0 var(--kamu-space-3);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.fx-flow{display:grid;grid-template-columns:1fr auto 1.25fr;gap:var(--kamu-space-3);align-items:center}
.fx-in{display:grid;gap:var(--kamu-space-2)}
.fx-arrow{font-size:22px;font-weight:800;color:var(--kamu-color-muted)}
.fx-file{margin:0;background:var(--kamu-color-surface);border:1px solid var(--kamu-color-border);border-radius:var(--kamu-radius-sm);padding:6px;min-width:0;overflow-x:auto}
.fx-file figcaption{font-size:11px;font-weight:700;margin-bottom:4px;display:flex;align-items:center;gap:5px}
.fx-file figcaption::before{content:"";width:10px;height:10px;border-radius:2px;background:var(--fx-tone,var(--kamu-color-subtle));border:1px solid var(--kamu-color-border)}
.fx-a{--fx-tone:var(--kamu-color-info-soft)}
.fx-b{--fx-tone:color-mix(in srgb,var(--kamu-color-brand) 30%,var(--kamu-color-surface))}
.fx-res{--fx-tone:var(--kamu-color-surface);border-color:var(--kamu-color-text)}
.fx-t{border-collapse:collapse;width:100%;font-size:11.5px;line-height:1.35}
.fx-t th,.fx-t td{border:1px solid var(--kamu-color-border);padding:2px 5px;white-space:nowrap;text-align:left}
.fx-t th{background:var(--kamu-color-subtle);font-weight:700}
.fx-form thead{display:none}
.fx-form td:first-child{background:var(--kamu-color-subtle);font-weight:700}
.fx-t tr.fx-a td{background:var(--kamu-color-info-soft)}
.fx-t tr.fx-b td{background:color-mix(in srgb,var(--kamu-color-brand) 30%,var(--kamu-color-surface))}
.fx-t tr.fx-blank td{background:repeating-linear-gradient(135deg,transparent 0 4px,var(--kamu-color-subtle) 4px 8px)}
.fx-notes{margin:var(--kamu-space-3) 0 0;padding-left:18px;font-size:var(--kamu-text-sm);color:var(--kamu-color-muted)}
.fx-notes b{color:var(--kamu-color-text)}
.fx-limits{margin-top:var(--kamu-space-4)}
@media (max-width:900px){.fx-grid{grid-template-columns:1fr}}
@media (max-width:520px){.fx-flow{grid-template-columns:1fr}.fx-arrow{transform:rotate(90deg);justify-self:center}}
/* 원본 파일의 값 칸도 결과와 같은 색으로 칠해 어디서 왔는지 보이게 */
.fx-in .fx-file .fx-t tbody td{background:var(--fx-tone)}
.fx-in .fx-file .fx-form td:first-child{background:var(--kamu-color-subtle)}
.fx-in .fx-file .fx-t tr.fx-blank td{background:repeating-linear-gradient(135deg,transparent 0 4px,var(--kamu-color-subtle) 4px 8px)}
