/* 일반설정 */
:root {
    --font-site: 'Roboto', sans-serif;

    --color-bg-primary: #4338ca;                    /* Primary BG <indigo-700> */
    --color-bg-text-primary: #ffffff;               /* Primary Text in Primary BG */
    --color-text-primary: #4338ca;                  /* Primary Text <indigo-700> */

    --color-bg-primary-c: #BFCA38;                    /* Primary BG Complementary Color */
    --color-bg-text-primary-c: #585b18;               /* Primary Text in Primary BG */
    --color-text-primary-c: #BFCA38;                  /* Primary Text Complementary Color */    

    --color-bg-secondary: #6366f1;                  /* Secondary BG <rose-600> */
    --color-bg-text-secondary: #ffffff;             /* Secondary Text in Secondary BG */
    --color-text-secondary: #6366f1;                /* Secondary Text <rose-600> */

    --color1-bg-secondary: #be185d;                  /* Secondary BG <rose-600> */
    --color1-bg-text-secondary: #ffffff;             /* Secondary Text in Secondary BG */
    --color1-text-secondary: #be185d;                /* Secondary Text <rose-600> */

    --color-bg-secondary-c: #ebe725;                  /* Secondary BG Complementary Color */
    --color-bg-text-secondary-c: #77750a;             /* Secondary Text in Secondary BG */
    --color-text-secondary-c: #ebe725;                /* Secondary Text Complementary Color */

    --width-container: 1600px;                        /* 사이트 너비 */

    --color-menu-background: #4338ca;               /* 상단메뉴 배경색 <indigo-700> */
    --color-menu-foreground: #ffffff;               /* 상단메뉴 글자색 */
    --color-menu-hover-background: #3730a3;         /* 상단메뉴 배경색 (마우스오버) <indigo-800> */
    --color-menu-hover-foreground: #fde047;         /* 상단메뉴 글자색 (마우스오버) <yello-300> */
  
    --color-submenu-background: #ffffff;            /* 상단 서브메뉴 배경색 */
    --color-submenu-foreground: #27272a;            /* 상단 서브메뉴 글자색 <zinc-800> */
    --color-submenu-hover-background: #818cf8;      /* 상단 서브메뉴 배경색 (마우스오버) <indigo-400> */
    --color-submenu-hover-foreground: #ffffff;      /* 상단 서브메뉴 글자색 (마우스오버) <zinc-900> */

    --color-sidebar-background: #ffffff;            /* 사이드바 배경색 */
    --color-sidebar-foreground: #27272a;            /* 사이드바 글자색 <zinc-800> */        

    --color-sidebar-active-background: #ffffff;     /* 사이드바 활성메뉴 배경색 */
    --color-sidebar-active-foreground: #4338ca;     /* 사이드바 활성메뉴 글자색 <indigo-700> */    
  
    --color-background: #ffffff;                    /* body 배경색 */
    --color-foreground: #52525b;                    /* body 글자색 <zinc-600> */

    --color-divider: #d4d4d4;                       /* 구분선 색 <zinc-300> */

    --color-input-background: #ffffff;              /* 입력폼 배경색 */    
    --color-input-foreground: #111827;              /* 입력폼 글자색 <gray-900> */

    --header-height:4.5rem;                           /* 헤더 높이 */
}


