@charset "utf-8";
/* TOURMUCH // Maker : H.J Jeon // E-Mail : jinia21@naver.com // Site : tourmuch.com */

/* Font Setting */
@font-face {
	font-family: 'Pretendard Variable';
	font-weight: 45 920;
	font-style: normal;
	font-display: swap;
	src: url('../webfonts/PretendardVariable.woff2') format('woff2-variations');
}

@font-face { font-family: 'SCDream'; font-style: normal; font-weight: 100; src: url('../webfonts/SCDream/SCDream1.woff') format('woff'); } 
@font-face { font-family: 'SCDream'; font-style: normal; font-weight: 200; src: url('../webfonts/SCDream/SCDream2.woff') format('woff'); } 
@font-face { font-family: 'SCDream'; font-style: normal; font-weight: 300; src: url('../webfonts/SCDream/SCDream3.woff') format('woff'); } 
@font-face { font-family: 'SCDream'; font-style: normal; font-weight: 400; src: url('../webfonts/SCDream/SCDream4.woff') format('woff'); } 
@font-face { font-family: 'SCDream'; font-style: normal; font-weight: 500; src: url('../webfonts/SCDream/SCDream5.woff') format('woff'); } 
@font-face { font-family: 'SCDream'; font-style: normal; font-weight: 600; src: url('../webfonts/SCDream/SCDream6.woff') format('woff'); } 
@font-face { font-family: 'SCDream'; font-style: normal; font-weight: 700; src: url('../webfonts/SCDream/SCDream7.woff') format('woff'); } 
@font-face { font-family: 'SCDream'; font-style: normal; font-weight: 800; src: url('../webfonts/SCDream/SCDream8.woff') format('woff'); } 
@font-face { font-family: 'SCDream'; font-style: normal; font-weight: 900; src: url('../webfonts/SCDream/SCDream9.woff') format('woff'); }


/* 폰트 세팅 */
:root {
    --font-basic: 'Pretendard Variable';
    --font-weight-light: 100;
    --font-weight-regular: 300;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 800;
    --font-weight-heavy: 900;

    --font-point: 'SCDream';

    --font-size-2xs: 10px;
    --font-size-xs: 12px;
    --font-size-sm: 13px;
    --font-size-md: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 20px;
}


/* 기본 컬러 */
html {
    --input-placeholder-color: #99a1af;
    --color-background: #F5F5F8;
    --color-background-rgb: 245,245,248;

    --color-basic: #191A1C;
    --color-basic-rgb: 25,26,28;
    --color-basic-hover: #0a0a0a;
    --color-basic-hover-rgb: 10,10,10;
    --color-basic-reverse: #FFF;
    --color-basic-reverse-rgb: 255,255,255;
    --color-gray: #686C7A;
    --color-gray-rgb: 104,108,122;
    --color-gray-hover: #424655;
    --color-gray-hover-rgb: 66,70,85;
    --color-gray-deep: #45474e;
    --color-gray-deep-rgb: 69,71,78;
    --color-gray-deep-hover: #292b32;
    --color-gray-deep-hover-rgb: 41,43,50;
    --color-gray-light: #99a1af;
    --color-gray-light-rgb: 106,114,130;

    --color-point: #003EA1;
    --color-point-rgb: 0,62,161;
    --color-point-hover: #043584;
    --color-point-hover-rgb: 0,62,161;
    --color-red: #D95151;
    --color-red-rgb: 217,81,81;
    --color-red-hover: #bb3232;
    --color-red-hover-rgb: 187,50,50;
    --color-blue: #007AFF;
    --color-blue-rgb: 0,122,255;
    --color-blue-hover: #0563c6;
    --color-blue-hover-rgb: 5,99,198;
    --color-yellow: #ECAE1A;
    --color-yellow-rgb: 236,174,26;
    --color-yellow-hover: #ce950f;
    --color-yellow-hover-rgb: 206,149,15;
    --color-green: #23A566;
    --color-green-rgb: 35,165,102;
    --color-green-hover: #1b9359;
    --color-green-hover-rgb: 27,147,89;
    --color-teal: #00838F;
    --color-teal-rgb: 0,131,143;

    --color-line-basic: #E5E5EC;
    --color-line-basic-rgb: 229,229,236;
    --color-line-light: #f6f3f4;
    --color-line-light-rgb: 246,243,244;
    --color-box-basic: #FFF;
    --color-box-basic-rgb: 255,255,255;
    --color-bg-gray: #d7d9e0;

    --state-orange: #EC7003;
    --state-lightgreen: #B6CD4F;
    --state-green: #579F53;
    --state-red: #D95151;
    --state-purple: #BB9CCF;
}


/* ============================================================================
   Dark Mode  [PROJECT.md §15.49.2]

   설계 원칙 — 라이트 테마를 뒤집는 게 아니라 "같은 관계"를 어두운 쪽에서 재현한다.

   1) 면(surface)의 서열을 그대로 유지한다.
      라이트: 페이지(#F5F5F8) < 카드(#FFF)  — 카드가 페이지보다 "밝다"
      다크  : 페이지(#16181D) < 카드(#212429) — 카드가 페이지보다 "밝다" (뒤집지 않는다)
      input 채움색은 라이트와 마찬가지로 --color-background 하나를 공유하므로,
      "흰 카드 위의 회색 input"이 "어두운 카드 위의 더 어두운 input"으로 그대로 대응된다(§15.47).
   2) 뉴트럴 램프는 이 앱 고유의 푸른 기(#F5F5F8 / #E5E5EC / #191A1C 전부 B 채널이 R,G보다 높다)를
      유지한다. 순수 회색(#222 등)을 쓰지 않는다.
   3) 본문 글자는 순백이 아니라 #E6E9EF(약 91% 화이트, 같은 푸른 기).
   4) 시맨틱 색(point/red/blue/yellow/green)은 색상(hue)을 유지한 채 명도만 올린다.
      네온으로 튀지 않게 채도는 오히려 살짝 낮춘다.
   5) "밝을수록 강조"인 라이트 모드의 방향은 다크에서 반대가 된다 —
      *-hover / *-deep 처럼 라이트에서 '더 어두워서 더 강조'였던 토큰은 다크에서 '더 밝게' 뒤집는다.
      반대로 --color-gray-light / --color-line-light 처럼 '더 밝아서 더 약함'이었던 토큰은
      다크에서 '더 어둡게' 간다. (밝기 값이 아니라 강조 서열을 이식한다.)

   --color-white 재정의에 대해: 이 저장소의 CSS 전수 조사 결과 --color-white 는
   **단 한 번도 배경/테두리로 쓰이지 않고 오직 `color:`(그리고 --fa-*-color)로만** 쓰인다 —
   즉 실질적으로 "채워진 버튼/뱃지 위의 글자색" 토큰이다. 다크 모드에서는 채움색들이 밝아지므로
   그 위의 글자는 어두워야 한다(Material 3 의 on-primary 와 같은 처리). 그래서 토큰 하나만 바꿔
   .btns-point/.btns-red/.bg-yellow/조직도 활성항목 등 40여 곳을 일괄 처리한다.
   ============================================================================ */
