/* ==========================================================================
   Daily Life Feed Styles (PinZoy Clean Daily Log)
   ========================================================================== */

/* Daily Life Feed (Accordion Expandable List) */
.daily-feed-grid {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-top: 0;
}

/* Date Group Header (Year & Month Divider) */
.daily-date-group-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.75rem 0 0.5rem;
    padding: 0 0.25rem;
}

.daily-date-group-header:first-child {
    margin-top: 0.25rem;
}

.daily-date-group-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(217, 119, 87, 0.14);
    border: 1px solid rgba(217, 119, 87, 0.35);
    color: var(--accent-purple);
    font-family: 'Outfit', 'Noto Sans KR', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    padding: 0.35rem 0.95rem;
    border-radius: 20px;
    box-shadow: 0 0 16px rgba(217, 119, 87, 0.18);
    letter-spacing: -0.2px;
    white-space: nowrap;
}

.daily-date-group-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(217, 119, 87, 0.35) 0%, rgba(180, 160, 135, 0.1) 100%);
}

.daily-feed-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(12px);
    transition: border-color 0.25s ease, 
                box-shadow 0.25s ease,
                background 0.25s ease;
}

.daily-feed-item:hover {
    border-color: var(--border-color-hover);
    box-shadow: var(--shadow-md);
}

.daily-feed-item.expanded {
    border-color: rgba(217, 119, 87, 0.45);
    box-shadow: var(--shadow-md), 0 0 16px rgba(217, 119, 87, 0.12);
}

/* 1. Header / Summary Row */
.daily-item-summary {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.15rem 1.35rem;
    cursor: pointer;
    user-select: none;
    transition: background 0.18s ease;
}

.daily-item-summary:hover {
    background: var(--bg-card-hover);
}

.daily-feed-item.expanded .daily-item-summary {
    background: rgba(180, 160, 135, 0.08);
}

/* Thumbnail (Configurable representative image size) */
.daily-item-thumb {
    width: var(--post-thumb-size, 140px);
    height: var(--post-thumb-size, 140px);
    min-width: var(--post-thumb-size, 140px);
    min-height: var(--post-thumb-size, 140px);
    border-radius: 12px;
    overflow: hidden;
    background: #EDE8DF;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.daily-item-thumb img,
.daily-item-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.daily-feed-item:hover .daily-item-thumb img,
.daily-feed-item:hover .daily-item-thumb video {
    transform: scale(1.05);
}

.daily-item-thumb-fallback {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    opacity: 0.5;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

/* Body (Title + Meta + 2-line Excerpt) */
.daily-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    justify-content: center;
}

.daily-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.daily-item-title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.daily-item-title {
    font-size: var(--font-post-title, 1.15rem);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.4;
    letter-spacing: -0.2px;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.daily-feed-item:hover .daily-item-title {
    color: var(--accent-purple);
}

.daily-feed-item.expanded .daily-item-title {
    color: var(--accent-blue);
}

.daily-item-cat-badge {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--accent-blue);
    background: rgba(217, 119, 87, 0.12);
    border: 1px solid rgba(217, 119, 87, 0.25);
    padding: 0.12rem 0.5rem;
    border-radius: 6px;
    flex-shrink: 0;
    white-space: nowrap;
}

.daily-item-meta {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-shrink: 0;
}

/* Date (Configurable font size) */
.daily-item-date {
    font-size: var(--font-post-date, 1.4rem);
    font-family: 'Outfit', sans-serif;
    color: var(--text-primary);
    font-weight: 700;
    letter-spacing: -0.3px;
    white-space: nowrap;
}

.daily-item-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--text-muted);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
}

.daily-feed-item.expanded .daily-item-toggle-icon {
    transform: rotate(180deg);
    color: var(--accent-blue);
}

/* Excerpt (1-2 lines, Configurable font size) */
.daily-item-excerpt {
    font-size: var(--font-post-excerpt, 0.92rem);
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.daily-item-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.2rem;
}

/* 2. Expandable Full Content Detail (Unrolling Scroll Animation) */
.daily-item-detail {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.42s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.3s ease,
                box-shadow 0.42s ease;
    border-top: 1px solid transparent;
    background: #FAF7F0;
    overflow: hidden;
}

.daily-feed-item.expanded .daily-item-detail {
    grid-template-rows: 1fr;
    border-top-color: var(--border-color);
    box-shadow: inset 0 8px 12px -8px rgba(180, 160, 135, 0.28);
}

