/* [app.css 분할 10/10 · profile.css] 프로필 행(M2) · 프로필 카드(M6)
   2026-08-23 리팩터 — 옛 app.css 를 원본 순서 그대로 10조각으로 나눴다.
   캐스케이드가 곧 계약이라 로드 순서를 바꾸면 안 된다:
   app.css → studio.css → rooms.css → orgwork.css → overlays.css → winmodes.css → plus.css → chrome.css → msgx.css → profile.css
   로드 지점: web/index.html, tests/harness/*.html */
/* ══════════════════════════════════════════════════════════════════════
   M2 front-profile (P1, 2026-08-02) — docs/ARCHITECTURE_MESSENGER_PROFILE.md
   §1.3(#coMe)·§4.1(profile.js)·§4.3(표). 색은 기존 팔레트 var() 만 사용.
   ══════════════════════════════════════════════════════════════════════ */

/* 내 프로필 행(#coMe) — co-head 바로 아래·검색줄 위, 스크롤 밖 고정.
   마크업은 profile.js(rowPaint)가 스스로 채운다(M4는 빈 컨테이너만 넣는다). */
.co-me{display:flex;align-items:center;gap:10px;padding:10px 12px;flex:none;
  border:0;border-bottom:1px solid var(--line);background:0 0;text-align:left;cursor:pointer;
  transition:background var(--motion-dur-micro) var(--motion-ease-out)}
.co-me:hover{background:var(--hover)}
.co-me-ava{width:40px;height:40px;border-radius:50%;flex:none;overflow:hidden;
  background:linear-gradient(145deg,var(--accent-deep),var(--ink));color:var(--card);font-size:13px;
  display:grid;place-items:center}
