/* dev 화면 고유 스타일 — 토큰·글꼴·헤더·탭·버튼·칩 같은 공용 부품은 family.css(원본)에 있다(DEV-142). */

/* DESIGN 2·4·7·8·10·11절: 역할별 미리보기와 기본 입력·간격을 공유한다. */
.font-controls{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--sp-4); }
.font-controls label, .font-preview label{ display:flex; flex-direction:column; gap:var(--sp-2); min-width:0; font:600 12px/1.4 var(--mono); }
.font-controls select, .font-preview input{ width:100%; min-width:0; min-height:40px; font:400 14px/1.6 var(--sans); }
.font-preview{ margin:var(--sp-5) 0; padding:var(--sp-4); border:1px solid var(--border); border-radius:var(--r-md); background:var(--panel-2); overflow-wrap:anywhere; }
.font-preview-mono{ font:600 14px/1.6 var(--mono); }
.font-preview-sans{ font:400 16px/1.6 var(--sans); }
.font-settings #font-reset{ min-height:40px; }
.font-settings #font-status{ margin-top:var(--sp-3); }
@media(max-width:800px){ .font-controls{ grid-template-columns:minmax(0,1fr); } }

/* 틀 글자 — 모노·대문자·넓은 자간 */
/* DESIGN 2·3·4·5·7·10·11절: 전역 재시작 상태, 고정 높이·접근 가능한 펼침·작은 이동만 쓴다. */
#restart-banner{ position:sticky; top:var(--tabbar-h); z-index:25; border-bottom:1px solid var(--border); background:var(--panel); color:var(--text); animation:restart-appear 240ms ease; }
#restart-banner[hidden]{ display:none; }
.restart-banner-inner{ display:flex; align-items:center; gap:var(--sp-3); min-height:44px; max-width:none; padding:var(--sp-1) var(--page-gutter); margin:0; }
.restart-dot{ flex:0 0 8px; width:8px; height:8px; border-radius:999px; background:var(--s-in_progress); animation:restart-pulse 2s ease infinite; }
#restart-banner[data-phase="complete"] .restart-dot{ background:var(--s-done); animation:none; }
.restart-copy{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:400 13px/1.4 var(--sans); font-variant-numeric:tabular-nums; }
.restart-banner-inner:has(.restart-expand[aria-expanded="true"]) .restart-copy{ white-space:normal; overflow-wrap:anywhere; }
.restart-next a{ white-space:nowrap; }
#restart-banner button{ flex-shrink:0; min-height:40px; padding:var(--sp-2); font-size:13px; }
#restart-banner button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.restart-actions{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2); }
.restart-actions.overdue .restart-now{ outline:2px solid var(--accent); outline-offset:2px; }
body.has-restart-banner .toast{ bottom:calc(28px + var(--sp-6) + var(--sp-3)); }
@keyframes restart-appear{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:translateY(0); } }
@keyframes restart-pulse{ 50%{ opacity:.4; } }
@media(max-width:800px){
  .restart-banner-inner{ flex-wrap:wrap; }
  .restart-copy{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
  .restart-actions{ width:100%; }
  .restart-banner-inner:has(.restart-expand[aria-expanded="true"]) .restart-copy{ display:block; }
}
@media(prefers-reduced-motion:reduce){ #restart-banner, .restart-dot{ animation:none; } }

.panel h2, table.issues th, .field > span, .col h3, .form label, .ref, .chip, .prio, .brand-word, .when, .kicker{
  font-family:var(--mono);
}
.panel h2, table.issues th, .field > span, .col h3, .form label, .kicker{
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:var(--track-label); color:var(--dim);
}

/* 입력·버튼 */
button.save[aria-busy="true"]{ justify-content:center; }
[data-edit] + [data-delete-project]{ margin-left:6px; }

/* 로그인 — DESIGN 1~5·7·8·10~12절: 밤의 작업실, 토큰, 반응형 배치와 기존 인증 입력을 유지한다. */
.login{ min-height:100vh; min-height:100dvh; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); background:var(--bg); }
.login[hidden]{ display:none; }
.login-art{ position:relative; min-width:0; background:#171e2b; }
.login-art img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.login-panel{ min-width:0; min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center; position:relative;
  padding:calc(var(--sp-6) * 2) var(--sp-5); background-color:var(--bg);
  background-image:radial-gradient(var(--border) 1px, transparent 1px); background-size:32px 32px; }
.login-box{ width:min(100%, 320px); display:flex; flex-direction:column; align-items:stretch; gap:var(--sp-3); margin:0;
  text-align:center; }
.login-box .brand{ flex-direction:column; justify-content:center; gap:var(--sp-3); margin-bottom:var(--sp-2); }
.login-box .brand svg{ width:20px; height:20px; }
.login-box .brand-word{ font:600 12px/1.4 var(--mono); letter-spacing:var(--track-brand); }
.login-intro{ color:var(--dim); font-size:13px; margin:0 0 var(--sp-4); }
.login-tabs{ display:flex; justify-content:center; margin:0 0 var(--sp-2); }
.login-tabs span{ min-height:40px; display:inline-flex; align-items:center; border-bottom:2px solid var(--accent);
  color:var(--text); font:600 11px/1.4 var(--mono); letter-spacing:var(--track-nav); }
.login-box input{ width:100%; height:46px; padding:var(--sp-3) var(--sp-4); border-radius:999px; text-align:center; font-size:13px;
  background:var(--panel); color:var(--text); }
.login-box input::placeholder{ color:var(--faint); }
.login-box .primary{ width:100%; min-height:40px; justify-content:center; border-radius:999px; margin-top:0; }
.login-box .error{ min-height:1.6em; margin-top:var(--sp-1); text-align:center; }
.login-watermark{ position:absolute; bottom:var(--sp-2); left:50%; transform:translateX(-50%); color:var(--faint);
  font:600 11px/1.4 var(--mono); letter-spacing:var(--track-brand); }
@media(max-width:800px){
  .login{ grid-template-columns:minmax(0,1fr); }
  .login-art{ display:none; }
  .login-panel{ padding-inline:var(--sp-4); }
}

/* DEV-166: 모든 화면의 헤더·탭줄·본문·재시작 배너가 같은 좌우 여백(--page-gutter)을 쓴다. 최대 폭 1440px은 여백 공식이 만든다. */
body{ --page-max:1440px; --tab-pad:10px; --page-gutter:max(clamp(24px, calc((100vw - 900px) / 8), 74px), calc((100vw - var(--page-max)) / 2)); }
.top{ padding-left:var(--page-gutter); padding-right:var(--page-gutter); }
main{ max-width:none; margin:0; padding-left:var(--page-gutter); padding-right:var(--page-gutter); }
.tab-bar-inner{ max-width:none; margin:0; padding-left:calc(var(--page-gutter) - var(--tab-pad)); padding-right:var(--page-gutter); }
.user-menu{ right:var(--page-gutter); }
.ops-split:has(#list-body), .issue-summary, #list-body{ min-width:0; max-width:100%; }
#list-body{ overflow-x:auto; }

/* 목록 도구줄 */
.toolbar{ display:flex; gap:var(--sp-3); align-items:center; flex-wrap:wrap; margin-bottom:var(--sp-4); }
.toolbar .grow{ flex:1; min-width:200px; }
.toolbar label.dim{ display:flex; align-items:center; gap:6px; font-size:13px; }

/* 목록 기간별 처리 현황 — 넓은 표와 대기열 위에서 짧게 읽는다. */
.issue-summary{ margin-bottom:var(--sp-4); padding:var(--sp-3) var(--sp-4); border:1px solid var(--border); border-radius:var(--r-md); background:var(--panel); }
.issue-summary-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap; }
.issue-summary-title{ font:600 12px/1.4 var(--mono); letter-spacing:var(--track-label); }
.issue-summary-periods{ display:flex; flex-wrap:wrap; gap:var(--sp-1); }
.issue-summary-periods button{ min-height:40px; padding:var(--sp-2) var(--sp-3); border:1px solid transparent; border-radius:var(--r-sm); background:transparent; color:var(--dim); font-size:13px; }
.issue-summary-periods button[aria-pressed="true"]{ border-color:rgba(var(--accent-rgb),.4); background:rgba(var(--accent-rgb),.1); color:var(--accent); }
.issue-summary-periods button:focus-visible, .issue-summary-retry:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.issue-summary-content{ min-height:34px; margin-top:var(--sp-2); }
.issue-summary-values{ display:flex; gap:var(--sp-2) var(--sp-5); flex-wrap:wrap; font-variant-numeric:tabular-nums; }
.issue-summary-values>div{ display:flex; align-items:baseline; gap:var(--sp-2); min-width:0; }
.issue-summary-values > div > span{ color:var(--dim); font-size:12px; }
.issue-summary-values strong{ font:600 14px/1.4 var(--mono); white-space:nowrap; }
.issue-summary-values small{ color:var(--dim); font:500 12px/1.4 var(--sans); }
.issue-summary-error{ color:var(--danger); font-size:13px; }
.issue-summary-retry{ min-height:40px; margin-left:var(--sp-2); }
/* 전역 Trend */
.trend-page{ min-width:0; }
.trend-heading{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:var(--sp-3); margin-bottom:var(--sp-5); }
.trend-scroll{ overflow-x:auto; max-width:100%; }
.trend-chart text{ fill:currentColor; font:11px var(--mono); }
.trend-sort{ min-height:40px; padding:0 var(--sp-1); background:none; border:0; color:inherit; font:inherit; cursor:pointer; }
.trend-heading h1{ margin:0; font:650 24px/1.4 var(--sans); }
.trend-heading p{ margin:var(--sp-1) 0; }
.trend-heading .eyebrow{ color:var(--dim); font:600 11px/1.4 var(--mono); letter-spacing:var(--track-label); }
.trend-filter{ display:flex; flex-wrap:wrap; align-items:end; gap:var(--sp-3); margin-bottom:var(--sp-3); padding:var(--sp-4); background:var(--panel); border:1px solid var(--border); border-radius:var(--r-md); }
.trend-filter label{ display:flex; flex-direction:column; gap:var(--sp-1); font:600 12px/1.4 var(--mono); min-width:0; }
.trend-filter input, .trend-filter select{ min-height:40px; max-width:100%; font:400 13px var(--sans); }
.trend-filter button{ min-height:40px; }
.trend-periods{ display:flex; flex-wrap:wrap; gap:var(--sp-1); }
.trend-periods button{ border:1px solid var(--border); background:var(--panel); color:var(--dim); border-radius:var(--r-sm); }
.trend-periods button[aria-pressed="true"]{ color:var(--accent); border-color:var(--accent); background:rgba(var(--accent-rgb),.1); }
.trend-page :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.trend-context, .trend-note{ color:var(--dim); font-size:13px; }
.trend-partial{ padding:var(--sp-3); border:1px solid var(--border); border-radius:var(--r-md); font-size:13px; }
.trend-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-4); margin:var(--sp-4) 0 var(--sp-5); }
.trend-card, .trend-ranking, .trend-improve, .trend-daily{ min-width:0; padding:var(--sp-4); background:var(--panel); border:1px solid var(--border); border-radius:var(--r-md); }
.trend-card h2, .trend-ranking h2, .trend-improve h2{ margin:0; font:600 12px/1.4 var(--mono); letter-spacing:var(--track-label); }
.trend-card .trend-cost{ display:block; margin:calc(-1 * var(--sp-2)) 0 var(--sp-3); font:12px/1.4 var(--mono); }
.trend-card strong{ display:inline-block; margin:var(--sp-2) var(--sp-2) var(--sp-3) 0; font:600 24px/1.4 var(--mono); font-variant-numeric:tabular-nums; }
.trend-chart{ display:block; width:100%; height:130px; color:var(--accent); border-bottom:1px solid var(--border); }
.trend-axis{ display:flex; justify-content:space-between; color:var(--dim); font:11px/1.4 var(--mono); }
.trend-ranking p, .trend-improve p{ margin:var(--sp-2) 0; font-size:13px; }
.trend-ranking ol{ padding-left:var(--sp-5); margin-bottom:0; }
.trend-ranking li{ padding:var(--sp-2) 0; border-top:1px solid var(--border); display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-4); overflow-wrap:anywhere; }
.trend-ranking li a{ min-width:0; }
.trend-ranking li strong{ font:600 13px var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap; }
.trend-daily{ margin-top:var(--sp-4); }
.trend-daily summary{ cursor:pointer; min-height:40px; }
.trend-table-wrap{ max-height:360px; overflow:auto; }
.trend-daily table{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.trend-daily th, .trend-daily td{ padding:var(--sp-2); border-bottom:1px solid var(--border); text-align:right; white-space:nowrap; }
.trend-daily th:first-child{ text-align:left; }
.trend-subtabs{ display:flex; gap:var(--sp-4); border-bottom:1px solid var(--border); margin-bottom:var(--sp-4); }
.trend-subtabs a{ display:inline-flex; align-items:center; min-height:40px; padding:0 var(--sp-2); color:var(--dim); border-bottom:2px solid transparent; font-weight:500; }
.trend-subtabs a[aria-current="page"]{ color:var(--accent); border-bottom-color:var(--accent); }
.trend-issues-table{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.trend-issues-table th,.trend-issues-table td{ padding:var(--sp-2); border-bottom:1px solid var(--border); text-align:left; white-space:nowrap; }
.trend-issues-table th:first-child{ min-width:230px; }
.trend-issues-table td:nth-last-child(-n+2){ text-align:right; }
.trend-human-toggle{ display:inline-flex; align-items:center; min-height:40px; gap:var(--sp-2); font-size:13px; }
.trend-stage-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-4); margin:var(--sp-3) 0; }
.trend-stage-card, .trend-stage-section{ min-width:0; padding:var(--sp-4); background:var(--panel); border:1px solid var(--border); border-radius:var(--r-md); }
.trend-stage-card h2, .trend-stage-section h2{ margin:0 0 var(--sp-3); font:600 12px/1.4 var(--mono); letter-spacing:var(--track-label); }
.trend-donut-layout{ display:grid; grid-template-columns:minmax(130px,180px) minmax(0,1fr); align-items:center; gap:var(--sp-3); }
.trend-donut{ display:block; width:100%; max-width:180px; margin:auto; color:var(--text); }
.trend-donut text{ fill:currentColor; font:600 11px var(--mono); }
.trend-donut-legend{ display:grid; gap:var(--sp-2); min-width:0; padding:0; margin:0; list-style:none; font-size:12px; font-variant-numeric:tabular-nums; }
.trend-donut-legend li{ display:grid; grid-template-columns:12px minmax(0,1fr) auto; align-items:center; gap:var(--sp-2); min-width:0; }
.trend-donut-legend .trend-stage-dot{ margin:0; }
.trend-donut-name{ min-width:0; overflow-wrap:anywhere; }
.trend-donut-value{ white-space:nowrap; color:var(--dim); }
.trend-stage-queue{ --stage-color:var(--s-backlog); }
.trend-stage-review{ --stage-color:var(--s-in_review); }
.trend-stage-execute{ --stage-color:var(--s-in_progress); }
.trend-stage-qa{ --stage-color:var(--s-triage); }
.trend-stage-completion{ --stage-color:var(--s-done); }
.trend-stage-plan_wait{ --stage-color:var(--s-changes_requested); }
.trend-stage-done_wait{ --stage-color:var(--text); }
.trend-stage-bar{ display:flex; width:120px; height:10px; border-radius:999px; overflow:hidden; background:var(--border); }
.trend-stage-bar i{ display:block; height:100%; background:var(--stage-color); }
.trend-stage-details{ margin:0 0 var(--sp-4); }
.trend-stage-details summary{ min-height:40px; cursor:pointer; color:var(--accent); font-size:13px; }
.trend-stage-labels{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-2) var(--sp-4); padding:0; margin:0 0 var(--sp-4); list-style:none; }
.trend-stage-labels li{ display:flex; min-width:0; gap:var(--sp-2); padding:var(--sp-3); background:var(--panel); border:1px solid var(--border); border-radius:var(--r-md); }
.trend-stage-labels li div{ display:flex; flex-direction:column; min-width:0; gap:var(--sp-1); font-size:13px; }
.trend-stage-labels li strong{ font-weight:600; }
.trend-stage-labels li span:not(.trend-stage-dot){ color:var(--dim); }
.trend-stage-dot{ flex:none; width:12px; height:12px; margin-top:4px; border-radius:999px; background:var(--stage-color); }
.trend-stage-delta{ white-space:nowrap; }
.trend-stage-scroll{ max-width:100%; overflow-x:auto; }
.trend-stage-table{ width:100%; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums; }
.trend-stage-table th, .trend-stage-table td{ padding:var(--sp-2); border-bottom:1px solid var(--border); text-align:right; white-space:nowrap; }
.trend-stage-table thead th{ background:var(--panel-2); font:600 11px/1.4 var(--mono); letter-spacing:var(--track-label); }
.trend-stage-table th:first-child{ text-align:left; min-width:200px; }
.trend-stage-table th button{ min-height:40px; border:0; background:none; color:inherit; font:inherit; cursor:pointer; }
.trend-stage-table .trend-row-title{ display:inline-block; max-width:220px; overflow:hidden; text-overflow:ellipsis; vertical-align:middle; white-space:nowrap; }
.trend-stage-table .trend-expand{ min-width:40px; color:var(--accent); }
.trend-task-row th{ padding-left:var(--sp-5); }
.trend-task-row[hidden]{ display:none; }
.trend-stage-history{ margin-bottom:var(--sp-4); }
.trend-stage-history p{ margin:0 0 var(--sp-3); font-size:13px; }
.trend-stage-daily-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-4); }
.trend-dist-grid .dim{ margin:calc(-1 * var(--sp-2)) 0 var(--sp-2); }
.trend-dist-chart{ display:block; width:100%; height:auto; color:var(--accent); }
.trend-dist-chart text{ fill:var(--dim); font:10px var(--mono); }
.trend-dist-chart .trend-dist-count{ fill:var(--text); }
.trend-dist-bar{ fill:currentColor; }
.trend-stage-daily-grid h3{ margin:0 0 var(--sp-2); font-size:13px; font-weight:600; }
.trend-stage-daily-chart{ display:block; width:100%; height:auto; color:var(--accent); }
.trend-stage-daily-chart text{ fill:var(--dim); font:10px var(--mono); }
.trend-stage-daily-chart .trend-stage-value{ fill:var(--text); font-size:10px; }
.trend-stage-day{ stroke:var(--border); stroke-width:1; opacity:.6; }
.trend-stage-hline{ stroke:var(--border); stroke-width:1; }
.trend-stage-area{ fill:var(--accent); opacity:.12; }
.trend-dev-mark{ stroke:var(--dim); stroke-width:1.5; stroke-dasharray:4 4; }
.trend-stage-line{ fill:none; stroke:var(--accent); stroke-width:2; stroke-linejoin:round; }
.trend-stage-point{ fill:var(--accent); stroke:var(--panel); stroke-width:2; }
.trend-stage-point:hover{ r:6; }
.trend-dev-changes{ margin-top:var(--sp-3); font-size:13px; }
.trend-dev-changes summary{ min-height:40px; cursor:pointer; color:var(--accent); }
.trend-dev-changes ul{ margin:0; padding-left:var(--sp-5); }
.trend-dev-changes li{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--sp-2); padding:var(--sp-2) 0; border-top:1px solid var(--border); }
.trend-dev-changes li a{ min-width:0; overflow-wrap:anywhere; }
.trend-dev-changes time{ color:var(--dim); white-space:nowrap; }
@media(max-width:800px){
  .trend-grid{ grid-template-columns:minmax(0,1fr); }
  .trend-stage-grid, .trend-stage-labels, .trend-stage-daily-grid{ grid-template-columns:minmax(0,1fr); }
  .trend-filter label:first-child, .trend-filter select, .trend-periods{ width:100%; }
  .trend-periods button{ flex:1; }
  .trend-filter label:has(input){ flex:1 1 120px; }
  .trend-filter input{ width:100%; }
  .trend-filter>button[type="submit"]{ flex:1 1 100%; }
  .trend-card strong{ font-size:20px; }
}
@media(max-width:600px){
  .trend-donut-layout{ grid-template-columns:minmax(0,1fr); }
}
@media(max-width:800px){
  .issue-summary{ padding:var(--sp-2) var(--sp-3); }
  .issue-summary-periods{ width:100%; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
  .issue-summary-periods button{ padding:var(--sp-2) var(--sp-1); }
  .issue-summary-values{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-1) var(--sp-2); }
  .issue-summary-values>div{ flex-wrap:wrap; gap:0 var(--sp-2); }
}

