/* =====================================================
   GRACE ACADEMY v0.94
   COMMON STYLE
   공개영역 · 회원영역 공통
===================================================== */


/* =====================================================
   DESIGN TOKENS
===================================================== */

:root{
    /* 공개영역 브랜드 색상 */
    --primary:#014339;
    --primary-dark:#083C35;
    --accent:#E6C84A;

    /* 회원영역 브랜드 색상 */
    --member-primary:#1E3A8A;
    --member-primary-dark:#172F70;
    --member-primary-light:#3058C9;

    /* 기본 색상 */
    --text:#333333;
    --text-soft:#555555;
    --light:#f5f5f5;
    --white:#ffffff;

    /* 크기 */
    --radius-sm:8px;
    --radius-md:12px;
    --radius-lg:14px;

    --section-gap:60px;
    --card-padding:35px;

    /* 글자 */
    --font-body:17px;
    --font-small:15px;
    --font-title:34px;
    --font-subtitle:24px;

    /* 그림자 */
    --shadow:0 4px 14px rgba(0,0,0,.14);
    --shadow-soft:0 4px 14px rgba(0,0,0,.12);
    --shadow-hover:0 8px 22px rgba(0,0,0,.16);
}


/* =====================================================
   RESET
===================================================== */

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

html{
    scroll-behavior:smooth;
    overflow-x:clip;
}

body{
    min-height:100vh;
    overflow-x:clip;

    font-family:Arial,sans-serif;
    font-size:var(--font-body);
    line-height:1.75;

    background:var(--light);
    color:var(--text);
}

img{
    max-width:100%;
}

button,
input,
select,
textarea{
    font:inherit;
}

button{
    border:none;
}

a{
    color:inherit;
}


/* =====================================================
   ACCESSIBILITY
===================================================== */

.sr-only{
    position:absolute;

    width:1px;
    height:1px;

    padding:0;
    margin:-1px;

    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;

    border:0;
}


/* =====================================================
   HEADER
===================================================== */

.site-header{
    position:sticky;
    top:0;
    z-index:1000;

    display:flex;
    justify-content:space-between;
    align-items:center;

    min-height:88px;
    padding:14px 40px;

    background:var(--white);
    box-shadow:var(--shadow);
}


/* =====================================================
   BRAND
===================================================== */

.brand{
    display:flex;
    align-items:center;
    gap:15px;

    flex-shrink:0;

    text-decoration:none;
}

.symbol{
    display:block;

    width:auto;
    height:60px;
}

.wordmark{
    display:block;

    width:auto;
    height:36px;
}


/* =====================================================
   DESKTOP NAVIGATION
===================================================== */

.side-nav{
    display:flex;
    align-items:center;
    gap:35px;
}

.side-nav a{
    color:var(--text);
    text-decoration:none;
    font-weight:600;

    transition:
        color .25s ease,
        background-color .25s ease,
        transform .25s ease;
}

.side-nav a:hover{
    color:var(--primary);
}

.side-nav a.active,
.side-nav a[aria-current="page"]{
    color:var(--primary);
}


/* =====================================================
   COMMON BUTTON
===================================================== */

.side-nav .btn{
    display:inline-flex;
    justify-content:center;
    align-items:center;

    padding:10px 18px;

    border:0;
    border-radius:var(--radius-sm);

    background:var(--primary);
    color:var(--white);

    text-decoration:none;
    font-weight:600;

    cursor:pointer;

    transition:
        background-color .25s ease,
        color .25s ease,
        transform .25s ease;
}

.side-nav .btn:hover{
    background:var(--primary-dark);
    color:var(--white);
}

.admission-btn{
    display:inline-block;

    margin-top:20px;
    padding:12px 22px;

    border-radius:var(--radius-sm);

    background:var(--primary);
    color:var(--white);

    text-decoration:none;
    font-weight:600;

    transition:
        background-color .3s ease,
        transform .3s ease;
}

.admission-btn:hover{
    background:var(--primary-dark);
    transform:translateY(-2px);
}


/* =====================================================
   COMMON LAYOUT
===================================================== */

