@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;900&display=swap');
@import url('https://webfontworld.github.io/pretendard/Pretendard.css');

/* 요소(element) 여백 초기화  */
html, body,
div, span,
dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6,
blockquote, p, address, pre, cite,
form, fieldset, input, textarea, select,
table, th, td,figure {
	margin:0;
	padding:0;
	}

/* 테이블설정 */
table, th, td{
	margin:0;
}

/* 목록 */
ol, ul,li { list-style:none}

/* 테두리 없애기 */
fieldset, img, abbr,acronym { border:0 none; } 


/* 테이블 - 마크업에 'cellspacing="0"' 지정 함께 필요 */
table {
	border-collapse: separate;
	border-spacing:0;
	border:0 none;
	}

/* 텍스트 관련 요소 초기화 */
address, caption, em, cite, th {
	font-weight:normal;
	font-style:normal;
	}
ins { text-decoration:none; }
del { text-decoration:line-through; }

/* body 스타일 */
body,td,div {
	color:#5f5f5f;
	font-size:15px;
	font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
	font-weight:400;
	letter-spacing: -0.05em;
}
/* Prevent scrollbar flicker during page load */
body.loading {
    overflow-x: hidden;
}

/* 링크 */
a, a:link {color:#2f2f2f;text-decoration:none;} 
a:visited {color:#2f2f2f;text-decoration:none;}
a:hover {color:#326996;text-decoration:none;}
a:focus {color:#2f2f2f;text-decoration:none;}
a:active {color:#2f2f2f;text-decoration:none;} 

/* 이미지, 폼관련 요소 */
label, select, input, textarea {
	vertical-align:middle;
	box-sizing:border-box;
	font-size:15px;
}

select {
	padding:9px;
	border:1px solid #D8D8D8;
	background-color:#ffffff;
	font-size:1.05em;
	border-radius:6px;
}

.thm7{font-size:11px; font-family:tahoma;letter-spacing: 0pt}
.input_{border:1px solid #D8D8D8; background-color:#ffffff;padding:9px;font-size:1.05em;border-radius:6px}


/* 관리자전용알림 */
.adminmess{display:flex;text-align:center;max-width:500px;margin:0 auto;border:2px dashed #000000;padding:10px ;background-color:#efefef;margin-top:10px;box-sizing:border-box;;align-items:center}
.adminmess span:first-child{display:block;padding:5px 20px;background-color:#595C60;color:#ffffff;border-radius:6px}
.adminmess span:last-child{padding-left:20px}


/* 네비게이션 디자인 */
.navi_design{background-color:#F5F5F5;border:1px solid #dddddd;text-align:left;height:50px;line-height:50px;}
.navi_design h2{display:none}
.navi_design ul{float:left;padding-left:10px}
.navi_design ul li{float:left;padding:0 20px;background:url(../image/A_icon_7.gif);background-repeat:no-repeat;background-Position:100% 50%;}
.navi_design ul li:last-child{background:url();}

.name_popup ul{position:absolute; z-index:1; left:0px; top:10px;background-color:#ffffff;border:1px solid #dddddd;width:120px;border-radius:10px;padding:10px}
.name_popup ul li > a{display:block;padding:5px 10px;}


/* 작성폼등에 설명글용 */
div.mess{margin-top:10px;color:#838383;line-height:1.3em}
span.mess{margin-left:10px;color:#838383}
div.guid{margin-top:10px;padding:10px;background-color:#efefef;border:1px solid #dddddd;border-radius:10px}


/* placeholder 색상변경 */
input::placeholder {color:#ccc;}
input::-webkit-input-placeholder {color:#ccc;}
input:-ms-input-placeholder {color:#ccc;} 
textarea::placeholder {color:#ccc;}
textarea::-webkit-input-placeholder {color:#ccc;}
textarea:-ms-input-placeholder {color:#ccc;}


/* Greeting Card */
.greeting-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    padding: 40px;
    margin-bottom: 30px;
    transition: all 0.3s ease;
}

.greeting-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.12);
}

.greeting-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #e2e8f0;
}

.greeting-title {
    font-size: 24px;
    color: #2c5282;
    font-weight: 700;
    margin-bottom: 10px;
}

.greeting-subtitle {
    font-size: 16px;
    color: #666;
}

.greeting-content {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
    text-align: justify;
    position: relative;
}

.greeting-photo-container {
    float: left;
    margin: 0 25px 20px 0;
}

.greeting-photo {
    width: 180px;
    height: 220px;
    border-radius: 8px;
    object-fit: cover;
    border: 3px solid #2c5282;
    box-shadow: 0 8px 25px rgba(44, 82, 130, 0.15);
}

.greeting-text {
    text-align: justify;
}

.greeting-content::after {
    content: "";
    display: table;
    clear: both;
}

.greeting-content p {
    margin-bottom: 20px;
}

.greeting-content p:last-child {
    margin-bottom: 0;
}

.highlight {
    color: #2c5282;
    font-weight: 600;
}

.signature-section {
    margin-top: 40px;
    text-align: right;
    padding-top: 30px;
    border-top: 1px solid #e2e8f0;
}

.signature-date {
    font-size: 14px;
    color: #666;
    margin-bottom: 15px;
}

.signature-name {
    font-size: 18px;
    font-weight: 700;
    color: #2c5282;
}

.signature-title {
    font-size: 14px;
    color: #666;
    margin-top: 5px;
}



/* Quote decoration */
.quote-decoration {
    position: relative;
    padding: 20px 0;
    margin: 30px 0;
}

.quote-decoration::before {
    content: '"';
    position: absolute;
    top: -10px;
    left: -10px;
    font-size: 60px;
    color: #2c5282;
    opacity: 0.3;
    font-family: serif;
}

.quote-decoration::after {
    content: '"';
    position: absolute;
    bottom: -40px;
    right: -10px;
    font-size: 60px;
    color: #2c5282;
    opacity: 0.3;
    font-family: serif;
}

/* Responsive Design */
@media (max-width: 768px) {
    .nav-menu {
        display: none;
    }

    .hero h1 {
        font-size: 24px;
    }

    .section-header h2 {
        font-size: 28px;
    }

    .greeting-card {
        padding: 25px;
        margin: 0 -10px 30px -10px;
    }

    .greeting-title {
        font-size: 20px;
    }

    .greeting-content {
        font-size: 15px;
        line-height: 1.7;
    }

    .main-content {
        padding: 30px 15px;
    }

    .quote-decoration::before,
    .quote-decoration::after {
        font-size: 40px;
    }

    .sub-nav-menu {
        flex-direction: column;
        width: 100%;
    }

    .sub-nav-menu li {
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
    }

    .sub-nav-menu li:last-child {
        border-bottom: none;
    }

    .sub-nav-menu a {
        padding: 15px 20px;
    }

    .greeting-photo-container {
        float: none;
        margin: 0 auto 20px auto;
        text-align: center;
    }

    .greeting-photo {
        width: 140px;
        height: 170px;
    }

    .greeting-text {
        text-align: left;
    }
}

/* Timeline Container */
        .timeline-container {
            position: relative;
            max-width: 600px;
            margin: 0 auto;
        }

        /* Timeline Vertical Line */
        .timeline-container::before {
            content: '';
            position: absolute;
            left: 80px;
            top: 0;
            bottom: 0;
            width: 2px;
            background: #e2e8f0;
        }

        /* Year Section */
        .year-section {
            margin-bottom: 40px;
            position: relative;
        }

        .year-header {
            display: flex;
            align-items: center;
            margin-bottom: 30px;
            position: relative;
        }

        .year-number {
            font-size: 48px;
            font-weight: 900;
            color: #2c5282;
            width: 150px;
            line-height: 1;
            position: relative;
            z-index: 2;
        }

        .year-subtitle {
            font-size: 14px;
            color: #666;
            margin-left: 20px;
            position: relative;
            top: 10px;
        }

        /* Timeline Items */
        .timeline-items {
            margin-left: 0;
        }

        .timeline-item {
            position: relative;
            margin-bottom: 25px;
            padding-left: 120px;
            display: flex;
            align-items: center;
        }

        /* Timeline Dot */
        .timeline-item::before {
            content: '';
            position: absolute;
            left: 72px;
            top: 50%;
            transform: translateY(-50%);
            width: 16px;
            height: 16px;
            background: #2c5282;
            border-radius: 50%;
            border: 3px solid #fff;
            box-shadow: 0 0 0 3px #2c5282;
            z-index: 3;
        }

        .timeline-content {
            background: #fff;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            padding: 15px 20px;
            flex: 1;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
        }

        .timeline-content:hover {
            transform: translateX(5px);
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
            border-color: #2c5282;
        }

        .timeline-period {
            font-size: 14px;
            color: #2c5282;
            font-weight: 600;
            margin-bottom: 5px;
        }

        .timeline-title {
            font-size: 16px;
            font-weight: 700;
            color: #333;
            margin-bottom: 3px;
        }

        .timeline-subtitle {
            font-size: 13px;
            color: #666;
        }

        /* Special Items */
        .timeline-item.special .timeline-content {
            background: linear-gradient(135deg, #2c5282, #3c6382);
            color: white;
            border-color: #2c5282;
        }

        .timeline-item.special .timeline-period {
            color: #e2e8f0;
        }

        .timeline-item.special .timeline-title {
            color: white;
        }

        .timeline-item.special .timeline-subtitle {
            color: #e2e8f0;
        }

        .timeline-item.special::before {
            background: #fff;
            box-shadow: 0 0 0 3px #2c5282;
        }

        /* Current Item */
        .timeline-item.current .timeline-content {
            background: linear-gradient(135deg, #e53e3e, #c53030);
            color: white;
            border-color: #e53e3e;
            position: relative;
        }

        .timeline-item.current .timeline-content::after {
            content: '현재';
            position: absolute;
            top: -8px;
            right: -8px;
            background: #fff;
            color: #e53e3e;
            font-size: 10px;
            font-weight: 700;
            padding: 3px 8px;
            border-radius: 10px;
            border: 2px solid #e53e3e;
        }

        .timeline-item.current .timeline-period {
            color: #fee;
        }

        .timeline-item.current .timeline-title {
            color: white;
        }

        .timeline-item.current .timeline-subtitle {
            color: #fee;
        }

        .timeline-item.current::before {
            background: #e53e3e;
            box-shadow: 0 0 0 3px #fff, 0 0 0 6px #e53e3e;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 3px #fff, 0 0 0 6px #e53e3e;
            }
            50% {
                box-shadow: 0 0 0 3px #fff, 0 0 0 10px rgba(229, 62, 62, 0.3);
            }
            100% {
                box-shadow: 0 0 0 3px #fff, 0 0 0 6px #e53e3e;
            }
        }
/* Constitution Styles */
        .constitution-container {
            background: #fff;
            border: 1px solid #e2e8f0;
            box-shadow: 0 5px 20px rgba(0,0,0,0.05);
            padding: 20px;
            margin-bottom: 15px;
        }

        .chapter {
            margin-bottom: 20px;
        }

        .chapter-title {
            font-size: 20px;
            color: #2c5282;
            font-weight: 700;
            margin-bottom: 10px;
            padding: 8px 15px;
            background: #f8fafc;
            border-left: 4px solid #2c5282;
            border-radius: 0 6px 6px 0;
        }

        .article {
            margin-bottom: 15px;
            padding: 12px;
            background: #fafbfc;
            border-radius: 6px;
            border: 1px solid #e2e8f0;
        }

        .article-title {
            font-size: 16px;
            font-weight: 700;
            color: #2c5282;
            margin-bottom: 8px;
        }

        .article-content {
            font-size: 14px;
            line-height: 1.6;
            color: #333;
        }

        .article-content p {
            margin-bottom: 5px;
        }

        .article-content p:last-child {
            margin-bottom: 0;
        }

        .sub-item {
            margin-left: 15px;
            margin-bottom: 4px;
            position: relative;
        }

        .sub-item::before {
            content: "•";
            color: #2c5282;
            font-weight: bold;
            position: absolute;
            left: -15px;
        }

        .highlight-box {
            background: #e6f3ff;
            border: 1px solid #4a90e2;
            border-radius: 6px;
            padding: 12px;
            margin: 10px 0;
        }

        .highlight-box h3 {
            color: #2c5282;
            font-size: 16px;
            margin-bottom: 8px;
        }

        .addendum {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 6px;
            padding: 15px;
            margin-top: 20px;
        }

        .addendum-title {
            font-size: 18px;
            font-weight: 700;
            color: #2c5282;
            text-align: center;
            margin-bottom: 10px;
        }

        /* Table of Contents */
        .toc {
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 30px;
        }

        .toc h3 {
            font-size: 18px;
            color: #2c5282;
            margin-bottom: 15px;
            text-align: center;
        }

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

        .toc-list li {
            padding: 8px 0;
            border-bottom: 1px solid #e2e8f0;
        }

        .toc-list li:last-child {
            border-bottom: none;
        }

        .toc-list a {
            text-decoration: none;
            color: #4a5568;
            font-weight: 500;
            transition: color 0.3s ease;
        }

        .toc-list a:hover {
            color: #2c5282;
        }
/* Organization Chart */
        .org-chart {
            background: #fff;
            border: 1px solid #e2e8f0;
            box-shadow: 0 10px 40px rgba(0,0,0,0.08);
            padding: 20px;
            overflow-x: auto;
        }

        .org-title {
            text-align: center;
            font-size: 24px;
            font-weight: 700;
            color: white;
            margin-bottom: 20px;
            background: #2c5282;
            padding: 15px;
            margin: -20px -20px 20px -20px;
        }

        .org-structure {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 15px;
        }

        /* Top Level - 회장 */
        .president-level {
            display: flex;
            justify-content: center;
            margin-bottom: 15px;
        }

        .president-box {
            background: #2c5282;
            color: white;
            padding: 15px 25px;
            font-size: 16px;
            font-weight: 700;
            text-align: center;
            box-shadow: 0 8px 25px rgba(44, 82, 130, 0.3);
            min-width: 150px;
        }

        /* Main Departments */
        .main-departments {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            width: 100%;
            margin-bottom: 15px;
        }

        .department {
            background: #fff;
            border: 2px solid #e2e8f0;
            padding: 15px;
            text-align: center;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0,0,0,0.08);
        }

        .department:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0,0,0,0.15);
            border-color: #2c5282;
        }

        .department-header {
            background: #2c5282;
            color: white;
            padding: 10px;
            font-size: 14px;
            font-weight: 700;
            margin-bottom: 15px;
        }

        .position {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 12px;
            margin-bottom: 4px;
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            transition: all 0.3s ease;
        }

        .position:hover {
            background: #e2e8f0;
            border-color: #2c5282;
        }

        .position-title {
            font-weight: 600;
            color: #2c5282;
            font-size: 14px;
        }

        .position-name {
            font-weight: 500;
            color: #4a5568;
            font-size: 13px;
        }

        /* Sub Departments */
        .sub-departments {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 15px;
            width: 100%;
        }

        .sub-department {
            background: #fff;
            padding: 0px 15px 10px 15px;
            text-align: center;
            transition: all 0.3s ease;
        }


        .sub-department-header {
            background: #2c5282;
            color: white;
            padding: 10px;
            font-size: 14px;
            font-weight: 700;
            margin-top: 21px;
        }

        .sub-position {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 6px 10px;
            margin-bottom: 3px;
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            transition: all 0.3s ease;
            font-size: 12px;
        }

        .sub-position:hover {
            background: #e2e8f0;
            border-color: #2c5282;
        }

        .sub-position-title {
            font-weight: 600;
            color: #2c5282;
        }

        .sub-position-name {
            font-weight: 500;
            color: #4a5568;
        }

        /* Connection Lines */
        .connection-line {
            width: 2px;
            height: 15px;
            background: #2c5282;
            margin: 0 auto;
        }

        .horizontal-line {
            height: 2px;
            background: #2c5282;
            width: 100%;
            margin: 10px 0;
        }

		.meetings-section {
            margin-top: 50px;
            margin-bottom: 40px;
        }

        .section-title {
            font-size: 24px;
            font-weight: 700;
            color: #2c5282;
            text-align: center;
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 2px solid #e2e8f0;
        }

        .meetings-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            max-width: 1000px;
            margin: 0 auto;
        }

        .meeting-link {
            text-decoration: none;
            color: inherit;
            display: block;
        }

        .meeting-item {
            background: #fff;
            /* border-radius: 4px; */
            border: 1px solid #e2e8f0;
            padding: 10px;
            text-align: center;
            /* box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08); */
            transition: all 0.3s ease;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .meeting-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background:#2c5282;
        }

        .meeting-item.regional-meeting::before {
            background:#2c5282;
        }

        .meeting-item.club-meeting::before {
            background:#2c5282;
        }

        .meeting-item.preparing::before {
            background:#2c5282;
        }

        .meeting-item:hover {
            border-color: #2c5282;
        }

        .meeting-item.preparing:hover {
            border-color: #cbd5e0;
        }

        .meeting-name {
            font-size: 16px;
            font-weight: 500;
            color: #2c5282;
        }

        .meeting-item.preparing .meeting-name {
            color: #718096;
        }

        .meeting-item.regional-meeting:hover {
            border-color: #2c5282;
        }

        .meeting-item.club-meeting:hover {
            border-color:#2c5282;
        }

        /* External Link Icon */
        .meeting-item::after {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 12px;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
		.class-grid-container {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 15px;
            margin-bottom: 30px;
            max-width: 1000px;
            margin: 0 auto;
        }

        .class-item {
            background: #fff;
            /* border-radius: 4px; */
            border: 1px solid #e2e8f0;
            padding: 10px;
            text-align: center;
            /* box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08); */
            transition: all 0.3s ease;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            text-decoration: none;
            color: inherit;
            display: block;
        }


        .class-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: #2c5282;
        }

        .class-item:hover {
            transform: translateY(-5px);
            border-color: #2c5282;
        }

        .class-number {
            font-size: 18px;
            font-weight: 500;
            color: #2c5282;
        }

        /* Round Box Styles */
        .round-box {
            background: #fff;
            border-radius: 15px;
            border: 2px solid #e2e8f0;
            padding: 25px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.08);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .round-box::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: #2c5282;
        }

        .round-box:hover {
            transform: translateY(-5px);
            border-color: #2c5282;
        }

        .round-box-header {
            text-align: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid #f8fafc;
        }

        .round-box-title {
            font-size: 20px;
            font-weight: 700;
            color: #2c5282;
            margin-bottom: 5px;
        }

        .round-box-subtitle {
            font-size: 14px;
            color: #666;
        }

        .round-box-content {
            text-align: center;
        }

        .member-count {
            display: inline-block;
            background: #2c5282;
            color: white;
            padding: 15px 25px;
            border-radius: 25px;
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 15px;
            box-shadow: 0 5px 15px rgba(44, 82, 130, 0.3);
        }

        .member-info {
            font-size: 14px;
            color: #666;
            margin-bottom: 15px;
        }

        .contact-info {
            background: #f8fafc;
            border-radius: 10px;
            padding: 15px;
            margin-top: 15px;
        }

        .contact-title {
            font-size: 14px;
            font-weight: 500;
            color: #2c5282;
            margin-bottom: 8px;
        }

        .contact-detail {
            font-size: 13px;
            color: #555;
            margin-bottom: 3px;
        }

        .contact-detail:last-child {
            margin-bottom: 0;
        }

        /* Special boxes for different categories */
        .round-box.regional {
            border-color: #38a169;
        }

        .round-box.regional::before {
            background: linear-gradient(135deg, #38a169, #48bb78);
        }

        .round-box.regional .member-count {
            background: linear-gradient(135deg, #38a169, #48bb78);
        }

        .round-box.class {
            border-color: #d69e2e;
        }

        .round-box.class::before {
            background: linear-gradient(135deg, #d69e2e, #ecc94b);
        }

        .round-box.class .member-count {
            background: linear-gradient(135deg, #d69e2e, #ecc94b);
        }

        .round-box.club {
            border-color: #9f7aea;
        }

        .round-box.club::before {
            background: linear-gradient(135deg, #9f7aea, #b794f6);
        }

        .round-box.club .member-count {
            background: linear-gradient(135deg, #9f7aea, #b794f6);
        }

        /* Statistics Section */
        .statistics-section {
            background: #f8fafc;
            border-radius: 15px;
            padding: 30px;
            margin-bottom: 30px;
            text-align: center;
        }

        .statistics-title {
            font-size: 24px;
            font-weight: 700;
            color: #2c5282;
            margin-bottom: 20px;
        }

        .statistics-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 20px;
        }

        .stat-item {
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }

        .stat-number {
            font-size: 28px;
            font-weight: 700;
            color: #2c5282;
            margin-bottom: 5px;
        }

        .stat-label {
            font-size: 14px;
            color: #666;
        }

        /* Meetings Section */
        .meetings-section {
            margin-top: 50px;
            margin-bottom: 40px;
        }

        .section-title {
            font-size: 24px;
            font-weight: 700;
            color: #2c5282;
            text-align: center;
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 2px solid #e2e8f0;
        }

        .meetings-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            max-width: 1000px;
            margin: 0 auto;
        }

        .meeting-link {
            text-decoration: none;
            color: inherit;
            display: block;
        }

        .meeting-item {
            background: #fff;
            /* border-radius: 4px; */
            border: 1px solid #e2e8f0;
            padding: 10px;
            text-align: center;
            /* box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08); */
            transition: all 0.3s ease;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .meeting-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background:#2c5282;
        }

        .meeting-item.regional-meeting::before {
            background:#2c5282;
        }

        .meeting-item.club-meeting::before {
            background:#2c5282;
        }

        .meeting-item.preparing::before {
            background:#2c5282;
        }

        .meeting-item:hover {
            border-color: #2c5282;
        }

        .meeting-item.preparing:hover {
            border-color: #cbd5e0;
        }

        .meeting-name {
            font-size: 16px;
            font-weight: 500;
            color: #2c5282;
        }

        .meeting-item.preparing .meeting-name {
            color: #718096;
        }

        .meeting-item.regional-meeting:hover {
            border-color: #2c5282;
        }

        .meeting-item.club-meeting:hover {
            border-color:#2c5282;
        }

        /* External Link Icon */
        .meeting-item::after {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 12px;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

@media screen and (max-width:768px) { 

			.greeting-card {
                padding: 25px;
                margin: 0 -10px 30px -10px;
            }

            .greeting-title {
                font-size: 20px;
            }

            .greeting-content {
                font-size: 15px;
                line-height: 1.7;
            }
			.timeline-container {
                max-width: 100%;
                padding: 0 10px;
            }

            .timeline-container::before {
                left: 30px;
            }

            .year-number {
                font-size: 36px;
                width: 100px;
            }

            .year-subtitle {
                margin-left: 10px;
                font-size: 12px;
            }

            .timeline-item {
                padding-left: 70px;
                margin-bottom: 20px;
            }

            .timeline-item::before {
                left: 22px;
                width: 12px;
                height: 12px;
            }

            .timeline-content {
                padding: 12px 15px;
            }

            .timeline-period {
                font-size: 12px;
            }

            .timeline-title {
                font-size: 14px;
            }

            .timeline-subtitle {
                font-size: 12px;
            }

            .year-section {
                margin-bottom: 30px;
            }
			
			.main-departments {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            .sub-departments {
                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                gap: 20px;
            }

			.org-chart {
                padding: 15px;
                margin: 0 -10px;
            }

            .org-title {
                font-size: 20px;
                padding: 12px;
                margin: -15px -15px 15px -15px;
            }

            .president-box {
                padding: 15px 25px;
                font-size: 16px;
                min-width: 150px;
            }

            .department-header,
            .sub-department-header {
                font-size: 14px;
                padding: 10px;
            }

            .main-content {
                padding: 15px;
            }
			
			.constitution-container {
                padding: 15px;
                margin: 0 -5px 15px -5px;
            }

            .chapter-title {
                font-size: 18px;
                padding: 8px 12px;
            }
			
			.class-grid-container {
                grid-template-columns: repeat(2, 1fr);
                gap: 8px;
            }

            .class-item {
                padding: 12px 8px;
            }

            .class-number {
                font-size: 14px;
            }

            .meetings-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 15px;
            }

            .meeting-item {
                padding: 15px;
            }

            .meeting-name {
                font-size: 14px;
            }

            .section-title {
                font-size: 20px;
            }
			
			.tab-navigation {
                flex-direction: column;
                gap: 10px;
            }

            .tab-button {
                width: 100%;
                text-align: center;
            }

            .round-box-container {
                grid-template-columns: 1fr;
                gap: 15px;
            }

            .round-box {
                padding: 20px;
            }

            .round-box-title {
                font-size: 18px;
            }

            .member-count {
                font-size: 20px;
                padding: 12px 20px;
            }

            .statistics-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 15px;
            }

            .class-grid-container {
                grid-template-columns: repeat(3, 1fr);
                gap: 10px;
            }

            .class-item {
                padding: 15px 10px;
            }

            .class-number {
                font-size: 16px;
            }

}

		/* Animations */
        .fade-in {
            opacity: 0;
            transform: translateY(0);
            animation: fadeInUp 0.8s ease forwards;
        }

        @keyframes fadeInUp {
            0% {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .fade-in:nth-child(1) { animation-delay: 0.1s; }
        .fade-in:nth-child(2) { animation-delay: 0.2s; }
        .fade-in:nth-child(3) { animation-delay: 0.3s; }
        .fade-in:nth-child(4) { animation-delay: 0.4s; }
        .fade-in:nth-child(5) { animation-delay: 0.5s; }