@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&family=Noto+Serif+KR:wght@200..900&display=swap');


/* 보라색 고유 버튼 */
.btn-sambuza {
    background-color: #800080;
    border: none;
    color: white;
    font-weight: 600;
    padding: 0.4rem 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: background-color 0.3s ease;
    display: inline-block !important;
    width: auto !important;
}

.btn-sambuza:hover {
    background-color: darkgrey;
    color: white;
}

/* 복음 초록 Edit 버튼 */
.btn-outline-gospel {
    background-color: white;
    border: #2E8B57;
    color: #228B22;
}

.btn-outline-gospel:hover {
    background-color: #3CB371;
    color: white;
}

/* 강조 빨간 Delete 버튼 */
.btn-highlight {
    background-color: white;
    border-color: white;
    color: #CC3366;
}

.btn-highlight:hover {
    background-color: #B03060;
    color: white;
}

.page-link {
    color: #800080;
}

.page-link:hover {
    background-color: dimgrey;
    color: white;
}

.page-item.active .page-link {
    background-color: #800080;
    border-color: #800080;
}

.title-green {
    color: #00b95c;

}

/* Tag 전용 버튼 스타일 */
.btn-tag {
    /* 기본 상태 */
    color: #fff; /* 글자색 */
    background-color: #9933cc; /* 배경색 */
    border-color: #9933cc; /* 테두리색 */
    border-radius: 12px;

    /* === 크기 조정 === */
    font-size: 0.70rem; /* 글꼴 크기 ↓ */
    padding: 0.15rem 0.6rem; /* 상·하, 좌·우 패딩 ↓ */
    line-height: 1.15;

    /* === 태그 사이 여백 ↓ (가로·세로 0.15rem) === */
    margin-right: 0.15rem;
    margin-bottom: 0.15rem;


}

/* 호버·포커스 시 */
.btn-tag:hover,
.btn-tag:focus {
    background-color: #00a54f;
    border-color: #00a54f;
}

/* 클릭(액티브) 시 */
.btn-tag:active,
.btn-tag.active {
    background-color: #009247;
    border-color: #009247;
}

.tag-area {
    margin-bottom: 1.25rem; /* 필요하면 숫자 조정 */
}


/* "자세히" 버튼과 태그 사이 여백 조정 ---------------------------- */
.readmore-btn {
    margin-top: 1.25rem !important; /* 원하는 수치로 변경 (예: 20px = 1.25rem) */
}

/* 카드(또는 원하는 영역) 안에서만 적용 */
.card .readmore-btn {
    margin-top: 1.25rem; /* 1.25rem ≈ 20px  */
}

/* 카테고리·태그 영역과 '자세히' 버튼 사이 간격 --------------------- */
.meta-bar {
    margin-bottom: 1.5rem; /* 필요하면 2rem, 1rem 등으로 조절 */
}

.rounded-image {
    border-radius: 10px; /* 모든 코너를 10px 둥글게 처리합니다. */
}


@font-face {
    font-family: 'TheJamsil5Bold';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil5Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

html, body {
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
    overflow-y: scroll; /* Always show scrollbar to prevent layout shifts */
    box-sizing: border-box; /* Ensure consistent box model */
}

*,
*::before,
*::after {
    box-sizing: inherit; /* Inherit box-sizing from html */
}

body {
    background-color: white;
    color: #02315E;
    font-size: 1rem;
    font-family: 'Noto Sans KR', sans-serif;
    background-position: center; /* 이미지의 위치를 중앙으로 설정 */
    background-repeat: no-repeat;
    transition: opacity 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    height: 100%; /* Changed from min-height: 100vh */
}

body.page-transition {
    opacity: 0;
}

body.page-transition.active {
    opacity: 1;
}

/* Prevent layout shift during page transitions */
.container {
    /* Removed min-height and position to fix navbar layout */
}

.navbar-custom {
    background-color: #800080 !important;

}

.footer-custom {
    background-color: #FFFDD0 !important;
    padding: 20px 0;
    text-align: center;
    color: white;
    min-height: 100px; /* Ensures consistent height for the footer */
}

.hero-section {
    background-color: white;
    color: #87CEEB;
    padding: 50px 0;
    font-family: "Noto Sans KR", sans-serif;
    font-weight: 900;
}

#center {
    text-align: center;
}

.center-content {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
}

.canvas-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
}

.highlight {
    font-size: 1.2em; /* 원하는 크기로 조정 (예: 2em) */
    color: #800080; /* 강조 색상 */
    font-weight: bold; /* 강조를 위해 굵게 */
}
.highlight-2 {
    font-size: 1.2em; /* 원하는 크기로 조정 (예: 2em) */
    color: #00b95c; /* 강조 색상 */
    font-weight: bold; /* 강조를 위해 굵게 */
}

.custom-rounded {
    border-radius: 50px; /* 원하는 둥글기 (픽셀 값으로 조정) */
}

#custom-rounded {
    border-radius: 50px; /* 원하는 둥글기 (픽셀 값으로 조정) */
}

.image-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.image-grid-item-top {
  width: 440px;  /* 원하는 너비로 통일 */
  height: 440px; /* 또는 auto로 유지하고 비율 맞추기 */
  object-fit: cover;  /* 이미지가 꽉 차도록 */
  border-radius: 5px;
}
.image-grid-item-bottom {
  width: 440px;  /* 원하는 너비로 통일 */
  height: 440px; /* 또는 auto로 유지하고 비율 맞추기 */
  object-fit: cover;  /* 이미지가 꽉 차도록 */
  border-radius: 5px;
}
.image-grid-item-about {
  width: 800px;  /* 원하는 너비로 통일 */
  height: 1000px; /* 또는 auto로 유지하고 비율 맞추기 */
  object-fit: cover;  /* 이미지가 꽉 차도록 */
  border-radius: 5px;
}



