/* imitri 팀 허브 — 디자인 토큰(shadcn zinc를 순수 CSS로). 새 hex를 추가하지 않는다.
   캔버스 보드의 중간 회색과 진한 파랑은 아래 토큰을 섞어서 만든다(어둡게에서도 같이 바뀐다). */
*,*::before,*::after{box-sizing:border-box}
:root{
  --background:#fafafa;--card:#ffffff;--foreground:#18181b;--muted:#71717a;
  --border:#e4e4e7;--ring:#2f6bff;
  --primary:#0f1f3d;--primary-fg:#ffffff;--accent:#2f6bff;--accent-soft:#eef3ff;
  --danger:#dc2626;
  --warn:#854d0e;--warn-soft:#fef9c3;  /* "내용 확인 전" 표시(노랑, 10-15) */
  --radius:12px;--shadow:0 1px 2px rgba(24,24,27,.05),0 4px 16px rgba(24,24,27,.05);
  /* 섞어 만드는 값. color-mix를 모르는 브라우저에서는 가까운 토큰을 쓴다. */
  --text-2:var(--muted);--text-3:var(--foreground);--line-2:var(--border);--dot:var(--muted);
  --accent-2:var(--accent);--accent-line:var(--accent);
}
@supports (color:color-mix(in srgb,red,blue)){:root{
  --text-2:color-mix(in srgb,var(--foreground) 75%,var(--card));    /* 설명 글 */
  --text-3:color-mix(in srgb,var(--foreground) 84%,var(--card));    /* 본문보다 한 단계 옅은 글 */
  --line-2:color-mix(in srgb,var(--foreground) 18%,var(--card));    /* 테두리보다 한 단계 진한 선 */
  --dot:color-mix(in srgb,var(--foreground) 41%,var(--card));       /* 지난 스프린트의 점 */
  --accent-2:color-mix(in srgb,var(--accent) 80%,var(--foreground)); /* 켜진 필터 · "지금" 글자 */
  --accent-line:color-mix(in srgb,var(--accent) 32%,var(--card));   /* "지금" 칩의 테두리 */
}}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--background:#0c0d10;--card:#151721;--foreground:#f4f4f5;--muted:#a1a1aa;
  --border:#27272a;--accent:#6ea0ff;--accent-soft:#17223c;--danger:#f87171;--primary:#e8edf7;--primary-fg:#0f1f3d;--shadow:none;--warn:#fde047;--warn-soft:#422006}}
:root[data-theme=dark]{--background:#0c0d10;--card:#151721;--foreground:#f4f4f5;--muted:#a1a1aa;
  --border:#27272a;--accent:#6ea0ff;--accent-soft:#17223c;--danger:#f87171;--primary:#e8edf7;--primary-fg:#0f1f3d;--shadow:none;--warn:#fde047;--warn-soft:#422006}

/* 한국어 낱말은 띄어쓰기 자리에서만 다음 줄로 넘긴다(keep-all). 띄어쓰기 없이 긴 것(주소, 경로, 긴 영문)은
   칸을 넘칠 때만 그 자리에서 끊는다(break-word). anywhere와 달리 표 · 좁은 칸의 최소 폭을 줄이지 않아서 낱말이 칸에 맞춰 잘리지 않는다. */
body{margin:0;background:var(--background);color:var(--foreground);word-break:keep-all;overflow-wrap:break-word;
  font:15px/1.6 "Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Noto Sans KR",sans-serif}
a{color:var(--accent)}
a:hover{color:var(--accent-2)}
/* 코드: 안의 한국어도 낱말째 두고, 띄어쓰기 없이 긴 경로 · 이름은 칸을 넘칠 때 아무 데서나 끊는다 */
code{font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text-2);word-break:keep-all;overflow-wrap:anywhere}
svg{flex:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.num{font-variant-numeric:tabular-nums}
[hidden]{display:none!important}

/* 머리 줄(HUB-D32): 왼쪽 아이콘 + 허브 이름(둘 다 첫 화면으로), 오른쪽 프로필 동그라미 하나 */
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;padding:10px 20px;background:var(--background);border-bottom:1px solid var(--border)}
.brand{display:inline-flex;align-items:center;gap:8px;min-width:0;font-weight:800;color:var(--foreground);text-decoration:none;white-space:nowrap}
.brand:hover{color:var(--foreground)}
.mark .bg{fill:var(--primary)}
.mark .fg{fill:var(--primary-fg)}
.prof{position:relative;flex:none;margin-left:auto}
.avatar{display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:999px;background:transparent;font:inherit;cursor:pointer}
.avatar .dot{display:grid;place-items:center;width:32px;height:32px;border-radius:999px;background:var(--accent-soft);color:var(--primary);font-size:14px;font-weight:700;line-height:1}
.avatar:hover .dot{box-shadow:0 0 0 2px var(--accent-line)}
.avatar[aria-expanded=true] .dot{box-shadow:0 0 0 2px var(--background),0 0 0 4px var(--accent)}
/* 프로필 메뉴: 동그라미 바로 아래, 오른쪽 끝을 동그라미에 맞춘다 */
.pmenu{position:absolute;top:calc(100% + 6px);right:0;z-index:6;width:264px;max-width:calc(100vw - 32px);padding:6px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.pmenu .who{display:flex;flex-direction:column;padding:6px 10px 4px}
.pmenu .who b{font-size:14px;line-height:1.4}
.pmenu .who span{font-size:12px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pmenu hr{margin:6px 0;border:0;border-top:1px solid var(--border)}
.pitem{display:flex;align-items:center;gap:8px;min-height:38px;padding:0 10px;border-radius:8px;color:var(--foreground);font-size:14px;text-decoration:none}
a.pitem:hover{background:var(--background);color:var(--foreground)}
a.pitem:focus-visible{outline-offset:-2px}
.pitem.theme{justify-content:space-between;padding-right:4px}
/* 화면 밝기 세 갈래(시스템 · 밝게 · 어둡게): 섹션 안의 보기 단추와 같은 모양, 고른 것은 주 버튼 색 */
.seg3{display:inline-flex;padding:2px;border:1px solid var(--border);border-radius:8px;background:var(--card)}
.seg3 label{position:relative;display:inline-flex;align-items:center;height:28px;padding:0 9px;border-radius:6px;color:var(--text-3);font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer}
.seg3 input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.seg3 label:has(input:checked){background:var(--primary);color:var(--primary-fg);font-weight:700}
.seg3 label:has(input:focus-visible){outline:2px solid var(--ring);outline-offset:1px}

main{max-width:1040px;margin:0 auto;padding:24px 16px 64px}
.crumb{font-size:13px;color:var(--muted)}
.crumb a{color:var(--muted)}
.hero h1{font-size:26px;line-height:1.3;margin:8px 0 4px}
.sub{color:var(--text-2);margin:0 0 20px}
.sub.small{font-size:13px}
.empty{color:var(--text-2)}
.note{margin:12px 0 0;font-size:13px;color:var(--text-2)}

.card{display:block;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:12px}
.chip{flex:0 0 auto;font-size:11px;font-weight:700;color:var(--muted);border:1px solid var(--border);border-radius:999px;padding:2px 8px;white-space:nowrap}
.chip.on{font-size:12px;color:var(--accent-2);border-color:var(--accent-line)}
.chip.role{color:var(--text-3);border-color:var(--line-2);padding:1px 8px}
.btn{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 12px;border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--foreground);font:inherit;font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap;cursor:pointer}
.btn:hover{border-color:var(--line-2);color:var(--foreground)}
:is(a,button,select,input,textarea,summary):focus-visible{outline:2px solid var(--ring);outline-offset:2px}
/* 가는 곳 표시: 정리 한 장(›)은 강조색, 원본으로(↗)는 글자색 */
.go{display:inline-flex;align-items:center;gap:2px;font-size:13px;font-weight:700;color:var(--accent);white-space:nowrap;text-decoration:none}
.go.direct{gap:4px;font-weight:600;color:var(--text-3)}

/* 묶음 제목(섹션 안의 달 · 묶음) */
.gh{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;font-size:13px;font-weight:700;margin:28px 0 10px}
.gh span{font-weight:400;color:var(--muted)}
.gh .none{color:var(--text-2)}

/* ── 첫 화면 ── */
.hero.split{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px 24px}
.hero.split .lead{flex:999 1 420px;min-width:0}
.hero.split .sub{margin:0}
/* 세 기둥(HUB-D32 (A)): 진행 | 제품 | 팀이 나란히, 기둥 머리에 묶음 이름과 한 줄, 그 아래로 섹션 카드. 좁으면 위아래로 쌓인다.
   카드는 내용만큼의 높이(늘려서 기둥 끝을 맞추지 않는다). */
main.home{padding:28px 16px 56px}
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:16px}
.pillar{display:flex;flex-direction:column;gap:14px;min-width:0;padding:18px 14px 14px;border:1px solid var(--border);border-radius:16px}
.pillar .ph{padding:0 4px}
.pillar h2{margin:0;font-size:24px;line-height:1.25;font-weight:800}
.pillar .ph p{margin:4px 0 0;font-size:14px;line-height:1.5;color:var(--text-2)}
.stack{display:flex;flex-direction:column;gap:12px}
/* 섹션 카드: [링크: 아이콘 상자 · 이름 · 한 줄 설명(두 줄까지)] + 오른쪽 위 핀 단추(링크 밖) + 자동 고정의 띠.
   마우스를 올리면 테두리가 한 단계 짙은 회색, 파란 테두리는 고정한 카드에만 쓴다. */
