:root {
    --bg-color: #050505;
    --bg-gradient: radial-gradient(circle at 50% 30%, #1a1a2e 0%, #050505 70%);
    --card-bg: rgba(18, 18, 22, 0.35);
    --text-color: #f0f0f0;
    --text-subtle: #a0a0a0;

    /* Premium Accent Colors */
    --accent-vision: #c084fc;
    /* Soft Purple */
    --accent-pin: #60a5fa;
    /* Soft Blue */
    --accent-today: #f87171;
    /* Soft Red */
    --accent-later: #9ca3af;
    /* Cool Gray */

    --glass-border: 1px solid rgba(255, 255, 255, 0.08);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    --backdrop-blur: blur(12px);

    /* Premium Glassmorphism Variables */
    --blur-sm: 8px;
    --blur-md: 24px;
    --blur-lg: 40px;
    --blur-xl: 60px;

    /* Pinned Section Premium Colors */
    --pin-gradient-start: rgba(96, 165, 250, 0.15);
    --pin-gradient-end: rgba(192, 132, 252, 0.08);
    --pin-glow: rgba(96, 165, 250, 0.4);
    --pin-card-bg: rgba(255, 255, 255, 0.06);
    --pin-card-bg-hover: rgba(255, 255, 255, 0.12);
    --pin-border-highlight: rgba(255, 255, 255, 0.15);

    /* Vision Section Premium Colors */
    --vision-gradient-start: rgba(192, 132, 252, 0.15);
    --vision-gradient-end: rgba(96, 165, 250, 0.08);
    --vision-glow: rgba(192, 132, 252, 0.4);
    --vision-card-bg: rgba(255, 255, 255, 0.05);
    --vision-card-bg-hover: rgba(255, 255, 255, 0.12);
    --vision-border-highlight: rgba(192, 132, 252, 0.2);

    /* Today Section Premium Colors */
    --today-gradient-start: rgba(248, 113, 113, 0.12);
    --today-gradient-end: rgba(192, 132, 252, 0.06);
    --today-glow: rgba(248, 113, 113, 0.35);
    --today-card-bg: rgba(255, 255, 255, 0.06);
    --today-card-bg-hover: rgba(255, 255, 255, 0.12);
    --today-border-highlight: rgba(248, 113, 113, 0.25);

    /* Animation Timing Functions */
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.25, 0.8, 0.25, 1);
    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    -webkit-user-drag: none !important;
    -webkit-tap-highlight-color: transparent;
}

body,
html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: transparent;
    /* 배경을 #universe로 이동 - Canvas 별이 보이도록 */
    font-family: 'Noto Sans KR', sans-serif;
    color: var(--text-color);
}

#app-container {
    position: relative;
    width: 100%;
    height: 100%;
    user-select: none;
    /* Prevent text selection globally */
}

#app-logo {
    position: absolute;
    top: 24px;
    left: 24px;
    width: 32px;
    height: auto;
    z-index: 40;
    opacity: 0.6;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* z-index: 1; Removed to prevent stacking context trap */
    touch-action: none;
}

/* Magic Orb */
#magic-orb {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 140px;
    /* Slightly larger */
    height: 140px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    /* Deep Cosmic Core */
    background: radial-gradient(circle at 30% 30%, rgba(200, 150, 255, 0.9), rgba(100, 50, 220, 0.6), #000);
    box-shadow:
        0 0 60px rgba(160, 100, 255, 0.6),
        0 0 120px rgba(100, 50, 220, 0.4),
        inset 0 0 30px rgba(255, 255, 255, 0.4);
    z-index: 10;
    pointer-events: auto;
    /* [수정] 클릭 가능하도록 변경 */
    cursor: pointer;
    /* [추가] 커서 변경 */
    animation: orb-pulse 5s ease-in-out infinite;
    filter: blur(0.5px);
    /* Sharper look */
}

@keyframes orb-pulse {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 1;
    }
}

/* Input Area - Floating Glass Pill */
#input-container {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 420px;
    display: flex;
    gap: 12px;
    z-index: 100;
    padding: 8px;
    background: rgba(20, 20, 25, 0.6);
    backdrop-filter: var(--backdrop-blur);
    -webkit-backdrop-filter: var(--backdrop-blur);
    border-radius: 100px;
    border: var(--glass-border);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);

    /* Auto-hide logic */
    opacity: 0;
    transition: opacity 0.5s ease 2s, transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

#input-container:hover,
#input-container:focus-within {
    opacity: 1;
    transition-delay: 0s;
    /* Immediate show on hover */
    transform: translateX(-50%) translateY(-5px);
    background: rgba(30, 30, 35, 0.8);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
}

/* Invisible trigger area to make revealing easier */
#input-container::before {
    content: '';
    position: absolute;
    top: -40px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    z-index: -1;
}

#thought-input {
    flex: 1;
    background: transparent;
    border: none;
    padding: 12px 20px;
    color: white;
    font-size: 16px;
    outline: none;
    user-select: text;
    -webkit-user-select: text;
    font-weight: 400;
    letter-spacing: 0.5px;
}

#thought-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
    font-weight: 300;
}

#add-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: white;
    color: black;
    border: none;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s;
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
}

#add-btn:active {
    transform: scale(0.92);
}

#add-btn:hover {
    background: #f0f0f0;
}

/* Identity Slots (1-5) - Simple & Premium Text */
/* Identity Slots (1-5) - Simple & Premium Text */
#identity-slots {
    position: fixed;
    /* [수정] 위치를 원래대로 복구 */
    left: 25%;
    bottom: 100px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* [수정] 간격 최소화 (공간 절약) */
    z-index: 90;
    pointer-events: none;
    align-items: flex-start;
    user-select: none;
    -webkit-user-select: none;
}

.identity-slot {
    position: relative;
    /* 가상 요소 기준점 */
    padding: 6px 10px 6px 0;
    /* 패딩 축소 */
    width: auto;

    /* 스타일 유지 */
    background: transparent;
    border: none;
    font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.3);
    font-weight: 300;
    letter-spacing: 0.3px;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    pointer-events: auto;

    display: flex;
    align-items: center;

    user-select: none;
    -webkit-user-select: none;
    white-space: nowrap;
    max-width: 180px;
}

/* ★ 팬텀 히트박스: 레이아웃 영향 없이 클릭 영역만 확장 */
.identity-slot::after {
    content: '';
    position: absolute;
    top: -8px;
    /* 위로 확장 */
    bottom: -8px;
    /* 아래로 확장 */
    left: -20px;
    /* 왼쪽으로 확장 */
    right: -50px;
    /* 오른쪽으로 길게 확장 */
    z-index: 1;
}

/* 피드백 효과 */
.identity-slot:hover,
.identity-slot.drag-over {
    color: #fff;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
    transform: translateX(3px);
}