.co-me-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.co-me-name{font-size:13.5px;font-weight:700;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.co-me-status{font-size:11.5px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.co-me-status.hint{color:var(--dim);opacity:.75}

/* 섹션 헤더(토픽/채팅) — M3(rooms.js)가 마크업을 만들고 이 스타일을 쓴다(§4.3).
   접기/펼치기는 즉시 display 토글 + 체브론 회전만(모션 §6, max-height 애니 금지).
   justify-content:flex-start 는 사이드바 공용 .sec-head 의 space-between 상쇄 —
   ＋버튼이 없는 섹션(채팅)도 체브론·라벨·숫자가 왼쪽에 붙게(2026-08-02 보스 리포트). */
.co-sec-head{display:flex;align-items:center;justify-content:flex-start;gap:5px;width:100%;border:0;background:0 0;
  padding:10px 10px 4px;color:var(--dim);font-size:11px;font-weight:640;letter-spacing:.04em;text-align:left}
.co-sec-head .chev{font-style:normal;display:inline-block;
  transition:transform var(--motion-dur-micro) var(--motion-ease-out)}
.co-sec.is-fold .chev{transform:rotate(-90deg)}
.co-sec-head .cs-label{color:var(--dim)}
.co-sec-head .cs-n{font-weight:640;color:var(--dim);opacity:.8}
.co-sec-head .top-spacer{flex:1}
.co-sec-head .co-sec-add{border:0;background:0 0;color:var(--accent);font-size:11px;font-weight:640;
  padding:2px 4px;border-radius:6px;cursor:pointer}
.co-sec-head .co-sec-add:hover{background:var(--accent-soft)}

/* 아바타 이미지 — 목록/미니창/독/#coMe 공용. 이니셜 폴백 위에 이미지가 있으면 덮는다. */
.r-ava img,.co-me-ava img{width:100%;height:100%;object-fit:cover;border-radius:50%}

/* 편집 모달(#modal 안, roomnew.js 문법 재사용) — 아바타 미리보기 + 사진 바꾸기/기본 이미지로 */
.prof-ava-row{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.prof-ava-prev{width:64px;height:64px;border-radius:50%;flex:none;overflow:hidden;
  background:linear-gradient(145deg,var(--accent-deep),var(--ink));color:var(--card);font-size:19px;
  display:grid;place-items:center}
.prof-ava-prev img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.prof-ava-acts{display:flex;flex-direction:column;gap:6px}
.prof-status-cnt{align-self:flex-end;font-size:10.5px;color:var(--dim)}

/* ══════════════════════════════════════════════════════════════════════
   M6 front-card (P2, 2026-08-02) — docs/ARCHITECTURE_MESSENGER_PROFILE.md
   §4.2(ProfCard)·§5(카드 UI·가드레일)·§6(모션). 마크업은 profilecard.js 가
   동적 생성·제거한다(ctxmenu.js/msn.js railMenu 선례 — 이 파일에 컨테이너
   없음). .aho-anim 계약: wrap·card 를 함께 ahoShow/ahoHide 로 연다.
   z-index 89 — 모달(90) 바로 아래·plusMenu(85) 위(§5 z 사다리, 옛 #profPop 95
   반납분 승계). 딤은 rgba 단색(§6, backdrop-filter 금지 — #modalWrap·#usWrap
   과 같은 문법). 카드 내부 색은 기존 팔레트 var() 만(시큐어 톤 자동 승계).
   ══════════════════════════════════════════════════════════════════════ */
#profCard{position:fixed;inset:0;z-index:89;display:grid;place-items:center;
  background:rgba(18,24,49,.32);
  --aho-dur:var(--motion-dur-panel);--aho-dur-exit:var(--motion-dur-exit-panel);--aho-rise:0px}
.pc-card{position:relative;width:min(340px,92vw);max-height:86vh;overflow-y:auto;
  background:var(--card);border:1px solid var(--line);border-radius:20px;
  padding:34px 22px 20px;display:flex;flex-direction:column;align-items:center;gap:2px;
  box-shadow:0 30px 70px -20px #27225d3d;
  --aho-dur:var(--motion-dur-panel);--aho-dur-exit:var(--motion-dur-exit-panel);--aho-rise:14px}
/* ✕ 닫기 — 좌상단 고정(§5 오클릭 원칙: 우상단은 창 닫기 ✕ 와 같은 축이라 회피) */
.pc-x{position:absolute;left:10px;top:10px;width:30px;height:30px;border:0;border-radius:50%;
  background:0 0;color:var(--dim);font-size:15px;line-height:1;display:grid;place-items:center;
  transition:background var(--motion-dur-micro) var(--motion-ease-out),
             color var(--motion-dur-micro) var(--motion-ease-out)}
.pc-x:hover{background:var(--hover);color:var(--ink)}
/* ☆ 즐겨찾기 — 우상단 유틸(✕ 와 모양이 달라 §2 오클릭 원칙 위반 아님). rid 없으면 hidden */
.pc-star{position:absolute;right:10px;top:10px;width:30px;height:30px;border:0;border-radius:50%;
  background:0 0;color:var(--dim);font-size:18px;line-height:1;display:grid;place-items:center;
  transition:background var(--motion-dur-micro) var(--motion-ease-out),
             color var(--motion-dur-micro) var(--motion-ease-out)}
.pc-star:hover{background:var(--hover)}
.pc-star.is-on{color:var(--accent)}
.pc-ava{width:96px;height:96px;border-radius:50%;flex:none;overflow:hidden;margin-bottom:10px;
  background:linear-gradient(145deg,var(--accent-deep),var(--ink));color:var(--card);
  font-size:30px;font-weight:650;display:grid;place-items:center}
.pc-ava img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.pc-name{font-size:17px;font-weight:700;color:var(--ink);max-width:100%;text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-dept{font-size:12px;color:var(--dim);max-width:100%;text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-status{margin-top:8px;font-size:12.5px;color:var(--dim);max-width:100%;text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-acts{width:100%;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:6px}
.pc-act{width:100%;border:0;border-radius:12px;padding:11px 14px;font-size:13.5px;font-weight:640;
  background:var(--hover);color:var(--ink);
  transition:background var(--motion-dur-micro) var(--motion-ease-out),
             color var(--motion-dur-micro) var(--motion-ease-out)}
.pc-act:hover{background:var(--accent-soft);color:var(--accent-deep)}
.pc-act:disabled{opacity:.55;cursor:default;pointer-events:none}

/* 나와의 채팅(§12.3, 2026-08-02) — "나" 배지. 목록 행(.r-name)·미니창 제목(.cm-title)
   공용, rooms.js coSelfTag 가 붙인다. 색은 var() 만(시큐어 톤 자동 승계). */
.r-self{display:inline-block;margin-right:4px;padding:0 4.5px;border-radius:4px;
  background:var(--accent);color:var(--card);font-size:10px;font-weight:700;
  line-height:16px;vertical-align:1px;flex:none}

/* 워크플로 보드 진입점 (2026-08-05, docs/ARCHITECTURE_WFBOARD.md 3단계).
   기존 블록은 건드리지 않고 파일 끝에만 더한다. */
.ico-gantt{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M4.4 7h7.4M8.2 12h11.4M4.4 17h5.6'/%3E%3C/svg%3E")}

/* 도는 워크플로가 있다는 표시. 사이드바가 접히면(52px) 라벨이 폭 0 이 되므로
   점을 흐름에 두면 같이 사라진다 — 버튼 기준 절대 배치로 접힘에서도 남긴다.
   .menu-it 의 position 만 여기서 덧씌운다(원래 블록 무수정). */
.menu-it{position:relative}
.menu-dot{position:absolute;right:9px;top:50%;transform:translateY(-50%);
  width:7px;height:7px;border-radius:50%;background:#2f7fe0}
/* 접힘에선 아이콘 우상단에 겹쳐 붙는다 — .rail-dot(레일 🔔 배지)과 같은 문법. */
body.side-closed .menu-dot{right:3px;top:3px;transform:none}

/* 방 일정 (G4, 2026-08-12) — 서랍 안 화면. 설계 docs/ARCHITECTURE_ROOMS_GROUP.md §6.
   .rm-* 문법(공지·사진 모아보기와 같은 자리)을 그대로 잇는다. 서랍은 폭이 좁아
   고정폭을 쓰지 않는다 — 날짜 칸만 flex:none 이고 나머지는 min-width:0 로 준다
   (UI_GUARDRAILS §5.5 짤림 제로). */
.ico-calendar{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5.6' width='16' height='14' rx='2.4'/%3E%3Cpath d='M4 10h16M8.4 3.6v3.4M15.6 3.6v3.4'/%3E%3C/svg%3E")}
.rm-cal{display:flex;flex-direction:column;gap:4px;margin:2px 2px 6px}
.rm-cal-it{display:flex;align-items:center;gap:10px;min-width:0;
  background:var(--side-bg);border-radius:10px;padding:7px 9px}
.rm-cal-it .d{flex:none;width:34px;text-align:center;line-height:1.15}
.rm-cal-it .d b{display:block;font-size:12.5px;color:var(--accent-deep)}
.rm-cal-it .d span{font-size:10px;color:#9298a8}
.rm-cal-it .t{flex:1;min-width:0}
.rm-cal-it .t p{margin:0;font-size:12.5px;color:#2f3450;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rm-cal-it .t small{font-size:10.5px;color:#9298a8}
.rm-cal-it .x{flex:none;border:0;background:0 0;cursor:pointer;color:#9a9fb2;padding:2px}
.rm-cal-it .x:hover{color:#c94257}
.rm-cal-it .x .ico{width:14px;height:14px}
/* 일정 잡기 모달 — .rm-sinp(공지 쓰기) 를 잇고 줄만 더한다.
   #modal 스코프로 쓴다: 위쪽 `#modal label{flex-direction:column}` 이 (1,0,1) 라
   클래스 하나(0,1,0)로는 못 이겨 체크박스와 글자가 세로로 쌓인다. */
#modal label.rm-chk{flex-direction:row;align-items:center;gap:7px;
  font-size:12.5px;color:#4a4f66;margin:2px 0 8px}
#modal .rm-row{display:flex;align-items:center;gap:8px;min-width:0}
#modal .rm-row .rm-sinp{flex:1;width:auto;min-width:0;margin-bottom:0}
#modal .rm-warn{font-size:11.5px;color:#c94257;min-height:15px;margin:2px 0}