/* ═══════════════════════════════════════════════════════════
   1. 변수 & 리셋
   ═══════════════════════════════════════════════════════════ */
*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --primary:#1a2942; --primary-dark:#0f1a2e; --accent:#3a6ea5;
  --primary-bg:rgba(26,41,66,0.06);
  --gold:#d4a93b;
  --brand-grad:linear-gradient(135deg,#6366f1 0%,#22a7e0 55%,#06b6d4 100%);   /* 산뜻 인디고→시안(네비게이션 아이덴티티) */
  --bg:#f7f6f1; --bg-card:#fff; --bg-input:#f0efeb;
  --text:#1a2942; --text-sub:#475569; --text-light:#64748b;
  --ink:#4338ca;   /* 휙 단지 이름색(인디고) — 대시보드 핵심 숫자·제목 강조용 */
  --border:#e3dfd5;
  --success:#2eb872; --warning:#f5a623; --danger:#e74c3c;
  --locked:#cbd0d8; --available:#3a6ea5; --completed:#d4a93b;
  --header-h:60px;
}
body.dark{
  --primary:#d4a93b; --primary-dark:#b08e30;
  --primary-bg:rgba(212,169,59,0.08);
  --bg:#0f172a; --bg-card:#1e293b; --bg-input:#1e293b;
  --text:#f1f5f9; --text-sub:#94a3b8; --text-light:#64748b;
  --border:#334155;
}
body.sepia{
  --primary:#7a5a2f; --primary-dark:#5b4222; --accent:#8c6a3a;
  --primary-bg:rgba(122,90,47,0.08);
  --bg:#f4ecd8; --bg-card:#f7efd9; --bg-input:#ede2c5;
  --text:#3a2f1d; --text-sub:#5b4a30; --text-light:#7a6a4d;
  --border:#d8c6a0;
}
html,body{height:100%;overflow:hidden;}
body{font-family:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,system-ui,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--text);font-feature-settings:'ss03','ss06';letter-spacing:-0.011em;-webkit-font-smoothing:antialiased;}

/* ═══════════════════════════════════════════════════════════
   SVG 아이콘 (Lucide 스타일 — stroke 기반)
   ═══════════════════════════════════════════════════════════ */
