@charset "utf-8";

html[data-theme="dark"] {
  --bg:          #15171a;
  --surface:     #1e2125;
  --surface-2:   #262a2f;
  --header:      #0d0e10;
  --text:        #e6e6e6;
  --text-dim:    #a8adb3;
  --text-dimmer: #80858b;
  --border:      #34383d;
  --border-soft: #2a2e33;
  --input-bg:    #1a1d21;

  color-scheme: dark;
}

html[data-theme="dark"] body,
html[data-theme="dark"] #lyFooter,
html[data-theme="dark"] .staticTable,
html[data-theme="dark"] table,
html[data-theme="dark"] a {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

html[data-theme="dark"] body {
  background-color: var(--bg);
  color: var(--text);
}

html[data-theme="dark"] #lyIndexBox,
html[data-theme="dark"] #lyContentsBox,
html[data-theme="dark"] #lyContentsBoxByMain,
html[data-theme="dark"] #lyCenter,
html[data-theme="dark"] #lyCenterFull,
html[data-theme="dark"] #lyCenterContents,
html[data-theme="dark"] #lyRight,
html[data-theme="dark"] #showCaseBoxBg {
  background-color: transparent;
}

html[data-theme="dark"] #lyTempHeader,
html[data-theme="dark"] #lyTempHeader > div {
  background-color: var(--header) !important;
}

html[data-theme="dark"] #lyHeaderBox,
html[data-theme="dark"] #lyHeaderBar,
html[data-theme="dark"] #lyTopSubMenuBox,
html[data-theme="dark"] #lyTopSearchBox {
  background-color: var(--header);
}

html[data-theme="dark"] #lyFooter,
html[data-theme="dark"] #lyFooter_m {
  background-color: var(--header);
  color: var(--text);
}
html[data-theme="dark"] #lyFooter .copyright,
html[data-theme="dark"] #lyFooter_m .copyright {
  color: var(--text-dimmer);
}

html[data-theme="dark"] a,
html[data-theme="dark"] a:link,
html[data-theme="dark"] a:visited,
html[data-theme="dark"] a:hover,
html[data-theme="dark"] a:active {
  color: var(--text);
}

html[data-theme="dark"] #lyHeaderBarPC #lyTopMenuBox li a,
html[data-theme="dark"] #lyTopSubMenuBox #lyTopSubMenu li a {
  color: #fff;
}

html[data-theme="dark"] .black,
html[data-theme="dark"] .searchResultText .accent,
html[data-theme="dark"] .searchValueAccent,
html[data-theme="dark"] .sectionTitleBox h1 a,
html[data-theme="dark"] .articleTitleBox .articleTitle,
html[data-theme="dark"] .tabMenu li,
html[data-theme="dark"] .tabMenu2 li,
html[data-theme="dark"] .lyCategoryBox .tabContents ul li.title,
html[data-theme="dark"] #articleListMainBox_ceo a,
html[data-theme="dark"] #postsMainList a,
html[data-theme="dark"] .commentList .text,
html[data-theme="dark"] .tableInTable .sum td.title,
html[data-theme="dark"] .tableInTable .sum .total,
html[data-theme="dark"] .tableTitleInView .explain,
html[data-theme="dark"] .titleInView .explain,
html[data-theme="dark"] .articleWriter .header {
  color: var(--text);
}

html[data-theme="dark"] .subItem,
html[data-theme="dark"] .subTitle3,
html[data-theme="dark"] .sectionTitleBox .sectionTitleExplain,
html[data-theme="dark"] .article p.title a,
html[data-theme="dark"] .articleTitleBox .header,
html[data-theme="dark"] .articleWriter .headerText,
html[data-theme="dark"] .commentList .writer,
html[data-theme="dark"] .staticTable th,
html[data-theme="dark"] .staticTable td,
html[data-theme="dark"] #privacyAgreeBox2 .subText1,
html[data-theme="dark"] .boxInPrivacyAgreeBox,
html[data-theme="dark"] .calendar .default,
html[data-theme="dark"] #indexPressPost .date,
html[data-theme="dark"] #indexHrdkoreaPost .date,
html[data-theme="dark"] #indexCeoPost1 .date {
  color: var(--text-dim);
}

