1차 커밋

assets/css/_mixin.scss

@@ -0,0 +1,700 @@
+// variable
+$ui_blue: #024294;
+$ui_blue_hover: #0155BD;
+$ui_blue_more: #0068E6;
+$ui_blue_more80: rgba($color:$ui_blue_more, $alpha: 0.8);
+$ui_blue_more60: rgba($color:$ui_blue_more, $alpha: 0.6);
+$ui_blue_more50: rgba($color:$ui_blue_more, $alpha: 0.5);
+$ui_blue_more40: rgba($color:$ui_blue_more, $alpha: 0.4);
+$ui_blue_more30: rgba($color:$ui_blue_more, $alpha: 0.3);
+$ui_blue_more20: rgba($color:$ui_blue_more, $alpha: 0.2);
+$ui_blue_more12: rgba($color:$ui_blue_more, $alpha: 0.12);
+$ui_blue_more06: rgba($color:$ui_blue_more, $alpha: 0.06);
+$ui_sky: #27D4FF;
+$ui_sky80: rgba($color:$ui_sky, $alpha: 0.8);
+$ui_sky60: rgba($color:$ui_sky, $alpha: 0.6);
+$ui_sky50: rgba($color:$ui_sky, $alpha: 0.5);
+$ui_sky40: rgba($color:$ui_sky, $alpha: 0.4);
+$ui_sky30: rgba($color:$ui_sky, $alpha: 0.3);
+$ui_sky20: rgba($color:$ui_sky, $alpha: 0.2);
+$ui_sky12: rgba($color:$ui_sky, $alpha: 0.12);
+$ui_sky06: rgba($color:$ui_sky, $alpha: 0.06);
+$bg_cluster: rgba(0, 104, 230, 1);
+$fc_normal: #338FFF;
+$fc_normal_more40: rgba($color:$fc_normal, $alpha: 0.4);
+$fc_purple: #937EFF;
+$fc_green: #16D9AB;
+$fc_light_green: #00FF00;
+$fc_code_green:#1CAF93;
+$fc_card_green:#1CBD6D;
+$fc_yellow: #FFE043;
+$fc_yellow_04: #FFBC04;
+$fc_succeses: #00BD78;
+$fc_error: #D60000;
+$bg_default:rgb(10, 11, 20);
+$bg_default04:rgba(10, 11, 20, 0.4);
+$bg_guide: rgb(5, 10, 25);
+$bg_sky30: rgba(39, 212, 255, 0.3);
+$bg_black00: #000;
+$bg_black100: rgba(0, 0, 0, 1);
+$bg_blackde: rgba(0, 0, 0, 0.871);
+$bg_black87: rgba(0, 0, 0, 0.87);
+$bg_blackcc: rgba(0, 0, 0, 0.8);
+$bg_black99: rgba(0, 0, 0, 0.6);
+$bg_black60: rgba(0, 0, 0, 0.6);
+$bg_black40: rgba(0, 0, 0, 0.4);
+$bg_black30: rgba(0, 0, 0, 0.3);
+$bg_black20: rgba(0, 0, 0, 0.2);
+$bg_black16: rgba(0, 0, 0, 0.16);
+$bg_black12: rgba(0, 0, 0, 0.12);
+$bg_black06: rgba(0, 0, 0, 0.06);
+$bg_greye0: #DCDDE0;
+$bg_greyf5: #F0F1F5;
+$bg_grey90: rgba(255, 255, 255, 0.9);
+$bg_greyDE: rgba(255, 255, 255, 0.871);
+$bg_grey87: rgba(255, 255, 255, 0.87);
+$bg_grey80: rgba(255, 255, 255, 0.8);
+$bg_grey99: rgba(255, 255, 255, 0.6);
+$bg_grey60: rgba(255, 255, 255, 0.6);
+$bg_grey50: rgba(255, 255, 255, 0.5);
+$bg_grey40: rgba(255, 255, 255, 0.4);
+$bg_grey38: rgba(255, 255, 255, 0.38);
+$bg_grey30: rgba(255, 255, 255, 0.3);
+$bg_grey20: rgba(255, 255, 255, 0.2);
+$bg_grey16: rgba(255, 255, 255, 0.16);
+$bg_grey12: rgba(255, 255, 255, 0.12);
+$bg_grey10: rgba(255, 255, 255, 0.1);
+$bg_grey06: rgba(255, 255, 255, 0.06);
+$bg_grey00: rgba(255, 255, 255, 0.00);
+$bg_error: #FF1F55;
+$fc_white: #ffffff;
+$fc_999: #999999;
+$fc_222: #222222;
+$fc_default: rgba(255, 255, 255, 0.87);
+
+//basic
+@mixin bold {font-weight: bold !important;}
+@mixin clear {&::after{content:"";display:block;clear:both;}}
+
+//flex*-/**-
+@mixin dflx{
+    display: flex;
+}
+@mixin dflx_as {
+    display: flex;
+    align-items: flex-start;
+}
+@mixin dflx_ac {
+    display: flex;
+    align-items: center;
+}
+@mixin dflx_ae {
+    display: flex;
+    align-items: flex-end;
+}
+@mixin dflx_jbet {
+    display: flex;
+    justify-content: space-between;
+}
+@mixin dflx_jstart{
+    display: flex;
+    justify-content: flex-start;
+}
+@mixin dflx_jcent{
+    display: flex;
+    justify-content: center;
+}
+@mixin dflx_jend{
+    display: flex;
+    justify-content: flex-end;
+}
+@mixin dflx_ac_jcent{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+@mixin dflx_ae_jcent {
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+}
+@mixin dflx_as_jbet {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+}
+@mixin dflx_ac_jbet {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+@mixin dflx_ae_jbet {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+}
+@mixin dflx_ac_jend {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+}
+@mixin flx_wrap {
+    flex-wrap: wrap;
+}
+@mixin flx_nowrap {
+    flex-wrap: nowrap;
+}
+@mixin dflx_dcol_jbet {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+}
+
+//font
+@mixin fm_spoqa {
+    font-family: 'Spoqa Han Sans Neo', sans-serif;
+}
+@mixin fs_40_bold {
+    font-size: 2.5rem;
+    font-weight: 700;
+}
+@mixin fs_40_medium {
+    font-size: 2.5rem;
+    font-weight: 500;
+}
+@mixin fs_28_bold {
+    font-size: 1.75rem;
+    font-weight: 700;
+}
+@mixin fs_24_bold {
+    font-size: 1.5rem;
+    font-weight: 700;
+}
+@mixin fs_24_medium {
+    font-size: 1.5rem;
+    font-weight: 500;
+}
+@mixin fs_20_bold {
+    font-size: 1.25rem;
+    font-weight: 700;
+}
+@mixin fs_20_medium {
+    font-size: 1.25rem;
+    font-weight: 500;
+}
+@mixin fs_18_bold {
+    font-size: 1.125rem;
+    font-weight: 700;
+}
+@mixin fs_18_medium {
+    font-size: 1.125rem;
+    font-weight: 500;
+}
+@mixin fs_16_bold {
+    font-size: 1rem;
+    font-weight: 700;
+}
+@mixin fs_16_medium {
+    font-size: 1rem;
+    font-weight: 500;
+}
+@mixin fs_16_regular {
+    font-size: 1rem;
+    font-weight: 400;
+}
+@mixin fs_16_light {
+    font-size: 1rem;
+    font-weight: 300;
+}
+@mixin fs_15_medium {
+    font-size: 0.9375rem;
+    font-weight: 500;
+}
+@mixin fs_15_regular {
+    font-size: 0.9375rem;
+    font-weight: 400;
+}
+@mixin fs_14_bold {
+    font-size: 0.875rem;
+    font-weight: 700;
+}
+@mixin fs_14_medium {
+    font-size: 0.875rem;
+    font-weight: 500;
+}
+@mixin fs_14_regular {
+    font-size: 0.875rem;
+    font-weight: 400;
+}
+@mixin fs_14_light {
+    font-size: 0.875rem;
+    font-weight: 300;
+}
+@mixin fs_13_medium {
+    font-size: 0.8125rem;
+    font-weight: 500;
+}
+@mixin fs_13_regular {
+    font-size: 0.8125rem;
+    font-weight: 400;
+}
+@mixin fs_13_light {
+    font-size: 0.8125rem;
+    font-weight: 300;
+}
+@mixin fs_12_bold {
+    font-size: 0.75rem !important;
+    font-weight: 700 !important;
+}
+@mixin fs_12_medium {
+    font-size: 0.75rem !important;
+    font-weight: 500 !important;
+}
+@mixin fs_12_regular {
+    font-size: 0.75rem;
+    font-weight: 400;
+}
+@mixin fs_12_light {
+    font-size: 0.75rem;
+    font-weight: 300;
+}
+@mixin fs_11_medium {
+    font-size: 0.6875rem;
+    font-weight: 500;
+}
+@mixin fs_11_regular {
+    font-size: 0.6875rem;
+    font-weight: 400;
+}
+@mixin fs_11_light {
+    font-size: 0.6875rem;
+    font-weight: 300;
+}
+@mixin fs_10_regular {
+    font-size: 0.625rem;
+    font-weight: 400;
+}
+
+// button
+@mixin button_options ($width: auto, $fontSize: 8px){
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: $width;
+    padding: 0.125rem 0.75rem 0;
+    -webkit-border-radius: 8px;
+    -moz-border-radius: 8px;
+    border-radius: 8px;
+    font-size: $fontSize;
+}
+
+@mixin button_primary {
+    @include button_options;
+    background: var(--PRI);
+    color: var(--white-w_100);
+    border-radius: 8px;
+    &:hover:not(.selected):not(.disabled), &.selected, &.hover {
+       
+    }
+    &.disabled {
+        background: var(--white-w_12);
+        box-shadow: inset 0 0 0.75rem rgba(255, 255, 255, 0.1);
+        color: var(--white-w_20);
+    }
+}
+
+@mixin button_secondary {
+    @include button_options;
+    background: transparent;
+    color: var(--PRI);
+    border: 1px solid var(--PRI);
+    border-radius: 8px;
+
+    &:hover,&.hover {
+        background: var(--white-w_16);
+    }
+    // &.selected {
+    //     background: var(--btn-btn_selected);
+    //     color: var(--white-w_100);
+    // }
+    &.disabled {
+        background: var(--white-w_12);
+        border: 1px solid rgba(255, 255, 255, 0.20);
+        color: var(--white-w_20);
+    }
+}
+
+@mixin button_line {
+    @include button_options;
+    background: transparent;
+    color: var(--white-w_87-sec);
+    border: 1px solid rgba(255, 255, 255, 0.20);
+    border-radius: 8px;
+    &:hover,&.hover {
+        background: var(--white-w_16);
+    }
+    // &.selected {
+    //     background: var(--btn-btn_selected);
+    //     color: var(--white-w_100);
+    // }
+    &.disabled {
+        background: var(--white-w_12);
+        color: var(--white-w_20);
+    }
+}
+
+@mixin button_floating {
+    @include button_options;
+    @include backFilter;
+    @include box_shadow16;
+    background: var(--bg_01_80);
+    border: 0.063rem solid var(--line-pri_40-to-wh_40);
+    color: var(--white-w_100-sec);
+    &:hover:not(.selected):not(.card_selected):not(.hover):not(.disabled), &.hover {
+        background: var(--btn-btn_hover);
+        border: none;
+        box-shadow: inset 0 0 0.75rem rgba(39, 212, 255, 0.5);
+        color: var(--white-w_100);
+    }
+    &.selected{
+        background: var(--btn-btn_default);
+        border: none;
+        box-shadow: inset 0 0 0.75rem #0476FF;
+        color: var(--white-w_100);
+    }
+    &.card_selected{
+        background: var(--tab-btn_default);
+        border: none;
+        box-shadow: inset 0 0 0.75rem #0476FF;
+        color: var(--white-w_100);
+    }
+    &.disabled {
+        background: var(--bg_01_80);
+        border: 0.063rem solid var(--line-wh_12-to-100);
+        box-shadow: none;
+        color: var(--white-w_20);
+    }
+}
+
+@mixin button_ffb {
+    @include button_options;
+    //@include backFilter;
+    @include box_shadow16;
+    @include fs_14_medium;
+    background: var(--bg_01_80);
+    border: 0.063rem solid var(--line-wh_12-to-40);
+    color: var(--white-w_87);
+    &:hover:not(.selected):not(.disabled),&.hover {
+        background: var(--primary-pri_12);
+        color: var(--primary-pri_100);
+        border: 0.063rem solid var(--line-wh_12-to-40);
+        font-weight: 700;
+    }
+    &.selected {
+        background: var(--primary-pri_20);
+        border: 0.063rem solid var(--line-wh_12-to-40);
+        color: var(--primary-pri_100);
+        font-weight: 700;
+    }
+    &.disabled {
+        background: var(--bg_01_40);
+        border: 0.063rem solid var(--white-w_12);
+        color: var(--white-w_20);
+    }
+}
+
+@mixin button_ghost {
+    @include button_options;
+    @include backFilter;
+    &:hover {
+        background: $bg_grey06;
+    }
+    &.selected{
+        background: transparent;
+        color: $ui_sky;
+    }
+    &.disabled {
+        background: transparent;
+        color: $bg_grey38;
+    }
+}
+
+@mixin button_default {
+    @include border_radius02;
+    height: 1.5rem;
+}
+
+@mixin button_outline {
+    @include border_radius02;
+    height: 1.5rem;
+    border: 0.063rem solid #CBCBCB;
+}
+
+//etc
+@mixin input_type {
+    @include border_radius04;
+    height: 3rem;
+    padding: 0 1rem;
+}
+
+@mixin search_type {
+    @include border_radius04;
+    height: 2rem;
+    padding: 0 1rem;
+}
+
+@mixin form_outline {
+    @include border_radius05;
+    border: 0.063rem solid #DDDDDD;
+    box-shadow: 0.063rem 0.063rem 0.75rem #00000029;
+    background: $ui_blue;
+}
+
+@mixin mouseover_bg($border: 0.125rem, $speed: 0.2s, $shadow: 0 0.375rem 0.75rem #00000029) {
+    border: $border solid #0068E6;
+    background: #0068E61A 0% 0% no-repeat padding-box;
+    box-shadow: $shadow;
+    transition: ease-in $speed;
+}
+
+@mixin backFilter($blur: 1.875rem){
+    -webkit-backdrop-filter: blur($blur);
+    backdrop-filter: blur($blur);
+}
+
+@mixin backFilter_none {
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+}
+
+@mixin border_radius50 {
+    -webkit-border-radius: 50%;
+    -moz-border-radius: 50%;
+    border-radius: 50%;
+}
+
+@mixin border_radius10 {
+    -webkit-border-radius: 0.625rem;
+    -moz-border-radius: 0.625rem;
+    border-radius: 0.625rem;
+}
+
+@mixin border_radius06 {
+    -webkit-border-radius: 0.375rem;
+    -moz-border-radius: 0.375rem;
+    border-radius: 0.375rem;
+}
+
+@mixin border_radius05 {
+    -webkit-border-radius: 0.3125rem;
+    -moz-border-radius: 0.3125rem;
+    border-radius: 0.3125rem;
+}
+
+@mixin border_radius04 {
+    -webkit-border-radius: 0.25rem;
+    -moz-border-radius: 0.25rem;
+    border-radius: 0.25rem;
+}
+
+@mixin border_radius03 {
+    -webkit-border-radius: 0.1875rem;
+    -moz-border-radius: 0.1875rem;
+    border-radius: 0.1875rem;
+}
+
+@mixin border_radius02 {
+    -webkit-border-radius: 0.125rem;
+    -moz-border-radius: 0.125rem;
+    border-radius: 0.125rem;
+}
+
+@mixin border_radius00 {
+    -webkit-border-radius: 0;
+    -moz-border-radius: 0;
+    border-radius: 0;
+}
+
+@mixin selector_el {
+    position: absolute;
+    content: '';
+}
+
+@mixin layout_acjc {
+    align-items: center;
+    justify-content: center;
+}
+
+@mixin layout_acjb {
+    align-items: center;
+    justify-content: space-between;
+}
+
+@mixin row_box {
+    width: 66.875rem;
+    max-width: 66.875rem;
+    margin: 0 auto;
+}
+
+@mixin bg_blur30 {
+    backdrop-filter: blur(1.875rem);
+}
+
+@mixin bg_blur20 {
+    backdrop-filter: blur(1.25rem);
+}
+
+@mixin bg_blur10 {
+    backdrop-filter: blur(0.625rem);
+}
+
+// shadow
+@mixin box_shadow16 {
+    box-shadow: 0.25rem 0.25rem 1rem 0 rgba(4, 9, 26, 0.16);
+}
+
+@mixin popup_shadow {
+    box-shadow: 0.75rem 0.75rem 1.5rem 0 rgba(4, 9, 26, 0.20);
+}
+
+//trans_center
+@mixin ab_trans_center {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
+
+//text_overflow
+@mixin txt_ellip {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+//box
+@mixin box1 {
+    width: 100%;
+    background-color: var(--bg_01_80);
+    border: 0.063rem solid var(--line-pri_40-to-wh_40);
+    backdrop-filter: blur(1.875rem);
+}
+
+@mixin dashbox {
+    width: 100%;
+    padding: 0.75rem;
+    overflow: hidden;
+    background: rgba(255, 255, 255, 0.08);
+    border-radius: 0.125rem;
+}
+
+@mixin square {
+    display: inline-block;
+    width: 0.625rem;
+    height: 0.625rem;
+    background-color: $ui_blue_more;
+}
+
+//btn
+@mixin btn {
+    //background-color: #0068e6;
+    background-color: rgba(0, 104, 230, 0.6);
+    box-shadow: 0 0 0.75rem 0 inset #0068e6;
+    border-radius:0.1875rem;
+    &:hover {
+        background: #0155BD;
+        box-shadow: inset 0 0 0.75rem rgba(39, 212, 255, 0.5);
+    }
+}
+
+//tod
+@mixin tod_contain{
+    display: grid;
+    grid-template-columns: 5rem auto;
+    grid-auto-rows: minmax(3.375rem, auto);
+    gap: 0.125rem;
+}
+
+@mixin tod_block {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    padding:0.125rem;
+    background: rgba(255, 255, 255, 0.06);
+    line-height: 1;
+    letter-spacing: 0.038rem;
+    text-align: center;
+}
+
+//circle
+@mixin circle28{
+    @include dflx_ac_jcent;
+    width: 1.75rem;
+    height: 1.75rem;
+    overflow: hidden;
+    border-radius: 100%;
+    + .word{
+        @include fs_12_regular;
+    }
+}
+
+@mixin circle32{
+    @include dflx_ac_jcent;
+    width: 2rem;
+    height: 2rem;
+    overflow: hidden;
+    border-radius: 100%;
+    + .word{
+        @include fs_14_regular;
+    }
+}
+
+// label
+@mixin numberDefault($width: 1rem, $height: 1rem, $fs: 0.875rem){
+    width: $width;
+    height: $height;
+    font-size: $fs;
+    line-height: $height;
+}
+
+// position
+@mixin absolutePos{
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+//backdrop-filter solve
+@mixin backFilter_solve{
+    &::before{
+        content: '';
+        z-index: -1;
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        backdrop-filter: blur(1.875rem);
+    }
+}
+
+//filter
+@mixin filter_black {
+    filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
+}
+@mixin filter_blue {
+    filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%);
+}
+@mixin filter_black01 {
+    filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(150deg) brightness(101%) contrast(102%);
+}
+@mixin filter_grey {
+    filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%);
+}
+@mixin filter_white {
+    filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%);
+}

assets/css/font.css

@@ -0,0 +1,47 @@
+@charset "utf-8";
+
+@font-face {
+    font-family: 'Spoqa Han Sans Neo';
+    font-weight: 700;
+    src: local('Spoqa Han Sans Neo Bold'),
+    url('../fonts/SpoqaHanSansNeo-Bold.woff2') format('woff2'),
+    url('../fonts/SpoqaHanSansNeo-Bold.woff') format('woff'),
+    url('../fonts/SpoqaHanSansNeo-Bold.ttf') format('truetype');
+}
+
+
+@font-face {
+    font-family: 'Spoqa Han Sans Neo';
+    font-weight: 500;
+    src: local('Spoqa Han Sans Neo Medium'),
+    url('../fonts/SpoqaHanSansNeo-Medium.woff2') format('woff2'),
+    url('../fonts/SpoqaHanSansNeo-Medium.woff') format('woff'),
+    url('../fonts/SpoqaHanSansNeo-Medium.ttf') format('truetype');
+}
+
+@font-face {
+    font-family: 'Spoqa Han Sans Neo';
+    font-weight: 400;
+    src: local('Spoqa Han Sans Neo Regular'),
+    url('../fonts/SpoqaHanSansNeo-Regular.woff2') format('woff2'),
+    url('../fonts/SpoqaHanSansNeo-Regular.woff') format('woff'),
+    url('../fonts/SpoqaHanSansNeo-Regular.ttf') format('truetype');
+}
+
+@font-face {
+    font-family: 'Spoqa Han Sans Neo';
+    font-weight: 300;
+    src: local('Spoqa Han Sans Neo Light'),
+    url('../fonts/SpoqaHanSansNeo-Light.woff2') format('woff2'),
+    url('../fonts/SpoqaHanSansNeo-Light.woff') format('woff'),
+    url('../fonts/SpoqaHanSansNeo-Light.ttf') format('truetype');
+}
+
+@font-face {
+    font-family: 'Spoqa Han Sans Neo';
+    font-weight: 100;
+    src: local('Spoqa Han Sans Neo Thin'),
+    url('../fonts/SpoqaHanSansNeo-Thin.woff2') format('woff2'),
+    url('../fonts/SpoqaHanSansNeo-Thin.woff') format('woff'),
+    url('../fonts/SpoqaHanSansNeo-Thin.ttf') format('truetype');
+}

assets/css/reset.css

@@ -0,0 +1,20 @@
+*{box-sizing: border-box;}
+body,html{font-size:1rem}
+header, footer, main, article,blockquote,body,button,code,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,pre,select,span,td,textarea,th,ul{margin:0;padding:0;font-family:'Spoqa Han Sans Neo', 'sans-serif';line-height:1;}
+fieldset,img{border:0 none}
+img{max-width: 100%;vertical-align: top}
+dl,li,menu,ol,ul{list-style:none}
+blockquote,q{quotes:none}
+blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}
+button,input,select,textarea{vertical-align:middle;border:none; outline:none;background:0 0}
+body{-webkit-text-size-adjust:none}
+table{border-collapse:collapse;border-spacing:0;}
+input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}
+a{color:#fff;text-decoration:none; cursor: pointer;}
+a:active,a:hover{text-decoration:none}
+address,caption,cite,code,dfn,em,var{font-style:normal;font-weight:400}
+.hidden_tag{display:inline-block;position:absolute;z-index:-1;width:1px;height:1px;overflow:hidden;border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%)}
+body{min-height: 100vh; overflow-x:hidden;padding:0;margin:0;border:0;text-align:unset;}
+ul{list-style:none;margin-top:0;margin-bottom:1rem;padding-left:2rem}
+li,ul{list-style:none;margin:0;padding:0;border:0;font-size:100%;}
+button{margin:0;padding:0;border:0;font-size:100%;cursor:pointer;background-color:transparent;line-height:1;word-break:keep-all;}

