/* [app.css 분할 1/10 · app.css] 베이스·색 토큰·테마
   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 */
/* 아호비 스튜디오 웹 본편 — 로그인과 같은 디자인 토큰(잉크/바이올렛/페이퍼).
   레이아웃: 접이식 사이드바(280px↔52px) + 중앙 채팅 + 우측 슬라이드 작업 패널.
   시큐어 모드: html.secure 에서 초록 틴트로 전면 전환(4단계). */
*{box-sizing:border-box}
[hidden]{display:none!important}   /* display 지정 요소에서도 hidden 이 항상 이기게 */
html,body{height:100%;margin:0}
body{background:var(--paper);color:var(--ink);font-family:"Pretendard","Noto Sans KR","Malgun Gothic","Segoe UI",sans-serif;overflow:hidden}
button{font:inherit;color:inherit;cursor:pointer}
input,textarea,select{font:inherit;color:var(--ink)}
/* ── 색 토큰 · 테마 (2026-08-02 보스 지시: 설정에서 테마 색 5종) ──
   강조색은 아래 8개 토큰이 단일 출처다. 새 UI에서 보라색을 하드코딩하지 말고
   반드시 토큰을 쓴다 — 하드코딩하면 테마를 바꿔도 그 요소만 보라로 남는다.
     --accent       기본 강조색 (아이콘·링크·테두리·활성 표시)
     --accent-lite  그라디언트 밝은 끝
     --accent-deep  그라디언트 어두운 끝 · 눌림 상태
     --accent-grad  주 버튼/내 말풍선 그라디언트 (lite→deep, 이 값은 공통)
     --accent-soft  아주 옅은 배경 (선택된 행, 칩)
     --accent-rgb   반투명용 채널값 — rgba(var(--accent-rgb),.35) 형태로 쓴다
     --hover        호버 배경     --side-bg 사이드바 배경   --paper-tint 앱 배경 틴트
   테마는 html[data-theme=…] (core.js ahoThemeApply, localStorage 로 창 간 공유).
   시큐어(html.secure)는 상태 신호라 테마보다 항상 세다 — 블록 순서로 이긴다. */
:root{
  --line:#e7e6ef; --dim:#8c91a1; --card:#ffffff;
  --accent:#6657ff; --accent-lite:#7767ff; --accent-deep:#5543e1;
  --accent-soft:#efedff; --accent-rgb:102,87,255;
  --hover:#f1effc; --side-bg:#f6f5fb; --paper-tint:#f8f6ff;
  --accent-grad:linear-gradient(135deg,var(--accent-lite),var(--accent-deep));
  --side-w:280px; --work-w:min(600px,84vw);
  --ws-feed-w:210px;   /* 미리보기 열림 시 활동 피드 레일 폭 (미리보기가 나머지 채움) */
}
/* 테마 5종 — 흰 글자 대비 4.5:1 이상 확보(주 버튼에 흰 글자가 올라간다).
   시큐어 초록과 헷갈리지 않게 초록 계열은 넣지 않는다. */