/* 채워진 상태 */
.identity-slot.filled {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

.identity-slot.filled:hover {
    color: var(--accent-vision);
    text-shadow: 0 0 20px var(--accent-vision);
}

/* Show slots more clearly when dragging anywhere */
body.dragging .identity-slot {
    color: rgba(255, 255, 255, 0.4);
}

/* Zone Indicators - Gradient Fades */
.zone-indicator {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 3px;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 10;
    /* Layer: Tab(10) < TimeLabels(30) < Cards(100) */
    opacity: 0;
    /* Hidden by default, shown when dragging */
    pointer-events: none;
    /* Let clicks pass through unless active logic changes */
}

body.dragging .zone-indicator {
    opacity: 0.4;
}

body.dragging .zone-indicator.active {
    opacity: 1;
    text-shadow: 0 0 20px currentColor;
}

.zone-top {
    top: 0;
    left: 0;
    width: 100%;
    height: 180px;
    background: linear-gradient(to bottom, rgba(192, 132, 252, 0.15), transparent);
    color: var(--accent-vision);
    align-items: flex-start;
    padding-top: 40px;
    transform: translateY(-20px);
}



.zone-left {
    top: 0;
    left: 0;
    width: 180px;
    height: 100%;
    background: linear-gradient(to right, rgba(96, 165, 250, 0.4), transparent);
    /* Darker background */
    color: #fff;
    /* White text */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    /* Shadow for visibility */
    justify-content: center;
    padding-left: 40px;
    writing-mode: vertical-rl;
    transform: rotate(180deg) translateX(20px);
    font-weight: 700;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.zone-left::after {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M16,12V4H17V2H7V4H8V12L6,14V16H11V22H13V16H18V14L16,12Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.5));
    transform: rotate(90deg);
    /* Adjust for vertical text */
}

.zone-right {
    top: 0;
    right: 0;
    width: 180px;
    height: 100%;
    background: transparent;
    color: var(--accent-today);
    justify-content: center;
    padding-right: 40px;
    writing-mode: vertical-rl;
    transform: translateX(20px);
}

/* Active States (Slide In / Intensify) */
.zone-top.active {
    transform: translateY(0);
    background: linear-gradient(to bottom, rgba(192, 132, 252, 0.3), transparent);
}

.zone-left.active {
    transform: rotate(180deg) translateX(0);
    background: linear-gradient(to right, rgba(96, 165, 250, 0.3), transparent);
}

.zone-right.active {
    transform: translateX(0);
    background: transparent;
}

/* Cards - Glassmorphism */
.card {
    position: absolute;
    background: var(--card-bg);
    z-index: 100;
    /* Always above tabs */
    padding: 16px;
    border-radius: 16px;
    color: var(--text-color);
    font-size: 15px;
    line-height: 1.5;
    max-width: 200px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    cursor: grab;
    will-change: transform;
    border: var(--glass-border);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: box-shadow 0.3s, border-color 0.3s, opacity 0.3s, transform 0.2s;
    display: flex;
    flex-direction: column;
    gap: 10px;
    user-select: none;
    -webkit-user-select: none;

    /* 3D Tilt */
    transform-style: preserve-3d;
    perspective: 1000px;
}

.card::after {
    /* Glare Effect */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    background: radial-gradient(circle at var(--glare-x, 50%) var(--glare-y, 50%), rgba(255, 255, 255, 0.4) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    mix-blend-mode: overlay;
    z-index: 2;
}

.card:hover::after {
    opacity: 1;
}

.card-slot-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    background: #fff;
    color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    z-index: 10;
}

.card img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
    max-height: 160px;
    pointer-events: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.card:active {
    cursor: grabbing;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
    transform: scale(1.02);
    z-index: 1000 !important;
    border-color: rgba(255, 255, 255, 0.2);
}

/* Card States */
.card.state-vision {
    border-color: var(--accent-vision);
    box-shadow: 0 0 20px rgba(192, 132, 252, 0.15);
}

.card.state-pin {
    border-left: 4px solid var(--accent-pin);
    border-radius: 4px 16px 16px 4px;
    background: linear-gradient(90deg, rgba(96, 165, 250, 0.1), var(--card-bg));
}

.card.state-today {
    border-color: var(--accent-today);
    background: rgba(248, 113, 113, 0.1);
    font-weight: 500;
}

.card.state-later {
    opacity: 0.7;
    transform: scale(0.95);
    filter: grayscale(0.5);
}

.card.completed {
    opacity: 0.4;
    text-decoration: line-through;
    filter: grayscale(1);
}

/* Modal */
#detail-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

#detail-modal:not(.hidden) {
    opacity: 1;
    pointer-events: auto;
}

.hidden {
    display: none !important;
}

.modal-content {
    background: #1a1a1a;
    width: 85%;
    max-width: 480px;
    padding: 24px;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transform: translateY(20px);
    transition: transform 0.3s;
}

#detail-modal:not(.hidden) .modal-content {
    transform: translateY(0);
}

#detail-text {
    width: 100%;
    height: 180px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    padding: 16px;
    border-radius: 12px;
    resize: none;
    font-size: 16px;
    line-height: 1.6;
    outline: none;
    user-select: text;
    -webkit-user-select: text;
}

#detail-text:focus {
    border-color: rgba(255, 255, 255, 0.3);
}

.file-input-wrapper {
    display: flex;
    justify-content: center;
}

.file-label {
    display: inline-block;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s;
}

.file-label:hover {
    background: rgba(255, 255, 255, 0.2);
}

#card-image-input {
    display: none;
}

.modal-content button {
    padding: 14px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
    transition: transform 0.1s, opacity 0.2s;
}

.modal-content button:active {
    transform: scale(0.98);
}

#close-modal {
    background: white;
    color: black;
}

#delete-card {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

#delete-card:hover {
    background: rgba(239, 68, 68, 0.3);
}

@keyframes shake-input {

    0%,
    100% {
        transform: translateX(-50%);
    }

    20% {
        transform: translateX(calc(-50% - 4px));
    }

    40% {
        transform: translateX(calc(-50% + 4px));
    }

    60% {
        transform: translateX(calc(-50% - 2px));
    }

    80% {
        transform: translateX(calc(-50% + 2px));
    }
}

.shake {
    animation: shake-input 0.4s cubic-bezier(.36, .07, .19, .97) both;
    border-bottom: 1px solid var(--accent-today) !important;
    /* Red underline for error */
}

/* Screen Shake Animation */
@keyframes shake-screen {
    0% {
        transform: translate(1px, 1px) rotate(0deg);
    }

    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }

    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }

    30% {
        transform: translate(3px, 2px) rotate(0deg);
    }

    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }

    50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }

    60% {
        transform: translate(-3px, 1px) rotate(0deg);
    }

    70% {
        transform: translate(3px, 1px) rotate(-1deg);
    }

    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }

    90% {
        transform: translate(1px, 2px) rotate(0deg);
    }

    100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
}

.shaking {
    animation: shake-screen 0.5s cubic-bezier(.36, .07, .19, .97) both infinite;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Black Hole Zone */
#black-hole-zone {
    position: absolute;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 200px;
    z-index: 90;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Visible state */
#black-hole-zone.visible,
body.dragging #black-hole-zone {
    opacity: 1;
    pointer-events: auto;
}

