/* ========================================
   J-POP 취미창고 — 도서관 테마 스킨
   컨셉: 나만의 음악 도서관, 사서의 큐레이션
   ======================================== */

:root {
  --bg-main: #f5f0e8;
  --bg-card: #fffdf7;
  --bg-shelf: #ebe4d6;
  --wood: #5c3d2e;
  --wood-light: #7a5a48;
  --wood-dark: #3e2518;
  --accent: #8b4513;
  --point: #c1440e;
  --text-body: #2c2c2c;
  --text-sub: #6b5b4e;
  --text-muted: #9a8d80;
  --border: #d4c9b8;
  --border-light: #e6dfd3;
  --gold: #b8860b;
  --content-width: 1080px;
  --radius: 6px;
  --radius-lg: 12px;
  --shadow-card: 0 2px 8px rgba(92,61,46,.08);
  --shadow-hover: 0 6px 24px rgba(92,61,46,.15);
  --transition: .3s ease;
}

/* ====== RESET ====== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Noto Sans KR',sans-serif;background:var(--bg-main);color:var(--text-body);line-height:1.8;min-height:100vh}
a{color:inherit;text-decoration:none;transition:color var(--transition)}
img{max-width:100%;height:auto;display:block}
.screen-out{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* 종이 텍스처 — 양피지/오래된 책 페이지 느낌 */
body::before{content:'';position:fixed;inset:0;background-image:
  repeating-linear-gradient(0deg,transparent,transparent 28px,rgba(180,160,130,.04) 28px,rgba(180,160,130,.04) 29px),
  radial-gradient(ellipse at 20% 50%,rgba(139,69,19,.03),transparent 50%),
  radial-gradient(ellipse at 80% 50%,rgba(139,69,19,.02),transparent 50%),
  radial-gradient(ellipse at 50% 0%,rgba(184,134,11,.03),transparent 60%);
pointer-events:none;z-index:0}
/* 페이지 모서리 빈티지 비네팅 */
body::after{content:'';position:fixed;inset:0;background:radial-gradient(ellipse at center,transparent 60%,rgba(92,61,46,.06) 100%);pointer-events:none;z-index:0}

/* ====== HEADER ====== */
.library-header{position:relative;z-index:100;background:var(--wood);border-bottom:4px solid var(--wood-dark);box-shadow:0 2px 12px rgba(62,37,24,.3);background-image:
  repeating-linear-gradient(90deg,transparent,transparent 2px,rgba(255,253,247,.02) 2px,rgba(255,253,247,.02) 4px),
  linear-gradient(180deg,rgba(255,255,255,.06) 0%,transparent 40%,transparent 60%,rgba(0,0,0,.1) 100%)}
.header-inner{max-width:var(--content-width);margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:16px}

.logo{flex-shrink:0}
.logo-link{display:flex;align-items:center;gap:10px;color:var(--bg-card)}
.logo-link:hover{color:var(--gold)}
.logo-book{font-size:28px}
.logo-img{height:36px;width:auto}
.logo-text{font-family:'Noto Serif KR',serif;font-size:1.3rem;font-weight:700;color:var(--bg-card)}
.logo-sub{font-size:.68rem;color:rgba(255,253,247,.5);letter-spacing:.1em}

/* 검색 */
.search-area{margin-left:auto;display:flex;align-items:center;background:rgba(255,253,247,.1);border:1px solid rgba(255,253,247,.2);border-radius:24px;overflow:hidden;transition:all var(--transition)}
.search-area:focus-within{background:rgba(255,253,247,.18);border-color:var(--gold)}
.search-input{background:transparent;border:none;outline:none;padding:8px 16px;color:var(--bg-card);font-size:.85rem;width:200px;font-family:inherit}
.search-input::placeholder{color:rgba(255,253,247,.4)}
.search-btn{background:transparent;border:none;padding:8px 14px;cursor:pointer;color:rgba(255,253,247,.6);font-size:1rem}
.search-btn:hover{color:var(--gold)}
.search-mobile{display:none;margin-top:16px}

/* 모바일 메뉴 */
.btn-mobile-menu{display:none;background:transparent;border:none;color:var(--bg-card);font-size:1.4rem;cursor:pointer;padding:6px}

/* GNB */
.gnb{background:var(--wood-dark)}
.gnb-inner{max-width:var(--content-width);margin:0 auto;padding:0 24px}
.gnb-inner ul{list-style:none;display:flex;gap:0;flex-wrap:wrap}
.gnb-inner li a{display:block;padding:10px 18px;font-size:.88rem;font-weight:500;color:rgba(255,253,247,.7);transition:all var(--transition);white-space:nowrap}
.gnb-inner li a:hover,.gnb-inner li.selected>a{color:var(--bg-card);background:rgba(255,253,247,.08)}

