/* variable */
:root {
    --black: #151515;
    --white: rgb(230, 230, 230);

    /* dark */
    --dark-color-header: rgb(32, 33, 35);
    --dark-color-main: rgb(70, 70, 85);
    --dark-color-history: rgb(53, 53, 65);
    --dark-point-color1: #5b7484;
    --dark-point-color2: #dad8ec;
    --dark-text-shadow: rgb(235, 235, 235);

    /* light */
    --light-color-header: #e9cd6a;
    --light-color-main: rgb(235, 235, 235);
    --light-color-history: rgb(220, 220, 220);
    --light-point-color1: #e9cd6a;
    --light-point-color2: rgb(220, 220, 220);
    --light-text-shadow: rgb(55, 55, 55);

    /* border */
    --border-gray: rgb(200, 200, 200);
    --border-darkgray: rgb(180, 180, 180);
    --border-black: #151515;
    --dark-point-border: rgb(230, 230, 230);
    --light-point-border: #151515;

    /* input */
    --dark-input-textbox: rgb(230, 230, 230);
    --dark-input-textarea: rgb(230, 230, 230);
    --light-input-textbox: rgb(220, 220, 220);
    --light-input-textarea: rgb(220, 220, 220);
}

/* background color setting for dark mode */

/* subject-title holder, title */
body.dark-mode .subject-title {
    color: var(--white);
}
body.light-mode .subject-title {
    color: var(--black);
}

body.dark-mode .select-language .title-holder {
    border-bottom: solid 1px var(--border-gray);
}
body.light-mode .select-language .title-holder {
    border-bottom: solid 1px var(--border-black);
}

body.dark-mode .chat-view-wrap .title-holder {
    background-color: var(--dark-point-color1);
    border: solid 1px var(--dark-point-border);
    border-top: 0;
}
body.light-mode .chat-view-wrap .title-holder {
    background-color: var(--light-point-color1);
    border: solid 1px var(--border-darkgray);
    border-bottom: 0;
    border-top: 0;
}

body.dark-mode .select-purpose .title-holder {
    border-bottom: solid 1px var(--border-gray);
}
body.light-mode .select-purpose .title-holder {
    border-bottom: solid 1px var(--border-black);
}

body.dark-mode .chat-input .title-holder {
    border-bottom: solid 1px var(--border-gray);
}
body.light-mode .chat-input .title-holder {
    border-bottom: solid 1px var(--border-black);
}

body.dark-mode .history-container .title-holder {
    border-bottom: solid 1px var(--border-gray);
}
body.light-mode .history-container .title-holder {
    border-bottom: solid 1px var(--border-black);
}

/* header */
body.dark-mode .layout-header {
    background-color: var(--dark-color-header);
}
body.light-mode .layout-header {
    background-color: var(--light-color-header);
}

body.dark-mode .layout-header .dark-mode-button {
    background-color: var(--dark-color-header);
    text-shadow: 0 0 0 var(--dark-text-shadow);
}
body.light-mode .layout-header .dark-mode-button {
    background-color: var(--light-color-header);
    text-shadow: 0 0 0 var(--light-text-shadow);
}

body.dark-mode .layout-header h1 a {
    color: var(--white);
}
body.light-mode .layout-header h1 a {
    color: var(--black);
}

/* body */
body.dark-mode {
    background-color: var(--dark-color-main);
}
body.light-mode {
    background-color: var(--light-color-main);
}

/* 함수/변수추천, 코드 컨벤션 추천 버튼 */
body.dark-mode .main-title button {
    background-color: var(--dark-point-color2);
    border-bottom: solid 1px var(--dark-point-border);
    color: var(--black);
}
body.dark-mode .main-title button.title-selected {
    color: var(--white);
    background-color: var(--dark-point-color1);
    border: solid 1px var(--dark-point-border);
    border-bottom: 0;
}

body.light-mode .main-title button {
    background-color: var(--light-point-color2);
    border-bottom: solid 1px var(--border-darkgray);
    color: var(--black);
}
body.light-mode .main-title button.title-selected {
    color: var(--black);
    background-color: var(--light-point-color1);
    border: solid 1px var(--border-darkgray);
    border-bottom: 0;
}

/* 언어 선택 */
body.dark-mode .select-language label {
    border: 1px solid var(--border-gray);
    color: var(--white);
}
body.light-mode .select-language label {
    border: 1px solid var(--border-darkgray);
    color: var(--black);
}

