@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');

html { overflow-y: scroll; }
body { font-family: 'Inter', sans-serif; background: #fdfdfd; margin: 0; padding: 0; color: #111; }

header {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 5%;
    height: var(--header-height, 80px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    z-index: 100;
}

.logo-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    height: 100%;
}

header h1 { margin: 0; font-size: 22px; color: #000; font-weight: 800; letter-spacing: -0.5px; }
header h1 img { height: var(--logo-height, 40px); max-height: calc(var(--header-height, 80px) - 10px); width: auto; vertical-align: middle; display: block; }

header nav { display: flex; gap: 25px; }
header nav a { text-decoration: none; color: var(--header-menu-color, #555); font-weight: 600; font-size: 15px; transition: color 0.2s; }
header nav a:hover { color: var(--header-menu-hover, #000); }

.controls { max-width: 1600px; margin: 20px auto; padding: 0 5%; display: flex; flex-wrap: wrap; gap: 15px; justify-content: space-between; align-items: center; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; }
.filter-btn { padding: 8px 18px; border: 1px solid #ddd; background: #fff; border-radius: 25px; cursor: pointer; font-size: 14px; transition: 0.2s; color: #555; }
.filter-btn.active, .filter-btn:hover { background: #111; color: #fff; border-color: #111; }
.search-input { padding: 10px 20px; border: 1px solid #ddd; border-radius: 25px; font-size: 14px; width: 250px; outline: none; transition: border 0.2s; }
.search-input:focus { border-color: #111; }

.container { max-width: 1600px; margin: 40px auto; padding: 0 5%; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--grid-gap-row, 50px) var(--grid-gap-col, 30px); }

.card { text-decoration: none; display: block; }
.card .img-wrap { width: 100%; aspect-ratio: var(--thumb-ratio, 4/3); overflow: hidden; border-radius: var(--thumb-radius, 12px); background: #eee; margin-bottom: 16px; position: relative; transform: translateZ(0); }
.card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.card:hover img { transform: scale(1.04); }

.card .info {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6); color: #fff;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    opacity: 0; transition: opacity 0.3s ease; padding: 20px; box-sizing: border-box; text-align: center;
}
.card:hover .info { opacity: 1; }
.card h3 { margin: 0 0 6px 0; font-size: 20px; color: #fff; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transform: translateY(15px); transition: transform 0.3s ease; }
.card p { margin: 0; color: #ccc; font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.5; transform: translateY(15px); transition: transform 0.3s ease; }
.card:hover h3, .card:hover p { transform: translateY(0); }

.empty-msg { grid-column: 1 / -1; text-align: center; padding: 100px 0; color: #999; font-size: 18px; background: #fff; border-radius: 8px; border: 1px dashed #ddd; }

footer { background: #f9f9f9; padding: 50px 5%; margin-top: 80px; border-top: 1px solid #eaeaea; color: #555; }
.footer-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
.footer-left { flex: 1; min-width: 300px; }
.footer-right { flex: 1; min-width: 300px; text-align: right; }
.footer-left p, .footer-right p { margin: 0; }
@media (max-width: 768px) {
    .footer-content { flex-direction: column; text-align: center; }
    .footer-right { text-align: center; }
}

/* Project Detail Page */
.project-detail-container {
    max-width: 900px;
    margin: 60px auto;
    padding: 0 5%;
}
.project-detail-container img.main-image {
    width: 100%;
    border-radius: 12px;
    margin-bottom: 40px;
}
.project-detail-container h2 {
    font-size: 36px;
    margin: 0 0 10px 0;
    font-weight: 800;
}
.project-detail-container .category {
    color: #1769ff;
    font-weight: 600;
    font-size: 16px;
    margin: 0 0 40px 0;
}
.project-detail-container .description {
    font-size: 17px;
    line-height: 1.5;
    color: #333;
}
.project-detail-container .description p,
.about-content p,
.blog-content p,
.footer-content p {
    margin: 0;
    padding: 0;
}
.project-detail-container .description img,
.about-content img,
.blog-content img,
.footer-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 0;
}
.project-detail-container .description iframe,
.about-content iframe,
.blog-content iframe,
.footer-content iframe {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 8px;
    margin: 0;
    border: none;
}
.project-detail-container .description a,
.about-content a,
.blog-content a,
.footer-content a {
    color: #333 !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}
.project-detail-container .description a:hover,
.about-content a:hover,
.blog-content a:hover,
.footer-content a:hover {
    color: #1769ff !important;
}

/* Tags for Programs and Equipments */
.meta-section { margin-top: 30px; padding-top: 25px; border-top: 1px solid #eee; }
.meta-section h3 { font-size: 18px; font-weight: 800; margin-bottom: 15px; color: #111; }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { background: #f9f9f9; color: #444; padding: 6px 14px; border-radius: 6px; font-size: 14px; font-weight: 500; border: 1px solid #e0e0e0; }

/* Contribution Chart */
.contribution-section { margin-top: 50px; padding-top: 30px; border-top: 1px solid #eee; }
.contribution-section h3 { font-size: 20px; font-weight: 800; margin-bottom: 20px; color: #111; }
.contribution-item { margin-bottom: 15px; }
.contribution-name { font-size: 15px; font-weight: 600; margin-bottom: 8px; display: flex; justify-content: space-between; color: #333; }
.contribution-name span { color: #888; font-weight: 400; }
.contribution-bar-bg { 
    border: 2px solid #ddd; 
    border-radius: 10px; 
    background: #fff; 
    overflow: hidden; 
    padding: 2px; /* 100% 외곽선과 솔리드 바 사이의 2px Offset */
    box-sizing: border-box;
}
.contribution-bar-fill { height: 100%; border-radius: 8px; transition: width 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.contribution-percent { font-weight: 700; font-size: 14px; text-align: right; width: 45px; }

/* Contact Page */
.contact-form {
    margin: 60px auto;
    padding: 40px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.contact-form h2 {
    text-align: center;
    margin-top: 0;
}

/* 에디터(Quill) 텍스트 정렬 및 크기 클래스 */
.ql-align-center { text-align: center !important; }
.ql-align-right { text-align: right !important; }
.ql-align-justify { text-align: justify !important; }
.ql-size-small { font-size: 0.75em !important; }
.ql-size-large { font-size: 1.5em !important; }
.ql-size-huge { font-size: 2.5em !important; }