/* 상태·우선순위·라벨·ID */
/* 점등·감광을 유지하고 각 전환만 150ms로 처리한다. */
.status-in-progress::before{ animation:status-in-progress-blink 2s ease infinite; }
@keyframes status-in-progress-blink{
  0%, 42.5%, 100%{ opacity:1; }
  50%, 92.5%{ opacity:.3; }
}
@media (prefers-reduced-motion: reduce){ .status-in-progress::before{ animation:none; } }
.prio{ font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:var(--track-label); color:var(--dim); }
.prio.urgent{ color:var(--danger); } .prio.high{ color:#C2410C; }
.label{ display:inline-block; font-size:11.5px; padding:1px 8px; border-radius:999px; border:1px solid var(--border);
  color:var(--dim); margin-left:4px; vertical-align:1px; }
.ref{ font-size:12px; font-weight:500; color:var(--dim); letter-spacing:0.04em; white-space:nowrap; }

/* 이슈 표 */
.processing-agents{ display:inline-flex; align-items:center; gap:4px; color:var(--dim); }
.completion-time{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.history-heading{ white-space:nowrap; }
.issue-history-mobile{ display:none; }
.issue-history-mobile > :empty{ display:none; }
.task-history{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--dim); }
table.issues{ width:100%; border-collapse:separate; border-spacing:0; background:var(--panel); border:1px solid var(--border);
  border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow); }
table.issues td, table.issues th{ padding:0 var(--sp-4); height:46px; border-bottom:1px solid var(--border); text-align:left; vertical-align:middle; }
table.issues th{ height:38px; background:var(--panel-2); }
table.issues tr:last-child td{ border-bottom:none; }
table.issues tr.row{ cursor:pointer; transition:background .1s; }
table.issues tr.row:hover{ background:var(--panel-2); }
table.issues tr[hidden]{ display:none; }
#list-body table.issues tr.child td.ref{ padding-left:calc(var(--sp-4) + var(--sp-5)); }
table.issues tr.child td:first-child{ box-shadow:inset 2px 0 0 var(--border); }
table.issues.tasks td:nth-child(2){ overflow-wrap:anywhere; }
.task-actions{ display:flex; justify-content:space-between; gap:var(--sp-1); }
.task-actions > button:only-child{ flex:1 1 auto; justify-content:center; }
.task-actions button{ white-space:nowrap; }
.tog{ all:unset; cursor:pointer; box-sizing:border-box; width:20px; height:20px; margin:0 4px 0 -6px; display:inline-flex; align-items:center; justify-content:center; color:var(--dim); vertical-align:middle; }
.tog:hover{ color:var(--text); }
.tog:focus-visible{ outline:2px solid currentColor; outline-offset:-2px; }
.tog i{ width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .1s; }
.tog[aria-expanded="false"] i{ transform:translateX(-2px) rotate(-45deg); }
.title-cell{ font-weight:500; }
table.issues:not(.tasks) .title-cell{ width:100%; min-width:240px; overflow-wrap:anywhere; padding-top:8px; padding-bottom:8px; }
#list-body table.issues:not(.tasks) .title-cell{ max-width:0; overflow:hidden; }
#list-body .issue-title-line{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.issue-badges:empty{ display:none; }
.issue-badges .label:first-child{ margin-left:0; }
.goal-badge{ color:var(--accent); font-size:12px; font-weight:500; white-space:nowrap; }
.issue-badges{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); }
.row-rating{ font-size:12px; font-weight:600; color:var(--accent); white-space:nowrap; }
.title-cell .sub{ font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:var(--track-label); color:var(--faint); font-weight:500; }
.list-more{ min-height:1px; padding:14px; text-align:center; color:var(--dim); font-size:13px; }