html.theme-dark {
    --input-placeholder-color: #757C8C;

    /* 면(surface) — 어두운 쪽부터 */
    --color-background: #16181D;            /* 페이지 배경 + input 채움색 */
    --color-background-rgb: 22,24,29;
    --color-box-basic: #212429;             /* 카드 (페이지보다 밝다 = 라이트와 같은 방향) */
    --color-box-basic-rgb: 33,36,41;
    --color-bg-gray: #2C3038;               /* 드롭다운/패널 등 한 단계 더 떠 있는 면 */

    /* 선(line) */
    --color-line-basic: #343841;
    --color-line-basic-rgb: 52,56,65;
    --color-line-light: #2A2E35;            /* 라이트에서 더 흐린 선이었으므로 다크에선 더 어둡게 */
    --color-line-light-rgb: 42,46,53;

    /* 잉크(ink) */
    --color-basic: #E6E9EF;                 /* 본문 — 순백(#FFF) 아님 */
    --color-basic-rgb: 230,233,239;
    --color-basic-hover: #F7F9FC;           /* 라이트에선 더 어두운 강조 → 다크에선 더 밝은 강조 */
    --color-basic-hover-rgb: 247,249,252;
    --color-basic-reverse: #16181D;         /* 잉크의 반대(=면) */
    --color-basic-reverse-rgb: 22,24,29;

    --color-gray: #9AA1B1;                  /* 보조 텍스트 (카드 대비 6.1:1) */
    --color-gray-rgb: 154,161,177;
    --color-gray-hover: #C2C8D4;
    --color-gray-hover-rgb: 194,200,212;
    --color-gray-deep: #C6CBD5;             /* 라이트에서 gray 보다 진했으므로 다크에선 더 밝게 */
    --color-gray-deep-rgb: 198,203,213;
    --color-gray-deep-hover: #DEE2E9;
    --color-gray-deep-hover-rgb: 222,226,233;
    --color-gray-light: #757C8C;            /* 라이트에서 gray 보다 흐렸으므로 다크에선 더 어둡게 */
    --color-gray-light-rgb: 117,124,140;

    /* 채워진 버튼/뱃지 위의 글자색 (위 주석 참고) */
    --color-white: #16181D;
    --color-white-rgb: 22,24,29;

    /* 시맨틱 — hue 유지, 명도 상승 */
    --color-point: #4D8DF0;
    --color-point-rgb: 77,141,240;
    --color-point-hover: #6FA5F5;
    --color-point-hover-rgb: 111,165,245;
    --color-red: #F07171;
    --color-red-rgb: 240,113,113;
    --color-red-hover: #F58C8C;
    --color-red-hover-rgb: 245,140,140;
    --color-blue: #4DA3FF;
    --color-blue-rgb: 77,163,255;
    --color-blue-hover: #7BBBFF;
    --color-blue-hover-rgb: 123,187,255;
    --color-yellow: #EDB93F;
    --color-yellow-rgb: 237,185,63;
    --color-yellow-hover: #F3CB6B;
    --color-yellow-hover-rgb: 243,203,107;
    --color-green: #3FBF7F;
    --color-green-rgb: 63,191,127;
    --color-green-hover: #5FD199;
    --color-green-hover-rgb: 95,209,153;
    --color-teal: #3FB8C4;
    --color-teal-rgb: 63,184,196;

    /* 일정 상태칩(캘린더) — 어두운 배경에서 읽히도록 명도만 올림 */
    --state-orange: #F08A34;
    --state-lightgreen: #C3D96A;
    --state-green: #6DB869;
    --state-red: #F07171;
    --state-purple: #C6ACD8;

    /* 라인형 버튼 hover 채움 — basic-setting.css 의 tailwind 50 계열이 그대로 쓰이면
       다크에서 흰 판이 되므로, 같은 hue 의 어두운 틴트로 교체한다. */
    --color-blue-50: #1B2434;
    --color-red-50: #33201F;
    --color-green-50: #17301F;
    --color-gray-50: #262A31;
}


/* ---- Dark Mode // 토큰 하나로 못 푸는 예외 처리 ------------------------------
   아래는 "한 토큰이 라이트에서 잉크와 면 두 역할을 겸하던" 자리들이다.
   토큰은 다수 역할(잉크)에 맞춰 뒤집었으므로, 소수 역할(면)은 여기서 개별 보정한다. */

/* .btns-basic 계열: 채움색이 --color-basic(=이제 밝은 잉크색) 이라 자동으로
   "밝은 버튼"이 된다. 글자색만 어둡게 하면 라이트의 "어두운 버튼 + 흰 글자"의 정확한 거울이 된다.
   (--color-white 재정의로 이미 처리되지만, !important 우선순위 충돌을 피해 명시해 둔다.) */
