dhi-class-website/public/style.scss

@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}

// ─── Design Tokens ────────────────────────────────────────────────────────────
$accent:       #FF4B00;
$accent-light: rgba(255, 75, 0, 0.08);

$black:  #0A0A0A;
$gray-9: #1A1A1A;
$gray-7: #4A4A4A;
$gray-5: #888888;
$gray-3: #C8C8C8;
$gray-1: #F0F0F0;
$white:  #FFFFFF;

$grid-line: rgba(0, 0, 0, 0.08);

$small_margin:  10px;
$big_margin:    25px;
$nav_width:     400px;
$header_height: 60px;

// ─── Grid Background Mixin ────────────────────────────────────────────────────
@mixin grid-bg($size: 28px, $color: $grid-line) {
    background-image:
        linear-gradient(to right, $color 1px, transparent 1px),
        linear-gradient(to bottom, $color 1px, transparent 1px);
    background-size: $size $size;
}

// ─── Reset ────────────────────────────────────────────────────────────────────
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

// ─── Body ─────────────────────────────────────────────────────────────────────
body {
    width: 100%;
    height: 100vh;
    font-family: "GMarketSans", serif;
    display: flex;
    flex-direction: column;
    gap: $small_margin;
    background-color: $gray-1;
    @include grid-bg(28px, rgba(0,0,0,0.06));
    color: $black;
}

// ─── Box ──────────────────────────────────────────────────────────────────────
.box {
    border-radius: 0;
    position: relative;
}

// ─── Title ────────────────────────────────────────────────────────────────────
.title {
    height: 32px;
    width: 100%;
    border-bottom: 1px solid $gray-3;
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: $gray-5;
    display: flex;
    align-items: center;

    // 포인트 컬러 왼쪽 태그
    &::before {
        content: '';
        display: inline-block;
        width: 3px;
        height: 14px;
        background-color: $accent;
        margin-right: 8px;
        flex-shrink: 0;
    }
}

// ─── Header ───────────────────────────────────────────────────────────────────
#header {
    width: 100%;
    height: $header_height;
    background-color: $white;
    border-bottom: 1px solid $gray-3;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    position: relative;

    // 헤더 하단 그리드 강조선
    &::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        width: 100%;
        height: 1px;
        background: repeating-linear-gradient(
            to right,
            $accent 0px, $accent 4px,
            transparent 4px, transparent 12px
        );
    }

    h1 {
        font-size: 16px;
        font-weight: 500;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: $black;

        // 포인트 컬러 강조
        span {
            color: $accent;
        }
    }

    ul {
        display: flex;
        flex-direction: row;

        li {
            display: inline-block;
            padding: 0 1.5rem;
            font-size: 13px;
            font-weight: 500;
            letter-spacing: 0.06em;

            a {
                text-decoration: none;
                color: $gray-7;
                text-transform: uppercase;
                transition: color 0.15s ease;
                position: relative;
                padding-bottom: 4px;

                &::after {
                    content: '';
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 0;
                    height: 1px;
                    background-color: $accent;
                    transition: width 0.2s ease;
                }

                &:hover {
                    color: $black;

                    &::after {
                        width: 100%;
                    }
                }

                &.active {
                    color: $accent;

                    &::after {
                        width: 100%;
                    }
                }
            }
        }
    }
}

// ─── Main ─────────────────────────────────────────────────────────────────────
#main {
    width: 100%;
    height: calc(100% - #{$header_height} - #{$small_margin});
    padding: $small_margin;
    display: flex;
    flex-direction: row;
    gap: $big_margin;
}

// ─── Side ─────────────────────────────────────────────────────────────────────
#side {
    width: $nav_width;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: $big_margin;
}

// ─── Info ─────────────────────────────────────────────────────────────────────
#info {
    width: 100%;
    height: 100%;
    background-color: $white;
    border: 1px solid $gray-3;
    padding: $small_margin;

    // 내부 그리드 배경
    @include grid-bg(20px, rgba(0,0,0,0.03));

    meal-list {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: $small_margin;
        overflow-y: hidden;

        header {
            width: 100%;
            height: 40px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;

            select {
                border: 1px solid $gray-3;
                border-radius: 0;
                padding: 4px 8px;
                font-size: 12px;
                font-family: "GMarketSans", serif;
                letter-spacing: 0.04em;
                background-color: $white;
                color: $black;
                cursor: pointer;
                transition: border-color 0.15s, box-shadow 0.15s;

                &:hover {
                    border-color: $black;
                    box-shadow: none;
                }

                &:focus {
                    outline: none;
                    border-color: $accent;
                }
            }
        }

        ul {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: $small_margin;
            overflow-y: auto;
            overflow-x: hidden;
            cursor: ns-resize;

            &::-webkit-scrollbar {
                display: none;
            }

            li {
                width: 100%;
                height: 56px;
                border-radius: 0;
                border: 1px solid $gray-3;
                border-left: 3px solid transparent;   // 기본 상태
                display: flex;
                flex-direction: row;
                align-items: center;
                padding-left: $small_margin;
                flex-shrink: 0;
                background-color: $white;
                font-size: 13px;
                color: $gray-7;
                transition: border-left-color 0.15s, background-color 0.15s, color 0.15s;

                &:hover {
                    border-left-color: $accent;
                    background-color: $accent-light;
                    color: $black;
                }

                &.active {
                    border-left-color: $accent;
                    background-color: $accent-light;
                    color: $black;
                    font-weight: 500;
                }
            }
        }
    }
}

// ─── Calendar ─────────────────────────────────────────────────────────────────
#calendar {
    border: 1px solid $gray-3;
    border-top: 3px solid $accent;   // 포인트 컬러 상단 강조선
    width: calc(100% - #{$nav_width} - #{$big_margin});
    height: 100%;
    background-color: $white;
    position: relative;

    iframe {
        border-radius: 0;
        width: 100%;
        height: 100%;
        border: none;
    }
}

// ─── Responsive ───────────────────────────────────────────────────────────────
@media (max-width: 800px) {
    h1 {
        font-size: 16px;
    }

    #main {
        width: 100%;
        flex-direction: column;
    }

    #side {
        width: 100%;
        height: auto;
    }

    #task {
        height: auto;
    }

    #info {
        height: auto;
    }

    #calendar {
        width: 100%;
        height: 400px;
        flex-shrink: 0;
    }
}