/*
화면 부품 — 카드 · 머리 · 정의 목록 · 폼 껍데기.
빌더가 소유하는 둘째 시트다(첫째는 shell.css). 퍼블리셔 사본 넷은 여기서 안 건드린다.
⛔ 목업과 앱이 이 파일 하나를 같이 링크한다. 목업 폴더로 규칙을 되돌리지 마라 —
2026-08-14 에 목업에만 있던 규칙 열여덟이 실물 화면을 민무늬로 만든 자리다.
⛔ 규칙 하나를 여기로 옮길 땐 그 변형(modifier)도 같이 옮겨라. 목업은 여전히
shell.css → _mock.css → screens.css 순으로 건다. 기본 규칙만 옮기고 형제
변형(예: .filter-bar--four, .filter-bar--five)을 _mock.css 에 남겨 두면,
같은 특이도(0,1,0)에서 나중에 걸리는 쪽이 이긴다 — 기본이 여기 있고
변형이 저기 있으면 **기본이 변형을 덮어써 버린다.** 2026-08-15 에 이걸
놓쳐서 목업 여덟 장의 필터 줄이 깨졌었다.
*/
.frd-owner-scope {
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
/* requirement-concept 래퍼 · rq-head · rq-card — docs/mockups/_requirement-concepts.css 에서 옮김 */
.requirement-concept { min-width: 0; }
.rq-head { margin-bottom: var(--space-4); padding-bottom: var(--space-3); display: flex; align-items: center; gap: var(--space-4); border-bottom: 1px solid var(--color-line); }
.rq-head__copy { min-width: 0; }
.rq-head h1 { margin: 0; font-size: 1.5rem; }
.rq-head p { max-width: 78ch; margin: var(--space-2) 0 0; color: var(--color-muted); font-size: 0.8125rem; line-height: 1.55; }
.rq-head__actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); flex: none; }
.rq-head__note { max-width: 34ch; margin: 0; color: var(--color-muted); font-size: .75rem; line-height: 1.5; }
.rq-head__note--blocked { color: var(--color-danger, #c0392b); }
.rq-head__actions form { margin: 0; display: grid; }
.rq-head__overflow { margin-left: var(--space-1); padding-left: var(--space-3); border-left: 1px solid var(--color-line); }
.rq-head__overflow > .rq-head__more { width: 44px; min-height: 44px; padding: 0; justify-content: center; font-size: 1.3rem; font-weight: 750; line-height: 1; }
.rq-head__overflow-menu { min-width: 210px; z-index: 20; }
.rq-head__overflow-menu form { display: block; }
.rq-head__overflow-menu button:disabled { color: var(--color-muted); cursor: not-allowed; opacity: .58; }
.rq-head__overflow-menu .rq-head__delete-action,
.rq-head__overflow-menu .dev-request-danger-action { color: var(--color-error); }
#open-frd-overview { cursor: pointer; }
.rq-kicker { display: block; margin-bottom: 3px; color: var(--color-action-primary); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.035em; }
.rq-card { min-width: 0; border: 1px solid var(--color-line); border-radius: var(--radius-panel); background: var(--color-canvas); }
.rq-card__head { min-height: 60px; padding: var(--space-3) var(--space-4); display: flex; align-items: center; gap: var(--space-3); border-bottom: 1px solid var(--color-line); }
.rq-card__head > div { min-width: 0; }
.rq-card__head h2, .rq-card__head h3 { margin: 0; font-size: 0.9375rem; }
.rq-card__head p { margin: 3px 0 0; color: var(--color-muted); font-size: 0.7rem; }
.rq-card__head > :last-child:not(:first-child) { margin-left: auto; }
.rq-card__body { padding: var(--space-4); }
/* 개발요청서 목록 — FRD 작업 목록처럼 업무와 시스템을 독립 열로 읽는다. */
.dev-request-table tbody .status-badge { font-weight: 700; }
.dev-request-row--merge-required > td { background: #fffaf1; }
.dev-request-row--merge-required > td:first-child { box-shadow: inset 3px 0 0 #c8873e; }
/* 개발요청서 상세 — 저장된 데이터 묶음을 임의로 연결하지 않고, 없는 묶음은 자리를 만들지 않는다. */
.dev-request-detail, .dev-request-practical { max-width: 100%; min-width: 0; }
.dev-request-head h1 { overflow-wrap: anywhere; }
.dev-request-head .rq-head__actions { max-width: 520px; flex-wrap: wrap; justify-content: flex-end; }
.dev-request-practical { margin-top: var(--space-4); display: grid; gap: var(--space-3); }
.dev-request-practical .pre-line { white-space: pre-line; }
.dev-request-source { min-width: 0; overflow: hidden; border: 1px solid #cec2e5; border-radius: var(--radius-panel); background: #fbf9fd; }
.dev-request-source__head { padding: var(--space-4) var(--space-6); display: flex; align-items: center; gap: var(--space-6); border-bottom: 1px solid var(--color-action-line); }
.dev-request-source__head > div { min-width: 0; }
.dev-request-source__head h2 { margin: var(--space-2) 0 0; font-size: 1rem; line-height: 1.45; }
.dev-request-source__body { max-width: 100ch; margin: 0; padding: var(--space-4) var(--space-6); color: #454249; font-size: .875rem; line-height: 1.72; overflow-wrap: anywhere; }
.dev-request-source__stats { margin: 0 0 0 auto; display: flex; flex: none; }
.dev-request-source__stats > div { min-width: 104px; padding: 0 var(--space-4); border-left: 1px solid var(--color-action-line); }
.dev-request-source__stats dt { color: var(--color-muted); font-size: .75rem; }
.dev-request-source__stats dd { margin: 4px 0 0; font-size: 1rem; font-weight: 800; }
.dev-request-source__stats .is-zero dd { color: #aaa6ad; }
.dev-request-source__content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dev-request-source__section { min-width: 0; padding: var(--space-5, 20px); border-right: 1px solid var(--color-line); }
.dev-request-source__section:last-child { border-right: 0; }
.dev-request-source__section--summary { background: #fbf9fd; }
.dev-request-source__section > span { color: var(--color-action-primary); font-size: .68rem; font-weight: 800; }
.dev-request-source__section h3 { margin: 5px 0 0; font-size: .875rem; line-height: 1.45; }
.dev-request-source__section p { margin: 9px 0 0; color: #4f4d52; font-size: .8125rem; line-height: 1.75; overflow-wrap: anywhere; }
.dev-request-meta-grid { margin: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-panel); background: var(--color-canvas); }
.dev-request-meta-grid > div { min-width: 0; padding: var(--space-3); border-right: 1px solid var(--color-line); }
.dev-request-meta-grid > div:last-child { border-right: 0; }
.dev-request-meta-grid dt { color: var(--color-muted); font-size: .75rem; }
.dev-request-meta-grid dd { min-width: 0; margin: 6px 0 0; overflow-wrap: anywhere; font-size: .875rem; font-weight: 750; line-height: 1.45; }
.dev-request-meta-grid__facets { display: flex; flex-wrap: wrap; gap: 4px; }
.dev-request-meta-grid__facets span + span::before { content: '·'; margin-right: 4px; color: var(--color-muted); }
.dev-request-primary { min-width: 0; display: grid; grid-template-columns: 1fr; }
.dev-request-panel { min-width: 0; overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-panel); background: var(--color-canvas); }
.dev-request-panel__head { min-height: 70px; padding: var(--space-4) var(--space-5, 20px); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); border-bottom: 1px solid var(--color-line); background: #fcfbfa; }
.dev-request-panel__head h2 { margin: 0; font-size: 1rem; }
.dev-request-panel__head p { margin: 5px 0 0; color: var(--color-muted); font-size: .75rem; line-height: 1.5; }
.dev-request-panel__head > span { flex: none; color: var(--color-action-primary); font-size: .75rem; font-weight: 800; }
.dev-request-scope-list { margin: 0; padding: 0; list-style: none; }
.dev-request-scope-list > li { min-width: 0; padding: var(--space-4) var(--space-5, 20px); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); border-bottom: 1px solid var(--color-line); }
.dev-request-scope-list > li:last-child { border-bottom: 0; }
.dev-request-scope-list strong { display: block; font-size: .875rem; line-height: 1.5; }
.dev-request-scope-list p { margin: 6px 0 0; color: var(--color-muted); font-size: .8125rem; line-height: 1.65; }
.dev-request-nature { padding: 5px 8px; border-radius: 999px; color: #347251; background: #eaf5ed; font-size: .72rem; font-weight: 800; }
.dev-request-gate { min-width: 0; overflow: hidden; border: 1px solid #cfd8d2; border-radius: var(--radius-panel); background: var(--color-canvas); }
.dev-request-gate__head { min-height: 72px; padding: var(--space-4) var(--space-5, 20px); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); border-bottom: 1px solid #e2e8e4; background: #f8fbf9; }
.dev-request-gate__head h2 { margin: 3px 0 0; font-size: 1rem; line-height: 1.35; }
.dev-request-gate__state { flex: none; padding: 6px 10px; border-radius: 999px; color: #376448; background: #e4f1e8; font-size: .74rem; font-weight: 750; white-space: nowrap; }
.dev-request-gate--working { border-color: #c9bee1; }
.dev-request-gate--working .dev-request-gate__head { border-bottom-color: var(--color-action-line); background: var(--color-action-surface); }
.dev-request-gate--working .dev-request-gate__state { color: #5d477e; background: #eee8f7; }
.dev-request-gate--blocked { border-color: #e6d1a8; }
.dev-request-gate--blocked .dev-request-gate__head { border-bottom-color: #ead8b2; background: #fff9ed; }
.dev-request-gate--blocked .dev-request-gate__state { color: #76511b; background: #f6e5c0; }
.dev-request-gate__working { position: relative; padding: 18px var(--space-5, 20px) 22px; display: grid; align-items: start; gap: 12px; }
.dev-request-gate__working { grid-template-columns: minmax(0, 1fr); }
.dev-request-gate__working strong { display: block; color: var(--color-ink); font-size: .875rem; line-height: 1.5; }
.dev-request-gate__working p { margin: 4px 0 0; color: var(--color-muted); font-size: .79rem; line-height: 1.6; }
.dev-request-gate__bar { position: absolute; right: var(--space-5, 20px); bottom: 9px; left: var(--space-5, 20px); height: 3px; overflow: hidden; border-radius: 999px; background: #ece7f3; }
.dev-request-gate__bar i { position: absolute; top: 0; bottom: 0; width: 36%; border-radius: inherit; background: #7957a6; animation: dev-request-gate-progress 1.45s ease-in-out infinite; }
.dev-request-gate__summary { margin: 0; padding: 12px var(--space-5, 20px); color: #625a4e; background: #fffcf6; border-bottom: 1px solid #eee3cc; font-size: .8rem; line-height: 1.55; }
.dev-request-gate ul { margin: 0; padding: 0; list-style: none; }
.dev-request-gate li { padding: var(--space-3) var(--space-5, 20px); display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; color: #4f4d52; border-bottom: 1px solid var(--color-line); font-size: .8125rem; line-height: 1.6; }
.dev-request-gate li:last-child { border-bottom: 0; }
.dev-request-gate__item { min-width: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: baseline; gap: 3px 9px; }
.dev-request-gate__item > strong { color: var(--color-ink); }
.dev-request-gate__item > em { grid-column: 1 / -1; margin-top: 5px; padding: 8px 10px; display: flex; align-items: flex-start; gap: 8px; border-radius: 7px; color: #5d5750; background: #f7f5f1; font-style: normal; }
.dev-request-gate__item > em b { flex: none; color: #725c39; font-size: .7rem; }
.dev-request-gate details { grid-column: 1 / -1; margin-top: 4px; color: var(--color-muted); }
.dev-request-gate summary { width: fit-content; cursor: pointer; font-size: .76rem; font-weight: 700; }
.dev-request-gate details p { margin: 6px 0 0; padding: 8px 10px; border-radius: 6px; background: #f6f4f1; font-size: .75rem; line-height: 1.55; }
@keyframes dev-request-gate-progress { 0% { left: -38%; } 55% { left: 52%; } 100% { left: 102%; } }
@media (prefers-reduced-motion: reduce) {
.dev-request-gate__bar i { animation: none; }
.dev-request-gate__bar i { left: 0; width: 100%; opacity: .55; }
}
.dev-request-review-stack { min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); align-items: start; gap: var(--space-3); }
.dev-request-review { min-width: 0; overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-panel); background: var(--color-canvas); }
.dev-request-review--issue { border-color: #ead8b2; }
.dev-request-review h2 { margin: 0; padding: var(--space-4); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); border-bottom: 1px solid var(--color-line); font-size: .875rem; }
.dev-request-review--issue h2 { color: #76511b; border-bottom-color: #ead8b2; background: #fff8e9; }
.dev-request-review h2 span { font-size: .72rem; }
.dev-request-review__summary { margin: 0; padding: 10px var(--space-4); color: #625a4e; background: #fffcf6; font-size: .78rem; line-height: 1.55; border-bottom: 1px solid #eee3cc; }
.dev-request-review ol, .dev-request-review ul { margin: 0; padding: 0; list-style: none; }
.dev-request-review li { padding: var(--space-3) var(--space-4); display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 9px; color: #4f4d52; font-size: .8125rem; line-height: 1.65; border-bottom: 1px solid var(--color-line); }
.dev-request-review li:last-child { border-bottom: 0; }
.dev-request-review--issue li { background: #fffcf6; }
.dev-request-check, .dev-request-alert-mark { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font-size: .68rem; font-weight: 900; }
.dev-request-check { color: #347251; background: #eaf5ed; }
.dev-request-alert-mark { color: #76511b; background: #f6e5c0; }
.dev-request-review details { margin-top: 6px; color: var(--color-muted); }
.dev-request-review summary { width: fit-content; cursor: pointer; font-size: .76rem; font-weight: 700; }
.dev-request-review details p { margin: 6px 0 0; padding: 8px 10px; border-radius: 6px; background: #f6f4f1; font-size: .75rem; line-height: 1.55; }
.dev-request-footnote { margin: -6px 4px 0; color: #7a7580; font-size: .76rem; line-height: 1.6; }
.dev-request-footnote strong { color: #5e5a63; font-weight: 700; margin-right: 6px; }
.dev-request-implementation { min-width: 0; display: grid; grid-template-columns: 1fr; align-items: start; gap: var(--space-4); }
.dev-request-implementation--single { grid-template-columns: 1fr; }
.dev-request-panel > .dev-request-table-wrap { width: 100%; min-width: 0; border: 0; border-radius: 0; }
.dev-request-table-wrap:focus-visible { outline: 2px solid var(--color-action-primary); outline-offset: -2px; }
.dev-request-detail-table { min-width: 760px; table-layout: fixed; }
.dev-request-detail-table tbody th { padding: var(--space-4); vertical-align: top; border-top: 1px solid var(--color-line); background: var(--color-canvas); font-weight: 700; text-align: left; }
.dev-request-detail-table tbody td { vertical-align: top; white-space: normal; }
.dev-request-detail-table tbody th, .dev-request-detail-table tbody td { line-height: 1.6; }
.dev-request-detail-table tbody tr:last-child > * { border-bottom: 0; }
.dev-request-screen-table__target { width: 24%; }
.dev-request-screen-table__meta { width: 31%; }
.dev-request-screen-name > span:first-child { color: var(--color-muted); font-size: .72rem; }
.dev-request-screen-title { position: relative; margin-top: 5px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dev-request-screen-title strong { min-width: 0; display: block; font-weight: 400; line-height: 1.45; }
.dev-request-screen-table tr.is-state-case .dev-request-screen-name { padding-left: 28px; position: relative; }
.dev-request-screen-table tr.is-state-case .dev-request-screen-name::before {
border-bottom: 1px solid var(--color-line);
border-left: 1px solid var(--color-line);
content: "";
height: 20px;
left: 12px;
position: absolute;
top: 0;
width: 10px;
}
.dev-request-state-case { color: var(--color-action-primary); font-size: .7rem; font-weight: 700; }
.dev-request-state-definition { display: grid; gap: 6px; margin: 0 0 var(--space-3); padding: var(--space-3); border-radius: var(--radius-control); background: var(--color-soft); }
.dev-request-state-definition div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--space-2); }
.dev-request-state-definition dt { color: var(--color-muted); font-size: .72rem; font-weight: 700; }
.dev-request-state-definition dd { margin: 0; font-size: .78rem; line-height: 1.5; }
.dev-request-menu-notice { width: 19px; height: 19px; flex: none; display: grid; place-items: center; border: 1px solid #b9b4c0; border-radius: 50%; color: #6f6977; background: #fff; font-family: Georgia, serif; font-size: .7rem; font-weight: 700; line-height: 1; cursor: help; }
.dev-request-menu-notice:hover, .dev-request-menu-notice:focus-visible { border-color: var(--color-action-primary); color: var(--color-action-primary); outline: 2px solid var(--color-action-primary-soft); outline-offset: 2px; }
.dev-request-menu-notice__tip { width: 100%; flex-basis: 100%; display: none; padding: var(--space-2) var(--space-3); border-radius: var(--radius-message); color: var(--color-muted); background: var(--color-soft); font-size: .75rem; font-weight: 500; line-height: 1.55; }
.dev-request-menu-notice:hover + .dev-request-menu-notice__tip, .dev-request-menu-notice:focus + .dev-request-menu-notice__tip { display: block; }
.dev-request-code { display: block; color: var(--color-muted); font-size: .75rem; line-height: 1.55; }
.dev-request-code + .dev-request-code { margin-top: 6px; }
.dev-request-code b { color: var(--color-action-primary); font-weight: 700; }
.dev-request-screen-meta b { display: inline; overflow-wrap: anywhere; }
.dev-request-list { margin: 0; padding-left: 1.1rem; line-height: 1.6; }
.dev-request-list li + li { margin-top: 4px; }
.dev-request-empty-copy { color: var(--color-muted); }
.dev-request-backend-table { min-width: 680px; }
.dev-request-backend-table__category { width: 110px; }
.dev-request-backend-table__target { width: 38%; }
.dev-request-backend-table tbody th { overflow-wrap: anywhere; font-weight: 400; }
.dev-request-backend-table p { margin: 0; color: #504e53; }
.dev-request-boundary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.dev-request-boundary-grid--single { grid-template-columns: 1fr; }
.dev-request-boundary-grid article { min-width: 0; overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-panel); background: var(--color-canvas); }
.dev-request-boundary-grid article:first-of-type { border-top: 3px solid #7fa489; }
.dev-request-boundary-grid article:last-of-type { border-top: 3px solid #aa9c92; }
.dev-request-boundary-grid h3 { margin: 0; padding: var(--space-4); display: flex; justify-content: space-between; border-bottom: 1px solid var(--color-line); font-size: .875rem; }
.dev-request-boundary-grid h3 span { color: var(--color-action-primary); font-size: .72rem; }
.dev-request-boundary-grid ul { margin: 0; padding: 0; list-style: none; }
.dev-request-boundary-grid li { padding: var(--space-4); border-bottom: 1px solid var(--color-line); }
.dev-request-boundary-grid li:last-child { border-bottom: 0; }
.dev-request-boundary-grid strong { font-size: .875rem; }
.dev-request-boundary-grid p { margin: 6px 0 0; color: var(--color-muted); font-size: .8125rem; line-height: 1.6; }
.dev-delivery-dialog { width: min(620px, calc(100% - 48px)); }
.dev-delivery-dialog__body { display: grid; gap: var(--space-5, 20px); }
.dev-delivery-dialog textarea.field__control { height: auto; min-height: 116px; padding-block: 10px; resize: vertical; line-height: 1.6; }
.dev-delivery-dialog .field__label { display: flex; align-items: center; gap: 7px; font-size: .8125rem; }
.dev-delivery-dialog .field__label span { color: var(--color-muted); font-size: .68rem; font-weight: 500; }
.dev-delivery-date-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.dev-delivery-summary { padding: var(--space-4); display: grid; gap: 5px; border: 1px solid var(--color-action-line); border-radius: var(--radius-control); background: var(--color-action-surface); }
.dev-delivery-summary > span { color: var(--color-action-primary); font-size: .68rem; font-weight: 800; }
.dev-delivery-summary strong { font-size: .9375rem; line-height: 1.45; }
.dev-delivery-summary small { color: var(--color-muted); font-size: .75rem; line-height: 1.55; }
.dev-delivery-summary small b { color: var(--color-ink); }
.dev-delivery-file { min-height: 76px; padding: var(--space-3) var(--space-4); display: flex; align-items: center; gap: var(--space-3); border: 1px dashed #a9b4be; border-radius: var(--radius-control); background: #fafbfc; cursor: pointer; }
.dev-delivery-file:hover { border-color: var(--color-action-primary); background: var(--color-action-primary-soft); }
.dev-delivery-file strong { flex: none; padding: 8px 11px; border: 1px solid var(--color-line); border-radius: var(--radius-control); background: var(--color-canvas); font-size: .75rem; }
.dev-delivery-file span { min-width: 0; overflow-wrap: anywhere; color: var(--color-muted); font-size: .75rem; line-height: 1.5; }
.rq-lead { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.7; }
.rq-copy { margin: var(--space-3) 0 0; color: #4f4d48; font-size: 0.875rem; line-height: 1.75; }
/* 요구사항 상세(02a)가 쓰는 나머지 — docs/mockups/_requirement-concepts.css 에서 옮김 (2026-08-16).
⛔ 변형(--five·--six)을 저기 두고 오지 마라. 목업은 screens.css 다음에
_requirement-concepts.css 를 걸어서, 기본만 옮기면 남은 변형이 이 기본을 덮는다
(2026-08-15 에 filter-bar 로 데인 자리와 같은 부류다). 미디어 블록도 아래에 같이 옮겼다. */
.rq-meta { margin: 0 0 var(--space-4); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-panel); background: var(--color-canvas); }
.rq-meta--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rq-meta--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rq-meta--six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.rq-meta > div { min-width: 0; padding: var(--space-3) var(--space-4); border-right: 1px solid var(--color-line); }
.rq-meta > div:last-child { border-right: 0; }
.rq-meta dt { color: var(--color-muted); font-size: 0.68rem; }
.rq-meta dd { margin: var(--space-1) 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8125rem; font-weight: 700; }
.rq-meta dd.rq-meta__badges { display: flex; flex-wrap: wrap; gap: 4px; white-space: normal; }
.rq-meta dd.rq-meta__requirement { overflow: visible; }
.rq-meta__requirement button { width: 100%; min-width: 0; padding: 0; display: flex; align-items: center; gap: var(--space-2); border: 0; color: var(--color-text); background: transparent; font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.rq-meta__requirement button:hover span, .rq-meta__requirement button:focus-visible span { color: var(--color-action-primary); text-decoration: underline; text-underline-offset: 2px; }
.rq-meta__requirement button:focus-visible { outline: 2px solid var(--color-action-primary); outline-offset: 3px; border-radius: 2px; }
.rq-meta__requirement button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rq-meta__requirement button small { margin-left: auto; flex: none; color: var(--color-action-primary); font-size: .6875rem; font-weight: 750; }
.rq-summary-main { display: grid; gap: var(--space-4); }
.rq-note { margin-top: var(--space-4); padding: var(--space-3); border-radius: var(--radius-control); color: var(--color-muted); background: var(--color-soft); font-size: 0.75rem; line-height: 1.55; }
.wm-screen-check { flex: none; }
.wm-screen-check-panel { position: fixed; inset: auto; margin: 0; padding: 0; box-sizing: border-box; width: min(380px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; overflow-wrap: anywhere; border: 1px solid var(--color-line); border-radius: var(--radius-message); background: var(--color-canvas); color: var(--color-ink); font-family: var(--font-sans); font-size: .75rem; line-height: 1.55; box-shadow: var(--shadow-float); }
.wm-screen-check-panel ul { list-style: none; margin: 0; padding: 0; }
.wm-screen-check-panel li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-4); }
.wm-screen-check-panel li + li { border-top: 1px solid var(--color-line); }
.wm-screen-check-copy { min-width: 0; }
.wm-screen-check-copy strong { display: block; margin-bottom: var(--space-1); }
.wm-screen-check-copy p { margin: 0; color: var(--color-muted); }
.wm-screen-check[hidden] { display: none; }
.rq-actions { margin-top: var(--space-4); padding-top: var(--space-4); display: flex; align-items: center; gap: var(--space-2); border-top: 1px solid var(--color-line); }
.rq-actions p { margin: 0 auto 0 0; color: var(--color-muted); font-size: 0.72rem; }
.rq-list { margin: 0; padding: 0; display: grid; gap: var(--space-2); list-style: none; }
.rq-list li { padding: var(--space-3); display: flex; align-items: center; gap: var(--space-3); border-radius: var(--radius-control); background: var(--color-soft); font-size: 0.8125rem; }
.rq-list li > span:last-child { margin-left: auto; }
.rq-source { margin: 0; padding: var(--space-4); border-left: 3px solid var(--color-action-primary); background: var(--color-soft); font-size: 0.875rem; line-height: 1.75; }
.rq-field-stack { display: grid; gap: var(--space-4); }
.rq-field-stack textarea { min-height: 112px; padding-block: 12px; resize: vertical; line-height: 1.65; }
.rq-field-stack textarea.rq-field-large { min-height: 170px; }
/* 프로젝트 상세 정보 목록 · 적용 구분 배지 — docs/mockups/_mock.css 에서 옮김 */
.project-facet-dialog__body { display: grid; gap: var(--space-4); }
.project-facet-dialog__body .error-line { margin: 0; }
.project-facet-dialog__body .facet-setting-list { margin: 0; }
.project-facet-option { overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-panel); background: var(--color-canvas); }
.project-facet-option__head { min-height: 76px; padding: var(--space-4); display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
.project-facet-option__copy { min-width: 0; }
.project-facet-option__copy strong { display: block; font-size: .875rem; }
.project-facet-option__copy p { margin: 4px 0 0; color: var(--color-muted); font-size: .75rem; line-height: 1.5; }
.project-facet-option__body { padding: var(--space-4); border-top: 1px solid var(--color-line); background: var(--color-soft); }
.project-facet-option__body[hidden] { display: none; }
.project-facet-option__body > .field__help { margin: 0 0 var(--space-3); }
.project-token-form { margin-top: var(--space-4); padding-top: var(--space-4); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-4); border-top: 1px solid var(--color-line); }
.project-token-form[hidden] { display: none; }
.project-token-form .field { min-width: 0; }
.project-token-form__actions { display: flex; gap: var(--space-2); }
.option-switch { min-height: 44px; display: inline-flex; align-items: center; gap: var(--space-2); flex: none; cursor: pointer; }
.option-switch input { width: 1px; height: 1px; position: absolute; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.option-switch__track { width: 42px; height: 24px; padding: 2px; display: flex; align-items: center; border: 1px solid #c9c6ce; border-radius: 999px; background: #dedce1; pointer-events: none; transition: border-color 160ms ease, background 160ms ease; }
.option-switch__track span { width: 18px; height: 18px; display: block; border-radius: 50%; background: var(--color-canvas); box-shadow: 0 1px 3px rgb(25 20 31 / 22%); transition: transform 160ms ease; }
.option-switch__label { min-width: 26px; color: var(--color-muted); font-size: .75rem; font-weight: 700; }
.option-switch input:checked + .option-switch__track { border-color: var(--color-action-primary); background: var(--color-action-primary); }
.option-switch input:checked + .option-switch__track span { transform: translateX(18px); }
.option-switch input:checked ~ .option-switch__label { color: var(--color-action-primary); }
.option-switch input:focus-visible + .option-switch__track { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.facet-setting-table,
.system-setting-table { overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-message); background: var(--color-canvas); }
.facet-setting-table__head,
.system-setting-table__head { padding: 8px 12px; display: grid; gap: var(--space-3); border-bottom: 1px solid var(--color-line); color: var(--color-muted); background: #f4f2f6; font-size: .7rem; font-weight: 700; }
.facet-setting-table__head { grid-template-columns: minmax(140px, .7fr) minmax(180px, 1fr) 64px; }
.system-setting-table__head { grid-template-columns: minmax(140px, .7fr) minmax(180px, 1fr); }
.facet-setting-table__head span:last-child { text-align: center; }
.facet-setting-list { display: grid; gap: 10px; margin: 10px 0; }
.facet-setting-row { padding: var(--space-4); display: grid; grid-template-columns: minmax(140px, .7fr) minmax(180px, 1fr) auto; gap: var(--space-3); align-items: end; border: 1px solid var(--color-line); border-radius: var(--radius-message); background: #fbfafc; }
.facet-setting-row label { min-width: 0; }
.facet-setting-row > .button { height: 40px; min-height: 40px; }
.facet-setting-list--table { gap: 0; margin: 0; }
.facet-setting-list--table .facet-setting-row { padding: 10px 12px; grid-template-columns: minmax(140px, .7fr) minmax(180px, 1fr) 64px; align-items: center; border: 0; border-radius: 0; background: var(--color-canvas); }
.facet-setting-list--table .facet-setting-row + .facet-setting-row { border-top: 1px solid var(--color-line); }
.facet-setting-list--table .facet-setting-row > .button { width: 64px; }
.facet-setting-list--table .field__label { width: 1px; height: 1px; padding: 0; position: absolute; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.system-setting-list { display: grid; gap: 10px; margin: 10px 0; }
.system-setting-row { padding: var(--space-4); display: grid; grid-template-columns: minmax(140px, .7fr) minmax(180px, 1fr); gap: var(--space-3); align-items: end; border: 1px solid var(--color-line); border-radius: var(--radius-message); background: #fbfafc; }
.system-setting-row label { min-width: 0; }
.system-setting-list--table { gap: 0; margin: 0; }
.system-setting-list--table .system-setting-row { padding: 10px 12px; align-items: center; border: 0; border-radius: 0; background: var(--color-canvas); }
.system-setting-list--table .system-setting-row + .system-setting-row { border-top: 1px solid var(--color-line); }
.system-setting-list--table .field__label { width: 1px; height: 1px; padding: 0; position: absolute; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* 코드 칸은 읽기 전용이다 — 정본이 기획 저장소의 manifest.json 이라 여기서 고칠 것이 아니다. */
.system-setting-row input[readonly] { color: var(--color-muted); background: var(--color-surface-muted, #f2f1ef); cursor: default; }
.facet-setting-add { width: 100%; margin-top: var(--space-3); border-style: dashed; color: var(--color-action-primary); background: var(--color-action-primary-soft); }
.repository-update-status { --update-bg: #f7f7f5; --update-line: #d8d7d2; --update-ink: #55544f; --update-dot: #85837d; margin-top: var(--space-4); padding: var(--space-4); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); border: 1px solid var(--update-line); border-radius: var(--radius-message); color: var(--update-ink); background: var(--update-bg); }
.repository-update-status--running { --update-bg: #eef5f8; --update-line: #c6dbe4; --update-ink: #315d72; --update-dot: #3e7894; }
.repository-update-status--succeeded { --update-bg: #f2f8ec; --update-line: #c9dcae; --update-ink: #426323; --update-dot: #6c963e; }
.repository-update-status--failed { --update-bg: #fff1f1; --update-line: #edbcbc; --update-ink: #922f2f; --update-dot: #c84040; }
.repository-update-status__mark { width: 10px; height: 10px; border-radius: 50%; background: var(--update-dot); box-shadow: 0 0 0 4px color-mix(in srgb, var(--update-dot) 16%, transparent); }
.repository-update-status__content { min-width: 0; }
.repository-update-status__eyebrow { display: block; margin-bottom: 3px; font-size: 0.68rem; font-weight: 700; }
.repository-update-status__content strong { display: block; color: var(--color-ink); font-size: 0.875rem; }
.repository-update-status__content p { margin: 3px 0 0; color: var(--update-ink); font-size: 0.75rem; line-height: 1.55; }
.repository-update-status__time { padding-left: var(--space-4); display: grid; gap: 3px; border-left: 1px solid var(--update-line); text-align: right; white-space: nowrap; }
.repository-update-status__time span { font-size: 0.68rem; }
.repository-update-status__time time { color: var(--color-ink); font-size: 0.75rem; font-weight: 650; }
.dev-issue-target-card { margin-top: var(--space-4); }
.dev-issue-target-card .rq-card__head > .status-badge { flex: none; }
.dev-issue-target-summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
.dev-issue-target-summary__copy { min-width: 0; }
.dev-issue-target-summary__copy > p:first-child { margin: 0; color: var(--color-muted); font-size: .78rem; line-height: 1.6; }
.dev-issue-target-summary dl { margin: var(--space-3) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-8); }
.dev-issue-target-summary dl > div { display: grid; gap: 3px; }
.dev-issue-target-summary dt { color: var(--color-muted); font-size: .7rem; }
.dev-issue-target-summary dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); overflow-wrap: anywhere; font-size: .82rem; font-weight: 650; }
.dev-issue-target-summary dd span { min-width: 0; overflow-wrap: anywhere; }
.dev-issue-target-summary dd strong { color: var(--color-action-primary); font-size: .75rem; }
.dev-issue-target-summary__empty { margin: var(--space-2) 0 0; color: #7a5a25; font-size: .75rem; line-height: 1.55; }
.dev-issue-target-summary > .button { flex: none; }
.dev-issue-target-dialog { width: min(760px, calc(100% - 48px)); }
.dev-issue-target-dialog__body { display: grid; gap: var(--space-4); }
.dev-issue-target-dialog__body .error-line { margin: 0; }
.dev-delivery-choice-body { display: grid; gap: var(--space-4); padding-bottom: var(--space-4); }
.dev-delivery-choice-body .error-line { margin: 0; }
.dev-delivery-methods { margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.dev-delivery-methods legend { margin-bottom: var(--space-2); color: var(--color-muted); font-size: .72rem; font-weight: 700; }
.dev-delivery-method { min-height: 58px; padding: var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius-control); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); cursor: pointer; background: var(--color-paper); }
.dev-delivery-method:has(input:checked) { border-color: var(--color-action-primary); box-shadow: 0 0 0 1px var(--color-action-primary); background: var(--color-action-soft); }
.dev-delivery-method input { margin: 0; }
.dev-delivery-method span { display: grid; gap: 4px; min-width: 0; }
.dev-delivery-method strong { font-size: .82rem; }
.dev-delivery-method small { color: var(--color-muted); font-size: .72rem; line-height: 1.45; }
.dev-delivery-method em { color: var(--color-muted); font-size: .68rem; font-style: normal; white-space: nowrap; }
.dev-delivery-fields { border-top: 1px solid var(--color-line); }
.dev-delivery-token-note { margin: 0; color: var(--color-muted); font-size: .72rem; }
.dev-issue-target-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.dev-issue-target-field-grid .field { min-width: 0; }
.dev-issue-target-field-grid__wide { grid-column: 1 / -1; }
@media (max-width: 720px) {
.project-facet-option__head { min-height: 0; padding: var(--space-4); align-items: flex-start; }
.project-facet-option__copy p { max-width: 210px; }
.project-token-form { grid-template-columns: 1fr; }
.project-token-form__actions { display: grid; grid-template-columns: 1fr 1fr; }
.facet-setting-table__head,
.system-setting-table__head { display: none; }
.facet-setting-list--table .facet-setting-row { padding: var(--space-4); grid-template-columns: 1fr; align-items: end; }
.facet-setting-list--table .facet-setting-row > .button { width: 100%; }
.facet-setting-list--table .field__label { width: auto; height: auto; padding: initial; position: static; overflow: visible; clip: auto; white-space: normal; border: initial; }
.system-setting-list--table .system-setting-row { padding: var(--space-4); grid-template-columns: 1fr; align-items: end; }
.system-setting-list--table .field__label { width: auto; height: auto; padding: initial; position: static; overflow: visible; clip: auto; white-space: normal; border: initial; }
.facet-setting-row { grid-template-columns: 1fr; }
.system-setting-row { grid-template-columns: 1fr; }
.system-setting-row .field__control { width: 100%; min-width: 0; }
.facet-setting-row .field__control { width: 100%; min-width: 0; }
.repository-update-status { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
.repository-update-status__time { padding: var(--space-3) 0 0; grid-column: 2; border-top: 1px solid var(--update-line); border-left: 0; text-align: left; }
.dev-issue-target-summary { align-items: stretch; flex-direction: column; gap: var(--space-4); }
.dev-issue-target-summary dl { display: grid; gap: var(--space-3); }
.dev-issue-target-summary > .button { width: 100%; }
.dev-issue-target-dialog { width: calc(100% - 24px); }
.dev-delivery-methods { grid-template-columns: 1fr; }
.dev-delivery-method { grid-template-columns: auto minmax(0, 1fr); }
.dev-delivery-method em { grid-column: 2; }
.dev-issue-target-field-grid { grid-template-columns: 1fr; gap: var(--space-4); }
.dev-issue-target-field-grid__wide { grid-column: auto; }
}
.project-info-list { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8); }
.project-info-list > div { min-height: 62px; padding: var(--space-3) 0; display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: center; gap: var(--space-4); border-bottom: 1px solid var(--color-line); }
.project-info-list > div:last-child { border-bottom: 0; }
.project-info-list dt { color: var(--color-muted); font-size: 0.75rem; }
.project-info-list dd { margin: 0; overflow-wrap: anywhere; font-size: 0.875rem; font-weight: 650; }
.facet-badges { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.project-reset-dialog__body { display: grid; gap: var(--space-5, 20px); }
.project-reset-warning { padding: var(--space-4); border: 1px solid color-mix(in srgb, var(--color-error) 35%, var(--color-line)); border-radius: var(--radius-control); background: color-mix(in srgb, var(--color-error) 5%, var(--color-canvas)); }
.project-reset-warning strong { color: var(--color-error); font-size: 0.84rem; }
.project-reset-warning p { margin: var(--space-2) 0 0; color: var(--color-muted); font-size: 0.76rem; line-height: 1.6; }
@media (max-width: 720px) {
#project-reset-dialog { width: calc(100% - 24px); max-width: calc(100% - 24px); }
.project-reset-warning p { overflow-wrap: anywhere; }
#project-reset-dialog .dialog__actions { padding-inline: 18px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
#project-reset-dialog .dialog__actions .button { width: 100%; min-width: 0; padding-inline: 8px; }
}
/* 프로젝트 준비 실패 — 실패 설명과 재시도 판단 정보를 한 덩어리로 읽는다. */
.project-failure-card { overflow: hidden; }
.project-failure-card > .rq-card__head { background: linear-gradient(90deg, #fffafa, var(--color-canvas) 46%); }
.project-failure-layout { display: grid; grid-template-columns: minmax(320px, .9fr) minmax(520px, 1.1fr); align-items: stretch; gap: var(--space-6); }
.project-failure-summary { min-width: 0; padding: var(--space-6); display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: center; gap: var(--space-3); border: 1px solid #edbcbc; border-radius: var(--radius-message); background: #fff7f7; }
.project-failure-summary__mark { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--color-error); font-size: .875rem; font-weight: 800; }
.project-failure-summary__eyebrow { display: block; margin-bottom: var(--space-2); color: var(--color-error); font-size: .7rem; font-weight: 800; }
.project-failure-summary .rq-lead { font-size: .9375rem; line-height: 1.6; }
.project-failure-summary .rq-copy { margin-top: var(--space-2); font-size: .8125rem; line-height: 1.65; }
.project-failure-info { padding: var(--space-2) var(--space-4); grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); column-gap: var(--space-6); border: 1px solid var(--color-line); border-radius: var(--radius-message); background: var(--color-soft); }
.project-failure-info > div { min-height: 66px; grid-template-columns: 92px minmax(0, 1fr); gap: var(--space-3); }
.project-failure-info > div:nth-last-child(-n + 2) { border-bottom: 0; }
@media (max-width: 1180px) {
.project-failure-layout { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
.project-failure-card > .rq-card__head { align-items: stretch; flex-direction: column; }
.project-failure-card > .rq-card__head > .button { width: 100%; margin-left: 0; }
.project-failure-summary { padding: var(--space-4); }
.project-failure-summary__mark { width: 24px; height: 24px; }
}
/* 문서 등록/작업 화면 머리 — docs/mockups/_mock.css 에서 옮김 */
.document-page-head { margin-bottom: var(--space-4); }
.document-page-head > div { width: 100%; }
.document-register-head { align-items: center; }
.document-register-head > div:first-child { width: auto; min-width: 0; flex: 1 1 auto; }
.document-page-head > .document-register-head__actions { width: auto; flex: none; display: flex; gap: var(--space-2); }
/* 관리 폼 껍데기 — docs/mockups/_mock.css 에서 옮김 */
.admin-form-card { padding: var(--space-6); display: grid; gap: var(--space-6); border: 1px solid var(--color-line); border-radius: var(--radius-panel); background: var(--color-canvas); }
.admin-form-card section { display: grid; gap: var(--space-4); }
.admin-form-card section + section { padding-top: var(--space-6); border-top: 1px solid var(--color-line); }
.admin-form-card h2 { margin: 0; font-size: 0.9375rem; }
.admin-form-card--dialog { padding: 0; border: 0; background: transparent; }
.admin-form-card--dialog h3 { margin: 0; font-size: .9375rem; }
.admin-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.admin-form-section-head { display: grid; gap: var(--space-1); }
.admin-form-section-head p { margin: 0; color: var(--color-muted); font-size: 0.8125rem; line-height: 1.55; }
.account-form-error { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); display: grid; gap: var(--space-1); border: 1px solid #e4b8bb; border-radius: var(--radius-control); background: #fff7f7; line-height: 1.55; }
.account-form-error p { margin: 0; }
.field__error { margin: 0; color: var(--color-error); font-size: 0.75rem; font-weight: 650; line-height: 1.5; }
.field__optional { margin-left: 4px; color: var(--color-muted); font-size: 0.7rem; font-weight: 500; }
/* 시스템 관리 — 서비스가 늘어나도 같은 밀도로 쌓이는 연동 설정 목록 */
.system-settings { width: 100%; display: grid; gap: var(--space-4); }
.system-settings__head { display: grid; gap: 4px; }
.system-settings__head h2 { margin: 0; font-size: .9375rem; }
.system-settings__head p { margin: 0; color: var(--color-muted); font-size: .75rem; line-height: 1.55; }
.system-integration-list { margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-message); background: var(--color-canvas); list-style: none; }
.system-integration-item { min-height: 92px; padding: var(--space-4); display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-4); }
.system-integration-item + .system-integration-item { border-top: 1px solid var(--color-line); }
.system-integration-item__mark { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-control); color: #fff; background: var(--color-action-primary); font-size: 1rem; font-weight: 800; }
.system-integration-item__copy { min-width: 0; }
.system-integration-item__copy h3 { margin: 0; font-size: .875rem; }
.system-integration-item__copy p { margin: 4px 0 0; color: var(--color-muted); font-size: .75rem; line-height: 1.55; }
.system-integration-item__state { min-width: 150px; display: grid; justify-items: start; gap: 6px; }
.system-integration-item__state p { margin: 0; color: var(--color-muted); font-size: .7rem; line-height: 1.45; }
.system-api-dialog { width: min(560px, calc(100% - 48px)); }
.system-api-dialog__body { display: grid; gap: var(--space-5, 20px); }
.system-api-dialog__current { margin: 0; padding: 12px 14px; border: 1px solid var(--color-line); border-radius: var(--radius-control); color: var(--color-muted); background: var(--color-soft); font-size: .75rem; line-height: 1.6; }
@media (max-width: 720px) {
.system-integration-item { grid-template-columns: 36px minmax(0, 1fr); gap: var(--space-3); }
.system-integration-item__mark { width: 36px; height: 36px; }
.system-integration-item__state { min-width: 0; grid-column: 2; }
.system-integration-item > .button { width: 100%; grid-column: 1 / -1; }
.system-api-dialog { width: calc(100% - 24px); }
}
/* 목록 검색·필터 줄 — docs/mockups/_mock.css 에서 옮김 */
.filter-bar {
margin-bottom: var(--space-4);
padding: var(--space-3);
display: grid;
grid-template-columns: minmax(220px, 2fr) repeat(2, minmax(150px, 1fr));
align-items: end;
gap: var(--space-3);
border: 1px solid var(--color-line);
border-radius: var(--radius-message);
background: var(--color-soft);
}
/* 필터 줄에서는 입력·선택·버튼의 위아래 기준선을 맞춘다. */
.filter-bar .field__control { height: 44px; min-height: 44px; }
.filter-bar > .button { height: 44px; min-height: 44px; align-self: end; }
/* filter-bar 의 형제 변형(칸 수만 다르다) — docs/mockups/_mock.css 에서 옮김.
ia-filter-bar--tree 는 이름은 ia- 접두사지만 07a 가 filter-bar 와 같이 쓰는 변형이다. */
.filter-bar--three { grid-template-columns: minmax(220px, 2fr) repeat(2, minmax(160px, 1fr)); }
.filter-bar--accounts { grid-template-columns: minmax(220px, 1fr) auto; align-items: end; }
.filter-bar--solution,
.filter-bar--solution-compact { grid-template-columns: minmax(160px, 220px) minmax(0, 1fr) auto; }
.filter-bar--four { grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(140px, 1fr)); }
.filter-bar--five { grid-template-columns: minmax(220px, 1.7fr) repeat(4, minmax(125px, 1fr)); }
.filter-bar--five.filter-bar--with-action { grid-template-columns: repeat(3, minmax(125px, 1fr)) minmax(220px, 1.7fr) auto; }
.ia-filter-bar--tree { grid-template-columns: minmax(360px, 1.7fr) minmax(180px, 0.65fr) minmax(180px, 0.65fr); }
/* 표 행의 이름 링크 — docs/mockups/_mock.css 에서 옮김 */
.document-link {
color: var(--color-ink);
font-weight: 650;
text-decoration: none;
}
.document-link:hover { text-decoration: underline; }
.artifact-list-link {
font-size: 0.8125rem;
font-weight: 700;
color: var(--color-ink);
text-decoration: none;
}
.artifact-list-link:hover {
color: var(--color-action-primary);
text-decoration: underline;
}
.frd-access-icon {
width: 20px;
height: 20px;
margin-right: 6px;
display: inline-grid;
place-items: center;
border-radius: 50%;
vertical-align: middle;
}
.frd-access-icon--write { color: var(--color-action-primary); background: var(--color-action-primary-soft); }
.frd-access-icon--read { color: var(--color-muted); background: var(--color-soft); }
.frd-access-icon .icon { width: 13px; height: 13px; stroke-width: 2; }
.account-table-empty { height: 180px; text-align: center; }
.account-table-empty strong,
.account-table-empty span { display: block; }
.account-table-empty strong { color: var(--color-ink); font-size: 0.875rem; }
.account-table-empty span { margin-top: var(--space-1); color: var(--color-muted); font-size: 0.75rem; font-weight: 400; }
/* 사용자 상세 — 사용자 목록 위에서 여는 관리 레이어 */
.account-detail-dialog { width: min(560px, calc(100% - 48px)); }
.account-detail-dialog__frame { max-height: inherit; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.account-detail-dialog__body { display: grid; gap: var(--space-4); }
.account-detail-dialog__body .project-info-list { grid-template-columns: 1fr; }
.account-detail-dialog__body .project-info-list > div {
min-height: 56px;
grid-template-columns: 124px minmax(0, 1fr);
}
.account-detail-dialog__body .project-info-list > div:last-child { border-bottom: 0; }
.account-detail-dialog__actions { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); }
.account-detail-dialog__actions form { margin: 0; }
.account-register-dialog { width: min(600px, calc(100% - 48px)); }
.account-register-dialog__frame { max-height: inherit; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.account-register-dialog__body { overflow-y: auto; }
.account-register-dialog__form { padding: 0; border: 0; background: transparent; }
.account-register-dialog__form h3 { margin: 0; font-size: 0.9375rem; }
.account-register-dialog .admin-field-grid { grid-template-columns: minmax(0, 1fr); }
.account-register-dialog .field__control { height: 44px; min-height: 44px; }
.account-register-dialog__actions { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); }
.account-password-dialog__body { display: grid; gap: var(--space-4); }
.account-password-dialog { width: min(520px, calc(100% - 32px)); }
.account-password-dialog__body .state-panel { min-height: 0; }
.account-password-dialog__value { min-height: 132px; display: grid; place-items: center; }
.account-password-dialog__body code { margin-top: 0; padding: 0; display: inline-block; border: 0; color: var(--color-ink); background: transparent; font-size: 1.75rem; font-weight: 800; letter-spacing: 0.08em; }
/* 목록 머리 소개문 — docs/mockups/_mock.css 에서 옮김 */
.page-intro {
margin: calc(var(--space-6) * -0.5) 0 var(--space-6);
color: var(--color-muted);
}
.list-page-head { align-items: center; }
.list-page-head > div { min-width: 0; }
.list-page-head .page-intro { margin: var(--space-2) 0 0; }
.document-register-head .page-intro { margin: var(--space-2) 0 0; }
.list-page-head > .button { margin-left: auto; flex: 0 0 auto; }
/* 슈퍼 관리자 — 목록은 현황과 판단에 집중하고 등록 입력은 독립 화면에서 다룬다. docs/mockups/_mock.css 에서 옮김 */
.admin-project-table td:nth-child(2) { max-width: 340px; overflow-wrap: anywhere; }
.admin-project-table td:first-child a { color: var(--color-ink); text-decoration: none; }
.admin-project-table td:first-child a:hover strong { text-decoration: underline; }
/* ───────────────────────────────────────────────────────────────────────────
받은 문서 셋 (01 목록 · 01a 등록 · 01b 상세) — docs/mockups/_mock.css 에서 옮김.
2026-08-15. 옮기기 전에는 실물 상세 화면이 민무늬로 떴다 —
`document-compare-*` 를 쓰면서 규칙이 목업 전용 시트에만 있었다.
⛔ 형제 변형과 @media 규칙을 아래 미디어 블록에 같이 옮겼다. 한쪽만 되돌리지 마라.
─────────────────────────────────────────────────────────────────────────── */
/* 화면 밖으로 감추되 읽어주는 기계에는 남긴다 */
.sr-only { width: 1px; height: 1px; padding: 0; position: absolute; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* 목록 — 소개문 · 현황 띠 · 표 */
.received-docs-intro { max-width: 92ch; }
.summary-strip {
margin-bottom: var(--space-4);
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-4);
color: var(--color-muted);
font-size: 0.8125rem;
}
.summary-strip strong { color: var(--color-ink); }
/* 목록 공통 빈 결과 — 데이터 0건과 검색·필터 결과 0건을 같은 모습으로 보여 준다. */
.list-empty-state {
min-height: 240px;
grid-template-columns: 1fr;
grid-template-rows: auto auto;
align-content: center;
justify-items: center;
row-gap: var(--space-4);
border-color: #d9d3e2;
background: linear-gradient(180deg, #fff 0%, #fcfbfd 100%);
text-align: center;
}
.list-empty-state__icon {
width: 60px;
height: 60px;
display: grid;
place-items: center;
border: 1px solid #d8cce9;
border-radius: 18px;
color: var(--color-action-primary);
background: var(--color-action-primary-soft);
box-shadow: 0 6px 16px rgb(var(--color-action-shadow-rgb) / 10%);
}
.list-empty-state__icon svg { width: 30px; height: 30px; }
.list-empty-state__icon path { stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.list-empty-state strong {
display: block;
color: var(--color-ink);
font-size: 0.875rem;
font-weight: 700;
line-height: 1.5;
}
/* 산출물 공통 빈 상태 — 아이콘·설명·주요 행동은 화면에 필요한 것만 조합한다. */
.empty-state {
min-height: 310px;
padding: var(--space-8);
border: 1px solid var(--color-line);
border-radius: var(--radius-panel);
display: grid;
place-items: center;
align-content: center;
gap: var(--space-4);
text-align: center;
background: linear-gradient(180deg, var(--color-canvas) 0%, var(--color-action-primary-soft) 160%);
}
.empty-state__icon {
width: 60px;
height: 60px;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--color-action-primary);
background: var(--color-lilac-soft);
}
.empty-state__icon svg {
width: 28px;
height: 28px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.empty-state__copy h2 { margin: 0; font-size: 1.0625rem; }
.empty-state__copy p {
max-width: 560px;
margin: var(--space-2) 0 0;
color: var(--color-muted);
font-size: 0.875rem;
line-height: 1.7;
}
.empty-state__action { min-width: 132px; }
.frd-analysis-error {
border-color: #e6b8b8;
background: linear-gradient(180deg, var(--color-canvas) 0%, #fff5f5 160%);
}
.frd-analysis-error .empty-state__icon {
border: 1px solid #e7bcbc;
color: var(--color-error);
background: #fff1f1;
}
.document-detail {
min-width: 0;
display: flex;
align-items: baseline;
gap: var(--space-2);
white-space: nowrap;
}
.received-docs-table { min-width: 1040px; }
.received-docs-table th:first-child { width: 23%; }
.received-docs-table th:nth-child(4) { width: 14%; }
.received-docs-table th:nth-child(5) { width: 12%; }
.received-docs-table td:nth-child(3) .badge { white-space: nowrap; }
.received-doc-row--processing > td { background: #f3f8fb; }
.received-doc-row--processing > td:first-child { box-shadow: inset 3px 0 0 #4b839e; }
.received-doc-row--processing .document-link { color: #245b73; font-weight: 700; }
.status-badge--active::before { animation: status-pulse 1.6s ease-in-out infinite; }
.status-error { color: var(--color-error); font-weight: 650; }
/* 목록 발치 — 쪽 이동과 목록 크기 */
.app-main > * > .artifact-list-table-wrap { margin-bottom: 0; }
.artifact-list-table-wrap + .list-table-foot { margin-top: var(--space-3); padding-top: 0; }
.frd-list-table th:nth-child(2),
.frd-list-table td:nth-child(2) { width: 320px; min-width: 320px; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-table-foot { min-height: 48px; padding-top: 10px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-3); }
.list-pagination { min-width: 0; display: flex; align-items: center; gap: 3px; }
.list-page-button { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: var(--radius-control); color: var(--color-muted); background: transparent; font-size: 0.75rem; text-decoration: none; }
.list-page-button:hover:not([aria-disabled="true"]):not(.is-current) { background: var(--color-soft); }
.list-page-button.is-current { border-color: var(--color-action-primary); color: var(--color-canvas); background: var(--color-action-primary); font-weight: 700; }
.list-page-button[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.list-page-size { justify-self: end; }
.list-page-size .field__control { min-width: 92px; min-height: 34px; height: 34px; padding: 0 32px 0 var(--space-3); font-size: 0.75rem; }
/* 공통 — 적용 구분 고르기 · 오류문 · AI 딱지 · 파일 이름 */
.facet-checks { min-height: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.facet-checks label { min-height: 36px; padding: 0 var(--space-3); display: inline-flex; align-items: center; gap: var(--space-2); border: 1px solid var(--color-line); border-radius: var(--radius-control); background: var(--color-canvas); font-size: 0.8125rem; cursor: pointer; }
.facet-checks input { width: 18px; height: 18px; accent-color: var(--color-action-primary); }
.source-error { margin: calc(var(--space-3) * -1) 0 0; color: var(--color-error); font-size: 0.75rem; font-weight: 650; }
.source-error[hidden] { display: none; }
.ai-label { color: var(--builder-sidebar-active); font-size: 0.7rem; font-weight: 750; letter-spacing: 0.03em; }
.edit-hint { color: var(--color-muted); font-size: 0.7rem; }
.file-picker__name { color: var(--color-muted); font-size: 0.8125rem; }
.document-content-input { min-height: 148px; padding-block: 12px; resize: vertical; line-height: 1.6; }
.document-page-head .page-intro { margin: var(--space-2) 0 0; }
/* 등록 — 기본정보(위) + 원문 입력(아래 2단) */
.document-register-workspace { min-width: 0; }
.document-register-meta { padding: var(--space-4); display: grid; grid-template-columns: minmax(180px, 0.75fr) minmax(260px, 1.45fr) minmax(220px, 0.9fr); align-items: end; gap: var(--space-4); border: 1px solid var(--color-line); border-radius: var(--radius-panel) var(--radius-panel) 0 0; background: var(--color-soft); }
.document-register-meta:not(:has(.document-register-facets)) { grid-template-columns: minmax(180px, 0.7fr) minmax(260px, 1.3fr); }
.document-register-meta--flow { border-radius: var(--radius-panel); }
/* ⚠ 클래스를 두 번 적은 것은 일부러다 — 위의 `:not(:has(...))` 가 (0,2,0) 이라 한 번만 적으면
적용 구분이 없는 프로젝트에서 그쪽이 이기고, 문서 종류 칸이 빈 둘째 칸을 끼고 좁아진다. */
.document-register-meta.document-register-meta--pending { grid-template-columns: minmax(180px, 320px); border-radius: var(--radius-panel); }
.document-register-type-field,
.document-register-flow-post { min-width: 0; }
.document-register-meta__name { min-width: 0; }
.document-register-facets { min-width: 0; margin: 0; padding: 0; border: 0; }
.document-register-facets .source-error { margin: var(--space-1) 0 0; }
.document-register-meeting[hidden] { display: none; }
.document-register-source { overflow: hidden; border: 1px solid var(--color-line); border-top: 0; border-radius: 0 0 var(--radius-panel) var(--radius-panel); background: var(--color-canvas); }
.document-register-source__body { min-height: 480px; padding: var(--space-6); display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--space-4); background: #f7f6f8; }
.document-register-file { min-width: 0; }
.document-register-file__picker { height: 100%; min-height: 420px; padding: var(--space-6); position: relative; display: grid; place-items: center; align-content: center; gap: var(--space-2); border: 1px dashed #aaa5ae; border-radius: var(--radius-message); background: var(--color-canvas); text-align: center; cursor: pointer; }
.document-register-file__picker:hover { border-color: var(--color-action-focus); background: var(--color-action-primary-soft); }
.document-register-file__picker:focus-within { outline: 2px solid var(--color-action-primary); outline-offset: 2px; }
.document-register-file__picker input { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
.document-register-file__picker svg { width: 34px; height: 34px; fill: none; stroke: var(--color-action-primary); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.document-register-file__picker strong { font-size: 0.875rem; }
.document-register-file__picker span, .document-register-file__picker small { color: var(--color-muted); font-size: 0.72rem; }
.document-register-editor { min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-message); background: var(--color-canvas); }
.document-register-editor label { padding: var(--space-3) var(--space-4); display: grid; gap: 3px; border-bottom: 1px solid var(--color-line); }
.document-register-editor label strong { font-size: 0.75rem; }
.document-register-editor label span { color: var(--color-muted); font-size: 0.7rem; }
.document-register-editor textarea { width: 100%; min-height: 354px; padding: var(--space-4); border: 0; color: var(--color-ink); background: var(--color-canvas); font: inherit; font-size: 0.875rem; line-height: 1.75; resize: vertical; outline: 0; }
.document-register-editor textarea:focus { box-shadow: inset 0 0 0 2px rgb(var(--color-action-focus-rgb) / 24%); }
.document-register-source > .source-error { margin: 0; padding: var(--space-3) var(--space-4); border-top: 1px solid #efc2c2; background: #fff5f5; }
.document-register-source__foot { min-height: 68px; padding: var(--space-3) var(--space-4); display: flex; align-items: center; gap: var(--space-2); border-top: 1px solid var(--color-line); }
.document-register-source__foot p { margin: 0 auto 0 0; color: var(--color-muted); font-size: 0.72rem; }
/* 상세 — 머리 · 문서 정보 띠 · 정리본↔원문 나란히 */
.document-compare-head { align-items: center; }
.document-compare-head > div:first-child { width: auto; min-width: 0; flex: 1 1 auto; }
.document-page-head > .document-compare-head__actions { width: auto; flex: none; display: flex; gap: var(--space-2); }
/* ⚠ 상태마다 버튼이 폼 하나다 (겹치는 폼을 못 쓴다) — 폼이 칸을 그대로 채우게 둔다 */
.document-compare-head__actions > form { display: grid; }
.document-processing-bar { min-height: 80px; margin-bottom: var(--space-4); padding: 0 var(--space-6); display: grid; align-content: center; gap: var(--space-3); border: 1px solid #c6dbe4; border-radius: var(--radius-panel); background: #f4f9fb; }
.document-processing-bar__label { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.document-processing-bar__label h2 { margin: 0; display: flex; align-items: center; gap: var(--space-2); font-size: 0.875rem; }
.document-processing-bar__label h2::before { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #4b839e; content: ""; animation: status-pulse 1.6s ease-in-out infinite; }
.document-processing-bar__label span { color: var(--color-muted); font-size: 0.75rem; }
.document-processing-bar__track { height: 6px; display: block; overflow: hidden; border-radius: 999px; background: #d8e8ef; }
.document-processing-bar__track span { width: 34%; height: 100%; display: block; border-radius: inherit; background: #4b839e; animation: processing-track 1.8s ease-in-out infinite; }
@keyframes status-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgb(62 120 148 / 10%); opacity: 0.75; }
50% { box-shadow: 0 0 0 5px rgb(62 120 148 / 14%); opacity: 1; }
}
@keyframes processing-track {
0% { transform: translateX(-110%); }
50% { transform: translateX(85%); }
100% { transform: translateX(265%); }
}
@media (prefers-reduced-motion: reduce) {
.status-badge--active::before,
.document-processing-bar__label h2::before,
.document-processing-bar__track span { animation: none; }
.document-processing-bar__track span { width: 55%; }
}
.document-compare-meta { margin: 0 0 var(--space-4); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-panel); background: var(--color-canvas); }
.document-compare-meta > div { min-width: 0; padding: var(--space-3) var(--space-4); border-right: 1px solid var(--color-line); }
.document-compare-meta > div:last-child { border-right: 0; }
.document-compare-meta dt { color: var(--color-muted); font-size: 0.7rem; }
.document-compare-meta dd { margin: var(--space-1) 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8125rem; font-weight: 650; }
.document-compare-workspace { min-height: 600px; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-panel); background: var(--color-canvas); }
.document-compare-pane { min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.document-compare-pane + .document-compare-pane { border-left: 1px solid var(--color-line); }
.document-compare-pane--source { background: #faf9fb; }
.document-compare-pane__head { min-height: 64px; padding: var(--space-3) var(--space-4); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); border-bottom: 1px solid var(--color-line); }
.document-compare-pane__head h2 { margin: 3px 0 0; font-size: 0.9375rem; }
.document-compare-editor { width: 100%; min-height: 460px; padding: var(--space-6); border: 0; background: var(--color-canvas); color: var(--color-ink); font: inherit; font-size: 0.9375rem; line-height: 1.85; resize: vertical; outline: 0; }
.document-compare-editor:focus { box-shadow: inset 0 0 0 2px rgb(var(--color-action-focus-rgb) / 24%); }
.document-compare-editor[readonly] { color: #55524f; background: var(--color-soft); }
.document-source-copy { padding: var(--space-6); color: #4f4d48; font-size: 0.875rem; line-height: 1.9; }
.document-source-copy mark { padding: 2px 3px; background: #f4e8bd; }
.document-compare-pane__foot { min-height: 60px; padding: var(--space-3) var(--space-4); display: flex; align-items: center; gap: var(--space-2); border-top: 1px solid var(--color-line); color: var(--color-muted); font-size: 0.72rem; }
.document-compare-pane__foot .button { margin-left: auto; }
.document-compare-process { margin-top: var(--space-4); }
.extracted-content { padding: var(--space-4); border-left: 3px solid #aaa5b3; color: #4f4d48; background: var(--color-soft); font-size: 0.8125rem; line-height: 1.75; }
.source-file-row { margin-top: var(--space-4); padding-top: var(--space-3); display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-3); border-top: 1px solid var(--color-line); font-size: 0.75rem; }
.source-file-row span,
.source-file-row small { color: var(--color-muted); }
/* 상세 — 문서 내용 한 칸 (2026-08-15)
⛔ 「처리 방향 선택」(.process-choice·.process-option)은 개념째 폐기됐다. 되살리지 마라.
⚠ 기본 상세는 대조하지 않는다 — 좌우 두 칸은 멀티모달 확인 모드에서만 쓴다. */
.document-compare-workspace--single { min-height: 0; grid-template-columns: 1fr; }
.document-compare-workspace--single .document-compare-editor,
.document-compare-workspace--single .document-source-copy { min-height: 320px; }
.document-content-body { white-space: pre-wrap; }
/* 상세 — 이 문서에서 생성된 요구사항 건수만 표시한다. */
.requirement-summary { margin-top: var(--space-4); padding: var(--space-4) var(--space-6); border: 1px solid var(--color-line); border-radius: var(--radius-panel); background: var(--color-canvas); }
.requirement-summary h2 { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); font-size: 0.875rem; }
.requirement-summary__guide { margin-top: var(--space-4); padding-top: var(--space-4); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); border-top: 1px solid var(--color-line); }
.requirement-summary__guide p { margin: 0; color: var(--color-muted); font-size: 0.8125rem; }
.requirement-summary__actions { display: flex; align-items: center; gap: var(--space-2); }
.requirement-summary__actions form { display: grid; }
@media (max-width: 980px) {
.document-compare-workspace { grid-template-columns: 1fr; }
.document-compare-pane + .document-compare-pane { border-top: 1px solid var(--color-line); border-left: 0; }
.document-register-meta,
.document-register-meta:not(:has(.document-register-facets)) { grid-template-columns: 1fr 1fr; }
.document-register-source__body { grid-template-columns: 240px minmax(0, 1fr); }
.dev-request-implementation { grid-template-columns: 1fr; }
.dev-request-meta-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dev-request-meta-grid > div { border-bottom: 1px solid var(--color-line); }
.dev-request-meta-grid > div:nth-child(3n) { border-right: 0; }
.dev-request-meta-grid > div:nth-last-child(-n+3) { border-bottom: 0; }
}
@media (max-width: 820px) {
.rq-head { align-items: flex-start; flex-direction: column; }
.rq-head__actions { width: 100%; margin-left: 0; display: grid; grid-template-columns: 1fr; }
.rq-head__actions .button--primary { order: -1; }
.frd-workbench-page .rq-head__actions,
.frd-canvas-page .rq-head__actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; }
.frd-workbench-page .rq-head__complete-action,
.frd-canvas-page .rq-head__complete-action { grid-column: 1 / -1; grid-row: 1; }
.frd-workbench-page .rq-head__complete-action .button,
.frd-canvas-page .rq-head__complete-action .button,
.frd-workbench-page .rq-head__list-action,
.frd-workbench-page .rq-head__content-action,
.frd-canvas-page .rq-head__list-action,
.frd-canvas-page .rq-head__content-action { width: 100%; }
.frd-workbench-page .rq-head__overflow,
.frd-canvas-page .rq-head__overflow { margin-left: 0; padding-left: var(--space-2); justify-self: end; }
.project-detail-head:not(.project-detail-head--failed) .rq-head__actions { grid-template-columns: minmax(0, 1fr) 44px; }
.project-detail-head:not(.project-detail-head--failed) .project-detail-primary-action { grid-column: 1 / -1; grid-row: 1; }
.project-detail-head:not(.project-detail-head--failed) .project-detail-primary-action .button,
.project-detail-head:not(.project-detail-head--failed) .rq-head__list-action { width: 100%; }
.project-detail-head:not(.project-detail-head--failed) .rq-head__actions .status-badge { grid-column: 1 / -1; justify-self: start; }
.project-detail-head:not(.project-detail-head--failed) .rq-head__overflow { margin-left: 0; padding-left: var(--space-2); justify-self: end; }
.project-detail-head--failed .rq-head__actions .status-badge { justify-self: start; }
.dev-request-head .rq-head__actions { width: calc(100vw - 32px); max-width: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; justify-content: stretch; }
.dev-request-head .rq-head__actions .status-badge { grid-column: 1 / -1; justify-self: start; order: 0; }
.dev-request-head .dev-request-primary-action { width: 100%; grid-column: 1 / -1; order: 1; }
.dev-request-head form.dev-request-primary-action .button,
.dev-request-head .rq-head__list-action,
.dev-request-head .rq-head__content-action { width: 100%; }
.dev-request-head .rq-head__list-action,
.dev-request-head .rq-head__content-action,
.dev-request-head .rq-head__overflow { order: 2; }
.dev-request-head .rq-head__overflow { margin-left: 0; padding-left: var(--space-2); justify-self: end; }
.dev-request-gate__head { min-height: 0; padding: var(--space-4); align-items: flex-start; flex-direction: column; gap: var(--space-2); }
.dev-request-gate__state { align-self: flex-start; }
.dev-request-gate__working { padding: var(--space-4) var(--space-4) 22px; }
.dev-request-gate__bar { right: var(--space-4); left: var(--space-4); }
.dev-request-gate li { padding-inline: var(--space-4); }
.dev-request-gate__item { grid-template-columns: 1fr; gap: 2px; }
.account-detail-page .rq-head__actions { justify-items: start; }
/* docs/mockups/_requirement-concepts.css 에서 같이 옮김 (2026-08-16) */
.rq-meta { grid-template-columns: 1fr 1fr; }
.rq-meta > div { border-bottom: 1px solid var(--color-line); }
.rq-meta > div:nth-child(even) { border-right: 0; }
.rq-meta > div:nth-last-child(-n+2) { border-bottom: 0; }
.rq-meta--five > div:nth-last-child(2) { border-bottom: 1px solid var(--color-line); }
.rq-meta--five > div:last-child { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }
}
/* 메뉴구조도 — 시스템을 고른 뒤 Depth 1~5를 한 줄에서 직접 대조·편집한다. */
.source-success { margin: 0; padding: var(--space-3); border: 1px solid #b7d9c4; border-radius: var(--radius-control); background: #f2fbf5; color: #17653a; font-size: 0.75rem; font-weight: 650; }
.ia-view-bar { margin-top: var(--space-4); display: flex; align-items: end; justify-content: space-between; gap: var(--space-3); }
.ia-view-bar h2 { margin: 0; font-size: 1rem; }
.ia-view-bar p { margin: 4px 0 0; color: var(--color-muted); font-size: 0.75rem; }
.ia-depth-table-wrap { margin-top: var(--space-3); }
.ia-menu-table { min-width: 1020px; }
.ia-menu-path { display: flex; align-items: center; gap: 6px; font-weight: 650; white-space: nowrap; }
.ia-menu-path > span + span::before { content: ">"; margin-right: 6px; color: var(--color-muted); font-weight: 400; }
.ia-publish-actions { margin-bottom: var(--space-6); }
.ia-coverage-section { margin-top: var(--space-6); }
.ia-coverage-list { margin-top: var(--space-3); display: grid; gap: var(--space-2); }
.ia-coverage-item { overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-message); background: var(--color-canvas); }
.ia-coverage-item summary { min-height: 48px; padding: 0 var(--space-4); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); cursor: pointer; font-size: 0.8125rem; font-weight: 700; }
.ia-coverage-item[open] summary { border-bottom: 1px solid var(--color-line); }
.ia-coverage-item__body { padding: var(--space-4); }
.ia-coverage-item__body .rq-note { margin-top: 0; }
.ia-unlinked-table { min-width: 820px; }
.ia-unlinked-table th:last-child, .ia-unlinked-table td:last-child { text-align: right; }
.ia-menu-link { min-height: 32px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #cfc3dc; border-radius: var(--radius-control); color: var(--color-action-primary); background: var(--color-canvas); font-size: 0.75rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.ia-menu-link:hover { border-color: var(--color-action-primary); background: var(--color-action-primary-soft); }
.ia-menu-link:focus-visible { outline: 2px solid var(--color-action-primary); outline-offset: 2px; }
.ia-type-source { width: 18px; height: 18px; margin-left: 4px; display: inline-grid; place-items: center; border: 1px solid #cfc3dc; border-radius: var(--radius-pill); color: var(--color-action-primary); font-size: 0.625rem; font-weight: 800; cursor: help; }
.ia-row-editor { display: grid; gap: var(--space-4); }
.ia-menu-current-summary { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.ia-menu-current-summary > div { min-width: 0; display: grid; gap: var(--space-1); }
.ia-menu-current-summary dt { color: var(--color-muted); font-size: .75rem; font-weight: 700; }
.ia-menu-current-summary dd { min-width: 0; margin: 0; display: grid; gap: 2px; overflow-wrap: anywhere; }
.ia-menu-current-summary dd .num { color: var(--color-muted); font-size: .75rem; }
.ia-menu-information { display: grid; gap: var(--space-5, 20px); }
.ia-menu-parent-field { max-width: 640px; }
.ia-menu-create-fields { display: grid; gap: var(--space-4); }
.ia-menu-fixed-screen { min-height: 42px; padding: 9px 12px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius-control); background: var(--color-soft); }
.ia-menu-fixed-screen__label { color: var(--color-muted); font-size: .75rem; font-weight: 600; }
.ia-menu-fixed-screen .num { flex: none; color: var(--color-muted); font-size: .75rem; }
.ia-editor-grid { display: grid; gap: var(--space-4); }
.ia-editor-grid + .ia-editor-grid { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-line); }
.ia-editor-grid--identity { grid-template-columns: minmax(120px, .35fr) minmax(280px, 1fr); }
.ia-editor-grid--depths { grid-template-columns: repeat(5, minmax(120px, 1fr)); }
.ia-editor-grid--link { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
.ia-editor-actions { margin-top: 0; justify-content: flex-end; }
.ia-delete-actions { margin-top: var(--space-6); }
@media (max-width: 1000px) {
.ia-editor-grid--depths { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
}
@media (max-width: 700px) {
.ia-menu-current-summary,
.ia-editor-grid--identity,
.ia-editor-grid--depths,
.ia-editor-grid--link { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
/* docs/mockups/_requirement-concepts.css 에서 같이 옮김 (2026-08-16) */
.rq-meta { grid-template-columns: 1fr; }
.rq-meta > div,
.rq-meta > div:nth-child(even) { border-right: 0; border-bottom: 1px solid var(--color-line); }
.rq-meta > div:last-child { border-bottom: 0; }
.rq-actions { align-items: stretch; flex-direction: column; }
.rq-actions p { margin-right: 0; }
.rq-actions .button { width: 100%; }
.dev-request-source__head { padding: var(--space-4); align-items: stretch; flex-direction: column; gap: var(--space-3); }
.dev-request-source__body { padding: var(--space-4); }
.dev-request-source__content { grid-template-columns: 1fr; }
.dev-request-source__section { padding: var(--space-4); border-right: 0; border-bottom: 1px solid var(--color-line); }
.dev-request-source__section:last-child { border-bottom: 0; }
.dev-request-source__stats { width: 100%; margin: 0; }
.dev-request-source__stats > div { min-width: 0; padding: 0 var(--space-3); flex: 1; }
.dev-request-source__stats > div:first-child { padding-left: 0; border-left: 0; }
.dev-request-meta-grid { grid-template-columns: 1fr 1fr; }
.dev-request-meta-grid > div, .dev-request-meta-grid > div:nth-child(3n) { border-right: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.dev-request-meta-grid > div:nth-child(even) { border-right: 0; }
.dev-request-meta-grid > div:nth-last-child(-n+2) { border-bottom: 0; }
.dev-request-boundary-grid { grid-template-columns: 1fr; }
.dev-request-scope-list > li { grid-template-columns: minmax(0, 1fr); }
.dev-request-nature { width: fit-content; }
}
@media (max-width: 760px) {
.dev-delivery-dialog { width: calc(100% - 24px); }
.dev-delivery-date-grid { grid-template-columns: 1fr; }
.filter-bar { grid-template-columns: 1fr; }
.filter-bar--three,
.filter-bar--accounts,
.filter-bar--solution,
.filter-bar--solution-compact,
.filter-bar--four,
.filter-bar--user-manual,
.filter-bar--five.filter-bar--with-action { grid-template-columns: 1fr; }
.ia-filter-bar--tree { grid-template-columns: 1fr; }
.admin-form-card { padding: var(--space-4); }
.admin-field-grid { grid-template-columns: 1fr; }
.account-register-dialog { width: calc(100% - 24px); }
.account-detail-feedback code { text-align: center; overflow-wrap: anywhere; }
.project-info-list { grid-template-columns: 1fr; }
.project-info-list > div { grid-template-columns: 1fr; gap: var(--space-1); }
.project-info-list > div:nth-last-child(2) { border-bottom: 1px solid var(--color-line); }
.document-register-head { align-items: stretch; }
.document-register-head > div:first-child { width: 100%; }
.document-page-head > .document-register-head__actions { width: 100%; display: grid; grid-template-columns: 1fr; }
.document-register-head__actions .button--primary { order: -1; }
.list-page-head { align-items: stretch; }
.list-page-head > div { width: 100%; }
.list-page-head > .button { width: 100%; margin-left: 0; }
/* 받은 문서 셋 — docs/mockups/_mock.css 에서 옮김 */
.requirement-summary { padding: var(--space-4); }
.requirement-summary__guide { align-items: stretch; flex-direction: column; }
.requirement-summary__actions { display: grid; grid-template-columns: 1fr; }
.requirement-summary__actions .button { width: 100%; }
.document-compare-head { align-items: stretch; }
.document-compare-head > div:first-child { width: 100%; }
.document-page-head > .document-compare-head__actions { width: 100%; display: grid; grid-template-columns: 1fr; }
.document-compare-head__actions .button--primary { order: -1; }
.document-compare-meta { grid-template-columns: 1fr 1fr; }
.document-processing-bar { min-height: 96px; padding: var(--space-4); }
.document-processing-bar__label { align-items: flex-start; flex-direction: column; gap: var(--space-1); }
.document-compare-meta > div { border-bottom: 1px solid var(--color-line); }
.document-compare-meta > div:nth-child(even) { border-right: 0; }
.document-compare-meta > div:nth-last-child(-n+2) { border-bottom: 0; }
.document-compare-editor { min-height: 340px; padding: var(--space-4); }
.document-source-copy { min-height: 340px; padding: var(--space-4); }
.document-compare-pane__foot { align-items: stretch; flex-direction: column; }
.document-compare-pane__foot .button { width: 100%; margin-left: 0; }
.document-register-meta,
.document-register-meta:not(:has(.document-register-facets)) { grid-template-columns: 1fr; }
.document-register-source__body { min-height: 0; padding: var(--space-4); grid-template-columns: 1fr; }
.document-register-file__picker { min-height: 180px; }
.document-register-editor textarea { min-height: 300px; }
.document-register-source__foot { align-items: stretch; flex-direction: column; }
.document-register-source__foot p { margin-right: 0; }
.document-register-source__foot .button { width: 100%; }
.document-register-source__foot .button--primary { order: -1; }
.source-file-row { grid-template-columns: 1fr auto; }
}
@media (max-width: 620px) {
.empty-state { min-height: 280px; padding: var(--space-6) var(--space-4); }
.empty-state__copy p br { display: none; }
.empty-state__action { width: min(100%, 280px); }
/* 목록 발치 — docs/mockups/_mock.css 에서 옮김 */
.list-table-foot { display: flex; flex-direction: column-reverse; align-items: stretch; }
.list-table-foot > [aria-hidden="true"] { display: none; }
.list-page-size { align-self: flex-start; }
.list-pagination { width: 100%; padding-bottom: var(--space-1); overflow-x: auto; }
}
/* 로그인 — docs/mockups/login-a.html의 확정 화면을 실제 셸 안에서 재현한다. */
body:has(.login-screen) > .app-header {
display: none;
}
.app-shell--card:has(.login-screen) {
position: relative;
isolation: isolate;
overflow: hidden;
background: #f4f3f0;
}
.app-shell--card:has(.login-screen)::before {
content: "";
position: fixed;
z-index: -2;
width: 680px;
height: 680px;
left: 50%;
top: 50%;
border-radius: 50%;
background: radial-gradient(circle, rgb(var(--color-action-focus-rgb) / 11%), rgb(var(--color-action-focus-rgb) / 0%) 68%);
transform: translate(-50%, -50%);
pointer-events: none;
}
.app-shell--card:has(.login-screen)::after {
content: "";
position: fixed;
z-index: -1;
inset: 0;
opacity: 0.28;
background-image:
linear-gradient(rgb(61 54 76 / 5.5%) 1px, transparent 1px),
linear-gradient(90deg, rgb(61 54 76 / 5.5%) 1px, transparent 1px);
background-size: 48px 48px;
mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
pointer-events: none;
}
.app-card:has(.login-screen) {
position: relative;
width: min(470px, 100%);
padding: 42px;
border-color: #d9d7df;
border-radius: 18px;
background: rgb(255 255 255 / 96%);
box-shadow: 0 24px 70px rgb(31 29 42 / 10%);
transform: translateY(18px);
}
.login-brand {
position: absolute;
left: 4px;
right: 4px;
top: -40px;
display: flex;
align-items: center;
justify-content: space-between;
}
.login-brand a {
display: inline-flex;
align-items: baseline;
color: var(--color-ink);
font-family: var(--font-sans);
font-size: 1rem;
font-weight: 800;
line-height: 1.2;
letter-spacing: -0.03em;
text-decoration: none;
}
.login-brand__version {
margin-left: 6px;
color: var(--color-muted);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0;
}
.login-brand strong {
font-weight: 800;
}
.login-brand em {
color: var(--color-action-accent);
font-style: normal;
}
.login-brand > span {
color: #858391;
font-size: 0.7rem;
}
.login-intro {
margin-bottom: 27px;
}
.login-intro p {
margin: 0 0 7px;
color: var(--color-action-accent);
font-size: 0.72rem;
font-weight: 800;
}
.app-card > * > .login-screen .login-intro h1 {
margin: 0 0 8px;
font-size: 1.9rem;
line-height: 1.25;
letter-spacing: -0.04em;
}
.login-intro > span {
color: var(--color-muted);
font-size: 0.84rem;
}
.login-form {
display: grid;
}
.login-form label {
margin: 16px 0 6px;
font-size: 0.78rem;
font-weight: 700;
line-height: 1.4;
}
.login-form label:first-of-type {
margin-top: 0;
}
.login-form input {
width: 100%;
min-height: 48px;
padding: 0 14px;
border: 1px solid #cfcfd9;
border-radius: var(--radius-control);
background: #fff;
outline: none;
}
.login-form input:focus {
border-color: var(--color-action-accent);
box-shadow: 0 0 0 3px rgb(var(--color-action-focus-rgb) / 12%);
}
.login-form button {
min-height: 48px;
margin-top: 16px;
border: 0;
border-radius: var(--radius-control);
background: var(--color-action-primary);
color: #fff;
font-weight: 750;
cursor: pointer;
}
.login-form button:hover {
background: var(--color-action-primary-hover);
}
.login-form button[data-submit-loading].is-submit-loading:disabled {
background: var(--color-action-primary);
opacity: 0.78;
}
.login-error {
margin: 0 0 var(--space-2);
color: var(--color-error);
font-size: 0.78rem;
line-height: 1.5;
}
.login-first-visit {
margin-top: 26px;
padding: 16px;
display: grid;
grid-template-columns: 26px 1fr;
gap: 11px;
border: 1px solid #ded5ef;
border-radius: 11px;
background: var(--color-action-surface);
}
.login-first-visit > span {
width: 24px;
height: 24px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--color-action-primary-soft);
color: var(--color-action-accent);
font-family: serif;
font-size: 0.75rem;
font-weight: 800;
}
.login-first-visit strong {
display: block;
font-size: 0.75rem;
}
.login-first-visit p {
margin: 4px 0 0;
color: var(--color-muted);
font-size: 0.68rem;
line-height: 1.6;
}
@media (max-width: 700px) {
.app-shell--card:has(.login-screen) {
place-items: start center;
padding-top: 20vh;
padding-bottom: var(--space-8);
}
.app-card:has(.login-screen) {
padding: 30px 24px;
transform: none;
}
.login-brand {
left: 0;
right: 0;
}
.login-brand > span {
display: none;
}
.app-card > * > .login-screen .login-intro h1 {
font-size: 1.7rem;
}
.login-first-visit {
padding: 14px;
}
}
/* 최초 설정 — 비밀번호 변경과 Claude 연결 화면의 공통 카드 뼈대. */
body:has(.setup-screen) > .app-header {
display: none;
}
.app-shell--card:has(.setup-screen) {
padding: var(--space-8);
background: #f2f1ee;
}
.app-card:has(.setup-screen) {
width: min(560px, 100%);
padding: 38px 44px;
border-radius: 18px;
background: #fff;
box-shadow: 0 18px 60px rgb(31 29 42 / 8%);
}
.setup-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.setup-brand {
color: var(--color-ink);
font-family: var(--font-sans);
font-size: 1rem;
font-weight: 800;
line-height: 1.2;
letter-spacing: -0.03em;
text-decoration: none;
}
.setup-brand span {
color: var(--color-action-accent);
}
.setup-step {
display: flex;
align-items: center;
}
.setup-step span {
width: 28px;
height: 28px;
display: grid;
place-items: center;
border: 1px solid var(--color-line);
border-radius: 50%;
color: var(--color-muted);
font-size: 0.72rem;
font-weight: 800;
}
.setup-step span[aria-current="step"] {
border-color: var(--color-action-accent);
background: var(--color-action-accent);
color: #fff;
}
.setup-step i {
width: 30px;
height: 1px;
background: var(--color-line);
}
.setup-intro {
margin: 45px 0 26px;
}
.setup-intro p {
margin: 0 0 7px;
color: var(--color-action-accent);
font-size: 0.72rem;
font-weight: 800;
}
.app-card > * > .setup-screen .setup-intro h1 {
margin: 0 0 10px;
font-size: 1.75rem;
}
.setup-intro > span {
color: var(--color-muted);
font-size: 0.84rem;
line-height: 1.55;
}
.setup-form {
display: grid;
}
.setup-form label {
margin: 16px 0 6px;
font-size: 0.78rem;
font-weight: 700;
line-height: 1.4;
}
.setup-form label:first-of-type {
margin-top: 0;
}
.setup-form input {
width: 100%;
min-height: 48px;
padding: 0 14px;
border: 1px solid #cfcfd9;
border-radius: var(--radius-control);
background: #fff;
outline: none;
}
.setup-form input:focus {
border-color: var(--color-action-accent);
box-shadow: 0 0 0 3px rgb(var(--color-action-focus-rgb) / 12%);
}
.setup-form input[aria-invalid="true"] {
border-color: #c83d47;
box-shadow: 0 0 0 3px rgb(200 61 71 / 10%);
}
.setup-field-note,
.setup-field-error {
margin: 6px 0 0;
font-size: 0.7rem;
line-height: 1.5;
}
.setup-field-note {
color: var(--color-muted);
}
.setup-field-error {
color: #b4232e;
}
.setup-form button {
min-height: 48px;
margin-top: 20px;
border: 0;
border-radius: var(--radius-control);
background: var(--color-action-primary);
color: #fff;
font-weight: 750;
cursor: pointer;
}
.setup-form button:hover {
background: var(--color-action-primary-hover);
}
.setup-help {
margin: 10px 0 16px;
color: var(--color-muted);
font-size: 0.72rem;
line-height: 1.55;
}
.project-empty-user {
color: var(--color-muted);
font-size: 0.72rem;
font-weight: 700;
}
.project-empty-state {
grid-template-columns: 42px minmax(0, 1fr);
align-items: start;
gap: 14px;
}
.project-empty-state__icon {
width: 38px;
height: 38px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--color-lilac-soft);
color: var(--color-action-accent);
font-size: 1rem;
font-weight: 850;
}
.project-empty-state p {
margin-top: 6px;
font-size: 0.76rem;
line-height: 1.6;
}
.project-empty-action button {
width: 100%;
}
@media (max-width: 700px) {
.app-shell--card:has(.setup-screen) {
place-items: start center;
padding: 15vh 32px var(--space-8);
}
.app-card:has(.setup-screen) {
padding: 28px 22px;
}
.project-empty-state {
grid-template-columns: 1fr;
padding: 20px;
}
.project-empty-state__icon {
width: 34px;
height: 34px;
}
}
.claude-steps {
margin: 0;
padding: 0;
display: grid;
list-style: none;
}
.claude-steps > li {
padding: 20px 0;
display: grid;
grid-template-columns: 32px 1fr;
gap: 12px;
}
.claude-steps > li:first-child {
padding-top: 4px;
}
.claude-steps > li + li {
border-top: 1px solid var(--color-line);
}
.claude-steps > li > span {
width: 28px;
height: 28px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--color-lilac-soft);
color: var(--color-action-accent);
font-size: 0.75rem;
font-weight: 800;
}
.claude-step-content {
min-width: 0;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
column-gap: 16px;
}
.claude-step-content > strong,
.claude-step-content > p {
grid-column: 1;
}
.claude-step-content strong {
font-size: 0.88rem;
}
.claude-step-content > p {
margin: 5px 0 12px;
color: var(--color-muted);
font-size: 0.76rem;
line-height: 1.55;
}
.claude-step-content > .secondary-action,
.claude-step-content > .claude-start-form {
grid-column: 2;
grid-row: 1 / span 2;
align-self: center;
}
.claude-start-form {
margin: 0;
}
.secondary-action,
.claude-later-button,
.claude-connect-button {
min-height: 42px;
padding: 0 16px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-control);
font-size: 0.75rem;
font-weight: 700;
line-height: 1.2;
text-decoration: none;
cursor: pointer;
}
.secondary-action,
.claude-later-button {
border: 1px solid #bbb3cc;
background: #fff;
color: var(--color-action-accent);
}
.secondary-action:hover,
.claude-later-button:hover {
background: #f6f5f3;
}
.claude-code-form {
grid-column: 1 / -1;
margin-top: 10px;
display: grid;
}
.claude-code-form label {
margin-bottom: 6px;
font-size: 0.75rem;
font-weight: 700;
}
.claude-code-form label span {
margin-left: 4px;
color: var(--color-muted);
font-size: 0.68rem;
font-weight: 500;
}
.claude-code-form input {
width: 100%;
min-height: 48px;
padding: 0 14px;
border: 1px solid #cfcfd9;
border-radius: var(--radius-control);
outline: none;
}
.claude-code-form input:focus {
border-color: var(--color-action-accent);
box-shadow: 0 0 0 3px rgb(var(--color-action-focus-rgb) / 12%);
}
.claude-code-form input[aria-invalid="true"] {
border-color: #c83d47;
box-shadow: 0 0 0 3px rgb(200 61 71 / 10%);
}
.claude-choice {
margin-top: 8px;
padding-top: 18px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
border-top: 1px solid var(--color-line);
}
.claude-choice > p {
max-width: 245px;
margin: 0;
color: var(--color-muted);
font-size: 0.7rem;
line-height: 1.5;
}
.claude-choice > div {
display: flex;
flex: none;
gap: 8px;
}
.claude-choice form {
margin: 0;
}
.claude-connect-button {
border: 1px solid var(--color-action-primary);
background: var(--color-action-primary);
color: #fff;
}
.claude-connect-button:hover {
border-color: var(--color-action-primary-hover);
background: var(--color-action-primary-hover);
}
@media (max-width: 700px) {
.app-shell--card:has(.setup-screen--claude) {
padding-top: 8vh;
}
.claude-step-content {
grid-template-columns: 1fr;
}
.claude-step-content > .secondary-action,
.claude-step-content > .claude-start-form {
grid-column: 1;
grid-row: auto;
width: 100%;
}
.claude-start-form .secondary-action,
.claude-step-content > .secondary-action {
width: 100%;
}
.claude-choice {
align-items: stretch;
flex-direction: column;
}
.claude-choice > p {
max-width: none;
}
.claude-choice > div {
display: grid;
grid-template-columns: 1fr 1fr;
}
.claude-later-button,
.claude-connect-button {
width: 100%;
padding: 0 10px;
}
}
/* 솔루션 목업 목록·상세 — docs/mockups/08-solution-mockups.html · 08a-solution-mockup-detail.html
⛔ 이 무리를 목업 폴더로 되돌리지 마라. 목업과 실물이 이 파일 하나를 같이 링크한다. */
.solution-detail { min-width: 0; }
.solution-detail-main { display: grid; gap: var(--space-4); }
/* 추출된 운영 화면을 그대로 끼우는 자리. 가짜 마크업을 그리지 않는다. */
.preview-stage { min-width: 0; padding: 0 var(--space-4) var(--space-4); overflow: hidden; border: 1px solid var(--color-line); border-radius: calc(var(--radius-panel) + 4px); background: #f4f3f1; }
.preview-stage__head { min-height: 76px; padding-block: var(--space-3); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.preview-stage__heading { min-width: 0; display: grid; gap: 3px; }
.preview-stage__heading h2 { margin: 0; font-size: 0.9375rem; }
.preview-stage__heading p { margin: 0; overflow: hidden; color: var(--color-muted); font-size: 0.75rem; text-overflow: ellipsis; white-space: nowrap; }
.preview-stage__tools { flex: none; display: flex; align-items: center; gap: var(--space-2); }
.preview-tool-button,
.preview-open-window { flex: 0 0 44px; color: var(--color-ink); text-decoration: none; }
.preview-tool-button .icon,
.preview-open-window .icon { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.preview-feature-toggle[aria-pressed="true"] { border-color: var(--color-action-primary); background: var(--color-action-primary-soft); color: var(--color-action-primary); }
.preview-review { --preview-canvas-height: clamp(420px, calc(100dvh - 330px), 680px); min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.preview-review.is-feature-open { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); }
.preview-feature-panel { height: var(--preview-canvas-height, clamp(420px, calc(100dvh - 330px), 680px)); min-width: 0; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr); border: 1px solid var(--color-line); border-radius: var(--radius-control); background: var(--color-canvas); }
.preview-feature-panel[hidden] { display: none; }
.preview-feature-panel__head { padding: var(--space-4); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); border-bottom: 1px solid var(--color-line); }
.preview-feature-panel__head > div { min-width: 0; }
.preview-feature-panel__head > .badge { flex: none; }
.preview-feature-panel__head h3 { margin: 0; font-size: 0.9375rem; }
.preview-feature-panel__head p { margin: var(--space-1) 0 0; color: var(--color-muted); font-size: 0.75rem; line-height: 1.45; }
.preview-feature-list { margin: 0; padding: var(--space-3); overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-2); list-style: none; }
.preview-feature-item { flex: 0 0 auto; overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-control); background: var(--color-paper); }
.preview-feature-item[data-state="visible"] { border-color: var(--color-lilac); }
.preview-feature-item.is-selected { border-color: var(--color-lilac); background: var(--color-lilac-soft); box-shadow: inset 3px 0 0 var(--color-lilac); }
.preview-feature-item__button { width: 100%; padding: var(--space-3); display: grid; gap: 6px; border: 0; background: transparent; color: inherit; text-align: left; }
.preview-feature-item__button { cursor: pointer; }
.preview-feature-item__button:hover { background: rgb(197 176 244 / 12%); }
.preview-feature-item__top { display: flex; align-items: center; gap: var(--space-2); }
.preview-feature-item__no { color: var(--color-muted); font-size: 0.75rem; font-weight: 800; }
.preview-feature-item.is-selected .preview-feature-item__no { color: var(--color-action-primary); }
.preview-feature-item__name { min-width: 0; flex: 1; font-size: 0.8125rem; font-weight: 700; }
.preview-feature-item__state { color: var(--color-muted); font-size: 0.6875rem; white-space: nowrap; }
.preview-feature-item[data-state="visible"] .preview-feature-item__state { color: var(--color-action-primary); font-weight: 700; }
.preview-feature-item__detail { margin: 0; color: var(--color-muted); font-size: 0.75rem; line-height: 1.5; }
.solution-document-dialog { width: min(1080px, calc(100vw - 32px)); max-height: min(900px, calc(100dvh - 48px)); }
.solution-document-dialog__frame { height: min(860px, calc(100dvh - 48px)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.solution-document-dialog__body { min-height: 0; padding: var(--space-4); overflow-y: auto; background: #f7f6f8; }
.solution-document-content { display: grid; gap: var(--space-4); }
.solution-document-content .rq-card { margin: 0; background: var(--color-canvas); }
.solution-document-content .rq-card__head h3 { margin: 0; font-size: 1rem; }
.solution-document-empty { min-height: 360px; }
.solution-document-table { min-width: 760px; }
.solution-document-table th:nth-child(1) { width: 80px; }
.solution-document-table th:nth-child(2) { width: 110px; }
.solution-document-table th:nth-child(3) { width: 210px; }
.solution-document-table td { vertical-align: top; white-space: normal; overflow-wrap: anywhere; }
/* 기관 갈래 탭. 갈래가 있는 화면에서만 뜬다 — 그 화면들은 기저 html 이 없다. */
.preview-stage__tabs { margin: 0 0 var(--space-2); padding: var(--space-2); display: flex; flex-wrap: wrap; gap: var(--space-2); border: 1px solid var(--color-line); border-radius: var(--radius-control); background: var(--color-canvas); }
.preview-tab { min-height: 32px; padding: 0 var(--space-3); display: inline-flex; align-items: center; border: 1px solid var(--color-line); border-radius: var(--radius-control); color: var(--color-ink); background: var(--color-canvas); font-size: 0.8125rem; text-decoration: none; }
.preview-tab:hover { background: var(--color-soft); }
/* ⚠ 고른 것을 색만으로 알리지 않는다 — aria-selected 와 굵기를 같이 쓴다. */
.preview-tab.is-current { border-color: var(--color-action-primary); color: var(--color-canvas); background: var(--color-action-primary); font-weight: 700; }
/* 확대·축소. 목업 _work-mockup-concepts.css 의 .wm-zoom 과 같은 모양이다 —
작업 목업과 솔루션 목업이 같은 조작을 다르게 생기게 두지 않는다. */
.preview-zoom { height: 36px; overflow: hidden; display: inline-grid; grid-template-columns: 34px 82px 34px; border: 1px solid var(--color-line); border-radius: var(--radius-control); background: #fff; }
.preview-zoom button { min-width: 0; padding: 0; border: 0; border-right: 1px solid var(--color-line); color: var(--color-ink); background: transparent; font-weight: 700; cursor: pointer; }
.preview-zoom button:last-child { border-right: 0; }
.preview-zoom button:hover:not(:disabled) { background: var(--color-soft); }
.preview-zoom button:disabled { color: var(--color-muted); cursor: default; }
.preview-zoom output { font-size: 0.7rem; font-weight: 700; white-space: nowrap; }
/* ⚠ 배율은 겉을 늘이고 줄인다 — iframe 안쪽은 sandbox 라 우리가 못 들어간다.
크기를 배율로 나눠 두면, 늘려도 줄여도 보이는 칸은 그대로이고 안쪽 화면만 커지고 작아진다.
⛔ 칸의 높이를 고정해 둬라. transform 은 배치를 안 바꾸므로, 안 고정하면 축소했을 때
줄어든 만큼(80%에서 175px 실측) 밑에 빈 회색이 남는다. */
.preview-canvas { height: var(--preview-canvas-height, clamp(420px, calc(100dvh - 330px), 680px)); min-height: 1px; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--color-line); border-radius: var(--radius-control); background: #ecebea; scrollbar-gutter: stable; }
/* ⛔ sandbox 를 빼지 마라 — 추출 html 에 남의