#black-hole {
    width: 0px;
    height: 0px;
    background: #000;
    border-radius: 50%;
    position: relative;
    z-index: 10;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
}

/* Accretion Disk - Outer Glow */
#black-hole::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    height: 150%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(147, 51, 234, 0) 30%, rgba(147, 51, 234, 0.4) 50%, transparent 70%);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;

    mix-blend-mode: screen;
}

/* --- Vision Icon Picker Modal --- */
#icon-picker-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2000;
    /* Above Vision Board */
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#icon-picker-modal.visible {
    opacity: 1;
    pointer-events: auto;
}

#icon-picker-modal.hidden {
    display: none;
    /* Fallback */
}

.picker-content {
    background: rgba(20, 20, 25, 0.9);
    padding: 24px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(20px);
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    max-width: 95%;
    width: 400px;
    /* Slightly wider for grid */
}

#icon-picker-modal.visible .picker-content {
    transform: scale(1);
}

.picker-content h3 {
    margin-bottom: 20px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.5px;
    font-size: 18px;
}

/* Tab Navigation */
/* Tab Navigation */
.picker-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;

    /* [Modify] Enable scroll, start alignment to prevent clipping */
    overflow-x: auto;
    justify-content: flex-start;

    /* [Add] Scroll padding */
    padding: 0 10px 8px 10px;
    width: 100%;

    /* Smooth scroll */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Hide Scrollbar */
.picker-tabs::-webkit-scrollbar {
    height: 0px;
    background: transparent;
}

.tab-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    /* Prevent squeezing */
    white-space: nowrap;
}

.tab-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

.tab-btn.active {
    background: var(--accent-vision);
    color: #000;
    border-color: var(--accent-vision);
    box-shadow: 0 0 15px rgba(192, 132, 252, 0.4);
}

/* SVG Icon Grid */
.icon-grid-svg {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    /* 5 per row */
    gap: 12px;
    max-height: 320px;
    overflow-y: auto;
    padding: 4px;
    margin: 0 -4px 20px -4px;
    /* compensate padding */
}

/* Scrollbar styling */
.icon-grid-svg::-webkit-scrollbar {
    width: 6px;
}

.icon-grid-svg::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

.icon-grid-svg::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

/* Individual Icon Button */
.icon-option-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    cursor: pointer;
    padding: 0;
    /* Center with flex */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Enforce Height/Width */
    height: 56px;
    width: 100%;

    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    aspect-ratio: auto;
    /* Remove aspect ratio strictness if height is fixed */
}

.icon-option-btn:hover {
    background: rgba(192, 132, 252, 0.2);
    /* Vision Accent */
    border-color: var(--accent-vision);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 4px 12px rgba(192, 132, 252, 0.25);
    z-index: 10;
}

/* SVG Graphics inside Button */
.vision-svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: rgba(255, 255, 255, 0.7);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.2s;
}

.icon-option-btn:hover .vision-svg {
    stroke: #fff;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.8));
}

#close-picker {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.6);
    padding: 12px 24px;
    border-radius: 12px;
    cursor: pointer;
    width: 100%;
    transition: all 0.2s;
    font-size: 14px;
    font-weight: 600;
}

#close-picker:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
}

/* --- Calendar Cell Icon Style (Updated for SVG) --- */
.vision-icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-left: auto;
    padding: 4px;
    line-height: 0;
    /* SVG Alignment */
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.vision-icon-btn svg {
    width: 20px;
    height: 20px;
    stroke: var(--accent-vision);
    transition: stroke 0.2s;
    filter: drop-shadow(0 0 5px rgba(192, 132, 252, 0.4));
}

.vision-icon-btn:hover {
    transform: scale(1.2);
    background: rgba(192, 132, 252, 0.1);
}

.vision-icon-btn:hover svg {
    stroke: #fff;
    filter: drop-shadow(0 0 8px rgba(192, 132, 252, 0.8));
}

.vision-icon-btn.is-plus {
    font-size: 18px;
    line-height: 1;
    /* Text Alignment */
    color: rgba(255, 255, 255, 0.2);
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 24px;
    height: 24px;
}

.vision-icon-btn.is-plus:hover {
    color: var(--accent-vision);
    border-color: var(--accent-vision);
    background: rgba(192, 132, 252, 0.1);
    transform: scale(1.1);
}


/* Event Horizon - Inner Ring */
#black-hole::after {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.8);
    box-shadow:
        0 0 30px rgba(192, 132, 252, 1),
        inset 0 0 30px rgba(192, 132, 252, 1);
    opacity: 0;
    transition: opacity 0.3s;
    filter: blur(4px);
}

/* Gravitational Lensing / Distortion Ripple */
#black-hole-zone.active::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 50px rgba(147, 51, 234, 0.1);
    animation: ripple-distortion 1.5s linear infinite;
    pointer-events: none;
    z-index: 5;
}

@keyframes ripple-distortion {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.5;
        border-width: 4px;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
        border-width: 0px;
    }
}

/* Photon Sphere - Spinning Effect */
.photon-sphere {
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top-color: rgba(255, 255, 255, 0.6);
    border-bottom-color: rgba(255, 255, 255, 0.6);
    animation: spin-blackhole 4s linear infinite;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s;
}

@keyframes spin-blackhole {
    0% {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(180deg) scale(1.05);
    }

    100% {
        transform: rotate(360deg) scale(1);
    }
}

/* Active State (Card nearby) */
#black-hole-zone.active #black-hole {
    width: 100px;
    /* Bigger presence */
    height: 100px;
    box-shadow:
        0 0 100px 40px rgba(0, 0, 0, 1),
        /* Deep inner void */
        0 0 180px 80px rgba(160, 80, 255, 0.5),
        /* Large accretion glow */
        inset 0 0 60px rgba(0, 0, 0, 1);
    transform: scale(var(--bh-scale, 1.0));
    /* Dynamic scale from JS */
}

#black-hole-zone.active #black-hole::before {
    opacity: 1;
    animation: pulse-accretion 2s ease-in-out infinite;
}

#black-hole-zone.active #black-hole::after {
    opacity: 1;
}

#black-hole-zone.active .photon-sphere {
    opacity: 1;
    animation-duration: 1s;
    /* Faster spin */
}

@keyframes pulse-accretion {

    0%,
    100% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1.4);
    }

    50% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1.6);
    }
}

/* Sucked In Animation */
@keyframes suck-in {
    0% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
        filter: blur(0px);
    }

    40% {
        transform: scale(0.6) rotate(180deg);
        opacity: 0.8;
        filter: blur(2px) contrast(1.5);
    }

    100% {
        transform: scale(0) rotate(720deg);
        opacity: 0;
        filter: blur(10px);
    }
}

.card.dragging {
    opacity: 0.8;
    transform: scale(1.05);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    z-index: 2000;
    /* Higher than Vision Board (1100) */
    cursor: grabbing;
}

