/* Developer brand: Teal. Builder's shared component geometry stays intact. */
:root[data-theme="developer-teal"] {
  --font-size-value: 13px;
  --color-ink: #102426;
  --color-canvas: #ffffff;
  --color-paper: #fbfbf9;
  --color-workspace: #edf2f2;
  --color-line: #d7e0e1;
  --color-soft: #eef4f4;
  --color-lilac: #b9e3e6;
  --color-lilac-soft: #e8f7f8;
  --color-muted: #607173;
  --color-action-primary: #0e9aa7;
  --color-action-primary-hover: #0b7f8a;
  --color-action-primary-soft: #e8f7f8;
  --color-action-accent: #0e9aa7;
  --color-action-focus: #37adb7;
  --color-action-ink: #086c75;
  --color-action-line: #9bd4d8;
  --color-action-line-strong: #58b8bf;
  --color-action-surface: #f4fbfb;
  --color-action-shadow-rgb: 14 154 167;
  --color-action-focus-rgb: 14 154 167;
  --color-focus: #0e9aa7;
  --builder-sidebar: #0a1e22;
  --builder-sidebar-hover: #0b2f35;
  --builder-sidebar-active: #0e9aa7;
  --builder-sidebar-text: #e8f1f2;
  --builder-sidebar-title: #93a8aa;
  --builder-sidebar-edge: rgb(255 255 255 / 12%);
  --builder-sidebar-brand-line: rgb(255 255 255 / 16%);
  --builder-sidebar-section-line: rgb(255 255 255 / 16%);
}
/* Brand accents follow the approved reference; semantic warning/success colors remain. */
/* 좌우 여백은 Builder 20px 대신 12px — 사이드바 메뉴(.app-nav padding 18px 12px)와 왼쪽을 맞추고,
   그만큼 벌어 브랜드 두 줄이 245px 상자 밖으로 밀리지 않게 한다(2026-09-21 실측: 글자 마크를 걷어 34px 이 남는다). */
.app-header__brand { border-top: 4px solid var(--color-action-primary); display: flex; align-items: center; padding: 0 12px; }
/* 글자 마크(::before "D")는 걷었다(2026-09-21 사용자 결정). Builder 도 "B" 마크를 같이 걷었다 — 브랜드 줄만 남는다. */
/* 옛 목업 styles.css의 요소 규칙 `button { min-height: 40px }`은 min-height라 shell.css 사본의 height: 28px로 눌리지 않는다.
   Builder에는 그 요소 규칙이 없어 필요 없던 Developer 전용 보정이다. shell.css를 통째로 다시 복사해도 살아남게 여기에 둔다. */
.app-nav-toggle { min-height: 28px; }
.app-nav__project-label { color: #93a8aa; }
/* Three work areas: overview, development workflow, administration. */
.app-nav > .artifact-link[href="/"]::before { background: #60a5fa; }
.app-nav > .artifact-link:is([href="/requests"], [href="/trds"], [href="/progress"], [href="/reviews"])::before { background: #ffffff; }
.app-nav .admin-nav .artifact-link::before { background: #4ade80; }
.admin-nav { display: contents; }
.app-nav .admin-nav a[aria-disabled="true"] { cursor: default; }
.app-nav .admin-nav a[aria-disabled="true"]:hover { background: transparent; }
.avatar, .person { background: var(--color-action-primary); }
.selected-row { background: var(--color-action-primary-soft); }
.supervisor-card, .supervisor-analysis { border-color: var(--color-action-line); }
.decision-hero, .prd-next-action, .flow-node--root, .flow-insight {
  border-color: var(--color-action-line);
  background: var(--color-action-surface);
}
.analysis-callout { background: var(--color-action-surface); }
.supervisor-brief p { color: var(--color-muted); }
.toolbar button.active, .filter-row button.active { border-color: var(--color-action-line); }
.variant-catalog-page { background: var(--color-workspace); }
.status-진행-중 { --status-bg: #e8f7f8; --status-line: #9bd4d8; --status-ink: #086c75; --status-dot: #0e9aa7; }
.dashboard-control .metrics { border-color: var(--builder-sidebar); background: var(--builder-sidebar); }
.dashboard-control .chart-values circle,
.dashboard-control .month-bars > div,
.dashboard-control .progress-track span,
.dashboard-control .day-dot { background: var(--color-action-primary); fill: var(--color-action-primary); }
@media (max-width: 767px) {
  .app-nav__project-label { color: var(--color-muted); }
}

/* Builder 사이드바 232px에서 13px 넓힌다 — "GPY-ADP Developer v1.0.1" 브랜드가 잘리지 않게(2026-09-09 5px, 2026-09-20 브랜드가 한 자 늘어 8px 더). 헤더·메뉴·본문 여백·토글 위치가 모두 이 값을 본다. */
:root { --builder-sidebar-width: 245px; }
/* 브랜드 두 줄(2026-09-21). 첫 줄 제품 이름, 둘째 줄 사업 칩 + 버전.
   ⚠ 높이는 --builder-topbar-height 가 정한다 — 두 줄을 합쳐도 그 안에 들어와야 한다(1rem + 0.6875rem + 2px). */
.app-header__brand-lines { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.app-header__brand-name { white-space: nowrap; }
.app-header__brand-meta { display: flex; align-items: center; gap: 6px; }
/* 사업 구분 칩. 글자 색은 브랜드 줄과 같고 바탕만 옅게 깐다 — 헤더가 Teal 한 색이라 테두리를 더하면 지저분하다. */
.app-header__brand-chip { padding: 1px 6px; border-radius: 4px; background: rgb(255 255 255 / 20%);
  font-size: 0.625rem; font-weight: 800; line-height: 1.5; letter-spacing: 0.02em; }
/* 두 줄 판에서는 버전이 칩 뒤에 붙는다 — 왼쪽 여백은 gap 이 준다. */
.app-header__brand-meta .app-header__version { margin-left: 0; transform: none; }
/* Builder .app-header__version과 같은 규칙. 사본 shell.css 이전 판에는 없다. */
.app-header__version { margin-left: 6px; color: rgb(255 255 255 / 62%); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0; transform: translateY(1px); white-space: nowrap; }

/* 좁은 화면에서는 고정된 사이드바 로고가 알림·계정 버튼 위를 덮지 않도록 같은 flex 행에 둔다. */
@media (max-width: 767px) {
  .app-header { padding-inline: 12px; gap: 8px; }
  .app-header .app-header__brand {
    position: static; flex: 1 1 auto; width: auto; min-width: 0; max-width: 245px;
    height: 64px; margin-left: -12px; padding-inline: 12px; border-top: 0;
  }
  .app-header__brand-name { overflow: hidden; text-overflow: ellipsis; font-size: 0.875rem; }
  .app-header__brand-meta { min-width: 0; }
  .app-header__brand-chip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-header__brand-meta .app-header__version { flex: none; }
  .app-header__gap { min-width: 0; }
  .app-header > .pop { flex: none; }
  #account-menu > summary { max-width: clamp(64px, 24vw, 144px); padding-inline: 8px; }
  #account-menu .account-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #account-menu > summary::after { flex: none; }
}