/* =====================================================================
   유달리 · 03 "모여서, 한 걸음" — 장식 강
   하나의 토큰 체계(색·타이포·간격·모서리·그림자·모션) 위에 컴포넌트를 얹는다.
   새 색·크기는 여기 토큰을 먼저 늘리고 쓴다. 템플릿에 색을 적지 않는다.
   ===================================================================== */

/* ---- 0. 토큰 ---- */
:root {
  color-scheme: light;
  /* 색: 바탕 */
  --c-bg: #F8F5EE; --c-surface: #FFFDF8; --c-soft: #EFE9DC; --c-fill: #E6E0D1; --c-line: #E2DFD4;
  /* 입력 칸 테두리: 바탕·표면·soft 위 3:1 이상(WCAG 1.4.11). 구분선은 --c-line */
  --c-line-strong: #8A8677;
  /* 색: 글자 (보조색도 바탕·표면 위 4.5:1 이상) */
  --c-ink: #33372D; --c-muted: #64655A; --c-faint: #8A8A7C;
  /* 색: 강조 */
  --c-accent: #A63E2E; --c-accent-strong: #873022; --c-accent-soft: #F6E1D6; --c-on-accent: #FFFDF6;
  /* 색: 작업실 색면 */
  --c-on-yellow: #33372D; --c-yellow: #F5D575; --c-yellow-strong: #E3B53C; --c-sage: #DCE8D5; --c-sage-strong: #8CAA73;
  --c-coral: #F4C1AC; --c-tape: rgba(255, 255, 255, .55);
  /* 색: 의미 */
  --c-danger: #A52F2B; --c-danger-soft: #FBE3DE; --c-success: #2F6B3A; --c-success-soft: #DCE8D5;
  --c-warning: #84520A; --c-warning-soft: #FBEFCB; --c-info: #285480; --c-info-soft: #E3ECF5;
  --c-violet: #4B2A7B; --c-violet-soft: #ECE2F7;
  /* 색: 외부 브랜드(DESIGN.md 6.1) — 로고·GitHub 로그인 버튼에만 */
  --c-github: #1F2328; --c-on-github: #FFFFFF; --c-discord: #5865F2; --c-openrouter: #03080A; --c-brand-on-accent: #FFFFFF;
  /* 색: 식물 그림 */
  --plant-pot: #BD7250; --plant-rim: #DBA87D; --plant-soil: #635A43; --plant-stem: #60774D;
  --plant-leaf: #8CAA73; --plant-leaf-2: #ABC18C; --plant-vein: #DCE8D5; --plant-face: #594A37;
  --plant-shadow: rgba(38, 58, 48, .10);
  /* 타이포 */
  --f-display: 'Jua', Pretendard, sans-serif;
  --f-body: Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  --f-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-task: 15px; --fs-lg: 16px; --fs-lead: 17px;
  --fs-xl: 20px; --fs-h3: 22px; --fs-2xl: 24px; --fs-h2: 28px; --fs-3xl: 30px; --fs-stat: 34px; --fs-page: 38px;
  --fs-hero: 46px; --fs-tally: 64px;
  /* 간격 (4px 단위) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  /* 모서리 */
  --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px;
  /* 그림자 */
  --sh-1: 0 2px 0 rgba(51, 55, 45, .04);
  --sh-2: 0 6px 15px rgba(51, 55, 45, .08);
  --sh-pop: 0 16px 36px rgba(34, 41, 31, .16);
  --scrim: rgba(36, 41, 33, .38);
  /* 모션 (README 표) */
  --dur-fast: 180ms; --dur-base: 200ms; --dur-slow: 800ms; --dur-leaf: 4s;
  --ease: ease; --ease-out: cubic-bezier(.2, .8, .2, 1);
  /* 셸 높이 */
  --header-h: 80px;
  /* 쌓임 순서: 고정 막대 < 머리줄 < 겹침 패널 < 펼침 메뉴 < 알림 < 건너뛰기. 지역 쌓임(-1·0·1)은 숫자 그대로 쓴다 */
  --z-sticky: 4; --z-header: 10; --z-overlay: 20; --z-dropdown: 30; --z-toast: 60; --z-skip: 100;
}
/* 따뜻한 먹색 바탕. 노랑은 로고 그대로, 세이지는 작은 상태 강조에만 쓴다. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --c-bg: #1C1B18; --c-surface: #25231F; --c-soft: #302D27; --c-fill: #3C382F; --c-line: #484339;
    --c-line-strong: #928A7B;
    --c-ink: #F1EBDD; --c-muted: #BCB3A3; --c-faint: #908879;
    --c-accent: #E99782; --c-accent-strong: #F4B39E; --c-accent-soft: #482E27; --c-on-accent: #2B1711;
    --c-on-yellow: #33372D; --c-yellow: #F5D575; --c-yellow-strong: #E3B53C;
    --c-sage: #30352B; --c-sage-strong: #8CAA73; --c-coral: #51382F; --c-tape: rgba(255, 243, 220, .16);
    --c-danger: #F2A297; --c-danger-soft: #442824; --c-success: #B1CD9B; --c-success-soft: #2C3528;
    --c-warning: #E7C183; --c-warning-soft: #3D3120; --c-info: #ADC9E6; --c-info-soft: #283440;
    --c-violet: #CFB8E9; --c-violet-soft: #362B43;
    --c-github: #FFFFFF; --c-on-github: #1F2328; --c-discord: #5865F2; --c-openrouter: #FCFCFE; --c-brand-on-accent: #000000;
    --plant-pot: #BD7250; --plant-rim: #DBA87D; --plant-soil: #635A43; --plant-stem: #8CAA73;
    --plant-leaf: #8CAA73; --plant-leaf-2: #ABC18C; --plant-vein: #DCE8D5; --plant-face: #594A37;
    --plant-shadow: rgba(12, 10, 8, .22);
    --sh-1: 0 2px 0 rgba(12, 10, 8, .12);
    --sh-2: 0 6px 15px rgba(12, 10, 8, .22);
    --sh-pop: 0 16px 36px rgba(12, 10, 8, .40);
    --scrim: rgba(12, 10, 8, .64);
  }
}

/* ---- 1. 기본 · 글자 · 도우미 ---- */
* { box-sizing: border-box; }
html {
  font-family: var(--f-body); font-size: var(--fs-md); line-height: 1.55;
  color: var(--c-ink); background: var(--c-bg); word-break: keep-all;
}
body { margin: 0; background: var(--c-bg); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--c-accent); text-underline-offset: 2px; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.02em; }
p { margin: 0; text-wrap: pretty; }
h1, h2 { text-wrap: balance; }
code, pre, .mono { font-family: var(--f-mono); }
/* 글 속 식별자(채널·서버 id, 브랜치, 커밋, 이슈 번호): 작은 회색 알약 */
:not(pre) > code { padding: 1px 6px; border-radius: var(--r-xs); background: var(--c-soft); font-size: .9em; overflow-wrap: anywhere; }
:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.display { font-family: var(--f-display); font-weight: 400; letter-spacing: -0.01em; }
.t12 { font-size: var(--fs-xs); line-height: 18px; } .t13 { font-size: var(--fs-sm); line-height: 19px; }
.t15 { font-size: var(--fs-task); line-height: 22px; } .t16 { font-size: var(--fs-lg); line-height: 24px; }
.t17 { font-size: var(--fs-lead); line-height: 26px; } .t20 { font-size: var(--fs-xl); line-height: 28px; }
.t24 { font-size: var(--fs-2xl); line-height: 33px; }
.muted { color: var(--c-muted); } .danger { color: var(--c-danger); } .warning { color: var(--c-warning); }

.error { color: var(--c-danger); font-size: var(--fs-task); line-height: 22px; }
.fw-6 { font-weight: 600; } .fw-7 { font-weight: 700; }
.mt-2 { margin-top: var(--sp-2); } .mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); } .mt-6 { margin-top: var(--sp-6); }
.ml-auto { margin-left: auto; } .block { display: block; }
.flex-1 { flex: 1 1 0; min-width: 0; } .flex-2 { flex: 2 1 0; min-width: 0; }
.gap-1 { gap: var(--sp-1) !important; } .gap-2 { gap: var(--sp-2) !important; }
.between { justify-content: space-between; } .start { align-items: flex-start; }
.pre-wrap { white-space: pre-wrap; }
.w-sm { max-width: 520px; } .w-md { max-width: 640px; }
.row { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); align-items: center; }
.stack { display: flex; flex-direction: column; gap: var(--sp-2); }
ul.stack, ol.stack { list-style: none; margin: 0; padding: 0; }
.grow { flex: 1; min-width: 0; }
.spacer { flex: 1; }
.ellipsis { display: inline-block; max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.divider-top { border-top: 1px solid var(--c-line); padding-top: var(--sp-2); }
.divider-bottom { border-bottom: 1px solid var(--c-line); padding-bottom: var(--sp-1); }
[hidden] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: var(--sp-4); top: -80px; z-index: var(--z-skip); padding: var(--sp-3) var(--sp-5);
  background: var(--c-surface); color: var(--c-accent); border: 2px solid var(--c-accent); border-radius: var(--r-md);
}
.skip-link:focus { top: var(--sp-3); }

/* ---- 2. 셸: 머리줄 · 주 메뉴 · 메뉴 ---- */
.header {
  position: sticky; top: 0; z-index: var(--z-header); height: var(--header-h); display: flex; align-items: center; gap: var(--sp-5);
  padding: 0 var(--sp-8); background: color-mix(in srgb, var(--c-bg) 92%, transparent);
  border-bottom: 1px solid var(--c-line); backdrop-filter: blur(10px);
}
/* 머리줄의 펼침(검색 결과·메뉴)이 열려 있으면 머리줄 전체를 겹침 패널 위로 올린다. 머리줄이 쌓임 맥락이라 안쪽 z-index만으로는 못 넘는다 */
.header:has([aria-expanded="true"]) { z-index: var(--z-dropdown); }
.logo {
  font-family: var(--f-display); font-weight: 400; font-size: var(--fs-2xl); color: var(--c-ink); text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--sp-2);
}
/* 로고 파일(static/brand/): 워드마크 udally.svg, 정사각 아이콘 udally-icon.svg */
.brand-logo { display: block; flex: none; height: 38px; width: auto; aspect-ratio: 810 / 328; object-fit: contain; } /* 워드마크 비율 고정, 줄어들지 않음 */
.nav { display: flex; gap: var(--sp-1); padding: 5px; border-radius: var(--r-pill); background: var(--c-soft); }
.nav a {
  display: inline-flex; align-items: center; gap: var(--sp-1); height: 40px; padding: 0 15px; border-radius: var(--r-pill);
  color: var(--c-muted); font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav a:hover { color: var(--c-ink); }
.nav a[aria-current="page"] { background: var(--c-surface); color: var(--c-ink); font-weight: 700; box-shadow: var(--sh-2); }
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.avatar {
  min-width: 40px; height: 40px; padding: 0 10px; border-radius: var(--r-pill); background: var(--c-soft); color: var(--c-ink);
  border: 1px solid var(--c-line); display: inline-flex; align-items: center; justify-content: center; gap: 2px; font-weight: 700;
}
.menu[open] > .avatar { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }
.menu-list {
  position: absolute; right: 0; top: 48px; min-width: 200px; padding: 10px; display: flex; flex-direction: column;
  gap: var(--sp-1); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg);
  box-shadow: var(--sh-pop); z-index: var(--z-dropdown);
}
.menu-list a, .menu-list button {
  display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; background: none;
  border-radius: var(--r-md); color: var(--c-ink); text-decoration: none; cursor: pointer;
}
.menu-list a:hover, .menu-list button:hover { background: var(--c-soft); }
.menu-list .menu-who { padding: var(--sp-1) 12px; }
.menu-list.start { right: auto; left: 0; }
.menu-list a[aria-current="true"] { background: var(--c-sage); font-weight: 700; }
.menu-list a[aria-current="true"]::before { content: "✓ "; }
.menu-list .menu-new { margin-top: var(--sp-1); border-top: 1px solid var(--c-line); border-radius: 0 0 var(--r-md) var(--r-md); padding-top: 12px; }
/* 조직 전환: 로고 자리가 손잡이다 — 눌리는 것처럼 보이게 테두리 없는 버튼 모양 */
.switcher > summary.logo { padding: 4px 10px; margin-left: -10px; border-radius: var(--r-md); }
.switcher > summary.logo:hover { background: var(--c-soft); }
.switcher[open] > summary.logo { background: var(--c-soft); }
.switcher > summary.logo > span { max-width: 15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.switcher .menu-list { min-width: 240px; }
.caret { flex: none; color: currentColor; transition: transform var(--dur-fast) var(--ease); }
details[open] > summary .caret { transform: rotate(180deg); }

/* ---- 3. 셸: 프레임 · 사이드 레일 · 본문 · 패널 자리 ---- */
.frame { display: flex; align-items: flex-start; }
.project-picker { display: none; }
.rail { position: sticky; top: var(--header-h); flex: none; width: 214px; padding: var(--sp-6) var(--sp-3); display: flex; flex-direction: column; gap: 2px; }
.rail-head { display: flex; align-items: center; gap: var(--sp-2); padding: 0 6px 6px; }
.rail-list { display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 248px); min-height: 120px; overflow-y: auto; padding-right: 2px; }
.rail a {
  display: flex; align-items: center; gap: var(--sp-2); min-height: 44px; padding: 0 10px; border-radius: var(--r-md);
  color: var(--c-ink); text-decoration: none; font-size: var(--fs-sm);
}
.rail a:hover { background: var(--c-soft); }
.rail a .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail a[aria-current="page"] { background: var(--c-sage); font-weight: 700; }
.rail .initial, .project-picker-list .initial {
  flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--c-fill);
  display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-xs); font-weight: 700;
}
.rail a[aria-current="page"] .initial { background: var(--c-surface); }
.rail-new { height: 44px; padding: 0 10px; text-align: left; }
.rail-empty { padding: 0 10px; }
@media (min-width: 701px) {
  .rail.collapsed { width: auto; }
  .rail.collapsed .rail-only, .rail.collapsed .rail-list, .rail.collapsed .rail-new { display: none; }
  .rail.collapsed .rail-head { justify-content: center; padding: 0 0 6px; }
}
.frame-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.layout { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: var(--sp-6); padding: var(--sp-8); }
.layout > main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-6); }
/* 좌우 끝선은 바로 위 본문과 같다: 앱은 .layout 여백(32px, 모바일 16px), 인증 화면은 카드 폭, 랜딩은 landing.css의 .wrap 폭 */
.site-footer {
  padding: var(--sp-6) var(--sp-8);
  border-top: 1px solid var(--c-line);
  background: var(--c-bg);
  color: var(--c-muted);
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  line-height: 1.5;
}
.site-footer p { margin: 0; }
.site-footer .foot-in {
  width: 100%;
  margin-inline: auto;
  display: grid;
  gap: var(--sp-3);
}
.site-footer .foot-top,
.site-footer .foot-policy,
.site-footer .biz {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--sp-8);
  row-gap: var(--sp-1);
  align-items: start;
}
.site-footer .foot-top > *,
.site-footer .foot-policy > *,
.site-footer .biz > * { min-width: 0; }
.site-footer .foot-intro,
.site-footer .biz > div {
  display: grid;
  gap: 2px;
}
.site-footer .foot-brand {
  font-family: var(--f-display);
  font-size: var(--fs-lg);
  font-weight: 400;
  color: var(--c-ink);
}
.site-footer .foot-copyright {
  justify-self: end;
  text-align: right;
}
.site-footer .foot-policy { align-items: center; }
/* 정책 줄은 라벨 | 링크 묶음 두 칸이다(링크를 칸마다 두면 셋째가 다음 줄 가운데로 떨어진다) */
.site-footer .foot-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-1) var(--sp-4); }
/* 좁은 인증 카드 폭에서도 저작권 한 줄이 끊기지 않게 오른쪽 칸은 글 폭만 */
.site-footer .foot-top { grid-template-columns: minmax(0, 1fr) auto; }
.site-footer .foot-label,
.site-footer .biz-label { color: var(--c-ink); }
.site-footer .foot-label { font-weight: 700; }
.site-footer .biz { margin: 0; font-style: normal; }
.site-footer .biz p { overflow-wrap: anywhere; }
.site-footer .biz-unit { display: inline-block; }
.site-footer .biz-email {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--sp-1);
}
.site-footer a {
  color: var(--c-accent);
  text-decoration: underline;
  text-underline-offset: var(--sp-1);
  overflow-wrap: anywhere;
}
.site-footer a:hover { color: var(--c-accent-strong); }
.site-footer a:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 2px;
}
/* 오른쪽 묶음(저작권·처리방침·주소)은 오른쪽 끝에 붙인다 */
.site-footer :is(.foot-policy, .biz) > :last-child { justify-self: end; text-align: right; }
.site-footer .biz-email { justify-content: flex-end; }
.auth-main + .site-footer .foot-in { max-width: 440px; }
.auth-main:has(.form-card) + .site-footer .foot-in { max-width: 760px; }
@media (max-width: 700px) {
  .site-footer { padding: var(--sp-5) var(--sp-4); }
  .site-footer .foot-top,
  .site-footer .foot-policy,
  .site-footer .biz { grid-template-columns: minmax(0, 1fr); }
  .site-footer .foot-top { text-align: center; }
  .site-footer :is(.foot-policy, .biz) > :last-child { justify-self: start; text-align: left; }
  .site-footer .biz-email { justify-content: flex-start; }
  .site-footer .foot-copyright {
    justify-self: center;
    padding-top: 0;
    text-align: center;
  }
  .site-footer .foot-policy { row-gap: var(--sp-1); }
  .site-footer .foot-links { justify-content: flex-start; }
  .site-footer .foot-links > a,
  .site-footer .biz-email > a {
    display: inline-flex;
    align-items: center;
    min-height: calc(var(--sp-10) + var(--sp-1));
    max-width: 100%;
  }
}
.auth-main { min-height: calc(100vh - var(--header-h)); align-items: center; justify-content: center; }
/* 패널은 흐름 밖 오른쪽에 겹쳐 뜬다. 본문 폭·높이가 그대로라 누른 행이 제자리에 있다(목록 스크롤 유지). */
aside#panel {
  position: fixed; top: var(--header-h); right: 0; bottom: 0; z-index: var(--z-overlay); width: min(480px, 100%);
  overflow: auto; overscroll-behavior: contain; padding: var(--sp-4);
}
aside#panel:empty { display: none; }
aside#panel > .panel { box-shadow: var(--sh-pop); }
.layout.wide aside#panel { left: 0; width: auto; padding: var(--sp-6); background: var(--scrim); }
.layout.wide aside#panel .panel { max-width: 1240px; margin: 0 auto; padding: var(--sp-8); gap: var(--sp-5); }
.layout.wide .panel-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: var(--sp-6); }

