/* --- dashboard-grid-four.css --- */
/* 4분할 워크 스페이스 카드: 강한 인터랙션 + 카드별 테마 리디자인 */

.page-section--fill {
    min-height: calc(100vh - 174px);
    display: flex;
}

/* dashboard_more 전용: 상단 공지+가이드 한 화면 높이 → 스크롤 시 아래에 달력만 */
/*
 * 최초 등장: #four-grid 가 아니라 이 래퍼에만 opacity 페이드.
 * (#four-grid 에 animation + transform 을 두면 ① 자식 카드 scale 애니와 합성이 꼬이거나
 *  ② 닫을 때 four-grid--expanded 가 빠지며 선택자가 다시 맞아 그리드 마운트 애니가 재생될 수 있음)
 */
#dashboard-more-content.page-section--fill {
    height: auto;
    align-items: stretch;
    animation: workspace-content-mount 0.48s cubic-bezier(0.2, 1, 0.3, 1) both;
}

@keyframes workspace-content-mount {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* 위 행(공지·가이드)과 동일한 세로 최소 트랙을 아래 행(달력)에도 적용 → 가이드 칸과 같은 세로 길이감 */
#four-grid.four-grid--workspace-stack {
    --ws-row-track: calc(100vh - 174px);
    grid-template-columns: 1fr 1fr;
    grid-template-rows: var(--ws-row-track) var(--ws-row-track);
    row-gap: 24px;
    min-height: calc((100vh - 174px) * 2 + 24px);
    /* 워크스페이스만: 열/행 그리드 전환 애니 제거 — 확장/축소 시 다른 칸이 덜컥 움직이는 느낌 완화 */
    transition: gap 0.3s ease;
}

/*
 * 확장 시 반쪽만 차지하던 원인: #four-grid…workspace-stack 이 ID 로 2열을 유지해
 * .four-grid--expanded(1열) 보다 우선했음 → 확장 전용 1열·한 칸·뷰포트 높이
 */
#four-grid.four-grid--workspace-stack.four-grid--expanded {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    gap: 0;
    min-height: calc(100vh - 174px);
    height: calc(100vh - 174px);
    width: 100%;
    align-content: stretch;
}

#four-grid.four-grid--workspace-stack.four-grid--expanded .four-card--expanded {
    width: 100%;
    max-width: none;
    justify-self: stretch;
    /* 테스트: 워크스페이스 카드 열림 애니 끔 — .four-grid--expanded .four-card--expanded 의 card-stage-open 도 무력화 */
    animation: none !important;
}

#four-grid.four-grid--workspace-stack:not(.four-grid--expanded) {
    height: auto;
}

#four-grid.four-grid--workspace-stack:not(.four-grid--expanded) .four-card--board {
    grid-column: 1;
    grid-row: 1;
}

#four-grid.four-grid--workspace-stack:not(.four-grid--expanded) .four-card--guide {
    grid-column: 2;
    grid-row: 1;
}

/* 워크스페이스 스냅 화면에서 상단 카드의 보조 링크 텍스트는 숨김 */
#four-grid.four-grid--workspace-stack:not(.four-grid--expanded) .four-card--board .four-card-more,
#four-grid.four-grid--workspace-stack:not(.four-grid--expanded) .four-card--guide .four-card-more {
    display: none;
}

#four-grid.four-grid--workspace-stack:not(.four-grid--expanded) .four-card--calendar {
    grid-column: 1 / -1;
    grid-row: 2;
    min-height: 0;
    align-self: stretch;
    height: 100%;
}

#four-grid.four-grid--workspace-stack:not(.four-grid--expanded) .four-card--calendar .cal-preview,
#four-grid.four-grid--workspace-stack:not(.four-grid--expanded) .four-card--calendar .mini-cal {
    flex: 1;
    min-height: 0;
}

/* 워크스페이스도 인사이트처럼: 현재 섹션만 선명하게 보이도록 */
#four-grid.four-grid--workspace-stack:not(.four-grid--expanded) .four-card {
    opacity: 0.16;
    transform: translateY(16px);
    filter: blur(1.8px);
    transition:
        opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        filter 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, transform, filter;
}

