@charset "utf-8";

:root:not(.theme_dark) {
  --Gray-0:   #FFFFFF;
  --Gray-5:   #F9F9FB;
  --Gray-10:  #F0F1F4;
  --Gray-20:  #E1E4E9;
  --Gray-30:  #CCCFD7;
  --Gray-40:  #9BA0AA;
  --Gray-50:  #676D79;
  --Gray-60:  #565A61;
  --Gray-70:  #43464C;
  --Gray-80:  #303236;
  --Gray-90:  #26282C;
  --Gray-95:  #161718;
  --Gray-100: #000000;
  
  --Primary-10: #D8FAFE;
  --Primary-20: #93E4F0;
  --Primary-30: #52CAE5;
  --Primary-40: #0096B8;
  --Primary-50: #0180A7;
  --Primary-55: #02789D;
  --Primary-60: #076C8D;
  --Primary-70: #125873;
  --Primary-80: #134358;
  --Primary-90: #083144;
  --Primary-Alpha-15: rgba(1, 128, 167, 0.15);
  --Primary-Alpha-10: rgba(1, 128, 167, 0.10);
  --Primary-Alpha-05: rgba(1, 128, 167, 0.05);
  
  --Blue-10: #EAF2FF;
  --Blue-20: #C0D7FF;
  --Blue-30: #85B1FF;
  --Blue-40: #3D85FF;
  --Blue-50: #1A6DF9;
  --Blue-55: #1069E5;
  --Blue-60: #125DCE;
  --Blue-70: #25509D;
  --Blue-80: #223E6E;
  --Blue-90: #222F49;
  --Blue-Alpha-15: rgba(26, 109, 249, 0.15);
  --Blue-Alpha-10: rgba(26, 109, 249, 0.10);
  --Blue-Alpha-05: rgba(26, 109, 249, 0.05);
  
  --Inverse-Alpha-90: rgba(255, 255, 255, 0.90);
  --Inverse-Alpha-80: rgba(255, 255, 255, 0.80);
  --Inverse-Alpha-70: rgba(255, 255, 255, 0.70);
  --Inverse-Alpha-60: rgba(255, 255, 255, 0.60);
  --Inverse-Alpha-50: rgba(255, 255, 255, 0.50);
  --Inverse-Alpha-40: rgba(255, 255, 255, 0.40);
  --Inverse-Alpha-30: rgba(255, 255, 255, 0.30);
  --Inverse-Alpha-20: rgba(255, 255, 255, 0.20);
  --Inverse-Alpha-10: rgba(255, 255, 255, 0.10);
  --Inverse-Alpha-05: rgba(255, 255, 255, 0.05);
  
  --Contrast-Alpha-90: rgba(28, 29, 32, 0.90);
  --Contrast-Alpha-80: rgba(28, 29, 32, 0.80);
  --Contrast-Alpha-70: rgba(28, 29, 32, 0.70);
  --Contrast-Alpha-60: rgba(28, 29, 32, 0.60);
  --Contrast-Alpha-50: rgba(28, 29, 32, 0.50);
  --Contrast-Alpha-40: rgba(28, 29, 32, 0.40);
  --Contrast-Alpha-30: rgba(28, 29, 32, 0.30);
  --Contrast-Alpha-20: rgba(28, 29, 32, 0.20);
  --Contrast-Alpha-10: rgba(28, 29, 32, 0.10);
  --Contrast-Alpha-05: rgba(28, 29, 32, 0.05);
  
  --Neutral-0:   #FFFFFF;
  --Neutral-5:   #F9F9FB;
  --Neutral-10:  #F0F1F4;
  --Neutral-20:  #E1E4E9;
  --Neutral-30:  #CCCFD7;
  --Neutral-40:  #9BA0AA;
  --Neutral-50:  #676D79;
  --Neutral-60:  #565A61;
  --Neutral-70:  #43464C;
  --Neutral-80:  #303236;
  --Neutral-90:  #26282C;
  --Neutral-95:  #161718;
  --Neutral-100: #000000;
  
  --White-Alpha-90: rgba(255, 255, 255, 0.90);
  --White-Alpha-80: rgba(255, 255, 255, 0.80);
  --White-Alpha-70: rgba(255, 255, 255, 0.70);
  --White-Alpha-60: rgba(255, 255, 255, 0.60);
  --White-Alpha-50: rgba(255, 255, 255, 0.50);
  --White-Alpha-40: rgba(255, 255, 255, 0.40);
  --White-Alpha-30: rgba(255, 255, 255, 0.30);
  --White-Alpha-20: rgba(255, 255, 255, 0.20);
  --White-Alpha-10: rgba(255, 255, 255, 0.10);
  --White-Alpha-05: rgba(255, 255, 255, 0.05);
  
  --Black-Alpha-90: rgba(28, 29, 32, 0.90);
  --Black-Alpha-80: rgba(28, 29, 32, 0.80);
  --Black-Alpha-70: rgba(28, 29, 32, 0.70);
  --Black-Alpha-60: rgba(28, 29, 32, 0.60);
  --Black-Alpha-50: rgba(28, 29, 32, 0.50);
  --Black-Alpha-40: rgba(28, 29, 32, 0.40);
  --Black-Alpha-30: rgba(28, 29, 32, 0.30);
  --Black-Alpha-20: rgba(28, 29, 32, 0.20);
  --Black-Alpha-10: rgba(28, 29, 32, 0.10);
  --Black-Alpha-05: rgba(28, 29, 32, 0.05);
  
  --Surface-Base: #F5F5F8;
  
  --Overlay-Selection: #FEFAD7;
  --Overlay-Backdrop: rgba(48, 50, 54, 0.70);
  --Overlay-Double: rgba(38, 40, 44, 0.95);
  --Overlay-ImageScrim: rgba(48, 50, 54, 0.40);
  
  --Error: #FF444E;
  --Error-Alpha-70: rgba(255, 68, 78, 0.70);
  --Error-Alpha-10: rgba(255, 68, 78, 0.10);
  --Error-Alpha-07: rgba(255, 68, 78, 0.07);
  --Error-Alpha-05: rgba(255, 68, 78, 0.05);
  
  --Success: #00B86B;
  --Success-Alpha-10: rgba(0, 184, 107, 0.10);
  
  --Warning: #FF8A00;
  --Warning-Alpha-10: rgba(255, 138, 0, 0.10);
  
  --Border-04: rgba(28, 29, 32, 0.04);
  --Border-08: rgba(28, 29, 32, 0.08);
  --Border-12: rgba(28, 29, 32, 0.12);
  
  --Avatar-Tomato:         #D60000; /* 토마토 */
  --Avatar-Tangerine:      #F5511E; /* 귤 */
  --Avatar-Pumpkin:        #EF6C00; /* 호박 */
  --Avatar-Mango:          #EF9300; /* 망고 */
  --Avatar-Banana:         #F5C026; /* 바나나 */
  --Avatar-Chick:          #E5C441; /* 병아리 */
  --Avatar-Avocado:        #C0CA33; /* 아보카도 */
  --Avatar-Pistachio:      #7DB343; /* 피스타치오 */
  --Avatar-Basil:          #0A8043; /* 바질 */
  --Avatar-Eucalyptus:     #009788; /* 유칼립투스 */
  --Avatar-Sage:           #32B67A; /* 세이지 */
  --Avatar-Peacock:        #039BE6; /* 공작 */
  --Avatar-Cobalt:         #4286F5; /* 코발트 */
  --Avatar-Blueberry:      #3F51B5; /* 블루베리 */
  --Avatar-Lavender:       #7986CC; /* 라벤더 */
  --Avatar-Light-Purple:   #B39DDB; /* 연보라 */
  --Avatar-Amethyst:       #9E69AF; /* 자수정 */
  --Avatar-Grape:          #8E24AA; /* 포도 */
  --Avatar-Purple:         #AD1457; /* 자주 */
  --Avatar-Cherry-Blossom: #D61B60; /* 벚꽃 */
  --Avatar-Light-Pink:     #E77C74; /* 연분홍 */
  --Avatar-Cocoa:          #795547; /* 코코아 */
  --Avatar-Graphite:       #616161; /* 흑연 */
  --Avatar-Birch-Tree:     #A7988D; /* 자작나무 */
  
  --Button-Control-fg:                  var(--Neutral-0);
  
  --Button-Primary-fg:                      var(--Neutral-0);
  --Button-Primary-fg-hover:                var(--Neutral-0);
  --Button-Primary-fg-selected:             var(--Primary-50);
  --Button-Primary-fg-disabled:             var(--Gray-5);
  
  --Button-Secondary-fg:                    var(--Gray-80);
  --Button-Secondary-fg-hover:              var(--Gray-95);
  --Button-Secondary-fg-selected:           var(--Gray-95);
  --Button-Secondary-fg-disabled:           var(--Gray-30);
  
  --Button-Secondary-theme-fg:              var(--Primary-50);
  --Button-Secondary-theme-fg-hover:        var(--Primary-55);
  --Button-Secondary-theme-fg-selected:     var(--Primary-55);
  --Button-Secondary-theme-fg-disabled:     var(--Gray-30);
  
  --Button-Tertiary-fg:                     var(--Gray-60);
  --Button-Tertiary-fg-hover:               var(--Gray-80);
  --Button-Tertiary-fg-selected:            var(--Gray-80);
  --Button-Tertiary-fg-disabled:            var(--Gray-30);
  
  --Button-Tertiary-theme-fg:               var(--Primary-40);
  --Button-Tertiary-theme-fg-hover:         var(--Primary-50);
  --Button-Tertiary-theme-fg-selected:      var(--Primary-50);
  --Button-Tertiary-theme-fg-disabled:      var(--Gray-30);
  
  --Roll-Book-Absent:        var(--Error);
  --Roll-Book-Late:          #FA7B31;
  --Roll-Book-Attend:        #14B485;
  --Roll-Book-Online:        #339AF0;
  --Roll-Book-Offline:       #F06595;
  --Roll-Book-Cancellation:  #899FB4;
  --Roll-Book-Approved:      #22B8CF;
  --Roll-Book-Supplementary: #A667EB;
  --Roll-Book-Supplementary-Alpha-10: rgba(166, 103, 235, 0.10);
  --Roll-Book-Supplementary-Alpha-05: rgba(166, 103, 235, 0.05);
  
  --Shadow-depth-01: rgba(0, 0, 0, 0.04);
  --Shadow-depth-02: rgba(0, 0, 0, 0.08);
  --Shadow-focus:    rgba(56, 130, 255, 0.25);
  --Shadow-error:    rgba(255, 68, 78, 0.25);
  
  --Chart-Lecture-Weeks:           #FF5C5C;
  --Chart-Lecture-Material:        #FFE240;
  --Chart-Zoom:                    #FFAC68;
  --Chart-Report1:                 #7CE18C;
  --Chart-Report2:                 #13B17D;
  --Chart-Discuss1:                #9377E2;
  --Chart-Test1:                   #2E51A8;
  --Chart-Test2:                   #2084DB;
  --Chart-Test3:                   #2AD0DC;
  --Chart-Clicker:                 #FFA4B5;
  --Chart-Survey:                  #8BA9FF;
  --Chart-Attend:                  #49A2F8;
  
  --Chart-GroupColor-swatch-01:    var(--Gray-0);
  --Chart-GroupColor-swatch-02:    var(--Contrast-Alpha-10);
  --Chart-GroupColor-swatch-03:    rgba(255, 92, 92, 0.50);
  --Chart-GroupColor-swatch-04:    rgba(255, 172, 104, 0.50);
  --Chart-GroupColor-swatch-05:    rgba(255, 226, 64, 0.50);
  --Chart-GroupColor-swatch-06:    rgba(192, 202, 51, 0.50);
  --Chart-GroupColor-swatch-07:    rgba(124, 225, 140, 0.50);
  --Chart-GroupColor-swatch-08:    rgba(19, 177, 125, 0.50);
  --Chart-GroupColor-swatch-09:    rgba(42, 208, 220, 0.50);
  --Chart-GroupColor-swatch-10:    rgba(32, 136, 219, 0.50);
  --Chart-GroupColor-swatch-11:    rgba(139, 169, 255, 0.50);
  --Chart-GroupColor-swatch-12:    rgba(147, 119, 226, 0.50);
  --Chart-GroupColor-swatch-13:    rgba(255, 164, 181, 0.50);
  --Chart-GroupColor-swatch-14:    rgba(160, 102, 35, 0.50);
  --Chart-GroupColor-swatch-15:    rgba(24, 52, 122, 0.50);
  
  --Chart-GroupColor-bg-01:        var(--Gray-0);
  --Chart-GroupColor-bg-02:        var(--Contrast-Alpha-05);
  --Chart-GroupColor-bg-03:        rgba(255, 92, 92, 0.16);
  --Chart-GroupColor-bg-04:        rgba(255, 172, 104, 0.16);
  --Chart-GroupColor-bg-05:        rgba(255, 226, 64, 0.16);
  --Chart-GroupColor-bg-06:        rgba(192, 202, 51, 0.16);
  --Chart-GroupColor-bg-07:        rgba(124, 225, 140, 0.16);
  --Chart-GroupColor-bg-08:        rgba(19, 177, 125, 0.16);
  --Chart-GroupColor-bg-09:        rgba(42, 208, 220, 0.16);
  --Chart-GroupColor-bg-10:        rgba(32, 136, 219, 0.16);
  --Chart-GroupColor-bg-11:        rgba(139, 169, 255, 0.16);
  --Chart-GroupColor-bg-12:        rgba(147, 119, 226, 0.16);
  --Chart-GroupColor-bg-13:        rgba(255, 164, 181, 0.16);
  --Chart-GroupColor-bg-14:        rgba(160, 102, 35, 0.16);
  --Chart-GroupColor-bg-15:        rgba(24, 52, 122, 0.16);
  
  --Percent-Blue:          #1E90FF;
  --Percent-Blue-Alpha-80: rgba(30, 144, 255, 0.80);
  --Percent-Blue-Alpha-60: rgba(30, 144, 255, 0.60);
  --Percent-Blue-Alpha-40: rgba(30, 144, 255, 0.40);
  --Percent-Blue-Alpha-20: rgba(30, 144, 255, 0.20);
  --Percent-Heatmap-100:   #B1C5E3; /* 91~100% */
  --Percent-Heatmap-90:    #A6CBDF; /* 81~90% */
  --Percent-Heatmap-80:    #A7D4D9; /* 71~80% */
  --Percent-Heatmap-70:    #A7D9CC; /* 61~70% */
  --Percent-Heatmap-60:    #B1E2C1; /* 51~60% */
  --Percent-Heatmap-50:    #C8ECC7; /* 41~50% */
  --Percent-Heatmap-40:    #DDF3CF; /* 31~40% */
  --Percent-Heatmap-30:    #ECF3CF; /* 21~30% */
  --Percent-Heatmap-20:    #F5F7D6; /* 11~20% */
  --Percent-Heatmap-10:    #FFFCE6; /* 0~10% */
  
  --Footer-bg: var(--Gray-80);
  --Background-Hidden: var(--Gray-5);
  
  --Icon-Yellow: #FFCD39;
  
  --Table-Deep-Header-bg:      var(--Gray-60);
  --Table-Deep-Header-fg:      var(--Gray-0);
  --Table-Deep-Header-border:  var(--Gray-70);
  --Table-Pale-Header-bg:      var(--Gray-10);
  --Table-Pale-Header-fg:      var(--Gray-80);
  --Table-Pale-Header-border:  var(--Gray-20);
  --Table-Pale-Header-topline: var(--Gray-50);
  
  --Text-Primary:               var(--Gray-90);
  --Text-Primary-strong:        var(--Gray-100);
  --Text-Primary-subtle:        var(--Gray-80);
  --Text-Secondary:             var(--Gray-70);
  --Text-Secondary-hover:       var(--Gray-80);
  --Text-Tertiary:              var(--Gray-60);
  --Text-Tertiary-hover:        var(--Gray-70);
  --Text-Quaternary:            var(--Gray-50);
  --Text-Disabled:              var(--Gray-40);
  --Text-Placeholder:           var(--Gray-30);
  --Text-Theme:                 var(--Primary-50);
  --Text-Theme-hover:           var(--Primary-60);
  --Text-Theme-subtle:          var(--Primary-40);
  --Text-Theme-strong:          var(--Primary-70);
  
  --btn-tertiary-bg: #E1E4E9;
  --btn-tertiary-bg-hover: #D6DAE1;
}