/* ---- 4. 머리말 · 탭 ---- */
.page-head { display: flex; flex-direction: column; gap: 2px; position: relative; }
.page-head.row { flex-direction: row; justify-content: space-between; align-items: center; gap: var(--sp-3); }
.page-head > a { color: var(--c-muted); text-decoration: none; font-weight: 700; font-size: var(--fs-xs); }
.page-head > a:hover { color: var(--c-accent); }
.page-head > h1 {
  font-family: var(--f-display); font-weight: 400; font-size: var(--fs-page); line-height: 1.25; letter-spacing: -0.01em;
  align-self: flex-start; position: relative; z-index: 0;
}
/* 강: 제목 아래 노란 붓질 */
.page-head > h1::after {
  content: ""; position: absolute; z-index: -1; left: -4px; right: -8px; bottom: 4px; height: 14px;
  background: var(--c-yellow); border-radius: 10px 4px 12px 6px; transform: rotate(-1deg); opacity: .85;
}
.page-head > p { color: var(--c-muted); }
.tabs {
  display: flex; gap: var(--sp-1); flex-wrap: wrap; align-self: flex-start; max-width: 100%;
  padding: 5px; border-radius: var(--r-xl); background: var(--c-soft);
}
.tabs a {
  height: 40px; padding: 0 var(--sp-4); display: inline-flex; align-items: center; border-radius: var(--r-pill);
  color: var(--c-muted); font-size: var(--fs-md); font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.tabs a:hover { color: var(--c-ink); }
.tabs a[aria-current="page"] { background: var(--c-surface); color: var(--c-ink); font-weight: 700; box-shadow: var(--sh-2); }

/* ---- 5. 카드 · 표면 ---- */
.card {
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0;
}
.card > h2, .card-head h2 {
  font-family: var(--f-display); font-weight: 400; font-size: var(--fs-2xl); line-height: 1.35; letter-spacing: -0.01em;
}
.card > h3 { font-size: var(--fs-lg); }
.card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); }
.box { background: var(--c-soft); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: var(--sp-4); }
.card.alert { border-color: var(--c-danger); box-shadow: inset 4px 0 0 var(--c-danger); }
.card.compact { padding: var(--sp-3) var(--sp-4); gap: 6px; border-radius: var(--r-lg); }
.ellipsis-2 { max-width: 220px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.auth-card { width: 100%; max-width: 440px; margin: var(--sp-10) auto; position: relative; overflow: visible; padding: var(--sp-8); }
/* 강: 인증 카드 위에 앉은 작은 화분 */
.auth-card::before {
  content: ""; position: absolute; top: -62px; right: 24px; width: 82px; height: 82px; pointer-events: none;
  background: var(--art-plant) center / contain no-repeat;
}

/* 메모 장식: 색면 + 테이프. 평소엔 반듯하게, 올리면 살짝 기울고, 처음 열 때 한 번만 흔든다(app.js가 .memo-wiggle을 붙임) */
.memo {
  position: relative; border-radius: var(--r-xl); padding: var(--sp-6); background: var(--c-coral); color: var(--c-ink);
  box-shadow: var(--sh-2); transition: transform var(--dur-base, .2s) var(--ease, ease);
}
.memo:hover { transform: rotate(-1.2deg); }
.memo.memo-wiggle { animation: memo-wiggle .9s var(--ease, ease) .25s 1; }
@keyframes memo-wiggle { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-2deg); } 45% { transform: rotate(1.5deg); } 70% { transform: rotate(-.8deg); } }
.memo::before {
  content: ""; position: absolute; width: 64px; height: 18px; background: var(--c-tape); top: -8px;
  left: calc(50% - 32px); transform: rotate(3deg); border-radius: 2px;
}
.memo .muted { color: inherit; opacity: .85; }

/* ---- 6. 버튼 ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 18px;
  border-radius: var(--r-pill); border: 1px solid var(--c-line); background: var(--c-surface); color: var(--c-ink);
  font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:hover { background: var(--c-soft); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }
.btn.primary:hover { background: var(--c-accent-strong); border-color: var(--c-accent-strong); }
.btn.tint { background: var(--c-accent-soft); border-color: transparent; color: var(--c-accent); }
.btn.tint:hover { background: var(--c-coral); color: var(--c-ink); }
.btn.sm { height: 36px; padding: 0 14px; font-size: var(--fs-sm); }
.btn.icon { width: 36px; padding: 0; }
.btn.link { height: auto; padding: 0; border: 0; background: none; color: var(--c-accent); font-weight: 600; border-radius: var(--r-sm); }
.btn.link:hover { text-decoration: underline; }
.btn[aria-pressed="true"] { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-bg); }
/* 되돌릴 수 없는 행동(삭제·제거·폐기·연결 해제)은 보조 버튼과 같은 모양이면 안 된다 */
.btn.danger { border-color: var(--c-danger); color: var(--c-danger); }
.btn.danger:hover { background: var(--c-danger-soft); }
.btn.link.danger { border: 0; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: default; transform: none; }
/* 외부 브랜드 로고(DESIGN.md 6.1). 크기는 글자와 같고 두 모드가 같다. GitHub 마크는 흑·백만, Discord는 Blurple, OpenRouter는 Ink/Cloud, Hugging Face는 원본 컬러 파일. */
.brand-icon { width: 1em; height: 1em; flex: none; fill: currentColor; vertical-align: -.125em; }
.brand-icon-github { fill: var(--c-github); }
.brand-icon-discord { fill: var(--c-discord); }
.brand-icon-openrouter { fill: var(--c-openrouter); width: auto; } /* 원본 비율 1024:730 */
.btn.brand-github .brand-icon { fill: currentColor; }
.btn.primary .brand-icon { fill: var(--c-brand-on-accent); } /* 주 버튼 위 마크는 흑·백(라이트 흰색, 다크 검정) */
:is(h2, h4, b, a:not(.btn)) > .brand-icon { margin-inline-end: .3em; }
.btn.brand-github { background: var(--c-github); border-color: var(--c-github); color: var(--c-on-github); }
.btn.brand-github:hover { background: var(--c-github); opacity: .88; }
.stack > .btn, .stack > form > .btn, .card > .btn, .card > a.btn { align-self: flex-start; }

/* ---- 7. 입력 ---- */
/* 클래스 없이 렌더된 폼 위젯(Django 기본 출력)도 같은 모양이 되게 요소 선택자까지 함께 받는다 */
.input, .select, .textarea,
:where(input:not([type=checkbox], [type=radio], [type=hidden], [type=submit], [type=file]), select, textarea) {
  width: 100%; height: 42px; padding: 0 14px; border: 1px solid var(--c-line-strong); border-radius: var(--r-md);
  background: var(--c-surface); color: var(--c-ink);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.input::placeholder, textarea::placeholder { color: var(--c-faint); }
/* 파일 선택 버튼과 파일명은 텍스트 입력처럼 높이만 지정해도 중앙에 놓이지 않는다. */
.input[type=file] { padding-block: var(--sp-2); line-height: 24px; }
.input[type=file]::file-selector-button {
  height: 100%; margin-right: var(--sp-2); padding: 0 var(--sp-2); font: inherit; line-height: normal;
}
.input.lg { height: 52px; font-size: var(--fs-lg); border-radius: var(--r-lg); }
.select.auto, .input.auto { width: auto; }
.textarea, textarea { height: auto; padding: 10px 14px; resize: vertical; line-height: 1.6; }
.input:focus, .select:focus, .textarea:focus, input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-soft);
}
input[type=checkbox], input[type=radio] { accent-color: var(--c-accent); width: 18px; height: 18px; }
form.stack { max-width: 640px; }
label.field { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); color: var(--c-muted); font-weight: 600; }
label.field > .input, label.field > .select, label.field > .textarea, label.field > input, label.field > select, label.field > textarea { color: var(--c-ink); font-weight: 400; }
/* 도움말은 어느 필드에서나 같은 모양. Django가 붙이는 <ul>도 같이 받는다 */
label.field .helptext, label.field ul { margin: 0; padding: 0; list-style: none; font-size: var(--fs-xs); line-height: 16px; color: var(--c-muted); font-weight: 400; }
label.check { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; cursor: pointer; }
.file-upload { position: relative; display: inline-flex; margin: 0; }
.file-upload-input {
  position: absolute; width: 1px !important; height: 1px !important; margin: -1px; padding: 0 !important;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 0;
}
.file-upload-input:focus-visible + .file-upload-button { outline: 3px solid var(--c-accent); outline-offset: 2px; }
fieldset { min-width: 0; margin: 0; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--c-line); border-radius: var(--r-md); }
fieldset > legend { padding: 0 var(--sp-1); font-size: var(--fs-sm); font-weight: 600; color: var(--c-muted); }
.choice-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.choice-fieldset > legend { margin-bottom: var(--sp-2); padding: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--c-muted); }

/* 묶음·정렬 같은 버튼 묶음: 라벨을 앞에 달아 옆 필터 셀렉트와 구별한다 */
.seg { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); }
.seg-label { font-size: var(--fs-xs); font-weight: 600; color: var(--c-muted); margin-right: 2px; }

/* ---- 8. 안내 · 알림 ---- */
.notice {
  display: flex; align-items: flex-start; gap: var(--sp-2); padding: 14px 16px; border-radius: var(--r-lg);
  font-size: var(--fs-md); background: var(--c-sage); color: var(--c-ink); border: 1px solid transparent;
  animation: rise var(--dur-base) var(--ease);
}
.notice .btn.link { color: inherit; flex: none; }
.notice.bad { background: var(--c-danger-soft); color: var(--c-danger); }
.notice.warn { background: var(--c-warning-soft); color: var(--c-warning); }
/* 완료 순간의 축하 알림(app.js가 만든다). 3초 뒤 사라진다. */
.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: var(--z-toast); display: flex; align-items: center; gap: var(--sp-3);
  padding: 12px 22px 12px 14px; border-radius: var(--r-pill); background: var(--c-ink); color: var(--c-bg);
  box-shadow: var(--sh-pop); transform: translateX(-50%); font-weight: 600;
  animation: toast-in var(--dur-base) var(--ease-out);
}
.toast svg { width: 40px; height: 40px; flex: none; }
.toast .leaf { transform-origin: 50% 90%; animation: sprout 900ms var(--ease-out) 1; }
.toast.leaving { opacity: 0; transition: opacity var(--dur-base) var(--ease); }