/* 다크모드 설정 */
.dark {
    --color-bg-primary: #312e81;                    /* Primary BG <indigo-900> */
    --color-bg-text-primary: #ffffff;               /* Primary Text in Primary BG */
    --color-text-primary: #312e81;                  /* Primary Text <indigo-900> */
 
    --color-bg-primary-c: #BFCA38;                    /* Primary BG Complementary Color */
    --color-bg-text-primary-c: #585b18;               /* Primary Text in Primary BG */
    --color-text-primary-c: #BFCA38;                  /* Primary Text Complementary Color */   

    --color-bg-secondary: #4338ca;                  /* Secondary BG <indigo-700> */
    --color-bg-text-secondary: #ffffff;             /* Secondary Text in Secondary BG */
    --color-text-secondary: #4338ca;                /* Secondary Text <indigo-700> */    

    --color-bg-secondary-c: #BFCA38;                  /* Secondary BG Complementary Color */
    --color-bg-text-secondary-c: #434812;             /* Secondary Text in Secondary BG */
    --color-text-secondary-c: #BFCA38;                /* Secondary Text Complementary Color */    

    --color-menu-background: #312e81;               /* 상단메뉴 배경색 <stone-800> */
    --color-menu-foreground: #ffffff;               /* 상단메뉴 글자색 */
    --color-menu-hover-background: #1e1b4b;         /* 상단메뉴 배경색 (마우스오버) <stone-900> */
    --color-menu-hover-foreground: #fde047;         /* 상단메뉴 글자색 (마우스오버) <yellow-300> */

    --color-submenu-background: #222831;            /* 상단 서브메뉴 배경색 <stone-900> */
    --color-submenu-foreground: #ffffff;            /* 상단 서브메뉴 글자색 */
    --color-submenu-hover-background: #384250;      /* 상단 서브메뉴 배경색 (마우스오버) <stone-800> */
    --color-submenu-hover-foreground: #ffffff;      /* 상단 서브메뉴 글자색 (마우스오버) <stone-500> */

    --color-sidebar-background: #222831;            /* 사이드바 배경색 <stone-800> */
    --color-sidebar-foreground: #CED4DA;            /* 사이드바 글자색 */    

    --color-sidebar-active-background: #384250;     /* 사이드바 활성메뉴 배경색 <stone-700> */
    --color-sidebar-active-foreground: #fff;     /* 사이드바 활성메뉴 글자색 <indigo-400> */ 
    
    --color-background: #1C1B22;                    /* body 배경색 */             
    --color-foreground: #E4E4E7;                    /* body 글자색 */

    --color-divider: #535e68;                       /* 구분선 색 */

    --color-input-background: #111827;              /* 입력폼 배경색 <gray-900> */
    --color-input-foreground: #d1d5db;              /* 입력폼 글자색 <gray-300> */
}


.container { max-width:var(--width-container); margin:0 auto; padding:0; }

@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');

body {
    font-family:var(--font-site);
    font-size:14.5px;
    font-weight:400;
    line-height: 1.8;
    background-color: var(--color-background);
    color: var(--color-foreground);
    min-height:100vh;
}

textarea,
input[type=text],
input[type=email],
input[type=password],
input[type=number] {
    color:var(--color-input-foreground);
    background-color:var(--color-input-background);
}

/* 상단 (헤더) */
#l-header {
  background-color: var(--color-menu-background);
  color:var(--color-menu-foreground);
  height:var(--header-height);
}

#l-header .menu-panel,
#l-header #profile-menu,
#l-header .menu-panel a {
    background-color: var(--color-submenu-background);
    color:var(--color-submenu-foreground);
}

#l-header #profile-menu a:hover,
#l-header .menu-panel a:hover {
    background-color: var(--color-submenu-hover-background);
    color:var(--color-submenu-hover-foreground);
}


#l-header button:hover, 
#l-header a:hover {    
    color:var(--color-menu-hover-foreground);    
}

#l-header #navbar-dropdown > ul > li:hover {
    background-color: var(--color-menu-hover-background);
}

/* 상단 넓은 화면에서 프로필 아이콘 클릭했을 경우 보이는 레이어 */
#l-header #profile-menu { width:250px; max-width:100%; top:70px; right:50px; z-index:10; background-color:#fff; }
.dark #l-header #profile-menu { background-color: var(--color-submenu-background); }

/* 상단 검색 (모달검색) */
#main-search { display:none;}
#main-search .ms-backdrop { position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,.7); z-index:999; }
#main-search .ms-content .ms-form { position:absolute; top:10%; left:50%; transform:translate(-50%, -10%); width:100%; max-width:500px; margin:0 auto;z-index:1000;}

/* 사이드바 */
#main-side-menu { display:none;  }
#main-side-menu #msm-layer { transform: translateX(100%); transition: 2s ease;  max-width: 270px; width: 100%; height: 100%; background-color:var(--color-sidebar-background); color:var(--color-sidebar-foreground);}
#main-side-menu.active { display:block; }
#main-side-menu.active #msm-layer { transform: translateX(0); }
#msm-layer .active { font-weight:bold; }
#msm-layer > div > ul li a.active { background-color:var(--color-sidebar-active-background);  color:var(--color-sidebar-active-foreground);}

/* 가로 구분 줄 */
.divider { height:1px; border-top:1px solid var(--color-divider)}

/* 닉네임클릭시 나오는 사이드뷰 */
.sv_wrap { }
.sv_member { position:relative; padding-left:25px; color:var(--color-foreground); }
.sv_member .profile_img { position:absolute; margin-left:-25px; }

/* 캡챠 */
#captcha { display: flex; flex-wrap: wrap; position: relative; gap: 5px; }
#captcha #captcha_key { margin:0; }
#captcha #captcha_info { display:flex; align-items: center; }