.daily-detail-inner {
    min-height: 0;
    padding: 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    opacity: 0;
    transform: translateY(-10px) scaleY(0.97);
    transform-origin: top center;
    transition: opacity 0.3s ease 0.06s,
                transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
                padding 0.42s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.42s ease;
    visibility: hidden;
}

.daily-feed-item.expanded .daily-detail-inner {
    padding: 1.5rem 1.5rem 1.25rem;
    opacity: 1;
    transform: translateY(0) scaleY(1);
    visibility: visible;
}

.daily-detail-admin-bar {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px dashed var(--border-color);
}

.daily-detail-bottom-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--border-color);
    flex-wrap: wrap;
}

.daily-detail-bottom-bar .daily-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding-top: 0;
    flex: 1;
}

.daily-detail-bottom-bar .daily-detail-admin-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
    padding-bottom: 0;
    border-bottom: none;
    margin-left: auto;
}

.daily-detail-content {
    color: var(--text-secondary);
    line-height: 1.8;
    font-size: var(--font-post-body, 0.95rem);
    word-break: break-word;
}

.daily-detail-content p {
    margin: 0 0 0.5rem 0;
    line-height: 1.75;
}

.daily-detail-content p:last-child {
    margin-bottom: 0;
}

.daily-detail-content p:empty {
    display: none;
}

.daily-detail-content img {
    max-width: 100%;
    border-radius: var(--radius-md);
    margin: 1rem 0;
    display: block;
    box-shadow: var(--shadow-sm);
}

.daily-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding-top: 0.5rem;
}

.daily-detail-footer {
    display: flex;
    justify-content: center;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.daily-collapse-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 0.8rem;
    padding: 0.4rem 1.1rem;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.daily-collapse-btn:hover {
    border-color: var(--border-color-hover);
    color: var(--accent-purple);
    background: rgba(180, 160, 135, 0.12);
}

/* Empty State */
.daily-empty-state {
    text-align: center;
    padding: 4rem 1.5rem;
    background: var(--bg-card);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-lg);
}

.daily-empty-state h3 {
    font-size: 1.25rem;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.daily-empty-state p {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .daily-item-summary {
        padding: 0.85rem 0.95rem;
        gap: 0.85rem;
        align-items: flex-start;
    }
    .daily-item-thumb {
        width: 82px;
        height: 82px;
        min-width: 82px;
        min-height: 82px;
        border-radius: 10px;
    }
    .daily-item-thumb-fallback {
        font-size: 1.25rem;
    }
    .daily-item-body {
        gap: 0.35rem;
        min-width: 0;
    }
    .daily-item-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
        width: 100%;
    }
    .daily-item-title-row {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 0.45rem;
        min-width: 0;
    }
    .daily-item-title {
        font-size: 0.98rem;
        flex: 1;
        min-width: 0;
    }
    .daily-item-cat-badge {
        font-size: 0.68rem;
        padding: 0.1rem 0.4rem;
        flex-shrink: 0;
    }
    .daily-item-meta {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
    }
    .daily-item-date {
        font-size: 0.82rem;
        color: var(--text-muted);
        font-weight: 600;
    }
    .daily-item-toggle-icon {
        width: 18px;
        height: 18px;
    }
    .daily-item-excerpt {
        font-size: 0.82rem;
        line-height: 1.5;
    }
    .daily-detail-inner {
        padding: 1rem 0.95rem;
    }
}

/* ==========================================================================
   3-Column Layout, Left Category Tree, Right Calendar & Visitors
   ========================================================================== */

.daily-3col-layout {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: var(--col-left-width, 240px) minmax(0, 1fr) var(--col-right-width, 260px);
    gap: 2rem;
    align-items: start;
    box-sizing: border-box;
}

.layout-col-left {
    width: var(--col-left-width, 240px);
    position: sticky;
    top: 76px;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.layout-col-right {
    width: var(--col-right-width, 260px);
    position: sticky;
    top: 76px;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.layout-col-center {
    min-width: 0;
    width: 100%;
}

/* --- Left Sidebar: Category / Board Tree --- */
.category-tree {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    backdrop-filter: blur(16px);
    box-shadow: var(--shadow-sm);
    transition: border-color 0.2s ease;
}

.category-tree:hover {
    border-color: var(--border-color-hover);
}

.category-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.15rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--border-color);
}

/* 1단계 기준: 게시판 제목 (UI 매니저 연동 기본값: 1.26rem) */
.category-sidebar-title {
    font-size: var(--font-board-title, 1.26rem);
    font-weight: 800;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.45rem;
    letter-spacing: -0.4px;
}