.card.snapping {
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    z-index: 2000;
    /* Higher than Vision Board (1100) */
}

.card.sucked-in {
    transition: all 0.7s ease-in !important;
    opacity: 0 !important;
    pointer-events: none;
    border-radius: 50% !important;
}

/* Clipboard Sidebar */
#clipboard-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 360px;
    height: 100vh;
    /* 화면 전체 높이 */
    /* Multi-layer Glassmorphism */
    background:
        linear-gradient(135deg, var(--pin-gradient-start), var(--pin-gradient-end)),
        linear-gradient(180deg, rgba(30, 30, 40, 0.95) 0%, rgba(18, 18, 24, 0.98) 100%);
    backdrop-filter: blur(var(--blur-lg)) saturate(200%);
    -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(200%);
    /* Gradient Border Effect */
    border-right: 1px solid transparent;
    border-image: linear-gradient(180deg, var(--pin-border-highlight), rgba(255, 255, 255, 0.05)) 1;
    border-radius: 0 28px 28px 0;
    z-index: 20;
    transform: translateX(-100%);
    transition: transform 0.5s var(--ease-spring);
    /* [수정] Flex 레이아웃 구조 */
    display: flex;
    flex-direction: column;
    padding: 48px 0 0 28px;
    /* 하단/우측 padding 제거 (content에서 처리) */
    overflow: hidden;
    /* 컨테이너 자체 스크롤 방지 */
    /* Premium Shadow */
    box-shadow: 25px 0 60px rgba(0, 0, 0, 0.6);
    user-select: none;
}

/* Ambient Glow Effect */
#clipboard-sidebar::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 30% 20%, var(--pin-glow), transparent 50%);
    opacity: 0.3;
    pointer-events: none;
    animation: ambientPulse 8s ease-in-out infinite;
}

@keyframes ambientPulse {

    0%,
    100% {
        opacity: 0.2;
        transform: translate(0, 0);
    }

    50% {
        opacity: 0.4;
        transform: translate(5%, 5%);
    }
}

#clipboard-sidebar.visible {
    transform: translateX(0);
}

/* Trigger Strip */
#clipboard-trigger {
    position: fixed;
    top: 0;
    left: 0;
    width: 24px;
    height: 100%;
    z-index: 999;
    background: linear-gradient(90deg, rgba(96, 165, 250, 0.05), transparent);
    transition: background 0.3s ease;
}

#clipboard-trigger:hover {
    background: linear-gradient(90deg, rgba(96, 165, 250, 0.15), transparent);
}

#clipboard-trigger:hover~#clipboard-sidebar,
#clipboard-sidebar:hover {
    transform: translateX(0);
}

/* Premium Header */
.clipboard-header {
    font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 28px;
    padding-bottom: 16px;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    z-index: 1;
}

/* Gradient Underline Accent */
.clipboard-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-pin), var(--accent-vision));
    border-radius: 2px;
    opacity: 0.8;
}

/* Animated Pin Icon */
.clipboard-header::before {
    content: '';
    display: block;
    width: 32px;
    height: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2360a5fa'%3E%3Cpath d='M16,12V4H17V2H7V4H8V12L6,14V16H11V22H13V16H18V14L16,12Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: drop-shadow(0 0 12px var(--pin-glow));
    animation: iconGlow 3s ease-in-out infinite;
}

@keyframes iconGlow {

    0%,
    100% {
        filter: drop-shadow(0 0 8px var(--pin-glow));
        transform: scale(1);
    }

    50% {
        filter: drop-shadow(0 0 16px var(--pin-glow));
        transform: scale(1.05);
    }
}

/* Content Area with Custom Scrollbar */
#clipboard-content {
    flex: 1;
    /* 남은 공간 모두 차지 */
    min-height: 0;
    /* ★ 중요: Flex 자식 스크롤 활성화 필수 속성 */
    overflow-y: auto;
    /* 세로 스크롤 허용 */
    overflow-x: hidden;

    display: flex;
    flex-direction: column;
    gap: 14px;

    /* [수정] 스크롤바 여백 및 하단 공간 확보 */
    padding: 4px 28px 150px 0;
    /* 오른쪽 여백과 하단 150px 확보 */
    margin-right: 0;

    position: relative;
    z-index: 1;
}

/* Custom Scrollbar */
#clipboard-content::-webkit-scrollbar {
    width: 6px;
}

#clipboard-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 3px;
}

#clipboard-content::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--accent-pin), var(--accent-vision));
    border-radius: 3px;
    opacity: 0.5;
}

#clipboard-content::-webkit-scrollbar-thumb:hover {
    opacity: 0.8;
}

/* Pinned Card Styles in Sidebar - Premium Glass Card */
.pinned-card-item {
    background: var(--pin-card-bg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top-color: var(--pin-border-highlight);
    border-radius: 16px;
    padding: 18px 20px 18px 20px;
    /* 하단 패딩 확보 */
    cursor: pointer;
    transition: all 0.35s var(--ease-smooth);
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    overflow: hidden;
    color: #fff;
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    width: 100%;
    box-sizing: border-box;
    word-break: break-word;

    /* [수정] 아이템이 찌그러지지 않도록 고정 */
    flex-shrink: 0;
    height: auto;
    min-height: auto;

    /* Stagger Animation */
    opacity: 0;
    transform: translateX(-20px);
    animation: slideInCard 0.4s var(--ease-smooth) forwards;
    animation-delay: var(--stagger-delay, 0s);
}

@keyframes slideInCard {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Shine Overlay Effect */
.pinned-card-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.08),
            transparent);
    transition: left 0.6s ease;
    pointer-events: none;
}

.pinned-card-item:hover::before {
    left: 100%;
}

/* Card Index Badge */
.pinned-card-index {
    position: absolute;
    top: -1px;
    left: -1px;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, var(--accent-pin), var(--accent-vision));
    border-radius: 16px 0 12px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    z-index: 2;
}

/* Hover State - Lift and Glow */
.pinned-card-item:hover {
    background: var(--pin-card-bg-hover);
    transform: translateY(-4px) translateX(0);
    border-color: rgba(96, 165, 250, 0.3);
    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(96, 165, 250, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Cloning Mode Indicator */
.pinned-card-item.cloning-mode {
    border-color: rgba(255, 204, 0, 0.3);
    background: linear-gradient(135deg, rgba(255, 204, 0, 0.08), var(--pin-card-bg));
}

.pinned-card-item.cloning-mode::after {
    content: '∞';
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 14px;
    color: rgba(255, 204, 0, 0.7);
    font-weight: 700;
}

/* Active State */
.pinned-card-item:active {
    transform: translateY(-2px) scale(0.98);
    transition-duration: 0.1s;
}

/* Pinned Actions - Glass Buttons */
.pinned-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    justify-content: flex-end;
}

.pinned-actions button {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s var(--ease-smooth);
    padding: 6px;
    backdrop-filter: blur(8px);
}

.pinned-actions button svg {
    width: 100%;
    height: 100%;
    fill: rgba(255, 255, 255, 0.6);
    transition: fill 0.2s, transform 0.2s;
}

.pinned-actions button:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.pinned-actions button:hover svg {
    fill: #fff;
    transform: scale(1.1);
}

.btn-pin-action.active {
    background: rgba(255, 204, 0, 0.15);
    border-color: rgba(255, 204, 0, 0.3);
}

.btn-pin-action.active svg {
    fill: #ffcc00;
    filter: drop-shadow(0 0 6px rgba(255, 204, 0, 0.5));
}

.btn-pin-action:active,
.btn-unpin-action:active {
    transform: scale(0.9);
}

/* Pulse Animation */
.pinned-pulse {
    animation: pin-pulse 0.3s var(--ease-spring);
}

@keyframes pin-pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.95);
    }

    100% {
        transform: scale(1);
    }
}