/* ---- 9. 배지 · 칩 · 상태 알약 · 태그 ---- */
.badge {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; padding: 1px 8px; border-radius: var(--r-xs);
  font-size: var(--fs-xs); line-height: 18px; background: var(--c-soft); color: var(--c-muted); border: 0; font-weight: 600;
}
.badge.high { background: var(--c-accent-soft); color: var(--c-accent); }
.badge.primary { background: var(--c-yellow); color: var(--c-on-yellow); }
.badge.danger { background: var(--c-danger-soft); color: var(--c-danger); }
.badge.ok { background: var(--c-success-soft); color: var(--c-success); }
.badge.warn { background: var(--c-warning-soft); color: var(--c-warning); }
.badge.info { background: var(--c-info-soft); color: var(--c-info); }
.tag { display: inline-block; padding: 0 10px; border-radius: var(--r-xs); background: var(--c-soft); font-size: var(--fs-xs); line-height: 24px; }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 16px;
  border: 1px solid var(--c-line); border-radius: var(--r-pill); background: var(--c-surface); color: var(--c-ink);
  cursor: pointer; text-decoration: none; font: inherit;
}
.chip:hover { background: var(--c-soft); }
.chip input, .radio-card input {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 0;
}
.chip:has(input:focus-visible), .radio-card:has(input:focus-visible) { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.chip:has(input:checked), .chip[aria-pressed="true"] { border-color: var(--c-ink); background: var(--c-ink); color: var(--c-bg); font-weight: 600; }
.chip:has(input:checked)::before { content: "✓"; }
.chip a { text-decoration: none; color: inherit; }
.radios { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--sp-2); }
.radio-card {
  position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--c-line);
  border-radius: var(--r-lg); cursor: pointer; background: var(--c-surface);
}
.radio-card:has(input:checked) { border-color: var(--c-accent); background: var(--c-accent-soft); }
.radio-card b { font-size: var(--fs-task); line-height: 22px; font-weight: 600; }
.radio-card span { font-size: var(--fs-sm); color: var(--c-muted); }
/* 상태 알약: 상태 select와 읽기 전용 표시 공용 */
.pill {
  height: 36px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid transparent; font-size: var(--fs-sm);
  font-weight: 600; cursor: pointer; background: var(--c-soft); color: var(--c-ink); width: auto;
}
select.pill { padding-right: 8px; }
.pill.doing { background: var(--c-sage); }
.pill.review { background: var(--c-yellow); color: var(--c-on-yellow); }
.pill.blocked { background: var(--c-coral); }
.pill.paused, .pill.cancelled { background: var(--c-soft); color: var(--c-muted); }
.pill.done { background: var(--c-success-soft); color: var(--c-success); }
.pill.sm { height: 28px; font-size: var(--fs-xs); padding: 0 10px; }
.pill:disabled { cursor: default; opacity: .75; }
/* 읽기 전용 목록의 상태는 고를 수 없다 — 셀렉트 모양이면 안 된다 */
.pill.static { display: inline-flex; align-items: center; cursor: default; }
/* 기한은 언제나 같은 모양. 색만 상태에 따라 바뀐다 */
.due {
  font-size: var(--fs-xs); line-height: 22px; white-space: nowrap; padding: 0 8px; border-radius: var(--r-xs); font-variant-numeric: tabular-nums;
  background: var(--c-soft); color: var(--c-muted); font-weight: 600;
}
.due.overdue { background: var(--c-danger-soft); color: var(--c-danger); }
.due.overdue::before { content: "! "; }
.due.today { background: var(--c-warning-soft); color: var(--c-warning); }
.due.none { background: transparent; border: 1px dashed var(--c-line); }
.due.closed { background: transparent; color: var(--c-muted); }
/* 상태 안내지 버튼이 아니다 — 테두리를 주면 눌러야 할 것처럼 보인다 */
.auto-mark { font-size: var(--fs-xs); line-height: 18px; color: var(--c-muted); white-space: nowrap; }
.auto-mark { font-style: italic; }
.today-btn.in { background: var(--c-soft); color: var(--c-muted); }
.today-btn.auto { background: var(--c-accent-soft); border-color: transparent; color: var(--c-accent); }
/* API 메서드 · 응답 코드 */
.badge.resp-2 { background: var(--c-success-soft); color: var(--c-success); }
.badge.resp-4, .badge.resp-5 { background: var(--c-danger-soft); color: var(--c-danger); }
.badge.pr-merged { background: var(--c-violet-soft); color: var(--c-violet); }
.badge.pr-open { background: var(--c-info-soft); color: var(--c-info); }
.badge.pr-closed { background: var(--c-soft); color: var(--c-muted); }
.badge.pr-draft { background: transparent; color: var(--c-muted); box-shadow: inset 0 0 0 1px var(--c-line); }
/* CI 결과: 점 + 글자, 누르면 GitHub 체크 화면. 색만으로 말하지 않는다 */
.ci {
  display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: var(--r-xs); font-size: var(--fs-xs);
  line-height: 18px; font-weight: 700; text-decoration: none; background: var(--c-warning-soft); color: var(--c-warning);
}
.ci::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ci.ci-success { background: var(--c-success-soft); color: var(--c-success); }
.ci.ci-failure { background: var(--c-danger-soft); color: var(--c-danger); }
.ci.ci-pending::before { background: transparent; border: 1.5px solid currentColor; }
.review-sum { font-size: var(--fs-xs); color: var(--c-muted); white-space: nowrap; }
/* 릴리스: 태그 칩(로드맵 막대 옆·선반 띠). 사전 배포는 점선 */
.release-chip {
  display: inline-flex; align-items: baseline; gap: 4px; padding: 1px 8px; border-radius: var(--r-xs);
  font-family: var(--f-mono); font-size: var(--fs-xs); line-height: 20px; background: var(--c-surface);
  color: var(--c-ink); text-decoration: none; box-shadow: inset 0 0 0 1px var(--c-line);
}
.release-chip:hover { box-shadow: inset 0 0 0 1px var(--c-accent); }
.release-chip.pre { box-shadow: inset 0 0 0 1px var(--c-line); border: 1px dashed var(--c-faint); }
.release-chip .muted { font-family: var(--f-body); }
.release-strip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); background: var(--c-surface); }
/* 연동 상태(Discord·GitHub 공용): 점 + 글자. 색만으로 구분하지 않는다 */
.conn { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.conn-state {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border-radius: var(--r-xs);
  font-size: var(--fs-xs); line-height: 20px; font-weight: 700; white-space: nowrap; background: var(--c-soft); color: var(--c-muted);
}
.conn-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.conn-state.on { background: var(--c-success-soft); color: var(--c-success); }
.conn-state.warn { background: var(--c-warning-soft); color: var(--c-warning); }
.conn-state.bad { background: var(--c-danger-soft); color: var(--c-danger); }
.conn-state.off::before { background: transparent; border: 1.5px dashed currentColor; }

/* ---- 10. 지표 · 타일 · 진행 막대 ---- */
.stats { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); }
.stat {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 0; border: 0; background: none;
  color: var(--c-ink); text-decoration: none; cursor: pointer;
}
.stat b { font-family: var(--f-display); font-weight: 400; font-size: var(--fs-h2); line-height: 1.2; font-variant-numeric: tabular-nums; }
.stat span { font-size: var(--fs-sm); color: var(--c-muted); }
.tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-3); }
.tiles.five { grid-template-columns: repeat(5, 1fr); }
.tile {
  display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-5); background: var(--c-surface);
  border: 1px solid var(--c-line); border-radius: var(--r-md); color: var(--c-ink); text-decoration: none; text-align: left;
}
.tile b { font-family: var(--f-display); font-weight: 400; font-size: var(--fs-stat); line-height: 1.15; font-variant-numeric: tabular-nums; }
.tile span { font-size: var(--fs-sm); color: var(--c-ink); opacity: .8; }
.tile b.danger, .tile.danger b { color: var(--c-danger); }
/* 지표 색면은 의미로만: 첫 칸(대표 지표)만 세이지, 위험 수치는 코랄, 나머지는 바탕색 */
.tiles .tile { background: var(--c-soft); border-color: transparent; }
.tiles .tile:first-child { background: var(--c-sage); }
.tiles .tile:has(b.danger) { background: var(--c-coral); }
.tiles .tile:has(b.danger) b { color: var(--c-ink); } /* 코랄 위 위험색 글자는 4.3:1이라 잉크로. 위험은 색면+라벨로 읽힌다 */
.project-kpis:focus-visible, .org-kpis:focus-visible, .table-scroll:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; border-radius: var(--r-md); }
.bar { height: 8px; border-radius: var(--r-pill); background: var(--c-fill); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--c-accent); border-radius: inherit; transform-origin: left; animation: grow var(--dur-slow) var(--ease-out); }
.bar i.over { background: var(--c-danger); }

/* ---- 11. 빈 상태 ---- */
.empty {
  list-style: none; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-6) var(--sp-4);
  text-align: center; color: var(--c-muted); font-size: var(--fs-sm); border: 1px dashed var(--c-line); border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--c-soft) 45%, transparent);
}
.empty::before {
  content: ""; width: 76px; height: 76px; background: var(--art-plant) center / contain no-repeat;
}
.empty.compact { flex-direction: row; justify-content: flex-start; padding: var(--sp-2) 0; border: 0; background: none; text-align: left; }
.empty.compact::before { content: none; }
/* 빈 상태 부품(templates/_empty.html): 무엇이 비었나(잉크) → 가치 한 줄(보조) → 행동 하나 */
.empty > p { margin: 0; max-width: 52ch; }
.empty .empty-what { color: var(--c-ink); font-size: var(--fs-md); font-weight: 600; }
.empty > .btn { margin-top: var(--sp-1); }
.empty.compact { flex-wrap: wrap; align-items: baseline; }
td.empty-cell { padding: var(--sp-6) var(--sp-3); text-align: center; color: var(--c-muted); }
td.empty-cell::before { content: ""; display: block; width: 52px; height: 52px; margin: 0 auto var(--sp-2); background: var(--art-plant) center / contain no-repeat; }

/* ---- 12. 표 ---- */
table.grid { width: 100%; border-collapse: separate; border-spacing: 0; }
table.grid th, table.grid td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--c-line); vertical-align: top; }
table.grid th { font-size: var(--fs-xs); font-weight: 700; color: var(--c-muted); background: var(--c-soft); letter-spacing: .02em; }
table.grid th:first-child { border-radius: var(--r-md) 0 0 var(--r-md); }
table.grid th:last-child { border-radius: 0 var(--r-md) var(--r-md) 0; }
table.grid thead th { border-bottom: 0; }
table.grid tbody tr:hover td { background: color-mix(in srgb, var(--c-soft) 50%, transparent); }
table.grid .num { text-align: right; font-variant-numeric: tabular-nums; }
table.grid code { overflow-wrap: anywhere; }
.member-skills-cell { min-width: 300px; }
.member-skills-form { flex-wrap: nowrap; }
.member-skills-input { width: 220px; min-width: 200px; max-width: 220px; flex: 0 1 220px; }
/* position: relative — 안쪽 .sr-only(절대 위치) 라벨이 페이지 폭을 넓히지 않고 표 스크롤 안에 머물게 한다 */
.table-scroll { position: relative; max-width: 100%; overflow-x: auto; }
.table-scroll-hint { display: none; }
/* 조직 설정 → 구성원 정보 항목 표: 폼 640px 제한을 풀고 칸마다 최소 폭을 줘 형식 선택값이 잘리지 않게 한다 */
#member-info form.stack { max-width: none; }
.member-fields-table td:first-child .input { width: 72px; }
.member-fields-table .select { min-width: 128px; }
.member-fields-table td:nth-child(2) .input, .member-fields-table td:nth-child(5) .input, .member-fields-table .textarea { min-width: 180px; }

/* ---- 13. 대화상자 ---- */
/* 공용 확인 창(base.html #confirm, app.js askConfirm): 결과 문장 하나 + [행동] [그대로 두기] */
#confirm { max-width: 440px; padding: var(--sp-6); }
#confirm p { margin: 0 0 var(--sp-5); font-size: var(--fs-md); line-height: 1.6; }
#confirm .row { justify-content: flex-end; flex-wrap: wrap; }
dialog {
  width: calc(100% - 32px); max-width: 640px; max-height: calc(100vh - 64px); overflow: auto; padding: var(--sp-6) var(--sp-8);
  border: 0; border-radius: var(--r-xl); background: var(--c-surface); color: var(--c-ink); box-shadow: var(--sh-pop);
}
dialog[open] { animation: rise var(--dur-base) var(--ease-out); }
dialog::backdrop { background: var(--scrim); }
dialog h2 { font-family: var(--f-display); font-weight: 400; font-size: var(--fs-2xl); }
/* 긴 폼에서 저장 버튼이 스크롤 아래로 사라지지 않게 */
dialog form.stack > .row:last-child {
  position: sticky; bottom: -24px; margin: 0 -32px -24px; padding: var(--sp-4) var(--sp-8);
  background: var(--c-surface); border-top: 1px solid var(--c-line);
}

/* ---- 14. 오늘 화면 (강) ---- */
/* 빈 영역(오류·빠른 추가가 없을 때)이 간격을 먹지 않게 행 간격 대신 아래 여백을 쓴다 */
.today-grid > *, #today-head > * { margin-bottom: var(--sp-6); }
.today-grid {
  display: grid; gap: 0 var(--sp-6); align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  grid-template-areas: "line line" "error error" "focus tally" "quick quick" "list schedule" "list .";
}
#today-head { display: contents; }
.today-grid > #quick { grid-area: quick; }
.today-grid > #quick:empty { display: none; }
.today-list-card { grid-area: list; }
.today-schedule-card { grid-area: schedule; }
.today-head-error { grid-area: error; }
.eyebrow { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em; }
.today-line { grid-area: line; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--sp-3); }
.today-line h1 { font-size: var(--fs-lg); font-weight: 700; }
.today-line p { font-size: var(--fs-sm); color: var(--c-muted); }
.tally {
  grid-area: tally; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--sp-3);
  align-self: stretch; padding: var(--sp-6); border-radius: var(--r-xl); background: var(--c-yellow); color: var(--c-on-yellow);
}
.tally h2 { font-size: var(--fs-lg); font-weight: 700; }
.tally-main { display: flex; align-items: baseline; gap: var(--sp-2); text-decoration: none; color: inherit; }
.tally-main b { font-family: var(--f-display); font-weight: 400; font-size: var(--fs-tally); line-height: 1; }
.tally-badge {
  position: absolute; right: 22px; top: 22px; width: 78px; height: 78px; border-radius: 50%;
  border: 2px dashed color-mix(in srgb, var(--c-on-yellow) 45%, transparent); display: grid; place-items: center;
}
.tally-badge .art-ink-soft { fill: color-mix(in srgb, var(--c-on-yellow) 55%, transparent); }
.tally-badge svg { width: 34px; height: 34px; animation: twinkle 2.4s ease-in-out 2; }
.tally .stat { color: var(--c-on-yellow); }
.tally .stats { gap: var(--sp-2) var(--sp-5); margin-top: auto; }
.tally .stat span { color: inherit; opacity: .85; }
.tally-scope { font-size: var(--fs-xs); font-weight: 600; opacity: .8; }
.focus-memo { grid-area: focus; display: flex; flex-direction: column; gap: var(--sp-3); margin-top: 6px; min-height: 0; }
.focus-memo h2 { font-family: var(--f-display); font-weight: 400; font-size: var(--fs-2xl); line-height: 1.3; }
.focus-memo .meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: var(--fs-sm); }
.focus-memo .badge, .focus-memo .due { background: color-mix(in srgb, var(--c-surface) 55%, transparent); color: var(--c-ink); }
.today-focus-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.today-focus-actions .btn:not(.primary) { background: color-mix(in srgb, var(--c-surface) 70%, transparent); border-color: transparent; }
/* 지금 할 태스크가 없으면 왼쪽 칸이 비지 않게 지표가 한 줄을 다 쓴다 */
#today-head:not(:has(.focus-memo)) > .tally { grid-column: 1 / -1; }
/* 일정 칸을 닫으면 오른쪽 칸이 비지 않게 목록이 한 줄을 다 쓴다 */
.today-grid:not(:has(#today-schedule)) > #today-list { grid-column: 1 / -1; }
.me-member { flex: none; }
.filter-chip { pointer-events: none; }
.today-list-head { align-items: flex-start; }
.today-list-title { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.today-assigned-stats { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.today-assigned-stats a {
  display: inline-flex; align-items: baseline; gap: 5px; min-height: 36px; padding: 6px 14px;
  border-radius: var(--r-md); background: var(--c-soft); color: var(--c-ink); text-decoration: none;
}
.today-assigned-stats a:hover { background: var(--c-yellow); color: var(--c-on-yellow); }
/* 노란 면 위 보조 글자도 --c-on-yellow를 따른다 */
.today-assigned-stats a:hover span { color: inherit; }
.today-assigned-stats b { font-size: var(--fs-task); line-height: 20px; }
.today-assigned-stats span { font-size: var(--fs-sm); line-height: 19px; color: var(--c-muted); }
.today-done > summary { min-height: 44px; display: flex; align-items: center; gap: var(--sp-2); color: var(--c-muted); }
.today-done > summary::before { content: "✓"; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--c-sage); color: var(--c-ink); font-size: var(--fs-xs); }
.today-list-card, .today-schedule-card { scroll-margin-top: calc(var(--header-h) + 16px); }
.today-list-card:focus-visible, .today-schedule-card:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }
/* 달력 */
.cal-title { min-width: 96px; text-align: center; font-weight: 600; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-1); }
.cal a, .cal span {
  display: flex; flex-direction: column; align-items: center; justify-content: center; height: 44px;
  border: 1px solid transparent; border-radius: var(--r-md); font-size: var(--fs-sm); color: var(--c-ink); text-decoration: none;
}
.cal a:hover { background: var(--c-soft); }
.cal a.today { background: var(--c-accent); color: var(--c-on-accent); }
.cal a.sel { border-color: var(--c-accent); background: var(--c-accent-soft); }
.cal a small { font-size: var(--fs-2xs); color: var(--c-accent); }
.cal a.today small { color: var(--c-on-accent); }
.cal a.today.sel { border-color: var(--c-accent); background: var(--c-accent); color: var(--c-on-accent); box-shadow: inset 0 0 0 2px var(--c-surface); }

/* ---- 15. 태스크 행 · 목록 묶음 ---- */
ul.tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.task-row {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); align-items: center; justify-content: space-between;
  min-height: 76px; padding: 14px 4px; border-bottom: 1px solid var(--c-line); background: transparent; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
ul.tasks > .task-row:last-of-type { border-bottom: 0; }
.task-row:hover { background: color-mix(in srgb, var(--c-soft) 55%, transparent); }
.task-row:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; border-radius: var(--r-md); }
.task-row.selected { background: var(--c-accent-soft); box-shadow: inset 4px 0 0 var(--c-accent); border-radius: var(--r-md); }
.task-row .main { min-width: 0; flex: 1 1 240px; display: flex; flex-direction: column; gap: 3px; }
.task-row .proj { font-size: var(--fs-xs); line-height: 16px; color: var(--c-muted); }
/* 연결 프로젝트(IMPL-PLAN-11 §3.6): 행의 "↔ n"과 패널의 연결 칸 */
.task-row .linked-mark { color: var(--c-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.project-links { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; list-style: none; margin: 0; padding: 0; }
.project-links form { display: inline-flex; }
/* 상위·하위 태스크(IMPL-PLAN-12 §5): 행의 "↳ TASK-N"·"하위 n/m", 목록 보기의 하위 행 들여쓰기 */
.task-row .sub-of { color: var(--c-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.task-row .sub-count { font-variant-numeric: tabular-nums; }
.task-row button.sub-count { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.task-row.sub { margin-left: var(--sp-6); padding-left: var(--sp-3); border-left: 2px solid var(--c-line); }
.task-row .main > .bar { height: 6px; margin-top: var(--sp-1); }
.subtask-list { list-style: none; margin: 0; padding: 0; }
.subtask-list form, .sub-parent { display: inline-flex; align-items: center; }
.project-links .tag { display: inline-flex; align-items: center; gap: 4px; }
.task-row .title, .task-row .next { font-size: var(--fs-task); line-height: 23px; font-weight: 600; }
.task-row .has-next .title { font-size: var(--fs-md); font-weight: 500; }
.task-row.closed .title { text-decoration: line-through; text-decoration-color: var(--c-faint); font-weight: 500; color: var(--c-muted); }
.task-row .meta { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); align-items: center; font-size: var(--fs-sm); line-height: 19px; color: var(--c-muted); }
.task-row .actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; max-width: 100%; }
/* 링크 복사·오늘 목록 버튼·↑↓는 보조 행동 — 마우스가 있는 화면에서는 행에 손을 올리거나 초점이 있을 때만 보인다(터치는 항상) */
@media (pointer: fine) {
  .task-row [data-copy], .task-row .today-btn, .task-row .move-btn { opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
  .task-row:hover :is([data-copy], .today-btn, .move-btn), .task-row:focus-within :is([data-copy], .today-btn, .move-btn) { opacity: 1; }
  /* 보드 카드는 빈 자리를 남기지 않는다 */
  .board-track .task-row:not(:hover):not(:focus-within) .today-btn { display: none; }
}
.group { display: flex; flex-direction: column; gap: var(--sp-3); }
/* 묶음을 카드마다 쌓지 않고 한 장 안에서 구분선으로 나눈다(같은 카드 반복 금지) */
.group-stack { gap: 0; }
.group-stack > .group + .group { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--c-line); }
.group-stack > .group > h2 { font-family: var(--f-display); font-weight: 400; font-size: var(--fs-xl); }
.subgroup { display: flex; flex-direction: column; gap: var(--sp-2); }
.subgroup .head { display: flex; align-items: center; gap: var(--sp-3); font-weight: 700; }
.subgroup .bar { flex: 1; }
.subgroup.bare > .head { display: none; }
.project-templates > summary { margin-bottom: var(--sp-2); }
details > summary { cursor: pointer; font-weight: 600; }

/* ---- 16. 보드 · 결과 선반 ---- */
.board { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.board-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.board-guide { font-size: var(--fs-sm); line-height: 19px; color: var(--c-muted); }
.board-nav { display: flex; gap: 6px; flex: none; }
.board-nav .btn:disabled { opacity: .38; cursor: default; background: var(--c-surface); }
.board-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: var(--sp-4);
  min-width: 0; overflow-x: auto; overscroll-behavior-inline: contain; padding: 2px 2px 10px;
  scrollbar-width: thin; scrollbar-color: var(--c-faint) transparent;
}
/* 넓은 화면은 미완료 5열이 한 화면에 다 들어온다 — 막힘·일시정지 열이 잘리지 않게(b-workspace 중-9) */
@media (min-width: 1280px) {
  .board-track { grid-auto-columns: minmax(176px, 1fr); }
  .board-blocked-alert { display: none; }
}
.board-track:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; border-radius: var(--r-lg); }
.board .col {
  display: flex; flex-direction: column; gap: var(--sp-2); min-height: 260px; padding: 14px;
  border-radius: var(--r-xl); background: var(--c-soft); border: 2px solid transparent;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.board .col h3 { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-md); padding: 2px 4px 8px; }
.board .col h3 .muted { margin-left: auto; }
.col-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c-faint); flex: none; }
.col[data-status=doing] .col-dot { background: var(--c-sage-strong); }
.col[data-status=review] .col-dot { background: var(--c-yellow-strong); }
.col[data-status=todo] .col-dot { background: var(--c-accent); }
.col[data-status=blocked] .col-dot { background: var(--c-danger); }
.board .col[data-status=blocked], .board .col[data-status=paused] { background: transparent; border: 2px dashed var(--c-line); }
.board .col.over { border: 2px dashed var(--c-accent); background: var(--c-accent-soft); }
.col-empty { margin: auto 0; padding: var(--sp-5) 0; text-align: center; font-size: var(--fs-xs); color: var(--c-muted); }
.board-track ul.tasks { gap: var(--sp-3); }
.board-track ul.tasks > .task-row {
  flex-direction: column; align-items: stretch; gap: var(--sp-3); min-height: 0; padding: var(--sp-4);
  border: 1px solid transparent; border-radius: var(--r-lg); background: var(--c-surface); box-shadow: var(--sh-1);
}
.board-track ul.tasks > .task-row:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.board-track ul.tasks > .task-row .main { flex: 0 0 auto; }
.board-track ul.tasks > .task-row .actions .pill { flex: 1 1 100%; }
.board-track ul.tasks > .task-row .actions form { flex: 1 1 100%; }
.board-track ul.tasks > .task-row .actions form .pill { width: 100%; border-radius: var(--r-sm); }
.task-row[draggable="true"] { cursor: grab; }
.task-row.dragging { opacity: .4; }
.shelf {
  position: relative; display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-2);
  padding: var(--sp-6); border-radius: var(--r-xl); background: color-mix(in srgb, var(--c-sage) 70%, var(--c-surface));
}
.shelf-head { display: flex; align-items: center; gap: var(--sp-5); }
.shelf-head h2 { font-size: var(--fs-h2); line-height: 1.3; }
.shelf-art { width: 108px; height: 66px; flex: none; }
.shelf-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.shelf-tabs .chip b { font-family: var(--f-display); font-weight: 400; font-size: var(--fs-lead); }
.shelf-filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.shelf-filters .select { border-radius: var(--r-md); }
.shelf-filters .input { flex: 1 1 220px; width: auto; border-radius: var(--r-md); }
.shelf-count b { font-weight: 700; }
.shelf-list { background: var(--c-surface); border-radius: var(--r-lg); padding: var(--sp-1) var(--sp-4); }
.shelf-list > .empty { margin: var(--sp-3) 0; }
.shelf-more { list-style: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-3) 0; border-top: 1px dashed var(--c-line); }