.category-group {
    margin-bottom: 1.35rem;
}

.category-group:last-child {
    margin-bottom: 0;
}

/* 2단계: 게시판 분류 (그룹명 / 대분류, UI 매니저 연동 기본값: 1.05rem) */
.category-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--font-board-group, 1.05rem);
    font-weight: 700;
    color: var(--accent-blue);
    letter-spacing: -0.2px;
    margin-bottom: 0.45rem;
    padding: 0.35rem 0.4rem 0.4rem;
    border-bottom: 1px solid var(--border-color);
}

.category-group-name {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.category-group-count {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    font-family: 'Outfit', sans-serif;
    letter-spacing: 0;
}

.category-group-actions {
    display: flex;
    gap: 0.3rem;
}

.cat-action-btn {
    background: rgba(180, 160, 135, 0.12);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 0.8rem;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1;
}

.cat-action-btn:hover {
    color: #ffffff;
    background: var(--accent-blue);
    border-color: var(--accent-blue);
}

.cat-action-btn:disabled {
    opacity: 0.2 !important;
    cursor: not-allowed !important;
    pointer-events: none;
}

.category-item-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.category-items-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* 3단계: 게시판 하위 (개별 게시판 항목: 0.92rem) */
.category-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 0.75rem;
    border-radius: var(--radius-sm);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.18s ease;
    user-select: none;
    -webkit-user-select: none;
}

.category-item,
.category-item * {
    user-select: none !important;
    -webkit-user-select: none !important;
    cursor: pointer;
}

.category-item-main {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.category-item-name {
    font-size: var(--font-board-item, 0.92rem);
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.2px;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.18s ease;
}

/* 보조 메타: 하위 게시판 글 수 숫자 뱃지 */
.category-item-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.category-item-count {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: rgba(180, 160, 135, 0.14);
    border: 1px solid var(--border-color);
    padding: 0.1rem 0.5rem;
    border-radius: 10px;
    font-family: 'Outfit', sans-serif;
    min-width: 18px;
    text-align: center;
    line-height: 1.25;
    transition: all 0.18s ease;
}

.category-item:hover {
    background: rgba(217, 119, 87, 0.1);
    border-color: rgba(217, 119, 87, 0.25);
    transform: translateX(2px);
}

.category-item:hover .category-item-name {
    color: var(--accent-purple);
}

.category-item:hover .category-item-count {
    color: var(--text-primary);
    background: rgba(217, 119, 87, 0.25);
    border-color: rgba(217, 119, 87, 0.45);
}

/* 활성(선택) 게시판 강조 */
.category-item.active {
    background: rgba(217, 119, 87, 0.16);
    border-left: 3.5px solid var(--accent-purple);
    border-color: rgba(217, 119, 87, 0.38);
    box-shadow: 0 0 16px rgba(217, 119, 87, 0.12) inset, var(--shadow-sm);
}

.category-item.active .category-item-name {
    color: var(--accent-purple);
    font-weight: 700;
}

.category-item.active .category-item-count {
    color: #ffffff;
    background: var(--accent-purple);
    border-color: var(--accent-purple);
    font-weight: 700;
    box-shadow: 0 0 8px rgba(217, 119, 87, 0.3);
}

/* --- Center Feed: Active Filter Banner --- */
.feed-filter-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(217, 119, 87, 0.12);
    border: 1px solid rgba(217, 119, 87, 0.3);
    border-radius: var(--radius-md);
    padding: 0.75rem 1.25rem;
    margin-top: 0;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.feed-filter-clear-btn {
    background: none;
    border: 1px solid rgba(217, 119, 87, 0.4);
    color: var(--accent-blue);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.25rem 0.65rem;
    border-radius: 20px;
    transition: all 0.2s ease;
}

.feed-filter-clear-btn:hover {
    background: var(--accent-blue);
    color: #ffffff;
}

/* --- Right Sidebar: Calendar Widget --- */
.calendar-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    backdrop-filter: blur(16px);
    box-shadow: var(--shadow-sm);
    transition: border-color 0.2s ease;
    perspective: 900px;
}

.calendar-body-wrapper {
    position: relative;
    transform-style: preserve-3d;
    transform-origin: top center;
    border-radius: var(--radius-sm);
}

/* Next Month Page Flip (Flip up around top ring binding) */
.cal-flip-next-out {
    animation: calFlipUpOut 0.13s cubic-bezier(0.4, 0, 0.7, 0.2) forwards;
    transform-origin: top center;
    pointer-events: none;
}