html.theme-dark .btns-basic,
html.theme-dark .btns-basic:hover,
html.theme-dark .btns-basic-hover:hover {
    color: var(--color-basic-reverse) !important;
}

/* 문서 뷰어 "매트"(§15.47.3): common.css 의
   @media(min-width:767px){ .input-write-form.view-ver { background-color: var(--color-basic) } }
   는 "본문 잉크색을 배경으로 쓰는" 자리다. 다크에서 --color-basic 이 밝아지면 흰 판이 되어버리므로
   페이지 배경색으로 되돌린다(그 위의 흰 시트 .input-form-list 는 --color-box-basic 이라 자동 처리). */
@media screen and (min-width: 767px) {
    html.theme-dark .input-write-form.view-ver {
        background-color: var(--color-background);
    }
}

/* .gw-alert 변형들만 이 파일에서 유일하게 토큰이 아닌 고정 hex(부트스트랩 계열 파스텔)를 쓴다.
   다크에서 그대로 두면 어두운 화면 한가운데 밝은 판이 뜬다 → 같은 hue 의 어두운 톤으로 교체. */
html.theme-dark .gw-alert.alert-primary         { border-color: #2b4a7d; background-color: #172740; color: #b6d0f7; }
html.theme-dark .gw-alert.alert-secondary       { border-color: #3d424a; background-color: #23262b; color: #c5cad2; }
html.theme-dark .gw-alert.alert-success         { border-color: #2c5c44; background-color: #16301f; color: #a5e0be; }
html.theme-dark .gw-alert.alert-danger          { border-color: #6e3238; background-color: #331d20; color: #f3aeb4; }
html.theme-dark .gw-alert.alert-warning         { border-color: #6b5a1c; background-color: #2e2812; color: #f0d68a; }
html.theme-dark .gw-alert.alert-info            { border-color: #24555f; background-color: #12292e; color: #a2dbe6; }
html.theme-dark .gw-alert.alert-light           { border-color: #3d424a; background-color: #23262b; color: #c5cad2; }

/* 조직도 드래그 보조 표시(common.css ≈3235) — 이 파일 밖에 남은 유일한 고정 hex 배경 */
html.theme-dark .organization-list .ui-sortable-placeholder { background: #1d3a3f !important; border-color: #2f6f78 !important; }
html.theme-dark .organization-list .ui-sortable-helper      { background: #3a2f1d !important; }

/* Blade 뷰에 인라인 style 로 박혀 있는 밝은 배경(정리 대상이지만 마크업 대량 수정은 이번 범위 밖 —
   §15.49.5 참고). 저작자 !important 는 인라인 선언을 이기므로 CSS 만으로 덮을 수 있다. */
html.theme-dark [style*="background:#f8f8f8"],
html.theme-dark [style*="background: #f8f8f8"],
html.theme-dark [style*="background:#fafafa"],
html.theme-dark [style*="background: #fafafa"],
html.theme-dark [style*="background:#f6f6f6"],
html.theme-dark [style*="background: #f6f6f6"],
html.theme-dark [style*="background:#f2f2f2"],
html.theme-dark [style*="background:#eef5ff"],
html.theme-dark [style*="background:#eef;"],
html.theme-dark [style*="background:#fff;"],
html.theme-dark [style*="background:#fff "] {
    background-color: var(--color-bg-gray) !important;
}

html.theme-dark [style*="#ddd"],
html.theme-dark [style*="#eee"],
html.theme-dark [style*="#e5e5e5"],
html.theme-dark [style*="#ccc"] {
    border-color: var(--color-line-basic) !important;
}

/* 브라우저 기본 UI(스크롤바, date/time picker 아이콘 등)도 다크로 맞춘다. */
html.theme-dark {
    color-scheme: dark;
}


/* 텍스트 사이즈 */
.text-size-2xs              { font-size: var(--font-size-2xs) !important; }
.text-size-xs               { font-size: var(--font-size-xs) !important; }
.text-size-sm               { font-size: var(--font-size-sm) !important; }
.text-size-md               { font-size: var(--font-size-md) !important; }
.text-size-lg               { font-size: var(--font-size-lg) !important; }
.text-size-xl               { font-size: var(--font-size-xl) !important; }
.text-size-2xl              { font-size: var(--font-size-2xl) !important; }


/* Color // Basic */
.color-basic, .hover-color-basic:hover                          { color: var(--color-basic) !important; }
.color-white, .hover-color-white:hover                          { color: var(--color-white) !important; }
.color-black, .hover-color-black:hover                          { color: var(--color-black) !important; }
.color-point, .hover-color-point:hover                          { color: var(--color-point) !important; }
.color-gray, .hover-color-gray:hover                            { color: var(--color-gray) !important; }
.color-gray-light, .hover-color-gray-light:hover                { color: var(--color-gray-light) !important; }
.color-gray-deep, .hover-color-gray-deep:hover                  { color: var(--color-gray-deep) !important; }
.color-red, .hover-color-red:hover                              { color: var(--color-red) !important; }
.color-green, .hover-color-green:hover                          { color: var(--color-green) !important; }
.color-teal, .hover-color-teal:hover                             { color: var(--color-teal) !important; }
.color-blue, .hover-color-blue:hover                            { color: var(--color-blue) !important; }
.color-yellow, .hover-color-yellow:hover                        { color: var(--color-yellow) !important; }
.color-pink, .hover-color-yellow:hover                          { color: var(--color-pink) !important; }


/* color // Background */
.bg-transparent                                                 { background-color: transparent !important; }
.bg-basic                                                       { background-color: var(--color-box-basic) !important; }
.bg-point                                                       { background-color: var(--color-point) !important; }
.bg-gray                                                        { background-color: var(--color-gray) !important; }
.bg-red                                                         { background-color: var(--color-red) !important; }
.bg-green                                                       { background-color: var(--color-green) !important; }
.bg-blue                                                        { background-color: var(--color-blue) !important; }
.bg-yellow                                                      { background-color: var(--color-yellow) !important; }
.bg-brown                                                       { background-color: var(--color-brown) !important; }


/* Color // Button */
[class*="btns"]                             { padding: 10px; border-color: var(--color-line-basic); background-color: var(--color-box-basic); font-size: clamp(0.875rem, 2vw, 1rem); color: var(--color-gray); transition: .2s; }
[class*="btns"].size-mini                   { padding: 2px 6px; font-size: var(--size-12); }
[class*="btns"].size-sm                     { padding: 5px 10px; font-size: var(--size-13); }
[class*="btns"].size-md                     { padding: 7px 15px; font-size: var(--size-16); }
[class*="btns"].size-lg                     { padding: 10px 20px; font-size: var(--size-18); }
[class*="btns"].size-xl                     { padding: 12px 25px; font-size: var(--size-20); }
[class*="btns"].flex                        { display: flex !important; }
[class*="btns"]:hover                       { border-color: var(--color-gray-light); color: var(--color-basic); }

.btns-point                                 { border-color: var(--color-point); background-color: var(--color-point); color: var(--color-white) !important; }
.btns-point-hover:hover                     { border-color: var(--color-point-hover) !important; background-color: var(--color-point-hover) !important; color: var(--color-white) !important; }
.btns-point:hover                           { border-color: var(--color-point-hover); background-color: var(--color-point-hover); color: var(--color-white); }

.btns-point-line                            { border-color: var(--color-point); background-color: var(--color-box-basic); color: var(--color-point); }
.btns-point-line-hover:hover                { border-color: var(--color-point-hover) !important; background-color: var(--color-blue-50) !important; color: var(--color-point-hover) !important; }
.btns-point-line:hover                      { border-color: var(--color-point-hover); background-color: var(--color-blue-50); color: var(--color-point-hover); }

.btns-base                                  { border-color: rgba(var(--color-point-rgb),0.1); background-color: rgba(var(--color-point-rgb),0.1); }
.btns-base-hover:hover                      { border-color: var(--color-point-hover) !important; background-color: var(--color-point-hover) !important; color: var(--color-white) !important; }
.btns-base:hover                            { border-color: rgba(var(--color-point-rgb),0.2); background-color: rgba(var(--color-point-rgb),0.2); color: var(--color-basic); }

.btns-basic                                 { border-color: var(--color-basic); background-color: var(--color-basic); color: var(--color-white) !important; }
.btns-basic-hover:hover                     { border-color: var(--color-basic-hover) !important; background-color: var(--color-basic-hover) !important; color: var(--color-white) !important; }
.btns-basic:hover                           { border-color: var(--color-basic-hover); background-color: var(--color-basic-hover); color: var(--color-white); }

.btns-gray                                  { border-color: var(--color-gray); background-color: var(--color-gray); color: var(--color-white) !important; }
.btns-gray-hover:hover                      { border-color: var(--color-gray-hover) !important; background-color: var(--color-gray-hover) !important; color: var(--color-white) !important; }
.btns-gray:hover                            { border-color: var(--color-gray-hover); background-color: var(--color-gray-hover); color: var(--color-white); }

.btns-gray-line                             { border-color: var(--color-gray); background-color: var(--color-box-basic); color: var(--color-gray); }
.btns-gray-line-hover:hover                 { border-color: var(--color-gray-hover) !important; background-color: var(--color-red-50) !important; color: var(--color-gray-hover) !important; }
.btns-gray-line:hover                       { border-color: var(--color-gray-hover); background-color: var(--color-gray-50); color: var(--color-gray-hover); }

.btns-gray-deep                             { border-color: var(--color-gray-deep); background-color: var(--color-gray-deep); color: var(--color-white) !important; }
.btns-gray-deep-hover:hover                 { border-color: var(--color-gray-deep-hover) !important; background-color: var(--color-gray-deep-hover) !important; color: var(--color-white) !important; }
.btns-gray-deep:hover                       { border-color: var(--color-gray-deep-hover); background-color: var(--color-gray-deep-hover); color: var(--color-white); }

.btns-red                                   { border-color: var(--color-red); background-color: var(--color-red); color: var(--color-white) !important; }
.btns-red-hover:hover                       { border-color: var(--color-red-hover) !important; background-color: var(--color-red-hover) !important; color: var(--color-white) !important; }
.btns-red:hover                             { border-color: var(--color-red-hover); background-color: var(--color-red-hover); }

.btns-red-line                              { border-color: var(--color-red); background-color: var(--color-box-basic); color: var(--color-red); }
.btns-red-line-hover:hover                  { border-color: var(--color-red-hover) !important; background-color: var(--color-red-50) !important; color: var(--color-red-hover) !important; }
.btns-red-line:hover                        { border-color: var(--color-red-hover); background-color: var(--color-red-50); color: var(--color-red-hover); }

.btns-blue                                  { border-color: var(--color-blue); background-color: var(--color-blue); color: var(--color-white) !important; }
.btns-blue-hover:hover                      { border-color: var(--color-blue-hover) !important; background-color: var(--color-blue-hover) !important; color: var(--color-white) !important; }
.btns-blue:hover                            { border-color: var(--color-blue-hover); background-color: var(--color-blue-hover); }

.btns-blue-line                             { border-color: var(--color-blue); background-color: var(--color-box-basic); color: var(--color-blue); }
.btns-blue-line-hover:hover                 { border-color: var(--color-blue-hover) !important; background-color: var(--color-blue-50) !important; color: var(--color-blue-hover) !important; }
.btns-blue-line:hover                       { border-color: var(--color-blue-hover); background-color: var(--color-blue-50); color: var(--color-blue-hover); }

.btns-green                                  { border-color: var(--color-green); background-color: var(--color-green); color: var(--color-white) !important; }
.btns-green-hover:hover                      { border-color: var(--color-green-hover) !important; background-color: var(--color-green-hover) !important; color: var(--color-white) !important; }
.btns-green:hover                            { border-color: var(--color-green-hover); background-color: var(--color-green-hover); }

.btns-green-line                             { border-color: var(--color-green); background-color: var(--color-box-basic); color: var(--color-green); }
.btns-green-line-hover:hover                 { border-color: var(--color-green-hover) !important; background-color: var(--color-green-50) !important; color: var(--color-blue-hover) !important; }
.btns-green-line:hover                       { border-color: var(--color-green-hover); background-color: var(--color-green-50); color: var(--color-green-hover); }

@media screen and (min-width: 768px) {
    [class*="btns"].md\:size-sm             { padding: var(--size-3) var(--size-5); font-size: var(--size-14); }
    [class*="btns"].md\:size-md             { padding: var(--size-7) var(--size-15); font-size: var(--size-16); }
    [class*="btns"].md\:size-lg             { padding: var(--size-10) var(--size-20); font-size: var(--size-18); }
    [class*="btns"].md\:size-xl             { padding: var(--size-12) var(--size-25); font-size: var(--size-20); }
    [class*="btns"].md\:flex                { display: flex !important; }
}

@media screen and (min-width: 1024px) {
    [class*="btns"].lg\:size-sm             { padding: var(--size-3) var(--size-5); font-size: var(--size-14); }
    [class*="btns"].lg\:size-md             { padding: var(--size-7) var(--size-15); font-size: var(--size-16); }
    [class*="btns"].lg\:size-lg             { padding: var(--size-10) var(--size-20); font-size: var(--size-18); }
    [class*="btns"].lg\:size-xl             { padding: var(--size-12) var(--size-25); font-size: var(--size-20); }
    [class*="btns"].lg\:flex                { display: flex !important; }
}

@media screen and (min-width: 1440px) {
    [class*="btns"].xl\:size-sm             { padding: var(--size-3) var(--size-5); font-size: var(--size-14); }
    [class*="btns"].xl\:size-md             { padding: var(--size-7) var(--size-15); font-size: var(--size-16); }
    [class*="btns"].xl\:size-lg             { padding: var(--size-10) var(--size-20); font-size: var(--size-18); }
    [class*="btns"].xl\:size-xl             { padding: var(--size-12) var(--size-25); font-size: var(--size-20); }
    [class*="btns"].xl\:flex                { display: flex !important; }
}


/* Div Table Setting */
.div-table                      { table-layout: auto; display: table; width: 100%; border-collapse: collapse; text-indent: initial; unicode-bidi: isolate; }
.div-table-fixed                { table-layout: fixed !important; }
.div-table .thead,
.div-table .tbody,
.div-table .tfoot               { display: table-header-group; }
.div-table .tr                  { display: table-row; border-color: inherit; }
.div-table .th,
.div-table .td                  { display: table-cell; vertical-align:middle; }

@media screen and (min-width: 767px) {
    .md\:div-table              { table-layout: auto; display: table; width: 100%; border-collapse: collapse; text-indent: initial; unicode-bidi: isolate; }
    .md\:div-table .thead,
    .md\:div-table .tbody,
    .md\:div-table .tfoot       { display: table-header-group; }
    .md\:div-table .tr          { display: table-row; border-color: inherit; }
    .md\:div-table .th,
    .md\:div-table .td          { display: table-cell; vertical-align:middle; }
}

@media screen and (min-width: 1024px) {
    .lg\:div-table              { table-layout: auto; display: table; width: 100%; border-collapse: collapse; text-indent: initial; unicode-bidi: isolate; }
    .lg\:div-table .thead,
    .lg\:div-table .tbody,
    .lg\:div-table .tfoot       { display: table-header-group; }
    .lg\:div-table .tr          { display: table-row; border-color: inherit; }
    .lg\:div-table .th,
    .lg\:div-table .td          { display: table-cell; vertical-align:middle; }
}

@media screen and (min-width: 1440px) {
    .xl\:div-table              { table-layout: auto; display: table; width: 100%; border-collapse: collapse; text-indent: initial; unicode-bidi: isolate; }
    .xl\:div-table .thead,
    .xl\:div-table .tbody,
    .xl\:div-table .tfoot       { display: table-header-group; }
    .xl\:div-table .tr          { display: table-row; border-color: inherit; }
    .xl\:div-table .th,
    .xl\:div-table .td          { display: table-cell; vertical-align:middle; }
}


/* Rounded */
.rounded-xs, .hover-rounded-xs:hover                { border-radius: 0.188rem } /* 3px */
.rounded-sm, .hover-rounded-sm:hover                { border-radius: 0.313rem } /* 5px */
.rounded-md, .hover-rounded-md:hover                { border-radius: 0.625rem } /* 10px */
.rounded-lg, .hover-rounded-lg:hover                { border-radius: 1rem } /* 20px */
.rounded-xl, .hover-rounded-xl:hover                { border-radius: 1.25rem } /* 30px */

@media screen and (min-width: 768px) {
    .md\:rounded-xs, .md\:hover-rounded-xs:hover    { border-radius: 0.188rem } /* 3px */
    .md\:rounded-sm, .md\:hover-rounded-sm:hover    { border-radius: 0.313rem } /* 5px */
    .md\:rounded-md, .md\:hover-rounded-md:hover    { border-radius: 0.625rem } /* 10px */
    .md\:rounded-lg, .md\:hover-rounded-lg:hover    { border-radius: 1rem } /* 20px */
    .md\:rounded-xl, .md\:hover-rounded-xl:hover    { border-radius: 1.25rem } /* 30px */
}

@media screen and (min-width: 1024px) {
    .lg\:rounded-xs, .lg\:hover-rounded-xs:hover    { border-radius: 0.188rem } /* 3px */
    .lg\:rounded-sm, .lg\:hover-rounded-sm:hover    { border-radius: 0.313rem } /* 5px */
    .lg\:rounded-md, .lg\:hover-rounded-md:hover    { border-radius: 0.625rem } /* 10px */
    .lg\:rounded-lg, .lg\:hover-rounded-lg:hover    { border-radius: 1rem } /* 20px */
    .lg\:rounded-xl, .lg\:hover-rounded-xl:hover    { border-radius: 1.25rem } /* 30px */
}

@media screen and (min-width: 1440px) {
    .xl\:rounded-xs, .xl\:hover-rounded-xs:hover    { border-radius: 0.188rem } /* 3px */
    .xl\:rounded-sm, .xl\:hover-rounded-sm:hover    { border-radius: 0.313rem } /* 5px */
    .xl\:rounded-md, .xl\:hover-rounded-md:hover    { border-radius: 0.625rem } /* 10px */
    .xl\:rounded-lg, .xl\:hover-rounded-lg:hover    { border-radius: 1rem } /* 20px */
    .xl\:rounded-xl, .xl\:hover-rounded-xl:hover    { border-radius: 1.25rem } /* 30px */
}


/* Shadow */
.shadow-sm, .hover-shadow-sm:hover                  { box-shadow: 0 5px 5px -5px rgba(var(--color-black-rgb),0.1); }
.shadow-md, .hover-shadow-md:hover                  { box-shadow: 0 10px 10px -8px rgba(var(--color-black-rgb),0.1); }
.shadow-lg, .hover-shadow-lg:hover                  { box-shadow: 0 15px 15px -10px rgba(var(--color-black-rgb),0.1); }
.shadow-xl, .hover-shadow-xl:hover                  { box-shadow: 0 20px 20px -20px rgba(var(--color-black-rgb),0.2); }
.inset-shadow-sm, .hover-inset-shadow-sm            { box-shadow: inset 2px 3px 5px rgba(var(--color-black-rgb),0.1); }

@media screen and (min-width: 768px) {
    .md\:shadow-sm, .md\:hover-shadow-sm:hover      { box-shadow: 0 5px 5px -5px rgba(0,0,0,0.1); }
    .md\:shadow-md, .md\:hover-shadow-md:hover      { box-shadow: 0 10px 10px -8px rgba(0,0,0,0.1); }
    .md\:shadow-lg, .md\:hover-shadow-lg:hover      { box-shadow: 0 15px 15px -10px rgba(0,0,0,0.1); }
    .md\:shadow-xl, .md\:hover-shadow-xl:hover      { box-shadow: 0 20px 20px -20px rgba(0,0,0,0.2); }
}

@media screen and (min-width: 1024px) {
    .lg\:shadow-sm, .lg\:hover-shadow-sm:hover      { box-shadow: 0 5px 5px -5px rgba(0,0,0,0.1); }
    .lg\:shadow-md, .lg\:hover-shadow-md:hover      { box-shadow: 0 10px 10px -8px rgba(0,0,0,0.1); }
    .lg\:shadow-lg, .lg\:hover-shadow-lg:hover      { box-shadow: 0 15px 15px -10px rgba(0,0,0,0.1); }
    .lg\:shadow-xl, .lg\:hover-shadow-xl:hover      { box-shadow: 0 20px 20px -20px rgba(0,0,0,0.2); }
}

@media screen and (min-width: 1440px) {
    .xl\:shadow-sm, .xl\:hover-shadow-sm:hover      { box-shadow: 0 5px 5px -5px rgba(0,0,0,0.1); }
    .xl\:shadow-md, .xl\:hover-shadow-md:hover      { box-shadow: 0 10px 10px -8px rgba(0,0,0,0.1); }
    .xl\:shadow-lg, .xl\:hover-shadow-lg:hover      { box-shadow: 0 15px 15px -10px rgba(0,0,0,0.1); }
    .xl\:shadow-xl, .xl\:hover-shadow-xl:hover      { box-shadow: 0 20px 20px -20px rgba(0,0,0,0.2); }
}


/* Transition */
.transition-1 { transition: 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); }
.transition-2 { transition: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }




/* Tooltip */
.custom-tooltip {
    position: absolute; /* 마우스 위치를 따라다니도록 absolute 설정 */
    top: 0;
    left: 0;
    visibility: hidden; /* 초기에는 숨김 */
    line-height: 1.4;
    padding: 8px 12px;
    background-color: var(--color-basic);
    color: var(--color-basic-reverse);
    border-radius: 4px;
    font-size: clamp(0.75rem, 3vw, 0.875rem);
    white-space: normal; /* 툴팁 내용이 줄바꿈 되지 않도록 함 */
    z-index: 9999;
    pointer-events: none; /* 툴팁 자체가 마우스 이벤트를 방해하지 않도록 함 */
    opacity: 0;
    transition: opacity 0.3s ease-out;

    max-width: 180px;
}

.custom-tooltip.active {
    visibility: visible;
    opacity: 1;
}

/* 툴팁이 적용될 요소는 position: relative;가 필요할 수 있습니다. */
.tooltip-trigger {
    position: relative;
    cursor: help;
}


/* Alerts */
.gw-alert {
    padding: 1rem;
    border: 1px solid var(--color-line-basic);
    background-color: var(--color-background);
    box-shadow: 0 5px 5px -3px rgba(var(--color-black-rgb),0.1);
    border-radius: 0.375rem;
    color: var(--color-gray);
}

.gw-alert.alert-primary         { border-color: #9ec5fe; background-color: #cfe2ff; color: #052c65; }
.gw-alert.alert-secondary       { border-color: #c4c8cb; background-color: #e2e3e5; color: #2b2f32; }
.gw-alert.alert-success         { border-color: #a3cfbb; background-color: #d1e7dd; color: #0a3622; }
.gw-alert.alert-danger          { border-color: #f1aeb5; background-color: #f8d7da; color: #58151c; }
.gw-alert.alert-warning         { border-color: #ffe96c; background-color: #fff3cd; color: #664d03; }
.gw-alert.alert-info            { border-color: #9eeaf9; background-color: #cff4fc; color: #055160; }
.gw-alert.alert-light           { border-color: #e9ecef; background-color: #fcfcfd; color: #495057; }


/* H Setting */
h1.h1-tit > em.tit { font-size: clamp(2.125rem, 2.5vw, 3rem); font-weight: var(--font-weight-bold); }
h2.h2-tit > em.tit { font-size: clamp(1.5rem, 2.5vw, 2.125rem); font-weight: var(--font-weight-bold); }
h3.h3-tit > em.tit { font-size: clamp(1.25rem, 2.5vw, 1.5rem); font-weight: var(--font-weight-bold); }
h4.h4-tit > em.tit { font-size: clamp(1rem, 2.5vw, 1.25rem); font-weight: var(--font-weight-semibold); }
h5.h5-tit > em.tit { font-size: clamp(0.875rem, 2.5vw, 1rem); font-weight: var(--font-weight-medium); }


/* Form Setting */
div.basic-input, input.basic-input, select.basic-select, textarea.basic-input,
div.line-input, input.line-input, select.line-select {
    position: relative;
    margin: 0;
    border: none;
    background-color: var(--color-background);
    border-radius: 5px;
    word-break: break-all;
    transition: .3s;
    font-size: inherit;
    /* 검색바처럼 flex 아이템으로 쓰일 때, flex 아이템은 기본 min-width:auto라 내용물(특히 select의
       가장 긴 option 텍스트) 크기 밑으로는 줄어들지 않는다 — flex-wrap만으로는 각 요소가 자기
       줄을 차지해도 그 줄 폭 자체보다 넓으면 여전히 페이지 전체가 가로 스크롤된다(실사용 Android
       WebView 기기에서 300px 폭 실측으로 발견 — 안드로이드 네이티브 select 렌더링이 데스크톱
       브라우저보다 폭을 더 넓게 잡는 것으로 추정, Chromium 데스크톱에서는 재현 안 됨). box-sizing
       없이는 이 min-width:0/max-width:100%도 padding 만큼 폭을 넘길 수 있어 함께 지정한다. */
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
}

/* 크롬/사파리 자동완성(비밀번호 관리자가 저장된 이메일/아이디를 채워 넣을 때)은
   `-webkit-autofill` 상태에 자체 배경색(연노랑/흰색)을 강제로 씌우고 일반 background-color를
   무시한다 — 다크 모드 로그인 화면에서 이메일을 채우면 입력칸만 하얗게 뜨는 원인. inset
   box-shadow로 배경을 덮어써야만 이길 수 있다(표준 우회법). transition을 아주 길게 줘서 브라우저가
   배경을 노란색으로 살짝 보였다가 바뀌는 깜빡임도 없앤다. */
input.basic-input:-webkit-autofill,
input.basic-input:-webkit-autofill:hover,
input.basic-input:-webkit-autofill:focus,
input.basic-input:-webkit-autofill:active,
input.line-input:-webkit-autofill,
input.line-input:-webkit-autofill:hover,
input.line-input:-webkit-autofill:focus,
input.line-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--color-background) inset;
    box-shadow: 0 0 0 1000px var(--color-background) inset;
    -webkit-text-fill-color: var(--color-basic);
    caret-color: var(--color-basic);
    transition: background-color 999999s ease-in-out 0s;
}

/* 2026-08-11 코디네이터 채팅 지시("textarea만 디자인이 다르니까 어색하내") — 위 공통 규칙은
   원래 div/input/select만 대상이라 textarea.basic-input엔 border:none/배경/radius/padding이 전혀
   적용되지 않고 있었다(§15.49.5 포커스 패치만 먼저 들어가 있었음, 아래 focus 규칙 참고). 기본
   폰트도 안 맞춰져 있어 font-family: inherit도 함께 준다(textarea는 브라우저 기본이 monospace). */
div.basic-input, input.basic-input, select.basic-select, textarea.basic-input {
    padding: 10px;
}

textarea.basic-input {
    font-family: inherit;
    resize: vertical;
}

/* 2026-08-12 채팅 지시("위 아래 x 나오는 화살표... 디자인좀 이쁘게 안되내") — <input type="number">의
   브라우저 기본 스피너(위/아래 화살표)를 없앤다. 이 앱 대부분의 금액 입력은 이미 type="text" +
   inputmode="numeric" + 콤마 표시(§21 정책)를 쓰지만, 그 정책 이전에 만들어졌거나 남아있는
   type="number" 필드(예: 외주지급 지급액/요청금액 등)에서 이 네이티브 크롬(브랜드 디자인 시스템과
   전혀 안 어울리는 회색 화살표 한 쌍)이 그대로 노출되고 있었다. 값 자체나 up/down 스텝 동작은
   그대로 유지하고 시각적 스피너만 숨긴다 — 값 증감은 여전히 키보드 위/아래 화살표로 가능. */
input.basic-input[type="number"]::-webkit-outer-spin-button,
input.basic-input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input.basic-input[type="number"] {
    -moz-appearance: textfield;
}

div.basic-input.like-text, input.basic-input.like-text, select.basic-select.like-text,
div.line-input.like-text, input.line-input.like-text, select.line-select.like-text {
    background-color: transparent;
}

div.line-input, input.line-input, select.line-select {
    padding: 10px 0;
    border: none;
    border-bottom: 1px solid var(--color-line-basic);
}

input.basic-input:focus,
input.line-input:focus,
select.basic-select:focus,
select.line-select:focus,
textarea.basic-input:focus {
    outline: none;
}

/* [PROJECT.md §15.49.1] :focus 시각 피드백.
   기존(=legacy 동일): border-color 만 바꿨는데 .basic-input 은 `border: none`(border-width 0)이라
   색만 바뀌고 화면에는 아무 변화가 없었다. box-shadow 링으로 교체 — border-width 를 올리는 방식과 달리
   레이아웃(높이/텍스트 위치)을 전혀 건드리지 않고, 이 디자인 시스템이 이미 쓰는 표현수단(box-shadow,
   --color-point 강조색, border-radius 5px)만 사용한다. */
input.basic-input:not(.readonly):focus,
select.basic-select:not(.readonly):focus,
textarea.basic-textarea:not(.readonly):focus,
textarea.basic-input:not(.readonly):focus,   /* 이 앱의 뷰는 textarea 에도 .basic-input 을 쓴다 — §15.49.5 */
input.line-input:not(.readonly):focus,
select.line-select:not(.readonly):focus,
div.basic-input:not(.readonly):focus-within,
div.line-input:not(.readonly):focus-within {
    border-color: var(--color-point);
    box-shadow: 0 0 0 2px rgba(var(--color-point-rgb),0.35);
}

/* 체크박스/라디오는 실제 input 이 display:none 이라 :focus 가 전혀 보이지 않았다 —
   키보드 이동(:focus-visible)일 때만 대체 표시(label > span)에 같은 링을 준다. */
input.basic-check:focus-visible + label > span,
input.basic-radio:focus-visible + label > span {
    border-color: var(--color-point);
    box-shadow: 0 0 0 2px rgba(var(--color-point-rgb),0.35);
}

select.line-select,
select.basic-select {
    padding-right: 26px;
    background: var(--color-background) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16' fill='black'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat;
    background-position: right 5px center;
    background-size: 20px;
}

.theme-dark select.line-select,
.theme-dark select.basic-select {
    background: var(--color-background) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16' fill='white'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat;
    background-position: right 5px center;
    background-size: 20px;
}

textarea.basic-textarea {
    position: relative;
    margin: 0;
    padding: 10px;
    border: none;
    background-color: var(--color-background);
    border-radius: 5px;
    font-size: inherit;
    transition: .3s;
}

textarea.basic-textarea:focus {
    outline: none;
}
/* 포커스 링은 위 [§15.49.1] 통합 규칙에서 .basic-textarea 까지 함께 처리한다. */

input.basic-check,
input.basic-radio {
    display: none;
}

input.basic-check + label,
input.basic-radio + label {
    --label-check-size: 22px;

    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--color-gray);
}

input.basic-check + label > span,
input.basic-radio + label > span {
    display: inline-block;
    width: var(--label-check-size);
    height: var(--label-check-size);
    line-height: calc(var(--label-check-size) - 2px);
    border: 1px solid var(--color-line-basic);
    background-color: var(--color-box-basic);
    text-align: center;
    border-radius: 4px;
    color: var(--color-line-basic);
    font-size: 0.813rem;
}

input.basic-radio + label > span {
    border-radius: 50%;
}

input.basic-check:checked + label > span,
input.basic-radio:checked + label > span {
    border-color: var(--color-point);
    background-color: var(--color-point);
    color: var(--color-white);
}

input.basic-check:checked + label,
input.basic-radio:checked + label {
    color: var(--color-basic);
}

input.basic-check.mini + label,
input.basic-radio.mini + label {
    --label-check-size: 18px;
    font-size: 0.875rem;
}

input.basic-check.mini + label > span,
input.basic-radio.mini + label > span {
    font-size: 0.75rem;
}


/* 동영상 임베드 */
.embed-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}

.embed-container iframe,
.embed-container object,
.embed-container embed,
.embed-container video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/* 스크롤 커스텀 // 세로 */
.scrollbox {
    overflow-x: hidden;
	overflow-y: auto;
	-ms-overflow-style: scrollbar;
}

.scrollbox::-webkit-scrollbar {
	width: 4px;
    height: 4px;
}

.scrollbox::-webkit-scrollbar-track {
	background-color: transparent;
}

.scrollbox::-webkit-scrollbar-thumb {
	border-radius: 2px;
	background-color: rgba(var(--color-basic-rgb),0.1);
    transition: .3s;
    cursor: pointer;
}

.scrollbox::-webkit-scrollbar-thumb:hover {
	background-color: var(--color-point);
}


/* 가로 스크롤 */
.width-scrollbox {
	overflow-x: auto;
    margin: 0 calc(var(--page-padding) * -1);
	-ms-overflow-style: scrollbar;
    /* flex/grid 아이템으로 쓰일 때(예: 통계 화면의 부서별/직급별/성별 표를 나란히 배치하는
       display:flex 행) 기본 min-width:auto 때문에 내부 테이블의 min-content 폭 밑으로 줄어들지
       못해, 정작 자기 자신의 overflow-x:auto 스크롤은 발동하지도 못한 채 부모 flex 컨테이너보다
       넓게 튀어나와 페이지 전체가 가로 스크롤되는 원인이 됐다(통계>인사 부서별 표에서 300px 폭
       실측으로 발견). min-width:0으로 강제로 줄어들 수 있게 해야 내부 스크롤이 실제로 동작한다. */
    min-width: 0;
}

.width-scrollbox .scroll-con {
	padding: 0 var(--page-padding) 10px;
}

.width-scrollbox.w480 .scroll-con {
	width: 480px;
}

.width-scrollbox.w640 .scroll-con {
	width: 600px;
}

.width-scrollbox.w768 .scroll-con {
	width: 800px;
}

.width-scrollbox.w980 .scroll-con {
	width: 1000px;
}

.width-scrollbox.w1240 .scroll-con {
	width: 1200px;
}

@media screen and (min-width: 479px) {
	.width-scrollbox.w480 {
		margin: 0 !important;
	}

	.width-scrollbox.w480 .scroll-con {
		width: 100%;
        padding: 0;
	}
}

@media screen and (min-width: 639px) {
	.width-scrollbox.w640 {
		margin: 0 !important;
	}

	.width-scrollbox.w640 .scroll-con {
		width: 100%;
        padding: 0;
	}
}

@media screen and (min-width: 767px) {
	.width-scrollbox.w768 {
		margin: 0 !important;
	}

	.width-scrollbox.w768 .scroll-con {
		width: 100%;
        padding: 0;
	}
}

@media screen and (min-width: 979px) {
	.width-scrollbox.w980 {
		margin: 0 !important;
	}

	.width-scrollbox.w980 .scroll-con {
		width: 100%;
        padding: 0;
	}
}

@media screen and (min-width: 1239px) {
	.width-scrollbox.w1240 {
		margin: 0 !important;
	}

	.width-scrollbox.w1240 .scroll-con {
		width: 100%;
        padding: 0;
	}
}