/* JMockup의 화면 구성만 담당한다. Hyun UI 공개 컴포넌트의 내부 스타일은 덮어쓰지 않는다. */
html,body { height:100%; overflow:hidden; }
.mockup-auth { height:100dvh; overflow:auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-6); padding:var(--space-8) var(--space-4); background:var(--bg-subtle); box-sizing:border-box; }
.mockup-auth-brand { display:flex; align-items:center; gap:var(--space-3); }
.mockup-auth-card { width:min(100%,36rem); flex-shrink:0; }
.mockup-auth-caption { margin:0; text-align:center; }
.mockup-auth .mockup-page-head { padding:0; }
.mockup-auth-state { text-align:center; }
.mockup-auth-skeleton { min-height:var(--space-8); margin-block:var(--space-4); }
.mockup-form-message { color:var(--fg); margin:0; overflow-wrap:anywhere; }
.mockup-form-message:empty { display:none; }
.mockup-workflow { display:flex; flex-wrap:wrap; list-style:none; padding:0 0 var(--space-4); margin:0; gap:var(--space-6); border-bottom:1px solid var(--line); }
.mockup-workflow li { display:flex; align-items:center; gap:var(--space-2); color:var(--fg-muted); }
.mockup-workflow li[aria-current] { color:var(--fg); font-weight:700; }
.mockup-admin-navigation { margin-top:var(--space-6); }
.mockup-admin-navigation summary { padding:var(--space-3); cursor:pointer; }
.mockup-connection-details { margin-top:var(--space-4); }
.mockup-connection-details summary { cursor:pointer; margin-bottom:var(--space-4); }
.mockup-redirect-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-3); align-items:end; }
.mockup-redirect-cell { min-width:0; }
.mockup-redirect-action { padding-bottom:var(--space-1); }
.mockup-catalog-controls { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr)); gap:var(--space-4); align-items:end; }
.mockup-catalog-search { flex:1; min-width:0; }
.mockup-catalog-actions { justify-content:flex-end; }
.mockup-catalog-pager { display:flex; justify-content:flex-end; align-items:center; flex-wrap:wrap; gap:var(--space-3); }
.mockup-connection-link { align-self:flex-start; }
.mockup-source-field { display:flex; flex-direction:column; gap:var(--space-2); min-width:0; }
.mockup-source-selection { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-3); }
.mockup-source-field .sh-field { min-width:0; }
.mockup-source-status { margin:0; overflow-wrap:anywhere; }
.mockup-source-status[data-check="verified"] { color:var(--fg); font-weight:600; }
.mockup-source-status[data-check="failed"] { color:var(--danger); }
.mockup-source-dialog { width:min(96vw,760px); max-height:85dvh; }
.mockup-source-dialog .sh-dialog-body { overflow:auto; max-height:70dvh; }
.mockup-source-location { margin:0; padding:var(--space-3); background:var(--bg-muted); border-radius:var(--radius-md); overflow-wrap:anywhere; font-weight:600; }
.mockup-source-tree { display:flex; flex-direction:column; gap:var(--space-1); min-height:var(--space-6); }
.mockup-source-row { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); padding:var(--space-3); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.mockup-source-file { display:flex; align-items:center; gap:var(--space-3); min-width:0; overflow-wrap:anywhere; }
.mockup-source-file > div { display:flex; flex-direction:column; gap:var(--space-1); min-width:0; }
.mockup-app { display:grid; grid-template-columns:auto minmax(0,1fr); height:100dvh; }
.mockup-main { display:flex; flex-direction:column; min-width:0; min-height:0; }
.mockup-navigation { min-height:0; }
.mockup-content { flex:1; min-height:0; overflow:auto; padding:var(--space-4) var(--space-6); scroll-padding-top:var(--space-4); }
.mockup-content:focus { outline:none; }
.mockup-page { display:flex; flex-direction:column; gap:var(--space-4); max-width:1440px; margin-inline:auto; min-width:0; container:mockup-page / inline-size; }
.mockup-header-spacer { flex:1; }
.mockup-header-title { font-weight:700; flex-shrink:0; }
.mockup-header-status { flex-shrink:0; white-space:nowrap; }
.mockup-footer { display:flex; justify-content:space-between; gap:var(--space-4); padding:var(--space-2) var(--space-8); color:var(--fg-muted); border-top:1px solid var(--line); }
.mockup-page-header { flex:none; background:var(--bg); border-bottom:1px solid var(--line); }
.mockup-page-head { padding:var(--space-3) var(--space-6); display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); }
.mockup-page-intro { display:flex; flex-direction:column; flex:1 1 18rem; min-width:0; gap:var(--space-1); }
.mockup-page-head > .mockup-actions { justify-content:flex-end; margin-left:auto; }
.mockup-card-actions { margin-left:auto; justify-content:flex-end; }
.mockup-view-tablist { flex-wrap:wrap; }
.mockup-management-selection { max-width:36rem; }
[data-mockup-view-action][hidden] { display:none; }
.mockup-section-heading { flex-wrap:wrap; align-items:center; }
.mockup-section-title { flex:1 1 15rem; min-width:0; }
.mockup-result-dialog { width:min(92vw,30rem); }
.mockup-detail-dialog { width:min(92vw,42rem); }
.mockup-job-dialog { width:min(94vw,56rem); max-height:88dvh; padding:0; }
.mockup-job-dialog[open] { display:flex; flex-direction:column; }
.mockup-job-dialog-head { flex-shrink:0; padding:var(--space-4) var(--space-6); border-bottom:1px solid var(--line); }
.mockup-job-dialog-head .mockup-actions:empty { display:none; }
.mockup-job-dialog-head .mockup-actions { justify-content:flex-end; }
.mockup-job-dialog .sh-dialog-body { min-height:0; overflow:auto; }
.mockup-job-dialog .sh-dialog-foot { flex-shrink:0; flex-wrap:wrap; }
.mockup-dialog-heading { display:flex; align-items:center; gap:var(--space-3); }
.mockup-dialog-heading h2 { flex:1; min-width:0; margin:0; }
.mockup-result-symbol { display:flex; align-items:center; justify-content:center; padding:var(--space-2); border-radius:var(--radius-md); background:var(--accent-soft); color:var(--primary); }
.mockup-result-symbol[data-tone="success"] { color:var(--success); background:var(--success-soft); }
.mockup-result-symbol[data-tone="danger"] { color:var(--danger); background:var(--danger-soft); }
.mockup-result-message { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
.mockup-datagrid-host { min-width:0; width:100%; overflow:auto; }
.mockup-grid-action-column { width:128px; white-space:nowrap; }
.mockup-datagrid-host > .mockup-catalog-pager { margin-bottom:var(--space-3); }
.mockup-datagrid-host .mockup-grid-scroll { max-height:var(--mockup-grid-height,360px); overflow:auto; overscroll-behavior:contain; }
.mockup-diagnostics-controls { display:flex; align-items:end; justify-content:flex-end; flex-wrap:wrap; gap:var(--space-4); }
.mockup-diagnostics-controls > .sh-field { min-width:8rem; }
.mockup-diagnostics-controls > .mockup-actions { justify-content:flex-end; }
.mockup-page-head h1,.mockup-row-title,.mockup-description,.mockup-row-description { margin:0; }
.mockup-description { color:var(--fg-muted); max-width:75ch; text-wrap:pretty; }
.mockup-row-title { font-weight:600; overflow-wrap:anywhere; }
.mockup-row-description { margin-block:var(--space-1); text-wrap:pretty; }
.mockup-actions,.mockup-inline { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); min-width:0; }
.mockup-stack { display:flex; flex-direction:column; gap:var(--space-3); min-width:0; }
.mockup-project-groups { gap:var(--space-6); }
.mockup-access-policies { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr)); gap:var(--space-4); align-items:start; }
.mockup-access-policies [hidden] { display:none; }
.mockup-project-management { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,26rem),1fr)); gap:var(--space-4); align-items:start; }
.mockup-project-management .mockup-section-title { flex-basis:8rem; }
.mockup-project-management .mockup-section-heading > .mockup-card-actions { flex-basis:auto; }
.mockup-project-mockups { list-style:none; padding:0; margin:0; }
.mockup-project-mockup { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); padding-block:var(--space-2); }
.mockup-project-mockup + .mockup-project-mockup { border-top:1px solid var(--line); }
.mockup-project-mockup > .mockup-break { display:flex; flex-direction:column; gap:var(--space-1); }
.mockup-project-mockup > .mockup-actions { flex-wrap:nowrap; flex-shrink:0; }
.mockup-filters { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr); gap:var(--space-4); align-items:start; }
.mockup-result-line { display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-2); }
.mockup-artifact-columns,.mockup-artifact { display:grid; grid-template-columns:minmax(0,1.8fr) minmax(0,1fr) minmax(0,1fr) auto; gap:var(--space-6); }
.mockup-artifact-columns { padding-block:var(--space-2); border-bottom:1px solid var(--line); }
.mockup-artifact { align-items:center; padding-block:var(--space-4); }
.mockup-artifact + .mockup-artifact { border-top:1px solid var(--line); }
.mockup-artifact-title { min-width:0; }
.mockup-artifact-actions { display:flex; flex-wrap:nowrap; gap:var(--space-2); align-items:center; justify-content:flex-end; }
.mockup-field-label { display:none; }
.mockup-meta { display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-2); min-width:0; overflow-wrap:anywhere; }
.mockup-meta small { color:var(--fg-muted); }
.mockup-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(300px,1fr); gap:var(--space-6); align-items:start; }
.mockup-full { grid-column:1 / -1; }
.mockup-form { width:100%; min-width:0; }
.mockup-settings-grid { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:var(--space-6); align-items:start; }
.mockup-field-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4); align-items:start; }
.mockup-settings-review { position:sticky; top:0; min-width:0; }
.mockup-form-actions { display:flex; justify-content:flex-end; align-items:center; flex-wrap:wrap; gap:var(--space-3); padding-top:var(--space-4); border-top:1px solid var(--line); }
.mockup-form-error:empty { display:none; }
.mockup-note { margin:0; }
.mockup-definition { display:grid; grid-template-columns:96px minmax(0,1fr); gap:var(--space-3) var(--space-4); margin:0; }
.mockup-definition dt { color:var(--fg-muted); }
.mockup-definition dd { margin:0; overflow-wrap:anywhere; }
.mockup-break { overflow-wrap:anywhere; min-width:0; }
.mockup-open-link { text-decoration:none; }
.mockup-screen-reader { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.mockup-skip { position:fixed; z-index:100; top:var(--space-2); left:var(--space-2); transform:translateY(-160%); }
.mockup-skip:focus { transform:none; }
.mockup-mobile-menu { display:none; }
.mockup-viewer-toolbar { display:grid; grid-template-columns:1fr; gap:var(--space-4); }
.mockup-path-grid { display:grid; grid-template-columns:minmax(260px,.8fr) minmax(0,1.4fr); gap:var(--space-6); align-items:start; }
.mockup-empty-space { padding:var(--space-8) var(--space-4); display:flex; flex-direction:column; justify-content:center; align-items:center; gap:var(--space-3); text-align:center; box-sizing:border-box; }
.mockup-empty-space > * { margin-block:0; max-width:100%; }
.mockup-empty-space .mockup-actions { justify-content:center; }
.mockup-loading-placeholder { min-height:220px; }
.mockup-log { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; font-family:var(--font-mono),var(--font-sans); color:var(--fg); background:var(--bg-muted); padding:var(--space-4); border-radius:var(--radius-md); }
/* 레이어는 페이지 컨테이너 밖에 있으므로 자체 너비에 맞춰 요약 열을 접는다. */
.mockup-job-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr)); gap:var(--space-6); align-items:center; }
.mockup-job-progress { min-width:0; }
.mockup-project-controls { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:var(--space-4); align-items:end; }
.mockup-project-controls > .sh-field { min-width:0; }
/* 프로젝트 선택은 정보량에 맞춰 여러 열로 배치하고 공식 Radio 입력을 유지한다. */
.mockup-project-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-2); }
.mockup-project-option { display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--space-3); align-items:center; min-width:0; padding:var(--space-3); border:1px solid var(--line); border-radius:var(--radius-md); }
.mockup-project-option:has(input:checked) { background:var(--accent-soft); border-color:var(--primary); }
.mockup-project-name,.mockup-project-path { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mockup-project-path { color:var(--fg-muted); }
.mockup-selection-copy { display:flex; flex-direction:column; gap:var(--space-1); min-width:0; }
.mockup-job-list { list-style:none; padding:0; margin:0; }
.mockup-job-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-3); align-items:center; padding-block:var(--space-2); }
.mockup-job-row + .mockup-job-row { border-top:1px solid var(--line); }
.mockup-job-description { display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-4); align-items:center; margin-top:var(--space-2); }
.mockup-job-row > .mockup-stack { gap:var(--space-2); }
.mockup-job-row > .mockup-actions { justify-content:flex-end; }
.mockup-selection { max-width:520px; }
.mockup-version-row { display:grid; grid-template-columns:96px 120px minmax(0,1fr) auto; gap:var(--space-6); align-items:center; padding-block:var(--space-4); }
.mockup-version-row + .mockup-version-row { border-top:1px solid var(--line); }
.mockup-version-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:var(--space-2); }
/* 넓은 콘텐츠 열은 정렬된 목록이며 좁아지면 정보별 묶음으로 바뀐다. DOM 읽기 순서는 같다. */
@container mockup-page (max-width:1000px) {
  .mockup-project-choices { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mockup-catalog-controls { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .mockup-settings-grid { grid-template-columns:1fr; }
  .mockup-settings-review { position:static; }
  .mockup-artifact-columns,.mockup-artifact { gap:var(--space-4); grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) auto; }
  .mockup-version-row { grid-template-columns:80px minmax(0,1fr) minmax(0,1.3fr); }
  .mockup-version-actions { grid-column:1 / -1; justify-content:flex-end; }
}
@container mockup-page (max-width:800px) {
  .mockup-catalog-controls { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mockup-grid,.mockup-path-grid { grid-template-columns:1fr; }
  .mockup-job-summary { grid-template-columns:1fr; }
  .mockup-viewer-toolbar { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .mockup-artifact-columns { display:none; }
  .mockup-artifact { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4); }
  .mockup-artifact-title,.mockup-artifact-actions { grid-column:1 / -1; }
  .mockup-artifact-actions { justify-content:flex-end; }
  .mockup-field-label { display:block; }
}
@container mockup-page (max-width:520px) {
  .mockup-project-choices,.mockup-project-controls { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:1100px) { .mockup-content { padding:var(--space-6); } }
@media (max-width:900px) {
  .mockup-app { grid-template-columns:minmax(0,1fr); }
  .mockup-navigation { display:none; }
  .mockup-mobile-menu { display:inline-flex; }
  .mockup-footer { padding-inline:var(--space-6); }
}
@media (max-width:600px) {
  .mockup-section-heading > .mockup-card-actions { flex-basis:100%; }
  .mockup-page-head { padding:var(--space-3) var(--space-4); }
  .mockup-page-intro { flex-basis:8rem; }
  .mockup-page-header .mockup-description { display:none; }
  .mockup-auth { justify-content:flex-start; }
  .mockup-content { padding:var(--space-4); }
  .mockup-page { gap:var(--space-4); }
  .mockup-project-groups { gap:var(--space-4); }
  .mockup-footer { display:none; }
  .mockup-filters { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-3); }
  .mockup-filters > :first-child { grid-column:1 / -1; }
  .mockup-result-line { align-items:flex-start; }
  .mockup-result-line > :last-child { max-width:70%; text-align:right; }
  .mockup-field-grid,.mockup-viewer-toolbar { grid-template-columns:1fr; }
  .mockup-artifact-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mockup-definition { grid-template-columns:80px minmax(0,1fr); gap:var(--space-3); }
  .mockup-version-row { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4); }
  .mockup-version-row > :first-child { grid-column:1 / -1; }
  .mockup-version-actions { display:grid; grid-template-columns:1fr; width:100%; }
  .mockup-form-actions { align-items:stretch; flex-direction:column-reverse; }
}

/* 표 도구의 위치만 나누고 Hyun UI 페이지/입력 스타일은 그대로 사용한다. */
.mockup-grid-controls { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--space-3); }
.mockup-numbered-pages { display:flex; justify-content:center; padding-top:var(--space-2); }

/* 보기 버튼의 텍스트가 모바일 카드 값 위에 겹치지 않도록 동작 행을 따로 배치한다. */
.mockup-grid-tools { display:flex; flex-wrap:wrap; justify-content:flex-end; }
@media (max-width:600px) {
  .mockup-datagrid-host .mockup-grid-scroll .mockup-grid-table td.mockup-grid-row-action { position:static !important; display:flex; justify-content:flex-end; }
}