.cal-flip-next-in {
    animation: calFlipUpIn 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transform-origin: top center;
}

@keyframes calFlipUpOut {
    0% {
        transform: rotateX(0deg) scale(1);
        opacity: 1;
        filter: brightness(1);
    }
    100% {
        transform: rotateX(68deg) translateY(-8px) scale(0.97);
        opacity: 0;
        filter: brightness(0.92);
    }
}

@keyframes calFlipUpIn {
    0% {
        transform: rotateX(-48deg) translateY(6px) scale(0.98);
        opacity: 0;
        filter: brightness(0.94);
    }
    75% {
        transform: rotateX(3deg) translateY(-0.5px) scale(1.005);
        opacity: 1;
        filter: brightness(1);
    }
    100% {
        transform: rotateX(0deg) translateY(0) scale(1);
        opacity: 1;
        filter: brightness(1);
    }
}

/* Prev Month Page Flip (Flip down from top ring binding) */
.cal-flip-prev-out {
    animation: calFlipDownOut 0.13s cubic-bezier(0.4, 0, 0.7, 0.2) forwards;
    transform-origin: top center;
    pointer-events: none;
}

.cal-flip-prev-in {
    animation: calFlipDownIn 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transform-origin: top center;
}

@keyframes calFlipDownOut {
    0% {
        transform: rotateX(0deg) scale(1);
        opacity: 1;
        filter: brightness(1);
    }
    100% {
        transform: rotateX(-58deg) translateY(8px) scale(0.97);
        opacity: 0;
        filter: brightness(0.92);
    }
}

@keyframes calFlipDownIn {
    0% {
        transform: rotateX(48deg) translateY(-6px) scale(0.98);
        opacity: 0;
        filter: brightness(0.94);
    }
    75% {
        transform: rotateX(-3deg) translateY(0.5px) scale(1.005);
        opacity: 1;
        filter: brightness(1);
    }
    100% {
        transform: rotateX(0deg) translateY(0) scale(1);
        opacity: 1;
        filter: brightness(1);
    }
}

