:root {
--bg: #000000; --panel: #0b0f18; --line: #1e2633; --text: #e8edf5; --dim: #7c8798;
--wood: #4ade80; --fire: #f43f5e; --earth: #fbbf24; --metal: #f1f5f9; --water: #3b82f6;


--hover:   #131a26;
--dd-bg:   #000000;
--panel2:  #0b0f16;
--line2:   #2a3444;
--dim2:    #5a6472;
--dim3:    #4d5663;
--hint:    #8b96a5;


--today:    #22c55e;
--today-bd: #22c55e44;
--today-bg: #22c55e14;
--sel:      #fbbf24;
--sel-bd:   #fbbf2444;
--sel-bg:   #fbbf2414;
--jeolgi:   #4ade80;
--sun:      #f87171;
--sat:      #60a5fa;
}


html[data-bg="light"] {
--bg: #ffffff; --panel: #f6f8fb; --line: #dde3ec; --text: #14191f; --dim: #5b6674;

--wood: #15803d; --fire: #be123c; --earth: #92700a; --metal: #7dd3fc; --water: #475569;

--hover:   #eef2f7;
--dd-bg:   #ffffff;
--panel2:  #eef1f6;
--line2:   #c6cedb;
--dim2:    #6f7987;
--dim3:    #838d9b;
--hint:    #67717f;

--today:    #15803d;
--today-bd: #15803d66;
--today-bg: #15803d14;
--sel:      #92700a;
--sel-bd:   #92700a66;
--sel-bg:   #92700a14;
--jeolgi:   #15803d;
--sun:      #dc2626;
--sat:      #2563eb;
}


html[data-color="off"] {
--wood:  var(--text);
--fire:  var(--text);
--earth: var(--text);
--metal: var(--text);
--water: var(--text);
--sun:   var(--text);
--sat:   var(--dim);
}

html[data-color="off"] .coloronly { display: none; }


html { background: var(--bg); }


.theme-tabs {
margin-left: auto;
display: flex;
align-items: center;
gap: 2px;
}
.theme-tabs button {
font: inherit;
font-size: 11.5px;
line-height: 1;
color: var(--dim);
background: none;
border: 1px solid transparent;
border-radius: 7px;
padding: 5px 8px;
cursor: pointer;
}
.theme-tabs button:hover { color: var(--text); background: var(--hover); }

.theme-tabs button.on {
color: var(--text);
border-color: var(--line2);
background: var(--panel);
font-weight: 700;
}

.theme-tabs .sep {
width: 1px;
height: 13px;
background: var(--line);
margin: 0 5px;
}