/* 툴팁 */
.tooltip_icon {display:inline-block;vertical-align:baseline;color:#b3b5b8;border:0;font-size:1;background:transparent;cursor:pointer}
.tooltip_icon:hover {color:#448bf5}
.tooltip {position:absolute;width:auto;color:var(--color-background);background:var(--color-foreground);padding:10px;font-size:small;line-height:18px;display:none;z-index:9;font-weight:normal;margin-left:15px;margin-top:10px;border-top-right-radius: 8px;border-bottom-right-radius: 8px; border-bottom-left-radius: 8px;}
.tooltip:before {content:"";position:absolute;top:0;left:-10px;width:0;height:0;border-style:solid;border-top:0px solid transparent;border-bottom:10px solid transparent;border-left:0;border-right:10px solid var(--color-foreground);}

.tw-menu-color {
    background-color:var(--color-menu-background);
    color:var(--color-menu-foreground);
}

.bg-primary {
    background-color:var(--color-bg-primary);
    color:var(--color-bg-text-primary);
}

.bg-primary-c {
    background-color:var(--color-bg-primary-c);
    color:var(--color-bg-text-primary-c);
}

.text-primary {
    color:var(--color-text-primary);
}

.text-primary-c {
    color:var(--color-text-primary);
}

.bg-secondary {
    background-color:var(--color-bg-secondary);
    color:var(--color-bg-text-secondary);
}

.bg-secondary-c {
    background-color:var(--color-bg-secondary-c);
    color:var(--color-bg-text-secondary-c);
}

.text-secondary {
    color:var(--color-text-secondary);
}

.text-secondary-c {
    color:var(--color-text-secondary-c);
}

/* qleditor style */
.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6,.ql-editor ol,.ql-editor p,.ql-editor pre,.ql-editor ul{margin:0;padding:0;counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol,.ql-editor ol li:not(.ql-direction-rtl),.ql-editor ul,.ql-editor ul li:not(.ql-direction-rtl){padding-left:1.5em}.ql-editor ol>li,.ql-editor ul>li{list-style-type:none}.ql-editor ul>li::before{content:'\2022'}.ql-editor ul[data-checked=false],.ql-editor ul[data-checked=true]{pointer-events:none}.ql-editor ul[data-checked=false]>li *,.ql-editor ul[data-checked=true]>li *{pointer-events:all}.ql-editor ul[data-checked=false]>li::before,.ql-editor ul[data-checked=true]>li::before{color:#777;cursor:pointer;pointer-events:all}.ql-editor ul[data-checked=true]>li::before{content:'\2611'}.ql-editor ul[data-checked=false]>li::before{content:'\2610'}.ql-editor li::before{display:inline-block;white-space:nowrap;width:1.2em}.ql-editor li:not(.ql-direction-rtl)::before{margin-left:-1.5em;margin-right:.3em;text-align:right}.ql-editor li.ql-direction-rtl::before{margin-left:.3em;margin-right:-1.5em}.ql-editor ol li.ql-direction-rtl,.ql-editor ul li.ql-direction-rtl{padding-right:1.5em}.ql-editor ol li{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;counter-increment:list-0}.ql-editor ol li:before{content:counter(list-0,decimal) '. '}.ql-editor ol li.ql-indent-1{counter-increment:list-1;counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-1:before{content:counter(list-1,lower-alpha) '. '}.ql-editor ol li.ql-indent-2{counter-increment:list-2;counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-2:before{content:counter(list-2,lower-roman) '. '}.ql-editor ol li.ql-indent-3{counter-increment:list-3;counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-3:before{content:counter(list-3,decimal) '. '}.ql-editor ol li.ql-indent-4{counter-increment:list-4;counter-reset:list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-4:before{content:counter(list-4,lower-alpha) '. '}.ql-editor ol li.ql-indent-5{counter-increment:list-5;counter-reset:list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-5:before{content:counter(list-5,lower-roman) '. '}.ql-editor ol li.ql-indent-6{counter-increment:list-6;counter-reset:list-7 list-8 list-9}.ql-editor ol li.ql-indent-6:before{content:counter(list-6,decimal) '. '}.ql-editor ol li.ql-indent-7{counter-increment:list-7;counter-reset:list-8 list-9}.ql-editor ol li.ql-indent-7:before{content:counter(list-7,lower-alpha) '. '}.ql-editor ol li.ql-indent-8{counter-increment:list-8;counter-reset:list-9}.ql-editor ol li.ql-indent-8:before{content:counter(list-8,lower-roman) '. '}.ql-editor ol li.ql-indent-9{counter-increment:list-9}.ql-editor ol li.ql-indent-9:before{content:counter(list-9,decimal) '. '}.ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:3em}.ql-editor li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}.ql-editor .ql-indent-2:not(.ql-direction-rtl){padding-left:6em}.ql-editor li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}.ql-editor .ql-indent-3:not(.ql-direction-rtl){padding-left:9em}.ql-editor li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}.ql-editor .ql-indent-4:not(.ql-direction-rtl){padding-left:12em}.ql-editor li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}.ql-editor .ql-indent-5:not(.ql-direction-rtl){padding-left:15em}.ql-editor li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}.ql-editor .ql-indent-6:not(.ql-direction-rtl){padding-left:18em}.ql-editor li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}.ql-editor .ql-indent-7:not(.ql-direction-rtl){padding-left:21em}.ql-editor li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}.ql-editor .ql-indent-8:not(.ql-direction-rtl){padding-left:24em}.ql-editor li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}.ql-editor .ql-indent-9:not(.ql-direction-rtl){padding-left:27em}.ql-editor li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}.ql-editor .ql-video{display:block;max-width:100%}.ql-editor .ql-video.ql-align-center{margin:0 auto}.ql-editor .ql-video.ql-align-right{margin:0 0 0 auto}.ql-editor .ql-bg-black{background-color:#000}.ql-editor .ql-bg-red{background-color:#e60000}.ql-editor .ql-bg-orange{background-color:#f90}.ql-editor .ql-bg-yellow{background-color:#ff0}.ql-editor .ql-bg-green{background-color:#008a00}.ql-editor .ql-bg-blue{background-color:#06c}.ql-editor .ql-bg-purple{background-color:#93f}.ql-editor .ql-color-white{color:#fff}.ql-editor .ql-color-red{color:#e60000}.ql-editor .ql-color-orange{color:#f90}.ql-editor .ql-color-yellow{color:#ff0}.ql-editor .ql-color-green{color:#008a00}.ql-editor .ql-color-blue{color:#06c}.ql-editor .ql-color-purple{color:#93f}.ql-editor .ql-font-serif{font-family:Georgia,Times New Roman,serif}.ql-editor .ql-font-monospace{font-family:Monaco,Courier New,monospace}.ql-editor .ql-size-small{font-size:.75em}.ql-editor .ql-size-large,.ql-editor h2{font-size:1.5em}.ql-editor .ql-size-huge{font-size:2.5em}.ql-editor .ql-direction-rtl{direction:rtl;text-align:inherit}.ql-editor .ql-align-center{text-align:center}.ql-editor .ql-align-justify{text-align:justify}.ql-editor .ql-align-right{text-align:right}.ql-editor.ql-blank::before{color:rgba(0,0,0,.6);content:attr(data-placeholder);font-style:italic;left:15px;pointer-events:none;position:absolute;right:15px}.ql-direction svg:last-child,.ql-direction.ql-active svg:first-child,.ql-hidden{display:none}.ql-out-bottom,.ql-out-top{visibility:hidden}.ql-tooltip{position:absolute;transform:translateY(10px)}.ql-tooltip a{cursor:pointer;text-decoration:none}.ql-tooltip.ql-flip{transform:translateY(-10px)}.ql-formats{display:inline-block;vertical-align:middle}.ql-formats:after{clear:both;content:'';display:table}.ql-stroke{fill:none;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.ql-stroke-miter{fill:none;stroke:#444;stroke-miterlimit:10;stroke-width:2}.ql-fill,.ql-stroke.ql-fill{fill:#444}.ql-empty{fill:none}.ql-even{fill-rule:evenodd}.ql-stroke.ql-thin,.ql-thin{stroke-width:1}.ql-transparent{opacity:.4}.ql-direction.ql-active svg:last-child{display:inline}.ql-editor h1{font-size:2em}.ql-editor h3{font-size:1.17em}.ql-editor h4{font-size:1em}.ql-editor h5{font-size:.83em}.ql-editor h6{font-size:.67em}.ql-editor a{text-decoration:underline}.ql-editor blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}.ql-editor code,.ql-editor pre{background-color:#f0f0f0;border-radius:3px}.ql-editor pre{white-space:pre-wrap;margin-bottom:5px;margin-top:5px;padding:5px 10px}.ql-editor code{font-size:85%;padding:2px 4px}.ql-editor pre.ql-syntax{background-color:#23241f;color:#f8f8f2;overflow:visible}.ql-editor img{max-width:100%}