/* Title subtle crossfade */
.cal-title-fade-out {
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity 0.12s ease, transform 0.12s ease;
}
.cal-title-fade-in {
    animation: calTitleFadeIn 0.22s ease-out;
}
@keyframes calTitleFadeIn {
    from {
        opacity: 0;
        transform: translateY(3px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.calendar-card:hover {
    border-color: var(--border-color-hover);
}

.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.9rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.calendar-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-primary);
}

.calendar-nav {
    display: flex;
    gap: 0.35rem;
}

.cal-nav-btn {
    background: rgba(180, 160, 135, 0.12);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
    transition: all 0.2s ease;
}

.cal-nav-btn:hover {
    background: var(--accent-blue);
    color: #ffffff;
    border-color: var(--accent-blue);
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    text-align: center;
}

.cal-day-name {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    padding: 0.25rem 0;
}

.cal-day-name.sun {
    color: #ff6b6b;
}

.cal-day-name.sat {
    color: #4dabf7;
}

.cal-cell {
    height: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    position: relative;
    cursor: pointer;
    transition: all 0.18s ease;
}

.day-number {
    line-height: 1;
}

.cal-cell.empty {
    cursor: default;
}

.day-cell:hover:not(.empty) {
    background: rgba(217, 119, 87, 0.15);
    color: var(--text-primary);
    font-weight: 700;
}

.day-cell.today {
    font-weight: 800;
    color: var(--text-primary);
    border: 1.5px solid var(--accent-orange, #D97757);
    background: rgba(217, 119, 87, 0.08);
}

.day-cell.has-posts .day-number {
    font-weight: 700;
    color: var(--text-primary);
}

.cal-post-indicator {
    position: absolute;
    bottom: 3.5px;
    left: 50%;
    transform: translateX(-50%);
    width: 4.5px;
    height: 4.5px;
    border-radius: 50%;
    background: var(--logo-accent-grad, var(--accent-orange, #D97757));
    box-shadow: 0 1px 3px rgba(45, 38, 32, 0.2);
    pointer-events: none;
    transition: all 0.2s ease;
}

.day-cell.selected .cal-post-indicator {
    background: #FFFDF9 !important;
    box-shadow: 0 1px 4px rgba(255, 255, 255, 0.6);
}

.day-cell.selected {
    background: var(--text-primary, #2D2620) !important;
    color: #ffffff !important;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(45, 38, 32, 0.25);
}

/* Calendar Card & Custom Hover Popover UI */
.calendar-card {
    position: relative;
}

.cal-hover-popover {
    position: absolute;
    z-index: 99;
    pointer-events: none;
    min-width: 145px;
    background: #FFFDF9;
    border: 1px solid rgba(190, 170, 145, 0.45);
    box-shadow: 0 10px 25px rgba(110, 85, 60, 0.18), 0 2px 8px rgba(0, 0, 0, 0.04);
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    font-family: var(--font-sans);
    transition: opacity 0.15s ease;
}

.cal-hover-popover.hidden {
    display: none;
}

.cal-hover-popover::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    background: #FFFDF9;
    border-right: 1px solid rgba(190, 170, 145, 0.45);
    border-bottom: 1px solid rgba(190, 170, 145, 0.45);
}

.cal-hover-popover.popover-bottom::after {
    bottom: auto;
    top: -5px;
    transform: translateX(-50%) rotate(45deg);
    border-right: none;
    border-bottom: none;
    border-left: 1px solid rgba(190, 170, 145, 0.45);
    border-top: 1px solid rgba(190, 170, 145, 0.45);
}

.cal-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    padding-bottom: 0.35rem;
    margin-bottom: 0.35rem;
    border-bottom: 1px solid rgba(190, 170, 145, 0.25);
}

.cal-popover-date {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-primary);
}

.cal-popover-badge {
    background: var(--logo-accent-grad, var(--grad-primary));
    color: #ffffff;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: -0.2px;
}

.cal-popover-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cal-popover-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.74rem;
    color: var(--text-secondary);
}

.cal-popover-label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.cal-popover-icon {
    font-size: 0.75rem;
}

.cal-popover-val {
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    color: var(--text-muted);
}

.cal-popover-val.highlight-vis {
    background: var(--logo-accent-grad, var(--grad-primary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cal-popover-val.highlight-post {
    color: var(--accent-orange, #D97757);
}

.calendar-filter-indicator {
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.78rem;
    color: var(--accent-blue);
    gap: 0.5rem;
}

.cal-filter-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 175px;
}

.cal-clear-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.75rem;
}

.cal-clear-btn:hover {
    color: var(--accent-purple);
}

/* --- Right Sidebar: Guestbook Widget --- */
.guestbook-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 0.85rem 1rem;
    backdrop-filter: blur(16px);
    box-shadow: var(--shadow-sm);
    transition: border-color 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: var(--gb-item-gap, 0.65rem);
}

.guestbook-card:hover {
    border-color: var(--border-color-hover);
}

.gb-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid var(--border-color);
}

.gb-card-title-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gb-card-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.2px;
}

.gb-write-trigger-btn {
    background: rgba(217, 119, 87, 0.12);
    border: 1px solid rgba(217, 119, 87, 0.28);
    color: var(--accent-blue);
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.gb-write-trigger-btn:hover {
    background: var(--accent-blue);
    color: #ffffff;
    box-shadow: 0 0 10px rgba(217, 119, 87, 0.4);
}

.gb-more-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    transition: color 0.15s ease;
    padding: 0.1rem 0.25rem;
}

.gb-more-btn:hover {
    color: var(--accent-blue);
}

.gb-items-list {
    display: flex;
    flex-direction: column;
    gap: var(--gb-item-gap, 0.65rem);
}

.gb-item {
    background: #FBF8F3;
    border: 1px solid rgba(180, 160, 135, 0.25);
    border-radius: 8px;
    padding: 0.5rem 0.65rem;
    transition: all 0.15s ease;
}

.gb-item:hover {
    background: #F5EFE6;
    border-color: rgba(217, 119, 87, 0.4);
}

.gb-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.gb-item-meta {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.gb-author {
    font-size: var(--font-gb-name, 0.88rem);
    font-weight: 700;
    color: var(--accent-blue);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 110px;
}

.gb-date {
    font-size: 0.68rem;
    color: var(--text-muted);
    font-family: monospace;
    flex-shrink: 0;
}

.gb-item-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.gb-action-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    font-size: 0.68rem;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1.2;
    transition: all 0.15s ease;
}

.gb-action-btn:hover {
    color: var(--text-primary);
    background: rgba(180, 160, 135, 0.12);
    border-color: var(--border-color);
}

.gb-action-btn.gb-btn-del:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.25);
}

