/* 2026-11-02 다락방 책 상세 · 노션 페이지 스타일 (사용자 지시: 노션을 따라하자, "이어서 진행")
   - 노션 페이지처럼: 가운데 좁은 본문 폭, 표지는 왼쪽 작은 썸네일, 제목 → 속성 표(저자·분류·출판사·입고 상태) → 내용 블록.
   - 단추는 회색 글자 단추(마우스를 올리면 연한 회색), 주 단추만 파랑. 접는 칸은 노션 토글(▸)처럼.
   - index.html(다락방)에만 연결. 사내 서재(space.html, 매거진 B 배치)는 그대로. 되돌리기: 이 파일 링크만 빼면 원래대로.
   - 색·그림자 값은 notion-reading.css 의 --n-* 를 함께 쓴다. */
.book-detail:not([data-layout]){
  --nd-w:880px; --nd-pad:max(20px,calc((100% - var(--nd-w)) / 2));
  background:#fff!important;color:var(--n-text);font-family:var(--n-ui)
}
.book-detail:not([data-layout])::backdrop{background:#fff}
.book-detail[open]:not([data-layout]){display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);column-gap:36px;align-content:start;padding:0 var(--nd-pad) 64px}
.book-detail:not([data-layout])>*{grid-column:1/-1;min-width:0}
.book-detail:not([data-layout])>.book-detail-nav{grid-row:1}
.book-detail:not([data-layout])>.demo-banner{grid-row:2}
.book-detail:not([data-layout])>.book-detail-visual{grid-column:1;grid-row:3;align-self:start}
.book-detail:not([data-layout])>.book-detail-top{grid-column:2;grid-row:3}
.book-detail:not([data-layout])>.reading-notes{grid-row:4}
.book-detail:not([data-layout])>.community{grid-row:5}
.book-detail:not([data-layout])>.book-detail-more:not(.book-api-extras){grid-row:6}
.book-detail:not([data-layout])>.book-api-extras{grid-row:7}
.book-detail:not([data-layout])>:not(.book-detail-nav):not(.demo-banner):not(.book-detail-visual):not(.book-detail-top):not(.reading-notes):not(.community):not(.book-detail-more){grid-row:9}

/* ── 맨 위 막대: 노션의 위쪽 경로처럼 ── */
.book-detail:not([data-layout]) .book-detail-nav{position:sticky;top:0;z-index:20;margin:0 calc(-1 * var(--nd-pad));padding:8px var(--nd-pad);background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:0;box-shadow:0 1px 0 var(--n-line2);font:14px/1.4 var(--n-ui);color:var(--n-gray)}
.book-detail:not([data-layout]) .book-detail-nav button{min-height:30px;padding:0 10px;border:0!important;border-radius:6px;background:transparent;color:var(--n-gray);font:500 14px var(--n-ui);box-shadow:none}
.book-detail:not([data-layout]) .book-detail-nav button:hover{background:var(--n-hover);color:var(--n-text)}

/* ── 표지: 왼쪽 작은 썸네일 ── */
.book-detail:not([data-layout]) .book-detail-visual{background:none!important;margin:44px 0 0;padding:0;min-height:0;display:block}
.book-detail:not([data-layout]) .book-detail-visual img,.book-detail:not([data-layout]) .book-detail-cover:not([hidden]){display:block;width:100%;max-width:160px;height:auto;aspect-ratio:2/3;object-fit:cover;border-radius:4px;box-shadow:rgba(15,15,15,.1) 0 0 0 1px,rgba(15,15,15,.1) 0 2px 4px,rgba(15,15,15,.15) 0 8px 18px}
.book-detail:not([data-layout]) .book-detail-cover[hidden]{display:none}
.book-detail:not([data-layout]) .book-detail-visual figcaption{margin-top:8px;font:11px/1.4 var(--n-ui);color:var(--n-light);text-align:left}