/* ---- 17. 프로젝트 화면 ---- */
.project-summary { gap: var(--sp-4); }
.project-summary-head { align-items: center; gap: var(--sp-3) var(--sp-6); }
.project-summary-copy { flex: 1 1 280px; gap: 6px; }
.project-meta { gap: 6px var(--sp-3); }
.project-task-surface { gap: var(--sp-4); }
.project-kpis, .org-kpis { gap: var(--sp-3); }
.view-switch { gap: var(--sp-1); padding: 4px; border-radius: var(--r-pill); background: var(--c-soft); }
.view-switch .btn { border-color: transparent; background: transparent; }
.view-switch .btn[aria-pressed="true"] { background: var(--c-surface); color: var(--c-ink); box-shadow: var(--sh-2); }
.links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
/* 프로젝트 달력 */
.pcal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sp-1); }
.pcal-dow { text-align: center; }
.pcal-cell { min-height: 96px; padding: 6px; border: 1px solid var(--c-line); border-radius: var(--r-md); display: flex; flex-direction: column; gap: 2px; min-width: 0; background: var(--c-surface); }
.pcal-cell.today { border-color: var(--c-accent); background: var(--c-accent-soft); }
.pcal-day { color: var(--c-muted); }
.pcal-wd { display: none; }
.pcal-ms { color: var(--c-accent); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcal-task { all: unset; box-sizing: border-box; cursor: pointer; padding: 2px 6px; border-radius: var(--r-sm); background: var(--c-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcal-task:hover, .pcal-task:focus-visible { background: var(--c-sage); outline: 2px solid var(--c-accent); }
.pcal-task.closed { color: var(--c-muted); background: var(--c-surface); text-decoration: line-through; }
.pcal-cell.is-empty { background: transparent; }

/* ---- 18. 상세 패널 ---- */
.panel {
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.panel-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.panel-status .pill { height: 36px; }
.panel-mobile-context { display: none; }
.panel-bar .status { flex: 1; font-size: var(--fs-sm); color: var(--c-muted); }
.panel-bar > a:first-child { margin-right: var(--sp-1); }
.panel .number { font-size: var(--fs-sm); color: var(--c-accent); font-weight: 650; letter-spacing: .05em; }
.panel .title-input {
  width: 100%; height: auto; padding: 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none;
  font-family: var(--f-display); font-weight: 400; font-size: var(--fs-h2); line-height: 1.3;
}
.panel .title-input:focus { box-shadow: none; border-bottom-color: var(--c-accent); }
/* 태스크 제목은 줄바꿈되는 칸(textarea). 내용만큼 높아진다 — 미지원 브라우저는 app.js가 높이를 맞춘다 */
.panel textarea.title-input { field-sizing: content; min-height: 0; resize: none; overflow: hidden; overflow-wrap: anywhere; }
.panel .meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); align-items: center; font-size: var(--fs-sm); color: var(--c-muted);
  padding: var(--sp-3); border-radius: var(--r-lg); background: var(--c-soft);
}
.panel .meta .select { height: 36px; width: auto; padding: 0 10px; font-size: var(--fs-xs); border-radius: var(--r-md); }
.panel .meta .pill.sm { height: 36px; }
/* 패널 메타: 보이는 라벨 | 값 2열 목록(라벨을 placeholder·옵션 문구에 끼워 넣지 않는다) */
.panel .meta.panel-meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--sp-2) var(--sp-4); align-items: center; }
.panel-meta .meta-item { display: contents; }
.panel-meta .meta-label { font-size: var(--fs-sm); font-weight: 600; color: var(--c-muted); }
.panel-meta .meta-value { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; min-width: 0; color: var(--c-ink); }
.panel-meta .meta-wide { grid-column: 1 / -1; }
.panel-meta .due-value { font-weight: 600; font-variant-numeric: tabular-nums; }
.panel-meta .due-value.danger { color: var(--c-danger); }
/* 접히는 묶음(2단·3단). 머리에 개수를 붙인다 */
.panel-folds > .fold, .panel-folds > .git-fold { border-top: 1px solid var(--c-line); padding-top: var(--sp-3); }
.fold > summary { display: flex; align-items: center; gap: var(--sp-2); min-height: 36px; font-size: var(--fs-md); }
.fold[open] > summary { margin-bottom: var(--sp-2); }
.panel-body > .stack { gap: var(--sp-4); }
.panel textarea { min-height: 88px; }
.section { display: flex; flex-direction: column; gap: var(--sp-2); }
.section > .label { font-size: var(--fs-sm); font-weight: 700; color: var(--c-ink); display: flex; align-items: center; gap: 6px; }
.section > .label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-sage-strong); }
.stop-box { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); background: var(--c-coral); border-radius: var(--r-lg); }
.due-block .value { font-size: var(--fs-lead); line-height: 26px; font-weight: 600; }
.task-due-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-2) var(--sp-3); }
.task-due-row > .label, .task-due-row > #extend-form, .task-due-row > form { grid-column: 1 / -1; }
.task-due-row > .btn.link { min-height: 32px; padding: 0 var(--sp-2); font-size: var(--fs-sm); }
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.checklist li { display: flex; align-items: center; gap: var(--sp-2); }
.checklist li .text { flex: 1; }
.checklist li.done .text { text-decoration: line-through; color: var(--c-muted); }
.checklist .btn.icon { width: 36px; height: 36px; font-size: var(--fs-sm); }
.notes { min-height: 120px; }
.history { list-style: none; margin: var(--sp-2) 0 0; padding: 0 0 0 var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-sm); border-left: 2px solid var(--c-line); }
.history .who { color: var(--c-muted); }
.git-fold > summary { font-size: var(--fs-sm); color: var(--c-muted); font-weight: 600; }
/* 표 안에서 펼치는 폼: 접힌 동안은 버튼 하나로만 보인다 */
.link-fold > summary { list-style: none; display: inline-flex; }
.link-fold > summary::-webkit-details-marker { display: none; }
.link-fold[open] > summary { display: none; }
.git-steps { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.git-steps > li { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: var(--fs-sm); }
.git-steps .dot { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: var(--fs-2xs); color: var(--c-muted); border: 1px solid var(--c-line); flex: none; }
.git-steps > li.progress .dot { background: var(--c-yellow); color: var(--c-on-yellow); border-color: transparent; }
.git-steps > li.done .dot { background: var(--c-sage-strong); color: var(--c-surface); border-color: transparent; }
.git-commits { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-1); }
.decision-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.decision-record { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-3) var(--sp-4); border-left: 3px solid var(--c-sage-strong); background: var(--c-soft); border-radius: 0 var(--r-md) var(--r-md) 0; }

/* ---- 19. 부하 현황 · 로드맵 · 의존 ---- */
.load-row {
  display: grid; grid-template-columns: 140px minmax(140px, 1fr) 180px 50px;
  grid-template-areas: "name meter tags verdict"; gap: var(--sp-3) var(--sp-4); align-items: center;
  padding: 14px var(--sp-4); border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface);
}
.load-row .name { grid-area: name; overflow-wrap: anywhere; font-size: var(--fs-lg); font-weight: 600; color: var(--c-ink); text-decoration: none; }
.load-meter { grid-area: meter; }
.load-tags { grid-area: tags; justify-content: flex-end; }
.load-tags .tag { max-width: 100%; overflow-wrap: anywhere; }
.load-verdict { grid-area: verdict; justify-self: end; }
.tl-head, .tl-row { display: flex; gap: var(--sp-3); align-items: center; padding: 10px 0; border-bottom: 1px solid var(--c-line); }
.tl-name { flex: 0 0 220px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tl-track { flex: 1; min-width: 0; position: relative; height: 28px; display: grid; grid-template-columns: repeat(3, 1fr); font-size: var(--fs-xs); color: var(--c-muted); }
.tl-head .tl-track { height: 42px; align-items: end; }
.tl-today { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed var(--c-accent); }
.tl-today-label > span { position: absolute; top: 0; left: 4px; color: var(--c-accent); font-size: var(--fs-xs); white-space: nowrap; }
.tl-bar { position: absolute; top: 4px; height: 20px; border-radius: var(--r-pill); background: var(--c-sage); overflow: hidden; }
.tl-bar.planned { background: var(--c-soft); border: 1px dashed var(--c-faint); }
.tl-bar i { display: block; height: 100%; background: var(--c-sage-strong); }
.dependency-row {
  display: grid; grid-template-columns: minmax(220px, auto) minmax(160px, 1fr) auto auto;
  grid-template-areas: "route note status actions"; gap: 10px var(--sp-4); align-items: center;
  padding: var(--sp-3) var(--sp-4); border: 1px solid var(--c-line); border-radius: var(--r-lg);
}
.dependency-route { grid-area: route; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--sp-2); align-items: center; }
.dependency-project { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.dependency-arrow { flex: none; }
.dependency-note { grid-area: note; min-width: 0; overflow-wrap: anywhere; }
.dependency-status { grid-area: status; justify-self: start; }
.dependency-actions { grid-area: actions; justify-self: end; }
.dependency-form { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); align-items: center; }
.dependency-form-route { display: grid; grid-template-columns: minmax(140px, 1fr) auto minmax(140px, 1fr); gap: var(--sp-2); align-items: center; flex: 2 1 380px; min-width: 0; }
.dependency-form-note { flex: 1 1 220px; min-width: 0; }
.dependency-form-actions { display: flex; align-items: center; gap: var(--sp-2); flex: none; }