/* 칸반 */
.kanban{ display:flex; gap:var(--sp-3); overflow-x:auto; padding-bottom:var(--sp-3); align-items:flex-start;
  min-height:calc(100dvh - 150px); scrollbar-width:none; cursor:grab; }
.kanban::-webkit-scrollbar{ display:none; }
.kanban:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.kanban.panning, .kanban.panning *{ cursor:grabbing; user-select:none; }
.kanban h3 .status, .kanban h3 .ref{ cursor:text; }
.col{ flex:0 0 272px; background:var(--panel-2); border:1px solid var(--border); border-radius:var(--r-md); display:flex; flex-direction:column;
  max-height:calc(100vh - 150px); }
.col h3{ margin:0; padding:12px 14px; display:flex; justify-content:space-between; align-items:center; }
.col h3 .status{ font-family:var(--mono); text-transform:uppercase; letter-spacing:var(--track-label); font-size:11px; font-weight:600; }
.col .cards{ padding:0 var(--sp-2) var(--sp-2); display:flex; flex-direction:column; gap:var(--sp-2); overflow-y:auto; min-height:64px; }
.col.drop{ outline:2px dashed rgba(var(--accent-rgb),0.6); outline-offset:-2px; }
.card{ background:var(--panel); border:1px solid var(--border); border-radius:var(--r-md); padding:12px 14px; cursor:grab; box-shadow:var(--shadow);
  transition:border-color .12s, box-shadow .12s; }
.card:hover{ border-color:var(--border-strong); box-shadow:var(--shadow-pop); }
.card .t{ font-size:13.5px; font-weight:500; margin:4px 0 8px; line-height:1.45; }
.card .meta{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; font-size:12px; color:var(--dim); }
.card .meta .label{ margin-left:0; }

/* 이슈 상세 */
.detail{ display:grid; grid-template-columns:minmax(0, 1fr) 300px; gap:var(--sp-5); align-items:start; }
.detail h1{ margin:6px 0 6px; font-size:24px; font-weight:650; letter-spacing:-0.02em; line-height:1.3; }
.byline{ color:var(--dim); font-size:13px; margin-bottom:var(--sp-5); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.panel{ background:var(--panel); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--sp-5); margin-bottom:var(--sp-4); box-shadow:var(--shadow); }
.panel h2{ margin:0 0 var(--sp-3); display:flex; align-items:center; gap:var(--sp-2); min-height:30px; }
.panel h2 .meta{ font-family:var(--sans); text-transform:none; letter-spacing:0; font-weight:400; font-size:12.5px; color:var(--dim); }
.panel h2 .right{ margin-left:auto; display:flex; gap:6px; }
.panel h2 .right button, .panel h2 .right .button{ font-family:var(--sans); text-transform:none; letter-spacing:0; font-size:12.5px; padding:5px 10px; color:var(--text); }
.side{ padding:var(--sp-2) var(--sp-5); }
.side .field{ padding:var(--sp-3) 0; border-bottom:1px solid var(--border); }
.side .field:last-child{ border-bottom:none; }
.side .field > span{ display:block; margin-bottom:6px; }
.side .complete-tree{ margin-top:var(--sp-2); }
.side select, .side input:not([type=checkbox]){ width:100%; }
.side code{ font-family:var(--mono); font-size:12px; }
.side .hint{ font-size:12px; margin-top:6px; line-height:1.5; }
.side #ask-codex-review{ margin-top:var(--sp-2); }
.side #ask-codex-execute{ margin-top:var(--sp-2); }
.review-actions{ display:flex; gap:6px; flex-wrap:wrap; }
/* 결정 버튼과 폼의 두 동작을 같은 너비로 배열한다. */
#result-actions, #decision-actions,
#decision-form .row-end, #result-form .row-end{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-2); }
#result-actions > button:first-child:nth-last-child(odd),
#decision-actions > button:first-child:nth-last-child(odd){ grid-column:1/-1; }
#result-actions > button, #decision-actions > button,
#decision-form .row-end > button, #result-form .row-end > button{ width:100%; justify-content:center; }

.decision{ margin-top:var(--sp-4); padding-top:var(--sp-4); border-top:1px solid var(--border); }
.decision-state{ margin-bottom:var(--sp-3); }
.decision-state .md, .decision-state p{ margin:var(--sp-2) 0 0; }
.decision textarea{ min-height:120px; font-family:var(--sans); font-size:14px; margin-bottom:var(--sp-2); }
.decision [hidden]{ display:none; }
.md{ overflow-wrap:anywhere; line-height:1.7; }
.md > :first-child{ margin-top:0; } .md > :last-child{ margin-bottom:0; }
.md pre{ background:var(--panel-2); border:1px solid var(--border); padding:12px 14px; border-radius:var(--r-sm); overflow-x:auto; }
.md code{ font-family:var(--mono); font-size:12.5px; background:var(--panel-2); padding:1px 5px; border-radius:4px; }
.md pre code{ padding:0; background:none; }
.md h1, .md h2, .md h3{ font-size:15px; font-weight:650; margin:18px 0 6px; letter-spacing:-0.01em; }
.md p{ margin:8px 0; }
.md ul, .md ol{ padding-left:22px; margin:8px 0; }
.md li{ margin:2px 0; }
details summary{ cursor:pointer; padding:6px 0; color:var(--dim); font-size:13px; }

/* 타임라인 */
.timeline{ list-style:none; margin:0; padding:0; }
.timeline li{ position:relative; padding:10px 0 10px 22px; }
.timeline li::before{ content:""; position:absolute; left:4px; top:18px; width:7px; height:7px; border-radius:50%; background:var(--border-strong); }
.timeline li::after{ content:""; position:absolute; left:7px; top:29px; bottom:-12px; width:1px; background:var(--border); }
.timeline li:last-child::after{ display:none; }
.timeline li.comment::before{ background:var(--accent); }
.timeline li.comment .md{ margin-top:6px; padding:12px 14px; background:var(--panel-2); border-radius:var(--r-sm); }
.timeline .who{ font-weight:600; }
.timeline .model{ font-family:var(--mono); font-size:11px; color:var(--dim); margin-left:4px; }
.timeline .when{ font-size:11px; color:var(--dim); margin-left:8px; letter-spacing:0.02em; }
.timeline .sys{ color:var(--dim); font-size:13px; }
.timeline .sys .who{ color:var(--text); font-weight:500; }
.timeline .sys .md{ margin-top:6px; color:var(--text); }
.timeline .empty-line{ padding-left:0; }
.timeline .empty-line::before, .timeline .empty-line::after{ display:none; }
.comment-box{ display:flex; flex-direction:column; gap:var(--sp-2); margin-top:var(--sp-4); padding-top:var(--sp-4); border-top:1px solid var(--border); }
.comment-box textarea{ min-height:84px; font-family:var(--sans); font-size:14px; }
.row-end{ display:flex; justify-content:flex-end; gap:var(--sp-2); }
/* 새 이슈의 취소·발행은 같은 너비로, 좁은 화면에서는 행 전체를 채운다. */
.form-actions{ display:grid; grid-template-columns:repeat(2,minmax(120px,max-content)); justify-content:end; padding-top:var(--sp-4); border-top:1px solid var(--border); }
.form-actions > .button, .form-actions > button{ width:100%; justify-content:center; }
@media(max-width:800px){
  .form-actions{ grid-template-columns:repeat(2,minmax(0,1fr)); justify-content:stretch; }
  .form-actions > .button, .form-actions > button{ min-height:40px; }
}

/* 폼 */
.form{ max-width:780px; display:flex; flex-direction:column; gap:var(--sp-4); }
.form h2{ margin:0; font-family:var(--sans); font-size:20px; font-weight:650; letter-spacing:-0.02em; }
.form label{ display:flex; flex-direction:column; gap:6px; }
.form label input, .form label select, .form label textarea{ font-family:var(--sans); text-transform:none; letter-spacing:0; font-weight:400; color:var(--text); font-size:14px; }
.form label textarea{ font-family:var(--mono); font-size:13px; }
.form .line{ display:flex; gap:var(--sp-3); flex-wrap:wrap; align-items:flex-end; }
.form .line label{ flex:1; min-width:150px; }
.form .line label.actions{ flex:0 0 auto; flex-direction:row; gap:6px; }
.form.panel{ max-width:none; }
.dep-picker{ min-width:0; margin:0; padding:var(--sp-4); border:1px solid var(--border); border-radius:var(--r-md); }
.dep-picker legend{ font:600 12px/1.4 var(--mono); letter-spacing:var(--track-label); }
.dep-picker p{ margin:var(--sp-2) 0; font-size:13px; }
.dep-picker label{ max-width:100%; }
.dep-selected{ display:flex; flex-wrap:wrap; gap:var(--sp-2); margin:var(--sp-3) 0; }
.dep-selected:empty{ display:none; }
.dep-tag{ min-height:40px; max-width:100%; border:1px solid var(--border); border-radius:999px; background:var(--panel-2); color:var(--text); font-size:13px; overflow-wrap:anywhere; }
.dep-list{ max-height:240px; overflow-y:auto; border:1px solid var(--border); border-radius:var(--r-md); }
.dep-list > p{ padding:var(--sp-3); }
.dep-option{ display:flex; width:100%; min-height:40px; align-items:center; gap:var(--sp-2); text-align:left; border:0; border-bottom:1px solid var(--border); border-radius:0; background:var(--panel); color:var(--text); font-size:13px; }
.dep-option:last-child{ border-bottom:0; }
.dep-option span:nth-child(2){ flex:1; min-width:0; overflow-wrap:anywhere; }
.dep-option[aria-pressed="true"]{ background:rgba(var(--accent-rgb),.1); color:var(--accent); }
.dep-picker :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.issue-deps{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2); margin-bottom:var(--sp-3); }
.issue-deps .sub{ margin:0; }
.dep-dialog{ width:min(100% - 32px, 600px); max-height:calc(100vh - 32px); padding:0; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--panel); color:var(--text); }
.dep-dialog::backdrop{ background:rgba(0,0,0,.5); }
.dep-dialog .dep-picker{ border:0; }
.dep-dialog .row-end{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-2); }
.dep-dialog .row-end button{ width:100%; min-width:0; white-space:normal; justify-content:center; }
.keybox{ background:rgba(var(--accent-rgb),0.08); border:1px solid rgba(var(--accent-rgb),0.4); border-radius:var(--r-md); padding:var(--sp-4) var(--sp-5); margin-bottom:var(--sp-4); line-height:1.8; }
.keybox code{ font-family:var(--mono); word-break:break-all; font-size:13px; background:var(--panel); padding:2px 6px; border-radius:4px; }

/* 빠른 발행 입력창(DEV-93) — Claude·ChatGPT식: 하단 가운데 둥근 카드, 위는 늘어나는 입력, 아래 줄 왼쪽 도구·오른쪽 원형 보내기 */
.composer{ position:fixed; left:50%; bottom:var(--sp-4); transform:translateX(-50%); z-index:18; width:min(760px, calc(100vw - 28px));
  display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-3) var(--sp-3) var(--sp-2); background:var(--panel);
  border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-pop); animation:cmp-in .22s cubic-bezier(.2,.8,.2,1); }
.composer[hidden]{ display:none; }
.composer:focus-within{ border-color:var(--border-strong); }
.composer textarea{ border:none; box-shadow:none; background:transparent; resize:none; padding:var(--sp-1); min-height:24px; max-height:40vh;
  overflow-y:auto; font-size:14px; line-height:1.6; }