/* ====== MAIN LAYOUT ====== */
.library-main{position:relative;z-index:1}
.main-inner{max-width:var(--content-width);margin:0 auto;padding:32px 24px;display:flex;gap:32px}
.content-area{flex:1;min-width:0}

/* ====== 리스트 제목 — 서가 라벨 ====== */
.list-title{font-family:'Noto Serif KR',serif;font-size:1.2rem;font-weight:700;margin-bottom:20px;padding:10px 16px;background:linear-gradient(180deg,var(--wood) 0%,var(--wood-light) 100%);color:var(--bg-card);border-radius:4px 4px 0 0;position:relative;box-shadow:0 3px 6px rgba(62,37,24,.15)}
/* 선반 하단 판자 그림자 */
.list-title::after{content:'';position:absolute;bottom:-4px;left:0;right:0;height:4px;background:linear-gradient(180deg,rgba(62,37,24,.2),transparent);border-radius:0 0 2px 2px}
.list-title b{margin-right:8px}
.list-count{font-size:.88rem;color:rgba(255,253,247,.6);font-weight:400}

/* ====== BOOK CARD (글 목록) ====== */
.book-card{display:flex;gap:16px;padding:20px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);margin-bottom:16px;transition:all var(--transition)}
.book-card:hover{border-color:var(--accent);box-shadow:var(--shadow-hover);transform:translateY(-2px)}

.book-link{flex-shrink:0}
.book-cover{position:relative;width:120px;height:160px;border-radius:2px 6px 6px 2px;overflow:hidden;box-shadow:3px 3px 8px rgba(0,0,0,.15),1px 1px 0 rgba(255,253,247,.3);background:var(--bg-shelf) center/cover no-repeat;transition:transform var(--transition)}
.book-card:hover .book-cover{transform:rotate(-2deg) translateX(-4px)}
.book-cover-img{width:100%;height:100%;object-fit:cover}
/* 책등 (spine) */
.book-spine{position:absolute;top:0;left:0;width:8px;height:100%;background:linear-gradient(to right,rgba(62,37,24,.5),rgba(92,61,46,.2),transparent);border-right:1px solid rgba(62,37,24,.15)}
/* 페이지 엣지 (책의 오른쪽 잘린 페이지들) */
.book-cover::after{content:'';position:absolute;top:3px;right:0;width:5px;height:calc(100% - 6px);background:repeating-linear-gradient(180deg,var(--bg-card) 0px,var(--bg-card) 1px,var(--border-light) 1px,var(--border-light) 2px);border-radius:0 2px 2px 0;opacity:.7}
/* 책 하단 그림자 (책이 놓여 있는 느낌) */
.book-cover::before{content:'';position:absolute;bottom:-3px;left:4px;right:4px;height:6px;background:radial-gradient(ellipse,rgba(62,37,24,.2),transparent);z-index:-1;border-radius:50%}

