/*===========================================================================
	웹폰트
============================================================================*/

/* 폰트 */
@font-face {
    font-family: "xeicon";
    font-style: normal;
    src: url("../fonts/xeicon.woff2") format("woff2");
    font-display: swap;
}
@font-face {
    font-family: "KoPubWorld-Batang";
    font-weight: 500;
    font-style: normal;
    src: url("../fonts/KoPubWorld-Batang-Bold.ttf") format("truetype");
    font-display: swap;
}
@font-face {
    font-family: "KoPubWorld-Batang";
    font-weight: 100;
    font-style: normal;
    src: url("../fonts/KoPubWorld-Batang-Light.ttf") format("truetype");
    font-display: swap;
}
@font-face {
    font-family: "KoPubWorld-Batang";
    font-weight: 300;
    font-style: normal;
    src: url("../fonts/KoPubWorld-Batang-Medium.ttf") format("truetype");
    font-display: swap;
}
@font-face {
    font-family: "KoPubWorld-Dotum";
    font-weight: 600;
    font-style: normal;
    src: url("../fonts/KoPubWorld-Dotum-Bold.ttf") format("truetype");
    font-display: swap;
}
@font-face {
    font-family: "KoPubWorld-Dotum";
    font-weight: 100;
    font-style: normal;
    src: url("../fonts/KoPubWorld-Dotum-Light.ttf")format("truetype");
    font-display: swap;
}
@font-face {
    font-family: "KoPubWorld-Dotum";
    font-weight: 500;
    font-style: normal;
    src: url("../fonts/KoPubWorld-Dotum-Medium.ttf") format("truetype");
    font-display: swap;
}

/*===========================================================================
	CSS 초기화
============================================================================*/
@layer common {
    * {
        font-family: "KoPubWorld-Dotum", sans-serif;
        box-sizing: border-box;
    }
    html,
    body,
    div,
    span,
    object,
    iframe,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    em,
    img,
    strong,
    b,
    i,
    dl,
    dt,
    dd,
    ol,
    ul,
    li,
    form,
    label,
    legend,
    caption,
    article,
    aside,
    footer,
    header,
    menu,
    nav,
    section,
    video,
    a {
        border: 0;
        outline: 0;
        line-height: 1;
    }
    html {
        scroll-behavior: smooth;
    }
    body {
        line-height: 1;
        -ms-overflow-style: none;
        height: 100%;
    }
    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    menu,
    nav,
    section {
        display: block;
    }
    ul,
    ol,
    li {
        list-style: none;
    }
    strong {
        display: inline-block;
    }
    a {
        display: block;
    }
    pre {
        font-family: "KoPubWorld-Dotum", sans-serif;
        white-space: pre-line;
        line-height: 1.5;
    }
    input,
    select {
        vertical-align: middle;
        outline: 0;
        border: 0;
        background: none;
        font-family: "KoPubWorld-Dotum", sans-serif;
    }
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    input[type="file"],
    input[type="checkbox"],
    input[type="radio"] {
        display: none;
    }
    select {
        appearance: none;
        background-image: url(../images/icon_arrow_down.svg);
        background-repeat: no-repeat;
        background-position: right 8px center;
        background-size: 24px;
    }
    select option[value="disabled"][disabled] {
        display: none;
    }
    label {
        cursor: pointer;
    }
    button {
        cursor: pointer;
    }
    a {
        text-decoration: none;
        display: block;
    }
    textarea {
        border: 0;
        outline: 0;
        resize: none;
        font-family: "Pretendard", sans-serif;
    }

    i {
        font-family: "xeicon";
        font-style: normal;
        color: inherit;
    }
}

header {
    position: relative;
    background-color: #00aeef;
    height: 90px;
    padding-left: 126px;
    z-index: 999;
}


/* 컨텐츠 공통 */
.row-group {
    display: flex;
    flex-flow: column;
}
.img-container {
    width: 100%;
    position: relative;
}
.img-container img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    object-fit: cover;
    object-position: center;
}
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #e4e4e4;
}
::-webkit-scrollbar-thumb {
    background: #484848;
    border-radius: 4px;
}


