.drawer {
            width: 0;
            height: 100%;
            background: var(--bg);
            border: none;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            opacity: 0;
            transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                        opacity 0.35s ease;
            flex-shrink: 0;
        }

.drawer-inner {
            width: 300px;
            padding: 36px 0;
            flex-shrink: 0;
        }

.drawer-overlay {
            position: fixed; top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.4);
            opacity: 0; pointer-events: none;
            transition: opacity 0.5s ease;
            z-index: 250;
        }

.drawer-trigger:hover { opacity: 0.5; }

.drawer-nav a {
            font-family: 'Cormorant Garamond', 'Noto Sans SC', serif;
            font-size: 20px; font-weight: 500;
            color: var(--text); text-decoration: none;
            transition: background 0.35s ease;
            cursor: pointer; line-height: 1.3;
            display: flex;
            align-items: baseline;
            gap: 16px;
            padding: 28px 36px 28px 50px;
            border-bottom: 1px solid var(--line);
        }

.drawer-nav a:first-child {
            border-top: 1px solid var(--line);
        }

.drawer-link-num {
            font-family: 'Cormorant Garamond', serif;
            font-size: 20px;
            font-weight: 500;
            color: var(--text-tertiary);
            min-width: 32px;
        }

.drawer-link-text {
            display: inline-block;
            transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
        }

.drawer-nav a:hover {
            background: var(--surface);
        }

.drawer-nav a:hover .drawer-link-text {
            transform: translateX(8px);
        }