.composer textarea:focus{ box-shadow:none; }
.cmp-bar{ display:flex; align-items:center; gap:var(--sp-2); min-width:0; }
.cmp-bar select{ min-width:0; max-width:180px; font-size:13px; padding:6px 8px; border-radius:999px; background:var(--panel-2); }
.cmp-icon, .cmp-send{ flex-shrink:0; width:32px; height:32px; padding:0; justify-content:center; border-radius:999px; }
.cmp-chain{ margin-left:auto; }
.cmp-chain[aria-pressed="true"]{ border-color:var(--accent); color:var(--accent); }
.cmp-send:disabled{ opacity:.4; cursor:default; box-shadow:none; }
.cmp-files{ display:flex; flex-wrap:wrap; gap:var(--sp-1); }
.cmp-files:empty, .cmp-error:empty{ display:none; }
.cmp-chip{ display:inline-flex; align-items:center; gap:var(--sp-1); max-width:100%; padding:2px 4px 2px 10px; font-size:12px; color:var(--dim);
  background:var(--panel-2); border:1px solid var(--border); border-radius:999px; overflow-wrap:anywhere; }
.cmp-chip.bad{ color:var(--danger); border-color:var(--danger); }
.cmp-chip button{ width:22px; height:22px; padding:0; justify-content:center; border:none; background:transparent; border-radius:999px; }
.cmp-chip .cmp-thumb{ flex:none; width:32px; height:32px; border:1px solid var(--border); border-radius:6px; overflow:hidden; background:var(--panel-2); }
#result-attach{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); margin:var(--sp-2) 0; }
#result-attach[hidden]{ display:none; }
#result-attach .cmp-files{ flex:1 1 100%; }
.cmp-thumb img{ display:block; width:100%; height:100%; object-fit:cover; }
.cmp-thumb:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.cmp-error{ margin:0; font-size:12px; color:var(--danger); }
.fab{ position:fixed; right:var(--page-gutter); bottom:calc(var(--sp-4) + env(safe-area-inset-bottom, 0px)); z-index:17; width:48px; height:48px; padding:0;
  display:flex; align-items:center; justify-content:center; border:none; border-radius:50%; background:var(--accent); color:#fff; text-decoration:none; box-shadow:var(--shadow-pop); cursor:pointer; }
.fab .ico{ width:22px; height:22px; }
.fab:hover{ filter:brightness(1.08); }
.fab:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.fab[hidden], body:has(.composer:not([hidden])) .fab{ display:none; }
body:has(.fab:not([hidden])) main{ padding-bottom:88px; }
body:has(.composer:not([hidden])) main{ padding-bottom:200px; }
body:has(.composer:not([hidden])) .toast{ bottom:calc(16px + var(--composer-height, 0px) + var(--sp-3)); top:auto; }
@keyframes cmp-in{ from{ opacity:0; transform:translate(-50%, 4px); } }
@media (prefers-reduced-motion: reduce){ .composer{ animation:none; } }
@media (max-width: 800px){ .cmp-bar select{ max-width:120px; } .cmp-icon, .cmp-send{ width:40px; height:40px; } }

@media (max-width: 800px){
  .detail{ grid-template-columns:minmax(0, 1fr); }
  body{ --page-gutter:16px; --tab-pad:8px; }
  .top{ padding-top:14px; padding-bottom:14px; }
  .header-right{ gap:10px; }
  .tab-bar-inner{ gap:2px; }
  .tab-btn{ padding:12px 8px; }
  .tab-bar-sep{ margin:0 4px; }
  #project-filter{ max-width:30vw; }
  main{ padding-top:14px; padding-bottom:14px; }
  table.issues .hide-m, .tab-bar .hide-m{ display:none; }
  .issue-history-mobile{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--dim); }
  .task-actions{ flex-direction:column; padding:var(--sp-1) 0; }
  .task-actions > button:only-child{ flex:none; }
  .task-actions button{ min-width:40px; min-height:40px; padding:var(--sp-2); }
  table.issues.tasks{ table-layout:fixed; }
  table.issues.tasks td:first-child{ width:72px; }
  table.issues.tasks td:nth-child(3){ width:100px; }
  table.issues.tasks td:last-child{ width:48px; }
  table.issues.tasks td{ padding:0 var(--sp-1); }
  table.issues td, table.issues th{ padding:0 10px; }
  table.issues:not(.tasks) .title-cell{ min-width:0; padding-top:8px; padding-bottom:8px; }
  .user-chip-name{ max-width:64px; } .user-chip .role-badge{ display:none; }
  .col{ flex-basis:82vw; }
  .panel{ padding:var(--sp-4); }
  .side{ padding:var(--sp-1) var(--sp-4); }
  .detail h1{ font-size:21px; }
  .agent-btns{ flex-direction:column; }
  .agent-btns button{ width:100%; min-height:40px; justify-content:center; }
}

