/* Notes Page Styles */

/* Page Body */
.notes-page {
    background-color: var(--color-white);
}

/* Main Container */
.notes-main {
    width: 100%;
    padding: clamp(30px, calc(60px * (100vw / 1600px)), 60px) clamp(40px, calc(80px * (100vw / 1600px)), 80px) clamp(60px, calc(120px * (100vw / 1600px)), 120px) clamp(40px, calc(80px * (100vw / 1600px)), 80px);
    margin-top: clamp(100px, calc(164px * (100vw / 1600px)), 164px);
}

.notes-container {
    max-width: clamp(1024px, calc(1196px * (100vw / 1600px)), 1196px);
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Header Section (Title + Search) */
.notes-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.notes-title {
    font-family: 'Inter', sans-serif;
    font-weight: 900; /* Black */
    font-size: clamp(32px, calc(48px * (100vw / 1600px)), 48px);
    line-height: clamp(38px, calc(58px * (100vw / 1600px)), 58px);
    color: #131923;
    margin: 0;
}

/* Search Input */
.notes-search-wrapper {
    position: relative;
    width: clamp(240px, calc(343px * (100vw / 1600px)), 343px);
    height: clamp(40px, calc(48px * (100vw / 1600px)), 48px);
}

.notes-search-input {
    width: 100%;
    height: 100%;
    padding: 0 clamp(16px, calc(24px * (100vw / 1600px)), 24px) 0 clamp(16px, calc(24px * (100vw / 1600px)), 24px);
    padding-right: clamp(32px, calc(48px * (100vw / 1600px)), 48px);
    border: 1px solid #C1C3C5;
    border-radius: clamp(20px, calc(24px * (100vw / 1600px)), 24px);
    background-color: #FFFFFF;
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-medium);
    font-size: clamp(12px, calc(14px * (100vw / 1600px)), 14px);
    line-height: clamp(16px, calc(20px * (100vw / 1600px)), 20px);
    color: #797C82;
    outline: none;
    transition: border-color 0.2s;
}

.notes-search-input::placeholder {
    color: #797C82;
}

.notes-search-input:focus {
    border-color: #40454C;
}

.notes-search-icon-button {
    position: absolute;
    right: clamp(12px, calc(16px * (100vw / 1600px)), 16px);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(20px, calc(24px * (100vw / 1600px)), 24px);
    height: clamp(20px, calc(24px * (100vw / 1600px)), 24px);
}

.notes-search-icon,
.notes-search-clear-icon {
    width: 100%;
    height: 100%;
    pointer-events: none;
    transition: opacity 0.2s;
}

.notes-search-icon {
    width: clamp(14px, calc(16px * (100vw / 1600px)), 16px);
    height: clamp(14px, calc(16px * (100vw / 1600px)), 16px);
}

.notes-search-clear-icon {
    width: clamp(10px, calc(10px * (100vw / 1600px)), 10px);
    height: clamp(10px, calc(10px * (100vw / 1600px)), 10px);
}

.notes-search-icon-button:hover .notes-search-icon,
.notes-search-icon-button:hover .notes-search-clear-icon {
    opacity: 0.7;
}

/* Search Results Count */
.notes-search-results {
    display: flex;
    align-items: center;
    gap: clamp(4px, calc(8px * (100vw / 1600px)), 8px);
    margin-top: clamp(20px, calc(40px * (100vw / 1600px)), 40px);
    margin-bottom: clamp(20px, calc(40px * (100vw / 1600px)), 40px);
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-medium);
    font-size: clamp(14px, calc(16px * (100vw / 1600px)), 16px);
    line-height: clamp(20px, calc(32px * (100vw / 1600px)), 32px);
    color: #070D17;
}

/* 검색 결과가 나타날 때 리스트 컨테이너의 마진 제거 */
.notes-container.has-search-results .notes-list-container {
    margin-top: 0;
}

.notes-search-count {
    font-weight: var(--font-weight-medium);
    color: #070D17;
}

.notes-search-text {
    color: #070D17;
}

/* Notes List Container */
.notes-list-container {
    display: flex;
    flex-direction: column;
    gap: clamp(32px, calc(64px * (100vw / 1600px)), 64px);
    width: 100%;
    margin-top: clamp(40px, calc(80px * (100vw / 1600px)), 80px);
}

