/*****************************************************
 * home.css  - index.php 전용
 *****************************************************/

/* 0. 홈 공통 섹션 */
.home-section {
    margin-top: 4px;
}

/* 상단 인사말 */
.home-header-row {
    margin-top: 4px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    marge-bottom: 6px;
}

.home-header-left {
    flex: 1 1 auto;
}

.home-title {
    marge-top: 2px;
    font-size: 22px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 4px;
}

.home-subtitle {
    marge: 0px;
    font-size: 12px;
    color: #4b5563;
    line-height: 1.55;
    margin: 0;
}

/* 1. 메인 카드 (사진 + 공지·일정) */

.home-hero-card {
    margin-top: 10px;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.25);
    padding: 12px 14px 16px 14px;         /* 🔸엣지 ~6px 정도로 타이트하게 */
}

.home-hero-layout {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);  /* ≒ 7.5 : 2.5 */
    gap: 12px 14px;
}

/* 1-1) 왼쪽 가족 사진 */
/* -------------------------------------------------------------------
 * 1-1) 왼쪽 가족사진 메인 영역 (Home Hero Photo)
 * - 홈 화면에서 가장 큰 비주얼 요소.
 * - 폭은 그리드의 왼쪽 컬럼(약 75%)을 차지하며,
 *   세로 크기는 자동(이미지 비율 유지).
 * ------------------------------------------------------------------- */

/* 사진 전체 컨테이너 (여백 간격 및 그리드 비율 설정) */
.home-hero-photo {
    grid-column: 1 / 2;          /* 왼쪽 그리드(1번 컬럼)에 배치 */
    display: flex;
    flex-direction: column;
    gap: 10px;                   /* 사진과 캡션 사이 간격 */
    align-items: flex-start;     /* 자식(사진 + 캡션)을 왼쪽 기준으로 배치 */
    text-align: left;            /* 캡션 텍스트도 기본 왼쪽 정렬 */
}

/* --------------------------------------------------------------
 * 실제 사진 스타일
 * - width: 100% → 부모영역 너비에 맞춤
 * - border-radius: 사진 모서리 둥글기
 * - max-height 옵션을 추가하면 사진 세로 크기 고정 가능
 * -------------------------------------------------------------- */
/* 실제 사진 스타일 */
.home-hero-img {
    width: 100%;                 /* 부모(.home-hero-photo) 너비에 맞춤 */
    height: 660px;               /* 세로 높이 완전 고정 (요청사항 반영) */
    display: block;
    border-radius: 14px;         /* 사진 모서리 둥글기 */
    object-fit: cover;           /* 비율 유지하면서 영역 꽉 채우기 (잘릴 수 있음) */
    object-position: center;     /* 가운데 위주로 잘리도록 정렬 */
}

/* 사진 캡션(사진 아래 작은 설명글) */
.home-photo-caption {
    margin-top: 4px;
    margin-left: 5px;
    margin-bottom: 6px;  
    font-size: 12px;
    color: #6b7280;              /* 연한 회색 텍스트 */
    line-height: 1.3;
    text-align: left;            /* 항상 왼쪽 정렬 고정 */
}

/* ----------------------------------------------------------------
 * 사진 파일이 없을 때 표시되는 "빈 박스"
 * (업로드 전 또는 오류 시 표시)
 * ---------------------------------------------------------------- */
.home-photo-placeholder {
    min-height: 260px;  
    /* 👉 사진이 없는 경우 박스 기본 높이.
       - 더 크게 보이려면 300~350px
       - 더 작게 보이려면 180~220px */
    border-radius: 14px;
    background: #f3f4f6;   /* 은색 배경 */
    border: 1px dashed #cbd5e1;  /* 점선 테두리 */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 12px;
    color: #6b7280;
    padding: 12px;
}

/* 1-2) 오른쪽 공지·일정 카드 */