/* 카드 확장/닫기 중에는 페이드 전환 생략 — 즉시 전환 */
#four-grid.four-grid--no-transition {
    transition: none !important;
}

#four-grid.four-grid--no-transition .four-card {
    transition: none !important;
}

#four-grid.four-grid--workspace-stack:not(.four-grid--expanded) .four-card.insight-slide-active {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
}

.four-grid {
    --line: #d8e0dd;
    --ink: #243339;
    --muted: #6f7f84;
    --surface-1: #ffffff;
    --surface-2: #f3f7fa;
    --accent-board: #3f6175;
    --accent-calendar: #2b6f95;
    --accent-guide: #8a6a2f;
    --accent-mail: #b9524a;
    width: 100%;
    min-height: calc(100vh - 174px);
    height: calc(100vh - 174px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 16px;
    position: relative;
    isolation: isolate;
    transition: grid-template-columns 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                gap 0.3s ease;
    font-family: "SUIT Variable", "Pretendard", "Noto Sans KR", sans-serif;
}

/* 워크스페이스 그리드 뒤: 그라데이션은 카드 사이 틈·모서리에 색이 번지듯 보임 → 본문 배경과 동일 단색 */
.four-grid::before {
    content: "";
    position: absolute;
    inset: -18px;
    z-index: -1;
    pointer-events: none;
    background: var(--content-bg, #f9f9f9);
}

/* 호버 시 그리드 비율은 바꾸지 않음 — 칸 전체가 흔들리지 않도록 레이아웃 고정 */

.four-grid--with-content .four-card {
    min-height: 0;
    overflow: hidden;
}

.four-card {
    border-radius: 18px;
    border: 1px solid var(--line);
    background: #fff;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* 슬레이트 블루(rgba(25,42,53)) 그림자는 흰 카드 주변이 푸르게 보임 → 중성 그림자 */
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.09),
        0 2px 6px rgba(0, 0, 0, 0.06);
    transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.34s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.28s ease,
                filter 0.3s ease;
    transform-origin: center;
    /* card-rise-in 은 닫기 후 그리드 복귀 시 재실행되어 옆 카드가 같이 움직여 보였음 → 아래 #four-grid 마운트 1회만 */
}

.four-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0.75;
    background: linear-gradient(130deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.06) 58%);
}

.four-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38);
}

/* 확장된 카드(.four-card--expanded)에는 적용하지 않음 — 키프레임 transform 과 충돌 */
.four-card:not(.four-card--expanded):hover {
    transform: none;
    box-shadow:
        0 13px 28px rgba(0, 0, 0, 0.1),
        0 3px 9px rgba(0, 0, 0, 0.07);
    z-index: 2;
    filter: none;
}

.four-card:not(.four-card--expanded):hover::after {
    opacity: 1;
}

.four-card-compact {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 18px;
    position: relative;
    padding-bottom: 42px;
}

.four-card-expanded {
    display: none;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 22px;
    transform-origin: center;
}

.four-card--expanded .four-card-compact {
    display: none;
}

.four-card--expanded .four-card-expanded {
    display: flex;
    flex-direction: column;
    animation: card-zoom-open 0.52s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* 워크스페이스: 내부에 또 scale(card-zoom-open)을 주면 부모 transform 과 겹쳐 체감이 사라짐 → 부모 한 번만 애니 */
#four-grid.four-grid--workspace-stack .four-card--expanded .four-card-expanded {
    animation: none;
}

.four-card-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid #d8dfdd;
    background: #ffffffd9;
    color: #5e6e75;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    z-index: 20;
    transition: all 0.2s ease;
}

.four-card-close:hover {
    background: #fff;
    color: #26353b;
    transform: scale(1.05);
}

.four-card-more {
    position: absolute;
    left: 50%;
    bottom: 11px;
    transform: translateX(-50%);
    display: inline-block;
    font-size: 0.69rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: rgba(55, 93, 113, 0.44);
    white-space: nowrap;
    transition: color 0.2s ease, opacity 0.2s ease;
    opacity: 0.66;
}