.notes-list {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, calc(24px * (100vw / 1600px)), 24px);
    width: 100%;
}

/* Note Item */
.notes-item {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, calc(24px * (100vw / 1600px)), 24px);
    width: 100%;
}

.notes-item-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 clamp(16px, calc(48px * (100vw / 1600px)), 48px) 0 clamp(16px, calc(16px * (100vw / 1600px)), 16px);
    width: 100%;
}

.notes-item-meta {
    display: flex;
    align-items: center;
    gap: clamp(24px, calc(40px * (100vw / 1600px)), 40px);
    flex-wrap: wrap;
}

.notes-item-date {
    font-family: 'Inter', sans-serif;
    font-weight: var(--font-weight-medium);
    font-size: clamp(12px, calc(14px * (100vw / 1600px)), 14px);
    line-height: clamp(24px, calc(32px * (100vw / 1600px)), 32px);
    color: #C1C3C5;
    white-space: nowrap;
}

.notes-item-title {
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-medium);
    font-size: clamp(14px, calc(16px * (100vw / 1600px)), 16px);
    line-height: clamp(24px, calc(32px * (100vw / 1600px)), 32px);
    color: #222831;
    white-space: nowrap;
}

.notes-item-more {
    width: clamp(20px, calc(24px * (100vw / 1600px)), 24px);
    height: clamp(20px, calc(24px * (100vw / 1600px)), 24px);
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.notes-item-more:hover {
    transform: scale(1.1);
}

.notes-item-more svg {
    width: 100%;
    height: 100%;
}

.notes-item-divider {
    width: 100%;
    height: 1px;
    background-color: #C1C3C5;
}

/* Pagination */
.notes-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, calc(16px * (100vw / 1600px)), 16px);
}

.pagination-arrow {
    width: clamp(14px, calc(16px * (100vw / 1600px)), 16px);
    height: clamp(14px, calc(16px * (100vw / 1600px)), 16px);
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
}

.pagination-arrow:hover {
    opacity: 0.7;
}

.pagination-arrow svg {
    width: 100%;
    height: 100%;
}

.pagination-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.pagination-numbers {
    display: flex;
    align-items: center;
    gap: clamp(12px, calc(16px * (100vw / 1600px)), 16px);
}

.pagination-number {
    font-family: 'Inter', sans-serif;
    font-weight: var(--font-weight-medium);
    font-size: clamp(14px, calc(16px * (100vw / 1600px)), 16px);
    line-height: clamp(18px, calc(20px * (100vw / 1600px)), 20px);
    color: #C1C3C5;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    min-width: clamp(10px, calc(12px * (100vw / 1600px)), 12px);
    text-align: center;
    transition: color 0.2s;
}

.pagination-number:hover {
    color: #797C82;
}

.pagination-number.active {
    font-weight: 800; /* ExtraBold */
    color: #070D17;
}

/* Loading State */
.notes-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(40px, calc(80px * (100vw / 1600px)), 80px) 0;
    gap: clamp(16px, calc(24px * (100vw / 1600px)), 24px);
}

.notes-loading-spinner {
    width: clamp(32px, calc(48px * (100vw / 1600px)), 48px);
    height: clamp(32px, calc(48px * (100vw / 1600px)), 48px);
    border: 3px solid #C1C3C5;
    border-top-color: #40454C;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.notes-loading-text {
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-medium);
    font-size: clamp(14px, calc(16px * (100vw / 1600px)), 16px);
    line-height: clamp(20px, calc(24px * (100vw / 1600px)), 24px);
    color: #797C82;
    margin: 0;
}

/* Empty State */
.notes-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(40px, calc(80px * (100vw / 1600px)), 80px) 0;
}

.notes-empty-text {
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-medium);
    font-size: clamp(14px, calc(16px * (100vw / 1600px)), 16px);
    line-height: clamp(20px, calc(24px * (100vw / 1600px)), 24px);
    color: #797C82;
    margin: 0;
}

/* Error State */
.notes-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(40px, calc(80px * (100vw / 1600px)), 80px) 0;
    gap: clamp(16px, calc(24px * (100vw / 1600px)), 24px);
}