html[data-theme="dark"] .explain,
html[data-theme="dark"] .article .date,
html[data-theme="dark"] .article .source2,
html[data-theme="dark"] .callendarTitleBox .prevMonth,
html[data-theme="dark"] .callendarTitleBox .nextMonth {
  color: var(--text-dimmer);
}

html[data-theme="dark"] .vsp,
html[data-theme="dark"] .explain2,
html[data-theme="dark"] #articleListMainBox_ .date,
html[data-theme="dark"] .article .source,
html[data-theme="dark"] .article .articleText a,
html[data-theme="dark"] .commentList .writer .date,
html[data-theme="dark"] .article_otherList .selected .title,
html[data-theme="dark"] .article_otherList .selected .articleText {
  color: var(--text-dimmer);
}

html[data-theme="dark"] .whiteBg,
html[data-theme="dark"] .sectionTitleBox h1,
html[data-theme="dark"] div.loginBox .contents,
html[data-theme="dark"] #joinBox,
html[data-theme="dark"] .staticTable,
html[data-theme="dark"] .tableInTable,
html[data-theme="dark"] .basicTableTr,
html[data-theme="dark"] .tableInTable2 th,
html[data-theme="dark"] .boxInPrivacyAgreeBox,
html[data-theme="dark"] .app1UserData1 p,
html[data-theme="dark"] .app1UserData2 p,
html[data-theme="dark"] .app2UserData1 p,
html[data-theme="dark"] .app2UserData2 p {
  background-color: var(--surface);
  color: var(--text);
}

html[data-theme="dark"] .bgGray,
html[data-theme="dark"] .grayBox,
html[data-theme="dark"] .colHover,
html[data-theme="dark"] .basicTableTrHover,
html[data-theme="dark"] .tabMenu li:hover,
html[data-theme="dark"] .tabMenu .select,
html[data-theme="dark"] .tabMenu2 li:hover,
html[data-theme="dark"] .tabMenu2 .select,
html[data-theme="dark"] .lyCategoryBox .tabContents,
html[data-theme="dark"] #loclist li.select,
html[data-theme="dark"] #loclist li a.select,
html[data-theme="dark"] .paperViewTable,
html[data-theme="dark"] .canendarExplain2,
html[data-theme="dark"] .tableInTable2,
html[data-theme="dark"] #postBox1Search,
html[data-theme="dark"] #postBox2Search,
html[data-theme="dark"] .articleText .epilogue,
html[data-theme="dark"] .staticTable th,
html[data-theme="dark"] .staticTable .subTh,
html[data-theme="dark"] .subTable th,
html[data-theme="dark"] .defalutTable th,
html[data-theme="dark"] #viewAttach,
html[data-theme="dark"] #bbsStyle1 #write input,
html[data-theme="dark"] #bbsStyle1 #write textarea {
  background-color: var(--surface-2);
  color: var(--text);
}

html[data-theme="dark"] #bbsStyle1 #bbsList th,
html[data-theme="dark"] #bbsStyle1 #viewHeader th,
html[data-theme="dark"] #bbsStyle1 #write th,
html[data-theme="dark"] .staticTabMenuBox .codeDefault {
  color: #fff;
}
html[data-theme="dark"] #bbsStyle1 { color: var(--text-dim); }
html[data-theme="dark"] #bbsStyle1 a,
html[data-theme="dark"] #bbsStyle1 a:hover,
html[data-theme="dark"] #bbsStyle1 a:active { color: var(--text); }

html[data-theme="dark"] .noImgIndex,
html[data-theme="dark"] .noImgNews {
  background-color: var(--surface-2);
}

html[data-theme="dark"] #lyRight .titleImg,
html[data-theme="dark"] #lyRight .article_otherList .title {
  color: var(--text);
}
html[data-theme="dark"] #lyRight .article_otherList .articleText {
  color: var(--text-dim);
}

html[data-theme="dark"] #lyRight .noImgMain,
html[data-theme="dark"] .noImgMain {
  background-image: none !important;
  background-color: var(--surface-2) !important;
}