.book-info{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.book-info-link{color:inherit}
.book-info-link:hover .book-title{color:var(--point)}
.book-title{font-family:'Noto Serif KR',serif;font-size:1.05rem;font-weight:600;line-height:1.4;color:var(--wood-dark);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.book-summary{font-size:.84rem;color:var(--text-sub);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.book-meta{display:flex;align-items:center;gap:10px;font-size:.76rem;color:var(--text-muted);margin-top:auto}
.book-category{display:inline-block;padding:2px 8px;background:var(--bg-shelf);color:var(--accent);border-radius:3px;font-size:.72rem;font-weight:600}
.book-date,.book-comments{color:var(--text-muted)}

/* 빈 서가 */
.empty-shelf{text-align:center;padding:60px 20px;color:var(--text-muted)}
.empty-icon{font-size:48px;display:block;margin-bottom:12px}

/* ====== MAGAZINE VIEW (글 본문) — 펼친 책 느낌 ====== */
.magazine-view{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card),4px 4px 0 rgba(92,61,46,.06),8px 8px 0 rgba(92,61,46,.03);overflow:hidden;position:relative}
/* 책 바인딩 중앙 크리즈 (펼친 책 가운데 접힌 자국) */
.magazine-view::before{content:'';position:absolute;top:0;bottom:0;left:50%;width:2px;background:linear-gradient(180deg,transparent,rgba(92,61,46,.06) 10%,rgba(92,61,46,.06) 90%,transparent);transform:translateX(-1px);z-index:1;pointer-events:none}
/* 페이지 좌측 그림자 (접힌 부분에서 내려오는 그림자) */
.magazine-view::after{content:'';position:absolute;top:0;bottom:0;left:calc(50% - 12px);width:24px;background:linear-gradient(90deg,transparent,rgba(92,61,46,.02) 40%,rgba(92,61,46,.04) 50%,rgba(92,61,46,.02) 60%,transparent);z-index:1;pointer-events:none}
.magazine-header{padding:48px 48px 32px;text-align:center;border-bottom:1px solid var(--border-light)}
.magazine-open-deco{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:24px}
.deco-line{display:block;width:60px;height:1px;background:var(--border)}
.deco-icon{font-size:24px;color:var(--accent)}
.magazine-category{display:inline-block;padding:4px 14px;background:var(--accent);color:var(--bg-card);border-radius:3px;font-size:.78rem;font-weight:600;letter-spacing:.05em}
.magazine-title{font-family:'Noto Serif KR',serif;font-size:1.8rem;font-weight:700;line-height:1.4;margin:16px 0 12px;color:var(--wood-dark)}
.magazine-meta{color:var(--text-muted);font-size:.88rem}
.meta-author::after{content:' · '}
.meta-date{color:var(--text-muted)}

/* 본문 */
.magazine-body{padding:40px 48px;font-size:1rem;line-height:2;color:var(--text-body);word-break:keep-all}
/* 첫 문단 드롭캡 (도서관 서적 느낌) */
.magazine-body > p:first-of-type::first-letter{float:left;font-family:'Noto Serif KR',serif;font-size:3.2em;line-height:.8;padding:4px 8px 0 0;color:var(--wood);font-weight:700}
.magazine-body h2{font-family:'Noto Serif KR',serif;font-size:1.4rem;font-weight:700;margin:48px 0 16px;padding-bottom:10px;border-bottom:2px solid var(--accent);color:var(--wood-dark)}
.magazine-body h3{font-family:'Noto Serif KR',serif;font-size:1.15rem;font-weight:600;margin:36px 0 12px;color:var(--accent)}
.magazine-body h4{font-size:1.05rem;font-weight:600;margin:28px 0 10px;color:var(--wood)}
.magazine-body p{margin-bottom:18px}
.magazine-body img{border-radius:var(--radius);margin:24px auto;box-shadow:0 2px 12px rgba(0,0,0,.08)}
/* 인용문 — 도서관 메모 카드 느낌 */
.magazine-body blockquote{margin:24px 0;padding:20px 24px 20px 28px;background:var(--bg-shelf);border-left:4px solid var(--accent);border-radius:0 var(--radius) var(--radius) 0;color:var(--text-sub);font-style:italic;font-family:'Noto Serif KR',serif;position:relative;box-shadow:2px 2px 6px rgba(92,61,46,.08)}
.magazine-body blockquote::before{content:'\201C';position:absolute;top:8px;left:10px;font-size:2rem;color:var(--accent);opacity:.3;font-family:Georgia,serif;line-height:1}
.magazine-body pre{margin:24px 0;padding:20px;background:var(--wood-dark);color:var(--bg-shelf);border-radius:var(--radius);overflow-x:auto;font-size:.88rem}
.magazine-body code{padding:2px 6px;background:var(--bg-shelf);color:var(--point);border-radius:3px;font-size:.88em}
.magazine-body pre code{padding:0;background:transparent;color:inherit}
.magazine-body a{color:var(--point);text-decoration:underline;text-decoration-color:rgba(193,68,14,.3);text-underline-offset:3px}
.magazine-body a:hover{text-decoration-color:var(--point)}
.magazine-body ul,.magazine-body ol{margin:14px 0;padding-left:24px}
.magazine-body li{margin-bottom:6px}
.magazine-body table{width:100%;margin:20px 0;border-collapse:collapse}
.magazine-body th,.magazine-body td{padding:10px 14px;border:1px solid var(--border);text-align:left;font-size:.92rem}
.magazine-body th{background:var(--bg-shelf);font-weight:600;color:var(--wood)}
.magazine-body figure{margin:24px 0}
.magazine-body figcaption{text-align:center;font-size:.82rem;color:var(--text-muted);margin-top:8px}
.magazine-body iframe{max-width:100%;margin:20px auto;display:block;border-radius:var(--radius)}
/* 본문 이미지 fade-in (JS adds .fade-target, then .is-visible) */
.magazine-body img.fade-target{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.magazine-body img.is-visible{opacity:1;transform:translateY(0)}

/* 글 하단 */
.magazine-footer{padding:0 48px 40px}

/* 태그 */
.magazine-tags{padding:24px 0;border-top:1px solid var(--border-light)}
.tags-title{font-family:'Noto Serif KR',serif;font-size:.95rem;font-weight:700;color:var(--wood);margin-bottom:12px}
.tags-list a{display:inline-block;padding:4px 12px;background:var(--bg-shelf);color:var(--text-sub);border:1px solid var(--border);border-radius:20px;font-size:.8rem;margin:0 4px 6px 0;transition:all var(--transition)}
.tags-list a:hover{background:var(--accent);color:var(--bg-card);border-color:var(--accent);text-decoration:none}

/* 이전/다음 글 */
.article-nav{padding:24px 0;border-top:1px solid var(--border-light)}
.nav-title{font-family:'Noto Serif KR',serif;font-size:.95rem;font-weight:700;color:var(--wood);margin-bottom:12px}
.nav-list{list-style:none}
.nav-list li{padding:10px 0;border-bottom:1px solid var(--border-light)}
.nav-list li:last-child{border-bottom:none}
.nav-list a{display:block;color:var(--text-body)}
.nav-list a:hover strong{color:var(--point)}
.nav-label{font-size:.75rem;color:var(--text-muted);margin-right:8px}
.nav-current{color:var(--text-muted)}

/* 관련글 */
.article-related{padding:24px 0;border-top:1px solid var(--border-light)}
.related-title{font-family:'Noto Serif KR',serif;font-size:.95rem;font-weight:700;color:var(--wood);margin-bottom:12px}
.related-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.related-link{display:flex;gap:10px;padding:10px;background:var(--bg-main);border-radius:var(--radius);transition:background var(--transition)}
.related-link:hover{background:var(--bg-shelf)}
.related-thumb{width:60px;height:60px;border-radius:4px;background:var(--bg-shelf) center/cover no-repeat;flex-shrink:0}
.related-info{min-width:0}
.related-info strong{font-size:.84rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.related-date{font-size:.72rem;color:var(--text-muted)}

/* 댓글/방명록 */
.comments-section{padding:24px 0;border-top:1px solid var(--border-light)}

/* 보호글 */
.protected-area{text-align:center;padding:60px 20px}
.protected-text{font-size:1.1rem;color:var(--text-sub);margin-bottom:24px;line-height:1.8}
.protected-text span{font-size:.88rem;color:var(--text-muted)}
.protected-input{display:inline-flex;gap:8px}
.protected-input input{padding:10px 16px;border:1px solid var(--border);border-radius:var(--radius);font-size:.9rem;font-family:inherit;outline:none}
.protected-input input:focus{border-color:var(--accent)}
.protected-input button{padding:10px 20px;background:var(--wood);color:var(--bg-card);border:none;border-radius:var(--radius);font-size:.9rem;cursor:pointer;font-family:inherit}
.protected-input button:hover{background:var(--accent)}

/* ====== 커버 (홈) ====== */
.cover-area{margin-bottom:20px}
.cover-section{margin-bottom:32px}
.cover-title{font-family:'Noto Serif KR',serif;font-size:1.15rem;font-weight:700;color:var(--bg-card);margin-bottom:16px;padding:8px 16px;background:linear-gradient(180deg,var(--wood),var(--wood-light));border-radius:4px 4px 0 0;box-shadow:0 3px 6px rgba(62,37,24,.15)}
.cover-title-row{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px;padding:8px 16px;background:linear-gradient(180deg,var(--wood),var(--wood-light));border-radius:4px 4px 0 0;box-shadow:0 3px 6px rgba(62,37,24,.15)}
.cover-title-row .cover-title{background:none;padding:0;margin:0;box-shadow:none;border-radius:0}
.cover-more{font-size:.82rem;color:rgba(255,253,247,.6)}
.cover-more:hover{color:var(--bg-card)}
.cover-grid{display:grid;gap:16px}

/* 포스터 타입 */
.cover-grid--poster{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.book-cover--poster{width:100%;height:240px;border-radius:var(--radius-lg)}
.poster-overlay{position:absolute;bottom:0;left:0;right:0;padding:20px;background:linear-gradient(transparent,rgba(0,0,0,.7));color:#fff;border-radius:0 0 var(--radius-lg) var(--radius-lg)}
.poster-overlay .book-title{color:#fff;font-size:1rem}
.poster-overlay .book-meta{margin-top:6px}
.poster-overlay .book-category{background:rgba(255,255,255,.2);color:#fff}
.poster-overlay .book-date{color:rgba(255,255,255,.7)}

/* 텍스트 타입 */
.text-item{padding:16px 0;border-bottom:1px solid var(--border-light)}
.text-item:last-child{border-bottom:none}
.text-link{display:block}
.text-link:hover .text-title{color:var(--point)}
.text-title{font-family:'Noto Serif KR',serif;font-size:1rem;font-weight:600;color:var(--wood-dark);margin-bottom:4px}
.text-summary{font-size:.84rem;color:var(--text-sub);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* 태그 페이지 */
.tag-page{margin-bottom:32px}
.tag-cloud{display:flex;flex-wrap:wrap;gap:8px}
.tag-chip{display:inline-block;padding:6px 14px;background:var(--bg-card);color:var(--text-sub);border:1px solid var(--border);border-radius:20px;font-size:.84rem;transition:all var(--transition)}
.tag-chip:hover{background:var(--accent);color:var(--bg-card);border-color:var(--accent)}

/* ====== BOOK SHELF — 서가 그리드 레이아웃 ====== */

/* 따뜻한 독서등 분위기 */
.content-area{position:relative}

/* 서가 그리드 */
.book-shelf{display:grid;grid-template-columns:repeat(3,1fr);gap:0 24px}

/* 서가 위 세로 카드 */
.book-shelf .book-card{flex-direction:column;padding:0;border-radius:var(--radius-lg) var(--radius-lg) 0 0;position:relative;padding-bottom:36px;margin-bottom:24px;overflow:visible;border-bottom:none}

/* 나무 선반 판자 — 각 카드 개별 렌더, 양옆 확장으로 이어붙임 */
.book-shelf .book-card::after{content:'';position:absolute;bottom:0;left:-12px;right:-12px;height:12px;background:
  repeating-linear-gradient(90deg,transparent,transparent 3px,rgba(255,255,255,.03) 3px,rgba(255,255,255,.03) 5px),
  linear-gradient(180deg,var(--wood-light) 0%,var(--wood) 40%,var(--wood-dark) 100%);box-shadow:0 6px 12px -2px rgba(62,37,24,.2),0 2px 4px rgba(62,37,24,.1),inset 0 1px 0 rgba(255,255,255,.08);z-index:5}
/* 선반 하단 립 — 입체 두께감 */
.book-shelf .book-card::before{content:'';position:absolute;bottom:-5px;left:-12px;right:-12px;height:6px;background:linear-gradient(180deg,var(--wood-dark),rgba(62,37,24,.5) 60%,transparent);z-index:4}

/* 커버 — 세로로 세운 책 (3D 입체) */
.book-shelf .book-link{display:block}
.book-shelf .book-cover{width:100%;height:220px;border-radius:var(--radius-lg) var(--radius-lg) 0 0;box-shadow:3px 3px 8px rgba(0,0,0,.12),-1px 0 3px rgba(0,0,0,.04);transition:transform var(--transition),box-shadow var(--transition);transform:perspective(800px) rotateY(-1deg);transform-origin:center bottom}

/* hover: 책을 선반에서 들어올리는 효과 */
.book-shelf .book-card:hover{transform:none;box-shadow:none}
.book-shelf .book-card:hover .book-cover{transform:perspective(800px) rotateY(0deg) translateY(-8px) scale(1.02);box-shadow:0 14px 32px rgba(62,37,24,.22)}

/* 정보 영역 — 제목 + 카테고리 태그만 표시 */
.book-shelf .book-info{padding:10px 12px 6px}
.book-shelf .book-summary{display:none}
.book-shelf .book-meta .book-date,.book-shelf .book-meta .book-comments{display:none}

/* 등장 애니메이션 */
@keyframes shelfFadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.book-shelf .book-card{animation:shelfFadeUp .4s ease both}
.book-shelf .book-card:nth-child(2){animation-delay:.06s}
.book-shelf .book-card:nth-child(3){animation-delay:.12s}
.book-shelf .book-card:nth-child(4){animation-delay:.18s}
.book-shelf .book-card:nth-child(5){animation-delay:.24s}
.book-shelf .book-card:nth-child(6){animation-delay:.3s}
.book-shelf .book-card:nth-child(n+7){animation-delay:.36s}

/* ====== PAGINATION ====== */
.pagination{display:flex;justify-content:center;align-items:center;gap:4px;margin:32px 0}
.page-link{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 10px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);font-size:.88rem;color:var(--text-sub);transition:all var(--transition)}
.page-link:hover{border-color:var(--accent);color:var(--accent)}
.page-link.selected,.page-nums .page-link[style*="font-weight:bold"],.page-nums .page-link b{background:var(--wood);border-color:var(--wood);color:var(--bg-card);font-weight:700}
.page-prev.no_more_prev,.page-next.no_more_next{opacity:.3;pointer-events:none}
.page-nums{display:flex;gap:4px}

/* ====== SIDEBAR ====== */
.sidebar{width:280px;flex-shrink:0;position:sticky;top:80px;align-self:flex-start}

/* 프로필 — 사서 명찰 느낌 */
.sidebar-profile{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;text-align:center;margin-bottom:16px;box-shadow:var(--shadow-card);position:relative}
.sidebar-profile::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(180deg,var(--wood),var(--wood-light));border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.profile-img{width:80px;height:80px;border-radius:50%;margin:0 auto 12px;object-fit:cover;border:3px solid var(--wood-light);box-shadow:0 2px 8px rgba(92,61,46,.15)}
.profile-name{font-family:'Noto Serif KR',serif;font-size:1rem;font-weight:700;color:var(--wood)}
.profile-desc{font-size:.82rem;color:var(--text-sub);margin-top:4px}

/* 사이드바 선반 공통 — 나무 선반 느낌 */
.sidebar-shelf{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;margin-bottom:16px;box-shadow:var(--shadow-card);position:relative}
/* 선반 상단 나무 테두리 */
.sidebar-shelf::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(180deg,var(--wood) 0%,var(--wood-light) 60%,var(--accent) 100%);border-radius:var(--radius-lg) var(--radius-lg) 0 0}
/* 선반 하단 그림자 (물건이 올려진 선반 느낌) */
.sidebar-shelf::after{content:'';position:absolute;bottom:-6px;left:8px;right:8px;height:8px;background:
  linear-gradient(180deg,var(--wood-light),var(--wood-dark));border-radius:0 0 4px 4px;opacity:.3}
.shelf-title{font-family:'Noto Serif KR',serif;font-size:.88rem;font-weight:700;margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid var(--wood);color:var(--wood);display:flex;align-items:center;gap:6px}
.shelf-icon{color:var(--gold);font-size:.88rem}

/* 사이드바 카테고리 */
.sidebar-category nav ul{list-style:none}
.sidebar-category nav li a{display:block;padding:5px 0;font-size:.84rem;color:var(--text-sub);border-bottom:1px solid var(--border-light);transition:all var(--transition)}
.sidebar-category nav li a:hover{color:var(--point);padding-left:4px}
.sidebar-category nav li li a{padding-left:12px;font-size:.8rem}

/* 태그 (사이드바) */
.shelf-tags{display:flex;flex-wrap:wrap;gap:4px}
.shelf-tags .tag-chip{font-size:.75rem;padding:3px 10px}

/* 사서의 BGM — Spotify 플레이어 (바이닐 데코) */
.sidebar-bgm{background:linear-gradient(180deg,var(--bg-card) 0%,#f8f3ea 100%)}
.bgm-vinyl-deco{display:flex;justify-content:center;margin-bottom:12px}
.vinyl-groove{display:block;width:48px;height:48px;border-radius:50%;background:
  radial-gradient(circle,var(--wood-dark) 6px,transparent 6px,transparent 8px,var(--wood) 8px,var(--wood) 10px,transparent 10px,transparent 14px,rgba(92,61,46,.15) 14px,rgba(92,61,46,.15) 15px,transparent 15px,transparent 18px,rgba(92,61,46,.1) 18px,rgba(92,61,46,.1) 19px,transparent 19px,transparent 22px,rgba(92,61,46,.06) 22px,rgba(92,61,46,.06) 23px,transparent 23px);
  box-shadow:0 2px 8px rgba(62,37,24,.15);opacity:.7}
.sidebar-bgm .bgm-player{border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 2px 12px rgba(62,37,24,.12),inset 0 1px 3px rgba(0,0,0,.08);border:1px solid var(--border)}
.sidebar-bgm .bgm-player iframe{display:block;border-radius:var(--radius-lg);width:100%;min-height:352px}
.sidebar-bgm .bgm-caption{font-size:.72rem;color:var(--text-sub);text-align:center;margin-top:10px;font-style:italic;font-family:'Noto Serif KR',serif;letter-spacing:.03em}

/* 최근글/인기글 탭 */
.tab-recent{list-style:none;display:flex;gap:0;margin-bottom:12px;border-bottom:2px solid var(--border)}
.tab-btn{flex:1}
.tab-btn a{display:block;padding:8px;text-align:center;font-size:.82rem;font-weight:600;color:var(--text-muted);transition:all var(--transition)}
.tab-btn.on a{color:var(--wood);border-bottom:2px solid var(--wood);margin-bottom:-2px}
.recent-list{list-style:none}
.recent-list li{margin-bottom:10px}
.recent-link{display:flex;gap:10px;align-items:center}
.recent-thumb{width:50px;height:50px;border-radius:4px;background:var(--bg-shelf) center/cover no-repeat;flex-shrink:0}
.recent-info{min-width:0}
.recent-info strong{font-size:.82rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.recent-info span{font-size:.72rem;color:var(--text-muted)}

/* 사이드바 리스트 공통 */
.sidebar-list{list-style:none}
.sidebar-list li{border-bottom:1px solid var(--border-light)}
.sidebar-list li:last-child{border-bottom:none}
.sidebar-link{display:block;padding:6px 0;font-size:.82rem;color:var(--text-sub);transition:all var(--transition)}
.sidebar-link:hover{color:var(--point);padding-left:4px}
.sidebar-link strong{font-size:.82rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sidebar-link span{font-size:.72rem;color:var(--text-muted)}

/* 방문자 */
.visit-total{font-family:'Noto Serif KR',serif;font-size:1.6rem;font-weight:700;color:var(--wood);margin-bottom:6px}
.visit-list{list-style:none;font-size:.82rem;color:var(--text-sub)}
.visit-list strong{color:var(--wood);margin-left:4px}

/* 달력 */
.sidebar-calendar .inner-calendar{font-size:.8rem}
.sidebar-calendar table{width:100%;border-collapse:collapse}
.sidebar-calendar th,.sidebar-calendar td{padding:4px;text-align:center;font-size:.78rem}
.sidebar-calendar a{color:var(--point);font-weight:600}

/* ====== FOOTER ====== */
.library-footer{position:relative;z-index:1;background:var(--wood);border-top:4px solid var(--wood-dark);margin-top:40px;background-image:
  repeating-linear-gradient(90deg,transparent,transparent 2px,rgba(255,253,247,.02) 2px,rgba(255,253,247,.02) 4px),
  linear-gradient(180deg,rgba(0,0,0,.1) 0%,transparent 30%,transparent 70%,rgba(0,0,0,.15) 100%)}
.footer-inner{max-width:var(--content-width);margin:0 auto;padding:32px 24px;text-align:center}
/* 도서관 인장/스탬프 느낌 */
.footer-stamp{font-family:'Noto Serif KR',serif;font-size:1rem;font-weight:700;color:var(--bg-card);margin-bottom:6px;letter-spacing:.15em;display:inline-block;padding:6px 20px;border:2px solid rgba(255,253,247,.3);border-radius:4px;position:relative}
.footer-stamp::before{content:'';position:absolute;inset:3px;border:1px solid rgba(255,253,247,.15);border-radius:2px}
.footer-copy{font-size:.78rem;color:rgba(255,253,247,.5);margin-top:12px}
.footer-links{margin-top:8px}
.footer-links a{font-size:.78rem;color:rgba(255,253,247,.5);margin:0 8px}
.footer-links a:hover{color:var(--bg-card)}

/* ====== 티스토리 댓글 시스템 스타일링 ====== */
.tt_comment_area{margin-top:20px}
.tt_comment_area .tt_box_total{font-family:'Noto Serif KR',serif;font-size:1.1rem;font-weight:700;color:var(--wood);margin-bottom:16px}
.tt_comment_area .tt_post_comment_area{margin-bottom:12px}
.tt_comment_area .tt_comment_cont{padding:14px 16px;background:var(--bg-main);border-radius:var(--radius);border:1px solid var(--border-light);margin-bottom:8px}
.tt_comment_area .tt_comment_cont .tt_nickname{font-weight:600;font-size:.88rem;color:var(--wood)}
.tt_comment_area .tt_comment_cont .tt_date{font-size:.75rem;color:var(--text-muted)}
.tt_comment_area .tt_comment_cont .tt_desc{font-size:.9rem;color:var(--text-sub);line-height:1.7;margin-top:6px}
.tt_comment_area .tt_box_reply .tt_comment_cont{margin-left:28px;border-left:3px solid var(--accent)}
.tt_comment_area textarea{width:100%;min-height:80px;padding:12px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);font-size:.9rem;font-family:inherit;color:var(--text-body);resize:vertical;outline:none}
.tt_comment_area textarea:focus{border-color:var(--accent)}
.tt_comment_area .tt_btn_submit,.tt_comment_area button[type=submit]{padding:8px 20px;background:var(--wood);color:var(--bg-card);border:none;border-radius:var(--radius);font-size:.85rem;cursor:pointer;font-family:inherit}
.tt_comment_area .tt_btn_submit:hover,.tt_comment_area button[type=submit]:hover{background:var(--accent)}

/* 방명록 */
.guestbook-section .tt_comment_area{padding:0}

/* 구독 버튼 */
.sidebar-profile .btn_subscription{margin-top:10px;display:inline-block;padding:6px 16px;background:var(--wood);color:var(--bg-card);border-radius:var(--radius);font-size:.8rem}

/* ====== RESPONSIVE ====== */
@media(max-width:860px){
  .main-inner{flex-direction:column}
  .sidebar{width:100%;position:static}
  .magazine-header{padding:32px 20px 24px}
  .magazine-body{padding:24px 20px}
  .magazine-footer{padding:0 20px 24px}
  .magazine-title{font-size:1.4rem}
  .gnb-inner ul{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .search-area{width:auto}
  .search-input{width:140px}
  .btn-mobile-menu{display:block}
  .cover-grid--poster{grid-template-columns:1fr}
  /* 서가 그리드 태블릿 — 2칼럼 */
  .book-shelf{grid-template-columns:repeat(2,1fr)}
  .toc{margin:0 20px 24px}
}

@media(max-width:540px){
  .book-card{flex-direction:column}
  .book-cover{width:100%;height:200px}
  .header-inner{flex-wrap:wrap}
  .search-area{order:3;flex-basis:100%;border-radius:var(--radius)}
  .search-input{width:100%;flex:1}
  .search-mobile{display:block}
  .search-area:not(.search-mobile){display:none}
  .magazine-header{padding:24px 16px 16px}
  .magazine-body{padding:16px}
  .magazine-footer{padding:0 16px 16px}
  .magazine-title{font-size:1.2rem}
  .related-list{grid-template-columns:1fr}
  /* 서가 그리드 모바일 — 1칼럼 */
  .book-shelf{grid-template-columns:1fr}
  .book-shelf .book-cover{height:200px;transform:none}
  .toc{margin:0 16px 20px}
  .btn-scroll-top{bottom:20px;right:20px;width:42px;height:42px;font-size:1rem}
}

/* ====== SCROLLBAR ====== */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--bg-shelf)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--wood-light)}

::selection{background:rgba(139,69,19,.2);color:var(--wood-dark)}

/* ====== READING PROGRESS BAR — 읽기 진행률 ====== */
.reading-progress{position:fixed;top:0;left:0;width:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--point));z-index:9999;transition:width .1s linear;pointer-events:none}
.reading-progress::after{content:'';position:absolute;right:0;top:0;width:6px;height:100%;background:var(--point);border-radius:0 2px 2px 0;box-shadow:0 0 8px rgba(193,68,14,.4)}

/* ====== TABLE OF CONTENTS — 목차 (색인 카드) ====== */
.toc{margin:0 48px 32px;padding:20px 24px;background:var(--bg-shelf);border:1px solid var(--border);border-radius:var(--radius);position:relative;box-shadow:inset 0 1px 3px rgba(92,61,46,.06)}
.toc::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--wood),var(--accent));border-radius:var(--radius) var(--radius) 0 0}
.toc-title{font-family:'Noto Serif KR',serif;font-size:.9rem;font-weight:700;color:var(--wood);margin-bottom:10px;display:flex;align-items:center;gap:6px}
.toc-title::before{content:'\1F4D1';font-size:.85rem}
.toc-list{list-style:none;counter-reset:toc}
.toc-list li{counter-increment:toc}
.toc-list li a{display:block;padding:5px 0 5px 20px;font-size:.84rem;color:var(--text-sub);border-bottom:1px dashed var(--border-light);transition:all var(--transition);position:relative}
.toc-list li a::before{content:counter(toc) '.';position:absolute;left:0;color:var(--accent);font-weight:600;font-size:.8rem}
.toc-list li a:hover{color:var(--point);padding-left:24px;text-decoration:none}
.toc-list li:last-child a{border-bottom:none}
/* h3 들여쓰기 */
.toc-list li.toc-h3 a{padding-left:36px;font-size:.8rem;color:var(--text-muted)}
.toc-list li.toc-h3 a::before{left:16px}

/* ====== SCROLL TO TOP — 맨 위로 버튼 (도서관 인장) ====== */
.btn-scroll-top{position:fixed;bottom:32px;right:32px;width:48px;height:48px;border-radius:50%;background:var(--wood);color:var(--bg-card);border:2px solid var(--wood-light);box-shadow:0 4px 12px rgba(62,37,24,.25);cursor:pointer;font-size:1.1rem;display:flex;align-items:center;justify-content:center;z-index:900;opacity:0;visibility:hidden;transform:translateY(12px);transition:all var(--transition)}
.btn-scroll-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
.btn-scroll-top:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-2px);box-shadow:0 6px 16px rgba(139,69,19,.3)}
.btn-scroll-top::before{content:'';position:absolute;inset:4px;border:1px solid rgba(255,253,247,.2);border-radius:50%}