.notes-error-message {
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-medium);
    font-size: clamp(14px, calc(16px * (100vw / 1600px)), 16px);
    line-height: clamp(20px, calc(24px * (100vw / 1600px)), 24px);
    color: #D80027;
    margin: 0;
    text-align: center;
}

.notes-error-retry {
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-medium);
    font-size: clamp(14px, calc(16px * (100vw / 1600px)), 16px);
    line-height: clamp(20px, calc(24px * (100vw / 1600px)), 24px);
    color: #40454C;
    background: #FFFFFF;
    border: 1px solid #C1C3C5;
    border-radius: clamp(20px, calc(24px * (100vw / 1600px)), 24px);
    padding: clamp(8px, calc(12px * (100vw / 1600px)), 12px) clamp(16px, calc(24px * (100vw / 1600px)), 24px);
    cursor: pointer;
    transition: all 0.2s;
}

.notes-error-retry:hover {
    border-color: #40454C;
    color: #070D17;
}

/* Mobile Breakpoint - 375px 기준 반응형 적용 */
@media (max-width: 767px) {
    /* 375px 기준으로 비율 유지하면서 크기 조절 */
    .notes-main {
        padding: clamp(20px, 10.67vw, 40px) clamp(20px, 6.4vw, 24px) clamp(40px, 21.33vw, 80px) clamp(20px, 6.4vw, 24px);
        margin-top: clamp(60px, 28.8vw, 108px);
    }
    
    .notes-container {
        max-width: 100%;
        gap: 0;
    }
    
    .notes-header {
        flex-direction: column;
        align-items: flex-start;
        gap: clamp(20px, 10.67vw, 40px);
    }
    
    .notes-title {
        font-size: clamp(24px, 8.53vw, 32px);
        line-height: clamp(33.6px, 11.95vw, 44.8px);
        text-align: center; /* 모바일에서만 중앙 정렬 */
        width: 100%; /* 전체 너비를 차지하여 중앙 정렬 효과 */
    }
    
    .notes-search-wrapper {
        width: 100%;
        max-width: 100%;
        height: clamp(40px, 12.8vw, 48px);
    }
    
    .notes-search-input {
        padding: 0 clamp(16px, 6.4vw, 24px) 0 clamp(16px, 6.4vw, 24px);
        padding-right: clamp(32px, 12.8vw, 48px);
        border-radius: clamp(20px, 6.4vw, 24px);
        font-size: clamp(12px, 3.73vw, 14px);
        line-height: clamp(16px, 5.33vw, 20px);
    }
    
    .notes-search-icon-button {
        right: clamp(12px, 4.27vw, 16px);
        width: clamp(20px, 6.4vw, 24px);
        height: clamp(20px, 6.4vw, 24px);
    }
    
    .notes-search-icon {
        width: clamp(14px, 4.27vw, 16px);
        height: clamp(14px, 4.27vw, 16px);
    }
    
    .notes-search-clear-icon {
        width: clamp(10px, 2.67vw, 10px);
        height: clamp(10px, 2.67vw, 10px);
    }
    
    /* Search Results Count - Mobile */
    .notes-search-results {
        gap: clamp(4px, 2.13vw, 8px);
        margin-top: clamp(15px, 8vw, 30px);
        margin-bottom: clamp(15px, 8vw, 30px);
        font-size: clamp(14px, 4.27vw, 16px);
        line-height: clamp(20px, 8.53vw, 32px);
    }
    
    /* 검색 결과가 나타날 때 리스트 컨테이너의 마진 제거 - Mobile */
    .notes-container.has-search-results .notes-list-container {
        margin-top: 0;
    }
    
    /* Notes List Container - Mobile */
    .notes-list-container {
        gap: clamp(32px, 17.07vw, 64px);
        margin-top: clamp(30px, 16vw, 60px);
    }
    
    .notes-list {
        gap: clamp(12px, 6.4vw, 24px);
    }
    
    .notes-item {
        gap: clamp(12px, 6.4vw, 24px);
    }
    
    .notes-item-content {
        padding: 0;
        gap: clamp(12px, 4.27vw, 16px);
        flex-direction: row;
        align-items: center;
    }
    
    .notes-item-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: clamp(2px, 1.07vw, 4px);
        flex: 1;
        min-width: 0;
        width: clamp(260px, 73.87vw, 277px);
    }
    
    .notes-item-date {
        font-size: clamp(10px, 3.2vw, 12px);
        line-height: clamp(20px, 6.4vw, 24px);
    }
    
    .notes-item-title {
        font-size: clamp(14px, 4.27vw, 16px);
        line-height: clamp(20px, 6.4vw, 24px);
        white-space: normal;
        width: 100%;
    }
    
    .notes-item-more {
        width: clamp(20px, 6.4vw, 24px);
        height: clamp(20px, 6.4vw, 24px);
        flex-shrink: 0;
    }
    
    .notes-pagination {
        gap: clamp(12px, 4.27vw, 16px);
    }
    
    .pagination-arrow {
        width: clamp(14px, 4.27vw, 16px);
        height: clamp(14px, 4.27vw, 16px);
    }
    
    .pagination-numbers {
        gap: clamp(12px, 4.27vw, 16px);
    }
    
    .pagination-number {
        font-size: clamp(14px, 4.27vw, 16px);
        line-height: clamp(18px, 5.33vw, 20px);
        min-width: clamp(10px, 3.2vw, 12px);
    }
    
    /* Loading State - Mobile */
    .notes-loading {
        padding: clamp(30px, 16vw, 60px) 0;
        gap: clamp(12px, 5.33vw, 20px);
    }
    
    .notes-loading-spinner {
        width: clamp(28px, 10.67vw, 40px);
        height: clamp(28px, 10.67vw, 40px);
        border-width: 2px;
    }
    
    .notes-loading-text {
        font-size: clamp(12px, 3.73vw, 14px);
        line-height: clamp(18px, 5.33vw, 20px);
    }
    
    /* Empty State - Mobile */
    .notes-empty {
        padding: clamp(30px, 16vw, 60px) 0;
    }
    
    .notes-empty-text {
        font-size: clamp(12px, 3.73vw, 14px);
        line-height: clamp(18px, 5.33vw, 20px);
    }
    
    /* Error State - Mobile */
    .notes-error {
        padding: clamp(30px, 16vw, 60px) 0;
        gap: clamp(12px, 5.33vw, 20px);
    }
    
    .notes-error-message {
        font-size: clamp(12px, 3.73vw, 14px);
        line-height: clamp(18px, 5.33vw, 20px);
    }
    
    .notes-error-retry {
        font-size: clamp(12px, 3.73vw, 14px);
        line-height: clamp(18px, 5.33vw, 20px);
        padding: clamp(6px, 2.67vw, 10px) clamp(12px, 5.33vw, 20px);
        border-radius: clamp(16px, 5.33vw, 20px);
    }
}