.message-placeholder {
    min-height: 50px; /* To prevent layout shift when messages appear/disappear */
}

.memo-actions {
    min-width: 120px; /* To reserve space for Edit/Delete buttons and prevent layout shift */
    flex-shrink: 0; /* Prevent shrinking */
    display: flex; /* Use flex to align buttons */
    gap: 5px; /* Space between buttons */
    justify-content: flex-end; /* Align buttons to the right */
}

.memo-content-area {
    min-height: 40px; /* Adjust as needed based on expected content height */
    max-height: 80px; /* Adjust as needed, allows for a couple of lines if necessary */
    overflow: hidden; /* Hide overflow if content exceeds max-height */
    flex-grow: 1; /* Allow it to grow and take available space */
    padding-right: 10px; /* Add some padding before actions */
    word-break: break-word; /* Ensure long words wrap */
}

.list-group-item {
    min-height: 70px; /* Ensures consistent height for each memo item */
    transition: transform 0.2s ease-in-out;
}

.list-group-item:hover {
    transform: translateX(5px);
}

.memo-main-content {
    margin-top: 3rem; /* Equivalent to Bootstrap's mt-5, adjust as needed */
    /* Add other container-like properties if necessary, e.g., max-width, padding */
}

.main-content-area {
    /* Removed min-height as flex-grow: 1 handles vertical space */
    padding-top: 3rem; /* Replaces mt-5 from previous container */
    padding-bottom: 2rem; /* Add padding to prevent footer from touching content */
    flex-grow: 1; /* Allow content area to grow */
    display: flex; /* Use flexbox to organize content within */
    flex-direction: column; /* Stack children vertically */
}

.news-detail-card-body {
    min-height: 400px; /* Adjust as needed based on expected content length */
}

.news-item-content {
    min-height: 60px; /* Adjust as needed to accommodate title and date */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5px 0; /* Add some vertical padding */
}

/* Blog Post List Specific Styles */
.blog-post-image-container {
    min-height: 200px; /* Adjust based on typical image height */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.blog-post-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-post-summary-text {
    min-height: 20px; /* Adjust for one line of summary */
    margin-top: 10px; /* Add some space below title */
    margin-bottom: 10px; /* Add some space above content */
}

.blog-post-content-preview {
    min-height: 100px; /* Adjust for truncated content */
    line-height: 1.5; /* Ensure consistent line spacing */
}

/* General Card Styles */
.card .card-body {
    min-height: 120px; /* Adjust as needed for general card content */
    display: flex;
    flex-direction: column;
}

.comment .rounded-circle {
    width: 50px;
    height: 50px;
    object-fit: cover;
}

.badge-dark-grey {
    background-color: #343a40 !important;
    color: white !important;
    display: inline-flex;
    align-items: center;
    height: 24px; /* 명시적 높이 */
    line-height: 1; /* 텍스트 자체의 라인 높이 */
    padding: 0 0.6em; /* 수직 패딩 제거 */
    margin-right: 0.25rem;
    vertical-align: middle;
    font-size: 0.875em; /* Bootstrap default badge font-size */
    border-radius: 0.375rem; /* Bootstrap default badge border-radius */
}

.badge-purple {
    background-color: #28a745 !important; /* 녹색 */
    color: white !important;
    display: inline-flex;
    align-items: center;
    height: 24px; /* 명시적 높이 */
    line-height: 1; /* 텍스트 자체의 라인 높이 */
    padding: 0 0.6em; /* 수직 패딩 제거 */
    margin-right: 0.25rem;
    vertical-align: middle;
    font-size: 0.875em; /* Bootstrap default badge font-size */
    border-radius: 0.375rem; /* Bootstrap default badge border-radius */
}

.badge-purple:hover {
    background-color: dimgrey !important; /* 그레이 */
    color: white !important;
}

/* 태그 아이콘 정렬 */
.meta-bar .fas {
    vertical-align: middle;
    height: 24px; /* 배지와 동일한 높이 */
    line-height: 24px; /* 배지와 동일한 라인 높이 */
    display: inline-block; /* height/line-height 적용을 위해 */
    font-size: 0.875em; /* 배지 텍스트와 유사한 크기 */
}

/* 기존 bg-danger 스타일은 혹시 모를 충돌 방지를 위해 남겨둡니다. */
.badge.bg-danger {
    background-color: #dc3545; /* Bootstrap 기본 red, 필요시 유지 */
}

/* 검색 버튼 스타일 추가 */
/* 기존의 btn-search-custom 스타일을 더 구체적으로 정의 */
.btn.btn-primary.btn-search-custom {
    background-color: #28a745 !important; /* 태그 기본 색상 (녹색) */
    border-color: #28a745 !important;
    color: white !important;

    /* Bootstrap 기본 버튼 크기 및 정렬 속성 추가 */
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem;
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
    font-weight: 400;
    text-align: center;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
}

.btn.btn-primary.btn-search-custom:hover,
.btn.btn-primary.btn-search-custom:focus,
.btn.btn-primary.btn-search-custom:active {
    background-color: dimgrey !important; /* 태그 hover 색상 (회색) */
    border-color: dimgrey !important;
    color: white !important;
    box-shadow: none !important; /* Bootstrap 기본 그림자 제거 */
}

.post-image-block img {
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.caption {
    text-align: center;
    font-size: 0.9rem;
    color: #555;
}