/* moa — 팀 기록 로그 뷰어. * * 색은 tokens.css(Wanted Design System)에서 온다. 컴포넌트는 변수만 쓴다 — * 규칙(#378) 개정 전과 같다. 바뀐 것은 moa 테마 덮어쓰기를 허용한 것 하나다: * tokens.css는 도구가 다시 내보내는 자동 생성물이라 거기에 손을 대면 다음 * 내보내기에 날아간다. 그래서 덮어쓸 값은 아래 :root의 「moa 테마」 한 블록에만 * 적는다(tokens.css 다음에 읽히므로 이긴다). 그 블록 밖에서는 여전히 색을 * 적지 않는다 — 값이 파일 곳곳에 흩어지는 것을 막자는 원래 취지는 그대로다. * 근거는 docs/결정/결정기록_테마색.md. * * 간격·타이포 스케일은 Wanted 변수에 없어서 여기 둔다. 4px 격자와 * Pretendard 기준이다. * * 화면은 **피드**다. 보고서가 아니라 서로 보는 자리라서, 사람이 먼저 * 오고 글이 뒤에 온다. 색은 프로젝트에만 쓴다 — 사람에게 색이나 게이지를 * 붙이는 순간 그건 감시가 된다. */ :root { /* moa 테마. 자동 생성된 tokens.css를 다시 내보내도 유지한다. */ --background-normal-alternative: #fafbff; --label-alternative: #5b6472; --line-solid-neutral: #e4eaf2; --line-solid-normal: #dce3ed; --surface-selected: #eef4ff; --surface-selected-hover: #e3edff; --orbit-background: #f0f6ff; --orbit-edge: #fafcff; --orbit-line: #dce7f5; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 48px; --fs-cap: 12px; --lh-cap: 16px; --fs-sm: 13px; --lh-sm: 18px; --fs-md: 15px; --lh-md: 25px; /* 본문. 긴 한글 문단이라 넉넉하게 */ --fs-lg: 17px; --lh-lg: 24px; --fs-xl: 24px; --lh-xl: 32px; --r-sm: 8px; --r-md: 14px; --r-pill: 999px; --avatar: 40px; --rail: 44px; } /* 서체는 리포에 넣고 직접 준다(SIL Open Font License). 폴백을 두지 않는 * 이유는 폴백이 곧 "사람마다 다른 화면"이기 때문이다 — 못 받으면 안 받은 * 티가 나야 고친다. */ @font-face { font-family: "Pretendard Variable"; src: url("/static/fonts/PretendardVariable.woff2") format("woff2-variations"); font-weight: 45 920; font-style: normal; font-display: swap; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--background-normal-alternative); color: var(--label-normal); font-family: "Pretendard Variable", sans-serif; font-size: var(--fs-md); line-height: var(--lh-md); -webkit-font-smoothing: antialiased; } /* 한글은 어절 중간에서 끊지 않는다. 문장·단어 경계에서만 넘긴다. */ body, .prose, .post__text { word-break: keep-all; overflow-wrap: anywhere; } a { color: var(--primary-normal); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } :focus-visible { outline: 2px solid var(--primary-normal); outline-offset: 2px; border-radius: var(--r-sm); } /* --label-assistive는 28% 불투명도라 흰 배경에서 대비가 거의 안 난다 * (~1.7:1) — 진짜로 안 읽혀도 되는 것(placeholder·비활성 상태·장식 * 아이콘)에만 남기고, 사람이 실제로 읽어야 하는 보조 글자는 61%인 * --label-alternative로 올린다(~4.7:1, WCAG AA 통과). */ .meta { font-size: var(--fs-cap); line-height: var(--lh-cap); color: var(--label-alternative); font-variant-numeric: tabular-nums; } /* 빵부스러기. .meta(12px)를 그대로 쓰면 실제로 누르는 길 안내인데도 * 캡션처럼 작아서 눈에 안 띈다는 지적 — 본문 크기로 올린다. */ .crumbs { font-size: var(--fs-md); color: var(--label-alternative); margin: 0 0 var(--sp-2); } /* ── 메뉴(GNB) ──────────────────────────────────── * 넓은 화면은 왼쪽 세로, 좁은 화면은 접히는 머리. * 마크업은 한 벌이고 여기서 두 모습으로 가른다 — 두 벌 두면 * 하나만 고치는 실수가 난다. */ .shell { display: grid; grid-template-columns: 200px 1fr; min-height: 100vh; } /* 본문 칸이 min-width:auto로 커져 넓은 표가 메뉴를 밀어내는 것을 막는다. */ .shell__body { min-width: 0; } .gnb { position: sticky; top: 0; align-self: start; height: 100vh; z-index: 5; display: flex; flex-direction: column; gap: var(--sp-5); padding: var(--sp-5) var(--sp-4); /* 배경이 불투명해져서 backdrop-filter는 뺐다 — 뒤가 비치지 않으면 블러가 할 일이 없다. 다시 반투명으로 돌리면 그때 같이 되살린다. */ background: var(--background-normal-normal); border-right: 1px solid var(--line-solid-neutral); } .gnb__brand { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-lg); font-weight: 800; color: var(--label-normal); } .gnb__brand:hover { text-decoration: none; } .gnb__mark { display: block; } .gnb__word { letter-spacing: -.03em; } /* 브랜드 아래에 붙인다. 옆에 두면 좁은 화면에서 먼저 잘려 나간다. */ .gnb__tag { margin: calc(var(--sp-3) * -1) 0 0; font-size: var(--fs-sm); font-weight: 600; color: var(--label-alternative); } .gnb .search { width: 100%; } /* 돋보기를 입력칸 안에 넣는다. 자료실·주간처럼 빈 검색칸이 심심해 보이던 * 것과 같은 지적이라 여기도 아이콘을 준다(#153 UI 정리). */ .gnb__search { position: relative; } .gnb__search-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--label-assistive); pointer-events: none; } .gnb .search { padding-left: 34px; } /* 넓은 화면에서는 접는 손잡이를 숨기고 내용만 편다. * details는 안 열려 있으면 브라우저가 내용을 감춘다 — 자식에 display를 줘도 * 안 나온다. ::details-content로 그 감춤을 푼다. * * **미디어쿼리 안에 둬야 한다.** 밖에 두면 좁은 화면에서도 감춤이 풀려 * 메뉴가 늘 열린 채가 되고, 햄버거를 눌러도 아무 일이 안 일어난다. */ @media (min-width: 861px) { .gnb__fold > .gnb__sum { display: none; } .gnb__fold::details-content { content-visibility: visible; block-size: auto; } /* 벨이 메뉴 목록 맨 아래 프로필 줄 밑에 아이콘 하나만 따로 한 줄 차지하고 * 떠 있어 자리가 어색하다는 지적(실사용) — 마크업은 그대로 두고(모바일 * 접힌 메뉴 안 배치는 그대로 써야 한다) .gnb가 이미 sticky라 위치 기준이 * 되니, 넓은 화면에서만 로고 줄 오른쪽 끝으로 떼어 붙인다. * .gnb .gnb__bell로 명시도를 올린다 — 뒤에 나오는 .vault__menu{position: * relative}가 클래스 하나짜리라 순서상 그냥 .gnb__bell을 덮어썼었다. */ .gnb .gnb__bell { position: absolute; top: var(--sp-5); right: var(--sp-4); } } /* 그 선택자를 모르는 브라우저에서는 넓은 화면에서도 손잡이를 보인다. * 메뉴가 통째로 사라지느니 접었다 펴는 손잡이가 하나 있는 편이 낫다. * CSS는 시험이 안 되므로 실패하는 쪽을 안전하게 정해 둔다. */ @supports not (selector(::details-content)) { .gnb__fold > .gnb__sum { display: flex !important; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); cursor: pointer; list-style: none; } .gnb__fold > .gnb__sum::-webkit-details-marker { display: none; } .gnb__burger { display: grid; place-items: center; width: 32px; height: 32px; margin-left: auto; color: var(--label-alternative); } } .gnb__menu { display: flex; flex-direction: column; gap: 2px; } .gnb__item { display: flex; align-items: center; gap: var(--sp-3); padding: 8px var(--sp-3); border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--label-alternative); } .gnb__item:hover { background: var(--fill-alternative); text-decoration: none; } /* 선택된 메뉴는 밝은 블루 면과 진한 파랑 글자로 구분한다. * * **면이 아니라 글자색이 신호다(#378).** 면(#eef4ff)은 페이지 배경과 대비가 * 1.07:1이라 면만으로는 뭐가 켜졌는지 알기 어렵다. 진한 파랑 채움도 띄워 * 봤지만 사이드바 한 줄이 통째로 파래져 너무 무거웠다. 글자는 5.00:1이라 * 읽는 데 문제가 없고, 색만으로 알리지 않도록 aria-current를 같이 둔다. * 자세한 것은 docs/결정/결정기록_테마색.md. */ .gnb__item.is-on { background: var(--surface-selected); color: var(--primary-strong); } .gnb__item.is-on:hover { background: var(--surface-selected-hover); } .gnb__item-icon { display: block; width: 20px; height: 20px; flex: 0 0 20px; color: var(--label-alternative); } .gnb__item.is-on .gnb__item-icon { color: var(--primary-strong); } /* 알림 배지·드롭다운(#248). .vault__menu 그대로 쓰되, 사이드바 폭이 * 300px보다 좁아 원래의 right:0 정렬로는 패널이 화면 밖으로 나간다 — * left:0으로 왼쪽에 붙이고 폭만 그대로 둔다. */ .gnb__bell { align-self: flex-start; } .gnb__bell .vault__menu-btn { position: relative; width: 32px; height: 32px; } .gnb__bell-count { position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: var(--r-pill); background: var(--danger, #e52222); color: var(--static-white); font-size: 10px; font-weight: 700; line-height: 15px; text-align: center; } .gnb__bell-panel { left: 0; right: auto; max-height: 70vh; overflow-y: auto; } .gnb__bell-item { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-2); border-radius: var(--r-sm); text-decoration: none; } .gnb__bell-item:hover { background: var(--fill-normal); } .gnb__bell-title { color: var(--label-normal); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gnb__bell-empty { padding: var(--sp-2); } /* 이동 목록 아래에 붙되 선 하나로 갈라 둔다 — 이어 붙으면 로그아웃이 * 메뉴 항목 하나처럼 보인다. */ /* 버전(#385). 사이드바 맨 아래, 길을 안 막는 자리다. */ /* label-assistive는 흰 바탕에서 대비가 1.68:1이라 거의 안 보인다(#385 리뷰). 버전은 「내가 보는 게 언제 것인가」에 답하려고 두는 것이라 읽혀야 한다. */ .gnb__ver { margin: var(--sp-2) 0 0; padding: 0 var(--sp-3); font-size: var(--fs-cap); color: var(--label-alternative); } .gnb__me { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line-solid-neutral); } .gnb__out-label { display: none; } .gnb__bell-label { display: none; } .gnb__name { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--label-alternative); } .gnb__out, .gnb__find { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r-pill); color: var(--label-assistive); } .gnb__out:hover, .gnb__find:hover { background: var(--fill-normal); color: var(--label-normal); } .gnb__find, .gnb__burger { display: none; } /* ── 좁은 화면: 머리로 접힌다 ───────────────────── */ @media (max-width: 860px) { /* 행 높이를 안 정하면 auto 행 둘이 남는 공간을 나눠 가져 머리 밑이 텅 빈다. */ .shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } .gnb { position: static; height: auto; padding: 0; border-right: 0; border-bottom: 1px solid var(--line-solid-neutral); gap: 0; } /* 브랜드와 검색창은 접히는 머리가 대신한다 — 지금 자리 이름이 브랜드다. */ .gnb__brand, .gnb__tag, .gnb__search { display: none; } /* .gnb와 같은 이유로 블러 없음 — 배경이 불투명하다. */ .gnb__fold { position: sticky; top: 0; background: var(--background-normal-normal); } .gnb__fold > .gnb__sum { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); cursor: pointer; /* 두 줄 다 있어야 한다. 하나만 쓰면 한쪽 브라우저에 삼각형이 남는다. */ list-style: none; } .gnb__fold > .gnb__sum::-webkit-details-marker { display: none; } .gnb__here { font-size: var(--fs-lg); font-weight: 800; color: var(--label-normal); letter-spacing: -.025em; } .gnb__find { display: grid; margin-left: auto; } .gnb__burger { display: grid; place-items: center; width: 32px; height: 32px; color: var(--label-alternative); } /* 펼치면 본문을 밀어 내린다. 덮으면 뒤에 뭐가 있었는지 잃는다. */ .gnb__menu { padding: 0 var(--sp-4); } .gnb__item { padding: 12px var(--sp-3); } /* 펼친 메뉴 안에서는 아이콘만으로 안 된다. 글자를 같이 보인다. */ .gnb__me { margin: var(--sp-3) var(--sp-4) 0; padding: var(--sp-3) var(--sp-3) var(--sp-4); } .gnb__name { font-size: 14px; } .gnb__out { width: auto; padding: 0 var(--sp-2); gap: var(--sp-2); margin-left: auto; grid-auto-flow: column; } .gnb__out-label { display: inline; font-size: 14px; font-weight: 600; } /* 접힌 메뉴에서는 벨이 아이콘 하나만 덩그러니 남아 있어서, 있는지도 * 몰랐다는 지적(실사용) — 다른 줄처럼 폭 전체를 쓰고 글자를 붙인다. */ .gnb__bell { align-self: stretch; margin: 0 var(--sp-4) var(--sp-3); } .gnb__bell .vault__menu-btn { width: auto; height: auto; justify-content: flex-start; gap: var(--sp-2); padding: 12px var(--sp-3); border-radius: 8px; color: var(--label-alternative); } .gnb__bell-label { display: inline; font-size: 14px; font-weight: 600; } .gnb__bell-count { position: static; margin-left: auto; } } .search { width: 220px; border: 0; border-radius: var(--r-pill); background: var(--fill-normal); padding: var(--sp-2) var(--sp-4); font: inherit; font-size: 14px; color: var(--label-normal); } .search::placeholder { color: var(--label-assistive); } /* 일반 입력 칸. .search(알약 모양, 찾기 창 전용)를 이름·사유 같은 보통 값 * 칸에도 돌려 쓰다 보니 폼마다 알약이 늘어서 어색했다 — 각진 모양으로 분리. */ .field { display: block; width: 100%; max-width: 360px; box-sizing: border-box; border: 1px solid var(--line-solid-neutral); border-radius: var(--r-sm); background: var(--background-normal-normal); padding: var(--sp-2) var(--sp-3); font: inherit; font-size: 14px; color: var(--label-normal); } .field::placeholder { color: var(--label-assistive); } .field:focus { outline: 0; border-color: var(--primary-normal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-normal) 12%, transparent); } /* 부차적인 자리(케밥 메뉴 속 "사진 추가"·"md 다시 올리기", 공지 사진 * 첨부)의 파일 입력은 JS로 숨기지 않는다 — 자료실 "올리기"·회의록 "파일 * 올리기" 같은 주력 업로드만 vault.js/meetings.js로 숨긴 input + * .vault__act 버튼을 쓴다. 대신 브라우저 기본 버튼 부분만 순수 CSS로 * 다시 입혀 촌스러운 회색 버튼을 없앤다 — 마크업·JS 추가 없이 전체 * 화면에 한 번에 적용된다. */ input[type="file"]::file-selector-button { margin-right: var(--sp-2); padding: 7px 14px; cursor: pointer; border: 1px solid var(--line-solid-normal); border-radius: var(--r-sm); background: var(--background-normal-normal); color: var(--label-normal); font-family: inherit; font-size: var(--fs-sm); font-weight: 600; } input[type="file"]::file-selector-button:hover { background: var(--fill-alternative); } /* **기본 화살표를 끄고 직접 그린다(#368).** select의 native 화살표는 * 테두리 바로 안쪽에 그려지고 .field의 오른쪽 padding은 그 바깥이라, * padding만 키우면 글자만 멀어지고 화살표는 끝에 붙은 채로 남는다. * ::file-selector-button을 CSS만으로 다시 입힌 것과 같은 길이다 — 마크업도 * JS도 안 늘리고 모든 화면의 select에 한 번에 먹는다. * * **선이 아니라 그라디언트 두 겹으로 그린다.** select는 자식을 못 가져 * 인라인 SVG를 넣을 수 없고, 외부 svg나 data URI는 토큰 색을 못 문다 — * 색을 직접 적지 않는다는 이 파일 머리말 규칙을 지키려면 이 방법뿐이다. */ select.field { cursor: pointer; appearance: none; -webkit-appearance: none; padding-right: var(--sp-7); background-image: linear-gradient(45deg, transparent 50%, var(--label-alternative) 50%), linear-gradient(135deg, var(--label-alternative) 50%, transparent 50%); background-position: right 17px top 50%, right 12px top 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } select.field:disabled { background-image: none; } /* 날짜칸의 달력 아이콘도 같은 이유로 테두리에 붙는다. 이쪽은 기본 UI를 * 끄면 달력을 열 길이 없어지므로 자리만 안쪽으로 들인다. * * **밀어내는 것은 padding-right다(#368 리뷰).** 아이콘은 content box의 * 오른쪽 끝에 앉으므로 padding이 곧 테두리와의 거리다 — indicator에 * margin-left를 주면 글자와만 벌어지고 아이콘은 테두리에 붙은 채다. * 처음에 그렇게 썼다가 재 보고 고쳤다(날짜칸 12px, select 32px). */ input[type="date"].field { padding-right: var(--sp-5); } input[type="date"].field::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .55; } input[type="date"].field::-webkit-calendar-picker-indicator:hover { opacity: 1; } /* 조작이 됐다는 걸 알려주는 토스트. 색은 프로젝트에만 쓰므로 초록 등으로 * "성공"을 표시하지 않는다 — 짙은 중립색 한 가지로 통일한다. */ .toast { position: fixed; left: 50%; bottom: var(--sp-6); transform: translateX(-50%); background: var(--label-normal); color: var(--background-normal-normal); padding: 10px 18px; border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 600; box-shadow: 0 8px 24px #00000026; z-index: 100; animation: toast-in .2s ease, toast-out .25s ease 2.75s forwards; } @keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } } @keyframes toast-out { to { opacity: 0; transform: translate(-50%, 8px); } } /* 공유 링크 생성 직후 배너. 일반 토스트와 달리 스스로 안 사라진다 — * 자동 클립보드 복사가 페이지 새로고침 뒤라 거의 매번 조용히 실패해서 * (실사용 지적, 재현됨) 링크를 그대로 보여주고 직접 눌러 복사하게 * 바꿨다 — 누르기 전에 사라지면 아무 의미가 없다. */ .toast--share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); max-width: min(90vw, 520px); animation: toast-in .2s ease; } .toast--share__link { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--background-normal-normal); opacity: .85; } /* .btn--quiet의 기본 회색은 밝은 배경 전제라 이 짙은 토스트 위에서는 * 잘 안 보인다 — 이 안에서만 밝은 글자·테두리로 뒤집는다. * * **.toast .toast--share__copy로 명시도를 올린다.** 클래스 하나짜리로 두면 * 827행의 .btn--quiet가 뒤에 나와 순서로 이겨버린다 — 버튼이 * class="btn btn--quiet toast--share__copy"라 회색 글자·회색 테두리가 * 그대로 먹고, 짙은 배경 위라 글씨가 안 보였다(실사용 지적). * * 닫기(×)는 지금 btn 계열 클래스가 없어 밀린 적이 없다 — 나중에 붙어도 * 같은 일이 안 생기게 예방으로 함께 올려 둔다. */ .toast .toast--share__copy { flex: 0 0 auto; border: 1px solid var(--background-normal-normal); color: var(--background-normal-normal); background: transparent; } .toast .toast--share__copy:hover { background: color-mix(in srgb, var(--background-normal-normal) 15%, transparent); } .toast .toast--share__close { flex: 0 0 auto; width: 24px; height: 24px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--background-normal-normal); opacity: .7; font-size: 16px; line-height: 1; cursor: pointer; } .toast .toast--share__close:hover { opacity: 1; background: color-mix(in srgb, var(--background-normal-normal) 15%, transparent); } /* ── 날짜줄 ───────────────────────────────────────── */ /* 글을 읽는 화면(일간·주간)은 한 줄이 길면 눈이 되돌아오기 어렵다 — 그래서 * 가장 덜 넓힌다. 목록 화면(자료실·회의록·찾기)은 한 줄에 여러 칸이 * 서므로 좁히면 오히려 글자가 접힌다 — `.page--list`로 더 넓힌다. */ /* **폭은 화면에 따라 늘어난다(#302).** 고정 픽셀로 두면 2560 모니터에서 가로 빈 공간이 크게 남는다. 다만 글줄이 길면 읽기 나빠지므로, 글이 주인인 화면은 덜 늘리고 목록·문서처럼 표가 들어오는 화면은 더 늘린다. */ /* **일간·주간은 1080px이다(#378).** 900px로 두면 넓은 모니터에서 여백만 남는다는 지적이 있었는데, 카드가 한 열이라 넓힌 만큼 글줄이 그대로 길어진다 — 1200px까지 가면 #302가 막으려던 문제로 돌아간다. 둘 사이를 잡았다. */ .page { max-width: min(100%, 900px); margin: 0 auto; padding: var(--sp-5) var(--sp-5) var(--sp-8); } .page--feed { max-width: min(100%, 1080px); } .page--list { max-width: min(100%, 1400px); } /* 목록 줄은 가로로 길어 위아래가 촘촘해도 읽힌다. */ .page--list .stack { gap: var(--sp-2); } /* 프로젝트가 열 개를 넘어 알약으로 못 늘어놓는다. 선택 상자로 고른다. */ .pick { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); } .pick .search { width: auto; min-width: 200px; } .daybar { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-3); } .daybar__day { margin: 0; font-size: var(--fs-xl); line-height: var(--lh-xl); font-weight: 800; letter-spacing: -.025em; white-space: nowrap; font-variant-numeric: tabular-nums; } .daybar__wd { font-size: 14px; color: var(--label-assistive); font-weight: 600; white-space: nowrap; } /* 찾기 화면 안 검색칸. 넓은 화면은 위 nav 검색칸으로 충분해 여기선 숨긴다 — * 좁은 화면(860px 이하, nav 검색칸이 숨는 기준과 같다)에서만 보인다(#199). */ .search-page__form { display: none; gap: var(--sp-2); margin-bottom: var(--sp-4); } @media (max-width: 860px) { .search-page__form { display: flex; } .search-page__form .field { flex: 1 1 auto; max-width: none; } .search-page__form .btn { flex: none; white-space: nowrap; } } .daynav { margin-left: auto; display: flex; align-items: center; gap: var(--sp-1); } .daynav__form { display: flex; } .daynav__step { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r-pill); color: var(--label-alternative); font-size: var(--fs-sm); } .daynav__step:hover { background: var(--fill-normal); text-decoration: none; } .daynav__pick { border: 1px solid var(--line-solid-normal); background: var(--background-normal-normal); border-radius: var(--r-pill); padding: 5px var(--sp-3); font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--label-alternative); color-scheme: light; } /* ── 오늘의 스펙트럼 ──────────────────────────────── */ /* 그날 팀이 어느 일에 있었는지의 비율. 사람이 아니라 일을 잰다. */ .spectrum { display: flex; gap: 3px; height: 8px; margin-bottom: var(--sp-2); } .spectrum__seg { border-radius: var(--r-pill); min-width: 6px; } .legend { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); margin: 0 0 var(--sp-6); padding: 0; list-style: none; } .legend__item { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-cap); font-weight: 600; color: var(--label-alternative); } .legend__item b { font-weight: 600; color: var(--label-assistive); } .dot { width: 8px; height: 8px; border-radius: var(--r-pill); flex: none; } /* ── 피드 ─────────────────────────────────────────── */ /* 일간의 "얼굴+이어지는 선" 레일은 #153에서 카드형으로 바꾸며 걷어냈다 — .post/.post__head/.post__body/.post__who는 unclassified.html·weekly.html이 아직 쓰고 있어 남긴다. */ .post { display: grid; grid-template-columns: var(--rail) 1fr; gap: var(--sp-3); } .avatar { width: var(--avatar); height: var(--avatar); border-radius: var(--r-pill); display: block; background: var(--fill-normal); object-fit: cover; } .avatar--text { display: grid; place-items: center; font-size: var(--fs-sm); font-weight: 700; color: var(--label-alternative); } .post__body { min-width: 0; padding-bottom: var(--sp-6); } .post__head { display: flex; align-items: baseline; gap: var(--sp-2); margin-bottom: 7px; } .post__who { font-size: var(--fs-md); font-weight: 700; letter-spacing: -.01em; color: var(--label-normal); } /* 자료실·회의록·KB 활동 줄(#활동통합) — 요약 문단과 구분되게 작고 * 옅게, 링크는 굳이 다른 색을 안 써서 프로젝트 태그 색과 안 헷갈리게. */ .post__activity { margin: var(--sp-2) 0 0; padding-left: 1.2em; } .post__activity li { font-size: var(--fs-sm); color: var(--label-alternative); } .post__activity a { color: inherit; } /* 프로젝트 색. 채운 알약에 흰 글자를 얹으면 대비가 3:1 근처라 12px가 안 * 읽힌다. 연한 바탕 + 진한 글자로 간다 — 대비도 되고 눈도 덜 피로하다. * 색 이름은 app/web/feed.py의 HUES와 짝이다. 한쪽만 늘리면 색이 안 나온다. */ .tag { display: inline-block; margin-bottom: 9px; margin-right: var(--sp-1); padding: 3px 10px; border-radius: var(--r-pill); font-size: var(--fs-cap); font-weight: 700; background: color-mix(in srgb, var(--hue) 12%, var(--background-normal-normal)); color: var(--hue); } .tag:hover { text-decoration: none; background: color-mix(in srgb, var(--hue) 20%, var(--background-normal-normal)); } .dot, .spectrum__seg { background: var(--hue); } .hue-violet { --hue: var(--accent-foreground-violet); } .hue-lime { --hue: var(--accent-foreground-lime); } .hue-cyan { --hue: var(--accent-foreground-cyan); } .hue-pink { --hue: var(--accent-foreground-pink); } .hue-purple { --hue: var(--accent-foreground-purple); } .hue-red-orange { --hue: var(--accent-foreground-red-orange); } .hue-light-blue { --hue: var(--accent-foreground-light-blue); } .hue-green { --hue: var(--accent-foreground-green); } .hue-orange { --hue: var(--accent-foreground-orange); } .hue-blue { --hue: var(--accent-foreground-blue); } .hue-red { --hue: var(--accent-foreground-red); } /* ── 요약문 ───────────────────────────────────────── */ .prose { margin: 0; color: var(--label-neutral); } .prose p { margin: 0 0 var(--sp-3); } /* 요약문은 마크다운이라 제목이 올 수 있다. 크기만 커지고 행간은 본문값을 * 물려받으면 줄이 겹친다 — 실제로 겹쳐 보였다. 크기마다 행간을 짝지어 준다. */ .prose h1, .prose h2, .prose h3, .prose h4 { margin: var(--sp-5) 0 var(--sp-2); color: var(--label-normal); font-weight: 700; letter-spacing: -.01em; } .prose h1:first-child, .prose h2:first-child, .prose h3:first-child, .prose h4:first-child { margin-top: 0; } .prose h1 { font-size: var(--fs-lg); line-height: 24px; } .prose h2 { font-size: var(--fs-md); line-height: 22px; } .prose h3, .prose h4 { font-size: 14px; line-height: 20px; } .prose li { margin-bottom: var(--sp-1); } .prose blockquote { margin: 0 0 var(--sp-3); padding-left: var(--sp-4); border-left: 2px solid var(--line-solid-normal); color: var(--label-alternative); } .prose p:last-child { margin-bottom: 0; } .prose strong { color: var(--label-normal); font-weight: 700; } .prose ul, .prose ol { margin: 0 0 var(--sp-3); padding-left: var(--sp-5); } .prose code { font-size: var(--fs-sm); padding: 1px 5px; border-radius: 5px; background: var(--fill-normal); font-family: ui-monospace, SFMono-Regular, monospace; } /* ── 표(GFM) — markdown-it-py의 "gfm-like" 프리셋에 이미 있다 ────── */ /* **표는 감싼 칸이 가로로 민다(#302).** width:100%로 칸에 욱여넣으면 열이 많을 때 글자가 한 자씩 세로로 쌓여 못 읽는다 — 8열짜리에서 "페/이/지", "P/G/N"이 됐다. 표는 제 내용만큼 넓히고, 넘치면 그 칸만 스크롤한다. */ .prose__wide { overflow-x: auto; max-width: 100%; margin: 0 0 var(--sp-3); } .prose table { width: max-content; min-width: 100%; max-width: none; border-collapse: collapse; font-size: var(--fs-sm); } /* 칸이 너무 좁아 글자가 세로로 쌓이는 것을 막는다. */ .prose th, .prose td { min-width: 4.5em; } .prose th, .prose td { padding: var(--sp-2) var(--sp-3); text-align: left; border-bottom: 1px solid var(--line-solid-alternative); } .prose th { color: var(--label-normal); font-weight: 700; background: var(--fill-alternative); } /* ── 지식창고 문서의 표(#447) — **.kb-prose 안에서만** ──────────────────────────────── * 긴 문장이 든 표를 읽을 수 있게 한다. 실측(기준 문서 표 8개): 상한 없이는 8개가 전부 가로로 넘쳤고(본문 칸 828px에서 * 표 폭 1,326~3,528px), 칸 폭에 34em 상한을 걸자 8개 모두 칸 안에 들어왔다. 그래도 넘치는 표는 가로로 밀고 가장자리 그림자로 알린다. * **.prose 전역이 아니다** — 화면정의서가 정한 범위는 지식창고 문서 읽기·미리보기이고, 홈·주간·공지·회의록·외부 공유 화면의 표는 * 건드리지 않는다(코드리뷰: 전역으로 걸면 거기서도 표가 70vh에서 안쪽 스크롤 상자가 된다). 표시 클래스 kb-prose는 * kbpage.html·kb.html·kb_project.html의 본문·미리보기
에만 있다(tests/test_kb_table_css.py가 본다). * 위 전역 규칙과 명시도가 같은 것(th·td)은 아래가 뒤에 와서 이긴다. * - 바닥색은 --prose-surface 하나다. 페이지 배경 위와 흰 카드·팝업 안(새 문서 팝업의 미리보기)이 달라서, 그림자 덮개와 * 고정 머리글이 같은 색을 써야 가장자리에 띠가 안 생긴다. * - **max-height는 감싸는 칸에 준다.** 표 자체에 overflow를 주면 칸 폭 계산이 무너진다(위 #302). 칸이 세로 스크롤을 맡으면 * 머리글(position: sticky)은 이 칸 안에서 붙는다. 표가 70vh보다 짧으면 스크롤이 없어 sticky는 아무 일도 안 한다. */ .kb-prose { --prose-surface: var(--background-normal-alternative); } .card .kb-prose, .upload-dialog .kb-prose { --prose-surface: var(--background-normal-normal); } .kb-prose .prose__wide { overflow: auto; max-height: 70vh; /* 가장자리 그림자(스크롤 위치를 아는 순수 CSS 방식): 덮개(local)는 내용과 같이 움직여 끝에 닿으면 그림자를 가리고, 그림자(scroll)는 칸 가장자리에 붙어 있다. 그래서 «아직 더 있는 쪽»에만 그림자가 보인다. 그림자는 칸이 투명한 곳 뒤에서만 보인다. 머리글 줄은 불투명이라 그 줄에서는 가려진다 — 본문 줄에서 보이면 충분하다. */ background: linear-gradient(to right, var(--prose-surface) 30%, transparent) left center / 24px 100% no-repeat local, linear-gradient(to left, var(--prose-surface) 30%, transparent) right center / 24px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, #1717191f, transparent) left center / 10px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, #1717191f, transparent) right center / 10px 100% no-repeat scroll; } /* 칸 폭 상한(34em)과 위 맞춤. 긴 문장은 칸 안에서 줄을 바꾼다. */ .kb-prose th, .kb-prose td { max-width: 34em; vertical-align: top; } /* **머리글은 불투명이어야 한다** — --fill-alternative는 5% 투명이라 그대로 붙이면 아래 행 글자가 비친다. 바닥색 위에 겹쳐 쌓는다. sticky 칸은 border-collapse에서 테두리가 같이 안 붙어서, 아래 선은 box-shadow로 그린다. */ .kb-prose th { position: sticky; top: 0; z-index: 1; background-color: var(--prose-surface); background-image: linear-gradient(var(--fill-alternative), var(--fill-alternative)); box-shadow: 0 1px 0 var(--line-solid-neutral); } /* 홀수·짝수 줄을 아주 옅게 구분한다(화면정의서). */ .kb-prose tbody tr:nth-child(even) td { background: var(--fill-alternative); } /* ── 체크리스트(GFM, mdit-py-plugins) ───────────────────────────── * 기본 목록 글머리표(•)가 체크박스 앞에 같이 남으면 두 겹으로 보인다. */ .prose .contains-task-list { list-style: none; padding-left: 0; } .prose .task-list-item { display: flex; align-items: flex-start; gap: var(--sp-2); } .prose .task-list-item-checkbox { margin-top: 5px; flex: 0 0 auto; } /* ── 코드블록 ───────────────────────────────────────────────────── * **pre.hl이 아니라 pre에 준다(#414).** _highlight_code는 언어를 안 * 적었거나 모르는 언어면 빈 문자열을 돌려주고, 그러면 markdown-it이 클래스 * 없는 
를 그린다 — .hl에만 걸어 두면 그런 블록은 가로 스크롤이
 * 없어 화면을 통째로 민다. 운영 실측으로 지식창고 118장이 그렇다.
 * 그 전제는 tests/test_markdown.py가 지킨다. */
.prose pre {
  margin: 0 0 var(--sp-3); padding: var(--sp-3); border-radius: var(--r-sm);
  background: var(--fill-normal); overflow-x: auto;
}
.prose pre code {
  padding: 0; background: none; border-radius: 0;
  font-size: var(--fs-sm); font-family: ui-monospace, SFMono-Regular, monospace;
}
/* ── 그림 카드(mermaid, #447) ─────────────────────────────────────
 * 본문의 ```mermaid를 브라우저가 그린 자리. 만드는 쪽은 editor/src/diagram/scanner.js다 —
 * 카드는 어두운 남색 판이고, **상태는 data-state, 그림/원문 전환은 data-view 속성으로만 가른다**:
 *   loading            «그림을 그리는 중…»만 (원문은 아직 감춰져 있다)
 *   ready              그림. data-view=figure면 그림, source면 원문 코드
 *   syntax · toolarge · blocked  안내 + 원문 코드(고치려면 원문이 보여야 한다). 단추는 없다
 * **색 값은 tokens.css가 아니라 여기 둔다** — tokens.css는 tools/design_tokens.py가 만드는 파일이라 손으로 더하면
 * 다음 재생성에서 사라진다. mermaid 안쪽 색은 editor/src/diagram/config.js의 «색»이 정하고 이 값과 같아야 한다
 * (tests/test_kb_diagram_assets.py가 같은지 본다). 글자는 4.5:1, 박스·선은 3:1 이상이다. */
.mm-card, .mm-zoom { --mm-bg: #161618; --mm-text: #e6efff; --mm-muted: #9aa3ad; --mm-edge: #3570b8; --mm-rule: #3a3a3e; }
.mm-card {
  margin: 0 0 var(--sp-3); padding: var(--sp-3); border-radius: var(--r-sm);
  background: var(--mm-bg); color: var(--mm-text);
}
.mm-card[data-state="loading"] {
  min-height: 120px; display: flex; align-items: center; justify-content: center;
}
/* 문단 규칙은 .prose p(0,1,1)를 이겨야 해서 .mm-card를 앞에 붙인다(0,2,0) — 안 붙이면 안내 문단에 아래 여백 12px가 붙는다. */
.mm-card .mm-card__msg { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-sm); }
.mm-card .mm-card__detail {
  margin: var(--sp-1) 0 0; font-size: var(--fs-cap); line-height: var(--lh-cap);
  color: var(--mm-muted); font-family: ui-monospace, SFMono-Regular, monospace;
  overflow-wrap: anywhere;
}
.mm-card__body { margin: 0; }
.mm-card[data-state="syntax"] .mm-card__body,
.mm-card[data-state="toolarge"] .mm-card__body,
.mm-card[data-state="blocked"] .mm-card__body { margin: 0 0 var(--sp-3); }
/* 작은 그림은 늘리지 않는다 — mermaid가 svg에 max-width를 인라인으로 준다. 여기서는 가운데 두고 높이만 비율을 따른다. */
.mm-card__body svg { display: block; margin: 0 auto; height: auto; }
.mm-card__bar { display: flex; justify-content: flex-end; gap: var(--sp-2); margin: 0 0 var(--sp-2); }
.mm-card__btn {
  padding: 4px 10px; border: 1px solid var(--mm-edge); border-radius: var(--r-sm);
  background: transparent; color: var(--mm-text); font: inherit; font-size: var(--fs-cap); line-height: var(--lh-cap);
  cursor: pointer;
}
.mm-card__btn:hover { background: #0b2c4f; }
.mm-card__btn:focus-visible { outline: 2px solid var(--mm-text); outline-offset: 2px; }
/* 원문은 지금 코드 블록과 같은 모양이다. 카드 안에서는 바깥 여백을 걷고, 그림이 있을 때는 단추가 켜야 보인다. */
/* 높이를 막는다 — «너무 큼»은 정의상 긴 원문이 오는 상태라 막지 않으면 520줄이 페이지를 13,000px로 늘린다(실제 Chrome 측정). 안에서 스크롤한다. */
.prose .mm-card__src { margin: 0; max-height: 36em; overflow: auto; }
.mm-card[data-view="figure"] .mm-card__src,
.mm-card[data-view="source"] .mm-card__body { display: none; }
.prose .mm-card__notice { margin: 0 0 var(--sp-2); }

/* ── 확대 보기(#447) — 그림 카드의 «⛶ 확대»가 여는 전체 화면 팝업. 만드는 쪽은 editor/src/diagram/viewer.js다.
 * 가 열림·닫힘·Esc·뒤 문서 막기를 해 준다. 그림은 카드 것을 복제해 transform으로 키운다(다시 안 그린다).
 * display는 [open]일 때만 준다 — 안 그러면 닫힌 팝업이 기본 display:none을 이겨 화면에 남는다.
 * 닫기·맞춤·± 단추는 카드 단추(.mm-card__btn)와 같은 모양이다. */
.mm-zoom {
  position: fixed; inset: 0; margin: auto; padding: 0; border: 0; border-radius: var(--r-md);
  width: calc(100vw - 32px); height: calc(100vh - 32px); max-width: none; max-height: none;
  background: var(--mm-bg); color: var(--mm-text); overflow: hidden;
}
.mm-zoom[open] { display: flex; flex-direction: column; }
.mm-zoom::backdrop { background: rgba(0, 0, 0, .6); }
.mm-zoom__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex: 0 0 auto;
  padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--mm-rule);
}
.mm-zoom__title { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: 700; color: var(--mm-text); }
.mm-zoom__tools { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; justify-content: flex-end; }
.mm-zoom__btn { min-width: 2.4em; }
.mm-zoom__btn[data-act="reset"] { min-width: 4.2em; }
.mm-zoom__btn:disabled { opacity: .4; cursor: default; }
.mm-zoom__btn:disabled:hover { background: transparent; }
.mm-zoom__viewport { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; cursor: grab; touch-action: none; }
.mm-zoom__viewport.is-grabbing { cursor: grabbing; }
.mm-zoom__stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.mm-zoom__stage svg { display: block; max-width: none; }
/* 열려 있는 동안 뒤 문서가 스크롤되지 않는다(화면정의서). */
html.mm-lock { overflow: hidden; }
@media (max-width: 860px) {
  .mm-zoom { width: calc(100vw - 16px); height: calc(100vh - 16px); }
}

/* ── 문법 강조(pygments) ───────────────────────────────────────────
 * 아래 .hl .* 는 pygments HtmlFormatter(style="default").get_style_defs(".hl")를
 * 그대로 가져온 것 — 토큰 색은 직접 못 바꾼다(바꾸면 pygments 업데이트마다
 * 다시 떠 와야 한다). 배경·테두리·바깥 여백은 위 .prose pre가 맡는다.
 *
 * 이 줄은 pygments가 제 배경을 칠하는 것을 지운다. 위 .prose pre(0,1,1)가
 * .hl(0,1,0)을 명시도로 이기므로 배경은 moa 토큰이 남는다 — 싸우는 게 아니라
 * 각자 제자리다. */
.hl { background: transparent; }
.hl .c { color: #3D7B7B; font-style: italic }
.hl .err { border: 1px solid #F00 }
.hl .k { color: #008000; font-weight: bold }
.hl .o { color: var(--label-alternative) }
.hl .ch, .hl .cm, .hl .cpf, .hl .c1, .hl .cs { color: #3D7B7B; font-style: italic }
.hl .cp { color: #9C6500 }
.hl .gd { color: #A00000 }
.hl .ge { font-style: italic }
.hl .ges { font-weight: bold; font-style: italic }
.hl .gr { color: #E40000 }
.hl .gh, .hl .gp { color: #000080; font-weight: bold }
.hl .gi { color: #008400 }
.hl .go { color: var(--label-alternative) }
.hl .gs { font-weight: bold }
.hl .gu { color: #800080; font-weight: bold }
.hl .gt { color: #04D }
.hl .kc, .hl .kd, .hl .kn, .hl .kr { color: #008000; font-weight: bold }
.hl .kp, .hl .nb, .hl .bp, .hl .sx { color: #008000 }
.hl .kt { color: #B00040 }
.hl .m, .hl .mb, .hl .mf, .hl .mh, .hl .mi, .hl .mo, .hl .il { color: var(--label-alternative) }
.hl .s, .hl .sa, .hl .sb, .hl .sc, .hl .dl, .hl .sh, .hl .s2, .hl .sr, .hl .s1 { color: #BA2121 }
.hl .sd { color: #BA2121; font-style: italic }
.hl .na { color: #687822 }
.hl .nc, .hl .nn, .hl .fm { color: #00F; font-weight: bold }
.hl .no { color: #800 }
.hl .nd, .hl .ow { color: #A2F; font-weight: bold }
.hl .ni { color: var(--label-alternative); font-weight: bold }
.hl .ne { color: #CB3F38; font-weight: bold }
.hl .nf { color: #00F }
.hl .nl { color: #767600 }
.hl .nt { color: #008000; font-weight: bold }
.hl .nv, .hl .vc, .hl .vg, .hl .vi, .hl .vm, .hl .ss { color: #19177C }
.hl .se { color: #AA5D1F; font-weight: bold }
.hl .si { color: #A45A77; font-weight: bold }
.hl .sr { color: #A45A77 }
.hl .w { color: var(--label-assistive) }

/* 사람 언급. 괄호와 약간의 굵기만 준다 — 배경색을 깔면 이름이 튀어서
 * 지목하는 느낌이 난다. */
.mention { color: var(--label-normal); font-weight: 600; white-space: nowrap; }

/* @login 멘션(#248) — 아는 사람이면 링크가 된다. .mention과 달리 실제로
 * 눌러 그 사람 화면으로 간다 — 눌리는 것임을 색으로 드러낸다. */
.mention-link { color: var(--primary-normal); font-weight: 600; white-space: nowrap; }
.mention-link:hover { text-decoration: underline; }

/* 회의록을 텍스트로 바로 썼을 때(#194). 마크다운으로 안 읽으므로 "#"·"*"가
 * 서식으로 안 바뀌고 글자 그대로 보인다 — 대신 줄바꿈은 살려야 읽힌다. */
.meet__text { white-space: pre-wrap; }

/* 회의록 목록 줄. 지금까지 이 클래스들에 맞는 CSS가 아예 없어서 맨 링크
 * 밑줄로만 보이고 있었다 — #212가 목록을 한 판으로 바꾸며 놓친 것 같다
 * (개요 사이드바 작업 중 발견, #UI방향1). .vault__row와 같은 카드꼴을
 * 쓰되, 미리보기 줄이 있어 두 줄짜리 블록으로 짠다. */
.meet {
  display: block; padding: var(--sp-3) var(--sp-4);
  background: var(--background-normal-normal); border-radius: var(--r-md);
  border: 1px solid var(--line-solid-neutral); color: var(--label-normal);
  text-decoration: none;
}
.meet:hover { background: var(--fill-alternative); }
.meet__head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.meet__title { font-weight: 600; min-width: 0; }
.meet__peek {
  margin: var(--sp-1) 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 회의록 목록 — 카드 그리드(실사용 요청: "화려하면서 정리된 느낌", SNS
 * 피드 벤치마킹, 실사용 지적으로 점+색 글자 방식으로 확정). 새 색은 안
 * 쓴다 — 프로젝트 hue(기존 .tag·.dot이 쓰는 것과 같은 팔레트)를 재사용해서
 * "화려함"을 낸다. 격자 정렬 자체가 "정리된" 느낌을 맡는다. 카드 자체엔
 * 테두리 액센트를 안 준다 — 둥근 모서리와 두꺼운 단면 테두리가 만나는
 * 자리가 어색해 보인다(impeccable border-accent-on-rounded). 그라디언트·
 * 그림자는 안 쓴다. */
.meetC-count { margin: 0 0 var(--sp-4); font-variant-numeric: tabular-nums; }
.meetC-count a { margin-left: 4px; }
.meetC-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-4);
}
.meetC-card {
  display: flex; flex-direction: column; min-height: 190px;
  padding: var(--sp-4); border-radius: var(--r-md);
  background: var(--background-normal-normal);
  border: 1px solid var(--line-solid-neutral);
  color: var(--label-normal);
}
.meetC-card:hover { border-color: var(--line-solid-strong); }
.meetC-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.meetC-project { display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-cap); font-weight: 700; color: var(--hue); }
.meetC-day {
  font-size: var(--fs-cap); color: var(--label-assistive); font-variant-numeric: tabular-nums;
}
/* 제목+미리보기를 하나의 링크로 묶는다 — a 안에 a를 못 넣어서 카드
 * 전체를 링크로 못 감싸는 대신 이 자리가 클릭 영역을 맡는다. */
.meetC-open {
  display: block; flex: 1 1 auto; text-decoration: none; color: inherit; min-height: 0;
}
.meetC-title {
  display: block; font-size: 17px; font-weight: 700; letter-spacing: -.01em;
  line-height: 1.35; margin: var(--sp-2) 0;
}
.meetC-open:hover .meetC-title { color: var(--primary-normal); }
.meetC-peek {
  margin: 0; color: var(--label-alternative); font-size: var(--fs-sm); line-height: 20px;
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
/* 해시태그는 상자 없이 색으로만 구분한다(실사용 지적: 알약 상자가
 * 너무 둥글고 다닥다닥 붙어 읽기 힘들다). .notice__when(일정 날짜)이
 * 이미 쓰는 것과 같은 accent — --primary-normal 하나로 통일해서
 * "이건 해시태그"라는 신호만 준다. 프로젝트 hue와 안 겹치게 태그마다
 * 다른 색은 안 쓴다. 간격은 넓혀서 다닥다닥 안 붙게 한다.
 * **눌러서 그 태그로 좁힌다**(실사용 요청) — 따로 필터 바를 안 둔다. */
.meetC-hashtags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.meetC-hash { font-size: var(--fs-cap); font-weight: 600; color: var(--primary-normal);
  text-decoration: none; }
.meetC-hash:hover { text-decoration: underline; }
.meetC-foot {
  display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2);
  padding-top: var(--sp-2); border-top: 1px solid var(--line-solid-alternative);
}
@media (max-width: 560px) {
  .meetC-grid { grid-template-columns: 1fr; }
}

/* ── 근거 ─────────────────────────────────────────── */
.evidence { margin-top: var(--sp-3); }
.evidence__toggle {
  display: inline-block; list-style: none; cursor: pointer;
  border-radius: var(--r-pill); background: var(--fill-normal);
  padding: 5px var(--sp-3); font-size: var(--fs-sm); font-weight: 600;
  color: var(--label-alternative);
}
.evidence__toggle::-webkit-details-marker { display: none; }
.evidence__toggle:hover { background: var(--fill-strong); }
.evidence__list { margin: var(--sp-3) 0 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: var(--sp-2); }
.evidence__item { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2);
  font-size: var(--fs-sm); line-height: var(--lh-sm); }
.evidence__repo, .evidence__at { color: var(--label-assistive); font-size: var(--fs-cap);
  font-variant-numeric: tabular-nums; }
.evidence__title { flex: 1 1 240px; min-width: 0; color: var(--label-neutral); }
.chip {
  display: inline-block; padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--fill-normal); font-size: var(--fs-cap); font-weight: 600;
  color: var(--label-alternative);
}
.chip:hover { background: var(--fill-strong); text-decoration: none; }
.chip--kind {
  padding: 2px 8px; border-radius: var(--r-pill); background: var(--fill-normal);
  font-size: var(--fs-cap); font-weight: 600; color: var(--label-alternative);
}
.chip--denied { background: var(--status-negative); color: var(--static-white); }
.audit__row { align-items: baseline; gap: var(--sp-3); }
.audit__at { font-variant-numeric: tabular-nums; white-space: nowrap; }
.audit__filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-6); }
.audit__filters .field { width: auto; max-width: 220px; }
.badge { margin-left: var(--sp-2); padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--accent-background-red-orange); color: var(--static-white);
  font-size: var(--fs-cap); font-weight: 700; }

/* ── 묶음 필터 ────────────────────────────────────── */
/* wrap을 기본으로 준다 — org 세그먼트는 2~3개라 한 줄로 끝나지만, 회의록
 * 프로젝트 필터처럼 항목이 늘어날 수 있는 자리는 줄바꿈 없이는 화면 밖으로
 * 넘친다. */
.segmented { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-bottom: var(--sp-6); }
.filters { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.filters .segmented { margin-bottom: var(--sp-6); }
.feed { display: flex; flex-direction: column; }
.segmented__item { padding: 5px var(--sp-3); border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 600; color: var(--label-alternative); }
.segmented__item:hover { background: var(--fill-alternative); text-decoration: none; }
.segmented__item.is-on { background: var(--surface-selected); color: var(--primary-strong); }
.segmented__item.is-on:hover { background: var(--surface-selected-hover); }
.segmented__item { cursor: pointer; }
/* 라디오로 만든 탭(회의록 만들기 방법·형식). label 안에 라디오를 두고
 * sr-only로 숨긴다 — 클릭·키보드는 그대로 되고, :has()로 label 자신의
 * 상태를 본다. 형제 결합자와 달리 마크업 위치를 안 따져서 더 안전하다.
 *
 * **켜진 색이 위 .is-on과 다른 것은 알고 둔 것이다(#378).** 링크로 만든 탭은
 * 연한 파란 면, 라디오로 만든 탭은 검은 면이다 — /meetings·/kb·/infra는 한
 * 화면에 둘이 같이 나오므로 눈에 띈다. 맞추자는 제안이 리뷰에서 나왔지만
 * 팀장이 지금 모양을 골랐다(docs/결정/결정기록_테마색.md). 버그로 보고
 * 한쪽을 고치기 전에 그 문서를 먼저 읽는다. */
.segmented__item:has(input:checked) { background: var(--label-normal); color: var(--static-white); }
.segmented__item:has(input:focus-visible) { outline: 2px solid var(--primary-normal); outline-offset: 2px; }
.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; }

/* ── 빈 화면 ──────────────────────────────────────── */
.empty { padding: var(--sp-8) 0; text-align: center; }
.empty__title { margin: 0; font-size: var(--fs-lg); font-weight: 700; }
.empty__detail { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--label-alternative); }

/* ── 사람·프로젝트 머리 ───────────────────────────── */
.profile { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.avatar--profile { width: 56px; height: 56px; }
.avatar--sm { width: 22px; height: 22px; flex-shrink: 0; }
.avatar--sm.avatar--text { font-size: 10px; }
.people { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-bottom: var(--sp-6); }
/* 날짜 기준 화면(사람·프로젝트·주간)은 레일이 없다. 카드만 쌓는다. */
.stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.card__date { font-size: var(--fs-sm); font-weight: 700; color: var(--label-normal);
  font-variant-numeric: tabular-nums; }
.profile h1 { margin: 0; font-size: var(--fs-xl); line-height: var(--lh-xl);
  font-weight: 800; letter-spacing: -.025em; }
.profile__meta { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--label-alternative); }

/* ── 알림 쪽지 ────────────────────────────────────── */
/* 사람의 일이 아니라 손봐야 할 것. 피드와 섞이지 않게 따로 둔다. */
.note { margin-top: var(--sp-7); border-radius: var(--r-md);
  background: var(--fill-alternative); padding: var(--sp-5); }
.note__title { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); font-weight: 700;
  color: var(--label-normal); display: flex; align-items: center; gap: var(--sp-2); }
/* 관리자만 본다는 것을 화면에 적어둔다 — 안 적으면 남도 보는 줄 안다. */
.note__only { font-size: var(--fs-cap); font-weight: 600; color: var(--label-assistive);
  background: var(--fill-normal); border-radius: var(--r-pill); padding: 2px 8px; }
.note__list { margin: 0 0 var(--sp-3); padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: var(--sp-1); }
.note__row { display: flex; align-items: baseline; gap: var(--sp-2); }
.note__row code { font-size: var(--fs-sm); font-family: ui-monospace, SFMono-Regular, monospace;
  color: var(--label-normal); }

/* ── 찾기 ────────────────────────────────────────
 * 한 줄이 하나의 찾은 것이다. 종류 라벨을 붙여 **왜 이게 나왔는지** 보이게 한다 —
 * 요약 단위로만 묶으면 커밋 제목에서 걸린 결과가 "이 요약엔 그 말이 없는데?"로 보인다.
 */
.hit { padding: var(--sp-4) 0; border-bottom: 1px solid var(--line-solid-neutral); }
.hit:last-child { border-bottom: 0; }
.hit__head { display: flex; align-items: baseline; gap: var(--sp-2);
  flex-wrap: wrap; margin-bottom: 6px; }
.hit__kind { padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--fill-normal); color: var(--label-neutral);
  font-size: var(--fs-cap); font-weight: 700; }
.hit__who { font-size: var(--fs-sm); font-weight: 600; color: var(--label-normal); }
.hit__who:hover { text-decoration: underline; }
.hit__text { display: block; color: var(--label-neutral); font-size: var(--fs-md);
  line-height: 24px; text-decoration: none; }
.hit__text:hover { color: var(--label-normal); }
/* 찾은 낱말은 굵게만. 색은 프로젝트 태그가 이미 쓰고 있어 겹치면 둘 다 안 읽힌다. */
.hit__text strong { color: var(--label-normal); font-weight: 700; }
/* 자료실 파일의 작업내용. 이름 아래에 한 단 낮춰 붙인다 — 같은 무게로 서면
 * 어느 것이 파일 이름인지 모른다. */
/* 안을 못 본 파일에 붙는 한 줄(#387). 결과를 가리지 않게 작게 둔다. */
.hit__note { margin: var(--sp-1) 0 0; }
.hit__sub { margin: var(--sp-1) 0 0; font-size: var(--fs-sm); line-height: 20px;
  color: var(--label-assistive); }
.hit__sub strong { color: var(--label-alternative); font-weight: 700; }

/* ── 직접 쓴 기록 ─────────────────────────────────
 * 수집한 것과 사람이 쓴 것을 구분선과 라벨로 가른다. 섞이면 요약을 못 믿는다.
 * **배경색은 안 쓴다** — 쓴 칸만 색이 들면 그 자체가 눈에 띄는 표시가 되고,
 * 안 쓴 사람이 비어 보인다.
 */
.note-own { margin-top: var(--sp-4); padding-top: var(--sp-4);
  border-top: 1px solid var(--line-solid-neutral); }
.note-own__label { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); font-weight: 700;
  color: var(--label-neutral); }
.note-own__label .meta { font-weight: 500; margin-left: var(--sp-2); }

.note-edit { margin-top: var(--sp-3); }

/* 올리기·받기 팝업(#199). 가 열림·닫힘·포커스 가두기·Esc 닫기를
 * 다 해 준다 — 모양만 카드(.card)에 맞춰 입힌다. */
.upload-dialog { position: fixed; margin: auto; inset: 0;
  width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 64px);
  overflow: auto; padding: var(--sp-5); border: 1px solid var(--line-solid-neutral);
  border-radius: var(--r-md); background: var(--background-normal-normal);
  /* **손으로 키울 수 있게 한다(#368).** 긴 설명을 쓰거나 사진을 여러 장
   * 붙일 때 기본 720px이 좁다. resize는 overflow가 visible이 아니어야
   * 먹는데 바로 위에서 auto를 주고 있다. 이 리포에 textarea로 쓰는
   * 전례가 둘 있다.
   *
   * **min-height는 안 준다(#368 리뷰).** 이 클래스는 자료실 지우기·옮기기
   * 같은 짧은 확인 모달도 같이 쓴다 — 180px을 걸었더니 자연 높이 146px인
   * 모달이 180px로 늘어 단추 아래가 34px 비었다(실측). 세로는 위아래
   * 패딩이 있어 0으로 무너지지 않으므로, 가로만 막으면 된다. */
  resize: both; min-width: min(320px, calc(100vw - 32px)); }
/* **이미 쓴 공지를 고칠 때만 본문 칸을 키운다(#426).** 새로 쓰는 칸은
   비어 있어 4줄로 충분하지만, 고치는 칸에는 이미 글이 들어 있다 —
   팀장이 "팝업이 너무 작아서 수정하기 어렵다"고 한 자리다.
   **rows가 아니라 여기서 준다.** rows로 키우면 스크립트가 안 떠 메뉴
   패널(300px)에 남았을 때 거기까지 커져 고치기가 더 나빠진다. */
.upload-dialog .notice-form--edit textarea { min-height: 22rem; }
.upload-dialog::backdrop { background: rgba(0, 0, 0, .4); }
.upload-dialog__head { display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); margin-bottom: var(--sp-3); }
/* **[hidden]을 따로 못 박는다(#368 리뷰).** display:flex를 준 이 규칙이
 * 브라우저 기본 [hidden]{display:none}보다 나중에 와서 이긴다 — 디자인Q는
 * 이 머리를 숨겨 보내고 JS가 모달로 올린 뒤에 켜는데, 안 막으면 스크립트가
 * 없을 때 아무 동작도 안 하는 X가 떠 있다. .vault__dl-bar에서 이미 겪었다. */
.upload-dialog__head[hidden] { display: none; }
.upload-dialog__title { margin: 0; font-size: var(--fs-lg); font-weight: 800;
  letter-spacing: -.02em; }
.upload-dialog__close { border: 0; background: none; padding: 4px 8px; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--label-alternative); }
.upload-dialog__close:hover { color: var(--label-normal); }
/* 트리거였던 용 클래스를