@charset "utf-8";
/*!
 * OMNIBUSCODE Kanboard theme - 손으로 쓰는 층.
 *
 * omc-kanban-dark.generated.css 가 Greenwing/Kanboard 의 색 선언을 기계적으로
 * 뒤집어 놓는다. 그것이 잡지 못하는 것만 여기에 쓴다:
 *   - 원본에 아예 선언이 없어서 뒤집을 대상이 없는 것 (브라우저 기본값)
 *   - 색이 아니라 구조/이미지로 표현된 것
 *   - 이 플러그인이 새로 만든 UI (테마 선택 콤보)
 *
 * 이 파일은 생성 파일보다 '뒤에' 로드된다 (Plugin.php 의 등록 순서).
 * 따라서 같은 특이도면 여기가 이긴다.
 *
 * 라이트 모드 규칙은 콤보 스타일 말고는 두지 않는다 - 기존 화면을 건드리지 않는 것이 원칙.
 */

/* ===========================================================================
   1. 팔레트 + 브라우저 기본 UI
   =========================================================================== */
:root[data-omc-theme="dark"] {
  --omc-bg: #23262a;
  --omc-surface: #2a2e33;
  --omc-surface-2: #31363c;
  --omc-surface-3: #383e45;
  --omc-border: #3d434a;
  --omc-border-2: #4a5158;
  --omc-text: #d8dbdf;
  --omc-text-dim: #a2a8af;
  --omc-text-faint: #7f868d;
  --omc-link: #82b4f0;
  --omc-link-hover: #a9cdf8;
  --omc-accent: #3b7dd8;

  /* 스크롤바·기본 폼 컨트롤(체크박스, date picker 등)을 브라우저가 어둡게 그린다.
     이것 하나로 CSS 로는 손대기 어려운 네이티브 위젯이 전부 따라온다. */
  color-scheme: dark;
}

/* Kanboard 자체 CSS 변수도 같이 뒤집는다.
   light.min.css 가 :root 에 정의해 둔 것들이라, 변수를 통해 색을 받는 규칙은
   생성 파일이 굳이 셀렉터를 나열하지 않아도 여기서 한 번에 해결된다. */
:root[data-omc-theme="dark"] {
  --body-background-color: #23262a;
  --header-background-color: #2a2e33;
  --color-primary: #d8dbdf;
  --color-light: #a2a8af;
  --color-lighter: #3d434a;
  --color-dark: #e8ebee;
  --color-medium: #a2a8af;
  --link-color-primary: #82b4f0;
  --link-color-hover: #a9cdf8;
  --link-color-focus: #a9cdf8;
}

/* 원본에 선언이 없어 생성기가 뒤집을 게 없던 것들 */
[data-omc-theme="dark"] body {
  background-color: var(--omc-bg);
  color: var(--omc-text);
}
[data-omc-theme="dark"] .page,
[data-omc-theme="dark"] #main {
  background-color: transparent;
}

/* ===========================================================================
   2. 이미지로 된 색
   ---------------------------------------------------------------------------
   Kanboard 는 assets/css/images/ 아래 아이콘 스프라이트를 쓴다. 검은 선으로 된
   투명 PNG 라 어두운 배경에서 잘 안 보인다. 색을 CSS 로 못 바꾸므로 밝기를
   뒤집어 준다. (사진이 아니라 단색 아이콘이라 invert 로 충분하다)
   =========================================================================== */
[data-omc-theme="dark"] img[src*="/assets/css/images/"],
[data-omc-theme="dark"] .dropzone img,
[data-omc-theme="dark"] img[src$=".svg"][src*="/assets/img/"] {
  filter: invert(0.85) hue-rotate(180deg);
}
/* 사용자 아바타·첨부 미리보기는 진짜 이미지라 건드리면 안 된다 */
[data-omc-theme="dark"] .avatar img,
[data-omc-theme="dark"] .avatar-letter,
[data-omc-theme="dark"] .file-thumbnail img,
[data-omc-theme="dark"] .img-thumbnail {
  filter: none;
}

/* ===========================================================================
   3. 사용자가 쓴 본문 (마크다운)
   ---------------------------------------------------------------------------
   config.php 에 MARKDOWN_ESCAPE_HTML = true 라, 댓글·설명에 style="" 이 든
   생 HTML 은 들어올 수 없다. /board 에서 필요했던 런타임 색 보정이 여기서는
   필요 없는 이유다. 마크다운이 만들어내는 태그만 챙기면 된다.
   =========================================================================== */
[data-omc-theme="dark"] .markdown code,
[data-omc-theme="dark"] .markdown pre,
[data-omc-theme="dark"] .comment-content code,
[data-omc-theme="dark"] .comment-content pre,
[data-omc-theme="dark"] pre,
[data-omc-theme="dark"] code {
  background-color: #1b1e21;
  border-color: var(--omc-border);
  color: #d0d4d8;
}
[data-omc-theme="dark"] .markdown blockquote,
[data-omc-theme="dark"] blockquote {
  border-left-color: var(--omc-border-2);
  color: var(--omc-text-dim);
}
[data-omc-theme="dark"] .markdown table th,
[data-omc-theme="dark"] .markdown table td {
  border-color: var(--omc-border);
}
[data-omc-theme="dark"] .markdown hr {
  border-color: var(--omc-border);
}

