@charset "UTF-8";
/* 초기화 */
*{
    margin: 0;
    padding: 0;
    /* color: #333; */
    box-sizing: border-box;
    /* outline: 1px solid green; */
}
body{
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
html{font-size: calc(10px + 0.3vw);}
a{text-decoration: none;}
img{vertical-align: top;}
ul, li{list-style: none;}
html{scroll-behavior: smooth; scroll-padding-top: 150px;}
.section_greeting,.section_objective,.section_history,.section_teacher,.section_map, .footer{
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
}

/* greeting */
.section_greeting .title{
    margin: 100px 50px 10px 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.section_greeting .title h2{
    position: absolute;
    font-family: "휴먼모음T";
    overflow: hidden;
    white-space: nowrap;
    font-size: 2rem;
}
.greeting, .objective, .history, .teacher, .map{
    margin: 0 50px 100px 0;
}
body h1{
    margin-top: 50px;
    padding: 20px 0 20px 30px;
    border-bottom: 1px solid #d3d3d3;
    font-style: italic;
}
.greeting_content .text p{
    padding: 0 0 30px 30px;
    white-space: pre-line;
    line-height: 2rem;
}
.greeting span:not(:nth-child(4)){color: rgb(214, 150, 48); font-weight: bold;}
.greeting span:nth-child(4){
    font-family: "문체부 훈민정음체";
    font-weight: bold;
    font-size: 1.2rem;
}
.greeting_content{
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}
.greeting_content div:last-child{text-align: right;}
.greeting .text p{position: relative;}
.greeting .text p > img{
    padding-left: 10px;
    position: absolute;
    bottom: 30px;
}
.greeting_content div:last-child > img{
    width: 73%; 
    margin-right: 30px;
    border-radius: 30px;
}
.greeting_h1{
    font-size: 1.5rem;
}
/* objective */
.objective{
    position: relative;
    height: 600px;
}
.objective dl{
    padding: 50px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    min-width: 1300px;
    min-height: 600px;
}
.objective dl dt{
    font-size: 2rem;
    font-family: "HY동녘B";
    font-weight: bold;
    font-style: italic;
}
.objective dl dt:first-child > span{
    color: rgb(39, 80, 141);
    font-size: 2.5rem;
    text-shadow: 3px 3px 3px rgb(183, 198, 221);
}
.objective dl dt:last-child > span{
    color: rgb(72, 139, 82);
    font-size: 2.5rem;
    text-shadow: 3px 3px 3px rgb(204, 225, 208);
}
.objective img{
    position: absolute; 
    margin-top: 180px;
    z-index: -1;
}
/* history */
.history{position: relative;}
.history dl{
    margin: 30px;
}
.history dl:nth-child(3){margin-top: 3rem;}
.history dt{
    font-size: 1.3rem;
    font-weight: bold;
    display: inline-block;
    padding: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border: 1px solid #eee;
    box-shadow: 3px 3px 5px #777;
}
.history dd{
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
    padding: 20px 10px;
}
.history p{
    padding-left: 10px; 
    width: 570px; 
    padding-bottom: 10px;
    border-bottom: 2px dotted #bbbbbb;
}
.history span{font-size: 0.8rem;}
.history img{position: absolute; margin: 30px; right: 0; z-index: -1;}
/* teacher */
.teacher{position: relative;}
.teacher dl{margin: 30px;}
.teacher dt{
    font-size: 1.2rem; 
    font-weight: bold; 
    letter-spacing: 5px;
    display: inline-block;
    padding: 5px;
    border-bottom: 2px dotted #888;
}
.teacher dt > span{
    font-size: 1rem;
    padding-left: 5px;
    color: rgb(214, 150, 48);
    letter-spacing: normal;
}
.teacher dd{
    margin: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 600px;
}
.teacher dd p:nth-child(5){display: flex;}
.teacher dd p:nth-child(5) span:first-child{
    padding: 6px 3px 6px 6px;
    font-size: 0.6rem;
}
.teacher dd p:nth-child(5) span:last-child{
    font-size: 0.8rem;
    white-space: pre-line;
    line-height: 1.5rem;
    padding: 0 5px;
}
.teacher img{
    position: absolute; 
    margin: 10px 30px; 
    top: 19%;
    right: 0;
}
/* map */
.map{position: relative; height: 720px;}
.map dl{margin: 30px;}
.map dt{
    padding: 10px; 
    font-size: 1rem; 
    font-weight: bold;
}
.map dd{
    padding: 5px 0 5px 15px;
    font-size: 0.9rem;
}
.map dd span{font-size: 0.9rem; padding: 5px;}
.map .cont{display: none;}
.map #daumRoughmapContainer1745302168590{
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* 풋터 */
footer{background-color: #000;}
.footer{
    display: grid;
    grid-template-columns: 250px auto;
    height: 300px;
}
.footer .foot-logo{height: 300px; padding: 50px 0;}
.footer .foot-logo a{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    border-right: 1px solid #333;
}
.footer .addr{
    display: grid;
    grid-template-rows: auto auto;
}
.addr1{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin: 10px 30px 0 30px;
    text-align: center;
    border-bottom: 1px solid #333;
}
.addr1 span{
    display: flex;
    padding: 10px 5px;
    font-family: "카페24 써라운드";
    color: #eee;
    font-size: 0.9rem;
}
.addr2{
    display: grid;
    grid-template-rows: repeat(3, auto);
    padding: 20px 0 30px 0;
    justify-content: center;
}
.addr2 p{
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    
}
.addr2 p span{color: #eee;}
/* 사이드바 */
/* :root 선택자에 변수를 선언하여 전역적으로 사용합니다. */
:root {
    --sidebar-width: 10rem; /* 사이드바의 너비를 변수로 지정 */
}

/* 사이드바 */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100svh;
    z-index: 1000;
    transition: transform 0.3s ease-in-out;
    transform: translateX(0);
    pointer-events: none;
}
.side_menu {
    position: relative;
    top:50%;
    left: 0;
    transform: translateY(-50%);
    width: var(--sidebar-width); 
    height: 45rem;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease-in-out;
    background-color: #555;
    opacity: 0.85;
    z-index: inherit;
    pointer-events: auto;
}
.sidebar.is-hidden {
    transform: translateX(-100%);
}
.sidebar_button {
    position: fixed;
    top: 50svh;
    left: 0;
    transform: translateY(-50%) translateX(0);
    transition: transform 0.3s ease-in-out, left 0.3s ease-in-out;
    z-index: 777;
    width: 40px;
    height: 70px;
    background-color: #555;
    opacity: 0.85;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    clip-path: polygon(0 0, 100% 15%, 100% 85%, 0% 100%);
}

.sidebar:not(.sidebar.is-hidden) + .sidebar_button {
    /* ▼▼▼▼▼ [변경점 2] 여기도 동일한 변수로 교체 ▼▼▼▼▼ */
    transform: translateY(-50%) translateX(var(--sidebar-width));
}

.sidebar.is-hidden + .sidebar_button {
    left: 0;
}
.side_menu ul {
    display: flex;
    gap: 2rem;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    height: 100%;
}
.side_menu ul li {
    font-size: 1rem;
    font-weight: bold;
    padding: 0.8rem;
    width: 97%;
    text-align: center;
    border-bottom: 2px dotted #fff;
}
.side_menu ul li span {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}
.side_menu ul li:first-child {
    margin-top: 0 !important;
    padding-top: 0.5rem; /* 여백 줄이기 */
}
.side_menu ul li:last-child {
    margin-bottom: 2rem;
}
.side_menu ul li a { color: #fff; }





/* --- 미디어 쿼리: 화면 너비가 768px 이하일 때 적용 --- */
@media (max-width: 768px) {
    html{font-size: 10px;}
    body h1{padding: 2rem 0;}
    .header_container {
        padding: 0 15px; /* 모바일에서 좌우 패딩 조절 */
        justify-content:space-evenly;
    }

    /* PC 메뉴 숨김 */
    .nav-pc {
        display: none;
    }
    .voucher{gap: 0px;}
    .voucher img{width: 80%; border-radius: 10px;}
    /* 햄버거 아이콘 보임 */
    .hamburger-icon {
        display: flex; /* <-- 여기! 모바일 크기일 때만 보이도록 */
    }
    /* 햄버거 클릭 시 아이콘 모양 변화 (선택 사항) */
    .hamburger-icon.active span:nth-child(1) {
        transform: translateY(8.5px) rotate(45deg);
    }
    .hamburger-icon.active span:nth-child(2) {
        opacity: 0; /* 가운데 막대 숨김 */
    }
    .hamburger-icon.active span:nth-child(3) {
        transform: translateY(-8.5px) rotate(-45deg);
    }
    .header .logo a{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .header .logo img{width: 90%;}
    /* section */
    section:nth-child(2),section:nth-child(3),section:nth-child(4),section:nth-child(5),section:nth-child(6),section:nth-child(7){
        width: unset;
        margin: unset;
    }
    .greeting, .objective, .history, .teacher, .map{
    margin: 0;
}
    /* greeting */
    .section_greeting .greeting-content {
        flex-direction: column;
        align-items: center;
    }
    .section_greeting .text,
    .section_greeting .image {
        flex: 1 1 100%;
    }
    .section_greeting .text {
        font-size: 1.4rem;
        text-align: left;
    }
    .section_greeting h1, .section_greeting h2, .history h1, .teacher h1, .map h1 {
        text-align: center;
    }
    .section_greeting h1{width: 100%;}
    .greeting, .objective, .history, .teacher, .map{
        padding: 2rem 1rem;
    }
    .greeting_content{position: relative;}
    .greeting_content div:last-child > img{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0.1;
    }
    /* objective */
    .section_objective .objective {
    position: relative;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    }
    .section_objective .objective img {
        position: absolute;
        width: 100%;
        height: auto;
        z-index: -1;
        margin-top: 0;
        top: 45%;
    }
    .section_objective .objective dl {
        min-width: unset;
        min-height: unset;
        padding: 6rem 0;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        align-items: center;
    }
    .section_objective .objective h1{width: 100%;}
    .section_objective .objective dl dt {
        font-size: 1.2rem;
        word-break: keep-all;
        line-height: 1.5;
    }
    .section_objective .objective dl dt span {
        display: inline-block;
        font-size: 1.4rem;
        text-shadow: none;
    }
    /* history */
    .history dl{margin: 1rem;}
    .history dl:nth-child(3){margin-top: 3rem;}
    .history img{
        width: 100%;
        margin: 12rem 0 0 0;
        opacity: 0.2;
        z-index: -1;
    }
    .history dt{font-size: 1.5rem;}
    .history p{
        width: 100%; font-weight: bold;
        font-size: 1.2rem;
    }
    /* teacher */
    .teacher img{
        margin: 0; 
        width: 60vw;
        position: absolute;
        z-index: -1;
        top: 55%;
    }
    .teacher dt{font-size: 1.4rem;}
    .teacher dd{width: 100%; font-size: 1.2rem; font-weight: bold;}
    .teacher dd p:nth-child(5) span:last-child{font-size: 1rem;}
    /* map */
    .map dl dt{font-size: 1.4rem;}
    .map dl dd{font-size: 1.3rem;}
    .map-container {
    position: relative;
    width: 95%;
    padding-top: 56.25%; /* 16:9 비율 */
    overflow: hidden;
    margin: 0 auto;
    }

    /* 내부 iframe처럼 작동하는 div 조정 */
    #daumRoughmapContainer1745302168590 {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    }
    /* 풋터 */
    .footer {
        all: unset; /* 기존 스타일 모두 제거 */
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 2rem 1rem;
        background-color: #000;
        gap: 2rem;
    }
    .footer .foot-logo {
        all: unset;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .footer .foot-logo > a{all: unset;}
    .footer .foot-logo img {
        width: 40vw;
    }
    .footer .addr {
        all: unset;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        color: #ccc;
        font-size: 0.9rem;
        gap: 2rem;
    }    
    .footer .addr1{
        all: unset;
        display: flex;
        gap: 3rem;
    }
    .footer .addr1 img{width: 10vw;}
    .footer .addr2 {
        all: unset;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        justify-content: center;
        align-items: center;
    }
    .footer .addr1 span {
        font-size: 1rem;
        color: #aaa;
        justify-content: center;
        align-items: center;
    }
    .footer .addr2 p {
        font-size: 1.5rem;
        color: #eee;
    }
    .footer .addr2 p:first-child, .addr2 p:nth-child(2) span:nth-child(7), .addr2 p:nth-child(2) span:nth-child(8){
        display: none;
    }
      /* sidebar */
    .sidebar ul li:last-child img{width: 7vw;}
    .sidebar ul li:last-child{
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
@media (max-width: 430px){
    /* 풋터 */
    .footer {
        all: unset; /* 기존 스타일 모두 제거 */
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 2rem 1rem;
        background-color: #000;
        gap: 2rem;
    }
    .footer .foot-logo {
        all: unset;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .footer .foot-logo > a{all: unset;}
    .footer .foot-logo img {
        width: 40vw;
    }
    .footer .addr {
        all: unset;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        color: #ccc;
        font-size: 0.9rem;
        gap: 1rem;
    }
    .footer .addr1{
        all: unset;
        display: flex;
        gap: 1.2rem;
    }
    .footer .addr1 img{width: 10vw;}
    .footer .addr2 {
        all: unset;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        justify-content: center;
        align-items: center;
    }
    .footer .addr1 span {
        font-size: 0.7rem;
        color: #aaa;
    }
    .footer .addr2 p {
        font-size: 0.95rem;
        color: #eee;
    }
}