.checks{display:inline-flex;gap:14px;white-space:nowrap}
.status + .status{margin-left:10px}
.md blockquote{ margin:8px 0 2px; padding:2px 0 2px 12px; border-left:3px solid var(--border); color:var(--dim, inherit); }
.runs{ list-style:none; margin:0; padding:0; }
.runs li{ padding:6px 0; font-size:13px; line-height:1.5; }
.runs li + li{ border-top:1px solid var(--border); }
.runs code{ word-break:break-all; }
.exec{ margin-top:var(--sp-3); }
/* 사이드바 Agent 칸 소제목(검토/실행/병합)과 도는 중 상태 줄(DEV-113) */
.agent-sub{ font-size:12px; color:var(--dim); margin:var(--sp-2) 0 4px; }
.agent-btns{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.agent-busy{ display:flex; align-items:center; gap:6px; color:var(--dim); font-size:13px; }
.branch{ margin-top:var(--sp-2); }
.branch pre{ margin:6px 0 0; font:12px/1.5 var(--mono); white-space:pre-wrap; word-break:break-all; color:var(--dim); }

/* 대기열(DEV-43) — 대기는 회청 점(DESIGN §3 대기·예정) */
.queued{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.jobs{ margin:0 0 var(--sp-3); padding:var(--sp-2) var(--sp-3); border:1px solid var(--border); border-radius:8px; background:var(--panel); }
.jobs-head{ font-size:13px; font-weight:600; }
.jobs-empty{ font-size:13px; margin-top:var(--sp-1); }
.jobs-list{ margin-top:var(--sp-2); }   /* 안쪽 스크롤 없이 페이지 흐름에서 늘어난다(DEV-162) */
.jobs ul{ list-style:none; margin:0; padding:0; }
.jobs .job-title{ min-width:0; overflow-wrap:anywhere; }
.jobs li{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; padding:6px 0; font-size:13px; border-top:1px solid var(--border); }
.jobs li .job-btns{ margin-left:auto; display:flex; align-items:center; gap:var(--sp-1); }
.move-job{ padding:var(--sp-1); line-height:1; }
.move-job:disabled{ opacity:.35; }
/* 대기열 자리(DEV-92) — 좁으면 주 패널 위, PC 폭(>1100px)이면 오른쪽 열. 나중에 오케스트레이션 패널이 이 자리를 쓴다 */
.ops-split{ display:flex; flex-direction:column; }
.ops-main{ min-width:0; }
.ops-side{ order:-1; }
.ops-split>.issue-summary{ order:-2; }
/* 목록 화면은 필터↔처리현황↔(대기열)↔표 간격을 모두 16px로 맞춘다(DEV-188). 넓은 폭은 grid 행 간격을 없애고, 세로 배치는 대기열 아래 여백을 같은 단계로 */
.ops-split:has(#list-body) .jobs{ margin-bottom:var(--sp-4); }
@media (min-width: 1101px){
  .ops-split{ display:grid; grid-template-columns:minmax(0, 1fr) 300px; gap:var(--sp-5); align-items:start; }
  .ops-split:has(#list-body){ grid-template-columns:minmax(0, 1fr) 300px; grid-template-areas:"summary side" "main side"; grid-template-rows:auto 1fr; row-gap:0; }
  .ops-split:has(#list-body) .issue-summary{ grid-area:summary; }
  .ops-split:has(#list-body) .ops-main{ grid-area:main; }
  .ops-split:has(#list-body) .ops-side{ grid-area:side; }
  .ops-side{ order:0; }
}
@media (max-width: 800px){ .move-job, .queued .cancel-job, .jobs .cancel-job{ min-width:40px; min-height:40px; justify-content:center; } }
.stage{margin:0 0 12px;padding:10px 14px;border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:8px;background:var(--panel);display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.stage>span:first-child{flex:1 1 240px;min-width:0}
.stage-actions{display:flex;flex-wrap:wrap;gap:8px}
/* 이슈 주기 스테퍼(DEV-240) — 치수는 목업 명세 01-mockup-spec.md 그대로 */
.lc{margin:20px 0 12px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--panel);overflow:hidden}
.lc-steps{list-style:none;margin:0;padding:18px 12px 14px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.lc-step{position:relative;display:grid;justify-items:center;gap:6px;text-align:center;padding:0 4px;min-width:0}
.lc-step::before{content:"";position:absolute;top:13px;right:50%;width:100%;height:2px;background:var(--border-strong);z-index:0}
.lc-step:first-child::before{display:none}
.lc-step[data-line=done]::before{background:var(--s-done)}
.lc-node{position:relative;z-index:1;width:28px;height:28px;border-radius:999px;display:grid;place-items:center;border:2px solid var(--border-strong);background:var(--panel);color:var(--panel);pointer-events:none}
.lc-node svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.lc-step[data-s=done] .lc-node{background:var(--s-done);border-color:var(--s-done)}
.lc-step[data-s=human] .lc-node{background:var(--s-in_review);border-color:var(--s-in_review)}
.lc-step[data-s=fail] .lc-node{background:var(--s-changes_requested);border-color:var(--s-changes_requested)}
.lc-step[data-s=hold] .lc-node{background:var(--s-on_hold);border-color:var(--s-on_hold)}
.lc-step[data-s=agent] .lc-node{border-color:var(--s-in_progress);background:var(--panel);animation:lc-pulse 1.8s ease-out infinite}
.lc-step[data-s=agent] .lc-node::after{content:"";width:10px;height:10px;border-radius:999px;background:var(--s-in_progress)}
.lc-step[data-s=skip] .lc-node{border-style:dashed}
.lc-step[data-s=inherited] .lc-node{background:var(--panel-2);border-color:var(--border-strong)}
@keyframes lc-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--s-in_progress) 45%,transparent)}80%,100%{box-shadow:0 0 0 8px color-mix(in srgb,var(--s-in_progress) 0%,transparent)}}
.lc-name{font-size:13px;line-height:1.3;font-weight:600;color:var(--text);pointer-events:none}
.lc-step:is([data-s=todo],[data-s=skip],[data-s=inherited]) .lc-name{color:var(--faint);font-weight:500}
.lc-meta{font-size:12px;line-height:1.4;color:var(--dim);min-height:17px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;pointer-events:none}
.lc-meta a{color:var(--accent);text-decoration:none;pointer-events:auto;position:relative;z-index:1}
.lc-step[data-cur] .lc-meta{color:var(--text)}
.lc-meta b{font-weight:600}
.lc-step[data-s=agent] .lc-meta b{color:var(--s-in_progress)}
.lc-step[data-s=human] .lc-meta b{color:var(--s-in_review)}
.lc-step[data-s=fail] .lc-meta b{color:var(--s-changes_requested)}
.lc-meta .progress-clock{font:inherit;color:inherit;margin:0;padding:0;background:none}
.lc-work{font-size:12px;line-height:1.3;color:var(--dim);font-variant-numeric:tabular-nums;pointer-events:none}
.lc-loop{display:inline-flex;align-items:center;gap:3px;font:600 11px/1 var(--mono);color:var(--s-changes_requested);padding:3px 6px;border-radius:999px;background:color-mix(in srgb,var(--s-changes_requested) 8%,transparent);pointer-events:none}
.lc-loop svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.lc-segs{display:flex;gap:3px;width:min(100%,96px)}
.lc-segs i{flex:1;height:4px;border-radius:999px;background:var(--border-strong)}
.lc-segs i[data-s=done]{background:var(--s-done)}
.lc-segs i[data-s=agent]{background:var(--s-in_progress)}
.lc-segs i[data-s=human]{background:var(--s-in_review)}
.lc-segs i[data-s=fail]{background:var(--s-changes_requested)}
.lc-jump{position:absolute;inset:-6px 0;margin:0;padding:0;min-height:0;border:0;border-radius:var(--r-sm);background:transparent;cursor:pointer}
.lc-jump:hover{background:rgba(var(--accent-rgb),.05)}
.lc-jump:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lc-next.stage{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:12px 16px;border:0;border-top:1px solid var(--border);border-radius:0;background:var(--panel-2)}
.lc-next .lc-msg{flex:1 1 260px;min-width:0;font-size:13px}
.lc-next .lc-msg a{color:var(--accent);text-decoration:none}
.lc-turn{display:inline-flex;align-items:center;gap:6px;font:600 11px/1 var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;padding:6px 9px;border-radius:999px;white-space:nowrap}
.lc-turn::before{content:"";width:7px;height:7px;border-radius:999px;background:currentColor}
.lc-turn[data-o=agent]{color:var(--s-in_progress);background:color-mix(in srgb,var(--s-in_progress) 10%,transparent)}
.lc-turn[data-o=human]{color:var(--s-in_review);background:color-mix(in srgb,var(--s-in_review) 10%,transparent)}
.lc-turn[data-o=none]{color:var(--dim);background:var(--panel);border:1px solid var(--border)}
@media (max-width:640px){
  .lc-steps{padding:16px 4px 34px}
  .lc-step .lc-meta,.lc-segs{display:none}
  .lc-step:not([data-cur]) .lc-loop{display:none}
  .lc-step[data-cur] .lc-meta{display:block;position:absolute;top:100%;left:50%;transform:translateX(-50%);width:max-content;max-width:70vw}
  .lc-step:first-child[data-cur] .lc-meta{left:0;transform:none}
  .lc-step:last-child[data-cur] .lc-meta{left:auto;right:0;transform:none}
  .lc-step:nth-child(2)[data-cur] .lc-meta{left:0;transform:translateX(-25%)}
  .lc-step:nth-child(4)[data-cur] .lc-meta{left:auto;right:0;transform:translateX(25%)}
}
@media (prefers-reduced-motion:reduce){.lc-step[data-s=agent] .lc-node{animation:none}}

/* 프로젝트 생성 — DESIGN 2~4·7~8·10~12절의 입력·포커스·모바일 배치를 따른다. */
.projects-page{ min-width:0; }
.projects-table{ table-layout:fixed; width:100%; }
.projects-table td{ overflow-wrap:anywhere; }
.projects-table .col-narrow{ width:72px; text-align:center; padding-left:var(--sp-2); padding-right:var(--sp-2); }
#project-dialog .form.panel{ margin:0; border:0; box-shadow:none; padding:var(--sp-4); }
#project-dialog .line{ display:grid; grid-template-columns:1fr 1fr; align-items:end; }
#project-dialog label{ min-width:0; }
#project-dialog .actions{ grid-column:1 / -1; justify-content:flex-end; }
#project-dialog input, #project-dialog button, .project-spec summary{ min-height:40px; font-size:14px; }
.project-spec summary{ cursor:pointer; display:flex; align-items:center; color:var(--accent); }
.project-title{ display:inline-flex; align-items:center; min-height:40px; }
.project-title:focus-visible, .project-spec summary:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
@media(max-width:800px){
  #project-dialog .line{ grid-template-columns:1fr; }
  .projects-table th, .projects-table td{ padding:var(--sp-2); }
  .projects-table th:nth-child(1){ width:12%; }
  .projects-table th:nth-child(2){ width:24%; }
  .projects-table th:nth-child(3){ width:28%; }
  .projects-table th{ letter-spacing:0; }
  .projects-table .col-narrow{ width:56px; padding-left:var(--sp-1, 4px); padding-right:var(--sp-1, 4px); }
}

table.issues .project-create-row td{ text-align:center; }
#project-add{ min-width:40px; min-height:40px; display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2); border:0; background:none; box-shadow:none; color:var(--accent); }
#project-add:hover{ border:0; background:var(--panel-2); }
#project-add:focus-visible, #project-dialog button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
#project-dialog{ width:min(760px, calc(100vw - 28px)); max-height:calc(100dvh - 32px); padding:var(--sp-4); border:1px solid var(--border); border-radius:12px; background:var(--panel); color:var(--text); box-shadow:0 8px 24px rgba(16,24,40,.12); overflow:auto; }
#project-dialog::backdrop{ background:rgba(16,24,40,.4); }
#project-close{ display:flex; margin-left:auto; min-width:40px; min-height:40px; align-items:center; justify-content:center; }
#project-dialog .form.panel{ padding:0; }
#project-dialog input, #project-dialog textarea, #project-dialog select{ width:100%; min-width:0; }
#project-dialog .line > label:first-child{ flex:auto !important; }

/* 프로젝트 관리·문서 — DESIGN 2~4, 7~8, 10~12절의 토큰과 범위 줄을 따른다. */
.project-scope{ margin-bottom:var(--sp-5); }
.project-scope nav{ display:flex; gap:var(--sp-2); border-bottom:1px solid var(--border); }
.project-scope nav{ flex-wrap:wrap; }
.project-scope nav button{ border:0; border-radius:0; background:transparent; min-height:40px; }
.project-scope nav [aria-current="page"]{ color:var(--accent); border-bottom:2px solid var(--accent); }
.form .line .project-description{ flex:1 0 100%; min-width:0; grid-column:1 / -1; }
.form .project-description textarea{ font-family:var(--sans); font-size:14px; }
#project-initialization{ min-width:0; overflow-wrap:anywhere; }
#project-initialization button{ min-height:40px; }
.agent-model{ display:flex; gap:var(--sp-2); flex-wrap:wrap; }
.agent-model select{ max-width:100%; min-width:0; }
.agents-section + .agents-section{ margin-top:var(--sp-5); }
.agents-section h2{ font-size:20px; font-weight:600; }
.agents-table{ table-layout:fixed; }
table.agents-table td{ overflow-wrap:anywhere; padding-top:var(--sp-2); padding-bottom:var(--sp-2); }
.agents-table .agent-actions button{ white-space:normal; }
.agents-table .agent-model select{ width:100%; }
@media(max-width:800px){
  .agents-table thead{ display:none; }
  .agents-table tbody, .agents-table tr{ display:block; }
  .agents-table tr{ display:grid; grid-template-columns:1fr auto; padding:var(--sp-3); gap:var(--sp-2); border-bottom:1px solid var(--border); }
  table.agents-table td{ display:block; border:0; height:auto; min-width:0; padding:0; }
  .agents-table td.hide-m{ display:none; }
  #execution-agents td:nth-child(2){ grid-column:1 / -1; grid-row:2; }
  #execution-agents td:nth-child(5){ grid-column:2; grid-row:1; }
  .agents-table .agent-actions{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:var(--sp-2); }
  .agents-table .agent-model select{ width:auto; flex:1; }
  .agents-table button{ min-height:40px; }
}
.project-docs p, .document-source{ overflow-wrap:anywhere; }
.document-source{ white-space:pre-wrap; font-family:var(--mono); font-size:13px; line-height:1.7; padding:var(--sp-4); border:1px solid var(--border); border-radius:var(--r-md); background:var(--panel-2); }
.project-scope button:focus-visible, .project-docs :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.project-docs[hidden], #project-form[hidden]{ display:none; }
/* 사용량 — 숫자 정렬과 모바일 카드로 DESIGN 2~4, 7~8, 11~12절을 따른다. */
.project-usage{ min-width:0; }
.audit-toolbar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-3); }
.audit-toolbar h3{ margin:0; }
.audit-toolbar label{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2); }
@media(max-width:800px){
  .audit-toolbar button{ white-space:normal; }
}
.usage-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); }
.usage-toolbar h3{ margin:0; }
.project-usage button{ min-height:40px; }
.project-usage :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.usage-summary{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-4); margin:var(--sp-5) 0; }
.usage-summary>div{ padding:var(--sp-4); border:1px solid var(--border); border-radius:var(--r-md); }
.usage-summary dt{ font:600 12px/1.4 var(--mono); letter-spacing:var(--track-label); color:var(--dim); }
.usage-summary dd{ margin:var(--sp-2) 0; font-size:24px; font-weight:600; }
.usage-summary p{ margin:0; font-size:13px; }
.usage-summary, .usage-table, .usage-pagination{ font-variant-numeric:tabular-nums; }
.usage-table{ width:100%; table-layout:fixed; border-collapse:collapse; font-size:13px; }
.usage-table th{ text-align:left; font:600 11px/1.4 var(--mono); letter-spacing:var(--track-label); background:var(--panel-2); color:var(--dim); }
.usage-table th:first-child{ width:28%; }
.usage-caption{ text-align:left; margin-bottom:var(--sp-3); font:600 12px/1.4 var(--mono); color:var(--dim); }
.usage-table th, .usage-table td{ padding:var(--sp-3); border-bottom:1px solid var(--border); vertical-align:top; }
.usage-table tr:hover td{ background:var(--panel-2); }
.usage-table small{ display:block; font-size:12px; }
.usage-issue{ display:flex; flex-direction:column; gap:var(--sp-1); margin-bottom:var(--sp-2); }
.usage-pagination{ display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-4); }
.project-usage p, .usage-summary, .usage-table td, .project-scope h2{ overflow-wrap:anywhere; }
.usage-loading{ padding:var(--sp-4); color:var(--dim); }
.usage-skeleton{ height:160px; margin-top:var(--sp-3); border-radius:var(--r-md); background:var(--panel-2); }
@media(max-width:800px){
  .usage-summary{ grid-template-columns:1fr; gap:var(--sp-3); }
  .usage-caption{ display:block; }
  .usage-table, .usage-table tbody, .usage-table tr, .usage-table td{ display:block; width:auto; }
  .usage-table thead{ display:none; }
  .usage-table tr{ margin-top:var(--sp-4); border:1px solid var(--border); border-radius:var(--r-md); }
  .usage-table td{ border:0; padding:var(--sp-2) var(--sp-4); }
  .usage-table td:first-child{ padding-top:var(--sp-4); }
  .usage-table td:last-child{ padding-bottom:var(--sp-4); }
  .usage-table td::before{ content:attr(data-label); display:block; margin-bottom:var(--sp-1); font:600 11px/1.4 var(--mono); color:var(--dim); letter-spacing:var(--track-label); }
}

