/* ==========================================
   0. Web Fonts (구글 폰트 연결 추가)
   ========================================== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300&family=Noto+Sans+KR:wght@300;400;500;700&display=swap');

/* ==========================================
   1. Reset & Global Styles
   ========================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Noto Sans KR', sans-serif;
    background-color: #F6F5F2;
    color: #2A2A2A;
    line-height: 1.8;
    letter-spacing: -0.01em;
}
a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}
.serif {
    font-family: 'Cormorant Garamond', serif;
}
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ==========================================
   2. Header Style
   ========================================== */
header {
    padding: 60px 0 40px 0;
    text-align: center;
}
header h1 {
    font-size: 32px;
    font-weight: 400;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}
header p {
    font-size: 14px;
    color: #888;
    font-weight: 300;
}

/* ==========================================
   3. Navigation
   ========================================== */
.categories {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-bottom: 40px;
    font-size: 14px;
    border-bottom: 1px solid #E5E3DF;
    padding-bottom: 15px;
}
.categories a {
    color: #888;
}
.categories a.active, .categories a:hover {
    color: #2A2A2A;
    font-weight: 500;
}

/* ==========================================
   4. Dashboard Grid Layout
   ========================================== */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 60px;
}

@media (max-width: 850px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}

/* Common Section Box */
.section-box {
    background: #ffffff;
    padding: 25px;
    border-radius: 4px;
    border: 1px solid #E5E3DF;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}
.section-title {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid #F6F5F2;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.section-title .more {
    font-size: 12px;
    color: #A0A0A0;
    font-weight: 400;
}

/* ==========================================
   5. Styled Table (Account & Planner)
   ========================================== */
.styled-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    text-align: left;
}
.styled-table th {
    background-color: #F9F8F6;
    color: #666;
    font-weight: 500;
    padding: 10px 12px;
    border-bottom: 1px solid #E5E3DF;
}
.styled-table td {
    padding: 12px;
    border-bottom: 1px solid #F0EFEF;
    color: #4A4A4A;
}
.styled-table tr:last-child td {
    border-bottom: none;
}

.income { color: #2E7D32; font-weight: 500; }
.expense { color: #C62828; font-weight: 500; }

/* ==========================================
   6. Planner Calendar Style
   ========================================== */
.calendar-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}
.calendar-table th {
    font-size: 12px;
    color: #888;
    padding: 8px 0;
    font-weight: 400;
}
.calendar-table td {
    padding: 10px 0;
    font-size: 13px;
    border: 1px solid #F0EFEF;
    height: 50px;
    vertical-align: top;
    position: relative;
}
.calendar-table .date-num {
    display: block;
    font-size: 11px;
    color: #666;
    margin-bottom: 4px;
}
.plan-dot {
    display: inline-block;
    width: 5px;
    height: 5px;
    background-color: #A3B18A;
    border-radius: 50%;
}
.calendar-table td.today {
    background-color: #F0EFEF;
    font-weight: bold;
}

/* ==========================================
   7. Board Style
   ========================================== */
.post-list-section {
    grid-column: 1 / -1;
}
.post-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px 0;
    border-bottom: 1px solid #E5E3DF;
    cursor: pointer;
}
.post-item:last-child {
    border-bottom: none;
}
.post-left { padding-right: 40px; }
.post-date { font-size: 12px; color: #A0A0A0; margin-bottom: 4px; display: block; }
.post-title { font-size: 16px; font-weight: 400; color: #2A2A2A; margin-bottom: 6px; }
.post-preview {
    font-size: 13px;
    color: #777;
    font-weight: 300;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.post-thumbnail { width: 60px; height: 60px; object-fit: cover; border-radius: 2px; flex-shrink: 0; }

/* ==========================================
   8. Footer Style
   ========================================== */
footer {
    text-align: center;
    padding: 40px 0;
    font-size: 12px;
    color: #A0A0A0;
    border-top: 1px solid #E5E3DF;
    margin-top: 40px;
}

/* ==========================================
   9. D-Day Counter Style (보완 완료)
   ========================================== */
.counter-container {
    text-align: center;
    background: white;
    padding: 30px 50px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 1px solid #E5E3DF;
}
.target1-date, .target2-date {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 25px;
}

/* dday-display1과 dday-display2에 공통으로 들어가는 디자인 박스 클래스 */
.dday-box {
    font-size: 2.2rem;
    font-weight: bold;
    color: #e74c3c;
    background: #fdf2f2;
    padding: 15px 30px;
    border-radius: 10px;
    display: inline-block;
    letter-spacing: 0.02em;
}
/* D-day 두 개를 감싸는 유연한 가로 정렬 그리드 */
.dday-wrapper {
    grid-column: 1 / -1;       /* 대시보드 그리드 전체 너비를 활용 */
    display: grid;
    grid-template-columns: 1fr 1fr; /* 좌우 5:5 정렬 */
    gap: 40px;                 /* 박스 사이 간격 (기존 grid와 통일) */
}

/* 모바일이나 창이 작아질 때는 세로로 자연스럽게 흐르도록 설정 */
@media (max-width: 850px) {
    .dday-wrapper {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}