.home-notice-card {
    height: 410px;      /* 원하는 고정값 */
    overflow-y: auto;   /* 내용이 넘치면 스크롤 */
    grid-column: 2 / 3;
    background: #ffffff;
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.home-notice-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.home-notice-title {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
}

.home-notice-link {
    font-size: 11px;
    color: #2563eb;
    text-decoration: none;
}
.home-notice-link:hover {
    text-decoration: underline;
}

/* 최근 공지 블록 */

.home-notice-block-title {
    font-size: 12.5px;
    font-weight: 600;
    color: #4b5563;
    margin-bottom: 3px;
}

.home-notice-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.home-notice-item {
    padding: 5px 6px;
    border-radius: 8px;
    background: #f9fafb;
    border: 1px solid rgba(209, 213, 219, 0.9);
}

.home-notice-item-date {
    font-size: 10px;
    color: #9ca3af;
    margin-bottom: 1px;
}

.home-notice-item-title {
    font-size: 12px;
    font-weight: 500;
    color: #111827;
    margin-bottom: 1px;
}

.home-notice-item-body {
    font-size: 11px;
    color: #4b5563;
    line-height: 1.4;
}

/* 다가오는 일정 블록 */

.home-upcoming-block {
    border-top: 1px solid #e5e7eb;
    padding-top: 6px;
    margin-top: 4px;
}

.home-upcoming-title {
    font-size: 12px;
    font-weight: 600;
    color: #4b5563;
    margin-bottom: 3px;
}

.home-upcoming-item {
    padding: 4px 6px;
    border-radius: 8px;
    background: #f9fafb;
    border: 1px solid rgba(229, 231, 235, 0.9);
    margin-top: 3px;
}

.home-upcoming-date {
    font-size: 10px;
    color: #9ca3af;
}

.home-upcoming-main {
    font-size: 12px;
    color: #111827;
}

.home-upcoming-place {
    font-size: 11px;
    color: #4b5563;
}

/* 공지 일정 없음 안내 */

.home-notice-empty {
    font-size: 11px;
    color: #9ca3af;
}

/* 오른쪽 전체 컬럼 (가족 공지 일정 카드) */
.home-right-column {
    grid-column: 2 / 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;   /* 🔸기존 space-between 제거 → NOTE가 아래로 안 처짐 */
    gap: 30px;                     /* 🔸공지와 NOTE 사이 간격 조금만 */
}


/* 2. NOTE + 설명 + 버튼 (카드 밖, 우측 하단 버튼) */

/* 오른쪽 아래 NOTE + 설명 + 버튼 */
.home-note-block {
    margin-top: 16px;
    background: transparent;      /* 🔸흰 카드와 완전 동일하게 보이도록 */
    border: none !important;      /* 🔸모든 테두리 제거 */
    box-shadow: none !important;  /* 🔸그림자 제거 */
    padding: 4px 5px 8px 5px;   /* 🔸여백 최소화해 자연스럽게 카드 내부처럼 보이도록 */
}

/* NOTE + 설명 + 버튼 전체 행 (카드 맨 아래) */
.home-note-row {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid rgba(15, 23, 42, 0.06);  /* 윗부분만 살짝 구분선 */
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

/* 왼쪽: NOTE + 설명 */
.home-note-text {
    flex: 1 1 auto;
    min-width: 0;
}

.home-note-label {
    font-size: 13.5px;
    font-weight: 600;           /* 🔸‘NOTE’ 글씨를 진하게 */
    letter-spacing: 0.06em;
    color: #1f2937;             /* 🔸짙은 회색(거의 검정) */
    margin-left: 5px;
}

.home-note-list {
    margin-bottom: 12px;             /* 🔸버튼과의 간격 확실히 늘리기 */
    padding: 0px 18px 8px 25px;     /* 상 4px, 우 18px, 하 10px, 좌 25px */
    font-size: 11.5px;
    color: #4b5563;
    line-height: 1.55;
}

/* NOTE 버튼 영역 */
.home-note-actions {
    display: flex;
    flex-direction: column;         /* 🔹위 아래 2줄 배치 */
    justify-content: center         /* 중앙 정열 */
    align-items: center;
    margin-top: 12px;
    width: 100%;
}

/* 버튼 기본 스타일 */
.home-note-actions .home-btn {
   display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 100%;                    /* NOTE 안에서 꽉 차게 */
    max-width: 260px;               /* 너무 넓어지지 않게 제한 */
    padding: 6px 6px;              /* 🔹슬림한 높이(약 20px 이하) */
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    margin-bottom: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: 0.18s ease;
}

/* PRIMARY 버튼 (파란 그라데이션) */
.home-btn.primary {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 45%, #1d4ed8 100%);
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.45);
    transition: all 0.2s ease;
}

.home-btn.primary:hover {
    background: linear-gradient(135deg, #60a5fa 0%, #2563eb 50%, #1d4ed8 100%);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.50);
    transform: translateY(-2px);
}

/* GHOST 버튼 (연회색 그라데이션) */
.home-btn.ghost {
    background: linear-gradient(135deg, #f9fafb 0%, #e5e7eb 40%, #d1d5db 100%);
    color: #1f2937;
    border: 1px solid #cbd5e1;
    box-shadow: 0 3px 10px rgba(107, 114, 128, 0.25);
    transition: all 0.2s ease;
}

.home-btn.ghost:hover {
    background: linear-gradient(135deg, #ffffff 0%, #e5e7eb 50%, #d1d5db 100%);
    box-shadow: 0 6px 16px rgba(107, 114, 128, 0.35);
    transform: translateY(-2px);
}


/* -------------------------------
   3. 반응형
   ------------------------------- */
@media (max-width: 1024px) {
    .home-section {
        margin-top: 12px;
    }
    .home-hero-card {
        padding: 12px 12px 16px 12px;
    }
}

@media (max-width: 900px) {
    .home-hero-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }
    .home-hero-photo {
        order: 1;
    }
    .home-right-column {
        order: 2;
    }
    .home-note-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .home-btn {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .home-section {
        padding: 0 10px;
        margin-bottom: 28px;
    }
    .home-title {
        font-size: 20px;
    }
    .home-subtitle {
        font-size: 12.5px;
    }
    .home-hero-card {
        padding: 10px 10px 14px 10px;
        border-radius: 14px;
        box-shadow: 0 16px 32px rgba(15, 23, 42, 0.35);
    }
    .home-notice-card {
        padding: 10px 10px;
    }
    .home-photo-caption {
        font-size: 11px;
    }
}


/* 모바일 레이아웃 — 900px 이하 */
@media (max-width: 900px) {
    .layout-inner {
        padding: 0 14px;
    }
    /* 2열 → 1열 */
    .home-hero-layout {
        display: block;
    }

    /* 좌측 사진 */
    .home-hero-photo {
        width: 100% !important;
        margin-bottom: 20px;
    }

    .home-hero-img {
        width: 100%;
        max-height: 420px; /* 모바일 최적 높이 */
        object-fit: cover;
    }

    /* 우측 공지 영역 */
    .home-right-column {
        width: 100% !important;
    }

    .home-notice-card {
        width: 100%;
        margin-bottom: 20px;
    }

    /* NOTE 블록 정렬 */
    .home-note-block {
        width: 100%;
        margin-top: 10px;
    }

    .home-title { font-size: 22px; }
    .home-subtitle { font-size: 14px; }
}

@media (max-width: 768px) {
    .home-hero-img {
        height: 360px;   /* 모바일에서는 조금 낮게 */
    }
}