/* Basic Reset & Body Style */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    background-color: #ffffff; /* Changed to white */
    color: rgba(51, 51, 51, 0.7);
    font-size: 16px; /* Explicitly set base font size */
    word-break: keep-all; /* Improve Korean word breaking */
}

/* Page-level containers for Vault and Article */
.vault, .article {
    padding: 20px;
    max-width: 800px; /* Set a max-width for better readability on larger screens */
    margin: 0 auto; /* Center the content */
}

.vault-header, .article-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.vault-header {
    justify-content: center; /* Center the stats bar */
}

.stats-bar {
    display: flex;
    gap: 15px; /* Space between the stat numbers */
    font-size: 0.9rem;
    color: #888;
}

.header-spacer {
    height: 20px;
}

.vault-header .back-arrow, .article-header .back-arrow {
    text-decoration: none;
    color: #888;
    font-size: 1.5rem;
}

/* Grid for thumbnails - Mobile First (2 columns) */
.vault-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.vault-item-link {
    text-decoration: none;
    display: block;
}

.vault-item {
    background-color: #e0e0e0;
    aspect-ratio: 4 / 5;
    cursor: pointer;
    transition: opacity 0.2s ease;
    overflow: hidden; /* Hide any part of the image that might overflow */
}

.vault-item:hover {
    opacity: 0.8;
}

.vault-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the container, cropping if necessary */
}

/* Article Page Styles */
.article-viewer {
    margin-bottom: 20px;
}

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 75vh;
    object-fit: contain;
}

.article-details {
    text-align: center; /* Center the text */
    margin-bottom: 40px; /* Add some space at the bottom */
}

.article-details p {
    font-size: 0.9rem; /* Unified font size */
    color: #888;       /* Unified text color */
    line-height: 1.6;   /* Slightly increase line height for readability */
    margin-bottom: 4px; /* Add a small space between paragraphs */
}

/* --- Responsive Media Queries --- */

/* Tablet: 2 columns for vault */
@media (min-width: 768px) {
    .vault-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop: 4 columns for vault and wider container */
@media (min-width: 1024px) {
    .vault, .article {
        max-width: 1200px;
    }

    .vault-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Main Navigation Styles */
.main-nav {
    text-align: center;
    margin-bottom: 20px; /* Reduced space before the filter */
}

.main-nav a {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 4px 0;
    font-size: 0.9rem;
}

.main-nav a.active {
    text-decoration: underline;
}

/* Filter Controls */
.filter-controls {
    text-align: center;
    margin-bottom: 20px;
    font-size: 0.9rem; /* Match base font size */
    line-height: 1.5;
}

#category-filter,
#size-filter {
    margin-bottom: 20px;
}

#size-filter {
    margin-top: -15px; /* Reduce space between the two filter lines */
}

.filter-controls .filter-label {
    margin-right: 8px;
}

.filter-option {
    display: inline-block; /* Keep checkbox and label together */
    white-space: nowrap; /* Prevent breaking between checkbox and label */
    margin-right: 15px;
}

.filter-controls label {
    cursor: pointer;
}

.filter-controls input[type="checkbox"] {
    margin-right: 4px;
    vertical-align: middle;
}


/* Custom Swiper Navigation Styles */
.swiper-button-next,
.swiper-button-prev {
    display: none; /* Hide by default on mobile */
    --swiper-navigation-color: #000000; /* Black color for arrows */
    opacity: 0.1; /* 10% opacity */
    transition: opacity 0.3s ease; /* Add a transition for hover effect */
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    opacity: 0.5;
}

/* Show Swiper arrows on larger screens */
@media (min-width: 1024px) {
    .swiper-button-next,
    .swiper-button-prev {
        display: flex;
    }
}

/* Footer Styles */
.main-footer {
    display: flex;
    justify-content: center;
    padding: 60px 20px;
}

.footer-bar {
    font-size: 0.9rem;
    color: #888;
}

#welcome-trigger {
    cursor: pointer;
}

/* --- Contact Form Styles --- */
.contact-form-container {
    max-width: 600px;
    margin: 40px auto; /* Add some vertical margin */
    padding: 20px;
}

.contact-form-container h2 {
    text-align: center;
    margin-bottom: 30px;
    font-weight: normal;
    font-size: 1rem;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: #555;
}

.form-group input[type="text"],
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    background-color: #fff;
    font-family: inherit;
    font-size: 1rem;
    color: #333;
    -webkit-appearance: none; /* Remove default iOS styling */
    -moz-appearance: none;
    appearance: none;
    border-radius: 0; /* Sharp corners */
}

.form-group input[type="text"]:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #333;
}

button[type="submit"] {
    display: inline-block; /* Changed to inline-block */
    width: auto; /* Changed to auto width */
    padding: 0; /* Removed padding */
    border: none; /* Removed border */
    background-color: transparent; /* Removed background color */
    color: inherit; /* Inherit text color */
    font-family: inherit;
    font-size: 1rem;
    text-decoration: underline; /* Added underline */
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

button[type="submit"]:hover {
    /* Optional: add a hover effect if desired, e.g., color change */
    color: #000;
}

/* --- Form Instructions Box --- */
.form-instructions {
    padding: 20px;
    margin-bottom: 30px;
    border: 1px solid #e0e0e0;
    background-color: #f9f9f9;
}

.form-instructions p {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.6;
}

/* Search Bar Styles */
.search-bar-container {
    text-align: center;
    padding: 40px 20px; /* Add vertical padding */
}

#search-input {
    font-family: inherit;
    font-size: 0.9rem;
    color: #888;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #ccc;
    padding: 8px;
    width: 100%;
    max-width: 400px;
    text-align: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

#search-input:focus {
    outline: none;
    border-bottom-color: #333;
}