html[data-theme="dark"] .lyLocation,
html[data-theme="dark"] .contentsSubTitleBox,
html[data-theme="dark"] .staticTable,
html[data-theme="dark"] .staticTable th,
html[data-theme="dark"] .staticTable td,
html[data-theme="dark"] .allBorder,
html[data-theme="dark"] .allBorder th,
html[data-theme="dark"] .allBorder td,
html[data-theme="dark"] .defalutTable th,
html[data-theme="dark"] .defalutTable td,
html[data-theme="dark"] .calendar,
html[data-theme="dark"] .calendar th,
html[data-theme="dark"] .calendar td,
html[data-theme="dark"] .tableInTable th,
html[data-theme="dark"] .tableInTable td,
html[data-theme="dark"] .tableInTable .sum td,
html[data-theme="dark"] .siteSearchBox .article .title,
html[data-theme="dark"] #bbsStyle1 #bbsList th,
html[data-theme="dark"] #bbsStyle1 #bbsList td,
html[data-theme="dark"] #bbsStyle1 #write td {
  border-color: var(--border);
}

html[data-theme="dark"] .articleLineDotted,
html[data-theme="dark"] #positionCountBox,
html[data-theme="dark"] .staticTable th.leftLine,
html[data-theme="dark"] .staticTable td.leftLine,
html[data-theme="dark"] #viewAttachBox,
html[data-theme="dark"] .articleCopyright,
html[data-theme="dark"] .tableInTable td,
html[data-theme="dark"] #memberBasicTable th,
html[data-theme="dark"] #memberBasicTable td,
html[data-theme="dark"] .commentBox,
html[data-theme="dark"] .commentAdd #commentName,
html[data-theme="dark"] .commentAdd #comment,
html[data-theme="dark"] .commentAdd #commentPwd {
  border-color: var(--border-soft);
}

html[data-theme="dark"] .sectionTitleBox hr,
html[data-theme="dark"] .hr_sp {
  background-color: var(--border) !important;
  border-color: var(--border) !important;
  color: var(--border) !important;
}

html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background-color: var(--input-bg);
  color: var(--text);
  border-color: var(--border);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: var(--text-dimmer); }

html[data-theme="dark"] .idleField {
  background-color: var(--surface-2);
  border-color: var(--border);
}
html[data-theme="dark"] .focusField {
  background-color: var(--input-bg);
}
html[data-theme="dark"] #lyTopSearchBox input {
  background-color: var(--input-bg);
  color: var(--text);
}

html[data-theme="dark"] #lyTopSubMenuBox2 {
  background-color: var(--header);
  border-bottom-color: var(--border);
}
html[data-theme="dark"] #lyTopSubMenuBox2 #lyTopSubMenu .title {
  color: var(--text);
}

html[data-theme="dark"] #lyHeaderBoxW {
  background-color: var(--header);
}

html[data-theme="dark"] .dropdown-menu {
  background-color: var(--surface);
  border-color: var(--border);
}
html[data-theme="dark"] .dropdown-item {
  color: var(--text);
}
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
  background-color: var(--surface-2);
  color: var(--text);
}
html[data-theme="dark"] .dropdown-divider {
  border-color: var(--border);
}

html[data-theme="dark"] .hr-primary {
  border-bottom-color: var(--border);
}

html[data-theme="dark"] .articleText,
html[data-theme="dark"] .articleText p,
html[data-theme="dark"] .articleText div,
html[data-theme="dark"] .articleText span,
html[data-theme="dark"] .articleText font,
html[data-theme="dark"] .articleText b,
html[data-theme="dark"] .articleText strong,
html[data-theme="dark"] .articleText li,
html[data-theme="dark"] .articleText td {
  color: var(--text) !important;
  background-color: transparent !important;
}

html[data-theme="dark"] .articleText span[style*="153"] {
  color: var(--text-dim) !important;
}

html[data-theme="dark"] .articleText a {
  color: var(--text-dimmer) !important;
}

#themeToggle {
  cursor: pointer;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
}
#themeToggle:hover { opacity: .7; }
#themeToggle:focus,
#themeToggle:active { outline: none !important; box-shadow: none !important; }
html[data-theme="dark"] #themeToggle { color: var(--text) !important; }