body.dark-mode .select-language input[type=radio]:checked+label {
    background-color: var(--dark-point-color1);
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
body.light-mode .select-language input[type=radio]:checked+label {
    background-color: var(--light-point-color1);
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

/* 챗 뷰 */
body.dark-mode .chat-view {
    background-color: var(--white);
    color: var(--black);
}
body.light-mode .chat-view {
    background-color: var(--white);
    color: var(--black);
    border: solid 1px var(--border-darkgray);
}

body.dark-mode .chat-view::-webkit-scrollbar-thumb {
    background: rgb(52, 53, 65);
}
body.light-mode .chat-view::-webkit-scrollbar-thumb {
    background: rgb(52, 53, 65);
}

body.dark-mode .chat-view::-webkit-scrollbar-track {
    background: #ddd;
}
body.light-mode .chat-view::-webkit-scrollbar-track {
    background: #ddd;
}

/* page 1 */
/* 목적 선택 */
body.dark-mode .select-purpose label {
    border: 1px solid var(--border-gray);
    color: var(--white);
}
body.light-mode .select-purpose label {
    border: 1px solid var(--border-darkgray);
    color: var(--black);
}

body.dark-mode .select-purpose input[type=radio]:checked+label {
    background-color: var(--dark-point-color1);
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
body.light-mode .select-purpose input[type=radio]:checked+label {
    background-color: var(--light-point-color1);
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

body.dark-mode .purpose-text-holder input[type=text] {
    background-color: var(--dark-input-textbox);
    border: solid 1px var(--dark-point-border);
}
body.light-mode .purpose-text-holder input[type=text] {
    background-color: var(--light-input-textbox);
    border: solid 1px var(--border-darkgray);
}
body.dark-mode .purpose-text-holder input[type=text]:disabled {
    background-color: var(--dark-color-main);
    border: 1px solid var(--border-gray);
}
body.light-mode .purpose-text-holder input[type=text]:disabled {
    background-color: var(--light-color-main);
    border: 1px solid var(--border-darkgray);
}

/* page 2 */
/* 코드 입력 */
body.dark-mode .question-text-holder textarea {
    background-color: var(--dark-input-textarea);
}
body.light-mode .question-text-holder textarea {
    background-color: var(--light-input-textarea);
    border: solid 1px var(--border-darkgray);
}

body.dark-mode .question-text-holder textarea::-webkit-scrollbar-thumb {
    background: rgb(52, 53, 65);
}
body.light-mode .question-text-holder textarea::-webkit-scrollbar-thumb {
    background: rgb(52, 53, 65);
}

body.dark-mode .question-text-holder textarea::-webkit-scrollbar-track {
    background: #ddd;
}
body.light-mode .question-text-holder textarea::-webkit-scrollbar-track {
    background: #ddd;
}

/* submit 버튼 */
body.dark-mode .submit-button-holder button {
    background-color: var(--dark-point-color1);
    border: solid 1px var(--border-gray);
    color: var(--white);
}
body.light-mode .submit-button-holder button {
    background-color: var(--light-point-color1);
    border: solid 1px var(--border-darkgray);
    color: var(--black);
}

/* history */
body.dark-mode .history-container {
    background-color: var(--dark-color-history);
    color: var(--white);
}
body.light-mode .history-container {
    background-color: var(--light-color-history);
    color: var(--black);
}

/* 메뉴 슬라이드 아이콘 */
body.dark-mode .flip-menu-button {
    background-color: var(--dark-color-main);
    text-shadow: 0 0 0 var(--dark-text-shadow);
}
body.light-mode .flip-menu-button {
    background-color: var(--light-color-main);
    text-shadow: 0 0 0 var(--light-text-shadow);
}

body.dark-mode .flip-menu-button.moved{
    background-color: var(--dark-color-history);
}
body.light-mode .flip-menu-button.moved{
    background-color: var(--light-color-history);
}

/* list 내부 x아이콘 */
body.dark-mode .icon-history-delete {
    background-color: var(--dark-color-history);
    text-shadow: 0 0 0 var(--dark-text-shadow);
}
body.light-mode .icon-history-delete {
    background-color: var(--light-color-history);
    text-shadow: 0 0 0 var(--light-text-shadow);
}

/* history 내부 글씨 */
body.dark-mode .history-p {
    color: var(--white);
}
body.light-mode .history-p {
    color: var(--black);
}

pre {
    background-color: var(--dark-input-textbox);
    border: 0;
}