/* 앱 실행(04·32)·앱별 개인 자료(13) 화면과 shared/_dynamic_field 오류 표시 */

/* 항목 위치 오류: 입력 아래 문구 + 위험색 테두리(DESIGN §6 입력폼, §9 오류 연결) */
.dynamic-field .field-error{display:flex;gap:6px;align-items:flex-start;color:var(--color-danger);font-size:13px;font-weight:550;line-height:1.6;margin:6px 0 0}
.dynamic-field .field-error::before{content:"!";flex:none;display:inline-grid;place-items:center;width:16px;height:16px;margin-top:3px;border-radius:50%;background:var(--color-danger);color:#fff;font-size:11px;font-weight:700;line-height:1}
.dynamic-field input[aria-invalid="true"]:not([type=checkbox]):not([type=radio]),.dynamic-field textarea[aria-invalid="true"],.dynamic-field select[aria-invalid="true"]{border-color:var(--color-danger);box-shadow:0 0 0 1px var(--color-danger)}
.dynamic-field input[type=checkbox][aria-invalid="true"]{outline:2px solid var(--color-danger);outline-offset:1px}
.dynamic-field [data-rows]:focus-visible,.dynamic-field .check-group:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:6px}
.dynamic-field>.form-label{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.dynamic-field>.form-label .required{margin-left:0}
/* 파일 선택: 브라우저 기본 버튼 대신 한국어 버튼. 실제 input 은 보이지 않게 두되 키보드 focus 를 받는다 */
.file-picker{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:12px 16px;border:1px dashed var(--color-control-border);border-radius:8px;background:var(--color-surface)}
.dynamic-field .file-picker input.file-input[type=file]{position:absolute;width:1px;height:1px;min-height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.file-picker .file-button{margin:0;cursor:pointer}
.file-picker .file-input:focus-visible+.file-button{outline:2px solid var(--color-primary);outline-offset:3px}
.file-picker .form-help{margin:0}
.check-group{display:flex;flex-direction:column;gap:4px}
.check-group .check-label{min-height:44px;margin:0}
.upload-size{color:var(--color-muted);margin:0 4px;font-variant-numeric:tabular-nums}

/* 상단 오류 요약: 제출 실패 시 focus 이동 대상 */
.error-summary{border-width:2px}
.error-summary h2{font-size:18px;line-height:1.5;margin:0 0 4px}
.error-summary .error-list{margin-bottom:0}
.error-summary a{color:var(--color-danger);font-weight:550}
.error-summary:focus{outline:2px solid var(--color-danger);outline-offset:3px}

/* 저장 상태: 저장 중…/저장 완료/저장 실패 를 색상+문구+표식으로 구분 */
.save-pill{display:inline-flex;align-items:center;gap:8px;min-height:40px;max-width:100%;margin:0;padding:8px 14px;border-radius:20px;background:var(--color-surface-muted);color:var(--color-muted);font-size:14px;font-weight:600;line-height:22px}
.save-pill[data-tone=saved]{background:var(--color-primary-soft);color:var(--color-primary)}
.save-pill[data-tone=saved]::before{content:"✓";font-weight:700}
.save-pill[data-tone=busy]{background:var(--color-info-soft);color:var(--color-info)}
.save-pill[data-tone=busy]::before{content:"";flex:none;width:12px;height:12px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin 1s linear infinite}
.save-pill[data-tone=error]{background:var(--color-danger-soft);color:var(--color-danger)}
.save-pill[data-tone=error]::before{content:"!";flex:none;display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--color-danger);color:#fff;font-size:12px;font-weight:700}

/* 앱 실행 */
.run-header-side{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:12px}
.restore-summary h2{font-size:18px;line-height:1.5;margin-bottom:8px}
.restore-summary p{margin-bottom:8px}
.restore-summary ul{margin:0;padding-left:20px}
.run-privacy{display:flex;gap:8px;align-items:flex-start;font-size:14px}
.run-submit-bar{margin-top:4px}

/* 개인 자료: 보조 내비 224px + (입력 영역 + 실행·이력 보조 열) */
.materials-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start;min-width:0}
.materials-form{display:flex;flex-direction:column;gap:20px;min-width:0}
.materials-fieldset{display:flex;flex-direction:column;gap:20px;min-width:0;margin:0;padding:0;border:0}
/* 공개 중단 앱: 자료는 읽기 전용으로 보이고 입력·버튼은 비활성(다운로드 링크는 유지) */
.materials-fieldset:disabled :is(input:not([type=checkbox]):not([type=radio]),select,textarea){background:var(--color-surface-muted);color:var(--color-ink)}
.materials-fieldset:disabled button{cursor:not-allowed}
.materials-summary{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px}
.materials-summary h2{margin:2px 0 4px}
.materials-summary p{margin:0}
.materials-save{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.privacy-note{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;color:var(--color-muted);font-size:13px}
.privacy-note .icon{width:16px;height:16px}
.materials-files .upload-item{background:var(--color-surface);padding:14px 16px}
.materials-actions{display:flex;justify-content:flex-end}
.materials-aside .item-row a{text-decoration:none}
.migration-panel{border-color:var(--color-accent)}
.migration-panel h3{font-size:16px;margin:20px 0 10px}
.migration-changes{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.migration-changes li{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:6px;background:var(--color-surface-muted);font-size:14px}
.migration-changes li.is-blocking{background:var(--color-accent-soft)}
.migration-preview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:20px}
.migration-preview section{min-width:0;border:1px solid var(--color-border);border-radius:8px;padding:16px}
.migration-preview h3{margin-top:0}
.migration-preview dl{margin:0}
.migration-preview dt{color:var(--color-muted);font-size:13px;margin-top:12px}
.migration-preview dt:first-child{margin-top:0}
.migration-preview dd{margin:4px 0 0;overflow-wrap:anywhere}

/* 자료 충돌 비교 */
.conflict-panel h2{font-size:18px;line-height:1.5;margin-bottom:8px}
.conflict-panel .table-wrap{background:var(--color-surface);margin:12px 0 16px}
.conflict-panel th,.conflict-panel td{color:var(--color-ink);overflow-wrap:anywhere}
.conflict-panel tr.is-different td{background:var(--color-accent-soft)}

@media(max-width:1199px){.materials-layout{grid-template-columns:minmax(0,1fr)}}
@media(max-width:767px){
  .run-header-side{width:100%;justify-content:space-between}
  .materials-save{align-items:flex-start}
  .materials-actions .btn{width:100%;min-height:48px}
  .migration-preview{grid-template-columns:minmax(0,1fr)}
  /* 32 모바일 실행: 결과 생성을 안전 영역 위 하단에 고정한다. 본문 하단 패딩과 scroll-padding 으로
     마지막 입력·오류 문구와 focus 된 항목이 버튼 뒤로 숨지 않게 하고, 위치는 focus 에 따라 바꾸지 않는다
     (탭하는 순간 버튼이 움직이지 않도록). 가상 키보드는 이 막대 위를 덮으므로 입력을 가리지 않는다. */
  body:has(.run-submit-bar){padding-bottom:calc(80px + env(safe-area-inset-bottom))}
  html:has(.run-submit-bar){scroll-padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  .run-submit-bar{position:fixed;left:0;right:0;bottom:0;z-index:30;margin:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--color-surface);border-top:1px solid var(--color-border);box-shadow:0 -4px 16px rgb(32 51 47 / 8%)}
  .run-submit-bar .btn{min-height:48px;font-size:16px}
}
.recent-run a{display:flex;flex-direction:column;gap:2px;min-width:0;overflow-wrap:anywhere}
.undo-notice{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:8px 0}
.undo-notice:empty{display:none}
@media(max-width:767px){.recent-run a{min-height:44px;justify-content:center}.undo-notice .btn{min-height:44px}}
.studio-note{margin:4px 0 0}
@media(max-width:767px){.item-row a.run-link{display:inline-flex;align-items:center;min-height:44px}}