/* Card Image */
.pinned-card-item img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 8px;
    opacity: 0.85;
    transition: opacity 0.3s, transform 0.3s;
}

.pinned-card-item:hover img {
    opacity: 1;
    transform: scale(1.02);
}

/* Card Text - 자연스러운 줄바꿈 */
.pinned-card-item span {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);

    /* [수정] line-clamp 제거 및 안정적인 줄바꿈 적용 */
    display: block;
    /* box 대신 block 사용 */
    white-space: normal;
    /* 자연스러운 줄바꿈 */
    word-break: break-word;
    /* 긴 단어 강제 줄바꿈 */
    line-height: 1.6;
    font-weight: 400;

    /* 넘치는 텍스트 처리 (필요시 max-height 사용 권장) */
    overflow: visible;
}

/* Empty State - Premium Design */
.clipboard-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 20px;
    gap: 16px;
    animation: fadeInEmpty 0.6s var(--ease-smooth);
}

@keyframes fadeInEmpty {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.clipboard-empty .empty-icon {
    font-size: 56px;
    animation: floatIcon 3s ease-in-out infinite;
    filter: drop-shadow(0 8px 20px rgba(96, 165, 250, 0.3));
}

@keyframes floatIcon {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-10px) rotate(5deg);
    }
}

.clipboard-empty p {
    font-size: 16px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    letter-spacing: -0.3px;
}

.clipboard-empty .empty-hint {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 400;
    line-height: 1.5;
    max-width: 200px;
}

.pinned-card-item::after {
    content: '→';
    /* Default: Move */
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    opacity: 0;
    transition: opacity 0.3s;
}

.pinned-card-item:hover::after {
    opacity: 1;
}

.pinned-card-item.cloning-mode::after {
    content: '';
    top: -5px;
    right: 50%;
    transform: translateX(50%);
    width: 32px;
    height: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M16,12V4H17V2H7V4H8V12L6,14V16H11V22H13V16H18V14L16,12Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 1;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
    z-index: 10;
}

.pinned-card-item.cloning-mode {
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
    transform: rotate(-2deg) scale(1.02);
    background-image: none;
    /* Remove gradient border */
}

/* Vision Board Overlay */
#vision-board {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 65vh;
    /* Multi-layer Glassmorphism */
    background:
        linear-gradient(180deg, var(--vision-gradient-start), var(--vision-gradient-end)),
        linear-gradient(180deg, rgba(30, 30, 40, 0.95) 0%, rgba(18, 18, 24, 0.98) 100%);
    backdrop-filter: blur(var(--blur-lg)) saturate(200%);
    -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(200%);
    /* Gradient Border Effect */
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(90deg, transparent, var(--vision-border-highlight), transparent) 1;
    border-radius: 0 0 28px 28px;
    z-index: 60;
    transform: translateY(-100%);
    /* Spring Animation */
    transition: transform 0.5s var(--ease-spring);
    display: flex;
    flex-direction: column;
    padding: 40px 48px;
    /* Premium Shadow with Inner Glow */
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.6),
        inset 0 -1px 0 rgba(255, 255, 255, 0.08),
        inset 0 1px 0 rgba(0, 0, 0, 0.3);
    user-select: none;
    overflow: hidden;
}

/* Ambient Glow Effect */
#vision-board::before {
    content: '';
    position: absolute;
    top: -30%;
    left: 30%;
    width: 40%;
    height: 60%;
    background: radial-gradient(circle, var(--vision-glow), transparent 60%);
    opacity: 0.25;
    pointer-events: none;
    animation: visionAmbientPulse 10s ease-in-out infinite;
}

@keyframes visionAmbientPulse {

    0%,
    100% {
        opacity: 0.2;
        transform: translate(0, 0) scale(1);
    }

    50% {
        opacity: 0.35;
        transform: translate(10%, 5%) scale(1.1);
    }
}

#vision-board.visible {
    transform: translateY(0);
}

/* Premium Header */
.vision-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    position: relative;
    z-index: 1;
}

/* Gradient Underline */
.vision-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-vision), var(--accent-pin));
    border-radius: 2px;
    opacity: 0.8;
}

.vision-header h2 {
    font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.5px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Animated Eye Icon - Add via CSS */
.vision-header h2::before {
    content: '👁️';
    font-size: 24px;
    filter: drop-shadow(0 0 12px var(--vision-glow));
    animation: eyeGlow 3s ease-in-out infinite;
}

@keyframes eyeGlow {

    0%,
    100% {
        filter: drop-shadow(0 0 8px var(--vision-glow));
        transform: scale(1);
    }

    50% {
        filter: drop-shadow(0 0 18px var(--vision-glow));
        transform: scale(1.08);
    }
}

#vision-clock {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 6px 14px;
    border-radius: 20px;
    font-variant-numeric: tabular-nums;
    backdrop-filter: blur(8px);
}

/* Current Day Indicator - Premium Version */
.current-mark {
    position: absolute;
    /* 왼쪽 상단으로 이동 (요일 알파벳 옆) */
    top: 18px;
    left: 55px;
    /* 텍스트와 겹치지 않도록 우측으로 이동 */
    transform: none;
    color: var(--accent-vision);
    font-weight: 900;
    font-size: 16px;
    animation: visionPulseMark 2.5s ease-in-out infinite;
    z-index: 60;
    /* 라벨(50)보다 높게 설정하여 가려짐 방지 */
    filter: drop-shadow(0 0 8px var(--vision-glow));
}

@keyframes visionPulseMark {

    0%,
    100% {
        opacity: 0.6;
        transform: scale(1);
        filter: drop-shadow(0 0 6px var(--vision-glow));
    }

    50% {
        opacity: 1;
        transform: scale(1.15);
        filter: drop-shadow(0 0 14px var(--vision-glow));
    }
}

/* Glass Toggle Controls */
.vision-controls {
    display: flex;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 3px;
    border-radius: 12px;
    backdrop-filter: blur(10px);
}

.vision-controls button {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    padding: 8px 18px;
    border-radius: 9px;
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.25s var(--ease-smooth);
}

