/* --- 기본 설정 --- */
:root {
    --font-serif: 'Paperlogy', sans-serif;
    --font-sans: 'Paperlogy', sans-serif;
    --text-color: #333;
    --bg-gray: #f9f9f9;
    --accent-color: #000;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html {
    scroll-behavior: smooth; /* 핵심: 부드러운 이동 활성화 */
}
body { font-family: var(--font-sans); color: var(--text-color); line-height: 1.6; }
a { text-decoration: none; color: inherit; transition: 0.3s; }
ul { list-style: none; }
img { width: 100%; display: block; }

/* 공통 유틸리티 */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.section-padding { padding: 100px 0; }
.bg-gray { background-color: var(--bg-gray); }
.serif-title { font-family: var(--font-serif); font-size: 2.5rem; margin-bottom: 20px; font-style: italic; }
.center { text-align: center; }.section-header p { color: #888; margin-bottom: 50px; letter-spacing: 1px; font-size: 0.9rem; }

/* --- 네비게이션 --- */
nav { position: absolute; top: 0; width: 100%; z-index: 100; padding: 20px 0; color: #fff; }
/*.nav-container { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; padding: 0 20px; }*/
.logo { font-family: var(--font-serif); font-size: 1.5rem; font-weight: bold; }

/* --- [수정] 네비게이션 스타일 (Bootstrap 커스텀) --- */
.navbar {
    padding: 15px 0;
    transition: all 0.4s ease;
    background: transparent; /* 기본 투명 */
}

.navbar-brand {
    font-family: var(--font-serif);
    font-size: 1.8rem;
    font-weight: bold;
    color: #fff !important;
    letter-spacing: 2px;
}



/* 햄버거 버튼 아이콘 색상 */
.navbar-toggler {
    border: none;
    box-shadow: none !important;
}
.navbar-toggler i {
    font-size: 1.5rem;
    color: #fff;
}

/* 메뉴 링크 스타일 */
.nav-link {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9) !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 10px;
    position: relative;
    transition: 0.3s;
}


/* --- [추가] 드롭다운 메뉴 스타일 (Cool & Glassy) --- */
.dropdown-menu {
    border: none;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.95); /* 거의 불투명한 흰색 */
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    padding: 15px 0;
    margin-top: 15px; /* 메뉴와 간격 */

    /* 애니메이션 설정 */
    display: block; /* 애니메이션을 위해 강제 display (JS가 opacity 조절) */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
}




/* =========================================
   JS 스크롤 이벤트용 클래스 (기존 유지)
   ========================================= */
.navbar.scrolled {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}
.navbar.past-hero {
    background: #222;
    padding: 10px 0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* --- [JS 연동] 스크롤 상태별 스타일 --- */
/* 1. 스크롤 중 (유리 효과) */
.navbar.scrolled {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 15px 0; /* 높이 살짝 줄임 */
}

/* 2. 히어로 섹션 지남 (진한 배경) */
.navbar.past-hero {
    background: #222;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    padding: 15px 0;
}
/* [추가] 애니메이션 정의가 빠져 있어서 추가해야 함 */
@keyframes zoomIn {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
}

/* --- 기존 Hero Section 유지 --- */
.hero-section {
    /* 기존 코드 유지 */
    height: 90vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    overflow: hidden; /* 이미지가 커질 때 섹션을 넘어가지 않게 방지 */
}

.hero-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center;
    filter: brightness(0.6);
    z-index: -1;
    /* zoomIn 애니메이션 적용 */
    animation: zoomIn 10s infinite alternate;
}