/* Tablet Breakpoint - 800px 기준 반응형 적용 */
@media (min-width: 768px) and (max-width: 1023px) {
    /* 800px 기준으로 비율 유지하면서 크기 조절 */
    .notes-main {
        padding: clamp(30px, 7.5vw, 60px) clamp(40px, 10vw, 80px) clamp(60px, 15vw, 120px) clamp(40px, 10vw, 80px);
        margin-top: clamp(84px, 20.5vw, 164px);
    }
    
    .notes-container {
        max-width: clamp(640px, 80vw, 640px);
        gap: 0;
    }
    
    .notes-title {
        font-size: clamp(32px, 6vw, 48px);
        line-height: clamp(38px, 7.25vw, 58px);
    }
    
    .notes-search-wrapper {
        width: clamp(240px, 42.875vw, 343px);
        height: clamp(40px, 6vw, 48px);
    }
    
    .notes-search-input {
        padding: 0 clamp(16px, 3vw, 24px) 0 clamp(16px, 3vw, 24px);
        padding-right: clamp(32px, 6vw, 48px);
        border-radius: clamp(20px, 3vw, 24px);
        font-size: clamp(12px, 1.75vw, 14px);
        line-height: clamp(16px, 2.5vw, 20px);
    }
    
    .notes-search-icon-button {
        right: clamp(12px, 2vw, 16px);
        width: clamp(20px, 3vw, 24px);
        height: clamp(20px, 3vw, 24px);
    }
    
    .notes-search-icon {
        width: clamp(14px, 2vw, 16px);
        height: clamp(14px, 2vw, 16px);
    }
    
    .notes-search-clear-icon {
        width: clamp(10px, 1.25vw, 10px);
        height: clamp(10px, 1.25vw, 10px);
    }
    
    /* Search Results Count - Tablet */
    .notes-search-results {
        gap: clamp(4px, 1vw, 8px);
        margin-top: clamp(20px, 5vw, 40px);
        margin-bottom: clamp(20px, 5vw, 40px);
        font-size: clamp(14px, 2vw, 16px);
        line-height: clamp(20px, 4vw, 32px);
    }
    
    /* 검색 결과가 나타날 때 리스트 컨테이너의 마진 제거 - Tablet */
    .notes-container.has-search-results .notes-list-container {
        margin-top: 0;
    }
    
    /* Notes List Container - Tablet */
    .notes-list-container {
        gap: clamp(32px, 8vw, 64px);
        margin-top: clamp(40px, 10vw, 80px);
    }
    
    .notes-list {
        gap: clamp(12px, 3vw, 24px);
    }
    
    .notes-item {
        gap: clamp(12px, 3vw, 24px);
    }
    
    .notes-item-content {
        padding: 0 clamp(16px, 6vw, 48px) 0 clamp(16px, 2vw, 16px);
    }
    
    .notes-item-meta {
        gap: clamp(24px, 5vw, 40px);
    }
    
    .notes-item-date {
        font-size: clamp(12px, 1.75vw, 14px);
        line-height: clamp(24px, 4vw, 32px);
    }
    
    .notes-item-title {
        font-size: clamp(14px, 2vw, 16px);
        line-height: clamp(24px, 4vw, 32px);
    }
    
    .notes-item-more {
        width: clamp(20px, 3vw, 24px);
        height: clamp(20px, 3vw, 24px);
    }
    
    .notes-pagination {
        gap: clamp(12px, 2vw, 16px);
    }
    
    .pagination-arrow {
        width: clamp(14px, 2vw, 16px);
        height: clamp(14px, 2vw, 16px);
    }
    
    .pagination-numbers {
        gap: clamp(12px, 2vw, 16px);
    }
    
    .pagination-number {
        font-size: clamp(14px, 2vw, 16px);
        line-height: clamp(18px, 2.5vw, 20px);
        min-width: clamp(10px, 1.5vw, 12px);
    }
    
    /* Loading State - Tablet */
    .notes-loading {
        padding: clamp(35px, 8.75vw, 70px) 0;
        gap: clamp(14px, 2.75vw, 22px);
    }
    
    .notes-loading-spinner {
        width: clamp(30px, 5.5vw, 44px);
        height: clamp(30px, 5.5vw, 44px);
    }
    
    .notes-loading-text {
        font-size: clamp(13px, 1.875vw, 15px);
        line-height: clamp(19px, 2.75vw, 22px);
    }
    
    /* Empty State - Tablet */
    .notes-empty {
        padding: clamp(35px, 8.75vw, 70px) 0;
    }
    
    .notes-empty-text {
        font-size: clamp(13px, 1.875vw, 15px);
        line-height: clamp(19px, 2.75vw, 22px);
    }
    
    /* Error State - Tablet */
    .notes-error {
        padding: clamp(35px, 8.75vw, 70px) 0;
        gap: clamp(14px, 2.75vw, 22px);
    }
    
    .notes-error-message {
        font-size: clamp(13px, 1.875vw, 15px);
        line-height: clamp(19px, 2.75vw, 22px);
    }
    
    .notes-error-retry {
        font-size: clamp(13px, 1.875vw, 15px);
        line-height: clamp(19px, 2.75vw, 22px);
        padding: clamp(7px, 1.375vw, 11px) clamp(14px, 2.75vw, 22px);
        border-radius: clamp(18px, 2.75vw, 22px);
    }
}