.icon{width:22px;height:22px;display:inline-block;vertical-align:middle;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;fill:none;}
.icon-lg{width:28px;height:28px;}
.icon-sm{width:14px;height:14px;stroke-width:2;}
::-webkit-scrollbar{width:6px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:#c9c6be;border-radius:4px;}
body.dark ::-webkit-scrollbar-thumb{background:#475569;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
input,textarea,select{font-family:inherit;}

/* ═══════════════════════════════════════════════════════════
   2. 헤더 (Ver 03 — 5 GNB + 학교 식별)
   ═══════════════════════════════════════════════════════════ */
.header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--header-h);
  background:rgba(247,246,241,0.95);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;padding:0 24px;gap:32px;
}
body.dark .header{background:rgba(15,23,42,0.95);}
.logo{font-size:20px;font-weight:800;color:#fff;background:var(--primary);padding:7px 14px;border-radius:10px;cursor:pointer;letter-spacing:-0.5px;}
body.dark .logo{background:var(--gold);color:#0f172a;}
/* 북픽 헤더 로고 — 9/6 세명대 요청(참나루→북픽). 시안 C 원본을 잘라 배경만 뺀 그림 2장(밝은/어두운 테마).
   처음엔 폰트·벡터로 흉내 냈는데 굵기·비율이 시안과 달라(사장님 지적 2회) 원본 그림으로 교체.
   팔레트: 남색 #1c2742 · 금색 #c9a24a · 크림 #f5f1e8 */
.brand-logo{display:flex;align-items:center;cursor:pointer;flex:0 0 auto;user-select:none;}
.bl-logo{height:36px;width:auto;display:block;transition:transform .18s cubic-bezier(.2,.7,.2,1);}
.brand-logo:hover .bl-logo{transform:scale(1.04);}
.bl-logo-dark{display:none;}
body.dark .bl-logo-light{display:none;}
body.dark .bl-logo-dark{display:block;}
.bl-tag{display:flex;flex-direction:column;justify-content:center;margin-left:10px;padding-left:11px;border-left:1px solid var(--line,#d5deec);line-height:1.22;flex:0 0 auto;}
.bl-tag span{font-size:11px;font-weight:600;color:var(--text-light,#6b7a90);white-space:nowrap;letter-spacing:-.2px;}
@media(max-width:1060px){ .bl-tag{display:none;} }   /* 9/6: 960→1060 — 메뉴 간격+마이페이지 버튼이 생겨 1000px대에서 계정 칩이 잘리던 것 */
/* GNB — 골드 탭 언더라인 (편집/출판 톤, 알약 채움 대신 절제된 인디케이터) */
/* 8/14 사장님 지시: GNB를 밀리의서재처럼 큼직하게 (데스크톱 — 모바일은 아래 미디어쿼리가 별도 크기) */
/* 9/6 세명대 요청: 메뉴를 한 칸 오른쪽에서 시작(로고 태그와 '우리 도서관' 사이를 메뉴 하나 폭만큼 띄움).
   화면 폭에 비례(10vw)하되 28~150px — 좁은 데스크톱에서 메뉴가 계정 칩을 밀지 않게 상한·하한을 둔다 */
.gnb{display:flex;gap:18px;flex:1;align-items:center;margin-left:clamp(28px,calc(12vw - 60px),150px);}   /* 1600→132 · 1280→94 · 1100→72 · 1000→60 */
.gnb-item{position:relative;display:flex;align-items:center;padding:8px 13px 10px;font-size:19px;font-weight:700;color:var(--text-sub);cursor:pointer;transition:color .16s;letter-spacing:-0.5px;white-space:nowrap;}
.gnb-item::after{content:'';position:absolute;left:13px;right:13px;bottom:0;height:2px;border-radius:2px;background:var(--gold);transform:scaleX(0);transform-origin:center;transition:transform .22s cubic-bezier(.2,.7,.2,1);}
.gnb-item:hover{color:var(--text);}
.gnb-item:hover::after{transform:scaleX(.4);opacity:.5;}
.gnb-item.active{color:var(--text);font-weight:800;}
.gnb-item.active::after,.gnb-item.active:hover::after{transform:scaleX(1);opacity:1;}
/* 터치 기기: 탭 터치 후 hover 상태가 남아 유령 밑줄이 생기는 것 방지 */
@media(hover:none){
  .gnb-item:hover::after{transform:scaleX(0);opacity:0;}
  .gnb-item.active:hover::after{transform:scaleX(1);opacity:1;}
}
/* 고전 컬렉션 — 상단 네비 호버 드롭다운(해외/국내) */
.gnb-menu{position:absolute;top:100%;left:8px;min-width:190px;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;box-shadow:0 14px 34px rgba(0,0,0,.14);padding:7px;display:none;z-index:120;}
.gnb-menu::before{content:'';position:absolute;top:-9px;left:0;right:0;height:9px;}
.gnb-drop:hover .gnb-menu{display:block;}
.gnb-mi{padding:9px 12px;border-radius:9px;font-size:14px;font-weight:700;color:var(--text);white-space:nowrap;letter-spacing:-0.3px;}
.gnb-mi small{display:block;font-size:10px;font-weight:600;color:var(--text-light);margin-top:2px;letter-spacing:.04em;}
.gnb-mi:hover{background:var(--bg-input);}
/* 우측 컨트롤 — 동일 높이(32px)·동일 라운드·아웃라인으로 통일, 골드 악센트 */
/* 실험: 오른쪽 유틸 버튼들 테두리 상자를 없애고 평범한 텍스트/아이콘으로 — 호버할 때만 은은하게 배경 표시 */
.hdr-ctl{height:32px;display:inline-flex;align-items:center;gap:6px;padding:0 10px;border-radius:8px;border:none;background:transparent;font-size:12px;font-weight:600;color:var(--text-sub);cursor:pointer;letter-spacing:-0.2px;transition:background .15s,color .15s;}
.hdr-ctl:hover{background:var(--bg-input);color:var(--text);}
/* .school-tag(세명대학교 학술정보원 이름표)는 8/13 제거 — 로고 옆 표기와 중복 */
.lang-select{height:32px;padding:0 8px;border-radius:8px;border:none;background:transparent;font-size:12px;font-weight:600;color:var(--text-sub);cursor:pointer;transition:background .15s;}
.lang-select:hover{background:var(--bg-input);}
.btn-theme{height:32px;width:32px;display:inline-flex;align-items:center;justify-content:center;padding:0;border-radius:8px;border:none;background:transparent;color:var(--text-sub);cursor:pointer;transition:background .15s,color .15s;}
.btn-theme:hover{background:var(--bg-input);color:var(--gold);}
.hdr-div{width:1px;height:18px;background:var(--border);margin:0 4px;}

/* ═══════════════════════════════════════════════════════════
   3. 메인 컨테이너 + 좌측 사이드바
   ═══════════════════════════════════════════════════════════ */
.main{height:calc(100vh - var(--header-h));margin-top:var(--header-h);overflow-y:auto;overflow-x:hidden;}
/* 좌우 여백은 --page-pad 하나로만 정한다 (8/31). 좌·우를 따로 못박는 규칙을 두지 말 것 —
   그렇게 갈라놓은 탓에 사이드바가 켜지면 왼쪽만 24px로 고정돼 좌우가 어긋나 있었다. */
.page{--page-pad:24px;padding:32px var(--page-pad);display:none;container-type:inline-size;}   /* 실험: 헤더(패딩 0 24px, 풀블리드)와 좌우 경계를 맞추기 위해 max-width 캡 제거 / container-type: 안쪽 요소들이 전체 화면폭 아닌 실제 콘텐츠 폭 기준으로 반응하게 */
/* 8/14 사장님 지시: 넓은 화면에서 양쪽 끝 숨통 — 화면이 클수록 좌우 여백을 점진적으로(5vw, 최대 130px) */
@media (min-width:1200px){ .page{--page-pad:clamp(40px,5vw,130px);} }
.page.active{display:block;}
/* 내서재는 읽기 편한 폭으로 (좌우로 너무 퍼지지 않게) */
/* 8/30 사장님 요청: 내서재도 다른 페이지와 같은 폭 (1000px 캡 제거) */
/* 2026-06-21: 고전 컬렉션 중복 제목 삭제 후, 첫 큐레이션이 메뉴에 붙어 답답 → 위 여백 보강(제목 자리만큼 숨 쉴 공간) */
/* #page-collection padding-top 64px 삭제(8/18 사장님 요청): 소개글 위치를 우리도서관·독서챌린지(.page 32px)와 동일하게 */
/* (8/31 삭제) body.with-sidenav .page{padding-left:24px} — 사이드바가 켜지면 왼쪽 여백만 24px로
   못박혀, PC에서 레일~본문 틈 40px 대 오른쪽 102px, 폰에서 왼쪽 24 대 오른쪽 20으로 어긋났다.
   레일 자리는 .main이 통째로 비켜주고(아래), 본문 여백은 --page-pad 하나로 좌우 같게 둔다. */

/* 좌측 고정 사이드바 (홈 제외 모든 페이지) — Ver03: 항상 노출(고정), 자동 숨김 제거 */
.side-nav{
  position:fixed;top:calc(var(--header-h) + 24px);left:16px;z-index:80;
  display:none;flex-direction:column;gap:10px;width:80px;
  will-change:transform;
}
body.with-sidenav .side-nav{display:flex;}
/* 자동 숨김 트리거 제거 (Ver03: 메뉴 고정) */
.side-hot{display:none !important;}
/* 본문이 고정 사이드바에 가리지 않도록 좌측 여백 확보 (PC) */
@media (min-width:901px){
  /* 레일이 차지한 자리(left:16 + 폭 52 = 68px)만 정확히 비켜준다.
     여기에 여유분을 더 얹으면 그만큼 왼쪽 틈만 커져 좌우가 다시 어긋난다 — 여유는 --page-pad가 준다. */
  body.with-sidenav .main{padding-left:68px;}
  /* PC: 평소엔 아이콘만 보이는 얇은 레일, 마우스를 올리면 글자까지 펼쳐짐(모바일 하단바는 그대로 유지) */
  .side-nav{width:52px;transition:width .22s cubic-bezier(.2,.7,.2,1);}
  .side-nav:hover{width:80px;}
  .side-node-label{white-space:nowrap;overflow:hidden;max-height:14px;opacity:1;transition:opacity .15s ease,max-height .15s ease,margin-top .15s ease;}
  .side-nav:not(:hover) .side-node-label{opacity:0;max-height:0;margin-top:0;}
}
.side-node{
  background:var(--bg-card);border:none;
  border-radius:18px;padding:13px 6px;text-align:center;cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .18s,background .18s;position:relative;
  box-shadow:0 2px 5px rgba(20,28,50,.05),0 10px 24px -8px rgba(20,28,50,.14);
}
body.dark .side-node{box-shadow:0 2px 5px rgba(0,0,0,.28),0 10px 24px -8px rgba(0,0,0,.45);}
.side-node{position:relative;}
.side-badge{position:absolute;top:7px;right:7px;width:9px;height:9px;border-radius:50%;border:2px solid var(--bg);}
.side-node:hover{transform:translateY(-3px);box-shadow:0 6px 14px rgba(20,28,50,.10),0 18px 34px -10px rgba(20,28,50,.22);}
body.dark .side-node:hover{box-shadow:0 6px 14px rgba(0,0,0,.35),0 18px 34px -10px rgba(0,0,0,.55);}
.side-node.active{background:var(--brand-grad);box-shadow:0 8px 22px -6px rgba(56,98,220,.45);}
.side-node.active .icon,.side-node.active .side-node-label{color:#fff;}
.side-node .icon{width:20px;height:20px;color:var(--primary);}
body.dark .side-node .icon{color:var(--gold);}
.side-node-label{font-size:10.5px;font-weight:600;color:var(--text);margin-top:4px;letter-spacing:-0.3px;}
.side-node-badge{
  position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;
  border-radius:9px;background:var(--gold);color:var(--primary);
  font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--bg-card);
}
.side-node-badge.alert{background:#ef4444;color:#fff;}

@media (max-width:900px){
  /* (8/31 삭제) 폰에는 좌측 레일이 없고 하단바만 있는데도 이 규칙 때문에
     로그인만 하면 왼쪽 24 / 오른쪽 20으로 어긋났다. 여백은 --page-pad(20px) 하나로. */
  .side-nav{position:fixed;top:auto;bottom:0;left:0;right:0;width:100%;flex-direction:row;justify-content:space-around;padding:8px 4px calc(8px + env(safe-area-inset-bottom));background:var(--bg-card);border-top:1px solid var(--border);gap:0;transform:none;opacity:1;pointer-events:auto;}
  .side-hot{display:none !important;}
  .side-node{padding:6px 8px;flex:1;border:none;box-shadow:none;border-radius:8px;}
  .side-node:hover{transform:none;box-shadow:none;}
  /* 모바일 하단바: 선택 메뉴는 통째 채우지 않고 아이콘 강조만 */
  .side-node.active{background:transparent;box-shadow:none;}
  .side-node.active .icon,.side-node.active .side-node-label{color:var(--primary);}
  body.dark .side-node.active .icon,body.dark .side-node.active .side-node-label{color:var(--gold);}
  .side-node-label{font-size:9px;}
  /* 8/17 사장님 수정요청(교보 전자책 모바일처럼): 스크롤 내리면 헤더(로고·메뉴)가 위로 올라가 사라지고, 올리면 다시 나온다.
     본문(.main)이 헤더 아래가 아니라 화면 전체를 쓰고 헤더는 그 위에 겹쳐 뜬다 → 헤더가 숨으면 그 자리까지 본문이 보인다. */
  /* --header-real = 실제로 그려진 헤더 높이(아래 syncHeaderHeight가 채움).
     헤더가 어쩔 수 없이 한 줄 더 늘어나도 본문이 그만큼 내려가서 절대 가려지지 않는다. */
  .main{height:100vh;height:100dvh;margin-top:0;padding-top:var(--header-real,var(--header-h));scroll-padding-top:var(--header-real,var(--header-h));}
  .header{transition:transform .24s ease;will-change:transform;}
  body.hdr-hide .header{transform:translateY(-100%);}
  /* 하단 탭바(.side-nav) 높이만큼 페이지 바닥 여백 — 마지막 줄이 탭바 뒤에 가려 잘려 보이던 것 */
  .page{padding-bottom:calc(84px + env(safe-area-inset-bottom));}
}
.page-title{font-size:30px;font-weight:800;letter-spacing:-0.9px;margin-bottom:8px;}
.page-title,.page-subtitle,.section-title,.ml-h-t,.ml-h-s{word-break:keep-all;} /* 한글 단어 중간 줄바꿈 방지 */
.page-subtitle{color:var(--text-sub);margin-bottom:32px;font-size:14px;letter-spacing:-0.2px;}
.section{margin-bottom:48px;}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.section-title{font-size:18px;font-weight:700;letter-spacing:-0.5px;}
.section-title em{color:var(--primary);font-style:normal;}
/* 우리 도서관 — 밀리의 서재 스타일 멀티섹션 */
.lc-fb{display:flex;align-items:center;justify-content:center;text-align:center;width:100%;height:100%;padding:8px;font-size:11px;font-weight:700;color:#fff;line-height:1.4;}
.lc-star{color:var(--gold);font-weight:800;}
/* ── 표지 없는 책 = 활자 표지(A안) ─────────────────────────────────
   종이책 단행본의 약 30%(8만여 권)는 알라딘·네이버 어디에도 표지가 없다(대부분 80~00년대 절판 학술서).
   "표지가 없어 비어 보이는 칸"이 아니라 "원래 이런 표지"로 읽히게 하는 게 목적.
   크기는 container query(cqw)로 자기 폭에 맞춰 자동 — 캐러셀 썸네일부터 상세 모달까지 한 마크업으로 커버.
   cqw 미지원 브라우저를 위해 각 규칙에 px 값을 먼저 두었다(뒤 선언을 무시하면 px가 남음). */
.nc-a{container-type:inline-size;width:100%;height:100%;position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;
  color:#fff;text-align:left;padding:13% 11% 11%;}
.nc-a .nc-t{font-family:'Noto Serif KR',Georgia,serif;font-weight:700;line-height:1.3;letter-spacing:-.02em;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;
  text-shadow:0 1px 3px rgba(0,0,0,.18);font-size:13px;font-size:clamp(7.5px,9.6cqw,28px);}
.nc-a.l1 .nc-t{font-size:22px;font-size:clamp(9px,16.5cqw,44px);}
.nc-a.l2 .nc-t{font-size:18px;font-size:clamp(8.5px,13.6cqw,38px);}
.nc-a.l3 .nc-t{font-size:15px;font-size:clamp(8px,11.2cqw,32px);}
.nc-a.l5 .nc-t{font-size:11px;font-size:clamp(7px,8.2cqw,24px);}
.nc-a.l6 .nc-t{font-size:10px;font-size:clamp(6.5px,7.1cqw,21px);-webkit-line-clamp:6;}
.nc-a .nc-s{font-weight:500;opacity:.7;margin-top:.5em;line-height:1.35;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  font-size:8px;font-size:clamp(7px,5.9cqw,13px);}
.nc-a .nc-f{opacity:.8;line-height:1.5;border-top:1px solid rgba(255,255,255,.28);padding-top:6px;
  overflow:hidden;font-size:9px;font-size:clamp(7px,6.9cqw,12px);}
.nc-a .nc-f b,.nc-a .nc-f i{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-style:normal;}
.nc-a .nc-f b{font-weight:700;opacity:.96;}
.nc-a::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 15% 0%,rgba(255,255,255,.14),transparent 62%);}
/* 아주 작은 썸네일(공유방 미니 표지 등)에선 제목만 남긴다 */
@container (max-width:86px){
  .nc-a{padding:9%;justify-content:center;}
  .nc-a .nc-f,.nc-a .nc-s{display:none;}
  .nc-a .nc-t{-webkit-line-clamp:4;}
}
@container (max-width:46px){   /* 리뷰 줄의 30px 미니 표지 등 */
  .nc-a{padding:6%;}
  .nc-a .nc-t{-webkit-line-clamp:3;letter-spacing:-.04em;line-height:1.2;}
}
.ml{display:flex;flex-direction:column;gap:42px;padding-bottom:20px;}
.bx-org{display:contents}   /* 측정 출처 래퍼 — 레이아웃에 상자 없음 */
/* 8/29 안내 카드(style:notice) — 책 없이 글만 있는 칸. 사서가 공지·행사 안내를 칸 사이에 끼워 넣는다 */
/* 안내 칸 — 8/29 사장님: "AI 박스 느낌 안 나게" → 상자·둥근 테두리·알약 배지 없이, 다른 칸(대출 랭킹 등)과 같은 제목+본문 글줄 */
.ml-nt{padding:4px 0 8px;}
#chalLive .ml-nt{margin:4px 0 30px;}   /* 8/30 챌린지 페이지 안내 카드 아래 간격 */
/* 8/30 사장님: 모바일 빌린 책 카드 — 버튼 4개가 제목을 세로로 찌그러뜨림 → 좁은 화면에선 제목 줄 아래에 버튼 줄 */
@media(max-width:640px){ .sm-loan-row{flex-direction:column;gap:8px;} .sm-loan-row>div:last-child{width:100%;justify-content:flex-start;} }
#chalLive .shelf-hero{padding-bottom:18px;margin-bottom:22px;}   /* 8/30 히어로 아래 빈 공간 축소 */
.ml-nt-k{font-size:12px;font-weight:700;letter-spacing:.3px;color:var(--text-light);margin-bottom:6px;}
.ml-nt-t{font-size:22px;font-weight:800;letter-spacing:-.4px;color:var(--text);line-height:1.35;}
.ml-nt-b{font-size:14.5px;line-height:1.9;color:var(--text-sub);margin-top:10px;white-space:pre-wrap;word-break:break-word;max-width:760px;}
.ml-nt-b a{color:var(--primary);font-weight:700;text-decoration:underline;text-underline-offset:2px;word-break:break-all;}
.ml-nt-b img.ml-nt-img{display:block;max-width:100%;height:auto;border-radius:10px;margin:10px 0;}   /* 10/9 안내 카드 이미지(세명대 요청) */
@media(max-width:640px){.ml-nt-t{font-size:18px;}.ml-nt-b{font-size:13.5px;line-height:1.85;}}
.ml-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px;}
.ml-h-t{font-family:Georgia,'Noto Serif KR',serif;font-size:22px;font-weight:700;letter-spacing:-.3px;color:var(--text);}
.ml-h-s{font-size:13px;color:var(--text-light);margin-top:5px;}
.ml-h-x{font-size:22px;color:var(--text-light);cursor:pointer;line-height:1;padding-top:2px;}
.ml [class$="-cv"]{position:relative;overflow:hidden;border-radius:7px;box-shadow:0 9px 20px -8px rgba(20,20,45,.32);background:var(--bg-input);transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s;}
.ml [class$="-cv"] img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s cubic-bezier(.2,.7,.2,1);}
/* 책 호버 — 떠오름 */
.ml-bk,.ml-rkc,.ml-nw{transition:transform .2s cubic-bezier(.2,.7,.2,1);}
.ml-bk:hover,.ml-rkc:hover,.ml-nw:hover{transform:translateY(-5px);}
.ml-bk:hover .ml-bk-cv,.ml-rkc:hover .ml-rkc-cv,.ml-nw:hover .ml-nw-cv,.ml-life:hover .ml-life-cv{transform:translateY(-2px);box-shadow:0 20px 34px -10px rgba(20,20,45,.45);}
.ml-bk:hover .ml-bk-cv img,.ml-rkc:hover .ml-rkc-cv img,.ml-nw:hover .ml-nw-cv img,.ml-life:hover .ml-life-cv img,.ml-gc:hover .ml-gc-cv img{transform:scale(1.06);}
.ml-bk:hover .ml-bk-t,.ml-rkc:hover .ml-rkc-t,.ml-nw:hover .ml-bk-t{color:var(--primary);}
body.dark .ml-bk:hover .ml-bk-t,body.dark .ml-rkc:hover .ml-rkc-t{color:var(--gold);}
.ml-gc,.ml-ac{transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s;}
.ml-gc:hover,.ml-ac:hover{transform:translateY(-6px);box-shadow:0 24px 40px -12px rgba(20,20,40,.5);}
.ml-icons{display:flex;gap:14px;overflow-x:auto;padding:2px 2px 4px;scrollbar-width:none;}
.ml-icons::-webkit-scrollbar{display:none;}
.ml-ic{flex:0 0 auto;width:80px;text-align:center;cursor:pointer;}
.ml-ic-c{width:62px;height:62px;margin:0 auto 8px;border-radius:50%;background:var(--bg-input);display:flex;align-items:center;justify-content:center;font-size:26px;transition:transform .15s;}
.ml-ic:hover .ml-ic-c{transform:translateY(-3px);}
.ml-ic-l{font-size:12px;color:var(--text-sub);font-weight:500;letter-spacing:-.3px;}
.ml-life{display:flex;flex-wrap:wrap;gap:36px;align-items:stretch;justify-content:center;background:linear-gradient(125deg,var(--primary-bg),rgba(255,255,255,0) 70%);border-radius:22px;padding:42px 38px;}
.ml-life-stage{position:relative;flex:0 0 auto;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:30px;border-radius:20px;overflow:hidden;background:linear-gradient(160deg,rgba(255,255,255,.78),rgba(255,255,255,.42));box-shadow:0 20px 52px -22px rgba(20,20,40,.32),inset 0 1px 0 rgba(255,255,255,.6);}
body.dark .ml-life-stage{background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.03));box-shadow:0 20px 52px -22px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06);}
.ml-life-glow{position:absolute;inset:16px;border-radius:14px;background-position:center;background-size:cover;filter:blur(34px) saturate(1.5);opacity:.4;}
.ml-life-cv{position:relative;width:168px;aspect-ratio:2/3;box-shadow:0 26px 50px -16px rgba(20,20,40,.55);}
.ml-life-card{flex:0 1 446px;min-width:260px;display:flex;flex-direction:column;background:var(--bg-card);border-radius:18px;padding:24px 26px;box-shadow:0 14px 38px -18px rgba(20,25,45,.22);}
body.dark .ml-life-card{background:rgba(255,255,255,.05);}
.ml-life-who{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.ml-life-av{width:42px;height:42px;border-radius:50%;background:var(--primary-bg);display:flex;align-items:center;justify-content:center;font-size:20px;flex:0 0 auto;}
.ml-life-who-t{font-size:14px;font-weight:800;color:var(--text);}
.ml-life-who-s{font-size:12px;color:var(--text-light);margin-top:2px;}
.ml-life-quote{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;padding:10px 28px 14px 34px;}
.ml-q-open,.ml-q-close{position:absolute;font-size:44px;font-weight:800;color:var(--border);font-family:Georgia,serif;line-height:1;}
.ml-q-open{left:0;top:-4px;}
.ml-q-close{right:4px;bottom:-20px;}
.ml-life-quote p{font-size:15px;line-height:1.78;color:var(--text-sub);font-weight:500;letter-spacing:-.2px;}
.ml-life-checks{margin-top:auto;padding-top:18px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:10px;}
.ml-life-chk{font-size:13px;color:var(--text-sub);display:flex;align-items:center;gap:9px;}
.ml-life-chk b{color:var(--text);font-weight:700;}
.ml-life-chk .ck{color:var(--primary);font-weight:800;}
body.dark .ml-life-chk .ck{color:var(--gold);}
.ml-hrow{display:flex;gap:18px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:none;cursor:grab;user-select:none;}
.ml-hrow.grabbing{cursor:grabbing;}
.ml-hrow::-webkit-scrollbar{display:none;}
.ml-car{position:relative;}   /* 폭은 JS(fitMlCars)가 카드 개수에 딱 맞게 잘라서 지정 — 마지막 책이 반쯤 잘려 보이지 않게 */
.ml-arrow{position:absolute;top:42%;transform:translateY(-50%);z-index:6;width:42px;height:42px;border-radius:50%;background:var(--bg-card);border:1px solid var(--border);box-shadow:0 6px 20px rgba(20,20,45,.2);font-size:22px;line-height:1;color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .18s,transform .12s;}
.ml-car:hover .ml-arrow{opacity:.96;}
.ml-arrow:hover{transform:translateY(-50%) scale(1.08);}
.ml-arrow-l{left:-10px;}
.ml-arrow-r{right:-10px;}
@media(max-width:760px){.ml-arrow{display:none;}}
.cl-shelf{margin-bottom:34px;}
/* 8/30: 챌린지가 큐레이션 스타일을 쓸 때 — 제목줄은 챌린지 머리글이 이미 그리므로 렌더러가 만든 빈 제목줄은 감춘다.
   8/31 수리: 이 규칙이 챌린지 머리글(.chal-head)까지 같이 감춰 모든 챌린지의 제목·종류·참여하기가 사라져 있었다 */
.cl-shelf .ml-head:not(.chal-head){display:none;}
.ml-hrow .cl-card{flex:0 0 150px;width:150px;}
@media(max-width:760px){.ml-hrow .cl-card{flex:0 0 124px;width:124px;}}
.ml-bk{flex:0 0 auto;width:130px;cursor:pointer;}
.ml-bk-cv{width:130px;aspect-ratio:2/3;}
/* 모바일 가로 책줄: 카드 줄여서 다음 책이 반쯤 걸쳐 보이게 (더 있음을 손이 알게) — 기본 130px 뒤에 있어야 이김 */
@media(max-width:760px){
  .ml-bk{width:112px;}
  .ml-bk-cv{width:112px;}
  .ml-hrow{gap:14px;scroll-snap-type:x proximity;}
  .ml-hrow>*{scroll-snap-align:start;}
}
.ml-bk-t{margin-top:10px;font-size:13.5px;font-weight:700;color:var(--text);line-height:1.32;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.ml-bk-a{font-size:11.5px;color:var(--text-light);margin-top:3px;}
.ml-bk-r{font-size:11.5px;color:var(--text-sub);margin-top:5px;}
.ml-chips{display:flex;gap:8px;overflow-x:auto;padding:0 2px 14px;scrollbar-width:none;}
.ml-chips::-webkit-scrollbar{display:none;}
.ml-chip{flex:0 0 auto;font-size:13px;font-weight:600;color:var(--text-sub);background:var(--bg-input);padding:8px 16px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:.14s;}
.ml-chip.on{background:var(--text);color:var(--bg-card);}
body.dark .ml-chip.on{background:var(--gold);color:#0f172a;}
.ml-rkbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;}
.ml-rkbar-l{font-size:13px;font-weight:700;color:var(--text);cursor:pointer;}
.ml-rkbar-r{font-size:12px;color:var(--text-light);}
.ml-rgrid{display:grid;grid-template-columns:1fr;gap:24px 40px;}
/* 모바일 랭킹(8/18 사장님 요청): 밀리처럼 3권씩 한 열, 옆으로 넘겨 보기 — 세로 12줄 대신 4열×3권 가로 스크롤 */
@media(max-width:559px){
  .ml-rgrid{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-template-rows:repeat(3,auto);grid-auto-columns:min(340px, calc(100vw - 88px));gap:16px 20px;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding:2px 0 6px;}
  .ml-rgrid::-webkit-scrollbar{display:none;}
  .ml-rgrid .ml-rkc{scroll-snap-align:start;}
  .ml-rgrid .ml-rkc-cv{width:72px;}
  .ml-rgrid .ml-rkc-t{font-size:14px;}
}
@media(min-width:560px){.ml-rgrid{grid-template-columns:1fr 1fr;}}
@media(min-width:1000px){.ml-rgrid{grid-template-columns:1fr 1fr 1fr 1fr;}}
.ml-rkc{display:flex;gap:14px;cursor:pointer;align-items:flex-start;}
.ml-rkc-n{flex:0 0 auto;width:26px;text-align:center;}
.ml-rkc-num{font-size:20px;font-weight:800;color:var(--text);line-height:1;}
.ml-rkc-chg{font-size:10px;font-weight:700;margin-top:6px;}
.ml-mv{display:inline-block;font-size:10.5px;font-weight:800;margin-top:6px;line-height:1;}
.ml-mv-up{color:#e0182d;}
.ml-mv-down{color:#1565d8;}
.ml-mv-keep{color:#cbd5e1;}
.ml-mv-new{color:#fff;background:#7c3aed;border-radius:7px;padding:1px 5px;font-size:9px;letter-spacing:.3px;}
.ml-up{color:#e5484d;}.ml-down{color:#3b82f6;}.ml-new{color:#16a34a;}.ml-flat{color:var(--text-light);}
.ml-rkc-cv{flex:0 0 auto;width:62px;aspect-ratio:2/3;}
.ml-rkc-i{flex:1;min-width:0;padding-top:2px;}
.ml-rkc-t{font-size:13.5px;font-weight:700;color:var(--text);line-height:1.34;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.ml-rkc-a{font-size:11.5px;color:var(--text-light);margin-top:5px;}
.ml-gc{flex:0 0 auto;width:230px;border-radius:16px;padding:20px 20px 22px;cursor:pointer;color:#fff;display:flex;flex-direction:column;min-height:300px;box-shadow:0 14px 30px -12px rgba(20,20,40,.4);}
.ml-gc-k{font-size:11px;font-weight:800;letter-spacing:.5px;opacity:.92;}
.ml-gc-h{margin-top:8px;font-size:15px;font-weight:700;line-height:1.45;letter-spacing:-.3px;}
.ml-gc-cv{width:96px;aspect-ratio:2/3;margin:18px auto 0;box-shadow:0 12px 24px -8px rgba(0,0,0,.45);}
.ml-gc-f{margin-top:14px;text-align:center;font-size:12px;font-weight:600;opacity:.95;}
.ml-ac{flex:0 0 auto;width:230px;border-radius:16px;padding:20px;color:#fff;display:flex;flex-direction:column;align-items:center;min-height:332px;box-shadow:0 14px 30px -12px rgba(0,0,0,.5);}
.ml-ac-k{align-self:flex-start;font-size:11px;font-weight:700;opacity:.85;}
.ml-ac-h{margin-top:8px;font-size:15px;font-weight:700;line-height:1.45;text-align:center;}
.ml-ac-cv{width:90px;aspect-ratio:2/3;margin:16px 0;}
.ml-ac-btn{margin-top:auto;width:100%;padding:11px;border-radius:11px;background:rgba(255,255,255,.95);color:#222;font-size:13px;font-weight:800;border:none;cursor:pointer;}
#lcDetail{position:fixed;inset:0;background:rgba(15,20,35,.55);display:none;z-index:200;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(3px);}
#lcDetail.on{display:flex;}
.lcd{position:relative;background:var(--bg-card);width:100%;max-width:430px;border-radius:20px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.42);max-height:90vh;overflow-y:auto;}
/* 8/19 폰: 좌우 20px 여백 + 둥근 카드가 길쭉해 보임 → 화면 폭 꽉 채우는 바텀시트(밀리·리디 방식). 데스크톱은 그대로 */
@media (max-width:600px){
  #lcDetail{padding:0;align-items:flex-end;}
  .lcd{max-width:none;border-radius:20px 20px 0 0;max-height:92dvh;box-shadow:0 -12px 40px rgba(0,0,0,.28);padding-bottom:env(safe-area-inset-bottom);animation:lcdUp .26s cubic-bezier(.2,.8,.2,1);}
  .lcd::before{content:'';display:block;width:40px;height:4px;border-radius:2px;background:var(--border);margin:10px auto 0;}
  .lcd-top{padding-top:14px;}
  .lcd-x{top:14px;}
}
@keyframes lcdUp{from{transform:translateY(40px);opacity:.5}to{transform:none;opacity:1}}
.lcd-x{position:absolute;top:12px;right:16px;font-size:24px;color:var(--text-light);cursor:pointer;z-index:3;line-height:1;}
.lcd-top{display:flex;gap:16px;padding:26px 24px 20px;}
.lcd-cv{flex:0 0 98px;width:98px;height:140px;border-radius:9px;overflow:hidden;background:var(--bg-input);box-shadow:0 10px 24px rgba(20,20,45,.26);}
.lcd-cv img{width:100%;height:100%;object-fit:cover;}
.lcd-i{flex:1;min-width:0;}
.lcd-i h2{font-size:18px;font-weight:800;letter-spacing:-.5px;line-height:1.32;}
.lcd-i .au{font-size:12.5px;color:var(--text-light);margin-top:6px;}
.lcd-note{font-size:12.5px;color:var(--primary);margin-top:11px;font-style:italic;line-height:1.55;}
.lcd-meta{font-size:12px;color:var(--text-sub);margin-top:9px;}
.lcd-rank{display:inline-flex;align-items:center;font-size:11px;font-weight:700;color:var(--primary);background:transparent;border:1px solid var(--primary);border-radius:999px;padding:3px 10px;margin-bottom:8px;letter-spacing:-0.2px;}
.lcd-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px;}
.lcd-chip{font-size:11px;color:var(--text-sub);background:var(--bg-input);border:1px solid var(--border);border-radius:999px;padding:3px 9px;}
.lcd-desc{font-size:12.5px;color:var(--text-sub);line-height:1.7;padding:0 24px;margin:2px 0 18px;max-height:9.5em;overflow:hidden;}
.lcd-desc.has-sum{font-size:14px;color:var(--text);line-height:1.9;max-height:none;padding:2px 24px 4px;margin:6px 0 18px;letter-spacing:-0.1px;}
/* 8/14 사장님 수정요청: 도서 설명 잘림 — 넘치면 하단 페이드 + '더 보기', 탭하면 전체 펼침 */
.lcd-desc.clip{position:relative;cursor:pointer;}
.lcd-desc.clip::after{content:'… 더 보기';position:absolute;right:24px;bottom:0;padding-left:44px;font-size:12px;font-weight:800;color:var(--primary);background:linear-gradient(90deg,transparent,var(--bg-card) 38%,var(--bg-card));}
/* 8/30: 펼쳐도 화면 절반까지만 늘어나고 그 안에서 스크롤 — 아래 소장현황·빌리기 자리가 안 밀린다 */
.lcd-desc.open{max-height:min(46vh,340px);overflow-y:auto;overscroll-behavior:contain;cursor:pointer;}
.lcd-desc.open::after{content:'접기';display:block;position:sticky;bottom:0;text-align:right;font-size:12px;font-weight:800;color:var(--primary);background:var(--bg-card);padding:5px 0 1px;margin-top:6px;}
.lcd-ways{margin-top:16px;border-top:1px solid var(--border);padding-top:14px;}
.lcd-ways-h{font-size:10.5px;font-weight:700;color:var(--text-light);letter-spacing:.08em;text-transform:uppercase;margin:0 2px 10px;}
.lcd-way{display:flex;align-items:center;gap:11px;text-decoration:none;font-size:13.5px;color:var(--text);background:var(--bg-card);border:1px solid var(--border);border-radius:13px;padding:11px 14px;margin-bottom:8px;transition:border-color .16s,transform .12s,box-shadow .16s;}
.lcd-way:hover{border-color:var(--gold);transform:translateX(2px);box-shadow:0 6px 18px rgba(40,40,90,.07);}
.lcd-way .wic{width:36px;height:36px;flex:none;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;}
.lcd-way .wic svg{width:18px;height:18px;}
.lcd-way.t-paper .wic{background:rgba(99,102,241,.12);color:#6366f1;}
.lcd-way.t-paper.ok .wic{background:rgba(34,197,94,.14);color:#16a34a;}
.lcd-way.t-sub .wic{background:rgba(124,58,237,.12);color:#7c3aed;}
.lcd-way .wlabel{font-weight:700;letter-spacing:-0.3px;}
.lcd-way.ok{border-color:rgba(34,197,94,.32);}
.lcd-way .wtag{font-size:11px;font-weight:700;color:#15803d;background:rgba(34,197,94,.13);border-radius:999px;padding:3px 10px;}
body.dark .lcd-way .wtag{color:#86efac;}
.lcd-way .wtag.sub{color:#7c3aed;background:rgba(124,58,237,.12);}
/* 전자책 대체 추천(추천 v2, 8/18) — 대출 중 예약 CTA 아래 "같은 장르 · 지금 바로 읽을 수 있는" 3권 가로 줄 */
.ebsim{margin-top:10px;padding:12px 12px 10px;border:1px dashed var(--border);border-radius:13px;background:var(--bg-card);}
.ebsim-h{font-size:12.5px;font-weight:700;color:var(--text-sub);letter-spacing:-0.3px;margin-bottom:9px;}
.ebsim-row{display:flex;gap:10px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none;}
.ebsim-row::-webkit-scrollbar{display:none;}
.ebsim-card{flex:0 0 96px;cursor:pointer;}
.ebsim-cv{width:96px;height:132px;border-radius:8px;overflow:hidden;background:var(--bg-input);box-shadow:0 3px 10px rgba(0,0,0,.08);}
.ebsim-cv img{width:100%;height:100%;object-fit:cover;display:block;}
.ebsim-t{font-size:12px;font-weight:700;line-height:1.3;margin-top:6px;letter-spacing:-0.3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.ebsim-a{font-size:11px;color:var(--text-light);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ebsim-go{margin-top:5px;font-size:11px;font-weight:700;color:#15803d;background:rgba(34,197,94,.13);border-radius:999px;padding:3px 8px;display:inline-block;}
body.dark .ebsim-go{color:#86efac;}
body.dark .lcd-way .wtag.sub{color:#c4b5fd;}
/* 주 동작(전자책/종이책/크레마/찾기)도 종이책처럼 깔끔한 박스 — primary는 아이콘칩을 채워 강조 */
.lcd-way.pw,.lcd-way.t-ebook{border-color:rgba(26,41,66,.22);cursor:pointer;}
.lcd-way.pw:hover,.lcd-way.t-ebook:hover{border-color:var(--primary);}
.lcd-way.t-ebook .wic,.lcd-way.t-find .wic{background:var(--primary);color:#fff;}
.lcd-way.pw.t-paper .wic{background:#6366f1;color:#fff;}
.lcd-way.pw.t-sub .wic{background:#7c3aed;color:#fff;}
.lcd-way .wtag.eb{color:#0F6E56;background:rgba(34,160,110,.13);}
body.dark .lcd-way .wtag.eb{color:#8fd9bf;}
.lcd-way .wsub{font-size:12px;color:var(--text-light);}
.lcd-way .ar{margin-left:auto;color:var(--text-light);font-size:15px;}
/* 목록 카드 보유형태 태그 */
.fmt-tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px;}
.fmt-tag{font-size:10px;font-weight:700;padding:2px 6px;border-radius:6px;line-height:1.45;white-space:nowrap;}
.fmt-ebook{color:#1d4ed8;background:rgba(37,99,235,.1);}
.fmt-paper{color:#15803d;background:rgba(34,197,94,.12);}
.fmt-sub{color:#7c3aed;background:rgba(124,58,237,.12);}
.fmt-cls{color:#b45309;background:rgba(245,158,11,.14);}
body.dark .fmt-ebook{color:#93c5fd;}
body.dark .fmt-paper{color:#86efac;}
body.dark .fmt-sub{color:#c4b5fd;}
/* 종이책 라이브 소장/대출가능 현황 (모달) */
.lcd-holding{margin:14px 0 4px;padding:12px 14px;border-radius:13px;font-size:13.5px;line-height:1.5;border:1px solid var(--border);background:var(--bg-input);}
.lcd-holding.loading{color:var(--text-light);font-size:12.5px;}
.lcd-holding.ok{background:rgba(22,163,74,.08);border-color:rgba(22,163,74,.28);}
.lcd-holding.out{background:rgba(148,163,184,.12);border-color:rgba(148,163,184,.3);}
.lh-line{display:flex;align-items:center;gap:7px;font-weight:700;color:var(--text);}
.lh-line b{font-weight:800;}
.lcd-holding.ok .lh-line b:first-of-type{color:#15803d;}
.lh-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;}
.lh-dot.ok{background:#16a34a;box-shadow:0 0 0 3px rgba(22,163,74,.18);}
.lh-dot.out{background:#94a3b8;}
.lh-where{margin-top:6px;font-size:12.5px;color:var(--text-sub);font-weight:500;}
.lh-where b{color:var(--text);font-weight:700;}
body.dark .lcd-holding.ok .lh-line b:first-of-type{color:#86efac;}
/* 찾아줘북즈 — 북스타 안에서 바로 예약 */
.lh-resv{margin-top:10px;padding:11px 14px;border-radius:11px;text-align:center;font-weight:800;font-size:13px;cursor:pointer;color:#fff;background:linear-gradient(90deg,#6366f1,#06b6d4);box-shadow:0 4px 14px rgba(99,102,241,.32);transition:transform .12s,box-shadow .12s,opacity .12s;user-select:none;}
.lh-resv:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(99,102,241,.42);}
.lh-resv.busy{opacity:.6;cursor:default;}
.lh-resv.done{background:rgba(22,163,74,.1);color:#15803d;box-shadow:none;border:1px solid rgba(22,163,74,.32);cursor:default;font-weight:700;line-height:1.55;}
body.dark .lh-resv.done{color:#86efac;}
.lh-cancel{display:inline-block;margin-top:5px;font-size:11.5px;font-weight:600;color:var(--text-light);text-decoration:underline;cursor:pointer;}
.lh-cancel:hover{color:#dc2626;}
/* 전자책+종이책: '종이책 대출' 탭하면 소장정보 펼침 */
.lcd-way .pw-ar{transition:transform .16s;display:inline-block;}
.lcd-way.pw-open .pw-ar{transform:rotate(90deg);}
.lcd-holding.pw-hold{margin:6px 0 2px;}
/* 예약 직전 확인 시트 */
.rsv-sheet{position:fixed;inset:0;z-index:1200;display:none;align-items:flex-end;justify-content:center;background:rgba(15,23,42,.5);}
.rsv-sheet.on{display:flex;}
.rsv-card{background:var(--bg-card,#fff);width:100%;max-width:440px;border-radius:20px 20px 0 0;padding:22px 20px calc(24px + env(safe-area-inset-bottom));box-shadow:0 -8px 30px rgba(0,0,0,.22);animation:rsvUp .22s ease;}
@keyframes rsvUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.rsv-card h3{margin:0 0 5px;font-size:17px;font-weight:800;color:var(--text);}
.rsv-sub{font-size:13px;color:var(--text-sub);line-height:1.5;margin-bottom:17px;}
.rsv-sub b{color:var(--text);font-weight:700;}
.rsv-rules{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-direction:column;gap:13px;}
.rsv-rules li{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;line-height:1.5;color:var(--text);}
.rsv-tag{flex:0 0 auto;min-width:38px;text-align:center;padding:2px 8px;border-radius:7px;font-size:11.5px;font-weight:700;background:var(--bg-input);color:var(--text-sub);margin-top:1px;}
.rsv-tag.warn{background:rgba(185,28,28,.1);color:#b91c1c;}
body.dark .rsv-tag.warn{background:rgba(252,165,165,.14);color:#fca5a5;}
.rsv-rules b{font-weight:800;}
.rsv-warn{color:#b91c1c;}
body.dark .rsv-warn{color:#fca5a5;}
.rsv-btns{display:flex;gap:9px;}
.rsv-btns button{flex:1;padding:13px;border-radius:12px;font-size:14px;font-weight:800;border:none;cursor:pointer;}
.rsv-go{color:#fff;background:linear-gradient(90deg,#6366f1,#06b6d4);flex:1.5;}
.rsv-close{background:var(--bg-input);color:var(--text-sub);}
.lcd-rank .ricon{display:inline-flex;vertical-align:-2px;margin-right:5px;}
.lcd-rank .ricon svg{width:13px;height:13px;}
.lcd-btn.primary .bic{display:inline-flex;vertical-align:-3px;margin-right:8px;}
.lcd-btn.primary .bic svg{width:17px;height:17px;}
.lcd-src{font-size:10px;color:var(--text-light);padding:0 24px 18px;}
#lcdReviews{padding:16px 24px 22px;border-top:1px solid var(--border);margin-top:2px;}
#lcdReviews .rv-card{margin-bottom:8px;}
#lcdReviews .rvh{display:flex;align-items:center;gap:8px;margin-bottom:12px;}
#lcdReviews .rvh b{font-size:14px;}
#lcdReviews .rv-writebtn{margin-left:auto;font-size:12.5px;padding:8px 13px;}
.lcd-acts{padding:0 24px 18px;display:flex;flex-direction:column;gap:9px;}
#ebStockNote:empty,#ebSimilar:empty{display:none;}   /* 8/19 빈 자리표시 div가 flex gap을 두 번 먹지 않게 */
#ebSimilar .ebsim{margin-top:0;}
.lcd-btn{display:flex;align-items:center;gap:9px;border:1px solid var(--border);border-radius:12px;padding:13px 15px;font-size:13.5px;font-weight:700;cursor:pointer;background:var(--bg-card);color:var(--text);}
.lcd-btn.primary{background:var(--primary);color:#fff;border-color:var(--primary);}
.lcd-btn .ar{margin-left:auto;opacity:.6;}
/* 8/20 사장님 수정요청: '전자책 바로 읽기' 아래 '퀴즈로 바로 읽기' — 작품 이해·인문 성찰 두 줄을 항상 보여준다 */
/* 9/2 상자 속 상자(회색판 안에 흰 카드+색 테두리+꺾쇠)를 걷어내고 목록 한 벌로 — 제목·문항 수·설명, 줄 사이 실선만.
   색은 문항 수 표에 한 점만 남긴다. */
.lcd-quiz{margin:2px 24px 14px;}
.lcd-quiz-h{display:flex;align-items:baseline;gap:10px;font-size:13px;font-weight:800;color:var(--text);padding:0 2px 9px;border-bottom:1px solid var(--text);}
.lcd-quiz-s{font-size:11.5px;color:var(--text-light);font-weight:500;}
.lcd-qcard{display:grid;grid-template-columns:1fr auto;column-gap:12px;align-items:baseline;padding:13px 2px 12px;cursor:pointer;border-bottom:1px solid var(--border);}
.lcd-qcard:hover .qt{text-decoration:underline;text-underline-offset:3px;}
.lcd-qcard .qt{font-size:14.5px;font-weight:800;color:var(--accent);}   /* 9/2 제목에 색 — --primary는 본문 글자색과 같은 남색이라 안 보임 → 앱 파랑(--accent) */
body.dark .lcd-qcard .qt{color:#7fb0e6;}
.lcd-qcard .qn{font-size:11.5px;font-weight:700;color:var(--text-light);white-space:nowrap;}
.lcd-qcard .qd{grid-column:1 / -1;font-size:12px;color:var(--text-light);line-height:1.5;margin-top:3px;}
@media(max-width:600px){.lcd-quiz{margin:2px 16px 12px;}}

/* ═══════════════════════════════════════════════════════════
   4. 홈 — 3 메인 프로그램 + 공지
   ═══════════════════════════════════════════════════════════ */
.notice-box{
  background:linear-gradient(135deg,var(--primary-bg),var(--bg-card));
  border:1px solid var(--border);border-radius:14px;
  padding:18px 24px;margin-bottom:28px;
}
.notice-title{font-size:13px;font-weight:800;color:var(--primary);margin-bottom:8px;}
.notice-list{font-size:13px;line-height:1.9;color:var(--text-sub);}
.notice-list li{list-style:none;padding-left:18px;position:relative;}
.notice-list li::before{content:'·';position:absolute;left:6px;color:var(--primary);font-weight:900;}

.program-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:48px;}
.program-card{
  background:var(--bg-card);border:1px solid var(--border);border-radius:18px;
  padding:28px;cursor:pointer;transition:all 0.2s;position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:12px;min-height:240px;
}
.program-card:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(26,41,66,0.12);}
.program-card.featured{background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;border:none;}
body.dark .program-card.featured{background:linear-gradient(135deg,var(--gold),#b08e30);color:#0f172a;}
.program-eyebrow{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1px;opacity:0.7;}
.program-card.featured .program-eyebrow{opacity:0.9;}
.program-title{font-size:20px;font-weight:900;line-height:1.3;letter-spacing:-0.5px;}
.program-desc{font-size:13px;line-height:1.6;color:var(--text-sub);flex:1;}
.program-card.featured .program-desc{color:rgba(255,255,255,0.9);}
body.dark .program-card.featured .program-desc{color:rgba(15,23,42,0.85);}
.program-meta{font-size:11px;font-weight:700;display:flex;gap:12px;}
.program-meta-item{display:flex;align-items:center;gap:4px;}
.program-cta{
  margin-top:8px;padding:12px;border-radius:10px;font-weight:800;font-size:13px;
  background:rgba(255,255,255,0.15);color:#fff;text-align:center;
  border:1px solid rgba(255,255,255,0.25);
}
.program-card:not(.featured) .program-cta{background:var(--primary);color:#fff;border:none;}
body.dark .program-card:not(.featured) .program-cta{background:var(--gold);color:#0f172a;}
/* 사서가 만든 챌린지 카드 (독서 챌린지 페이지) */
.chal-live-wrap{margin-bottom:38px;}
.chal-live-head{font-size:17px;font-weight:800;letter-spacing:-0.4px;margin-bottom:14px;display:flex;align-items:center;gap:8px;}
.chal-live-tag{font-size:11px;font-weight:800;color:var(--primary);background:var(--primary-bg);padding:3px 9px;border-radius:7px;}
body.dark .chal-live-tag{color:var(--gold);}
.chal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px;}
.chal-card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:11px;transition:all 0.2s;}
.chal-card:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(26,41,66,0.12);}
.chal-c-top{display:flex;align-items:center;gap:13px;}
.chal-covers{display:flex;flex:0 0 auto;}
.chal-covers .cv{width:38px;height:54px;border-radius:5px;background:var(--bg-input);margin-left:-12px;box-shadow:0 2px 7px rgba(0,0,0,0.18);display:flex;align-items:center;justify-content:center;font-size:18px;overflow:hidden;border:1.5px solid var(--bg-card);}
.chal-covers .cv:first-child{margin-left:0;}
.chal-covers .cv img{width:100%;height:100%;object-fit:cover;}
.chal-type{font-size:11px;font-weight:800;color:var(--accent);background:rgba(58,110,165,0.12);padding:3px 9px;border-radius:7px;align-self:flex-start;}
.chal-type.classic{color:#9a5b12;background:rgba(212,140,40,0.16);}
.chal-title{font-size:16px;font-weight:800;letter-spacing:-0.4px;line-height:1.35;}
.chal-desc{font-size:12.5px;line-height:1.55;color:var(--text-sub);flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.chal-mission{display:flex;flex-wrap:wrap;gap:6px;}
.chal-mission span{font-size:11px;font-weight:700;color:var(--primary);background:var(--primary-bg);padding:3px 8px;border-radius:6px;}
body.dark .chal-mission span{color:var(--gold);}
.chal-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:2px;}
.chal-meta{font-size:11.5px;color:var(--text-light);font-weight:700;}
.chal-dday{color:var(--accent);font-weight:800;}
.chal-join{font-size:12.5px;font-weight:800;color:#fff;background:var(--primary);border:none;padding:9px 15px;border-radius:9px;cursor:pointer;white-space:nowrap;transition:filter 0.15s;}
.chal-join:hover{filter:brightness(1.08);}
body.dark .chal-join{background:var(--gold);color:#0f172a;}
.chal-empty{grid-column:1/-1;text-align:center;color:var(--text-light);font-size:13px;padding:40px 0;line-height:1.7;}
.chal-row-desc{font-size:13px;line-height:1.65;color:var(--text-sub);margin:-6px 0 16px;max-width:760px;}
.chal-join.joined{background:var(--bg-input);color:var(--text-sub);filter:none;}
body.dark .chal-join.joined{background:rgba(255,255,255,.08);color:var(--text-sub);}
.sh-btn.joined{background:transparent;color:#5d5240;border:1.5px solid rgba(120,100,70,.4);}
body.dark .sh-btn.joined{background:transparent;color:#cdd5e6;border-color:rgba(255,255,255,.22);}
.chal-ai-head{font-size:15px;font-weight:800;color:var(--text-sub);margin:6px 0 16px;letter-spacing:-0.3px;}

/* ═══════════════════════════════════════════════════════════
   5. 큐레이션 카드 (홈/컬렉션)
   ═══════════════════════════════════════════════════════════ */
.curation-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;}
.curation-card{
  border-radius:14px;overflow:hidden;cursor:pointer;transition:all 0.2s;
  display:flex;flex-direction:column;min-height:170px;
  position:relative;color:#fff;padding:22px;
}
.curation-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,0.18);}
.cur-1{background:linear-gradient(135deg,#3a1f5e,#7b3a8e);}
.cur-2{background:linear-gradient(135deg,#1c5e3e,#3e8e6b);}
.cur-3{background:linear-gradient(135deg,#0d2a4e,#1e5a8e);}
.cur-4{background:linear-gradient(135deg,#5e2a1f,#8e5a3e);}
.cur-5{background:linear-gradient(135deg,#5e1f3e,#8e3e6b);}
.cur-6{background:linear-gradient(135deg,#2e3a1c,#5e6e3a);}
.curation-eyebrow{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;opacity:0.85;}
.curation-title{font-size:20px;font-weight:900;line-height:1.25;letter-spacing:-0.4px;margin-top:8px;}
.curation-desc{font-size:12px;line-height:1.6;opacity:0.85;margin-top:8px;flex:1;}
.curation-meta{font-size:11px;font-weight:700;display:flex;gap:12px;opacity:0.9;margin-top:8px;}

/* ═══════════════════════════════════════════════════════════
   6. 책 그리드
   ═══════════════════════════════════════════════════════════ */
.book-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:20px;}
.book-card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;overflow:hidden;cursor:pointer;transition:all 0.2s;position:relative;}
.book-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(26,41,66,0.14);border-color:var(--primary);}
.book-card.has-mns{border-color:var(--gold);}
/* 도서/학술자료 은은한 글로우 테두리 구분 — 별이 검색결과 카드(메인 .book-card + 플로팅 .hwc-card) */
.book-card.bc-book,.hwc-card.bc-book{border-color:#a9c8ea;box-shadow:0 0 0 1px rgba(58,110,165,.10),0 2px 14px rgba(58,110,165,.22);}
.book-card.bc-paper,.hwc-card.bc-paper{border-color:#ecd391;box-shadow:0 0 0 1px rgba(212,169,59,.14),0 2px 14px rgba(212,169,59,.30);}
.book-card.bc-book:hover,.hwc-card.bc-book:hover{border-color:#8bb4e0;box-shadow:0 0 0 1px rgba(58,110,165,.18),0 5px 22px rgba(58,110,165,.34);}
.book-card.bc-paper:hover,.hwc-card.bc-paper:hover{border-color:#e3c373;box-shadow:0 0 0 1px rgba(212,169,59,.22),0 5px 22px rgba(212,169,59,.42);}
/* 논문(KCI·국회)은 표지가 없음 → 빈 박스 대신 문서 아이콘 플레이스홀더(골드 톤) */
.paper-cover{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#f6eed9;color:#b58f3e;}
.paper-cover svg{width:42%;height:42%;}
.book-cover:has(.paper-cover),.book-cover:has(.nc-a){padding:0;}
body.dark .paper-cover{background:#3a3115;color:#d9b768;}
.mns-badge{position:absolute;top:8px;left:8px;z-index:2;background:var(--gold);color:#1a1208;font-size:10px;font-weight:800;letter-spacing:-.2px;padding:3px 7px;border-radius:6px;box-shadow:0 3px 8px rgba(0,0,0,.18);}
.detail-meta-chip.mns-chip{background:var(--gold);color:#1a1208;}
.book-cover{aspect-ratio:2/3;display:flex;align-items:center;justify-content:center;padding:18px;text-align:center;position:relative;overflow:hidden;}
.book-cover.has-img{padding:0;background:#1a1a1a;}
.book-cover.has-img>div{display:none;}
.book-cover.has-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.book-cover-title{font-size:15px;font-weight:800;line-height:1.25;letter-spacing:-0.3px;}
.book-cover-author{font-size:11px;margin-top:8px;opacity:0.75;}
.book-cover-badge{position:absolute;top:8px;right:8px;background:rgba(255,255,255,0.95);color:var(--primary);font-size:9px;font-weight:800;padding:3px 7px;border-radius:6px;z-index:2;}
.book-info{padding:12px 14px;}
.book-title{font-size:13px;font-weight:800;color:var(--text);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.book-author{font-size:11px;color:var(--text-sub);}
/* 도서 유형 배지 (통합 검색) */
.bt-tag{display:inline-block;font-size:10px;font-weight:800;padding:2px 7px;border-radius:5px;margin-bottom:5px;letter-spacing:-0.2px;}
.bt-tag.bt-kr{background:#e6f1fb;color:#0C447C;}
.bt-tag.bt-fr{background:#EEEDFE;color:#3C3489;}
.bt-tag.bt-eb{background:#E1F5EE;color:#0F6E56;}
.bt-tag.bt-pp{background:#FAEEDA;color:#633806;}
.bt-tag.bt-sub{background:#EDE9FE;color:#5B21B6;}
body.dark .bt-tag.bt-kr{background:#1e3a5f;color:#a5c8ef;}
body.dark .bt-tag.bt-fr{background:#332d6b;color:#c4bdf5;}
body.dark .bt-tag.bt-eb{background:#163d31;color:#8fd9bf;}
body.dark .bt-tag.bt-pp{background:#3d2f15;color:#e0b878;}
body.dark .bt-tag.bt-sub{background:#312357;color:#c4b5fd;}
/* 대화형 별이(검색 페이지) */
.usc-thread{display:flex;flex-direction:column;gap:14px;max-width:760px;}
.usc-row{display:flex;gap:9px;align-items:flex-end;}
.usc-row.user{justify-content:flex-end;}
.usc-av{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#fde68a,#f59e0b);display:flex;align-items:center;justify-content:center;font-size:15px;box-shadow:0 3px 8px rgba(245,158,11,.3);}
.usc-bubble{max-width:78%;padding:11px 15px;border-radius:16px;font-size:14px;line-height:1.55;white-space:pre-wrap;word-break:break-word;}
.usc-row.user .usc-bubble{background:var(--primary);color:#fff;border-bottom-right-radius:5px;}
.usc-row.star .usc-bubble{background:var(--bg-card);border:1px solid var(--border);color:var(--text);border-bottom-left-radius:5px;}
.usc-bubble.usc-sub{font-size:13px;color:var(--text-sub);background:transparent;border:0;padding:2px 0 4px;max-width:100%;}
.usc-typing{display:inline-flex;gap:5px;padding:14px 16px;}
.usc-typing span{width:7px;height:7px;border-radius:50%;background:var(--text-light);animation:uscbk 1s infinite ease-in-out;}
.usc-typing span:nth-child(2){animation-delay:.15s;}.usc-typing span:nth-child(3){animation-delay:.3s;}
@keyframes uscbk{0%,80%,100%{opacity:.25;transform:translateY(0);}40%{opacity:1;transform:translateY(-4px);}}
.usc-chips{display:flex;flex-wrap:wrap;gap:7px;margin:2px 0 2px 37px;}
.usc-chip{font-size:12.5px;color:var(--text-sub);background:var(--bg-input);border:1px solid var(--border);padding:7px 13px;border-radius:999px;cursor:pointer;transition:.14s;}
.usc-chip:hover{border-color:var(--primary);color:var(--primary);}
.usc-cards{flex:1;min-width:0;}
.usc-cards-h{font-size:13px;font-weight:800;color:var(--text);margin-bottom:10px;}
.usc-cards-h span{color:var(--text-light);}
.usc-act{display:block;width:100%;margin-top:8px;padding:8px 10px;border:0;border-radius:9px;background:var(--primary);color:#fff;font-size:12.5px;font-weight:800;text-align:center;cursor:pointer;text-decoration:none;box-sizing:border-box;transition:.14s;}
.usc-act:hover{opacity:.9;}
.usc-act.ghost{background:transparent;border:1px solid var(--border);color:var(--text-sub);}
.usc-act.ghost:hover{border-color:var(--primary);color:var(--primary);}
.usc-pnote{font-size:12px;color:var(--primary);font-weight:700;margin:-4px 0 10px;}
/* Answer Engine 답변 버블 — 소장자료 근거 합성답(인용 [n]→카드 점프) */
.usc-answer{margin:0 0 12px;padding:13px 15px;border-radius:14px;background:linear-gradient(135deg,rgba(99,102,241,.10),rgba(99,102,241,.04));border:1px solid rgba(99,102,241,.28);}
.usc-answer-h{font-size:11.5px;font-weight:800;color:var(--primary);margin-bottom:6px;letter-spacing:.3px;display:flex;align-items:center;gap:7px;}
.usc-answer-h::before{content:'';width:3px;height:12px;border-radius:2px;background:var(--primary);flex:none;}
.usc-answer-t{font-size:14px;line-height:1.62;color:var(--text);word-break:break-word;}
.usc-cite{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;margin:0 1px;padding:0 4px;border-radius:8px;background:var(--primary);color:#fff;font-size:10px;font-weight:800;cursor:pointer;vertical-align:super;line-height:16px;transition:.12s;}
.usc-cite:hover{transform:scale(1.18);box-shadow:0 2px 8px rgba(99,102,241,.4);}
.usc-refs{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;}
.usc-ref{font-size:11.5px;font-weight:700;color:var(--primary);background:var(--bg-card);border:1px solid rgba(99,102,241,.3);border-radius:8px;padding:4px 9px;cursor:pointer;transition:.12s;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.usc-ref:hover{border-color:var(--primary);box-shadow:0 3px 10px rgba(99,102,241,.2);}
.book-card.cite-flash{outline:3px solid var(--primary);outline-offset:2px;border-radius:12px;transition:outline .2s;animation:citePulse 1.4s ease;}
@keyframes citePulse{0%,100%{box-shadow:0 0 0 rgba(99,102,241,0);}30%{box-shadow:0 0 22px rgba(99,102,241,.55);}}
.usc-link{display:inline-flex;align-items:center;gap:6px;margin-top:7px;padding:8px 13px;border:1px solid var(--border);border-radius:10px;background:var(--bg-card);color:var(--primary);font-size:12.5px;font-weight:800;text-decoration:none;transition:.14s;}
.usc-link:hover{border-color:var(--primary);box-shadow:0 4px 12px rgba(99,102,241,.18);}
.us-section-label{font-size:13px;font-weight:800;color:var(--text-sub);margin:8px 0 14px;}
/* ── 10/11 사장님 시안(2안): 검색 전 카테고리 격자(밀리의 서재식) + 소주제 선반 + 별이 탭 입력창 아래 ── */
.subtab-ai{display:inline-block;margin-left:6px;font-size:11px;font-weight:800;color:var(--primary);background:var(--primary-bg);border-radius:6px;padding:2px 7px;vertical-align:1px;}
.us-cat-h{font-size:15px;font-weight:800;color:var(--text);margin:4px 0 14px;} .us-cat-h span{font-size:12px;font-weight:600;color:var(--text-light);margin-left:8px;}
.us-cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-width:980px;}
.us-cat{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--border);background:var(--bg-card);border-radius:14px;padding:16px 18px;cursor:pointer;min-height:84px;transition:border-color .15s,box-shadow .15s;}
.us-cat:hover{border-color:var(--primary);box-shadow:0 6px 18px -10px rgba(20,20,40,.35);}
.us-cat-tx b{display:block;font-size:16px;font-weight:800;color:var(--text);} .us-cat-tx span{display:block;font-size:12px;color:var(--text-light);margin-top:4px;line-height:1.5;}
.us-cat-cv{flex:none;width:52px;height:74px;border-radius:6px;overflow:hidden;background:var(--bg-input);transform:rotate(6deg);box-shadow:0 4px 10px -4px rgba(0,0,0,.35);} .us-cat-cv img{width:100%;height:100%;object-fit:cover;display:block;}
.us-cat-top{display:flex;align-items:center;gap:14px;margin:2px 0 18px;flex-wrap:wrap;}
.us-cat-back{font-size:13px;font-weight:700;color:var(--primary);cursor:pointer;} .us-cat-crumb{font-size:18px;font-weight:800;color:var(--text);} .us-cat-crumb i{font-style:normal;color:var(--text-light);margin:0 6px;} .us-cat-crumb b{color:var(--text);}
.us-cat-row{margin-bottom:28px;} .us-row-more{font-size:13px;font-weight:700;color:var(--text-sub);cursor:pointer;white-space:nowrap;align-self:center;} .us-row-more:hover{color:var(--primary);}
.us-row-loading{font-size:13px;color:var(--text-light);padding:18px 2px;}
#page-search.nl{display:flex;flex-direction:column;min-height:calc(100vh - 140px);}
#page-search.nl .page-title,#page-search.nl .page-subtitle,#page-search.nl .subtabs{order:0;}
#page-search.nl #usResults{order:1;flex:1;}
#page-search.nl #usBar{order:2;position:sticky;bottom:0;margin-top:16px;padding:12px 0 14px;background:linear-gradient(to top,var(--bg) 70%,transparent);max-width:none;}
#page-search.nl #usBar .search-input{max-width:720px;}
@media(max-width:640px){.us-cat-grid{grid-template-columns:1fr;} .us-cat{padding:13px 14px;min-height:70px;} .us-cat-tx b{font-size:15px;} .us-cat-cv{width:44px;height:62px;}}
/* 고전 컬렉션 — 한국/해외 권역 헤더 (데스크톱: 상단 네비 드롭다운으로 선택, 여기엔 현재 권역 표시) */
.cl-locale-head{font-size:20px;font-weight:800;color:var(--text);letter-spacing:-0.6px;margin:6px 0 18px;display:flex;align-items:center;gap:10px;}
.cl-locale-head span{font-size:13px;font-weight:700;color:var(--text-light);background:var(--bg-input);padding:3px 11px;border-radius:14px;}
/* 고전 컬렉션 — 해외/국내 탭 + 유학생 배너 + 언어칩 (디자인 적용 2026-06-24) */
/* 데스크톱: 탭 숨김(상단 네비 호버 드롭다운으로 전환) · 모바일(≤900px): 탭 노출 */
.cl-tabs{display:none;gap:4px;border-bottom:1px solid var(--border);margin-bottom:2px;}
.cl-tab{appearance:none;border:0;background:transparent;font-family:inherit;cursor:pointer;font-weight:800;font-size:19px;color:var(--text-light);padding:12px 18px;position:relative;letter-spacing:-0.5px;text-align:left;}
.cl-tab .en{display:block;font-size:11px;font-weight:700;color:var(--text-light);margin-top:2px;letter-spacing:.03em;}
.cl-tab.on{color:var(--text);}
.cl-tab.on::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:3px;background:var(--gold);border-radius:3px;}
.cl-intro{font-size:13px;color:var(--text-sub);line-height:1.6;margin:16px 2px 2px;}
/* 8/17 사장님 수정요청: 메인 메뉴 4탭(우리 도서관·독서 챌린지·세계고전·International) 상단 설명 2줄 — 윗줄 메인, 아랫줄 보조 */
/* 8/30 사장님: 카테고리마다 붙던 두 줄 안내문 삭제(문구는 보존 — 화면에만 미노출) */
.pg-intro{display:none;margin:6px 2px 22px;line-height:1.55;word-break:keep-all;}
.pg-intro .pi-main{font-size:15px;font-weight:700;color:var(--text);letter-spacing:-0.3px;}
.pg-intro .pi-sub{font-size:13px;color:var(--text-sub);margin-top:3px;letter-spacing:-0.2px;}
@media(max-width:640px){.pg-intro{margin:2px 2px 16px;}.pg-intro .pi-main{font-size:14px;}.pg-intro .pi-sub{font-size:12.5px;}}
body.preview-mode .pg-intro{display:none !important;}
/* International 인트로: 한 줄 소개문만 — 언어 전환은 우상단 헤더 드롭다운 단일화 (2026-07-23) */
.cl-welcome{margin:16px 2px 4px;}
.cl-wel-txt{font-size:13px;color:var(--text-sub);line-height:1.6;}
.cl-wel-txt b{color:var(--text);font-weight:800;}
.cl-wel-hint{display:inline-flex;align-items:center;gap:4px;color:var(--text-light);font-size:12px;font-weight:600;margin-left:6px;}
.cl-wel-hint .icon{width:13px;height:13px;stroke-width:1.8;}
.cl-card .cl-langbadge{position:absolute;top:0;left:0;z-index:2;width:0;height:0;border-style:solid;border-width:24px 24px 0 0;border-color:var(--gold) transparent transparent transparent;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25));}
.cl-card .cl-cardlangs{margin:6px 0 1px;display:flex;gap:4px;flex-wrap:wrap;}
.cl-card .cl-lg{font-size:9.5px;font-weight:700;color:var(--gold);background:rgba(212,169,59,.15);border-radius:5px;padding:2px 6px;}
.cl-card .cl-lg.hl{background:var(--gold);color:#1a1208;}
/* 피드 (다른 학생 한 줄 소감) */
.feed-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;}
.feed-card{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:16px 18px;}
.feed-top{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.feed-ava{width:34px;height:34px;border-radius:50%;background:var(--bg-input);display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;}
.feed-name{font-size:13px;font-weight:800;color:var(--text);}
.feed-sub{font-size:11px;color:var(--text-light);}
.feed-quote{font-size:14px;line-height:1.7;color:var(--text);background:var(--bg-input);border-radius:10px;padding:12px 14px;position:relative;}
.feed-book{display:flex;align-items:center;gap:9px;margin-top:12px;cursor:pointer;}
.feed-book-cv{width:34px;height:46px;border-radius:5px;overflow:hidden;flex-shrink:0;background:var(--bg-input);}
.feed-book-cv img{width:100%;height:100%;object-fit:cover;}
.feed-book-t{font-size:12px;font-weight:700;color:var(--text);}
.feed-book-a{font-size:11px;color:var(--text-sub);}
.book-progress{margin-top:6px;height:3px;background:var(--bg-input);border-radius:2px;overflow:hidden;}
.book-progress-fill{height:100%;background:var(--gold);}
/* === 밀리식 피드 (SNS) === */
.feed-tabs{display:flex;gap:20px;border-bottom:1px solid var(--border);margin:4px 0 14px;}
.feed-tab{font-size:15.5px;font-weight:800;color:var(--text-light);background:none;border:none;padding:9px 2px;cursor:pointer;border-bottom:2.5px solid transparent;margin-bottom:-1px;}
.feed-tab.on{color:var(--text);border-bottom-color:var(--ink);}
.feed-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;}
.feed-chip{font-size:13px;font-weight:700;color:var(--text-sub);background:var(--bg-card);border:1px solid var(--border);border-radius:20px;padding:7px 15px;cursor:pointer;}
/* 8/30 사장님: 폰에서 칩 6개가 두 줄로 갈라져 보기 나빴다 — 한 줄 유지, 넘치면 옆으로 밀어 본다 */
@media(max-width:760px){
  .feed-chips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .feed-chips::-webkit-scrollbar{display:none;}
  .feed-chip{flex:none;}
}
.feed-chip.on{background:var(--ink);color:#fff;border-color:var(--ink);}
.feed-grid{columns:4 280px;column-gap:16px;}
@media(max-width:1100px){.feed-grid{columns:3 260px;}}
@media(max-width:760px){.feed-grid{columns:1;}}
.fc{break-inside:avoid;margin:0 0 16px;background:var(--bg-card);border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:box-shadow .15s,transform .15s;}
/* 내 글 = 골드로 도드라지게 */
.fc.mine{border-color:rgba(212,169,59,.55);box-shadow:0 0 0 1.5px rgba(212,169,59,.32),0 12px 28px -16px rgba(168,128,31,.5);background:linear-gradient(180deg,rgba(212,169,59,.07),var(--bg-card) 42%);}
.fc-mine{font-size:11px;font-weight:800;color:#a8801f;background:linear-gradient(135deg,rgba(212,169,59,.20),rgba(212,169,59,.06));border:1px solid rgba(212,169,59,.42);padding:3px 11px;border-radius:99px;white-space:nowrap;}
body.dark .fc-mine{color:var(--gold);}
.fc:hover{box-shadow:0 10px 26px rgba(40,40,90,.10);transform:translateY(-2px);}
.fc-top{display:flex;align-items:center;gap:9px;padding:14px 16px 4px;}
.fc-ava{width:36px;height:36px;border-radius:50%;background:var(--bg-input);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;cursor:pointer;}
.fc-id{flex:1;min-width:0;cursor:pointer;}
.fc-nm{font-size:13.5px;font-weight:800;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fc-mt{font-size:11px;color:var(--text-light);margin-top:1px;}
.fc-follow{font-size:11.5px;font-weight:800;color:var(--ink);background:var(--primary-bg);border:none;border-radius:8px;padding:6px 11px;cursor:pointer;flex-shrink:0;}
.fc-follow.on{color:var(--text-light);background:var(--bg-input);}
.fc-quote{margin:12px 16px;border-radius:12px;padding:18px 16px;font-size:14.5px;line-height:1.65;color:#2b2b3a;text-align:center;font-weight:600;}
.fc-quote.hl{text-align:left;}
.fc-quote .qm{color:var(--gold);font-weight:800;}
/* 8/30: 다단(columns) 피드 안에서 -webkit-line-clamp가 6번째 줄 윗부분을 반쯤 남김 → 줄높이 배수로 고정 */
.fc-body{padding:2px 16px 8px;font-size:13.5px;line-height:1.7;color:var(--text-sub);overflow:hidden;white-space:pre-wrap;max-height:8.5em;}   /* 8.5em = 1.7 × 5줄 */
.fc-body.open{max-height:none;overflow:visible;}
.fc-more{display:block;margin:0 16px 8px;padding:0;border:0;background:none;color:var(--primary);font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit;}
.fc-bookrow{display:flex;align-items:center;gap:10px;padding:8px 16px 14px;cursor:pointer;}
.fc-cv{width:38px;height:54px;border-radius:5px;overflow:hidden;flex-shrink:0;background:var(--bg-input);display:flex;align-items:center;justify-content:center;font-size:16px;}
.fc-cv img{width:100%;height:100%;object-fit:cover;}
.fc-bi{flex:1;min-width:0;}
.fc-bt{font-size:13px;font-weight:800;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fc-ba{font-size:11.5px;color:var(--text-sub);}
.fc-badge{display:inline-block;font-size:10.5px;font-weight:800;border-radius:6px;padding:3px 8px;color:var(--accent);background:var(--primary-bg);flex-shrink:0;}
body.dark .fc-badge{color:var(--gold);}
.fc-acts{display:flex;align-items:center;border-top:1px solid var(--border);padding:4px 6px;}
.fc-act{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--text-sub);background:none;border:none;padding:9px;border-radius:8px;cursor:pointer;}
.fc-act:hover{background:var(--bg-input);}
.fc-act.liked{color:#e0457b;}
.feed-empty{padding:56px 20px;text-align:center;color:var(--text-light);font-size:13.5px;line-height:1.8;}
/* 학생 프로필(도서 이력) 모달 */
.bxp-ov{position:fixed;inset:0;background:rgba(15,20,35,.5);display:none;z-index:120;align-items:flex-start;justify-content:center;padding:40px 18px;overflow:auto;backdrop-filter:blur(3px);}
.bxp-ov.on{display:flex;}
.bxp{background:var(--bg-card);width:100%;max-width:680px;border-radius:20px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.34);}
.bxp-hd{position:relative;background:linear-gradient(135deg,#1e293b,#334155);color:#fff;padding:24px 24px 20px;}
body.dark .bxp-hd{background:linear-gradient(135deg,#0f172a,#243049);}
.bxp-x{position:absolute;top:14px;right:16px;font-size:24px;color:rgba(255,255,255,.8);cursor:pointer;line-height:1;}
.bxp-av{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;font-size:28px;}
.bxp-nm{font-size:20px;font-weight:800;margin-top:12px;}
.bxp-gr{font-size:12.5px;color:rgba(219,228,255,.8);margin-top:3px;}
.bxp-fl{display:flex;gap:16px;margin-top:10px;font-size:12.5px;color:rgba(219,228,255,.85);}
.bxp-fl b{color:#fff;}
.bxp-followbtn{margin-top:14px;width:100%;background:#fff;color:#1e293b;border:none;border-radius:10px;padding:11px;font-size:14px;font-weight:800;cursor:pointer;}
.bxp-followbtn.on{background:rgba(255,255,255,.18);color:#fff;}
.bxp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);}
.bxp-st{background:var(--bg-card);padding:16px 8px;text-align:center;}
.bxp-st .v{font-size:20px;font-weight:800;color:var(--ink);}
body.dark .bxp-st .v{color:#a5b4fc;}
.bxp-st .l{font-size:11px;color:var(--text-light);margin-top:4px;}
.bxp-sec{font-size:13px;font-weight:800;color:var(--text-sub);padding:18px 22px 8px;}
.bxp-body{max-height:46vh;overflow:auto;padding:0 22px 22px;}
.bxp-row{display:flex;gap:11px;padding:12px 0;border-bottom:1px solid var(--border);}
.bxp-row:last-child{border-bottom:none;}
.bxp-cv{width:40px;height:56px;border-radius:5px;overflow:hidden;flex-shrink:0;background:var(--bg-input);display:flex;align-items:center;justify-content:center;font-size:16px;}
.bxp-cv img{width:100%;height:100%;object-fit:cover;}
.bxp-ri{flex:1;min-width:0;}
.bxp-rt{font-size:13px;font-weight:800;color:var(--text);}
.bxp-rb{font-size:11.5px;color:var(--accent);font-weight:700;margin:2px 0 4px;}
.bxp-rx{font-size:13px;line-height:1.6;color:var(--text-sub);}

/* 책 표지 그라데이션 */
.style-1{background:linear-gradient(160deg,#0d1b2a,#1b2838 60%,#0a1628);color:#fff;}
.style-2{background:linear-gradient(160deg,#4a1c2e,#7d2942 60%,#4a1c2e);color:#fff;}
.style-3{background:linear-gradient(160deg,#1a3a2e,#2d6a4f 60%,#1a3a2e);color:#fff;}
.style-4{background:linear-gradient(160deg,#3d2914,#7d4a1c 60%,#3d2914);color:#fff;}
.style-5{background:linear-gradient(160deg,#2a1a3a,#5e3a8a 60%,#2a1a3a);color:#fff;}
.style-6{background:linear-gradient(160deg,#1c3a4a,#3a6ea5 60%,#1c3a4a);color:#fff;}
.style-7{background:linear-gradient(160deg,#3a2018,#8b4a3c 60%,#3a2018);color:#fff;}
.style-8{background:linear-gradient(160deg,#0f2a3a,#1a4a6e 60%,#0f2a3a);color:#fff;}

/* ═══════════════════════════════════════════════════════════
   7. 홈 풀화면 허브 + 내서재 Quest Map
   ═══════════════════════════════════════════════════════════ */
.home-hub-wrap{
  display:flex;flex-direction:column;align-items:center;gap:24px;
  padding:8px 0 16px;
}
.home-hub-full{
  min-height:calc(100vh - var(--header-h) - 80px);justify-content:center;
}

/* 중앙 통합 카드 — 학생 + 이번 주 챌린지 */
.cc-head{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;cursor:pointer;}
.cc-name{font-size:14px;font-weight:800;letter-spacing:-0.4px;}
.cc-stat{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;opacity:0.92;background:rgba(255,255,255,0.16);padding:3px 8px;border-radius:11px;}
.cc-flame-ic,.cc-cta-ic{width:13px;height:13px;stroke:currentColor;stroke-width:2.2;fill:none;vertical-align:middle;}
.cc-week{margin-top:13px;font-size:11px;font-weight:700;opacity:0.85;letter-spacing:-0.2px;}
.cc-book{font-size:22px;font-weight:800;letter-spacing:-0.6px;margin-top:2px;line-height:1.15;}
.cc-author{font-size:11.5px;opacity:0.82;margin-top:2px;}
.cc-progress{height:7px;background:rgba(255,255,255,0.22);border-radius:6px;overflow:hidden;margin:12px 0 6px;}
.cc-progress-fill{height:100%;background:var(--gold);border-radius:6px;transition:width 0.4s;}
.cc-deadline{font-size:11px;opacity:0.92;margin-bottom:13px;}
.cc-deadline b{color:var(--gold);}
body.dark .cc-deadline b{color:#7a5a10;}
.cc-cta{width:100%;padding:11px;background:var(--gold);color:#3a2b00;border-radius:11px;font-size:13.5px;font-weight:800;letter-spacing:-0.3px;display:flex;align-items:center;justify-content:center;gap:6px;transition:filter 0.15s;}
.cc-cta:hover{filter:brightness(1.07);}
.cc-others{margin-top:9px;font-size:11px;font-weight:600;opacity:0.85;cursor:pointer;text-align:center;}
.cc-others:hover{opacity:1;text-decoration:underline;}

/* 프로그램 모달 */
.modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,0.55);z-index:200;display:none;align-items:center;justify-content:center;backdrop-filter:blur(6px);padding:24px;}
.modal-overlay.open{display:flex;}
.modal-shell{width:100%;max-width:900px;max-height:90vh;background:var(--bg-card);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 80px rgba(0,0,0,0.4);}
.modal-header{padding:18px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:var(--bg-input);}
.modal-body{padding:24px;overflow-y:auto;flex:1;}
.home-hub{position:relative;width:min(95%,780px);aspect-ratio:800/700;max-height:65vh;}
.home-hub-center{
  width:268px!important;height:auto!important;min-height:0!important;
  border-radius:22px!important;padding:18px 20px!important;
  align-items:stretch!important;justify-content:flex-start!important;text-align:left!important;
  box-shadow:0 0 50px rgba(26,41,66,0.18),0 16px 40px rgba(26,41,66,0.22)!important;
}
body.dark .home-hub-center{box-shadow:0 0 50px rgba(0,0,0,0.3),0 16px 40px rgba(0,0,0,0.35)!important;}
.home-search-box{width:min(85%,560px);position:relative;}
.home-search-input{width:100%;padding:15px 22px 15px 50px!important;border-radius:30px!important;box-shadow:0 4px 16px rgba(26,41,66,0.08);}
.home-search-hint{margin-top:8px;text-align:center;font-size:11px;color:var(--text-light);}

.hub-visual{position:relative;width:100%;height:100%;max-width:580px;}
.hub-lines{position:absolute;inset:0;pointer-events:none;}
.hub-line{stroke:#cbd5e1;stroke-width:1;opacity:0.5;}
body.dark .hub-line{stroke:#475569;}
.hub-center{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:140px;height:140px;border-radius:32px;
  background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  z-index:5;cursor:pointer;padding:12px;text-align:center;
  box-shadow:0 0 40px rgba(26,41,66,0.15),0 12px 28px rgba(26,41,66,0.15);
}
body.dark .hub-center{background:linear-gradient(135deg,var(--gold),#b08e30);color:#0f172a;}
.hub-center-icon{margin-bottom:4px;display:flex;align-items:center;justify-content:center;}
.hub-center-icon .icon{width:24px;height:24px;stroke-width:1.6;}
.hub-center-name{font-size:13px;font-weight:700;letter-spacing:-0.4px;margin-top:1px;}
.hub-center-sub{font-size:11px;font-weight:500;opacity:0.85;letter-spacing:-0.2px;}
.hub-center-score{font-size:22px;font-weight:800;color:var(--gold);margin-top:4px;letter-spacing:-0.5px;font-variant-numeric:tabular-nums;}
body.dark .hub-center-score{color:#1a2942;}
.hub-center-streak{font-size:10.5px;margin-top:3px;opacity:0.85;font-weight:500;display:flex;align-items:center;justify-content:center;gap:3px;}

.hub-node{position:absolute;z-index:4;transform:translate(-50%,-50%) scale(0);transition:transform 0.35s cubic-bezier(0.34,1.56,0.64,1);cursor:pointer;}
.hub-node.appear{transform:translate(-50%,-50%) scale(1);}
.hub-node-inner{
  background:var(--bg-card);border:1px solid rgba(0,0,0,0.06);
  border-radius:18px;padding:12px 20px;text-align:center;white-space:nowrap;min-width:104px;
  box-shadow:0 1px 2px rgba(0,0,0,0.04),0 8px 24px rgba(0,0,0,0.06),0 24px 48px rgba(0,0,0,0.04);
  transition:all 0.3s;position:relative;
}
body.dark .hub-node-inner{border-color:rgba(255,255,255,0.08);}
.hub-node:hover .hub-node-inner{border-color:rgba(26,41,66,0.4);transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,0.12);}
.hub-node-icon{display:flex;align-items:center;justify-content:center;margin-bottom:4px;color:var(--primary);}
body.dark .hub-node-icon{color:var(--gold);}
.hub-node-icon .icon{width:22px;height:22px;}
.hub-node-label{font-size:12.5px;font-weight:600;color:var(--text);letter-spacing:-0.3px;}
.hub-node-badge{
  position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;padding:0 6px;
  border-radius:10px;background:var(--gold);color:var(--primary);
  font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--bg-card);
}
.pulse-head{fill:#fff;display:none;filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 10px #d4a93b);}
.pulse-t1{fill:#d4a93b;display:none;}
.pulse-t2{fill:#1a2942;display:none;}
.pulse-t3{fill:rgba(26,41,66,0.5);display:none;}
.pulse-head.on{display:block;opacity:1;}
.pulse-t1.on{display:block;opacity:0.7;}
.pulse-t2.on{display:block;opacity:0.4;}
.pulse-t3.on{display:block;opacity:0.2;}

/* Quest Map 12슬롯 */
.quest-map{background:var(--bg-card);border:1px solid var(--border);border-radius:18px;padding:24px;}
.quest-map-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.quest-map-title{font-size:16px;font-weight:800;}
.quest-map-progress{font-size:12px;color:var(--text-sub);}
.quest-map-bar{height:8px;background:var(--bg-input);border-radius:4px;overflow:hidden;margin-bottom:20px;}
.quest-map-bar-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--accent));border-radius:4px;transition:width 0.4s;}
/* Quest Map — 챌린지 그룹(다중) */
.qg-block{margin-bottom:28px;}
.qg-block:last-child{margin-bottom:0;}
.qg-block.past{opacity:.72;}
.qg-section{font-size:13px;font-weight:800;color:var(--text-sub);margin:34px 0 14px;padding-top:20px;border-top:1px dashed var(--border);}
.qg-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:11px;}
.qg-title{font-size:15px;font-weight:800;}
.qg-meta{font-size:12px;color:var(--text-sub);display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.qg-quit{padding:4px 12px;border-radius:8px;border:1px solid var(--border);background:none;color:var(--text-light);cursor:pointer;font-size:11.5px;font-weight:600;}
.qg-quit:hover{border-color:var(--primary);color:var(--primary);}
.qg-bar{height:7px;background:var(--bg-input);border-radius:4px;overflow:hidden;margin-bottom:16px;}
.qg-bar-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--accent));border-radius:4px;transition:width .4s;}
.qg-note{margin-top:14px;padding:12px 16px;background:var(--bg-input);border-radius:10px;font-size:12.5px;line-height:1.7;color:var(--text-sub);}
.qg-empty{text-align:center;color:var(--text-light);font-size:13px;line-height:1.9;padding:34px 12px;background:var(--bg-input);border-radius:12px;}
.quest-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.quest-grid-wide{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:14px;}          /* 책 칸 고정 크기 + 왼쪽 정렬(1권이어도 휑하지 않게) */
.quest-grid-wide .quest-slot{aspect-ratio:auto;flex:0 0 200px;max-width:200px;}          /* 표지+통계는 내용 높이로, 칸 폭 고정 */
@media (max-width:480px){ .quest-grid-wide .quest-slot{flex:0 0 calc(50% - 7px);max-width:none;} }  /* 폰에선 2열 */
.quest-slot{
  aspect-ratio:1;border-radius:12px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:8px;
  cursor:pointer;transition:all 0.2s;font-size:11px;font-weight:700;
}
.quest-slot.locked{background:var(--bg-input);color:var(--text-light);border:1.5px dashed var(--border);}
.quest-slot.available{background:rgba(58,110,165,0.1);color:var(--available);border:2px solid var(--available);box-shadow:0 0 0 3px rgba(58,110,165,0.12);}
.quest-slot.completed{background:linear-gradient(135deg,var(--gold),#b08e30);color:#fff;border:none;}
.quest-slot:hover{transform:scale(1.04);}
.quest-slot-icon{font-size:18px;margin-bottom:2px;}
.quest-slot-num{font-size:10px;opacity:0.7;}
.quest-slot-book{font-size:11px;line-height:1.2;margin-top:2px;}
/* Quest 슬롯 하단 통계 — 어두운 반투명 패널 + 흰 글씨(슬롯 색 무관 항상 또렷) + 진행 막대 */
.qs-stats{width:100%;box-sizing:border-box;margin-top:7px;background:rgba(0,0,0,.24);border-radius:10px;padding:8px 11px;color:#fff;font-size:10.5px;line-height:1.4;}
.qs-bar-row{display:flex;align-items:center;gap:6px;}
.qs-k{font-weight:700;opacity:.9;}
.qs-bar{flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.28);overflow:hidden;}
.qs-bar-fill{height:100%;background:#fde68a;border-radius:3px;transition:width .4s;}
.qs-v{font-weight:800;font-variant-numeric:tabular-nums;min-width:30px;text-align:right;}
.qs-quiz{margin-top:6px;font-weight:700;}
.qs-quiz b{color:#fde68a;}
.qs-empty{font-size:11px;opacity:.85;}

/* ═══════════════════════════════════════════════════════════
   8. 점수 카드 / 통계
   ═══════════════════════════════════════════════════════════ */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:28px;}
.stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:18px;text-align:center;}
.stat-num{font-size:24px;font-weight:900;color:var(--primary);}
body.dark .stat-num{color:var(--gold);}
.stat-label{font-size:11px;color:var(--text-sub);margin-top:4px;}

/* 뱃지 */
.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:14px;}
.badge-card{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:16px;text-align:center;transition:transform .15s,box-shadow .15s,border-color .15s;cursor:default;}
.badge-card:not(.locked):hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(26,30,55,.10);border-color:var(--primary);}
.badge-card:not(.locked):hover .badge-icon{transform:scale(1.12);}
.badge-icon{transition:transform .15s;}
.badge-card.locked{opacity:0.35;}
.badge-card.locked:hover{opacity:.5;}
.badge-icon{font-size:32px;margin-bottom:6px;}
.badge-name{font-size:12px;font-weight:700;}
.badge-desc{font-size:10px;color:var(--text-light);margin-top:2px;}

/* (8/29 별 포인트 폐지 — 리더보드 CSS 삭제) */

/* 사서 대시보드 (?page=dashboard) */
.dk-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:20px;}
.dk-kpi{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:16px 12px;text-align:center;}
.dk-kpi-emo{font-size:22px;margin-bottom:6px;}
.dk-kpi-val{font-size:22px;font-weight:900;color:var(--text);line-height:1.1;}
.dk-kpi-val .dk-u{font-size:12px;font-weight:700;color:var(--text-light);margin-left:1px;}
.dk-kpi-lab{font-size:11.5px;color:var(--text-sub);margin-top:5px;font-weight:600;}
.dk-card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:16px 18px;margin-bottom:18px;}
.dk-h{font-size:15px;font-weight:800;margin-bottom:14px;}
.dk-h .dk-dim{font-size:12px;font-weight:600;}
.dk-dim{color:var(--text-light);}
.dk-twrap{overflow-x:auto;}
.dk-table{width:100%;border-collapse:collapse;font-size:13px;min-width:560px;}
.dk-table th{text-align:left;font-size:11.5px;font-weight:700;color:var(--text-sub);padding:0 10px 10px;border-bottom:1px solid var(--border);white-space:nowrap;}
.dk-table td{padding:11px 10px;border-bottom:1px solid var(--border);vertical-align:middle;}
.dk-table tbody tr:last-child td{border-bottom:none;}
.dk-name{font-weight:700;white-space:nowrap;}
.dk-emo{margin-right:6px;}
.dk-dept{display:block;font-size:10.5px;color:var(--text-light);font-weight:500;margin-top:1px;}
.dk-num{white-space:nowrap;}
.dk-score{font-weight:900;color:var(--primary);}
.dk-bar{display:inline-block;width:54px;height:6px;border-radius:4px;background:var(--border);overflow:hidden;vertical-align:middle;margin-right:6px;}
.dk-bar span{display:block;height:100%;background:var(--primary);border-radius:4px;}
.dk-books{display:flex;flex-direction:column;gap:8px;}
.dk-book{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 12px;background:var(--bg-input);border-radius:10px;}
.dk-book-t{font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dk-book-m{font-size:11.5px;color:var(--text-sub);white-space:nowrap;flex-shrink:0;}
.dk-note{font-size:12px;color:var(--text-sub);line-height:1.7;background:var(--bg-input);border-radius:12px;padding:13px 15px;}
@media(max-width:760px){
  .dk-kpis{grid-template-columns:repeat(2,1fr);}
  .dk-kpi:last-child{grid-column:span 2;}
}

/* ═══════════════════════════════════════════════════════════
   9. 커뮤니티 서브탭
   ═══════════════════════════════════════════════════════════ */
.subtabs{display:flex;gap:6px;border-bottom:1px solid var(--border);margin-bottom:24px;}
.subtab{padding:12px 18px;font-size:14px;font-weight:700;color:var(--text-sub);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;}
.subtab.active{color:var(--primary);border-bottom-color:var(--primary);}

/* AI 추천 패널 — 공들인 버전 */
.rec-panel{max-width:840px;margin:0 auto 28px;background:var(--bg-card);border:1px solid var(--border);border-radius:20px;overflow:hidden;box-shadow:0 8px 30px rgba(26,41,66,0.07);}
body.dark .rec-panel{box-shadow:0 8px 30px rgba(0,0,0,0.25);}
/* 히어로 헤더 */
.rec-hero{display:flex;align-items:center;gap:16px;padding:24px 28px;background:linear-gradient(120deg,var(--primary),var(--accent));color:#fff;position:relative;overflow:hidden;}
body.dark .rec-hero{background:linear-gradient(120deg,#1e293b,#334155);}
.rec-hero::after{content:"";position:absolute;right:-40px;top:-50px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,0.08);}
.rec-hero-badge{flex:0 0 52px;height:52px;border-radius:16px;background:rgba(255,255,255,0.18);display:flex;align-items:center;justify-content:center;}
.rec-hero-badge .icon{width:28px;height:28px;color:var(--gold);}
.rec-hero-title{font-size:20px;font-weight:800;letter-spacing:-0.6px;}
.rec-hero-sub{font-size:12.5px;opacity:0.9;margin-top:3px;letter-spacing:-0.2px;}
/* 본문 스텝 */
.rec-body{padding:8px 28px 26px;}
.rec-step{padding:18px 0;border-bottom:1px solid var(--border);}
.rec-step:last-of-type{border-bottom:none;}
.rec-step-head{display:flex;align-items:center;gap:9px;margin-bottom:13px;}
.rec-step-num{width:22px;height:22px;border-radius:50%;background:var(--primary-bg);color:var(--primary);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;}
.rec-step-title{font-size:14px;font-weight:800;color:var(--text);letter-spacing:-0.3px;}
.rec-step-hint{font-size:11px;color:var(--text-light);font-weight:600;}
.rec-chips{display:flex;flex-wrap:wrap;gap:9px;padding-left:31px;}
.rec-chip{padding:9px 16px;border-radius:11px;border:1.5px solid var(--border);background:var(--bg);font-size:13px;font-weight:700;color:var(--text-sub);cursor:pointer;transition:all 0.15s;display:inline-flex;align-items:center;gap:6px;}
.rec-chip:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-1px);}
.rec-chip.on{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 4px 12px rgba(26,41,66,0.18);}
.rec-chip.on::before{content:"✓";font-size:11px;font-weight:900;}
/* 세그먼트 (권역) */
.rec-seg{display:inline-flex;padding-left:31px;}
.rec-seg-inner{display:inline-flex;background:var(--bg-input);border-radius:11px;padding:3px;}
.rec-seg-item{padding:8px 18px;border-radius:9px;font-size:13px;font-weight:700;color:var(--text-sub);cursor:pointer;transition:all 0.15s;}
.rec-seg-item.on{background:var(--bg-card);color:var(--primary);box-shadow:0 1px 4px rgba(0,0,0,0.08);}
/* CTA */
.rec-go{margin:20px 0 0;width:100%;padding:15px;background:linear-gradient(120deg,var(--primary),var(--accent));color:#fff;border-radius:13px;font-size:15px;font-weight:800;letter-spacing:-0.3px;display:flex;align-items:center;justify-content:center;gap:8px;transition:transform 0.15s,box-shadow 0.15s;box-shadow:0 8px 22px rgba(26,41,66,0.22);}
.rec-go:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(26,41,66,0.3);}
body.dark .rec-go{background:linear-gradient(120deg,var(--gold),#b08e30);color:#0f172a;}
.rec-go .icon{width:18px;height:18px;color:var(--gold);}
body.dark .rec-go .icon{color:#0f172a;}
/* 결과 */
.rec-results{margin-top:8px;}
.rec-results-head{font-size:15px;font-weight:800;color:var(--text);margin-bottom:6px;display:flex;align-items:center;gap:7px;}
.rec-results-head .icon{color:var(--gold);}
.rec-results-sub{font-size:12.5px;color:var(--text-light);margin-bottom:18px;line-height:1.5;}
.rec-card-cta{margin-top:8px;width:100%;padding:9px;background:var(--gold);color:#3a2b00;border-radius:9px;font-size:12.5px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:5px;border:none;}
.rec-card-cta:hover{filter:brightness(1.06);}
.rec-empty{padding:24px;text-align:center;color:var(--text-light);font-size:13px;line-height:1.7;}
@media(max-width:600px){.rec-hero,.rec-body{padding-left:18px;padding-right:18px;}.rec-chips,.rec-seg{padding-left:0;}}
.list-card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:18px 22px;margin-bottom:10px;cursor:pointer;transition:all 0.15s;}
.list-card:hover{border-color:var(--primary);}
.list-card-head{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.list-card-tag{font-size:10px;font-weight:800;padding:3px 8px;border-radius:6px;background:var(--primary-bg);color:var(--primary);}
.list-card-tag.urgent{background:#fee2e2;color:#dc2626;}
.list-card-title{font-size:14px;font-weight:700;flex:1;}
.list-card-meta{font-size:11px;color:var(--text-light);display:flex;gap:14px;}
.lc-go{margin-left:auto;color:var(--text-light);font-size:18px;}
.acc-caret{margin-left:auto;color:var(--text-light);font-size:13px;transition:transform .2s;}
.list-card.open .acc-caret{transform:rotate(180deg);}
.acc-body{display:none;font-size:14px;line-height:1.85;color:var(--text);white-space:pre-wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--border);}
.list-card.open .acc-body{display:block;}
/* 리치 본문 렌더(공지/커뮤니티 — 관리자 에디터로 작성한 HTML) */
.rt-view{white-space:normal;word-break:break-word}
.rt-view p{margin:0 0 9px}
.rt-view h3{font-size:18px;font-weight:800;margin:14px 0 7px;color:var(--text)}
.rt-view h4{font-size:15px;font-weight:700;margin:10px 0 5px;color:var(--text)}
.rt-view ul,.rt-view ol{padding-left:22px;margin:7px 0}
.rt-view li{margin:3px 0}
.rt-view blockquote{border-left:3px solid var(--gold);margin:9px 0;padding:5px 14px;color:var(--text-sub);background:rgba(212,169,59,.08);border-radius:0 6px 6px 0}
.rt-view a{color:var(--accent);text-decoration:underline;word-break:break-all}
.rt-view img{max-width:100%;height:auto;border-radius:10px;margin:8px 0;display:block}
.rt-view hr{border:none;border-top:1px solid var(--border);margin:14px 0}
.rt-view table.rt-table{border-collapse:collapse;width:100%;margin:10px 0;font-size:13.5px}
.rt-view .rt-table th,.rt-view .rt-table td{border:1px solid var(--border);padding:8px 10px;text-align:left;vertical-align:top;min-width:40px}
.rt-view .rt-table th{background:var(--bg);font-weight:800;color:var(--text)}
.rt-view .rt-embed{position:relative;padding-bottom:56.25%;height:0;margin:10px 0;border-radius:10px;overflow:hidden;background:#000}
.rt-view .rt-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.rt-view a.rt-file{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);border-radius:10px;padding:10px 14px 10px 36px;margin:6px 0;background:var(--bg-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%233a6ea5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E") no-repeat 12px center;text-decoration:none;color:var(--text);font-size:13px;font-weight:700}
/* 커뮤니티 상세 모달 (독서 프로그램) */
#commModal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;z-index:9000;padding:20px;}
#commModal.on{display:flex;}
.cmm{background:var(--bg-card);border-radius:16px;max-width:520px;width:100%;padding:24px;max-height:85vh;overflow:auto;position:relative;}
.cmm-x{position:absolute;top:14px;right:16px;font-size:24px;color:var(--text-light);cursor:pointer;line-height:1;}

/* 검증 서평 카드 */
.rv-card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:16px 18px;margin-bottom:10px;display:flex;gap:13px;align-items:flex-start;}
.rv-cv{width:44px;height:62px;flex:0 0 44px;border-radius:6px;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:17px;background:var(--bg-input);}
.rv-cv img{width:100%;height:100%;object-fit:cover;}
.rv-cv.cls{background:linear-gradient(150deg,#6f5836 0%,#4a3a25 100%);color:#f3e9d8;font-size:8.5px;font-weight:800;text-align:center;padding:5px 4px;line-height:1.25;letter-spacing:-.3px;}
.rv-main{flex:1;min-width:0;}
.rv-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:7px;}
.rv-who{font-size:13.5px;font-weight:700;color:var(--text);}
.rv-badge{font-size:10px;font-weight:800;padding:2px 8px;border-radius:20px;background:rgba(46,125,87,.13);color:#1d6b48;}
.rv-badge.rv-reading{background:var(--bg-input);color:var(--text-light);}
.rv-lang{font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px;background:var(--primary-bg);color:var(--primary);}
.rv-stars{margin-left:auto;font-size:13px;letter-spacing:1px;}
.rv-book{font-size:12px;color:var(--text-light);margin-bottom:4px;}
.rv-body{font-size:13.5px;line-height:1.7;color:var(--text-sub);white-space:pre-wrap;}
.rv-foot{margin-top:9px;}
.rv-like{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--text-light);cursor:pointer;padding:3px 10px;border:1px solid var(--border);border-radius:20px;}
.rv-like:hover{border-color:var(--primary);color:var(--primary);}
.rv-empty{text-align:center;color:var(--text-light);font-size:13px;padding:28px 0;grid-column:1/-1;}
.rv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:12px;}
.rv-grid .rv-card{margin-bottom:0;}
.rv-writebtn{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#fff;background:var(--primary);border:0;border-radius:10px;padding:10px 16px;cursor:pointer;}
/* 서평 작성 모달 */
#rvModal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;z-index:9000;padding:20px;}
#rvModal.on{display:flex;}
.rvm{background:var(--bg-card);border-radius:16px;max-width:480px;width:100%;padding:22px 22px 18px;}
.rvm h3{font-size:17px;margin:0 0 4px;}
.rvm .sub{font-size:12.5px;color:var(--text-light);margin-bottom:14px;}
.rvm-stars{font-size:30px;letter-spacing:6px;cursor:pointer;margin-bottom:12px;user-select:none;}
.rvm-stars span{color:#d8d8d8;}
.rvm-stars span.on{color:#f5a623;}
.rvm textarea{width:100%;border:1px solid var(--border);border-radius:10px;padding:12px;font-family:inherit;font-size:14px;resize:vertical;min-height:110px;box-sizing:border-box;}
.rvm-chk{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-sub);margin:12px 0;}
.rvm-foot{display:flex;gap:10px;justify-content:flex-end;margin-top:6px;}

/* 학기 결산 공유 카드 */
.summary-share{background:linear-gradient(135deg,#1e2a4a 0%,#2d3a5e 55%,#3b2f6e 100%);border-radius:18px;padding:22px 24px;color:#fff;position:relative;overflow:hidden;}
.ss-kicker{font-size:11px;letter-spacing:2px;color:#c9b88a;font-weight:700;}
.ss-name{font-size:20px;font-weight:800;margin:2px 0 2px;}
.ss-period{font-size:12px;color:#c4ccdd;margin-bottom:16px;}
.ss-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.ss-cell{background:rgba(255,255,255,.08);border-radius:12px;padding:12px 10px;text-align:center;}
.ss-num{font-size:24px;font-weight:800;font-family:Georgia,serif;color:#fff;}
.ss-num .u{font-size:13px;color:#c9b88a;margin-left:1px;}
.ss-lbl{font-size:11px;color:#c4ccdd;margin-top:3px;}
.ss-foot{display:flex;align-items:center;justify-content:space-between;margin-top:16px;}
.ss-brand{font-family:Georgia,serif;font-weight:700;font-size:14px;color:#fff;}
.ss-brand span{color:#e8c66a;}
.ss-share{background:#fff;color:#1e2a4a;border:0;border-radius:10px;padding:9px 16px;font-weight:800;font-size:13px;cursor:pointer;}
@media(max-width:560px){.ss-grid{grid-template-columns:repeat(2,1fr);}}
/* 독서 데이터 차트 (StoryGraph식) */
.read-chart{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media(max-width:760px){.read-chart{grid-template-columns:1fr;}}
.rc-col .rc-h{font-size:13px;font-weight:800;color:var(--text);margin-bottom:10px;}
.rc-row{display:flex;align-items:center;gap:8px;margin-bottom:7px;}
.rc-k{width:80px;font-size:12px;color:var(--text-sub);text-align:right;flex:0 0 80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rc-bar{flex:1;height:14px;background:var(--bg-input);border-radius:7px;overflow:hidden;}
.rc-fill{height:100%;border-radius:7px;min-width:3px;transition:width .5s;}
.rc-v{width:22px;font-size:12px;color:var(--text-light);text-align:left;flex:0 0 22px;}
/* 나의 독서 별자리 */
.sky{position:relative;border-radius:18px;overflow:hidden;background:radial-gradient(130% 100% at 50% -10%,#2a3766 0,#1a2240 50%,#0d1120 100%);box-shadow:inset 0 0 80px rgba(0,0,0,.4), 0 6px 16px -4px rgba(20,25,45,.22), 0 22px 48px -16px rgba(20,25,45,.38);}
.sky-svg{width:100%;height:360px;display:block;}
@media(max-width:560px){.sky-svg{height:300px;}}
.sky-star{cursor:pointer;}
.sky-star .st-core{animation:twk 3.2s ease-in-out infinite;animation-delay:var(--d);transform-origin:center;}
@keyframes twk{0%,100%{opacity:1}50%{opacity:.4}}
.sky-star:hover .st-core{filter:drop-shadow(0 0 7px #fff);}
.sky-cap{position:absolute;left:20px;bottom:16px;color:#dbe4ff;font-size:13px;text-shadow:0 1px 4px rgba(0,0,0,.5);}
.sky-cap b{color:#ffd479;font-size:17px;}
.sky-legend{position:absolute;right:14px;top:12px;display:flex;flex-wrap:wrap;gap:7px;justify-content:flex-end;max-width:62%;}
.sky-lg{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:#c4ccdd;background:rgba(255,255,255,.07);padding:3px 9px;border-radius:20px;backdrop-filter:blur(2px);}
.sky-lg i{width:8px;height:8px;border-radius:50%;display:inline-block;}
.sky-title{position:absolute;left:20px;top:14px;color:#ffd479;font-weight:800;font-size:15px;text-shadow:0 1px 5px rgba(0,0,0,.55);}
.sky-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#dbe4ff;font-size:13.5px;line-height:1.8;text-shadow:0 1px 5px rgba(0,0,0,.5);padding:0 20px;}
.sky-empty b{color:#ffd479;}
.sky-empty button{margin-top:16px;background:rgba(255,212,121,.16);border:1px solid rgba(255,212,121,.5);color:#ffd479;border-radius:10px;padding:10px 18px;font-size:13px;font-weight:800;cursor:pointer;backdrop-filter:blur(2px);transition:background .15s;}
.sky-empty button:hover{background:rgba(255,212,121,.28);}
/* 슈퍼래티브 결산 */
.supl{display:flex;gap:12px;flex-wrap:wrap;}
.supl-c{flex:1;min-width:150px;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:12px 15px;transition:transform .15s,box-shadow .15s;}
.supl-c:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(26,30,55,.08);}
.supl-k{font-size:11px;color:var(--text-light);}
.supl-v{font-size:15px;font-weight:800;color:var(--text);margin-top:3px;line-height:1.3;}
/* 독서 스트릭 캘린더(잔디) */
.sc-grid{display:flex;gap:3px;overflow-x:auto;padding:2px 0;}
.sc-week{display:flex;flex-direction:column;gap:3px;flex:0 0 auto;}
.sc-day{width:13px;height:13px;border-radius:3px;background:var(--bg-input);}
.sc-day.l1{background:#cfe8d6;}.sc-day.l2{background:#86cfa0;}.sc-day.l3{background:#3fae6e;}.sc-day.l4{background:#1d6b48;}
body.dark .sc-day{background:rgba(255,255,255,.06);}
.sc-legend{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--text-light);margin-top:10px;}
.sc-legend .sc-day{width:12px;height:12px;}
/* 책장 히어로 (3D 세워진 책 + 선반) — 공용 컴포넌트 */
/* 실험: 잡지(에디토리얼) 스타일 — 둥근 카드 박스 대신 페이지에 그대로 얹혀 숨쉬는 레이아웃, 타이포로 위계 표현 */
.shelf-hero{position:relative;background:none;border-radius:0;padding:8px 0 0;overflow:visible;margin-bottom:16px;border-bottom:1px solid var(--border);padding-bottom:36px;}
.sh-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:48px;align-items:center;}
/* 실험: 브라우저 전체 폭이 아니라 .page(사이드 패널 뺀 실제 콘텐츠 폭) 기준으로 판단 — 패널이 있는 페이지에서 좁아 보이는데도 2단 유지되던 문제 수정 */
@container (max-width:680px){.sh-grid{grid-template-columns:1fr;gap:20px;}.sh-stage{min-height:300px;}}
.sh-kicker{font-size:11.5px;letter-spacing:3.5px;font-weight:800;color:#b8902f;text-transform:uppercase;padding-bottom:12px;border-bottom:1px solid rgba(184,144,47,.35);display:inline-block;}
.sh-title{font-family:Georgia,'Noto Serif KR',serif;font-weight:700;font-size:52px;line-height:1.08;letter-spacing:-.5px;color:#2a2118;margin:20px 0 10px;}
body.dark .sh-title{color:#f1ece2;}
.sh-sub{font-size:14px;color:#7a6b54;margin-bottom:20px;}
body.dark .sh-sub{color:#b9c2d8;}
.sh-quote{font-family:Georgia,'Noto Serif KR',serif;font-style:italic;font-size:16.5px;line-height:1.65;color:#5d5240;max-width:440px;}
body.dark .sh-quote{color:#cdd5e6;}
.sh-quote span{color:#a08b63;font-weight:700;font-style:normal;}
.sh-meta{display:flex;gap:16px;margin-top:14px;font-size:12.5px;color:#8a7a5f;font-weight:700;}
.sh-btn{margin-top:24px;background:none;color:#2a2118;border:0;border-bottom:1.5px solid #2a2118;border-radius:0;padding:0 0 3px;font-family:inherit;font-weight:700;font-size:13.5px;cursor:pointer;transition:.15s;}
.sh-btn:hover{opacity:.6;}
body.dark .sh-btn{color:#f1ece2;border-bottom-color:#f1ece2;}
.sh-stage{position:relative;display:flex;align-items:flex-end;justify-content:center;min-height:360px;padding-bottom:32px;}
.sh-side{position:absolute;left:6px;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;font-size:11px;letter-spacing:3px;color:#ad9c7c;font-weight:700;}
.book3d{position:relative;z-index:2;transform:perspective(1600px) rotateY(-20deg);filter:drop-shadow(16px 22px 22px rgba(50,38,24,.42));cursor:pointer;transition:transform .4s ease;}
.book3d:hover{transform:perspective(1600px) rotateY(-10deg);}
.book3d .book-cover{width:176px;height:258px;border-radius:3px 8px 8px 3px;}
.book3d .book-cover img{width:100%;height:100%;object-fit:cover;}
.book3d::before{content:"";position:absolute;left:0;top:0;bottom:0;width:15px;background:linear-gradient(90deg,rgba(0,0,0,.30),rgba(0,0,0,0));border-radius:3px 0 0 3px;z-index:3;pointer-events:none;}
.book3d::after{content:"";position:absolute;top:4px;bottom:4px;right:-3px;width:7px;background:repeating-linear-gradient(90deg,#efe7d6,#efe7d6 1px,#cfc1a6 2px);border-radius:0 2px 2px 0;}
.sh-shadow{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);width:150px;height:16px;background:radial-gradient(ellipse,rgba(40,30,15,.38),transparent 70%);filter:blur(3px);z-index:1;}
.shelf{position:absolute;left:5%;right:5%;bottom:14px;height:14px;background:linear-gradient(#efe6d3,#d3c4a6);border-radius:3px;box-shadow:0 14px 22px -10px rgba(60,45,25,.4),inset 0 2px 0 rgba(255,255,255,.55);}
body.dark .shelf{background:linear-gradient(#2b3450,#1c2238);box-shadow:0 14px 22px -10px rgba(0,0,0,.5),inset 0 2px 0 rgba(255,255,255,.08);}
/* 모바일: 사서 추천 히어로 컴팩트 — PC 잡지 스타일이 폰에선 두 화면을 넘어가서, 한 화면 안에 들어오게 압축 */
@media(max-width:600px){
  .shelf-hero{padding-bottom:20px;margin-bottom:10px;}
  .sh-grid{gap:8px;}
  .sh-kicker{font-size:10.5px;letter-spacing:2.5px;padding-bottom:8px;}
  .sh-title{font-size:26px;line-height:1.3;letter-spacing:-.3px;margin:12px 0 6px;word-break:keep-all;}
  .sh-sub{margin-bottom:10px;font-size:13px;}
  .sh-quote{font-size:13.5px;line-height:1.55;}
  .sh-meta{margin-top:10px;gap:12px;font-size:12px;}
  .sh-btn{margin-top:14px;}
  .sh-stage{min-height:200px;padding-bottom:22px;}
  .sh-side{display:none;}   /* 세로 장식 글씨 — 폰에선 공간만 차지 */
  .book3d .book-cover{width:118px;height:173px;}
  .sh-shadow{width:100px;bottom:16px;}
  .ml{gap:26px;}            /* 섹션 사이 간격 42→26 */
  .ml-h-t{font-size:18px;}
}

/* ═══════════════════════════════════════════════════════════
   10. 도서 상세 페이지
   ═══════════════════════════════════════════════════════════ */
.detail-layout{display:grid;grid-template-columns:240px 1fr;gap:32px;margin-bottom:32px;}
.detail-cover{aspect-ratio:2/3;border-radius:14px;overflow:hidden;}
.detail-info{display:flex;flex-direction:column;gap:14px;}
.detail-title{font-size:30px;font-weight:900;letter-spacing:-0.5px;line-height:1.2;}
.detail-author{font-size:15px;color:var(--text-sub);}
.detail-meta{display:flex;gap:8px;flex-wrap:wrap;}
.detail-meta-chip{padding:4px 10px;border-radius:8px;background:var(--bg-input);font-size:11px;font-weight:700;color:var(--text-sub);}
.detail-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:8px;}
.detail-stat{background:var(--bg-input);border-radius:10px;padding:14px;text-align:center;}
.detail-stat-num{font-size:18px;font-weight:900;color:var(--primary);}
body.dark .detail-stat-num{color:var(--gold);}
.detail-stat-label{font-size:11px;color:var(--text-sub);margin-top:2px;}
.detail-actions{display:flex;gap:10px;margin-top:10px;}
.btn-primary{padding:13px 24px;background:var(--primary);color:#fff;border-radius:10px;font-weight:800;font-size:14px;cursor:pointer;}
body.dark .btn-primary{background:var(--gold);color:#0f172a;}
.btn-primary:hover{background:var(--primary-dark);}
.btn-outline{padding:13px 22px;border:1.5px solid var(--border);border-radius:10px;font-weight:700;font-size:13px;color:var(--text);cursor:pointer;background:var(--bg-card);}
.btn-outline:hover{border-color:var(--primary);color:var(--primary);}

.detail-section{margin-bottom:32px;}
.detail-section h3{font-size:16px;font-weight:800;margin-bottom:12px;}
.detail-section p{font-size:14px;line-height:1.8;color:var(--text-sub);}

/* ═══════════════════════════════════════════════════════════
   11. 책 뷰어 (3 모드)
   ═══════════════════════════════════════════════════════════ */
.viewer-overlay{position:fixed;inset:0;background:rgba(15,23,42,0.6);z-index:200;display:none;align-items:center;justify-content:center;backdrop-filter:blur(8px);}
.viewer-overlay.open{display:flex;}
.viewer-shell{width:96%;height:94%;max-width:1480px;background:var(--bg-card);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 80px rgba(0,0,0,0.4);}
/* 화면 꽉 채우기 (의사 전체화면) — 진짜 Fullscreen API 대신 CSS. 캡쳐 정상 동작 */
.viewer-shell.maxed{position:fixed;inset:0;width:100%;height:100%;max-width:none;border-radius:0;box-shadow:none;}
.viewer-header{padding:14px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:var(--bg-input);gap:16px;position:relative;z-index:20;}
.reader-aa{display:inline-flex;}   /* PC·모바일 공통 — 보기 설정은 Aa 시트 하나로 */
.reader-settings-sheet{display:none;position:absolute;top:100%;right:14px;z-index:60;background:var(--bg-card);border:1px solid var(--border);border-radius:14px;box-shadow:0 18px 44px -16px rgba(20,20,40,.42);padding:8px 14px;min-width:232px;margin-top:6px;}
.reader-settings-sheet.open{display:block;}
.reader-settings-sheet .rss-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px 0;}
.reader-settings-sheet .rss-row + .rss-row{border-top:1px solid var(--border);}
.reader-settings-sheet .rss-label{font-size:12.5px;font-weight:700;color:var(--text-sub);white-space:nowrap;}
.reader-settings-sheet .rss-ctrl{display:flex;gap:6px;}
@media(min-width:601px){ .reader-settings-sheet .rss-row.rss-mobile-only{display:none;} }   /* 탭넘김(모바일 전용)·전체화면(PC 상단에 있음) 행 숨김 */
.viewer-title{font-weight:800;font-size:15px;}
.viewer-author{font-size:12px;color:var(--text-sub);margin-left:6px;}
/* 8/30 사장님: 상세페이지에서 골라 들어오므로 뷰어 안에서는 불필요 → 감춤(setMode의 active 표시는 그대로 동작) */
.viewer-close{font-size:22px;color:var(--text-sub);cursor:pointer;padding:6px 10px;}
.viewer-body{flex:1;display:grid;grid-template-columns:1fr 1fr;overflow:hidden;}
.viewer-pane{padding:var(--reader-pady,30px) var(--reader-padx,36px);overflow-y:auto;font-size:15px;line-height:1.9;color:var(--reader-fg,inherit);}
.viewer-pane.left{border-right:1px solid var(--border);background:var(--reader-bg,var(--bg-input));font-family:'Times New Roman','Noto Serif KR',serif;}
.viewer-pane.right{background:var(--reader-bg,var(--bg-card));}
/* 마우스 숨기기 */
.viewer-shell.mh-hidden{cursor:none;}
.viewer-shell.mh-hidden .viewer-header{opacity:0;transition:opacity .4s;pointer-events:none;}
/* 헤더 자동숨김 — 평소 숨김, 마우스를 상단에 올리면 노출 (PC 호버 전용·몰입형)
   9/11 세명대 요청: 예전엔 본문 위에 겹쳐 떠서 우측 스크롤바 위쪽과 검색창을 가려 조작이 안 됐다 →
   PC는 메뉴가 나올 때 본문을 아래로 밀어 메뉴 아래에 뷰어를 보여준다(겹침 없음). 모바일 겹침(.immersive)은 그대로 */
@media (hover:hover){
  .viewer-shell.hdr-auto .viewer-header{display:none;background:var(--bg-card);border-bottom:2px solid var(--primary);}
  .viewer-shell.hdr-auto.hdr-peek .viewer-header{display:flex;}
}
/* 보기설정 추가 컨트롤 — 배경색 스와치 / 글꼴 칩 / 토글 */
.rss-bg{width:26px;height:26px;border-radius:50%;border:2px solid var(--border);cursor:pointer;padding:0;}
.rss-bg.on{border-color:var(--gold,#d4a93b);box-shadow:0 0 0 2px var(--gold,#d4a93b);}
.rss-font{padding:4px 10px;font-size:13px;}
.rss-font.on,.reader-btn[data-theme].on{border-color:var(--gold,#d4a93b);color:var(--gold,#d4a93b);font-weight:700;}
.rss-toggle{width:40px;height:22px;border-radius:11px;background:var(--border);position:relative;cursor:pointer;border:0;transition:background .2s;}
.rss-toggle.on{background:var(--gold,#d4a93b);}
.rss-toggle::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .2s;}
.rss-toggle.on::after{left:20px;}
.viewer-pane h1{font-size:22px;margin-bottom:6px;}
.viewer-pane h2{font-size:13px;font-style:italic;color:var(--text-sub);margin-bottom:24px;font-weight:500;}
.viewer-pane p{margin-bottom:16px;text-align:left;}   /* 양끝맞춤 대신 왼쪽정렬 → 자간(단어 간격) 균일, 한글 justify 벌어짐 방지 */
.viewer-pane-label{font-size:10px;font-weight:800;color:var(--text-light);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:14px;}

/* 챌린지 모드 우측 — 퀴즈 */
.quiz-block{background:var(--bg-card);border-radius:12px;padding:20px;margin-bottom:16px;border:1.5px solid var(--border);}
.quiz-q-num{font-size:11px;font-weight:800;color:var(--primary);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;}
.quiz-q{font-size:15px;font-weight:700;line-height:1.5;margin-bottom:14px;}
.quiz-opt{display:block;padding:12px 14px;border-radius:8px;background:var(--bg-input);margin-bottom:6px;cursor:pointer;font-size:13px;border:2px solid transparent;}
.quiz-opt:hover{border-color:var(--primary);}
.quiz-opt.correct{background:rgba(46,184,114,0.15);border-color:var(--success);}
.quiz-opt.wrong{background:rgba(231,76,60,0.15);border-color:var(--danger);}

/* ── 마이페이지 상단 요약 히어로 (실측 3숫자) ── */
.my-hero{background:linear-gradient(135deg,#1e293b,#334155);border-radius:18px;padding:26px 28px;color:#fff;box-shadow:0 4px 14px -4px rgba(20,25,45,.25), 0 18px 40px -14px rgba(20,25,45,.35), inset 0 1px 0 rgba(255,255,255,.08);}
body.dark .my-hero{background:linear-gradient(135deg,#0f172a,#1e293b);}
.my-hero-name{font-size:15px;font-weight:800;color:#fff;opacity:.92;display:flex;align-items:center;gap:7px;}
.my-hero-msg{font-size:14px;color:#cbd5e1;margin:5px 0 20px;line-height:1.5;}
.my-hero-msg b{color:#fde68a;}
.my-hero-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.my-hero-nums>div{background:rgba(255,255,255,.07);border-radius:13px;padding:18px 10px;text-align:center;}
.mh-n{font-size:30px;font-weight:800;color:#fff;line-height:1;letter-spacing:-.5px;}
.mh-u{font-size:16px;font-weight:700;}
.mh-l{font-size:12px;color:#cbd5e1;margin-top:8px;}
/* ── 나의 독서 리듬 (실측 데이터만) ── */
.rhythm-card{background:var(--bg-card);border:1px solid var(--border);border-radius:18px;padding:22px 24px;margin-top:16px;}
.rhythm-title{font-size:13px;font-weight:800;color:var(--text-sub);letter-spacing:.02em;display:flex;align-items:center;gap:7px;}
.rhythm-chips{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 4px;}
.rhythm-chip{background:var(--bg-input);border-radius:99px;padding:7px 13px;font-size:12.5px;font-weight:700;color:var(--text-sub);}
.rhythm-chip b{color:var(--text);}
.rhythm-bars{display:flex;align-items:flex-end;gap:6px;margin:16px 2px 2px;}
.rhythm-bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;justify-content:flex-end;}
.rhythm-bar .rb-fill{width:100%;max-width:34px;border-radius:6px 6px 2px 2px;background:var(--gold);opacity:.9;}
.rhythm-bar.zero .rb-fill{background:var(--border);}
.rhythm-bar .rb-day{font-size:10.5px;color:var(--text-light);font-weight:700;}
.rhythm-bar.today .rb-day{color:var(--gold);}
.rhythm-books{margin-top:14px;border-top:1px solid var(--border);padding-top:6px;}
.rhythm-book{display:flex;align-items:center;gap:12px;padding:9px 0;}
.rhythm-book .rbk-t{flex:0 0 auto;max-width:42%;font-size:13px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rhythm-book .rbk-bar{flex:1;height:7px;border-radius:99px;background:var(--bg-input);overflow:hidden;}
.rhythm-book .rbk-fill{height:100%;border-radius:99px;background:var(--gold);}
.rhythm-book .rbk-pct{flex:0 0 38px;text-align:right;font-size:11.5px;font-weight:800;color:var(--text-sub);}
.rhythm-book .rbk-go{flex:0 0 auto;background:var(--bg-input);color:var(--text);border:none;border-radius:8px;padding:6px 10px;font-size:11.5px;font-weight:800;cursor:pointer;white-space:nowrap;}
.rhythm-book .rbk-go:hover{background:var(--primary-bg);}
.rhythm-book .rbk-done{flex:0 0 auto;font-size:11.5px;font-weight:800;color:#1d6b48;white-space:nowrap;}
body.dark .rhythm-book .rbk-done{color:#6fd9a6;}
.rhythm-empty{font-size:12.5px;color:var(--text-light);padding:10px 0 2px;line-height:1.7;}
/* ── 독서 리듬 Bento 그리드 (모듈형 대시보드) ── */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:16px;}
/* 입체감: 다층 그림자로 띄우고(elevation) + 윗면 하이라이트로 빛 받는 표면, hover 시 더 떠오름 */
.b-tile{background:var(--bg-card);border:1px solid rgba(20,25,45,.05);border-radius:18px;padding:20px 22px;position:relative;overflow:hidden;
  box-shadow:0 1px 2px rgba(20,25,45,.05), 0 5px 12px -3px rgba(20,25,45,.07), 0 14px 30px -10px rgba(20,25,45,.09), inset 0 1px 0 rgba(255,255,255,.75);
  transition:transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s;}
.b-tile:hover{transform:translateY(-3px);
  box-shadow:0 2px 4px rgba(20,25,45,.06), 0 10px 22px -5px rgba(20,25,45,.10), 0 26px 50px -14px rgba(20,25,45,.15), inset 0 1px 0 rgba(255,255,255,.75);}
body.dark .b-tile{border-color:rgba(255,255,255,.07);background:#222f45;
  box-shadow:0 2px 8px rgba(0,0,0,.32), 0 14px 30px -10px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);}
body.dark .b-tile:hover{box-shadow:0 3px 12px rgba(0,0,0,.4), 0 22px 44px -12px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.07);}
/* 정체성 타일 — 네이비 2×2 앵커(이름 + 연속일 헤드라인 + 이번주 막대) */
.b-identity{grid-column:1/3;grid-row:span 2;display:flex;flex-direction:column;background:linear-gradient(150deg,#1e293b,#334155);color:#fff;border:none;
  box-shadow:0 4px 14px -4px rgba(20,25,45,.28), 0 18px 40px -14px rgba(20,25,45,.4), inset 0 1px 0 rgba(255,255,255,.08);}
body.dark .b-identity{background:linear-gradient(150deg,#0f172a,#243049);}
.b-id-top{display:flex;align-items:center;gap:9px;}
.b-id-emoji{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.10);display:flex;align-items:center;justify-content:center;font-size:18px;flex:0 0 auto;}
.b-id-name{font-size:13px;font-weight:700;color:rgba(219,228,255,.72);letter-spacing:.01em;}
.b-id-head{font-size:22px;font-weight:800;color:#fff;margin-top:12px;letter-spacing:-.5px;line-height:1.3;}
.b-id-head b{color:#ffd479;}
.b-identity .b-week{margin-top:auto;padding-top:20px;}
.b-identity .wb-d{color:rgba(219,228,255,.6);}
.b-identity .b-wbar.today .wb-d{color:#ffd479;}
.b-identity .b-wbar.zero .wb-fill{background:rgba(255,255,255,.14);box-shadow:none;}
.b-books{grid-column:span 2;}
.b-heat{grid-column:span 2;}
.b-num{display:flex;flex-direction:column;justify-content:center;}
.b-num-sub{font-size:11px;color:var(--text-light);margin-top:6px;font-weight:600;}
/* KPI 타일 아이콘 칩 + 타일별 강조색 (panze 완성도) */
.b-num-ic{width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:17px;margin-bottom:12px;}
.b-num-u{font-size:16px;font-weight:700;margin-left:1px;}
.b-num-soft{color:var(--text-light);}
.b-acc-gold   .b-num-ic{background:rgba(212,169,59,.16);}
.b-acc-blue   .b-num-ic{background:rgba(58,110,165,.14);}
.b-acc-indigo .b-num-ic{background:rgba(67,56,202,.12);}
.b-acc-green  .b-num-ic{background:rgba(46,125,87,.13);}
body.dark .b-acc-gold .b-num-ic{background:rgba(212,169,59,.22);}
body.dark .b-acc-blue .b-num-ic{background:rgba(120,160,220,.20);}
body.dark .b-acc-indigo .b-num-ic{background:rgba(120,110,235,.22);}
body.dark .b-acc-green .b-num-ic{background:rgba(110,217,166,.18);}
.b-streak-top{display:flex;align-items:center;gap:13px;}
.b-flame{width:46px;height:46px;border-radius:14px;background:rgba(212,169,59,.16);display:flex;align-items:center;justify-content:center;font-size:24px;flex:0 0 auto;}
.b-big{font-size:34px;font-weight:800;color:var(--text);line-height:1;letter-spacing:-1px;}
.b-unit{font-size:17px;font-weight:700;margin-left:2px;}
.b-sub{font-size:12px;color:var(--text-light);font-weight:600;margin-top:4px;}
.b-num-v{font-size:25px;font-weight:800;color:var(--ink);line-height:1.05;letter-spacing:-.5px;}
body.dark .b-num-v{color:#a5b4fc;}   /* 다크모드: 밝은 인디고 */
#page-mypage .page-title{color:var(--ink);}
body.dark #page-mypage .page-title{color:#a5b4fc;}
.b-num-l{font-size:11.5px;color:var(--text-light);font-weight:600;margin-top:6px;}
.b-week{display:flex;align-items:flex-end;gap:7px;margin-top:auto;padding-top:18px;height:64px;}
.b-wbar{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;justify-content:flex-end;}
.b-wbar .wb-fill{width:100%;max-width:30px;min-height:3px;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,#e3bd55,#c0922c);box-shadow:0 1px 2px rgba(180,144,47,.45), inset 0 1px 0 rgba(255,255,255,.4);}
.b-wbar.zero .wb-fill{background:var(--border);box-shadow:none;}
.b-wbar .wb-d{font-size:10px;color:var(--text-light);font-weight:700;}
.b-wbar.today .wb-d{color:var(--gold);}
.b-head{font-size:12.5px;font-weight:800;color:var(--text-sub);display:flex;align-items:center;gap:7px;margin-bottom:12px;}
.b-head-sub{font-size:11px;color:var(--text-light);font-weight:600;margin-left:auto;}
.b-book{display:flex;align-items:center;gap:11px;padding:7px 0;}
.b-book .bb-t{flex:0 0 auto;max-width:38%;font-size:13px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.b-book .bb-bar{flex:1;height:8px;border-radius:99px;background:var(--bg-input);overflow:hidden;box-shadow:inset 0 1px 2px rgba(20,25,45,.10);}
.b-book .bb-fill{height:100%;border-radius:99px;background:linear-gradient(180deg,#e3bd55,#c0922c);box-shadow:0 1px 2px rgba(180,144,47,.4);}
.b-book .bb-pct{flex:0 0 36px;text-align:right;font-size:11.5px;font-weight:800;color:var(--text-sub);}
.b-book .bb-go{flex:0 0 auto;background:var(--bg-input);color:var(--text);border:none;border-radius:8px;padding:6px 10px;font-size:11.5px;font-weight:800;cursor:pointer;white-space:nowrap;transition:background .15s;}
.b-book .bb-go:hover{background:var(--primary-bg);}
.b-book .bb-done{flex:0 0 auto;font-size:11.5px;font-weight:800;color:#1d6b48;white-space:nowrap;}
body.dark .b-book .bb-done{color:#6fd9a6;}
.b-heatgrid{display:flex;gap:4px;justify-content:flex-start;}
.b-heatcol{display:flex;flex-direction:column;gap:4px;}
.b-cell{width:13px;height:13px;border-radius:3px;background:var(--bg-input);}
.b-cell.l1{background:rgba(212,169,59,.30);}
.b-cell.l2{background:rgba(212,169,59,.52);}
.b-cell.l3{background:rgba(212,169,59,.76);}
.b-cell.l3{background:rgba(212,169,59,.76);box-shadow:0 1px 2px rgba(180,144,47,.25);}
.b-cell.l4{background:linear-gradient(145deg,#e3bd55,#c0922c);box-shadow:0 0 5px rgba(212,169,59,.55), 0 1px 2px rgba(180,144,47,.4);}
.b-cell.future{background:transparent;box-shadow:none;}
.b-heat-foot{display:flex;align-items:center;gap:6px;justify-content:flex-end;margin-top:11px;font-size:10.5px;color:var(--text-light);font-weight:600;}
.b-heat-foot .b-cell{width:11px;height:11px;}
.b-empty{font-size:12.5px;color:var(--text-light);padding:10px 2px 2px;line-height:1.7;}
/* 내가 제출한 글 (챌린지 미션 제출분) */
.mw-grid{display:grid;gap:14px;}
.mw-card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:18px 20px;transition:transform .15s,box-shadow .15s,border-color .15s;}
.mw-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(40,40,90,.10);}
.mw-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:10px;}
.mw-badge{font-size:11.5px;font-weight:700;color:var(--accent);background:var(--primary-bg);padding:3px 10px;border-radius:20px;white-space:nowrap;}
body.dark .mw-badge{color:var(--gold);}
.mw-book{font-size:12.5px;font-weight:800;color:var(--text);}
.mw-date{font-size:11.5px;color:var(--text-light);margin-left:auto;}
.mw-text{font-size:14.5px;line-height:1.75;color:var(--text);white-space:pre-wrap;}
/* 내서재 순서: (위)히어로+읽고있는책 = 액션 / (아래)통계 타일+잔디 */
.my-top{display:grid;grid-template-columns:1.05fr 1fr;gap:16px;margin-top:16px;align-items:stretch;}
.my-top .b-identity{grid-column:auto;grid-row:auto;}
.my-top .b-books{grid-column:auto;}
.my-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0;}
.my-stats .b-num{grid-column:auto;}
.my-stats .b-heat{grid-column:1/-1;}
@media(max-width:760px){ .my-top{grid-template-columns:1fr;} .my-stats{grid-template-columns:1fr 1fr;} }
/* ── 내서재 공개 프로필 (= 남도 보는 서재 프로필) + 책장 ── */
.my-prof{background:var(--bg-card);border:1px solid var(--border);border-radius:20px;padding:22px;margin-top:18px;box-shadow:0 4px 18px rgba(0,0,0,.05);}
.mp-top{display:flex;align-items:center;gap:16px;}
.mp-ava{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:32px;background:var(--bg-input);flex-shrink:0;}
.mp-id{flex:1;min-width:0;}
.mp-nm{font-size:20px;font-weight:800;color:var(--text);display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.mp-grade{font-size:12px;font-weight:700;color:var(--text-light);}
.mp-bio{font-size:13px;color:var(--text-sub);margin-top:4px;line-height:1.4;}
.mp-bio.empty{opacity:.6;font-style:italic;}
.mp-foll{display:flex;gap:16px;margin-top:8px;font-size:13px;color:var(--text-light);}
.mp-foll b{color:var(--text);font-weight:800;}
.mp-edit{border:1px solid var(--border);background:transparent;border-radius:11px;padding:9px 15px;font-size:13px;font-weight:700;cursor:pointer;color:var(--text);white-space:nowrap;}
.mp-edit:hover{background:var(--bg-input);}
.mp-edit.follow{background:var(--primary);color:#fff;border-color:var(--primary);}
.mp-edit.follow.on{background:transparent;color:var(--text-sub);}
.mp-chips{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;}
.mp-chip{flex:1;min-width:68px;text-align:center;background:var(--bg-input);border-radius:14px;padding:11px 6px;}
.mp-chip .v{font-size:19px;font-weight:800;color:var(--text);}
.mp-chip .l{font-size:11px;color:var(--text-light);margin-top:2px;}
.shelf{margin-top:16px;border-top:1px solid var(--border);padding-top:16px;}
.shelf-h{font-size:13px;font-weight:800;color:var(--text-sub);margin-bottom:11px;}
.shelf-fav{display:flex;gap:14px;align-items:center;background:linear-gradient(135deg,rgba(212,169,59,.14),rgba(212,169,59,.04));border:1px solid var(--gold);border-radius:16px;padding:14px;margin-bottom:14px;}
.shelf-fav .cv{width:54px;height:78px;border-radius:8px;overflow:hidden;flex-shrink:0;background:var(--bg-input);display:flex;align-items:center;justify-content:center;font-size:26px;box-shadow:0 3px 10px rgba(0,0,0,.18);}
.shelf-fav .cv img{width:100%;height:100%;object-fit:cover;}
.shelf-fav .ft{flex:1;min-width:0;}
.shelf-fav .ft .k{font-size:11px;font-weight:800;color:var(--gold);letter-spacing:.05em;}
.shelf-fav .ft .t{font-size:16px;font-weight:800;color:var(--text);margin-top:3px;}
.shelf-fav-empty{display:block;border:1.5px dashed var(--border);background:transparent;color:var(--text-light);border-radius:16px;padding:15px;width:100%;text-align:center;font-size:13px;font-weight:700;cursor:pointer;margin-bottom:14px;}
.shelf-fav-empty:hover{border-color:var(--gold);color:var(--gold);}
.shelf-row{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;}
.shelf-bk{width:50px;flex-shrink:0;cursor:pointer;}
.shelf-bk .cv{width:50px;height:72px;border-radius:6px;overflow:hidden;background:var(--bg-input);display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:0 2px 7px rgba(0,0,0,.13);}
.shelf-bk .cv img{width:100%;height:100%;object-fit:cover;}
.shelf-empty{font-size:13px;color:var(--text-light);padding:4px 0;}
.my-priv-div{display:flex;align-items:center;gap:10px;margin:28px 0 2px;color:var(--text-light);font-size:12px;font-weight:700;}
.my-priv-div::before,.my-priv-div::after{content:'';flex:1;height:1px;background:var(--border);}
/* 프로필 편집 모달 */
.pe-ov{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9000;display:none;align-items:flex-end;justify-content:center;}
.pe-ov.on{display:flex;}
.pe{background:var(--bg-card);width:100%;max-width:460px;border-radius:20px 20px 0 0;padding:22px;max-height:88vh;overflow-y:auto;}
@media(min-width:560px){ .pe-ov{align-items:center;} .pe{border-radius:20px;} }
.pe-h{font-size:17px;font-weight:800;color:var(--text);margin-bottom:16px;}
.pe-lb{font-size:12px;font-weight:700;color:var(--text-sub);margin:14px 0 7px;}
.pe-emoji{display:flex;gap:8px;flex-wrap:wrap;}
.pe-em{width:42px;height:42px;border-radius:11px;border:1px solid var(--border);background:transparent;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.pe-em.on{border-color:var(--primary);border-width:2px;background:var(--bg-input);}
.pe-in{width:100%;border:1px solid var(--border);border-radius:11px;padding:11px;font-size:14px;background:var(--bg-input);color:var(--text);box-sizing:border-box;font-family:inherit;}
.pe-favgrid{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;}
.pe-fav{width:54px;flex-shrink:0;cursor:pointer;text-align:center;}
.pe-fav .cv{width:54px;height:78px;border-radius:7px;overflow:hidden;background:var(--bg-input);display:flex;align-items:center;justify-content:center;font-size:24px;border:2px solid transparent;}
.pe-fav.on .cv{border-color:var(--gold);}
.pe-fav .cv img{width:100%;height:100%;object-fit:cover;}
.pe-fav .t{font-size:10px;color:var(--text-light);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pe-btns{display:flex;gap:10px;margin-top:22px;}
.pe-btn{flex:1;border-radius:12px;padding:13px;font-size:14px;font-weight:800;cursor:pointer;border:none;}
.pe-btn.save{background:var(--primary);color:#fff;}
.pe-btn.cancel{background:var(--bg-input);color:var(--text-sub);}
/* ── 내서재 = 내 서가 (우리 도서관식 가로 표지 서가) ── */
/* 가로 표지 서가 */
.sg-sec{margin-top:26px;}
.sg-h{font-size:18px;font-weight:800;color:var(--text);}
.sg-sub{font-size:12.5px;color:var(--text-light);margin-top:3px;margin-bottom:13px;}
.sg-row{display:flex;gap:14px;overflow-x:auto;padding-bottom:8px;}
.sg-card{width:116px;flex-shrink:0;cursor:pointer;}
.sg-cv{width:116px;height:166px;border-radius:10px;overflow:hidden;background:var(--bg-input);display:flex;align-items:center;justify-content:center;font-size:40px;box-shadow:0 6px 16px -6px rgba(0,0,0,.32);position:relative;}
.sg-cv img{width:100%;height:100%;object-fit:cover;}
.sg-done{position:absolute;top:6px;right:6px;background:var(--gold);color:#fff;font-size:10px;font-weight:800;border-radius:8px;padding:2px 6px;box-shadow:0 1px 4px rgba(0,0,0,.3);}
.sg-t{font-size:13px;font-weight:700;color:var(--text);margin-top:8px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.sg-a{font-size:11.5px;color:var(--text-light);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sg-bar{height:5px;background:var(--bg-input);border-radius:3px;margin-top:7px;overflow:hidden;}
.sg-bar i{display:block;height:100%;background:var(--primary);border-radius:3px;}
.sg-pct{font-size:11px;color:var(--primary);font-weight:800;margin-top:4px;}
.sg-empty{font-size:13px;color:var(--text-light);padding:6px 2px;}
/* 완독 = 주인공(크게), 읽는 책 = 작게, 인생책 = ⭐ 대표 카드 */
.sg-hero .sg-h{font-size:20px;}
.sg-hero .sg-card{width:138px;}
.sg-hero .sg-cv{width:138px;height:198px;border-radius:12px;box-shadow:0 10px 24px -8px rgba(0,0,0,.4);}
.sg-mini{margin-top:22px;}
.sg-mini .sg-h{font-size:15px;}
.sg-mini .sg-card{width:88px;}
.sg-mini .sg-cv{width:88px;height:126px;border-radius:8px;}
.sg-mini .sg-t{font-size:12px;margin-top:6px;}
.sg-card.fav .sg-cv{box-shadow:0 10px 26px -6px rgba(212,169,59,.6);outline:2.5px solid var(--gold);outline-offset:-1px;}
.sg-fav{position:absolute;top:6px;left:6px;background:var(--gold);color:#fff;font-size:10px;font-weight:800;border-radius:8px;padding:2px 7px;box-shadow:0 1px 4px rgba(0,0,0,.3);}
.sg-h .cnt{color:var(--text-light);font-weight:700;font-size:15px;margin-left:4px;}
.sg-h .favset{color:var(--gold);cursor:pointer;font-weight:700;}
/* 내 기록 더보기(측정존 접기) */
.my-more-btn{display:block;width:100%;margin:30px 0 4px;border:1px solid var(--border);background:var(--bg-card);border-radius:14px;padding:14px;font-size:13.5px;font-weight:800;color:var(--text-sub);cursor:pointer;}
.my-more-btn:hover{background:var(--bg-input);}
/* ════ 내서재 3그룹 — 그룹 헤더 ════ */
.lib-grp{display:flex;align-items:center;gap:13px;margin:48px 2px 18px;}
.lib-grp.first{margin-top:8px;}
.lib-grp-ic{width:40px;height:40px;border-radius:12px;background:var(--primary-bg);display:flex;align-items:center;justify-content:center;color:var(--primary);flex:none;}
.lib-grp-ic .icon{width:21px;height:21px;}
.lib-grp-t{font-size:21px;font-weight:800;line-height:1.15;letter-spacing:-.4px;}
.lib-grp-s{font-size:12.5px;color:var(--text-light);margin-top:3px;}
/* ── ① 내 활동 그룹 ── */
.ag-card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:20px 22px;}
.ag-sec-h{display:flex;align-items:center;justify-content:space-between;margin:26px 2px 13px;}
.ag-sec-h h3{font-size:16px;font-weight:800;margin:0;}
.ag-sec-h .more{font-size:13px;color:var(--primary);font-weight:700;cursor:pointer;}
.ag-ptop{display:flex;align-items:center;gap:15px;}
.ag-pav{width:62px;height:62px;border-radius:18px;background:var(--primary-bg);display:flex;align-items:center;justify-content:center;font-size:30px;flex:none;}
.ag-pname{font-size:19px;font-weight:800;display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.ag-grade{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:800;color:var(--primary);background:var(--primary-bg);padding:4px 11px;border-radius:99px;}
.ag-pstatus{font-size:13px;color:var(--text-light);margin-top:4px;}
/* 8/31: flex:none + nowrap 이 없어 좁은 폰에서 버튼이 눌려 '편/집' 두 줄로 깨졌다(사장님 스샷) */
.ag-pedit{margin-left:auto;align-self:flex-start;flex:none;white-space:nowrap;font-size:12.5px;color:var(--text-sub);border:1px solid var(--border);background:transparent;padding:6px 14px;border-radius:99px;cursor:pointer;}
.ag-pedit:hover{border-color:var(--gold);color:var(--text);}
.ag-pstats{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:20px;}
.ag-pstat{background:var(--bg-input);border-radius:12px;padding:13px 4px;text-align:center;}
.ag-pstat b{display:block;font-size:20px;font-weight:800;}
.ag-pstat span{font-size:11px;color:var(--text-light);}
.ag-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;}
.ag-tile{background:var(--bg-input);border-radius:12px;padding:15px 17px;position:relative;}
.ag-tile .k{font-size:12px;color:var(--text-light);}
.ag-tile .v{font-size:27px;font-weight:800;margin-top:5px;display:flex;align-items:center;gap:8px;color:var(--text);letter-spacing:-.5px;}
.ag-star{width:23px;height:23px;flex:none;fill:var(--gold);filter:drop-shadow(0 1px 1px rgba(168,128,31,.25));}
.ag-tile .gtag{position:absolute;top:14px;right:15px;}
.ag-nextbar .lab{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:7px;}
.ag-nextbar .lab b{color:var(--primary);font-weight:800;}
.ag-bar{height:9px;border-radius:99px;background:var(--bg-input);overflow:hidden;}
.ag-bar>span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--gold),var(--accent));}
.ag-div{height:1px;background:var(--border);margin:20px 0;}
.ag-subh{font-size:13px;font-weight:800;color:var(--text-sub);margin-bottom:13px;}
.ag-tbl{width:100%;border-collapse:collapse;}
.ag-tbl th{font-size:11.5px;color:var(--text-light);font-weight:600;text-align:right;padding:0 0 9px;}
.ag-tbl th:first-child{text-align:left;}
.ag-tbl td{padding:9px 0;font-size:13.5px;border-top:1px solid var(--border);text-align:right;}
.ag-tbl td:first-child{text-align:left;color:var(--text-sub);}
.ag-tbl td.cum{color:var(--text-light);}
.ag-tbl td b{font-weight:800;}
.ag-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:1px;flex:none;}
/* 활동별 별 = 미니 바 차트 */
.ag-ahead{display:flex;align-items:center;font-size:11.5px;color:var(--text-light);font-weight:600;padding:0 4px 10px 0;}
.ag-ahead span:first-child{flex:1;}
.ag-ahead span:not(:first-child){width:60px;text-align:right;}
.ag-ahead span:last-child{width:64px;padding-left:12px;}
.ag-arow{padding:11px 0;border-top:1px solid var(--border);transition:background .14s;}
.ag-arow:hover{background:color-mix(in srgb,var(--bg-input) 60%,transparent);}
.ag-arow-top{display:flex;align-items:center;font-size:13.5px;padding-right:4px;}
.ag-aname{flex:1;color:var(--text);font-weight:700;}
.ag-ayear{width:60px;text-align:right;font-weight:800;color:var(--primary);}
.ag-acum{width:64px;padding-left:12px;text-align:right;color:var(--text-light);}
.ag-abar{height:5px;border-radius:99px;background:var(--bg-input);margin:9px 6px 0 0;overflow:hidden;}
.ag-abar i{display:block;height:100%;border-radius:99px;opacity:.82;transition:width .5s ease;}
.ag-tiers{display:flex;gap:7px;margin-bottom:13px;flex-wrap:wrap;}
.ag-tier{flex:1;min-width:84px;text-align:center;background:var(--bg-input);border-radius:10px;padding:11px 4px;border:1.5px solid transparent;}
.ag-tier.on{background:var(--primary-bg);border-color:var(--primary);}
.ag-tier .tn{font-size:12px;font-weight:800;}
.ag-tier.on .tn{color:var(--primary);}
.ag-tier .tr{font-size:10.5px;color:var(--text-light);margin-top:3px;}
.ag-earn{font-size:12.5px;color:var(--text-sub);background:var(--bg-input);border-radius:10px;padding:13px 15px;line-height:1.85;}
.ag-earn b{color:var(--gold);font-weight:800;}
.ag-chips{display:flex;gap:9px;margin-bottom:14px;flex-wrap:wrap;}
.ag-chip{font-size:12.5px;padding:7px 14px;border-radius:99px;border:1px solid var(--border);background:var(--bg-card);color:var(--text-sub);font-weight:700;cursor:pointer;user-select:none;}
.ag-chip.on{border-color:var(--gold);background:var(--primary-bg);color:var(--text);}
.ag-notes{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;}
.ag-note{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:15px 16px;}
.ag-nmeta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-light);margin-bottom:9px;}
.ag-kind{font-size:11px;padding:2px 9px;border-radius:6px;font-weight:700;}
.ag-k-sg{background:#E7F7EE;color:#1B8F5A;}
.ag-k-q{background:#FEF1DD;color:#B5781A;}
.ag-k-rv{background:#FCEAF3;color:#C13B7E;}
.ag-note p{margin:0;font-size:14px;color:var(--text);line-height:1.6;}
.ag-empty{padding:22px 2px;color:var(--text-light);font-size:14px;}
.ag-empty .favset{color:var(--gold);cursor:pointer;font-weight:700;}
@media(max-width:760px){.ag-pstats{grid-template-columns:repeat(3,1fr);}}
/* ── ① 내 활동 호버 인터랙션 ── */
.ag-card{transition:box-shadow .16s,border-color .16s;}
.ag-card:hover{box-shadow:0 8px 26px -12px rgba(26,41,66,.22);}
body.dark .ag-card:hover{box-shadow:0 8px 26px -12px rgba(0,0,0,.5);}
.ag-pstat,.ag-tile,.ag-tier,.ag-note{transition:transform .14s,box-shadow .16s,border-color .16s,background .16s;}
.ag-pstat:hover{transform:translateY(-2px);background:var(--primary-bg);}
.ag-tile:hover{transform:translateY(-2px);box-shadow:0 8px 20px -12px rgba(26,41,66,.32);}
.ag-tier:not(.on):hover{border-color:var(--gold);}
.ag-note:hover{transform:translateY(-2px);border-color:var(--gold);box-shadow:0 8px 20px -12px rgba(26,41,66,.2);}
.ag-tbl tr:hover td{background:var(--bg-input);}
.ag-chip{transition:border-color .14s,color .14s,background .14s;}
.ag-chip:hover{border-color:var(--gold);color:var(--text);background:var(--primary-bg);}
/* ── ① 내 활동 디테일 다듬기 (깔끔·입체·위계) ── */
.ag-card{border-color:color-mix(in srgb,var(--border) 70%,transparent);box-shadow:0 1px 2px rgba(26,41,66,.035), 0 12px 32px -22px rgba(26,41,66,.28);}
body.dark .ag-card{box-shadow:0 1px 2px rgba(0,0,0,.2), 0 12px 32px -22px rgba(0,0,0,.6);}
.ag-sec-h h3{position:relative;padding-left:13px;}
.ag-sec-h h3::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:15px;border-radius:3px;background:linear-gradient(180deg,var(--gold),var(--accent));}
.ag-pav{background:linear-gradient(135deg,var(--primary-bg),var(--bg-input));box-shadow:inset 0 0 0 1px var(--border);}
.ag-grade{background:linear-gradient(135deg,rgba(212,169,59,.18),rgba(212,169,59,.05));color:#a8801f;box-shadow:inset 0 0 0 1px rgba(212,169,59,.32);}
body.dark .ag-grade{color:var(--gold);}
.ag-pstat{background:var(--bg-card);border:1.5px solid color-mix(in srgb,var(--border) 75%,transparent);box-shadow:0 1px 2px rgba(26,41,66,.03);padding:14px 4px;}
.ag-pstat b{color:var(--primary);letter-spacing:-.5px;}
/* 8/31 사장님 "밋밋하다": 카테고리 색이 1.5px 테두리에만 있어 흰 카드 위에서 거의 안 보였고,
   숫자는 여섯 칸 모두 같은 색이라 색 구분이 아무 일도 안 하고 있었다.
   쓰던 팔레트 그대로 배경과 숫자에 실어 여섯 칸이 실제로 구분되게 한다(새 색 도입 없음). */
.ag-pstat.s-done{border-color:rgba(58,110,165,.42);background:rgba(58,110,165,.075);}
.ag-pstat.s-sg{border-color:rgba(31,157,107,.42);background:rgba(31,157,107,.075);}
.ag-pstat.s-q{border-color:rgba(212,169,59,.55);background:rgba(212,169,59,.105);}
.ag-pstat.s-rv{border-color:rgba(193,59,126,.40);background:rgba(193,59,126,.072);}
.ag-pstat.s-ch{border-color:rgba(122,90,47,.44);background:rgba(122,90,47,.075);}
.ag-pstat.s-cl{border-color:rgba(31,157,107,.42);background:rgba(31,157,107,.075);}
.ag-pstat.s-done b{color:#3a6ea5;}
.ag-pstat.s-sg b,.ag-pstat.s-cl b{color:#1a8a5e;}
.ag-pstat.s-q b{color:#a8801f;}
.ag-pstat.s-rv b{color:#b53973;}
.ag-pstat.s-ch b{color:#7a5a2f;}
body.dark .ag-pstat.s-done b{color:#7fb0e0;}
body.dark .ag-pstat.s-sg b,body.dark .ag-pstat.s-cl b{color:#46c98e;}
body.dark .ag-pstat.s-q b{color:var(--gold);}
body.dark .ag-pstat.s-rv b{color:#e585b8;}
body.dark .ag-pstat.s-ch b{color:#c9a06a;}
/* 아바타 골드 링 */
.ag-pav{box-shadow:inset 0 0 0 1px var(--border),0 0 0 3px rgba(212,169,59,.14);}
.ag-tile{border:1px solid color-mix(in srgb,var(--border) 75%,transparent);}
.ag-tiles .ag-tile:nth-child(2){background:linear-gradient(135deg,rgba(212,169,59,.13),rgba(212,169,59,.03));border-color:rgba(212,169,59,.34);}
.ag-bar{height:8px;}
/* 등급 안내 = 성장 사다리 */
.ag-tier{padding:14px 6px 13px;position:relative;}
.ag-tier .te{font-size:22px;line-height:1;margin-bottom:7px;}
.ag-tier.future .te{filter:grayscale(.6);opacity:.45;}
.ag-tier.future .tn{color:var(--text-light);}
.ag-tier.done .te{opacity:.9;}
.ag-tier.on{background:linear-gradient(135deg,rgba(212,169,59,.18),rgba(212,169,59,.04));border-color:rgba(212,169,59,.5);box-shadow:0 8px 18px -12px rgba(168,128,31,.55);}
.ag-tier.on .tn{color:#a8801f;}
body.dark .ag-tier.on .tn{color:var(--gold);}
.ag-tier .tnow{font-size:9.5px;font-weight:800;color:#fff;background:var(--gold);border-radius:99px;padding:1px 8px;margin-top:7px;display:inline-block;letter-spacing:.3px;}
/* ── ③ 내 책 모음 그룹 ── */
.bm-life{display:flex;gap:22px;align-items:flex-start;}
.bm-cover{width:118px;height:170px;flex:none;border-radius:12px;overflow:hidden;background:var(--bg-input);display:flex;align-items:center;justify-content:center;font-size:44px;box-shadow:0 10px 24px -8px rgba(0,0,0,.4);}
.bm-cover img{width:100%;height:100%;object-fit:cover;}
.bm-life-k{font-size:12.5px;color:var(--gold);font-weight:800;display:flex;align-items:center;gap:5px;}
.bm-life-t{font-size:21px;font-weight:800;margin:6px 0 2px;}
.bm-life-a{font-size:13.5px;color:var(--text-light);}
.bm-reason{font-size:14.5px;color:var(--text-sub);line-height:1.65;margin:14px 0 16px;padding-left:13px;border-left:3px solid var(--gold);}
.bm-acts{display:flex;gap:9px;flex-wrap:wrap;}
.bm-btn{font-size:12.5px;font-family:inherit;padding:8px 14px;border-radius:10px;border:1px solid var(--border);background:var(--bg-card);color:var(--text-sub);font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:5px;}
.bm-btn:hover{border-color:var(--gold);color:var(--text);}
.bm-btn.fill{background:var(--primary);color:#fff;border-color:var(--primary);}
body.dark .bm-btn.fill{color:#0f172a;}
.bm-life-empty{display:flex;align-items:center;gap:16px;color:var(--text-light);font-size:14px;}
.bm-life-empty .ph{width:96px;height:138px;border-radius:12px;background:var(--bg-input);display:flex;align-items:center;justify-content:center;font-size:34px;flex:none;}
.bm-hist{margin-top:18px;border-top:1px solid var(--border);padding-top:2px;}
.bm-hist-h{font-size:13px;font-weight:800;color:var(--text-sub);margin:14px 0 4px;}
.bm-hist-row{display:flex;align-items:center;gap:13px;padding:13px 0;border-top:1px solid var(--border);}
.bm-hc{width:34px;height:48px;flex:none;border-radius:5px;overflow:hidden;background:var(--bg-input);display:flex;align-items:center;justify-content:center;font-size:16px;}
.bm-hc img{width:100%;height:100%;object-fit:cover;}
.bm-hb{flex:1;min-width:0;}
.bm-ht{font-size:13.5px;font-weight:700;}
.bm-ht .ha{font-weight:400;color:var(--text-light);font-size:12px;margin-left:6px;}
.bm-hr{font-size:12.5px;color:var(--text-sub);margin-top:2px;}
.bm-hd{font-size:11.5px;color:var(--text-light);flex:none;}
.bm-bkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;}
.bm-bk{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:13px;display:flex;flex-direction:column;}
.bm-bc{width:100%;aspect-ratio:116/166;border-radius:9px;overflow:hidden;background:var(--bg-input);display:flex;align-items:center;justify-content:center;font-size:38px;cursor:pointer;position:relative;}
.bm-bc img{width:100%;height:100%;object-fit:cover;}
.bm-bc .favtag{position:absolute;top:6px;left:6px;background:var(--gold);color:#fff;font-size:10px;font-weight:800;border-radius:8px;padding:2px 7px;}
.bm-bk-t{font-size:13.5px;font-weight:700;margin-top:10px;line-height:1.3;}
.bm-bk-a{font-size:12px;color:var(--text-light);}
.bm-bk-acts{display:flex;gap:7px;margin-top:11px;}
.bm-mini{flex:1;font-size:11.5px;font-family:inherit;padding:7px 4px;border-radius:8px;border:1px solid var(--border);background:var(--bg-card);color:var(--text-sub);font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:4px;}
.bm-mini:hover,.bm-mini.on{border-color:var(--gold);color:var(--text);background:var(--primary-bg);}
.bm-curgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;}
.bm-cur{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:16px 17px;}
.bm-cur-h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:13px;}
.bm-cur-h b{font-size:15px;font-weight:800;}
.bm-cur-h span{font-size:12px;color:var(--text-light);}
.bm-cur-books{display:flex;gap:7px;min-height:58px;}
.bm-cur-books .cv{width:42px;height:58px;border-radius:5px;overflow:hidden;background:var(--bg-input);display:flex;align-items:center;justify-content:center;font-size:16px;}
.bm-cur-books .cv img{width:100%;height:100%;object-fit:cover;}
.bm-cur-empty{font-size:12.5px;color:var(--text-light);padding:18px 0;}
.bm-cur-foot{margin-top:13px;display:flex;justify-content:flex-end;gap:7px;}
.bm-cur-new{border:1.5px dashed var(--border);background:var(--bg-input);display:flex;align-items:center;justify-content:center;gap:8px;color:var(--primary);font-weight:700;font-size:14px;cursor:pointer;min-height:130px;border-radius:14px;}
.bm-cur-new:hover{border-color:var(--gold);}
.bm-ov{position:fixed;inset:0;background:rgba(15,23,42,.55);display:none;align-items:center;justify-content:center;z-index:1200;padding:20px;}
.bm-ov.on{display:flex;}
.bm-modal{background:var(--bg-card);border:1px solid var(--border);border-radius:18px;padding:23px;width:100%;max-width:460px;max-height:88vh;overflow:auto;}
.bm-modal h3{margin:0 0 4px;font-size:17px;font-weight:800;}
.bm-modal .sub{font-size:13px;color:var(--text-light);margin-bottom:16px;}
.bm-modal label{font-size:12.5px;font-weight:700;color:var(--text-sub);display:block;margin:0 0 6px;}
.bm-modal textarea,.bm-modal input{width:100%;font-family:inherit;font-size:14px;border:1px solid var(--border);border-radius:10px;padding:11px 13px;resize:vertical;color:var(--text);background:var(--bg-input);box-sizing:border-box;}
.bm-modal textarea:focus,.bm-modal input:focus{outline:none;border-color:var(--gold);}
.bm-mbook{display:flex;gap:12px;align-items:center;margin-bottom:16px;background:var(--bg-input);padding:11px;border-radius:10px;}
.bm-mbook .cv{width:38px;height:52px;border-radius:5px;overflow:hidden;background:var(--bg-card);display:flex;align-items:center;justify-content:center;font-size:16px;flex:none;}
.bm-mbook .cv img{width:100%;height:100%;object-fit:cover;}
.bm-mbook b{font-size:14px;}
.bm-mbook span{font-size:12px;color:var(--text-light);}
.bm-cc{font-size:11.5px;color:var(--text-light);text-align:right;margin-top:5px;}
.bm-opt{display:flex;align-items:center;gap:9px;border:1px solid var(--border);border-radius:10px;padding:11px 13px;cursor:pointer;font-size:14px;margin-bottom:8px;color:var(--text);}
.bm-opt.sel{border-color:var(--gold);background:var(--primary-bg);font-weight:700;}
.bm-pickgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:6px 0 4px;}
.bm-pick{cursor:pointer;border:2px solid transparent;border-radius:9px;padding:4px;}
.bm-pick.sel{border-color:var(--gold);background:var(--primary-bg);}
.bm-pick .cv{width:100%;aspect-ratio:116/166;border-radius:6px;overflow:hidden;background:var(--bg-input);display:flex;align-items:center;justify-content:center;font-size:22px;}
.bm-pick .cv img{width:100%;height:100%;object-fit:cover;}
.bm-pick .pt{font-size:10.5px;text-align:center;margin-top:4px;line-height:1.2;}
.bm-mact{display:flex;gap:10px;margin-top:18px;}
.bm-mact .bm-btn{flex:1;justify-content:center;padding:11px;}
.bm-toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(8px);background:var(--primary);color:#fff;font-size:13.5px;font-weight:600;padding:12px 20px;border-radius:99px;z-index:1300;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;}
body.dark .bm-toast{color:#0f172a;}
.bm-toast.on{opacity:1;transform:translateX(-50%) translateY(0);}
@media(max-width:760px){.bm-life{flex-direction:column;}.bm-pickgrid{grid-template-columns:repeat(3,1fr);}}
/* ── 내 책 · ⋮ 글쓰기 메뉴 · 에디터 · 내가 쓴 글 (8/21) ── */
.mb-bk{position:relative;}
.mb-dots{position:absolute;top:20px;right:20px;width:28px;height:28px;border-radius:8px;border:1px solid var(--border);background:var(--bg-card);color:var(--text-sub);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;box-shadow:0 2px 8px rgba(0,0,0,.08);}
.mb-dots:hover{border-color:var(--gold);color:var(--text);}
/* 8/30 폰: 최소 150px이라 두 칸이 안 들어가 한 줄에 한 권 → 표지가 거대해지고 스크롤이 끝없음. 책장처럼 3칸으로 */
@media(max-width:560px){
  .bm-bkgrid{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px;}
  .bm-bk{padding:8px;border-radius:11px;}
  .bm-bk-t{font-size:12px;margin-top:7px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .bm-bk-a{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .mb-dots{top:13px;right:13px;width:22px;height:22px;border-radius:7px;}
}
.mb-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px;}
.mb-tab{font-size:12.5px;font-weight:700;padding:7px 13px;border-radius:99px;border:1px solid var(--border);background:var(--bg-card);color:var(--text-sub);cursor:pointer;}
.mb-tab.on{background:var(--primary);color:#fff;border-color:var(--primary);}
/* 8/31 사장님 "한 줄로, 깨끗한 버튼으로": '내가 쓴 글' 칩 4개가 3+1 로 접혀 외톨이가 됐던 것.
   폰 좌우 여백이 20px씩이라 360px 화면에서 쓸 폭은 320px → 4등분하면 칸당 75px.
   '한 줄 소감 2'가 12px 글자로 61px이므로 안쪽 여백 6px씩 주면 한 줄에 들어간다.
   이름 축약은 8/31 폐지했으므로 글자를 줄이는 대신 칸을 균등하게 나눈다(네 개가 같은 크기 = 버튼처럼).
   좁은 폰(<360px)은 글자만 1px 줄여 역시 한 줄 유지. 자리 넉넉한 화면은 원래대로 자연 너비.
   ⚠ .mb-tabs 는 '내 책' 탭도 같이 쓰므로 #wrTabs 에만 건다. */
#wrTabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
#wrTabs .mb-tab{padding:8px 4px;text-align:center;font-size:12px;white-space:nowrap;min-width:0;}
@media(max-width:359px){ #wrTabs .mb-tab{font-size:11px;padding:8px 2px;} }
@media(min-width:520px){ #wrTabs{display:flex;} #wrTabs .mb-tab{padding:7px 13px;font-size:12.5px;} }
.mb-tab.add{border-style:dashed;color:var(--primary);}
.mb-shelfbar{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-sub);margin:0 0 12px;}
.mb-hint{display:flex;align-items:center;gap:10px;background:var(--primary-bg);border:1px solid color-mix(in srgb,var(--primary) 25%,transparent);border-radius:10px;padding:10px 14px;font-size:12.5px;color:var(--text-sub);margin:0 0 14px;}
.mb-hint svg{vertical-align:-3px;}
.mb-hint b{margin-left:auto;cursor:pointer;font-size:15px;color:var(--text-light);}
.mb-tag{display:inline-block;font-size:11px;font-weight:700;color:var(--text-sub);background:var(--bg-card);border:1px solid var(--border);border-radius:6px;padding:1px 7px;margin-top:4px;}
.mb-mi{display:flex;align-items:center;gap:12px;padding:13px 4px;border-top:1px solid var(--border);cursor:pointer;}
.mb-mi:hover b{color:var(--primary);}
.mb-mi .ic{width:34px;height:34px;border-radius:50%;background:var(--primary-bg);color:var(--primary);display:flex;align-items:center;justify-content:center;flex:none;font-weight:800;}
.mb-mi .ic svg{width:17px;height:17px;}
.mb-mi b{display:block;font-size:15px;} .mb-mi span:not(.ic){font-size:12px;color:var(--text-light);}
.mb-mi i{margin-left:auto;color:var(--text-light);font-style:normal;}
.mb-mi.sm{padding:10px 4px;} .mb-mi.sm b{font-size:13.5px;} .mb-mi.sm .ic{width:28px;height:28px;}
/* 10/10 사장님 양식 개편 — 서평·독후감 줄의 '간단히/자세히' 두 버튼, 메뉴 × 닫기, 네 줄 입력 양식 */
.mb-mi.mb-mi-forms{cursor:default;align-items:flex-start;} .mb-mi.mb-mi-forms:hover b{color:inherit;}
.mb-forms{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px;}
.mb-form{font-family:inherit;border:1px solid var(--border);background:var(--bg-card);color:var(--text);border-radius:10px;padding:8px 6px;cursor:pointer;font-size:13px;font-weight:800;line-height:1.2;}
.mb-form small{display:block;font-weight:600;font-size:11px;color:var(--text-light);margin-top:2px;}
.mb-form.on{background:var(--primary-bg);border-color:color-mix(in srgb,var(--primary) 45%,transparent);color:var(--primary);} .mb-form.on small{color:var(--primary);}
.mb-form:hover{border-color:var(--primary);}
.bm-x{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:8px;border:1px solid var(--border);background:var(--bg-card);color:var(--text-sub);font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;}
.bm-x:hover{color:var(--text);border-color:var(--gold);}
.wr-form-tag{display:inline-block;margin-left:8px;font-size:11.5px;font-weight:700;color:var(--primary);background:var(--primary-bg);border-radius:6px;padding:2px 7px;vertical-align:middle;}
.wr-brief{display:flex;flex-direction:column;gap:12px;}
.wr-bq b{display:block;font-size:14px;color:var(--text);} .wr-bq span{display:block;font-size:12px;color:var(--text-light);margin:2px 0 6px;}
.wr-long textarea.wr-ba{flex:none;min-height:0;height:auto;resize:none;line-height:1.6;font-size:14px;}
.wr-switch{font-size:12.5px;color:var(--primary);font-weight:700;cursor:pointer;margin-top:10px;text-decoration:underline;text-underline-offset:2px;}
.mb-mi.danger .ic{background:rgba(220,38,38,.08);color:#dc2626;} .mb-mi.danger b{color:#dc2626;}
.mb-sep{height:6px;}
.wr-foot{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--text-light);margin-top:8px;flex-wrap:wrap;}
.wr-pub{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-sub);font-weight:600;cursor:pointer;margin-left:auto;}
.wr-pub input{width:15px;height:15px;accent-color:var(--primary);}
.wr-go{width:100%;justify-content:center;padding:12px;margin-top:14px;font-size:14px;}
.wr-go:disabled,.bm-btn.fill:disabled{opacity:.45;cursor:default;}
.wr-back{font-size:13px;color:var(--text-light);margin-top:12px;cursor:pointer;}
.bm-modal.wide{max-width:760px;height:min(88vh,820px);display:flex;flex-direction:column;}
.wr-long{display:flex;flex-direction:column;flex:1;min-height:0;}
.wr-lh{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px;}
.wr-lt{font-size:17px;font-weight:800;} .wr-ls{font-size:12.5px;color:var(--text-light);margin-top:2px;}
.wr-intro{background:var(--primary-bg);border-radius:10px;padding:13px 16px;font-size:13px;color:var(--text-sub);line-height:1.6;margin-bottom:12px;}
.wr-intro .wr-it{font-weight:800;color:var(--text);margin-bottom:3px;} .wr-intro .wr-it b{color:var(--primary);}
.wr-long textarea{flex:1;min-height:220px;resize:none;line-height:1.7;}
.wr-long .wr-foot{margin-top:12px;}
.wr-item{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:13px 16px;margin-bottom:10px;}
.wr-im{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--text-light);flex-wrap:wrap;} .wr-im b{color:var(--text);font-size:13px;}
.wr-item p{margin:8px 0 0;font-size:14px;line-height:1.65;white-space:pre-wrap;color:var(--text);}
.wr-pub-on{color:#1B8F5A;font-weight:700;} .wr-pub-off{color:var(--text-light);}
@media(max-width:600px){.bm-modal.wide{height:92vh;max-width:100%;padding:16px;}}
/* ── ② 내 챌린지: 완료 결과 + 문항별 복습 ── */
.cg-done{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:16px 18px;margin-bottom:12px;cursor:pointer;transition:border-color .15s,transform .15s;}
.cg-done:hover{border-color:var(--gold);transform:translateY(-2px);}
.cg-done-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.cg-badge{font-size:11.5px;padding:4px 11px;border-radius:99px;background:#E7F7EE;color:#1B8F5A;font-weight:800;display:inline-flex;align-items:center;gap:4px;}
body.dark .cg-badge{background:rgba(31,169,113,.16);color:#46c98e;}
.cg-done-top b{font-size:15.5px;}
.cg-go{margin-left:auto;font-size:12.5px;color:var(--primary);font-weight:700;background:var(--primary-bg);padding:5px 12px;border-radius:99px;transition:background .15s,color .15s;}
.cg-done:hover .cg-go{background:var(--primary);color:#fff;}
body.dark .cg-done:hover .cg-go{color:#0f172a;}
.cg-v-score{color:var(--gold);}
.cg-v-ok{color:#1f9d6b;}
body.dark .cg-v-ok{color:#46c98e;}
.cg-v-muted{color:var(--text-light);}
.cg-done.active{border-color:rgba(212,169,59,.55);}
.cg-detail{overflow:hidden;max-height:0;opacity:0;transition:max-height .35s ease,opacity .25s ease;}
.cg-detail.open{max-height:6000px;opacity:1;margin:-6px 0 14px;}
.cg-detail-inner{background:var(--bg-card);border:1.5px solid rgba(212,169,59,.35);border-radius:14px;padding:18px;}
.cg-qq-h{font-size:14px;font-weight:800;margin:18px 0 12px;}
.cg-done-stats{display:flex;gap:24px;margin-top:13px;flex-wrap:wrap;}
.cg-done-stats>div{display:flex;flex-direction:column;gap:3px;}
.cg-done-stats span{font-size:11.5px;color:var(--text-light);}
.cg-done-stats b{font-size:15px;font-weight:800;}
.cg-empty{padding:18px 2px;color:var(--text-light);font-size:13.5px;}
.cg-back{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text-sub);background:none;border:1px solid var(--border);border-radius:9px;padding:7px 13px;cursor:pointer;font-family:inherit;font-weight:600;margin-bottom:16px;}
.cg-back:hover{border-color:var(--gold);color:var(--text);}
.cg-head{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;border-radius:16px;padding:20px 22px;margin-bottom:18px;}
body.dark .cg-head{color:#0f172a;}
.cg-head .rh-badge{font-size:11.5px;font-weight:800;background:rgba(255,255,255,.22);padding:4px 11px;border-radius:99px;display:inline-flex;align-items:center;gap:4px;}
.cg-head h3{font-size:20px;font-weight:800;margin:11px 0 4px;}
.cg-head .sub{font-size:13px;opacity:.85;}
.cg-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;}
.cg-t{background:rgba(255,255,255,.16);border-radius:12px;padding:12px 14px;}
.cg-t .k{font-size:11.5px;opacity:.85;}
.cg-t .v{font-size:22px;font-weight:800;margin-top:3px;}
.cg-gaugebox{display:flex;gap:20px;align-items:center;flex-wrap:wrap;}
.cg-gauge{width:104px;height:104px;border-radius:50%;flex:none;background:conic-gradient(var(--gold) calc(var(--p,0)*1%),var(--bg-input) 0);display:flex;align-items:center;justify-content:center;}
.cg-gauge .in{width:78px;height:78px;border-radius:50%;background:var(--bg-card);display:flex;flex-direction:column;align-items:center;justify-content:center;}
.cg-gauge .sc{font-size:23px;font-weight:800;line-height:1;}
.cg-gauge .sl{font-size:11px;color:var(--text-light);margin-top:2px;}
.cg-acc{border:1px solid var(--border);border-radius:12px;margin-bottom:9px;overflow:hidden;background:var(--bg-card);}
.cg-acc-h{display:flex;align-items:center;gap:11px;padding:13px 15px;cursor:pointer;}
.cg-acc-h:hover{background:var(--bg-input);}
.cg-acc-h .num{font-weight:800;color:var(--text-light);font-size:13px;width:24px;flex:none;}
.cg-acc-h .at{font-weight:700;flex:1;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cg-ox{font-size:11px;font-weight:800;padding:3px 9px;border-radius:99px;flex:none;}
.cg-ox-o{background:#E7F7EE;color:#1B8F5A;}
.cg-ox-x{background:#FCE9E9;color:#D14343;}
.cg-ox-n{background:var(--bg-input);color:var(--text-light);}
.cg-scene{font-size:11.5px;font-weight:700;color:var(--gold);margin-bottom:9px;}
.cg-acc .chev{transition:transform .2s;color:var(--text-light);width:16px;height:16px;flex:none;}
.cg-acc.open .chev{transform:rotate(90deg);}
.cg-acc-b{display:none;padding:0 15px 15px;}
.cg-acc.open .cg-acc-b{display:block;}
.cg-review{background:var(--bg-input);border:1px solid var(--border);border-radius:10px;padding:16px 17px;}
.cg-quote{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:14.5px;color:var(--text-sub);line-height:1.55;}
.cg-q{font-weight:800;font-size:14px;margin:14px 0 11px;}
.cg-opt{display:flex;gap:9px;align-items:flex-start;padding:10px 12px;border-radius:9px;font-size:13px;margin-bottom:7px;background:var(--bg-card);border:1px solid var(--border);color:var(--text-sub);}
.cg-opt .on{font-weight:800;flex:none;}
.cg-opt.correct{background:#E7F7EE;border-color:#BFE6CF;color:#176844;}
.cg-opt.wrong{background:#FCE9E9;border-color:#F2C9C9;color:#A53535;}
.cg-opt .mk{margin-left:auto;font-size:11px;font-weight:800;flex:none;}
.cg-bg{font-size:13px;color:var(--text-sub);line-height:1.7;margin-top:13px;padding-top:12px;border-top:1px solid var(--border);}
.cg-bg b{color:var(--gold);}
.cg-qq{display:flex;gap:13px;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:14px 15px;margin-bottom:11px;}
.cg-qq-t{font-size:14.5px;color:var(--text);line-height:1.55;margin-top:3px;}
@media(max-width:760px){.cg-tiles{grid-template-columns:1fr 1fr;}}
@media(max-width:760px){
  .bento{grid-template-columns:1fr 1fr;}
  .b-identity{grid-column:1/3;grid-row:auto;}
  .b-books,.b-heat{grid-column:1/3;}
}
/* 완독 인증 자동 제안 모달 */
.bs-cert-ta{width:100%;min-height:76px;border:1px solid var(--border);border-radius:10px;padding:10px;font-size:13.5px;line-height:1.6;resize:vertical;box-sizing:border-box;font-family:inherit;margin-top:12px;background:var(--bg-input);color:var(--text);}
.bs-cele-btn.ghost{background:var(--bg-input);color:var(--text-sub);margin-top:8px;}

/* ── 테스트 계정 칩 + 선택 모달 ── */
.bx-acc-chip{height:32px;display:inline-flex;align-items:center;gap:6px;padding:0 13px;border-radius:9px;border:1px solid var(--border);background:transparent;color:var(--text);font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap;letter-spacing:-0.2px;transition:border-color .15s;}
.bx-acc-chip:hover{border-color:var(--gold);}
/* 9/6 세명대 요청: 로그인하면 헤더에 학번 · 이름 · 마이페이지. 학번은 칩 안에 회색 숫자로, 마이페이지는 칩 왼쪽의 별도 버튼 */
.bx-acc-id{font-weight:600;color:var(--text-sub);font-variant-numeric:tabular-nums;letter-spacing:0;}
.bx-mypage{margin-right:6px;}
.bx-mypage.on{border-color:var(--gold);color:var(--text);}
/* 좁은 데스크톱(≤1200)·폰에선 학번을 접어 칩을 짧게 — 안 접으면 1100px에서 칩이 오른쪽 밖으로 잘렸다(9/6 실측) */
@media (max-width:1200px){ .bx-acc-id,.bx-acc-id+.bx-acc-sep{display:none;} }
/* 급한 것 하나를 점으로 — 사이드바 배지(MYLIB_BADGE)와 같은 판정을 헤더에서도 쓴다.
   들어가 보지 않아도 "지금 신경 쓸 게 있나"를 알게 하는 자리라서. */
.bx-acc-dot{width:7px;height:7px;border-radius:50%;flex:none;}
/* 계정 메뉴 — 로그인한 사람만 여는 작은 드롭다운(내 도서관·내 서재·로그아웃) */
.bx-acc-menu{position:absolute;top:38px;right:0;min-width:186px;background:var(--bg-card,var(--bg));border:1px solid var(--border);border-radius:11px;box-shadow:0 12px 32px rgba(0,0,0,.18);padding:6px;z-index:1300;display:none;}
.bx-acc-menu.open{display:block;}
.bx-acc-menu .mi{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:9px 11px;border:none;background:transparent;border-radius:8px;font-size:13px;font-weight:700;color:var(--text);cursor:pointer;font-family:inherit;text-align:left;}
.bx-acc-menu .mi:hover{background:var(--bg-input);}
.bx-acc-menu .mi .n{font-size:12px;font-weight:800;color:var(--text-light);}
.bx-acc-menu .sep{height:1px;background:var(--border);margin:5px 4px;}
.bx-acc-menu .who{padding:8px 11px 4px;font-size:12px;color:var(--text-light);line-height:1.5;}
.bx-acc-menu .who b{color:var(--text);font-size:13px;}
.bx-acc-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;z-index:1200;}
.bx-acc-overlay.open{display:flex;}
.bx-acc-modal{background:var(--bg-card);border-radius:18px;padding:26px;width:min(420px,90vw);box-shadow:0 20px 60px rgba(0,0,0,.3);}
.bx-acc-modal h3{font-size:18px;font-weight:800;margin:0 0 6px;}
.bx-acc-modal p{font-size:13px;color:var(--text-sub);margin:0 0 18px;line-height:1.6;}
.bx-acc-list{display:grid;gap:10px;}
.bx-acc-item{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;border:1.5px solid var(--border);background:var(--bg-input);color:var(--text);font-size:15px;font-weight:700;cursor:pointer;text-align:left;width:100%;transition:border-color .12s,transform .12s,background .12s;}
.bx-acc-item:hover{border-color:var(--primary);transform:translateY(-1px);}
.bx-acc-item.on{border-color:var(--primary);background:var(--primary-bg);}
.bx-acc-emoji{font-size:22px;}
.bx-acc-cur{margin-left:auto;font-size:11px;font-weight:800;color:var(--primary);background:var(--primary-bg);padding:2px 9px;border-radius:99px;}

/* ── 별이 챗봇 퀴즈 (카톡 스타일) ── */
.bx-hl{background:linear-gradient(transparent 55%, #ffe96b 55%);border-radius:2px;padding:0 1px;transition:background .3s;}
body.dark .bx-hl{background:linear-gradient(transparent 55%, rgba(212,169,59,.6) 55%);}
/* DB 퀴즈 장면 동기화 — 문장스팬 형광펜(scn-hl) + 문단 폴백(scn-flash) */
.viewer-pane.left span.psent.scn-hl{background:linear-gradient(transparent 55%, #ffe96b 55%);border-radius:2px;}
body.dark .viewer-pane.left span.psent.scn-hl{background:linear-gradient(transparent 55%, rgba(212,169,59,.6) 55%);}
.viewer-pane.left p.scn-flash{background:rgba(255,233,107,.35);border-radius:3px;box-shadow:inset 3px 0 0 var(--gold,#d4a93b);padding-left:8px;margin-left:-11px;transition:background .3s;}
body.dark .viewer-pane.left p.scn-flash{background:rgba(212,169,59,.22);}
.viewer-pane.right.bx-pane{padding:0;}                 /* 채팅창이 패널 끝까지 꽉 차게 */
.bx-chat{background:#b2c7d9;padding:16px 14px;min-height:100%;box-sizing:border-box;display:flex;flex-direction:column;}
body.dark .bx-chat{background:#26333f;}
.bx-row{display:flex;margin-bottom:13px;align-items:flex-start;gap:8px;}  /* 아바타=묶음 맨 위(카톡식) */
.bx-row.me{flex-direction:row-reverse;align-items:flex-end;}
.bx-ava{width:38px;height:38px;border-radius:13px;flex:0 0 38px;display:flex;align-items:center;justify-content:center;font-size:19px;background:linear-gradient(135deg,#fbbf24,#6366f1);box-shadow:0 2px 6px rgba(0,0,0,.18);}
.bx-col{display:flex;flex-direction:column;max-width:82%;}
.bx-name{font-size:11px;font-weight:700;color:#3a4a5a;margin:0 0 4px 2px;}
body.dark .bx-name{color:#c5d2dd;}
.bx-msg{padding:10px 13px;border-radius:15px;font-size:13.5px;line-height:1.62;word-break:break-word;box-shadow:0 1px 2px rgba(0,0,0,.08);margin-bottom:5px;}
.bx-col .bx-msg:last-child{margin-bottom:0;}
.bx-msg.bot{background:#fff;color:#1c1c1c;border-top-left-radius:5px;}
.bx-msg.me{background:#fae100;color:#191400;border-top-right-radius:5px;}
.bx-msg.react.ok{background:#e9f8ef;}
.bx-msg.react.no{background:#fdeeec;}
.bx-tag{display:inline-block;font-size:10px;font-weight:800;color:#6366f1;background:rgba(99,102,241,.13);padding:1px 7px;border-radius:6px;margin-right:6px;vertical-align:middle;}
.bx-expl{margin-top:7px;padding-top:7px;border-top:1px dashed rgba(0,0,0,.13);font-size:12.5px;color:#414b40;line-height:1.55;}
.bx-chips{display:flex;flex-direction:column;gap:7px;margin:0 0 14px 46px;}
.bx-chip{text-align:left;padding:11px 14px;border-radius:13px;border:1.5px solid #d4dde6;background:#fff;color:#222;font:inherit;font-size:13px;cursor:pointer;transition:border-color .12s,background .12s,transform .12s;box-shadow:0 1px 2px rgba(0,0,0,.06);}
.bx-chip:hover{border-color:#6366f1;background:#f3f4ff;transform:translateY(-1px);}
.bx-typing-bubble{display:inline-flex !important;align-items:center;gap:5px;padding:14px 16px !important;}
.bx-dot{width:7px;height:7px;border-radius:50%;background:#9aa7b3;display:inline-block;animation:bxdot 1.1s infinite ease-in-out;}
.bx-dot:nth-child(2){animation-delay:.16s;}
.bx-dot:nth-child(3){animation-delay:.32s;}
@keyframes bxdot{0%,60%,100%{opacity:.35;transform:translateY(0);}30%{opacity:1;transform:translateY(-4px);}}
.bx-inputbar{display:flex;gap:8px;margin-top:auto;padding-top:10px;}
.bx-inputbar input{flex:1;padding:11px 14px;border-radius:20px;border:1.5px solid #cfd9e2;font:inherit;font-size:13.5px;background:#fff;color:#1c1c1c;}
.bx-inputbar button{flex:0 0 auto;padding:0 18px;border-radius:20px;border:none;background:#fae100;color:#3a3000;font-weight:800;font-size:13px;cursor:pointer;}
.bx-next-row{margin-top:14px;text-align:center;}
.bx-next-btn{padding:13px 22px;border-radius:14px;border:none;background:#6366f1;color:#fff;font-weight:800;font-size:14px;cursor:pointer;box-shadow:0 4px 14px rgba(99,102,241,.35);}
.bx-next-btn:hover{background:#4f46e5;}
.bx-books-label{margin:16px 0 9px;font-size:12.5px;font-weight:700;color:#33445a;}
body.dark .bx-books-label{color:#c5d2dd;}
.bx-books{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:6px;}
.bx-book{display:flex;flex-direction:column;align-items:center;gap:6px;width:86px;padding:9px 8px;border-radius:13px;border:1.5px solid #d4dde6;background:#fff;cursor:pointer;transition:border-color .12s,transform .12s;}
.bx-book:hover{border-color:#6366f1;transform:translateY(-2px);}
.bx-book img{width:58px;height:82px;object-fit:cover;border-radius:6px;box-shadow:0 3px 8px rgba(0,0,0,.22);}
.bx-book-ph{width:58px;height:82px;border-radius:6px;background:#eef;display:flex;align-items:center;justify-content:center;font-size:26px;}
.bx-book span{font-size:11px;font-weight:700;color:#2a2a2a;text-align:center;line-height:1.3;}

/* 챌린지 마무리 액션 (선택 문장 / 퀴즈 만들기 / 한 줄 소감) */
.quest-actions{background:linear-gradient(135deg,var(--primary-bg),var(--bg-card));border:1px solid var(--border);border-radius:14px;padding:20px;margin-top:20px;}
.quest-actions h4{font-size:14px;font-weight:800;margin-bottom:12px;color:var(--primary);}
.quest-action-item{display:flex;gap:10px;align-items:start;padding:10px 0;border-bottom:1px dashed var(--border);}
.quest-action-item:last-child{border-bottom:none;}
.quest-action-icon{color:var(--primary);display:flex;align-items:center;}
.quest-action-icon .icon{width:18px;height:18px;}
.quest-action-text{flex:1;font-size:12px;line-height:1.5;}
.quest-action-text b{display:block;font-size:13px;color:var(--text);margin-bottom:2px;}
.copy-warning{font-size:10px;color:var(--danger);margin-top:4px;font-weight:700;}

.viewer-footer{padding:12px 22px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:var(--bg-input);font-size:13px;color:var(--text-sub);}
/* 몰입 모드 (모바일: 본문 탭 → 바 숨김) — 진행률 바는 유지 */
.viewer-shell.chrome-hidden .viewer-header,
.viewer-shell.chrome-hidden .viewer-footer,
.viewer-shell.chrome-hidden .pane-tabs{display:none !important;}
/* 8/30 사장님: 검색어를 넣으려 하면 뷰어 메뉴가 올라와 검색창을 덮어 입력이 안 됐다 —
   검색이 열려 있는 동안에는 메뉴를 숨기지 않고, 검색창을 메뉴 아래에 나란히 둔다 */
.viewer-shell.searching .viewer-header{display:flex !important;}
/* ── 종이책 페이지 넘김 (모바일 전용 · 장별 CSS 칼럼 조판) ── */
.paged-view{display:none;position:absolute;inset:0;background:var(--bg-card);z-index:1;}
.viewer-body.pg-active{display:none !important;}
.paged-clip{position:absolute;inset:0;overflow:hidden;}
.paged-flow.viewer-pane{position:absolute;padding:0 !important;overflow:visible !important;border:0 !important;background:transparent !important;
  column-fill:auto;-webkit-column-fill:auto;
  transform:translateX(0);transition:transform .32s cubic-bezier(.33,0,.2,1);will-change:transform;}
.paged-flow.no-anim{transition:none !important;}
.paged-flow .cv-chunk{content-visibility:visible !important;contain:none !important;}
.paged-flow h3.ch-title{margin:0 0 .6em !important;padding:0 !important;border:0 !important;break-after:avoid;}
.paged-flow .chapter-anchor{display:block;}
.paged-info{position:absolute;bottom:4px;left:0;right:0;text-align:center;font-size:11px;color:var(--text-light);pointer-events:none;letter-spacing:.3px;transition:opacity .2s;}
.viewer-shell.chrome-hidden .paged-info{opacity:0;}
/* 자동 업데이트 배너 */
.update-banner{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:200;background:var(--primary);color:#fff;padding:9px 9px 9px 18px;border-radius:30px;font-size:13px;font-weight:700;box-shadow:0 12px 32px rgba(0,0,0,.3);display:flex;align-items:center;gap:10px;max-width:92vw;}
body.dark .update-banner{background:var(--gold);color:#0f172a;}
.update-banner button{background:#fff;color:var(--primary);border:0;border-radius:20px;padding:6px 15px;font-weight:800;cursor:pointer;font-size:12.5px;}
body.dark .update-banner button{background:#0f172a;color:var(--gold);}
.viewer-actions{display:flex;gap:8px;}
.viewer-action{padding:8px 14px;border-radius:8px;background:var(--bg-card);border:1px solid var(--border);font-size:12px;font-weight:700;cursor:pointer;color:var(--text);white-space:nowrap;}
.viewer-action:hover{border-color:var(--primary);color:var(--primary);}
.viewer-action.primary{background:var(--primary);color:#fff;border-color:var(--primary);}
body.dark .viewer-action.primary{background:var(--gold);color:#0f172a;border-color:var(--gold);}
/* 모바일 본문/번역(퀴즈) 탭 — PC에서는 숨김, 모바일에서만 flex */
.pane-tabs{display:none;gap:6px;padding:8px 12px;background:var(--bg-input);border-top:1px solid var(--border);}
.pane-tabs .pt-btn{flex:1;padding:11px;border-radius:10px;background:var(--bg-card);border:1px solid var(--border);font-size:13px;font-weight:800;color:var(--text-sub);cursor:pointer;}
.pane-tabs .pt-btn.on{background:var(--primary);color:#fff;border-color:var(--primary);}
body.dark .pane-tabs .pt-btn.on{background:var(--gold);color:#0f172a;border-color:var(--gold);}

/* ═══════════════════════════════════════════════════════════
   12. 검색
   ═══════════════════════════════════════════════════════════ */
.search-bar{margin-bottom:24px;position:relative;max-width:600px;}
.search-input{
  width:100%;padding:14px 20px 14px 48px;border:1.5px solid var(--border);
  background:var(--bg-card);border-radius:14px;font-size:14px;color:var(--text);
}
.search-input:focus{outline:none;border-color:var(--primary);}
.search-icon{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--text-light);display:flex;align-items:center;}
.search-icon .icon{width:18px;height:18px;}

/* 반응형 */
@media (max-width:900px){
  .program-grid{grid-template-columns:1fr;}
  .stat-row{grid-template-columns:repeat(2,1fr);}
  /* 밀리의서재식 2줄 헤더 — 위: 로고+언어/테마, 아래: 메뉴 탭 */
  :root{--header-h:98px;}
  /* 헤더는 딱 두 줄 — 윗줄: 로고 + 언어/계정, 아랫줄: 메뉴 탭.
     ⚠️ 예전엔 로고·계정칩이 줄어들지 않는 고정폭이라, 글자를 키운 폰이나 이름이 긴 계정에서
        계정칩이 셋째 줄로 내려갔다. 그런데 헤더 높이는 98px로 고정돼 있어서 셋째 줄(메뉴 탭)이
        헤더 밖으로 삐져나와 본문 글 위에 '떠 있는 것처럼' 보였다(8/29 사장님 지적).
        → ①윗줄 두 칸이 줄어들며 한 줄을 지키게 하고 ②그래도 넘치면 헤더가 늘어나도록 높이를 자동으로. */
  .header{height:auto;min-height:var(--header-h);flex-wrap:wrap;align-content:flex-start;gap:0;padding:0 20px;}
  /* 8/30 사장님: 여백이 헤더와 어긋나 보였다 — 헤더와 본문을 같은 값으로 (당시 14px).
     8/31 사장님: 표지 줄 풀블리드 후 14px가 초라해 균형이 깨짐 — 둘 다 20px로 올려 정렬 유지.
     표지 줄(.ml-car)은 --page-pad만큼 음수 마진이라 여백을 키워도 여전히 화면 끝까지 나간다. */
  .page{--page-pad:20px;padding-left:var(--page-pad);padding-right:var(--page-pad);}
  .brand-logo{order:1;min-height:50px;display:flex;align-items:center;flex:0 1 auto;min-width:0;overflow:hidden;}
  /* flex-basis:0 → '얼마나 넓어야 하는지'를 0으로 봐서 절대 다음 줄로 밀리지 않는다. 남는 폭을 채우고 안에서 줄어든다. */
  .hdr-actions{order:2;min-height:50px;display:flex;align-items:center;flex:1 1 0;min-width:0;justify-content:flex-end;overflow:hidden;margin-left:12px;}
  .lang-select{flex:0 0 auto;max-width:76px;padding:0 4px;font-size:11.5px;}
  /* 계정 칩은 span으로 한 겹 싸여 있다 — 줄어들어야 하는 건 그 바깥 span 쪽이다
     (여기를 안 풀어주면 좁은 폰에서 칩이 버티는 바람에 옆의 언어 선택이 잘려 나갔다) */
  .bx-acc-wrap{flex:0 1 auto;min-width:0;overflow:hidden;}
  .bx-acc-chip{flex:0 1 auto;min-width:0;overflow:hidden;max-width:100%;}
  /* 이름이 길면 이름만 말줄임(… ) — '다시 로그인' 같은 할 일 안내는 끝까지 보이게 */
  .bx-acc-name{display:inline-block;max-width:4.6em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom;}
}
/* 아주 좁은 폰(320px대): 이름을 글자 부스러기로 남기지 말고 통째로 접는다 — 할 일('다시 로그인')만 남김 */
@media (max-width:359px){
  .bx-acc-name,.bx-acc-sep{display:none;}
}
@media (max-width:900px){
  /* 8/31 사장님: 탭 '도서관' 앞이 유독 비어 보였다 — 데스크톱용 margin-left:28px가 모바일에도 남아
     로고(20px)보다 탭 글자가 37px나 안쪽에서 시작했다. 여백을 지우고 아래에서 양끝 탭 글자를 20px에 맞춘다. */
  .gnb{order:3;flex-basis:100%;width:100%;min-height:48px;gap:0;margin-left:0;align-items:stretch;justify-content:space-between;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-top:1px solid var(--border);}
  .gnb.gnb-scroll{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);}
  .gnb::-webkit-scrollbar{display:none;}
  /* 모바일: 호버 드롭다운 비활성 → 인페이지 탭으로 권역 전환 */
  .gnb-drop:hover .gnb-menu{display:none;}
  /* 인페이지 권역 스위치(cl-tabs)는 GNB에 세계고전/International 탭이 직접 생기면서 중복 → 숨김 */
  .cl-tabs{display:none;}
  .cl-locale-head{display:none;}
  .gnb-item{display:flex;align-items:center;padding:0 9px;font-size:13px;white-space:nowrap;flex:0 0 auto;border-radius:0;background:none;color:var(--text-sub);}
  .gnb-item::after{left:9px;right:9px;}
  /* 양끝 탭은 바깥쪽 여백을 빼서 글자가 로고·본문과 같은 20px 선에서 시작·끝나게 (밑줄도 같이) */
  .gnb-item:first-child{padding-left:0;}
  .gnb-item:last-child{padding-right:0;}
  .gnb-item:first-child::after{left:0;}
  .gnb-item:last-child::after{right:0;}
}
/* 8/31: 탭 이름을 폰에서도 줄이지 않기로 함(‘우리 도서관’·‘독서 챌린지’ 그대로).
   전체 이름 4개는 284px면 되는데 320px대 옛 기기만 4px 모자라, 그 구간에서만 글자·간격을 살짝 좁혀 한 줄을 지킨다. */
@media (max-width:360px){
  .gnb-item{padding:0 6px;font-size:12.5px;}
  .gnb-item::after{left:6px;right:6px;}
  .gnb-item:first-child{padding-left:0;}
  .gnb-item:last-child{padding-right:0;}
  .gnb.gnb-scroll .gnb-item:last-child{margin-right:28px;} /* 스크롤 끝에서 페이드에 안 가리게 */
  .gnb-item:hover{background:none;color:var(--text);}
  .gnb-item.active{background:none;color:var(--text);font-weight:700;}
  body.dark .gnb-item.active{background:none;color:#f1f5f9;}
  .hdr-div{display:none;}
  /* 8/16 사용자 지시: 밤낮 전환 버튼은 폰에서 숨김(기본 밝은 테마로 충분) */
  /* 학교 이름표가 빠진 자리에 계정 칩만 남는다 — 좁은 폰에서 언어 버튼을 밀지 않게 조인다 */
  .bx-acc-chip{padding:0 9px;font-size:11.5px;gap:5px;}
  .detail-layout{grid-template-columns:1fr;}
  .detail-cover{max-width:200px;margin:0 auto;}
}
@media (max-width:600px){
  /* 8/17 사장님 수정요청: 폰 통합검색 결과가 책 1권으로 화면을 다 채우던 것 → 밀리식 3열 그리드 */
  #page-search .book-grid{grid-template-columns:repeat(2,1fr);gap:10px;}          /* 별이 추천 카드(버튼 있음)는 2열 */
  #page-search .book-grid.us-grid{grid-template-columns:repeat(3,1fr);}           /* 키워드 결과(제목·저자만)는 3열 */
  #page-search .book-card{border-radius:9px;}
  #page-search .book-info{padding:7px 8px 9px;}
  #page-search .book-title{font-size:11.5px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.3;}
  #page-search .book-author{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  #page-search .bt-tag{font-size:9px;padding:1px 5px;margin-bottom:3px;}
  #page-search .book-cover{padding:8px;}
  #page-search .book-cover-title{font-size:11px;}
  #page-search .book-cover-author{font-size:9px;margin-top:4px;}
  #page-search .usc-act{font-size:11px;padding:6px 8px;white-space:normal;line-height:1.3;}
  .viewer-body{grid-template-columns:1fr;}
  .viewer-pane{padding:22px 18px;}
  .viewer-pane.right{display:none;}                          /* 기본: 본문(left)만 전체폭 */
  .viewer-body.mob-second .viewer-pane.left{display:none;}    /* 탭으로 두번째 칸 보기 */
  .viewer-body.mob-second .viewer-pane.right{display:block;}
  /* KO 1단 기본(pane-trans)은 데스크톱 전용 — 모바일은 위 탭이 담당하므로 중화(빈 화면 방지) */
  .viewer-body.pane-trans:not(.mob-second) .viewer-pane.left{display:block;}
  .viewer-body.pane-trans:not(.mob-second) .viewer-pane.right{display:none;}
  .pane-tabs{display:flex;}
  /* 8/14 사장님 수정요청: 뷰어 메뉴가 나타나도 책 글자가 밀리지 않게 — 메뉴를 본문 위에 겹쳐 띄운다(밀리 방식)
     ⚠️ .immersive(읽기 모드)에서만 — 챌린지 모드는 메뉴가 상시 떠 있어 겹치면 퀴즈 첫 줄이 가려진다 */
  .viewer-shell{position:relative;}
  .viewer-shell.immersive .viewer-header{position:absolute;top:0;left:0;right:0;z-index:40;}
  .viewer-shell.immersive .pane-tabs{position:absolute;bottom:0;left:0;right:0;z-index:40;border-top:1px solid var(--border);}
  .viewer-shell.immersive .reader-searchbar{position:absolute;top:0;left:0;right:0;z-index:42;}   /* 본문찾기는 헤더 자리를 대신 차지(브라우저식) */
  .viewer-shell.immersive.searching .reader-searchbar{position:static;}   /* 8/30: 검색 중엔 헤더 아래 제자리 — 헤더에 가리지 않게 */
  /* (삭제) .toc-drawer{z-index:45} — 소스 뒤의 기본 규칙(z:5)에 캐스케이드로 덮여 죽은 규칙이었음. .open{z:50}가 담당 */
  #paneToggleBtn{display:none!important;}                     /* 모바일은 하단 탭으로 대체 */
  /* 8/17 사장님 수정요청(폰 챌린지 = 본문 아래 퀴즈, 한 화면 스크롤): 본문/퀴즈 탭 전환 대신 두 칸을 위아래로 쌓고 몸통이 스크롤 */
  .viewer-body.chal-stack{display:block;overflow-y:auto;min-height:0;-webkit-overflow-scrolling:touch;}
  .viewer-body.chal-stack .viewer-pane.left,.viewer-body.chal-stack .viewer-pane.right{display:block !important;overflow:visible;height:auto;min-height:0;}
  .viewer-body.chal-stack .viewer-pane.left{border-right:0;border-bottom:1px solid var(--border);}
  .viewer-body.chal-stack .viewer-pane.right{padding-bottom:110px;}   /* 바닥 '챌린지 닫기' 바(스크롤 올리면 뜸)에 마지막 문항이 안 가리게 */
  .viewer-body.chal-stack .viewer-pane.right > .viewer-pane-label{display:none;}   /* "오른쪽 — 챌린지 미션" 라벨은 위아래 배치에선 뜻이 안 맞음 */
  /* 8/17: 뷰어 메뉴는 스크롤 방향으로 — 위로 올리면 헤더·바닥이 본문 위에 겹쳐 뜨고, 내리면 사라짐(챌린지 바닥 바 포함) */
  .viewer-shell.immersive .viewer-footer{position:absolute;bottom:0;left:0;right:0;z-index:40;}
  .quest-grid{grid-template-columns:repeat(3,1fr);}
  /* 리더 헤더 한 줄: 고스트 아이콘 왼쪽 + 모드칩·Aa·닫기 오른쪽 (킨들/애플북스 결 — 2줄+박스버튼 정리 2026-07-23) */
  .viewer-header{flex-wrap:nowrap;gap:2px;padding:7px 8px;align-items:center;}
  .viewer-header > .vh-nav{order:0;flex:1 1 auto;min-width:0;padding-right:0;}
  .viewer-header > #krLangSel{order:1;flex:none;max-width:110px;}   /* 8/30: 언어 변경 (옛 모드칩 자리) */
  .viewer-header > .reader-aa{order:2;margin-left:2px;display:inline-flex;border:0;background:transparent;}
  .viewer-header > .viewer-close{order:3;position:static;padding:6px 6px 6px 4px;font-size:19px;flex:none;}
  .viewer-header > .reader-toolbar{display:none !important;}   /* 읽기설정 버튼 다발 숨김 → Aa 시트 */
  .viewer-header .viewer-title,.viewer-header .viewer-author{display:none;}  /* 제목 제거 — 방금 연 책이라 중복, 전자책 리더 관행 */
  .vh-nav{gap:0;}
  .vh-nav .reader-btn{font-size:0;padding:8px 6px;border:0;background:transparent;}   /* 고스트 아이콘 — 테두리 박스 제거 */
  .vh-nav .reader-btn .icon{width:20px;height:20px;}
  .reader-settings-sheet{right:10px;min-width:210px;}
  /* 바닥 바: 장황한 안내문 숨기고 버튼만 꽉 차게 — 글자 세로쪼개짐 방지 */
  .viewer-footer{padding:10px 12px calc(10px + env(safe-area-inset-bottom));gap:8px;}
  .viewer-footer > #viewerFooterInfo{display:none;}
  .viewer-footer > .viewer-actions{flex:1;justify-content:space-between;gap:6px;}
  .viewer-action{padding:9px 10px;}
  .reader-toast{bottom:150px;} /* 하단 버튼(액션+이전다음 2줄)을 안 가리게 */
}

/* ═══════════════════════════════════════════════════════════
   리더 모드 추가 (밀리 결 도입 — 폰트/크기/줄간격/세피아/TOC/진행률/하이라이트/복사차단)
   ═══════════════════════════════════════════════════════════ */
.reader-toolbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.reader-btn{padding:6px 10px;border-radius:8px;background:var(--bg-card);border:1px solid var(--border);font-size:12px;font-weight:700;color:var(--text);cursor:pointer;display:inline-flex;align-items:center;gap:4px;}
.reader-btn.bm-saved{background:var(--primary)!important;color:#fff!important;border-color:var(--primary)!important;}
body.dark .reader-btn.bm-saved{background:var(--gold)!important;color:#0f172a!important;}
.reader-toast{position:fixed;left:50%;bottom:88px;transform:translateX(-50%) translateY(8px);z-index:9999;background:rgba(20,24,40,.94);color:#fff;padding:10px 16px;border-radius:10px;font-size:12.5px;font-weight:700;box-shadow:0 12px 32px rgba(0,0,0,.32);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:90vw;text-align:center;}
.reader-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
/* 퀴즈 정답/오답 인라인 피드백 (alert 대체) */
.quiz-fb{margin-top:8px;padding:9px 12px;border-radius:8px;font-size:12.5px;font-weight:700;line-height:1.5;animation:fbIn .25s ease;}
.quiz-fb.ok{background:rgba(29,107,72,.12);color:#1d6b48;}
.quiz-fb.no{background:rgba(192,57,43,.10);color:#c0392b;}
body.dark .quiz-fb.ok{background:rgba(80,200,140,.16);color:#6fd9a6;}
body.dark .quiz-fb.no{background:rgba(230,90,80,.16);color:#ef9a8f;}
@keyframes fbIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
/* 축하 모달 (완료·인증 alert 대체) — 네이비/흰카드/골드 */
.bs-cele{position:fixed;inset:0;z-index:260;/* 8/17: 뷰어(.viewer-overlay z200) 위에 떠야 폰에서도 마지막 퀴즈 직후 완주 축하가 보인다 (전엔 140이라 뷰어 뒤에 숨어 닫아야 보였음) */background:rgba(12,18,38,.55);display:flex;align-items:center;justify-content:center;animation:fbIn .2s ease;}
.bs-cele-card{width:min(330px,86vw);background:var(--bg-card);border-radius:18px;padding:28px 24px 20px;text-align:center;box-shadow:0 24px 64px rgba(0,0,0,.35);}
.bs-cele-badge{width:54px;height:54px;border-radius:50%;background:var(--gold);color:#1a1208;font-size:26px;font-weight:900;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;}
.bs-cele-title{font-size:17px;font-weight:800;line-height:1.4;color:var(--text);}
.bs-cele-sub{font-size:12px;color:var(--text-light);margin-top:6px;line-height:1.6;}
.bs-cele-rows{margin:14px 0 4px;text-align:left;background:var(--bg-input);border-radius:12px;padding:12px 14px;}
.bs-cele-row{font-size:13px;color:var(--text-sub);line-height:1.5;padding:4px 0;}
.bs-cele-row b{color:var(--text);}
.bs-cele-btn{width:100%;margin-top:14px;background:var(--gold);color:#1a1208;border:none;border-radius:10px;padding:12px;font-size:14px;font-weight:800;cursor:pointer;}
.reader-btn:hover{background:var(--primary-bg);}
.reader-btn.on{background:var(--primary);color:#fff;border-color:var(--primary);}
.reader-divider{width:1px;height:18px;background:var(--border);margin:0 4px;}

/* 뷰어 본문 = 리더 prefs 적용 */
.viewer-body{
  --reader-fs:17px; --reader-lh:1.85; --reader-ff:'Pretendard Variable',serif;
}
.viewer-pane{font-size:var(--reader-fs);line-height:var(--reader-lh);font-family:var(--reader-ff);}
.viewer-pane p{margin:0 0 1em 0;}
.viewer-pane .chapter-anchor{scroll-margin-top:20px;}
.viewer-pane .cv-chunk{content-visibility:auto;contain-intrinsic-size:auto 700px;}
/* 정렬본(대작 아님): 가상화 끔 → 좌우 문단 높이잠금(짧은쪽 빈공간 채움)이 스크롤해도 안 사라져 항상 정렬. */
.sent-novirt .viewer-pane .cv-chunk{content-visibility:visible;contain-intrinsic-size:auto;}
.viewer-loading{color:var(--text-light);text-align:center;padding:48px 0;font-size:14px;}
.viewer-pane h3.ch-title{font-size:1.15em;font-weight:800;margin:1.6em 0 0.6em;padding-top:0.4em;border-top:1px solid var(--border);color:var(--primary);}

/* ═══ 속표지(첫 화면) — 왼쪽 칸=표지, 오른쪽 칸=목차. 스크롤 맨 위 한 판 ═══
   ⚠️ 이 안에는 <p>를 절대 쓰지 않는다. 좌우 문단 1:1 정렬(setupParallel)이 <p> 개수로
      정렬책을 판정하므로 여기에 <p>가 하나라도 들어가면 책 전체 수평정렬이 꺼진다.
   ⚠️ PC에서 좌우 높이가 반드시 같아야 한다(height:100%) — 비율 동기 스크롤이 어긋나지 않게. */
.book-front{height:100%;min-height:380px;box-sizing:border-box;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;padding:8px 0 26px;margin-bottom:30px;
  border-bottom:1px solid rgba(127,127,127,.28);}
/* 읽기 배경(밝게·세피아·어둡게)이 글자색을 바꾸므로 고정색 대신 현재 글자색의 농도로만 표현한다 */
.bf-cover{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;min-height:0;}
.bf-cover img{max-height:46vh;max-width:74%;border-radius:4px;box-shadow:0 10px 30px rgba(0,0,0,.28);}
.bf-nocv{width:150px;height:210px;border-radius:4px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#2f3542,#1b1f27);color:#e8e2d4;font-size:13px;padding:14px;text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,.28);}
.bf-t{font-size:1.22em;font-weight:800;line-height:1.35;letter-spacing:-.01em;}
.bf-a{font-size:.92em;opacity:.72;}
.bf-meta{font-size:.78em;opacity:.5;letter-spacing:.04em;}
.bf-side{width:100%;max-width:34em;display:flex;flex-direction:column;min-height:0;flex:1 1 auto;}
.bf-h{font-size:10px;font-weight:800;opacity:.5;text-transform:uppercase;letter-spacing:1.5px;
  margin-bottom:12px;flex:none;}
.bf-toc{overflow-y:auto;min-height:0;flex:1 1 auto;font-size:.9em;line-height:1.6;}
.bf-toc .bf-ch{padding:7px 10px;border-radius:5px;cursor:pointer;opacity:.8;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bf-toc .bf-ch:hover{background:rgba(127,127,127,.16);opacity:1;}
.bf-toc .bf-ch.done{opacity:.42;}
.bf-toc .bf-ch .bf-sub{opacity:.62;font-size:.9em;margin-left:8px;}   /* '제1장'만 있는 칸에 붙이는 원제 부제 */
.bf-intro{opacity:.85;font-size:.92em;line-height:1.75;}
.bf-go{flex:none;display:block;text-align:center;}
.bf-go button{border:1px solid currentColor;background:transparent;color:inherit;opacity:.6;cursor:pointer;
  border-radius:999px;padding:9px 22px;font-size:.85em;font-weight:700;font-family:inherit;}
.bf-go button:hover{background:rgba(127,127,127,.16);opacity:1;}
/* PC 2단: 왼쪽엔 표지만, 오른쪽엔 목차만 */
@media(min-width:601px){
  .viewer-pane.left .bf-side{display:none;}
  .viewer-pane.right .bf-cover,.viewer-pane.right .bf-go{display:none;}
  .viewer-pane.left .bf-cover{flex:1 1 auto;justify-content:center;}
  /* '원문만/번역만'으로 한 칸만 볼 때는 그 칸 안에 표지 위·목차 아래로 함께 */
  .viewer-body.pane-orig .viewer-pane.left .bf-side{display:flex;}
  .viewer-body.pane-orig .viewer-pane.left .bf-cover{flex:none;}
  .viewer-body.pane-trans .viewer-pane.right .bf-cover{display:flex;flex:none;}
  .viewer-body.pane-trans .viewer-pane.right .bf-go{display:block;}
  .viewer-body.pane-orig .bf-cover img,.viewer-body.pane-trans .bf-cover img{max-height:30vh;}
}
/* 폰 1단: 보이는 칸 안에 표지 위·목차 아래로 함께.
   내용이 한 화면보다 길어 위에서부터 쌓이므로, 표지가 툴바에 붙지 않게 위 여백을 준다 */
@media(max-width:600px){
  /* 폰 읽기화면은 메뉴바(위)·본문/번역 탭(아래)이 본문 위에 겹쳐 뜬다 → 그만큼 비워둔다 */
  .book-front{height:auto;min-height:100%;padding:76px 0 72px;gap:24px;}
  .bf-cover img{max-height:34vh;}
  .bf-side{max-width:none;}
  .bf-toc{max-height:none;overflow:visible;}
}

/* ═══ 장르별 조판 (브런치: 템플릿은 예쁨보다 장르 적합성) — #viewerBody.gv-* ═══ */
/* 행간/글꼴크기는 독자 설정(--reader-*) 존중 → 정렬·들여쓰기·여백·단(段) 폭만 장르화 */
/* 시·서사시: 행을 그대로, 좌측 정렬, 좁은 단을 가운데로, 행 사이 촘촘·연(聯) 사이만 여백감 */
.gv-poem .viewer-pane p{text-align:left;text-indent:0;margin:0 auto .5em;max-width:32em;}
.gv-poem .viewer-pane.left{font-family:'Noto Serif KR',var(--reader-ff),serif;}
/* 소설: 첫 줄 들여쓰기 + 양끝맞춤 + 단락 촘촘(이야기 흐름) */
.gv-novel .viewer-pane p{text-align:left;text-indent:1.1em;margin:0 0 .4em;}
.gv-novel .viewer-pane .chapter-anchor > .cv-chunk:first-of-type > p:first-child{text-indent:0;}
/* 희곡: 내어쓰기(화자·지문 줄바꿈 가독), 좌측 정렬 */
.gv-drama .viewer-pane p{text-align:left;padding-left:1.5em;text-indent:-1.5em;margin:0 0 .55em;}
/* 철학·사상: 양끝맞춤, 단락 또렷이 구분(논지 단위), 편안한 단 폭 */
.gv-idea .viewer-pane p{text-align:left;margin:0 0 1.15em;max-width:38em;}
/* 수필·에세이: 미니멀, 좌측 정렬, 들여쓰기 없이 넉넉한 여백, 좁은 단 가운데 */
.gv-essay .viewer-pane p{text-align:left;text-indent:0;margin:0 auto 1.2em;max-width:33em;}

/* TOC 드로어 */
.toc-drawer{
  position:absolute;top:0;left:0;bottom:0;width:300px;background:var(--bg-card);border-right:1px solid var(--border);
  transform:translateX(-100%);transition:transform 0.25s ease;z-index:5;display:flex;flex-direction:column;
}
.toc-drawer.open{transform:translateX(0);z-index:50;}   /* 몰입 헤더(z:40)·자동숨김 헤더(z:20) 어느 쪽보다도 위 — 서랍 제목줄·✕가 가리면 못 닫는다 */
.toc-head{padding:14px 18px;border-bottom:1px solid var(--border);font-weight:800;font-size:14px;display:flex;justify-content:space-between;align-items:center;}
.toc-list{flex:1;overflow-y:auto;padding:8px 0;}
.toc-item{padding:10px 18px;font-size:13px;color:var(--text-sub);cursor:pointer;border-left:3px solid transparent;}
.toc-item:hover{background:var(--primary-bg);color:var(--text);}
.toc-item.active{background:var(--primary-bg);color:var(--primary);border-left-color:var(--primary);font-weight:700;}
.toc-item.done::after{content:' ✓';color:var(--success);font-weight:800;}

/* 진행률 */
.viewer-progress-wrap{position:relative;height:3px;background:var(--border);overflow:hidden;}
.viewer-progress-bar{position:absolute;left:0;top:0;bottom:0;background:var(--primary);width:0%;transition:width 0.2s;}
.viewer-prog-label{position:absolute;right:12px;bottom:10px;font-size:11px;font-weight:700;color:var(--text-light);background:color-mix(in srgb,var(--bg-input,#fff) 82%,transparent);padding:2px 8px;border-radius:999px;pointer-events:none;letter-spacing:.2px;transition:opacity .2s;z-index:3;}
.viewer-prog-label:empty{display:none;}
.viewer-shell.chrome-hidden .viewer-prog-label{opacity:0;}
/* 문장 인용 카드 모달 */
.qc-overlay{display:none;position:fixed;inset:0;z-index:6000;background:rgba(10,14,25,.72);backdrop-filter:blur(4px);align-items:center;justify-content:center;padding:20px;}
.qc-overlay.open{display:flex;}
.qc-modal{background:var(--bg-card,#fff);color:var(--text,#1a1a1a);border-radius:18px;padding:18px;width:min(420px,94vw);max-height:94vh;overflow:auto;box-shadow:0 24px 70px rgba(0,0,0,.4);}
.qc-head{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:800;margin-bottom:12px;}
.qc-head .qc-x{cursor:pointer;font-size:18px;color:var(--text-light);line-height:1;padding:2px 6px;}
.qc-canvas-wrap{width:100%;aspect-ratio:1/1;border-radius:12px;overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,.18);}
#qcCanvas{width:100%;height:100%;display:block;}
.qc-themes{display:flex;gap:9px;justify-content:center;margin:14px 0 6px;}
.qc-theme{width:30px;height:30px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .12s;}
.qc-theme:hover{transform:scale(1.1);}
.qc-theme.on{border-color:var(--primary,#c9a227);box-shadow:0 0 0 2px var(--bg-card,#fff),0 0 0 4px var(--primary,#c9a227);}
.qc-bi{display:flex;align-items:center;gap:7px;justify-content:center;font-size:12.5px;color:var(--text-sub);margin:8px 0 4px;cursor:pointer;user-select:none;}
.qc-bi input{width:16px;height:16px;accent-color:var(--primary,#c9a227);cursor:pointer;}
.qc-actions{display:flex;gap:10px;margin-top:14px;}
.qc-btn{flex:1;padding:13px;border-radius:11px;border:1px solid var(--border);background:var(--bg-input);color:var(--text);font-size:14px;font-weight:800;cursor:pointer;}
.qc-btn.primary{background:var(--gold,#c9a227);color:#1a1208;border:none;}
.qc-btn:active{transform:translateY(1px);}
.viewer-progress-text{font-size:11px;color:var(--text-light);font-variant-numeric:tabular-nums;margin-left:8px;}

/* 챌린지 모드 = 복사·드래그·우클릭 차단 */
.viewer-shell.mode-challenge .viewer-body{
  user-select:none; -webkit-user-select:none; -moz-user-select:none;
}
.viewer-shell.mode-challenge .viewer-body::selection{background:transparent;}

/* 하이라이트 (완독 모드에서만) */
.viewer-pane mark.hl{background:rgba(212,169,59,0.32);color:inherit;border-radius:2px;padding:0 1px;cursor:pointer;}
body.dark .viewer-pane mark.hl{background:rgba(212,169,59,0.45);}
body.sepia .viewer-pane mark.hl{background:rgba(212,169,59,0.55);}
/* 평행 하이라이트 — 한쪽 문단 클릭 시 원문·번역 같은 문단 강조 */
.viewer-pane p[data-pi]{transition:background .15s,box-shadow .15s;border-radius:3px;}
.viewer-pane p[data-pi]:hover{background:rgba(99,102,241,0.07);}
.viewer-pane p.pp-on,.viewer-pane p.pp-on:hover{background:rgba(212,169,59,0.18);box-shadow:inset 3px 0 0 var(--gold,#d4a93b);padding-left:8px;margin-left:-11px;}
body.dark .viewer-pane p.pp-on{background:rgba(212,169,59,0.26);}
/* 문장 단위 상호 하이라이트 (PC 호버 / 모바일 탭) */
.viewer-pane span.psent{border-radius:3px;transition:background .12s,box-shadow .12s;}
@media (hover:hover){ .viewer-pane span.psent{cursor:pointer;} }
.viewer-pane span.psent.ps-hot{background:rgba(212,169,59,0.24);}
body.dark .viewer-pane span.psent.ps-hot{background:rgba(212,169,59,0.32);}
.viewer-body.sent-mode .viewer-pane p[data-pi]:hover{background:transparent;}   /* 문장 모드: 문단 전체 감싸는 배경 제거 */
/* 금색 세로 바를 border-left가 아닌 배경 그라데이션으로 — 일부 기기(삼성 브라우저 등)에서 보더가
   둥근 배경 모서리 밖으로 꼬리처럼 삐져나오는 문제 원천 차단(배경은 radius에 항상 함께 잘림) */
.viewer-pane .sent-reveal{display:block;margin:7px 0 4px;padding:8px 12px 8px 15px;
  background:linear-gradient(to right, var(--gold,#d4a93b) 3px, rgba(212,169,59,0.10) 3px);
  border-radius:6px;font-size:14px;line-height:1.7;color:var(--text-sub);
  font-family:'Noto Serif KR',serif;}
body.dark .viewer-pane .sent-reveal{background:linear-gradient(to right, var(--gold,#d4a93b) 3px, rgba(212,169,59,0.14) 3px);}
/* 페이지모드 문장탭 번역 바 — 인라인 삽입은 다단 조판을 흔들어 하단 고정으로 표시 */
.pg-sent-reveal{position:fixed;left:12px;right:12px;bottom:calc(58px + env(safe-area-inset-bottom,0px));z-index:260;
  padding:10px 14px 10px 17px;max-height:38vh;overflow-y:auto;
  background:linear-gradient(to right, var(--gold,#d4a93b) 3px, var(--bg-card) 3px);
  border:1px solid var(--border);border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,0.18);
  font-size:14px;line-height:1.7;color:var(--text-sub);font-family:'Noto Serif KR',serif;}
/* 평행 하이라이트 — 원문에 형광펜 치면 번역쪽 같은 문단에 골드 마커 (은은하게, pp-on보다 약함) */
.viewer-pane p.hl-pair{box-shadow:inset 3px 0 0 rgba(212,169,59,.65);background:rgba(212,169,59,.06);padding-left:8px;margin-left:-11px;border-radius:3px;}
body.dark .viewer-pane p.hl-pair{background:rgba(212,169,59,.12);}
.hl-popup{
  position:fixed;z-index:120;background:var(--bg-card);border:1px solid var(--border);border-radius:10px;
  padding:6px;box-shadow:0 6px 24px rgba(0,0,0,0.15);display:none;gap:4px;
}
.hl-popup button{padding:6px 10px;border-radius:6px;font-size:12px;font-weight:700;color:var(--text);background:var(--bg-input);display:inline-flex;align-items:center;gap:5px;white-space:nowrap;}   /* nowrap: 모바일에서 "하이라이/트" 줄바꿈 깨짐 방지 */
.hl-popup button:hover{background:var(--primary-bg);}
@media (max-width:600px){ .hl-popup{padding:5px;gap:3px;} .hl-popup button{padding:6px 7px;font-size:11.5px;gap:4px;} }
/* 폰: 선택 툴바를 화면 하단 고정(8/18) — 위쪽 브라우저 기본 메뉴(복사·공유…)와 분리 */
.hl-popup.hl-popup-bottom{top:auto !important;bottom:calc(14px + env(safe-area-inset-bottom));z-index:6100;box-shadow:0 8px 28px rgba(0,0,0,.22);}   /* 좁은 화면: 4버튼 한 줄 유지 */

/* 독서 통계 칩 */
.reader-stats{display:inline-flex;gap:10px;align-items:center;font-size:11px;color:var(--text-sub);}
.reader-stats b{color:var(--text);font-weight:800;}
.reader-stats .dot{width:4px;height:4px;border-radius:50%;background:var(--border);}

/* 본문 검색바 */
.reader-searchbar{display:none;align-items:center;gap:6px;padding:8px 22px;background:var(--bg-input);border-bottom:1px solid var(--border);}
.reader-searchbar.open{display:flex;}
.reader-searchbar input{flex:1;max-width:360px;padding:7px 12px;border-radius:8px;border:1px solid var(--border);background:var(--bg-card);color:var(--text);font-size:13px;}
.viewer-pane mark.search-hit{background:#ffe066;color:#1a1a1a;border-radius:2px;}
.viewer-pane mark.search-hit.current{background:#ff9f1a;box-shadow:0 0 0 2px rgba(255,159,26,0.4);}

/* 독서노트 드로어 (우측) */
.notes-drawer{left:auto;right:0;border-right:none;border-left:1px solid var(--border);transform:translateX(100%);}
.notes-drawer.open{transform:translateX(0);}
.note-item{padding:12px 18px;border-bottom:1px solid var(--border);cursor:pointer;font-size:13px;}
.note-item:hover{background:var(--primary-bg);}
.note-item .note-quote{color:var(--text);border-left:3px solid var(--gold);padding-left:8px;line-height:1.6;}
.note-item .note-memo{color:var(--text-sub);font-size:12px;margin-top:5px;font-style:italic;}
.note-item .note-bk{color:var(--primary);font-weight:700;}
.note-empty{padding:16px 18px;color:var(--text-light);font-size:12px;line-height:1.7;}
.note-item{position:relative;padding-right:36px;}
.note-item .note-del{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:6px;font-size:11px;color:var(--text-light);background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.note-item .note-del:hover{background:var(--bg-input);color:#c0392b;}
.note-item .note-meta{font-size:10.5px;color:var(--text-light);margin-top:4px;}
/* 메모 있는 형광펜: 점선 밑줄 표시 */
.viewer-pane mark.hl.has-note,.paged-flow mark.hl.has-note{border-bottom:2px dotted #b8860b;}
/* 독서노트에서 점프해 왔을 때 잠깐 깜빡임 */
mark.hl.hl-flash{animation:hlFlash 1.4s ease;}
@keyframes hlFlash{0%,55%{background:rgba(212,169,59,0.85);}100%{background:rgba(212,169,59,0.32);}}
/* 메모 입력·형광펜 메뉴 (prompt 대체 인라인 박스) */
.hl-note-box{position:fixed;z-index:270;/* 8/17 사장님 수정요청(메모 창 안 뜸): 뷰어(.viewer-overlay z200) 뒤에 숨던 것 → 위로 */width:260px;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;box-shadow:0 10px 32px rgba(0,0,0,0.18);padding:10px;}
.hl-note-box textarea{width:100%;min-height:64px;border:1px solid var(--border);border-radius:8px;padding:8px;font-size:13px;line-height:1.5;resize:vertical;box-sizing:border-box;font-family:inherit;background:var(--bg-input);color:var(--text);}
.hl-note-box .hnb-note{font-size:12.5px;color:var(--text);line-height:1.55;padding:2px 2px 8px;}
.hl-note-box .hnb-row{display:flex;gap:6px;justify-content:flex-end;margin-top:8px;}
.hl-note-box .hnb-row button{padding:6px 12px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;}
.hl-note-box .hnb-cancel{background:var(--bg-input);color:var(--text-sub);}
.hl-note-box .hnb-save{background:var(--gold);color:#1a1208;}

/* 페인 보기 모드 (해외책 원문만/번역만/나란히) */
.viewer-body.pane-orig .viewer-pane.right{display:none;}
.viewer-body.pane-orig .viewer-pane.left{grid-column:1 / -1;}
.viewer-body.pane-trans .viewer-pane.left{display:none;}
.viewer-body.pane-trans .viewer-pane.right{grid-column:1 / -1;}


/* 사전 팝업 (외국인 학생용 다국어) */
.dict-popup{
  position:fixed;z-index:130;width:300px;max-width:88vw;background:var(--bg-card);
  border:1px solid var(--border);border-radius:14px;box-shadow:0 10px 40px rgba(0,0,0,0.2);
  display:none;overflow:hidden;
}
.dict-popup.open{display:block;}
.dict-head{padding:12px 16px;background:var(--primary-bg);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.dict-word{font-size:18px;font-weight:800;color:var(--primary);}
.dict-close{cursor:pointer;color:var(--text-light);font-size:14px;}
.dict-body{padding:12px 16px;max-height:300px;overflow-y:auto;}
.dict-ko{font-size:13px;line-height:1.6;color:var(--text);margin-bottom:10px;}
.dict-row{display:flex;gap:8px;padding:7px 0;border-top:1px solid var(--border);font-size:12px;}
.dict-lang{flex:0 0 38px;font-weight:800;color:var(--accent);font-size:11px;padding-top:1px;}
.dict-trans{flex:1;line-height:1.5;}
.dict-trans b{color:var(--text);font-weight:700;}
.dict-trans span{color:var(--text-sub);}
.dict-empty{font-size:12px;color:var(--text-light);line-height:1.6;}
.dict-links{margin-top:10px;padding-top:8px;border-top:1px solid var(--border);}
.dict-links a{font-size:12px;font-weight:700;color:var(--primary);text-decoration:none;}
.dict-links a:hover{text-decoration:underline;}
.dict-lang-tabs{display:flex;gap:4px;padding:8px 16px 0;flex-wrap:wrap;}
.dict-lang-tab{font-size:11px;font-weight:700;padding:3px 9px;border-radius:12px;border:1px solid var(--border);cursor:pointer;color:var(--text-sub);}
.dict-lang-tab.on{background:var(--primary);color:#fff;border-color:var(--primary);}

@media (max-width:780px){
  .toc-drawer{width:88%;}
  .reader-toolbar{gap:4px;}
  .reader-btn{padding:5px 8px;font-size:11px;}
}
/* ═══ AI추천 (ai.html 이식) — 앱 테마(네이비/골드)로 ═══ */
#page-airec .air-hero{text-align:center;padding:44px 0 28px;}
#page-airec .air-kicker{font-size:12px;font-weight:800;letter-spacing:3px;color:var(--gold);margin-bottom:14px;}
#page-airec .air-h1{font-size:30px;font-weight:800;letter-spacing:-1px;line-height:1.3;color:var(--text);}
#page-airec .air-sub{color:var(--text-light);font-size:13.5px;margin-top:12px;line-height:1.65;}
#page-airec .air-searchwrap{max-width:600px;margin:26px auto 0;}
#page-airec .air-searchbar{display:flex;gap:8px;align-items:center;background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:8px 8px 8px 18px;box-shadow:0 10px 30px rgba(20,25,45,.06);transition:.18s;}
#page-airec .air-searchbar:focus-within{border-color:var(--primary);box-shadow:0 12px 34px rgba(26,41,66,.13);}
#page-airec .air-searchbar input{flex:1;border:0;outline:0;font-size:15px;background:transparent;color:var(--text);font-family:inherit;padding:8px 0;}
#page-airec .air-searchbar input::placeholder{color:var(--text-light);}
#page-airec .air-send{flex:0 0 auto;background:var(--gold);color:#0f172a;border:0;border-radius:12px;width:46px;height:42px;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s;}
#page-airec .air-send:hover{opacity:.9;}
#page-airec .air-send:disabled{opacity:.45;}
#page-airec .air-chips{display:flex;flex-wrap:nowrap;gap:8px;justify-content:safe center;margin-top:16px;overflow-x:auto;padding:2px 10px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
#page-airec .air-chips::-webkit-scrollbar{display:none;}
#page-airec .air-chip{flex:0 0 auto;white-space:nowrap;font-size:12.5px;color:var(--text-sub);background:var(--bg-card);border:1px solid var(--border);padding:8px 14px;border-radius:999px;cursor:pointer;transition:.14s;}
#page-airec .air-chip:hover{border-color:var(--primary);color:var(--primary);}
#page-airec .air-story{max-width:580px;margin:26px auto 4px;text-align:center;font-size:14px;line-height:2;color:var(--text-light);letter-spacing:-.2px;animation:airrise .6s cubic-bezier(.2,.7,.2,1);}
#page-airec .air-stage{margin-top:14px;padding-bottom:50px;}
#page-airec .air-loading{text-align:center;color:var(--text-light);font-size:13.5px;padding:52px 0;}
#page-airec .air-pulse{display:inline-block;width:30px;height:30px;border:2.5px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:airspin .75s linear infinite;margin-bottom:14px;}
@keyframes airspin{to{transform:rotate(360deg)}}
#page-airec .air-results{animation:airrise .45s cubic-bezier(.2,.7,.2,1);}
@keyframes airrise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#page-airec .air-intro{font-size:19px;font-weight:700;line-height:1.5;letter-spacing:-.4px;color:var(--text);text-align:center;max-width:600px;margin:8px auto 4px;}
#page-airec .air-modeline{font-size:11px;letter-spacing:.4px;color:var(--text-light);text-align:center;margin-bottom:22px;}
#page-airec .air-grid{display:grid;grid-template-columns:1fr;gap:14px;}
@media(min-width:760px){#page-airec .air-grid{grid-template-columns:1fr 1fr;}}
#page-airec .air-card{display:flex;gap:15px;background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:15px;cursor:pointer;transition:.18s;}
#page-airec .air-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(20,25,45,.1);}
#page-airec .air-cv{flex:0 0 96px;aspect-ratio:2/3;border-radius:8px;overflow:hidden;background:var(--bg-input);box-shadow:0 6px 16px rgba(20,20,45,.16);}
#page-airec .air-cv img{width:100%;height:100%;object-fit:cover;}
#page-airec .air-bd{flex:1;min-width:0;display:flex;flex-direction:column;}
#page-airec .air-card h3{font-size:15px;font-weight:700;letter-spacing:-.3px;line-height:1.32;color:var(--text);}
#page-airec .air-au{font-size:11.5px;color:var(--text-light);margin:5px 0 8px;}
#page-airec .air-meta{font-size:11.5px;color:var(--text-sub);}
#page-airec .air-star{color:var(--gold);font-weight:700;}
#page-airec .air-why{margin-top:auto;padding-top:10px;font-size:12.5px;line-height:1.55;color:var(--text-sub);font-style:italic;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
#page-airec .air-why::before{content:'\201C';color:var(--primary);font-weight:700;}
#page-airec .air-read{margin-top:8px;align-self:flex-start;padding:3px 10px;border-radius:99px;background:var(--gold);color:#1a1208;font-size:11px;font-weight:800;}
#page-airec .air-why::after{content:'\201D';color:var(--primary);font-weight:700;}
#page-airec .air-empty{text-align:center;color:var(--text-light);font-size:13.5px;padding:46px 0;line-height:1.7;}
#page-airec .air-foot{font-size:10.5px;color:var(--text-light);margin-top:26px;line-height:1.6;text-align:center;opacity:.75;}
/* 모달 */
#airOv{position:fixed;inset:0;background:rgba(15,20,35,.5);display:none;align-items:flex-end;justify-content:center;z-index:200;backdrop-filter:blur(4px);}
#airOv.on{display:flex;animation:airfade .2s;}
@keyframes airfade{from{opacity:0}to{opacity:1}}
#airOv .air-sheet{background:var(--bg-card);width:100%;max-width:500px;border-radius:24px 24px 0 0;padding:26px 24px 32px;max-height:88vh;overflow:auto;animation:airup .3s cubic-bezier(.2,.7,.2,1);}
@keyframes airup{from{transform:translateY(30px)}to{transform:none}}
@media(min-width:560px){#airOv{align-items:center;}#airOv .air-sheet{border-radius:20px;}}
#airOv .air-stop{display:flex;gap:18px;margin-bottom:16px;}
#airOv .air-scv{flex:0 0 110px;aspect-ratio:2/3;border-radius:10px;overflow:hidden;box-shadow:0 10px 26px rgba(20,20,45,.22);}
#airOv .air-scv img{width:100%;height:100%;object-fit:cover;}
#airOv h2{font-size:19px;font-weight:800;letter-spacing:-.5px;line-height:1.32;color:var(--text);}
#airOv .air-sau{color:var(--text-light);font-size:12.5px;margin:8px 0 11px;}
#airOv .air-smeta{font-size:12px;color:var(--text-sub);}
#airOv .air-swhy{font-style:italic;font-size:14px;line-height:1.66;color:var(--text-sub);border-left:3px solid var(--primary);padding:4px 0 4px 14px;margin:16px 0;}
#airOv .air-sdesc{font-size:13.5px;line-height:1.78;color:var(--text-sub);margin:16px 0;}
#airOv .air-kws{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px;}
#airOv .air-kw{font-size:11.5px;color:var(--text-sub);background:var(--bg-input);padding:5px 11px;border-radius:7px;}
#airOv .air-acts{display:flex;gap:9px;}
#airOv .air-cta{flex:1;background:var(--gold);color:#0f172a;border:0;border-radius:13px;padding:14px;font-size:13.5px;font-weight:700;cursor:pointer;}
#airOv .air-cta2{background:var(--bg-card);color:var(--text-sub);border:1px solid var(--border);border-radius:13px;padding:14px 18px;font-size:13.5px;font-weight:600;cursor:pointer;}
#airOv .air-src{font-size:10.5px;color:var(--text-light);margin-top:15px;line-height:1.5;}

/* ═══ 플로팅 AI 사서 챗봇 (hwc) ═══ */
/* 별이 버블 — 밤하늘 + 별 + 골드 글로우 */
#hwcBubble{position:fixed;right:20px;bottom:24px;z-index:150;width:58px;height:58px;border-radius:50%;
  background:radial-gradient(140px 70px at 30% 8%,rgba(201,168,106,.40),transparent 70%),linear-gradient(135deg,#243056 0%,#1a2240 60%,#141a30 100%);
  color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:23px;
  box-shadow:0 10px 28px rgba(15,20,35,.42);transition:transform .18s,box-shadow .18s,opacity .2s;animation:hwcPulse 3s ease-out infinite;}
#hwcBubble .bx-star{filter:drop-shadow(0 0 6px rgba(201,168,106,.7));}
#hwcBubble:hover{transform:translateY(-3px) scale(1.06);box-shadow:0 16px 38px rgba(15,20,35,.5);}
#hwcBubble.hide{transform:scale(0);opacity:0;pointer-events:none;}
#hwcBubble .hwc-dot{position:absolute;top:-1px;right:-1px;width:13px;height:13px;border-radius:50%;background:var(--gold);border:2px solid var(--bg);}
@keyframes hwcPulse{0%{box-shadow:0 10px 28px rgba(15,20,35,.42),0 0 0 0 rgba(201,168,106,.45);}70%{box-shadow:0 10px 28px rgba(15,20,35,.42),0 0 0 14px rgba(201,168,106,0);}100%{box-shadow:0 10px 28px rgba(15,20,35,.42),0 0 0 0 rgba(201,168,106,0);}}
#hwcPanel{position:fixed;right:20px;bottom:24px;z-index:151;width:380px;max-width:calc(100vw - 32px);height:600px;max-height:calc(100vh - 110px);background:var(--bg-card);border:1px solid var(--border);border-radius:20px;box-shadow:0 24px 60px rgba(15,20,35,.32);display:none;flex-direction:column;overflow:hidden;}
#hwcPanel.on{display:flex;animation:hwcOpen .26s cubic-bezier(.2,.8,.2,1);}
@keyframes hwcOpen{from{opacity:0;transform:translateY(16px) scale(.96);}to{opacity:1;transform:none;}}
/* 별이 헤더 — 밤하늘(남색+별빛+골드) */
.hwc-head{display:flex;align-items:center;gap:11px;padding:15px 16px;border-bottom:1px solid rgba(255,255,255,.08);position:relative;overflow:hidden;
  background:radial-gradient(150px 80px at 16% -20%,rgba(201,168,106,.30),transparent 70%),linear-gradient(135deg,#243056 0%,#1a2240 60%,#141a30 100%);}
.hwc-head::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(1.2px 1.2px at 72% 34%,rgba(255,255,255,.85),transparent),radial-gradient(1.2px 1.2px at 86% 62%,rgba(255,255,255,.6),transparent),radial-gradient(1.4px 1.4px at 60% 70%,rgba(255,255,255,.5),transparent);}
.hwc-ava{width:38px;height:38px;border-radius:50%;background:#1a2240;color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:18px;flex:0 0 auto;position:relative;z-index:1;box-shadow:0 0 0 1px rgba(201,168,106,.45),0 0 14px rgba(201,168,106,.40);}
.hwc-htxt{flex:1;min-width:0;position:relative;z-index:1;}
.hwc-htxt b{font-size:15px;color:#f4f1ea;font-weight:800;letter-spacing:-.3px;font-family:'Noto Serif KR',serif;}
.hwc-htxt span{display:block;font-size:11px;color:#b9c0d4;margin-top:1px;}
.hwc-htxt span::before{content:'●';color:var(--gold);font-size:8px;margin-right:4px;vertical-align:1px;}
.hwc-x{background:none;border:none;color:#b9c0d4;font-size:22px;cursor:pointer;width:30px;height:30px;border-radius:8px;line-height:1;flex:0 0 auto;position:relative;z-index:1;}
.hwc-x:hover{background:rgba(255,255,255,.14);color:#fff;}
.hwc-body{flex:1;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:11px;background:var(--bg);}
.hwc-row{display:flex;max-width:100%;}
.hwc-row.user{justify-content:flex-end;}
.hwc-msg{max-width:82%;padding:10px 13px;border-radius:15px;font-size:13.5px;line-height:1.62;word-break:break-word;white-space:pre-wrap;}
.hwc-row.bot .hwc-msg{background:var(--bg-card);border:1px solid var(--border);color:var(--text);border-top-left-radius:5px;}
.hwc-row.user .hwc-msg{background:var(--primary);color:#fff;border-top-right-radius:5px;}
body.dark .hwc-row.user .hwc-msg{color:#0f172a;}
.hwc-cards{display:flex;flex-direction:column;gap:8px;max-width:90%;}
.hwc-card{display:flex;gap:11px;background:var(--bg-card);border:1px solid var(--border);border-radius:13px;padding:9px;cursor:pointer;transition:.16s;}
.hwc-card:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:0 8px 20px rgba(20,25,45,.1);}
.hwc-cv{flex:0 0 50px;aspect-ratio:2/3;border-radius:6px;overflow:hidden;background:var(--bg-input);box-shadow:0 4px 10px rgba(20,20,45,.16);}
.hwc-cv img{width:100%;height:100%;object-fit:cover;}
.hwc-cv .lc-fb{font-size:8px;padding:3px;}
.hwc-ci{flex:1;min-width:0;display:flex;flex-direction:column;}
.hwc-read{display:inline-flex;align-items:center;gap:3px;margin-top:7px;align-self:flex-start;padding:5px 12px;border-radius:9px;background:rgba(26,41,66,.055);color:var(--primary);font-size:11px;font-weight:700;border:1px solid rgba(26,41,66,.10);transition:.14s;}
.hwc-read::after{content:'\203A';font-size:13px;line-height:1;opacity:.65;}
.hwc-card:hover .hwc-read{background:var(--primary);color:#fff;border-color:var(--primary);}
body.dark .hwc-read{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);}
/* 대출 횟수(인기도) — 있을 때만, 차분한 골드톤 */
.hwc-loan{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:700;color:#9a8348;}
.hwc-loan b{color:#7a6534;}
body.dark .hwc-loan{color:#c5a85e;}body.dark .hwc-loan b{color:#d9bd72;}
.hwc-more{width:100%;margin-top:2px;padding:11px;border:1px solid var(--primary);background:var(--bg-card);color:var(--primary);border-radius:12px;font-weight:800;font-size:13px;cursor:pointer;transition:.16s;}
.hwc-more:hover{background:var(--primary);color:#fff;}
.hwc-ci h4{font-size:12.5px;font-weight:700;color:var(--text);line-height:1.3;}
.hwc-ci .au{font-size:10.5px;color:var(--text-light);margin:3px 0 5px;}
.hwc-ci .why{font-size:11px;color:var(--text-sub);line-height:1.45;font-style:italic;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.hwc-ci .why::before{content:'\201C';color:var(--primary);}
.hwc-ci .why::after{content:'\201D';color:var(--primary);}
.hwc-typing{display:flex !important;gap:4px;align-items:center;}
.hwc-typing i{width:7px;height:7px;border-radius:50%;background:var(--text-light);display:inline-block;animation:hwcBlink 1.2s infinite both;}
.hwc-typing i:nth-child(2){animation-delay:.2s;}
.hwc-typing i:nth-child(3){animation-delay:.4s;}
@keyframes hwcBlink{0%,80%,100%{opacity:.25;transform:translateY(0);}40%{opacity:1;transform:translateY(-3px);}}
.hwc-chips{display:flex;flex-wrap:wrap;gap:6px;padding:2px;}
.hwc-chip{font-size:11.5px;color:var(--text-sub);background:var(--bg-card);border:1px solid var(--border);padding:6px 11px;border-radius:999px;cursor:pointer;transition:.14s;}
.hwc-chip:hover{border-color:var(--primary);color:var(--primary);}
.hwc-foot{display:flex;gap:8px;align-items:flex-end;padding:11px 12px;border-top:1px solid var(--border);background:var(--bg-card);}
.hwc-foot textarea{flex:1;border:1px solid var(--border);background:var(--bg-input);border-radius:13px;padding:9px 13px;font-size:13.5px;font-family:inherit;color:var(--text);resize:none;outline:none;max-height:96px;line-height:1.5;}
.hwc-foot textarea:focus{border-color:var(--primary);}
.hwc-send{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:var(--gold);color:#0f172a;border:none;cursor:pointer;font-size:17px;display:flex;align-items:center;justify-content:center;transition:.15s;}
.hwc-send:hover{opacity:.9;}
.hwc-send:disabled{opacity:.4;cursor:default;}
@media(max-width:900px){
  #hwcBubble{bottom:calc(78px + env(safe-area-inset-bottom));right:14px;}
  /* 8/14 사장님 수정요청: 별이 클릭 즉시 전체화면 — 참나루 헤더까지 덮는다(z-index 100 위) */
  #hwcPanel{top:0;bottom:0;right:0;left:0;width:100%;max-width:100%;height:100dvh;max-height:100dvh;border-radius:0;padding-bottom:env(safe-area-inset-bottom);z-index:210;}
  /* 9/1 사장님 지적: 폰에서 별이가 찾아 준 책을 눌러도 상세가 안 열리던 것.
     실제로는 열렸지만 별이 전체화면(z-index 210)이 상세창(#lcDetail z-index 200)을 덮고 있었다. 상세를 위로. */
  #lcDetail{z-index:220;}
}
/* ── 추가 칸 스타일 (꾸미기 신규 템플릿) ── */
.ml-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:14px;}
.ml-gd{cursor:pointer;}
.ml-gd-cv{width:100%;aspect-ratio:5/7;border-radius:7px;overflow:hidden;background:var(--bg-input);box-shadow:0 6px 16px rgba(20,28,50,.16);}
.ml-gd-cv img{width:100%;height:100%;object-fit:cover;}
.ml-gd-t{font-size:11.5px;font-weight:700;margin-top:7px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ml-mg{display:flex;gap:16px;align-items:center;padding:14px 0;border-top:1px solid var(--border);cursor:pointer;}
.ml-mg:first-of-type{border-top:0;padding-top:2px;}
.ml-mg.rev{flex-direction:row-reverse;}
.ml-mg-cv{width:84px;height:120px;flex:0 0 84px;border-radius:7px;overflow:hidden;background:var(--bg-input);box-shadow:0 6px 16px rgba(20,28,50,.16);}
.ml-mg-cv img{width:100%;height:100%;object-fit:cover;}
.ml-mg-x{flex:1;min-width:0;}
.ml-mg-k{font-size:11px;font-weight:800;color:var(--accent);}
.ml-mg-h{font-size:17px;font-weight:800;margin:5px 0;line-height:1.35;}
.ml-mg-d{font-size:12.5px;color:var(--text-sub);line-height:1.55;}
.ml-bn{display:flex;gap:20px;align-items:center;border-radius:16px;padding:22px;color:#fff;background:linear-gradient(120deg,#2a3650,#3a6ea5);cursor:pointer;}
.ml-bn-cv{width:92px;height:132px;flex:0 0 92px;border-radius:7px;overflow:hidden;box-shadow:0 10px 28px rgba(0,0,0,.3);}
.ml-bn-cv img{width:100%;height:100%;object-fit:cover;}
.ml-bn-x{flex:1;min-width:0;}
.ml-bn-k{font-size:11px;font-weight:800;color:var(--gold);letter-spacing:.5px;}
.ml-bn-h{font-size:19px;font-weight:800;line-height:1.4;margin:8px 0 6px;}
.ml-bn-a{font-size:12.5px;opacity:.9;}
.ml-nw{width:104px;flex:0 0 104px;position:relative;cursor:pointer;}
.ml-nw-b{position:absolute;top:9px;right:9px;z-index:2;color:#fff;font-size:9.5px;font-weight:700;letter-spacing:1.2px;text-shadow:0 1px 3px rgba(0,0,0,.6);}   /* 실험: 골드 배지 대신 코너에 작은 라벨 텍스트만(잡지 캡션 느낌) */
.ml-nw-cv{width:104px;height:150px;border-radius:7px;overflow:hidden;background:var(--bg-input);margin-bottom:7px;box-shadow:0 6px 16px rgba(20,28,50,.16);}
.ml-nw-cv img{width:100%;height:100%;object-fit:cover;transition:transform .3s cubic-bezier(.2,.7,.2,1);}
.ml-nw-cv{transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s;}
.ml-qc{width:248px;flex:0 0 248px;border:1px solid var(--border);border-radius:16px;padding:18px;background:var(--bg-card);display:flex;flex-direction:column;min-height:172px;}
.ml-qc-m{font-size:34px;color:var(--gold);line-height:.4;height:18px;font-weight:800;}
.ml-qc-q{font-size:15px;font-weight:700;line-height:1.55;flex:1;margin:12px 0;}
.ml-qc-f{display:flex;align-items:center;gap:10px;}
.ml-qc-cv{width:30px;height:42px;flex:0 0 30px;border-radius:4px;overflow:hidden;background:var(--bg-input);}
.ml-qc-cv img{width:100%;height:100%;object-fit:cover;}
.ml-qc-cv .lc-fb{font-size:8px;padding:2px;}
.ml-qc-a{font-size:11.5px;color:var(--text-sub);font-weight:700;}
.ml-sw-wrap{display:flex;flex-direction:column;align-items:center;}
.ml-sw{width:282px;border:1px solid var(--border);border-radius:20px;overflow:hidden;background:var(--bg-card);box-shadow:0 18px 50px rgba(20,28,50,.2);cursor:pointer;}
.ml-sw-cv{height:300px;position:relative;background:var(--bg-input);}
.ml-sw-cv img{width:100%;height:100%;object-fit:cover;}
.ml-sw-cv .lc-fb{font-size:18px;}
.ml-sw-ov{position:absolute;inset:0;display:flex;align-items:flex-end;padding:18px;background:linear-gradient(to top,rgba(15,20,35,.82),rgba(15,20,35,0) 55%);}
.ml-sw-t{color:#fff;font-size:22px;font-weight:800;text-shadow:0 2px 10px rgba(0,0,0,.5);}
.ml-sw-b{padding:16px 18px;}
.ml-sw-d{font-size:12.5px;color:var(--text-sub);line-height:1.6;}
.ml-sw-a{display:flex;gap:10px;margin-top:14px;}
.ml-sw-a>div{flex:1;text-align:center;padding:12px;border-radius:13px;font-weight:800;font-size:14px;}
.ml-sw-a .x{background:var(--bg-input);color:var(--text-light);}
.ml-sw-a .o{background:var(--primary);color:#fff;}
body.dark .ml-sw-a .o{background:var(--gold);color:#0f172a;}
.ml-sw-hint{font-size:11.5px;color:var(--text-light);margin-top:11px;}
.ml-cl{display:flex;gap:16px;align-items:center;border:1px solid var(--border);border-radius:16px;padding:16px;background:var(--bg-card);cursor:pointer;}
.ml-cl-cvs{display:flex;gap:8px;}
.ml-cl-cv{width:54px;height:78px;flex:0 0 54px;border-radius:6px;overflow:hidden;background:var(--bg-input);box-shadow:0 4px 12px rgba(20,28,50,.16);}
.ml-cl-cv img{width:100%;height:100%;object-fit:cover;}
.ml-cl-cv .lc-fb{font-size:8px;padding:3px;}
.ml-cl-n{font-size:12px;font-weight:800;color:var(--accent);white-space:nowrap;}
/* 관리자 미리보기 모드 — 앱 크롬 숨기고 우리 도서관만 */
body.preview-mode .header,body.preview-mode .side-nav,body.preview-mode #hwcBubble,body.preview-mode #hwcPanel{display:none !important;}
/* 미리보기는 '꾸미기 큐레이션'만 보이게 — 고전/International 페이지의 제목·공지·전체 서가 숨김(우리도서관 미리보기와 동일하게) */
body.preview-mode #page-collection > *:not(#collectionCuration),
body.preview-mode #page-international > *:not(#intlCuration){display:none !important;}
body.preview-mode .main{padding-top:8px;}
/* (8/31 삭제) 미리보기도 같은 이유로 왼쪽만 못박지 않는다 — --page-pad가 좌우를 같이 맡는다. */

/* ── 챌린지 미션 패널 (리더 우측) ── */
.mp-card{background:var(--bg-input);border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:11px}
.mp-t{font-size:14px;font-weight:800;display:flex;align-items:center;gap:7px;margin-bottom:3px;color:var(--text)}
.mp-v{font-size:11.5px;font-weight:700;color:var(--gold);background:rgba(180,105,14,.14);padding:1px 8px;border-radius:20px}
.mp-s{font-size:12px;color:var(--text-light);margin-bottom:10px;line-height:1.5}
.mp-load{color:var(--text-light);font-size:12.5px;padding:14px 0;text-align:center}
.mp-q{border-top:1px solid var(--border);padding:12px 0}
.mp-q:first-child{border-top:0;padding-top:2px}
.mp-qn{font-size:11px;font-weight:800;color:var(--accent)}
.mp-qq{font-size:13.5px;font-weight:600;margin:3px 0 9px;line-height:1.5;color:var(--text)}
.mp-opt{display:flex;align-items:center;gap:9px;border:1.5px solid var(--border);border-radius:9px;padding:10px 12px;margin-bottom:7px;cursor:pointer;font-size:13px;background:var(--bg-card);color:var(--text);transition:.12s}
.mp-opt:hover{border-color:var(--accent)}
.mp-mk{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--border);flex:none;display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff}
.mp-opt.mp-right{border-color:#2f9e6f;background:rgba(47,158,111,.14);color:#1f6b4a;font-weight:700}
.mp-opt.mp-right .mp-mk{background:#2f9e6f;border-color:#2f9e6f}
.mp-opt.mp-wrong{border-color:#c0392b;background:rgba(192,57,43,.12);color:#b3382b;font-weight:700}
.mp-opt.mp-wrong .mp-mk{background:#c0392b;border-color:#c0392b}
.mp-opt.mp-dim{opacity:.5}
.mp-opt.mp-lock{pointer-events:none}
.mp-expl{display:none;font-size:12px;color:var(--text-sub);background:rgba(127,127,127,.1);border-radius:8px;padding:9px 11px;margin-top:4px;line-height:1.5}
.mp-expl.mp-show{display:block}
.mp-ta{width:100%;border:1.5px solid var(--border);border-radius:10px;padding:11px;font-size:13.5px;font-family:inherit;resize:vertical;min-height:60px;background:var(--bg-card);color:var(--text)}
.mp-ta:focus{outline:none;border-color:var(--accent)}
.mp-sub{display:flex;align-items:center;gap:9px;margin-top:9px}
.mp-btn{border:0;background:var(--primary);color:var(--bg-card);border-radius:9px;padding:9px 16px;font-size:13px;font-weight:700;cursor:pointer}
.mp-btn:disabled{opacity:.5;cursor:default}
.mp-done{display:none;font-size:12.5px;font-weight:800;color:#2f9e6f}
.mp-note{font-size:13px;color:var(--text-sub);background:var(--bg-input);border:1px dashed var(--border);border-radius:10px;padding:14px;line-height:1.6}
.mp-prog{margin:0 0 12px}
.mp-prog-top{display:flex;justify-content:space-between;font-size:12.5px;font-weight:800;color:var(--text);margin-bottom:5px}
.mp-prog-top .mp-prog-full{color:var(--gold)}
.mp-prog-bar{height:9px;border-radius:6px;background:var(--bg-input);overflow:hidden}
.mp-prog-fill{height:100%;border-radius:6px;background:linear-gradient(90deg,var(--accent),var(--gold));transition:width .35s ease}
/* 한 문제씩 넘기기(프로토타입: 개츠비) — 문제↔장면 1:1 */
.mp-step-on .mp-q{border-top:none;padding-top:2px}
.mp-step-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px;padding-top:13px;border-top:1px solid var(--border)}
.mp-step-count{font-size:13px;font-weight:800;color:var(--text-sub)}
.mp-step-count b{color:var(--accent);font-size:15px}
.mp-step-btn{border:1.5px solid var(--border);background:var(--bg-card);color:var(--text);font-size:13px;font-weight:700;padding:9px 16px;border-radius:9px;cursor:pointer;transition:.12s}
.mp-step-btn:hover:not(:disabled){border-color:var(--accent)}
.mp-step-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.mp-step-btn:disabled{opacity:.4;cursor:default}
/* 결정적 장면 카드(왼쪽) — 인용구 + 배경 설명 */
#mpSceneBox{max-width:680px}
.mp-scene-quote{font-size:20px;font-weight:700;line-height:1.7;color:var(--text);border:1.5px solid var(--border);border-radius:16px;padding:30px 32px;margin-bottom:30px}
.mp-scene-desc{font-family:'Noto Sans KR','Malgun Gothic',system-ui,sans-serif}
.mp-scene-desc-h{font-size:14px;font-weight:800;color:var(--accent);margin-bottom:13px;letter-spacing:.3px}
.mp-scene-desc p{font-size:15.5px;line-height:2.05;color:var(--text);opacity:.86;margin:0;text-align:left}
.mp-scene-img{width:100%;max-width:520px;border-radius:14px;margin:0 0 26px;display:block}
body.dark .mp-scene-quote{background:rgba(212,169,59,.05)}

/* ── 모바일 가로 책줄: 오른쪽 끝 표지가 반쯤 잘리지 않게 (8/31 사용자 요청) ──
   카드 폭을 화면에 딱 떨어지게 JS(fitMlCars)가 --mlcw 로 내려준다.
   기본값(112/124/104px)은 JS가 아직 안 돌았을 때만 쓰인다. 스타일시트 맨 뒤라 앞의 고정폭 규칙을 이긴다. */
@media(max-width:760px){
  .ml-bk{width:var(--mlcw,112px);}
  .ml-bk-cv{width:100%;}
  .ml-hrow .cl-card{flex:0 0 var(--mlcw,124px);width:var(--mlcw,124px);}
  /* 기본값을 ml-bk와 같은 112px로 — 줄마다 표지 장수가 3장/4장으로 갈리지 않게(한 화면 한 리듬) */
  .ml-nw{width:var(--mlcw,112px);flex:0 0 var(--mlcw,112px);}
  .ml-nw-cv{width:100%;height:auto;aspect-ratio:104/150;}
  .ml-hrow{scroll-snap-type:x mandatory;}
  /* 표지 줄만 화면 끝까지 (8/31 사용자: 앱처럼 좌우 여백 없이).
     제목·설명 글은 .page 여백(--page-pad)을 그대로 지킨다 — 글까지 끝에 붙으면 읽기 나쁨. */
  .ml-car{margin-left:calc(var(--page-pad,14px) * -1);margin-right:calc(var(--page-pad,14px) * -1);}
}

/* ── 8/31 사장님: 폰 '내서재'가 답답하다 — 상자 안 상자로 좌우가 두 번 깎이던 것을 걷어낸다 ──
   PC는 그대로. 폰에서만 한 겹씩 덜어 글이 놓일 자리를 넓힌다. */
@media (max-width:760px){
  /* ① 카드 안쪽 여백 — 페이지 20 + 카드 22 = 42px가 깎이고 있었다 → 34px */
  .ag-card{padding:16px 14px;border-radius:14px;}
  .quest-map{padding:16px 14px;border-radius:14px;}
  /* ② 빈 상태 안내는 카드 안에 또 회색 상자를 그리고 있었다(3중) — 상자를 없애고 글만 */
  .qg-empty{background:none;padding:24px 4px;}
  .ag-empty{padding:18px 2px;}
  /* ③ 인생책: 폰에서 세로로 접느라 표지 오른쪽이 통째로 비어 있었다 → 표지를 줄이고 옆에 나란히 */
  .bm-life{flex-direction:row;gap:14px;}
  .bm-cover{width:100px;height:144px;}
  .bm-life-t{font-size:18px;}
}