/* 설정 — 디자인 2~5·7·8·11절의 토큰과 스위치 규칙을 따른다. */
.auto-settings{ padding:var(--sp-5); }
.auto-settings h3,.type-management h3{ font:600 12px var(--mono); letter-spacing:var(--track-label); margin:var(--sp-5) 0 var(--sp-3); }
.setting-row{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); padding:var(--sp-4) 0; border-bottom:1px solid var(--border); }
.setting-row > div{ min-width:0; }
.token-settings{ padding:var(--sp-5); }
.token-settings h3{ font:600 12px var(--mono); letter-spacing:var(--track-label); margin:var(--sp-5) 0 var(--sp-3); }
.token-settings select{ min-height:40px; min-width:150px; max-width:100%; }
.token-settings select:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
@media(max-width:800px){ .token-settings{ padding:var(--sp-4); } .token-settings .setting-row{ flex-wrap:wrap; } }
.auto-settings .auto-master-row h3{ margin:0; }
.auto-master-row .switch-state{ white-space:nowrap; }
.setting-row p{ margin:var(--sp-1) 0 0; font-size:13px; }
.queue-limit{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2); flex-shrink:0; }
.queue-limit input[type=number]{ width:72px; }
.queue-field, .queue-unlimited{ display:inline-flex; align-items:center; gap:var(--sp-1); }
.queue-unlimited{ margin-right:var(--sp-2); }
@media (max-width:800px){ .queue-limit{ flex-shrink:1; } }
.auto-switch{ flex:none; min-height:40px; border:none; background:transparent; padding:var(--sp-2); font-size:12px; }
.switch-track{ display:block; width:40px; height:24px; border-radius:999px; background:var(--dim); padding:4px; }
.switch-track::before{ content:''; display:block; width:16px; height:16px; border-radius:999px; background:var(--panel); transition:transform 150ms ease; }
.auto-switch[aria-checked="true"] .switch-track{ background:var(--s-done); }
.auto-switch[aria-checked="true"] .switch-track::before{ transform:translateX(16px); }
.auto-settings button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.check-modes{ display:flex; flex:none; gap:4px; }
.check-modes button{ min-height:40px; padding:4px 8px; font-size:12px; }
.check-modes button[aria-pressed="true"]{ color:var(--accent); border-color:var(--accent); background:rgba(var(--accent-rgb),.08); }
.check-lock{ flex:none; font-size:12px; white-space:nowrap; }
.check-files{ margin-top:var(--sp-3); font-size:12px; }
.check-files summary{ cursor:pointer; min-height:40px; display:flex; align-items:center; }
.check-file{ padding-left:var(--sp-3); }
@media(max-width:800px){ #regression-body .setting-row{ flex-wrap:wrap; } #regression-body .check-modes{ margin-left:auto; } }
.role-cards{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--sp-4); }
.role-card{ min-width:0; border:1px solid var(--border); border-radius:var(--r-md); padding:var(--sp-4); }
.role-card h4{ margin:0; font-size:14px; }
.role-card > p{ margin:var(--sp-1) 0 0; font-size:13px; }
.role-card .setting-row{ border-top:1px solid var(--border); border-bottom:none; padding-bottom:0; }
.role-pending{ font:500 11px var(--mono); color:var(--dim); border:1px solid var(--border); border-radius:999px; padding:0 var(--sp-2); }
.provider-order{ padding-left:var(--sp-5); }
.provider-order li{ padding:var(--sp-2); }
.provider-order li > span{ display:inline-block; min-width:80px; }
.provider-order li > div{ display:inline-flex; gap:var(--sp-2); }
.provider-order button{ min-height:40px; font-size:13px; }
.settings-policy{ border-top:1px solid var(--border); margin-top:var(--sp-5); font-size:13px; }
.settings-skeleton{ height:160px; border-radius:var(--r-md); background:var(--panel-2); }
@media(max-width:1100px){ .role-cards{ grid-template-columns:minmax(0, 1fr); } }
@media(max-width:800px){ .auto-settings{ padding:var(--sp-4); } .auto-switch{ flex-direction:column; } }
@media(prefers-reduced-motion:reduce){ .switch-track::before{ transition:none; } }

/* 종류 — DESIGN 2~4·7·8·11절의 칩과 터치·포커스 규칙을 따른다. */
.issue-types{ display:inline-flex; flex-wrap:wrap; gap:var(--sp-2); max-width:100%; font-size:12px; color:var(--dim); font-weight:400; }
.type-badge{ overflow-wrap:anywhere; }
.type-picker{ min-width:0; margin:0; padding:var(--sp-3); border:1px solid var(--border); border-radius:8px; }
.type-picker legend{ font:600 12px var(--mono); }
.type-picker > div{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.type-picker button{ min-height:40px; min-width:40px; border-radius:999px; white-space:normal; overflow-wrap:anywhere; max-width:100%; }
.type-picker [aria-pressed="true"]{ color:var(--accent); border-color:var(--accent); background:var(--panel-2); }
.type-picker p{ font-size:13px; margin-bottom:0; }
.type-management{ max-width:800px; }
.type-management form{ display:flex; flex-wrap:wrap; align-items:end; gap:var(--sp-2); padding:var(--sp-3) 0; border-bottom:1px solid var(--border); }
.type-management label{ flex:1; min-width:0; }
.type-management input{ width:100%; min-width:0; }
.type-management button,.type-management input,#save-types{ min-height:40px; }
.type-management [aria-checked="true"]{ color:var(--s-done); }
.type-picker button:focus-visible,.type-management :focus-visible,#save-types:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* 설정 카드 안에서 두 화면의 현재 위치를 유지한다. */
.settings-nav{ margin-bottom:var(--sp-5); border-bottom:1px solid var(--border); }
.settings-nav-inner{ display:flex; gap:var(--sp-5); }
.settings-nav a{ display:flex; align-items:center; min-height:44px; font-size:14px; font-weight:600; color:var(--dim); border-bottom:2px solid transparent; text-decoration:none; }
.settings-nav a.active{ color:var(--accent); border-bottom-color:var(--accent); }
.settings-nav a:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
@media(max-width:800px){ .settings-nav-inner{ gap:var(--sp-4); } }

/* Action은 행 이동과 분리된 최소 40px 터치 영역을 제공한다. */
.issue-actions{ display:flex; flex-wrap:nowrap; justify-content:flex-end; gap:var(--sp-1); }
.issue-actions button{ width:40px; height:40px; min-width:40px; min-height:40px; padding:0; flex:none; font-size:13px; justify-content:center; white-space:nowrap; }
.issue-actions button[aria-disabled="true"]{ color:var(--dim); background:var(--panel-2); cursor:help; }
.issue-actions button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.card .issue-actions{ margin-top:var(--sp-2); flex-wrap:wrap; justify-content:flex-start; }
@media(max-width:800px){
  .action-cell .issue-actions{ flex-wrap:wrap; }
  #list-body table.issues{ table-layout:fixed; }
  #list-body table.issues th:first-child{ width:72px; }
  #list-body table.issues th:nth-child(3){ width:80px; }
  #list-body table.issues th:last-child{ width:88px; }
  #list-body table.issues td, #list-body table.issues th{ padding:var(--sp-1); overflow-wrap:anywhere; }
  #list-body table.issues .ref{ white-space:normal; }
  #list-body table.issues tr.child td.ref{ padding-left:calc(var(--sp-1) + var(--sp-5)); }
}
/* 긴 진행 사유는 표의 스크롤 영역 밖에 띄워 잘리지 않게 한다. */
.progress-note{ display:flex; align-items:center; gap:var(--sp-1); width:100%; max-width:100%; min-width:0; color:var(--dim); font-size:12px; line-height:1.4; margin-top:var(--sp-1); white-space:nowrap; }
.progress-short{ flex:1 1 0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.progress-clock{ flex:none; font-variant-numeric:tabular-nums; min-width:5ch; }
.progress-short + .progress-clock::before{ content:"· "; }
.progress-more{ flex:none; width:40px; height:40px; min-height:40px; padding:0; border:0; background:none; color:var(--dim); font:inherit; font-size:16px; justify-content:center; }
.progress-more:hover,.progress-more[aria-expanded="true"]{ color:var(--accent); }
.progress-more:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.progress-pop{ position:fixed; z-index:1000; width:max-content; max-width:min(320px, calc(100vw - 16px)); padding:var(--sp-3); border:1px solid var(--border); border-radius:var(--r-md); background:var(--panel); color:var(--text); box-shadow:var(--shadow-pop); font-size:13px; line-height:1.6; white-space:pre-line; overflow-wrap:anywhere; }
@media(max-width:800px){
  .progress-note{ flex-wrap:wrap; row-gap:0; }
  .progress-short{ flex:1 0 100%; }
  .progress-short + .progress-clock::before{ content:none; }
  #list-body table.issues th:nth-child(3){ width:140px; }
  #list-body table.issues th:last-child{ width:48px; font-size:0; }
}

/* 첨부는 기존 패널·색 토큰과 입력 단계를 따른다. */
.attachment-input {border:1px solid var(--border);border-radius:8px;padding:16px;min-width:0}
.attachment-input legend {font-size:12px;font-weight:600}
.attachment-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:8px 0;overflow-wrap:anywhere}
.attachment-heading span {min-width:0}
.attachment {border-top:1px solid var(--border);padding:16px 0;overflow-wrap:anywhere;min-width:0}
.attachment img,.attachment video {display:block;max-width:100%;max-height:320px;border-radius:8px}
.attachment audio {width:100%;max-width:100%}
.attachment pre {white-space:pre-wrap;overflow-wrap:anywhere;max-height:320px;overflow:auto;background:var(--panel-2);padding:12px;border-radius:6px;font-size:13px}
.attachment summary {cursor:pointer;padding:8px 0}
.attachment-input input[type=file] {max-width:100%}
.attachment-input :focus-visible,.attachments :focus-visible {outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:800px){.attachment-heading button,.attachment summary,.attachment-heading a{min-height:40px}.attachment-input .line{flex-wrap:wrap}}
.attachment-input .attachment-heading{justify-content:flex-start}
.attachment-name{flex:1 1 220px;overflow-wrap:anywhere}
.attachment-actions{display:flex;align-items:center;gap:var(--sp-1);flex-wrap:wrap}
.attachment-thumb{flex:none;padding:0;border:1px solid var(--border);border-radius:6px;overflow:hidden;background:var(--panel-2)}
.attachment-thumb img{display:block;width:64px;height:64px;object-fit:cover}
.attachment-lightbox{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:var(--sp-3);background:rgba(0,0,0,.8)}
.attachment-lightbox[hidden]{display:none}
.attachment-lightbox-content{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-2);max-width:100%;max-height:100%;padding:var(--sp-3);border:1px solid var(--border);border-radius:12px;background:var(--panel);color:var(--text);overflow:auto}
.attachment-lightbox-content img{display:block;max-width:min(90vw,1200px);max-height:75vh;object-fit:contain}
.attachment-lightbox-content p{margin:0;overflow-wrap:anywhere}
.attachment-lightbox-close{align-self:flex-end;min-width:40px;min-height:40px}
.attachment-lightbox :focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* 표 머리의 정렬 버튼은 틀 글자와 터치 영역을 유지한다. */
.list-sort{ display:inline-flex; align-items:center; gap:var(--sp-1); min-width:40px; min-height:40px; padding:0; border:0; background:transparent; color:inherit; font:inherit; letter-spacing:inherit; }
.list-sort:hover{ color:var(--accent); background:transparent; }
.list-sort .sort-desc{ transform:rotate(180deg); }

/* 관리 화면 — DESIGN 2~4·7·8·11절의 카드와 서브탭을 공유한다. */
.management-card{ max-width:none; min-width:0; }
.management-header{ margin-bottom:var(--sp-5); }
.management-header h2{ margin:0 0 var(--sp-4); font:600 20px var(--mono); overflow-wrap:anywhere; }
.management-back{ display:inline-block; margin-bottom:var(--sp-3); }
.management-nav, .management-header .settings-nav-inner{ display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-5); }
.management-nav{ border-bottom:1px solid var(--border); }
.management-nav a, .management-nav button{ display:flex; align-items:center; min-height:44px; border:0; border-bottom:2px solid transparent; border-radius:0; background:transparent; padding:0; font-size:14px; font-weight:600; color:var(--dim); text-decoration:none; }
.management-nav [aria-current="page"]{ color:var(--accent); border-bottom-color:var(--accent); }
.management-card :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.management-card > .form.panel, .management-card > .project-docs, .management-card > .project-usage, .management-card > .project-audits, .management-card .agents-section > .form.panel{ border:0; box-shadow:none; padding:0; }
.management-card .agents-section h2{ font:600 12px var(--mono); letter-spacing:var(--track-label); }
.management-card .agents-section + .agents-section{ margin-top:0; }
@media(max-width:800px){
  .management-nav{ gap:var(--sp-2) var(--sp-4); }
  .management-header .settings-nav-inner{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 var(--sp-2); }
  .management-header .settings-nav a{ font-size:13px; }
}