.hcard{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.hcard:hover{border-color:var(--line-2)}
.hcard>a{display:flex;align-items:flex-start;gap:12px;padding:16px;border-radius:inherit;color:var(--foreground);text-decoration:none}
.hcard>a:hover{color:var(--foreground)}
.hcard>a:focus-visible{outline-offset:-2px}
.hcard .ico{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--accent-soft);color:var(--accent)}
.hcard .txt{min-width:0;padding-right:20px}
.hcard .name{display:block;font-size:16px;font-weight:700;line-height:1.4}
.hcard .about{display:-webkit-box;margin-top:2px;overflow:hidden;font-size:13px;line-height:1.5;color:var(--text-2);-webkit-box-orient:vertical;-webkit-line-clamp:2}
.hcard.pinned,.hcard.pinned:hover{border:1.5px solid var(--accent)}
.hcard.pinned{box-shadow:var(--shadow);box-shadow:0 1px 2px rgba(24,24,27,.05),0 4px 14px color-mix(in srgb,var(--accent) 10%,transparent)}
/* 핀 단추: 평소에는 숨고, 마우스를 올리거나 카드 안에 키보드 포커스가 있으면 보인다. 고정한 카드는 늘(채운 핀, 강조색). */
.pin{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--text-2);cursor:pointer;opacity:0}
.pin:hover{background:var(--background);color:var(--foreground)}
.hcard:hover .pin,.hcard:focus-within .pin,.pin[aria-pressed=true]{opacity:1}
.pin[aria-pressed=true],.pin[aria-pressed=true]:hover{color:var(--accent)}
.pin[aria-pressed=true] .body{fill:currentColor}
/* 마우스가 없는 기기에서는 늘 옅게 보인다. */
@media(hover:none){.pin{opacity:.5}}
/* 자동 고정의 띠: 카드 아래쪽 폭 전체, 위에 가는 선, 옅은 강조색 바탕. [빼기] [유지]는 높이 28 */
.askbar{display:flex;align-items:center;gap:6px;padding:6px 8px 6px 16px;background:var(--accent-soft);border-top:1px solid var(--accent-line);border-radius:0 0 calc(var(--radius) - 1.5px) calc(var(--radius) - 1.5px)}
.askbar .say{flex:1;min-width:0;font-size:13px;line-height:1.4;color:var(--foreground)}
.askbar button{flex:none;height:28px;border:0;border-radius:6px;font:inherit;font-size:12px;cursor:pointer}
.askbar .drop{padding:0 8px;background:transparent;color:var(--text-2);font-weight:600}
.askbar .drop:hover{color:var(--foreground)}
.askbar .keep{padding:0 10px;background:var(--primary);color:var(--primary-fg);font-weight:700}
.askbar .keep:hover{filter:brightness(1.08)}
.topic:hover,.topic:focus-visible{border-color:var(--ring);color:var(--foreground)}

/* ── 섹션 안 ── 보이는 보기(한눈에 glance · 전체 table)는 main의 data-view가 정한다 */
.hubpage[data-view=glance] .view:not([data-view=glance]),.hubpage[data-view=glance] [data-for]:not([data-for~=glance]),
.hubpage[data-view=table] .view:not([data-view=table]),.hubpage[data-view=table] [data-for]:not([data-for~=table]){display:none}

/* 맨 위 줄(10-15, 모든 너비): [한눈에 | 전체] [고르기 칸(남는 폭 전부)] [카드 접기 아이콘]. 목록이 없는 섹션은 보기 단추만 */
.bar{position:relative;display:flex;align-items:center;gap:10px}
.seg{display:inline-flex;padding:3px;border:1px solid var(--border);border-radius:10px;background:var(--card)}
.seg a{display:inline-flex;align-items:center;height:38px;padding:0 14px;border-radius:8px;color:var(--text-3);font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap}
.hubpage[data-view=glance] .seg a[data-view=glance],.hubpage[data-view=table] .seg a[data-view=table]{background:var(--primary);color:var(--primary-fg);font-weight:700}
/* 카드 접기 아이콘(10-15): 맨 위 줄 맨 오른쪽, 두 보기 모두. 카드가 있을 때만 있다(hub.js가 hidden).
   main의 data-card=hidden이면 카드가 접히고 아이콘은 펼치기 모양이 된다. 너비와 보기에 상관없이 같다.
   상자 없이 아이콘(20)만, 회색. 마우스를 올리거나 키보드로 오면 아이콘이 진해지고 옅은 둥근 바탕(36, 모서리 8)이 깔린다.
   누르는 곳은 줄 높이(46)만큼 넓힌다(::after). 줄과 세로 가운데가 맞는다 */
.cardbtn{display:inline-flex;position:relative;flex:none;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--text-2);cursor:pointer;transition:background-color .15s,color .15s}
.cardbtn::after{content:"";position:absolute;inset:-5px}
.cardbtn:hover,.cardbtn:focus-visible{background:color-mix(in srgb,var(--foreground) 7%,transparent);color:var(--foreground)}
@media(prefers-reduced-motion:reduce){.cardbtn{transition:none}}
.cardbtn>span{display:inline-flex}
.cardbtn .i-unfold,.hubpage[data-card=hidden] .cardbtn .i-fold,.hubpage[data-card=hidden] .cards{display:none}
.hubpage[data-card=hidden] .cardbtn .i-unfold{display:inline-flex}
/* 알림 상자(보관 화면에서 내리거나 되살린 직후 · 의견을 남긴 직후) */
.notice{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px 14px;margin-bottom:12px;padding:14px 16px;background:var(--card);border:1px solid var(--accent);border-radius:var(--radius)}
.notice>svg{margin-top:2px;color:var(--accent)}
.notice .body{flex:999 1 420px;min-width:0}
.notice p{margin:0}
.notice .t{font-weight:700}
.notice dl{display:flex;flex-wrap:wrap;gap:2px 18px;margin:4px 0 0;font-size:13px}
.notice dl div{display:flex;gap:6px}
.notice dt{color:var(--text-2)}
.notice dd{margin:0;font-weight:600}
.notice .s{margin-top:6px;font-size:13px;color:var(--text-2)}
.notice dl+.s{margin-top:6px}
.notice .t+.s{margin-top:4px}

.filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:20px}
.pills{display:contents}
.filters input{flex:1 1 200px;min-width:0;height:38px;padding:0 12px;border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--foreground);font:inherit;font-size:14px}
.pick{position:relative;display:inline-flex;align-items:center;height:38px;border:1px solid var(--border);border-radius:999px;background:var(--card)}
.pick select{appearance:none;-webkit-appearance:none;field-sizing:content;height:36px;max-width:240px;padding:0 32px 0 12px;border:0;border-radius:999px;background:transparent;color:var(--foreground);font:inherit;font-size:13px;text-overflow:ellipsis;cursor:pointer}
.pick .chev{position:absolute;right:11px;display:flex;color:var(--text-2);pointer-events:none}
.tally{margin-left:auto;font-size:13px;color:var(--text-2)}