/* 기본 hover (중간 메뉴들) */
 .menu-item:hover::before { 
    content: ""; 
    position: absolute; 
    top: 0;
    bottom: 0; 
    left: 0;  
    width: calc(100% + 32px); 
    background: url('/images/Union.png') no-repeat center/cover; z-index: 1;
 }


/* 교수님 격려사 */
.professorSwiper .swiper-wrapper {
  padding-top: 30px;
}

.professor-pagination .swiper-pagination-bullet {
  background: none !important;
  opacity: 1 !important;
}

.professor-pagination .swiper-pagination-bullet-active::after {
  content: "";
  width: 16px;
  height: 16px;
  background-color: #0ea5e9;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: growSquare 0.3s ease-out forwards;
}

@keyframes growSquare {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

.professor-pagination {
  position: relative !important;
  bottom: auto !important;
  margin-top: 24px;
  height: 32px;
}

.professor-pagination .swiper-pagination-bullet {
  border-radius: 0 !important; 
  background: transparent !important; 
  opacity: 1 !important;           
  border-radius: 0 !important;    
}

.bullet-square.swiper-pagination-bullet-active::after {
  content: "";
  width: 16px;
  height: 16px;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: growSquare 0.3s ease-out forwards;
}

/* 기본 파란색 테마 */
.swiper-pagination.blue-theme .swiper-pagination-bullet {
  border-color: #0ea5e9 !important;
}
.swiper-pagination.blue-theme .swiper-pagination-bullet-active::after {
  background-color: #0ea5e9 !important;
}

/* 흰색 테마 */
.swiper-pagination.white-theme .swiper-pagination-bullet {
  border-color: #fff !important;
}
.swiper-pagination.white-theme .swiper-pagination-bullet-active::after {
  background-color: #fff !important;
}



.select-scroll {
  scrollbar-gutter: stable both-edges;
  padding-right: 6px;
}

/* 스크롤바 */
.select-scroll::-webkit-scrollbar {
  width: 4px;
}

/* 트랙 (배경) */
.select-scroll::-webkit-scrollbar-track {
  background: transparent;
  margin: 6px 0;
  box-shadow: inset -4px 0 0 rgba(0, 0, 0, 0); /* 🔹 스크롤 오른쪽 띄운 느낌 */
}

/* 스크롤 thumb */
.select-scroll::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  background-clip: content-box;
  border: 1px solid transparent; /* illusion */
}

/* hover 시 */
.select-scroll::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.8);
}

/* Firefox */
.select-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.5) transparent;
}

#guestBookContainer {
  column-count: 4;
  column-gap: 30px;
}

.guest-card {
  display: inline-block;
  width: 100%;
  margin-bottom: 55px;
  background: #fff;
  border: 2px solid #00aeef80;
  padding: 35px 25px;
  box-sizing: border-box;
  break-inside: avoid;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.guest-card:hover {
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.08);
}

.guest-card .to {
  font-weight: 700;
  font-size: 22px;
  color: #282828;
  margin-bottom: 8px;
}
.guest-card .msg {
  font-size: 20px;
  line-height: 1.6;
  color: #000;
  margin-bottom: 12px;
  word-break: keep-all;
}
.guest-card .from {
  font-weight: 700;
  font-size: 15px;
  color: #000;
}

/* 반응형 */
@media (max-width: 1279px) {
  #guestBookContainer {
    column-count: 3;
  }
}
@media (max-width: 767px) {
  #guestBookContainer {
    column-count: 2;
  }
}


/* 반응형 */

  .mb,
  .md-mb{
    display: none;
  }


@media (max-width: 767px) {
  .mb {
    display: flex;
  }

  .pc,
  .mb-mb {
    display: none;
  }

  .md-pc {
    display: flex;
  }
}

@media (max-width: 375px) {
  .mb,
  .md-mb {
    display: flex;
  }

  .md-pc {
    display: none;
  }
}