/* 서비스 진단과 복사 피드백은 같은 카드 안에서 표시한다. */
.project-port-controls{ display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center; }
.project-port-controls input{ flex:1 1 120px; min-width:0; width:120px; }
.project-port-controls button{ min-height:40px; min-width:40px; }
.project-port-controls :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
#p-port-message{ font-size:14px; font-weight:400; line-height:1.6; letter-spacing:normal; text-transform:none; overflow-wrap:anywhere; }
#p-port-message:empty{ display:none; }
.service-diagnostic{ margin-top:16px; padding:16px; border:1px solid var(--border); border-radius:8px; background:var(--panel); min-width:0; }
.service-diagnostic-head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.service-diagnostic-head h4{ margin:0; font-size:13px; font-weight:600; }
.project-restart button{ min-height:40px; }
#app-restart-state{ white-space:pre-wrap; overflow-wrap:anywhere; margin-top:12px; }
#app-restart-manual{ width:100%; min-height:220px; font-size:12px; }
#p-service-copy{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0; flex-shrink:0; }
#p-service-copy .ico{ width:15px; height:15px; }
.service-diagnostic-row{ font-size:14px; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; min-width:0; }
.service-diagnostic-row + .service-diagnostic-row{ margin-top:8px; }
.service-steps{ list-style:none; padding:0; margin:16px 0; }
.service-steps li{ position:relative; padding:0 0 24px 44px; min-height:32px; }
.service-steps li::before{ content:""; position:absolute; left:15px; top:32px; bottom:0; border-left:1px solid var(--dim); }
.service-steps li:last-child{ padding-bottom:0; }
.service-steps li:last-child::before{ display:none; }
.service-step-number{ position:absolute; top:0; left:0; display:grid; place-items:center; width:32px; height:32px; border:1px solid var(--step-color); border-radius:999px; color:var(--text); font-family:var(--mono); font-size:13px; }
.service-step-line{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; min-height:32px; font-size:14px; }
.service-step-line > span:first-child{ flex:1 1 160px; min-width:0; }
.service-step-error{ margin:8px 0 0; font-size:14px; line-height:1.6; color:var(--dim); overflow-wrap:anywhere; }
#p-service-copy-message:empty{ display:none; }
#p-service-copy-text{ width:100%; min-height:160px; margin-top:8px; font-size:14px; }
.project-service :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
@media(max-width:800px){ .project-service button{ min-height:40px; min-width:40px; } }