/* ── 제목과 속성 표 ── */
.book-detail:not([data-layout]) .book-detail-top{display:block;padding:40px 0 8px}
.book-detail:not([data-layout]) .book-detail-category{display:inline-flex;align-items:center;height:22px;padding:0 8px;margin:0 0 12px;border-radius:4px;background:#e7f3f8;color:#28456c;font:500 13px/1 var(--n-ui)}
.book-detail:not([data-layout]) h2{font:700 clamp(30px,4vw,40px)/1.2 var(--n-ui)!important;letter-spacing:-.02em;color:var(--n-text);margin:0 0 6px}
.book-detail:not([data-layout]) .book-detail-author{font:16px/1.5 var(--n-ui);color:var(--n-gray);margin:0 0 14px}
.book-detail:not([data-layout]) .owned-status{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;margin:0 0 18px;border-radius:12px;background:#edf3ec;color:#1c3829;font:500 13px/1 var(--n-ui)}
.book-detail:not([data-layout]) .owned-status::before{content:'';width:6px;height:6px;border-radius:50%;background:#448361}
.book-detail:not([data-layout]) .book-detail-identity dl{display:grid;grid-template-columns:140px minmax(0,1fr);gap:0;margin:0 0 8px;font:14px/1.5 var(--n-ui)}
.book-detail:not([data-layout]) .book-detail-identity dt,.book-detail:not([data-layout]) .book-detail-identity dd{min-height:34px;padding:6px 8px;margin:0;display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.book-detail:not([data-layout]) .book-detail-identity dt{color:var(--n-gray);border-radius:4px 0 0 4px}
.book-detail:not([data-layout]) .book-detail-identity dd{color:var(--n-text);border-radius:0 4px 4px 0}
.book-detail:not([data-layout]) .book-detail-identity dt:hover,.book-detail:not([data-layout]) .book-detail-identity dt:hover+dd{background:rgba(55,53,47,.04)}
.book-detail:not([data-layout]) .detail-category-edit{display:inline-flex;align-items:center;gap:6px}
.book-detail:not([data-layout]) .detail-category-edit select{height:26px!important;min-height:26px!important;padding:0 24px 0 8px;border:0;border-radius:4px;background:#e7f3f8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2328456c' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 6px center;-webkit-appearance:none;appearance:none;color:#28456c;font:500 13px var(--n-ui)!important;cursor:pointer}
.book-detail:not([data-layout]) .detail-category-edit small,.book-detail:not([data-layout]) [data-category-hint]{font:12px/1.4 var(--n-ui);color:var(--n-light);flex-basis:100%}

/* ── 책 소개: 노션 본문 블록 ── */
.book-detail:not([data-layout]) .book-detail-description{margin-top:26px;padding-top:18px;border-top:1px solid var(--n-line2)}
.book-detail:not([data-layout]) .book-detail-description h3{font:600 20px/1.3 var(--n-ui);color:var(--n-text);margin:0 0 8px;letter-spacing:-.01em}
.book-detail:not([data-layout]) .book-detail-description [data-description]{font:16px/1.75 var(--n-ui);color:var(--n-text);margin:0 0 10px}
.book-detail:not([data-layout]) .book-detail-disclaimer{font:12px/1.6 var(--n-ui);color:var(--n-light);margin:4px 0}
.book-detail:not([data-layout]) a{color:inherit;text-decoration:underline;text-decoration-color:rgba(55,53,47,.4);text-underline-offset:2px}
.book-detail:not([data-layout]) a:hover{text-decoration-color:var(--n-text)}
.book-detail:not([data-layout]) .external-intro-link,.book-detail:not([data-layout]) .book-api-source{font:14px/1.6 var(--n-ui);color:var(--n-gray);border:0;padding:0}

/* 글자 단추: 회색 글자, 올리면 연한 회색 */
.book-detail:not([data-layout]) .reading-note-open,.book-detail:not([data-layout]) .book-admin-edit,.book-detail:not([data-layout]) button.link,
.book-detail:not([data-layout]) .favorite-control,.book-detail:not([data-layout]) .ep-open,.book-detail:not([data-layout]) .reading-notes>button,
.book-detail:not([data-layout]) .author-books button{min-height:32px;padding:0 10px;border:0!important;border-radius:6px;background:transparent;color:var(--n-text);font:500 14px/1 var(--n-ui);text-decoration:none;box-shadow:none;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.book-detail:not([data-layout]) .reading-note-open:hover,.book-detail:not([data-layout]) .book-admin-edit:hover,.book-detail:not([data-layout]) button.link:hover,
.book-detail:not([data-layout]) .favorite-control:hover,.book-detail:not([data-layout]) .ep-open:hover,.book-detail:not([data-layout]) .reading-notes>button:hover,
.book-detail:not([data-layout]) .author-books button:hover{background:var(--n-hover)}
.book-detail:not([data-layout]) .reading-note-open{margin:10px 0 0 -10px;color:var(--n-gray)}
.book-detail:not([data-layout]) .reading-notes>button{margin:14px 0 0 -10px;color:var(--n-gray)}
.book-detail:not([data-layout]) .reading-notes>p:last-child{font:12px/1.6 var(--n-ui);color:var(--n-light)}

/* ── 아래 칸들: 같은 폭의 노션 블록 ── */
.book-detail:not([data-layout]) .reading-notes,.book-detail:not([data-layout]) .community,.book-detail:not([data-layout]) .book-detail-more{padding:28px 0 0!important;margin:28px 0 0;border-top:1px solid var(--n-line2);background:transparent!important}
.book-detail:not([data-layout]) .reading-notes>h3,.book-detail:not([data-layout]) .community>h3,.book-detail:not([data-layout]) .book-detail-more>h3{font:600 20px/1.3 var(--n-ui)!important;letter-spacing:-.01em;color:var(--n-text);margin:0 0 10px}
.book-detail:not([data-layout]) .community h4{font:600 15px/1.4 var(--n-ui);color:var(--n-text);margin:22px 0 4px}
.book-detail:not([data-layout]) .community .fine,.book-detail:not([data-layout]) .community p{font:14px/1.6 var(--n-ui);color:var(--n-gray)}

/* 노션 토글(▸) */
.book-detail:not([data-layout]) .book-detail-more details{border:0;margin:2px 0}
.book-detail:not([data-layout]) .book-detail-more summary{list-style:none;display:flex;align-items:center;gap:6px;min-height:32px;padding:0 6px 0 2px;margin-left:-4px;border-radius:6px;font:500 15px/1.4 var(--n-ui);color:var(--n-text);cursor:pointer;text-decoration:none;border-bottom:0}
.book-detail:not([data-layout]) .book-detail-more summary::-webkit-details-marker{display:none}
.book-detail:not([data-layout]) .book-detail-more summary::before{content:'';width:20px;height:20px;flex:0 0 20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='%2391918e'%3E%3Cpath d='M9 6l7 6-7 6z'/%3E%3C/svg%3E") center/14px no-repeat;transition:transform .15s}
.book-detail:not([data-layout]) .book-detail-more details[open]>summary::before{transform:rotate(90deg)}
.book-detail:not([data-layout]) .book-detail-more summary::after{display:none!important}
.book-detail:not([data-layout]) .book-detail-more summary:hover{background:var(--n-hover)}
.book-detail:not([data-layout]) .book-detail-more details>*:not(summary){margin-left:24px}
.book-detail:not([data-layout]) .more-toc{font:14px/1.75 var(--n-ui);color:var(--n-text)}
.book-detail:not([data-layout]) .more-source,.book-detail:not([data-layout]) .more-note{font:12px/1.5 var(--n-light);color:var(--n-light)}
.book-detail:not([data-layout]) .more-stock{display:grid;grid-template-columns:140px minmax(0,1fr);gap:0;font:14px/1.5 var(--n-ui)}
.book-detail:not([data-layout]) .more-stock dt,.book-detail:not([data-layout]) .more-stock dd{padding:6px 8px;margin:0}
.book-detail:not([data-layout]) .more-stock dt{color:var(--n-gray)}
.book-detail:not([data-layout]) .more-link{display:inline-flex;align-items:center;min-height:28px;padding:0 8px;border-radius:6px;text-decoration:none;color:var(--n-text);background:rgba(55,53,47,.06);margin:2px 4px 2px 0;font:500 13px var(--n-ui)}
.book-detail:not([data-layout]) .more-link:hover{background:var(--n-press)}

/* 같은 작가의 다른 책·영상: 노션 갤러리 카드 */
.book-detail:not([data-layout]) .author-books,.book-detail:not([data-layout]) .book-videos{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.book-detail:not([data-layout]) .author-books button{min-height:44px;height:auto;padding:10px 12px;border-radius:6px;box-shadow:var(--n-shadow-s)!important;justify-content:flex-start;text-align:left;line-height:1.4;white-space:normal}
.book-detail:not([data-layout]) .book-videos>a{border-radius:6px;overflow:hidden;box-shadow:var(--n-shadow-s);text-decoration:none;background:#fff}
.book-detail:not([data-layout]) .book-videos>a:hover{background:rgba(55,53,47,.03)}

/* ── 독자 기록과 댓글: 노션 댓글 입력처럼 ── */
.book-detail:not([data-layout]) .community textarea{width:100%;min-height:72px;padding:10px 12px;border:0!important;border-radius:6px;background:rgba(242,241,238,.6);box-shadow:inset 0 0 0 1px rgba(15,15,15,.1);font:15px/1.6 var(--n-ui)!important;color:var(--n-text);resize:vertical;outline:0}
.book-detail:not([data-layout]) .community textarea:focus{background:#fff;box-shadow:inset 0 0 0 1px rgba(35,131,226,.57),0 0 0 3px rgba(35,131,226,.25)}
.book-detail:not([data-layout]) .community textarea::placeholder{color:var(--n-light)}
.book-detail:not([data-layout]) .ep-bar{display:flex;gap:2px;margin:4px 0}
.book-detail:not([data-layout]) .ep-open{min-height:28px;padding:0 8px;color:var(--n-gray);font-size:13px}
.book-detail:not([data-layout]) .community .row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}
.book-detail:not([data-layout]) .community label.inline{font:13px var(--n-ui);color:var(--n-gray)}
.book-detail:not([data-layout]) .community select{height:30px!important;min-height:30px!important;padding:0 26px 0 8px;border:0;border-radius:6px;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23787774' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center;-webkit-appearance:none;appearance:none;color:var(--n-gray);font:500 13px var(--n-ui)!important;cursor:pointer}
.book-detail:not([data-layout]) .community select:hover{background-color:var(--n-hover)}
.book-detail:not([data-layout]) .community-form button[type=submit],.book-detail:not([data-layout]) .community-form>button:last-child,.book-detail:not([data-layout]) .community .row>button{min-height:32px;height:32px;padding:0 14px;border:0;border-radius:6px;background:var(--n-blue);color:#fff;font:500 14px/1 var(--n-ui);box-shadow:none}
.book-detail:not([data-layout]) .community-form button[type=submit]:hover,.book-detail:not([data-layout]) .community .row>button:hover{background:#0b6fd3}
.book-detail:not([data-layout]) .favorite-control{color:var(--n-gray)}
.book-detail:not([data-layout]) button.link{margin-left:-10px;color:var(--n-gray)}

/* ── 휴대폰: 표지는 제목 위 작은 썸네일 ── */
@media(max-width:760px){
  .book-detail[open]:not([data-layout]){grid-template-columns:minmax(0,1fr);column-gap:0;padding:0 16px 48px}
  .book-detail:not([data-layout])>.book-detail-visual{grid-column:1;grid-row:3}
  .book-detail:not([data-layout])>.book-detail-top{grid-column:1;grid-row:4}
  .book-detail:not([data-layout])>.reading-notes{grid-row:5}
  .book-detail:not([data-layout])>.community{grid-row:6}
  .book-detail:not([data-layout])>.book-detail-more:not(.book-api-extras){grid-row:7}
  .book-detail:not([data-layout])>.book-api-extras{grid-row:8}
  .book-detail:not([data-layout])>.book-detail-visual{margin-top:24px}
  .book-detail:not([data-layout]) .book-detail-visual img,.book-detail:not([data-layout]) .book-detail-cover:not([hidden]){max-width:96px}
  .book-detail:not([data-layout]) .book-detail-nav{margin:0 -16px;padding:8px 16px}
  .book-detail:not([data-layout]) .book-detail-top{padding-top:16px}
  .book-detail:not([data-layout]) .book-detail-identity dl,.book-detail:not([data-layout]) .more-stock{grid-template-columns:96px minmax(0,1fr)}
}

/* 다듬기 1 */
.book-detail:not([data-layout]) .book-detail-more details,.book-detail:not([data-layout]) .book-detail-more details[open]{margin:0!important;padding:0!important;border:0!important}
.book-detail:not([data-layout]) .book-detail-more details[open]>summary{margin-bottom:4px}
.book-detail:not([data-layout]) .book-detail-more>p{font:14px/1.6 var(--n-ui);color:var(--n-gray);margin:0 0 8px}
.book-detail:not([data-layout]) .book-api-extras h3{font:600 16px/1.4 var(--n-ui)!important;margin:18px 0 6px}
.book-detail:not([data-layout]) .book-api-extras>h3:first-child{font-size:20px!important;margin-top:0}
.book-detail:not([data-layout]) .book-api-extras button:not(.author-books button){min-height:32px;height:auto;padding:6px 12px;border:0!important;border-radius:6px;background:rgba(55,53,47,.06)!important;color:var(--n-text)!important;font:500 14px/1.3 var(--n-ui);box-shadow:none}
.book-detail:not([data-layout]) .book-api-extras button:not(.author-books button):hover{background:var(--n-press)!important}
.book-detail:not([data-layout]) .book-detail-description>a:not(.external-intro-link):not(.book-api-source){display:inline-flex;align-items:center;gap:4px;min-height:30px;padding:0 8px;margin:6px 0 0 -8px;border:0;border-radius:6px;text-decoration:none;color:var(--n-gray);font:500 14px var(--n-ui)}
.book-detail:not([data-layout]) .book-detail-description>a:not(.external-intro-link):not(.book-api-source):hover{background:var(--n-hover);color:var(--n-text)}
.book-detail:not([data-layout]) .book-detail-description>a.external-intro-link{display:block;margin-top:6px;font-size:13px}
.book-detail:not([data-layout]) .book-detail-description>small,.book-detail:not([data-layout]) .book-detail-description>p:not([data-description]){font:12px/1.6 var(--n-ui);color:var(--n-light)}
.book-detail:not([data-layout]) :is(button,a,summary,select):focus{outline:none}
.book-detail:not([data-layout]) :is(button,a,summary,select):focus-visible{outline:2px solid rgba(35,131,226,.5);outline-offset:1px}
.book-detail:not([data-layout]) .book-detail-nav button{outline:none;box-shadow:none!important}
/* 다듬기 2: 휴대폰에서 표지 칸 높이가 0으로 계산돼 제목과 겹치던 문제 → 표지 폭을 숫자로 고정 */
@media(max-width:760px){
  .book-detail:not([data-layout]) .book-detail-visual img,.book-detail:not([data-layout]) .book-detail-cover:not([hidden]){width:96px;height:144px;margin:0}
  .book-detail:not([data-layout]) .book-detail-visual{text-align:left}
}
@media(min-width:761px){.book-detail:not([data-layout]) .book-detail-visual img,.book-detail:not([data-layout]) .book-detail-cover:not([hidden]){width:160px;height:240px}}
@media(max-width:760px){.book-detail:not([data-layout])>.book-detail-visual{height:172px;overflow:visible}}