.gb-action-btn.gb-btn-admin-del {
    color: rgba(239, 68, 68, 0.7);
    font-size: 0.85rem;
    padding: 0 0.2rem;
    line-height: 1;
}

.gb-action-btn.gb-btn-admin-del:hover {
    color: #ef4444;
}

.gb-item-msg {
    font-size: var(--font-gb-msg, 0.85rem);
    color: var(--text-secondary);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: color 0.15s ease;
}

.gb-item-msg:hover {
    color: var(--text-primary);
}

.gb-item-msg.expanded {
    white-space: normal;
    word-break: break-word;
    color: var(--text-primary);
    background: rgba(180, 160, 135, 0.12);
    border-radius: 4px;
    padding: 0.25rem 0.35rem;
    margin-top: 0.2rem;
}

.gb-empty-widget {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 0.2rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.76rem;
}

.gb-empty-write-btn {
    background: rgba(217, 119, 87, 0.12);
    border: 1px solid rgba(217, 119, 87, 0.3);
    color: var(--accent-blue);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.25rem 0.65rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.gb-empty-write-btn:hover {
    background: var(--accent-blue);
    color: #ffffff;
}

/* Responsive: When sidebar space is compact, show 1 item only */
@media (max-height: 720px) {
    .gb-items-list .gb-item:nth-child(n+2) {
        display: none;
    }
}

/* --- Guestbook Full View (Center Column) --- */
.guestbook-full-view {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    animation: fadeIn 0.25s ease;
}

.gb-full-top-nav {
    display: flex;
    align-items: center;
}

.gb-back-btn {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.45rem 0.85rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.2s ease;
}

.gb-back-btn:hover {
    background: rgba(217, 119, 87, 0.1);
    border-color: rgba(217, 119, 87, 0.35);
    color: var(--text-primary);
}

.gb-full-banner {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.gb-full-title-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.gb-full-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}

.gb-full-badge {
    background: rgba(217, 119, 87, 0.12);
    border: 1px solid rgba(217, 119, 87, 0.3);
    color: var(--accent-blue);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.15rem 0.55rem;
    border-radius: 20px;
}

.gb-full-desc {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.gb-full-write-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.4rem;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.2s ease;
}

.gb-full-write-card:hover {
    border-color: var(--border-color-hover);
}

.gb-full-write-completed {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1.2rem;
    text-align: center;
    gap: 0.6rem;
    background: rgba(217, 119, 87, 0.04);
    border: 1px dashed rgba(217, 119, 87, 0.25);
    border-radius: var(--radius-md, 12px);
}

.gb-completed-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(16, 185, 129, 0.12);
    color: var(--color-success, #10b981);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.gb-completed-msg {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.gb-write-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.gb-form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.gb-name-input {
    flex: 1;
    max-width: 220px;
}

.gb-pwd-input {
    flex: 1;
    max-width: 220px;
}

.gb-char-counter {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-family: monospace;
    white-space: nowrap;
}

.gb-msg-input {
    resize: none;
    min-height: 75px;
    line-height: 1.5;
}

.gb-form-footer {
    display: flex;
    justify-content: flex-end;
}

.gb-full-feed-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 2.2rem 1.6rem;
    padding: 1.2rem 0.4rem 2.5rem;
}

/* --- Realistic Square 3D Post-it Note Styling --- */
.gb-full-card {
    position: relative;
    background: #FFF8C9;
    border: 1px solid rgba(180, 160, 135, 0.28);
    border-radius: 2px 2px 10px 2px;
    padding: 1.4rem 1.15rem 1.15rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 220px;
    aspect-ratio: 1 / 1;
    box-shadow: 
        0 2px 5px rgba(45, 38, 32, 0.08),
        0 8px 18px -4px rgba(45, 38, 32, 0.12),
        0 14px 26px -6px rgba(125, 100, 75, 0.13);
    transform-origin: center top;
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.25s ease;
    z-index: 1;
}

/* Post-it Washi Tape Pin (Top Center Only - 아래쪽 테이프 완전 제거) */
.gb-full-card::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 68px;
    height: 20px;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(2px);
    border-left: 2px dashed rgba(180, 160, 135, 0.45);
    border-right: 2px dashed rgba(180, 160, 135, 0.45);
    box-shadow: 0 1px 3px rgba(45, 38, 32, 0.12);
    border-radius: 1px;
    pointer-events: none;
    z-index: 2;
    transition: transform 0.25s ease;
}