/* --- 1. Hero Section ---
.hero-section {
    height: 90vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}
.hero-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center;
    filter: brightness(0.6); z-index: -1;
	z-index: -1;
    animation: zoomIn 20s infinite alternate;
}*/
.hero-subtitle { font-size: 0.9rem; letter-spacing: 3px; margin-bottom: 10px; text-transform: uppercase; }
.hero-title { font-family: var(--font-serif); font-size: 3rem; line-height: 1.2; margin-bottom: 40px; }
.btn-outline {
    border: 1px solid #fff; padding: 15px 40px; color: #fff; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 2px;
}
.btn-outline:hover { background: #FEE500;border: 1px solid #FEE500;  color: #000; }


/* --- 2. Philosophy Section --- */
.philosophy-grid { display: flex; align-items: center; gap: 80px; }
.philo-text { flex: 1; }
.philo-desc { color: #555; margin-bottom: 30px; font-weight: 300; line-height: 1.8; }
.sign { font-family: var(--font-serif); font-style: italic; display: block; text-align: right; color: #888; }
.philo-img { flex: 1; box-shadow: 20px 20px 0 rgba(0,0,0,0.05); }

/* --- 3. Team Section --- */
.team-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px;
}
.team-card { text-align: left; }
.member-img {
    width: 100%; aspect-ratio: 1/1; /* 정사각형 */
    background-size: cover; background-position: center;
    margin-bottom: 20px; background-color: #ddd;
}
.team-card h3 { font-size: 1.8rem; margin-bottom: 5px; font-weight: 500; }
.team-card p { font-size: 0.85rem; color: #888; text-transform: uppercase; letter-spacing: 1px; }

/* --- 4. Curriculum Section --- */
/* --- [추가] Swiper 슬라이더 관련 스타일 --- */
.swiper {
    width: 100%;
    padding-bottom: 50px !important; /* 페이지네이션(점) 공간 확보 */
	padding-top: 30px !important;
}

.swiper-slide {
    height: auto; /* 카드 높이 동일하게 맞춤 */
    display: flex;
    justify-content: center;
}

.course-card {
    width: 100%; /* 슬라이드 꽉 채우기 */
    /* 기존 스타일 유지 */
    background: #fff;
    transition: transform 0.3s;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}

/* --- [추가] 커스텀 화살표 버튼 스타일 --- */
.custom-nav-btn {
    color: #333 !important; /* 화살표 색상 (검정) */
    background: #fff;       /* 버튼 배경 (흰색) */
    width: 50px !important;
    height: 50px !important;
    border-radius: 50%;     /* 둥근 버튼 */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* 그림자 */
    transition: 0.3s;
}

.custom-nav-btn:hover {
    background: #333;
    color: #fff !important;
}

/* 화살표 크기 줄이기 */
.custom-nav-btn::after {
    font-size: 1.2rem !important;
    font-weight: bold;
}

/* 페이지네이션 (점) 색상 */
.swiper-pagination-bullet-active {
    background: #333 !important;
}
/*
.course-card {
    background: #fff; transition: transform 0.3s;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}
*/
.course-card:hover { transform: translateY(-10px); }
.course-img { height: 250px; background-size: cover; background-position: center; }
.course-body { padding: 30px; text-align: left; }
.level-tag { font-size: 0.7rem; color: #999; letter-spacing: 1px; display: block; margin-bottom: 10px; font-weight: bold; }
.course-card h3 { font-size: 1.2rem; margin-bottom: 15px; font-weight: bold; text-transform: uppercase; }
.course-card p { font-size: 0.9rem; color: #666; margin-bottom: 25px; line-height: 1.5; }
.details-link { font-size: 0.75rem; font-weight: bold; border-bottom: 1px solid #333; padding-bottom: 3px; }

/* --- 5. Journal Layout (Asymmetrical) --- */
.journal-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 50px; }
.journal-quote {
    font-family: var(--font-serif); font-size: 1.8rem; font-style: italic; margin-bottom: 30px; line-height: 1.4;
}
.journal-img-box {
    width: 100%; height: 300px; background-color: #e0e0e0; margin-bottom: 20px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.journal-caption { font-size: 0.75rem; color: #888; text-transform: uppercase; margin-bottom: 20px; letter-spacing: 1px; }

.journal-layout {
    /* 기존 grid 관련 속성 제거 또는 덮어쓰기 */
    display: flex; /* 그리드 대신 플렉스 사용 */
    gap: 50px;     /* 좌우 간격 */
    align-items: stretch; /* 핵심! 좌우 높이를 똑같이 맞춤 */
}

/* 1. 왼쪽 영역 (갤러리) 스타일 */
.journal-left {
    flex: 1.5; /* 오른쪽보다 조금 더 넓게 (비율 조정 가능) */
    display: flex;
    flex-direction: column; /* 세로 배치 */
}

.journal-quote {
    /* 기존 h3 스타일 유지 */
    font-family: var(--font-serif);
    font-size: 1.8rem;
    font-style: italic;
    margin: 0;
    color: #333;
}

/* 이미지 박스 키우기 */
.journal-img-box {
    width: 100%;
    flex-grow: 1; /* 남은 높이를 모두 채움 (핵심!) */
    min-height: 400px; /* 최소 높이 보장 (콘텐츠가 없을 때도 모양 유지) */
    background-size: cover;
    background-position: center;
    background-color: #e0e0e0;
    margin-bottom: 0; /* 하단 마진 제거 */
    border-radius: 2px;
    position: relative; /* 캡션 오버레이 기준점 */
}

/* (선택사항) 이미지 캡션 오버레이 스타일 */
.img-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent); /* 하단 그라데이션 */
    color: #fff;
}

.journal-caption {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    color: #fff; /* 흰색으로 변경 */
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 2. 오른쪽 영역 (공지+FAQ) 스타일 (기존 유지) */
.journal-right {
    flex: 1; /* 왼쪽보다 좁게 */
    display: flex;
    flex-direction: column;
    gap: 30px;
    /* height: 100%; 은 stretch가 하므로 제거해도 됨 */
}

/* ... 나머지 .block-header, .header-more 등의 스타일은 이전에 추가한 코드가 적용됩니다 ... */




/* 공통 블록 스타일 */
.info-block {
    background-color: #f9f9f9;
    padding: 30px;
    border-radius: 2px; /* 살짝 부드럽게 */
}

/* 1. 공지사항 영역 (공간을 많이 차지하도록 설정) */
.notice-area {
    flex-grow: 1; /* 남은 공간을 모두 채움 */
    display: flex;
    flex-direction: column;
}

/* 공지사항 헤더 (타이틀 - 더보기 정렬) */
.block-header {
    display: flex;
    justify-content: space-between; /* 양옆으로 찢기 */
    align-items: flex-end; /* 텍스트 바닥 라인 맞춤 */
    margin-bottom: 20px;
    border-bottom: 2px solid #333; /* 제목 아래 굵은 선 */
    padding-bottom: 10px;
}

.block-header h4 {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-style: italic;
    margin: 0;
}

.header-more {
    font-size: 0.8rem;
    color: #888;
    font-weight: 500;
}
.header-more:hover {
    color: #000;
    text-decoration: underline;
}

/* 공지사항 리스트 디자인 */
.notice-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.notice-list li {
    border-bottom: 1px solid #e0e0e0;
}
.notice-list li:last-child {
    border-bottom: none;
}

.notice-list a {
    display: flex;
    align-items: center;
    padding: 15px 0;
    color: #555;
    transition: 0.2s;
    font-size: 0.95rem;
}

.notice-list a:hover {
    color: #000;
    padding-left: 5px; /* 호버 시 살짝 오른쪽 이동 */
    background: rgba(0,0,0,0.02);
}

.notice-list .date {
    font-weight: 700;
    color: #999;
    margin-right: 15px;
    font-size: 0.85rem;
    min-width: 80px; /* 날짜 정렬을 위한 최소 너비 */
}
.notice-list .text {
    white-space: nowrap;      /* 줄바꿈 금지 */
    overflow: hidden;         /* 넘치는 글자 숨김 */
    text-overflow: ellipsis;  /* 말줄임표(...) 처리 */
}

/* 2. FAQ 영역 (버튼 형태) */
.faq-area {
    flex-grow: 0; /* 콘텐츠 크기만큼만 차지 */
    background-color: #222; /* 다크 모드 */
    color: #fff;
    text-decoration: none !important; /* 링크 밑줄 제거 */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s, background 0.3s;
    cursor: pointer;
    min-height: 100px; /* 최소 높이 보장 */
}

.faq-area:hover {
    background-color: #000;
    transform: translateY(-5px); /* 살짝 떠오르는 효과 */
}

.faq-content {
    text-align: center;
}

.faq-content h4 {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    margin-bottom: 5px;
    color: #fff;
}

.faq-content p {
    margin: 0;
    font-size: 0.9rem;
    color: #ccc;
}
.faq-content span {
    color: #fff;
    font-weight: bold;
    margin-left: 5px;
}



/* --- 6. Contact Section --- */
.contact-section { text-align: center; border-top: 1px solid #eee; }
/* 1. 버튼 공통 설정 */
.contact-buttons .snsBtn {
    border: none;
    color: white;             /* 기본 글씨 흰색 */
    padding: 12px 30px;       /* 넉넉한 크기 */
    margin: 5px;              /* 버튼 간 간격 */
    border-radius: 50px;      /* 둥근 캡슐 모양 */
    font-weight: 400;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    /*box-shadow: 0 4px 6px rgba(0,0,0,0.1);*/
}

/* 호버 효과 (살짝 위로 뜨게) */
.contact-buttons .snsBtn:hover {
    transform: translateY(-3px);
    /*box-shadow: 0 6px 12px rgba(0,0,0,0.15);*/
    /* color: black; 호버 시에도 흰색 유지 */
}

/* 2. 블로그 (네이버 상징색: 초록) */
.contact-blog {
    background-color: #03C75A;
}

/* 3. 카페 (따뜻한 커피색 또는 네이버카페 레드) */
.contact-cafe {
	background-color: #03C75A;
/*     background-color: #Ef3f43; 네이버 카페 아이콘의 포인트 컬러 */
    /* 또는 커피색을 원하시면: background-color: #6F4E37; */
}

/* 4. 인스타그램 (브랜드 그라데이션) */
.contact-insta {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

/* 5. 카카오톡 (카카오 옐로우) */
.contact-kakao {
    background-color: #FEE500;
    color: #3C1E1E !important; /* 카카오는 검갈색 글씨가 국룰 */
}


.contact-logo-box {
    display: flex;           /* 플렉스박스 사용 */
    justify-content: center; /* 가로 방향 완전 중앙 정렬 */
    align-items: center;     /* 세로 방향 중앙 정렬 */
    margin-bottom: 50px;     /* 로고와 버튼 사이의 간격 */
	margin-top: 50px;
    width: 100%;             /* 전체 너비 사용 */
}

.contact-logo-box img {
    max-width: 120px;        /* 로고가 너무 커지지 않게 제한 (원하는 크기로 조절하세요) */
    width: 100%;             /* 모바일에서는 화면에 맞게 줄어듦 */
    height: auto;            /* 비율 깨짐 방지 */
    object-fit: contain;     /* 이미지 찌그러짐 방지 */
    display: block;
}

/* --- Footer --- */
footer {
    background: #333; color: #999; padding: 40px 0; text-align: center; font-size: 0.8rem;
}



/* =========================================
   [서브 페이지 전용 스타일]
   ========================================= */

/* [수정] 서브 페이지 공통 헤더 */
.sub-hero {
    height: 400px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    margin-bottom: 80px;
    margin-top: 0; /* 네비게이션과 겹치게 하려면 0이어야 함 */

    /* [핵심] 이미지가 없을 때를 대비한 기본 배경색 (이게 있어야 글씨가 보임) */
    background-color: #222;
}

/* 배경 이미지 오버레이 (이미지가 있을 때만 보임) */
.sub-hero-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center;
    filter: brightness(0.6);
    z-index: 0; /* 글씨보다 뒤로 */
}

/* 텍스트가 배경보다 위에 오도록 설정 */
.hero-content {
    position: relative;
    z-index: 1;
}
.sub-title {
    font-family: var(--font-serif);
    font-size: 3.5rem;
    margin-bottom: 15px;
    font-style: italic;
}
.sub-desc {
    font-size: 1.1rem;
    opacity: 0.9;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 300;
}

/* 2. 센터 소개 (Zen Yoga 스타일 - 지그재그) */
.philosophy-row {
    margin-bottom: 100px;
}
.philo-card-img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: 5px;
    box-shadow: 20px 20px 0px rgba(0,0,0,0.05); /* 젠요가 느낌의 그림자 */
}


/* 4. 교육 과정 (NID 스타일 - 가로형) */
.nid-course-row {
    border-bottom: 1px solid #eee;
    padding-bottom: 60px;
    margin-bottom: 60px;
	padding-top: 100px;
}
.nid-course-row:last-child { border-bottom: none; }
.nid-img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    border-radius: 5px;
}
.nid-price-tag {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 20px;
    display: inline-block;
    border-bottom: 2px solid #333;
    padding-bottom: 5px;
}
.nid-list li {
    margin-bottom: 8px;
    font-size: 0.95rem;
    color: #555;
    padding-left: 15px;
    position: relative;
}
.nid-list li::before {
    content: '-';
    position: absolute;
    left: 0;
    color: #999;
}

/* 5. 갤러리 (Zen + Merdive 하이브리드) */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.gallery-item {
    position: relative;
    group;
}
.gallery-thumb {
    width: 100%;
    height: 300px; /* 고정 높이 (Zen 스타일) */
    object-fit: cover;
    border-radius: 5px;
    transition: 0.3s;
}
.gallery-item:hover .gallery-thumb { filter: brightness(0.8); }
.gallery-meta { margin-top: 15px; }
.gallery-cat {
    color: #004ea2; font-weight: 600; font-size: 0.8rem; margin-bottom: 5px; display: block;
} /* 메르 스타일 카테고리 컬러 */
.gallery-title { font-size: 1.1rem; font-weight: 500; }

/* 탭 전체 컨테이너 */
.nav-tabs {
    border-bottom: 1px solid #e0e0e0; /* 전체 얇은 회색 밑줄 */
    justify-content: center;          /* 중앙 정렬 */
    gap: 10px;                        /* 탭 사이 간격 */
    margin-bottom: 40px;              /* 본문과의 간격 */
}

/* 탭 버튼 기본 스타일 (비활성 상태) */
.nav-tabs .nav-link {
    border: none;                     /* 테두리 제거 */
    border-bottom: 2px solid transparent; /* 밑줄 자리 확보 */
    background: transparent !important; /* 배경 투명 */

    color: #999 !important;           /* [핵심] 글씨색: 연한 회색 (배경이 흰색이니 잘 보임) */
    font-size: 1.1rem;                /* 글씨 크기 */
    font-weight: 500;
    padding: 15px 30px;               /* 버튼 내부 여백 */
    transition: all 0.3s ease;        /* 부드러운 전환 */
    border-radius: 0;                 /* 둥근 모서리 제거 (직각) */
    margin-bottom: -1px;              /* 선 겹침 방지 */
}

/* 탭 버튼 마우스 올렸을 때 */
.nav-tabs .nav-link:hover {
    color: #333 !important;           /* 조금 진한 회색 */
    border-color: transparent;        /* 테두리는 여전히 투명 */
}

/* 탭 버튼 활성화 상태 (선택됨) */
.nav-tabs .nav-link.active {
    color: #000 !important;           /* [핵심] 글씨색: 완전 검정 */
    font-weight: 700;                 /* 굵게 */
    background-color: transparent !important;
    border-bottom: 2px solid #000;    /* 검정색 굵은 밑줄 */
}


/* =========================================
   [공지사항 상세페이지 스타일]
   ========================================= */

/* 상세페이지 컨테이너 */
.board-view-wrap {
    border-top: 2px solid #333; /* 상단 굵은 선 */
    border-bottom: 1px solid #ddd; /* 하단 얇은 선 */
}

/* 1. 헤더 영역 (제목 + 정보) */
.view-header {
    padding: 20px 0;
    border-bottom: 1px solid #eee;
}

.view-title {
    font-family: var(--font-sans); /* 본문 폰트 사용 (가독성) */
    font-size: 1.5rem;
    font-weight: 700;
    color: #222;
    margin-bottom: 15px;
}

.view-info {
    display: flex;
    gap: 20px;
    color: #888;
    font-size: 0.9rem;
}
.view-info span {
    position: relative;
}
/* 정보 사이 구분선 (|) */
.view-info span:not(:last-child)::after {
    content: '';
    display: block;
    width: 1px;
    height: 10px;
    background: #ccc;
    position: absolute;
    right: -11px;
    top: 50%;
    transform: translateY(-50%);
}

/* 2. 첨부파일 영역 */
.view-file {
    background: #f9f9f9;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    font-size: 0.9rem;
    color: #555;
}
.view-file a {
    color: #555;
    text-decoration: none;
    margin-left: 10px;
}
.view-file a:hover {
    color: #000;
    text-decoration: underline;
}

/* 3. 본문 영역 */
.view-content {
    padding: 50px 20px;
    min-height: 400px; /* 본문 최소 높이 확보 */
    font-size: 1rem;
    line-height: 1.8;
    color: #333;
}
.view-content img {
    max-width: 100%; /* 이미지가 영역을 넘지 않게 */
    margin: 20px 0;
}

/* 4. 이전글/다음글 네비게이션 */
.board-nav {
    border-top: 1px solid #333;
    border-bottom: 1px solid #ddd;
}
.nav-row {
    display: flex;
    border-bottom: 1px solid #eee;
}
.nav-row:last-child {
    border-bottom: none;
}
.nav-label {
    width: 120px;
    background: #f9f9f9;
    padding: 15px 0;
    text-align: center;
    font-weight: 600;
    color: #333;
    flex-shrink: 0; /* 너비 고정 */
}
.nav-link-text {
    flex-grow: 1;
    padding: 15px 20px;
    color: #555;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nav-link-text:hover {
    color: #000;
    font-weight: 500;
}

/* 5. 목록 버튼 영역 */
.btn-area {
    margin-top: 30px;
    text-align: right; /* 오른쪽 정렬 */
}
.btn-list {
    background: #333;
    color: #fff;
    padding: 12px 40px;
    border-radius: 0; /* 사각형 버튼 */
    font-weight: 500;
    transition: 0.3s;
}
.btn-list:hover {
    background: #000;
    color: #fff;
}

/* --- 강사 카드 (전체 레이아웃) --- */
.instructor-card {
    height: 100%;          /* [핵심] 옆 카드와 높이 똑같이 맞춤 */
    display: flex;
    flex-direction: column; /* 내용물을 세로로 쌓기 */
    background: #fff;
    padding-bottom: 20px;   /* 하단 여백 */
}

.instructor-img {
    width: 100%;
    aspect-ratio: 1/1;      /* 정사각형 비율 고정 */
    object-fit: cover;
    /* filter: grayscale(100%); 기본 흑백 */
    transition: 0.4s;
    border-radius: 2px;
    margin-bottom: 20px;
}

/* 호버 시 컬러 전환 & 확대 */
.instructor-card:hover .instructor-img {
   /*  filter: grayscale(0%); */
    transform: scale(1.02);
}

/* 텍스트 정보 컨테이너 */
.instructor-info {
    flex-grow: 1;           /* [핵심] 남은 공간을 꽉 채움 */
    display: flex;
    flex-direction: column; /* 세로 정렬 */
    padding: 0 5px;
}

/* --- 상단 정보 (이름/직책) --- */
.instructor-name {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 5px;
    color: #222;
}
.instructor-role {
    color: #004ea2;         /* 메르 블루 포인트 */
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- [수정] 강사 한마디 (X박스 해결 & 디자인 개선) --- */
.instructor-quote {
    position: relative;
    margin-bottom: 25px;    /* 약력과의 간격 */
    padding-left: 15px;
	padding-right: 15px;
}

/* CSS로 따옴표 만들기 (이미지 태그 X) */
.instructor-quote::before {
    content: "";           /* 따옴표 문자 */
    position: absolute;
    top: -15px;             /* 위치 조정 */
    left: 0;
    font-family: serif;     /* 명조체 */
    font-size: 4rem;        /* 매우 크게 */
    color: #e0e0e0;         /* 아주 연한 회색 (배경처럼) */
    line-height: 1;
    z-index: 0;
}

.instructor-quote p {
    position: relative;
    z-index: 1;             /* 따옴표 위에 글씨 올리기 */
    font-family: var(--font-serif);
    font-style: italic;     /* 기울임 */
    font-size: 1rem;
    color: #555;
    margin: 0;
    line-height: 1.5;
}


.instructor-history {
    /* [수정] margin-top: auto를 삭제하여 위쪽 요소에 바짝 붙게 만듦 */
    margin-top: 0;
    padding-top: 15px;
    border-top: 1px solid #eee;
    font-size: 0.85rem;
    color: #888;
    line-height: 1.6;
}

.nid-button > a{
	display: inline-block;
	transition: all 0.3s ease;
	text-transform: uppercase;
	padding: 15px 40px;
	font-size: 0.8rem;
	letter-spacing: 2px;
}

.nid-button {
	letter-spacing: 8px;
	margin-top: 20px;
}
.nid-button > a:hover {
	transform: translateY(-5px); /* 살짝 떠오르는 효과 */
}

.nid-button .btn-naver {
    border: 1px solid #000; background: #000; color: #fff;
}

.nid-button .btn-kakao {
    border: 1px solid #FEE500; background: #FEE500; color: #000;
}




.navbar-brand > img{
    width:170px;
}



/* --- 6. Contact Section --- */
.contact-section { text-align: center; border-top: 1px solid #eee; }
/* 1. 버튼 공통 설정 */
.contact-buttons .snsBtn {
    border: none;
    color: white;             /* 기본 글씨 흰색 */
    padding: 12px 30px;       /* 넉넉한 크기 */
    margin: 5px;              /* 버튼 간 간격 */
    border-radius: 50px;      /* 둥근 캡슐 모양 */
    font-weight: 400;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    /*box-shadow: 0 4px 6px rgba(0,0,0,0.1);*/
}

/* 호버 효과 (살짝 위로 뜨게) */
.contact-buttons .snsBtn:hover {
    transform: translateY(-3px);
    /*box-shadow: 0 6px 12px rgba(0,0,0,0.15);*/
    /* color: black; 호버 시에도 흰색 유지 */
}







/* =========================================
   [PC 버전] 992px 이상에서만 적용되는 스타일
   (밑줄 애니메이션, 드롭다운 호버 등)
   ========================================= */
@media (min-width: 992px) {

    /* 1. 메뉴 링크 스타일 */
    .nav-link {
        font-family: var(--font-sans);
        font-size: 0.95rem;
        color: rgba(255, 255, 255, 0.9) !important;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin: 0 10px;
        position: relative; /* 밑줄 기준점 */
    }

    /* 2. 밑줄 애니메이션 (가운데서 퍼짐) */
    .nav-link::after {

		display:none;
        content: '';
        position: absolute;
        width: 0; /* 평소에는 0 */
        height: 2px;
        bottom: 5px;
        left: 50%;
        background-color: #000;
        transition: all 0.3s ease;
        transform: translateX(-50%); /* 정확히 가운데 정렬 */
    }

    /* 3. 밑줄이 생기는 조건: 호버(Hover) 또는 드롭다운 열림(.show) */
    /* 주의: :focus를 뺐기 때문에 클릭 후 마우스를 떼면 사라집니다 */
    .nav-link:hover::after,
    .nav-link.show::after {
        width: 100%;
    }

    /* 4. 드롭다운 메뉴 (유리 효과) */
    .dropdown-menu {
        border: none;
        border-radius: 0;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        padding: 15px 0;
        margin-top: 15px;

        /* 애니메이션 */
        display: block;
        opacity: 0;
        visibility: hidden;
        transform: translateY(20px);
        transition: all 0.3s ease;
    }

    /* 호버 시 드롭다운 보이기 */
    .nav-item.dropdown:hover .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .dropdown-item {
        font-size: 0.9rem;
        padding: 10px 25px;
        color: #333;
        transition: 0.2s;
    }
    .dropdown-item:hover {
        background: transparent;
        color: #000;
        padding-left: 30px;
        font-weight: bold;
    }
}


/* =========================================
   [모바일 버전] 991px 이하에서만 적용
   (밑줄 제거, 박스형 메뉴, 하위 메뉴 노출 수정)
   ========================================= */
@media (max-width: 991px) {

    /* 1. PC용 밑줄 애니메이션 완전 제거 (화면 가리는 문제 해결) */
    .nav-link::after {
        display: none !important;
    }

    /* 2. 전체 메뉴 박스 */
    .navbar-collapse {
        background: #1a1a1a; /* 진한 배경 */
        padding: 20px;
        border-radius: 15px;
        margin-top: 15px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        max-height: 80vh;
        overflow-y: auto;
    }

    .navbar-nav { width: 100%; }
    .nav-item { width: 100%; border-bottom: 1px solid rgba(255,255,255,0.05); }

    /* 3. 상위 메뉴 스타일 */
    .nav-link {
        color: #fff !important;
        font-size: 1rem;
        padding: 15px 0;
        font-weight: 600;
        display: flex;
        justify-content: space-between; /* 텍스트 왼쪽, 화살표 오른쪽 */
        align-items: center;
        width: 100%;
    }

    /* 메뉴 활성화(터치) 시 글자색 변경 (밑줄 대신) */
    .nav-link:hover, .nav-link:focus, .nav-link.show {
        color: #bbb !important; /* 약간 회색으로 */
    }

    /* 4. [핵심] 하위 메뉴가 안 보이는 문제 해결 */
    .dropdown-menu {
        position: static !important; /* absolute 해제 -> 자리를 차지하게 함 */
        float: none;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.05); /* 박스 배경 */
        border: none;
        margin: 0;
        padding: 0;

        display: none; /* 기본 숨김 */
        opacity: 1;
        visibility: visible;
        transform: none; /* PC용 transform 해제 */
    }

    /* 부트스트랩 JS가 .show를 붙이면 보이게 함 */
    .dropdown-menu.show {
        display: block;
        padding: 10px 0;
        margin-bottom: 10px;
    }

    /* 5. 하위 메뉴 아이템 */
    .dropdown-item {
        color: #aaa !important;
        font-size: 0.9rem;
        padding: 12px 20px 12px 35px; /* 들여쓰기 */
        width: 100%;
        position: relative;
    }

    /* 하위 메뉴 앞 점(*) */
    .dropdown-item::before {
        content: '';
        position: absolute;
        left: 20px;
        color: rgba(255,255,255,0.3);
    }

    .dropdown-item:hover {
        background: rgba(255,255,255,0.05);
        color: #fff !important;
    }

	.team-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* 모바일 대응 수정 */
@media (max-width: 768px) {
    .journal-layout {
        flex-direction: column; /* 세로로 쌓기 */
        gap: 30px;
    }
    .journal-img-box {
        min-height: 300px; /* 모바일에서는 고정 높이 사용 */
        flex-grow: 0;
    }
    .journal-right {
        margin-top: 0; /* 마진 초기화 */
    }
	.notice-area {
        min-height: 300px;
    }

	.nav-links { display: none; } /* 모바일 메뉴 생략 (필요 시 토글 추가) */
    .hero-title { font-size: 1.5rem; }

    .philosophy-grid { flex-direction: column; }
    .philo-img { width: 100%; order: -1; }

    .team-grid, .curriculum-grid, .journal-layout {
        grid-template-columns: 1fr;
    }

    .contact-buttons button {
        display: block; width: 100%; margin: 10px 0;
    }

	.nav-tabs .nav-link {
        padding: 10px 15px;
        font-size: 1rem;
    }
}


tbody td.select-item, .select-item {
    font-weight: bold;
    color: #1193df;
    cursor: pointer;
}


/* 부모 컨테이너의 float를 끄고 텍스트 정렬을 센터로 설정 */
div.dataTables_wrapper div.dataTables_paginate {
    text-align: center !important;
    float: none !important;
    display: block !important;
}

/* 내부 pagination(ul)을 가운데로 배치 */
div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    justify-content: center !important;
}

.accordion-body{
	overflow:auto;
}


/* 퀵 메뉴 전체 컨테이너 */
.quick-menu {
  position: fixed; /* 화면에 고정 */
  right: 20px;     /* 오른쪽 여백 */
  top: 80%;        /* 상단에서 50% 위치 */
  transform: translateY(-50%); /* 본인 높이의 절반만큼 위로 올려서 완벽한 중앙 정렬 */
  z-index: 9999;   /* 다른 요소보다 위에 표시 */
}

/* 리스트 스타일 제거 */
.sns-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column; /* 세로로 나열 */
  gap: 10px;              /* 버튼 사이 간격 */
}

/* 개별 버튼 스타일 */
.sns-list li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;           /* 버튼 너비 */
  height: 50px;          /* 버튼 높이 */
  background-color: #fff; /* 배경색 */
  border-radius: 50%;    /* 동그랗게 */
  box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* 그림자 효과 */
  transition: all 0.3s ease;
}

/* 마우스 올렸을 때 효과 */
.sns-list li a:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

/* 아이콘 이미지 크기 조절 */
.sns-list li a img {
  width: 24px;
  height: auto;
}

.quick-menu .btn-kakao{
	background-color: #FEE500;
    color: #3C1E1E !important; /* 카카오는 검갈색 글씨가 국룰 */
}

.quick-menu .btn-instagram{
	background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
	color: #fff !important;
}

.quick-menu .btn-naver{
	background-color: #03C75A;
	color: #fff !important;
}


/* =========================================
   [준비중 & 빈 화면 (Empty State) 스타일]
   ========================================= */

/* 1. 전체 페이지 준비중 (Coming Soon) */
.coming-soon-wrap {
    min-height: 50vh; /* 화면의 절반 이상 차지하여 중앙 정렬 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 50px 20px;
}

.coming-soon-icon {
    font-size: 4rem;
    color: #004ea2; /* 메르 블루 포인트 컬러 */
    margin-bottom: 25px;
    opacity: 0.8;
}

.coming-soon-wrap h2 {
    font-family: var(--font-serif);
    font-size: 2.2rem;
    font-weight: 700;
    color: #222;
    margin-bottom: 15px;
}

.coming-soon-wrap p {
    color: #666;
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* 2. 게시물/사진이 없을 때 (Empty State Box) */
.empty-state-box {
    padding: 80px 20px;
    text-align: center;
    background-color: #f9f9f9; /* 연한 회색 배경 */
    border: 1px dashed #ccc;   /* 점선 테두리로 '비어있음'을 세련되게 표현 */
    border-radius: 8px;
    margin: 40px 0;
}

.empty-state-box i {
    font-size: 3rem;
    color: #ccc; /* 아이콘은 연하게 */
    margin-bottom: 20px;
}

.empty-state-box h3 {
    font-family: var(--font-sans); /* 본문 폰트 사용 */
    font-size: 1.3rem;
    font-weight: 600;
    color: #555;
    margin-bottom: 10px;
}

.empty-state-box p {
    color: #888;
    font-size: 0.95rem;
    margin: 0;
}



/* --- 가격 변동 강조 스타일 --- */

.price-flex-box {
    display: flex;
    align-items: center; /* 세로 중앙 정렬 */
    gap: 12px;           /* 요소 간 간격 */
    margin-bottom: 5px;
}

/* 정가 스타일 (왼쪽) */
.original-price {
    font-size: 1.1rem;
    color: #a0a0a0;              /* 무채색으로 대비 낮춤 */
    text-decoration: line-through; /* 취소선 적용 */
    font-weight: 400;
}

/* 가격 변동 화살표 */
.price-change-arrow {
    font-size: 0.9rem;
    color: #ccc;                 /* 은은한 화살표 */
}

/* 할인가 태그 스타일 */
.sale-price {
    margin-bottom: 0 !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

/* 최종 강조 금액 (오른쪽) */
.highlight-price {
    font-size: 1.6rem;           /* 정가보다 훨씬 크게 키움 */
    font-weight: 800;
    color: #e63946;              /* 강렬한 레드 계열로 강조 */
    letter-spacing: -0.5px;
    /* 약간의 애니메이션 효과 (선택사항) */
    text-shadow: 2px 2px 10px rgba(230, 57, 70, 0.1);
}

/* 하단 보조 정보 */
.price-sub-info {
    font-size: 0.85rem;
    color: #888;
    margin-top: 5px;
}

/* --- 메인 커리큘럼 카드 가격 스타일 --- */
.main-price-wrapper {
    margin-bottom: 20px;
    text-align: left;
}

/* 정가 (취소선) */
.main-original-price {
    display: block;
    font-size: 0.85rem;
    color: #bbb;
    text-decoration: line-through;
    margin-bottom: 2px;
}

/* 할인가 행 */
.main-sale-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

/* '오픈할인가' 라벨 */
.main-sale-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #e63946; /* 강조 레드 컬러 */
    background: rgba(230, 57, 70, 0.1);
    padding: 2px 6px;
    border-radius: 3px;
}

/* 강조된 할인가 숫자 */
.main-highlight-price {
    font-size: 1.25rem;
    font-weight: 800;
    color: #222;
    letter-spacing: -0.5px;
}

/* 하단 기간 정보 */
.main-course-day {
    font-size: 0.8rem;
    color: #888;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
}