.vision-controls button:hover {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.05);
}

.vision-controls button.active {
    background: linear-gradient(135deg, var(--accent-vision), var(--accent-pin));
    color: #fff;
    box-shadow: 0 4px 12px rgba(192, 132, 252, 0.3);
    font-weight: 600;
}

#vision-grid {
    flex: 1;
    display: grid;
    gap: 20px;
    overflow-y: auto;
    padding: 10px;
}

/* Week View: 5 Columns */
/* =========================================
   [HYBRID FIX] Vision Board Layout System
   ========================================= */

/* 1. Base Grid Container (공통) */
#vision-grid {
    flex: 1;
    padding: 10px;
    height: 100%;
    /* 부모 높이 가득 채움 */
    overflow: hidden;
    /* ★ 중요: 그리드 자체 스크롤 방지 (슬롯 내부 스크롤 사용) */
    box-sizing: border-box;
}

/* 2. WEEK VIEW (Flexbox Engine) */
#vision-grid.week-view {
    display: flex;
    flex-direction: row;
    gap: 12px;
    padding-bottom: 20px;
    /* 하단 여유 */
}

/* Week View 내부 슬롯 설정 */
#vision-grid.week-view .vision-slot {
    flex: 1;
    /* 공간 균등 분배 */
    width: 0;
    /* ★ 중요: Flexbox 텍스트 말줄임/레이아웃 안정화 */
    height: 100%;
    /* 높이 가득 채움 */

    display: flex;
    flex-direction: column;

    overflow-y: auto;
    /* ★ 내부 세로 스크롤 활성화 */
    overflow-x: hidden;
}

/* 3. MONTH VIEW (Grid Engine) */
#vision-grid.month-view {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, 1fr);
    /* 2줄로 꽉 채우기 */
    gap: 12px;
}

/* Month View 내부 슬롯 설정 */
#vision-grid.month-view .vision-slot {
    width: auto !important;
    /* ★ 핵심 수정: Week View의 width: 0을 덮어씀 */
    height: 100%;

    display: flex;
    flex-direction: column;

    overflow-y: auto;
    /* 내용 넘치면 스크롤 */
    overflow-x: hidden;
}

/* 4. Vision Slot (공통 디자인) */
.vision-slot {
    background: var(--vision-card-bg);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-top-color: rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    padding: 12px 8px 12px 12px;
    /* 우측 패딩 줄임 (스크롤바 공간) */
    position: relative;
    user-select: none;
    transition: background 0.3s ease;
}

/* 5. Vision Card Item (형태 보존) */
.vision-card-item {
    flex-shrink: 0;
    /* ★ 중요: 공간 부족해도 찌그러지지 않음 */
    min-height: auto;
    /* 내용물 높이 따름 */

    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top-color: rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 8px;
    /* 카드 간격 */

    color: #fff;
    font-size: 13px;
    line-height: 1.4;
    word-break: break-all;

    position: relative;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* 카드 텍스트 줄바꿈 보장 */
.vision-card-item span {
    display: block;
    white-space: normal;
}

/* 스크롤바 디자인 (슬롯 내부) */
.vision-slot::-webkit-scrollbar {
    width: 4px;
}

.vision-slot::-webkit-scrollbar-track {
    background: transparent;
}

.vision-slot::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}

/* Card Shine Effect */
.vision-card-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.1),
            transparent);
    transition: left 0.5s ease;
    pointer-events: none;
}

.vision-card-item:hover::before {
    left: 100%;
}

.vision-card-item img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
    max-height: 100px;
    opacity: 0.9;
    transition: opacity 0.3s, transform 0.3s;
}

.vision-card-item:hover img {
    opacity: 1;
    transform: scale(1.02);
}

/* Hover - Lift and Glow */
.vision-card-item:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-3px) scale(1.02);
    border-color: rgba(192, 132, 252, 0.25);
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(192, 132, 252, 0.1);
}

.vision-card-item:active {
    transform: translateY(-1px) scale(0.98);
    cursor: grabbing;
}

/* Today Time Scale */
#today-time-scale {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    /* Width of the scale area */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Distribute hours evenly */
    padding: 60px 0;
    /* Padding from top/bottom */
    z-index: 30;
    /* Layer: Tab(10) < TimeLabels(30) < Cards(100) */
    pointer-events: none;
    /* Let clicks pass through */
    user-select: none;
    /* Prevent text selection */
    -webkit-user-select: none;
    opacity: 0.3;
    /* Visible by default */
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: translateX(0);
    /* No offset */
}

#today-time-scale.visible {
    opacity: 1;
}

.time-slot-tick {
    width: 100%;
    text-align: center;
    color: rgba(255, 255, 255, 0.3);
    font-size: 12px;
    font-weight: 500;
    position: relative;
    transition: all 0.2s ease;
    height: 20px;
    /* Fixed height for calculation reference if needed, but flex handles distribution */
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    /* Prevent dragging */
    user-select: none;
}

.time-slot-tick::after {
    content: '';
    position: absolute;
    right: 20px;
    top: 50%;
    width: 8px;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-50%);
}

/* Active Tick (Snapping) */
.time-slot-tick.active {
    color: var(--accent-today);
    font-size: 18px;
    font-weight: 700;
    text-shadow: 0 0 10px var(--accent-today);
    transform: scale(1.2) translateX(-10px);
}

.time-slot-tick.active::after {
    width: 16px;
    background: var(--accent-today);
    box-shadow: 0 0 8px var(--accent-today);
}

/* Red Highlight for Today Zone */
.zone-right.highlight {
    background: linear-gradient(to left, rgba(248, 113, 113, 0.4), transparent);
    opacity: 1 !important;
    z-index: 25;
    /* Below Time Scale */
}

/* Prevent text dragging & selection */
.clipboard-header,
.pinned-card-item span,
.vision-header h2,
.time-slot-tick,
.zone-indicator {
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

.vision-slot-label {
    user-select: none;
    -webkit-user-select: none;
    pointer-events: auto !important;
    /* Force clickable */
    position: relative;
    z-index: 50;
}

/* Ensure buttons are clickable and not draggable */
.vision-controls {
    position: relative;
    z-index: 2001;
    /* Ensure container is above everything */
    pointer-events: auto !important;
}

.vision-controls button {
    pointer-events: auto !important;
    cursor: pointer;
    position: relative;
    z-index: 2002;
    /* Ensure button is above container */
}

/* Global drag prevention for images and links */
img,
a {
    -webkit-user-drag: none;
}

/* Add Theme Button Fix */
.add-theme-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: rgba(255, 255, 255, 0.5);
    border-radius: 6px;
    width: 20px;
    height: 20px;
    font-size: 14px;
    cursor: pointer;
    margin-left: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    pointer-events: auto !important;
    /* Force clickable */
    position: relative;
    z-index: 100;
    /* Ensure on top */
}

.add-theme-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    color: #fff;
    transform: scale(1.1);
}

/* TODAY Priority System Styles */