/* Alternating gentle hand-taped tilt (삐뚤빼뚤) & 5-Color Pastel Post-it Cycle */
/* 1. Canary Yellow */
.gb-full-card:nth-child(5n + 1) {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 22%, rgba(0, 0, 0, 0.02) 100%), #FFF8C9;
    border-color: rgba(220, 195, 95, 0.35);
    transform: rotate(-1.8deg);
}
.gb-full-card:nth-child(5n + 1)::before {
    transform: translateX(-50%) rotate(1deg);
}

/* 2. Soft Peach Coral */
.gb-full-card:nth-child(5n + 2) {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 22%, rgba(0, 0, 0, 0.02) 100%), #FFEFE4;
    border-color: rgba(230, 175, 145, 0.35);
    transform: rotate(2deg);
}
.gb-full-card:nth-child(5n + 2)::before {
    transform: translateX(-50%) rotate(-1.2deg);
}

/* 3. Fresh Sage Mint */
.gb-full-card:nth-child(5n + 3) {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 22%, rgba(0, 0, 0, 0.02) 100%), #EEF7EE;
    border-color: rgba(160, 205, 165, 0.35);
    transform: rotate(-1.2deg);
}
.gb-full-card:nth-child(5n + 3)::before {
    transform: translateX(-50%) rotate(0.8deg);
}

/* 4. Pastel Sky Blue */
.gb-full-card:nth-child(5n + 4) {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 22%, rgba(0, 0, 0, 0.02) 100%), #EEF5FC;
    border-color: rgba(160, 190, 225, 0.35);
    transform: rotate(1.6deg);
}
.gb-full-card:nth-child(5n + 4)::before {
    transform: translateX(-50%) rotate(-0.9deg);
}

/* 5. Soft Lilac Rose */
.gb-full-card:nth-child(5n + 5) {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 22%, rgba(0, 0, 0, 0.02) 100%), #FAF0F7;
    border-color: rgba(210, 175, 215, 0.35);
    transform: rotate(-2deg);
}
.gb-full-card:nth-child(5n + 5)::before {
    transform: translateX(-50%) rotate(1.1deg);
}

/* Hover Lift Interaction */
.gb-full-card:hover {
    transform: rotate(0deg) translateY(-7px) scale(1.025) !important;
    box-shadow: 
        0 4px 10px rgba(45, 38, 32, 0.1),
        0 18px 32px -4px rgba(45, 38, 32, 0.16),
        0 26px 42px -8px rgba(125, 100, 75, 0.18);
    z-index: 10;
}

.gb-full-card-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 0.25rem;
}

.gb-full-user-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.gb-avatar-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--grad-primary);
    border: 1px solid var(--accent-purple);
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gb-user-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.gb-full-author {
    font-size: var(--font-gb-full-author, 0.9rem);
    font-weight: 700;
    color: var(--text-primary);
    word-break: break-all;
    line-height: 1.25;
}

.gb-full-date {
    font-size: var(--font-gb-full-date, 0.68rem);
    color: var(--text-muted);
    font-family: monospace;
    white-space: nowrap;
}

.gb-full-body {
    flex: 1;
    display: block;
    overflow-y: auto;
    padding: 0.25rem 0.15rem;
    margin: 0.25rem 0;
    min-height: 0; /* Crucial for flex child scroll */
    scrollbar-width: thin;
    scrollbar-color: rgba(180, 160, 135, 0.45) transparent;
}

.gb-full-body::-webkit-scrollbar {
    width: 4px;
}

.gb-full-body::-webkit-scrollbar-track {
    background: transparent;
}

.gb-full-body::-webkit-scrollbar-thumb {
    background: rgba(180, 160, 135, 0.4);
    border-radius: 4px;
}

.gb-full-body::-webkit-scrollbar-thumb:hover {
    background: rgba(217, 119, 87, 0.6);
}

.gb-full-message {
    font-size: var(--font-gb-full-msg, 0.92rem);
    color: #2D2620;
    line-height: 1.55;
    word-break: break-word;
    margin: 0;
    width: 100%;
    white-space: pre-wrap;
}

.gb-full-card-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-top: 0.4rem;
    margin-top: auto;
    border-top: 1px dashed rgba(180, 160, 135, 0.22);
}

.gb-full-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.gb-full-actions .btn-sm {
    padding: 0.2rem 0.48rem;
    font-size: 0.7rem;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(180, 160, 135, 0.35);
    color: var(--text-secondary);
    backdrop-filter: blur(2px);
    transition: all 0.2s ease;
}