/* ---- 20. 회의록 · 문서 편집기 ---- */
.notes-columns { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: flex-start; }
.notes-columns > .list { flex: 1 1 280px; max-width: 360px; min-width: 0; }
.notes-columns > .note-editor-card { flex: 9999 1 480px; min-width: 0; }
.notes-columns > #files { flex: 1 1 100%; }
.note-audio-upload { display: flex; flex-direction: column; gap: 6px; }
.note-audio-upload > .label { font-size: var(--fs-sm); color: var(--c-muted); font-weight: 600; }
.note-audio-upload .input { flex: 1 1 260px; min-width: 0; max-width: 420px; }
.note-audio-upload #note-audio-help { flex: 1 1 240px; min-width: 0; }
.note-editor-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--sp-3); min-height: 28px; }
.note-back { display: none; }
.note-save-status {
  display: inline-flex; align-items: center; min-height: 28px; padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--c-success-soft); color: var(--c-success); font-size: var(--fs-xs); line-height: 18px; font-weight: 600;
}
.note-save-status[data-state="saving"] { background: var(--c-accent-soft); color: var(--c-accent); }
.note-save-status[data-state="pending"] { background: var(--c-warning-soft); color: var(--c-warning); }
.note-save-status[data-state="error"] { background: var(--c-danger-soft); color: var(--c-danger); }
.note-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-3); align-items: end; }
.note-meta-field { display: flex; min-width: 0; flex-direction: column; gap: 6px; font-size: var(--fs-sm); color: var(--c-muted); }
.note-meta-field > .input, .note-meta-field > .select { width: 100%; color: var(--c-ink); }
.note-author-value { min-width: 0; min-height: 44px; display: flex; align-items: center; overflow-wrap: anywhere; color: var(--c-ink); }
/* 회의 정보는 접어 두고 한 줄 요약만 보인다 — 모바일에서 본문이 먼저 오게 */
.note-meta-box > summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); min-height: 32px; list-style: none; cursor: pointer; }
.note-meta-box > summary::-webkit-details-marker { display: none; }
.note-meta-box[open] > summary { margin-bottom: var(--sp-3); }
/* 목록 항목은 링크지만 문장 속 링크가 아니다 — 밑줄·링크색이면 카드가 글처럼 읽힌다 */
.note-item {
  display: flex; flex-direction: column; gap: var(--sp-1); padding: 14px var(--sp-4); border: 1px solid var(--c-line); border-radius: var(--r-lg);
  background: var(--c-surface); text-align: left; cursor: pointer; color: var(--c-ink); text-decoration: none;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.note-item:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
/* 문서 트리(IMPL-PLAN-11 D2). 하위 문서는 들여쓰고 접고 편다 */
.doc-tree { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.doc-tree .doc-tree { padding-left: var(--sp-4); border-left: 1px solid var(--c-line); margin-left: var(--sp-2); }
.doc-tree summary { display: flex; align-items: center; gap: var(--sp-1); font-weight: 400; list-style: none; cursor: pointer; }
.doc-tree summary::-webkit-details-marker { display: none; }
/* 펴고 접는 손잡이: 링크 왼쪽의 작은 삼각형(링크를 누르면 문서로 이동) */
.doc-tree summary::before, .note-meta-box > summary::before { content: ""; flex: none; width: 16px; height: 16px; background: var(--c-muted); clip-path: polygon(35% 25%, 72% 50%, 35% 75%); transition: transform var(--dur-fast) var(--ease); }
.doc-tree details[open] > summary::before, .note-meta-box[open] > summary::before { transform: rotate(90deg); }
.doc-node { display: inline-flex; min-height: 32px; align-items: center; padding: 2px var(--sp-2); border-radius: var(--r-sm); color: var(--c-ink); text-decoration: none; }
.doc-node.leaf { margin-left: 20px; } /* 손잡이(16px)+간격만큼 */
.doc-node:hover { background: var(--c-soft); }
.doc-node.sel { background: var(--c-accent-soft); color: var(--c-accent); font-weight: 600; }
.doc-path a { color: var(--c-muted); }
.doc-extras { margin-top: var(--sp-4); display: flex; flex-direction: column; }
.doc-extras > details { padding: var(--sp-3) 0; border-top: 1px solid var(--c-line); }
.doc-extras > details > summary { min-height: 32px; display: flex; align-items: center; gap: var(--sp-2); }
.plain-list, .doc-extras ul.plain { list-style: none; margin: var(--sp-2) 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.revision-body { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 320px; overflow: auto; padding: var(--sp-3); background: var(--c-soft); border-radius: var(--r-sm); font-family: var(--f-mono); font-size: var(--fs-sm); }
.note-item.sel { border-color: var(--c-accent); box-shadow: inset 4px 0 0 var(--c-accent); }
/* Markdown 본문(doc-tiptap.js): 문서·회의록 편집기(.md-editor)와 읽기 전용(.md-view, 이슈·거버넌스)이 같은 모양이다.
   글줄은 읽기 좋은 폭(72자)에서 끊고, 표·코드는 본문 폭을 다 쓰되 넘치면 그 블록 안에서만 가로로 민다. */
.md { min-width: 0; }
.md .ProseMirror { outline: none; font-size: var(--fs-task); line-height: 1.75; color: var(--c-ink); overflow-wrap: anywhere; word-break: keep-all; }
.md .ProseMirror > :not(.tableWrapper):not(table):not(pre) { max-width: 72ch; }
.md .ProseMirror > * + * { margin-top: var(--sp-3); }
.md .ProseMirror > :first-child { margin-top: 0; }
.md p { margin: 0; text-wrap: pretty; }
.md h1, .md h2 { font-family: var(--f-display); font-weight: 400; line-height: 1.3; text-wrap: balance; }
.md h1 { font-size: var(--fs-h2); margin-top: var(--sp-8); }
.md h2 { font-size: var(--fs-h3); margin-top: var(--sp-6); padding-bottom: var(--sp-1); border-bottom: 1px solid var(--c-line); }
.md h3 { font-size: var(--fs-lead); line-height: 1.5; font-weight: 700; margin-top: var(--sp-5); }
.md h4, .md h5, .md h6 { font-size: var(--fs-task); font-weight: 700; margin-top: var(--sp-4); }
.md a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 2px; }
.md strong { font-weight: 700; }
.md blockquote { margin: 0; padding: var(--sp-1) 0 var(--sp-1) var(--sp-4); border-left: 3px solid var(--c-sage-strong); color: var(--c-muted); }
.md hr { border: 0; border-top: 1px dashed var(--c-line); margin: var(--sp-6) 0; }
.md img { display: block; max-width: 100%; height: auto; border-radius: var(--r-md); }
.md img.ProseMirror-selectednode { outline: 3px solid var(--c-accent-soft); }
.md ul, .md ol { margin: 0; padding-left: var(--sp-6); }
.md li + li { margin-top: var(--sp-1); }
.md li > p { margin: 0; }
.md li > ul, .md li > ol { margin-top: var(--sp-1); }
/* 코드: 인라인은 6px(--r-xs), 블록은 12px 면. 블록은 줄을 접지 않고 블록 안에서 가로로 민다 */
.md code { font-family: var(--f-mono); font-size: .9em; background: var(--c-soft); border-radius: var(--r-xs); padding: 1px 5px; }
.md .ProseMirror pre, .md pre { margin-left: 0; margin-right: 0; padding: 12px 14px; overflow-x: auto; background: var(--c-soft); border: 1px solid var(--c-line); border-radius: var(--r-md); white-space: pre; overflow-wrap: normal; word-break: normal; }
.md pre code { padding: 0; background: none; font-size: var(--fs-sm); line-height: 20px; }
.md pre.tt-html { font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--c-muted); background: var(--c-bg); border-style: dashed; white-space: pre-wrap; }
.md .tt-html-inline { font-family: var(--f-mono); font-size: .85em; color: var(--c-muted); } /* 문장 속 HTML 태그: 실행하지 않고 원문 글자로 */
/* 체크리스트: 완료는 보조색+취소선(투명도 금지, DESIGN.md 7장) */
.md ul[data-type="taskList"] { list-style: none; padding-left: 0; }
.md ul[data-type="taskList"] > li { display: flex; gap: var(--sp-2); align-items: flex-start; }
.md ul[data-type="taskList"] > li > label { flex: none; display: flex; align-items: center; height: 1.75em; }
.md ul[data-type="taskList"] > li > label input { width: 16px; height: 16px; margin: 0; accent-color: var(--c-accent); cursor: pointer; }
.md ul[data-type="taskList"] > li > div { flex: 1; min-width: 0; }
.md ul[data-type="taskList"] > li[data-checked="true"] > div > p { color: var(--c-muted); text-decoration: line-through; }
/* 표: table.grid와 같은 결 — 머리는 soft 면, 선은 line */
.md .tableWrapper { overflow-x: auto; }
.md table { border-collapse: collapse; font-size: var(--fs-md); line-height: 1.55; }
.md th, .md td { border: 1px solid var(--c-line); padding: 6px 10px; vertical-align: top; min-width: 80px; position: relative; overflow-wrap: normal; }
.md th { background: var(--c-soft); font-size: var(--fs-sm); font-weight: 700; text-align: left; }
.md td > p, .md th > p { margin: 0; }
.md .selectedCell::after { content: ""; position: absolute; inset: 0; background: var(--c-accent-soft); opacity: .5; pointer-events: none; }
.md .ProseMirror p.is-editor-empty:first-child::before { content: attr(data-placeholder); float: left; height: 0; color: var(--c-faint); pointer-events: none; }
.issue-markdown .ProseMirror { font-size: var(--fs-md); }

/* 편집기 */
.md-edit-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-3); }
.md-edit-row[hidden] { display: none; }
.md-editor { min-height: 200px; cursor: text; }
.md-editor.editing { cursor: auto; }
.md-editor.editing .ProseMirror { min-height: 320px; }
.md-editor.editing a { cursor: text; }
/* 예전 영상 문법 ![제목](영상 주소): 재생기 대신 새 탭 링크. 열 수 없는 그림 주소는 이름만 */
.md a.md-video { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 6px 12px; border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-soft); text-decoration: none; }
.md a.md-video::before { content: ""; width: 18px; height: 18px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='5' width='20' height='14' rx='3' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M10 9l5 3-5 3z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='5' width='20' height='14' rx='3' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M10 9l5 3-5 3z'/%3E%3C/svg%3E") center / contain no-repeat; }
.md .md-img-blocked { display: inline-block; padding: 2px 8px; border: 1px dashed var(--c-line); border-radius: var(--r-sm); color: var(--c-muted); font-size: var(--fs-sm); }
.md.small .ProseMirror { font-size: var(--fs-md); line-height: 1.6; }

/* 마크다운 긴 글 칸(md-field.js). 고정 제목·라벨은 칸 밖, 편집 영역은 늘 테두리 있는 칸.
   서식 줄은 초점이 있을 때만 보이고, 위치(위/아래)만 칸마다 다르다. 모든 버튼은 아이콘만(이름은 title·aria-label). */
.md-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: var(--fs-sm); color: var(--c-muted); font-weight: 600; }
.md-field > textarea, .md-field > .mdf { color: var(--c-ink); font-weight: 400; }
.mdf { position: relative; min-width: 0; border: 1px solid var(--c-line-strong); border-radius: var(--r-md); background: var(--c-surface); cursor: text;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.md-edit-row + .mdf { margin-top: var(--sp-3); }
.mdf:hover { border-color: var(--c-muted); }
.mdf.on { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-soft); }
.mdf.bad { border-color: var(--c-danger); }
.mdf-body, .mdf > .md-editor { padding: 10px 14px; }
.mdf-body.md .ProseMirror { font-size: var(--fs-md); line-height: 1.6; min-height: calc(1.6em * var(--rows, 3)); }
.mdf-body.md .ProseMirror > * + * { margin-top: var(--sp-2); }
/* 칸 안 제목은 칸 밖 고정 제목(Jua)보다 항상 작다 */
.mdf-body.md h1, .mdf-body.md h2 { font-family: var(--f-body); font-weight: 700; font-size: var(--fs-lg); line-height: 1.5; margin-top: var(--sp-4); padding: 0; border: 0; }
.mdf-body.md h3 { font-size: var(--fs-task); margin-top: var(--sp-3); }
/* 블록 손잡이(끌어 옮기기): 칸 안 왼쪽 여백(30px)에 선다 — 칸 밖으로 나가 레이아웃을 밀지 않는다.
   편집할 수 있을 때만(플러그인이 읽기 전용에서 숨긴다), 터치 기기에서는 숨긴다(키보드 대안 Alt+↑/↓). */
@media (pointer: fine) { .mdf-body, .mdf > .md-editor { padding-left: 30px; } }
.drag-handle { display: flex; align-items: center; justify-content: center; width: 20px; height: 24px; margin-right: 4px; border-radius: var(--r-xs);
  color: var(--c-faint); cursor: grab; }