:root {
    /* Priority Colors */
    --priority-high: rgba(248, 113, 113, 1);
    /* Red */
    --priority-mid: rgba(251, 146, 60, 1);
    /* Orange */
    --priority-low: rgba(156, 163, 175, 1);
    /* Gray */

    --priority-high-bg: rgba(248, 113, 113, 0.1);
    --priority-mid-bg: rgba(251, 146, 60, 0.1);
    --priority-low-bg: rgba(156, 163, 175, 0.1);
}

/* --- TODAY Priority Sidebar (Simplified) --- */
/* Timeline Container - Full Height */
/* --- Minimalist Laser Line Timeline --- */
#timeline-container {
    position: fixed;
    top: 0;
    right: 50px;
    width: 300px;
    height: 100vh;
    z-index: 50;
    pointer-events: none;
    /* Click-through empty space */
    /* 스타일 초기화 (투명하게) */
    /* Clean background - no tick marks */
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
    overflow: visible;
}

#timeline-container::before {
    display: none;
}

/* ============================================
   Laser Line Schedule Items
   ============================================ */
.time-capsule {
    position: absolute;
    right: 20px;
    /* Usable hit area, but visually minimal */
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    z-index: 45;
    pointer-events: auto;
    cursor: pointer;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    /* Center vertically on the time point */
    transform: translateY(-50%);
    transition: z-index 0s;
}

/* The Line (::after) - HIDDEN to keep timeline clean */
/* User prefers no background lines - time shown only on ghost during drag */
.time-capsule::after {
    display: none;
}

/* Hover State - Expand Line */
.time-capsule:hover {
    z-index: 100;
}

.time-capsule:hover::after {
    width: 180px;
    /* Long line */
    background: #fff;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8), 0 0 15px rgba(255, 255, 255, 0.4);
}

/* Remove old gradients/glows */
.time-capsule::before {
    display: none;
}

/* Time Badge - Visible by default */
.time-capsule .capsule-time {
    display: inline-block;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
    letter-spacing: 0.5px;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.time-capsule:hover .capsule-time {
    color: #fff;
    font-weight: 600;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}

/* Use content text - Visible by default */
.time-capsule .capsule-text {
    position: relative;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    background: transparent;
    padding: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.7;
    transform: translateX(0);
    transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease;
    pointer-events: none;
}

.time-capsule:hover .capsule-text {
    opacity: 1;
    transform: translateX(0);
}

/* Active State (Current Time) */
.time-capsule.active::after {
    background: var(--accent-today);
    box-shadow: 0 0 8px var(--today-glow);
}

.time-capsule.active .capsule-time {
    color: var(--accent-today);
    text-shadow: 0 0 10px var(--today-glow);
}

/* Completed State */
.time-capsule.completed {
    opacity: 0.3;
}

.time-capsule.completed .capsule-text {
    text-decoration: line-through;
}

/* Duration - completely hidden as requested "line style" */
.time-capsule .capsule-duration {
    display: none;
}

/* Reset basic hover transforms that move the whole element */
.time-capsule:active {
    transform: translateY(-50%);
    /* Start from center */
    cursor: grabbing;
}

/* Time Capsule Ghost is defined at end of file (single definition) */

/* Universe Background */
#universe {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 배경을 body에서 이동 - Canvas보다 뒤에 배치 */
    background-color: var(--bg-color);
    background-image: var(--bg-gradient);
    z-index: -10;
    /* Canvas(-1)보다 뒤 */
    pointer-events: none;
    overflow: hidden;
}

/* === Canvas-based Space Rendering === */
#space-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

/* === Legacy DOM-based Star/Shooting Star CSS (Disabled) ===
   These styles are no longer used - rendering moved to Canvas for performance.

.star {
    position: absolute;
    background: white;
    border-radius: 50%;
    opacity: 0.8;
    animation: twinkle var(--duration) ease-in-out infinite;
    animation-delay: var(--delay);
}

@keyframes twinkle {

    0%,
    100% {
        opacity: 0.2;
        transform: scale(0.5);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
        box-shadow: 0 0 4px rgba(255, 255, 255, 0.8), 0 0 8px rgba(255, 255, 255, 0.4);
    }
}

.shooting-star {
    position: absolute;
    width: 100px;
    height: 2px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
    animation: shoot 2s linear forwards;
    opacity: 0;
    z-index: -1;
    pointer-events: none;
}

@keyframes shoot {
    0% {
        transform: translateX(0) translateY(0) rotate(-45deg);
        opacity: 1;
    }

    100% {
        transform: translateX(-500px) translateY(500px) rotate(-45deg);
        opacity: 0;
    }
}
=== End Legacy CSS ===*/

/* Emoji Picker (iPad Style) */
#emoji-picker {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);
    /* Dim background */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#emoji-picker.visible {
    opacity: 1;
    pointer-events: auto;
}

.emoji-grid {
    display: grid;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    background: rgba(30, 30, 35, 0.8);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    padding: 20px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#emoji-picker.visible .emoji-grid {
    transform: scale(1);
}

.card::after {
    /* Glare Effect */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background: radial-gradient(circle at var(--glare-x, 50%) var(--glare-y, 50%), rgba(255, 255, 255, 0.4) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    mix-blend-mode: overlay;
    z-index: 2;
}

.card:hover::after {
    opacity: 1;
}

.card:active {
    cursor: grabbing;
    transform: scale(0.95);
}

.emoji-grid button {
    background: rgba(255, 255, 255, 0.05);
    border: none;
    font-size: 32px;
    width: 60px;
    height: 60px;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

.emoji-grid button:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.emoji-grid button:active {
    transform: scale(0.95);
}

/* =========================================
   Dynamic Gravity Time-Ruler
   ========================================= */

/* --- 정적 선형 룰러 (Static Linear Ruler) - Premium --- */
#gravity-time-ruler {
    position: fixed;
    right: 0;
    top: 0;
    width: 50px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 40;
    pointer-events: none;
    background: transparent;
    padding: 10px 0;
    opacity: 0;
    transition: opacity 0.4s var(--ease-smooth);
}

#gravity-time-ruler.visible {
    opacity: 1;
    pointer-events: auto;
}

/* 각 시간 슬롯 (00시~24시) */
.time-hour-tick {
    width: 100%;
    flex: 1;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    box-sizing: border-box;
}

/* 정각 눈금 (오른쪽 끝 tick 마크) - HIDDEN for clean UI */
/* User prefers clean timeline - time shown only on ghost during drag */
.time-hour-tick::after {
    display: none;
}

/* 숫자 라벨 - HIDDEN for clean UI */
/* User prefers clean timeline - time shown only on ghost during drag */
.time-hour-tick span {
    display: none;
}

/* 활성 시간 스타일 - DISABLED (ruler is now hidden) */
/* .time-hour-tick.active-hour styles removed - ghost shows time instead */