.gb-full-actions .btn-sm:hover {
    background: #ffffff;
    border-color: rgba(217, 119, 87, 0.5);
    color: var(--text-primary);
    box-shadow: 0 2px 4px rgba(45, 38, 32, 0.08);
}

.gb-full-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3.5rem 1rem;
    text-align: center;
    color: var(--text-muted);
    gap: 0.5rem;
}

.gb-empty-icon {
    color: rgba(217, 119, 87, 0.3);
    margin-bottom: 0.5rem;
}

.gb-full-empty p {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.gb-full-empty span {
    font-size: 0.85rem;
}

/* --- Right Sidebar: Visitors Widget (Compact Single Row) --- */
.visitor-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 0.85rem 1rem;
    backdrop-filter: blur(16px);
    box-shadow: var(--shadow-sm);
    transition: border-color 0.2s ease;
}

.visitor-card:hover {
    border-color: var(--border-color-hover);
}

.visitor-single-row {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 0.75rem;
}

.visitor-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

.visitor-stat-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
}

.visitor-stat-val {
    display: flex;
    align-items: baseline;
    gap: 0.2rem;
}

.visitor-stat-val .stat-num {
    font-size: 1.15rem;
    font-weight: 800;
    font-family: 'Outfit', sans-serif;
}

.today-val .stat-num,
.active-val .stat-num {
    background: var(--logo-accent-grad, var(--grad-primary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: background 0.4s ease;
}

.total-val .stat-num {
    color: var(--text-primary);
}

.stat-unit {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.visitor-stat-divider {
    width: 1px;
    height: 28px;
    background: var(--border-color);
}

/* --- Responsive 3-Column Breakpoints --- */
@media (max-width: 1120px) {
    .daily-3col-layout {
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 1.5rem;
    }
    .layout-col-left {
        width: 220px;
    }
    .layout-col-right {
        width: 100%;
        grid-column: 1 / -1;
        position: static;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem;
    }
}

@media (max-width: 768px) {
    .bg-glow-1 { top: -5%; left: -5%; }
    .bg-glow-2 { bottom: -5%; right: 0; }
    .header-container {
        padding: 0.75rem 1rem;
    }
    .header-actions {
        gap: 0.4rem;
    }
    .btn-header-admin {
        padding: 0.3rem 0.55rem;
        font-size: 0.76rem;
    }
    .app-main {
        padding: 1rem 0.75rem 1rem;
    }
    .daily-3col-layout {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
    }
    .layout-col-center {
        order: 1;
        width: 100%;
        min-width: 0;
    }
    .layout-col-left {
        order: 2;
        width: 100%;
        position: static;
    }
    .layout-col-right {
        order: 3;
        width: 100%;
        position: static;
        display: flex;
        flex-direction: column;
    }

    /* Modal dialogs and inputs mobile responsive */
    .post-form-modal-content {
        min-width: 0 !important;
        width: 95vw !important;
        padding: 1.25rem 1rem !important;
    }
    .cover-upload-controls {
        flex-direction: column;
        align-items: stretch !important;
    }
    #post-form-cover-url-input {
        min-width: 0 !important;
        width: 100% !important;
    }
    .modal-settings-dialog {
        right: 12px !important;
        left: 12px !important;
        width: calc(100vw - 24px) !important;
        top: 64px !important;
        max-width: none !important;
    }
    .gb-form-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.65rem;
    }
    .gb-name-input,
    .gb-pwd-input {
        max-width: 100%;
        width: 100%;
    }
}


/* ==========================================================================
   Scroll to Top Floating Button
   ========================================================================== */

.scroll-top-btn {
    position: fixed;
    bottom: 2.25rem;
    right: 2.25rem;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    box-shadow: var(--shadow-md), var(--glow-card);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 99;
    backdrop-filter: blur(16px);
    transition: opacity 0.25s ease, 
                transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), 
                background-color 0.2s ease, 
                border-color 0.2s ease,
                box-shadow 0.2s ease;
}

.scroll-top-btn:hover {
    transform: translateY(-4px);
    background: var(--accent-blue);
    color: #ffffff;
    border-color: var(--accent-blue);
    box-shadow: 0 0 20px rgba(217, 119, 87, 0.55);
}

.scroll-top-btn:active {
    transform: translateY(-1px);
}

.scroll-top-btn.hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    pointer-events: none;
}

@media (max-width: 768px) {
    .scroll-top-btn {
        bottom: 1.5rem;
        right: 1.5rem;
        width: 42px;
        height: 42px;
    }
}