.headline{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:20px 0 10px}
.headline.gap{margin-top:28px}
.headline.flat{margin-bottom:0}
.headline h2{font-size:15px;margin:0}
.headline span{font-size:13px;color:var(--text-2)}
.topic{display:flex;flex-direction:column;gap:8px;color:var(--foreground);text-decoration:none}
.topic .head{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
.topic .name{font-size:17px;font-weight:700}
.topic .other{font-size:12px;color:var(--text-2)}
.topic .sum{font-size:13px;line-height:1.55;color:var(--text-3)}
.topic .facts{display:flex;flex-wrap:wrap;gap:2px 12px;margin-top:4px;font-size:12px;color:var(--text-2)}
.topic .end{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:6px}
.topic .stamp{font-size:12px;color:var(--text-2)}

/* 자료 줄: 줄 전체가 링크 하나. 왼쪽 날짜 / 제목과 한 줄 / 오른쪽에 가는 곳과 쓴 사람 · 출처 */
.rows{list-style:none;margin:0;padding:0;overflow:hidden;background:var(--card);border:1px solid var(--border);border-radius:var(--radius)}
.rows li{margin-top:-1px;border-top:1px solid var(--border)}
.morerow{display:flex;align-items:center;gap:2px;min-height:44px;padding:0 16px;font-size:13px;font-weight:700;text-decoration:none}

/* 맨 위 줄 아래: 고른 스프린트의 카드(두 보기 모두) → 보기의 내용 */
.cards>.spanel{margin-top:16px}
.spanels{margin-top:20px}
.sp{display:flex;gap:12px;padding:0 0 4px;color:var(--foreground);text-decoration:none}
.sp:hover{color:var(--foreground)}
.sp .rail{flex:none;display:flex;flex-direction:column;align-items:center;width:14px}
/* 점(10-15): 다음 스프린트는 점선 테두리의 빈 점, 지난 스프린트는 조금 작은 회색 점, 지금 스프린트는 강조색 점 + 퍼지는 고리 */
.sp .dot{width:12px;height:12px;margin-top:16px;border-radius:999px;background:var(--card);border:2px solid var(--dot)}
.sp.next .dot{border-style:dashed}
.sp.none .dot,.sp.all .dot{border-color:var(--line-2)}
.sp.done .dot{width:10px;height:10px;margin-top:17px;background:var(--dot);border:0}
.sp.now .dot,.pdot.now{position:relative;background:var(--accent);border-color:var(--accent)}
/* 지금 스프린트의 고리: 2초마다 천천히 퍼졌다 사라진다. 움직임을 줄인 기기에서는 옅은 고리만 둘러 둔다 */
.sp.now .dot::after,.pdot.now::after{content:"";position:absolute;inset:-2px;border:2px solid var(--accent);border-radius:999px;opacity:0;animation:nowring 2s ease-out infinite}
@keyframes nowring{0%{opacity:.45;transform:scale(1)}100%{opacity:0;transform:scale(2.4)}}
@media(prefers-reduced-motion:reduce){.sp.now .dot::after,.pdot.now::after{animation:none;opacity:.3;transform:scale(1.7)}}
.sp .line{flex:1;width:2px;margin-top:4px;background:var(--border)}
.sp .box{flex:1;min-width:0;padding:10px 12px;margin-bottom:6px;border-radius:10px;border:1px solid transparent}
.sp:hover .box{border-color:var(--border)}
.sp[aria-current=true] .box{background:var(--card);border-color:var(--accent)}
.sp:last-child .line{display:none}
/* 단계 묶음 줄(10-15): 점 자리에 겹친 종이 아이콘 · "Phase N · Sprint 1 ~ 7" / 기간 · 스프린트 n개 · 오른쪽 "펼치기 ⌄"(펼치면 "접기 ⌃").
   펼치면 바로 아래(.phasebox)에 그 단계의 스프린트가 열린다. 묶음 안 마지막 줄의 선은 다음 줄로 이어 둔다. */
.sp.phase{width:100%;border:0;background:transparent;font:inherit;text-align:left;cursor:pointer}
.sp.phase .pico{display:flex;align-items:center;justify-content:center;width:14px;height:14px;margin-top:16px;color:var(--text-2)}
/* 이름과 "펼치기"는 한 줄, 기간 줄은 그 아래 전체 폭(목록이 좁아도 두 줄로 꺾이지 않게) */
.sp.phase .box{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px;align-items:center}
.sp.phase .box>b{grid-column:1;grid-row:1}
.sp.phase .box>.more{grid-column:2;grid-row:1;display:flex;align-items:center;gap:2px;font-size:12px;font-weight:700;color:var(--text-2)}
.sp.phase .box>.num{grid-column:1/-1;grid-row:2}
.sp.phase[aria-expanded=true] .more svg{transform:rotate(180deg)}
.phasebox:not(:last-child) .sp:last-child .line{display:block}
/* 고르기 칸(10-15, 모든 너비): 맨 위 줄의 남는 폭을 다 쓴다. 누르면 목록 패널이 칸 바로 아래 왼쪽에 맞춰 뜬다 */
.spick{position:relative;flex:1 1 auto;display:flex;min-width:0}
.spick #sp-open{display:flex;align-items:center;gap:10px;width:100%;min-width:0;height:46px;padding:0 12px 0 14px;border:1px solid var(--accent);border-radius:10px;background:var(--card);color:var(--foreground);font:inherit;text-align:left;cursor:pointer}
/* 목록 패널: 예전 왼쪽 목록 모양 그대로(세로 선과 점, 고른 줄은 파란 테두리 상자, 지금 스프린트의 막대, 단계 묶음).
   폭은 380 정도(칸이 더 좁으면 칸 폭, 최소 300), 높이는 화면에 남은 높이(빼기 12)와 70% 가운데 작은 값(넘치면 안에서 스크롤,
   열 때 hub.js가 정한다). 아래가 240보다 좁으면 칸 위로 연다(.up). 카드 위를 덮는다 */
.sprints{display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:10;width:min(380px,100%);min-width:300px;max-height:70vh;max-height:70dvh;margin:0;padding:10px 12px 6px;overflow-y:auto;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 12px 32px rgba(24,24,27,.16)}
.sprintview.open .sprints{display:block}
.sprints.up{top:auto;bottom:calc(100% + 6px)}
.sp .box>b{display:block;font-size:14px}
.sp .box>span{display:block;font-size:12px;color:var(--text-2)}
.sp .box>span:empty{display:none}
/* 지금 스프린트의 막대: 기간 아래 높이 4, 옅은 회색 바탕에 가는 테두리, 찬 만큼은 강조색(오늘은 브라우저가 연 날) */
.sp .box>.spbar{position:relative;height:4px;margin:6px 0 2px;overflow:hidden;border-radius:999px;background:var(--background);box-shadow:inset 0 0 0 1px var(--border)}
.spbar .fill{position:absolute;top:0;bottom:0;left:0;width:0;border-radius:inherit;background:var(--accent)}
/* 고르기 칸의 안: 점 · 이름(넘치면 …) · "목록 ⌄"(폰은 ⌄만) */
.pdot{flex:none;width:12px;height:12px;border:2px solid var(--dot);border-radius:999px;background:var(--card)}
.pdot.done{width:10px;height:10px;margin:0 1px;border:0;background:var(--dot)}
.pdot.next{border-style:dashed}
.pdot.none,.pdot.all{border-color:var(--line-2)}
.pname{flex:1;min-width:0;overflow:hidden;font-size:14px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}
.plist{flex:none;display:inline-flex;align-items:center;gap:2px;font-size:13px;font-weight:600;color:var(--text-2);white-space:nowrap}
.sprintview.open .plist svg{transform:rotate(180deg)}
/* 스프린트별 보기의 자료 줄(10-15): 접힌 줄은 한 줄(날짜 · 제목과 표시 · 출처 아이콘과 쓴 사람 · ⌄, 모두 세로 가운데), 누르면 그 자리에서 펼친다.
   펼친 동안에는 머리 줄과 펼친 곳(설명 전체 · 링크 둘)이 한 바탕(--background)이 된다. 링크 둘은 강조색, 자물쇠 "초대 필요"만 회색 */
.srow{display:flex;align-items:center;gap:4px 14px;width:100%;padding:12px 16px;border:0;background:none;color:var(--foreground);font:inherit;text-align:left;cursor:pointer}
.srow:hover{background:var(--background)}
.srow:focus-visible{outline-offset:-2px;border-radius:var(--radius)}
.srow .when{flex:none;width:44px;font-size:13px;font-weight:600}
.srow .what{flex:1;min-width:0}
.srow .what b{display:block;font-size:15px;font-weight:700;overflow-wrap:anywhere}
.srow .what .chip{margin-left:6px;vertical-align:1px}
/* 출처 칸: 정리 화면의 .src(원본 카드)와 이름이 같아 그 여백(위 12 · 아래 4)을 받지 않게 0으로 둔다(세로 가운데가 어긋났다) */
.srow .src{flex:none;display:inline-flex;align-items:center;gap:5px;max-width:170px;padding:0;font-size:12px;color:var(--text-2)}
.srow .src svg{flex:none}
.srow .who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srow .chev{flex:none;display:flex;color:var(--text-2)}
.srow[aria-expanded=true] .chev svg{transform:rotate(180deg)}
.rows li.open{background:var(--background)}
.rows li.open .srow:hover{background:none}
.sdetail{padding:0 16px 14px 74px;font-size:14px;line-height:1.6}
.sdetail p{margin:0}
.sdetail .links{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:8px}
.sdetail .links .go,.sdetail .links .go.direct{gap:3px;font-weight:700;color:var(--accent)}
.sdetail .opener{display:inline-flex;flex-wrap:wrap;align-items:center;gap:2px 8px}
.sdetail .lock{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:600;color:var(--text-2);white-space:nowrap}
.chip.unchk{border-color:transparent;background:var(--warn-soft);color:var(--warn)}
.sprintcard{padding:20px}
.sprintcard .row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.sprintcard h2{font-size:20px;margin:0}
.sprintcard .go{margin-left:auto;min-height:32px}
/* 스프린트 카드(10-15, 지금 · 지난 · 다음): 이름 + "스프린트 정리 ›" / 목표 / 일정 줄 / 맨 아래 남은 날. 칸 이름표는 없다 */
.spcard .row{align-items:baseline}
.spcard .goal{margin:6px 0 0;font-size:15px;line-height:1.55}
.spcard .goal.blank{color:var(--muted)}
/* 일정 줄: 점은 기간 가운데 그날의 자리. 지난 점은 강조색으로 채우고 흰 고리, 앞으로 올 점은 속이 빈 강조색 고리.
   선은 시작부터 오늘까지 강조색, 그 뒤는 옅은 회색. 오늘 자리에는 세로 점선과 "오늘". 지난 스프린트는 선과 점이 모두 회색 */
.tl{margin:18px 6px 0}
.tl-track{position:relative;height:38px}
.tl-line,.tl-done{position:absolute;left:0;bottom:7px;height:2px;border-radius:2px}
.tl-line{right:0;background:var(--border)}
.tl-done{width:0;background:var(--accent)}
.tl-today{position:absolute;top:16px;bottom:0;width:0;border-left:1.5px dashed var(--accent)}
.tl-today span{position:absolute;bottom:100%;left:0;margin-bottom:1px;transform:translateX(-50%);font-size:11px;font-weight:700;line-height:1.3;color:var(--accent-2);white-space:nowrap}
.tl-today.start span{transform:translateX(-6px)}
.tl-today.end span{transform:translateX(calc(-100% + 6px))}
.tl-dot{position:absolute;bottom:2px;width:12px;height:12px;margin-left:-6px;border:2px solid var(--accent);border-radius:999px;background:var(--card)}
.tl-dot.past{background:var(--accent);box-shadow:0 0 0 2px var(--card)}
.tl.done .tl-line{background:var(--dot)}
.tl.done .tl-dot{border-color:var(--dot);background:var(--dot)}
/* 다음 스프린트((가) 빈 점선 줄): 선은 회색 점선, 오늘 표시는 없다. 기간이 없으면 양 끝에 점선 테두리의 빈 원만(이름표 없음),
   기간이 있으면 일정 점은 속이 빈 강조색 고리 */
.tl.next .tl-track{height:22px}
.tl.next .tl-line{height:0;border-top:2px dashed var(--line-2);border-radius:0;background:none}
.tl-end{position:absolute;bottom:2px;width:12px;height:12px;margin-left:-6px;border:2px dashed var(--line-2);border-radius:999px;background:var(--card)}
/* 점 아래 두 줄: 날짜(굵게)와 짧은 이름(회색). 양 끝의 점은 글을 카드 안쪽으로 붙인다 */
.tl-steps{position:relative;height:42px;margin:6px 0 0;padding:0;list-style:none}
.tl-steps li{position:absolute;top:0;max-width:140px;transform:translateX(-50%);text-align:center;white-space:nowrap}
.tl-steps li.start{transform:translateX(-6px);text-align:left}
.tl-steps li.end{transform:translateX(calc(-100% + 6px));text-align:right}
.tl-steps b{display:block;font-size:13px;line-height:1.4}
.tl-steps span{display:block;overflow:hidden;font-size:12px;line-height:1.4;color:var(--text-2);text-overflow:ellipsis}
.tl-foot{margin:16px 0 0;padding-top:12px;border-top:1px solid var(--border);font-size:14px}
.tl-foot b{font-weight:700}
.tl-foot b+.period::before{content:" · "}
.tl-foot .period{color:var(--muted);font-variant-numeric:tabular-nums}
/* 폰(640 이하)의 접힘 · 펼침(10-15): 접힘은 진행 막대 + 맨 아래 줄 + "일정 펼치기", 펼침은 막대 자리에 세로 일정.
   넓은 화면에서는 이 셋을 감추고 가로 일정 줄을 늘 보인다 */
.mbar,.vtl,.vtoggle{display:none}
.mbar{position:relative;height:6px;margin:16px 0 0;overflow:hidden;border-radius:999px;background:var(--background);box-shadow:inset 0 0 0 1px var(--border)}
.mbar .fill{position:absolute;top:0;bottom:0;left:0;width:0;border-radius:inherit;background:var(--accent)}
.mbar.done .fill{width:100%;background:var(--dot)}
/* 세로 일정: 한 줄에 점 하나와 "날짜 원문". 선은 줄마다 그 점에서 다음 점까지, 오늘까지는 강조색 */
.vtl{margin:16px 0 0;padding:0;list-style:none}
.vtl li{position:relative;padding:0 0 14px 26px;font-size:14px;line-height:1.5}
.vtl li:last-child{padding-bottom:0}
.vtl li::before{content:"";position:absolute;left:5px;top:11px;bottom:-11px;width:2px;background:var(--border)}
.vtl li:last-child::before{display:none}
.vtl li.reached::before{background:var(--accent)}
.vtl b{margin-right:4px;font-weight:700}
.vdot{position:absolute;left:0;top:5px;width:12px;height:12px;border:2px solid var(--accent);border-radius:999px;background:var(--card)}
.vtl li.past .vdot{background:var(--accent);box-shadow:0 0 0 2px var(--card)}
.vtl.done li::before{background:var(--dot)}
.vtl.done .vdot{border-color:var(--dot);background:var(--dot)}
/* 오늘 줄: 선 위의 가로 점선 표시와 강조색 "오늘 10-15" */
.vtoday .vdash{position:absolute;left:-3px;top:10px;width:18px;border-top:2px dashed var(--accent)}
.vtoday .vsay{font-size:13px;font-weight:700;color:var(--accent-2)}
/* "일정 펼치기 ⌄" · "접기 ⌃": 가는 선 아래 가운데의 회색 글자(단추 모양 없음). 누르는 곳은 카드 폭 전체, 높이 44 */
.vtoggle{align-items:center;justify-content:center;gap:4px;width:calc(100% + 40px);height:44px;margin:14px -20px -20px;padding:0;border:0;border-top:1px solid var(--border);border-radius:0 0 var(--radius) var(--radius);background:none;color:var(--text-2);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.vtoggle:hover{color:var(--foreground)}
.vtoggle:focus-visible{outline-offset:-2px}
.spcard.open .vtoggle svg{transform:rotate(180deg)}
.chip.today{font-size:11px;padding:0 6px;color:var(--accent-2);border-color:var(--accent-line)}
/* ── 한눈에(10-15) ── 카드 아래의 묶음: "이어진 정리 글"(작은 카드) · "자료 n"(다섯 줄 + 오른쪽 위 "전체 표에서 보기 ›") */
.gblock{margin-top:20px}
.spanel>.gblock:first-child{margin-top:0}
.gblock .gh{font-size:15px;margin:0 0 8px}
.gblock .gh span{font-size:13px}
.ghead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;margin-bottom:8px}
.ghead .gh{margin:0}
.ghead .go{gap:2px}
.gblock>.none{margin:0;padding:14px 16px;background:var(--card);border:1px dashed var(--border);border-radius:var(--radius);font-size:13px;color:var(--text-2)}
/* 한눈에(10-15): [스프린트 카드] → [바로가기] → [사람 태그] → [최근 바뀐 것] */
.view[data-view=glance]>.sc{margin-top:0}
/* 바로가기: 넷까지 한 줄(폰은 두 줄). 카드는 아이콘 · 제목(두 줄까지) · 작은 줄(정리 글 / 출처), 원본으로 가는 카드는 오른쪽 위에 ↗.
   고치는 모드(.editing): 카드마다 오른쪽 위 ×, 빈자리는 점선 "+ 더하기", 카드는 열리지 않는다 */
.scbar{display:flex;align-items:center;gap:4px}
.scbtn{min-height:32px;padding:0 8px;border:0;border-radius:8px;background:transparent;color:var(--accent);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.scbtn:hover{background:var(--accent-soft)}
.scbtn:disabled{background:transparent;color:var(--muted);cursor:default}
.scbtn.done{padding:0 12px;background:var(--primary);color:var(--primary-fg)}
.scgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.scitem{position:relative;display:flex;min-width:0}
.sccard{flex:1;min-width:0;display:flex;align-items:center;gap:10px;min-height:64px;padding:12px 12px 12px 14px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);color:var(--foreground);text-decoration:none}
.sccard:hover{border-color:var(--line-2);color:var(--foreground)}
.scic{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--accent-soft);color:var(--accent)}
.sct{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sct b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:14px;line-height:1.35}
.sct span{overflow:hidden;font-size:12px;color:var(--text-2);text-overflow:ellipsis;white-space:nowrap}
.scout{flex:none;align-self:flex-start;display:flex;color:var(--text-2)}
.scx{display:none;position:absolute;top:-8px;right:-8px;place-items:center;width:26px;height:26px;padding:0;border:1px solid var(--border);border-radius:999px;background:var(--card);color:var(--text-2);cursor:pointer}
.scx::after{content:"";position:absolute;inset:-9px}
.scx:hover,.scx:focus-visible{color:var(--foreground);border-color:var(--line-2)}
.sc.editing .scx{display:grid}
.sc.editing .sccard{cursor:default}
.sc.editing .scout{visibility:hidden}
.scplus{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;min-height:64px;border:1px dashed var(--line-2);border-radius:var(--radius);background:transparent;color:var(--text-2);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.scplus:hover,.scplus:focus-visible{border-color:var(--text-2);color:var(--foreground)}
.scfind{margin-top:10px;padding:10px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius)}
.scfind input{display:block;width:100%;height:40px;padding:0 12px;border:1px solid var(--border);border-radius:8px;background:var(--background);color:var(--foreground);font:inherit;font-size:14px}
.scopts{list-style:none;margin:8px 0 0;padding:0;max-height:320px;overflow-y:auto}
.scopt{display:flex;align-items:center;gap:10px;width:100%;padding:8px;border:0;border-radius:8px;background:transparent;color:var(--foreground);font:inherit;text-align:left;cursor:pointer}
.scopt:hover,.scopt:focus-visible{background:var(--background)}
.scopt .scic{width:30px;height:30px;border-radius:8px}
.scnone{padding:10px 8px;font-size:13px;color:var(--text-2)}
/* 사람 태그: 바로가기 바로 아래 한 줄. 넘치면 옆으로 민다. 고른 태그는 진한 바탕 */
.ptags{display:flex;gap:6px;margin-top:14px;overflow-x:auto;scrollbar-width:none}
.ptags::-webkit-scrollbar{display:none}
.ptag{flex:none;display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 12px;border:1px solid var(--border);border-radius:999px;background:var(--card);color:var(--foreground);font:inherit;font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer}
.ptag:hover{border-color:var(--line-2)}
.ptag .n{font-weight:500;color:var(--text-2)}
.ptag[aria-pressed=true]{background:var(--primary);border-color:var(--primary);color:var(--primary-fg)}
.ptag[aria-pressed=true] .n{color:inherit;opacity:.75}
/* 최근 바뀐 것의 머리: 제목(사람을 고르면 "· 이름") 옆에 "지난번 뒤 새로 n" */
.ghl{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.newn{font-size:13px;font-weight:700;color:var(--accent-2)}
.chip.dec{color:var(--accent-2);border-color:var(--accent-line)}
.chip.new{border-color:transparent;background:var(--accent-soft);color:var(--accent-2)}
/* 전체의 찾기 줄: 사람으로 거른 동안 "<이름> ×" */
.pchip{flex:none;display:inline-flex;align-items:center;gap:4px;height:38px;padding:0 10px 0 14px;border:1px solid var(--accent-line);border-radius:999px;background:var(--accent-soft);color:var(--accent-2);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.grid.lite{grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr))}
.topic.lite{gap:6px;padding:14px 16px}
.topic.lite .name{font-size:15px}
.topic.lite .sum{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.tablewrap{position:relative;overflow-x:auto;background:var(--card);border:1px solid var(--border);border-radius:var(--radius)}
.tbl{width:100%;min-width:720px;border-collapse:collapse;font-size:14px}
.tbl.wide{min-width:860px}
.tbl th{padding:12px 10px;text-align:left;font-size:13px;font-weight:600;color:var(--text-2);white-space:nowrap}
.tbl th button{display:inline-flex;align-items:center;gap:4px;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer}
.tbl th .arrow{display:none}
.tbl th[aria-sort] button{font-weight:700;color:var(--foreground)}
.tbl th[aria-sort] .arrow{display:flex}
.tbl th[aria-sort=ascending] .arrow{transform:rotate(180deg)}
.tbl td{padding:12px 10px;font-size:13px;white-space:nowrap;border-top:1px solid var(--border);vertical-align:top}
.tbl th:first-child,.tbl td:first-child{padding-left:16px}
.tbl th:last-child,.tbl td:last-child{padding-right:16px}
.tbl td.main{min-width:260px;font-size:14px;white-space:normal}
/* 전체(표, 10-15): 줄을 누르면 바로 아래 줄에 펼친 곳(설명 전체 · 열기 ↗ · 정리 ›). 펼친 동안 두 줄이 한 바탕이다. 제목 칸의 단추가 키보드로 연다 */
.tbl td.when{width:56px;font-weight:600;color:var(--foreground)}
.tbl tbody tr[data-row]{cursor:pointer}
.tbl tbody tr[data-row]:hover{background:var(--background)}
.trow{display:inline;padding:0;border:0;background:none;color:var(--foreground);font:inherit;font-weight:700;text-align:left;cursor:pointer}
.trow .chip{margin-left:6px;vertical-align:1px}
.tbl .src{display:inline-flex;align-items:center;gap:5px;padding:0;color:var(--text-2)}
/* 스프린트 칸: 놓이는 스프린트가 둘 이상이면 한 줄에 하나씩(이름 안에 " · "가 있어 한 줄로 이으면 헷갈린다) */
.tbl .spl{display:block}
.tbl .src svg{flex:none}
.tbl tr.open,.tbl tr.open+tr.tdetail{background:var(--background)}
.tbl tr.tdetail>td{padding:0;border-top:0;white-space:normal}
.tbl tr.tdetail .sdetail{padding:0 16px 14px 82px}
/* 표(10-15): 넓은 화면에서 칸이 모자라면 옆으로 밀지 않고 섹션 · 스프린트 · 쓴 사람 칸을 두 줄까지 꺾는다(넘치면 …).
   폰(640 이하)은 지금처럼 상자 안에서 옆으로 민다 */
@media(min-width:641px){
  .tbl,.tbl.wide{min-width:0}
  .tbl td.main{min-width:200px}
  .tbl td.hubc,.tbl td.sps,.tbl td.auth{white-space:normal}
  .tbl td.hubc>span,.tbl .spls,.tbl td.auth .who{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
  .tbl .spl{display:inline}
  .tbl .spl+.spl::before{content:", "}
  .tbl td.auth .src{display:flex;align-items:flex-start}
  .tbl td.auth .src svg{margin-top:2px}
}

/* 아래 줄: 날짜 설명 + 보관한 자료 */
.under{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:28px;padding-top:16px;border-top:1px solid var(--border);font-size:13px;color:var(--text-2)}
.under .arc{margin-left:auto;color:var(--text-2)}
.under a.arc{font-weight:600}

/* ── 주제 정리 한 장 ── 왼쪽에 정리, 오른쪽에 원본 자료 */
.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,340px);grid-template-rows:auto 1fr;gap:20px 24px;align-items:start}
.cols.alone{grid-template-columns:minmax(0,1fr)}
.maincol{grid-column:1;grid-row:1;min-width:0;display:flex;flex-direction:column;gap:20px}
.side{grid-column:2;grid-row:1 / span 2;min-width:0}
.cols>.feedback{grid-column:1;grid-row:2;min-width:0}
.side h2 .n,.maincol h2 .n{margin-left:2px;font-size:13px;font-weight:400;color:var(--muted)}
.side h2[id]{scroll-margin-top:72px}
.maincol h2,.side h2{font-size:15px;margin:0 0 10px}
.side h2.gap{margin-top:24px}
.glance{padding:20px}
.glance h2{margin-bottom:8px}
.prose{line-height:1.65}
.prose>:last-child{margin-bottom:0}
.prose p{margin:0 0 10px}
.prose ol,.prose ul{margin:0 0 10px;padding-left:22px}
.prose li{margin:3px 0}
.prose li>ol,.prose li>ul{margin:4px 0}
.prose h3{font-size:14px;margin:16px 0 6px}
.prose pre{overflow:auto;margin:0 0 10px;padding:12px;border:1px solid var(--border);border-radius:8px;background:var(--card)}
.prose table{border-collapse:collapse;font-size:13px}
.prose th,.prose td{padding:8px 12px 8px 0;text-align:left;vertical-align:top;border-top:1px solid var(--border)}
.prose th{color:var(--text-2);font-weight:600;border-top:0}
.ref{display:inline-flex;align-items:center;gap:2px}
.rules{list-style:none;margin:0;padding:0;background:var(--card);border:1px solid var(--border);border-radius:var(--radius)}
.rules>li{display:flex;gap:14px;padding:14px 16px;border-top:1px solid var(--border)}
.rules>li:first-child{border-top:0}
.rules .n{flex:none;width:22px;font-weight:700;color:var(--text-2);font-variant-numeric:tabular-nums}
.rules .body{flex:1;min-width:0}
.rules .t{display:block;font-weight:600}
.rules .by{display:block;margin-top:2px;font-size:12px;color:var(--text-2)}
.rules .by .ref svg{width:12px;height:12px}
.stamp.prose{font-size:13px;color:var(--text-2)}
.stamp.prose h2{font-size:13px;margin-bottom:4px;color:var(--text-2)}
.sources{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
/* 자료 카드(HUB-D25): [링크: 역할 · 상태 · 출처 / 제목] + 말풍선 → [원래 이름] + [자세히] → 열람 줄 → 펼친 자세히 */
.srcbox{background:var(--card);border:1px solid var(--border);border-radius:10px}
.srcbox:has(a.src:hover){border-color:var(--ring)}
.srcbox:has(.src:target),.srcbox.just{border-color:var(--accent)}
.srcbox:has(.src:target){box-shadow:0 0 0 2px var(--accent-soft)}
.srchead{display:flex;align-items:flex-start}
.src{flex:1;min-width:0;display:block;padding:12px 14px 4px;color:var(--foreground);text-decoration:none;scroll-margin-top:72px}
a.src:hover{color:var(--foreground)}
a.src:focus-visible{outline-offset:-2px;border-radius:10px}
.src .tag{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.src .tag .chip{margin:0;vertical-align:0}
.src .meta{font-size:12px;color:var(--text-2)}
.src .t{display:flex;align-items:center;gap:4px;margin-top:4px;font-size:14px;font-weight:700;overflow-wrap:anywhere}
.src .t svg{flex:none}
.srchead .fb{margin:6px 6px 0 -10px}
.srcmore{display:flex;align-items:center;gap:8px;min-height:28px;padding:0 6px 4px 14px}
.srcmore .raw{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--text-2)}
.morebtn{flex:none;display:inline-flex;align-items:center;gap:2px;height:28px;padding:0 6px;border:0;border-radius:6px;background:transparent;color:var(--text-3);font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.morebtn:hover{color:var(--foreground)}
.morebtn[aria-expanded=true]{background:var(--background);background:color-mix(in srgb,var(--border) 55%,var(--card));color:var(--foreground);font-weight:700}
.morebtn[aria-expanded=true] svg{transform:rotate(180deg)}
.srcnote{display:flex;align-items:flex-start;gap:6px;margin:0;padding:0 14px 10px;font-size:12px;color:var(--text-3)}
.srcnote.strong{color:var(--foreground)}
.srcnote svg{flex:none;margin-top:2px}
.srcnote.keptnote{display:block}
.srcnote .instead{display:block}
.srcdetail{margin:0;padding:12px 14px 14px;border-top:1px solid var(--border);font-size:12px;line-height:1.6}
.srcdetail dt{font-weight:700;color:var(--text-2)}
.srcdetail dd{margin:0 0 8px}
.srcdetail dd.wrap{overflow-wrap:anywhere}
.srcdetail dd.hint{color:var(--text-2)}
.srcdetail dd.fixed{display:flex;align-items:center;gap:6px;margin-bottom:2px}
.srcdetail dd.fixed code{flex:1;min-width:0;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;overflow-wrap:anywhere}
.srcdetail dd.state{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:2px 0 0}
.srcdetail dd.state>span{margin-right:4px}
.mini{flex:none;height:28px;padding:0 8px;border:1px solid var(--border);border-radius:6px;background:var(--card);color:var(--foreground);font:inherit;font-size:12px;font-weight:600;white-space:nowrap;cursor:pointer}
.mini:hover{border-color:var(--line-2)}
.srcform{margin:0;padding:12px 14px 14px;border-top:1px solid var(--border);font-size:12px;line-height:1.6}
.srcform .t{margin:0 0 8px;font-size:13px;font-weight:700}
.srcform label{display:block;font-weight:700;color:var(--text-2)}
.srcform label span{font-weight:400}
.srcform textarea,.srcform input{display:block;width:100%;margin:4px 0 8px;padding:8px 10px;border:1px solid var(--line-2);border-radius:8px;background:var(--card);color:var(--foreground);font:inherit;font-size:13px;line-height:1.5}
.srcform textarea{resize:vertical}
.srcform input{height:36px;padding:0 10px}
.srcform .guide{margin:0 0 10px;color:var(--text-2)}
.srcform .err{margin:0 0 8px;color:var(--danger)}
.srcform .acts{display:flex;justify-content:flex-end;gap:8px}
.srcform .acts .btn{min-height:36px}
.srcdone{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0;padding:10px 14px 12px;border-top:1px solid var(--border);font-size:12px}
.srcdone>span{flex:999 1 150px;min-width:0}
.rel{margin:0;font-size:14px}

/* ── 처음 왔다면 ── 번호가 붙은 걸음 카드 */
.cta{display:inline-flex;align-items:center;gap:2px;min-height:40px;padding:0 14px;border:1px solid var(--primary);border-radius:8px;background:var(--primary);color:var(--primary-fg);font-size:14px;font-weight:700;text-decoration:none}
.cta:hover{color:var(--primary-fg);filter:brightness(1.08)}
.cta.quiet{border-color:var(--border);background:var(--card);color:var(--foreground);font-weight:600}
.cta.quiet:hover{color:var(--foreground);border-color:var(--line-2);filter:none}
.startpage .sub{margin-bottom:24px}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.step{display:flex;gap:16px;align-items:flex-start;padding:20px}
.step .no{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:999px;background:var(--accent-soft);color:var(--accent-2);font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
.step .in{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:14px 32px;align-items:flex-start}
.step .txt{flex:999 1 380px;min-width:0}
.step h2{font-size:18px;line-height:1.4;margin:3px 0 6px}
.step .txt p{margin:0 0 12px;color:var(--text-3)}
.step .peek{flex:1 1 300px;max-width:380px;min-width:0}
.step .peek h3{font-size:12px;font-weight:700;color:var(--text-2);margin:6px 0}
.step .peek ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.step .peek li{font-size:13px;line-height:1.5}
.step .peek b{display:block;font-weight:600}
.step .peek span{display:block;font-size:12px;color:var(--text-2)}

/* 칩 줄(보관 화면에서 좁히기) */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.chips button{height:38px;padding:0 14px;border:1px solid var(--border);border-radius:999px;background:var(--card);color:var(--foreground);font:inherit;font-size:13px;cursor:pointer}
.chips button[aria-pressed=true]{border-color:var(--primary);background:var(--primary);color:var(--primary-fg);font-weight:700}

/* ── 의견 남기기 ── 줄 끝의 말풍선, 쓰는 칸, 의견 묶음 */
.hero.split.tight{margin:8px 0 20px;gap:8px 16px}
.hero.split.tight h1{margin:0}
.titlerow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 4px}
.titlerow .chip{font-size:12px;color:var(--text-2)}
.titlerow .chip.on{color:var(--accent-2)}
.titlerow .chip.next{color:var(--text-3);border-color:var(--line-2)}
.titlerow .chip.draft{border-color:var(--line-2)}
.crumbrow{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px}
.crumbrow .crumb{flex:999 1 320px;min-width:0}
.spnav{flex:none;display:inline-flex;flex-wrap:wrap;gap:4px 14px;font-size:13px}
.spnav a{display:inline-flex;align-items:center;gap:2px;color:var(--text-3);font-weight:600;text-decoration:none}
.spnav a:hover{color:var(--accent-2)}
.quick{display:flex;flex-wrap:wrap;gap:8px}
.quick .phone{display:none}
/* 스프린트 정리 한 장의 머리 카드(T_Sprint · T_Sprint_Heads) */
.sphead{padding:20px}
.sphead .row{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.sphead h2{font-size:13px;font-weight:700;color:var(--text-2);margin:0}
.sphead .go{margin-left:auto}
.sphead .goal{margin:4px 0 0;font-size:20px;line-height:1.5;font-weight:700}
.sphead .goal.blank{font-size:18px;color:var(--text-2)}
.sphead .why{margin:2px 0 0;font-size:13px;color:var(--text-2)}
.sphead dl{display:grid;grid-template-columns:max-content 1fr;gap:10px 16px;margin:16px 0 0;padding-top:14px;border-top:1px solid var(--border);font-size:14px}
.sphead dt{color:var(--text-2)}
.sphead dd{margin:0;min-width:0}
.sphead dd.blank{color:var(--text-2)}
.sched{list-style:none;display:flex;flex-wrap:wrap;gap:10px 0;margin:4px 0 0;padding:0}
.sched li{flex:1 1 120px;min-width:0}
.sched .rail{display:flex;align-items:center}
.sched .dot{flex:none;width:12px;height:12px;border-radius:999px;background:var(--card);border:2px solid var(--dot)}
.sched .line{flex:1;height:2px;background:var(--border)}
.sched li.today .dot{background:var(--accent);border-color:var(--accent)}
.sched .when{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;margin-top:6px;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.sched .what{display:block;padding-right:10px;font-size:13px;color:var(--text-3)}
.sphead .basis{display:block;margin-top:6px;font-size:12px;color:var(--text-2)}
.sphead .owners+.basis{margin-top:4px}
.sphead .basis a{display:inline-flex;align-items:center;gap:2px}
.owners{list-style:none;display:flex;flex-wrap:wrap;gap:2px 20px;margin:0;padding:0}
.owners li{display:inline-flex;align-items:baseline;gap:6px}
.owners span{color:var(--text-3)}
/* 흐름의 표(날짜 · 무엇 · 어디에 적혀 있나): 좁으면 그 상자 안에서 옆으로 민다 */
.flow .tablewrap table{width:100%;font-size:13px;line-height:1.6}
.flow .tablewrap th,.flow .tablewrap td{padding:10px 8px}
.flow .tablewrap th{white-space:nowrap}
.flow .tablewrap th:first-child,.flow .tablewrap td:first-child{padding-left:16px;padding-right:12px}
.flow .tablewrap th:last-child,.flow .tablewrap td:last-child{padding-right:16px}
.topicpage[data-sprint] .flow .tablewrap table{min-width:560px}
.topicpage[data-sprint] .flow .tablewrap td:first-child{white-space:nowrap;font-weight:600;font-variant-numeric:tabular-nums}
.topicpage[data-sprint] .flow .tablewrap td:last-child{width:212px;color:var(--text-3)}
.flow td .chip.today{margin-left:4px;padding:1px 6px}
/* 「다음 스프린트로 넘긴 것」: 정한 것과 같은 줄에서 번호만 뺀 것 */
.rules.handed>li{gap:12px}
.rules.handed>li.onward{padding:0}
.rules.handed .onward a{flex:1;display:flex;align-items:center;gap:2px;min-height:44px;padding:0 16px;font-size:13px;font-weight:700;text-decoration:none}
/* 오른쪽 칸의 「이 스프린트의 자료」 */
.hublist{list-style:none;margin:0;padding:0;background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.hublist li+li{border-top:1px solid var(--border)}
.hublist a{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 12px 0 14px;color:var(--foreground);font-size:14px;text-decoration:none}
.hublist a:hover{background:var(--background)}
.hublist a:focus-visible{outline-offset:-2px;border-radius:10px}
.hublist .name{flex:1;min-width:0}
.hublist .num{font-size:13px;color:var(--text-2);font-variant-numeric:tabular-nums}
.hublist svg{color:var(--text-2)}
.sidenote{margin:8px 0 0;font-size:13px;color:var(--text-2)}
/* "처음 왔다면"에서 넘어왔을 때만 보이는 걸음 줄(T_Product) */
.trail{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin:10px 0 0;padding:8px 12px 8px 14px;background:var(--card);border:1px dashed var(--line-2);border-radius:var(--radius);font-size:13px}
.trail .no{flex:none;font-weight:700;color:var(--accent-2)}
.trail .say{flex:999 1 200px;min-width:0;color:var(--text-3)}
.trail a{display:inline-flex;align-items:center;min-height:28px}
.trail .back{color:var(--text-3);font-weight:600}
.pager+.pager{margin-top:12px;padding-top:0;border-top:0}
/* 맨 아래의 앞뒤 스프린트 · 다음 걸음 카드 */
.pager{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;padding-top:20px;border-top:1px solid var(--border)}
.pager a{flex:1 1 260px;min-width:0;display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);color:var(--foreground);text-decoration:none}
.pager a:hover{border-color:var(--ring)}
.pager a.newer{justify-content:flex-end;text-align:right}
.pager a>span{min-width:0}
.pager .k{display:block;font-size:12px;color:var(--text-2)}
.pager b{display:block;font-size:15px}
.pager svg{flex:none;color:var(--text-2)}
.hero.split .hot{font-weight:700;color:var(--accent-2)}
.maincol .h{display:flex;align-items:center;gap:8px;margin:0 0 10px}
.flow .h{margin-bottom:6px}
.maincol .h h2{flex:1;margin:0}
.glance .h{margin-bottom:4px}
.fb{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:32px;height:32px;padding:0;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--muted);font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.fb:hover{color:var(--foreground)}
.fb.has{padding:0 8px;border-color:var(--accent-line);background:var(--card);color:var(--accent-2)}
.fb[aria-pressed=true]{background:var(--accent-soft);color:var(--accent-2)}
.fb .n:empty{display:none}
.glance .fb{margin:-4px -6px -4px 0}
.topicpage[data-fb-bubbles=hover] .fb:not(.has):not([aria-pressed=true]){opacity:0}
.topicpage[data-fb-bubbles=hover] [data-fb-part]:hover>.fb,.topicpage[data-fb-bubbles=hover] [data-fb-part]:hover>.h>.fb,.topicpage[data-fb-bubbles=hover] [data-fb-part]:hover>.srchead>.fb,.topicpage[data-fb-bubbles=hover] .fb:focus-visible{opacity:1}
[id^="fb-"]{scroll-margin-top:72px}
.rules>li{flex-wrap:wrap;padding-right:10px}
.rules>li:target,.opens>li:target{background:var(--accent-soft)}
.rules>li>.fbform,.rules>li>.fbsent{flex:1 1 100%;margin:2px 0 2px 36px}
.opens{list-style:none;margin:0;padding:0}
.opens>li{display:flex;flex-wrap:wrap;gap:10px;padding:6px 10px 6px 0;border-radius:8px}
.opens .dot{flex:none;width:5px;height:5px;margin-top:10px;border-radius:999px;background:var(--text-2)}
.opens .body{flex:1;min-width:0}
.opens>li>.fbform,.opens>li>.fbsent{flex:1 1 100%;margin:2px 0 6px 15px}
.srcbox>.fbform,.srcbox>.fbsent{margin:0 8px 8px}
section>.fbform,section>.fbsent{margin-top:12px}
.fbform{padding:14px 16px;background:var(--card);border:1px solid var(--accent);border-radius:var(--radius)}
.fbform.plain{padding:18px 20px;border-color:var(--border)}
.fbform .lab{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;font-size:13px;font-weight:700}
.fbform .lab span{font-weight:400;color:var(--text-2)}
.fbform .lab .more{margin-left:auto;font-weight:600}
.fbform textarea,.fbform input[type=text]{display:block;width:100%;margin-top:8px;padding:10px 12px;border:1px solid var(--line-2);border-radius:8px;background:var(--card);color:var(--foreground);font:inherit;line-height:1.6}
.fbform textarea{resize:vertical}
.fbform input[type=text]{height:40px;margin-top:6px;padding:0 12px;font-size:14px}
.fbform .foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.fbform .hint{flex:999 1 220px;min-width:0;font-size:12px;color:var(--text-2)}
.fbform .err{font-size:12px;color:var(--danger)}
.fbform .lead{margin-bottom:14px}
.fbform .lead p{margin:0}
.fbform .lead .t{font-weight:700}
.fbform .lead .s{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:4px;font-size:13px;color:var(--text-2)}
.btn.primary{border-color:var(--primary);background:var(--primary);color:var(--primary-fg);font-weight:700}
.btn.primary:hover{border-color:var(--primary);color:var(--primary-fg);filter:brightness(1.08)}
.btn.primary:disabled{border-color:var(--border);background:var(--background);color:var(--muted);cursor:default;filter:none}
.fbstate fieldset{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;padding:0;border:0}
.fbstate legend{padding:0;margin:0 0 6px;font-size:13px;font-weight:700}
.fbstate .radio{display:inline-flex;align-items:center;gap:6px;min-height:32px;font-size:14px}
.fbstate .radio:has(input:checked){font-weight:700}
.fbstate .radio input{width:16px;height:16px;margin:0;accent-color:var(--primary)}
.fbstate .lab{margin-top:10px}
.feedback{padding-top:20px;border-top:1px solid var(--border)}
.feedback .headline{margin:0 0 10px}
.feedback .entry{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:12px}
.feedback .tip{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--text-2)}
.feedback .fbform,.feedback .fbsent{margin-bottom:12px}
.feedback .blocked{display:flex;gap:8px;margin:0;padding:14px 16px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);font-size:14px;color:var(--text-3)}
.feedback .blocked svg{margin-top:2px;color:var(--text-2)}
.fbempty{padding:16px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius)}
.fbempty p{margin:0}
.fbempty .t{font-weight:700}
.fbempty .s{margin-top:4px;font-size:13px;color:var(--text-2)}
.fblist{list-style:none;margin:0;padding:0;background:var(--card);border:1px solid var(--border);border-radius:var(--radius)}
.fblist>li{padding:14px 16px;border-top:1px solid var(--border)}
.fblist>li:first-child{border-top:0}
.fblist .line1{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.pill{flex:none;display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;border:1px solid var(--border);border-radius:999px;padding:1px 8px}
.pill.open{color:var(--accent-2);border-color:var(--accent-line)}
.pill.reflected{padding-left:6px;color:var(--foreground);border-color:var(--line-2)}
.pill.kept{padding-left:6px;color:var(--text-2)}
.fblist .where{font-size:13px;font-weight:600}
.fblist span.where{color:var(--text-3)}
.fblist .who{margin-left:auto;display:inline-flex;align-items:baseline;gap:6px;font-size:12px;color:var(--text-2)}
.fblist .who b{color:var(--accent-2)}
.fblist p{margin:6px 0 0}
.fblist .quote{font-size:13px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fblist .text{white-space:pre-line;overflow-wrap:anywhere}
.fblist .note2{display:flex;gap:8px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line-2);font-size:14px}
.fblist .note2 svg{margin-top:4px;color:var(--text-2)}
.fblist .note2 strong{font-size:13px}
.fblist .acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.fblist .acts .btn{min-height:36px;padding:0 10px}
.fblist .acts .ask{font-size:13px;color:var(--text-3)}
.fblist .acts svg{color:var(--text-2)}
.fblist .fbform{margin:10px 0 0}
.link{height:36px;padding:0 8px;border:0;border-radius:8px;background:transparent;color:var(--text-2);font:inherit;font-size:13px;text-decoration:underline;cursor:pointer}

/* ── 보관한 자료 ── 상태 셋, 살펴볼 제안, 보관한 자료 */
/* "수정"(10-15 C): 두 자리에 나오는 자료의 나중 자리 줄. 참고와 같은 회색 테두리의 작은 표시. */
.chip.ref,.chip.kept,.chip.edit{margin-left:6px;vertical-align:1px;padding:1px 8px;color:var(--text-2);border-color:var(--line-2)}
.states{display:flex;flex-wrap:wrap;gap:12px 0;margin:0 0 8px;padding:16px 0;background:var(--card);border:1px solid var(--border);border-radius:var(--radius)}
.states>div{flex:1 1 280px;min-width:0;padding:0 20px}
.states dt{display:flex;align-items:baseline;gap:8px;font-size:15px;font-weight:700}
.states dt span{font-size:13px;font-weight:400;color:var(--muted)}
.states dd{margin:4px 0 0;font-size:13px;color:var(--text-3)}
.states .chip.ref{margin:0}
.archivepage .notice{margin-top:12px;margin-bottom:0}
.asec{margin-top:28px}
.asec+.asec{margin-top:32px}
.asec .headline{margin:0 0 10px}
.asec .chips{margin-bottom:12px}
#kept .chips{margin-bottom:16px}
.plainrows{list-style:none;margin:0;padding:0;background:var(--card);border:1px solid var(--border);border-radius:var(--radius)}
.plainrows>li{border-top:1px solid var(--border)}
.plainrows>li:first-child{border-top:0}
.plainrows .none{padding:14px 16px;font-size:14px;color:var(--text-2)}
.sg{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px 16px;padding:14px 16px}
.sg .main{flex:999 1 420px;min-width:0}
.sg .head{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
.sg .t,.kp .t{font-size:15px;font-weight:700;color:var(--foreground);text-decoration:none}
.sg .t:hover,.kp .t:hover{color:var(--accent-2)}
.sg .path{font-size:12px;color:var(--text-2)}
.sg .path b{color:var(--foreground)}
.sg .tags{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin-top:6px}
.sg p,.kp p{margin:2px 0 0;font-size:13px}
.sg .why{margin-top:6px;color:var(--text-3)}
.instead{color:var(--text-2)}
.instead a{font-weight:600}
.sg .meta,.kp .meta{font-size:12px;color:var(--text-2)}
.sg .acts{flex:none;display:flex;flex-wrap:wrap;gap:8px}
.kgroup{margin-bottom:20px}
.kgroup .gh{margin:0 0 8px}
.kp{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;padding:10px 16px}
.kp .when{flex:none;width:104px;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.kp .what{flex:999 1 300px;min-width:0}
.kp .t{display:inline-flex;align-items:center;gap:4px}
.kp .why{display:block;font-size:13px;color:var(--text-3)}
.kp .side{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.kp .side .btn{min-height:36px;padding:0 10px 0 12px;gap:4px}
.kp .side .btn svg{color:var(--text-2)}
.menuwrap{position:relative;display:inline-flex}
.menu{position:absolute;top:calc(100% + 4px);right:0;z-index:4;min-width:140px;padding:4px;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow)}
.menu button{display:block;width:100%;height:36px;padding:0 10px;border:0;border-radius:6px;background:transparent;color:var(--foreground);font:inherit;font-size:13px;text-align:left;white-space:nowrap;cursor:pointer}
.menu button:hover{background:var(--background)}

@media(max-width:900px){
  .cols{display:flex;flex-direction:column;align-items:stretch;gap:20px}
  .side{padding-top:20px;border-top:1px solid var(--border)}
}
/* 폰 너비(HUB-D15 · D16 · D16a · D16b): 누를 곳은 높이 44, 카드는 한 줄로 쌓인다. 표는 표 상자만 가로로 민다. */
@media(max-width:640px){
  /* 바로가기 두 줄(카드 둘씩), 사람 태그는 본문 끝까지 밀리는 한 줄, 누를 곳은 44 */
  .scgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .scbtn{min-height:44px}
  .ptags{margin:14px -16px 0;padding:0 16px}
  .ptag{height:40px}
  .pchip{height:44px}
  .top{padding:2px 16px}
  .top .brand{min-height:44px}
  .avatar{position:relative}
  /* 프로필 메뉴: 화면 양옆 10px 안쪽까지 넓힌다(머리 줄 바로 아래, 데스크톱과 같은 6px 틈) */
  .pmenu{position:fixed;top:48px;left:10px;right:10px;width:auto;max-width:none}
  /* 스프린트 카드: 가로 일정 줄 대신 접힘(막대) · 펼침(세로 일정) */
  .spcard .tl{display:none}
  .mbar{display:block}
  .vtoggle{display:flex}
  .spcard.open .mbar{display:none}
  .spcard.open .vtl{display:block}
  /* 첫 화면 카드: 핀은 보이는 크기 28 그대로, 누르는 곳만 44로. 띠의 단추도 위아래로 넓힌다 */
  .pin::after{content:"";position:absolute;inset:-8px}
  .askbar button{position:relative}
  .askbar button::after{content:"";position:absolute;inset:-8px 0}
  .avatar::after{content:"";position:absolute;inset:-4px}
  .pitem{min-height:44px}
  .seg3 label{height:44px;padding:0 11px}
  .seg a{height:44px;padding:0 12px}
  .topic{padding:16px}
  .under a{display:inline-flex;align-items:center;min-height:44px}
  .step{flex-wrap:wrap}
  /* 자료 줄: 날짜가 늘 제목 위 한 줄 → 제목 → 한 줄 설명 → 맨 아래에 왼쪽 가는 곳, 오른쪽 쓴 사람 · 출처 */
  /* 필터 줄: 찾기 칸 한 줄 → 칩이 한 줄에서 옆으로 밀림 → "자료 n개" 한 줄 */
  .filters{display:block;margin-bottom:16px}
  .filters input{display:block;width:100%;height:44px;font-size:16px}
  .pills{display:flex;flex-wrap:nowrap;gap:8px;margin:8px -16px 0;padding:0 16px 4px;overflow-x:auto}
  .pick{flex:none;height:44px}
  .pick select{height:42px;max-width:none;padding:0 34px 0 14px}
  .tally{display:block;margin:6px 0 0}
  /* 고르기 칸(폰): 보기 단추와 같은 높이, "목록" 글 없이 ⌄만. 목록 패널은 맨 위 줄에 맞춰 본문 폭 */
  .spick{position:static}
  .spick #sp-open{height:52px;gap:8px;padding:0 10px 0 12px}
  .plist .t{display:none}
  .sprints{left:0;right:0;width:auto;min-width:0}
  /* 자료 줄(폰): 날짜 · 제목 · ⌄ 한 줄, 출처와 쓴 사람은 제목 아래로 */
  .srow{flex-wrap:wrap}
  .srow .when{order:1}
  .srow .what{order:2}
  .srow .chev{order:3}
  .srow .src{order:4;flex-basis:100%;max-width:none;padding:0 0 0 58px}
  .sdetail{padding-left:16px}
  .sprintcard .go{min-height:44px}
  .fb{min-width:44px;height:44px}
  /* 정리 한 장(T_Topic_Phone · T_Sprint_Phone): 제목 아래에 단추 둘이 반반, 앞뒤 스프린트는 위치 줄에서 빼고 맨 아래 카드로 */
  .spnav{display:none}
  .hero.split.tight{margin-bottom:20px}
  .quick{flex:1 1 100%;margin-top:8px}
  .quick .btn{flex:1 1 130px;justify-content:center;min-height:44px;border-radius:10px}
  .quick .phone{display:inline-flex}
  .hublist a{min-height:44px}
  .trail a{min-height:44px}
  .rel a{display:inline-flex;align-items:center;min-height:44px}
  /* 자료 카드(C_Card_Phone): 말풍선 · "자세히" · [복사] · 상태 단추는 44, 펼친 안의 글자는 13, 상태 단추 둘은 상태 글자 아래에 반반 */
  .srchead .fb{margin:0 0 0 -10px}
  .srcmore{min-height:44px}
  .morebtn{height:44px;padding:0 10px;border-radius:8px}
  .srcdetail{font-size:13px}
  .srcdetail dd{margin-bottom:10px}
  .srcdetail dd.fixed{gap:8px;margin-bottom:2px}
  .mini{height:44px;padding:0 14px;border-radius:10px;font-size:13px}
  .srcdetail dd.state{gap:6px 8px}
  .srcdetail dd.state>span{flex:1 1 100%;margin:0}
  .srcdetail dd.state .mini{flex:1 1 130px;padding:0 10px}
  .srcform textarea,.srcform input{font-size:16px}
  .srcform input{height:44px}
  .srcform .acts .btn{min-height:44px}
  /* 보관 화면(HUB-D19a): 상태 셋은 세로로, 칩 줄은 옆으로 밀고, 버튼은 44 */
  .states>div{flex-basis:100%}
  .asec .chips{flex-wrap:nowrap;margin-left:-16px;margin-right:-16px;padding:0 16px 4px;overflow-x:auto}
  .chips button{flex:none;height:44px}
  .sg .acts{flex:1 1 100%;flex-wrap:nowrap}
  .sg .acts .btn{flex:1 1 0;justify-content:center;min-height:44px}
  .kp .when{flex:1 1 100%;width:auto}
  .kp .when:empty,.kp .when.none{display:none}
  .kp .what{flex:1 1 100%}
  .kp .side{flex:1 1 100%;flex-direction:row-reverse;align-items:center;justify-content:space-between;gap:8px;margin-top:4px}
  .kp .side .btn{min-height:44px}
  .rules>li>.fbform,.rules>li>.fbsent{margin-left:0}
  .rel{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px}
  /* 의견 남기기(F_Feedback_Phone): 쓰는 칸은 그 줄 아래 폭 전체, 글 칸 글자 16, [취소] [의견 남기기]는 44로 나란히 */
  .opens>li>.fbform,.opens>li>.fbsent{margin:4px 0 6px}
  .fbform{padding:14px}
  .fbform .lab{display:block}
  .fbform .lab span,.fbform .lab .more{display:block;margin:0}
  .fbform textarea,.fbform input[type=text]{font-size:16px}
  .fbform .foot{gap:8px}
  .fbform .hint{flex:1 1 100%;margin-bottom:2px}
  .fbform .foot .btn{flex:1;justify-content:center;min-height:44px;border-radius:10px;font-size:14px}
  .fbform .foot .btn.primary{flex:2}
  /* 의견 한 줄: 쓴 사람 줄이 상태 줄 아래로, 단추는 44 */
  .fblist>li{padding:14px}
  .fblist .who{flex:1 1 100%;margin-left:0}
  .fblist .acts .btn{min-height:44px;padding:0 12px;border-radius:10px}
  .link{height:44px;padding:0 10px}
  .feedback .entry .btn{flex:1 1 100%;justify-content:center;min-height:44px;border-radius:10px}
  .fbstate .radio{min-height:44px}
  /* 의견이 없을 때: 쓰는 칸을 펼치지 않고 단추 하나 */
  .fbempty .btn{width:100%;justify-content:center;min-height:44px;margin-top:12px;border-radius:10px}
}