@media (prefers-color-scheme: dark) {
  /* ***************************** 
다크-모드 스타일
***************************** */
  :root {
    /* 
            theme.css 의 css 변수를 overwrite
            변수 정의는 알파멧 순으로 한다
        */
    --primary-color: #2563eb;
    --secondary-border-color: #e7e5e5;
    --secondary-color: #2b2b40;
    --accent-color: #2b2b40;

    /* background */
    --background-fill-secondary: #1a1a1a;
    --bg-color: #1f1f1f;
    --bg-secondary: #313131;
    --bg-modal: #0c0c0c;
    --bg-table: #202020;

    /* border */
    --border-color-primary: #3f3f46;
    --border-color-secondary: #313131;

    /* button */
    --btn-bg-color: #2f2f2f;

    --bubble-bg-bot: #292929;
    --bubble-bg-user: #2b2b40;
    --disabled-color: #555555;

    /* text */
    --text-primary-color: #ffffff;
    --text-secondary-color: #969696;
  }

  /* 배경 컬러 스타일 */
  .main {
    background: var(--bg-color);
  }

  /* 글로벌 툴 스타일 */
  .global-tools {
    background-color: var(--btn-bg-color);
    border: 1px solid rgba(255, 255, 255, 0.102);
  }

  .icon-changes {
    background-image: url(../images/icon-changes-white.svg);
  }

  .icon-copy {
    background-image: url(../images/icon-copy-white.svg);
  }

  .icon-share {
    background-image: url(../images/icon-share-white.svg);
  }

  .icon-logout {
    background-image: url(../images/icon-logout-white.svg);
  }
  .main-content-columns.-type2 {
    background: var(--bubble-bg-bot);
  }

  /* form 스타일 */
  .input-style {
    border: 1px solid var(--border-color-primary);
    background: var(--bg-secondary);
  }
  .input-style::placeholder {
    color: var(--text-primary-color);
  }
  /* button 스타일 */
  button {
    color: var(--white);
    font-weight: 300;
  }

  .style-btn.full-small {
    background-color: var(--background-fill-secondary);
    color: var(--white);
    border: 1px solid var(--border-color-primary);
  }

  /* 메인- 배너 스타일 */
  .banner-h2 {
    color: #fff;
  }

  .banner-h6 {
    color: rgba(255, 255, 255, 0.5);
  }

  .banner-h2 .name {
    color: var(--primary-color);
  }

  .message-btn {
    background-color: #3e3e3e;
    color: #fff;
  }

  .message-btn:hover {
    background-color: #2b2b40;
  }

  .chat_input-item {
    background-color: var(--bg-color);
    border: 1px solid var(--border-color-primary) !important;
  }

  .search-btn {
    background-color: rgba(255, 255, 255, 0.38);
    color: #000;
  }

  /* 봇 채팅 */
  .message.received .bubble {
    background: var(--bubble-bg-bot);
    color: #e8e8e8;
  }

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

  .message .button-item .style-btn {
    border: 1px solid var(--border-color-primary);
    background: var(--btn-bg-color);
  }

  .canvas-button button.style-btn.full-line {
    border: 1px solid var(--border-color-primary);
    background: var(--btn-bg-color);
    color: #fff;
  }

  /* 채팅 반응 버튼 스타일 */
  .reaction-buttons {
    border: 1px solid var(--border-color-primary);
    background: #292929;
  }

  .reaction-buttons button {
    border: 1px solid #313131;
  }

  .reaction-buttons .more-btn {
    background: #2f2f2f url(../images/icon-more-white.svg) center no-repeat;
    background-size: 17px;
  }

  .reaction-buttons .canvas-btn {
    background: #2f2f2f url(../images/icon-canvas-white.svg) center no-repeat;
    background-size: 27px;
  }

  .reaction-buttons .like-btn {
    background: #2f2f2f url(../images/icon-like-white.svg) center no-repeat;
    background-size: 30px;
  }

  .reaction-buttons .dislike-btn {
    background: #2f2f2f url(../images/icon-dislike-white.svg) center no-repeat;
    background-size: 34px;
  }

  .reaction-buttons .copy-btn {
    background: #2f2f2f url(../images/icon-copy-white.svg) center no-repeat;
    background-size: 15px;
  }

  /* 유저 채팅 */
  .message.sent .bubble {
    background: var(--bubble-bg-user);
    color: #f7f7f8;
  }

  /* 특허리스트 */

  .side-open .side-area .side-article {
    border: 1px solid var(--border-color-secondary);
  }
  .default-column {
    color: var(--text-primary-color);
  }
  .patentList-column .title-article .title {
    color: var(--text-primary-color);
  }

  .patentList-column .content-item {
    border-color: var(--secondary-border-color);
  }

  .input-article .input-style {
    background-color: #2b2b2b;
    color: var(--text-primary-color);
  }

  .input-article .input-style::placeholder {
    color: #e6e0e9;
  }

  .tabs .tablinks.active {
    background-color: var(--primary-color);
    color: var(--text-primary-color);
  }

  .patent-list-item .patent-num {
    color: #e6e0e9;
  }

  .patent-list-item .patent-info {
    color: #c4c4c4;
    letter-spacing: 0.5px;
  }

  .patent-list-item + .patent-list-item {
    border-color: var(--border-color-primary);
  }

  .patent-list-item:hover,
  .patent-list-item:focus {
    background-color: #292929;
  }

  /* 특허리스트, 전문 스타일 */
  .pagination {
    color: var(--white);
  }

  .pagination-article {
    border-color: var(--secondary-border-color);
  }

  .pagination .paging_move .page-num-input {
    background-color: #2f2f2f;
  }

  .pagination .paging_move .page-num-input::placeholder {
    color: var(--white);
  }

  .pagination .page-link {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color-primary);
  }

  .pagination .disabled .page-link {
    color: var(--white) !important;
  }

  .pagination .page-link.move {
    background-color: var(var(--primary-color));
    color: var(--white);
    border-color: var(var(--primary-color));
  }

  .sub-view-wrap .style-btn {
    background-color: var(--btn-bg-color);
    color: var(--white);
    border: 1px solid var(--border-color-primary);
  }

  .sub-view-wrap .style-btn.point {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--text-primary-color);
  }

  .patent-fullText-column {
    /* background: var(--bg-color); */
    border: 1px solid var(--border-color-secondary);
  }

  .sub-view-title .patent-num {
    color: var(--text-primary-color);
  }

  .sub-view-module.-header {
    background-color: var(--bg-secondary);
    color: var(--text-primary-color);
  }

  .sub-view-module .sub-title {
    color: var(--text-primary-color);
  }

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

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

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

  .login-column {
    background: #1f1f1f;
    border: 1px solid #313131;
  }

  .close-black {
    background: url(../images/icon-close-white.svg) center no-repeat;
    background-size: 13px;
  }

  .input-item label p {
    color: #a7a7a7;
  }

  /* 로그인 */
  .login-column .input-item .input-style {
    background-color: #2f2f2f;
    border: 1px solid rgba(255, 255, 255, 0.102);
    color: #d3d3d3;
  }

  .login-recovery .button-column.-bar .button-itme {
    color: #a7a7a7;
  }

  .login-column .button-item.-color-w .style-btn.full-line {
    background: #3e3e3e;
    border: 1px solid #666;
    color: #cccccc;
  }

  .login-column .button-item.-color-w .style-btn.-full {
    background-color: #3e3e3e;
    color: #cccccc;
    border-color: #313131;
  }

  /* 회원가입 */
  .doc-title .tit_service.-logo {
    color: #fff;
  }

  .title-g {
    color: #fff;
  }

  .cont-sign p.text {
    color: #d3d3d3;
  }

  .lab_choice p {
    color: #fff;
  }

  .cont-sign .list-style .item.-scroll_Y {
    background-color: #2f2f2f;
    border: 1px solid rgba(255, 255, 255, 0.102);
    color: #e6e0e9;
  }

  .close-btn.-black {
    background: url(../images/icon-close-white.svg) center no-repeat;
    background-size: 13px;
  }

  .aboutTerms_tab li a {
    color: #e6e0e9;
  }

  /* 아이디 찾기 */
  .doc-title .tit_service {
    color: #fff;
  }

  .id-form .label-tit {
    color: #fff;
  }

  .id-form .input-item .input-text {
    background-color: #2f2f2f;
    border: 1px solid rgba(255, 255, 255, 0.102);
    color: #d3d3d3;
  }

  .justify-end {
    border-color: rgba(255, 255, 255, 0.102);
  }

  .text-g {
    color: #d3d3d3;
  }

  .acc-user-data {
    border-color: rgba(255, 255, 255, 0.102);
  }

  .acc-user-data .user-email {
    color: #d3d3d3;
  }

  .msg-box p {
    color: #d3d3d3;
  }

  /* teresa added */
  .patent-list-item.active {
    /*teresa added*/
    background-color: #49454f;
  }

  .ytick > text,
  .xtick > text {
    fill: var(--white) !important;
  }

  .js-plotly-plot .main-svg .xy .nsewdrag.drag {
    fill: unset !important;
  }

  .modebar-group {
    background-color: unset !important;
  }

  .modebar-group .icon > path {
    fill: var(--white) !important;
  }

  .Select-control {
    background-color: unset !important;
    color: var(--white) !important;
  }

  .Select-control .Select-value-label {
    color: var(--white) !important;
  }

  .Select-menu-outer {
    background-color: #2f2f2f !important;
    color: var(--white) !important;
  }

  /* chart 의 box layout */
  .xlines-above.crisp,
  .ylines-above.crisp {
    stroke: unset !important;
  }

  .slicetext > tspan {
    fill: var(--white) !important;
  }

  .wordcloud_camera {
    background: url(../images/icon-camera-white.svg) center no-repeat;
    height: 20px;
    margin-left: 90%;
  }

  .result-count {
    font-size: 14px;
    color: var(--white);
    margin-left: auto;
    padding-right: 10px;
  }
  .classdesc-container {
    color: var(--white);
  }

  .classdesc-container .title {
    color: var(--white);
  }

  .prior-art-report > ol,
  .prior-art-report > ul,
  .prior-art-report > p,
  .prior-art-report > h1,
  .prior-art-report > h2,
  .prior-art-report > h3,
  .prior-art-report > h4,
  .prior-art-report > h5,
  .prior-art-report > h6 {
    color: var(--white);
  }

  /* 클러스터 */
  .content-top,
  .content-bottom {
    background: var(--background-fill-secondary);
    border: 1px solid var(--border-color-secondary) !important;
  }
  .-card.-shadow {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.6) !important;
  }

  .select-menu .select-btn {
    background: var(--bg-secondary);
  }
  .select-text {
    color: var(--text-primary-color);
  }
  .select-menu .options {
    background: var(--bg-secondary);
  }
  .select-menu .options .option-text {
    color: var(--text-primary-color) !important;
  }
  .select-menu .options .option:hover {
    background-color: var(--bg-color);
  }
  .side-menu {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color-secondary);
  }
  .side-menu .side-menu-item {
    background: #282828;
    border: 1px solid var(--border-color-primary);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
  }
  .return {
    background: url(../images/icon-return-white.svg) no-repeat center;
  }
  .menu {
    background: url(../images/icon-menu-white.svg) no-repeat center;
  }
  .toggle-cont-bottom .-card {
    background: var(--bg-secondary);
  }

  .tab-scroll {
    border-color: var(--border-color-secondary);
    background: var(--bg-secondary);
    padding: 0 3px;
  }
  .tab-scroll .-scroll_Y {
    height: 30px;
  }
  .keyword-list .keyword-item .style-btn {
    background-color: var(--primary-color);
    color: var(--white);
  }
  .tab-scroll .keyword-list .keyword-item .style-btn {
    background-color: var(--background-fill-secondary);
    color: var(--white);
    border: 1px solid var(--border-color-primary);
  }
  .tab-scroll .keyword-list .keyword-item .style-btn.active {
    border: 1px solid var(--primary-color);
  }

  .side-menu-item .chart {
    background: url(../images/icon-bar-chart-white.svg) center no-repeat !important;
    background-size: 15px !important;
  }

  .modal-content.chat-search {
    background-color: var(--bg-modal);
    border: 1px solid var(--border-color-secondary);
  }

  .modal-content .close-btn {
    background: url(../images/icon-close-white.svg) center no-repeat;
    background-size: 13px;
  }

  .modal-content {
    background-color: var(--bg-modal);
    border: 1px solid var(--border-color-secondary);
    color: var(--text-primary-color);
  }

  .prior-art-report table {
    background-color: var(--bg-table);
  }

  .prior-art-report table tr th {
    background-color: var(--bubble-bg-user);
  }

  .prior-art-report p {
    color: var(--text-secondary-color);
  }

  .prior-art-report ul li {
    color: var(--text-secondary-color);
  }
  .prior-art-report p strong,
  .prior-art-report ul li strong {
    color: var(--white);
  }

  .tree-container .tree .node-label {
    color: var(--text-secondary-color);
  }
  .loading-box {
    background: var(--bubble-bg-bot);
  }
  .loading-text {
    color: var(--text-secondary-color);
  }

  .clustering {
    background: url(../images/icon-clustering-white.svg) center no-repeat;
    background-size: 18px;
  }

  .state-btn-wrap .state-btn {
    border: 1px solid var(--border-color-primary);
    background: var(--btn-bg-color);
    color: var(--white);
  }

  .state-btn-wrap .state-btn .icon.searchList {
    background: url(../images/icon-searchList-white.svg) center no-repeat;
    width: 20px;
    height: 20px;
    background-size: 16px;
  }
  .state-btn-wrap .state-btn .icon.home {
    background: url(../images/icon-home-white.svg) center no-repeat;
    width: 20px;
    height: 20px;
    background-size: 16px;
  }
  .state-btn-wrap .state-btn .icon.chat {
    background: url(../images/icon-newChat-white.svg) center no-repeat;
    width: 25px;
    height: 25px;
    background-size: 20px;
  }
  /* 특허리스트 - 공개 */
  .patent-list-item .patent-num-container .label-text.-type1 {
    background-color: var(--btn-bg-color);
    color: var(--white);
    border: 1px solid var(--border-color-primary);
  }

  /* 특허리스트 - 등록 */
  .patent-list-item .patent-num-container .label-text.-type2 {
    background-color: var(--btn-bg-color);
    color: var(--white);
    border: 1px solid var(--border-color-primary);
  }
  /* 특허리스트 - 등급 */
  .patent-list-item .patent-list-item-wrap + .label-text {
    color: var(--white);
  }

  /* 등급 업그레이드 ui */
  .model-switcher .model-dropdown-menu-inner {
    background-color: var(--btn-bg-color);
    color: var(--white);
    border: 1px solid var(--border-color-primary);
  }

  .model-switcher .model-dropdown-menu .model-dropdown-item .icon.checkmark {
    background: url(../images/icon-checkmark-white.svg) center no-repeat;
    background-size: 15px;
  }

  .model-switcher .model-dropdown-menu .model-dropdown-item:hover {
    cursor: pointer;
    background: #3a3a3a;
  }
}