.container{
    width:100%;
    max-width:1000px;

    margin:0 auto;
    padding:40px 20px;
}

hr{
    margin:50px 0;

    border:0;
    border-top:1px solid #dddddd;
}


/* =====================================================
   COMMON UI COMPONENTS
===================================================== */

.ui-card{
    padding:var(--card-padding);

    border-radius:var(--radius-md);

    background:var(--white);
    box-shadow:var(--shadow);
}

.ui-hover{
    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.ui-hover:hover{
    transform:translateY(-5px);
    box-shadow:var(--shadow-hover);
}

.section-desc{
    margin-bottom:30px;

    color:var(--text-soft);
    font-size:16px;
    text-align:center;
}


/* =====================================================
   FOOTER
===================================================== */

footer{
    margin-top:70px;
    padding:45px 20px;

    background:var(--primary);
    color:var(--white);

    font-size:15px;
    line-height:1.8;
    text-align:center;
}

footer strong{
    font-size:20px;
    letter-spacing:1px;
}


/* =====================================================
   MOBILE MENU DEFAULT
===================================================== */

.menu-toggle{
    display:none;
}

.overlay{
    display:none;
}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:768px){

    body{
        font-size:16px;
    }


    /* -------------------------
       Header
    ------------------------- */

.site-header{
    width:100%;
    min-height:70px;
    padding:12px 70px 12px 18px;
    z-index:2600;
}

    .symbol{
        height:46px;
    }

    .wordmark{
        height:22px;
    }


    /* -------------------------
       Hamburger
    ------------------------- */

  .menu-toggle{
    display:flex;
    justify-content:center;
    align-items:center;

    position:fixed;
    top:15px;
    right:15px;
    left:auto;
    z-index:3001;

    width:42px;
    height:42px;

    border:0;
    border-radius:var(--radius-sm);

    background:var(--primary);
    color:var(--white);

    font-size:24px;
    line-height:1;

    cursor:pointer;
}


    /* -------------------------
       Overlay
    ------------------------- */

    .overlay{
        position:fixed;
        inset:0;
        z-index:2000;

        display:block;

        background:rgba(0,0,0,.45);

        opacity:0;
        visibility:hidden;
        pointer-events:none;

        transition:
            opacity .3s ease,
            visibility .3s ease;
    }

    .overlay.active{
        opacity:1;
        visibility:visible;
        pointer-events:auto;
    }


    /* -------------------------
       Slide Navigation
    ------------------------- */

    .side-nav{
        position:fixed;
        top:0;
        right:-280px;
        z-index:2800;

        display:flex;
        flex-direction:column;
        justify-content:flex-start;
        align-items:stretch;

        width:260px;
        height:100vh;
        height:100dvh;

        padding:90px 24px 30px;
        gap:12px;

        overflow-y:auto;

        background:var(--primary);

        transition:right .3s ease;
    }

    .side-nav.active{
        right:0;
    }

    .side-nav a{
        display:block;

        width:100%;
        padding:11px 14px;

        border-radius:var(--radius-sm);

        color:var(--white);
        text-align:left;
    }

    .side-nav a:hover,
    .side-nav a.active,
    .side-nav a[aria-current="page"]{
        background:rgba(255,255,255,.13);
        color:var(--white);
    }

    .side-nav .btn{
        width:100%;
        min-height:46px;
        margin:0;

        background:rgba(255,255,255,.18);
        color:var(--white);
    }

    .side-nav .btn:hover{
        background:rgba(255,255,255,.28);
        color:var(--white);
    }


    /* -------------------------
       Layout
    ------------------------- */

    .container{
        padding:30px 18px;
    }

    hr{
        margin:40px 0;
    }

}


/* =====================================================
   REDUCED MOTION
===================================================== */

@media(prefers-reduced-motion:reduce){

    html{
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }

}
/* 360px and narrower: keep the brand clear of the menu button. */
@media(max-width:360px){
    .brand{gap:8px;}
    .symbol{height:36px;}
    .wordmark{height:17px;}
}