/* ==========================================
   1. 디자인 시스템 변수 정의 (컨셉 컬러 유지)
   ========================================== */
:root {
    --abydos-blue: #00A3FF;       /* 맑고 청량한 시안 블루 */
    --abydos-blue-hover: #008be0; 
    --bg-light-blue: #F0F6FC;     /* 우유빛 파스텔 하늘색 배경 */
    --card-bg: #FFFFFF;           /* 활자 카드 화이트 */
    --text-dark: #1E202E;         /* 깊은 밤하늘색 */
    --text-muted: #718096;        /* 차분한 슬레이트 그레이 */
    --border-soft: #E2E8F0;       /* 부드러운 경계선 색상 */
    --tag-bg: #E6F4FE;            
}

/* ==========================================
   2. 기본 초기화 및 스타일 설정
   ========================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-light-blue);
    color: var(--text-dark);
    font-family: 'Noto Sans KR', -apple-system, sans-serif;
    line-height: 1.6;
    /* padding: 60px 20px; */
    position: relative;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle at 90% 10%, rgba(0, 163, 255, 0.08), transparent 40%),
                radial-gradient(circle at 10% 90%, rgba(112, 0, 255, 0.05), transparent 40%);
    z-index: -1;
}

/* 전체 컨테이너 */
.publisher-gallery {
    max-width: 1100px;
    margin: 0 auto;
}

/* 상단 타이틀 헤더 */
.gallery-header {
    text-align: center;
    margin-bottom: 50px;
}

.gallery-header h2 {
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--text-dark);
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.gallery-header h2::after {
    content: "";
    document: block;
    width: 60px;
    height: 4px;
    background-color: var(--abydos-blue);
    margin: 8px auto 0 auto;
    border-radius: 2px;
}

.gallery-header p {
    font-size: 1.05rem;
    color: var(--text-muted);
}

/* ==========================================
   3. 가로 리스트 컨테이너 및 아이템 스타일
   ========================================== */
.book-list-container {
    display: flex;
    flex-direction: column;
    gap: 16px; /* 리스트 줄 사이의 간격 */
}

.book-list-item {
    display: flex;
    align-items: center;
    background-color: var(--card-bg);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    padding: 24px 30px;
    box-shadow: 0 4px 12px rgba(43, 45, 66, 0.02);
    transition: all 0.25s ease;
}

/* 마우스 호버 시 줄 전체가 강조되는 효과 */
.book-list-item:hover {
    transform: translateX(4px); /* 오른쪽으로 살짝 밀리는 세련된 모션 */
    border-color: var(--abydos-blue);
    box-shadow: 0 8px 24px rgba(0, 163, 255, 0.08);
}

/* [요소 1] 순위 번호 디자인 */
.item-number {
    font-size: 2.2rem;
    font-weight: 900;
    color: #E2E8F0; /* 기본은 은은한 회색 */
    width: 50px;
    transition: color 0.25s ease;
}

/* 상위 1, 2, 3등 번호나 호버된 줄의 번호는 시안 블루로 강조 */
.book-list-item:nth-child(1) .item-number,
.book-list-item:hover .item-number {
    color: var(--abydos-blue);
}

/* [요소 2] 작은 표지 썸네일 */
.item-thumbnail {
    width: 70px;
    aspect-ratio: 1 / 1.414;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: 700;
    font-size: 0.8rem;
    margin-right: 30px;
    box-shadow: 0 4px 10px rgba(43, 45, 66, 0.1);
    flex-shrink: 0; /* 크기 고정 */

    overflow: hidden;
}
.item-thumbnail img {
    height: 100%;
}

.item-thumbnail.book-1 { background: linear-gradient(135deg, var(--abydos-blue), #7000FF); }
.item-thumbnail.book-2 { background: linear-gradient(135deg, #FF007A, #7000FF); }
.item-thumbnail.book-3 { background: linear-gradient(135deg, #00D1FF, #0047FF); }

/* [요소 3] 메인 정보 영역 */
.item-info {
    flex-grow: 1; /* 남은 가로 공간을 다 차지함 */
    padding-right: 40px;
}

.item-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.item-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-dark);
}

.tag {
    background-color: var(--tag-bg);
    color: var(--abydos-blue);
    padding: 2px 10px;
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 700;
}

.tag.genre {
    background-color: #EEEBFF;
    color: #7000FF;
}

.item-author {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.item-summary {
    font-size: 0.9rem;
    color: #4A4E69;
    /* 설명이 너무 길어지면 한 줄로 생략 (...) */
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* [요소 4] 우측 가격 및 버튼 영역 */
.item-action {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    flex-shrink: 0;
}

.item-price {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-dark);
}

.btn-list-view {
    background-color: #FFFFFF;
    color: var(--text-dark);
    border: 1px solid var(--border-soft);
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-list-view:hover {
    border-color: var(--text-dark);
    background-color: #F8F9FA;
}

/* ==========================================
   4. 반응형 모바일 설정 (가로 레이아웃을 세로로 전환)
   ========================================== */
@media (max-width: 768px) {
    .book-list-item {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
    }
    
    .item-number {
        font-size: 1.8rem;
        margin-bottom: 10px;
    }
    
    .item-thumbnail {
        width: 60px;
        margin-right: 0;
        margin-bottom: 16px;
    }
    
    .item-info {
        padding-right: 0;
        margin-bottom: 16px;
        width: 100%;
    }
    
    .item-title {
        font-size: 1.1rem;
    }
    
    .item-action {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        border-top: 1px solid var(--border-soft);
        padding-top: 12px;
    }
}