.four-card-more::after {
    content: "";
}

.four-card:hover .four-card-more {
    color: rgba(44, 85, 107, 0.68);
}

.four-grid--expanded {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    min-height: calc(100vh - 174px);
    height: calc(100vh - 174px);
    gap: 0;
}

.four-grid--expanded .four-card {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

/* 확장 시: 누르지 않은 카드는 움직이지 않음(스케일·블러·페이드 전환 없음). 보이기만 끔 */
.four-grid--expanded .four-card:not(.four-card--expanded) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
}

/* 누른 카드만: 카드 껍데기는 card-stage-open, 내부 본문은 .four-card-expanded 의 card-zoom-open */
/* transition 은 transform 을 제외 — 키프레임 scale 과 충돌·무뎌짐 방지 */
.four-grid--expanded .four-card--expanded {
    z-index: 10;
    cursor: default;
    visibility: visible;
    transition: box-shadow 0.28s ease, border-color 0.28s ease;
    animation: card-stage-open 0.58s cubic-bezier(0.18, 1, 0.22, 1) both;
}

/* X 닫기: 누른 카드만 축소(옆 공지·달력은 그대로 숨김 상태 유지, JS 가 끝나면 그리드만 복귀) */
.four-grid--expanded.four-grid--collapsing {
    pointer-events: none;
}

.four-grid--expanded .four-card--expanded.four-card--closing {
    animation: card-stage-close 0.42s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
    transform-origin: center center;
}

/* 테스트: 워크스페이스 카드 닫힘 애니 끔 */
#four-grid.four-grid--workspace-stack.four-grid--expanded .four-card--expanded.four-card--closing {
    animation: none !important;
    transform-origin: center center;
}

#four-grid.four-grid--workspace-stack.four-grid--expanded.four-grid--collapsing .four-card:not(.four-card--expanded) {
    transition: none !important;
    animation: none !important;
}

.four-grid--expanded .four-card--expanded.four-card--closing .four-card-expanded {
    animation: none !important;
    opacity: 0;
    transition: opacity 0.28s ease;
}

/* 워크스페이스 닫기: 본문 별도 페이드 제거 — 부모 카드 축소에 같이 묶임 */
#four-grid.four-grid--workspace-stack.four-grid--expanded .four-card--expanded.four-card--closing .four-card-expanded {
    opacity: 1 !important;
    transition: none !important;
    animation: none !important;
}

/* 1개 확장 상태에서는 카드 hover 인터랙션 비활성
 * 주의: .four-card--expanded 에 transform:none 을 주면 특이도가 :hover 때문에
 * card-stage-open/close 키프레임보다 이기며 스케일 애니가 전부 씹힘(클릭 직후·×에도 포인터가 카드 안).
 * 확장 중인 카드는 그림자·필터만 조정하고, transform 은 키프레임에 맡김. */
.four-grid--expanded .four-card:hover {
    filter: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
}

.four-grid--expanded .four-card:not(.four-card--expanded):hover {
    transform: none;
}

.four-grid--expanded .four-card:hover::after {
    opacity: 0;
}

