@charset "utf-8"; /** * 케봇 AI 문장 보정 버튼 — 공용 컴포넌트 (2026-08-11 신설) * * 마크업 정본은 views/longterm/common/ai_correct_btn.php 다. 둘은 짝이므로 함께 고친다. * 아이콘(로봇)은 좌측 SNB 의 AI케봇 버튼(views/_layout/cm_layout.php #snbChatbot)에서 가져왔다 — * AI 진입점을 화면 어디에 두든 같아 보이게 하려는 것이다. * * [왜 별도 파일인가] longterm 화면들은 custom.css 를 로드하지 않는다(cm_layout 전용). * 그래서 SNB 버튼 스타일을 그대로 쓸 수 없어 여기에 독립 컴포넌트로 옮겼다. * 쓰는 화면에서 link 한 줄만 추가하면 되고, 다른 CSS 를 먼저 깔 필요는 없다. * 다만 **완전히 독립적이지는 않다** — 아래 라벨 색 주석대로, 호스트 화면의 전역 reset 이 * `span` 을 명시도 (0,1,0) 이상으로 겨냥하면 라벨 색이 다시 덮인다. 현재 longterm 의 reset * (`common.css`, `mobile/default.css`)은 타입 셀렉터 (0,0,1) 이라 안전하다. * * [2026-08-11 사용자 지시 — 배색 확정] '옅은 보라 바탕 #f3f1ff + 진보라 문구 #5b4bd6'. * SNB 와 같은 3색 그라디언트 + 흰 문구를 두 차례 시도했으나 **모달 안에서 너무 튄다**는 판단으로 * 이 배색으로 돌아왔다. 아이콘 원만 보라 그라디언트로 남겨 AI 진입점이라는 신호를 유지한다. * 하이라이트 애니메이션은 색과 별개로 제거하기로 한 건이라 없다. * [대비] 이 조합은 5.50:1 로 WCAG AA(4.5:1)를 넘는다. * 바탕을 더 옅게 하거나 글자를 밝게 하면 금방 기준 아래로 떨어진다 — 흰 문구를 이 바탕에 * 얹었을 때 1.11:1 로 글자가 아예 안 보였던 실측 이력이 있다. 색을 만질 때는 대비를 함께 계산할 것. * * [주의] 진행 상태 표시(`보정 중...`)는 반드시 .ai-correct-btn__label 만 갈아끼운다. * 버튼 전체를 .text()/.html() 로 덮으면 아이콘이 사라진다. */ .ai-correct-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 32px; padding: 0 12px 0 7px; border: 1px solid #ddd6fe; border-radius: 5px; background: #f3f1ff; color: #5b4bd6; font-size: 0.9em; font-weight: 600; letter-spacing: .3px; line-height: 1.2; cursor: pointer; vertical-align: middle; } /* 아이콘 원. 지름 20px 안에 14px SVG — SNB(28px 안에 20px)와 같은 비율이라 축소해도 같아 보인다. 바탕이 옅으므로 원 자체를 보라 그라디언트로 채워야 흰 로봇이 드러난다. (SNB 는 버튼 바탕이 그라디언트라 원을 반투명 흰색으로 뒀다 — 여기와 반대다.) */ .ai-correct-btn__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, #6366f1, #8b5cf6); } /* [필수] 라벨 색은 **여기서 직접 선언한다.** 버튼의 color 를 상속시키면 안 된다 — longterm 공통 `common.css` 의 전역 reset 이 `span` 을 직접 겨냥해 `color:#1e2022` 를 걸어서, 상속값은 그 직접 선언을 절대 못 이긴다(상속 < 직접 선언). 버튼에만 색을 주면 라벨은 계속 검게 나온다. 2026-08-11 실측으로 드러난 함정이다 — 초기 그라디언트 버전도 라벨이 흰색이 아니라 검은색이었다. 위 `.ai-correct-btn` 의 color 와 **같은 값을 유지할 것** — 한쪽만 바꾸면 라벨만 옛 색으로 남는다. */ .ai-correct-btn__label { color: #5b4bd6; } /* 바탕이 단색이라 배경·테두리를 한 단계 진하게 바꿔 hover 를 표현한다. (그라디언트 시절에는 filter: brightness 를 썼다 — 단색에서는 배경 교체가 더 또렷하다.) */ .ai-correct-btn:hover { background: #ebe7ff; border-color: #c9bdfd; } /* 위 `:hover` 와 **겹치는 프로퍼티가 없다** — hover 는 `background`/`border-color` 만, 여기는 `opacity`/`cursor` 만 건드린다. 그래서 마우스를 올린 채 요청이 시작되면 둘이 함께 적용되고 (진한 배경 + 흐려짐), 순서를 바꿔도 렌더링은 달라지지 않는다. [주의] hover 에 `opacity` 나 `filter` 를 다시 넣으면 그 순간 **순서 의존이 생긴다** — 같은 명시도 (0,2,0) 라 뒤에 오는 이 블록이 이겨야 '요청 중' 이 보인다. 그때는 순서를 지킬 것. (그라디언트 시절에는 실제로 hover 가 `opacity:1`·`filter` 를 선언해 순서가 승부를 갈랐다.) */ .ai-correct-btn:disabled, .ai-correct-btn[disabled] { opacity: .55; cursor: default; } /* ── 욕구조사 판단근거 툴바 (2026-08-25 사용자 지시) ───────────────────────────── 버튼은 판단근거 칸 **위 툴바**에 오른쪽 정렬로 둔다. 종전에는 칸 아래에 float 로 띄웠는데, 쓰기 전에 누르는 버튼이 칸 아래에 있어 먼저 눈에 들어오지 않았다. 툴바로 올리면서 float·clearfix 는 필요 없어져 걷어냈다. [WHY 여기 있나] 이 파일 규약상 배치는 쓰는 화면 몫이지만 욕구조사 모달만 전용 CSS 가 없다 (마크업은 modal_investigate_req_*.php 가 AJAX 로 내려주고 스타일은 공용 번들에 흩어져 있다). */ .ai-field-toolbar { /* 아래 칸과 **붙여서** 한 덩어리로 읽히게 한다 (2026-08-25 사용자 지시). 띄워 두면 버튼이 어느 칸에 걸린 것인지 알 수 없어, 칸이 8~11개인 이 화면에서 특히 헷갈린다. 위쪽 모서리만 둥글게 하고 아래 테두리를 지워 칸의 머리처럼 보이게 한다. [테두리는 칸을 따라간다] modal.css 의 `.evaluation-modal .req_main_content .right-box textarea` 가 칸을 `1px solid #999` + `#fff9ed` 로 그린다. 툴바가 다른 색 테두리를 쓰면 붙여 놓아도 **두 개의 별개 상자**로 보인다 — 실측(2026-08-25 Playwright)에서 툴바 #dfe3e8 / 칸 #999 였고, 그 색 차가 경계선처럼 읽혔다. 그래서 테두리는 칸과 **같은 #999**. [배경은 기록지를 따라간다 — 2026-08-25 사용자 지시] 칸의 크림색 계열을 쓰다가 기록지 공통 회색으로 통일했다. `--color-light-bg` 는 `.evaluation-modal th`(modal.css:1502)가 쓰는 바로 그 값이라, 툴바가 표의 머리칸과 같은 톤이 되어 '이 칸의 머리'로 읽힌다. **리터럴 #f5f6f8 로 박지 말 것** — 변수로 둬야 테마가 바뀔 때 기록지와 함께 따라간다. [폴백이 필수다] 이 변수는 `longterm/css/common.css:30` 에만 정의돼 있는데, **모바일 페이지는 common.css 를 싣지 않는다**(views/longterm/prs/mobile/list.php 는 css/mobile/* 4벌만 link 한다). 폴백 없이 쓰면 모바일에서 var() 가 무효가 되어 배경이 **투명**해지고, 붙여 놓은 '한 묶음' 이 모바일에서만 풀린다 (2026-08-25 실측으로 확인 — 데스크톱 rgb(245,246,248) / 모바일 rgba(0,0,0,0)). 같은 파일의 mobile/modal.css:1512 도 이미 같은 이유로 폴백을 달고 있다. */ display: flex; /* 왼쪽 제목 · 오른쪽 버튼. 제목을 두는 이유는 아래 __title 주석 참고. */ justify-content: space-between; align-items: center; gap: 6px; box-sizing: border-box; /* 위쪽 표와는 띄우고 아래 칸과는 붙인다 (2026-08-25 사용자 지시). 칸을 툴바에 붙이면서 modal.css 가 칸에 주던 `margin-top:10px` 을 0 으로 눌렀는데, 그 여백이 **표와 그룹 사이**를 벌려 주던 것이라 그룹 전체가 표에 달라붙어 답답해졌다. 지운 여백을 툴바 위로 옮겨 되살린다 — 아래 margin 은 0 이어야 칸과 붙어 있다. */ margin: 12px 0 0; padding: 4px 6px; background: var(--color-light-bg, #f5f6f8); border: 1px solid #999; border-bottom: 0; border-radius: 4px 4px 0 0; } /* 툴바 **바로 다음**에 오는 칸만 머리를 맞춘다 — 인접 선택자라 다른 textarea 에는 안 닿는다. [왜 선택자를 두 번 쓰나] 앞줄의 일반 규칙(0,1,1)은 modal.css 의 `.evaluation-modal .req_main_content .right-box textarea`(0,3,1)에 **진다**. 실측(2026-08-25)에서 그 규칙의 `margin-top:10px` · `border-radius:4px` 가 그대로 살아있어 툴바와 칸이 **10px 떨어져** 있었다. 그래서 같은 맥락을 명시한 규칙(0,4,1)을 함께 둔다. `!important` 를 안 쓰는 이유: 이 칸은 서식별로 다른 CSS 가 더 붙을 수 있어 낮은 다음 규칙이 이기는 길을 막아두면 다른 화면을 조용히 깨뜨린다. */ .ai-field-toolbar + textarea, .evaluation-modal .req_main_content .right-box .ai-field-toolbar + textarea { display: block; box-sizing: border-box; width: 100%; margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; } /* 툴바 왼쪽 제목 — 칸이 무엇의 툴바인지 **항상** 알려준다 (2026-08-25). 칸의 placeholder 가 "판단근거" 였는데 그건 **글을 쓰는 순간 사라진다.** AI 로 문장을 채운 뒤부터는 툴바만 남아 어느 칸에 붙은 것인지 단서가 없어져, 붙여 두는 것만으로는 한 묶음이 되지 않았다. 제목은 그 단서를 고정한다. */ .ai-field-toolbar__title { /* 남는 공간을 제목이 먹어 **버튼+설명이 한 덩어리로 오른쪽에 묶인다** (2026-08-25). [WHY justify-content 를 안 바꾸나] 위 space-between 은 자식이 둘일 때만 의도대로 동작한다 — 설명이 붙어 셋이 되면 셋을 고르게 흩뿌려 버튼이 한가운데로 떠 버린다. flex 는 **auto 마진을 justify-content 보다 먼저** 처리하므로, 여기 auto 하나로 종전 배치(제목 왼쪽 · 버튼 오른쪽)를 유지한 채 설명만 버튼 오른쪽에 붙는다. space-between 을 지우지 않는 이유는 설명이 없는 화면(scope 가 표에 없는 버튼)이 종전 그대로 동작해야 하기 때문이다. */ margin-right: auto; color: #55595f; font-size: 12px; font-weight: 600; letter-spacing: .2px; /* 칸이 좁아도 버튼을 밀어내지 않게 한다 — 좁으면 제목이 먼저 줄어든다. */ min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* ── AI 설명 버튼 + 설명 모달 (2026-08-25 사용자 지시 — 디자인 통일) ───────────── 종전에는 버튼 오른쪽에 한 줄짜리 설명을 인라인으로 붙였는데, 화면마다 자리가 달라 급여제공 모니터링(표 폭 20% th)에는 넣을 수가 없었다. 설명 버튼 + 모달로 바꾸면 **자리를 차지하지 않으므로 네 화면(판단근거·종합의견·모니터링·상태변화기록)이 같아진다.** 마크업 정본은 둘이다 — 버튼은 views/longterm/common/ai_correct_btn.php, 모달은 assets/longterm/js/classes/investigateModal/AiHelpModal.js 가 만든다(문구도 거기 있다). */ /* 물음표 버튼. AI 버튼 옆에 붙되 **눈에 덜 띄어야** 한다 — 주 동작은 AI 버튼이다. */ .ai-help-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 1px solid #ddd6fe; border-radius: 50%; background: #fff; /* [필수] 색을 여기서 직접 선언한다. longterm common.css 의 전역 reset 이 span 을 직접 겨냥해 color 를 걸어서 상속으로는 못 이긴다 — 위 __label 주석과 같은 함정이다. 그래서 아래 __ 자식 span 에도 같은 색을 다시 선언한다. */ color: #5b4bd6; font-size: 12px; font-weight: 700; line-height: 1; cursor: pointer; vertical-align: middle; } .ai-help-btn > span { color: #5b4bd6; } .ai-help-btn:hover { background: #f3f1ff; border-color: #c9bdfd; } /* [WHY btn-db 를 안 쓰나] 이 버튼은 **다른 모달 안**에 산다. modal.css 의 `.md-modal-view:not(.md-show) .btn-db { visibility:hidden !important }` 는 그 모달이 닫혀 있을 때 안쪽 .btn-db 를 통째로 감춘다 — 지금은 모달이 열려 있을 때만 보이므로 문제가 없지만, btn-db 를 달아 두면 **호스트 모달의 열림 상태에 설명 버튼의 표시가 묶인다.** 설명 버튼은 그 모달의 동작 버튼이 아니라 안내라서 그 규칙에 묶일 이유가 없다. [주의] AI 버튼이 요청 중 disabled 되어도 이 버튼은 살아 있어야 한다 — '왜 안 되지' 를 확인하려는 순간이 바로 설명이 필요한 때다. 그래서 AI 버튼과 **별도 요소**로 둔다 (disabled 는 파셜이 AI 버튼에만 건다). */ /* ── 설명 모달 ──────────────────────────────────────────────────────────── 골격은 프로젝트 공용 모달(.md-modal-view / .md-modal / .md-body / .md-bottom)을 그대로 쓴다. 여기서는 **폭과 z-index, 본문 목록 스타일만** 덮는다. [WHY 폭을 직접 잡나] 기존 소형 모달이 쓰는 .size-xs01(300px)은 modal.css 에만 있고 모바일(css/mobile/modal.css)에는 **없다**. 그 클래스에 기대면 모바일에서만 폭이 달라진다. 이 파일은 PC·모바일 화면 양쪽이 link 하므로 여기서 잡아야 한 곳으로 끝난다. [WHY z-index 를 올리나] 이 모달은 **다른 모달 위에서** 열린다. 여는 쪽 모달은 JS 가 z-index 를 3500~5000 대까지 올려 쓰고(monitoring_status_modal.css:15), 기록지 계열은 9999 까지 쓴다(modal.css:1614). 기본 2000 이면 열려는 있는데 뒤에 깔려 **아무 일도 안 일어난 것처럼 보인다.** [WHY 셀렉터를 두 개 겹치나 — 2026-08-25 UI 검증에서 실제로 깨졌다] `.ai-help-modal` 하나(특이도 0,1,0)로 두면 **modal.css 의 `.md-modal-view{z-index:2000}`(0,1,0)에 순서로 진다.** 이 화면은 head 에서 ai_correct_btn.css 를 싣고(list.php:38), 그 뒤 **본문 안에서** _layout/signature_modal.php:8 이 modal.css 를 **한 번 더 link** 한다 (list.php:365 require_once). 같은 특이도면 나중에 온 쪽이 이기므로 10050 이 2000 으로 되돌아갔다. 실측: 상태변화기록(z-index 3500) 위에서 설명 모달이 2000 으로 깔려 **화면에 전혀 안 보였다.** 욕구조사 기록지에서 보였던 것은 같은 2000 끼리 DOM 순서로 이긴 우연이었다. 그래서 `!important` 대신 **두 클래스를 겹쳐 특이도를 (0,2,0)으로** 올린다 — 링크 순서에 안 매인다. [주의] 이 파일에 modal.css 를 덮는 규칙을 새로 쓸 때는 **반드시 특이도를 한 단계 높게** 잡을 것. 같은 특이도로 쓰면 이 화면에서만 조용히 무효가 된다. */ .md-modal-view.ai-help-modal { z-index: 10050; } /* [WHY 패널을 통째로 선언하나 — 2026-08-26] 이 모달은 이제 **두 레이아웃**에서 뜬다. 그런데 둘이 서로 다른 modal.css 를 쓴다: · longterm 화면 — assets/longterm/css/modal.css : .md-modal / .md-body / .btn-db 를 전부 준다 · cm_layout 화면 — assets/css/modal.css : **.md-modal-view 와 .md-show 만** 준다 후자에 기대면 패널이 흰 배경도 폭도 없이 맨몸으로 뜬다. 그래서 골격을 여기서 직접 선언해 **어느 화면에서든 같은 모양**이 되게 한다(이 파일의 '독립 컴포넌트' 원칙과도 맞다). longterm 쪽 .md-modal(0,1,0)은 아래 (0,2,0) 규칙이 덮으므로 두 화면이 같아진다. */ .ai-help-modal .md-modal { display: flex; flex-direction: column; width: 460px; min-width: 0; max-width: 92vw; min-height: auto; max-height: 88vh; margin: 0 auto; padding: 24px 0 0; border-radius: 12px; background: #fff; box-shadow: 0 24px 36px 0 rgba(36, 42, 48, .4); overflow: hidden; } .ai-help-modal .md-body { flex: 1 1 auto; padding: 0 24px 4px; overflow-y: auto; } .ai-help-modal .md-heading-left { margin: 0; color: #1e2022; font-size: 17px; font-weight: 700; line-height: 1.4; text-align: left; } .ai-help-modal .md-bottom { flex: 0 0 auto; padding: 6px 24px 20px; } /* 닫기 버튼도 직접 그린다 — cm_layout 쪽에는 .btn-db 정의가 없다. */ .ai-help-modal .md-close { min-width: 96px; height: 38px; padding: 0 18px; border: 1px solid #ddd6fe; border-radius: 6px; background: #f3f1ff; color: #5b4bd6; font-size: 14px; font-weight: 600; cursor: pointer; } .ai-help-modal .md-close:hover { background: #ebe7ff; border-color: #c9bdfd; } /* [주의] 아래 본문 규칙은 전부 `.ai-help-modal` 을 앞에 붙여 특이도를 한 단계 올려 둔다. modal.css 에 `.md-body p { line-height: 1.5 }`(0,1,1) 같은 규칙이 있어, 클래스 하나(0,1,0)로만 쓰면 **그쪽이 이긴다.** 게다가 이 화면은 modal.css 를 본문에서 한 번 더 link 하므로(위 z-index 주석 참조) 같은 특이도끼리도 순서로 진다. 새 규칙을 추가할 때도 같은 접두를 붙일 것. */ .ai-help-modal .ai-help-modal__list { margin: 14px 0 0; padding: 0; list-style: none; } .ai-help-modal .ai-help-modal__list li { position: relative; margin: 0 0 9px; padding-left: 13px; color: #33373c; font-size: 13px; line-height: 1.6; letter-spacing: -.01em; text-align: left; } /* 가운데점은 ::before 로 그린다 — 목록 문자를 쓰면 화면마다 들여쓰기가 갈린다. */ .ai-help-modal .ai-help-modal__list li::before { content: ''; position: absolute; top: 9px; left: 2px; width: 4px; height: 4px; border-radius: 50%; background: #8b5cf6; } /* 마지막 주의 문구 — 목록과 구분되게 한 단 낮춘 상자에 담는다. */ .ai-help-modal .ai-help-modal__note { margin: 14px 0 4px; padding: 10px 12px; border-radius: 6px; background: #f3f1ff; color: #5b4bd6; font-size: 12px; line-height: 1.6; text-align: left; } /* 툴바는 칸의 **머리띠**지 별도 영역이 아니다 — 기본 32px 높이를 낮춰 두께를 줄인다. (실측 2026-08-25: 32px 버튼이면 툴바가 41px 로, 134px 짜리 칸 옆에서 지나치게 두꺼웠다.) */ .ai-req-btn { display: inline-flex; flex: 0 0 auto; height: 26px; padding: 0 8px 0 5px; font-size: 12px; line-height: 1.4; } /* [급여제공 모니터링] 버튼이 항목명 칸(th) 안에 있다 — 2026-08-24 사용자 지시. 그 칸은 표 폭의 20% 라 판단근거처럼 우측에 띄우면 글자가 뭉갠다. 상태변화 기록지가 제목 영역에서 쓰는 방식을 따르되, 폭은 글자에 맞추고 가운데 정렬한다. (참고 정본: assets/longterm/css/status_change_modal.css 의 .sc-content-heading .sc-ai-btn) */ /* ── 문서작성(회의록) 화면 — 2026-08-26 사용자 지시 ──────────────────────────── 이 파일은 원래 longterm 전용이었는데, SNB '문서작성' 메뉴의 ' - AI' 표기와 회의록 화면의 '👀 케봇으로 회의내용 AI 예시 보기' 버튼을 같은 디자인으로 통일하면서 cm_layout.php 가 함께 싣는다. */ /* [필수] 호스트 CSS 가 라벨 색을 덮는다. custom.css:6178 `.ai-middle-area span { color: #ff2c2c }` 는 특이도 (0,1,1) 이라 `.ai-correct-btn__label`(0,1,0)를 **순서와 무관하게 이긴다** — 그대로 두면 AI 라벨이 빨갛게 나온다. 이 파일 앞부분의 __label 주석이 경고하던 바로 그 함정이라, 여기서 (0,2,0) 으로 되받는다. */ .ai-middle-area .ai-correct-btn__label { color: #5b4bd6; } /* 회의록 화면 버튼 — 경고 문구 오른쪽에 둔다. 종전 .btn-bot 은 margin-left:75px 였는데 그건 '👀 케봇으로 회의내용 AI 예시 보기' 라는 긴 문구 기준으로 잡힌 값이다. 라벨이 'AI 초안 생성' 으로 짧아졌으므로 간격을 다시 잡는다. */ /* 경고 문구는 왼쪽, AI 버튼 묶음은 오른쪽으로 (2026-08-26 사용자 지시). [WHY 전용 클래스인가] `.ai-middle-area` 만으로 걸었더니 **욕구조사 모달 5개 파일**도 같이 잡혔다 (그쪽은 경고 span 하나뿐이라 회귀는 없었지만 의도한 범위가 아니었다 — QA 지적). 회의록 3화면만 쓰는 `.ai-minutes-area` 를 함께 달아 범위를 좁힌다. [WHY 700px 인가 — '작성하는 칸 기준' 2026-08-26 사용자 지시] 이 영역은 부모 폭을 다 쓰지만 **아래 작성 칸은 `.insboard-tbl { width: 700px }`(custom.css:5129) 로 더 좁다.** 컨테이너 오른쪽 끝까지 밀면 버튼이 작성 칸보다 훨씬 바깥에 떠서 어느 칸에 걸린 것인지 안 보인다. 그래서 이 영역의 폭을 작성 칸과 같게 잘라 **버튼 오른쪽 끝이 칸 오른쪽 끝과 맞도록** 한다. [주의] 700 은 `.insboard-tbl` 의 값을 따라간 것이다. 그쪽이 바뀌면 여기도 같이 바꿔야 한다. [주의] `.ai-middle-area span { color:#ff2c2c }`(custom.css:6178)가 이 안의 모든 span 을 겨냥한다 — 그래서 경고 문구를 감싸는 요소를 새로 만들지 않고 **기존 span 을 그대로 두고** flex 로만 배치한다. */ .ai-minutes-area { display: flex; align-items: center; gap: 8px; max-width: 700px; } /* [작성 칸이 선언한 700px 를 실제로 지키게 한다 — 2026-08-26 실측 후 추가] `.insboard-tbl` 은 `width: 700px`(custom.css:5129) 인데 **실측 렌더 폭은 696.28px** 였다. 부모 `.insboard-box` 가 flex 이고 그 안에 말풍선(`.insboard-bubble` 260px + margin-left 18px)이 같은 줄에 있어, 요구 폭 합(978px)이 컨테이너(973px)를 넘자 `flex-shrink` 기본값 1 이 발동해 표가 3.72px 줄어든 것이다. 그 결과 버튼이 칸 오른쪽 끝을 **2.72px 넘었다**(3화면 동일 재현). [WHY 696px 로 맞추지 않나] 줄어드는 양은 **컨테이너 폭에 따라 달라진다** — 이 화면들은 좌측 달력 패널(#foldingBox)을 접었다 폈다 할 수 있어 폭이 변한다. 고정 숫자로 맞추면 그 순간 또 어긋난다. 대신 표가 **선언한 폭을 지키게** 해 두 값이 항상 같아지게 한다. [WHY 이 범위인가] `.insboard-tbl` 에 전역으로 걸면 `.insboard-box` 를 쓰는 다른 화면까지 바뀐다. 인접 선택자로 **AI 영역 바로 다음 박스**만 겨냥한다(회의록 3화면). 남는 5px 는 말풍선이 흡수한다(260 → 255px) — 장식 요소라 영향이 없다. */ .ai-minutes-area + .insboard-box .insboard-tbl { flex-shrink: 0; } /* 남는 공간을 경고 문구가 먹어 버튼이 오른쪽으로 밀린다. */ .ai-minutes-area > span:first-child { margin-right: auto; } .ai-minutes-btn { flex: 0 0 auto; vertical-align: middle; } /* 회의록 표의 **라벨 칸(th) 안**에 놓는 AI 버튼 묶음 (2026-09-01 사용자 지시 — 채울 칸 바로 옆에 둔다). 현재 사용처: views/institution/partials/form_{case,employee,management}_minutes.php 의 본문 칸 th 3곳. [WHY 크기를 줄이나] th 는 colspan 3(전체 16칸)이라 폭이 좁다(실측 153px). 기본 크기로는 버튼(99px)과 설명 버튼이 한 줄에 안 들어가 ? 가 아래로 내려간다. **이 자리에서만** 한 단계 줄인다 — 배색·모양은 그대로라 다른 AI 진입점과 같아 보인다. [주의] th 의 letter-spacing(1px)이 라벨로 새면 폭이 또 늘어난다 — 여기서 0 으로 되돌린다. */ .ai-th-actions { display: flex; /* 사용자 지시: AI 버튼과 설명(?) 버튼은 **한 줄**로 둔다. */ flex-wrap: nowrap; align-items: center; justify-content: center; gap: 4px; margin-top: 8px; } .ai-th-actions .ai-correct-btn { height: 26px; padding: 0 8px 0 5px; gap: 5px; font-size: .8em; font-weight: 600; letter-spacing: 0; } .ai-th-actions .ai-correct-btn__label { white-space: nowrap; } .ai-th-actions .ai-correct-btn__icon { width: 16px; height: 16px; } .ai-th-actions .ai-correct-btn__icon svg { width: 11px; height: 11px; } .ai-th-actions .ai-help-btn { width: 17px; height: 17px; font-size: 11px; } /* ── AI 초안 생성 진행 표시 (2026-09-01 사용자 지시) ───────────────────────── 마크업은 회의록 6화면이 이미 갖고 있던 `
` 에 `ai-loading` 클래스를 덧붙인 것이다(문서작성 3 + IYR 모달 3). 빈 div 라 원과 캡션 모두 가상요소로 그린다. [WHY 갈아엎었나] 종전 모양은 custom.css:6201 의 **회색 링 + 주황 호** 였고, `