.project-restart .line{ flex-wrap:wrap; }
.project-secrets button{ min-height:40px; }
.project-secrets .line{ margin-top:16px; }
.project-secrets :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.secret-row{ display:grid; grid-template-columns:minmax(120px, 200px) minmax(96px, 140px) minmax(0, 1fr) auto; gap:8px 12px; align-items:center; padding:8px 0; border-top:1px solid var(--border); min-width:0; }
.secret-row:first-child{ border-top:0; }
.secret-name{ font-family:var(--mono); font-size:13px; overflow-wrap:anywhere; min-width:0; }
.secret-state{ font-size:13px; color:var(--dim); }
.secret-state.is-set{ color:var(--text); }
.secret-row input[type=password]{ width:100%; min-width:0; min-height:40px; }
.secret-actions{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.secret-clear{ display:inline-flex; gap:4px; align-items:center; font-size:13px; }
#secrets-result{ margin:8px 0 0; font-size:14px; overflow-wrap:anywhere; }
#secrets-result:empty{ display:none; }
@media(max-width:800px){
  .secret-row{ grid-template-columns:minmax(0, 1fr) auto; }
  .secret-row input[type=password], .secret-actions{ grid-column:1 / -1; }
}
.restart-action{ flex:1 1 240px; min-width:0; }
.restart-action p{ margin:8px 0; font-size:14px; }
#app-restart-release{ white-space:pre-wrap; margin:16px 0; overflow-wrap:anywhere; }
#app-restart-log pre{ white-space:pre-wrap; overflow-wrap:anywhere; max-height:280px; overflow:auto; }
#app-restart-log p{ overflow-wrap:anywhere; }
#qa-rework fieldset label{ display:block; padding:4px 0; }

/* 목록·Task·보드가 같은 토큰 상태를 표시한다. */
.issue-tokens{ font-size:12px; color:var(--dim); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
#list-body .completion-time, #list-body .issue-col-updated{ font-size:12px; color:var(--dim); font-variant-numeric:tabular-nums; }
.issue-tokens-lines{ display:inline-flex; flex-direction:column; align-items:flex-start; gap:2px; min-width:0; vertical-align:middle; }
.issue-tokens-own{ display:inline-flex; align-items:baseline; gap:4px; min-width:0; }
.issue-tokens-label{ flex:none; white-space:nowrap; font-size:11px; color:var(--dim); }
.issue-tokens-tasks{ white-space:nowrap; }
@media(min-width:1101px) and (max-width:1450px){
  .ops-split:has(#list-body){ display:flex; flex-direction:column; align-items:stretch; }
  .ops-split:has(#list-body) .ops-side{ position:static; order:-1; }
  .ops-split:has(#list-body) .issue-summary, .ops-split:has(#list-body) .ops-main, .ops-split:has(#list-body) .ops-side{ grid-area:auto; }
}
@media(min-width:1101px){
  #list-body table.issues{ table-layout:auto; }
  #list-body table.issues th:not(:nth-child(2)),
  #list-body table.issues td:not(:nth-child(2)){ width:1%; white-space:nowrap; padding-left:var(--sp-3); padding-right:var(--sp-3); }
  #list-body table.issues tr.child td.ref{ padding-left:calc(var(--sp-3) + var(--sp-5)); }
  #list-body table.issues:not(.tasks) .title-cell{ width:100%; min-width:240px; }
  #list-body .token-cell .issue-tokens{ white-space:nowrap; overflow-wrap:normal; }
}
/* 목록 표만 보조 열을 접고, 접힌 실행 정보는 제목 아래에 이어서 보여준다. */
@media(max-width:1450px){ #list-body .issue-col-updated{ display:none; } }
@media(max-width:1200px){
  #list-body .issue-col-time, #list-body .issue-col-tokens{ display:none; }
  #list-body table.issues:not(.tasks) .title-cell{ min-width:0; }
  #list-body .issue-history-mobile{ display:flex; align-items:center; gap:var(--sp-2); min-width:0; font-size:12px; color:var(--dim); }
  #list-body .issue-meta-agent{ display:none; }
  #list-body .issue-meta-tokens{ min-width:0; max-width:100%; overflow-wrap:anywhere; }
}
@media(max-width:1000px){
  #list-body .issue-col-agent{ display:none; }
  #list-body .issue-meta-agent{ display:inline; }
}
.token-explanation{ margin:var(--sp-2) 0 0; font-size:12px; color:var(--dim); overflow-wrap:anywhere; }
.issue-token-detail > div{ min-width:0; }
.task-history, .issue-history-mobile{ flex-wrap:wrap; }
@media(max-width:800px){ .issue-history-mobile .issue-meta-tokens{ flex-basis:100%; } }
.stars{ display:flex; gap:2px; }
.stars label{ position:relative; cursor:pointer; font-size:22px; line-height:1; color:var(--accent); padding:2px; }
.stars input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.stars label:has(input:focus-visible){ outline:2px solid var(--accent); border-radius:4px; }
.rating-status{ margin:var(--sp-2) 0 0; font-size:13px; min-height:1em; overflow-wrap:anywhere; }
#rating-review{ width:100%; min-height:72px; font-family:var(--sans); font-size:14px; resize:vertical; margin:var(--sp-2) 0; }
.chip-static{ font-family:var(--sans); font-weight:400; font-size:12px; color:var(--dim); border:1px solid var(--border); border-radius:999px; padding:2px 8px; margin-left:var(--sp-2); }

/* 공용 확인창은 화면 중앙에서 확인·취소와 닫는 이유를 받는다. */
 .confirm-dialog{ width:min(100% - 32px, 400px); max-height:calc(100dvh - 32px); padding:var(--sp-4); border:1px solid var(--border); border-radius:var(--r-lg); background:var(--panel); color:var(--text); overflow:auto; text-align:left; }
.confirm-dialog[open]{ animation:confirm-appear 120ms ease-out; }
.confirm-dialog::backdrop{ background:rgba(16,24,40,.28); }
.confirm-dialog form{ display:flex; flex-direction:column; gap:var(--sp-3); min-width:0; max-height:calc(100dvh - 64px); }
.confirm-dialog .confirm-badge{ display:grid; place-items:center; align-self:center; flex-shrink:0; width:calc(var(--sp-5) * 2); height:calc(var(--sp-5) * 2); border:1px solid var(--border); border-radius:999px; background:var(--panel-2); color:var(--accent); }
.confirm-dialog .confirm-badge-danger{ color:var(--danger); }
.confirm-dialog .confirm-badge .ico{ width:24px; height:24px; }
.confirm-dialog h2{ flex-shrink:0; margin:0; font-size:16px; word-break:keep-all; overflow-wrap:break-word; }
/* 내용만 스크롤하여 완료·취소 버튼을 화면 안에 남긴다. */
.confirm-content{ min-height:0; overflow:auto; display:flex; flex-direction:column; gap:var(--sp-3); }
.confirm-summary{ margin:0; font-size:14px; font-weight:600; overflow-wrap:anywhere; }
.confirm-work-title{ margin:0; font-size:13px; font-weight:600; }
.confirm-body{ margin:0; font-size:13px; white-space:pre-wrap; overflow-wrap:anywhere; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden; flex-shrink:0; }
.confirm-items.wrap{ flex-shrink:0; }
.confirm-items.wrap .confirm-item{ display:grid; grid-template-columns:auto minmax(0,1fr); }
.confirm-items.wrap .confirm-item-title{ white-space:normal; overflow-wrap:anywhere; }
.confirm-items.wrap .confirm-note{ grid-column:2; }
.confirm-message.confirm-foot{ font-size:12px; }
.confirm-actions{ flex-shrink:0; }
.confirm-message{ margin:0; color:var(--muted); font-size:14px; line-height:1.6; white-space:pre-wrap; word-break:keep-all; overflow-wrap:break-word; }
.confirm-items{ padding:var(--sp-2); border-radius:var(--r-md); background:var(--panel-2); }
.confirm-item{ display:flex; align-items:baseline; gap:var(--sp-2); min-width:0; padding:var(--sp-1) 0; font-size:13px; }
.confirm-ref{ flex:none; font-family:var(--mono); color:var(--muted); }
.confirm-item-title{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.confirm-note,.confirm-more{ color:var(--muted); font-size:12px; }
.confirm-note{ flex:none; }
.confirm-input{ width:100%; min-height:40px; }
/* 맡기기 확인창 검사 체크리스트(DEV-238) — 필수는 체크된 채 비활성, 좁은 화면에서는 요약 한 줄로 접힌다 */
.confirm-checks{ padding:var(--sp-2) var(--sp-3); border:1px solid var(--border); border-radius:var(--r-md); background:var(--panel-2); font-size:13px; }
.confirm-checks summary{ cursor:pointer; font-weight:600; }
.check-group{ display:flex; flex-direction:column; gap:var(--sp-1); margin-top:var(--sp-2); }
.check-head{ color:var(--muted); font-size:12px; }
.check-row{ display:flex; align-items:flex-start; gap:var(--sp-2); min-width:0; }
.check-row input{ flex:none; margin-top:3px; }
.check-text{ display:flex; flex-direction:column; min-width:0; overflow-wrap:anywhere; }
.check-text code{ font-family:var(--mono); font-size:12px; }
.check-text small,.check-none,.check-foot{ color:var(--muted); font-size:12px; margin:0; }
.check-badge{ display:inline-block; margin-left:var(--sp-1); padding:0 var(--sp-1); border-radius:var(--r-sm); background:var(--panel); border:1px solid var(--border); font-size:11px; }
.check-foot{ margin-top:var(--sp-2); }
.confirm-actions{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:var(--sp-2); }
.confirm-actions button{ width:100%; min-width:0; white-space:normal; min-height:40px; justify-content:center; }
.confirm-actions .confirm-ok{ background:var(--grad-primary); border-color:var(--accent); color:#fff; }
.confirm-actions .danger{ background:var(--danger); border-color:var(--danger); color:#fff; }
@keyframes confirm-appear{ from{ opacity:0; transform:scale(.97); } to{ opacity:1; transform:scale(1); } }
@media(prefers-reduced-motion:reduce){ .confirm-dialog[open]{ animation:none; } }

/* 수동 사용량의 모델·설명은 좁은 화면에서도 카드 안에서 줄바꿈한다. */
.manual-sessions li,.manual-usage-settings p{ overflow-wrap:anywhere; }

/* 개선 제안은 기존 점검 카드와 종류별 사용량 토큰을 공유한다. */
.suggestion-actions,.trend-kind-legend{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3)}
.trend-kind-issue{fill:var(--accent);color:var(--accent)}
.trend-kind-goal_audit{fill:var(--s-in_progress);color:var(--text)}
.trend-kind-improve_audit{fill:var(--s-done);color:var(--text)}
.trend-kind-legend span{font-size:12px;color:var(--text);display:inline-flex;align-items:center;gap:var(--sp-1)}
.trend-kind-legend span::before{content:'';width:12px;height:12px;border-radius:var(--r-sm);background:var(--accent)}
.trend-kind-legend .trend-kind-goal_audit::before{background:var(--s-in_progress)}
.trend-kind-legend .trend-kind-improve_audit::before{background:var(--s-done)}

/* 프로젝트 생성 카드와 기본 기능을 배치한다. */
.project-templates, #p-template-options{ border:0; padding:0; margin:var(--sp-4) 0; min-width:0; }
.template-cards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-2); }
#project-dialog .template-card{ display:flex; align-items:flex-start; gap:var(--sp-2); padding:var(--sp-3); border:1px solid var(--border); border-radius:8px; cursor:pointer; background:var(--panel); }
.template-card:has(:checked){ border-color:var(--accent); }
.template-card:hover{ background:var(--panel-2); }
#project-dialog .template-card, #project-dialog .template-options label{ flex-direction:row; font-family:var(--sans); text-transform:none; letter-spacing:0; color:var(--text); font-size:14px; font-weight:400; }
.template-card strong, .template-card .dim{ display:block; font-size:13px; overflow-wrap:anywhere; }
#project-dialog .template-card input, #project-dialog .template-options input{ width:auto; min-height:0; flex:none; }
.template-options{ display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4); }
#project-dialog .template-options label{ display:flex; align-items:center; gap:var(--sp-2); min-height:40px; }
@media(max-width:800px){ .template-cards{ grid-template-columns:minmax(0,1fr); } }

/* 생성 단계는 같은 폼 안에서 입력과 선택을 번갈아 보여준다. */
#project-dialog [hidden]{ display:none !important; }
#project-dialog .template-card{ text-align:left; white-space:normal; }
.template-card ul{ padding-left:var(--sp-4); margin:var(--sp-2) 0 0; }
#p-step-heading{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3); }
#p-register-mode{ margin-top:var(--sp-4); }
/* 기획서 입력 방식 — 파일 첨부와 직접 입력 편집기(DEV-225). */
.spec-source{ border:0; padding:0; margin:0 0 var(--sp-3); min-width:0; }
.spec-modes, .spec-file, .spec-draft{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-4); }
#project-dialog .spec-modes label{ flex:0 0 auto; display:flex; flex-direction:row; align-items:center; gap:var(--sp-2); min-height:40px; font-family:var(--sans); text-transform:none; letter-spacing:0; color:var(--text); font-size:14px; font-weight:400; }
#project-dialog .spec-modes input{ width:auto; min-height:0; flex:none; }
#project-dialog .spec-file input{ flex:1 1 220px; width:auto; }
#project-dialog #p-spec-text{ width:100%; min-height:240px; resize:vertical; font-family:var(--mono, monospace); font-size:13px; line-height:1.5; }
#p-spec-text[aria-invalid="true"]:not(:placeholder-shown){ border-color:var(--danger, #d92d20); }
.spec-size, .spec-draft{ margin:var(--sp-1, 4px) 0 0; overflow-wrap:anywhere; }
#p-spec-error:empty{ display:none; }
#qa-title{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2); }
#qa-start{ margin-left:auto; }
/* 댓글·메모에 붙은 첨부(DEV-242) */
.event-files{ display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-2); }
.event-files a{ display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:4px 10px; border:1px solid var(--border); border-radius:999px; background:var(--panel); color:var(--text); font-size:12px; text-decoration:none; }
.event-files a:hover{ border-color:var(--accent); color:var(--accent); }
.event-files .ico{ width:14px; height:14px; color:var(--dim); }

/* 이슈 주기 목록·보드 — DESIGN §2·3·4·11의 글꼴·상태색·접근성을 따른다. */
.turn-filter{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.turn-filter button{font:500 12px/1 var(--sans);padding:8px 12px;min-height:34px;border-radius:999px;border:1px solid var(--border);background:var(--panel);color:var(--dim)}
.turn-filter button:hover{color:var(--text)}
.turn-filter button[aria-pressed=true]{background:rgba(var(--accent-rgb),.1);border-color:rgba(var(--accent-rgb),.4);color:var(--accent)}
#list-body tr.mine{background:color-mix(in srgb,var(--s-in_review) 4%,transparent)}
.lc-dots{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px;max-width:100%;min-width:0;vertical-align:middle}
.lc-dot-row{display:inline-flex;flex-flow:row nowrap;flex:0 0 auto;align-items:center;gap:4px;min-width:61px}
.lc-dots i{flex:0 0 9px;width:9px;height:9px;border-radius:999px;background:var(--border-strong)}
.lc-dots i[data-s=done]{background:var(--s-done)}
.lc-dots i[data-s=agent]{background:var(--s-in_progress);box-shadow:0 0 0 2px color-mix(in srgb,var(--s-in_progress) 25%,transparent)}
.lc-dots i[data-s=human]{background:var(--s-in_review);box-shadow:0 0 0 2px color-mix(in srgb,var(--s-in_review) 25%,transparent)}
.lc-dots i[data-s=fail]{background:var(--s-changes_requested);box-shadow:0 0 0 2px color-mix(in srgb,var(--s-changes_requested) 25%,transparent)}
.lc-dots i[data-s=hold]{background:var(--s-on_hold)}
.lc-dots i[data-s=skip]{background:transparent;border:1.5px dashed var(--border-strong)}
.lc-dots i[data-s=inherited]{background:transparent;border:1.5px solid var(--border-strong)}
.lc-dots em{flex:1 1 0;min-width:0;font-style:normal;font-size:12px;color:var(--dim);margin-left:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.lc-dots em:empty{display:none}
.lc-clock{flex-basis:100%;font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums;margin-top:2px}
.lc-clock .progress-clock::before{content:none}
.issue-col-progress{cursor:default}
.issue-col-progress .lc-dots{max-width:240px}
.lc-mobile{display:none}
.card .meta .lc-dots{display:flex;flex-basis:100%;margin-top:4px}
@media(max-width:640px){
  #list-body .issue-col-progress{display:none}
  .lc-mobile{display:block;margin:6px 0 2px}
}
/* 브랜드 탭 — 서버 생성 자원을 모형·비교·변경 목록으로 보여 준다. */
.brand-panel{display:grid;gap:24px;min-width:0}
.brand-panel section{min-width:0}
.brand-panel h3{font-size:16px;margin:0 0 16px}
.brand-panel h4{font-size:14px}
.brand-panel p{overflow-wrap:anywhere}
.brand-models{display:grid;grid-template-columns:160px minmax(120px,1fr) minmax(160px,320px);gap:16px;align-items:start}
.brand-home,.brand-browser,.brand-phone,.brand-share{background:var(--panel-2);border:1px solid var(--border);border-radius:8px;overflow:hidden}
.brand-home{display:flex;gap:16px;padding:16px 8px}
.brand-home>div{position:relative;width:60px;flex-shrink:0;text-align:center}
.brand-home img{width:60px;height:60px;object-fit:contain;display:block}
.brand-home span:not(.brand-empty){display:block;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:8px}
.brand-ios{border-radius:22%}
.brand-android{border-radius:50%}
.brand-safe:after{content:'';position:absolute;width:48px;height:48px;top:6px;left:6px;border:1px dashed var(--accent);border-radius:50%;pointer-events:none}
.brand-browser{height:32px;display:flex;align-items:center;gap:8px;padding:0 8px;font-size:12px}
.brand-browser img{width:16px;height:16px}
.brand-browser span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-phone{width:80px;aspect-ratio:440/956;margin:12px auto 0;display:grid;place-items:center}
.brand-phone img{width:100%;height:100%;object-fit:contain}
.brand-share{width:100%;max-width:320px}
.brand-share>img{display:block;width:100%;aspect-ratio:1200/630;object-fit:contain}
.brand-share>div{padding:12px;font-size:13px;overflow-wrap:anywhere}
.brand-share p{margin:4px 0}
.brand-share small{color:var(--dim);font-size:12px}
.brand-empty{display:grid;place-items:center;border:1px dashed var(--border);padding:8px;color:var(--dim);font-size:12px;max-width:100%}
.brand-drop{width:100%;min-height:144px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;border:1px dashed var(--border);background:var(--panel-2);border-radius:8px}
.brand-drop small{font-size:12px;color:var(--dim)}
.brand-drop-mobile{display:none}
.brand-drag,.brand-attention{outline:2px solid var(--accent)}
.brand-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.brand-fields label{display:grid;gap:8px;font-size:13px;min-width:0}
.brand-panel input,.brand-panel select{max-width:100%;min-width:0;box-sizing:border-box}
.brand-fields input[type=file]{width:100%}
.brand-colors{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.brand-color{padding:0;min-width:24px;width:24px;height:24px;border-radius:999px;background:var(--chip);border:1px solid var(--border)}
.brand-panel details{margin-top:16px}
.brand-panel summary{cursor:pointer;font-size:13px}
.brand-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.brand-compare .brand-models{grid-template-columns:160px minmax(100px,1fr)}
.brand-compare .brand-share{grid-column:1/-1}
.brand-compare-toggle{display:none}
.brand-splashes{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:12px}
.brand-splashes img{width:100%;max-height:200px;object-fit:contain}
.brand-changes{max-width:100%;overflow-wrap:anywhere}
.brand-changes table{width:100%;table-layout:fixed;font-size:13px;border-collapse:collapse}
.brand-changes td,.brand-changes th{padding:12px 8px;text-align:left;border-bottom:1px solid var(--border);overflow-wrap:anywhere}
.brand-changes th:first-child{width:55%}
.brand-changes pre,.brand-panel pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:320px;overflow:auto;background:var(--panel-2);padding:12px}
.brand-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.brand-actions .primary{background:var(--grad-primary)}
.brand-history-row{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--border);overflow-wrap:anywhere}
.brand-history-row button{flex-shrink:0}
.brand-crop-dialog{width:min(480px,calc(100vw - 32px));box-sizing:border-box;padding:24px}
.brand-crop-stage{position:relative;touch-action:none;line-height:0;max-height:60vh;overflow:hidden}
.brand-crop-stage img{width:100%;max-height:60vh;object-fit:fill;pointer-events:none}
.brand-crop-stage>div{position:absolute;border:2px solid var(--accent);box-sizing:border-box;pointer-events:none;background:rgb(0 0 0 / .12)}
#brand-focal{position:relative;touch-action:none;width:160px;margin:16px auto}
#brand-focal img{width:100%;display:block}
#brand-focal span{position:absolute;width:24px;height:24px;border:2px solid var(--accent);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}
.brand-panel :focus-visible,.brand-crop-dialog :focus-visible{outline:2px solid var(--accent);outline-offset:2px}

@media(max-width:900px){.brand-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
.brand-compare .brand-models{grid-template-columns:1fr}
.brand-compare .brand-share{grid-column:auto}
}

@media(max-width:640px){.brand-models{grid-template-columns:160px minmax(80px,1fr)}
.brand-share{grid-column:1/-1}
.brand-fields{grid-template-columns:1fr}
.brand-drop-desktop{display:none}
.brand-drop-mobile{display:block}
.brand-drop{min-height:120px;padding:12px}
.brand-drop small{max-width:220px}
.brand-compare-toggle{display:flex;gap:8px}
.brand-compare{display:block}
.brand-compare[data-show=after] .brand-before,.brand-compare[data-show=before] .brand-after{display:none}
.brand-compare .brand-models{grid-template-columns:160px minmax(80px,1fr)}
.brand-compare .brand-share{grid-column:1/-1}
.brand-history-row{flex-direction:column}
.brand-panel button{min-height:40px}
.brand-color{min-width:40px}
.brand-changes td,.brand-changes th{padding:8px 4px;font-size:12px}
}


.brand-crop-stage,.brand-crop-stage img{max-height:none}
.brand-crop-dialog{max-height:90vh;overflow:auto}
#brand-adjust>summary{font-size:16px;font-weight:600;margin-bottom:16px}

.brand-segments{display:flex;flex-wrap:wrap;gap:4px}.brand-segments button{flex:1}.brand-segments [aria-pressed=true]{border-color:var(--accent);color:var(--accent);background:var(--panel-2)}