@keyframes card-zoom-open {
    0% {
        opacity: 0.55;
        transform: scale(0.82);
    }
    65% {
        opacity: 1;
        transform: scale(1.025);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes card-stage-open {
    0% {
        transform: scale(0.76);
    }
    70% {
        transform: scale(1.015);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes card-stage-close {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0.78);
        opacity: 0;
    }
}

/* 1) 게시판 */
.four-card--board {
    background: linear-gradient(175deg, #fcfeff 0%, #eaf2f8 100%);
    border-color: #cfdae2;
}

.four-card--board .board-shell {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    border: 1px solid #d4dfe7;
    background: linear-gradient(180deg, #ffffff 0%, #f8fcff 100%);
    padding: 12px;
    box-shadow: 0 8px 18px rgba(31, 58, 76, 0.07);
}

.four-card--board .board-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border: 1px solid #e2eaf0;
    border-radius: 10px;
    background: linear-gradient(145deg, #f9fcff, #edf5fb);
    margin-bottom: 8px;
}

.four-card--board .board-tabs {
    display: flex;
    gap: 8px;
}

.four-card--board .board-tab {
    min-width: 46px;
    text-align: center;
    font-size: 0.68rem;
    color: #6f838f;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid #d9e2e8;
    background: #fcfeff;
    cursor: default;
}

.four-card--board .board-tab.active {
    color: #1f3e4f;
    background: linear-gradient(145deg, #ebf5fc, #ddebf5);
    border-color: #c7d9e6;
    font-weight: 800;
}

.four-card--board .board-tools {
    display: flex;
    align-items: center;
    gap: 6px;
}

.four-card--board .board-search-wrap {
    height: 30px;
    min-width: 132px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 8px;
    border: 1px solid #d7e0e6;
    background: #fff;
    padding: 0 9px;
}

.four-card--board .search-icon {
    font-size: 0.82rem;
    color: #7f8f98;
}

.four-card--board .board-search-input {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    min-width: 0;
    font-size: 0.72rem;
    color: #42545d;
}

.four-card--board .board-search-input::placeholder {
    color: #9baab3;
}

.four-card--board .board-write {
    height: 30px;
    border: 1px solid #32596f;
    background: linear-gradient(145deg, #3a667e, #2f556c);
    color: #fff;
    border-radius: 8px;
    padding: 0 11px;
    font-size: 0.71rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.four-card--board .board-write:hover {
    filter: brightness(1.04);
}

.four-card--board .board-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.four-card--board h3 {
    margin: 0;
    font-size: 1rem;
    color: #243741;
    font-weight: 800;
}

.four-card--board .board-subtitle {
    margin: 0;
    font-size: 0.71rem;
    color: #8d9ca5;
}

.four-card--board .board-table-head {
    display: grid;
    grid-template-columns: 44px 1fr 58px 62px;
    align-items: center;
    padding: 8px 8px;
    border-top: 1px solid #d8e3eb;
    border-bottom: 1px solid #d8e3eb;
    background: #f1f7fb;
    border-radius: 8px 8px 0 0;
    font-size: 0.7rem;
    color: #7c8d97;
    font-weight: 800;
}

.four-card--board .board-table-head span:nth-child(1),
.four-card--board .board-table-head span:nth-child(3),
.four-card--board .board-table-head span:nth-child(4) {
    text-align: center;
}

.four-card--board .board-list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    border: 1px solid #e3ebf0;
    border-top: none;
    border-radius: 0 0 8px 8px;
    background: #ffffff;
}

.four-card--board .board-list li {
    display: grid;
    grid-template-columns: 44px 1fr 58px 62px;
    align-items: center;
    padding: 10px 8px;
    border-bottom: 1px solid #edf2f5;
    font-size: 0.8rem;
    color: #354952;
    transition: background 0.18s ease;
    position: relative;
}

.four-card--board .board-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    bottom: 7px;
    width: 2px;
    border-radius: 999px;
    background: transparent;
    transition: background 0.2s ease;
}

.four-card--board .board-list li:last-child {
    border-bottom: none;
}

.four-card--board .board-list li:hover {
    background: #f6fbff;
}

.four-card--board .board-list li:hover::before {
    background: #6b8ea3;
}

.four-card--board .list-no {
    color: #8c9da7;
    font-size: 0.72rem;
    text-align: center;
    font-weight: 700;
}

.four-card--board .list-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.four-card--board .list-author {
    text-align: center;
    font-size: 0.72rem;
    color: #8698a2;
}

.four-card--board .list-date {
    text-align: center;
    font-size: 0.72rem;
    color: #8b9ca6;
}

.four-card--board .board-expanded h2 {
    margin: 0;
    color: #22363f;
    font-size: 1.18rem;
}

.four-card--board .board-expanded {
    border: 1px solid #d7e3ea;
    border-radius: 14px;
    background: linear-gradient(180deg, #fbfdff 0%, #f3f9fd 100%);
    padding: 14px;
}

.four-card--board .board-expanded-toolbar {
    margin: 10px 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.four-card--board .board-expanded-meta {
    margin: 0;
    font-size: 0.8rem;
    color: #85959e;
}

.four-card--board .board-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.four-card--board .board-select {
    height: 32px;
    border: 1px solid #d8e1e7;
    border-radius: 8px;
    padding: 0 10px;
    color: #4e616b;
    background: #fff;
    font-size: 0.76rem;
}

.four-card--board .board-table-head-full {
    border-radius: 8px 8px 0 0;
    margin-bottom: 0;
    grid-template-columns: 52px 1fr 90px 110px 60px;
}

.four-card--board .board-list-full {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid #e5edf2;
    border-top: none;
    border-radius: 0 0 10px 10px;
    overflow: hidden;
}

.four-card--board .board-list-full li {
    display: grid;
    grid-template-columns: 52px 1fr 90px 110px 60px;
    align-items: center;
    gap: 10px;
    padding: 12px 12px;
    background: #fff;
    border-bottom: 1px solid #edf2f5;
    margin-bottom: 0;
    transition: background 0.2s ease;
}

.four-card--board .board-list-full li:hover {
    background: #f7fbfe;
}

.four-card--board .board-list-full li:last-child {
    border-bottom: none;
}

.four-card--board .list-id {
    font-size: 0.72rem;
    color: #899ca6;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    text-align: center;
    font-weight: 700;
}

.four-card--board .list-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.four-card--board .list-title-wrap strong {
    font-size: 0.9rem;
    color: #30444e;
}

.four-card--board .list-title-wrap em {
    font-style: normal;
    font-size: 0.74rem;
    color: #8798a0;
}

.four-card--board .board-list-full .list-author,
.four-card--board .board-list-full .list-date,
.four-card--board .list-views {
    text-align: center;
    font-size: 0.75rem;
    color: #8496a0;
}

.four-card--board .board-pagination {
    margin-top: 12px;
    display: flex;
    justify-content: center;
    gap: 6px;
}

.four-card--board .board-pagination .page {
    min-width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid #dce5ea;
    background: #fff;
    color: #7e9099;
    font-size: 0.74rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.four-card--board .board-pagination .page.active {
    background: #2f566d;
    border-color: #2f566d;
    color: #fff;
}

.four-card--board .board-pagination .page.next {
    font-size: 0.95rem;
}

.four-card--board .board-pagination .page.prev {
    font-size: 0.95rem;
}

/* 2) 가이드 - 포스트잇 (베이지 카드 톤) */
.four-card--guide {
    background: radial-gradient(circle at 20% 16%, #fbf9f0 0%, #e8e5d8 100%);
    border-color: #d5d9c6;
}

.four-card--guide .guide-preview {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.four-card--guide h3 {
    margin: 0 0 12px;
    color: #36484d;
    font-size: 1.06rem;
    font-weight: 800;
}

.four-card--guide .sticky-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(88px, 1fr));
    gap: 12px;
    background: transparent;
}

.four-card--guide .sticky-note,
.four-card--guide .guide-note {
    position: relative;
    border-radius: 9px;
    padding: 14px 13px 10px;
    box-shadow:
        0 12px 22px rgba(44, 59, 63, 0.18),
        0 2px 4px rgba(44, 59, 63, 0.1);
    font-family: "Gowun Dodum", "Nanum Pen Script", "Noto Sans KR", sans-serif;
    background-image: repeating-linear-gradient(
        180deg,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0) 22px,
        rgba(103, 93, 57, 0.08) 22px,
        rgba(103, 93, 57, 0.08) 23px
    );
}

.four-card--guide .sticky-note::before,
.four-card--guide .guide-note::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 11px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.four-card--guide .sticky-note {
    font-size: 0.92rem;
    line-height: 1.5;
    color: #394f55;
}

.four-card--guide .note-a { background-color: #fff0a8; transform: rotate(-1.8deg); }
.four-card--guide .note-b { background-color: #ffd6a0; transform: rotate(1.9deg); }
.four-card--guide .note-c { background-color: #c6f1dc; transform: rotate(-1.4deg); }
/* 4장: 밝은 파랑은 주변에 푸른빛·글로우처럼 퍼져 보일 수 있음 */
.four-card--guide .note-d { background-color: #ebe4d6; transform: rotate(1.6deg); }

.four-card--guide .guide-expanded h2 {
    margin: 0 0 15px;
    color: #304349;
    font-size: 1.25rem;
}

.four-card--guide .guide-expanded {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.four-card--guide .guide-notes {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.four-card--guide .guide-note {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.four-card--guide .guide-note h4 {
    margin: 0 0 8px;
    color: #33484e;
    font-size: 0.98rem;
}

.four-card--guide .guide-note p {
    margin: 0;
    color: #3f575d;
    font-size: 0.88rem;
    line-height: 1.55;
}

/* 3) 달력 - FullCalendar 월간 뷰 느낌 (무료 레이아웃 스타일 참조) */
.four-card--calendar {
    background: linear-gradient(168deg, #ffffff 0%, #e9f4fb 100%);
    border-color: #c7dbe8;
}

.four-card--calendar .cal-preview {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.four-card--calendar .cal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.four-card--calendar h3 {
    margin: 0;
    font-size: 1.04rem;
    color: #2d4654;
    font-weight: 800;
}

.four-card--calendar .cal-badge {
    font-size: 0.71rem;
    font-weight: 700;
    color: #1e5f80;
    border: 1px solid #bad8ea;
    background: #e5f3fb;
    border-radius: 14px;
    padding: 4px 10px;
}

.four-card--calendar .mini-cal {
    border: 1px solid #d4e2eb;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f3f9fd 100%);
    padding: 9px 9px 8px;
    flex: 1;
}

.four-card--calendar .mini-cal-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    border: 1px solid #dde7ee;
    border-radius: 8px;
    background: #f8fcff;
    padding: 4px 6px;
}

.four-card--calendar .mini-cal-title strong {
    color: #334d5f;
    font-size: 0.83rem;
    font-weight: 800;
}

.four-card--calendar .mini-nav {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1px solid #d3dee5;
    color: #6d8592;
    background: #fff;
    font-size: 0.8rem;
}

.four-card--calendar .mini-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-template-rows: 20px repeat(6, minmax(0, 1fr));
    gap: 3px;
    height: calc(100% - 29px);
    min-height: 0;
    font-size: 0.7rem;
}

.four-card--calendar .mini-cal-grid span {
    min-height: 0;
    border: 1px solid #e7eef4;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4c606b;
    background: #ffffff;
    position: relative;
}

.four-card--calendar .mini-cal-grid .wd {
    border: none;
    min-height: 0;
    font-size: 0.66rem;
    color: #8ea3af;
    background: transparent;
    font-weight: 700;
}

.four-card--calendar .mini-cal-grid .om {
    color: #a9b9c2;
    background: #f5fafe;
}

.four-card--calendar .mini-cal-grid .ev {
    background: linear-gradient(145deg, #e8f4fc, #ddecf8);
    border-color: #bdd9ea;
    color: #245f7d;
    font-weight: 800;
}

.four-card--calendar .mini-cal-grid .ev::after {
    content: "";
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #2d7fa8;
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
}

.four-card--calendar .mini-cal-grid span:hover:not(.wd) {
    background: #f3f9fe;
}

.four-card--calendar .cal-expanded h2 {
    margin: 0 0 14px;
    color: #2d4654;
    font-size: 1.24rem;
}

.four-card--calendar .cal-expanded {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.four-card--calendar .full-cal {
    border-radius: 14px;
    border: 1px solid #d6e4ec;
    background: linear-gradient(180deg, #fbfeff 0%, #f2f9fd 100%);
    padding: 14px;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.four-card--calendar .full-cal-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.four-card--calendar .cal-nav {
    width: 30px;
    height: 30px;
    border: 1px solid #cfdee7;
    border-radius: 8px;
    background: #ffffff;
    color: #5f7580;
    font-size: 1rem;
}

.four-card--calendar .full-cal-title {
    font-size: 1.02rem;
    color: #324c5d;
    font-weight: 800;
}

.four-card--calendar .full-cal-weekdays,
.four-card--calendar .full-cal-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.four-card--calendar .full-cal-weekdays {
    gap: 7px;
    margin-bottom: 7px;
    font-size: 0.78rem;
    color: #7e95a2;
    font-weight: 700;
}

.four-card--calendar .full-cal-weekdays span:first-child { color: #cf5f5d; }
.four-card--calendar .full-cal-weekdays span:last-child { color: #4f79a5; }

.four-card--calendar .full-cal-days {
    flex: 1;
    min-height: 0;
    gap: 7px;
    font-size: 0.86rem;
    grid-template-rows: repeat(6, minmax(0, 1fr));
}

.four-card--calendar .full-cal-days span {
    min-height: 0;
    border: 1px solid #e1ebf1;
    border-radius: 9px;
    background: #ffffff;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 5px 6px;
    color: #41565f;
    position: relative;
}

.four-card--calendar .full-cal-days span:hover {
    background: #f5fbff;
}

.four-card--calendar .full-cal-days .om {
    background: #f6fafc;
    color: #a6b4bc;
}

.four-card--calendar .full-cal-days .ev {
    background: linear-gradient(150deg, #d7eefc, #c9e6f8);
    border-color: #b2d9ee;
    color: #1e688d;
    font-weight: 800;
}

.four-card--calendar .full-cal-days .ev::after {
    content: "•";
    position: absolute;
    right: 7px;
    bottom: 3px;
    font-size: 0.82rem;
    color: #2e88b5;
}

.four-card--calendar .cal-legend {
    margin-top: 11px;
    display: flex;
    align-items: center;
    gap: 7px;
    color: #617985;
    font-size: 0.82rem;
}

.four-card--calendar .leg-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #4f9bc2;
}

/* 4) 소리함 */
.four-card--mailbox {
    background: radial-gradient(circle at 20% 15%, #fff9f8 0%, #f8e5e2 100%);
    border-color: #e7c4bf;
}

.four-card--mailbox .mailbox-preview {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.four-card--mailbox .mailbox-icon-wrap {
    width: 56px;
    height: 42px;
    margin-bottom: 11px;
    border-radius: 8px;
    background: linear-gradient(145deg, #d96860 0%, #c6534b 100%);
    box-shadow:
        0 10px 20px rgba(184, 83, 74, 0.3),
        0 2px 6px rgba(184, 83, 74, 0.22);
    position: relative;
}

.four-card--mailbox .mailbox-icon-wrap::after {
    content: "";
    width: 42px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.75);
    border-top: none;
    border-left: none;
    border-right: none;
    background: transparent;
    position: absolute;
    left: 50%;
    top: 10px;
    transform: translateX(-50%);
}

.four-card--mailbox .mailbox-icon-wrap::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    margin: auto;
    width: 0;
    height: 0;
    border-left: 28px solid transparent;
    border-right: 28px solid transparent;
    border-top: 18px solid rgba(255, 255, 255, 0.28);
}

.four-card--mailbox h3 {
    margin: 0 0 6px;
    font-size: 1rem;
    color: #87433f;
    font-weight: 800;
}

.four-card--mailbox .mailbox-preview p {
    margin: 0;
    font-size: 0.85rem;
    color: #9f5f5b;
}

.four-card--mailbox .mailbox-expanded h2 {
    margin: 0 0 16px;
    font-size: 1.24rem;
    color: #8d3d39;
}

.four-card--mailbox .feedback-form input,
.four-card--mailbox .feedback-form textarea {
    width: 100%;
    border: 1px solid #e8b8b3;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.88);
    padding: 13px 14px;
    margin-bottom: 11px;
    font-family: inherit;
}

.four-card--mailbox .feedback-form textarea {
    min-height: 104px;
    resize: vertical;
}

.four-card--mailbox .feedback-form button {
    border: none;
    border-radius: 8px;
    background: linear-gradient(145deg, #d45e57, #bd4b44);
    color: #fff;
    font-size: 0.91rem;
    font-weight: 700;
    padding: 11px 22px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.four-card--mailbox .feedback-form button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(176, 72, 63, 0.26);
}

@media (prefers-reduced-motion: reduce) {
    .four-card,
    .four-card--expanded .four-card-expanded,
    .four-grid--expanded .four-card--expanded,
    .four-grid--expanded .four-card--expanded.four-card--closing,
    #dashboard-more-content.page-section--fill {
        animation: none !important;
    }

    #four-grid.four-grid--workspace-stack:not(.four-grid--expanded) .four-card {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}

@media (max-width: 1200px) {
    .page-section--fill,
    .four-grid,
    .four-grid--expanded {
        min-height: calc(100vh - 204px);
        height: calc(100vh - 204px);
    }

    #dashboard-more-content.page-section--fill {
        height: auto;
        min-height: calc(100vh - 204px);
    }

    #four-grid.four-grid--workspace-stack {
        --ws-row-track: minmax(calc(100vh - 204px - 16px), auto);
        grid-template-rows: var(--ws-row-track) var(--ws-row-track);
        min-height: calc((100vh - 204px - 16px) * 2 + 16px);
    }

    #four-grid.four-grid--workspace-stack:not(.four-grid--expanded) {
        height: auto;
    }

    #four-grid.four-grid--workspace-stack.four-grid--expanded {
        min-height: calc(100vh - 204px);
        height: calc(100vh - 204px);
    }

    .four-card-compact {
        padding: 18px;
    }
}

@media (max-width: 900px) {
    .page-section--fill {
        min-height: 0;
        display: block;
    }

    .four-grid,
    .four-grid--expanded {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, minmax(226px, auto));
        min-height: 0;
        height: auto;
        gap: 16px;
    }

    #four-grid.four-grid--workspace-stack:not(.four-grid--expanded) {
        grid-template-columns: 1fr;
        /* 가이드 행과 동일 minmax → 달력 행 세로도 동일 */
        grid-template-rows: minmax(36vh, 240px) minmax(36vh, 240px) minmax(36vh, 240px);
    }

    #four-grid.four-grid--workspace-stack:not(.four-grid--expanded) .four-card--board {
        grid-column: 1;
        grid-row: 1;
    }

    #four-grid.four-grid--workspace-stack:not(.four-grid--expanded) .four-card--guide {
        grid-column: 1;
        grid-row: 2;
    }

    #four-grid.four-grid--workspace-stack:not(.four-grid--expanded) .four-card--calendar {
        grid-column: 1;
        grid-row: 3;
        min-height: 0;
        align-self: stretch;
        height: 100%;
    }

    #four-grid.four-grid--workspace-stack:not(.four-grid--expanded) .four-card--calendar .cal-preview,
    #four-grid.four-grid--workspace-stack:not(.four-grid--expanded) .four-card--calendar .mini-cal {
        flex: 1;
        min-height: 0;
    }

    /* 좁은 화면에서도 확장 카드는 한 칸 전체·고정 높이 (위 .four-grid--expanded repeat(4) 규칙 덮어씀) */
    #four-grid.four-grid--workspace-stack.four-grid--expanded {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        min-height: calc(100vh - 204px);
        height: calc(100vh - 204px);
        gap: 0;
    }

    .four-grid--expanded .four-card:not(.four-card--expanded) {
        display: none;
    }

    .four-card--guide .guide-notes {
        grid-template-columns: 1fr;
    }

    .four-card--board .board-topbar {
        flex-direction: column;
        align-items: stretch;
    }

    .four-card--board .board-tools {
        width: 100%;
    }

    .four-card--board .board-search-wrap {
        flex: 1;
    }

    .four-card--board .board-expanded-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .four-card--board .board-table-head,
    .four-card--board .board-list li {
        grid-template-columns: 42px 1fr 58px;
    }

    .four-card--board .board-table-head span:nth-child(3),
    .four-card--board .board-list .list-author {
        display: none;
    }

    .four-card--board .board-table-head-full,
    .four-card--board .board-list-full li {
        grid-template-columns: 42px 1fr 92px;
    }

    .four-card--board .board-table-head-full span:nth-child(3),
    .four-card--board .board-table-head-full span:nth-child(5),
    .four-card--board .board-list-full .list-author,
    .four-card--board .board-list-full .list-views {
        display: none;
    }
}