/* Current Time Line */
#current-time-line {
    position: fixed;
    right: 0;
    width: 220px;
    /* Extended to cover capsule area */
    height: 2px;
    background: linear-gradient(to left, #ff4d4d, #ff4d4d 50px, rgba(255, 77, 77, 0.3));
    box-shadow: 0 0 12px rgba(255, 77, 77, 0.8), 0 0 24px rgba(255, 77, 77, 0.4);
    z-index: 55;
    /* Above capsules */
    pointer-events: none;
    transition: top 1s linear;
}

#current-time-line::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: #ff4d4d;
    border-radius: 50%;
    box-shadow: 0 0 8px #ff4d4d;
}

/* Drag Time Feedback Tooltip - 영구 숨김 */
#drag-time-feedback {
    display: none !important;
}

/* Hide Today Sidebar when ruler is active */
body.ruler-active #today-sidebar {
    opacity: 0;
    pointer-events: none;
    transform: translateX(100px);
}

/* Current Time Label (Digital Clock on Red Line) */
.current-time-label {
    position: absolute;
    right: 55px;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(135deg, #ff4d4d, #cc3333);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 3px 8px;
    border-radius: 6px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(255, 77, 77, 0.4);
    letter-spacing: 0.5px;
}

/* Scheduled Time Badge for Today Cards */
.scheduled-time-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.8), rgba(109, 40, 217, 0.8));
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    padding: 3px 8px;
    border-radius: 6px;
    margin-right: 8px;
    box-shadow: 0 2px 6px rgba(139, 92, 246, 0.3);
}

.scheduled-time-badge::before {
    content: '⏰';
    font-size: 10px;
}

/* Dragging body state - extra protection */
body.dragging,
body.dragging * {
    user-select: none !important;
    -webkit-user-select: none !important;
    cursor: grabbing !important;
}

/* ============================================
   Premium Timeline Ghost - Glassmorphism Style
   ============================================ */
.time-capsule-ghost {
    position: absolute;
    left: 0;
    right: 0;
    /* Premium glassmorphism with Today theme gradient */
    background: linear-gradient(135deg,
            rgba(248, 113, 113, 0.15),
            rgba(192, 132, 252, 0.08));
    /* Subtle Today-themed border */
    border: 1px solid rgba(248, 113, 113, 0.3);
    border-radius: 12px;
    pointer-events: none;
    z-index: 45;
    /* Layout */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 16px;
    will-change: transform;
    /* Hidden by default */
    opacity: 0;
    transition: opacity 0.15s var(--ease-smooth);
    /* Enhanced glassmorphism */
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    /* Premium shadow with inner glow */
    box-shadow:
        0 4px 24px rgba(248, 113, 113, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.time-capsule-ghost.visible {
    opacity: 1;
}

/* Ghost time text - Premium typography */
.ghost-time-range {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    font-family: 'SF Pro Display', -apple-system, sans-serif;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.3px;
}

/* --- Quantum Smart Stack --- */

/* 1. 클러스터 컨테이너: 겹치는 카드들을 담는 투명한 박스 */
.timeline-cluster {
    position: absolute;
    right: 20px;
    width: 200px;
    /* 카드가 들어갈 충분한 너비 */
    /* 높이는 JS에서 계산하거나, 내용물에 맞춤 */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* 오른쪽 정렬 */
    z-index: 40;
    pointer-events: none;
    /* 기본적으로 투과, 내부 아이템만 클릭 가능 */
}

/* 호버 시 클러스터 전체의 z-index를 높여서 다른 요소 위로 올라오게 함 */
.timeline-cluster:hover {
    z-index: 100;
}

/* 2. 타임 캡슐 (카드) 스타일 재정의 */
.timeline-cluster .time-capsule {
    position: absolute;
    /* 클러스터 내에서 절대 위치로 겹침 */
    top: 0;
    right: 0;
    pointer-events: auto;
    /* 카드 자체는 클릭 가능 */

    /* 기본 상태: 겹쳐 있음 */
    transform-origin: center right;
    transition:
        transform 0.4s cubic-bezier(0.19, 1, 0.22, 1),
        /* Apple-style easing */
        opacity 0.3s ease,
        box-shadow 0.3s ease,
        background-color 0.2s;
    /* Hover highlight */

    /* 스택 느낌을 위한 그림자 */
    box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.3);
}

/* 3. 스택 깊이 표현 (뒤에 있는 카드들) */
/* JS에서 --stack-index 변수를 넣어줄 예정 */
.timeline-cluster .time-capsule {
    /* 뒤로 갈수록 살짝 작아지고 투명해짐 + 미세하게 아래로 내려옴 */
    transform:
        translateY(calc(var(--stack-index) * 3px)) scale(calc(1 - var(--stack-index) * 0.05));
    opacity: calc(1 - var(--stack-index) * 0.2);
    z-index: calc(50 - var(--stack-index));
    /* 앞에게 위로 */
}

/* 4. ★ 호버 액션: 부채꼴 펼치기 (Fan Out) */
.timeline-cluster:hover .time-capsule {
    opacity: 1;
    /* 모두 선명하게 */

    /* 펼쳐지는 위치 계산 */
    /* 오른쪽으로 살짝 나오면서(X), 아래로 쫙 펼쳐짐(Y) */
    transform:
        translateX(calc(var(--stack-index) * -10px))
        /* 왼쪽 계단식 */
        translateY(calc(var(--stack-index) * 45px))
        /* 아래로 목록화 (간격 늘림) */
        scale(1);
    /* 크기 복원 */

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    /* 그림자 강화 */
}

/* 카드 자체 호버 효과 (선택 시) */
.timeline-cluster .time-capsule:hover {
    background: rgba(40, 40, 45, 0.9);
    /* 좀 더 명확한 배경 */
    border-color: var(--accent-today);
    z-index: 100;
    /* 그룹 내에서도 맨 위로 */
    transform: scale(1.05) translateX(-15px) !important;
    /* 살짝 튀어나옴 */
}
/* Error Handling & Toasts */
#toast-container {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 9999;
    pointer-events: none;
    width: 90%;
    max-width: 400px;
}

.toast {
    background: rgba(20, 20, 25, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    padding: 14px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    font-size: 14px;
    font-weight: 500;
    opacity: 0;
    transform: translateY(20px);
    animation: toast-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    pointer-events: auto;
    overflow: hidden;
}

.toast.toast-out {
    animation: toast-out 0.3s cubic-bezier(0.32, 0, 0.67, 0) forwards;
}

.toast-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.toast-message {
    flex: 1;
    line-height: 1.4;
}

/* Toast Variants */
.error-toast {
    border-left: 4px solid #ef4444;
}

.error-toast .toast-icon {
    color: #ef4444;
}

.success-toast {
    border-left: 4px solid #10b981;
}

.success-toast .toast-icon {
    color: #10b981;
}

.info-toast {
    border-left: 4px solid #3b82f6;
}

.info-toast .toast-icon {
    color: #3b82f6;
}

.warning-toast {
    border-left: 4px solid #f59e0b;
}

.warning-toast .toast-icon {
    color: #f59e0b;
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes toast-out {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }
}