html[data-theme="ocean"]{     /* 오션 — 차분한 블루 */
  --accent:#1f6feb; --accent-lite:#3d84f5; --accent-deep:#1558c4;
  --accent-soft:#e8f0ff; --accent-rgb:31,111,235;
  --hover:#eef4ff; --side-bg:#f2f6fd; --paper-tint:#f2f7ff;
}
html[data-theme="rose"]{      /* 로즈 — 따뜻한 산호빛 */
  --accent:#cf3f57; --accent-lite:#e4566e; --accent-deep:#b02f46;
  --accent-soft:#ffe9ed; --accent-rgb:207,63,87;
  --hover:#fff0f3; --side-bg:#fdf3f5; --paper-tint:#fff4f6;
}
html[data-theme="bronze"]{    /* 브론즈 — 앰버 계열 */
  --accent:#a8681c; --accent-lite:#c07a20; --accent-deep:#8a5514;
  --accent-soft:#fbeed7; --accent-rgb:168,104,28;
  --hover:#fdf4e6; --side-bg:#fbf6ec; --paper-tint:#fdf7ec;
}
html[data-theme="slate"]{     /* 슬레이트 — 무채색, 색을 빼고 일에 집중 */
  --accent:#4b5566; --accent-lite:#5d6879; --accent-deep:#38414f;
  --accent-soft:#eceef2; --accent-rgb:75,85,102;
  --hover:#f0f2f6; --side-bg:#f4f5f8; --paper-tint:#f5f6f9;
}
html[data-theme="indigo"]{    /* 인디고 — 바이올렛보다 깊고 진한 남보라 */
  --accent:#4338ca; --accent-lite:#5b4fdb; --accent-deep:#362ca6;
  --accent-soft:#e9e7fd; --accent-rgb:67,56,202;
  --hover:#f0eeff; --side-bg:#f3f2fd; --paper-tint:#f4f3ff;
}
html[data-theme="teal"]{      /* 틸 — 청록. 시큐어 초록과 헷갈리지 않게 파랑 쪽으로 */
  --accent:#0e7490; --accent-lite:#0f89a8; --accent-deep:#0a5c73;
  --accent-soft:#dff2f7; --accent-rgb:14,116,144;
  --hover:#eaf6fa; --side-bg:#eff7fa; --paper-tint:#eef8fb;
}
html[data-theme="plum"]{      /* 플럼 — 자주빛 */
  --accent:#9c3587; --accent-lite:#b0429a; --accent-deep:#7f2a6d;
  --accent-soft:#fbe7f6; --accent-rgb:156,53,135;
  --hover:#fdeffa; --side-bg:#fbf2f9; --paper-tint:#fdf3fb;
}
html[data-theme="burgundy"]{  /* 버건디 — 깊은 와인, 로즈보다 어둡고 차분 */
  --accent:#9f1239; --accent-lite:#b81c47; --accent-deep:#820c2d;
  --accent-soft:#ffe4eb; --accent-rgb:159,18,57;
  --hover:#fff0f4; --side-bg:#fdf2f5; --paper-tint:#fff3f6;
}
html[data-theme="sunset"]{    /* 선셋 — 주황. 브론즈보다 붉고 선명 */
  --accent:#c2410c; --accent-lite:#dd5216; --accent-deep:#9e340a;
  --accent-soft:#ffe9dc; --accent-rgb:194,65,12;
  --hover:#fff1e8; --side-bg:#fdf4ee; --paper-tint:#fff4ec;
}
/* 시큐어 모드 — 테마 뒤에 두어 항상 이긴다(같은 특이도, 순서 승부). 순서를 바꾸면
   시큐어인데 개인 테마 색이 남는 사고가 난다. */
html.secure{
  --accent:#1e9e63; --accent-lite:#2bb173; --accent-deep:#177a4c;
  --accent-soft:#e7f6ee; --accent-rgb:30,158,99;
  --hover:#ecf7f1; --paper:#f7fbf8; --side-bg:#f0f8f3; --paper-tint:#effaf3;
}

/* 높이는 메뉴바 높이(--menubar-h, 메뉴바 없는 모드에선 0)를 뺀 나머지 전부 —
   100vh 직접 참조는 이 한 곳만 유지한다 (docs/ARCHITECTURE_MENUBAR.md §4-2) */
#app{display:flex;height:calc(100vh - var(--menubar-h,0px));width:100vw;background:
  radial-gradient(circle at 12% -10%,#ffffff 0 24%,#0000 60%),
  linear-gradient(125deg,#f8f7f5 0%,#fff 46%,var(--paper-tint) 100%)}
html.secure #app{background:linear-gradient(125deg,#f4faf6 0%,#fff 46%,var(--paper-tint) 100%)}