:root.theme_dark {
  --Gray-0:   #171719;
  --Gray-5:   #1E1E21;
  --Gray-10:  #28292C;
  --Gray-20:  #303033;
  --Gray-30:  #595B60;
  --Gray-40:  #6E7177;
  --Gray-50:  #85888E;
  --Gray-60:  #9A9DA3;
  --Gray-70:  #AEB1B6;
  --Gray-80:  #C7C9CC;
  --Gray-90:  #E0E0E0;
  --Gray-95:  #EFEFEF;
  --Gray-100: #FFFFFF;
  
  --Primary-10: #132325;
  --Primary-20: #17343A;
  --Primary-30: #1F4F57;
  --Primary-40: #1B6673;
  --Primary-50: #1E7C93;
  --Primary-55: #2291A8;
  --Primary-60: #35A3B6;
  --Primary-70: #41B9CD;
  --Primary-80: #73D4E2;
  --Primary-90: #A2ECF6;
  --Primary-Alpha-15: rgba(30, 124, 147, 0.15);
  --Primary-Alpha-10: rgba(30, 124, 147, 0.10);
  --Primary-Alpha-05: rgba(30, 124, 147, 0.05);
  
  --Blue-10: #172234;
  --Blue-20: #203353;
  --Blue-30: #234685;
  --Blue-40: #2A5CB6;
  --Blue-50: #3B73D4;
  --Blue-55: #4284F0;
  --Blue-60: #5996F2;
  --Blue-70: #75ADF5;
  --Blue-80: #9FC8F9;
  --Blue-90: #C4E1FD;
  --Blue-Alpha-15: rgba(59, 115, 212, 0.15);
  --Blue-Alpha-10: rgba(59, 115, 212, 0.10);
  --Blue-Alpha-05: rgba(59, 115, 212, 0.05);
  
  --Inverse-Alpha-90: rgba(23, 23, 25, 0.90);
  --Inverse-Alpha-80: rgba(23, 23, 25, 0.80);
  --Inverse-Alpha-70: rgba(23, 23, 25, 0.70);
  --Inverse-Alpha-60: rgba(23, 23, 25, 0.60);
  --Inverse-Alpha-50: rgba(23, 23, 25, 0.50);
  --Inverse-Alpha-40: rgba(23, 23, 25, 0.40);
  --Inverse-Alpha-30: rgba(23, 23, 25, 0.30);
  --Inverse-Alpha-20: rgba(23, 23, 25, 0.20);
  --Inverse-Alpha-10: rgba(23, 23, 25, 0.10);
  --Inverse-Alpha-05: rgba(23, 23, 25, 0.05);
  
  --Contrast-Alpha-90: rgba(255, 255, 255, 0.90);
  --Contrast-Alpha-80: rgba(255, 255, 255, 0.80);
  --Contrast-Alpha-70: rgba(255, 255, 255, 0.70);
  --Contrast-Alpha-60: rgba(255, 255, 255, 0.60);
  --Contrast-Alpha-50: rgba(255, 255, 255, 0.50);
  --Contrast-Alpha-40: rgba(255, 255, 255, 0.40);
  --Contrast-Alpha-30: rgba(255, 255, 255, 0.30);
  --Contrast-Alpha-20: rgba(255, 255, 255, 0.20);
  --Contrast-Alpha-10: rgba(255, 255, 255, 0.10);
  --Contrast-Alpha-05: rgba(255, 255, 255, 0.05);
  
  --Neutral-0:   #FFFFFF;
  --Neutral-5:   #F9F9FB;
  --Neutral-10:  #F0F1F4;
  --Neutral-20:  #E1E4E9;
  --Neutral-30:  #CCCFD7;
  --Neutral-40:  #9BA0AA;
  --Neutral-50:  #676D79;
  --Neutral-60:  #565A61;
  --Neutral-70:  #43464C;
  --Neutral-80:  #303236;
  --Neutral-90:  #26282C;
  --Neutral-95:  #161718;
  --Neutral-100: #000000;
  
  --White-Alpha-90: rgba(255, 255, 255, 0.90);
  --White-Alpha-80: rgba(255, 255, 255, 0.80);
  --White-Alpha-70: rgba(255, 255, 255, 0.70);
  --White-Alpha-60: rgba(255, 255, 255, 0.60);
  --White-Alpha-50: rgba(255, 255, 255, 0.50);
  --White-Alpha-40: rgba(255, 255, 255, 0.40);
  --White-Alpha-30: rgba(255, 255, 255, 0.30);
  --White-Alpha-20: rgba(255, 255, 255, 0.20);
  --White-Alpha-10: rgba(255, 255, 255, 0.10);
  --White-Alpha-05: rgba(255, 255, 255, 0.05);
  
  --Black-Alpha-90: rgba(28, 29, 32, 0.90);
  --Black-Alpha-80: rgba(28, 29, 32, 0.80);
  --Black-Alpha-70: rgba(28, 29, 32, 0.70);
  --Black-Alpha-60: rgba(28, 29, 32, 0.60);
  --Black-Alpha-50: rgba(28, 29, 32, 0.50);
  --Black-Alpha-40: rgba(28, 29, 32, 0.40);
  --Black-Alpha-30: rgba(28, 29, 32, 0.30);
  --Black-Alpha-20: rgba(28, 29, 32, 0.20);
  --Black-Alpha-10: rgba(28, 29, 32, 0.10);
  --Black-Alpha-05: rgba(28, 29, 32, 0.05);
  
  --Surface-Base: #111112;
  
  --Overlay-Selection: #2E2E30;
  --Overlay-Backdrop: rgba(48, 50, 54, 0.70);
  --Overlay-Double: rgba(38, 40, 44, 0.95);
  --Overlay-ImageScrim: rgba(48, 50, 54, 0.40);
  
  --Error: #D84048;
  --Error-Alpha-70: rgba(216, 64, 72, 0.70);
  --Error-Alpha-10: rgba(216, 64, 72, 0.10);
  --Error-Alpha-07: rgba(216, 64, 72, 0.07);
  --Error-Alpha-05: rgba(216, 64, 72, 0.05);
  
  --Success: #199B68;
  --Success-Alpha-10: rgba(25, 155, 104, 0.10);
  
  --Warning: #E07E28;
  --Warning-Alpha-10: rgba(224, 126, 40, 0.10);
  
  --Border-04: rgba(255, 255, 255, 0.04);
  --Border-08: rgba(255, 255, 255, 0.08);
  --Border-12: rgba(255, 255, 255, 0.12);
  
  --Avatar-Tomato:         #960000; /* 토마토 */
  --Avatar-Tangerine:      #AB3915; /* 귤 */
  --Avatar-Pumpkin:        #A74C00; /* 호박 */
  --Avatar-Mango:          #A76700; /* 망고 */
  --Avatar-Banana:         #AB861B; /* 바나나 */
  --Avatar-Chick:          #A0892D; /* 병아리 */
  --Avatar-Avocado:        #868D24; /* 아보카도 */
  --Avatar-Pistachio:      #577D2F; /* 피스타치오 */
  --Avatar-Basil:          #075A2F; /* 바질 */
  --Avatar-Eucalyptus:     #006A5F; /* 유칼립투스 */
  --Avatar-Sage:           #237F55; /* 세이지 */
  --Avatar-Peacock:        #026CA1; /* 공작 */
  --Avatar-Cobalt:         #2E5EAB; /* 코발트 */
  --Avatar-Blueberry:      #2C397F; /* 블루베리 */
  --Avatar-Lavender:       #555E8F; /* 라벤더 */
  --Avatar-Light-Purple:   #7D6E99; /* 연보라 */
  --Avatar-Amethyst:       #6F4A7A; /* 자수정 */
  --Avatar-Grape:          #631977; /* 포도 */
  --Avatar-Purple:         #790E3D; /* 자주 */
  --Avatar-Cherry-Blossom: #961343; /* 벚꽃 */
  --Avatar-Light-Pink:     #A25751; /* 연분홍 */
  --Avatar-Cocoa:          #553B32; /* 코코아 */
  --Avatar-Graphite:       #444444; /* 흑연 */
  --Avatar-Birch-Tree:     #756C63; /* 자작나무 */
  
  --Button-Control-fg:                  var(--Neutral-30);
  
  --Button-Primary-fg:                      var(--Neutral-0);
  --Button-Primary-fg-hover:                var(--Neutral-0);
  --Button-Primary-fg-selected:             var(--Primary-50);
  --Button-Primary-fg-disabled:             var(--Gray-5);
  
  --Button-Secondary-fg:                    var(--Gray-80);
  --Button-Secondary-fg-hover:              var(--Gray-95);
  --Button-Secondary-fg-selected:           var(--Gray-95);
  --Button-Secondary-fg-disabled:           var(--Gray-30);
  
  --Button-Secondary-theme-fg:              var(--Primary-50);
  --Button-Secondary-theme-fg-hover:        var(--Primary-55);
  --Button-Secondary-theme-fg-selected:     var(--Primary-55);
  --Button-Secondary-theme-fg-disabled:     var(--Gray-30);
  
  --Button-Tertiary-fg:                     var(--Gray-60);
  --Button-Tertiary-fg-hover:               var(--Gray-80);
  --Button-Tertiary-fg-selected:            var(--Gray-80);
  --Button-Tertiary-fg-disabled:            var(--Gray-30);
  
  --Button-Tertiary-theme-fg:               var(--Primary-40);
  --Button-Tertiary-theme-fg-hover:         var(--Primary-50);
  --Button-Tertiary-theme-fg-selected:      var(--Primary-50);
  --Button-Tertiary-theme-fg-disabled:      var(--Gray-30);

  --Roll-Book-Absent:        var(--Error);
  --Roll-Book-Late:          #AF5622;
  --Roll-Book-Attend:        #0E7E5D;
  --Roll-Book-Online:        #246CA8;
  --Roll-Book-Offline:       #A84768;
  --Roll-Book-Cancellation:  #606F7E;
  --Roll-Book-Approved:      #188191;
  --Roll-Book-Supplementary: #7448A4;
  --Roll-Book-Supplementary-Alpha-10: rgba(116, 72, 164, 0.10);
  --Roll-Book-Supplementary-Alpha-05: rgba(116, 72, 164, 0.05);
  
  --Shadow-depth-01: rgba(0, 0, 0, 0.24);
  --Shadow-depth-02: rgba(0, 0, 0, 0.32);
  --Shadow-focus:    rgba(45, 107, 179, 0.25);
  --Shadow-error:    rgba(216, 64, 72, 0.25);
  
  --Chart-Lecture-Weeks:           #C3494A;
  --Chart-Lecture-Material:        #C3AE35;
  --Chart-Zoom:                    #C38553;
  --Chart-Report1:                 #61AD6E;
  --Chart-Report2:                 #128962;
  --Chart-Discuss1:                #715DB0;
  --Chart-Test1:                   #233E80;
  --Chart-Test2:                   #1866A8;
  --Chart-Test3:                   #20A0A7;
  --Chart-Clicker:                 #C77F8D;
  --Chart-Survey:                  #6886D1;
  --Chart-Attend:                  #377EC1;
  
  --Chart-GroupColor-swatch-01:    var(--Gray-0);
  --Chart-GroupColor-swatch-02:    var(--Contrast-Alpha-10);
  --Chart-GroupColor-swatch-03:    rgba(195, 73, 74, 0.50);
  --Chart-GroupColor-swatch-04:    rgba(195, 133, 83, 0.50);
  --Chart-GroupColor-swatch-05:    rgba(195, 174, 53, 0.50);
  --Chart-GroupColor-swatch-06:    rgba(123, 137, 30, 0.50);
  --Chart-GroupColor-swatch-07:    rgba(97, 173, 110, 0.50);
  --Chart-GroupColor-swatch-08:    rgba(18, 137, 98, 0.50);
  --Chart-GroupColor-swatch-09:    rgba(32, 160, 167, 0.50);
  --Chart-GroupColor-swatch-10:    rgba(24, 102, 168, 0.50);
  --Chart-GroupColor-swatch-11:    rgba(104, 134, 209, 0.50);
  --Chart-GroupColor-swatch-12:    rgba(113, 93, 176, 0.50);
  --Chart-GroupColor-swatch-13:    rgba(199, 127, 141, 0.50);
  --Chart-GroupColor-swatch-14:    rgba(121, 75, 16, 0.50);
  --Chart-GroupColor-swatch-15:    rgba(35, 62, 128, 0.50);
  
  --Chart-GroupColor-bg-01:        var(--Gray-0);
  --Chart-GroupColor-bg-02:        var(--Contrast-Alpha-05);
  --Chart-GroupColor-bg-03:        rgba(195, 73, 74, 0.16);
  --Chart-GroupColor-bg-04:        rgba(195, 133, 83, 0.16);
  --Chart-GroupColor-bg-05:        rgba(195, 174, 53, 0.16);
  --Chart-GroupColor-bg-06:        rgba(123, 137, 30, 0.16);
  --Chart-GroupColor-bg-07:        rgba(97, 173, 110, 0.16);
  --Chart-GroupColor-bg-08:        rgba(18, 137, 98, 0.16);
  --Chart-GroupColor-bg-09:        rgba(32, 160, 167, 0.16);
  --Chart-GroupColor-bg-10:        rgba(24, 102, 168, 0.16);
  --Chart-GroupColor-bg-11:        rgba(104, 134, 209, 0.16);
  --Chart-GroupColor-bg-12:        rgba(113, 93, 176, 0.16);
  --Chart-GroupColor-bg-13:        rgba(199, 127, 141, 0.16);
  --Chart-GroupColor-bg-14:        rgba(121, 75, 16, 0.16);
  --Chart-GroupColor-bg-15:        rgba(35, 62, 128, 0.16);
  
  --Percent-Blue:          #1B70C4;
  --Percent-Blue-Alpha-80: rgba(27, 112, 196, 0.80);
  --Percent-Blue-Alpha-60: rgba(27, 112, 196, 0.60);
  --Percent-Blue-Alpha-40: rgba(27, 112, 196, 0.40);
  --Percent-Blue-Alpha-20: rgba(27, 112, 196, 0.20);
  --Percent-Heatmap-100:   #303D57; /* 91~100% */
  --Percent-Heatmap-90:    #2D4452; /* 81~90% */
  --Percent-Heatmap-80:    #2AA4A4; /* 71~80% */
  --Percent-Heatmap-70:    #2F524B; /* 61~70% */
  --Percent-Heatmap-60:    #2F523E; /* 51~60% */
  --Percent-Heatmap-50:    #344D38; /* 41~50% */
  --Percent-Heatmap-40:    #3C4F3C; /* 31~40% */
  --Percent-Heatmap-30:    #495742; /* 21~30% */
  --Percent-Heatmap-20:    #575E48; /* 11~20% */
  --Percent-Heatmap-10:    #68654B; /* 0~10% */
  
  --Footer-bg: var(--Gray-5);
  --Background-Hidden: var(--White-Alpha-05);
  
  --Icon-Yellow: #D9A526;
  
  --Table-Deep-Header-bg:      var(--Gray-10);
  --Table-Deep-Header-fg:      var(--Gray-80);
  --Table-Deep-Header-border:  var(--Gray-5);
  --Table-Pale-Header-bg:      var(--Gray-5);
  --Table-Pale-Header-fg:      var(--Gray-70);
  --Table-Pale-Header-border:  var(--Gray-20);
  --Table-Pale-Header-topline: var(--Gray-40);
  
  --Text-Primary:               var(--Gray-90);
  --Text-Primary-strong:        var(--Gray-100);
  --Text-Primary-subtle:        var(--Gray-80);
  --Text-Secondary:             var(--Gray-70);
  --Text-Secondary-hover:       var(--Gray-80);
  --Text-Tertiary:              var(--Gray-60);
  --Text-Tertiary-hover:        var(--Gray-70);
  --Text-Quaternary:            var(--Gray-50);
  --Text-Disabled:              var(--Gray-40);
  --Text-Placeholder:           var(--Gray-30);
  --Text-Theme:                 var(--Primary-50);
  --Text-Theme-hover:           var(--Primary-60);
  --Text-Theme-subtle:          var(--Primary-40);
  --Text-Theme-strong:          var(--Primary-70);
  
  --btn-tertiary-bg: #303033;
  --btn-tertiary-bg-hover: #3E3E42;
}