assets/js/common.js

@@ -0,0 +1,26 @@
+// window.onload = function(){
+//     document.documentElement.dataset.theme='dark';
+// };
+
+// light-dark mode 클릭
+if(document.querySelector('.lightmode')){
+
+    if(localStorage.getItem("lightmode") == 'on'){
+        document.documentElement.dataset.theme='light';
+        document.querySelector('#toggle-radio-light').checked = true;
+    }
+
+    //이벤트 클릭
+    document.querySelector('.lightmode').addEventListener("click", e=>{
+        if(e.target.classList.contains('tolight')){
+            document.documentElement.dataset.theme='light';
+            localStorage.setItem("lightmode", "on");
+        }else if(e.target.classList.contains('todark')){
+            document.documentElement.dataset.theme='dark';
+            localStorage.setItem("lightmode", "off");
+        }
+    },false);
+
+}else{
+    localStorage.removeItem("lightmode");
+}

pages/Button.html

@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+<meta charset="utf-8">
+<title>KISA</title>
+<meta name="keywords" content="KISA" />
+<meta name="author" content="KISA" />
+<meta name="descripption" content="KISA" />
+<link rel="shortcut icon" href="../assets/images/favicon.ico" />
+<link rel="stylesheet" type="text/css" href="../assets/css/index.css" />
+<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.0/css/all.css" />
+</head>
+<body>
+  
+    <div class="guide_back">
+        <div class="guide_wrap two_line">
+            <header class="two_line">
+                <article class="header_in">
+                    <div class="header_left">
+                        <h1 class="header_logo">
+                            <a href="../template/Main.html">
+                                <span class="sp_logo_uniplus"></span>
+                            </a>
+                        </h1>
+                    </div>
+                    <nav class="gnb two_line w500">
+                        <ul class="col_gap40 w500">
+                            <li>
+                                <a href="Button.html" class="on">Button</a>
+                            </li>
+                            <li class="m-t-36">
+                                <div class="lightmode">
+                                    <div class="inner">
+                                        <input type="radio" name="toggle" id="toggle-radio-light" />
+                                        <label for="toggle-radio-light" class="tolight">
+                                            <i class="fas fa-sun tolight"></i>
+                                        </label>
+                                        <input type="radio" name="toggle" id="toggle-radio-dark" checked />
+                                        <label for="toggle-radio-dark" class="todark">
+                                            <i class="fas fa-moon todark"></i>
+                                        </label>
+                                    </div>
+                                </div>
+                            </li>
+                        </ul>
+                    </nav>
+                </article>
+            </header>
+            
+            <div class="guide_center width1720">
+                <article class="guide_top">
+                    <h1>Button</h1>
+                </article>
+
+                <article class="Gr_contents m-t-100">
+                    <section class="comp_conts">
+                        <dl class="comp_dl m-0">
+                            <dt class="comp_dt w120 m-r-100">Box</dt>
+                            <dd class="comp_dd">
+                                <div class="compline m-b-20">
+                                    <div class="components">
+                                        <button class="btn_primary btn_l w160" type="button">Button</button>
+                                        <button class="btn_primary btn_l w160 disabled" type="button">Button</button>
+                                        <button class="btn_primary btn_l w160 disabled" type="button">Button</button>
+                                    </div>
+                                </div>
+
+                                <div class="compline m-b-20">
+                                    <div class="components">
+                                        <button class="btn_secondary btn_l w160" type="button">Button</button>
+                                        <button class="btn_secondary btn_l w160 disabled" type="button">Button</button>
+                                        <button class="btn_secondary btn_l w160 disabled" type="button">Button</button>
+                                    </div>
+                                </div>
+
+                                <div class="compline">
+                                    <div class="components">
+                                        <button class="btn_line btn_l w160" type="button">Button</button>
+                                        <button class="btn_line btn_l disabled w160" type="button">Button</button>
+                                        <button class="btn_line btn_l disabled w160" type="button">Button</button>
+                                    </div>
+                                </div>
+                            </dd>
+                        </dl>
+                    </section>
+
+                    <section class="comp_conts m-t-50">
+                        <dl class="comp_dl m-0">
+                            <dt class="comp_dt w120 m-r-100"></dt>
+                            <dd class="comp_dd">
+                                <div class="compline m-b-20">
+                                    <div class="components">
+                                        <button class="btn_primary btn_l" type="button">Button</button>
+                                    </div>
+                                </div>
+
+                                <div class="compline m-b-20">
+                                    <div class="components">
+                                        <button class="btn_secondary btn_l" type="button">Button</button>
+                                    </div>
+                                </div>
+
+                                <div class="compline">
+                                    <div class="components">
+                                        <button class="btn_line btn_l" type="button">Button</button>
+                                    </div>
+                                </div>
+                            </dd>
+                        </dl>
+                    </section>
+
+                    <section class="comp_conts m-t-50">
+                        <dl class="comp_dl m-0">
+                            <dt class="comp_dt w120 m-r-100"></dt>
+                            <dd class="comp_dd">
+                                <div class="compline m-b-20">
+                                    <div class="components">
+                                        <button class="btn_primary btn_l" type="button">Button</button>
+                                    </div>
+                                </div>
+
+                                <div class="compline m-b-20">
+                                    <div class="components">
+                                        <button class="btn_secondary btn_l" type="button">Button</button>
+                                    </div>
+                                </div>
+
+                                <div class="compline">
+                                    <div class="components">
+                                        <button class="btn_line btn_l" type="button">Button</button>
+                                    </div>
+                                </div>
+                            </dd>
+                        </dl>
+                    </section>
+                </article>
+
+            </div>
+        </div>
+    </div>
+
+    <script type="text/javascript" src="../assets/js/jquery.min.js"></script>
+    <script type="text/javascript" src="../assets/js/common.js"></script>
+    <script>
+        $('.ch_radio').click(function(){
+            $('.ch_radio').removeClass('on');
+            $(this).addClass('on');
+        });
+    </script>
+</body>
+</html>