/* Desktop Breakpoint - 1600px 기준 반응형 적용 */
@media (min-width: 1024px) {
    /* 1600px 기준으로 비율 유지하면서 크기 조절 */
    .notes-main {
        padding: clamp(30px, calc(60px * (100vw / 1600px)), 60px) clamp(40px, calc(80px * (100vw / 1600px)), 80px) clamp(60px, calc(120px * (100vw / 1600px)), 120px) clamp(40px, calc(80px * (100vw / 1600px)), 80px);
        margin-top: clamp(100px, calc(164px * (100vw / 1600px)), 164px);
    }
    
    .notes-container {
        max-width: clamp(1024px, calc(1196px * (100vw / 1600px)), 1196px);
        gap: 0;
    }
    
    .notes-title {
        font-size: clamp(32px, calc(48px * (100vw / 1600px)), 48px);
        line-height: clamp(38px, calc(58px * (100vw / 1600px)), 58px);
    }
    
    .notes-search-wrapper {
        width: clamp(240px, calc(343px * (100vw / 1600px)), 343px);
        height: clamp(40px, calc(48px * (100vw / 1600px)), 48px);
    }
    
    .notes-search-input {
        padding: 0 clamp(16px, calc(24px * (100vw / 1600px)), 24px) 0 clamp(16px, calc(24px * (100vw / 1600px)), 24px);
        padding-right: clamp(32px, calc(48px * (100vw / 1600px)), 48px);
        border-radius: clamp(20px, calc(24px * (100vw / 1600px)), 24px);
        font-size: clamp(12px, calc(14px * (100vw / 1600px)), 14px);
        line-height: clamp(16px, calc(20px * (100vw / 1600px)), 20px);
    }
    
    .notes-search-icon-button {
        right: clamp(12px, calc(16px * (100vw / 1600px)), 16px);
        width: clamp(20px, calc(24px * (100vw / 1600px)), 24px);
        height: clamp(20px, calc(24px * (100vw / 1600px)), 24px);
    }
    
    .notes-search-icon {
        width: clamp(14px, calc(16px * (100vw / 1600px)), 16px);
        height: clamp(14px, calc(16px * (100vw / 1600px)), 16px);
    }
    
    .notes-search-clear-icon {
        width: clamp(10px, calc(10px * (100vw / 1600px)), 10px);
        height: clamp(10px, calc(10px * (100vw / 1600px)), 10px);
    }
    
    .notes-list-container {
        gap: clamp(32px, calc(64px * (100vw / 1600px)), 64px);
    }
    
    .notes-list {
        gap: clamp(12px, calc(24px * (100vw / 1600px)), 24px);
    }
    
    .notes-item {
        gap: clamp(12px, calc(24px * (100vw / 1600px)), 24px);
    }
    
    .notes-item-content {
        padding: 0 clamp(16px, calc(48px * (100vw / 1600px)), 48px) 0 clamp(16px, calc(16px * (100vw / 1600px)), 16px);
    }
    
    .notes-item-meta {
        gap: clamp(24px, calc(40px * (100vw / 1600px)), 40px);
    }
    
    .notes-item-date {
        font-size: clamp(12px, calc(14px * (100vw / 1600px)), 14px);
        line-height: clamp(24px, calc(32px * (100vw / 1600px)), 32px);
    }
    
    .notes-item-title {
        font-size: clamp(14px, calc(16px * (100vw / 1600px)), 16px);
        line-height: clamp(24px, calc(32px * (100vw / 1600px)), 32px);
    }
    
    .notes-item-more {
        width: clamp(20px, calc(24px * (100vw / 1600px)), 24px);
        height: clamp(20px, calc(24px * (100vw / 1600px)), 24px);
    }
    
    .notes-pagination {
        gap: clamp(12px, calc(16px * (100vw / 1600px)), 16px);
    }
    
    .pagination-arrow {
        width: clamp(14px, calc(16px * (100vw / 1600px)), 16px);
        height: clamp(14px, calc(16px * (100vw / 1600px)), 16px);
    }
    
    .pagination-numbers {
        gap: clamp(12px, calc(16px * (100vw / 1600px)), 16px);
    }
    
    .pagination-number {
        font-size: clamp(14px, calc(16px * (100vw / 1600px)), 16px);
        line-height: clamp(18px, calc(20px * (100vw / 1600px)), 20px);
        min-width: clamp(10px, calc(12px * (100vw / 1600px)), 12px);
    }
}