@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

.wrapper, #main-wrap {
    background-color: #ccc !important;
}

/*html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}*/

html, body {
    font-family: 'Pretendard-Regular';
}

.hofbox {
    padding: 10px;
}


nav.navbar li.nav-item {
    border: 1px solid;
    border-radius: 5px;
    padding: 0 10px 0 10px;
    margin: 0;
    margin-right: 20px;
}

.profile-card {
    margin-bottom: 30px;
}

.profile-img {
    max-width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: top;
}

.card-title {
    font-size: 1.5rem;
    font-weight: bold;
}

.card-text {
    font-size: 1rem;
}
/* ������ ���� ��Ÿ�� */
.page-title {
    margin-top: 30px;
    margin-bottom: 50px;
    text-align: center;
}

.section-title {
    color: #2c3e50;
    margin-bottom: 30px;
}

.president-card {
    border: none;
    transition: transform 0.2s;
}

    .president-card:hover {
        transform: translateY(-5px);
    }

.president-icon {
    font-size: 3rem;
    color: #2980b9;
}

.card-title {
    margin-top: 15px;
    font-size: 1.25rem;
    color: #2c3e50;
}

.card-text {
    color: #7f8c8d;
}

/* ===== Added ===== */

.card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* 기본값: 중앙 정렬 */
}

.card-img-top {
    height: 200px;
    object-fit: cover;
}

/* */
.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.list {
    list-style: none;
    padding: 0;
}

    .list li {
        margin-bottom: 20px;
    }

h2 {
    font-size: 24px;
    margin-bottom: 10px;
}

a {
    text-decoration: none;
    color: #333;
}

/* */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 비율 유지 */
    height: 0;
}

    .video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

ul {
    list-style: none;
    padding: 0;
}

li {
    margin-bottom: 10px;
}

.carousel-caption {
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
    padding: 10px;
    border-radius: 5px;
}

    .carousel-caption h5,
    .carousel-caption p {
        color: #fff; /* White text color */
    }

#main-wrap a {
    text-decoration: underline;
}

/* Change arrow color for next and previous buttons */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    background-size: 100%, 100%;
    border-radius: 50%; /* Optional for rounded icons */
}

/* Optionally increase icon size */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 3rem;
    height: 3rem;
}

.height30 {
    height: 30px;
}

.clickable-image {
    cursor: pointer;
}

.btn-ustgs {
    background-color: #D5B038;

}


/* Parent container ensures equal height and alignment */
.image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px; /* Set the desired height */
    background-color: black; /* Black background */
    border-radius: 5px; /* Optional for rounded corners */
    overflow: hidden; /* Ensures the image doesn't overflow */
}

    /* Ensures images are centered and maintain aspect ratio */
    .image-container img {
        max-height: 100%; /* Limit the height to the container */
        max-width: 100%; /* Limit the width to the container */
        object-fit: contain; /* Ensures the image fits within the container */
    }

/* H1 Fancy Heading */
h1.fancy-heading {
    background: linear-gradient(to right, #ddd, #ccc); /* Rich purple gradient */
    color: #000; /* White text for contrast */
    font-size: 3rem; /* Larger font size for emphasis */
    font-family: 'Playfair Display', serif; /* Elegant serif font */
    text-align: center; /* Center align text */
    padding: 20px 30px; /* Add padding for spacing */
    border-radius: 10px; /* Rounded corners for a polished look */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4); /* Stronger shadow for prominence */
    margin: 30px 0; /* Add vertical spacing */
    letter-spacing: 1px; /* Slight letter spacing for elegance */
    text-transform: capitalize; /* Ensure proper case styling */
}