/* ===========================================================================
   4. 테마 전환 아이콘 버튼
   ---------------------------------------------------------------------------
   헤더의 .menus-container 안에 JS 가 끼워 넣는다. 로그인 화면에는 헤더가 없어서
   .form-login 아래에 붙는다. 두 경우 모두 같은 클래스를 쓴다.
   아이콘 하나만 두고, 누를 때마다 자동 → 밝게 → 어둡게 로 돈다.
   현재 상태는 글리프(◐ ☀ ☾)와 title 툴팁으로 보여준다.
   여기 규칙은 라이트/다크 양쪽에서 필요하므로 테마 게이트 없이 쓴다.
   =========================================================================== */
button.omc-theme-picker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 28px;
  height: 28px;
  /* header 와 .menus-container 가 flex 라 기본값(flex-shrink:1)이면 눌려서
     28px 로 준 너비가 15px 까지 찌그러진다. 줄어들지 않게 고정한다. */
  flex: 0 0 auto;
  min-width: 28px;
  padding: 0;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.75;
  /* Kanboard/Greenwing 의 .btn 계열 스타일을 물려받지 않도록 최소한만 지정한다 */
  box-shadow: none;
  text-shadow: none;
}
button.omc-theme-picker:hover,
button.omc-theme-picker:focus {
  opacity: 1;
  background: rgba(127, 127, 127, .18);
  color: inherit;
}
button.omc-theme-picker:focus-visible {
  outline: 2px solid var(--omc-accent, #3b7dd8);
  outline-offset: 1px;
}

/* 로그인 화면에서는 폼 아래 가운데 */
.form-login button.omc-theme-picker {
  display: flex;
  margin: 14px auto 0;
}

/* 프로필의 Kanboard 기본 테마가 light 가 아닐 때 - JS 가 이 클래스를 붙인다.
   이 오버레이는 light.min.css 위에 얹히도록 만들어졌기 때문에 경고를 보인다. */
button.omc-theme-picker.omc-base-mismatch {
  border-color: #e0a030;
}

/* ===========================================================================
   5. 로고가 안 보이던 문제 (테마와 무관한 수정)
   ---------------------------------------------------------------------------
   Greenwing 에는 제작사(Cloud Temple) 브랜딩을 끼워넣는 층이 들어 있다.
   plugins/Greenwing/sass/layout/_cloudtemple.scss:

       header .logo a { opacity: 0 }          <- 설정한 로고를 통째로 투명하게
       header .logo   { background-image: url(https://www.cloud-temple.com/...svg);
                        width: 39px; height: 29px }

   즉 Config.php 의 $GreenwingConfig['logo'] 로 지정한 logo.png 는 정상적으로
   내려받아지지만 anchor 가 opacity:0 이라 화면에 그려지지 않고, 그 자리에는
   제작사가 자기 도메인에서 호스팅하는 SVG 가 배경으로 깔린다.
   (계산값으로 확인: header .logo a 의 opacity 가 0)

   덤으로 이 배경은 매 페이지마다 외부 도메인(cloud-temple.com)에 요청을 보낸다.
   그쪽이 죽거나 느리면 로고 자리가 비고, 접속 정보도 제3자에게 넘어간다.
   배경을 걷어내면 그 요청도 같이 사라진다.

   Greenwing 파일을 직접 고치면 업데이트 때 되돌아가므로 여기서 덮는다.
   =========================================================================== */
header .logo {
  background-image: none;
  width: auto;
  height: auto;
  /* 세로 가운데 정렬.
     원래 마크업이 inline <a> 안에 block <img> 를 넣는 모양이라, 인라인
     박스가 이미지 위아래로 빈 라인박스를 만든다. 실측으로 .logo 가 56px 로
     부풀고 29px 이미지는 그 맨 위에 붙어 제목보다 13.6px 위로 떴다.
     a 를 flex 로 바꾸면 그 빈 라인박스가 사라져 높이가 이미지와 같아지고,
     h1(display:flex; align-items:center)이 제목과 나란히 가운데로 맞춰준다. */
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
header .logo a,
header .logo a:hover,
header .logo a:focus {
  opacity: 1;
  display: inline-flex;
  align-items: center;
  line-height: 0;   /* 인라인 잔여 여백 방지 */
}
header .logo a img {
  display: block;
  height: 29px;   /* Cloud Temple 배경이 쓰던 크기. 헤더(padding 15px)에 들어맞는다 */
  width: auto;
  vertical-align: middle;
}

/* 색이 툭 끊기지 않게. 레이아웃 속성은 건드리지 않는다. */
body,
header,
.page,
.task-board,
.board-column,
.dropdown-menu,
select,
input,
textarea {
  transition: background-color .18s linear, color .18s linear, border-color .18s linear;
}