.drag-handle:hover { background: var(--c-soft); color: var(--c-ink); }
.drag-handle[data-dragging="true"] { cursor: grabbing; }
.drag-handle svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
@media (pointer: coarse) { .drag-handle { display: none !important; } }
.mdf-cue { padding: 6px 14px; border-bottom: 1px dashed var(--c-line); font-size: var(--fs-xs); font-weight: 400; color: var(--c-muted); }
.mdf.on .mdf-cue { display: none; }
.mdf-bar { display: flex; align-items: center; gap: 2px; padding: 4px 6px; overflow: hidden; background: var(--c-surface); border-radius: 0 0 var(--r-md) var(--r-md); }
.mdf[data-toolbar="bottom"] .mdf-bar { border-top: 1px solid var(--c-line); }
.mdf[data-toolbar="top"] .mdf-bar { position: sticky; top: var(--header-h); z-index: var(--z-sticky); border-bottom: 1px solid var(--c-line); border-radius: var(--r-md) var(--r-md) 0 0; }
.mdf:not(.on) .mdf-bar { display: none; }
.mdf .mdf-bar .btn, .mdf .mdf-link .btn { flex: none; width: 32px; height: 32px; min-height: 0; min-width: 0; padding: 0; border-color: transparent; background: none; color: var(--c-muted); }
.mdf .mdf-bar .btn:hover, .mdf .mdf-link .btn:hover { background: var(--c-soft); color: var(--c-ink); }
.mdf .mdf-bar .btn[aria-pressed="true"] { background: var(--c-ink); color: var(--c-surface); }
.mdf .mdf-bar .btn[hidden] { display: none; }
.mdf .mdf-bar .more { margin-left: auto; }
.mdf svg:not(.ai-ico):not(.ai-spin) { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mdf-link { display: flex; align-items: center; gap: var(--sp-1); padding: 2px 6px 2px 14px; min-width: 0; font-weight: 400; border-top: 1px dashed var(--c-line); }
.mdf-link[hidden] { display: none; }
.mdf-link .mdf-href { flex: 1; min-width: 0; color: var(--c-accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mdf-menu { position: fixed; z-index: var(--z-dropdown); min-width: 200px; padding: var(--sp-1); display: flex; flex-direction: column;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: var(--sh-pop); cursor: auto; }
.mdf-menu[hidden] { display: none; }
.mdf-menu button { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: var(--sp-3); padding: 8px 12px; border-radius: var(--r-sm);
  font-size: var(--fs-sm); color: var(--c-ink); cursor: pointer; }
.mdf-menu button:hover, .mdf-menu button:focus-visible { background: var(--c-soft); }
.mdf-menu button:focus-visible { outline: 3px solid var(--c-accent); outline-offset: -3px; }
.mdf-menu kbd { color: var(--c-muted); font-family: var(--f-mono); font-size: var(--fs-xs); }
.issue-markdown { margin-top: var(--sp-2); }
.issue-body { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---- 21. API 문서 ---- */

/* ---- 22. 설정 ---- */
.settings-heading { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--sp-2) var(--sp-4); }
.settings-heading > div { display: flex; flex-direction: column; gap: 2px; }
.settings-scope-note { max-width: none; }
.settings-form { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.settings-tabs ~ .card form.stack { max-width: 560px; }
.settings-jump { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.settings-jump .chip span { color: var(--c-muted); font-size: var(--fs-xs); }
/* 설정 페이지 레이아웃(DESIGN.md 3.1): 페이지 폭을 채우되 입력이 끝까지 늘어나지 않게.
   왼쪽은 섹션 목차(고정·현재 위치 표시), 오른쪽은 넓은 본문. 행은 '라벨·도움말 | 입력 | 잠금' 3단 */
.settings-form.with-nav, .settings-split {
  display: grid; grid-template-columns: minmax(180px, 220px) minmax(0, 1fr); gap: var(--sp-6); align-items: start;
}
.settings-main { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.with-nav > .settings-jump, .settings-split > .settings-jump {
  position: sticky; top: calc(var(--header-h) + var(--sp-4)); flex-direction: column; flex-wrap: nowrap; gap: 2px;
  padding: var(--sp-2); border-radius: var(--r-lg); background: var(--c-soft);
}
.with-nav > .settings-jump .chip, .settings-split > .settings-jump .chip {
  justify-content: space-between; height: 40px; border-color: transparent; background: transparent; border-radius: var(--r-md);
}
.with-nav > .settings-jump .chip:hover, .settings-split > .settings-jump .chip:hover { background: var(--c-surface); }
.settings-jump .chip[aria-current="true"] { background: var(--c-surface); font-weight: 700; box-shadow: var(--sh-1); }
/* 개인 환경설정: 그룹이 짧아 넓은 화면에서는 나란히 둔다 */
.settings-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(520px, 100%), 1fr)); gap: var(--sp-5) var(--sp-8); align-items: start; }
.personal-settings-group + .personal-settings-group { margin-top: 0; }
/* 카드 몇 장짜리 설정(프로필 등): 넓으면 2~3열 */
/* 하나의 일을 하는 독립 폼 페이지(새 요청·조직 만들기): 읽기 폭의 카드를 가운데에 */
.form-card { width: 100%; max-width: 760px; margin-inline: auto; }
.form-card form.stack { max-width: none; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: var(--sp-6); align-items: start; }
/* 프로필: 연결은 한 줄씩 세로로(로고·이름 | 상태 | 버튼), 개인정보 동의는 작은 상태 줄, 탈퇴는 맨 아래 버튼 하나 → 하위 화면 */
.link-list { display: flex; flex-direction: column; }
.link-item { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.link-item + .link-item { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--c-line); }
.link-item > p { margin: 0; }
.link-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.link-head > h3 { margin: 0; min-width: 80px; font-size: var(--fs-task); }
.link-head > h3 > .brand-icon { margin-inline-end: .3em; }
.link-head > .link-action { margin-left: auto; }
.consent-states { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.consent-states > li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); padding: var(--sp-2) 0; }
.consent-states > li + li { border-top: 1px solid var(--c-line); }
.consent-name { min-width: 140px; font-weight: 600; }
.consent-states .consent-action { margin-left: auto; }
.consent-note { flex-basis: 100%; }
.profile-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-5); margin-top: var(--sp-6); }
.consent-mini { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-4); color: var(--c-muted); }
.consent-mini .conn-state { margin-left: 2px; }
.settings-subnav { margin-bottom: var(--sp-4); }
.settings-save-bar {
  position: sticky; top: calc(var(--header-h) + 8px); z-index: var(--z-sticky); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4); border: 1px solid var(--c-line); border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--c-surface) 94%, transparent); box-shadow: var(--sh-2); backdrop-filter: blur(12px);
}
.settings-save-hint { color: var(--c-muted); font-size: var(--fs-sm); line-height: 19px; }
.personal-settings-group, .settings-section { min-width: 0; }
.personal-settings-group { display: flex; flex-direction: column; gap: var(--sp-2); }
.settings-group-title { display: flex; align-items: baseline; gap: 6px; font-size: var(--fs-task); line-height: 22px; }
.settings-section { border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); scroll-margin-top: 150px; }
details.card.settings-section { padding: 0; gap: 0; }
.settings-section-summary {
  display: flex; align-items: center; gap: var(--sp-2); min-height: 60px; padding: 14px var(--sp-5);
  list-style: none; cursor: pointer; font-size: var(--fs-lg); line-height: 24px; font-weight: 700;
}
.settings-section-summary::-webkit-details-marker { display: none; }
.settings-section-summary:focus-visible { outline-offset: -3px; border-radius: var(--r-lg); }
.settings-section-summary > .muted { margin-left: auto; font-weight: 500; }
.settings-section-summary::after { content: "⌄"; color: var(--c-muted); transition: transform var(--dur-fast) var(--ease); }
.settings-section[open] > .settings-section-summary { border-bottom: 1px solid var(--c-line); }
.settings-section[open] > .settings-section-summary::after { transform: rotate(180deg); }
.settings-section-body { padding: 0 var(--sp-5) var(--sp-4); }
.settings-list { display: flex; flex-direction: column; border-top: 1px solid var(--c-line); }
.settings-section-body > .settings-list { border-top: 0; }
/* 조직 설정 셸(IMPL-PLAN-14 §2, 시안 A): 왼쪽 세로 탭(나 / 조직 관리) + 본문. ≤700px는 탭 목록 화면 → 탭 화면 */
.settings-shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
.settings-shell > .settings-tabs {
  position: sticky; top: calc(var(--header-h) + var(--sp-4)); display: flex; flex-direction: column; gap: 2px;
  padding: var(--sp-2); border-radius: var(--r-lg); background: var(--c-soft);
}
.settings-tabs-group { padding: var(--sp-3) var(--sp-3) var(--sp-1); color: var(--c-muted); font-size: var(--fs-xs); font-weight: 700; }
.settings-tabs-group:first-child { padding-top: var(--sp-1); }
.settings-tab {
  display: flex; align-items: center; gap: var(--sp-2); min-height: 40px; padding: 0 var(--sp-3);
  border-radius: var(--r-md); color: var(--c-ink); text-decoration: none;
}
.settings-tab:hover { background: var(--c-surface); }
.settings-tab[aria-current="page"] { background: var(--c-surface); font-weight: 700; box-shadow: var(--sh-1); }
.settings-tab .badge { margin-left: auto; }
.settings-tab-go { display: none; margin-left: auto; color: var(--c-muted); }
.settings-body { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.settings-body-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
.settings-back { display: none; }
/* 내 정보 */
.me-preview { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-lg); background: var(--c-sage); }
.me-preview .initial {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 50%; background: var(--c-surface); font-size: var(--fs-lg); font-weight: 700;
}
.me-preview strong { font-size: var(--fs-lg); }
.me-names { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--sp-4) var(--sp-6); align-items: start; }
/* 내 정보 폼은 본문 폭을 채우고 입력만 420px에서 멈춘다(DESIGN.md §3.1 — form.stack 640px 제한 해제) */
form.me-form { max-width: none; }
.me-form .input, .me-form .select, .me-form .textarea { max-width: 420px; }
.name-off { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--c-soft); font-size: var(--fs-sm); }
.me-save { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding-top: var(--sp-4); border-top: 1px solid var(--c-line); }
.me-links { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
/* 설정 → 구성원 관리(IMPL-PLAN-14 §8, C 갈래 조각): 목록 + 오른쪽 구성원 패널, 항목 정의 카드 + 미리보기 */
.member-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.member-split.has-panel { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); }
.member-row[aria-current="true"] td { background: var(--c-soft); }
.member-row-link { font-weight: 600; color: var(--c-ink); }
.member-panel {
  position: sticky; top: calc(var(--header-h) + var(--sp-4)); display: flex; flex-direction: column; min-width: 0;
  border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); box-shadow: var(--sh-2);
}
.member-panel-bar { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--c-line); }
.member-panel-body { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.member-panel-body h2 { font-family: var(--f-display); font-weight: 400; font-size: var(--fs-2xl); line-height: 1.35; }
.member-panel-body h3 { font-size: var(--fs-task); line-height: 22px; }
.member-panel-body dl { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--sp-1) var(--sp-3); margin: 0; }
.member-panel-body dd { margin: 0; }
.names-opts, .field-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--sp-2); }
.field-kinds { margin: 0; padding: 0; border: 0; }
.names-opts .radio-card > span, .field-kinds .radio-card > span { display: flex; flex-direction: column; gap: 2px; }
.fields-split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr); gap: var(--sp-6); align-items: start; }
.field-card { padding: var(--sp-4); border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); }
.field-card .input, .field-card .textarea { max-width: 420px; }
.field-order .input { width: 84px; }
/* 선택지 칸은 형식이 '선택지'일 때만(JS 없음) */
.field-card:not(:has(input[type="radio"][value="choice"]:checked)) .field-choices { display: none; }
.field-add > summary { cursor: pointer; font-weight: 600; list-style: none; }
.field-add > summary::-webkit-details-marker { display: none; }
.field-add[open] > summary { margin-bottom: var(--sp-3); }
.field-preview { position: sticky; top: calc(var(--header-h) + var(--sp-4)); display: flex; flex-direction: column; gap: var(--sp-3); scroll-margin-top: calc(var(--header-h) + var(--sp-4)); }
form.field-cards { max-width: none; }
/* 필수를 켠 항목만 차단 경고, 꺼진 항목은 같은 인원을 중립 정보로(체크 즉시 바뀐다) */
.field-required:not(:has(input:checked)) .impact-on, .field-required:has(input:checked) .impact-off { display: none; }
.field-card-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sp-2); }
/* 편집 중에도 닿는 저장 막대 */
.field-save-bar {
  position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-3) 0; border-top: 1px solid var(--c-line); background: var(--c-surface);
}
.field-preview-jump { display: none; }
/* 이름 표시 방식: 고른 방식의 결과만 강조 상자에 */
.names-form:has([name="show_real_name"][value="on"]:checked) [data-when="off"],
.names-form:has([name="show_real_name"][value="off"]:checked) [data-when="on"] { display: none; }
.names-effect { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--c-sage); }
.name-sample { display: inline-flex; padding: 2px 10px; border-radius: var(--r-pill); background: var(--c-surface); font-weight: 600; }
@media (max-width: 1100px) { .settings-shell { grid-template-columns: 200px minmax(0, 1fr); gap: var(--sp-4); } }
@media (max-width: 700px) {
  .settings-shell { display: block; }
  .settings-shell > .settings-tabs { position: static; padding: 0; background: none; gap: 6px; }
  .settings-tab { min-height: 52px; border: 1px solid var(--c-line); background: var(--c-surface); }
  .settings-tab[aria-current="page"] { font-weight: 600; box-shadow: none; }
  .settings-tab-go { display: inline; }
  .settings-tab .badge + .settings-tab-go { margin-left: 0; }
  .settings-shell.in-tab > .settings-tabs, .settings-shell:not(.in-tab) > .settings-body { display: none; }
  .settings-back { display: inline-flex; }
  /* 구성원 패널은 목록 대신 전체 폭, 구성원 표는 사람 카드 */
  .member-split.has-panel { display: block; }
  .member-split.has-panel > #settings-members-list { display: none; }
  .member-panel { position: static; box-shadow: none; }
  /* table.grid의 좁은 화면 가로 스크롤 규칙(아래 ≤700px 블록)보다 앞서도록 선택자를 올린다 */
  table.grid.member-table { display: block; overflow: visible; background: none; }
  table.grid.member-table thead { display: none; }
  table.grid.member-table tbody, table.grid.member-table tr, table.grid.member-table td { display: block; }
  table.grid.member-table tr { padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-line); }
  table.grid.member-table td { padding: 2px 0; border: 0; }
  table.grid.member-table td[data-label] { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); font-size: var(--fs-sm); }
  table.grid.member-table td[data-label]::before { content: attr(data-label); min-width: 64px; color: var(--c-muted); font-size: var(--fs-xs); }
  .member-row-link { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 1100px) {
  .field-preview-jump { display: inline-flex; }
  .member-split.has-panel, .fields-split { grid-template-columns: minmax(0, 1fr); }
  .member-panel, .field-preview { position: static; }
}
.setting-row {
  display: grid; grid-template-columns: minmax(260px, 1.4fr) minmax(220px, 1fr); gap: var(--sp-4) var(--sp-6);
  align-items: center; min-height: 64px; padding: 10px var(--sp-2); border-bottom: 1px solid var(--c-line);
}
.setting-row:last-child { border-bottom: 0; }
.setting-row-with-override { grid-template-columns: minmax(260px, 1.4fr) minmax(200px, 1fr) minmax(170px, 220px); }
.setting-name { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: 2px; }
.setting-label { font-size: var(--fs-md); line-height: 20px; font-weight: 600; }
.setting-help { display: block; max-width: 70ch; }
.setting-lock { margin-top: var(--sp-1); white-space: normal; text-decoration: none; }
.setting-control { min-width: 0; }
.setting-control .input, .setting-control .select { width: 100%; max-width: 420px; }
.setting-control .setting-number { width: 84px; }
.setting-toggle { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 64px; min-height: 44px; border-radius: var(--r-md); cursor: pointer; }
.setting-toggle input, .setting-option input { flex: none; width: 20px; height: 20px; margin: 0; cursor: pointer; }
.setting-toggle-state::before { content: "끔"; color: var(--c-muted); font-size: var(--fs-sm); }
.setting-toggle input:checked + .setting-toggle-state::before { content: "켬"; color: var(--c-accent); font-weight: 700; }
.setting-options { display: flex; flex-direction: column; gap: 0; min-width: 0; margin: 0; padding: 0; border: 0; }
.setting-option { display: flex; align-items: center; gap: var(--sp-2); min-height: 44px; border-radius: var(--r-md); cursor: pointer; font-size: var(--fs-sm); line-height: 19px; }
.setting-toggle:hover, .setting-option:hover { background: var(--c-soft); }
.setting-toggle:focus-within, .setting-option:focus-within { outline: 2px solid var(--c-accent-soft); }
.setting-option span { min-width: 0; }
.setting-readonly { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px; border-radius: var(--r-md); background: var(--c-soft); }
.setting-override { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.setting-override-label { color: var(--c-muted); font-size: var(--fs-xs); line-height: 18px; }
.setting-fixed { padding-block: 9px; }
#repo-teams-prompt { min-height: 140px; resize: vertical; }
.integration-prompt { min-height: 160px; width: 100%; resize: vertical; }
/* 거버넌스 변경 요청의 차이 */
.change-diff { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--c-soft); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: var(--sp-3); font-size: var(--fs-sm); line-height: 20px; max-height: 60vh; overflow: auto; }
.change-diff .add { color: var(--c-success); background: var(--c-success-soft); }
.change-diff .del { color: var(--c-danger); background: var(--c-danger-soft); }
/* 내 태스크 필터 */
.me-filter { display: flex; flex-direction: column; gap: var(--sp-3); }
.me-primary-controls, .filter-body { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); }
.me-filter-details > summary { display: none; }
.filter-summary { color: var(--c-muted); font-size: var(--fs-xs); font-weight: 500; }
.filter-chevron { font-size: var(--fs-lg); transition: transform var(--dur-fast) var(--ease); }
.me-filter-details[open] .filter-chevron { transform: rotate(180deg); }

/* 국외 이전 고지: 좁은 카드에서도 잘리지 않게 받는 자마다 정의 목록 한 장 */
.consent-recipient { display: grid; grid-template-columns: max-content 1fr; gap: 6px var(--sp-4); margin: 0; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--c-line); border-radius: var(--r-md); font-size: var(--fs-sm); }
.consent-recipient dt { color: var(--c-muted); font-weight: 600; }
.consent-recipient dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { .consent-recipient { grid-template-columns: 1fr; gap: 2px; } .consent-recipient dd + dt { margin-top: var(--sp-2); } }
/* API 토큰: 도구를 하나 고르면 그 설정만 펼친다(details name) */
.ai-connect > details { padding: var(--sp-3) 0; border-top: 1px solid var(--c-line); }
.ai-connect > details > summary { min-height: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.ai-connect > details > p { margin: var(--sp-2) 0 0; }
/* 사람용 토큰 경고·확인은 용도에서 "사람"을 골랐을 때만 */
.person-only { display: none; }
form:has(option[value="person"]:checked) .person-only { display: flex; }
.token-issue > summary { min-height: 32px; }
.token-issue[open] > summary { margin-bottom: var(--sp-3); }
/* ---- 22-1. 전사 메뉴(조직 탭 '전사', 시안 B): 작업 목록 행 + 패널 ---- */
.tjob-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.tjob {
  width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(160px, 260px); gap: var(--sp-2) var(--sp-4); align-items: center;
  padding: 12px 10px; border: 0; border-bottom: 1px solid var(--c-line); border-radius: var(--r-sm); background: none; color: inherit;
  font: inherit; text-align: left; cursor: pointer; transition: background var(--dur-fast) var(--ease);
}
.tjob-list > li:last-child .tjob { border-bottom: 0; }
.tjob:hover { background: var(--c-soft); }
.tjob-name { display: flex; flex-direction: column; min-width: 0; }
.tjob-title { font-weight: 600; font-size: var(--fs-task); }
.tjob-state { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--sp-2); }
.tjob-bar { flex: 1; min-width: 80px; }
.tjob-eta { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tjob-big { font-size: var(--fs-h2); line-height: 1.3; font-variant-numeric: tabular-nums; }
.tjob-panel { gap: var(--sp-5); padding-top: var(--sp-4); }
.tjob-legend { font-weight: 600; margin-bottom: 6px; }
.tjob-meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px var(--sp-4); font-size: var(--fs-sm); margin: var(--sp-2) 0 0; }
.tjob-meta dt { color: var(--c-muted); }
.tjob-meta dd { margin: 0; font-variant-numeric: tabular-nums; }
.tjob-history { padding-left: 18px; margin: var(--sp-2) 0 0; display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-sm); }
.tjob-history li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
@media (max-width: 700px) {
  .tjob { grid-template-columns: 1fr; }
  .tjob-state { justify-content: flex-start; }
}

/* ---- 23. 그림: 인라인 SVG 칠은 토큰 클래스로(다크에서 같이 바뀐다). 외부 이미지 없음 ---- */
.art-shadow { fill: var(--plant-shadow); } .art-pot { fill: var(--plant-pot); } .art-rim { fill: var(--plant-rim); }
.art-soil { fill: var(--plant-soil); } .art-leaf { fill: var(--plant-leaf); } .art-leaf-2 { fill: var(--plant-leaf-2); }
.art-face { fill: var(--plant-face); } .art-stem { fill: none; stroke: var(--plant-stem); }
.art-vein { fill: none; stroke: var(--plant-vein); } .art-face-line { fill: none; stroke: var(--plant-face); }
.art-spark, .art-yellow { fill: var(--c-yellow-strong); } .art-accent { fill: var(--c-accent); }
.art-sage { fill: var(--c-sage-strong); } .art-coral { fill: var(--c-coral); }
.art-plank { fill: color-mix(in srgb, var(--c-ink) 22%, transparent); }
.art-check { fill: none; stroke: var(--c-ink); }
.art-ink-soft { fill: color-mix(in srgb, var(--c-ink) 55%, transparent); }
:root {
  --art-plant: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 230 230'%3E%3Cellipse cx='125' cy='211' rx='77' ry='10' fill='%23263a3018'/%3E%3Cpath d='M87 138L99 200Q131 215 166 200L180 138Z' fill='%23bd7250'/%3E%3Cellipse cx='134' cy='138' rx='46' ry='12' fill='%23dba87d'/%3E%3Cellipse cx='134' cy='138' rx='33' ry='7' fill='%23635a43'/%3E%3Cpath d='M134 139Q137 90 141 57' stroke='%2360774d' stroke-width='6' fill='none'/%3E%3Cpath d='M138 100Q72 104 61 49Q124 28 138 100' fill='%238caa73'/%3E%3Cpath d='M140 78Q148 19 207 29Q214 78 140 78' fill='%23abc18c'/%3E%3Ccircle cx='124' cy='171' r='3' fill='%23594a37'/%3E%3Ccircle cx='148' cy='171' r='3' fill='%23594a37'/%3E%3Cpath d='M129 183Q137 189 144 181' fill='none' stroke='%23594a37' stroke-width='2'/%3E%3C/svg%3E");
}