/* H2 Fancy Heading */
h2.fancy-heading {
    background: linear-gradient(to right, #D5B038, #CD9900); /* Rich gradient background */
    color: white; /* White text for contrast */
    font-size: 2.5rem; /* Slightly larger font size for emphasis */
    font-family: 'Playfair Display', serif; /* Elegant serif font */
    text-align: center; /* Center align text */
    padding: 15px 25px; /* Adjust padding for better proportions */
    border-radius: 8px; /* Rounded corners for a polished look */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
    margin: 25px 0; /* Adjust vertical spacing */
    letter-spacing: 0.5px; /* Slight letter spacing for readability */
}

/* H3 Fancy Heading */
h3.fancy-heading {
    background: linear-gradient(to right, #FFD700, #D4AF37); /* Softer gold gradient */
    color: white; /* White text for contrast */
    font-size: 2rem; /* Appropriate size for subheadings */
    font-family: 'Playfair Display', serif; /* Elegant serif font */
    text-align: center; /* Center align text */
    padding: 12px 20px; /* Adjust padding for a compact look */
    border-radius: 6px; /* Rounded corners for consistency */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2); /* Softer shadow for subtlety */
    margin: 20px 0; /* Adjust vertical spacing */
    letter-spacing: 0.5px; /* Consistent spacing for harmony */
}

.boxcontainer {
    background: #f8f9fa; /* Light gray background for contrast */
    border: 1px solid #ddd; /* Subtle border for definition */
    border-radius: 10px; /* Rounded corners for a modern look */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
    padding: 20px; /* Inner spacing for content */
    margin: 20px auto; /* Center the box and add spacing */
    max-width: 800px; /* Limit the width for better readability */
}

    .boxcontainer h2 {
        text-align: center; /* Center the heading */
        font-family: 'Playfair Display', serif; /* Elegant serif font for heading */
        color: #343a40; /* Dark gray for a professional look */
        margin-bottom: 15px; /* Spacing below the heading */
    }

    .boxcontainer p {
        font-family: 'Arial', sans-serif; /* Clean sans-serif font for body text */
        color: #555; /* Subtle text color */
        line-height: 1.6; /* Improve readability */
        margin-bottom: 10px; /* Spacing between paragraphs */
    }


/* Base button styling */
.btn-custom {
    background-color: #007bff; /* Button background */
    color: white; /* Button text color */
    font-size: 1.5rem; /* Text size */
    padding: 0.75rem 2rem; /* Padding for size */
    border: none; /* No border */
    border-radius: 8px; /* Rounded corners */
    text-transform: uppercase; /* Capitalize text */
    letter-spacing: 1px; /* Slight letter spacing */
    transition: all 0.3s ease-in-out; /* Smooth transition */
    position: relative; /* For dynamic ">>" positioning */
    overflow: hidden; /* Prevent overflow of animated content */
}

footer{
    background-color: #000;
    color: #fff;
}

.floor-heading {
    font-size: 2rem !important; /* Responsive font size for desktop */
    line-height: 1.2; /* Line height for readability */
    min-height: 90px; /* Ensure sufficient space for text */
    display: flex; /* Flexbox for alignment */
    align-items: center; /* Vertically center text */
    justify-content: center; /* Center text horizontally (optional for headings) */
    text-align: center; /* Center text alignment */
    overflow: hidden; /* Prevent content overflow */
    text-overflow: ellipsis; /* Add ellipsis for overflowed text */
    white-space: nowrap; /* Prevent text wrapping for a clean ellipsis */
    margin-top: 0 !important;
}

@media (max-width: 768px) {
    .floor-heading {
        font-size: 1.5rem !important; /* Smaller font size for mobile */
        min-height: 50px; /* Adjust height for mobile */
        white-space: normal; /* Allow text wrapping on smaller screens */
    }
}

/* Table styling */
.floor-map {
    width: 100%;
    border-collapse: collapse; /* Removes gaps between table cells */
    margin: 20px auto; /* Center the table */
    max-width: 600px; /* Set a maximum width for the table */
    background-color: #f8f9fa; /* Light background */
    border-radius: 10px; /* Rounded corners */
    overflow: hidden; /* Ensures rounded corners display properly */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Add subtle shadow */
}

    .floor-map td {
        padding: 15px 20px; /* Add padding for readability */
        text-align: left; /* Align text to the left */
        border-bottom: 1px solid #ddd; /* Add a subtle divider between rows */
        font-size: 16pt;
    }

    .floor-map tr:last-child td {
        border-bottom: none; /* Remove border from last row */
    }

.floor-number {
    font-weight: bold; /* Highlight floor numbers */
    background-color: #D4AF37; /* Blue background for numbers */
    color: white; /* White text for contrast */
    text-align: center; /* Center align text */
    width: 20%; /* Set width for consistency */
}

.floor-description a {
    color: #343a40; /* Dark gray for links */
    text-decoration: none; /* Remove underline from links */
    font-family: 'Arial', sans-serif; /* Clean, readable font */
}

    .floor-description a:hover {
        color: #0056b3; /* Darker blue on hover */
        text-decoration: underline; /* Underline link on hover */
    }


/* Fullscreen background image */
#image-section, #floorMapModal {
    background-image: url(/files/bg2.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

    #floorMapModal modal-content{
        background-color: none;
    }

    #floorMapModal .floor-map {
        background-color: rgba(255, 255, 255, 0.5);
        color: #000;
        font-weight: bold;
    }

    #floorMapModal .floor-number {
        background-color: rgba(212, 175, 55, 0.5);
    }