/* ---- 23-1. 스타일 가이드(/ops/design) 전용 배치: sg- 접두어는 다른 화면에서 쓰지 않는다 ---- */
.sg-swatch { display: block; width: 44px; height: 28px; border-radius: var(--r-sm); border: 1px solid var(--c-line); }
.sg-type-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-4); padding: var(--sp-2) 0; border-bottom: 1px dashed var(--c-line); }
.sg-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--sp-4); align-items: start; }
.sg-bar { display: inline-block; height: 12px; background: var(--c-accent); border-radius: 2px; }
.sg-radius { display: inline-block; width: 44px; height: 32px; background: var(--c-surface); border: 1px solid var(--c-line); }
.sg-board { grid-auto-columns: minmax(220px, 1fr); }
.sg-cal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sg-art-box { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-4); border-radius: var(--r-xl); background: var(--c-sage); }
.sg-plant { width: 210px; height: 200px; }
.toast.sg-static { position: static; transform: none; align-self: flex-start; animation: none; }

/* ---- 24. 모션 ---- */
@keyframes float { 0%, 100% { transform: rotate(0); } 50% { transform: translateY(-6px) rotate(-5deg); } }
@keyframes twinkle { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.25) rotate(12deg); opacity: .7; } }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes sprout { 0% { transform: scale(.2); } 65% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* ---- 25. 반응형 ---- */
@media (min-width: 701px) and (max-width: 1150px) {
  .header { padding-inline: var(--sp-5); gap: 10px; }
  .nav a { padding-inline: 11px; }
}
@media (max-width: 1150px) {
  .tiles { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 960px) {
  .today-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "line" "error" "focus" "tally" "quick" "list" "schedule"; }
  .tally { min-height: 0; }
}
@media (max-width: 1100px) {
  /* 목차 사이드는 접고 위쪽 가로 칩으로 */
  .settings-form.with-nav, .settings-split { display: flex; flex-direction: column; gap: var(--sp-4); }
  .with-nav > .settings-jump, .settings-split > .settings-jump { position: static; flex-direction: row; flex-wrap: wrap; padding: 0; background: none; }
  .with-nav > .settings-jump .chip, .settings-split > .settings-jump .chip { border-color: var(--c-line); background: var(--c-surface); height: 44px; }
}
@media (max-width: 850px) {
  .notes-columns { display: block; }
  .notes-columns:not(.note-editor-open) > .note-editor-card { display: none; }
  .notes-columns.note-editor-open > .note-list { display: none; }
  .note-editor-card { padding: var(--sp-4); scroll-margin-top: 112px; }
  .note-editor-toolbar { justify-content: space-between; }
  .note-back { display: inline-flex; }
  .note-meta { grid-template-columns: minmax(0, 1fr) minmax(80px, 40%); }
  .note-date, .note-tags { grid-column: 1 / -1; }
  .note-back[aria-disabled="true"] { opacity: .55; pointer-events: none; }
  .settings-card { padding: var(--sp-4); }
  .settings-scope-note { font-size: var(--fs-sm); }
  .settings-jump { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--sp-1); scrollbar-width: thin; }
  .settings-jump .chip { flex: none; }
  .settings-save-bar { padding: 6px; border-radius: var(--r-lg); }
  .settings-save-hint { display: none; }
  .settings-save-bar .btn { width: 100%; }
  .settings-section-summary { min-height: 56px; padding: var(--sp-3) 14px; font-size: var(--fs-task); line-height: 22px; }
  .settings-section-body { padding: 0 var(--sp-3) var(--sp-3); }
  .settings-list { gap: var(--sp-2); border-top: 0; }
  .setting-row, .setting-row-with-override {
    display: flex; min-height: 0; flex-direction: column; align-items: stretch; gap: 10px;
    padding: var(--sp-3); border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface);
  }
  .setting-row:last-child { border-bottom: 1px solid var(--c-line); }
  .setting-control { width: 100%; }
  .setting-control .input, .setting-control .select { width: 100%; max-width: none; }
  .setting-control .setting-number { width: 120px; }
  .setting-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px var(--sp-2); }
  .setting-override { width: 100%; padding-top: var(--sp-2); border-top: 1px solid var(--c-line); }
  .setting-override-label { font-size: var(--fs-sm); }
}
@media (max-width: 720px) {
  .pcal-grid { display: flex; flex-direction: column; }
  .pcal-dow, .pcal-blank, .pcal-cell.is-empty { display: none; }
  .pcal-cell { min-height: 0; }
  .pcal-wd { display: inline; }
  .pcal-task, .pcal-ms { white-space: normal; }
}
@media (max-width: 700px) {
  :root { --header-h: 115px; }
  .header {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto; height: auto;
    padding: 10px 14px 8px; column-gap: var(--sp-2); row-gap: 6px;
  }
  .header > .switcher, .header > .switcher > summary.logo, .switcher > summary.logo > span { min-width: 0; }
  .header > .switcher > summary.logo { max-width: 100%; }
  .header > .spacer { display: none; }
  .logo { font-size: var(--fs-xl); }
  /* 탭이 늘어도 줄이 꺾이지 않게 가로 스크롤로 흘린다 */
  .nav { grid-column: 1 / -1; grid-row: 2; width: 100%; overflow-x: auto; scrollbar-width: none; padding: 3px; }
  .nav::-webkit-scrollbar { display: none; }
  /* 잘린 메뉴가 가로로 더 있다는 단서: 오른쪽 끝을 흐리게 */
  .nav { mask-image: linear-gradient(to right, black calc(100% - 32px), transparent); }
  .nav a { flex: none; padding-inline: 13px; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs a { flex: none; padding: 0 12px; }
  .org-tabs { scroll-padding-inline: 12px; }
  .switcher > .menu-list { left: 0; right: 0; min-width: 0; }
  /* 표는 카드 안에서 가로로 스크롤한다. 양 끝 그림자로 "더 있다"를 알린다 */
  table.grid, .table-scroll {
    background:
      linear-gradient(to right, var(--c-surface) 40%, transparent) left / 28px 100% no-repeat local,
      linear-gradient(to left, var(--c-surface) 40%, transparent) right / 28px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, var(--scrim), transparent) left / 16px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, var(--scrim), transparent) right / 16px 100% no-repeat scroll;
  }
  table.grid { display: block; overflow-x: auto; }
  .table-scroll-hint { display: block; margin: -4px 0 0; font-size: var(--fs-xs); line-height: 18px; color: var(--c-muted); }
  .table-scroll table.grid { display: table; min-width: 760px; overflow: visible; background: none; }
  .table-scroll table.project-table { width: 760px; table-layout: fixed; }
  .table-scroll table.assignee-table { width: 560px; min-width: 560px; table-layout: fixed; }
  .project-table th:first-child, .project-table td:first-child,
  .assignee-table th:first-child, .assignee-table td:first-child {
    position: sticky; left: 0; z-index: 1; background: var(--c-surface); box-shadow: 1px 0 0 var(--c-line); overflow-wrap: anywhere;
  }
  .project-table th:first-child, .project-table td:first-child { width: clamp(164px, 55vw, 210px); min-width: clamp(164px, 55vw, 210px); max-width: clamp(164px, 55vw, 210px); }
  .assignee-table th:first-child, .assignee-table td:first-child { width: clamp(112px, 36vw, 132px); min-width: clamp(112px, 36vw, 132px); max-width: clamp(112px, 36vw, 132px); }
  .project-table td, .assignee-table td { overflow-wrap: anywhere; }
  /* 모바일에서는 현재 위치가 먼저 보이는 한 개의 선택기로 프로젝트를 바꾼다 */
  .rail { display: none; }
  .project-picker { position: relative; display: block; width: 100%; padding: var(--sp-2) var(--sp-4) 0; }
  .project-picker > summary {
    display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 14px;
    list-style: none; border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface);
  }
  .project-picker > summary::-webkit-details-marker { display: none; }
  .project-picker-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 1px; }
  .project-picker-label { font-size: var(--fs-2xs); line-height: 15px; color: var(--c-muted); font-weight: 500; }
  .project-picker-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-task); line-height: 20px; }
  .project-picker-total { min-width: 24px; height: 24px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-pill); background: var(--c-soft); color: var(--c-muted); font-size: var(--fs-xs); }
  .project-picker-list {
    position: absolute; z-index: var(--z-dropdown); top: calc(100% + 4px); left: var(--sp-4); right: var(--sp-4);
    display: flex; flex-direction: column; gap: var(--sp-1); max-height: min(56vh, 420px); overflow-y: auto;
    padding: var(--sp-2); border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); box-shadow: var(--sh-pop);
  }
  .project-picker-list a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px; border-radius: var(--r-md); color: var(--c-ink); text-decoration: none; }
  .project-picker-list a[aria-current="page"] { background: var(--c-sage); font-weight: 700; }
  .project-picker-list .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .project-picker-list .count { flex: none; }
  .project-picker-empty { padding: 10px; }
  .project-picker-new { min-height: 44px; padding: 0 10px; justify-content: flex-start; border-top: 1px solid var(--c-line); border-radius: 0; }
  /* 좁은 화면은 머리줄 아래를 덮는 시트 — 헤더는 보이고 목록 스크롤은 뒤에 그대로 있다 */
  aside#panel, .layout.wide aside#panel { left: 0; width: auto; padding: 0; background: var(--c-surface); }
  aside#panel > .panel, .layout.wide aside#panel .panel { max-width: none; margin: 0; border: 0; border-radius: 0; min-height: 100%; box-shadow: none; }
  /* align-items:flex-start가 남으면 자식이 내용 폭으로 부풀어 페이지가 가로로 흔들린다 */
  .frame { flex-direction: column; align-items: stretch; }
  .layout { padding: var(--sp-4); gap: var(--sp-4); }
  .layout > main { gap: var(--sp-4); }
  .page-head > h1 { font-size: var(--fs-3xl); }
  .page-head > h1::after { height: 10px; bottom: 3px; }
  .card, .panel { padding: 18px; border-radius: var(--r-lg); }
  .card > h2, .card-head h2 { font-size: var(--fs-h3); }
  .tiles, .tiles.five { grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
  .project-summary { padding: var(--sp-3); gap: var(--sp-3); }
  .project-summary-head { gap: var(--sp-2); }
  .project-task-surface { padding: var(--sp-3); }
  /* 지표 5개는 한 줄로 두고 가로로 민다. 끝 카드가 살짝 보여 더 있음을 알린다 */
  .tiles.five.project-kpis, .org-kpis { display: flex; overflow-x: auto; gap: var(--sp-2); scrollbar-width: none; padding-bottom: 2px; }
  .project-kpis .tile, .org-kpis .tile { flex: 0 0 96px; min-height: 68px; padding: 10px 12px; border-radius: var(--r-md); }
  .project-kpis .tile b, .org-kpis .tile b { font-size: var(--fs-2xl); }
  .tile { padding: var(--sp-3); border-radius: var(--r-lg); min-width: 0; }
  .tile b { font-size: var(--fs-h2); }
  .tile span { font-size: var(--fs-xs); }
  .project-summary-copy { flex-basis: auto; width: 100%; }
  .project-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: var(--sp-2); margin-top: 6px; }
  .project-actions .btn { width: 100%; padding: 0 10px; }
  .board-toolbar { align-items: flex-start; }
  .board-guide { max-width: 21ch; }
  .board-track { grid-auto-columns: calc(100% - 28px); scroll-snap-type: inline mandatory; }
  .board-track .col { scroll-snap-align: start; }
  .shelf { padding: var(--sp-4); }
  .shelf-art { width: 72px; height: 44px; }
  .shelf-head { gap: var(--sp-3); align-items: flex-start; }
  .shelf-list { padding: var(--sp-1) var(--sp-3); }
  /* 터치 대상은 44px 이상 */
  .btn, .btn.sm, .btn.icon, .pill, .pill.sm, .panel .meta .select, .panel .meta .pill.sm, .today-schedule-toggle { min-height: 44px; height: 44px; }
  .btn.icon, .task-row:not(.today-task-row) [data-copy] { min-width: 44px; }
  /* 링크형 버튼(연결 해제·삭제·알림 닫기)도 터치 44px */
  .btn.link { height: auto; min-height: 44px; min-width: 44px; padding-inline: var(--sp-2); display: inline-flex; align-items: center; justify-content: center; }
  .request-table { min-width: 680px; display: table; }
  .request-table th:first-child, .request-table td:first-child { min-width: 200px; width: 220px; }
  .request-table th:not(:first-child), .request-table td:not(:first-child) { white-space: nowrap; }
  /* 요청 목록은 표 대신 카드: 제목 → 상태 · 보낸 사람 → 나머지(라벨을 앞에) */
  .request-table.request-cards, .request-cards tbody, .request-cards tr, .request-table.request-cards td { display: block; min-width: 0; width: auto; }
  .request-cards thead { display: none; }
  .request-cards tr { padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-line); }
  .request-table.request-cards td { padding: 2px 0; border: 0; white-space: normal; }
  .request-table.request-cards td:nth-child(n+2) { display: inline-block; margin-right: var(--sp-3); font-size: var(--fs-sm); color: var(--c-muted); }
  .request-cards td[data-label]:not(:empty)::before { content: attr(data-label) " "; color: var(--c-muted); }
  .request-table.request-cards td:empty { display: none; }
  .input, .select, :where(input:not([type=checkbox], [type=radio], [type=hidden], [type=file]), select, textarea) { font-size: var(--fs-lg); }
  .input, .select, :where(input:not([type=checkbox], [type=radio], [type=hidden], [type=file]), select) { height: 44px; }
  /* 배지 글자 수에 따라 줄바꿈이 달라지면 카드 높이가 제멋대로가 된다 */
  .task-row { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 2px; min-height: 0; }
  .task-row .main { flex: 0 0 auto; width: 100%; }
  .task-row .actions { width: 100%; justify-content: flex-start; }
  /* 복사 하나만 다음 줄을 차지하지 않게 카드 보조 행동으로 고정한다 */
  .task-row:not(.today-task-row) { position: relative; }
  .task-row:not(.today-task-row) .main { padding-right: 48px; }
  .task-row:not(.today-task-row) [data-copy] { position: absolute; top: 12px; right: 4px; width: 44px; }
  .board-track ul.tasks > .task-row:not(.today-task-row) [data-copy] { right: 12px; }
  .today-list-card .task-row { position: relative; gap: var(--sp-2); }
  .today-list-card .task-row .actions { gap: var(--sp-1); }
  .today-list-card .task-row .today-btn { padding-inline: var(--sp-2); }
  .today-list-card { gap: 10px; padding: var(--sp-4); }
  .today-list-card, .today-schedule-card { scroll-margin-top: 117px; }
  .today-list-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .today-assigned-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; gap: var(--sp-1); }
  .today-assigned-stats a { min-width: 0; min-height: 44px; padding: 5px 3px; flex-direction: column; align-items: center; justify-content: center; gap: 0; text-align: center; border-radius: var(--r-md); }
  .today-assigned-stats span { max-width: 100%; font-size: var(--fs-2xs); line-height: 16px; white-space: nowrap; }
  /* 오늘 머리: 강 장식은 줄이지 않고 배치만 접는다 */
  .today-grid > *, #today-head > * { margin-bottom: var(--sp-3); }
  .today-grid { column-gap: var(--sp-4); }
  /* 노란 집계는 가로로 납작하게(1차 모바일처럼) — 첫 업무가 첫 화면에 들어오게 한다 */
  .tally { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; padding: 12px 16px; gap: 2px 16px; }
  .tally h2 { grid-column: 1; font-size: var(--fs-sm); }
  .tally-main { grid-column: 1; }
  .tally .stats { grid-column: 2; grid-row: 1 / span 2; display: flex; justify-content: flex-end; gap: var(--sp-4); margin: 0; }
  .tally-scope, .tally-badge { display: none; }
  .tally-main b { font-size: var(--fs-stat); }
  .tally .stat { flex-direction: column; gap: 0; align-items: flex-end; min-height: 44px; justify-content: center; }
  .tally .stat b { font-size: var(--fs-h3); }
  .memo { padding: 20px; }
  .focus-memo h2 { font-size: var(--fs-h3); }
  .today-focus-actions form, .today-focus-actions > .btn { flex: 1 1 auto; }
  .today-focus-actions .btn { width: 100%; }
  .panel .meta { gap: var(--sp-2); padding: 10px; }
  .panel-bar {
    position: sticky; top: 0; z-index: var(--z-sticky); margin: -18px -18px 0; padding: 10px 12px;
    background: color-mix(in srgb, var(--c-surface) 94%, transparent); border-bottom: 1px solid var(--c-line); backdrop-filter: blur(12px);
  }
  .panel-mobile-context { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 1px; }
  .panel-mobile-context > span { font-size: var(--fs-2xs); line-height: 15px; color: var(--c-muted); }
  .panel-mobile-context > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); line-height: 18px; }
  .panel-bar [data-action="toggle-wide"] { display: none; }
  .panel-bar .status { order: 9; flex: 1 1 100%; display: block; font-size: var(--fs-xs); line-height: 18px; min-height: 18px; }
  .panel-status { flex: none; }
  .panel-status .pill { height: 44px; }
  .panel .title-input { font-size: var(--fs-2xl); min-height: 48px; }
  .task-due-row > .btn.link { min-height: 44px; }
  .me-primary-controls { gap: 10px; }
  .me-filter-details > summary { display: flex; width: 100%; justify-content: flex-start; list-style: none; }
  .me-filter-details > summary::-webkit-details-marker { display: none; }
  .me-filter-details > summary .filter-summary { margin-left: auto; }
  .me-filter-details:not([open]) > .filter-body { display: none; }
  .me-filter-details[open] > summary { margin-bottom: 10px; background: var(--c-ink); border-color: var(--c-ink); color: var(--c-bg); }
  .filter-body { gap: var(--sp-2); }
  .filter-body > .select, .filter-body > .btn { flex: 1 1 100%; width: 100%; }
  .card form.row > .input, .card form.row > .select { flex: 1 1 100%; }
  .load-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name verdict" "meter meter" "tags tags"; gap: 10px var(--sp-3); }
  .load-tags { justify-content: flex-start; }
  .tl-head { display: block; padding: 4px 0 10px; }
  .tl-head .tl-name { display: none; }
  .tl-head .tl-track { width: 100%; }
  .tl-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name action" "track track"; gap: var(--sp-2) var(--sp-3); padding: var(--sp-3) 0; }
  .tl-row .tl-name { grid-area: name; width: auto; }
  .tl-row .tl-track { grid-area: track; width: 100%; height: 32px; }
  .tl-actions { grid-area: action; }
  .dependency-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "route route" "note note" "status actions"; gap: 10px var(--sp-3); padding: 14px; }
  .dependency-actions { align-self: center; }
  .dependency-form { flex-direction: column; align-items: stretch; gap: var(--sp-2); }
  .dependency-form-route { flex: 0 0 auto; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); width: 100%; }
  .dependency-form-note { flex: 0 0 auto; width: 100%; }
  .dependency-form-actions { justify-content: flex-end; }
  .settings-save-bar { top: calc(var(--header-h) + 8px); }
  .settings-section { scroll-margin-top: 180px; }
  .md h1 { font-size: var(--fs-2xl); margin-top: var(--sp-6); }
  .md h2 { font-size: var(--fs-xl); }
  .md-editor .ProseMirror, .mdf-body.md .ProseMirror { font-size: var(--fs-lg); } /* iOS 입력 확대 방지 */
  /* 본문이 먼저 보이게: 터치 화면은 본문을 눌러 편집하므로 편집 버튼 줄과 작성자 줄을 숨긴다 */
  .md-edit-row, .doc-meta { display: none; }
  .md-edit-row + .mdf { margin-top: var(--sp-2); }
  /* 서식 줄: 위치와 무관하게 화면 키보드 바로 위 한 줄. 보이는 높이 40px, 누르는 영역은 위아래 2px씩 넓혀 44px, 가로 스크롤 없음 */
  .mdf.on .mdf-bar, .mdf[data-toolbar].on .mdf-bar {
    position: fixed; left: 0; right: 0; top: auto; bottom: var(--md-kb, 0px); z-index: var(--z-overlay); height: 40px; padding: 0 var(--sp-2); gap: 0;
    border: 0; border-top: 1px solid var(--c-line); border-radius: 0; box-shadow: var(--sh-2);
  }
  .mdf .mdf-bar .btn { position: relative; height: 40px; min-width: 44px; width: 44px; }
  .mdf .mdf-bar .btn::after { content: ""; position: absolute; inset: -2px 0; }
  .mdf .mdf-link .btn { width: 44px; height: 44px; }
  .mdf-menu button { min-height: 44px; }
  .mdf.on { margin-bottom: 48px; } /* 고정 줄에 마지막 줄이 가리지 않게 */
  dialog { padding: var(--sp-5); }
  dialog form.stack > .row:last-child { margin: 0 -20px -20px; padding: var(--sp-3) var(--sp-5); bottom: -20px; }
  .toast { bottom: 18px; max-width: calc(100% - 32px); }
}
@media (max-width: 700px) and (pointer: fine) {
  .today-list-card .task-row [data-copy] { position: absolute; top: 10px; right: 4px; }
  .today-list-card .task-row:focus-within [data-copy] { opacity: 0; }
  .today-list-card .task-row:hover [data-copy] { opacity: 1; }
  .today-list-card .task-row [data-copy]:focus { position: static; opacity: 1; }
}
@media (max-width: 360px) {
  .note-meta { grid-template-columns: minmax(0, 1fr); }
  .note-author, .note-date, .note-tags { grid-column: 1; }
  .setting-options { grid-template-columns: minmax(0, 1fr); }
}
@media (pointer: coarse) {
  .md-edit-row > .muted { display: none; }
}
/* AI 자동완성(IMPL-PLAN-12 §7.1): 칸 안 오른쪽 끝 반짝이 아이콘 버튼 — ai-fill.js가 붙인다 */
.ai-wrap { position: relative; display: block; min-width: 0; color: var(--c-ink); font-weight: 400; }
.row > .ai-wrap { flex: 1 1 12rem; }
.ai-wrap > .ai-has { width: 100%; padding-inline-end: 40px; }
.ai-spark { position: absolute; inset-inline-end: 4px; top: 50%; transform: translateY(-50%); z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: var(--r-sm); background: transparent; color: var(--c-muted); cursor: pointer;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.ai-spark:hover, .ai-spark.busy { color: var(--c-accent); background: var(--c-accent-soft); }
.ai-wrap.tall > .ai-spark, .mdf > .ai-spark { top: 4px; transform: none; }
.mdf.ai-has .mdf-body { padding-inline-end: 44px; }
.mdf.ai-has[data-toolbar="top"] .mdf-bar { padding-inline-end: 44px; }
.ai-spin { animation: ai-spin .9s linear infinite; }
@keyframes ai-spin { to { transform: rotate(360deg); } }
.ai-inline:empty { display: none; }
.ai-inline { margin-top: var(--sp-1); }
.ai-inline #ai-job[data-ai-active] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.ai-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); color: var(--c-muted); }
.ai-bar.stack { align-items: stretch; padding: var(--sp-2) var(--sp-3); border: 1px dashed var(--c-line-strong); border-radius: var(--r-sm); }
.ai-preview { margin: 0; color: var(--c-ink); }
[data-ai-mode] > .ai-ico { vertical-align: -3px; margin-inline-end: 6px; color: var(--c-muted); }
.ai-bar [data-ai-step] { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; }
.ai-src { color: var(--c-muted); }
.ai-bar.stack > .ai-src { display: block; }
/* AI 대화상자: 안쪽 폼(후보 표)의 작업 줄은 sticky를 풀어 아래 [닫기]를 덮지 않게 한 흐름으로 */
#ai-dlg form.stack > .row:last-child { position: static; margin: 0; padding: var(--sp-3) 0 0; background: none; }
/* 태스크 후보: 넓은 대화상자 + 열 최소 폭(담당자·프로젝트·제목이 읽히게). 좁은 화면은 표 가로 스크롤 */
#ai-dlg:has(.ai-cand) { max-width: 1160px; }
#ai-dlg form.ai-cand { max-width: none; }
/* 설정 AI: Copilot 모델 칸과 [모델 적용] 아래선 맞춤 */
.row.align-end { align-items: end; }
/* 개인 AI 입력 칸 펼침 표시(▸/▾) */
.ai-add-fold > summary { cursor: pointer; font-weight: 600; }
.ai-add-fold > summary::-webkit-details-marker { display: none; }
.ai-add-fold > summary::before { content: ""; flex: none; width: 16px; height: 16px; background: var(--c-muted); clip-path: polygon(35% 25%, 72% 50%, 35% 75%); transition: transform var(--dur-fast) var(--ease); }
.ai-add-fold[open] > summary::before { transform: rotate(90deg); }
/* Codex 기기 코드 로그인: 단계 목록, 코드 크게 + [코드 복사](복사 실패 시 app.js가 직접 복사 창을 띄우고 코드는 선택 가능) */
.codex-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-3); }
.codex-steps li { display: grid; gap: var(--sp-1); min-width: 0; overflow-wrap: anywhere; }
.codex-step-label { font-size: var(--fs-sm); font-weight: 600; color: var(--c-muted); }
.codex-code { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.codex-code code { font-size: var(--fs-2xl); letter-spacing: .08em; padding: var(--sp-1) var(--sp-3); user-select: all; }
@media (max-width: 700px) { .codex-code .btn { min-height: 44px; } }
#ai-dlg:has(.ai-cand) #ai-dlg-body + .row { display: none; } /* 후보 폼이 [닫기]를 작업 줄에 함께 둔다 */
.ai-cand table.grid { min-width: 900px; table-layout: fixed; }
.ai-cand th:nth-child(1) { width: 64px; }
.ai-cand th:nth-child(3) { width: 180px; }
.ai-cand th:nth-child(4) { width: 168px; }
.ai-cand th:nth-child(5) { width: 200px; }
.ai-cand td .select, .ai-cand td .input { width: 100%; min-width: 0; }
/* 문서·회의록 결과 미리보기: 영역 구분, 길면 안에서 스크롤, 결과 제목이 대화상자 제목보다 크지 않게 */
#ai-job .ai-result-view { max-height: min(50vh, 480px); overflow: auto; padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-bg); }
#ai-job .ai-result-view h1 { font-size: var(--fs-lead); margin-top: var(--sp-4); }
#ai-job .ai-result-view h2 { font-size: var(--fs-lg); margin-top: var(--sp-3); }
#ai-job .ai-result-view h3 { font-size: var(--fs-md); margin-top: var(--sp-3); }
/* Codex를 고르면 주소·키 칸을 감춘다(서버도 무시한다) */
.ai-fields:has(select[name="backend"] option[value="codex"]:checked) .ai-openai-only,
.ai-fields:not(:has(select[name="backend"] option[value="codex"]:checked)) .ai-codex-only { display: none; }
@media (max-width: 700px) {
  /* 터치 대상 44px(아이콘은 16px 그대로) */
  .ai-spark { width: 44px; height: 44px; inset-inline-end: 0; }
  .ai-wrap > .ai-has { padding-inline-end: 50px; }
  .mdf.ai-has .mdf-body { padding-inline-end: 50px; }
  .ai-wrap.tall > .ai-spark, .mdf > .ai-spark { top: 0; }
  .ai-bar [data-ai-step] { min-width: 44px; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* API 문서: Swagger UI를 밝은 판 위에 그린다 */
.swagger-card { background: #fff; color: #3b4151; color-scheme: light; padding: var(--sp-2) var(--sp-3); overflow-x: auto; }
.swagger-card .swagger-ui .wrapper { padding: 0; max-width: none; }
/* 설명의 엔터를 그대로(표준 Markdown은 한 줄 줄바꿈을 공백으로 합친다). 들여쓰기는 서버가 swagger_spec에서 살린다 */
.swagger-card .swagger-ui :is(.markdown, .renderedMarkdown) p { white-space: pre-wrap; }
/* 좁은 화면: 응답 형식 선택 칸이 잘리지 않게, 중첩 속성 설명이 한두 글자씩 꺾이지 않게(넘치면 카드 안에서 가로 이동) */
.swagger-card .swagger-ui select { max-width: 100%; }
@media (max-width: 700px) {
  .swagger-card { padding-inline: 0; }
  .swagger-card .swagger-ui table.model td:last-child { min-width: 12em; }
  .swagger-card .swagger-ui :is(.content-type-wrapper, .response-control-media-type) select { width: 100%; }
}

/* 다크 화면의 넓은 면은 중성색. 노란 붓질은 크기 그대로 옅게만(밝은 글자 대비 5:1 이상). */
@media (prefers-color-scheme: dark) {
  .page-head > h1::after { opacity: .35; }
  .tiles .tile:first-child, .shelf, .me-preview, .names-effect, .sg-art-box { background: var(--c-soft); }
}

/* ---- 26. 헤더 통합 검색 (base.html .hsearch · app.js) ----
   넓은 화면: 주 메뉴와 [빠른 추가] 사이 입력칸, 아래로 펼침 패널. ≤960px: 돋보기 버튼 → 머리줄을 덮는 입력 줄. */
.hsearch { flex: 0 1 320px; min-width: 180px; }
.hsearch-toggle, .hsearch-close { display: none; }
.hsearch-form { position: relative; display: flex; align-items: center; gap: var(--sp-2); }
.hsearch-glass { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--c-muted); pointer-events: none; }
.hsearch-input { height: 40px; padding: 0 36px; }
.hsearch-input::-webkit-search-cancel-button { display: none; }
.hsearch-key {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%); min-width: 22px; height: 22px; padding: 0 6px;
  display: inline-grid; place-items: center; border: 1px solid var(--c-line); border-radius: var(--r-xs);
  background: var(--c-soft); color: var(--c-muted); font-family: var(--f-mono); font-size: var(--fs-xs); pointer-events: none;
}
.hsearch-input:focus ~ .hsearch-key, .hsearch-input:not(:placeholder-shown) ~ .hsearch-key { display: none; }
.hsearch-pop {
  position: absolute; top: calc(100% + 6px); right: 0; width: max(100%, 460px); max-height: min(70vh, 560px); overflow-y: auto;
  padding: 6px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg);
  box-shadow: var(--sh-pop); z-index: var(--z-dropdown);
}
.hs-ghead { padding: 10px 10px 4px; color: var(--c-muted); font-size: var(--fs-xs); font-weight: 700; }
.hs-opt {
  display: flex; align-items: baseline; gap: var(--sp-3); min-height: 40px; padding: 9px 10px; border-radius: var(--r-md);
  color: var(--c-ink); text-decoration: none;
}
.hs-opt:hover, .hs-opt[aria-selected="true"] { background: var(--c-soft); }
.hs-opt[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--c-accent); }
.hs-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-hint { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-muted); font-size: var(--fs-sm); }
.hs-all { margin-top: 4px; border-top: 1px solid var(--c-line); border-radius: 0 0 var(--r-md) var(--r-md); color: var(--c-accent); font-weight: 600; }
.hs-empty { margin: 0; padding: var(--sp-4) 10px; line-height: 1.6; }
@media (max-width: 960px) {
  .hsearch { flex: none; min-width: 0; }
  .hsearch-toggle { display: inline-flex; }
  .hsearch-form { display: none; }
  .header.hsearch-open .hsearch-form {
    display: flex; position: absolute; inset: 0 0 auto 0; min-height: 100%; z-index: var(--z-dropdown);
    padding: 10px 14px; background: var(--c-bg); border-bottom: 1px solid var(--c-line);
  }
  .header.hsearch-open .hsearch-glass { left: 26px; }
  .hsearch-key { display: none; }
  .hsearch-close { display: inline-flex; flex: none; }
  .hsearch-pop {
    top: 100%; left: 0; right: 0; width: auto; max-height: calc(100dvh - var(--header-h));
    border-inline: 0; border-radius: 0 0 var(--r-lg) var(--r-lg);
  }
}
@media (max-width: 700px) {
  .header { grid-template-columns: minmax(0, 1fr) auto auto auto; }
  .hsearch-toggle { width: 44px; }
  .hsearch-input { height: 44px; font-size: var(--fs-lg); }
  .hs-opt { min-height: 44px; }
}